:root {
    --gutter-x: 20px;
    --gutter-y: 10px;
    --topbar-height: 0px;
    --font:'main-font';
    --menu-font-size:14px;
    --main-color: #4f1ad6;
    --main-background:169, 153, 252;
    --secondary-color: #8059e3;
    --desktop-container-width:1140px;
    --tablet-container-width:100%;
    --mobile-container-width:100%;
    --card-primary-background:#111014;
    --card-secondary-background:#16141a;
    --card-primary-border:#14131f;
    --card-secondary-border:#14131f;
    --card-padding: 18px;
    --card-blur:34px;
    --card-shadow:rgba(10, 10, 10, 0.5);
    --dropdown-bg:#111014;
    --border-color:#232323;
    --border-width:1px;
    --border-radius:18px;
    --border-style:solid;
    --border-radius-sm:13px;
    --border-radius-lg:23px;
    --input-bg:#16141a;
    --logo-width:35px;
    --ambiance-opacity:0.1;
    --button-radius:8px;
    --button-primary-text-color:#fff;
    --button-primary-background-color:linear-gradient(180deg,var(--main-color) 0%,var(--secondary-color) 100%);
    --button-primary-border-color:#a999fc;
    --button-primary-text-hover-color:#030013;
    --button-primary-background-hover-color:#4624a2;
    --button-primary-border-hover-color:#4624a2;
    --button-primary-border-width:3px;
    --button-secondary-text-color:#000000;
    --button-secondary-background-color:#000000;
    --button-secondary-border-color:rgba(255,255,255,.15);
    --button-secondary-text-hover-color:#000000;
    --button-secondary-background-hover-color:#000000;
    --button-secondary-border-hover-color:#a999fc;
    --modal-padding: 10px 15px;
    --kf-1-active: #36BB91;
    --kf-1-rgb:  rgba(54, 187, 145, 1);
    --kf-1-text: #fff;
    --body-bg: #0a0a0a;
    --body-bg-rgb: 10, 10, 10;
    --kf-bg-2: #090116;
    --text-color: #dfe1f4;
    --text-secondary:#efedfd99;
    --mbh: 0px;
    --mob: 0px;
    --header-height: 60px;
    --footer-height: 70px;
    --sidebar-width: 280px;
    --sidebar-small-width: 80px;
    --kf-sidebar-iconic-width: 60px;
    --kf-header-active-bg-rgb: #212529;
    --kf-header-active-opacity: 0.85;
    --kf-footer-bg: #fff;
    --kf-footer-bg-rgb: 255, 255, 255;
    --bs-success:#13ac7b;
    --bs-success-rgb:rgba(19, 172, 123, 0.15);
    --bs-info: #0dcaf0;
    --bs-info-rgb: 13, 202, 240;
    --bs-warning: #faca0a;
    --bs-warning-rgb: rgba(250, 202, 10, 0.15);
    --bs-danger: #dc3545;
    --bs-0: #e37e00;
    --bs-1: #dc3545;
    --bs-2: #895dd5;
    --bs-3: #dc3545;
    --bs-4: #dc3545;
    --bs-5: #dc3545;
    --bs-6: #dc3545;
    --bs-7: #7eaa00;
    --bs-8: #895dd5;
    --bs-9: #dc3545;
    --bs-danger-rgb: 220, 53, 69;
    --bs-light: #f8f9fa;
    --bs-light-rgb: 248, 249, 250;
    --bs-dark: #212529;
    --bs-dark-rgb: 33, 37, 41;
    --bs-link-color-rgb: 101, 119, 146;
    --bs-border-color-translucent: #100f1f;
    --bs-primary-text-emphasis: #0051c7;
    --bs-secondary-text-emphasis: #2b2f32;
    --bs-success-text-emphasis: #6a8a00;
    --bs-info-text-emphasis: #01579e;
    --bs-warning-text-emphasis: #e37e00;
    --bs-danger-text-emphasis: #a30011;
    --bs-light-text-emphasis: #495057;
    --bs-dark-text-emphasis: #495057;
    --bs-primary-bg-subtle: #cfe2ff;
    --bs-secondary-bg-subtle: #e2e3e5;
    --bs-success-bg-subtle: #e7f4d6;
    --bs-danger-bg-subtle: #fcdfe0;
    --bs-warning-bg-subtle: #fff3c2;
    --bs-info-bg-subtle: #d7f7ff;
    --bs-blue-subtle: #c9d8f0;
    --bs-indigo-subtle: #d1c2e9;
    --bs-purple-subtle: #c8bce4;
    --bs-pink-subtle: #f0d7ea;
    --bs-red-subtle: #e4b7bb;
    --bs-orange-subtle: #ffd8b8;
    --bs-yellow-subtle: #f7e4a4;
    --bs-green-subtle: #d0f3e2;
    --bs-teal-subtle: #c4ece1;
    --bs-cyan-subtle: #bce4eb;
    --bs-blue-emphasis: #00388d;
    --bs-indigo-emphasis: #35018a;
    --bs-purple-emphasis: #32008f;
    --bs-pink-emphasis: #8b0046;
    --bs-red-emphasis: #88000e;
    --bs-orange-emphasis: #8f4000;
    --bs-yellow-emphasis: #995c00;
    --bs-green-emphasis: #008848;
    --bs-teal-emphasis: #008059;
    --bs-cyan-emphasis: #00738a;
    --bs-chocolate: #411900;
    --bs-brown: #795548;
    --bs-grey: #607d8b;
    --bs-primary-border-subtle: #9ec5fe;
    --bs-secondary-border-subtle: #c4c8cb;
    --bs-success-border-subtle: #accc70;
    --bs-info-border-subtle: #9eeaf9;
    --bs-warning-border-subtle: #ffe69c;
    --bs-danger-border-subtle: #f1aeb5;
    --bs-light-border-subtle: #e9ecef;
    --link-color: #cfc9d7;
    --bs-border-radius-sm: var(--bs-border-radius);
    --kf-content-font-weight: 400;
    --kf-title-font-weight: 600;
    --bs-breakpoint-xs: 0;
    --bs-breakpoint-sm: 576px;
    --bs-breakpoint-md: 768px;
    --bs-breakpoint-lg: 992px;
    --bs-breakpoint-xl: 1200px;
    --bs-breakpoint-xxl: 1400px;
    --sw-border-color: #eee;
    --sw-toolbar-btn-color: #fff;
    --sw-toolbar-btn-background-color: #009ef7;
    --sw-anchor-default-primary-color: #f8f9fa;
    --sw-anchor-default-secondary-color: #b0b0b1;
    --sw-anchor-active-primary-color: #009ef7;
    --sw-anchor-active-secondary-color: #fff;
    --sw-anchor-done-primary-color: #90d4fa;
    --sw-anchor-done-secondary-color: #fefefe;
    --sw-anchor-disabled-primary-color: #f8f9fa;
    --sw-anchor-disabled-secondary-color: #dbe0e5;
    --sw-anchor-error-primary-color: #dc3545;
    --sw-anchor-error-secondary-color: #fff;
    --sw-anchor-warning-primary-color: #ffc107;
    --sw-anchor-warning-secondary-color: #fff;
    --sw-progress-color: #009ef7;
    --sw-progress-background-color: #f8f9fa;
    --sw-loader-color: #009ef7;
    --sw-loader-background-color: #f8f9fa;
    --sw-loader-background-wrapper-color: hsla(0, 0%, 100%, .7);
    --dt-row-selected: 13, 110, 253;
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: 9, 10, 11;
    --dt-row-stripe: 0, 0, 0;
    --dt-row-hover: 0, 0, 0;
    --dt-column-ordering: 0, 0, 0;
    --dt-html-background: #fff;
    --bs-modal-header-border-width: 1px;
    --bs-border-width: 1px;
}
body {
    margin: 0;
    color: var(--text-color);
    display: flex;
    flex-direction: column;
    font-family: var(--font), sans-serif;
    font-weight: 200;
    height: auto;
    background: var(--body-bg);
    line-height: 26px;
    font-size: 17px;
    overflow-x: hidden;
    position: relative;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
      font-family: 'main-font';
      src: url('https://cdn.kleinfunding.com/@repo/uploads/fonts/cb0ccd9c42a0268546a01cadbbc14e86.woff2') format('woff2');
      font-weight: 100 900;
      font-display: swap;
}
svg.ic{
    display: inline-block;
    vertical-align: middle;
    color: inherit;
    flex-shrink: 0;
}
html.is-changing .transition-main {
  transition: opacity 250ms ease-in-out;
}

html.is-leaving .transition-main {
  transition: opacity 250ms ease-in-out;
}

body.has_campaign{
    --topbar-height: 40px;
}

header{
    height:var(--header-height);
    display: flex;
    flex-direction: column;
}

.boxy li{
    display: inline-flex;
    flex: 1;
}

.boxy .nav-link.active{
    background:var(--card-secondary-background);
}

.boxy .nav-link{
    width: 100%;
    text-align: center;
    align-items: center;
    justify-content: center;
}

.inner-header{
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 20px;
    padding-bottom: 15px;
}

.kf-sidebar-inner.boxed{
    background: var(--card-primary-background);
}

.affiliate-registration .titlebar .inner{
    padding-bottom: 340px;
}

.has_campaign header{
    margin-top: 40px;
}

/* Header dark-theme variant — opt-in per page via settings.display.header_theme = "dark".
   For pages with light/yellow hero backgrounds where the default transparent
   header text is unreadable. Background stays transparent; only text + logo
   are swapped. Once the user scrolls (.fixed-top.active) the normal solid
   theme takes over again so we explicitly exclude .active. */
.kf-brand-logo { display: inline-flex; }
.kf-brand-logo--alt { display: none; }
.kf-brand-logo--filter img { filter: brightness(0); }
.kf-header.kf-header--dark:not(.active) .btn-secondary {
    --bs-btn-color: #000000;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgb(0 0 0 / 32%);
    --bs-btn-border-width: 1px;
    --bs-btn-active-color: #000000c9;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: rgb(0 0 0 / 25%);
    --bs-btn-shadow: none;
}
.kf-header.kf-header--dark:not(.active) .language-switcher .dropdown-toggle{
    color:#000000;
}
.kf-header.kf-header--dark:not(.active){
    border-bottom: 1px solid rgb(0 0 0 / 13%);
}
.kf-header.kf-header--dark:not(.active) .navbar-brand,
.kf-header.kf-header--dark:not(.active) .navbar-brand .h6,
.kf-header.kf-header--dark:not(.active) .navbar-collapse:not(.show) .nav-link {
    color: #000;
}
.kf-header.kf-header--dark:not(.active) .nav-link:hover {
    color: #000;
    opacity: .75;
}
.kf-header.kf-header--dark:not(.active) .kf-brand-logo--default { display: none; }
.kf-header.kf-header--dark:not(.active) .kf-brand-logo--alt     { display: inline-flex; }

/* Per-page brand palette overrides — applied via body_class in page settings.
   Bybit landing → yellow gold palette. */
body.bybit-theme {
    --main-color: #e6a800;
    --main-color-ob: rgba(230, 168, 0, .15);
    --main-background: 230, 168, 0;
    --secondary-color: #ffca2c;
    --brand-color: #e6a800;
}

/* Cleo (Binance) landing → blue palette. */
body.cleo-theme {
    --main-color: #0236ce;
    --main-color-ob: rgba(2, 54, 206, .15);
    --main-background: 2, 54, 206;
    --secondary-color: #3d73ff;
    --brand-color: #0236ce;
}

.tx:before{
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: "";
    z-index: -1;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='8' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239fa2b9' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    -webkit-mask-image: linear-gradient(115deg, transparent 45%, #000);
    mask-image: linear-gradient(115deg, transparent 45%, #000);
    opacity: .4;
    transition: opacity .3s;
}

.bsep{
    background: radial-gradient(140% 107.13% at 50% 10%, transparent 37.41%, #63e 69.27%, #fff 100%);
    border-radius: var(--border-radius-lg);
    margin: 0 1.5rem;
}

.dropdown-toggle:after {
    border-bottom: 0;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    border-top: .3em solid;
    content: "";
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    color: var(--text-secondary);
}

.empty-table{
    position: absolute;
    bottom: 0;
    z-index: 9;
    background: var(--body-bg);
    border-radius: var(--border-radius);
    min-height: calc(100% - 60px);
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
    border: 1px solid var(--border-color);
}

html.is-animating .transition-main {
  opacity: 0;
}

.lights{
    top: 0;
    left: 50%;
    transform: translate(-50%);
    position: absolute;
    width: 100%;
    height: 800px;
    z-index: 10;
    pointer-events: none;
}

html.is-rendering .card {
  transition-delay: calc((var(--count, 0) - var(--index, 0)) * 10ms), 0ms;
}

html.is-animating .card {
  transform: scale(0.8);
}

h1 {
  transition: transform 300ms, opacity 300ms;
}

html.is-animating.is-leaving h1 {
  transform: translateY(2rem);
  opacity: 0;
}

html.is-animating.is-rendering h1 {
  transform: translateY(-2rem);
  opacity: 0;
}

html.is-animating.is-leaving .detail__content {
  transform: translateY(3rem);
}

html.is-animating.is-rendering .detail__content {
  transform: translateY(3rem);
}

html.is-animating .detail__content>* {
  opacity: 0;
  transform: translateY(calc((var(--index, 0) + 1) * 2em));
  transition-delay: 0ms;
}

.hide{
        display: none !important;
}

.view_certificate{
        position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #0e0c0f;
    z-index: 11111111111111;
    overflow: hidden;
      perspective: 1000px;
      display: flex;
      justify-content: center;
      align-items: center;
}

.view_account{
          position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #0e0c0f;
    z-index: 1;
    overflow: hidden;
    perspective: 1000px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.view_account .shine-effect {
  position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.0) 0%, rgb(255 255 255 / 45%) 50%, rgba(255, 255, 255, 0.0) 100%);
    transform: skewX(-20deg);
    animation: shine 8s infinite;
    pointer-events: none;
    filter: blur(40px);
    scale: 1.2;
}

.view_certificate .shine-effect {
  position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0.0) 0%, rgb(255 255 255 / 45%) 50%, rgba(255, 255, 255, 0.0) 100%);
    transform: skewX(-20deg);
    animation: shine 8s infinite;
    pointer-events: none;
    filter: blur(40px);
    scale: 1.2;
}

.view_certificate video.background,
.view_account video.background{
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      object-fit: cover;
      z-index: -1;
    }

.account_slots{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    bottom: 50px;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.slot.elite{
    border: 1px solid #baadfe;
    background: #b3a5fd33;
}

.garage_pop ul{
    list-style: none;
    margin: 0;
    padding: 0;
}

.garage_pop li{
       border-bottom: 1px solid #ffffff0d;
    padding: 5px 0;
}

.garage_pop li:last-child{
    border-bottom:none;
}

.garage_pop{
        width: 400px;
    position: absolute;
    background: #05060f8c;
    border-radius: 16px;
    padding: 20px;
    bottom: 150px;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 11;
    backdrop-filter: blur(20px);
    box-shadow: rgba(0, 0, 0, 0.25) 0px 54px 55px, rgba(0, 0, 0, 0.12) 0px -12px 30px, rgba(0, 0, 0, 0.12) 0px 4px 6px, rgba(0, 0, 0, 0.17) 0px 12px 13px, rgba(0, 0, 0, 0.09) 0px -3px 5px;
}

.view_certificate .card
{
      width: 350px;
      height: 350px;
      transition: transform 0.1s ease;
      transform-style: preserve-3d;
      z-index: 1;
    }

.view_account .card{
    width: 290px;
    min-width: 290px;
    height: 438px;
    min-height: 438px;
    transition: transform 0.1s ease;
    transform-style: preserve-3d;
    z-index: 0;
    padding: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    position: relative;
    
    }

.view_account .card:after{
           content: "";
    position: absolute;
    bottom: 0;
    height: 185px;
    width: 100%;
    background-image: linear-gradient(to bottom left, #05191400, #030013 82%, #030013);
    z-index: -1;
    filter: blur(15px);
    }

.virtual_bg{
        width: 100%;
    height: auto;
    position: fixed;
    filter: blur(16px);
    opacity: 0.3;
    z-index: 0;
    object-fit: cover;
        pointer-events: none;
    }

.slot{
    width: 70px;
    background: #ffffff0f;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 1px solid #36343a;
    overflow: hidden;
    }

.slot img{
        width: 100%;
    }

.account_header{
    position: absolute;
    top: 12%;
    text-align: center;
    font-size: 54px;
    
    margin: 0 auto;
    left: 0;
    right: 0;
    }

.account_header .initial_balance{
            position: absolute;
    margin: 0 auto;
    left: 0;
    right: 0;
    z-index: 1111;
    text-shadow: 0px 1px 20px #000000;
    color: #fff;
    }

.virtual_text{
    font-size: 130px;
    font-weight: 500;
    opacity: 0.3;
    z-index: -1;
    position: relative;
    white-space: nowrap;
}

.view_account .card img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      display: block;
      position: absolute;
        z-index: -1;
        top: 0;
    }

.view_certificate .card img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
      display: block;
    }

.helper{
    position: sticky;
    bottom: 0;
    left: 0;
    background: var(--card-secondary-background);
    backdrop-filter: blur(15px);
    padding: 50px 0;
    padding-top: 0;
    width: 100%;
    z-index: 1111111111111;
    display: none;
}

.helper.active{
    display:block;
}


.card.active .circle{
    background:#4D2F8C;
}

.circle{
       border: 1px solid #0f0f2b;
    max-width: 20px !important;
    max-height: 20px !important;
    width: 20px !important;
    height: 20px;
    border-radius: 100%;
    outline: 1px solid #ffffff33;
    display: flex;
    font-size: 14px;
    line-height: 0;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}

.circle i{
    display:none;
}

.grid-container {
        position: absolute;
        left: 0;
        right: 0;
        top: -25px;
        margin-left: -13px;
        margin-right: 0px;
        box-sizing: content-box;
        height: 50px;
        background: #00000000;
    }

.grid-lines {
      position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, 0.05) 0px, rgba(255, 255, 255, 0.05) 1px, transparent 1px, transparent 20px);
    }

.glow-line-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        background: linear-gradient(to top, transparent 0%, rgb(178 162 209 / 66%) 48%, rgb(178 162 209) 50%, rgb(178 162 209 / 66%) 52%, transparent 100%);
    }

.pricing_sidebar{
    display:block;
}

.d-flex.mega-content{
    display:none !important;
}

.virtualchart{
    position: absolute;
    left: -10px;
    bottom: -10px;
    width: 110%;
}

.affiliate_con{
    box-sizing: border-box;
    width: 100%;
    display: flex;
}

.affiliate_program img{
    position: absolute;
    object-fit: cover;
    left: 0;
    animation: moveBackgroundDown 12s linear infinite;
}

.affiliate_program{
    background: #17181F;
    background: linear-gradient(0deg, rgba(23, 24, 31, 1) 0%, rgba(51, 44, 71, 1) 100%);
    color: #fff;
    padding: 10px 20px;
    width: 100%;
    border-radius: 8px;
    border: 1px solid #b2a2d147;
    overflow: hidden;
    position: relative;
}

.virtualchart:before{
    position: absolute;
    top: 50%;
    content: "";
    display: block;
    height: 1px;
    opacity: 0.3;
    background-image: repeating-linear-gradient(to right, #999, #999 4px, transparent 4px, transparent 9px);
    width: 100%;
    margin: 20px 0;
}

.gp{
    background-image: url(/@repo/img/client/prg.jpg);
    width: 100%;
    height: 43px;
    background-size: 100%;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
}

[data="progress"]{
    height: 2px;
    border-radius: 1px;
    top:-2px;
    width: 63%;
    display: inline-block;
    background: linear-gradient(90deg, rgba(191, 179, 253, 1) 0%, rgba(185, 172, 254, 1) 50%, rgba(185, 172, 254, 1) 75%, rgb(169 153 252 / 0%) 100%);
    position: relative;
}

[data="progress_val"]{
    padding: 5px 10px;
    align-items: center;
    border-radius: 27px;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
    font-size: 17px;
    border: 1px solid #ffffff14;
    position: absolute;
    top: -60px;
    background: #17181F;
    background: linear-gradient(0deg, rgba(23, 24, 31, 1) 0%, rgba(51, 44, 71, 1) 100%);
}

[data="progress_val"]::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    margin-top: -1px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    z-index: 0;
    border-top: 10px solid #191a22;
}

[data="progress_val"]::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    margin-top: -1px;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    z-index: 0;
    border-top: 10px solid #fff;
}

[data="progress"]:before{
    content: "";
    width: 40px;
    height: 40px;
    position: absolute;
    background-image: url(/@repo/img/client/pig.png);
    background-size: 40px;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
}
.pra{
    border-radius: 10px 10px 0 0;
}
.card.active{
    background: linear-gradient(180deg, var(--main-color) 0%, #00000000 100%);}
.card.success{
    background: linear-gradient(180deg, #15803d 0%, var(--body-bg) 100%);
}
.card.warning{
    background: linear-gradient(180deg, #d97706 0%, var(--body-bg) 100%);
}

html[mode="light"] .card.active{
    color:var(--secondary-color) !important;
}
html[mode="light"] .card.success{
    color:var(--secondary-color) !important;
}
html[mode="light"] .card.warning{
    color:var(--secondary-color) !important;
}

.bfu{
  height: 1px;
  width: 100%;
  background: linear-gradient(to right, transparent, #ffffff1f, transparent);
}

.bb{
    border-bottom: 1px solid transparent;
    border-image-source: linear-gradient(to right, transparent, #ffffff1f, transparent);
    border-image-slice: 1;
    border-image-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-style: solid;
}

.bri{
    min-height: 40px;
    margin: 0 20px;
    width: 1px;
    background: linear-gradient(to top, transparent, #ffffff1f, transparent);
}

.bt {
    border-top: 1px solid transparent;
    border-image-source: linear-gradient(to right, transparent, #ffffff1f, transparent);
    border-image-slice: 1;
    border-image-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
    border-style: solid;
}

.frontend .dz-preview{
    display:none !important;
}

[data="more_info"] .live [data="profit_target"]{
    display: none !important;
}

div[filter]{
    position:relative;
}

[data="inventory_preview"]{
    position:relative;
}

[data="inventory_preview"][select="none"]:before{
    content: "To use it, first select an item from your inventory.";
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--card-primary-background);
    padding: var(--card-padding);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    z-index: 1;
}

.shop_item:hover{
        position: absolute;
    display: inline-table;
    height: auto !important;
    z-index: 1;
    width: 100%;
    left: 0px;
    top: -30px;
    scale: 1.02;
    box-shadow: 0 7px 50px 50px #01000db3 !important;
}

.shop_item:hover .hidden{
    display:block;
}

.marss{
    border-radius: 25px;
    overflow: hidden;
}

.empty-slot,
[data="inventory_preview"][select="none"]{
    border: var(--border-width) solid var(--border-color);
    border-width: 1px;
    min-height: 150px;
    border-radius: var(--border-radius);
    width: 100%;
}

.inv-count-badge{
    position: absolute;
    top: 6px;
    right: 6px;
    z-index: 5;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    line-height: 22px;
    text-align: center;
    border-radius: 12px;
    font-weight: 700;
    font-size: 12px;
    color: #fff;
    background: linear-gradient(135deg, #6c3ad1, #2a0f5a);
    border: 1px solid rgba(255,255,255,0.18);
    box-shadow: 0 2px 6px rgba(0,0,0,0.35);
    pointer-events: none;
}

.fimg img{
        border-radius: 15px 15px 0 0;
}

.marss:before{
      content: "";
    width: 100%;
    height: 56%;
    position: absolute;
    left: 0;
    bottom: -45px;
    background: rgb(16, 15, 31);
    background: linear-gradient(0deg, rgb(1 0 13) 18%, rgba(16, 15, 31, 0) 100%);
    z-index: 111;
}

.alert-pop{
    position: fixed;
    bottom: -60px;
    display: inline-block;
    margin: 0 auto;
    left: 0;
    right: 0;
    text-align: center;
    animation: alert 5s ease;;
    animation-iteration-count: 1

}

.ibm{
    padding: var(--card-padding);
    border: var(--border-width) solid var(--border-color);
    background: rgba(var(--card-primary-background), 0.5);
    border-radius: var(--border-radius);
    position:relative;
}

.ibm::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--card-primary-background);  
  opacity: 0.5;  
  z-index: -1; 
  border-radius: var(--border-radius);
}

.qrr{
    position:relative;
        overflow: unset !important;
}

.equity{
    position: absolute;
    margin-top: -25px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.qrr .equity{
    position:absolute;
        overflow: unset !important;
        top:-20px;
}

.pt{
    position: relative;
    width: 1px;
    height: 20px;
    background: #0c071d;
}

.daterangepicker:after,
.daterangepicker:before {
    border-bottom-color: rgba(0, 0, 0, .2);
    content: "";
    display: inline-block;
    position: absolute
}

.bg-theme-6 {
    background-color: var(--bs-success-rgb) !important;
    color: var(--bs-success) !important;
}

.bg-theme-3 {
    background-color: var(--main-color-ob) !importantim;
    color: var(--main-color) !important;
}

.daterangepicker:before {
    border-bottom: 7px solid #ccc;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    top: -7px
}

.daterangepicker:after {
    border-bottom: 6px solid #fff;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    top: -6px
}

.daterangepicker.opensleft:before {
    right: 9px
}

.daterangepicker.opensleft:after {
    right: 10px
}

.daterangepicker.openscenter:after,
.daterangepicker.openscenter:before {
    left: 0;
    margin-left: auto;
    margin-right: auto;
    right: 0;
    width: 0
}

.daterangepicker.opensright:before {
    left: 9px
}

.daterangepicker.opensright:after {
    left: 10px
}

.daterangepicker.drop-up {
    margin-top: -7px
}

.daterangepicker.drop-up:before {
    border-bottom: initial;
    border-top: 7px solid #ccc;
    bottom: -7px;
    top: auto
}

.daterangepicker.drop-up:after {
    border-bottom: initial;
    border-top: 6px solid #fff;
    bottom: -6px;
    top: auto
}

.daterangepicker.single .daterangepicker .ranges,
.daterangepicker.single .drp-calendar {
    float: none
}

.daterangepicker.single .drp-selected {
    display: none
}

.daterangepicker.show-calendar .drp-buttons,
.daterangepicker.show-calendar .drp-calendar {
    display: block
}

.daterangepicker.auto-apply .drp-buttons {
    display: none
}

.daterangepicker .drp-calendar {
    display: none;
    max-width: 270px
}

.daterangepicker .drp-calendar.left {
    padding: 8px 0 8px 8px
}

.daterangepicker .drp-calendar.right {
    padding: 8px
}

.daterangepicker .drp-calendar.single .calendar-table {
    border: none
}

.daterangepicker .calendar-table .next span,
.daterangepicker .calendar-table .prev span {
    border: solid var(--main-color-text);
    border-radius: 0;
    border-width: 0 2px 2px 0;
    color: #fff;
    display: inline-block;
    padding: 3px
}

.daterangepicker .calendar-table .next span {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg)
}

.daterangepicker .calendar-table .prev span {
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg)
}

.daterangepicker .calendar-table td,
.daterangepicker .calendar-table th {
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    height: 24px;
    line-height: 24px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.daterangepicker .calendar-table {
    background-color: #fff;
    border: 1px solid #fff;
    border-radius: 4px
}

.daterangepicker .calendar-table table {
    border-collapse: collapse;
    border-spacing: 0;
    margin: 0;
    width: 100%
}

.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: #eee;
    border-color: transparent;
    color: inherit
}

.daterangepicker td.week,
.daterangepicker th.week {
    color: #ccc;
    font-size: 80%
}

.daterangepicker td.off,
.daterangepicker td.off.end-date,
.daterangepicker td.off.in-range,
.daterangepicker td.off.start-date {
    background-color: #fff;
    border-color: transparent;
    color: #999
}

.daterangepicker td.in-range {
    background-color: #ebf4f8;
    border-color: transparent;
    border-radius: 0;
    color: #000
}

.daterangepicker td.start-date {
    border-radius: 4px 0 0 4px
}

.daterangepicker td.end-date {
    border-radius: 0 4px 4px 0
}

.daterangepicker td.start-date.end-date {
    border-radius: 4px
}

.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: #357ebd;
    border-color: transparent;
    color: #fff
}

.daterangepicker th.month {
    width: auto
}

.daterangepicker option.disabled,
.daterangepicker td.disabled {
    color: #999;
    cursor: not-allowed;
    text-decoration: line-through
}

.daterangepicker select.monthselect,
.daterangepicker select.yearselect {
    cursor: default;
    font-size: 12px;
    height: auto;
    margin: 0;
    padding: 1px
}

.daterangepicker select.monthselect {
    margin-right: 2%;
    width: 56%
}

.daterangepicker select.yearselect {
    width: 40%
}

.daterangepicker select.ampmselect,
.daterangepicker select.hourselect,
.daterangepicker select.minuteselect,
.daterangepicker select.secondselect {
    background: #eee;
    border: 1px solid #eee;
    font-size: 12px;
    margin: 0 auto;
    outline: 0;
    padding: 2px;
    width: 50px
}

.daterangepicker .calendar-time {
    line-height: 30px;
    margin: 4px auto 0;
    position: relative;
    text-align: center
}

.daterangepicker .calendar-time select.disabled {
    color: #ccc;
    cursor: not-allowed
}

.daterangepicker .drp-buttons {
    border-top: 1px solid #ddd;
    clear: both;
    display: none;
    line-height: 12px;
    padding: 8px;
    text-align: right;
    vertical-align: middle
}

.daterangepicker .drp-selected {
    display: inline-block;
    font-size: 12px;
    padding-right: 8px
}

.daterangepicker .drp-buttons .btn {
    font-size: 12px;
    font-weight: 700;
    margin-left: 8px;
    padding: 4px 8px
}

.daterangepicker.show-ranges.single.rtl .drp-calendar.left {
    border-right: 1px solid #ddd
}

.daterangepicker.show-ranges.single.ltr .drp-calendar.left {
    border-left: 1px solid #ddd
}

.daterangepicker.show-ranges.rtl .drp-calendar.right {
    border-right: 1px solid #ddd
}

.daterangepicker.show-ranges.ltr .drp-calendar.left {
    border-left: 1px solid #ddd
}

.daterangepicker .ranges {
    float: none;
    margin: 0;
    text-align: left
}

.daterangepicker.show-calendar .ranges {
    margin-top: 8px
}

.daterangepicker .ranges ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    width: 100%
}

.daterangepicker .ranges li {
    cursor: pointer;
    font-size: 12px;
    padding: 8px 12px
}

.daterangepicker .ranges li:hover {
    background-color: #eee
}

.daterangepicker .ranges li.active {
    background-color: #08c;
    color: #fff
}

@media (min-width:564px) {
    .daterangepicker {
        width: auto
    }
    .daterangepicker .ranges ul {
        width: 140px
    }
    .daterangepicker.single .ranges ul {
        width: 100%
    }
    .daterangepicker.single .drp-calendar.left {
        clear: none
    }
    .daterangepicker.single .drp-calendar,
    .daterangepicker.single .ranges {
        float: left
    }
    .daterangepicker {
        direction: ltr;
        text-align: left
    }
    .daterangepicker .drp-calendar.left {
        clear: left;
        margin-right: 0
    }
    .daterangepicker .drp-calendar.left .calendar-table {
        border-bottom-right-radius: 0;
        border-right: none;
        border-top-right-radius: 0
    }
    .daterangepicker .drp-calendar.right {
        margin-left: 0
    }
    .daterangepicker .drp-calendar.right .calendar-table {
        border-bottom-left-radius: 0;
        border-left: none;
        border-top-left-radius: 0
    }
    .daterangepicker .drp-calendar.left .calendar-table {
        padding-right: 8px
    }
    .daterangepicker .drp-calendar,
    .daterangepicker .ranges {
        float: left
    }
}

@media (min-width:730px) {
    .daterangepicker .ranges {
        float: left;
        width: auto
    }
    .daterangepicker.rtl .ranges {
        float: right
    }
    .daterangepicker .drp-calendar.left {
        clear: none !important
    }
}

.hidden{
    display:none;
}

.bv:before{
    content: "";
    background-image: radial-gradient(#000d0000, #000d0000, #01000d, #01000d);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.bv{
    position: absolute;
    width: 100%;
    
    left: 0;
    z-index: -1;
    
}

.bv video{
    object-fit: cover;
    width: 100%;
}

table tr.dt-hasChild td.dt-control:before {
    border-color: rgba(0, 0, 0, .5) transparent transparent;
    border-style: solid;
    border-width: 10px 5px 0
}

div.dt-scroll-body tfoot tr,
div.dt-scroll-body thead tr {
    height: 0
}

div.dt-scroll-body tfoot tr td,
div.dt-scroll-body tfoot tr th,
div.dt-scroll-body thead tr td,
div.dt-scroll-body thead tr th {
    border-bottom-width: 0 !important;
    border-top-width: 0 !important;
    height: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0 !important
}

div.dt-scroll-body tfoot tr td div.dt-scroll-sizing,
div.dt-scroll-body tfoot tr th div.dt-scroll-sizing,
div.dt-scroll-body thead tr td div.dt-scroll-sizing,
div.dt-scroll-body thead tr th div.dt-scroll-sizing {
    height: 0 !important;
    overflow: hidden !important
}

table thead>tr>td.dt-orderable-asc span.dt-column-order,
table thead>tr>td.dt-orderable-desc span.dt-column-order,
table thead>tr>td.dt-ordering-asc span.dt-column-order,
table thead>tr>td.dt-ordering-desc span.dt-column-order,
table thead>tr>th.dt-orderable-asc span.dt-column-order,
table thead>tr>th.dt-orderable-desc span.dt-column-order,
table thead>tr>th.dt-ordering-asc span.dt-column-order,
table thead>tr>th.dt-ordering-desc span.dt-column-order {
    display: inline-flex;
    flex-direction: column;
    position: absolute;
    right: 10px;
    top: 12px;
}

table thead>tr>td.dt-orderable-asc span.dt-column-order:after,
table thead>tr>td.dt-orderable-asc span.dt-column-order:before,
table thead>tr>td.dt-orderable-desc span.dt-column-order:after,
table thead>tr>td.dt-orderable-desc span.dt-column-order:before,
table thead>tr>td.dt-ordering-asc span.dt-column-order:after,
table thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table thead>tr>td.dt-ordering-desc span.dt-column-order:after,
table thead>tr>td.dt-ordering-desc span.dt-column-order:before,
table thead>tr>th.dt-orderable-asc span.dt-column-order:after,
table thead>tr>th.dt-orderable-asc span.dt-column-order:before,
table thead>tr>th.dt-orderable-desc span.dt-column-order:after,
table thead>tr>th.dt-orderable-desc span.dt-column-order:before,
table thead>tr>th.dt-ordering-asc span.dt-column-order:after,
table thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table thead>tr>th.dt-ordering-desc span.dt-column-order:after,
table thead>tr>th.dt-ordering-desc span.dt-column-order:before {
    font-size: .8em;
    left: 0;
    line-height: 9px;
    opacity: .125
}

table thead>tr>td.dt-orderable-asc,
table thead>tr>td.dt-orderable-desc,
table thead>tr>th.dt-orderable-asc,
table thead>tr>th.dt-orderable-desc {
    cursor: pointer
}

table thead>tr>td.dt-orderable-asc:hover,
table thead>tr>td.dt-orderable-desc:hover,
table thead>tr>th.dt-orderable-asc:hover,
table thead>tr>th.dt-orderable-desc:hover {
    outline: 2px solid rgba(0, 0, 0, .05);
    outline-offset: -2px
}

table thead>tr>td.dt-ordering-asc span.dt-column-order:before,
table thead>tr>td.dt-ordering-desc span.dt-column-order:after,
table thead>tr>th.dt-ordering-asc span.dt-column-order:before,
table thead>tr>th.dt-ordering-desc span.dt-column-order:after {
    opacity: .6
}

table thead>tr>td.sorting_asc_disabled span.dt-column-order:before,
table thead>tr>td.sorting_desc_disabled span.dt-column-order:after,
table thead>tr>th.sorting_asc_disabled span.dt-column-order:before,
table thead>tr>th.sorting_desc_disabled span.dt-column-order:after {
    display: none
}

table thead>tr>td:active,
table thead>tr>th:active {
    outline: none
}

div.dt-scroll-body>table>thead>tr>td,
div.dt-scroll-body>table>thead>tr>th {
    overflow: hidden
}

div.dt-processing {
    left: 50%;
    margin-left: -100px;
    margin-top: -22px;
    padding: 2px;
    position: absolute;
    text-align: center;
    top: 50%;
    width: 200px;
    z-index: 10
}

div.dt-processing>div:last-child {
    height: 15px;
    margin: 1em auto;
    position: relative;
    width: 80px
}

div.dt-processing>div:last-child>div {
    animation-timing-function: cubic-bezier(0, 1, 1, 0);
    background: #0d6efd;
    background: rgb(var(--dt-row-selected));
    border-radius: 50%;
    height: 13px;
    position: absolute;
    top: 0;
    width: 13px
}

div.dt-processing>div:last-child>div:first-child {
    animation: datatables-loader-1 .6s infinite;
    left: 8px
}

div.dt-processing>div:last-child>div:nth-child(2) {
    animation: datatables-loader-2 .6s infinite;
    left: 8px
}

div.dt-processing>div:last-child>div:nth-child(3) {
    animation: datatables-loader-2 .6s infinite;
    left: 32px
}

div.dt-processing>div:last-child>div:nth-child(4) {
    animation: datatables-loader-3 .6s infinite;
    left: 56px
}

table.nowrap td,
table.nowrap th {
    white-space: nowrap
}

table td,
table th {
    box-sizing: border-box
}

table td.dt-right,
table th.dt-right {
    text-align: right
}

table td.dt-empty,
table th.dt-empty {
    text-align: center;
    vertical-align: top
}

table {
    border-spacing: 0;
    margin: 0 auto;
    width: 100%;
    border-top: 1px solid var(--border-color);
}

table tfoot th,
table thead th {
    font-weight: 700
}

table>thead>tr>td,
table>thead>tr>th {
    border:none;
}

table>thead>tr>td:active,
table>thead>tr>th:active {
    outline: none
}

table>tfoot>tr>td,
table>tfoot>tr>th {
    border-top: 1px solid rgba(0, 0, 0, .3);
    padding: 10px 10px 6px
}

table>tbody>tr {
    background-color: transparent
}

table>tbody>tr:first-child>* {
    border-top: none
}

table>tbody>tr:last-child>* {
    border-bottom: none
}

table>tbody>tr.selected>* {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .9);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .9);
    color: #fff;
    color: rgb(var(--dt-row-selected-text))
}

table>tbody>tr.selected a {
    color: #090a0b;
    color: rgb(var(--dt-row-selected-link))
}

table>tbody>tr>td,
table>tbody>tr>th {
    padding: 8px 10px
}

table.display>tbody>tr>*,
table.row-border>tbody>tr>* {
    border-top: 1px solid rgba(0, 0, 0, .15)
}

table.display>tbody>tr:first-child>*,
table.row-border>tbody>tr:first-child>* {
    border-top: none
}

table.display>tbody>tr.selected+tr.selected>td,
table.row-border>tbody>tr.selected+tr.selected>td {
    border-top-color: rgba(13, 110, 253, .65);
    border-top-color: rgba(var(--dt-row-selected), .65)
}

table.display>tbody>tr:nth-child(odd)>*,
table.stripe>tbody>tr:nth-child(odd)>* {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .023);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-stripe), .023)
}

table.display>tbody>tr:nth-child(odd).selected>*,
table.stripe>tbody>tr:nth-child(odd).selected>* {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .923);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .923)
}

table.display>tbody>tr:hover>*,
table.hover>tbody>tr:hover>* {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .035);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), .035)
}

table.display>tbody>tr.selected:hover>*,
table.hover>tbody>tr.selected:hover>* {
    box-shadow: inset 0 0 0 9999px #0d6efd !important;
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), 1) !important
}

table.display>tbody tr>.sorting_1,
table.display>tbody tr>.sorting_2,
table.display>tbody tr>.sorting_3,
table.order-column>tbody tr>.sorting_1,
table.order-column>tbody tr>.sorting_2,
table.order-column>tbody tr>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .019);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), .019)
}

table.display>tbody tr.selected>.sorting_1,
table.display>tbody tr.selected>.sorting_2,
table.display>tbody tr.selected>.sorting_3,
table.order-column>tbody tr.selected>.sorting_1,
table.order-column>tbody tr.selected>.sorting_2,
table.order-column>tbody tr.selected>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .919);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .919)
}

table.display>tbody>tr:nth-child(odd)>.sorting_1,
table.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .054);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), .054)
}

table.display>tbody>tr:nth-child(odd)>.sorting_2,
table.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_2 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .047);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), .047)
}

table.display>tbody>tr:nth-child(odd)>.sorting_3,
table.order-column.stripe>tbody>tr:nth-child(odd)>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .039);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), .039)
}

table.display>tbody>tr:nth-child(odd).selected>.sorting_1,
table.order-column.stripe>tbody>tr:nth-child(odd).selected>.sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .954);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .954)
}

table.display>tbody>tr:nth-child(odd).selected>.sorting_2,
table.order-column.stripe>tbody>tr:nth-child(odd).selected>.sorting_2 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .947);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .947)
}

table.display>tbody>tr:nth-child(odd).selected>.sorting_3,
table.order-column.stripe>tbody>tr:nth-child(odd).selected>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .939);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .939)
}

table.display>tbody>tr.even>.sorting_1,
table.order-column.stripe>tbody>tr.even>.sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .019);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), .019)
}

table.display>tbody>tr.even>.sorting_2,
table.order-column.stripe>tbody>tr.even>.sorting_2 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .011);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), .011)
}

table.display>tbody>tr.even>.sorting_3,
table.order-column.stripe>tbody>tr.even>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .003);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-column-ordering), .003)
}

table.display>tbody>tr.even.selected>.sorting_1,
table.order-column.stripe>tbody>tr.even.selected>.sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .919);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .919)
}

table.display>tbody>tr.even.selected>.sorting_2,
table.order-column.stripe>tbody>tr.even.selected>.sorting_2 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .911);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .911)
}

table.display>tbody>tr.even.selected>.sorting_3,
table.order-column.stripe>tbody>tr.even.selected>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .903);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .903)
}

table.display tbody tr:hover>.sorting_1,
table.order-column.hover tbody tr:hover>.sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .082);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), .082)
}

table.display tbody tr:hover>.sorting_2,
table.order-column.hover tbody tr:hover>.sorting_2 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .074);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), .074)
}

table.display tbody tr:hover>.sorting_3,
table.order-column.hover tbody tr:hover>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, .062);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-hover), .062)
}

table.display tbody tr:hover.selected>.sorting_1,
table.order-column.hover tbody tr:hover.selected>.sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .982);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .982)
}

table.display tbody tr:hover.selected>.sorting_2,
table.order-column.hover tbody tr:hover.selected>.sorting_2 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .974);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .974)
}

table.display tbody tr:hover.selected>.sorting_3,
table.order-column.hover tbody tr:hover.selected>.sorting_3 {
    box-shadow: inset 0 0 0 9999px rgba(13, 110, 253, .962);
    box-shadow: inset 0 0 0 9999px rgba(var(--dt-row-selected), .962)
}

table.compact tbody td,
table.compact tbody th,
table.compact tfoot td,
table.compact tfoot th,
table.compact thead td,
table.compact thead th {
    padding: 4px
}

.table-container {
   position: relative;
   min-height: 360px;
}

div.dt-container {
    border-radius: var(--border-radius);
    overflow: hidden;
    clear: both;
    position: relative
}

div.dt-container div.dt-layout-row {
    clear: both;
    display: table;
    width: 100%
}

div.dt-container div.dt-layout-row.dt-layout-table,
div.dt-container div.dt-layout-row.dt-layout-table div.dt-layout-cell {
    display: block
}

div.dt-container div.dt-layout-cell {
    display: table-cell;
    vertical-align: middle
}

div.dt-container div.dt-layout-cell.dt-full {
    text-align: center
}

div.dt-container div.dt-layout-cell.dt-start {
    text-align: left
}

div.dt-container div.dt-layout-cell.dt-end {
    text-align: right
}

div.dt-container div.dt-layout-cell:empty {
    display: none
}

div.dt-container .dt-search input {
    margin-left: 3px
}

div.dt-container .dt-input,
div.dt-container .dt-search input {
    background-color: transparent;
    border: 1px solid #aaa;
    border-radius: 3px;
    color: inherit;
    padding: 5px
}

div.dt-container select.dt-input {
    padding: 4px
}

div.dt-container .dt-paging .dt-paging-button {
    background: transparent;
    border: 1px solid transparent;
    border-radius: 2px;
    box-sizing: border-box;
    color: inherit !important;
    cursor: pointer;
    display: inline-block;
    margin-left: 2px;
    min-width: 1.5em;
    padding: .5em 1em;
    text-align: center;
    text-decoration: none !important
}

div.dt-container .dt-paging .dt-paging-button.current,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background-color: rgba(0, 0, 0, .05);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, hsla(0, 0%, 90%, .05)), color-stop(100%, rgba(0, 0, 0, .05)));
    background: -webkit-linear-gradient(top, hsla(0, 0%, 90%, .05), rgba(0, 0, 0, .05));
    background: -moz-linear-gradient(top, hsla(0, 0%, 90%, .05) 0, rgba(0, 0, 0, .05) 100%);
    background: -ms-linear-gradient(top, hsla(0, 0%, 90%, .05) 0, rgba(0, 0, 0, .05) 100%);
    background: -o-linear-gradient(top, hsla(0, 0%, 90%, .05) 0, rgba(0, 0, 0, .05) 100%);
    background: linear-gradient(180deg, hsla(0, 0%, 90%, .05) 0, rgba(0, 0, 0, .05));
    border: 1px solid rgba(0, 0, 0, .3);
    color: inherit !important
}

div.dt-container .dt-paging .dt-paging-button:hover {
    background-color: #111;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #585858), color-stop(100%, #111));
    background: -webkit-linear-gradient(top, #585858, #111);
    background: -moz-linear-gradient(top, #585858 0, #111 100%);
    background: -ms-linear-gradient(top, #585858 0, #111 100%);
    background: -o-linear-gradient(top, #585858 0, #111 100%);
    background: linear-gradient(180deg, #585858 0, #111);
    border: 1px solid #111;
    color: var(--text-color);
}

div.dt-container .dt-paging .dt-paging-button:active {
    background-color: #0c0c0c;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #2b2b2b), color-stop(100%, #0c0c0c));
    background: -webkit-linear-gradient(top, #2b2b2b, #0c0c0c);
    background: -moz-linear-gradient(top, #2b2b2b 0, #0c0c0c 100%);
    background: -ms-linear-gradient(top, #2b2b2b 0, #0c0c0c 100%);
    background: -o-linear-gradient(top, #2b2b2b 0, #0c0c0c 100%);
    background: linear-gradient(180deg, #2b2b2b 0, #0c0c0c);
    box-shadow: inset 0 0 3px #111;
    outline: none
}

div.dt-container .dt-paging .ellipsis {
    padding: 0 1em
}

div.dt-container .dt-info,
div.dt-container .dt-length,
div.dt-container .dt-paging,
div.dt-container .dt-processing,
div.dt-container .dt-search {
    color: inherit
}

div.dt-container .dataTables_scroll {
    clear: both
}

div.dt-container .dataTables_scroll div.dt-scroll-body {
    -webkit-overflow-scrolling: touch
}

div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>td,
div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>th,
div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>td,
div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>th {
    vertical-align: middle
}

div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>td>div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body>table>tbody>tr>th>div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>td>div.dataTables_sizing,
div.dt-container .dataTables_scroll div.dt-scroll-body>table>thead>tr>th>div.dataTables_sizing {
    height: 0;
    margin: 0 !important;
    overflow: hidden;
    padding: 0 !important
}

div.dt-container.dt-empty-footer .dt-scroll-body,
div.dt-container.dt-empty-footer tbody>tr:last-child>* {
    border-bottom: 1px solid var(--border-color);
}

div.dt-container.dt-empty-footer .dt-scroll-body tbody>tr:last-child>* {
    border-bottom: none
}

@media screen and (max-width:767px) {
  
    div.dt-container div.dt-layout-cell,
    div.dt-container div.dt-layout-row {
        display: block
    }
    div.dt-container div.dt-layout-cell.dt-end,
    div.dt-container div.dt-layout-cell.dt-full,
    div.dt-container div.dt-layout-cell.dt-start {
        text-align: center
    }
}

@media screen and (max-width:640px) {
    .dt-container .dt-length,
    .dt-container .dt-search {
        float: none;
        text-align: center
    }
    .dt-container .dt-search {
        margin-top: .5em
    }
}

[dir=rtl] table tfoot td,
[dir=rtl] table tfoot th,
[dir=rtl] table thead td,
[dir=rtl] table thead th {
    text-align: right
}

[dir=rtl] table td.dt-type-date,
[dir=rtl] table td.dt-type-numeric,
[dir=rtl] table th.dt-type-date,
[dir=rtl] table th.dt-type-numeric {
    text-align: left
}

[dir=rtl] div.dt-container div.dt-layout-cell.dt-start {
    text-align: right
}

[dir=rtl] div.dt-container div.dt-layout-cell.dt-end {
    text-align: left
}

[dir=rtl] div.dt-container div.dt-search input {
    margin: 0 3px 0 0
}

table.dtr-inline.collapsed>tbody>tr>td.child,
table.dtr-inline.collapsed>tbody>tr>td.dataTables_empty,
table.dtr-inline.collapsed>tbody>tr>th.child {
    cursor: default !important
}

table.dtr-inline.collapsed>tbody>tr>td.child:before,
table.dtr-inline.collapsed>tbody>tr>td.dataTables_empty:before,
table.dtr-inline.collapsed>tbody>tr>th.child:before {
    display: none !important
}

table.dtr-inline.collapsed>tbody>tr>td.dtr-control,
table.dtr-inline.collapsed>tbody>tr>th.dtr-control {
    cursor: pointer
}

table.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    border-color: transparent transparent transparent rgba(0, 0, 0, .5);
    border-style: solid;
    border-width: 5px 0 5px 10px;
    box-sizing: border-box;
    content: "";
    display: inline-block;
    margin-right: .5em
}

table.dtr-inline.collapsed>tbody>tr>td.dtr-control.arrow-right:before,
table.dtr-inline.collapsed>tbody>tr>th.dtr-control.arrow-right:before {
    border-color: transparent rgba(0, 0, 0, .5) transparent transparent;
    border-style: solid;
    border-width: 5px 10px 5px 0
}

table.dtr-inline.collapsed>tbody>tr.dtr-expanded>td.dtr-control:before,
table.dtr-inline.collapsed>tbody>tr.dtr-expanded>th.dtr-control:before {
    border-color: rgba(0, 0, 0, .5) transparent transparent;
    border-style: solid;
    border-width: 10px 5px 0
}

table.dtr-inline.collapsed.compact>tbody>tr>td.dtr-control,
table.dtr-inline.collapsed.compact>tbody>tr>th.dtr-control {
    padding-left: .333em
}

table.dtr-column>tbody>tr>td.control,
table.dtr-column>tbody>tr>td.dtr-control,
table.dtr-column>tbody>tr>th.control,
table.dtr-column>tbody>tr>th.dtr-control {
    cursor: pointer
}

table.dtr-column>tbody>tr>td.control:before,
table.dtr-column>tbody>tr>td.dtr-control:before,
table.dtr-column>tbody>tr>th.control:before,
table.dtr-column>tbody>tr>th.dtr-control:before {
    border-color: transparent transparent transparent rgba(0, 0, 0, .5);
    border-style: solid;
    border-width: 5px 0 5px 10px;
    box-sizing: border-box;
    content: "";
    display: inline-block
}

table.dtr-column>tbody>tr>td.control.arrow-right:before,
table.dtr-column>tbody>tr>td.dtr-control.arrow-right:before,
table.dtr-column>tbody>tr>th.control.arrow-right:before,
table.dtr-column>tbody>tr>th.dtr-control.arrow-right:before {
    border-color: transparent rgba(0, 0, 0, .5) transparent transparent;
    border-style: solid;
    border-width: 5px 10px 5px 0
}

table.dtr-column>tbody>tr.dtr-expanded td.control:before,
table.dtr-column>tbody>tr.dtr-expanded td.dtr-control:before,
table.dtr-column>tbody>tr.dtr-expanded th.control:before,
table.dtr-column>tbody>tr.dtr-expanded th.dtr-control:before {
    border-color: rgba(0, 0, 0, .5) transparent transparent;
    border-style: solid;
    border-width: 10px 5px 0
}

table>tbody>tr.child {
    padding: .5em 1em
}

table>tbody>tr.child:hover {
    background: transparent !important
}

table>tbody>tr.child ul.dtr-details {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0
}

table>tbody>tr.child ul.dtr-details>li {
    border-bottom: 1px solid #efefef;
    padding: .5em 0
}

table>tbody>tr.child ul.dtr-details>li:first-child {
    padding-top: 0
}

table>tbody>tr.child ul.dtr-details>li:last-child {
    border-bottom: none;
    padding-bottom: 0
}

table>tbody>tr.child span.dtr-title {
    display: inline-block;
    font-weight: 700;
    min-width: 75px
}

.titlebar .inner{
    padding: 90px 0 90px 0;
}

.titlebar.mp .inner{
    padding-bottom: 30px;
}

div.dtr-modal {
    box-sizing: border-box;
    height: 100%;
    left: 0;
    padding: 10em 1em;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 100
}

div.dtr-modal div.dtr-modal-display {
    background-color: #f5f5f7;
    border: 1px solid #000;
    border-radius: .5em;
    bottom: 0;
    box-shadow: 0 12px 30px rgba(0, 0, 0, .6);
    height: fit-content;
    left: 0;
    margin: auto;
    max-height: 75%;
    overflow: auto;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    z-index: 102
}

div.dtr-modal div.dtr-modal-content {
    padding: 2.5em;
    position: relative
}

div.dtr-modal div.dtr-modal-content h2 {
    margin-top: 0
}

div.dtr-modal div.dtr-modal-close {
    border-radius: 3px;
    cursor: pointer;
    height: 22px;
    position: absolute;
    right: 6px;
    text-align: center;
    top: 6px;
    width: 22px;
    z-index: 12
}

div.dtr-modal div.dtr-modal-background {
    background: rgba(0, 0, 0, .6);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 101
}

@media screen and (max-width:767px) {
    div.dtr-modal div.dtr-modal-display {
        width: 95%
    }
}

.dropzone,
.dropzone * {
    box-sizing: border-box
}

.dropzone {
    border: 1px solid rgba(0, 0, 0, .8);
    border-radius: 5px;
}

.dropzone.dz-clickable {
    cursor: pointer;
    background-size: cover !important;
    background-position: center !important;
}

.dropzone.dz-clickable * {
    cursor: default
}

.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
    cursor: pointer
}

.dropzone.dz-started .dz-message {
    display: none
}

.dropzone.dz-drag-hover {
    border-style: solid
}

.dropzone.dz-drag-hover .dz-message {
    opacity: .5
}

.dropzone .dz-message {
    margin: 3em 0;
    text-align: center
}

.dropzone .dz-message .dz-button {
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    font: inherit;
    outline: inherit;
    padding: 0
}

.dropzone .dz-preview {
    display: inline-block;
    margin: 16px;
    min-height: 100px;
    position: relative;
    vertical-align: top
}

.dropzone .dz-preview:hover {
    z-index: 1000
}

.dropzone .dz-preview.dz-file-preview .dz-image {
    background: #999;
    background: linear-gradient(180deg, #eee, #ddd);
    border-radius: 20px
}

.dropzone .dz-preview.dz-file-preview .dz-details {
    opacity: 1
}

.dropzone .dz-preview.dz-image-preview .dz-details {
    transition: opacity .2s linear
}

.dropzone .dz-preview .dz-remove {
    border: none;
    cursor: pointer;
    display: block;
    font-size: 14px;
    text-align: center
}

.dropzone .dz-preview .dz-remove:hover {
    text-decoration: underline
}

.dropzone .dz-preview:hover .dz-details {
    opacity: 1
}

.dropzone .dz-preview .dz-details {
    color: rgba(0, 0, 0, .9);
    font-size: 13px;
    left: 0;
    line-height: 150%;
    max-width: 100%;
    min-width: 100%;
    opacity: 0;
    padding: 2em 1em;
    position: absolute;
    text-align: center;
    top: 0;
    z-index: 20
}

.dropzone .dz-preview .dz-details .dz-size {
    font-size: 16px;
    margin-bottom: 1em
}

.dropzone .dz-preview .dz-details .dz-filename {
    white-space: nowrap
}

.dropzone .dz-preview .dz-details .dz-filename:hover span {
    background-color: hsla(0, 0%, 100%, .8);
    border: 1px solid hsla(0, 0%, 78%, .8)
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) {
    overflow: hidden;
    text-overflow: ellipsis
}

.dropzone .dz-preview .dz-details .dz-filename:not(:hover) span {
    border: 1px solid transparent
}

.dropzone .dz-preview .dz-details .dz-filename span,
.dropzone .dz-preview .dz-details .dz-size span {
    background-color: hsla(0, 0%, 100%, .4);
    border-radius: 3px;
    padding: 0 .4em
}

.dropzone .dz-preview:hover .dz-image img {
    filter: blur(8px);
    transform: scale(1.05)
}

.dropzone .dz-preview .dz-image {
    border-radius: 20px;
    display: block;
    height: 100%;
    overflow: hidden;
    position: relative;
    width: 120px;
    z-index: 10;
}

.dropzone .dz-preview .dz-image img {
    display: block
}

.dropzone .dz-preview.dz-success .dz-success-mark {
    animation: passing-through 3s cubic-bezier(.77, 0, .175, 1)
}

.dropzone .dz-preview.dz-error .dz-error-mark {
    animation: slide-in 3s cubic-bezier(.77, 0, .175, 1);
    opacity: 1
}

.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark {
    background: rgba(0, 0, 0, .8);
    border-radius: 50%;
    display: block;
    left: 50%;
    margin-left: -27px;
    margin-top: -27px;
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 50%;
    z-index: 500
}

.dropzone .dz-preview .dz-error-mark svg,
.dropzone .dz-preview .dz-success-mark svg {
    display: block;
    height: 54px;
    width: 54px;
    fill: #fff
}

.dropzone .dz-preview.dz-processing .dz-progress {
    opacity: 1;
    transition: all .2s linear
}

.dropzone .dz-preview.dz-complete .dz-progress {
    opacity: 0;
    transition: opacity .4s ease-in
}

.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    animation: pulse 6s ease infinite
}

.dropzone .dz-preview .dz-progress {
    background: rgba(0, 0, 0, .8);
    border: 3px solid rgba(0, 0, 0, .8);
    border-radius: 10px;
    height: 20px;
    left: 15%;
    margin-top: -10px;
    opacity: 1;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    right: 15%;
    top: 50%;
    z-index: 1000
}

.dropzone .dz-preview .dz-progress .dz-upload {
    background: #fff;
    border-radius: 17px;
    display: block;
    height: 100%;
    position: relative;
    transition: width .3s ease-in-out;
    width: 0
}

.dropzone .dz-preview.dz-error .dz-error-message {
    display: block
}

.dropzone .dz-preview.dz-error:hover .dz-error-message {
    opacity: 1;
    pointer-events: auto
}

.dropzone .dz-preview .dz-error-message {
    background: #b10606;
    border-radius: 8px;
    color: #fff;
    display: block;
    display: none;
    font-size: 13px;
    left: -10px;
    opacity: 0;
    padding: .5em 1em;
    pointer-events: none;
    position: absolute;
    top: 130px;
    transition: opacity .3s ease;
    width: 140px;
    z-index: 1000
}

.dropzone .dz-preview .dz-error-message:after {
    border-bottom: 6px solid #b10606;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    content: "";
    height: 0;
    left: 64px;
    position: absolute;
    top: -6px;
    width: 0
}

/*!
* jQuery SmartWizard v6.x
* The awesome step wizard plugin for jQuery
* http://www.techlaboratory.net/jquery-smartwizard
*
* Created by Dipu Raj (http://dipu.me)
*
* Licensed under the terms of the MIT License
* https://github.com/techlab/jquery-smartwizard/blob/master/LICENSE
*/

.sw {
    position: relative
}

.sw *,
.sw :after,
.sw :before {
    box-sizing: border-box
}

.sw>.tab-content {
    overflow: hidden;
    position: relative
}

.sw .toolbar,
.sw>.tab-content>.tab-pane {
    padding: .8rem
}

.sw .toolbar {
    text-align: right
}

.sw .toolbar>.sw-btn {
    background-color: var(--sw-toolbar-btn-background-color);
    border: 1px solid var(--sw-toolbar-btn-background-color);
    border-radius: .25rem;
    color: var(--sw-toolbar-btn-color);
    cursor: pointer;
    display: inline-block;
    font-weight: 400;
    margin-left: .2rem;
    margin-right: .2rem;
    padding: .375rem .75rem;
    text-align: center;
    text-decoration: none;
    text-transform: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle
}

.sw .toolbar>.sw-btn.disabled,
.sw .toolbar>.sw-btn:disabled {
    opacity: .65
}

.sw[dir=rtl]>.toolbar {
    text-align: left
}

.sw>.nav {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 0;
    margin-top: 0;
    padding-left: 0
}

@media screen and (max-width:640px) {
    .sw>.nav {
        flex: 1 auto;
        flex-direction: column !important
    }
}

.sw>.nav .nav-link {
    display: block;
    padding: .5rem 1rem
}

.sw>.nav .nav-link,
.sw>.nav .nav-link:active,
.sw>.nav .nav-link:focus,
.sw>.nav .nav-link:hover {
    text-decoration: none
}

.sw>.nav .nav-link::-moz-focus-inner {
    border: 0
}

.sw>.nav .nav-link.disabled {
    cursor: not-allowed;
    pointer-events: none
}

.sw>.nav .nav-link.hidden {
    display: none;
    visibility: none
}

.sw>.nav .nav-link>.num {
    align-items: center;
    border-radius: 10em;
    clear: both;
    display: flex;
    float: left;
    font-size: 2em;
    font-weight: 800;
    height: 100%;
    justify-content: center;
    line-height: 1;
    padding-left: .5rem;
    padding-right: .5rem;
    pointer-events: none;
    text-align: center;
    text-decoration: none
}

.sw[dir=rtl]>.nav .nav-link>.num {
    float: right
}

.sw>.progress {
    background: var(--sw-progress-background-color);
    border: 0;
    height: 5px;
    margin: 0;
    overflow: hidden;
    padding: 0;
    width: 100%
}

.sw>.progress>.progress-bar {
    background-color: var(--sw-progress-color);
    height: 5px;
    transition: width .5s ease-in-out;
    width: 0
}

.sw.sw-justified>.nav .nav-link,
.sw.sw-justified>.nav>li {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center
}

.sw.sw-loading {
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.sw.sw-loading:after {
    background: var(--sw-loader-background-wrapper-color);
    content: "";
    display: block;
    height: 100%;
    left: 0;
    opacity: 1;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2
}

.sw.sw-loading:before {
    -webkit-animation: spin 1s linear infinite;
    animation: spin 1s linear infinite;
    border-top: 10px solid var(--sw-loader-color);
    border: 10px solid var(--sw-loader-color);
    border-radius: 50%;
    border-top-color: var(--sw-loader-background-color);
    content: "";
    display: inline-block;
    height: 2rem;
    left: 45%;
    position: absolute;
    top: 45%;
    width: 2rem;
    z-index: 10
}

.sw-theme-basic>.nav {
    box-shadow: 0 .125rem .25rem rgba(0, 0, 0, .1) !important
}

.sw-theme-basic>.nav .nav-link {
    height: 100%;
    margin-right: 5px;
    min-height: 100%;
    position: relative
}

.sw-theme-basic>.nav .nav-link:after {
    bottom: -1px;
    content: "";
    height: 2px;
    left: 0;
    pointer-events: none;
    position: absolute;
    transition: all .35s ease .15s;
    width: 0;
    width: 100%
}

.sw-theme-basic>.nav .nav-link.default {
    color: var(--sw-anchor-default-secondary-color);
    cursor: not-allowed
}

.sw-theme-basic>.nav .nav-link.default:after {
    background-color: var(--sw-anchor-default-secondary-color)
}

.sw-theme-basic>.nav .nav-link.active {
    color: var(--sw-anchor-active-primary-color) !important;
    cursor: pointer
}

.sw-theme-basic>.nav .nav-link.active:after {
    background: var(--main-color) !important

}

.sw-theme-basic>.nav .nav-link.done {
    color: var(--sw-anchor-done-primary-color);
    cursor: pointer
}

.sw-theme-basic>.nav .nav-link.done:after {
    background: var(--sw-anchor-done-primary-color)
}

.sw-theme-basic>.nav .nav-link.disabled {
    color: var(--sw-anchor-disabled-primary-color) !important
}

.sw-theme-basic>.nav .nav-link.disabled:after {
    background: var(--sw-anchor-disabled-primary-color)
}

.sw-theme-basic>.nav .nav-link.error {
    color: var(--sw-anchor-error-primary-color) !important;
    cursor: pointer
}

.sw-theme-basic>.nav .nav-link.error:after {
    background: var(--sw-anchor-error-primary-color) !important
}

.sw-theme-basic>.nav .nav-link.warning {
    color: var(--sw-anchor-warning-primary-color) !important;
    cursor: pointer
}

.sw-theme-basic>.nav .nav-link.warning:after {
    background: var(--sw-anchor-warning-primary-color) !important
}

.sw-theme-arrows>.nav {
    overflow: hidden
}

@media screen and (min-width:640px) {
    .sw-theme-arrows>.nav .nav-item:first-child .nav-link {
        margin-left: 0;
        padding-left: 10px
    }
}

.sw-theme-arrows>.nav .nav-item:last-child .nav-link {
    margin-right: 0
}

.sw-theme-arrows>.nav .nav-link {
    height: 100%;
    margin-left: -30px;
    margin-right: 30px;
    padding: 10px 10px 10px 50px;
    position: relative;
    transition: all .5s ease-in-out
}

@media screen and (max-width:640px) {
    .sw-theme-arrows>.nav .nav-link {
        margin-right: unset;
        overflow: hidden;
        text-align: left !important
    }
}

.sw-theme-arrows>.nav .nav-link:after,
.sw-theme-arrows>.nav .nav-link:before {
    border: 50px solid transparent;
    border-left-width: 40px;
    content: "";
    display: block;
    height: 0;
    left: 100%;
    margin-top: -50px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transition: all .5s ease-in-out;
    width: 0
}

.sw-theme-arrows>.nav .nav-link:after {
    z-index: 2
}

.sw-theme-arrows>.nav .nav-link:before {
    z-index: 1
}

.sw-theme-arrows>.nav .nav-link.default {
    background-color: var(--sw-anchor-default-primary-color);
    color: var(--sw-anchor-default-secondary-color);
    cursor: not-allowed
}

@media screen and (max-width:640px) {
    .sw-theme-arrows>.nav .nav-link.default {
        border-bottom: 1px solid var(--sw-anchor-default-primary-color)
    }
}

.sw-theme-arrows>.nav .nav-link.default:after {
    border-left-color: var(--sw-anchor-default-primary-color)
}

.sw-theme-arrows>.nav .nav-link.default:before {
    border-left-color: var(--sw-anchor-default-secondary-color)
}

.sw-theme-arrows>.nav .nav-link.active {
    background-color: var(--sw-anchor-active-primary-color);
    border-color: var(--sw-anchor-active-primary-color);
    color: var(--sw-anchor-active-secondary-color) !important;
    cursor: pointer
}

@media screen and (max-width:640px) {
    .sw-theme-arrows>.nav .nav-link.active {
        border-bottom: 1px solid var(--sw-anchor-active-secondary-color)
    }
}

.sw-theme-arrows>.nav .nav-link.active:after {
    border-left-color: var(--sw-anchor-active-primary-color)
}

.sw-theme-arrows>.nav .nav-link.active:before {
    border-left-color: var(--sw-anchor-active-secondary-color)
}

.sw-theme-arrows>.nav .nav-link.done {
    background-color: var(--sw-anchor-done-primary-color);
    border-color: var(--sw-anchor-done-primary-color);
    color: var(--sw-anchor-done-secondary-color);
    cursor: pointer
}

@media screen and (max-width:640px) {
    .sw-theme-arrows>.nav .nav-link.done {
        border-bottom: 1px solid var(--sw-anchor-done-secondary-color)
    }
}

.sw-theme-arrows>.nav .nav-link.done:after {
    border-left-color: var(--sw-anchor-done-primary-color)
}

.sw-theme-arrows>.nav .nav-link.done:before {
    border-left-color: var(--sw-anchor-done-secondary-color)
}

.sw-theme-arrows>.nav .nav-link.disabled {
    background-color: var(--sw-anchor-disabled-primary-color);
    border-color: var(--sw-anchor-disabled-primary-color);
    color: var(--sw-anchor-disabled-secondary-color)
}

@media screen and (max-width:640px) {
    .sw-theme-arrows>.nav .nav-link.disabled {
        border-bottom: 1px solid var(--sw-anchor-disabled-secondary-color)
    }
}

.sw-theme-arrows>.nav .nav-link.disabled:after {
    border-left-color: var(--sw-anchor-disabled-primary-color)
}

.sw-theme-arrows>.nav .nav-link.disabled:before {
    border-left-color: var(--sw-anchor-disabled-secondary-color)
}

.sw-theme-arrows>.nav .nav-link.error {
    background-color: var(--sw-anchor-error-primary-color);
    border-color: var(--sw-anchor-error-primary-color);
    color: var(--sw-anchor-error-secondary-color);
    cursor: pointer
}

@media screen and (max-width:640px) {
    .sw-theme-arrows>.nav .nav-link.error {
        border-bottom: 1px solid var(--sw-anchor-error-secondary-color)
    }
}

.sw-theme-arrows>.nav .nav-link.error:after {
    border-left-color: var(--sw-anchor-error-primary-color)
}

.sw-theme-arrows>.nav .nav-link.error:before {
    border-left-color: var(--sw-anchor-error-secondary-color)
}

.sw-theme-arrows>.nav .nav-link.warning {
    background-color: var(--sw-anchor-warning-primary-color);
    border-color: var(--sw-anchor-warning-primary-color);
    color: var(--sw-anchor-warning-secondary-color);
    cursor: pointer
}

@media screen and (max-width:640px) {
    .sw-theme-arrows>.nav .nav-link.warning {
        border-bottom: 1px solid var(--sw-anchor-warning-secondary-color)
    }
}

.sw-theme-arrows>.nav .nav-link.warning:after {
    border-left-color: var(--sw-anchor-warning-primary-color)
}

.sw-theme-arrows>.nav .nav-link.warning:before {
    border-left-color: var(--sw-anchor-warning-secondary-color)
}

.sw-theme-arrows[dir=rtl]>.nav {
    padding-right: 0
}

.sw-theme-arrows[dir=rtl]>.nav .nav-item:first-child .nav-link {
    margin-left: unset;
    margin-right: 0;
    padding-left: unset;
    padding-right: 10px
}

.sw-theme-arrows[dir=rtl]>.nav .nav-item:last-child .nav-link {
    margin-left: 0;
    margin-right: unset
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link {
    margin-left: unset;
    margin-right: unset;
    padding-left: unset;
    padding-right: 50px
}

@media screen and (max-width:640px) {
    .sw-theme-arrows[dir=rtl]>.nav .nav-link {
        margin-left: unset
    }
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link:after,
.sw-theme-arrows[dir=rtl]>.nav .nav-link:before {
    border-left-width: 0;
    border-right-width: 40px;
    left: unset;
    right: 100%
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.default:after {
    border-right-color: var(--sw-anchor-default-primary-color)
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.default:before {
    border-right-color: var(--sw-anchor-default-secondary-color)
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.active:after {
    border-right-color: var(--sw-anchor-active-primary-color)
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.active:before {
    border-right-color: var(--sw-anchor-active-secondary-color)
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.done:after {
    border-right-color: var(--sw-anchor-done-primary-color)
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.done:before {
    border-right-color: var(--sw-anchor-done-secondary-color)
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.disabled:after {
    border-left-color: unset;
    border-right-color: var(--sw-anchor-disabled-primary-color)
}

.sw-theme-arrows[dir=rtl]>.nav .nav-link.disabled:before {
    border-left-color: unset;
    border-right-color: var(--sw-anchor-disabled-secondary-color)
}

.sw-theme-dots>.nav {
    margin-bottom: 10px;
    position: relative
}

.sw-theme-dots>.nav:before {
    background-color: var(--sw-border-color);
    border-radius: 3px;
    content: " ";
    height: 5px;
    left: 0;
    position: absolute;
    top: 18px;
    width: 100%;
    z-index: 1
}

@media screen and (max-width:640px) {
    .sw-theme-dots>.nav:before {
        height: 100%;
        left: 20.5px;
        top: 0;
        width: 5px
    }
    .sw-theme-dots>.nav .nav-item:last-child .nav-link {
        margin-bottom: 0
    }
}

.sw-theme-dots>.nav .nav-link {
    margin-top: 40px;
    position: relative
}

@media screen and (max-width:640px) {
    .sw-theme-dots>.nav .nav-link {
        margin-bottom: 20px;
        margin-top: unset;
        padding-left: 55px;
        text-align: left !important
    }
}

.sw-theme-dots>.nav .nav-link:after {
    border: 8px solid var(--sw-border-color);
    border-radius: 50%;
    content: " ";
    display: block;
    height: 46px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: -42px;
    transition: all .5s ease-in-out;
    width: 46px;
    z-index: 99
}

@media screen and (max-width:640px) {
    .sw-theme-dots>.nav .nav-link:after {
        right: unset;
        top: 0
    }
}

.sw-theme-dots>.nav .nav-link>.num {
    display: block;
    font-size: 1.5em;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: -31px;
    transition: all .5s ease-in-out;
    z-index: 100
}

@media screen and (max-width:640px) {
    .sw-theme-dots>.nav .nav-link>.num {
        padding-top: 10px;
        right: unset;
        top: 0;
        width: 46px
    }
}

.sw-theme-dots>.nav .nav-link.default {
    color: var(--sw-anchor-default-secondary-color);
    cursor: not-allowed
}

.sw-theme-dots>.nav .nav-link.default>.num {
    color: var(--sw-anchor-default-primary-color) !important
}

.sw-theme-dots>.nav .nav-link.default:after {
    background-color: var(--sw-anchor-default-secondary-color)
}

.sw-theme-dots>.nav .nav-link.active {
    color: var(--sw-anchor-active-primary-color) !important;
    cursor: pointer
}

.sw-theme-dots>.nav .nav-link.active>.num {
    color: var(--sw-anchor-active-secondary-color) !important
}

.sw-theme-dots>.nav .nav-link.active:after {
    background-color: var(--sw-anchor-active-primary-color) !important;
    box-shadow: 0 1px 7px 1px rgba(0, 0, 0, .3)
}

.sw-theme-dots>.nav .nav-link.done {
    color: var(--sw-anchor-done-primary-color);
    cursor: pointer
}

.sw-theme-dots>.nav .nav-link.done>.num {
    color: var(--sw-anchor-done-secondary-color) !important
}

.sw-theme-dots>.nav .nav-link.done:after {
    background-color: var(--sw-anchor-done-primary-color)
}

.sw-theme-dots>.nav .nav-link.disabled {
    color: var(--sw-anchor-disabled-primary-color)
}

.sw-theme-dots>.nav .nav-link.disabled>.num {
    color: var(--sw-anchor-disabled-secondary-color) !important
}

.sw-theme-dots>.nav .nav-link.disabled:after {
    background-color: var(--sw-anchor-disabled-primary-color)
}

.sw-theme-dots>.nav .nav-link.error {
    color: var(--sw-anchor-error-primary-color) !important;
    cursor: pointer
}

.sw-theme-dots>.nav .nav-link.error>.num {
    color: var(--sw-anchor-error-secondary-color) !important
}

.sw-theme-dots>.nav .nav-link.error:after {
    background-color: var(--sw-anchor-error-primary-color) !important
}

.sw-theme-dots>.nav .nav-link.warning {
    color: var(--sw-anchor-warning-primary-color) !important;
    cursor: pointer
}

.sw-theme-dots>.nav .nav-link.warning>.num {
    color: var(--sw-anchor-warning-secondary-color) !important
}

.sw-theme-dots>.nav .nav-link.warning:after {
    background-color: var(--sw-anchor-warning-primary-color) !important
}

.sw-theme-round>.nav .nav-link {
    border-radius: 10em;
    height: 100%;
    margin-right: 4px;
    min-height: 100%;
    position: relative;
    transition: all .5s ease-in-out
}

@media screen and (max-width:640px) {
    .sw-theme-round>.nav .nav-link {
        margin-right: unset;
        text-align: left !important
    }
}

.sw-theme-round>.nav .nav-link.default {
    background-color: var(--sw-anchor-default-primary-color);
    color: var(--sw-anchor-default-secondary-color);
    cursor: not-allowed
}

.sw-theme-round>.nav .nav-link.active {
    background-color: var(--sw-anchor-active-primary-color);
    box-shadow: 0 1px 7px 1px rgba(0, 0, 0, .3);
    color: var(--sw-anchor-active-secondary-color) !important;
    cursor: pointer
}

.sw-theme-round>.nav .nav-link.done {
    background-color: var(--sw-anchor-done-primary-color);
    color: var(--sw-anchor-done-secondary-color);
    cursor: pointer
}

.sw-theme-round>.nav .nav-link.disabled {
    background-color: var(--sw-anchor-disabled-primary-color);
    color: var(--sw-anchor-disabled-secondary-color) !important
}

.sw-theme-round>.nav .nav-link.error {
    background-color: var(--sw-anchor-error-primary-color);
    color: var(--sw-anchor-error-secondary-color) !important;
    cursor: pointer
}

.sw-theme-round>.nav .nav-link.warning {
    background-color: var(--sw-anchor-warning-primary-color);
    color: var(--sw-anchor-warning-secondary-color) !important;
    cursor: pointer
}

.sw-theme-round[dir=rtl]>.nav .nav-link>.num {
    float: right
}

.sw-theme-square>.nav {
    margin-bottom: 10px;
    position: relative
}

.sw-theme-square>.nav:before {
    border: 3px dashed var(--sw-border-color);
    border-radius: 8px;
    content: " ";
    left: 0;
    position: absolute;
    top: 18px;
    width: 100%;
    z-index: 1
}

@media screen and (max-width:640px) {
    .sw-theme-square>.nav:before {
        height: 100%;
        left: 17px;
        top: 0;
        width: 6px
    }
}

.sw-theme-square>.nav .nav-link {
    margin-top: 40px;
    position: relative
}

@media screen and (max-width:640px) {
    .sw-theme-square>.nav .nav-link {
        margin-bottom: 20px;
        margin-top: unset;
        padding-left: 55px;
        text-align: left !important
    }
}

.sw-theme-square>.nav .nav-link:before {
    background: var(--sw-border-color);
    border: none;
    border-radius: .475rem;
    content: " ";
    display: block;
    height: 40px;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    text-decoration: none;
    top: -40px;
    transition: all .5s ease-in-out;
    width: 40px;
    z-index: 98
}

@media screen and (max-width:640px) {
    .sw-theme-square>.nav .nav-link:before {
        right: unset;
        top: 0
    }
}

.sw-theme-square>.nav .nav-link>.num {
    display: block;
    left: 0;
    margin-left: auto;
    margin-right: auto;
    position: absolute;
    right: 0;
    top: -38px;
    transition: all .5s ease-in-out;
    z-index: 100
}

@media screen and (max-width:640px) {
    .sw-theme-square>.nav .nav-link>.num {
        padding-top: 3px;
        right: unset;
        top: 0;
        width: 40px
    }
}

.sw-theme-square>.nav .nav-link.default {
    color: var(--sw-anchor-default-secondary-color);
    cursor: not-allowed
}

.sw-theme-square>.nav .nav-link.default:after {
    background-color: var(--sw-anchor-default-secondary-color)
}

.sw-theme-square>.nav .nav-link.active {
    color: var(--sw-anchor-active-primary-color) !important;
    cursor: pointer
}

.sw-theme-square>.nav .nav-link.active>.num {
    color: var(--sw-anchor-active-secondary-color) !important
}

.sw-theme-square>.nav .nav-link.active:before {
    background-color: var(--sw-anchor-active-primary-color) !important;
    box-shadow: 0 1px 7px 1px rgba(0, 0, 0, .3)
}

.sw-theme-square>.nav .nav-link.done {
    color: var(--sw-anchor-done-primary-color);
    cursor: pointer
}

.sw-theme-square>.nav .nav-link.done>.num {
    color: var(--sw-anchor-done-secondary-color) !important
}

.sw-theme-square>.nav .nav-link.done:before {
    background-color: var(--sw-anchor-done-primary-color) !important
}

.sw-theme-square>.nav .nav-link.disabled {
    color: var(--sw-anchor-disabled-primary-color)
}

.sw-theme-square>.nav .nav-link.disabled:after {
    background-color: var(--sw-anchor-disabled-primary-color)
}

.sw-theme-square>.nav .nav-link.error {
    color: var(--sw-anchor-error-primary-color) !important;
    cursor: pointer
}

.sw-theme-square>.nav .nav-link.error:after {
    background-color: var(--sw-anchor-error-primary-color) !important
}

.sw-theme-square>.nav .nav-link.warning {
    color: var(--sw-anchor-warning-primary-color) !important;
    cursor: pointer
}

.sw-theme-square>.nav .nav-link.warning:after {
    background-color: var(--sw-anchor-warning-primary-color) !important
}

body.fr-prevent-scroll {
    overflow: hidden
}

body.fr-prevent-scroll.fr-mobile {
    position: fixed;
    -webkit-overflow-scrolling: touch
}

#fr-logo {
    float: left;
    outline: none
}

#fr-logo>span {
    color: #b1b2b7;
    display: inline-block;
    float: left;
    font-family: sans-serif;
    font-size: 12px;
    font-weight: 500;
    padding: 11px 5px 10px 15px;
    -webkit-transition: opacity .3s;
    -moz-transition: opacity .3s;
    -ms-transition: opacity .3s;
    -o-transition: opacity .3s
}

#fr-logo>svg {
    cursor: pointer;
    height: 20px;
    margin: 7px 0;
    width: 47px
}

#fr-logo>svg * {
    -webkit-transition: fill .3s;
    -moz-transition: fill .3s;
    -ms-transition: fill .3s;
    -o-transition: fill .3s
}

#fr-logo:focus>span,
#fr-logo:hover>span {
    color: #0098f7
}

.modal .fr-sticky-on {
    position: sticky
}

button[data-cmd=insertFiles] {
    padding-left: 2px !important;
    padding-top: 2.7px !important
}

button[data-cmd=autoplay] svg {
    position: relative !important;
    top: 3.2px !important
}

button[data-cmd=insertAll] {
    padding-left: 4px !important
}

button[data-cmd=insertAll] svg {
    position: relative !important;
    top: 3.2px !important
}

input:-webkit-autofill,
input:-webkit-autofill:focus,
input:-webkit-autofill:hover,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #fff !important;
    caret-color: #fff;
}

.dot {
    background-image: radial-gradient(circle, grey 1px, transparent 2px);
    background-size: 100% 33.33%;
    height: 20px;
    margin-left: 2px;
    margin-right: 2px;
    width: 20px
}

@media screen and (max-width:320px) {
    .fr-files-manager-tooltip .tooltiptext {
        max-width: 100px;
        visibility: hidden;
        word-break: break-word;
        word-wrap: break-word;
        font-size: 8px;
        left: -50%;
        top: 90%
    }
    .dot {
        margin-left: 0;
        margin-right: 3px;
        width: 20px
    }
    .fr-file-item-description {
        width: 80px
    }
    .fr-file-details {
        display: flex;
        flex-wrap: wrap;
        font-size: 9px
    }
    .fr-file-name {
        font-size: 10px
    }
    .fr-file-action-icons {
        padding: 0 !important
    }
}

#myprogressBar {
    background-color: #4caf50;
    height: 5px;
    position: relative;
    top: -30px;
    width: 10%
}

.progress-circle.p0 .value-bar,
.progress-circle:not(.over50) .first50-bar {
    display: none
}

.progress-circle.p1 .value-bar {
    transform: rotate(4deg)
}

.progress-circle.p2 .value-bar {
    transform: rotate(7deg)
}

.progress-circle.p3 .value-bar {
    transform: rotate(11deg)
}

.progress-circle.p4 .value-bar {
    transform: rotate(14deg)
}

.progress-circle.p5 .value-bar {
    transform: rotate(18deg)
}

.progress-circle.p6 .value-bar {
    transform: rotate(22deg)
}

.progress-circle.p8 .value-bar {
    transform: rotate(29deg)
}

.progress-circle.p10 .value-bar {
    transform: rotate(36deg)
}

.progress-circle.p12 .value-bar {
    transform: rotate(43deg)
}

.progress-circle.p64 .value-bar {
    transform: rotate(230deg)
}

body.fr-fullscreen {
    height: 100%;
    overflow: hidden;
    position: fixed;
    width: 100%
}

@-webkit-keyframes loading {
    0% {
        left: -25%
    }
    to {
        left: 100%
    }
}

@-moz-keyframes loading {
    0% {
        left: -25%
    }
    to {
        left: 100%
    }
}

@-o-keyframes loading {
    0% {
        left: -25%
    }
    to {
        left: 100%
    }
}

@media (min-width:1200px) {
    .pricing_sidebar{
        display:block;
    }
    div.fr-modal-body div.fr-image-list .fr-list-column {
        width: calc(25% - 15px)
    }
}

.blockquote {
    border-left: 5px solid #eee;
    margin: 0 0 1rem;
    padding: 10px 20px
}

.fr-popup .fr-table-size .fr-select-table-size>span.hover {
    background: transparent
}

.fr-popup .fr-table-size .fr-select-table-size>span.hover>span {
    background: rgba(0, 152, 247, .3);
    border: 1px solid #0098f7
}

.fr-popup .fr-table-size .fr-select-table-size .new-line:after {
    clear: both;
    content: "";
    display: block;
    height: 0
}

#fr-form-container {
    background-color: #f5f5f5;
    background-color: #fefefe;
    border-radius: 5px;
    margin: auto;
    overflow: auto;
    position: relative;
    top: 10%;
    width: 60%;
    z-index: 9002
}

@-webkit-keyframes spin {
    0% {
        -webkit-transform: rotate(0deg)
    }
    to {
        -webkit-transform: rotate(1turn)
    }
}

#startTimeValue {
    top: -153% !important
}

#startTimeValue span:before {
    border-top: 10px solid #03a9f4;
    top: 100%
}

#endTimeValue {
    top: -153% !important
}

#endTimeValue span:before {
    border-top: 10px solid #03a9f4;
    top: 100%
}

#fr-video-edit {
    height: 50%;
    margin-bottom: 20px;
    padding-bottom: 8px;
    padding-top: 8px;
    text-align: center;
    width: 80%
}

[data-simplebar] {
    align-content: flex-start;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: flex-start;
    position: relative
}

*,
:after,
:before {
    box-sizing: border-box
}

@media(prefers-reduced-motion:no-preference) {
    : {
        scroll-behavior: smooth
    }
}

hr {
    border: 0;
    border-top: var(--border-width) solid;
    color: inherit;
    margin: 1rem 0;
    opacity: .25
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--bs-heading-color);
    line-height: 1.2;
    margin-bottom: .5rem;
    margin-top: 0
}

.h1,
h1 {
    font-size: calc(1.375rem + 1.5vw)
}

@media(min-width:1200px) {
    .h1,
    h1 {
        font-size: 2.5rem
    }
}

.h2,
h2 {
    font-size: calc(1.325rem + .9vw)
}

@media(min-width:1200px) {
    .h2,
    h2 {
        font-size: 2rem
    }
}

.h3,
h3 {
    font-size: calc(1.3rem + .6vw)
}

@media(min-width:1200px) {
    .h3,
    h3 {
        font-size: 1.75rem
    }
}

.h4,
h4 {
    font-size: calc(1.275rem + .3vw)
}

@media(min-width:1200px) {
    .h4,
    h4 {
        font-size: 1.5rem
    }
}

.h5,
h5 {
    font-size: 1.25rem
}

.h6,
h6 {
    font-size: 1rem
}

p {
    margin-bottom: 1rem;
    margin-top: 0
}

abbr[title] {
    cursor: help;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
    -webkit-text-decoration-skip-ink: none;
    text-decoration-skip-ink: none
}

address {
    font-style: normal;
    line-height: inherit;
    margin-bottom: 1rem
}

ol,
ul {
    padding-left: 2rem
}

dl,
ol,
ul {
    margin-bottom: 1rem;
    margin-top: 0
}

ol ol,
ol ul,
ul ol,
ul ul {
    margin-bottom: 0
}

dt {
    font-weight: 700
}

dd {
    margin-bottom: .5rem;
    margin-left: 0
}

blockquote {
    margin: 0 0 1rem
}

b,
strong {
    font-weight: bolder
}

.small,
small {
    font-size: 14px;
    line-height: 17px;
}

.mark,
mark {
    background-color: var(--bs-highlight-bg);
    color: var(--bs-highlight-color);
    padding: .1875em
}

sub,
sup {
    font-size: .75em;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

a {
    color: rgba(var(--link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: auto;
}

a:hover {
    --link-color-rgb: var(--bs-link-hover-color-rgb)
}

a:not([href]):not([class]),
a:not([href]):not([class]):hover {
    color: inherit;
    text-decoration: none
}

code,
kbd,
pre,
samp {
    font-family: var(--bs-font-monospace);
    font-size: 1em
}

pre {
    display: block;
    font-size: .875em;
    margin-bottom: 1rem;
    margin-top: 0;
    overflow: auto
}

pre code {
    color: inherit;
    font-size: inherit;
    word-break: normal
}

code {
    color: var(--bs-code-color);
    font-size: .875em;
    word-wrap: break-word
}

a>code {
    color: inherit
}

kbd {
    background-color: var(--bs-body-color);
    border-radius: .25rem;
    color: var(--kf-bg-2);
    font-size: .875em;
    padding: .1875rem .375rem
}

kbd kbd {
    font-size: 1em;
    padding: 0
}

figure {
    margin: 0 0 1rem
}

img,
svg {
    vertical-align: middle
}

table {
    border-collapse: collapse;
    caption-side: bottom
}

caption {
    color: var(--text-secondary-color);
    padding-bottom: .5rem;
    padding-top: .5rem;
    text-align: left
}

th {
    text-align: inherit;
    text-align: -webkit-match-parent
}

.table-header .search-container{
    position: absolute;
    display:none;
    background: #030013;
    width: 100%;
    z-index: 111111111;
    min-height: 100%;
    height: 100%;
    bottom: 0;
    top: 0;
    right: 0;
    left: 0;
}

.table-header .search-container button{
    position: absolute;
    right: 13px;
    top: 17px;
}

.table-header .search-container input{
    height: 60px;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}

tbody,
td,
tfoot,
th,
thead,
tr {
    border: 0 solid;
    border-color: var(--border-color);
}

label {
    display: inline-block
}

button {
    border-radius: 0
}

button:focus:not(:focus-visible) {
    outline: 0
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    color: var(--text-color);
    background:transparent;
}

button,
select {
    text-transform: none
}

[role=button] {
    cursor: pointer
}

select {
    word-wrap: normal
}

select:disabled {
    opacity: 1
}

[list]:not([type=date]):not([type=datetime-local]):not([type=month]):not([type=week]):not([type=time])::-webkit-calendar-picker-indicator {
    display: none !important
}

[type=date]::-webkit-calendar-picker-indicator {
    filter: invert(1); /* Simgeyi beyaz yapar */
}

[type=button],
[type=reset],
[type=submit],
button {
    -webkit-appearance: button
}

[type=button]:not(:disabled),
[type=reset]:not(:disabled),
[type=submit]:not(:disabled),
button:not(:disabled) {
    cursor: pointer
}

::-moz-focus-inner {
    border-style: none;
    padding: 0
}

textarea {
    resize: vertical
}

fieldset {
    border: 0;
    margin: 0;
    min-width: 0;
    padding: 0
}

legend {
    float: left;
    font-size: calc(1.275rem + .3vw);
    line-height: inherit;
    margin-bottom: .5rem;
    padding: 0;
    width: 100%
}

@media(min-width:1200px) {
    legend {
        font-size: 1.5rem
    }
}

legend+* {
    clear: left
}

::-webkit-datetime-edit-day-field,
::-webkit-datetime-edit-fields-wrapper,
::-webkit-datetime-edit-hour-field,
::-webkit-datetime-edit-minute,
::-webkit-datetime-edit-month-field,
::-webkit-datetime-edit-text,
::-webkit-datetime-edit-year-field {
    padding: 0
}

::-webkit-inner-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-color-swatch-wrapper {
    padding: 0
}

::file-selector-button {
    -webkit-appearance: button;
    font: inherit
}

output {
    display: inline-block
}

iframe {
    border: 0
}

summary {
    cursor: pointer;
    display: list-item
}

progress {
    vertical-align: baseline
}

[hidden] {
    display: none !important
}

.lead {
    font-size: 1.25rem;
    font-weight: 300
}

.display-3 {
    font-size: calc(1.525rem + 3.3vw);
    line-height: 1;
}

@media(min-width:1200px) {
    .display-3 {
        font-size: 3rem
    }
}

.display-4 {
    font-size: calc(1.475rem + 2.7vw);
    line-height: 1.2
}

@media(min-width:1200px) {
    .display-4 {
        font-size: 3.5rem
    }
}

.display-5 {
    font-size: calc(1.425rem + 2.1vw);
    font-weight: 300;
    line-height: 1.2
}

@media(min-width:1200px) {
    .display-5 {
        font-size: 3rem
    }
}

.display-6 {
    font-size: calc(1.375rem + 1.5vw);
    font-weight: 300;
    line-height: 1.2
}

@media(min-width:1200px) {
    .display-6 {
        font-size: 2.5rem
    }
}

.list-inline,
.list-unstyled {
    list-style: none;
    padding-left: 0
}

.blockquote {
    font-size: 1.25rem;
    margin-bottom: 1rem
}

.blockquote>:last-child {
    margin-bottom: 0
}

.img-fluid,
.img-thumbnail {
    height: auto;
    max-width: 100%
}

.figure {
    display: inline-block
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
    margin-left: auto;
    margin-right: auto;
    padding-left: calc(var(--gutter-x)*1);
    padding-right: calc(var(--gutter-x)*1);
    width: 100%
}

@media(min-width:576px) {
   
    .container,
    .container-sm {
        max-width: 100%;
    }
}

@media(min-width:768px) {
    .container,
    .container-md,
    .container-sm {
        max-width: 100%;
    }
}

@media(min-width:992px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm {
        max-width: 100%
    }
}

@media(min-width:1200px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl {
        max-width: 1140px
    }
}

@media(min-width:1400px) {
    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1140px
    }
}

.row {
    display: flex;
    flex-wrap: wrap;
    margin-left: calc(var(--gutter-x) / -2);
    margin-right: calc(var(--gutter-x) / -2);
}

.row>* {
    flex-shrink: 0;
    max-width: 100%;
    padding-left: calc(var(--gutter-x) / 2);
    padding-right: calc(var(--gutter-x) / 2);
    width: 100%
}

.col {
    flex: 1 0 0%
}

.col-auto {
    flex: 0 0 auto;
    width: auto
}

.col-1 {
    flex: 0 0 auto;
    width: 8.33333333%
}

.col-2 {
    flex: 0 0 auto;
    width: 16.66666667%
}

.col-3 {
    flex: 0 0 auto;
    width: 25%
}

.col-4 {
    flex: 0 0 auto;
    width: 33.33333333%
}

.col-5 {
    flex: 0 0 auto;
    width: 41.66666667%
}

.col-6 {
    flex: 0 0 auto;
    width: 50%
}

.col-8 {
    flex: 0 0 auto;
    width: 66.66666667%
}

.col-9 {
    flex: 0 0 auto;
    width: 75%
}

.col-11 {
    flex: 0 0 auto;
    width: 91.66666667%
}

.col-12 {
    flex: 0 0 auto;
    width: 100%
}

.g-0,
.gx-0 {
    --gutter-x: 0
}

.g-0,
.gy-0 {
    --gutter-y: 0
}

.g-1,
.gx-1 {
    --gutter-x: 0.25rem
}

.g-1,
.gy-1 {
    --gutter-y: 0.25rem
}

.g-2,
.gx-2 {
    --gutter-x: 0.5rem
}

.g-2,
.gy-2 {
    --gutter-y: 0.5rem
}

.g-3,
.gx-3 {
    --gutter-x: 1rem
}

.g-3,
.gy-3 {
    --gutter-y: 1rem
}

.g-4,
.gx-4 {
    --gutter-x: 1.5rem
}

.g-4,
.gy-4 {
    --gutter-y: 1.5rem
}

.g-5,
.gx-5 {
    --gutter-x: 3rem
}

.g-5,
.gy-5 {
    --gutter-y: 3rem
}

@media(min-width:576px) {
    .col-sm {
        flex: 1 0 0%
    }
    .row-cols-sm-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-sm-1>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-sm-2>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-sm-3>* {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .row-cols-sm-4>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-sm-5>* {
        flex: 0 0 auto;
        width: 20%
    }
    .row-cols-sm-6>* {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-sm-auto {
        flex: 0 0 auto;
        width: auto
    }
    .col-sm-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }
    .col-sm-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-sm-3 {
        flex: 0 0 auto;
        width: 25%
    }
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .col-sm-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }
    .col-sm-6 {
        flex: 0 0 auto;
        width: 50%
    }
    .col-sm-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }
    .col-sm-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }
    .col-sm-9 {
        flex: 0 0 auto;
        width: 75%
    }
    .col-sm-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }
    .col-sm-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }
    .col-sm-12 {
        flex: 0 0 auto;
        width: 100%
    }
    .offset-sm-0 {
        margin-left: 0
    }
    .offset-sm-1 {
        margin-left: 8.33333333%
    }
    .offset-sm-2 {
        margin-left: 16.66666667%
    }
    .offset-sm-3 {
        margin-left: 25%
    }
    .offset-sm-4 {
        margin-left: 33.33333333%
    }
    .offset-sm-5 {
        margin-left: 41.66666667%
    }
    .offset-sm-6 {
        margin-left: 50%
    }
    .offset-sm-7 {
        margin-left: 58.33333333%
    }
    .offset-sm-8 {
        margin-left: 66.66666667%
    }
    .offset-sm-9 {
        margin-left: 75%
    }
    .offset-sm-10 {
        margin-left: 83.33333333%
    }
    .offset-sm-11 {
        margin-left: 91.66666667%
    }
    .g-sm-0,
    .gx-sm-0 {
        --gutter-x: 0
    }
    .g-sm-0,
    .gy-sm-0 {
        --gutter-y: 0
    }
    .g-sm-1,
    .gx-sm-1 {
        --gutter-x: 0.25rem
    }
    .g-sm-1,
    .gy-sm-1 {
        --gutter-y: 0.25rem
    }
    .g-sm-2,
    .gx-sm-2 {
        --gutter-x: 0.5rem
    }
    .g-sm-2,
    .gy-sm-2 {
        --gutter-y: 0.5rem
    }
    .g-sm-3,
    .gx-sm-3 {
        --gutter-x: 1rem
    }
    .g-sm-3,
    .gy-sm-3 {
        --gutter-y: 1rem
    }
    .g-sm-4,
    .gx-sm-4 {
        --gutter-x: 1.5rem
    }
    .g-sm-4,
    .gy-sm-4 {
        --gutter-y: 1.5rem
    }
    .g-sm-5,
    .gx-sm-5 {
        --gutter-x: 3rem
    }
    .g-sm-5,
    .gy-sm-5 {
        --gutter-y: 3rem
    }
}

@media(min-width:768px) {
    .col-md {
        flex: 1 0 0%
    }
    .row-cols-md-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-md-1>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-md-2>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-md-3>* {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .row-cols-md-4>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-md-5>* {
        flex: 0 0 auto;
        width: 20%
    }
    .row-cols-md-6>* {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-md-auto {
        flex: 0 0 auto;
        width: auto
    }
    .col-md-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }
    .col-md-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-md-3 {
        flex: 0 0 auto;
        width: 25%
    }
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .col-md-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }
    .col-md-6 {
        flex: 0 0 auto;
        width: 50%
    }
    .col-md-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }
    .col-md-9 {
        flex: 0 0 auto;
        width: 75%
    }
    .col-md-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }
    .col-md-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }
    .col-md-12 {
        flex: 0 0 auto;
        width: 100%
    }
    .offset-md-0 {
        margin-left: 0
    }
    .offset-md-1 {
        margin-left: 8.33333333%
    }
    .offset-md-2 {
        margin-left: 16.66666667%
    }
    .offset-md-3 {
        margin-left: 25%
    }
    .offset-md-4 {
        margin-left: 33.33333333%
    }
    .offset-md-5 {
        margin-left: 41.66666667%
    }
    .offset-md-6 {
        margin-left: 50%
    }
    .offset-md-7 {
        margin-left: 58.33333333%
    }
    .offset-md-8 {
        margin-left: 66.66666667%
    }
    .offset-md-9 {
        margin-left: 75%
    }
    .offset-md-10 {
        margin-left: 83.33333333%
    }
    .offset-md-11 {
        margin-left: 91.66666667%
    }
    .g-md-0,
    .gx-md-0 {
        --gutter-x: 0
    }
    .g-md-0,
    .gy-md-0 {
        --gutter-y: 0
    }
    .g-md-1,
    .gx-md-1 {
        --gutter-x: 0.25rem
    }
    .g-md-1,
    .gy-md-1 {
        --gutter-y: 0.25rem
    }
    .g-md-2,
    .gx-md-2 {
        --gutter-x: 0.5rem
    }
    .g-md-2,
    .gy-md-2 {
        --gutter-y: 0.5rem
    }
    .g-md-3,
    .gx-md-3 {
        --gutter-x: 1rem
    }
    .g-md-3,
    .gy-md-3 {
        --gutter-y: 1rem
    }
    .g-md-4,
    .gx-md-4 {
        --gutter-x: 1.5rem
    }
    .g-md-4,
    .gy-md-4 {
        --gutter-y: 1.5rem
    }
    .g-md-5,
    .gx-md-5 {
        --gutter-x: 3rem
    }
    .g-md-5,
    .gy-md-5 {
        --gutter-y: 3rem
    }
}

@media(min-width:992px) {
    .col-lg {
        flex: 1 0 0%
    }
    .row-cols-lg-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-lg-1>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-lg-2>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-lg-3>* {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .row-cols-lg-4>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-lg-5>* {
        flex: 0 0 auto;
        width: 20%
    }
    .row-cols-lg-6>* {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-lg-auto {
        flex: 0 0 auto;
        width: auto
    }
    .col-lg-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }
    .col-lg-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-lg-3 {
        flex: 0 0 auto;
        width: 25%
    }
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .col-lg-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }
    .col-lg-6 {
        flex: 0 0 auto;
        width: 50%
    }
    .col-lg-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }
    .col-lg-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }
    .col-lg-9 {
        flex: 0 0 auto;
        width: 75%
    }
    .col-lg-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }
    .col-lg-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }
    .col-lg-12 {
        flex: 0 0 auto;
        width: 100%
    }
    .offset-lg-0 {
        margin-left: 0
    }
    .offset-lg-1 {
        margin-left: 8.33333333%
    }
    .offset-lg-2 {
        margin-left: 16.66666667%
    }
    .offset-lg-3 {
        margin-left: 25%
    }
    .offset-lg-4 {
        margin-left: 33.33333333%
    }
    .offset-lg-5 {
        margin-left: 41.66666667%
    }
    .offset-lg-6 {
        margin-left: 50%
    }
    .offset-lg-7 {
        margin-left: 58.33333333%
    }
    .offset-lg-8 {
        margin-left: 66.66666667%
    }
    .offset-lg-9 {
        margin-left: 75%
    }
    .offset-lg-10 {
        margin-left: 83.33333333%
    }
    .offset-lg-11 {
        margin-left: 91.66666667%
    }
    .g-lg-0,
    .gx-lg-0 {
        --gutter-x: 0
    }
    .g-lg-0,
    .gy-lg-0 {
        --gutter-y: 0
    }
    .g-lg-1,
    .gx-lg-1 {
        --gutter-x: 0.25rem
    }
    .g-lg-1,
    .gy-lg-1 {
        --gutter-y: 0.25rem
    }
    .g-lg-2,
    .gx-lg-2 {
        --gutter-x: 0.5rem
    }
    .g-lg-2,
    .gy-lg-2 {
        --gutter-y: 0.5rem
    }
    .g-lg-3,
    .gx-lg-3 {
        --gutter-x: 1rem
    }
    .g-lg-3,
    .gy-lg-3 {
        --gutter-y: 1rem
    }
    .g-lg-4,
    .gx-lg-4 {
        --gutter-x: 1.5rem
    }
    .g-lg-4,
    .gy-lg-4 {
        --gutter-y: 1.5rem
    }
    .g-lg-5,
    .gx-lg-5 {
        --gutter-x: 3rem
    }
    .g-lg-5,
    .gy-lg-5 {
        --gutter-y: 3rem
    }
}

@media(min-width:1200px) {
    .col-xl {
        flex: 1 0 0%
    }
    .row-cols-xl-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-xl-1>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-xl-2>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-xl-3>* {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .row-cols-xl-4>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-xl-5>* {
        flex: 0 0 auto;
        width: 20%
    }
    .row-cols-xl-6>* {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-xl-auto {
        flex: 0 0 auto;
        width: auto
    }
    .col-xl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }
    .col-xl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-xl-3 {
        flex: 0 0 auto;
        width: 25%
    }
    .col-xl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .col-xl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }
    .col-xl-6 {
        flex: 0 0 auto;
        width: 50%
    }
    .col-xl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }
    .col-xl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }
    .col-xl-9 {
        flex: 0 0 auto;
        width: 75%
    }
    .col-xl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }
    .col-xl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }
    .col-xl-12 {
        flex: 0 0 auto;
        width: 100%
    }
    .offset-xl-0 {
        margin-left: 0
    }
    .offset-xl-1 {
        margin-left: 8.33333333%
    }
    .offset-xl-2 {
        margin-left: 16.66666667%
    }
    .offset-xl-3 {
        margin-left: 25%
    }
    .offset-xl-4 {
        margin-left: 33.33333333%
    }
    .offset-xl-5 {
        margin-left: 41.66666667%
    }
    .offset-xl-6 {
        margin-left: 50%
    }
    .offset-xl-7 {
        margin-left: 58.33333333%
    }
    .offset-xl-8 {
        margin-left: 66.66666667%
    }
    .offset-xl-9 {
        margin-left: 75%
    }
    .offset-xl-10 {
        margin-left: 83.33333333%
    }
    .offset-xl-11 {
        margin-left: 91.66666667%
    }
    .g-xl-0,
    .gx-xl-0 {
        --gutter-x: 0
    }
    .g-xl-0,
    .gy-xl-0 {
        --gutter-y: 0
    }
    .g-xl-1,
    .gx-xl-1 {
        --gutter-x: 0.25rem
    }
    .g-xl-1,
    .gy-xl-1 {
        --gutter-y: 0.25rem
    }
    .g-xl-2,
    .gx-xl-2 {
        --gutter-x: 0.5rem
    }
    .g-xl-2,
    .gy-xl-2 {
        --gutter-y: 0.5rem
    }
    .g-xl-3,
    .gx-xl-3 {
        --gutter-x: 1rem
    }
    .g-xl-3,
    .gy-xl-3 {
        --gutter-y: 1rem
    }
    .g-xl-4,
    .gx-xl-4 {
        --gutter-x: 1.5rem
    }
    .g-xl-4,
    .gy-xl-4 {
        --gutter-y: 1.5rem
    }
    .g-xl-5,
    .gx-xl-5 {
        --gutter-x: 3rem
    }
    .g-xl-5,
    .gy-xl-5 {
        --gutter-y: 3rem
    }
}

@media(min-width:1400px) {
    .col-xxl {
        flex: 1 0 0%
    }
    .row-cols-xxl-auto>* {
        flex: 0 0 auto;
        width: auto
    }
    .row-cols-xxl-1>* {
        flex: 0 0 auto;
        width: 100%
    }
    .row-cols-xxl-2>* {
        flex: 0 0 auto;
        width: 50%
    }
    .row-cols-xxl-3>* {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .row-cols-xxl-4>* {
        flex: 0 0 auto;
        width: 25%
    }
    .row-cols-xxl-5>* {
        flex: 0 0 auto;
        width: 20%
    }
    .row-cols-xxl-6>* {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-xxl-auto {
        flex: 0 0 auto;
        width: auto
    }
    .col-xxl-1 {
        flex: 0 0 auto;
        width: 8.33333333%
    }
    .col-xxl-2 {
        flex: 0 0 auto;
        width: 16.66666667%
    }
    .col-xxl-3 {
        flex: 0 0 auto;
        width: 25%
    }
    .col-xxl-4 {
        flex: 0 0 auto;
        width: 33.33333333%
    }
    .col-xxl-5 {
        flex: 0 0 auto;
        width: 41.66666667%
    }
    .col-xxl-6 {
        flex: 0 0 auto;
        width: 50%
    }
    .col-xxl-7 {
        flex: 0 0 auto;
        width: 58.33333333%
    }
    .col-xxl-8 {
        flex: 0 0 auto;
        width: 66.66666667%
    }
    .col-xxl-9 {
        flex: 0 0 auto;
        width: 75%
    }
    .col-xxl-10 {
        flex: 0 0 auto;
        width: 83.33333333%
    }
    .col-xxl-11 {
        flex: 0 0 auto;
        width: 91.66666667%
    }
    .col-xxl-12 {
        flex: 0 0 auto;
        width: 100%
    }
    .offset-xxl-0 {
        margin-left: 0
    }
    .offset-xxl-1 {
        margin-left: 8.33333333%
    }
    .offset-xxl-2 {
        margin-left: 16.66666667%
    }
    .offset-xxl-3 {
        margin-left: 25%
    }
    .offset-xxl-4 {
        margin-left: 33.33333333%
    }
    .offset-xxl-5 {
        margin-left: 41.66666667%
    }
    .offset-xxl-6 {
        margin-left: 50%
    }
    .offset-xxl-7 {
        margin-left: 58.33333333%
    }
    .offset-xxl-8 {
        margin-left: 66.66666667%
    }
    .offset-xxl-9 {
        margin-left: 75%
    }
    .offset-xxl-10 {
        margin-left: 83.33333333%
    }
    .offset-xxl-11 {
        margin-left: 91.66666667%
    }
    .g-xxl-0,
    .gx-xxl-0 {
        --gutter-x: 0
    }
    .g-xxl-0,
    .gy-xxl-0 {
        --gutter-y: 0
    }
    .g-xxl-1,
    .gx-xxl-1 {
        --gutter-x: 0.25rem
    }
    .g-xxl-1,
    .gy-xxl-1 {
        --gutter-y: 0.25rem
    }
    .g-xxl-2,
    .gx-xxl-2 {
        --gutter-x: 0.5rem
    }
    .g-xxl-2,
    .gy-xxl-2 {
        --gutter-y: 0.5rem
    }
    .g-xxl-3,
    .gx-xxl-3 {
        --gutter-x: 1rem
    }
    .g-xxl-3,
    .gy-xxl-3 {
        --gutter-y: 1rem
    }
    .g-xxl-4,
    .gx-xxl-4 {
        --gutter-x: 1.5rem
    }
    .g-xxl-4,
    .gy-xxl-4 {
        --gutter-y: 1.5rem
    }
    .g-xxl-5,
    .gx-xxl-5 {
        --gutter-x: 3rem
    }
    .g-xxl-5,
    .gy-xxl-5 {
        --gutter-y: 3rem
    }
}

.table>:not(caption)>*>* {
    padding: 0.5rem 0.8rem;
}

.table>tbody {
    vertical-align: inherit
}

.table>thead {
    vertical-align: bottom
}

.table-sm>:not(caption)>*>* {
    padding: .25rem
}

.table-striped-columns>:not(caption)>tr>:nth-child(2n),
.table-striped>tbody>tr:nth-of-type(odd)>* {
    --bs-table-color-type: var(--bs-table-striped-color);
    --bs-table-bg-type: var(--bs-table-striped-bg)
}

.table-hover>tbody>tr:hover>* {
    --bs-table-color-state: var(--bs-table-hover-color);
    --bs-table-bg-state: var(--bs-table-hover-bg)
}

.table-success {
    --bs-table-color: #000;
    --bs-table-bg: #d1e7dd;
    --bs-table-border-color: #a7b9b1;
    --bs-table-striped-bg: #c7dbd2;
    --bs-table-striped-color: #000;
    --bs-table-active-bg: #bcd0c7;
    --bs-table-active-color: #000;
    --bs-table-hover-bg: #c1d6cc;
    --bs-table-hover-color: #000
}

.table-info,
.table-success {
    border-color: var(--bs-table-border-color);
    color: var(--bs-table-color)
}

.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch
}

.form-label {
    margin-bottom: .5rem
}

.form-text {
    color: var(--text-secondary-color);
    font-size: .875em;
    margin-top: .25rem
}

.form-floating:has(.input-group + label) input,
.form-floating:has(input + label) input,
.form-floating:has(.bootstrap-select + label) .form-control{
    padding-top: 14px;
    padding-bottom: 3px;
}
.corpy_form{
    display: flex;
    gap: 10px;
}
.form-control,
.corpy input{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-clip: padding-box;
    background: var(--input-bg);
    border: var(--border-width) solid var(--border-color);
    border-radius: 8px;
    color: var(--bs-body-color);
    display: block;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding-top: 8px;
    padding-bottom: 8px;
    padding-left: 15px;
    padding-right: 15px;
    transition: box-shadow .15s ease-in-out;
    width: 100%
}

@media(prefers-reduced-motion:reduce) {
    .form-control {
        transition: none
    }
}

.form-control[type=file] {
    overflow: hidden
}

.form-control[type=file]:not(:disabled):not([readonly]) {
    cursor: pointer
}

.form-control:focus {
    border-color: var(--border-color) !important;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    color: #fff;
    outline: 0
}

.form-control::-webkit-date-and-time-value {
    height: 1.5em;
    margin: 0;
    min-width: 85px
}

.form-control::-webkit-datetime-edit {
    display: block;
    padding: 0
}

.form-control::-moz-placeholder {
    color: var(--text-secondary-color);
    opacity: 1
}

.form-control::placeholder {
    color: var(--text-secondary-color);
    opacity: 1
}

.form-control:disabled {
    opacity: 0.9
}

.form-control::file-selector-button {
    background-color: var(--bs-tertiary-bg);
    border: 0 solid;
    border-color: inherit;
    border-inline-end-width: var(--border-width);
    border-radius: 0;
    color: var(--bs-body-color);
    margin: -.375rem -.75rem;
    margin-inline-end: .75rem;
    padding: .375rem .75rem;
    pointer-events: none;
    transition: opacity .15s ease-in-out, box-shadow .15s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .form-control::file-selector-button {
        transition: none
    }
}

.form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background-color: var(--text-secondary-bg)
}

.form-control-plaintext {
    background-color: transparent;
    border: solid transparent;
    border-width: var(--border-width) 0;
    color: var(--bs-body-color);
    display: block;
    line-height: 1.5;
    margin-bottom: 0;
    padding: .375rem 0;
    width: 100%
}

.form-control-plaintext:focus {
    outline: 0
}

.form-control-plaintext.form-control-lg,
.form-control-plaintext.form-control.sm {
    padding-left: 0;
    padding-right: 0
}

.form-floating>.form-control.sm {
    border-radius: var(--border-radius-sm);
    font-size: .875rem;
    height: 45px;
    min-height: 45px;
    padding-bottom: 0px;
    padding-top: 15px;
}

.form-control.sm::file-selector-button {
    margin: -.25rem -.5rem;
    margin-inline-end: .5rem;
    padding: .25rem .5rem
}

.form-control-lg {
    border-radius: var(--border-radius-lg);
    font-size: 1.25rem;
    min-height: calc(1.5em + 1rem + var(--border-width)*2);
    padding: .5rem 1rem
}

.form-control-lg::file-selector-button {
    margin: -.5rem -1rem;
    margin-inline-end: 1rem;
    padding: .5rem 1rem
}

textarea.form-control {
    min-height: 150px;
}

textarea.form-control.sm {
    min-height: 100px;
}

textarea.form-control-lg {
    min-height: 250px;
}

.form-control-color.form-control.sm {
    height: calc(1.5em + .5rem + var(--border-width)*2)
}

.form-control-color.form-control-lg {
    height: calc(1.5em + 1rem + var(--border-width)*2)
}

.form-check {
    display: block;
    margin-bottom: .125rem;
    min-height: 1.5rem;
    padding-left: 1.5em
}

.form-check .form-check-input {
    float: left;
    margin-left: -1.5em
}

.form-check-reverse .form-check-input {
    float: right;
    margin-left: 0;
    margin-right: -1.5em
}

.form-check-input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--input-bg);
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: contain;
    flex-shrink: 0;
    height: 1em;
    margin-top: .10em;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    vertical-align: top;
    width: 1em;
    border: var(--border-width) solid var(--border-color);
}

.form-check-input[type=checkbox] {
    border-radius: .25em
}

.form-check-input[type=radio] {
    border-radius: 50%
}

.form-check-input:active {
    filter: brightness(90%)
}

.form-check-input:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
    outline: 0
}

.form-check-input:checked {
    background-color: #0d6efd;
    border-color: #0d6efd
}

.form-check-input:checked[type=checkbox] {
    --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3E%3C/svg%3E")
}

.form-check-input:checked[type=radio] {
    --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='2' fill='%23fff'/%3E%3C/svg%3E")
}

.form-check-input[type=checkbox]:indeterminate {
    background-color: #0d6efd;
    border-color: #0d6efd;
    --bs-form-check-bg-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3E%3C/svg%3E")
}

.form-check-input:disabled {
    filter: none;
    opacity: .5;
    pointer-events: none
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
    cursor: default;
    opacity: .5
}

.form-switch {
    padding-left: 2.5em
}

.form-switch .form-check-input {
    --bs-form-switch-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='rgba(0, 0, 0, 0.25)'/%3E%3C/svg%3E");
    background-image: var(--bs-form-switch-bg);
    background-position: 0;
    border-radius: 2em;
    margin-left: -2.5em;
    transition: background-position .15s ease-in-out;
    width: 2em
}

@media(prefers-reduced-motion:reduce) {
    .form-switch .form-check-input {
        transition: none
    }
}

.form-switch .form-check-input:focus {
    --bs-form-switch-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%2386b7fe'/%3E%3C/svg%3E")
}

.form-switch .form-check-input:checked {
    background-position: 100%;
    --bs-form-switch-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3E%3Ccircle r='3' fill='%23fff'/%3E%3C/svg%3E")
}

.form-switch.form-check-reverse {
    padding-left: 0;
    padding-right: 2.5em
}

.form-switch.form-check-reverse .form-check-input {
    margin-left: 0;
    margin-right: -2.5em
}

.btn-check {
    position: absolute;
    clip: rect(0, 0, 0, 0);
    pointer-events: none
}

.btn-check:disabled+.btn,
.btn-check[disabled]+.btn {
    filter: none;
    opacity: .65;
    pointer-events: none
}

.form-range {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: transparent;
    height: 1.5rem;
    padding: 0;
    width: 100%
}

.form-range:focus {
    outline: 0
}

.form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(13, 110, 253, .25)
}

.form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px #fff, 0 0 0 .25rem rgba(13, 110, 253, .25)
}

.form-range::-moz-focus-outer {
    border: 0
}

.form-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    height: 1rem;
    margin-top: -.25rem;
    -webkit-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 1rem
}

@media(prefers-reduced-motion:reduce) {
    .form-range::-webkit-slider-thumb {
        -webkit-transition: none;
        transition: none
    }
}

.form-range::-webkit-slider-thumb:active {
    background-color: #b6d4fe
}

.form-range::-webkit-slider-runnable-track {
    background-color: var(--text-secondary-bg);
    border-color: transparent;
    border-radius: 1rem;
    color: transparent;
    cursor: pointer;
    height: .5rem;
    width: 100%
}

.form-range::-moz-range-thumb {
    -moz-appearance: none;
    appearance: none;
    background-color: #0d6efd;
    border: 0;
    border-radius: 1rem;
    height: 1rem;
    -moz-transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    transition: background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    width: 1rem
}

@media(prefers-reduced-motion:reduce) {
    .form-range::-moz-range-thumb {
        -moz-transition: none;
        transition: none
    }
}

.form-range::-moz-range-thumb:active {
    background-color: #b6d4fe
}

.form-range::-moz-range-track {
    background-color: var(--text-secondary-bg);
    border-color: transparent;
    border-radius: 1rem;
    color: transparent;
    cursor: pointer;
    height: .5rem;
    width: 100%
}

.form-range:disabled {
    pointer-events: none
}

.form-range:disabled::-webkit-slider-thumb {
    background-color: var(--text-secondary-color)
}

.form-range:disabled::-moz-range-thumb {
    background-color: var(--text-secondary-color)
}

.form-floating {
    position: relative;
    min-width:100px;
}

.form-floating>.form-select[multiple]{
    height: auto;
    min-height: calc(7.5rem + var(--border-width)*2);
}

[data="long_text"]{
    height: 50px;
    max-width: 250px;
    overflow: hidden;
    display: inline-block;
    white-space: normal;
}

.form-floating label.sm{
    padding-top: 12px;
    padding-left: 5px;
    font-size: 17px;
    height: 34px;
}

.form-floating>label {
    height: 100%;
    left: 0;
    overflow: hidden;
    padding-top: 10px;
    padding-left: 15px;
    font-size: 15px;
    color: var(--text-secondary);
    pointer-events: none;
    position: absolute;
    text-align: start;
    text-overflow: ellipsis;
    top: 0;
    transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s  ease-in-out;
    white-space: nowrap;
    z-index: 2;
}

@media(prefers-reduced-motion:reduce) {
    .form-floating>label {
        transition: none
    }
}

.form-floating .bootstrap-select.form-control{
    padding-right: 0;
    padding-left: 0;
}

.form-floating>.form-control-plaintext::-moz-placeholder,
.form-floating>.form-control::-moz-placeholder {
    color: transparent
}

.form-floating>.form-control-plaintext::placeholder,
.form-floating>.form-control::placeholder,
.form-floating>.input-group > input::placeholder {
    color: transparent
}

.form-floating>.form-control-plaintext:not(:-moz-placeholder-shown),
.form-floating>.form-control:not(:-moz-placeholder-shown) {
    padding-bottom: .625rem;
    padding-top: 1.625rem
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label {
    transform: scale(.65) translateY(-.5rem) translateX(0.50rem);
    color: #9e9e9e;
}

.form-floating .form-control-plaintext:not(:placeholder-shown)~label,
.form-floating .form-control:focus~label,
.form-floating .input-group > input:focus~label,
.form-floating:has(.bootstrap-select:not(:placeholder-shown) + label) label,
.form-floating:has(.input-group > input:not(:placeholder-shown)) > label,
.form-floating:has(.input-group > input:focus) > label,
.form-floating:has(input:not(:placeholder-shown) + label) label,
.form-floating:has(.form-select:not(:placeholder-shown) + label) label
{
    transform: scale(.65) translateY(-.5rem) translateX(0.50rem);
}

.form-floating>.form-control:not(:-moz-placeholder-shown)~label:after {
    background-color: var(--kf-bg-2);
    border-radius: var(--border-radius);
    content: "";
    height: 1.5em;
    inset: 1rem .375rem;
    position: absolute;
    z-index: -1
}

.form-floating>.form-control-plaintext~label {
    border-width: var(--border-width) 0
}

.form-floating>.form-control:disabled~label,
.form-floating>:disabled~label {
    color: #6c757d
}

.form-floating>.form-control:disabled~label:after,
.form-floating>:disabled~label:after {
    background-color: var(--text-secondary-bg)
}

.input-group {
    align-items: stretch;
    display: flex;
    flex-wrap: wrap;
    position: relative;
    width: 100%;
    background: var(--input-bg);
    border-radius: 8px;
    border: 1px solid var(--border-color);
}
.input-group .form-floating{
    border-right: 1px solid var(--border-color);
}
.input-group .form-floating:last-child{
    border:none;
}
.input-group.is-invalid{
    border-color: var(--bs-danger);
}
.input-group.is-valid{
    border-color: var(--bs-success);
}
.input-group .form-select,
.input-group .form-control{
    border-color: transparent;
}

.input-group>.form-control,
.input-group>.form-floating,
.input-group>.form-select {
    flex: 1 1 auto;
    min-width: 0;
    position: relative;
    width: 1%
}

.input-group .btn {
    position: relative;
    z-index: 2
}

.input-group .btn:focus {
    z-index: 5
}

.input-group-text {
    align-items: center;
    border-radius: 8px;
    color: var(--bs-body-color);
    display: flex;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    padding: .375rem .75rem;
    text-align: center;
    white-space: nowrap
}

.input-group-lg>.btn,
.input-group-lg>.form-control,
.input-group-lg>.form-select,
.input-group-lg>.input-group-text {
    border-radius: var(--border-radius-lg);
    font-size: 18px;
    padding: 5px 14px;
}

.input-group-sm>.btn,
.input-group-sm>.form-control,
.input-group-sm>.form-select,
.input-group-sm>.input-group-text {
    border-radius: var(--border-radius-sm);
    font-size: .875rem;
    padding: .25rem .5rem;
    border:none;
}

.input-group-lg>.form-select,
.input-group-sm>.form-select {
    padding-right: 3rem
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-left: calc(var(--border-width)*-1)
}

.input-group>.form-floating:not(:first-child):not(:last-child)>.form-control, .input-group>.form-floating:not(:first-child):not(:last-child)>.form-select {
    border-radius: 0 !important;
}

.input-group > .form-floating:last-child .form-control {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border-right: 0px solid;
}

.input-group > .form-floating:first-child .form-control{
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-left: 0px solid;
}

.input-group:first-child .form-control{
    border-bottom-left-radius: 8px;
    border-top-left-radius: 8px;
}

.input-group:last-child .form-control{
    border-bottom-right-radius: 8px;
    border-top-right-radius: 8px;
}

.is-valid~.valid-feedback,
.is-valid~.valid-tooltip,
.was-validated :valid~.valid-feedback,
.was-validated :valid~.valid-tooltip {
    display: block
}

.form-control.is-valid,
.was-validated .form-control:valid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3E%3C/svg%3E");
    background-position: right calc(.375em + .1875rem) center;
    background-repeat: no-repeat;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border-color: var(--bs-form-valid-border-color);
    padding-right: calc(1.5em + .75rem)
}

.form-control.is-valid:focus,
.was-validated .form-control:valid:focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
}

.was-validated textarea.form-control:valid,
textarea.form-control.is-valid {
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
    padding-right: calc(1.5em + .75rem)
}

.form-select.is-valid,
.was-validated .form-select:valid {
    border-color: var(--bs-form-valid-border-color)
}

.form-select.is-valid:not([multiple]):not([size]),
.form-select.is-valid:not([multiple])[size="1"],
.was-validated .form-select:valid:not([multiple]):not([size]),
.was-validated .form-select:valid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill='%23198754' d='M2.3 6.73.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1'/%3E%3C/svg%3E");
    background-position: right .75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem);
    padding-right: 4.125rem
}

.form-select.is-valid:focus,
.was-validated .form-select:valid:focus {
    border-color: var(--bs-form-valid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
}

.form-control-color.is-valid,
.was-validated .form-control-color:valid {
    width: calc(3.75rem + 1.5em)
}

.form-check-input.is-valid,
.was-validated .form-check-input:valid {
    border-color: var(--bs-form-valid-border-color)
}

.form-check-input.is-valid:checked,
.was-validated .form-check-input:valid:checked {
    background-color: var(--bs-form-valid-color)
}

.form-check-input.is-valid:focus,
.was-validated .form-check-input:valid:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-success-rgb), .25)
}

.form-check-input.is-valid~.form-check-label,
.was-validated .form-check-input:valid~.form-check-label {
    color: var(--bs-form-valid-color)
}

.form-check-inline .form-check-input~.valid-feedback {
    margin-left: .5em
}

.input-group>.form-control:not(:focus).is-valid,
.input-group>.form-floating:not(:focus-within).is-valid,
.input-group>.form-select:not(:focus).is-valid,
.was-validated .input-group>.form-control:not(:focus):valid,
.was-validated .input-group>.form-floating:not(:focus-within):valid,
.was-validated .input-group>.form-select:not(:focus):valid {
    z-index: 3
}

.invalid-feedback {
    color: var(--bs-form-invalid-color);
    display: none;
    font-size: .875em;
    margin-top: .25rem;
    width: 100%
}

.is-invalid~.invalid-feedback,
.is-invalid~.invalid-tooltip,
.was-validated :invalid~.invalid-feedback,
.was-validated :invalid~.invalid-tooltip {
    display: block
}

.form-control.is-invalid,
.was-validated .form-control:invalid {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");
    background-position: right calc(.375em + .1875rem) center;
    background-repeat: no-repeat;
    background-size: calc(.75em + .375rem) calc(.75em + .375rem);
    border-color: var(--bs-form-invalid-border-color);
    padding-right: calc(1.5em + .75rem)
}

.form-control.is-invalid:focus,
.was-validated .form-control:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
}

.was-validated textarea.form-control:invalid,
textarea.form-control.is-invalid {
    background-position: top calc(.375em + .1875rem) right calc(.375em + .1875rem);
    padding-right: calc(1.5em + .75rem)
}

.form-select.is-invalid,
.was-validated .form-select:invalid {
    border-color: var(--bs-form-invalid-border-color)
}

.form-select.is-invalid:not([multiple]):not([size]),
.form-select.is-invalid:not([multiple])[size="1"],
.was-validated .form-select:invalid:not([multiple]):not([size]),
.was-validated .form-select:invalid:not([multiple])[size="1"] {
    --bs-form-select-bg-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='none' stroke='%23dc3545'%3E%3Ccircle cx='6' cy='6' r='4.5'/%3E%3Cpath stroke-linejoin='round' d='M5.8 3.6h.4L6 6.5z'/%3E%3Ccircle cx='6' cy='8.2' r='.6' fill='%23dc3545' stroke='none'/%3E%3C/svg%3E");
    background-position: right .75rem center, center right 2.25rem;
    background-size: 16px 12px, calc(.75em + .375rem) calc(.75em + .375rem);
    padding-right: 4.125rem
}

.form-select.is-invalid:focus,
.was-validated .form-select:invalid:focus {
    border-color: var(--bs-form-invalid-border-color);
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
}

.form-control-color.is-invalid,
.was-validated .form-control-color:invalid {
    width: calc(3.75rem + 1.5em)
}

.form-check-input.is-invalid,
.was-validated .form-check-input:invalid {
    border-color: var(--bs-form-invalid-border-color)
}

.form-check-input.is-invalid:checked,
.was-validated .form-check-input:invalid:checked {
    background-color: var(--bs-form-invalid-color)
}

.form-check-input.is-invalid:focus,
.was-validated .form-check-input:invalid:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-danger-rgb), .25)
}

.form-check-input.is-invalid~.form-check-label,
.was-validated .form-check-input:invalid~.form-check-label {
    color: var(--bs-form-invalid-color)
}

.form-check-inline .form-check-input~.invalid-feedback {
    margin-left: .5em
}

.input-group>.form-control:not(:focus).is-invalid,
.input-group>.form-floating:not(:focus-within).is-invalid,
.input-group>.form-select:not(:focus).is-invalid,
.was-validated .input-group>.form-control:not(:focus):invalid,
.was-validated .input-group>.form-floating:not(:focus-within):invalid,
.was-validated .input-group>.form-select:not(:focus):invalid {
    z-index: 4
}

.btn {
    position: relative;
    --bs-btn-padding-x: 0.75rem;
    --bs-btn-padding-y: 0.375rem;
    --bs-btn-font-family: ;
    --bs-btn-font-size: 1rem;
    --bs-btn-font-weight: 400;
    --bs-btn-line-height: 1.5;
    background: var(--bs-btn-bg);
    background-color: rgba(0, 0, 0, 0);
    border-radius: var(--button-radius);
    color: var(--bs-btn-color);
    cursor: pointer;
    display: inline-block;
    font-family: var(--bs-btn-font-family);
    font-size: var(--bs-btn-font-size);
    font-weight: var(--bs-btn-font-weight);
    line-height: var(--bs-btn-line-height);
    padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
    text-align: center;
    text-decoration: none;
    transition: opacity .15s ease-in-out, box-shadow .15s ease-in-out;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    vertical-align: middle;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    outline: none;
    border: 0;
    gap:8px;
}
.btn-theme,
.btn-primary,
.corpy button{
    --bs-btn-color: #fff;
    --bs-btn-bg: linear-gradient(180deg, var(--main-color) 0%, var(--secondary-color) 100%);
    --bs-btn-border-color: rgba(255, 255, 255, .15);
    --bs-btn-border-width: 3px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: linear-gradient(180deg, var(--secondary-color) 100%) , var(--main-color) 0% ;
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: 0px 0px 0px 0px rgba(79, 26, 214, 0.3);
}
.btn-secondary{
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--button-secondary-border-color);
    --bs-btn-border-width: 1px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: transparent;
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: none;
}
.btn:before{
    content: "";
    border-width: var(--bs-btn-border-width, 0);
    border-color: var(--bs-btn-border-color, none);
    border-style: solid;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-radius: inherit;
    pointer-events: none;
}
.badge:before{
    content: "";
    border-width: var(--badge-border-width, 0);
    border-color: var(--badge-border-color, none);
    border-style: solid;
    width: 100%;
    height: 100%;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    top: 0;
    border-radius: inherit;
    pointer-events: none;
}
@media(prefers-reduced-motion:reduce) {
    .btn {
        transition: none
    }
}



.btn-check+.btn:hover {
    background-color: var(--bs-btn-bg);
    border-color: var(--bs-btn-border-color);
    color: var(--bs-btn-color)
}

.btn-check:focus-visible+.btn {
    border-color: var(--bs-btn-hover-border-color);
    box-shadow: var(--bs-btn-focus-box-shadow);
    outline: 0
}

.btn-check:checked+.btn,
.btn.active,
.btn.show,
.btn:first-child:active,
:not(.btn-check)+.btn:active {
    background-color: var(--card-primary-background);
    border-color: var(--border-color);
    color: var(--main-color);
}

.btn-check:checked+.btn:focus-visible,
.btn.active:focus-visible,
.btn.show:focus-visible,
.btn:first-child:active:focus-visible,
:not(.btn-check)+.btn:active:focus-visible {
    box-shadow: var(--bs-btn-focus-box-shadow)
}

.btn-check:checked:focus-visible+.btn {
    box-shadow: var(--bs-btn-focus-box-shadow)
}

.bvi{
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn.disabled,
.btn:disabled,
fieldset:disabled .btn {
    background-color: var(--bs-btn-disabled-bg);
    border-color: var(--bs-btn-disabled-border-color);
    color: var(--bs-btn-disabled-color);
    opacity: var(--bs-btn-disabled-opacity);
    pointer-events: none
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: linear-gradient(180deg, var(--main-color) 0%, var(--secondary-color) 100%);
    --bs-btn-border-color: rgba(255, 255, 255, .15);
    --bs-btn-border-width: 3px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: linear-gradient(180deg, var(--secondary-color) 100%) , var(--main-color) 0% ;
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: 0px 0px 0px 0px rgba(79, 26, 214, 0.3);
}

.btn-info {
    --bs-btn-color: #000;
    --bs-btn-bg: #0dcaf0;
    --bs-btn-border-color: #0dcaf0;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #31d2f2;
    --bs-btn-hover-border-color: #25cff2;
    --bs-btn-focus-shadow-rgb: 11, 172, 204;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #3dd5f3;
    --bs-btn-active-border-color: #25cff2;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #0dcaf0;
    --bs-btn-disabled-border-color: #0dcaf0
}

.btn-warning {
    --bs-btn-color: #fff;
    --bs-btn-bg: linear-gradient(180deg, rgb(230, 168, 0) 0%, rgb(255, 202, 44) 100%);
    --bs-btn-border-color: rgba(255, 255, 255, .15);
    --bs-btn-border-width: 3px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: linear-gradient(180deg, rgb(255, 202, 44) 100%, rgb(230, 168, 0) 0%);
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: 0px 0px 0px 0px rgba(255, 193, 7, 0.3);
}
.btn-danger {
    --bs-btn-color: #fff;
    --bs-btn-bg: linear-gradient(180deg, rgb(220 53 69) 0%, rgb(167 24 38) 100%);
    --bs-btn-border-color: rgba(255, 255, 255, .15);
    --bs-btn-border-width: 3px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: linear-gradient(180deg, rgb(220 53 69) 0%, rgb(167 24 38) 100%);
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: 0px 0px 0px 0px #dc354547;
}

.btn-light {
    --bs-btn-color: #000;
    --bs-btn-bg: #f8f9fa;
    --bs-btn-border-color: #f8f9fa;
    --bs-btn-hover-color: #000;
    --bs-btn-hover-bg: #d3d4d5;
    --bs-btn-hover-border-color: #c6c7c8;
    --bs-btn-focus-shadow-rgb: 211, 212, 213;
    --bs-btn-active-color: #000;
    --bs-btn-active-bg: #c6c7c8;
    --bs-btn-active-border-color: #babbbc;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
    --bs-btn-disabled-color: #000;
    --bs-btn-disabled-bg: #f8f9fa;
    --bs-btn-disabled-border-color: #f8f9fa
}

.btn-outline {
    --bs-btn-color: #fff;
    --bs-btn-bg: transparent;
    --bs-btn-border-color: rgba(255, 255, 255, .15);
    --bs-btn-border-width: 1px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: linear-gradient(180deg, rgb(17 16 20) 100%), var(--main-color) 0%;
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: 0px 0px 0px 0px rgb(17 16 20);
}

.btn-link {
    --bs-btn-font-weight: 400;
    --bs-btn-color: var(--link-color);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--bs-link-hover-color);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--bs-link-hover-color);
    --bs-btn-active-border-color: transparent;
    --bs-btn-disabled-color: #6c757d;
    --bs-btn-disabled-border-color: transparent;
    --bs-btn-box-shadow: 0 0 0 #000;
    --bs-btn-focus-shadow-rgb: 49, 132, 253;
    text-decoration: underline
}

.btn-link:focus-visible {
    color: var(--bs-btn-color)
}

.btn-link:hover {
    color: var(--bs-btn-hover-color)
}

.btn-group-lg>.btn,
.btn-lg {
    --bs-btn-padding-y: 0.5rem;
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: var(--border-radius-lg)
}

.btn-group-sm>.btn,
.btn-sm {
    --bs-btn-padding-y: 0.25rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.875rem;
    --bs-btn-border-radius: var(--border-radius-sm)
}

.fade {
    transition: opacity .15s linear
}

@media(prefers-reduced-motion:reduce) {
    .fade {
        transition: none
    }
}

.fade:not(.show) {
    opacity: 0
}

.collapse:not(.show) {
    display: none
}

.collapsing {
    height: 0;
    overflow: hidden;
    transition: height .35s ease
}

@media(prefers-reduced-motion:reduce) {
    .collapsing {
        transition: none
    }
}

.collapsing.collapse-horizontal {
    height: auto;
    transition: width .35s ease;
    width: 0
}

@media(prefers-reduced-motion:reduce) {
    .collapsing.collapse-horizontal {
        transition: none
    }
}

.dropdown,
.dropdown-center,
.dropend,
.dropstart,
.dropup,
.dropup-center {
    position: relative
}

.dropdown-toggle {
    white-space: nowrap
}

.dropdown-toggle:after {
    border-bottom: 0;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    border-top: .3em solid;
    content: "";
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em
}

.dropdown-toggle:empty:after {
    margin-left: 0
}

.dropdown-menu {
    background-clip: padding-box;
    background: var(--input-bg);
    border: var(--border-width) solid var(--border-color);
    border-radius: var(--border-radius);
    color: var(--bs-dropdown-color);
    display: none;
    font-size: var(--bs-dropdown-font-size);
    list-style: none;
    margin: 0;
    min-width: 140px;
    padding: 5px;
    position: absolute;
    text-align: left;
    z-index: 1;
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
}
.dropdown-menu li{
    border-radius: 5px;
    padding: 3px 10px;
}
.dropdown-menu li:not(.dropdown-header,.dropdown-divider):hover{
    background: #101010;
}
.dropdown-menu[data-bs-popper] {
    left: 0;
    margin-top: var(--bs-dropdown-spacer);
    top: 100%
}

.dropdown-menu-end {
    --bs-position: end
}

.dropdown-menu-end[data-bs-popper] {
    left: auto;
    right: 0;
    
}

.dropup .dropdown-menu[data-bs-popper] {
    bottom: 100%;
    margin-bottom: var(--bs-dropdown-spacer);
    margin-top: 0;
    top: auto
}

.dropup .dropdown-toggle:after {
    border-bottom: .3em solid;
    border-left: .3em solid transparent;
    border-right: .3em solid transparent;
    border-top: 0;
    content: "";
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em
}

.dropup .dropdown-toggle:empty:after {
    margin-left: 0
}

.dropend .dropdown-menu[data-bs-popper] {
    left: 100%;
    margin-left: var(--bs-dropdown-spacer);
    margin-top: 0;
    right: auto;
    top: 0
}

.dropend .dropdown-toggle:after {
    border-bottom: .3em solid transparent;
    border-left: .3em solid;
    border-right: 0;
    border-top: .3em solid transparent;
    content: "";
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em
}

.dropend .dropdown-toggle:empty:after {
    margin-left: 0
}

.dropend .dropdown-toggle:after {
    vertical-align: 0
}

.dropstart .dropdown-menu[data-bs-popper] {
    left: auto;
    margin-right: var(--bs-dropdown-spacer);
    margin-top: 0;
    right: 100%;
    top: 0
}

.dropstart .dropdown-toggle:after {
    content: "";
    display: inline-block;
    display: none;
    margin-left: .255em;
    vertical-align: .255em
}

.dropstart .dropdown-toggle:before {
    border-bottom: .3em solid transparent;
    border-right: .3em solid;
    border-top: .3em solid transparent;
    content: "";
    display: inline-block;
    margin-right: .255em;
    vertical-align: .255em
}

.dropstart .dropdown-toggle:empty:after {
    margin-left: 0
}

.dropstart .dropdown-toggle:before {
    vertical-align: 0
}

span[data-change-language] {
    display: block;
    cursor: pointer;
    padding: 5px 10px;
}

.dropdown-divider {
    border-top: 1px solid var(--bs-dropdown-divider-bg);
    height: 0;
    margin: var(--bs-dropdown-divider-margin-y) 0;
    opacity: 1;
    overflow: hidden
}

.dropdown-item:focus,
.dropdown-item:hover {
    background-color: var(--bs-dropdown-link-hover-bg);
    color: var(--bs-dropdown-link-hover-color)
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown .dropdown-menu .dropdown-item.bg-theme-1
{
    background-color: var(--bs-dropdown-link-active-bg);
    color: var(--bs-dropdown-link-active-color);
    text-decoration: none
}

.dropdown .dropdown-menu .dropdown-item.bg-theme-1 svg{
        color: #fff;
    stroke: #fff;
}

.dropdown-item.disabled,
.dropdown-item:disabled {
    background-color: transparent;
    color: var(--bs-dropdown-link-disabled-color);
    pointer-events: none
}

.dropdown-menu.show {
    display: block
}

.dropdown-header {
    color: var(--bs-dropdown-header-color);
    display: block;
    font-size: .875rem;
    margin-bottom: 0;
    padding: var(--bs-dropdown-header-padding-y) var(--bs-dropdown-header-padding-x);
    white-space: nowrap
}

.hidden{
    display:none;
}

.btn-group,
.btn-group-vertical {
    display: inline-flex;
    position: relative;
    vertical-align: middle
}

.btn-group-vertical>.btn,
.btn-group>.btn {
    flex: 1 1 auto;
    position: relative
}

.btn-group-vertical>.btn-check:checked+.btn,
.btn-group-vertical>.btn-check:focus+.btn,
.btn-group-vertical>.btn.active,
.btn-group-vertical>.btn:active,
.btn-group-vertical>.btn:focus,
.btn-group-vertical>.btn:hover,
.btn-group>.btn-check:checked+.btn,
.btn-group>.btn-check:focus+.btn,
.btn-group>.btn.active,
.btn-group>.btn:active,
.btn-group>.btn:focus,
.btn-group>.btn:hover {
    z-index: 1
}

.btn-toolbar .input-group {
    width: auto
}

.btn-group {
    border-radius: var(--border-radius)
}

.btn-group>.btn-group:not(:first-child),
.btn-group>:not(.btn-check:first-child)+.btn {
    margin-left: calc(var(--border-width)*-1)
}

.btn-group>.btn-group:not(:last-child)>.btn,
.btn-group>.btn.dropdown-toggle-split:first-child,
.btn-group>.btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0
}

.btn-group>.btn-group:not(:first-child)>.btn,
.btn-group>.btn:nth-child(n+3),
.btn-group>:not(.btn-check)+.btn {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0
}

.dropdown-toggle-split:after,
.dropend .dropdown-toggle-split:after,
.dropup .dropdown-toggle-split:after {
    margin-left: 0
}

.dropstart .dropdown-toggle-split:before {
    margin-right: 0
}

.btn-group-sm>.btn+.dropdown-toggle-split,
.btn-sm+.dropdown-toggle-split {
    padding-left: .375rem;
    padding-right: .375rem
}

.btn-group-lg>.btn+.dropdown-toggle-split,
.btn-lg+.dropdown-toggle-split {
    padding-left: .75rem;
    padding-right: .75rem
}

.btn-group-vertical>.btn,
.btn-group-vertical>.btn-group {
    width: 100%
}

.btn-group-vertical>.btn-group:not(:first-child),
.btn-group-vertical>.btn:not(:first-child) {
    margin-top: calc(var(--border-width)*-1)
}

.btn-group-vertical>.btn-group:not(:last-child)>.btn,
.btn-group-vertical>.btn:not(:last-child):not(.dropdown-toggle) {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0
}

.btn-group-vertical>.btn-group:not(:first-child)>.btn,
.btn-group-vertical>.btn~.btn {
    border-top-left-radius: 0;
    border-top-right-radius: 0
}

.nav {
    --bs-nav-link-padding-x: 1rem;
    --bs-nav-link-padding-y: 0.7rem;
    --bs-nav-link-font-weight: ;
    --bs-nav-link-color: var(--link-color);
    --bs-nav-link-hover-color: var(--bs-link-hover-color);
    --bs-nav-link-disabled-color: var(--text-secondary-color);
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
}

.nav-link {
    color: #f9f7f2;
    background: none;
    border: 0;
    position: relative;
    align-items: center;
    display: flex;
    gap: 10px;
    text-decoration: none;
    transition: opacity .15s ease-in-out;

}

@media(prefers-reduced-motion:reduce) {
    .nav-link {
        transition: none
    }
}

.nav-link:focus,
.nav-link:hover {
    color: var(--text-color)
}

.nav-link.disabled,
.nav-link:disabled {
    color: var(--bs-nav-link-disabled-color);
    cursor: default;
    pointer-events: none
}

.nav-tabs {
    --bs-nav-tabs-border-width: var(--border-width);
    --bs-nav-tabs-border-color: var(--border-color);
    --bs-nav-tabs-border-radius: var(--border-radius);
    --bs-nav-tabs-link-hover-border-color: var(--text-secondary-bg) var(--text-secondary-bg) var(--border-color);
    --bs-nav-tabs-link-active-color: var(--bs-emphasis-color);
    --bs-nav-tabs-link-active-bg: #150e2f;
    --bs-nav-tabs-link-active-border-color: var(--border-color) var(--border-color) var(--kf-bg-2);
    border-bottom: var(--bs-nav-tabs-border-width) solid var(--bs-nav-tabs-border-color)
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    isolation: isolate
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--main-color)
}

.nav-tabs .nav-link.active:after{
    content: "";
    position: absolute;
    left: 0;
    width: 100%;
    height: 4px;
    background: #fff;
    bottom: 0px;
    border-radius: 5px;
    overflow: hidden;
}

.nav-tabs.inner-nav .nav-link.active:after{
    height: 2px;
    bottom:0px;
}

.nav-tabs .nav-link{
    padding: 0px 0px 13px 0px;
}

.nav-tabs.inner-nav .nav-link{
    padding: 0px 0px 6px 0px;
    height: 17px;
    font-size: 12px;
}

.nav-tabs .dropdown-menu {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    margin-top: calc(var(--bs-nav-tabs-border-width)*-1)
}

.nav-pills {
    --bs-nav-pills-border-radius: var(--border-radius);
    --bs-nav-pills-link-active-color: #fff;
    --bs-nav-pills-link-active-bg: #0d6efd
}

.nav-pills .nav-link {
    border-radius: var(--bs-nav-pills-border-radius)
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
    background-color: var(--bs-nav-pills-link-active-bg);
    color: var(--bs-nav-pills-link-active-color)
}

.nav-underline .nav-link {
    border-bottom: var(--bs-nav-underline-border-width) solid transparent;
    padding-left: 0;
    padding-right: 0
}

.nav-underline .nav-link:focus,
.nav-underline .nav-link:hover {
    border-bottom-color: currentcolor
}

.nav-underline .nav-link.active,
.nav-underline .show>.nav-link {
    border-bottom-color: currentcolor;
    color: var(--bs-nav-underline-link-active-color);
    font-weight: 700
}

.nav-fill .nav-item,
.nav-fill>.nav-link {
    flex: 1 1 auto;
    text-align: center
}

.nav-justified .nav-item,
.nav-justified>.nav-link {
    flex-basis: 0;
    flex-grow: 1;
    text-align: center
}

.nav-fill .nav-item .nav-link,
.nav-justified .nav-item .nav-link {
    width: 100%
}

.tab-content>.tab-pane {
    display: none
}

.tab-content>.active {
    display: block
}

.navbar {
    --bs-navbar-padding-x: 0;
    --bs-navbar-padding-y: 0.5rem;
    --bs-navbar-color: rgba(var(--bs-emphasis-color-rgb), 0.65);
    --bs-navbar-hover-color: rgba(var(--bs-emphasis-color-rgb), 0.8);
    --bs-navbar-disabled-color: rgba(var(--bs-emphasis-color-rgb), 0.3);
    --bs-navbar-active-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-padding-y: 0.3125rem;
    --bs-navbar-brand-margin-end: 1rem;
    --bs-navbar-brand-font-size: 1.25rem;
    --bs-navbar-brand-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-brand-hover-color: rgba(var(--bs-emphasis-color-rgb), 1);
    --bs-navbar-nav-link-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.25rem;
    --bs-navbar-toggler-padding-x: 0.75rem;
    --bs-navbar-toggler-font-size: 1.25rem;
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba(33, 37, 41, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
    --bs-navbar-toggler-border-color: rgba(var(--bs-emphasis-color-rgb), 0.15);
    --bs-navbar-toggler-border-radius: var(--border-radius);
    --bs-navbar-toggler-focus-width: 0.25rem;
    --bs-navbar-toggler-transition: box-shadow 0.15s ease-in-out;
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    position: relative
}

.accounts-nav{
    display: flex;
    justify-content: space-between;
    position: absolute;
    width: 100%;
    left: 0;
    padding: 0 20px;
    margin-top: 17px;
    z-index: 111111;
}

.navbar>.container,
.navbar>.container-fluid,
.navbar>.container-lg,
.navbar>.container-md,
.navbar>.container-sm,
.navbar>.container-xl,
.navbar>.container-xxl {
    align-items: center;
    display: flex;
    flex-wrap: inherit;
    justify-content: space-between
}
.inner-wrap{
    position: relative;
    width: 100%;
}
.ssb.classic header .navbar-brand,
.ssb.boxed header .navbar-brand{
    text-decoration: none;
    width: calc(var(--sidebar-width) - var(--gutter-x));
}

.ssb.small header .navbar-brand{
    text-decoration: none;
    width: calc(var(--sidebar-small-width));
}

.ssb.small .brand-text{
    display:none;
}

.ssb.small .kf-sidebar .nav-link{
    flex-direction: column;
    font-size: 10px;
    line-height: 12px;
    gap:1px;
}

.navbar-brand .h6{
    width: auto;
    display: table-caption;
}

.navbar-brand:focus,
.navbar-brand:hover {
    color: var(--bs-navbar-brand-hover-color)
}

.navbar-nav {
    display: flex;
    flex-direction: column;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    font-size:14px;
}

.navbar-nav .nav-link.active,
.navbar-nav .nav-link.show {
    color: var(--bs-navbar-active-color)
}

.navbar-nav .dropdown-menu {
    position: static
}

.navbar-collapse {
    align-items: center;
    flex-basis: 100%;
    flex-grow: 1
}

.navbar-toggler {
    background-color: transparent;
    border: var(--border-width) solid var(--bs-navbar-toggler-border-color);
    border-radius: var(--bs-navbar-toggler-border-radius);
    color: var(--bs-navbar-color);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    transition: var(--bs-navbar-toggler-transition)
}

@media(prefers-reduced-motion:reduce) {
    .navbar-toggler {
        transition: none
    }
}

.navbar-toggler:hover {
    text-decoration: none
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 var(--bs-navbar-toggler-focus-width);
    outline: 0;
    text-decoration: none
}

[data="account_list"] .dropdown-menu {
    left: auto;
    right: 0;
}

@media(min-width:576px) {
    [data="account_list"] .dropdown-menu {
        right: 0;
        left: 0;
    }
    .navbar-expand-sm {
        flex-wrap: nowrap;
        justify-content: flex-start
    }
    .navbar-expand-sm .navbar-nav {
        flex-direction: row
    }
    .navbar-expand-sm .navbar-nav .dropdown-menu {
        position: absolute
    }
    .navbar-expand-sm .navbar-nav .nav-link {
        padding-left: var(--bs-navbar-nav-link-padding-x);
        padding-right: var(--bs-navbar-nav-link-padding-x)
    }
    .navbar-expand-sm .navbar-nav-scroll {
        overflow: visible
    }
    .navbar-expand-sm .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }
    .navbar-expand-sm .navbar-toggler {
        display: none
    }
    .navbar-expand-sm .offcanvas {
        background-color: transparent !important;
        border: 0 !important;
        flex-grow: 1;
        height: auto !important;
        position: static;
        transform: none !important;
        transition: none;
        visibility: visible !important;
        width: auto !important;
        z-index: auto
    }
    .navbar-expand-sm .offcanvas .offcanvas-header {
        display: none
    }
    .navbar-expand-sm .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(min-width:768px) {
    .navbar-expand-md {
        flex-wrap: nowrap;
        justify-content: flex-start
    }
    .navbar-expand-md .navbar-nav {
        flex-direction: row
    }
    .navbar-expand-md .navbar-nav .dropdown-menu {
        position: absolute
    }
    .navbar-expand-md .navbar-nav .nav-link {
        padding-left: var(--bs-navbar-nav-link-padding-x);
        padding-right: var(--bs-navbar-nav-link-padding-x)
    }
    .navbar-expand-md .navbar-nav-scroll {
        overflow: visible
    }
    .navbar-expand-md .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }
    .navbar-expand-md .navbar-toggler {
        display: none
    }
    .navbar-expand-md .offcanvas {
        background-color: transparent !important;
        border: 0 !important;
        flex-grow: 1;
        height: auto !important;
        position: static;
        transform: none !important;
        transition: none;
        visibility: visible !important;
        width: auto !important;
        z-index: auto
    }
    .navbar-expand-md .offcanvas .offcanvas-header {
        display: none
    }
    .navbar-expand-md .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(min-width:992px) {
    .navbar-expand-lg {
        flex-wrap: nowrap;
        justify-content: flex-start
    }
    .navbar-expand-lg .navbar-nav {
        flex-direction: row
    }
    .navbar-expand-lg .navbar-nav .dropdown-menu {
        position: absolute
    }
    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: var(--bs-navbar-nav-link-padding-x);
        padding-right: var(--bs-navbar-nav-link-padding-x)
    }
    .navbar-expand-lg .navbar-nav-scroll {
        overflow: visible
    }
    .navbar-expand-lg .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }
    .navbar-expand-lg .navbar-toggler {
        display: none
    }
    .navbar-expand-lg .offcanvas {
        background-color: transparent !important;
        border: 0 !important;
        flex-grow: 1;
        height: auto !important;
        position: static;
        transform: none !important;
        transition: none;
        visibility: visible !important;
        width: auto !important;
        z-index: auto
    }
    .navbar-expand-lg .offcanvas .offcanvas-header {
        display: none
    }
    .navbar-expand-lg .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(min-width:1200px) {
    .navbar-expand-xl {
        flex-wrap: nowrap;
        justify-content: flex-start
    }
    .navbar-expand-xl .navbar-nav {
        flex-direction: row
    }
    .navbar-expand-xl .navbar-nav .dropdown-menu {
        position: absolute
    }
    .navbar-expand-xl .navbar-nav .nav-link {
        padding-left: var(--bs-navbar-nav-link-padding-x);
        padding-right: var(--bs-navbar-nav-link-padding-x)
    }
    .navbar-expand-xl .navbar-nav-scroll {
        overflow: visible
    }
    .navbar-expand-xl .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }
    .navbar-expand-xl .navbar-toggler {
        display: none
    }
    .navbar-expand-xl .offcanvas {
        background-color: transparent !important;
        border: 0 !important;
        flex-grow: 1;
        height: auto !important;
        position: static;
        transform: none !important;
        transition: none;
        visibility: visible !important;
        width: auto !important;
        z-index: auto
    }
    .navbar-expand-xl .offcanvas .offcanvas-header {
        display: none
    }
    .navbar-expand-xl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(min-width:1400px) {
    .navbar-expand-xxl {
        flex-wrap: nowrap;
        justify-content: flex-start
    }
    .navbar-expand-xxl .navbar-nav {
        flex-direction: row
    }
    .navbar-expand-xxl .navbar-nav .dropdown-menu {
        position: absolute
    }
    .navbar-expand-xxl .navbar-nav .nav-link {
        padding-left: var(--bs-navbar-nav-link-padding-x);
        padding-right: var(--bs-navbar-nav-link-padding-x)
    }
    .navbar-expand-xxl .navbar-nav-scroll {
        overflow: visible
    }
    .navbar-expand-xxl .navbar-collapse {
        display: flex !important;
        flex-basis: auto
    }
    .navbar-expand-xxl .navbar-toggler {
        display: none
    }
    .navbar-expand-xxl .offcanvas {
        background-color: transparent !important;
        border: 0 !important;
        flex-grow: 1;
        height: auto !important;
        position: static;
        transform: none !important;
        transition: none;
        visibility: visible !important;
        width: auto !important;
        z-index: auto
    }
    .navbar-expand-xxl .offcanvas .offcanvas-header {
        display: none
    }
    .navbar-expand-xxl .offcanvas .offcanvas-body {
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

.kyc-status{
    font-size: 13px;
    position: absolute;
    right: -4px;
    top: -4px;
}

.ssb.classic .navbar-nav .nav-item.active,
.ssb.boxed .navbar-nav .nav-item.active{
    margin-left: -10px;
    padding-left: 10px;
    color: var(--text-color);
}

.ssb.classic .navbar-nav .nav-item,
.ssb.boxed .navbar-nav .nav-item{
    position: relative;
    padding: .5rem .25rem .5rem 0;
}

.ssb.small .navbar-nav .nav-item
{
    margin-bottom: 10px;
}

.ssb.small .kf-sidebar .dropdown-toggle{
    white-space: normal;
}

.ssb.classic .user_profile,
.ssb.boxed .user_profile{
    background: #161616;
    padding: 5px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.ssb.small .user_profile a>span{
    flex-direction: column;
    text-align: center;
    line-height: 14px;
    gap: 5px;
}

.ssb.small .user_profile ul{
    padding:10px 0;
    min-width:auto;
}

.ssb.small .user_profile ul li{
    margin-bottom:10px;
}

.navbar-nav .nav-item,
.user_profile .nav-item{
    color: var(--text-secondary);
    position:relative;
}

.ssb.small .kf-sidebar .px-3{
    padding-left: 3px !important;
    padding-right: 3px !important;
}

.navbar-expand .navbar-nav {
    flex-direction: row
}

.navbar-expand .navbar-nav .dropdown-menu {
    position: absolute
}

.navbar-expand .navbar-nav .nav-link {
    padding-left: var(--bs-navbar-nav-link-padding-x);
    padding-right: var(--bs-navbar-nav-link-padding-x)
}

.navbar-expand .navbar-collapse {
    display: flex !important;
    flex-basis: auto
}

.navbar-expand .navbar-toggler {
    display: none
}

.navbar-expand .offcanvas {
    background-color: transparent !important;
    border: 0 !important;
    flex-grow: 1;
    height: auto !important;
    position: static;
    transform: none !important;
    transition: none;
    visibility: visible !important;
    width: auto !important;
    z-index: auto
}

.navbar-expand .offcanvas .offcanvas-header {
    display: none
}

.navbar-expand .offcanvas .offcanvas-body {
    display: flex;
    flex-grow: 0;
    overflow-y: visible;
    padding: 0
}

.topbar--ticker {
    height: 40px;
    position: relative;
    opacity: 1;
    min-height: var(--topbar-height);
    border-bottom: 1px solid var(--border-color);
    background: var(--card-primary-background);
}

.topbar--ticker.booting { opacity: 0; }

/* FOUC önleme */

.topbar-bar {
    display: flex;
    align-items: stretch;
    height: 100%;
    gap: 16px;
}

/* Platform tabs (Bybit / Binance) — left side of the topbar, hidden on mobile */
.platform-tabs {
    display: flex;
    align-items: stretch;
    gap: 2px;
}
.platform-tab {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
    transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.platform-tab:hover {
    color: var(--text-primary, #fff);
    background: rgba(255,255,255,.04);
}
.platform-tab.active {
    color: var(--text-primary, #fff);
    background: rgba(255,255,255,.06);
    box-shadow: inset 0 -2px 0 var(--brand-color, #63e);
}
.platform-tab svg {
    flex-shrink: 0;
}

/* Promo ticker container — right-aligned, scrolling area */
.topbar-ticker-inner {
    position: relative;
    overflow: hidden;
    height: var(--topbar-height);
    flex: 1 1 auto;
    min-width: 0;
}

.topbar-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.topbar-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: var(--topbar-height);
    padding: 0 10px;
    font-size: 14px;
    line-height: 18px;
    gap: 8px;
}

.topbar--ticker:hover .topbar-track {
    animation-play-state: paused;
}

/* Mobile: platform-tabs hidden via d-none d-md-flex.
   If there are also no promotions, the bar is empty — hide it entirely
   and remove the reserved space from the header. */
@media (max-width: 767.98px) {
    .topbar--ticker:not(.topbar--has-promo) { display: none; }
    body.has_campaign:not(:has(.topbar--has-promo)) header { margin-top: 0; }
}

.card.transparent{
    background: transparent;
    box-shadow: inset 0 0 0 1px hsl(0deg 0% 100% / 6%), 0 0 0 1px rgb(0 0 0 / 2%);
}

.payment_methods li {
    background: var(--card-primary-background);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
}

.card {
    display: flex;
    flex-direction: column;
    background: var(--card-primary-background);
    position: relative;
    border-radius: var(--border-radius);
}

.card-body {
    flex: 1 1 auto;
    padding: 20px;
    position: relative;
}

.inner-card-body{
    padding: 20px;
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius);
}

.card_light{
    background: linear-gradient(180deg, #4f1ad6 0%, var(--secondary-color) 100%);
    z-index: 0;
    display: block;
    filter: blur(59px);
    border-radius: 999px;
    width: 77%;
    height: 35%;
    position: absolute;
    left: -60px;
    top: -75px;
}

.card>hr {
    margin-left: 0;
    margin-right: 0
}

.card>.list-group {
    border-bottom: inherit;
    border-top: inherit
}

.card>.list-group:first-child {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius);
    border-top-width: 0
}

.card>.list-group:last-child {
    border-bottom-left-radius: var(--bs-card-inner-border-radius);
    border-bottom-right-radius: var(--bs-card-inner-border-radius);
    border-bottom-width: 0
}

.card>.card-header+.list-group,
.card>.list-group+.card-footer {
    border-top: 0
}

.chart{
    overflow: visible;
    position: relative;
}

.chart:before{
    content: "";
    background: var(--card-secondary-background);
    width: 100%;
    border-radius: 25px;
    left: 0px;
    top: calc(var(--gutter-x) * -1.5);
    border: 1px solid #ffffff0d;
    height: 70%;
    z-index: -1;
    position: absolute;
}

.transparent{
    background:transparent !important;
}

.card-title {
    color: var(--bs-card-title-color);
    margin-bottom: var(--bs-card-title-spacer-y)
}

.card-subtitle,
.card-text:last-child {
    margin-bottom: 0
}

.card-header {
    border-bottom: var(--border-width) solid var(--border-color);
    padding: 10px 20px;
}

.card-header:first-child {
    border-radius: var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius) 0 0
}

.card-footer {
    background-color: var(--bs-card-cap-bg);
    border-top: var(--border-width) solid var(--border-color);
    color: var(--bs-card-cap-color);
    padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x)
}

.card-footer:last-child {
    border-radius: 0 0 var(--bs-card-inner-border-radius) var(--bs-card-inner-border-radius)
}

.card-header-tabs .nav-link.active {
    background-color: var(--bs-card-primary-background);
    border-bottom-color: var(--bs-card-primary-background)
}

.card-img,
.card-img-bottom,
.card-img-top {
    width: 100%
}

.card-img,
.card-img-top {
    border-top-left-radius: var(--bs-card-inner-border-radius);
    border-top-right-radius: var(--bs-card-inner-border-radius)
}

.card-group>.card {
    margin-bottom: var(--bs-card-group-margin)
}

@media(min-width:576px) {
    .card-group {
        display: flex;
        flex-flow: row wrap
    }
    .card-group>.card {
        flex: 1 0 0%;
        margin-bottom: 0
    }
    .card-group>.card+.card {
        border-left: 0;
        margin-left: 0
    }
    .card-group>.card:not(:last-child) {
        border-bottom-right-radius: 0;
        border-top-right-radius: 0
    }
    .card-group>.card:not(:last-child) .card-header,
    .card-group>.card:not(:last-child) .card-img-top {
        border-top-right-radius: 0
    }
    .card-group>.card:not(:last-child) .card-footer,
    .card-group>.card:not(:last-child) .card-img-bottom {
        border-bottom-right-radius: 0
    }
    .card-group>.card:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-left-radius: 0
    }
    .card-group>.card:not(:first-child) .card-header,
    .card-group>.card:not(:first-child) .card-img-top {
        border-top-left-radius: 0
    }
    .card-group>.card:not(:first-child) .card-footer,
    .card-group>.card:not(:first-child) .card-img-bottom {
        border-bottom-left-radius: 0
    }
}

.accordion {
    --bs-accordion-color: var(--bs-body-color);
    --bs-accordion-bg: var(--kf-bg-2);
    --bs-accordion-transition: opacity 0.15s ease-in-out, box-shadow 0.15s ease-in-out, border-radius 0.15s ease;
    --bs-accordion-border-color: var(--border-color);
    --bs-accordion-border-width: var(--border-width);
    --bs-accordion-border-radius: var(--border-radius);
    --bs-accordion-inner-border-radius: calc(var(--border-radius) - var(--border-width));
    --bs-accordion-btn-padding-x: 1.25rem;
    --bs-accordion-btn-padding-y: 1rem;
    --bs-accordion-btn-color: var(--bs-body-color);
    --bs-accordion-btn-bg: var(--bs-accordion-bg);
    --bs-accordion-btn-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-icon-width: 1.25rem;
    --bs-accordion-btn-icon-transform: rotate(-180deg);
    --bs-accordion-btn-icon-transition: transform 0.2s ease-in-out;
    --bs-accordion-btn-active-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23052c65' stroke-linecap='round' stroke-linejoin='round' viewBox='0 0 16 16'%3E%3Cpath d='m2 5 6 6 6-6'/%3E%3C/svg%3E");
    --bs-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
    --bs-accordion-body-padding-x: 1.25rem;
    --bs-accordion-body-padding-y: 1rem;
    --bs-accordion-active-color: var(--main-color);
    --bs-accordion-active-bg: var(--bs-primary-bg-subtle)
}

.accordion-button {
    padding:0;
    align-items: center;
    border: 0;
    border-radius: 0;
    color: var(--bs-accordion-btn-color);
    display: flex;
    font-size: 1rem;
    overflow-anchor: none;
    position: relative;
    text-align: left;
    transition: var(--bs-accordion-transition);
    width: 100%
}

@media(prefers-reduced-motion:reduce) {
    .accordion-button {
        transition: none
    }
}

.accordion-button:not(.collapsed) {
    background-color: var(--bs-accordion-active-bg);
    box-shadow: inset 0 calc(var(--bs-accordion-border-width)*-1) 0 var(--bs-accordion-border-color);
    color: var(--bs-accordion-active-color)
}

.accordion-button:not(.collapsed):after {
    background-image: var(--bs-accordion-btn-active-icon);
    transform: var(--bs-accordion-btn-icon-transform)
}

.accordion-button:after {
    background-image: var(--bs-accordion-btn-icon);
    background-repeat: no-repeat;
    background-size: var(--bs-accordion-btn-icon-width);
    content: "";
    flex-shrink: 0;
    height: var(--bs-accordion-btn-icon-width);
    margin-left: auto;
    transition: var(--bs-accordion-btn-icon-transition);
    width: var(--bs-accordion-btn-icon-width)
}

@media(prefers-reduced-motion:reduce) {
    .accordion-button:after {
        transition: none
    }
}

.accordion-button:hover {
    z-index: 2
}

.accordion-button:focus {
    box-shadow: var(--bs-accordion-btn-focus-box-shadow);
    outline: 0;
    z-index: 3
}

.accordion-header {
    margin-bottom: 0
}

.accordion-item:first-of-type {
    border-top-left-radius: var(--bs-accordion-border-radius);
    border-top-right-radius: var(--bs-accordion-border-radius)
}

.accordion-item:first-of-type>.accordion-header .accordion-button {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius)
}

.accordion-item:not(:first-of-type) {
    border-top: 0
}

.accordion-item:last-of-type {
    border-bottom: none;
}

.accordion-item:last-of-type>.accordion-header .accordion-button.collapsed {
    border-bottom-left-radius: var(--bs-accordion-inner-border-radius);
    border-bottom-right-radius: var(--bs-accordion-inner-border-radius)
}

.accordion-item:last-of-type>.accordion-collapse {
    border-bottom-left-radius: var(--bs-accordion-border-radius);
    border-bottom-right-radius: var(--bs-accordion-border-radius)
}

.accordion-body {
    padding-top: var(--bs-accordion-body-padding-y);
}

.accordion-flush>.accordion-item {
    border-left: 0;
    border-radius: 0;
    border-right: 0
}

.accordion-flush>.accordion-item:first-child {
    border-top: 0
}

.accordion-flush>.accordion-item:last-child {
    border-bottom: 0
}

.accordion-flush>.accordion-item>.accordion-collapse,
.accordion-flush>.accordion-item>.accordion-header .accordion-button,
.accordion-flush>.accordion-item>.accordion-header .accordion-button.collapsed {
    border-radius: 0
}

.breadcrumb {
    --bs-breadcrumb-padding-x: 0;
    --bs-breadcrumb-padding-y: 0;
    --bs-breadcrumb-margin-bottom: 1rem;
    --bs-breadcrumb-bg: ;
    --bs-breadcrumb-border-radius: ;
    --bs-breadcrumb-divider-color: var(--text-secondary-color);
    --bs-breadcrumb-item-padding-x: 0.5rem;
    --bs-breadcrumb-item-active-color: var(--text-secondary-color);
    background-color: var(--bs-breadcrumb-bg);
    border-radius: var(--bs-breadcrumb-border-radius);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--bs-breadcrumb-font-size);
    list-style: none;
    margin-bottom: var(--bs-breadcrumb-margin-bottom);
    padding: var(--bs-breadcrumb-padding-y) var(--bs-breadcrumb-padding-x)
}

.breadcrumb-item.active {
    color: var(--main-color);
}

.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--link-color);
    --bs-pagination-bg: var(--kf-bg-2);
    --bs-pagination-border-width: var(--border-width);
    --bs-pagination-border-color: var(--border-color);
    --bs-pagination-border-radius: var(--border-radius);
    --bs-pagination-hover-color: var(--bs-link-hover-color);
    --bs-pagination-hover-bg: var(--bs-tertiary-bg);
    --bs-pagination-hover-border-color: var(--border-color);
    --bs-pagination-focus-color: var(--bs-link-hover-color);
    --bs-pagination-focus-bg: var(--text-secondary-bg);
    --bs-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
    --bs-pagination-active-color: #fff;
    --bs-pagination-active-bg: #0d6efd;
    --bs-pagination-active-border-color: #0d6efd;
    --bs-pagination-disabled-color: var(--text-secondary-color);
    --bs-pagination-disabled-bg: var(--text-secondary-bg);
    --bs-pagination-disabled-border-color: var(--border-color);
    display: flex;
    list-style: none;
    padding-left: 0
}

.active>.page-link,
.page-link.active {
    background-color: var(--bs-pagination-active-bg);
    border-color: var(--bs-pagination-active-border-color);
    color: var(--bs-pagination-active-color);
    z-index: 3
}

.disabled>.page-link,
.page-link.disabled {
    background-color: var(--bs-pagination-disabled-bg);
    border-color: var(--bs-pagination-disabled-border-color);
    color: var(--bs-pagination-disabled-color);
    pointer-events: none
}

.badge {
    display: inline-flex;
    --badge-border-width: 1px;
    background: var(--badge-background);
    color: var(--badge-color);
    font-size: 15px;
    line-height: 17px;
    border-radius: 6px;
    position: relative;
    align-items: center;
    opacity: 1;
    gap: 10px;
    padding: 3px 10px;
}
.badge.sm .badge-inner{
    line-height: 16px;
    font-size: 13px;
}
.badge-inner {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 18px;
    font-size: 16px;
}
.badge-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
}
.badge.text-bg-classic {
    --badge-background: linear-gradient(0.07383128568086761deg, rgba(79, 26, 214, .08) 0%, rgba(153, 153, 153, .1) 100%);
    --badge-color:#fff;
    --badge-border-color: rgba(255, 255, 255, .05);
}
.badge.text-bg-danger {
    --badge-background: rgba(var(--bs-danger-rgb), .15);
    --badge-color: var(--bs-danger);
    --badge-border-color: rgba(255, 255, 255, .05);
}
.badge.text-bg-primary {
    --badge-background: rgb(46 47 49 / 15%) !important;
   --badge-color: #876bd7 !important;
   --badge-border-color: rgba(255, 255, 255, .05);
}
.badge.text-bg-success {
   --badge-background: var(--bs-success-rgb) !important;
   --badge-color: var(--bs-success) !important;
   --badge-border-color: rgba(255, 255, 255, .05);
}

.badge.text-bg-warning {
   --badge-background: var(--bs-warning-rgb) !important;
   --badge-color: var(--bs-warning) !important;
   --badge-border-color: rgba(255, 255, 255, .05);
}

.badge.text-bg-info {
   --badge-background: rgba(var(--bs-info-rgb), .15) !important;
   --badge-color: var(--bs-info) !important;
   --badge-border-color: rgba(255, 255, 255, .05);
}
.badge:empty {
    display: none
}

.alert {
    --bs-alert-bg: transparent;
    --bs-alert-padding-x: 1rem;
    --bs-alert-padding-y: 1rem;
    --bs-alert-margin-bottom: 1rem;
    --bs-alert-color: inherit;
    --bs-alert-border-color: transparent;
    --bs-alert-border: var(--border-width) solid var(--bs-alert-border-color);
    --bs-alert-border-radius: var(--border-radius);
    --bs-alert-link-color: inherit;
    background-color: var(--bs-alert-bg);
    border: var(--border-width) solid var(--border-color);
    color: var(--bs-alert-color);
    border-radius: var(--bs-alert-border-radius);
    margin-bottom: var(--bs-alert-margin-bottom);
    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
    position: relative;
}

.alert-dismissible .btn-close {
    padding: 1.25rem 1rem;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 2
}

.alert-success {
    --bs-alert-color: var(--bs-success-text-emphasis);
    --bs-alert-bg: var(--bs-success-bg-subtle);
    --bs-alert-border-color: var(--bs-success-border-subtle);
    --bs-alert-link-color: var(--bs-success-text-emphasis)
}

.alert-info {
    --bs-alert-color: var(--bs-info-text-emphasis);
    --bs-alert-bg: var(--bs-info-bg-subtle);
    --bs-alert-border-color: var(--bs-info-border-subtle);
    --bs-alert-link-color: var(--bs-info-text-emphasis)
}

.alert-warning {
    --bs-alert-color: var(--bs-warning-text-emphasis);
    --bs-alert-bg: var(--bs-warning-bg-subtle);
    --bs-alert-border-color: var(--bs-warning-border-subtle);
    --bs-alert-link-color: var(--bs-warning-text-emphasis)
}

.alert-danger {
    --bs-alert-color: var(--bs-danger-text-emphasis);
    --bs-alert-bg: var(--bs-danger-bg-subtle);
    --bs-alert-border-color: var(--bs-danger-border-subtle);
    --bs-alert-link-color: var(--bs-danger-text-emphasis)
}

.legend-color-box{
    margin-right: 10px;
    background-color: rgb(88, 64, 239);
    width: 8px;
    height: 8px;
    border-radius: 100%;
}

.expr{
        font-size: 74%;
    opacity: 0.4;
}

.progress,
.progress-stacked {
    background-color: var(--card-secondary-background);
    border-color: 1px solid var(--border-color);
    border-radius: var(--border-radius-lg);
    display: flex;
    height: 16px;
    overflow: visible;
}

.border-radius{
    border-radius: 20px;
}

.progress-bar {
    display: flex;
        justify-content: center;
        text-align: center;
        white-space: nowrap;
        background: var(--main-color);
        border-radius: var(--border-radius-sm);
        font-size: 16px;
        height: 10px;
        margin-left: 3px;
        margin-right: 3px;
        margin-top: 3px;
        align-items: center;
        color: var(--body-bg);
}

@media(prefers-reduced-motion:reduce) {
    .progress-bar {
        transition: none
    }
}

.progress-stacked>.progress {
    overflow: visible
}

.progress-stacked>.progress>.progress-bar {
    width: 100%
}

.list-group {
    --bs-list-group-color: var(--bs-body-color);
    --bs-list-group-bg: var(--kf-bg-2);
    --bs-list-group-border-color: var(--border-color);
    --bs-list-group-border-width: var(--border-width);
    --bs-list-group-border-radius: var(--border-radius);
    --bs-list-group-item-padding-x: 1rem;
    --bs-list-group-item-padding-y: 0.5rem;
    --bs-list-group-action-color: var(--text-secondary-color);
    --bs-list-group-action-hover-color: var(--bs-emphasis-color);
    --bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
    --bs-list-group-action-active-color: var(--bs-body-color);
    --bs-list-group-action-active-bg: var(--text-secondary-bg);
    --bs-list-group-disabled-color: var(--text-secondary-color);
    --bs-list-group-disabled-bg: var(--kf-bg-2);
    --bs-list-group-active-color: #fff;
    --bs-list-group-active-bg: #0d6efd;
    --bs-list-group-active-border-color: #0d6efd;
    border-radius: var(--bs-list-group-border-radius);
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    padding-left: 0
}

.list-group-numbered {
    counter-reset: section;
    list-style-type: none
}

.list-group-numbered>.list-group-item:before {
    content: counters(section, ".") ". ";
    counter-increment: section
}

.list-group-item {
    background-color: var(--card-primary-background);
    border: 1px solid var(--border-color);
    display: block;
    padding: 12px 15px;
    position: relative;
    text-decoration: none;
}

.list-group-item:first-child {
    border-top-left-radius: inherit;
    border-top-right-radius: inherit
}

.list-group-item:last-child {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit
}

.list-group-item.disabled,
.list-group-item:disabled {
    background-color: var(--bs-list-group-disabled-bg);
    color: var(--bs-list-group-disabled-color);
    pointer-events: none
}

.list-group-item.active {
    background-color: var(--bs-list-group-active-bg);
    border-color: var(--bs-list-group-active-border-color);
    color: var(--bs-list-group-active-color);
    z-index: 2
}

.list-group-item+.list-group-item {
    border-top-width: 0
}

.list-group-item+.list-group-item.active {
    border-top-width: var(--bs-list-group-border-width);
    margin-top: calc(var(--bs-list-group-border-width)*-1)
}

.list-group-horizontal>.list-group-item:first-child:not(:last-child) {
    border-bottom-left-radius: var(--bs-list-group-border-radius);
    border-top-right-radius: 0
}

.list-group-horizontal>.list-group-item:last-child:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-right-radius: var(--bs-list-group-border-radius)
}

.list-group-horizontal>.list-group-item.active {
    margin-top: 0
}

.list-group-horizontal>.list-group-item+.list-group-item {
    border-left-width: 0;
    border-top-width: var(--bs-list-group-border-width)
}

.list-group-horizontal>.list-group-item+.list-group-item.active {
    border-left-width: var(--bs-list-group-border-width);
    margin-left: calc(var(--bs-list-group-border-width)*-1)
}

@media(min-width:576px) {
    .list-group-horizontal-sm {
        flex-direction: row
    }
    .list-group-horizontal-sm>.list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }
    .list-group-horizontal-sm>.list-group-item:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-right-radius: var(--bs-list-group-border-radius)
    }
    .list-group-horizontal-sm>.list-group-item.active {
        margin-top: 0
    }
    .list-group-horizontal-sm>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: var(--bs-list-group-border-width)
    }
    .list-group-horizontal-sm>.list-group-item+.list-group-item.active {
        border-left-width: var(--bs-list-group-border-width);
        margin-left: calc(var(--bs-list-group-border-width)*-1)
    }
}

@media(min-width:768px) {
    .list-group-horizontal-md {
        flex-direction: row
    }
    .list-group-horizontal-md>.list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }
    .list-group-horizontal-md>.list-group-item:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-right-radius: var(--bs-list-group-border-radius)
    }
    .list-group-horizontal-md>.list-group-item.active {
        margin-top: 0
    }
    .list-group-horizontal-md>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: var(--bs-list-group-border-width)
    }
    .list-group-horizontal-md>.list-group-item+.list-group-item.active {
        border-left-width: var(--bs-list-group-border-width);
        margin-left: calc(var(--bs-list-group-border-width)*-1)
    }
}

@media(min-width:992px) {
    .list-group-horizontal-lg {
        flex-direction: row
    }
    .list-group-horizontal-lg>.list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }
    .list-group-horizontal-lg>.list-group-item:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-right-radius: var(--bs-list-group-border-radius)
    }
    .list-group-horizontal-lg>.list-group-item.active {
        margin-top: 0
    }
    .list-group-horizontal-lg>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: var(--bs-list-group-border-width)
    }
    .list-group-horizontal-lg>.list-group-item+.list-group-item.active {
        border-left-width: var(--bs-list-group-border-width);
        margin-left: calc(var(--bs-list-group-border-width)*-1)
    }
}

@media(min-width:1200px) {
    .list-group-horizontal-xl {
        flex-direction: row
    }
    .list-group-horizontal-xl>.list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }
    .list-group-horizontal-xl>.list-group-item:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-right-radius: var(--bs-list-group-border-radius)
    }
    .list-group-horizontal-xl>.list-group-item.active {
        margin-top: 0
    }
    .list-group-horizontal-xl>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: var(--bs-list-group-border-width)
    }
    .list-group-horizontal-xl>.list-group-item+.list-group-item.active {
        border-left-width: var(--bs-list-group-border-width);
        margin-left: calc(var(--bs-list-group-border-width)*-1)
    }
}

@media(min-width:1400px) {
    .list-group-horizontal-xxl {
        flex-direction: row
    }
    .list-group-horizontal-xxl>.list-group-item:first-child:not(:last-child) {
        border-bottom-left-radius: var(--bs-list-group-border-radius);
        border-top-right-radius: 0
    }
    .list-group-horizontal-xxl>.list-group-item:last-child:not(:first-child) {
        border-bottom-left-radius: 0;
        border-top-right-radius: var(--bs-list-group-border-radius)
    }
    .list-group-horizontal-xxl>.list-group-item.active {
        margin-top: 0
    }
    .list-group-horizontal-xxl>.list-group-item+.list-group-item {
        border-left-width: 0;
        border-top-width: var(--bs-list-group-border-width)
    }
    .list-group-horizontal-xxl>.list-group-item+.list-group-item.active {
        border-left-width: var(--bs-list-group-border-width);
        margin-left: calc(var(--bs-list-group-border-width)*-1)
    }
}

.list-group-flush {
    border-radius: 0
}

.list-group-flush>.list-group-item {
    border-width: 0 0 var(--bs-list-group-border-width)
}

.list-group-flush>.list-group-item:last-child {
    border-bottom-width: 0
}

.btn-close {
    --bs-btn-close-bg: url(data:image/svg+xml;charset=utf-8;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJrYXRtYW5fMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiCgkgdmlld0JveD0iMCAwIDE2IDE2IiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCAxNiAxNjsiIHhtbDpzcGFjZT0icHJlc2VydmUiPgo8c3R5bGUgdHlwZT0idGV4dC9jc3MiPgoJLnN0MHtmaWxsOiNGRkZGRkY7fQo8L3N0eWxlPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMC4zLDAuM2MwLjQtMC40LDEtMC40LDEuNCwwTDgsNi42bDYuMy02LjNjMC40LTAuNCwxLTAuNCwxLjQsMGMwLjQsMC40LDAuNCwxLDAsMS40YzAsMCwwLDAsMCwwTDkuNCw4CglsNi4zLDYuM2MwLjQsMC40LDAuNCwxLDAsMS40Yy0wLjQsMC40LTEsMC40LTEuNCwwTDgsOS40bC02LjMsNi4zYy0wLjQsMC40LTEsMC40LTEuNCwwYy0wLjQtMC40LTAuNC0xLDAtMS40TDYuNiw4TDAuMywxLjcKCUMtMC4xLDEuMy0wLjEsMC43LDAuMywwLjMiLz4KPC9zdmc+);
    --bs-btn-close-hover-opacity: 0.75;
    --bs-btn-close-focus-shadow: 0 0 0 0.25rem rgba(13, 110, 253, .25);
    --bs-btn-close-focus-opacity: 1;
    --bs-btn-close-disabled-opacity: 0.25;
    background: transparent var(--bs-btn-close-bg) center / 1em auto no-repeat;
    border: 0;
    border-radius: .375rem;
    box-sizing: content-box;
    height: 1em;
    opacity: var(--bs-btn-close-opacity);
    padding: .25em;
    width: 1em;
}

.btn-close,
.btn-close:hover {
    color: var(--bs-btn-close-color)
}

.btn-close:hover {
    opacity: var(--bs-btn-close-hover-opacity);
    text-decoration: none
}

.btn-close:focus {
    box-shadow: var(--bs-btn-close-focus-shadow);
    opacity: var(--bs-btn-close-focus-opacity);
    outline: 0
}

.btn-close.disabled,
.btn-close:disabled {
    opacity: var(--bs-btn-close-disabled-opacity);
    pointer-events: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.toast {
    --bs-toast-padding-x: 0.75rem;
    --bs-toast-padding-y: 0.5rem;
    border-radius: var(--border-radius);
    font-size: 14px;
    max-width: 100%;
    pointer-events: auto;
    width: 350px;
    --bs-card-cap-padding-y: 1rem;
    user-select: none;
    background: linear-gradient(0deg, var(--card-primary-background) 0%, var(--card-secondary-background) 100%);
    box-shadow: 0 7px 20px 5px var(--border-color);
    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
    transition: 0.5s all;
}

.toast.showing {
    opacity: 0
}

.toast:not(.show) {
    display: none
}

.toast-container {
    --bs-toast-zindex: 1090;
    max-width: 100%;
    pointer-events: none;
    position: absolute;
    width: -moz-max-content;
    width: max-content;
    z-index: 9999999999999999
}

.toast-container>:not(:last-child) {
    margin-bottom: var(--bs-toast-spacing)
}

.toast-header {
    align-items: center;
    background-clip: padding-box;
    background-color: var(--bs-toast-header-bg);
    border-bottom: var(--bs-toast-border-width) solid var(--bs-toast-header-border-color);
    border-top-left-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
    border-top-right-radius: calc(var(--bs-toast-border-radius) - var(--bs-toast-border-width));
    color: var(--bs-toast-header-color);
    display: flex;
    padding: var(--bs-toast-padding-y) var(--bs-toast-padding-x)
}

.toast-header .btn-close {
    margin-left: var(--bs-toast-padding-x);
    margin-right: calc(var(--bs-toast-padding-x)*-.5)
}

.toast-body {
    padding: var(--bs-toast-padding-x);
    word-wrap: break-word
}

.modal {
    display: none;
    height: 100%;
    left: 0;
    outline: 0;
    overflow-x: hidden;
    overflow-y: auto;
    position: fixed;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 0;
    width: 100%;
    z-index: 999999999999;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    transform: translate(0,0);
    transition: none; /* Bootstrap default'u iptal */
}

.modal.show{
    display:flex !important;
    animation: modalScale 0.3s ease-out;
}

.modal-dialog {
    margin: var(--bs-modal-margin);
    pointer-events: none;
    position: relative;
    width: 500px;
}

.modal-dialog img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--border-radius);
}

.modal.fade .modal-dialog {
    transform: translateY(-50px);
    transition: transform .3s ease-out
}

@media(prefers-reduced-motion:reduce) {
    .modal.fade .modal-dialog {
        transition: none
    }
}

.modal.show .modal-dialog {
    transform: none
}

.modal.modal-static .modal-dialog {
    transform: scale(1.02)
}

.modal-dialog-scrollable {
    height: calc(100% - var(--bs-modal-margin)*2)
}

.modal-dialog-scrollable .modal-content {
    max-height: 100%;
    overflow: hidden
}

.modal-dialog-scrollable .modal-body {
    overflow-y: auto
}

.modal-dialog-centered {
    align-items: center;
    display: flex;
    min-height: calc(100% - var(--bs-modal-margin)*2)
}

.modal-content {
    background-clip: padding-box;
    background: var(--card-primary-background);
    border-radius: 8px;
    color: var(--bs-modal-color);
    display: flex;
    flex-direction: column;
    outline: 0;
    pointer-events: auto;
    position: relative;
    width: 100%;
    border: var(--border-width) solid var(--border-color);
    backdrop-filter: blur(var(--card-blur));
    -webkit-backdrop-filter: blur(var(--card-blur));
}

.modal-backdrop {
    --bs-backdrop-zindex: 1050;
    --bs-backdrop-bg: #000;
    --bs-backdrop-opacity: 0.5;
    background-color: var(--bs-backdrop-bg);
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: var(--bs-backdrop-zindex)
}

.modal-backdrop.fade {
    opacity: 0
}

.modal-backdrop.show {
    opacity: var(--bs-backdrop-opacity)
}

.modal-header {
    align-items: center;
    font-size: 14px;
    display: flex;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
    background: var(--card-secondary-background);
    justify-content: space-between;
    padding: var(--modal-padding);
}

.modal-header .btn-close {
    margin: calc(var(--bs-modal-header-padding-y)*-.5) calc(var(--bs-modal-header-padding-x)*-.5) calc(var(--bs-modal-header-padding-y)*-.5) auto;
    padding: calc(var(--bs-modal-header-padding-y)*.5) calc(var(--bs-modal-header-padding-x)*.5)
}

.modal-title {
    line-height: var(--bs-modal-title-line-height);
    margin-bottom: 0
}

.modal-body {
    flex: 1 1 auto;
    padding: var(--modal-padding);
    position: relative;
}

.modal-footer {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    justify-content: flex-end;
    padding: var(--modal-padding);
    border-top: 1px solid var(--border-color);
    gap: 10px;
}

.modal-footer>* {
    margin: calc(var(--bs-modal-footer-gap)*.5)
}

@media(min-width:992px) {
    .modal-lg,
    .modal-xl {
        --bs-modal-width: 800px
    }
}

@media(min-width:1200px) {
    .modal-xl .modal-dialog {
        width: 1140px;
    }
}

.modal-fullscreen .modal-content {
    border: 0;
    border-radius: 0;
    height: 100%
}

.modal-fullscreen .modal-footer,
.modal-fullscreen .modal-header {
    border-radius: 0
}

.modal-fullscreen .modal-body {
    overflow-y: auto
}

@media(max-width:575.98px) {
     .pricing_sidebar{
        display:none;
    }
    .modal-fullscreen-sm-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw
    }
    .modal-fullscreen-sm-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%
    }
    .modal-fullscreen-sm-down .modal-footer,
    .modal-fullscreen-sm-down .modal-header {
        border-radius: 0
    }
    .modal-fullscreen-sm-down .modal-body {
        overflow-y: auto
    }
}

@media(max-width:767.98px) {
    .modal-fullscreen-md-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw
    }
    .modal-fullscreen-md-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%
    }
    .modal-fullscreen-md-down .modal-footer,
    .modal-fullscreen-md-down .modal-header {
        border-radius: 0
    }
    .modal-fullscreen-md-down .modal-body {
        overflow-y: auto
    }
}

@media(max-width:991.98px) {
    .modal-fullscreen-lg-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw
    }
    .modal-fullscreen-lg-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%
    }
    .modal-fullscreen-lg-down .modal-footer,
    .modal-fullscreen-lg-down .modal-header {
        border-radius: 0
    }
    .modal-fullscreen-lg-down .modal-body {
        overflow-y: auto
    }
}

@media(max-width:1199.98px) {
    .modal-fullscreen-xl-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw
    }
    .modal-fullscreen-xl-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%
    }
    .modal-fullscreen-xl-down .modal-footer,
    .modal-fullscreen-xl-down .modal-header {
        border-radius: 0
    }
    .modal-fullscreen-xl-down .modal-body {
        overflow-y: auto
    }
}

@media(max-width:1399.98px) {
    .modal-fullscreen-xxl-down {
        height: 100%;
        margin: 0;
        max-width: none;
        width: 100vw
    }
    .modal-fullscreen-xxl-down .modal-content {
        border: 0;
        border-radius: 0;
        height: 100%
    }
    .modal-fullscreen-xxl-down .modal-footer,
    .modal-fullscreen-xxl-down .modal-header {
        border-radius: 0
    }
    .modal-fullscreen-xxl-down .modal-body {
        overflow-y: auto
    }
}

.tooltip {
    --bs-tooltip-zindex: 1080;
    --bs-tooltip-max-width: 200px;
    --bs-tooltip-padding-x: 0.5rem;
    --bs-tooltip-padding-y: 0.25rem;
    --bs-tooltip-margin: ;
    --bs-tooltip-font-size: 0.875rem;
    --bs-tooltip-color: var(--kf-bg-2);
    --bs-tooltip-bg: var(--bs-emphasis-color);
    --bs-tooltip-border-radius: var(--border-radius);
    --bs-tooltip-opacity: 0.9;
    --bs-tooltip-arrow-width: 0.8rem;
    --bs-tooltip-arrow-height: 0.4rem;
    display: block;
    font-family: var(--bs-font-sans-serif);
    font-size: var(--bs-tooltip-font-size);
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.5;
    margin: var(--bs-tooltip-margin);
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    z-index: var(--bs-tooltip-zindex);
    word-wrap: break-word;
    opacity: 0
}

.tooltip.show {
    opacity: var(--bs-tooltip-opacity)
}

.tooltip .tooltip-arrow {
    display: block;
    height: var(--bs-tooltip-arrow-height);
    width: var(--bs-tooltip-arrow-width)
}

.tooltip .tooltip-arrow:before {
    border-color: transparent;
    border-style: solid;
    content: "";
    position: absolute
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow,
.bs-tooltip-top .tooltip-arrow {
    bottom: calc(var(--bs-tooltip-arrow-height)*-1)
}

.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow:before,
.bs-tooltip-top .tooltip-arrow:before {
    border-top-color: var(--bs-tooltip-bg);
    border-width: var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width)*.5) 0;
    top: -1px
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow,
.bs-tooltip-end .tooltip-arrow {
    height: var(--bs-tooltip-arrow-width);
    left: calc(var(--bs-tooltip-arrow-height)*-1);
    width: var(--bs-tooltip-arrow-height)
}

.bs-tooltip-auto[data-popper-placement^=right] .tooltip-arrow:before,
.bs-tooltip-end .tooltip-arrow:before {
    border-right-color: var(--bs-tooltip-bg);
    border-width: calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height) calc(var(--bs-tooltip-arrow-width)*.5) 0;
    right: -1px
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow,
.bs-tooltip-bottom .tooltip-arrow {
    top: calc(var(--bs-tooltip-arrow-height)*-1)
}

.bs-tooltip-auto[data-popper-placement^=bottom] .tooltip-arrow:before,
.bs-tooltip-bottom .tooltip-arrow:before {
    border-bottom-color: var(--bs-tooltip-bg);
    border-width: 0 calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height);
    bottom: -1px
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow,
.bs-tooltip-start .tooltip-arrow {
    height: var(--bs-tooltip-arrow-width);
    right: calc(var(--bs-tooltip-arrow-height)*-1);
    width: var(--bs-tooltip-arrow-height)
}

.bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow:before,
.bs-tooltip-start .tooltip-arrow:before {
    border-left-color: var(--bs-tooltip-bg);
    border-width: calc(var(--bs-tooltip-arrow-width)*.5) 0 calc(var(--bs-tooltip-arrow-width)*.5) var(--bs-tooltip-arrow-height);
    left: -1px
}

.tooltip-inner {
    background-color: var(--bs-tooltip-bg);
    border-radius: var(--bs-tooltip-border-radius);
    color: var(--bs-tooltip-color);
    max-width: var(--bs-tooltip-max-width);
    padding: var(--bs-tooltip-padding-y) var(--bs-tooltip-padding-x);
    text-align: center
}

.popover {
    --bs-popover-zindex: 1070;
    --bs-popover-max-width: 276px;
    --bs-popover-font-size: 0.875rem;
    --bs-popover-bg: var(--kf-bg-2);
    --bs-popover-border-width: var(--border-width);
    --bs-popover-border-color: var(--border-color-translucent);
    --bs-popover-border-radius: var(--border-radius-lg);
    --bs-popover-inner-border-radius: calc(var(--border-radius-lg) - var(--border-width));
    --bs-popover-box-shadow: var(--bs-box-shadow);
    --bs-popover-header-padding-x: 1rem;
    --bs-popover-header-padding-y: 0.5rem;
    --bs-popover-header-font-size: 1rem;
    --bs-popover-header-color: inherit;
    --bs-popover-header-bg: var(--text-secondary-bg);
    --bs-popover-body-padding-x: 1rem;
    --bs-popover-body-padding-y: 1rem;
    --bs-popover-body-color: var(--bs-body-color);
    --bs-popover-arrow-width: 1rem;
    --bs-popover-arrow-height: 0.5rem;
    --bs-popover-arrow-border: var(--bs-popover-border-color);
    display: block;
    font-family: var(--bs-font-sans-serif);
    font-size: var(--bs-popover-font-size);
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.5;
    max-width: var(--bs-popover-max-width);
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    z-index: var(--bs-popover-zindex);
    word-wrap: break-word;
    background-clip: padding-box;
    background-color: var(--bs-popover-bg);
    border: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-radius: var(--bs-popover-border-radius)
}

.popover .popover-arrow {
    display: block;
    height: var(--bs-popover-arrow-height);
    width: var(--bs-popover-arrow-width)
}

.popover .popover-arrow:after,
.popover .popover-arrow:before {
    border: 0 solid transparent;
    content: "";
    display: block;
    position: absolute
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow,
.bs-popover-top>.popover-arrow {
    bottom: calc((var(--bs-popover-arrow-height))*-1 - var(--bs-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after,
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:before,
.bs-popover-top>.popover-arrow:after,
.bs-popover-top>.popover-arrow:before {
    border-width: var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width)*.5) 0
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:before,
.bs-popover-top>.popover-arrow:before {
    border-top-color: var(--bs-popover-arrow-border);
    bottom: 0
}

.bs-popover-auto[data-popper-placement^=top]>.popover-arrow:after,
.bs-popover-top>.popover-arrow:after {
    border-top-color: var(--bs-popover-bg);
    bottom: var(--bs-popover-border-width)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow,
.bs-popover-end>.popover-arrow {
    height: var(--bs-popover-arrow-width);
    left: calc((var(--bs-popover-arrow-height))*-1 - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after,
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:before,
.bs-popover-end>.popover-arrow:after,
.bs-popover-end>.popover-arrow:before {
    border-width: calc(var(--bs-popover-arrow-width)*.5) var(--bs-popover-arrow-height) calc(var(--bs-popover-arrow-width)*.5) 0
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:before,
.bs-popover-end>.popover-arrow:before {
    border-right-color: var(--bs-popover-arrow-border);
    left: 0
}

.bs-popover-auto[data-popper-placement^=right]>.popover-arrow:after,
.bs-popover-end>.popover-arrow:after {
    border-right-color: var(--bs-popover-bg);
    left: var(--bs-popover-border-width)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow,
.bs-popover-bottom>.popover-arrow {
    top: calc((var(--bs-popover-arrow-height))*-1 - var(--bs-popover-border-width))
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after,
.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:before,
.bs-popover-bottom>.popover-arrow:after,
.bs-popover-bottom>.popover-arrow:before {
    border-width: 0 calc(var(--bs-popover-arrow-width)*.5) var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:before,
.bs-popover-bottom>.popover-arrow:before {
    border-bottom-color: var(--bs-popover-arrow-border);
    top: 0
}

.bs-popover-auto[data-popper-placement^=bottom]>.popover-arrow:after,
.bs-popover-bottom>.popover-arrow:after {
    border-bottom-color: var(--bs-popover-bg);
    top: var(--bs-popover-border-width)
}

.bs-popover-auto[data-popper-placement^=bottom] .popover-header:before,
.bs-popover-bottom .popover-header:before {
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-header-bg);
    content: "";
    display: block;
    left: 50%;
    margin-left: calc(var(--bs-popover-arrow-width)*-.5);
    position: absolute;
    top: 0;
    width: var(--bs-popover-arrow-width)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow,
.bs-popover-start>.popover-arrow {
    height: var(--bs-popover-arrow-width);
    right: calc((var(--bs-popover-arrow-height))*-1 - var(--bs-popover-border-width));
    width: var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after,
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:before,
.bs-popover-start>.popover-arrow:after,
.bs-popover-start>.popover-arrow:before {
    border-width: calc(var(--bs-popover-arrow-width)*.5) 0 calc(var(--bs-popover-arrow-width)*.5) var(--bs-popover-arrow-height)
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:before,
.bs-popover-start>.popover-arrow:before {
    border-left-color: var(--bs-popover-arrow-border);
    right: 0
}

.bs-popover-auto[data-popper-placement^=left]>.popover-arrow:after,
.bs-popover-start>.popover-arrow:after {
    border-left-color: var(--bs-popover-bg);
    right: var(--bs-popover-border-width)
}

.popover-header {
    border-bottom: var(--bs-popover-border-width) solid var(--bs-popover-border-color);
    border-top-left-radius: var(--bs-popover-inner-border-radius);
    border-top-right-radius: var(--bs-popover-inner-border-radius);
    color: var(--bs-popover-header-color);
    font-size: var(--bs-popover-header-font-size);
    margin-bottom: 0;
    padding: var(--bs-popover-header-padding-y) var(--bs-popover-header-padding-x)
}

.popover-header:empty {
    display: none
}

.popover-body {
    color: var(--bs-popover-body-color);
    padding: var(--bs-popover-body-padding-y) var(--bs-popover-body-padding-x)
}

.carousel {
    position: relative
}

.carousel.pointer-event {
    touch-action: pan-y
}

.carousel-item {
    backface-visibility: hidden;
    display: none;
    float: left;
    margin-right: -100%;
    position: relative;
    transition: transform .6s ease-in-out;
    width: 100%
}

@media(prefers-reduced-motion:reduce) {
    .carousel-item {
        transition: none
    }
}

.carousel-item-next,
.carousel-item-prev,
.carousel-item.active {
    display: block
}

.active.carousel-item-end,
.carousel-item-next:not(.carousel-item-start) {
    transform: translateX(100%)
}

.active.carousel-item-start,
.carousel-item-prev:not(.carousel-item-end) {
    transform: translateX(-100%)
}

.carousel-fade .carousel-item {
    opacity: 0;
    transform: none;
    transition-property: opacity
}

.carousel-fade .carousel-item-next.carousel-item-start,
.carousel-fade .carousel-item-prev.carousel-item-end,
.carousel-fade .carousel-item.active {
    opacity: 1;
    z-index: 1
}

.carousel-fade .active.carousel-item-end,
.carousel-fade .active.carousel-item-start {
    opacity: 0;
    transition: opacity 0s .6s;
    z-index: 0
}

@media(prefers-reduced-motion:reduce) {
    .carousel-fade .active.carousel-item-end,
    .carousel-fade .active.carousel-item-start {
        transition: none
    }
}

.carousel-indicators {
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    margin-bottom: 1rem;
    margin-left: 15%;
    margin-right: 15%;
    padding: 0;
    position: absolute;
    right: 0;
    z-index: 2
}

.carousel-indicators [data-bs-target] {
    background-clip: padding-box;
    background-color: #fff;
    border: 0;
    border-bottom: 10px solid transparent;
    border-top: 10px solid transparent;
    box-sizing: content-box;
    cursor: pointer;
    flex: 0 1 auto;
    height: 3px;
    margin-left: 3px;
    margin-right: 3px;
    opacity: .5;
    padding: 0;
    text-indent: -999px;
    transition: opacity .6s ease;
    width: 30px
}

@media(prefers-reduced-motion:reduce) {
    .carousel-indicators [data-bs-target] {
        transition: none
    }
}

.carousel-indicators .active {
    opacity: 1
}

.spinner-border,
.spinner-grow {
    animation: var(--bs-spinner-animation-speed) linear infinite var(--bs-spinner-animation-name);
    border-radius: 50%;
    display: inline-block;
    height: var(--bs-spinner-height);
    vertical-align: var(--bs-spinner-vertical-align);
    width: var(--bs-spinner-width)
}

.spinner-border {
    --bs-spinner-width: 2rem;
    --bs-spinner-height: 2rem;
    --bs-spinner-vertical-align: -0.125em;
    --bs-spinner-border-width: 0.25em;
    --bs-spinner-animation-speed: 2.75s;
    --bs-spinner-animation-name: spinner-border;
    border-right-color: currentcolor;
    border: var(--bs-spinner-border-width) solid;
    border-right: var(--bs-spinner-border-width) solid transparent
}

.spinner-border-sm {
    --bs-spinner-width: 1rem;
    --bs-spinner-height: 1rem;
    --bs-spinner-border-width: 0.2em
}

.spinner-grow {
    --bs-spinner-width: 15px;
    --bs-spinner-height: 15px;
    --bs-spinner-vertical-align: -0.125em;
    --bs-spinner-animation-speed: 1.3s;
    --bs-spinner-animation-name: spinner-grow;
    background-color: currentcolor;
    opacity: 0
}

@media(prefers-reduced-motion:reduce) {
    .spinner-border,
    .spinner-grow {
        --bs-spinner-animation-speed: 1.5s
    }
}

.offcanvas,
.offcanvas-lg,
.offcanvas-md,
.offcanvas-sm,
.offcanvas-xl,
.offcanvas-xxl {
    --bs-offcanvas-zindex: 1045;
    --bs-offcanvas-width: 400px;
    --bs-offcanvas-height: 30vh;
    --bs-offcanvas-padding-x: 1rem;
    --bs-offcanvas-padding-y: 1rem;
    --bs-offcanvas-color: var(--bs-body-color);
    --bs-offcanvas-bg: var(--body-bg);
    --bs-offcanvas-border-width: var(--border-width);
    --bs-offcanvas-border-color: var(--border-color-translucent);
    --bs-offcanvas-box-shadow: var(--bs-box-shadow-sm);
    --bs-offcanvas-transition: transform 0.3s ease-in-out;
    --bs-offcanvas-title-line-height: 1.5
}

@media(max-width:575.98px) {
    .offcanvas-sm.offcanvas-start {
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-sm.offcanvas-end {
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        right: 0;
        top: 0;
        transform: translateX(100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-sm.offcanvas-top {
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        top: 0;
        transform: translateY(-100%)
    }
    .offcanvas-sm.offcanvas-bottom,
    .offcanvas-sm.offcanvas-top {
        height: var(--bs-offcanvas-height);
        left: 0;
        max-height: 100%;
        right: 0
    }
    .offcanvas-sm.offcanvas-bottom {
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }
    .offcanvas-sm.show:not(.hiding),
    .offcanvas-sm.showing {
        transform: none
    }
    .offcanvas-sm.hiding,
    .offcanvas-sm.show,
    .offcanvas-sm.showing {
        visibility: visible
    }
}

@media(min-width:576px) {
    .offcanvas-sm {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }
    .offcanvas-sm .offcanvas-header {
        display: none
    }
    .offcanvas-sm .offcanvas-body {
        background-color: transparent !important;
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(max-width:767.98px) {
    .offcanvas-md.offcanvas-start {
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-md.offcanvas-end {
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        right: 0;
        top: 0;
        transform: translateX(100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-md.offcanvas-top {
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        top: 0;
        transform: translateY(-100%)
    }
    .offcanvas-md.offcanvas-bottom,
    .offcanvas-md.offcanvas-top {
        height: var(--bs-offcanvas-height);
        left: 0;
        max-height: 100%;
        right: 0
    }
    .offcanvas-md.offcanvas-bottom {
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }
    .offcanvas-md.show:not(.hiding),
    .offcanvas-md.showing {
        transform: none
    }
    .offcanvas-md.hiding,
    .offcanvas-md.show,
    .offcanvas-md.showing {
        visibility: visible
    }
}

@media(min-width:768px) {
    .offcanvas-md {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }
    .offcanvas-md .offcanvas-header {
        display: none
    }
    .offcanvas-md .offcanvas-body {
        background-color: transparent !important;
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(max-width:991.98px) {
    .offcanvas-lg.offcanvas-start {
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-lg.offcanvas-end {
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        right: 0;
        top: 0;
        transform: translateX(100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-lg.offcanvas-top {
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        top: 0;
        transform: translateY(-100%)
    }
    .offcanvas-lg.offcanvas-bottom,
    .offcanvas-lg.offcanvas-top {
        height: var(--bs-offcanvas-height);
        left: 0;
        max-height: 100%;
        right: 0
    }
    .offcanvas-lg.offcanvas-bottom {
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }
    .offcanvas-lg.show:not(.hiding),
    .offcanvas-lg.showing {
        transform: none
    }
    .offcanvas-lg.hiding,
    .offcanvas-lg.show,
    .offcanvas-lg.showing {
        visibility: visible
    }
}

@media(min-width:992px) {
    .offcanvas-lg {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }
    .offcanvas-lg .offcanvas-header {
        display: none
    }
    .offcanvas-lg .offcanvas-body {
        background-color: transparent !important;
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(max-width:1199.98px) {
    .offcanvas-xl.offcanvas-start {
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-xl.offcanvas-end {
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        right: 0;
        top: 0;
        transform: translateX(100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-xl.offcanvas-top {
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        top: 0;
        transform: translateY(-100%)
    }
    .offcanvas-xl.offcanvas-bottom,
    .offcanvas-xl.offcanvas-top {
        height: var(--bs-offcanvas-height);
        left: 0;
        max-height: 100%;
        right: 0
    }
    .offcanvas-xl.offcanvas-bottom {
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }
    .offcanvas-xl.show:not(.hiding),
    .offcanvas-xl.showing {
        transform: none
    }
    .offcanvas-xl.hiding,
    .offcanvas-xl.show,
    .offcanvas-xl.showing {
        visibility: visible
    }
}

@media(min-width:1200px) {
    .offcanvas-xl {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }
    .offcanvas-xl .offcanvas-header {
        display: none
    }
    .offcanvas-xl .offcanvas-body {
        background-color: transparent !important;
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

@media(max-width:1399.98px) {
    .offcanvas-xxl.offcanvas-start {
        border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        left: 0;
        top: 0;
        transform: translateX(-100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-xxl.offcanvas-end {
        border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        right: 0;
        top: 0;
        transform: translateX(100%);
        width: var(--bs-offcanvas-width)
    }
    .offcanvas-xxl.offcanvas-top {
        border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        top: 0;
        transform: translateY(-100%)
    }
    .offcanvas-xxl.offcanvas-bottom,
    .offcanvas-xxl.offcanvas-top {
        height: var(--bs-offcanvas-height);
        left: 0;
        max-height: 100%;
        right: 0
    }
    .offcanvas-xxl.offcanvas-bottom {
        border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
        transform: translateY(100%)
    }
    .offcanvas-xxl.show:not(.hiding),
    .offcanvas-xxl.showing {
        transform: none
    }
    .offcanvas-xxl.hiding,
    .offcanvas-xxl.show,
    .offcanvas-xxl.showing {
        visibility: visible
    }
}

@media(min-width:1400px) {
    .offcanvas-xxl {
        --bs-offcanvas-height: auto;
        --bs-offcanvas-border-width: 0;
        background-color: transparent !important
    }
    .offcanvas-xxl .offcanvas-header {
        display: none
    }
    .offcanvas-xxl .offcanvas-body {
        background-color: transparent !important;
        display: flex;
        flex-grow: 0;
        overflow-y: visible;
        padding: 0
    }
}

.offcanvas {
    background-clip: padding-box;
    bottom: 0;
    display: flex;
    flex-direction: column;
    max-width: 100%;
    outline: 0;
    position: fixed;
    transition: var(--bs-offcanvas-transition);
    visibility: hidden;
    z-index: var(--bs-offcanvas-zindex);
    background: var(--body-bg);
    padding: var(--card-padding);
}

@media(prefers-reduced-motion:reduce) {
    .offcanvas {
        transition: none
    }
}

.offcanvas.offcanvas-start {
    border-right: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    left: 0;
    top: 0;
    transform: translateX(-100%);
    width: var(--bs-offcanvas-width)
}

.offcanvas.offcanvas-end {
    border-left: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    right: 0;
    top: 0;
    transform: translateX(100%);
    width: var(--bs-offcanvas-width)
}

.offcanvas.offcanvas-top {
    border-bottom: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    top: 0;
    transform: translateY(-100%)
}

.offcanvas.offcanvas-bottom,
.offcanvas.offcanvas-top {
    height: var(--bs-offcanvas-height);
    left: 0;
    max-height: 100%;
    right: 0
}

.offcanvas.offcanvas-bottom {
    border-top: var(--bs-offcanvas-border-width) solid var(--bs-offcanvas-border-color);
    transform: translateY(100%)
}

.offcanvas.show:not(.hiding),
.offcanvas.showing {
    transform: none
}

.offcanvas.hiding,
.offcanvas.show,
.offcanvas.showing {
    visibility: visible
}

.offcanvas-backdrop {
    background-color: #000;
    height: 100vh;
    left: 0;
    position: fixed;
    top: 0;
    width: 100vw;
    z-index: 1040
}

.offcanvas-backdrop.fade {
    opacity: 0
}

.offcanvas-backdrop.show {
    opacity: .5
}

.offcanvas-header {
    align-items: center;
    display: flex;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)
}

.offcanvas-header .btn-close {
    margin: calc(var(--bs-offcanvas-padding-y)*-.5) calc(var(--bs-offcanvas-padding-x)*-.5) calc(var(--bs-offcanvas-padding-y)*-.5) auto;
    padding: calc(var(--bs-offcanvas-padding-y)*.5) calc(var(--bs-offcanvas-padding-x)*.5)
}

.offcanvas-title {
    line-height: var(--bs-offcanvas-title-line-height);
    margin-bottom: 0
}

.offcanvas-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: var(--bs-offcanvas-padding-y) var(--bs-offcanvas-padding-x)
}

.placeholder {
    background-color: currentcolor;
    cursor: wait;
    display: inline-block;
    min-height: 1em;
    opacity: .5;
    vertical-align: middle
}

.placeholder.btn:before {
    content: "";
    display: inline-block
}

.placeholder-glow .placeholder {
    animation: placeholder-glow 2s ease-in-out infinite
}
.icon-link>.bi {
    flex-shrink: 0;
    height: 1em;
    width: 1em;
    fill: currentcolor;
    transition: transform .2s ease-in-out
}

@media(prefers-reduced-motion:reduce) {
    .icon-link>.bi {
        transition: none
    }
}

.icon-link-hover:focus-visible>.bi,
.icon-link-hover:hover>.bi {
    transform: var(--bs-icon-link-transform, translate3d(.25em, 0, 0))
}

.ratio {
    position: relative;
    width: 100%
}

.ratio:before {
    content: "";
    display: block;
    padding-top: var(--bs-aspect-ratio)
}

.ratio>* {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%
}

.fixed-top {
    top: 0
}

.fixed-bottom,
.fixed-top {
    left: 0;
    position: fixed;
    right: 0;
    z-index: 1030;
    border-bottom: 1px solid var(--border-color);
    transition: margin-top 0.3s ease;
}

.fixed-top.active{
    background: var(--body-bg);
    margin-top: 0px;
}

.fixed-bottom {
    bottom: 0
}

.sticky-top {
    top: 0
}

.sticky-bottom,
.sticky-top {
    position: sticky;
    z-index: 1030;
}

.hstack,
.vstack {
    align-self: stretch;
    display: flex
}

.vstack {
    flex: 1 1 auto;
    flex-direction: column
}

.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    width: 1px !important;
    clip: rect(0, 0, 0, 0) !important;
    border: 0 !important;
    white-space: nowrap !important
}

.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption),
.visually-hidden:not(caption) {
    position: absolute !important
}

.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.vr {
    align-self: stretch;
    background-color: currentcolor;
    display: inline-block;
    min-height: 1em;
    opacity: .25;
    width: var(--border-width)
}

.align-middle {
    vertical-align: middle !important
}

.opacity-25 {
    opacity: .25 !important
}

.opacity-50 {
    opacity: .5 !important
}

.opacity-75 {
    opacity: .75 !important
}

.overflow-hidden {
    overflow: hidden !important
}

.overflow-visible {
    overflow: visible !important
}

.overflow-y-auto {
    overflow-y: auto !important
}

.d-inline {
    display: inline !important
}

.d-inline-block {
    display: inline-block !important
}

.d-block {
    display: block !important
}

.d-grid {
    display: grid !important
}

.d-flex {display: flex}

.d-inline-flex {
    display: inline-flex !important
}

.d-none {
    display: none !important
}

.shadow {
    box-shadow: var(--bs-box-shadow) !important
}

.shadow-sm {
    box-shadow: var(--bs-box-shadow-sm) !important
}

.shadow-lg {
    box-shadow: var(--bs-box-shadow-lg) !important
}

.position-static {
    position: static !important
}

.position-relative {
    position: relative !important
}

.position-absolute {
    position: absolute !important
}

.position-fixed {
    position: fixed !important
}

.position-sticky {
    position: sticky !important
}

.top-0 {
    top: 0 !important
}

.bottom-0 {
    bottom: 0 !important
}

.start-0 {
    left: 0 !important
}

.start-50 {
    left: 50% !important
}

.end-0 {
    right: 0 !important
}

.translate-middle-x {
    transform: translateX(-50%) !important
}

.border {
    border: var(--border-width) var(--border-style) var(--border-color) !important
}

.border-0 {
    border: 0 !important
}

.border-top {
    border-top: var(--border-width) var(--border-style) var(--border-color) !important
}

.border-bottom {
    border-bottom: var(--border-width) var(--border-style) var(--border-color) !important
}

.border-start {
    border-left: var(--border-width) var(--border-style) var(--border-color) !important
}

.border-3 {
    border-width: 3px !important
}

.border-4 {
    border-width: 4px !important
}

.bg-main{
    background:var(--main-color);
}

.w-50 {
    width: 50% !important
}

.w-100 {
    width: 100% !important
}

.w-auto {
    width: auto !important
}

.mw-100 {
    max-width: 100% !important
}

.h-100 {
    height: 100% !important
}

.h-auto {
    height: auto !important
}

.mh250{
    min-height: 250px;
}

.mah300{
    max-height: 300px !important
}

.mh70{
    min-height: 70px;
}

.mih100{
    min-height: 100%;
}

.mh150{
    min-height: 150px;
}

.flex-row {
    flex-direction: row !important
}

.flex-column {
    flex-direction: column !important
}

.flex-grow-1 {
    flex-grow: 1 !important
}

.flex-shrink-0 {
    flex-shrink: 0 !important
}

.flex-wrap {
    flex-wrap: wrap !important
}

.justify-content-end {
    justify-content: flex-end !important
}

.justify-content-center {
    justify-content: center !important
}

.justify-content-between {
    justify-content: space-between !important
}

.justify-content-around {
    justify-content: space-around !important
}

.align-items-start {
    align-items: flex-start !important
}

.align-items-end {
    align-items: flex-end !important
}

.align-items-center {
    align-items: center !important
}

.align-content-start {
    align-content: flex-start !important
}

.align-self-center {
    align-self: center !important
}

.order-1 {
    order: 1 !important
}

.order-2 {
    order: 2 !important
}

.m-0 {
    margin: 0 !important
}

.m-2 {
    margin: .5rem !important
}

.m-3 {
    margin: 1rem !important
}

.m-auto {
    margin: auto !important
}

.mx-0 {
    margin-left: 0 !important;
    margin-right: 0 !important
}

.mx-1 {
    margin-left: .25rem !important;
    margin-right: .25rem !important
}

.mx-2 {
    margin-left: .5rem !important;
    margin-right: .5rem !important
}

.mx-3 {
    margin-left: 1rem !important;
    margin-right: 1rem !important
}

.mx-4 {
    margin-left: 1.5rem !important;
    margin-right: 1.5rem !important
}

.mx-auto {
    margin-left: auto !important;
    margin-right: auto !important
}

.my-1 {
    margin-bottom: .25rem !important;
    margin-top: .25rem !important
}

.my-3 {
    margin-bottom: 1rem !important;
    margin-top: 1rem !important
}

.my-4 {
    margin-bottom: 1.5rem !important;
    margin-top: 1.5rem !important
}

.my-5 {
    margin-bottom: 3rem !important;
    margin-top: 3rem !important
}

.mt-1 {
    margin-top: .25rem !important
}

.mt-2 {
    margin-top: .5rem !important
}

.mt-3 {
    margin-top: 1rem !important
}

.plg{
    padding-left: calc(var(--gutter-x)*1);
}
.prg{
    padding-right: calc(var(--gutter-x)*1);
}

.mtg{
    margin-top: calc(var(--gutter-x) * 1);
}
.mbg{
    margin-bottom: calc(var(--gutter-x) * 1);
}

.mtb-3{
    margin-top: calc(var(--gutter-x) * 3)
}

.mt-4 {
    margin-top: 1.5rem !important
}

.mt-5 {
    margin-top: 3rem !important
}

.mt-auto {
    margin-top: auto !important
}

.me-0 {
    margin-right: 0 !important
}

.me-1 {
    margin-right: .25rem !important
}

.me-2 {
    margin-right: .5rem !important
}

.me-3 {
    margin-right: 1rem !important
}

.me-5 {
    margin-right: 3rem !important
}

.me-auto {
    margin-right: auto !important
}

.mb-0 {
    margin-bottom: 0 !important
}

.mb-1 {
    margin-bottom: .25rem !important
}

.mb-2 {
    margin-bottom: .5rem !important
}

.mb-3 {
    margin-bottom: 1rem !important
}

.pbg{
    padding-bottom: calc(var(--gutter-x) * 1);

}

.mb-4 {
    margin-bottom: 1.5rem !important
}

.mb-5 {
    margin-bottom: 3rem !important
}

.ms-1 {
    margin-left: .25rem !important
}

.ms-2 {
    margin-left: .5rem !important
}

.ms-3 {
    margin-left: 1rem !important
}

.ms-auto {
    margin-left: auto !important
}

.p-0 {
    padding: 0 !important
}

.p-1 {
    padding: .25rem !important
}

.p-2 {
    padding: .5rem !important
}

.p-3 {
    padding: 1rem !important
}

.p-4 {
    padding: 1.5rem !important
}

.p-5 {
    padding: 3rem;
}

.px-0 {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.px-1 {
    padding-left: .25rem !important;
    padding-right: .25rem !important
}

.px-2 {
    padding-left: .5rem !important;
    padding-right: .5rem !important
}

.px-3 {
    padding-left: 1rem !important;
    padding-right: 1rem !important
}

.px-4 {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important
}

.px-5 {
    padding-left: 3rem !important;
    padding-right: 3rem !important
}

.py-1 {
    padding-bottom: .25rem !important;
    padding-top: .25rem !important
}

.py-2 {
    padding-bottom: .5rem !important;
    padding-top: .5rem !important
}

.py-3 {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important
}

.py-4 {
    padding-bottom: 1.5rem !important;
    padding-top: 1.5rem !important
}

.py-5 {
    padding-bottom: 3rem !important;
    padding-top: 3rem !important
}

.py-10 {
    padding-bottom: 6rem !important;
    padding-top: 6rem !important
}

.py-15 {
    padding-bottom: 9rem !important;
    padding-top: 9rem !important
}

.pt-0 {
    padding-top: 0 !important
}

.pt-2 {
    padding-top: .5rem !important
}

.pt-3 {
    padding-top: 1rem !important
}

.pt-5 {
    padding-top: 3rem !important
}

.pe-3 {
    padding-right: 1rem !important
}

.pb-0 {
    padding-bottom: 0 !important
}

.pb-1 {
    padding-bottom: .25rem !important
}

.pb-2 {
    padding-bottom: .5rem !important
}

.pb-3 {
    padding-bottom: 1rem !important
}

.pb-4 {
    padding-bottom: 1.5rem !important
}

.pb-5 {
    padding-bottom: 3rem !important
}

.ps-3 {
    padding-left: 1rem !important
}

.gap-0 {
    gap: 0 !important
}

.gap-1 {
    gap: .25rem !important
}

.gap-2 {
    gap: .5rem !important
}

.gap-3 {
    gap: 1rem !important
}

.gap-4 {
    gap: 1.5rem !important
}

.fs-00{
    font-size:170px;
}

.fs-0 {
    font-size: calc(1.7rem + 1.5vw) !important
}

.fs-1 {
    font-size: calc(1.375rem + 1.5vw) !important
}

.fs-2 {
    font-size: calc(1.325rem + .9vw) !important
}

.fs-3 {
    font-size: calc(1.3rem + .6vw) !important
}

.fs-4 {
    font-size: calc(1.275rem + .3vw) !important
}

.fs-5 {
    font-size: 1.25rem !important
}

.fs-6 {
    font-size: 16px;
    line-height: 18px;
}

.fs-7 {
    font-size: 12px;
    line-height: 14px;
}

.fw-normal {
    font-weight: 400 !important
}

.fw-medium {
    font-weight: 500 !important
}

.fw-semibold {
    font-weight: 600 !important
}

.fw-bold {
    font-weight: 700 !important
}

.text-start {
    text-align: left !important
}

.text-justify {
    text-align: justify;
  }

.text-end {
    text-align: right !important
}

.text-center {
    text-align: center !important
}

.text-decoration-none {
    text-decoration: none !important
}

.text-uppercase {
    text-transform: uppercase !important
}

.text-nowrap {
    white-space: nowrap !important
}

.text-primary {
    --bs-text-opacity: 1;
    color: var(--main-color);
}

.text-secondary {
    color:var(--text-secondary);
}

.text-success {
    color:var(--bs-success);
}

.text-info {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-info-rgb), var(--bs-text-opacity)) !important
}

.text-warning {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-warning-rgb), var(--bs-text-opacity)) !important
}

.text-danger {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-danger-rgb), var(--bs-text-opacity)) !important
}

.text-light {
    --bs-text-opacity: 1;
    color: rgba(var(--bs-light-rgb), var(--bs-text-opacity)) !important
}

.text-white {
    color:#fff;
}

.text-muted {
    --bs-text-opacity: 1;
    color: var(--text-secondary-color) !important
}

.text-white-50 {
    --bs-text-opacity: 1;
    color: hsla(0, 0%, 100%, .5) !important
}

.text-primary-emphasis {
    color: var(--main-color) !important
}

.text-success-emphasis {
    color: var(--bs-success-text-emphasis) !important
}

.text-info-emphasis {
    color: var(--bs-info-text-emphasis) !important
}

.text-warning-emphasis {
    color: var(--bs-warning-text-emphasis) !important
}

.text-danger-emphasis {
    color: var(--bs-danger-text-emphasis) !important
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: var(--main-color);
}

.bg-secondary {
    background: var(--card-secondary-background);
}

.bg-success,
.bg-new{
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important
}

.bg-info {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-info-rgb), var(--bs-bg-opacity)) !important
}

.bg-warning {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-warning-rgb), var(--bs-bg-opacity)) !important
}


.bg-dark {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-dark-rgb), var(--bs-bg-opacity)) !important
}

.bg-black {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-black-rgb), var(--bs-bg-opacity)) !important
}

.bg-white {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--bs-white-rgb), var(--bs-bg-opacity)) !important
}

.body-bg {
    background: var(--body-bg);
}

.bg-opacity-10 {
    --bs-bg-opacity: 0.1
}

.bg-primary-subtle {
    background-color: var(--bs-primary-bg-subtle) !important
}

.bg-success-subtle {
    background-color: var(--bs-success-bg-subtle) !important
}

.bg-info-subtle {
    background-color: var(--bs-info-bg-subtle) !important
}

.bg-warning-subtle {
    background-color: var(--bs-warning-bg-subtle) !important
}

.bg-danger-subtle {
    background-color: var(--bs-danger-bg-subtle) !important
}

.bg-gradient {
    background: radial-gradient(120% 120% at 50% 100%, transparent 40%, var(--secondary-color) 70%, #fff 100%);
}

.pe-none {
    pointer-events: none !important
}

.radius{
    border-radius: var(--border-radius) !important
}

.radius-0 {
    border-radius: 0 !important
}

.radius-circle {
    border-radius: 50% !important
}

.visible {
    visibility: visible !important
}

.invisible {
    visibility: hidden !important
}

@media(min-width:576px) {

    

    .float-sm-start {
        float: left !important
    }
    .float-sm-end {
        float: right !important
    }
    .float-sm-none {
        float: none !important
    }
    .object-fit-sm-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }
    .object-fit-sm-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }
    .object-fit-sm-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }
    .object-fit-sm-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }
    .object-fit-sm-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }
    .d-sm-inline {
        display: inline !important
    }
    .d-sm-inline-block {
        display: inline-block !important
    }
    .d-sm-block {
        display: block !important
    }
    .d-sm-grid {
        display: grid !important
    }
    .d-sm-inline-grid {
        display: inline-grid !important
    }
    .d-sm-table {
        display: table !important
    }
    .d-sm-table-row {
        display: table-row !important
    }
    .d-sm-table-cell {
        display: table-cell !important
    }
    .d-sm-flex {
        display: flex !important
    }
    .d-sm-inline-flex {
        display: inline-flex !important
    }
    .d-sm-none {
        display: none !important
    }
    .flex-sm-fill {
        flex: 1 1 auto !important
    }
    .flex-sm-row {
        flex-direction: row !important
    }
    .flex-sm-column {
        flex-direction: column !important
    }
    .flex-sm-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-sm-grow-0 {
        flex-grow: 0 !important
    }
    .flex-sm-grow-1 {
        flex-grow: 1 !important
    }
    .flex-sm-shrink-0 {
        flex-shrink: 0 !important
    }
    .flex-sm-shrink-1 {
        flex-shrink: 1 !important
    }
    .flex-sm-wrap {
        flex-wrap: wrap !important
    }
    .flex-sm-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-sm-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-sm-start {
        justify-content: flex-start !important
    }
    .justify-content-sm-end {
        justify-content: flex-end !important
    }
    .justify-content-sm-center {
        justify-content: center !important
    }
    .justify-content-sm-between {
        justify-content: space-between !important
    }
    .justify-content-sm-around {
        justify-content: space-around !important
    }
    .justify-content-sm-evenly {
        justify-content: space-evenly !important
    }
    .align-items-sm-start {
        align-items: flex-start !important
    }
    .align-items-sm-end {
        align-items: flex-end !important
    }
    .align-items-sm-center {
        align-items: center !important
    }
    .align-items-sm-baseline {
        align-items: baseline !important
    }
    .align-items-sm-stretch {
        align-items: stretch !important
    }
    .align-content-sm-start {
        align-content: flex-start !important
    }
    .align-content-sm-end {
        align-content: flex-end !important
    }
    .align-content-sm-center {
        align-content: center !important
    }
    .align-content-sm-between {
        align-content: space-between !important
    }
    .align-content-sm-around {
        align-content: space-around !important
    }
    .align-content-sm-stretch {
        align-content: stretch !important
    }
    .align-self-sm-auto {
        align-self: auto !important
    }
    .align-self-sm-start {
        align-self: flex-start !important
    }
    .align-self-sm-end {
        align-self: flex-end !important
    }
    .align-self-sm-center {
        align-self: center !important
    }
    .align-self-sm-baseline {
        align-self: baseline !important
    }
    .align-self-sm-stretch {
        align-self: stretch !important
    }
    .order-sm-first {
        order: -1 !important
    }
    .order-sm-0 {
        order: 0 !important
    }
    .order-sm-1 {
        order: 1 !important
    }
    .order-sm-2 {
        order: 2 !important
    }
    .order-sm-3 {
        order: 3 !important
    }
    .order-sm-4 {
        order: 4 !important
    }
    .order-sm-5 {
        order: 5 !important
    }
    .order-sm-last {
        order: 6 !important
    }
    .m-sm-0 {
        margin: 0 !important
    }
    .m-sm-1 {
        margin: .25rem !important
    }
    .m-sm-2 {
        margin: .5rem !important
    }
    .m-sm-3 {
        margin: 1rem !important
    }
    .m-sm-4 {
        margin: 1.5rem !important
    }
    .m-sm-5 {
        margin: 3rem !important
    }
    .m-sm-auto {
        margin: auto !important
    }
    .mx-sm-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }
    .mx-sm-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }
    .mx-sm-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }
    .mx-sm-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }
    .mx-sm-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }
    .mx-sm-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }
    .mx-sm-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }
    .my-sm-0 {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }
    .my-sm-1 {
        margin-bottom: .25rem !important;
        margin-top: .25rem !important
    }
    .my-sm-2 {
        margin-bottom: .5rem !important;
        margin-top: .5rem !important
    }
    .my-sm-3 {
        margin-bottom: 1rem !important;
        margin-top: 1rem !important
    }
    .my-sm-4 {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important
    }
    .my-sm-5 {
        margin-bottom: 3rem !important;
        margin-top: 3rem !important
    }
    .my-sm-auto {
        margin-bottom: auto !important;
        margin-top: auto !important
    }
    .mt-sm-0 {
        margin-top: 0 !important
    }
    .mt-sm-1 {
        margin-top: .25rem !important
    }
    .mt-sm-2 {
        margin-top: .5rem !important
    }
    .mt-sm-3 {
        margin-top: 1rem !important
    }
    .mt-sm-4 {
        margin-top: 1.5rem !important
    }
    .mt-sm-5 {
        margin-top: 3rem !important
    }
    .mt-sm-auto {
        margin-top: auto !important
    }
    .me-sm-0 {
        margin-right: 0 !important
    }
    .me-sm-1 {
        margin-right: .25rem !important
    }
    .me-sm-2 {
        margin-right: .5rem !important
    }
    .me-sm-3 {
        margin-right: 1rem !important
    }
    .me-sm-4 {
        margin-right: 1.5rem !important
    }
    .me-sm-5 {
        margin-right: 3rem !important
    }
    .me-sm-auto {
        margin-right: auto !important
    }
    .mb-sm-0 {
        margin-bottom: 0 !important
    }
    .mb-sm-1 {
        margin-bottom: .25rem !important
    }
    .mb-sm-2 {
        margin-bottom: .5rem !important
    }
    .mb-sm-3 {
        margin-bottom: 1rem !important
    }
    .mb-sm-4 {
        margin-bottom: 1.5rem !important
    }
    .mb-sm-5 {
        margin-bottom: 3rem !important
    }
    .mb-sm-auto {
        margin-bottom: auto !important
    }
    .ms-sm-0 {
        margin-left: 0 !important
    }
    .ms-sm-1 {
        margin-left: .25rem !important
    }
    .ms-sm-2 {
        margin-left: .5rem !important
    }
    .ms-sm-3 {
        margin-left: 1rem !important
    }
    .ms-sm-4 {
        margin-left: 1.5rem !important
    }
    .ms-sm-5 {
        margin-left: 3rem !important
    }
    .ms-sm-auto {
        margin-left: auto !important
    }
    .p-sm-0 {
        padding: 0 !important
    }
    .p-sm-1 {
        padding: .25rem !important
    }
    .p-sm-2 {
        padding: .5rem !important
    }
    .p-sm-3 {
        padding: 1rem !important
    }
    .p-sm-4 {
        padding: 1.5rem !important
    }
    .p-sm-5 {
        padding: 3rem !important
    }
    .px-sm-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
    .px-sm-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }
    .px-sm-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }
    .px-sm-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }
    .px-sm-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }
    .px-sm-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }
    .py-sm-0 {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }
    .py-sm-1 {
        padding-bottom: .25rem !important;
        padding-top: .25rem !important
    }
    .py-sm-2 {
        padding-bottom: .5rem !important;
        padding-top: .5rem !important
    }
    .py-sm-3 {
        padding-bottom: 1rem !important;
        padding-top: 1rem !important
    }
    .py-sm-4 {
        padding-bottom: 1.5rem !important;
        padding-top: 1.5rem !important
    }
    .py-sm-5 {
        padding-bottom: 3rem !important;
        padding-top: 3rem !important
    }
    .pt-sm-0 {
        padding-top: 0 !important
    }
    .pt-sm-1 {
        padding-top: .25rem !important
    }
    .pt-sm-2 {
        padding-top: .5rem !important
    }
    .pt-sm-3 {
        padding-top: 1rem !important
    }
    .pt-sm-4 {
        padding-top: 1.5rem !important
    }
    .pt-sm-5 {
        padding-top: 3rem !important
    }
    .pe-sm-0 {
        padding-right: 0 !important
    }
    .pe-sm-1 {
        padding-right: .25rem !important
    }
    .pe-sm-2 {
        padding-right: .5rem !important
    }
    .pe-sm-3 {
        padding-right: 1rem !important
    }
    .pe-sm-4 {
        padding-right: 1.5rem !important
    }
    .pe-sm-5 {
        padding-right: 3rem !important
    }
    .pb-sm-0 {
        padding-bottom: 0 !important
    }
    .pb-sm-1 {
        padding-bottom: .25rem !important
    }
    .pb-sm-2 {
        padding-bottom: .5rem !important
    }
    .pb-sm-3 {
        padding-bottom: 1rem !important
    }
    .pb-sm-4 {
        padding-bottom: 1.5rem !important
    }
    .pb-sm-5 {
        padding-bottom: 3rem !important
    }
    .ps-sm-0 {
        padding-left: 0 !important
    }
    .ps-sm-1 {
        padding-left: .25rem !important
    }
    .ps-sm-2 {
        padding-left: .5rem !important
    }
    .ps-sm-3 {
        padding-left: 1rem !important
    }
    .ps-sm-4 {
        padding-left: 1.5rem !important
    }
    .ps-sm-5 {
        padding-left: 3rem !important
    }
    .gap-sm-0 {
        gap: 0 !important
    }
    .gap-sm-1 {
        gap: .25rem !important
    }
    .gap-sm-2 {
        gap: .5rem !important
    }
    .gap-sm-3 {
        gap: 1rem !important
    }
    .gap-sm-4 {
        gap: 1.5rem !important
    }
    .gap-sm-5 {
        gap: 3rem !important
    }
    .row-gap-sm-0 {
        row-gap: 0 !important
    }
    .row-gap-sm-1 {
        row-gap: .25rem !important
    }
    .row-gap-sm-2 {
        row-gap: .5rem !important
    }
    .row-gap-sm-3 {
        row-gap: 1rem !important
    }
    .row-gap-sm-4 {
        row-gap: 1.5rem !important
    }
    .row-gap-sm-5 {
        row-gap: 3rem !important
    }
    .column-gap-sm-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }
    .column-gap-sm-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }
    .column-gap-sm-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }
    .column-gap-sm-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }
    .column-gap-sm-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }
    .column-gap-sm-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }
    .text-sm-start {
        text-align: left !important
    }
    .text-sm-end {
        text-align: right !important
    }
    .text-sm-center {
        text-align: center !important
    }
}

@media(min-width:768px) {
    .float-md-start {
        float: left !important
    }
    .float-md-end {
        float: right !important
    }
    .float-md-none {
        float: none !important
    }
    .object-fit-md-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }
    .object-fit-md-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }
    .object-fit-md-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }
    .object-fit-md-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }
    .object-fit-md-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }
    .d-md-inline {
        display: inline !important
    }
    .d-md-inline-block {
        display: inline-block !important
    }
    .d-md-block {
        display: block !important
    }
    .d-md-grid {
        display: grid !important
    }
    .d-md-inline-grid {
        display: inline-grid !important
    }
    .d-md-table {
        display: table !important
    }
    .d-md-table-row {
        display: table-row !important
    }
    .d-md-table-cell {
        display: table-cell !important
    }
    .d-md-flex {
        display: flex !important
    }
    .d-md-inline-flex {
        display: inline-flex !important
    }
    .d-md-none {
        display: none !important
    }
    .flex-md-fill {
        flex: 1 1 auto !important
    }
    .flex-md-row {
        flex-direction: row !important
    }
    .flex-md-column {
        flex-direction: column !important
    }
    .flex-md-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-md-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-md-grow-0 {
        flex-grow: 0 !important
    }
    .flex-md-grow-1 {
        flex-grow: 1 !important
    }
    .flex-md-shrink-0 {
        flex-shrink: 0 !important
    }
    .flex-md-shrink-1 {
        flex-shrink: 1 !important
    }
    .flex-md-wrap {
        flex-wrap: wrap !important
    }
    .flex-md-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-md-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-md-start {
        justify-content: flex-start !important
    }
    .justify-content-md-end {
        justify-content: flex-end !important
    }
    .justify-content-md-center {
        justify-content: center !important
    }
    .justify-content-md-between {
        justify-content: space-between !important
    }
    .justify-content-md-around {
        justify-content: space-around !important
    }
    .justify-content-md-evenly {
        justify-content: space-evenly !important
    }
    .align-items-md-start {
        align-items: flex-start !important
    }
    .align-items-md-end {
        align-items: flex-end !important
    }
    .align-items-md-center {
        align-items: center !important
    }
    .align-items-md-baseline {
        align-items: baseline !important
    }
    .align-items-md-stretch {
        align-items: stretch !important
    }
    .align-content-md-start {
        align-content: flex-start !important
    }
    .align-content-md-end {
        align-content: flex-end !important
    }
    .align-content-md-center {
        align-content: center !important
    }
    .align-content-md-between {
        align-content: space-between !important
    }
    .align-content-md-around {
        align-content: space-around !important
    }
    .align-content-md-stretch {
        align-content: stretch !important
    }
    .align-self-md-auto {
        align-self: auto !important
    }
    .align-self-md-start {
        align-self: flex-start !important
    }
    .align-self-md-end {
        align-self: flex-end !important
    }
    .align-self-md-center {
        align-self: center !important
    }
    .align-self-md-baseline {
        align-self: baseline !important
    }
    .align-self-md-stretch {
        align-self: stretch !important
    }
    .order-md-first {
        order: -1 !important
    }
    .order-md-0 {
        order: 0 !important
    }
    .order-md-1 {
        order: 1 !important
    }
    .order-md-2 {
        order: 2 !important
    }
    .order-md-3 {
        order: 3 !important
    }
    .order-md-4 {
        order: 4 !important
    }
    .order-md-5 {
        order: 5 !important
    }
    .order-md-last {
        order: 6 !important
    }
    .m-md-0 {
        margin: 0 !important
    }
    .m-md-1 {
        margin: .25rem !important
    }
    .m-md-2 {
        margin: .5rem !important
    }
    .m-md-3 {
        margin: 1rem !important
    }
    .m-md-4 {
        margin: 1.5rem !important
    }
    .m-md-5 {
        margin: 3rem !important
    }
    .m-md-auto {
        margin: auto !important
    }
    .mx-md-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }
    .mx-md-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }
    .mx-md-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }
    .mx-md-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }
    .mx-md-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }
    .mx-md-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }
    .mx-md-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }
    .my-md-0 {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }
    .my-md-1 {
        margin-bottom: .25rem !important;
        margin-top: .25rem !important
    }
    .my-md-2 {
        margin-bottom: .5rem !important;
        margin-top: .5rem !important
    }
    .my-md-3 {
        margin-bottom: 1rem !important;
        margin-top: 1rem !important
    }
    .my-md-4 {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important
    }
    .my-md-5 {
        margin-bottom: 3rem !important;
        margin-top: 3rem !important
    }
    .my-md-auto {
        margin-bottom: auto !important;
        margin-top: auto !important
    }
    .mt-md-0 {
        margin-top: 0 !important
    }
    .mt-md-1 {
        margin-top: .25rem !important
    }
    .mt-md-2 {
        margin-top: .5rem !important
    }
    .mt-md-3 {
        margin-top: 1rem !important
    }
    .mt-md-4 {
        margin-top: 1.5rem !important
    }
    .mt-md-5 {
        margin-top: 3rem !important
    }
    .mt-md-auto {
        margin-top: auto !important
    }
    .me-md-0 {
        margin-right: 0 !important
    }
    .me-md-1 {
        margin-right: .25rem !important
    }
    .me-md-2 {
        margin-right: .5rem !important
    }
    .me-md-3 {
        margin-right: 1rem !important
    }
    .me-md-4 {
        margin-right: 1.5rem !important
    }
    .me-md-5 {
        margin-right: 3rem !important
    }
    .me-md-auto {
        margin-right: auto !important
    }
    .mb-md-0 {
        margin-bottom: 0 !important
    }
    .mb-md-1 {
        margin-bottom: .25rem !important
    }
    .mb-md-2 {
        margin-bottom: .5rem !important
    }
    .mb-md-3 {
        margin-bottom: 1rem !important
    }
    .mb-md-4 {
        margin-bottom: 1.5rem !important
    }
    .mb-md-5 {
        margin-bottom: 3rem !important
    }
    .mb-md-auto {
        margin-bottom: auto !important
    }
    .ms-md-0 {
        margin-left: 0 !important
    }
    .ms-md-1 {
        margin-left: .25rem !important
    }
    .ms-md-2 {
        margin-left: .5rem !important
    }
    .ms-md-3 {
        margin-left: 1rem !important
    }
    .ms-md-4 {
        margin-left: 1.5rem !important
    }
    .ms-md-5 {
        margin-left: 3rem !important
    }
    .ms-md-auto {
        margin-left: auto !important
    }
    .p-md-0 {
        padding: 0 !important
    }
    .p-md-1 {
        padding: .25rem !important
    }
    .p-md-2 {
        padding: .5rem !important
    }
    .p-md-3 {
        padding: 1rem !important
    }
    .p-md-4 {
        padding: 1.5rem !important
    }
    .p-md-5 {
        padding: 3rem !important
    }
    .px-md-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
    .px-md-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }
    .px-md-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }
    .px-md-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }
    .px-md-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }
    .px-md-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }
    .py-md-0 {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }
    .py-md-1 {
        padding-bottom: .25rem !important;
        padding-top: .25rem !important
    }
    .py-md-2 {
        padding-bottom: .5rem !important;
        padding-top: .5rem !important
    }
    .py-md-3 {
        padding-bottom: 1rem !important;
        padding-top: 1rem !important
    }
    .py-md-4 {
        padding-bottom: 1.5rem !important;
        padding-top: 1.5rem !important
    }
    .py-md-5 {
        padding-bottom: 3rem !important;
        padding-top: 3rem !important
    }
    .pt-md-0 {
        padding-top: 0 !important
    }
    .pt-md-1 {
        padding-top: .25rem !important
    }
    .pt-md-2 {
        padding-top: .5rem !important
    }
    .pt-md-3 {
        padding-top: 1rem !important
    }
    .pt-md-4 {
        padding-top: 1.5rem !important
    }
    .pt-md-5 {
        padding-top: 3rem !important
    }
    .pe-md-0 {
        padding-right: 0 !important
    }
    .pe-md-1 {
        padding-right: .25rem !important
    }
    .pe-md-2 {
        padding-right: .5rem !important
    }
    .pe-md-3 {
        padding-right: 1rem !important
    }
    .pe-md-4 {
        padding-right: 1.5rem !important
    }
    .pe-md-5 {
        padding-right: 3rem !important
    }
    .pb-md-0 {
        padding-bottom: 0 !important
    }
    .pb-md-1 {
        padding-bottom: .25rem !important
    }
    .pb-md-2 {
        padding-bottom: .5rem !important
    }
    .pb-md-3 {
        padding-bottom: 1rem !important
    }
    .pb-md-4 {
        padding-bottom: 1.5rem !important
    }
    .pb-md-5 {
        padding-bottom: 3rem !important
    }
    .ps-md-0 {
        padding-left: 0 !important
    }
    .ps-md-1 {
        padding-left: .25rem !important
    }
    .ps-md-2 {
        padding-left: .5rem !important
    }
    .ps-md-3 {
        padding-left: 1rem !important
    }
    .ps-md-4 {
        padding-left: 1.5rem !important
    }
    .ps-md-5 {
        padding-left: 3rem !important
    }
    .gap-md-0 {
        gap: 0 !important
    }
    .gap-md-1 {
        gap: .25rem !important
    }
    .gap-md-2 {
        gap: .5rem !important
    }
    .gap-md-3 {
        gap: 1rem !important
    }
    .gap-md-4 {
        gap: 1.5rem !important
    }
    .gap-md-5 {
        gap: 3rem !important
    }
    .row-gap-md-0 {
        row-gap: 0 !important
    }
    .row-gap-md-1 {
        row-gap: .25rem !important
    }
    .row-gap-md-2 {
        row-gap: .5rem !important
    }
    .row-gap-md-3 {
        row-gap: 1rem !important
    }
    .row-gap-md-4 {
        row-gap: 1.5rem !important
    }
    .row-gap-md-5 {
        row-gap: 3rem !important
    }
    .column-gap-md-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }
    .column-gap-md-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }
    .column-gap-md-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }
    .column-gap-md-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }
    .column-gap-md-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }
    .column-gap-md-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }
    .text-md-start {
        text-align: left !important
    }
    .text-md-end {
        text-align: right !important
    }
    .text-md-center {
        text-align: center !important
    }
}

@media(min-width:992px) {
    .float-lg-start {
        float: left !important
    }
    .float-lg-end {
        float: right !important
    }
    .float-lg-none {
        float: none !important
    }
    .object-fit-lg-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }
    .object-fit-lg-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }
    .object-fit-lg-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }
    .object-fit-lg-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }
    .object-fit-lg-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }
    .d-lg-inline {
        display: inline !important
    }
    .d-lg-inline-block {
        display: inline-block !important
    }
    .d-lg-block {
        display: block !important
    }
    .d-lg-grid {
        display: grid !important
    }
    .d-lg-inline-grid {
        display: inline-grid !important
    }
    .d-lg-table {
        display: table !important
    }
    .d-lg-table-row {
        display: table-row !important
    }
    .d-lg-table-cell {
        display: table-cell !important
    }
    .d-lg-flex {
        display: flex !important
    }
    .d-lg-inline-flex {
        display: inline-flex !important
    }
    .d-lg-none {
        display: none !important
    }
    .flex-lg-fill {
        flex: 1 1 auto !important
    }
    .flex-lg-row {
        flex-direction: row !important
    }
    .flex-lg-column {
        flex-direction: column !important
    }
    .flex-lg-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-lg-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-lg-grow-0 {
        flex-grow: 0 !important
    }
    .flex-lg-grow-1 {
        flex-grow: 1 !important
    }
    .flex-lg-shrink-0 {
        flex-shrink: 0 !important
    }
    .flex-lg-shrink-1 {
        flex-shrink: 1 !important
    }
    .flex-lg-wrap {
        flex-wrap: wrap !important
    }
    .flex-lg-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-lg-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-lg-start {
        justify-content: flex-start !important
    }
    .justify-content-lg-end {
        justify-content: flex-end !important
    }
    .justify-content-lg-center {
        justify-content: center !important
    }
    .justify-content-lg-between {
        justify-content: space-between !important
    }
    .justify-content-lg-around {
        justify-content: space-around !important
    }
    .justify-content-lg-evenly {
        justify-content: space-evenly !important
    }
    .align-items-lg-start {
        align-items: flex-start !important
    }
    .align-items-lg-end {
        align-items: flex-end !important
    }
    .align-items-lg-center {
        align-items: center !important
    }
    .align-items-lg-baseline {
        align-items: baseline !important
    }
    .align-items-lg-stretch {
        align-items: stretch !important
    }
    .align-content-lg-start {
        align-content: flex-start !important
    }
    .align-content-lg-end {
        align-content: flex-end !important
    }
    .align-content-lg-center {
        align-content: center !important
    }
    .align-content-lg-between {
        align-content: space-between !important
    }
    .align-content-lg-around {
        align-content: space-around !important
    }
    .align-content-lg-stretch {
        align-content: stretch !important
    }
    .align-self-lg-auto {
        align-self: auto !important
    }
    .align-self-lg-start {
        align-self: flex-start !important
    }
    .align-self-lg-end {
        align-self: flex-end !important
    }
    .align-self-lg-center {
        align-self: center !important
    }
    .align-self-lg-baseline {
        align-self: baseline !important
    }
    .align-self-lg-stretch {
        align-self: stretch !important
    }
    .order-lg-first {
        order: -1 !important
    }
    .order-lg-0 {
        order: 0 !important
    }
    .order-lg-1 {
        order: 1 !important
    }
    .order-lg-2 {
        order: 2 !important
    }
    .order-lg-3 {
        order: 3 !important
    }
    .order-lg-4 {
        order: 4 !important
    }
    .order-lg-5 {
        order: 5 !important
    }
    .order-lg-last {
        order: 6 !important
    }
    .m-lg-0 {
        margin: 0 !important
    }
    .m-lg-1 {
        margin: .25rem !important
    }
    .m-lg-2 {
        margin: .5rem !important
    }
    .m-lg-3 {
        margin: 1rem !important
    }
    .m-lg-4 {
        margin: 1.5rem !important
    }
    .m-lg-5 {
        margin: 3rem !important
    }
    .m-lg-auto {
        margin: auto !important
    }
    .mx-lg-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }
    .mx-lg-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }
    .mx-lg-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }
    .mx-lg-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }
    .mx-lg-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }
    .mx-lg-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }
    .mx-lg-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }
    .my-lg-0 {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }
    .my-lg-1 {
        margin-bottom: .25rem !important;
        margin-top: .25rem !important
    }
    .my-lg-2 {
        margin-bottom: .5rem !important;
        margin-top: .5rem !important
    }
    .my-lg-3 {
        margin-bottom: 1rem !important;
        margin-top: 1rem !important
    }
    .my-lg-4 {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important
    }
    .my-lg-5 {
        margin-bottom: 3rem !important;
        margin-top: 3rem !important
    }
    .my-lg-auto {
        margin-bottom: auto !important;
        margin-top: auto !important
    }
    .mt-lg-0 {
        margin-top: 0 !important
    }
    .mt-lg-1 {
        margin-top: .25rem !important
    }
    .mt-lg-2 {
        margin-top: .5rem !important
    }
    .mt-lg-3 {
        margin-top: 1rem !important
    }
    .mt-lg-4 {
        margin-top: 1.5rem !important
    }
    .mt-lg-5 {
        margin-top: 3rem !important
    }
    .mt-lg-auto {
        margin-top: auto !important
    }
    .me-lg-0 {
        margin-right: 0 !important
    }
    .me-lg-1 {
        margin-right: .25rem !important
    }
    .me-lg-2 {
        margin-right: .5rem !important
    }
    .me-lg-3 {
        margin-right: 1rem !important
    }
    .me-lg-4 {
        margin-right: 1.5rem !important
    }
    .me-lg-5 {
        margin-right: 3rem !important
    }
    .me-lg-auto {
        margin-right: auto !important
    }
    .mb-lg-0 {
        margin-bottom: 0 !important
    }
    .mb-lg-1 {
        margin-bottom: .25rem !important
    }
    .mb-lg-2 {
        margin-bottom: .5rem !important
    }
    .mb-lg-3 {
        margin-bottom: 1rem !important
    }
    .mb-lg-4 {
        margin-bottom: 1.5rem !important
    }
    .mb-lg-5 {
        margin-bottom: 3rem !important
    }
    .mb-lg-auto {
        margin-bottom: auto !important
    }
    .ms-lg-0 {
        margin-left: 0 !important
    }
    .ms-lg-1 {
        margin-left: .25rem !important
    }
    .ms-lg-2 {
        margin-left: .5rem !important
    }
    .ms-lg-3 {
        margin-left: 1rem !important
    }
    .ms-lg-4 {
        margin-left: 1.5rem !important
    }
    .ms-lg-5 {
        margin-left: 3rem !important
    }
    .ms-lg-auto {
        margin-left: auto !important
    }
    .p-lg-0 {
        padding: 0 !important
    }
    .p-lg-1 {
        padding: .25rem !important
    }
    .p-lg-2 {
        padding: .5rem !important
    }
    .p-lg-3 {
        padding: 1rem !important
    }
    .p-lg-4 {
        padding: 1.5rem !important
    }
    .p-lg-5 {
        padding: 3rem !important
    }
    .px-lg-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
    .px-lg-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }
    .px-lg-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }
    .px-lg-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }
    .px-lg-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }
    .px-lg-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }
    .py-lg-0 {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }
    .py-lg-1 {
        padding-bottom: .25rem !important;
        padding-top: .25rem !important
    }
    .py-lg-2 {
        padding-bottom: .5rem !important;
        padding-top: .5rem !important
    }
    .py-lg-3 {
        padding-bottom: 1rem !important;
        padding-top: 1rem !important
    }
    .py-lg-4 {
        padding-bottom: 1.5rem !important;
        padding-top: 1.5rem !important
    }
    .py-lg-5 {
        padding-bottom: 3rem !important;
        padding-top: 3rem !important
    }
    .pt-lg-0 {
        padding-top: 0 !important
    }
    .pt-lg-1 {
        padding-top: .25rem !important
    }
    .pt-lg-2 {
        padding-top: .5rem !important
    }
    .pt-lg-3 {
        padding-top: 1rem !important
    }
    .pt-lg-4 {
        padding-top: 1.5rem !important
    }
    .pt-lg-5 {
        padding-top: 3rem !important
    }
    .pe-lg-0 {
        padding-right: 0 !important
    }
    .pe-lg-1 {
        padding-right: .25rem !important
    }
    .pe-lg-2 {
        padding-right: .5rem !important
    }
    .pe-lg-3 {
        padding-right: 1rem !important
    }
    .pe-lg-4 {
        padding-right: 1.5rem !important
    }
    .pe-lg-5 {
        padding-right: 3rem !important
    }
    .pb-lg-0 {
        padding-bottom: 0 !important
    }
    .pb-lg-1 {
        padding-bottom: .25rem !important
    }
    .pb-lg-2 {
        padding-bottom: .5rem !important
    }
    .pb-lg-3 {
        padding-bottom: 1rem !important
    }
    .pb-lg-4 {
        padding-bottom: 1.5rem !important
    }
    .pb-lg-5 {
        padding-bottom: 3rem !important
    }
    .ps-lg-0 {
        padding-left: 0 !important
    }
    .ps-lg-1 {
        padding-left: .25rem !important
    }
    .ps-lg-2 {
        padding-left: .5rem !important
    }
    .ps-lg-3 {
        padding-left: 1rem !important
    }
    .ps-lg-4 {
        padding-left: 1.5rem !important
    }
    .ps-lg-5 {
        padding-left: 3rem !important
    }
    .gap-lg-0 {
        gap: 0 !important
    }
    .gap-lg-1 {
        gap: .25rem !important
    }
    .gap-lg-2 {
        gap: .5rem !important
    }
    .gap-lg-3 {
        gap: 1rem !important
    }
    .gap-lg-4 {
        gap: 1.5rem !important
    }
    .gap-lg-5 {
        gap: 3rem !important
    }
    .row-gap-lg-0 {
        row-gap: 0 !important
    }
    .row-gap-lg-1 {
        row-gap: .25rem !important
    }
    .row-gap-lg-2 {
        row-gap: .5rem !important
    }
    .row-gap-lg-3 {
        row-gap: 1rem !important
    }
    .row-gap-lg-4 {
        row-gap: 1.5rem !important
    }
    .row-gap-lg-5 {
        row-gap: 3rem !important
    }
    .column-gap-lg-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }
    .column-gap-lg-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }
    .column-gap-lg-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }
    .column-gap-lg-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }
    .column-gap-lg-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }
    .column-gap-lg-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }
    .text-lg-start {
        text-align: left !important
    }
    .text-lg-end {
        text-align: right !important
    }
    .text-lg-center {
        text-align: center !important
    }
}

@media(min-width:1200px) {
    .float-xl-start {
        float: left !important
    }
    .float-xl-end {
        float: right !important
    }
    .float-xl-none {
        float: none !important
    }
    .object-fit-xl-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }
    .object-fit-xl-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }
    .object-fit-xl-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }
    .object-fit-xl-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }
    .object-fit-xl-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }
    .d-xl-inline {
        display: inline !important
    }
    .d-xl-inline-block {
        display: inline-block !important
    }
    .d-xl-block {
        display: block !important
    }
    .d-xl-grid {
        display: grid !important
    }
    .d-xl-inline-grid {
        display: inline-grid !important
    }
    .d-xl-table {
        display: table !important
    }
    .d-xl-table-row {
        display: table-row !important
    }
    .d-xl-table-cell {
        display: table-cell !important
    }
    .d-xl-flex {
        display: flex !important
    }
    .d-xl-inline-flex {
        display: inline-flex !important
    }
    .d-xl-none {
        display: none !important
    }
    .flex-xl-fill {
        flex: 1 1 auto !important
    }
    .flex-xl-row {
        flex-direction: row !important
    }
    .flex-xl-column {
        flex-direction: column !important
    }
    .flex-xl-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-xl-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-xl-grow-0 {
        flex-grow: 0 !important
    }
    .flex-xl-grow-1 {
        flex-grow: 1 !important
    }
    .flex-xl-shrink-0 {
        flex-shrink: 0 !important
    }
    .flex-xl-shrink-1 {
        flex-shrink: 1 !important
    }
    .flex-xl-wrap {
        flex-wrap: wrap !important
    }
    .flex-xl-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-xl-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-xl-start {
        justify-content: flex-start !important
    }
    .justify-content-xl-end {
        justify-content: flex-end !important
    }
    .justify-content-xl-center {
        justify-content: center !important
    }
    .justify-content-xl-between {
        justify-content: space-between !important
    }
    .justify-content-xl-around {
        justify-content: space-around !important
    }
    .justify-content-xl-evenly {
        justify-content: space-evenly !important
    }
    .align-items-xl-start {
        align-items: flex-start !important
    }
    .align-items-xl-end {
        align-items: flex-end !important
    }
    .align-items-xl-center {
        align-items: center !important
    }
    .align-items-xl-baseline {
        align-items: baseline !important
    }
    .align-items-xl-stretch {
        align-items: stretch !important
    }
    .align-content-xl-start {
        align-content: flex-start !important
    }
    .align-content-xl-end {
        align-content: flex-end !important
    }
    .align-content-xl-center {
        align-content: center !important
    }
    .align-content-xl-between {
        align-content: space-between !important
    }
    .align-content-xl-around {
        align-content: space-around !important
    }
    .align-content-xl-stretch {
        align-content: stretch !important
    }
    .align-self-xl-auto {
        align-self: auto !important
    }
    .align-self-xl-start {
        align-self: flex-start !important
    }
    .align-self-xl-end {
        align-self: flex-end !important
    }
    .align-self-xl-center {
        align-self: center !important
    }
    .align-self-xl-baseline {
        align-self: baseline !important
    }
    .align-self-xl-stretch {
        align-self: stretch !important
    }
    .order-xl-first {
        order: -1 !important
    }
    .order-xl-0 {
        order: 0 !important
    }
    .order-xl-1 {
        order: 1 !important
    }
    .order-xl-2 {
        order: 2 !important
    }
    .order-xl-3 {
        order: 3 !important
    }
    .order-xl-4 {
        order: 4 !important
    }
    .order-xl-5 {
        order: 5 !important
    }
    .order-xl-last {
        order: 6 !important
    }
    .m-xl-0 {
        margin: 0 !important
    }
    .m-xl-1 {
        margin: .25rem !important
    }
    .m-xl-2 {
        margin: .5rem !important
    }
    .m-xl-3 {
        margin: 1rem !important
    }
    .m-xl-4 {
        margin: 1.5rem !important
    }
    .m-xl-5 {
        margin: 3rem !important
    }
    .m-xl-auto {
        margin: auto !important
    }
    .mx-xl-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }
    .mx-xl-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }
    .mx-xl-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }
    .mx-xl-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }
    .mx-xl-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }
    .mx-xl-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }
    .mx-xl-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }
    .my-xl-0 {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }
    .my-xl-1 {
        margin-bottom: .25rem !important;
        margin-top: .25rem !important
    }
    .my-xl-2 {
        margin-bottom: .5rem !important;
        margin-top: .5rem !important
    }
    .my-xl-3 {
        margin-bottom: 1rem !important;
        margin-top: 1rem !important
    }
    .my-xl-4 {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important
    }
    .my-xl-5 {
        margin-bottom: 3rem !important;
        margin-top: 3rem !important
    }
    .my-xl-auto {
        margin-bottom: auto !important;
        margin-top: auto !important
    }
    .mt-xl-0 {
        margin-top: 0 !important
    }
    .mt-xl-1 {
        margin-top: .25rem !important
    }
    .mt-xl-2 {
        margin-top: .5rem !important
    }
    .mt-xl-3 {
        margin-top: 1rem !important
    }
    .mt-xl-4 {
        margin-top: 1.5rem !important
    }
    .mt-xl-5 {
        margin-top: 3rem !important
    }
    .mt-xl-auto {
        margin-top: auto !important
    }
    .me-xl-0 {
        margin-right: 0 !important
    }
    .me-xl-1 {
        margin-right: .25rem !important
    }
    .me-xl-2 {
        margin-right: .5rem !important
    }
    .me-xl-3 {
        margin-right: 1rem !important
    }
    .me-xl-4 {
        margin-right: 1.5rem !important
    }
    .me-xl-5 {
        margin-right: 3rem !important
    }
    .me-xl-auto {
        margin-right: auto !important
    }
    .mb-xl-0 {
        margin-bottom: 0 !important
    }
    .mb-xl-1 {
        margin-bottom: .25rem !important
    }
    .mb-xl-2 {
        margin-bottom: .5rem !important
    }
    .mb-xl-3 {
        margin-bottom: 1rem !important
    }
    .mb-xl-4 {
        margin-bottom: 1.5rem !important
    }
    .mb-xl-5 {
        margin-bottom: 3rem !important
    }
    .mb-xl-auto {
        margin-bottom: auto !important
    }
    .ms-xl-0 {
        margin-left: 0 !important
    }
    .ms-xl-1 {
        margin-left: .25rem !important
    }
    .ms-xl-2 {
        margin-left: .5rem !important
    }
    .ms-xl-3 {
        margin-left: 1rem !important
    }
    .ms-xl-4 {
        margin-left: 1.5rem !important
    }
    .ms-xl-5 {
        margin-left: 3rem !important
    }
    .ms-xl-auto {
        margin-left: auto !important
    }
    .p-xl-0 {
        padding: 0 !important
    }
    .p-xl-1 {
        padding: .25rem !important
    }
    .p-xl-2 {
        padding: .5rem !important
    }
    .p-xl-3 {
        padding: 1rem !important
    }
    .p-xl-4 {
        padding: 1.5rem !important
    }
    .p-xl-5 {
        padding: 3rem !important
    }
    .px-xl-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
    .px-xl-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }
    .px-xl-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }
    .px-xl-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }
    .px-xl-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }
    .px-xl-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }
    .py-xl-0 {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }
    .py-xl-1 {
        padding-bottom: .25rem !important;
        padding-top: .25rem !important
    }
    .py-xl-2 {
        padding-bottom: .5rem !important;
        padding-top: .5rem !important
    }
    .py-xl-3 {
        padding-bottom: 1rem !important;
        padding-top: 1rem !important
    }
    .py-xl-4 {
        padding-bottom: 1.5rem !important;
        padding-top: 1.5rem !important
    }
    .py-xl-5 {
        padding-bottom: 3rem !important;
        padding-top: 3rem !important
    }
    .pt-xl-0 {
        padding-top: 0 !important
    }
    .pt-xl-1 {
        padding-top: .25rem !important
    }
    .pt-xl-2 {
        padding-top: .5rem !important
    }
    .pt-xl-3 {
        padding-top: 1rem !important
    }
    .pt-xl-4 {
        padding-top: 1.5rem !important
    }
    .pt-xl-5 {
        padding-top: 3rem !important
    }
    .pe-xl-0 {
        padding-right: 0 !important
    }
    .pe-xl-1 {
        padding-right: .25rem !important
    }
    .pe-xl-2 {
        padding-right: .5rem !important
    }
    .pe-xl-3 {
        padding-right: 1rem !important
    }
    .pe-xl-4 {
        padding-right: 1.5rem !important
    }
    .pe-xl-5 {
        padding-right: 3rem !important
    }
    .pb-xl-0 {
        padding-bottom: 0 !important
    }
    .pb-xl-1 {
        padding-bottom: .25rem !important
    }
    .pb-xl-2 {
        padding-bottom: .5rem !important
    }
    .pb-xl-3 {
        padding-bottom: 1rem !important
    }
    .pb-xl-4 {
        padding-bottom: 1.5rem !important
    }
    .pb-xl-5 {
        padding-bottom: 3rem !important
    }
    .ps-xl-0 {
        padding-left: 0 !important
    }
    .ps-xl-1 {
        padding-left: .25rem !important
    }
    .ps-xl-2 {
        padding-left: .5rem !important
    }
    .ps-xl-3 {
        padding-left: 1rem !important
    }
    .ps-xl-4 {
        padding-left: 1.5rem !important
    }
    .ps-xl-5 {
        padding-left: 3rem !important
    }
    .gap-xl-0 {
        gap: 0 !important
    }
    .gap-xl-1 {
        gap: .25rem !important
    }
    .gap-xl-2 {
        gap: .5rem !important
    }
    .gap-xl-3 {
        gap: 1rem !important
    }
    .gap-xl-4 {
        gap: 1.5rem !important
    }
    .gap-xl-5 {
        gap: 3rem !important
    }
    .row-gap-xl-0 {
        row-gap: 0 !important
    }
    .row-gap-xl-1 {
        row-gap: .25rem !important
    }
    .row-gap-xl-2 {
        row-gap: .5rem !important
    }
    .row-gap-xl-3 {
        row-gap: 1rem !important
    }
    .row-gap-xl-4 {
        row-gap: 1.5rem !important
    }
    .row-gap-xl-5 {
        row-gap: 3rem !important
    }
    .column-gap-xl-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }
    .column-gap-xl-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }
    .column-gap-xl-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }
    .column-gap-xl-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }
    .column-gap-xl-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }
    .column-gap-xl-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }
    .text-xl-start {
        text-align: left !important
    }
    .text-xl-end {
        text-align: right !important
    }
    .text-xl-center {
        text-align: center !important
    }
}

@media(min-width:1400px) {
    .float-xxl-start {
        float: left !important
    }
    .float-xxl-end {
        float: right !important
    }
    .float-xxl-none {
        float: none !important
    }
    .object-fit-xxl-contain {
        -o-object-fit: contain !important;
        object-fit: contain !important
    }
    .object-fit-xxl-cover {
        -o-object-fit: cover !important;
        object-fit: cover !important
    }
    .object-fit-xxl-fill {
        -o-object-fit: fill !important;
        object-fit: fill !important
    }
    .object-fit-xxl-scale {
        -o-object-fit: scale-down !important;
        object-fit: scale-down !important
    }
    .object-fit-xxl-none {
        -o-object-fit: none !important;
        object-fit: none !important
    }
    .d-xxl-inline {
        display: inline !important
    }
    .d-xxl-inline-block {
        display: inline-block !important
    }
    .d-xxl-block {
        display: block !important
    }
    .d-xxl-grid {
        display: grid !important
    }
    .d-xxl-inline-grid {
        display: inline-grid !important
    }
    .d-xxl-table {
        display: table !important
    }
    .d-xxl-table-row {
        display: table-row !important
    }
    .d-xxl-table-cell {
        display: table-cell !important
    }
    .d-xxl-flex {
        display: flex !important
    }
    .d-xxl-inline-flex {
        display: inline-flex !important
    }
    .d-xxl-none {
        display: none !important
    }
    .flex-xxl-fill {
        flex: 1 1 auto !important
    }
    .flex-xxl-row {
        flex-direction: row !important
    }
    .flex-xxl-column {
        flex-direction: column !important
    }
    .flex-xxl-row-reverse {
        flex-direction: row-reverse !important
    }
    .flex-xxl-column-reverse {
        flex-direction: column-reverse !important
    }
    .flex-xxl-grow-0 {
        flex-grow: 0 !important
    }
    .flex-xxl-grow-1 {
        flex-grow: 1 !important
    }
    .flex-xxl-shrink-0 {
        flex-shrink: 0 !important
    }
    .flex-xxl-shrink-1 {
        flex-shrink: 1 !important
    }
    .flex-xxl-wrap {
        flex-wrap: wrap !important
    }
    .flex-xxl-nowrap {
        flex-wrap: nowrap !important
    }
    .flex-xxl-wrap-reverse {
        flex-wrap: wrap-reverse !important
    }
    .justify-content-xxl-start {
        justify-content: flex-start !important
    }
    .justify-content-xxl-end {
        justify-content: flex-end !important
    }
    .justify-content-xxl-center {
        justify-content: center !important
    }
    .justify-content-xxl-between {
        justify-content: space-between !important
    }
    .justify-content-xxl-around {
        justify-content: space-around !important
    }
    .justify-content-xxl-evenly {
        justify-content: space-evenly !important
    }
    .align-items-xxl-start {
        align-items: flex-start !important
    }
    .align-items-xxl-end {
        align-items: flex-end !important
    }
    .align-items-xxl-center {
        align-items: center !important
    }
    .align-items-xxl-baseline {
        align-items: baseline !important
    }
    .align-items-xxl-stretch {
        align-items: stretch !important
    }
    .align-content-xxl-start {
        align-content: flex-start !important
    }
    .align-content-xxl-end {
        align-content: flex-end !important
    }
    .align-content-xxl-center {
        align-content: center !important
    }
    .align-content-xxl-between {
        align-content: space-between !important
    }
    .align-content-xxl-around {
        align-content: space-around !important
    }
    .align-content-xxl-stretch {
        align-content: stretch !important
    }
    .align-self-xxl-auto {
        align-self: auto !important
    }
    .align-self-xxl-start {
        align-self: flex-start !important
    }
    .align-self-xxl-end {
        align-self: flex-end !important
    }
    .align-self-xxl-center {
        align-self: center !important
    }
    .align-self-xxl-baseline {
        align-self: baseline !important
    }
    .align-self-xxl-stretch {
        align-self: stretch !important
    }
    .order-xxl-first {
        order: -1 !important
    }
    .order-xxl-0 {
        order: 0 !important
    }
    .order-xxl-1 {
        order: 1 !important
    }
    .order-xxl-2 {
        order: 2 !important
    }
    .order-xxl-3 {
        order: 3 !important
    }
    .order-xxl-4 {
        order: 4 !important
    }
    .order-xxl-5 {
        order: 5 !important
    }
    .order-xxl-last {
        order: 6 !important
    }
    .m-xxl-0 {
        margin: 0 !important
    }
    .m-xxl-1 {
        margin: .25rem !important
    }
    .m-xxl-2 {
        margin: .5rem !important
    }
    .m-xxl-3 {
        margin: 1rem !important
    }
    .m-xxl-4 {
        margin: 1.5rem !important
    }
    .m-xxl-5 {
        margin: 3rem !important
    }
    .m-xxl-auto {
        margin: auto !important
    }
    .mx-xxl-0 {
        margin-left: 0 !important;
        margin-right: 0 !important
    }
    .mx-xxl-1 {
        margin-left: .25rem !important;
        margin-right: .25rem !important
    }
    .mx-xxl-2 {
        margin-left: .5rem !important;
        margin-right: .5rem !important
    }
    .mx-xxl-3 {
        margin-left: 1rem !important;
        margin-right: 1rem !important
    }
    .mx-xxl-4 {
        margin-left: 1.5rem !important;
        margin-right: 1.5rem !important
    }
    .mx-xxl-5 {
        margin-left: 3rem !important;
        margin-right: 3rem !important
    }
    .mx-xxl-auto {
        margin-left: auto !important;
        margin-right: auto !important
    }
    .my-xxl-0 {
        margin-bottom: 0 !important;
        margin-top: 0 !important
    }
    .my-xxl-1 {
        margin-bottom: .25rem !important;
        margin-top: .25rem !important
    }
    .my-xxl-2 {
        margin-bottom: .5rem !important;
        margin-top: .5rem !important
    }
    .my-xxl-3 {
        margin-bottom: 1rem !important;
        margin-top: 1rem !important
    }
    .my-xxl-4 {
        margin-bottom: 1.5rem !important;
        margin-top: 1.5rem !important
    }
    .my-xxl-5 {
        margin-bottom: 3rem !important;
        margin-top: 3rem !important
    }
    .my-xxl-auto {
        margin-bottom: auto !important;
        margin-top: auto !important
    }
    .mt-xxl-0 {
        margin-top: 0 !important
    }
    .mt-xxl-1 {
        margin-top: .25rem !important
    }
    .mt-xxl-2 {
        margin-top: .5rem !important
    }
    .mt-xxl-3 {
        margin-top: 1rem !important
    }
    .mt-xxl-4 {
        margin-top: 1.5rem !important
    }
    .mt-xxl-5 {
        margin-top: 3rem !important
    }
    .mt-xxl-auto {
        margin-top: auto !important
    }
    .me-xxl-0 {
        margin-right: 0 !important
    }
    .me-xxl-1 {
        margin-right: .25rem !important
    }
    .me-xxl-2 {
        margin-right: .5rem !important
    }
    .me-xxl-3 {
        margin-right: 1rem !important
    }
    .me-xxl-4 {
        margin-right: 1.5rem !important
    }
    .me-xxl-5 {
        margin-right: 3rem !important
    }
    .me-xxl-auto {
        margin-right: auto !important
    }
    .mb-xxl-0 {
        margin-bottom: 0 !important
    }
    .mb-xxl-1 {
        margin-bottom: .25rem !important
    }
    .mb-xxl-2 {
        margin-bottom: .5rem !important
    }
    .mb-xxl-3 {
        margin-bottom: 1rem !important
    }
    .mb-xxl-4 {
        margin-bottom: 1.5rem !important
    }
    .mb-xxl-5 {
        margin-bottom: 3rem !important
    }
    .mb-xxl-auto {
        margin-bottom: auto !important
    }
    .ms-xxl-0 {
        margin-left: 0 !important
    }
    .ms-xxl-1 {
        margin-left: .25rem !important
    }
    .ms-xxl-2 {
        margin-left: .5rem !important
    }
    .ms-xxl-3 {
        margin-left: 1rem !important
    }
    .ms-xxl-4 {
        margin-left: 1.5rem !important
    }
    .ms-xxl-5 {
        margin-left: 3rem !important
    }
    .ms-xxl-auto {
        margin-left: auto !important
    }
    .p-xxl-0 {
        padding: 0 !important
    }
    .p-xxl-1 {
        padding: .25rem !important
    }
    .p-xxl-2 {
        padding: .5rem !important
    }
    .p-xxl-3 {
        padding: 1rem !important
    }
    .p-xxl-4 {
        padding: 1.5rem !important
    }
    .p-xxl-5 {
        padding: 3rem !important
    }
    .px-xxl-0 {
        padding-left: 0 !important;
        padding-right: 0 !important
    }
    .px-xxl-1 {
        padding-left: .25rem !important;
        padding-right: .25rem !important
    }
    .px-xxl-2 {
        padding-left: .5rem !important;
        padding-right: .5rem !important
    }
    .px-xxl-3 {
        padding-left: 1rem !important;
        padding-right: 1rem !important
    }
    .px-xxl-4 {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important
    }
    .px-xxl-5 {
        padding-left: 3rem !important;
        padding-right: 3rem !important
    }
    .py-xxl-0 {
        padding-bottom: 0 !important;
        padding-top: 0 !important
    }
    .py-xxl-1 {
        padding-bottom: .25rem !important;
        padding-top: .25rem !important
    }
    .py-xxl-2 {
        padding-bottom: .5rem !important;
        padding-top: .5rem !important
    }
    .py-xxl-3 {
        padding-bottom: 1rem !important;
        padding-top: 1rem !important
    }
    .py-xxl-4 {
        padding-bottom: 1.5rem !important;
        padding-top: 1.5rem !important
    }
    .py-xxl-5 {
        padding-bottom: 3rem !important;
        padding-top: 3rem !important
    }
    .pt-xxl-0 {
        padding-top: 0 !important
    }
    .pt-xxl-1 {
        padding-top: .25rem !important
    }
    .pt-xxl-2 {
        padding-top: .5rem !important
    }
    .pt-xxl-3 {
        padding-top: 1rem !important
    }
    .pt-xxl-4 {
        padding-top: 1.5rem !important
    }
    .pt-xxl-5 {
        padding-top: 3rem !important
    }
    .pe-xxl-0 {
        padding-right: 0 !important
    }
    .pe-xxl-1 {
        padding-right: .25rem !important
    }
    .pe-xxl-2 {
        padding-right: .5rem !important
    }
    .pe-xxl-3 {
        padding-right: 1rem !important
    }
    .pe-xxl-4 {
        padding-right: 1.5rem !important
    }
    .pe-xxl-5 {
        padding-right: 3rem !important
    }
    .pb-xxl-0 {
        padding-bottom: 0 !important
    }
    .pb-xxl-1 {
        padding-bottom: .25rem !important
    }
    .pb-xxl-2 {
        padding-bottom: .5rem !important
    }
    .pb-xxl-3 {
        padding-bottom: 1rem !important
    }
    .pb-xxl-4 {
        padding-bottom: 1.5rem !important
    }
    .pb-xxl-5 {
        padding-bottom: 3rem !important
    }
    .ps-xxl-0 {
        padding-left: 0 !important
    }
    .ps-xxl-1 {
        padding-left: .25rem !important
    }
    .ps-xxl-2 {
        padding-left: .5rem !important
    }
    .ps-xxl-3 {
        padding-left: 1rem !important
    }
    .ps-xxl-4 {
        padding-left: 1.5rem !important
    }
    .ps-xxl-5 {
        padding-left: 3rem !important
    }
    .gap-xxl-0 {
        gap: 0 !important
    }
    .gap-xxl-1 {
        gap: .25rem !important
    }
    .gap-xxl-2 {
        gap: .5rem !important
    }
    .gap-xxl-3 {
        gap: 1rem !important
    }
    .gap-xxl-4 {
        gap: 1.5rem !important
    }
    .gap-xxl-5 {
        gap: 3rem !important
    }
    .row-gap-xxl-0 {
        row-gap: 0 !important
    }
    .row-gap-xxl-1 {
        row-gap: .25rem !important
    }
    .row-gap-xxl-2 {
        row-gap: .5rem !important
    }
    .row-gap-xxl-3 {
        row-gap: 1rem !important
    }
    .row-gap-xxl-4 {
        row-gap: 1.5rem !important
    }
    .row-gap-xxl-5 {
        row-gap: 3rem !important
    }
    .column-gap-xxl-0 {
        -moz-column-gap: 0 !important;
        column-gap: 0 !important
    }
    .column-gap-xxl-1 {
        -moz-column-gap: .25rem !important;
        column-gap: .25rem !important
    }
    .column-gap-xxl-2 {
        -moz-column-gap: .5rem !important;
        column-gap: .5rem !important
    }
    .column-gap-xxl-3 {
        -moz-column-gap: 1rem !important;
        column-gap: 1rem !important
    }
    .column-gap-xxl-4 {
        -moz-column-gap: 1.5rem !important;
        column-gap: 1.5rem !important
    }
    .column-gap-xxl-5 {
        -moz-column-gap: 3rem !important;
        column-gap: 3rem !important
    }
    .text-xxl-start {
        text-align: left !important
    }
    .text-xxl-end {
        text-align: right !important
    }
    .text-xxl-center {
        text-align: center !important
    }
}

@media(min-width:1200px) {
    .fs-1 {
        font-size: 2.5rem !important
    }
    .fs-2 {
        font-size: 2rem !important
    }
    .fs-3 {
        font-size: 1.75rem !important
    }
    .fs-4 {
        font-size: 1.5rem !important
    }
}

: {
    --swiper-theme-color: #007aff
}

:host {
    display: block;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    z-index: 1
}

.swiper {
    display: block;
    list-style: none;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    padding: 0;
    position: relative;
    z-index: 1
}

.swiper-vertical>.swiper-wrapper {
    flex-direction: column
}

.swiper-wrapper {
    box-sizing: content-box;
    display: flex;
    height: auto;
    position: relative;
    transition-property: transform;
    transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
    width: 100%;
    z-index: 1
}

.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
    transform: translateZ(0)
}

.swiper-horizontal {
    touch-action: pan-y
}

.swiper-slide {
    display: block;
    flex-shrink: 0;
    height: 100%;
    position: relative;
    transition-property: transform;
    width: 100%
}

.swiper-autoheight,
.swiper-autoheight .swiper-slide {
    height: auto
}

.swiper-autoheight .swiper-wrapper {
    align-items: flex-start;
    transition-property: transform, height
}

.swiper-backface-hidden .swiper-slide {
    backface-visibility: hidden;
    transform: translateZ(0)
}

.swiper-3d.swiper-css-mode .swiper-wrapper {
    perspective: 1200px
}

.swiper-3d .swiper-wrapper {
    transform-style: preserve-3d
}

.swiper-3d .swiper-cube-shadow,
.swiper-3d .swiper-slide {
    transform-style: preserve-3d
}

.swiper-css-mode>.swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none
}

.swiper-css-mode>.swiper-wrapper::-webkit-scrollbar {
    display: none
}

.swiper-css-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: start start
}

.swiper-css-mode.swiper-horizontal>.swiper-wrapper {
    scroll-snap-type: x mandatory
}

.swiper-css-mode.swiper-vertical>.swiper-wrapper {
    scroll-snap-type: y mandatory
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper {
    scroll-snap-type: none
}

.swiper-css-mode.swiper-free-mode>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: none
}

.swiper-css-mode.swiper-centered>.swiper-wrapper:before {
    content: "";
    flex-shrink: 0;
    order: 9999
}

.swiper-css-mode.swiper-centered>.swiper-wrapper>.swiper-slide {
    scroll-snap-align: center center;
    scroll-snap-stop: always
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper>.swiper-slide:first-child {
    margin-inline-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-horizontal>.swiper-wrapper:before {
    height: 100%;
    min-height: 1px;
    width: var(--swiper-centered-offset-after)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper>.swiper-slide:first-child {
    margin-block-start: var(--swiper-centered-offset-before)
}

.swiper-css-mode.swiper-centered.swiper-vertical>.swiper-wrapper:before {
    height: var(--swiper-centered-offset-after);
    min-width: 1px;
    width: 100%
}

.swiper-3d .swiper-slide-shadow,
.swiper-3d .swiper-slide-shadow-bottom,
.swiper-3d .swiper-slide-shadow-left,
.swiper-3d .swiper-slide-shadow-right,
.swiper-3d .swiper-slide-shadow-top {
    height: 100%;
    left: 0;
    pointer-events: none;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 10
}

.swiper-3d .swiper-slide-shadow {
    background: rgba(0, 0, 0, .15)
}

.swiper-3d .swiper-slide-shadow-left {
    background-image: linear-gradient(270deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-right {
    background-image: linear-gradient(90deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-top {
    background-image: linear-gradient(0deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-3d .swiper-slide-shadow-bottom {
    background-image: linear-gradient(180deg, rgba(0, 0, 0, .5), transparent)
}

.swiper-lazy-preloader {
    border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
    border-radius: 50%;
    border-top: 4px solid transparent;
    box-sizing: border-box;
    height: 42px;
    left: 50%;
    margin-left: -21px;
    margin-top: -21px;
    position: absolute;
    top: 50%;
    transform-origin: 50%;
    width: 42px;
    z-index: 10
}

.swiper-watch-progress .swiper-slide-visible .swiper-lazy-preloader,
.swiper:not(.swiper-watch-progress) .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s linear infinite
}

.border-right{
        border-right: 1px solid var(--border-color);
}

.border-bottom{
        border-bottom: 1px solid var(--border-color-translucent);
}

.border-left{
    border-left: 1px solid var(--border-color);
}

.nav-item.border-left{
    padding-left: 15px;
}

.btn.btn-square:not(.btn-sm):not(.btn-lg) {
    --bs-btn-padding-x: 0.525rem;
    --bs-btn-padding-y: 0.285rem;
    --bs-navbar-toggler-padding-x: 0.5rem;
    --bs-navbar-toggler-padding-y: 0.475rem;
    line-height: 26px;
    min-height: 38px;
    min-width: 30px;
    vertical-align: middle
}

.btn-group-sm>.btn.btn-square,
.btn.btn-sm.btn-square {
    --bs-btn-padding-x: 0.0rem;
    --bs-btn-padding-y: 0.0rem;
    --bs-navbar-toggler-padding-x: 0.0rem;
    --bs-navbar-toggler-padding-y: 0.0rem;
    line-height: 28px;
    min-height: 30px;
    min-width: 30px;
    vertical-align: middle
}

.btn-group-sm>.btn.btn-square svg,
.btn.btn-sm.btn-square svg {
    height: 26px;
    margin-top: -2px
}

.btn-group-lg>.btn.btn-square,
.btn.btn-lg.btn-square {
    --bs-btn-padding-x: 0.0rem;
    --bs-btn-padding-y: 0.0rem;
    --bs-navbar-toggler-padding-x: 0.0rem;
    --bs-navbar-toggler-padding-y: 0.0rem;
    line-height: 46px;
    min-height: 48px;
    min-width: 48px;
    vertical-align: middle
}

.btn-group-lg>.btn.btn-square svg,
.btn.btn-lg.btn-square svg {
    height: 26px;
    margin-top: -2px
}

.btn.btn-link {
    --bs-btn-color: var(--link-color);
    --bs-btn-hover-color: var(--main-color);
    --bs-btn-hover-bg: rgba(var(--main-color-rgb), 0.1);
    --bs-btn-active-color: var(--main-color-text);
    --bs-btn-active-bg: var(--main-color);
    text-decoration: none
}

.btn.btn-link i,
.btn.btn-link svg {
    color: var(--link-color);
    stroke: var(--link-color)
}

.btn.btn-link:focus,
.btn.btn-link:hover {
    color: var(--bs-btn-hover-color)
}

.btn.btn-link:focus i,
.btn.btn-link:focus svg,
.btn.btn-link:hover i,
.btn.btn-link:hover svg {
    color: var(--bs-btn-hover-color);
    stroke: var(--bs-btn-hover-color)
}

.btn.btn-link.active i,
.btn.btn-link.active svg,
.btn.btn-link.show i,
.btn.btn-link.show svg,
.btn.btn-link:active i,
.btn.btn-link:active svg {
    color: var(--bs-btn-active-color);
    stroke: var(--bs-btn-active-color)
}

.btn.btn-link.active:focus,
.btn.btn-link.active:hover,
.btn.btn-link.show:focus,
.btn.btn-link.show:hover,
.btn.btn-link:active:focus,
.btn.btn-link:active:hover {
    color: var(--bs-btn-active-color)
}

.btn.text-white {
    --bs-btn-hover-bg: rgba(var(--bs-white-rgb), 0.15)
}

.btn.text-white i,
.btn.text-white svg {
    color: var(--bs-white);
    stroke: var(--bs-white)
}

.btn-outline-theme {
    --bs-btn-color: rgba(var(--main-color-rgb), 0.75);
    --bs-btn-border-color: rgba(var(--main-color-rgb), 0.75);
    --bs-btn-hover-bg: rgba(var(--main-color-rgb), 0.85);
    --bs-btn-hover-border-color: rgba(var(--main-color-rgb), 0.85);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: rgba(var(--main-color-rgb), 1);
    --bs-btn-active-border-color: rgba(var(--main-color-rgb), 1);
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-color: rgba(var(--main-color-rgb), 0.5);
    --bs-btn-disabled-border-color: rgba(var(--main-color-rgb), 0.5)
}



.btn-theme.btn-light-color {
    --bs-btn-border-color: transparent;
    --bs-btn-bg: rgba(var(--main-color-rgb), 0.5)
}

.btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: linear-gradient(180deg, var(--main-color) 0%, var(--secondary-color) 100%);
    --bs-btn-border-color: rgba(255, 255, 255, .15);
    --bs-btn-border-width: 3px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: linear-gradient(180deg, var(--secondary-color) 100%) , var(--main-color) 0% ;
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: 0px 0px 0px 0px rgba(79, 26, 214, 0.3);
}


.btn-outline-success {
    --bs-btn-color: var(--bs-success);
    --bs-btn-border-color: var(--bs-success);
    --bs-btn-hover-bg: var(--bs-success);
    --bs-btn-hover-border-color: var(--bs-success)
}

.btn-outline-danger {
    --bs-btn-color: #dc3545;
    --bs-btn-border-color: #dc3545;
    --bs-btn-border-width: 1px;
    --bs-btn-active-color: #ffffffc9;
    --bs-btn-active-bg: linear-gradient(180deg, rgb(220 53 69) 0%, rgb(167 24 38) 100%);
    --bs-btn-active-border-color: rgba(255, 255, 255, .25);
    --bs-btn-shadow: 0px 0px 0px 0px #dc354547; 
}

.btn-group .btn-link {
    --bs-btn-bg: rgba(var(--main-color-rgb), 0.08)
}

.navbar-toggler {
    --bs-navbar-toggler-focus-width: 1px
}

.navbar-toggler:not(.btn-outline-) {
    --border-width: 0
}

.breadcrumb {
    --bs-breadcrumb-font-size: 14px
}

.breadcrumb .breadcrumb-item a {
    color: var(--main-color);
    text-decoration: none
}

.breadcrumb .breadcrumb-item a:focus,
.breadcrumb .breadcrumb-item a:hover {
    color: var(--main-color-hover)
}

.breadcrumb .breadcrumb-item.active {
    color: var(--text-secondary)
}

[aria-label=breadcrumb] {
    --bs-breadcrumb-divider: ""
}

[aria-label=breadcrumb] .bi:before {
    line-height: 1.5
}

.card.kf-card .card-footer,
.card.kf-card .card-header {
    border-width: 0
}

.card.kf-card.blur {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: hsla(0, 0%, 100%, .35)
}

.card.selectable {
    cursor: pointer
}

.card.selectable.active {
    border-color: var(--main-color);
    box-shadow: inset 0 0 0 1px var(--main-color)
}

a.card {
    cursor: pointer
}

a.card:focus,
a.card:hover {
    box-shadow: 0 6px 16px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .05)
}

.accordion {
    --border-width: 1px;
    --bs-accordion-active-color: var(--main-color);
    --bs-accordion-active-bg: rgba(var(--main-color-rgb), 0.15);
      
}

.accordion-item{
    background: var(--card-primary-background);
    cursor: pointer;
    padding: 15px 20px;
    border-radius: var(--border-radius-sm);
    outline-color: var(--border-color);
    outline-offset: -1px;
    border-style: none;
    outline-width: 1px;
    outline-style: solid;
    margin-bottom: 10px;
}

.accordion .accordion-header .accordion-button {
    box-shadow: none;
    outline: none
}

.accordion.kf-accordion {
    --bs-card-cap-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-btn-padding-x: 1rem;
    --bs-accordion-btn-padding-y: 0.75rem;
    --bs-accordion-active-color: var(--main-color);
    --bs-accordion-active-bg: var(--bs-accordion-bg)
}

.accordion.kf-accordion .accordion-item .accordion-header {
    border-radius: var(--border-radius)
}

.accordion.kf-accordion .accordion-item .accordion-header .accordion-button {
    background-color: transparent;
    border-radius: var(--border-radius);
    box-shadow: none;
    outline: 0
}

.accordion.kf-accordion .accordion-item .accordion-collapse {
    border: 0;
    border-radius: var(--border-radius)
}

.accordion.kf-accordion.blur {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: hsla(0, 0%, 100%, .35)
}

.alert.alert-normal {
    --bs-alert-color: #fff;
    --bs-alert-border-color: rgba(0, 0, 0, .2);
    --bs-alert-link-color: #fff
}

.alert.alert-normal.alert-theme {
    --bs-alert-bg: var(--main-color)
}

.alert.alert-normal.alert-theme-accent {
    --bs-alert-bg: var(--kf-accent-1)
}

.alert.alert-normal.alert-primary {
    --bs-alert-bg: var(--bs-primary)
}

.alert.alert-normal.alert-secondary {
    --bs-alert-bg: var(--text-secondary)
}

.alert.alert-normal.alert-success {
    --bs-alert-bg: var(--bs-success)
}

.alert.alert-normal.alert-info {
    --bs-alert-bg: var(--bs-info)
}

.alert.alert-normal.alert-warning {
    --bs-alert-bg: var(--bs-warning)
}

.alert.alert-normal.alert-danger {
    --bs-alert-bg: var(--bs-danger)
}

.alert.alert-normal.alert-light {
    --bs-alert-bg: var(--bs-light);
    --bs-alert-color: #000;
    --bs-alert-link-color: var(--main-color)
}

[dir=rtl] .accordion-button:after {
    margin-left: 0;
    margin-right: auto
}

.daterangepicker .next.available{
    background:var(--card-primary-background);
}

.daterangepicker {
    background-color: var(--body-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius);
    overflow: hidden;
    position: absolute;
    display:none;
}

.daterangepicker .drp-calendar {
    max-width: none
}

.daterangepicker .drp-calendar .calendar-table {
    background-color: transparent;
    border: none
}

.daterangepicker .drp-calendar .calendar-table table {
    border-collapse: separate !important;
    border-spacing: 1px
}

.daterangepicker .drp-calendar .calendar-table table th {
    border: 0;
    border-radius: var(--border-radius);
    font-weight: 500;
    height: 34px
}

.daterangepicker .drp-calendar .calendar-table table th.available:hover {
    background-color: rgba(var(--main-color-rgb), .1);
    color: var(--main-color-text)
}

.daterangepicker .drp-calendar .calendar-table table th.available:hover svg {
    stroke: var(--main-color-text)
}

.daterangepicker .drp-calendar .calendar-table table th.month {
    font-size: 1.15rem
}

.daterangepicker .drp-calendar .calendar-table table td.available {
    background-color: hsla(0, 0%, 100%, .05)
}

.daterangepicker .drp-calendar .calendar-table table td.available:hover {
    background-color: rgba(var(--main-color-rgb), .15);
    border-color: rgba(var(--main-color-rgb), .15);
    color: var(--main-color)
}

.daterangepicker .drp-calendar .calendar-table table td.in-range.today,
.daterangepicker .drp-calendar .calendar-table table td.today {
    background-color: var(--card-primary-background);
    color: var(--main-color-text) !important
}

.daterangepicker .drp-calendar .calendar-table table td.in-range.today:hover,
.daterangepicker .drp-calendar .calendar-table table td.today:hover {
    color: var(--main-color-text) !important
}

.daterangepicker .drp-calendar .calendar-table table td.in-range.today.active,
.daterangepicker .drp-calendar .calendar-table table td.today.active {
    color: var(--main-color-text)
}

.daterangepicker .drp-calendar .calendar-table table td.active,
.daterangepicker .drp-calendar .calendar-table table td.end-date,
.daterangepicker .drp-calendar .calendar-table table td.start-date {
    background-color: var(--main-color);
    border: 1px solid var(--main-color) !important;
    color: var(--main-color-text)
}

.daterangepicker .drp-calendar .calendar-table table td.active.in-range,
.daterangepicker .drp-calendar .calendar-table table td.end-date.in-range,
.daterangepicker .drp-calendar .calendar-table table td.start-date.in-range {
    background-color: transparent;
    border: 1px solid var(--main-color) !important
}

.daterangepicker .drp-calendar .calendar-table table td.active:hover,
.daterangepicker .drp-calendar .calendar-table table td.end-date:hover,
.daterangepicker .drp-calendar .calendar-table table td.start-date:hover {
    color: var(--main-color-text) !important
}

.daterangepicker .drp-calendar .calendar-table table td.active.active,
.daterangepicker .drp-calendar .calendar-table table td.end-date.active,
.daterangepicker .drp-calendar .calendar-table table td.start-date.active {
    background-color: var(--main-color) !important;
    border: 1px solid var(--main-color) !important;
    color: var(--main-color-text)
}

.daterangepicker .drp-calendar .calendar-table table td.in-range {
    background-color: var(--main-color);
}

.daterangepicker .drp-calendar .calendar-table table td.off {
    background-color: rgba(var(--main-color-rgb), .08);
    color: var(--text-secondary);
    opacity: .35
}

.daterangepicker .drp-calendar.left {
    border-color: var(--border-color) !important
}

.daterangepicker:after,
.daterangepicker:before {
    display: none
}

.daterangepicker .drp-buttons {
    border-color: var(--border-color) !important;
    padding: .75rem
}

.daterangepicker .drp-buttons .btn {
    font-weight: 500
}

.daterangepicker .ranges ul li {
    font-size: 14px;
    line-height: 20px
}

.daterangepicker .ranges ul li:hover {
    background-color: rgba(var(--main-color-rgb), .1)
}

.daterangepicker .ranges ul li.active {
    background-color: var(--main-color)
}

.inline-calendar .daterangepicker {
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none;
    display: block !important;
    left: 0 !important;
    margin: 0 auto !important;
    padding: 0;
    position: relative;
    right: 0 !important;
    top: 0 !important;
    z-index: 0
}

.inline-calendar .daterangepicker .calendar-table th {
    height: 34px
}

.inline-calendar .daterangepicker .calendar-table th.month {
    font-size: 1.25rem
}

.inline-calendar .daterangepicker .calendar-table td {
    height: 34px
}

.inline-calendar .daterangepicker .drp-calendar.left {
    border: 0;
    padding: 0;
    width: 100%
}

.inline-calendar .daterangepicker .drp-buttons {
    display: none
}

.dateselect .swiper-slide {
    border-radius: var(--border-radius);
    color: var(--text-secondary);
    cursor: pointer;
    margin: 0 5px;
    max-width: 40px;
    padding: 10px 5px 5px;
    text-align: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none
}

.dateselect .swiper-slide p {
    font-size: 13px;
    margin-bottom: 5px
}

.dateselect .swiper-slide .avatar {
    color: var(--main-color)
}

.dateselect .swiper-slide:focus,
.dateselect .swiper-slide:hover {
    background-color: rgba(var(--main-color-rgb), .1);
    cursor: pointer
}

.dateselect .swiper-slide:focus .avatar,
.dateselect .swiper-slide:hover .avatar {
    background-color: rgba(var(--main-color-rgb), .1)
}

.dateselect .swiper-slide.active {
    background-color: var(--main-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1);
    color: var(--main-color-text)
}

.dateselect .swiper-slide.active .text-secondary {
    color: var(--main-color-text) !important
}

.dateselect .swiper-slide.active .avatar {
    background-color: var(--main-color);
    color: var(--main-color-text)
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr td .card {
    height: calc(var(--aaptsminuts, 1)*2px - 1px);
    left: .5rem;
    margin-top: calc(var(--starttime)*2px);
    overflow-y: auto;
    position: absolute;
    top: 0;
    width: calc(100% - 1rem);
    z-index: 9
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr td .card.overlap-2 {
    width: calc(50% - .75rem)
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr td .card.overlap-2.two {
    left: calc(50% + .25rem)
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr td .card.overlap-3 {
    width: calc(33.3% - .66rem)
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr td .card.overlap-3.two {
    left: calc(33.3% + .25rem)
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr td .card.overlap-3.three {
    left: calc(66.6% + .25rem)
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr.slot td {
    border-bottom: none;
    border-top: 1px dashed var(--border-color)
}

.table-timestamp-wrap .table-scheduled-fixed-cell.timepunch-table tbody tr.slot td .time-punch {
    background-color: var(--main-color-text);
    color: var(--text-secondary)
}

.fc {
    overflow: hidden;
    --fc-small-font-size: 0.95rem;
    --fc-today-bg-color: rgba(var(--main-color-rgb), 0.025)
}

.fc a {
    text-decoration: none
}

.fc .fc-button {
    background-color: rgba(var(--main-color-rgb), .75);
    border-color: var(--main-color);
    border-radius: var(--border-radius);
    border-width: 0;
    text-transform: capitalize
}

.fc .fc-button:focus,
.fc .fc-button:hover {
    background-color: rgba(var(--main-color-rgb), .85);
    box-shadow: none;
    color: var(--main-color-text);
    outline: none
}

.fc .fc-button.active,
.fc .fc-button.fc-button-active:not(:disabled),
.fc .fc-button:active {
    background-color: rgba(var(--main-color-rgb), 1) !important;
    box-shadow: none !important;
    color: var(--main-color-text);
    outline: none
}

.fc .fc-button.fc-today-button {
    background-color: rgba(var(--main-color-rgb), .75);
    border-color: var(--main-color)
}

.fc .fc-button.fc-today-button:focus,
.fc .fc-button.fc-today-button:hover {
    background-color: rgba(var(--main-color-rgb), .85);
    box-shadow: none;
    color: var(--main-color-text);
    outline: none
}

.fc .fc-button.fc-today-button.active,
.fc .fc-button.fc-today-button.fc-button-active:not(:disabled),
.fc .fc-button.fc-today-button:active {
    background-color: rgba(var(--main-color-rgb), 1) !important;
    box-shadow: none !important;
    color: var(--main-color-text);
    outline: none
}

.fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: 0;
    padding: 0
}

.fc .fc-toolbar.fc-header-toolbar .fc-toolbar-title {
    font-family: var(--kf-content-font);
    font-size: 1.25rem;
    font-weight: 500
}

.fc.fc-theme-standard table {
    border: 0;
    border-collapse: collapse
}

.fc.fc-theme-standard table th {
    border: none;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    padding: 10px 0;
    text-decoration: none
}

.fc.fc-theme-standard table th a.fc-col-header-cell-cushion {
    color: var(--main-color);
    font-weight: 500;
    text-transform: uppercase
}

.fc.fc-theme-standard table td {
    border: none
}

.fc.fc-theme-standard table td .fc-daygrid-day-number,
.fc.fc-theme-standard table td .fc-timegrid-axis-cushion,
.fc.fc-theme-standard table td .fc-timegrid-slot-label-cushion {
    color: var(--text-secondary);
    font-size: 14px
}

.fc.fc-theme-standard table td .fc-daygrid-day-frame {
    min-height: 120px
}

.fc.fc-theme-standard table table {
    width: 100% !important
}

.fc.fc-theme-standard table table td {
    background-color: transparent;
    border: 1px solid var(--border-color);
    color: inherit;
    font-size: 16px;
    font-weight: 400;
    padding: 0;
    text-decoration: none;
    transition: all .5s ease
}

.fc.fc-theme-standard table table td a {
    color: inherit;
    font-weight: 400
}

.fc.fc-theme-standard table table td .fc-daygrid-more-link {
    font-size: 10px
}

.fc.fc-theme-standard table table td:first-child {
    border-left: none
}

.fc.fc-theme-standard table table td:last-child {
    border-right: none
}

.fc.fc-theme-standard table table td.fc-day-other {
    background-color: rgba(var(--main-color-rgb), .05);
    color: var(--text-secondary)
}

.fc.fc-theme-standard table table tr:first-child td,
.fc.fc-theme-standard table table tr:last-child td {
    border-bottom: none
}

.fc.fc-theme-standard table .fc-daygrid-body {
    transition: all .5s ease;
    width: 100% !important
}

.fc.fc-theme-standard table .fc-daygrid-event-harness-abs {
    transition: all .5s ease
}

.fc .fc-event,
.fc .fc-h-event {
    align-items: flex-start;
    align-items: start;
    align-self: start;
    border: 0;
    border: var(--border-width) solid transparent;
    border-radius: var(--border-radius);
    box-shadow: none;
    flex-direction: column;
    margin-bottom: 1px;
    overflow: hidden;
    padding: 5px 10px;
    transition: all .5s ease;
    white-space: nowrap
}

.fc .fc-event>*,
.fc .fc-h-event>* {
    z-index: 1
}

.fc .fc-event:before,
.fc .fc-h-event:before {
    background-color: transparent;
    border-radius: var(--border-radius);
    content: "";
    height: 100%;
    left: 0;
    opacity: .15;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 0
}

.fc .fc-event .fc-daygrid-event-dot,
.fc .fc-h-event .fc-daygrid-event-dot {
    display: none
}

.fc .fc-event .fc-event-time,
.fc .fc-h-event .fc-event-time {
    color: var(--text-secondary)
}

.fc .fc-event .fc-event-title,
.fc .fc-h-event .fc-event-title {
    font-weight: 400;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%
}

.fc .fc-event .fc-event-main,
.fc .fc-h-event .fc-event-main {
   color: var(--kf-bg-1);
}

.fc .fc-event.text-white .fc-event-main,
.fc .fc-h-event.text-white .fc-event-main {
    color: #fff
}

.fc .fc-event .badge,
.fc .fc-h-event .badge {
    border-radius: calc(var(--border-radius) - 3px)
}

.fc .fc-timegrid-slot {
    height: 30px
}

.fc .fc-scrollgrid-section-sticky>* {
    background-color: transparent
}

.fc .fc-event,
.fc .fc-h-event {
    --border-radius: 0.725rem
}

@media screen and (max-width:575px) {
    .notification-dd{
        width: 100%;
        min-width: 100%;
        height: 100vh;
        border-radius: 0 !important;
    }
    .fc .fc-toolbar.fc-header-toolbar {
        flex-wrap: wrap
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:first-child {
        order: 2
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(2) {
        margin-bottom: 1rem;
        order: 1;
        width: 100%
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-toolbar-chunk:nth-child(3) {
        order: 3
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-button {
        font-size: .95rem
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-button .fc-icon {
        font-size: 1rem
    }
    .fc .fc-toolbar.fc-header-toolbar .fc-button:not(.fc-prev-button):not(.fc-next-button) {
        letter-spacing: 100px;
        max-width: 40px;
        text-align: center;
        text-indent: 5px;
        white-space: nowrap
    }
    .fc.fc-theme-standard table table td .fc-daygrid-more-link {
        border-radius: 5px;
        display: block;
        height: 8px;
        overflow: hidden;
        text-indent: 15px;
        width: 8px
    }
}

.bg-r-gradient {
    background-color: var(--kf-bg-1);
    background-image: radial-gradient(circle at 20% 15%, var(--kf-bg-1) 15%, var(--kf-bg-2) 100%) !important
}

.bg-gradient-1 {
    background-image: radial-gradient(circle at 30% 30%, #f6f7ed 0, #cdedf8 50%, #f5c8f1 100%)
}

.bg-gradient-2 {
    background-image: radial-gradient(circle at 30% 30%, #fff6ec 0, #fbe2fc 100%)
}

.bg-gradient-3 {
    background-image: radial-gradient(circle at 30% 30%, #f8f3e3 0, #dbf7f5 100%)
}

.bg-gradient-4 {
    background-image: radial-gradient(circle at 30% 30%, #ecf7fa 0, #f3f2d8 50%, #f5decd 100%)
}

.bg-gradient-5 {
    background-image: radial-gradient(circle at 30% 30%, #e0f8f8 0, #fce6f8 50%, #dfd7f5 100%)
}

.bg-gradient-6 {
    background-image: radial-gradient(circle at 30% 30%, #faeae3 0, #c8e5f7 100%)
}

.bg-gradient-7 {
    background-image: radial-gradient(circle at 30% 30%, #e6f8f0 2%, #d3ecf5 93.6%)
}

.bg-gradient-8 {
    background-image: radial-gradient(circle at 30% 30%, #f8f5e1 0, #f4e3f5 46.4%, #dae7f5 100%)
}

.bg-gradient-9 {
    background-image: radial-gradient(circle at 30% 30%, #f4f5e6 11.2%, #ece2d8 100%)
}

.bg-gradient-10 {
    background-image: radial-gradient(circle at 30% 30%, #fde7f3 0, #eae9ff 46%, #dfffee 100%)
}

.text-theme-1 {
    color: var(--main-color) !important
}

.text-success i,
.text-success svg {
    color: var(--bs-success) !important;
    stroke: var(--bs-success) !important
}

.text-success.btn-link:focus,
.text-success.btn-link:hover {
    background-color: rgba(var(--bs-success-rgb), .15)
}

.text-yellow {
    color: var(--bs-yellow) !important
}

.text-white .text-secondary {
    color: hsla(0, 0%, 100%, .65) !important
}

.bg-blue {
    background-color: var(--bs-blue)
}

.bg-indigo {
    background-color: var(--bs-indigo)
}

.bg-purple {
    background-color: var(--bs-purple)
}

.bg-pink {
    background-color: var(--bs-pink)
}

/* Bootstrap Primary */

/* Bootstrap Secondary */

/* Bootstrap Success */

/* Bootstrap Danger */

/* Bootstrap Warning */

/* Bootstrap Info */

/* Bootstrap Dark */

/* Bootstrap Darker Gray */

/* Bootstrap Pink */

/* Bootstrap Orange */

/* Bootstrap Purple */

/* Bootstrap Teal */

/* Bootstrap Dark */

/* Bootstrap Blue */

/* Bootstrap Purple */

/* Bootstrap Violet */

/* Bootstrap Dark Gray */

/* Bootstrap Green */

/* Bootstrap Light Blue */

/* Bootstrap Green */

/* Bootstrap Dark */

/* Bootstrap Orange */

/* Bootstrap Pink */

/* Bootstrap Info */

/* Bootstrap Yellow */

/* Bootstrap Red */

.bg-orange {
    background-color: var(--bs-orange)
}

.bg-yellow {
    background-color: var(--bs-yellow)
}

.bg-green {
    background-color: var(--bs-green)
}

.bg-teal {
    background-color: var(--bs-teal)
}

.bg-cyan {
    background-color: var(--bs-cyan)
}

.bg-chocolate {
    background-color: var(--bs-chocolate)
}

.bg-brown {
    background-color: var(--bs-brown)
}

.bg-grey {
    background-color: var(--bs-grey)
}

.bg-white-opacity {
    background-color: hsla(0, 0%, 100%, .25)
}

.blur {
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px)
}

.blur {
    background-color: hsla(0, 0%, 100%, .1)
}

.borderedui,
body.bg-white {
    --border-width: 1px
}

.borderedui .accordion.kf-accordion,
body.bg-white .accordion.kf-accordion {
    --bs-accordion-border-width: 1px
}

.borderedui .accordion.kf-accordion .accordion-item:not(:first-of-type),
body.bg-white .accordion.kf-accordion .accordion-item:not(:first-of-type) {
    border: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color)
}

.borderedui .kf-card,
body.bg-white .kf-card {
    border-width: 1px
}

.borderedui .search-wrap .border-0,
body.bg-white .search-wrap .border-0 {
    border: var(--border-width) solid var(--border-color) !important
}

.white {
    --swiper-theme-color: #fff;
    --swiper-pagination-bullet-inactive-color: #fff;
    --swiper-pagination-bullet-inactive-opacity: 0.4
}

.no-caret:after {
    display: none
}

.dropdown .dropdown-menu .dropdown-item {
    border-radius: var(--border-radius)
}

.oh{
        white-space: nowrap;
    overflow: hidden;
}

.dropdown .dropdown-menu .dropdown-item i,
.dropdown .dropdown-menu .dropdown-item svg {
    color: var(--bs-dropdown-link-color);
    stroke: var(--bs-dropdown-link-color)
}

.dropdown .dropdown-menu .dropdown-item svg {
    margin-top: -3px
}

.dropdown .dropdown-menu .dropdown-item:focus i,
.dropdown .dropdown-menu .dropdown-item:focus svg,
.dropdown .dropdown-menu .dropdown-item:hover i,
.dropdown .dropdown-menu .dropdown-item:hover svg {
    color: var(--bs-dropdown-link-hover-color);
    stroke: var(--bs-dropdown-link-hover-color)
}

.dropdown .dropdown-menu .dropdown-item.active i,
.dropdown .dropdown-menu .dropdown-item.active svg,
.dropdown .dropdown-menu .dropdown-item:active i,
.dropdown .dropdown-menu .dropdown-item:active svg {
    color: var(--bs-dropdown-link-active-color);
    stroke: var(--bs-dropdown-link-active-color)
}

.dropdown .list-group {
    --bs-list-group-item-padding-x: 0.5rem
}

.dropdown .dropdown.dropend:hover [data-bs-trigger=hover]~.dropdown-menu {
    display: block;
    left: 100%;
    margin-left: 0;
    right: auto;
    top: 0
}

.dropdown .dropdown.dropend .dropdown-menu.show {
    display: block;
    left: 100%;
    margin-left: 0 !important;
    right: auto;
    top: 0
}

.notification-dd {
    width: 300px
}

.notification-dd li {
    border-bottom: 1px solid var(--border-color)
}

.notification-dd li .dropdown-item {
    white-space: normal
}

.notification-dd li:last-child {
    border-bottom: 0
}

[dir=rtl] .dropdown .dropdown-menu {
    text-align: right
}

[dir=rtl] .dropdown .dropdown-menu .dropdown-item i:first-child,
[dir=rtl] .dropdown .dropdown-menu .dropdown-item svg:first-child {
    margin-left: 10px;
    margin-right: 0
}

[dir=rtl] .dropdown .dropdown-menu-end {
    left: 0;
    right: auto
}


.kf-footer a.active,
.kf-footer a:active {
    color: var(--main-color-active)
}

.kf-footer .nav .nav-item .nav-link,
.kf-footer .nav.small .nav-item .nav-link {
    --bs-nav-link-color: var(--kf-footer-link-text);
    --bs-nav-link-hover-color: var(--kf-footer-link-hover-text);
    --bs-nav-link-active-color: var(--kf-footer-link-active-text);
    --bs-nav-link-padding-y: 0.15rem
}

.kf-footer .nav .nav-item .nav-link.active,
.kf-footer .nav .nav-item .nav-link:active,
.kf-footer .nav.small .nav-item .nav-link.active,
.kf-footer .nav.small .nav-item .nav-link:active {
    color: var(--kf-footer-link-active-text)
}

.ssb.classic footer,
.ssb.boxed footer {
    padding-left: var(--sidebar-width)
}

.ssb.small footer{
    margin-left: var(--sidebar-small-width)
}

@media screen and (max-width:991px) {
    .option-grid div[data] {
        grid-template-columns: repeat(2, minmax(60px, 1fr)) !important;
    }
    .ssb.classic footer,
    .ssb.boxed footer {
        padding-left: 0
    }
   
}

.form-control,
.form-select,
input,
select,
textarea {
    box-shadow: none;
    outline: none
}

.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: rgba(var(--main-color-rgb), .5);
    box-shadow: 0 0 0 .25rem rgba(var(--main-color-rgb), .15)
}

.form-check {
    --border-width: 1px
}

.timeline {
    list-style: none;
    margin: 0;
    padding: 0
}

.timeline li {
    padding: 0 0 15px 30px;
    position: relative
}

.timeline li:before {
    height: 100%;
    left: 10px;
    opacity: .25;
    top: 0;
    width: 1px
}

.timeline li:after,
.timeline li:before {
    background-color: var(--text-secondary);
    content: "";
    position: absolute
}

.timeline li:after {
    border-radius: 2px;
    height: 10px;
    left: 5px;
    top: 5px;
    width: 10px
}

.timeline.circle li:after {
    display: none
}

.timeline.circle li .circle-dot {
    border-radius: var(--border-radius);
    height: 10px;
    left: 5px;
    position: absolute;
    top: 5px;
    width: 10px
}

.check-strength {
    line-height: 24px
}

.check-strength>div {
    border-radius: 3px;
    display: inline-block;
    height: 4px;
    margin-right: 2px;
    opacity: .2;
    transition: all .5s ease;
    vertical-align: middle;
    width: 15px
}

.check-strength>div:first-child,
.check-strength>div:nth-child(2) {
    background-color: var(--bs-danger)
}

.check-strength>div:nth-child(3),
.check-strength>div:nth-child(4) {
    background-color: var(--bs-warning)
}

.check-strength>div:nth-child(5),
.check-strength>div:nth-child(6) {
    background-color: var(--bs-success)
}

.check-strength.good>div:first-child,
.check-strength.good>div:nth-child(2),
.check-strength.good>div:nth-child(3),
.check-strength.good>div:nth-child(4),
.check-strength.strong>div:first-child,
.check-strength.strong>div:nth-child(2),
.check-strength.strong>div:nth-child(3),
.check-strength.strong>div:nth-child(4),
.check-strength.strong>div:nth-child(5),
.check-strength.strong>div:nth-child(6),
.check-strength.weak>div:first-child,
.check-strength.weak>div:nth-child(2) {
    opacity: 1
}

.sw {
    --sw-toolbar-btn-background-color: var(--main-color);
    --sw-anchor-active-primary-color: rgba(var(--main-color-rgb), 0.75);
    --sw-progress-color: rgba(var(--main-color-rgb), 0.75);
    --sw-loader-color: rgba(var(--main-color-rgb), 0.75);
    --sw-anchor-done-primary-color: rgba(var(--secondary-color-rgb), 0.75);
    --sw-anchor-default-secondary-color: rgba(var(--text-secondary-rgb), 0.75);
    border: 0
}

.sw.sw-theme-basic>.nav {
    box-shadow: none !important
}

.sw.sw-theme-basic>.nav .nav-item .nav-link {
    display: flex;
    margin: 0;
    padding: 1rem;
    text-align: start
}

.sw.sw-theme-basic>.nav .nav-item .nav-link>div {
    display: inline-block;
    vertical-align: middle
}

.sw.sw-theme-basic>.nav .nav-item .nav-link .num {
    background-color: rgba(var(--text-secondary-rgb), .75);
    border-radius: 22px;
    color: var(--main-color-text);
    float: none;
    font-size: 1.5rem;
    font-weight: 500;
    height: 44px;
    line-height: 44px;
    margin-right: 1rem;
    width: 44px
}

.sw.sw-theme-basic>.nav .nav-item .nav-link:after {
    bottom: -4px;
    height: 4px
}

.sw.sw-theme-basic>.nav .nav-item .nav-link.done,
.sw.sw-theme-basic>.nav .nav-item .nav-link.done:focus,
.sw.sw-theme-basic>.nav .nav-item .nav-link.done:hover {
    color: var(--bs-success)
}

.sw.sw-theme-basic>.nav .nav-item .nav-link.done .num,
.sw.sw-theme-basic>.nav .nav-item .nav-link.done:after {
    background-color: var(--bs-success)
}

.sw.sw-theme-basic>.nav .nav-item .nav-link:focus,
.sw.sw-theme-basic>.nav .nav-item .nav-link:hover {
    color: var(--sw-anchor-default-secondary-color)
}

.sw.sw-theme-basic>.nav .nav-item .nav-link.active .num {
    background-color: var(--main-color)
}

.sw.sw-theme-basic .sw-toolbar-elm {
    border-top: 1px solid var(--border-color);
    margin-left: calc(var(--gutter-x)*-1);
    margin-right: calc(var(--gutter-x)*-1);
    padding: var(--bs-card-spacer-y) var(--gutter-x)
}

.sw.sw-theme-dots>.nav {
    box-shadow: none !important;
    margin-top: 1.5rem
}

.sw.sw-theme-dots>.nav .nav-item .nav-link {
    color: var(--link-color);
    margin-top: 40px
}

.sw.sw-theme-dots>.nav .nav-item .nav-link .num {
    font-size: 20px;
    font-weight: 400;
    top: -30px
}

.sw.sw-theme-dots>.nav .nav-item .nav-link:after {
    background-color: var(--link-color) !important;
    border: 0;
    box-shadow: none;
    font-size: 24px;
    height: 36px;
    top: -38px;
    width: 36px
}

.sw.sw-theme-dots>.nav .nav-item .nav-link.done {
    color: var(--bs-success) !important
}

.sw.sw-theme-dots>.nav .nav-item .nav-link.done:after,
.sw.sw-theme-dots>.nav .nav-item .nav-link.done:focus:after,
.sw.sw-theme-dots>.nav .nav-item .nav-link.done:hover:after {
    background-color: var(--bs-success) !important
}

.sw.sw-theme-dots>.nav .nav-item .nav-link:focus,
.sw.sw-theme-dots>.nav .nav-item .nav-link:hover {
    color: var(--kf-accent-1)
}

.sw.sw-theme-dots>.nav .nav-item .nav-link:focus:after,
.sw.sw-theme-dots>.nav .nav-item .nav-link:hover:after {
    background-color: var(--kf-accent-1) !important
}

.sw.sw-theme-dots>.nav .nav-item .nav-link.active {
    color: var(--main-color)
}

.sw.sw-theme-dots>.nav .nav-item .nav-link.active:after {
    background-color: var(--main-color) !important
}

.sw.sw-theme-dots>.nav:before {
    height: 2px;
    top: 20px
}

.sw.sw-theme-dots .sw-toolbar-elm {
    border-top: 1px solid var(--border-color);
    margin-left: calc(var(--gutter-x)*-1);
    margin-right: calc(var(--gutter-x)*-1);
    padding: var(--bs-card-spacer-y) var(--gutter-x)
}

.sw .toolbar>.sw-btn {
    border-radius: var(--border-radius)
}

@media screen and (max-width:640px) {
    .sw.sw-theme-dots>.nav {
        margin-top: 15px
    }
    .sw.sw-theme-dots>.nav .nav-item .nav-link {
        margin-bottom: 8px;
        margin-top: 0;
        padding-left: 65px
    }
    .sw.sw-theme-dots>.nav .nav-item .nav-link .num {
        left: 10px;
        top: 8px
    }
    .sw.sw-theme-dots>.nav .nav-item .nav-link:after {
        left: 15px;
        top: 10px
    }
    .sw.sw-theme-dots>.nav:before {
        height: 100%;
        left: 32px;
        top: 0;
        width: 2px
    }
}

.form-check-input:checked,
.form-check-input:indeterminate,
.form-check-input[type=checkbox]:checked,
.form-check-input[type=checkbox]:indeterminate {
    --bs-form-check-bg: var(--main-color);
    --border-color: var(--main-color);
    background-color: var(--bs-form-check-bg);
    border-color: var(--border-color)
}

.form-check-input[type=radio]:not(:checked) {
    background-color: transparent
}

.form-switch.form-check-md {
    line-height: 2em;
    min-height: 1.65em;
    padding-left: 3.5em
}

.form-switch.form-check-md .form-check-input {
    height: 1.5em;
    margin-left: -3.5em;
    width: 3em
}

.form-switch.form-check-lg {
    line-height: 2.25em;
    min-height: 2.25em;
    padding-left: 4.5em
}

.form-switch.form-check-lg .form-check-input {
    height: 2em;
    margin-left: -4.5em;
    width: 4em
}

.form-range {
    outline: 0
}

.form-range:focus {
    box-shadow: none
}

.range1 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 16px;
    cursor: pointer;
    outline: none;
    overflow: hidden;
    width: 100%
}

.range1::-webkit-slider-runnable-track {
    background: var(--kf-bg-1);
    border-radius: 16px;
    height: 15px
}

.range1::-moz-range-track {
    background: var(--kf-bg-1);
    border-radius: 16px;
    height: 15px
}

.range1::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background-color: #fff;
    border: 2px solid var(--main-color);
    border-radius: 50%;
    box-shadow: -1007px 0 0 1000px var(--main-color);
    height: 15px;
    width: 15px
}

.range1::-moz-range-thumb {
    background-color: #fff;
    border: 1px solid var(--main-color);
    border-radius: 50%;
    box-shadow: -407px 0 0 400px var(--main-color);
    height: 15px;
    width: 15px
}

.range3 {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: var(--kf-bg-1);
    border-radius: 15px;
    cursor: pointer;
    height: 20px;
    height: 6px;
    outline: none;
    width: 100%
}

.range3::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    background-image: url(../img/logo-light.png);
    background-size: cover;
    height: 30px;
    transform: rotate(var(--thumb-rotate, 0deg));
    -webkit-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    width: 30px
}

.range3::-moz-range-thumb {
    background: transparent;
    background-image: url(https://ibaslogic.github.io/hosted-assets/smile.png);
    background-size: cover;
    border: none;
    border-radius: 50%;
    height: 30px;
    transform: rotate(var(--thumb-rotate, 0deg));
    -moz-transition: .2s ease-in-out;
    transition: .2s ease-in-out;
    width: 30px
}

.range3::-webkit-slider-thumb:hover {
    box-shadow: 0 0 0 10px rgba(var(--main-color-rgb), .1)
}

.range3:active::-webkit-slider-thumb,
.range3:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 13px rgba(var(--main-color-rgb), .2)
}

.range3::-moz-range-thumb:hover {
    box-shadow: 0 0 0 10px rgba(var(--main-color-rgb), .1)
}

.range3:active::-moz-range-thumb,
.range3:focus::-moz-range-thumb {
    box-shadow: 0 0 0 13px rgba(var(--main-color-rgb), .2)
}

.range .range-slider {
    flex: 1
}

.range .sliderticks {
    display: flex;
    justify-content: space-between;
    padding: 0 10px
}

.range .sliderticks span {
    background: #ddd;
    display: flex;
    height: 10px;
    justify-content: center;
    line-height: 40px;
    width: 1px
}

header .navbar {
height:100%;
}

header .navbar .sidebar-toggler {
    margin-right: 0px;
    padding-right: 0;
    text-align: left;
}

.navbar-brand {
    align-items: center;
    display: flex;
    flex-direction: row
}

.navbar-brand img {
    margin-right: 10px;
    max-width: var(--logo-width);
}

header .navbar .navbar-brand .company-tagline {
    color: var(--text-secondary);
    font-size: 11px;
    line-height: 12px
}

header .navbar .navbar-collapse .navbar-nav {
    --bs-nav-link-color: var(--link-color)
}

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle {
    background-color: transparent;
    border-radius: var(--border-radius);
    margin-right: 3px;
    position: relative
}

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle:focus,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle:hover,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:focus,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover {
    background-color: rgba(var(--main-color-rgb), .1);
    color: var(--main-color)
}

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle:focus:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle:hover:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:focus:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link:hover:before {
    opacity: .35
}

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle.active,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle.show,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.show {
    background-color: var(--main-color);
    color: var(--main-color-text)
}

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle.active:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle.show:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.show:before {
    opacity: 1
}

header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.active:hover:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle.active:hover:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle.show:hover:before,
header .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.show:hover:before {
    background-color: var(--main-color);
    opacity: 1
}

header .navbar .navbar-toggler .openbtn {
    display: block
}

header .navbar .navbar-toggler .closebtn,
header .navbar .navbar-toggler:not(.collapsed) .openbtn {
    display: none
}

header .navbar .navbar-toggler:not(.collapsed) .closebtn {
    display: block
}

header .kf-search-full {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: hsla(0, 0%, 100%, .625);
    border-bottom: 1px solid var(--border-color);
    left: 0;
    padding: 13px 15px;
    position: fixed;
    top: -90px;
    transition: all .3s ease;
    width: 100%;
    z-index: 9999
}

header .kf-search-full.active {
    top: 0
}

header .btn-link,
header .btn:not([class*=btn-]) {
    border: 0
}

header .input-group-text {
    color: var(--link-color)
}

header .input-group-text i,
header .input-group-text svg {
    stroke: var(--link-color);
    color: var(--link-color)
}

header .dropdown .dropdown-menu {
    margin-top: 10px;
    user-select: none;
}

header .dropdown .dropdown-menu .dropdown-item .avatar:not([class*=bi]) {
    color: var(--main-color)
}

header .dropdown .dropdown-menu .dropdown-item.active .avatar,
header .dropdown .dropdown-menu .dropdown-item:active .avatar {
    color: #fff
}

header .nav.kf-nav .nav-item .nav-link {
    color: var(--link-color)
}

header .nav.kf-nav .nav-item .nav-link.active,
header .nav.kf-nav .nav-item .nav-link:focus,
header .nav.kf-nav .nav-item .nav-link:hover {
    color: var(--main-color)
}

[dir=rtl] header .navbar .sidebar-toggler {
    margin-left: 10px;
    margin-right: 0
}

[dir=rtl] header .navbar .navbar-brand {
    margin-left: var(--bs-navbar-brand-margin-end);
    margin-right: 0
}

[dir=rtl] header .navbar .navbar-brand img {
    margin-left: 10px;
    margin-right: 0
}

[dir=rtl] .ms-auto {
    margin-left: 0 !important;
    margin-right: auto !important
}

@media screen and (max-width:991px) {
    .island.small{
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background: var(--card-primary-background);
        border-radius: 0;
        padding-bottom: 15px;
       }
       .order-2{
        margin-bottom: 120px !important;
    }
       .island [data="checkout_buttons"]{
        padding:0 15px;
       }
       .island .card{
        border-top: 1px solid var(--border-color);
        outline: none;
        border-radius: 0;
        background: transparent;
       }
       .island:before{
        content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: var(--border-radius);
    padding: 1px;
    background: linear-gradient(to top, transparent, var(--main-color));
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
       }
    .modal-dialog{
        width: 90%;
        max-width: 500px;
        margin: auto;
    }
    .close_popup{
        left: 0;
        right: 0 !important;
        margin: 0 auto;
       
    }

    .row{
        --gutter-x: 7px;
        --gutter-y: 7px;
    }
    .p-5{
        padding:15px;
    }
    header {
        background: var(--body-bg) !important;
    }
    .kf-brand-logo--default{
        display:inline-flex !important;
    }
    .kf-brand-logo--alt{
        display:none !important;
    }
    .fs-00{
        font-size: 50px;
    }
    .mt-15 {
        margin-top: 2rem !important;
    }
    .py-15 {
        padding-bottom: 2rem !important;
        padding-top: 2rem !important;
    }
    header .navbar .navbar-brand>div,
    header .client_tagline,
    body:not(.public) header .challange_plus,
    header .menu-name,
    .header-lp-bar-wrap{
        display: none;
    }
    header .btn-secondary .ms-2{
        margin-left:0 !important;
    }
    
    header .navbar-expand-lg .navbar-collapse {
        left: 0;
        min-height: calc(100vh - var(--header-height));
        max-width: 100%;
        background: var(--body-bg);
        overflow-y: auto;
        position: absolute;
        top: 100%;
        width: 100%;
    }
    header .navbar-expand-lg .navbar-collapse.right-in-device {
        left: auto;
        right: 0
    }
    header .navbar-expand-lg .mega-content{
        position:relative;
        width: 100% !important;
        top: 0;
        left: 0;
        right: 0;
        padding-left: 1rem;
    }
    header .navbar-expand-lg .navbar-collapse .navbar-nav {
        padding: 1rem
    }
    header .navbar-expand-lg .navbar-collapse .navbar-nav .nav-item .nav-link.dropdown-toggle:before,
    header .navbar-expand-lg .navbar-collapse .navbar-nav .nav-item .nav-link:before {
        bottom: 0;
        height: 100%;
        left: 0;
        top: 0;
        width: 3px
    }
    header .navbar-expand-lg .navbar-collapse .navbar-nav .nav-item .dropdown-menu {
        margin-top: 0;
        max-width: 100%;
        width: 100% !important
    }
}

header .challange_plus{
    display: flex;
}

.kf-page-title-wrap {
    margin: 0 0.75rem 0 0;
    align-self: center;
    line-height: 1.1;
    display: flex;
    flex-direction: column;
}
.kf-page-title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: capitalize;
    line-height: 1.1;
}
.kf-page-subtitle {
    font-size: 0.7rem;
    line-height: 1;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
}
.kf-page-title-caret {
    display: inline-flex;
    align-items: center;
}

.kf-account-switch-modal .asm-list-wrap {
    overflow: hidden;
}
.kf-account-switch-modal .asm_list_swiper {
    overflow: hidden;
    padding-bottom: 4px;
}
.kf-account-switch-modal .asm-list-slide {
    height: auto;
}
.kf-account-switch-modal .accounts-list-item.is-active {
    background: rgba(230,168,0,0.08);
    border-radius: 6px;
}
.kf-account-switch-modal .asm-list-nav .swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.accounts_list_swiper {
    overflow: hidden;
    padding: 0.25rem 0 1rem 0;
}
.accounts_list_swiper .swiper-slide {
    height: auto;
}
.accounts_list_swiper .swiper-slide .card {
    height: 100%;
    min-height: 380px;
}
.accounts-list-card .card-body {
    padding: 0.85rem 0.85rem;
}
.accounts-list-meta .row {
    border-color: var(--border-color, rgba(255,255,255,0.06)) !important;
}
.accounts-list-meta .col,
.accounts-list-meta .col-auto {
    font-size: 0.78rem;
    line-height: 1.3;
}
.accounts-list-nav .btn-square {
    width: 38px;
    height: 38px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.accounts-list-nav .swiper-button-disabled {
    opacity: 0.35;
    pointer-events: none;
}
.accounts-list-item {
    cursor: pointer;
    padding: 0.4rem 0;
    border-bottom: 1px dashed var(--border-color, rgba(255,255,255,0.06));
}
.accounts-list-item:last-child {
    border-bottom: 0;
}

.kf-equity-kpis-standalone {
    margin-bottom: 1rem;
}
.kf-equity-kpis-standalone .kf-kpi {
    margin-bottom: 0;
}

@media screen and (max-width:767px) {
.daterangepicker{
    width: 100% !important;
    max-width: 100% !important;
    position: fixed;
    top: 0 !important;
    left: 0 !important;
    height: 100vh;
}
.drp-calendar{
    width: 100% !important;
}


    .checkout-island{
            position: fixed;
        bottom: 0;
        z-index: 09999999999999999999999;
        background: #0b081e;
        width: 100%;
        left: 0;
        padding: calc(var(--gutter-x) * .5);
    }
    .py-10{
        padding-bottom: 3rem !important;
        padding-top: 3rem !important;
    }
    .kf-v{
       top: 68% !important;
    }
    
    
    .pricing_sidebar{
        display:none;
    }
    .country-section{
         text-align: center !important;
    }
       
    .country-section .country-list{
        scale: 1;
    }
    header .navbar .navbar-brand>img {
        margin: 0
    }
    header .navbar .navbar-brand{
        width: auto !important;
    }
    header .navbar .navbar-brand>div,
    header .client_tagline,
    body:not(.public) header .challange_plus,
    header .btn-secondary .menu-name{
        display: none;
    }
    
    .mt-15 {
        margin-top: 2rem !important;
    }
    .py-15 {
        padding-bottom: 2rem !important;
        padding-top: 2rem !important;
    }

    header .btn-secondary .ms-2{
        margin-left:0 !important;
    }
    
    
    
    header .navbar #userprofiledd {
        --bs-btn-padding-x: 0.5rem
    }
    header .navbar #userprofiledd:after {
        display: none
    }
}

@media (max-width: 768px) {
    .container, .container-fluid{
        padding-left: calc(var(--gutter-x) * 1);
        padding-right: calc(var(--gutter-x) * 1);
    }
}

@media screen and (max-width:575px) {
    .container, .container-fluid{
        padding-left: calc(var(--gutter-x) * .5);
        padding-right: calc(var(--gutter-x) * .5);
    }
    .footer_menu{
        justify-content:center !important;
    }
    .footer_copyright{
        text-align: center;
    }
    header .navbar .sm-mi-45px {
        right: -47px
    }
    header .navbar .sm-mi-95px {
        right: -97px
    }
    header .navbar .sm-mi-140px {
        right: -140px
    }
}

.wrap {
  opacity: 0;
  transform: translateX(100%); /* Başlangıçta sağda beklesin */
}

.wrap.page-enter {
  animation: slideIn 0.5s forwards;
}

.wrap.page-exit {
  animation: slideOut 0.4s forwards;
}

.kf-wrap::before {
  top: 0;
  right: 0;
}

.kf-wrap::after {
  top: 50%;
  left: 0px;
  transform: translateX(-50%);
}

.list-group .list-group-item:not([class*=list-group-item-primary]):not([class*=list-group-item-secondary]):not([class*=list-group-item-success]):not([class*=list-group-item-danger]):not([class*=list-group-item-info]):not([class*=list-group-item-dark]):not([class*=list-group-item-light]):not([class*=list-group-item-warning]) {
    --bs-list-group-active-bg: var(--main-color);
    --bs-list-group-active-border-color: var(--main-color);
    --bs-list-group-active-color: var(--main-color-text);
    --bs-list-group-hover-bg: rgba(var(--main-color-rgb), 0.12);
    --bs-list-group-action-hover-bg: rgba(var(--main-color-rgb), 0.12);
    --bs-list-group-action-active-bg: var(--main-color);
    --bs-list-group-action-active-color: var(--main-color-text);
    cursor: pointer
}

.list-group .list-group-item:not([class*=list-group-item-primary]):not([class*=list-group-item-secondary]):not([class*=list-group-item-success]):not([class*=list-group-item-danger]):not([class*=list-group-item-info]):not([class*=list-group-item-dark]):not([class*=list-group-item-light]):not([class*=list-group-item-warning]):focus,
.list-group .list-group-item:not([class*=list-group-item-primary]):not([class*=list-group-item-secondary]):not([class*=list-group-item-success]):not([class*=list-group-item-danger]):not([class*=list-group-item-info]):not([class*=list-group-item-dark]):not([class*=list-group-item-light]):not([class*=list-group-item-warning]):hover {
    --bs-list-group-bg: rgba(var(--main-color-rgb), 0.1)
}

.list-group .list-group-item:not([class*=list-group-item-primary]):not([class*=list-group-item-secondary]):not([class*=list-group-item-success]):not([class*=list-group-item-danger]):not([class*=list-group-item-info]):not([class*=list-group-item-dark]):not([class*=list-group-item-light]):not([class*=list-group-item-warning]).new {
    --bs-list-group-bg: hsla(0, 0%, 100%, .65)
}

.list-group .list-group-item:not([class*=list-group-item-primary]):not([class*=list-group-item-secondary]):not([class*=list-group-item-success]):not([class*=list-group-item-danger]):not([class*=list-group-item-info]):not([class*=list-group-item-dark]):not([class*=list-group-item-light]):not([class*=list-group-item-warning]).new:focus,
.list-group .list-group-item:not([class*=list-group-item-primary]):not([class*=list-group-item-secondary]):not([class*=list-group-item-success]):not([class*=list-group-item-danger]):not([class*=list-group-item-info]):not([class*=list-group-item-dark]):not([class*=list-group-item-light]):not([class*=list-group-item-warning]).new:hover {
    --bs-list-group-bg: #fff
}

.list-group.kf-list-group {
    --bs-list-group-bg: transparent
}

.list-group.kf-list-group .list-group-item {
    border-radius: var(--border-radius);
    border-width: 0;
    margin-bottom: 4px
}

.list-group.bg-none {
    --bs-list-group-bg: transparent
}

.list-group.border-0 {
    --bs-list-group-border-width: 0
}

.chat-list-contacts .list-group-item {
    border: 0
}

.chat-list-contacts .list-group-item>.row .col-9 {
    max-width: calc(100% - 40px - var(--gutter-x));
    width: calc(100% - 40px - var(--gutter-x))
}

.chat-list .figure,
.chat-list figure,
.chat-list iframe,
.chat-list img,
.chat-list video {
    border-radius: var(--border-radius);
    display: block;
    margin: 5px 0;
    max-width: 240px;
    overflow: hidden
}

.chat-list .left-chat {
    margin-bottom: 15px
}

.chat-list .left-chat .chat-block {
    background-color: rgba(var(--kf-accent-1-rgb), .05);
    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 0;
    display: inline-block;
    margin-bottom: 5px;
    margin-right: 3px;
    max-width: 90%;
    padding: 10px 15px;
    position: relative;
    width: auto
}

.chat-list .left-chat .chat-block:before {
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    border-left-color: rgba(var(--kf-accent-1-rgb), .05);
    border-radius: 0;
    border-right: 8px solid transparent;
    border-top: 8px solid transparent;
    border-top-color: rgba(var(--kf-accent-1-rgb), .05);
    bottom: -16px;
    content: "";
    height: 8px;
    left: 0;
    position: absolute;
    width: 8px;
    z-index: 1
}

.chat-list .left-chat.first {
    margin-bottom: 0
}

.chat-list .left-chat.first .chat-block {
    border-radius: var(--border-radius)
}

.chat-list .left-chat.first .chat-block:before {
    display: none
}

.chat-list .left-chat .time {
    padding-left: 15px
}

.chat-list .right-chat {
    margin-bottom: 15px;
    text-align: right
}

.chat-list .right-chat .chat-block {
    background-color: var(--kf-accent-1);
    border-radius: var(--border-radius) var(--border-radius) 0 var(--border-radius);
    color: var(--kf-accent-1-text);
    display: inline-block;
    margin-bottom: 5px;
    margin-left: 3px;
    max-width: 90%;
    padding: 10px 15px;
    position: relative;
    text-align: left;
    width: auto
}

.chat-list .right-chat .chat-block:before {
    border-bottom: 8px solid transparent;
    border-left: 8px solid transparent;
    border-radius: 0;
    border-right: 8px solid transparent;
    border-right-color: var(--kf-accent-1);
    border-top: 8px solid transparent;
    border-top-color: var(--kf-accent-1);
    bottom: -16px;
    content: "";
    height: 8px;
    position: absolute;
    right: 0;
    width: 8px;
    z-index: 0
}

.chat-list .right-chat.first {
    margin-bottom: 0
}

.chat-list .right-chat.first .chat-block {
    border-radius: var(--border-radius)
}

.chat-list .right-chat.first .chat-block:before {
    display: none
}

.chat-list .right-chat .time {
    padding-right: 15px
}

.chat-list.chat-list-squared .figure,
.chat-list.chat-list-squared .left-chat .chat-block,
.chat-list.chat-list-squared .right-chat .chat-block,
.chat-list.chat-list-squared figure,
.chat-list.chat-list-squared iframe,
.chat-list.chat-list-squared video {
    border-radius: 0
}

.chat-list.bg-none {
    background-color: transparent !important
}

.close_popup{
    background: var(--main-color);
    border-radius: 100%;
    border: 0;
    padding: 5px;
    font-size: 0.875rem;
    line-height: 1;
    position: absolute;
    width: 40px;
    height: 40px;
    top: -30px;
    right: -40px;
    z-index: 1000;
}

.modal .coupon_code{
    width: 100%;
    background: var(--card-secondary-background);
    border-radius: var(--border-radius-sm);
    border: 1px solid var(--border-color);
    margin-bottom: 20px;
    padding: 10px 20px;
    text-align: center;
}

.modal.kf-modal .modal-dialog.blur {
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    background-color: hsla(0, 0%, 100%, .75)
}

.modal.kf-modal .modal-dialog.blur .modal-content {
    background-color: transparent
}

.popover {
    --bs-popover-font-size: 1rem
}

.nav:not(.nav-pills) .nav-link.active {
    color: var(--main-color);
}

.nav:not(.nav-pills) .nav-link:focus,
.nav:not(.nav-pills) .nav-link:hover {
    color: rgba(var(--main-color-rgb), .75)
}

.nav.kf-nav .nav-item .nav-link {
    color: rgba(var(--main-color-rgb), .5)
}

.nav.kf-nav .nav-item .nav-link.active,
.nav.kf-nav .nav-item .nav-link:focus,
.nav.kf-nav .nav-item .nav-link:hover {
    color: rgba(var(--main-color-rgb), 1)
}

.nav.small .nav-item .nav-link {
    --bs-nav-link-padding-y: 0.15rem
}

.nav-pills {
    --bs-nav-link-hover-color: var(--main-color);
    --bs-nav-link-hover-bg: rgba(var(--main-color-rgb), 0.15);
    --bs-nav-pills-link-active-color: var(--main-color-text);
    --bs-nav-pills-link-active-bg: var(--main-color)
}

.nav-pills .nav-link:focus,
.nav-pills .nav-link:hover {
    background-color: var(--bs-nav-link-hover-bg)
}

.nav-pills .nav-link.active {
    background-color: var(--bs-nav-pills-link-active-bg);
    color: var(--bs-nav-pills-link-active-color)
}

.nav-pills.kf-nav-pills .nav-link {
    align-items: center;
    display: flex
}

.nav-pills.kf-nav-pills .nav-link .icon {
    font-size: 20px;
    margin-right: 10px
}

.nav-tabs {
    gap:15px;
    overflow: hidden;
    border-bottom: var(--border-width) solid var(--border-color);
}

.kf-tabs .nav-link {
    border-width: 0 0 3px
}

[data="open_chat"] .spinner-grow{
    position: absolute;
    left: 13px;
    top: 0px;
    --bs-spinner-animation-speed: 2.3s;
    color: var(--bs-success);
    --bs-spinner-width: 10px;
    --bs-spinner-height: 10px;
}

.kf-sidebar {
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    transition: all .2s ease-in-out;
    z-index: 1020
}

.kf-sidebar li.active{
    position: relative !important;
    overflow: hidden !important;
    border-radius: .5rem !important;
    border-color: transparent !important;
    background: var(--input-bg);
}

.classic .kf-sidebar,
.boxed .kf-sidebar{
    width: var(--sidebar-width);
}

.small .kf-sidebar{
    width: var(--sidebar-small-width);
}

.kf-sidebar .kf-sidebar-inner {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow-y: auto
}

.kf-sidebar .kf-sidebar-inner .nav {
    margin-bottom: 1.25rem;
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link {
    --bs-nav-link-padding-y: 0.625rem;
    align-items: center;
    border-radius: var(--border-radius);
    color: var(--link-color);
    display: flex;
    position: relative
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link i,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link svg {
    color: var(--link-color);
    stroke: var(--link-color);
    font-size: 18px;
    line-height: 26px;
    vertical-align: middle;
    width: 18px
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link i.menu-icon,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link svg.menu-icon {
    margin-bottom: 0;
    margin-right: 10px
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:focus,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:hover {
    color: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:focus i,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:focus svg,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:hover i,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:hover svg {
    color: var(--main-color);
    stroke: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link.active,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:active:not(.dropdown-toggle) {
    color: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link.active i,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link.active svg,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:active:not(.dropdown-toggle) i,
.kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link:active:not(.dropdown-toggle) svg {
    color: var(--main-color);
    stroke: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item.dropdown .dropdown-toggle {
    align-items: center;
    display: flex
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item.dropdown .dropdown-toggle .menu-name {
    flex-grow: 1
}

.kf-sidebar .kf-sidebar-inner .nav .nav-item.dropdown .dropdown-menu {
    background-color: rgba(var(--main-color-rgb), .1);
    box-shadow: none;
    padding: 0;
    position: relative !important;
    transform: none !important
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:focus,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:hover {
    background-color: rgba(var(--main-color-rgb), .1);
    color: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:focus i,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:focus svg,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:hover i,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:hover svg {
    color: var(--main-color);
    stroke: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link.show,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:active:not(.dropdown-toggle),
.dropdown-item.active, .dropdown-item:active, .dropdown .dropdown-menu .dropdown-item.bg-theme-1{
    color: #ffffff !important;
    background-color: #010016;
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active:before{
    content: '';
    background-color: #ffffff;
    position: absolute;
    top: 3px;
    right: -40px;
    width: 37px;
    height: 28px;
    z-index: 0;
    filter: blur(7px);
    opacity: 1;
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active i,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link.active svg,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link.show i,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link.show svg,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:active:not(.dropdown-toggle) i,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item .nav-link:active:not(.dropdown-toggle) svg {
    color: var(--main-color-text);
    stroke: var(--main-color-text)
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item.dropdown .dropdown-toggle {
    align-items: center;
    border-radius: var(--border-radius);
    display: flex
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item.dropdown .dropdown-toggle .menu-name {
    flex-grow: 1
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item.dropdown .dropdown-toggle.show {
    background-color: rgba(var(--main-color-rgb), .1);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    color: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item.dropdown .dropdown-toggle.show i,
.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item.dropdown .dropdown-toggle.show svg {
    color: var(--main-color);
    stroke: var(--main-color)
}

.kf-sidebar .kf-sidebar-inner .nav.menu-active-line .nav-item.dropdown .dropdown-menu {
    background-color: rgba(var(--main-color-rgb), .1);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: none;
    padding: 0;
    position: relative !important;
    margin: 0 10px !important;
    transform: none !important;
    
}

.kf-sidebar .kf-sidebar-inner .nav:last-child {
    margin-bottom: 0
}

.ssb.classic .kf-wrap,
.ssb.boxed .kf-wrap{
    padding-left: var(--sidebar-width);
    transition: padding .2s ease-in-out
}

.ssb.small .kf-wrap{
    padding-left: var(--sidebar-small-width);
    transition: padding .2s ease-in-out
}

.sidebar-close .kf-wrap .kf-sidebar {
    left: calc((var(--sidebar-width) + 10px)*-1)
}

.sidebar-close .kf-footer,
.sidebar-close .kf-wrap .kf-content.ssb {
    padding-left: 0
}

.sidebar-close.iconic-sidebar .kf-wrap .kf-sidebar {
    left: calc((var(--kf-sidebar-iconic-width) + 10px)*-1)
}

.sidebar-close.iconic-sidebar .kf-wrap .kf-content.ssb {
    padding-left: 0
}

.inner-sidebar-wrap {
    display: flex;
    flex-wrap: wrap;
    min-height: 550px;
    overflow: hidden;
    position: relative
}

.inner-sidebar-wrap .inner-sidebar {
    background-color: var(--kf-bg-1);
    flex: 0 0 auto;
    height: 100%;
    margin-left: 0;
    max-height: 100%;
    min-height: 600px;
    overflow-y: auto;
    padding-right: 1rem;
    position: relative;
    transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    -ms-transition: all .5s ease;
    width: 350px;
    z-index: 1
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item {
    margin-bottom: 4px
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link {
    align-items: center;
    border-radius: var(--border-radius);
    display: flex
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link .icon {
    font-size: 20px;
    margin-right: 10px
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link .minus {
    display: none
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link:focus,
.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link:hover {
    background-color: rgba(var(--main-color-rgb), .1);
    color: var(--main-color)
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link.active {
    background-color: rgba(var(--main-color-rgb), 1);
    color: var(--main-color-text)
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link.active i,
.inner-sidebar-wrap .inner-sidebar .nav .nav-item .nav-link.active svg {
    color: var(--main-color-text)
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item.dropdown .nav-link.show {
    background-color: rgba(var(--main-color-rgb), .1);
    border-radius: var(--border-radius) var(--border-radius) 0 0;
    color: var(--main-color)
}

.inner-sidebar-wrap .inner-sidebar .nav .nav-item.dropdown .dropdown-menu {
    background-color: rgba(var(--main-color-rgb), .1);
    border-radius: 0 0 var(--border-radius) var(--border-radius);
    box-shadow: none;
    margin: 0;
    padding: 0;
    position: relative !important;
    transform: none !important
}

.inner-sidebar-wrap .inner-sidebar-content {
    flex: 1 0 0%;
    overflow-y: auto;
    position: relative;
    width: 100%;
    z-index: 0
}

.inner-sidebar-wrap .inner-sidebar-content a {
    text-decoration: none
}

.inner-sidebar-wrap .inner-sidebar-content .list-group .list-group-item .row {
    flex-wrap: nowrap
}

.inner-sidebar-wrap .inner-sidebar-content .list-group .list-group-item .row .col-md {
    margin-right: auto;
    max-width: calc(100% - 220px)
}

.innermenu-close .inner-sidebar {
    margin-left: -300px
}

.msb .kf-sidebar {
    width: var(--kf-sidebar-iconic-width)
}

.msb .kf-sidebar .kf-sidebar-inner .nav {
    padding: 0 7px
}

.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item {
    display: block;
    width: 100%
}

.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link {
    --bs-nav-link-padding-x: 0.5rem;
    text-align: center
}

.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link i,
.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link svg {
    margin: 0 auto !important
}

.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link .badge,
.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item .nav-link .menu-name {
    display: none
}

.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item.dropdown .dropdown-toggle {
    justify-content: center
}

.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item.dropdown .dropdown-toggle:after {
    position: absolute;
    right: 5px;
    top: 48%
}

.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item.dropdown .dropdown-menu {
    min-width: auto
}

.msb .kf-sidebar .not-iconic {
    display: none
}

.kf-content.msb {
    padding-left: var(--kf-sidebar-iconic-width)
}

.footer_menu{
    gap: .5rem !important;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin-bottom: 0;
    padding-left: 0;
    justify-content: end;
}

.footer_menu .nav-link{
    padding-top: 0;
    padding-bottom: 0;
}

.ssb .kf-sidebar {
    background: var(--card-primary-background);
    padding-top: calc(var(--header-height) + var(--gutter-x));
    overflow: hidden;
}

.kf-sidebar .kf-sidebar-inner {
    height: 100%;
    margin-top: 0;
    border-right: 1px solid transparent;
    border-image: linear-gradient(to bottom, transparent, var(--border-color), transparent);
    border-image-slice: 1;
    border-image-width: 1px;
    border-image-outset: 0;
    border-image-repeat: stretch;
}

body.t0 .kf-sidebar .kf-sidebar-inner {
    padding-top:0 !important;
}

.ssb .kf-sidebar .kf-sidebar-inner .nav {
    margin-top: 1rem
}

.ssb .kf-sidebar .kf-sidebar-inner .nav:last-child {
    margin-bottom: 1rem
}

.ssb.kf-sidebar-iconic {
    --kf-sidebar-iconic-width: 92px
}

.ssb.msb .kf-sidebar {
    box-shadow: none;
    width: var(--kf-sidebar-iconic-width)
}

.ssb.msb .kf-sidebar .kf-sidebar-inner .nav {
    margin-top: .45rem
}

.ssb.msb .kf-sidebar .kf-sidebar-inner .nav .nav-item {
    display: block;
    width: 100%
}

.ssb.msb .kf-sidebar .kf-sidebar-inner .nav:last-child {
    margin-bottom: .45rem
}

.ssb.kf-sidebar-fill-bg .kf-sidebar .kf-sidebar-inner {
    background-color: var(--kf-bg-1)
}

.ssb.kf-sidebar-fill-theme .kf-sidebar .kf-sidebar-inner {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background-color: rgba(var(--main-color-rgb), .9)
}

.ssb.kf-sidebar-fill-accent .kf-sidebar .kf-sidebar-inner {
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
    background-color: rgba(var(--kf-accent-1-rgb), .9)
}

@media screen and (min-width:991px) {
   
    .kf-sidebar-iconic[class*=kf-sidebar-fill-]:not(.ssb) header .navbar .sidebar-toggler {
        margin-right: 1.5rem
    }
    .kf-sidebar-fill-accent:not(.sidebar-close):not([class*=kf-header-fill-]):not(.ssb):not(.kf-sidebar-iconic) header:not(.active) .navbar .sidebar-toggler,
    .kf-sidebar-fill-theme:not(.sidebar-close):not([class*=kf-header-fill-]):not(.ssb):not(.kf-sidebar-iconic) header:not(.active) .navbar .sidebar-toggler {
        --bs-btn-active-color: #fff;
        --bs-btn-hover-color: #fff;
        --link-color: hsla(0, 0%, 100%, .65);
        --kf-accent-1: #fff
    }
    .kf-sidebar-fill-accent:not(.sidebar-close).kf-sidebar-iconic:not([class*=kf-header-fill-]):not(.ssb) header:not(.active) .navbar .sidebar-toggler,
    .kf-sidebar-fill-theme:not(.sidebar-close).kf-sidebar-iconic:not([class*=kf-header-fill-]):not(.ssb) header:not(.active) .navbar .sidebar-toggler {
        --bs-btn-active-color: #fff;
        --bs-btn-hover-color: #fff;
        --link-color: hsla(0, 0%, 100%, .65);
        --kf-accent-1: #fff
    }
 
}

.sidebar-toggler{
    display:none;
}

.mat{
        margin: auto 0;
}

@media screen and (max-width:991px) {
    :root {
        --mob:50px;
    }
    .ups{
            margin-right: auto !important;
    }
    header .ms-auto {
        margin-left: 10px !important;
    }
    
    .ssb.classic .kf-wrap,
    .ssb.boxed .kf-wrap {
        padding-left: 0;
        transition: padding .2s ease-in-out
    }
    .ssb.classic .sidebar-toggler,
    .ssb.boxed .sidebar-toggler{
    display:block;
}
    .ssb.classic .kf-sidebar,
    .ssb.boxed .kf-sidebar{
        -webkit-backdrop-filter: blur(15px);
        backdrop-filter: blur(15px);
        background-color: transparent;
        border: none;
        box-shadow: 2px 0 15px rgba(0, 0, 0, .1);
        left: calc((var(--sidebar-width) + 10px)* -1);
    }
    .kf-content.ssb {
        padding-left: 0
    }
    .ssb.classic.sidebar-open .kf-sidebar,
    .ssb.boxed.sidebar-open .kf-sidebar {
        left: 0;
        width:100%;
        background: var(--body-bg);
    }
    .sidebar-open .kf-content.ssb {
        padding-left: 0
    }
    .ssb .kf-sidebar {
        width:0;

    }
   
}

.inner_shadow{
    box-shadow: inset 0 0px 22px var(--card-secondary-background);
    overflow: hidden;
}

@media screen and (max-width:992px) {
    .inner-sidebar-wrap .inner-sidebar {
        margin-left: -300px;
        position: absolute
    }
    .inner-sidebar-wrap .inner-sidebar-content .list-group .list-group-item .row {
        flex-wrap: wrap
    }
    .inner-sidebar-wrap .inner-sidebar-content .list-group .list-group-item .row .col-md {
        max-width: none
    }
    .innermenu-close .inner-sidebar {
        margin-left: 0;
        z-index: 1
    }
    .innermenu-close .inner-sidebar-content {
        margin-left: 0
    }
    .kf-sidebar-fill-accent.sidebar-open:not([class*=kf-header-fill-]):not(.kf-sidebar-iconic):not(.ssb) header:not(.active) .navbar .sidebar-toggler,
    .kf-sidebar-fill-theme.sidebar-open:not([class*=kf-header-fill-]):not(.kf-sidebar-iconic):not(.ssb) header:not(.active) .navbar .sidebar-toggler {
        --bs-btn-active-color: #fff;
        --bs-btn-hover-color: #fff;
        --link-color: hsla(0, 0%, 100%, .65);
        --kf-accent-1: #fff
    }
    .kf-sidebar-fill-accent.sidebar-open:not([class*=kf-header-fill-]):not(.kf-sidebar-iconic):not(.ssb) header:not(.active) .navbar .navbar-brand,
    .kf-sidebar-fill-theme.sidebar-open:not([class*=kf-header-fill-]):not(.kf-sidebar-iconic):not(.ssb) header:not(.active) .navbar .navbar-brand {
        --text-secondary: #ccc;
        --text-color: #fff
    }
    .kf-sidebar-fill-accent.sidebar-open.kf-sidebar-iconic:not([class*=kf-header-fill-]):not(.ssb) header:not(.active) .navbar .sidebar-toggler,
    .kf-sidebar-fill-theme.sidebar-open.kf-sidebar-iconic:not([class*=kf-header-fill-]):not(.ssb) header:not(.active) .navbar .sidebar-toggler {
        --bs-btn-active-color: #fff;
        --bs-btn-hover-color: #fff;
        --link-color: hsla(0, 0%, 100%, .65);
        --kf-accent-1: #fff
    }
}

.table tbody tr:hover td {
    background-color: var(--card-primary-background);
}

table thead tr th {
    font-weight: 300;
    border: 1px solid var(--border-color);
    border-top: none;
    border-left: none;
}

table thead tr th.selected {
    background-color: rgba(var(--main-color-rgb), .075)
}

.table tbody{
    min-height: 500px;
    width: 100%;
}

.dt-scroll-body table.table {
    min-height: 500px;
}

tbody tr{
    position: relative;
}

th, td {
    white-space: nowrap;
}

.dt-scroll-head{
    background: var(--card-primary-background);
}

.dtfc-fixed-left{
    background: var(--card-primary-background);
    z-index: 99999999;
}

.dtfc-fixed-left:before{
    content: "";
    width: 1px;
    height: 100%;
    right: -1px;
    top: 0;
    position: absolute;
    background: var(--border-color);
}

.dtfc-fixed-left:after{
    content: "";
    width: 6px;
    height: 100%;
    right: -7px;
    top: 0;
    position: absolute;
    background: var(--body-bg);
    opacity: 0.4;
}

table tbody tr td,
table thead tr th{
    border: 1px solid var(--border-color);
    border-bottom-width: 0;
    border-left-width: 0;
    vertical-align: middle;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    padding-right: 35px !important;
    position: relative;
}

table tbody tr td.lastvisible,
table tbody tr td:last-child {
    border-radius: 0 var(--border-radius) var(--border-radius) 0
}

table tbody tr td.dtr-control:before {
    border-left-color: var(--secondary-color) !important;
    vertical-align: middle
}

table tbody tr td.selected {
    background-color: rgba(var(--main-color-rgb), .075)
}

table tbody tr.child .child {
    background-color: rgba(var(--main-color-rgb), .05);
    border-radius: var(--border-radius)
}

table tbody tr.child ul.dtr-details {
    width: 100%
}

table tbody tr.dt-hasChild.dtr-expanded td.dtr-control:before {
    border-left-color: transparent !important;
    border-top-color: var(--secondary-color) !important
}

.pagination {
    --bs-pagination-color: var(--main-color);
    --bs-pagination-bg: transparent;
    --kf-bg-2: transparent;
    --border-width: 0px;
    --bs-pagination-disabled-bg: transparent;
    --bs-pagination-hover-bg: rgba(var(--main-color-rgb), 0.1);
    --bs-pagination-active-bg: var(--main-color);
    --bs-pagination-active-border-color: var(--main-color)
}

.pagination li [data-dt-idx=first],
.pagination li [data-dt-idx=last],
.pagination li [data-dt-idx=next],
.pagination li [data-dt-idx=previous] {
    border-radius: var(--border-radius);
    font-size: 1.5rem
}

.pagination li [data-dt-idx=first] .page-link,
.pagination li [data-dt-idx=last] .page-link,
.pagination li [data-dt-idx=next] .page-link,
.pagination li [data-dt-idx=previous] .page-link {
    border-radius: 40px;
    border-radius: var(--border-radius);
    line-height: 24px;
    min-width: 36px;
    text-align: center
}

.pagination li [data-dt-idx=first] .page-link:focus,
.pagination li [data-dt-idx=first] .page-link:hover,
.pagination li [data-dt-idx=last] .page-link:focus,
.pagination li [data-dt-idx=last] .page-link:hover,
.pagination li [data-dt-idx=next] .page-link:focus,
.pagination li [data-dt-idx=next] .page-link:hover,
.pagination li [data-dt-idx=previous] .page-link:focus,
.pagination li [data-dt-idx=previous] .page-link:hover {
    box-shadow: none;
    outline: 0
}

.pagination li .page-link {
    border-radius: var(--border-radius);
    min-width: 36px;
    text-align: center
}

div.dt-container .dt-paging {
    margin: 0
}

div.dt-container .dt-paging .dt-paging-button {
    background-color: transparent;
    border: 0;
    border-radius: var(--border-radius);
    color: var(--text-color) !important;
    line-height: 24px;
    min-width: 36px
}

div.dt-container .dt-paging .dt-paging-button:active,
div.dt-container .dt-paging .dt-paging-button:hover {
    background: rgba(var(--main-color-rgb), .1) !important;
    border: 0;
    box-shadow: none;
    color: var(--text-color) !important
}

div.dt-container .dt-paging .dt-paging-button.active,
div.dt-container .dt-paging .dt-paging-button.current {
    background-color: var(--main-color);
    border: 0;
    box-shadow: none;
    color: var(--main-color-text) !important
}

div.dt-container .dt-paging .dt-paging-button.active:hover,
div.dt-container .dt-paging .dt-paging-button.current:hover {
    background-color: var(--main-color) !important;
    border: 0;
    color: var(--main-color-text) !important
}

div.dt-container .dt-paging .dt-paging-button.disabled,
div.dt-container .dt-paging .dt-paging-button.disabled:active,
div.dt-container .dt-paging .dt-paging-button.disabled:focus,
div.dt-container .dt-paging .dt-paging-button.disabled:hover {
    border: 0
}

div.dt-container .dt-length .dt-input,
div.dt-container .dt-search .dt-input {
    border-color: var(--border-color);
    border-radius: var(--border-radius)
}

div.dt-container .dt-length .dt-input:focus,
div.dt-container .dt-search .dt-input:focus {
    border-color: var(--main-color)
}

div.dt-container .dt-length label,
div.dt-container .dt-search label {
    color: var(--text-secondary);
    margin: 0 15px
}

.semidoughnutchart {
    display: block;
    height: 240px;
    position: relative
}

.semidoughnutchart .expensedatasemidoughnut {
    bottom: 40px;
    left: 0;
    position: absolute;
    right: 0;
    text-align: center;
    z-index: 0
}

.semidoughnutchart canvas {
    margin: -50px 0;
    position: relative;
    vertical-align: top;
    z-index: 1
}

.pageloader {
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    background-color: var(--body-bg);
    height: 100%;
    left: 0;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
}

.loader2 .loader:after {
    border-color: var(--main-color);
    inset: 8px;
    transform: rotate3d(90, 90, 0, 180deg)
}

.fs-10 {
    font-size: 10px !important
}

.fs-12 {
    font-size: 12px !important
}

.fs-14 {
    font-size: 14px !important
}

.bg-none {
    background-color: transparent !important
}

figure {
    margin-bottom: 0
}

.style-none {
    text-decoration: none
}

.coverimg {
    background-position: 50%;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background: var(--card-primary-background);
}

.coverimg>img {
    display: none
}

.avatar {
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    vertical-align: middle
}

.avatar,
.avatar>i,
.avatar>svg {
    display: inline-flex;
    text-align: center
}

.avatar>i,
.avatar>svg {
    align-self: center;
    margin: 0 auto
}

.avatar img {
    height: auto;
    max-width: 100%
}

.avatar.avatar-10 {
    height: 10px;
    line-height: 9px;
    width: 10px
}
.avatar.avatar-24 {
    line-height: 22px;
    width: 24px;
    height: 24px;
    border-radius: 5px;
    background: #0000005e;
    font-size: 9px;
}
.avatar.avatar-20 {
    height: 20px;
    line-height: 18px;
    width: 20px
}

.avatar.avatar-30 {
    height: 30px;
    line-height: 27px;
    width: 30px
}

.avatar.avatar-40 {
    height: 40px;
    line-height: 36px;
    width: 40px;
    border-radius: 6px;
}

.avatar.avatar-50 {
        height: 50px;
    line-height: 45px;
    width: 50px;
    background-size: cover !important;
}

.avatar.avatar-60 {
    height: 60px;
    line-height: 54px;
    width: 60px
}

.avatar.avatar-70 {
    height: 70px;
    line-height: 63px;
    width: 70px
}

.avatar.avatar-80 {
    height: 80px;
    line-height: 72px;
    width: 80px;
        background-size: 80px !important;
}

.avatar.avatar-90 {
    height: 90px;
    line-height: 81px;
    width: 90px
}

.avatar.avatar-100 {
    height: 100px;
    line-height: 90px;
    width: 100px
}

.avatar.avatar-110 {
    height: 110px;
    line-height: 99px;
    width: 110px
}

.avatar.avatar-120 {
    height: 120px;
    line-height: 108px;
    width: 120px
}

.avatar.avatar-130 {
    height: 130px;
    line-height: 117px;
    width: 130px
}

.avatar.avatar-140 {
    height: 140px;
    line-height: 126px;
    width: 140px
}

.avatar.avatar-150 {
    height: 150px;
    line-height: 135px;
    width: 150px;
    background-size: cover !important;
}

.avatar.avatar-18 {
    height: 18px;
    line-height: 16px;
    width: 18px
}

.avatar.avatar-28 {
    height: 28px;
    line-height: 26px;
    width: 28px;
}

.avatar.hover,
.card.hover {
    overflow: hidden
}

.avatar.hover .overlay,
.card.hover .overlay {
    align-items: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    background-color: rgba(0, 0, 0, .45);
    display: none;
    height: 100%;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2
}

.avatar.hover:hover .overlay,
.card.hover:hover .overlay {
    display: flex
}

.overlay-gradiant {
    position: relative;
    z-index: 0
}

.overlay-gradiant:after {
    background-image: linear-gradient(transparent, #000);
    bottom: 0;
    content: "";
    height: 50%;
    left: 0;
    position: absolute;
    width: 100%;
    z-index: 1
}

.z-index-0 {
    z-index: 0 !important
}

.z-index-1 {
    z-index: 1 !important
}

.z-index-2 {
    z-index: 2 !important
}

.z-index-5 {
    z-index: 5 !important
}

.z-index-10 {
    z-index: 999999999 !important
}

.width-60 {
    width: 60px !important
}

.width-260 {
    width: 260px !important
}

.width-280 {
    width: 280px !important
}

.width-300 {
    width: 300px !important
}

.width-450 {
    width: 450px !important
}

.maxwidth-100 {
    max-width: 100px !important
}

.height-60 {
    height: 60px !important
}

.height-180 {
    height: 180px !important
}

.height-260 {
    height: 260px !important
}

.height-300 {
    height: 300px !important
}

.height-dynamic {
    height: var(--h-dynamic) !important
}

.minvheight-100 {
    min-height: 100vh
}

.mt--100 {
    margin-top: -100px !important
}
.badge.badge-sm {
    --bs-badge-font-weight: 400;
    font-size: .825rem;
    font-weight: var(--bs-badge-font-weight)
}

.ribbon {
    background-color: var(--main-color);
    border-radius: 3px;
    font-size: .8rem;
    height: 20px;
    line-height: 18px;
    margin: 5px 0;
    overflow: visible;
    padding: 0 8px
}

.ribbon:after,
.ribbon:before {
    border-left: 10px solid transparent;
    border-right: 0 solid transparent;
    border-top: 10px solid rgba(var(--main-color-rgb), var(--bs-bg-opacity, 1));
    content: "";
    height: 0;
    left: -10px;
    position: absolute;
    top: 0;
    width: 0
}

.ribbon:before {
    border-bottom: 10px solid rgba(var(--main-color-rgb), var(--bs-bg-opacity, 1))
}

.ribbon.end-0 {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    margin-right: -5px
}

.ribbon.start-0 {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
    margin-left: -5px
}

.ribbon.start-0:after,
.ribbon.start-0:before {
    border-left: 0 solid transparent;
    border-right: 10px solid transparent;
    left: auto;
    right: -10px
}

.riskometer .indicator {
    --indicator-width-offset: calc(var(--riskometer-height)*10/100);
    --indicator-width: calc(var(--riskometer-height) - var(--indicator-width-offset));
    --indicator-height: calc(var(--indicator-width)/2);
    height: var(--indicator-height);
    position: absolute;
    width: var(--indicator-width);
    z-index: 1
}

.riskometer .indicator:after {
    background-color: var(--kf-accent-1);
    border: 2px solid var(--main-color);
    border-radius: 50%;
    content: "";
    height: 20px;
    left: 50%;
    margin-left: -10px;
    position: absolute;
    top: calc(100% - 10px);
    width: 20px;
    z-index: 1
}

.riskometer .indicator:before {
    content: "";
    --arrow-width: calc(var(--riskometer-height)*0.06);
    --arrow-height: calc(var(--riskometer-height)*0.5);
    --arrow-width-double: calc(var(--arrow-width)*2);
    border: var(--arrow-width) solid transparent;
    border-right: var(--arrow-height) solid var(--main-color);
    bottom: calc(var(--riskometer-height)*-.055);
    display: block;
    left: calc(var(--riskometer-height)*-.115);
    position: absolute;
    rotate: var(--arrow-rotation);
    transform-origin: calc(var(--indicator-height) + var(--arrow-width-double)) var(--arrow-width);
    transition: rotate .3s;
    width: calc(var(--riskometer-height)*.01);
    z-index: 0
}

.low {
    --arrow-rotation: 15deg
}

.high {
    --arrow-rotation: 135deg
}

.sunmoon input+label .moon,
.sunmoon input+label .sun {
    color: #fff;
    font-size: 34px;
    left: 0;
    line-height: 40px;
    opacity: 1;
    position: absolute;
    text-align: center;
    top: 0;
    transition: all .5s ease;
    width: 38px;
    z-index: 2
}

.sunmoon input+label .moon {
    font-size: 24px;
    opacity: 0
}

.sunmoon input:checked+label .sun {
    left: calc(100% - 40px);
    opacity: 0
}

.sunmoon input:checked+label .moon {
    left: calc(100% - 40px);
    opacity: 1
}

.btnsunmoon .moon,
.btnsunmoon.active .sun {
    display: none
}

.btnsunmoon.active .moon {
    display: block
}

.gradient-box,
.select-box {
    cursor: pointer
}

.gradient-box>.avatar,
.select-box>.avatar {
    border: 1px solid hsla(0, 0%, 56%, .5)
}

.gradient-box.active>.avatar,
.select-box.active>.avatar {
    border: 2px solid var(--kf-accent-1)
}

body,
html {
    min-height: 100vh;
    margin: 0;
    padding: 0;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 500
}

.h1:last-child,
.h2:last-child,
.h3:last-child,
.h4:last-child,
.h5:last-child,
.h6:last-child,
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child {
    margin-bottom: 0
}

#balance_chart,
#equity_chart{
        display: block;
    box-sizing: border-box;
    position: absolute;
    right: 0px;
    bottom: -5px;
    width: 270px;
    height: 100%;
}

html[mode="dark"] .mc{
    padding-bottom: .1em;
    background: radial-gradient(50% 100% at 50% 50%, #fff 30%, hsla(0, 0%, 100%, .5) 100%);
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;


}
div[data="variation_selectors"]{
    padding: 20px 0;
}
.option-grid{
    
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--gutter-x);
    margin-bottom: var(--gutter-x);
    padding-left: 20px;
    padding-right: 20px;
}
.option-grid:last-child{
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}
.option-grid div[data]{
    display: grid;
    grid-template-columns: repeat(5, minmax(120px, 1fr));
    gap: 10px;
}
p:last-child {
    margin-bottom: 0
}

hr {
    border-color: var(--border-color);
    opacity: 1
}
.imbh{
    --mbh: 36px;
}
main.kf-wrap {
    position: relative;
    min-height: calc(100vh - var(--header-height) - var(--footer-height) - var(--mbh) - var(--mob) - 15px) !important;
}

body:not(.t0) .kf-wrap {
    margin-top: calc(var(--header-height) + var(--gutter-x));
}

body.t0 .breadcrumb_box{
    background: var(--card-primary-background);
    padding-top: calc(var(--header-height) + 20px);
    padding-bottom: 20px;
    box-sizing: border-box;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

.kf-wrap .kf-content {
    --link-color-rgb: var(--main-color-rgb)
}

.card.ready{
    background-color: var(--bs-success-rgb) !important;
    color: var(--bs-success) !important;
    border: 1px solid #3e4f07;
}

.pagination li .page-link {
    border-radius: var(--border-radius) !important
}

.ssb {
        --border-radius: 10px;
}

.login-box {
    max-width: 450px
}

.account-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}

.account-status-dot.dot-success { background-color: var(--bs-success); }
.account-status-dot.dot-danger { background-color: var(--bs-danger); }
.account-status-dot.dot-warning { background-color: var(--bs-warning); }
.account-status-dot.dot-info { background-color: var(--bs-info); }
.account-status-dot.dot-secondary { background-color: var(--bs-secondary); }

.kf-account-status-dot {
    width: 6px;
    height: 6px;
    transition: background-color .25s ease;
}

::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, .02);
    border-radius: 10px;
    box-shadow: inset 0 0 1px 0 rgba(0, 0, 0, .1)
}

::-webkit-scrollbar-thumb {
    background-color: rgba(var(--main-color-rgb), .1);
    border-radius: 10px
}

/* ── Section Background: CSS background yerine <picture> element ── */
.has-bg {
    position: relative;
    overflow: hidden;
}
.has-bg > picture.section-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}
.has-bg > picture.section-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.has-bg > picture.section-bg-top { bottom: auto; }
.has-bg > picture.section-bg-bottom { top: auto; }
.has-bg > picture.section-bg-right { left: auto; right: 0; width: auto; max-width: 60%; }
.has-bg > picture.section-bg-right img { width: auto; max-width: 100%; object-position: right center; }
.has-bg > picture.section-bg-left { right: auto; left: 0; width: auto; max-width: 60%; }
.has-bg > picture.section-bg-left img { width: auto; max-width: 100%; object-position: left center; }
.has-bg > *:not(picture.section-bg) {
    position: relative;
    z-index: 1;
}

.mwa{
    padding-bottom: 170px;
    min-height: 100%;
}
.mwa > picture.section-bg { height: 170px; top: auto; bottom: 0; }

.grp { padding-top: 175px; }
.grp > picture.section-bg { height: 176px; bottom: auto; top: 0; }

.dt { padding-bottom: 175px; }
.dt > picture.section-bg { height: 176px; top: auto; bottom: 0; }

.tpl { padding-top: 75px; }
.tpl > picture.section-bg { height: auto; max-height: 200px; bottom: auto; top: 0; }

.unif{
    margin-top: 50px;
    position: relative;
    background: #080808;
    border-top: 1px solid #ffffff1a;
}
footer .f_2{
    background: var(--card-primary-background);
}

footer ul li a,
footer ul li span{
    opacity: .70;
    display: block;
    padding-top: .5rem;
    padding-bottom: .5rem;
    font-size: .875rem;
    text-decoration: none;
    transition: all .2s cubic-bezier(.23,1,.32,1);
}

.cta{
    background: radial-gradient(140% 107.13% at 50% 10%, transparent 37.41%, var(--main-color) 69.27%, #fff 100%), var(--card-primary-background);
    border-radius: var(--border-radius);
}

.mda {
    padding: 10px;
    border: 1px solid #ffffff0f;
    border-radius: 24px;
    background: #ffffff0a;
    backdrop-filter: blur(10px);
}

.mda.oly:before {
    content: "";
    background: rgb(16, 15, 31);
    background: linear-gradient(0deg, rgb(3 0 19) 10%, rgba(16, 15, 31, 0) 100%);
    position: absolute;
    /* width: 100%; */
    height: 100%;
    z-index: 11;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 24px;
}

.minimal{
        max-width: 970px ;
}

/*!
 * Bootstrap-select v1.14.0-beta3 (https://developer.snapappointments.com/bootstrap-select)
 *
 * Copyright 2012-2022 SnapAppointments, LLC
 * Licensed under MIT (https://github.com/snapappointments/bootstrap-select/blob/master/LICENSE)
 */

@-webkit-keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}

@-o-keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}

.bootstrap-select>select.bs-select-hidden,select.bs-select-hidden,select.selectpicker{display:none!important}

.bootstrap-select{vertical-align:middle}

.form-select-sm .dropdown-toggle{
    font-size:12px;
 }

.bootstrap-select>.dropdown-toggle{
    position:relative;width:100%;padding: 0 14px;    background: transparent;
    border: 0;}

.bootstrap-select>.dropdown-toggle:after{margin-top:-1px}

.bootstrap-select>.dropdown-toggle.bs-placeholder,.bootstrap-select>.dropdown-toggle.bs-placeholder:active,.bootstrap-select>.dropdown-toggle.bs-placeholder:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder:hover{color:#999}

.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-danger:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-dark:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-info:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-primary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-secondary:hover,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:active,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:focus,.bootstrap-select>.dropdown-toggle.bs-placeholder.btn-success:hover{color:rgba(255,255,255,.5)}

.bootstrap-select>select{position:absolute!important;bottom:0;left:50%;display:block!important;width:.5px!important;height:100%!important;padding:0!important;opacity:0!important;border:none;z-index:0!important}

.bootstrap-select>select.mobile-device{top:0;left:0;display:block!important;width:100%!important;z-index:2!important}

.bootstrap-select.is-invalid .dropdown-toggle,.error .bootstrap-select .dropdown-toggle,.has-error .bootstrap-select .dropdown-toggle,.was-validated .bootstrap-select select:invalid+.dropdown-toggle{border-color:#b94a48}

.bootstrap-select.is-valid .dropdown-toggle,.was-validated .bootstrap-select select:valid+.dropdown-toggle{border-color:#28a745}

.bootstrap-select.fit-width{width:auto!important}

.bootstrap-select
    .bootstrap-select.form-control{margin-bottom:0;padding:0;border:none;height:auto}

:not(.input-group)>.bootstrap-select.form-control:not([class*=col-]){width:100%}

.bootstrap-select.form-control.input-group-btn{float:none;z-index:auto}

.form-inline .bootstrap-select,.form-inline .bootstrap-select.form-control:not([class*=col-]){width:auto}

.bootstrap-select:not(.input-group-btn),.bootstrap-select[class*=col-]{float:none;display:inline-block;margin-left:0}

.bootstrap-select.dropdown-menu-right,.bootstrap-select[class*=col-].dropdown-menu-right,.row .bootstrap-select[class*=col-].dropdown-menu-right{float:right}

.form-group .bootstrap-select,.form-horizontal .bootstrap-select,.form-inline .bootstrap-select{margin-bottom:0}

.form-group-lg .bootstrap-select.form-control,.form-group-sm .bootstrap-select.form-control{padding:0}

.form-group-lg .bootstrap-select.form-control .dropdown-toggle,.form-group-sm .bootstrap-select.form-control .dropdown-toggle{height:100%;font-size:inherit;line-height:inherit;border-radius:inherit}

.bootstrap-select.form-control-lg .dropdown-toggle,.bootstrap-select.form-control.sm .dropdown-toggle{font-size:inherit;line-height:inherit;border-radius:inherit}

.bootstrap-select.form-control.sm .dropdown-toggle{padding:.25rem .5rem}

.bootstrap-select.form-control-lg .dropdown-toggle{padding:.5rem 1rem}

.form-inline .bootstrap-select .form-control{width:100%}

.bootstrap-select.disabled,.bootstrap-select>.disabled{cursor:not-allowed}

.bootstrap-select.disabled:focus,.bootstrap-select>.disabled:focus{outline:0!important}

.bootstrap-select.bs-container{position:absolute;top:0;left:0;height:0!important;padding:0!important}

.bootstrap-select.bs-container .dropdown-menu{z-index:1060}

.bootstrap-select .dropdown-toggle .filter-option{position:static;top:0;left:0;float:left;height:100%;width:100%;text-align:left;overflow:hidden;-webkit-box-flex:0;-webkit-flex:0 1 auto;-ms-flex:0 1 auto;flex:0 1 auto}

.bs3.bootstrap-select .dropdown-toggle .filter-option{padding-right:inherit}

.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option{position:absolute;padding-top:inherit;padding-bottom:inherit;padding-left:inherit;float:none}

.input-group .bs3-has-addon.bootstrap-select .dropdown-toggle .filter-option .filter-option-inner{padding-right:inherit}

.bootstrap-select .dropdown-toggle .filter-option-inner-inner{overflow:hidden}

.bootstrap-select .dropdown-toggle .filter-expand{width:0!important;float:left;opacity:0!important;overflow:hidden}

.bootstrap-select .dropdown-toggle .caret{position:absolute;top:50%;right:12px;margin-top:-2px;vertical-align:middle}

.bootstrap-select .dropdown-toggle .bs-select-clear-selected{position:relative;display:block;margin-right:5px;text-align:center}

.bs3.bootstrap-select .dropdown-toggle .bs-select-clear-selected{padding-right:inherit}

.bootstrap-select .dropdown-toggle .bs-select-clear-selected span{position:relative;top:-webkit-calc(((-1em / 1.5) + 1ex)/ 2);top:calc(((-1em / 1.5) + 1ex)/ 2);pointer-events:none}

.bs3.bootstrap-select .dropdown-toggle .bs-select-clear-selected span{top:auto}

.bootstrap-select .dropdown-toggle.bs-placeholder .bs-select-clear-selected{display:none}

.input-group .bootstrap-select.form-control .dropdown-toggle{border-radius:inherit}

.bootstrap-select[class*=col-] .dropdown-toggle{width:100%}

.bootstrap-select .dropdown-menu{
    width: calc(100% + 2px) !important;
    left: -1px !important;
    margin-top: 5px !important;
    max-height: 500px !important;
    z-index: 3;
}

.bootstrap-select .dropdown-menu>.inner:focus{outline:0!important}

.bootstrap-select .dropdown-menu.inner{position:static;float:none;border:0;padding:0;margin:0;border-radius:0;-webkit-box-shadow:none;box-shadow:none}

.bootstrap-select .dropdown-menu li.active small{color:rgba(255,255,255,.5)!important}

.bootstrap-select .dropdown-menu li.disabled a{cursor:not-allowed}

.bootstrap-select .dropdown-menu li a{cursor:pointer;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

.bootstrap-select .dropdown-menu li a.opt{position:relative;padding-left:2.25em}

.bootstrap-select .dropdown-menu li a span.check-mark{display:none}

.bootstrap-select .dropdown-menu li a span.text{display:flex;flex-direction: column;}

.bootstrap-select .dropdown-menu .notify{position:absolute;bottom:5px;width:96%;margin:0 2%;min-height:26px;padding:3px 5px;background:#f5f5f5;border:1px solid #e3e3e3;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.05);box-shadow:inset 0 1px 1px rgba(0,0,0,.05);pointer-events:none;opacity:.9;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.bootstrap-select .dropdown-menu .notify.fadeOut{-webkit-animation:.3s linear 750ms forwards bs-notify-fadeOut;-o-animation:.3s linear 750ms forwards bs-notify-fadeOut;animation:.3s linear 750ms forwards bs-notify-fadeOut}

.bootstrap-select .no-results{padding:3px;background:#f5f5f5;margin:0 5px;white-space:nowrap}

.bootstrap-select.fit-width .dropdown-toggle .filter-option{position:static;display:inline;padding:0}

.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner,.bootstrap-select.fit-width .dropdown-toggle .filter-option-inner-inner{display:inline}

.bootstrap-select.fit-width .dropdown-toggle .bs-caret:before{content:'\00a0'}

.bootstrap-select.fit-width .dropdown-toggle .caret{position:static;top:auto;margin-top:-1px}


.bootstrap-select.show-menu-arrow.open>.dropdown-toggle,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle{z-index:1061}

.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:before{content:'';border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid rgba(204,204,204,.2);position:absolute;bottom:-4px;left:9px;display:none}

.bootstrap-select.show-menu-arrow .dropdown-toggle .filter-option:after{content:'';border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:6px solid #fff;position:absolute;bottom:-4px;left:10px;display:none}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:before{bottom:auto;top:-4px;border-top:7px solid rgba(204,204,204,.2);border-bottom:0}

.bootstrap-select.show-menu-arrow.dropup .dropdown-toggle .filter-option:after{bottom:auto;top:-4px;border-top:6px solid #fff;border-bottom:0}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:before{right:12px;left:auto}

.bootstrap-select.show-menu-arrow.pull-right .dropdown-toggle .filter-option:after{right:13px;left:auto}

.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.open>.dropdown-toggle .filter-option:before,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:after,.bootstrap-select.show-menu-arrow.show>.dropdown-toggle .filter-option:before{display:block}
.bs-actionsbox{width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.bs-actionsbox .btn-group{display:block}

.bs-actionsbox .btn-group button{width:50%}

.bs-donebutton{float:left;width:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}

.bs-donebutton .btn-group{display:block}

.bs-donebutton .btn-group button{width:100%}

.bs-searchbox+.bs-actionsbox{padding:0 8px 4px}

.bs-searchbox .form-control{
    padding: 5px !important;
    background: #101010;
}

.nav-item.mega-menu:hover .mega-content {
    display: flex !important;
}

.x-menu{
    background-color: #04da8d;
    border-radius: 6px;
    color: #000;
    cursor: pointer;
    background-image: none;
    min-width: 0;
    gap: 8px;
    padding: 2px 10px;
    display: inline-flex;
}

.discord-menu{
    background: linear-gradient(90deg, #fc72ff 0%, #8f68ff 25%, #487bff 50%, #2cd9ff 75%, #2cffcc 100%);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    min-width: 0;
    gap: 8px;
    padding: 2px 10px;
    display: inline-flex
;
}

.mega-content {
    z-index: 1;
    border-radius: var(--radius-medium);
    -webkit-backdrop-filter: blur(100px);
    backdrop-filter: blur(100px);
    transform-origin: 25% 0;
    background-color: #26222126;
    align-items: flex-start;
    padding: 1.25rem 1.5rem;
    display: flex;
    position: absolute;
    top: 2.5rem;
    left: -.75rem;
    right: auto;
    width: 650px;
    box-shadow: 0 2px 4px -1px #1813030d, 0 30px 35px -10px #1611031a;
    border-radius:25px;
}

.mega-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.mega-content ul li {
    margin-bottom: 1rem;
}

.mega-content a {
    color: #fff;
    text-decoration: none;
}

.mega-content a:hover {
    text-decoration: underline;
}

.x-menu{
    background-color: #04da8d;
    border-radius: 6px;
    color: #000;
    cursor: pointer;
    background-image: none;
    min-width: 0;
    gap: 8px;
    padding: 2px 10px;
    display: inline-flex;
}

.discord-menu{
    background: linear-gradient(90deg, #fc72ff 0%, #8f68ff 25%, #487bff 50%, #2cd9ff 75%, #2cffcc 100%);
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    min-width: 0;
    gap: 8px;
    padding: 2px 10px;
    display: inline-flex
;
}


h1{
      line-height: 1.1 !important;
  }

.fpy-15{
    padding-bottom: 6rem !important;
    padding-top: 9rem !important;
    
}

.hero-float-cards {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hero-float-card {
  position: absolute;
  opacity: 0;
  transform: translateY(14px) scale(0.9);
  transition: opacity 0.7s cubic-bezier(.4,0,.2,1), transform 0.7s cubic-bezier(.4,0,.2,1);
  will-change: opacity, transform;
  pointer-events: none;
}
.hero-float-card.hfc-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.hfc-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,0.1);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 8px 32px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08);
  white-space: nowrap;
}
.hfc-inner img, .hfc-inner picture img {
  width: 32px !important;
  height: 32px !important;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.hfc-inner picture {
  flex-shrink: 0;
  line-height: 0;
}
.hfc-info {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.hfc-name {
  font-size: 12px;
  color: rgba(255,255,255,0.7);
}
.hfc-amount {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.hfc-badge {
  color: #04da8d;
  flex-shrink: 0;
  display: flex;
}
@media (max-width: 767.98px) {
  .hero-float-cards {
    display: none;
  }
}

html[mode="dark"] .bg-main{
    background: var(--body-bg);
}
.bg-main > picture.section-bg img { object-fit: contain; object-position: top center; }

/* Leaderboard Swiper Styling */

#leaderboard-quarters-swiper {
    overflow: hidden;
    position: relative;
}

#leaderboard-quarters-swiper .swiper-slide {
    transition: transform 0.3s ease;
}

#leaderboard-quarters-swiper .swiper-slide:hover {
    transform: scale(1.05);
}

#leaderboard-quarters-swiper .swiper-slide.active .card {
    border: 2px solid var(--main-color);
    box-shadow: 0 0 0 2px rgba(var(--main-color-rgb), 0.2);
    background-color: rgba(var(--main-color-rgb), 0.1);
}

#leaderboard-quarters-swiper .swiper-slide.swiper-slide-active .card {
    border: 2px solid var(--main-color);
    box-shadow: 0 0 0 2px rgba(var(--main-color-rgb), 0.2);
}

.language-switcher .flag-icon { border-radius: 50%; vertical-align: middle; }
.language-switcher .dropdown-item .flag-icon { border-radius: 50%; }
.language-switcher .dropdown-toggle {
    color: var(--text-color);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: none;
    background: transparent;
}

.language-switcher .dropdown-toggle:hover {
    color: var(--main-color);
}

.minvheight-100 .language-switcher.dropdown {
    position: relative;
}

.minvheight-100 .language-switcher .dropdown-menu {
    top: auto;
    bottom: 100%;
}

.dark *{
    --text-secondary:#fff;
}

.dark h5{
    color:#fff;
}

/* Setup Orb Animation Styles */

/* Setup Progress Steps */

.setup-progress {
    margin-bottom: 2rem;
}

.step {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.step[data-active="true"] .step-number {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-color: #667eea;
    color: #fff;
    box-shadow: 0 0 20px rgba(102, 126, 234, 0.4);
}

.step[data-active="true"] .step-label {
    color: #667eea;
    font-weight: 600;
}

/* Visual Circle Container */

/* World Orb Animation - Enhanced Version */

.orb-core {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, 
        rgba(102, 126, 234, 0.95) 0%, 
        rgba(118, 75, 162, 0.9) 25%, 
        rgba(236, 72, 153, 0.85) 50%, 
        rgba(102, 126, 234, 0.8) 75%, 
        rgba(118, 75, 162, 0.7) 100%);
    animation: orbFloat 8s ease-in-out infinite;
    box-shadow: 
        0 0 80px rgba(102, 126, 234, 0.8),
        0 0 160px rgba(118, 75, 162, 0.6),
        0 0 240px rgba(236, 72, 153, 0.4),
        inset 0 0 80px rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
}

.orb-particles {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.orb-particles::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, 0.9) 2px, transparent 2px),
        radial-gradient(circle at 80% 40%, rgba(255, 255, 255, 0.8) 1.5px, transparent 1.5px),
        radial-gradient(circle at 40% 80%, rgba(255, 255, 255, 0.9) 1px, transparent 1px),
        radial-gradient(circle at 70% 70%, rgba(255, 255, 255, 0.7) 2.5px, transparent 2.5px),
        radial-gradient(circle at 10% 60%, rgba(255, 255, 255, 0.8) 1px, transparent 1px),
        radial-gradient(circle at 90% 20%, rgba(255, 255, 255, 0.9) 1.5px, transparent 1.5px),
        radial-gradient(circle at 60% 10%, rgba(255, 255, 255, 0.7) 2px, transparent 2px),
        radial-gradient(circle at 30% 90%, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
    background-size: 50px 50px, 70px 70px, 60px 60px, 80px 80px, 40px 40px, 65px 65px, 55px 55px, 75px 75px;
    animation: orbRotate 25s linear infinite;
    opacity: 0.9;
}

.orb-particles::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at 15% 15%, rgba(102, 126, 234, 0.8) 3px, transparent 3px),
        radial-gradient(circle at 85% 35%, rgba(236, 72, 153, 0.7) 2px, transparent 2px),
        radial-gradient(circle at 45% 85%, rgba(118, 75, 162, 0.8) 2.5px, transparent 2.5px),
        radial-gradient(circle at 75% 75%, rgba(102, 126, 234, 0.6) 1.5px, transparent 1.5px);
    background-size: 45px 45px, 55px 55px, 65px 65px, 35px 35px;
    animation: orbRotate 15s linear infinite reverse;
    opacity: 0.7;
}

.orb-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 140%;
    height: 140%;
    border-radius: 50%;
    background: radial-gradient(circle, 
        rgba(102, 126, 234, 0.4) 0%, 
        rgba(118, 75, 162, 0.3) 30%, 
        rgba(236, 72, 153, 0.2) 60%, 
        transparent 80%);
    animation: orbPulse 6s ease-in-out infinite;
    filter: blur(25px);
}

.orb-rings {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    border-radius: 50%;
    border: 2px solid rgba(102, 126, 234, 0.3);
    animation: orbRings 12s linear infinite;
}

.orb-rings::before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    width: calc(100% + 20px);
    height: calc(100% + 20px);
    border-radius: 50%;
    border: 1px solid rgba(118, 75, 162, 0.2);
    animation: orbRings 8s linear infinite reverse;
}

.orb-rings::after {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: calc(100% + 40px);
    height: calc(100% + 40px);
    border-radius: 50%;
    border: 1px solid rgba(236, 72, 153, 0.15);
    animation: orbRings 16s linear infinite;
}

.orb-energy {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        rgba(102, 126, 234, 0.8) 0deg,
        rgba(118, 75, 162, 0.6) 90deg,
        rgba(236, 72, 153, 0.8) 180deg,
        rgba(102, 126, 234, 0.6) 270deg,
        rgba(102, 126, 234, 0.8) 360deg
    );
    mask: radial-gradient(circle, transparent 60%, black 100%);
    animation: orbEnergy 20s linear infinite;
}

/* Step Status */

.step-status {
    text-align: center;
    color: #fff;
}

.current-step {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    background: linear-gradient(135deg, #667eea, #764ba2);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.step-description {
    font-size: 1rem;
    opacity: 0.9;
    color: #fff;
}

/* Orb Animations */

/* Step-specific Orb States */

.world-orb[data-step="1"] .orb-core {
    background: radial-gradient(circle at 30% 30%, 
        rgba(102, 126, 234, 0.9) 0%, 
        rgba(118, 75, 162, 0.8) 30%, 
        rgba(236, 72, 153, 0.7) 60%, 
        rgba(102, 126, 234, 0.6) 100%);
    animation: orbFloat 6s ease-in-out infinite;
}

.world-orb[data-step="2"] .orb-core {
    background: radial-gradient(circle at 70% 30%, 
        rgba(236, 72, 153, 0.9) 0%, 
        rgba(102, 126, 234, 0.8) 30%, 
        rgba(118, 75, 162, 0.7) 60%, 
        rgba(236, 72, 153, 0.6) 100%);
    animation: orbFloat 4s ease-in-out infinite;
}

.world-orb[data-step="3"] .orb-core {
    background: radial-gradient(circle at 50% 50%, 
        rgba(118, 75, 162, 0.9) 0%, 
        rgba(236, 72, 153, 0.8) 30%, 
        rgba(102, 126, 234, 0.7) 60%, 
        rgba(118, 75, 162, 0.6) 100%);
    animation: orbFloat 3s ease-in-out infinite;
}

.world-orb[data-step="4"] .orb-core {
    background: radial-gradient(circle at 80% 20%, 
        rgba(102, 126, 234, 0.9) 0%, 
        rgba(118, 75, 162, 0.8) 30%, 
        rgba(236, 72, 153, 0.7) 60%, 
        rgba(102, 126, 234, 0.6) 100%);
    animation: orbFloat 2s ease-in-out infinite;
}

/* Success Message */

.success-message {
    text-align: center;
    padding: 2rem;
}

.success-message i {
    display: block;
    margin: 0 auto 1rem;
}

/* Three.js Orb Container */

.threejs-orb {
    width: 100%;
    height: 400px;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(102, 126, 234, 0.1), rgba(118, 75, 162, 0.1));
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

.threejs-orb canvas {
    border-radius: 20px;
    display: block;
    width: 100%;
    height: 100%;
}

/* Three.js Orb Loading State */

.threejs-orb::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    border: 4px solid rgba(102, 126, 234, 0.2);
    border-top: 4px solid #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    z-index: 1;
}

.threejs-orb::after {
    content: 'Loading 3D Orb...';
    position: absolute;
    top: calc(50% + 60px);
    left: 50%;
    transform: translateX(-50%);
    color: #667eea;
    font-size: 14px;
    font-weight: 500;
    z-index: 1;
}

.threejs-orb.loaded::before,
.threejs-orb.loaded::after {
    display: none;
}

.threejs-orb.loaded {
    display: block;
}

/* Fallback HTML Orb */

.world-orb.fallback-active {
    display: block !important;
}

/* Responsive Design */

@media (max-width: 768px) {
    .flex-sm-column-reverse{
        flex-direction: column-reverse;
    }
    .world-orb {
        width: 150px;
        height: 150px;
    }
    
    .threejs-orb {
        height: 300px;
    }
    
    .step-indicator {
        flex-direction: column;
        gap: 1rem;
    }
    
    .step-indicator::before {
        display: none;
    }
    
    .step {
        flex-direction: row;
        gap: 1rem;
    }
}

.filter-group .form-select,
.filter-group .form-control {
    margin-bottom: 0;
    flex: 1;
}

.filter-group .form-select:focus,
.filter-group .form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Filtreleme badge'leri */

.filter-badge .btn-close {
    margin-left: 5px;
    font-size: 10px;
}

/* Responsive filtreleme */

/* DataTable Column Search Styling */

/* Fixed columns için column search */

.dtfc-fixed-left .column-search {
    background-color: #e9ecef !important;
}

.dtfc-fixed-left .column-search:focus {
    background-color: #fff !important;
}

/* Advanced Column Filter Styling */

/* Fixed columns için özel stil */

.dtfc-fixed-left .number-filter input,
.dtfc-fixed-left .date-filter input,
.dtfc-fixed-left .column-search-select {
    background-color: #e9ecef !important;
}

.dtfc-fixed-left .number-filter input:focus,
.dtfc-fixed-left .date-filter input:focus,
.dtfc-fixed-left .column-search-select:focus {
    background-color: #fff !important;
}

::-webkit-scrollbar {
    height: 6px;  
    width: 6px;
  }

/* ARKA PLAN (scrollbar alanı) */

::-webkit-scrollbar-track {
    background: var(--card-primary-background);
    border-radius: 6px;
  }

/* KAYDIRMA ÇUBUĞU */

::-webkit-scrollbar-thumb {
    background: linear-gradient(45deg, var(--card-primary-background), var(--card-secondary-background));
    border-radius: 6px;
    transition: background 0.6s ease;
  }

/* HOVER DURUMU */

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(45deg, var(--main-color), var(--secondary-color));
  }

* {
    scrollbar-width: thin;
    scrollbar-color: var(--main-color) var(--card-primary-background);
  }

.bg2{
    background: var(--card-secondary-background);
    backdrop-filter: blur(3px);
}

.card_grid {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    background-image: linear-gradient(rgba(255, 255, 255, 1) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 1) 1px, transparent 1px);
    background-size: 2.5em 2.5em;
    -webkit-mask-image: radial-gradient(50% 50.00% at 50% 50.00%, #D9D9D9 0%, rgba(217, 217, 217, 0.00) 100%);
    opacity: 0.08;
  }

.card_grid.up {
    animation: up-grid 50s linear infinite;
}

/* Keyframes for moving the grid */

/** Trumbowyg v2.27.3 - A lightweight WYSIWYG editor - alex-d.github.io/Trumbowyg/ - License MIT - Author : Alexandre Demode (Alex-D) / alex-d.fr */

#trumbowyg-icons,.trumbowyg-icons {
    overflow: hidden;
    visibility: hidden;
    height: 0;
    width: 0
}

#trumbowyg-icons svg,.trumbowyg-icons svg {
    height: 0;
    width: 0
}

.trumbowyg-box .trumbowyg-editor {
    min-height: 100%;
    margin: 0 auto
}

.trumbowyg-editor {
    outline: 0;
    padding: 20px
}

.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-box-blur .trumbowyg-editor::before {
    color: transparent!important;
    text-shadow: 0 0 7px #333
}

@media screen and (min-width: 0 \0) {
    .trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-box-blur .trumbowyg-editor::before {
        color:rgba(200,200,200,.6)!important
    }
}

@supports (-ms-accelerator:true) {
    .trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-box-blur .trumbowyg-editor::before {
        color: rgba(200,200,200,.6)!important
    }
}

.trumbowyg-box-blur .trumbowyg-editor hr,.trumbowyg-box-blur .trumbowyg-editor img {
    opacity: .2
}

.trumbowyg-button-pane button.trumbowyg-disable,.trumbowyg-button-pane.trumbowyg-disable button:not(.trumbowyg-not-disable):not(.trumbowyg-active),.trumbowyg-disabled .trumbowyg-button-pane button:not(.trumbowyg-not-disable):not(.trumbowyg-viewHTML-button) {
    opacity: .2;
    cursor: default;
    pointer-events: none
}

.trumbowyg-modal-box .error {
    margin-top: 25px;
    display: block;
    color: red
}

body.trumbowyg-body-fullscreen {
    overflow: hidden
}

.trumbowyg-editor embed,.trumbowyg-editor img,.trumbowyg-editor object,.trumbowyg-editor video {
    max-width: 100%
}

.trumbowyg-editor img,.trumbowyg-editor video {
    height: auto
}

.trumbowyg-editor img {
    cursor: move
}

.trumbowyg-editor canvas:focus {
    outline: 0
}

.trumbowyg-editor.trumbowyg-reset-css {
    background: #fefefe!important;
    font-family: "Trebuchet MS",Helvetica,Verdana,sans-serif!important;
    font-size: 14px!important;
    line-height: 1.45em!important;
    color: #333!important;
    font-weight: 400!important
}

.trumbowyg-editor.trumbowyg-reset-css a {
    color: #15c!important;
    text-decoration: underline!important
}

.trumbowyg-editor.trumbowyg-reset-css blockquote,.trumbowyg-editor.trumbowyg-reset-css div,.trumbowyg-editor.trumbowyg-reset-css ol,.trumbowyg-editor.trumbowyg-reset-css p,.trumbowyg-editor.trumbowyg-reset-css ul {
    -webkit-box-shadow: none!important;
    box-shadow: none!important;
    background: 0 0!important;
    margin: 0!important;
    margin-bottom: 15px!important;
    line-height: 1.4em!important;
    font-family: "Trebuchet MS",Helvetica,Verdana,sans-serif!important;
    font-size: 14px!important;
    border: none!important
}

.trumbowyg-editor.trumbowyg-reset-css hr,.trumbowyg-editor.trumbowyg-reset-css iframe,.trumbowyg-editor.trumbowyg-reset-css object {
    margin-bottom: 15px!important
}

.trumbowyg-editor.trumbowyg-reset-css blockquote {
    margin-left: 32px!important;
    font-style: italic!important;
    color: #555!important
}

.trumbowyg-editor.trumbowyg-reset-css ul {
    list-style: disc!important
}

.trumbowyg-editor.trumbowyg-reset-css ol {
    list-style: decimal!important
}

.trumbowyg-editor.trumbowyg-reset-css ol,.trumbowyg-editor.trumbowyg-reset-css ul {
    padding-left: 20px!important
}

.trumbowyg-editor.trumbowyg-reset-css ol ol,.trumbowyg-editor.trumbowyg-reset-css ol ul,.trumbowyg-editor.trumbowyg-reset-css ul ol,.trumbowyg-editor.trumbowyg-reset-css ul ul {
    border: none!important;
    margin: 2px!important;
    padding: 0!important;
    padding-left: 24px!important
}

.trumbowyg-editor.trumbowyg-reset-css hr {
    display: block!important;
    height: 1px!important;
    border: none!important;
    border-top: 1px solid #ccc!important
}

.trumbowyg-editor.trumbowyg-reset-css h1,.trumbowyg-editor.trumbowyg-reset-css h2,.trumbowyg-editor.trumbowyg-reset-css h3,.trumbowyg-editor.trumbowyg-reset-css h4 {
    color: #111!important;
    background: 0 0!important;
    margin: 0!important;
    padding: 0!important;
    font-weight: 700!important
}

.trumbowyg-editor.trumbowyg-reset-css h1 {
    font-size: 32px!important;
    line-height: 38px!important;
    margin-bottom: 20px!important
}

.trumbowyg-editor.trumbowyg-reset-css h2 {
    font-size: 26px!important;
    line-height: 34px!important;
    margin-bottom: 15px!important
}

.trumbowyg-editor.trumbowyg-reset-css h3 {
    font-size: 22px!important;
    line-height: 28px!important;
    margin-bottom: 7px!important
}

.trumbowyg-editor.trumbowyg-reset-css h4 {
    font-size: 16px!important;
    line-height: 22px!important;
    margin-bottom: 7px!important
}

.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
    text-shadow: 0 0 7px #ccc
}

@media screen and (min-width: 0 \0) {
    .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
        color:rgba(20,20,20,.6)!important
    }
}

@supports (-ms-accelerator:true) {
    .trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor *,.trumbowyg-dark .trumbowyg-box.trumbowyg-box-blur .trumbowyg-editor::before {
        color: rgba(20,20,20,.6)!important
    }
}

/* Bootstrap Select Subtext Style */

.bootstrap-select .dropdown-menu small.text-muted {
    color: var(--text-secondary) !important;
    font-size: 0.75rem !important;
    display: inline-block;
    font-weight: 100;
    line-height: 13px;
}

@keyframes shine {
  0%, 100% {
    background-position: 50% 50%;
  }
  50% {
    background-position: 60% 60%;
  }
}

@keyframes moveBackgroundDown {
  0% {
    transform: translateY(-100%);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes datatables-loader-1 {
    0% {
        transform: scale(0)
    }
    to {
        transform: scale(1)
    }
}

@keyframes datatables-loader-3 {
    0% {
        transform: scale(1)
    }
    to {
        transform: scale(0)
    }
}

@keyframes datatables-loader-2 {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(24px)
    }
}

@keyframes passing-through {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }
    30%,
    70% {
        opacity: 1;
        transform: translateY(0)
    }
    to {
        opacity: 0;
        transform: translateY(-40px)
    }
}

@keyframes slide-in {
    0% {
        opacity: 0;
        transform: translateY(40px)
    }
    30% {
        opacity: 1;
        transform: translateY(0)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }
    10% {
        transform: scale(1.1)
    }
    20% {
        transform: scale(1)
    }
}

@keyframes loading {
    0% {
        left: -25%
    }
    to {
        left: 100%
    }
}

@keyframes spin {
    0% { transform: translate(-50%, -50%) rotate(0deg); }
    100% { transform: translate(-50%, -50%) rotate(360deg); }
}

@keyframes modalScale {
    from { transform: scale(0.7); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
  }

@keyframes spinner-border {
    to {
        transform: rotate(1turn)
    }
}

@keyframes spinner-grow {
    0% {
        transform: scale(0)
    }
    50% {
        opacity: 1;
        transform: none
    }
}

@keyframes placeholder-glow {
    50% {
        opacity: .2
    }
}

@keyframes swiper-preloader-spin {
    0% {
        transform: rotate(0deg)
    }
    to {
        transform: rotate(1turn)
    }
}

@keyframes slideIn {
  0% { transform: translateX(100%); opacity: 0; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes slideOut {
  0% { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(-100%); opacity: 0; }
}

@keyframes alert { 
            0% { 
                bottom:-60px;
            }
            5% { 
                bottom:60px;
            } 
  
            95% { 
                bottom:60px;
                scale:1.1;
            } 
            100% {
                bottom:-60px;
                scale:1;
            } 
        }

@keyframes bs-notify-fadeOut{0%{opacity:.9}100%{opacity:0}}


@keyframes orbFloat {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
    }
    25% {
        transform: translate(-50%, -50%) scale(1.05) rotate(90deg);
    }
    50% {
        transform: translate(-50%, -50%) scale(0.95) rotate(180deg);
    }
    75% {
        transform: translate(-50%, -50%) scale(1.02) rotate(270deg);
    }
}

@keyframes orbRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@keyframes orbPulse {
    0%, 100% {
        opacity: 0.6;
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
}

@keyframes up-grid {
    0% {
        background-position: center 0;
    }

    100% {
        background-position: center -100%;
    }
}

#pricing_summary.stuck {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    border-radius: 0;
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.3);
}

/* Support Page */
.support-msg-user {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
}
.support-msg-manager {
    background: rgba(var(--bs-success-rgb), 0.05);
    border: 1px solid rgba(var(--bs-success-rgb), 0.15);
}
.support-msg-body {
    line-height: 1.6;
    word-break: break-word;
}
.support-faq-cat {
    transition: all 0.2s ease;
    cursor: pointer;
    border: 1px solid var(--border-color) !important;
}
.support-faq-cat:hover,
.support-faq-cat.active {
    border-color: var(--bs-primary) !important;
    box-shadow: 0 0 0 1px var(--bs-primary);
}
.support-faq-cat.active {
    color: var(--bs-primary);
}

/* FAQ Sidebar */
.faq-sidebar-cat-header {
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-color);
}
.faq-sidebar-cat-header:hover {
    background: var(--card-bg);
}
.faq-sidebar-cat-header.active {
    color: var(--bs-primary);
}
.faq-sidebar-cat-header .faq-cat-arrow {
    transition: transform 0.2s ease;
}
.faq-sidebar-cat-header[aria-expanded="true"] .faq-cat-arrow {
    transform: rotate(90deg);
}
.faq-sidebar-items {
    position: relative;
    margin-left: 1rem;
    padding-left: 0.75rem;
    border-left: 2px solid var(--border-color);
}
.faq-sidebar-item {
    font-size: 0.875rem;
    color: var(--text-muted);
    border-radius: 0 0.375rem 0.375rem 0;
    transition: all 0.15s ease;
    padding: 0.5rem 0.75rem !important;
    position: relative;
}
.faq-sidebar-item:hover {
    color: var(--text-color);
    background: var(--card-bg);
}
.faq-sidebar-item.active {
    color: var(--bs-primary);
    font-weight: 600;
    background: rgba(var(--bs-primary-rgb), 0.08);
}

/* FAQ Search Trigger */
.faq-search-trigger {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--border-color);
    border-radius: 0.5rem;
    color: var(--text-muted);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card-bg);
}
.faq-search-trigger:hover {
    border-color: var(--text-muted);
    color: var(--text-color);
}

/* FAQ Search Modal */
.faq-search-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    align-items: flex-start;
    justify-content: center;
    padding-top: 12vh;
}
.faq-search-modal.open {
    display: flex;
}
.faq-search-modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1;
}
.faq-search-modal-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 580px;
    background: var(--card-secondary-background, #fff);
    border-radius: 0.75rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    max-height: 65vh;
    display: flex;
    flex-direction: column;
    margin: 0 1rem;
    border: 1px solid var(--border-color);
}
.faq-search-modal-input-wrap {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border-color);
}
.faq-search-modal-input-wrap input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text-color);
}
.faq-search-modal-input-wrap input::placeholder {
    color: var(--text-muted);
}
.faq-search-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-muted);
    cursor: pointer;
    line-height: 1;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    transition: all 0.15s ease;
}
.faq-search-modal-close:hover {
    background: var(--border-color);
    color: var(--text-color);
}
.faq-search-modal-results {
    overflow-y: auto;
    padding: 0.5rem 0;
}
.faq-search-modal-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    padding: 0.5rem 1.25rem;
}
.faq-search-result-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1.25rem;
    text-decoration: none;
    color: var(--text-color);
    font-size: 0.9rem;
    transition: background 0.15s ease;
}
.faq-search-result-item:hover {
    background: var(--card-hover-bg, rgba(0, 0, 0, 0.04));
    color: var(--text-color);
}
.faq-search-result-item span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .faq-search-modal {
        padding-top: 2vh;
    }
    .faq-search-modal-content {
        max-height: 80vh;
        border-radius: 0.5rem;
    }
}

/* FAQ Popular Card */
.faq-popular-card {
    transition: all 0.2s ease;
    border: 1px solid var(--border-color);
}
.faq-popular-card:hover {
    border-color: var(--bs-primary);
    transform: translateY(-2px);
}

/* FAQ Popular Star */
.faq-star {
    cursor: pointer;
    font-size: 1.25rem;
    color: var(--text-muted, #888);
    transition: color 0.15s ease;
    user-select: none;
}
.faq-star:hover {
    color: #f5a623;
}
.faq-star.active {
    color: #f5a623;
}

/* Icon Picker */
.icon-picker-card {
    cursor: pointer;
    transition: all 0.15s ease;
    border: 1px solid var(--border-color);
}
.icon-picker-card:hover {
    border-color: var(--bs-primary);
    box-shadow: 0 0 0 1px var(--bs-primary);
}
.cat-icon-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

/* About Us Page */
.py-6 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}
.about-value-card {
    border: 1px solid var(--border-color);
    transition: all 0.3s ease;
}
.about-value-card:hover {
    border-color: var(--bs-primary);
    transform: translateY(-4px);
}
.about-vision-card {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 0.75rem;
    padding: 1.5rem;
}
.about-step-card {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: 1rem;
    padding: 2rem 1.5rem;
    padding-top: 3rem;
    height: 100%;
}
.about-step-number {
    position: absolute;
    top: -1rem;
    left: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--bs-primary);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
}
.about-timeline {
    position: relative;
    padding-left: 2rem;
}
.about-timeline::before {
    content: '';
    position: absolute;
    left: 0.5rem;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--border-color);
}
.about-timeline-item {
    position: relative;
    padding-bottom: 2.5rem;
    padding-left: 2rem;
}
.about-timeline-item:last-child {
    padding-bottom: 0;
}
.about-timeline-dot {
    position: absolute;
    left: -1.75rem;
    top: 0.25rem;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--bs-primary);
    border: 3px solid var(--card-bg);
    box-shadow: 0 0 0 2px var(--bs-primary);
}
.about-timeline-year {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--bs-primary);
    margin-bottom: 0.5rem;
}
.about-timeline-content h5 {
    margin-bottom: 0.5rem;
}

/* ── Live Chat Widget ── */
#lc-widget { position: fixed; bottom: 24px; right: 24px; z-index: 999999999; font-family: inherit; }

#lc-toggle {
    width: 56px; height: 56px; border-radius: 50%; border: none;
    background: var(--card-secondary-background);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25); transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}
#lc-toggle:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(0,0,0,0.3); }
#lc-toggle svg { stroke: #fff; }
#lc-badge {
    position: absolute; top: -4px; right: -4px;
    background: #ef4444; color: #fff; font-size: 11px; font-weight: 700;
    width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--bs-body-bg);
}

#lc-window {
    position: absolute; bottom: 72px; right: 0;
    width: 380px; height: 560px;
    background: var(--card-secondary-background); border: 1px solid var(--border-color);
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 12px 48px rgba(0,0,0,0.5);
    display: flex; flex-direction: column;
    animation: lcSlideUp 0.25s ease-out;
}
@keyframes lcSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Home Screen ── */
#lc-home { display: flex; flex-direction: column; height: 100%; }
.lc-home-hero {
    background: var(--bs-primary); color: #fff;
    padding: 28px 24px 24px; text-align: left;
    flex-shrink: 0;
}
.lc-home-hero h5 { color: #fff; font-weight: 700; font-size: 22px; margin: 0; }
.lc-home-hero .lc-home-sub { color: rgba(255,255,255,0.8); font-size: 13px; margin: 4px 0 0; }
.lc-home-logo { margin-bottom: 14px; }
.lc-home-logo img, .lc-home-logo picture img { width: 36px; height: 36px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,0.15); padding: 4px; }
.lc-home-body { padding: 0; overflow-y: auto; flex: 1; }

.lc-section-title {
    font-size: 13px; font-weight: 700; color: var(--bs-body-color);
    padding: 16px 20px 8px; letter-spacing: 0.01em;
}

/* ── Conversation List ── */
.lc-conv-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 20px; cursor: pointer; transition: background 0.15s;
    background: var(--card-primary-background); border-bottom: 1px solid var(--border-color);
}
.lc-conv-item:hover { opacity: 0.85; }
.lc-conv-item:last-child { border-bottom: none; }
.lc-conv-avatars {
    display: flex; flex-shrink: 0; position: relative; width: 44px; height: 40px;
}
.lc-conv-avatars.single { width: 40px; }
.lc-conv-ava {
    width: 36px; height: 36px; border-radius: 50%; object-fit: cover;
    border: 2px solid var(--card-secondary-background);
}
.lc-conv-avatars.single .lc-conv-ava { width: 40px; height: 40px; }
.lc-conv-avatars.multi .lc-conv-ava:nth-child(2) { position: absolute; left: 14px; top: 4px; width: 30px; height: 30px; }
.lc-conv-avatars.multi .lc-conv-ava:first-child { position: relative; z-index: 1; width: 30px; height: 30px; }
.lc-conv-list-pad { padding: 0px 20px 0px; }
.lc-conv-ava-placeholder {
    width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0;
    background: var(--bs-primary); color: #fff;
    display: flex; align-items: center; justify-content: center;
}
.lc-conv-ava-placeholder svg { stroke: #fff; }
.lc-conv-body { flex: 1; min-width: 0; }
.lc-conv-preview {
    font-size: 13px; color: var(--bs-body-color); font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    line-height: 1.4;
}
.lc-conv-meta {
    font-size: 11px; color: var(--bs-secondary-color); margin-top: 2px;
    display: flex; align-items: center; gap: 6px;
}
.lc-conv-arrow { flex-shrink: 0; color: var(--bs-secondary-color); }
.lc-conv-arrow svg { stroke: var(--bs-secondary-color); width: 16px; height: 16px; }

/* ── New Conversation Section ── */
.lc-new-section { padding: 4px 20px 20px; margin-top: auto; }
.lc-new-section .lc-section-title { padding: 16px 0 8px; }
.lc-reply-info {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    font-size: 12px; color: var(--bs-secondary-color); margin-bottom: 12px;
}
.lc-reply-info strong { color: var(--bs-body-color); }
.lc-reply-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #22c55e; flex-shrink: 0;
}
#lc-new-conv { border-radius: 10px; font-weight: 600; gap: 6px; display: flex; align-items: center; justify-content: center; padding: 10px; }
#lc-new-conv svg { stroke: #fff; }

/* ── Chat Header ── */
#lc-header, #lc-header-chat {
    padding: 14px 16px; background: var(--bs-primary); color: #fff;
    flex-shrink: 0;
}
#lc-header svg, #lc-header-chat svg { stroke: #fff; }
.lc-header-title { font-weight: 600; font-size: 14px; line-height: 1.3; display: flex; align-items: center; gap: 6px; }
.lc-header-avatars { display: flex; align-items: center; }
.lc-header-avatars img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,0.3); margin-right: -6px; }
.lc-header-avatars img:last-child { margin-right: 0; }
.lc-header-sub { font-size: 11px; opacity: 0.8; }
.lc-back-btn {
    background: rgba(255,255,255,0.15); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s; flex-shrink: 0;
}
.lc-back-btn:hover { background: rgba(255,255,255,0.25); }
.lc-back-btn svg { stroke: #fff; }

/* ── Kebab Menu ── */
.lc-kebab-wrap { position: relative; margin-left: auto; }
.lc-kebab-btn {
    background: rgba(255,255,255,0.15); border: none; color: #fff;
    width: 32px; height: 32px; border-radius: 50%; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s;
}
.lc-kebab-btn:hover { background: rgba(255,255,255,0.25); }
.lc-kebab-btn svg { fill: #fff; }
.lc-kebab-menu {
    position: absolute; top: 40px; right: 0;
    background: var(--card-primary-background); border: 1px solid var(--border-color);
    border-radius: 12px; min-width: 180px; padding: 6px 0;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10;
    animation: lcSlideUp 0.15s ease-out;
}
.lc-kebab-item {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 16px; cursor: pointer; font-size: 13px;
    color: var(--bs-body-color); transition: background 0.12s;
}
.lc-kebab-item:hover { background: rgba(255,255,255,0.05); }
.lc-kebab-item svg { stroke: var(--bs-body-color); flex-shrink: 0; }
.lc-kebab-sound { justify-content: space-between; }

.lc-toggle-switch { position: relative; width: 38px; height: 22px; flex-shrink: 0; }
.lc-toggle-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.lc-toggle-switch label {
    position: absolute; inset: 0; cursor: pointer;
    background: rgba(255,255,255,0.15); border-radius: 22px;
    transition: background 0.2s;
}
.lc-toggle-switch label::after {
    content: ''; position: absolute; left: 3px; top: 3px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; transition: transform 0.2s;
}
.lc-toggle-switch input:checked + label { background: var(--bs-primary); }
.lc-toggle-switch input:checked + label::after { transform: translateX(16px); }

/* ── Chat ── */
#lc-chat { flex: 1; display: flex; flex-direction: column; min-height: 0; }
#lc-messages {
    flex: 1; overflow-y: auto; padding: 16px; display: flex;
    flex-direction: column; gap: 8px; min-height: 0;
}

.lc-msg-row { display: flex; align-items: flex-end; gap: 8px; }
.lc-msg-user-row { justify-content: flex-end; }
.lc-msg-manager-row { justify-content: flex-start; }
.lc-msg-avatar {
    width: 28px; height: 28px; border-radius: 50%; object-fit: cover;
    flex-shrink: 0; margin-bottom: 2px;
}
/* Live chat widget bubbles — unified messages page (.kf-msg-bubble) ile
   aynı renk paletini kullan. side-me eşdeğeri user; default bubble eşdeğeri
   manager. Tek tema kaynağı: --kf-1 (brand) + --body-bg. */
.lc-msg {
    max-width: 75%; padding: 8px 12px; border-radius: 14px;
    font-size: 13px; line-height: 1.42; word-break: break-word; min-width: 80px;
}
.lc-msg-user {
    background: var(--kf-1); color: #fff;
    border-bottom-right-radius: 4px;
}
.lc-msg-manager {
    background: var(--body-bg); color: var(--text-color);
    border-bottom-left-radius: 4px;
}
.lc-msg-sender {
    font-size: 11px; font-weight: 600; opacity: 0.85; margin-bottom: 2px;
}
.lc-msg-time { font-size: 10px; opacity: 0.6; margin-top: 2px; }
.lc-msg-user .lc-msg-time { text-align: right; }
.lc-msg-quote {
    border-left: 3px solid rgba(255,255,255,0.25); padding: 2px 8px;
    margin-bottom: 4px; font-size: 12px; opacity: 0.75; line-height: 1.4;
}
.lc-msg-user .lc-msg-quote { border-left-color: rgba(255,255,255,0.4); }
.lc-att-wrap { margin-top: 4px; }
.lc-att-img { max-width: 100%; border-radius: 8px; margin-top: 4px; display: block; max-height: 200px; object-fit: cover; }
.lc-att-img-link { display: block; }
.lc-att-file {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 10px; border-radius: 8px; margin-top: 4px;
    background: rgba(255,255,255,0.08); color: var(--bs-body-color);
    font-size: 12px; text-decoration: none; word-break: break-all;
}
.lc-att-file:hover { background: rgba(255,255,255,0.14); }
.lc-join-separator {
    display: flex; align-items: center; gap: 10px;
    padding: 4px 0; margin: 4px 0;
}
.lc-join-separator::before, .lc-join-separator::after {
    content: ''; flex: 1; height: 1px; background: var(--bs-border-color);
}
.lc-join-separator span {
    font-size: 11px; color: var(--bs-secondary-color); white-space: nowrap;
    font-weight: 500;
}

#lc-input-area { padding: 10px 12px; border-top: 1px solid var(--bs-border-color); flex-shrink: 0; }
#lc-input-area .form-control { border-radius: 20px; font-size: 13px; }
.lc-send-btn { border-radius: 50%; width: 34px; height: 34px; padding: 0; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.lc-send-btn svg { stroke: #fff; }

@media (max-width: 480px) {
    #lc-window { width: calc(100vw - 32px); right: -8px; bottom: 66px; height: 70vh; }
    #lc-widget { bottom: 16px; right: 16px; }
}

/* Master Edge Grid */
.me-grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 8px; }
.me-item { display: flex; align-items: center; justify-content: center; min-height: 120px; border-radius: 12px; background: var(--card-primary-background, rgba(255,255,255,0.03)); border: 1px solid var(--bs-border-color, rgba(255,255,255,0.06)); transition: transform 0.2s, border-color 0.2s; }
.me-item:hover { transform: translateY(-2px); border-color: var(--bs-border-color, rgba(255,255,255,0.15)); }
.me-item svg, .me-item .ic { opacity: 0.6; transition: opacity 0.2s; }
.me-item:hover svg, .me-item:hover .ic { opacity: 1; }
@media (max-width: 768px) {
    .me-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
    .me-item { min-height: 80px; }
    .me-item svg, .me-item .ic { width: 40px !important; height: 40px !important; }
}
.text-decoration-line-through{
    text-decoration: line-through !important;
}
/* Video Testimonial Cards - Infinite Marquee */
.vtc-marquee-wrap { width: 100%; overflow: hidden; padding: 20px 0; position: relative; }
.vtc-world-bg { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 700px; height: 350px; overflow: hidden; pointer-events: none; z-index: 0; opacity: 0.12; }
.vtc-marquee-wrap .container { position: relative; z-index: 1; }
.vtc-marquee-wrap .vtc-marquee-track { position: relative; z-index: 1; }
.vtc-marquee-track { display: flex; gap: 16px; width: max-content; animation: vtc-scroll 60s linear infinite; }
.vtc-marquee-wrap:hover .vtc-marquee-track { animation-play-state: paused; }
@keyframes vtc-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-100% / 3)); } }
.vtc-link { text-decoration: none; color: inherit; display: block; flex-shrink: 0; width: 240px; }
.vtc-card { border-radius: 14px; overflow: hidden; background: var(--card-primary-background); border: 1px solid var(--bs-border-color, rgba(255,255,255,0.08)); transition: transform 0.2s, box-shadow 0.2s; }
.vtc-card:hover { transform: translateY(-4px); box-shadow: 0 8px 32px rgba(0,0,0,0.3); }
.vtc-thumb { position: relative; aspect-ratio: 3/4; overflow: hidden; }
.vtc-thumb > picture { position: absolute; inset: 0; width: 100%; height: 100%; }
.vtc-thumb-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vtc-badge { position: absolute; top: 8px; left: 8px; display: flex; align-items: center; gap: 4px; background: rgba(0,0,0,0.7); backdrop-filter: blur(6px); padding: 3px 8px; border-radius: 5px; font-size: 10px; font-weight: 600; color: #fff; z-index: 2; line-height: 1.4; }
.vtc-badge svg { flex-shrink: 0; }
.vtc-views { opacity: 0.7; }
.vtc-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; opacity: 0.9; transition: opacity 0.2s, transform 0.2s; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.4)); }
.vtc-card:hover .vtc-play { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
.vtc-info { padding: 10px 12px 6px; }
.vtc-name { font-size: 14px; font-weight: 700; color: var(--text-color, #fff); }
.vtc-country { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,0.45)); margin-top: 1px; }
.vtc-stats { display: flex; padding: 8px 12px 10px; border-top: 1px solid var(--bs-border-color, rgba(255,255,255,0.08)); }
.vtc-stat { flex: 1; }
.vtc-stat-label { display: block; font-size: 9px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--text-secondary, rgba(255,255,255,0.35)); font-weight: 600; margin-bottom: 2px; }
.vtc-stat-value { display: block; font-size: 12px; font-weight: 700; color: var(--text-color, #fff); }

.vtc-flag-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
.vtc-flag-row .flag-icon { border-radius: 50%; flex-shrink: 0; box-shadow: 0 1px 3px rgba(0,0,0,0.2); }
.vtc-country-cta { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 10px 0; font-size: 15px; color: var(--text-secondary, rgba(255,255,255,0.6)); text-align: center; }
.vtc-country-cta .flag-icon { flex-shrink: 0; border-radius: 50%; }
.vtc-country-cta strong { color: var(--text-color, #fff); }

@media (max-width: 768px) {
    .vtc-link { width: 185px; }
    .vtc-marquee-track { gap: 12px; animation-duration: 45s; }
    .vtc-badge { font-size: 9px; padding: 2px 6px; }
    .vtc-play svg { width: 36px; height: 36px; }
    .vtc-info { padding: 8px 10px 5px; }
    .vtc-name { font-size: 12px; }
    .vtc-country { font-size: 10px; }
    .vtc-stats { padding: 6px 10px 8px; }
    .vtc-stat-label { font-size: 8px; }
    .vtc-stat-value { font-size: 11px; }
    .vtc-country-cta { font-size: 13px; padding: 10px 14px; gap: 8px; }
    .vtc-world-bg { width: 600px; height: 300px; }
}

.ri { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 10px; flex-shrink: 0; }
.ri svg, .ri img { width: 20px; height: 20px; }
.ri-blue { background: rgba(59,130,246,0.12); color: #3b82f6; }
.ri-orange { background: rgba(245,158,11,0.12); color: #f59e0b; }
.ri-red { background: rgba(239,68,68,0.12); color: #ef4444; }
.ri-green { background: rgba(34,197,94,0.12); color: #22c55e; }
.ri-purple { background: rgba(168,85,247,0.12); color: #a855f7; }
.ri-cyan { background: rgba(6,182,212,0.12); color: #06b6d4; }
.ri-yellow { background: rgba(234,179,8,0.12); color: #eab308; }

.lb-quarters { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 24px; }
.lb-quarter { display: flex; flex-direction: column; align-items: center; padding: 12px 20px; border-radius: 12px; background: var(--card-bg, rgba(255,255,255,.05)); border: 1px solid rgba(255,255,255,.06); text-decoration: none; transition: all .2s; min-width: 120px; position: relative; }
.lb-quarter:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.lb-quarter.active { border-color: var(--kf-1, #3b82f6); background: rgba(59,130,246,.08); }
.lb-quarter-label { font-weight: 700; font-size: 15px; color: var(--text-color, #fff); }
.lb-quarter-sub { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,.4)); margin-top: 2px; }
.lb-quarter-now { display: inline-block; padding: 1px 8px; border-radius: 10px; background: rgba(34,197,94,.15); color: #22c55e; font-size: 10px; font-weight: 600; margin-top: 4px; }

.lb-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 32px; }
.lb-podium .card { overflow: hidden; }
.lb-podium-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.lb-podium-avatar { display: flex; align-items: center; gap: 8px; }
.lb-podium-avatar .flag-icon { border-radius: 50%; flex-shrink: 0; }
.lb-podium-name { font-weight: 600; font-size: 15px; }
.lb-podium-rank { font-size: 24px; font-weight: 700; color: var(--text-secondary, rgba(255,255,255,.4)); }
.lb-podium-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 16px; }
.lb-podium-stat { display: flex; flex-direction: column; }
.lb-podium-stat-label { font-size: 11px; color: var(--text-secondary, rgba(255,255,255,.4)); text-transform: uppercase; margin-bottom: 2px; }
.lb-podium-stat-value { font-size: 15px; font-weight: 700; }
.lb-podium-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgb(168 152 252 / 24%);
    backdrop-filter: blur(12px);
    font-size: 13px;
}.lb-podium-size { font-weight: 600; color: var(--kf-1, #3b82f6); }
.lb-podium-phase { color: var(--text-secondary, rgba(255,255,255,.5)); }

.lb-table { border-radius: 12px; overflow: hidden; }
.lb-table-header { display: grid; grid-template-columns: 50px 2fr 1fr 1fr 80px 1.2fr 1fr 100px; padding: 12px 20px; font-size: 12px; font-weight: 600; color: var(--text-secondary, rgba(255,255,255,.4)); text-transform: uppercase; border-bottom: 1px solid rgba(255,255,255,.06); }
.lb-table-row { display: grid; grid-template-columns: 50px 2fr 1fr 1fr 80px 1.2fr 1fr 100px; padding: 14px 20px; align-items: center; border-bottom: 1px solid rgba(255,255,255,.04); transition: background .15s; }
.lb-table-row:hover { background: rgba(255,255,255,.03); }
.lb-col-rank { font-weight: 600; color: var(--text-secondary, rgba(255,255,255,.4)); }
.lb-col-name { display: flex; align-items: center; gap: 8px; font-weight: 500; }
.lb-col-name .flag-icon { border-radius: 50%; flex-shrink: 0; }
.lb-col-profit { font-weight: 600; }
.lb-col-equity { font-weight: 500; }
.lb-col-gain { font-weight: 700; }
.lb-col-size { display: flex; align-items: center; gap: 6px; }
.lb-size-badge { display: inline-block; padding: 3px 10px; border-radius: 6px; background: rgba(59,130,246,.12); color: var(--kf-1, #3b82f6); font-size: 13px; font-weight: 600; }
.lb-phase-text { font-size: 12px; color: var(--text-secondary, rgba(255,255,255,.4)); }
.lb-col-country { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lb-col-country .flag-icon { border-radius: 50%; flex-shrink: 0; }
.lb-col-certs { display: flex; align-items: center; }

.lb-cert-stack { display: flex; align-items: center; cursor: pointer; padding: 4px 0; position: relative; }
.lb-cert-stack > picture { display: contents; }
.lb-cert-thumb { width: 36px; height: 36px; border-radius: 6px; object-fit: cover; border: 2px solid var(--card-primary-background, #111014); box-shadow: 0 1px 4px rgba(0,0,0,.3); transition: transform .2s; }
.lb-cert-stack:hover .lb-cert-thumb { box-shadow: 0 2px 8px rgba(0,0,0,.5); }
.lb-cert-more { font-size: 11px; font-weight: 600; color: var(--text-secondary, rgba(255,255,255,.5)); margin-left: 2px; }

.lb-podium-footer .lb-cert-stack { margin-top: 10px; }

.lb-viewer-overlay { position: fixed; inset: 0; z-index: 999999999; background: rgba(0,0,0,.92); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; }
.lb-viewer-overlay.active { display: flex; }
.lb-viewer-close { position: absolute; top: 16px; right: 16px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .2s; z-index: 2; }
.lb-viewer-close:hover { background: rgba(255,255,255,.2); }
.lb-viewer-counter { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: rgba(255,255,255,.6); font-size: 14px; font-weight: 500; z-index: 2; }
.lb-viewer-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); color: #fff; cursor: pointer; transition: background .2s; z-index: 2; }
.lb-viewer-nav:hover { background: rgba(255,255,255,.16); }
.lb-viewer-prev { left: 16px; }
.lb-viewer-next { right: 16px; }
.lb-viewer-img-wrap { display: flex; align-items: center; justify-content: center; max-width: 90vw; max-height: 85vh; }
.lb-viewer-img-wrap img { max-width: 100%; max-height: 85vh; border-radius: 12px; box-shadow: 0 8px 40px rgba(0,0,0,.6); object-fit: contain; transition: opacity .2s; }

@media (max-width: 768px) {
    .lb-quarters { gap: 6px; }
    .lb-quarter { min-width: 90px; padding: 8px 12px; }
    .lb-quarter-label { font-size: 13px; }
    .lb-podium { grid-template-columns: 1fr; gap: 12px; }
    .lb-table-header { display: none; }
    .lb-table-row { grid-template-columns: 40px 1fr 1fr; gap: 4px 8px; padding: 12px 14px; }
    .lb-col-equity, .lb-col-size, .lb-col-country { display: none; }
    .lb-col-certs { grid-column: 2 / -1; }
    .lb-col-rank { grid-row: span 2; align-self: center; }
    .lb-col-name { font-size: 14px; }
    .lb-col-profit { font-size: 13px; }
    .lb-col-gain { font-size: 13px; text-align: right; }
    .lb-viewer-nav { width: 36px; height: 36px; }
    .lb-viewer-prev { left: 8px; }
    .lb-viewer-next { right: 8px; }
}

/* Leaderboard v2 — monthly period picker + summary strip.
   Podium, table and certificate viewer reuse the .lb-* rules above. */
/* No card around the period picker — it sits flat on the page. */
.lb2-nav { margin-bottom: 24px; }
.lb2-nav-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.lb2-nav-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; flex-shrink: 0; border-radius: 10px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.06); color: var(--text-color, #fff); text-decoration: none; transition: background .2s, border-color .2s; }
.lb2-nav-arrow:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.14); color: var(--text-color, #fff); }
.lb2-nav-arrow.disabled { opacity: .25; pointer-events: none; }
.lb2-nav-title { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lb2-nav-month { display: flex; align-items: center; gap: 8px; font-size: 19px; font-weight: 700; line-height: 1.3; }
.lb2-nav-sub { display: flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-secondary, rgba(255,255,255,.5)); }
.lb2-live { display: inline-block; padding: 1px 8px; border-radius: 10px; background: rgba(34,197,94,.15); color: #22c55e; font-size: 10px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; }

.lb2-years { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.lb2-year { padding: 5px 14px; border-radius: 8px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-secondary, rgba(255,255,255,.5)); background: rgba(255,255,255,.04); border: 1px solid transparent; transition: all .2s; }
.lb2-year:hover { color: var(--text-color, #fff); background: rgba(255,255,255,.08); }
.lb2-year.active { color: var(--text-color, #fff); background: rgba(59,130,246,.1); border-color: var(--kf-1, #3b82f6); }

.lb2-months { display: grid; grid-template-columns: repeat(12, 1fr); gap: 6px; margin-bottom: 4px; }
.lb2-month { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 9px 4px; border-radius: 10px; text-decoration: none; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.05); transition: all .2s; position: relative; }
.lb2-month:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.12); }
.lb2-month.active { background: rgba(59,130,246,.1); border-color: var(--kf-1, #3b82f6); }
.lb2-month.disabled { opacity: .3; pointer-events: none; }
.lb2-month.now::after { content: ''; position: absolute; top: 6px; right: 6px; width: 5px; height: 5px; border-radius: 50%; background: #22c55e; }
.lb2-month-name { font-size: 13px; font-weight: 600; color: var(--text-color, #fff); }
.lb2-month-meta { font-size: 10px; font-weight: 500; color: var(--text-secondary, rgba(255,255,255,.45)); }

@media (max-width: 991px) {
    .lb2-months { grid-template-columns: repeat(6, 1fr); }
}

@media (max-width: 575px) {
    .lb2-nav-month { font-size: 16px; }
    .lb2-nav-sub { font-size: 11px; }
    .lb2-months { grid-template-columns: repeat(4, 1fr); }
}

.hiw-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}
.hiw-label {
    font-size: .75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    opacity: .8;
    margin-bottom: .5rem;
}
.hiw-step {
    position: absolute;
    top: 1.25rem;
    right: 1.5rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    font-weight: 700;
}
.hiw-checklist {
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.hiw-checklist-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: rgba(0,0,0,.25);
    border-radius: .75rem;
    padding: .65rem 1rem;
    font-size: .875rem;
    font-weight: 500;
}
.hiw-check { color: var(--theme-color); }
.hiw-cert-stack {
    position: relative;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.hiw-cert-card {
    position: absolute;
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.35);
    transition: transform .3s ease;
    transform: translateX(calc(var(--ci) * 18px - 36px)) rotate(calc((var(--ci) - 2) * -4deg));
    z-index: calc(5 - var(--ci));
}
.hiw-cert-card img { display: block; width: 170px; height: auto; }
.hiw-cert-stack:hover .hiw-cert-card {
    transform: translateX(calc(var(--ci) * 42px - 84px)) rotate(0deg);
}
@media (max-width: 991.98px) {
    .hiw-cert-stack { height: 130px; }
    .hiw-cert-card img { width: 140px; }
}
.hiw-physics {
    position: absolute;
    width: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: .75rem;
    left: 0;
    right: 0;
    bottom: 0;
}
.hiw-pb {
    position: absolute;
    left: 0;
    top: 0;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 2rem;
    padding: .35rem .65rem .35rem .35rem;
    white-space: nowrap;
    user-select: none;
    cursor: grab;
    will-change: transform;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.hiw-pb:active { cursor: grabbing; }
.hiw-pb img { border-radius: 50%; flex-shrink: 0; pointer-events: none; }
.hiw-pb span { font-size: .78rem; font-weight: 600; pointer-events: none; }

.chat-widget-fixed {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
    cursor: pointer;
}
.chat-widget-bubble {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: linear-gradient(180deg, #147839 0%, var(--body-bg) 100%);
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    padding: .6rem 1.2rem;
    font-size: .85rem;
    font-weight: 500;
    box-shadow: 0 4px 24px rgba(0,0,0,.25);
    transition: transform .2s, box-shadow .2s;
    white-space: nowrap;
    overflow: hidden;
}
.chat-widget-bubble:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.chat-widget-fixed:hover .chat-widget-bubble { transform: translateY(-2px); }
.chat-widget-text {
    display: inline-block;
    max-width: 280px;
    overflow: hidden;
    transition: max-width .5s ease, opacity .4s ease, margin .5s ease;
    opacity: 1;
    margin-left: 0;
}
.chat-widget-bubble.collapsed .chat-widget-text {
    max-width: 0;
    opacity: 0;
    margin-left: -.5rem;
}
.chat-widget-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    flex-shrink: 0;
    animation: chat-dot-pulse 2s ease-in-out infinite;
}
@keyframes chat-dot-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .4; }
}
.chat-widget-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    background: var(--card-secondary-background);
    border-radius: 2rem;
    padding: .5rem 1rem;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background .2s;
}
.chat-widget-inline:hover {
    background: var(--card-secondary-background);
}
.event-card { transition: transform .2s, box-shadow .2s; }
.event-card:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,.15); }
.event-countdown { font-variant-numeric: tabular-nums; }

/* Grid Event Page */
/* ── Grid Event Header ── */
.grid-event-header {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    padding: .5rem .75rem;
    gap: 0;
    background: var(--card-background);
    border-bottom: 1px solid var(--bs-border-color);
    position: sticky;
    top: 0;
    z-index: 20;
    gap: .5rem;
}
.grid-header-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: .5rem;
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: inherit;
    text-decoration: none;
    transition: background .15s, border-color .15s;
    cursor: pointer;
}
.grid-header-btn:hover { background: rgba(255,255,255,.08); }

/* Reward progress bar in header */
.grid-reward-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 60px;
    height: 38px;
    justify-content: center;
    align-items: center;
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    background: var(--card-secondary-background);
    cursor: pointer;
    transition: all .15s;
    position: relative;
    flex-shrink: 0;
    padding: 0;
}
.grid-reward-bar-track {
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, .08);
    overflow: hidden;
    width: 100%;
}
.grid-reward-bar-fill {
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, var(--bs-success), #ffc107);
    transition: width .5s ease;
}
.grid-reward-bar-label {
    font-size: .65rem;
    white-space: nowrap;
    line-height: 12px;
}

/* ── Grid Canvas ── */
.grid-event-canvas {
    width: 100%;
    height: calc(100vh - 52px - 60px);
    min-height: 300px;
    overflow: hidden;
    position: relative;
}
.grid-event-canvas #grid_canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* ── Sidebar (stats only) ── */
.grid-event-sidebar {
    position: fixed;
    top: 0; right: -320px;
    width: 300px; height: 100vh;
    background: var(--card-background);
    border-left: 1px solid var(--bs-border-color);
    z-index: 1050;
    transition: right .3s ease;
    overflow-y: auto;
}
.grid-event-sidebar.open { right: 0; }
.grid-event-sidebar-inner { padding: 1rem; }

/* ── Bottom action bar ── */
.grid-bottom-area {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: var(--card-primary-background);
    border-top: 1px solid var(--border-color);
}
.grid-action-bar-inner {
    padding: .5rem .75rem;
}

/* Bar icon buttons (participants / messages) */
.grid-bar-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: .5rem;
    border: 1px solid var(--border-color);
    background: var(--card-secondary-background);
    cursor: pointer;
    transition: all .15s;
    position: relative;
    flex-shrink: 0;
    padding: 0;
}
.grid-bar-icon:hover { background: rgba(255,255,255,.08); }
@keyframes barPulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: 0 0 8px 2px var(--bs-primary); border-color: var(--bs-primary); }
}
.grid-bar-pulse { animation: barPulse .5s ease 3; }
.grid-bar-icon.active {
    border-color: var(--bs-primary);
    color: var(--bs-primary);
    background: rgba(var(--bs-primary-rgb), .12);
}
.grid-bar-icon .grid-msg-badge {
    position: absolute;
    top: -4px; right: -4px;
}
.grid-msg-badge {
    font-size: .55rem;
    background: var(--bs-danger);
    color: #fff;
    padding: 0 .3rem;
    border-radius: .5rem;
    line-height: 1.4;
    min-width: 14px;
    text-align: center;
}
.grid-tab-count {
    font-size: .65rem;
    background: rgba(255,255,255,.1);
    padding: 0 .35rem;
    border-radius: .5rem;
    line-height: 1.5;
}

/* Grid cell selector */
.grid-cell-select {
    display: flex;
    align-items: center;
    gap: .35rem;
    background: var(--card-secondary-background);
    border: 1px solid var(--border-color);
    border-radius: .4rem;
    padding: .25rem .5rem;
    flex-shrink: 0;
}
.grid-cell-label {
    font-size: .6rem;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    font-weight: 700;
    letter-spacing: .04em;
}
.grid-cell-id {
    font-size: .8rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    min-width: 36px;
    color: var(--bs-primary);
}
.grid-auto-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: .35rem;
    border: 1px solid var(--bs-border-color);
    background: transparent;
    color: var(--bs-secondary-color);
    cursor: pointer;
    transition: all .15s;
    padding: 0;
}
.grid-auto-btn:hover { background: rgba(255,255,255,.08); }
.grid-auto-btn.active {
    color: #c2b0f1;
    background: #212023;
}
@keyframes autoSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.grid-auto-btn.active svg { animation: autoSpin 2s linear infinite; }

/* Open Grid button with inline timer */
.grid-open-btn {
    display: inline-flex !important;
    align-items: center;
    gap: .4rem;
    padding: .4rem .75rem !important;
}
.grid-btn-timer {
    position: relative;
    width: 28px; height: 28px;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.grid-btn-timer svg { display: block; }
.grid-btn-timer-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-weight: 700;
    font-size: .6rem;
    font-variant-numeric: tabular-nums;
    color: #fff;
}

/* Queto ring pulse (inside button) */
.queto-ring-anim { transition: stroke-dashoffset .5s linear; }
@keyframes quetoPulse {
    0%,100% { filter: drop-shadow(0 0 2px #fff); opacity:1; }
    50% { filter: drop-shadow(0 0 6px #fff); opacity:.85; }
}
.queto-ring-anim.pulsing { animation: quetoPulse 1s ease-in-out infinite; }
@keyframes quetoReady {
    0% { transform: rotate(-90deg) scale(1); }
    50% { transform: rotate(-90deg) scale(1.15); }
    100% { transform: rotate(-90deg) scale(1); }
}
.queto-ring-anim.ready {
    animation: quetoReady .6s ease-in-out;
    stroke: #4ade80;
    filter: drop-shadow(0 0 6px rgba(74,222,128,.6));
}

/* Queto mini (for waiting bar) */
.grid-queto-mini {
    position: relative;
    width: 44px; height: 44px;
    flex-shrink: 0;
}
.grid-queto-mini-text {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%,-50%);
    font-weight: 700;
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
}

/* ── Floating overlays (participants right, messages left) ── */
.grid-floating-overlay {
    position: fixed;
    width: 240px;
    bottom: 60px;
    max-height: 300px;
    z-index: 1035;
    border-radius: .5rem;
    overflow: hidden;
    background: rgba(30, 32, 38, .8);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .08);
    display: flex;
    flex-direction: column;
    transform: translateX(0);
    transition: transform .3s ease, opacity .3s ease;
    opacity: 0;
    pointer-events: none;
}
.grid-floating-overlay.open {
    opacity: 1;
    pointer-events: auto;
}
.grid-overlay-right {
    right: 8px;
    transform: translateX(20px);
}
.grid-overlay-right.open { transform: translateX(0); }
.grid-overlay-left {
    left: 8px;
    transform: translateX(-20px);
}
.grid-overlay-left.open { transform: translateX(0); }

.grid-overlay-header {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .45rem .6rem;
    font-size: .75rem;
    font-weight: 600;
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,.06);
}
.grid-overlay-close {
    margin-left: auto;
    background: none;
    border: none;
    color: var(--bs-secondary-color);
    cursor: pointer;
    padding: .15rem;
    display: inline-flex;
    opacity: .6;
    transition: opacity .15s;
}
.grid-overlay-close:hover { opacity: 1; }
.grid-overlay-body {
    overflow-y: auto;
    padding: .35rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Messages list */
.grid-messages-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow-y: auto;
    flex: 1;
}
.grid-msg {
    font-size: .72rem;
    padding: .2rem .5rem;
    border-radius: .25rem;
    animation: msgSlide .2s ease-out;
}
.grid-msg-join {
    color: var(--bs-info);
    background: rgba(var(--bs-info-rgb), .08);
}
.grid-msg-reward {
    color: var(--bs-success);
    background: rgba(var(--bs-success-rgb), .1);
    font-weight: 600;
}
@keyframes msgSlide {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ── Completed overlay ── */
.grid-completed-overlay {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 20;
    background: rgba(0,0,0,.92);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: completedFadeIn .6s ease;
}
@keyframes completedFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
.grid-completed-inner {
    text-align: center;
    padding: 2rem 1.5rem;
    max-width: 420px;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}
.grid-completed-icon {
    color: var(--bs-success);
    margin-bottom: .75rem;
    animation: completedPulse 1.5s ease infinite;
}
@keyframes completedPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: .85; }
}
.grid-completed-inner h4 {
    color: #fff;
    font-weight: 700;
    margin-bottom: .5rem;
}
.grid-completed-rewards {
    background: rgba(255,255,255,.06);
    border-radius: .75rem;
    padding: .75rem;
    border: 1px solid rgba(255,255,255,.08);
}
.grid-completed-rewards-title {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--bs-success);
    font-weight: 600;
    margin-bottom: .5rem;
}
.grid-completed-reward-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .4rem .5rem;
    background: rgba(255,255,255,.04);
    border-radius: .4rem;
    margin-bottom: .25rem;
}
.grid-completed-reward-row:last-child { margin-bottom: 0; }
.grid-completed-reward-icon { color: var(--bs-warning); flex-shrink: 0; }
.grid-completed-reward-type { font-weight: 600; color: #fff; font-size: .85rem; }
.grid-completed-reward-value {
    color: var(--bs-success);
    font-weight: 700;
    font-size: .9rem;
}
.grid-completed-reward-cell { font-size: .7rem; }
.grid-completed-reward-winner { margin-left: auto; font-size: .75rem; color: var(--text-secondary); white-space: nowrap; }
.grid-reward-mine { background: rgba(var(--bs-success-rgb), .12); border: 1px solid rgba(var(--bs-success-rgb), .25); }
.grid-completed-no-reward {
    background: rgba(255,255,255,.04);
    border-radius: .75rem;
    padding: 1rem;
    border: 1px solid rgba(255,255,255,.06);
}

/* ── Countdown card ── */
.grid-countdown-card {
    position: absolute;
    bottom: 12px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: auto;
}
.grid-countdown-card-inner {
    background: rgba(20, 22, 28, .88);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: .75rem;
    padding: .6rem .8rem;
    text-align: center;
    min-width: 200px;
}
.grid-cd-inline {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    font-variant-numeric: tabular-nums;
}
.grid-cd-val {
    font-weight: 700;
    font-size: .85rem;
    color: #fff;
    min-width: 1.4em;
    text-align: center;
}
.grid-cd-sep {
    font-weight: 600;
    font-size: .75rem;
    color: rgba(255,255,255,.3);
    margin: 0 1px;
}
@keyframes cdFlip {
    0% { transform: scaleY(1); }
    50% { transform: scaleY(.85); }
    100% { transform: scaleY(1); }
}
.grid-cd-val.flip { animation: cdFlip .3s ease; }

/* ── Participant rows ── */
.grid-participant-row {
    display: flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .4rem;
    border-radius: .3rem;
    transition: background .15s;
    cursor: pointer;
}
.grid-participant-row:hover { background: rgba(255,255,255,.1); }
@keyframes participantSlideIn {
    from { opacity: 0; transform: translateX(10px); }
    to { opacity: 1; transform: translateX(0); }
}
.grid-participant-new { animation: participantSlideIn .4s ease; }
.grid-participant-active { background: rgba(var(--bs-primary-rgb), .15); transition: background .5s ease; }
.grid-participant-row .user-photo { flex-shrink: 0; }

/* Cell result dots */
.grid-cell-dots {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    justify-content: flex-end;
    max-width: 50px;
    flex-shrink: 0;
}
.grid-dot {
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 2px;
}
.dot-empty { background: var(--bs-danger); opacity: .8; }
.dot-reward { background: var(--bs-success); opacity: .9; }
@keyframes dotPop {
    0% { transform: scale(0); }
    60% { transform: scale(1.4); }
    100% { transform: scale(1); }
}
.grid-dot.dot-new { animation: dotPop .3s ease-out; }

@media (max-width:576px) {
    .grid-event-canvas { height: calc(100vh - 52px - 60px); }
    .grid-floating-overlay { width: 200px; }
    .grid-cell-select { padding: .2rem .35rem; }
    .grid-open-btn { font-size: .8rem !important; }
    .grid-countdown-card-inner { min-width: 170px; padding: .5rem .6rem; }
}

.cleo-cred-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .65rem 0;
    border-bottom: 1px solid var(--border-color, rgba(255,255,255,.08));
}
.cleo-cred-row:last-of-type { border-bottom: none; }
.cleo-cred-label { color: var(--text-secondary); font-size: .85rem; flex-shrink: 0; min-width: 80px; }
.cleo-cred-value { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .9rem; }
.cleo-cred-action {
    cursor: pointer;
    opacity: .5;
    transition: opacity .15s;
    display: inline-flex;
    align-items: center;
}
.cleo-cred-action:hover { opacity: 1; }

/* ── Events Page ── */
.ev-page {
    overflow: hidden;
    position: relative;
    background: linear-gradient(135deg, #0a0015 0%, #1a0a3e 40%, #0d001f 100%);
    min-height: 100vh;
}

.ev-hero {
    position: relative;
    padding: 3rem 1.5rem 2.5rem;
    overflow: hidden;
}
.ev-hero-glow {
    position: fixed;
    top: -20%; left: 50%; transform: translateX(-50%);
    width: 800px; height: 800px;
    background: radial-gradient(circle, rgba(139, 92, 246, .2) 0%, rgba(139, 92, 246, .04) 40%, transparent 70%);
    pointer-events: none;
    z-index: 0;
    animation: ev-glow-pulse 4s ease-in-out infinite;
}
@keyframes ev-glow-pulse {
    0%, 100% { opacity: .6; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.15); }
}
.ev-hero-grid {
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(139, 92, 246, .04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(139, 92, 246, .04) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none;
    z-index: 0;
}
.ev-hero-content {
    position: relative; z-index: 1;
    max-width: 560px; margin: 0 auto;
    text-align: center;
}
.ev-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px;
    background: rgba(139, 92, 246, .15);
    border: 1px solid rgba(139, 92, 246, .3);
    color: #a78bfa;
    font-size: .7rem; font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}
.ev-hero-title {
    font-size: 2rem; font-weight: 800;
    line-height: 1.15;
    color: #fff;
    margin-bottom: .75rem;
    background: linear-gradient(135deg, #fff 30%, #c4b5fd 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.ev-hero-sub {
    font-size: .9rem;
    color: rgba(255,255,255,.55);
    line-height: 1.6;
    margin: 0;
}

.ev-container { position: relative; z-index: 1; padding-top: 1.5rem; padding-bottom: 3rem; }

.ev-section { margin-bottom: 2rem; }
.ev-section-header {
    display: flex; align-items: center; gap: .6rem;
    margin-bottom: 1rem;
}
.ev-section-icon {
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 10px;
    background: rgba(139, 92, 246, .12);
    color: #a78bfa;
}
.ev-section-icon--past { background: rgba(100, 116, 139, .12); color: #94a3b8; }
.ev-pulse-live { animation: ev-icon-pulse 2s ease-in-out infinite; }
@keyframes ev-icon-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .4); }
    50% { box-shadow: 0 0 0 8px rgba(34, 197, 94, 0); }
}
.ev-pulse-live { background: rgba(34, 197, 94, .15); color: #4ade80; }
.ev-section-title {
    font-size: 1.05rem; font-weight: 700;
    color: var(--heading-color, #fff);
    margin: 0;
}

/* Card base */
.ev-card {
    display: flex; flex-direction: column;
    position: relative;
    padding: 1.25rem;
    border-radius: 16px;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(139, 92, 246, .12);
    background: rgba(15, 5, 30, .6);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}
.ev-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(0,0,0,.25);
}

/* Live card */
.ev-card--live {
    background: linear-gradient(145deg, rgba(34, 197, 94, .1) 0%, rgba(15, 5, 30, .6) 50%);
    border-color: rgba(34, 197, 94, .25);
}
.ev-card--live:hover { border-color: rgba(34, 197, 94, .5); }
.ev-card-glow {
    position: absolute; top: -50%; right: -30%;
    width: 200px; height: 200px;
    background: radial-gradient(circle, rgba(34, 197, 94, .12), transparent 70%);
    pointer-events: none;
}

/* Upcoming card */
.ev-card--upcoming {
    background: linear-gradient(145deg, rgba(139, 92, 246, .08) 0%, rgba(15, 5, 30, .6) 50%);
    border-color: rgba(139, 92, 246, .2);
}
.ev-card--upcoming:hover { border-color: rgba(139, 92, 246, .45); }

/* Past card */
.ev-card--past { opacity: .75; }
.ev-card--past:hover { opacity: 1; }

.ev-card-top {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: .75rem;
}
.ev-card-type {
    font-size: .65rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    color: var(--text-secondary, rgba(255,255,255,.4));
}
.ev-card-date {
    font-size: .75rem; color: var(--text-secondary, rgba(255,255,255,.4));
}

.ev-badge {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 4px 10px; border-radius: 6px;
    font-size: .65rem; font-weight: 700;
    letter-spacing: .8px;
}
.ev-badge--live {
    background: rgba(34, 197, 94, .15); color: #4ade80;
    border: 1px solid rgba(34, 197, 94, .3);
}
.ev-badge--upcoming {
    background: rgba(139, 92, 246, .12); color: #a78bfa;
    border: 1px solid rgba(139, 92, 246, .25);
}
.ev-badge--past {
    background: rgba(100, 116, 139, .12); color: #94a3b8;
    border: 1px solid rgba(100, 116, 139, .2);
}
.ev-live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #4ade80;
    animation: ev-dot-blink 1.5s ease-in-out infinite;
}
@keyframes ev-dot-blink {
    0%, 100% { opacity: 1; }
    50% { opacity: .3; }
}

.ev-card-title {
    font-size: 1.1rem; font-weight: 700;
    margin: 0 0 1rem;
    color: var(--heading-color, #fff);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Countdown */
.ev-card-countdown {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    margin-bottom: 1rem;
    padding: .75rem;
    border-radius: 12px;
    background: rgba(139, 92, 246, .06);
    border: 1px solid rgba(139, 92, 246, .12);
}
.ev-cd-unit { text-align: center; min-width: 44px; }
.ev-cd-num {
    display: block;
    font-size: 1.4rem; font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: #c4b5fd;
    line-height: 1;
}
.ev-cd-lbl {
    display: block;
    font-size: .55rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 1px;
    color: rgba(196, 181, 253, .5);
    margin-top: 2px;
}
.ev-cd-sep {
    font-size: 1.2rem; font-weight: 700;
    color: rgba(139, 92, 246, .3);
    align-self: flex-start;
    margin-top: 2px;
}

/* Stats row */
.ev-card-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 1rem;
}
.ev-stat {
    text-align: center;
    padding: .5rem .25rem;
    border-radius: 10px;
    background: rgba(255,255,255,.04);
}
.ev-stat-val {
    display: block;
    font-size: .85rem; font-weight: 700;
    color: var(--heading-color, #fff);
}
.ev-stat-lbl {
    display: block;
    font-size: .6rem; font-weight: 500;
    text-transform: uppercase; letter-spacing: .5px;
    color: var(--text-secondary, rgba(255,255,255,.35));
    margin-top: 2px;
}

/* CTA */
.ev-card-cta {
    display: flex; align-items: center; justify-content: center;
    gap: 6px;
    padding: .6rem 1rem;
    border-radius: 10px;
    font-size: .8rem; font-weight: 700;
    letter-spacing: .5px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    margin-top: auto;
    transition: filter .2s;
}
.ev-card:hover .ev-card-cta { filter: brightness(1.1); }
.ev-card-cta--secondary {
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
}

/* Empty state */
.ev-empty {
    text-align: center;
    padding: 4rem 1rem;
    color: var(--text-secondary, rgba(255,255,255,.4));
}
.ev-empty-icon {
    margin-bottom: 1rem;
    color: rgba(139, 92, 246, .3);
}
.ev-empty h3 {
    font-size: 1.2rem; font-weight: 700;
    color: var(--heading-color, #fff);
    margin-bottom: .5rem;
}
.ev-empty p { font-size: .85rem; margin: 0; }

/* Mobile */
@media (max-width: 767px) {
    .ev-hero { padding: 2rem 1rem 1.5rem; }
    .ev-hero-title { font-size: 1.5rem; }
    .ev-hero-sub { font-size: .8rem; }
    .ev-hero-glow { width: 350px; height: 350px; }
    .ev-card { padding: 1rem; }
    .ev-cd-num { font-size: 1.15rem; }
    .ev-cd-unit { min-width: 36px; }
    .ev-card-stats { gap: 4px; }
    .ev-stat { padding: .4rem .15rem; }
    .ev-stat-val { font-size: .75rem; }
}
/* legacy .co-stage:before removed — see global/case.css */
.case-hero {
    position: relative;
    padding: 3rem 1.5rem 2.5rem;
    overflow: hidden;
}
.case-hero--small { padding: 1.5rem 1.5rem 1rem; }
.case-hero-glow {
    position: fixed;
    top: -20%; left: 50%; transform: translateX(-50%);
    width: 700px; height: 700px;
    background: radial-gradient(circle, rgba(245, 158, 11, .15) 0%, rgba(245, 158, 11, .03) 40%, transparent 70%);
    pointer-events: none; z-index: 0;
    animation: case-glow-pulse 4s ease-in-out infinite;
}
@keyframes case-glow-pulse {
    0%, 100% { opacity: .5; transform: translateX(-50%) scale(1); }
    50% { opacity: 1; transform: translateX(-50%) scale(1.1); }
}
.case-hero-grid {
    position: fixed; inset: 0;
    background-image:
        linear-gradient(rgba(245, 158, 11, .03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(245, 158, 11, .03) 1px, transparent 1px);
    background-size: 40px 40px;
    pointer-events: none; z-index: 0;
}
.case-hero-content {
    position: relative; z-index: 1;
    max-width: 520px; margin: 0 auto;
    text-align: center;
}
.case-hero-badge {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 14px; border-radius: 20px;
    background: rgba(245, 158, 11, .12);
    border: 1px solid rgba(245, 158, 11, .25);
    color: #fbbf24;
    font-size: .7rem; font-weight: 700;
    letter-spacing: 1.5px;
    margin-bottom: 1rem;
}
.case-hero-title {
    font-size: 2rem; font-weight: 800;
    line-height: 1.15; margin-bottom: .75rem;
    background: linear-gradient(135deg, #fff 30%, #fbbf24 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.case-hero-sub {
    font-size: .9rem;
    color: rgba(255,255,255,.5);
    line-height: 1.6; margin: 0;
}
.case-container { position: relative; z-index: 1; padding-top: 1.5rem; padding-bottom: 3rem; }

.case-card {
    display: flex; flex-direction: column; align-items: center;
    position: relative;
    padding: 1.25rem 1rem;
    border-radius: 16px;
    text-decoration: none !important;
    color: inherit !important;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s;
    overflow: hidden;
    height: 100%;
    border: 1px solid rgba(245, 158, 11, .1);
    background: rgba(15, 10, 30, .5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.case-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px rgba(245, 158, 11, .12);
    border-color: rgba(245, 158, 11, .35);
}
.case-card-glow {
    position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
    width: 150px; height: 150px;
    background: radial-gradient(circle, rgba(245, 158, 11, .08), transparent 70%);
    pointer-events: none;
    transition: opacity .3s;
    opacity: 0;
}
.case-card:hover .case-card-glow { opacity: 1; }
.case-card-img {
    width: 100%; max-width: 140px;
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: .75rem;
}
.case-card-img img {
    max-width: 100%; max-height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 12px rgba(245, 158, 11, .15));
    transition: transform .3s;
}
.case-card:hover .case-card-img img { transform: scale(1.08) rotate(-2deg); }
.case-card-name {
    font-size: .85rem; font-weight: 700;
    text-align: center;
    color: #fff;
    margin: 0 0 .4rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    max-width: 100%;
}
.case-card-price {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .75rem; font-weight: 600;
    color: #fbbf24;
    margin-bottom: .75rem;
}
.case-card-cta {
    width: 100%;
    padding: .5rem;
    border-radius: 10px;
    text-align: center;
    font-size: .75rem; font-weight: 700;
    letter-spacing: .5px;
    background: linear-gradient(135deg, rgba(245, 158, 11, .15), rgba(245, 158, 11, .05));
    border: 1px solid rgba(245, 158, 11, .2);
    color: #fbbf24;
    transition: background .2s, border-color .2s;
    margin-top: auto;
}
.case-card:hover .case-card-cta {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border-color: transparent;
    color: #fff;
}

.roulette-wrapper {
    position: relative;
    display: flex; justify-content: center; align-items: center;
    width: 100%; height: 260px;
    margin: 0 auto;
    overflow: hidden;
}
.roulette-wrapper .selector {
    width: 3px; background: rgba(245, 158, 11, .6);
    left: 50%; height: 100%;
    transform: translateX(-50%);
    position: absolute; z-index: 2;
}
.roulette-wrapper .wheel { display: flex; }
.roulette-wrapper .wheel .rox { display: flex; }
.roulette-wrapper .wheel .rox .card {
    height: 220px; width: 180px;
    margin: 3px; border-radius: 12px;
    border-bottom: 3px solid rgba(0, 0, 0, .2);
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    background: rgba(15, 10, 30, .6);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, .06);
    font-size: 1.5em;
}

@media (max-width: 767px) {
    .case-hero { padding: 2rem 1rem 1.5rem; }
    .case-hero-title { font-size: 1.5rem; }
    .case-hero-sub { font-size: .8rem; }
    .case-hero-glow { width: 350px; height: 350px; }
    .case-card { padding: 1rem .75rem; }
    .case-card-img { max-width: 100px; }
    .case-card-name { font-size: .78rem; }
    .roulette-wrapper { height: 200px; }
    .roulette-wrapper .wheel .rox .card { height: 170px; width: 140px; }
}

/* Case grid card — Bootstrap .card kullanılır; canvas sabit 150×150 ve
   şeffaf, böylece bg_img filtreli (alpha 0.55) backdrop olarak çizilir,
   kasa görseli onun ÜSTÜNE biner — iç (detail) sayfayla aynı bakış. */
.kf-case-card-canvas {
    width: 150px;
    height: 150px;
    display: block;
    margin: 0 auto;
    background: transparent;
}
.kf-case-card { transition: transform .15s ease, box-shadow .15s ease; }
.kf-case-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0,0,0,.25);
}
/* legacy roulette styles removed — see global/case.css for v3 card-flip */

/* Prop firm landing pages — hero background (full-bleed under header) */
.bybit-hero,
.cleo-hero {
    margin: 0;
    padding-top: calc(var(--header-height) + 4rem);
    padding-bottom: 6rem;
    isolation: isolate;
}
.bybit-hero > picture.section-bg img,
.cleo-hero > picture.section-bg img {
    object-position: center top;
}
.bybit-hero::after,
.cleo-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(10,10,10,0) 0%, rgba(10,10,10,.55) 55%, rgba(10,10,10,.95) 100%);
    z-index: 0;
    pointer-events: none;
}
.bybit-hero > .container,
.cleo-hero > .container { z-index: 2; }
body.has_campaign .bybit-hero,
body.has_campaign .cleo-hero {
    padding-top: calc(var(--header-height) + var(--campaign-height, 40px) + 4rem);
}
@media (max-width: 768px) {
    .bybit-hero,
    .cleo-hero {
        padding-top: calc(var(--header-height) + 2rem);
        padding-bottom: 3.5rem;
    }
}

/* ============================================================ */
/* WS-SYNC live positions test panel (dir_client/dashboard)      */
/* ============================================================ */
.ws-sync-panel-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:1rem;flex-wrap:wrap;gap:.5rem}
.ws-sync-panel-meta #ws-sync-status{display:inline-block;padding:.25rem .6rem;border-radius:.5rem;font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:#33333322;color:#888}
.ws-sync-panel-meta #ws-sync-status[data-state="connected"]{background:#28a74522;color:#28a745}
.ws-sync-panel-meta #ws-sync-status[data-state="connecting"]{background:#ffc10722;color:#b88a00}
.ws-sync-panel-meta #ws-sync-status[data-state="reconnect"]{background:#ffc10722;color:#b88a00}
.ws-sync-panel-meta #ws-sync-status[data-state="disconnected"]{background:#dc354522;color:#dc3545}
.ws-live-empty{padding:1rem;text-align:center;color:#888;font-size:.85rem}
.ws-account{border:1px solid var(--border-color, #2222);border-radius:.5rem;padding:.75rem 1rem;margin-bottom:.75rem}
.ws-account-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.5rem}
.ws-account .ws-status{font-size:.7rem;text-transform:uppercase;color:#888;letter-spacing:.04em}
.ws-account.ws-ok{border-left:3px solid #28a745}
.ws-account.ws-warn{border-left:3px solid #ffc107}
.ws-account.ws-err{border-left:3px solid #dc3545}
.ws-positions{width:100%;font-size:.8rem}
.ws-positions th{font-weight:600;color:#888;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em}
.ws-positions .p-pos{color:#28a745;font-weight:600}
.ws-positions .p-neg{color:#dc3545;font-weight:600}
.ws-positions-empty{padding:.5rem;color:#888;font-size:.8rem;font-style:italic}

/* Live WS panel — leaderboard-style data tables */
.ws-sync-panel .nav-link{font-size:.85rem}
.ws-account-block{margin-bottom:1rem;border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;background:rgba(255,255,255,.015)}
.ws-account-head{display:flex;align-items:center;justify-content:space-between;padding:.6rem .9rem;border-bottom:1px solid rgba(255,255,255,.05);border-left:3px solid #6c757d}
.ws-account-head.ws-ok{border-left-color:#28a745}
.ws-account-head.ws-warn{border-left-color:#ffc107}
.ws-account-head.ws-err{border-left-color:#dc3545}
.ws-account-head .ws-status{font-size:.7rem;text-transform:uppercase;color:#888;letter-spacing:.04em}
.ws-empty-row{padding:.9rem;color:var(--text-secondary,rgba(255,255,255,.5));font-size:.8rem;font-style:italic}
.ws-empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.25rem;padding:3rem 1rem;text-align:center}
.ws-empty-state .ws-empty-img{max-width:280px;width:100%;height:auto;opacity:.9;-webkit-user-drag:none;user-select:none;pointer-events:none}
.ws-empty-state .ws-empty-msg{color:var(--text-secondary,rgba(255,255,255,.5));font-size:.85rem;font-style:italic}

/* Skeleton placeholder for live tables (open positions / closed trades).
 * Mirrors the .kf-skel pulse used by KPI cells so the loading visual is
 * consistent across the dashboard. ws_sync.js replaces the container
 * innerHTML on the first WS frame / seed AJAX response. */
.ws-skel-table{display:flex;flex-direction:column;gap:.6rem;padding:.5rem 0}
.ws-skel-row{display:block;padding:.5rem 0}
.ws-skel-row .kf-skel{display:block;width:100%;height:2.4em;border-radius:8px}

.ws-table{font-size:.85rem}
.ws-table-header,.ws-table-row{display:grid;align-items:center;padding:10px 14px}
.ws-table-header{font-size:11px;font-weight:600;color:var(--text-secondary,rgba(255,255,255,.4));text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid rgba(255,255,255,.06)}
.ws-table-row{border-bottom:1px solid rgba(255,255,255,.04);transition:background .15s}
.ws-table-row:last-child{border-bottom:none}
.ws-table-row:hover{background:rgba(255,255,255,.03)}

.ws-table-positions .ws-table-header,
.ws-table-positions .ws-table-row{grid-template-columns:1.4fr 80px 1fr 1fr 1fr 1fr;gap:8px}

.ws-table-orders .ws-table-header,
.ws-table-orders .ws-table-row{grid-template-columns:1.5fr 1.2fr 80px 90px 1fr 1fr 1fr;gap:8px}

.ws-table .ws-col-symbol{font-weight:600}
.ws-table .ws-col-time{color:var(--text-secondary,rgba(255,255,255,.55));font-size:.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ws-table .ws-col-side{font-weight:600;text-transform:uppercase;font-size:.75rem}
.ws-table .ws-col-side.ws-side-buy{color:#28a745}
.ws-table .ws-col-side.ws-side-sell{color:#dc3545}
.ws-table .p-pos{color:#28a745;font-weight:600}
.ws-table .p-neg{color:#dc3545;font-weight:600}

.ws-status-badge{display:inline-block;padding:2px 8px;border-radius:6px;font-size:.7rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;background:rgba(108,117,125,.18);color:#9aa0a6}
.ws-status-badge.ws-status-filled{background:rgba(40,167,69,.18);color:#28a745}
.ws-status-badge.ws-status-cancelled,
.ws-status-badge.ws-status-rejected,
.ws-status-badge.ws-status-deactivated{background:rgba(220,53,69,.18);color:#dc3545}
.ws-status-badge.ws-status-new,
.ws-status-badge.ws-status-untriggered,
.ws-status-badge.ws-status-partiallyfilled{background:rgba(255,193,7,.18);color:#b88a00}

@media (max-width:768px){
    .ws-table-header{display:none}
    .ws-table-positions .ws-table-row{grid-template-columns:1fr 1fr;gap:4px 8px;padding:10px 12px}
    .ws-table-orders .ws-table-row{grid-template-columns:1fr 1fr;gap:4px 8px;padding:10px 12px}
}

/* ============================================================ */
/* KF Equity Chart panel — modern live chart for /dashboard     */
/* ============================================================ */


.kf-equity-head{
    position:relative;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;
    margin-bottom:16px;
}
.kf-equity-title{display:flex;align-items:center;gap:10px}
.kf-equity-title h5{font-weight:600;letter-spacing:.005em}
.kf-equity-pulse{
    width:9px;height:9px;border-radius:50%;
    background:var(--bs-success);
    box-shadow:0 0 0 0 rgba(35,209,139,.6);
    animation:kfPulse 1.6s ease-out infinite;
}
@keyframes kfPulse{
    0%  {box-shadow:0 0 0 0 rgba(35,209,139,.55)}
    70% {box-shadow:0 0 0 12px rgba(35,209,139,0)}
    100%{box-shadow:0 0 0 0 rgba(35,209,139,0)}
}
.kf-equity-head-meta{display:flex;align-items:center;gap:12px}
.kf-equity-update i{margin-right:4px}

/* ── Live KPI strip ─────────────────────────────────────────── */
.kf-equity-kpis{
    position:relative;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:12px;
    margin-bottom:18px;
}
.kf-kpi{
    position:relative;
    overflow:hidden;
    transition:transform .25s ease, border-color .25s ease;
}
.kf-kpi:hover{transform:translateY(-2px);border-color:rgba(255,255,255,.10)}
.kf-kpi::after{
    content:"";
    position:absolute;
    top:0;left:0;right:0;height:2px;
    background:linear-gradient(90deg, var(--kf-accent, #888) 0%, transparent 100%);
    opacity:.85;
}
.kf-kpi-equity  {--kf-accent:var(--main-color, #e6a800)}
.kf-kpi-balance {--kf-accent:#d8dde8}
.kf-kpi-target  {--kf-accent:var(--bs-success)}
.kf-kpi-dd      {--kf-accent:var(--bs-danger)}

.kf-kpi-label{
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:rgba(255,255,255,.5);
    margin-bottom:6px;
}
/* KPI head — used by the .kf-kpi-dd card to host the [Max]/[Daily] switcher
   next to the label. The label takes the available space, the segmented
   switcher hugs the right edge. */
.kf-kpi-head{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-bottom:6px;
}
.kf-kpi-head .kf-kpi-label{margin-bottom:0}
.kf-dd-switch{
    padding:2px;
    border-radius:7px;
    background:rgba(255,255,255,.04);
}
.kf-dd-switch > button{
    font-size:.62rem;
    text-transform:uppercase;
    letter-spacing:.06em;
    padding:3px 8px;
    border-radius:5px;
    line-height:1.1;
    color:rgba(255,255,255,.55);
}
.kf-dd-switch > button.is-active{
    background:rgba(255,91,107,.18);
    color:#fff;
    box-shadow:inset 0 0 0 1px rgba(255,91,107,.45);
}
.kf-kpi-value{
    font-size:1.55rem;
    font-weight:600;
    line-height:1.05;
    color:#fff;
    font-feature-settings:"tnum" 1, "lnum" 1;
}
.kf-kpi-value.kf-warn  {color:#f7b955}
.kf-kpi-value.kf-danger{color:var(--bs-danger)}

.kf-kpi-sub .kf-pos,
.kf-kpi-sub.kf-pos{color:var(--bs-success)}
.kf-kpi-sub .kf-neg,
.kf-kpi-sub.kf-neg{color:var(--bs-danger)}

/* ── Chart wrap + legend overlay ───────────────────────────── */

.kf-equity-chart{min-height:360px}
.kf-equity-chart .apexcharts-tooltip{
    background:rgba(20,22,35,.95)!important;
    border:1px solid rgba(255,255,255,.08)!important;
    backdrop-filter:blur(8px);
}

.kf-equity-legend{
    position:absolute;top:12px;left:14px;
    display:flex;flex-wrap:wrap;gap:8px;
    z-index:3;
    /* chips live above the chart but Apex's toolbar still needs clicks */
}
.kf-leg{
    display:inline-flex;align-items:center;gap:6px;
    padding:3px 9px;border-radius:999px;
    font-size:.7rem;font-weight:500;
    background:rgba(20,22,35,.55);
    color:rgba(255,255,255,.78);
    border:1px solid rgba(255,255,255,.07);
    cursor:pointer;
    user-select:none;
    transition:background .15s ease, opacity .15s ease, border-color .15s ease;
}
.kf-leg:hover{background:rgba(20,22,35,.85);border-color:rgba(255,255,255,.18)}
.kf-leg.kf-leg-off{
    opacity:.4;
    background:rgba(20,22,35,.3);
    text-decoration:line-through;
}
.kf-leg.kf-leg-off i{filter:grayscale(1)}
.kf-leg i{
    width:10px;height:10px;border-radius:50%;display:inline-block;
}

/* Apex toolbar — sit it on the right edge so it doesn't fight our legend */
.kf-equity-chart .apexcharts-toolbar{
    z-index:4;
}
.kf-equity-chart .apexcharts-toolbar .apexcharts-menu-icon,
.kf-equity-chart .apexcharts-toolbar .apexcharts-zoom-icon,
.kf-equity-chart .apexcharts-toolbar .apexcharts-zoomin-icon,
.kf-equity-chart .apexcharts-toolbar .apexcharts-zoomout-icon,
.kf-equity-chart .apexcharts-toolbar .apexcharts-pan-icon,
.kf-equity-chart .apexcharts-toolbar .apexcharts-reset-icon,
.kf-equity-chart .apexcharts-toolbar .apexcharts-selection-icon{
    transform:scale(.95);
}
.kf-equity-chart .apexcharts-toolbar svg{fill:rgba(255,255,255,.55)}
.kf-equity-chart .apexcharts-toolbar .apexcharts-selected svg,
.kf-equity-chart .apexcharts-toolbar :hover svg{fill:var(--main-color, #e6a800)!important}
.kf-leg-equity  i{background:var(--main-color, #e6a800)}
.kf-leg-balance i{background:#d8dde8}
.kf-leg-pt      i{background:transparent;border:1px dashed var(--bs-success)}
.kf-leg-daily   i{background:transparent;border:1px dashed #f7b955}
.kf-leg-max     i{background:var(--bs-danger)}

/* ── Threshold rail ────────────────────────────────────────── */
.kf-equity-rail{
    margin-top:22px;
    padding:18px 14px 32px;
    border-radius:14px;
    background:rgba(255,255,255,.02);
    border:1px solid rgba(255,255,255,.05);
}
.kf-rail-track{
    position:relative;
    height:8px;
    border-radius:999px;
    background:linear-gradient(90deg,
        rgba(255,91,107,.55) 0%,
        rgba(247,185,85,.45) 25%,
        rgba(255,255,255,.10) 50%,
        rgba(35,209,139,.45) 100%);
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}
.kf-rail-mark{
    position:absolute;
    top:50%;
    transform:translate(-50%, -50%);
    width:2px;height:18px;
    background:rgba(255,255,255,.45);
    border-radius:2px;
}
.kf-rail-mark small{
    position:absolute;
    top:22px;left:50%;
    transform:translateX(-50%);
    font-size:9px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:rgba(255,255,255,.55);
    white-space:nowrap;
}
.kf-rail-mark.kf-rail-max  {background:var(--bs-danger)}
.kf-rail-mark.kf-rail-daily{background:#f7b955}
.kf-rail-mark.kf-rail-init {background:rgba(255,255,255,.45)}
.kf-rail-mark.kf-rail-pt   {background:var(--bs-success)}

.kf-rail-equity{
    position:absolute;
    top:50%;left:50%;
    transform:translate(-50%, -50%);
    width:14px;height:14px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--main-color, #e6a800), #d8dde8);
    box-shadow:0 0 0 3px rgba(255,255,255,.08), 0 0 22px var(--main-color-ob, rgba(230,168,0,.45));
    transition:left .6s cubic-bezier(.4,0,.2,1);
    z-index:2;
}
.kf-rail-equity-bubble{
    position:absolute;
    bottom:18px;left:50%;
    transform:translateX(-50%);
    padding:3px 8px;
    border-radius:8px;
    font-size:.72rem;font-weight:600;
    background:var(--card-primary-background);
    color:var(--text-color);
    white-space:nowrap;
    border:1px solid var(--border-color);
}

/* ── Footer KPI grid ───────────────────────────────────────── */
.kf-equity-foot{
    display:grid;
    grid-template-columns:repeat(6, minmax(0, 1fr));
    gap:10px;
    margin-top:20px;
    padding-top:18px;
    border-top:1px dashed rgba(255,255,255,.07);
}
.kf-foot-cell{padding:6px 4px}
.kf-foot-label{
    font-size:.68rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:rgba(255,255,255,.5);
    margin-bottom:4px;
}
.kf-foot-value{
    font-size:1.05rem;font-weight:600;color:#fff;
    font-feature-settings:"tnum" 1;
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 992px){
    .kf-equity-kpis{grid-template-columns:repeat(2, 1fr)}
    .kf-equity-foot{grid-template-columns:repeat(3, 1fr)}
    .kf-equity-legend{position:static;justify-content:flex-start;margin-bottom:8px}
}
@media (max-width: 576px){
    .kf-kpi-value{font-size:1.25rem}
    .kf-equity-foot{grid-template-columns:repeat(2, 1fr)}
    .kf-equity-chart{min-height:280px}
}

/* ──────────────────────────────────────────────────────────── *
 *  Stability Score gauge
 * ──────────────────────────────────────────────────────────── */
/* Shared "head" row used by every dashboard card */
.kf-card-head{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:14px;flex-wrap:wrap;gap:.5rem;position:relative;z-index:1;
}
.kf-card-head h6{font-weight:700;letter-spacing:.01em;margin:0}
.kf-info-btn,
.kf-stat-info{
    width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:6px;background:rgba(255,255,255,.04);
    color:rgba(255,255,255,.55);cursor:help;
    border:1px solid rgba(255,255,255,.06);
    transition:background .15s ease;font-size:.7rem;font-weight:600;
}
.kf-info-btn:hover,
.kf-stat-info:hover{background:rgba(255,255,255,.08);color:#fff}

.kf-stab-body{
    position:relative;
    overflow:hidden;
}
.kf-stab-body::before{
    content:"";
    position:absolute;inset:0;
    background:radial-gradient(120% 80% at 50% 0%, var(--main-color-ob, rgba(230,168,0,.18)) 0%, transparent 70%);
    opacity:.5;pointer-events:none;
    transition:opacity .25s ease;
    border-radius:inherit;
}
.kf-stab-body.is-bad::before{
    background:radial-gradient(120% 80% at 50% 0%, rgba(255,91,107,.22) 0%, transparent 70%);
    opacity:.85;
}
.kf-stab-body.is-warn::before{
    background:radial-gradient(120% 80% at 50% 0%, rgba(247,185,85,.22) 0%, transparent 70%);
    opacity:.85;
}

.kf-stab-legend{
    display:flex;flex-wrap:wrap;gap:12px;
    margin-bottom:6px;position:relative;z-index:1;
}
.kf-stab-leg{
    display:inline-flex;align-items:center;gap:6px;
    font-size:.72rem;font-weight:500;
    color:rgba(255,255,255,.7);
}
.kf-stab-leg i{width:8px;height:8px;border-radius:50%;display:inline-block}
.kf-stab-leg-safe i{background:var(--bs-success)}
.kf-stab-leg-warn i{background:var(--bs-danger)}

.kf-stab-gauge-wrap{
    position:relative;
    margin-top:8px;
    aspect-ratio: 240 / 145;
    width:100%;
}
.kf-stab-gauge{
    width:100%;height:100%;display:block;
    overflow:visible;
}

/* tick base */
.kf-stab-tick{
    stroke:rgba(255,255,255,.10);
    stroke-width:2;
    transition:stroke .25s ease, stroke-width .25s ease;
}
/* Safe-zone ticks: silver default, pop to brand green when "passed" */
.kf-stab-tick-safe{stroke:rgba(35,209,139,.25)}
.kf-stab-tick-safe.kf-stab-tick-passed{stroke:var(--bs-success)}
/* Risk-zone ticks: faint red default, deepen when value crosses into them */
.kf-stab-tick-risk{stroke:rgba(255,91,107,.18)}
.kf-stab-tick-risk.kf-stab-tick-passed{stroke:var(--bs-danger)}
/* Threshold marker tick (the exact a_ss boundary) — bolder */
.kf-stab-tick-mark{
    stroke:#fff;
    stroke-width:3;
    filter:drop-shadow(0 0 4px rgba(255,255,255,.4));
}

/* Needle */
.kf-stab-needle{
    transition:transform .55s cubic-bezier(.22,.61,.36,1);
    transform-origin:120px 120px;
    transform-box:fill-box;
}
.kf-stab-needle-line{
    stroke:#fff;
    stroke-width:3;
}
.kf-stab-needle-hub{
    fill:#fff;
    stroke:rgba(0,0,0,.2);
    stroke-width:1;
}
.is-bad  .kf-stab-needle-line{stroke:var(--bs-danger)}
.is-warn .kf-stab-needle-line{stroke:#f7b955}

/* Center label sits inside the arc */
.kf-stab-center{
    position:absolute;
    left:50%;
    bottom:14%;
    transform:translateX(-50%);
    text-align:center;
    pointer-events:none;
}
.kf-stab-value{
    font-size:1.6rem;font-weight:700;color:#fff;
    line-height:1;
    font-feature-settings:"tnum" 1;
    transition:color .2s ease;
}
/* Mirror the gauge state onto the headline value so it reads as the
 * primary indicator. State classes (.is-safe / .is-warn / .is-bad)
 * are toggled by stability_score.js on the surrounding body wrapper. */
.kf-stab-body.is-safe    .kf-stab-value{color:var(--bs-success)}
.kf-stab-body.is-warn    .kf-stab-value{color:#f7b955}
.kf-stab-body.is-bad     .kf-stab-value{color:var(--bs-danger)}
.kf-stab-body.is-no-rule .kf-stab-value{color:#fff}

/* Status badge — used to live in the gauge centre below the value. It
 * now sits next to the card title so the current state is visible at a
 * glance even when the gauge needle is mid-animation. We render it as
 * a soft pill that picks up the state colour on its background and
 * border. */
.kf-stab-status{
    display:inline-flex;align-items:center;
    padding:2px 9px;
    border-radius:999px;
    font-size:.7rem;font-weight:700;
    letter-spacing:.04em;text-transform:uppercase;
    background:rgba(35,209,139,.12);
    border:1px solid rgba(35,209,139,.35);
    color:var(--bs-success);
    line-height:1.4;
}
.kf-stab-status-safe{
    background:rgba(35,209,139,.12);
    border-color:rgba(35,209,139,.35);
    color:var(--bs-success);
}
.kf-stab-status-warn{
    background:rgba(247,185,85,.14);
    border-color:rgba(247,185,85,.40);
    color:#f7b955;
}
.kf-stab-status-bad{
    background:rgba(255,91,107,.14);
    border-color:rgba(255,91,107,.40);
    color:var(--bs-danger);
}

/* Bottom axis labels (0%, threshold%, 100%)
   Container is shrunk to match the gauge's actual horizontal footprint.
   SVG: viewBox 240, gauge radius 88 around cx=120 → left edge 32 (13.3%),
   right edge 208 (86.7%). So we pad the axis by ~13% on each side and the
   threshold label can map cleanly with `left: a_ss%` of the inner span. */
.kf-stab-axis{
    position:absolute;
    left:13.3%;right:13.3%;bottom:-2px;
    height:18px;
    pointer-events:none;
}
.kf-stab-axis span{
    position:absolute;
    bottom:0;
    font-size:.7rem;
    color:rgba(255,255,255,.55);
    transform:translateX(-50%);
    white-space:nowrap;
}
.kf-stab-axis-l{left:0!important;transform:none!important}
.kf-stab-axis-r{right:0;left:auto!important;transform:none!important}

/* Stability informational message — sits below the gauge axis, mirrors
   the legacy dashboard's [data="stability_description"] but is now WS-fed
   and translated. State classes (is-safe / is-warn / is-bad / is-no-rule)
   are mirrored from the surrounding .kf-stab-body via stability_score.js
   so the accent colour tracks the gauge state. */
.kf-stab-msg{
    margin-top:18px;
    padding:12px 14px;
    border-radius:10px;
    background:rgba(255,255,255,.04);
    border:1px solid rgba(255,255,255,.06);
    border-left:3px solid rgba(255,255,255,.25);
    color:rgba(255,255,255,.78);
    font-size:.82rem;
    line-height:1.5;
    min-height:42px;
}
.kf-stab-msg:empty{display:none}
.kf-stab-msg strong{color:#fff;font-weight:700;font-feature-settings:"tnum" 1}
.kf-stab-body.is-safe    .kf-stab-msg{border-left-color:var(--bs-success)}
.kf-stab-body.is-warn    .kf-stab-msg{border-left-color:#f7b955}
.kf-stab-body.is-bad     .kf-stab-msg{border-left-color:var(--bs-danger)}
.kf-stab-body.is-no-rule .kf-stab-msg{border-left-color:rgba(255,255,255,.25)}
.kf-stab-axis-m{
    color:#fff!important;
    font-weight:600;
    /* dashed reference line up into the arc */
}
.kf-stab-axis-m::before{
    content:"";
    position:absolute;
    left:50%;bottom:18px;
    width:1px;height:14px;
    background:rgba(255,255,255,.25);
}

@media (max-width: 480px){
    .kf-stab-value{font-size:1.35rem}
    .kf-stab-status{font-size:.7rem}
}

/* ──────────────────────────────────────────────────────────── *
 *  Objectives card (sits next to Stability Score)
 * ──────────────────────────────────────────────────────────── */
.kf-obj-table{display:flex;flex-direction:column;gap:1px;background:rgba(255,255,255,.04);border-radius:12px;overflow:hidden}
.kf-obj-row{
    display:grid;
    grid-template-columns:minmax(0, 2fr) minmax(0, 1.3fr) 56px;
    gap:12px;
    padding:12px 14px;
    background:rgba(20,22,35,.55);
    align-items:center;
}
.kf-obj-row-head{
    background:rgba(20,22,35,.85);
    font-size:.7rem;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:rgba(255,255,255,.55);
    font-weight:600;
}
.kf-obj-row-head .kf-obj-c3{text-align:center}
.kf-obj-c1{color:var(--main-color, #e6a800);font-weight:600;font-size:.92rem}
.kf-obj-row-head .kf-obj-c1{color:rgba(255,255,255,.55);font-weight:600}
.kf-obj-c2{font-weight:500;color:rgba(255,255,255,.85);font-feature-settings:"tnum" 1}
.kf-obj-c3{display:flex;justify-content:center}
.kf-obj-pill{
    width:34px;height:34px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:8px;color:#fff;
}
.kf-obj-pill-ok  {background:var(--bs-success)}
.kf-obj-pill-fail{background:var(--bs-danger)}
.kf-obj-empty{padding:20px;text-align:center;color:rgba(255,255,255,.5);font-size:.85rem;background:rgba(20,22,35,.55)}

@media (max-width:576px){
    .kf-obj-row{grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 44px;padding:10px;gap:8px}
    .kf-obj-c1{font-size:.85rem}
    .kf-obj-pill{width:28px;height:28px}
}

/* ──────────────────────────────────────────────────────────── *
 *  Statistics grid
 * ──────────────────────────────────────────────────────────── */
.kf-stats-grid{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: var(--border-color);
    overflow: hidden;
}
.kf-stat{
    background: var(--card-primary-background);
    padding:14px 16px;
    display:flex;flex-direction:column;gap:6px;
    min-height:78px;
}
/* .kf-stat-label/.kf-stat-value retired — now use Bootstrap utilities
   (.text-secondary .fs-7 for labels, .fw-bold .fs-6 [+text-success/danger]
   for values) per project rule. The cells keep `tnum` alignment via the
   parent .kf-stat. */
.kf-stat > span,
.kf-stat > .fw-bold{font-feature-settings:"tnum" 1}

/* Edge-flush padding: cells touching the card edges drop their outer
   padding so the grid bleeds to the card-body border instead of leaving
   a visible margin. Per-breakpoint because column count changes. */

/* 3-column layout (default & ≥768px) */
.kf-stats-grid > .kf-stat:nth-child(3n+1){padding-left:0}
.kf-stats-grid > .kf-stat:nth-child(3n){padding-right:0}
.kf-stats-grid > .kf-stat:nth-child(-n+3){padding-top:0}
.kf-stats-grid > .kf-stat:nth-last-child(-n+3){padding-bottom:0}

@media (max-width:992px){.kf-stats-grid{grid-template-columns:repeat(3, minmax(0,1fr))}}

/* 2-column layout — recompute first/last column rules for the new
   modulus. Reset 3-col rules first so they don't leak in. */
@media (max-width:768px){
    .kf-stats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    .kf-stats-grid > .kf-stat{padding:14px 16px}
    .kf-stats-grid > .kf-stat:nth-child(2n+1){padding-left:0}
    .kf-stats-grid > .kf-stat:nth-child(2n){padding-right:0}
    .kf-stats-grid > .kf-stat:nth-child(-n+2){padding-top:0}
    .kf-stats-grid > .kf-stat:nth-last-child(-n+2){padding-bottom:0}
}

/* 1-column layout — every cell is first AND last column. Top cell gets
   no top-padding, bottom cell gets no bottom-padding. */
@media (max-width:480px){
    .kf-stats-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
    .kf-stats-grid > .kf-stat{padding:14px 0}
    .kf-stats-grid > .kf-stat:first-child{padding-top:0}
    .kf-stats-grid > .kf-stat:last-child{padding-bottom:0}
}

/* ──────────────────────────────────────────────────────────── *
 *  Daily summary
 * ──────────────────────────────────────────────────────────── */
/* Daily Summary — Swiper "swipernav" variant (slidesPerView:auto + autoplay).
   Each metric is a self-contained pill so the row scrolls horizontally
   instead of wrapping into a fixed grid. */
.kf-summary-swiper{padding:4px 0}
.kf-summary-swiper .swiper-wrapper{align-items:stretch}
/* Each metric is a Bootstrap card so it inherits the global card chrome
   (background, border, padding) — only the slide's own sizing lives here. */
.kf-summary-swiper .swiper-slide{width:auto;min-width:160px;height:auto;display:flex}
.kf-summary-swiper .swiper-slide > .card{flex:1 1 auto;margin:0;min-height:70px;display:flex}
.kf-summary-swiper .swiper-slide > .card > .card-body{
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:4px;
    padding:12px 16px;
}
.kf-summary-label{font-size:.65rem;text-transform:uppercase;letter-spacing:.05em;color:rgba(255,255,255,.55);white-space:nowrap}
.kf-summary-value{font-size:1.1rem;font-weight:700;color:#fff;font-feature-settings:"tnum" 1;white-space:nowrap}
.kf-summary-value.kf-pos{color:var(--bs-success)}
.kf-summary-value.kf-neg{color:var(--bs-danger)}

/* ──────────────────────────────────────────────────────────── *
 *  Trading journal — tabs + calendar
 * ──────────────────────────────────────────────────────────── */
/* (.kf-journal-tabs / .kf-period-chips / .kf-obj-toggle-switch are
   semantic markers only — visual styling lives on .kf-segmented below) */

.kf-journal-body{padding-top:6px}
.kf-journal-trades .table{margin-top:8px}

/* Calendar */
.kf-cal{padding:4px 0}
.kf-cal-head{
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:12px;margin-bottom:12px;
}
.kf-cal-nav{display:flex;align-items:center;gap:8px}
.kf-cal-title{font-weight:700;color:#fff;min-width:140px;text-align:center}
/* Calendar nav uses standard Bootstrap btn btn-secondary — only the arrow
   buttons need a tighter padding override so the chevron icon stays square. */
.kf-cal-nav .btn[data-kf-cal-prev],
.kf-cal-nav .btn[data-kf-cal-next]{padding:6px 8px;display:inline-flex;align-items:center;justify-content:center}
.kf-cal-stats{display:flex;align-items:center;gap:14px}
.kf-cal-stat{
    display:inline-flex;align-items:center;gap:8px;
    background:rgba(255,255,255,.06);
    border:1px solid rgba(255,255,255,.06);
    border-radius:8px;
    padding:6px 12px;
    font-size:.78rem;
}
.kf-cal-stat em{color:rgba(255,255,255,.5);font-style:normal;font-weight:500}
.kf-cal-stat strong{font-weight:700;color:#fff;font-feature-settings:"tnum" 1}
.kf-cal-stat strong.kf-pos{color:var(--bs-success)}
.kf-cal-stat strong.kf-neg{color:var(--bs-danger)}

.kf-cal-weekdays{
    display:grid;grid-template-columns:repeat(7, minmax(0,1fr));
    gap:6px;margin-bottom:6px;
}
.kf-cal-weekdays span{
    text-align:left;padding:6px 8px;
    font-size:.65rem;
    text-transform:uppercase;letter-spacing:.05em;
    color:rgba(255,255,255,.5);font-weight:600;
}

.kf-cal-grid{
    display:grid;grid-template-columns:repeat(7, minmax(0,1fr));
    gap:6px;
}
.kf-cal-cell{
    position:relative;
    min-height:96px;
    padding:8px 10px;
    background:var(--card-secondary-background);
    border:1px solid rgba(255,255,255,.04);
    border-radius:10px;
    display:flex;flex-direction:column;gap:2px;
    color:rgba(255,255,255,.85);
}
.kf-cal-num{
    font-size:.8rem;font-weight:600;color:rgba(255,255,255,.85);
    align-self:flex-start;
}
.kf-cal-cell.kf-cal-out .kf-cal-num{color:rgba(255,255,255,.25)}
.kf-cal-cell.kf-cal-out{background:rgba(20,22,35,.25)}
.kf-cal-cell.kf-cal-today .kf-cal-num{
    background: linear-gradient(180deg, var(--main-color) 0%, var(--secondary-color) 100%);
    color: #fff;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin: -2px;
}
/* Today's cell — main-color-tinted background + border so the day stands
   out at a glance even when there are no closed trades yet. Declared after
   .kf-cal-pos/.kf-cal-neg so it WINS when both are present (a winning or
   losing day that also happens to be today still reads as "today" first,
   while the PnL stays in its own color). Use rgb-channel CSS vars so we
   can tint the main-color with alpha; if the project doesn't expose the
   channels, the rgba() falls back to a neutral purple that matches the
   number-circle gradient. */
.kf-cal-cell.kf-cal-today{
    background: rgba(124, 58, 237, .14);
    border-color: rgba(124, 58, 237, .55);
    box-shadow: inset 0 0 0 1px rgba(124, 58, 237, .25);
}
.kf-cal-cell.kf-cal-today.kf-cal-pos{
    background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(35,209,139,.10));
    border-color: rgba(124, 58, 237, .55);
}
.kf-cal-cell.kf-cal-today.kf-cal-neg{
    background: linear-gradient(135deg, rgba(124,58,237,.18), rgba(255,91,107,.10));
    border-color: rgba(124, 58, 237, .55);
}
.kf-cal-cell.kf-cal-pos{
    background:rgba(35,209,139,.10);
    border-color:rgba(35,209,139,.35);
}
.kf-cal-cell.kf-cal-neg{
    background:rgba(255,91,107,.10);
    border-color:rgba(255,91,107,.35);
}
.kf-cal-cell.kf-cal-zero{
    background:rgba(255,255,255,.04);
    border-color:rgba(255,255,255,.12);
}
.kf-cal-pnl{
    margin-top:auto;
    font-size:.92rem;font-weight:700;
    font-feature-settings:"tnum" 1;
}
.kf-cal-cell.kf-cal-pos  .kf-cal-pnl{color:var(--bs-success)}
.kf-cal-cell.kf-cal-neg  .kf-cal-pnl{color:var(--bs-danger)}
.kf-cal-cell.kf-cal-zero .kf-cal-pnl{color:rgba(255,255,255,.78)}
.kf-cal-trades{font-size:.7rem;color:rgba(255,255,255,.55)}

/* Best day of the account's trading history — stamped by dashboard_stats.js
   via STATE.bestDayKey. Gold ring + a small ★ badge in the corner.
   Priority higher than kf-cal-pos so a winning day that is ALSO the best
   day reads as "best" first (gold outshines green). */
.kf-cal-cell.kf-cal-best{
    border-color:rgba(255,196,63,.85) !important;
    box-shadow:inset 0 0 0 1px rgba(255,196,63,.45), 0 0 18px -4px rgba(255,196,63,.45);
}
.kf-cal-cell.kf-cal-best.kf-cal-pos{
    background:linear-gradient(135deg,rgba(255,196,63,.18),rgba(35,209,139,.14));
}
.kf-cal-cell.kf-cal-best .kf-cal-best-badge{
    position:absolute;top:4px;right:6px;
    font-size:.85rem;line-height:1;color:#ffc43f;
    text-shadow:0 0 6px rgba(255,196,63,.55);
    pointer-events:none;
}
@media (max-width:480px){
    .kf-cal-cell.kf-cal-best .kf-cal-best-badge{font-size:.65rem;top:2px;right:4px}
}

@media (max-width:768px){
    .kf-cal-cell{min-height:74px;padding:6px}
    .kf-cal-pnl{font-size:.75rem}
    .kf-cal-trades{display:none}
    .kf-cal-weekdays span{padding:4px}
}
@media (max-width:480px){
    .kf-cal-cell{min-height:54px;border-radius:6px}
    .kf-cal-num{font-size:.7rem}
    .kf-cal-pnl{font-size:.65rem}
    .kf-cal-stats{flex-direction:column;align-items:flex-start;gap:6px}
}

/* ──────────────────────────────────────────────────────────── *
 *  Chart controls — period chips + "Trading Objective Lines" toggle
 * ──────────────────────────────────────────────────────────── */
.kf-equity-controls{
    position:relative;z-index:2;
    display:flex;align-items:center;justify-content:space-between;
    flex-wrap:wrap;gap:10px;
    margin:6px 0 14px;
}
/* ──────────────────────────────────────────────────────────── *
 *  Segmented control (global)
 *  Shared look for: chart period chips, objective-lines toggle,
 *  trading-journal tabs, …
 *  Add `.kf-segmented` to the wrapper; items use `.btn`, `.nav-link`
 *  or any element exposing an `.is-active` / `.active` / `.btn-theme`
 *  state.
 * ──────────────────────────────────────────────────────────── */
.kf-segmented{
    display:inline-flex;align-items:center;gap:2px;
    padding:3px;border-radius:9px;
    border:1px solid var(--button-secondary-border-color);
}
.kf-segmented > .btn,
.kf-segmented > .nav-item > .nav-link,
.kf-segmented > .nav-link,
.kf-segmented > button{
    appearance:none;background:transparent;border:none;
    color:rgba(255,255,255,.55);
    font-size:.78rem;font-weight:500;line-height:1.2;
    padding:5px 14px;border-radius:7px;cursor:pointer;
    text-transform:capitalize;
    transition:background .15s ease, color .15s ease;
}
.kf-segmented > .btn:hover,
.kf-segmented > .nav-item > .nav-link:hover,
.kf-segmented > .nav-link:hover,
.kf-segmented > button:hover{color:#fff}
.kf-segmented > .btn.btn-theme,
.kf-segmented > .btn.is-active,
.kf-segmented > .btn.active,
.kf-segmented > .nav-item > .nav-link.active,
.kf-segmented > .nav-link.active,
.kf-segmented > button.is-active{
    background:var(--button-primary-background-color);
    color:var(--button-primary-text-color);font-weight:600;
}

.kf-obj-toggle{display:inline-flex;align-items:center;gap:10px}
.kf-obj-toggle-label{
    font-size:.78rem;color:rgba(255,255,255,.6);font-weight:500;
}

@media (max-width:576px){
    .kf-equity-controls{flex-direction:column;align-items:stretch}
    .kf-segmented{justify-content:center}
    .kf-obj-toggle{justify-content:space-between}
}

/* ──────────────────────────────────────────────────────────── *
 *  Open Trades — modern expandable rows (ws_sync live panel)
 *
 *  Two layouts share the same row classes so all spacing/typography
 *  stays consistent between the live "Open Positions" panel and the
 *  Trading Journal "Closed Trades" tab:
 *
 *    .ot-table-open   → 9 columns: Symbol Type Time Volume uPnL rPnL Pips Duration ⋯
 *    .ot-table-closed → 8 columns: Symbol Type Closed Volume PnL    Pips Duration ⋯
 * ──────────────────────────────────────────────────────────── */
.ot-table{
    border: 1px solid var(--border-color);
    border-radius: 10px;
    overflow: hidden;
    background: var(--card-primary-background);
}
.ot-table-open .ot-row{
    grid-template-columns:minmax(0,1.3fr) 70px 130px 80px 110px 110px 80px 110px 44px;
}
.ot-table-closed .ot-row{
    grid-template-columns:minmax(0,1.3fr) 70px 130px 80px 110px 80px 110px 44px;
}
/* Objectives — 3 columns sharing the trade-table styling: label takes
 * the slack, result is right-aligned (numbers), summary is the round
 * pill (✓ / ✕). */
.ot-table-objectives .ot-row{
    grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) 56px;
}
.ot-table-objectives .ot-row > .ot-obj-result{
    text-align:right;
    font-feature-settings:"tnum" 1;
}
.ot-table-objectives .ot-row > .ot-obj-summary{
    overflow:visible;
}
.ot-row{
    display:grid;
    align-items:center;gap:10px;
    padding:10px 14px;
    border-bottom:1px solid rgba(255,255,255,.04);
    font-size:.85rem;
}
.ot-row:last-child{border-bottom:none}
.ot-row.ot-head{
    color: var(--text-secondary);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    font-weight: 600;
    padding: 10px 14px;
}
.ot-cell{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ot-id{display:flex;flex-direction:column;gap:2px;white-space:nowrap}
.ot-id-num{font-feature-settings:"tnum" 1;color:rgba(255,255,255,.85);font-weight:600}
.ot-side{font-size:.78rem;font-weight:600;display:inline-flex;align-items:center;gap:4px}
.ot-side.ws-side-buy{color:var(--bs-success);}
.ot-side.ws-side-sell{color:var(--bs-danger);}
.ot-time{color:rgba(255,255,255,.7);font-size:.78rem}
.ot-symbol{
    display:flex;align-items:center;gap:8px;
    font-weight:600;color:#fff;
    overflow:visible;
}
.ot-symbol-text{overflow:hidden;text-overflow:ellipsis}
/* Symbol "icon" — colour-coded circle with the base ticker (BTC/ETH/…)
 * inside. Generated client-side by ws_sync.js → kfSymbolIcon(). Kept in
 * sync with the chart trade-marker glyphs in equity_chart.js so the
 * same coin reads the same colour everywhere on the dashboard. */
.ot-sym-icon{
    width:24px;height:24px;flex:0 0 24px;
    border-radius:50%;
    display:inline-flex;align-items:center;justify-content:center;
    box-shadow:0 1px 2px rgba(0,0,0,.35),inset 0 0 0 1px rgba(255,255,255,.10);
}
.ot-sym-icon svg{display:block}
/* PnL / Pips cells — text only, coloured by sign. We dropped the
 * pill-style background per UX request so the value reads as a
 * straight figure (no chip). */
.ot-pnl,
.ot-pips{
    background:transparent;padding:0;border-radius:0;
    text-align:left;font-feature-settings:"tnum" 1;font-weight:600;
}
.ot-pnl.p-pos,.ot-pips.p-pos{color:var(--bs-success);}
.ot-pnl.p-neg,.ot-pips.p-neg{color:var(--bs-danger);}
.ot-toggle{display:flex;justify-content:flex-end}
.ot-toggle-btn{
    appearance:none;background:var(--button-secondary-background-color);
    border:1px solid var(--button-secondary-border-color);
    border-radius:8px;color:var(--text-color);
    width:34px;height:34px;cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:background .15s ease, color .15s ease;
}
.ot-toggle-btn:hover{background:rgba(255,255,255,.08);color:#fff}
.ot-chevron{font-size:.95rem;line-height:1}

.ot-detail{
    padding: 14px;
    border-bottom: 1px solid var(--border-color);
}
.ot-detail-grid{
    display:grid;
    grid-template-columns:repeat(5, minmax(0,1fr));
    gap: var(--gutter-x);
}
.ot-card{min-width:0}
.ot-card-title{
    display:flex;align-items:center;gap:6px;
    font-weight:700;font-size:.85rem;
    margin-bottom:8px;
}
.ot-card-icon{
    width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;
    border-radius:5px;background:rgba(255,255,255,.06);
    font-size:.75rem;color:rgba(255,255,255,.7);
}
.ot-card dl{
    display:grid;grid-template-columns:auto 1fr;gap:6px 12px;
    margin:0;font-size:.78rem;
}
.ot-card dt{color:var(--text-secondary);font-weight:500}
.ot-card dd{margin:0;font-feature-settings:"tnum" 1;text-align:right;word-break:break-all}
.ot-card .ot-dt-head{
    grid-column:1 / -1;color:rgba(255,255,255,.7);font-weight:700;
    margin-top:6px;border-top:1px solid rgba(255,255,255,.05);padding-top:8px;
}
.ot-card .p-pos{color:var(--bs-success);font-weight:700}
.ot-card .p-neg{color:var(--bs-danger);font-weight:700}

@media (max-width:1200px){
    .ot-table-open .ot-row{
        grid-template-columns:minmax(0,1.2fr) 60px 110px 70px 100px 100px 70px 100px 36px;
        font-size:.78rem;
    }
    .ot-table-closed .ot-row{
        grid-template-columns:minmax(0,1.2fr) 60px 110px 70px 100px 70px 100px 36px;
        font-size:.78rem;
    }
    .ot-detail-grid{grid-template-columns:repeat(3, minmax(0,1fr))}
}
@media (max-width:768px){
    .ot-row.ot-head{display:none}
    /* Mobile: condense to Symbol + uPnL/PnL + chevron. Hide the
     * less-critical columns and let the symbol pull the row. */
    .ot-table-open .ot-row{
        grid-template-columns:minmax(0,1fr) 100px 100px 36px;
        gap:6px 10px;
    }
    .ot-table-closed .ot-row{
        grid-template-columns:minmax(0,1fr) 100px 100px 36px;
        gap:6px 10px;
    }
    /* Open table column indices: 1=Symbol 2=Type 3=Time 4=Volume
     * 5=uPnL 6=rPnL 7=Pips 8=Duration 9=⋯ */
    .ot-table-open .ot-row > .ot-cell:nth-child(2),
    .ot-table-open .ot-row > .ot-cell:nth-child(3),
    .ot-table-open .ot-row > .ot-cell:nth-child(4),
    .ot-table-open .ot-row > .ot-cell:nth-child(7),
    .ot-table-open .ot-row > .ot-cell:nth-child(8){display:none}
    /* Closed table column indices: 1=Symbol 2=Type 3=Closed 4=Volume
     * 5=PnL 6=Pips 7=Duration 8=⋯ */
    .ot-table-closed .ot-row > .ot-cell:nth-child(2),
    .ot-table-closed .ot-row > .ot-cell:nth-child(3),
    .ot-table-closed .ot-row > .ot-cell:nth-child(4),
    .ot-table-closed .ot-row > .ot-cell:nth-child(6),
    .ot-table-closed .ot-row > .ot-cell:nth-child(7){display:none}
    .ot-detail-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:480px){
    .ot-detail-grid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────────────────────
 *  Dashboard-new — KPI skeleton loader
 *  Keeps a soft animated grey block in place of the raw "—"
 *  placeholder so equity/balance/target/dd KPI cells don't
 *  flash "- → 0 → real" on first paint. equity_chart.js
 *  removes the .is-loading class once the WS bootstrap lands.
 * ───────────────────────────────────────────────────────────── */
.kf-kpi-value.is-loading{
    color:transparent;
    min-height:1.5em;
    position:relative;
}
.kf-kpi-value .kf-skel,
.kf-kpi-sub   .kf-skel-sub{
    display:inline-block;
    height:1em;
    width:7ch;
    border-radius:6px;
    background:linear-gradient(90deg,
        rgba(255,255,255,.04) 0%,
        rgba(255,255,255,.10) 40%,
        rgba(255,255,255,.04) 80%);
    background-size:200% 100%;
    animation:kf-skel 1.2s ease-in-out infinite;
}
.kf-kpi-sub .kf-skel-sub{height:.65em;width:9ch;border-radius:4px;opacity:.7}
@keyframes kf-skel{
    0%   {background-position:100% 0}
    100% {background-position:-100% 0}
}

/* ─────────────────────────────────────────────────────────────
 *  Dashboard-new — Statistics tooltips
 *  The .kf-stat-info icon was rendering as an empty <svg> because
 *  the sprite was missing `i-info-circle` (now added). Make sure
 *  the icon glyph is visible (currentColor + child sizing) and
 *  beef up the Bootstrap tooltip background so it reads against
 *  the dark stat card.
 * ───────────────────────────────────────────────────────────── */
.kf-stat-info svg,
.kf-info-btn svg,
.kf-card-head svg{
    width:14px;height:14px;color:currentColor;
}
.kf-info-btn svg{width:16px;height:16px}
/* Bootstrap tooltips — match the card surface (background + border) so
 * info-popups read as part of the card they sit on. The arrow gets a
 * per-placement override so the right edge of the triangle matches the
 * tooltip body on every side. */
.tooltip{
    --bs-tooltip-bg:var(--card-primary-background);
    --bs-tooltip-color:var(--text-color, #fff);
    --bs-tooltip-opacity:1;
    z-index:1080;
}
.tooltip.show{opacity:1}
.tooltip .tooltip-inner{
    background:var(--card-primary-background);
    color:var(--text-color, #fff);
    border:1px solid var(--border-color);
    box-shadow:0 8px 24px rgba(0,0,0,.35);
    padding:8px 10px;font-size:.78rem;line-height:1.4;
    max-width:280px;text-align:left;
    border-radius:var(--border-radius, 8px);
}
.tooltip.bs-tooltip-top  .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="top"]    .tooltip-arrow::before{border-top-color:var(--card-primary-background) !important}
.tooltip.bs-tooltip-bottom .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before{border-bottom-color:var(--card-primary-background) !important}
.tooltip.bs-tooltip-start  .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="left"]   .tooltip-arrow::before{border-left-color:var(--card-primary-background) !important}
.tooltip.bs-tooltip-end    .tooltip-arrow::before,
.tooltip.bs-tooltip-auto[data-popper-placement^="right"]  .tooltip-arrow::before{border-right-color:var(--card-primary-background) !important}

/* ─────────────────────────────────────────────────────────────
 *  Dashboard-new — Daily PnL calendar nav
 *  Disable the prev/next buttons when we'd otherwise navigate
 *  past the data window (account opened_at .. server today).
 * ───────────────────────────────────────────────────────────── */
.kf-cal-nav .btn[disabled],
.kf-cal-nav .btn.disabled{
    opacity:.35;pointer-events:none;cursor:not-allowed;
}

/* ─────────────────────────────────────────────────────────────
 *  Dashboard-new — Trading Journal tabs
 *  The previous markup had the tab list inside a full `col` wrapper
 *  which caused it to take half the row width on desktops. The
 *  template now uses `col-auto`; this rule keeps the segmented
 *  control compact and right-aligned regardless of language length.
 * ───────────────────────────────────────────────────────────── */
.kf-journal-tabs.justify-content-end{flex-wrap:nowrap;justify-content:flex-end !important}
.kf-journal-tabs .nav-item{flex:0 0 auto}
.kf-kpi-sub{
    margin-top:6px;
    font-size:.78rem;
    color:rgba(255,255,255,.55);
    font-feature-settings:"tnum" 1, "lnum" 1;
}
/* ─────────────────────────────────────────────────────────────
 *  Trader profiles — public /traders/{username} hub
 *  Cover, avatar, and Facebook-style edit-on-hover overlays for
 *  the dropzone-backed cover/profile images. Owner-side only.
 * ───────────────────────────────────────────────────────────── */
.kf-trader-cover-wrap{position:relative;width:100%;margin-bottom:80px}
.kf-trader-cover{position:relative;width:100%;height:280px;background:#1a1a1a center/cover no-repeat;border-radius:0 0 var(--border-radius) var(--border-radius);overflow:hidden}
.kf-trader-head-row{position:relative;margin-top:-60px}
.kf-trader-avatar-wrap{position:relative;width:120px;height:120px;border-radius:50%;background:#222 center/cover no-repeat;border:4px solid var(--body-bg);flex:0 0 120px;overflow:hidden}
.kf-trader-name{font-size:1.6rem;line-height:1.2;font-weight:700}
.kf-trader-stats{flex-wrap:wrap}
.kf-trader-card{transition:transform .15s ease-out,border-color .15s ease-out}
.kf-trader-card:hover{transform:translateY(-2px);border-color:var(--main-color)}
.kf-trader-card-avatar{width:80px;height:80px;border-radius:50%;background:#222 center/cover no-repeat}

/* Private trader profile — minimal identity + lock card. Sized to feel
 * like the FTMO "user not public" page so the empty state still looks
 * branded instead of bare. */
.kf-private-avatar{width:96px;height:96px}
.kf-private-avatar img,.kf-private-avatar picture,.kf-private-avatar picture img{width:96px;height:96px;border-radius:50%;object-fit:cover;display:block}
.kf-private-avatar-placeholder{width:96px;height:96px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.55)}
.kf-private-icon{width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.05);color:rgba(255,255,255,.7)}

/* Facebook-style edit overlay — surfaces a soft scrim + camera label
 * over any element marked .dz-edit-hover. We rely on the existing
 * Dropzone JS bound to .dropzone elements via figure[source=*] and just
 * paint the overlay on top so clicking still triggers the file picker. */
.dz-edit-hover{position:relative;cursor:pointer}
.dz-edit-hover .dz-edit-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:6px;background:rgba(0,0,0,.55);color:#fff;font-size:.85rem;font-weight:500;opacity:0;transition:opacity .15s ease-out;pointer-events:none}
.dz-edit-hover:hover .dz-edit-overlay{opacity:1}
.dz-edit-hover .dz-edit-overlay-circle{border-radius:50%}
.dz-edit-hover .dz-edit-overlay svg{flex:0 0 auto}

@media (max-width: 767.98px){
    .kf-trader-cover{height:180px}
    .kf-trader-head-row{margin-top:-40px}
    .kf-trader-avatar-wrap{width:90px;height:90px;flex-basis:90px}
    .kf-trader-name{font-size:1.3rem}
}

/* ─────────────────────────────────────────────────────────────
 *  My Certificates rail — FTMO-style horizontally scrolling cards
 *  on the trader's public profile. Each card has a corner count
 *  badge + a top-strip type label + a centered mark/amount. The
 *  cell underneath shows the human-readable challenge name.
 *
 *  The rail itself uses native overflow-x with scroll-snap so it
 *  works without JS, and the prev/next buttons just call the
 *  matching scrollBy() in @cache/js/client/account_shares.js.
 * ───────────────────────────────────────────────────────────── */
.kf-certs-card{position:relative}
.kf-certs-rail{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding:4px 2px 14px;margin:0 -2px;scrollbar-width:thin}
.kf-certs-rail::-webkit-scrollbar{height:6px}
.kf-certs-rail::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12);border-radius:3px}
.kf-cert-cell{flex:0 0 168px;display:flex;flex-direction:column;align-items:center;gap:8px;scroll-snap-align:start}
.kf-cert-card{position:relative;width:100%;aspect-ratio:1/1;border-radius:14px;background:#0e1116;border:1px solid rgba(255,255,255,.06);overflow:hidden;display:block;transition:transform .18s ease-out,border-color .18s ease-out;text-decoration:none;color:inherit}
.kf-cert-card:hover{transform:translateY(-2px);border-color:var(--main-color)}
.kf-cert-img{padding:0}
.kf-cert-img picture, .kf-cert-img-asset{display:block;width:100%;height:100%;object-fit:cover}
.kf-cert-name{font-size:.82rem;font-weight:600;text-align:center;color:rgba(255,255,255,.92);line-height:1.25;margin-top:8px}
.kf-cert-sub{text-align:center;line-height:1.2;margin-top:2px}

/* Show all — flips the rail into a wrapping flex grid so every
 * card is visible at once. Triggered by .kf-certs-rail-expanded. */
.kf-certs-rail-expanded{flex-wrap:wrap;overflow-x:visible;scroll-snap-type:none}
.kf-certs-rail-expanded + .kf-certs-nav-row{display:none}
.kf-certs-nav-row{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.kf-certs-nav{width:32px;height:32px;border-radius:50%;border:1px solid var(--border-color);background:transparent;color:var(--text-color);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:border-color .15s ease-out,background-color .15s ease-out}
.kf-certs-nav:hover{border-color:var(--main-color);background:rgba(255,255,255,.04)}
.kf-certs-nav:disabled{opacity:.35;cursor:not-allowed}

@media (max-width: 575.98px){
    .kf-cert-cell{flex-basis:140px}
}

/* ─────────────────────────────────────────────────────────────
 *  Dashboard share modal — opened by [data="kf_share_dashboard"]
 *  Keeps duration/display checkboxes in a compact two-column grid
 *  and shows the live share URL beneath an inline "copy" button.
 * ───────────────────────────────────────────────────────────── */
.kf-share-modal .kf-share-section{margin-bottom:18px}
.kf-share-modal .kf-share-section h6{font-size:.95rem;margin-bottom:10px}
.kf-share-modal .kf-share-options{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.kf-share-modal .kf-share-options label{display:flex;align-items:center;gap:8px;padding:10px 12px;border:1px solid var(--border-color);border-radius:var(--border-radius-sm);cursor:pointer;font-size:.85rem;margin:0;transition:border-color .15s ease-out,background-color .15s ease-out}
.kf-share-modal .kf-share-options label:has(input:checked){border-color:var(--main-color);background:rgba(101,119,146,.06)}
.kf-share-modal .kf-share-options input[type="checkbox"],
.kf-share-modal .kf-share-options input[type="radio"]{flex:0 0 auto;margin:0}
.kf-share-modal .kf-share-link{display:flex;align-items:center;gap:8px}
.kf-share-modal .kf-share-link input{flex:1 1 auto;background:var(--input-bg);border:1px solid var(--border-color);border-radius:var(--border-radius-sm);padding:10px 12px;color:var(--text-color);font-size:.85rem}
.kf-share-active-list .kf-share-row{display:flex;flex-direction:column;align-items:stretch;gap:6px;padding:10px 0;border-bottom:1px solid var(--border-color)}
.kf-share-active-list .kf-share-row:last-child{border-bottom:0}
.kf-share-active-list .kf-share-row-top{display:flex;align-items:center;gap:6px}
.kf-share-active-list .kf-share-row-top input{flex:1 1 auto;font-size:.78rem}
.kf-share-active-list .kf-share-row-meta{display:flex;flex-wrap:wrap;gap:6px;font-size:.72rem}
.kf-share-active-list .kf-share-empty{padding:24px 0;text-align:center}
.kf-share-modal .kf-share-display-loading{padding:8px 0}
.kf-share-modal .form-check.form-switch{padding-left:2.5em}
.kf-share-header .kf-trader-cover{height:200px}
.kf-share-header .kf-trader-head-row{margin-top:-40px}
.kf-share-header .kf-trader-avatar-wrap{width:88px;height:88px;flex-basis:88px}
.kf-share-sections .container-fluid{padding-left:0;padding-right:0}
/* ============================================================================
 * Unified Messages — /client/messages
 * ============================================================================ */
.kf-messages{display:grid;grid-template-columns:320px 1fr;height:calc(100vh - 140px);min-height:500px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}
.kf-messages.show-details{grid-template-columns:320px 1fr 320px}
.kf-msg-side{display:flex;flex-direction:column;border-right:1px solid var(--border-color);min-width:0;background:var(--input-bg)}
.kf-msg-side-header{padding:14px;border-bottom:1px solid var(--border-color);background:var(--card-bg)}
.kf-msg-search{margin-bottom:10px}
.kf-msg-tabs{display:flex;flex-wrap:wrap;gap:4px}
.kf-msg-tab{background:transparent;border:1px solid transparent;border-radius:6px;padding:3px 8px;font-size:.72rem;color:var(--text-secondary,#888);cursor:pointer;line-height:1.3}
.kf-msg-tab:hover{background:var(--body-bg);color:var(--text-color)}
.kf-msg-tab.active{background:var(--kf-1);color:#fff;border-color:var(--kf-1)}
.kf-msg-tab-mgr{font-style:italic}
.kf-msg-list{flex:1 1 auto;overflow-y:auto;padding:6px}
.kf-msg-list-empty{padding:30px 12px;text-align:center}
.kf-msg-card{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;width:100%;padding:10px;border:none;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer;margin-bottom:2px;transition:background .15s ease}
.kf-msg-card:hover{background:var(--body-bg)}
.kf-msg-card.active{background:var(--card-bg);box-shadow:inset 3px 0 0 var(--kf-1)}
.kf-msg-card-icon{position:relative;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--body-bg);font-weight:600}
.kf-msg-type-badge{font-size:.85rem;line-height:1}
.kf-msg-type-badge.type-livechat{color:#23d18b}
.kf-msg-type-badge.type-system{color:#f7b500}
.kf-msg-type-badge.type-dm{color:#5865f2}
.kf-msg-type-badge.type-ticket{color:var(--kf-1)}
.kf-msg-status-dot{position:absolute;right:0;bottom:0;width:9px;height:9px;border-radius:50%;border:2px solid var(--input-bg)}
.kf-msg-card-body{min-width:0;display:flex;flex-direction:column}
.kf-msg-card-title{font-weight:600;font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-msg-card-preview{font-size:.75rem;color:var(--text-secondary,#888);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-msg-card-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font-size:.7rem;color:var(--text-secondary,#888)}
.kf-msg-card-time{white-space:nowrap}
.kf-msg-unread{font-size:.62rem;padding:2px 6px}

.kf-msg-center{display:flex;flex-direction:column;min-width:0;background:var(--card-bg)}
.kf-msg-empty-state{padding:40px;text-align:center;opacity:.65}
.kf-msg-thread{display:flex;flex-direction:column;height:100%;min-height:0}
.kf-msg-thread-header{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border-color);background:var(--input-bg)}
.kf-msg-thread-meta h6{font-size:.95rem}
.kf-msg-thread-actions{display:flex;gap:6px}
.kf-msg-stream{flex:1 1 auto;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.kf-msg-row{display:flex;gap:10px;max-width:78%}
.kf-msg-row.side-me{margin-left:auto;flex-direction:row-reverse}
.kf-msg-row.side-them{margin-right:auto}
.kf-msg-avatar-wrap{flex-shrink:0;width:32px;height:32px;border-radius:50%;overflow:hidden;background:var(--body-bg);display:flex;align-items:center;justify-content:center}
.kf-msg-avatar{width:100%;height:100%;object-fit:cover}
.kf-msg-avatar-fallback{font-size:.85rem;font-weight:600;color:var(--text-color)}
.kf-msg-avatar-sm{width:32px;height:32px;object-fit:cover}
.kf-msg-bubble{background:var(--body-bg);padding:8px 12px;border-radius:14px;min-width:80px}
.kf-msg-row.side-me .kf-msg-bubble{background:var(--kf-1);color:#fff}
.kf-msg-row.type-system .kf-msg-bubble{background:rgba(247,181,0,.12);border:1px solid rgba(247,181,0,.3);color:inherit}
.kf-msg-row.type-bot .kf-msg-bubble{background:rgba(88,101,242,.12);border:1px solid rgba(88,101,242,.3);color:inherit}
.kf-msg-bubble-meta{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin-bottom:2px;font-size:.7rem;opacity:.8}
.kf-msg-bubble-name{font-weight:600}
.kf-msg-bubble-body{font-size:.88rem;line-height:1.42;word-wrap:break-word;white-space:pre-wrap}
.kf-msg-bubble-body a{color:inherit;text-decoration:underline}

.kf-msg-composer{padding:12px;border-top:1px solid var(--border-color);background:var(--input-bg)}
.kf-msg-composer-active{display:flex;gap:8px;align-items:flex-end}
.kf-msg-composer-active textarea{flex:1 1 auto;min-height:40px;max-height:160px;resize:none;padding:8px 12px;border-radius:10px}
.kf-msg-composer-readonly{padding:10px;text-align:center;background:var(--body-bg);border-radius:8px}

.kf-msg-details{border-left:1px solid var(--border-color);overflow-y:auto;background:var(--input-bg)}
.kf-msg-pill{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:999px;font-size:.72rem}
.kf-msg-pill-dot{width:6px;height:6px;border-radius:50%;background:#23d18b;display:inline-block}

/* Wizard */
.kf-wiz-step .btn-outline-theme{padding:14px;border:1px solid var(--border-color);background:transparent;color:inherit;border-radius:10px;transition:all .15s ease}
.kf-wiz-step .btn-outline-theme:hover{border-color:var(--kf-1);background:var(--body-bg)}
.kf-wiz-dm-list{max-height:280px;overflow-y:auto;border:1px solid var(--border-color);border-radius:8px}
.kf-wiz-dm-row{display:grid;grid-template-columns:36px 1fr auto;gap:10px;align-items:center;width:100%;padding:8px 10px;border:none;background:transparent;color:inherit;text-align:left;cursor:pointer;border-bottom:1px solid var(--border-color)}
.kf-wiz-dm-row:last-child{border-bottom:none}
.kf-wiz-dm-row:hover{background:var(--body-bg)}
.kf-wiz-dm-row.active{background:var(--card-bg);box-shadow:inset 3px 0 0 var(--kf-1)}
.kf-wiz-dm-row-meta{min-width:0;overflow:hidden}
.kf-wiz-dm-row-meta span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Mobile: stacked panes via show-conversation flag */
@media (max-width: 768px){
    .kf-messages{grid-template-columns:1fr;height:calc(100vh - 100px)}
    .kf-messages .kf-msg-side{display:flex}
    .kf-messages .kf-msg-center{display:none}
    .kf-messages.show-conversation .kf-msg-side{display:none}
    .kf-messages.show-conversation .kf-msg-center{display:flex}
    .kf-messages.show-details{grid-template-columns:1fr}
}

/* ============================================================================
 * Unified Messages — sidebar layout variant
 * Sol panel (filter+thread list) artık /client/settings benzeri kf-sidebar
 * tarafından sunuluyor. Bu varyantta .kf-messages 2-pane'e iniyor:
 *   - center : conversation (varsayılan, full-width)
 *   - right  : details (toggle ile açılır)
 * ============================================================================ */
.kf-messages-with-sidebar{display:grid;grid-template-columns:1fr;height:calc(100vh - 140px);min-height:500px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:12px;overflow:hidden}
.kf-messages-with-sidebar.show-details{grid-template-columns:1fr 340px}
.kf-messages-with-sidebar .kf-msg-details{border-left:1px solid var(--border-color);overflow-y:auto;background:var(--input-bg);min-width:0}
.kf-messages-with-sidebar .kf-msg-stream{padding:24px 32px}
.kf-messages-with-sidebar .kf-msg-row{max-width:85%}

/* Detail panel cards */
.kf-msg-det-card{padding:14px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:10px}
.kf-msg-det-title{font-size:.95rem}
.kf-msg-det-meta dt,.kf-msg-det-meta dd{margin-bottom:6px}
.kf-msg-details h6.text-uppercase{letter-spacing:.04em;font-size:.7rem;font-weight:600}
.kf-msg-pill img{vertical-align:middle}

/* Sidebar variant — settings ile aynı kf-sidebar şablonunu kullanıyor.
   Burada sadece messages-spesifik header/list ayarlamaları. */
.kf-sidebar-messages .kf-sidebar-inner{padding:0;height:100%}
.kf-sidebar-messages .kf-msg-side-header{padding:14px 14px 10px;background:var(--card-bg)}
.kf-sidebar-messages .kf-msg-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.kf-sidebar-messages .kf-msg-list{flex:1 1 auto;overflow-y:auto;padding:6px;min-height:0}
.kf-sidebar-messages .kf-msg-card{display:grid;grid-template-columns:32px 1fr auto;gap:10px;align-items:center;width:100%;padding:10px;border:none;border-radius:8px;background:transparent;color:inherit;text-align:left;cursor:pointer;margin-bottom:2px;transition:background .15s ease}
.kf-sidebar-messages .kf-msg-card:hover{background:var(--body-bg)}
.kf-sidebar-messages .kf-msg-card.active{background:var(--card-bg);box-shadow:inset 3px 0 0 var(--kf-1)}

/* Mobile: details panelini gizle (kf-sidebar zaten sol pane'i tutuyor;
   ekran 1 sütunluk chat'i kucaklasın diye). show-conversation flag'i JS
   bir thread seçince eklenir → mobilde sidebar daralabilir/gizlenir. */
@media (max-width: 1199.98px){
    .kf-messages-with-sidebar.show-details{grid-template-columns:1fr 300px}
    .kf-messages-with-sidebar .kf-msg-stream{padding:18px}
}
@media (max-width: 991.98px){
    .kf-messages-with-sidebar{height:calc(100vh - 100px)}
    .kf-messages-with-sidebar.show-details{grid-template-columns:1fr}
    .kf-messages-with-sidebar .kf-msg-details{display:none}
}

/* ============================================================================
 * Unified composer (.kf-composer) — hem messages hem livechat tarafından
 * kullanılır. Tek HTML pattern + tek CSS. Stiller:
 *   - shell: dış kapsayıcı (background, padding)
 *   - row:   attach + textarea + send düğmesi (flex)
 *   - attach-bar: yüklenen dosyaların chip'leri (above row)
 * ============================================================================ */
.kf-composer{padding:10px 12px;border-top:1px solid var(--border-color);background:var(--input-bg)}
.kf-composer-shell{display:flex;flex-direction:column;gap:8px}
.kf-composer-readonly{padding:10px;text-align:center;background:var(--body-bg);border-radius:8px;color:var(--text-muted)}
.kf-composer-row{display:flex;align-items:flex-end;gap:8px}
.kf-composer-input{flex:1 1 auto;min-height:40px;max-height:160px;resize:none;padding:9px 12px;border-radius:18px;border:1px solid var(--border-color);background:var(--card-bg);font-size:.88rem;line-height:1.4}
.kf-composer-input:focus{outline:none;border-color:var(--kf-1);box-shadow:0 0 0 2px rgba(124,58,237,.12)}
.kf-composer-attach-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:transparent;color:var(--text-muted);cursor:pointer;border:1px solid transparent;transition:background .15s ease,color .15s ease}
.kf-composer-attach-btn:hover{background:var(--card-bg);color:var(--kf-1)}
.kf-composer-send-btn{flex-shrink:0;width:36px;height:36px;border-radius:50%;padding:0;display:flex;align-items:center;justify-content:center;background:var(--kf-1);color:#fff;border:none;transition:opacity .15s ease}
.kf-composer-send-btn:hover{background:var(--kf-1);opacity:.92}
.kf-composer-send-btn:disabled{opacity:.5;cursor:not-allowed}
.kf-composer-send-btn svg{stroke:#fff}
.kf-composer-attach-bar{display:flex;flex-wrap:wrap;gap:6px}

/* Attachment chip (composer hot-list ve mesaj baloncuğu attachments için ortak ipuçları) */
.kf-att-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;background:var(--card-bg);border:1px solid var(--border-color);border-radius:14px;font-size:.78rem;max-width:240px}
.kf-att-chip .kf-att-thumb{width:24px;height:24px;border-radius:6px;object-fit:cover;flex-shrink:0}
.kf-att-chip .kf-att-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:6px;background:var(--body-bg);font-size:.85rem;flex-shrink:0}
.kf-att-chip .kf-att-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kf-att-chip .kf-att-remove{flex-shrink:0;background:transparent;border:none;color:var(--text-muted);cursor:pointer;font-size:18px;line-height:1;padding:0 4px;border-radius:50%}
.kf-att-chip .kf-att-remove:hover{color:#ef4444}
.kf-att-spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--border-color);border-top-color:var(--kf-1);border-radius:50%;animation:kf-att-spin 0.6s linear infinite}
@keyframes kf-att-spin{to{transform:rotate(360deg)}}

/* Mesaj baloncuğu attachments */
.kf-msg-bubble-atts{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.kf-msg-att-img{max-width:100%;max-height:240px;border-radius:8px;display:block;cursor:zoom-in}
.kf-msg-att-img-link{display:block}
.kf-msg-att-file{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border-radius:8px;background:rgba(255,255,255,.08);color:inherit;text-decoration:none;font-size:.78rem;max-width:280px}
.kf-msg-row.side-me .kf-msg-att-file{background:rgba(255,255,255,.18)}
.kf-msg-att-file:hover{opacity:.9}
.kf-msg-att-file-name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Thread card avatar (DM peer foto, system logosu, ticket/livechat rozeti) */
.kf-msg-card-avatar{width:32px;height:32px;border-radius:50%;object-fit:cover;display:inline-block}
.kf-msg-card-avatar-fallback{display:inline-flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700;color:#fff;background:var(--kf-1)}
.kf-msg-card-avatar-fallback.type-system{background:linear-gradient(135deg,#f59e0b,#f7b500)}
.kf-msg-card-avatar-fallback.type-dm{background:var(--kf-1)}

/* Composer livechat overrides — mevcut .lc-input-area'yı kf-composer ile
   align'le (renkler, padding); çift kural önlemek için livechat HTML'i de
   .kf-composer kullanırsa bu blok atlanır. */
#lc-input-area .kf-composer-row{padding:0}
#lc-input-area{padding:8px 10px}

/* ============================================================================
   Manager Admin Bar (WordPress-style topbar shown only when manager is logged
   in). Lives at top of every client page; pushes header/sidebar/content down
   by --mbh. Source: dir_client/template/topbar.php
   ============================================================================ */
.body.imbh {
    --mbh: 36px;
}
body.imbh header.fixed-top { top: var(--mbh); }
body.imbh .kf-sidebar { top: var(--mbh); height: calc(100% - var(--mbh)); }
body.imbh .kf-content,
body.imbh .kf-wrap { padding-top: var(--mbh); }

.mbh {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--mbh);
    background: #14111e;
    color: #e6e3f0;
    z-index: 1100;
    border-bottom: 1px solid rgba(255,255,255,.06);
    font-size: 12px;
    line-height: 1;
    font-weight: 400;
}
html[mode='light'] .mbh { background: #1f1b2e; color: #e6e3f0; }

.mbh a { color: inherit; text-decoration: none; }
.mbh svg { display: inline-block; vertical-align: middle; flex-shrink: 0; }

.mbh-inner {
    height: 100%;
    display: flex;
    align-items: stretch;
    justify-content: space-between;
    padding: 0 8px;
    gap: 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}
.mbh-inner::-webkit-scrollbar { display: none; }

.mbh-section {
    display: flex;
    align-items: stretch;
    gap: 0;
    flex-shrink: 0;
}

.mbh-brand {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(180deg, rgba(255,255,255,.04) 0%, rgba(255,255,255,0) 100%);
    border-right: 1px solid rgba(255,255,255,.06);
}
.mbh-brand:hover { background: rgba(255,255,255,.06); color: #fff; }
.mbh-brand-text { font-size: 12px; letter-spacing: .02em; }

.mbh-divider {
    width: 1px;
    background: rgba(255,255,255,.06);
    margin: 0;
}

.mbh-item { display: flex; align-items: stretch; position: relative; }

.mbh-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 12px;
    color: #cfc9d7;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
    white-space: nowrap;
}
.mbh-link:hover { background: rgba(255,255,255,.06); color: #fff; }
.mbh-link-action { user-select: none; }

.mbh-text {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    line-height: 1;
}
.mbh-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8a85a0;
    font-weight: 600;
}
.mbh-value {
    font-size: 12px;
    font-weight: 500;
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.mbh-id {
    font-size: 10px;
    color: #8a85a0;
    font-weight: 400;
}

/* Submenu (hover-open) */
.mbh-dropdown .mbh-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 240px;
    background: #1a1626;
    border: 1px solid rgba(255,255,255,.08);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 12px 32px rgba(0,0,0,.45);
    padding: 6px 0;
    display: none;
    z-index: 1200;
}
.mbh-dropdown:hover > .mbh-submenu,
.mbh-dropdown:focus-within > .mbh-submenu { display: block; }
.mbh-submenu-wide { min-width: 360px; }

.mbh-submenu-header {
    padding: 8px 14px 6px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 4px;
}
.mbh-submenu-meta-label {
    font-size: 9px;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #8a85a0;
    font-weight: 600;
}
.mbh-submenu-meta {
    padding: 6px 14px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-top: 1px solid rgba(255,255,255,.06);
    margin-top: 4px;
}
.mbh-submenu-meta-value {
    font-size: 11px;
    color: #d4d0e0;
    word-break: break-all;
}

.mbh-submenu-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #cfc9d7;
    font-size: 12px;
    cursor: pointer;
    transition: background .12s ease, color .12s ease;
}
.mbh-submenu-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.mbh-submenu-item-action { user-select: none; }
.mbh-submenu-empty {
    padding: 14px 16px;
    color: #8a85a0;
    font-size: 11px;
    text-align: center;
}

.mbh-submenu-list {
    max-height: 50vh;
    overflow-y: auto;
}

.mbh-account-item {
    display: grid;
    grid-template-columns: 14px 14px minmax(0, 1fr) auto auto auto 12px;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #cfc9d7;
    font-size: 12px;
    border-left: 2px solid transparent;
    transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.mbh-account-item:hover {
    background: rgba(255,255,255,.05);
    color: #fff;
    border-left-color: rgba(255,255,255,.2);
}
.mbh-account-item.is-active {
    background: rgba(54,187,145,.08);
    border-left-color: var(--bs-success);
    color: #fff;
}
.mbh-account-marker {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: transparent;
}
.mbh-account-item.is-active .mbh-account-marker {
    background: var(--bs-success);
    box-shadow: 0 0 0 3px rgba(54,187,145,.18);
}
.mbh-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
}
.mbh-status-dot.dot-success   { background-color: var(--bs-success); }
.mbh-status-dot.dot-danger    { background-color: var(--bs-danger); }
.mbh-status-dot.dot-warning   { background-color: var(--bs-warning); }
.mbh-status-dot.dot-info      { background-color: var(--bs-info); }
.mbh-status-dot.dot-secondary { background-color: #6c757d; }

.mbh-account-id {
    font-weight: 500;
    color: inherit;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mbh-account-balance,
.mbh-account-platform,
.mbh-account-status-text {
    font-size: 10px;
    white-space: nowrap;
}

.mbh-impersonating-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0 10px;
    color: #ffb86b;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: rgba(255,184,107,.08);
    border-left: 1px solid rgba(255,184,107,.2);
    border-right: 1px solid rgba(255,184,107,.2);
}

/* Mobile: collapse the long labels, keep icons + active value visible */
@media (max-width: 767.98px) {
    :root { --mbh: 40px;}
    .kf-wrap {padding-bottom: var(--mob);}
    .mbh-label { display: none; }
    .mbh-link { padding: 0 8px; gap: 4px; }
    .mbh-brand-text { display: none; }
    .mbh-dropdown .mbh-submenu { right: 0; left: auto; }
    .mbh-account-item { grid-template-columns: 14px 14px minmax(0, 1fr) auto 12px; }
    .mbh-account-balance,
    .mbh-account-platform { display: none; }
}

/* ============================================================
   /new-challenge — fixed bottom checkout bar
   ============================================================ */
.nc-bottom-bar {
    background: var(--card-primary-background);
    border-top: 1px solid var(--border-color);
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25);
    z-index: 1030;
    padding-inline: 0;
}
.nc-bottom-bar .nc-bb-name {
    min-width: 0;
    max-width: 280px;
}
.nc-bottom-bar .nc-bb-name .text-truncate {
    max-width: 200px;
}
.nc-bottom-bar .nc-bb-cta {
    white-space: nowrap;
    padding-inline: 1.25rem;
}
.nc-bottom-bar .nc-bb-terms-row {
    border-bottom: 1px dashed rgba(255,255,255,0.06);
    padding-bottom: 0.5rem;
}
.nc-bottom-bar .nc-bb-terms-label {
    color: var(--bs-secondary-color, #adb5bd);
    cursor: pointer;
}
.nc-bottom-bar .nc-bb-terms-label a {
    color: inherit;
}
.nc-bottom-bar .nc-bb-terms-label.is-required {
    color: var(--bs-danger, #ff5b6b);
}
.nc-bottom-bar .nc-bb-terms-label.is-required .form-check-input {
    border-color: var(--bs-danger, #ff5b6b);
    box-shadow: 0 0 0 .15rem rgba(220, 53, 69, .15);
}
.nc-bottom-bar .nc-bb-terms-label.is-required a {
    color: var(--bs-danger, #ff5b6b);
}
/* Discount/point input-group valid/invalid state — text mesaji yerine
   sadece yesil/kirmizi border. Bootstrap'in default '.input-group
   .form-control.is-invalid' pattern'i kullanmiyoruz cunku class'i input-group
   container'ina toggle ediyoruz (input + button border'larinin tutarli renge
   donmesi icin). */
.nc-bottom-bar .nc-bb-input.is-invalid > .form-control,
.nc-bottom-bar .nc-bb-input.is-invalid > .btn {
    border-color: var(--bs-danger, #ff5b6b);
}
.nc-bottom-bar .nc-bb-input.is-invalid > .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(220, 53, 69, .15);
}
.nc-bottom-bar .nc-bb-input.is-valid > .form-control,
.nc-bottom-bar .nc-bb-input.is-valid > .btn {
    border-color: var(--bs-success, #23d18b);
}
.nc-bottom-bar .nc-bb-input.is-valid > .form-control:focus {
    box-shadow: 0 0 0 .2rem rgba(35, 209, 139, .15);
}
body.has-nc-bottom-bar {
    padding-bottom: 125px;
}
@media (max-width: 767.98px) {
    .nc-bottom-bar .nc-bb-name {
        max-width: 100%;
    }
    body.has-nc-bottom-bar {
        padding-bottom: 185px;
    }
}


/* ============================================================
   /new-challenge sayfasi LANDING-STYLE HEADER
   (sol logo - orta New Challenge basligi - sag auth/login)
   ============================================================ */
.nc-page-header {
    border-bottom: 1px solid var(--bs-border-color);
    background: var(--bs-body-bg);
    margin-bottom: 1rem;
}
.nc-page-header .kf-brand img {
    width: 40px;
    height: 40px;
    object-fit: contain;
}
.nc-page-header .menu-name {
    white-space: nowrap;
}
@media (max-width: 575.98px) {
    .nc-page-header h1 {
        font-size: 1rem;
    }
    .nc-page-header .menu-name {
        padding-left: .5rem;
        padding-right: .5rem;
        font-size: .875rem;
    }
}

/* ============================================================
   LOGIN/REGISTER POPUP (kf-auth-modal)
   - Two pill tabs (Login | Register)
   - Hosted from system/@components/popups/login-register-popup.php
   ============================================================ */
.kf-auth-modal .modal-content { border-radius: 14px; }
.kf-auth-modal .nav-pills.kf-auth-tabs {
    background: rgba(0,0,0,0.04);
    border-radius: 10px;
    padding: 4px;
    gap: 4px;
}
[mode="dark"] .kf-auth-modal .nav-pills.kf-auth-tabs {
    background: var(--body-bg);
}
.kf-auth-modal .nav-pills.kf-auth-tabs .nav-link {
    border-radius: 8px;
    font-weight: 500;
    padding: .5rem .75rem;
    justify-content: center;
}
.kf-auth-modal .nav-pills.kf-auth-tabs .nav-link.active {
    background: var(--bs-body-bg);
    color: var(--bs-body-color);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
[mode="dark"] .kf-auth-modal .nav-pills.kf-auth-tabs .nav-link.active {
    background: var(--card-primary-background);
}
/* ============================================================
   Settings → Social tab
============================================================ */
.kf-social-card { transition: box-shadow .2s ease, transform .2s ease; }
.kf-social-card:hover { transform: translateY(-1px); }
.kf-social-tick { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
.kf-social-tick[data-verified="0"] { color: var(--bs-secondary, #888); opacity: .5; }
.kf-social-tick[data-verified="1"] { color: #1d9bf0; opacity: 1; }
.kf-social-tick svg { display: block; }

/* Manager → Case Giveaway Conditions */
.giveaway-row .form-control,
.giveaway-row .form-select { font-size: .85rem; }

/* ── Quest Tree ──────────────────────────────────────────────────────────── */
body.qt-fullscreen { overflow: hidden; }
body.qt-fullscreen main.kf-wrap {
    margin-top: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
}
body.qt-fullscreen footer { display: none !important; }

.quest-tree-page {
    position: fixed;
    top: var(--header-height, 60px);
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(100vh - var(--header-height, 60px));
    height: calc(100dvh - var(--header-height, 60px));
    width: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: #06080d;
    z-index: 5;
}

body.ssb .quest-tree-page,
body.ssb.boxed .quest-tree-page {
    left: var(--sidebar-width, 0);
    width: calc(100% - var(--sidebar-width, 0px));
}
body.ssb.small .quest-tree-page {
    left: var(--sidebar-small-width, 80px);
    width: calc(100% - var(--sidebar-small-width, 80px));
}
body.sidebar-close .quest-tree-page {
    left: 0;
    width: 100%;
}

.quest-tree-header {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: rgba(8,12,22,0.92);
    backdrop-filter: blur(8px);
}

.quest-tree-header-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem 1.25rem;
}

#quest-tree-wrap {
    flex: 1 1 auto;
    position: relative;
    overflow: hidden;
    cursor: grab;
    min-height: 0;
}

#quest-tree-wrap.dragging { cursor: grabbing; }

.qt-canvas {
    position: absolute;
    inset: 0;
    display: block;
    touch-action: none;
}

.qt-loading {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    display: flex; align-items: center; gap: .5rem;
    color: #64748b;
    font-size: .9rem;
    pointer-events: none;
    z-index: 3;
}
.mobile-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1040;
    padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px));
    background: rgba(10, 12, 18, 0.92);
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-footer-inner {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 720px;
    margin: 0 auto;
}
.mobile-footer-action {
    flex: 0 0 auto;
}
.mobile-footer-action .btn {
    white-space: nowrap;
}
.mobile-footer-lp {
    flex: 1 1 auto;
    min-width: 0;
}
.mobile-footer-lp-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}
.mobile-footer-lp-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.7);
}
.mobile-footer-lp-value {
    font-size: 11px;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mobile-footer-lp-bar {
    position: relative;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.1);
    overflow: hidden;
}
.mobile-footer-lp-fill {
    height: 100%;
    background: linear-gradient(90deg, #ffd96a 0%, #ff9a3c 100%);
    border-radius: 999px;
    transition: width 0.4s ease;
}

/* >=991px'te gizle — masaüstünde header butonu yeterli */
@media (min-width: 991px) {
    .mobile-footer { display: none !important; }
}

@media (max-width: 768px) {
    .mobile-mask{
        margin-top: -200px;
        background-image: linear-gradient(#05191400, var(--body-bg) 30%, var(--body-bg));
        padding-top: 20px;
        border-radius: 25px 25px 0 0;
        position: relative;
        z-index: 1;
    }
    .fpy-15{
        padding-bottom: 5rem !important;
        padding-top: 6rem !important;
    }
}

@keyframes kfTopbarTicker_jqzyg14sn8 {
    0% { transform: translateY(0); }
    23.3333% { transform: translateY(0px); }
    33.3333% { transform: translateY(-40px); }
    56.6667% { transform: translateY(-40px); }
    66.6667% { transform: translateY(-80px); }
    90.0000% { transform: translateY(-80px); }
    100.0000% { transform: translateY(-120px); }
    100% { transform: translateY(-120px); }
  }
.card.active{
  position:relative;
  overflow:hidden;
}
.card.active:after {
  content: "";
  pointer-events: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border-radius: var(--border-radius);
  padding: 1px;
  background: linear-gradient(to bottom, transparent, var(--main-color));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}
    .master_edge_mask{
      inset: 0;
    pointer-events: none;
    mask-image: radial-gradient(105% 90% at 50% 67%, #ffffff 22%, rgb(255 255 255 / 0%) 53%, #ffffff00 80%);
    margin-top: -115px;
    }

    .country-list{
        width: auto;
        display: inline-block;
        }
        .inner-country-list{
            margin-bottom: 5px;
        }
            .inner-country-list img{
                    margin-right: 5px;
                    min-width: 60px;
                    width: 17%;
                    height: 50px;
                    min-height: 40px;
                    opacity: 0.4;
                    object-fit: cover;
                    border-radius: 5px;
                    background: #030013;
            }
    
            
 .world {
    position: absolute;
    top: 50px;
    transform: translate(-50%);
    left: 50%;
    width: 680px;
    height: 680px;
    border-radius: 50%;
    border: 1px solid rgba(226,232,255,.1);
    box-shadow: 0 56px 88px #e2e8ff1f inset;
    animation: world-rotate 600s linear infinite;
    background-image: var(--background-image);
    background-size: cover;
}

.world:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: rgba(226,232,255,.02)
}

.world-mask {
    position: absolute;
    width: 100%;
    height: 100%
}

.world-mask img {
    transform: translateY(560px);
    width: 557px;
    height: 432.5px;
    animation: world-gradient 15s linear infinite
}

.world-line {
    position: absolute
}

.world-line:nth-child(1) {
    width: 205.787px;
    height: 108.755px;
    left: 108.16px;
    top: -33.53px
}

.world-line:nth-child(2) {
    width: 195.409px;
    height: 145.604px;
    left: 254.52px;
    top: -10.47px
}

.world-line:nth-child(3) {
    width: 70.938px;
    height: 132.863px;
    left: 275.51px;
    top: .23px
}

.world-line:nth-child(4) {
    width: 277.752px;
    height: 111.434px;
    left: 15.09px;
    top: 77.65px
}

.world-line:nth-child(5) {
    width: 295.033px;
    height: 134.371px;
    left: 244.25px;
    top: 39.73px
}

.world-line:nth-child(6) {
    width: 151.797px;
    height: 154.094px;
    left: 205.17px;
    top: -9.93px
}

.world-line div {
    transform: translate(-100%);
    height: 100%;
    width: 100%;
    background-image: linear-gradient(to right,rgba(109,46,255,0) 56.77%,rgba(158,122,255,.35) 70.83%,rgba(254,139,187,.7) 84.9%,#ffbd7a 99.99%,rgba(255,189,122,0) 100%);
    animation: world-line 7s linear infinite
}

.world-line:nth-child(2) div,.world-line:nth-child(3) div,.world-line:nth-child(5) div {
    background-image: linear-gradient(to left,rgba(109,46,255,0) 56.77%,rgba(158,122,255,.35) 70.83%,rgba(254,139,187,.7) 84.9%,#ffbd7a 99.99%,rgba(255,189,122,0) 100%);
    transform: translate(300px);
    animation-name: world-line-reverse
}

.world-line:nth-child(1) div {
    animation-delay: .5s
}

.world-line:nth-child(2) div {
    animation-delay: 1s
}

.world-line:nth-child(3) div {
    animation-delay: 1.5s
}

.world-line:nth-child(4) div {
    animation-delay: 2s
}

.world-line:nth-child(5) div {
    animation-delay: 2.5s
}

.world-line:nth-child(6) div {
    animation-delay: 3s
}

@media (max-width: 996px) {
    
    .world {
        animation:none 0s ease 0s 1 normal none running;
        animation: initial
    }

    .world-mask img {
        animation: none 0s ease 0s 1 normal none running;
        animation: initial;
        transform: translateY(-100px)
    }

    .world-line div {
        animation: none 0s ease 0s 1 normal none running!important;
        animation: initial!important
    }
}

@keyframes world-gradient {
    0% {
        transform: translateZ(0) translateY(560px)
    }

    to {
        transform: translateZ(0) translateY(-560px)
    }
}

@keyframes world-line {
    0%,40.0001% {
        transform: translateZ(0) translate(-100%)
    }

    40% {
        transform: translateZ(0) translate(300px)
    }
}

@keyframes world-line-reverse {
    0%,40.0001% {
        transform: translateZ(0) translate(300px)
    }

    40% {
        transform: translateZ(0) translate(-100%)
    }
}

@keyframes world-rotate {
    to {
        transform: translateZ(0) translate(-50%) rotate(1turn)
    }
}
.world-mask{
  -webkit-mask-image: var(--background-image);
  mask-image: var(--background-image);
  -webkit-mask-size: cover;
  mask-size: cover;
}
.country-section{
  min-height: 600px;
  height: 600px;
  position: relative;
  width: 100%;
  z-index: 1;
  overflow: hidden;
}
.country-container{
  position: relative;
  z-index: 1;
}
.country-flags{
  position: absolute;
  width: 680px;
  height: 680px;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.country-flags img{
  width: 45px;
  border-radius: 5px;
}
.country-flags img:nth-child(1){
  position: absolute;
  top: 40%;
  left: -10px;
}
.country-flags img:nth-child(2){
  position: absolute;
  bottom: 30px;
  right: 45px;
}
.country-flags img:nth-child(3){
  position: absolute;
top: 115px;
right: 180px;
}
.country-flags img:nth-child(4){
  position: absolute;
  bottom: 90px;
  left: 60px;
}
.country-flags img:nth-child(5){
  position: absolute;
  top: 135px;
  left: 240px;
}
.country-flags img:nth-child(6){
  position: absolute;
  top: 150px;
  right: 100px;
}
.country-flags img:nth-child(8){
  position: absolute;
  top: 45px;
  right: 30%;
}
.country-flags img:nth-child(7){
  position: absolute;
  top: 50%;
  right: -65px;
}
.country-flags img:nth-child(9){
  position: absolute;
  top: 50%;
  right: -65px;
}
.country-flags img:nth-child(10){
  position: absolute;
  top: 50%;
  right: -65px;
}
.country-flags img:nth-child(11){
  position: absolute;
  top: 50%;
  right: -65px;
}
.country-flags img:nth-child(12){
  position: absolute;
  top: 50%;
  right: -65px;
}
.country-flags img:nth-child(13){
  position: absolute;
  top: 50%;
  right: -65px;
}
.country-heading{
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.mh-540{
  min-height: 540px;
  height: 540px;
}
.country-shadow{
  background: #000000;
  background: linear-gradient(0deg, var(--body-bg) 0%, var(--body-bg) 3%, rgba(0, 0, 0, 0) 100%);
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 205px;
  z-index: 2;
}

.affiliate-recurring {
    width: 360px;
    height: 404px;
    background: #0a0118
}

@media (max-width: 1248px) {
    .affiliate-recurring {
        width:358px
    }
}

.affiliate-recurring-inner {
  height: 194px;
  position: relative;
}
.affiliate-recurring-inner svg {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.affiliate-recurring-inner svg:hover{
    transform: translateY(-20px);
}
.affiliate-recurring .star-animation {
    width: 100%;
    height: 70%
}

.affiliate-recurring-light1,.affiliate-recurring-light2 {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0
}

.affiliate-recurring-light1 {
    mix-blend-mode: overlay;
    z-index: 2
}

.affiliate-recurring-light2 {
    z-index: 1
}

.affiliate-recurring-moneys {
    width: 172px;
    height: auto;
    position: absolute;
    top: 140px;
    left: 50%;
    transform: translate(-50%)
}

.affiliate-recurring-money1,.affiliate-recurring-money2,.affiliate-recurring-money3,.affiliate-recurring-money4 {
    position: absolute;
    height: auto;
    transform-origin: center
}

.affiliate-recurring-money1 {
  top: 64px;
  left: 5px;
  width: 138px;
  transform: rotate(-30deg);
}

.affiliate-recurring-money2 {
    width: 122px;
    top: 8px;
    left: 125px;
    transform: rotate(30deg)
}

.affiliate-recurring-money3 {
  top: 16px;
  left: -95px;
  width: 90px;
  transform: rotate(15deg);
  opacity: .8;
  filter: blur(2px);
}

.affiliate-recurring-money4 {
    width: 90px;
    top: 92px;
    left: 204px;
    transform: rotate(-15deg);
    opacity: .8;
    filter: blur(2px)
}

.trade_card_container {
    left: 1px;
    right: 1px;
    bottom: 1px;
    height: 250px;
    z-index: 1;
    overflow: hidden;
    position: absolute
}

.trade_card_container:before {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    content: "";
    height: 50px;
    border-radius: 20px;
    position: absolute;
    background: linear-gradient(transparent, var(--card-bg));
}

.trade_feature {
  z-index: 2;
    width: 50px;
    height: 50px;
    bottom: 40px;
    display: flex;
    place-items: center;
    border-radius: 50%;
    position: absolute;
    padding: 4px;
    box-sizing: border-box;
    left: calc(50% - 25px);
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .05), 0 0 0 1px hsla(0, 0%, 100%, .1), inset 0 0.5px 0 hsla(0, 0%, 100%, .5);
    background: hsla(0, 0%, 100%, .1);
    opacity: 0;
    transform: translate(0) scale(0);
    transition: opacity .2s ease-in-out, transform .4s cubic-bezier(.12,.8,.3,1.2);
}


.trade_feature[data-name=pips] {
    transition-delay: 0
}

.trade_feature[data-name=leverage] {
    transition-delay: .1s
}

.trade_feature[data-name=adyen] {
    transition-delay: .2s
}

.trade_card_container:hover .trade_feature {
    opacity: 1
}

.trade_card_container:hover .trade_feature[data-name=pips] {
    transform: translate(-80px,-80px) scale(1)
}

.trade_card_container:hover .trade_feature[data-name=leverage] {
    transform: translateY(-100px) scale(1)
}

.trade_card_container:hover .trade_feature[data-name=adyen] {
    transform: translate(80px,-80px) scale(1)
}

.trade_main {
  z-index: 3;
    width: 80px;
    bottom: 40px;
    left: calc(50% - 40px);
    text-align: center;
    color: var(--main-color);
    position: absolute;
  }

.styles_chip__bZ8zd {
    top: 6px;
    left: 6px;
    height: 12px;
    position: absolute
}

.trade_rings {
    z-index: 1;
    bottom: -140px;
    width: 400px;
    height: 400px;
    position: absolute;
    left: calc(50% - 200px)
}

.trade_ring {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    border-radius: 50%;
    background: var(--card-bg-2);
    box-shadow: 0 8px 16px -4px rgba(0,0,0,.25),0 4px 8px -2px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.2),inset 0 0 0 1px rgba(190,167,255,.2)
}

.trade_ring:first-child {
    animation: styles_pulse___yp6p 6s infinite
}

.trade_ring:nth-child(2) {
    animation: styles_pulse___yp6p 6s 2s infinite
}

.trade_ring:nth-child(3) {
    animation: styles_pulse___yp6p 6s 4s infinite
}

.trade_ring:nth-child(4) {
    animation: styles_pulse___yp6p 6s 6s infinite
}

@keyframes styles_pulse___yp6p {
    0% {
        transform: scale(.05);
        opacity: 0
    }

    50% {
        opacity: 1
    }

    to {
        transform: scale(1);
        opacity: 0
    }
}

.styles_container__zTR5b {
    left: 1px;
    right: 1px;
    top: 1px;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    height: 280px;
    display: grid;
    overflow: hidden;
    position: absolute;
    align-items: center;
    justify-items: center;
    place-items: center
}

.styles_container__zTR5b:before {
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    content: "";
    height: 50px;
    border-radius: 20px;
    position: absolute;
    background: linear-gradient(transparent,#010314)
}

.styles_dial__GKlj9 {
    --size: 150px;
    width: 150px;
    width: var(--size);
    height: 150px;
    height: var(--size);
    border-radius: 50%;
    position: relative;
    background: linear-gradient(180deg,rgba(48,39,85,.8),rgba(10,6,34,.8));
    box-shadow: 0 0 100px #211a40,0 8px 16px -4px rgba(0,0,0,.8),0 4px 8px -2px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.9),inset 0 0 0 1px rgba(190,167,255,.24)
}
.trade_card{
  height: 160px;
}
  
 
.desktop-view {
    justify-content: center;
    align-items: flex-end;
    min-height: 100%;
    position: relative;
    z-index: 0;
    max-height: 500px;
    margin-top: -50px;
    font-size: .65vw;
    border-radius: var(--border-radius);
    border-bottom-right-radius: 0;
    display: flex;
    overflow: hidden;
  }
  .join_discord_container {
    position: relative;
    height:130px;
  }
  .join_discord {
    position: absolute;
    bottom: -100px;
    transform: rotate(-20deg);
    color: var(--card-bg-2);
    right: -100px;
  }
  @keyframes orbit-middle-rotate {
    0% {
      transform: rotate(110deg) translateZ(0px);
    }
    100% {
      transform: rotate(-110deg) translateZ(0px);
    }
  }
  @keyframes orbit-top-rotate {
    0% {
      transform: rotate(-100deg) translateZ(0px);
    }
    100% {
      transform: rotate(100deg) translateZ(0px);
    }
  }
  
  .platform_top_orbit {
    transform: rotate(-50deg) translateZ(0px);
    animation: orbit-top-rotate 8s linear infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  .platform_middle_orbit {
    animation: orbit-middle-rotate 8s linear infinite;
    animation-direction: normal;
    animation-fill-mode: forwards;
  }
  
  .platform_assets {
    height: 100%;
      width: 50%;
      position: relative;
  }
  
  @media (max-width: 768px) {
      .platform_assets {
          height:200px
      }
  }
  
  .platform_global_container {
      margin-top: var(--token-24);
      flex: 1 1;
      height: 100%;
      position: relative
  }
  
  @media (max-width: 768px) {
      .platform_global_container {
          height:175px
      }
  }
  
  .platform_orbit_container {
      position: absolute;
      width: 600px;
      height: 600px;
      left: 65%;
      top: 5%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
  }
  
  @media (max-width: 768px) {
      .platform_orbit_container {
          transform:translateX(-50%) rotate(15deg)
      }
  }
  
  .platform_top_orbit {
      height: 100%;
      position: absolute;
      width: 100%;
      top: 0
  }
  
  .platform_top_container {
      position: absolute;
      border: 1px solid hsla(0,0%,100%,.15);
      height: 100%;
      width: 100%;
      border-radius: 100%;
      background: var(--card-bg-2);
      will-change: transform
  }
  
  .platform_middle_orbit {
      height: 100%;
      position: absolute;
      width: 100%;
      top: 0
  }
  
  .platform_middle_container {
      position: absolute;
      border: 1px solid hsla(0,0%,100%,.15);
      height: 75%;
      width: 75%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 100%;
      background: var(--card-bg-2);
      will-change: transform
  }
  
  .platform_bottom_orbit {
      height: 100%;
      position: absolute;
      width: 100%;
      top: 0
  }
  
  .platform_bottom_container {
      position: absolute;
      border: 1px solid hsla(0,0%,100%,.15);
      height: 50%;
      width: 50%;
      top: 50%;
      left: 50%;
      transform: translateX(-50%) translateY(-50%);
      border-radius: 100%;
      background: var(--card-bg-2);
      will-change: transform
  }
  
  .platform_logo {
      position: absolute;
      top: calc(-1 * 1.6rem - 0.2rem);
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 60px;
      padding: 6px;
      border-radius: 100%;
      box-shadow: 0 0 0 2px rgba(0, 0, 0, .05), 0 0 0 1px hsla(0, 0%, 100%, .1), inset 0 0.5px 0 hsla(0, 0%, 100%, .5);
      background: hsla(0, 0%, 100%, .1);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(5px);
      display: flex;
      align-items: center;
      justify-content: center;
  }
.live-support-grid img:hover{
    scale: 1.2;
  }
                            .live-support {
                                width: 360px;
                                height: 404px;
                                background: #0a0118;
                                position: relative;
                                overflow: hidden
                            }

                            @media (max-width: 1248px) {
                                .live-support {
                                    width:358px
                                }
                            }

                            .live-support-inner {
                                height: 194px;
                                position: relative;
                            }

                            .live-support .star-animation {
                                width: 100%;
                                height: 70%
                            }

                            .live-support-light1,.live-support-light2 {
                                position: absolute;
                                width: 100%;
                                height: 100%;
                                top: 0;
                                left: 0
                            }

                            .live-support-light1 {
                                mix-blend-mode: overlay;
                                z-index: 2
                            }

                            .live-support-light2 {
                                z-index: 1
                            }

                            .live-support-grid {
                              position: absolute;
                                left: 50%;
                            transform: translate(-50%);
                            }

                            .live-support-logo {
                                position: absolute;
                                top: 116px;
                                left: 50%;
                                transform: translate(-50%);
                                width: 64px;
                                height: 64px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                border-radius: 99px;
                                background: radial-gradient(72.06% 98.28% at 50% 89.22%,rgba(133,102,255,.2) 0%,rgba(133,102,255,.04) 100%),rgba(186,179,255,.04);
                                box-shadow: inset 0 0 0 1.5px #8566ff3d,0 4px 4px #00000040,0 0 16px 2px #bab3ff29 inset
                            }

                            .live-support-logo img {
                                width: 40px;
                                height: auto
                            }

                            .live-support-img1,.live-support-img2,.live-support-img3,.live-support-img4,.live-support-img5 {
                                position: absolute;
                                width: 32px;
                                height: 32px;
                                z-index: 1;
                            }

                            .live-support-img1 {
                                top: 3px;
                                left: 188px
                            }

                            .live-support-img2 {
                              top: 109px;
                              left: 50px;
                            }

                            .live-support-img3 {
                              top: 213px;
                              left: 81px;
                            }

                            .live-support-img4 {
                                top: 216px;
                                left: 220px
                            }

                            .live-support-img5 {
                              top: 137px;
                              left: 230px;
                            }
          
        .tpl .swiper-slide {
            height: 205px !important;
                }
       .infinite-wrapper {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 10px;
margin: 0 -20px;
}

.infinite-row {
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.infinite-track {
  display: flex;
  min-width: 200%; /* genişliğin en az 2 katı */
  animation: scroll-left 20s linear infinite;
}

.infinite-row:nth-child(2) .infinite-track {
  animation-duration: 25s;
}
.infinite-row:nth-child(3) .infinite-track {
  animation-duration: 18s;
}

.badge-item {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 16px;
  margin-right: 15px;
  font-weight: bold;
  color: #000;
  white-space: nowrap;
}

.badge-item img {
  height: 24px;
  width: 24px;
  margin-right: 8px;
}

@keyframes scroll-left {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.testimonial-video-card{
    position: relative;
    overflow: hidden;
    background: #0e0b1f;
}
.testimonial-video-card > picture{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.testimonial-video-bg{
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.testimonial-video-card > .row,
.testimonial-video-card > p{
    position: relative;
    z-index: 2;
}
    .top-shadow{
        background-image: linear-gradient(#181529, #18152985 34%, #05191400);
        left: 0;
        width: 100%;
        height: 80px;
        position: absolute;
        top: 0;
        z-index: 1;
        }
        .bottom-shadow{
        background-image: linear-gradient(#05191400, var(--card-bg-2) 82%, var(--card-bg-2));
        left: 0;
        width: 100%;
        height: 75%;
        position: absolute;
        bottom: 0;
        z-index: 1;
        display: flex;
        padding: 20px;
        align-items: end;
        font-weight: 800;
        }
        .mh-300{
            min-height: 300px;
        }
        .mh-100{
            min-height: 100%;
        }
        .mini_t{
                   min-height: 25px;
        display: block;
        margin-bottom: .5rem;
        }
        .pricing_table_row{
          margin-right: -20px;
      }
      
      
    @media (max-width: 768px) {
      .pricing_table_row {
        margin-left: calc(var(--gutter-x) * -2.9);
        margin-right: calc(var(--gutter-x) * -2.9);
    }
    li .v_change{
      opacity: 1 !important;
    }
    }

      
.pricing_table .price{
    letter-spacing: -.01em;
    font-size: 2.1rem;
    font-weight: 500;
    line-height: 1.15;
}
    .pricing_table .card{
        overflow: visible;
    }
    .pricing_table .card .badge{
      position: absolute;
    right: 10px;
    top: 10px;
    display: inline-block;
    }


.cell {
  flex-direction: column;
  min-height: 55px;
  display: flex;
  width: 100%;
  text-align: left;
  align-items: flex-start;
  justify-content: space-around;
  position: relative;
}
.cell-h {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    min-height: 6rem;
    padding-left: .75rem;
    padding-right: .75rem;
    display: flex;
}
.info_sidebar .cell{
  border-bottom: 1px dashed #fff3;
}
.info_sidebar .cell:last-child{
  border-bottom: none;
}
.info_sidebar .odd{
    position: relative;
    background: transparent;
}
.column .cell{
    align-items: center;
    width: 100%;
}
.column .odd{
  background-color: #0000001a;
}
.v_change{
  padding: 5px;
  opacity: 0;
  transition: opacity 0.4s ease; 

}
.pricing_inner_col{
  background: var(--card-secondary-background);
    border-radius: var(--border-radius);
    outline-color: var(--border-color);
    outline-offset: -1px;
    border-style: none;
    outline-width: 1px;
    outline-style: solid;
}
.swiper-slide.active .pricing_inner_col{
  background: var(--card-secondary-background);
    border-radius: var(--border-radius);
    background-image: linear-gradient(var(--main-color), transparent 95%, transparent 80%, transparent);
    border-radius: var(--border-radius);
    outline-color: var(--main-color);
    outline-offset: -1px;
    border-style: none;
    outline-width: 1px;
    outline-style: solid;
}
li:hover .v_change{
  opacity: 1;
}
  .swiper-slide {
    height: auto;
  }
  .star-container {
          position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ac9cfd;
    background: linear-gradient(90deg, var(--main-color) 0%, var(--main-color) 50%, var(--kf-2) 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: sans-serif;
    }

    .shooting-star {
      position: absolute;
      width: 14px;
      height: 14px;
      background: gold;
      clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
      opacity: 0;
    }

    .star1 { animation: moveStar 1.8s linear infinite; }
    .star2 { animation: moveStar 2.2s linear infinite; animation-delay: 0.5s; }
    .star3 { animation: moveStar 2.6s linear infinite; animation-delay: 1s; }
    .star4 { animation: moveStar 3.2s linear infinite; animation-delay: 1.5s; }

    @keyframes moveStar {
      0% {
        top: -20px;
        left: -20px;
        opacity: 0;
        transform: scale(0.5) rotate(0deg);
      }
      20% {
        opacity: 1;
      }
      100% {
        top: 80px;
        left: 80px;
        opacity: 0;
        transform: scale(1.2) rotate(180deg);
      }
    }

    .star-text {
      position: absolute;
      color: white;
      font-weight: bold;
      font-size: 16px;
      z-index: 2;
    }
    .infinite-wrapper {
        overflow: hidden;
        display: flex;
        flex-direction: column;
        gap: 10px;
      margin: 0 -20px;
      }
      
      .infinite-row {
        overflow: hidden;
        white-space: nowrap;
        position: relative;
      }
      
      .infinite-track {
        display: flex;
        min-width: 200%; /* genişliğin en az 2 katı */
        animation: scroll-left 20s linear infinite;
      }
      
      .infinite-row:nth-child(2) .infinite-track {
        animation-duration: 25s;
      }
      .infinite-row:nth-child(3) .infinite-track {
        animation-duration: 18s;
      }
      
      .badge-item {
        display: inline-flex;
        align-items: center;
        border-radius: 999px;
        padding: 8px 16px;
        margin-right: 15px;
        font-weight: bold;
        color: #000;
        white-space: nowrap;
      }
      
      .badge-item img {
        height: 24px;
        width: 24px;
        margin-right: 8px;
      }
      
      @keyframes scroll-left {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
      }

.pricing_header_tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card-primary-background);
  cursor: pointer;
  transition: all .2s ease;
}
.pricing_header_tab:hover:not([disabled]) {
  border-color: var(--primary);
}
.pricing_header_tab.active {
  border-color: var(--primary);
  background: var(--main-color);
  color: var(--body-bg);
  box-shadow: 0 0 30px 9px #a999fc3d;
}
.pricing_header_tab[disabled] {
  opacity: .5;
  cursor: not-allowed;
}

.rules_overlay {
  position: fixed;
  inset: 0;
  z-index: 999999999999999999;
  border-radius: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
      background: var(--body-bg);
}
@keyframes rulesIn {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}
.rules_overlay_inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 40px 20px 60px;
  position: relative;
  z-index: 1;
}
.rules_overlay_header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 28px;
}
.rules_overlay_header .btn-close {
  filter: var(--btn-close-filter, none);
  font-size: 1.1rem;
  margin-top: 4px;
}
.rules_tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  padding: 0;
  border: none;
  margin-bottom: 32px;
}
.rules_tabs .rules_tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--bg2);
  color: var(--text);
  cursor: pointer;
  font-weight: 500;
  font-size: .95rem;
  transition: all .2s ease;
}
.rules_tabs .rules_tab:hover {
  border-color: var(--primary);
}
.rules_tabs .rules_tab.active {
  border-color: var(--primary);
  background: var(--main-color);
  color: var(--body-bg);
  box-shadow: 0 0 30px 9px #a999fc3d;
}
.rules_grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 576px) {
  .rules_grid { grid-template-columns: 1fr; }
}
.rules_card {
  border: 1px solid var(--border-color);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    background: #0a0819d1;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    transition: border-color .2s ease;
}
.rules_card:hover {
  border-color: #ffffff30;
}
.rules_card .rules_card_icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}
.rules_card .rules_card_icon svg {
  width: 24px;
  height: 24px;
}
.rules_card .rules_card_label {
  font-weight: 600;
  font-size: .95rem;
  margin-bottom: 2px;
}
.rules_card .rules_card_value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--primary);
  margin-bottom: 6px;
}
.rules_card .rules_card_desc {
  font-size: .82rem;
  color: #e5e5e5;
  line-height: 1.4;
}
.rc_icon_blue { background: rgba(59,130,246,.15); }
.rc_icon_blue svg { color: #3b82f6; }
.rc_icon_orange { background: rgba(245,158,11,.15); }
.rc_icon_orange svg { color: #f59e0b; }
.rc_icon_purple { background: rgba(139,92,246,.15); }
.rc_icon_purple svg { color: #8b5cf6; }
.rc_icon_green { background: rgba(34,197,94,.15); }
.rc_icon_green svg { color: #22c55e; }
.rc_icon_red { background: rgba(239,68,68,.15); }
.rc_icon_red svg { color: #ef4444; }
.rc_icon_yellow { background: rgba(234,179,8,.15); }
.rc_icon_yellow svg { color: #eab308; }
.rc_icon_teal { background: rgba(20,184,166,.15); }
.rc_icon_teal svg { color: #14b8a6; }
.cmp_wrap {
  border: 1px solid var(--border-color);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
  background: #0a0819d1;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: border-color .2s ease;
}
.cmp_header {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  border-bottom: 1px solid var(--border);
}
.cmp_h_label {
  display: flex;
  align-items: flex-end;
  padding: 20px 24px;
  font-weight: 700;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-muted, #888);
}
.cmp_h_platform {
  display: flex;
  align-items: stretch;
  justify-content: center;
  padding: 16px 12px;
}
.cmp_h_platform:last-child {
  background: rgba(var(--main-rgb, 120,100,255), .08);
}
.cmp_featured { position: relative; }
.cmp_badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--main-color);
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .8px;
  padding: 3px 12px;
  border-radius: 50px;
  white-space: nowrap;
}
.cmp_p_icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmp_p_bybit {
  background: rgba(245,158,11,.12);
  color: #f59e0b;
}
.cmp_p_cleo {
  background: rgba(34,197,94,.12);
  color: #22c55e;
}
.cmp_p_name {
  font-weight: 700;
  font-size: 1rem;
}
.cmp_body {}
.cmp_row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  transition: background .15s;
}
.cmp_row:nth-child(even) { background: rgba(var(--bg2-rgb, 30,30,40), .35); }
.cmp_r_label {
  display: flex;
  align-items: center;
  padding: 16px 24px;
  font-weight: 600;
  font-size: .9rem;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}
.cmp_r_val {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 12px;
  font-size: .9rem;
  font-weight: 500;
  text-align: center;
  border-bottom: 1px solid var(--border);
  gap: 2px;
}
.cmp_r_val:last-child {
  background: #1e1b365c;
}
.cmp_sub {
  display: block;
  font-size: .72rem;
  font-weight: 400;
  color: var(--text-muted, #888);
  margin-top: 1px;
}
.cmp_up, .cmp_down {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 2px;
}
.cmp_up { color: #22c55e; }
.cmp_down { color: #ef4444; }
.cmp_row:nth-child(even) {
  background: rgba(var(--main-rgb, 120,100,255), .13);
}
.cmp_row:last-child .cmp_r_label,
.cmp_row:last-child .cmp_r_val { border-bottom: none; }
.badge_diff {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 50px;
  font-size: .82rem;
  font-weight: 600;
}
.badge_easy {
  background: rgba(34,197,94,.15);
  color: #22c55e;
}
.badge_medium {
  background: rgba(245,158,11,.15);
  color: #f59e0b;
}
.badge_hard {
  background: rgba(239,68,68,.15);
  color: #ef4444;
}
@media (max-width: 576px) {
  .cmp_header { grid-template-columns: 1fr 1fr; }
  .cmp_h_label { display: none; }
  .cmp_row {
    grid-template-columns: 1fr 1fr;
  }
  .cmp_r_label {
    grid-column: 1 / -1;
    padding: 3px 10px 3px;
    font-size: .75rem;
    background: #0000002b;
    align-items: center;
    text-align: center;
    justify-content: center;
    color: #fff;
    text-transform: uppercase;
    letter-spacing: .5px;
    border-bottom: none;
  }
  .cmp_r_val {
    padding: 8px 16px 12px;
    font-size: .85rem;
  }
}

@media (max-width: 991px) {
  #pricing_summary.stuck {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999999999999999999;
    border-radius: 0;
    border: none;
    border-top: 1px solid var(--border);
    margin: 0;
    box-shadow: 0 -4px 20px rgba(0,0,0,.25);
  }
}

[data="f_lighting"] > canvas ~ * {
  position: relative;
  z-index: 1;
}
.pricing_header {
  display: inline-flex;
  gap: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 16px;
  padding: 6px;
  margin: 0 auto 24px;
}
.pricing_table nav {
  text-align: center;
}
.pricing_content .row[role="tablist"] {
  justify-content: center;
}
.pricing_header_tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  border: none;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary, #94a3b8);
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
  position: relative;
}
.pricing_header_tab:hover {
  color: var(--text, #fff);
  background: rgba(255,255,255,0.06);
}
.pricing_header_tab.active {
  background: #fff;
  color: #111;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}
.pricing_header_tab.active .avatar {
  background: var(--card-primary-background);
  color: #fff;
}
.pricing_header_tab .badge {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
}
.card-dot-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  pointer-events: none;
  z-index: 0;
}
[data="f_lighting"] > picture {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100%;
  height: 100%;
}
[data="f_lighting"] > picture img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.12;
  pointer-events: none;
}
/* ============================================================
   Klein Kasa Sistemi v3 ? multi-reward card flip
   PDF references: �3.2 near-miss, �3.3 LDW, �3.6 multi-card,
                   �4.4 anchor/filler, �10.3 Lucky Charm/Reroll
   ============================================================ */

/* ---------- Page / Stage ---------- */
div.case-page {
    position: relative;
    color: var(--text-color);
}

/* Stage is the positioning context for the canvas + overlays */
.case-stage {
    position: relative;
    width: 100%;
    overflow: visible;
    isolation: isolate;
}


/* Video elements inside <canvas> are fallback content ? browser hides them automatically
   when canvas is supported. No extra CSS needed; they are drawn via drawImage() by JS. */

/* ---------- Canvas �st� UI overlay ---------- */
.case-ui-overlay {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}

.case-ui-overlay > * { pointer-events: auto; }

/* T�m ara�lar tek bir blokta ? bottom 100px'e sabit, yatayda ortal? */
.case-tools {
    position: absolute;
    bottom: 100px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: min(480px, 90vw);
    text-align: center;
}

/* Back linki ? case-name'in hemen �st�nde, case-tools i�inde */
.case-tools .case-back a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,.55);
    text-decoration: none;
    font-size: 13px;
}
.case-tools .case-back a:hover { color: #fff; }

/* Shake animation applied to .case-stage on ultra/legendary flip */
.case-stage.case-shake { animation: case-shake .55s cubic-bezier(.36,.07,.19,.97); }

/* ---------- Container (pools section) ---------- */
.case-container {
    position: relative;
    z-index: 3;
    padding: 20px 24px 60px;
    max-width: 1280px;
    margin: 0 auto;
}

/* Overlay i�indeki UI elementleri */
.case-name {
    font-size: 24px;
    font-weight: 700;
    margin: 0;
    text-align: center;
}

.case-price {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--main-color);
    font-weight: 600;
    font-size: 14px;
    margin: 0;
}

.case-drop-info { margin: 0; }

.case-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.case-spin-btn,
.case-buy-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 28px;
    border: none;
    border-radius: var(--button-radius);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    transition: transform .12s ease, box-shadow .2s ease;
    color: #fff;
}

.case-spin-btn { background: linear-gradient(180deg, #ffc83d, #f59e0b); color: #1a1408; box-shadow: 0 8px 24px -8px rgba(245,158,11,.6); }
.case-buy-btn  { background: linear-gradient(180deg, var(--main-color), var(--secondary-color)); }

.case-spin-btn:hover,
.case-buy-btn:hover { transform: translateY(-1px); }

.case-addon-status {
    display: flex;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 6px 0 14px;
}

.case-addon-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.12);
}
.case-addon-lucky  { color: #ffd54a; border-color: rgba(255,213,74,.3); }
.case-addon-reroll { color: #4dd0e1; border-color: rgba(77,208,225,.3); }

/* ---------- Header ? Back to Cases link ---------- */
.kf-case-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-secondary);
    text-decoration: none;
    margin-bottom: 2px;
    opacity: .75;
    transition: opacity .2s;
}
.kf-case-back-link:hover { opacity: 1; color: var(--text-color); }

/* ---------- LP Bar (Near-Miss UI, PDF �3.2) ---------- */

/* Header LP bar ? navbar i�indeki kompakt versiyon */
.header-lp-bar-wrap {
    width: 180px;
    padding: 6px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.05);
    border: 1px solid rgba(255,255,255,.08);
}

.header-lp-bar-head {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    margin-bottom: 5px;
    color: var(--text-secondary);
}

.header-lp-bar-value { font-weight: 600; color: var(--text-color); }

.header-lp-bar {
    position: relative;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}

.case-lp-bar {
    position: relative;
    width: 100%;
    height: 10px;
    background: rgba(255,255,255,.08);
    border-radius: 999px;
    overflow: hidden;
}

.case-lp-bar-fill {
    position: absolute;
    inset: 0 auto 0 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #4dd0e1 0%, #66bb6a 100%);
    border-radius: 999px;
    transition: width 1.2s cubic-bezier(.18,1,.32,1), background .4s ease, box-shadow .4s ease;
}

.case-lp-bar-marker {
    position: absolute;
    top: -3px;
    width: 4px;
    height: 16px;
    background: #fff;
    border-radius: 2px;
    box-shadow: 0 0 8px rgba(255,255,255,.5);
    pointer-events: none;
    transition: left 1.2s cubic-bezier(.18,1,.32,1);
}

.case-lp-bar-hint {
    margin: 8px 0 0;
    font-size: 12px;
    text-align: center;
    color: #ffb74d;
    font-weight: 600;
    animation: case-lp-hint-pulse 1.4s ease-in-out infinite;
}

/* Near-miss states */
.case-lp-bar-wrap.is-near-miss .case-lp-bar-fill,
.header-lp-bar-wrap.is-near-miss .case-lp-bar-fill {
    background: linear-gradient(90deg, #ffb74d 0%, #ff8a65 100%);
    box-shadow: 0 0 18px rgba(255,140,80,.6);
    animation: case-lp-fill-pulse 1.2s ease-in-out infinite;
}
.case-lp-bar-wrap.is-very-close .case-lp-bar-fill,
.header-lp-bar-wrap.is-very-close .case-lp-bar-fill {
    background: linear-gradient(90deg, #ff5252 0%, #ff1744 100%);
    box-shadow: 0 0 26px rgba(255,23,68,.75);
    animation: case-lp-fill-pulse .7s ease-in-out infinite;
}
.case-lp-bar-wrap.is-complete .case-lp-bar-fill,
.header-lp-bar-wrap.is-complete .case-lp-bar-fill {
    background: linear-gradient(90deg, #ffd54a 0%, #ffeb3b 50%, #ffd54a 100%);
    box-shadow: 0 0 32px rgba(255,235,59,.85);
    animation: case-lp-fill-flash .9s ease-in-out infinite;
}

@keyframes case-lp-fill-pulse {
    0%,100% { filter: brightness(1); }
    50%     { filter: brightness(1.35); }
}
@keyframes case-lp-fill-flash {
    0%,100% { filter: brightness(1); }
    50%     { filter: brightness(1.6); }
}
@keyframes case-lp-hint-pulse {
    0%,100% { opacity: .7; transform: translateY(0); }
    50%     { opacity: 1;  transform: translateY(-1px); }
}

/* ---------- Kart aksiyon butonlar? ? stage i�inde alt orta ---------- */
.case-cards-actions {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    z-index: 12;
    opacity: 0;
    transition: opacity .4s ease, transform .4s ease;
    pointer-events: none;
}
.case-cards-actions.is-visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.case-reveal-all-btn,
.case-reroll-btn,
.case-close-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Kartlar canvas �zerinde �izilir ? HTML card kurallar? kald?r?ld? */

@keyframes case-burst {
    0%   { opacity: 0; transform: scale(.6); }
    20%  { opacity: 1; }
    100% { opacity: 0; transform: scale(2.4); }
}

@keyframes case-shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d( 2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d( 4px, 0, 0); }
}

/* ---------- Confetti ---------- */
.case-confetti {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 5;
}
.case-confetti-piece {
    position: absolute;
    width: 8px;
    height: 12px;
    border-radius: 2px;
    will-change: transform, opacity;
    animation: case-confetti-fall var(--dur, 1.6s) cubic-bezier(.2,.7,.4,1) forwards;
}

@keyframes case-confetti-fall {
    0%   { transform: translate3d(0, -10vh, 0) rotate(0deg);   opacity: 1; }
    100% { transform: translate3d(var(--dx,0), 110vh, 0) rotate(var(--rot, 540deg)); opacity: 0; }
}

/* ---------- Pools (Case Contains) ---------- */
.case-pools { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; }

.case-pool { background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); border-radius: 14px; padding: 16px; }
.case-pool[data-empty="1"] { display: none; }

.case-pool-title { font-size: 15px; font-weight: 700; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.case-pool-badge { padding: 3px 8px; border-radius: 6px; font-size: 10px; letter-spacing: .8px; font-weight: 700; }
.case-pool-badge-elite    { background: linear-gradient(180deg, #ffd54a, #f59e0b); color: #1a1408; }
.case-pool-badge-standard { background: rgba(255,255,255,.12); color: #ddd; }

.case-pool-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.case-item {
    position: relative;
    border-radius: 12px;
    background: var(--card-secondary-background);
    border: 1px solid var(--card-secondary-border);
    padding: 12px;
    text-align: center;
    transition: transform .2s ease, box-shadow .2s ease;
}
.case-item:hover { transform: translateY(-2px); }

.case-item-img {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background: rgba(255,255,255,.03);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    overflow: hidden;
}
.case-item-img img { width: 80%; height: 80%; object-fit: contain; }

.case-item-info { display: flex; flex-direction: column; gap: 2px; }
.case-item-name { font-size: 12px; font-weight: 600; line-height: 1.3; }
.case-item-pct  { font-size: 11px; color: var(--text-secondary); }

.case-item-elite { box-shadow: inset 0 0 0 1px rgba(255,213,74,.35); }
.case-item.case-rarity-rare      .case-item-img { box-shadow: inset 0 0 12px rgba(77,208,225,.35); }
.case-item.case-rarity-epic      .case-item-img { box-shadow: inset 0 0 14px rgba(186,104,255,.45); }
.case-item.case-rarity-legendary .case-item-img { box-shadow: inset 0 0 18px rgba(255,213,74,.55); }
.case-item.case-rarity-ultra     .case-item-img { box-shadow: inset 0 0 20px rgba(255,87,87,.65); }

/* ---------- Pool list electric border overlay ----------
   CSS conic-gradient + @property --angle ile GPU-accelerated rotating border.
   SVG filter yok, JS animation yok - sifir CPU yuku, hic pixelation. */
@property --kf-angle {
    syntax: '<angle>';
    inherits: false;
    initial-value: 0deg;
}

.case-pool-overlay {
    position: absolute;
    pointer-events: none;
    z-index: 5;
    overflow: hidden;
    border-radius: 14px;
}

.kf-pool-frame {
    position: absolute;
    pointer-events: none;
    --el-color: rgba(200,200,210,0.55);
    --el-light: rgba(240,240,250,0.85);
    --kf-spin-dur: 4s;
}
.kf-pool-frame.rarity-common    { --el-color: rgba(200,200,210,0.55); --el-light: rgba(240,240,250,0.85); --kf-spin-dur: 8s; }
.kf-pool-frame.rarity-rare      { --el-color: #5cd0ff;                 --el-light: #c6f0ff;               --kf-spin-dur: 5s; }
.kf-pool-frame.rarity-epic      { --el-color: #c47cff;                 --el-light: #f2dcff;               --kf-spin-dur: 4s; }
.kf-pool-frame.rarity-legendary { --el-color: #ffc257;                 --el-light: #fff3cf;               --kf-spin-dur: 3.5s; }
.kf-pool-frame.rarity-titan     { --el-color: #ff5c5c;                 --el-light: #ffd5d5;               --kf-spin-dur: 2.5s; }

.kf-pool-frame .kf-fr-bg {
    position: absolute;
    inset: -3px;
    border-radius: 10px;
    background: linear-gradient(-30deg, var(--el-light), transparent 50%, var(--el-color));
    filter: blur(10px);
    opacity: .15;
}
.kf-pool-frame .kf-fr-glow2 {
    position: absolute;
    inset: 0;
    border: 1.5px solid var(--el-light);
    border-radius: 8px;
    filter: blur(3px);
    opacity: .30;
}
.kf-pool-frame .kf-fr-glow1 {
    position: absolute;
    inset: 0;
    border: 1.2px solid var(--el-color);
    border-radius: 8px;
    filter: blur(1px);
    opacity: .55;
}

/* Asil border - conic-gradient ile GPU accelerated rotating arc */
.kf-pool-frame .kf-fr-border {
    position: absolute;
    inset: 0;
    border-radius: 8px;
    padding: 1.6px;
    background: conic-gradient(
        from var(--kf-angle),
        transparent 0deg,
        var(--el-color) 30deg,
        var(--el-light) 50deg,
        var(--el-color) 70deg,
        transparent 110deg,
        transparent 180deg,
        var(--el-color) 210deg,
        var(--el-light) 230deg,
        var(--el-color) 250deg,
        transparent 290deg,
        transparent 360deg
    );
    -webkit-mask:
        linear-gradient(#000, #000) content-box,
        linear-gradient(#000, #000);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    filter: drop-shadow(0 0 2px var(--el-color));
    animation: kf-pool-spin var(--kf-spin-dur) linear infinite;
}

@keyframes kf-pool-spin {
    to { --kf-angle: 360deg; }
}

.kf-pool-frame.rarity-common .kf-fr-border {
    filter: none;
    opacity: .55;
}
.kf-pool-frame.rarity-common .kf-fr-glow2 { opacity: .12; }
.kf-pool-frame.rarity-common .kf-fr-glow1 { opacity: .25; }
.kf-pool-frame.rarity-common .kf-fr-bg    { opacity: .05; filter: blur(8px); }

@supports not (background: conic-gradient(from var(--kf-angle), red, blue)) {
    .kf-pool-frame .kf-fr-border {
        background: none;
        border: 1.5px solid var(--el-color);
        padding: 0;
        animation: none;
    }
}

.case-divider { height: 1px; background: rgba(255,255,255,.08); margin: 24px 0; }

/* ---------- Responsive ---------- */
@media (max-width: 768px) {

    /* Mobile = swiper-like horizontal carousel */
    .case-cards-area {
        align-items: stretch;
        justify-content: flex-end;
        padding: 16px 0 24px;
    }
    .case-cards-grid {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: visible;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 14px;
        padding: 18px 28vw;
        margin-bottom: 16px;
        justify-content: flex-start;
    }
    .case-cards-grid::-webkit-scrollbar { display: none; }
    .case-card {
        width: 140px;
        height: 204px;
        flex: 0 0 auto;
        scroll-snap-align: center;
    }
    .case-card-front .case-card-img { width: 70px; height: 70px; }
    .case-cards-actions { padding: 0 16px; }
}

@media (max-width: 480px) {
    .case-card { width: 124px; height: 182px; }
    .case-cards-grid { padding: 18px 32vw; }
}

/* ============================================================
   Case mobil sticky footer (footer_case.php)
   Sol: Buy Now / Open Case � Sa?: Legacy Points
   >=991px'te gizlenir ? masa�st� canvas viewport'u serbest kal?r.
   ============================================================ */

?st� canvas viewport'u serbest kal?r.
   ============================================================ */