/**========================================================================
* ?                                ABOUT
* @author         :  Habs
* @email          :  hen.kraken@gmail.com
* @store          :  https://habsdesigns.shop/
* @product        :  Christmas
* @version        :  1.0
*========================================================================**/

/* custom font */

:root{
  --xmas-red: #e24c4c;
  --xmas-green: #2e6b50;
  --xmas-forest: #16261f;
  --xmas-forest-2:#101915;
  --xmas-gold: #ffd45a;
  --xmas-ink: #eafff6;
}

/* general colors */
a { color: var(--xmas-gold); }
body{font-family:'Roboto',sans-serif;background:#0e1412;color:#f8fbff;}
button { background:transparent; color:#fff; }
input,textarea,.post_input_container{
  font-family:'Roboto',sans-serif,'FontAwesome';
  background:#111b16;
  color:#d9efe5;
  border:1px solid #88d6b7 !important;
}
.setdef { color:#fff; }

#main_logo,
.chat_head_logo {
  filter: hue-rotate(-12deg) saturate(125%) brightness(112%) drop-shadow(0 0 6px rgba(255,212,90,.25));
}

/* item with background no effect */
.bback { background:rgba(0,0,0,0.14); }

/* item with background no effect with border */
.bbackb { background:rgba(0,0,0,0.10); border:1px solid rgba(255,255,255,0.06); }

/* item with no background and hover effect */
.bhover:hover, .bhoverr:hover { background:rgba(255,212,90,0.08); }

/* item with background and hover effect */
.bbackhover { background:rgba(255,255,255,0.06); }
.bbackhover:hover { background:rgba(255,255,255,0.10); }

/* item width background and hover effect with a border */
.bbackhoverb { background:rgba(0,0,0,0.06); }
.bbackhoverb:hover { background:rgba(0,0,0,0.10); border:1px solid rgba(255,255,255,0.06); }

/* item with no background with line separator and hover effect */
.blisting { border-bottom: 1px solid #223229; }
.blisting:hover { background: rgba(255,212,90,0.08); }

/* item with no background with line separator */
.blist { border-bottom: 1px solid #223229; }

/* private panel top */
.back_ptop { background:#15221b; color:#e4ffef; }

/* page menu & page sub menu */
.bpmenu:hover { background: rgba(255,212,90,0.10); }
.bsub { background:rgba(255,212,90,0.06); }
.bsub:hover { background:rgba(255,212,90,0.12); }

/* sub menus for card, logs, wall, news */
.bmenu, .submenu { border-bottom:1px solid #2a3b31; }
.bmenu:hover, .submenu:hover { background:rgba(255,212,90,0.06); }

/* box shadow */
.bshadow, .page_element, .float_menu, .btnshadow, .pboxed { box-shadow:0 1px 3px rgba(0,0,0,0.35); }

.bselected { background:rgba(255,212,90,0.10); }


.rselected { background:rgba(255,212,90,0.10); }


.pselected { color:var(--xmas-gold); }


.cselected, .liked { background:rgba(255,255,255,0.06); }


.pag_btn{background:rgba(0,0,0,.18);color:#e8fff5}
.pagselected,.pag_btn:hover{background:rgba(0,0,0,.26)}

/* count and gold tag */
.gtag{background:var(--xmas-green);border:1px solid rgba(255,255,255,.08)}


.bborder { border-bottom:1px solid rgba(255,255,255,0.06); }
.tborder { border-top:1px solid rgba(255,255,255,0.06); }
.lborder, .ppanel { border-left:1px solid rgba(255,255,255,0.06); }
.rborder { border-right:1px solid rgba(255,255,255,0.06); }
.fborder { border:1px solid rgba(255,255,255,0.06); }

/* float top color */
.float_top,.float_ctop { border-bottom:1px solid #2a3b31; }


.bhead,
.bfoot{
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 100% at 50% -30%, rgba(255,212,90,0.08), transparent 55%),
    linear-gradient(180deg, #203329 0%, #16261f 55%, #0e1714 100%);
  color:var(--xmas-gold);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.08),
    inset 0 -1px 0 rgba(0,0,0,0.55),
    0 6px 16px rgba(0,0,0,0.55);
  border-bottom:1px solid rgba(255,255,255,0.06);
  z-index: 2;
}


.bhead::after,
.bhead::before{ content:none !important; }


#chat_head{
  position: relative;
  z-index: 3;
  height: 52px;          
}
#chat_head .btable{ height: 100%; }
#chat_head .bcell_mid{ vertical-align: middle; }
#chat_head .head_option,
#chat_head .show_menu,
#chat_head .chat_head_logo{
  position: relative;
  z-index: 4;
  margin: 0;
  height: 100%;
}
#chat_head .head_option .btable,
#chat_head .show_menu .btable{ height: 100%; }
#chat_head .head_option .bcell_mid,
#chat_head .show_menu .bcell_mid{
  height: 100%;
  display: flex;
  align-items: center;
}
#chat_head i,
#chat_head .fa,
#chat_head .fa-solid,
#chat_head .fa-regular{
  line-height: 1;
  top: 0;
  transform: translateY(0);
}


@keyframes twinkle { 0%,100%{opacity:.75} 50%{opacity:1} }
.bfoot::before{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:6px;
  background:
    radial-gradient(circle, #ff5454 2px, transparent 3px) 8px 50%/24px 10px repeat-x,
    radial-gradient(circle, #4cff7a 2px, transparent 3px) 20px 50%/24px 10px repeat-x,
    radial-gradient(circle, #ffd45a 2px, transparent 3px) 0 50%/24px 10px repeat-x,
    radial-gradient(circle, #67b3ff 2px, transparent 3px) 12px 50%/24px 10px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.35));
  animation: twinkle 2.6s ease-in-out infinite;
  opacity:.9;
  pointer-events:none;
  z-index:1;
}


.bsidebar{
  position: relative;
  color:var(--xmas-gold);
  background:
    radial-gradient(80% 100% at 0% 50%, rgba(255,212,90,0.08), transparent 55%),
    linear-gradient(180deg, #1b2b23 0%, #14231d 55%, #0f1c17 100%);
  box-shadow:
    inset -1px 0 0 rgba(255,255,255,0.05),
    2px 0 14px rgba(0,0,0,0.45);
}
.bsidebar::before{
  content:"";
  position:absolute; inset:0 auto 0 0; width:3px;
  background: linear-gradient(180deg, transparent, var(--xmas-gold), transparent);
  opacity:.66;
  pointer-events:none;
}
.bsidebar::after{
  content:"";
  position:absolute; left:0; right:0; bottom:0; height:56px;
  pointer-events:none;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.28));
}

.modal_top,.pro_top{background:var(--xmas-forest);color:var(--xmas-gold)}
.foot{background:var(--xmas-forest); color:var(--xmas-gold)}


.backglob{background:var(--xmas-forest-2)}
.back_priv,.back_panel,.back_modal,.page_element{background:var(--xmas-forest-2); }
.back_menu{background:var(--xmas-forest-2); }
.back_pmenu{background:var(--xmas-forest-2);color:#fff}
.back_box{background:var(--xmas-forest-2); }
.back_input{background:var(--xmas-forest-2); }
.back_quote{background:var(--xmas-red); color:#190b0b;}

/* main theme color */
.theme_color{color:var(--xmas-ink)}
.default_color { color:var(--xmas-forest); }
.error  { color:#ff4d4d; }
.success { color:#7ddf5b; }
.warn { color:var(--xmas-gold); }

/* buttons */
.theme_btn,.back_theme{background:var(--xmas-red);color:#fff}
.default_btn,.defaultd_btn,.back_default { background:#34483e; color:#fff; }
.ok_btn { background:#7ddf5b; color:#061007; }
.warn_btn { background:var(--xmas-gold); color:#201306; }
.delete_btn { background:#d63434; color:#fff; }

/* send button */
.send_btn{
  position: relative;
  padding: 15px 20px;
  border: none;
  background: rgba(226, 76, 76, 0.12);
  box-shadow: 0 5px 8px rgba(0,0,0,0.35);
  border-radius: 12px;
  cursor: pointer;
  overflow: hidden;
  transition: background .3s ease, transform .3s ease;
  display: inline-flex; align-items:center; justify-content:center;
  backdrop-filter: blur(8px);
}
.send_btn::before,
.send_btn::after{ content:""; position:absolute; inset:0; pointer-events:none; }
.send_btn::after{
  background: linear-gradient(120deg, transparent, rgba(255,212,90,.55), transparent);
  transform: translateX(-100%); transition: transform .6s ease-in-out;
}
.send_btn:hover::after{ transform: translateX(100%); }
.send_btn::before{ border:1px solid rgba(226,76,76,.65); border-radius:inherit; }
.send_btn .fa-paper-plane{
  color:var(--xmas-gold); font-size:20px; z-index:1; transition: transform .3s ease;
}
.send_btn:hover .fa-paper-plane{ transform: scale(1.1); }
.send_btn i[class^="fa"],
.send_btn i[class*=" fa"],
.send_btn span[class^="fa"],
.send_btn span[class*=" fa"]{
  text-shadow: 1px 1px 0 #000, 2px 2px 0 #2a211f, 3px 3px 0 #000;
}

/* default username color */
.user { color:#fff; }

/* chat system message text color */
.chat_system { color:#d7fff1; }

/* opacity for offline users in list */
.offline { opacity:0.5; }

/* menu icon */
.menui,.subi { color:var(--xmas-gold); }

/* wall reply background */
.reply_item { background:#172720; }

/* main post item option wall and news */
.main_post_item { color:#c3ffe9; }

/* input option background colors */
.input_item { color:var(--xmas-gold); }

/* private log bubble colors */
.target_private, .hunt_quote {color:#fff; background:#48585a;}
.hunter_private, .targ_quote {color:#fff; background:var(--xmas-green);}

/* quote in chat background */
.cquote {  background:rgba(10, 16, 14, .86); color:var(--xmas-ink); }

/* tab menu */
.tab_menu { background:#254238; box-shadow:0 1px 3px rgba(0,0,0,0.35); }
.tab_menu_item { }
.tab_selected { background:rgba(255,212,90,0.12); }

/* modal menu */
.modal_mback { background:rgba(0,0,0,0.16); }
.modal_mborder { border-bottom: 1px solid #223229; }
.modal_selected { background:rgba(255,212,90,0.12); }

/* back transparency background for modal box */
.modal_back { background-color:rgba(0,0,0,0.5); }

/* chat logs */
.mbubble { background: rgba(255, 255, 255, 0.16); }
.sys_log { }

/* floating avatar sheen */
.topic_icon{
  width:50px; height:50px; position:relative;
  animation: float 3s ease-in-out infinite;
  background-size:contain; background-repeat:no-repeat; background-position:center;
  background-image:url('/default_images/avatar/default_system.png');
  -webkit-mask-image:url('/default_images/avatar/default_system.png');
  -webkit-mask-size:contain; -webkit-mask-repeat:no-repeat; -webkit-mask-position:center;
  mask-image:url('/default_images/avatar/default_system.png');
  mask-size:contain; mask-repeat:no-repeat; mask-position:center;
  overflow:hidden; border-radius:50%;
  filter: hue-rotate(-12deg) saturate(135%) brightness(112%);
}
@keyframes float { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-4px)} }
.topic_icon::before{
  content:""; position:absolute; top:-50%; left:-75%; width:200%; height:200%;
  background: linear-gradient(120deg, rgba(255,212,90,0.10) 0%, rgba(255,212,90,0.35) 50%, rgba(255,212,90,0.10) 100%);
  transform: rotate(25deg);
  animation: glassShimmer 2.5s ease-in-out infinite;
  pointer-events:none; filter: blur(4px);
}
@keyframes glassShimmer { 0%{transform:translateX(-100%) rotate(25deg)} 100%{transform:translateX(100%) rotate(25deg)} }
.tpicon{ display:none; }


.topic_log{
  background-image:
    radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    url("data:image/svg+xml;utf8,<?xml version='1.0' encoding='UTF-8'?>\
<svg xmlns='http://www.w3.org/2000/svg' width='480' height='300' viewBox='0 0 480 300'>\
  <defs>\
    <linearGradient id='g' x1='0' y1='0' x2='1' y2='1'>\
      <stop offset='0%' stop-color='%23203329'/>\
      <stop offset='100%' stop-color='%23121f19'/>\
    </linearGradient>\
  </defs>\
  <rect width='100%' height='100%' rx='14' fill='url(%23g)'/>\
  <path d='M10,60 C90,10 180,90 240,40 S360,80 470,30' fill='none' stroke='%23ffd45a' stroke-width='2' opacity='0.9'/>\
  <g>\
    <circle cx='80' cy='78' r='12' fill='%23e24c4c'/>\
    <rect x='76.5' y='64' width='7' height='9' rx='1.5' fill='%23c9b16d'/>\
    <circle cx='210' cy='95' r='14' fill='%232e6b50'/>\
    <rect x='206.5' y='80' width='7' height='9' rx='1.5' fill='%23c9b16d'/>\
    <circle cx='350' cy='72' r='11' fill='%23e24c4c'/>\
    <rect x='346.5' y='59' width='7' height='9' rx='1.5' fill='%23c9b16d'/>\
  </g>\
  <g fill='%23ffd45a' opacity='0.85'>\
    <circle cx='35' cy='28' r='2'/>\
    <circle cx='140' cy='22' r='1.6'/>\
    <circle cx='260' cy='36' r='2'/>\
    <circle cx='420' cy='24' r='1.8'/>\
    <circle cx='110' cy='150' r='1.5'/>\
    <circle cx='190' cy='180' r='1.8'/>\
    <circle cx='300' cy='210' r='1.7'/>\
    <circle cx='390' cy='165' r='1.6'/>\
  </g>\
</svg>");
  background-size:
    8px 8px,
    cover;
  background-position:
    0 0,
    center;
  background-repeat:
    repeat,
    no-repeat;

  border: 2px solid var(--xmas-gold);
  color:#fff7e5;
  text-shadow: 1px 1px 0 #000,
               2px 2px 0 #2a2a25,
               3px 3px 0 #000;
  font-weight:1000;
  margin:5px auto;
  border-radius:12px;
  width:95%;
  max-width:800px;

  box-shadow:
    0 0 10px rgba(255,212,90,.55),
    0 8px 24px rgba(46,107,80,.28),
    inset 0 1px 2px rgba(255,212,90,.08);
}

.topic_log i[class^="fa"],
.topic_log i[class*=" fa"],
.topic_log span[class^="fa"],
.topic_log span[class*=" fa"]{
  text-shadow: 1px 1px 0 #000,
               2px 2px 0 #2a2a25,
               3px 3px 0 #000;
}

/* upload progress */
.bprogress { background:#7ddf5b; color:#061007; }

/* notification colors */
.bnotify { background:var(--xmas-red); color:#fff; }
.foot_notify, .head_notify { border:1px solid var(--xmas-gold); }

/* date colors */
.sub_date { color:var(--xmas-gold); }
.sub_chat, .sub_priv { color:var(--xmas-gold); }

/* secondary text color */
.sub_text,.list_mood{color:#e0fff3}
.list_mood{font-weight:300}

/* profile likes */
.plikes { background-color:rgba(100,100,100,0.28); color:#fff; }

/* spinner color */
.bspin { color:rgba(255,255,255,0.32); }

/* special chat item */
.my_notice { color:#0f1a14; background:var(--xmas-gold); }
.system_text { background:#f1efef; color:#36413d; }

/* outside pages background */
.back_page { background:#0f140f; color:#fff; }

/* video background color */
.post_video { background:rgba(0,0,0,1); }

/* slider */
.boom_slider .ui-widget-content { background:#eaf8f1; }
.boom_slider .ui-state-default,
.boom_slider .ui-state-active { background:var(--xmas-gold) !important; }
.boom_slider .ui-slider-range { background:var(--xmas-gold); }


.selectboxit-list, .selectboxit-btn {
  background-color: var(--xmas-forest-2);
  color:var(--xmas-ink);
  border:1px solid var(--xmas-gold) !important;
}
.selectboxit-list .selectboxit-focus .selectboxit-option-anchor { background-color: var(--xmas-forest); color:var(--xmas-gold); }
.selectboxit-default-arrow { border-top: 4px solid var(--xmas-gold); }
.selectboxit-btn.selectboxit-enabled:hover,
.selectboxit-btn.selectboxit-enabled:focus,
.selectboxit-btn.selectboxit-enabled:active { background:var(--xmas-forest); color:#fff; }
.selectboxit-options { background:var(--xmas-forest-2); }
.selectboxit-list .selectboxit-option-anchor { color:#fff; }


.back_chat{
  position: relative;
  z-index: 0;
  background-image:
    linear-gradient(rgba(10,18,15,.56), rgba(10,18,15,.74)),
    url('./images/back.jpg');
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  overflow: hidden;
}
.back_chat > *{ position: relative; z-index: 1; }
.back_chat::after{
  --logo-size: clamp(140px, 20vmin, 240px);
  content:"";
  position: absolute; inset: 0;
  background: url('/default_images/logo.png') center/var(--logo-size) no-repeat;
  filter: hue-rotate(-12deg) saturate(150%) brightness(116%) drop-shadow(0 0 10px rgba(255,212,90,.25)) contrast(110%);
  opacity:.92;
  pointer-events: none;
  z-index: 0;
}


@keyframes snowFall { 0%{transform:translateY(-100vh);opacity:0} 10%{opacity:.35} 100%{transform:translateY(100vh);opacity:.35} }
#global_chat{
  position: relative; 
}
#global_chat::before{
  content:"";
  position:fixed; left:0; top:0; right:0; bottom:0;
  pointer-events:none; z-index:0;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(255,255,255,.35) 2px, transparent 3px),
    radial-gradient(circle at 80% 20%, rgba(255,255,255,.28) 1.8px, transparent 3px),
    radial-gradient(circle at 60% 0%,  rgba(255,255,255,.3) 2px, transparent 3px),
    radial-gradient(circle at 10% 50%, rgba(255,255,255,.28) 1.6px, transparent 3px),
    radial-gradient(circle at 90% 60%, rgba(255,255,255,.33) 2.2px, transparent 3px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.25) 1.6px, transparent 3px),
    radial-gradient(circle at 70% 90%, rgba(255,255,255,.3) 1.8px, transparent 3px);
  background-size: 1800px 1400px;
  animation: snowFall 18s linear infinite;
  mix-blend-mode: screen;
}


#global_chat::after{
  content:"";
  position:absolute; left:0; right:0; top:0;
  height:6px;
  background:
    radial-gradient(circle, #ff5454 2px, transparent 3px) 8px 50%/24px 10px repeat-x,
    radial-gradient(circle, #4cff7a 2px, transparent 3px) 20px 50%/24px 10px repeat-x,
    radial-gradient(circle, #ffd45a 2px, transparent 3px) 0 50%/24px 10px repeat-x,
    radial-gradient(circle, #67b3ff 2px, transparent 3px) 12px 50%/24px 10px repeat-x;
  filter: drop-shadow(0 0 3px rgba(255,255,255,.35));
  animation: twinkle 2.6s ease-in-out infinite;
  opacity:.95;
  pointer-events:none;
  z-index: 2; 
}


.sysmenu,
.float_menu{ z-index: 10000 !important; }


html, body{ overflow-x: hidden; }