/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

html {
    line-height: 1.15;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

main {
    display: block
}

h1 {
    font-size: 2em;
    margin: .67em 0
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

small {
    font-size: 80%
}

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

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

img {
    border-style: none
}

button,
input,
optgroup,
select,
textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible
}

button,
select {
    text-transform: none
}

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

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

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

[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

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

details {
    display: block
}

summary {
    display: list-item
}

template {
    display: none
}

[hidden] {
    display: none
}

@keyframes splide-loading {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.splide--draggable>.splide__slider>.splide__track,
.splide--draggable>.splide__track {
    -webkit-user-select: none;
    user-select: none
}

.splide--fade>.splide__slider>.splide__track>.splide__list,
.splide--fade>.splide__track>.splide__list {
    display: block
}

.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide,
.splide--fade>.splide__track>.splide__list>.splide__slide {
    left: 0;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 0
}

.splide--fade>.splide__slider>.splide__track>.splide__list>.splide__slide.is-active,
.splide--fade>.splide__track>.splide__list>.splide__slide.is-active {
    opacity: 1;
    position: relative;
    z-index: 1
}

.splide--rtl {
    direction: rtl
}

.splide--ttb.is-active>.splide__slider>.splide__track>.splide__list,
.splide--ttb.is-active>.splide__track>.splide__list {
    display: block
}

.splide__container {
    box-sizing: border-box;
    position: relative
}

.splide__list {
    backface-visibility: hidden;
    display: flex;
    height: 100%;
    margin: 0 !important;
    padding: 0 !important;
    transform-style: preserve-3d
}

.splide.is-initialized:not(.is-active) .splide__list {
    display: block
}

.splide__pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    margin: 0;
    pointer-events: none
}

.splide__pagination li {
    display: inline-block;
    line-height: 1;
    list-style-type: none;
    margin: 0;
    pointer-events: auto
}

.splide__progress__bar {
    width: 0
}

.splide {
    outline: none;
    position: relative;
    visibility: hidden
}

.splide.is-initialized,
.splide.is-rendered {
    visibility: visible
}

.splide__slide {
    backface-visibility: hidden;
    box-sizing: border-box;
    flex-shrink: 0;
    list-style-type: none !important;
    margin: 0;
    outline: none;
    position: relative
}

.splide__slide img {
    vertical-align: bottom
}

.splide__slider {
    position: relative
}

.splide__spinner {
    animation: splide-loading 1s linear infinite;
    border: 2px solid #999;
    border-left-color: transparent;
    border-radius: 50%;
    contain: strict;
    display: inline-block;
    height: 20px;
    inset: 0;
    margin: auto;
    position: absolute;
    width: 20px
}

.splide__track {
    overflow: hidden;
    position: relative;
    z-index: 0
}

.cdk-overlay-container,
.cdk-global-overlay-wrapper {
    pointer-events: none;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%
}

.cdk-overlay-container {
    position: fixed;
    z-index: 1000
}

.cdk-overlay-container:empty {
    display: none
}

.cdk-global-overlay-wrapper {
    display: flex;
    position: absolute;
    z-index: 1000
}

.cdk-overlay-pane {
    position: absolute;
    pointer-events: auto;
    box-sizing: border-box;
    display: flex;
    max-width: 100%;
    max-height: 100%;
    z-index: 1000
}

.cdk-overlay-backdrop {
    position: absolute;
    inset: 0;
    pointer-events: auto;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    opacity: 0;
    touch-action: manipulation;
    z-index: 1000;
    transition: opacity .4s cubic-bezier(.25, .8, .25, 1)
}

@media (prefers-reduced-motion) {
    .cdk-overlay-backdrop {
        transition-duration: 1ms
    }
}

.cdk-overlay-backdrop-showing {
    opacity: 1
}

@media (forced-colors: active) {
    .cdk-overlay-backdrop-showing {
        opacity: .6
    }
}

.cdk-overlay-dark-backdrop {
    background: #00000052
}

.cdk-overlay-transparent-backdrop {
    transition: visibility 1ms linear, opacity 1ms linear;
    visibility: hidden;
    opacity: 1
}

.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing,
.cdk-high-contrast-active .cdk-overlay-transparent-backdrop {
    opacity: 0;
    visibility: visible
}

.cdk-overlay-backdrop-noop-animation {
    transition: none
}

.cdk-overlay-connected-position-bounding-box {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-width: 1px;
    min-height: 1px;
    z-index: 1000
}

.cdk-global-scrollblock {
    position: fixed;
    width: 100%;
    overflow-y: scroll
}

:root {
    --stb-font-primary: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --stb-font-helper: var(--stb-font-primary);
    --stb-transition-time: .2s;
    --stb-sidebars-transition-time: .5s;
    --stb-animation-rotation-time: 3s;
    --stb-container-padding: 20px;
    --stb-game-page-container-padding: 20px;
    --stb-gamification-container-inner-width: 1264px;
    --stb-gamification-container: calc( var(--stb-gamification-container-inner-width) + var(--stb-container-padding) * 2);
    --stb-safe-area-inline-start: env(safe-area-inset-left);
    --stb-safe-area-inline-end: env(safe-area-inset-right);
    --stb-page-content-width: 800px;
    --stb-page-content-padding-bottom: 100px;
    --stb-page-indent-padding-top: 20px;
    --stb-page-indent-s-padding-top: 28px;
    --stb-page-indent-padding-bottom: 40px;
    --stb-splide-arrow-gradient-direction: 1;
    --stb-games-gap: 12px;
    --stb-page-grid-row-gap: 28px;
    --stb-licenses-list-gap: 20px 32px;
    --stb-legal-wrapper-row-gap: 32px;
    --stb-legal-paragraphs-gap: 20px;
    --stb-game-page-header-height: 52px;
    --stb-game-page-header-closed-height: 32px;
    --stb-header-height: 60px;
    --stb-sub-menu-height: 44px;
    --stb-navigation-bottom-height: 60px;
    --stb-categories-menu-height: 75px;
    --stb-sidebar-expanded-width: 232px;
    --stb-sidebar-current-width: var(--stb-sidebar-expanded-width);
    --stb-sidebar-collapsed-width: 68px;
    --stb-modal-menu-max-width: 420px;
    --stb-scrollbar-width: 6px;
    --stb-scrollbar-height: 6px;
    --stb-scrollbar-visibility: initial;
    --stb-scrollbar-thumb-color: var(--stb-bg-fourth);
    --stb-scrollbar-track-color: transparent;
    --stb-scrollbar-border-radius: 0;
    --stb-scrollbar-width-keyword: none;
    --stb-scroller-correct-scrollbar: 8px;
    --stb-common-scroll-margin-top: calc(var(--stb-header-height) + 40px);
    --stb-modal-dialog-panel-max-width: 540px;
    --stb-modal-dialog-inline-padding: 16px;
    --stb-modal-dialog-inner-horizontal-padding: 4px;
    --stb-modal-dialog-inner-vertical-padding: 10px;
    --stb-modal-dialog-body-horizontal-padding: 16px;
    --stb-modal-dialog-body-vertical-padding: 20px;
    --stb-modal-dialog-action-bottom-padding: 40px;
    --stb-modal-dialog-body-bottom-padding: 40px;
    --stb-modal-dialog-border-radius: 20px;
    --stb-modal-dialog-body-border-radius: 16px;
    --stb-spinner-loader-inset: 0;
    --stb-spinner-loader-dialog-inset: -1px -5px -11px;
    --stb-spinner-loader-border-radius: 8px;
    --stb-thumbnail-border-radius: 12px;
    --stb-thumbnail-label-opacity: 1;
    --stb-thumbnail-actions-opacity: 0;
    --stb-thumbnail-actions-blur: 0px;
    --stb-thumbnail-favorite-block-opacity: 0;
    --stb-thumbnail-animation-state: paused;
    --stb-title-grid-template-columns: .5fr 1fr minmax(0, .5fr);
    --stb-title-min-height-sm-mobile: 18px;
    --stb-title-min-height-md-mobile: 20px;
    --stb-title-min-height-lg-mobile: 22px;
    --stb-title-font-size-sm-mobile: 14px;
    --stb-title-font-size-md-mobile: 16px;
    --stb-title-font-size-lg-mobile: 20px;
    --stb-title-line-height-sm-mobile: 1.2;
    --stb-title-line-height-md-mobile: 1.2;
    --stb-title-line-height-lg-mobile: 1.1;
    --stb-title-min-height-sm-desktop: 20px;
    --stb-title-min-height-md-desktop: 22px;
    --stb-title-min-height-lg-desktop: 30px;
    --stb-title-font-size-sm-desktop: 16px;
    --stb-title-font-size-md-desktop: 20px;
    --stb-title-font-size-lg-desktop: 24px;
    --stb-title-line-height-sm-desktop: 1.2;
    --stb-title-line-height-md-desktop: 1.1;
    --stb-title-line-height-lg-desktop: 1.2;
    --stb-text-transform-uppercase: uppercase;
    --stb-title-min-height-sm: var(--stb-title-min-height-sm-mobile);
    --stb-title-min-height-md: var(--stb-title-min-height-md-mobile);
    --stb-title-min-height-lg: var(--stb-title-min-height-lg-mobile);
    --stb-title-font-size-sm: var(--stb-title-font-size-sm-mobile);
    --stb-title-font-size-md: var(--stb-title-font-size-md-mobile);
    --stb-title-font-size-lg: var(--stb-title-font-size-lg-mobile);
    --stb-title-line-height-sm: var(--stb-title-line-height-sm-mobile);
    --stb-title-line-height-md: var(--stb-title-line-height-md-mobile);
    --stb-title-line-height-lg: var(--stb-title-line-height-lg-mobile);
    --stb-banner-offer-horizontal-padding: var(--stb-container-padding);
    --stb-banner-offer-vertical-padding: 16px;
    --stb-sportsbook-tournament-banner-img-transform: none
}

:root[dir=rtl] {
    --stb-safe-area-inline-start: env(safe-area-inset-right);
    --stb-safe-area-inline-end: env(safe-area-inset-left);
    --stb-splide-arrow-gradient-direction: -1
}

@media screen and (min-width: 1280px) {
    :root {
        --stb-legal-wrapper-row-gap: 40px
    }
}

:root :has(.cookie) {
    --stb-cookie-banner-bottom: 12px
}

@media screen and (min-width: 768px) {
    :root {
        --stb-modal-dialog-panel-max-width: 660px;
        --stb-modal-dialog-inline-padding: 80px;
        --stb-modal-dialog-inner-horizontal-padding: 10px;
        --stb-modal-dialog-inner-vertical-padding: 20px;
        --stb-spinner-loader-dialog-inset: -1px -11px -21px
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --stb-game-page-container-padding: 60px;
        --stb-page-indent-s-padding-top: 40px;
        --stb-games-gap: 16px;
        --stb-game-page-header-height: 56px;
        --stb-header-height: 64px;
        --stb-sub-menu-height: 0px;
        --stb-modal-dialog-body-border-radius: 20px;
        --stb-modal-dialog-body-horizontal-padding: 60px;
        --stb-banner-offer-horizontal-padding: 28px;
        --stb-banner-offer-vertical-padding: 32px;
        --stb-title-min-height-sm: var(--stb-title-min-height-sm-desktop);
        --stb-title-min-height-md: var(--stb-title-min-height-md-desktop);
        --stb-title-min-height-lg: var(--stb-title-min-height-lg-desktop);
        --stb-title-font-size-sm: var(--stb-title-font-size-sm-desktop);
        --stb-title-font-size-md: var(--stb-title-font-size-md-desktop);
        --stb-title-font-size-lg: var(--stb-title-font-size-lg-desktop);
        --stb-title-line-height-sm: var(--stb-title-line-height-sm-desktop);
        --stb-title-line-height-md: var(--stb-title-line-height-md-desktop);
        --stb-title-line-height-lg: var(--stb-title-line-height-lg-desktop)
    }
    :root :has(.cookie) {
        --stb-cookie-banner-bottom: 16px
    }
}

@media screen and (min-width: 1536px) {
    :root {
        --stb-banner-offer-horizontal-padding: 40px;
        --stb-banner-offer-vertical-padding: 40px
    }
}

html[dir=rtl] {
    --stb-sportsbook-tournament-banner-img-transform: scaleX(-1)
}

:root {
    --stb-true-black: 0 0 0;
    --stb-black: 9 8 12;
    --stb-white: 255 255 255;
    --stb-neutral-25: 251 248 255;
    --stb-neutral-50: 233 212 255;
    --stb-neutral-100: 217 176 255;
    --stb-neutral-150: 196 151 250;
    --stb-neutral-200: 172 128 244;
    --stb-neutral-300: 148 126 228;
    --stb-neutral-400: 186 120 244;
    --stb-neutral-450: 151 107 218;
    --stb-neutral-500: 136 85 203;
    --stb-neutral-600: 123 66 189;
    --stb-neutral-650: 112 49 175;
    --stb-neutral-700: 102 34 161;
    --stb-neutral-750: 76 20 128;
    --stb-neutral-775: 66 15 113;
    --stb-neutral-800: 61 11 101;
    --stb-neutral-900: 45 14 77;
    --stb-neutral-1000: 32 8 55;
    --stb-neutral-1100: 25 5 45;
    --stb-brand-50: 217 176 255;
    --stb-brand-100: 172 128 244;
    --stb-brand-150: 186 120 244;
    --stb-brand-160: 234 232 255;
    --stb-brand-200: 130 49 200;
    --stb-brand-300: 196 192 229;
    --stb-brand-400: 102 34 161;
    --stb-brand-500: 86 17 139;
    --stb-brand-600: 96 46 135;
    --stb-brand-700: 83 30 126;
    --stb-brand-800: 47 8 79;
    --stb-brand-900: 32 8 55;
    --stb-brand-950: 23 18 43;
    --stb-green-450: 74 205 87;
    --stb-green-500: 96 219 117;
    --stb-green-600: 102 215 149;
    --stb-green-700: 54 118 101;
    --stb-green-800: 35 86 70;
    --stb-green-900: 26 64 52;
    --stb-green-1000: 31 179 134;
    --stb-red-500: 255 84 84;
    --stb-red-600: 255 0 0;
    --stb-red-700: 148 34 0;
    --stb-yellow-200: 255 250 186;
    --stb-yellow-400: 249 215 76;
    --stb-yellow-500: 254 203 2;
    --stb-yellow-600: 241 117 1;
    --stb-yellow-700: 190 78 0;
    --stb-blue-500: 133 228 255;
    --stb-text-primary: rgb(251 248 255);
    --stb-text-secondary: rgb(217 176 255);
    --stb-text-secondary-light: rgb(96 95 122);
    --stb-text-tertiary: rgb(172 128 244);
    --stb-text-contrast-primary: rgb(251 248 255);
    --stb-text-contrast-secondary: rgb(250 249 255);
    --stb-text-accent: rgb(112 176 31);
    --stb-text-bonus: rgb(243 255 103 / 1);
    --stb-button-primary: radial-gradient(100% 100% at 50% 0%, #f9d74c 0%, #f17501 86.3%);
    --stb-button-primary-hover: radial-gradient(142% 142% at 50% -42%, #f9d74c 0%, #f17501 90.5%);
    --stb-button-primary-active: 241 117 1;
    --stb-button-secondary: linear-gradient(180deg, #ba78f4 0%, #6622a1 100%);
    --stb-button-secondary-hover: linear-gradient(179deg, #ba78f4 -36%, #6622a1 99.5%);
    --stb-button-secondary-active: 102 34 161;
    --stb-button-tertiary: rgb(217 176 255 / .04);
    --stb-button-tertiary-hover: rgb(217 176 255 / .1);
    --stb-button-tertiary-active: rgb(9 8 12 / .1);
    --stb-button-text-bright: 251 248 255;
    --stb-button-text-stroke: rgb(255 255 255 / .16);
    --stb-button-disable: 196 192 229;
    --stb-button-text-middle: 140 135 179;
    --stb-button-text-dark: 23 18 43;
    --stb-link-primary: 254 203 2;
    --stb-link-primary-hover: 255 250 186;
    --stb-link-primary-active: 241 117 1;
    --stb-link-secondary: 233 212 255;
    --stb-link-secondary-hover: 196 151 250;
    --stb-link-secondary-active: 172 128 244;
    --stb-link-tertiary: 148 125 246;
    --stb-link-accent: 254 203 2;
    --stb-link-alert: 255 72 116;
    --stb-bg-primary: rgb(32 8 55);
    --stb-bg-secondary: rgb(61 11 101);
    --stb-bg-tertiary: rgb(45 14 77);
    --stb-bg-fourth: rgb(102 34 161);
    --stb-bg-contrast-primary: rgb(82 78 114);
    --stb-bg-contrast-secondary: rgb(63 60 89);
    --stb-bg-contrast-tertiary: rgb(41 34 48);
    --stb-bg-popup: rgb(var(--stb-neutral-1100) / .87);
    --stb-label-live-stream: rgb(38 152 111);
    --stb-gradient-50: radial-gradient(128.82% 100% at 50% 0%, #4c1480 0%, #2d0e4d 100%);
    --stb-gradient-100: linear-gradient( 180deg, rgb(255 255 255 / 0) 0%, rgb(255 255 255 / .16) 50%, rgb(255 255 255 / 0) 100%);
    --stb-gradient-150: linear-gradient( 180deg, rgb(217 176 255 / .5) -6.25%, rgb(217 176 255 / .2) 40.23%, rgb(217 176 255 / 0) 100%);
    --stb-gradient-200: linear-gradient(90deg, #6622a1 0%, #3d0b65 100%);
    --stb-gradient-250: linear-gradient(0deg, #4c1480 0%, #6622a1 100%);
    --stb-gradient-300: radial-gradient(100% 100% at 50% 0%, #f9d74c 0%, #f17501 85%);
    --stb-gradient-350: radial-gradient(142% 142% at 50% -42%, #f9d74c 0%, #f17501 90.5%);
    --stb-gradient-400: linear-gradient(180deg, #ba78f4 0%, #681faa 100%, #6622a1 100%);
    --stb-gradient-450: linear-gradient(179deg, #ba78f4 -36.63%, #6622a1 99.5%);
    --stb-gradient-500: linear-gradient( 0deg, #3d0b65 0%, rgb(61 11 101 / .8) 47%, rgb(61 11 101 / .3) 100%);
    --stb-gradient-550: linear-gradient( 180deg, rgb(5 79 34 / .3) 0%, rgb(5 79 34 / .8) 57%, #054f22 100%);
    --stb-gradient-600: linear-gradient( 182deg, rgb(255 255 255 / .05) 1.8%, rgb(0 0 0 / .1) 101%, rgb(9 8 12 / .1) 101%);
    --stb-gradient-700: linear-gradient( 180deg, rgb(32 8 55 / 0) 0%, rgb(32 8 55 / .7) 50%, #200837 100%);
    --stb-gradient-750: linear-gradient(0deg, #2d0e4d 0%, #4c1480 100%);
    --stb-gradient-800: linear-gradient(0deg, #2d0e4d 0%, #2d0e4d 20.7%, #4c1480 50.2%, #8855cb 100%);
    --stb-gradient-850: linear-gradient(180deg, #f9d74c 23%, #f17501 80.4%);
    --stb-gradient-900: linear-gradient( 0deg, rgb(61 11 101 / 1), rgb(61 11 101 / .2), rgb(61 11 101 / 0));
    --stb-input-fill: rgb(76 20 128);
    --stb-input-fill-hover: rgb(76 20 128);
    --stb-input-fill-selected: rgb(61 11 101);
    --stb-input-stroke: rgb(233 212 255 / .12);
    --stb-input-stroke-hover: rgb(233 212 255 / .32);
    --stb-input-stroke-selected: rgb(233 212 255 / .32);
    --stb-icon-100: rgb(251 248 255);
    --stb-icon-400: rgb(196 151 250);
    --stb-icon-800: rgb(123 66 189);
    --stb-icon-1000: rgb(61 11 101);
    --stb-functional-done: rgb(96 219 117);
    --stb-functional-warning: rgb(254 203 2);
    --stb-functional-error: rgb(255 0 0);
    --stb-functional-alert: rgb(255 84 84);
    --stb-functional-info: rgb(136 85 203);
    --stb-functional-info-plus: rgb(var(--stb-blue-500));
    --stb-skeleton: linear-gradient( 123deg, rgb(214 210 249 / 0) 0%, rgb(214 210 249 / .16) 47.3%, rgb(214 210 249 / 0) 77%);
    --stb-button-text-bright-filter: invert(100%) sepia(0%) saturate(7487%) hue-rotate(126deg) brightness(108%) contrast(105%);
    --stb-button-text-middle-filter: invert(59%) sepia(22%) saturate(499%) hue-rotate(207deg) brightness(89%) contrast(87%);
    --stb-text-secondary-filter: invert(64%) sepia(11%) saturate(970%) hue-rotate(207deg) brightness(85%) contrast(83%);
    --stb-text-primary-filter: invert(30%) sepia(9%) saturate(1781%) hue-rotate(207deg) brightness(97%) contrast(89%);
    --stb-white-filter: invert(99%) sepia(3%) saturate(371%) hue-rotate(87deg) brightness(115%) contrast(100%);
    --stb-brand-500-filter: invert(58%) sepia(23%) saturate(7495%) hue-rotate(217deg) brightness(103%) contrast(98%);
    --stb-icon-400-filter: invert(58%) sepia(23%) saturate(462%) hue-rotate(207deg) brightness(91%) contrast(88%);
    --stb-shadow-primary: 0 6px 16px rgb(37 14 61 / .1);
    --stb-shadow-popup: 0 6px 80px 0 rgb(0 0 0 / .8);
    --stb-filter-drop-shadow: drop-shadow(-1px 6px 6px rgb(37 14 61 / .1));
    --stb-shadow-inset-primary: 0 1px 1px rgb(var(--stb-white) / .2) inset
}

:root {
    --stb-tournament-dropdown-padding: 16px;
    --stb-tournament-card-radius: 12px;
    --stb-tournament-leaderbord-row-radius: 8px;
    --stb-tournament-details-list-gap: 8px;
    --stb-tournament-details-list-font-size: 12px;
    --stb-tournament-dropdown-grid-template-columns: none;
    --stb-tournament-dropdown-container-gap: 24px;
    --stb-tournament-description-padding: 16px;
    --stb-tournament-description-details-gap: 8px;
    --stb-tournament-banner-grid-template-columns: 186px 1fr;
    --stb-tournament-banner-title-font-size: 16px;
    --stb-tournament-prize-font-size: 14px
}

:root {
    --stb-shop-image-aspect-ratio: 1.5 / 1;
    --stb-shop-page-grid-row-gap: 28px;
    --stb-shop-card-spacing-inner: 4px;
    --stb-shop-card-font-size: 12px;
    --stb-shop-card-currency-font-size: 10px;
    --stb-base-shop-card-height: 178px;
    --stb-shop-card-content-height: 76px;
    --stb-shop-card-content-with-title-height: 98px;
    --stb-base-shop-card-image-height: 96px;
    --stb-free-spin-card-height: 96px;
    --stb-cash-spin-card-height: 96px;
    --stb-scroller-inner-row-gap: 8px;
    --stb-scroller-shop-card-width: 144px;
    --stb-shop-freespin-image-width: 144px;
    --stb-shop-card-border-radius: 12px;
    --stb-shop-card-inner-border-radius: calc(var(--stb-shop-card-border-radius) - 1px);
    --stb-shop-items-grid-gap: 12px;
    --stb-bonus-crab-card-width: 234px;
    --stb-freebets-columns: 2;
    --stb-free-spins-columns: 1;
    --stb-cash-spins-columns: 1;
    --stb-bonus-money-columns: 2;
    --stb-bonus-crab-columns: auto-fill;
    --stb-bonus-crab-column-size: minmax(var(--stb-bonus-crab-card-width), 1fr);
    --stb-card-action-grid-column-gap: 6px;
    --stb-card-action-border-radius: 10px
}

@media screen and (min-width: 768px) {
    :root {
        --stb-scroller-shop-card-width: 164px;
        --stb-bonus-money-columns: 4;
        --stb-free-spins-columns: 2;
        --stb-cash-spins-columns: 2;
        --stb-freebets-columns: 4;
        --stb-bonus-crab-columns: 3;
        --stb-bonus-crab-column-size: 1fr
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --stb-shop-card-spacing-inner: 8px;
        --stb-shop-card-font-size: 14px;
        --stb-shop-card-currency-font-size: 12px;
        --stb-shop-card-offer-font-size: 14px;
        --stb-shop-card-offer-amount-font-size: 14px;
        --stb-base-shop-card-height: 252px;
        --stb-shop-card-content-height: 92px;
        --stb-shop-card-content-with-title-height: 116px;
        --stb-free-spin-card-height: 104px;
        --stb-cash-spin-card-height: 104px;
        --stb-shop-freespin-image-width: 156px;
        --stb-scroller-inner-row-gap: 12px;
        --stb-scroller-shop-card-width: 240px;
        --stb-bonus-money-columns: 5;
        --stb-bonus-crab-columns: 4;
        --stb-free-spins-columns: 3;
        --stb-cash-spins-columns: 3;
        --stb-freebets-columns: 5;
        --stb-card-action-font-size: 16px;
        --stb-card-action-min-height: 48px;
        --stb-card-action-padding: 0 24px;
        --stb-card-action-border-radius: 14px;
        --stb-free-spin-label-font-size: 12px
    }
}

:root {
    --stb-challenges-intro-actions-flex-direction: column;
    --stb-challenges-intro-actions-align-items: flex-start
}

:root {
    --stb-cookie-banner-border-radius: 12px;
    --stb-cookie-banner-box-shadow: var(--stb-shadow-primary);
    --stb-cookie-banner-scroller-border-radius: 20px;
    --stb-cookie-banner-scrollbar-track-bg: var(--stb-bg-tertiary);
    --stb-cookie-banner-scrollbar-thumb-bg: var(--stb-bg-fourth);
    --stb-cookie-banner-text-primary: var(--stb-text-primary);
    --stb-cookie-banner-text-secondary: var(--stb-text-secondary);
    --stb-cookie-banner-bg-primary: var(--stb-bg-primary);
    --stb-cookie-banner-bg-secondary: var(--stb-bg-secondary);
    --stb-cookie-banner-bg-tertiary: var(--stb-bg-tertiary);
    --stb-cookie-banner-border: rgb(var(--stb-neutral-750));
    --stb-cookie-banner-link-color: rgb(var(--stb-link-accent));
    --stb-cookie-banner-link-color-hover: rgb(var(--stb-link-tertiary));
    --stb-cookie-banner-action-border-radius: 4px;
    --stb-cookie-banner-action-bg-primary: var(--stb-button-primary-active);
    --stb-cookie-banner-action-bg-primary-hover: var(--stb-button-primary-active);
    --stb-cookie-banner-action-color-primary: var(--stb-button-text-bright);
    --stb-cookie-banner-action-color-primary-hover: var(--stb-button-text-bright);
    --stb-cookie-banner-action-bg-secondary: var(--stb-button-tertiary);
    --stb-cookie-banner-action-bg-secondary-hover: var(--stb-button-tertiary-hover);
    --stb-cookie-banner-action-color-secondary: var(--stb-button-text-bright);
    --stb-cookie-banner-action-color-secondary-hover: var(--stb-button-text-bright);
    --stb-cookie-banner-switcher-disabled-pin-bg: var(--stb-neutral-650);
    --stb-cookie-banner-switcher-disabled-track-bg: var(--stb-neutral-750);
    --stb-cookie-banner-switcher-disabled-svg-color: var(--stb-bg-secondary);
    --stb-cookie-banner-switcher-selected-pin-bg: var(--stb-functional-done);
    --stb-cookie-banner-switcher-selected-track-bg: var(--stb-neutral-750);
    --stb-cookie-banner-switcher-selected-svg-color: var(--stb-icon-100);
    --stb-cookie-banner-switcher-unselected-pin-bg: var(--stb-functional-alert);
    --stb-cookie-banner-switcher-unselected-track-bg: var(--stb-neutral-750);
    --stb-cookie-banner-switcher-unselected-svg-color: var(--stb-icon-100);
    --stb-cookie-table-border: var(--stb-bg-tertiary)
}

:root {
    --stb-bundle-card-ribbon-fold: 6px;
    --stb-bundle-card-ribbon-cutout: 7px;
    --stb-scroller-bundles-card-height: 237px;
    --stb-scroller-bundles-card-width: min( 365px, calc(100vw - var(--stb-container-padding) * 2 - 16px));
    --stb-bundles-grid-template-columns-amount: 2;
    --stb-bundles-grid-template-columns-size: 1fr
}

@media screen and (min-width: 768px) {
    :root {
        --stb-bundles-grid-template-columns-amount: auto-fill;
        --stb-bundles-grid-template-columns-size: minmax(320px, 1fr)
    }
}

@media screen and (min-width: 1280px) {
    :root {
        --stb-scroller-bundles-card-width: min( calc(365px + var(--stb-bundle-card-ribbon-fold)), calc(100vw - var(--stb-container-padding) * 2 - 16px));
        --stb-bundles-grid-template-columns-amount: 3;
        --stb-bundles-grid-template-columns-size: 1fr
    }
}

.stb-overlay-container {
    position: fixed
}

.stb-global-overlay-wrapper {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center
}

.stb-overlay-container,
.stb-global-overlay-wrapper {
    z-index: 900;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    pointer-events: none
}

.stb-overlay-container:empty,
.stb-global-overlay-wrapper:empty {
    display: none
}

.stb-overlay-backdrop {
    position: absolute;
    inset: 0;
    z-index: 1000;
    background-color: var(--stb-bg-popup);
    opacity: 0;
    transition: opacity .4s cubic-bezier(.25, .8, .25, 1);
    pointer-events: auto;
    -webkit-tap-highlight-color: transparent
}

.stb-overlay-backdrop.stb-overlay-backdrop-showing {
    opacity: 1
}

.stb-overlay-pane {
    position: static;
    z-index: 1000;
    pointer-events: auto
}

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

::-webkit-scrollbar-track {
    background-color: transparent;
    visibility: hidden
}

::-webkit-scrollbar {
    width: 0;
    height: 0;
    visibility: hidden
}

::-webkit-scrollbar-thumb {
    visibility: hidden
}

html,
body {
    height: 100%;
    background-color: var(--stb-bg-primary)
}

html {
    min-width: 360px;
    font-family: var(--stb-font-primary);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.25;
    letter-spacing: .02em;
    color: var(--stb-text-primary);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    -webkit-user-select: none;
    user-select: none
}

html[dir=rtl] {
    --stb-icon-sprite-svg-scale: -1 1
}

html:not([lang=el-gr]) {
    --stb-text-transform-style: var(--stb-text-transform-uppercase)
}

@supports (scrollbar-width: auto) and (not (selector(::-webkit-scrollbar))) {
    html {
        scrollbar-color: var(--stb-scrollbar-thumb-color) var(--stb-scrollbar-track-color);
        scrollbar-width: var(--stb-scrollbar-width-keyword)
    }
}

svg,
img {
    display: block
}

img,
video {
    height: auto;
    max-width: 100%
}

iframe {
    border: 0
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
label,
ul,
ol,
dl,
dd {
    margin: 0;
    font-weight: inherit;
    font-size: inherit;
    line-height: inherit
}

ul,
ol {
    padding: 0;
    list-style: none
}

button {
    margin: 0;
    padding: 0;
    border: none;
    background-color: transparent;
    cursor: pointer
}

button:focus-visible {
    outline: 1px dashed rgb(var(--stb-brand-500))
}

button:disabled {
    cursor: default
}

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

input[type=date]::-webkit-inner-spin-button,
input[type=date]::-webkit-calendar-picker-indicator {
    display: none;
    appearance: none
}

input[type=date]::-webkit-date-and-time-value {
    text-align: left;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden
}

input::-webkit-datetime-edit,
input::-webkit-datetime-edit-fields-wrapper,
input::-webkit-datetime-edit-day-field,
input::-webkit-datetime-edit-month-field,
input::-webkit-datetime-edit-year-field,
input::-webkit-datetime-edit-text {
    padding-top: 0;
    padding-bottom: 0
}

input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button {
    appearance: none;
    margin: 0
}

input[type=number] {
    appearance: textfield
}

input[type=password]:not(:placeholder-shown) {
    font-family: var(--stb-font-helper)
}

input[type=password]::placeholder {
    font-family: var(--stb-font-primary)
}

a {
    text-decoration: none;
    color: var(--stb-text-primary)
}

a:focus-visible {
    outline: 1px dashed var(--stb-link-accent)
}

a:focus:not(:focus-visible) {
    outline: none
}

@supports (-webkit-touch-callout: none) {
    a {
        -webkit-user-select: auto;
        user-select: auto
    }
}

[tabindex="-1"]:focus {
    outline: none
}

.container {
    display: block;
    max-width: 1920px;
    width: 100%;
    margin: 0 auto;
    padding-inline-start: var(--stb-container-padding);
    padding-inline-end: var(--stb-container-padding)
}

.container--gamification {
    max-width: var(--stb-gamification-container)
}

@media (orientation: landscape) {
    .container {
        padding-inline-start: max(var(--stb-safe-area-inline-start), var(--stb-container-padding));
        padding-inline-end: max(var(--stb-safe-area-inline-end), var(--stb-container-padding))
    }
}

.page-indent {
    padding-top: var(--stb-page-indent-padding-top);
    padding-bottom: var(--stb-page-indent-padding-bottom)
}

.page-indent--s {
    padding-top: var(--stb-page-indent-s-padding-top)
}

.page-indent--m {
    padding-top: 40px
}

@media screen and (min-width: 1280px) {
    .page-indent--m {
        padding-bottom: 52px
    }
}

.page-grid {
    display: grid;
    grid-row-gap: var(--stb-page-grid-row-gap)
}

.page-content-width {
    max-width: var(--stb-page-content-width);
    margin: 0 auto
}

.grid-games-wrapper {
    position: relative;
    display: block
}

.grid-games-wrapper__action {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    height: 0;
    padding: 0
}

.grid-games {
    position: relative;
    display: grid;
    width: 100%;
    align-content: start;
    grid-gap: var(--stb-games-gap);
    --stb-grid-column-count: var(--stb-custom-grid-column-count, 3);
    --stb-grid-column-dimension: calc(100% / var(--stb-custom-grid-column-count, 3));
    grid-template-columns: repeat(var(--stb-grid-column-count), calc(calc(100% / var(--stb-grid-column-count)) - (var(--stb-games-column-gap, var(--stb-games-gap)) - var(--stb-games-column-gap, var(--stb-games-gap)) / var(--stb-grid-column-count))))
}

@media screen and (min-width: 768px) {
    .grid-games {
        --stb-grid-column-count: var(--stb-custom-grid-column-count, 6);
        --stb-grid-column-dimension: calc(100% / var(--stb-custom-grid-column-count, 6))
    }
}

@media screen and (min-width: 1920px) {
    .grid-games {
        --stb-grid-column-count: var(--stb-custom-grid-column-count, 8);
        --stb-grid-column-dimension: calc(100% / var(--stb-custom-grid-column-count, 8))
    }
}

.grid-games:focus-visible {
    outline: 1px dashed rgb(var(--stb-brand-500))
}

.grid-games--scrollable {
    max-width: 1920px;
    margin: -2px auto -8px;
    padding: 2px var(--stb-container-padding) 8px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: var(--stb-scroll-snap-type, x mandatory);
    scroll-padding-inline-start: var(--stb-container-padding);
    scroll-behavior: smooth
}

@supports (-webkit-hyphens: none) {
    html[dir=rtl] .grid-games--scrollable:after {
        display: block;
        height: 1px;
        width: calc(var(--stb-container-padding) - var(--stb-games-gap));
        content: ""
    }
    @media (orientation: landscape) {
        html[dir=rtl] .grid-games--scrollable:after {
            --stb-max-inline-end-indentation: max( var(--stb-safe-area-inline-end), var(--stb-container-padding));
            width: calc(var(--stb-max-inline-end-indentation) - var(--stb-games-gap))
        }
    }
}

.grid-games--scrollable:not(.no-custom-scrollbar) {
    --stb-scrollbar-width-keyword: thin
}

@supports (scrollbar-width: auto) {
    .grid-games--scrollable:not(.no-custom-scrollbar) {
        scrollbar-color: var(--stb-scrollbar-thumb-color) var(--stb-scrollbar-track-color);
        scrollbar-width: var(--stb-scrollbar-width-keyword)
    }
}

@media (orientation: landscape) {
    .grid-games--scrollable {
        padding-inline-start: max(var(--stb-safe-area-inline-start), var(--stb-container-padding));
        padding-inline-end: max(var(--stb-safe-area-inline-end), var(--stb-container-padding))
    }
}

@media (orientation: landscape) {
    .grid-games--scrollable {
        scroll-padding-inline-start: max(var(--stb-safe-area-inline-start), var(--stb-container-padding))
    }
}

.grid-games__item {
    position: relative;
    scroll-snap-align: start
}

.grid-games--row-1,
.grid-games--row-2 {
    grid-template-columns: repeat(var(--stb-grid-column-count), calc(var(--stb-custom-grid-column-dimension, var(--stb-grid-column-dimension)) - (var(--stb-games-column-gap, var(--stb-games-gap)) - var(--stb-games-column-gap, var(--stb-games-gap)) / var(--stb-grid-column-count))));
    grid-auto-columns: calc(var(--stb-custom-grid-column-dimension, var(--stb-grid-column-dimension)) - (var(--stb-games-column-gap, var(--stb-games-gap)) - var(--stb-games-column-gap, var(--stb-games-gap)) / var(--stb-grid-column-count)));
    grid-auto-flow: column;
    grid-template-rows: repeat(var(--stb-grid-rows-count), 1fr)
}

.grid-games--row-1 {
    --stb-grid-rows-count: 1
}

.grid-games--row-2 {
    --stb-grid-rows-count: 2
}

.grid-games--bot-gradient:after {
    position: absolute;
    bottom: -10px;
    left: -1px;
    right: -1px;
    display: block;
    height: 130px;
    content: "";
    mask-image: linear-gradient(to bottom, rgb(var(--stb-white)/0) 0, var(--stb-bg-primary) 60px);
    background-color: var(--stb-bg-primary)
}













.form-checkbox__indicator {
    position: relative;
    display: block;
    width: 24px;
    height: 24px;
    background: var(--stb-input-fill);
    border: 1px solid var(--stb-input-stroke);
    border-radius: 8px;
    transition: border var(--stb-transition-time), background-color var(--stb-transition-time)
}

.form-checkbox__indicator:before {
    content: "";
    position: absolute;
    inset: 0;
    visibility: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(check.b9591044e4e653c2.svg);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center;
    filter: var(--stb-input-fill-filter)
}

.form-checkbox__text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--stb-text-secondary)
}

.form-checkbox__text--marketing {
    display: inline-flex;
    align-items: center
}

.form-checkbox__body {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: max-content;
    grid-gap: 10px;
    cursor: pointer
}

@media (hover: hover) and (pointer: fine) {
    .form-checkbox__body:hover .form-checkbox__indicator {
        background: var(--stb-input-fill-hover);
        border-color: rgba(var(--stb-white)/.16)
    }
}

.form-checkbox__body:active .form-checkbox__indicator {
    border-color: var(--stb-input-stroke-hover)
}

.form-checkbox__input:checked+.form-checkbox__body .form-checkbox__indicator {
    background-color: var(--stb-functional-done);
    border-color: rgba(var(--stb-white)/.16)
}

.form-checkbox__input:checked+.form-checkbox__body .form-checkbox__indicator:before {
    visibility: visible
}

.form-checkbox__input.ng-touched.ng-invalid+.form-checkbox__body .form-checkbox__indicator {
    border-color: var(--stb-functional-alert)
}

.stb-input-errors,
.stb-input-hints,
.stb-form-errors {
    display: block;
    margin-top: var(--stb-error-hint-margin-top, 8px);
    font-size: 12px;
    font-weight: 500
}

.stb-input-errors,
.stb-form-errors {
    color: var(--stb-functional-alert)
}

.stb-input-hints {
    color: var(--stb-text-primary)
}

.stb-input-hint.is-invalid {
    color: var(--stb-functional-alert)
}

.stb-input-hint,
.stb-input-error,
.stb-form-error,
.stb-input-hint p,
.stb-input-error p,
.stb-form-error p {
    display: inline
}

.stb-input-hint:not(:last-child) p:after,
.stb-input-error:not(:last-child) p:after,
.stb-form-error:not(:last-child) p:after {
    content: ", "
}

.form-group {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-gap: 8px;
    align-items: start
}

.form-control {
    display: grid;
    grid-gap: 8px
}

.form-control__container {
    position: relative;
    display: flex
}

.form-control__toggle {
    position: absolute;
    inset-inline-end: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    color: var(--stb-icon-400);
    background-color: transparent;
    outline: none;
    cursor: pointer
}

.form-control__extended-label {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.form-control__label {
    display: block;
    width: 100%;
    height: 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--stb-text-secondary);
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.form-control__label--shrunk {
    width: fit-content
}

.form-control__label--toggle {
    width: fit-content;
    text-decoration: underline;
    cursor: pointer;
    color: var(--stb-link-primary)
}

.form-control__predictions {
    border-radius: 2px;
    font-family: var(--stb-font-primary);
    box-shadow: 0 2px 6px rgb(var(--stb-black)/.3);
    cursor: pointer
}

.predictions__item {
    padding: 0 4px;
    line-height: 30px;
    border-top: 1px solid rgb(var(--stb-neutral-150));
    font-size: 13px;
    color: var(--stb-neutral-1000);
    display: flex;
    align-items: center
}

.predictions__item-img {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-inline-end: 4px
}

.form-control__select {
    padding-inline: 16px 38px;
    padding-block: 14px;
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center right 16px;
    background-image: url(select.c947c05555a7a460.svg);
    cursor: pointer;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

html[dir=rtl] .form-control__select {
    background-position: center left 16px
}

.form-control__input {
    padding: 16px;
    cursor: text;
    text-align: start
}

html[dir=rtl] .form-control__input[type=email],
html[dir=rtl] .form-control__input--password,
html[dir=rtl] .form-control__input--phone {
    direction: ltr;
    padding-inline-end: 16px;
    text-align: end
}

.form-control__input,
.form-control__select {
    display: block;
    width: 100%;
    height: 48px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--stb-text-primary);
    background-color: var(--stb-input-fill);
    border: 1px solid var(--stb-input-stroke);
    border-radius: 12px;
    transition: color var(--stb-transition-time), border var(--stb-transition-time), background-color var(--stb-transition-time);
    outline: none;
    appearance: none
}

.form-control__input::placeholder,
.form-control__select::placeholder {
    visibility: visible;
    color: var(--stb-text-secondary);
    font-weight: 500
}

.form-control__input:placeholder-shown,
.form-control__select:placeholder-shown {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

@media (hover: hover) and (pointer: fine) {
    .form-control__input:hover,
    .form-control__select:hover {
        border-color: var(--stb-input-stroke-hover);
        background-color: var(--stb-input-fill-hover)
    }
}

.form-control__input:focus,
.form-control__select:focus {
    border-color: var(--stb-input-stroke-selected);
    background-color: var(--stb-input-fill-selected)
}

.form-control__input:disabled,
.form-control__select:disabled {
    opacity: .5;
    cursor: default;
    pointer-events: none
}

.form-control__input:-webkit-autofill {
    border: 1px solid var(--stb-input-stroke);
    box-shadow: 0 0 0 1000px var(--stb-input-fill) inset;
    -webkit-text-fill-color: var(--stb-text-primary);
    -webkit-transition: color 0s 6000s, background-color 0s 6000s;
    transition: color 0s 6000s, background-color 0s 6000s
}

.form-control__input.ng-touched.ng-invalid:not(:focus, .form-control__input--no-error-state) {
    color: var(--stb-functional-alert);
    border-color: var(--stb-functional-alert)
}

.form-control__input.ng-touched.ng-invalid:not(:focus, .form-control__input--no-error-state):-webkit-autofill {
    -webkit-text-fill-color: var(--stb-functional-alert)
}

.form-control__input--password {
    padding-inline-end: 40px
}

html[dir=rtl] .form-control__input--password {
    padding-inline-start: 40px
}

.form-control__input--phone::-webkit-date-and-time-value,
.form-control__input[type=email]::-webkit-date-and-time-value {
    margin: 0
}

html[dir=rtl] .form-control__input--phone.form-control__input--validation-icon:not(:focus),
html[dir=rtl] .form-control__input[type=email].form-control__input--validation-icon:not(:focus) {
    padding-inline-start: 40px
}

.form-control__input--contrast,
.form-control__select--contrast {
    background-color: var(--stb-input-fill);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center right 16px;
    border: 1px solid var(--stb-input-stroke)
}

@media (hover: hover) and (pointer: fine) {
    .form-control__input--contrast:hover,
    .form-control__select--contrast:hover {
        background-color: var(--stb-input-fill-hover);
        border-color: var(--stb-input-stroke)
    }
}

html[dir=rtl] .form-control__input--contrast,
html[dir=rtl] .form-control__select--contrast {
    background-position: center left 16px
}

.form-control__input--contrast:focus,
.form-control__select--contrast:focus {
    background-color: var(--stb-input-fill);
    border-color: var(--stb-input-stroke)
}

.form-control__input--untouched.ng-untouched,
.form-control__select--placeholder.ng-pristine {
    color: var(--stb-text-secondary)
}

.mobile-placeholder-imitation {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    min-height: 48px;
    height: 100%;
    padding-inline: 16px 38px;
    padding-block: 16px;
    line-height: 18px;
    color: var(--stb-text-secondary);
    background-color: var(--stb-input-fill);
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center right 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    transition: background-color var(--stb-transition-time), color var(--stb-transition-time);
    cursor: text;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

html[dir=rtl] .mobile-placeholder-imitation {
    background-position: center left 16px
}

@media (hover: hover) and (pointer: fine) {
    .mobile-placeholder-imitation:hover {
        background-color: var(--stb-input-fill-hover)
    }
}

.form-control__input--contrast+.mobile-placeholder-imitation {
    background-color: var(--stb-bg-primary);
    border: 1px solid var(--stb-input-stroke-hover)
}

@media (hover: hover) and (pointer: fine) {
    .form-control__input--contrast:hover+.mobile-placeholder-imitation {
        background-color: var(--stb-input-fill-hover)
    }
}

.form-control__input--contrast:focus+.mobile-placeholder-imitation {
    border: 1px solid var(--stb-input-stroke-hover)
}

.form-control__input:disabled+.mobile-placeholder-imitation {
    cursor: default;
    pointer-events: none
}

.form-control__input--contrast:disabled+.mobile-placeholder-imitation {
    background-color: rgb(var(--stb-white)/.5);
    border: 1px solid rgb(var(--stb-brand-200)/.5);
    color: rgb(var(--stb-neutral-800)/.5)
}

html[dir=rtl] .mobile-input-imitation {
    text-align: right
}

html[dir=rtl] .mobile-input-imitation::-webkit-date-and-time-value {
    text-align: inherit
}

.form-control__container:not(.is-android):focus-within .mobile-placeholder-imitation,
.mobile-input-imitation:disabled {
    opacity: 0
}

.form-control__input--validation-icon {
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center right 16px
}

.form-control__input--validation-icon:not(:focus) {
    padding-inline-end: 40px
}

html[dir=rtl] .form-control__input--validation-icon:not(:focus) {
    background-position: center left 16px
}

.form-control__input--validation-icon.ng-touched.ng-invalid:not(:focus),
.form-control__input--validation-icon.ng-touched.ng-invalid:not(:focus)+.mobile-placeholder-imitation {
    background-image: url(input-invalid.7bdfc02ba278eda0.svg)
}

.form-control__input--validation-icon.ng-touched.ng-valid:not(:focus) {
    background-image: url(input-valid.8330e1a4e00cf7e6.svg)
}

.form-control__input--validation-error {
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center right 16px
}

.form-control__input--validation-error:not(:focus) {
    padding-inline-end: 40px
}

html[dir=rtl] .form-control__input--validation-error:not(:focus) {
    background-position: center left 16px
}

.form-control__input--validation-error.ng-touched.ng-invalid:not(:focus),
.form-control__input--validation-error.ng-touched.ng-invalid:not(:focus)+.mobile-placeholder-imitation {
    background-image: url(input-invalid.7bdfc02ba278eda0.svg)
}

.form-control__input--optional {
    background-size: 16px;
    background-repeat: no-repeat;
    background-position: center right 16px
}

.form-control__input--optional:not(:focus) {
    padding-inline-end: 40px
}

html[dir=rtl] .form-control__input--optional:not(:focus) {
    background-position: center left 16px
}

.form-control__input--optional.ng-touched.ng-invalid:not(:focus),
.form-control__input--optional.ng-touched.ng-invalid:not(:focus)+.mobile-placeholder-imitation {
    background-image: url(input-invalid.7bdfc02ba278eda0.svg)
}

.form-control__input--optional.ng-valid:not(:focus, :placeholder-shown, .ng-pristine) {
    background-image: url(input-valid.8330e1a4e00cf7e6.svg)
}

.form-control--loading {
    position: relative
}

.form-control--loading .form-control__input {
    padding-inline-end: 40px
}

.form-control--loading:after {
    position: absolute;
    top: 50%;
    inset-inline-end: 16px;
    width: 16px;
    height: 16px;
    margin: -8px 0 0;
    background-color: var(--stb-icon-400);
    mask-image: url(loading.fa9526f76f5ea7e2.svg);
    animation: animation-rotation var(--stb-animation-rotation-time) linear infinite;
    content: ""
}

@supports (-moz-appearance: none) {
    .form-control--loading:after {
        mask: none;
        background: url(loading.fa9526f76f5ea7e2.svg) no-repeat center/100%;
        filter: var(--stb-icon-400-filter)
    }
}

.form-control__container .form-control__input {
    width: 0;
    flex: 1
}

.input-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    clip: rect(0 0 0 0);
    overflow: hidden
}

.form-control__helper {
    text-align: center
}

.search-control {
    height: 52px;
    display: flex;
    align-items: stretch;
    color: var(--stb-text-primary);
    background-color: var(--stb-input-fill);
    border: 1px solid var(--stb-input-stroke);
    border-radius: 12px;
    transition: color var(--stb-transition-time), border var(--stb-transition-time), background-color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .search-control:hover {
        background-color: var(--stb-input-fill-hover);
        border-color: var(--stb-input-stroke-hover)
    }
}

.search-control:focus-within {
    border-color: var(--stb-input-stroke-selected);
    background-color: var(--stb-input-fill-selected)
}

.search-control__container {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 16px;
    cursor: text
}

.search-control__input {
    width: 0;
    flex-grow: 1;
    padding: 16px 0;
    text-align: start;
    font-size: 16px;
    font-weight: 500;
    color: inherit;
    border: none;
    background-color: transparent;
    outline: none;
    appearance: none;
    cursor: text
}

.search-control__input::placeholder {
    color: var(--stb-text-secondary);
    font-weight: 500
}

.search-control__input:placeholder-shown {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    text-align: start
}

.search-control__icon {
    color: var(--stb-icon-400)
}

.search-control__clear {
    flex-shrink: 0;
    max-width: 50%;
    margin-inline-start: -8px;
    padding-inline: 0 16px;
    padding-block: 16px;
    font-weight: 500;
    color: var(--stb-text-secondary)
}

.form-control__code-cell {
    display: inline-grid;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 0 16px;
    text-align: center;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--stb-text-primary);
    background-color: var(--stb-input-fill);
    border: 1px solid var(--stb-input-stroke);
    border-radius: 12px;
    transition: color var(--stb-transition-time), border var(--stb-transition-time), background-color var(--stb-transition-time);
    appearance: none;
    cursor: text
}

.form-control__code-cell--focus {
    border-color: var(--stb-input-stroke-selected);
    background-color: var(--stb-input-fill-selected)
}

.form-control__code-cell--active:after {
    content: "|";
    opacity: 1;
    animation: cursor 1s steps(2, jump-none) infinite both
}

@media (hover: hover) and (pointer: fine) {
    .code:hover .form-control__code-cell:not(.form-control__code-cell--focus) {
        border-color: var(--stb-input-stroke-hover);
        background-color: var(--stb-input-fill-hover)
    }
}

:root {
    --stb-radio-btn-body-bg: var(--stb-input-fill);
    --stb-radio-btn-body-bg-hover: var(--stb-input-fill-hover);
    --stb-radio-btn-body-bg-active: rgb(var(--stb-button-secondary-active));
    --stb-radio-btn-body-border: var(--stb-input-stroke);
    --stb-radio-btn-body-border-hover: var(--stb-input-stroke-hover)
}

.form-radio--contrast {
    --stb-radio-btn-body-bg: var(--stb-bg-primary);
    --stb-radio-btn-body-bg-hover: var(--stb-radio-btn-body-bg);
    --stb-radio-btn-body-border-hover: rgb(var(--stb-brand-400))
}

.form-radio__body {
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-columns: max-content;
    align-items: center;
    grid-gap: 12px;
    width: 100%;
    height: 48px;
    padding: 0 16px;
    background-color: var(--stb-radio-btn-body-bg);
    border: 1px solid var(--stb-radio-btn-body-border);
    border-radius: 12px;
    color: var(--stb-text-secondary);
    transition: border-color var(--stb-transition-time), background-color var(--stb-transition-time), color var(--stb-transition-time);
    cursor: pointer
}

@media (hover: hover) and (pointer: fine) {
    .form-radio__body:hover {
        background-color: var(--stb-radio-btn-body-bg-hover);
        border-color: var(--stb-radio-btn-body-border-hover)
    }
}

.form-radio__body:active {
    color: var(--stb-functional-done);
    background-color: var(--stb-radio-btn-body-bg-active);
    border-color: var(--stb-radio-btn-body-border-hover)
}

.form-radio__indicator {
    position: relative;
    width: 20px;
    height: 20px;
    color: inherit;
    transition: color var(--stb-transition-time)
}

.form-radio__text {
    color: inherit;
    transition: color var(--stb-transition-time)
}

.form-radio__input:checked+.form-radio__body {
    color: var(--stb-functional-done);
    background-color: var(--stb-radio-btn-body-bg-active);
    border-color: var(--stb-radio-btn-body-border-hover)
}

.form-radio__input:checked+.form-radio__body .form-radio__indicator,
.form-radio__input:checked+.form-radio__body .form-radio__text {
    color: rgb(var(--stb-yellow-500))
}

.form-radio__input:focus+.form-radio__body,
.form-radio__input:focus-visible+.form-radio__body,
.form-radio__input:focus:not(:focus-visible)+.form-radio__body {
    border-color: var(--stb-input-stroke-hover)
}

.form-radio-group {
    display: grid;
    grid-auto-flow: column;
    justify-content: space-between;
    align-items: flex-start;
    grid-template-columns: repeat(2, 1fr);
    grid-gap: 12px
}

.button {
    --stb-shadow-value: 0px 1px 2px var(--stb-button-text-shadow, transparent);
    text-shadow: var(--stb-shadow-value);
    --stb-button-glow: transparent;
    --stb-button-border: transparent;
    --stb-button-substrate: transparent;
    --stb-button-inner-glow: transparent;
    background: var(--stb-button-bg);
    box-shadow: 0 0 24px 0 transparent, 0 4px 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-white)/.3) inset, 0 8px 16px -4px var(--stb-button-inner-glow) inset;
    position: relative;
    display: inline-grid;
    align-items: center;
    justify-items: center;
    justify-content: center;
    grid-auto-flow: column;
    color: rgb(var(--stb-button-text-bright));
    text-align: center;
    font-weight: 900;
    line-height: 1.2;
    text-decoration: none;
    text-transform: var(--stb-text-transform-style);
    border: none;
    cursor: pointer;
    transition: box-shadow var(--stb-transition-time), text-shadow var(--stb-transition-time), transform var(--stb-transition-time)
}

.button svg {
    filter: drop-shadow(var(--stb-shadow-value))
}

.button:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 20px 20px -16px rgb(var(--stb-neutral-1100)/.7);
    transform: translateY(4px);
    pointer-events: none;
    transition: opacity var(--stb-transition-time), transform var(--stb-transition-time), box-shadow var(--stb-transition-time), text-shadow var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .button:hover {
        background: var(--stb-button-bg-hover);
        box-shadow: 0 0 24px 0 var(--stb-button-glow), 0 2px 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-white)/.3) inset, 0 4px 12px 0 var(--stb-button-inner-glow) inset;
        transform: translateY(2px)
    }
    .button:hover:before {
        box-shadow: 0 12px 20px -16px rgb(var(--stb-neutral-1100)/.7)
    }
}

.button:active {
    background: var(--stb-button-bg-active);
    box-shadow: 0 0 24px 0 transparent, 0 0 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-black)/.8) inset, 0 8px 16px -4px var(--stb-button-inner-glow) inset;
    transform: translateY(4px)
}

.button:active:before {
    opacity: 0;
    transform: translateY(0)
}

.button--l {
    --stb-button-loading-dimension: 24px;
    gap: 10px;
    font-size: 24px;
    min-height: 72px;
    padding: 0 36px;
    border-radius: 18px
}

.button--m {
    --stb-button-loading-dimension: 20px;
    gap: 8px;
    font-size: 20px;
    min-height: 58px;
    padding: 0 22px;
    border-radius: 16px
}

.button--s {
    --stb-button-loading-dimension: 20px;
    gap: 8px;
    font-size: 16px;
    min-height: 48px;
    padding: 0 18px;
    border-radius: 14px
}

.button--xs {
    --stb-button-loading-dimension: 16px;
    gap: 6px;
    min-height: 36px;
    min-width: 36px;
    padding: 0 14px;
    border-radius: 10px;
    font-size: 14px
}

.button--primary {
    --stb-button-glow: rgb(var(--stb-yellow-400) / .3);
    --stb-button-text-shadow: rgb(var(--stb-yellow-700));
    --stb-button-substrate: rgb(var(--stb-yellow-700));
    --stb-button-bg: var(--stb-button-primary);
    --stb-button-bg-hover: var(--stb-button-primary-hover);
    --stb-button-bg-active: rgb(var(--stb-button-primary-active))
}

.button--secondary {
    --stb-button-glow: rgb(var(--stb-neutral-150) / .2);
    --stb-button-text-shadow: rgb(var(--stb-neutral-800));
    --stb-button-substrate: rgb(var(--stb-neutral-750));
    --stb-button-bg: var(--stb-button-secondary);
    --stb-button-bg-hover: var(--stb-button-secondary-hover);
    --stb-button-bg-active: rgb(var(--stb-button-secondary-active))
}

.button--tertiary {
    --stb-button-glow: rgb(var(--stb-neutral-150) / .2);
    --stb-button-text-shadow: rgba(var(--stb-black) / .2);
    --stb-button-inner-glow: rgb(var(--stb-white) / .14);
    --stb-button-border: rgba(var(--stb-neutral-300) / .4);
    --stb-button-substrate: rgba(var(--stb-neutral-300) / .4);
    --stb-button-bg: var(--stb-button-tertiary);
    --stb-button-bg-hover: var(--stb-button-tertiary-hover);
    --stb-button-bg-active: rgb(var(--stb-button-tertiary-active))
}

.button--xs-ent {
    --stb-button-loading-dimension: 20px;
    font-size: 16px;
    min-height: 36px;
    padding: 0 8px
}

.button--xs-header {
    --stb-button-loading-dimension: 16px;
    gap: 6px;
    min-height: 36px;
    min-width: 36px;
    padding: 0 12px;
    border-radius: 10px;
    font-size: 12px
}

@media screen and (min-width: 412px) {
    .button--xs-header {
        padding: 0 14px;
        font-size: 14px
    }
}

@media screen and (min-width: 1280px) {
    .button--xs-header {
        --stb-button-loading-dimension: 20px;
        min-height: 48px;
        padding: 0 18px;
        font-size: 16px
    }
}

.button.button--loading:after {
    filter: var(--stb-button-text-bright-filter)
}

.button.button--loading,
.button.button--loading:disabled {
    --stb-button-text-shadow: transparent;
    position: relative;
    color: transparent;
    cursor: default;
    pointer-events: none
}

.button.button--loading:after,
.button.button--loading:disabled:after {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--stb-button-loading-dimension);
    height: var(--stb-button-loading-dimension);
    margin-top: calc(-1 * var(--stb-button-loading-dimension) / 2);
    margin-left: calc(-1 * var(--stb-button-loading-dimension) / 2);
    background: url(loading.fa9526f76f5ea7e2.svg) no-repeat center/100%;
    animation: animation-rotation var(--stb-animation-rotation-time) linear infinite;
    content: ""
}

.button:disabled:not(.button--loading) {
    background-color: var(--stb-button-disable);
    opacity: .5;
    cursor: default;
    pointer-events: none
}

.button-notification-indicator {
    position: absolute;
    inset-inline-end: 4px;
    top: 4px
}

@media screen and (min-width: 1280px) {
    .button-notification-indicator {
        inset-inline-end: 8px;
        top: 8px
    }
}

.button-reload {
    display: grid;
    grid-auto-flow: column;
    align-items: center;
    grid-gap: 4px;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 600;
    color: var(--stb-text-primary)
}

.button-flag {
    min-width: 20px;
    width: var(--stb-button-flag-width, 20px);
    height: var(--stb-button-flag-height, 20px);
    object-fit: cover;
    border-radius: 4px;
    filter: drop-shadow(0 1px 2px var(--stb-bg-secondary))
}

.arrow-button {
    --stb-shadow-value: 0px 1px 2px var(--stb-button-text-shadow, transparent);
    text-shadow: var(--stb-shadow-value);
    --stb-button-glow: transparent;
    --stb-button-border: transparent;
    --stb-button-substrate: transparent;
    --stb-button-inner-glow: transparent;
    background: var(--stb-button-bg);
    box-shadow: 0 0 24px 0 transparent, 0 2px 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-white)/.3) inset, 0 8px 16px -4px var(--stb-button-inner-glow) inset;
    --stb-button-glow: rgb(var(--stb-neutral-150) / .2);
    --stb-button-text-shadow: rgb(var(--stb-neutral-800));
    --stb-button-substrate: rgb(var(--stb-neutral-750));
    --stb-button-bg: var(--stb-button-secondary);
    --stb-button-bg-hover: var(--stb-button-secondary-hover);
    --stb-button-bg-active: rgb(var(--stb-button-secondary-active));
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--stb-arrow-button-width, 36px);
    height: var(--stb-arrow-button-height, 36px);
    color: rgb(var(--stb-link-primary));
    background-color: var(--stb-arrow-button-bg, var(--stb-bg-secondary));
    cursor: pointer;
    border-radius: var(--stb-arrow-button-border-radius, 0);
    transition: opacity var(--stb-transition-time), box-shadow var(--stb-transition-time), transform var(--stb-transition-time), border-color var(--stb-transition-time)
}

.arrow-button svg {
    filter: drop-shadow(var(--stb-shadow-value))
}

@media (hover: hover) and (pointer: fine) {
    .arrow-button:hover {
        background: var(--stb-button-bg-hover);
        box-shadow: 0 0 24px 0 var(--stb-button-glow), 0 1px 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-white)/.3) inset, 0 4px 12px 0 var(--stb-button-inner-glow) inset;
        transform: translateY(1px)
    }
}

.arrow-button:active {
    background: var(--stb-button-bg-active);
    box-shadow: 0 0 24px 0 transparent, 0 0 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-black)/.8) inset, 0 8px 16px -4px var(--stb-button-inner-glow) inset;
    transform: translateY(2px)
}

@media (hover: hover) and (pointer: fine) {
    .arrow-button:hover {
        background-color: var(--stb-arrow-button-hover-bg)
    }
}

.arrow-button:active {
    background-color: rgb(var(--stb-button-secondary-active))
}

.arrow-button--prev {
    border-start-start-radius: 12px;
    border-end-start-radius: 12px
}

.arrow-button--next {
    border-start-end-radius: 12px;
    border-end-end-radius: 12px
}

.arrow-button:disabled {
    cursor: default;
    pointer-events: none;
    opacity: .5;
    background-color: var(--stb-arrow-button-disabled-bg)
}

.button-icon-link {
    --stb-shadow-value: 0px 1px 2px var(--stb-button-text-shadow, transparent);
    text-shadow: var(--stb-shadow-value);
    display: grid;
    place-content: center;
    width: 36px;
    height: 36px;
    border-radius: 12px;
    color: var(--stb-link-secondary);
    cursor: pointer;
    transition: box-shadow var(--stb-transition-time)
}

.button-icon-link svg {
    filter: drop-shadow(var(--stb-shadow-value))
}

.button-icon-link:disabled {
    cursor: default;
    pointer-events: none;
    opacity: .5
}

.button-icon-link--base {
    --stb-shadow-opacity: 0;
    color: rgb(var(--stb-link-secondary));
    background: transparent;
    box-shadow: 0 1px 1px rgba(var(--stb-black)/var(--stb-shadow-opacity)) inset;
    transition: color var(--stb-transition-time), box-shadow var(--stb-transition-time), background var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .button-icon-link--base:hover {
        color: var(--stb-text-primary);
        background: var(--stb-button-tertiary-hover)
    }
}

.button-icon-link--base:active {
    --stb-shadow-opacity: .8;
    color: rgb(var(--stb-link-secondary-active));
    background: var(--stb-button-tertiary-active)
}

.button-icon-link--primary,
.button-icon-link--secondary,
.button-icon-link--tertiary {
    --stb-button-glow: transparent;
    --stb-button-border: transparent;
    --stb-button-substrate: transparent;
    --stb-button-inner-glow: transparent;
    background: var(--stb-button-bg);
    box-shadow: 0 0 24px 0 transparent, 0 0 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-white)/.3) inset, 0 8px 16px -4px var(--stb-button-inner-glow) inset
}

@media (hover: hover) and (pointer: fine) {
    .button-icon-link--primary:hover,
    .button-icon-link--secondary:hover,
    .button-icon-link--tertiary:hover {
        background: var(--stb-button-bg-hover);
        box-shadow: 0 0 24px 0 var(--stb-button-glow), 0 0 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-white)/.3) inset, 0 4px 12px 0 var(--stb-button-inner-glow) inset;
        transform: translateY(0)
    }
}

.button-icon-link--primary:active,
.button-icon-link--secondary:active,
.button-icon-link--tertiary:active {
    background: var(--stb-button-bg-active);
    box-shadow: 0 0 24px 0 transparent, 0 0 0 0 var(--stb-button-substrate), 0 0 0 1px var(--stb-button-border) inset, 0 1px 1px rgba(var(--stb-black)/.8) inset, 0 8px 16px -4px var(--stb-button-inner-glow) inset;
    transform: translateY(0)
}

.button-icon-link--primary {
    --stb-button-glow: rgb(var(--stb-yellow-400) / .3);
    --stb-button-text-shadow: rgb(var(--stb-yellow-700));
    --stb-button-substrate: rgb(var(--stb-yellow-700));
    --stb-button-bg: var(--stb-button-primary);
    --stb-button-bg-hover: var(--stb-button-primary-hover);
    --stb-button-bg-active: rgb(var(--stb-button-primary-active))
}

.button-icon-link--secondary {
    --stb-button-glow: rgb(var(--stb-neutral-150) / .2);
    --stb-button-text-shadow: rgb(var(--stb-neutral-800));
    --stb-button-substrate: rgb(var(--stb-neutral-750));
    --stb-button-bg: var(--stb-button-secondary);
    --stb-button-bg-hover: var(--stb-button-secondary-hover);
    --stb-button-bg-active: rgb(var(--stb-button-secondary-active))
}

.button-icon-link--tertiary {
    --stb-button-glow: rgb(var(--stb-neutral-150) / .2);
    --stb-button-text-shadow: rgba(var(--stb-black) / .2);
    --stb-button-inner-glow: rgb(var(--stb-white) / .14);
    --stb-button-border: rgba(var(--stb-neutral-300) / .4);
    --stb-button-substrate: rgba(var(--stb-neutral-300) / .4);
    --stb-button-bg: var(--stb-button-tertiary);
    --stb-button-bg-hover: var(--stb-button-tertiary-hover);
    --stb-button-bg-active: rgb(var(--stb-button-tertiary-active))
}

.notification-button {
    display: inline-flex;
    color: var(--stb-button-secondary);
    opacity: .5;
    cursor: pointer;
    transition: opacity var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .notification-button:hover {
        opacity: 1
    }
}

.notification-button:active {
    opacity: .2
}

.link {
    display: inline-grid;
    grid-auto-flow: column;
    align-items: center;
    gap: var(--stb-link-gap, 4px);
    transition: color var(--stb-transition-time);
    cursor: pointer
}

.link:not(.text-underline) {
    text-decoration: none
}

.link--primary {
    color: rgb(var(--stb-link-primary))
}

@media (hover: hover) and (pointer: fine) {
    .link--primary:hover {
        color: rgb(var(--stb-link-primary-hover))
    }
}

.link--primary:active {
    color: rgb(var(--stb-link-primary-active))
}

.link--secondary {
    color: rgb(var(--stb-link-secondary))
}

@media (hover: hover) and (pointer: fine) {
    .link--secondary:hover {
        color: rgb(var(--stb-link-secondary-hover))
    }
}

.link--secondary:active {
    color: rgb(var(--stb-link-secondary-active))
}

.link--accent {
    color: rgb(var(--stb-link-primary))
}

@media (hover: hover) and (pointer: fine) {
    .link--accent:hover {
        color: rgb(var(--stb-link-primary-hover))
    }
}

.link--accent:active {
    color: rgb(var(--stb-link-primary-active))
}

.link--alert {
    color: rgb(var(--stb-link-alert))
}

@media (hover: hover) and (pointer: fine) {
    .link--alert:hover {
        color: rgb(var(--stb-link-alert-hover))
    }
}

.link--alert:active {
    color: rgb(var(--stb-link-alert-active))
}

.link--invert {
    color: rgb(var(--stb-link-secondary))
}

@media (hover: hover) and (pointer: fine) {
    .link--invert:hover {
        color: rgb(var(--stb-link-secondary-hover))
    }
}

.link--invert:active {
    color: rgb(var(--stb-link-secondary-active))
}

.link--gap-4 {
    gap: 4px
}

.modal-dialog-panel {
    max-height: 100%;
    height: auto;
    width: 100%;
    max-width: var(--stb-modal-dialog-panel-max-width);
    margin: 0 auto;
    overflow-y: auto;
    overflow-x: hidden
}

.modal-dialog-panel.clash-onboarding-modal {
    max-width: 100%;
    padding: 36px 20px 20px
}

@media screen and (min-width: 768px) {
    .modal-dialog-panel.clash-onboarding-modal {
        max-width: 940px;
        padding: 50px 20px 20px
    }
}

@media screen and (min-width: 1280px) {
    .modal-dialog-panel.clash-onboarding-modal {
        max-width: 1080px
    }
}

@media (pointer: fine) {
    .modal-dialog-panel {
        scrollbar-width: none
    }
}

.modal-dialog-panel>* {
    position: relative;
    width: 100%
}

.burger-menu-backdrop,
.user-menu-backdrop {
    top: var(--stb-header-height)
}

.burger-menu-backdrop~.stb-global-overlay-wrapper:has(.burger-menu-modal),
.burger-menu-backdrop~.stb-global-overlay-wrapper:has(.user-menu-modal),
.user-menu-backdrop~.stb-global-overlay-wrapper:has(.burger-menu-modal),
.user-menu-backdrop~.stb-global-overlay-wrapper:has(.user-menu-modal) {
    top: var(--stb-header-height);
    height: calc(100% - var(--stb-header-height))
}

.burger-menu-modal {
    inset-inline-start: 0;
    max-width: var(--stb-modal-menu-max-width);
    height: 100%;
    margin-inline-start: 0
}

.user-menu-modal {
    inset-inline-end: 0;
    max-width: var(--stb-modal-menu-max-width);
    height: 100%;
    margin-inline-end: 0
}

.dialog {
    display: block;
    padding-block: 20px;
    padding-inline: var(--stb-modal-dialog-inline-padding)
}

@media screen and (min-width: 768px) {
    .dialog {
        padding-block: 80px
    }
}

.dialog-inner {
    position: relative;
    display: block;
    padding-inline: var(--stb-modal-dialog-inner-horizontal-padding);
    padding-block: 0 var(--stb-modal-dialog-inner-vertical-padding);
    border-radius: var(--stb-modal-dialog-border-radius);
    background: var(--stb-gradient-50);
    background-repeat: no-repeat;
    box-shadow: 0 6px 20px #000c
}

@media screen and (min-width: 1280px) {
    .dialog-inner {
        box-shadow: 0 6px 80px #000c
    }
}

.dialog-inner:before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    inset-inline: -1px;
    border-radius: 20px;
    background: var(--stb-gradient-800);
    z-index: -1
}

.dialog-inner:after {
    content: "";
    width: 100%;
    height: 52px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(popup-corner-left-mob.e2915d7550d58a8a.svg), url(popup-corner-right-mob.d112fcb7349d3299.svg);
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
    pointer-events: none
}

@media screen and (min-width: 1280px) {
    .dialog-inner:after {
        background-image: url(popup-corner-left-desk.3e37811072978e0d.svg), url(popup-corner-right-desk.7fe55cad73d919e8.svg)
    }
}

.dialog-header {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 20px 40px 16px;
    text-align: center
}

.dialog-subtitle {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    width: 100%;
    gap: 4px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    color: var(--stb-text-secondary);
    margin-bottom: 20px;
    padding-inline: 4px
}

.dialog-action {
    display: grid
}

.dialog-close {
    position: absolute;
    inset-inline-end: 0;
    top: 16px;
    transition: background-color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .dialog-close:hover {
        color: var(--stb-text-primary);
        border-radius: 12px;
        background-color: var(--stb-button-tertiary-hover)
    }
}

.dialog-close:active {
    color: var(--stb-link-secondary-active)
}

.dialog-body {
    display: grid;
    grid-gap: 20px;
    width: 100%;
    margin: 0 auto;
    padding: var(--stb-modal-dialog-body-vertical-padding) var(--stb-modal-dialog-body-horizontal-padding);
    border-radius: var(--stb-modal-dialog-body-border-radius);
    background-color: var(--stb-bg-tertiary)
}

.dialog-body--search {
    display: block;
    grid-gap: 0;
    min-height: 450px
}

.dialog-body--promo-refuse,
.dialog-body--registration-cancel {
    padding-bottom: 0
}

.dialog-item {
    display: grid;
    grid-gap: 20px;
    padding: 0
}

.dialog-item--no-gap {
    gap: 0
}

.dialog-bottom {
    padding: 20px var(--stb-modal-dialog-inner-vertical-padding) 40px
}

.dialog-header__title {
    --stb-title-font-size-lg: 24px;
    padding-top: 4px;
    font-size: var(--stb-title-font-size-lg);
    line-height: var(--stb-title-line-height-lg-desktop);
    font-weight: 800;
    color: var(--stb-text-primary)
}

@media screen and (min-width: 768px) {
    .dialog-header__title {
        --stb-title-font-size-lg: 28px;
        padding-top: 0
    }
}

.dialog-back {
    position: absolute;
    inset-inline-start: 0;
    top: 16px
}

.dialog-result {
    display: grid;
    grid-gap: 20px
}

.dialog-result__icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: var(--stb-functional-done)
}

.actions-grid {
    display: grid;
    grid-row-gap: 12px
}

.bonus-picture {
    display: flex;
    justify-content: center;
    width: 100%;
    height: 76px;
    background: url(promo-refuse-bg.0b371a92b43a1a59.png) center bottom no-repeat;
    background-size: cover;
    border-radius: 16px;
    box-shadow: 0 1px 1px #fff3 inset
}

.bonus-picture>img {
    width: 74px;
    height: 74px;
    margin-top: -8px
}

.dialog-separator {
    font-size: 12px;
    line-height: 1.4;
    color: rgb(var(--stb-neutral-600));
    margin: 8px 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-column-gap: 12px;
    place-items: center
}

.dialog-separator:before,
.dialog-separator:after {
    width: 100%;
    height: 10px;
    content: ""
}

.dialog-separator:before {
    background-image: linear-gradient(rgb(var(--stb-neutral-750)), rgb(var(--stb-neutral-750))), url(separator-left.cf2cae9cf7d45fb9.svg);
    background-repeat: no-repeat;
    background-position: right 4px center, right;
    background-size: calc(100% - 5px) 1px, 4px 10px
}

.dialog-separator:after {
    background-image: url(separator-right.e261942caf5c8e41.svg), linear-gradient(rgb(var(--stb-neutral-750)), rgb(var(--stb-neutral-750)));
    background-repeat: no-repeat;
    background-position: left, left 4px center;
    background-size: 4px 10px, calc(100% - 5px) 1px
}

.dialog-separator:empty {
    grid-template-columns: 1fr 1fr;
    grid-column-gap: 0
}

.search-modal {
    --stb-modal-dialog-panel-max-width: 100%
}

@media screen and (min-width: 1280px) {
    .search-modal {
        --stb-modal-dialog-panel-max-width: 1280px
    }
}

.exclusive-leaderboard-dialog {
    --stb-modal-dialog-panel-max-width: 100%
}

@media screen and (min-width: 1280px) {
    .exclusive-leaderboard-dialog {
        --stb-modal-dialog-panel-max-width: 660px
    }
}

.cashier-modal {
    --stb-modal-dialog-panel-max-width: 100%;
    --stb-modal-dialog-inner-vertical-padding: 0
}

@media screen and (min-width: 768px) {
    .cashier-modal {
        --stb-modal-dialog-panel-max-width: 816px
    }
}

.cashier-modal .dialog .dialog-inner {
    background: var(--stb-bg-tertiary)
}

.modal-notification-panel {
    --stb-modal-dialog-panel-max-width: 512px;
    margin-block: 12px auto;
    margin-inline: 20px
}

@media screen and (min-width: 768px) {
    .modal-notification-panel {
        margin-block: 76px auto
    }
}

@media screen and (min-aspect-ratio: 12/9) and (max-width: 1279px) {
    .modal-notification-panel {
        margin-block: 18px auto;
        margin-inline: var(--stb-game-page-header-height) 0
    }
}

.modal-notification-backdrop {
    background-color: transparent
}

.notification-dialog {
    display: block;
    padding: 20px
}

.notification-dialog .button {
    margin: 0 auto
}

.notification-dialog-inner {
    position: relative;
    display: grid;
    gap: 8px;
    padding: 20px;
    border-radius: var(--stb-modal-dialog-border-radius);
    background: var(--stb-gradient-50);
    background-repeat: no-repeat;
    box-shadow: 0 6px 10px #000c
}

.notification-dialog-inner:before {
    content: "";
    position: absolute;
    top: -1px;
    bottom: -1px;
    inset-inline: -1px;
    border-radius: 20px;
    background: var(--stb-gradient-800);
    z-index: -1
}

.notification-dialog-inner:after {
    content: "";
    width: 100%;
    height: 52px;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url(popup-corner-left-mob.e2915d7550d58a8a.svg), url(popup-corner-right-mob.d112fcb7349d3299.svg);
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
    pointer-events: none
}

@media screen and (min-width: 1280px) {
    .notification-dialog-inner:after {
        background-image: url(popup-corner-left-desk.3e37811072978e0d.svg), url(popup-corner-right-desk.7fe55cad73d919e8.svg)
    }
}

.notification-dialog-body {
    display: flex;
    justify-content: space-between;
    gap: 12px
}

.notification-dialog-content {
    display: grid;
    gap: 8px
}

.notification-dialog-close {
    flex-shrink: 0;
    width: 16px;
    height: 16px
}

.documents-verification-modal {
    --stb-modal-dialog-panel-max-width: 100%;
    height: 100%;
    padding: 0
}

.mosaic-games-selection-modal {
    --stb-mosaic-games-selection-modal-inner-max-width: 408px;
    --stb-mosaic-games-selection-dialog-grid-rows: 100%;
    --stb-mosaic-games-selection-dialog-max-height: 100dvh;
    --stb-modal-dialog-panel-max-width: calc( var(--stb-mosaic-games-selection-modal-inner-max-width) + 2 * var(--stb-modal-dialog-inline-padding));
    --stb-modal-dialog-body-horizontal-padding: 16px
}

@media screen and (min-width: 768px) {
    .mosaic-games-selection-modal {
        --stb-mosaic-games-selection-modal-inner-max-width: 500px;
        --stb-modal-dialog-close-margin: -6px;
        --stb-modal-dialog-inner-inline-padding: 24px
    }
}

@media screen and (max-width: 767px) {
    .recommended-games-modal {
        max-width: none;
        margin-top: auto;
        animation: slide-in-from-bottom .5s both
    }
}

.cdk-overlay-pane.notifications-panel {
    max-width: 400px;
    width: 100%
}

.stb-notification {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    grid-gap: 12px;
    width: 100%;
    padding-block: 12px;
    padding-inline: 48px 12px;
    background-color: var(--stb-bg-fourth);
    background-size: 20px 20px;
    background-position: 12px center;
    background-repeat: no-repeat;
    border-radius: 12px;
    box-shadow: 0 1px 1px #fff3 inset
}

.stb-notification.success {
    background-image: url(notification-success.3240daa6ebc6adbf.png)
}

.stb-notification.warning {
    background-image: url(notification-warning.9b5d3d50145d3d08.png)
}

.stb-notification.info {
    background-image: url(notification-info.b921825c005211d3.png)
}

.stb-notification.error {
    background-image: url(notification-error.3766321be7dc7903.png)
}

.stb-notification__text {
    font-size: 14px;
    line-height: 1.2;
    color: var(--stb-text-primary);
    word-break: break-word
}

.stb-notification__btn {
    position: relative;
    align-self: start;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background-color: transparent;
    box-shadow: 0 1px 1px rgba(var(--stb-black)/0) inset;
    overflow: hidden;
    transition: box-shadow var(--stb-transition-time), background-color var(--stb-transition-time)
}

.stb-notification__btn:before {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(var(--stb-link-secondary));
    mask: url(close-color.1a6330ccee406f69.svg) no-repeat center center/16px 16px;
    transition: background-color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .stb-notification__btn:hover {
        background-color: var(--stb-button-tertiary-hover)
    }
    .stb-notification__btn:hover:before {
        background-color: rgb(var(--stb-link-secondary-hover))
    }
}

.stb-notification__btn:active {
    background-color: var(--stb-button-tertiary-active);
    box-shadow: 0 1px 1px rgba(var(--stb-black)/.8) inset
}

.stb-notification__btn:active:before {
    background-color: rgb(var(--stb-link-secondary-active))
}

.stb-notification--in {
    animation: notification-in .5s both
}

.stb-notification--out {
    animation: notification-out .5s forwards
}

html[dir=rtl] .stb-notification {
    background-position: calc(100% - 12px) center
}

html[dir=rtl] .stb-notification--in {
    animation: notification-in-rtl .5s both
}

html[dir=rtl] .stb-notification--out {
    animation: notification-out-rtl .5s forwards
}

@keyframes notification-in {
    0% {
        transform: translate(calc(100% + 20px))
    }
    to {
        transform: translate(0)
    }
}

@keyframes notification-out {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(calc(100% + 20px))
    }
}

@keyframes notification-in-rtl {
    0% {
        transform: translate(-100%)
    }
    to {
        transform: translate(0)
    }
}

@keyframes notification-out-rtl {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(-100%)
    }
}

.toggle {
    position: relative;
    display: inline-grid;
    grid-auto-flow: column;
    grid-gap: 4px;
    align-items: center;
    justify-content: center;
    min-height: 36px;
    min-width: 36px;
    padding: 10px 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--stb-text-secondary);
    text-align: center;
    background-color: transparent;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--stb-input-stroke) inset;
    transition-property: color, box-shadow;
    transition-duration: var(--stb-transition-time);
    cursor: pointer
}

.toggle>* {
    position: relative
}

.toggle:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--stb-gradient-400);
    box-shadow: 0 0 0 1px var(--stb-input-stroke-selected) inset;
    opacity: 0;
    transition: opacity var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .toggle:hover {
        color: rgb(var(--stb-text-primary));
        box-shadow: 0 0 0 1px var(--stb-input-stroke-hover) inset
    }
}

.toggle:active,
.toggle--active,
.toggle--active:hover,
.toggle-input:checked+.toggle {
    color: var(--stb-text-contrast-secondary)
}

.toggle:active:before,
.toggle--active:before,
.toggle--active:hover:before,
.toggle-input:checked+.toggle:before {
    opacity: 1
}

.toggle--is-ascending {
    --stb-toggle-transform: rotate(0)
}

.toggle--is-descending {
    --stb-toggle-transform: rotate(-180deg)
}

.toggle__image {
    transform: var(--stb-toggle-transform);
    transition: transform var(--stb-transition-time)
}

.lang-toggle {
    display: inline-grid;
    grid-auto-flow: column;
    grid-template-columns: max-content 1fr;
    align-items: center;
    gap: 8px;
    padding: 12px;
    color: var(--stb-text-secondary);
    font-size: 14px;
    font-weight: 600;
    text-align: start;
    background: var(--stb-bg-secondary);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--stb-input-stroke);
    cursor: pointer;
    transition: background var(--stb-transition-time), box-shadow var(--stb-transition-time), color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .lang-toggle:hover:not(.lang-toggle--active) {
        color: var(--stb-text-primary);
        background: var(--stb-input-fill-hover);
        box-shadow: inset 0 0 0 1px var(--stb-input-stroke-hover)
    }
}

.lang-toggle--active {
    color: var(--stb-text-primary);
    background: var(--stb-gradient-400);
    box-shadow: inset 0 0 0 1px var(--stb-input-stroke-selected)
}

.lang-toggle:active:not(.lang-toggle--active) {
    color: var(--stb-text-primary);
    background: rgb(var(--stb-brand-700));
    box-shadow: inset 0 0 0 0 var(--stb-input-stroke-hover)
}

.category {
    position: relative;
    display: inline-grid;
    grid-auto-flow: row;
    grid-auto-columns: 1fr;
    grid-template-columns: var(--stb-category-grid-template-columns, auto);
    grid-gap: var(--stb-category-grid-gap, 8px);
    align-items: start;
    justify-content: center;
    width: 112px;
    max-width: var(--stb-category-max-width, initial);
    color: var(--stb-text-tertiary);
    font-size: 12px;
    font-weight: 600;
    font-style: var(--stb-category-font-style, italic);
    text-align: var(--stb-category-text-align, initial);
    cursor: pointer;
    transition: color var(--stb-transition-time)
}

.category--vertical-mob {
    --stb-category-grid-gap: 4px
}

@media screen and (min-width: 1280px) {
    .category {
        --stb-category-grid-auto-flow: auto;
        --stb-category-grid-template-columns: auto;
        --stb-category-grid-gap: 4px;
        --stb-category-justify-items: center;
        --stb-category-max-width: 110px;
        --stb-category-padding-block: 12px 6px;
        --stb-category-padding-inline: 6px;
        --stb-category-line-height: 1.2;
        --stb-category-font-style: none;
        --stb-category-font-size: 12px;
        --stb-category-text-align: center
    }
    .category--vertical-mob {
        --stb-category-grid-gap: unset;
        --stb-icon-sprite-svg-height: 28px;
        --stb-icon-sprite-svg-width: 28px
    }
}

.category__picture {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    position: relative;
    width: 76px;
    height: 76px;
    margin-inline: auto;
    border-radius: 16px;
    background: var(--stb-gradient-750);
    box-shadow: var(--stb-shadow-inset-primary);
    transition: box-shadow var(--stb-transition-time), background-image var(--stb-transition-time);
    overflow: hidden;
    backface-visibility: hidden
}

.category__picture:not(.skeleton):after {
    content: "";
    position: absolute;
    inset: 0;
    background-color: rgb(var(--stb-neutral-750));
    mask: url(category-corner.1fdfcf46210ce9c4.svg) no-repeat;
    mask-size: 100% auto;
    mask-position: bottom;
    border-radius: inherit;
    overflow: hidden;
    transition: background-color var(--stb-transition-time)
}

.category__img {
    position: relative;
    width: 38px;
    height: 38px;
    background: rgb(var(--stb-neutral-200));
    mask-size: 100%;
    transform: translateZ(0);
    transition: background-image var(--stb-transition-time), transform var(--stb-transition-time)
}

.category__text {
    text-align: center;
    min-height: 1.2em;
    font-weight: 600;
    font-size: 14px;
    border-radius: 6px
}

@media (hover: hover) and (pointer: fine) {
    .category:hover {
        color: var(--stb-text-primary)
    }
    .category:hover .category__picture {
        box-shadow: 0 0 0 1px rgba(var(--stb-white)/.16) inset
    }
    .category:hover .category__picture:not(.skeleton):after {
        background-color: rgb(var(--stb-neutral-700))
    }
    .category:hover .category__img {
        background: var(--stb-text-secondary);
        transform: translateZ(0) scale(1.05)
    }
}

.category--menu-preloader {
    min-height: 105px
}

.category--icon {
    min-width: auto
}

.category--active,
.category--active:hover,
.category:active {
    color: var(--stb-text-primary)
}

.category--active .category__picture,
.category--active:hover .category__picture,
.category:active .category__picture {
    background: var(--stb-gradient-250);
    box-shadow: var(--stb-shadow-inset-primary)
}

.category--active .category__picture:not(.skeleton):after,
.category--active:hover .category__picture:not(.skeleton):after,
.category:active .category__picture:not(.skeleton):after {
    background-color: rgb(var(--stb-neutral-700))
}

.category--active .category__img,
.category--active:hover .category__img,
.category:active .category__img {
    background: linear-gradient(rgb(var(--stb-yellow-400)), rgb(var(--stb-yellow-600)))
}

.search-category {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    color: var(--stb-text-secondary);
    font-size: 14px;
    background-color: var(--stb-bg-secondary);
    border-radius: 8px;
    transition: background-color var(--stb-transition-time);
    cursor: pointer
}

.search-category__text {
    padding-inline-end: 6px;
    transition: color var(--stb-transition-time)
}

.search-category__amount {
    transition: color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .search-category:hover {
        background-color: var(--stb-bg-tertiary)
    }
    .search-category:hover .category__text {
        color: var(--stb-text-primary)
    }
}

.search-category:active {
    background-color: rgb(var(--stb-brand-400))
}

.search-category:active .category__text {
    color: var(--stb-text-contrast-primary)
}

.search-category:active .category__amount {
    color: var(--stb-text-contrast-secondary)
}

.provider {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr;
    grid-gap: 8px;
    align-items: center;
    min-height: 38px;
    min-width: 88px;
    padding: 8px 12px 8px 8px;
    color: var(--stb-text-secondary);
    font-size: 14px;
    background-color: rgb(var(--stb-neutral-750));
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--stb-input-stroke) inset;
    transition: color var(--stb-transition-time), background-color var(--stb-transition-time), box-shadow var(--stb-transition-time);
    cursor: pointer
}

.provider__picture {
    display: flex;
    justify-content: center;
    align-items: center;
    align-content: center;
    flex-wrap: nowrap;
    width: 38px;
    height: 38px;
    background-color: rgb(var(--stb-neutral-700));
    border-radius: 6px;
    color: var(--stb-icon-100);
    transition: background-color var(--stb-transition-time)
}

.provider__icon {
    filter: brightness(0) saturate(100%) invert(94%) sepia(10%) saturate(729%) hue-rotate(279deg) brightness(108%) contrast(102%);
    max-height: 30px
}

.provider__text {
    font-weight: 600
}

html[dir=rtl] .provider__text {
    direction: ltr
}

.provider__amount {
    color: var(--stb-text-tertiary);
    transition: color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .provider:hover {
        color: var(--stb-text-primary);
        background-color: rgb(var(--stb-neutral-700));
        box-shadow: 0 0 0 1px var(--stb-input-stroke-hover) inset
    }
    .provider:hover .provider__icon {
        filter: brightness(0) saturate(100%) invert(92%) sepia(83%) saturate(7451%) hue-rotate(184deg) brightness(94%) contrast(117%)
    }
    .provider:hover .provider__amount {
        color: var(--stb-text-secondary)
    }
}

.provider--active,
.provider--active:hover,
.provider:active {
    color: var(--stb-text-primary);
    background: var(--stb-gradient-400);
    box-shadow: 0 0 0 1px var(--stb-input-stroke-selected) inset
}

.provider--active .provider__picture,
.provider--active:hover .provider__picture,
.provider:active .provider__picture {
    background-color: rgb(var(--stb-neutral-750))
}

.provider--active .provider__icon,
.provider--active:hover .provider__icon,
.provider:active .provider__icon {
    filter: brightness(0) saturate(100%) invert(92%) sepia(83%) saturate(7451%) hue-rotate(184deg) brightness(94%) contrast(117%)
}

.provider--active .provider__amount,
.provider--active:hover .provider__amount,
.provider:active .provider__amount {
    color: var(--stb-text-secondary)
}

.scroller {
    position: relative;
    display: flex;
    max-width: 100vw;
    height: max-content;
    margin-bottom: calc(-1 * var(--stb-scroller-correct-scrollbar));
    padding-bottom: var(--stb-scroller-correct-scrollbar);
    overflow-x: var(--stb-scroller-overflow-x, auto);
    overflow-y: hidden
}

.scroller:focus-visible {
    outline: 1px dashed rgb(var(--stb-brand-500))
}

.scroller:not(.no-custom-scrollbar) {
    --stb-scrollbar-width-keyword: thin
}

@supports (scrollbar-width: auto) {
    .scroller:not(.no-custom-scrollbar) {
        scrollbar-color: var(--stb-scrollbar-thumb-color) var(--stb-scrollbar-track-color);
        scrollbar-width: var(--stb-scrollbar-width-keyword)
    }
}

.scroller--inside-container {
    margin-inline-start: calc(-1 * var(--stb-container-padding));
    margin-inline-end: calc(-1 * var(--stb-container-padding))
}

@media (orientation: landscape) {
    .scroller--inside-container {
        margin-inline-start: calc(-1*max(var(--stb-safe-area-inline-start), var(--stb-container-padding)));
        margin-inline-end: calc(-1*max(var(--stb-safe-area-inline-end), var(--stb-container-padding)))
    }
}

.scroller--centered {
    justify-content: center
}

.scroller__inner {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    grid-column-gap: var(--stb-scroller-inner-row-gap, 10px);
    padding: 2px var(--stb-container-padding)
}

.scroller__inner--centered {
    margin: 0 auto
}

.scroller__inner--gap-4 {
    grid-column-gap: 4px
}

@media (orientation: landscape) {
    .scroller__inner {
        padding-inline-start: max(var(--stb-safe-area-inline-start), var(--stb-container-padding));
        padding-inline-end: max(var(--stb-safe-area-inline-end), var(--stb-container-padding))
    }
}

.scroller--custom-inline-paddings .scroller__inner {
    padding-inline-start: var(--stb-scroller-padding-inline-start);
    padding-inline-end: var(--stb-scroller-padding-inline-end)
}

@media screen and (min-width: 1280px) {
    .scroller--sidebar {
        display: block;
        max-width: 100%;
        margin: 0;
        padding-bottom: 0;
        overflow: unset
    }
    .scroller--sidebar .scroller__inner {
        display: grid;
        grid-auto-flow: row;
        grid-template-columns: 1fr;
        grid-row-gap: 8px;
        padding: 0
    }
}

.slider-with-fade {
    position: relative;
    display: block
}

.slider-with-fade:before,
.slider-with-fade:after {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    display: block;
    height: 100%;
    width: var(--stb-container-padding);
    content: ""
}

.slider-with-fade:before {
    left: var(--stb-slider-fade-position-left, -1px);
    background-image: linear-gradient(90deg, var(--stb-slider-fade-color, var(--stb-bg-primary)) 60%, rgb(var(--stb-white)/0) 100%)
}

.slider-with-fade:after {
    right: var(--stb-slider-fade-position-right, -1px);
    background-image: linear-gradient(270deg, var(--stb-slider-fade-color, var(--stb-bg-primary)) 60%, rgb(var(--stb-white)/0) 100%)
}

.seo-text {
    overflow-y: hidden;
    transition: max-height var(--stb-transition-time)
}

.seo-text--closed {
    mask-image: linear-gradient(0deg, rgb(var(--stb-white)/0) 0%, var(--stb-bg-primary) 64.58%)
}

.seo-text article {
    display: grid;
    grid-row-gap: 20px
}

.seo-text section {
    display: grid;
    grid-row-gap: 12px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--stb-seo-text-color, var(--stb-text-secondary))
}

.seo-text section>div {
    display: contents
}

.seo-text h1,
.seo-text h2,
.seo-text h3,
.seo-text h4,
.seo-text h5,
.seo-text h6 {
    font-size: 14px;
    font-weight: 700
}

.seo-text a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    transition: color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .seo-text a:hover {
        color: rgb(var(--stb-brand-200))
    }
}

.seo-text a:active {
    color: var(--stb-link-tertiary)
}

.seo-text ul,
.seo-text ol {
    padding-left: 20px;
    list-style: revert
}

.seo-text-container {
    display: grid;
    grid-row-gap: 20px;
    justify-items: start
}

.seo-text-container[hidden] {
    display: none
}

.info-article {
    max-width: var(--stb-page-content-width);
    margin: 0 auto;
    color: var(--stb-text-secondary);
    padding-bottom: 12px
}

.info-article h1 {
    font-size: 28px;
    text-align: center;
    font-weight: 800;
    line-height: 1.2;
    color: var(--stb-text-primary);
    letter-spacing: .02em
}

@media screen and (min-width: 1280px) {
    .info-article h1 {
        font-size: 32px;
        letter-spacing: .03em
    }
}

.info-article section {
    scroll-margin-top: var(--stb-header-height);
    scroll-snap-margin: var(--stb-header-height);
    border-bottom: 1px solid rgb(var(--stb-neutral-800))
}

.info-article h2,
.info-article h3,
.info-article h4,
.info-article h5,
.info-article h6 {
    display: grid;
    grid-auto-flow: column;
    grid-template-columns: auto 1fr;
    grid-column-gap: 8px;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: .02em;
    color: var(--stb-text-primary);
    transition: color var(--stb-transition-time);
    cursor: pointer
}

.info-article h2:after,
.info-article h3:after,
.info-article h4:after,
.info-article h5:after,
.info-article h6:after {
    width: 18px;
    height: 18px;
    margin-left: auto;
    flex-shrink: 0;
    content: "";
    background-color: var(--stb-icon-400);
    mask: url(arrow-down.3d4a03f25e5faa4b.svg) no-repeat center center/100%;
    transform: rotate(0);
    transition: transform var(--stb-transition-time), background-color var(--stb-transition-time)
}

html[dir=rtl] .info-article h2,
html[dir=rtl] .info-article h3,
html[dir=rtl] .info-article h4,
html[dir=rtl] .info-article h5,
html[dir=rtl] .info-article h6 {
    grid-template-columns: 1fr auto
}

@media (hover: hover) and (pointer: fine) {
    .info-article h2:hover,
    .info-article h3:hover,
    .info-article h4:hover,
    .info-article h5:hover,
    .info-article h6:hover {
        color: var(--stb-text-primary)
    }
    .info-article h2:hover:after,
    .info-article h3:hover:after,
    .info-article h4:hover:after,
    .info-article h5:hover:after,
    .info-article h6:hover:after {
        background-color: var(--stb-icon-800)
    }
}

@media screen and (min-width: 1280px) {
    .info-article h2:after,
    .info-article h3:after,
    .info-article h4:after,
    .info-article h5:after,
    .info-article h6:after {
        width: 20px;
        height: 20px
    }
}

.info-article p {
    padding-bottom: 20px;
    line-height: 1.25
}

.info-article p:last-child {
    padding-bottom: 0
}

.info-article a:not([class]) {
    font-weight: 600;
    color: rgb(var(--stb-link-primary));
    transition: color var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .info-article a:not([class]):hover {
        color: rgb(var(--stb-link-primary-hover))
    }
}

.info-article a:not([class]):active {
    color: var(--stb-text-primary)
}

.info-article ul {
    padding-inline-start: 20px;
    padding-bottom: 20px;
    list-style: disc
}

.info-article ol {
    padding-left: 20px;
    padding-bottom: 20px;
    list-style: decimal
}

.info-article li>ul,
.info-article li>ol {
    padding-top: 12px
}

.info-article ul:last-child,
.info-article ol:last-child {
    padding-bottom: 0
}

.info-article li {
    padding-bottom: 12px
}

.info-article li:last-child {
    padding-bottom: 0
}

.info-article img {
    margin: 0 auto
}

.info-article section>div div {
    padding-bottom: 20px
}

.info-article section>div div:last-child {
    padding-bottom: 0
}

.info-article section>div>*:not(h2) {
    display: none;
    padding-bottom: 20px
}

.info-article table {
    --stb-scrollbar-width-keyword: thin;
    all: revert;
    display: block;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 8px;
    overflow-x: scroll;
    text-align: start;
    font-size: 14px;
    line-height: 1.2;
    border: 0;
    border-collapse: collapse;
    border-spacing: 0
}

@supports (scrollbar-width: auto) {
    .info-article table {
        scrollbar-color: var(--stb-scrollbar-thumb-color) var(--stb-scrollbar-track-color);
        scrollbar-width: var(--stb-scrollbar-width-keyword)
    }
}

.info-article table:first-child {
    padding-top: 0
}

.info-article table th {
    font-weight: 700;
    color: var(--stb-text-secondary)
}

.info-article table th,
.info-article table td {
    padding-right: 8px;
    padding-left: 8px;
    vertical-align: top;
    letter-spacing: .02em
}

.info-article table th a[href^=tel],
.info-article table td a[href^=tel] {
    pointer-events: none;
    text-decoration: none;
    color: inherit;
    font-weight: 400
}

.info-article table thead {
    border: 1px solid rgb(var(--stb-neutral-700))
}

.info-article table thead th,
.info-article table thead td {
    padding-top: 8px;
    vertical-align: middle;
    font-weight: 400;
    border-right: 1px solid rgb(var(--stb-neutral-700))
}

.info-article table tbody th,
.info-article table tbody td {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 1px solid rgb(var(--stb-neutral-700))
}

.info-article table th:first-child,
.info-article table td:first-child {
    color: var(--stb-text-primary);
    font-weight: 600;
    padding-left: 5px;
    background: var(--stb-bg-tertiary)
}

.info-article table thead tr:last-child th,
.info-article table thead tr:last-child td {
    padding-bottom: 8px
}

.info-article table tbody tr:last-child th,
.info-article table tbody tr:last-child td {
    padding-bottom: 12px
}

.info-article--rules section {
    counter-increment: sectionCounter
}

.info-article--about h2,
.info-article--about h3,
.info-article--about h4,
.info-article--about h5,
.info-article--about h6,
.info-article--contact-us h2,
.info-article--contact-us h3,
.info-article--contact-us h4,
.info-article--contact-us h5,
.info-article--contact-us h6,
.info-article--responsible-gaming h2,
.info-article--responsible-gaming h3,
.info-article--responsible-gaming h4,
.info-article--responsible-gaming h5,
.info-article--responsible-gaming h6,
.info-article--patron-protection h2,
.info-article--patron-protection h3,
.info-article--patron-protection h4,
.info-article--patron-protection h5,
.info-article--patron-protection h6,
.info-article--cookie-policy h2,
.info-article--cookie-policy h3,
.info-article--cookie-policy h4,
.info-article--cookie-policy h5,
.info-article--cookie-policy h6,
.info-article--complaints h2,
.info-article--complaints h3,
.info-article--complaints h4,
.info-article--complaints h5,
.info-article--complaints h6 {
    pointer-events: none
}

.info-article--about h2:after,
.info-article--about h3:after,
.info-article--about h4:after,
.info-article--about h5:after,
.info-article--about h6:after,
.info-article--contact-us h2:after,
.info-article--contact-us h3:after,
.info-article--contact-us h4:after,
.info-article--contact-us h5:after,
.info-article--contact-us h6:after,
.info-article--responsible-gaming h2:after,
.info-article--responsible-gaming h3:after,
.info-article--responsible-gaming h4:after,
.info-article--responsible-gaming h5:after,
.info-article--responsible-gaming h6:after,
.info-article--patron-protection h2:after,
.info-article--patron-protection h3:after,
.info-article--patron-protection h4:after,
.info-article--patron-protection h5:after,
.info-article--patron-protection h6:after,
.info-article--cookie-policy h2:after,
.info-article--cookie-policy h3:after,
.info-article--cookie-policy h4:after,
.info-article--cookie-policy h5:after,
.info-article--cookie-policy h6:after,
.info-article--complaints h2:after,
.info-article--complaints h3:after,
.info-article--complaints h4:after,
.info-article--complaints h5:after,
.info-article--complaints h6:after {
    display: none
}

@media (hover: hover) and (pointer: fine) {
    .info-article--about h2:hover,
    .info-article--about h3:hover,
    .info-article--about h4:hover,
    .info-article--about h5:hover,
    .info-article--about h6:hover,
    .info-article--contact-us h2:hover,
    .info-article--contact-us h3:hover,
    .info-article--contact-us h4:hover,
    .info-article--contact-us h5:hover,
    .info-article--contact-us h6:hover,
    .info-article--responsible-gaming h2:hover,
    .info-article--responsible-gaming h3:hover,
    .info-article--responsible-gaming h4:hover,
    .info-article--responsible-gaming h5:hover,
    .info-article--responsible-gaming h6:hover,
    .info-article--patron-protection h2:hover,
    .info-article--patron-protection h3:hover,
    .info-article--patron-protection h4:hover,
    .info-article--patron-protection h5:hover,
    .info-article--patron-protection h6:hover,
    .info-article--cookie-policy h2:hover,
    .info-article--cookie-policy h3:hover,
    .info-article--cookie-policy h4:hover,
    .info-article--cookie-policy h5:hover,
    .info-article--cookie-policy h6:hover,
    .info-article--complaints h2:hover,
    .info-article--complaints h3:hover,
    .info-article--complaints h4:hover,
    .info-article--complaints h5:hover,
    .info-article--complaints h6:hover {
        color: var(--stb-text-secondary)
    }
}

.info-article--about section>div>*:not(h2),
.info-article--contact-us section>div>*:not(h2),
.info-article--responsible-gaming section>div>*:not(h2),
.info-article--patron-protection section>div>*:not(h2),
.info-article--cookie-policy section>div>*:not(h2),
.info-article--complaints section>div>*:not(h2) {
    display: block
}

.info-article--rules {
    counter-reset: sectionCounter
}

.info-article--rules h2:before {
    content: counter(sectionCounter) ". "
}

html[dir=rtl] .info-article--rules h2 {
    grid-template-columns: auto 1fr
}

.info-article--responsible-gaming h1 {
    margin-bottom: 20px
}

@media screen and (min-width: 1280px) {
    .info-article--responsible-gaming h1 {
        margin-bottom: 28px
    }
}

.info-article section>div>*:not(h2):last-child {
    padding-bottom: 20px
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion h1 {
    margin-bottom: 20px
}

@media screen and (min-width: 1280px) {
    .info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion h1 {
        margin-bottom: 28px
    }
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion h2 {
    color: var(--stb-text-secondary)
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion section {
    border: none;
    background-color: var(--stb-bg-tertiary);
    box-shadow: 0 1px 1px rgb(var(--stb-white)/.26) inset;
    border-radius: 12px;
    padding: 0 16px;
    transition: background-color var(--stb-transition-time)
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion section.seo-accordion-active {
    background-color: var(--stb-bg-secondary)
}

@media (hover: hover) and (pointer: fine) {
    .info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion section:hover {
        background-color: var(--stb-bg-secondary)
    }
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion div+section {
    margin-top: 20px
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion section:not(:last-child) {
    margin-bottom: 12px
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h2,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h3,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h4,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h5,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h6 {
    color: var(--stb-text-primary)
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h2:after,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h3:after,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h4:after,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h5:after,
.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active h6:after {
    background-color: var(--stb-icon-400);
    mask: url(arrow-down.3d4a03f25e5faa4b.svg) no-repeat center center/100%;
    transform: rotate(180deg)
}

.info-article:not(.info-article--about, .info-article--responsible-gaming) .seo-accordion-active>div>*:not(h2) {
    display: block
}

.info-article ::-webkit-scrollbar,
.info-article ::-webkit-scrollbar-thumb,
.info-article ::-webkit-scrollbar-track {
    width: var(--stb-scrollbar-width);
    height: var(--stb-scrollbar-height);
    visibility: var(--stb-scrollbar-visibility)
}

.info-article ::-webkit-scrollbar-thumb {
    background: var(--stb-scrollbar-thumb-color);
    border-radius: var(--stb-scrollbar-border-radius)
}

.info-article ::-webkit-scrollbar-track {
    background: var(--stb-scrollbar-track-color);
    border-radius: var(--stb-scrollbar-border-radius)
}

.info-preloader-title {
    height: 34px;
    width: 100%;
    margin-bottom: 28px
}

.tab {
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    align-items: center;
    grid-column-gap: 12px;
    min-height: 44px;
    min-width: 44px;
    padding: 0 12px;
    color: var(--stb-text-secondary);
    font-size: 14px;
    line-height: 1.2;
    font-weight: 700;
    border-radius: 12px;
    box-shadow: 0 0 0 1px var(--stb-input-stroke) inset;
    transition: color var(--stb-transition-time), box-shadow var(--stb-transition-time);
    cursor: pointer;
    position: relative
}

.tab>* {
    position: relative
}

.tab:before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    background: var(--stb-gradient-400);
    box-shadow: 0 0 0 1px var(--stb-input-stroke-selected) inset;
    opacity: 0;
    transition: opacity var(--stb-transition-time)
}

@media (hover: hover) and (pointer: fine) {
    .tab:hover {
        color: rgb(var(--stb-text-primary));
        box-shadow: 0 0 0 1px var(--stb-input-stroke-hover) inset
    }
}

.tab:active,
.tab--active,
.tab--active:hover,
.tab-input:checked+.tab {
    color: var(--stb-text-contrast-secondary);
    background: var(--stb-gradient-400)
}

.tab:active:before,
.tab--active:before,
.tab--active:hover:before,
.tab-input:checked+.tab:before {
    opacity: 1
}

.filled-tab {
    position: relative;
    display: grid;
    grid-auto-flow: column;
    align-content: center;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    padding: 0 12px;
    background: rgb(var(--stb-neutral-750));
    border-radius: 12px;
    box-shadow: 0 1px 1px rgba(var(--stb-white)/.25) inset, 0 6px 8px rgba(var(--stb-black)/.12);
    font-size: 14px;
    line-height: 1.4;
    font-weight: 700;
    color: var(--stb-text-secondary);
    transition: color var(--stb-transition-time), background-color var(--stb-transition-time);
    cursor: pointer
}

.filled-tab:before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--stb-gradient-400);
    box-shadow: 0 0 0 1px var(--stb-input-stroke-selected) inset;
    opacity: 0;
    transition: opacity var(--stb-transition-time)
}

.filled-tab>* {
    position: relative
}

@media (hover: hover) and (pointer: fine) {
    .filled-tab:hover {
        color: var(--stb-text-primary);
        background-color: rgb(var(--stb-neutral-700))
    }
}

.filled-tab:active,
.filled-tab--active,
.filled-tab--active:hover,
.tab-input:checked+.filled-tab {
    color: var(--stb-text-primary)
}

.filled-tab:active:before,
.filled-tab--active:before,
.filled-tab--active:hover:before,
.tab-input:checked+.filled-tab:before {
    opacity: 1
}

:root {
    --stb-splide-pagination-page-border: 1px solid rgb(var(--stb-brand-700))
}

.splide__list {
    backface-visibility: initial
}

.splide__slide {
    position: static;
    contain: var(--stb-splide-slide-contain, content);
    width: var(--stb-splide-slide-width, 100%);
    min-width: var(--stb-splide-slide-min-width)
}

.splide__track {
    border-radius: var(--stb-splide-track-border-radius)
}

.splide>.splide__arrows .splide__arrow {
    left: auto;
    right: auto
}

.splide>.splide__arrows .splide__arrow--prev {
    inset-inline-start: 0
}

.splide>.splide__arrows .splide__arrow--next {
    inset-inline-end: 0
}

.splide__pagination {
    display: flex
}

.splide__pagination>*:only-child {
    display: none;
    position: var(--stb-splide-pagination-position, absolute);
    width: var(--stb-splide-pagination-width, auto);
    height: var(--stb-splide-pagination-height, auto);
    inset-inline-start: var(--stb-splide-pagination-inset-inline-start, auto);
    inset-block-start: var(--stb-splide-pagination-inset-block-start, auto);
    inset-block-end: var(--stb-splide-pagination-inset-block-end, auto)
}

.splide__pagination__page {
    display: flex;
    padding: var(--stb-splide-pagination-page-padding, 8px)
}

.splide__pagination__page:before {
    content: "";
    display: block;
    width: var(--stb-splide-pagination-page-width, 12px);
    height: var(--stb-splide-pagination-page-height, 12px);
    border: var(--stb-splide-pagination-page-border);
    border-radius: var(--stb-splide-pagination-page-border-radius, 50%);
    background-color: var(--stb-splide-pagination-page-background-color, transparent);
    transition: background-color var(--stb-transition-time)
}

.splide__pagination__page.is-active:before {
    width: var(--stb-splide-pagination-page-active-width, 12px);
    background-color: var(--stb-splide-pagination-page-active-background-color, rgb(var(--stb-brand-700)))
}

.splide__pagination--with-count {
    counter-reset: pagination-num
}

.splide__pagination__page--with-count {
    width: 20px;
    height: 20px;
    font-size: 12px
}

.splide__pagination__page--with-count:before {
    counter-increment: pagination-num;
    content: counter(pagination-num)
}

.status {
    display: inline-block;
    padding: 4px 6px;
    text-align: center;
    vertical-align: middle;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    text-transform: var(--stb-text-transform-style);
    color: var(--stb-text-secondary);
    text-shadow: 0 1px 2px rgba(0, 0, 0, .4);
    background-color: var(--stb-bg-tertiary);
    border-radius: 4px
}

.status--error,
.status--lost,
.status--cancelled,
.status--declined,
.status--expired {
    color: rgb(var(--stb-red-500))
}

.status--completed,
.status--win,
.status--credited,
.status--rollback,
.status--released {
    color: rgb(var(--stb-green-500))
}

.transaction-amount {
    color: var(--stb-text-primary);
    font-size: 16px;
    line-height: 1.25;
    font-weight: 600
}

.transaction-amount--top-up {
    display: inline-flex;
    align-items: center;
    color: rgb(var(--stb-green-500))
}

html[dir=rtl] .transaction-amount--top-up {
    flex-direction: row-reverse
}

.transaction-amount--top-up:before {
    content: "+"
}

.games-section {
    display: block;
    margin-bottom: 32px
}

@media screen and (min-width: 1280px) {
    .games-section {
        margin-bottom: 36px
    }
}

@media screen and (min-width: 1920px) {
    .games-section {
        margin-bottom: 40px
    }
}

.games-title {
    display: block;
    margin-bottom: 12px
}

@media screen and (min-width: 1280px) {
    .games-title {
        margin-bottom: 16px
    }
}

.legal-wrapper {
    display: grid;
    row-gap: var(--stb-legal-wrapper-row-gap)
}

.legal {
    display: grid;
    row-gap: 20px
}

.licenses-list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--stb-licenses-list-gap)
}

.licenses-list__link {
    display: flex;
    cursor: pointer
}

.licenses-list:empty,
.legal:has(>.licenses-list:empty) {
    display: none
}

.legal-paragraphs {
    display: grid;
    gap: var(--stb-legal-paragraphs-gap);
    color: var(--stb-text-tertiary);
    line-height: 1.4;
    font-size: 12px
}

.legal-paragraphs--centered {
    place-content: center;
    text-align: center
}

.legal-paragraphs--gap-8 {
    gap: 8px
}

.legal-paragraphs__copyright,
html[dir=rtl] .legal-paragraphs {
    direction: ltr
}

.nav-control {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--stb-nav-control-size);
    height: var(--stb-nav-control-size);
    background-color: transparent;
    border-radius: 12px;
    color: var(--stb-text-secondary);
    transition-property: color, background-color, box-shadow;
    transition-duration: var(--stb-transition-time);
    transform: translateZ(0);
    will-change: transform;
    contain: layout paint
}

@media screen and (min-width: 768px) {
    .nav-control {
        --stb-nav-control-size: 38px;
        margin-inline-end: 16px
    }
}

@media screen and (min-width: 768px) and (hover: hover) and (pointer: fine) {
    .nav-control:hover {
        background-color: var(--stb-button-tertiary-hover);
        box-shadow: 0 0 0 1px rgba(var(--stb-white)/.16) inset;
        color: var(--stb-text-primary)
    }
}

@media screen and (min-width: 768px) {
    .nav-control:active {
        background-color: var(--stb-button-tertiary-active);
        box-shadow: 0 1px 1px rgba(var(--stb-black)/.3) inset;
        color: var(--stb-text-primary)
    }
}

@media screen and (min-width: 1280px) {
    .nav-control {
        --stb-nav-control-size: 48px;
        margin-inline-end: 30px
    }
}

.preloader__img {
    width: 80px;
    height: 80px;
    background: url(sprite-vertical.2d84454c14e24310.png) no-repeat center 0/80px auto;
    animation: sprite 1.5s steps(32) infinite
}

@keyframes sprite {
    0% {
        background-position-y: 0
    }
    20% {
        background-position-y: 0
    }
    to {
        background-position-y: 100%
    }
}

.animation-rotation {
    animation: animation-rotation var(--stb-animation-rotation-time) linear infinite
}

@keyframes animation-rotation {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(360deg)
    }
}

@keyframes slide-in-from-bottom {
    0% {
        transform: translateY(100%);
        opacity: 0
    }
}

@keyframes toggle {
    0% {
        transform: translate(0)
    }
    to {
        transform: translate(3px)
    }
}

.switcher {
    --stb-switcher-bg: var(--stb-button-secondary);
    --stb-switcher: var(--stb-bg-primary);
    --stb-switcher-bg-active: var(--stb-button-primary);
    --stb-switcher-active: var(--stb-bg-primary);
    display: flex;
    justify-content: center;
    min-width: 52px;
    width: 52px;
    min-height: 28px;
    padding: 2px;
    background-color: var(--stb-switcher-bg);
    border-radius: 24px;
    transition: background-color var(--stb-transition-time)
}

.switcher:before {
    width: 24px;
    height: 24px;
    background-color: var(--stb-switcher);
    border-radius: 50%;
    box-shadow: 0 1px 1px rgba(var(--stb-white)/.3) inset;
    transition: background-color var(--stb-transition-time), transform var(--stb-transition-time) linear;
    transform: translate(-50%);
    content: ""
}

.switcher--invert {
    --stb-switcher-bg: rgb(var(--stb-green-800));
    --stb-switcher: rgb(var(--stb-white));
    --stb-switcher-bg-active: rgb(var(--stb-green-900));
    --stb-switcher-active: var(--stb-functional-done)
}

.switcher--active {
    background-color: var(--stb-switcher-bg-active)
}

.switcher--active:before {
    background-color: var(--stb-switcher-active);
    transform: translate(50%);
    transition: transform var(--stb-transition-time) linear;
    animation: none
}

@media (hover: hover) and (pointer: fine) {
    .switcher-container:hover:not(:disabled, .switcher-container--no-motion) .switcher:not(.switcher--active):before {
        transform: translate(0);
        animation: var(--stb-transition-time) linear var(--stb-transition-time) alternate infinite toggle
    }
}

.labeled-switcher {
    --stb-labeled-switcher-size: 30px;
    min-width: 100px;
    height: 32px;
    background-color: var(--stb-labeled-switcher-bg, var(--stb-button-secondary));
    border-radius: 24px;
    transition: background-color var(--stb-transition-time);
    display: grid;
    align-items: center;
    cursor: pointer;
    padding: 1px
}

.labeled-switcher__text {
    font-size: 12px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--stb-text-contrast-secondary);
    text-transform: var(--stb-text-transform-style);
    transition: opacity var(--stb-transition-time);
    opacity: var(--stb-labeled-switcher-text-opacity, 1);
    grid-area: 1/1/-1/-1;
    display: grid;
    justify-content: start;
    grid-auto-flow: column;
    gap: 8px;
    align-items: center;
    padding-inline-end: 10px
}

.labeled-switcher__text:before {
    content: "";
    width: var(--stb-labeled-switcher-size)
}

.labeled-switcher__slider {
    transition: translate var(--stb-transition-time);
    translate: var(--stb-labeled-switcher-translate);
    display: flex;
    grid-area: 1/1/-1/-1
}

.labeled-switcher__slider:after {
    width: var(--stb-labeled-switcher-size);
    aspect-ratio: 1;
    background-color: var(--stb-bg-primary);
    border-radius: 50%;
    content: ""
}

.labeled-switcher--active {
    --stb-labeled-switcher-bg: var(--stb-button-primary);
    --stb-labeled-switcher-translate: calc(100% - var(--stb-labeled-switcher-size));
    --stb-labeled-switcher-text-opacity: 0
}

html[dir=rtl] .labeled-switcher--active {
    --stb-labeled-switcher-translate: calc(-1 * 100% + var(--stb-labeled-switcher-size))
}

.grecaptcha-badge {
    visibility: hidden;
    scale: 0;
    opacity: 0;
    pointer-events: none
}

.spinner-loader {
    --stb-spinner-loader-border-radius: 20px;
    position: relative
}

.spinner-loader:before {
    position: absolute;
    inset: var(--stb-spinner-loader-dialog-inset);
    z-index: 1;
    background-color: var(--stb-bg-primary);
    opacity: .8;
    border-radius: var(--stb-spinner-loader-border-radius);
    content: ""
}

.spinner-loader:after {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 24px;
    height: 24px;
    margin-top: -12px;
    margin-left: -12px;
    mask-image: url(loading.fa9526f76f5ea7e2.svg);
    background-color: rgb(var(--stb-yellow-500));
    animation: animation-rotation var(--stb-animation-rotation-time) linear infinite;
    content: ""
}

@supports (-moz-appearance: none) {
    .spinner-loader:after {
        mask: none;
        background: url(loading.fa9526f76f5ea7e2.svg) no-repeat center/100%;
        filter: var(--stb-brand-500-filter)
    }
}

iframe#launcher {
    display: var(--stb-zendesk-chat-launcher-display)
}

.sym-overflow-hidden {
    overflow: hidden
}

.sym-popup-subject {
    display: none
}

.sym-popup-body {
    max-height: 90vh;
    overflow-x: auto
}

.sym-modal-window {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--stb-transition-time);
    overflow: hidden
}

.sym-modal-window.sym-active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto
}

.sym-popup {
    width: calc(100% - 40px) !important;
    max-width: 400px !important;
    border-radius: 12px;
    border: 1px solid var(--stb-bg-tertiary);
    background-color: var(--stb-bg-primary);
    visibility: hidden;
    position: fixed;
    z-index: 800;
    opacity: 0;
    overflow: hidden;
    transition: opacity var(--stb-transition-time) linear
}

.sym-popup.sym-active {
    visibility: visible;
    opacity: 1
}

.sym-popup .sym-message {
    font-family: inherit;
    font-size: 14px;
    line-height: initial;
    color: var(--stb-text-primary)
}

.sym-popup .sym-heading {
    color: var(--stb-text-primary);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
    font-weight: 700
}

.sym-popup .sym-text {
    color: var(--stb-text-primary);
    line-height: 1.4;
    font-weight: 500
}

.sym-popup .sym-img {
    object-fit: cover;
    max-height: 200px;
    vertical-align: top;
    width: 100%
}

.sym-popup .sym-p-container {
    padding: 4px 16px 0
}

.sym-popup .sym-p-container:first-child {
    padding-top: 16px;
    padding-inline-end: 30px
}

.sym-popup .sym-p-container:last-child {
    padding-bottom: 16px
}

.sym-popup .sym-a-container {
    padding: 16px
}

.sym-popup .sym-a-container:first-child {
    padding-inline-end: 30px
}

.sym-popup .sym-a-container .sym-link {
    font-size: 14px;
    font-family: inherit;
    font-weight: 500;
    line-height: 1.4;
    color: var(--stb-link-primary);
    text-decoration: underline;
    transition: color var(--stb-transition-time);
    cursor: pointer
}

@media (hover: hover) and (pointer: fine) {
    .sym-popup .sym-a-container .sym-link:hover {
        color: var(--stb-link-secondary)
    }
}

.sym-popup .sym-a-container .sym-link:active {
    color: var(--stb-link-accent)
}

.sym-popup .sym-video-container+.sym-p-container {
    padding: 0 16px
}

.sym-popup .sym-video-container+.sym-a-container {
    padding-top: 0
}

.sym-popup .sym-video-container .sym-video-wrapper {
    padding-bottom: 54%
}

.sym-popup .sym-img-container {
    pointer-events: none
}

.sym-popup .sym-img-container+.sym-p-container {
    padding-top: 16px;
    padding-bottom: 0;
    padding-inline-start: 16px;
    padding-inline-end: 30px
}

.sym-popup .sym-img-container+.sym-p-container:last-child {
    padding-top: 16px;
    padding-bottom: 16px
}

.sym-popup .sym-img-container+.sym-a-container:last-child {
    padding-top: 16px;
    padding-inline-end: 30px
}

.sym-top {
    inset-block-start: calc(var(--stb-header-height) + 20px)
}

.sym-right {
    inset-inline-end: 20px;
    margin-inline-start: 20px
}

.sym-close {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    inset-inline-end: 12px;
    inset-block-start: 12px;
    z-index: 2
}

.sym-close:after,
.sym-close:before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    height: 14px;
    width: 2px;
    background-color: var(--stb-text-primary)
}

.sym-close:before {
    transform: translate(-50%, -50%) rotate(45deg)
}

.sym-close:after {
    transform: translate(-50%, -50%) rotate(-45deg)
}

.sym-close:hover:after,
.sym-close:hover:before {
    background-color: var(--stb-text-secondary)
}

.skeleton {
    position: relative;
    color: transparent;
    background-color: var(--stb-bg-secondary);
    overflow: hidden;
    border: none;
    cursor: default;
    pointer-events: none;
    transform: translateZ(0)
}

.skeleton:after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: linear-gradient(90deg, #d6d2f900, #d6d2f933, #d6d2f900);
    transform: translate(-100%);
    animation: shimmer 2s infinite
}

.skeleton--height-12 {
    height: 12px
}

.skeleton--height-24 {
    height: 24px
}

.skeleton--height-35 {
    height: 35px
}

.skeleton--height-40 {
    height: 40px
}

.skeleton--height-60 {
    height: 60px
}

.skeleton--height-170 {
    height: 170px
}

.skeleton--height-256 {
    height: 256px
}

.skeleton--height-300 {
    height: 300px
}

.skeleton--rounded-8 {
    border-radius: 8px
}

.skeleton--rounded-12 {
    border-radius: 12px
}

.skeleton--rounded-14 {
    border-radius: 14px
}

.skeleton-text {
    display: grid;
    gap: 4px
}

@keyframes shimmer {
    to {
        transform: translate(100%)
    }
}

.bg-secondary {
    background-color: var(--stb-bg-secondary)
}

.bg-tertiary {
    background-color: var(--stb-bg-tertiary)
}

.bg-fourth {
    background-color: var(--stb-bg-fourth)
}

.bg-contrast-tertiary {
    background-color: var(--stb-bg-contrast-tertiary)
}

.text-8 {
    font-size: 8px
}

.text-10 {
    font-size: 10px
}

.text-12 {
    font-size: 12px
}

.text-14 {
    font-size: 14px
}

.text-16 {
    font-size: 16px
}

.text-18 {
    font-size: 18px
}

.text-20 {
    font-size: 20px
}

.text-24 {
    font-size: 24px
}

.text-28 {
    font-size: 28px
}

.text-32 {
    font-size: 32px
}

.text-36 {
    font-size: 36px
}

.text-12-14 {
    font-size: 12px
}

@media screen and (min-width: 1280px) {
    .text-12-14 {
        font-size: 14px
    }
}

.text-14-16 {
    font-size: 14px
}

@media screen and (min-width: 1280px) {
    .text-14-16 {
        font-size: 16px
    }
}

.text-16-20 {
    font-size: 16px
}

@media screen and (min-width: 1280px) {
    .text-16-20 {
        font-size: 20px
    }
}

.text-20-24 {
    font-size: 20px
}

@media screen and (min-width: 1280px) {
    .text-20-24 {
        font-size: 24px
    }
}

.text-20-24-28 {
    font-size: 20px
}

@media screen and (min-width: 1280px) {
    .text-20-24-28 {
        font-size: 24px
    }
}

@media screen and (min-width: 1920px) {
    .text-20-24-28 {
        font-size: 28px
    }
}

.leading-110 {
    line-height: 1.1
}

.leading-120 {
    line-height: 1.2
}

.leading-125 {
    line-height: 1.25
}

.leading-140 {
    line-height: 1.4
}

.leading-160 {
    line-height: 1.6
}

.text-400 {
    font-weight: 400
}

.text-500 {
    font-weight: 500
}

.text-600 {
    font-weight: 600
}

.text-700 {
    font-weight: 700
}

.text-800 {
    font-weight: 800
}

.text-900 {
    font-weight: 900
}

.letter-spacing-wide {
    letter-spacing: .03em
}

.letter-spacing-normal {
    letter-spacing: .02em
}

.text-primary {
    color: var(--stb-text-primary)
}

.text-secondary {
    color: var(--stb-text-secondary)
}

.text-tertiary {
    color: var(--stb-text-tertiary)
}

.text-contrast-primary {
    color: var(--stb-text-contrast-primary)
}

.text-contrast-secondary {
    color: var(--stb-text-contrast-secondary)
}

.text-contrast-accent {
    color: var(--stb-text-accent)
}

.text-disable,
.text-violet-150 {
    color: rgb(var(--stb-neutral-200))
}

.text-black {
    color: rgb(var(--stb-black))
}

.text-accent {
    color: rgb(var(--stb-yellow-500))
}

.text-center {
    text-align: center
}

.text-end {
    text-align: end
}

.text-uppercase {
    text-transform: var(--stb-text-transform-style)
}

.text-lowercase {
    text-transform: lowercase
}

.text-capitalize {
    text-transform: capitalize
}

.text-underline {
    text-decoration: underline
}

.text-italic {
    font-style: italic
}

.text-ellipsis {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.text-hyphens {
    word-break: break-word;
    -webkit-hyphens: auto;
    hyphens: auto
}

.whitespace-pre {
    white-space: pre
}

.break-all {
    word-break: break-all
}

.tabular-nums {
    font-variant-numeric: tabular-nums
}

.expanded-click-area {
    padding-top: 8px;
    padding-bottom: 8px
}

.min-w-max {
    min-width: max-content
}

.p-0 {
    padding: 0
}

.mb-20 {
    margin-bottom: 20px
}

.overflow-hidden {
    overflow: hidden
}

.events-none {
    pointer-events: none
}

.relative {
    position: relative
}

.inline {
    display: inline
}

.inline-block {
    display: inline-block
}

.display-none {
    display: none
}

.reset-icon-scale {
    --stb-icon-sprite-svg-scale: none
}

.divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(270deg, transparent 0%, rgba(var(--stb-white)/.3) 50%, transparent 100%)
}

.empty-state {
    background-color: var(--stb-bg-tertiary);
    border-radius: 16px;
    border: 1px solid rgb(var(--stb-white)/.16);
    padding: 20px;
    color: rgb(var(--stb-neutral-100))
}

.justify-self-center {
    justify-self: center
}

:host {
    --stb-support-chat-launcher-display: none
}