:root {
    --popup-bg: #262631;
    --popup-border: #313040;
    --popup-header-grad-top: #222129;
    --popup-header-grad-bottom: #100F15;
    --popup-primary: #960CCC;
    --popup-primary-hover: #7c08a8;
    --popup-link: #BC0FFF
}

.popup-overlay {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: none;
    padding: 1.5rem;
    background: rgba(28, 30, 35, .6);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    z-index: 10;
    opacity: 0;
    transition: opacity .3s ease;
    justify-content: center;
    align-items: flex-start
}

.popup-overlay.active,
.popup.open {
    opacity: 1
}

.popup {
    background: var(--popup-bg);
    border: 1px solid var(--popup-border);
    border-radius: 1rem;
    padding: .25rem .25rem 1rem;
    color: var(--font-main-color);
    overflow-y: auto;
    display: none;
    opacity: 0;
    transition: opacity .18s ease;
    flex-direction: column
}

.popup.center {
    max-width: 38.4375rem;
    width: 100%
}

.popup.side {
    max-width: 30.875rem;
    width: 100%;
    min-height: 100%;
    margin-left: auto
}

.popup.side.open {
    transform: none
}

.popup__header {
    background: linear-gradient(180deg, var(--popup-header-grad-top) .09%, var(--popup-header-grad-bottom) 313.97%);
    border-radius: .75rem .75rem 0 0;
    padding: 1rem;
    position: relative;
    justify-content: space-between
}

.popup.side .popup__header {
    background: var(--popup-header-grad-bottom)
}

.popup__header,
.popup__header-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .75rem
}

.popup__title {
    font-family: var(--font-inter), sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: 1.625rem;
    margin: 0
}

.popup.side .popup__title {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.5rem
}

.popup__close,
.popup__header-return {
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s ease-out
}

.popup__close {
    width: 1.5rem;
    min-width: 1.5rem;
    height: 1.5rem;
    display: inline-flex;
    background: 0 0;
    border: 0
}


.popup__header-return {
    height: 2rem;
    width: 2rem;
    min-width: 2rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #49484d 0, #28272d 100%) padding-box, linear-gradient(180deg, #595860 0, #32303b 100%) border-box;
    border: 1px solid transparent;
    display: flex
}

.popup__header-return img {
    width: .75rem;
    height: .75rem
}

.popup .button {
    font-size: .875rem;
    border-radius: .5rem
}

.popup.center .button {
    padding: .5rem .75rem
}

.popup__body {
    padding: 1.5rem 1.5rem 0
}

.popup.side .popup__body {
    padding: 1rem .75rem 0
}

.popup__text {
    font-family: var(--font-inter), sans-serif;
    font-size: 1rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.25rem
}

.popup__text .accent {
    color: var(--popup-link);
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 800;
    line-height: 2.125rem
}

.popup__actions {
    display: flex;
    gap: .5rem;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 1.5rem
}

.popup-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 2.25rem;
    width: 2.25rem;
    min-width: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(180deg, #49484d 0, #28272d 100%);
    color: var(--font-main-color);
    font: var(--font-inter), sans-serif
}

.popup-chip.type-1,
.popup-chip.type-2 {
    width: 2rem;
    min-width: 2rem;
    height: 2rem
}

.popup-chip,
.popup-chip.type-2 {
    border: 1px solid #595860;
    font-size: .875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem
}

.popup-chip.type-2 {
    background: 0 0
}

.popup-chip.type-3 {
    width: auto;
    min-width: 2.25rem;
    padding: 0 .5rem
}

.popup-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem
}

.popup-step {
    display: flex;
    align-items: center;
    gap: .5rem
}

.popup-step-text {
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--font-secondary-color)
}

.popup-steps.type-1 .popup-step {
    align-items: flex-start
}

.popup-steps.type-1 .popup-step-text {
    padding-top: .25rem
}

.popup-cta,
.popup-note {
    display: flex;
    flex-direction: column
}

.popup-cta {
    gap: 1.5rem;
    align-items: stretch;
    margin-top: 1.5rem
}

.popup-note {
    align-items: center;
    gap: 1rem
}

.popup-note-text {
    color: var(--font-secondary-color);
    text-align: center;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem
}

.popup-link-inline {
    color: var(--popup-link);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .38rem;
    cursor: pointer;
    transition: .3s ease-out
}

.popup-link-inline img {
    width: 1.25rem;
    min-width: 1.25rem;
    height: 1.25rem
}

.popup-acc+.popup-acc {
    margin-top: 1rem
}

.popup-acc:last-child {
    border-bottom: 0
}

.popup-acc__header {
    width: 100%;
    background: 0 0;
    border: 0;
    padding: 0;
    color: var(--font-main-color);
    display: flex;
    align-items: center;
    gap: .5rem;
    cursor: pointer;
    transition: .3s ease-out
}

.popup-acc__title {
    flex: 1 1 auto;
    font-family: var(--font-inter), sans-serif;
    font-size: 1.25rem;
    font-weight: 600;
    line-height: 1.625rem;
    text-align: left
}

.popup-acc__arrow {
    width: 1.25rem;
    height: 1.25rem;
    background: url(../img/icons/arrow.svg)center/contain no-repeat;
    transform: rotate(0deg);
    transition: transform .25s ease
}

.popup-acc.open .popup-acc__arrow {
    transform: rotate(180deg)
}

.popup-acc__content {
    padding-bottom: .5rem
}

.popup-acc__content>.popup-steps,
.popup-acc__content>.popup__text {
    margin-top: 1.5rem
}

.popup-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .5rem
}

.popup-list>li {
    position: relative;
    padding-left: 1rem;
    color: var(--font-main-color);
    font-size: 1rem;
    line-height: 1.4rem
}

.popup-acc__content>.popup-list {
    margin-top: .75rem
}

.popup-acc__content .popup__text+.popup__text,
.popup-list .popup-list {
    margin-top: .5rem
}

.popup-list>li::before {
    content: "";
    position: absolute;
    left: 0;
    top: .55rem;
    width: .375rem;
    height: .375rem;
    border-radius: 50%;
    background: var(--popup-link)
}

.popup-list.type-2>li::before {
    width: .3rem;
    height: .3rem
}

.popup-staged-title {
    display: flex;
    align-items: center;
    gap: .5rem
}

.popup-staged-title-text {
    font-size: 1.125rem;
    font-weight: 400
}

.popup-staged-list {
    margin-top: .75rem
}

.popup-staged-item+.popup-staged-item {
    margin-top: 1rem
}

.popup-staged-item .popup-list {
    counter-reset: popupStageNum;
    gap: 1rem;
    margin-top: 1rem
}

.popup-staged-item .popup-list>li {
    padding-left: 4.5rem;
    padding-top: .25rem
}

.popup-staged-item .popup-list>li::before {
    counter-increment: popupStageNum;
    content: counter(popupStageNum);
    border-radius: 50%;
    color: var(--font-main-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-inter), sans-serif;
    top: 0;
    left: 2rem;
    border: 1px solid #595860;
    width: 2rem;
    min-width: 2rem;
    height: 2rem;
    background: 0 0;
    font-size: .875rem;
    font-style: normal;
    font-weight: 500;
    line-height: 1.125rem
}

.popup-link-underline {
    color: var(--font-main-color);
    text-decoration: underline;
    transition: .2s ease-out
}

.popup-table table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    border: 1px solid var(--popup-border);
    table-layout: fixed;
    border-radius: .5rem;
    overflow: hidden
}

.popup-acc__content>.popup-table {
    margin-top: .75rem
}

.popup-table td,
.popup-table th {
    border-right: 1px solid var(--popup-border);
    border-bottom: 1px solid var(--popup-border);
    padding: .75rem;
    text-align: left
}

.popup-table th {
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem;
    background: #07060e;
    color: #fff
}

.popup-table td {
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem;
    vertical-align: top;
    word-break: break-word
}

.popup-table tr:last-child td {
    border-bottom: none
}

.popup-table tr td:last-child,
.popup-table tr th:last-child {
    border-right: none
}

.popup-table tr:first-child th:first-child {
    border-top-left-radius: .5rem
}

.popup-table tr:first-child th:last-child {
    border-top-right-radius: .5rem
}

.popup-table tr:last-child td:first-child {
    border-bottom-left-radius: .5rem
}

.popup-table tr:last-child td:last-child {
    border-bottom-right-radius: .5rem
}

.popup.center.popup-video {
    max-width: 63.5rem;
    width: 100%
}

.popup-video {
    padding-bottom: .25rem
}

.popup-video .popup__body {
    padding: 0
}

.popup__video {
    max-width: 100%;
    width: 100%;
    aspect-ratio: 16/9;
    border-bottom-left-radius: .5rem;
    border-bottom-right-radius: .5rem;
    overflow: hidden
}

.popup-video--22-9 .popup__video {
    aspect-ratio: 22/9;
}

#popup-video,
.popup__video video {
    width: 100%;
    height: 100%
}

.popup-balance-replenishment .popup__body {
    padding: 1.5rem .75rem 0;
    display: flex;
    flex-direction: column;
    gap: 1rem
}

.popup-balance-replenishment .button.type-3 {
    width: 100%;
    margin-top: 1rem;
    font-size: .75rem
}

.popup-balance__card {
    padding: 1rem;
    background: linear-gradient(180deg, #222129 0, #100f15 100%) padding-box, linear-gradient(180deg, #45444a 0, #1b1a20 100%) border-box;
    border: 1px solid transparent;
    border-radius: .75rem
}

.popup-balance__coin-label {
    color: var(--font-main-color);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem
}

.popup-balance__coin {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    margin-top: .5rem;
    border-radius: .375rem;
    border: 1px solid transparent;
    background: linear-gradient(180deg, #25242a .07%, #17161c 94.41%) padding-box, linear-gradient(180deg, #36353d 0, #17161c 100%) border-box;
    box-shadow: 0 1px 2px 0 rgba(20, 21, 26, .05)
}

.popup-balance__coin-img {
    width: 2.5rem;
    min-width: 2.5rem;
    height: 2.5rem
}

.popup-balance__coin-title {
    color: var(--font-main-color);
    font-family: var(--font-inter), sans-serif;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.5rem
}

.popup-balance__group {
    display: flex;
    flex-direction: column;
    gap: .25rem
}

.popup-balance__group:not(:first-child) {
    margin-top: 1rem
}

.popup-balance__label {
    color: var(--font-main-color);
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.125rem
}

.popup-balance__input {
    padding: .5rem .75rem;
    border-radius: .5rem;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.25rem;
    word-break: break-word;
    border: 1px solid #313040;
    background: #262631;
    box-shadow: 0 1px 2px 0 rgba(9, 15, 13, .1)
}

.popup-balance__qr {
    display: flex;
    justify-content: center;
    margin-top: 1rem
}

.popup-balance__qr img {
    width: 7.5rem;
    height: 7.5rem;
    border-radius: .75rem
}

.popup-balance__note {
    color: var(--font-main-color);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1rem
}

.popup-withdraw,
.popup-withdraw__group {
    display: flex;
    flex-direction: column;
    gap: 1.5rem
}

.popup-withdraw__group {
    gap: .25rem
}

.popup-withdraw__label {
    color: var(--font-secondary-color);
    font-size: .875rem;
    font-weight: 400;
    line-height: 1.125rem
}

.popup-withdraw__value {
    color: var(--font-main-color);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    word-break: break-word
}

.popup-withdraw__value.green {
    color: #5bca73
}

.popup-withdraw__value.red {
    color: #fa3332
}

.popup-withdraw-success {
    background: linear-gradient(134deg, #292831 .44%, #0f3727 94.79%)
}

.popup-withdraw__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
    padding: 2.5rem 4rem
}

.popup-withdraw__icon img {
    width: 5rem;
    height: 5rem
}

.popup-withdraw__text {
    color: var(--font-main-color);
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem
}

.popup-avatar {
    display: flex;
    flex-direction: column;
    align-items: center
}

.popup-avatar__preview {
    width: 7.5rem;
    height: 7.5rem;
    aspect-ratio: 1/1;
    border-radius: .75rem;
    overflow: hidden;
    background: #2b2b33;
    display: flex;
    align-items: center;
    justify-content: center
}

.popup-avatar__img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.popup-avatar__preview[data-empty=true] .popup-avatar__img {
    width: 3.5rem;
    height: 3.5rem;
    object-fit: contain
}

.popup-avatar__actions {
    display: flex;
    gap: .5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 1.5rem
}

.popup-avatar__note {
    color: var(--font-secondary-color);
    text-align: center;
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.25rem;
    margin-top: 1.5rem
}

.popup-change-avatar .popup__actions {
    justify-content: center
}

@media (any-hover:hover) {
    .popup__close:hover {
        filter: brightness(2)
    }

    .popup__close:active {
        filter: brightness(1)
    }

    .popup__header-return:hover {
        opacity: .8
    }

    .popup__header-return:active {
        opacity: 1
    }

    .popup-tab:hover {
        color: var(--font-main-color)
    }

    .popup-tab:active {
        color: var(--font-secondary-color)
    }

    .popup-link-inline:hover {
        opacity: .7
    }

    .popup-link-inline:active {
        opacity: 1
    }

    .popup-link-underline:hover {
        text-decoration: none
    }

    .popup-link-underline:active {
        text-decoration: underline
    }

    .popup-acc__header:hover {
        opacity: .7
    }

    .popup-acc__header:active {
        opacity: 1
    }
}

@media screen and (max-width:1023px) {
    .popup-overlay {
        padding: .75rem
    }
}

@media screen and (max-width:568px) {
    .popup-withdraw__content {
        padding: 2.5rem .75rem
    }

    .popup-withdraw-success .popup__actions {
        justify-content: center
    }
}

@media screen and (max-width:360px) {

    .popup-withdraw-confirmation .popup__actions,
    .popup.center .popup__actions {
        justify-content: center
    }
}