.nav-menu {
    list-style: none;
    padding: 0;
    display: flex;
    align-items: center
}

.nav-menu-item {
    margin: 0 10px
}

.nav-menu-image {
    width: 200px;
    height: auto;
    max-height: 100px;
    display: block;
    position: relative;
    top: -5px
}

.account-level[data-v-dad8cd52] {
    display: flex;
    gap: .4rem;
    width: auto;
    flex-direction: column
}

.account-level-header[data-v-dad8cd52] {
    display: flex;
    justify-content: space-between;
    font-size: .9rem;
    color: #fff;
    opacity: .9
}

.account-level-current[data-v-dad8cd52] {
    font-weight: 600
}

.account-level-next[data-v-dad8cd52] {
    font-size: .8rem;
    opacity: .6
}

.account-level-bar[data-v-dad8cd52] {
    flex: none;
    height: .4rem;
    background: #2a2d3a;
    border-radius: 1rem;
    overflow: hidden
}

.account-level-bar-fill[data-v-dad8cd52] {
    height: 100%;
    background: linear-gradient(90deg, #ffd800, #ff6c00);
    transition: width .3s ease
}

.account-level-percent[data-v-dad8cd52] {
    font-size: .8rem;
    color: #ffd800;
    text-align: center;
    min-width: 2.5rem
}

@media screen and (min-width:999px) {
    .account-level[data-v-dad8cd52] {
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: .4rem
    }

    .account-level-header[data-v-dad8cd52] {
        font-size: 1.2rem;
        width: 100%
    }

    .account-level-bar[data-v-dad8cd52] {
        width: 100%;
        height: .6rem
    }

    .account-level-percent[data-v-dad8cd52] {
        font-size: 1.1rem;
        width: 100%
    }
}

.dialog-login[data-v-5785f431] {
    padding: 2rem 3rem;
    font-size: 1rem
}

.auth-tabs[data-v-5785f431] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--dialog-line-color, #2a2f3a)
}

.auth-tab[data-v-5785f431] {
    background: none;
    border: none;
    padding: .5rem 0;
    font-size: clamp(1rem, 2.2vw, 1.5rem);
    font-weight: var(--base-font-weight, 400);
    text-transform: uppercase;
    color: #adadad;
    cursor: pointer;
    transition: all .2s;
    position: relative
}

.auth-tab.active[data-v-5785f431] {
    color: #fff
}

.auth-tab.active[data-v-5785f431]:after {
    content: "";
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background: #999;
    box-shadow: 0 0 4px #999
}

.auth-tab[data-v-5785f431]:hover:not(.active) {
    color: #ccc
}

.credentials-field[data-v-5785f431] {
    margin-bottom: 1.5rem
}

.credentials-input[data-v-5785f431] {
    width: 100%;
    padding: clamp(.8rem, 2vw, 1.2rem) clamp(1rem, 3vw, 1.5rem);
    background: #0f1319;
    border: 1px solid #2a2f3a;
    color: #fff;
    font-size: clamp(1rem, 1.9vw, 1.2rem);
    transition: all .2s
}

.credentials-input[data-v-5785f431]:focus {
    outline: none;
    border-color: #999;
    box-shadow: 0 0 .5rem hsla(0, 0%, 60%, .3)
}

.credentials-input[data-v-5785f431]::-moz-placeholder {
    color: #5a5f6a;
    text-transform: uppercase;
    font-size: clamp(.85rem, 1.6vw, 1rem)
}

.credentials-input[data-v-5785f431]:-ms-input-placeholder {
    color: #5a5f6a;
    text-transform: uppercase;
    font-size: clamp(.85rem, 1.6vw, 1rem)
}

.credentials-input[data-v-5785f431]::placeholder {
    color: #5a5f6a;
    text-transform: uppercase;
    font-size: clamp(.85rem, 1.6vw, 1rem)
}

.credentials-button[data-v-5785f431] {
    width: 100%;
    padding: clamp(1rem, 2vw, 1.5rem) 0;
    background: #0f1319;
    border: 1px solid #2a2f3a;
    color: #999;
    font-size: clamp(1rem, 2.2vw, 1.4rem);
    font-weight: var(--base-font-weight);
    text-transform: uppercase;
    cursor: pointer;
    transition: all .2s;
    margin-top: .5rem;
    position: relative
}

.credentials-button[data-v-5785f431]:not(:disabled):hover {
    background: #1a1f2a;
    border-color: #999;
    color: #fff;
    box-shadow: 0 0 1rem hsla(0, 0%, 60%, .2)
}

.credentials-button[data-v-5785f431]:disabled {
    opacity: .5;
    cursor: not-allowed
}

.spinner[data-v-5785f431] {
    display: inline-block;
    width: clamp(1.2rem, 4vw, 2rem);
    height: clamp(1.2rem, 4vw, 2rem);
    border: .15rem solid #2a2f3a;
    border-top-color: #999;
    border-radius: 50%;
    -webkit-animation: spin-data-v-5785f431 .8s linear infinite;
    animation: spin-data-v-5785f431 .8s linear infinite
}

@-webkit-keyframes spin-data-v-5785f431 {
    to {
        transform: rotate(1turn)
    }
}

@keyframes spin-data-v-5785f431 {
    to {
        transform: rotate(1turn)
    }
}

.credentials-error[data-v-5785f431] {
    background: rgba(255, 70, 70, .15);
    border-left: .2rem solid #ff4646;
    padding: .5rem 1rem;
    margin-bottom: 1rem;
    font-size: clamp(.85rem, 1.7vw, 1rem);
    color: #faa
}

.auth-divider[data-v-5785f431] {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 1.5rem 0 1rem;
    gap: 1rem
}

.divider-line[data-v-5785f431] {
    flex: 1;
    height: 2px;
    background: var(--dialog-line-color, #2a2f3a)
}

.divider-text[data-v-5785f431] {
    color: #adadad;
    font-size: clamp(.85rem, 1.9vw, 1rem);
    text-transform: uppercase;
    letter-spacing: .1em
}

.social-heading[data-v-5785f431] {
    display: flex;
    justify-content: center;
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: #adadad;
    text-transform: none
}

.dialog-login-hexagons[data-v-5785f431] {
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 1rem 0
}

.dialog-login-hexagon-link[data-v-5785f431] {
    width: clamp(80px, 26.52vw, 120px);
    height: clamp(80px, 26.52vw, 120px)
}

.dialog-login-hexagon-icon[data-v-5785f431] {
    width: clamp(40px, 12.92vw, 60px);
    height: clamp(40px, 12.92vw, 60px);
    fill: #999;
    filter: drop-shadow(0 0 .5rem #000);
    transition: fill .2s
}

.dialog-login-hexagon-link.enabled:hover .google-icon[data-v-5785f431],
.dialog-login-hexagon-link.enabled:hover .steam-icon[data-v-5785f431] {
    fill: #fff
}

@media screen and (min-width:768px) {
    .dialog-login[data-v-5785f431] {
        min-width: 400px;
        padding: 2rem 2.5rem;
        font-size: 1rem
    }
}

@media screen and (max-width:540px) {
    .auth-tab[data-v-5785f431] {
        font-size: 4vw
    }

    .credentials-input[data-v-5785f431] {
        font-size: 3.5vw;
        padding: 2vw 3vw
    }

    .credentials-button[data-v-5785f431] {
        font-size: 4vw;
        padding: 2.5vw 0
    }

    .divider-text[data-v-5785f431] {
        font-size: 3vw
    }
}

.sw-modal-overlay[data-v-87a0342c] {
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.sw-dialog[data-v-87a0342c] {
    background-color: #1f1f2a;
    border-radius: 12px;
    max-width: 32rem;
    width: 90%;
    padding: 2rem;
    text-align: center;
    box-shadow: 0 0 20px rgba(0, 0, 0, .5);
    color: #fff;
    font-family: Argentum, sans-serif
}

.sw-dialog-heading[data-v-87a0342c] {
    font-size: 1.8rem;
    margin-bottom: 1rem;
    font-weight: 600
}

.sw-dialog-text[data-v-87a0342c] {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    line-height: 1.4;
    color: #dcdce0
}

.sw-dialog-text-highlight[data-v-87a0342c] {
    font-weight: 700;
    color: #ffac0c
}

.sw-dialog-buttons[data-v-87a0342c] {
    display: flex;
    justify-content: space-around;
    gap: 1rem
}

.sw-dialog-button[data-v-87a0342c] {
    flex: 1;
    padding: .8rem 1.2rem;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    border: none;
    transition: all .2s ease
}

.sw-dialog-confirm[data-v-87a0342c] {
    background: linear-gradient(90deg, #ff3b00, #ff6a33);
    color: #fff;
    box-shadow: 0 0 10px rgba(255, 59, 0, .5)
}

.sw-dialog-confirm[data-v-87a0342c]:hover {
    background: linear-gradient(90deg, #ff5722, #ff7b4b);
    box-shadow: 0 0 15px rgba(255, 87, 34, .6)
}

.sw-dialog-cancel[data-v-87a0342c] {
    background: #444452;
    color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .4)
}

.sw-dialog-cancel[data-v-87a0342c]:hover {
    background: #5a5a68;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5)
}

@media (max-width:480px) {
    .sw-dialog[data-v-87a0342c] {
        padding: 1.5rem
    }

    .sw-dialog-heading[data-v-87a0342c] {
        font-size: 1.5rem
    }

    .sw-dialog-text[data-v-87a0342c] {
        font-size: 1rem
    }

    .sw-dialog-button[data-v-87a0342c] {
        font-size: .95rem;
        padding: .6rem 1rem
    }
}

.dialog-deposit-system-button[data-v-0c0eb0aa] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #888;
    padding: 6px;
    transition: color .2s
}

.dialog-deposit-system-button.active[data-v-0c0eb0aa] {
    color: #fff
}

.dialog-deposit-system-icon[data-v-0c0eb0aa] {
    width: 36px;
    height: 36px;
    margin-bottom: 4px
}

.dialog-deposit-system-label[data-v-0c0eb0aa] {
    font-size: 11px;
    margin-top: 2px;
    line-height: 1;
    white-space: nowrap
}

.min-deposit-hint[data-v-0c0eb0aa] {
    font-size: 12px;
    color: #aaa;
    margin-top: 4px
}

.error-hint[data-v-0c0eb0aa] {
    font-size: 12px;
    color: #ff5e5e;
    margin-top: 4px
}

.dialog-withdrawal-system-button[data-v-27b34db2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    font-size: 12px;
    color: #888;
    padding: 6px;
    transition: color .2s
}

.dialog-withdrawal-system-button.active[data-v-27b34db2] {
    color: #fff
}

.dialog-withdrawal-system-icon[data-v-27b34db2] {
    width: 36px;
    height: 36px;
    margin-bottom: 4px
}

.dialog-withdrawal-system-label[data-v-27b34db2] {
    font-size: 11px;
    margin-top: 2px;
    line-height: 1;
    white-space: nowrap
}

.dialog-deposit-buttons[data-v-4def8bad] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .8rem;
    justify-items: stretch
}

.dialog-deposit-buttons Button[data-v-4def8bad] {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 4.5rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
    font-size: 1.2rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    background: #c89203;
    color: #fff;
    border-radius: var(--radius);
    cursor: pointer
}

.dialog-deposit-buttons Button.active[data-v-4def8bad] {
    border: .2rem solid #fff
}

.dialog-deposit-buttons Button>[data-v-4def8bad] {
    margin: 0 !important;
    padding: 0 !important
}

.free-skin-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.item-card.unavailable[data-v-a69244ca] {
    opacity: .5;
    pointer-events: none
}

.jackpot-bet-item-image[data-v-cfad5268] {
    opacity: 0;
    transition: opacity .3s ease-in-out
}

.jackpot-bet-item-image.is-loaded[data-v-cfad5268] {
    opacity: 1
}

.bet-list-move[data-v-0f87456e] {
    transition: transform .6s cubic-bezier(.55, 0, .1, 1)
}

.bet-list-enter-active[data-v-0f87456e] {
    transition: all .5s ease
}

.bet-list-enter[data-v-0f87456e] {
    opacity: 0;
    transform: translateX(-20px)
}

#app {
    --emblem-color: #6b707f;
    --label-color: #6b707f;
    --table-heading-color: #525765;
    --dialog-content-heading-color: #6b707f;
    --dialog-content-color: #6b707f;
    --dialog-content-footnote-color: #525765;
    --dialog-content-highlight-color: #c89304;
    --dialog-line-color: #262834;
    --dialog-box-background: #262834;
    --indicator-name-color: #525765;
    --indicator-value-color: #fff;
    --box-heading-color: #9d7d5b;
    --link-inactive-color: #777575;
    --link-hover-color: #fff;
    --icon-inactive-fill: #777575;
    --icon-hover-fill: #ffb024;
    --radio-button-color: #605e5e;
    --radio-button-hover-color: #777575;
    --radio-button-checked-color: #ffb024;
    --radio-button-disabled-color: #2d2f3c;
    --button-default-color: #fff;
    --button-disabled-color: #6b707f;
    --button-default-background: #ffb024;
    --button-disabled-background: #2d2f3c;
    --default-user-icon-fill: hsla(0, 0%, 100%, 0.5);
    --default-user-icon-background: #247;
    --app-text-color: #fff;
    --app-background: #13151d;
    --panel-background: #181c24;
    --box-background: #1f212d;
    --modal-background-0: #1d2029;
    --modal-background: rgba(29, 32, 41, 0.75);
    --bar-icon-hover-fill: url(#sky-gradient) #65a2b9;
    --roulette-bg: #1a1d26;
    --roulette-black: #393c46;
    --roulette-green: #539977;
    --roulette-red: #d43636;
    --roulette-yellow: #ffa800;
    --roulette-stats-bg: #1d2028;
    --roulette-last-bg: #1e212a;
    --roulette-players-info-player-bg: #1e212a;
    font-family: Montserrat, sans-serif;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    color: var(--app-text-color);
    background: var(--app-background)
}

@supports (not ((-webkit-backdrop-filter:none) or (backdrop-filter:none))) and (not (-webkit-backdrop-filter:none)) {
    .-show-modal>.app-container {
        filter: brightness(.9) blur(.75rem)
    }
}

.long-line {
    position: relative;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.long-line:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    display: block;
    width: 2rem;
    height: 100%
}

.with-desktop-scroll,
.with-mobile-scroll,
.with-scroll {
    height: 100%;
    scrollbar-width: var(--scroll-bar-alternative-width);
    scrollbar-color: var(--scroll-bar-slider-background) var(--scroll-bar-background)
}

.with-desktop-scroll::-webkit-scrollbar,
.with-mobile-scroll::-webkit-scrollbar,
.with-scroll::-webkit-scrollbar {
    width: var(--scroll-bar-width);
    border-radius: var(--radius);
    background: var(--scroll-bar-background)
}

.with-desktop-scroll::-webkit-scrollbar-thumb,
.with-mobile-scroll::-webkit-scrollbar-thumb,
.with-scroll::-webkit-scrollbar-thumb {
    border-radius: var(--radius);
    background: var(--scroll-bar-slider-background)
}

.with-mobile-scroll,
.with-scroll {
    overflow-y: auto;
    overflow-x: hidden
}

.with-desktop-scroll {
    overflow-y: initial;
    overflow-x: initial
}

.wrapper {
    display: grid;
    grid-template-areas: "mode";
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
    height: calc(var(--app-height, 100vh) - var(--header-height));
    padding-top: var(--header-height);
    padding-right: var(--scroll-bar-fix-padding-right);
    box-sizing: content-box
}

.header-account,
.header-logo,
.wrapper {
    filter: none;
    transition: filter var(--nav-slide-transition)
}

.-blurry {
    filter: blur(5px)
}

@media screen and (min-width:992px) {
    .with-mobile-scroll {
        overflow-y: initial;
        overflow-x: initial
    }

    .with-desktop-scroll {
        overflow-y: auto;
        overflow-x: hidden
    }

    .wrapper {
        grid-template-areas: "mode-bar main" "tool-bar main";
        grid-template-columns: var(--side-bar-width) 1fr;
        grid-template-rows: repeat(auto, 1fr)
    }

    .-show-main-nav .header-account,
    .-show-main-nav .header-logo,
    .-show-main-nav .wrapper {
        filter: none
    }

    .show-chat-button {
        position: absolute;
        top: var(--header-height);
        right: 0;
        border-radius: var(--radius) 0 0 var(--radius);
        background: #390
    }

    .-show-desktop-chat .show-chat-button {
        display: none
    }

    .show-chat-icon {
        fill: #9f3
    }

    main {
        grid-area: main;
        width: calc(100vw - var(--side-bar-width) + var(--chat-width));
        transition: width .5s ease-out
    }

    .-show-desktop-chat main {
        width: calc(100vw - var(--side-bar-width))
    }
}

.content,
.mode {
    padding-bottom: var(--mode-bar-height)
}

.content {
    grid-area: content
}

.crash-history-content {
    display: grid;
    grid-template-areas: "crash-history-summary" "crash-bets";
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    grid-row-gap: 0
}

.crash-mode {
    grid-area: mode;
    display: grid;
    grid-template-areas: "crash-game" "crash-summary" "crash-betting-board" "inventory" "cashback" "crash-bets" "giveaway";
    grid-template-rows: auto var(--crash-summary-wrapper-height) var(--crash-betting-wrapper-height) auto var(--cashback-wrapper-height) auto auto;
    grid-column-gap: var(--outer-gap)
}

.jackpot-mode {
    grid-area: mode;
    display: grid;
    grid-template-areas: "jackpot-timer" "jackpot-betting-board" "jackpot-spinner" "jackpot-items-board" "inventory" "cashback" "jackpot-bets" "giveaway";
    grid-column-gap: var(--outer-gap)
}

.wheel-mode {
    grid-area: mode;
    display: grid;
    grid-template-areas: "roulette" "last" "stats" "cashback" "players" "inventory" "giveaway";
    grid-template-columns: 1fr;
    grid-template-rows: 400px auto auto 1fr;
    grid-column-gap: 0;
    grid-row-gap: 0
}

.provably-fair-content,
.support-content,
.ticket-messages-content,
.user-agreement-content {
    --support-headeing-height: 5rem;
    --support-headeing-wrapper-height: var(--support-headeing-height)
}

.support-content {
    display: grid;
    grid-template-areas: "support-heading" "support-faq" "support-tickets";
    grid-template-columns: 1fr;
    grid-template-rows: var(--support-headeing-wrapper-height) 1fr auto
}

.support-heading-wrapper {
    grid-area: support-heading
}

.provably-fair-heading-wrapper,
.support-heading-wrapper,
.ticket-messages-heading-wrapper,
.user-agreement-heading-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 var(--outer-gap)
}

.provably-fair-heading,
.support-heading,
.ticket-messages-heading,
.user-agreement-heading {
    display: flex;
    align-items: center;
    height: var(--support-headeing-height);
    font-size: 2rem;
    font-weight: var(--base-font-weight);
    text-transform: uppercase
}

.support-user-agreement-link {
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: right;
    color: var(--link-inactive-color)
}

.support-user-agreement-link:active,
.support-user-agreement-link:focus {
    color: var(--link-hover-color)
}

.ticket-messages-content {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--support-headeing-wrapper-height) 1fr auto
}

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

::-webkit-scrollbar {
    width: var(--scroll-bar-size);
    height: var(--scroll-bar-size);
    background: transparent;
    cursor: pointer
}

::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-thumb-background-color);
    border-radius: var(--scroll-bar-size);
    border-color: transparent;
    border-style: solid;
    border-width: calc(var(--scroll-bar-size)/3);
    background-clip: padding-box
}

::-webkit-scrollbar-thumb:active {
    background-color: var(--scroll-bar-thumb-background-color-active)
}

::-webkit-scrollbar-thumb:active,
::-webkit-scrollbar-thumb:hover {
    border-width: 1px;
    background-color: var(--scroll-bar-thumb-background-color-active);
    cursor: pointer
}

@media(hover:hover) and (pointer:fine) {
    .support-user-agreement-link:hover {
        color: var(--link-hover-color)
    }
}

@media screen and (min-width:768px) {
    .crash-mode {
        grid-template-areas: "crash-game crash-betting-board" "crash-game cashback" "crash-summary inventory" "crash-bets inventory" "giveaway inventory";
        grid-template-rows: var(--crash-betting-wrapper-height) var(--cashback-wrapper-height) var(--crash-summary-wrapper-height) var(--crash-bets-wrapper-height) auto
    }

    .crash-mode,
    .jackpot-mode {
        grid-template-columns: 1fr 1fr;
        grid-row-gap: 0;
        padding: 0 var(--outer-gap)
    }

    .jackpot-mode {
        grid-template-areas: "jackpot-timer jackpot-items-board" "jackpot-betting-board cashback" "jackpot-spinner inventory" "jackpot-bets inventory" "giveaway inventory";
        grid-template-rows: auto 1fr auto
    }

    .wheel-mode {
        grid-template-areas: "roulette roulette" "last cashback" "stats inventory" "players inventory" "players giveaway";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 400px auto auto 1fr auto
    }

    .provably-fair-content,
    .support-content,
    .ticket-messages-content,
    .user-agreement-content {
        --support-headeing-wrapper-height: calc(var(--tabblet-top-gap) + var(--support-headeing-height) + var(--small-gap))
    }

    .provably-fair-heading-wrapper,
    .support-heading-wrapper,
    .ticket-messages-heading-wrapper,
    .user-agreement-heading-wrapper {
        padding: var(--tabblet-top-gap) var(--outer-gap) var(--small-gap)
    }

    .provably-fair-heading,
    .support-heading,
    .ticket-messages-heading,
    .user-agreement-heading {
        font-size: 3rem
    }

    .support-user-agreement-link {
        font-size: var(--base-font-size)
    }
}

@media screen and (min-width:992px) {

    .content,
    .mode {
        margin: 0;
        padding: 0
    }

    .cashback-wrapper.mobile-only,
    .giveaway-dashboard-wrapper.mobile-only,
    .inventory.mobile-only {
        display: none
    }

    .mode-view main {
        display: grid;
        grid-template-areas: "mode-kit mode chat";
        grid-template-columns: var(--mode-kit-width) 1fr var(--chat-width)
    }

    .crash-mode {
        grid-template-areas: "crash-game crash-betting-board" "crash-summary crash-summary" "crash-bets crash-bets" "crash-hash crash-hash";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: var(--crash-betting-wrapper-height) var(--crash-summary-wrapper-height) var(--crash-bets-wrapper-height) var(--crash-hash-wrapper)
    }

    .crash-mode,
    .jackpot-mode {
        display: grid;
        grid-column-gap: 0;
        grid-row-gap: 0
    }

    .jackpot-mode {
        grid-template-areas: "jackpot-timer jackpot-items-board" "jackpot-betting-board jackpot-betting-board" "jackpot-spinner jackpot-spinner" "jackpot-bets jackpot-bets";
        grid-template-columns: 1fr calc(51.4rem + var(--large-gap) + var(--large-gap));
        grid-template-rows: var(--jackpot-items-wrapper-height) var(--jackpot-betting-wrapper-height) var(--jackpot-spinner-wrapper-height) var(--jackpot-bets-wrapper-height)
    }

    .wheel-mode {
        overflow-y: auto;
        overflow-x: hidden;
        display: grid;
        grid-template-areas: "roulette roulette" "stats last" "players players";
        grid-template-rows: 400px auto 1fr;
        grid-column-gap: 20px;
        padding: 0 var(--inner-gap);
        margin: 0 var(--outer-gap);
        background-color: var(--roulette-bg);
        border-radius: 5px
    }

    .page-view main {
        display: grid;
        grid-template-areas: "content chat";
        grid-template-columns: 1fr var(--chat-width)
    }

    .profile-content {
        display: grid;
        grid-template-areas: "profile-user profile-steam" "profile-user profile-referral" "user-statistics user-statistics" "user-history user-history";
        grid-template-columns: 1fr 2fr;
        grid-template-rows: calc(11.9rem + var(--large-gap)) calc(11.9rem + var(--large-gap)) calc(12.5rem + var(--large-gap)) 1fr
    }

    .user-content {
        display: grid;
        grid-template-areas: "user-info user-info" "user-statistics user-statistics" "user-history user-history";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: calc(14.4rem + var(--large-gap)) calc(12.5rem + var(--large-gap)) 1fr
    }

    .crash-history-content {
        grid-template-rows: auto 1fr
    }

    .tournament-content {
        display: grid;
        grid-template-areas: "tournament-dashboard tournament-participants";
        grid-template-columns: calc(var(--large-gap) + 32rem + var(--large-gap)) 1fr
    }

    .provably-fair-content,
    .support-content,
    .ticket-messages-content,
    .user-agreement-content {
        --support-headeing-height: 7.6rem;
        --support-headeing-wrapper-height: calc(var(--support-headeing-height) + var(--small-gap));
        grid-template-rows: var(--support-headeing-wrapper-height) 1fr
    }

    .support-content {
        grid-template-areas: "support-heading support-heading" "support-faq support-tickets";
        grid-template-columns: 1fr calc(42.5rem + var(--large-gap))
    }

    .provably-fair-heading-wrapper,
    .support-heading-wrapper,
    .ticket-messages-heading-wrapper,
    .user-agreement-heading-wrapper {
        padding: 0 var(--large-gap) var(--small-gap)
    }
}

.circular-timer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.circular-timer-time {
    position: absolute;
    font-family: Lekton, monospace;
    font-size: 1.8rem
}

#circular-timer {
    width: 100%;
    height: 100%
}

#circular-timer-progress-segment {
    stroke: url(#circular-timer-gradient)
}

.animated #circular-timer-small-runner {
    -webkit-animation-name: runner;
    animation-name: runner;
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block
}

.animated #circular-timer-large-runner {
    -webkit-animation-name: runner2;
    animation-name: runner2;
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block
}

@-webkit-keyframes runner2 {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn)
    }
}

@keyframes runner2 {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-1turn)
    }
}

.animated #circular-timer-pendulum {
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block
}

@-webkit-keyframes swing {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(0deg)
    }
}

@keyframes swing {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(180deg)
    }

    to {
        transform: rotate(0deg)
    }
}

#circular-timer-text,
#text971 {
    text-align: center
}

#text971 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%
}

.free-item-wrapper {
    height: 100%
}

.free-item {
    --empty-color: #2d2f3c;
    flex-direction: column;
    justify-content: space-around;
    height: 100%
}

.free-item,
.free-item-image-wrapper {
    display: flex;
    align-items: center;
    width: 100%
}

.free-item-image-wrapper {
    justify-content: center;
    height: 11rem
}

.free-item-image,
.free-item-image-stub {
    width: 100%
}

.free-item-image-stub {
    fill: none;
    stroke: var(--empty-color);
    stroke-width: .4;
    stroke-dasharray: 1, 1
}

.free-item-name {
    font-size: 1.5rem;
    font-weight: var(--light-font-weight);
    white-space: pre-wrap
}

.free-item-name-stub {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 10rem;
    height: 4rem;
    color: var(--empty-color)
}

.free-item-name-stub:after,
.free-item-name-stub:before {
    content: "";
    height: 1rem;
    border-top: .2rem dashed var(--empty-color);
    border-bottom: .2rem dashed var(--empty-color)
}

.free-item-name-stub:before {
    width: 10rem;
    margin-bottom: 1rem
}

.free-item-name-stub:after {
    width: 8rem
}

.free-item-price,
.free-item-price-stub {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-family: Argentum, sans-serif;
    font-size: 2.4rem;
    font-weight: var(--dark-font-weight)
}

.free-item-price-stub {
    color: var(--empty-color)
}

@media screen and (min-width:992px) {

    .free-item-image,
    .free-item-image-stub {
        width: 16rem
    }
}

.giveaway-dashboard-wrapper {
    grid-area: giveaway;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.giveaway-dashboard {
    --timer-width: 20rem;
    --item-width: var(--timer-width);
    --button-height: 4rem;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    z-index: 0
}

.giveaway-dashboard-long-button-wrapper,
.giveaway-dashboard-short-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    border-radius: 0 0 var(--radius) var(--radius)
}

.giveaway-dashboard-long-button-wrapper {
    position: absolute;
    bottom: 0;
    height: 4rem;
    z-index: 1
}

.giveaway-dashboard-short-button-wrapper {
    grid-area: giveaway-dashboard-short-button;
    height: 3rem
}

.giveaway-dashboard-long-button,
.giveaway-dashboard-short-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.giveaway-dashboard-long-button.mobile-only {
    background: linear-gradient(180deg, transparent, var(--panel-background))
}

.giveaway-dashboard-long-button.tablet-only,
.giveaway-dashboard-short-button.tablet-only {
    display: none
}

.giveaway-dashboard-long-button-icon,
.giveaway-dashboard-short-button-icon {
    width: 3rem;
    height: 3rem;
    fill: var(--icon-inactive-fill)
}

.giveaway-dashboard-long-button:active>.giveaway-dashboard-long-button-icon,
.giveaway-dashboard-long-button:focus>.giveaway-dashboard-long-button-icon,
.giveaway-dashboard-short-button:active>.giveaway-dashboard-short-button-icon,
.giveaway-dashboard-short-button:focus>.giveaway-dashboard-short-button-icon {
    fill: var(--icon-hover-fill)
}

.giveaway-dashboard-long {
    display: grid;
    grid-template-areas: "giveaway-dashboard-heading" "giveaway-dashboard-countdown" "giveaway-dashboard-item" "giveaway-dashboard-conditions" "giveaway-dashboard-history" "giveaway-dashboard-short-button";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto 1fr 3rem;
    grid-gap: var(--inner-gap);
    width: 100%;
    height: var(--timer-width);
    padding: var(--inner-gap);
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--panel-background);
    transition: height var(--nav-slide-transition)
}

.-show-details>.giveaway-dashboard-short {
    display: none;
    height: 0
}

.-show-details>.giveaway-dashboard-long {
    height: auto
}

.giveaway-dashboard-heading {
    grid-area: giveaway-dashboard-heading;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    text-transform: uppercase
}

.giveaway-dashboard-countdown {
    grid-area: giveaway-dashboard-countdown
}

.giveaway-dashboard-countdown,
.giveaway-dashboard-item-wrapper {
    height: calc(var(--timer-width) + var(--large-gap) + var(--button-height));
    margin: 0 auto
}

.giveaway-dashboard-countdown {
    width: var(--timer-width)
}

.giveaway-dashboard-item-wrapper {
    width: var(--item-width)
}

.giveaway-dashboard-countdown-button {
    width: 100%;
    height: var(--button-height)
}

.giveaway-dashboard-item-wrapper {
    grid-area: giveaway-dashboard-item
}

.giveaway-dashboard-item-wrapper .free-item-image,
.giveaway-dashboard-item-wrapper .free-item-image-stub {
    margin: -1.5rem 0 0
}

.giveaway-dashboard-conditions {
    grid-area: giveaway-dashboard-conditions
}

.giveaway-dashboard-history {
    grid-area: giveaway-dashboard-history;
    text-align: left;
    font-size: 1.8rem
}

.giveaway-dashboard-countdown,
.giveaway-dashboard-item-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: space-between
}

.giveaway-dashboard-countdown-widget {
    border-radius: 50%;
    box-shadow: 0 0 5rem hsla(0, 0%, 100%, .15), inset 0 0 8rem hsla(0, 0%, 100%, .15)
}

.giveaway-dashboard-countdown-button {
    height: 4rem;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #de7e08, #ff3633)
}

.giveaway-dashboard-countdown-button:active,
.giveaway-dashboard-countdown-button:focus {
    background: #de7e08;
    box-shadow: 0 0 .5rem #de7e08
}

.giveaway-dashboard-content-header,
.participant {
    display: grid;
    grid-gap: 1rem;
    font-size: var(--base-font-size);
    text-align: center
}

.giveaway-dashboard-history .participant,
.giveaway-dashboard-history>.giveaway-dashboard-content-header {
    grid-template-columns: 4rem 1fr 10rem
}

.giveaway-dashboard-content-header {
    grid-template-columns: 7rem 1fr 10rem;
    padding: var(--small-gap)
}

.giveaway-dashboard-content-header-column {
    text-transform: uppercase;
    color: #555961
}

@media(hover:hover) and (pointer:fine) {

    .giveaway-dashboard-long-button:hover>.giveaway-dashboard-long-button-icon,
    .giveaway-dashboard-short-button:hover>.giveaway-dashboard-short-button-icon {
        fill: var(--icon-hover-fill)
    }

    .giveaway-dashboard-countdown-button:hover {
        background: #de7e08;
        box-shadow: 0 0 .5rem #de7e08
    }

    .giveaway-dashboard-long-button-icon:hover {
        fill: var(--icon-hover-fill)
    }
}

@media screen and (min-width:320px) {
    .giveaway-dashboard {
        --timer-width: calc(50vw - var(--outer-gap)/2 - var(--inner-gap)/2 - var(--inner-gap)/2 - var(--inner-gap)/2 - var(--outer-gap)/2)
    }

    .giveaway-dashboard-long {
        grid-template-areas: "giveaway-dashboard-heading giveaway-dashboard-heading" "giveaway-dashboard-countdown giveaway-dashboard-item" "giveaway-dashboard-conditions giveaway-dashboard-conditions" "giveaway-dashboard-history giveaway-dashboard-history" "giveaway-dashboard-short-button giveaway-dashboard-short-button";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: auto auto auto 1fr 3rem
    }
}

@media screen and (min-width:768px) {
    .giveaway-dashboard-wrapper {
        position: relative;
        width: 100%;
        height: auto;
        padding: 0 0 calc(var(--outer-gap) + var(--mode-bar-height))
    }

    .wheel-mode .giveaway-dashboard-wrapper {
        padding: 0 0 calc(var(--outer-gap) + 17px)
    }

    .crash-mode .giveaway-dashboard-wrapper {
        bottom: var(--mode-bar-height)
    }

    .jackpot-mode .giveaway-dashboard-wrapper {
        bottom: -3rem
    }

    .giveaway-dashboard {
        width: 100%;
        height: var(--giveaway-wrapper-height);
        transition: margin var(--nav-slide-transition), height var(--nav-slide-transition)
    }

    .giveaway-dashboard.-show-details {
        width: 100%;
        height: calc(var(--inventory-height) - var(--crash-summary-wrapper-height));
        margin: calc(0% - var(--inventory-height) + var(--crash-summary-wrapper-height)) 0 0;
        z-index: 10000
    }

    .-show-details>.giveaway-dashboard-short {
        display: none;
        height: 0
    }

    .giveaway-dashboard-long {
        width: 100%;
        height: var(--giveaway-wrapper-height);
        background: var(--panel-background);
        overflow: hidden
    }

    .-show-details>.giveaway-dashboard-long {
        height: auto;
        overflow-y: auto
    }

    .giveaway-dashboard-heading {
        position: absolute;
        width: 100%;
        height: 4rem;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(180deg, transparent, var(--panel-background));
        z-index: 1
    }

    .-show-details .giveaway-dashboard-heading {
        position: static
    }

    .giveaway-dashboard-long-button-wrapper {
        position: absolute;
        top: 0;
        background: var(--panel-background)
    }

    .giveaway-dashboard-long-button.mobile-only,
    .giveaway-dashboard-short-button.mobile-only {
        display: none
    }

    .giveaway-dashboard-long-button.tablet-only,
    .giveaway-dashboard-short-button.tablet-only {
        display: initial
    }

    .giveaway-dashboard-short-button-wrapper {
        display: none
    }

    .-show-details div.giveaway-dashboard-short-button-wrapper {
        position: absolute;
        display: block;
        left: 0;
        bottom: 0
    }

    .giveaway-dashboard {
        --timer-width: 15rem
    }

    .giveaway-dashboard-long {
        height: 100%
    }

    .giveaway-dashboard-item-wrapper .free-item-image,
    .giveaway-dashboard-item-wrapper .free-item-image-stub {
        margin: 0
    }
}

@media screen and (min-width:992px) {
    .giveaway-dashboard-wrapper {
        display: none
    }
}

.giveaway-conditions-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%
}

.giveaway-conditions-label {
    text-align: left;
    color: var(--label-color);
    font-weight: var(--dark-font-weight)
}

.giveaway-conditions {
    height: 13.2rem;
    text-align: left
}

.giveaway-condition {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin: 1.2rem 0
}

.giveaway-condition-status {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin-right: 1.2rem;
    background: #333
}

.giveaway-condition-status[data-condition-status=done] {
    background: #ff4800;
    box-shadow: 0 0 .75rem #ff4800
}

.giveaway-highlight {
    margin: 0 .3rem;
    font-family: Argentum, sans-serif;
    font-weight: var(--deep-font-weight);
    color: #f5ff50
}

.giveaway-domain {
    text-transform: uppercase
}

.empty-participants,
.participants {
    height: var(--participants-height)
}

.empty-participants {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--bet-wrapper)
}

.empty-participants-text {
    font-size: 1.68rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #282b36
}

.participants.has-padding-correction {
    margin: 0 -1.5rem 0 0;
    padding: 0 .9rem 0 0;
    overflow-y: scroll
}

.participant-stub {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 5.6rem;
    margin-bottom: var(--tiny-gap);
    padding: 0 var(--small-gap)
}

.participant-stub,
.participant-stub:before {
    border-radius: var(--radius);
    border: .2rem dashed #262834
}

.participant-stub:before {
    content: "";
    width: 4rem;
    height: 4rem
}

.participant {
    width: 100%;
    height: 5.6rem;
    align-items: center;
    margin-bottom: var(--tiny-gap);
    padding: 0 var(--small-gap);
    border-radius: var(--radius);
    background: #262834
}

.participant-stub:last-child,
.participant:last-child {
    margin-bottom: 0
}

.participant-value {
    display: flex;
    align-items: center;
    margin: auto 0
}

.avatar.participant-avatar {
    width: 4rem;
    height: 4rem;
    margin-right: var(--small-gap)
}

.participant-value {
    justify-content: center
}

@media screen and (min-width:992px) {
    .empty-participants-text {
        font-size: 2.4rem
    }
}

.avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 4.8rem;
    height: 4.8rem;
    overflow: hidden;
    border-radius: var(--radius)
}

.avatar,
.avatar-image,
.avatar-image2:after {
    background: var(--default-user-icon-background)
}

.avatar-image,
.avatar-image2:after {
    display: block;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23fff" fill-opacity="0.5" d="M 16,2.75 A 8.3,8.3 0 0 0 7.7,11 8.3,8.3 0 0 0 11.6,18 12,12 0 0 0 4,29.25 h 2.1 a 9.9,9.9 0 0 1 9.94,-9.9 9.9,9.9 0 0 1 9.9,9.9 h 2.1 A 12,12 0 0 0 20.4,18.1 8.3,8.3 0 0 0 24.3,11 8.3,8.3 0 0 0 16,2.75 Z m 0,2.1 A 6.2,6.2 0 0 1 22.2,11 6.2,6.2 0 0 1 16,17.2 6.2,6.2 0 0 1 9.8,11 6.2,6.2 0 0 1 16,4.8 Z" /></svg>');
    background-size: cover
}

.avatar-image {
    font-size: 0;
    text-align: center;
    color: transparent
}

.avatar-image2:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.default-user-icon {
    width: 75%;
    height: 75%;
    fill: var(--default-user-icon-fill);
    background: var(--default-user-icon-background)
}

.ui-button {
    border-radius: var(--radius);
    border: none;
    outline: none;
    cursor: pointer
}

.ui-button:disabled {
    color: var(--button-disabled-color);
    background: var(--button-disabled-background);
    text-shadow: none;
    box-shadow: none;
    pointer-events: none;
    cursor: default
}

.modal-wrapper {
    display: none
}

.-show-modal .modal-wrapper {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 101
}

.modal {
    position: relative
}

.modal-close-button {
    top: 1.5rem;
    right: 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3rem;
    height: 3rem;
    border-radius: 50%
}

.modal-close-icon {
    width: 2rem;
    height: 2rem;
    fill: var(--icon-inactive-fill)
}

.modal-close-button:active>.modal-close-icon,
.modal-close-button:focus>.modal-close-icon {
    fill: var(--icon-hover-fill)
}

@supports ((-webkit-backdrop-filter:none) or (backdrop-filter:none)) or (-webkit-backdrop-filter:none) {
    .-show-modal .modal-wrapper {
        -webkit-backdrop-filter: brightness(.9) blur(.75rem);
        backdrop-filter: brightness(.9) blur(.75rem)
    }
}

@media(hover:hover) and (pointer:fine) {
    .modal-close-button:hover>.modal-close-icon {
        fill: var(--icon-hover-fill)
    }
}

@media screen and (min-width:540px) {
    .modal-close-button {
        right: calc(4.9vw - .6rem)
    }
}

@media screen and (min-width:768px) {
    .modal-close-button {
        top: -4.8rem;
        right: -4.8rem;
        width: 4.8rem;
        height: 4.8rem;
        background: var(--modal-background)
    }
}

.dual-arc-loader {
    display: inline-block;
    width: 8rem;
    height: 8rem
}

.dual-arc-loader:after {
    content: " ";
    display: block;
    width: 6.4rem;
    height: 6.4rem;
    margin: .8rem;
    border-radius: 50%;
    border: .6rem solid #fff;
    border-color: hsla(0, 0%, 100%, .25) transparent hsla(0, 0%, 100%, .25) transparent;
    -webkit-animation: dual-arc-loader 1.2s linear infinite;
    animation: dual-arc-loader 1.2s linear infinite
}

@-webkit-keyframes dual-arc-loader {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes dual-arc-loader {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

.ui-text-input {
    display: block;
    width: 100%;
    padding: 1rem;
    font-size: var(--base-font-size);
    color: #ccc;
    border-radius: var(--radius);
    border: none;
    outline: none;
    background: #13151d
}

.ui-text-input:focus::-moz-placeholder {
    color: transparent
}

.ui-text-input:focus:-ms-input-placeholder {
    color: transparent
}

.ui-text-input:focus::placeholder {
    color: transparent
}

.ui-text-input:disabled {
    color: var(--button-disabled-color)
}

.ui-text-input:disabled::-moz-placeholder {
    opacity: .15
}

.ui-text-input:disabled:-ms-input-placeholder {
    opacity: .15
}

.ui-text-input:disabled::placeholder {
    opacity: .15
}

.ui-money-input {
    -moz-appearance: textfield
}

.ui-money-input::-webkit-inner-spin-button,
.ui-money-input::-webkit-outer-spin-button {
    -webkit-appearance: none
}

.toggle-switch {
    position: relative;
    display: inline-block;
    width: 5.5rem;
    height: 2.8rem
}

.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0
}

.toggle-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #13151d;
    transition: .4s
}

.toggle-switch-slider:before {
    position: absolute;
    content: "";
    height: 2rem;
    width: 2rem;
    left: .4rem;
    bottom: .4rem;
    background-color: #fbb700;
    transition: .4s
}

input:checked+.toggle-switch-slider {
    background-color: #333
}

input:focus+.toggle-switch-slider {
    box-shadow: 0 0 .0625rem #333
}

input:checked+.toggle-switch-slider:before {
    transform: translateX(2.7rem)
}

.toggle-switch-slider.round {
    border-radius: 2rem
}

.toggle-switch-slider.round:before {
    border-radius: 50%
}

.under-development-wrapper {
    grid-area: under-development;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%
}

.under-development {
    margin: 2.5em 0 5rem;
    font-size: 1rem
}

#under-development-emblem {
    width: 20em;
    height: 20em
}

#under-development-hexagon {
    stroke: #262834
}

#under-development-logo {
    stroke: #262834;
    fill: #262834
}

#under-development-axis,
#under-development-equator,
#under-development-globe,
#under-development-line-1,
#under-development-line-2,
#under-development-line-3,
#under-development-line-4,
#under-development-line-5 {
    stroke: #262834
}

.under-development-heading {
    margin-top: 1rem;
    text-transform: uppercase;
    color: #262834
}

.dialog #under-development-emblem {
    width: 18em;
    height: 18em
}

.dialog #under-development-hexagon {
    stroke: #393e4d
}

.dialog #under-development-logo {
    stroke: #393e4d;
    fill: #393e4d
}

.dialog #under-development-axis,
.dialog #under-development-equator,
.dialog #under-development-globe,
.dialog #under-development-line-1,
.dialog #under-development-line-2,
.dialog #under-development-line-3,
.dialog #under-development-line-4,
.dialog #under-development-line-5 {
    stroke: #393e4d
}

.dialog .under-development-heading {
    color: #393e4d
}

@media screen and (min-width:992px) {
    .under-development {
        font-size: 2rem
    }
}

.notice {
    --rgb-color: 127, 127, 127;
    position: absolute;
    top: 5rem;
    right: 5vw;
    display: flex;
    align-items: center;
    max-width: 90vw;
    min-height: 6.4rem;
    padding: 0 var(--medium-gap);
    color: rgb(var(--rgb-color));
    border-radius: var(--radius);
    border: .2rem solid rgb(var(--rgb-color));
    background: rgba(var(--rgb-color), .25);
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    cursor: pointer;
    z-index: 1000
}

.notice.success {
    --rgb-color: 145, 224, 101
}

.notice.error,
.notice.fail {
    --rgb-color: 218, 53, 97
}

.notice-icon {
    margin-right: var(--medium-gap);
    fill: rgb(var(--rgb-color))
}

.notice-icon.success-icon {
    width: 2.8rem;
    height: 2.8rem
}

.notice-icon.fail-icon {
    width: 2rem;
    height: 2.6rem
}

@media screen and (min-width:768px) {
    .notice {
        height: 6.4rem;
        padding: 0 var(--large-gap);
        font-size: 1.8rem
    }

    .notice-icon {
        margin-right: 3.2rem
    }
}

@media screen and (min-width:992px) {
    .notice {
        top: 6.5rem;
        right: var(--large-gap)
    }
}

.win-notice {
    --rgb-color: 145, 224, 101;
    position: absolute;
    bottom: 5.5rem;
    right: 5vw;
    display: flex;
    align-items: center;
    max-width: 90vw;
    min-height: 9.6rem;
    padding: 0 var(--medium-gap);
    color: rgb(var(--rgb-color));
    border-radius: var(--radius);
    border: .2rem solid rgb(var(--rgb-color));
    background: rgba(var(--rgb-color), .25);
    -webkit-backdrop-filter: blur(.25rem);
    backdrop-filter: blur(.25rem);
    cursor: pointer;
    z-index: 1000
}

.win-notice-icon {
    width: 2.4rem;
    height: 3.9rem;
    margin-right: var(--medium-gap);
    fill: rgb(var(--rgb-color))
}

.win-notice-text {
    width: 18rem;
    text-align: left
}

.win-notice-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 8rem
}

.win-notice-item-image {
    width: 10rem
}

.win-notice-item-image-blur {
    position: absolute;
    width: 10.5rem;
    filter: contrast(0) grayscale(1) sepia(1) brightness(1) saturate(3) hue-rotate(55deg) blur(.8rem);
    z-index: -1
}

@media screen and (min-width:768px) {
    .win-notice {
        height: 11rem;
        padding: 0 var(--large-gap);
        font-size: 1.8rem
    }

    .win-notice-icon {
        margin-right: 3.2rem
    }

    .win-notice-item {
        width: 12rem;
        margin-left: 3.2rem
    }
}

@media screen and (min-width:992px) {
    .win-notice {
        bottom: 6.5rem;
        right: var(--large-gap)
    }
}

.chat {
    --chat-height: calc(var(--app-height, 100vh) - var(--header-height) - var(--mode-bar-height));
    --chat-header-height: 5rem;
    --chat-sending-height: 11rem;
    --dividing-line: var(--line-thickness) solid #13151d;
    grid-area: chat;
    position: absolute;
    top: var(--header-height);
    bottom: var(--mode-bar-height);
    right: calc(0% - var(--chat-width));
    display: grid;
    grid-template-rows: var(--chat-header-height) 1fr var(--chat-sending-height);
    width: var(--chat-width);
    padding: 0;
    background: var(--panel-background);
    transition: right var(--nav-slide-transition);
    z-index: 3
}

.-show-mobile-chat .chat {
    right: 0;
    box-shadow: 0 0 1.5rem #000
}

@media screen and (min-width:992px) {
    .chat {
        --chat-height: calc(100vh - var(--header-height));
        --chat-header-height: 8.2rem;
        position: static;
        top: 0;
        right: 0;
        bottom: 0;
        width: auto;
        height: var(--chat-height);
        border-radius: var(--radius) 0 0 0;
        transition: none
    }

    .-show-mobile-chat .chat {
        box-shadow: none
    }
}

.chat-header {
    justify-content: space-between;
    margin: 0 var(--medium-gap);
    border-bottom: var(--dividing-line)
}

.chat-header,
.chat-heading-wrapper {
    display: flex;
    align-items: center
}

.chat-heading {
    order: 2;
    font-size: var(--base-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff
}

.hide-chat-button,
.show-chat-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.2rem;
    height: 3.2rem;
    cursor: pointer
}

.hide-chat-button {
    display: none;
    margin-right: .75rem;
    border-radius: var(--small-radius);
    background: #423223
}

.hide-chat-icon,
.show-chat-icon {
    width: 1.5rem;
    height: 1.5rem
}

.hide-chat-icon {
    fill: #ff8300
}

.chat-status {
    display: block;
    width: .75rem;
    height: .75rem;
    margin: 0 1.75rem 0 1rem;
    border-radius: 50%
}

.chat-status[data-chat-status=online] {
    background: #87f9c1;
    box-shadow: 0 0 .75rem #87f9c1
}

.chat-status[data-chat-status=offline] {
    background: #444
}

.chat-info {
    text-transform: none;
    color: #696969
}

.chat-info-online {
    display: inline-block;
    width: 2.8rem;
    text-align: right;
    font-weight: var(--deep-font-weight);
    color: #e80
}

@media screen and (min-width:992px) {
    .chat-header {
        margin: 0 var(--large-gap)
    }

    .hide-chat-button {
        display: flex
    }
}

.chat-messages {
    --messages-height: calc(var(--chat-height) - var(--chat-header-height) - var(--chat-sending-height));
    position: relative;
    height: var(--messages-height);
    margin: 0 var(--medium-gap);
    padding: var(--medium-gap) 0
}

.chat-messages-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.chat-message-list {
    height: calc(var(--messages-height) - var(--medium-gap) - var(--medium-gap));
    margin: 0;
    padding: 0
}

.chat-messages-scroll-button {
    position: absolute;
    right: 6rem;
    bottom: 6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #390;
    opacity: .5;
    cursor: pointer;
    transition: right .2s ease-out, bottom .2s ease-out, width .2s ease-out, height .2s ease-out, opacity .2s ease-out
}

.scrolled+.chat-messages-scroll-button {
    right: 3rem;
    bottom: 3rem;
    width: 6rem;
    height: 6rem;
    opacity: 1
}

.chat-messages-scroll-icon {
    width: 50%;
    height: 50%;
    fill: #9f3
}

.chat-message {
    display: grid;
    grid-template-areas: "chat-message-avatar-link chat-message-username chat-message-manage chat-message-time" "chat-message-avatar-link chat-message chat-message chat-message";
    grid-template-columns: 6.3rem 1fr 2.5rem 3rem;
    grid-template-rows: 2.5rem 1fr;
    grid-column-gap: .5rem;
    align-items: center;
    margin: 0 0 var(--medium-gap) 0
}

.chat-message:last-child {
    margin: 0
}

.chat-message-avatar-link {
    grid-area: chat-message-avatar-link;
    align-self: start;
    display: flex;
    cursor: pointer
}

.chat-message-avatar {
    width: 4.8rem;
    height: 4.8rem
}

.chat-message-header {
    grid-area: chat-message-username;
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: var(--tiny-gap);
    align-items: center;
    cursor: pointer
}

.chat-message-header[data-role=admin],
.chat-message-header[data-role=moderator],
.chat-message-header[data-role=youtuber] {
    grid-template-columns: 2.5rem 1fr
}

.chat-message-user-shield-icon {
    width: 2.5rem;
    height: 2.5rem;
    margin-right: var(--tiny-gap)
}

.chat-message-header[data-role=admin]>.chat-message-user-shield-icon {
    fill: url(#adnin-shield-gradient)
}

.chat-message-header[data-role=moderator]>.chat-message-user-shield-icon,
.chat-message-header[data-role=youtuber]>.chat-message-user-shield-icon {
    fill: url(#moderator-shield-gradient)
}

.chat-message-username {
    text-align: left;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight);
    line-height: var(--base-font-size)
}

.chat-message-header[data-role=user]>.chat-message-username {
    color: #777575
}

.chat-message-header[data-role=admin]>.chat-message-username {
    color: #ff3b3b
}

.chat-message-header[data-role=moderator]>.chat-message-username {
    color: #0f955e
}

.chat-message-header[data-role=youtuber]>.chat-message-username {
    color: #0888ff
}

.chat-message-time {
    grid-area: chat-message-time;
    text-align: right;
    font-size: 1.1rem;
    color: #856b51
}

.chat-message-manage-button {
    grid-area: chat-message-manage;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    border-radius: 0;
    border: none;
    outline: none;
    background: none
}

.chat-message-manage-icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: #856b51
}

.chat-message-manage-button:active>.chat-message-manage-icon,
.chat-message-manage-button:focus>.chat-message-manage-icon {
    fill: #977f6a
}

.chat-message-text {
    grid-area: chat-message;
    padding: var(--small-gap);
    text-align: left;
    overflow-wrap: break-word;
    border-radius: var(--radius);
    font-weight: var(--light-font-weight);
    color: #fff;
    background: #1f212d
}

.chat-message[data-my-message]>.chat-message-text {
    background: #323441
}

.chat-message-stats-wrapper {
    grid-area: chat-message;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: 2.5rem 1fr;
    grid-column-gap: .2rem;
    width: 100%;
    padding: var(--small-gap) 0 0;
    border-radius: var(--radius);
    background: #1c2029
}

.chat-message-stats-heading {
    grid-column-start: 1;
    grid-column-end: 4;
    text-transform: uppercase;
    color: #856b51
}

.chat-message-stats-indicator {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 7.5rem
}

.chat-message-stats-indicator-name {
    font-size: 1rem;
    text-transform: uppercase;
    color: #856b51
}

.chat-message-stats-indicator-value {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 5.5rem;
    font-size: 1.6rem;
    font-weight: var(--deep-font-weight);
    color: #ffa13f;
    border-radius: var(--radius);
    background: #252933
}

.chat-message-balance-wrapper {
    grid-area: chat-message;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: .2rem;
    width: 100%;
    padding: var(--small-gap) 0;
    border-radius: var(--radius);
    background: #1c2029
}

.chat-message-balance-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 8.3rem;
    border-radius: var(--radius);
    background: #252933
}

.chat-message-balance-indicator-icon {
    width: 3.2rem;
    height: 3.2rem;
    fill: url(#simple-gold-gradient)
}

.chat-message-balance-indicator-name {
    margin: .3rem 0;
    font-size: 1rem;
    text-transform: uppercase
}

.chat-message-balance-indicator-value {
    font-size: 1.6rem;
    font-weight: var(--deep-font-weight);
    color: #ffa13f
}

.chat-message-balance-indicator-value>.dollar {
    font-family: Argentum, sans-serif;
    font-weight: var(--base-font-weight)
}

@media(hover:hover) and (pointer:fine) {
    .chat-message-manage-button:hover>.chat-message-manage-icon {
        fill: #977f6a
    }
}

@media screen and (min-width:992px) {
    .chat-messages {
        margin: 0 var(--small-gap) 0 var(--large-gap)
    }

    .chat-message-list {
        padding: 0 1.6rem 0 0
    }

    .chat-message-list.has-padding-correction {
        padding-right: 1rem
    }

    .chat-message-username:after {
        background: linear-gradient(90deg, transparent, var(--panel-background))
    }
}

.chat-quiz-wrapper {
    position: absolute;
    top: var(--medium-gap);
    left: 0;
    right: 0;
    display: grid;
    grid-template-rows: 13rem 1fr;
    grid-row-gap: .6rem;
    height: auto;
    border-radius: 0 0 var(--radius) var(--radius);
    background: var(--panel-background);
    z-index: 12
}

.chat-quiz-item-bar,
.chat-quiz-question-bar {
    border-radius: var(--radius);
    background: linear-gradient(#343741, #1d202b)
}

.chat-quiz-item-bar {
    position: relative;
    display: grid;
    grid-template-areas: "chat-quiz-item-heading chat-quiz-item-heading chat-quiz-item-heading" "chat-quiz-item-info chat-quiz-item-thumbnail . " ". . .";
    grid-template-columns: 1fr 8.5rem 1fr;
    grid-template-rows: 4.3rem 1fr 1rem;
    grid-column-gap: 1rem;
    padding: 0 var(--medium-gap)
}

.chat-quiz-item-bar:after {
    position: absolute;
    top: 0;
    right: 0;
    content: "";
    width: 12.5rem;
    height: 13rem;
    border-radius: 0 var(--radius) var(--radius) 0;
    background-image: url(../img/quiz-bg.5097e8ee.png);
    opacity: .15
}

.chat-quiz-item-heading {
    grid-area: chat-quiz-item-heading;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 1.8rem;
    text-transform: uppercase;
    z-index: 1
}

.chat-quiz-item-info {
    grid-area: chat-quiz-item-info;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start
}

.chat-quiz-item-price {
    font-family: Argentum, sans-serif;
    font-weight: var(--dark-font-weight);
    background: linear-gradient(90deg, #ffdc00, #ff8200);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #ffdc00
}

.chat-quiz-item-name {
    font-size: 1.2rem;
    text-align: left;
    color: #5d636f;
    white-space: pre-wrap
}

.chat-quiz-item-thumbnail {
    grid-area: chat-quiz-item-thumbnail;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 7.5rem;
    background: radial-gradient(hsla(0, 0%, 50.2%, .3), hsla(0, 0%, 50.2%, .15), transparent, transparent);
    z-index: 1
}

.chat-quiz-item-thumbnail.contraband,
.chat-quiz-item-thumbnail.exotic {
    background: radial-gradient(rgba(197, 139, 61, .5), rgba(197, 139, 61, .25), transparent, transparent)
}

.chat-quiz-item-thumbnail.covert,
.chat-quiz-item-thumbnail.extraordinary,
.chat-quiz-item-thumbnail.knives {
    background: radial-gradient(rgba(148, 68, 63, .5), rgba(148, 68, 63, .25), transparent, transparent)
}

.chat-quiz-item-thumbnail.classified {
    background: radial-gradient(rgba(137, 46, 158, .5), rgba(137, 46, 158, .25), transparent, transparent)
}

.chat-quiz-item-thumbnail.restricted {
    background: radial-gradient(rgba(86, 52, 174, .5), rgba(86, 52, 174, .25), transparent, transparent)
}

.chat-quiz-item-thumbnail.mil-spec,
.chat-quiz-item-thumbnail.mil-spec-grade {
    background: radial-gradient(rgba(57, 73, 167, .5), rgba(57, 73, 167, .25), transparent, transparent)
}

.chat-quiz-item-thumbnail.industrial,
.chat-quiz-item-thumbnail.industrial-grade {
    background: radial-gradient(rgba(36, 88, 144, .5), rgba(36, 88, 144, .25), transparent, transparent)
}

.chat-quiz-item-thumbnail.mil-base,
.chat-quiz-item-thumbnail.mil-base-grade,
.chat-quiz-item-thumbnail.mil-consumer,
.chat-quiz-item-thumbnail.mil-consumer-grade {
    background: radial-gradient(hsla(0, 0%, 56.5%, .5), hsla(0, 0%, 56.5%, .25), transparent, transparent)
}

.chat-quiz-question-bar {
    display: flex;
    padding: var(--medium-gap)
}

.chat-quiz-question-label {
    display: flex;
    align-items: center;
    margin-right: var(--medium-gap);
    font-size: 1.1rem;
    line-height: 1.4rem;
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #757a86
}

.chat-quiz-question {
    text-align: left
}

@media screen and (min-width:992px) {
    .chat-quiz-wrapper {
        right: 1.6rem
    }
}

.chat-sending {
    --field-height: 5.5rem;
    --submit-width: 3.2rem;
    --submit-height: 3.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 0 var(--medium-gap) var(--medium-gap);
    border-top: var(--dividing-line)
}

.chat-additions {
    display: flex;
    justify-content: space-around;
    align-items: center;
    height: 3.5rem
}

.chat-additions-link {
    font-size: 1.1rem;
    text-transform: uppercase;
    color: var(--link-inactive-color);
    cursor: pointer
}

.chat-additions-link:active,
.chat-additions-link:focus {
    color: var(--link-hover-color)
}

.chat-sending-form {
    display: flex;
    align-items: center
}

#chat-message-field {
    height: var(--field-height);
    padding-right: var(--field-height)
}

.chat-message-submit {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--submit-width);
    height: var(--submit-height);
    margin-left: calc(var(--submit-height)/2 - var(--field-height)/2 - var(--submit-width));
    border-radius: var(--radius);
    border: none;
    outline: none;
    background: #26272f;
    cursor: pointer
}

.chat-message-submit-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: #695543
}

.chat-message-submit:active>.chat-message-submit-icon,
.chat-message-submit:focus>.chat-message-submit-icon {
    fill: #976
}

.chat-message-submit:disabled {
    background: var(--button-disabled-background);
    cursor: default
}

.chat-message-submit:disabled:hover>.chat-message-submit-icon,
.chat-message-submit:disabled>.chat-message-submit-icon {
    fill: var(--button-disabled-color)
}

@media(hover:hover) and (pointer:fine) {
    .chat-additions-link:hover {
        color: var(--link-hover-color)
    }

    .chat-message-submit:hover>.chat-message-submit-icon {
        fill: #976
    }
}

.dialog {
    --dialog-width: 85vw;
    --dialog-header-height: 6rem;
    --dialog-content-min-height: 10vw;
    --dialog-inner-gap: var(--medium-gap);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--dialog-header-height) 1fr;
    width: var(--dialog-width);
    max-height: calc(var(--app-height, 100vh)*0.93);
    border-radius: var(--radius);
    background: var(--modal-background)
}

.dialog-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 var(--dialog-inner-gap);
    border-radius: var(--radius) var(--radius) 0 0;
    border-bottom: .4rem solid var(--dialog-line-color)
}

.dialog-heading {
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    text-transform: uppercase;
    color: #fff
}

.dialog-content {
    min-height: var(--dialog-content-min-height);
    border-radius: 0 0 var(--radius) var(--radius);
    overflow-x: hidden;
    overflow-y: auto
}

.dialog-content-heading {
    margin-bottom: var(--tiny-gap);
    font-size: 1.2rem;
    font-weight: var(--base-font-weight);
    text-transform: uppercase;
    text-align: center;
    color: var(--dialog-content-heading-color)
}

.dialog-content-heading>.dollar {
    font-family: Argentum, sans-serif;
    font-weight: var(--light-font-weight)
}

.dialog-content-footnote {
    font-size: 1.2rem;
    color: var(--dialog-content-footnote-color)
}

.dialog-content-asterisk {
    font-size: 1.6rem;
    color: var(--dialog-content-highlight-color)
}

.dialog-content-highlight {
    text-transform: uppercase;
    color: var(--dialog-content-highlight-color)
}

@media screen and (min-width:540px) {
    .dialog {
        --dialog-inner-gap: 4.9vw
    }

    .dialog.dialog-auto-size {
        --dialog-width: auto;
        --dialog-content-min-height: auto
    }

    .dialog-content-heading {
        margin-bottom: 1.36vw;
        font-size: 1.9vw
    }

    .dialog-content-footnote {
        font-size: 1.9vw
    }

    .dialog-content-asterisk {
        font-size: 2.45vw
    }
}

@media screen and (min-width:768px) {
    .dialog {
        --dialog-width: 62.4rem;
        --dialog-header-height: 8.5rem;
        --dialog-content-min-height: 30rem;
        --dialog-inner-gap: 3.6rem
    }

    .dialog-heading {
        font-size: 1.8rem
    }

    .dialog-content-heading {
        margin-bottom: 1rem
    }

    .dialog-content-footnote,
    .dialog-content-heading {
        font-size: var(--base-font-size)
    }

    .dialog-content-asterisk {
        font-size: 1.8rem
    }
}

.dialog-login {
    padding: 5.71vw 8.16vw;
    font-size: 1.9vw
}

.dialog-login-section-heading {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 2.5vw;
    font-weight: var(--base-font-weight);
    text-transform: uppercase;
    color: #adadad
}

.dialog-login-section-heading:after,
.dialog-login-section-heading:before {
    content: "";
    display: block;
    width: 18.77vw;
    height: .2rem;
    background: var(--dialog-line-color)
}

.dialog-login-hexagons {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: auto;
    padding: 3.4vw 2.04vw
}

.dialog-login-hexagon {
    width: 28.83vw;
    height: 28.83vw;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23222531" d="m 37.5,46.65 -25,0 L 0,25 12.5,3.35 l 25,0 L 50,25 Z" /></svg>');
    background-repeat: no-repeat
}

.dialog-login-hexagon,
.dialog-login-hexagon-link {
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%
}

.dialog-login-hexagon-link {
    width: 26.52vw;
    height: 26.52vw
}

.dialog-login-hexagon-link.enabled {
    cursor: pointer
}

.dialog-login-hexagon-icon {
    width: 12.92vw;
    height: 12.92vw;
    fill: var(--button-disabled-color)
}

.dialog-login-hexagon-link.enabled>.dialog-login-hexagon-icon {
    fill: #999;
    filter: drop-shadow(0 0 2.04vw #000)
}

.dialog-login-hexagon-link.enabled:active>.google-icon,
.dialog-login-hexagon-link.enabled:active>.steam-icon,
.dialog-login-hexagon-link.enabled:focus>.google-icon,
.dialog-login-hexagon-link.enabled:focus>.steam-icon {
    fill: #fff
}

.dialog-login-hexagon-link.enabled:active>.vk-icon,
.dialog-login-hexagon-link.enabled:focus>.vk-icon {
    fill: #2787f5
}

.dialog-login-agreement,
.dialog-login-confirm {
    margin: 3.2rem 0 0
}

.dialog-login-agreement a {
    color: #999
}

.dialog-login-agreement address {
    display: inline;
    font-style: normal;
    color: var(--dialog-content-highlight-color)
}

.dialog-login-agreement a:active,
.dialog-login-agreement a:focus {
    color: var(--link-hover-color)
}

.dialog-login-agreement {
    text-align: left;
    color: var(--dialog-content-color)
}

.dialog-login-confirm {
    font-size: 1.2rem;
    font-weight: var(--base-font-weight);
    text-align: left
}

.dialog-login-confirm-checkbox {
    display: none
}

.dialog-login-confirm-label {
    display: flex;
    align-items: center
}

.dialog-login-confirm-checkbox+.dialog-login-confirm-label:before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
    border: .3rem solid #0f1319;
    background: #0f1319;
    cursor: pointer
}

.dialog-login-confirm-checkbox:checked+.dialog-login-confirm-label:before {
    background: var(--radio-button-checked-color)
}

@media(hover:hover) and (pointer:fine) {

    .dialog-login-hexagon-link.enabled:hover>.google-icon,
    .dialog-login-hexagon-link.enabled:hover>.steam-icon {
        fill: #fff
    }

    .dialog-login-hexagon-link.enabled:hover>.vk-icon {
        fill: #2787f5
    }

    .dialog-login-agreement a:hover {
        color: var(--link-hover-color)
    }
}

@media screen and (min-width:540px) {

    .dialog-login-agreement,
    .dialog-login-confirm {
        margin: 4.35vw 0 0
    }

    .dialog-login-confirm {
        font-size: 1.9vw
    }

    .dialog-login-confirm-checkbox+.dialog-login-confirm-label:before {
        width: 2.45vw;
        height: 2.45vw;
        margin-right: 1.36vw;
        border: .4vw solid #0f1319
    }
}

@media screen and (min-width:768px) {
    .dialog-login {
        min-width: 0;
        padding: 4.2rem 6rem;
        font-size: var(--base-font-size)
    }

    .dialog-login-section-heading {
        font-size: 1.8rem
    }

    .dialog-login-section-heading:after,
    .dialog-login-section-heading:before {
        width: 13.8rem;
        height: .3rem
    }

    .dialog-login-hexagons {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 2.5rem 1.5rem
    }

    .dialog-login-hexagon {
        width: 21.2rem;
        height: 21.2rem
    }

    .dialog-login-hexagon-link {
        width: 19.5rem;
        height: 19.5rem
    }

    .dialog-login-hexagon-icon {
        width: 9.5rem;
        height: 9.5rem;
        filter: drop-shadow(0 0 1.5rem #000)
    }

    .dialog-login-agreement,
    .dialog-login-confirm {
        margin: 3.2rem 0 0
    }

    .dialog-login-confirm {
        font-size: var(--base-font-size)
    }

    .dialog-login-confirm-checkbox+.dialog-login-confirm-label:before {
        width: 1.8rem;
        height: 1.8rem;
        margin-right: 1rem;
        border: .4rem solid #0f1319
    }
}

.dialog-cashback {
    padding: var(--dialog-inner-gap);
    text-align: left
}

.dialog-cashback-form {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: var(--medium-gap)
}

.dialog-cashback-bonus {
    position: relative;
    display: flex;
    align-items: center
}

.dialog-cashback-bonus:after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: -1rem;
    display: block;
    margin-right: -1rem;
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-top: 1rem solid #13151d;
    border-right: 1rem solid transparent
}

.dialog-cashback-bonus-field {
    height: 100%;
    font-family: Argentum, sans-serif;
    font-size: 2rem;
    text-align: center;
    border-radius: var(--radius)
}

.dialog-cashback-bonus-submit {
    font-size: 1.5rem;
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #b33f00
}

.dialog-cashback-bonus-submit:active,
.dialog-cashback-bonus-submit:focus {
    background: #d94c00;
    box-shadow: 0 0 1rem #d94c00
}

.dialog-cashback-24 {
    display: grid;
    grid-template-columns: 3.6rem 1fr;
    grid-gap: var(--medium-gap);
    margin: var(--large-gap) 0
}

.dialog-cashback-24-icon {
    width: 3.6rem;
    height: 3.6rem;
    fill: #717171
}

.dialog-cashback-24-text {
    color: #adadad
}

.dialog-cashback-conditions-heading {
    margin: 1.8rem 0
}

.dialog-cashback-condition {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin: 1.2rem 0;
    color: #9f9fa1
}

.dialog-cashback-condition-status {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    margin-right: 1.2rem;
    background: #444
}

.dialog-cashback-condition-status.on {
    background: #ffac0c;
    box-shadow: 0 0 .75rem #ffac0c
}

.dialog-cashback-condition>.money {
    margin-left: .5rem;
    font-family: Argentum, sans-serif;
    font-weight: var(--light-font-weight)
}

@media(hover:hover) and (pointer:fine) {
    .dialog-cashback-bonus-submit:hover {
        background: #d94c00;
        box-shadow: 0 0 1rem #d94c00
    }
}

@media screen and (min-width:540px) {
    .dialog-cashback-form {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr;
        grid-gap: 3.26vw;
        height: 9.79vw;
        margin: 0
    }

    .dialog-cashback-bonus:after {
        right: -2.04vw;
        bottom: auto;
        border-top: 2.04vw solid transparent;
        border-left: 2.04vw solid #13151d;
        border-bottom: 2.04vw solid transparent
    }

    .dialog-cashback-bonus-field {
        font-size: 3.26vw
    }

    .dialog-cashback-bonus-submit {
        font-size: 2.04vw
    }

    .dialog-cashback-24 {
        grid-template-columns: 6.53vw 1fr;
        margin: 6.53vw 0
    }

    .dialog-cashback-24-icon {
        width: 4.9vw;
        height: 4.9vw
    }

    .dialog-cashback-condition,
    .dialog-cashback-conditions-heading {
        margin: 2.18vw 0
    }

    .dialog-cashback-condition-status {
        width: 1.36vw;
        height: 1.36vw;
        margin-right: 2.18vw
    }
}

@media screen and (min-width:768px) {
    .dialog-cashback-form {
        grid-gap: 2.4rem;
        height: 7.2rem
    }

    .dialog-cashback-bonus:after {
        right: -1.5rem;
        border-top: 1.5rem solid transparent;
        border-left: 1.5rem solid #13151d;
        border-bottom: 1.5rem solid transparent
    }

    .dialog-cashback-bonus-field {
        font-size: 2.4rem
    }

    .dialog-cashback-bonus-submit {
        font-size: 1.5rem
    }

    .dialog-cashback-24 {
        grid-template-columns: 4.8rem 1fr;
        margin: 4.8rem 0
    }

    .dialog-cashback-24-icon {
        width: 3.6rem;
        height: 3.6rem
    }

    .dialog-cashback-conditions-heading {
        margin: 2.4rem 0
    }

    .dialog-cashback-condition {
        font-size: 1.4rem;
        margin: 1.6rem 0
    }

    .dialog-cashback-condition-status {
        width: 1rem;
        height: 1rem;
        margin-right: 1.6rem
    }
}

.dialog-giveaway {
    --dialog-giveaway-inner-gap: 4rem;
    display: grid;
    grid-template-areas: "dialog-giveaway-main-module dialog-giveaway-item-module" "dialog-giveaway-lists-module dialog-giveaway-lists-module";
    grid-template-columns: 3fr 20rem;
    grid-template-rows: 29rem 1fr;
    grid-gap: var(--small-gap);
    width: 88rem;
    height: 75rem
}

.dialog-module {
    background: var(--modal-background)
}

.dialog-giveaway-main-module {
    grid-area: dialog-giveaway-main-module;
    display: grid;
    grid-template-columns: 1fr 27.6rem;
    border-radius: var(--radius)
}

.dialog-giveaway-item-module {
    grid-area: dialog-giveaway-item-module;
    padding: var(--inner-gap) 0;
    border-radius: var(--radius);
    background: var(--modal-background)
}

.dialog-giveaway-item-module.contraband,
.dialog-giveaway-item-module.exotic {
    background: radial-gradient(at 12rem 0, rgba(197, 139, 61, .8), rgba(197, 139, 61, .6), rgba(197, 139, 61, .3), var(--modal-background), var(--modal-background), var(--modal-background), var(--modal-background))
}

.dialog-giveaway-item-module.covert,
.dialog-giveaway-item-module.extraordinary,
.dialog-giveaway-item-module.knives {
    background: radial-gradient(at 12rem 0, rgba(148, 68, 63, .8), rgba(148, 68, 63, .6), rgba(148, 68, 63, .3), var(--modal-background), var(--modal-background), var(--modal-background), var(--modal-background))
}

.dialog-giveaway-item-module.classified {
    background: radial-gradient(at 12rem 0, rgba(137, 46, 158, .8), rgba(137, 46, 158, .6), rgba(137, 46, 158, .3), var(--modal-background), var(--modal-background), var(--modal-background), var(--modal-background))
}

.dialog-giveaway-item-module.restricted {
    background: radial-gradient(at 12rem 0, rgba(86, 52, 174, .8), rgba(86, 52, 174, .6), rgba(86, 52, 174, .3), var(--modal-background), var(--modal-background), var(--modal-background), var(--modal-background))
}

.dialog-giveaway-item-module.mil-spec,
.dialog-giveaway-item-module.mil-spec-grade {
    background: radial-gradient(at 12rem 0, rgba(57, 73, 167, .8), rgba(57, 73, 167, .6), rgba(57, 73, 167, .3), var(--modal-background), var(--modal-background), var(--modal-background), var(--modal-background))
}

.dialog-giveaway-item-module.industrial,
.dialog-giveaway-item-module.industrial-grade {
    background: radial-gradient(at 12rem 0, rgba(36, 88, 144, .8), rgba(36, 88, 144, .6), rgba(36, 88, 144, .3), var(--modal-background), var(--modal-background), var(--modal-background), var(--modal-background))
}

.dialog-giveaway-item-module.base,
.dialog-giveaway-item-module.base-grade,
.dialog-giveaway-item-module.consumer,
.dialog-giveaway-item-module.consumer-grade {
    background: radial-gradient(at 12rem 0, hsla(0, 0%, 56.5%, .8), hsla(0, 0%, 56.5%, .6), hsla(0, 0%, 56.5%, .3), var(--modal-background), var(--modal-background), var(--modal-background), var(--modal-background))
}

.dialog-giveaway-lists-module {
    --giveaway-participants-height: calc(var(--small-gap)*5 + 20rem + var(--small-gap)*5 + var(--tiny-gap)*5 - var(--tiny-gap));
    grid-area: dialog-giveaway-lists-module;
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    grid-column-gap: var(--dialog-giveaway-inner-gap);
    padding: var(--dialog-giveaway-inner-gap);
    border-radius: var(--radius)
}

.dialog-giveaway-main-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--dialog-giveaway-inner-gap) 0 3.6rem var(--dialog-giveaway-inner-gap)
}

.dialog-giveaway-main-heading {
    font-size: 2.9rem;
    font-weight: var(--deep-font-weight)
}

.dialog-giveaway-countdown {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 1.8rem 0
}

.dialog-giveaway-countdown-widget {
    width: 18.7rem;
    height: 18.7rem;
    border-radius: 50%;
    box-shadow: 0 0 5rem hsla(0, 0%, 100%, .15), inset 0 0 10rem hsla(0, 0%, 100%, .22)
}

.dialog-giveaway-countdown-button {
    width: 19rem;
    height: 3.9rem;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: none;
    outline: none;
    color: #fff;
    background: linear-gradient(90deg, #de7e08, #ff3633)
}

.dialog-giveaway-countdown-button:active,
.dialog-giveaway-countdown-button:focus,
.dialog-giveaway-countdown-button:hover {
    color: #fff;
    background: linear-gradient(90deg, #de7e08, #ff3633);
    background: #de7e08;
    box-shadow: 0 0 .5rem #de7e08
}

.giveaway-section {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr var(--giveaway-participants-height)
}

.giveaway-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.giveaway-section-heading {
    text-align: left;
    font-size: 1.8rem
}

.giveaway-section-heading-users {
    display: flex;
    align-items: center;
    color: #fbb700
}

.giveaway-section-heading-user-icon {
    width: 1.2rem;
    height: 1.2rem;
    margin-right: 1rem;
    fill: #fbb700
}

.giveaway-content-header,
.participant {
    display: grid;
    grid-template-columns: 4rem 2fr 1fr;
    grid-gap: 1rem
}

.giveaway-content-header {
    padding: var(--small-gap)
}

.giveaway-content-header-column {
    text-transform: uppercase;
    color: #555961
}

.history .participant,
.history>.giveaway-content-header {
    grid-template-columns: 4rem 14rem 1fr 10rem
}

.participant-item {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.participant-item-image {
    height: 5rem
}

.dialog-chat-rules {
    padding: var(--dialog-inner-gap)
}

.dialog-chat-rules-emblems {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 4.35vw 0 6.53vw
}

.dialog-chat-rules-icon {
    width: 11.29vw;
    height: 11.29vw;
    fill: var(--emblem-color)
}

.dialog-chat-rules-main-icon {
    width: 20.67vw;
    height: 20.67vw;
    margin: 0 7.48vw;
    fill: var(--dialog-content-highlight-color)
}

.dialog-chat-rules-list {
    counter-reset: rulesCounter;
    text-align: left;
    padding-left: 2.5rem
}

.dialog-chat-rules-list-item {
    list-style: none;
    color: var(--dialog-content-color);
    margin: 1rem 0
}

.dialog-chat-rules-list-item:before {
    counter-increment: rulesCounter;
    content: counter(rulesCounter) ".";
    display: inline-block;
    width: 1rem;
    margin-left: -2.5rem;
    margin-right: 1rem;
    text-align: center;
    color: var(--dialog-content-highlight-color)
}

@media screen and (min-width:768px) {
    .dialog-chat-rules-emblems {
        margin: 1.2rem 0 4.8rem
    }

    .dialog-chat-rules-icon {
        width: 8.3rem;
        height: 8.3rem
    }

    .dialog-chat-rules-main-icon {
        width: 15.2rem;
        height: 15.2rem;
        margin: 0 5.5rem
    }

    .dialog-chat-rules-list-item {
        margin: 1.5rem 0
    }
}

.dialog-crash-rules {
    padding: var(--dialog-inner-gap)
}

.dialog-crash-rules-list {
    counter-reset: rulesCounter;
    text-align: left;
    padding-left: 2.5rem
}

.dialog-crash-rules-list-item {
    list-style: none;
    color: var(--dialog-content-color);
    margin: 1rem 0
}

.dialog-crash-rules-list-item:before {
    counter-increment: rulesCounter;
    content: counter(rulesCounter) ".";
    display: inline-block;
    width: 1rem;
    margin-left: -2.5rem;
    margin-right: 1rem;
    text-align: center;
    color: var(--dialog-content-highlight-color)
}

@media screen and (min-width:768px) {
    .dialog-crash-rules-list-item {
        margin: 1.5rem 0
    }
}

.dialog-chat-cmd {
    padding: var(--dialog-inner-gap)
}

.dialog-chat-cmd-commands {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center
}

.dialog-chat-cmd-container {
    --command-height: 4rem;
    display: grid;
    grid-template-areas: "dialog-chat-cmd-command dialog-chat-cmd-command-button" "dialog-chat-cmd-command-description dialog-chat-cmd-command-description";
    grid-template-columns: 1fr var(--command-height);
    grid-template-rows: var(--command-height) 1fr;
    grid-gap: var(--inner-gap);
    width: 100%;
    margin-bottom: var(--outer-gap);
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--dialog-box-background)
}

.dialog-chat-cmd-command {
    grid-area: dialog-chat-cmd-command;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--command-height);
    color: var(--dialog-content-highlight-color);
    border-radius: var(--radius);
    background: #2f2f34
}

.dialog-chat-cmd-description {
    grid-area: dialog-chat-cmd-command-description;
    text-align: left;
    color: #82848e
}

.dialog-chat-cmd-button {
    grid-area: dialog-chat-cmd-command-button;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--command-height);
    height: var(--command-height);
    border-radius: 50%;
    border: none;
    outline: none;
    background: #2f313f;
    cursor: pointer
}

.dialog-chat-cmd-button:active,
.dialog-chat-cmd-button:focus {
    background: #393b4a
}

.dialog-chat-cmd-button:disabled {
    cursor: default
}

.dialog-chat-cmd-button-icon {
    width: 1.9rem;
    height: 1.9rem;
    fill: #82848e
}

.dialog-chat-cmd-button:active>.dialog-chat-cmd-button-icon,
.dialog-chat-cmd-button:focus>.dialog-chat-cmd-button-icon {
    fill: #b9bbc6
}

.dialog-chat-cmd-call-to-action {
    font-size: 1.6rem;
    color: #7f818b
}

@media(hover:hover) and (pointer:fine) {
    .dialog-chat-cmd-button:hover {
        background: #393b4a
    }

    .dialog-chat-cmd-button:hover>.dialog-chat-cmd-button-icon {
        fill: #b9bbc6
    }

    .dialog-chat-cmd-button:disabled:hover>.dialog-chat-cmd-button-icon {
        fill: #82848e
    }
}

@media screen and (min-width:540px) {
    .dialog-chat-cmd-commands {
        flex-direction: row;
        justify-content: space-around;
        align-items: stretch;
        margin: 0 0 4.62vw
    }

    .dialog-chat-cmd-container {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        width: 26.11vw;
        margin-bottom: 0;
        padding: 1.63vw 1.63vw 2.72vw
    }

    .dialog-chat-cmd-balance,
    .dialog-chat-cmd-stats {
        height: auto
    }

    .dialog-chat-cmd-command {
        width: 100%;
        height: 6.8vw
    }

    .dialog-chat-cmd-description {
        text-align: center
    }

    .dialog-chat-cmd-button {
        width: 5.44vw;
        height: 5.44vw
    }

    .dialog-chat-cmd-button-icon {
        width: 2.58vw;
        height: 2.58vw
    }
}

@media screen and (min-width:768px) {
    .dialog-chat-cmd {
        font-size: var(--base-font-size)
    }

    .dialog-chat-cmd-commands {
        justify-content: center;
        margin: 0 0 3.4rem
    }

    .dialog-chat-cmd-container {
        width: 19.2rem;
        padding: 1.2rem 1.2rem 2rem
    }

    .dialog-chat-cmd-stats {
        margin-right: 1.6rem
    }

    .dialog-chat-cmd-command {
        height: 5rem
    }

    .dialog-chat-cmd-button {
        width: 4rem;
        height: 4rem
    }

    .dialog-chat-cmd-button-icon {
        width: 1.9rem;
        height: 1.9rem
    }

    .dialog-chat-cmd-call-to-action {
        font-size: 1.8rem
    }
}

.dialog-chat-message {
    padding: var(--dialog-inner-gap)
}

.dialog-chat-message-choose-operation,
.dialog-chat-message-mute-duration,
.dialog-chat-message-mute-reason {
    margin-bottom: var(--medium-gap)
}

.dialog-chat-message-emblem {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 0 var(--medium-gap)
}

.dialog-chat-message-icon {
    width: 8rem;
    height: 8rem;
    fill: var(--emblem-color)
}

.dialog-chat-message-radio {
    display: none
}

.dialog-chat-message-radio-facade,
.dialog-chat-message-radio-label {
    border-radius: 20rem
}

.dialog-chat-message-radio-facade {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.2rem;
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    border: .2rem solid var(--radio-button-color);
    color: var(--radio-button-color);
    background: #13151d;
    cursor: pointer
}

.dialog-chat-message-radio:active+.dialog-chat-message-radio-facade,
.dialog-chat-message-radio:focus+.dialog-chat-message-radio-facade {
    border: .2rem solid var(--radio-button-hover-color);
    color: var(--radio-button-hover-color)
}

.dialog-chat-message-radio:checked:disabled+.dialog-chat-message-radio-facade,
.dialog-chat-message-radio:disabled+.dialog-chat-message-radio-facade {
    border: .2rem solid var(--radio-button-disabled-color);
    color: var(--radio-button-disabled-color)
}

.dialog-chat-message-radio:checked+.dialog-chat-message-radio-facade {
    border: .2rem solid var(--radio-button-checked-color);
    color: var(--radio-button-checked-color)
}

.dialog-chat-message-operations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 4.5rem;
    grid-gap: var(--small-gap);
    width: 100%
}

.dialog-chat-message-durations {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 4.5rem);
    grid-gap: var(--small-gap);
    width: 100%
}

.dialog-chat-message-mute-reason {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.dialog-chat-message-reason {
    --icon-size: 1.6rem;
    --h-gap: 1.6rem;
    width: 100%;
    max-width: 100%;
    height: 4.5rem;
    margin: 0;
    padding: 0 calc(var(--h-gap) + var(--icon-size)) 0 var(--h-gap);
    font-size: 1.6rem;
    font-family: Montserrat, sans-serif;
    font-weight: var(--base-font-weight);
    line-height: 1.3;
    -moz-text-align-last: center;
    text-align-last: center;
    border: none;
    outline: none;
    border-radius: var(--radius);
    color: #414553;
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-color: #14161e;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><path fill="%23414553" d="M 4,6 0,10 16,26 32,10 28,6 16,18 Z" /></svg>'), linear-gradient(180deg, #14161e 0, #14161e);
    background-repeat: no-repeat, repeat;
    background-position: right var(--h-gap) top 50%, 0 0;
    background-size: var(--icon-size) auto, 100%
}

.dialog-chat-message-reason::-ms-expand {
    display: none
}

.dialog-chat-message-reason:hover {
    border-color: #414553
}

.dialog-chat-message-reason:focus {
    color: #999;
    outline: none
}

.dialog-chat-message-reason option {
    font-weight: 400
}

:root:lang(ar) .dialog-chat-message-reason,
:root:lang(iw) .dialog-chat-message-reason,
[dir=rtl] .dialog-chat-message-reason {
    padding: 0 var(--h-gap) 0 calc(var(--h-gap) + var(--icon-size));
    background-position: var(--icon-size) top 50%, 0 0
}

.dialog-chat-message-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 4.5rem;
    grid-gap: var(--small-gap);
    width: 100%
}

.dialog-chat-message-save-button,
.dialog-chat-message-unmute-button {
    font-size: 1.2rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #fff
}

.dialog-chat-message-unmute-button {
    background: #2d313d
}

.dialog-chat-message-save-button {
    background: #9f5403
}

@media(hover:hover) and (pointer:fine) {
    .dialog-chat-message-radio-facade:hover {
        border: .2rem solid var(--radio-button-hover-color);
        color: var(--radio-button-hover-color)
    }
}

@media screen and (min-width:540px) {

    .dialog-chat-message-choose-operation,
    .dialog-chat-message-mute-duration,
    .dialog-chat-message-mute-reason {
        margin-bottom: 4.08vw
    }

    .dialog-chat-message-emblem {
        margin: 0 0 6.8vw
    }

    .dialog-chat-message-icon {
        width: 17vw;
        height: 17vw
    }

    .dialog-chat-message-operations {
        grid-template-rows: 8.84vw;
        grid-gap: 1.77vw
    }

    .dialog-chat-message-radio-facade {
        font-size: 1.9vw
    }

    .dialog-chat-message-durations {
        grid-template-columns: repeat(3, 1fr) repeat(2, 1.1fr) 1.5fr;
        grid-template-rows: 4.5rem;
        grid-gap: var(--small-gap)
    }

    .dialog-chat-message-reason {
        --icon-size: 2.18vw;
        --h-gap: 2.18vw;
        width: 53.31vw;
        height: 8.84vw
    }

    .dialog-chat-message-buttons {
        grid-template-rows: 8.84vw;
        grid-gap: 1.77vw
    }

    .dialog-chat-message-save-button,
    .dialog-chat-message-unmute-button {
        font-size: 1.9vw
    }
}

@media screen and (min-width:768px) {

    .dialog-chat-message-choose-operation,
    .dialog-chat-message-mute-duration,
    .dialog-chat-message-mute-reason {
        margin-bottom: 3rem
    }

    .dialog-chat-message-emblem {
        margin: 0 0 5rem
    }

    .dialog-chat-message-icon {
        width: 12.5rem;
        height: 12.5rem
    }

    .dialog-chat-message-operations {
        grid-template-rows: 6.5rem;
        grid-gap: 1.3rem
    }

    .dialog-chat-message-radio-facade {
        font-size: var(--base-font-size)
    }

    .dialog-chat-message-durations {
        grid-template-rows: 6.5rem;
        grid-gap: 1.3rem
    }

    .dialog-chat-message-reason {
        --icon-size: 1.6rem;
        --h-gap: 1.6rem;
        width: 39.2rem;
        height: 6.5rem
    }

    .dialog-chat-message-buttons {
        grid-template-rows: 6.5rem;
        grid-gap: 1.3rem
    }

    .dialog-chat-message-save-button,
    .dialog-chat-message-unmute-button {
        font-size: var(--base-font-size)
    }
}

.dialog-deposit {
    padding: var(--dialog-inner-gap)
}

.dialog-deposit-amount,
.dialog-deposit-buttons,
.dialog-deposit-promo {
    margin-bottom: var(--medium-gap)
}

#dialog-deposit-amount-field {
    width: 69%;
    height: 5rem;
    margin: 0 auto;
    font-family: Argentum, sans-serif;
    font-size: 2.5rem;
    text-align: center
}

.dialog-skins-withdraw-type-button-icon-wrapper {
    height: 100%;
    display: flex;
    align-items: center
}

.dialog-deposit-choose-system {
    margin-bottom: var(--small-gap)
}

.dialog-skins-withdraw-type-systems {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    grid-auto-rows: 10rem;
    grid-gap: var(--small-gap);
    width: 100%
}

.dialog-deposit-systems {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 8rem;
    grid-gap: 1.3rem;
    width: 100%
}

.dialog-deposit-system-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: var(--radius);
    background: #262834;
    cursor: pointer
}

.jc-space-around {
    justify-content: space-around
}

.dialog-deposit-system-radio {
    display: none
}

.dialog-deposit-system-icon {
    width: 80%;
    max-height: 80%;
    fill: #474a59
}

.dialog-deposit-system-radio:checked+.dialog-deposit-system-button {
    border: .2rem solid var(--radio-button-checked-color)
}

.dialog-deposit-system-radio:checked:disabled+.dialog-deposit-system-button,
.dialog-deposit-system-radio:disabled+.dialog-deposit-system-button {
    background: var(--button-disabled-background);
    border: none;
    cursor: default
}

.dialog-deposit-system-radio:checked+.dialog-deposit-system-button>.dialog-deposit-system-icon {
    fill: var(--radio-button-checked-color)
}

.dialog-deposit-system-radio:disabled+.dialog-deposit-system-button>.dialog-deposit-system-icon {
    fill: #262834
}

.dialog-deposit-buttons {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: 4.5rem;
    grid-gap: var(--small-gap);
    width: 100%
}

.dialog-skin-withdraw-type-buttons {
    grid-template-columns: repeat(1, 1fr)
}

.dialog-deposit-money-button,
.dialog-deposit-skins-button {
    font-size: 1.2rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #fff
}

.dialog-deposit-money-button {
    background: #c89203
}

.dialog-deposit-skins-button {
    background: #591f82
}

.dialog-deposit-promocode {
    display: grid;
    grid-template-columns: 1fr 6.5rem;
    grid-template-rows: 4.5rem;
    grid-gap: 1.3rem;
    width: 100%
}

.dialog-deposit-promocode-button {
    font-size: var(--base-font-size);
    text-transform: uppercase;
    color: #fff;
    background: #c79303
}

.dialog-deposit-footnote {
    font-size: 1.2rem;
    color: #404350
}

@media screen and (min-width:540px) {

    .dialog-deposit-amount,
    .dialog-deposit-buttons,
    .dialog-deposit-promo {
        margin-bottom: 4.08vw
    }

    #dialog-deposit-amount-field {
        height: 11.15vw;
        font-size: 4.08vw
    }

    .dialog-deposit-choose-system {
        margin-bottom: 1.77vw
    }

    .dialog-deposit-systems {
        grid-auto-rows: 10.88vw;
        grid-gap: 1.77vw
    }

    .dialog-deposit-buttons {
        grid-template-rows: 8.84vw;
        grid-gap: 1.77vw
    }

    .dialog-deposit-footnote,
    .dialog-deposit-money-button,
    .dialog-deposit-skins-button {
        font-size: 1.9vw
    }

    .dialog-deposit-promocode {
        grid-template-columns: 1fr 8.84vw;
        grid-template-rows: 7.75vw;
        grid-gap: 1.77vw
    }

    .dialog-deposit-promocode-button {
        font-size: 1.9vw
    }
}

@media screen and (min-width:768px) {

    .dialog-deposit-amount,
    .dialog-deposit-buttons,
    .dialog-deposit-promo {
        margin-bottom: 3rem
    }

    #dialog-deposit-amount-field {
        height: 8.2rem;
        font-size: 3rem
    }

    .dialog-deposit-choose-system {
        margin-ottom: 1.3rem
    }

    .dialog-deposit-systems {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        grid-auto-rows: 9rem;
        grid-gap: 1.3rem;
        width: 100%;
        overflow: hidden
    }

    .dialog-deposit-buttons {
        grid-template-rows: 4.5rem;
        grid-gap: 1.3rem
    }

    .dialog-deposit-footnote,
    .dialog-deposit-money-button,
    .dialog-deposit-skins-button {
        font-size: var(--base-font-size)
    }

    .dialog-deposit-promocode {
        grid-template-columns: 1fr 6.5rem;
        grid-template-rows: 5.7rem;
        grid-gap: 1.3rem
    }

    .dialog-deposit-promocode-button {
        font-size: var(--base-font-size)
    }
}

@media screen and (min-width:1280px) {

    .dialog-deposit-amount,
    .dialog-deposit-buttons,
    .dialog-deposit-promo {
        margin-bottom: 3rem
    }

    #dialog-deposit-amount-field {
        height: 8.2rem;
        font-size: 3rem
    }

    b .dialog-deposit-choose-system {
        margin-ottom: 1.3rem
    }

    .dialog-deposit-systems {
        display: grid;
        grid-template-columns: repeat(2, 2fr);
        grid-auto-rows: 9rem;
        grid-gap: 1.3rem;
        width: 100%;
        overflow: hidden
    }

    .dialog-deposit-buttons {
        grid-template-rows: 4.5rem;
        grid-gap: 1.3rem
    }

    .dialog-deposit-footnote,
    .dialog-deposit-money-button,
    .dialog-deposit-skins-button {
        font-size: var(--base-font-size)
    }

    .dialog-deposit-promocode {
        grid-template-columns: 1fr 6.5rem;
        grid-template-rows: 5.7rem;
        grid-gap: 1.3rem
    }

    .dialog-deposit-promocode-button {
        font-size: var(--base-font-size)
    }
}

@media screen and (min-width:1920px) {

    .dialog-deposit-amount,
    .dialog-deposit-buttons,
    .dialog-deposit-promo {
        margin-bottom: 3rem
    }

    #dialog-deposit-amount-field {
        height: 8.2rem;
        font-size: 3rem
    }

    b .dialog-deposit-choose-system {
        margin-ottom: 1.3rem
    }

    .dialog-deposit-systems {
        display: grid;
        grid-template-columns: repeat(3, 2fr);
        grid-auto-rows: 8rem;
        grid-gap: 1.3rem;
        width: 100%;
        overflow: hidden
    }

    .dialog-deposit-buttons {
        grid-template-rows: 4.5rem;
        grid-gap: 1.3rem
    }

    .dialog-deposit-footnote,
    .dialog-deposit-money-button,
    .dialog-deposit-skins-button {
        font-size: var(--base-font-size)
    }

    .dialog-deposit-promocode {
        grid-template-columns: 1fr 6.5rem;
        grid-template-rows: 5.7rem;
        grid-gap: 1.3rem
    }

    .dialog-deposit-promocode-button {
        font-size: var(--base-font-size)
    }
}

.dialog-withdrawal {
    padding: var(--dialog-inner-gap)
}

.dialog-withdrawal-account,
.dialog-withdrawal-amount,
.dialog-withdrawal-choose-system,
.dialog-withdrawal-confirm,
.dialog-withdrawal-submit {
    margin-bottom: var(--medium-gap)
}

#dialog-withdrawal-amount-field {
    width: 69%;
    height: 5rem;
    margin: 0 auto;
    font-family: Argentum, sans-serif;
    font-size: 2.5rem;
    text-align: center
}

.dialog-withdrawal-systems {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 5rem;
    grid-gap: var(--small-gap);
    width: 100%
}

.dialog-button-tip-icon {
    width: 12px;
    height: 12px;
    position: absolute;
    left: .3rem;
    bottom: .3rem
}

.dialog-withdrawal-system-button {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    border-radius: var(--radius);
    background: #262834;
    cursor: pointer
}

.dialog-withdrawal-system-radio {
    display: none
}

.dialog-withdrawal-system-icon {
    width: 80%;
    max-height: 80%;
    fill: #474a59
}

.dialog-withdrawal-system-radio:checked+.dialog-withdrawal-system-button {
    border: .2rem solid var(--radio-button-checked-color)
}

.dialog-withdrawal-system-radio:disabled+.dialog-withdrawal-system-button {
    background: var(--button-disabled-background);
    cursor: default
}

.dialog-withdrawal-system-radio:checked+.dialog-withdrawal-system-button>.dialog-withdrawal-system-icon {
    fill: var(--radio-button-checked-color)
}

.dialog-withdrawal-system-radio:disabled+.dialog-withdrawal-system-button>.dialog-withdrawal-system-icon {
    fill: #262834
}

#dialog-withdrawal-account-field {
    width: 100%;
    height: 4.5rem;
    font-size: 2rem;
    font-weight: var(--base-font-weight);
    text-align: center;
    color: #393b4c
}

.dialog-withdrawal-confirm {
    margin: 2.2rem 0;
    font-size: 1.2rem;
    font-weight: var(--base-font-weight);
    text-align: left
}

.dialog-withdrawal-confirm-checkbox {
    display: none
}

.dialog-withdrawal-confirm-label {
    display: flex;
    align-items: center
}

.dialog-withdrawal-confirm-checkbox+.dialog-withdrawal-confirm-label:before {
    content: "";
    width: 1.5rem;
    height: 1.5rem;
    margin-right: 1rem;
    border: .3rem solid #0f1319;
    background: #0f1319;
    cursor: pointer
}

.dialog-withdrawal-confirm-checkbox:checked+.dialog-withdrawal-confirm-label:before {
    background: var(--radio-button-checked-color)
}

.dialog-withdrawal-submit-button {
    width: 100%;
    height: 4.5rem;
    font-size: 1.2rem;
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #c89203
}

@media screen and (min-width:540px) {

    .dialog-withdrawal-account,
    .dialog-withdrawal-amount,
    .dialog-withdrawal-choose-system,
    .dialog-withdrawal-confirm,
    .dialog-withdrawal-submit {
        margin-bottom: 4.08vw
    }

    #dialog-withdrawal-amount-field {
        height: 11.15vw;
        font-size: 4.08vw
    }

    .dialog-withdrawal-systems {
        grid-auto-rows: 10.88vw;
        grid-gap: 1.77vw
    }

    #dialog-withdrawal-account-field {
        height: 8.84vw;
        font-size: 3.4vw
    }

    .dialog-withdrawal-confirm {
        margin: 6.12vw 0;
        font-size: 1.9vw
    }

    .dialog-withdrawal-confirm-checkbox+.dialog-withdrawal-confirm-label:before {
        width: 2.45vw;
        height: 2.45vw;
        margin-right: 1.36vw;
        border: .4vw solid #0f1319
    }

    .dialog-withdrawal-submit-button {
        height: 8.84vw;
        font-size: 1.9vw
    }
}

@media screen and (min-width:768px) {

    .dialog-withdrawal-account,
    .dialog-withdrawal-amount,
    .dialog-withdrawal-choose-system,
    .dialog-withdrawal-confirm,
    .dialog-withdrawal-submit {
        margin-bottom: 3rem
    }

    #dialog-withdrawal-amount-field {
        height: 8.2rem;
        font-size: 3rem
    }

    .dialog-withdrawal-systems {
        grid-auto-rows: 8rem;
        grid-gap: 1.3rem
    }

    #dialog-withdrawal-account-field {
        height: 6.5rem;
        font-size: 2.5rem
    }

    .dialog-withdrawal-confirm {
        margin: 2.5rem 0;
        font-size: var(--base-font-size)
    }

    .dialog-withdrawal-confirm-checkbox+.dialog-withdrawal-confirm-label:before {
        width: 1.8rem;
        height: 1.8rem;
        margin-right: 1rem;
        border: .4rem solid #0f1319
    }

    .dialog-withdrawal-submit-button {
        height: 6.5rem;
        font-size: var(--base-font-size)
    }
}

.dialog-provably-fair {
    padding: var(--dialog-inner-gap)
}

.dialog-provably-fair-table {
    margin-bottom: var(--medium-gap);
    overflow: hidden;
    border-spacing: 0;
    border-radius: var(--radius);
    border: .2rem solid #303446
}

.dialog-provably-fair-table-row {
    height: 7rem
}

.dialog-provably-fair-table-row:nth-child(2n) {
    background: #1f212d
}

.dialog-provably-fair-table-row:nth-child(odd) {
    background: #242735
}

.dialog-provably-fair-table-label {
    padding: var(--inner-gap);
    text-align: right;
    text-transform: uppercase;
    color: var(--label-color)
}

.dialog-provably-fair-table-value {
    padding: var(--inner-gap);
    font-family: Lekton, monospace;
    font-size: 1.7rem;
    text-align: left
}

.dialog-provably-fair-table-label,
.dialog-provably-fair-table-value {
    border-bottom: .2rem solid #303446
}

.dialog-provably-fair-table-row:last-child>.dialog-provably-fair-table-label,
.dialog-provably-fair-table-row:last-child>.dialog-provably-fair-table-value {
    border: none
}

@media screen and (min-width:540px) {
    .dialog-provably-fair-table {
        margin-bottom: 4.08vw
    }
}

@media screen and (min-width:768px) {
    .dialog-provably-fair-table {
        margin-bottom: 3rem
    }
}

.dialog-settings {
    padding: 1rem
}

.dialog-settings .dialog-settings__icon {
    width: 7rem;
    height: 5rem;
    -o-object-fit: contain;
    object-fit: contain
}

.dialog-settings .dialog-settings__item {
    justify-content: start;
    margin-bottom: 1rem
}

.dialog-settings .dialog-settings__item:last-child {
    margin-bottom: 0
}

.header-deposit-place.desktop-only {
    display: none
}

.layout-header {
    position: fixed;
    width: 100%;
    display: grid;
    grid-template-areas: "logo header-account menu-button";
    grid-template-columns: var(--header-height) 1fr var(--header-height);
    height: var(--header-height);
    background: #13151d;
    z-index: 10
}

.header-logo {
    grid-area: logo;
    margin: auto
}

.header-logo,
.header-logo-link,
.show-nav-button {
    display: flex;
    justify-content: center;
    align-items: center
}

.header-logo-link {
    width: 100%;
    height: 100%;
    overflow: hidden
}

.header-logo-image {
    width: 80%;
    height: 80%
}

.show-nav-button {
    grid-area: menu-button;
    width: var(--header-height);
    height: var(--header-height);
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer
}

.show-nav-icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--icon-inactive-fill);
    transition: background var(--coloring-transition), fill var(--coloring-transition)
}

.show-nav-button:active>.show-nav-icon,
.show-nav-button:focus>.show-nav-icon {
    fill: var(--icon-hover-fill)
}

@media(hover:hover) and (pointer:fine) {
    .show-nav-button:hover>.show-nav-icon {
        fill: var(--icon-hover-fill)
    }
}

@media screen and (min-width:992px) {
    .header-deposit-place.desktop-only {
        grid-area: header-deposit;
        display: block
    }

    .layout-header {
        grid-template-areas: "logo main-nav header-deposit . header-account";
        grid-template-columns: var(--side-bar-width) 1fr 21rem var(--large-gap) var(--chat-width);
        background: transparent
    }

    .header-logo-image,
    .header-logo-link {
        width: 6rem;
        height: 6rem
    }

    .show-nav-button {
        display: none
    }
}

#main-nav {
    --nav-mobile-width: 75%;
    grid-area: main-nav;
    position: fixed;
    display: flex;
    flex-direction: column;
    top: 0;
    bottom: 0;
    right: calc(0% - var(--nav-mobile-width));
    width: var(--nav-mobile-width);
    background: #191d25;
    transition: right var(--nav-slide-transition)
}

.-show-main-nav #main-nav {
    right: 0;
    box-shadow: 0 0 1.5rem #000
}

.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding-left: var(--medium-gap);
    text-transform: uppercase;
    background: transparent
}

.nav-heading {
    font-size: 1.5rem;
    font-weight: var(--base-font-weight);
    letter-spacing: var(--wide-font-letter-spacing);
    color: var(--box-heading-color)
}

.hide-nav-button {
    position: relative;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-height);
    height: var(--header-height);
    border: none;
    outline: none;
    background: transparent;
    cursor: pointer
}

.hide-nav-icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--icon-inactive-fill);
    transition: fill var(--coloring-transition)
}

.hide-nav-button:active>.hide-nav-icon,
.hide-nav-button:focus>.hide-nav-icon {
    fill: var(--icon-hover-fill)
}

.nav-menu,
.nav-menu-item,
nav {
    display: flex;
    flex-direction: column
}

.nav-menu-item {
    text-align: left
}

.nav-menu-link {
    position: relative;
    display: flex;
    align-items: center;
    height: 4rem;
    padding: 0 var(--medium-gap);
    font-size: 1.5rem;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--link-inactive-color);
    border: none;
    outline: none;
    transition: background var(--coloring-transition), color var(--coloring-transition)
}

.nav-menu-link:active,
.nav-menu-link:focus,
.router-link-exact-active.nav-menu-link {
    color: var(--link-hover-color);
    background: #1f242e
}

.nav-menu-link:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: .5rem;
    height: 100%;
    background: transparent;
    transition: background var(--coloring-transition)
}

.nav-menu-link:active:before,
.nav-menu-link:focus:before,
.router-link-exact-active.nav-menu-link:before {
    background: var(--icon-hover-fill)
}

@media(hover:hover) and (pointer:fine) {
    .hide-nav-button:hover>.hide-nav-icon {
        fill: var(--icon-hover-fill)
    }

    .nav-menu-link:hover {
        color: var(--link-hover-color);
        background: #1f242e
    }

    .nav-menu-link:hover:before {
        background: var(--icon-hover-fill)
    }
}

@media screen and (min-width:540px) {
    #main-nav {
        --nav-mobile-width: 50%
    }
}

@media screen and (min-width:768px) {
    #main-nav {
        --nav-mobile-width: 35%
    }
}

@media screen and (min-width:992px) {
    #main-nav {
        position: relative;
        flex-direction: row;
        align-items: center;
        top: 0;
        bottom: auto;
        right: 0;
        height: var(--header-height);
        background: transparent;
        transition: right 0ms var(--slide-function)
    }

    .nav-header {
        display: none
    }

    .nav-menu {
        flex-direction: row;
        margin-left: 8.5rem
    }

    .nav-menu-link {
        height: auto;
        padding: 0;
        margin-right: 7.5rem
    }

    .nav-menu-link:active,
    .nav-menu-link:focus,
    .nav-menu-link:hover,
    .router-link-exact-active.nav-menu-link {
        background: transparent
    }

    .nav-menu-link:active:before,
    .nav-menu-link:focus:before,
    .nav-menu-link:hover:before,
    .router-link-exact-active.nav-menu-link:before {
        display: none
    }
}

.header-login {
    grid-area: header-account;
    width: 100%
}

.header-login,
.login-button {
    display: flex;
    justify-content: center;
    align-items: center
}

.login-button {
    position: relative;
    width: 10rem;
    height: 3rem;
    margin: 0 auto;
    color: #fff;
    border-radius: var(--small-radius);
    background: linear-gradient(90deg, #f70, #fb0);
    box-shadow: 0 0 .5rem #ffde00
}

.login-button:active {
    background: linear-gradient(90deg, #f90, #fd0);
    box-shadow: 0 0 1rem #fb0
}

.lock-icon {
    display: none
}

@media(hover:hover) and (pointer:fine) {
    .login-button:hover {
        background: linear-gradient(90deg, #f90, #fd0);
        box-shadow: 0 0 1rem #fb0
    }
}

@media screen and (min-width:992px) {
    .header-login {
        padding-right: var(--large-gap)
    }

    .login-button {
        width: 100%;
        height: 5.2rem;
        font-size: 1.8rem;
        border-radius: var(--radius)
    }

    .lock-icon {
        position: absolute;
        left: 1rem;
        display: block;
        width: 2.5rem;
        height: 2.5rem;
        fill: #fff
    }
}

.header-account {
    --avatar-frame-width: 3.2rem;
    --button-width: 3.2rem;
    --youtubers-width: 8rem;
    grid-area: header-account;
    display: grid;
    grid-template-columns: var(--avatar-frame-width) 1fr var(--button-width) var(--button-width);
    grid-template-rows: 1fr;
    grid-column-gap: 1.2rem
}

.header-account>* {
    margin: auto 0
}

.account-avatar-frame {
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to bottom left, #ffd800, #ff6c00)
}

.account-avatar-frame,
.avatar.account-avatar {
    width: var(--avatar-frame-width);
    height: var(--avatar-frame-width);
    border-radius: var(--small-radius)
}

.account-username {
    display: none;
    font-weight: var(--base-weight)
}

.account-username>a {
    color: #fff
}

.header-youtubers {
    display: none
}

.header-youtube-icon {
    width: 3.2rem;
    height: 2.3rem
}

.header-youtubers-number {
    width: 4rem
}

.account-logout-button,
.account-notifications-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--button-width);
    height: var(--button-width);
    border-radius: var(--small-radius);
    border: none;
    outline: none;
    background: #1f212d;
    cursor: pointer
}

.account-logout-button:active,
.account-logout-button:focus,
.account-notifications-button:active,
.account-notifications-button:focus {
    background: #2d2f3c
}

.account-notifications-button {
    position: relative
}

.account-notifications-indicator {
    position: absolute;
    top: -.5rem;
    right: -.5rem;
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background: #fd0;
    box-shadow: 0 0 1rem #fd0
}

.account-notifications-icon {
    width: 1.5rem;
    height: 1.5rem;
    fill: #fff
}

.account-logout-icon {
    width: 1.8rem;
    height: 1.8rem;
    fill: #ff3c00
}

@media(hover:hover) and (pointer:fine) {

    .account-logout-button:hover,
    .account-notifications-button:hover {
        background: #2d2f3c
    }
}

@media screen and (min-width:768px) {
    .header-account {
        grid-template-columns: var(--avatar-frame-width) 1fr 1fr var(--button-width) var(--button-width)
    }

    .header-account.with-youtubers {
        grid-template-columns: var(--avatar-frame-width) 2fr 3fr var(--youtubers-width) var(--button-width) var(--button-width)
    }

    .account-username {
        display: block
    }

    .with-youtubers>.header-youtubers {
        display: flex;
        justify-content: center;
        align-items: center;
        width: var(--youtubers-width);
        height: var(--button-width);
        margin: auto;
        border-radius: var(--small-radius);
        color: #fff;
        background: #1f212d
    }
}

@media screen and (min-width:992px) {
    .header-account {
        --avatar-frame-width: 5.2rem;
        padding-right: var(--large-gap)
    }

    .account-avatar-frame,
    .avatar.account-avatar {
        border-radius: var(--radius)
    }

    .avatar.account-avatar {
        width: 4.8rem;
        height: 4.8rem
    }

    .account-deposit.mobile-tablet {
        display: none
    }

    .header-account {
        grid-template-columns: var(--avatar-frame-width) 1fr var(--button-width) var(--button-width)
    }

    .header-account.with-youtubers {
        grid-template-columns: var(--avatar-frame-width) 1fr 1fr var(--button-width) var(--button-width)
    }
}

.notification-popup {
    position: fixed;
    display: grid;
    top: -27.5rem;
    left: 0;
    width: 100%;
    height: 27.5rem;
    padding: var(--medium-gap);
    background: var(--dialog-box-background);
    transition: top var(--nav-slide-transition);
    z-index: 1
}

.-show-notification .notification-popup {
    top: var(--header-height);
    box-shadow: 0 0 1.5rem #000
}

.notifications.has-padding-correction {
    margin: 0 -1.5rem 0 0;
    padding: 0 1.5rem 0 0;
    overflow-y: scroll
}

.notification {
    display: grid;
    grid-template-areas: "notification-heading" "notification-content";
    grid-template-columns: 1fr;
    width: 100%;
    margin-bottom: var(--tiny-gap);
    padding: var(--small-gap) var(--medium-gap);
    border-radius: var(--radius);
    background: linear-gradient(90deg, transparent, #454232);
    background: var(--box-background)
}

.notification:last-child {
    margin-bottom: 0
}

.notification-heading {
    grid-area: notification-heading;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight);
    text-align: left
}

.notification-content {
    grid-area: notification-content;
    font-size: 1.2rem;
    text-align: left
}

@media screen and (min-width:768px) {
    .notification-popup {
        top: 6rem;
        left: auto;
        right: 3.5rem;
        width: 32rem;
        border-radius: var(--radius);
        opacity: 0;
        transition: opacity var(--nav-slide-transition);
        z-index: -1
    }

    .notification-popup:after {
        content: "";
        position: absolute;
        right: 7rem;
        top: -1rem;
        display: block;
        margin-right: -1rem;
        width: 0;
        height: 0;
        border-left: 1rem solid transparent;
        border-bottom: 1rem solid #292b3a;
        border-right: 1rem solid transparent
    }

    .-show-notification .notification-popup {
        top: 5.5rem;
        opacity: 1;
        box-shadow: none;
        z-index: 4
    }

    .notifications.has-padding-correction {
        margin: 0 -1rem 0 0;
        padding: 0 .5rem 0 0;
        overflow-y: scroll
    }
}

@media screen and (min-width:992px) {
    .notification-popup {
        top: 8rem;
        right: var(--large-gap)
    }

    .notification-popup:after {
        right: 6rem
    }

    .-show-notification .notification-popup {
        top: 8rem
    }
}

.youtuber-popup {
    position: fixed;
    display: grid;
    top: -27.5rem;
    left: 0;
    width: 100%;
    height: 27.5rem;
    padding: var(--medium-gap);
    background: var(--dialog-box-background);
    transition: top var(--nav-slide-transition);
    z-index: 1
}

.-show-youtuber .youtuber-popup {
    top: var(--header-height);
    box-shadow: 0 0 1.5rem #000
}

.youtubers.has-padding-correction {
    margin: 0 -1.5rem 0 0;
    padding: 0 1.5rem 0 0;
    overflow-y: scroll
}

.youtuber {
    display: grid;
    grid-template-columns: 4.8rem 1fr;
    grid-gap: var(--small-gap);
    align-items: center;
    width: 100%;
    margin-bottom: var(--tiny-gap);
    border-radius: var(--radius)
}

.youtuber:last-child {
    margin-bottom: 0
}

.youtuber-avatar-link {
    display: flex;
    margin: auto 0;
    cursor: pointer
}

.youtuber-avatar {
    border-radius: 50%
}

.youtuber-heading {
    width: calc(100% - var(--medium-gap) - var(--medium-gap) - 4.8rem - var(--small-gap));
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight);
    text-align: left
}

@media screen and (min-width:768px) {
    .youtuber-popup {
        top: 6rem;
        left: auto;
        right: 5.5rem;
        width: 27rem;
        border-radius: var(--radius);
        opacity: 0;
        transition: opacity var(--nav-slide-transition);
        z-index: -1
    }

    .youtuber-popup:after {
        content: "";
        position: absolute;
        right: 10rem;
        top: -1rem;
        display: block;
        margin-right: -1rem;
        width: 0;
        height: 0;
        border-left: 1rem solid transparent;
        border-bottom: 1rem solid #292b3a;
        border-right: 1rem solid transparent
    }

    .-show-youtuber .youtuber-popup {
        top: 5.5rem;
        opacity: 1;
        box-shadow: none;
        z-index: 4
    }

    .youtuber-heading {
        width: calc(22.2rem - var(--medium-gap) - var(--medium-gap) - var(--small-gap))
    }

    .youtubers.has-padding-correction {
        margin: 0 -1rem 0 0;
        padding: 0 .5rem 0 0;
        overflow-y: scroll
    }
}

@media screen and (min-width:992px) {
    .youtuber-popup {
        top: 8rem;
        right: 4.5rem
    }

    .youtuber-popup:after {
        right: 10rem
    }

    .-show-youtuber .youtuber-popup {
        top: 8rem
    }
}

.header-deposit {
    display: flex;
    align-items: center;
    height: 100%
}

.header-deposit-form {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    height: 3.2rem
}

.header-deposit-field {
    display: none
}

.header-deposit-button {
    font-size: 1.1rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    border-radius: var(--small-radius);
    color: #fff;
    background: linear-gradient(to bottom right, #ffa800, #ff6000)
}

.header-deposit-button:active,
.header-deposit-button:focus {
    background: linear-gradient(to bottom right, #ffb933, #ff8033)
}

@media(hover:hover) and (pointer:fine) {
    .header-deposit-button:hover {
        background: linear-gradient(to bottom right, #ffb933, #ff8033)
    }
}

@media screen and (min-width:280px) {
    .header-deposit-button {
        font-size: var(--base-font-size)
    }
}

@media screen and (min-width:320px) {
    .header-deposit-button {
        font-size: 1.2rem
    }
}

@media screen and (min-width:360px) {
    .header-deposit-button {
        font-size: var(--base-font-size)
    }
}

@media screen and (min-width:411px) {
    .header-deposit-button {
        font-size: 1.6rem
    }
}

@media screen and (min-width:480px) {
    .header-deposit-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        height: 3.2rem;
        border-radius: var(--small-radius);
        background: #252933
    }

    .header-deposit-field {
        padding: 0 1rem 0 2.5rem;
        border-radius: var(--small-radius);
        background: #252933
    }

    .header-deposit-field,
    .header-deposit:before {
        display: flex;
        align-items: center;
        font-family: Argentum, sans-serif;
        font-size: 1.6rem;
        font-weight: var(--light-font-weight)
    }

    .header-deposit:before {
        content: "$";
        position: absolute;
        justify-content: flex-end;
        width: 2rem;
        height: 100%;
        color: #ff3b00
    }

    .header-deposit-button {
        padding: 0 1rem;
        font-size: var(--base-font-size)
    }
}

.bonus {
    --bonus-text-height: 15rem;
    --bonus-conditions-height: 11.5rem;
    --bonus-winners-height: 21.5rem;
    --bonus-height: calc(var(--medium-gap) + var(--bonus-text-height) + var(--medium-gap) + var(--bonus-conditions-height) + var(--medium-gap) + var(--bonus-winners-height) + var(--medium-gap));
    position: fixed;
    bottom: calc(var(--mode-bar-height) - var(--bonus-height));
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto var(--bonus-conditions-height) var(--bonus-winners-height);
    grid-gap: var(--medium-gap);
    width: 100%;
    height: auto;
    padding: var(--medium-gap);
    border-radius: var(--radius);
    background: var(--panel-background);
    box-shadow: 0 0 1.5rem #000;
    z-index: 1
}

.-show-bonus .bonus,
.bonus {
    transition: bottom var(--bar-slide-transition)
}

.-show-bonus .bonus {
    bottom: var(--mode-bar-height)
}

.bonus-text {
    text-align: left
}

.bonus-conditions-participating,
.bonus-conditions-wrapper {
    width: 100%;
    padding: var(--small-gap);
    border-radius: var(--radius);
    background: #20222e
}

.bonus-conditions-participating {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center
}

.bonus-conditions-check {
    width: 3.2rem;
    height: 3.2rem;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="none" stroke="%23fff" stroke-width="6" stroke-linecap="round" stroke-linejoin="round" d="M 3.14,28.45 19.8,44.74 46.86,5.14 v 0" /></svg>');
    background-repeat: no-repeat
}

.bonus-conditions-button {
    padding: 1rem 1.5rem;
    font-weight: var(--dark-font-weight);
    border-radius: var(--radius);
    border: .2rem solid #fff
}

.bonus-timer.desktop-only {
    display: none
}

.bonus-timer-hours,
.bonus-timer-minutes,
.bonus-timer.mobile-tablet {
    font-family: Argentum, sans-serif;
    font-weight: var(--base-font-weight);
    font-size: 1.1rem
}

.bonus-active .bonus-timer.mobile-tablet {
    color: #fff
}

@media screen and (min-width:992px) {
    .bonus {
        --bonus-text-height: 14rem;
        position: absolute;
        top: 28vh;
        left: calc(var(--side-bar-width));
        grid-template-rows: var(--bonus-text-height) var(--bonus-conditions-height) var(--bonus-winners-height);
        width: calc(var(--mode-kit-width) - var(--large-gap) - var(--large-gap));
        height: var(--bonus-height);
        margin-left: var(--large-gap);
        opacity: 0;
        background: #1a1d26;
        box-shadow: none;
        z-index: -1
    }

    .-show-bonus .bonus,
    .bonus {
        transition: opacity var(--nav-slide-transition)
    }

    .-show-bonus .bonus {
        opacity: 1;
        z-index: 1
    }

    .bonus-timer.desktop-only {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-gap: var(--tiny-gap)
    }

    .bonus-timer.mobile-tablet {
        display: none
    }

    .bonus-timer-hours,
    .bonus-timer-minutes {
        padding: .1rem .2rem;
        font-size: 1.4rem;
        color: var(--panel-background);
        border-radius: var(--small-radius);
        background: #f8a40d
    }

    .mode-menu-link.bonus-button {
        width: 5rem
    }

    .bonus-button .bonus-icon {
        fill: #fff
    }

    .bonus-active .bonus-timer-hours,
    .bonus-active .bonus-timer-minutes,
    .bonus-button:hover .bonus-timer-hours,
    .bonus-button:hover .bonus-timer-minutes {
        color: #fff;
        background: #f8a40d
    }
}

.bonus-bank-wrapper {
    display: none
}

@media screen and (min-width:992px) {
    .bouns-total-bank {
        display: none
    }

    .bonus-bank-wrapper {
        display: flex;
        margin-top: var(--tiny-gap);
        font-family: Argentum, sans-serif;
        color: #fff
    }

    .bonus-bank-decimal-part,
    .bonus-bank-decimal-separator,
    .bonus-bank-digit,
    .bonus-bank-dollar {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 1.5rem;
        height: 2rem;
        margin-right: .1rem;
        background: #272a33
    }

    .bonus-bank-dollar {
        border-radius: var(--small-radius) 0 0 var(--small-radius)
    }

    .bonus-bank-decimal-part {
        margin-right: 0;
        border-radius: 0 var(--small-radius) var(--small-radius) 0
    }
}

.bonus-conditions-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%
}

.bonus-conditions-label {
    text-align: left;
    color: var(--label-color);
    font-weight: var(--dark-font-weight)
}

.bonus-conditions {
    height: 13.2rem;
    text-align: left
}

.bonus-condition {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin: 1.2rem 0 0
}

.bonus-condition-status {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin-right: 1.2rem;
    background: #333
}

.bonus-condition-status[data-condition-status=done] {
    background: #ff4800;
    box-shadow: 0 0 .75rem #ff4800
}

.bonus-highlight {
    margin: 0 .3rem;
    font-family: Argentum, sans-serif;
    font-weight: var(--deep-font-weight);
    color: #f5ff50
}

.bonus-domain {
    text-transform: uppercase
}

.bonus-winners-heading {
    text-align: left;
    color: #acafb6
}

.bonus-winner {
    display: grid;
    grid-template-columns: 4.8rem 1fr 8rem;
    grid-template-rows: 1fr;
    grid-gap: var(--medium-gap);
    align-items: center;
    margin: var(--medium-gap) 0 0
}

.bonus-winner-username {
    font-size: 1.5rem
}

.bonus-winner-value {
    font-family: Argentum, sans-serif;
    font-size: 1.5rem;
    text-align: right;
    color: #a0a1a5
}

.mode-bar {
    --link-hover-background: #1f242e;
    grid-area: mode-bar;
    position: fixed;
    bottom: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: var(--mode-bar-height);
    background: var(--app-background)
}

.-show-modal>.mode-bar {
    bottom: var(--mode-bar-height)
}

.mode-menu,
.switch-menu {
    display: flex
}

.mode-menu-item,
.mode-menu-link,
.switch-menu-button,
.switch-menu-item {
    display: flex;
    justify-content: center;
    align-items: center
}

.mode-menu-link,
.switch-menu-button {
    color: var(--link-inactive-color);
    outline: none;
    background: transparent;
    transition: background var(--coloring-transition), color var(--coloring-transition)
}

.mode-menu-link:active,
.mode-menu-link:focus,
.switch-menu-button:active,
.switch-menu-button:focus {
    color: var(--link-hover-color);
    background: var(--link-hover-background)
}

.mode-menu-icon,
.switch-menu-icon {
    display: block
}

@media(hover:hover) and (pointer:fine) {

    .mode-menu-link:hover,
    .switch-menu-button:hover {
        color: var(--link-hover-color);
        background: var(--link-hover-background)
    }
}

@media screen and (min-width:992px) {
    .mode-bar {
        position: relative;
        top: 0;
        z-index: 0;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        height: 100%;
        padding-top: var(--medium-gap);
        background: var(--panel-background)
    }

    .page-view .mode-bar {
        border-radius: 0 var(--radius) 0 0
    }

    .mode-menu {
        flex-direction: column
    }

    .switch-menu {
        display: none
    }

    .mode-menu-link:active,
    .mode-menu-link:focus,
    .mode-menu-link:hover,
    .switch-menu-link:active,
    .switch-menu-link:focus,
    .switch-menu-link:hover {
        background: transparent
    }
}

.mode-menu {
    --crash-icon-hover-fill: url(#fire-gradient) var(--icon-hover-fill);
    --jackpot-icon-hover-fill: url(#sky-gradient) #65a2b9;
    --wheel-icon-hover-fill: url(#sky-gradient) #65a2b9;
    --cases-icon-hover-fill: url(#sky-gradient) #65a2b9;
    --total-bank-hover-color: #ff8300;
    height: 100%
}

.mode-menu-item {
    width: 5.5rem;
    height: var(--mode-bar-height);
    cursor: pointer
}

.mode-menu-link {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 5rem;
    height: 100%
}

.router-link-exact-active.mode-menu-link {
    color: var(--link-hover-color);
    transition: color var(--coloring-transition)
}

.mode-menu-link:active>.mode-total-bank,
.mode-menu-link:focus>.mode-total-bank,
.router-link-exact-active>.mode-total-bank {
    color: var(--total-bank-hover-color);
    transition: color var(--coloring-transition)
}

.mode-menu-icon {
    width: 3rem;
    height: 3rem;
    margin-bottom: -.2rem;
    fill: var(--icon-inactive-fill);
    transition: fill var(--coloring-transition)
}

.mode-menu-link:active>.mode-menu-icon,
.mode-menu-link:focus>.mode-menu-icon,
.router-link-exact-active>.mode-menu-icon {
    fill: var(--bar-icon-hover-fill)
}

.mode-menu-link:active>.crash-icon,
.mode-menu-link:focus>.crash-icon,
.router-link-exact-active>.crash-icon {
    fill: var(--crash-icon-hover-fill)
}

.mode-menu-link:active>.jackpot-icon,
.mode-menu-link:focus>.jackpot-icon,
.router-link-exact-active>.jackpot-icon {
    fill: var(--jackpot-icon-hover-fill)
}

.mode-menu-link:active>.wheel-icon,
.mode-menu-link:focus>.wheel-icon,
.router-link-exact-active>.wheel-icon {
    fill: var(--wheel-icon-hover-fill)
}

.mode-menu-link:active>.cases-icon,
.mode-menu-link:focus>.cases-icon,
.router-link-exact-active>.cases-icon {
    fill: var(--cases-icon-hover-fill)
}

.bonus-icon {
    width: 4rem;
    height: 4rem;
    margin: -.6rem 0
}

.mode-menu-name,
.mode-total-bank {
    font-size: 1rem;
    text-transform: uppercase
}

.mode-menu-name {
    bottom: 0;
    font-weight: var(--deep-font-weight)
}

.mode-total-bank {
    position: absolute;
    top: 0;
    right: 0;
    font-family: Argentum, sans-serif;
    font-weight: var(--base-font-weight);
    color: #824d14
}

.mode-total-bank.bouns-total-bank {
    color: var(--total-bank-hover-color);
    transition: color var(--coloring-transition)
}

.mode-menu-bonus {
    position: relative
}

.mode-menu-bonus-scale {
    position: absolute;
    top: 0;
    right: -5px;
    width: 6px;
    height: 100%
}

.mode-menu-bonus-scale__bg {
    height: 100%;
    fill: var(--lt-color-gray-700)
}

.mode-menu-bonus-scale__rect {
    height: 60%;
    y: 40%;
    fill: url(#jackpot-timer-gradient)
}

@media(hover:hover) and (pointer:fine) {
    .mode-menu-link:hover>.mode-total-bank {
        color: var(--total-bank-hover-color);
        transition: color var(--coloring-transition)
    }

    .mode-menu-link:hover>.mode-menu-icon {
        fill: var(--bar-icon-hover-fill)
    }

    .mode-menu-link:hover>.crash-icon {
        fill: var(--crash-icon-hover-fill)
    }

    .mode-menu-link:hover>.jackpot-icon {
        fill: var(--jackpot-icon-hover-fill)
    }

    .mode-menu-link:hover>.wheel-icon {
        fill: var(--wheel-icon-hover-fill)
    }

    .mode-menu-link:hover>.cases-icon {
        fill: var(--cases-icon-hover-fill)
    }

    .mode-menu-link:hover>.bonus-icon {
        fill: #fff
    }
}

@media screen and (min-width:280px) {
    .mode-menu-item {
        width: 6rem
    }

    .mode-menu-link {
        width: 5.5rem
    }
}

@media screen and (min-width:992px) {
    .mode-menu-item {
        margin-bottom: var(--medium-gap);
        width: 8rem;
        height: auto
    }

    .mode-menu-link {
        width: 3rem
    }

    .mode-menu-name,
    .mode-total-bank {
        font-size: var(--base-font-size)
    }

    .mode-total-bank {
        position: relative
    }

    .mode-menu-icon {
        width: 3.4rem;
        height: 3.4rem;
        margin-bottom: 0
    }

    .bonus-icon {
        width: 6rem;
        height: 6rem;
        margin: -.6rem 0
    }

    .mode-menu-bonus {
        margin: auto 0 0
    }
}

.switch-menu-item {
    width: 3.5rem;
    height: var(--mode-bar-height);
    margin: 0 .75rem 0 0
}

.switch-menu-button {
    width: 3.5rem;
    height: 3.5rem;
    cursor: pointer;
    border-radius: var(--small-radius)
}

.-show-mobile-chat .chat-switch,
.-show-tool-bar .tool-switch,
.switch-menu-button:active {
    color: var(--link-hover-color);
    background: var(--link-hover-background)
}

.switch-menu-icon {
    width: 2.5rem;
    height: 2.5rem
}

.tool-switch-icon {
    fill: var(--icon-inactive-fill);
    transition: fill var(--coloring-transition)
}

.chat-switch-icon {
    fill: transparent;
    stroke: var(--icon-inactive-fill);
    transition: stroke var(--coloring-transition)
}

.-show-tool-bar .tool-switch-icon,
.switch-menu-button:active>.tool-switch-icon,
.switch-menu-button:focus>.tool-switch-icon {
    fill: var(--icon-hover-fill)
}

.-show-mobile-chat .chat-switch-icon,
.switch-menu-button:active>.chat-switch-icon,
.switch-menu-button:focus>.chat-switch-icon {
    stroke: var(--icon-hover-fill)
}

@media(hover:hover) and (pointer:fine) {
    .switch-menu-button:hover {
        color: var(--link-hover-color);
        background: var(--link-hover-background)
    }

    .switch-menu-button:hover>.tool-switch-icon {
        fill: var(--icon-hover-fill)
    }

    .switch-menu-button:hover>.chat-switch-icon {
        stroke: var(--icon-hover-fill)
    }
}

.cashback-wrapper {
    grid-area: cashback;
    padding: 0 var(--outer-gap) var(--outer-gap);
    justify-content: flex-end
}

.cashback,
.cashback-wrapper {
    display: flex;
    align-items: center
}

.cashback {
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--box-background)
}

.cashback-form {
    --heading-height: var(--base-font-size);
    --heading-bottom-gap: .7rem;
    --bonus-label-height: 1.1rem;
    --bonus-field-height: 3rem;
    display: grid;
    grid-template-areas: "cashback-slogan cashback-slogan" ". ." "cashback-bonus-label cashback-button" "cashback-bonus-field cashback-button";
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: var(--heading-height) var(--heading-bottom-gap) var(--bonus-label-height) var(--bonus-field-height);
    grid-column-gap: var(--inner-gap);
    grid-row-gap: var(--tiny-gap);
    width: 100%
}

.cashback-heading {
    grid-area: cashback-slogan;
    margin: -.1rem auto 0;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: var(--box-heading-color)
}

.cashback-bonus-label {
    grid-area: cashback-bonus-label;
    font-size: 1.2rem;
    text-transform: uppercase;
    text-align: left;
    color: var(--label-color)
}

.cashback-bonus-field {
    grid-area: cashback-bonus-field;
    font-family: Argentum, sans-serif;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight);
    color: #fff
}

.cashback-button {
    grid-area: cashback-button;
    display: flex;
    height: 100%;
    justify-content: center;
    align-items: center;
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #d97000
}

.cashback-button:active,
.cashback-button:focus {
    background: #ff8400;
    box-shadow: 0 0 1rem #ff8400
}

@media(hover:hover) and (pointer:fine) {
    .cashback-button:hover {
        background: #ff8400;
        box-shadow: 0 0 1rem #ff8400
    }
}

@media screen and (min-width:768px) {
    .cashback-wrapper {
        padding: 0 0 var(--small-gap)
    }
}

@media screen and (min-width:992px) {
    .cashback-wrapper {
        padding: 0 var(--outer-gap) var(--small-gap)
    }
}

.free-skin-wrapper {
    grid-area: giveaway;
    position: relative;
    display: flex
}

.free-skin {
    position: relative;
    display: grid;
    grid-template-areas: "giveaway-heading giveaway-item" "giveaway-timer giveaway-item";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1.5fr;
    width: 100%;
    border-radius: var(--radius);
    background: linear-gradient(to bottom left, rgba(255, 180, 0, .14), transparent)
}

.free-skin:hover:after {
    content: "";
    border-radius: var(--radius);
    background: rgba(31, 33, 45, .8)
}

.free-skin-hover-button,
.free-skin:hover:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0
}

.free-skin-hover-button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 20rem;
    height: 6.5rem;
    margin: auto;
    font-size: 1.6rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #fff;
    border-radius: var(--radius);
    border: .2rem solid #fbb700;
    background: transparent;
    cursor: pointer;
    z-index: 1;
    opacity: 0;
    transition: opacity var(--coloring-transition), color var(--coloring-transition), background var(--coloring-transition)
}

.free-skin:hover>.free-skin-hover-button {
    opacity: 1
}

.free-skin-hover-button:hover {
    color: #1f212d;
    background: #fbb700
}

.free-skin-heading {
    grid-area: giveaway-heading;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    font-size: 2.5rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #a1967b
}

.free-skin-timer {
    grid-area: giveaway-timer
}

.free-skin-item {
    grid-area: giveaway-item;
    display: flex;
    justify-content: center;
    align-items: center
}

.free-skin .item-card {
    width: calc(var(--giveaway-height) - 2.2rem);
    height: calc(var(--giveaway-height) - 2.2rem);
    background: rgba(0, 0, 0, .1)
}

.free-skin .item-card-name,
.free-skin .item-card-price {
    justify-content: center
}

@media(hover:hover) and (pointer:fine) {
    .free-skin .item-card:hover {
        box-shadow: inset 0 0 2rem #222323
    }
}

@media screen and (min-width:992px) {
    .free-skin-wrapper {
        padding: var(--outer-gap) var(--outer-gap) var(--small-gap)
    }
}

.timer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center
}

.timer-value {
    margin: .5rem 0;
    font-family: Lekton, monospace;
    font-size: 2.7rem;
    font-weight: var(--dark-font-weight);
    color: #fbb700
}

.timer-hours:after,
.timer-minutes:after {
    content: ":";
    margin: 0 .6rem;
    font-family: Montserrat, sans-serif
}

.timer-progress-bar,
.timer-progress-bar::-webkit-progress-bar {
    width: 12rem;
    height: .2rem;
    border: none;
    background: #191d25
}

.timer-progress-bar::-webkit-progress-value {
    background: #fbb700
}

.timer-progress-bar::-moz-progress-bar {
    background: #fbb700
}

.inventory {
    position: relative;
    grid-area: inventory;
    display: grid;
    grid-template-rows: var(--inventory-control-wrapper-height) var(--inventory-board-wrapper-height) var(--inventory-actions-wrapper-height);
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.inventory-actions-wrapper,
.inventory-board-wrapper,
.inventory-control-wrapper {
    display: flex
}

.inventory-board-wrapper,
.inventory-control-wrapper {
    padding-bottom: var(--tiny-gap)
}

.inventory-control {
    grid-template-columns: 2fr 2fr 1fr;
    padding: var(--inner-gap)
}

.inventory-board,
.inventory-control {
    display: grid;
    width: 100%;
    border-radius: var(--radius);
    background: var(--box-background)
}

.inventory-board {
    --board-heading-height: 6rem;
    grid-template-rows: var(--board-heading-height) 1fr;
    padding: 0 var(--inner-gap) var(--inner-gap)
}

.inventory-actions {
    display: grid;
    grid-template-areas: "exchange-button sell-button" "take-button take-button";
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-gap: var(--tiny-gap);
    width: 100%
}

.inventory-control-balance,
.inventory-control-selected,
.inventory-control-toggle {
    margin: auto 0
}

.inventory-control-balance,
.inventory-control-selected {
    text-align: left
}

.inventory-control-toggle {
    text-align: right
}

.inventory-control-label,
.inventory-control-value {
    display: block
}

.inventory-control-label {
    text-transform: uppercase;
    color: var(--label-color)
}

.inventory-control-value {
    font-family: Argentum, sans-serif;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    line-height: 1.2;
    color: var(--indicator-value-color)
}

.inventory-board-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.8rem;
    font-weight: var(--base-font-weight);
    letter-spacing: .5rem;
    text-transform: uppercase;
    color: var(--box-heading-color)
}

.inventory-items {
    display: grid;
    grid-template-columns: repeat(var(--inventory-items-columns), 1fr);
    grid-auto-rows: var(--item-card-height);
    grid-gap: var(--item-cards-grid-gap);
    width: auto;
    height: 37.3rem;
    height: calc(var(--item-card-height)*3 + var(--item-cards-grid-gap)*2);
    margin: 0;
    padding: 0;
    box-sizing: content-box
}

.inventory-item>.item-card {
    position: relative;
    width: var(--item-card-width);
    height: var(--item-card-height);
    margin: 0 auto;
    border-radius: var(--radius);
    cursor: pointer
}

.inventory-item.selected>.item-card:before {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--radius);
    border: var(--line-thickness) dashed #fcb800;
    background: rgba(0, 0, 0, .5)
}

.inventory-item.selected>.item-card:after {
    --select-icon-size: calc(var(--item-card-width)*0.5);
    content: "";
    position: absolute;
    top: calc(var(--item-card-height)/2 - var(--select-icon-size)/2);
    left: calc(var(--item-card-width)/2 - var(--select-icon-size)/2);
    display: block;
    width: var(--select-icon-size);
    height: var(--select-icon-size);
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50"><path fill="%23e8b11f" fill-opacity="0.9" d="M 38.85,5.5 19.95,33.10 10.16,23.45 4.55,29.15 19.5,43.89 c 1.18,0.96 2.32,0.65 2.77,-0.01 l 23.19,-33.86 z" /></svg>');
    background-repeat: no-repeat
}

.inventory .item-card-price {
    justify-content: flex-end
}

.item-card.contraband,
.item-card.exotic {
    background: linear-gradient(to top left, #c58b3d, #292929)
}

.item-card.covert,
.item-card.extraordinary,
.item-card.knives {
    background: linear-gradient(to top left, #94443f, #292929)
}

.item-card.classified {
    background: linear-gradient(to top left, #892e9e, #292929)
}

.item-card.restricted {
    background: linear-gradient(to top left, #5634ae, #292929)
}

.item-card.mil-spec,
.item-card.mil-spec-grade {
    background: linear-gradient(to top left, #3949a7, #292929)
}

.item-card.industrial,
.item-card.industrial-grade {
    background: linear-gradient(to top left, #245890, #292929)
}

.item-card.base,
.item-card.base-grade,
.item-card.consumer,
.item-card.consumer-grade {
    background: linear-gradient(to top left, #909090, #292929)
}

.exchange-button,
.sell-button,
.take-button {
    height: var(--inventory-action-button-height);
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    letter-spacing: .5rem;
    text-transform: uppercase;
    border-radius: var(--radius);
    border: none;
    outline: none;
    cursor: pointer
}

.exchange-button {
    grid-area: exchange-button;
    color: #012545;
    background: #d99e00
}

.exchange-button:active,
.exchange-button:focus {
    background: #ffba00;
    box-shadow: 0 0 1rem #ffba00
}

.sell-button {
    grid-area: sell-button;
    color: #000;
    background: #d96f00
}

.sell-button:active,
.sell-button:focus {
    background: #ff8300;
    box-shadow: 0 0 1rem #ff8300
}

.take-button {
    grid-area: take-button;
    color: #fbb700;
    background: #262833
}

.take-button:active,
.take-button:focus {
    color: #ffc724;
    background: #393c4d;
    box-shadow: 0 0 1rem #393c4d
}

@media(hover:hover) and (pointer:fine) {
    .exchange-button:hover {
        background: #ffba00;
        box-shadow: 0 0 1rem #ffba00
    }

    .sell-button:hover {
        background: #ff8300;
        box-shadow: 0 0 1rem #ff8300
    }

    .take-button:hover {
        color: #ffc724;
        background: #393c4d;
        box-shadow: 0 0 1rem #393c4d
    }
}

@media screen and (min-width:512px) {
    .inventory-actions {
        grid-template-areas: "exchange-button sell-button" "take-button take-button";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: var(--tiny-gap)
    }
}

@media screen and (min-width:768px) {
    .inventory {
        padding: 0
    }

    .inventory-items {
        height: calc(var(--inventory-board-wrapper-height) - var(--board-heading-height) - var(--medium-gap))
    }
}

@media screen and (min-width:992px) {

    .inventory-actions-wrapper,
    .inventory-board-wrapper,
    .inventory-control-wrapper {
        padding: 0 var(--outer-gap) var(--tiny-gap)
    }

    .inventory-control {
        padding: var(--inner-gap)
    }

    .inventory-board {
        --board-heading-height: 5rem
    }

    .inventory-actions {
        grid-template-areas: "exchange-button sell-button" "take-button take-button";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        grid-gap: var(--tiny-gap)
    }

    .inventory-items {
        width: calc(var(--item-card-width)*3 + var(--item-cards-grid-gap)*2);
        height: calc(var(--inventory-board-wrapper-height) - var(--board-heading-height) - var(--medium-gap));
        margin: 0 -1.7rem 0 0;
        padding: 0 1.1rem 0 0
    }
}

.storehouse-dialog {
    --dialog-width: 100vw;
    --dialog-height: calc(var(--app-height, 100vh) - var(--header-height) - var(--mode-bar-height));
    --dialog-header-height: 4.5rem;
    --items-width: calc(var(--item-card-width)*var(--inventory-items-columns) + var(--item-cards-grid-gap)*(var(--inventory-items-columns) - 1));
    position: fixed;
    top: var(--header-height);
    bottom: var(--mode-bar-height);
    left: calc(0% - var(--dialog-width));
    width: var(--dialog-width);
    padding: 0 var(--outer-gap) var(--outer-gap);
    overflow: hidden;
    background: var(--panel-background);
    z-index: 14;
    transition: left var(--nav-slide-transition)
}

.-show-storehouse .storehouse-dialog {
    left: 0
}

.storehouse-dialog-header {
    display: grid;
    grid-template-areas: "hide-storehouse-button storehouse-header-balance .";
    grid-auto-columns: var(--header-height) 1fr var(--header-height);
    grid-gap: var(--inner-gap)
}

.hide-storehouse-button {
    grid-area: hide-storehouse-button;
    position: relative;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: var(--header-height);
    height: var(--header-height);
    margin-left: -1rem;
    cursor: pointer
}

.hide-storehouse-button:active {
    background: transparent
}

.hide-storehouse-icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: var(--icon-inactive-fill);
    transition: fill var(--coloring-transition)
}

.hide-storehouse-button:active>.hide-storehouse-icon {
    fill: var(--icon-hover-fill)
}

.storehouse-header-balance {
    grid-area: storehouse-header-balance;
    display: flex;
    justify-content: center;
    align-items: center
}

.storehouse-header-label {
    margin-right: var(--small-gap);
    text-transform: uppercase;
    color: var(--label-color)
}

.storehouse-header-value {
    font-family: Argentum, sans-serif;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    color: var(--indicator-value-color)
}

.storehouse {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 8.5rem 1fr 4.5rem;
    grid-row-gap: var(--inner-gap);
    height: calc(100% - var(--dialog-header-height));
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--box-background)
}

.storehouse-filter {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1fr;
    grid-template-rows: 1fr;
    grid-gap: var(--inner-gap)
}

.storehouse-info-bar {
    grid-column: 1/4;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 2rem;
    border-radius: var(--radius);
    background: #282a38
}

.storehouse-info-bar-icon {
    width: 2.8rem;
    height: 2.8rem;
    fill: #55596f
}

.storehouse-indicator {
    color: #55596f
}

.storehouse-indicator-value {
    font-family: Argentum, sans-serif;
    font-weight: var(--light-font-weight);
    color: #fff
}

.storehouse-filter>.ui-text-input {
    border-radius: var(--radius);
    height: 100%
}

.storehouse-items {
    display: grid;
    grid-template-columns: repeat(var(--inventory-items-columns), 1fr);
    grid-auto-rows: var(--item-card-height);
    grid-gap: var(--item-cards-grid-gap);
    width: var(--items-width);
    margin: 0;
    padding: 0;
    box-sizing: content-box
}

.storehouse-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-column-gap: var(--inner-gap)
}

.storehouse-actions .accept-button,
.storehouse-actions .load-more-button {
    width: auto;
    height: 4.5rem;
    font-size: var(--base-font-size);
    font-weight: var(--dark-font-weight);
    color: #fff
}

.storehouse-actions .load-more-button {
    background: #282a35
}

.storehouse-actions .load-more-button:active,
.storehouse-actions .load-more-button:focus {
    background: #393c4d;
    box-shadow: 0 0 1rem #393c4d
}

.storehouse-actions .accept-button {
    text-transform: uppercase;
    background: #d99e00
}

.storehouse-actions .accept-button:disabled {
    color: var(--button-disabled-color);
    background: var(--button-disabled-background)
}

.storehouse-actions .accept-button:active,
.storehouse-actions .accept-button:focus {
    text-transform: uppercase;
    background: #ffba00;
    box-shadow: 0 0 1rem #ffba00
}

@media(hover:hover) and (pointer:fine) {
    .hide-storehouse-button:hover {
        background: transparent
    }

    .hide-storehouse-button:hover>.hide-storehouse-icon {
        fill: var(--icon-hover-fill)
    }

    .storehouse-actions .load-more-button:hover {
        background: #393c4d;
        box-shadow: 0 0 1rem #393c4d
    }

    .storehouse-actions .accept-button:hover {
        background: #ffba00;
        box-shadow: 0 0 1rem #ffba00
    }
}

@media screen and (min-width:768px) {
    .storehouse-dialog {
        --dialog-width: calc(50vw + var(--small-gap));
        --dialog-height: calc(var(--app-height, 100vh) - var(--header-height) - var(--crash-betting-wrapper-height) - var(--cashback-wrapper-height) - var(--mode-bar-height));
        top: calc(var(--header-height) + var(--crash-betting-wrapper-height) + var(--cashback-wrapper-height))
    }
}

@media screen and (min-width:992px) {
    .storehouse-dialog {
        --items-width: calc(var(--item-card-width)*5 + var(--item-cards-grid-gap)*4);
        position: absolute;
        top: 0;
        bottom: 0;
        left: calc(100% - .8rem);
        width: calc(var(--items-width) + var(--medium-gap)*2);
        height: 100%;
        padding: 0;
        overflow: hidden;
        border-radius: var(--radius);
        opacity: 0;
        background: var(--box-background);
        z-index: -1;
        transition: opacity var(--nav-slide-transition)
    }

    .-show-storehouse .storehouse-dialog {
        opacity: 1;
        left: calc(100% - .8rem);
        z-index: 20
    }

    .storehouse-dialog-header.mobile-tablet {
        display: none
    }

    .storehouse {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 8.5rem 1fr 5rem;
        grid-row-gap: var(--small-gap);
        width: 100%;
        height: 100%;
        padding: var(--medium-gap);
        background: transparent
    }

    .storehouse-filter {
        grid-gap: var(--small-gap)
    }

    .storehouse-items {
        grid-template-columns: repeat(5, 1fr);
        grid-auto-rows: var(--item-card-height);
        grid-gap: var(--item-cards-grid-gap);
        width: var(--items-width);
        height: 100%;
        margin: 0 -1.7rem 0 0;
        padding: 0 1.1rem 0 0
    }

    .storehouse-actions {
        grid-gap: var(--small-gap)
    }
}

.item-card {
    display: grid;
    grid-template-rows: 1.5fr 4fr 2.1fr;
    border-radius: var(--radius);
    overflow: hidden;
    background: #2d2f3c
}

.item-card-header {
    display: flex;
    flex-direction: column;
    padding: .4rem .4rem 0;
    z-index: 0
}

.item-card-rarity {
    font-size: 1rem;
    font-weight: var(--light-font-weight);
    text-align: right;
    word-wrap: break-word;
    text-shadow: 0 0 .5rem #000
}

.item-card-price-wrapper {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    align-items: flex-start
}

.item-card-number,
.item-card-price {
    font-family: Argentum, sans-serif;
    font-size: 1.15rem;
    font-weight: var(--light-font-weight);
    text-align: right;
    text-shadow: 0 0 .5rem #000
}

.item-card-number {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2rem;
    height: 2rem;
    color: #20b2aa;
    border-radius: var(--small-radius);
    background: hsla(0, 0%, 100%, .125)
}

.item-card-number.few {
    color: orange
}

.item-card-wait-icon {
    width: 2rem;
    height: 2rem;
    fill: hsla(0, 0%, 100%, .25)
}

.item-card-thumbnail,
.item-card-wait-icon {
    display: flex;
    justify-content: center;
    align-items: center
}

.item-card-thumbnail {
    width: var(--item-card-width);
    height: 1.5rem;
    margin: 2rem 0 0
}

.item-card-thumbnail-image {
    width: calc(var(--item-card-width)*0.9);
    height: auto
}

.item-card-footer {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 0 .4rem .4rem
}

.item-card-name {
    font-size: 1.1rem;
    font-weight: var(--base-font-weight)
}

.item-card-exterior,
.item-card-name {
    display: flex;
    align-items: flex-end;
    text-align: left;
    white-space: pre-wrap;
    text-shadow: 0 0 .5rem #000
}

.item-card-exterior {
    font-size: 1rem;
    color: #999
}

.mode-kit {
    grid-area: mode-kit
}

.mode-kit.desktop-only {
    display: none
}

@media screen and (min-width:992px) {
    .mode-kit {
        position: relative;
        grid-template-areas: "giveaway" "cashback" "inventory";
        grid-template-rows: var(--giveaway-wrapper-height) var(--cashback-wrapper-height) var(--inventory-height);
        border-radius: 0 var(--radius) 0 0;
        background: var(--panel-background)
    }

    .mode-kit,
    .mode-kit.desktop-only {
        display: grid
    }
}

.tool-bar {
    --tool-bar-height: 4.5rem;
    --menu-icon-size: 2.5rem;
    grid-area: tool-bar;
    position: fixed;
    bottom: calc(var(--mode-bar-height) - var(--tool-bar-height));
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: var(--tool-bar-height);
    background: var(--panel-background);
    z-index: 1
}

.-show-tool-bar .tool-bar,
.tool-bar {
    transition: bottom var(--bar-slide-transition)
}

.-show-tool-bar .tool-bar {
    bottom: var(--mode-bar-height);
    box-shadow: 0 0 1.5rem #000
}

.messenger-menu,
.tool-menu {
    display: flex
}

.messenger-menu-item,
.messenger-menu-link,
.tool-menu-item,
.tool-menu-link {
    display: flex;
    justify-content: center;
    align-items: center
}

.messenger-menu-item,
.tool-menu-item {
    width: var(--tool-bar-height);
    height: var(--tool-bar-height)
}

.messenger-menu-link,
.tool-menu-link {
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    outline: none;
    cursor: pointer
}

.messenger-menu-icon,
.tool-menu-icon {
    display: block;
    width: var(--menu-icon-size);
    height: var(--menu-icon-size);
    fill: var(--icon-inactive-fill);
    transition: fill var(--coloring-transition)
}

.messenger-menu-link:active>.messenger-menu-icon,
.messenger-menu-link:focus>.messenger-menu-icon,
.tool-menu-link:active>.tool-menu-icon,
.tool-menu-link:focus>.tool-menu-icon {
    fill: var(--bar-icon-hover-fill)
}

.lang-icon {
    opacity: .75
}

.tool-menu-link:active>.lang-icon,
.tool-menu-link:focus>.lang-icon {
    opacity: 1
}

@media(hover:hover) and (pointer:fine) {

    .messenger-menu-link:hover>.messenger-menu-icon,
    .tool-menu-link:hover>.tool-menu-icon {
        fill: var(--bar-icon-hover-fill)
    }

    .tool-menu-link:hover>.lang-icon {
        opacity: 1
    }
}

@media screen and (min-width:992px) {

    .-show-tool-bar .tool-bar,
    .tool-bar {
        position: relative;
        bottom: 0;
        align-items: center;
        height: 100%;
        transition: none;
        box-shadow: none;
        z-index: 0
    }

    .-show-tool-bar .tool-bar,
    .messenger-menu,
    .tool-bar,
    .tool-menu {
        flex-direction: column;
        justify-content: flex-end
    }

    .tool-menu {
        padding-bottom: 1rem
    }
}

.bet-item,
.bet-item-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 6.6rem;
    height: 6.6rem
}

.bet-item-thumbnail {
    position: relative
}

.bet-item-image {
    position: absolute;
    margin-left: -.1rem;
    width: 6rem;
    height: 6rem
}

.crash-bets-wrapper,
.crash-history-bets-wrapper {
    --bet-height: 7rem;
    --bet-wrapper: calc(var(--bet-height) + 0.6rem);
    grid-area: crash-bets;
    display: flex;
    padding: 0 var(--outer-gap) .2rem
}

.empty-bet-list {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--bet-wrapper)
}

.empty-bet-list-text {
    font-size: 1.68rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #282b36
}

.crash-bets {
    width: 100%;
    min-height: var(--bet-wrapper);
    max-height: calc(var(--bet-wrapper)*4);
    overflow: hidden
}

.crash-history-bets {
    width: 100%
}

.bet-wrapper.desktop-only {
    display: none
}

.bet {
    --win-rgb: 17, 175, 105;
    --lose-rgb: 231, 101, 119;
    --avatar-size: 4.6rem;
    --separator-width: .3rem;
    display: grid;
    height: var(--bet-height);
    margin-bottom: .6rem;
    padding: 0 var(--inner-gap);
    border-radius: var(--radius);
    -webkit-animation: bet-fade .35s;
    animation: bet-fade .35s
}

@-webkit-keyframes bet-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

@keyframes bet-fade {
    0% {
        opacity: 0
    }

    to {
        opacity: 1
    }
}

.bet-separator {
    display: none
}

.crash-bet {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background: var(--panel-background)
}

.crash-bet[data-status=in-round] {
    border: var(--line-thickness) dashed #2d2f3c
}

.crash-bet[data-status=win] {
    border: var(--line-thickness) dashed rgba(var(--win-rgb), 1);
    background: linear-gradient(45deg, transparent, transparent, transparent, transparent, transparent, transparent, rgba(var(--win-rgb), .06), rgba(var(--win-rgb), .12), rgba(var(--win-rgb), .12), rgba(var(--win-rgb), .18), rgba(var(--win-rgb), .18), rgba(var(--win-rgb), .24), rgba(var(--win-rgb), .24), rgba(var(--win-rgb), .3), rgba(var(--win-rgb), .3), rgba(var(--win-rgb), .36)), var(--panel-background)
}

.crash-bet[data-status=lose] {
    border: var(--line-thickness) dashed rgba(var(--lose-rgb), 1);
    background: linear-gradient(90deg, transparent, transparent, transparent, transparent, transparent, transparent, transparent, rgba(var(--lose-rgb), .06), rgba(var(--lose-rgb), .12), rgba(var(--lose-rgb), .12), rgba(var(--lose-rgb), .18), rgba(var(--lose-rgb), .18), rgba(var(--lose-rgb), .24), rgba(var(--lose-rgb), .24), rgba(var(--lose-rgb), .3), rgba(var(--lose-rgb), .3), rgba(var(--lose-rgb), .36)), var(--panel-background)
}

.bet-user {
    display: grid;
    grid-template-columns: var(--avatar-size) 1fr;
    grid-gap: var(--medium-gap)
}

.bet-user-avatar-link {
    display: flex;
    margin: auto 0;
    cursor: pointer
}

.bet-user-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size)
}

.bet-user-name,
.crash-bet-items {
    display: none
}

.crash-bet-multiplier,
.crash-bet-result,
.crash-bet-size {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.crash-bet-multiplier-value,
.crash-bet-result-value,
.crash-bet-size-value {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Argentum, sans-serif
}

.crash-bet-size-value {
    font-size: 1.6rem;
    font-weight: var(--light-font-weight);
    color: #a7a7a9
}

.crash-bet-multiplier-value {
    width: 100%;
    height: 4.6rem;
    font-size: 1.6rem;
    border-radius: var(--radius)
}

.crash-bet[data-status=in-round] .crash-bet-multiplier-value,
.crash-bet[data-status=in-round] .crash-bet-result-value {
    display: none;
    background: transparent
}

.crash-bet[data-status=win] .crash-bet-multiplier-value,
.crash-bet[data-status=win] .crash-bet-result-value {
    color: #87f9c1
}

.crash-bet[data-status=win] .crash-bet-multiplier-value {
    background: rgba(var(--win-rgb), .12)
}

.crash-bet[data-status=lose] .crash-bet-multiplier-value,
.crash-bet[data-status=lose] .crash-bet-result-value {
    color: #e76678
}

.crash-bet[data-status=lose] .crash-bet-multiplier-value {
    background: rgba(var(--lose-rgb), .12)
}

.crash-bet-status {
    display: none
}

@media screen and (min-width:768px) {
    .crash-bets-wrapper {
        height: var(--crash-bets-wrapper-height);
        padding: 0 0 .2rem
    }

    .crash-history-bets-wrapper,
    .empty-bet-list {
        height: 100%
    }

    .user-history-dataset .crash-bet {
        grid-template-columns: 15rem var(--separator-width) 1.2fr .7fr 1fr var(--separator-width) 15rem
    }

    .crash-history-bets .crash-bet {
        grid-template-columns: 1.1fr var(--separator-width) 10rem 10rem 10rem var(--separator-width) 16.4rem
    }

    .bet-user-name {
        display: none;
        margin: auto 0;
        text-align: left
    }

    .crash-history-bets .bet-user-name,
    .user-history-dataset .bet-user-name {
        display: block
    }

    .crash-bet-user-name {
        font-size: var(--base-font-size);
        font-weight: var(--base-font-weight);
        color: #6f6d6d
    }

    .crash-bet-user-name:after {
        background: linear-gradient(90deg, transparent, var(--panel-background))
    }

    .bet-separator {
        display: none;
        width: var(--separator-width);
        height: 3.3rem;
        margin: auto 0
    }

    .crash-history-bets .bet-separator,
    .user-history-dataset .bet-separator {
        display: block
    }

    .crash-bet-separator {
        fill: #6f6d6d
    }

    .crash-bet[data-status=win]>.crash-bet-user+.crash-bet-separator {
        fill: rgba(var(--win-rgb), .5)
    }

    .crash-bet[data-status=lose]>.crash-bet-user+.crash-bet-separator {
        fill: rgba(var(--lose-rgb), .5)
    }

    .crash-bet[data-status=win]>.crash-bet-result+.crash-bet-separator {
        fill: rgba(var(--win-rgb), 1)
    }

    .crash-bet[data-status=lose]>.crash-bet-result+.crash-bet-separator {
        fill: rgba(var(--lose-rgb), 1)
    }

    .crash-bet-items {
        display: none;
        align-items: center;
        padding-left: var(--medium-gap)
    }

    .user-history-dataset .crash-bet-items {
        display: flex
    }

    .crash-bet-item,
    .crash-bet-item-thumbnail {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 6.6rem;
        height: 6.6rem
    }

    .crash-bet-item-thumbnail {
        position: relative
    }

    .crash-bet-item-image {
        position: absolute;
        margin-left: -.1rem;
        width: 6rem;
        height: 6rem
    }

    .crash-bet-item-circle {
        width: 5.5rem;
        height: 5.5rem;
        fill: transparent;
        stroke: #ccc;
        border-radius: 50%;
        background: radial-gradient(#999, var(--panel-background))
    }

    .covert>.crash-bet-item-circle {
        background: radial-gradient(#d85752, #94443f, #94443f, var(--panel-background))
    }

    .classified>.crash-bet-item-circle {
        background: radial-gradient(#c142de, #892e9e, #892e9e, var(--panel-background))
    }

    .restricted>.crash-bet-item-circle {
        background: radial-gradient(#7f50f6, #5634ae, #5634ae, var(--panel-background))
    }

    .mil-spec>.crash-bet-item-circle {
        background: radial-gradient(#6c97d4, #3949a7, #3949a7, var(--panel-background))
    }

    .industrial-grade>.crash-bet-item-circle {
        background: radial-gradient(#6c97d4, #245890, #245890, var(--panel-background))
    }

    .consumer-grade>.crash-bet-item-circle {
        background: radial-gradient(#fff, #909090, #909090, var(--panel-background))
    }

    .crash-bet-default-item-icon {
        width: 5.5rem;
        height: 5.5rem;
        border-radius: 50%;
        fill: hsla(0, 0%, 100%, .6);
        background: #063
    }

    .crash-bet-additional-items {
        margin-left: .5rem;
        color: #6f6d6d
    }

    .crash-bet-result-value {
        width: 10rem
    }

    .crash-bet-status {
        display: none;
        align-items: center;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 45"><g stroke="%236f6d6d" fill="none"><path d="M 8.07,5.62 C 6.14,5.54 4.34,6.14 3.08,8.61 1.45,12.13 1.15,14.83 1.04,19.13 c -0.1,4.13 2.11,5.24 4.54,3.73 2.43,-1.51 2,-1.64 4.2,-3.11 3.49,-2.11 7.23,-2.1 10.48,0 2.19,1.47 1.77,1.6 4.2,3.11 2.43,1.51 4.64,0.39 4.54,-3.73 C 28.89,14.83 28.59,12.13 26.96,8.61 25.7,6.14 23.9,5.54 21.97,5.62 19.59,5.73 17.4,6.83 15.04,6.84 12.69,6.85 10.2,5.78 8.07,5.62 Z" /><path d="m 8,8.5 c -0.83,0 -1.5,0.67 -1.5,1.5 v 1.25 h -1.25 c -0.83,0 -1.5,0.67 -1.5,1.5 0,0.83 0.67,1.5 1.5,1.5 h 1.25 v 1.25 c 0,0.83 0.67,1.5 1.5,1.5 0.83,0 1.5,-0.67 1.5,-1.5 v -1.25 h 1.25 c 0.83,0 1.5,-0.67 1.5,-1.5 0,-0.83 -0.67,-1.5 -1.5,-1.5 H 9.5 V 10 c 0,-0.83 -0.67,-1.5 -1.5,-1.5 z" /><circle cx="21.5" cy="10" r="1" /><circle cx="21.5" cy="15.5" r="1" /><circle cx="18.75" cy="12.75" r="1" /><circle cx="24.25" cy="12.75" r="1" /></g></svg>');
        background-repeat: no-repeat;
        background-position: 2.7rem 75%;
        background-size: 30%
    }

    .crash-history-bets .crash-bet-status,
    .user-history-dataset .crash-bet-status {
        display: flex
    }

    .crash-bet[data-status=win] .crash-bet-status {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 45"><g><path fill="%2311af69" fill-opacity="1" d="M 24,45 V 22.5 H 11 l 22,-22 22,22 H 42 V 45 Z" /><path fill="%2311af69" fill-opacity="0.5" d="M 6.5,45 V 33.5 H 0 l 11,-11 11,11 H 15.5 V 45 Z" /></g></svg>');
        background-position: 90% 100%;
        background-size: 27.5%
    }

    .crash-bet[data-status=lose] .crash-bet-status {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 55 45"><g><path fill="%23e76577" fill-opacity="1" d="M 24,0 24,22.5 H 11 l 22,22 22,-22 H 42 V 0 Z" /><path fill="%23e76577" fill-opacity="0.5" d="M 6.5,0 V 11.5 H 0 l 11,11 11,-11 H 15.5 V 0 Z" /></g></svg>');
        background-position: 90% 0;
        background-size: 27.5%
    }

    .crash-bet-status .crash-bet-status-item {
        display: none
    }

    .crash-bet[data-status=win] .crash-bet-status-item {
        display: block;
        margin-left: 3rem
    }

    .crash-bet[data-status=lose] .crash-bet-status-in-round,
    .crash-bet[data-status=win] .crash-bet-status-in-round {
        display: none
    }

    .crash-bet-status-in-round {
        display: inline-block;
        margin-left: 8rem;
        font-size: 1.5rem;
        text-transform: uppercase;
        color: #6f6d6d
    }
}

@media screen and (min-width:992px) {

    .crash-bets-wrapper,
    .crash-history-bets-wrapper {
        padding: 0 var(--large-gap)
    }

    .crash-bet,
    .crash-history-bets .crash-bet {
        grid-template-columns: 1.1fr var(--separator-width) 1fr 10rem 10rem 10rem var(--separator-width) 16.4rem
    }

    .empty-bet-list {
        height: 100%
    }

    .empty-bet-list-text {
        font-size: 3.6rem
    }

    .crash-bets {
        height: var(--crash-bets-wrapper-height);
        min-height: 0;
        max-height: none;
        overflow: visible
    }

    .crash-history-bets {
        height: var(--crash-history-bets-wrapper-height)
    }

    .crash-bet-list {
        height: 100%
    }

    .crash-bet-list.has-padding-correction {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0;
        overflow-y: scroll
    }

    .bet-wrapper.mobile-tablet {
        display: none
    }

    .bet-wrapper.desktop-only {
        display: list-item
    }

    .bet-separator,
    .bet-user-name {
        display: block
    }

    .crash-bet-items {
        display: flex;
        padding-left: 3.4rem
    }

    .crash-bet-status {
        display: flex;
        background-position: 3.5rem 75%;
        background-size: 30%
    }

    .crash-bet[data-status=win] .crash-bet-status {
        background-position: 80% 100%;
        background-size: 31%
    }

    .crash-bet[data-status=lose] .crash-bet-status {
        background-position: 80% 0;
        background-size: 31%
    }

    .crash-bet[data-status=win] .crash-bet-status-item {
        margin-left: 3rem
    }

    .crash-bet-status-in-round {
        margin-left: 8.8rem
    }
}

.crash-hash-wrapper {
    grid-area: crash-hash;
    display: flex;
    padding: var(--small-gap) var(--large-gap) 0
}

.crash-hash-wrapper.desktop-only {
    display: none
}

.crash-hash {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 var(--inner-gap);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel-background)
}

.crash-hash-label {
    text-transform: uppercase;
    color: var(--label-color)
}

.crash-hash-value {
    font-family: Lekton, monospace;
    font-size: 1.5rem;
    color: var(--label-color)
}

.crash-hash-provably-fair-link {
    color: var(--link-inactive-color);
    cursor: pointer
}

.crash-hash-provably-fair-link:active,
.crash-hash-provably-fair-link:focus,
.crash-hash-provably-fair-link:hover {
    color: var(--link-hover-color)
}

@media screen and (min-width:992px) {
    .crash-hash-wrapper.desktop-only {
        display: flex
    }
}

.crash-betting-wrapper {
    grid-area: crash-betting-board;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.crash-betting-board {
    --header-height: 4.2rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--header-height) auto 1fr;
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.crash-betting-header {
    display: grid;
    grid-template-columns: auto 0 1fr;
    align-items: center;
    width: 100%;
    height: var(--header-height)
}

.crash-betting-rules {
    margin: var(--crash-betting-rules-margin);
    text-align: left;
    color: var(--link-inactive-color)
}

.crash-betting-rules:hover {
    color: var(--link-hover-color)
}

.crash-betting-header.admin {
    grid-template-columns: auto 1fr auto;
    grid-gap: var(--small-gap)
}

.crash-betting-heading {
    margin: 0 var(--medium-gap) 0 0;
    white-space: nowrap;
    font-size: var(--base-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    text-align: left;
    color: #fff
}

.crash-betting-header-additions {
    display: flex;
    justify-content: center;
    align-items: center
}

.crash-betting-header-twist {
    display: grid;
    grid-template-columns: auto 1.1fr;
    grid-gap: var(--small-gap)
}

.crash-betting-header-crash-button,
.crash-betting-header-twist-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 3.2rem;
    padding: 0 var(--small-gap);
    font-size: 1rem;
    text-transform: uppercase;
    color: #ff6d63;
    border-radius: var(--radius);
    background: #2e2228;
    cursor: pointer
}

.crash-betting-header-crash-button:active,
.crash-betting-header-crash-button:focus,
.crash-betting-header-twist-button:active,
.crash-betting-header-twist-button:focus {
    background: #2e2228
}

.crash-betting-edit,
.crash-betting-edit-link,
.crash-betting-save,
.crash-betting-save-link {
    display: flex;
    justify-content: flex-end;
    align-items: center
}

.crash-betting-edit-link,
.crash-betting-save-link {
    color: var(--link-inactive-color);
    cursor: pointer
}

.crash-betting-edit-link:active,
.crash-betting-edit-link:focus,
.crash-betting-save-link.active,
.crash-betting-save-link:active,
.crash-betting-save-link:focus {
    color: var(--link-hover-color)
}

.crash-betting-edit-link:active .crash-betting-edit-icon,
.crash-betting-edit-link:focus .crash-betting-edit-icon,
.crash-betting-save-link.active .crash-betting-save-icon,
.crash-betting-save-link:active .crash-betting-save-icon,
.crash-betting-save-link:focus .crash-betting-save-icon {
    fill: #fff
}

.crash-betting-edit-heading,
.crash-betting-save-heading {
    margin: 0 0 auto 0;
    padding-right: .5rem;
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    text-align: right
}

.admin .crash-betting-edit-heading,
.admin .crash-betting-save-heading {
    width: 6rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

.crash-betting-edit-icon,
.crash-betting-save-icon {
    display: block;
    width: 2rem;
    height: 2rem;
    fill: var(--icon-inactive-fill)
}

.crash-betting-form {
    --multiplier-width: 1fr;
    --multiplier-height: 4.6rem;
    --submit-height: 4.6rem;
    position: relative;
    display: grid;
    grid-template-areas: "crash-betting-multipliers crash-betting-multipliers" "crash-betting-field crash-betting-submit";
    grid-template-columns: 1fr 3fr;
    grid-template-rows: var(--multiplier-height) var(--submit-height);
    grid-gap: var(--inner-gap)
}

.crash-betting-multipliers {
    grid-area: crash-betting-multipliers;
    display: grid;
    grid-template-columns: repeat(5, var(--multiplier-width));
    grid-column-gap: var(--tiny-gap);
    width: 100%
}

.crash-betting-multiplier,
.crash-betting-multiplier-add-button {
    display: flex;
    justify-content: center;
    align-items: center
}

.crash-betting-multiplier-add-button {
    width: 3rem;
    height: 3rem;
    font-size: 3rem;
    font-weight: var(--dark-font-weight);
    color: #636365;
    border-radius: 50%;
    border: 2px solid #636365;
    cursor: pointer
}

.crash-betting-multiplier-add-button:active,
.crash-betting-multiplier-add-button:focus {
    color: #fff;
    border: 2px solid #fff;
    outline: none
}

.crash-betting-multiplier-field {
    display: flex;
    text-align: center;
    width: 100%;
    padding: .5rem 1rem;
    height: 100%;
    font-family: Argentum, sans-serif;
    font-weight: var(--deep-font-weight);
    border-radius: var(--radius);
    outline: none
}

.crash-betting-multiplier-radio-label {
    display: block;
    width: 100%;
    height: 100%
}

.crash-betting-multiplier-radio {
    display: none
}

.crash-betting-multiplier-value {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-family: Argentum, sans-serif;
    font-weight: var(--deep-font-weight);
    color: #636365;
    border-radius: var(--radius);
    border: 1px dashed #636365;
    cursor: pointer
}

.crash-betting-multiplier-radio:checked+.crash-betting-multiplier-value {
    color: #fff;
    border: 1px dashed #ff8300;
    background: rgba(255, 131, 0, .25)
}

.crash-betting-multiplier-radio:disabled+.crash-betting-multiplier-value {
    color: #636365;
    border: 1px dashed #636365;
    cursor: default
}

.crash-betting-multiplier-icon {
    display: block;
    width: 2.5rem;
    height: 2.5rem;
    fill: #636365
}

.crash-betting-multiplier-radio:checked+.crash-betting-multiplier-value>.crash-betting-multiplier-icon {
    fill: #fff
}

.crash-betting-field {
    grid-area: crash-betting-field;
    height: 100%;
    font-family: Argentum, sans-serif;
    font-size: 2.5rem;
    font-weight: var(--deep-font-weight);
    text-align: center
}

.crash-betting-field::-moz-placeholder {
    font-size: 3.5rem;
    color: #ccc;
    opacity: 1
}

.crash-betting-field:-ms-input-placeholder {
    font-size: 3.5rem;
    color: #ccc;
    opacity: 1
}

.crash-betting-field::placeholder {
    font-size: 3.5rem;
    color: #ccc;
    opacity: 1
}

.crash-betting-field:disabled::-moz-placeholder {
    color: #636365
}

.crash-betting-field:disabled:-ms-input-placeholder {
    color: #636365
}

.crash-betting-field:disabled,
.crash-betting-field:disabled::placeholder {
    color: #636365
}

.crash-betting-submit {
    grid-area: crash-betting-submit;
    height: auto;
    font-family: Montserrat, sans-serif;
    font-size: 1.8rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #d97000
}

.crash-betting-submit-value {
    font-family: Argentum, sans-serif;
    font-weight: var(--base-font-weight)
}

.crash-betting-submit:active,
.crash-betting-submit:focus {
    background: #ff8400;
    box-shadow: 0 0 1rem #ff8400
}

@media(hover:hover) and (pointer:fine) {

    .crash-betting-header-crash-button:hover,
    .crash-betting-header-twist-button:hover {
        background: #4d2e3d
    }

    .crash-betting-edit-link:hover {
        color: var(--link-hover-color)
    }

    .crash-betting-edit-link:hover .crash-betting-edit-icon {
        fill: var(--link-hover-color)
    }

    .crash-betting-multiplier-add-button:hover {
        color: #fff;
        border: 2px solid #fff
    }

    .crash-betting-submit:hover {
        background: #ff8400;
        box-shadow: 0 0 1rem #ff8400
    }
}

@media screen and (min-width:768px) {
    .crash-betting-wrapper {
        padding: var(--tabblet-top-gap) 0 var(--small-gap)
    }
}

@media screen and (min-width:992px) {
    .crash-betting-header {
        grid-template-columns: 1.2fr 1fr 1fr
    }

    .crash-betting-form {
        --multiplier-width: 6rem;
        --submit-height: 7rem;
        grid-template-areas: "crash-betting-multipliers crash-betting-field" "crash-betting-submit crash-betting-submit";
        grid-template-columns: 1fr 8.8rem
    }

    .crash-betting-multipliers {
        grid-column-gap: var(--small-gap);
        width: auto
    }

    .crash-betting-multiplier {
        width: var(--multiplier-width)
    }

    #crash-betting-header-twist-field {
        height: 3.2rem;
        text-align: center
    }

    .crash-betting-header-crash-button {
        letter-spacing: .5rem
    }

    .crash-betting-submit {
        font-size: 2.1rem
    }
}

@media screen and (min-width:992px) {
    .crash-betting-wrapper {
        padding: 0 var(--large-gap) var(--large-gap) 0
    }

    .crash-betting-board {
        grid-row-gap: var(--small-gap);
        padding: var(--inner-gap)
    }

    .crash-betting-header-crash-button,
    .crash-betting-header-twist-button {
        padding: 0 var(--medium-gap)
    }

    .admin .crash-betting-edit-heading,
    .admin .crash-betting-save-heading {
        width: auto;
        overflow: initial
    }

    .crash-betting-form {
        grid-gap: var(--large-gap)
    }
}

.crash-game {
    position: relative;
    grid-area: crash-game;
    display: flex;
    justify-content: center;
    align-items: center;
    height: calc(var(--app-height, 100vh)*0.4);
    margin: 0 calc(0% - var(--outer-gap));
    overflow: hidden
}

#crash-widget,
.crash-video {
    position: absolute;
    height: 180%
}

.crash-video {
    opacity: 0;
    transition: opacity .4s ease
}

.crash-video.-show-video {
    opacity: 1
}

.crash-platform-item {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 65%;
    z-index: 0
}

.crash-platform-item-image {
    display: block;
    height: 0%;
    margin: 2rem 0 0 -1rem;
    margin: 2rem 0 0;
    opacity: 1
}

.-swow-item>.crash-platform-item-image {
    height: 52%
}

@media screen and (min-width:768px) {
    .crash-game {
        height: 42rem;
        margin: -6rem -10rem
    }

    #crash-widget,
    .crash-video {
        height: 150%
    }

    .crash-platform-item {
        height: 100%
    }

    .-swow-item>.crash-platform-item-image {
        height: 28%
    }
}

@media screen and (min-width:992px) {
    .crash-game {
        height: 44.5rem;
        margin: -10rem -1.5rem
    }

    #crash-widget,
    .crash-video {
        height: 150%
    }

    .crash-platform-item {
        height: 100%
    }

    .-swow-item>.crash-platform-item-image {
        height: 28%
    }
}

.crash-summary-wrapper {
    grid-area: crash-summary
}

.crash-history-summary-wrapper,
.crash-summary-wrapper {
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.crash-history-summary-wrapper {
    grid-area: crash-history-summary
}

.crash-history-summary,
.crash-summary {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: var(--inner-gap);
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.crash-history-summary-heading {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    font-weight: var(--base-font-weight);
    text-transform: uppercase
}

.crash-multipliers {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden
}

.crash-multipliers:after {
    width: 5rem;
    background: linear-gradient(90deg, transparent, var(--panel-background))
}

.crash-multiplier {
    margin: 0 0 0 .3rem
}

.crash-history-link {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.3rem;
    height: 2.6rem;
    font-size: 1.2rem;
    color: #fff;
    border-radius: var(--radius);
    outline: none;
    background: var(--background);
    cursor: pointer
}

.crash-history-link:active,
.crash-history-link:focus {
    background: var(--hover-background);
    box-shadow: 0 0 .5rem var(--hover-background)
}

.crash-multiplier[data-color="1"] {
    --background: #d7334b;
    --hover-background: #f05168
}

.crash-multiplier[data-color="2"] {
    --background: #eb8b01;
    --hover-background: #ffa11b
}

.crash-multiplier[data-color="3"] {
    --background: #00af67;
    --hover-background: #14c87e
}

.crash-multiplier[data-color="4"] {
    --background: #00aeef;
    --hover-background: #19c1ff
}

.crash-multiplier[data-color="5"] {
    --background: #5f41d5;
    --hover-background: #7d61ee
}

.crash-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.crash-dashboard-indicator {
    --icon-size: 2.5rem;
    --value-font-size: 1.6rem;
    display: grid;
    grid-template-areas: "crash-dashboard-indicator-icon crash-dashboard-indicator-value" "crash-dashboard-indicator-icon crash-dashboard-indicator-name";
    grid-template-columns: var(--icon-size) 1fr;
    grid-template-rows: var(--value-font-size) 1fr;
    grid-column-gap: var(--small-gap);
    grid-row-gap: var(--tiny-gap)
}

.crash-dashboard-indicator-icon {
    grid-area: crash-dashboard-indicator-icon;
    display: block;
    margin: auto;
    width: var(--icon-size);
    height: var(--icon-size);
    fill: #ffcd47;
    filter: drop-shadow(0 0 .5rem rgba(255, 205, 71, .75))
}

.crash-dashboard-indicator-value {
    grid-area: crash-dashboard-indicator-value;
    text-align: left;
    font-family: Argentum, sans-serif;
    font-size: var(--value-font-size);
    font-weight: var(--light-font-weight);
    color: var(--indicator-value-color)
}

.crash-dashboard-indicator-name {
    grid-area: crash-dashboard-indicator-name;
    text-align: left;
    font-size: .9rem;
    text-transform: uppercase;
    color: var(--indicator-name-color)
}

@media(hover:hover) and (pointer:fine) {
    .crash-history-link:hover {
        background: var(--hover-background);
        box-shadow: 0 0 .5rem var(--hover-background)
    }
}

@media screen and (min-width:375px) {
    .crash-dashboard-indicator-name {
        font-size: 1rem
    }
}

@media screen and (min-width:411px) {
    .crash-dashboard-indicator {
        grid-column-gap: 1.3rem
    }

    .crash-dashboard {
        justify-content: space-around
    }
}

@media screen and (min-width:768px) {
    .crash-summary-wrapper {
        padding: 0 0 var(--small-gap)
    }

    .crash-history-summary-wrapper {
        padding: var(--tabblet-top-gap) var(--outer-gap) var(--small-gap)
    }

    .crash-history-summary {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr
    }

    .crash-dashboard {
        justify-content: space-between
    }
}

@media screen and (min-width:992px) {
    .crash-summary-wrapper {
        padding: 0 var(--large-gap) var(--small-gap)
    }

    .crash-history-summary-wrapper {
        padding: 0 var(--large-gap) var(--medium-gap)
    }

    .crash-summary {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr
    }

    .crash-history-summary {
        grid-template-columns: 1fr 20rem 1fr;
        grid-template-rows: 1fr
    }

    .crash-history-summary-heading {
        font-size: 2.5rem
    }

    .crash-multipliers {
        padding: 0 0 0 .2rem
    }

    .crash-history-provably-fair {
        font-size: 1.7rem;
        font-weight: var(--deep-font-weight);
        text-transform: uppercase;
        color: #fff;
        background: linear-gradient(to bottom right, #ffa800, #ff6000)
    }

    .crash-history-provably-fair:active,
    .crash-history-provably-fair:focus,
    .crash-history-provably-fair:hover {
        background: linear-gradient(to bottom right, #ffb933, #ff8033)
    }

    .crash-dashboard {
        justify-content: space-around
    }

    .crash-dashboard-indicator {
        --icon-size: 2.9rem;
        --value-font-size: 1.8rem
    }
}

#crash-outer-hexagon {
    fill: #1e2025
}

#crash-inner-hexagon {
    fill: #29272c
}

.crash #crash-text {
    -webkit-animation-name: crash-text;
    animation-name: crash-text;
    -webkit-animation-duration: .15s;
    animation-duration: .15s;
    -webkit-animation-timing-function: easy;
    animation-timing-function: easy;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes crash-text {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-20deg)
    }
}

@keyframes crash-text {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(-20deg)
    }
}

#crash-text-top {
    fill: url(#crash-text-top-gradient)
}

.crash #crash-text-top {
    -webkit-animation-name: crash-text-top;
    animation-name: crash-text-top;
    -webkit-animation-duration: .3s;
    animation-duration: .3s;
    -webkit-animation-timing-function: easy;
    animation-timing-function: easy;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes crash-text-top {
    0% {
        transform: translate(4px, 4px)
    }

    50% {
        transform: translate(2px, 2px)
    }

    to {
        transform: translate(-2px, -2px)
    }
}

@keyframes crash-text-top {
    0% {
        transform: translate(4px, 4px)
    }

    50% {
        transform: translate(2px, 2px)
    }

    to {
        transform: translate(-2px, -2px)
    }
}

#crash-text-bottom {
    fill: url(#crash-text-bottom-gradient)
}

.crash #crash-text-bottom {
    -webkit-animation-name: crash-text-bottom;
    animation-name: crash-text-bottom;
    -webkit-animation-duration: .45s;
    animation-duration: .45s;
    -webkit-animation-timing-function: easy;
    animation-timing-function: easy;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    transform-origin: 50% 50%;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

@-webkit-keyframes crash-text-bottom {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(1.5deg)
    }

    to {
        transform: rotate(2deg)
    }
}

@keyframes crash-text-bottom {
    0% {
        transform: rotate(0deg)
    }

    50% {
        transform: rotate(1.5deg)
    }

    to {
        transform: rotate(2deg)
    }
}

#crash-platform {
    opacity: 0
}

.-swow-platform #crash-platform {
    opacity: 1
}

#crash-inner-circle,
#crash-outer-circle,
#crash-platform-waves {
    stroke: var(--platform-color)
}

#crash-outer-circle {
    fill: none;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 12, 12
}

#crash-inner-circle {
    fill: url(#crash-platform-gradient);
    fill-opacity: .5;
    stroke-width: 3
}

#crash-runner {
    -webkit-animation-name: runner;
    animation-name: runner;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%;
    display: inline-block
}

@-webkit-keyframes runner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

@keyframes runner {
    0% {
        transform: rotate(0deg)
    }

    to {
        transform: rotate(1turn)
    }
}

#crash-runner-body,
#crash-runner-path {
    fill: var(--platform-color)
}

#crash-runner-path {
    fill-opacity: .1
}

#crash-runner-tail-1 {
    fill: url(#crash-runner-tail-1-gradient)
}

#crash-runner-tail-2 {
    fill: url(#crash-runner-tail-2-gradient)
}

#crash-runner-tail-3 {
    fill: url(#crash-runner-tail-3-gradient)
}

#crash-runner-tail-4 {
    fill: url(#crash-runner-tail-4-gradient)
}

#path895,
#path897,
#path899,
#path901,
#path903,
#path905 {
    fill: none;
    stroke-width: 1
}

#path907,
#path909,
#path911,
#path913,
#path915,
#path917 {
    fill: none;
    stroke-width: .5
}

#crash-counter-text {
    font-family: Lekton, monospace;
    font-size: 3rem;
    font-weight: 700;
    text-align: center;
    text-anchor: middle
}

#crash-counter-text-tspan {
    fill: #ff0
}

.waiting #crash-logo {
    fill: url(#crash-logo-gradient);
    fill-rule: nonzero
}

#crash-logo {
    fill: url(#crash-animating-logo-gradient);
    fill-rule: nonzero
}

#crash-lightning {
    fill: url(#crash-animating-lightning-gradient)
}

.waiting #crash-lightning {
    opacity: 0
}

.waiting #crash-logo {
    -webkit-animation-name: logo-scale;
    animation-name: logo-scale;
    -webkit-animation-duration: 1s, 1s;
    animation-duration: 1s, 1s;
    -webkit-animation-timing-function: easy;
    animation-timing-function: easy;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    transform-origin: 50% 50%
}

@-webkit-keyframes logo-scale {
    0% {
        transform: scale(1)
    }

    5% {
        transform: scale(1.1)
    }

    10% {
        transform: scale(1)
    }

    15% {
        transform: scale(1.1)
    }

    20% {
        transform: scale(1)
    }

    to {
        transform: scale(1)
    }
}

@keyframes logo-scale {
    0% {
        transform: scale(1)
    }

    5% {
        transform: scale(1.1)
    }

    10% {
        transform: scale(1)
    }

    15% {
        transform: scale(1.1)
    }

    20% {
        transform: scale(1)
    }

    to {
        transform: scale(1)
    }
}

#crash-text {
    opacity: 0
}

.crash #crash-text {
    opacity: 1
}

.-swow-platform #crash-emblem,
.crash #crash-emblem {
    opacity: 0
}

#crash-platform-waves {
    stroke-opacity: .33
}

#crash-platform-gradient stop,
#crash-runner-tail-1-gradient stop,
#crash-runner-tail-2-gradient stop,
#crash-runner-tail-3-gradient stop,
#crash-runner-tail-4-gradient stop {
    stop-color: var(--platform-color)
}

#crash-widget.contraband,
#crash-widget.exotic {
    --platform-color: rgba(255, 174, 57, 0.8784313725490196)
}

#crash-widget.covert,
#crash-widget.extraordinary,
#crash-widget.knives {
    --platform-color: #d85752
}

#crash-widget.classified {
    --platform-color: #c142de
}

#crash-widget.restricted {
    --platform-color: #7f50f6
}

#crash-widget.mil-spec,
#crash-widget.mil-spec-grade {
    --platform-color: rgba(75, 105, 255, 0.8784313725490196)
}

#crash-widget.industrial,
#crash-widget.industrial-grade {
    --platform-color: #6c97d4
}

#crash-widget,
#crash-widget.base,
#crash-widget.base-grade,
#crash-widget.consumer,
#crash-widget.consumer-grade {
    --platform-color: #999
}

.jackpot-bets-wrapper {
    --bet-height: 7rem;
    --bet-wrapper: calc(var(--bet-height) + 0.6rem);
    grid-area: jackpot-bets;
    display: flex;
    padding: 0 var(--outer-gap) .2rem
}

.jackpot-bets {
    width: 100%;
    min-height: var(--bet-wrapper);
    max-height: calc(var(--bet-wrapper)*4);
    overflow: hidden
}

.jackpot-bet {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background: var(--panel-background)
}

.jackpot-bet-user-name {
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight)
}

.jackpot-bet-user-name:after {
    background: linear-gradient(90deg, transparent, var(--panel-background))
}

.jackpot-bet-chance,
.jackpot-bet-size {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.jackpot-bet-chance-value,
.jackpot-bet-size-value {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Argentum, sans-serif;
    font-size: 1.6rem
}

.jackpot-bet-chance,
.jackpot-bet-size-value {
    font-weight: var(--light-font-weight)
}

.jackpot-bet-size-value {
    font-weight: var(--dark-font-weight)
}

.jackpot-bet-items {
    display: none
}

.jackpot-bet-item-thumbnail {
    display: flex;
    justify-content: center;
    align-items: center
}

.jackpot-bet-item-image {
    width: 6.4rem;
    height: 6.4rem
}

.jackpot-bet-item-empty-icon {
    width: 6.4rem;
    height: 6.4rem;
    fill: #282a36
}

.jackpot-bet-tikets {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    overflow: hidden
}

.jackpot-bet-ticket {
    display: grid;
    grid-template-columns: 6fr 2fr 5fr;
    height: 1.1rem;
    font-family: Lekton, monospace;
    font-size: 1.1rem;
    color: #888
}

.jackpot-bet-ticket-from {
    text-align: right
}

.jackpot-bet-ticket-dash {
    text-align: center
}

.jackpot-bet-ticket-to {
    text-align: left
}

@media screen and (min-width:768px) {
    .jackpot-bets-wrapper {
        height: var(--jackpot-bets-wrapper-height);
        padding: 0 0 .2rem
    }

    .jackpot-bet {
        grid-template-columns: 1fr 1fr 1fr 1fr;
        background: var(--panel-background)
    }
}

@media screen and (min-width:992px) {
    .jackpot-bets-wrapper {
        padding: 0 var(--large-gap)
    }

    .jackpot-bets {
        height: var(--jackpot-bets-wrapper-height);
        min-height: 0;
        max-height: none;
        overflow: visible
    }

    .jackpot-bet-list {
        height: 100%
    }

    .jackpot-bet-list.has-padding-correction {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0;
        overflow-y: scroll
    }

    .jackpot-bet {
        grid-template-columns: 3fr var(--separator-width) 1fr var(--separator-width) 1fr var(--separator-width) 4fr var(--separator-width) .8fr;
        background: var(--panel-background)
    }

    .jackpot-bet-items {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        width: 100%;
        padding: 0 var(--medium-gap)
    }

    .jackpot-bet-separator {
        fill: #282b35
    }
}

.jackpot-betting-wrapper {
    grid-area: jackpot-betting-board;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.jackpot-betting {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: var(--inner-gap);
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.jackpot-betting-start-button {
    height: 4.6rem;
    font-size: 1.8rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #d97000
}

.jackpot-betting-start-button-value {
    font-family: Argentum, sans-serif;
    font-weight: var(--base-font-weight)
}

.jackpot-betting-start-button:active,
.jackpot-betting-start-button:focus {
    background: #ff8400;
    box-shadow: 0 0 1rem #ff8400
}

.jackpot-dashboard {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.jackpot-dashboard-indicator {
    --icon-size: 2.5rem;
    --value-font-size: 1.6rem;
    display: grid;
    grid-template-areas: "jackpot-dashboard-indicator-icon jackpot-dashboard-indicator-value" "jackpot-dashboard-indicator-icon jackpot-dashboard-indicator-name";
    grid-template-columns: var(--icon-size) 1fr;
    grid-template-rows: var(--value-font-size) 1fr;
    grid-column-gap: var(--small-gap);
    grid-row-gap: var(--tiny-gap)
}

.jackpot-dashboard-indicator-icon {
    grid-area: jackpot-dashboard-indicator-icon;
    display: block;
    margin: auto;
    width: var(--icon-size);
    height: var(--icon-size);
    fill: #ffcd47;
    filter: drop-shadow(0 0 .5rem rgba(255, 205, 71, .75))
}

.jackpot-dashboard-indicator-value {
    grid-area: jackpot-dashboard-indicator-value;
    text-align: left;
    font-family: Argentum, sans-serif;
    font-size: var(--value-font-size);
    font-weight: var(--light-font-weight);
    color: var(--indicator-value-color)
}

.jackpot-dashboard-indicator-name {
    grid-area: jackpot-dashboard-indicator-name;
    text-align: left;
    font-size: .9rem;
    text-transform: uppercase;
    color: var(--indicator-name-color)
}

@media(hover:hover) and (pointer:fine) {
    .jackpot-betting-start-button:hover {
        background: #ff8400;
        box-shadow: 0 0 1rem #ff8400
    }
}

@media screen and (min-width:375px) {
    .jackpot-dashboard-indicator-name {
        font-size: 1rem
    }
}

@media screen and (min-width:411px) {
    .jackpot-dashboard-indicator {
        grid-column-gap: 1.3rem
    }

    .jackpot-dashboard {
        justify-content: space-around
    }
}

@media screen and (min-width:768px) {
    .jackpot-betting-wrapper {
        padding: 0 0 var(--small-gap)
    }

    .jackpot-dashboard {
        justify-content: space-between
    }
}

@media screen and (min-width:992px) {
    .jackpot-betting-wrapper {
        padding: 0 var(--large-gap) var(--medium-gap)
    }

    .jackpot-betting {
        grid-template-columns: 1fr calc(51.4rem + var(--large-gap));
        grid-template-rows: 1fr;
        padding: 0
    }

    .jackpot-betting-start-button {
        height: 100%;
        font-size: 2.5rem
    }

    .jackpot-dashboard {
        justify-content: space-around
    }

    .jackpot-dashboard-indicator {
        --icon-size: 2.9rem;
        --value-font-size: 1.8rem
    }
}

.jackpot-items-wrapper {
    grid-area: jackpot-items-board;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.jackpot-items {
    --jackpot-item-list-width: calc(var(--item-card-width)*3 + var(--item-cards-grid-gap)*2);
    grid-template-columns: 1fr;
    width: 100%;
    padding: var(--inner-gap);
    background: var(--panel-background)
}

.jackpot-item-list,
.jackpot-items {
    display: grid;
    border-radius: var(--radius)
}

.jackpot-item-list {
    grid-template-columns: repeat(4, 1fr);
    grid-gap: var(--item-cards-grid-gap);
    height: calc(var(--item-card-height)*2 + var(--item-cards-grid-gap));
    -ms-scroll-snap-type: y mandatory;
    scroll-snap-type: y mandatory;
    overflow-y: auto;
    overflow-x: hidden;
    scroll-behavior: smooth
}

.jackpot-item {
    scroll-snap-align: start
}

.jackpot-item-empty {
    display: flex;
    justify-content: center;
    width: var(--item-card-width);
    height: var(--item-card-height);
    border-radius: var(--radius);
    background: #1d1f2b
}

.jackpot-item-empty-icon {
    width: calc(var(--item-card-width)*0.9);
    height: calc(var(--item-card-width)*0.9);
    fill: #282a36
}

.jackpot-item>.item-card {
    width: var(--item-card-width);
    height: var(--item-card-height);
    border-radius: var(--radius)
}

.jackpot-item-list-scroll {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.jackpot-item-list-scroll.desktop-only {
    display: none
}

.jackpot-item-list-scroll-point {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 2.5rem;
    height: 2.5rem;
    cursor: pointer
}

.jackpot-item-list-scroll-point:after {
    content: "";
    display: block;
    width: 1rem;
    height: 1rem;
    border-radius: var(--radius);
    background: #5c5e66
}

.jackpot-item-list-scroll-point.active:after {
    width: 1.5rem;
    height: 1.5rem;
    background: #cfcfcf;
    box-shadow: 0 0 1rem #cfcfcf
}

@media screen and (min-width:768px) {
    .jackpot-items-wrapper {
        padding: var(--tabblet-top-gap) 0 var(--small-gap)
    }

    .jackpot-item-list {
        height: 100%;
        grid-template-columns: repeat(3, 1fr)
    }
}

@media screen and (min-width:992px) {
    .jackpot-items-wrapper {
        padding: 0 var(--large-gap) var(--medium-gap) var(--large-gap)
    }

    .jackpot-items {
        --jackpot-item-list-width: calc(var(--item-card-width)*4 + var(--item-cards-grid-gap)*3);
        grid-template-columns: var(--jackpot-item-list-width) 1fr;
        padding: var(--item-cards-grid-gap)
    }

    .jackpot-item-list {
        grid-template-columns: repeat(4, 1fr);
        scrollbar-width: none
    }

    .with-scroll::-webkit-scrollbar {
        width: 0
    }

    .jackpot-item-list-scroll.desktop-only {
        display: flex
    }
}

.jackpot-spinner-wrapper {
    --avatar-width: 10.4rem;
    grid-area: jackpot-spinner;
    display: flex;
    padding: 0 var(--outer-gap) .2rem;
    contain: layout style
}

.jackpot-chances {
    display: grid;
    grid-template-rows: 3.3rem var(--avatar-width) 3.3rem;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--panel-background)
}

.jackpot-chances-users-wrapper {
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden
}

.jackpot-chances-users {
    display: flex;
    width: calc(100% - var(--inner-gap)*2);
    overflow: hidden
}

.jackpot-chances-user-list {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center
}

.jackpot-chances-user {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
    width: var(--avatar-width);
    height: var(--avatar-width);
    margin-right: var(--small-gap);
    font-family: Argentum, sans-serif;
    border-radius: var(--radius);
    background: #1f212d
}

.jackpot-chances-user:last-child {
    margin: 0
}

.jackpot-chances-user-chance {
    font-weight: var(--light-font-weight)
}

.jackpot-chances-user-avatar {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5.2rem;
    height: 5.2rem;
    border-radius: var(--radius);
    background: #30373f
}

.jackpot-chances-user-bank {
    font-weight: var(--deep-font-weight);
    color: #fbb700
}

.jackpot-spinner {
    display: grid;
    grid-template-rows: 3.3rem var(--avatar-width) 3.3rem;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius);
    background: var(--panel-background);
    contain: layout style
}

.jackpot-spinner-bottom,
.jackpot-spinner-top {
    display: grid;
    grid-template-columns: 1fr 5.2rem 1fr
}

.jackpot-spinner-bottom-left,
.jackpot-spinner-top-left {
    background: url(data:image/png;base64,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);
    background-size: contain
}

.jackpot-spinner-top-left {
    background-repeat: no-repeat;
    background-position: 100% 0
}

.jackpot-spinner-bottom-left {
    background-repeat: no-repeat;
    background-position: 100% 100%
}

.jackpot-spinner-bottom-center,
.jackpot-spinner-top-center {
    display: flex
}

.jackpot-spinner-top-center {
    align-items: flex-start
}

.jackpot-spinner-bottom-center {
    align-items: flex-end
}

.jackpot-spinner-bottom-icon,
.jackpot-spinner-top-icon {
    width: 5.2rem;
    height: 3rem
}

.jackpot-spinner-bottom-right,
.jackpot-spinner-top-right {
    background: url(data:image/png;base64,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);
    background-size: contain
}

.jackpot-spinner-top-right {
    background-repeat: no-repeat;
    background-position: 0 0
}

.jackpot-spinner-bottom-right {
    background-repeat: no-repeat;
    background-position: 0 100%
}

.jackpot-spinner-users-wrapper {
    position: relative;
    display: flex;
    justify-content: center;
    width: 100%;
    overflow: hidden;
    contain: layout style paint
}

.jackpot-spinner-users-wrapper:after,
.jackpot-spinner-users-wrapper:before {
    content: "";
    position: absolute;
    width: 10%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    transition: opacity .3s ease-out;
    will-change: opacity
}

.jackpot-spinner-users-wrapper.jackpot:after,
.jackpot-spinner-users-wrapper.jackpot:before {
    opacity: 0
}

.jackpot-spinner-users-wrapper:before {
    left: 0;
    background: linear-gradient(90deg, #181c24, rgba(24, 28, 36, .95), rgba(24, 28, 36, .9), rgba(24, 28, 36, .8), rgba(24, 28, 36, 0))
}

.jackpot-spinner-users-wrapper:after {
    right: 0;
    background: linear-gradient(270deg, #181c24, rgba(24, 28, 36, .95), rgba(24, 28, 36, .9), rgba(24, 28, 36, .8), rgba(24, 28, 36, 0))
}

.jackpot-spinner-users {
    display: flex;
    width: calc(100% - var(--inner-gap)*2);
    justify-content: center;
    overflow: hidden
}

.jackpot-spinner-user-list {
    display: flex;
    flex-direction:row-reverse; /*Реверс направления*/
    will-change: transform;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transform: translateZ(0)
}

.jackpot-spinner-user {
    flex: 0 0 var(--avatar-width);
    width: var(--avatar-width);
    height: var(--avatar-width);
    border-radius: var(--radius);
    border: .1rem solid var(--panel-background)
}

.jackpot-spinner-user,
.jackpot-spinner-user-avatar {
    display: flex;
    justify-content: center;
    align-items: center
}

.jackpot-spinner-user-avatar {
    width: 100%;
    height: 100%;
    transition: opacity .3s ease-out
}

.jackpot-spinner-winner-info-wrapper,
.jackpot-spinner-winner-wrapper {
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
    opacity: 0;
    transition: opacity .3s ease-out;
    will-change: opacity
}

.jackpot-spinner-winner-wrapper {
    left: 0;
    background: linear-gradient(90deg, #181c24, rgba(24, 28, 36, .95), rgba(24, 28, 36, .9), rgba(24, 28, 36, .8), rgba(24, 28, 36, 0))
}

.jackpot-spinner-winner-info-wrapper {
    right: 0;
    z-index: 3;
    background: linear-gradient(270deg, #181c24, rgba(24, 28, 36, .95), rgba(24, 28, 36, .9), rgba(24, 28, 36, .8), rgba(24, 28, 36, 0))
}

.jackpot>.jackpot-spinner-winner-info-wrapper,
.jackpot>.jackpot-spinner-winner-wrapper {
    opacity: 1
}

.jackpot .jackpot-spinner-user-avatar {
    opacity: .2
}

.jackpot .jackpot-spinner-user-avatar.winner {
    opacity: 1
}

.jackpot-spinner-winner-info {
    display: flex;
    justify-content: space-around;
    width: 50%
}

.jackpot-spinner-winner-label {
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #fb9a00
}

.jackpot-spinner-winner-value {
    font-family: Argentum, sans-serif;
    font-size: 1.8rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase
}

@media screen and (min-width:768px) {
    .jackpot-spinner-wrapper {
        padding: 0 0 .2rem
    }
}

@media screen and (min-width:992px) {
    .jackpot-spinner-wrapper {
        padding: 0 var(--large-gap) var(--small-gap)
    }

    .jackpot-bets {
        height: var(--jackpot-bets-wrapper-height);
        overflow: visible
    }
}

.jackpot-timer-wrapper {
    grid-area: jackpot-timer;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.jackpot-timer {
    --header-height: 4.2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.jackpot-timer-widget {
    position: relative;
    display: flex;
    justify-content: center
}

#jackpot-timer,
.jackpot-timer-widget {
    width: 23rem;
    height: 23rem
}

.jackpot-timer-dash {
    stroke: #242831;
    transition: stroke .25s ease-out
}

.jackpot-timer-dash.activeDash {
    stroke: #fe5900
}

.jackpot-timer-widget-items {
    position: absolute;
    top: 13.3rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
    width: 10rem;
    height: 4.2rem
}

.jackpot-timer-widget-items-value {
    display: flex;
    justify-content: center;
    font-size: 1.6rem;
    color: #7c808c
}

.jackpot-timer-widget-items-value-icon {
    width: 2rem;
    height: 2rem;
    margin-right: var(--tiny-gap);
    fill: #7c808c
}

.jackpot-timer-widget-items-label {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: #7c808c
}

#jackpot-timer-seconds-value {
    font-size: 2rem;
    fill: #7c808c
}

#jackpot-timer-total-value {
    font-family: Argentum, sans-serif;
    font-weight: var(--light-font-weight);
    font-size: 2.5rem;
    fill: #fff
}

#jackpot-timer-items-value-group {
    display: flex;
    justify-content: center
}

#jackpot-timer-items-icon {
    stroke: red;
    stroke-width: 3
}

#jackpot-timer-items-value {
    font-size: 1.6rem;
    fill: #7c808c
}

#jackpot-timer-items-label {
    font-size: 1.2rem;
    text-transform: uppercase;
    fill: #7c808c
}

@media screen and (min-width:768px) {
    .jackpot-timer-wrapper {
        padding: var(--tabblet-top-gap) 0 var(--small-gap)
    }
}

@media screen and (min-width:992px) {
    .jackpot-timer-wrapper {
        padding: 0 0 var(--medium-gap) var(--large-gap)
    }
}

.roulette {
    grid-area: roulette;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative
}

.roulette__wheel {
    width: calc(var(--roulette-outer-radius)*2);
    height: calc(var(--roulette-outer-radius)*2);
    border-radius: 50%;
    overflow: hidden;
    margin: 0 auto;
    position: absolute;
    top: calc(var(--roulette-outer-radius)*-1.3);
    left: 50%;
    transform: translateX(-50%)
}

.roulette__wheel:after,
.roulette__wheel:before {
    width: 950px;
    height: 950px;
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    pointer-events: none;
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: center center
}

.roulette__wheel:before {
    background-image: url(../img/small-circle.8ec38a6c.svg);
    z-index: 2;
    -webkit-animation: small-circle 100s linear infinite;
    animation: small-circle 100s linear infinite
}

.roulette__wheel:after {
    background-image: url(../img/big-circle.e35b00f4.svg);
    z-index: 3;
    -webkit-animation: big-circle 50s linear infinite;
    animation: big-circle 50s linear infinite
}

.roulette__container {
    position: relative;
    width: 100%;
    height: 100%
}

.wheel__items {
    transform-origin: var(--roulette-outer-radius) var(--roulette-outer-radius);
    transform: rotate(0deg)
}

.wheel__items_is-spinning {
    transition-property: transform;
    transition-timing-function: cubic-bezier(.1, -.01, 0, 1)
}

.wheel__items_is-winning {
    transition-duration: 1s !important;
    transition-property: transform;
    transition-timing-function: cubic-bezier(.1, -.01, 0, 1)
}

.wheel__item {
    border-top: var(--roulette-item-side-size) solid transparent;
    border-bottom: var(--roulette-item-side-size) solid transparent;
    width: var(--roulette-outer-radius);
    height: var(--roulette-item-size);
    transform-origin: 100% 50%;
    transform: rotate(0deg);
    position: absolute;
    top: calc(var(--roulette-outer-radius) - var(--roulette-item-size)/2)
}

.wheel__text {
    position: absolute;
    top: 50%;
    left: -35px;
    transform: translate(-50%, -50%) rotate(90deg);
    font-size: 1.3em;
    font-weight: 500
}

.wheel__inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--roulette-inner-radius);
    height: var(--roulette-inner-radius);
    border-radius: 50%;
    background-color: var(--roulette-bg)
}

.wheel__timer,
.wheel__winner {
    position: absolute;
    bottom: 150px;
    left: 50%;
    transform: translate(-50%);
    font-size: 30px;
    font-weight: 600
}

.wheel__winner {
    -webkit-animation: winner 1.5s linear infinite;
    animation: winner 1.5s linear infinite;
    transform-origin: left center
}

.wheel__ticker {
    position: absolute;
    bottom: 90px;
    left: 50%;
    background: url(../img/cursor.78b29ad8.svg) no-repeat bottom;
    background-size: contain;
    width: 240px;
    height: 90px;
    transform: translateX(-50%);
    pointer-events: none
}

@-webkit-keyframes small-circle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@keyframes small-circle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(1turn)
    }
}

@-webkit-keyframes big-circle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(-1turn)
    }
}

@keyframes big-circle {
    0% {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    to {
        transform: translate(-50%, -50%) rotate(-1turn)
    }
}

@-webkit-keyframes winner {
    0% {
        transform: scale(1) translate(-50%)
    }

    15% {
        transform: scale(1.5) translate(-50%)
    }

    30% {
        transform: scale(1.2) translate(-50%)
    }

    45% {
        transform: scale(1.7) translate(-50%)
    }

    50% {
        transform: scale(2) translate(-50%)
    }

    55% {
        transform: scale(1.7) translate(-50%)
    }

    70% {
        transform: scale(1.2) translate(-50%)
    }

    85% {
        transform: scale(1.5) translate(-50%)
    }

    to {
        transform: scale(1) translate(-50%)
    }
}

@keyframes winner {
    0% {
        transform: scale(1) translate(-50%)
    }

    15% {
        transform: scale(1.5) translate(-50%)
    }

    30% {
        transform: scale(1.2) translate(-50%)
    }

    45% {
        transform: scale(1.7) translate(-50%)
    }

    50% {
        transform: scale(2) translate(-50%)
    }

    55% {
        transform: scale(1.7) translate(-50%)
    }

    70% {
        transform: scale(1.2) translate(-50%)
    }

    85% {
        transform: scale(1.5) translate(-50%)
    }

    to {
        transform: scale(1) translate(-50%)
    }
}

.stats-info-stats {
    grid-area: stats;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 1em;
    background-color: var(--roulette-stats-bg);
    border-radius: 5px;
    place-items: center;
    grid-column-gap: 0;
    margin: 0 var(--outer-gap) 2em
}

.stats-info-stats__item {
    display: flex;
    align-items: center;
    gap: .5em
}

.stats-info-item__icon {
    width: 2.2em;
    height: 2.2em;
    opacity: .5
}

.stats-info-item__text {
    display: flex;
    flex-direction: column;
    font-size: 1.1em
}

.stats-info-item__title {
    text-transform: uppercase;
    text-align: left;
    line-height: 1.2;
    opacity: .5;
    font-weight: 400
}

.stats-info-item__count {
    text-align: left
}

@media screen and (max-width:396px) {
    .stats-info-item__text {
        font-size: .8em
    }
}

@media screen and (min-width:768px) {
    .stats-info-stats {
        grid-column-gap: 2em
    }
}

@media screen and (min-width:992px) {
    .stats-info-stats {
        margin: 0
    }
}

.last-info-last {
    grid-area: last;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto auto;
    background-color: var(--roulette-last-bg);
    background-image: linear-gradient(90deg, rgba(22, 22, 22, 0) -24%, rgba(22, 22, 22, .2) 125%);
    border-radius: 5px;
    padding: 1em;
    gap: 14px
}

.last-info-last__line,
.last-info-last__stats {
    display: flex;
    justify-content: space-between;
    align-items: center
}

.last-info-stats__title {
    opacity: .5;
    font-size: 1.1em;
    font-weight: 400;
    text-transform: uppercase
}

.last-info-stats__counts {
    display: flex;
    gap: 8px
}

.last-info-counts__item {
    display: flex;
    align-items: center;
    gap: 4px
}

.last-info-counts__color,
.last-info-counts__item {
    background-image: linear-gradient(90deg, rgba(22, 22, 22, 0) -22%, rgba(22, 22, 22, .09) 127%);
    box-shadow: 0 2px 41px 4px rgba(0, 0, 0, .25);
    border-radius: 5px
}

.last-info-counts__color {
    width: 1.6em;
    height: .9em
}

.last-info-counts__color_black {
    background-color: var(--roulette-black)
}

.last-info-counts__color_green {
    background-color: var(--roulette-green)
}

.last-info-counts__color_red {
    background-color: var(--roulette-red)
}

.last-info-counts__color_yellow {
    background-color: var(--roulette-yellow)
}

.last-info-counts__number {
    font-size: 1.1em;
    line-height: 1.2;
    font-weight: 400
}

.last-info-line__item {
    width: 3em;
    height: 1.8em;
    border-radius: 5px;
    transform: skewX(-8deg)
}

.last-info-line__item_black {
    background-color: var(--roulette-black)
}

.last-info-line__item_yellow {
    background-color: var(--roulette-yellow)
}

.last-info-line__item_red {
    background-color: var(--roulette-red)
}

.last-info-line__item_green {
    background-color: var(--roulette-green)
}

@media screen and (max-width:400px) {
    .last-info-line__item {
        width: 2.5em
    }
}

@media screen and (min-width:400px) {
    .last-info-last__line {
        gap: 1em
    }

    .last-info-line__item {
        width: 100%
    }
}

@media screen and (max-width:992px) {
    .last-info-last {
        margin: 0 var(--outer-gap) 2em
    }
}

.players-info-players {
    grid-area: players;
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 5px;
    margin: 0 var(--outer-gap)
}

.players-info-players__item {
    padding: 1em 0
}

.players-info-item__multiplier {
    position: relative;
    height: 3.8em;
    background-image: var(--roulette-multiplier-gradient);
    border-radius: 5px;
    transform: skewX(-8deg)
}

.players-info-item__multiplier_black {
    background-color: var(--roulette-black)
}

.players-info-item__multiplier_green {
    background-color: var(--roulette-green)
}

.players-info-item__multiplier_red {
    background-color: var(--roulette-red)
}

.players-info-item__multiplier_yellow {
    background-color: var(--roulette-yellow)
}

.players-info-item__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) skewX(8deg);
    font-size: 1.3em;
    font-weight: 500
}

.players-info-item__stats {
    display: flex;
    justify-content: space-between;
    padding: .8em;
    margin-top: .8em;
    gap: .4em;
    background-color: var(--roulette-players-info-player-bg);
    border-radius: 5px
}

.players-info-item__body {
    max-height: calc(var(--roulette-players-info-item-margin-top)*5 + var(--roulette-players-info-item-height)*5);
    overflow-x: hidden;
    overflow-y: auto;
    display: none
}

.players-info-item__body--visible {
    display: block
}

.players-info-item__player {
    background-color: var(--roulette-players-info-player-bg);
    display: flex;
    align-items: center;
    padding: .8em;
    border-radius: 5px;
    margin-top: var(--roulette-players-info-item-margin-top);
    height: var(--roulette-players-info-item-height)
}

.players-info-item__player--empty {
    justify-content: center
}

.players-info-stats__icon {
    width: 1.7em;
    height: 1.7em;
    opacity: .5
}

.players-info-stats__item {
    display: flex;
    align-items: center;
    gap: 6px
}

.players-info-stats__count {
    font-size: 1em;
    font-weight: 400
}

.players-info-player__avatar {
    width: 2.3em;
    height: 2.3em;
    cursor: pointer
}

.players-info-player__name {
    flex: 1 1 40%;
    margin-left: .5em;
    text-align: left;
    font-size: 1.1em;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 75px
}

.players-info-player__name_black {
    color: var(--roulette-black)
}

.players-info-player__name_green {
    color: var(--roulette-green)
}

.players-info-player__name_red {
    color: var(--roulette-red)
}

.players-info-player__name_yellow {
    color: var(--roulette-yellow)
}

.players-info-player__bank {
    text-align: right;
    margin-left: auto
}

@media screen and (min-width:992px) {
    .players-info-players {
        margin: 1em 0 0
    }

    .players-info-item__body {
        display: block
    }

    .players-info-item__stats {
        background-color: transparent
    }

    .players-info-players {
        grid-template-columns: repeat(4, 1fr);
        grid-column-gap: var(--outer-gap)
    }
}

.cases-mode {
    overflow-y: auto;
    --case-font-color: #ffc688
}

.case {
    --case-gap: 1rem;
    display: grid;
    grid-template-areas: "title" "image" "price";
    grid-gap: var(--case-gap)
}

.case,
.case:visited {
    color: #fff;
    cursor: pointer
}

.case:hover .case__image img {
    transform: scale(1.1)
}

.case .case__title {
    --case-title-text-size: 1.125rem;
    grid-area: title;
    font-weight: 300;
    font-size: 1.4rem
}

.case .case__image {
    grid-area: image;
    display: flex;
    justify-content: center;
    align-items: center
}

.case .case__image img {
    --image-width: 18.4rem;
    --image-height: 12.26rem;
    width: auto;
    height: auto;
    max-height: var(--image-height);
    max-width: var(--image-width);
    transition: transform .35s ease
}

.case .case__price {
    background-image: url(data:image/png;base64,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);
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    padding: 1.5rem;
    grid-area: price;
    font-size: 1.8rem;
    color: var(--case-font-color)
}

.case.case--roulette {
    --case-gap: .5rem;
    font-size: .9rem;
    font-weight: 300;
    grid-template-areas: "price" "image" "title";
    padding: 1.1rem
}

.case.case--roulette,
.case.case--roulette .case__price,
.case.case--roulette .case__title,
.case.case--roulette .case__top {
    color: #fff;
    font-size: 1rem;
    font-weight: 400
}

.case.case--roulette .case__top {
    display: flex;
    justify-content: space-between
}

.case.case--roulette .case__price {
    padding: 0
}

.case.case--roulette .case__title {
    position: relative;
    padding-left: 1.5rem;
    text-align: left
}

.case.case--roulette .case__image img {
    --image-width: 11.2474rem;
    --image-height: 6.134rem
}

.case.case--roulette .case__price {
    background: none
}

.live-drops {
    --live-drops-padding: 30px;
    --live-drops-gap: 13rem;
    position: relative;
    background: var(--panel-background);
    padding: var(--live-drops-padding) 0 var(--live-drops-padding) calc(var(--live-drops-padding)*1.5);
    display: grid;
    grid-template-columns: repeat(auto-fit, var(--live-drops-gap));
    grid-row-gap: var(--live-drops-padding);
    grid-column-gap: .5rem;
    max-height: calc(8.68rem + var(--live-drops-padding)*2);
    overflow: hidden
}

.live-drops .live-drops__title {
    position: absolute;
    top: 50%;
    left: -1rem;
    font-weight: 700;
    transform: translateY(-50%) rotate(-90deg);
    font-size: 1.2269rem;
    text-transform: uppercase
}

.live-drops .live-drops__item {
    background-size: contain;
    background-position: 50%;
    min-height: 8.68rem;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: visible;
    border-radius: 0
}

.live-drops .live-drops__item.base {
    background-image: url(../img/base.cc6a5843.png)
}

.live-drops .live-drops__item.classified {
    background-image: url(../img/classified.007df1aa.png)
}

.live-drops .live-drops__item.consumer-grade {
    background-image: url(../img/consumer-grade.cc6a5843.png)
}

.live-drops .live-drops__item.contraband {
    background-image: url(../img/contraband.fa8b41d3.png)
}

.live-drops .live-drops__item.covert {
    background-image: url(../img/covert.f028a618.png)
}

.live-drops .live-drops__item.exotic {
    background-image: url(../img/exotic.fa8b41d3.png)
}

.live-drops .live-drops__item.extraordinary {
    background-image: url(../img/extraordinary.f028a618.png)
}

.live-drops .live-drops__item.industrial-grade {
    background-image: url(../img/industrial-grade.a57f5fb8.png)
}

.live-drops .live-drops__item.knives {
    background-image: url(../img/knives.f028a618.png)
}

.live-drops .live-drops__item.mil-spec-grade {
    background-image: url(../img/mil-spec-grade.0e50a0df.png)
}

.live-drops .live-drops__item.restricted {
    background-image: url(../img/restricted.847ec1a7.png)
}

.live-drops .live-drops__item:nth-child(2) .live-drops__tooltip,
.live-drops .live-drops__tooltip {
    position: absolute;
    z-index: 999;
    top: 0;
    width: 100%;
    height: 100%
}

.live-drops .live-drops__item:nth-child(2) .live-drops__tooltip {
    left: 70%
}

.live-drops .live-drops__item .live-drops__tooltip {
    right: 70%
}

.live-drops .live-drops__item .live-drops__tooltip:before {
    position: absolute;
    content: "";
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
    width: 1rem;
    height: 1rem;
    background: var(--box-background);
    right: -.6rem;
    border-right: 1px solid #494949;
    border-top: 1px solid #494949
}

.live-drops .live-drops__item:nth-child(2) .live-drops__tooltip:before {
    left: -.6rem;
    border-right: none;
    border-top: none;
    border-left: 1px solid #494949;
    border-bottom: 1px solid #494949
}

.live-drops .live-drops__image {
    width: 8rem;
    height: 5rem
}

.drops-tooltip {
    background: var(--box-background);
    border-radius: var(--radius);
    border: 1px solid #494949;
    display: grid;
    grid-row-gap: .5rem;
    padding: .3rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity .35s ease
}

.drops-tooltip .drops-tooltip__title {
    font-size: 1.2rem
}

.drops-tooltip .drops-tooltip__box {
    cursor: pointer
}

.drops-tooltip .drops-tooltip__box img {
    transition: transform .35s ease
}

.drops-tooltip .drops-tooltip__box:hover img {
    transform: scale(1.1)
}

.live-drops .live-drops__item:hover .drops-tooltip {
    pointer-events: auto;
    opacity: 1
}

.cases-block {
    --cases-block-gap: 3.75rem;
    display: grid;
    grid-gap: var(--cases-block-gap)
}

.cases-block:last-child {
    margin-bottom: 3rem
}

.cases-block .cases-block__wrapper {
    --image-width: 18.4rem;
    --cases-block-wrapper-column-gap: 2.5rem;
    --cases-block-wrapper-row-gap: 3.2rem;
    display: grid;
    grid-column-gap: var(--cases-block-wrapper-column-gap);
    grid-row-gap: var(--cases-block-wrapper-row-gap);
    grid-template-columns: repeat(auto-fill, var(--image-width));
    justify-content: center
}

.cases-block .cases-block__wrapper.cases-block__wrapper-roulette {
    --image-width: 11.2474rem;
    grid-template-columns: repeat(auto-fill, var(--image-width));
    grid-gap: 1.1rem
}

.cases-block .cases-block__title {
    position: relative;
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    padding: 2rem 0;
    font-size: 2rem;
    font-weight: 700;
    text-transform: uppercase
}

.cases-block .cases-block__title:after,
.cases-block .cases-block__title:before {
    --cases-block-title-line-gradient: linear-gradient(90deg, transparent, var(--panel-background) 40%, transparent 50%, var(--panel-background) 60%, transparent);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 2px;
    background: var(--cases-block-title-line-gradient);
    content: "";
    z-index: -1
}

.cases-block .cases-block__title.cases-block__title--luxury {
    background-image: url(../img/TITLE-LUXURY.b7822093.png)
}

.cases-block .cases-block__title.cases-block__title--classic {
    background-image: url(../img/TITLE-CLASSIC.dffce9b4.png)
}

.cases-block .cases-block__title.cases-block__title--rare {
    background-image: url(../img/TITLE-RARE.982906dd.png)
}

.cases-block .cases-block__title.cases-block__title--hero {
    background-image: url(../img/TITLE-HERO.6b493337.png)
}

.cases-block .cases-block__title.cases-block__title--secret {
    background-image: url(../img/TITLE-SECRET.0e7d4fe0.png)
}

.cases-block .cases-block__case {
    grid-template-rows: auto auto 1fr;
    border-radius: 0
}

.cases .cases__container {
    display: grid;
    padding-top: 3.75rem;
    grid-row-gap: 3.75rem
}

.cases-inside .cases-inside__roulette {
    margin-bottom: 1rem
}

.cases-inside .cases-inside__controls {
    display: grid;
    grid-column-gap: 1rem;
    grid-auto-flow: column;
    justify-content: center;
    margin-bottom: 1rem
}

.cases-controls .cases-controls__button {
    cursor: pointer;
    background-image: url(data:image/png;base64,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);
    background-size: contain;
    background-position: 50%;
    background-repeat: no-repeat;
    background-color: transparent;
    display: block;
    border: none;
    color: var(--case-font-color);
    padding: 1.5rem;
    font-size: 1.8rem;
    min-width: 12rem;
    text-transform: uppercase
}

.cases-controls .cases-controls__button:last-child {
    font-size: 1.2rem
}

.cases-controls .cases-controls__button:disabled {
    cursor: not-allowed
}

.cases-controls .cases-controls__price {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.cases-controls .cases-controls__text {
    color: #ffc688;
    font-weight: 900;
    font-size: 2rem
}

.cases-controls .cases-controls__text.cases-controls__text--small {
    position: absolute;
    top: .2rem;
    right: 0;
    color: #aaa;
    font-size: 1rem
}

@media (min-width:775px) {
    .cases-block .cases-block__wrapper {
        grid-template-columns: repeat(auto-fit, var(--image-width))
    }
}

@media (min-width:854px) {
    .cases-block .cases-block__wrapper.cases-block__wrapper-roulette {
        grid-template-columns: repeat(7, var(--image-width))
    }
}

.cases-spinner {
    --arrow-offset: 10%;
    position: relative
}

.cases-spinner:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: radial-gradient(circle, transparent 0, var(--app-background) 80%);
    z-index: 1
}

.cases-spinner .cases-spinner__wrapper {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 5rem 0
}

.cases-spinner .cases-spinner__wrapper:after,
.cases-spinner .cases-spinner__wrapper:before {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 70%;
    width: 8rem;
    z-index: 1
}

.cases-spinner .cases-spinner__wrapper:before {
    left: var(--arrow-offset);
    transform: translateY(-50%) rotate(180deg);
    -webkit-animation: leftArrow 2s linear infinite;
    animation: leftArrow 2s linear infinite
}

.cases-spinner .cases-spinner__wrapper:after,
.cases-spinner .cases-spinner__wrapper:before {
    background: no-repeat url(data:image/png;base64,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) 50%/contain
}

.cases-spinner .cases-spinner__wrapper:after {
    right: var(--arrow-offset);
    -webkit-animation: rightArrow 2s linear infinite;
    animation: rightArrow 2s linear infinite
}

.cases-spinner .cases-spinner__image,
.cases-spinner .cases-spinner__picker {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 10rem;
    height: 10rem;
    -o-object-fit: contain;
    object-fit: contain
}

.cases-spinner .cases-spinner__image.cases-spinner__image--bg {
    z-index: 1;
    width: 14rem;
    height: 12rem
}

.cases-spinner .cases-spinner__picker {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFcAAACkCAYAAADizrLbAAAFFElEQVR4nO2dv4tcVRiGn5nZGTe7iYKpIsQqioqYLin8CyzSmM4E7GwsbC0sJCG2CdjoQpQUkiIkrX+BYMRIApaZFRG0CoZks7vu7uzIke+awzCT3WLfzP3gfeBjztyZO/fcd777nnPP/dUZDocdoES3ioWIQcQLwKEqloHDwFL1WuIITz9frr5ffuMJcBW4wXw5DVyMOm1EvTaB9SjXsRbT12LaesRmxBawHbEDjIBdYFyiW63mOIKJ1/GMz0dVufmDms/LApqF7Ma0V4AvgN+B34CbwMnnJPMt4H7Et8DLMb1TxSTjqv67e2gxnjI/JXPlazbBZeBMZPwgtpBHwCXgOvDwAJZxBTgbW1OTUWUZ14AV4MGBrtEM5iFuzSngG+BVoB+2VLLkL+Ct2PT2wwfABeBYlW3bkamfA9/PY+W6+/iOkp+At4EXw5tXQpTjwOPIuPL+9kQdyjw/hPijyMjj4YHfxe8dDX+di7C0IHOfxSJwFzhRNbhUHt6US3aeB+60q/rzz9xnUbLyjfDk0vP4NFrt0sJ/BfTCSt5so7CFzng8taFrK72o1yhDZducuelZSLYC0/qjrcXiCrG4QiyukGzipmqAnblCsnXFupkEzpi5FleEPVdIb9bAdBuxLQixLQjJaAtpsLhC3KAJsbhCLK4QiyvEDZqQbOKmqm9GcW0LIiyuEDdoQuy5QvrOXB32XCH9TJX1ToSQjLbgIxEiFjIdjcjouc5cEW7QhFhcIRZXiMUV4rEFIR5bEOLMFWLPFeLMFdKfuPa31ThzhWQccvTAjQgPOQoZZKqsj0QIcW9BSMbMteeK6GWyBnuuEIsrxGfcCHGDJsS2IMSZKyTjtb8WV4QvrBZiWxCSyhay3UDId2cSkuoU0ox3IfVhHhGpksE3bRPi2w0KyWgLaUbFstlCqhus2xaEZOyKeQ9NhBs0IbYFk1PcXXfFdNhzhaTq59pzhWT0XA/ciEglbsYhxxTPQiPpwE2ak5/doAnJJm4aSyBpg5aGjF2xNGRs0NJYQzZbGLmfq8OjYmJsCyJ2fMGJjlT9XO9ECMnYFdtpQT32hW1BSMYGzYPlIpy5QkbuiulI05jhzNXizBVicYXYFoQ4c4VYXCEZD1B6PFfElj1Xh8cWhFhcIR64EeLegpDtTJV15gqxuEIsrhCLK8QNmhBnrhCfKybEtiDEtiDE4gqxuEIsrhD3FoRYXCG2BSE+KUSIbUGIbUGIbUGIM1eID60LsbhCLK4QiyvE4grxDYSEZBTX/VwRtgUhzlwh9lwhFleIHx8jxOIKsbhCLK4QP8pAjO/lKCKXLayurragGnuyCHwCfBZXUF4DPm55nekMh8MWVGMqRdC7wIkQtNnK6h2JUr4PnAfutKTe/9M2W/gSeBQnOT8GXgsr+DkE7sTD7E8CP8ZAzutR/gf4G/i6BevxH/MW9xTwawi6AXwE9IE/gCMhZHl/emK+Ms+7kd3lOx/GPAPgXPzeA+A28N6c1m0utnAZOAMcDjEWQoxLwHXg4QEs4wpwFliKw/GjWEbx6pUQXk4Rt1Ntct3IhCZj+iHAYsShqHATJbuWQ6ilKC/F95pyM+9LMX0QXvkLcAG49xzW8xbwTpTLDTHWgTVgE3hSvdaxFtGU1yM2IjbDvrbidRTRDIuO652ITnUvg86MaXW5V5XHEc3n5U9qHt3dWM+fwFXghlDEWbxffVAs5mL8yU29p3Xx6oRr1mUvXZ4C/AuhkDl2CNH87QAAAABJRU5ErkJggg==);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: 50%;
    width: 8rem
}

.cases-placeholder {
    position: relative
}

.cases-placeholder .cases-placeholder__list {
    --spinner-translate-x: 0rem;
    position: relative;
    grid-auto-flow: column;
    display: grid;
    grid-column-gap: .3rem
}

.cases-placeholder .cases-placeholder__list.cases-placeholder__list--spinning {
    -webkit-animation: spinning 10s cubic-bezier(.1, .2, .1, 1) forwards;
    animation: spinning 10s cubic-bezier(.1, .2, .1, 1) forwards
}

.cases-placeholder .cases-placeholder__list.cases-placeholder__list--non-anim-spinning {
    transform: translateX(var(--spinner-translate-x))
}

.cases-placeholder .cases-placeholder__item.cases-placeholder__item--placeholder {
    background: linear-gradient(to right bottom, rgba(0, 0, 0, .35) 0, hsla(0, 0%, 100%, .35) 50%, rgba(0, 0, 0, .35))
}

.cases-placeholder .cases-placeholder__item {
    width: 12.7rem;
    height: 8rem;
    border-radius: 0;
    display: flex;
    justify-content: center;
    align-items: center
}

.cases-placeholder .cases-placeholder__item.cases-placeholder__item--win {
    transform: scale(1.1);
    transform-origin: center
}

@media (min-width:512px) {
    .cases-spinner {
        --arrow-offset: 20%
    }

    .cases-spinner .cases-spinner__wrapper {
        padding: 8rem 0
    }

    .cases-spinner .cases-spinner__wrapper:after,
    .cases-spinner .cases-spinner__wrapper:before {
        width: 12rem
    }

    .cases-spinner .cases-spinner__image,
    .cases-spinner .cases-spinner__picker {
        width: 14rem;
        height: 12rem
    }

    .cases-spinner .cases-spinner__image.cases-spinner__image--bg {
        width: 18rem;
        height: 16rem
    }

    .cases-spinner .cases-spinner__picker {
        width: 8rem
    }

    .cases-placeholder .cases-placeholder__item {
        width: 12.7rem;
        height: 9.7rem
    }
}

@media (min-width:768px) {
    .cases-spinner .cases-spinner__wrapper {
        padding: 10rem 0
    }

    .cases-spinner .cases-spinner__wrapper:after,
    .cases-spinner .cases-spinner__wrapper:before {
        width: 17rem
    }

    .cases-spinner .cases-spinner__image,
    .cases-spinner .cases-spinner__picker {
        width: 18rem;
        height: 15rem
    }

    .cases-spinner .cases-spinner__image.cases-spinner__image--bg {
        width: 22rem;
        height: 19rem
    }

    .cases-spinner .cases-spinner__picker {
        width: 8rem
    }

    .cases-placeholder .cases-placeholder__item.cases-placeholder__item--win {
        transform: scale(1.3)
    }
}

@media (min-width:860px) {
    .cases-spinner {
        --arrow-offset: 25%
    }
}

@-webkit-keyframes leftArrow {
    0% {
        left: var(--arrow-offset)
    }

    50% {
        left: calc(var(--arrow-offset) + 2%)
    }

    to {
        left: var(--arrow-offset)
    }
}

@keyframes leftArrow {
    0% {
        left: var(--arrow-offset)
    }

    50% {
        left: calc(var(--arrow-offset) + 2%)
    }

    to {
        left: var(--arrow-offset)
    }
}

@-webkit-keyframes rightArrow {
    0% {
        right: var(--arrow-offset)
    }

    50% {
        right: calc(var(--arrow-offset) + 2%)
    }

    to {
        right: var(--arrow-offset)
    }
}

@keyframes rightArrow {
    0% {
        right: var(--arrow-offset)
    }

    50% {
        right: calc(var(--arrow-offset) + 2%)
    }

    to {
        right: var(--arrow-offset)
    }
}

@-webkit-keyframes spinning {
    0% {
        transform: translateX(50%)
    }

    to {
        transform: translateX(var(--spinner-translate-x))
    }
}

@keyframes spinning {
    0% {
        transform: translateX(50%)
    }

    to {
        transform: translateX(var(--spinner-translate-x))
    }
}

.user-info-wrapper {
    --avatar-size: 7.2rem;
    grid-area: user-info;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.user-info-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: calc(var(--inner-gap) + var(--avatar-size) + var(--inner-gap))
}

.user-info {
    display: grid;
    grid-template-columns: var(--avatar-size) 1fr;
    grid-column-gap: var(--inner-gap);
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.user-info-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size)
}

.user-info-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center
}

.user-info-level,
.user-info-username {
    width: 200px;
    text-align: left;
    margin: 0;
    transform: translateX(-368px) translateY(58px)
}

.user-info-username {
    margin-bottom: 4px;
    transform: translateX(0) translateY(7px);
    width: 355px
}

.user-info-level {
    color: #666;
    font-size: 23px
}

@media screen and (min-width:411px) {
    .user-info-wrapper {
        --avatar-size: 8.4rem
    }

    .user-info-username {
        font-size: 1.8rem
    }
}

@media screen and (min-width:768px) {
    .user-info-wrapper {
        --avatar-size: 9.6rem;
        padding: var(--tabblet-top-gap) var(--outer-gap) var(--outer-gap)
    }

    .user-info {
        display: flex
    }

    .user-info-username {
        font-size: 1.8rem
    }
}

@media screen and (min-width:992px) {
    .user-info-wrapper {
        padding: 0 var(--large-gap) var(--large-gap)
    }

    .user-info {
        padding: var(--large-gap)
    }
}

.user-dashboard-wrapper {
    grid-area: user-statistics;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.user-dashboard {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: var(--small-gap)
}

.user-dashboard-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: var(--dashboard-indicator-height);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.user-dashboard-indicator-icon {
    width: 3.2rem;
    height: 3.2rem;
    fill: var(--indicator-name-color)
}

.user-dashboard-indicator-value {
    margin: .5rem 0 .3rem;
    font-family: Argentum, sans-serif;
    font-size: 1.6rem;
    font-weight: var(--light-font-weight);
    color: var(--indicator-value-color)
}

.user-dashboard-indicator-name {
    font-size: .9rem;
    text-transform: uppercase;
    color: var(--indicator-name-color)
}

.user-dashboard-games-played>.user-dashboard-indicator-icon {
    fill: url(#fire-gradient)
}

.user-dashboard-games-won>.user-dashboard-indicator-icon {
    fill: url(#sky-gradient)
}

.user-dashboard-winrate>.user-dashboard-indicator-icon {
    fill: url(#gun-gradient)
}

.user-dashboard-amount-won>.user-dashboard-indicator-icon {
    fill: #393
}

.user-dashboard-top-winnings>.user-dashboard-indicator-icon {
    fill: #ffcd47
}

.user-dashboard-top-ratio>.user-dashboard-indicator-icon {
    fill: url(#sky-gradient)
}

@media screen and (min-width:768px) {
    .user-dashboard {
        grid-template-columns: repeat(6, 1fr)
    }

    .user-dashboard-indicator-value {
        font-size: 1.8rem
    }

    .user-dashboard-indicator-name {
        font-size: 1rem
    }
}

@media screen and (min-width:992px) {
    .user-dashboard-wrapper {
        padding: 0 var(--large-gap) var(--large-gap)
    }

    .user-dashboard-indicator {
        height: 12.5rem
    }
}

.user-history-wrapper {
    grid-area: user-history;
    display: flex;
    padding: 0 var(--outer-gap)
}

.user-history {
    width: 100%
}

.user-history-switcher {
    position: relative;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
    width: 100%;
    height: 7rem;
    margin-bottom: var(--small-gap);
    padding: 0;
    border-radius: var(--radius);
    background: var(--panel-background)
}

.user-history-switcher-tab {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    font-size: 1.2rem;
    text-transform: uppercase;
    color: var(--link-inactive-color);
    cursor: pointer;
    transition: color .3s ease-out
}

.user-history-switcher-tab.active {
    color: var(--link-hover-color);
    cursor: default
}

.user-history-switcher-active-tab-slider {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    border-top: .1rem solid #ff3b00;
    border-bottom: .1rem solid #ff3b00;
    transition: left .3s ease-out
}

.user-history-switcher-active-tab-slider.mobile-only {
    width: 6rem;
    margin-left: -3rem
}

.user-history-switcher-active-tab-slider.tablet-desktop {
    display: none
}

.user-history-switcher-active-tab-slider:after,
.user-history-switcher-active-tab-slider:before {
    content: "";
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-left: .7rem solid transparent;
    border-right: .7rem solid transparent
}

.user-history-switcher-active-tab-slider:before {
    top: 0;
    border-top: 1rem solid #ff3b00
}

.user-history-switcher-active-tab-slider:after {
    bottom: 0;
    border-bottom: 1rem solid #ff3b00
}

.user-history-dataset {
    --user-history-dataset-height: calc(100% + var(--mode-bar-height));
    padding-bottom: var(--mode-bar-height)
}

.user-history-list-wrapper {
    border-radius: var(--radius);
    background: #191d25
}

.user-history-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.user-history-list {
    height: calc(var(--user-history-dataset-height) - 4.5rem - var(--small-gap))
}

.empty-history-list {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 8rem
}

.empty-history-list-text {
    font-size: 1.68rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #282b36
}

.user-history-header,
.user-history-record {
    display: grid;
    grid-gap: .5rem;
    align-items: center;
    width: 100%
}

.user-history-header {
    height: 4.5rem;
    margin-bottom: var(--small-gap);
    font-size: 1.1rem;
    text-transform: uppercase;
    border-radius: var(--radius);
    background: #1c1f29;
    color: var(--table-heading-color)
}

.user-history-record {
    font-size: 1.2rem
}

.user-crash-history-header,
.user-crash-history-list>.user-history-record {
    grid-template-columns: 1fr 1fr .5fr 1.05fr 1.25fr
}

.user-jackpot-history-header,
.user-jackpot-history-list>.user-history-record,
.user-wheel-history-header,
.user-wheel-history-list>.user-history-record {
    grid-template-columns: 1fr 1fr 1.05fr 1.25fr
}

.user-history-data-column.tablet-desktop,
.user-history-header-column.tablet-desktop {
    display: none
}

.user-history-header-column.mobile-only {
    display: flex
}

.user-history-record {
    height: 8rem;
    margin-bottom: var(--small-gap);
    border-radius: var(--radius);
    background: #1c1f29
}

.user-history-record:last-child {
    margin-bottom: 0
}

.user-history-data-column,
.user-history-header-column {
    display: flex;
    justify-content: center;
    align-items: center
}

.user-history-data-column-date,
.user-history-data-column.digits {
    font-family: Argentum, sans-serif;
    font-weight: var(--light-font-weight)
}

.user-history-bet-additional-items {
    width: 3rem;
    margin-right: -3rem;
    text-align: left
}

.user-history-jackpot-image-stub {
    width: 6.4rem;
    height: 6.4rem;
    fill: none;
    stroke: #2d2f3c;
    stroke-width: 1;
    stroke-dasharray: 3, 1
}

.user-history-data-color {
    display: block;
    width: 2.9rem;
    height: 2.9rem;
    border-radius: var(--radius);
    background: #ccc
}

.user-history-data-color.red {
    background: #d43636
}

.user-history-data-color.green {
    background: #539977
}

.user-history-data-color.blue {
    background: #16bdf9
}

.user-history-data-color.yellow {
    background: #ffa800
}

.user-history-data-color.black {
    background: #393c46
}

.user-history-data-lose-icon,
.user-history-data-win-icon {
    display: block;
    width: 3.2rem;
    height: 3.2rem
}

.user-history-data-win-icon {
    fill: #06ff3b
}

.user-history-data-lose-icon {
    fill: #ff3b3b
}

.user-history-data-column>.lost-earnings,
.user-history-data-column>.won-earnings {
    display: flex;
    justify-content: center;
    align-items: center
}

.user-history-data-column>.won-earnings {
    color: #06ff3b
}

.user-history-data-column>.lost-earnings {
    color: #ff3b3b
}

.user-history-data-column-date {
    padding: 0 .5rem
}

@media screen and (min-width:360px) {
    .user-history-header {
        font-size: 1.2rem;
        font-size: 1.3rem
    }
}

@media screen and (min-width:411px) {

    .user-history-header,
    .user-history-record {
        font-size: var(--base-font-size)
    }
}

@media screen and (min-width:768px) {
    .user-history-switcher {
        grid-template-columns: 6rem 18rem 6rem 8rem;
        grid-column-gap: 2rem;
        padding: 0 2.5rem
    }

    .user-history-switcher-tab {
        font-size: var(--base-font-size)
    }

    .user-history-switcher-active-tab-slider.tablet-desktop {
        display: flex;
        width: 8rem
    }

    .user-history-switcher-active-tab-slider.mobile-only {
        display: none
    }

    .user-crash-history-header,
    .user-crash-history-list>.user-history-record {
        grid-template-columns: repeat(7, 1fr)
    }

    .user-jackpot-history-header,
    .user-jackpot-history-list>.user-history-record {
        grid-template-columns: repeat(6, 1fr)
    }

    .user-wheel-history-header,
    .user-wheel-history-list>.user-history-record {
        grid-template-columns: repeat(7, 1fr)
    }

    .user-history-data-column.tablet-desktop,
    .user-history-header-column.tablet-desktop {
        display: flex
    }

    .user-history-data-column.mobile-only,
    .user-history-header-column.mobile-only {
        display: none
    }

    .user-history-data-column>.lost-earnings,
    .user-history-data-column>.won-earnings {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 4.2rem;
        border-radius: var(--radius);
        color: var(--app-text-color)
    }

    .user-history-data-column>.won-earnings {
        border: .2rem solid #06ff3b
    }

    .user-history-data-column>.lost-earnings {
        border: .2rem solid #ff3b3b
    }
}

@media screen and (min-width:992px) {
    .user-history-wrapper {
        padding: 0 var(--large-gap)
    }

    .profile-content .user-history-dataset {
        --user-history-dataset-height: calc(100vh - var(--header-height) - 43.3rem - var(--large-gap) - var(--large-gap) - var(--large-gap) - var(--small-gap))
    }

    .user-content .user-history-dataset {
        --user-history-dataset-height: calc(100vh - var(--header-height) - 33.9rem - var(--large-gap) - var(--large-gap) - var(--small-gap))
    }

    .user-history-dataset>* {
        height: var(--user-history-dataset-height)
    }

    .empty-history-list {
        height: 100%
    }

    .empty-history-list-text {
        font-size: 3.6rem
    }

    .user-history-list.has-padding-correction {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0;
        overflow-y: scroll
    }

    .user-history-header,
    .user-history-record {
        margin-bottom: var(--small-gap)
    }

    .user-history-record {
        height: 8rem
    }

    .user-history-data-color {
        width: 2.9rem;
        height: 2.9rem
    }

    .user-history-data-lose-icon,
    .user-history-data-win-icon {
        width: 3.2rem;
        height: 3.2rem
    }

    .user-history-data-column>.lost-earnings,
    .user-history-data-column>.won-earnings {
        width: 10rem;
        height: 4.2rem
    }
}

.profile-user-wrapper {
    grid-area: profile-user;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.profile-user {
    --avatar-size: 7.2rem;
    display: grid;
    grid-template-rows: var(--avatar-size) 1fr 7rem;
    grid-row-gap: var(--inner-gap);
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.profile-user-money {
    display: grid;
    grid-template-areas: "profile-user-avatar profile-user-username" "profile-user-avatar profile-user-withdrawal";
    grid-template-columns: var(--avatar-size) 1fr;
    grid-template-rows: 1fr 4.5rem;
    grid-column-gap: var(--inner-gap)
}

.profile-user-avatar {
    grid-area: profile-user-avatar;
    width: var(--avatar-size);
    height: var(--avatar-size)
}

.profile-user-username {
    grid-area: profile-user-username;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight)
}

.profile-user-withdrawal {
    grid-area: profile-user-withdrawal;
    position: relative;
    display: grid;
    grid-gap: var(--small-gap);
    grid-template-columns: 1fr auto
}

#profile-user-balace-field {
    padding: 0 1rem 0 2.5rem
}

#profile-user-balace-field,
.profile-user-withdrawal:before {
    display: flex;
    align-items: center;
    font-family: Argentum, sans-serif;
    font-size: 1.6rem;
    font-weight: var(--light-font-weight)
}

.profile-user-withdrawal:before {
    content: "$";
    position: absolute;
    justify-content: flex-end;
    width: 2rem;
    height: 100%;
    color: #ff3b00
}

.profile-user-withdrawal-button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 2rem;
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #ff3b00
}

.profile-user-withdrawal-button:active,
.profile-user-withdrawal-button:focus {
    background: #ff5826;
    box-shadow: 0 0 1rem #ff5826
}

.profile-user-separator {
    display: grid;
    grid-template-columns: 1fr 25rem 1fr;
    align-items: center
}

.profile-user-separator-line {
    height: .1rem;
    background: #ff3b00
}

.profile-user-separator-icons {
    justify-content: space-around;
    align-items: center;
    padding: 0 1rem
}

.profile-user-separator-icon {
    width: 3rem;
    height: 3rem;
    fill: url(#desert-evening-gradient)
}

.profile-user-separator-main-icon {
    width: 4.2rem;
    height: 4.2rem
}

.profile-user-separator-icons AccountLevel {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 0 .5rem;
    width: 5rem;
    min-width: 4rem;
    vertical-align: middle
}

.profile-user-promocode {
    display: grid;
    grid-template-areas: "profile-user-promocode-label profile-user-promocode-label" "profile-user-promocode-field profile-user-promocode-button";
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 4.5rem;
    grid-column-gap: var(--inner-gap);
    grid-row-gap: var(--inner-gap)
}

.profile-user-promocode-label {
    grid-area: profile-user-promocode-label;
    text-align: left;
    color: var(--label-color)
}

#profile-user-promocode-field {
    grid-area: profile-user-promocode-field;
    display: block;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight)
}

.profile-user-promocode-button {
    grid-area: profile-user-promocode-button;
    padding: 0 2rem;
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fbb700;
    background: #262833
}

.profile-user-promocode-button:active,
.profile-user-promocode-button:focus {
    color: #ffc724;
    background: #393c4d;
    box-shadow: 0 0 1rem #393c4d
}

@media(hover:hover) and (pointer:fine) {
    .profile-user-withdrawal-button:hover {
        background: #ff5826;
        box-shadow: 0 0 1rem #ff5826
    }

    .profile-user-promocode-button:hover {
        color: #ffc724;
        background: #393c4d;
        box-shadow: 0 0 1rem #393c4d
    }
}

@media screen and (min-width:996px) {
    .profile-user-wrapper {
        padding: var(--tabblet-top-gap) var(--outer-gap) var(--outer-gap)
    }

    .profile-user {
        grid-template-columns: 1fr .1rem 1fr;
        grid-template-rows: 1fr;
        grid-column-gap: var(--inner-gap)
    }

    .profile-user-separator {
        display: block;
        background: #ff3b00
    }

    .profile-user-separator-icons AccountLevel {
        width: 4.5rem
    }

    .account-level-bar {
        height: .5rem
    }

    .account-level-percent {
        font-size: .9rem
    }

    .account-level-header {
        font-size: 1rem
    }
}

@media screen and (min-width:992px) {
    .profile-user-wrapper {
        padding: 0 var(--large-gap) var(--large-gap)
    }

    .profile-user {
        grid-template-columns: 1fr;
        grid-template-rows: var(--avatar-size) 1fr 7rem;
        grid-row-gap: 1rem;
        padding: var(--large-gap)
    }

    .profile-user-separator {
        display: grid;
        background: transparent
    }

    .profile-user-promocode {
        grid-row-gap: var(--small-gap)
    }

    .profile-user-separator-icons AccountLevel {
        width: 5rem
    }

    .account-level-bar {
        height: .6rem
    }

    .account-level-percent {
        font-size: 1.1rem
    }

    .account-level-header {
        font-size: 1.2rem
    }
}

@media screen and (max-width:767px) {
    .profile-user-separator-icons {
        gap: .5rem
    }

    .profile-user-separator-icon {
        width: 2.5rem;
        height: 2.5rem
    }

    .profile-user-separator-main-icon {
        width: 3rem;
        height: 3rem
    }

    .profile-user-separator-icons AccountLevel {
        width: 4rem
    }

    .account-level-bar {
        height: .4rem
    }

    .account-level-percent {
        font-size: .8rem
    }

    .account-level-header {
        font-size: .9rem
    }
}

.profile-steam-wrapper {
    grid-area: profile-steam;
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.profile-steam {
    display: grid;
    grid-template-areas: "profile-steam-link-header profile-steam-link-header" "profile-steam-link-field profile-steam-link-save-button";
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 4.5rem;
    grid-column-gap: var(--inner-gap);
    grid-row-gap: var(--inner-gap);
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.profile-steam-link-header {
    grid-area: profile-steam-link-header;
    display: flex;
    justify-content: space-between
}

.profile-steam-link-label {
    grid-area: profile-steam-link-label;
    text-align: left;
    color: var(--label-color)
}

.profile-steam-where-to-get-link {
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--link-inactive-color)
}

.profile-steam-where-to-get-link:focus .profile-steam-where-to-get-link:active {
    color: var(--link-hover-color)
}

#profile-steam-link-field {
    grid-area: profile-steam-link-field;
    display: block;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight)
}

.profile-steam-link-save-button {
    grid-area: profile-steam-link-save-button;
    padding: 0 2rem;
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #d97000
}

.profile-steam-link-save-button:active,
.profile-steam-link-save-button:focus {
    background: #ff8400;
    box-shadow: 0 0 1rem #ff8400
}

@media(hover:hover) and (pointer:fine) {
    .profile-steam-where-to-get-link:hover {
        color: var(--link-hover-color)
    }

    .profile-steam-link-save-button:hover {
        background: #ff8400;
        box-shadow: 0 0 1rem #ff8400
    }
}

@media screen and (min-width:768px) {
    .profile-steam {
        grid-row-gap: var(--small-gap)
    }
}

@media screen and (min-width:992px) {
    .profile-steam-wrapper {
        padding: 0 var(--large-gap) var(--large-gap) 0
    }

    .profile-steam {
        padding: var(--large-gap)
    }
}

.profile-referral-wrapper {
    grid-area: profile-referral;
    display: grid;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.profile-referral-dashboard-wrapper {
    display: grid;
    grid-template-columns: 1fr;
    padding: 0 0 var(--medium-gap)
}

.profile-referral-dashboard {
    position: relative;
    display: grid;
    grid-template-columns: 1fr .1rem 1fr .1rem 1fr;
    align-items: center;
    height: var(--dashboard-indicator-height);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.profile-referral-dashboard:after {
    content: "";
    position: absolute;
    right: 50%;
    bottom: -1rem;
    display: block;
    margin-right: -1rem;
    width: 0;
    height: 0;
    border-left: 1rem solid transparent;
    border-top: 1rem solid var(--panel-background);
    border-right: 1rem solid transparent
}

.profile-referral-dashboard-indicator {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.profile-referral-dashboard-indicator-icon {
    width: 3.2rem;
    height: 3.2rem;
    fill: #ff3b00
}

.profile-referral-dashboard-indicator-value {
    margin: .5rem 0 .3rem;
    font-family: Argentum, sans-serif;
    font-size: 1.6rem;
    font-weight: var(--light-font-weight);
    color: var(--indicator-value-color)
}

.profile-referral-dashboard-indicator-name {
    font-size: 1.2rem;
    font-weight: var(--base-font-weight);
    color: var(--indicator-name-color)
}

.profile-referral-dashboard-separator {
    width: .1rem;
    height: 3.2rem;
    background: var(--indicator-name-color)
}

.profile-referral {
    display: grid;
    grid-template-areas: "profile-referral-link-label profile-referral-link-label" "profile-referral-link-field profile-referral-link-copy-button";
    grid-template-columns: 1fr auto;
    grid-template-rows: 1fr 4.5rem;
    grid-column-gap: var(--inner-gap);
    grid-row-gap: var(--inner-gap);
    width: 100%;
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.profile-referral-link-label {
    grid-area: profile-referral-link-label;
    text-align: left;
    color: var(--label-color)
}

#profile-referral-link-field {
    grid-area: profile-referral-link-field;
    display: block;
    font-size: var(--base-font-size);
    font-weight: var(--deep-font-weight)
}

.profile-referral-link-copy-button {
    grid-area: profile-referral-link-copy-button;
    padding: 0 2rem;
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #3879a3
}

.profile-referral-link-copy-button:active,
.profile-referral-link-copy-button:focus {
    background: #4596c9;
    box-shadow: 0 0 1rem #4596c9
}

@media(hover:hover) and (pointer:fine) {
    .profile-referral-link-copy-button:hover {
        background: #4596c9;
        box-shadow: 0 0 1rem #4596c9
    }
}

@media screen and (min-width:768px) {
    .profile-referral-wrapper {
        grid-template-columns: 36rem 1fr
    }

    .profile-referral-dashboard-wrapper {
        padding: 0 var(--large-gap) 0 0
    }

    .profile-referral-dashboard {
        height: 100%
    }

    .profile-referral-dashboard:after {
        right: -1.5rem;
        bottom: auto;
        margin: 0;
        border-top: 1.5rem solid transparent;
        border-left: 1.5rem solid var(--panel-background);
        border-bottom: 1.5rem solid transparent;
        border-right: none
    }

    .profile-referral {
        grid-row-gap: var(--small-gap)
    }
}

@media screen and (min-width:992px) {
    .profile-referral-wrapper {
        padding: 0 var(--large-gap) var(--large-gap) 0
    }

    .profile-referral-dashboard-indicator-value {
        font-size: 1.8rem
    }

    .profile-referral {
        padding: var(--large-gap)
    }
}

.profile-withdrawal-history-header,
.profile-withdrawal-history-list>.user-history-record {
    grid-template-columns: 1fr 1fr 1fr 1fr 1.25fr
}

.profile-withdrawal-system-icon {
    width: 5rem;
    height: 5rem;
    fill: #525765
}

.profile-withdrawal-status-icon {
    width: 2.5rem;
    height: 2.5rem;
    fill: #525765
}

.sending>.profile-withdrawal-status-icon {
    width: 2rem;
    height: 2rem;
    margin: 0 -.5rem;
    fill: #525765
}

.completed>.profile-withdrawal-status-icon {
    fill: #06ff3b
}

.canceled>.profile-withdrawal-status-icon {
    fill: #ff3b3b
}

.profile-withdrawal-status {
    color: #525765
}

.profile-withdrawal-status.completed {
    text-transform: uppercase;
    color: #06ff3b
}

.profile-withdrawal-status.canceled {
    text-transform: uppercase;
    color: #ff3b3b
}

.profile-withdrawal-cancel-button {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4.5rem;
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #ff3b3b
}

.profile-withdrawal-cancel-button.desktop-only {
    display: none
}

.profile-withdrawal-cancel-button.mobile-tablet {
    width: 4.5rem
}

.profile-withdrawal-cancel-button:active,
.profile-withdrawal-cancel-button:focus {
    background: #ff5858;
    box-shadow: 0 0 1rem #ff5858
}

.profile-withdrawal-cancel-button-icon {
    width: 2rem;
    height: 2rem;
    fill: #fff
}

.profile-withdrawal-no-action {
    display: flex;
    justify-content: center;
    align-items: center
}

.profile-withdrawal-no-action-dash {
    width: 1rem;
    height: .2rem;
    margin: 0 .3rem;
    background: #525765
}

@media(hover:hover) and (pointer:fine) {
    .profile-withdrawal-cancel-button:hover {
        background: #ff5858;
        box-shadow: 0 0 1rem #ff5858
    }
}

@media screen and (min-width:768px) {

    .profile-withdrawal-history-header,
    .profile-withdrawal-history-list>.user-history-record {
        grid-template-columns: 1fr 1fr 2fr 1fr 1.5fr 1.5fr 1.25fr
    }
}

@media screen and (min-width:992px) {

    .profile-withdrawal-history-header,
    .profile-withdrawal-history-list>.user-history-record {
        grid-template-columns: repeat(7, 1fr)
    }

    .profile-withdrawal-cancel-button.desktop-only {
        display: flex;
        width: auto;
        padding: 0 2rem
    }

    .profile-withdrawal-cancel-button.mobile-tablet {
        display: none
    }

    .profile-withdrawal-no-action-dash {
        width: 2rem;
        height: .3rem;
        margin: 0 .5rem;
        background: #525765
    }
}

.support-faq-wrapper {
    grid-area: support-faq;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.support-faq {
    height: 100%;
    padding: 0 var(--inner-gap) var(--inner-gap);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel-background)
}

.support-faq-heading {
    display: flex;
    align-items: center;
    height: 6.4rem;
    font-size: 1.4rem;
    font-weight: var(--dark-font-weight);
    text-align: left
}

.support-faq-questions {
    height: auto
}

.support-faq-question {
    --question-header-height: 5rem;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--question-header-height) 1fr;
    align-items: center;
    margin-bottom: var(--inner-gap);
    border-radius: var(--small-radius);
    background: #242732
}

.support-faq-question:last-child {
    margin-bottom: 0
}

.support-faq-question-header {
    justify-content: space-between;
    padding: 0 0 0 var(--inner-gap);
    border-radius: var(--small-radius) var(--small-radius) 0 0
}

.support-faq-question-button,
.support-faq-question-header {
    display: flex;
    align-items: center;
    height: var(--question-header-height);
    cursor: pointer
}

.support-faq-question-button {
    justify-content: center;
    padding: 0 var(--inner-gap);
    border-radius: var(--small-radius)
}

.support-faq-question-hide-icon,
.support-faq-question-show-icon {
    width: 1.8rem;
    height: 1.8rem
}

.support-faq-question-hide-icon {
    fill: #fd3b00
}

.support-faq-question-show-icon {
    fill: #76797f
}

.-show-answer .support-faq-question-hide-icon,
.support-faq-question-show-icon {
    display: initial
}

.-show-answer .support-faq-question-show-icon,
.support-faq-question-hide-icon {
    display: none
}

.support-faq-question-heading {
    display: flex;
    align-items: center;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    text-align: left;
    color: #76797f
}

.-show-answer .support-faq-question-heading {
    color: #d6934b
}

.support-faq-answer {
    display: none;
    margin: 0 var(--inner-gap);
    padding: var(--inner-gap) 0;
    font-size: 1.2rem;
    text-align: left;
    color: #76797f;
    border-top: 1px solid #76797f
}

.-show-answer>.support-faq-answer {
    display: block
}

@media screen and (min-width:360px) {
    .support-faq-heading {
        height: 6.8rem;
        font-size: 1.6rem
    }
}

@media screen and (min-width:768px) {
    .support-faq-heading {
        height: 8rem;
        font-size: 2rem
    }
}

@media screen and (min-width:992px) {
    .support-faq-wrapper {
        padding: 0 var(--large-gap)
    }

    .support-faq {
        --faq-heading-height: 9.6rem;
        --faq-padding: 3.6rem;
        width: 100%;
        padding: 0 var(--faq-padding) var(--faq-padding)
    }

    .support-faq-heading {
        height: var(--faq-heading-height)
    }

    .support-faq-questions {
        height: calc(100vh - var(--header-height) - var(--support-headeing-wrapper-height) - var(--faq-heading-height) - var(--faq-padding))
    }

    .support-faq-questions.has-padding-correction {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0;
        overflow-y: scroll
    }

    .support-faq-question {
        --question-header-height: 6rem;
        margin-bottom: var(--medium-gap);
        border-radius: var(--small-radius)
    }

    .support-faq-question-header {
        padding: 0 0 0 var(--large-gap)
    }

    .support-faq-question-button {
        padding: 0 var(--large-gap)
    }

    .support-faq-answer {
        margin: 0 var(--large-gap);
        padding: var(--large-gap) 0
    }
}

.support-tickets-wrapper {
    grid-area: support-tickets;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.support-tickets {
    --tickets-list-height: 20rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 var(--inner-gap) var(--inner-gap);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel-background)
}

.support-tickets-heading {
    display: flex;
    align-items: center;
    height: 6.4rem;
    font-size: 1.4rem;
    font-weight: var(--dark-font-weight);
    text-align: left
}

.support-tickets-list {
    width: 100%;
    height: var(--tickets-list-height);
    padding: 0 var(--outer-gap);
    margin-bottom: 1.2rem;
    border-radius: var(--radius);
    background: #13151d
}

.support-ticket-attach-button {
    display: inline-block;
    padding: .8rem 1.5rem;
    background: linear-gradient(90deg, #3a3f52, #2a2e3a);
    color: #d6934b;
    border: none;
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .3s ease;
    margin-top: 1.5rem;
    font-weight: 600;
    box-shadow: 0 4px 6px rgba(0, 0, 0, .1)
}

.support-ticket-attach-button:hover {
    background: linear-gradient(90deg, #43485e, #34384a);
    box-shadow: 0 6px 8px rgba(0, 0, 0, .2)
}

.support-ticket-attach-button:active {
    transform: translateY(2px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, .1)
}

.support-ticket-attach-button:disabled {
    opacity: .5;
    cursor: not-allowed
}

.support-ticket-button {
    display: grid;
    grid-template-columns: 5rem 1fr;
    align-items: center;
    height: 4.5rem;
    margin: var(--outer-gap) 0;
    border-radius: var(--small-radius);
    background: #242732;
    cursor: pointer
}

.support-ticket-button-status {
    display: block;
    width: .75rem;
    height: .75rem;
    margin: 0 auto;
    border-radius: 50%;
    background: #444
}

.support-ticket-button-status[data-ticket-status="0"] {
    background: #ffac0c;
    box-shadow: 0 0 .75rem #ffac0c
}

.support-ticket-button-status[data-ticket-status="1"] {
    background: #444
}

.support-ticket-button-heading {
    padding-right: var(--inner-gap);
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    text-align: left;
    color: #76797f;
    border-radius: 0 var(--small-radius) var(--small-radius) 0
}

.support-tickets-form {
    display: flex;
    flex-direction: column
}

.support-tickets-form-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    text-transform: uppercase
}

.support-tickets-field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem
}

.support-tickets-field-label {
    display: flex;
    align-items: flex-start;
    height: 2rem;
    font-size: 1.2rem;
    color: #a37143
}

#support-tickets-subject-field {
    height: 4.5rem
}

#support-tickets-content-field {
    height: 16rem;
    resize: none;
    overflow: hidden
}

.support-tickets-form-submit {
    height: 4.5rem;
    font-size: var(--button-font-size);
    font-weight: var(--base-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #cd833b
}

.support-tickets-form-submit:active,
.support-tickets-form-submit:focus {
    background: #f39b46;
    box-shadow: 0 0 1rem #f39b46
}

@media(hover:hover) and (pointer:fine) {
    .support-tickets-form-submit:hover {
        background: #f39b46;
        box-shadow: 0 0 1rem #f39b46
    }
}

@media screen and (min-width:360px) {
    .support-tickets-heading {
        height: 6.8rem;
        font-size: 1.6rem
    }
}

@media screen and (min-width:768px) {
    .support-tickets-heading {
        height: 8rem;
        font-size: 2rem
    }
}

@media screen and (min-width:992px) {
    .support-tickets-wrapper {
        padding: 0 var(--large-gap) 0 0
    }

    .support-tickets {
        --tickets-heading-height: 9.6rem;
        --tickets-padding: 3.6rem;
        --tickets-form-heading-height: 6rem;
        --tickets-subject-height: 9rem;
        --tickets-content-height: 19.2rem;
        --tickets-form-submit-height: 5.8rem;
        --tickets-form-height: calc(var(--tickets-form-heading-height) + var(--tickets-subject-height) + var(--tickets-content-height) + var(--tickets-form-submit-height));
        --tickets-list-height: calc(100vh - var(--header-height) - var(--support-headeing-wrapper-height) - var(--tickets-heading-height) - 1.2rem - var(--tickets-form-height) - var(--tickets-padding));
        padding: 0 var(--tickets-padding) var(--tickets-padding)
    }

    .support-tickets-heading {
        height: var(--tickets-heading-height)
    }

    .support-tickets-list {
        padding: 0 var(--medium-gap)
    }

    .support-tickets-form-heading {
        height: var(--tickets-form-heading-height)
    }

    #support-tickets-subject-field {
        height: 5.8rem
    }

    .support-tickets-form-submit {
        height: var(--tickets-form-submit-height);
        font-size: 2rem
    }
}

.support-ticket-wrapper {
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.support-ticket {
    --ticket-header-button-height: 4rem;
    --ticket-header-height: calc(var(--inner-gap) + var(--ticket-header-button-height) + var(--inner-gap));
    --ticket-form-height: 30rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 var(--inner-gap) var(--inner-gap);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel-background)
}

.support-ticket-content,
.support-ticket-message-loading {
    width: 100%
}

.support-ticket-message-loading {
    display: flex;
    justify-content: center;
    align-items: center
}

.support-ticket-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    height: var(--ticket-header-height);
    font-size: 1.4rem;
    font-weight: var(--dark-font-weight);
    text-align: left
}

.support-ticket-heading {
    display: flex;
    align-items: center;
    margin-left: -1rem;
    font-size: var(--base-font-size)
}

.support-ticket-status {
    display: block;
    width: .75rem;
    height: .75rem;
    margin: 0 var(--outer-gap) 0 1rem;
    border-radius: 50%;
    background: #444
}

.support-ticket-status[data-ticket-status="0"] {
    background: #ffac0c;
    box-shadow: 0 0 .75rem #ffac0c
}

.support-ticket-status[data-ticket-status="1"] {
    background: #444
}

.support-ticket-buttons {
    display: flex;
    align-items: center
}

.support-ticket-close-button,
.support-ticket-update-button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--ticket-header-button-height);
    height: var(--ticket-header-button-height);
    margin-left: var(--inner-gap);
    font-size: var(--button-font-size);
    font-weight: var(--dark-font-weight);
    text-transform: uppercase;
    color: #fff
}

.support-ticket-close-button {
    background: #ff3b00
}

.support-ticket-update-button {
    background: #0f955e
}

.support-ticket-close-button:active,
.support-ticket-close-button:focus {
    background: #ff5826;
    box-shadow: 0 0 1rem #ff5826
}

.support-ticket-update-button:active,
.support-ticket-update-button:focus {
    background: #11ae6e;
    box-shadow: 0 0 1rem #11ae6e
}

.support-ticket-button-icon {
    width: 2rem;
    height: 2rem;
    fill: #fff
}

.support-ticket-button-text.tablet-desktop {
    display: none
}

.support-ticket-message {
    display: grid;
    grid-template-columns: 1fr 10rem;
    grid-template-areas: "support-ticket-message-heading support-ticket-message-date" "support-ticket-message-content support-ticket-message-date";
    align-items: center;
    margin: 0 0 var(--small-gap);
    padding: var(--inner-gap);
    border-radius: var(--radius);
    background: #242732
}

.support-ticket-message:last-child {
    margin: 0
}

.support-ticket-message-heading {
    grid-area: support-ticket-message-heading;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    text-align: left;
    color: #d6934b
}

.screenshot-preview {
    max-width: 300px;
    max-height: 150px;
    width: auto;
    height: auto;
    -o-object-fit: contain;
    object-fit: contain;
    border-radius: 4px;
    transition: transform .2s ease-in-out;
    cursor: pointer
}

.screenshot-preview:hover {
    transform: scale(1.05)
}

@media (max-width:600px) {
    .screenshot-preview {
        max-width: 100px;
        max-height: 75px
    }
}

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .75);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000
}

.modal-content {
    position: relative
}

.modal-content,
.modal-image {
    max-width: 90vw;
    max-height: 90vh
}

.modal-image {
    width: auto;
    height: auto;
    border-radius: 6px;
    box-shadow: 0 0 10px rgba(0, 0, 0, .5);
    -o-object-fit: contain;
    object-fit: contain;
    display: block;
    margin: 0 auto
}

.modal-close-button {
    z-index: 1000;
    position: absolute;
    top: -10px;
    right: -10px;
    font-size: 30px;
    color: #fff;
    background: transparent;
    border: none;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    outline: none
}

.support-ticket-message-content {
    grid-area: support-ticket-message-content;
    text-align: left;
    color: #76797f;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: normal
}

.support-ticket-message-date {
    grid-area: support-ticket-message-date;
    color: #76797f
}

.support-ticket-message-form {
    height: var(--ticket-form-height)
}

.support-ticket-message-form-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 6rem;
    font-size: var(--base-font-size);
    font-weight: var(--base-font-weight);
    text-transform: uppercase
}

.support-ticket-message-field-group {
    display: flex;
    flex-direction: column;
    margin-bottom: 1.2rem
}

.support-ticket-message-field-label {
    display: flex;
    align-items: flex-start;
    height: 2rem;
    font-size: 1.2rem;
    color: #a37143
}

#support-ticket-message-content-field {
    height: 16rem;
    resize: none
}

.support-ticket-message-form-submit {
    height: 4.5rem;
    padding: 0 2rem;
    font-size: var(--button-font-size);
    font-weight: var(--base-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: #cd833b
}

.support-ticket-message-form-submit:active,
.support-ticket-message-form-submit:focus {
    background: #f39b46;
    box-shadow: 0 0 1rem #f39b46
}

@media(hover:hover) and (pointer:fine) {
    .support-ticket-close-button:hover {
        background: #ff5826;
        box-shadow: 0 0 1rem #ff5826
    }

    .support-ticket-update-button:hover {
        background: #11ae6e;
        box-shadow: 0 0 1rem #11ae6e
    }

    .support-ticket-message-form-submit:hover {
        background: #f39b46;
        box-shadow: 0 0 1rem #f39b46
    }
}

@media screen and (min-width:360px) {
    .support-ticket-heading {
        font-size: 1.6rem
    }
}

@media screen and (min-width:768px) {
    .support-ticket {
        --ticket-header-button-height: 4.5rem
    }

    .support-ticket-heading {
        font-size: 2rem
    }

    .support-ticket-close-button,
    .support-ticket-update-button {
        justify-content: normal;
        width: auto;
        padding: 0 2rem
    }

    .support-ticket-button-text.tablet-desktop {
        display: initial;
        margin-left: var(--small-gap)
    }
}

@media screen and (min-width:992px) {
    .support-ticket-wrapper {
        padding: 0 var(--large-gap)
    }

    .support-ticket {
        --ticket-padding: 3.6rem;
        --ticket-header-height: 8rem;
        --ticket-form-heading-height: 6rem;
        padding: 0 var(--ticket-padding) var(--ticket-padding)
    }

    .support-ticket-content,
    .support-ticket-message-loading {
        height: calc(100vh - var(--header-height) - var(--support-headeing-wrapper-height) - var(--ticket-form-height) - var(--ticket-padding))
    }

    .support-ticket-messages {
        height: calc(100vh - var(--header-height) - var(--support-headeing-wrapper-height) - var(--ticket-header-height) - var(--ticket-form-height) - var(--ticket-padding))
    }

    .support-ticket-messages.has-padding-correction {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0;
        overflow-y: scroll
    }

    .support-ticket-message-form-heading {
        height: var(--ticket-form-heading-height)
    }

    .support-ticket-message-form-submit {
        font-size: 2rem
    }
}

.tournament-dashboard-wrapper {
    padding: var(--outer-gap)
}

.tournament-dashboard {
    grid-area: tournament-dashboard;
    display: grid;
    grid-template-areas: "tournament-dashboard-heading" "tournament-dashboard-timer" "tournament-dashboard-participate" "tournament-dashboard-conditions";
    grid-template-columns: 1fr;
    grid-gap: var(--outer-gap)
}

.tournament-dashboard-heading {
    grid-area: tournament-dashboard-heading;
    font-size: 2rem;
    font-weight: var(--base-font-weight);
    text-transform: uppercase
}

.tournament-dashboard-timer {
    grid-area: tournament-dashboard-timer;
    display: flex;
    justify-content: center;
    align-items: center
}

.tournament-dashboard-participate {
    grid-area: tournament-dashboard-participate;
    display: flex;
    justify-content: center;
    align-items: center
}

.tournament-dashboard-participate-button {
    height: 4.5rem;
    padding: 0 2rem;
    font-size: 1.7rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #fff;
    background: linear-gradient(90deg, #ff6b00, #ffd108)
}

.tournament-dashboard-participate-button:active,
.tournament-dashboard-participate-button:focus {
    background: linear-gradient(90deg, #ff8933, #ffda3b);
    box-shadow: 0 0 1rem #ffda3b
}

.tournament-dashboard-conditions {
    grid-area: tournament-dashboard-conditions
}

@media(hover:hover) and (pointer:fine) {
    .tournament-dashboard-participate-button:hover {
        background: linear-gradient(90deg, #ff8933, #ffda3b);
        box-shadow: 0 0 1rem #ffda3b
    }
}

@media screen and (min-width:768px) {
    .tournament-dashboard {
        grid-template-areas: "tournament-dashboard-timer tournament-dashboard-heading" "tournament-dashboard-timer tournament-dashboard-conditions" "tournament-dashboard-timer tournament-dashboard-participate";
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 3rem 1fr 4.5rem
    }

    .tournament-dashboard-heading {
        font-size: 3rem;
        text-align: left
    }

    .tournament-dashboard-participate {
        justify-content: flex-start
    }
}

@media screen and (min-width:992px) {
    .tournament-dashboard-wrapper {
        padding: var(--large-gap) var(--large-gap) 0
    }

    .tournament-dashboard {
        grid-template-areas: "tournament-dashboard-heading" "tournament-dashboard-timer" "tournament-dashboard-participate" "tournament-dashboard-conditions";
        grid-template-columns: 1fr;
        grid-template-rows: 3rem 1fr 6rem;
        grid-gap: var(--large-gap)
    }

    .tournament-dashboard-heading {
        text-align: center
    }

    .tournament-dashboard-participate {
        justify-content: center
    }

    .tournament-dashboard-participate-button {
        width: 100%;
        height: 6rem;
        font-size: 2.2rem
    }
}

.tournament-timer {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center
}

.tournament-timer-countdown {
    position: absolute;
    display: grid;
    grid-template-columns: 1fr;
    grid-row-gap: var(--tiny-gap)
}

.tournament-timer-days {
    font-size: 2.5rem
}

.tournament-timer-days-number {
    font-family: Lekton, monospace;
    font-size: 3rem
}

.tournament-timer-time {
    font-family: Lekton, monospace;
    font-size: 4rem
}

#tournament-timer {
    width: 100%;
    height: 100%
}

#tournament-timer-progress-segment {
    stroke: url(#tournament-timer-gradient)
}

.tournament-conditions-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    width: 100%
}

.tournament-conditions-label {
    text-align: left;
    color: var(--label-color);
    font-weight: var(--dark-font-weight)
}

.tournament-conditions {
    height: 13.2rem;
    text-align: left
}

.tournament-condition {
    display: flex;
    align-items: center;
    font-size: 1.2rem;
    margin: 1.2rem 0
}

.tournament-condition-status {
    width: .8rem;
    height: .8rem;
    border-radius: 50%;
    margin-right: 1.2rem;
    background: #333
}

.tournament-condition-status[data-condition-status=done] {
    background: #ff4800;
    box-shadow: 0 0 .75rem #ff4800
}

.tournament-highlight {
    margin: 0 .3rem;
    font-family: Argentum, sans-serif;
    font-weight: var(--deep-font-weight);
    color: #f5ff50
}

.tournament-domain {
    text-transform: uppercase
}

.tournament-participation {
    --participation-info-height: auto;
    --participation-info-wrapper-height: auto;
    --participants-header-height: 3.2rem;
    --participants-header-wrapper-height: calc(var(--participants-header-height) + var(--outer-gap));
    --participants-height: auto;
    grid-area: tournament-participants;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: var(--participation-info-wrapper-height) var(--participants-header-wrapper-height) 1fr
}

.tournament-info-wrapper,
.tournament-participants-header-wrapper {
    display: flex;
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.tournament-participants-wrapper {
    display: flex;
    padding: 0 var(--outer-gap)
}

.tournament-info {
    width: 100%;
    height: var(--participation-info-height);
    padding: var(--inner-gap);
    text-align: left;
    border-radius: var(--radius);
    background: var(--panel-background)
}

.tournament-participants-header {
    position: relative;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    width: 100%;
    padding: 0 var(--inner-gap);
    align-items: center
}

.tournament-participants-header-column {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    font-weight: var(--base-font-weight);
    text-transform: uppercase;
    text-align: center
}

.tournament-participants-update-button {
    position: absolute;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 5rem;
    height: 4.5rem;
    background: #0f955e
}

.tournament-participants-update-button:active,
.tournament-participants-update-button:focus {
    background: #11ae6e;
    box-shadow: 0 0 1rem #11ae6e
}

.tournament-participants-button-icon {
    width: 2rem;
    height: 2rem;
    fill: #fff
}

.tournament-participants-update-button:disabled>.tournament-participants-button-icon {
    fill: var(--button-disabled-color)
}

.tournament-participants {
    --avatar-size: 4.6rem;
    --participant-height: calc(var(--inner-gap) + var(--avatar-size) + var(--inner-gap));
    width: 100%
}

.empty-participant-list {
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--participant-height)
}

.empty-participant-list-text {
    font-size: 1.68rem;
    font-weight: var(--deep-font-weight);
    text-transform: uppercase;
    color: #282b36
}

.tournament-participant-list {
    height: var(--participants-height)
}

.tournament-participant {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    height: var(--participant-height);
    margin-bottom: .6rem;
    padding: 0 var(--inner-gap);
    border-radius: var(--radius);
    background: var(--panel-background)
}

.tournament-participant-user {
    display: grid;
    grid-template-columns: var(--avatar-size) 1fr;
    grid-gap: var(--medium-gap)
}

.tournament-participant-avatar-link {
    display: flex;
    margin: auto 0;
    cursor: pointer
}

.tournament-participant-avatar {
    width: var(--avatar-size);
    height: var(--avatar-size)
}

.tournament-participant-name {
    margin: auto 0;
    text-align: left
}

.tournament-participant-points,
.tournament-participant-reward {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    font-size: 1.6rem
}

.tournament-participant-points-value,
.tournament-participant-reward-value {
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: Argentum, sans-serif
}

.tournament-participant-reward-value {
    color: #87f9c1
}

@media(hover:hover) and (pointer:fine) {
    .tournament-participants-update-button:hover {
        background: #11ae6e;
        box-shadow: 0 0 1rem #11ae6e
    }
}

@media screen and (min-width:768px) {
    .tournament-participants-update-button {
        left: auto;
        right: 0
    }
}

@media screen and (min-width:992px) {
    .tournament-participation {
        --participation-info-height: 15rem;
        --participation-info-wrapper-height: calc(var(--participation-info-height) + var(--large-gap));
        --participants-header-wrapper-height: calc(var(--participants-header-height) + var(--large-gap));
        --participants-height: calc(100vh - var(--header-height) - var(--large-gap) - var(--participation-info-wrapper-height) - var(--participants-header-wrapper-height));
        padding: var(--large-gap) 0 0 0
    }

    .tournament-info-wrapper,
    .tournament-participants-header-wrapper {
        padding: 0 var(--large-gap) var(--large-gap) 0
    }

    .tournament-participants-wrapper {
        padding: 0 var(--large-gap) 0 0
    }

    .tournament-info {
        padding: var(--large-gap)
    }

    .tournament-participants-header {
        grid-template-columns: 1fr 1fr 1fr
    }

    .tournament-participants-header-column {
        font-size: 2.5rem
    }

    .tournament-participants {
        --participant-height: 7rem
    }

    .empty-participant-list {
        height: var(--participants-height)
    }

    .empty-participant-list-text {
        font-size: 3.6rem
    }

    .tournament-participant-list.has-padding-correction {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0;
        overflow-y: scroll
    }

    .tournament-participant {
        grid-template-columns: 1fr 1fr 1fr
    }
}

.user-agreement-document-wrapper {
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.user-agreement-document {
    height: 100%;
    padding: var(--inner-gap);
    text-align: left;
    color: var(--dialog-content-color);
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel-background)
}

.user-agreement-document-text dd,
.user-agreement-document-text dt,
.user-agreement-document-text h2,
.user-agreement-document-text li,
.user-agreement-document-text ol,
.user-agreement-document-text p {
    margin: var(--medium-gap) 0
}

.user-agreement-document-text ol {
    padding-left: var(--medium-gap);
    counter-reset: item
}

.user-agreement-document-text ol>li {
    display: block
}

.user-agreement-document-text ol>li:before {
    content: counters(item, ".", decimal) ". ";
    counter-increment: item;
    color: var(--dialog-content-highlight-color)
}

.user-agreement-document-text dt {
    font-style: italic;
    font-weight: var(--dark-font-weight);
    text-transform: uppercase
}

.user-agreement-document-text dd {
    padding-left: var(--medium-gap)
}

.user-agreement-document-text>p {
    margin: 0 0 var(--medium-gap)
}

.user-agreement-document-text>ol {
    margin: var(--medium-gap) 0 0;
    padding: 0
}

.user-agreement-document-text a {
    color: var(--link-inactive-color)
}

.user-agreement-document-text a:active,
.user-agreement-document-text a:focus {
    color: var(--link-hover-color)
}

@media(hover:hover) and (pointer:fine) {
    .user-agreement-document-text a:hover {
        color: var(--link-hover-color)
    }
}

@media screen and (min-width:992px) {
    .user-agreement-document-wrapper {
        padding: 0 var(--large-gap)
    }

    .user-agreement-document {
        --document-padding: 3.6rem;
        width: 100%;
        height: calc(100vh - var(--header-height) - var(--support-headeing-wrapper-height));
        padding: var(--document-padding)
    }

    .user-agreement-document-text {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0
    }
}

.provably-fair-info-wrapper {
    padding: 0 var(--outer-gap) var(--outer-gap)
}

.provably-fair-info {
    height: 100%;
    padding: var(--inner-gap);
    text-align: left;
    border-radius: var(--radius) var(--radius) 0 0;
    background: var(--panel-background)
}

.provably-fair-info-text {
    font-size: var(--base-font-size)
}

.provably-fair-info-text li,
.provably-fair-info-text ol,
.provably-fair-info-text p,
.provably-fair-info-text ul {
    margin-bottom: var(--inner-gap);
    color: #a9acaf
}

.provably-fair-info-text p {
    text-align: justify
}

.provably-fair-info-text pre {
    margin-bottom: var(--inner-gap);
    padding: var(--inner-gap);
    font-family: Lekton, monospace;
    color: #ccc;
    border-radius: var(--radius);
    background: #262834
}

.provably-fair-info-text .cm {
    color: #555657
}

.provably-fair-info-text .kw {
    font-weight: var(--dark-font-weight);
    color: #fff
}

.provably-fair-info-text .op {
    color: #fff
}

.provably-fair-info-text .std {
    font-weight: var(--dark-font-weight);
    color: #3f3
}

.provably-fair-info-text .var {
    color: #39c
}

.provably-fair-info-text .arg {
    color: #fa6
}

.provably-fair-info-text .str {
    color: #fc0
}

.provably-fair-info-text .num {
    color: #3cf
}

.provably-fair-info-text .bool {
    color: #f93
}

.provably-fair-info-text :last-child {
    margin: 0
}

.provably-fair-info-text a {
    color: var(--link-inactive-color)
}

.provably-fair-info-text a:active,
.provably-fair-info-text a:focus {
    color: var(--link-hover-color)
}

@media(hover:hover) and (pointer:fine) {
    .provably-fair-info-text a:hover {
        color: var(--link-hover-color)
    }
}

@media screen and (min-width:992px) {
    .provably-fair-info-wrapper {
        padding: 0 var(--large-gap)
    }

    .provably-fair-info {
        --info-padding: 3.6rem;
        width: 100%;
        height: calc(100vh - var(--header-height) - var(--support-headeing-wrapper-height));
        padding: var(--info-padding)
    }

    .provably-fair-info-text {
        margin: 0 -1.4rem 0 0;
        padding: 0 .9rem 0 0;
        font-size: 1.7rem
    }
}

.loader,
.loader__page,
.loader__widget {
    width: 100vw !important;
    height: 100vh !important
}

.loader {
    position: absolute;
    top: 0;
    left: 0;
    background: #13151d
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Light.409c7f79.ttf);
    font-weight: 300
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Regular.ee653992.ttf);
    font-weight: 400
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Medium.c8b6e083.ttf);
    font-weight: 500
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-SemiBold.c641dbee.ttf);
    font-weight: 600
}

@font-face {
    font-family: Montserrat;
    src: url(../fonts/Montserrat-Bold.ade91f47.ttf);
    font-weight: 700
}

@font-face {
    font-family: Lekton;
    src: url(../fonts/Lekton-Bold.e1d92ee2.ttf);
    font-weight: 700
}

@font-face {
    font-family: Argentum;
    src: url(../fonts/ArgentumSans-Light.687fe906.ttf);
    font-weight: 300
}

@font-face {
    font-family: Argentum;
    src: url(../fonts/ArgentumSans-Regular.f85fa6bb.ttf);
    font-weight: 400
}

@font-face {
    font-family: Argentum;
    src: url(../fonts/ArgentumSans-Medium.87bc0fc8.ttf);
    font-weight: 500
}

@font-face {
    font-family: Argentum;
    src: url(../fonts/ArgentumSans-SemiBold.32d1e62c.ttf);
    font-weight: 600
}

@font-face {
    font-family: Argentum;
    src: url(../fonts/ArgentumSans-Bold.c4f1998b.ttf);
    font-weight: 700
}

:root {
    --app-height: 100vh
}

*,
:after,
:before {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

ul {
    list-style-type: none
}

a {
    text-decoration: none
}

body,
html {
    height: 100%
}

html {
    --vw-rem: 8px;
    height: -webkit-fill-available;
    font-size: var(--vw-rem)
}

body {
    min-height: var(--app-height, 100vh);
    min-height: -webkit-fill-available
}

#app {
    --scroll-bar-width: 0;
    --scroll-bar-alternative-width: none;
    --scroll-bar-background: #22262f;
    --scroll-bar-slider-background: #41454c;
    --scroll-bar-fix-padding-right: 0;
    --nav-outer-filter: opacity(80%);
    --hide-nav-button-hover-background: transparent;
    --bar-slide-duration: 150ms;
    --bar-slide-function: ease-out;
    --tool-bar-paddinng-bottom: 0;
    --base-font-size: 1.4rem;
    --base-font-weight: 500;
    --light-font-weight: 400;
    --deep-font-weight: 600;
    --dark-font-weight: 700;
    --wide-font-letter-spacing: .5rem;
    --large-gap: 2.4rem;
    --medium-gap: 1.6rem;
    --small-gap: .8rem;
    --tiny-gap: .4rem;
    --outer-gap: var(--small-gap);
    --inner-gap: var(--small-gap);
    --tabblet-top-gap: .8rem;
    --radius: .8rem;
    --small-radius: .45rem;
    --line-thickness: 2px;
    --button-font-size: 1.2rem;
    --header-height: 4.5rem;
    --mode-bar-height: 5rem;
    --chat-width: 90vw;
    --mode-kit-width: 100%;
    --giveaway-height: 14rem;
    --giveaway-wrapper-height: calc(var(--giveaway-height) + var(--outer-gap) + var(--outer-gap));
    --cashback-height: auto;
    --cashback-wrapper-height: calc(var(--cashback-height) + var(--outer-gap));
    --inventory-height: auto;
    --inventory-control-height: 5rem;
    --inventory-control-wrapper-height: calc(var(--inventory-control-height) + var(--tiny-gap));
    --inventory-board-wrapper-height: 1fr;
    --inventory-actions-wrapper-height: calc(var(--inventory-action-button-height)*2 + var(--tiny-gap));
    --inventory-action-button-height: 4.5rem;
    --inventory-items-columns: 3;
    --item-cards-grid-gap: var(--tiny-gap);
    --item-card-width: calc((100vw - var(--outer-gap) - var(--outer-gap) - var(--inner-gap) - var(--inner-gap) - var(--item-cards-grid-gap)*(var(--inventory-items-columns) - 1))/var(--inventory-items-columns));
    --item-card-height: calc(var(--item-card-width)*1.09);
    --crash-betting-board-height: auto;
    --crash-betting-rules-margin: 0 0 1rem;
    --crash-betting-wrapper-height: calc(var(--crash-betting-board-height) + var(--outer-gap));
    --crash-summary-height: auto;
    --crash-summary-wrapper-height: calc(var(--crash-summary-height) + var(--outer-gap));
    --crash-bets-wrapper-height: auto;
    --crash-history-bets-wrapper-height: auto;
    --jackpot-items-board-height: auto;
    --jackpot-items-wrapper-height: calc(var(--jackpot-items-board-height) + var(--outer-gap));
    --jackpot-betting-board-height: auto;
    --jackpot-betting-wrapper-height: calc(var(--jackpot-betting-board-height) + var(--outer-gap));
    --jackpot-spinner-height: auto;
    --jackpot-spinner-wrapper-height: calc(var(--jackpot-spinner-height) + var(--outer-gap));
    --jackpot-bets-wrapper-height: auto;
    --dashboard-indicator-height: 9rem;
    --nav-slide-transition: 350ms ease-out;
    --coloring-transition: 50ms ease-out;
    --bar-slide-transition: 150ms ease-out;
    --roulette-multiplier-gradient: linear-gradient(180.0deg, rgba(22, 22, 22, 0) -24%, rgba(22, 22, 22, 0.4) 126%);
    --roulette-item-size: 70px;
    --roulette-item-height-size: 70px;
    --roulette-item-side-size: 7px;
    --roulette-outer-radius: 420px;
    --roulette-inner-radius: calc(var(--roulette-outer-radius)*2 - 135px);
    --roulette-players-info-item-height: 3.5em;
    --roulette-players-info-item-margin-top: 0.7em;
    --scroll-bar-size: 10px;
    --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.4);
    --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.7)
}

@media screen and (min-width:320px) {
    html {
        --vw-rem: 10px
    }
}

@media screen and (min-width:360px) {
    #app {
        --button-font-size: 1.3rem
    }
}

@media screen and (min-width:375px) {
    #app {
        --crash-dashboard-indicator-grid-row-gap: .5rem;
        --item-cards-grid-gap: .6rem
    }
}

@media screen and (min-width:411px) {
    #app {
        --button-font-size: 1.4rem
    }
}

@media screen and (min-width:480px) {
    #app {
        --dashboard-indicator-height: 10rem;
        --outer-gap: var(--medium-gap);
        --inner-gap: var(--medium-gap);
        --item-cards-grid-gap: .8rem;
        --inventory-control-height: 6.4rem
    }
}

@media screen and (min-width:540px) {
    #app {
        --inventory-items-columns: 4;
        --item-cards-grid-gap: .6rem
    }
}

@media screen and (min-width:768px) {
    #app {
        --chat-width: 60vw;
        --crash-betting-board-height: 19.8rem;
        --crash-betting-wrapper-height: calc(var(--small-gap) + var(--crash-betting-board-height) + var(--small-gap));
        --cashback-height: 10.6rem;
        --cashback-wrapper-height: calc(var(--cashback-height) + var(--small-gap));
        --inventory-height: calc(var(--app-height, 100vh) - var(--header-height) - var(--crash-betting-wrapper-height) - var(--cashback-wrapper-height) - var(--mode-bar-height));
        --inventory-control-height: 6.4rem;
        --inventory-board-wrapper-height: calc(var(--inventory-height) - var(--inventory-control-wrapper-height) - var(--inventory-actions-wrapper-height));
        --crash-summary-height: 13rem;
        --crash-summary-wrapper-height: calc(var(--crash-summary-height) + var(--small-gap));
        --crash-bets-height: 30.4rem;
        --crash-bets-wrapper-height: calc(var(--crash-bets-height) + 0.2rem);
        --giveaway-height: 14rem;
        --giveaway-wrapper-height: calc(var(--inventory-height) - var(--crash-summary-wrapper-height) - var(--crash-bets-wrapper-height));
        --dashboard-indicator-height: 11rem;
        --inventory-items-columns: 3;
        --item-card-width: calc((50vw - var(--outer-gap) - var(--outer-gap)/2 - var(--inner-gap) - var(--inner-gap) - var(--item-cards-grid-gap)*(var(--inventory-items-columns) - 1))/var(--inventory-items-columns))
    }
}

@media screen and (min-width:992px) {
    html {
        --vw-rem: 0.520833333333vw
    }

    #app {
        --scroll-bar-width: .6rem;
        --scroll-bar-alternative-width: thin;
        --scroll-bar-fix-padding-right: 2px;
        --tool-bar-paddinng-bottom: 4rem;
        --mode-width: 1fr;
        --outer-gap: var(--medium-gap);
        --inner-gap: var(--medium-gap);
        --header-height: 10rem;
        --chat-width: 38.6rem;
        --side-bar-width: 10rem;
        --mode-kit-width: calc(37.1rem + var(--medium-gap) + var(--medium-gap));
        --giveaway-wrapper-height: calc(var(--giveaway-height) + var(--medium-gap) + var(--small-gap));
        --cashback-wrapper-height: calc(var(--cashback-height) + var(--small-gap));
        --inventory-height: calc(100vh - var(--header-height) - var(--giveaway-wrapper-height) - var(--cashback-wrapper-height));
        --inventory-actions-wrapper-height: calc(var(--inventory-action-button-height)*2 + var(--tiny-gap) + var(--tiny-gap));
        --inventory-items-columns: 3;
        --item-cards-grid-gap: .6rem;
        --item-card-width: 10.9rem;
        --item-card-height: 11.7rem;
        --crash-betting-board-height: 25.5rem;
        --crash-betting-wrapper-height: calc(var(--crash-betting-board-height) + var(--large-gap));
        --crash-summary-height: 7rem;
        --crash-summary-wrapper-height: calc(var(--crash-summary-height) + var(--small-gap));
        --crash-bets-wrapper-height: calc(100vh - var(--header-height) - var(--crash-betting-wrapper-height) - var(--crash-summary-wrapper-height) - var(--crash-hash-wrapper));
        --crash-history-summary-wrapper-height: calc(var(--crash-summary-height) + var(--medium-gap));
        --crash-history-bets-wrapper-height: calc(100vh - var(--header-height) - var(--crash-history-summary-wrapper-height));
        --crash-hash-height: 4rem;
        --crash-hash-wrapper: calc(var(--crash-hash-height) + var(--small-gap));
        --jackpot-items-board-height: calc(var(--item-card-height)*2 + var(--item-cards-grid-gap)*3);
        --jackpot-items-wrapper-height: calc(var(--jackpot-items-board-height) + var(--medium-gap));
        --jackpot-betting-board-height: 7rem;
        --jackpot-betting-wrapper-height: calc(var(--jackpot-betting-board-height) + var(--medium-gap));
        --jackpot-spinner-height: 17rem;
        --jackpot-spinner-wrapper-height: calc(var(--jackpot-spinner-height) + var(--small-gap));
        --jackpot-bets-wrapper-height: calc(100vh - var(--header-height) - var(--jackpot-items-wrapper-height) - var(--jackpot-betting-wrapper-height) - var(--jackpot-spinner-wrapper-height));
        --dashboard-indicator-height: 11.5rem
    }
}