*{
    box-sizing:border-box;
}

:root {
    --blue-100: #d0e3f9;
    --blue-200: #a1c8f3;
    --blue-300: #72aced;
    --blue-400: #4391e7;
    --blue-500: #1475e1;
    --blue-600: #105eb4;
    --blue-700: #0c4687;
    --blue-800: #082f5a;
    --blue-900: #04172d;
    --red-100: #fbcfd8;
    --red-200: #f6a0b1;
    --red-300: #f2708a;
    --red-400: #ed4163;
    --red-500: #e9113c;
    --red-600: #ba0e30;
    --red-700: #8c0a24;
    --red-800: #5d0718;
    --red-900: #2f030c;
    --purple-100: #dcccff;
    --purple-200: #be8fff;
    --purple-300: #b061ff;
    --purple-400: #962eff;
    --purple-500: #9000ff;
    --purple-600: #7100c7;
    --purple-700: #590099;
    --purple-800: #2d004d;
    --purple-900: #1e0132;
    --green-100: #ccffcc;
    --green-200: #8fff8f;
    --green-300: #57ff57;
    --green-400: #1fff20;
    --green-500: #00e701;
    --green-600: #00b801;
    --green-700: #008a01;
    --green-800: #004d00;
    --green-900: #013e01;
    --yellow-100: #fff2dd;
    --yellow-200: #ffdeaa;
    --yellow-300: #ffcc7b;
    --yellow-400: #ffb949;
    --yellow-500: #ff9d00;
    --yellow-600: #cd7f01;
    --yellow-700: #9c6000;
    --yellow-800: #633d00;
    --yellow-900: #301d00;
    --grey-100: #d5dceb;
    --grey-200: #b1bad3;
    --grey-300: #557086;
    --grey-400: #2f4553;
    --grey-500: #213743;
    --grey-600: #1a2c38;
    --grey-700: #0f212e;
    --grey-800: #071d2a;
    --grey-900: #071824;
    --white: #fff;
    --black: #000;
    --neutral-black: #05080a;
    color: var(--grey-200);
    --shadows-sm: 0 1px 3px 0 rgba(0, 0, 0, .2), 0 1px 2px 0 rgba(0, 0, 0, .12);
    --shadows-md: 0 4px 6px -1px rgba(27, 23, 23, .2), 0 2px 4px -1px rgba(0, 0, 0, .12);
    --shadows-lg: 0 10px 15px -3px rgba(0, 0, 0, .2), 0 4px 6px -2px rgba(0, 0, 0, .1);
    --shadows-xl: 0 20px 25px -5px rgba(0, 0, 0, .2), 0 10px 10px -5px rgba(0, 0, 0, .08);
    --shadows-2xl: 0 25px 50px -12px rgba(0, 0, 0, .4);
    --shadows-inner: inset 0 2px 4px 0 rgba(0, 0, 0, .2);
    --shadow-inset: inset 0 1px rgba(255, 255, 255, .04);
    --btn-shadow: var(--shadows-sm), var(--shadow-inset);
    --shadow-button-sm: 0rem .0625rem .1875rem #00000033, 0rem .0625rem .125rem #0000001f;
    --border-thin: .0625rem;
    --border-light: .125rem;
    --border-medium: .25rem;
    --radius-none: 0;
    --radius-sm: .125rem;
    --radius-base: .25rem;
    --radius-md: .5rem;
    --radius-lg: 4rem;
    --border-radius-0-15: .15rem;
    --text-size-10xl: 7rem;
    --text-size-9xl: 6.25rem;
    --text-size-8xl: 5.5rem;
    --text-size-7xl-responsive-large: 5rem;
    --text-size-7xl: 4.75rem;
    --text-size-7xl-responsive-small: 4.5rem;
    --text-size-6xl-responsive-large: 4.25rem;
    --text-size-6xl: 4rem;
    --text-size-6xl-responsive-small: 3.75rem;
    --text-size-5xl-responsive-large: 3.5rem;
    --text-size-5xl: 3.25rem;
    --text-size-5xl-responsive-small: 3rem;
    --text-size-4xl-responsive-large: 2.75rem;
    --text-size-4xl: 2.5rem;
    --text-size-4xl-responsive-small: 2.25rem;
    --text-size-3xl-responsive-large: 2.25rem;
    --text-size-3xl: 2rem;
    --text-size-3xl-responsive-small: 1.75rem;
    --text-size-2xl-responsive-large: 2rem;
    --text-size-2xl: 1.75rem;
    --text-size-2xl-responsive-small: 1.5rem;
    --text-size-xl-responsive-large: 1.75rem;
    --text-size-xl: 1.5rem;
    --text-size-xl-responsive-small: 1.25rem;
    --text-size-lg-responsive-large: 1.5rem;
    --text-size-lg: 1.25rem;
    --text-size-lg-responsive-small: 1.125rem;
    --text-size-md-responsive-large: 1.25rem;
    --text-size-md: 1.125rem;
    --text-size-md-responsive-small: 1rem;
    --text-size-base-responsive-large: 1.125rem;
    --text-size-base: 1rem;
    --text-size-base-responsive-small: 1rem;
    --text-size-default-responsive-large: 1rem;
    --text-size-default: .875rem;
    --text-size-default-responsive-small: .875rem;
    --text-size-sm-responsive-large: .875rem;
    --text-size-sm: .75rem;
    --text-size-sm-responsive-small: .75rem;
    --text-size-xs-responsive-large: .75rem;
    --text-size-xs: .625rem;
    --text-size-default-fixed-responsive-small: .875rem;
    --input-color: var(--white);
    --input-background: var(--grey-700);
    --input-border: var(--grey-400);
    --input-placeholder: #566671;
    --input-hover-color: var(--white);
    --input-hover-border: var(--grey-300);
    --input-transition: var(--transition-medium);
    --input-font-weight: 600;
    --input-letter-spacing: 0;
    --input-border-radius: var(--radius-base);
    --input-border-width: 2px;
    --input-box-shadow: var(--shadows-sm);
    --input-button-divider: var(--grey-600);
    --label-font-size: var(--text-size-default);
    --label-color: var(--grey-200);
    --label-hover-color: var(--grey-100);
    --label-font-weight: 600;
    --label-letter-spacing: 0;
    --focus-outline-width: .125rem;
    --focus-outline-grey: var(--focus-outline-width) solid var(--grey-200);
    --focus-outline-white: var(--focus-outline-width) solid var(--white);
    --space-0: 0rem;
    --space-0-5: .125rem;
    --space-1: .25rem;
    --space-1-5: .375rem;
    --space-2: .5rem;
    --space-3: .75rem;
    --space-4: 1rem;
    --space-5: 1.25rem;
    --space-6: 1.5rem;
    --space-7: 1.75rem;
    --space-8: 2rem;
    --space-9: 2.25rem;
    --space-10: 2.5rem;
    --space-12: 3rem;
    --space-14: 3.5rem;
    --space-16: 4rem;
    --space-20: 5rem;
    --spacingEm-0-125: .125em;
    --spacingEm-0-25: .25em;
    --spacingEm-0-5: .5em;
    --spacingEm-0-75: .75em;
    --spacingEm-1: 1em;
    --spacingEm-1-25: 1.25em;
    --spacingEm-1-5: 1.5em;
    --spacingEm-1-75: 1.75em;
    --spacingEm-2: 2em;
    --spacingEm-2-5: 2.5em;
    --spacingEm-3: 3em;
    --spacingEm-3-5: 3.5em;
    --spacingEm-4: 4em;
    --spacingEm-4-5: 4.5em;
    --spacingEm-5: 5em;
    --transition-fast: .2s;
    --transition-medium: .25s;
    --transition-slow: .35s;
    --scrollbar-size: 6px;
    --mobile-footer-height: 68px;
    --header-height: 60px;
    --radio-img: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTQsMUMyLjMsMSwxLDIuMywxLDRzMS4zLDMsMywzczMtMS4zLDMtM1M1LjcsMSw0LDF6Ii8+DQo8L3N2Zz4NCg==);
    --checkbox-img: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjwhLS0gR2VuZXJhdG9yOiBBZG9iZSBJbGx1c3RyYXRvciAxNy4xLjAsIFNWRyBFeHBvcnQgUGx1Zy1JbiAuIFNWRyBWZXJzaW9uOiA2LjAwIEJ1aWxkIDApICAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgOCA4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA4IDgiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPHBhdGggZmlsbD0iI0ZGRkZGRiIgZD0iTTYuNCwxTDUuNywxLjdMMi45LDQuNUwyLjEsMy43TDEuNCwzTDAsNC40bDAuNywwLjdsMS41LDEuNWwwLjcsMC43bDAuNy0wLjdsMy41LTMuNWwwLjctMC43TDYuNCwxTDYuNCwxeiINCgkvPg0KPC9zdmc+DQo=)
}

#iframe_slot{
/*z-index: 999999;*/
}
/*
OLD STYLE PROFILE DIV

.n-header-profile-div{
    display: none;
    border: 1px solid #1a1f2f;
    height: 350px;
    overflow: scroll;
    position: absolute;
    width: 350px;
    top: 50px;
    right: 3px;
    padding-bottom: 10px;
    border-radius:5px;
    background: #1b2030;
    box-shadow: 5px 5px 12px #0a0c1078;
    animation: ani 0.2s forwards;
    button {
        padding: 5px 12px;
        background: #1b2030;
        width: 100%;
    }
    h1{
        font-size: 17px;
        text-align: left;
        padding-left: 5px;
        font-weight: bold;
    }
}
.end-footer-div{
    position: relative;
    bottom: 0px;
    margin-top: 10px;
    text-align: center;
    width: 100%;
    h1{
        font-size: 12px;
        text-align:center;
    }
    button{
        font-size: 12px;
        background: #282f47;
        text-align: center;
        padding: 2px 2px;
        width: 155px;
        margin-top: 5px;
        margin-bottom: 5px;
        border-radius: 5px;
    }
}
.notify-div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
}
.notify-div-children {
    display: inline-flex;
    align-items: center;
    margin-left: 20px;
    margin-top: 10px;
    margin-bottom: 10px;
}
.notify-div-children-2 {
    display: inline-flex;
    justify-content: space-evenly;
    align-items: center;
}
.n-header-profile-div button:hover{
    background: #1888e7;
    svg{
        fill: #fff !important;
    }
}
*/
.header__user-b {
    margin-right: 0px;
}
.new-header2{
    background-color: #1475e1;
    padding: 13px 20px;
    border-radius: 0 4px 4px 0;
}

.newHeaderButtons{
    background-color: #1475e1;
}

.newHeader{
    padding-right: 1px;
}

.new-header{
    background-color: #0a0c1059;
    padding: 13px 20px;
    border-radius: 4px 0 0 4px;
}

.theme--dark .header {
    background: #1b2030;
    box-shadow: 0 0 12px #0a0c1063;
    /*z-index: 6;*/
    border: 1px solid #20273a;
    border-top: 0px solid #fff;
  }

.header{
    padding-right: 120px;
}

.headerIcon{
    display:none;
}
.headerBalanceSpan{
    display: block;
}

.theme--dark .sidebar__logotype a {
  display: none;
}

.logoNewHeaderA{
    text-align: center;
    justify-content: space-between;
    display: flex;
    align-items: center;
}
.logoNewHeaderA img{
    max-width: 120px;
    max-height: 120px;
}

.svg-icon{
    cursor:pointer;
    width: 14px;
    height: 14px;
    color: #4e6287;
    fill: #4e6287;
}
.svg-icon:hover{
    color: #fff;
    fill: #fff;
}

@media only screen and (min-width: 626px) {
  .logoMobile{
    display: none !important;
  }
}
@media only screen and (max-width: 625px) {
  .casino__modes {
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  }
  .logoMobile{
    justify-content: center;
    align-items: center;
    display: flex;
    align-content: center;
    max-height: 70px;
  }
  .adsblock{
    display: none !important;
  }
  .mainContainer{
    display: none !important;
  }
  .header__links {
    display: block !important;
  }
  .newHeader {
    /* display: none !important; */
  }
  .newHeader-Right{
    /* position: fixed; */
    /* justify-content: right; */
    /* right: 15px; */
  }
  .walletExp-wall{
      display: none !important;
  }
.headerIcon{
display:block;
}
.headerBalanceSpan{
display: none;
}
}
@media only screen and (max-width: 475px) {
    .header__user-b {
        margin-right: 0px !important;
    }
}
@media only screen and (max-width: 1125px) {
  .header {
    padding-left: 0px !important;
    width: 100% !important;
    padding-right: 0px !important;
  }
}
@media only screen and (max-width: 1250px) {
  main, .header, .footer {
    width: calc(100%) !important;
  }
}

#_ajax_content_{
margin-top: 95px;
}

.profileNotify{
left: 2px;
top: 2px;
border: 1.5px solid #1a2c38;
background: #6eff00;
z-index: 6;
}

div.svelte-tgp09d {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 1;
    background: var(--green-400)
}

div.svelte-tgp09d:not(.is-relative) {
    position: absolute;
    transform: translate(-50%,-50%) scale(1)!important
}

div.scale-up.svelte-tgp09d {
    animation: svelte-tgp09d-ScaleUp .2s ease-out
}

div.pulse.svelte-tgp09d {
    margin-left: 2px;
    animation: svelte-tgp09d-pulse 1s infinite ease-out
}

@keyframes svelte-tgp09d-ScaleUp {
    0% {
        transform: translate(-50%,-50%) scale(0)
    }
}

@keyframes svelte-tgp09d-pulse {
    0% {
        box-shadow: 0 0 #00e70166
    }

    30% {
        box-shadow: 0 0 2px 2px #00e70166
    }

    70% {
        box-shadow: 0 0 2px 2px #00e70166
    }

    to {
        box-shadow: 0 0 #00e70166
    }
}
.theme--dark .sidebar__logotype a {
    display: block;
}


.sidebar{
    background: #1b2030;
    box-shadow: 0 0 12px #0a0c1063;
    padding: 20px 15px;
    /*z-index: 7;*/
    border: 1px solid #20273a;
}
.sidebar__inner {
    width: 200px;
}

.theme--dark .sidebar__block {
    border-radius: 5px;
    align-items: flex-start;
    border: 0px;
}

.sidebar__game {
    width: 100%;
    height: 36px;
    display: flex;
    flex-direction: row;
    /* background: #1d2335; */
    border-radius: 0px;
}
.sidebar__game:hover {
    background: #1d2335;
}
.sidebar__game-center {
    justify-content: flex-start;
    left: 10px;
}
.sidebar__game-center svg{
    width: 16px;
    height: 16px;
}
.sidebar__game-center span{
    padding-left: 10px;
    font-weight: 600;
    font-size: .875rem;
    cursor: pointer;
    color: white;
}

.slots__item:hover .slots__item-btns {
    transform: translateY(0%);
    opacity: 1;
}

.slots__item-img {
    overflow: visible;
}

.slots__item-img img {
    border-radius: 15px;
}

.gamersOnline{
    span{
        padding-left: 15px;
        font-size: 12px;
    }
    div{
        bottom: -18px;border: 1.5px solid #1a2c38;background: #6eff00;z-index: 3;left: 7px;
    }
}

@keyframes blinkerOnlineGamers {
  50% {
    box-shadow: 0px 0px 0em 2px rgba(35, 211, 50, 0.3);
  }
}

@media only screen and (max-width: 1125px) {
  .HistoryGX {
    display: none;
  }
}

.HistoryGX {
display: none;
}

.notification.svelte-tm583l.svelte-tm583l {
    /* display: flex; */
    /* position: relative; */
    /* background: var(--grey-500); */
    /* border-radius: var(--radius-base); */
    /* min-width: 200px; */
    /* max-width: calc(100vw - 2em); */
    /* box-shadow: var(--shadows-lg); */
    align-items: center;
    transition: all .3s;
    justify-content: space-between
}

.notification.clickable.svelte-tm583l.svelte-tm583l {
    cursor: pointer
}

.notification.svelte-tm583l .notification-body.svelte-tm583l {
    width: 100%;
    display: grid;
    grid-auto-flow: row;
}

.notification.svelte-tm583l .notification-body .title.svelte-tm583l {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
    flex-wrap: wrap
}

.notification.svelte-tm583l .notification-body .title.svelte-tm583l>*+* {
    margin-left: var(--space-1)
}

.notification.svelte-tm583l .notification-icon.svelte-tm583l {
    display: flex;
    /* align-self: stretch; */
    align-items: center;
    justify-content: center;
    background: #ffffff00 !important;!i;!;!ш;!шь;!ш;!;
    border-radius: var(--radius-base);
    margin: 0
}

.notification.positive.svelte-tm583l.svelte-tm583l {
    border-left-color: var(--green-500)
}

.notification.positive.svelte-tm583l .notification-icon.svelte-tm583l {
    color: #ffffff;
}

.notification.default.svelte-tm583l.svelte-tm583l {
    border-left-color: var(--blue-500)
}

.notification.default.svelte-tm583l .notification-icon.svelte-tm583l {
    color: var(--blue-500)
}

.notification.warn.svelte-tm583l.svelte-tm583l {
    border-left-color: var(--yellow-500)
}

.notification.warn.svelte-tm583l .notification-icon.svelte-tm583l {
    color: var(--yellow-500)
}

.notification.negative.svelte-tm583l.svelte-tm583l {
    border-left-color: var(--red-500)
}

.notification.negative.svelte-tm583l .notification-icon.svelte-tm583l {
    color: var(--red-500)
}

.notification.rain.svelte-tm583l.svelte-tm583l {
    border-left-color: #03d6ff
}

.notification.rain.svelte-tm583l .notification-icon.svelte-tm583l {
    color: #03d6ff
}

.notification.normal.svelte-tm583l .notification-body.svelte-tm583l {
    gap: var(--space-1);
    padding: var(--space-4) var(--space-6);
    background: #282f4700 !important;!i;!;
}

.notification.normal.svelte-tm583l .notification-icon.svelte-tm583l {
    /* padding: var(--space-4) var(--space-5) calc(var(--space-4) + 3px) var(--space-5); */
    /* font-size: var(--text-size-lg); */
}

.notification.compact.svelte-tm583l .notification-body.svelte-tm583l {
    /* gap: var(--space-0-5); */
    /* padding: var(--space-3) var(--space-4); */
}

.notification.compact.svelte-tm583l .notification-icon.svelte-tm583l {
    /* padding: var(--space-4) var(--space-5); */
    /* font-size: var(--text-size-base); */
    border-radius: 25px;
}

.headerSideBarNew {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding-top: 15px;
}

.casinoSideBar{
    width: 70px;height: 36px;position: relative;display: flex;flex: 1;align-items: center;justify-content: center;background-size: cover;background-repeat: no-repeat;min-height: var(--space-9);border-radius: var(--radius-base);color: var(--white);font-size: var(--text-size-default);font-weight: 700;text-shadow: 0px 1px 2px rgba(0, 0, 0, .12), 0px 1px 3px rgba(0, 0, 0, .2);-webkit-user-select: none;-moz-user-select: none;user-select: none;cursor: default;
}

.liveDealersSideBar{
    width: 78px;height: 36px;position: relative;display: flex;flex: 1;align-items: center;justify-content: center;background-size: cover;background-repeat: no-repeat;min-height: var(--space-9);border-radius: var(--radius-base);color: var(--white);font-size: var(--text-size-default);font-weight: 700;text-shadow: 0px 1px 2px rgba(0, 0, 0, .12), 0px 1px 3px rgba(0, 0, 0, .2);-webkit-user-select: none;-moz-user-select: none;user-select: none;cursor: default;
}

.casinoSideBar-bg{
    background-image: url(/img/casino-big.avif);
    span{
        margin-top: 8px;
        margin-left: 22px;
        position: absolute;
    }
}
.liveDealersSideBar-bg{
    background-image: url(/img/lives-big.avif);
    span{
        margin-top: 8px;
        margin-left: 32px;
        position: absolute;
    }
}
.itemsWallet {
    align-items: center;
    /*background: rgb(32 39 58);*/
}


.notify-div:before{
    /*content: '';
    position: absolute;
    top: 40px;
    width: 100%;
    height: 4px;
    left: 0;
    background: url(../images/borders--dark.svg) repeat;*/
}

.itemsWallet:hover {
    background: #1d2335;
}

/*.walletExp-wall {
    animation: ani 0.2s forwards;
    display: none;
    border: 1px solid #1a1f2f;
    overflow: scroll;
    position: absolute;
    top: 70px;
    height: 170px;
    width: 220px;
    left: 0px;
    right: 0px;
    padding-bottom: 10px;
    border-radius:5px;
    background: #1b2030;
    box-shadow: 5px 5px 12px #0a0c1078;
    button {
        padding: 5px 12px;
        background: #1b2030;
        width: 100%;
    }
    h1{
        font-size: 17px;
        text-align: left;
        padding-left: 5px;
        font-weight: bold;
    }
}

.walletDiv {
    h1{
        font-size: 11px;
        font-weight: 600;
    }
}

.walletExp-wall button:hover{
    background: #1888e7;
    svg{
        fill: #fff !important;
    }
}*/

.walletExp-wall {
    animation: ani 0.2s forwards;
    display: none;
    border: 1px solid rgba(177, 186, 211, 1);
    /* overflow: scroll; */
    position: absolute;
    top: 70px;
    height: 200px;
    width: 180px;
    left: 0px;
    right: 0px;
    color: black;
    padding-top: 5px;
    border-radius:5px;
    padding-bottom: 0;
    background: #fff;
    box-shadow: 5px 5px 12px #0a0c1078;
    button {
        display: inline-flex;
        align-items: center;
        width: 100%;
        height: 25px;
        padding-top: 6px;
        padding-bottom: 6px;
        padding-left: .75rem;
        padding-right: .75rem;
        height: 30px;
        span{
            display: inline-block;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-variant-numeric: tabular-nums;
            padding-right:5px;
            font-size: 10px;
            font-weight: 600;
        }
    }
    h1{
        font-size: 17px;
        text-align: left;
        padding-left: 5px;
        font-weight: bold;
    }
}

.walletDiv {
    h1{
        font-size: 11px;
        font-weight: 600;
    }
}

.walletExp-wall button:hover{
    background: rgba(177, 186, 211, 1);
    svg{
        fill: #0a0c1078 !important;
    }
}

/*
.itemsWallet:hover {
    background-color: rgba(177, 186, 211, 1);
}

.walletExp-wall {
    animation: ani 0.2s forwards;
    display: none;
    border: 1px solid #1a1f2f;
    overflow: hidden;
    position: absolute;
    top: 70px;
    height: 170px;
    width: 200px;
    left: 0px;
    right: 0px;
    padding-bottom: 10px;
    border-radius:5px;
    background: #ffffff;
    color: #000;
    box-shadow: 5px 5px 12px #0a0c1078;
    button {
        padding: 5px 12px;
        background: #ffffff;
        width: 100%;
    }
    h1{
        font-size: 17px;
        text-align: left;
        padding-left: 5px;
        font-weight: bold;
    }
}

.walletDiv {
    h1{
        font-size: 11px;
        font-weight: 700;
    }
}

.walletExp-wall button:hover{
    background: #4e6287;
}
*/

.casinoH,.casinoSideBar-bg:hover{
    background-image: url(/img/casino-big-hover.avif);
}
.livesH,.liveDealersSideBar-bg:hover{
    background-image: url(/img/lives-big-hover.avif);
}

.mobileSec{
    display: contents;
}

.link-wrap{
    display: none;
    flex-direction: column;
    padding: 1rem 0 0 0;
    align-items: center;
    gap: .5rem;
    width: 100%;
    a{
        position: relative;
        display: flex;
        flex: 1;
        align-items: center;
        justify-content: center;
        background-size: cover;
        background-repeat: no-repeat;
        min-height: 2.25rem;
        border-radius: var(--radius-base);
        color: var(--white);
        font-size: var(--text-size-default);
        font-weight: 700;
        text-shadow: 0px 1px 2px rgba(0, 0, 0, .12), 0px 1px 3px rgba(0, 0, 0, .2);
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        margin-bottom: 2px;
    }
    margin-bottom: 10px;
}


.header-button.casino.collapsed.svelte-jby8ge {
    width: 2.75rem;
    height: 2.75rem;
    flex: unset;
    background-image: url(/img/casino-sm.avif)
}

.casinoh-m, .header-button.casino.active.collapsed.svelte-jby8ge,.header-button.casino:hover.collapsed.svelte-jby8ge {
    background-image: url(/img/casino-sm-hover.avif) !important;
}

.header-button.sports.collapsed.svelte-jby8ge {
    width: 2.75rem;
    height: 2.75rem;
    flex: unset;
    background-image: url(/img/lives-sm.avif)
}

.livesh-m, .header-button.sports.active.collapsed.svelte-jby8ge,.header-button.sports:hover.collapsed.svelte-jby8ge {
    background-image: url(/img/lives-sm-hover.avif) !important;
}

.ilink-wrap{
    display: block;
}

@media only screen and (max-width: 1125px) {
    .wallets-marker{
        display: none !important;
    }
}

@media only screen and (min-width: 1600px) {
    .sidebar__inner {
        width: 145px;
    }
    .sidebar__game-center span{
        display: block;
        font-size: 10px;
    }
    .sidebar__game-center svg{
        width: 14px;
        height: 14px;
    }
    .casinoSideBar-bg span{
        margin-left: 3px;
    }
    .liveDealersSideBar-bg span{
        margin-left: 3px;
    }
    .sidebar__game {
        height: 27px;
    }
}

@media only screen and (min-width: 1705px) {
    .sidebar__inner {
        width: 200px;
    }
    .sidebar__game-center span{
        display: block;
        font-size: 12px;
    }
    .sidebar__game-center svg{
        width: 16px;
        height: 16px;
    }
    .sidebar__game {
        height: 36px;
    }

}

@media only screen and (max-width: 1599px) {
    .sidebar__inner {
        width: 35px;
    }
    #sidebar-hidden{
        padding-left: 10px;
    }
    .link-wrap{
        display: block;
    }
    .sidebar__game-center span{
        display: none;
        font-size: 8px;
    }
    .onlineUsers{
        display: none;
    }
    .headerSideBarNew{
        /* display: none; */
    }
    button{
        /*padding-left: 10px;*/
    }
    .mobileSec{
        display: flex;
        padding-left: 10px;
        a{
            display: none;
        }
    }
    #profileDropDown1{
        display: none;
    }
    #gameListingDropDown1{
        display: none;
    }
    .sidebar__game-center svg{
        width: 16px;
        height: 16px;
    }
}

.mainContainer .homeWrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto
}

.mainContainer .homeWrapper .homeSection {
    padding: 40px 15px;
    overflow: hidden
}

.mainContainer .homeWrapper .homeSection:nth-child(2n) {
    background-color: #272d39
}

.mainContainer .homeWrapper .homeSection:nth-child(odd) {
    /* background-color: #20242d; */
}

.mainContainer .homeWrapper .homeSection:first-child {
    padding-top: 0;
    margin-top: -20px
}

.mainContainer .homeWrapper .homeSection:last-child {
    margin-bottom: -20px
}

@media (max-width: 900px) {
    .mainContainer .homeWrapper .homeSection {
        margin-left:-15px;
        margin-right: -15px
    }
}

.payWaysSection {
    /* background-color: #272d39!important; */
}

.payWaysSection .payWaysContainer .payWaysContentWrapper {
    display: flex;
    flex-direction: row;
    gap: 4rem;
    max-width: 1250px;
    min-height: 300px;
    margin: auto;
    overflow: hidden
}

@media (min-width: 768px) and (max-width: 900px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper {
        flex-direction:row;
        gap: 4rem;
        min-height: 300px
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer {
    aspect-ratio: 343/300;
    position: relative;
    width: 50%;
    height: auto;
    perspective: 600px
}

@media (max-width: 360px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer {
        aspect-ratio:auto;
        height: 24rem
    }
}

@media (min-width: 768px) and (max-width: 900px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer {
        height:auto;
        width: 50%
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card {
    position: absolute;
    width: 100%;
    max-width: 440px;
    top: 50%;
    left: 50%
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(1) {
    z-index: 4;
    transform: translate3d(-50%,-30%,0);
    /*animation: animateCard1 8s 2s infinite linear*/
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(2) {
    z-index: 3;
    transform: translate3d(-50%,-55%,-100px);
    /*animation: animateCard2 8s 2s infinite linear*/
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(3) {
    z-index: 2;
    transform: translate3d(-50%,-80%,-200px);
    /*animation: animateCard3 8s 2s infinite linear*/
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card:nth-child(4) {
    z-index: 1;
    transform: translate3d(-50%,-105%,-300px);
    /*animation: animateCard4 8s 2s infinite linear*/
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .cardsContainer .card .currencyImage {
    object-fit: cover;
    max-width: 880px;
    max-height: 538px;
    aspect-ratio: 1.63569/1;
    width: 100%
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    align-items: flex-start;
    justify-content: center;
    width: 50%;
    margin-bottom: 0
}

@media (min-width: 768px) and (max-width: 900px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer {
        width:50%;
        align-items: flex-start;
        margin-bottom: 0
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .title {
    font-weight: 700;
    line-height: normal;
    text-align: left;
    font-size: 38px;
    color: #fff
}

@media (max-width: 1100px) {
    .payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .title {
        font-size:32px
    }
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .title .titleSpan {
    margin-bottom: .25rem
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .description {
    font-weight: 400;
    text-align: left;
    font-size: 18px
}

.payWaysSection .payWaysContainer .payWaysContentWrapper .textContainer .btn {
    justify-content: center;
    display: inline-flex;
    position: relative;
    font-weight: 600;
    white-space: nowrap;
    font-size: 14px;
    padding: 14px 20px;
    width: auto;
    margin-top: 2rem
}

@media screen and (max-width: 1100px) and (min-width: 900px) {
    .homeSectionRightBarOpen .payWaysContentWrapper {
        flex-direction:column-reverse!important;
        gap: 0!important
    }

    .homeSectionRightBarOpen .payWaysContentWrapper .textContainer {
        align-items: normal!important;
        width: 100%!important;
        margin-bottom: 1.5rem!important
    }

    .homeSectionRightBarOpen .payWaysContentWrapper .cardsContainer {
        width: 100%!important
    }
}

@media (max-width: 768px) {
    .payWaysContentWrapper {
        flex-direction:column-reverse!important;
        gap: 0!important
    }

    .payWaysContentWrapper .textContainer {
        align-items: normal!important;
        width: 100%!important;
        margin-bottom: 1.5rem!important
    }

    .payWaysContentWrapper .cardsContainer {
        width: 100%!important
    }
}
@keyframes animateCard1 {
    4% {
        transform: translate3d(-50%,200%,0);
        z-index: 4;
        opacity: 1
    }

    4.1% {
        transform: translate3d(-50%,200%,0);
        z-index: -1;
        opacity: 0
    }

    5% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: -1;
        opacity: 0
    }

    5.1% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: 1;
        opacity: 1
    }

    7% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }

    25% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }

    25.1% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 2;
        opacity: 1
    }

    29% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 2
    }

    50% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 2
    }

    50.1% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 3
    }

    54% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 3
    }

    75% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 3
    }

    75.1% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 4
    }

    79% {
        transform: translate3d(-50%,-30%,0);
        z-index: 4
    }

    to {
        transform: translate3d(-50%,-30%,0);
        z-index: 4
    }
}

@keyframes animateCard2 {
    4% {
        transform: translate3d(-50%,-30%,0);
        z-index: 3
    }

    25% {
        transform: translate3d(-50%,-30%,0);
        z-index: 3
    }

    25.1% {
        transform: translate3d(-50%,-30%,0);
        z-index: 4
    }

    29% {
        transform: translate3d(-50%,200%,0);
        z-index: 4;
        opacity: 1
    }

    29.1% {
        transform: translate3d(-50%,200%,0);
        z-index: -1;
        opacity: 0
    }

    30% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: -1;
        opacity: 0
    }

    30.1% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: 1;
        opacity: 1
    }

    32% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }

    50% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }

    50.1% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 2;
        opacity: 1
    }

    54% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 2
    }

    75% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 2
    }

    79% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 3
    }

    to {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 3
    }
}

@keyframes animateCard3 {
    4% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 2
    }

    25% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 2
    }

    25.1% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 3
    }

    29% {
        transform: translate3d(-50%,-30%,0);
        z-index: 3
    }

    50% {
        transform: translate3d(-50%,-30%,0);
        z-index: 3
    }

    50.1% {
        transform: translate3d(-50%,-30%,0);
        z-index: 4
    }

    55% {
        transform: translate3d(-50%,200%,0);
        z-index: 4;
        opacity: 1
    }

    55.1% {
        transform: translate3d(-50%,200%,0);
        z-index: -1;
        opacity: 0
    }

    56% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: -1;
        opacity: 0
    }

    56.1% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: 1;
        opacity: 1
    }

    58% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }

    75% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }

    79% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 2
    }

    to {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 2
    }
}

@keyframes animateCard4 {
    4% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 1
    }

    25% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 1
    }

    25.1% {
        transform: translate3d(-50%,-80%,-200px);
        z-index: 2
    }

    29% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 2
    }

    50% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 2
    }

    50.1% {
        transform: translate3d(-50%,-55%,-100px);
        z-index: 3
    }

    54% {
        transform: translate3d(-50%,-30%,0);
        z-index: 3
    }

    75% {
        transform: translate3d(-50%,-30%,0);
        z-index: 3
    }

    75.1% {
        transform: translate3d(-50%,-30%,0);
        z-index: 4
    }

    80% {
        transform: translate3d(-50%,200%,0);
        z-index: 4;
        opacity: 1
    }

    80.1% {
        transform: translate3d(-50%,200%,0);
        z-index: -1;
        opacity: 0
    }

    81% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: -1;
        opacity: 0
    }

    81.1% {
        transform: translate3d(-50%,-80%,-300px);
        z-index: 1;
        opacity: 1
    }

    83% {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }

    to {
        transform: translate3d(-50%,-105%,-300px);
        z-index: 1;
        opacity: 1
    }
}

.active-hidesidebar {
    width: 35px;
    .sidebar__game-center span{
        display: none;
        font-size: 8px;
    }
    button{
        padding-left: 10px;
    }
    .sidebar__game {
        height: 37px;
    }
    .onlineUsers{
        display: none;
    }
    .mobileSec{
        display: flex;
        padding-left: 10px;
        a, span{
            display: none !important;
        }
    }
    #profileDropDown1{
        display: none;
    }
    #gameListingDropDown1{
        display: none;
    }
    .sidebar__game-center svg{
        width: 16px;
        height: 16px;
    }
}

/* OLD PROFILE DROPDOWN STYLES

.profiletooltip{
    display: none;
    animation: ani 0.2s forwards;
    span{
        color: black;
    }
    button, a, span{
        cursor: pointer;
    }
}

.openel{
    display: block;
}

.btfs:hover {
    color: rgb(5 8 10 / 1);
    background-color: rgba(177, 186, 211, 1);
}

.tooltip.svelte-1rqvmwc {
    display: none;
    position: fixed;
    --arrow-color: var(--white)
}

.tooltip-content.svelte-1rqvmwc {
    background: var(--white);
    color: var(--grey-700);
    font-weight: 600;
    box-shadow: var(--shadows-md);
    font-size: var(--text-size-default);
    border-radius: var(--radius-base);
    padding: var(--space-3) var(--space-4)
}

.tooltip-content.svelte-1rqvmwc:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0
}

.tooltip-content.x-center.svelte-1rqvmwc:after {
    left: 50%;
    transform: translate(-50%)
}

.tooltip-content.x-left.svelte-1rqvmwc:after {
    left: var(--arrow-offset);
    transform: translate(1px)
}

.tooltip-content.x-right.svelte-1rqvmwc:after {
    right: var(--arrow-offset);
    transform: translate(-1px)
}

.tooltip-content.x-auto.svelte-1rqvmwc:after {
    left: var(--arrow-x);
    transform: translate(-50%)
}

.tooltip-content.y-top.svelte-1rqvmwc:after {
    top: 100%;
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-top: var(--arrow-width) solid var(--arrow-color, var(--white))
}

.tooltip-content.y-bottom.svelte-1rqvmwc:after {
    bottom: 100%;
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-width) solid var(--arrow-color, var(--white))
}

.arrow.svelte-1rqvmwc,.arrow.svelte-1rqvmwc:before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    background: var(--arrow-color)
}

.arrow.svelte-1rqvmwc {
    visibility: hidden
}

.arrow.svelte-1rqvmwc:before {
    visibility: visible;
    content: "";
    transform: rotate(45deg)
}

.tooltip[data-popper-placement^=top] .arrow {
    bottom: -4px
}

.tooltip[data-popper-placement^=bottom] .arrow {
    top: -4px
}

.tooltip[data-popper-placement^=left] .arrow {
    right: -4px
}

.tooltip[data-popper-placement^=right] .arrow {
    left: -4px
}

#tooltipsList{
    display: block;
}
.dropdown.svelte-1iau4lg {
    position: relative
}

.dropdown.full-width.svelte-1iau4lg {
    width: 100%
}

.dropdown.svelte-1iau4lg>.is-rounded {
    border-radius: var(--radius-sm)
}

.dropdown-icon.svelte-9n45i2 {
    display: inline-flex;
    align-items: center
}

.tooltip.svelte-yjqf2g {
    position: relative;
    display: flex;
    width: -moz-max-content;
    width: max-content;
    flex-direction: column;
    box-shadow: var(--shadows-lg);
    border-radius: var(--radius-base);
    background: var(--white);
    z-index: 1600
}

.tooltip.variant-dark.svelte-yjqf2g {
    background: var(--grey-400);
    --arrow-color: var(--grey-400)
}

.tooltip.variant-light.svelte-yjqf2g {
    background: var(--white);
    --arrow-color: var(--white)
}

.tooltip.svelte-yjqf2g:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0
}

.tooltip.x-center.svelte-yjqf2g:after {
    left: 50%;
    transform: translate(-50%)
}

.tooltip.x-left.svelte-yjqf2g:after {
    left: var(--arrow-offset);
    transform: translate(1px)
}

.tooltip.x-right.svelte-yjqf2g:after {
    right: var(--arrow-offset);
    transform: translate(-1px)
}

.tooltip.x-auto.svelte-yjqf2g:after {
    left: var(--arrow-x);
    transform: translate(-50%)
}

.tooltip.y-top.svelte-yjqf2g:after {
    top: 100%;
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-top: var(--arrow-width) solid var(--arrow-color, var(--white))
}

.tooltip.y-bottom.svelte-yjqf2g:after {
    bottom: 100%;
    border-left: var(--arrow-width) solid transparent;
    border-right: var(--arrow-width) solid transparent;
    border-bottom: var(--arrow-width) solid var(--arrow-color, var(--white))
}

.tooltip-wrapper.svelte-yjqf2g {
    z-index: 1600
}

.dropdown-content-parent.svelte-yjqf2g {
    position: fixed
}

.dropdown-scroll-content.svelte-yjqf2g {
    display: flex;
    flex-direction: column;
    padding: var(--space-1) 0;
    max-width: 100vw
}

.arrow.svelte-yjqf2g,.arrow.svelte-yjqf2g:before {
    position: absolute;
    width: 8px;
    height: 8px;
    background: inherit;
    background: #fff;
}

.arrow.svelte-yjqf2g {
    visibility: hidden
}

.arrow.svelte-yjqf2g:before {
    visibility: visible;
    content: "";
    transform: rotate(45deg)
}

.tooltip-wrapper[data-popper-placement^=top] .arrow {
    bottom: -4px
}

.tooltip-wrapper[data-popper-placement^=bottom] .arrow {
    top: -4px
}

.tooltip-wrapper[data-popper-placement^=left] .arrow {
    right: -4px
}

.tooltip-wrapper[data-popper-placement^=right] .arrow {
    left: -4px
}

*/



.tournier__page-title{
    height: 110px;background: linear-gradient(45deg, #20273a 55%, #4e62878f);display: inline-flex;justify-content: space-around;align-items: center;flex-direction: row;border-radius: 15px;
}
.theme--dark .tournier__page-t-box {
    background: #00000000;
}
.tourniers2-list{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px 10px;
    padding-bottom: 25px;
}
.tournier2-item:hover{
    .tournier2-img{
        transform: translateY(-5px);
    }
}
.tournier2-item{
    cursor: pointer;
    display: contents;
}
.tournier2-block{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.tournier2-img{
    transition: transform .25s;
    border-radius: 15px;
    background: url(/img/backtournier.jpg) center no-repeat;
    background-size: cover;
    max-width: 390px;
    max-height: 168px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    img{
        max-width: 130px;
        position: relative;
        bottom: -20px;
        /*transform: rotate(25deg);*/
    }
}
.tournier2-text{
    display: flex;
    flex-direction: column;
    h4{
        font-size: 22px;
        cursor: pointer;
    }
    span{
        color: gray;
        font-size: 11px;
        cursor: pointer;
    }
}

.bg-bigger{
    background: url(/img/bg.png);width: 150%;height: 400px;margin-left: -10%;position: absolute;overflow: hidden;background-repeat: no-repeat;background-position: top;box-shadow: 0px 0px 12px 3px #151925d4;
}
.bg-bigger-wrap{
    max-width: 1322px;margin: 0 auto;
}
.bg-bigger-list{
    display: inline-flex;width: 100%;justify-content: space-between;margin: 0 auto;
}
.bg-items{
    /* width: calc(150% - 50%); */
    display: inline-flex;
    height: 400px;
    justify-content: center;
    align-items: center;
    align-content: center;
    justify-items: center;
    gap: 10px;
    position: relative;
}
.bg-bigger-block{
    background: #1b2030;
    padding: 7px 25px;
    font-weight: 500;
    display: inline-flex;
    width: 100%;
    justify-content: flex-start;
    align-items: center;
    border-radius: 0px 0px 5px 5px;
    align-content: center;
    cursor: pointer;
    svg{
        margin-right: 5px;
        fill: white !important;
        cursor: pointer;
    }
}
.bgg-it-anim{
    transition: transform .25s;
}
.bgg-it{
    max-width: 322px;
    /* max-height: 255px; */
    border: 4px solid #20273a;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0px 0px 12px 3px #151925d4
}
.bgg-itbaners{
    max-width: 360px;
}
@media only screen and (max-width: 1230px){
    .bgg-itbaners{
        max-width: 322px;
    }
}
@media only screen and (max-width: 1030px){
    .bgg-itbaners{
        max-width: 302px;
    }
}
.bgg-it-anim:hover{
    transform: translateY(-5px);
}
.bgg-stat{
    width: 314px;
    height: 150px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: #151925;
}
.bgg-stat-items{
    width: 100%;
    display: inline-flex;
    padding: 10px 25px;
    justify-content: space-between;
}
.bgg-stat-progress{
    width: 100%;
    padding: 1px 25px;
}
.bgg-stat-rang-progress{
    background: linear-gradient(45.87deg, #1464be 6.6%, #1475e1 102.94%);
}
@keyframes ani {
    0% {opacity: 0;}
    100% {opacity: 1;}
}

@media only screen and (max-width: 410px) {
.mines__path.level_16 .mines__path-item{
        width: calc(320px / 4 - 6px);
        height: calc(320px / 4 - 6px);
}
.mines__path.level_25 .mines__path-item{
    width: calc(320px / 5 - 6px);
    height: calc(320px / 5 - 6px);
}

.mines__path.level_36 .mines__path-item{
    width: calc(320px / 6 - 6px);
    height: calc(320px / 6 - 6px);
}

.mines__path.level_49 .mines__path-item{
    width: calc(320px / 7 - 6px);
    height: calc(320px / 7 - 6px);
}
}

footer, #app, main {
overflow-x: hidden !important;
}
.nnsvg{
    fill: #fff !important;
    color: #fff !important;
    svg{fill: #fff !important;}
    transition: 0s;
}
.nnsvg:hover{
    fill: gray !important;
    color: gray !important;
    svg{fill: gray !important;}
}
@media (min-width: 1000px) and (max-width: 1125px){
    .hdwrapper{
        padding: 0 10px !important;
    }
}
@media only screen and (max-width: 1000px){
  .modes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    padding-bottom: 25px;
    gap: 25px 15px;
  }
  .providers-finder{
    display: none;
  }
  .card-button {
    padding: 5px 15px;
  }
  .mobilec-p{
    display: none;
  }
  .mobilec-pProfile{
    display: block;
  }
  .mobni{
    justify-content: space-around;
    gap: 40px;
  }
}
@media only screen and (min-width: 700px){
  .theme--dark .popup {
    width: 521px !important;
  }
}
@media only screen and (max-width: 600px){
  .modes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    row-gap: 30px;
    padding-bottom: 25px;
    gap: 25px 10px;
  }
  .providers-finder{
    display: none;
  }
  .card-button {
    padding: 5px 5px;
    border-radius: 5px;
  }
  .mobilec-p{
    display: none;
  }
  .header__links li {
    margin-right: 0px;
  }
  .mobilec-pProfile{
    padding-right: 5px;
  }
  .mobile-long-logo{
    display: none !important;
  }
  .mobile-short-logo{
    display: block !important;
  }
  .mobni{
    justify-content: center;
    gap: 10px;
  }
  .mobniguest{
    justify-content: space-around !important;
    gap: 10px !important;
  }
}
@media only screen and (max-width: 700px){
  .theme--dark .popup {
    width: 100% !important;
  }
}
@media only screen and (max-width: 423px){
  .card-title{font-size: 25px;}
  .casino__modes {
    display: flow;
  }
  .modes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    row-gap: 30px;
    padding-bottom: 25px;
    gap: 25px 10px;
  }
  .modes__element{
    max-width: 100%;
    padding-bottom: 10px;
  }
  .mobilec-p{
    display: none;
  }
  .mobilec-pProfile{
    padding-right: 20px;
    display: none !important;
  }
  .notymoby{
      display: none;
  }
  .arrow.svelte-yjqf2g{
    display: none;
  }
}
@media only screen and (max-width: 320px){
  .auth__content {
    width: 260px;
  }
}
@media (max-height: 950px) and (max-width: 423px){
    .dice__bet {
        grid-gap: 5px 10px !important;
    }
    .bx-input__input.d-flex.align-center.justify-space-between {
        margin-bottom: 1px !important;
    }
}

#toast-container>.toast-error {
    background-image: url() !important;
}
.toast-error, .toast-success{
    background: #fff !important;
    color: black !important;
}
#toast-container>.toast-success {
    background-image: url() !important;
}
#toast-container > div {
    padding: 20px !important;
    box-shadow: 0 0 12px black !important;
    border-left: 3px solid red;
}
.toast-progress{
    opacity: 0 !important;
}

/* new style 2025 */
.gamersOnline2 {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 3;
    background: rgba(0, 0, 0, 0.6);
    padding: 4px 8px;
    border-radius: 4px;
    pointer-events: none;
}
.gamersOnline2 span{
    display: flex;
    align-items: center;
    font-size: 12px;
}
.gamersOnline2 .scale-up { /* Иконка */
    width: 8px; height: 8px; border-radius: 50%;
    background: #6eff00; border: 1.5px solid #1a2c38;
    margin-right: 5px;
    animation: blinkerOnlineGamers 2s linear infinite;
}
.gamersOnline2 text.gamer-Online {color: #fff;padding-left: 15px;}
.gamersOnline2 text:not(.gamer-Online) { color: #acb5ce; margin-left: 4px;}
div.svelte-tgp09d_2 {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    z-index: 1;
    background: var(--green-400)
}
div.svelte-tgp09d_2:not(.is-relative) {
    position: absolute;
    transform: translate(0%,10%) scale(1)!important;
}



















/* --- Переменные для легкой настройки --- */
:root {
    --carousel-arrow-color: #e0e0e0;
    --carousel-arrow-color-hover: #ffffff;
    --carousel-arrow-bg: rgba(0, 0, 0, 0.3);
    --carousel-arrow-bg-hover: rgba(0, 0, 0, 0.6);
    --card-border-radius: 12px;
    --card-overlay-gradient: linear-gradient(to top, rgba(10, 10, 20, 0.9) 0%, rgba(10, 10, 20, 0.5) 60%, rgba(10, 10, 20, 0) 100%);
    --card-online-bg: rgba(255, 255, 255, 0.1); /* Эффект стекла */
    --card-online-text-color: #e0e0e0;
    --card-online-count-color: #ffffff;
    --card-indicator-color: #05e4a7; /* Яркий бирюзовый */
    --card-play-button-bg: linear-gradient(45deg, #f70fff, #5704bf); /* Яркий градиент */
    --card-play-button-bg-hover: linear-gradient(45deg, #ff40ff, #6a0fef);
    --card-play-button-text-color: #ffffff;
    --carousel-gap: 16px; /* Отступ между колонками слайдов */
    --card-gap: 16px; /* Отступ между картами в одной колонке */
}

/* --- Стили Свайпера --- */
.game-carousel-container {
    position: relative;
    padding: 10px 40px; /* Отступы для стрелок */
    /* margin-bottom: 40px; */ /* Место для пагинации */
}

.game-carousel-container .swiper-slide {
    display: flex;
    flex-direction: column; /* Карточки друг под другом */
    gap: var(--card-gap);   /* Расстояние между карточками в колонке */
    /* height: auto; */ /* Высота определяется контентом */
}

/* Стрелки */
.game-carousel-container .swiper-button-prev,
.game-carousel-container .swiper-button-next {
    color: var(--carousel-arrow-color);
    background-color: var(--carousel-arrow-bg);
    width: 32px;
    height: 50px; /* Вытянутые стрелки */
    border-radius: 6px;
    top: 50%;
    transform: translateY(-50%);
    transition: background-color 0.2s ease, color 0.2s ease;
    margin-top: 0; /* Убираем стандартный отступ swiper */
    z-index: 10;
}
.game-carousel-container .swiper-button-prev::after,
.game-carousel-container .swiper-button-next::after {
    font-size: 14px;
    font-weight: bold;
}
.game-carousel-container .swiper-button-prev { left: 8px; }
.game-carousel-container .swiper-button-next { right: 8px; }

.game-carousel-container .swiper-button-prev:hover,
.game-carousel-container .swiper-button-next:hover {
    background-color: var(--carousel-arrow-bg-hover);
    color: var(--carousel-arrow-color-hover);
}
.game-carousel-container .swiper-button-disabled {
    opacity: 0.2;
    cursor: default;
    pointer-events: none;
}

/* Пагинация (если нужна) */
.game-carousel-container .swiper-pagination {
    bottom: 8px;
    position: absolute;
    width: 100%; left: 0;
}
.game-carousel-container .swiper-pagination-bullet {
    background-color: var(--card-online-bg); /* Используем цвет стекла */
    opacity: 0.7;
    width: 10px; height: 10px;
}
.game-carousel-container .swiper-pagination-bullet-active {
    background-color: var(--carousel-arrow-color-hover); /* Белый */
    opacity: 1;
}

/* --- Стили Карточки Игры --- */
.game-card {
    position: relative;
    display: block;
    border-radius: var(--card-border-radius);
    overflow: hidden;
    background-color: #1a1a2e; /* Темно-синий фон */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
                box-shadow 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
}

.game-card:hover {
    transform: translateY(-6px) scale(1.02); /* Эффект подъема и легкого увеличения */
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.3);
}

/* Заполнитель для неполных рядов (если нужно) */
.game-card--placeholder {
    background-color: transparent;
    box-shadow: none;
    pointer-events: none;
}
.game-card--placeholder:hover {
    transform: none;
}


/* Контейнер изображения (задает пропорции) */
.game-card__image-link {
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5; /* Вертикальный формат, подбери свой! */
    overflow: hidden; /* Важно для эффекта увеличения */
}

.game-card__image-link img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* max-height: 250px; */
    max-width: 180px;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1); /* Более плавно */
}

.game-card:hover .game-card__image-link img {
    transform: scale(1.1); /* Увеличиваем сильнее */
}

/* Градиентный оверлей */
.game-card__overlay {
    position: absolute;
    inset: 0; /* top, right, bottom, left = 0 */
    background: var(--card-overlay-gradient);
    opacity: 0;
    transition: opacity 0.4s ease-out;
    z-index: 1;
    pointer-events: none;
}

.game-card:hover .game-card__overlay {
    opacity: 1;
}

/* Контент при наведении (кнопка) */
.game-card__hover-content {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Начинает чуть ниже */
    transition: opacity 0.3s ease-out 0.1s,
                transform 0.3s ease-out 0.1s,
                visibility 0s linear 0.4s; /* Скрывать после завершения анимации */
    z-index: 3;
    pointer-events: none;
}

.game-card:hover .game-card__hover-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition-delay: 0s; /* Убрать задержку при появлении */
    transition: opacity 0.3s ease-out,
                transform 0.3s ease-out,
                visibility 0s linear 0s;
}

/* Кнопка "Играть" */
.game-card__play-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 12px;
    background: var(--card-play-button-bg);
    color: var(--card-play-button-text-color);
    border: none;
    border-radius: 50px; /* Полностью круглые края */
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(87, 4, 191, 0.4); /* Тень под цвет градиента */
    transform: scale(0.9); /* Начинает чуть меньше */
    transition: background 0.2s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease;
    pointer-events: auto; /* Ловит клики */
}

.game-card:hover .game-card__play-button {
    transform: scale(1); /* Увеличивается до нормального размера */
}

.game-card__play-button:hover {
    background: var(--card-play-button-bg-hover);
    transform: scale(1.05); /* Еще чуть больше при наведении на саму кнопку */
    box-shadow: 0 8px 20px rgba(87, 4, 191, 0.5);
}

.game-card__play-button svg {
    margin-right: 8px;
}

/* Информация об игроках (стеклянный эффект) */
.game-card__online-info {
    position: absolute;
    bottom: 0px;
    left: 0px;
    display: inline-flex; /* Используем inline-flex */
    align-items: center;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--card-online-bg);
    backdrop-filter: blur(5px); /* Размытие фона */
    border: 1px solid rgba(255, 255, 255, 0.15); /* Тонкая светлая граница */
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.3s ease;
    width: 100%;
    justify-content: center;
    margin: 0 auto;
}

/* Опционально: Слегка смещать при наведении на карту */
.game-card:hover .game-card__online-info {
     opacity: 0.7;
     /* transform: translateY(30px); */ /* Уезжает вниз */
}


.game-card__online-indicator {
    width: 8px;
    height: 8px;
    background-color: var(--card-indicator-color);
    border-radius: 50%;
    margin-right: 6px;
    box-shadow: 0 0 5px var(--card-indicator-color); /* Легкое свечение */
    /* Анимация должна быть применена инлайн или через другой класс */
}

.game-card__online-count {
    color: var(--card-online-count-color);
    font-weight: 700;
    margin-right: 4px;
}

.game-card__online-text {
    color: var(--card-online-text-color);
    opacity: 0.8;
}

/* Анимация мигания индикатора */
@keyframes blinkerOnlineGamers {
    50% { opacity: 0.4; box-shadow: 0 0 2px var(--card-indicator-color); }
}
/* Применяем анимацию, если она задана */
[style*="animation: blinkerOnlineGamers"] {
     animation: blinkerOnlineGamers 2s linear infinite;
}

.gx-p{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: 15px;
}

/* --- Общие переменные --- */
:root {
    --banner-radius: 0.75rem; /* 12px */
    --banner-padding: 1.75rem; /* 28px */
    --banner-overlay-start: rgba(10, 10, 20, 0);
    --banner-overlay-mid: rgba(10, 10, 20, 0.6);
    --banner-overlay-end: rgba(10, 10, 20, 0.9);
    --banner-title-color: #ffffff;
    --banner-desc-color: rgba(255, 255, 255, 0.8);
    --banner-button-bg: rgba(255, 255, 255, 0.15);
    --banner-button-bg-hover: rgba(255, 255, 255, 0.25);
    --banner-button-text: #ffffff;
    --banner-arrow-color: #ffffff;
    --banner-arrow-bg: rgba(0, 0, 0, 0.25);
    --banner-pagination-color: rgba(255, 255, 255, 0.5);
    --banner-pagination-active-color: #ffffff;
  
    --mode-card-radius: 0.875rem; /* 14px */
    --mode-card-padding: 1.5rem; /* 24px */
    --mode-card-gap: 1.5rem; /* 24px */
    --mode-card-bg: #2c2c3d; /* Темно-фиолетово-серый */
    --mode-card-bg-hover: #35354a;
    --mode-card-border: 1px solid rgba(255, 255, 255, 0.08);
    --mode-card-title-color: #f0f0f5;
    --mode-card-desc-color: #a0a0b8;
    --mode-card-button-color: #c0c0d8;
    --mode-card-arrow-color: #8a8aa0;
    --mode-card-icon-color: rgba(255, 255, 255, 0.04);
  
    /* Акцентные цвета для карточек режимов */
    --mode-color-slots: #e11d48; /* rose */
    --mode-color-live: #8b5cf6; /* violet */
    --mode-color-social: #0ea5e9; /* sky */
  }
  
  /* --- Стили для Главного Баннера-Слайдера --- */
  .main-banner-wrapper {
    margin-bottom: 2.5rem; /* Отступ после баннера */
    padding: 0 1rem; /* Небольшие отступы по бокам на мобильных */
  }
  
  @media (min-width: 768px) {
    .main-banner-wrapper {
      padding: 0; /* Убираем боковые отступы на больших экранах */
    }
  }
  
  .main-banner-swiper {
    position: relative; /* Для стрелок/пагинации */
    border-radius: var(--banner-radius);
    overflow: hidden; /* Важно для скругления */
  }
  
  .banner-slide {
    display: block; /* Ссылка как блок */
    position: relative;
    height: 16.5625rem; /* 265px */
    overflow: hidden;
    border-radius: var(--banner-radius); /* Скругление для каждого слайда */
    background-color: #333; /* Фоллбэк фон */
    color: var(--banner-title-color);
    text-decoration: none;
  }
  
  /* Контейнер изображения */
  .banner-slide__image-container {
    position: absolute;
    inset: 0;
    z-index: 0;
  }
  
  .banner-slide__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
  }
  
  /* Затемнение + легкий градиент поверх картинки для читаемости */
  .banner-slide__image-container::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, var(--banner-overlay-end) 0%, var(--banner-overlay-mid) 50%, var(--banner-overlay-start) 100%);
      opacity: 0.8; /* Начальная прозрачность градиента */
      transition: opacity 0.3s ease;
  }
  
  
  .banner-slide:hover .banner-slide__image {
    transform: scale(1.05); /* Зум картинки при наведении */
  }
  .banner-slide:hover .banner-slide__image-container::after {
      opacity: 0.9; /* Сделать градиент чуть темнее при наведении */
  }
  
  
  /* Контент поверх */
  .banner-slide__content {
    position: relative; /* Над псевдоэлементом */
    z-index: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Текст сверху, кнопка снизу */
    align-items: flex-start; /* Все по левому краю */
    padding: var(--banner-padding);
    pointer-events: none; /* Текст не должен мешать клику по ссылке */
  }
  
  .banner-slide__text-block {
      display: flex;
      flex-direction: column;
      gap: 0.75rem; /* 12px - меньше чем в оригинале */
  }
  
  .banner-slide__title {
    font-size: 1.75rem; /* 28px */
    font-weight: 700;
    line-height: 1.2;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  }
  
  .banner-slide__description {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    line-height: 1.3;
    color: var(--banner-desc-color);
    max-width: 80%; /* Ограничиваем ширину описания */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
  }
  
  /* Футер и кнопка */
  .banner-slide__footer {
     /* Уже выровнен по левому краю через flex-start родителя */
  }
  
  .banner-slide__button {
    display: inline-block;
    padding: 0.625rem 1.25rem; /* 10px 20px */
    font-size: 0.875rem; /* 14px */
    font-weight: 600;
    border-radius: 50px; /* Круглая кнопка */
    background-color: var(--banner-button-bg);
    backdrop-filter: blur(5px); /* Эффект стекла */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--banner-button-text);
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    pointer-events: auto; /* Кнопка должна быть кликабельна (хотя тут она внутри ссылки) */
  }
  
  .banner-slide:hover .banner-slide__button {
      background-color: var(--banner-button-bg-hover);
      transform: scale(1.05); /* Увеличение кнопки */
      box-shadow: 0 4px 10px rgba(0,0,0,0.15);
  }
  
  /* Стили для стрелок и пагинации Swiper */
  .main-banner-swiper .banner-arrow-prev,
  .main-banner-swiper .banner-arrow-next {
      color: var(--banner-arrow-color);
      background-color: var(--banner-arrow-bg);
      width: 36px;
      height: 36px;
      border-radius: 50%;
      transition: background-color 0.2s ease, opacity 0.2s ease;
  }
  .main-banner-swiper .banner-arrow-prev::after,
  .main-banner-swiper .banner-arrow-next::after {
      font-size: 14px;
      font-weight: bold;
  }
  .main-banner-swiper .swiper-button-disabled {
      opacity: 0.2;
      pointer-events: none;
  }
  
  .main-banner-swiper .banner-pagination .swiper-pagination-bullet {
      background-color: var(--banner-pagination-color);
      opacity: 1;
      width: 8px; height: 8px;
      transition: background-color 0.2s ease;
  }
  .main-banner-swiper .banner-pagination .swiper-pagination-bullet-active {
      background-color: var(--banner-pagination-active-color);
  }
  
  
  /* --- Стили для Карточек Режимов --- */
  .mode-selector-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Три колонки по умолчанию */
    gap: var(--mode-card-gap);
    padding: 0 1rem; /* Отступы по бокам */
  }
  
  /* Адаптивность для грида */
  @media (max-width: 992px) {
    .mode-selector-section {
      /* grid-template-columns: 1fr; */
      grid-template-columns: repeat(2, 1fr);
    }
  }

@media (max-width: 710px) {
    .mode-selector-section {
    grid-template-columns: 1fr;
    }
  }
  
  .mode-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease-out;
  }
  
  .mode-card-link:hover {
    transform: translateY(-5px); /* Подъем карточки при наведении на ссылку */
  }
  
  .mode-card {
    position: relative; /* Для фоновой иконки */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Распределяем контент */
    height: 9.1rem; /* Фиксированная высота (160px) - можно изменить */
    padding: var(--mode-card-padding);
    background-color: var(--mode-card-bg);
    border-radius: var(--mode-card-radius);
    border: var(--mode-card-border);
    overflow: hidden;
    transition: background-color 0.2s ease, border-color 0.2s ease;
  }
  
  .mode-card-link:hover .mode-card {
    background-color: var(--mode-card-bg-hover);
    border-color: rgba(255, 255, 255, 0.15);
  }
  
  /* Акцентный бордер при наведении в зависимости от типа */
  .mode-card::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px; /* Ширина акцентной полосы */
      background-color: transparent; /* По умолчанию прозрачный */
      transition: background-color 0.3s ease;
      border-top-left-radius: var(--mode-card-radius); /* Скругление */
      border-bottom-left-radius: var(--mode-card-radius);
  }
  
  .mode-card-link:hover .mode-card--slots::before { background-color: var(--mode-color-slots); }
  .mode-card-link:hover .mode-card--live::before { background-color: var(--mode-color-live); }
  .mode-card-link:hover .mode-card--social::before { background-color: var(--mode-color-social); }
  
  
  /* Заголовок и описание */
  .mode-card__header {
    position: relative;
    z-index: 1;
  }
  
  .mode-card__title {
    font-size: 1.5rem; /* 24px */
    font-weight: 600;
    color: var(--mode-card-title-color);
    margin-bottom: 0.25rem; /* 4px */
    line-height: 1.3;
  }
  
  .mode-card__description {
    font-size: 0.875rem; /* 14px */
    color: var(--mode-card-desc-color);
    line-height: 1.4;
    /* Убираем инлайн стиль display:none */
    display: block !important; /* Переопределяем инлайн стиль, если он есть */
  }
  
  /* Футер и кнопка */
  .mode-card__footer {
    position: relative;
    z-index: 1;
    margin-top: auto; /* Прижимаем футер книзу, если высота позволяет */
  }
  
  .mode-card__button {
    display: inline-flex; /* Используем inline-flex для иконки */
    align-items: center;
    font-size: 0.9375rem; /* 15px */
    font-weight: 500;
    color: var(--mode-card-button-color);
    transition: color 0.2s ease;
  }
  
  .mode-card-link:hover .mode-card__button {
      color: #ffffff; /* Белый при наведении на ссылку */
  }
  
  .mode-card__arrow {
    margin-left: 0.5rem; /* 8px */
    font-size: 1.2em; /* Делаем стрелку чуть больше */
    line-height: 1;
    transition: transform 0.2s ease;
    color: var(--mode-card-arrow-color);
  }
  
  .mode-card-link:hover .mode-card__arrow {
    transform: translateX(4px); /* Сдвиг стрелки */
    color: #ffffff; /* Белая при наведении */
  }
  
  /* Фоновая иконка */
  .mode-card__background-icon {
    position: absolute;
    top: 0px; /* Частично видна снизу */
    right: -15px;
    font-size: 6rem; /* Большой размер */
    line-height: 1;
    color: var(--mode-card-icon-color); /* Очень бледная */
    z-index: 0;
    /* transform: rotate(-15deg); */ /* Небольшой наклон */
    transition: color 0.3s ease, transform 0.4s ease;
    user-select: none;
    pointer-events: none;
  }
  .mode-card__background-icon svg {
      display: block;
      width: 1em;
      height: 1em;
  }
  
  
  .mode-card-link:hover .mode-card__background-icon {
      color: rgba(255, 255, 255, 0.08); /* Чуть заметнее */
      transform: rotate(-5deg) scale(1.2); /* Легкий поворот и увеличение */
  }
  /* Можно задать разные иконки для разных карточек через CSS, если нужно */
  /* .mode-card--slots .mode-card__background-icon svg { ... } */

  .gx-con > .title {
    color: #fff;
    font-weight: 300;
    font-size: 13px;
    padding-right: 20px;
}

/* --- Переменные для Мини-Игр --- */
:root {
    --minigame-grid-gap: 1rem; /* 16px */
    --minigame-card-radius: 12px;
    --minigame-card-padding: 1rem; /* 16px */
    --minigame-overlay-color-start: rgba(18, 18, 28, 0);
    --minigame-overlay-color-mid: rgba(18, 18, 28, 0.6);
    --minigame-overlay-color-end: rgba(18, 18, 28, 0.95);
    --minigame-title-color: #ffffff;
    --minigame-button-color: #c0c0d8;
    --minigame-button-color-hover: #ffffff;
    --minigame-arrow-color: #8a8aa0;
    --minigame-soon-filter: grayscale(90%) brightness(0.6);
}

/* --- Стили Сетки Мини-Игр --- */
.mini-game-grid {
  display: grid;
  /* Минимум 140px, максимум 1fr */
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: var(--minigame-grid-gap);
  padding: 0 1rem; /* Отступы по бокам */
  margin-bottom: 2.5rem;
}

/* Больше колонок на больших экранах */
@media (min-width: 768px) {
  .mini-game-grid {
     /* Минимум 160px */
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  }
}
@media (min-width: 1200px) {
  .mini-game-grid {
     /* Минимум 180px */
     grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
}


/* --- Стили Карточки Мини-Игры --- */
.mini-game-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--minigame-card-radius); /* Скругление на ссылке для тени */
  transition: transform 0.25s ease-out, box-shadow 0.25s ease-out;
  box-shadow: 0 4px 10px rgba(0,0,0, 0.15);
}

.mini-game-link:hover:not(.is-soon) { /* Не применять ховер к "Soon" */
  transform: translateY(-6px);
  box-shadow: 0 8px 20px rgba(0,0,0, 0.2);
}

.mini-game-card {
  position: relative;
  display: flex; /* Используем flex для выравнивания контента */
  flex-direction: column; /* Располагаем контент вертикально */
  justify-content: flex-end; /* Прижимаем контент к низу */
  height: 0; /* Используем padding-bottom для соотношения сторон */
  /* Соотношение 780/670 * 100% ≈ 116.4% */
  padding-bottom: 116.4%;
  border-radius: var(--minigame-card-radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #333; /* Фон, если картинка не загрузится */
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); /* Плавный зум фона */
}

.mini-game-link:hover:not(.is-soon) .mini-game-card {
    transform: scale(1.04); /* Зум фона при наведении */
}

/* Применяем фоновые изображения */
.mode-card_mines { background-image: url('/assets/images/new_games/mines.jpg'); } /* Укажи правильный путь! */
.mode-card_crash { background-image: url('/assets/images/new_games/crash.jpg'); }
.mode-card_dice { background-image: url('/assets/images/new_games/dice.jpg'); }
.mode-card_jackpot { background-image: url('/assets/images/new_games/coinflip.jpg'); } /* Используем Coinflip? */
.mode-card_double {/* background-image: url('/assets/images/new_games/shoot.jpg'); */} /* Используем Shoot? */
.mode-card_wheel {/* background-image: url('/assets/images/new_games/x100.jpg'); */} /* Укажи правильный путь! */
.mode-card_overgo {/* background-image: url('/assets/images/new_games/x30.jpg'); */} /* Укажи правильный путь! */
/* Добавь остальные классы для фонов, если они есть */


/* Оверлей с градиентом и контентом */
.mini-game-card__overlay-content {
    position: absolute;
    inset: 0; /* Занимает всю карточку */
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* Прижимает все к низу */
    padding: var(--minigame-card-padding);
    background: linear-gradient(
        to top,
        var(--minigame-overlay-color-end) 10%,
        var(--minigame-overlay-color-mid) 40%,
        var(--minigame-overlay-color-start) 80%
    );
    z-index: 1;
    transition: background 0.3s ease; /* Плавный переход градиента */
}

.mini-game-link:hover:not(.is-soon) .mini-game-card__overlay-content {
    /* Можно сделать градиент чуть менее интенсивным при наведении */
     background: linear-gradient(
        to top,
        rgba(18, 18, 28, 0.9) 5%, /* Чуть ниже начинается темный */
        rgba(18, 18, 28, 0.5) 45%,
        rgba(18, 18, 28, 0) 85%
    );
}


/* Заголовок игры */
.mini-game-card__header {
    /* Заголовок сам по себе, позиционируется потоком внутри overlay */
}

.mini-game-card__title {
  display: block !important; /* Переопределяем инлайн стиль */
  font-size: 1.125rem; /* 18px */
  font-weight: 600;
  color: var(--minigame-title-color);
  line-height: 1.3;
  margin-bottom: 0.75rem; /* Отступ до кнопки, которая появится */
  text-shadow: 1px 1px 2px rgba(0,0,0,0.7);
  transition: transform 0.3s ease; /* Для эффекта при наведении */
}

.mini-game-link:hover:not(.is-soon) .mini-game-card__title {
    /* transform: translateY(-5px); */ /* Можно немного поднять заголовок */
}


/* Описание игры (скрыто) */
.mini-game-card__description {
  display: none !important; /* Скрываем, как было в HTML */
}

/* Футер с кнопкой (появляется) */
.mini-game-card__footer {
   opacity: 0; /* Скрыт по умолчанию */
   transform: translateY(8px); /* Начинает чуть ниже */
   transition: opacity 0.25s ease-out, transform 0.25s ease-out;
   pointer-events: none; /* Не мешает наведению */
}

.mini-game-link:hover:not(.is-soon) .mini-game-card__footer {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Кнопка "Начать игру" */
.mini-game-card__button {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem; /* 14px */
  font-weight: 500;
  color: var(--minigame-button-color);
  transition: color 0.2s ease;
}

.mini-game-link:hover:not(.is-soon) .mini-game-card__button {
    color: var(--minigame-button-color-hover);
}

/* Стрелка */
.mini-game-card__arrow {
  display: inline-block !important; /* Показываем стрелку */
  width: 16px; /* Размер стрелки */
  height: 16px;
  margin-left: 0.4rem;
  fill: currentColor; /* Наследует цвет кнопки */
  vertical-align: middle;
  transition: transform 0.2s ease;
}

.mini-game-link:hover:not(.is-soon) .mini-game-card__arrow {
  transform: translateX(4px); /* Сдвиг стрелки */
}

/* --- Стили для недоступных игр --- */
.mini-game-link.is-soon {
    cursor: default;
}

.mini-game-link.is-soon .mini-game-card {
    filter: var(--minigame-soon-filter);
    /* Можно добавить легкое размытие, но не перестараться */
    /* filter: grayscale(90%) brightness(0.6) blur(1px); */
}

/* Убираем hover-эффекты для "Soon" */
.mini-game-link.is-soon:hover {
    transform: none;
    box-shadow: 0 4px 10px rgba(0,0,0, 0.15); /* Оставляем базовую тень */
}
.mini-game-link.is-soon:hover .mini-game-card {
    transform: none; /* Отменяем зум фона */
}
.mini-game-link.is-soon .mini-game-card__overlay-content {
    /* Можно сделать оверлей чуть плотнее */
    background: linear-gradient( to top, rgba(18, 18, 28, 1) 10%, rgba(18, 18, 28, 0.7) 50%, rgba(18, 18, 28, 0.1) 100% );
}
.mini-game-link.is-soon .mini-game-card__footer {
    opacity: 1; /* Показываем футер */
    transform: translateY(0);
}
.mini-game-link.is-soon .mini-game-card__button {
    color: #999; /* Серый цвет для текста "Soon" */
}
.mini-game-link.is-soon .mini-game-card__arrow {
    display: none !important; /* Убедимся, что стрелка скрыта */
}

.preloader.preloader-remove {
    display: none !important;
    /* opacity: 0; */
    /* transition: .8s; */
    /* z-index: 0; */
}

/* === Новый стиль для Выпадающего Профиля/Уведомлений === */

/* Переменные для легкой настройки */
:root {
    --profile-dd-bg: rgb(27 32 48); /* Темно-синий полупрозрачный */
    --profile-dd-blur: 8px;
    --profile-dd-border: 1px solid rgba(255, 255, 255, 0.1);
    --profile-dd-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --profile-dd-radius: 12px;
    --profile-dd-text-primary: #e5e7eb; /* Светло-серый */
    --profile-dd-text-secondary: #9ca3af; /* Серый */
    --profile-dd-text-header: #f3f4f6;
    --profile-dd-icon-color: #9ca3af;
    --profile-dd-divider-color: rgba(255, 255, 255, 0.1);
    --profile-dd-accent-color: #3b82f6; /* Синий (пример) */
    --notification-bg: rgb(27 32 48);
    --notification-bg-hover: rgb(27 32 48);
    --notification-icon-bg: rgba(55, 65, 81, 0.8); /* Чуть темнее/плотнее */
    --notification-radius: 8px;
    --notification-title-color: #f9fafb;
    --notification-text-color: #d1d5db;
    --notification-time-color: #6b7280;
    --footer-button-bg: rgba(55, 65, 81, 0.7);
    --footer-button-bg-hover: rgba(75, 85, 99, 0.9);
    --footer-button-text: #d1d5db;
    --footer-button-text-hover: #ffffff;
}

/* --- Основной контейнер дропдауна --- */
.n-header-profile-div {
    display: none; /* Управляется JS */
    position: absolute;
    top: 55px; /* Чуть ниже, чтобы не налегать на хедер */
    right: 5px;
    width: 360px; /* Немного шире */
    max-height: 450px; /* Ограничение высоты, чтобы не уезжал за экран */
    overflow-y: auto; /* Вертикальный скролл */
    overflow-x: hidden; /* Без горизонтального */
    background: var(--profile-dd-bg);
    backdrop-filter: blur(var(--profile-dd-blur));
    border-radius: var(--profile-dd-radius);
    border: var(--profile-dd-border);
    box-shadow: var(--profile-dd-shadow);
    color: var(--profile-dd-text-primary);
    padding: 0; /* Убираем старый padding, будем задавать для дочерних */
    animation: profile-dropdown-appear 0.3s ease-out forwards;
    transform-origin: top right;
    /* Стилизация скроллбара */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
}

/* Анимация появления */
@keyframes profile-dropdown-appear {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(-10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Стилизация скроллбара для Webkit (Chrome, Safari, Edge) */
.n-header-profile-div::-webkit-scrollbar {
    width: 6px;
}
.n-header-profile-div::-webkit-scrollbar-track {
    background: transparent;
    margin: 5px 0; /* Отступы сверху/снизу трека */
}
.n-header-profile-div::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
    border: none;
}
.n-header-profile-div::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* --- Шапка дропдауна --- */
.notify-div {
    display: flex;
    align-items: center; /* Выравнивание по центру */
    justify-content: space-between;
    padding: 0.75rem 1rem; /* 12px 16px */
    border-bottom: 1px solid var(--profile-dd-divider-color);
    position: sticky; /* Залипающая шапка */
    top: 0;
    background: inherit; /* Наследует фон родителя */
    backdrop-filter: inherit; /* Наследует блюр */
    z-index: 1; /* Над уведомлениями */
}

.notify-div-children {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem; /* Расстояние между иконкой и текстом */
    margin: 0; /* Убираем старые отступы */
}

.notify-div-children h1 {
    font-size: 1.1rem; /* 17.6px */
    font-weight: 600;
    color: var(--profile-dd-text-header);
    padding: 0; /* Убираем старые отступы */
    line-height: 1;
}

.notify-div-children svg.svg-icon {
    width: 20px;
    height: 20px;
    fill: var(--profile-dd-icon-color); /* Серый цвет иконки */
}

/* Кнопка закрытия (справа) */
.notify-div-children-2 {
    display: inline-flex; /* Убираем старые стили */
    margin: 0;
}

.notify-div-children-2 button {
    /* Стилизуем как иконку */
    background: transparent;
    border: none;
    padding: 0.25rem; /* Небольшая область клика */
    margin: -0.25rem; /* Компенсируем паддинг */
    border-radius: 50%;
    cursor: pointer;
    transition: background-color 0.2s ease;
    color: var(--profile-dd-icon-color); /* Цвет иконки */
}

.notify-div-children-2 button:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--profile-dd-text-primary);
}

.notify-div-children-2 button svg {
    display: block; /* Убираем лишние отступы */
    width: 18px;
    height: 18px;
    fill: currentColor; /* Наследует цвет от кнопки */
}

/* --- Блок "Новые / Отметить прочитанным" --- */
/* (Предполагаем, что display:none убирается через JS) */
#clearsBtn {
    display: flex; /* Был display:none, теперь управляем через JS */
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem; /* 8px 16px */
    font-size: 0.75rem; /* 12px */
    color: var(--profile-dd-text-secondary);
    background-color: rgba(0, 0, 0, 0.1); /* Чуть другой фон */
}
#clearsBtn > div:first-child { /* Левая часть */
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: default; /* Не кликабельно */
}
#clearsBtn .scale-up { /* Индикатор "новые" */
    background-color: var(--profile-dd-accent-color) !important; /* Яркий акцент */
    width: 8px !important; height: 8px !important;
    margin: 0 !important; transform: none !important; /* Убираем старые инлайн */
    border-radius: 50%;
    animation: blinkerOnlineGamers 1.5s linear infinite !important;
}
@keyframes blinkerOnlineGamers { 50% { opacity: 0.3; } }

#clearsBtn span[onclick] { /* "Отметить прочитанным" */
    cursor: pointer;
    transition: color 0.2s ease;
}
#clearsBtn span[onclick]:hover {
    color: var(--profile-dd-text-primary);
}

/* --- Контейнер уведомлений --- */
#NotificationsMedia {
    padding: 0.5rem 1rem 1rem 1rem; /* Отступы вокруг списка */
}

/* --- Отдельное уведомление --- */
.notification {
    display: flex;
    gap: 0.75rem; /* 12px */
    padding: 0.75rem; /* 12px */
    background-color: var(--notification-bg);
    border-radius: var(--notification-radius);
    transition: background-color 0.2s ease, transform 0.2s ease;
    cursor: pointer; /* Если уведомление кликабельно */
}
/* Отступ между уведомлениями */
.notification:not(:last-child) {
    margin-bottom: 0.6rem; /* 10px */
}

.notification:hover {
    background-color: var(--notification-bg-hover);
    /* transform: scale(1.02); */ /* Увеличение может мешать скроллу */
}

/* Иконка уведомления */
.notification-icon {
    flex-shrink: 0;
    width: 36px; /* Чуть меньше */
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--notification-icon-bg); /* Сохраняем цвет */
}
.notification-icon svg.svg-icon {
    width: 18px;
    height: 18px;
    /* fill: var(--profile-dd-accent-color); */ /* Можно использовать акцент */
}

/* Тело уведомления */
.notification-body {
    /* flex-grow: 1; */
    /* background: none !important; */ /* Убираем старый фон */
    /* padding: 0; */ /* Убираем лишние отступы */
}

/* Заголовок уведомления */
.notification-body .title {
    margin-bottom: 0.25rem; /* 4px */
}
.notification-body .title span[style*="font-weight: 700"] {
    font-size: 0.95rem !important; /* 15.2px */
    font-weight: 600 !important; /* Чуть менее жирный */
    color: var(--notification-title-color);
}

/* Текст уведомления */
.notification-body span[style*="font-size: 12px;"] {
    font-size: 0.8125rem !important; /* 13px */
    color: var(--notification-text-color);
    line-height: 1.4;
}
.notification-body span[style*="font-size: 12px;"] span[style*="color: gray"] {
    font-size: 0.75rem !important; /* 12px */
    color: var(--notification-time-color) !important;
    display: block; /* На новой строке */
    margin-top: 0.25rem; /* 4px */
}
/* Иконки валют в тексте */
.notification-body span[style*="font-size: 12px;"] svg.icon {
    width: 1em !important; /* Размер подстраивается под текст */
    height: 1em !important;
    vertical-align: -0.125em; /* Чуть опустить для выравнивания */
    margin: 0 0.1em; /* Небольшие отступы */
    /* fill: currentColor; */ /* Чтобы цвет наследовался или был оранжевым */
}

/* --- Сообщение "Уведомлений нет" --- */
#nonotification {
    display: flex; /* Управляется JS */
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1rem; /* Больше отступы */
    gap: 0.75rem;
}
#nonotification svg {
    width: 50px;
    height: 50px;
    fill: #4b5563; /* Темно-серый */
    margin-bottom: 0.5rem;
    transform: rotate(0deg) !important; /* Убираем поворот */
}
#nonotification h1 {
    font-size: 1rem; /* 16px */
    font-weight: 500;
    color: var(--profile-dd-text-secondary);
    padding: 0; margin: 0;
}
#nonotification span {
    font-size: 0.875rem; /* 14px */
    color: #6b7280; /* Еще светлее серый */
}

/* --- Футер дропдауна --- */
.end-footer-div {
    position: sticky; /* Залипающий футер */
    bottom: 0;
    padding: 0.75rem 1rem; /* 12px 16px */
    margin-top: 1rem;
    text-align: center;
    background: inherit; /* Наследует фон родителя */
    backdrop-filter: inherit; /* Наследует блюр */
    border-top: 1px solid var(--profile-dd-divider-color);
    z-index: 1; /* Над уведомлениями */
}
.end-footer-div h1 {
    font-size: 0.75rem; /* 12px */
    color: var(--profile-dd-text-secondary);
    margin-bottom: 0.5rem; /* Отступ до кнопок */
    font-weight: 400;
}
.end-footer-div button {
    font-size: 0.8125rem; /* 13px */
    font-weight: 500;
    background: var(--footer-button-bg);
    color: var(--footer-button-text);
    border: none;
    padding: 0.5rem 1rem; /* 8px 16px */
    border-radius: 6px;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    width: auto; /* Авто ширина */
    margin: 0 0.25rem; /* Небольшой отступ между кнопками */
}
.end-footer-div button:hover {
    background: var(--footer-button-bg-hover);
    color: var(--footer-button-text-hover);
}
/* Скрываем кнопку "Отметить прочитанным", если не нужна */
/* #end-footer-div button[onclick*="NotyReadInit"] { display: none; } */

/* --- Убираем старые стили кнопок (если они были глобальные) --- */
.n-header-profile-div > button { /* Только для прямых потомков, если есть */
   all: unset; /* Сбрасываем все стили, если были */
}
.n-header-profile-div button { /* Применяем ко всем кнопкам внутри */
  /* Сюда можно добавить общие стили для кнопок, если нужно */
}
/* Убираем старый ховер, который был в вашем CSS */
.n-header-profile-div button:hover {
    background: none; /* Отменяем старый синий фон */
}
.n-header-profile-div button:hover svg {
    fill: #fff; /* Отменяем старый белый цвет иконки */
}

/* === Новый стиль для Выпадающего Меню Профиля === */

/* --- Используем переменные из предыдущего ответа --- */
/* Убедись, что эти переменные определены в :root */
/*
:root {
    --profile-dd-bg: rgba(27, 32, 48, 0.85);
    --profile-dd-blur: 8px;
    --profile-dd-border: 1px solid rgba(255, 255, 255, 0.1);
    --profile-dd-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    --profile-dd-radius: 12px;
    --profile-dd-text-primary: #e5e7eb;
    --profile-dd-text-secondary: #9ca3af;
    --profile-dd-icon-color: #9ca3af;
    --profile-dd-divider-color: rgba(255, 255, 255, 0.1);
    --profile-dd-accent-color: #3b82f6;
    --notification-bg-hover: rgba(55, 65, 81, 0.7); // Для hover кнопок
}
*/

/* --- Основной контейнер тултипа/дропдауна --- */
.profiletooltip {
    display: none; /* Управляется JS классом .openel */
    position: absolute; /* Позиционируется относительно родителя */
    z-index: 1500; /* Выше большинства элементов */
    /* Убираем старую анимацию, т.к. она может конфликтовать */
    /* animation: ani 0.2s forwards; */
}

/* Класс для показа */
.profiletooltip.openel {
    display: block;
}

/* Обертка для позиционирования (из Svelte) */
.tooltip-wrapper.svelte-yjqf2g {
    /* Стили позиционирования задаются инлайн JS */
    /* Убираем Z-index отсюда, зададим на .profiletooltip */
}

/* Основной блок тултипа */
.tooltip.svelte-yjqf2g {
    position: relative; /* Для стрелки */
    width: 280px; /* Фиксированная ширина (можно изменить) */
    max-width: calc(100vw - 20px); /* Не вылезать за экран */
    background: var(--profile-dd-bg);
    backdrop-filter: blur(var(--profile-dd-blur));
    border-radius: var(--profile-dd-radius);
    border: var(--profile-dd-border);
    box-shadow: var(--profile-dd-shadow);
    color: var(--profile-dd-text-primary); /* Цвет текста по умолчанию */
    overflow: hidden; /* Скрываем вылезающий скроллбар */
    animation: profile-dropdown-appear 0.25s ease-out forwards; /* Анимация появления */
    transform-origin: top right; /* Точка анимации */
    /* Убираем стили variant-dark/light, если они не нужны */
}

/* Переопределяем цвет стрелки */
.tooltip.svelte-yjqf2g {
     /* Цвет фона */
    --arrow-color: var(--profile-dd-bg);
    /* Если есть граница, стрелка должна быть цвета границы +1px к размеру */
    /* --arrow-color: var(--profile-dd-border); */
}
.arrow.svelte-yjqf2g, .arrow.svelte-yjqf2g:before {
     background: var(--arrow-color) !important; /* Переопределяем инлайн */
     border: none; /* Убираем возможную границу на стрелке */
     /* Если тултип с границей, можно имитировать ее на стрелке */
     /* border-right: 1px solid rgba(255,255,255,0.1); */
     /* border-bottom: 1px solid rgba(255,255,255,0.1); */
}
/* Позиционирование стрелки (оставляем Svelte/Popper) */
.tooltip-wrapper[data-popper-placement^=top] .arrow { bottom: -4px; }
.tooltip-wrapper[data-popper-placement^=bottom] .arrow { top: -4px; }
.tooltip-wrapper[data-popper-placement^=left] .arrow { right: -4px; }
.tooltip-wrapper[data-popper-placement^=right] .arrow { left: -4px; }


/* Анимация появления (можно использовать ту же, что и для уведомлений) */
@keyframes profile-dropdown-appear {
    from { opacity: 0; transform: scale(0.95) translateY(-10px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

/* Контейнер для скролла */
.dropdown-scroll-content.svelte-yjqf2g {
    display: flex;
    flex-direction: column;
    padding: 0.5rem 0; /* 8px сверху/снизу, 0 по бокам */
    max-height: inherit; /* Наследует высоту от родителя */
    overflow-x: hidden;
    overflow-y: auto; /* Скролл только если нужно */
    /* Стилизация скроллбара */
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent; /* Firefox */
}
.dropdown-scroll-content.svelte-yjqf2g::-webkit-scrollbar { width: 6px; }
.dropdown-scroll-content.svelte-yjqf2g::-webkit-scrollbar-track { background: transparent; }
.dropdown-scroll-content.svelte-yjqf2g::-webkit-scrollbar-thumb {
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}
.dropdown-scroll-content.svelte-yjqf2g::-webkit-scrollbar-thumb:hover {
    background-color: rgba(255, 255, 255, 0.4);
}

/* --- Элементы Меню (Кнопки/Ссылки) --- */
.dropdown-scroll-content > button,
.dropdown-scroll-content > a {
    /* Общие стили для кнопок и ссылок */
    display: flex !important; /* Переопределяем inline-flex */
    align-items: center;
    gap: 0.75rem; /* 12px между иконкой и текстом */
    padding: 0.75rem 1rem; /* 12px 16px */
    background: transparent;
    border: none;
    border-radius: 0; /* Убираем скругление, будет на всем меню */
    text-align: left;
    width: 100%;
    font-size: 0.9rem; /* 14.4px */
    font-weight: 500; /* Средний */
    color: var(--profile-dd-text-primary);
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-decoration: none; /* Для ссылок */
    white-space: nowrap; /* Предотвращаем перенос текста */
}

/* Стили для SVG иконок внутри кнопок/ссылок */
.dropdown-scroll-content > button svg.svg-icon,
.dropdown-scroll-content > a svg.svg-icon {
    width: 18px; /* Уменьшаем иконки */
    height: 18px;
    fill: var(--profile-dd-icon-color); /* Используем вторичный цвет */
    flex-shrink: 0; /* Не сжимать иконку */
    transition: fill 0.2s ease;
}

/* Стили для изображения профиля */
.dropdown-scroll-content > button img {
    width: 26px; /* Размер аватарки */
    height: 26px;
    border-radius: 50%; /* Круглая */
    border: 1px solid rgba(255, 255, 255, 0.1); /* Легкая обводка */
    object-fit: cover;
    flex-shrink: 0;
}

/* Текст внутри кнопок/ссылок */
.dropdown-scroll-content > button span,
.dropdown-scroll-content > a span {
    flex-grow: 1; /* Текст занимает оставшееся место */
    line-height: 1.3;
    /* Сбрасываем черный цвет из старого CSS */
    color: inherit !important;
}

/* Hover эффект */
.dropdown-scroll-content > button.btfs:hover, /* Используем класс btfs для ховера */
.dropdown-scroll-content > a.btfs:hover {
    background-color: var(--notification-bg-hover); /* Такой же фон, как у ховера уведомлений */
    color: #ffffff; /* Яркий белый текст */
}

.dropdown-scroll-content > button.btfs:hover svg.svg-icon,
.dropdown-scroll-content > a.btfs:hover svg.svg-icon {
    fill: #ffffff; /* Белая иконка при ховере */
}

/* Разделитель после первой кнопки (профиля) */
.dropdown-scroll-content > button[onclick*="/profile"] {
    border-bottom: 1px solid var(--profile-dd-divider-color);
    margin-bottom: 0.25rem; /* Небольшой отступ после разделителя */
    padding-bottom: 0.75rem; /* Отступ до разделителя */
}

/* Убираем старый hover .btfs */
.btfs:hover {
    color: inherit; /* Сбрасываем старый */
    background-color: inherit; /* Сбрасываем старый */
}

/* ---- Специфичные стили для Svelte Tooltip (если используются) ---- */
/* Эти стили могут быть не нужны, если .profiletooltip - основной контейнер */
.tooltip.svelte-1rqvmwc { display: none; } /* Скрываем базовый, если он дублируется */
.tooltip-content.svelte-1rqvmwc { /* Стилизуем под наш дизайн */
    background: var(--profile-dd-bg);
    backdrop-filter: blur(var(--profile-dd-blur));
    border: var(--profile-dd-border);
    color: var(--profile-dd-text-primary);
    box-shadow: var(--profile-dd-shadow);
    border-radius: var(--profile-dd-radius);
    padding: 0.5rem; /* Меньший паддинг, если это чисто Svelte тултип */
}
.tooltip-content.svelte-1rqvmwc:after { /* Стрелка Svelte тултипа */
    /* Стили остаются, но цвет должен совпадать */
     border-top-color: var(--profile-dd-bg);
     border-bottom-color: var(--profile-dd-bg);
}

#tooltipsList {
}

.aubanner{
    display: inline-flex;font-size: 25px;align-items: center;justify-content: center;text-align: center;font-weight: 700;flex-direction: column;max-width: 374px
}

.auBut{
    font-weight: 600;width: 90%;display: inline-flex;text-align: center;align-items: center;justify-content: center;margin-top: 15px;
}

.auor{
    font-size: 12px;margin-top: 15px;color: gray;margin-bottom: 15px
}

.ausoc{
    background: #31364540;padding: 5px;border: 1px solid #0000004f;border-radius: 8px;
}

.btn-hided{
    background: linear-gradient(166deg, #1a2c38, #00000000);
    border: 1px solid #1475e169 !important;!i;!;!ш;!шь;!шьз;!шь;!ш;!;
}
.btn-hided:hover{
   background: #1475e1
}

/* ------ NEW WALLET BY SALAVAT ------ */
.n2wallet-head{
    margin-left: 12px;
    display: inline-flex;
    gap: 8px;
    font-size: 15px;
    align-items: center;
    color: white;
    fill: white;
    font-weight: 700;
}
.n2wallet-body{
    width: 100%;
    padding: 15px 25px;
    /* height: 55px; */
}
.n2wallet-categories{
    color: white;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    gap: 1px;
    padding: 5px 1px;
    justify-content: space-evenly;
    background: #162a39;
    width: 100%;
    height: 55px;
    border-radius: 25px;
    /* padding: 5px; */
    align-items: center;
}
.n2wallet-items{
    color: white;font-size: 20px;font-weight: 700;display: inline-flex;gap: 5px;flex-direction: column;padding: 15px 25px;
}
.n2wallet-buttons{
    display: inline-flex;gap: 10px;justify-content: space-around;
}
.n2wallet-bs{
    background: #162a39;
    /* padding: 10px 40px; */
    border-radius: 85px;
    width: 100%;
    height: 100%;
}
.n2wallet-selectb, .n2wallet-bs:hover{
    background: #0f212e;
}

.loaderWinbet {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: block;
    margin:15px auto;
    position: relative;
    color: #FFF;
    left: -100px;
    box-sizing: border-box;
    animation: shadowRolling 2s linear infinite;
}

@keyframes shadowRolling {
    0% {
        box-shadow: 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }
    12% {
        box-shadow: 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }
    25% {
        box-shadow: 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0), 0px 0 rgba(255, 255, 255, 0);
    }
    36% {
        box-shadow: 120px 0 white, 110px 0 white, 100px 0 white, 0px 0 rgba(255, 255, 255, 0);
    }
    50% {
        box-shadow: 130px 0 white, 120px 0 white, 110px 0 white, 100px 0 white;
    }
    62% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white, 110px 0 white;
    }
    75% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white, 120px 0 white;
    }
    87% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 130px 0 white;
    }
    100% {
        box-shadow: 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0), 200px 0 rgba(255, 255, 255, 0);
    }
}
.width100{
width: 100%;
}

.n2wallet-1{
padding: 25px;color: white;
}

.n2wallet-div1{font-weight: 700;display: flex;flex-direction: column;font-size: 12px;}

.n2wallet-span1{
font-size: 15px;color: #7388af;
}

.n2wallet-span2{
font-size: 18px;display: inline-flex;align-items: center;gap: 5px;
}

.n2wallet-body1{
    background: #162a39;border-radius: 15px;margin-top: 15px;font-weight: 500;padding: 10px 15px;color: #7388af;
    cursor: pointer !important;
    *{cursor: pointer !important;}
}

button.n2wallet-body1 {
    transition: transform 0.2s ease;
}

button.n2wallet-body1:active {
    transform: scale(0.96);
}

.n2wallet-del{
display: inline-flex;justify-content: space-between;padding: 10px 0px;border-bottom: 1px solid #7388af;
}

.n2wallet-del2{display: inline-flex;justify-content: space-between;padding: 1px 0px;gap: 10px;align-items: center;}

.n2wallet-span3{
display: inline-flex;align-items: center;justify-content: space-between;color: #fff;font-weight: 700;
}

.n2wallet-span4{
display: inline-flex;align-items: center;justify-content: space-between;color: #7388af;font-weight: 500;
}

.n2wallet-span5{
font-size: 12px;font-weight: 500;
}

.wh100{
    width: 100%;
    height: 100%;
}

.n2wallet-input{
    width: 100%;color: var(--input-color);background: var(--input-background);box-shadow: var(--input-box-shadow);border: var(--input-border-width) solid var(--input-border);border-radius: var(--input-border-radius);letter-spacing: var(--input-letter-spacing);font-weight: var(--input-font-weight);transition: all var(--input-transition);outline: 0;margin: 0;cursor: text;-webkit-appearance: none;-moz-appearance: none;appearance: none;font-size: var(--text-size-default);box-shadow: none;padding: 0.5em;
}

.n2wallet-hr{
    border-color: #2f4553;margin: 25px 10px 15px 10px;border-top-width: 2px;
}

.n2wallet-fi{
    padding: 5px 10px;gap: 5px;display: inline-flex;flex-direction: column;width: 100%;
    div{
        margin-top: 15px;font-size: 14px;font-weight: 600;
    }
}

.n2wallet-form{
    display: inline-flex;flex-direction: column;align-items: stretch;width: 100%;padding: 0px 10px;
    .n2{
        display: inline-flex;align-items: stretch;justify-content: space-between;width: 100%;
    }
}

.n2wtr{
    display: inline-flex;justify-content: center;align-items: center;gap: 10px;
}

.listmethods, .listmethods2, .listmethodscrypto, .listmethodsbanks{
    width: 100%;height: 200px;overflow: scroll;
    overflow-x: hidden;
    padding: 0px 15px;
}

.listmethods::-webkit-scrollbar, .listmethods2::-webkit-scrollbar, .listmethodscrypto::-webkit-scrollbar, .listmethodsbanks::-webkit-scrollbar {
  width: 4px;
}

.listmethods::-webkit-scrollbar-track, .listmethods2::-webkit-scrollbar-track, .listmethodscrypto::-webkit-scrollbar-track, .listmethodsbanks::-webkit-scrollbar-track{
  background: #162a3900;
  border-radius: 10px;
}

.listmethods::-webkit-scrollbar-thumb, .listmethods2::-webkit-scrollbar-thumb, .listmethodscrypto::-webkit-scrollbar-thumb, .listmethodsbanks::-webkit-scrollbar-thumb{
  background: #162a39;
  border-radius: 10px;
}

.listmethods::-webkit-scrollbar-thumb:hover, .listmethods2::-webkit-scrollbar-thumb:hover, .listmethodscrypto::-webkit-scrollbar-thumb:hover, .listmethodsbanks::-webkit-scrollbar-thumb:hover{
  background: #1a2c38;
}

.uui1mobile{}
@media only screen and (max-width: 1000px)
{
    .uui1mobile{
        justify-content: center;
    }
}

.rightbar{
    background: #1b2030;
    box-shadow: 0 0 12px #0a0c1063;
    padding: 20px 15px;
    /*z-index: 7;*/
    border: 1px solid #20273a;
}
.rightbar__inner {
    width: 200px;
}

.rightbar {
    position: fixed;
    right: 0;
    top: 0;
    padding: 26px 30px;
    height: 100%;
    z-index: 5;
    transform: translateX(0px);
    transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s;
    opacity: 1;
    pointer-events: auto;
}

.rBarButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    font-weight: bold;
    color: #fff;
    cursor: pointer !important;
    transition: color 0.3s;
}
.rBarButton svg {
    fill: #fff !important;
    color: #fff !important;
    cursor: pointer !important;
    transition: fill 0.3s, color 0.3s;
}
.rBarButton span {
    cursor: pointer !important;
    transition: color 0.3s;
}

.rBarButton:hover {
    color: #4e6287;
}
.rBarButton:hover svg {
    fill: #4e6287 !important;
    color: #4e6287 !important;
}
.rBarButton:hover span {
    color: #4e6287;
}

.active-hideRightbar {
    transform: translateX(450px);
    opacity: 0;
    pointer-events: none;
}
.rightbar__inner{
    width: 350px !important;
}

@media only screen and (max-width: 600px)
{
    .rightbar{
        width: 100% !important;
    }
    .rightbar__inner{
        width: 100% !important;
    }
    .bg-bigger, .bg-items{
        height: 300px;
    }
}