.content .aboutus-wrap {
    min-height: 100vh
}

.aboutus-body {
    position: relative;
    flex: 1;
    margin: 2.1333333333vw 2.1333333333vw 13.8666666667vw
}

.article-content {
    width: auto;
    padding: 2.1333333333vw;
    background: #ffffff
}

.article-content-title {
    margin-bottom: 4.2666666667vw;
    color: #0e2749;
    font-size: 4.2666666667vw;
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5
}

.article-detail {
    margin-bottom: 6.4vw;
    line-height: 1.5
}

.article-detail-tile {
    margin-bottom: 2.1333333333vw;
    color: #0e2749;
    font-weight: 700
}

.article-detail-tile .link {
    color: #054ea1
}

.article-detail-sub-tile {
    color: #0e2749b3;
    font-size: 3.4666666667vw;
    font-style: italic;
    font-weight: 700
}

.article-detail-content .text {
    width: inherit;
    margin-bottom: 6.4vw;
    color: #0e2749b3;
    font-size: 3.4666666667vw;
    line-height: 1.6
}

.article-detail-content .list-number,
.article-detail-content .list-number-suffix-parentheses,
.article-detail-content .list-lower-alpha,
.article-detail-content .list-dot {
    width: inherit;
    margin-bottom: 5.3333333333vw;
    margin-left: 5.3333333333vw;
    color: #0e2749b3;
    font-size: 3.4666666667vw;
    line-height: 1.6
}

.article-detail-content .list-number>li,
.article-detail-content .list-number-suffix-parentheses>li,
.article-detail-content .list-lower-alpha>li,
.article-detail-content .list-dot>li {
    display: list-item;
    padding-bottom: 1.3333333333vw;
    counter-increment: li
}

.article-detail-content .list-number li {
    list-style: decimal
}

.article-detail-content .list-dot li {
    list-style: disc
}

.article-detail-content .list-number-suffix-parentheses,
.article-detail-content .list-lower-alpha {
    position: relative;
    counter-reset: count
}

.article-detail-content .list-number-suffix-parentheses>li,
.article-detail-content .list-lower-alpha>li {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    counter-increment: count
}

.article-detail-content .list-number-suffix-parentheses>li>span,
.article-detail-content .list-lower-alpha>li>span {
    flex: 1
}

.article-detail-content .list-number-suffix-parentheses>li:before,
.article-detail-content .list-lower-alpha>li:before {
    display: inline-block;
    margin-right: 1.3333333333vw
}

.article-detail-content .list-number-suffix-parentheses>li:before {
    content: counter(count) ") "
}

.article-detail-content .list-lower-alpha>li:before {
    content: counter(count, lower-alpha) "."
}

.article-detail-content .point {
    display: block;
    margin-left: 4.2666666667vw
}

.article-detail-content .point:before {
    content: "\25b8";
    display: block;
    margin-right: 2.1333333333vw;
    margin-left: -4vw;
    color: #f4b600
}

.article-detail-content .point-list>li {
    display: block;
    width: 100%
}

.article-detail-content .link {
    display: block;
    color: var(--about-us-mail-link)
}

.article-detail .table {
    margin-bottom: 5.3333333333vw;
    border-collapse: separate;
    border: .2666666667vw solid #f4b600;
    border-radius: 2.6666666667vw;
    background-color: transparent;
    font-size: 3.2vw;
    line-height: 1.4
}

.article-detail .table-title {
    padding: 0 2.6666666667vw;
    border-bottom: 0;
    background-color: #f4b600;
    color: #0e2749;
    text-align: center;
    vertical-align: middle
}

.article-detail .table-title:first-child {
    border-radius: 2.1333333333vw 0 0
}

.article-detail .table-title:last-child {
    border-radius: 0 2.1333333333vw 0 0
}

.article-detail .table td {
    padding: 1.6vw;
    border-top: .2666666667vw solid #f4b600;
    color: #0e2749
}

.article-detail .txt-center {
    text-align: center
}

.bg-wrap {
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%
}

.bg-wrap .bg-inner {
    position: relative;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%
}

.bg-wrap .bg-inner .start-color {
    stop-color: #82a0aa
}

.bg-wrap .bg-inner .end-color {
    stop-color: #b1bdc5
}

.bg-wrap .bg-color {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #b1bdc5
}

.content-wrap {
    position: relative;
    z-index: 2;
    padding: 5.3333333333vw
}

.content-wrap .content-box {
    display: grid;
    grid-template-columns: 52% 35% 15%;
    width: 90%;
    margin: 0 auto;
    color: #fff;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500
}

.content-wrap .content-box h1 {
    grid-column: 1/span 3;
    margin-bottom: 2.6666666667vw;
    font-size: 6.6666666667vw;
    font-weight: 500;
    text-align: center
}

.content-wrap .content-box h2 {
    align-self: flex-end;
    font-size: 5.8666666667vw;
    font-weight: 500
}

.content-wrap .content-box h3 {
    align-self: center;
    padding-top: 2.6666666667vw;
    opacity: .7;
    font-size: 3.7333333333vw;
    font-weight: 500;
    line-height: 1.2
}

.content-wrap .content-box .arrival-time {
    align-self: flex-end;
    margin-right: 2.1333333333vw;
    font-size: 16vw;
    font-weight: 700;
    text-align: right
}

.content-wrap .tips {
    display: inline-block;
    position: relative;
    left: 50%;
    margin-top: 2.6666666667vw;
    padding: 1.8666666667vw 4vw 1.6vw;
    transform: translate(-50%);
    border: .2666666667vw solid #414141;
    border-radius: 5.3333333333vw;
    background: #f4b600;
    box-shadow: 0 1.3333333333vw 2.6666666667vw #f4b600, inset 0 .8vw 1.3333333333vw #414141;
    color: #fff;
    font-family: "Source Sans 3", sans-serif;
    font-size: 4vw;
    font-weight: 500
}

.content-wrap .ani-box {
    display: flex;
    position: relative;
    flex-direction: column;
    width: 90%;
    margin: 10.6666666667vw auto 21.3333333333vw;
    font-family: "Source Sans 3", sans-serif;
    font-weight: 500
}

.content-wrap .ani-box .before-amount {
    display: flex;
    position: absolute;
    z-index: 3;
    left: 5%;
    align-items: center;
    justify-content: flex-end;
    width: 90%;
    height: 13.3333333333vw;
    padding: 0 6vw;
    animation: push-up .8s 1.2s;
    border-radius: 13.3333333333vw;
    opacity: 0
}

.content-wrap .ani-box .before-amount:before {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -2.1333333333vw;
    left: 10.6666666667vw;
    width: 0;
    height: 0;
    border-width: 2.1333333333vw 2.1333333333vw 0;
    border-style: solid
}

.content-wrap .ani-box .before-amount .icon-account {
    position: absolute;
    left: 1.3333333333vw;
    align-self: center;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    border-radius: 50%
}

.content-wrap .ani-box .before-amount .icon-account span {
    display: block;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background-repeat: no-repeat;
    background-position: center
}

.content-wrap .ani-box .before-amount .currency {
    margin-top: 3.2vw
}

.content-wrap .ani-box .before-amount .amount {
    font-size: 8vw;
    font-weight: 500
}

.content-wrap .ani-box .before-amount .player-account {
    position: absolute;
    right: 6vw;
    bottom: -2.6666666667vw;
    padding: .5333333333vw 2.6666666667vw .8vw;
    border-radius: 13.3333333333vw;
    font-size: 3.2vw;
    font-weight: 500
}

.content-wrap .ani-box .after-amount {
    display: flex;
    position: absolute;
    z-index: 3;
    right: 5%;
    bottom: -8vw;
    align-items: center;
    align-self: flex-end;
    justify-content: flex-start;
    width: 90%;
    height: 13.3333333333vw;
    padding: 0 6vw;
    animation: push-up .8s 2.7s;
    border-radius: 13.3333333333vw;
    opacity: 0
}

.content-wrap .ani-box .after-amount:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -2.1333333333vw;
    right: 10.6666666667vw;
    width: 0;
    height: 0;
    border-width: 0 2.1333333333vw 2.1333333333vw;
    border-style: solid
}

.content-wrap .ani-box .after-amount .platform-logo {
    position: absolute;
    right: 1.3333333333vw;
    align-self: center;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    border-radius: 50%
}

.content-wrap .ani-box .after-amount .platform-logo span {
    display: block;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background-repeat: no-repeat;
    background-position: center
}

.content-wrap .ani-box .after-amount .currency {
    margin-top: 3.2vw
}

.content-wrap .ani-box .after-amount .amount {
    font-size: 8vw;
    font-weight: 500
}

.content-wrap .ani-box .after-amount .platform-name {
    position: absolute;
    bottom: -2.6666666667vw;
    left: 6vw;
    padding: .5333333333vw 2.6666666667vw .8vw;
    border-radius: 13.3333333333vw;
    font-size: 3.2vw;
    font-weight: 500
}

.content-wrap .ani-box .earth {
    display: flex;
    position: relative;
    top: 8vw;
    align-items: center;
    justify-content: center;
    width: 100%
}

.content-wrap .ani-box .earth .circle {
    position: relative;
    width: 80vw;
    height: 80vw;
    border: 2.6666666667vw solid rgba(163, 207, 205, .1);
    border-radius: 50%;
    background: rgba(163, 207, 205, .2);
    box-shadow: inset 0 .2666666667vw 10.6666666667vw #82a0aa
}

.content-wrap .ani-box .earth img {
    position: absolute;
    width: 90%;
    height: auto
}

.content-wrap .ani-box .earth video {
    position: absolute;
    width: 90%;
    height: auto
}

.content-wrap .ani-box .earth .payment {
    display: flex;
    position: absolute;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 17.6vw;
    height: 17.6vw;
    animation: enlarge-payment .8s .9s;
    border: .2666666667vw solid #FFFFFF;
    border-radius: 50%;
    opacity: 0;
    background: linear-gradient(180deg, rgba(216, 216, 216, .8) 0%, rgba(255, 255, 255, .8) 100%);
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #ffffff80
}

.content-wrap .ani-box .earth .payment .payment-logo {
    width: auto;
    max-width: 9.6vw;
    height: auto;
    max-height: 9.6vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.content-wrap .ani-box .earth .green-circle {
    position: absolute;
    width: 20.2666666667vw;
    height: 20.2666666667vw;
    animation: enlarge-green 1.1s 1.9s;
    border: 2.1333333333vw solid #40C618;
    border-radius: 50%;
    opacity: 0
}

.content-wrap.deposit .ani-box .before-amount {
    border: .2666666667vw solid #FFFFFF;
    background: linear-gradient(180deg, rgba(216, 216, 216, .8) 0%, rgba(255, 255, 255, .8) 100%);
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #ffffff80
}

.content-wrap.deposit .ani-box .before-amount:before {
    border-color: rgba(255, 255, 255, .9) transparent transparent
}

.content-wrap.deposit .ani-box .before-amount .icon-account {
    border: .2666666667vw solid #ffffff;
    background: linear-gradient(180deg, #889fa5 0%, #ffc331 100%);
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #ffc331
}

.content-wrap.deposit .ani-box .before-amount .currency,
.content-wrap.deposit .ani-box .before-amount .amount {
    color: #4f9907
}

.content-wrap.deposit .ani-box .before-amount .player-account {
    border: .2666666667vw solid #ffc331;
    background: linear-gradient(180deg, #889fa5 0%, #ffc331 100%);
    box-shadow: 0 .8vw 2.6666666667vw #889fa5, inset 0 .8vw 1.3333333333vw #ffc331;
    color: #fff
}

.content-wrap.deposit .ani-box .after-amount {
    border: .2666666667vw solid #0766d2;
    background: #054ea1;
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #0766d2
}

.content-wrap.deposit .ani-box .after-amount:before {
    border-color: transparent transparent rgba(5, 78, 161, .9)
}

.content-wrap.deposit .ani-box .after-amount .platform-logo {
    border: .2666666667vw solid #ffffff;
    background: linear-gradient(180deg, #ffc331 0%, #0766d2 100%);
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #0766d2
}

.content-wrap.deposit .ani-box .after-amount .platform-logo span {
    background-size: 60%
}

.content-wrap.deposit .ani-box .after-amount .currency,
.content-wrap.deposit .ani-box .after-amount .amount {
    color: #fff
}

.content-wrap.deposit .ani-box .after-amount .platform-name {
    border: .2666666667vw solid #f4b600;
    background: linear-gradient(180deg, #f4b600 0%, #f4b600 100%);
    box-shadow: 0 .8vw 2.6666666667vw #f4b600, inset 0 .8vw 1.3333333333vw #f4b600;
    color: #fff
}

.content-wrap.withdrawal .ani-box .before-amount {
    border: .2666666667vw solid #0766d2;
    background: #054ea1;
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #0766d2
}

.content-wrap.withdrawal .ani-box .before-amount:before {
    border-color: rgba(5, 78, 161, .9) transparent transparent
}

.content-wrap.withdrawal .ani-box .before-amount .icon-account {
    border: .2666666667vw solid #ffffff;
    background: linear-gradient(180deg, #ffc331 0%, #0766d2 100%);
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #0766d2
}

.content-wrap.withdrawal .ani-box .before-amount .icon-account span {
    background-size: 60%
}

.content-wrap.withdrawal .ani-box .before-amount .currency,
.content-wrap.withdrawal .ani-box .before-amount .amount {
    color: #fff
}

.content-wrap.withdrawal .ani-box .before-amount .player-account {
    border: .2666666667vw solid #f4b600;
    background: linear-gradient(180deg, #f4b600 0%, #f4b600 100%);
    box-shadow: 0 .8vw 2.6666666667vw #f4b600, inset 0 .8vw 1.3333333333vw #f4b600;
    color: #fff
}

.content-wrap.withdrawal .ani-box .after-amount {
    border: .2666666667vw solid #FFFFFF;
    background: linear-gradient(180deg, rgba(216, 216, 216, .8) 0%, rgba(255, 255, 255, .8) 100%);
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #ffffff80
}

.content-wrap.withdrawal .ani-box .after-amount:before {
    border-color: transparent transparent rgba(255, 255, 255, .9)
}

.content-wrap.withdrawal .ani-box .after-amount .platform-logo {
    border: .2666666667vw solid #ffffff;
    background: linear-gradient(180deg, #889fa5 0%, #ffc331 100%);
    box-shadow: 0 .5333333333vw .5333333333vw #2d2d2d1a, 0 1.0666666667vw 1.0666666667vw #3131311a, 0 2.1333333333vw 2.1333333333vw #2a2a2a1a, 0 4.2666666667vw 4.2666666667vw #2020201a, inset 0 .8vw .8vw #ffc331
}

.content-wrap.withdrawal .ani-box .after-amount .currency,
.content-wrap.withdrawal .ani-box .after-amount .amount {
    color: #4f9907
}

.content-wrap.withdrawal .ani-box .after-amount .platform-name {
    border: .2666666667vw solid #ffc331;
    background: linear-gradient(180deg, #889fa5 0%, #ffc331 100%);
    box-shadow: 0 .8vw 2.6666666667vw #889fa5, inset 0 .8vw 1.3333333333vw #ffc331;
    color: #fff
}

.content-wrap .button-box {
    display: flex;
    width: 80%;
    margin: 0 auto;
    animation: push-up .8s 3.2s;
    opacity: 0;
    font-family: "Source Sans 3", sans-serif;
    font-size: 5.3333333333vw;
    font-weight: 500;
    text-align: center
}

.content-wrap .button-box a {
    display: inline-block;
    flex: 1;
    width: 100%;
    padding: 4vw;
    overflow-x: hidden;
    border: .5333333333vw solid #0766d2;
    border-radius: 2.6666666667vw;
    background: #054ea1;
    color: #fff;
    text-decoration: none;
    text-overflow: ellipsis;
    white-space: nowrap
}

.content-wrap .button-box a+a {
    width: 48%;
    margin-left: 2%
}

.logo-wrap {
    display: flex;
    position: fixed;
    z-index: 129;
    top: 50%;
    right: 1.3333333333vw;
    flex-direction: column;
    padding: 0 1.3333333333vw;
    transform: translateY(-50%);
    border-radius: 1.3333333333vw;
    background: rgba(255, 255, 255, .8)
}

.logo-wrap img {
    position: relative;
    left: 50%;
    width: auto;
    max-width: 8vw;
    height: auto;
    max-height: 8vw;
    margin: 2.6666666667vw 0;
    transform: translate(-50%);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

@keyframes push-up {
    0% {
        transform: translateY(50%);
        opacity: 0
    }
    50% {
        transform: translateY(-25%);
        opacity: 1
    }
    to {
        transform: translateY(0);
        opacity: 1
    }
}

@keyframes enlarge-payment {
    0% {
        transform: scale(.7);
        opacity: 0
    }
    50% {
        transform: scale(1.02)
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

@keyframes enlarge-green {
    0% {
        transform: scale(.7);
        opacity: .5
    }
    50% {
        transform: scale(1.02);
        opacity: 1
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.info-top-type {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: auto;
    padding: 6.4vw 0 4.2666666667vw
}

.info-top-type .player-info {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    height: 32vw
}

.info-top-type .player-info video,
.info-top-type .player-info img {
    height: 42.6666666667vw
}

.info-top-type .player-info .vip-image {
    width: 40vw
}

.membername-wrap {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 8.5333333333vw 0 0
}

.membername-wrap .membername {
    width: 100%;
    font-size: 4.2666666667vw;
    color: #fff;
    margin-right: 1.3333333333vw
}

.membername-wrap .level {
    width: 100%;
    text-align: center;
    font-size: 3.2vw;
    padding: 1.3333333333vw;
    margin-left: 1.3333333333vw;
    background-image: linear-gradient(105deg, #c8c3b2 2%, #80795a 100%);
    border-radius: 1.0666666667vw;
    color: #fff
}

.player-top {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: #4b6cb6
}

.player-top:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: 13.3333333333vw;
    transform: translateY(-100%);
    z-index: -1;
    background-color: #f4b600;
    pointer-events: none
}

.player-top .player-card {
    margin: 1.3333333333vw 2.6666666667vw 6.6666666667vw
}

.player-top .credit-card {
    margin: 4.2666666667vw 4.2666666667vw 2.1333333333vw
}

.player-top:after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 -1px
}

.player-top.player-deposit {
    position: relative;
    flex-direction: column;
    height: auto;
    background: #4b6cb6
}

.player-top.player-deposit:before {
    display: none
}

.player-top.player-deposit+.content {
    padding: 0
}

.player-top.player-nav-page {
    background: #4b6cb6;
    flex-wrap: wrap
}

.player-top.player-withdraw {
    position: static;
    position: relative;
    flex-direction: column;
    height: auto;
    background: #4b6cb6;
    color: #fff
}

.credit-card {
    position: relative;
    box-sizing: border-box;
    width: 92vw;
    min-height: 51.2vw;
    margin: 0 auto 6.6666666667vw;
    padding: 6.4vw;
    border-radius: 4vw;
    background: linear-gradient(135deg, #054ea1 0%, #021e3e 20%, #054ea1 70%, #0766d2 100%);
    box-shadow: 0 .5333333333vw .8vw #0000004d;
    font-size: 3.2vw;
    z-index: 0
}

.credit-card .credit-card-inner {
    display: flex;
    flex-direction: column;
    width: -moz-fit-content;
    width: fit-content;
    height: auto;
    color: #fff
}

.credit-card .bank-name p {
    font-size: 3.7333333333vw;
    margin-bottom: .8vw;
    line-height: 1.1
}

.credit-card .bank-branch p {
    font-size: 3.2vw;
    line-height: 1.1
}

.credit-card .card-number {
    margin-top: 2.1333333333vw;
    font-size: 6.9333333333vw;
    line-height: 1.2;
    word-break: break-all;
    font-size: 5.3333333333vw
}

.credit-card .user-name {
    font-size: 3.2vw;
    line-height: 1.5
}

.credit-card .bank-info-copy {
    margin-bottom: 2.1333333333vw;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    width: inherit;
    border-radius: 1.0666666667vw;
    transform: all .3s
}

.credit-card .bank-info-copy p {
    word-break: break-all;
    text-shadow: 0 0 2px #ffffff
}

.credit-card .bank-info-copy i {
    z-index: 1;
    display: inline-block;
    margin-left: 3.2vw;
    width: 15px;
    height: 15px;
    background-color: #fff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    flex: 0 0 15px
}

.credit-card .bank-info-copy.active {
    background: rgba(0, 0, 0, .2)
}

.credit-card .bank-info-copy.active .tips-txt {
    display: block;
    animation: tips-txt-show .3s linear forwards
}

.credit-card .bank-info-copy.hide {
    background: rgba(0, 0, 0, .2)
}

.credit-card .bank-info-copy.hide .tips-txt {
    display: block;
    animation: tips-txt-hide .2s linear forwards
}

.credit-card .tips-txt {
    display: none;
    position: absolute;
    z-index: 2;
    top: 0;
    right: 2.6666666667vw;
    padding: 1.3333333333vw 2.6666666667vw;
    border-radius: .8vw;
    opacity: 0;
    background: #7e919e;
    box-shadow: 0 0 .5333333333vw #99999980;
    font-size: 3.2vw;
    color: #0e2749;
    line-height: 1.5;
    transform: translateY(-100%)
}

.credit-card .tips-txt:before {
    content: "";
    position: absolute;
    right: 2.6666666667vw;
    bottom: -5px;
    width: 0;
    height: 0;
    border-width: 6px 3px 0;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.credit-card .bg-card {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none
}

@keyframes tips-txt-show {
    0% {
        top: -13.3333333333vw;
        opacity: 0
    }
    to {
        top: 0;
        opacity: 1
    }
}

@keyframes tips-txt-hide {
    0% {
        top: 0;
        opacity: 1
    }
    to {
        top: -13.3333333333vw;
        opacity: 0
    }
}

.credit-card .deposit-amount {
    position: absolute;
    bottom: 5.3333333333vw
}

.credit-card .deposit-amount label,
.credit-card .deposit-amount p {
    display: inline-block
}

.credit-card .deposit-amount label {
    margin-right: 2.6666666667vw;
    line-height: 1.8;
    text-align: left
}

.credit-card .deposit-amount p {
    color: #ffea00;
    font-size: 4.2666666667vw
}

.credit-card .deco {
    position: absolute;
    top: 0;
    right: 0;
    width: 10%;
    margin: 4.2666666667vw
}

.credit-card .deco img {
    display: block;
    width: 100%
}

.player-deposit-wrap {
    position: relative;
    overflow: auto;
    -webkit-overflow-scrolling: touch
}

.player-deposit-wrap .player-deposit-step1 {
    display: block;
    position: relative;
    width: 100%;
    height: auto;
    flex-shrink: 0;
    background-color: #0e2749
}

.player-deposit-wrap .player-deposit-step1.active {
    opacity: 0;
    height: 0;
    overflow: hidden
}

.player-deposit-wrap .player-deposit-step1 .menu-box {
    margin: 4.2666666667vw
}

.player-deposit-wrap .player-deposit-step2 {
    display: block;
    position: absolute;
    z-index: 2;
    width: 100%;
    top: 100%;
    opacity: 0;
    height: 0;
    overflow: hidden;
    flex-shrink: 0;
    background-color: #0e2749;
    transition: top 3s
}

.player-deposit-wrap.active .player-deposit-step1.active {
    opacity: 0;
    height: 0;
    overflow: hidden
}

.player-deposit-wrap.active .player-deposit-step2 {
    position: absolute;
    top: 0;
    height: auto;
    opacity: 1
}

.player-deposit-wrap.active .player-deposit-step2.active {
    position: relative
}

.tab-btn-section {
    width: 100%
}

.tab-btn-page {
    display: flex;
    position: relative;
    z-index: 3;
    top: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 13.3333333333vw;
    transition: all .3s;
    border-bottom: 1px solid rgba(255, 255, 255, .1);
    background: #2b2922
}

.tab-btn-page .line {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 0 auto;
    transition: all .3s
}

.tab-btn-page .line:after {
    content: "";
    display: block;
    width: 4.2666666667vw;
    height: .5333333333vw;
    margin: 0 auto;
    border-radius: .8vw;
    background: #f4b600
}

.tab-btn-page .btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: inherit !important;
    height: auto;
    padding: 4vw 0;
    transition: all .3s;
    text-align: center
}

.tab-btn-page .btn .text {
    display: inline-block;
    position: relative;
    margin: 0 4vw;
    color: #9fa7ab;
    font-size: 3.7333333333vw;
    text-align: center
}

.tab-btn-page .btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1.3333333333vw;
    transform: translate(90%, -100%);
    border-radius: 2.6666666667vw;
    background: #f4b600;
    color: #0e2749;
    font-size: 3.2vw
}

.tab-btn-page .btn[data-tab-current=current] .text {
    color: #f4b600;
    font-weight: 500
}

.tab-btn-page .btn[data-tab-current=current]:after {
    display: block
}

.player-nav-page .tab-btn-page {
    background: transparent
}

.tab-btn-wrap {
    position: relative;
    padding: 2.1333333333vw 4.2666666667vw 3.2vw;
    background: #2254ba
}

.tab-btn-wrap:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 13.3333333333vw;
    transform: translateY(-100%);
    pointer-events: none
}

.tab-btn-bar {
    display: flex;
    position: relative;
    z-index: 3;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 8.5333333333vw;
    transition: all .3s;
    color: #fff
}

.tab-btn-bar:before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 120%;
    transform: translateY(-50%);
    border-radius: 2.1333333333vw;
    background: #ebebeb
}

.tab-btn-bar .line {
    position: absolute;
    top: 3%;
    left: 0;
    padding: 0 1.3333333333vw;
    transition: all .3s
}

.tab-btn-bar .line:after {
    content: "";
    display: block;
    width: 100%;
    height: 8vw;
    border-radius: 2.1333333333vw;
    background: #f4b600;
    box-shadow: 0 0 .5333333333vw .2666666667vw #e6e6e680
}

.tab-btn-bar .btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    transition: all .3s;
    text-align: center
}

.tab-btn-bar .btn .icon+.text {
    margin-left: 1.3333333333vw
}

.tab-btn-bar .btn .text {
    display: inline-block;
    position: relative;
    padding: 1.6vw 0;
    color: #0e2749;
    font-size: 3.4666666667vw;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(255, 255, 255, .4)
}

.tab-btn-bar .btn .badge {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 1.3333333333vw;
    transform: translate(90%, -100%);
    border-radius: 2.6666666667vw;
    background-color: #ffea00;
    color: #e41a43;
    font-size: 2.6666666667vw
}

.tab-btn-bar .btn[data-tab-current=current]:after {
    display: block
}

.tab-btn-bar .btn[data-tab-current=current] .text {
    color: #0e2749
}

.tab-content-page {
    display: block;
    width: 100%;
    overflow: hidden
}

.tab-content-page.disable .withdraw-wallet .verify-tips {
    display: block
}

.tab-content-page.disable .withdraw-wallet .accordion-wrap.error {
    width: 95%;
    margin: 1.3333333333vw auto
}

.tab-content-page.disable .withdraw-wallet .button a:before {
    display: inline-block
}

.withdraw-wallet .verify-tips {
    display: none
}

.close-tips {
    display: inline-block;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    transition: all .3s;
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 70%;
    mask-size: 70%
}

.tips-info {
    position: relative;
    flex: 1;
    margin: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    background-color: #2b2922;
    text-align: left;
    white-space: normal
}

.tips-info.show ol {
    height: auto;
    max-height: 10000px;
    opacity: 1
}

.tips-info.show ol:after {
    display: block
}

.tips-info.show .close-tips {
    transform: rotate(180deg);
    transform-origin: center
}

.tips-info ol {
    position: relative;
    width: auto;
    max-height: 0;
    overflow: hidden;
    transition: max-height .2s, opacity .3s;
    opacity: 0;
    color: #7e919e
}

.tips-info ol:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: calc(100% - 8.5333333333vw);
    height: .2666666667vw;
    margin: 0 4.2666666667vw;
    background-image: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw
}

.tips-info .title-box {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 4.2666666667vw
}

.tips-info h5 {
    display: flex;
    flex: 1;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: flex-start;
    width: 92%;
    margin-bottom: 2.6666666667vw;
    color: #7e919e;
    font-size: 3.7333333333vw
}

.tips-info h5 i {
    display: inline-block;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    margin-right: 3.2vw;
    background: #7e919e;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.tips-info h5 span {
    display: inline-block;
    flex: 1;
    width: calc(100% - 50px);
    line-height: 4.2666666667vw;
    vertical-align: text-top
}

.tips-info a {
    text-decoration: none
}

.tips-info p,
.tips-info b {
    display: block;
    padding-bottom: 1.3333333333vw;
    color: #7e919e;
    font-size: 3.2vw;
    line-height: 1.2;
    text-align: left
}

.tips-info i {
    padding: 0 .8vw;
    color: #f4b600;
    font-weight: 500
}

.tips-info ul,
.tips-info ol {
    display: block;
    color: #7e919e;
    font-size: 3.2vw;
    line-height: 1.5;
    text-align: left
}

.tips-info li {
    display: list-item;
    margin: 4.2666666667vw
}

.verify-tips a {
    display: block;
    width: 100%
}

.verify-tips label {
    display: block;
    margin-bottom: 2.1333333333vw;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.verify-tips p {
    display: block
}

.verify-tips h5 {
    margin-bottom: 0
}

.personal-info,
.contact-info,
.document-info,
.info-supporting {
    position: relative;
    padding: 1.0666666667vw 0
}

.personal-info.hide:before,
.contact-info.hide:before,
.document-info.hide:before,
.info-supporting.hide:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 1.3333333333vw;
    background: rgba(14, 39, 73, .2)
}

.personal-info li,
.contact-info li,
.document-info li,
.info-supporting li {
    display: inline-block;
    margin: 0 1.0666666667vw 1.6vw 0;
    padding: .5333333333vw 2.1333333333vw;
    border-radius: 5.3333333333vw;
    vertical-align: middle
}

.personal-info label {
    color: #70b267
}

.personal-info li {
    background: rgba(112, 178, 103, .15);
    color: #70b267
}

.contact-info label {
    color: #fff
}

.contact-info li {
    background: rgba(64, 159, 255, .15);
    color: #ffb80c
}

.document-info label {
    color: #ff777c
}

.document-info li {
    background: rgba(255, 119, 124, .15);
    color: #ff777c
}

.document-info.info-choose-one li {
    background: rgba(239, 103, 171, .15);
    color: #ef67ab
}

.info-choose-one label,
.info-choose-one li {
    color: #ef67ab
}

.info-supporting {
    margin-bottom: 2.1333333333vw
}

.info-supporting label {
    color: #d8a845
}

.info-supporting li {
    background: rgba(216, 168, 69, .15);
    color: #d8a845
}

.tab-content .inner-wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    transition: all .3s
}

.tab-content .inner-box {
    display: block;
    position: relative;
    flex-shrink: 0;
    width: 100%
}

.list-loading {
    display: flex;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: center;
    width: 10.6666666667vw;
    margin: auto;
    padding: 2.6666666667vw 0 5.3333333333vw
}

.list-loading:before,
.list-loading:after {
    content: "";
    display: block;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    mix-blend-mode: screen
}

.list-loading:before {
    animation: slide-right-left 1s linear infinite;
    background: #ffc20f
}

.list-loading:after {
    animation: slide-left-right 1s linear infinite;
    background: #f4b600
}

@keyframes slide-right-left {
    0% {
        transform: translate(0)
    }
    10% {
        transform: translate(50%) scale(1.3)
    }
    40%,
    50% {
        transform: translate(100%)
    }
    60% {
        transform: translate(50%) scale(.75)
    }
    90%,
    to {
        transform: translate(0)
    }
}

@keyframes slide-left-right {
    0% {
        transform: translate(0)
    }
    10% {
        transform: translate(-50%) scale(.75)
    }
    40%,
    50% {
        transform: translate(-100%)
    }
    60% {
        transform: translate(-50%) scale(1.3)
    }
    90%,
    to {
        transform: translate(0)
    }
}

.accordion-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 4.2666666667vw 4.2666666667vw 0;
    overflow: hidden;
    border-radius: 2.6666666667vw;
    background: #3b392f
}

.accordion-wrap.show .a-content {
    height: 100%;
    max-height: 80vw;
    opacity: 1
}

.accordion-wrap.show .a-arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.accordion-wrap .a-title {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 4.2666666667vw;
    background: #2b2922;
    color: #fff;
    font-size: 4vw;
    text-align: left
}

.accordion-wrap .a-title:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -.2666666667vw;
    width: calc(100% - 8.5333333333vw);
    height: .2666666667vw;
    background-image: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw 2.6666666667vw
}

.accordion-wrap .a-title .a-text {
    flex-grow: 1;
    font-weight: 500
}

.accordion-wrap .a-title .a-icon {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    margin-right: 4.2666666667vw;
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.accordion-wrap .a-title .a-arrow {
    display: none;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    transition: all .3s;
    background-color: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 70%;
    mask-size: 70%
}

.accordion-wrap .a-content {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, opacity .5s;
    opacity: 0;
    color: #9fa7ab;
    text-align: left
}

.accordion-wrap .a-content ol.a-list {
    padding: 4.2666666667vw 4.2666666667vw 4.2666666667vw 8.5333333333vw
}

.accordion-wrap .a-content .a-list {
    padding: 4.2666666667vw 0 0;
    list-style: auto
}

.accordion-wrap .a-content .a-item {
    padding: 1.0666666667vw 0;
    font-size: 3.7333333333vw;
    line-height: 1.3
}

.accordion-wrap .a-content p {
    padding: 5.3333333333vw;
    font-size: 3.7333333333vw;
    line-height: 1.3;
    white-space: pre-wrap
}

.accordion-wrap.error {
    margin: 2.6666666667vw 0 0
}

.accordion-wrap.error .a-title {
    padding: 4.2666666667vw 0;
    color: #ff5757
}

.accordion-wrap.error .a-title .a-icon,
.accordion-wrap.error .a-title .a-arrow {
    background-color: #ff5757
}

.accordion-wrap.error .a-title:after {
    width: 100%
}

.accordion-wrap.error .a-content {
    color: #ff5757
}

.accordion-wrap.error .a-content .a-item {
    font-size: 3.7333333333vw;
    line-height: 1.5
}

.accordion-wrap .toggle-btn .a-arrow {
    display: block
}

.ticket-wrap {
    display: block;
    width: inherit;
    padding: 4.2666666667vw
}

.ticket {
    display: flex;
    position: relative;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    color: #0e2749
}

.ticket+.ticket {
    margin-top: 4.2666666667vw
}

.ticket.showBN .ticket-deco:before,
.ticket.showBN .ticket-deco:after {
    display: none
}

.ticket.showBN .ticket-banner {
    display: flex
}

.ticket.showBN .ticket-inner {
    border-radius: 0 0 1.0666666667vw 1.0666666667vw
}

.ticket.completed .ticket-deco:before,
.ticket.completed .ticket-deco:after {
    background-color: #0e2749
}

.ticket.completed .ticket-inner {
    background-color: #fff
}

.ticket.completed .ticket-inner-left>div+div {
    margin-top: 1.3333333333vw
}

.ticket.completed .ticket-inner-right:after {
    background-image: linear-gradient(to bottom, #054ea1 20%, rgba(255, 255, 255, 0) 0%);
    background-repeat: repeat-y;
    background-position: left;
    background-size: .2666666667vw 2.6666666667vw
}

.ticket.completed .ticket-inner-right .text {
    color: #09ac6b;
    line-height: 2
}

.ticket.completed .ticket-inner-right .text:before {
    content: "";
    display: block;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: auto;
    background: #09ac6b;
    -webkit-mask: url(/mostplayfiles/images/icons/icon-check-type01.svg) no-repeat center/100%;
    mask: url(/mostplayfiles/images/icons/icon-check-type01.svg) no-repeat center/100%
}

.ticket .ticket-deco {
    position: absolute;
    z-index: 1;
    inset: 0;
    overflow: hidden
}

.ticket .ticket-deco .line {
    display: block;
    position: absolute;
    top: 10%;
    left: 75%;
    width: .2666666667vw;
    height: 80%;
    background-image: linear-gradient(to bottom, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667vw 2.6666666667vw
}

.ticket .ticket-banner {
    display: none;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    width: 100%;
    padding: 2.6666666667vw 4vw 0;
    border-radius: 1.0666666667vw 1.0666666667vw 0 0;
    background-color: #fff
}

.ticket .ticket-banner img {
    display: block;
    width: 100%;
    margin: auto;
    border-radius: 1.0666666667vw
}

.ticket .ticket-banner .deco {
    display: inline-block;
    position: relative;
    width: 100%;
    height: .5333333333vw;
    margin: 2.6666666667vw 0;
    background-color: #ccc
}

.ticket .ticket-banner .deco:before,
.ticket .ticket-banner .deco:after {
    content: "";
    display: inline-block;
    position: absolute;
    top: 50%;
    width: 1.6vw;
    height: 1.6vw;
    transform: translateY(-50%);
    border-radius: 50%;
    background-color: #ccc
}

.ticket .ticket-banner .deco:before {
    left: 0
}

.ticket .ticket-banner .deco:after {
    right: 0
}

.ticket .ticket-inner {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: center;
    width: 100%;
    border-radius: 2.6666666667vw;
    background: #ffffff
}

.ticket .ticket-inner-left {
    position: relative;
    width: 75%;
    padding: 4.2666666667vw;
    border-right-width: .2666666667vw
}

.ticket .ticket-inner-left>div+div {
    margin-top: 1.3333333333vw
}

.ticket .ticket-inner-right {
    display: flex;
    position: relative;
    align-content: center;
    justify-content: center;
    width: 25%;
    padding: 0 1.3333333333vw
}

.ticket .ticket-inner-right .text {
    margin: auto;
    padding: 1.0666666667vw;
    color: #0e274980;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.ticket .title {
    position: relative;
    overflow: hidden;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.ticket .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.1333333333vw;
    border-radius: 1.0666666667vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: sub
}

.ticket .detail {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start
}

.ticket .detail .date {
    margin: auto 0;
    color: #7e919e;
    font-size: 2.6666666667vw
}

.ticket .detail .detail-btn {
    display: flex;
    margin: auto 1.3333333333vw;
    padding: .5333333333vw 1.0666666667vw;
    border: .2666666667vw solid #054ea1;
    border-radius: 1.3333333333vw
}

.ticket .detail .detail-btn a {
    color: #054ea1;
    font-size: 2.6666666667vw;
    text-decoration: none
}

.ticket .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: #f4b600
}

.ticket .discount .currency {
    margin: 1.6vw 1.3333333333vw 0 0;
    font-size: 3.7333333333vw
}

.ticket .discount .amount {
    font-size: 5.8666666667vw;
    font-weight: 500
}

.list-field {
    display: block;
    flex: 1;
    padding: 0 2.1333333333vw;
    text-align: center
}

.list-field .tags {
    padding: 1.0666666667vw;
    overflow: hidden;
    transform: scale(.9);
    border-radius: 1.0666666667vw;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap
}

.list-field.amount {
    justify-content: flex-end
}

.list-title,
.list-content li {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    line-height: 1.3
}

.list-title {
    padding: 2.1333333333vw;
    background-color: #3b392f;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500
}

.list-title .list-field {
    display: flex;
    align-items: center;
    justify-content: center;
    border-right: .2666666667vw dotted #f4b600
}

.list-title .list-field:last-child {
    border: 0
}

.list-title .list-field:last-child:after {
    content: none
}

.list-content {
    padding: 2.1333333333vw;
    background: #2b2922
}

.list-content li {
    position: relative;
    align-items: center;
    padding: 1.0666666667vw 0;
    background: #2b2922;
    color: #fff;
    font-size: 2.9333333333vw
}

.list-content li+li {
    border-top: .2666666667vw solid #ffffff
}

.list-content li .list-field:last-of-type {
    border: 0
}

.list-content .list-field {
    position: relative;
    padding: 1.0666666667vw 2.1333333333vw;
    border-right: .2666666667vw dotted #ffffff;
    /* white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden; */
}

.no-detail-info .list-arrow {
    opacity: 0
}

.list-arrow {
    flex: 0 1 5.3333333333vw;
    width: 3.2vw;
    height: 3.2vw;
    transform: rotate(180deg);
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    mask-position: center left;
    -webkit-mask-size: 50%;
    mask-size: 50%
}

.date-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4vw 5.3333333333vw;
    background: #f4b600;
    color: #222
}

.date-title .date {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 3.2vw
}

.date-title .date i {
    display: inline-block;
    width: 4.2666666667vw;
    height: 4vw;
    margin-right: 2.1333333333vw;
    background: #222;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center left;
    mask-position: center left;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.date-title .time-zone {
    padding: .8vw 1.3333333333vw;
    border-radius: 1.3333333333vw;
    font-size: 2.6666666667vw
}

.time-zone {
    margin-left: 2.1333333333vw;
    padding: 0 1.0666666667vw;
    border: .2666666667vw solid #f4b600;
    border-radius: 1.3333333333vw;
    color: #f4b600;
    font-weight: 400
}

.status-pending .tags {
    background: rgba(254, 176, 50, .9)
}

.status-revert .tags {
    background: rgba(5, 78, 161, .9)
}

.status-positive .tags {
    background: rgba(9, 172, 107, .9)
}

.status-negative .tags {
    background: rgba(255, 87, 87, .9)
}

.profit {
    text-align: right
}

.profit.positive {
    color: #09ac6b
}

.profit.negative {
    color: #ff5757
}

.vip-list .list-content .list-field {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center
}

.vip-list .vip-time {
    flex: 0 0 30%;
    text-align: center
}

.vip-list .vip-point {
    flex: 0 0 23%
}

.transaction-record-list .list-content .time {
    flex: 0 0 15%;
    border: 0
}

.transaction-record-list .list-content .amount {
    text-align: right
}

.transaction-record-list .time-zone {
    border: .2666666667vw solid #0e2749;
    color: #0e2749
}

.inbox-list__editor {
    display: flex;
    justify-content: flex-end
}

.inbox-list .editor__btn {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 35%;
    mask-size: 35%
}

.inbox-list .list-field {
    overflow: visible;
    border: 0
}

.inbox-list .editor-active .chose-btn {
    display: block
}

.inbox-list .editor-active .content-wrap {
    width: 70%
}

.inbox-list .chose-btn {
    display: none;
    flex: 0 0 3.7333333333vw;
    height: 3.7333333333vw;
    margin-right: 2.6666666667vw;
    background-color: #0e274933;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center top;
    mask-position: center top;
    -webkit-mask-size: contain;
    mask-size: contain
}

.inbox-list .icon {
    position: relative;
    flex: 0 0 8vw;
    height: 8vw;
    padding: 0;
    border-radius: 50%;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.inbox-list .icon:before {
    content: "";
    display: block;
    position: absolute;
    top: 5%;
    right: 5%;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-radius: 50%;
    background-color: #ff5757
}

.inbox-list .icon img {
    display: block;
    position: absolute;
    inset: 0;
    width: 50%;
    margin: auto
}

.inbox-list .content-wrap {
    width: 85%;
    margin-left: 4.2666666667vw;
    padding: 4.2666666667vw 0;
    font-size: 3.7333333333vw;
    line-height: 1.5
}

.inbox-list .content-wrap .title {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between
}

.inbox-list .content-wrap .title span {
    overflow: hidden;
    color: #0e2749;
    font-size: 4.2666666667vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.inbox-list .content-wrap .title .msg-time {
    color: #7e919e;
    font-size: 3.2vw
}

.inbox-list .content-wrap .text {
    width: 100%;
    height: 5.0666666667vw;
    overflow: hidden;
    color: #7e919e;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left
}

.inbox-list .content-wrap .text p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.inbox-list .list-content {
    padding: 2.1333333333vw 0;
    background: #ffffff
}

.inbox-list .list-content li {
    background: #ffffff
}

.inbox-list .list-content .read .icon:before {
    display: none
}

.inbox-list .list-content .chosed .chose-btn {
    background-color: #0e2749
}

.inbox-list .date-title {
    background: #054ea1;
    color: #fff
}

.inbox-list .date-title .date i {
    background: #ffffff
}

.inbox-list .date-title .time-zone {
    border: .2666666667vw solid #f4b600;
    color: #f4b600
}

.inbox-list .message-item {
    align-items: center;
    padding: 0 4.2666666667vw;
    border-bottom: .2666666667vw solid rgba(14, 39, 73, .2)
}

@keyframes choseBtn-ani {
    0% {
        transform: translate(0);
        transform-origin: 50px 50px
    }
    to {
        transform: translate(100%);
        transform-origin: 50px 50px
    }
}

.betting-record-list .platform {
    flex: 0 0 20%
}

.betting-record-list .type {
    flex: 0 0 28%
}

.betting-record-list .list-content .bet,
.betting-record-list .list-content .profit {
    text-align: right
}

.betting-record-list .list-content .profit {
    border: 0
}

.betting-record-list .list-content .list-field {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.betting-record-inner-list .list-content .bet {
    text-align: right
}

.betting-record-inner-list .list-content .list-field.game {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.betting-record-inner-list .profit {
    border: 0
}

.betting-record-inner-list .time-zone {
    border: .2666666667vw solid #0e2749;
    color: #0e2749
}

.betting-record-list .list-content li,
.betting-record-inner-list .list-content li {
    padding: 0
}

.betting-record-list .list-content .list-field,
.betting-record-inner-list .list-content .list-field {
    padding: 2.1333333333vw 1.3333333333vw
}

.content-betting-record .time-zone {
    border: .2666666667vw solid #222;
    color: #222
}

.list-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background: #f4b600
}

.list-bar .tip-area {
    display: inline-flex;
    position: relative;
    z-index: 1;
    justify-content: flex-end
}

.list-bar .tip-area .tip-icon {
    display: block;
    width: 8vw;
    height: 8vw;
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 50%;
    mask-size: 50%
}

.list-bar .tip-box {
    display: flex;
    position: absolute;
    top: 100%;
    right: 1.3333333333vw;
    flex-direction: column;
    min-height: 0;
    max-height: 0;
    padding: 0 .8vw;
    overflow: hidden;
    transition: all ease-in-out .3s;
    border-radius: .8vw;
    background: #f2f2f2;
    color: #0e2749;
    font-size: 2.6666666667vw
}

.list-bar .tip-box.active {
    min-height: 5.3333333333vw;
    max-height: 53.3333333333vw;
    padding: .8vw;
    border: .2666666667vw solid #f2f2f2
}

.list-bar .tip-box span {
    display: flex;
    white-space: nowrap;
    padding: 1.3333333333vw 2.1333333333vw
}

.list-bar .tip-box span:before {
    content: "";
    display: block;
    flex: 0 0 2.1333333333vw;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    margin: 0 1.3333333333vw 0 0;
    border-radius: 50%
}

.list-bar .tip-box span:nth-child(1):before {
    background-color: #79a5fc
}

.list-bar .tip-box span:nth-child(2):before {
    background-color: #ffd259
}

.list-bar .tip-box span:nth-child(3):before {
    background-color: #ff5959
}

.list-bar .date-title {
    display: flex;
    align-items: center
}

.betting-record-sum {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.6666666667vw 0;
    background-color: #f4b600
}

.betting-record-sum .item {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: 3.2vw;
    line-height: 1.5
}

.betting-record-sum .item+.item {
    border-left: .2666666667vw solid #0e2749
}

.betting-record-sum .item .title {
    color: #0e2749;
    font-weight: 500
}

.betting-record-sum .item .text {
    color: #0e2749
}

.betting-record-sum .item.positive .text {
    color: #09ac6b
}

.record-item.settled .item-status {
    display: none
}

.record-item.revocation .item-status {
    background-color: #79a5fc66
}

.record-item.revocation .item-status .tags {
    background-color: #79a5fccc
}

.record-item.void .item-status {
    background-color: #ffd25966
}

.record-item.void .item-status .tags {
    background-color: #ffd259cc
}

.record-item.refund .item-status {
    background-color: #ff595966
}

.record-item.refund .item-status .tags {
    background-color: #ff5959cc
}

.record-item.revocation .list-field,
.record-item.void .list-field,
.record-item.refund .list-field {
    opacity: .3
}

.item-status {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: calc(100% - 4px);
    transform: translate(-50%, -50%);
    border-radius: .8vw
}

.item-status .tags {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: auto;
    height: auto;
    padding: .8vw 1.3333333333vw;
    transform: translate(-50%, -50%);
    border-radius: .8vw;
    color: #0e2749;
    font-size: 2.6666666667vw;
    font-weight: 500
}

.deposit-acc-info-box {
    margin: 4vw 0 0;
    padding: 4vw;
    border-radius: 2.1333333333vw;
    background: #f2f2f2;
    font-size: 3.2vw
}

.deposit-acc-info-box p {
    flex: 1;
    margin-right: 2.6666666667vw;
    opacity: .7;
    color: #0e2749;
    text-align: right;
    word-break: break-word
}

.acc-info li {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: flex-start;
    justify-content: flex-start;
    margin-bottom: 2.6666666667vw;
    padding-bottom: 1.3333333333vw;
    border-bottom: .2666666667vw solid rgba(126, 145, 158, .5);
    line-height: 1.5
}

.acc-info li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: 0
}

.acc-info label {
    flex: 0 0 45%;
    padding-right: 1.3333333333vw;
    font-weight: 500
}

.maintain-mask {
    display: none
}

.under-maintain {
    pointer-events: none
}

.under-maintain .maintain-mask {
    display: flex;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: visible;
    border: .2666666667vw dashed rgba(255, 255, 255, .2);
    border-radius: 2.6666666667vw;
    background: rgba(126, 145, 158, .8)
}

.under-maintain .maintain-tag {
    padding: .8vw 1.3333333333vw;
    border-radius: .5333333333vw;
    line-height: 1
}

.under-maintain .maintain-tag img {
    display: inline-block;
    margin-right: .8vw
}

.under-maintain .maintain-tag .text {
    display: inline-block;
    color: #fffc;
    font-size: 2.6666666667vw;
    line-height: 1.2
}

.option-group {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    padding-bottom: 2.6666666667vw
}

.option-group label {
    position: relative;
    height: 6.4vw;
    overflow: hidden;
    color: #0e2749;
    font-weight: 500;
    line-height: 6.4vw;
    text-align: left;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 3.7333333333vw
}

.option-group select {
    box-sizing: border-box;
    width: 100%;
    height: 11.7333333333vw;
    padding: 0 8.5333333333vw 0 4.2666666667vw;
    border: 0;
    border-radius: 2.6666666667vw;
    outline: none;
    background-color: #f2f2f2;
    color: #0e2749;
    font-family: "Source Sans 3", sans-serif;
    font-size: 3.2vw;
    -webkit-appearance: none;
    appearance: none
}

.option-group select option {
    font-size: 3.2vw
}

.option-group select:disabled {
    border-bottom: .2666666667vw solid #e5e5e5;
    border-radius: 0;
    background: none
}

.option-group h2 {
    position: relative;
    width: 100%;
    padding-left: 4.2666666667vw;
    color: #0e2749;
    font-size: 4vw;
    font-weight: 500;
    line-height: 2
}

.option-group h2:before {
    content: "";
    display: inline-block;
    position: absolute;
    top: 20%;
    left: 0;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: .5333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: middle
}

.option-group.select-bar {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 4.2666666667vw;
    padding: 2.1333333333vw 0 2.1333333333vw 4.2666666667vw;
    border-radius: 2.6666666667vw;
    background: #ffffff
}

.option-group.select-bar .option-wrap {
    width: 100%;
    background-color: transparent
}

.option-group.select-bar select {
    display: block;
    width: 100%;
    overflow: hidden;
    background-color: transparent;
    color: #0e2749;
    text-align-last: right;
    text-overflow: ellipsis;
    white-space: nowrap
}

.option-group.select-bar option {
    border: 1px solid #0e2749
}

.option-wrap {
    position: relative;
    width: 100%;
    border-radius: .8vw
}

.option-wrap:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    right: 4.2666666667vw;
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.accordion-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 13.8666666667vw;
    margin: 4.2666666667vw;
    transition: all .4s ease-in-out;
    border-radius: 2.6666666667vw;
    opacity: 1;
    background: #ffffff
}

.accordion-card-wrap.remove {
    height: 0;
    min-height: 0;
    margin: 0 2.6666666667vw;
    transform: translateY(-10%);
    opacity: 0
}

.accordion-card-wrap.remove .ac-notice {
    opacity: 0
}

.accordion-card-wrap.show .ac-content {
    height: auto;
    max-height: 10000px;
    opacity: 1
}

.accordion-card-wrap.show .ac-arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.accordion-card-wrap .ac-title {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.8666666667vw;
    padding: 4.2666666667vw;
    color: #0e2749;
    font-size: 4vw;
    text-align: left
}

.accordion-card-wrap .ac-title .ac-text {
    flex-grow: 1;
    font-weight: 500
}

.accordion-card-wrap .ac-title .ac-icon {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    margin-right: 4.2666666667vw;
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.accordion-card-wrap .ac-title .ac-arrow {
    display: none;
    width: 3.4666666667vw;
    height: 3.4666666667vw;
    transition: all .3s;
    background-color: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 70%;
    mask-size: 70%
}

.accordion-card-wrap .ac-title .ac-notice {
    position: absolute;
    top: 0;
    right: 0;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    transform: translate(15%, -35%);
    transition: all .3s ease-in-out;
    border-radius: 50%;
    opacity: 1;
    background: #ff5757;
    box-shadow: 0 0 .8vw #00000080;
    color: #fff;
    line-height: 5.3333333333vw;
    text-align: center
}

.accordion-card-wrap .ac-title .ac-notice.ani {
    animation: notice-jump .3s ease-in-out 1
}

@keyframes notice-jump {
    0% {
        transform: translate(15%, -35%)
    }
    20% {
        transform: translate(15%, -55%) scale(1.3)
    }
    35% {
        transform: translate(15%, -55%) scale(1.3)
    }
    to {
        transform: translate(15%, -35%)
    }
}

.accordion-card-wrap .ac-content {
    position: relative;
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s, opacity .5s;
    opacity: 0;
    color: #7e919e
}

.accordion-card-wrap .ac-content:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: calc(100% - 8.5333333333vw);
    height: .2666666667vw;
    margin: 0 4.2666666667vw;
    background-image: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw
}

.ac-list {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    min-height: 100px;
    margin: 0 4.2666666667vw;
    padding: 1.0666666667vw 0;
    transition: all .4s ease-in-out;
    opacity: 1
}

.ac-list+.ac-list:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    width: 100%;
    height: .2666666667vw;
    background-image: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw
}

.ac-list>div {
    transition: all .2s ease-in-out;
    opacity: 1
}

.ac-list.removed {
    height: 0;
    min-height: 0;
    margin: 0 1.3333333333vw;
    padding: 0 4vw;
    transform: translate(-100%)
}

.ac-list.removed>div {
    opacity: 0
}

.ac-list .ac-item {
    overflow: hidden;
    line-height: 1.8
}

.ac-list .ac-item .number {
    color: #7e919e;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-decoration: underline
}

.ac-list .ac-item .date {
    color: #0e2749;
    font-size: 2.9333333333vw
}

.ac-list .ac-item .amount {
    color: #7e919e;
    font-size: 4vw;
    font-weight: 500
}

.ac-list .btn-revert {
    position: relative;
    z-index: 0;
    padding: 2.4vw 5.3333333333vw;
    border-radius: 2.6666666667vw;
    background: #f4b600;
    color: #0e2749;
    font-size: 3.2vw
}

.ac-list .btn-revert:after {
    content: "";
    position: absolute;
    z-index: -1;
    top: .2666666667vw;
    left: .2666666667vw;
    width: calc(100% - .5333333333vw);
    height: calc(100% - .5333333333vw);
    border-radius: 2.5333333333vw;
    background: #ffffff
}

.accordion-card-wrap .toggle-btn .ac-arrow {
    display: block
}

.pop-otp-success .state {
    position: relative;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    margin: 0 auto;
    animation: fallin .7s forwards .2s;
    border-radius: 100%;
    opacity: 0;
    background: #4b6cb6
}

.pop-otp-success .icon {
    display: inline-block;
    position: absolute;
    right: -.4vw;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 50%;
    mask-size: 50%
}

.pop-otp-success .processing {
    text-align: center
}

.pop-otp-success .processing h3 {
    margin: 2.6666666667vw 0 1.3333333333vw;
    color: #4b6cb6;
    font-size: 4.8vw;
    font-weight: 500
}

.pop-otp-success .processing span {
    color: #0e2749;
    font-size: 3.7333333333vw
}

.pop-otp-success .info-list {
    max-height: 61.3333333333vw;
    margin: 5.3333333333vw 0;
    overflow: auto;
    font-size: 3.7333333333vw
}

.pop-otp-success .info-list li {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    padding: 3.2vw 4.2666666667vw;
    background: #ffffff;
    color: #0e2749
}

.pop-otp-success .info-list li:nth-child(2n) {
    background: #f2f2f2
}

.pop-otp-success .info-list li label {
    font-weight: 500
}

.pop-otp-success .info-list li span {
    text-align: right;
    word-break: break-word
}

.pop-otp-success .info-list li .amount {
    font-weight: 500
}

@keyframes fallin {
    0% {
        transform: scale(3);
        opacity: 0
    }
    50% {
        transform: scale(1);
        opacity: 1
    }
    60% {
        transform: scale(1.1)
    }
    to {
        transform: scale(1);
        opacity: 1
    }
}

.tag-free {
    position: absolute;
    z-index: 3;
    top: 1.3333333333vw;
    left: -1.0666666667vw;
    width: 4.8vw;
    height: 4vw;
    border-radius: .5333333333vw 0 0 .5333333333vw;
    background: #f4b600
}

.tag-free i {
    position: absolute;
    top: 0;
    left: .4vw;
    width: 100%;
    height: 100%;
    background-color: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 85%;
    mask-size: 85%
}

.tag-free:after {
    content: "";
    position: absolute;
    z-index: 4;
    top: 0;
    left: 4.8vw;
    border-top: 2vw solid transparent;
    border-bottom: 2vw solid transparent;
    border-left: 1.3333333333vw solid #f4b600
}

.main-wallet-info {
    width: 100%;
    padding: 4.2666666667vw;
    zoom: 1
}

.main-wallet-info:after {
    content: "";
    display: block;
    clear: both
}

.main-wallet-info h4 {
    display: inline-block;
    width: 95%;
    font-size: 9.3333333333vw;
    font-weight: 500;
    letter-spacing: .2666666667vw;
    text-align: right
}

.main-wallet-info h5 {
    display: inline-block;
    width: 5%;
    font-size: 6.4vw;
    font-weight: 500
}

.operating-wallet {
    display: flex;
    flex-direction: row;
    justify-content: flex-end
}

.operating-wallet button,
.operating-wallet .btn-renew {
    min-width: 21.3333333333vw;
    margin: 0 1.3333333333vw 0 0;
    padding: 0 4vw;
    border: 0;
    border-radius: 8vw;
    outline: none;
    box-shadow: inset 0 .2666666667vw .2666666667vw #ffffff80, 0 0 .5333333333vw .2666666667vw #0003;
    color: #0e2749;
    font-size: 3.2vw;
    line-height: 8vw;
    text-align: center
}

.operating-wallet button:last-child,
.operating-wallet .btn-renew:last-child {
    margin-right: 0
}

.operating-wallet .btn-take-back {
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.operating-wallet .btn-other-account {
    background: linear-gradient(135deg, #86cc4e 0%, #3dac3c 100%)
}

.operating-wallet .btn-renew {
    background: linear-gradient(135deg, #ffae12 0%, #ff7e00 100%)
}

.operating-wallet .btn-renew img {
    width: 3.2vw;
    margin-right: 1.3333333333vw
}

.operating-wallet .btn-renew span,
.operating-wallet .btn-renew img {
    vertical-align: middle
}

.operating-wallet .btn-renew.active img {
    animation: reneWallet 1s ease
}

.renew-main-wallet {
    display: inline-flex;
    width: 100%;
    align-items: center;
    line-height: 2
}

.renew-main-wallet.active .icon-refresh {
    animation: rotate 1s forwards
}

.renew-main-wallet span {
    font-size: 3.2vw;
    font-weight: 500
}

.renew-main-wallet .icon-refresh {
    display: inline-block;
    width: 3.2vw;
    height: 3.2vw;
    margin-left: 2.1333333333vw;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.content-transfer {
    overflow: hidden
}

.content-transfer .menu-box {
    padding: 2.6666666667vw
}

.content-transfer .menu-box .select-box:last-child {
    float: right
}

.select-box {
    display: inline-block;
    position: relative;
    width: 46%
}

.select-box:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    right: 2.6666666667vw;
    bottom: 18%;
    transform: translateY(-25%);
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.select-box label {
    display: block;
    font-size: 3.7333333333vw;
    line-height: 2
}

.select-box select {
    display: block;
    position: relative;
    width: 100%;
    height: 10.6666666667vw;
    padding: 0 2.6666666667vw;
    border: 0;
    border-radius: .8vw;
    outline: none;
    color: #0e2749;
    -webkit-appearance: none;
    appearance: none
}

.pop-other-account {
    position: fixed;
    z-index: 9000;
    bottom: -100%;
    left: 0;
    width: 100%;
    min-height: 20vh;
    max-height: 85vh;
    padding: 4vw 5%;
    overflow: hidden;
    transition: .4s;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: #ebebeb
}

.pop-other-account.active {
    bottom: 0
}

.pop-other-account .menu-box {
    padding: 0
}

.pop-other-account .button {
    height: 12vw;
    line-height: 12vw
}

.account-count {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    max-height: 72vh;
    margin-top: 2.6666666667vw;
    overflow-x: hidden;
    overflow-y: auto
}

.account-box {
    flex: 0 0 32%;
    margin: 0 2% 1.6vw 0;
    padding: 1.8666666667vw;
    border: .2666666667vw solid rgba(255, 255, 255, .2);
    border-radius: .8vw;
    background: #ffffff;
    font-size: 3.2vw;
    text-align: center
}

.account-box:nth-child(3n) {
    margin-right: 0
}

.account-box h6 {
    margin-bottom: 2.1333333333vw;
    color: #f4b600;
    font-weight: 700
}

.account-box>p {
    color: #0e2749
}

.account-box div img {
    margin-right: 1.3333333333vw;
    vertical-align: middle
}

.account-box div span {
    color: #999
}

.account-box.loading img {
    animation: reneWallet 2s linear infinite
}

.account-box.repair {
    background: #eeeeee
}

.account-box.repair h6 {
    color: #888
}

.secondary-money-info {
    min-width: 84%;
    margin-top: 2.1333333333vw;
    padding: 1.0666666667vw 4.2666666667vw;
    float: right;
    border: .2666666667vw solid #f4b600;
    border-radius: 8vw;
    background: #054ea1;
    color: #f4b600;
    font-size: 3.2vw;
    font-weight: 700;
    line-height: 0
}

.secondary-money-info p,
.secondary-money-info span {
    max-width: 48%;
    overflow: hidden;
    line-height: 1.6;
    text-overflow: ellipsis;
    white-space: nowrap
}

.secondary-money-info p {
    display: inline-block;
    margin-right: 2%
}

.secondary-money-info span {
    float: right
}

.pop-transfer {
    padding: 0
}

.pop-transfer .main-wallet-info {
    background: #054ea1;
    color: #fff
}

.pop-transfer .menu-box {
    padding: 4.2666666667vw
}

.recommend-friends-box {
    width: auto;
    height: auto;
    margin: 4.2666666667vw;
    padding: 4.2666666667vw;
    border-radius: 2.6666666667vw;
    background: #ffffff;
    box-shadow: 0 0 1.6vw #0000000d, inset 0 .2666666667vw .5333333333vw #fff3
}

.recommend-friends-box .deco-box {
    position: relative;
    height: 17.0666666667vw
}

.recommend-friends-box .deco-box .deco-img {
    display: block;
    position: relative;
    width: 32vw;
    height: 32vw;
    margin: auto;
    overflow: hidden;
    transform: translateY(-50%);
    background: #f4b600;
    border-radius: 50%
}

.recommend-friends-box .deco-box .deco-img img {
    display: block;
    position: absolute;
    top: 60%;
    left: 50%;
    width: 120%;
    height: 120%;
    margin: auto;
    transform: translate(-50%, -45%) rotate(0)
}

.recommend-friends-box .deco-box .deco-img video {
    width: 32vw;
    height: 32vw
}

.recommend-friends-box .deco-box .deco-img .img-ios-gift {
    top: 45%;
    width: 32vw;
    height: 32vw
}

.recommend-friends-box .title {
    width: 100%;
    line-height: 9.3333333333vw
}

.recommend-friends-box .title h2 {
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.recommend-friends-box .title h2 span {
    display: inline-block;
    vertical-align: middle
}

.recommend-friends-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.6666666667vw;
    border-radius: 2.1333333333vw;
    background: #ffd259;
    vertical-align: middle
}

@keyframes rotateGift1 {
    0% {
        transform: translate(-50%, -30%) rotate(0)
    }
    5% {
        transform: translate(-50%, -45%) rotate(0)
    }
    10% {
        transform: translate(-50%, -45%) rotate(0)
    }
    15% {
        transform: translate(-50%, -45%) rotate(-20deg)
    }
    20% {
        transform: translate(-50%, -45%) rotate(20deg)
    }
    25% {
        transform: translate(-50%, -45%) rotate(0)
    }
    30%,
    to {
        transform: translate(-50%, -45%) rotate(0)
    }
}

@keyframes rotateGift2 {
    0% {
        transform: translate(-50%, -45%) rotate(0)
    }
    5% {
        transform: translate(-50%, -45%) rotate(0)
    }
    10% {
        transform: translate(-50%, -45%) rotate(0)
    }
    15% {
        transform: translate(-50%, -45%) rotate(-20deg)
    }
    20% {
        transform: translate(-50%, -45%) rotate(20deg)
    }
    25% {
        transform: translate(-50%, -45%) rotate(0)
    }
    30%,
    to {
        transform: translate(-50%, -45%) rotate(0)
    }
}

.code-box {
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: space-between
}

.code-box:after {
    content: "";
    display: block;
    position: relative;
    bottom: 0;
    width: 100%;
    height: .2666666667vw;
    margin: 4.2666666667vw 0;
    background-image: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw
}

.code-box p {
    width: 100%;
    padding-bottom: 2.6666666667vw;
    line-height: 1.3;
    font-size: 3.2vw;
    color: #0e2749
}

.code-box .code {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
    flex: 2;
    border: .2666666667vw solid #f4b600;
    border-radius: 2.6666666667vw;
    overflow: hidden
}

.code-box .code span {
    display: block;
    color: #0e2749;
    letter-spacing: 2px;
    padding: 1.3333333333vw 3.2vw;
    font-weight: 500;
    font-size: 4.8vw
}

.code-box .code .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    padding: 1.3333333333vw 2.6666666667vw;
    transition: all .3s;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.code-box .code .btn:active {
    opacity: .7
}

.code-box .btn-share {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    flex: .8;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    border-radius: 2.6666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 500;
    color: #0e2749;
    margin-left: 2.6666666667vw;
    padding: 0 2.6666666667vw
}

.condition-box .title {
    display: flex;
    align-items: center;
    margin-bottom: 2.6666666667vw;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500;
    line-height: 1.2
}

.condition-box .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.6666666667vw;
    border-radius: 2.1333333333vw;
    background: #ffd259;
    vertical-align: sub
}

.condition-box .item {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: space-between;
    margin: 0 0 2.1333333333vw;
    font-size: 3.2vw;
    font-weight: 500
}

.condition-box .item .condition {
    flex: 0 0 35%;
    display: flex;
    align-items: center;
    line-height: 1.2;
    color: #0e2749
}

.condition-box .item .condition:before {
    content: "";
    display: inline-block;
    width: 1.6vw;
    height: 1.6vw;
    margin: 0 2.6666666667vw 0 0;
    border-radius: 50%;
    background: #ffd259
}

.condition-box .item .text {
    width: 65%;
    height: 10.6666666667vw;
    line-height: 10.6666666667vw;
    color: #0e2749;
    border-radius: 2.6666666667vw;
    background-color: #f2f2f2;
    padding: 0 4.2666666667vw
}

.status-box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row
}

.status-box .status {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    width: 50%;
    padding: 1.3333333333vw;
    text-align: center
}

.status-box .status.accept {
    position: relative
}

.status-box .status.accept:after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    width: .2666666667vw;
    height: 100%;
    background-image: linear-gradient(to bottom, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667vw 2.6666666667vw
}

.status-box .status.accept:last-child:after {
    background: none
}

.status-box .status.accept .number {
    color: #054ea1
}

.status-box .status .number {
    font-size: 8vw;
    margin-bottom: 1.8666666667vw;
    font-weight: 600
}

.status-box .status .text {
    color: #0e2749;
    font-size: 3.2vw;
    font-weight: 500
}

.terms {
    text-align: center
}

.terms .terms-link {
    display: inline-block;
    margin: auto;
    color: #6481cd;
    font-size: 2.9333333333vw;
    font-weight: 500;
    transition: all .3s;
    text-decoration: underline
}

.date-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 4.2666666667vw
}

.date-bar .text {
    display: block;
    font-size: 3.2vw;
    padding: 0 .8vw;
    color: #a0a2ca
}

.date-bar .date-input {
    width: 35%
}

.date-bar .date-input:before {
    left: auto;
    right: 0;
    width: 9.3333333333vw;
    margin: 0;
    height: 8vw
}

.date-bar .date-input input {
    width: 100%;
    padding: 0
}

.btn-submit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 20%;
    border-radius: 1.3333333333vw;
    padding: 0 1.3333333333vw;
    margin-left: 1.3333333333vw;
    height: 8vw;
    line-height: 8vw;
    color: #0e2749;
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(244, 182, 0, .4);
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-align: center
}

.list-status {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: 0 4.2666666667vw
}

.list-status .title {
    color: #0e2749;
    font-size: 3.2vw
}

.list-status img {
    width: 4.2666666667vw;
    margin: 0 1.3333333333vw
}

.list-status .text {
    font-size: 2.9333333333vw
}

.list-status div {
    display: inline-flex;
    align-items: center;
    justify-content: center
}

.list-status .pending .text {
    color: #ffd259
}

.list-status .expired {
    margin-left: 2.6666666667vw
}

.list-status .expired .text {
    color: #ff5959
}

.spread {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%)
}

.spread .bubble,
.spread .circle {
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: center;
    border-radius: 50%;
    color: #e2264d;
    filter: none
}

.spread .bubble {
    box-sizing: border-box;
    width: 16rem;
    height: 16rem;
    transform: translate(-50%, -50%) scale(0);
    border: solid 8rem #ffe75a
}

.spread .circle {
    width: .375rem;
    height: .375rem;
    margin: -.1875rem;
    box-shadow: .3247595264rem -6.1875rem 0 -.1875rem #ff8080, -.3247595264rem -5.8125rem 0 -.1875rem #ffed80, 5.0400665505rem -3.603935927rem 0 -.1875rem #ffed80, 4.3419112394rem -3.8779416952rem 0 -.1875rem #a4ff80, 5.9601006635rem 1.6934654059rem 0 -.1875rem #a4ff80, 5.739034332rem .9767858111rem 0 -.1875rem #80ffc8, 2.3920574129rem 5.7156527478rem 0 -.1875rem #80ffc8, 2.8145503072rem 5.0959743279rem 0 -.1875rem #80c8ff, -2.9772538586rem 5.4338369925rem 0 -.1875rem #80c8ff, -2.2292640758rem 5.3778130146rem 0 -.1875rem #a480ff, -6.104632245rem 1.0602311526rem 0 -.1875rem #a480ff, -5.5928411824rem 1.6105369557rem 0 -.1875rem #ff80ed, -4.6350976008rem -4.1117502783rem 0 -.1875rem #ff80ed, -4.7246417338rem -3.3623215902rem 0 -.1875rem #ff8080
}

.member-menu-shortcut .spread {
    z-index: 1;
    top: 35%
}

.member-menu-shortcut .spread .bubble {
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    border: solid 4vw rgba(244, 182, 0, .5)
}

.member-menu-shortcut .spread .circle {
    width: 1.3333333333vw;
    height: 1.3333333333vw;
    margin: .5333333333vw;
    box-shadow: .3247595264rem -3.1875rem 0 -.1875rem #ff8080, -.3247595264rem -2.8125rem 0 -.1875rem #ffed80, 2.6945721031rem -1.7334665214rem 0 -.1875rem #ffed80, 1.996416792rem -2.0074722897rem 0 -.1875rem #a4ff80, 3.0353169269rem 1.025902604rem 0 -.1875rem #a4ff80, 2.8142505954rem .3092230092rem 0 -.1875rem #80ffc8, 1.0904061956rem 3.0127461441rem 0 -.1875rem #80ffc8, 1.5128990899rem 2.3930677242rem 0 -.1875rem #80c8ff, -1.6756026413rem 2.7309303888rem 0 -.1875rem #80c8ff, -.9276128584rem 2.6749064109rem 0 -.1875rem #a480ff, -3.1798485085rem .3926683507rem 0 -.1875rem #a480ff, -2.6680574459rem .9429741538rem 0 -.1875rem #ff80ed, -2.2896031695rem -2.2412808754rem 0 -.1875rem #ff80ed, -2.3791473025rem -1.4918521873rem 0 -.1875rem #ff8080
}

@keyframes bubble {
    0% {
        transform: translate(-50%, -50%) scale(0)
    }
    10% {
        transform: translate(-50%, -50%) scale(1);
        border-width: 8rem
    }
    20%,
    90%,
    to {
        border-width: 0;
        transform: translate(-50%, -50%) scale(1)
    }
}

@keyframes sparkles {
    0%,
    35% {
        opacity: 0
    }
    40% {
        opacity: 1;
        box-shadow: .3247595264rem -4.9875rem #ff8080, -.3247595264rem -4.6125rem #ffed80, 4.1018687716rem -2.8557481648rem #ffed80, 3.4037134604rem -3.129753933rem #a4ff80, 4.7901871689rem 1.4264402852rem #a4ff80, 4.5691208374rem .7097606903rem #80ffc8, 1.871396926rem 4.6344901063rem #80ffc8, 2.2938898203rem 4.0148116864rem #80c8ff, -2.4565933717rem 4.352674351rem #80c8ff, -1.7086035888rem 4.2966503731rem #a480ff, -4.9347187504rem .7932060319rem #a480ff, -4.4229276878rem 1.3435118349rem #ff80ed, -3.6968998283rem -3.3635625171rem #ff80ed, -3.7864439613rem -2.614133829rem #ff8080
    }
}

@keyframes setsparkles {
    0%,
    35% {
        opacity: 0
    }
    40% {
        opacity: 1;
        box-shadow: .3247595264rem -2.7675rem 0 -.05625rem #ff8080, -.3247595264rem -2.3925rem 0 -.05625rem #ffed80, 2.3662028805rem -1.4716008047rem 0 -.05625rem #ffed80, 1.6680475694rem -1.7456065729rem 0 -.05625rem #a4ff80, 2.6258472038rem .9324438118rem 0 -.05625rem #a4ff80, 2.4047808723rem .2157642169rem 0 -.05625rem #80ffc8, .9081750251rem 2.6343392196rem 0 -.05625rem #80ffc8, 1.3306679195rem 2.0146607997rem 0 -.05625rem #80c8ff, -1.4933714708rem 2.3525234643rem 0 -.05625rem #80c8ff, -.745381688rem 2.2964994864rem 0 -.05625rem #a480ff, -2.7703787854rem .2992095585rem 0 -.05625rem #a480ff, -2.2585877228rem .8495153615rem 0 -.05625rem #ff80ed, -1.9612339491rem -1.979415159rem 0 -.05625rem #ff80ed, -2.0507780821rem -1.2299864709rem 0 -.05625rem #ff8080
    }
}

.complete-time {
    color: #0e2749b3
}

.complete-time.pending {
    color: #feb032
}

.complete-time.expired {
    color: #ff595a
}

.complete-time img {
    width: 4.8vw
}

.complete-time .text {
    margin-left: 1.3333333333vw;
    flex: 1 1 auto;
    text-align: left
}

.recommend-friends-list .list-content .list-field {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.recommend-friends-list .list-content .pending,
.recommend-friends-list .list-content .expired {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center
}

.recommend-friends-list .no-result {
    margin-top: 0
}

.bonus-wallet-wrap {
    display: block;
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    background: #ffffff;
    overflow: hidden
}

.bonus-wallet-wrap.ongoing {
    display: none;
    z-index: 5
}

.bonus-wallet-wrap.ongoing.show {
    display: block;
    margin-top: 0
}

.bonus-wallet-wrap.hide {
    transform: scaleY(0);
    transition: all .3s ease-in
}

.bonus-wallet {
    display: block;
    position: relative;
    padding: 4vw;
    box-shadow: 0 -.5333333333vw 1.0666666667vw #0000061a, inset .2666666667vw .2666666667vw .5333333333vw #ffffff1a
}

.bonus-wallet .title {
    position: relative;
    overflow: hidden;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bonus-wallet .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.8vw;
    margin-right: 2.1333333333vw;
    border-radius: 1.0666666667vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: sub
}

.bonus-wallet .wallet-label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    min-width: 13.3333333333vw;
    height: 6.9333333333vw;
    padding: 0 1.0666666667vw 0 .2666666667vw;
    border-radius: 8vw 0 0 8vw;
    background-color: #09ac6b;
    color: #fff;
    font-size: 2.9333333333vw
}

.bonus-wallet .wallet-label span {
    display: inline-block;
    width: 6.9333333333vw;
    height: 6.9333333333vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%
}

.bonus-wallet .wallet-label--running {
    background-color: #f4b600
}

.bonus-wallet .wallet-label--disabled {
    background-color: #777
}

.bonus-wallet .wallet-inner {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 2.6666666667vw;
    border-radius: 1.0666666667vw
}

.bonus-wallet .wallet-inner-left {
    width: 21.8666666667vw;
    height: 21.8666666667vw;
    margin-right: 4vw;
    overflow: hidden;
    border-radius: 1.0666666667vw;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.bonus-wallet .wallet-inner-right {
    display: flex;
    position: relative;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 70%
}

.bonus-wallet .wallet-inner-right .text {
    margin: auto;
    padding: 2.6666666667vw;
    color: #054ea1;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.bonus-wallet .card-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    margin-bottom: 2.6666666667vw
}

.bonus-wallet .card-detail .card-date {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    margin: 0 1.3333333333vw 0 0;
    color: #7e919e;
    font-size: 2.6666666667vw
}

.bonus-wallet .card-detail .card-date div {
    line-height: 1.5
}

.bonus-wallet .card-detail .time-zone {
    display: block;
    align-self: flex-start;
    margin: .8vw 1.3333333333vw .8vw 0;
    padding: .5333333333vw 1.0666666667vw;
    border: 1px solid #f4b600;
    border-radius: 1.3333333333vw;
    color: #f4b600;
    font-size: 2.6666666667vw
}

.bonus-wallet .card-detail .detail-btn {
    display: flex;
    align-self: flex-start;
    margin: .8vw 0;
    padding: .5333333333vw 1.3333333333vw;
    border: .2666666667vw solid #054ea1;
    border-radius: 1.3333333333vw;
    font-weight: 500
}

.bonus-wallet .card-detail .detail-btn a {
    color: #054ea1;
    font-size: 2.6666666667vw;
    text-decoration: none
}

.bonus-wallet .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: #f4b600
}

.bonus-wallet .discount.complete,
.bonus-wallet .discount.disable {
    color: #f4b600
}

.bonus-wallet .discount .currency {
    margin: 1.6vw 1.3333333333vw 0 0;
    font-size: 3.7333333333vw
}

.bonus-wallet .discount .amount {
    padding-bottom: 2.6666666667vw;
    font-size: 5.8666666667vw;
    font-weight: 500
}

.bonus-wallet .discount .turn-hide {
    display: none
}

.bonus-wallet .discount02 {
    display: none;
    flex-direction: row;
    justify-content: flex-start;
    margin: 0 0 2.6666666667vw;
    color: #0e274980;
    font-size: 3.2vw
}

.bonus-wallet .discount02 .deposit {
    padding-right: 5.3333333333vw
}

.dec-line-wrap {
    position: relative;
    height: 5.3333333333vw
}

.dec-line-wrap .dec-line {
    display: block;
    position: relative;
    left: 5%;
    bottom: 0;
    width: 90%;
    height: .2666666667vw;
    margin: 4.2666666667vw 0;
    background-image: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw
}

.bonus-card-down {
    display: block;
    position: relative;
    padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
    border-radius: 0 0 2.6666666667vw 2.6666666667vw;
    box-shadow: 0 .5333333333vw 1.0666666667vw #0000001a
}

.bonus-card-down .card-down-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    border-radius: 1.0666666667vw
}

.bonus-card-down .card-down-inner .turn-hide {
    display: none
}

.bonus-card-down .card-down-inner-right {
    position: relative;
    min-width: 29.3333333333vw;
    margin-left: 2.6666666667vw
}

.bonus-card-down .card-down-inner-right .btn {
    min-width: 29.3333333333vw;
    min-height: 7.4666666667vw;
    margin: auto;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw 1.0666666667vw #00000040;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 7.4666666667vw;
    text-align: center
}

.bonus-card-down .card-down-inner-right .btn--start {
    background-image: linear-gradient(to bottom, #054ea1 0%, #054ea1 100%)
}

.bonus-card-down .card-down-inner-right .btn--cancel {
    background-image: linear-gradient(to bottom, #d15454 0%, #cb4141 100%)
}

.bonus-card-down .card-down-inner-right .btn--receive {
    background-image: linear-gradient(to bottom, #9fd562 0%, #7cb43e 100%)
}

.bonus-card-down .card-down-inner-right .btn--disabled {
    color: #444;
    background-image: linear-gradient(to bottom, #d8d8d8 0%, #bfbfbf 100%);
    border: 1px dotted #444444;
    box-shadow: 0 0 #00000040
}

.bonus-card-down .card-down-inner-right .btn--working {
    color: #054ea1;
    background-image: linear-gradient(to bottom, #d8d8d8 0%, #bfbfbf 100%);
    border: 1px dotted #054ea1
}

.bonus-card-down .card-down-inner-right .turn-open {
    display: block
}

.bonus-card-down .card-down-inner-right .withdraw-ani {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img {
    position: relative;
    z-index: 2;
    width: 15.7333333333vw;
    height: 11.4666666667vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img img {
    display: block;
    position: absolute;
    top: 40%;
    left: 50%;
    width: 100%;
    transform: translate(-50%, -50%)
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .back {
    z-index: 3;
    filter: drop-shadow(.5333333333vw .5333333333vw .5333333333vw rgba(45, 45, 45, .1)) drop-shadow(1.0666666667vw 1.0666666667vw 1.0666666667vw rgba(49, 49, 49, .1)) drop-shadow(2.1333333333vw 2.1333333333vw 2.1333333333vw rgba(42, 42, 42, .1)) drop-shadow(4.2666666667vw 4.2666666667vw 4.2666666667vw rgba(32, 32, 32, .1))
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .front {
    z-index: 5;
    filter: drop-shadow(1.0666666667vw 1.0666666667vw 1.0666666667vw rgba(45, 45, 45, .1))
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet {
    display: block;
    position: absolute;
    z-index: 4
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li {
    display: block;
    position: absolute;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    background-repeat: no-repeat;
    background-size: contain
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-1 {
    top: -4vw;
    left: 8.8vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-2 {
    top: -5.3333333333vw;
    left: 5.3333333333vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-3 {
    top: -4vw;
    left: 1.0666666667vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .wallet-img .coin-wallet li.coin-wallet-4 {
    top: -3.2vw;
    left: 4.8vw
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img {
    position: relative;
    z-index: 2;
    top: 0;
    left: 50%
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li {
    position: absolute;
    width: 8vw;
    height: 8vw;
    overflow: hidden
}

.bonus-card-down .card-down-inner-right .withdraw-ani .coin-img li span {
    display: block;
    z-index: 2;
    width: 8vw;
    height: 8vw;
    background-repeat: no-repeat;
    background-position: 0;
    background-size: 800% 100%
}

.bonus-card-down .card-down-inner-right.withdraw-active .btn-receive {
    transform: translateY(-50%);
    transition: all .5s ease-in-out;
    opacity: 0
}

.bonus-card-down .card-down-inner-right.withdraw-active .withdraw-ani {
    display: block;
    position: absolute
}

@keyframes walletCoin {
    0% {
        background-position: 0 0
    }
    to {
        background-position: 100% 0
    }
}

.bonus-card-down .card-down-inner .bonus-left {
    display: none;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    color: #f4b600
}

.bonus-card-down .card-down-inner .bonus-left .bonus-name {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 3.2vw;
    padding: 1.3333333333vw 0
}

.bonus-card-down .card-down-inner .bonus-left .currency {
    padding: 0 .8vw 0 1.8666666667vw;
    font-size: 3.7333333333vw
}

.bonus-card-down .card-down-inner .bonus-left .bonus-number {
    font-size: 4.8vw;
    font-weight: 500
}

.bonus-card-down .card-down-inner .bonus-left .bonus-tips {
    transform: scale(.9);
    transform-origin: left;
    padding: .8vw 0;
    color: #0e274980;
    font-size: 3.2vw
}

.turn-gray {
    filter: grayscale(100%) brightness(140%)
}

.turn-gray2 {
    filter: grayscale(100%) brightness(120%)
}

.turn-hide {
    display: none !important
}

.turn-show {
    display: flex !important
}

.bgcolor-gray {
    background: #f1f1f1
}

@keyframes fadeOutUp {
    0% {
        transform: translate3d(0, -10%, 0);
        opacity: .5
    }
    30% {
        transform: translate3d(0, -30%, 0);
        opacity: 1
    }
    to {
        transform: translate3d(0, -10%, 0);
        opacity: .5
    }
}

.pop-bonuswallet {
    display: none;
    position: fixed;
    z-index: 122;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    pointer-events: none
}

.pop-bonuswallet .pop-wrap3 {
    pointer-events: auto
}

.pop-wrap3 {
    position: fixed;
    z-index: 2;
    bottom: -100%;
    width: 100%;
    transform: translate(0);
    transition: bottom .3s;
    background: #ebebeb;
    color: #0e274980
}

.pop-wrap3.active {
    bottom: 0;
    transition: bottom .3s
}

.pop-wrap3 {
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    color: #0e2749;
    line-height: 1.5
}

.pop-wrap3 .btn-closed {
    position: absolute;
    z-index: 3;
    top: 0;
    right: 0;
    width: 12vw;
    height: 12vw;
    background: #7e919e;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%
}

.pop-wrap3 .title-wrap {
    display: flex;
    position: relative
}

.pop-wrap3 .title-wrap .btn-back {
    display: block;
    position: relative;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    -webkit-text-decoration: block;
    text-decoration: block
}

.pop-wrap3 .title-wrap .btn-back.btn-back-show {
    display: block
}

.pop-wrap3 .title-wrap .btn-back div {
    content: "";
    display: block;
    position: absolute;
    z-index: 3;
    top: 0;
    left: 0;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    overflow: hidden;
    transform: scale(1);
    transition: transform .4s 0s cubic-bezier(.2, 0, 0, 1.6);
    border-radius: 50%
}

.pop-wrap3 .title-wrap .btn-back div:after {
    content: "";
    position: absolute;
    top: 0;
    left: -2.1333333333vw;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    transition: transform .4s 0s cubic-bezier(.2, 0, 0, 1);
    background: #0e2749;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 40%;
    mask-size: 40%
}

.pop-wrap3 .title-wrap .btn-back:hover div {
    border: .5333333333vw solid #8d8d8d
}

.pop-wrap3 .title-wrap .btn-back:hover div:after {
    transform: translate(-50%)
}

.pop-wrap3 .title-wrap .title {
    margin-bottom: 4.2666666667vw;
    color: #0e2749;
    font-size: 4.2666666667vw;
    line-height: 1.5
}

.pop-wrap3 .title-wrap .title .tips {
    color: #0e274999;
    font-size: 3.2vw
}

.pop-wrap3 .inner-wrap {
    display: flex;
    flex-direction: row;
    width: auto;
    max-height: 90vh;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .3s;
    -webkit-overflow-scrolling: touch
}

.pop-wrap3 .inner-wrap .inner-inner {
    display: flex;
    transition: all .2s
}

.pop-wrap3 .inner-wrap .inner-right {
    transform: translate(-50%)
}

.pop-wrap3 .inner-wrap .inner-right .inner-box:nth-child(2) {
    height: auto;
    padding: 4.2666666667vw
}

.pop-wrap3 .inner-wrap .inner-left {
    transform: translate(0)
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
    height: auto;
    padding: 4.2666666667vw
}

.pop-wrap3 .inner-wrap .inner-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100vw;
    height: 0;
    padding: 0;
    overflow: hidden
}

.pop-wrap3 .bottom-wrap .tips2 {
    margin-bottom: 4.2666666667vw;
    color: #7e919e;
    font-size: 3.2vw;
    text-align: center
}

.reel-box {
    display: block;
    margin-bottom: 4.2666666667vw;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch
}

.lvup-select-wrap {
    display: grid;
    grid-gap: 4.2666666667vw;
    grid-template-columns: repeat(2, 1fr)
}

.lvup-select-wrap .event {
    display: block;
    position: relative;
    width: 100%;
    height: 12vw;
    overflow: hidden;
    border-radius: 2.6666666667vw;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover
}

.lvup-select-wrap .event-click {
    border: .5333333333vw solid #f4b600
}

.lvup-select-wrap .event-click:before {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    bottom: 0;
    width: 5.3333333333vw;
    height: 4.2666666667vw;
    transition: all .3s;
    opacity: 1;
    background: #f4b600;
    -webkit-mask: url(/mostplayfiles/images/player/select-check.svg) no-repeat top center/cover;
    mask: url(/mostplayfiles/images/player/select-check.svg) no-repeat top center/cover
}

@keyframes scale-in-ver-top {
    0% {
        transform: scaleY(0);
        transform-origin: 100% 0%;
        opacity: 0
    }
    to {
        transform: scaleY(1);
        transform-origin: 100% 0%;
        opacity: 1
    }
}

.lvup-event-detail {
    display: none;
    width: 100%;
    height: 0;
    max-height: 58.6666666667vw;
    margin-bottom: 4.2666666667vw;
    padding: 4.2666666667vw;
    overflow-y: scroll;
    border-radius: 2.6666666667vw;
    background: #ffffff;
    -webkit-overflow-scrolling: touch
}

.lvup-event-detail.active {
    display: block;
    height: auto;
    min-height: 26.6666666667vw;
    animation: scale-in-ver-top .5s both
}

.lvup-event-detail .event-title {
    position: relative;
    margin: 0;
    overflow: hidden;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.lvup-event-detail .event-detail {
    color: #0e2749;
    font-size: 3.2vw
}

.lvup-event-detail .event-date {
    margin-top: 1.3333333333vw;
    color: #0e274980;
    font-size: 3.2vw;
    font-weight: 500
}

.lvup-event-detail .event-date:before {
    content: "";
    display: inline-block;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    margin-right: 1.3333333333vw;
    background: #f4b600;
    vertical-align: middle;
    -webkit-mask: url(/mostplayfiles/images/icons/icon-clock.svg) no-repeat center/80%;
    mask: url(/mostplayfiles/images/icons/icon-clock.svg) no-repeat center/80%
}

.bonus-event {
    display: flex;
    align-items: center;
    justify-content: space-around;
    position: relative;
    width: 100%;
    height: 29.3333333333vw;
    margin-bottom: 2.6666666667vw;
    padding: 2.6666666667vw 4.8vw;
    border-radius: 1.3333333333vw;
    background: #ffffff;
    box-shadow: 0 .8vw 1.3333333333vw #0000001f
}

.bonus-event:last-child {
    margin-bottom: 0
}

.bonus-event-left {
    width: 70%
}

.bonus-event-left .title {
    position: relative;
    margin-top: 2.6666666667vw;
    overflow: hidden;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.bonus-event-left .title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin: 0 2.6666666667vw 0 0;
    border-radius: 1.0666666667vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: sub
}

.bonus-event-left .card-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start
}

.bonus-event-left .card-detail .card-date {
    margin: auto 0;
    color: #7e919e;
    font-size: 2.6666666667vw
}

.bonus-event-left .card-detail .detail-btn {
    display: flex;
    margin-left: 1.0666666667vw;
    padding: 0 1.0666666667vw;
    border: .2666666667vw solid #054ea1;
    border-radius: 1.3333333333vw;
    font-weight: 500
}

.bonus-event-left .card-detail .detail-btn a {
    color: #054ea1;
    font-size: 2.6666666667vw;
    text-decoration: none
}

.bonus-event-left .discount {
    display: flex;
    flex-direction: row;
    align-content: center;
    justify-content: flex-start;
    color: #f4b600
}

.bonus-event-left .discount .currency {
    margin: 2.1333333333vw 1.3333333333vw 0 0;
    font-size: 3.7333333333vw
}

.bonus-event-left .discount .amount {
    padding-bottom: 2.6666666667vw;
    font-size: 5.8666666667vw;
    font-weight: 500
}

.bonus-event-right {
    width: 30%
}

.bonus-event-right .btn {
    min-width: 18.6666666667vw;
    min-height: 7.4666666667vw;
    margin: auto;
    border-radius: 1.3333333333vw;
    background: #054ea1;
    box-shadow: 0 .5333333333vw 1.0666666667vw #00000040;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 7.4666666667vw;
    text-align: center
}

.bonus-event .notch-l {
    position: absolute;
    left: 0;
    width: 2.1333333333vw;
    height: 4vw;
    border-radius: 0 50% 50% 0;
    background: #ebebeb
}

.bonus-event .notch-r {
    position: absolute;
    right: 0;
    width: 2.1333333333vw;
    height: 4vw;
    border-radius: 50% 0 0 50%;
    background: #ebebeb
}

.player-vip-detailed-menu {
    padding: 4.2666666667vw 4.2666666667vw 0
}

.player-vip-detailed-menu .btn {
    display: flex;
    position: relative;
    flex-flow: column-reverse nowrap;
    align-items: center;
    width: calc(23.8095238095% - 2.6666666667vw);
    height: 32vw;
    margin: 2.6666666667vw 2.6666666667vw 0 0;
    padding: 0 1.3333333333vw 2.6666666667vw;
    transform: translateY(-1.0666666667vw);
    transition: .3s;
    border-radius: 2.6666666667vw 50% 2.6666666667vw 2.6666666667vw;
    background: linear-gradient(180deg, #ddd8c7 0%, #ebebeb 100%);
    box-shadow: 0 .5333333333vw .8vw #0003
}

.player-vip-detailed-menu .btn.active {
    transform: translateY(-2.1333333333vw) scale(1);
    box-shadow: 0 1.0666666667vw 1.0666666667vw #0003
}

.player-vip-detailed-menu .btn .vip-ball {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: auto
}

.player-vip-detailed-menu .vip-lv2 {
    background: linear-gradient(180deg, #dfdfdf 0%, #ebebeb 100%)
}

.player-vip-detailed-menu .vip-lv3 {
    background: linear-gradient(180deg, #e2dab5 0%, #ebebeb 100%)
}

.player-vip-detailed-menu .vip-lv4,
.player-vip-detailed-menu .vip-lv5 {
    background: linear-gradient(180deg, #dae4f2 0%, #ebebeb 100%)
}

.player-vip-detailed-menu p {
    position: relative;
    color: #0e2749;
    font-size: 3.4666666667vw;
    font-weight: 500
}

.player-vip-detailed-menu .vip-level-icon {
    top: 0;
    right: -2.6666666667vw;
    width: 11.2vw;
    height: 11.2vw;
    transition: .3s
}

.player-vip-detailed-menu .slick-dots {
    display: flex;
    align-content: center;
    justify-content: center;
    margin-top: 2.6666666667vw
}

.player-vip-detailed-menu .slick-dots li {
    display: inline-block;
    position: relative;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin: 0 2.1333333333vw;
    overflow: hidden;
    text-indent: -2666.4vw
}

.player-vip-detailed-menu .slick-dots li button {
    display: block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    padding: 1.0666666667vw;
    border: 0;
    background: transparent;
    color: transparent
}

.player-vip-detailed-menu .slick-dots li button:before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    border-radius: 50%;
    background: #054ea1
}

.player-vip-detailed-menu .slick-dots li.slick-active button:before {
    background: #f4b600
}

.player-vip-detailed-box {
    display: flex;
    flex-direction: row;
    width: auto;
    height: auto;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .3s
}

.player-vip-detailed-box .inner-wrap {
    display: flex;
    transition: all .2s
}

.player-vip-detailed-box .inner-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: calc(100% - 8.5333333333vw);
    height: auto;
    margin: 4.2666666667vw;
    overflow: hidden;
    border-radius: 2.6666666667vw;
    background: #ffffff;
    box-shadow: 0 0 1.6vw #0000000d
}

.player-vip-detailed-box .title {
    margin: 4.2666666667vw 4.2666666667vw 0
}

.player-vip-detailed-box .title h2 {
    color: #0e2749;
    font-size: 4vw;
    font-weight: 500
}

.player-vip-detailed-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.1333333333vw;
    border-radius: 2.1333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: middle
}

.player-vip-detailed-box .title span {
    display: inline-block;
    vertical-align: middle
}

.head-lv-name {
    height: 8.5333333333vw;
    padding-left: 4.2666666667vw;
    border-radius: 2.6666666667vw 2.6666666667vw 0 0;
    background: linear-gradient(90deg, #BCB8A8 0%, #80795A 100%);
    color: #fff;
    font-weight: 500;
    line-height: 8.5333333333vw
}

.vip-lv1 .head-lv-name {
    background: linear-gradient(90deg, #bcb8a8 0%, #80795a 100%)
}

.vip-lv2 .head-lv-name {
    background: linear-gradient(90deg, #c4c4c4 0%, #a2a2a2 100%)
}

.vip-lv3 .head-lv-name {
    background: linear-gradient(90deg, #ccbb6f 0%, #a69234 100%)
}

.vip-lv4 .head-lv-name,
.vip-lv5 .head-lv-name {
    background: linear-gradient(90deg, #a7bcda 0%, #7596c5 100%)
}

.lv-info-wrap {
    padding: 4.2666666667vw;
    border-bottom: .2666666667vw solid rgba(14, 39, 73, .06)
}

.lv-info-wrap .status-box.status-box2 {
    flex-wrap: wrap
}

.lv-info-wrap .status-box .number {
    font-size: 3.7333333333vw
}

.lv-info-wrap .status-box .number.number2 {
    color: #054ea1;
    font-size: 4.2666666667vw
}

.lv-info-wrap .status {
    width: 33%
}

.lv-info-wrap .status.accept2 {
    position: relative;
    width: 48%;
    height: 17.3333333333vw;
    margin: 0 2.6666666667vw 2.6666666667vw 0;
    padding: 2.6666666667vw;
    border-radius: 2.6666666667vw;
    background: #f2f2f2;
    box-shadow: 0 .8vw 1.3333333333vw #00000026, inset .2666666667vw .2666666667vw #fff3
}

.lv-info-wrap .status.accept2:nth-child(2n) {
    margin: 0 0 2.6666666667vw
}

.lv-info-wrap .status.accept2 .text {
    color: #0e2749
}

.terms {
    padding: 4.2666666667vw
}

.terms .terms-link {
    margin-bottom: 2.6666666667vw;
    color: #f4a000
}

.terms p {
    color: #f4a000;
    font-size: 3.2vw;
    line-height: 5.3333333333vw
}

.vip-list {
    margin-top: 2.1333333333vw
}

.vip-list .list-title .list-field {
    line-height: 1.5
}

.vip-list .list-content .list-field {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.vip-list .vip-source,
.vip-list .vip-use {
    flex: 0 0 35%
}

.vip-list .vip-time {
    flex: 0 0 33%;
    text-align: center
}

.vip-list .vip-no {
    flex: 1 0 12%
}

.vip-list .vip-point {
    flex: 0 0 20%
}

.biometric-info {
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    padding: 0 4vw;
    text-align: center
}

.biometric-info .biometric-animation {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 58.6666666667vw;
    height: 58.6666666667vw;
    margin: 21.3333333333vw auto
}

.biometric-info .biometric-animation .graduations .graduation {
    top: 2.4074074074vw;
    transform-origin: 0 26.962962963vw;
    display: block;
    position: absolute;
    left: 50%;
    width: .8vw;
    height: 2.6666666667vw;
    transform: rotate(0) trargb(7, 8, 7) -50%;
    border-radius: 2.6666666667vw;
    background: #f4b600
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(1) {
    transform: rotate(1deg) translate(-50%);
    animation: line-wave 6s .1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(2) {
    transform: rotate(7deg) translate(-50%);
    animation: line-wave 6s .2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(3) {
    transform: rotate(13deg) translate(-50%);
    animation: line-wave 6s .3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(4) {
    transform: rotate(19deg) translate(-50%);
    animation: line-wave 6s .4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(5) {
    transform: rotate(25deg) translate(-50%);
    animation: line-wave 6s .5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(6) {
    transform: rotate(31deg) translate(-50%);
    animation: line-wave 6s .6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(7) {
    transform: rotate(37deg) translate(-50%);
    animation: line-wave 6s .7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(8) {
    transform: rotate(43deg) translate(-50%);
    animation: line-wave 6s .8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(9) {
    transform: rotate(49deg) translate(-50%);
    animation: line-wave 6s .9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(10) {
    transform: rotate(55deg) translate(-50%);
    animation: line-wave 6s 1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(11) {
    transform: rotate(61deg) translate(-50%);
    animation: line-wave 6s 1.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(12) {
    transform: rotate(67deg) translate(-50%);
    animation: line-wave 6s 1.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(13) {
    transform: rotate(73deg) translate(-50%);
    animation: line-wave 6s 1.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(14) {
    transform: rotate(79deg) translate(-50%);
    animation: line-wave 6s 1.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(15) {
    transform: rotate(85deg) translate(-50%);
    animation: line-wave 6s 1.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(16) {
    transform: rotate(91deg) translate(-50%);
    animation: line-wave 6s 1.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(17) {
    transform: rotate(97deg) translate(-50%);
    animation: line-wave 6s 1.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(18) {
    transform: rotate(103deg) translate(-50%);
    animation: line-wave 6s 1.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(19) {
    transform: rotate(109deg) translate(-50%);
    animation: line-wave 6s 1.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(20) {
    transform: rotate(115deg) translate(-50%);
    animation: line-wave 6s 2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(21) {
    transform: rotate(121deg) translate(-50%);
    animation: line-wave 6s 2.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(22) {
    transform: rotate(127deg) translate(-50%);
    animation: line-wave 6s 2.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(23) {
    transform: rotate(133deg) translate(-50%);
    animation: line-wave 6s 2.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(24) {
    transform: rotate(139deg) translate(-50%);
    animation: line-wave 6s 2.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(25) {
    transform: rotate(145deg) translate(-50%);
    animation: line-wave 6s 2.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(26) {
    transform: rotate(151deg) translate(-50%);
    animation: line-wave 6s 2.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(27) {
    transform: rotate(157deg) translate(-50%);
    animation: line-wave 6s 2.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(28) {
    transform: rotate(163deg) translate(-50%);
    animation: line-wave 6s 2.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(29) {
    transform: rotate(169deg) translate(-50%);
    animation: line-wave 6s 2.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(30) {
    transform: rotate(175deg) translate(-50%);
    animation: line-wave 6s 3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(31) {
    transform: rotate(181deg) translate(-50%);
    animation: line-wave 6s 3.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(32) {
    transform: rotate(187deg) translate(-50%);
    animation: line-wave 6s 3.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(33) {
    transform: rotate(193deg) translate(-50%);
    animation: line-wave 6s 3.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(34) {
    transform: rotate(199deg) translate(-50%);
    animation: line-wave 6s 3.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(35) {
    transform: rotate(205deg) translate(-50%);
    animation: line-wave 6s 3.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(36) {
    transform: rotate(211deg) translate(-50%);
    animation: line-wave 6s 3.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(37) {
    transform: rotate(217deg) translate(-50%);
    animation: line-wave 6s 3.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(38) {
    transform: rotate(223deg) translate(-50%);
    animation: line-wave 6s 3.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(39) {
    transform: rotate(229deg) translate(-50%);
    animation: line-wave 6s 3.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(40) {
    transform: rotate(235deg) translate(-50%);
    animation: line-wave 6s 4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(41) {
    transform: rotate(241deg) translate(-50%);
    animation: line-wave 6s 4.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(42) {
    transform: rotate(247deg) translate(-50%);
    animation: line-wave 6s 4.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(43) {
    transform: rotate(253deg) translate(-50%);
    animation: line-wave 6s 4.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(44) {
    transform: rotate(259deg) translate(-50%);
    animation: line-wave 6s 4.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(45) {
    transform: rotate(265deg) translate(-50%);
    animation: line-wave 6s 4.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(46) {
    transform: rotate(271deg) translate(-50%);
    animation: line-wave 6s 4.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(47) {
    transform: rotate(277deg) translate(-50%);
    animation: line-wave 6s 4.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(48) {
    transform: rotate(283deg) translate(-50%);
    animation: line-wave 6s 4.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(49) {
    transform: rotate(289deg) translate(-50%);
    animation: line-wave 6s 4.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(50) {
    transform: rotate(295deg) translate(-50%);
    animation: line-wave 6s 5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(51) {
    transform: rotate(301deg) translate(-50%);
    animation: line-wave 6s 5.1s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(52) {
    transform: rotate(307deg) translate(-50%);
    animation: line-wave 6s 5.2s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(53) {
    transform: rotate(313deg) translate(-50%);
    animation: line-wave 6s 5.3s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(54) {
    transform: rotate(319deg) translate(-50%);
    animation: line-wave 6s 5.4s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(55) {
    transform: rotate(325deg) translate(-50%);
    animation: line-wave 6s 5.5s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(56) {
    transform: rotate(331deg) translate(-50%);
    animation: line-wave 6s 5.6s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(57) {
    transform: rotate(337deg) translate(-50%);
    animation: line-wave 6s 5.7s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(58) {
    transform: rotate(343deg) translate(-50%);
    animation: line-wave 6s 5.8s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(59) {
    transform: rotate(349deg) translate(-50%);
    animation: line-wave 6s 5.9s infinite ease-in-out
}

.biometric-info .biometric-animation .graduations .graduation:nth-child(60) {
    transform: rotate(355deg) translate(-50%);
    animation: line-wave 6s 6s infinite ease-in-out
}

.biometric-info .biometric-animation video,
.biometric-info .biometric-animation img {
    width: 32vw;
    height: 32vw
}

.biometric-info h3 {
    margin-bottom: 1.3333333333vw;
    color: #0e2749;
    font-size: 4vw;
    font-weight: 700
}

.biometric-info p {
    width: inherit;
    margin-bottom: 5.3333333333vw;
    color: #0e274980;
    font-size: 3.4666666667vw;
    line-height: 1.6
}

.biometric-switch {
    position: relative;
    width: 18.9333333333vw;
    height: 10.6666666667vw;
    margin: 0 auto;
    padding: 0 2.6666666667vw;
    transition: all .3s;
    border-radius: 10.6666666667vw;
    background: rgba(244, 182, 0, .5);
    color: #0e2749;
    font-size: 3.4666666667vw;
    line-height: 10.6666666667vw
}

.biometric-switch span {
    position: absolute;
    top: 1.3333333333vw;
    left: 1.3333333333vw;
    width: 8vw;
    height: 8vw;
    transition: all .3s;
    border-radius: 50%;
    background-repeat: no-repeat
}

.biometric-switch.active {
    background-color: #f4b600;
    text-indent: 8vw
}

.biometric-switch.active span {
    top: 1.3333333333vw;
    left: 9.6vw
}

.pop-biometric-success {
    display: none
}

.face-id-wrapper {
    position: relative;
    width: 32vw;
    height: 32vw;
    margin: 0 auto 2.1333333333vw
}

.face-id-wrapper video {
    width: 100%
}

@keyframes line-wave {
    0% {
        box-shadow: 0 -.2666666667vw #f4b600
    }
    1% {
        box-shadow: 0 -.5333333333vw #f4b600
    }
    2% {
        box-shadow: 0 -.8vw #f4b600
    }
    3% {
        box-shadow: 0 -1.0666666667vw #f4b600
    }
    4% {
        box-shadow: 0 -1.3333333333vw #f4b600
    }
    5% {
        box-shadow: 0 -1.6vw #f4b600
    }
    6% {
        box-shadow: 0 -1.8666666667vw #f4b600
    }
    7% {
        box-shadow: 0 -2.1333333333vw #f4b600
    }
    24% {
        box-shadow: 0 0 #f4b600
    }
    25% {
        background-color: #ffcf42;
        box-shadow: 0 0 #0e2749
    }
    to {
        background-color: #f4b600;
        box-shadow: 0 0 #0e2749
    }
}

#holder {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    opacity: .2
}

.vip-content {
    background: linear-gradient(180deg, #054ea1 0%, #0d41b6 100%);
    font-family: "Source Sans 3", sans-serif
}

.vip-content .button {
    width: auto;
    height: 14.9333333333vw;
    margin: 4vw;
    border-radius: 5.3333333333vw;
    font-size: 4.2666666667vw;
    line-height: 14.9333333333vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.vip-content .button.allow {
    overflow: hidden;
    background: linear-gradient(180deg, #ffc828 0%, #f4b600 100%);
    box-shadow: 0 0 2.6666666667vw .5333333333vw #66614980, inset 0 0 1.3333333333vw -.8vw #fff;
    text-shadow: 0 2px 1.0666666667vw none
}

.vip-content .button.allow:after {
    content: "";
    position: absolute;
    top: 0;
    width: 30%;
    height: 14.9333333333vw;
    transform: skew(-40deg);
    animation: shiny 3s ease 2s infinite;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .3) 50%, rgba(255, 255, 255, 0) 100%)
}

.vip-content .button.default {
    background: linear-gradient(180deg, #4d74cc 0%, #0f3ca1 100%);
    box-shadow: inset 0 0 1.3333333333vw -.8vw #fff;
    color: #f4b600;
    text-shadow: 0 .5333333333vw 1.0666666667vw none
}

.vip-content .button img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%
}

.player-vip-box {
    position: relative;
    margin: 2.1333333333vw 4.2666666667vw;
    border-radius: 5.3333333333vw;
    box-shadow: none
}

.player-vip-box.total {
    padding: 2.6666666667vw
}

.player-vip-box .title {
    position: relative;
    color: #fff;
    font-size: 3.2vw
}

.player-vip-box .title h2 {
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 500
}

.player-vip-box .title h2:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.2666666667vw;
    margin-right: 1.3333333333vw;
    border-radius: 2.1333333333vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: middle
}

.player-vip-box .refresh {
    display: inline-flex;
    position: absolute;
    right: 0;
    bottom: .2666666667vw;
    align-items: center
}

.player-vip-box .refresh .text {
    color: #fff
}

.player-vip-box .refresh-icon {
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-left: 1.6vw;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: cover;
    mask-size: cover
}

.player-vip-box .status-box {
    display: inline-block;
    width: 100%
}

.player-vip-box .status {
    display: inline-flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    width: 86%;
    padding: 0;
    background: transparent
}

.player-vip-box .status .number {
    margin-right: 2.6666666667vw;
    margin-bottom: 0;
    color: #f4b600;
    font-size: 9.3333333333vw;
    font-weight: 500
}

.player-vip-box .status:after {
    content: none
}

.player-vip-box .status .text {
    width: auto;
    height: 5.3333333333vw;
    margin-top: 3.2vw;
    padding: 0 2.6666666667vw;
    border-radius: 13.3333333333vw;
    background: rgba(0, 0, 0, .2);
    color: #fff;
    font-size: 2.9333333333vw;
    line-height: 5.3333333333vw
}

.cleader {
    position: absolute;
    right: 0;
    bottom: 2.6666666667vw;
    width: 16vw;
    height: 10.6666666667vw;
    border-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #ffc828 0%, #f4b600 100%)
}

.cleader span {
    display: inline-block;
    width: 100%;
    height: 10.6666666667vw;
    background: #054ea1;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 25%;
    mask-size: 25%
}

.cleader a {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16vw;
    height: 10.6666666667vw
}

.card-top {
    height: auto;
    padding: 6.4vw 6.4vw 10.6666666667vw;
    border-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #0766d2 0%, #0d41b6 100%);
    box-shadow: inset 0 0 1.3333333333vw -.8vw #fff;
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.card-top .bar {
    position: relative;
    width: 100%;
    height: 1.3333333333vw;
    margin-bottom: 0;
    border-radius: 1.3333333333vw;
    background: rgba(0, 0, 0, .2);
    box-shadow: inset 0 0 .2666666667vw #fff
}

.card-top .bar-inner {
    animation: progress-animation 5s linear infinite;
    background: linear-gradient(180deg, #f4b600 8%, #f6a108 100%);
    background-size: 300% 100%;
    box-shadow: 0 .2666666667vw .8vw .2666666667vw #0d41b666, 0 0 .8vw #0d41b666
}

.card-top .bar-inner:after {
    right: -.5333333333vw;
    width: 1.6vw;
    height: 1.6vw;
    box-shadow: 0 0 2.6666666667vw .2666666667vw #fff
}

.card-top p {
    margin-bottom: 2.1333333333vw;
    transform: scale(.9);
    transform-origin: left;
    color: #fff;
    font-size: 3.2vw;
    line-height: 9.3333333333vw;
    text-decoration: none
}

.vip-lv-area {
    display: flex;
    position: relative;
    flex-flow: row nowrap;
    align-items: center;
    margin-bottom: 5.3333333333vw
}

.vip-lv-area:nth-child(2) {
    margin-bottom: 0
}

.vip-lv-area .progress-bar {
    flex: 1
}

.lv-totem {
    width: 12vw;
    height: 12vw;
    margin-right: 4vw;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.lv-text {
    color: #fff
}

.lv-text .text {
    margin-bottom: 1.3333333333vw;
    font-size: 2.6666666667vw;
    font-weight: 700;
    letter-spacing: .2666666667vw
}

.lv-text h2 {
    font-size: 4.8vw;
    font-weight: 700;
    text-transform: uppercase
}

.lv-history {
    position: absolute;
    right: 0;
    width: 16vw;
    height: 10.6666666667vw;
    border-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #ffc828 8%, #f4b600 100%)
}

.lv-history span {
    display: inline-block;
    width: 100%;
    height: 10.6666666667vw;
    background: #054ea1;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 35%;
    mask-size: 35%
}

.lv-history a {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 16vw;
    height: 10.6666666667vw
}

.next-lv-totem {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.next-lv-totem {
    width: 7.4666666667vw;
    height: 7.4666666667vw;
    margin-left: 4vw
}

.card-bottom {
    display: flex;
    position: absolute;
    bottom: 0;
    flex-flow: row-reverse nowrap;
    align-items: center;
    width: 100%;
    height: 10.6666666667vw;
    padding: 0 4vw;
    border-radius: 0 0 5.3333333333vw 5.3333333333vw;
    background: rgba(0, 0, 0, .1)
}

.card-bottom a {
    color: #fff;
    font-size: 3.2vw;
    text-decoration: none
}

.card-bottom a span {
    display: inline-block;
    width: 3.2vw;
    height: 2.6666666667vw;
    margin-left: 2.6666666667vw;
    background: #ffffff;
    vertical-align: middle;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: top center;
    mask-position: top center;
    -webkit-mask-size: 90%;
    mask-size: 90%
}

.cash-card {
    padding: 0
}

.cash-card .title {
    margin: 0 0 4vw;
    padding-left: 2.6666666667vw
}

.cash-points {
    display: inline-flex;
    width: 100%;
    padding: 2.6666666667vw;
    border-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #0766d2 0%, #0d41b6 100%);
    box-shadow: inset 0 0 1.3333333333vw -.8vw #fff;
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.cash-points .coin {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    position: relative;
    width: 25%;
    height: auto
}

.movie-box {
    width: 100%;
    height: auto;
    padding: 0
}

.cash-detail {
    width: 75%;
    padding: 1.3333333333vw 2.6666666667vw
}

.cash-detail .detail-title {
    position: relative;
    margin: 2.6666666667vw 0;
    color: #fff;
    font-size: 3.4666666667vw
}

.cash-detail .detail-title .text {
    float: right
}

.cash-detail .detail-title .text span {
    margin-left: 1.3333333333vw
}

.cash-detail .detail-title span {
    color: #fff
}

.cash-detail .cash-input input[type=number] {
    box-sizing: border-box;
    width: 100%;
    margin-bottom: 0;
    padding: 2.6666666667vw;
    border: 0;
    border-radius: 1.3333333333vw;
    outline: none;
    background: rgba(0, 0, 0, .2);
    color: #f4b600;
    font-size: 5.3333333333vw;
    font-weight: 500;
    text-align: left;
    box-shadow: 0 0 .8vw #0003 inset
}

.cash-detail .cash-input input[type=number]::placeholder {
    color: #ffffff4d
}

.cash-detail .cash-input.error input[type=number] {
    animation: shake-horizontal .5s cubic-bezier(.455, .3, .515, .955) both;
    color: #ff8080;
    border: 1px solid #ff8080
}

.cash-detail .conversion {
    position: relative;
    height: 8.5333333333vw;
    margin-top: 5.3333333333vw;
    color: #fff;
    font-size: 3.2vw
}

.cash-detail .conversion .ratio {
    display: inline-flex;
    height: 8.5333333333vw;
    font-weight: 500
}

.cash-detail .conversion .ratio .text {
    margin-left: 2.6666666667vw;
    color: #f4b600
}

.cash-detail .conversion .ratio.hide {
    display: none
}

.cash-detail .conversion .error-tip {
    display: -webkit-inline-box;
    flex-flow: row nowrap;
    align-content: flex-start;
    justify-content: space-between;
    height: 8.5333333333vw
}

.cash-detail .conversion .error-tip:before {
    content: "!";
    display: inline-block;
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    border-radius: 5.3333333333vw;
    background-color: #ff8080;
    color: #fff;
    line-height: 3.7333333333vw;
    text-align: center
}

.cash-detail .conversion .error-tip .text {
    margin-left: 2.1333333333vw;
    color: #ff8080
}

.cash-detail .conversion .error-tip.hide {
    display: none
}

.convert-icon {
    display: flex;
    position: absolute;
    top: 25.3333333333vw;
    justify-content: center;
    width: 100%
}

.convert-icon .chevron {
    position: absolute;
    width: 5.3333333333vw;
    height: .8vw;
    transform: scale(.3);
    opacity: 0
}

.convert-icon .chevron:first-child {
    animation: move-chevron 2.8s ease-out infinite
}

.convert-icon .chevron:first-child:before,
.convert-icon .chevron:first-child:after {
    background: #ffffff
}

.convert-icon .chevron:nth-child(2) {
    animation: move-chevron 2.8s ease-out 1s infinite
}

.convert-icon .chevron:nth-child(2):before,
.convert-icon .chevron:nth-child(2):after {
    background: rgba(255, 255, 255, .5)
}

.convert-icon .chevron:before,
.convert-icon .chevron:after {
    content: "";
    position: absolute;
    top: 0;
    width: 50%;
    height: 100%
}

.convert-icon .chevron:before {
    left: 0;
    transform: skewY(30deg)
}

.convert-icon .chevron:after {
    right: 0;
    width: 50%;
    transform: skewY(-30deg)
}

.convert-ani {
    display: none;
    position: fixed;
    z-index: 8001;
    top: -13.3333333333vw;
    width: 100%;
    height: 100%
}

.convert-ani .text {
    position: fixed;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 4.2666666667vw
}

@keyframes progress-animation {
    0% {
        background-position: 100%
    }
    50% {
        background-position: 0
    }
    to {
        background-position: 100%
    }
}

@keyframes shake-horizontal {
    0%,
    to {
        transform: translate(0)
    }
    10%,
    30%,
    50%,
    70% {
        transform: translate(-2px)
    }
    20%,
    40%,
    60% {
        transform: translate(2px)
    }
    80% {
        transform: translate(1px)
    }
    90% {
        transform: translate(-1px)
    }
}

@keyframes shiny {
    0% {
        left: -100%
    }
    to {
        left: 150%
    }
}

@keyframes move-chevron {
    25% {
        opacity: 1
    }
    33.3% {
        transform: translateY(1.6vw);
        opacity: 1
    }
    66.6% {
        transform: translateY(3.2vw);
        opacity: 1
    }
    to {
        transform: translateY(4.8vw) scale(.5);
        opacity: 0
    }
}

.acquired-content {
    padding: 0 4vw
}

.vip-year {
    margin: 2.6666666667vw 0;
    color: #f4b600;
    font-size: 4.8vw;
    font-weight: 700
}

.form-vip-history {
    position: relative;
    margin: 0 0 4.2666666667vw 16vw;
    padding: 5.3333333333vw;
    border-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #0766d2 0%, #0d41b6 100%);
    box-shadow: inset 0 0 1.3333333333vw -.8vw #fff;
    color: #fff;
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.form-vip-history:before {
    content: "";
    display: block;
    position: absolute;
    top: 10.1333333333vw;
    left: -4.2666666667vw;
    width: .5333333333vw;
    height: 29.3333333333vw;
    background: #f4b600
}

.form-vip-history:after {
    content: "";
    display: block;
    position: absolute;
    top: 5.0666666667vw;
    left: -5.3333333333vw;
    width: 2.1333333333vw;
    height: 2.1333333333vw;
    border-radius: 50%;
    border: 2px solid #f4b600
}

.form-vip-history:last-child:before {
    height: 21.3333333333vw
}

.form-vip-history:lang(vn):after,
.form-vip-history:lang(bn):after,
.form-vip-history:lang(tl):after {
    display: none
}

.form-vip-history:lang(vn):before,
.form-vip-history:lang(bn):before,
.form-vip-history:lang(tl):before {
    top: 11.2vw;
    height: 26.6666666667vw
}

.form-vip-history .vip-month {
    position: absolute;
    top: 4.2666666667vw;
    left: -16vw;
    color: #f4b600;
    font-weight: 500
}

.form-vip-history .vip-month:lang(tl) {
    width: 16vw;
    text-align: right;
    font-size: 3.2vw;
    left: 0;
    top: 5.3333333333vw;
    transform: translate(-110%)
}

.form-vip-history .vip-level {
    margin-bottom: 2.6666666667vw;
    font-weight: 700
}

.form-vip-history .vip-level .text {
    margin-bottom: .5333333333vw;
    font-size: 2.6666666667vw
}

.form-vip-history .vip-level .level {
    font-size: 4.8vw;
    line-height: 5.3333333333vw;
    text-transform: uppercase
}

.form-vip-history .vip-acquired {
    font-weight: 500
}

.form-vip-history .vip-acquired .text {
    margin-bottom: 1.3333333333vw;
    font-size: 3.2vw
}

.form-vip-history .vip-acquired .acquired {
    color: #fff;
    font-size: 3.7333333333vw
}

.vip-level-icon {
    position: absolute;
    z-index: 1;
    top: 5.3333333333vw;
    right: 5.3333333333vw;
    width: 12vw;
    height: 12vw;
    border-radius: 50%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain
}

.playerform-content .button {
    height: 12vw;
    margin: 4.2666666667vw;
    line-height: 12vw
}

.playerform-content .verify-tips {
    margin-bottom: 4vw
}

.drop-down-menu {
    margin-bottom: 2.6666666667vw;
    overflow: hidden;
    border: .2666666667vw solid #4b6cb6;
    border-radius: 2.6666666667vw;
    background: #4b6cb6
}

.drop-down-menu:last-child {
    margin-bottom: 0
}

.drop-down-menu.under-review {
    border: .2666666667vw solid #054ea1;
    background: #054ea1
}

.drop-down-menu.success {
    border: .2666666667vw solid #09ac6b;
    background: #09ac6b
}

.drop-down-menu.failed {
    border: .2666666667vw solid #ff5757;
    background: #ff5757
}

.drop-down-menu.bankcard {
    border: .2666666667vw solid #4b6cb6
}

.drop-down-menu.bankcard .drop-down-menu-btn.add-bank-card {
    background-color: #4b6cb6
}

.drop-down-menu-content {
    max-height: 0;
    overflow: hidden;
    transition: all 1s ease-in-out
}

.drop-down-menu-content .menu-box {
    margin: 0;
    border-radius: 0
}

.drop-down-menu-content.show {
    height: auto;
    max-height: 2000px
}

.drop-down-menu .phone-area-code {
    flex: 0 0 34%
}

.drop-down-menu .phone-code-list {
    top: 68vw;
    left: 8.8vw;
    width: 25.0666666667vw;
    max-height: 24vw
}

.drop-down-menu-btn {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: flex-start;
    height: 11.7333333333vw;
    padding: 0 8vw 0 2.6666666667vw;
    border-radius: 2.1333333333vw 2.1333333333vw 0 0;
    color: #fff
}

.drop-down-menu-btn:after {
    content: "";
    display: block;
    position: absolute;
    z-index: 2;
    top: 50%;
    right: 4vw;
    transform: translateY(-25%);
    border-width: 1.0666666667vw;
    border-style: solid;
    border-color: #ffffff transparent transparent
}

.drop-down-menu-btn .icon {
    display: flex;
    flex: none;
    width: 6.4vw;
    height: 6.4vw;
    margin: 0 4vw 0 1.3333333333vw
}

.drop-down-menu-btn .icon img {
    display: block;
    width: 100%;
    margin: auto
}

.drop-down-menu-btn .text {
    overflow: hidden;
    font-size: 3.2vw;
    line-height: 11.7333333333vw;
    text-overflow: ellipsis;
    white-space: nowrap
}

.deposit-crypto-cont .player-crypto-bankcard .menu-box {
    margin-top: 0
}

.deposit-crypto-cont .credit-card {
    margin-top: 2.6666666667vw;
    margin-bottom: 6.4vw
}

.player-crypto-bankcard,
.player-crypto-channel {
    display: none
}

.player-crypto-bankcard.active,
.player-crypto-channel.active {
    display: block
}

.voucher-card-wrap {
    display: block;
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    background: #ffffff;
    overflow: hidden
}

.voucher-card-top {
    display: block;
    position: relative;
    padding: 4vw;
    box-shadow: 0 -.5333333333vw 1.0666666667vw #0000061a, inset .2666666667vw .2666666667vw .5333333333vw #ffffff1a
}

.voucher-card-top__title {
    position: relative;
    overflow: hidden;
    color: #0e2749;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-overflow: ellipsis;
    white-space: nowrap
}

.voucher-card-top__title:before {
    content: "";
    display: inline-block;
    width: 1.0666666667vw;
    height: 4.8vw;
    margin-right: 2.1333333333vw;
    border-radius: 1.0666666667vw;
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%);
    vertical-align: sub
}

.voucher-card-top__label {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    position: absolute;
    top: 0;
    right: 5.3333333333vw;
    width: 8.5333333333vw;
    height: 9.6vw;
    border-radius: 0 0 1.3333333333vw 1.3333333333vw;
    background: #054ea1;
    font-size: 2.9333333333vw
}

.voucher-card-top__label .icon {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center 60%;
    background-size: 50%
}

.voucher-card-top .card-content {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding-top: 2.6666666667vw;
    border-radius: 1.0666666667vw
}

.voucher-card-top .card-content__left {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 21.8666666667vw;
    height: 21.8666666667vw;
    margin-right: 4vw;
    overflow: hidden;
    border-radius: 1.0666666667vw
}

.voucher-card-top .card-content__left .pic {
    width: 100%;
    height: auto
}

.voucher-card-top .card-content__right {
    display: flex;
    position: relative;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    width: 70%
}

.voucher-card-top .card-content__right .text {
    margin: auto;
    padding: 2.6666666667vw;
    color: #054ea1;
    font-size: 3.4666666667vw;
    line-height: 1.5;
    text-align: center;
    word-wrap: break-word;
    word-break: break-all
}

.voucher-card-top .card-detail {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: center;
    justify-content: flex-start;
    margin-bottom: 2.6666666667vw
}

.voucher-card-top .card-detail .card-date {
    display: flex;
    flex-direction: column;
    align-content: flex-start;
    justify-content: center;
    margin: 0 1.3333333333vw 0 0;
    color: #7e919e;
    font-size: 2.6666666667vw
}

.voucher-card-top .card-detail .card-date div {
    line-height: 1.5
}

.voucher-card-top .card-detail .time-zone {
    display: block;
    align-self: flex-start;
    margin: .8vw 1.3333333333vw .8vw 0;
    padding: .5333333333vw 1.0666666667vw;
    border: 1px solid #f4b600;
    border-radius: 1.3333333333vw;
    color: #f4b600;
    font-size: 2.6666666667vw
}

.voucher-card-top .card-detail .detail-btn {
    display: flex;
    align-self: flex-start;
    margin: .8vw 0;
    padding: .5333333333vw 1.3333333333vw;
    border: .2666666667vw solid #054ea1;
    border-radius: 1.3333333333vw;
    font-weight: 500
}

.voucher-card-top .card-detail .detail-btn a {
    color: #054ea1;
    font-size: 2.6666666667vw;
    text-decoration: none
}

.voucher-card-deco {
    position: relative;
    height: 5.3333333333vw
}

.voucher-card-deco:before,
.voucher-card-deco:after {
    content: "";
    position: absolute;
    top: 0;
    width: 3.2vw;
    height: 3.2vw;
    border-radius: 100%;
    background-color: #0e2749
}

.voucher-card-deco:before {
    right: -1.6vw
}

.voucher-card-deco:after {
    left: -1.6vw
}

.voucher-card-deco .dec-line {
    display: block;
    position: relative;
    left: 5%;
    bottom: 0;
    width: 90%;
    height: .2666666667vw;
    margin: 4.2666666667vw 0;
    background-image: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw
}

.voucher-card-down {
    display: block;
    position: relative;
    padding: 2.1333333333vw 4.2666666667vw 4.2666666667vw;
    border-radius: 0 0 2.6666666667vw 2.6666666667vw;
    box-shadow: 0 .5333333333vw 1.0666666667vw #0000001a
}

.voucher-card-down .card-down-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    border-radius: 1.0666666667vw
}

.voucher-card-down .card-down-inner__left {
    display: flex;
    align-items: center;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    color: #f4b600
}

.voucher-card-down .card-down-inner__left .bonus-name {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    font-size: 3.2vw;
    padding: 1.3333333333vw 0
}

.voucher-card-down .card-down-inner__left .currency {
    padding: 0 .8vw 0 1.8666666667vw;
    font-size: 3.7333333333vw
}

.voucher-card-down .card-down-inner__left .bonus-number {
    font-size: 4.8vw;
    font-weight: 500
}

.voucher-card-down .card-down-inner__left .bonus-tips {
    transform: scale(.9);
    transform-origin: left;
    padding: .8vw 0;
    color: #0e274980;
    font-size: 3.2vw
}

.voucher-card-down .card-down-inner__center {
    color: #0e274980;
    font-size: 3.2vw
}

.voucher-card-down .card-down-inner__right {
    position: relative;
    margin-left: 2.6666666667vw
}

.voucher-card-down .card-down-inner__right .btn {
    width: -moz-fit-content;
    width: fit-content;
    min-width: 29.3333333333vw;
    min-height: 7.4666666667vw;
    max-width: 58.6666666667vw;
    margin: auto;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw 1.0666666667vw #00000040;
    color: #fff;
    font-size: 3.4666666667vw;
    line-height: 7.4666666667vw;
    text-align: center;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden
}

.voucher-card-down .card-down-inner__right .btn--start {
    background-image: linear-gradient(to bottom, #054ea1 0%, #054ea1 100%)
}

.voucher-card-down .card-down-inner__right .btn--disabled {
    color: #444;
    background-image: linear-gradient(to bottom, #d8d8d8 0%, #bfbfbf 100%);
    border: 1px dotted #444444;
    box-shadow: 0 0 #00000040
}

.mat-ripple {
    overflow: hidden;
    position: relative
}

.mat-ripple:not(:empty) {
    transform: translateZ(0)
}

.mat-ripple.mat-ripple-unbounded {
    overflow: visible
}

.mat-ripple-element {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    transition: opacity, transform 0ms cubic-bezier(0, 0, .2, 1);
    transform: scale3d(0, 0, 0)
}

.cdk-high-contrast-active .mat-ripple-element {
    display: none
}

.cdk-visually-hidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
    outline: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    left: 0
}

[dir=rtl] .cdk-visually-hidden {
    left: auto;
    right: 0
}

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

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

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

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

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

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

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

.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
    opacity: .6
}

.cdk-overlay-dark-backdrop {
    background: rgba(0, 0, 0, .32)
}

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

.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
    opacity: 0;
    visibility: visible
}

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

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

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

textarea.cdk-textarea-autosize {
    resize: none
}

textarea.cdk-textarea-autosize-measuring {
    padding: 2px 0 !important;
    box-sizing: content-box !important;
    height: auto !important;
    overflow: hidden !important
}

textarea.cdk-textarea-autosize-measuring-firefox {
    padding: 2px 0 !important;
    box-sizing: content-box !important;
    height: 0 !important
}

@keyframes cdk-text-field-autofill-start {}

@keyframes cdk-text-field-autofill-end {}

.cdk-text-field-autofill-monitored:-webkit-autofill {
    animation: cdk-text-field-autofill-start 0s 1ms
}

.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
    animation: cdk-text-field-autofill-end 0s 1ms
}

.mat-focus-indicator {
    position: relative
}

.mat-focus-indicator:before {
    inset: 0;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: var(--mat-focus-indicator-display, none);
    border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
    border-radius: var(--mat-focus-indicator-border-radius, 4px)
}

.mat-focus-indicator:focus:before {
    content: ""
}

.cdk-high-contrast-active {
    --mat-focus-indicator-display: block
}

.mat-mdc-focus-indicator {
    position: relative
}

.mat-mdc-focus-indicator:before {
    inset: 0;
    position: absolute;
    box-sizing: border-box;
    pointer-events: none;
    display: var(--mat-mdc-focus-indicator-display, none);
    border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
    border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px)
}

.mat-mdc-focus-indicator:focus:before {
    content: ""
}

.cdk-high-contrast-active {
    --mat-mdc-focus-indicator-display: block
}

.mat-ripple-element {
    background-color: #ffffff1a
}

html {
    --mat-option-selected-state-label-text-color: #435f9b;
    --mat-option-label-text-color: white;
    --mat-option-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-option-selected-state-layer-color: rgba(255, 255, 255, .08)
}

.mat-accent {
    --mat-option-selected-state-label-text-color: #a38d5b
}

.mat-warn {
    --mat-option-selected-state-label-text-color: #f44336
}

html {
    --mat-optgroup-label-text-color: white
}

.mat-pseudo-checkbox-full {
    color: #ffffffb3
}

.mat-pseudo-checkbox-full.mat-pseudo-checkbox-disabled {
    color: #686868
}

.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal:after,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal:after {
    color: #435f9b
}

.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
    background: #435f9b
}

.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full:after,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full:after {
    color: #303030
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal:after,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal:after {
    color: #a38d5b
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
    background: #a38d5b
}

.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full:after,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full:after {
    color: #303030
}

.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal:after,
.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal:after {
    color: #a38d5b
}

.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
    background: #a38d5b
}

.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full:after,
.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full:after {
    color: #303030
}

.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal:after,
.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal:after {
    color: #f44336
}

.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
    background: #f44336
}

.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full:after,
.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full:after {
    color: #303030
}

.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal:after,
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal:after {
    color: #686868
}

.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
    background: #686868
}

.mat-app-background {
    background-color: #303030;
    color: #fff
}

.mat-elevation-z0,
.mat-mdc-elevation-specific.mat-elevation-z0 {
    box-shadow: 0 0 #0003, 0 0 #00000024, 0 0 #0000001f
}

.mat-elevation-z1,
.mat-mdc-elevation-specific.mat-elevation-z1 {
    box-shadow: 0 2px 1px -1px #0003, 0 1px 1px #00000024, 0 1px 3px #0000001f
}

.mat-elevation-z2,
.mat-mdc-elevation-specific.mat-elevation-z2 {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f
}

.mat-elevation-z3,
.mat-mdc-elevation-specific.mat-elevation-z3 {
    box-shadow: 0 3px 3px -2px #0003, 0 3px 4px #00000024, 0 1px 8px #0000001f
}

.mat-elevation-z4,
.mat-mdc-elevation-specific.mat-elevation-z4 {
    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f
}

.mat-elevation-z5,
.mat-mdc-elevation-specific.mat-elevation-z5 {
    box-shadow: 0 3px 5px -1px #0003, 0 5px 8px #00000024, 0 1px 14px #0000001f
}

.mat-elevation-z6,
.mat-mdc-elevation-specific.mat-elevation-z6 {
    box-shadow: 0 3px 5px -1px #0003, 0 6px 10px #00000024, 0 1px 18px #0000001f
}

.mat-elevation-z7,
.mat-mdc-elevation-specific.mat-elevation-z7 {
    box-shadow: 0 4px 5px -2px #0003, 0 7px 10px 1px #00000024, 0 2px 16px 1px #0000001f
}

.mat-elevation-z8,
.mat-mdc-elevation-specific.mat-elevation-z8 {
    box-shadow: 0 5px 5px -3px #0003, 0 8px 10px 1px #00000024, 0 3px 14px 2px #0000001f
}

.mat-elevation-z9,
.mat-mdc-elevation-specific.mat-elevation-z9 {
    box-shadow: 0 5px 6px -3px #0003, 0 9px 12px 1px #00000024, 0 3px 16px 2px #0000001f
}

.mat-elevation-z10,
.mat-mdc-elevation-specific.mat-elevation-z10 {
    box-shadow: 0 6px 6px -3px #0003, 0 10px 14px 1px #00000024, 0 4px 18px 3px #0000001f
}

.mat-elevation-z11,
.mat-mdc-elevation-specific.mat-elevation-z11 {
    box-shadow: 0 6px 7px -4px #0003, 0 11px 15px 1px #00000024, 0 4px 20px 3px #0000001f
}

.mat-elevation-z12,
.mat-mdc-elevation-specific.mat-elevation-z12 {
    box-shadow: 0 7px 8px -4px #0003, 0 12px 17px 2px #00000024, 0 5px 22px 4px #0000001f
}

.mat-elevation-z13,
.mat-mdc-elevation-specific.mat-elevation-z13 {
    box-shadow: 0 7px 8px -4px #0003, 0 13px 19px 2px #00000024, 0 5px 24px 4px #0000001f
}

.mat-elevation-z14,
.mat-mdc-elevation-specific.mat-elevation-z14 {
    box-shadow: 0 7px 9px -4px #0003, 0 14px 21px 2px #00000024, 0 5px 26px 4px #0000001f
}

.mat-elevation-z15,
.mat-mdc-elevation-specific.mat-elevation-z15 {
    box-shadow: 0 8px 9px -5px #0003, 0 15px 22px 2px #00000024, 0 6px 28px 5px #0000001f
}

.mat-elevation-z16,
.mat-mdc-elevation-specific.mat-elevation-z16 {
    box-shadow: 0 8px 10px -5px #0003, 0 16px 24px 2px #00000024, 0 6px 30px 5px #0000001f
}

.mat-elevation-z17,
.mat-mdc-elevation-specific.mat-elevation-z17 {
    box-shadow: 0 8px 11px -5px #0003, 0 17px 26px 2px #00000024, 0 6px 32px 5px #0000001f
}

.mat-elevation-z18,
.mat-mdc-elevation-specific.mat-elevation-z18 {
    box-shadow: 0 9px 11px -5px #0003, 0 18px 28px 2px #00000024, 0 7px 34px 6px #0000001f
}

.mat-elevation-z19,
.mat-mdc-elevation-specific.mat-elevation-z19 {
    box-shadow: 0 9px 12px -6px #0003, 0 19px 29px 2px #00000024, 0 7px 36px 6px #0000001f
}

.mat-elevation-z20,
.mat-mdc-elevation-specific.mat-elevation-z20 {
    box-shadow: 0 10px 13px -6px #0003, 0 20px 31px 3px #00000024, 0 8px 38px 7px #0000001f
}

.mat-elevation-z21,
.mat-mdc-elevation-specific.mat-elevation-z21 {
    box-shadow: 0 10px 13px -6px #0003, 0 21px 33px 3px #00000024, 0 8px 40px 7px #0000001f
}

.mat-elevation-z22,
.mat-mdc-elevation-specific.mat-elevation-z22 {
    box-shadow: 0 10px 14px -6px #0003, 0 22px 35px 3px #00000024, 0 8px 42px 7px #0000001f
}

.mat-elevation-z23,
.mat-mdc-elevation-specific.mat-elevation-z23 {
    box-shadow: 0 11px 14px -7px #0003, 0 23px 36px 3px #00000024, 0 9px 44px 8px #0000001f
}

.mat-elevation-z24,
.mat-mdc-elevation-specific.mat-elevation-z24 {
    box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f
}

.mat-theme-loaded-marker {
    display: none
}

.mat-mdc-card {
    --mdc-elevated-card-container-color: #424242;
    --mdc-elevated-card-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, .2), 0px 1px 1px 0px rgba(0, 0, 0, .14), 0px 1px 3px 0px rgba(0, 0, 0, .12);
    --mdc-outlined-card-container-color: #424242;
    --mdc-outlined-card-outline-color: rgba(255, 255, 255, .12);
    --mdc-outlined-card-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, .2), 0px 0px 0px 0px rgba(0, 0, 0, .14), 0px 0px 0px 0px rgba(0, 0, 0, .12);
    --mat-card-subtitle-text-color: rgba(255, 255, 255, .7)
}

.mat-mdc-progress-bar {
    --mdc-linear-progress-active-indicator-color: #435f9b;
    --mdc-linear-progress-track-color: rgba(67, 95, 155, .25)
}

.mat-mdc-progress-bar .mdc-linear-progress__buffer-dots {
    background-color: #435f9b40;
    background-color: var(--mdc-linear-progress-track-color, rgba(67, 95, 155, .25))
}

@media (forced-colors: active) {
    .mat-mdc-progress-bar .mdc-linear-progress__buffer-dots {
        background-color: ButtonBorder
    }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .mat-mdc-progress-bar .mdc-linear-progress__buffer-dots {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(67, 95, 155, 0.25)'/%3E%3C/svg%3E")
    }
}

.mat-mdc-progress-bar .mdc-linear-progress__buffer-bar {
    background-color: #435f9b40;
    background-color: var(--mdc-linear-progress-track-color, rgba(67, 95, 155, .25))
}

.mat-mdc-progress-bar.mat-accent {
    --mdc-linear-progress-active-indicator-color: #a38d5b;
    --mdc-linear-progress-track-color: rgba(163, 141, 91, .25)
}

.mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-dots {
    background-color: #a38d5b40;
    background-color: var(--mdc-linear-progress-track-color, rgba(163, 141, 91, .25))
}

@media (forced-colors: active) {
    .mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-dots {
        background-color: ButtonBorder
    }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-dots {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(163, 141, 91, 0.25)'/%3E%3C/svg%3E")
    }
}

.mat-mdc-progress-bar.mat-accent .mdc-linear-progress__buffer-bar {
    background-color: #a38d5b40;
    background-color: var(--mdc-linear-progress-track-color, rgba(163, 141, 91, .25))
}

.mat-mdc-progress-bar.mat-warn {
    --mdc-linear-progress-active-indicator-color: #f44336;
    --mdc-linear-progress-track-color: rgba(244, 67, 54, .25)
}

@keyframes mdc-linear-progress-buffering {}

.mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-dots {
    background-color: #f4433640;
    background-color: var(--mdc-linear-progress-track-color, rgba(244, 67, 54, .25))
}

@media (forced-colors: active) {
    .mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-dots {
        background-color: ButtonBorder
    }
}

@media all and (-ms-high-contrast: none),
(-ms-high-contrast: active) {
    .mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-dots {
        background-color: transparent;
        background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' enable-background='new 0 0 5 2' xml:space='preserve' viewBox='0 0 5 2' preserveAspectRatio='none slice'%3E%3Ccircle cx='1' cy='1' r='1' fill='rgba(244, 67, 54, 0.25)'/%3E%3C/svg%3E")
    }
}

.mat-mdc-progress-bar.mat-warn .mdc-linear-progress__buffer-bar {
    background-color: #f4433640;
    background-color: var(--mdc-linear-progress-track-color, rgba(244, 67, 54, .25))
}

.mat-mdc-tooltip {
    --mdc-plain-tooltip-container-color: #616161;
    --mdc-plain-tooltip-supporting-text-color: #fff
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #fff9
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: #ffffffde
}

@media all {
    .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input::placeholder {
        color: #fff9
    }
}

@media all {
    .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input:-ms-input-placeholder {
        color: #fff9
    }
}

.mdc-text-field .mdc-text-field__input {
    caret-color: var(--mdc-theme-primary, #435f9b)
}

.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-helper-text {
    color: #0009
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field-character-counter,
.mdc-text-field:not(.mdc-text-field--disabled)+.mdc-text-field-helper-line .mdc-text-field-character-counter {
    color: #0009
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--leading {
    color: #0000008a
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
    color: #0000008a
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--prefix {
    color: #0009
}

.mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__affix--suffix {
    color: #0009
}

.mdc-text-field--filled .mdc-text-field__ripple:before,
.mdc-text-field--filled .mdc-text-field__ripple:after {
    background-color: var(--mdc-ripple-color, rgba(255, 255, 255, .87))
}

.mdc-text-field--filled:hover .mdc-text-field__ripple:before,
.mdc-text-field--filled.mdc-ripple-surface--hover .mdc-text-field__ripple:before {
    opacity: var(--mdc-ripple-hover-opacity, .08)
}

.mdc-text-field--filled.mdc-ripple-upgraded--background-focused .mdc-text-field__ripple:before,
.mdc-text-field--filled:not(.mdc-ripple-upgraded):focus .mdc-text-field__ripple:before {
    opacity: var(--mdc-ripple-focus-opacity, .24)
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) {
    background-color: #4a4a4a
}

.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple:before {
    border-bottom-color: #ffffff6b
}

.mdc-text-field--filled:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before {
    border-bottom-color: #ffffffde
}

.mdc-text-field--filled .mdc-line-ripple:after {
    border-bottom-color: var(--mdc-theme-primary, #435f9b)
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: #ffffff61
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: #ffffffde
}

.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-primary, #435f9b)
}

.mdc-text-field--outlined .mdc-text-field__ripple:before,
.mdc-text-field--outlined .mdc-text-field__ripple:after {
    background-color: var(--mdc-ripple-color, transparent)
}

.mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #435f9bde
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
    color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid .mdc-text-field__input {
    caret-color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
    color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:before {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mdc-text-field--disabled .mdc-text-field__input {
    color: #ffffff61
}

@media all {
    .mdc-text-field--disabled .mdc-text-field__input::placeholder {
        color: #ffffff61
    }
}

@media all {
    .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
        color: #ffffff61
    }
}

.mdc-text-field--disabled .mdc-floating-label {
    color: #ffffff61
}

.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text {
    color: #00000061
}

.mdc-text-field--disabled .mdc-text-field-character-counter,
.mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter {
    color: #00000061
}

.mdc-text-field--disabled .mdc-text-field__icon--leading,
.mdc-text-field--disabled .mdc-text-field__icon--trailing {
    color: #0000004d
}

.mdc-text-field--disabled .mdc-text-field__affix--prefix,
.mdc-text-field--disabled .mdc-text-field__affix--suffix {
    color: #00000061
}

.mdc-text-field--disabled .mdc-line-ripple:before {
    border-bottom-color: #ffffff0f
}

.mdc-text-field--disabled .mdc-notched-outline__leading,
.mdc-text-field--disabled .mdc-notched-outline__notch,
.mdc-text-field--disabled .mdc-notched-outline__trailing {
    border-color: #ffffff0f
}

@media screen and (forced-colors: active),
(-ms-high-contrast: active) {
    .mdc-text-field--disabled .mdc-text-field__input::placeholder {
        color: GrayText
    }
}

@media screen and (forced-colors: active),
(-ms-high-contrast: active) {
    .mdc-text-field--disabled .mdc-text-field__input:-ms-input-placeholder {
        color: GrayText
    }
    .mdc-text-field--disabled .mdc-floating-label {
        color: GrayText
    }
    .mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-helper-text {
        color: GrayText
    }
    .mdc-text-field--disabled .mdc-text-field-character-counter,
    .mdc-text-field--disabled+.mdc-text-field-helper-line .mdc-text-field-character-counter {
        color: GrayText
    }
    .mdc-text-field--disabled .mdc-text-field__icon--leading,
    .mdc-text-field--disabled .mdc-text-field__icon--trailing,
    .mdc-text-field--disabled .mdc-text-field__affix--prefix,
    .mdc-text-field--disabled .mdc-text-field__affix--suffix {
        color: GrayText
    }
    .mdc-text-field--disabled .mdc-line-ripple:before {
        border-bottom-color: GrayText
    }
    .mdc-text-field--disabled .mdc-notched-outline__leading,
    .mdc-text-field--disabled .mdc-notched-outline__notch,
    .mdc-text-field--disabled .mdc-notched-outline__trailing {
        border-color: GrayText
    }
}

.mdc-text-field--disabled.mdc-text-field--filled {
    background-color: #464646
}

.mat-mdc-form-field-error {
    color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field-focus-overlay {
    background-color: #ffffffde
}

.mat-mdc-form-field:hover .mat-mdc-form-field-focus-overlay {
    opacity: .08
}

.mat-mdc-form-field.mat-focused .mat-mdc-form-field-focus-overlay {
    opacity: .24
}

select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) option {
    color: #000000de
}

select.mat-mdc-form-field-input-control:not(.mat-mdc-native-select-inline) option:disabled {
    color: #00000061
}

.mat-mdc-form-field-type-mat-native-select .mat-mdc-form-field-infix:after {
    color: #ffffff8a
}

.mat-mdc-form-field-type-mat-native-select.mat-focused.mat-primary .mat-mdc-form-field-infix:after {
    color: #435f9bde
}

.mat-mdc-form-field-type-mat-native-select.mat-focused.mat-accent .mat-mdc-form-field-infix:after {
    color: #a38d5bde
}

.mat-mdc-form-field-type-mat-native-select.mat-focused.mat-warn .mat-mdc-form-field-infix:after {
    color: #f44336de
}

.mat-mdc-form-field-type-mat-native-select.mat-form-field-disabled .mat-mdc-form-field-infix:after {
    color: #ffffff61
}

.mat-mdc-form-field.mat-accent .mdc-text-field__input {
    caret-color: var(--mdc-theme-secondary, #a38d5b)
}

.mat-mdc-form-field.mat-accent:not(.mdc-text-field--disabled) .mdc-line-ripple:after {
    border-bottom-color: var(--mdc-theme-secondary, #a38d5b)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #a38d5bde
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
    color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid .mdc-text-field__input {
    caret-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
    color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:before {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-accent .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-accent .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-accent .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-accent .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-secondary, #a38d5b)
}

.mat-mdc-form-field.mat-warn .mdc-text-field__input {
    caret-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn:not(.mdc-text-field--disabled) .mdc-line-ripple:after {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--focused:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: #f44336de
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled):hover .mdc-line-ripple:before {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:after {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-floating-label {
    color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--invalid+.mdc-text-field-helper-line .mdc-text-field-helper-text--validation-msg {
    color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid .mdc-text-field__input {
    caret-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-text-field__icon--trailing {
    color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-line-ripple:before {
    border-bottom-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled) .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled):not(.mdc-text-field--focused):hover .mdc-notched-outline .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-warn .mdc-text-field--invalid:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-warn .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-warn .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-warn .mdc-text-field--outlined:not(.mdc-text-field--disabled).mdc-text-field--focused .mdc-notched-outline__trailing {
    border-color: var(--mdc-theme-error, #f44336)
}

.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
    border-left: 1px solid transparent
}

[dir=rtl] .mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
    border-left: none;
    border-right: 1px solid transparent
}

.mat-mdc-form-field-infix {
    min-height: 56px
}

.mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
    top: 28px
}

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    --mat-mdc-form-field-label-transform: translateY( -34.75px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));
    transform: var(--mat-mdc-form-field-label-transform)
}

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 16px;
    padding-bottom: 16px
}

.mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
    padding-top: 24px;
    padding-bottom: 8px
}

.mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
    padding-top: 16px;
    padding-bottom: 16px
}

html {
    --mat-select-panel-background-color: #424242;
    --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, .87);
    --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, .38);
    --mat-select-placeholder-text-color: rgba(255, 255, 255, .6);
    --mat-select-enabled-arrow-color: rgba(255, 255, 255, .54);
    --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
    --mat-select-focused-arrow-color: rgba(67, 95, 155, .87);
    --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)
}

html .mat-mdc-form-field.mat-accent {
    --mat-select-panel-background-color: #424242;
    --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, .87);
    --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, .38);
    --mat-select-placeholder-text-color: rgba(255, 255, 255, .6);
    --mat-select-enabled-arrow-color: rgba(255, 255, 255, .54);
    --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
    --mat-select-focused-arrow-color: rgba(163, 141, 91, .87);
    --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)
}

html .mat-mdc-form-field.mat-warn {
    --mat-select-panel-background-color: #424242;
    --mat-select-enabled-trigger-text-color: rgba(255, 255, 255, .87);
    --mat-select-disabled-trigger-text-color: rgba(255, 255, 255, .38);
    --mat-select-placeholder-text-color: rgba(255, 255, 255, .6);
    --mat-select-enabled-arrow-color: rgba(255, 255, 255, .54);
    --mat-select-disabled-arrow-color: rgba(255, 255, 255, .38);
    --mat-select-focused-arrow-color: rgba(244, 67, 54, .87);
    --mat-select-invalid-arrow-color: rgba(244, 67, 54, .87)
}

html {
    --mat-autocomplete-background-color: #424242
}

.mat-mdc-dialog-container {
    --mdc-dialog-container-color: #424242;
    --mdc-dialog-subhead-color: rgba(255, 255, 255, .87);
    --mdc-dialog-supporting-text-color: rgba(255, 255, 255, .6)
}

.mat-mdc-standard-chip {
    --mdc-chip-disabled-label-text-color: #fafafa;
    --mdc-chip-elevated-container-color: #595959;
    --mdc-chip-elevated-disabled-container-color: #595959;
    --mdc-chip-focus-state-layer-color: white;
    --mdc-chip-focus-state-layer-opacity: .12;
    --mdc-chip-label-text-color: #fafafa;
    --mdc-chip-with-icon-icon-color: #fafafa;
    --mdc-chip-with-icon-disabled-icon-color: #fafafa;
    --mdc-chip-with-icon-selected-icon-color: #fafafa;
    --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: #fafafa;
    --mdc-chip-with-trailing-icon-trailing-icon-color: #fafafa
}

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary,
.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
    --mdc-chip-disabled-label-text-color: white;
    --mdc-chip-elevated-container-color: #435f9b;
    --mdc-chip-elevated-disabled-container-color: #435f9b;
    --mdc-chip-focus-state-layer-color: white;
    --mdc-chip-focus-state-layer-opacity: .12;
    --mdc-chip-label-text-color: white;
    --mdc-chip-with-icon-icon-color: white;
    --mdc-chip-with-icon-disabled-icon-color: white;
    --mdc-chip-with-icon-selected-icon-color: white;
    --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
    --mdc-chip-with-trailing-icon-trailing-icon-color: white
}

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent,
.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
    --mdc-chip-disabled-label-text-color: white;
    --mdc-chip-elevated-container-color: #a38d5b;
    --mdc-chip-elevated-disabled-container-color: #a38d5b;
    --mdc-chip-focus-state-layer-color: white;
    --mdc-chip-focus-state-layer-opacity: .12;
    --mdc-chip-label-text-color: white;
    --mdc-chip-with-icon-icon-color: white;
    --mdc-chip-with-icon-disabled-icon-color: white;
    --mdc-chip-with-icon-selected-icon-color: white;
    --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
    --mdc-chip-with-trailing-icon-trailing-icon-color: white
}

.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn,
.mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
    --mdc-chip-disabled-label-text-color: white;
    --mdc-chip-elevated-container-color: #f44336;
    --mdc-chip-elevated-disabled-container-color: #f44336;
    --mdc-chip-focus-state-layer-color: white;
    --mdc-chip-focus-state-layer-opacity: .12;
    --mdc-chip-label-text-color: white;
    --mdc-chip-with-icon-icon-color: white;
    --mdc-chip-with-icon-disabled-icon-color: white;
    --mdc-chip-with-icon-selected-icon-color: white;
    --mdc-chip-with-trailing-icon-disabled-trailing-icon-color: white;
    --mdc-chip-with-trailing-icon-trailing-icon-color: white
}

.mat-mdc-chip.mat-mdc-standard-chip {
    --mdc-chip-container-height: 32px
}

.mat-mdc-slide-toggle {
    --mdc-switch-disabled-selected-handle-color: #000;
    --mdc-switch-disabled-unselected-handle-color: #000;
    --mdc-switch-disabled-selected-track-color: #f5f5f5;
    --mdc-switch-disabled-unselected-track-color: #f5f5f5;
    --mdc-switch-unselected-focus-state-layer-color: #f5f5f5;
    --mdc-switch-unselected-pressed-state-layer-color: #f5f5f5;
    --mdc-switch-unselected-hover-state-layer-color: #f5f5f5;
    --mdc-switch-unselected-focus-track-color: #616161;
    --mdc-switch-unselected-hover-track-color: #616161;
    --mdc-switch-unselected-pressed-track-color: #616161;
    --mdc-switch-unselected-track-color: #616161;
    --mdc-switch-unselected-focus-handle-color: #fafafa;
    --mdc-switch-unselected-hover-handle-color: #fafafa;
    --mdc-switch-unselected-pressed-handle-color: #fafafa;
    --mdc-switch-handle-surface-color: var(--mdc-theme-surface, #fff);
    --mdc-switch-unselected-handle-color: #9e9e9e;
    --mdc-switch-selected-icon-color: #212121;
    --mdc-switch-disabled-selected-icon-color: #212121;
    --mdc-switch-disabled-unselected-icon-color: #212121;
    --mdc-switch-unselected-icon-color: #212121
}

.mat-mdc-slide-toggle .mdc-form-field {
    color: var(--mdc-theme-text-primary-on-background, white)
}

.mat-mdc-slide-toggle .mdc-switch--disabled+label {
    color: #ffffff80
}

.mat-mdc-slide-toggle.mat-primary {
    --mdc-switch-selected-focus-state-layer-color: #7c8fb7;
    --mdc-switch-selected-handle-color: #7c8fb7;
    --mdc-switch-selected-hover-state-layer-color: #7c8fb7;
    --mdc-switch-selected-pressed-state-layer-color: #7c8fb7;
    --mdc-switch-selected-focus-handle-color: #a0afcc;
    --mdc-switch-selected-hover-handle-color: #a0afcc;
    --mdc-switch-selected-pressed-handle-color: #a0afcc;
    --mdc-switch-selected-focus-track-color: #3c5792;
    --mdc-switch-selected-hover-track-color: #3c5792;
    --mdc-switch-selected-pressed-track-color: #3c5792;
    --mdc-switch-selected-track-color: #3c5792
}

.mat-mdc-slide-toggle.mat-accent {
    --mdc-switch-selected-focus-state-layer-color: #fdf196;
    --mdc-switch-selected-handle-color: #fdf196;
    --mdc-switch-selected-hover-state-layer-color: #fdf196;
    --mdc-switch-selected-pressed-state-layer-color: #fdf196;
    --mdc-switch-selected-focus-handle-color: #fef5b2;
    --mdc-switch-selected-hover-handle-color: #fef5b2;
    --mdc-switch-selected-pressed-handle-color: #fef5b2;
    --mdc-switch-selected-focus-track-color: #f2e073;
    --mdc-switch-selected-hover-track-color: #f2e073;
    --mdc-switch-selected-pressed-track-color: #f2e073;
    --mdc-switch-selected-track-color: #f2e073
}

.mat-mdc-slide-toggle.mat-warn {
    --mdc-switch-selected-focus-state-layer-color: #e57373;
    --mdc-switch-selected-handle-color: #e57373;
    --mdc-switch-selected-hover-state-layer-color: #e57373;
    --mdc-switch-selected-pressed-state-layer-color: #e57373;
    --mdc-switch-selected-focus-handle-color: #ef9a9a;
    --mdc-switch-selected-hover-handle-color: #ef9a9a;
    --mdc-switch-selected-pressed-handle-color: #ef9a9a;
    --mdc-switch-selected-focus-track-color: #e53935;
    --mdc-switch-selected-hover-track-color: #e53935;
    --mdc-switch-selected-pressed-track-color: #e53935;
    --mdc-switch-selected-track-color: #e53935
}

.mat-mdc-slide-toggle {
    --mdc-switch-state-layer-size: 48px
}

.mat-mdc-radio-button .mdc-form-field {
    color: var(--mdc-theme-text-primary-on-background, white)
}

.mat-mdc-radio-button.mat-primary {
    --mdc-radio-disabled-selected-icon-color: #fff;
    --mdc-radio-disabled-unselected-icon-color: #fff;
    --mdc-radio-unselected-hover-icon-color: #eeeeee;
    --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-selected-focus-icon-color: #435f9b;
    --mdc-radio-selected-hover-icon-color: #435f9b;
    --mdc-radio-selected-icon-color: #435f9b;
    --mdc-radio-selected-pressed-icon-color: #435f9b;
    --mat-radio-ripple-color: #fff;
    --mat-radio-checked-ripple-color: #435f9b;
    --mat-radio-disabled-label-color: rgba(255, 255, 255, .5)
}

.mat-mdc-radio-button.mat-accent {
    --mdc-radio-disabled-selected-icon-color: #fff;
    --mdc-radio-disabled-unselected-icon-color: #fff;
    --mdc-radio-unselected-hover-icon-color: #eeeeee;
    --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-selected-focus-icon-color: #a38d5b;
    --mdc-radio-selected-hover-icon-color: #a38d5b;
    --mdc-radio-selected-icon-color: #a38d5b;
    --mdc-radio-selected-pressed-icon-color: #a38d5b;
    --mat-radio-ripple-color: #fff;
    --mat-radio-checked-ripple-color: #a38d5b;
    --mat-radio-disabled-label-color: rgba(255, 255, 255, .5)
}

.mat-mdc-radio-button.mat-warn {
    --mdc-radio-disabled-selected-icon-color: #fff;
    --mdc-radio-disabled-unselected-icon-color: #fff;
    --mdc-radio-unselected-hover-icon-color: #eeeeee;
    --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-selected-focus-icon-color: #f44336;
    --mdc-radio-selected-hover-icon-color: #f44336;
    --mdc-radio-selected-icon-color: #f44336;
    --mdc-radio-selected-pressed-icon-color: #f44336;
    --mat-radio-ripple-color: #fff;
    --mat-radio-checked-ripple-color: #f44336;
    --mat-radio-disabled-label-color: rgba(255, 255, 255, .5)
}

.mat-mdc-radio-button .mdc-radio {
    --mdc-radio-state-layer-size: 40px
}

.mat-mdc-slider {
    --mdc-slider-label-container-color: white;
    --mdc-slider-label-label-text-color: black;
    --mdc-slider-disabled-handle-color: #fff;
    --mdc-slider-disabled-active-track-color: #fff;
    --mdc-slider-disabled-inactive-track-color: #fff;
    --mdc-slider-with-tick-marks-disabled-container-color: #fff;
    --mat-mdc-slider-value-indicator-opacity: .9
}

.mat-mdc-slider.mat-primary {
    --mdc-slider-handle-color: #435f9b;
    --mdc-slider-focus-handle-color: #435f9b;
    --mdc-slider-hover-handle-color: #435f9b;
    --mdc-slider-active-track-color: #435f9b;
    --mdc-slider-inactive-track-color: #435f9b;
    --mdc-slider-with-tick-marks-active-container-color: #fff;
    --mdc-slider-with-tick-marks-inactive-container-color: #435f9b;
    --mat-mdc-slider-ripple-color: #435f9b;
    --mat-mdc-slider-hover-ripple-color: rgba(67, 95, 155, .05);
    --mat-mdc-slider-focus-ripple-color: rgba(67, 95, 155, .2)
}

.mat-mdc-slider.mat-accent {
    --mdc-slider-handle-color: #a38d5b;
    --mdc-slider-focus-handle-color: #a38d5b;
    --mdc-slider-hover-handle-color: #a38d5b;
    --mdc-slider-active-track-color: #a38d5b;
    --mdc-slider-inactive-track-color: #a38d5b;
    --mdc-slider-with-tick-marks-active-container-color: #fff;
    --mdc-slider-with-tick-marks-inactive-container-color: #a38d5b;
    --mat-mdc-slider-ripple-color: #a38d5b;
    --mat-mdc-slider-hover-ripple-color: rgba(163, 141, 91, .05);
    --mat-mdc-slider-focus-ripple-color: rgba(163, 141, 91, .2)
}

.mat-mdc-slider.mat-warn {
    --mdc-slider-handle-color: #f44336;
    --mdc-slider-focus-handle-color: #f44336;
    --mdc-slider-hover-handle-color: #f44336;
    --mdc-slider-active-track-color: #f44336;
    --mdc-slider-inactive-track-color: #f44336;
    --mdc-slider-with-tick-marks-active-container-color: #fff;
    --mdc-slider-with-tick-marks-inactive-container-color: #f44336;
    --mat-mdc-slider-ripple-color: #f44336;
    --mat-mdc-slider-hover-ripple-color: rgba(244, 67, 54, .05);
    --mat-mdc-slider-focus-ripple-color: rgba(244, 67, 54, .2)
}

html {
    --mat-menu-item-label-text-color: white;
    --mat-menu-item-icon-color: white;
    --mat-menu-item-hover-state-layer-color: rgba(255, 255, 255, .08);
    --mat-menu-item-focus-state-layer-color: rgba(255, 255, 255, .08);
    --mat-menu-container-color: #424242
}

.mat-mdc-list-base {
    --mdc-list-list-item-label-text-color: white;
    --mdc-list-list-item-supporting-text-color: rgba(255, 255, 255, .7);
    --mdc-list-list-item-leading-icon-color: rgba(255, 255, 255, .5);
    --mdc-list-list-item-trailing-supporting-text-color: rgba(255, 255, 255, .5);
    --mdc-list-list-item-trailing-icon-color: rgba(255, 255, 255, .5);
    --mdc-list-list-item-selected-trailing-icon-color: rgba(255, 255, 255, .5);
    --mdc-list-list-item-disabled-label-text-color: white;
    --mdc-list-list-item-disabled-leading-icon-color: white;
    --mdc-list-list-item-disabled-trailing-icon-color: white;
    --mdc-list-list-item-hover-label-text-color: white;
    --mdc-list-list-item-hover-leading-icon-color: rgba(255, 255, 255, .5);
    --mdc-list-list-item-hover-trailing-icon-color: rgba(255, 255, 255, .5);
    --mdc-list-list-item-focus-label-text-color: white;
    --mdc-list-list-item-hover-state-layer-color: white;
    --mdc-list-list-item-hover-state-layer-opacity: .08;
    --mdc-list-list-item-focus-state-layer-color: white;
    --mdc-list-list-item-focus-state-layer-opacity: .24
}

.mdc-list-item__start,
.mdc-list-item__end {
    --mdc-radio-disabled-selected-icon-color: #fff;
    --mdc-radio-disabled-unselected-icon-color: #fff;
    --mdc-radio-unselected-hover-icon-color: #eeeeee;
    --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-selected-focus-icon-color: #435f9b;
    --mdc-radio-selected-hover-icon-color: #435f9b;
    --mdc-radio-selected-icon-color: #435f9b;
    --mdc-radio-selected-pressed-icon-color: #435f9b
}

.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
    --mdc-radio-disabled-selected-icon-color: #fff;
    --mdc-radio-disabled-unselected-icon-color: #fff;
    --mdc-radio-unselected-hover-icon-color: #eeeeee;
    --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-selected-focus-icon-color: #a38d5b;
    --mdc-radio-selected-hover-icon-color: #a38d5b;
    --mdc-radio-selected-icon-color: #a38d5b;
    --mdc-radio-selected-pressed-icon-color: #a38d5b
}

.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
    --mdc-radio-disabled-selected-icon-color: #fff;
    --mdc-radio-disabled-unselected-icon-color: #fff;
    --mdc-radio-unselected-hover-icon-color: #eeeeee;
    --mdc-radio-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-radio-selected-focus-icon-color: #f44336;
    --mdc-radio-selected-hover-icon-color: #f44336;
    --mdc-radio-selected-icon-color: #f44336;
    --mdc-radio-selected-pressed-icon-color: #f44336
}

.mat-mdc-list-option {
    --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-icon-color: #435f9b;
    --mdc-checkbox-selected-hover-icon-color: #435f9b;
    --mdc-checkbox-selected-icon-color: #435f9b;
    --mdc-checkbox-selected-pressed-icon-color: #435f9b;
    --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
    --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
    --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-selected-focus-state-layer-color: #435f9b;
    --mdc-checkbox-selected-hover-state-layer-color: #435f9b;
    --mdc-checkbox-selected-pressed-state-layer-color: #435f9b;
    --mdc-checkbox-unselected-focus-state-layer-color: white;
    --mdc-checkbox-unselected-hover-state-layer-color: white;
    --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-list-option.mat-accent {
    --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-icon-color: #a38d5b;
    --mdc-checkbox-selected-hover-icon-color: #a38d5b;
    --mdc-checkbox-selected-icon-color: #a38d5b;
    --mdc-checkbox-selected-pressed-icon-color: #a38d5b;
    --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
    --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
    --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-selected-focus-state-layer-color: #a38d5b;
    --mdc-checkbox-selected-hover-state-layer-color: #a38d5b;
    --mdc-checkbox-selected-pressed-state-layer-color: #a38d5b;
    --mdc-checkbox-unselected-focus-state-layer-color: white;
    --mdc-checkbox-unselected-hover-state-layer-color: white;
    --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-list-option.mat-warn {
    --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-icon-color: #f44336;
    --mdc-checkbox-selected-hover-icon-color: #f44336;
    --mdc-checkbox-selected-icon-color: #f44336;
    --mdc-checkbox-selected-pressed-icon-color: #f44336;
    --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
    --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
    --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-selected-focus-state-layer-color: #f44336;
    --mdc-checkbox-selected-hover-state-layer-color: #f44336;
    --mdc-checkbox-selected-pressed-state-layer-color: #f44336;
    --mdc-checkbox-unselected-focus-state-layer-color: white;
    --mdc-checkbox-unselected-hover-state-layer-color: white;
    --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected.mdc-list-item--with-leading-icon .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated.mdc-list-item--with-leading-icon .mdc-list-item__start {
    color: #435f9b
}

.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
    opacity: 1
}

.mat-mdc-list-base {
    --mdc-list-list-item-one-line-container-height: 48px;
    --mdc-list-list-item-two-line-container-height: 64px;
    --mdc-list-list-item-three-line-container-height: 88px
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line,
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line,
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
    height: 56px
}

.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines,
.mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines,
.mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
    height: 72px
}

html {
    --mat-paginator-container-text-color: rgba(255, 255, 255, .87);
    --mat-paginator-container-background-color: #424242;
    --mat-paginator-enabled-icon-color: rgba(255, 255, 255, .54);
    --mat-paginator-disabled-icon-color: rgba(255, 255, 255, .12)
}

html {
    --mat-paginator-container-size: 56px
}

.mat-mdc-paginator .mat-mdc-form-field-infix {
    min-height: 40px
}

.mat-mdc-paginator .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-floating-label {
    top: 20px
}

.mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mdc-notched-outline--upgraded .mdc-floating-label--float-above {
    --mat-mdc-form-field-label-transform: translateY( -26.75px) scale(var(--mat-mdc-form-field-floating-label-scale, .75));
    transform: var(--mat-mdc-form-field-label-transform)
}

.mat-mdc-paginator .mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 8px;
    padding-bottom: 8px
}

.mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-form-field-infix {
    padding-top: 8px;
    padding-bottom: 8px
}

.mat-mdc-paginator .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
    padding-top: 8px;
    padding-bottom: 8px
}

.mat-mdc-paginator .mat-mdc-text-field-wrapper:not(.mdc-text-field--outlined) .mat-mdc-floating-label {
    display: none
}

.mat-mdc-tab-group,
.mat-mdc-tab-nav-bar {
    --mdc-tab-indicator-active-indicator-color: #435f9b;
    --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, .5);
    --mat-tab-header-pagination-icon-color: #fff;
    --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-active-label-text-color: #435f9b;
    --mat-tab-header-active-ripple-color: #435f9b;
    --mat-tab-header-inactive-ripple-color: #435f9b;
    --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-active-focus-label-text-color: #435f9b;
    --mat-tab-header-active-hover-label-text-color: #435f9b;
    --mat-tab-header-active-focus-indicator-color: #435f9b;
    --mat-tab-header-active-hover-indicator-color: #435f9b
}

.mat-mdc-tab-group.mat-accent,
.mat-mdc-tab-nav-bar.mat-accent {
    --mdc-tab-indicator-active-indicator-color: #a38d5b;
    --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, .5);
    --mat-tab-header-pagination-icon-color: #fff;
    --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-active-label-text-color: #a38d5b;
    --mat-tab-header-active-ripple-color: #a38d5b;
    --mat-tab-header-inactive-ripple-color: #a38d5b;
    --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-active-focus-label-text-color: #a38d5b;
    --mat-tab-header-active-hover-label-text-color: #a38d5b;
    --mat-tab-header-active-focus-indicator-color: #a38d5b;
    --mat-tab-header-active-hover-indicator-color: #a38d5b
}

.mat-mdc-tab-group.mat-warn,
.mat-mdc-tab-nav-bar.mat-warn {
    --mdc-tab-indicator-active-indicator-color: #f44336;
    --mat-tab-header-disabled-ripple-color: rgba(255, 255, 255, .5);
    --mat-tab-header-pagination-icon-color: #fff;
    --mat-tab-header-inactive-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-active-label-text-color: #f44336;
    --mat-tab-header-active-ripple-color: #f44336;
    --mat-tab-header-inactive-ripple-color: #f44336;
    --mat-tab-header-inactive-focus-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-inactive-hover-label-text-color: rgba(255, 255, 255, .6);
    --mat-tab-header-active-focus-label-text-color: #f44336;
    --mat-tab-header-active-hover-label-text-color: #f44336;
    --mat-tab-header-active-focus-indicator-color: #f44336;
    --mat-tab-header-active-hover-indicator-color: #f44336
}

.mat-mdc-tab-group.mat-background-primary,
.mat-mdc-tab-nav-bar.mat-background-primary {
    --mat-tab-header-with-background-background-color: #435f9b;
    --mat-tab-header-with-background-foreground-color: white
}

.mat-mdc-tab-group.mat-background-accent,
.mat-mdc-tab-nav-bar.mat-background-accent {
    --mat-tab-header-with-background-background-color: #a38d5b;
    --mat-tab-header-with-background-foreground-color: white
}

.mat-mdc-tab-group.mat-background-warn,
.mat-mdc-tab-nav-bar.mat-background-warn {
    --mat-tab-header-with-background-background-color: #f44336;
    --mat-tab-header-with-background-foreground-color: white
}

.mat-mdc-tab-header {
    --mdc-secondary-navigation-tab-container-height: 48px
}

html {
    --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-icon-color: #a38d5b;
    --mdc-checkbox-selected-hover-icon-color: #a38d5b;
    --mdc-checkbox-selected-icon-color: #a38d5b;
    --mdc-checkbox-selected-pressed-icon-color: #a38d5b;
    --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
    --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
    --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-selected-focus-state-layer-color: #a38d5b;
    --mdc-checkbox-selected-hover-state-layer-color: #a38d5b;
    --mdc-checkbox-selected-pressed-state-layer-color: #a38d5b;
    --mdc-checkbox-unselected-focus-state-layer-color: white;
    --mdc-checkbox-unselected-hover-state-layer-color: white;
    --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-checkbox.mat-primary {
    --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-icon-color: #435f9b;
    --mdc-checkbox-selected-hover-icon-color: #435f9b;
    --mdc-checkbox-selected-icon-color: #435f9b;
    --mdc-checkbox-selected-pressed-icon-color: #435f9b;
    --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
    --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
    --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-selected-focus-state-layer-color: #435f9b;
    --mdc-checkbox-selected-hover-state-layer-color: #435f9b;
    --mdc-checkbox-selected-pressed-state-layer-color: #435f9b;
    --mdc-checkbox-unselected-focus-state-layer-color: white;
    --mdc-checkbox-unselected-hover-state-layer-color: white;
    --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-checkbox.mat-warn {
    --mdc-checkbox-disabled-selected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-disabled-unselected-icon-color: rgba(255, 255, 255, .38);
    --mdc-checkbox-selected-checkmark-color: #fff;
    --mdc-checkbox-selected-focus-icon-color: #f44336;
    --mdc-checkbox-selected-hover-icon-color: #f44336;
    --mdc-checkbox-selected-icon-color: #f44336;
    --mdc-checkbox-selected-pressed-icon-color: #f44336;
    --mdc-checkbox-unselected-focus-icon-color: #eeeeee;
    --mdc-checkbox-unselected-hover-icon-color: #eeeeee;
    --mdc-checkbox-unselected-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-unselected-pressed-icon-color: rgba(255, 255, 255, .54);
    --mdc-checkbox-selected-focus-state-layer-color: #f44336;
    --mdc-checkbox-selected-hover-state-layer-color: #f44336;
    --mdc-checkbox-selected-pressed-state-layer-color: #f44336;
    --mdc-checkbox-unselected-focus-state-layer-color: white;
    --mdc-checkbox-unselected-hover-state-layer-color: white;
    --mdc-checkbox-unselected-pressed-state-layer-color: white
}

.mat-mdc-checkbox .mdc-form-field {
    color: var(--mdc-theme-text-primary-on-background, white)
}

.mat-mdc-checkbox.mat-mdc-checkbox-disabled label {
    color: #ffffff80
}

html {
    --mdc-checkbox-state-layer-size: 40px
}

.mat-mdc-button.mat-unthemed {
    --mdc-text-button-label-text-color: #fff
}

.mat-mdc-button.mat-primary {
    --mdc-text-button-label-text-color: #435f9b
}

.mat-mdc-button.mat-accent {
    --mdc-text-button-label-text-color: #a38d5b
}

.mat-mdc-button.mat-warn {
    --mdc-text-button-label-text-color: #f44336
}

.mat-mdc-button[disabled][disabled] {
    --mdc-text-button-disabled-label-text-color: rgba(255, 255, 255, .5);
    --mdc-text-button-label-text-color: rgba(255, 255, 255, .5)
}

.mat-mdc-unelevated-button.mat-unthemed {
    --mdc-filled-button-container-color: #424242;
    --mdc-filled-button-label-text-color: #fff
}

.mat-mdc-unelevated-button.mat-primary {
    --mdc-filled-button-container-color: #435f9b;
    --mdc-filled-button-label-text-color: #fff
}

.mat-mdc-unelevated-button.mat-accent {
    --mdc-filled-button-container-color: #a38d5b;
    --mdc-filled-button-label-text-color: #fff
}

.mat-mdc-unelevated-button.mat-warn {
    --mdc-filled-button-container-color: #f44336;
    --mdc-filled-button-label-text-color: #fff
}

.mat-mdc-unelevated-button[disabled][disabled] {
    --mdc-filled-button-disabled-container-color: rgba(255, 255, 255, .12);
    --mdc-filled-button-disabled-label-text-color: rgba(255, 255, 255, .5);
    --mdc-filled-button-container-color: rgba(255, 255, 255, .12);
    --mdc-filled-button-label-text-color: rgba(255, 255, 255, .5)
}

.mat-mdc-raised-button.mat-unthemed {
    --mdc-protected-button-container-color: #424242;
    --mdc-protected-button-label-text-color: #fff
}

.mat-mdc-raised-button.mat-primary {
    --mdc-protected-button-container-color: #435f9b;
    --mdc-protected-button-label-text-color: #fff
}

.mat-mdc-raised-button.mat-accent {
    --mdc-protected-button-container-color: #a38d5b;
    --mdc-protected-button-label-text-color: #fff
}

.mat-mdc-raised-button.mat-warn {
    --mdc-protected-button-container-color: #f44336;
    --mdc-protected-button-label-text-color: #fff
}

.mat-mdc-raised-button[disabled][disabled] {
    --mdc-protected-button-disabled-container-color: rgba(255, 255, 255, .12);
    --mdc-protected-button-disabled-label-text-color: rgba(255, 255, 255, .5);
    --mdc-protected-button-container-color: rgba(255, 255, 255, .12);
    --mdc-protected-button-label-text-color: rgba(255, 255, 255, .5);
    --mdc-protected-button-container-elevation: 0
}

.mat-mdc-outlined-button {
    --mdc-outlined-button-outline-color: rgba(255, 255, 255, .12)
}

.mat-mdc-outlined-button.mat-unthemed {
    --mdc-outlined-button-label-text-color: #fff
}

.mat-mdc-outlined-button.mat-primary {
    --mdc-outlined-button-label-text-color: #435f9b
}

.mat-mdc-outlined-button.mat-accent {
    --mdc-outlined-button-label-text-color: #a38d5b
}

.mat-mdc-outlined-button.mat-warn {
    --mdc-outlined-button-label-text-color: #f44336
}

.mat-mdc-outlined-button[disabled][disabled] {
    --mdc-outlined-button-label-text-color: rgba(255, 255, 255, .5);
    --mdc-outlined-button-disabled-label-text-color: rgba(255, 255, 255, .5);
    --mdc-outlined-button-outline-color: rgba(255, 255, 255, .12);
    --mdc-outlined-button-disabled-outline-color: rgba(255, 255, 255, .12)
}

.mat-mdc-button,
.mat-mdc-outlined-button {
    --mat-mdc-button-persistent-ripple-color: #fff;
    --mat-mdc-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-button:hover .mat-mdc-button-persistent-ripple:before,
.mat-mdc-outlined-button:hover .mat-mdc-button-persistent-ripple:before {
    opacity: .08
}

.mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-button:active .mat-mdc-button-persistent-ripple:before,
.mat-mdc-outlined-button:active .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-button.mat-primary,
.mat-mdc-outlined-button.mat-primary {
    --mat-mdc-button-persistent-ripple-color: #435f9b;
    --mat-mdc-button-ripple-color: rgba(67, 95, 155, .1)
}

.mat-mdc-button.mat-accent,
.mat-mdc-outlined-button.mat-accent {
    --mat-mdc-button-persistent-ripple-color: #a38d5b;
    --mat-mdc-button-ripple-color: rgba(163, 141, 91, .1)
}

.mat-mdc-button.mat-warn,
.mat-mdc-outlined-button.mat-warn {
    --mat-mdc-button-persistent-ripple-color: #f44336;
    --mat-mdc-button-ripple-color: rgba(244, 67, 54, .1)
}

.mat-mdc-raised-button,
.mat-mdc-unelevated-button {
    --mat-mdc-button-persistent-ripple-color: #fff;
    --mat-mdc-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-raised-button:hover .mat-mdc-button-persistent-ripple:before,
.mat-mdc-unelevated-button:hover .mat-mdc-button-persistent-ripple:before {
    opacity: .08
}

.mat-mdc-raised-button.cdk-program-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-raised-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-unelevated-button.cdk-program-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-unelevated-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-raised-button:active .mat-mdc-button-persistent-ripple:before,
.mat-mdc-unelevated-button:active .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-raised-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.mat-accent,
.mat-mdc-unelevated-button.mat-accent,
.mat-mdc-raised-button.mat-warn,
.mat-mdc-unelevated-button.mat-warn {
    --mat-mdc-button-persistent-ripple-color: #fff;
    --mat-mdc-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-button.mat-mdc-button-base,
.mat-mdc-raised-button.mat-mdc-button-base,
.mat-mdc-unelevated-button.mat-mdc-button-base,
.mat-mdc-outlined-button.mat-mdc-button-base {
    height: 36px
}

.mat-mdc-icon-button {
    --mat-mdc-button-persistent-ripple-color: #000;
    --mat-mdc-button-ripple-color: rgba(0, 0, 0, .1);
    --mdc-icon-button-icon-color: inherit;
    --mat-mdc-button-persistent-ripple-color: #fff;
    --mat-mdc-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple:before {
    opacity: .08
}

.mat-mdc-icon-button.cdk-program-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-icon-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-icon-button:active .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-icon-button.mat-primary {
    --mat-mdc-button-persistent-ripple-color: #6200ee;
    --mat-mdc-button-ripple-color: rgba(98, 0, 238, .1)
}

.mat-mdc-icon-button.mat-accent {
    --mat-mdc-button-persistent-ripple-color: #018786;
    --mat-mdc-button-ripple-color: rgba(1, 135, 134, .1)
}

.mat-mdc-icon-button.mat-warn {
    --mat-mdc-button-persistent-ripple-color: #b00020;
    --mat-mdc-button-ripple-color: rgba(176, 0, 32, .1)
}

.mat-mdc-icon-button.mat-primary {
    --mdc-icon-button-icon-color: #435f9b;
    --mat-mdc-button-persistent-ripple-color: #435f9b;
    --mat-mdc-button-ripple-color: rgba(67, 95, 155, .1)
}

.mat-mdc-icon-button.mat-accent {
    --mdc-icon-button-icon-color: #a38d5b;
    --mat-mdc-button-persistent-ripple-color: #a38d5b;
    --mat-mdc-button-ripple-color: rgba(163, 141, 91, .1)
}

.mat-mdc-icon-button.mat-warn {
    --mdc-icon-button-icon-color: #f44336;
    --mat-mdc-button-persistent-ripple-color: #f44336;
    --mat-mdc-button-ripple-color: rgba(244, 67, 54, .1)
}

.mat-mdc-icon-button[disabled][disabled] {
    --mdc-icon-button-icon-color: rgba(255, 255, 255, .5);
    --mdc-icon-button-disabled-icon-color: rgba(255, 255, 255, .5)
}

.mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 48px;
    width: var(--mdc-icon-button-state-layer-size);
    height: var(--mdc-icon-button-state-layer-size);
    padding: 12px
}

.mat-mdc-fab,
.mat-mdc-mini-fab {
    --mat-mdc-button-persistent-ripple-color: #fff;
    --mat-mdc-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-fab:hover .mat-mdc-button-persistent-ripple:before,
.mat-mdc-mini-fab:hover .mat-mdc-button-persistent-ripple:before {
    opacity: .08
}

.mat-mdc-fab.cdk-program-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-fab.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-mini-fab.cdk-program-focused .mat-mdc-button-persistent-ripple:before,
.mat-mdc-mini-fab.cdk-keyboard-focused .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-fab:active .mat-mdc-button-persistent-ripple:before,
.mat-mdc-mini-fab:active .mat-mdc-button-persistent-ripple:before {
    opacity: .24
}

.mat-mdc-fab.mat-primary,
.mat-mdc-mini-fab.mat-primary,
.mat-mdc-fab.mat-accent,
.mat-mdc-mini-fab.mat-accent,
.mat-mdc-fab.mat-warn,
.mat-mdc-mini-fab.mat-warn {
    --mat-mdc-button-persistent-ripple-color: #fff;
    --mat-mdc-button-ripple-color: rgba(255, 255, 255, .1)
}

.mat-mdc-fab.mat-unthemed,
.mat-mdc-mini-fab.mat-unthemed {
    --mdc-fab-container-color: #424242;
    --mdc-fab-icon-color: #fff;
    --mat-mdc-fab-color: #fff
}

.mat-mdc-fab.mat-primary,
.mat-mdc-mini-fab.mat-primary {
    --mdc-fab-container-color: #435f9b;
    --mdc-fab-icon-color: #fff;
    --mat-mdc-fab-color: #fff
}

.mat-mdc-fab.mat-accent,
.mat-mdc-mini-fab.mat-accent {
    --mdc-fab-container-color: #a38d5b;
    --mdc-fab-icon-color: #fff;
    --mat-mdc-fab-color: #fff
}

.mat-mdc-fab.mat-warn,
.mat-mdc-mini-fab.mat-warn {
    --mdc-fab-container-color: #f44336;
    --mdc-fab-icon-color: #fff;
    --mat-mdc-fab-color: #fff
}

.mat-mdc-fab[disabled][disabled],
.mat-mdc-mini-fab[disabled][disabled] {
    --mdc-fab-container-color: rgba(255, 255, 255, .12);
    --mdc-fab-icon-color: rgba(255, 255, 255, .5);
    --mat-mdc-fab-color: rgba(255, 255, 255, .5)
}

.mat-mdc-snack-bar-container {
    --mdc-snackbar-container-color: #d9d9d9;
    --mdc-snackbar-supporting-text-color: rgba(66, 66, 66, .87);
    --mat-snack-bar-button-color: rgba(0, 0, 0, .87)
}

.mdc-data-table {
    background-color: var(--mdc-theme-surface, #424242);
    border-color: #ffffff1f
}

.mdc-data-table__row {
    background-color: inherit
}

.mdc-data-table__header-cell {
    background-color: var(--mdc-theme-surface, #424242)
}

.mdc-data-table__row--selected {
    background-color: #435f9b0a
}

.mdc-data-table__pagination-rows-per-page-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__leading,
.mdc-data-table__pagination-rows-per-page-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__notch,
.mdc-data-table__pagination-rows-per-page-select--outlined:not(.mdc-select--disabled) .mdc-notched-outline__trailing {
    border-color: #ffffff1f
}

.mdc-data-table__cell,
.mdc-data-table__header-cell {
    border-bottom-color: #ffffff1f
}

.mdc-data-table__pagination {
    border-top-color: #ffffff1f
}

.mdc-data-table__row:not(.mdc-data-table__row--selected):hover {
    background-color: #ffffff0a
}

.mdc-data-table__header-cell,
.mdc-data-table__pagination-total,
.mdc-data-table__pagination-rows-per-page-label,
.mdc-data-table__cell {
    color: #ffffffde
}

.mat-mdc-table {
    background: #424242
}

.mat-mdc-table .mdc-data-table__row {
    height: 52px
}

.mat-mdc-table .mdc-data-table__pagination {
    min-height: 52px
}

.mat-mdc-table .mdc-data-table__header-row {
    height: 56px
}

.mat-mdc-progress-spinner {
    --mdc-circular-progress-active-indicator-color: #435f9b
}

.mat-mdc-progress-spinner.mat-accent {
    --mdc-circular-progress-active-indicator-color: #a38d5b
}

.mat-mdc-progress-spinner.mat-warn {
    --mdc-circular-progress-active-indicator-color: #f44336
}

.mat-badge {
    position: relative
}

.mat-badge.mat-badge {
    overflow: visible
}

.mat-badge-hidden .mat-badge-content {
    display: none
}

.mat-badge-content {
    position: absolute;
    text-align: center;
    display: inline-block;
    border-radius: 50%;
    transition: transform .2s ease-in-out;
    transform: scale(.6);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    pointer-events: none
}

.ng-animate-disabled .mat-badge-content,
.mat-badge-content._mat-animation-noopable {
    transition: none
}

.mat-badge-content.mat-badge-active {
    transform: none
}

.mat-badge-small .mat-badge-content {
    width: 16px;
    height: 16px;
    line-height: 16px
}

.mat-badge-small.mat-badge-above .mat-badge-content {
    top: -8px
}

.mat-badge-small.mat-badge-below .mat-badge-content {
    bottom: -8px
}

.mat-badge-small.mat-badge-before .mat-badge-content {
    left: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {
    left: auto;
    right: -16px
}

.mat-badge-small.mat-badge-after .mat-badge-content {
    right: -16px
}

[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {
    right: auto;
    left: -16px
}

.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -8px
}

.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -8px
}

[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -8px
}

.mat-badge-medium .mat-badge-content {
    width: 22px;
    height: 22px;
    line-height: 22px
}

.mat-badge-medium.mat-badge-above .mat-badge-content {
    top: -11px
}

.mat-badge-medium.mat-badge-below .mat-badge-content {
    bottom: -11px
}

.mat-badge-medium.mat-badge-before .mat-badge-content {
    left: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {
    left: auto;
    right: -22px
}

.mat-badge-medium.mat-badge-after .mat-badge-content {
    right: -22px
}

[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {
    right: auto;
    left: -22px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -11px
}

.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -11px
}

[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -11px
}

.mat-badge-large .mat-badge-content {
    width: 28px;
    height: 28px;
    line-height: 28px
}

.mat-badge-large.mat-badge-above .mat-badge-content {
    top: -14px
}

.mat-badge-large.mat-badge-below .mat-badge-content {
    bottom: -14px
}

.mat-badge-large.mat-badge-before .mat-badge-content {
    left: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {
    left: auto;
    right: -28px
}

.mat-badge-large.mat-badge-after .mat-badge-content {
    right: -28px
}

[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {
    right: auto;
    left: -28px
}

.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
    left: auto;
    right: -14px
}

.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: -14px
}

[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
    right: auto;
    left: -14px
}

.mat-badge-content {
    color: #fff;
    background: #435f9b
}

.cdk-high-contrast-active .mat-badge-content {
    outline: solid 1px;
    border-radius: 0
}

.mat-badge-accent .mat-badge-content {
    background: #a38d5b;
    color: #fff
}

.mat-badge-warn .mat-badge-content {
    color: #fff;
    background: #f44336
}

.mat-badge-disabled .mat-badge-content {
    background: #6e6e6e;
    color: #ffffff80
}

.mat-bottom-sheet-container {
    box-shadow: 0 8px 10px -5px #0003, 0 16px 24px 2px #00000024, 0 6px 30px 5px #0000001f;
    background: #424242;
    color: #fff
}

.mat-button-toggle-standalone:not([class*=mat-elevation-z]),
.mat-button-toggle-group:not([class*=mat-elevation-z]) {
    box-shadow: 0 3px 1px -2px #0003, 0 2px 2px #00000024, 0 1px 5px #0000001f
}

.mat-button-toggle-standalone.mat-button-toggle-appearance-standard:not([class*=mat-elevation-z]),
.mat-button-toggle-group-appearance-standard:not([class*=mat-elevation-z]) {
    box-shadow: none
}

.mat-button-toggle {
    color: #ffffff80
}

.mat-button-toggle .mat-button-toggle-focus-overlay {
    background-color: #ffffff1f
}

.mat-button-toggle-appearance-standard {
    color: #fff;
    background: #424242
}

.mat-button-toggle-appearance-standard .mat-button-toggle-focus-overlay {
    background-color: #fff
}

.mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle {
    border-left: solid 1px #595959
}

[dir=rtl] .mat-button-toggle-group-appearance-standard .mat-button-toggle+.mat-button-toggle {
    border-left: none;
    border-right: solid 1px #595959
}

.mat-button-toggle-group-appearance-standard.mat-button-toggle-vertical .mat-button-toggle+.mat-button-toggle {
    border-left: none;
    border-right: none;
    border-top: solid 1px #595959
}

.mat-button-toggle-checked {
    background-color: #212121;
    color: #ffffffb3
}

.mat-button-toggle-checked.mat-button-toggle-appearance-standard {
    color: #fff
}

.mat-button-toggle-disabled {
    color: #ffffff4d;
    background-color: #000
}

.mat-button-toggle-disabled.mat-button-toggle-appearance-standard {
    background: #424242
}

.mat-button-toggle-disabled.mat-button-toggle-checked {
    background-color: #424242
}

.mat-button-toggle-standalone.mat-button-toggle-appearance-standard,
.mat-button-toggle-group-appearance-standard {
    border: solid 1px #595959
}

.mat-button-toggle-appearance-standard .mat-button-toggle-label-content {
    line-height: 48px
}

.mat-calendar-arrow {
    fill: #fff
}

.mat-datepicker-toggle,
.mat-datepicker-content .mat-calendar-next-button,
.mat-datepicker-content .mat-calendar-previous-button {
    color: #fff
}

.mat-calendar-table-header-divider:after {
    background: rgba(255, 255, 255, .12)
}

.mat-calendar-table-header,
.mat-calendar-body-label {
    color: #ffffffb3
}

.mat-calendar-body-cell-content,
.mat-date-range-input-separator {
    color: #fff;
    border-color: transparent
}

.mat-calendar-body-disabled>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    color: #ffffff80
}

.mat-form-field-disabled .mat-date-range-input-separator {
    color: #ffffff80
}

.mat-calendar-body-in-preview {
    color: #ffffff3d
}

.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    border-color: #ffffff80
}

.mat-calendar-body-disabled>.mat-calendar-body-today:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    border-color: #ffffff4d
}

.mat-calendar-body-in-range:before {
    background: rgba(67, 95, 155, .2)
}

.mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range:before {
    background: rgba(249, 171, 0, .2)
}

.mat-calendar-body-comparison-bridge-start:before,
[dir=rtl] .mat-calendar-body-comparison-bridge-end:before {
    background: linear-gradient(to right, rgba(67, 95, 155, .2) 50%, rgba(249, 171, 0, .2) 50%)
}

.mat-calendar-body-comparison-bridge-end:before,
[dir=rtl] .mat-calendar-body-comparison-bridge-start:before {
    background: linear-gradient(to left, rgba(67, 95, 155, .2) 50%, rgba(249, 171, 0, .2) 50%)
}

.mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,
.mat-calendar-body-in-comparison-range.mat-calendar-body-in-range:after {
    background: #a8dab5
}

.mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-calendar-body-in-comparison-range>.mat-calendar-body-selected {
    background: #46a35e
}

.mat-calendar-body-selected {
    background-color: #435f9b;
    color: #fff
}

.mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: #435f9b66
}

.mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: #435f9b4d
}

@media (hover: hover) {
    .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
        background-color: #435f9b4d
    }
}

.mat-datepicker-content {
    box-shadow: 0 2px 4px -1px #0003, 0 4px 5px #00000024, 0 1px 10px #0000001f;
    background-color: #424242;
    color: #fff
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-range:before {
    background: rgba(163, 141, 91, .2)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical,
.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range:before {
    background: rgba(249, 171, 0, .2)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-start:before,
.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-end:before {
    background: linear-gradient(to right, rgba(163, 141, 91, .2) 50%, rgba(249, 171, 0, .2) 50%)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-bridge-end:before,
.mat-datepicker-content.mat-accent [dir=rtl] .mat-calendar-body-comparison-bridge-start:before {
    background: linear-gradient(to left, rgba(163, 141, 91, .2) 50%, rgba(249, 171, 0, .2) 50%)
}

.mat-datepicker-content.mat-accent .mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,
.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range:after {
    background: #a8dab5
}

.mat-datepicker-content.mat-accent .mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-datepicker-content.mat-accent .mat-calendar-body-in-comparison-range>.mat-calendar-body-selected {
    background: #46a35e
}

.mat-datepicker-content.mat-accent .mat-calendar-body-selected {
    background-color: #a38d5b;
    color: #fff
}

.mat-datepicker-content.mat-accent .mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: #a38d5b66
}

.mat-datepicker-content.mat-accent .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content.mat-accent .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.mat-datepicker-content.mat-accent .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: #a38d5b4d
}

@media (hover: hover) {
    .mat-datepicker-content.mat-accent .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
        background-color: #a38d5b4d
    }
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-range:before {
    background: rgba(244, 67, 54, .2)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical,
.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range:before {
    background: rgba(249, 171, 0, .2)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-start:before,
.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-end:before {
    background: linear-gradient(to right, rgba(244, 67, 54, .2) 50%, rgba(249, 171, 0, .2) 50%)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-bridge-end:before,
.mat-datepicker-content.mat-warn [dir=rtl] .mat-calendar-body-comparison-bridge-start:before {
    background: linear-gradient(to left, rgba(244, 67, 54, .2) 50%, rgba(249, 171, 0, .2) 50%)
}

.mat-datepicker-content.mat-warn .mat-calendar-body-in-range>.mat-calendar-body-comparison-identical,
.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range.mat-calendar-body-in-range:after {
    background: #a8dab5
}

.mat-datepicker-content.mat-warn .mat-calendar-body-comparison-identical.mat-calendar-body-selected,
.mat-datepicker-content.mat-warn .mat-calendar-body-in-comparison-range>.mat-calendar-body-selected {
    background: #46a35e
}

.mat-datepicker-content.mat-warn .mat-calendar-body-selected {
    background-color: #f44336;
    color: #fff
}

.mat-datepicker-content.mat-warn .mat-calendar-body-disabled>.mat-calendar-body-selected {
    background-color: #f4433666
}

.mat-datepicker-content.mat-warn .mat-calendar-body-today.mat-calendar-body-selected {
    box-shadow: inset 0 0 0 1px #fff
}

.mat-datepicker-content.mat-warn .cdk-keyboard-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical),
.mat-datepicker-content.mat-warn .cdk-program-focused .mat-calendar-body-active>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
    background-color: #f443364d
}

@media (hover: hover) {
    .mat-datepicker-content.mat-warn .mat-calendar-body-cell:not(.mat-calendar-body-disabled):hover>.mat-calendar-body-cell-content:not(.mat-calendar-body-selected):not(.mat-calendar-body-comparison-identical) {
        background-color: #f443364d
    }
}

.mat-datepicker-content-touch {
    box-shadow: 0 11px 15px -7px #0003, 0 24px 38px 3px #00000024, 0 9px 46px 8px #0000001f
}

.mat-datepicker-toggle-active {
    color: #435f9b
}

.mat-datepicker-toggle-active.mat-accent {
    color: #a38d5b
}

.mat-datepicker-toggle-active.mat-warn {
    color: #f44336
}

.mat-date-range-input-inner[disabled] {
    color: #ffffff80
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 40px;
    width: var(--mdc-icon-button-state-layer-size);
    height: var(--mdc-icon-button-state-layer-size);
    padding: 8px
}

.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target {
    display: none
}

.mat-divider {
    border-top-color: #ffffff1f
}

.mat-divider-vertical {
    border-right-color: #ffffff1f
}

html {
    --mat-expansion-container-background-color: #424242;
    --mat-expansion-container-text-color: white;
    --mat-expansion-actions-divider-color: rgba(255, 255, 255, .12);
    --mat-expansion-header-hover-state-layer-color: rgba(255, 255, 255, .04);
    --mat-expansion-header-focus-state-layer-color: rgba(255, 255, 255, .04);
    --mat-expansion-header-disabled-state-text-color: rgba(255, 255, 255, .3);
    --mat-expansion-header-text-color: white;
    --mat-expansion-header-description-color: rgba(255, 255, 255, .7);
    --mat-expansion-header-indicator-color: rgba(255, 255, 255, .7)
}

html {
    --mat-expansion-header-collapsed-state-height: 48px;
    --mat-expansion-header-expanded-state-height: 64px
}

.mat-icon.mat-primary {
    color: #435f9b
}

.mat-icon.mat-accent {
    color: #a38d5b
}

.mat-icon.mat-warn {
    color: #f44336
}

.mat-drawer-container {
    background-color: #303030;
    color: #fff
}

.mat-drawer {
    background-color: #424242;
    color: #fff
}

.mat-drawer.mat-drawer-push {
    background-color: #424242
}

.mat-drawer:not(.mat-drawer-side) {
    box-shadow: 0 8px 10px -5px #0003, 0 16px 24px 2px #00000024, 0 6px 30px 5px #0000001f
}

.mat-drawer-side {
    border-right: solid 1px rgba(255, 255, 255, .12)
}

.mat-drawer-side.mat-drawer-end,
[dir=rtl] .mat-drawer-side {
    border-left: solid 1px rgba(255, 255, 255, .12);
    border-right: none
}

[dir=rtl] .mat-drawer-side.mat-drawer-end {
    border-left: none;
    border-right: solid 1px rgba(255, 255, 255, .12)
}

.mat-drawer-backdrop.mat-drawer-shown {
    background-color: #bdbdbd99
}

html {
    --mat-stepper-header-icon-foreground-color: white;
    --mat-stepper-header-selected-state-icon-background-color: #435f9b;
    --mat-stepper-header-selected-state-icon-foreground-color: white;
    --mat-stepper-header-done-state-icon-background-color: #435f9b;
    --mat-stepper-header-done-state-icon-foreground-color: white;
    --mat-stepper-header-edit-state-icon-background-color: #435f9b;
    --mat-stepper-header-edit-state-icon-foreground-color: white;
    --mat-stepper-container-color: #424242;
    --mat-stepper-line-color: rgba(255, 255, 255, .12);
    --mat-stepper-header-hover-state-layer-color: rgba(255, 255, 255, .04);
    --mat-stepper-header-focus-state-layer-color: rgba(255, 255, 255, .04);
    --mat-stepper-header-label-text-color: rgba(255, 255, 255, .7);
    --mat-stepper-header-optional-label-text-color: rgba(255, 255, 255, .7);
    --mat-stepper-header-selected-state-label-text-color: white;
    --mat-stepper-header-error-state-label-text-color: #f44336;
    --mat-stepper-header-icon-background-color: rgba(255, 255, 255, .7);
    --mat-stepper-header-error-state-icon-foreground-color: #f44336;
    --mat-stepper-header-error-state-icon-background-color: transparent
}

html .mat-step-header.mat-accent {
    --mat-stepper-header-icon-foreground-color: white;
    --mat-stepper-header-selected-state-icon-background-color: #a38d5b;
    --mat-stepper-header-selected-state-icon-foreground-color: white;
    --mat-stepper-header-done-state-icon-background-color: #a38d5b;
    --mat-stepper-header-done-state-icon-foreground-color: white;
    --mat-stepper-header-edit-state-icon-background-color: #a38d5b;
    --mat-stepper-header-edit-state-icon-foreground-color: white
}

html .mat-step-header.mat-warn {
    --mat-stepper-header-icon-foreground-color: white;
    --mat-stepper-header-selected-state-icon-background-color: #f44336;
    --mat-stepper-header-selected-state-icon-foreground-color: white;
    --mat-stepper-header-done-state-icon-background-color: #f44336;
    --mat-stepper-header-done-state-icon-foreground-color: white;
    --mat-stepper-header-edit-state-icon-background-color: #f44336;
    --mat-stepper-header-edit-state-icon-foreground-color: white
}

html {
    --mat-stepper-header-height: 72px
}

.mat-sort-header-arrow {
    color: #c6c6c6
}

.mat-toolbar {
    background: #212121;
    color: #fff
}

.mat-toolbar.mat-primary {
    background: #435f9b;
    color: #fff
}

.mat-toolbar.mat-accent {
    background: #a38d5b;
    color: #fff
}

.mat-toolbar.mat-warn {
    background: #f44336;
    color: #fff
}

.mat-toolbar .mat-form-field-underline,
.mat-toolbar .mat-form-field-ripple,
.mat-toolbar .mat-focused .mat-form-field-ripple {
    background-color: currentColor
}

.mat-toolbar .mat-form-field-label,
.mat-toolbar .mat-focused .mat-form-field-label,
.mat-toolbar .mat-select-value,
.mat-toolbar .mat-select-arrow,
.mat-toolbar .mat-form-field.mat-focused .mat-select-arrow {
    color: inherit
}

.mat-toolbar .mat-input-element {
    caret-color: currentColor
}

.mat-toolbar-multiple-rows {
    min-height: 64px
}

.mat-toolbar-row,
.mat-toolbar-single-row {
    height: 64px
}

@media (max-width: 599px) {
    .mat-toolbar-multiple-rows {
        min-height: 56px
    }
    .mat-toolbar-row,
    .mat-toolbar-single-row {
        height: 56px
    }
}

.mat-tree {
    background: #424242
}

.mat-tree-node,
.mat-nested-tree-node {
    color: #fff
}

.mat-tree-node {
    min-height: 48px
}

.datepicker-toggle {
    color: #222
}

header.cricket,
header.member,
header.normal,
header.player,
header.normal-logo-left {
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

header.slot,
header.editor,
header.vip {
    box-shadow: none
}

header .logo {
    width: 10.6666666667vw
}

.login-biometric-content .button {
    margin: 2.1333333333vw
}

.member-content .button {
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw
}

.menu-box {
    margin: 2.1333333333vw;
    padding: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.input-group input {
    border-radius: 1.3333333333vw
}

.input-group.upload-file .input-wrap:before {
    border-radius: 1.3333333333vw
}

.under-maintain .maintain-mask,
.select-group select,
.btn-select {
    border-radius: 1.3333333333vw
}

.option-group.select-bar {
    padding: 2.1333333333vw 0 2.1333333333vw 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.option-group select {
    padding: 0 6.4vw 0 2.1333333333vw
}

.option-wrap:after {
    right: 2.1333333333vw
}

.upload-wrap .upload-group,
.file-box,
.crypto-group-2 .crypto-input input {
    border-radius: 1.3333333333vw
}

.tab-btn-bar:before {
    border-radius: 1.3333333333vw
}

.tab-btn-bar .line:after {
    border-radius: 1.3333333333vw
}

.tab-btn-page {
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.btn-box {
    margin: 2.1333333333vw 0 0
}

.switch-mode,
.inner-block {
    grid-gap: 2.1333333333vw;
    margin: 2.1333333333vw
}

.switch-mode li,
.inner-block li {
    border-radius: 1.3333333333vw
}

.switch-mode li.active:after,
.inner-block li.active:after {
    border-radius: 1.0666666667vw
}

.switch-mode li.active:before,
.inner-block li.active:before {
    border-radius: 1.0666666667vw
}

.loader-box {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
}

.loader-box video {
    width: 21.3333333333vw
}

.menu-first .beforelogin,
.menu-first .afterlogin {
    border-radius: 0 0 1.3333333333vw 1.3333333333vw
}

.menu-first .menu-item li,
.menu-first .menu-item .item-box,
.menu-first .menu-item .contact-box,
.menu-first .menu-item .home-box {
    border-radius: 1.3333333333vw
}

.menu-header {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.member-menu-content {
    padding: 2.1333333333vw
}

.member-menu-box {
    margin: 0 0 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.member-menu-box .title {
    padding: 0 3.2vw
}

.member-menu-box ul {
    padding: 0 0 2.1333333333vw
}

.member-menu-box ul li {
    padding: 1.0666666667vw
}

.member-menu-box:nth-child(1) {
    background: #2b2922;
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.member-menu-box:nth-child(1) .title {
    padding: 0 2.1333333333vw
}

.menu-second ul.active {
    border-radius: 1.3333333333vw
}

.cricket .betting {
    width: 100%;
    margin-top: 2.1333333333vw
}

.nextevent .title {
    margin: 2.1333333333vw
}

.nextevent .slider .slick-slide {
    margin: 0 2.1333333333vw
}

.login-info-box {
    margin: 1.0666666667vw 2.1333333333vw 0
}

.pop-account-lock,
.pop-reset-password {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.pop-confirm-password,
.pop-get-vcode {
    padding-top: 9.6vw;
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.register-content .button:not(.btn-vcode) {
    margin: 2.1333333333vw
}

.pop-biometric-success,
.register-fail-wrap,
.register-success-wrap {
    border-radius: 1.3333333333vw
}

.pop-other-account {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.pop-transfer .menu-box {
    padding: 2.1333333333vw
}

.pop-wrap3 {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.pop-wrap3 .inner-wrap .inner-left .inner-box:nth-child(1) {
    padding: 8.5333333333vw 2.1333333333vw 2.1333333333vw
}

.pop-wrap3 .inner-wrap .inner-right .inner-box:nth-child(2) {
    padding: 8.5333333333vw 2.1333333333vw 2.1333333333vw
}

.pop-wrap3 .title-wrap .title {
    margin-bottom: 2.1333333333vw
}

.lvup-select-wrap {
    grid-gap: 2.1333333333vw
}

.lvup-select-wrap .event {
    border-radius: 1.3333333333vw
}

.reel-box {
    margin-bottom: 2.1333333333vw
}

.lvup-event-detail {
    margin-bottom: 2.1333333333vw;
    padding: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.category {
    padding-bottom: 2.1333333333vw
}

.category ul {
    grid-gap: 1.0666666667vw;
    margin: 2.1333333333vw 0
}

.category ul li {
    border-radius: 1.3333333333vw
}

.category ul li.active:after {
    border-radius: 1.3333333333vw
}

.category ul li.active:before {
    border-bottom-right-radius: 1.3333333333vw
}

.search-box .my-favorites,
.search-box .recently-played,
.game-list li button {
    border-radius: 1.3333333333vw
}

.recently-played-wrap .select-date,
.my-favorites-wrap .select-date,
.pop-casino-details-filter,
.pop-slot-details-filter,
.pop-casino-details-filter .pop-btn-group,
.pop-slot-details-filter .pop-btn-group {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.fixed-tab .promotion .promotion-main {
    padding: 0 2.1333333333vw
}

.tips-info {
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.member-menu-point {
    margin: 0 2.1333333333vw 2.1333333333vw
}

.bonus-wallet-wrap {
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.bonus-wallet {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.bonus-card-down {
    border-radius: 0 0 1.3333333333vw 1.3333333333vw
}

.no-result {
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.vip-area-group .right-box .goto-myvip {
    border-radius: 1.3333333333vw
}

.player-vip-box {
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.card-top {
    border-radius: 1.3333333333vw
}

.card-bottom {
    border-radius: 0 0 1.3333333333vw 1.3333333333vw
}

.vip-content .button {
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.acquired-content {
    padding: 0 2.1333333333vw
}

.cash-points,
.form-vip-history {
    border-radius: 1.3333333333vw
}

.player-vip-detailed-menu {
    padding: 2.1333333333vw 2.1333333333vw 0
}

.player-vip-detailed-menu .btn {
    border-radius: 1.3333333333vw 50% 1.3333333333vw 1.3333333333vw
}

.player-vip-detailed-box .inner-box {
    width: calc(100% - 4.2666666667vw);
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.player-vip-detailed-box .title {
    margin: 2.1333333333vw 2.1333333333vw 0
}

.head-lv-name {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.lv-info-wrap {
    padding: 2.1333333333vw
}

.lv-info-wrap .status.accept2 {
    border-radius: 1.3333333333vw
}

.terms {
    padding: 2.1333333333vw
}

.list-title {
    margin: 2.1333333333vw 2.1333333333vw 0;
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.list-content {
    margin: 0 2.1333333333vw;
    padding: 1.0666666667vw;
    border-radius: 0 0 1.3333333333vw 1.3333333333vw
}

.list-content li {
    padding: 0
}

.vip-list {
    margin-top: 0
}

.time-zone {
    border-radius: .5333333333vw
}

.accordion-wrap {
    margin: 2.1333333333vw 2.1333333333vw 0;
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.accordion-wrap.error {
    box-shadow: none
}

.playerform-content .button {
    margin: 2.1333333333vw
}

.drop-down-menu {
    border-radius: 1.3333333333vw
}

.drop-down-menu .phone-code-list {
    left: 4.5333333333vw;
    width: 29.6vw
}

.drop-down-menu-btn {
    border-radius: 1.0666666667vw 1.0666666667vw 0 0
}

.accordion-card-wrap.select-bar,
.option-group.select-bar,
.player-deposit-wrap .player-deposit-step1 .menu-box {
    margin: 2.1333333333vw
}

.player-top .credit-card {
    margin: 2.1333333333vw 0 1.0666666667vw
}

.credit-card {
    width: calc(100% - 4.2666666667vw)
}

.main-wallet-info {
    padding: 2.1333333333vw
}

.accordion-card-wrap {
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.pop-otp-verification {
    padding-top: 8.5333333333vw;
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.ac-list .btn-revert {
    border-radius: 1.3333333333vw
}

.ac-list .btn-revert:after {
    border-radius: 1.0666666667vw
}

.info-list li:first-child {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.info-list li:last-child {
    border-radius: 0 0 1.3333333333vw 1.3333333333vw
}

.style-bank li input[type=checkbox]+label,
.style-bank li input[type=radio]+label {
    border-radius: 1.3333333333vw
}

.style-bank li input[type=checkbox].active+label:before,
.style-bank li input[type=radio].active+label:before {
    border-bottom-right-radius: 1.3333333333vw
}

.transaction-record-list .list-title {
    margin: 0 2.1333333333vw
}

.list-group .date-title {
    margin: 0 2.1333333333vw;
    padding: 2.1333333333vw
}

.list-group:last-child {
    margin-bottom: 2.1333333333vw
}

.list-group:last-child .list-content {
    border-radius: 0 0 1.3333333333vw 1.3333333333vw
}

.transaction-record-list .no-result,
.betting-record-list .no-result,
.betting-record-inner-list .no-result {
    margin-top: 0
}

.betting-record-list .list-content {
    border-radius: 0
}

.list-bar {
    margin: 0 2.1333333333vw
}

.list-bar .date-title {
    margin: 0
}

.timeline-block .content {
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.details-box {
    border-radius: 1.3333333333vw
}

.pop-transaction-records-details .member-content .button {
    width: auto
}

.list-arrow {
    margin-right: 2.1333333333vw
}

.pop-transaction-records-details {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.pop-transaction-records-details .bank-name {
    border-radius: 1.0666666667vw
}

.inbox-list .inner-box {
    margin-top: 2.1333333333vw
}

.inbox-list .list-group:first-child .date-title {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.inbox-list .list-content {
    border-radius: 0
}

.inbox-list .message-item {
    padding: 0 2.1333333333vw
}

.inbox-list .message-item:last-child {
    border-bottom: 0
}

.inbox-list .content-wrap {
    margin-left: 2.1333333333vw;
    padding: 2.1333333333vw 0
}

.recommend-friends-box {
    margin: 2.1333333333vw;
    padding: 2.1333333333vw;
    border-radius: 1.3333333333vw
}

.recommend-friends-box.deco {
    margin-top: 30.066667vw
}

.date-bar {
    padding: 2.1333333333vw;
    margin-top: 13.066667vw;
}

.code-box .code,
.code-box .btn-share,
.condition-box .item .text {
    border-radius: 1.3333333333vw
}

.ticket-wrap {
    padding: 2.1333333333vw
}

.ticket+.ticket {
    margin-top: 2.1333333333vw
}

.ticket .ticket-inner-left {
    padding: 2.1333333333vw
}

.ticket .ticket-inner {
    border-radius: 1.3333333333vw
}

.article-content {
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.article-detail .table {
    border-radius: 1.3333333333vw
}

.article-detail .table-title:first-child {
    border-radius: 1.3333333333vw 0 0
}

.article-detail .table-title:last-child {
    border-radius: 0 1.3333333333vw 0 0
}

.currency-selector-wrap {
    width: 26.6666666667vw;
    top: 4.2666666667vw;
    right: 4.2666666667vw;
    background-color: #f2f2f2;
    box-shadow: 0 1.6vw 3.2vw #0003;
    border-radius: 1.3333333333vw;
    display: flex;
    flex-flow: row nowrap;
    padding: 0 2.1333333333vw
}

.currency-selector-wrap.input-wrap {
    position: fixed
}

.currency-selector-wrap .currency-area-code {
    width: 100%
}

.currency-selector-wrap .btn-select {
    position: relative;
    background-color: #f2f2f2;
    padding: 0;
    line-height: normal;
    box-shadow: none
}

.currency-selector-wrap .btn-select:after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 5.3333333333vw;
    right: 0;
    border-width: 1.3333333333vw;
    border-style: solid;
    border-color: #7e919e transparent transparent
}

.currency-selector-wrap li {
    cursor: pointer;
    width: 100%;
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding: 2.1333333333vw 0;
    list-style: none
}

.currency-selector-wrap li img {
    width: 8vw;
    margin-right: 3.2vw;
    border-radius: 50%;
    box-shadow: 0 0 .5333333333vw #000c
}

.currency-selector-wrap li span {
    font-size: 3.2vw;
    color: #0e2749cc;
    margin-left: 0
}

.nav-category {
    padding: 0 1.0666666667vw 1.0666666667vw
}

.nav-category:before {
    background: transparent
}

.nav-category.nav-auto .slick-list .btn {
    min-width: 21.3333333333vw
}

.nav-category .btn {
    margin-top: 1.0666666667vw;
    padding: 1.0666666667vw 0;
    transition: background .05s ease-out
}

.nav-category .btn span {
    display: block;
    width: 6.4vw;
    height: 6.4vw;
    margin: 0 auto;
    transition: all .3s;
    border-radius: 10.6666666667vw;
    opacity: 1;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%
}

.nav-category .btn.slick-current {
    border-radius: 1.3333333333vw;
    background: #054ea1
}

.nav-category .btn p {
    margin: 1.0666666667vw 0;
    font-size: 2.6666666667vw;
    font-weight: 700
}

.nav-category.active {
    height: 8.5333333333vw !important;
    animation: slide-out-top .2s cubic-bezier(.55, .085, .68, .53) both
}

.nav-category.active .btn {
    margin-top: 1.3333333333vw
}

.nav-category.active .btn span {
    height: 0
}

.nav-category.active .btn p {
    display: block
}

@keyframes slide-out-top {
    0% {
        height: 6.4vw;
        opacity: 0
    }
    to {
        height: 8.5333333333vw;
        opacity: 1
    }
}

.card1 li,
.card2 li {
    border-radius: 1.3333333333vw;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.content-title {
    padding: 1.0666666667vw
}

.content-main .slick-slide {
    margin: 0 2.1333333333vw
}

.maintenance-row {
    display: grid;
    position: relative;
    grid-gap: 2.1333333333vw;
    grid-template-columns: calc(100% - 8vw - 2.1333333333vw) 6vw;
    margin: 2.1333333333vw
}

.maintenance-row h6 {
    display: flex;
    align-items: center;
    height: 8vw;
    background: #ffffff;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d;
    padding: 1.0666666667vw 2.1333333333vw;
    border-radius: 1.3333333333vw;
    font-size: 3.2vw;
    line-height: 8vw
}

.maintenance-row h6 i {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    margin-right: 2.1333333333vw;
    background: #f4b600;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.maintenance-row h6 span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #222;
    max-width: calc(100% - 6.4vw)
}

.maintenance-row .info {
    position: relative;
    justify-content: flex-end;
    width: 8vw;
    height: 8vw;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

.maintenance-row .info:before {
    content: "?";
    display: block;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    color: #7e919e;
    font-weight: 700;
    line-height: 8vw;
    text-align: center
}

.maintenance-row .tooltips {
    display: none;
    position: absolute;
    z-index: 3;
    top: 10.1333333333vw;
    right: 0;
    width: auto;
    max-width: 100%;
    padding: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    background: rgba(5, 78, 161, .8);
    color: #fff;
    font-size: 3.2vw;
    line-height: 4.2666666667vw
}

.maintenance-row .tooltips:before {
    content: "";
    display: block;
    position: absolute;
    top: -1.6vw;
    right: 2.4vw;
    border-width: 0 1.6vw 1.6vw;
    border-style: solid;
    border-color: transparent transparent rgba(5, 78, 161, .8)
}

.maintenance-row .tooltips.active {
    display: block
}

.back-to-cricket-row {
    display: grid;
    grid-template-columns: 6.4vw calc(100% - 6.4vw);
    align-items: center;
    width: calc(100% - 4.2666666667vw);
    height: 8vw;
    margin: 2.1333333333vw;
    padding: 1.0666666667vw 2.1333333333vw;
    border-radius: 1.3333333333vw;
    background: #ffffff;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d;
    color: #fff
}

.back-to-cricket-row span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    align-items: center;
    color: #222;
    font-size: 3.2vw
}

.back-to-cricket-row .tap-circle {
    position: relative
}

.back-to-cricket-row .tap {
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    background: #f4b600;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 100%;
    mask-size: 100%
}

.back-to-cricket-row .circle-wave-1 {
    position: absolute;
    top: 0;
    left: .4vw;
    width: 1.6vw;
    height: 1.6vw;
    transform-origin: 45% 35%;
    border: .2666666667vw solid #f4b600;
    border-radius: 50%;
    opacity: .25
}

.back-to-cricket-row .circle-wave-2 {
    position: absolute;
    top: -.5333333333vw;
    left: -.1333333333vw;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    transform-origin: 45% 35%;
    border: .2666666667vw solid #f4b600;
    border-radius: 50%;
    opacity: .4
}

.sport-loader {
    position: relative
}

.sport-loader svg {
    /* position: absolute; */
    width: 100%;
    /* height: 100vh */
}

.sport-loader circle {
    fill: #ffb80c
}

.sport-loader .target {
    position: absolute;
    animation: target-ball 3s infinite ease-in-out
}

.sport-loader .ball-wrap {
    /* position: absolute;
    width: 100%;
    height: 100vh */
}

.sport-loader .ball-wrap li {
    display: inline-block;
    position: absolute;
    top: calc(50% - 2.1333333333vw);
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    transform-origin: center;
    animation: rotate-in-center infinite 2s cubic-bezier(.25, .46, .45, .94) both;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover
}

.sport-loader .basketball {
    animation-delay: .3s;
    left: calc(40% - 2.1333333333vw)
}

.sport-loader .soccer {
    animation-delay: .6s;
    left: calc(50% - 2.1333333333vw)
}

.sport-loader .cricket {
    animation-delay: .9s;
    left: calc(60% - 2.1333333333vw)
}

@keyframes tap {
    0% {
        transform: rotateX(0)
    }
    10% {
        transform: rotateX(15deg) rotateY(-10deg)
    }
    15% {
        transform: rotateX(25deg) rotateY(-10deg)
    }
    30% {
        transform: rotateX(0)
    }
}

@keyframes tap-circle {
    0% {
        transform: scale(0);
        opacity: 0
    }
    25% {
        transform: scale(1.05);
        opacity: .5
    }
    30% {
        transform: scale(1);
        opacity: .4
    }
}

@keyframes dot {
    50% {
        transform: translate(400%)
    }
}

@keyframes target-ball {
    0% {
        transform: translate(-15%)
    }
    50% {
        transform: translate(15%)
    }
    to {
        transform: translate(-15%)
    }
}

@keyframes rotate-in-center {
    0% {
        transform: rotate(-360deg)
    }
    to {
        transform: rotate(0)
    }
}

.cricket-total-wrap {
    display: grid;
    grid-template-columns: 40% auto;
    align-items: center;
    margin: 2.1333333333vw;
    border-radius: 1.3333333333vw;
    background: #ffb80c;
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d;
    color: #222;
    font-size: 3.7333333333vw
}

.cricket-total-wrap .title {
    padding: 2.1333333333vw;
    border-radius: 1.3333333333vw 0 0;
    background: #3b392f;
    color: #fff
}

.cricket-total-wrap .platform {
    padding: 2.1333333333vw;
    border-radius: 0 0 0 1.3333333333vw;
    background: #3b392f;
    color: #ffb80c
}

.cricket-total-wrap .platform span {
    margin-left: .5333333333vw
}

.cricket-total-wrap .profit,
.cricket-total-wrap .turnover {
    display: inline-flex;
    padding: 2.1333333333vw;
    text-align: left
}

.cricket-total-wrap .profit span,
.cricket-total-wrap .turnover span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 21.3333333333vw
}

.cricket-total-wrap .profit-amount,
.cricket-total-wrap .turnover-amount {
    margin-left: auto;
    font-weight: 700
}

.cricket-total-wrap .profit {
    position: relative
}

.cricket-total-wrap .profit:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -.2666666667vw;
    width: 95%;
    height: .2666666667vw;
    background: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw 2.6666666667vw
}

.cricket-total-wrap .negative {
    color: #ff5757
}

.cricket-list-content .accordion-wrap {
    margin: 2.1333333333vw
}

.accordion-wrap .accordion-header {
    width: 100%;
    padding: 2.1333333333vw
}

.accordion-wrap .accordion-header.show .arrow {
    transform: rotate(180deg);
    transform-origin: center
}

.accordion-wrap .accordion-collapse {
    display: block;
    width: 100%;
    padding: 1.0666666667vw
}

.accordion-wrap .main-info {
    display: grid;
    grid-template-columns: 10.6666666667vw calc(100% - 20.2666666667vw) 5.3333333333vw;
    align-items: center;
    margin-bottom: 2.1333333333vw;
    column-gap: 2.1333333333vw
}

.accordion-wrap .main-info img {
    grid-row: 1/span 2;
    width: 10.6666666667vw
}

.accordion-wrap .title {
    display: inline-flex;
    align-items: center;
    overflow: hidden
}

.accordion-wrap .category-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #ffb80c;
    font-size: 4.2666666667vw;
    font-weight: 700
}

.accordion-wrap .parlay-type {
    height: 4.8vw;
    margin-left: 2.1333333333vw;
    padding: .5333333333vw 1.0666666667vw;
    border-radius: 1.0666666667vw;
    background: #f2f2f2;
    color: #000;
    font-size: 3.2vw;
    line-height: 3.7333333333vw
}

.accordion-wrap .arrow {
    position: relative;
    width: 8vw;
    height: 8vw;
    transition: all .3s;
    background: unset;
    justify-self: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 30%;
    mask-size: 30%;
    background: #fff
}

.accordion-wrap .settled-date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-column: 2/span 2;
    color: #fff;
    font-size: 3.2vw
}

.accordion-wrap .settled-date span {
    color: #fff
}

.accordion-wrap .betting-info {
    display: grid;
    position: relative;
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(2, 1fr);
    margin-bottom: 2.1333333333vw
}

.accordion-wrap .betting-info:before {
    content: "";
    display: block;
    position: absolute;
    top: calc(50% - .4vw);
    width: 100%;
    height: .2666666667vw;
    background: linear-gradient(to right, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-x;
    background-size: 2.6666666667vw 2.6666666667vw
}

.accordion-wrap .betting-info:after {
    content: "";
    display: block;
    position: absolute;
    left: calc(50% - .4vw);
    width: .2666666667vw;
    height: 100%;
    background: linear-gradient(to bottom, rgba(14, 39, 73, .5) 0%, rgba(14, 39, 73, .5) 10%, transparent 10%);
    background-repeat: repeat-y;
    background-size: 2.6666666667vw 2.6666666667vw
}

.accordion-wrap .avg-odds,
.accordion-wrap .turnover,
.accordion-wrap .stake,
.accordion-wrap .profit {
    display: grid;
    grid-template-columns: 4.8vw calc(100% - 4.8vw);
    padding: 1.0666666667vw;
    column-gap: 2.1333333333vw
}

.accordion-wrap .avg-odds span,
.accordion-wrap .turnover span,
.accordion-wrap .stake span,
.accordion-wrap .profit span {
    grid-column: 2/span 1
}

.accordion-wrap .avg-odds .item-icon,
.accordion-wrap .turnover .item-icon,
.accordion-wrap .stake .item-icon,
.accordion-wrap .profit .item-icon {
    position: relative;
    width: 4.8vw;
    height: 4.8vw
}

.accordion-wrap .avg-odds .icon {
    fill: #054ea1
}

.accordion-wrap .avg-odds .circle,
.accordion-wrap .turnover .icon {
    fill: #f4b600
}

.accordion-wrap .turnover .circle {
    fill: #054ea1
}

.accordion-wrap .stake .icon {
    fill: #f4b600
}

.accordion-wrap .stake .circle {
    fill: #054ea1
}

.accordion-wrap .profit {
    text-align: left
}

.accordion-wrap .profit .icon {
    fill: #054ea1
}

.accordion-wrap .profit .circle {
    fill: #f4b600
}

.accordion-wrap strong {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #fff
}

.accordion-wrap span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #b8bfc3;
    font-size: 3.2vw
}

.accordion-wrap .bet-bid,
.accordion-wrap .bet-placed {
    grid-column: 1/span 2;
    color: #b8bfc3;
    font-size: 3.2vw
}

.accordion-wrap .bet-bid {
    float: left;
    text-align: left
}

.accordion-wrap .bet-placed {
    float: right;
    text-align: right
}

.parlay-wrap {
    display: grid;
    position: relative;
    grid-template-columns: 6.4vw calc(100% - 6.4vw);
    grid-template-rows: 6.4vw auto auto;
    padding: 1.0666666667vw;
    overflow: hidden;
    border-radius: 1.0666666667vw;
    background: #2b2922
}

.parlay-wrap+.parlay-wrap {
    margin-top: 1.0666666667vw
}

.parlay-wrap:after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    right: 0;
    border-width: 0 9.6vw 9.6vw 0;
    border-style: solid
}

.parlay-wrap .event-type {
    align-self: center;
    width: 4.2666666667vw;
    height: 4.2666666667vw;
    fill: #ffb80c;
    justify-self: center
}

.parlay-wrap .event-name {
    display: inline-flex;
    grid-column: 2/span 8;
    align-self: center;
    overflow: hidden;
    color: #222;
    font-size: 3.2vw;
    font-weight: 700
}

.parlay-wrap .event-name span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    max-width: calc((100% - 4.2666666667vw - 9.6vw) / 2);
    color: #ffb80c;
    font-weight: 400
}

.parlay-wrap .event-name i {
    margin: 0 1.0666666667vw
}

.parlay-wrap .market {
    grid-column: 2/span 9;
    color: #fff;
    font-size: 3.7333333333vw;
    line-height: 4.2666666667vw
}

.parlay-wrap .parlay-status {
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    width: 9.6vw;
    height: 9.6vw
}

.parlay-wrap.win:after {
    border-color: transparent #09ac6b transparent transparent
}

.parlay-wrap.win .parlay-status {
    fill: #fff
}

.parlay-wrap.lose:after {
    border-color: transparent #ff5757 transparent transparent
}

.parlay-wrap.lose .parlay-status {
    fill: #fff
}

.parlay-wrap.cancel:after {
    border-color: transparent #D5D9DC transparent transparent
}

.parlay-wrap.cancel .parlay-status {
    fill: #222
}

.parlay-wrap.voided:after {
    border-color: transparent #feb032 transparent transparent
}

.parlay-wrap.voided .parlay-status {
    fill: #222
}

.parlay-wrap .details {
    display: grid;
    grid-column: 1/span 2;
    grid-gap: .5333333333vw;
    grid-template-columns: repeat(2, 1fr);
    margin-top: 2.1333333333vw
}

.parlay-wrap .details .select {
    grid-column: 1/span 2;
    padding: 2.1333333333vw;
    border-radius: 1.0666666667vw;
    background: #3b392f;
    color: #ffb80c;
    font-size: 4.2666666667vw
}

.parlay-wrap .details .bet-type {
    display: flex;
    justify-content: space-between;
    align-items: center;
    grid-column: 1/span 2
}

.parlay-wrap .details .odds-req,
.parlay-wrap .details .odds-matched,
.parlay-wrap .details .bet-type {
    padding: 2.1333333333vw;
    border-radius: 1.0666666667vw;
    background: #3b392f;
    color: #d9eaf3;
    font-size: 3.2vw
}

.parlay-wrap .details .odds-req strong,
.parlay-wrap .details .odds-matched strong,
.parlay-wrap .details .bet-type strong {
    display: block;
    color: #fff;
    font-size: 4.2666666667vw;
    text-align: right
}

:root {
    --date-tab-translateX: 0%
}

a {
    text-decoration: none
}

.rainy-wrap,
.no-rainy-wrap,
.weather-wrap,
.streaming-wrap,
.record-wrap,
.rule-wrap,
.rain-bet-wrap {
    position: relative;
    background: #281A70;
    font-family: Jost, sans-serif
}

.rain-bet-wrap .select-session .count-down-timer,
.weather-info li .value,
.no-rainy-block .countdown-day .rain-info-box h3,
.no-rainy-block .no-rainy-board .countdown-timer h4,
.bet-block .video-box .count-down-timer {
    font-family: Inconsolata, monospace;
    font-weight: 900
}

.rain-btn {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 14.9333333333vw;
    padding: 0 4.2666666667vw;
    border-radius: 2.6666666667vw;
    color: #fff;
    font-size: 5.3333333333vw;
    font-weight: 500;
    line-height: 14.9333333333vw;
    text-align: center;
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(131, 76, 0, .4)
}

.rain-btn.primary {
    background: #FFD259
}

.rain-btn.secondary {
    opacity: .7;
    color: #fff;
    font-size: 4.2666666667vw
}

.rain-btn.disabled {
    opacity: .5;
    background: rgba(0, 0, 0, .3);
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(0, 0, 0, .1)
}

.rain-icon-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4.2666666667vw
}

.rain-title {
    display: inline-flex;
    align-items: center;
    margin: 4.2666666667vw 0;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 700
}

.rain-title:before {
    content: "";
    display: block;
    width: 1.0666666667vw;
    height: 3.7333333333vw;
    margin-right: 2.1333333333vw;
    border-radius: .5333333333vw;
    background: #FFD259
}

.frame-box {
    margin-top: 4.2666666667vw;
    border: .2666666667vw solid rgba(255, 255, 255, .1);
    border-radius: 5.3333333333vw;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.frame-box .frame-title {
    padding: 4.2666666667vw 6.4vw;
    border-bottom: .2666666667vw solid rgba(255, 255, 255, .1);
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: rgba(255, 255, 255, .05);
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500;
    text-align: left
}

.frame-box .frame-content {
    padding: 4.2666666667vw 6.4vw;
    opacity: .7;
    color: #fff
}

.frame-box .frame-content ul.disc {
    padding-left: 4.2666666667vw;
    list-style-type: disc
}

.frame-box .frame-content ul li {
    line-height: 1.5
}

.frame-box .frame-content ul li+li {
    margin-top: 4.2666666667vw
}

.normal-bg,
.rain-bet-wrap .number-keyboard li.active:after,
.rain-bet-wrap .number-keyboard li,
.rain-bet-wrap .quick-number li,
.pipe-block .pipe-content .tab-pane li,
.rainy-wrap .rain-odds li,
.rainy-wrap .select-date li {
    border: .2666666667vw solid rgba(255, 255, 255, .02);
    background: rgba(54, 50, 133, .8);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a;
    color: #fff
}

.normal-shadow-bg,
.rainy-wrap .odds-history-block .history-data,
.rainy-wrap .function-menu li .icon,
.weather-info li,
.rain-icon-btn {
    background: rgba(54, 50, 133, .8);
    box-shadow: 0 3.2vw 2.6666666667vw #281a7099, inset 0 .2666666667vw .5333333333vw #ffffff1a;
    color: #fff
}

.active-with-bg,
.pipe-block .pipe-content .tab-pane li.active,
.rainy-wrap .select-date li.active {
    position: relative;
    background: linear-gradient(60deg, #6D25F4, #FF9FA2);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.active-with-bg:after,
.pipe-block .pipe-content .tab-pane li.active:after,
.rainy-wrap .select-date li.active:after {
    content: "";
    position: absolute;
    top: .1333333333vw;
    left: .1333333333vw;
    width: calc(100% - .2666666667vw);
    height: calc(100% - .2666666667vw);
    border-radius: 4vw;
    background: linear-gradient(0deg, #452DA4 0%, #71528C 100%);
    background-size: 300% 300%
}

.active-with-check,
.rainy-wrap .rain-odds li.active {
    position: relative;
    background: linear-gradient(45deg, #FF9FA2 0%, #6D25F4 100%);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.active-with-check:before,
.rainy-wrap .rain-odds li.active:before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -.2666666667vw;
    bottom: -.2666666667vw;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-bottom-right-radius: 4.2666666667vw;
    background: url(/images/rain/h5/check.svg) no-repeat center
}

.active-with-check:after,
.rainy-wrap .rain-odds li.active:after {
    content: "";
    position: absolute;
    top: .1333333333vw;
    left: .1333333333vw;
    width: calc(100% - .2666666667vw);
    height: calc(100% - .2666666667vw);
    border-radius: 4vw;
    background: #343084
}

.bet-block {
    display: grid;
    position: relative;
    grid-gap: 4.2666666667vw;
    grid-template-columns: repeat(2, 1fr);
    margin: 6.4vw 4.2666666667vw;
    border-radius: 5.3333333333vw
}

.bet-block .bet-board {
    display: grid;
    position: relative;
    grid-template-columns: 29.3333333333vw auto;
    border-radius: 5.3333333333vw;
    box-shadow: 0 3.2vw 2.6666666667vw #281a701a, inset 0 .2666666667vw .8vw #ffffff80
}

.bet-block .bet-board h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 23.4666666667vw;
    height: 10.6666666667vw;
    padding-left: 4.2666666667vw;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 700;
    line-height: 10.6666666667vw
}

.bet-block .bet-board .bet {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    top: -.1333333333vw;
    right: -.1333333333vw;
    grid-column: 2/span 1;
    width: 24vw;
    height: 10.6666666667vw;
    padding-left: .5333333333vw;
    border-top-right-radius: 5.3333333333vw;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500;
    line-height: 10.6666666667vw;
    -webkit-mask: url(/images/rain/h5/mask-card.svg) no-repeat center;
    mask: url(/images/rain/h5/mask-card.svg) no-repeat center
}

.bet-block .bet-board .bet span {
    position: relative;
    left: 9.6vw
}

.bet-block .bet-board .icon-arrow-left {
    position: absolute;
    right: 0;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    transform: rotateY(180deg);
    background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/15%
}

.bet-block .bet-board .odds {
    display: flex;
    grid-column: 1/span 2;
    align-items: flex-end;
    justify-content: center;
    margin: 2.1333333333vw 0;
    color: #fff
}

.bet-block .bet-board .odds .value {
    font-size: 9.0666666667vw;
    font-weight: 700
}

.bet-block .bet-board .odds span {
    margin-bottom: 1.0666666667vw;
    margin-left: 2.1333333333vw;
    font-size: 3.2vw;
    font-weight: 500
}

.bet-block .bet-board .circle-chart {
    display: flex;
    position: relative;
    grid-column: 1/span 2;
    justify-content: center;
    padding: 2.1333333333vw 0
}

.bet-block .bet-board .circle-chart .circle-percentage {
    transform: rotate(-90deg);
    transform-origin: center;
    animation: circle-chart 1s reverse
}

.bet-block .bet-board .circle-chart .rain-ani {
    position: absolute;
    top: 8.5333333333vw;
    width: 16vw;
    height: 16vw
}

.bet-block .bet-board .circle-chart .rain-ani video {
    width: 16vw;
    height: 16vw
}

.bet-block .bet-board .circle-chart .proportion {
    display: flex;
    position: absolute;
    bottom: 11.7333333333vw;
    align-items: center;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.bet-block .bet-board .circle-chart .proportion:before {
    content: "";
    display: block;
    width: 4vw;
    height: 4vw;
    margin-right: 1.0666666667vw;
    background: #FFFFFF;
    -webkit-mask: url(/images/rain/h5/icon-people.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-people.svg) no-repeat center
}

.bet-block .bet-board .circle-chart .proportion:after {
    content: "%";
    display: block
}

.bet-block .bet-board.rain {
    background: radial-gradient(circle at 1.2% 1.2%, #00ECFF 0%, #6230D5 48%, #4E5CFF 80%, #00BBE6 140%, #FFFFFF 140%)
}

.bet-block .bet-board.rain .bet {
    background: #363285
}

.bet-block .bet-board.rain .bet:before {
    background: #363285
}

.bet-block .bet-board.no-rain {
    background: radial-gradient(circle at 2.1% 2.1%, #FF479F 0%, #FE7777 48%, #FF9467 80%, #FFC638 140%, #FFFFFF 140%)
}

.bet-block .bet-board.no-rain .bet {
    background: #FF5252
}

.bet-block .bet-board.no-rain .bet:before {
    background: #FF5252
}

.bet-block .video-box {
    display: flex;
    position: absolute;
    z-index: 1;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    width: 100%;
    height: 100%;
    border-radius: 5.3333333333vw;
    background: rgba(40, 26, 112, .85)
}

.bet-block .video-box .video {
    position: absolute;
    z-index: 2;
    width: 53.3333333333vw;
    height: 53.3333333333vw
}

.bet-block .video-box .status {
    position: absolute;
    z-index: 2;
    bottom: 14.9333333333vw;
    color: #fff;
    font-size: 4.8vw
}

.bet-block .video-box .count-down-timer {
    display: flex;
    position: absolute;
    z-index: 2;
    bottom: 8.5333333333vw;
    align-items: center;
    color: #ffd259;
    font-size: 5.3333333333vw;
    font-weight: 900;
    letter-spacing: .5333333333vw
}

.bet-block .video-box .count-down-timer h4 {
    width: 6.4vw;
    text-align: right
}

.bet-block .suspend {
    display: flex;
    position: absolute;
    z-index: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: calc(50% - 2.1333333333vw);
    height: 100%;
    border-radius: 5.3333333333vw;
    background: rgba(40, 26, 112, .85)
}

.bet-block .suspend .video {
    width: 40vw;
    height: 40vw
}

.bet-block .suspend .status {
    position: relative;
    bottom: 5.3333333333vw;
    color: #fff;
    font-size: 4.8vw
}

.bet-block .suspend.left {
    left: 0
}

.bet-block .suspend.right {
    right: 0
}

.ball-box {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden
}

.ball-box i {
    display: block;
    position: absolute;
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    animation-name: move-ball;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    border-radius: 50%;
    opacity: .7;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .6) 100%, #FFFFFF 100%)
}

.ball-box i:nth-child(1) {
    top: 37%;
    left: 57%;
    transform-origin: 8vw 0vh;
    animation-duration: 13s;
    animation-delay: -12.2s;
    box-shadow: 53.3333333333vw 0 19.8275606115vw #ffffff4d
}

.ball-box i:nth-child(2) {
    top: 36%;
    left: 59%;
    transform-origin: -8vw -19vh;
    animation-duration: 12.1s;
    animation-delay: -11.7s;
    box-shadow: 53.3333333333vw 0 16.6675677796vw #ffffff4d
}

.ball-box i:nth-child(3) {
    top: 74%;
    left: 1%;
    transform-origin: -7vw 10vh;
    animation-duration: 11.3s;
    animation-delay: -2.2s;
    box-shadow: 53.3333333333vw 0 19.2132529578vw #ffffff4d
}

.ball-box i:nth-child(4) {
    top: 93%;
    left: 64%;
    transform-origin: 17vw 12vh;
    animation-duration: 12.2s;
    animation-delay: -18.2s;
    box-shadow: -53.3333333333vw 0 12.5835006315vw #ffffff4d
}

.ball-box i:nth-child(5) {
    top: 78%;
    left: 100%;
    transform-origin: 13vw -5vh;
    animation-duration: 11.9s;
    animation-delay: -2.4s;
    box-shadow: -53.3333333333vw 0 16.4067208503vw #ffffff4d
}

.no-rainy-block {
    position: relative
}

.no-rainy-block .no-rainy-board {
    position: relative;
    width: calc(100% - 8.5333333333vw);
    margin: 8.5333333333vw 4.2666666667vw 4.2666666667vw;
    padding: 12.8vw 4.2666666667vw 4.2666666667vw;
    background: radial-gradient(circle at 1.2% 1.2%, #00A7D9 0%, #29E5DC 48%, #00E9DE 81%, #00ADD3 139%, #FFFFFF 139%);
    box-shadow: 0 3.2vw 2.6666666667vw #0000001a;
    clip-path: inset(0 round 5.3333333333vw)
}

.no-rainy-block .no-rainy-board .betting-rules {
    display: flex;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    align-items: center;
    justify-content: flex-start;
    height: 9.6vw;
    padding: 0 4.2666666667vw;
    background: #363285
}

.no-rainy-block .no-rainy-board .betting-rules:after {
    content: "";
    display: block;
    position: absolute;
    top: -.0533333333vw;
    right: -21.0666666667vw;
    width: 100%;
    height: 9.6vw;
    background: #363285;
    -webkit-mask: url(/images/rain/h5/mask-round.svg) no-repeat center;
    mask: url(/images/rain/h5/mask-round.svg) no-repeat center
}

.no-rainy-block .no-rainy-board .betting-rules .icon-info {
    width: 4vw;
    height: 4vw;
    margin-right: 2.1333333333vw;
    filter: drop-shadow(0 .5333333333vw .5333333333vw rgba(119, 46, 239, .9))
}

.no-rainy-block .no-rainy-board .betting-rules span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 18.1333333333vw;
    color: #ffffffb3;
    font-size: 3.2vw;
    line-height: 1.5
}

.no-rainy-block .no-rainy-board .countdown-timer {
    z-index: 1
}

.no-rainy-block .no-rainy-board .countdown-timer h3 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 4.2666666667vw;
    color: #fff;
    font-size: 5.3333333333vw;
    font-weight: 700;
    text-transform: uppercase
}

.no-rainy-block .no-rainy-board .countdown-timer h4 {
    display: inline-block;
    width: 6.9333333333vw;
    margin-right: 1.0666666667vw;
    color: #5867b3;
    font-size: 6.9333333333vw;
    text-align: right
}

.no-rainy-block .no-rainy-board .countdown-timer span {
    margin-right: 2.1333333333vw;
    color: #fff;
    font-size: 3.2vw;
    font-weight: 500;
    text-align: center;
    text-shadow: 0 .5333333333vw 1.0666666667vw #17AFBB
}

.no-rainy-block .no-rainy-board .countdown-timer p {
    margin-top: 4.2666666667vw;
    color: #fff;
    font-size: 3.7333333333vw
}

.no-rainy-block .countdown-day {
    position: absolute;
    z-index: 1;
    top: -4.2666666667vw;
    right: 8.5333333333vw
}

.no-rainy-block .countdown-day .card-box {
    width: 26.6666666667vw;
    height: 26.6666666667vw;
    -webkit-mask: url(/images/rain/h5/mask-count-card.svg) no-repeat center;
    mask: url(/images/rain/h5/mask-count-card.svg) no-repeat center
}

.no-rainy-block .countdown-day .card-box .top {
    width: 26.6666666667vw;
    height: 13.3333333333vw;
    border-top-left-radius: 5.3333333333vw;
    border-top-right-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #5972FF 0%, #7900E2 100%)
}

.no-rainy-block .countdown-day .card-box .bottom {
    width: 26.6666666667vw;
    height: 13.3333333333vw;
    border-bottom-left-radius: 5.3333333333vw;
    border-bottom-right-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #813CFF 0%, #FDBDC0 100%)
}

.no-rainy-block .countdown-day .rain-info-box {
    display: flex;
    position: absolute;
    top: 50%;
    left: 50%;
    flex-direction: column;
    transform: translate(-50%, -50%);
    opacity: .9;
    color: #fff;
    font-weight: 700;
    text-align: center;
    text-shadow: 0 .5333333333vw 1.3333333333vw #8E41E2
}

.no-rainy-block .countdown-day .rain-info-box h3 {
    margin-bottom: 1.0666666667vw;
    font-size: 13.8666666667vw
}

.no-rainy-block .countdown-day .rain-info-box span {
    font-size: 3.7333333333vw;
    text-transform: uppercase
}

.weather-map {
    position: relative
}

.weather-map:before {
    content: "";
    display: block;
    position: absolute;
    z-index: 1;
    top: -.2666666667vw;
    width: 100%;
    height: 8vw;
    background: linear-gradient(0deg, transparent 0%, #281A70 100%)
}

.weather-map:after {
    content: "";
    display: block;
    position: absolute;
    bottom: -.2666666667vw;
    width: 100%;
    height: 8vw;
    background: linear-gradient(180deg, transparent 0%, #281A70 100%)
}

.weather-map #windy {
    width: 100%;
    height: 64vw
}

.weather-map #windy #logo {
    top: -3.2vw;
    left: 10.6666666667vw;
    transform: scale(.5)
}

.weather-info {
    display: grid;
    grid-gap: 4.2666666667vw;
    grid-template-columns: repeat(2, 1fr);
    margin: 4.2666666667vw
}

.weather-info li {
    display: grid;
    grid-row-gap: 4.2666666667vw;
    grid-template-columns: auto 4.8vw;
    padding: 4.2666666667vw;
    border-radius: 5.3333333333vw
}

.weather-info li h3 {
    display: inline-flex;
    align-items: flex-end
}

.weather-info li h3,
.weather-info li span {
    font-size: 4.8vw;
    font-weight: 700
}

.weather-info li span {
    margin-left: 1.0666666667vw;
    font-size: 3.7333333333vw
}

.weather-info li h4 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-row: 2/span 1;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.weather-info li .icon {
    grid-column: 2/span 1;
    grid-row: 1/span 2;
    width: 4.8vw;
    height: 4.8vw
}

.weather-info .temperature .icon {
    background: #FFD259;
    -webkit-mask: url(/images/rain/h5/icon-temperature.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-temperature.svg) no-repeat center
}

.weather-info .rainfall .icon {
    background: #00B5FF;
    -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center
}

.weather-info .humidity .icon {
    background: #2AF1FF;
    -webkit-mask: url(/images/rain/h5/icon-humidity.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-humidity.svg) no-repeat center
}

.weather-info .pressure .icon {
    background: #82FF72;
    -webkit-mask: url(/images/rain/h5/icon-pressure.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-pressure.svg) no-repeat center
}

.weather-info .wind .icon {
    background: #FF74D2;
    -webkit-mask: url(/images/rain/h5/icon-winds.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-winds.svg) no-repeat center
}

.weather-info .wind-direction .icon {
    background: #FF5959;
    -webkit-mask: url(/images/rain/h5/icon-wind-direction.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-wind-direction.svg) no-repeat center
}

.rainy-wrap .function-menu {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 6.4vw 0
}

.rainy-wrap .function-menu li {
    display: flex;
    flex-direction: column;
    align-items: center
}

.rainy-wrap .function-menu li .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17.0666666667vw;
    height: 17.0666666667vw;
    border-radius: 4.2666666667vw
}

.rainy-wrap .function-menu li img {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    filter: drop-shadow(0 .5333333333vw .5333333333vw rgba(119, 46, 239, .9))
}

.rainy-wrap .function-menu li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 17.0666666667vw;
    margin-top: 1.0666666667vw;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500;
    line-height: 1.2
}

.rainy-wrap .odds-history-block {
    display: grid;
    grid-gap: 4.2666666667vw;
    grid-template-columns: 6.5fr 3.5fr;
    margin: 6.4vw 4.2666666667vw
}

.rainy-wrap .odds-history-block .title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 700
}

.rainy-wrap .odds-history-block .title:before {
    content: "";
    display: block;
    width: 1.0666666667vw;
    height: 3.7333333333vw;
    margin-right: 4.2666666667vw;
    border-radius: .5333333333vw;
    background: #FFD259
}

.rainy-wrap .odds-history-block .sub-title {
    opacity: .6;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500;
    line-height: 4.2666666667vw;
    text-align: right
}

.rainy-wrap .odds-history-block .history-data {
    grid-column: 1/span 2;
    padding: 4.2666666667vw;
    border-radius: 5.3333333333vw
}

.rainy-wrap .select-date {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow-x: scroll
}

.rainy-wrap .select-date li {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 17.0666666667vw;
    height: 25.6vw;
    margin: 0 1.0666666667vw;
    transition: all .3s;
    border-radius: 4.2666666667vw
}

.rainy-wrap .select-date li h5 {
    z-index: 1;
    padding: 1.0666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 700
}

.rainy-wrap .select-date li span,
.rainy-wrap .select-date li p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    max-width: 17.0666666667vw;
    padding: 1.0666666667vw;
    font-size: 3.2vw;
    font-weight: 500
}

.rainy-wrap .select-date li .icon {
    z-index: 1;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: 1.0666666667vw
}

.rainy-wrap .select-date li .rain {
    background: #00B5FF;
    -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center
}

.rainy-wrap .select-date li .no-rain {
    background: #FFD259;
    -webkit-mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-sun.svg) no-repeat center
}

.rainy-wrap .select-odds {
    display: flex
}

.rainy-wrap .select-odds .odds-box {
    flex: 1 0 0%;
    width: 100%;
    height: 100px
}

.rainy-wrap .select-odds .odds-box+.odds-box {
    margin-left: 2.1333333333vw
}

.rainy-wrap .select-odds .odds-box h5 {
    margin-bottom: 2.1333333333vw;
    color: #fff9;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.rainy-wrap .rain-odds {
    display: flex
}

.rainy-wrap .rain-odds li {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 3.2vw;
    border-radius: 4.2666666667vw
}

.rainy-wrap .rain-odds li+li {
    margin-left: 2.1333333333vw
}

.rainy-wrap .rain-odds li .point-style {
    z-index: 1;
    align-self: flex-end;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    border-radius: 50%
}

.rainy-wrap .rain-odds li .odd {
    z-index: 1;
    padding: 1.0666666667vw 0;
    font-size: 4.2666666667vw;
    font-weight: 700
}

.rainy-wrap .rain-odds li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    z-index: 1;
    max-width: 12vw;
    font-size: 3.2vw
}

.rainy-wrap .rain-odds.now .rain .point-style {
    background: #00B5FF
}

.rainy-wrap .rain-odds.now .rain .odd {
    color: #00b5ff
}

.rainy-wrap .rain-odds.now .no-rain .point-style {
    background: #FFD259
}

.rainy-wrap .rain-odds.now .no-rain .odd {
    color: #ffd259
}

.rainy-wrap .rain-odds.past .rain .point-style {
    background: #40D0CB
}

.rainy-wrap .rain-odds.past .rain .odd {
    color: #40d0cb
}

.rainy-wrap .rain-odds.past .no-rain .point-style {
    background: #FFB139
}

.rainy-wrap .rain-odds.past .no-rain .odd {
    color: #ffb139
}

.rainy-wrap .history-proportion li .date,
.rainy-wrap .history-proportion li .time {
    display: inline-block;
    color: #fff9;
    font-size: 3.7333333333vw
}

.rainy-wrap .history-proportion li+li {
    margin-top: 6.4vw
}

.rainy-wrap .history-proportion li .rain {
    color: #00b5ff
}

.rainy-wrap .history-proportion li .no-rain {
    color: #ffd259
}

.rainy-wrap .history-proportion .text-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 2.1333333333vw 0;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.rainy-wrap .history-proportion .text-wrap h5:last-child {
    text-align: right
}

.rainy-wrap .history-proportion .text-wrap span {
    padding-left: 2.1333333333vw
}

.rainy-wrap .history-proportion .text-wrap span:after {
    content: "%"
}

.rainy-wrap .history-proportion .proportion-wrap {
    display: flex
}

.rainy-wrap .history-proportion .proportion-wrap .line {
    height: 1.0666666667vw;
    border-radius: .5333333333vw
}

.rainy-wrap .history-proportion .proportion-wrap .line+.line {
    margin-left: 1.0666666667vw
}

.rainy-wrap .history-proportion .proportion-wrap .rain {
    background: #00B5FF
}

.rainy-wrap .history-proportion .proportion-wrap .no-rain {
    background: #FFD259
}

.select-session {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 4.2666666667vw
}

.select-session .rain-select-box {
    display: flex;
    align-items: center
}

.select-session .rain-select-box .session {
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-family: Jost, sans-serif;
    font-size: 5.3333333333vw;
    font-weight: 700
}

.select-session .rain-select-box .icon-dropdown {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    margin-left: 2.1333333333vw;
    background: #FFFFFF;
    -webkit-mask: url(/images/rain/h5/icon-dropdown.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-dropdown.svg) no-repeat center
}

.select-session .icon-refresh {
    width: 3.7333333333vw;
    height: 3.7333333333vw;
    filter: drop-shadow(0 .5333333333vw .5333333333vw rgba(119, 46, 239, .9))
}

.select-session .icon-refresh.active {
    animation: rotate-center 1s ease-in-out both
}

.state-wrap {
    display: block;
    width: 100%;
    padding: 2.6666666667vw 0
}

.state-wrap .state-chart {
    display: block;
    width: 100%;
    min-height: 74.6666666667vw
}

.time-block {
    display: grid;
    grid-template-columns: 21.3333333333vw auto 13.8666666667vw;
    padding: 4.2666666667vw
}

.time-block h3,
.time-block span {
    display: inline-block;
    color: #fff;
    font-size: 6.4vw;
    font-weight: 700
}

.time-block span {
    grid-column: 2/span 1
}

.time-block h6 {
    grid-column: 1/span 2;
    margin-top: 2.1333333333vw;
    color: #fff9;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.time-block .rain-icon-btn {
    grid-column: 3/span 1;
    grid-row: 1/span 2;
    width: 13.8666666667vw;
    height: 13.8666666667vw
}

.time-block .icon-refresh {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    filter: drop-shadow(0 .5333333333vw .5333333333vw rgba(119, 46, 239, .9))
}

.time-block .icon-refresh.active {
    animation: rotate-center 1s ease-in-out both
}

.video-block {
    background: #000000
}

.pipe-block {
    padding: 4.2666666667vw
}

.pipe-block .select-pipe {
    display: flex;
    position: relative;
    overflow-x: scroll;
    overflow-y: hidden
}

.pipe-block .select-pipe li {
    padding: 2.1333333333vw 4.2666666667vw;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 500
}

.pipe-block .select-pipe li.active {
    color: #ffd259
}

.pipe-block .pipe-content {
    display: flex;
    overflow-x: scroll
}

.pipe-block .pipe-content .tab-pane {
    display: none
}

.pipe-block .pipe-content .tab-pane.active,
.pipe-block .pipe-content .tab-pane ol {
    display: flex
}

.pipe-block .pipe-content .tab-pane li {
    display: flex;
    margin: 1.0666666667vw;
    padding: 4.2666666667vw 6.4vw;
    border-radius: 4.2666666667vw;
    font-size: 3.7333333333vw;
    font-weight: 500;
    white-space: nowrap
}

.pipe-block .pipe-content .tab-pane li span {
    z-index: 1
}

.streaming-bet .bet-board {
    grid-template-columns: 1fr 1fr
}

.streaming-bet .bet-board .odds {
    grid-column: 1/span 1;
    flex-direction: column;
    align-items: flex-start;
    margin: 0;
    margin-left: 4.2666666667vw
}

.streaming-bet .bet-board .odds .value {
    font-size: 6.9333333333vw
}

.streaming-bet .bet-board .odds span {
    margin: 1.0666666667vw 0 0
}

.streaming-bet .bet-board .rain-ani {
    grid-column: 2/span 1;
    width: 14.9333333333vw;
    height: 14.9333333333vw;
    margin-top: 12.8vw;
    margin-left: 3.2vw
}

.streaming-bet .bet-board .rain-ani video {
    width: 14.9333333333vw;
    height: 14.9333333333vw
}

.streaming-bet .proportion {
    display: flex;
    position: relative;
    align-items: center;
    padding-right: 4.2666666667vw;
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 500;
    justify-self: flex-end
}

.streaming-bet .proportion:before {
    content: "";
    display: block;
    width: 4vw;
    height: 4vw;
    margin-right: 1.0666666667vw;
    background: #FFFFFF;
    -webkit-mask: url(/images/rain/h5/icon-people.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-people.svg) no-repeat center
}

.streaming-bet .proportion:after {
    content: "%";
    display: block
}

.record-wrap {
    display: flex;
    align-items: center;
    justify-content: center
}

.rain-betting-record {
    padding: 4.2666666667vw 4.2666666667vw 10.6666666667vw
}

.rain-betting-record li {
    display: grid;
    grid-column-gap: 1.0666666667vw;
    grid-row-gap: 2.1333333333vw;
    grid-template-columns: 1.2fr repeat(4, 1fr);
    padding: 4.2666666667vw 0;
    border-bottom: .2666666667vw solid rgba(255, 255, 255, .2);
    color: #fff;
    font-size: 3.7333333333vw
}

.rain-betting-record li .betting {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 19.2vw;
    font-size: 4.2666666667vw;
    font-weight: 500
}

.rain-betting-record li .session {
    grid-column: 2/span 4;
    font-weight: 500
}

.rain-betting-record li .date {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-row: 2/span 1;
    max-width: 19.2vw;
    opacity: .7
}

.rain-betting-record li .time {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    grid-row: 3/span 1;
    max-width: 19.2vw;
    opacity: .7
}

.rain-betting-record li .stake,
.rain-betting-record li .odds,
.rain-betting-record li .rain,
.rain-betting-record li .no-rain {
    overflow: hidden
}

.rain-betting-record li .rain:before {
    content: "";
    display: inline-block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-right: 1.0666666667vw;
    border-radius: 50%;
    background: #00B5FF
}

.rain-betting-record li .no-rain:before {
    content: "";
    display: inline-block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-right: 1.0666666667vw;
    border-radius: 50%;
    background: #FFD259
}

.rain-betting-record li .rain-val.positive,
.rain-betting-record li .no-rain-val.positive {
    color: #02ff91
}

.rain-betting-record li .rain-val.negative,
.rain-betting-record li .no-rain-val.negative {
    color: #ff5959
}

.total-wrap {
    position: fixed;
    z-index: 1;
    bottom: -18.1333333333vw;
    width: 100%;
    transition: bottom .3s;
    color: #fff;
    font-family: Jost, sans-serif;
    font-size: 3.7333333333vw;
    font-weight: 500
}

.total-wrap .go-to-top {
    position: absolute;
    bottom: 21.3333333333vw
}

.total-wrap .top {
    width: 26.6666666667vw;
    height: 10.6666666667vw;
    padding: 0 4.2666666667vw;
    background: url(/images/rain/h5/shape-total-top.png) no-repeat center/110%;
    line-height: 10.6666666667vw
}

.total-wrap .top .icon-arrow {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 10.6666666667vw;
    width: 10.6666666667vw;
    height: 10.6666666667vw;
    transform: rotate(90deg);
    transition: transform .3s;
    background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/15%
}

.total-wrap .total-info {
    display: grid;
    position: relative;
    top: -.2666666667vw;
    grid-row-gap: 2.1333333333vw;
    grid-template-columns: repeat(4, 1fr);
    width: 100%;
    padding: 4.2666666667vw;
    border-top-right-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #4073E4 0%, #464AAF 15%, #322D80 40%, #322D80 100%)
}

.total-wrap .total-info .total-rain:before {
    content: "";
    display: inline-block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-right: 1.0666666667vw;
    border-radius: 50%;
    background: #00B5FF
}

.total-wrap .total-info .total-no-rain:before {
    content: "";
    display: inline-block;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    margin-right: 1.0666666667vw;
    border-radius: 50%;
    background: #FFD259
}

.total-wrap .total-info .total-rain-val.positive,
.total-wrap .total-info .total-no-rain-val.positive,
.total-wrap .total-info .total-exposure-val.positive {
    color: #02ff91
}

.total-wrap .total-info .total-rain-val.negative,
.total-wrap .total-info .total-no-rain-val.negative,
.total-wrap .total-info .total-exposure-val.negative {
    color: #ff5959
}

.total-wrap .total-info .total-exposure,
.total-wrap .total-info .total-exposure-val {
    color: #ffd259
}

.total-wrap.active {
    bottom: 0
}

.total-wrap.active .top .icon-arrow {
    transform: rotate(-90deg)
}

.record-no-block {
    margin-top: 25.6vw;
    padding: 0 4.2666666667vw 4.2666666667vw
}

.record-no-block video {
    width: 100%
}

.record-no-block h3 {
    margin: 8.5333333333vw 0;
    color: #fff;
    font-size: 5.3333333333vw;
    font-weight: 700;
    text-align: center
}

.record-no-block .rain-btn {
    margin-top: 17.0666666667vw
}

.rule-wrap {
    padding: 4.2666666667vw;
    color: #fff;
    font-family: Jost, sans-serif
}

.rule-wrap .ball-box i {
    width: 53.3333333333vw;
    height: 53.3333333333vw;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .05) 100%, #FFFFFF 100%)
}

.rule-wrap video {
    width: 100%
}

.rule-wrap .tips {
    font-size: 4vw;
    line-height: 1.5
}

.rule-wrap .rain-timetable {
    display: grid;
    grid-gap: 2.1333333333vw;
    grid-template-columns: 3fr 7fr;
    grid-template-rows: repeat(4, 14.9333333333vw);
    margin: 6.4vw 0
}

.rule-wrap .rain-timetable .title {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5.3333333333vw 0 0 5.3333333333vw;
    background: radial-gradient(circle at 1.2% 1.2%, #00ECFF 0%, #6230D5 50%, #4E5CFF 81%, #00BBE6 140%, #FFFFFF 140%);
    box-shadow: 0 3.2vw 2.6666666667vw #281a7021, inset 0 .2666666667vw .8vw #ffffff80
}

.rule-wrap .rain-timetable .detail {
    display: flex;
    align-items: center;
    justify-content: center;
    border: .2666666667vw solid rgba(255, 255, 255, .1);
    border-radius: 0 5.3333333333vw 5.3333333333vw 0;
    opacity: .7;
    background: rgba(255, 255, 255, .05);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.rule-wrap h3 {
    margin: 6.4vw 0;
    font-size: 5.3333333333vw;
    font-weight: 700
}

.go-to-top {
    position: fixed;
    z-index: 1;
    right: 4.2666666667vw;
    bottom: 4.2666666667vw;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    transition: opacity .5s;
    border-radius: 50%;
    opacity: 0;
    background: radial-gradient(circle at 1.2% 1.2%, #00ECFF 0%, #6230D5 50%, #4E5CFF 80%, #00BBE6 140%, #FFFFFF 140%);
    box-shadow: 0 3.2vw 2.6666666667vw #281a7021, inset 0 .2666666667vw .8vw #ffffff80
}

.go-to-top .icon-arrow {
    position: absolute;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    transform: rotate(90deg);
    background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/20%
}

.go-to-top.is-visible {
    opacity: 1
}

.rain-bet-wrap {
    position: relative
}

.rain-bet-wrap .rain-bet-block {
    position: relative;
    bottom: 0;
    width: 100%;
    padding-top: 13.3333333333vw
}

.rain-bet-wrap .rain-bet-box {
    position: relative;
    left: 50%;
    width: calc(100% - 8.5333333333vw);
    overflow: hidden;
    transform: translate(-50%)
}

.rain-bet-wrap .bet-tab {
    display: flex
}

.rain-bet-wrap .bet-tab li {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 50%;
    padding: 2.1333333333vw 0;
    color: #fff;
    font-size: 5.3333333333vw;
    font-weight: 700;
    pointer-events: auto
}

.rain-bet-wrap .bet-tab li h4 {
    margin-left: 3.2vw;
    pointer-events: none
}

.rain-bet-wrap .bet-tab li .icon {
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: 1.0666666667vw 2.1333333333vw;
    pointer-events: none
}

.rain-bet-wrap .bet-tab li .rain {
    background: #00B5FF;
    -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center
}

.rain-bet-wrap .bet-tab li .no-rain {
    background: #FFD259;
    -webkit-mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-sun.svg) no-repeat center
}

.rain-bet-wrap .tab-border {
    position: absolute;
    width: 50%;
    height: 11.7333333333vw;
    transform: translate(var(--date-tab-translateX));
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: #6131D6;
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.rain-bet-wrap .tab-border:before {
    content: "";
    display: block;
    position: absolute;
    bottom: 0;
    left: -5.0666666667vw;
    width: 5.3333333333vw;
    height: 5.8666666667vw;
    transform: rotateY(180deg);
    background: url(/images/rain/h5/tab-rain-radius.png) no-repeat center/110%
}

.rain-bet-wrap .tab-border:after {
    content: "";
    display: block;
    position: absolute;
    right: -5.0666666667vw;
    bottom: 0;
    width: 5.3333333333vw;
    height: 5.8666666667vw;
    background: url(/images/rain/h5/tab-rain-radius.png) no-repeat center/110%
}

.rain-bet-wrap .tab-border.active {
    background: #FF479E
}

.rain-bet-wrap .tab-border.active:before {
    background: url(/images/rain/h5/tab-no-rain-radius.png) no-repeat center/110%
}

.rain-bet-wrap .tab-border.active:after {
    background: url(/images/rain/h5/tab-no-rain-radius.png) no-repeat center/110%
}

.rain-bet-wrap .bet-content {
    border-bottom-left-radius: 5.3333333333vw;
    border-bottom-right-radius: 5.3333333333vw;
    background: linear-gradient(180deg, #6230D5 0%, #4E5CFF 25%, #00BBE6 100%, #FFFFFF 100%)
}

.rain-bet-wrap .bet-content .tab-pane {
    display: none
}

.rain-bet-wrap .bet-content .tab-pane.active {
    display: block
}

.rain-bet-wrap .bet-content.active {
    background: linear-gradient(180deg, #FF479F 0%, #FE7777 40%, #FF9467 60%, #FFC638 100%, #FFFFFF 100%)
}

.rain-bet-wrap .bet-content .tab-pane:first-of-type .tips-box {
    background: rgba(60, 54, 153, .4)
}

.rain-bet-wrap .bet-content .tab-pane:last-of-type .tips-box {
    background: rgba(230, 73, 78, .4)
}

.rain-bet-wrap .select-session {
    width: 100%;
    margin: 0;
    padding: 4.2666666667vw
}

.rain-bet-wrap .select-session .count-down-timer {
    display: flex;
    align-items: center;
    width: 34.6666666667vw;
    padding: 2.1333333333vw 4.2666666667vw;
    border-radius: 5.3333333333vw;
    background: rgba(255, 255, 255, .15);
    color: #fff;
    font-size: 3.7333333333vw;
    font-weight: 900
}

.rain-bet-wrap .select-session .count-down-timer .icon-hourglass {
    width: 4vw;
    height: 4vw;
    margin-right: 2.1333333333vw;
    animation: flip 8s ease infinite;
    background: #FFFFFF;
    -webkit-mask: url(/images/rain/h5/icon-hourglass.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-hourglass.svg) no-repeat center
}

.rain-bet-wrap .select-session .count-down-timer h4 {
    width: 3.7333333333vw;
    text-align: right
}

.rain-bet-wrap .select-session .count-down-timer span {
    margin: 0 1.0666666667vw
}

.rain-bet-wrap .select-session .count-down-timer.alert .icon-hourglass {
    background: #FF5959
}

.rain-bet-wrap .select-session .count-down-timer.alert h4,
.rain-bet-wrap .select-session .count-down-timer.alert span {
    color: #ff5959
}

.rain-bet-wrap .betting-input {
    display: flex;
    align-items: center;
    padding: 0 4.2666666667vw
}

.rain-bet-wrap .betting-input input {
    width: 100%;
    height: 13.3333333333vw;
    padding: 0;
    border: 0;
    background: transparent;
    color: #fff;
    font-size: 10.6666666667vw;
    font-weight: 700;
    text-align: right
}

.rain-bet-wrap .betting-input input::placeholder {
    color: #ffffff4d
}

.rain-bet-wrap .betting-input input.danger {
    color: #ff5959
}

.rain-bet-wrap .betting-input input.ani {
    animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both
}

.rain-bet-wrap .tips-box {
    display: flex;
    justify-content: space-between;
    padding: 3.2vw 4.2666666667vw;
    border-radius: 0 0 5.3333333333vw 5.3333333333vw
}

.rain-bet-wrap .tips-box .tips {
    opacity: .6;
    color: #fff;
    font-size: 3.4666666667vw
}

.rain-bet-wrap .tips-box .alert {
    display: none;
    color: #fff
}

.rain-bet-wrap .tips-box .odds {
    color: #ffd259;
    font-size: 4vw;
    font-weight: 500
}

.rain-bet-wrap .tips-box.danger {
    background: #FF5959 !important
}

.rain-bet-wrap .rain-calc {
    margin: 4.2666666667vw
}

.rain-bet-wrap .quick-number {
    display: grid;
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(5, 1fr);
    margin: 3.2vw 0
}

.rain-bet-wrap .quick-number li {
    padding: 4.2666666667vw 0;
    border-radius: 4.2666666667vw;
    color: #fff;
    font-size: 5.3333333333vw;
    font-weight: 700;
    text-align: center;
    touch-action: manipulation
}

.rain-bet-wrap .number-keyboard {
    display: grid;
    grid-gap: 3.2vw;
    grid-template-columns: repeat(3, 1fr);
    margin: 3.2vw 0
}

.rain-bet-wrap .number-keyboard li {
    position: relative;
    padding: 3.2vw 0;
    border-radius: 4.2666666667vw;
    color: #fff;
    font-size: 8vw;
    font-weight: 700;
    text-align: center;
    touch-action: manipulation
}

.rain-bet-wrap .number-keyboard li.active:after {
    content: attr(data-num);
    display: flex;
    position: absolute;
    z-index: 1;
    top: -19.2vw;
    left: 0;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 24vw;
    font-size: 11.2vw;
    pointer-events: none;
    -webkit-mask: url(/images/rain/h5/shape-keyboard.svg) no-repeat center/100%;
    mask: url(/images/rain/h5/shape-keyboard.svg) no-repeat center/100%
}

.rain-bet-wrap .number-keyboard .back {
    display: flex;
    align-items: center;
    justify-content: center
}

.rain-bet-wrap .number-keyboard .back img {
    width: 10.6666666667vw
}

@keyframes move-ball {
    to {
        transform: translateZ(.2666666667vw) rotate(360deg)
    }
}

@keyframes circle-chart {
    to {
        stroke-dasharray: 0 377
    }
}

@keyframes shake-horizontal {
    0%,
    to {
        transform: translate(0)
    }
    10%,
    30%,
    50%,
    70% {
        transform: translate(-8px)
    }
    20%,
    40%,
    60% {
        transform: translate(8px)
    }
    80% {
        transform: translate(6px)
    }
    90% {
        transform: translate(-6px)
    }
}

@keyframes flip {
    0%,
    95% {
        transform: rotate(0)
    }
    to {
        transform: rotate(180deg)
    }
}

@keyframes keyboard {
    0% {
        opacity: 1
    }
    to {
        opacity: 0
    }
}

.pop-rain {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: all .3s ease-in-out
}

.pop-rain.active {
    display: block
}

.blur-bg {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: rgba(57, 52, 133, .8);
    -webkit-backdrop-filter: blur(1.0666666667vw);
    backdrop-filter: blur(1.0666666667vw)
}

.normal-bg,
.pop-setting-amounts .default-amounts li {
    border: .2666666667vw solid rgba(255, 255, 255, .02);
    background: rgba(54, 50, 133, .8);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a;
    color: #fff
}

.active-with-bg,
.pop-setting-amounts .setting-box .default-amounts li.active {
    position: relative;
    background: linear-gradient(60deg, #6D25F4, #FF9FA2);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.active-with-bg:after,
.pop-setting-amounts .setting-box .default-amounts li.active:after {
    content: "";
    position: absolute;
    top: .1333333333vw;
    left: .1333333333vw;
    width: calc(100% - .2666666667vw);
    height: calc(100% - .2666666667vw);
    border-radius: 4vw;
    background: linear-gradient(0deg, #452DA4 0%, #71528C 100%);
    background-size: 300% 300%
}

.active-with-check,
.pop-setting-amounts .default-box .default-amounts li.active {
    position: relative;
    background: linear-gradient(45deg, #FF9FA2 0%, #6D25F4 100%);
    box-shadow: inset 0 .2666666667vw .5333333333vw #ffffff1a
}

.active-with-check:before,
.pop-setting-amounts .default-box .default-amounts li.active:before {
    content: "";
    position: absolute;
    z-index: 1;
    right: -.2666666667vw;
    bottom: -.2666666667vw;
    width: 6.6666666667vw;
    height: 6.6666666667vw;
    border-bottom-right-radius: 4.2666666667vw;
    background: url(/images/rain/h5/check.svg) no-repeat center
}

.active-with-check:after,
.pop-setting-amounts .default-box .default-amounts li.active:after {
    content: "";
    position: absolute;
    top: .1333333333vw;
    left: .1333333333vw;
    width: calc(100% - .2666666667vw);
    height: calc(100% - .2666666667vw);
    border-radius: 4vw;
    background: #343084
}

.pop-picker {
    position: fixed;
    z-index: 9000;
    bottom: -150%;
    width: 100%;
    height: 74.6666666667vw;
    padding: 6.4vw;
    transition: bottom .3s;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: rgba(57, 52, 133, .5);
    box-shadow: 0 2.6666666667vw 2.6666666667vw #281a70;
    color: #fff;
    font-family: Jost, sans-serif
}

.pop-picker .select-wrap {
    position: relative;
    height: 32vw;
    margin: 4.2666666667vw 0;
    overflow: hidden;
    text-align: center
}

.pop-picker .select-wrap .title {
    font-size: 4.2666666667vw;
    font-weight: 500
}

.pop-picker .select-wrap ul {
    height: 32vw;
    transition: .3s
}

.pop-picker .select-wrap ul li {
    transform: scale(.85);
    transition: .3s;
    opacity: .3;
    font-size: 6.4vw;
    line-height: 10.6666666667vw
}

.pop-picker .select-wrap ul li.active {
    transform: scale(1);
    border-radius: 2.6666666667vw;
    opacity: 1;
    background: rgba(255, 255, 255, .1)
}

.pop-picker.active {
    bottom: 0
}

.pop-terms {
    display: none;
    z-index: 99;
    width: 90%;
    height: 138.6666666667vw;
    padding: 4.2666666667vw;
    overflow: hidden;
    border-radius: 5.3333333333vw;
    background: #281A70;
    background-image: radial-gradient(circle at 1.2% 1.2%, rgba(0, 236, 255, .3) 0%, rgba(98, 48, 213, .3) 49%, rgba(78, 92, 255, .3) 83%, rgba(0, 187, 230, .3) 142%, rgba(255, 255, 255, .3) 142%);
    font-family: Jost, sans-serif
}

.pop-terms .title {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    margin: 4.2666666667vw 0;
    color: #fff;
    font-size: 4.2666666667vw;
    font-weight: 500;
    line-height: 1.2;
    text-align: center;
    text-shadow: 0 .5333333333vw 1.0666666667vw rgba(131, 76, 0, .2)
}

.pop-terms .terms-wrap {
    height: 60%;
    margin-bottom: 8.5333333333vw;
    overflow-y: scroll
}

.pop-terms .terms-wrap p {
    opacity: .7;
    color: #fff
}

.pop-terms .terms-wrap p+p {
    margin-top: 4.2666666667vw
}

.pop-terms .rain-terms {
    position: relative;
    padding-left: 8.5333333333vw;
    list-style-type: decimal-leading-zero
}

.pop-terms .rain-terms li {
    opacity: .7;
    color: #fff;
    line-height: 1.2
}

.pop-terms .rain-terms li+li {
    margin-top: 4.2666666667vw
}

.pop-terms ol {
    margin-top: 4.2666666667vw;
    padding-left: 4.2666666667vw;
    list-style-type: decimal
}

.pop-setting-amounts {
    position: fixed;
    z-index: 9000;
    bottom: -150%;
    width: 100%;
    height: auto;
    transition: bottom .3s;
    border-radius: 5.3333333333vw 5.3333333333vw 0 0;
    background: rgba(57, 52, 133, .5);
    box-shadow: 0 2.6666666667vw 2.6666666667vw #281a70;
    color: #fff;
    font-family: Jost, sans-serif
}

.pop-setting-amounts .rain-pop-wrap {
    display: flex;
    flex-direction: row;
    width: auto;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .5s
}

.pop-setting-amounts .rain-pop-wrap .rain-pop-inner {
    display: flex;
    transform: translate(0);
    transition: all .5s
}

.pop-setting-amounts .rain-pop-wrap .rain-pop-inner .inner-box {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100vw;
    padding: 6.4vw;
    overflow: hidden
}

.pop-setting-amounts .rain-pop-wrap .rain-pop-inner.inner-right {
    transform: translate(-50%)
}

.pop-setting-amounts .default-box .title-box {
    display: flex;
    justify-content: space-between
}

.pop-setting-amounts .default-box .tips {
    display: none;
    margin-bottom: 4.2666666667vw;
    color: #ff5959;
    font-size: 4.2666666667vw
}

.pop-setting-amounts .default-box .default-amounts li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 17.0666666667vw
}

.pop-setting-amounts .setting-box .title-box {
    display: flex;
    justify-content: flex-start
}

.pop-setting-amounts .setting-box .title-box .icon-back {
    width: 4vw;
    height: 4vw;
    margin-right: 4.2666666667vw;
    background: url(/images/rain/h5/icon-arrow-left.png) no-repeat center/60%
}

.pop-setting-amounts .setting-box .amount-input {
    display: flex;
    align-items: center;
    margin: 3.2vw 0
}

.pop-setting-amounts .setting-box .amount-input input {
    width: 100%;
    height: 13.3333333333vw;
    border: 0;
    background: transparent;
    color: #ffd259;
    font-size: 10.6666666667vw;
    font-weight: 700;
    text-align: right
}

.pop-setting-amounts .setting-box .amount-input input::placeholder {
    color: #ffffff4d
}

.pop-setting-amounts .setting-box .amount-input input.danger {
    color: #ff5959
}

.pop-setting-amounts .setting-box .amount-input input.ani {
    animation: shake-horizontal .8s cubic-bezier(.455, .03, .515, .955) both
}

.pop-setting-amounts .setting-box .tips {
    margin-bottom: 4.2666666667vw;
    opacity: .5;
    color: #fff;
    font-size: 4.2666666667vw
}

.pop-setting-amounts .setting-box .alert {
    display: none;
    margin-bottom: 4.2666666667vw;
    color: #ff5959
}

.pop-setting-amounts .default-amounts {
    display: grid;
    grid-gap: 2.1333333333vw;
    grid-template-columns: repeat(4, 1fr);
    margin: 4.2666666667vw 0
}

.pop-setting-amounts .default-amounts li {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 22.4vw;
    height: 16vw;
    border-radius: 4.2666666667vw;
    color: #fff;
    font-size: 5.3333333333vw;
    font-weight: 700
}

.pop-setting-amounts .default-amounts li span {
    z-index: 1
}

.pop-setting-amounts .default-amounts li.danger {
    position: relative;
    background: #FF5959
}

.pop-setting-amounts .default-amounts li.danger:after {
    content: "";
    position: absolute;
    top: .1333333333vw;
    left: .1333333333vw;
    width: calc(100% - .2666666667vw);
    height: calc(100% - .2666666667vw);
    border-radius: 4vw;
    background: #343084
}

.pop-setting-amounts.active {
    bottom: 0
}

.pop-alert-processing,
.pop-alert-success,
.pop-alert-fail {
    display: grid;
    position: absolute;
    z-index: 99;
    grid-row-gap: 2.1333333333vw;
    grid-template-columns: 1fr repeat(3, 1.5fr);
    align-items: center;
    width: calc(100% - 8.5333333333vw);
    height: 17.0666666667vw;
    margin: 4.2666666667vw;
    padding-right: 4.2666666667vw;
    transform: translateY(-26.6666666667vw);
    border-radius: 4.2666666667vw;
    background: rgba(57, 52, 133, .9);
    box-shadow: 0 2.6666666667vw 2.6666666667vw #281a7099;
    color: #fff;
    font-family: Jost, sans-serif
}

.pop-alert-processing .rain-ani,
.pop-alert-success .rain-ani,
.pop-alert-fail .rain-ani {
    grid-column: 1/span 1;
    grid-row: 1/span 2;
    width: 17.0666666667vw;
    height: 17.0666666667vw
}

.pop-alert-processing .rain-ani video,
.pop-alert-success .rain-ani video,
.pop-alert-fail .rain-ani video {
    width: 100%
}

.pop-alert-processing .status,
.pop-alert-success .status,
.pop-alert-fail .status {
    grid-column: 2/span 3;
    grid-row: 1/span 1;
    align-self: flex-end;
    font-size: 4.2666666667vw;
    font-weight: 700
}

.pop-alert-processing .icon,
.pop-alert-success .icon,
.pop-alert-fail .icon {
    display: flex;
    grid-column: 2/span 1;
    grid-row: 2/span 1;
    align-self: flex-start;
    opacity: .7
}

.pop-alert-processing .icon .rain,
.pop-alert-success .icon .rain,
.pop-alert-fail .icon .rain {
    width: 4vw;
    height: 4vw;
    margin-right: 1.0666666667vw;
    background: #00B5FF;
    -webkit-mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-rainfall.svg) no-repeat center
}

.pop-alert-processing .icon .no-rain,
.pop-alert-success .icon .no-rain,
.pop-alert-fail .icon .no-rain {
    width: 4vw;
    height: 4vw;
    margin-right: 1.0666666667vw;
    background: #FFD259;
    -webkit-mask: url(/images/rain/h5/icon-sun.svg) no-repeat center;
    mask: url(/images/rain/h5/icon-sun.svg) no-repeat center
}

.pop-alert-processing .icon+.stake,
.pop-alert-success .icon+.stake,
.pop-alert-fail .icon+.stake {
    padding-left: 2.1333333333vw;
    border-left: .2666666667vw solid #FFFFFF
}

.pop-alert-processing .stake,
.pop-alert-success .stake,
.pop-alert-fail .stake {
    grid-column: 3/span 1;
    grid-row: 2/span 1;
    align-self: flex-start;
    opacity: .7
}

.pop-alert-processing .stake+.odds,
.pop-alert-success .stake+.odds,
.pop-alert-fail .stake+.odds {
    padding-left: 2.1333333333vw;
    border-left: .2666666667vw solid #FFFFFF
}

.pop-alert-processing .odds,
.pop-alert-success .odds,
.pop-alert-fail .odds {
    grid-column: 4/span 1;
    grid-row: 2/span 1;
    align-self: flex-start;
    opacity: .7
}

.pop-alert-processing span,
.pop-alert-success span,
.pop-alert-fail span {
    font-weight: 500
}

.pop-alert-processing.show,
.pop-alert-success.show,
.pop-alert-fail.show {
    animation: slide-bottom .5s cubic-bezier(.25, .46, .45, .94) both
}

.pop-alert-processing.hide,
.pop-alert-success.hide,
.pop-alert-fail.hide {
    animation: slide-top .5s cubic-bezier(.25, .46, .45, .94) both
}

@keyframes slide-top {
    0% {
        transform: translateY(0)
    }
    to {
        transform: translateY(-26.6666666667vw)
    }
}

@keyframes slide-bottom {
    0% {
        transform: translateY(-26.6666666667vw)
    }
    to {
        transform: translateY(0)
    }
}

.launch-game-content {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: transparent;
    transition: background .3s
}

.launch-game-content.active {
    background: black
}

.launch-game-loading {
    display: none;
    position: fixed;
    z-index: 4;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 53.3333333333vw;
    pointer-events: none
}

.launch-game-loading.select-logo .center-logo-bg {
    background-color: #fff;
    background-image: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, .3) 50%)
}

.launch-game-loading.select-logo .center-logo-bg .center-logo {
    background-size: cover
}

.launch-game-loading.select-slot .center-logo-bg {
    background-color: #fff;
    background-image: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, .3) 50%)
}

.launch-game-loading.select-slot .center-logo-bg .center-logo {
    background-size: cover
}

.launch-game-loading.select-bn2 .center-logo-bg {
    background-color: #fff;
    background-image: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, .3) 50%)
}

.launch-game-loading.select-bn2 .center-logo-bg .center-logo {
    background-position: 15% 46%;
    background-size: 260%
}

.launch-game-loading.select-mini-game-logo .center-logo-bg {
    background-color: #fff;
    background-image: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, .3) 50%)
}

.launch-game-loading.select-mini-game-logo .center-logo-bg .center-logo {
    background-size: 120%
}

.launch-game-loading .center-logo-bg {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14.6666666667vw;
    height: 14.6666666667vw;
    padding: 1.0666666667vw;
    overflow: hidden;
    transform: translate(-50%, -50%);
    border-radius: 100%;
    background-image: linear-gradient(135deg, #ffffff 0%, rgba(255, 255, 255, .3) 50%);
    box-shadow: .5333333333vw 2.1333333333vw 3.7333333333vw #0003, 0 .5333333333vw 1.0666666667vw #000, 0 .2666666667vw 8vw #7f7f7f, inset 0 .5333333333vw 1.0666666667vw #ffffffb3
}

.launch-game-loading .center-logo-bg .center-logo {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 80%;
    z-index: 1
}

.launch-game-loading .loader-round {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 21.3333333333vw;
    height: 21.3333333333vw;
    transform: translate(-50%, -50%);
    opacity: 0
}

.launch-game-loading .loading-bg {
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    background-image: linear-gradient(180deg, transparent 0%, #000000 100%)
}

.launch-game-loading svg {
    max-width: 100%;
    max-height: 100%;
    transform: rotate(-90deg)
}

.launch-game-loading .circle {
    animation-name: circle-loader;
    animation-duration: 1.5s;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    animation-iteration-count: infinite;
    stroke-dashoffset: 2000;
    stroke-dasharray: 1680, 1650;
    animation-fill-mode: backwards
}

.launch-game-loading #dark {
    animation-name: circle-loader-dark;
    stroke: #ffffff40
}

.launch-game-loading #white {
    animation-name: circle-loader-white;
    animation-delay: .3s;
    stroke: url(#loading-bar-color)
}

.launch-game-loading #loading-bar-color .loading-stop-color {
    stop-color: #3976ff
}

.launch-game-loading #loading-bar-color .loading-end-color {
    stop-color: #0653ff
}

@keyframes circle-loader-dark {
    0% {
        stroke-dasharray: 1685, 1574;
        stroke-dashoffset: 2000
    }
    35% {
        stroke-dashoffset: 3310
    }
    35.1% {
        stroke-dashoffset: 3600
    }
    70% {
        stroke-dasharray: 1574;
        stroke-dashoffset: 4719
    }
    to {
        stroke-dasharray: 1574;
        stroke-dashoffset: 4719
    }
}

@keyframes circle-loader-white {
    0% {
        stroke-dasharray: 1685, 1660;
        stroke-dashoffset: 2000
    }
    50% {
        stroke-dashoffset: 3310
    }
    50.1% {
        stroke-dashoffset: 3600
    }
    to {
        stroke-dasharray: 1574;
        stroke-dashoffset: 4719
    }
}

.site-top {
    position: fixed;
    z-index: 3;
    top: 0;
    left: 0;
    width: 100%;
    height: 44px;
    pointer-events: all
}

.site-top .menu-bg {
    position: absolute;
    z-index: -1;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: hidden;
    transform: translate(-50%, -50%);
    opacity: 0;
    background: linear-gradient(180deg, #3976ff 0%, #054ea1 100%)
}

.site-top .menu-bg .highlight {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0 -2px 2.5px #147ff8, inset 0 1px 3px #ffffff80
}

.site-top .site-menu {
    display: flex;
    position: relative;
    z-index: 2;
    top: 50%;
    left: 50%;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    transform-origin: center
}

.site-top .site-menu .f-logo-bg {
    position: relative;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    margin: 0 2.1333333333vw;
    border-radius: 50%;
    opacity: 0;
    background-image: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
    background-size: 100%
}

.site-top .site-menu .f-logo-bg .f-logo {
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center left;
    background-size: 80%
}

.site-top .site-menu .f-logo-bg .light-ring {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 8.2666666667vw;
    height: 8.2666666667vw;
    opacity: .6;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    pointer-events: none;
    mix-blend-mode: overlay
}

.site-top .site-menu .info-wrap {
    position: relative;
    opacity: 0;
    width: 69.3333333333vw;
    height: 100%;
    padding-left: 4.8vw;
    transform: skew(-10deg);
    border-left: .5333333333vw solid rgba(255, 255, 255, .1);
    letter-spacing: normal
}

.site-top .site-menu .info-wrap .info-block {
    position: absolute;
    width: -moz-fit-content;
    width: fit-content;
    top: 50%;
    height: 100%;
    line-height: 3.7333333333vw;
    transform: skew(10deg) translateY(-35%)
}

.site-top .site-menu .info-wrap .info-block .info-title {
    font-weight: 700;
    color: #fff;
    font-size: 10px
}

.site-top .site-menu .info-wrap .info-block .info-value {
    color: #fff;
    font-size: 12px
}

.site-top .site-menu .info-wrap .info-block .info-value-sub {
    color: #fff;
    padding-left: .8vw;
    opacity: 25%
}

.site-top .site-menu .btn {
    position: relative;
    width: 44px;
    height: 44px;
    opacity: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .3) 100%)
}

.site-top .site-menu .btn .btn-home {
    width: 100%;
    height: 100%;
    background: #ffffff;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 70%;
    mask-size: 70%
}

.site-top .site-menu .btn .btn-cross {
    position: relative;
    width: 100%;
    height: 100%
}

.site-top .site-menu .btn .btn-cross:after,
.site-top .site-menu .btn .btn-cross:before {
    content: "";
    display: block;
    height: 40%;
    width: 2px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    background-color: #fff;
    transform-origin: 50% 50%
}

.site-top .site-menu .btn .btn-cross:after {
    transform: translateY(-50%) rotate(-45deg)
}

.site-top .site-menu .btn .btn-cross:before {
    transform: translateY(-50%) rotate(45deg)
}

.site-top .site-menu .btn .btn-deposit {
    width: 100%;
    height: 100%;
    background: #f4b600;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 60%;
    mask-size: 60%
}

.site-top .site-menu .btn .light-ring {
    position: absolute;
    z-index: 3;
    top: 0;
    width: 5.3333333333vw;
    height: 5.3333333333vw;
    opacity: .6;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    pointer-events: none;
    mix-blend-mode: overlay
}

.site-top .site-menu.no-deposit {
    flex-flow: row-reverse nowrap
}

.site-top .site-menu.no-deposit .f-logo-bg {
    position: relative;
    width: 17.8666666667vw;
    height: 6.6666666667vw;
    margin: 0 2.1333333333vw;
    border-radius: 0;
    opacity: 0;
    background-image: linear-gradient(180deg, rgba(71, 78, 120, 0) 0%, rgba(71, 78, 120, 0));
    background-size: 100%;
    padding: 1px 0
}

.site-top .site-menu.no-deposit .f-logo-bg .light-ring {
    display: none
}

.site-top .site-menu.no-deposit .f-logo-bg .logo-image {
    background-size: contain;
    filter: drop-shadow(0 .5333333333vw 1.0666666667vw rgba(242, 242, 242, .5))
}

.site-top .site-menu.no-deposit .btn:nth-child(4) {
    display: none
}

.site-top .top-bg {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(-100%)
}

.site-top .top-bg.gradient {
    background-image: linear-gradient(180deg, #000000 40%, rgba(0, 0, 0, 0) 100%)
}

.launch-game-page {
    display: none;
    pointer-events: auto
}

.launch-game-wrap {
    position: absolute;
    z-index: 3;
    top: 44px;
    left: 0;
    width: 100%;
    height: calc(100% - 44px);
    transform: translateY(6%);
    opacity: 0;
    background-color: #000
}

.launch-game-wrap.show {
    transform: translate(0);
    opacity: 1
}

.launch-game-wrap .launch-game-iframe {
    position: relative;
    width: 100%;
    height: 100%;
    border: 0
}

.site-bg {
    position: absolute;
    z-index: 2;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: translateY(100%);
    background-image: linear-gradient(180deg, #333333 10%, rgba(255, 132, 3, .5) 100%);
    -webkit-backdrop-filter: blur(2.1333333333vw);
    backdrop-filter: blur(2.1333333333vw)
}

.site-bg .effect {
    mix-blend-mode: overlay
}

.site-bg #Gradient .start-color {
    stop-color: #ffffff4d
}

.site-bg #Gradient .end-color {
    stop-color: #fff0
}

@media screen and (min-aspect-ratio: 16/9) {
    .site-top .site-menu.no-deposit .f-logo-bg {
        height: 3.748125937vmax;
        width: 10.0449775112vmax
    }
}

* {
    touch-action: pan-x pan-y
}

@media (display-mode: standalone) {
    body {
        overscroll-behavior: none
    }
    *:not(input):not(textarea) {
        user-select: none;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none
    }
}

.loading-mask {
    position: fixed;
    display: flex;
    inset: 0;
    background-color: #0e2749;
    justify-content: center;
    align-items: center
}

.loading-mask .movie-box video {
    display: block;
    margin: auto;
    width: 21.3333333333vw;
    height: 21.3333333333vw
}

header {
    transition: all 0s
}

.wrap {
    display: block;
    position: inherit;
    inset: 0;
    overflow-x: hidden;
    overflow-y: auto;
    transition: cubic-bezier(.075, .82, .165, 1)
}

.tab.search-tab {
    z-index: 2
}

.language-select-area .language-area {
    margin: 0 .8vw
}

.player-vip-detailed-box .section-wrap {
    display: block;
    height: 100%;
    transition: all .3s ease;
    width: 100%
}

.footer {
    transition: .3s all
}

.footer.hide {
    opacity: 0
}

.register-content .verification .refresh.active {
    animation: refresh1 .5s linear
}

@keyframes refresh1 {
    0% {
        transform: translateY(-50%) rotate(0)
    }
    to {
        transform: translateY(-50%) rotate(1turn)
    }
}

.register-content .verification-wrap .refresh.active {
    animation: refresh .5s linear
}

@keyframes refresh {
    0% {
        transform: rotate(0)
    }
    to {
        transform: rotate(1turn)
    }
}

.player-vip-detailed-menu {
    overflow-x: scroll;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch
}

.player-vip-detailed-menu::-webkit-scrollbar {
    display: none;
    -ms-overflow-style: none
}

.player-vip-detailed-menu .btn-wrap {
    display: inline-flex
}

.player-vip-detailed-menu .btn-wrap .btn {
    min-width: 24vw
}

.login-info-box .error-message-box {
    flex: 1 0 60%
}

.login-info-box .forgetpassword-buttn {
    margin-top: 3px
}

.vip-content {
    height: 100vh
}

.btn-select.only:after {
    display: none
}

.popup-page-wrapper {
    display: block;
    position: relative;
    text-align: center;
    z-index: 110
}

.third-party-login.member-content.new-profile,
.third-party-login.member-content.new-login,
.third-party-login.verify-code {
    min-height: 100vh !important
}

.banner {
    background-color: transparent
}

html.is-desktop .banner {
    overflow: hidden
}

.banner .banner-v1 {
    height: 26vh
}

.carousel-wrap {
    display: block;
    position: relative;
    width: auto;
    overflow: hidden;
    max-width: 100vw;
    margin: auto;
    height: 100%
}

html.is-desktop .carousel-wrap {
    max-width: none
}

.carousel-wrap.style-init .item-drag .item-left {
    width: inherit;
    transform: translate(-250%, -50%)
}

.carousel-wrap.style-init .item-drag .item-wrap {
    width: inherit
}

.carousel-wrap.style-init.siblings .item-drag .item-left {
    transform: translate(-175%, -50%)
}

.carousel-wrap.style-init.siblings .item-drag .item {
    width: 70%
}

.carousel-wrap .item-drag {
    display: block;
    margin: auto;
    padding-top: 35%;
    width: 100%;
    height: 100%
}

.carousel-wrap .item-drag .item-left {
    display: block;
    width: inherit;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 100%
}

.carousel-wrap .item-drag .item-left .item-wrap {
    display: block;
    position: relative;
    height: 100%;
    white-space: nowrap;
    line-height: 0
}

.carousel-wrap .item {
    display: inline-block;
    position: relative;
    padding: 2.4vw 2.4vw 7.2vw;
    width: 100%;
    height: 100%;
    margin: auto;
    color: #221919;
    opacity: 1;
    overflow: hidden
}

.carousel-wrap .item .item-pic {
    display: block;
    position: relative;
    margin: auto;
    height: 100%;
    border-radius: 1.3333333333vw;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    overflow: hidden;
    transform-origin: center;
    transition: all .3s
}

.carousel-wrap.siblings .item {
    padding: 1.3333333333vw 1.3333333333vw 3.4666666667vw
}

.carousel-wrap.siblings .item .item-pic {
    border-radius: 1.3333333333vw
}

.carousel-wrap.siblings .item .item-pic.focus {
    box-shadow: 0 .5333333333vw 3.2vw #00000059;
    transform: translateY(-2px)
}

.carousel-wrap.siblings .dot-group {
    bottom: 0
}

.carousel-wrap.singlefull .item {
    padding: 0
}

.carousel-wrap.singlefull .item .item-pic {
    border-radius: 0
}

.carousel-wrap.singlefull .item .item-pic.focus {
    transform: scale(1.05)
}

.carousel-wrap.singlefull .dot-group {
    bottom: 0
}

.dot-group {
    display: flex;
    justify-content: center;
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    padding: .5333333333vw;
    z-index: 1
}

.dot-group.style-dot li {
    display: block;
    margin-right: 1.3333333333vw;
    margin-left: 1.3333333333vw;
    width: 2.6666666667vw;
    height: 2.6666666667vw;
    background: #054ea1;
    border-radius: 50%;
    transition: .3s;
    cursor: pointer
}

.dot-group.style-dot li:hover {
    background: #054ea1
}

.dot-group.style-dot li.active {
    background: #f4b600
}

.dot-group.style-bar {
    padding: 1.8666666667vw 0 .8vw
}

.dot-group.style-bar li {
    display: block;
    margin: 0 .8vw;
    width: 5.3333333333vw;
    height: .5333333333vw;
    background: rgba(255, 255, 255, .5);
    border-radius: 1.3333333333vw;
    overflow: hidden
}

.dot-group.style-bar li:hover .dot-progress,
.dot-group.style-bar li.active .dot-progress {
    animation-name: dot-ani;
    background: #fff
}

.dot-group.style-bar li .dot-progress {
    display: block;
    width: 100%;
    height: 100%
}

.button-prev,
.button-next {
    padding: 15px 10px;
    top: 50%;
    transform: translateY(-50%);
    transition: opacity .3s;
    border-radius: 3px;
    cursor: pointer;
    position: absolute;
    z-index: 1
}

.button-prev {
    left: 0
}

.button-next {
    right: 0;
    transform: translateY(-50%) rotateY(180deg)
}

.button-prev:hover,
.button-next:hover {
    opacity: .7
}

.button-prev img,
.button-next img {
    display: block;
    max-width: 50px
}

@keyframes dot-ani {
    0% {
        transform: translate(-100%)
    }
    to {
        transform: translate(0)
    }
}

.carousel-wrap.debug {
    border: 1px solid white;
    overflow: visible
}

.carousel-wrap.debug .item-drag {
    border: 1px solid red
}

.carousel-wrap.debug .item-drag .item-left {
    border: 1px solid yellow
}

.carousel-wrap.debug .item-drag .item-left .item-wrap {
    border: 1px solid blue
}

.carousel-wrap.debug .button-prev,
.carousel-wrap.debug .button-next {
    background-color: #fff3
}

.carousel-wrap.debug .item {
    border: 1px solid olive
}

.carousel-wrap.debug .item .item-pic {
    border: 1px solid purple
}

.nav-wrap {
    overflow: hidden
}

.nav-wrap .nav-content-wrap {
    display: block;
    width: 100%;
    overflow: visible
}

.nav-wrap .nav-content-wrap .nav-content-inner {
    display: inline-flex;
    flex-direction: row;
    width: 100%;
    transition: all .3s ease-in-out
}

.nav-wrap .nav-content-wrap .content-box {
    display: block;
    position: relative;
    width: 100%;
    flex-shrink: 0;
    max-height: 10000px;
    transition: all .5s ease-in-out
}

.nav .btn.selected {
    background-color: #222;
    border-radius: 1.3333333333vw
}

.nav .btn.selected p {
    color: #fff
}

.nav .btn.selected:before {
    box-shadow: 0 .5333333333vw 1.3333333333vw #0000004d
}

.nav .btn.selected:after {
    display: block
}

.nav.nav-auto {
    display: flex;
    overflow: auto
}

.nav.nav-auto .btn {
    width: auto;
    min-width: 21.3333333333vw
}

.layout-brand {
    padding: 0 2.6666666667vw
}

.cdk-overlay-container {
    z-index: 9000
}

.dialog-wrap {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    transition: all .4s;
    background-color: #1f1f1f;
    -webkit-overflow-scrolling: touch;
    z-index: 7999
}

.dialog-wrap .close {
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    width: 13.3333333333vw;
    height: 13.3333333333vw;
    border-radius: 0 0 0 100%
}

.dialog-wrap .close:before,
.dialog-wrap .close:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 5.3333333333vw;
    height: .5333333333vw;
    margin: -.2666666667vw 0 0 -2.6666666667vw;
    border-radius: .5333333333vw;
    background-color: linear-gradient(180deg, #2254ba 0%, #163e90 100%)
}

.dialog-wrap .close:before {
    transform: rotate(45deg)
}

.dialog-wrap .close:after {
    transform: rotate(-45deg)
}

.top-bar {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    height: 13.3333333333vw;
    overflow: hidden;
    transition: all .3s;
    background: #161616;
    z-index: 2
}

.top-bar .bar-title {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    transform: translate(-50%);
    align-items: center;
    justify-content: center;
    overflow: hidden;
    font-size: 4.8vw;
    font-weight: 500;
    text-align: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0e2749
}

.top-bar .close:before,
.top-bar .close:after {
    background-color: #0e2749
}

.dialog-overlay-desktop {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100vw;
    max-height: 700px;
    overflow: hidden;
    transform: translate(-50%, -50%)
}

@supports (height: 100dvh) {
    .dialog-overlay-desktop {
        height: calc(100dvh - 16vw)
    }
}

@supports not (height: 100dvh) {
    .dialog-overlay-desktop {
        height: calc(100vh - 16vw)
    }
}

.dialog-overlay-desktop .popup {
    position: absolute;
    top: 50%;
    right: 50%;
    max-height: 100%;
    border-radius: 2.6666666667vw;
    transform: translate(50%, -50%);
    width: 100vw
}

@supports (height: 100dvh) {
    .dialog-overlay-desktop .popup {
        height: calc(100dvh - 16vw)
    }
}

@supports not (height: 100dvh) {
    .dialog-overlay-desktop .popup {
        height: calc(100vh - 16vw)
    }
}

.date-bar .date-input .mat-mdc-form-field {
    width: 100%
}

.date-bar .date-input .mat-mdc-text-field-wrapper {
    background: #ffffff
}

.date-bar .date-input .mat-mdc-form-field-flex,
.date-bar .date-input .mat-mdc-form-field-infix {
    height: 8vw
}

.date-bar .date-input .mat-mdc-form-field-infix {
    min-height: unset
}

.date-bar .date-input .mat-mdc-form-field-infix input {
    font-size: 3.4666666667vw
}

.date-bar .date-input .mdc-text-field--no-label:not(.mdc-text-field--outlined):not(.mdc-text-field--textarea) .mat-mdc-form-field-infix {
    padding: 0;
    display: inline-flex
}

.date-bar .date-input .mdc-line-ripple,
.date-bar .date-input .mat-mdc-form-field-subscript-wrapper {
    display: none
}

.date-bar .date-input .mdc-text-field {
    border-radius: 1.3333333333vw
}

.date-bar .date-input .mdc-text-field__input {
    height: 100%
}

.date-bar .date-input .mdc-icon-button svg {
    fill: #a0a2ca
}

.date-bar .date-input .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 30px;
    --mdc-icon-button-icon-size: 20px;
    padding: 5px
}

.date-bar .date-input .mat-mdc-icon-button .mat-mdc-button-touch-target {
    padding: 1.3333333333vw;
    height: var(--mdc-icon-button-state-layer-size);
    width: var(--mdc-icon-button-state-layer-size)
}

.date-bar .date-input .mat-mdc-form-field-icon-suffix {
    width: 12vw
}

.date-bar .date-input .mdc-text-field:not(.mdc-text-field--disabled) .mdc-text-field__input {
    color: #a0a2ca
}

.input-group .mat-mdc-icon-button.mat-mdc-button-base {
    --mdc-icon-button-state-layer-size: 40px;
    --mdc-icon-button-icon-size: 20px;
    padding: 10px
}

.input-group .mat-mdc-icon-button .mat-mdc-button-touch-target {
    padding: 1.3333333333vw;
    height: var(--mdc-icon-button-state-layer-size);
    width: var(--mdc-icon-button-state-layer-size)
}

.input-group .mdc-icon-button svg {
    fill: #0e2749
}

header .logo {
    width: 100%;
    height: 100%;
}

header.cricket,
header.member,
header.normal,
header.player {
    box-shadow: 0 .5333333333vw .5333333333vw #ebebeb0d
}

header.cricket .logo {
    left: 14.6666666667vw
}

header .header-right-btn-group {
    width: 53.3333333333vw;
    height: 6.4vw;
    margin-right: 10px
}

header .header-right-btn-group .header-right-link {
    width: 17.3333333333vw;
    height: 6.4vw;
    display: flex;
    justify-content: center;
    align-items: center;
    white-space: nowrap
}

header .header-right-btn-group .header-right-link:nth-child(1) {
    color: #fff;
    background: linear-gradient(180deg, #4d4d4d 0%, #363636 100%);
    margin-right: .5rem
}

header .header-right-btn-group .language-select img {
    width: 6.4vw;
    height: 6.4vw
}

.menu-btn {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    margin-left: .8rem;
    border-radius: 5px;
    /* box-shadow: 0 0 4px #ffffff80;
    opacity: .801223;
    background-image: linear-gradient(90deg, rgb(11, 41, 102) 0%, rgb(3, 15, 38) 100%, rgb(3, 14, 35) 100%) */
}

.menu-btn ul {
    width: 8.5333333333vw;
    height: 8.5333333333vw;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center
}

.menu-btn ul li {
    width: 5.3333333333vw;
    margin: .5333333333vw 0
}

/* .menu-btn ul li:nth-child(2) {
    width: 3.7333333333vw
} */

.logo-box {
    width: 40vw
}

.logo-box-login {
    display: flex;
    position: relative;
    width: 100%;
    height: 62vw;
    margin: 0;
    overflow: hidden;
    border: 0;
    background: no-repeat center center/contain
}

.nav-category .slick-current:before {
    background-color: transparent;
    box-shadow: none
}

.site-top .site-menu.no-deposit .f-logo-bg {
    width: 21.3333333333vw
}

.content-wrap.withdrawal .ani-box .before-amount .icon-account {
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.content-wrap.withdrawal .ani-box .before-amount .player-account {
    color: #123ea1
}

.content-wrap.deposit .ani-box .after-amount .platform-logo {
    background: linear-gradient(180deg, #ffc20f 0%, #f4b600 100%)
}

.content-wrap.deposit .ani-box .after-amount .platform-name {
    color: #123ea1
}

.top-bar .bar-title {
    color: #fff
}

.top-bar .close:before,
.top-bar .close:after {
    background-color: #fff
}

@font-face {
    font-family: Bebas Neue;
    src: url(/font/BebasNeue-Regular.ttf)
}

.tag-rebate-money {
    font-family: Bebas Neue, Helvetica, Tahoma, sans-serif
}

.tag-rebate-money {
    position: absolute;
    z-index: 3;
    top: 1.3333333333vw;
    right: -2.6666666667vw;
    padding: 0 .8vw;
    animation: tagRebateBoney 1s .3s forwards;
    border-radius: 0 .8vw .8vw 0;
    opacity: 0;
    background: #ff0000;
    box-shadow: 0 0 2px #0000004d;
    color: #fff;
    line-height: 0;
    pointer-events: none
}

.tag-rebate-money:before,
.tag-rebate-money:after {
    content: "";
    position: absolute;
    left: -6px;
    width: 0;
    height: 0;
    border-style: solid;
    background: transparent
}

.tag-rebate-money:before {
    top: 0;
    border-width: 0 6px 10px 0;
    border-color: transparent #ff0000 transparent transparent
}

.tag-rebate-money:after {
    bottom: 0;
    border-width: 0 0 10px 6px;
    border-color: transparent transparent #ff0000
}

.tag-rebate-money p,
.tag-rebate-money span {
    display: inline-block;
    vertical-align: text-bottom
}

.tag-rebate-money span {
    width: auto !important;
    font-size: 3.4666666667vw;
    letter-spacing: 0
}

.tag-rebate-money p {
    font-size: 4.2666666667vw;
    letter-spacing: -1px;
    line-height: 1
}

@keyframes tagRebateBoney {
    0% {
        right: -4vw;
        opacity: 0
    }
    60% {
        opacity: 1
    }
    to {
        right: -.5333333333vw;
        opacity: 1
    }
}

.tag-recommond {
    height: 5.3333333333vw
}

.footer .footer-top .license ul,
.footer .footer-top .safe ul,
.footer .footer-top .pay ul {
    background: #2b2922
}

.float-banner .close {
    background-color: #fff
}

.searchpage-main .check-group {
    padding: 2.1333333333vw
}

.searchpage-main .check-group:nth-child(1) {
    border-radius: 1.3333333333vw 1.3333333333vw 0 0
}

.searchpage-main .check-group:nth-child(2) {
    border-radius: 0
}

.searchpage-main .check-group:last-child {
    border-radius: 0 0 1.3333333333vw 1.3333333333vw
}

.pop-transaction-records-details {
    background: transparent
}

.recommend-friends-list .prompt {
    color: #fff
}

.marquee-wrapper .announcement-row {
    background-color: #1f1f1f;
    margin: 0
}

.marquee-wrapper .announcement-row:before {
    margin-left: 2vw
}

.marquee-wrapper .announcement-row .marquee ul li span p {
    color: #fff;
    font-family: Jost-Regular;
    font-weight: 400
}

.s-app .tab-indicator {
    width: var(--indicator-width);
    transform: var(--indicator-transform);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), width 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.s-app .s-chip {
    background-image: var(--22ec0bd9);
}

.s-app .s-sports-mode-filter {
    box-shadow: 0px 2px 2px 0px rgba(0, 0, 0, 0.1);
}

.s-app .s-sports-eventType-tabs {
    background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
    --tw-gradient-from: var(--color-header-background-from) var(--tw-gradient-from-position);
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position);
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
    --tw-gradient-to: var(--color-header-background-to) var(--tw-gradient-to-position);
}

.s-app .s-menu-active[data-is-selected=true][data-is-my-pin-mode=false] {
    color: var(--color-main-menu-text-active);
}

.s-app .s-event-count {
    background-color: var(--color-main-menu-number-bg);
    color: var(--color-main-menu-num);
}

.s-app .s-event-count[data-is-selected=true][data-is-my-pin-mode=false] {
    background-color: var(--color-unread-number-bg);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.s-app .s-event-count.s-my-fav[data-is-selected=true] {
    background-color: var(--color-unread-number-bg);
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity));
}

.s-app .s-event-type-icon {
    color: var(--color-main-tab-text-active);
}

.s-app .s-event-type-icon[data-is-selected=true][data-is-my-pin-mode=false] {
    color: var(--color-main-menu-text-active);
}

.s-app .s-event-type-context {
    color: var(--color-main-tab-text-active);
}

.s-app .s-event-type-context[data-is-selected=true][data-is-my-pin-mode=false] {
    color: var(--color-main-menu-text-active);
}

/* .s-app .ms-casino-icon-light .ms-casion-bg-light {
    border-radius: 5px;
    opacity: 1;
    background-image: linear-gradient(0deg, rgba(255, 255, 255, 0.176136) 0%, rgba(255, 255, 255, 0.464134) 75%, rgba(255, 255, 255, 0.58184) 100%);
} */

/* custmize css */
.ms-bg-light {
    border-radius: 5px;
    opacity: 1;
    /* background: #000; */
}

.s-app .ms-casino-icon-light .ms-casino-icon-content-light {
    font-weight: bold;
    background: -webkit-linear-gradient(45deg, rgb(253, 18, 226) 20%, rgb(164, 67, 221), rgb(84, 126, 255) 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #978170;
}

.s-app .ms-casino-icon-dark .ms-casino-icon-content-dark {
    font-weight: bold;
    background: -webkit-linear-gradient(45deg, rgb(184, 0, 212) 0%, rgb(247, 110, 0) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #978170;
}

.s-app .ms-casino-icon-dark .ms-casion-bg-dark {
    border-radius: 5px;
    opacity: 1;
    background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.100524) 0%, rgba(0, 0, 0, 0.25) 75%, rgba(0, 0, 0, 0.35) 100%);
}

.s-app .is-mobile .s-main-row,
.s-app .s-main-row {
    grid-template-columns: minmax(0, 6.93vw) minmax(0, 100%) 1fr;
}

.blurbackground {
    filter: blur(15px);
    -webkit-filter: blur(15px);
}
.main-box .casinomenu.active span{
    background-image: url(../../../assets/images/sidebar/icon-casino-active.svg) !important;
}
.main-box .slotmenu.active span{
    background-image: url(../../../assets/images/sidebar/icon-slot-active.svg) !important;
}
.main-box .tablemenu.active span{
    background-image: url(../../../assets/images/sidebar/icon-table-active.svg) !important;
}
.main-box .fishingmenu.active span{
    background-image: url(../../../assets/images/sidebar/icon-fish-active.svg) !important;
}
.main-box .arcademenu.active span{
    background-image: url(../../../assets/images/sidebar/icon-arcade-active.svg) !important;
}
.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel button.owl-dot {
    z-index: 99999;
    color: #fff;
    border: none;
    padding: 0 !important;
    font: inherit;
    height: 8px;
    width: 8px;
    border-radius: 50%;
    background: #4d8ab9;
    margin-left: 8px;
}

.owl-carousel button.active {
    background: #fff;
}

.owl-carousel .owl-dots {
    height: 7.4666666667vw;
    margin-top: 0 !important;
    background: #161616;
    display: flex;
    justify-content: center;
    align-items: center;
}

.owl-theme .owl-dots .owl-dot span {
  width: 8px !important;
  height: 8px !important;
  margin: 3px 4px !important;
}


.owl-theme .owl-dots .owl-dot span {
  background: #ffb80c !important;
  display: block;
  -webkit-backface-visibility: visible;
  transition: opacity .2s ease;
}

.owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span {
  background: #fff !important;
}

.owl-carousel button.owl-dot {
  z-index: 99999;
  color: #fff;
  border: none;
  padding: 0 !important;
  font: inherit;
  height: 8px;
  width: 8px;
  border-radius: 50%;
  background: #4d8ab9 !important;
  margin-left: 8px;
}

.s-app .s-modal-mask {
    z-index: var(--85354152);
}

.s-app .s-modal-container {
    max-height: calc(var(--9c6c75ce));
    z-index: var(--85354152);
    height: calc(var(--9c6c75ce));
}

.s-app .s-modal-content {
    min-height: 300px;
    max-height: calc(var(--4cbaa351));
}

.s-app .s-modal-content.s-full-screen {
    height: calc(var(--4cbaa351));
}

.s-popup.s-popup-setting {
    z-index: var(--3c9266ff) !important;
}

.s-app .s-popup-mask {
    z-index: var(--3c9266ff);
}

.s-app .s-my-bets {
    height: calc(var(--497febee));
    /* z-index: var(--1c4d8e14); */
    z-index: 9999;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

.s-app .s-menu-active.s-text-main-menu-text-active span,
.s-app .s-menu-active.s-text-main-menu-text-active p {
    color: var(--color-main-menu-text-active);
}

.s-app .s-text-main-menu-text-active .s-event-count {
    background-color: var(--color-unread-number-bg);
}

.s-app .s-text-main-menu-text-active .s-event-count span {
    color: #fff;
}

.s-app .s-sub-row {
    grid-template-columns: minmax(10px, max-content) minmax(10px, max-content);
}

.rotate180 {
    transform: rotate(0deg) !important;
}

.Livechat-section {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 60px;
    height: 60px;
    z-index: 99;
    transform: translate3d(314px, 564px, 0px);
}

.Livechat-section li {
    list-style: none
}

.Livechat-section span {
    display: block;
    width: 10vw;
    height: 10vw;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    margin: 0 auto;
}