*
{
    padding: 0px;
    margin: 0px;
    box-sizing: border-box;
}
:root 
{
    --theme-primary: #233f56 ;
    --theme-primary-light: #3e90c7 ;
    --theme-secondary: #000000; 
}
body
{
    background-color: #f5f7fb;
}
.bg-flash
{
    background-color: #f9f9f9;
}
/* .btn-theme
{
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--theme-primary);
    --bs-btn-border-color: var(--theme-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--theme-primary);
    --bs-btn-hover-border-color: var(--theme-primary);
    --bs-btn-focus-shadow-rgb: 60, 153, 110;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--theme-primary);
    --bs-btn-active-border-color: var(--theme-primary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--theme-primary);
    --bs-btn-disabled-border-color: var(--theme-primary);
} */
/* new btn */
.btn-theme {
    position: relative;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    color: white;
    padding: 7px 14px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 15px #e7eff4;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Shine overlay */
.btn-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%
    );
    transform: skewX(-25deg);
}

/* Shine animation on hover */
.btn-theme:hover::before {
    animation: shine 0.8s ease;
}

@keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
}

.btn-theme:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--theme-primary-light);
}

.btn-theme:active {
    transform: scale(0.97);
}
/* new btn */
.btn-warning
{
    --bs-btn-color: #000;
    --bs-btn-bg: var(--theme-secondary);
    --bs-btn-border-color: var(--theme-secondary);
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: var(--theme-secondary);
    --bs-btn-hover-border-color: var(--theme-secondary);
    --bs-btn-focus-shadow-rgb: 217, 164, 6;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: var(--theme-secondary);
    --bs-btn-active-border-color: var(--theme-secondary);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: var(--theme-secondary);
    --bs-btn-disabled-border-color: var(--theme-secondary);
}
/* gold btn */
.btn-theme-gold {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(45deg, var(--theme-secondary), #e6c200); /* Gold gradient */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Shine effect */
.btn-theme-gold::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 200, 0.6) 0%,   /* light gold highlight */
        rgba(255, 255, 255, 0.2) 60%,
        transparent 100%
    );
    transform: skewX(-25deg);
}

/* Animation trigger on hover */
.btn-theme-gold:hover::before {
    animation: shine 0.8s ease;
}

/* Shine movement */
@keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
}

/* Hover state */
.btn-theme-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(212, 175, 55, 0.6); /* gold shadow */
}

/* Pressed state */
.btn-theme-gold:active {
    transform: scale(0.97);
}
/* gold btn */
/* silver btn */
.btn-theme-silver {
    position: relative;
    display: inline-block;
    padding: 12px 24px;
    color: #fff;
    font-weight: bold;
    background: linear-gradient(45deg, #C0C0C0, #a6a6a6); /* Silver gradient */
    border: none;
    border-radius: 8px;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Shine effect */
.btn-theme-silver::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.6) 0%,  /* bright silver highlight */
        rgba(255, 255, 255, 0.2) 60%,
        transparent 100%
    );
    transform: skewX(-25deg);
}

/* Animation trigger on hover */
.btn-theme-silver:hover::before {
    animation: shine 0.8s ease;
}

/* Shine movement */
@keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
}

/* Hover state */
.btn-theme-silver:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(192, 192, 192, 0.6); /* silver glow */
}

/* Pressed state */
.btn-theme-silver:active {
    transform: scale(0.97);
}
/* silver btn */
.btn-secondary {
    --bs-btn-color: #000;
    --bs-btn-bg: #c0c0c0;
    --bs-btn-border-color: #c0c0c0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #c0c0c0;
    --bs-btn-hover-border-color: #c0c0c0;
    --bs-btn-focus-shadow-rgb: 130, 138, 145;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c0c0c0;
    --bs-btn-active-border-color: #c0c0c0;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #c0c0c0;
    --bs-btn-disabled-border-color: #c0c0c0;
}
.bg-secondary
{
    background-color: #c0c0c0;
}
.bg-theme-primary
{
    background-color: var(--theme-primary);
}
.text-theme-primary
{
    color: var(--theme-primary) !important;
}
.bg-theme-gradient
{
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
}
.bg-black
{
    background-color: black;
}
video
{
    width: -webkit-fill-available;
}
.tr-1
{
    transition: 1s;
}
.dnone
{
    display: none;
}
.sl-1
{
    transform: translateX(-100%);
    transition: 1s;
}
.form-group .placeholder{
    position: relative;
    opacity: 1 !important;
    width: 100% !important;
}
.form-group .placeholder label{
    position: absolute;
    left: 15px;
    bottom: 7px;
    color:#b4acac;
    background-color: white;
}
.form-group .placeholder.addr label{
    position: absolute;
    left: 15px;
    bottom: 30px;
    color:#b4acac;
    background-color: white;
}
.form-group .placeholder i{
    position: absolute;
    right: 15px;
    bottom: 7px;
}
.input-icon
{
    top: 9px;
    left: 9px;
    padding-right: 8px;
    border-right: 2px solid var(--theme-primary);
    font-size: 25px;
    color: var(--theme-primary);
}
.input-icon-
{
    padding-left: 53px;
}
input
{
    height: 55px;
}
input:focus,textarea:focus
{
    border-color: var(--theme-primary-light) !important;
    box-shadow: 0 0 0 .25rem var(--theme-primary-light) !important;
}
.fs-12px
{
    font-size: 12px;
}
.overlay-screen
{
    background-color: #00000080;
    z-index: 2;
}
.z-index-3
{
    z-index: 3;
}
.dnone
{
    display: none;
}
.border-bottom-light-1
{
    border-bottom: 1px solid #c6cfd7;
}
#fc-body
{
    overflow: auto;
    height: calc(100% - 70px);
}
#toast-container > .toast-success {
    background-color: #055e35 !important;
    color: #fff !important;
    opacity: 1;
}
#toast-container > .toast-warning {
    background-color: #eb8403 !important;
    color: #fff !important;
    opacity: 1;
}
.preloader_screen
{
    position: fixed;
    left: 0px;
    top: 0px;
    height: 100vh;
    width: 100vw;
    z-index: 99999999999999;
    background-color: #000000b3;
    display: flex;
    align-items: center;
    justify-content: center;
}
#main_container
{
    margin-bottom: 100px;
}
#footer_container
{
    height: 60px;
    background: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary-light));
    padding: 15px;
    position: fixed;
    bottom: 0px;
    left: 0px;
    width: 100vw;
    box-shadow: inset 0 0 100px var(--theme-primary);
    background-blend-mode: screen;
    filter: brightness(1) contrast(1.1);
    z-index: 9;
}
.i-c.footer_icon.active i
{
    font-size: 30px;
    /* Special Effect */
    background: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary-light));
    box-shadow: 
      inset 0 0 60px rgba(0, 0, 0, 0.3),
      0 4px 10px rgba(0, 0, 0, 0.5);
    background-blend-mode: screen;
    filter: brightness(1) contrast(1.1);
    /* Special Effect */
    border-radius: 100%;
    color: white;
    height: 50px;
    width: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.profile_card_theme
{
    background: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary-light));
    box-shadow: inset 0 0 100px var(--theme-primary);
    background-blend-mode: screen;
    filter: brightness(1) contrast(1.1);
}
.i-c.footer_icon.active
{
    background: linear-gradient(to bottom, #ffffff00 50%, #f5f7fb 50%);
    border-radius: 100%;
    margin-bottom: 60px;
    aspect-ratio: 1 / 1;
}
.i-c.footer_icon
{
    display: flex;
    justify-content: center;
    align-items: center;
}
.click-effect,.btn {
    transition: transform 0.1s ease, box-shadow 0.1s ease;
  }
  
  .click-effect:active,.btn:active {
    transform: scale(0.96);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.2);
  }
/* Profile */
.profile_image{
    height: 150px;
    width: 150px;
    border-radius: 100%;
    border: 2px solid #dfdfdf;
    position: relative;
}
.profile_image label{
    height: 150px;
    width: 150px;
    border-radius: 100%;
    position:absolute;
    top: -2px;
    left: -2px;
    background: #21252969;
    display: none;
}
.profile_image label i{
    position:absolute;
    font-size:30px;
    top: 35%;
    left: 40%;
    color: white !important;
}
.profile_image label:active{
    background:#212529cc;
}
#profile_name{
    border: none;
    border-bottom: 2px solid white;
    width: fit-content;
    display: none;
    background: none;
    color: white;
}
#profile_name:focus {
    box-shadow: none !important;
    border-bottom: 2px solid white !important;
}
#profile_name::placeholder {
    color: white;
}
#profileone .save_profile{
    display: none;
}
.save_profile i{
    font-size: 30px;
}
.img-upload{
    width:100%;
    height: 100px;
    border:1px solid #ced4da;
}
.combine_input p,.combine_input p i{
    font-size:25px;
}

.combine_input .form-group input{
    font-size:15px;
}
.br-0
{
    border-radius: 0px !important;
}
.border-none
{
    border: none !important;
}
#logout_up,#refer_box,#common_box {
    bottom: 70px;
    z-index: 9;
    transform: translate(0px,300px);
    transition: .5s;
}
#logout_up .card, #refer_box .card, #common_box .card
{
    box-shadow: 0px 0px 10px #e7eff4;
}
.datepicker-dropdown.dropdown-menu tr th, .datepicker-dropdown.dropdown-menu tr td
{
    padding: 8px;
}
#home_background_screen
{
    height: 200px;
    background: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary-light));
    padding: 15px;
    width: 100vw;
    box-shadow: inset 0 0 100px var(--theme-primary);
    background-blend-mode: screen;
    filter: brightness(1) contrast(1.1);
}
/* new Home background Scree */
.vibrant-bg {
    position: relative;
    height: 200px;
    padding: 15px;
    width: 100vw;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    overflow: hidden;
}

/* Shine layer */
.vibrant-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: -50%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.35) 0%,
        rgba(255, 255, 255, 0.05) 60%,
        transparent 100%
    );
    transform: skewX(-25deg);
    /* animation: shine 30s linear infinite; */
}

@keyframes shine {
    0% { left: -50%; }
    100% { left: 150%; }
}
/* new Home background Scree */
/* new btn */
.vibrant-shine-btn {
    position: relative;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    color: white;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgb(162 190 241);
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Shine overlay */
.vibrant-shine-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%
    );
    transform: skewX(-25deg);
}

/* Shine animation on hover */
.vibrant-shine-btn:hover::before {
    animation: shine 0.8s ease;
}

@keyframes shine {
    0% { left: -75%; }
    100% { left: 125%; }
}

.vibrant-shine-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgb(162 190 241);
}

.vibrant-shine-btn:active {
    transform: scale(0.97);
}
/* new btn */
/* Success Shine Button */ 
.vibrant-shine-btn-success 
{ 
    position: relative; 
    background: linear-gradient(135deg, #28a745, #5cd65c); 
    color: #ffffff; 
    padding: 14px 28px; 
    font-size: 16px; 
    font-weight: bold; 
    border: none; 
    border-radius: 30px; 
    cursor: pointer; 
    box-shadow: 0 6px 18px rgba(40, 167, 69, 0.35); 
    overflow: hidden; 
    transition: all 0.3s ease; 
} 
/* Shine overlay */ 
.vibrant-shine-btn-success::before 
{ 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: -75%; 
    width: 50%; 
    height: 100%; 
    background: linear-gradient( 120deg, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.2) 60%, transparent 100% ); 
    transform: skewX(-25deg); 
} 
/* Shine animation on hover */ 
.vibrant-shine-btn-success:hover::before 
{ 
    animation: shine 0.8s ease; 
} 
@keyframes shine 
{ 
    0% { left: -75%; } 100% { left: 125%; } 
} 
.vibrant-shine-btn-success:hover 
{ 
    transform: translateY(-2px); 
    box-shadow: 0 8px 22px rgba(40, 167, 69, 0.45); 
} 
.vibrant-shine-btn-success:active 
{ 
    transform: scale(0.96); 
}
#append_div_home
{
    width: 100vw;
    padding: 15px;
    margin-top: -140px;
    z-index: 1;
    position: relative;
}
#append_div_home #inner_append_div_home
{
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 10px #6b6d6f;
    padding: 15px;
}
/* Toggle */
.switch-toggle {
  position: relative;
  height: 50px;
  padding: 2px;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  font-style: normal;
  border: 1px solid var(--theme-primary);
}
.switch-toggle input{
    height: auto !important;
}
.switch-toggle:focus-visible, .switch-toggle input:focus-visible
{
    border: none !important;
    outline: none !important;
}
.switch-toggle input:focus {
    border-color: none !important;
    box-shadow: none !important;
}
.switch-toggle input[type="checkbox"] {
  cursor: pointer;
  position: absolute;
  inset: 0;
  appearance: none;
  z-index: 2;
}

.switch-toggle input[type="checkbox"]:checked + div.switch-toggle-label::before {
  translate: 100% 0;
}

.switch-toggle input[type="checkbox"]:checked + div.switch-toggle-label span:nth-child(1) {
  color: gray;
}

.switch-toggle input[type="checkbox"]:checked + div.switch-toggle-label span:nth-child(2) {
  color: #1a1a1a;
}

.switch-toggle input[type="checkbox"] + div.switch-toggle-label {
  position: absolute;
  inset: 0px;
  display: grid;
  gap: 2px;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  place-items: center;
  user-select: none;
  pointer-events: auto;
}
.switch-toggle .switch-toggle-label {
    pointer-events: auto;
  }
.switch-toggle input[type="checkbox"] + div.switch-toggle-label::before {
  content: "";
  position: absolute;
  width: 50%;
  inset: 0;
  background: var(--theme-secondary) !important;
  border-radius: calc(4 - 2);
  box-shadow: 0px 10px 20px 0px rgba(16, 39, 68, 0.1);
  translate: 0 0;
  transition: translate 250ms cubic-bezier(0.93, 0.26, 0.07, 0.69);
}
.switch-toggle input[type="checkbox"]:checked + div.switch-toggle-label::before {
    background: #C0C0C0 !important;
}

.switch-toggle input[type="checkbox"] + div.switch-toggle-label span {
  position: relative;
  transition: 200ms linear;
}

.switch-toggle input[type="checkbox"] + div.switch-toggle-label span:nth-child(1) {
  color: #1a1a1a;
}

.switch-toggle input[type="checkbox"] + div.switch-toggle-label span:nth-child(2) {
  color: gray;
}  
div.switch-toggle-label span img
{
    filter: drop-shadow(2px 4px 6px #1a1a1a9e);
}
/* toggle */
.vertical-align-middle
{
    vertical-align: middle;
}
.h-200px
{
    height: 200px;
}
.background-image-cover
{
    background-size: cover;
    background-repeat: no-repeat;
}
.br-15px
{
    border-radius: 15px;
}
.swiper-slide
{
    padding: 15px !important;
}
.swiper-backface-hidden .swiper-slide {
    padding-bottom: 30px !important;
}
.swiper-pagination-bullet-active {
    background: var(--theme-primary) !important;
}
#have_a_question
{
    height: 400px;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom;
}
.p-15px
{
    padding: 15px;
}
.my_card
{
    background: white;
    border-radius: 5px;
    box-shadow: 0px 0px 5px #6b6d6f;
    padding: 5px 15px;
}
.fs-30px
{
    font-size: 30px;
}
.vab
{
    vertical-align: bottom;
}
.bb-2px
{
    border-bottom: 2px solid #6b6d6f4d;
}
.vam
{
    vertical-align: middle;
}
.accordion-button:focus-visible
{
    outline: none !important;
    border: none !important;
}
.accordion-button:focus
{
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
}
.accordion-button:not(.collapsed) {
    color: white !important;
    background-color: var(--theme-primary) !important;
}
body::-webkit-scrollbar,html::-webkit-scrollbar,.ru_boxes::-webkit-scrollbar,.gr_boxes::-webkit-scrollbar {
    display: none;
}
body,html,.ru_boxes,.gr_boxes {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.alert_box
{
    width: 100%;
    background: #a8d5ba33;
    color: var(--theme-primary);
    padding: 15px 10px;
}
/* Glow Dot */
@-webkit-keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes dot-keyframes {
  0% {
    opacity: 0.4;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  50% {
    opacity: 1;
    -webkit-transform: scale(1.2, 1.2);
            transform: scale(1.2, 1.2);
  }
  100% {
    opacity: 0.4;
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}
.loading-dots {
  text-align: center;
  width: 100%;
}
.loading-dots--dot {
  -webkit-animation: dot-keyframes 3s infinite ease-in-out;
          animation: dot-keyframes 3s infinite ease-in-out;
  background-color: var(--theme-secondary);
  border-radius: 10px;
  display: inline-block;
  height: 10px;
  width: 10px;
}
.loading-dots--dot:nth-child(2) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.loading-dots--dot:nth-child(3) {
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
.w-20px
{
    width: 20px;
}
.align-items-acenter
{
    align-items: anchor-center;
}
input[type=radio] {
    accent-color: var(--theme-primary);
    width: 20px;
}
input[type=radio]:focus {
    border: none !important;
    box-shadow: none !important;
}
input[type=radio]:focus-visible {
    border: none !important;
    box-shadow: none !important;
    outline: none !important;
}
.overflow-scroll-x
{
    overflow-x: scroll;
}
.ru_box,.gr_box
{
    border: 1px solid var(--theme-primary-light);
    border-radius: 5px;
    padding: 5px 10px;
    white-space: nowrap;
    margin-right: 10px;
}
.fs-20px
{
    font-size: 20px;
}
.cp-ru
{
    padding: 0px 15px 0px 5px;
}
#buy_page_footer
{
    position: fixed;
    bottom: 0px;
    left: 0px;
    background: white; 
    box-shadow: 0px 0px 10px #6b6d6f;
}
.back_portion
{
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    background: white;
    z-index: 9999;
}
.mt-75px
{
    margin-top: 75px;
}
.mt-60px
{
    margin-top: 60px;
}
.selected_ru_box,.selected_gr_box
{
    background: var(--theme-primary);
    color: white;
}
#refer_page_b
{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 300px;
    width: 100%;
}
#chit_page_b
{
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 190px;
    width: 100%;
}
.refer_code_box
{
    border-radius: 5px 0px 0px 5px;
    border: 2px dashed var(--theme-primary);
    padding: 10px 40px;
    color: var(--theme-primary);
    border-right: none;
}
.refer_copy_button
{
    border-radius: 0px 5px 5px 0px;
    padding: 10px 20px;
    background: var(--theme-primary);
    border-right: none;
    color: white;
}
.refer_ex_icon
{
    border-radius: 100%;
    border: 2px solid var(--theme-primary);
    width: 75px;
    height: 75px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--theme-primary);
    font-size: 30px;
    flex-shrink: 0;
}
.way-dashed-1
{
    width: 5px;
    border-left: 3px dashed var(--theme-primary);
    top: 90px;
    left: 50px;
    z-index: 1;
    height: 25px;
}
.way-dashed-2
{
    width: 5px;
    border-left: 3px dashed var(--theme-primary);
    top: 188px;
    left: 50px;
    z-index: 1;
    height: 25px;
}
.bb-none
{
    border-bottom: none;
}
.bb-1
{
    border-bottom: 1px solid;
}
.spinner-border.sm
{
    height: 20px;
    width: 20px;
    vertical-align: -4px;
}
@keyframes shake-noti {
  0%   { transform: rotate(0deg); }
  20%  { transform: rotate(-15deg); }
  40%  { transform: rotate(15deg); }
  60%  { transform: rotate(-10deg); }
  80%  { transform: rotate(10deg); }
  100% { transform: rotate(0deg); }
}

.shake-noti {
  animation: shake-noti 0.8s ease-in-out infinite;
  transform-origin: top center;
  display: inline-block;
}
.badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    top: 5px !important;
    left: 15px !important;
    display: inline-block;
}
.overflow-y-hidden
{
    overflow-y: hidden;
}
.br-top-5px
{
    border-radius: 5px 5px 0px 0px;
}
.br-bottom-5px
{
    border-radius: 0px 0px 5px 5px;
}
.filter-grey
{
    filter: grayscale(1);
}
.gift_code_bg
{
    background: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary-light));
}
.vas{
    vertical-align: sub;
}
.plus_chit
{
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: linear-gradient(to bottom, var(--theme-primary), var(--theme-primary-light));
    display: flex;
    justify-content: center;
    align-items: center;
    right: 20px;
    bottom: 20px;
}
.special_discount
{
    background-color: white;
    border: 1px solid #dee2e6;
    border-radius: 5px;
}
.special_discount:has(input[type="radio"]:checked)
{
    border: 2px solid var(--theme-primary);
}
.wallet_box
{
    border: 2px solid var(--theme-primary);
    border-radius: 5px;
    padding: 15px;
}
.tbb-1
{
    border-bottom: 1px solid #d7dddc;
}
.w-60px
{
    width: 60px;
}
.auto-scroll {
  width: 90px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
.auto-scroll span {
  display: inline-block;
  animation: scrollText 10s linear infinite;
  font-weight: bold;
  color: var(--theme-primary);
}

@keyframes scrollText {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.role-wrapper {
    display: flex;
    gap: 15px;
}

/* Hide default radio */
.role-card input[type="radio"] {
    display: none;
}

/* Box Design */
.role-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 25px;
    border: 2px solid var(--theme-primary);
    border-radius: 10px;
    cursor: pointer;
    font-weight: 600;
    color: var(--theme-primary);
    transition: all 0.3s ease;
}

/* Custom radio circle inside box */
.radio-circle {
    width: 18px;
    height: 18px;
    border: 2px solid var(--theme-primary);
    border-radius: 50%;
    position: relative;
    transition: 0.3s ease;
}

/* Inner dot when selected */
.role-card input[type="radio"]:checked + .radio-circle::after {
    content: "";
    width: 10px;
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    left: 2px;
}

/* Selected box style */
.role-card input[type="radio"]:checked ~ .role-text,
.role-card input[type="radio"]:checked ~ .radio-circle {
    border-color: #ffffff;
}

.role-card input[type="radio"]:checked ~ .radio-circle {
    border-color: #ffffff;
}

.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked + .radio-circle {
    border-color: #ffffff;
}

.role-card input[type="radio"]:checked ~ .role-text {
    color: #ffffff;
}

.role-card input[type="radio"]:checked ~ .radio-circle::after {
    background: #ffffff;
}

/* Background fill when selected */
.role-card input[type="radio"]:checked ~ .role-text,
.role-card input[type="radio"]:checked ~ .radio-circle,
.role-card input[type="radio"]:checked ~ * {
}

.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

/* Apply background to whole box */
.role-card input[type="radio"]:checked + .radio-circle,
.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ * {
}

.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

/* Clean selected background */
.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

/* FINAL selected state */
.role-card input[type="radio"]:checked ~ .role-text,
.role-card input[type="radio"]:checked ~ .radio-circle {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

/* Proper selected background */
.role-card input[type="radio"]:checked {
}

.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

/* Correct final styling */
.role-card input[type="radio"]:checked ~ .role-text {
}

.role-card input[type="radio"]:checked ~ .radio-circle {
}

/* Simplified selected styling */
.role-card input[type="radio"]:checked ~ .role-text {
    color: #ffffff;
}

.role-card input[type="radio"]:checked ~ .radio-circle {
    border-color: #ffffff;
}

.role-card input[type="radio"]:checked ~ .radio-circle::after {
    background: #ffffff;
}

.role-card input[type="radio"]:checked ~ .role-text {
    color: #ffffff;
}

/* Background on parent using :has (modern browsers) */
.role-card:has(input[type="radio"]:checked) {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    box-shadow: 0 4px 12px rgba(35, 63, 86, 0.3);
    color: #ffffff;
}
.add-button
{
    position: fixed;
    bottom: 85px;
    right: 20px;
    width: 60px;
    height: 60px;
    border-radius: 100%;
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    color: white;
    padding: 7px 14px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px var(--theme-primary-light);
    overflow: hidden;
    transition: all 0.3s ease;
}
/* Shine overlay */
.add-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(255, 255, 255, 0.1) 60%,
        transparent 100%
    );
    transform: skewX(-25deg);
}

/* Shine animation on hover */
.add-button:hover::before {
    animation: shine 0.8s ease;
}
/* Category */
.category-list {
    padding: 15px;
}

/* Card */
.category-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 18px;
    margin-bottom: 15px;
    box-shadow: 0 10px 25px rgba(35, 63, 86, 0.08);
    border: 1px solid rgba(35, 63, 86, 0.05);
    transition: 0.3s ease;
}

.category-card:hover {
    transform: translateY(-3px);
}

/* Header */
.card-header-cat {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.card-header-cat h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--theme-primary);
    margin: 0;
    letter-spacing: 1px;
}

/* Icons */
.action-icons i {
    margin-left: 12px;
    cursor: pointer;
    font-size: 15px;
    transition: 0.3s;
}

.edit-icon-cat {
    color: var(--theme-primary-light);
}

.delete-icon-cat {
    color: red;
}

.action-icons i:hover {
    transform: scale(1.15);
}

/* Body */
.info-row-cat {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.label-cat {
    font-size: 12px;
    color: #6c7a89;
}

.value-cat {
    font-size: 13px;
    font-weight: 600;
    color: #000;
}
/* users */
.followers-wrapper {
    padding: 15px;
    background: #f5f7fb;
}

.follower-card {
    background: #ffffff;
    border-radius: 16px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    transition: 0.3s;
}

.follower-card:hover {
    transform: translateY(-3px);
}

.follower-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.follower-name {
    font-weight: 600;
    font-size: 16px;
}

.subscription-badge {
    background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary));
    color: white;
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 12px;
}

.follower-details {
    margin-top: 10px;
    font-size: 13px;
    color: #666;
}

.follower-details i {
    margin-right: 5px;
    color: var(--theme-primary-light);
}

.follower-actions {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;
}

.action-btn-follower {
    flex: 1;
    border: none;
    padding: 8px;
    border-radius: 10px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.btn-subscription {
    background: #e8f0ff;
    color: var(--theme-primary-light);
    margin-right: 8px;
}

.btn-delete-follower {
    background: #ffecec;
    color: #dc3545;
}
.stats-wrapper {
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 18px 10px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.08);
    margin: 15px;
}

.stat-box {
    text-align: center;
    flex: 1;
}

.stat-count {
    font-size: 22px;
    font-weight: 700;
    color: var(--theme-primary);
}

.stat-label {
    font-size: 13px;
    color: #666;
    margin-top: 4px;
}

.stat-divider {
    width: 1px;
    height: 35px;
    background: #e5e5e5;
}
/* search */
.search-wrapper {
    position: relative;
    margin: 15px;
}

.search-input {
    width: 100%;
    padding: 12px 45px 12px 40px;
    border-radius: 30px;
    border: 1.5px solid #dcdcdc;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}

.search-input:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 4px 20px rgba(62,144,199,0.25);
}

.search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #888;
}

.clear-btn-search {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    font-size: 16px;
    color: #aaa;
    cursor: pointer;
    display: none;
}

.clear-btn-search:hover {
    color: var(--theme-primary);
}
/* subscription */
.subscription-container {
    padding: 15px;
}

.subscription-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-left: 5px solid var(--theme-primary);
    transition: 0.3s ease;
}

.subscription-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.subscription-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.label-subscription {
    font-size: 13px;
    color: #777;
}

.value-subscription {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.amount-subscription {
    font-size: 16px;
    font-weight: bold;
    color: var(--theme-primary);
}

.status-badge-subscription {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.status-badge-subscription i {
    vertical-align: bottom;
}

.status-success-subscription {
    background: rgba(40,167,69,0.1);
    color: #28a745;
}

.status-pending-subscription {
    background: rgba(255,193,7,0.15);
    color: #e0a800;
}
.bg-light
{
    background: #f5f7fb;
}
/* support */
.support-container {
    padding: 15px;
}

.support-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-left: 5px solid var(--theme-primary);
    transition: 0.3s ease;
}

.support-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.support-desc {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    line-height: 1.5;
}

.support-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.support-date {
    font-size: 12px;
    color: #777;
}

.reply-btn {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    border: none;
    color: #fff;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    cursor: pointer;
    transition: 0.3s;
}

.reply-btn:hover {
    opacity: 0.9;
}

.waiting-text {
    font-size: 12px;
    font-weight: 600;
    color: #e67e22;
}
.waiting-text i 
{
    vertical-align: bottom;
}
.success-text {
    font-size: 12px;
    font-weight: 600;
    color: #28a745;
}
.success-text i 
{
    vertical-align: bottom;
}
/* Payout */
.payout-container {
    padding: 15px;
}

/* Summary Card */
.payout-summary {
    background: linear-gradient(135deg, var(--theme-primary), var(--theme-primary-light));
    color: #fff;
    border-radius: 20px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 10px 30px rgba(62,144,199,0.25);
}

.payout-summary h3 {
    margin: 0;
    font-size: 14px;
    font-weight: 500;
    opacity: 0.9;
}

.payout-summary .total-amount {
    font-size: 26px;
    font-weight: bold;
    margin-top: 5px;
}

/* Individual payout card */
.payout-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 16px;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-left: 5px solid var(--theme-primary);
    transition: 0.3s ease;
}

.payout-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

.payout-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    align-items: center;
}

.label-payout {
    font-size: 12px;
    color: #777;
}

.value-payout {
    font-size: 14px;
    font-weight: 600;
    color: #111;
}

.amount-payout {
    font-size: 18px;
    font-weight: bold;
    color: var(--theme-primary);
}

.sub-count-payout {
    font-size: 13px;
    color: #444;
}

.status-badge-payout {
    padding: 5px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: inline-block;
}

.status-paid-payout {
    background: rgba(40,167,69,0.1);
    color: #28a745;
}

.status-pending-payout {
    background: rgba(255,193,7,0.15);
    color: #e0a800;
}
/* knowledge sharing */
.knowledge-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 15px;
    margin-bottom: 15px;
    box-shadow: 0 8px 25px rgba(0,0,0,0.05);
    border-left: 5px solid var(--theme-primary-light);
    transition: 0.3s ease;
}

.knowledge-card:hover {
    transform: translateY(-3px);
}

.knowledge-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
}

.segment-badge {
    display: inline-block;
    background: rgba(62,144,199,0.1);
    color: var(--theme-primary-light);
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 20px;
    margin-bottom: 8px;
}

.knowledge-desc {
    font-size: 13px;
    color: #555;
    margin-bottom: 10px;
    line-height: 1.5;
}

.knowledge-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.post-date {
    font-size: 12px;
    color: #777;
}

.action-icons i {
    margin-left: 10px;
    cursor: pointer;
    font-size: 15px;
}

.edit-icon-know { color: var(--theme-primary-light); }
.delete-icon-know { color: #dc3545; }

.theme-radio-group{
    display:flex;
    gap:15px;
}

.theme-radio{
    display:flex;
    align-items:center;
    cursor:pointer;
    font-size:14px;
    font-weight:500;
    position:relative;
}

.theme-radio input{
    display:none;
}

.radio-circle{
    width:20px;
    height:20px;
    border:2px solid var(--theme-primary-light);
    border-radius:50%;
    margin-right:8px;
    position:relative;
    transition:0.3s;
}

/* inner dot */
.radio-circle::after{
    content:"";
    position:absolute;
    width:10px;
    height:10px;
    background:var(--theme-primary-light);
    border-radius:50%;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%) scale(0);
    transition:0.3s;
}

/* checked */
.theme-radio input:checked + .radio-circle{
    border-color:var(--theme-primary);
}

.theme-radio input:checked + .radio-circle::after{
    transform:translate(-50%,-50%) scale(1);
    background:var(--theme-primary);
}
.market-tabs{
    display:flex;
    gap:10px;
}

.tab-btn{
    flex:1;
    border:none;
    padding:12px 10px;
    border-radius:10px;
    font-size:14px;
    font-weight:600;
    cursor:pointer;
    background:#f3f6f9;
    color:var(--theme-primary);
    transition:all .3s ease;
}

.tab-btn i{
    margin-right:5px;
}

.tab-btn.active{
    background:linear-gradient(135deg,var(--theme-primary),var(--theme-primary-light));
    color:#ffffff;
    box-shadow:0 5px 15px rgba(35,63,86,0.25);
}

.tab-content{
    display:none;
    padding:15px 5px;
}

.tab-content.active{
    display:block;
}
.chat-wrapper{
    padding: 5px;
}

.chat-bubble{
    position:relative;
    background:#e9f5ff;
    border-radius:14px;
    padding:14px 14px 8px 14px;
    box-shadow:0 4px 12px rgba(0,0,0,0.08);
    margin-bottom:12px;
}

/* bubble tail */
.chat-bubble::after{
    content:"";
    position:absolute;
    left:-6px;
    top:14px;
    width:12px;
    height:12px;
    background:#e9f5ff;
    transform:rotate(45deg);
}

.chat-title{
    font-weight:700;
    font-size:15px;
    color:#233f56;
    margin-bottom:8px;
}

.chat-line{
    display:flex;
    justify-content:space-between;
    font-size:13px;
    padding:3px 0;
    color:#444;
}

.chat-line span{
    opacity:.8;
}

.chat-message{
    margin-top:8px;
    font-size:14px;
    line-height:1.4;
    color:#333;
}

.chat-time{
    text-align:right;
    font-size:11px;
    margin-top:6px;
    color:#666;
}
.chat-time i 
{
    vertical-align: bottom;
}
.chat-wrapper{
    transition: transform .2s ease;
}