

.transfer-wrap, .transfer-wrap-slider {
    color: #243A48;
}

.pop-wrap, .select-list {
    width: 84vw;
    background: #fff;
    font-size: 4vw;
    box-shadow: 0 0.8vw 2.66667vw 0 rgb(0 0 0 / 50%);
    border-radius: 1.33333vw;
}

.align-L, .table th, .tc-wrap h3, .announce-wrap h3, .game-team h4, .scores-time, .pop-wrap h3, .select-list h3, .announce-wrap table, .announce-wrap table th {
    text-align: left;
}

.pop-wrap h3, .select-list h3 {
    font-size: 4vw;
    line-height: 1.2;
    color: #1E1E1E;
    background-image: linear-gradient(-180deg, #ccc 0%, #e8e8e8 58%);
    border-radius: 1.33333vw 1.33333vw 0 0;
    padding: 2.4vw 1.86667vw;
}

/*  .pop-wrap h3,  .select-list h3 {
    background-image: linear-gradient(-180deg, #414141 0%, #000 100%);
    color: #FFB80C;
} */

 .pop-wrap h3, .select-list h3 {
    background-image: linear-gradient(-180deg, #ffcc2e 0%, #ffb80c 58%);
        font-weight: 700;
    
}

.info-bet, .info-matched {
    margin-bottom: 1.86667vw;
    flex-wrap: wrap;
    line-height: 1.2;
}

.info-bet dt, .info-matched dt {
    flex: 0 0 100%;
    line-height: 8.53333vw;
}

.info-bet dt, .info-matched dt, .info-bet dd, .info-matched dd {
    padding: 1.86667vw;
    border-bottom: 1px solid #e0e6e6;
}


.info-bet dt span.back, .info-matched dt span.back, .bets-back dt span.back, .bets-lay dt span.back, .bets-book dt span.back, .bets-head dt span.back {
    background-color: #72bbef;
}

.info-bet dt span.lay, .info-matched dt span.lay, .bets-back dt span.lay, .bets-lay dt span.lay, .bets-book dt span.lay, .bets-head dt span.lay {
    background-color: #faa9ba;
}

.info-bet dt span, .info-matched dt span, .bets-back dt span, .bets-lay dt span, .bets-book dt span, .bets-head dt span {
    width: 16vw;
    border-radius: 1.06667vw;
    margin-right: 1.86667vw;
}

.info-bet dt h4 {
	    line-height: 8.53333vw;
	
}


.info-bet dd, .info-matched dd {
    flex: 1.7;
    color: #1b2d38;
    font-size: 4.53333vw;
    border-right: 1px solid #e0e6e6;
}


.info-bet dd:first-of-type, .info-matched dd:first-of-type {
    flex: 1;
}

.btn-send, .login {
    background-image: linear-gradient(-180deg, #ffb80c 15%, #ffa00c 100%);
    border-color: #bf7809;
}

.transfer-wrap-slider .available-wrap {
    position: relative;
    height: 22.66667vw;
}

.transfer-wrap .available-wrap, .transfer-wrap-slider .available-wrap {
    display: flex;
    justify-content: center;
}

.transfer-wrap-slider .available-wrap h4:first-child {
    border-right: 0.26667vw solid #C3D5E0;
}

.transfer-wrap .available-wrap h4, .transfer-wrap-slider .available-wrap h4 {
    font-size: 4.26667vw;
    line-height: 5.33333vw;
    width: 50%;
    padding: 1.33333vw 3.2vw 1.33333vw 3.2vw;
}

.transfer-wrap .available-wrap h4 span, .transfer-wrap-slider .available-wrap h4 span {
    display: block;
    font-size: 3.2vw;
    font-weight: normal;
}

.transfer-wrap-slider .available-wrap h4:last-child {
    text-align: right;
}

.transfer-content {
    border-top: 0.26667vw solid #8FA6B5;
    border-bottom: 0.26667vw solid #8FA6B5;
    width: 100%;
    margin-bottom: 2.66667vw;
}

.transfer-wrap-slider .transfer-content {
    position: relative;
    background-color: #CDE3F0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 21.33333vw;
    border: 0;
}

.transfer-wrap-slider .amount-input {
    position: absolute;
    top: -10.4vw;
    left: 50%;
    z-index: 1;
    width: min-content;
    line-height: 5.33333vw;
    background: #FFFFFF;
    border: 0.26667vw solid #DA8700;
    box-shadow: inset 0 0.53333vw 0.53333vw 0 rgb(0 0 0 / 27%);
    border-radius: 1.06667vw;
    font-size: 5.86667vw;
    text-indent: 0;
    transform: translateX(-50%);
}

.transfer-wrap-slider .amount-input:before {
    position: absolute;
    content: '';
    left: 50%;
    bottom: -3.2vw;
    width: 2.66667vw;
    height: 2.66667vw;
    background: #FFFFFF;
    border-bottom: 0.26667vw solid #DA8700;
    border-right: 0.26667vw solid #DA8700;
    transform: translate(-50%, -50%) rotate(
45deg);
}

.transfer-wrap-slider .amount-input.typeing:before {
    background: #FFF0CA;
}

input {
    position: relative;
    background: #fff;
    border: 1px solid #aaa;
    box-shadow: inset 0 0.53333vw 0 0 rgb(0 0 0 / 10%);
    border-radius: 1.6vw;
    color: #1E1E1E;
    font-size: 4vw;
    font-family: Helvetica, Tahoma, sans-serif;
    padding: 2.66667vw 1.86667vw;
    margin-bottom: 1.86667vw;
    /* -webkit-appearance: none; */
}

.transfer-wrap-slider .amount-input input {
    line-height: 5.33333vw;
    border: 0;
    box-shadow: none;
    margin-bottom: 0;
    padding: 1.33333vw;
    color: #2963A7 !important;
    font-weight: bold;
    border-radius: 0.8vw;
    text-align: center;
    box-shadow: inset 0 2px 2px 0 rgb(0 0 0 / 27%);
    margin-bottom: 0.26667vw;
}

.transfer-wrap-slider .slider {
    display: flex;
    width: 100%;
    height: 14.66667vw;
}

.transfer-wrap-slider .slider li:first-child, .transfer-wrap-slider .slider li:last-child {
    font-size: 4vw;
    line-height: 16vw;
    text-align: center;
    font-weight: bold;
    cursor: pointer;
}

.transfer-wrap-slider .slider li {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    width: 14.66667vw;
    background-image: linear-gradient(180deg, #FDFDFD 15%, #eee 100%);
}

.transfer-wrap-slider .slider li:first-child {
    border: 0.26667vw solid #bbb;
    border-radius: 1.33333vw 0 0 1.33333vw;
    border-radius: 0;
}

.transfer-wrap-slider .slider li.col-slider {
    flex: 1;
    border-top: 0.26667vw solid #bbb;
    border-bottom: 0.26667vw solid #bbb;
}
.transfer-wrap-slider .slider li {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    width: 14.66667vw;
    background-image: linear-gradient(180deg, #FDFDFD 15%, #eee 100%);
}

.transfer-wrap-slider .col-slider {
    position: relative;
}

.transfer-wrap-slider .balance-percent {
    position: absolute;
    display: flex;
    top: 0;
    width: 90%;
    justify-content: space-between;
}

.transfer-wrap-slider .balance-percent div {
    display: block;
    width: 0.8vw;
    height: 1.6vw;
    background-color: rgba(199,212,227,0.8);
}

.transfer-wrap-slider .balance-percent div:first-child, .transfer-wrap-slider .balance-percent div:last-child {
    background-color: rgba(199,212,227,0);
}

.transfer-wrap-slider .balance-percent div {
    display: block;
    width: 0.8vw;
    height: 1.6vw;
    background-color: rgba(199,212,227,0.8);
}

.transfer-wrap-slider .balance-percent div:first-child, .transfer-wrap-slider .balance-percent div:last-child {
    background-color: rgba(199,212,227,0);
}

.transfer-wrap-slider .slider-bar {
    position: relative;
    width: 90%;
    height: 3.2vw;
    background: #D1DDE5;
    box-shadow: inset 0 0.26667vw 0.26667vw 0 rgb(0 0 0 / 30%);
    border-radius: 1.6vw;
    margin: 0;
}

.transfer-wrap-slider .slider-bar_fill {
    position: absolute;
    top: 0;
    height: 2.66667vw;
    background-image: linear-gradient(180deg, #FFB80C 15%, #FFA00C 100%);
    border: 0.26667vw solid #CB8009;
    border-radius: 1.33333vw;
    background-position: inherit;
}

.transfer-wrap-slider .slider-bar_handle {
    position: absolute;
    z-index: 2;
    display: block;
    top: -2.66667vw;
    width: 8vw;
    height: 8vw;
    border-radius: 4.26667vw;
    background-image: linear-gradient(180deg, #FFB80C 15%, #FFA00C 100%);
    border: 0.26667vw solid #CB8009;
    box-shadow: inset 0 0.26667vw 0 0 rgb(255 255 255 / 50%);
}

.transfer-wrap-slider .slider li:last-child {
    border: 0.26667vw solid #bbb;
    border-radius: 0 1.33333vw 1.33333vw 0;
    border-radius: 0;
}   

ul {
    padding: 0;
}

.btn-list {
    padding: 0 1.6vw 2.66667vw;
    flex-wrap: wrap;
}

.btn-list li {
    flex: 1 1 auto;
    margin: 1.6vw 0.8vw 0 0.8vw;
    overflow: hidden;
}

.btn-list li:nth-child(1) {
    flex: 1;
}

.btn-list li a {
    height: 10.93333vw;
    line-height: 10.93333vw;
}

.btn, .btn.ui-btn{
    background-image: linear-gradient(-180deg, #fff 0%, #eee 89%);
    border: 1px solid #aaa;
    border-radius: 1.6vw;
    font-size: 4vw;
    font-weight: bold;
    line-height: 2.6;
    color: #1E1E1E;
}

.btn-list li:nth-child(2) {
    flex: 1;
}

.btn-list li:nth-child(3) {
    width: 100%;
}
h4 {
    font-weight: bold;
}

.reset-wrap {
    position: absolute;
    width: 84vw;
    z-index: 40;
}

.reset-wrap .close {
    position: absolute;
    right: 0;
    width: 10.66667vw;
    height: 10.66667vw;
}
.close {
    justify-content: center;
    align-items: center;
}

.reset-wrap h2 {
    font-size: 4.8vw;
    padding: 2.66667vw 13.33333vw 2.66667vw 2.66667vw;
    border-bottom: 1px solid #9FB5C2;
}

.reset-wrap .reset_con {
    padding: 4vw 5.33333vw;
}

.reset-wrap .login-panel {
    margin-bottom: 5.33333vw;
}

.reset-wrap .login-panel input {
    /* width: 100%; */
    width: calc(100% - 2 * (2.2vw));
}

 .btn-send,  .login {
    background-image: linear-gradient(-180deg, #464646 15%, #121212 100%);
    border-color: #000;
    color: #FFB80C;
}

.reset-wrap .login-panel .btn-send, .reset-wrap .login-panel .login {
    margin-top: 1.33333vw;
}

.transfer-wrap .error, .transfer-wrap-slider .error {
    text-indent: 2.66667vw;
    line-height: 4vw;
    color: #D0021B;
    font-size: 3.2vw;
}

.reset-wrap .note {
    font-size: 3.2vw;
    padding: 0 2.66667vw;
    color: #666;
}

.btn.disable, .disable.btn-send, .disable.login, .disable.form-select, .pages a.disable {
    background: #dfdfdf;
    color: #999;
    cursor: not-allowed;
}








.dflex {
    display:flex !important;
}
.dnone {
    display: none !important;
}
.modelflex {
    flex-direction: column;
}


.loading-overlay {
    position:fixed;
    top:0;
    left:0;
    width:100vw;
    height:100%;
    background-color:transparent;
    z-index:99;
    justify-content:center;
    align-items:center
}

.loading-wrap {
    width:40vw;
    height:24vw;
    background:#fff;
    font-size:3.2vw;
    color:#243A48;
    box-shadow:0 0.8vw 2.66667vw 0 rgba(0,0,0,0.5);
    border-radius:1.33333vw;
    padding:1.86667vw 0;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap
}
.loading-wrap p{
    flex:0 0 100%
}

.loading {
    position: relative;
    width: 18.66667vw;
    height: 9.33333vw;
}

.loading>div {
    position: absolute;
    width: 50%;
    height: 100%;
    border-radius: 50%;
}


.loading>div:nth-of-type(1) {
    left: 0;
    background:var(--loaderColor);
    animation: loading-1 0.6s ease infinite;
    z-index: 5;
}

.loading>div:nth-of-type(2) {
    left: 50%;
    background:var(--loaderColor2);
    animation: loading-2 0.6s ease infinite;
}

@keyframes loading-1{
    0%{
        left:0
    }
    50%{
        left:50%
    }
    100%{
        left:0
    }
}
@keyframes loading-2{
    0%{
        left:50%;
        z-index:1
    }
    49%{
        z-index:1
    }
    50%{
        left:0;
        z-index:10
    }
    100%{
        left:50%;
        z-index:10
    }
}





.full-pop, .auto-pop, .no-match_odds, .rules-pop, .rules-download, .login-pop {
    width: 100vw;
    background-color: #fff;
    border-radius: 1.6vw;
    height: 95%;
    overflow: auto;
    overflow-y: hidden;
}

.rules-pop, .rules-download {
     max-height: 95%; 
}


.rules-content {
    line-height: 5.86667vw;
    font-size: 3.73333vw;
    padding: 2.13333vw 1.86667vw;
    color: rgba(30,30,30,0.8);
}

.rules-content p {
    margin-bottom: 1.86667vw;
}


/* announcement */

.news-wrap {
    position: relative;
    flex-direction: column;
    width: 89.33333vw;
    height: 90%;
    border-radius: 1.33333vw;
    background: #fff;
}


.news-wrap .side-head {
    flex: 0 0 12.8vw;
    border-radius: 1.6vw 1.6vw 0 0;
}

.skyexchange .side-head {
    background: #222;
}

.marquee-pop .side-head {
    flex: 0 0 10.66667vw;
}

.marquee-pop .side-head h3 {
    font-size: 4vw;
    line-height: 1;
    justify-content: flex-start;
}

.news-wrap .announce-wrap {
    flex: 1;
    padding-top: 4.26667vw;
    padding-bottom: 0;
}
.marquee-pop .announce-wrap {
    flex: 1;
    border-radius: 0 0 1.33333vw 1.33333vw;
}

.article-wrap {
    border-bottom: 1px solid #e0e6e6;
    padding-top: 5.33333vw;
    padding-bottom: 6.66667vw;
}


.article-wrap:first-of-type {
    padding-top: 0;
}
.article-date {
    width: 18.66667vw;
    margin-bottom: 4.26667vw;
    border-top: 1.06667vw solid #4a4a4a;
    padding-top: 1.06667vw;
    color: #4a4a4a;
}
.article-date dt {
    margin-right: 0.53333vw;
    font-size: 8vw;
    line-height: 8.53333vw;
}

.article-date dd {
    font-size: 3.73333vw;
    line-height: 4.26667vw;
}

.tc-wrap p, .announce-wrap p {
    margin: 0 0 3.2vw 0;
}

.article-wrap:last-of-type {
    border-bottom: 0;
}

.pages {
    display: flex;
    justify-content: center;
    margin: 2.66667vw 0;
}

.pages li {
    list-style: none;
    margin-right: 0.8vw;
    margin-left: 0.8vw;
}

.news-wrap.marquee-pop .pages a {
    font-weight: normal;
    margin: 0;
    line-height: 9.33333vw;
    padding: 0vw 3.2vw;
}

.btn.disable, .disable.btn-send, .disable.login, .disable.form-select, .pages a.disable {
    background: #dfdfdf;
    color: #999;
    cursor: not-allowed;
}

.btn.select, .select.btn-send, .select.login, .select.form-select, .news-wrap.marquee-pop .pages a.select {
    background: #ffcc2e;
    border: 1px solid #be7809;
    box-shadow: inset 0 0.53333vw 0 0 rgb(0 0 0 / 10%);
}


.skyexchange .btn.select, .skyexchange .select.btn-send, .skyexchange .select.login, .skyexchange .select.form-select, .skyexchange .pages a.select, .pages .skyexchange a.select {
    background: #444;
    border-color: #000;
    color: #ffb80c;
}