/*
======================================================================================
* 퍼블리싱 할 때 dist > custom_css 안에서만 사용
* dist > app.css는 건들지 말것
* 전체 테마 color변경을 원할 경우
    초기 순서 : yarn install > yarn run watch 후 src > _color.css 에서 컬러테마 변경
    작업 중간 수정 : yarn run watch 후 src > _color.css 에서 컬러테마 변경
======================================================================================
*/

@import url("rubin.css?v=0.8");
@import url("layout.css?v=0.14");
@import url("home.css?v=0.2");
@import url("chat-inquiry.css?v=0.8");

/* 
#=========================================#
        리셋
#=========================================#
*/

* {
    touch-action: manipulation;
}

#app {
    background-color: #1a2c38;
}

.container_wrap {
    margin-top: 60px;
}

.content.right_open {
    margin-right: 370px;
}

.modal-join-btn, .modal-join-select {
    height: 40px;
}

@media all and (max-width: calc(1024px)) {
    .content.right_open {
        margin-right: 320px;
    }

    .content-title {
        height: 60px;
    }

    .star-logo {
        height: 70px !important;
    }
}

@media all and (max-width: calc(767px)) {
    .content.right_open {
        margin-right: 0;
    }
}

.withdraw_amount::after,
.deposit_amount::after,
.safe_withdraw_amount::after,
.safe_deposit_amount::after {
    z-index: 10;
    content: "원";
    position: absolute;
    top: 48%;
    right: 75px;
    transform: translateY(-50%);
}

.deposit_amount::after,
.withdraw_amount::after,
.safe_deposit_amount::after,
.safe_withdraw_amount::after {
    height: 28px;
    line-height: 30px;
    left: 60%;
    width: 16px;
}

@media all and (min-width: 640px) {

    .deposit_amount::after,
    .withdraw_amount::after,
    .safe_deposit_amount::after,
    .safe_withdraw_amount::after {
        left: 69.5%;
    }
}


.points_amount::after {
    z-index: 10;
    content: "P";
    position: absolute;
    top: 54%;
    right: 75px;
    transform: translateY(-50%);
}

.container {
    width: 100%;
    max-width: calc(1200px + 5rem) !important;
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

svg {
    fill: currentColor;
    stroke: currentColor;
    width: 1rem;
    height: 1rem;
}

nav svg {
    fill: currentColor;
    stroke: none;
    width: 20px;
    height: 21px;
}

svg.nostroke {
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

svg.profile,
.right_content svg.profile {
    fill: none;
    stroke-width: 2;
    stroke: currentColor;
}

svg.promotions,
.right_content svg.promotions {
    fill: none;
    stroke-width: 2;
    stroke: currentColor;
}

svg.svg-filter,
svg.svg-setting,
.dropdown-menu svg {
    stroke: none;
}

.right_content svg {
    stroke-width: 0;
    stroke: none;
}

svg.copy {
    fill: none;
    stroke-width: 2;
    stroke: currentColor;
}

svg.message {
    fill: none;
    stroke: currentColor;
    stroke-width: 8px;
}

.top-bar .svg-icon.message {
    stroke-width: 10px;
}

svg.icon-roulette {
    stroke: none;
}

@media all and (max-width: calc(767px)) {
    .container {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .no-padding {
        padding: 0 !important;
    }

    .inquiry-chatbox {
        width: 100%;
        margin-top: 50px;
    }

    .inquiry-chatbox p {
        margin-left: 50px;
        width: 100%;
    }

    .inquiry-chatbox pre {
        margin-left: 50px;
        width: 100%;
    }

    .inquiry-chatbox-replies {
        margin-top: 50px;
        transform: translate(-50px, 0px);
    }

    .inquiry-chatbox-replies .chat_time {
        transform: translate(1px, 0);
    }


}

*::-webkit-scrollbar {
    width: 5px;
    height: 5px;
    background-color: transparent;
}

*::-webkit-scrollbar-thumb {
    background-color: var(--color-grey-400);
    border-radius: 2px;
}

input:focus,
select:focus {
    box-shadow: none !important;
}

input[type="text"].input {
    width: 100%;
    height: 41px;
    border: 2px solid #2f4553;
    color: #fff;
    background-color: #0f212e;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    border-radius: 5px;
}

input[type="text"].input.half {
    width: 50%;
}

a.active_eff:active,
button.active_eff:active {
    transform: scale(0.95);
}

button.off {
    opacity: 0.9;
}

button.btn-gray {
    background-color: #2f4553;
    color: #fff;
    border: 0 none;
    border-radius: 3px;
}

button.btn-gray:hover {
    background-color: #557086;
}

/* button.btn-gray:disabled {
    background-color: #8D8D8D;
} */
button.btn-green {
    border: 0 none;
    background-color: #00e701;
    color: #05080a;
    border-radius: 3px;
}

input.form-control,
select.form-select:disabled,
select.form-select {
    border: 2px solid var(--form-control-border);
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
}

input.form-control.bgfull,
select.form-select.bgfull {
    background-color: #2f4553;
}

input.form-control.half,
select.form-select.half {
    width: 50%;
}

input.form-control.light {
    background-color: #fff;
    border: 2px solid #d5dceb;
    box-shadow: 0 none;
}

@media all and (max-width: calc(767px)) {

    select.form-select.half,
    input.form-control.half,
    input[type="text"].input.half {
        width: 100%;
    }
}

input[type="checkbox"].custom {
    display: none;
}

input[type="checkbox"].custom+i {
    display: inline-flex;
    width: 0.875rem;
    height: 0.875rem;
    border-radius: 3px;
    border: 2px solid #557086;
    background-color: #557086;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
    cursor: pointer;
}

input[type="checkbox"].custom.line+i {
    background-color: #0f212e;
}

input[type="checkbox"].custom:checked+i {
    background: #557086 url("/assets/images/custom/check_icon.svg") no-repeat center center / 75%;
}

/* switch */
.form-check-input[type="checkbox"] {
    border: 1px solid #2f4553;
    background-color: #2f4553;
}

.form-switch .form-check-input:before {
    background-color: #fff;
}

.form-switch .form-check-input:checked {
    background: #00e701;
}

.le_no_radius {
    border-radius: 0px 3px 3px 0 !important;
}

.form-check-input[type="checkbox"]:disabled:not(:checked) {
    background-color: #2f4553;
}

.form-check-input[type="checkbox"]:disabled:not(:checked):before {
    opacity: 0.5;
}

.animate-blink {
    animation: blink 2s infinite linear;
}

@keyframes blink {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

input[type="range"] {
    width: 100%;
    background-color: #00e701;
}

/*
#=========================================#
        로딩
#=========================================#
*/
#loadingContainer {
    display: flex;
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    /* background: #ffffffc1; */
    background: #1a2e38b3;
    z-index: 10001;
    justify-content: center;
    align-items: center;
}

.loaderContent {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.pageloader {
    width: 4.75rem;
    height: .75rem;
    background-color: #2f4553;
    top: 46%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    border-radius: 4rem;
}

.pageloader .loader-animation {
    border-radius: 4rem;
    position: absolute;
    background-color: #fff;
    top: .125rem;
    bottom: .125rem;
    animation: loaderAnimation .8s infinite;
    will-change: left, right;
}

@keyframes loaderAnimation {
    0% {
        right: 4rem;
        left: .125rem
    }

    5% {
        left: .125rem
    }

    50% {
        right: .125rem;
        left: 4rem
    }

    55% {
        right: .125rem
    }

    to {
        right: 4rem;
        left: .125rem
    }
}

/*
#=========================================#
        공통 컨텐츠
#=========================================#
*/
.content_title {
    background-color: var(--color-grey-500);
}

/* 공통 : 아이템리스트 */
.poster_list {
    display: grid;
    position: relative;
    align-content: flex-start;
}

.poster_list div {
    padding-top: .25rem;
    gap: .5rem;
    align-items: center;
    justify-content: stretch;
    grid-auto-flow: column;
    display: grid;
}

.poster_list div span {
    line-height: 1.5;
    display: inline-flex;
    align-items: center;
    font-size: .75rem;
}

.poster_list_box {
    display: grid;
    gap: 16px 16px;
    grid-template-columns: repeat(8, 1fr);
}

.poster_list_box.seven {
    grid-template-columns: repeat(7, 1fr);
    gap: 32px 16px;
}

.poter_list_box.seven img {
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgba(27, 23, 23, .2), 0 2px 4px -1px rgba(0, 0, 0, .12);
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

.poster_list a {
    overflow: hidden;
    position: relative;
    display: block;
    border-radius: 10px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(27, 23, 23, 0.2), 0 2px 4px -1px rgba(0, 0, 0, 0.12);
}

.poster_list a img {
    width: 100%;
}

.poster_list a:hover {
    -webkit-transform: translateY(-4%);
    -moz-transform: translateY(-4%);
    -ms-transform: translateY(-4%);
    transform: translateY(-4%);
}

.poster_list a .hover_box {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #4391e7;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    transition: all 0.3s;
}

.poster_list a:hover .hover_box {
    opacity: 0.9;
}

.poster_list a .hover_box p {
    font-size: 16px;
    font-weight: 500;
    text-align: center;
}

.poster_list a .hover_box svg {
    width: 30px;
    height: 30px;
}

.poster_list a .hover_box span {
    font-size: 16px;
}

.noimg-text {
    display: flex !important;
    flex-wrap: wrap;
    text-align: center;
    gap: 0 !important;
    justify-content: center !important;
    align-items: start !important;
    bottom: 0;
    height: 64%;
    padding: 0 4px;
}

.noimg-text .game-name {
    padding-top: 0;
    width: 100%;
    font-size: 21px;
    font-weight: 500;
}

.noimg-text .game-provider {
    align-self: flex-end;
    width: 100%;
    padding-bottom: 8px;
    font-size: 11px;
}

@media all and (max-width: calc(1294px)) {
    .poster_list_box {
        grid-template-columns: repeat(7, 1fr);
    }
}

@media all and (max-width: calc(1135px)) {
    .poster_list_box {
        grid-template-columns: repeat(6, 1fr);
    }

    .poster_list_box.seven {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media all and (max-width: calc(974px)) {
    .poster_list_box {
        grid-template-columns: repeat(5, 1fr);
    }

    .poster_list_box.seven {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media all and (max-width: calc(815px)) {
    .poster_list_box {
        gap: 16px 8px;
        grid-template-columns: repeat(4, 1fr);
    }

    .poster_list_box.seven {
        grid-template-columns: repeat(4, 1fr);
        gap: 20px 10px;
    }

    .poster_list a:hover {
        -webkit-transform: none;
        -moz-transform: none;
        -ms-transform: none;
        transform: none;
    }

    .poster_list a:active {
        transform: scale(0.98);
    }

    .poster_list a:hover .hover_box {
        opacity: 0;
    }
}

@media all and (max-width: calc(547px)) {
    .poster_list_box {
        grid-template-columns: repeat(3, 1fr);
    }

    .poster_list_box.seven {
        grid-template-columns: repeat(3, 1fr);
        gap: 18px 9px;
    }

}

.pulse {
    width: 6.5px;
    height: 6.5px;
    margin-left: 2px;
    animation: pulsePlaying 1s infinite ease-out;
    border-radius: 50%;
    z-index: 1;
    background: #1fff20;
}

@keyframes pulsePlaying {
    0% {
        box-shadow: 0 0 #00e70166;
    }

    30% {
        box-shadow: 0 0 2px 2px #00e70166;
    }

    70% {
        box-shadow: 0 0 2px 2px #00e70166;
    }

    100% {
        box-shadow: 0 0 #00e70166;
    }
}

/* 공통 : select 커스텀 */
.select_custom {
    z-index: 10;
    position: relative;
    display: inline-block;
}

.select_custom.nopadding .select_toggle_btn {
    height: auto;
    padding: 0;
}

.select_custom .select_toggle_btn {
    width: auto;
    height: 44px;
    padding: 13px 16px;
    border-radius: 3px;
    background-color: #0f212e;
}

.select_custom .select_toggle_btn.gray {
    background-color: var(--color-grey-400);
}

.select_custom .select_toggle_btn.gray:hover {
    background-color: #557086;
}

.select_custom .select_toggle_btn p {
    display: flex;
    gap: 5px;
    align-items: center;
    font-weight: bold;
}

.select_custom .select_toggle_btn p i {
    display: none;
    justify-content: center;
    height: 22px;
    min-width: 22px;
    margin-left: 5px;
    padding: 0 5px;
    background-color: #4391e7;
    color: #04172d;
    border-radius: 20px;
    font-style: normal;
}

.select_custom .select_toggle_btn p i.on {
    display: inline-flex;
}

.select_custom .select_toggle_btn:active p {
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

.select_custom .select_toggle_btn svg {
    font-size: 18px;
    color: #b1bad3;
}

.select_custom .select_toggle_btn.active svg:last-of-type {
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg);
}

.select_custom .option_box {
    display: none;
    z-index: 1;
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    min-width: 100%;
    height: auto;
    background-color: #fff;
    border-radius: 5px;
    color: #2f4553;
    padding: 5px 0;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
}

.select_custom .option_box:before {
    content: "";
    position: absolute;
    left: calc(50% - 4px);
    bottom: 100%;
    width: 14px;
    height: 7px;
    border-bottom: 7px solid #fff;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.select_custom .option_box span,
.select_custom .option_box.input_option button {
    white-space: nowrap;
}

.select_custom .option_box button {
    width: 100%;
}

.select_custom .option_box:not(.input_option) button:hover {
    background-color: #b1bad3;
    color: #05080a;
}

.select_custom .option_box button.active:hover,
.select_custom .option_box button.active {
    color: #1475e1;
    background-color: #fff;
}

.select_custom .option_box:not(.input_option) button:active p {
    -webkit-transform: scale(0.95);
    -moz-transform: scale(0.95);
    -ms-transform: scale(0.95);
    transform: scale(0.95);
}

.select_custom .option_box.center p {
    justify-content: center;
}

.select_custom .option_box.between p {
    justify-content: space-between;
}

.select_custom .option_box.img_option p {
    padding: 5px 12px;
}

.select_custom .option_box.img_option p svg {
    stroke-width: 0;
}

.select_custom .option_box p {
    display: flex;
    align-items: center;
    justify-content: left;
    gap: 7px;
    padding: 9px 12px;
    font-weight: 600;
}

.select_custom .option_box.input_option p {
    cursor: pointer;
    justify-content: left;
    gap: 7px;
}

.select_custom .option_box.input_option button.clear_btn {
    border-top: 1px solid #d5dceb;
}

.select_custom .option_box.input_option button.clear_btn p {
    justify-content: center;
}

.select_custom .option_box.input_option i {
    display: inline-flex;
    align-items: center;
    height: 20px;
    min-width: 22px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: 20px;
    font-style: normal;
    background-color: #4391e7;
    color: #04172d;
}

.select_custom .option_box.input_option .off.active i {
    background-color: #4391e7;
    color: #04172d;
}

.select_custom .option_box.input_option .off i {
    background-color: #071824;
    color: #b1bad3;
}

.select_custom .option_box.input_option input[type="checkbox"] {
    display: none;
}

.select_custom .option_box.input_option input[type="checkbox"]+b {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    border: 2px solid #2f4553;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
}

.select_custom .option_box.input_option input[type="checkbox"]:checked+b {
    background: #2f4553 url("/assets/images/custom/check_icon.svg") no-repeat center center / 75%;
}

.select_custom .option_box.input_option .en-provider-count {
    line-height: 22px;
    min-width: 30px;
}

/*
#=========================================#
        스포츠 탭 커스텀
#=========================================#
*/
.tab-content .tab-pane {
    width: 100% !important;
}

.sports-tabs {
    padding: 20px 8px 5px;
    background-color: #0f212e;
    border-radius: 10px;
}

.sports-tabs .nav {
    padding: 0;
}

.nav.nav-link-tabs .nav-item .nav-link {
    position: relative;
    color: var(--color-grey-200);
    border: 0 none;
}

.nav.nav-link-tabs .nav-item .nav-link:hover,
.nav.nav-link-tabs .nav-item .nav-link.active {
    color: #fff;
}

.nav.nav-link-tabs .nav-item .nav-link.active {
    border: 0 none;
}

.nav.nav-link-tabs .nav-item .nav-link.active:before {
    content: "";
    position: absolute;
    left: calc(50% - 6px);
    top: -20px;
    width: 12px;
    height: 6px;
    border-radius: 0 0 100% 100%;
    background-color: #1475e1;
}

.nav.nav-link-tabs .nav-item .nav-link>div {
    position: relative;
}

.nav.nav-link-tabs .nav-item .nav-link>div span {
    position: absolute;
    right: -10px;
    top: -6px;
    z-index: 1;
    background-color: #071824;
    color: #b1bad3;
    padding: 2px 5px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 500;
}

.nav.nav-link-tabs .nav-item .nav-link.active>div span {
    background-color: #4391e7;
    color: #04172d;
}

.nav.nav-link-tabs .nav-item .nav-link.active:before {
    background-color: #4391e7;
}

.nav.nav-link-tabs .nav-item .nav-link p {
    max-width: 45px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/*
#=========================================#
        스포츠 리스트 커스텀
#=========================================#
*/
.sports_list {
    font-family: inherit;
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    z-index: 0;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12), inset 0 1px rgba(255, 255, 255, 0.04);
}

.sports_list+.sports_list {
    margin-top: 10px;
}

.sports_list.type02>dt {
    background-color: #071e2a;
}

.sports_list.type02>dd {
    border-top: 0 none;
    padding: 10px;
    background-color: #1a2c38;
}

.sports_list dt {
    padding: 12px 16px;
    background-color: var(--color-grey-500);
    border-radius: 5px 5px 0 0;
    cursor: pointer;
}

.sports_list dt span {
    display: none;
}

.sports_list dt.fold {
    border-radius: 5px;
}

.sports_list dt.fold span {
    display: inline-flex;
}

.sports_list dt.fold svg {
    transform: rotate(90deg);
}

.sports_list dd {
    padding: 8px 0;
    background-color: var(--color-grey-500);
    border-top: 2px solid var(--color-grey-400);
}

.sports_list dd.bg-dark {
    border-top: 2px solid var(--color-grey-400);
    background-color: var(--color-grey-800);
}

.sports_list dd .sports_detail {
    display: grid;
    grid-gap: 0.5rem;
    grid-template-rows: repeat(3, auto);
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-template-areas:
        "set set set set line line winner winner winner winner line2 line2"
        "teams teams teams score score outcomes outcomes outcomes outcomes outcomes outcomes market"
        "teams teams teams score score outcomes outcomes outcomes outcomes outcomes outcomes market";
    align-items: center;
    padding: 8px 16px;
    border-radius: 0 0 5px 5px;
}

.sports_list dd .sports_detail:first-of-type .line,
.sports_list dd .sports_detail:first-of-type .line2 {
    display: none;
}

.sports_list dd .sports_detail .set {
    grid-area: set;
    font-size: 12px;
}

.sports_list dd .sports_detail .set p {
    display: none;
}

.sports_list dd .sports_detail .set span {
    display: inline-flex;
    padding: 0 5px;
    background-color: #e9113c;
    font-weight: 600;
    color: #fff;
    border-radius: 3px;
}

.sports_list dd .sports_detail .set span.end {
    background-color: #000;
}

.sports_list dd .sports_detail .set .time {
    position: relative;
    color: #fff;
    font-weight: bold;
    padding-right: 2px;
}

.sports_list dd .sports_detail .set .time:before {
    content: "'";
    position: absolute;
    right: 0;
    top: -2px;
    font-size: 14px;
    animation: blink 2s infinite linear;
}

@keyframes blink {

    0%,
    100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

.sports_list dd .sports_detail .line {
    grid-area: line;
}

.sports_list dd .sports_detail .winner {
    grid-area: winner;
    font-size: 12px;
}

.sports_list dd .sports_detail .line2 {
    grid-area: line2;
}

.sports_list dd .sports_detail .teams {
    grid-area: teams;
    font-weight: bold;
    color: #fff;
}

.sports_list dd .sports_detail .teams .grid_summary {
    display: block;
    color: var(--color-grey-200);
}

.sports_list dd .sports_detail .teams .grid_summary svg {
    color: var(--color-grey-200);
}

.sports_list dd .sports_detail .teams svg {
    width: 12px;
    height: 12px;
    color: #4391e7;
}

.sports_list dd .sports_detail .score {
    grid-area: score;
}

.sports_list dd .sports_detail .score p {
    width: 20px;
}

.sports_list dd .sports_detail .score p+p {
    margin-top: 5px;
}

.sports_list dd .sports_detail .outcomes {
    grid-area: outcomes;
}

.sports_list dd .sports_detail .outcomes p:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.sports_list dd .sports_detail .outcomes button {
    display: flex;
    background: var(--color-grey-900);
    border-radius: 3px;
    transition: background .1s;
    justify-content: space-between;
    width: 100%;
    position: relative;
    font-size: var(--text-size-default);
    color: #fff;
    align-items: flex-start;
    min-width: 0;
    padding: 7px 10px;
    /* width: 50%;
    padding: 7px 10px;
    background-color: var(--color-grey-900);
    border-radius: 3px;
    text-align: left;
    font-weight: bold;
    color: #fff; */
}

.sports_list dd .sports_detail .outcomes button:disabled {
    cursor: default !important;
}

.sports_list dd .sports_detail .outcomes button:disabled p {
    opacity: 0.2;
}

.sports_list dd .sports_detail .outcomes button:disabled p:last-of-type {
    opacity: 0.4;
}

.sports_list dd .sports_detail .outcomes button:not(:disabled):not(.active):hover {
    background-color: #082f5a;
}

.sports_list dd .sports_detail .outcomes button.active {
    background-color: #1475e1;
    color: #000;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.sports_list dd .sports_detail .outcomes button.active p:last-of-type {
    color: #fff;
}

.sports_list dd .sports_detail button p svg.incresed {
    animation-name: increased;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}

.sports_list dd .sports_detail button p svg.decrease {
    animation-name: decrease;
    animation-duration: 1.2s;
    animation-iteration-count: infinite;
}

@keyframes increased {
    0% {
        transform: translateY(30%);
        opacity: 1;
    }

    10% {
        transform: translateY(0%);
        opacity: 0;
    }
}

@keyframes decrease {
    0% {
        transform: translateY(-30%);
        opacity: 1;
    }

    10% {
        transform: translateY(0%);
        opacity: 0;
    }
}

.sports_list dd .sports_detail .market {
    grid-area: market;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sports_list dd .sports_detail .line,
.sports_list dd .sports_detail .line2 {
    width: 100%;
    height: 2px;
    background: var(--color-grey-400);
}

.sports_list dd .sports_detail .market svg {
    display: none;
}

/* grid3 붙었을때, */
.sports_list dd .sports_detail.grid3 {
    grid-template-columns: repeat(17, 1fr);
    grid-template-rows: repeat(3, auto);
    row-gap: 4px;
    grid-template-areas:
        "set set set line line line line title1 title1 title1 title2 title2 title2 title3 title3 title3 line2"
        "teams teams teams teams score score score outcomes1 outcomes1 outcomes1 outcomes2 outcomes2 outcomes2 outcomes3 outcomes3 outcomes3 market"
        "teams teams teams teams score score score outcomes1 outcomes1 outcomes1 outcomes2 outcomes2 outcomes2 outcomes3 outcomes3 outcomes3 market"
        "summary summary summary summary summary summary summary outcomes1 outcomes1 outcomes1 outcomes2 outcomes2 outcomes2 outcomes3 outcomes3 outcomes3 market";
}

.sports_list dd .sports_detail .grid3_title1 {
    grid-area: title1;
    display: none;
    justify-content: center;
    font-size: 12px;
}

.sports_list dd .sports_detail .grid3_title2 {
    grid-area: title2;
    display: none;
    justify-content: center;
    font-size: 12px;
}

.sports_list dd .sports_detail .grid3_title3 {
    grid-area: title3;
    display: none;
    justify-content: center;
    font-size: 12px;
}

.sports_list dd .sports_detail .outcomes1 {
    grid-area: outcomes1;
    display: none;
    height: 100%;
}

.sports_list dd .sports_detail .outcomes2 {
    grid-area: outcomes2;
    display: none;
    height: 100%;
}

.sports_list dd .sports_detail .outcomes3 {
    grid-area: outcomes3;
    display: none;
    height: 100%;
}

.sports_list dd .sports_detail .grid3_outcomes {
    display: none;
}

.sports_list dd .sports_detail .grid3_outcomes {
    width: 100%;
    flex-direction: column;
    gap: 8px;
}


.sports_list dd .sports_detail .grid3_outcomes.outcomes3 {
    justify-content: center;
    align-items: center;
    flex-direction: column;
    height: 100%;
}

.sports_list dd .sports_detail .grid3_outcomes.outcomes3 button {
    height: 50%;
    align-items: center;
}

.sports_list dd .sports_detail .grid3_outcomes p:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
}

.sports_list dd .sports_detail .grid3_outcomes button {
    display: flex;
    background: var(--color-grey-900);
    border-radius: 3px;
    transition: background .1s;
    justify-content: space-between;
    width: 100%;
    position: relative;
    font-size: var(--text-size-default);
    color: #fff;
    align-items: flex-start;
    min-width: 0;
    padding: 7px 10px;
    /* align-items: center;
    width: 100%;
    height: 100%;
    padding: 7px 10px;
    background-color: var(--color-grey-900);
    border-radius: 3px;
    text-align: left;
    font-weight: bold;
    color: #fff; */
}

.sports_list dd .sports_detail.grid3 .grid3_outcomes button:disabled {
    display: flex;
    cursor: default !important;
    align-items: center;
    justify-content: space-between;
}

.sports_list dd .sports_detail.grid3 .grid3_outcomes button:disabled p {
    opacity: 0.2;
}

.sports_list dd .sports_detail.grid3 .grid3_outcomes button:disabled p:last-of-type {
    opacity: 0.4;
}

.sports_list dd .sports_detail.grid3 .grid3_outcomes button.rock:disabled {
    height: 100%;
    align-items: center;
    justify-content: center;
}

.sports_list dd .sports_detail .grid3_outcomes button:disabled svg {
    opacity: 0.2;
}

.sports_list dd .sports_detail .grid3_outcomes button:not(:disabled):hover {
    background-color: #082f5a;
}

.sports_list dd .sports_detail .grid3_outcomes button.active {
    background-color: #1475e1;
    color: #000;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.sports_list dd .sports_detail .grid3_outcomes button.active p:last-of-type {
    color: #fff;
}

.sports_list dd .sports_detail .grid_summary {
    grid-area: summary;
    display: none;
    font-weight: 600;
}

.sports_list dd .sports_detail .grid_summary>* {
    display: inline;
}

.sports_list dd .sports_detail .grid_summary a:first-of-type {
    color: #fff;
}

.sports_list dd .sports_detail .grid_summary a:hover {
    color: #fff;
}

.sports_list dd .sports_detail.grid3 .grid3_title1,
.sports_list dd .sports_detail.grid3 .grid3_title2,
.sports_list dd .sports_detail.grid3 .grid3_title3,
.sports_list dd .sports_detail.grid3 .grid3_outcomes {
    display: flex;
}

.sports_list dd .sports_detail.grid3 .grid_summary {
    display: block;
}

.sports_list dd .sports_detail.grid3 .winner,
.sports_list dd .sports_detail.grid3 .outcomes {
    display: none;
}

.sports_list dd .sports_detail.grid3 .teams .grid_summary {
    display: none;
}

.sports_list dd .sports_detail.out_detail {
    display: block;
}

.sports_list dd .sports_detail.out_detail .grid_summary {
    display: block;
}

.sports_list .btn_abs {
    position: absolute;
    right: 40px;
    top: 2px;
}

.sports_list .btn_abs button {
    padding: 10px 5px;
    color: #b1bad3;
    font-weight: bold;
}

.sports_list .btn_abs .active {
    color: #fff;
}

@media all and (max-width: 767px) {
    .sports_list dd .sports_detail {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr auto;
        grid-row-gap: 4px;
        grid-template-areas:
            "set set set set market market"
            "teams teams teams teams teams teams"
            "winner winner winner winner winner winner "
            "outcomes outcomes outcomes outcomes outcomes outcomes"
            "outcomes outcomes outcomes outcomes outcomes outcomes";
    }

    .sports_list dd .sports_detail+.sports_detail {
        border-top: 2px solid #2f4553;
    }

    .sports_list dd .sports_detail .set p {
        display: flex;
    }

    .sports_list dd .sports_detail .line,
    .sports_list dd .sports_detail .line2 {
        display: none;
    }

    .sports_list dd .score {
        display: none;
    }

    .sports_list dd .sports_detail .market {
        display: flex;
        justify-content: end;
    }

    .sports_list dd .sports_detail .market svg {
        display: block;
        margin-right: 5px;
    }

    .sports_list dd .sports_detail.grid3 {
        grid-template-columns: repeat(6, 1fr);
        grid-template-rows: 1fr auto;
        grid-row-gap: 4px;
        grid-template-areas:
            "set set set set market market"
            "teams teams teams teams teams teams"
            "title1 title1 title1 title1 title1 title1 "
            "outcomes1 outcomes1 outcomes1 outcomes1 outcomes1 outcomes1"
            "title2 title2 title2 title2 title2 title2 "
            "outcomes2 outcomes2 outcomes2 outcomes2 outcomes2 outcomes2"
            "title3 title3 title3 title3 title3 title3 "
            "outcomes3 outcomes3 outcomes3 outcomes3 outcomes3 outcomes3";
    }

    .sports_list dd .sports_detail.grid3 .grid_summary {
        display: none;
    }

    .sports_list dd .sports_detail.grid3 .grid3_outcomes button:disabled {
        height: 60px;
    }

    .sports_list dd .sports_detail .grid3_outcomes {
        flex-direction: row;
    }

    .sports_list dd .sports_detail .teams .grid_summary {
        display: none;
    }

    .sports_list dd .sports_detail .teams {
        display: flex;
        gap: 5px;
    }

    .sports_list dd .sports_detail .teams p:last-of-type:before {
        content: "-";
    }

    .content-title {
        height: 50px;
    }

    .star-logo {
        height: 50px !important;
    }
}

.draggable2_modal.show {
    scale: 1;
    z-index: 99;
}

.draggable2_modal {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: -99;
    scale: 0;
}

.draggable2_modal_header {
    cursor: move;
}

.draggable3_modal.show {
    scale: 1;
    z-index: 99;
}

.draggable3_modal {
    position: fixed;
    bottom: 2%;
    right: 2%;
    z-index: -99;
    scale: 0;
}

.draggable3_modal_header {
    cursor: move;
}

/* 스포츠 > 모두 탭 */
.btn_radio_box,
.check_list_box {
    /* display: flex;
    flex-wrap: wrap; */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    padding: 6px;
}

.check_list_btn,
.btn_radio_box .check_btn,
.check_list_box .check_btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 16px;
    background-color: #2f4553;
    box-shadow: 0rem 0.0625rem 0.1875rem #00000033, 0rem 0.0625rem 0.125rem #0000001f;
    border-radius: 4px;
    font-weight: bold;
}

.check_list_box .check_btn label {
    display: flex;
}

.check_list_btn {
    width: 100%;
}

.check_list_btn,
.btn_radio_box .check_btn,
.check_list_box.dark_ver .check_btn {
    justify-content: space-between;
    padding: 5px 16px;
    background-color: var(--color-grey-900);
}

.check_list_btn:hover,
.btn_radio_box .check_btn:hover,
.check_list_box.dark_ver .check_btn:hover {
    background-color: var(--color-grey-800);
}

.check_list_btn.of_list_btn {
    padding: 5px;
}

.check_list_btn.of_list_btn span:first-of-type {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.check_list_btn span:last-of-type,
.btn_radio_box .check_btn span:last-of-type,
.check_list_box.dark_ver .check_btn span:last-of-type {
    color: #4391e7;
}

.check_list_btn.active,
.btn_radio_box .check_btn.active,
.check_list_box.dark_ver .check_btn.active {
    background-color: #1475e1;
    color: #000;
}

.check_list_btn.active span:last-of-type,
.btn_radio_box .check_btn.active span:last-of-type,
.check_list_box.dark_ver .check_btn.active span:last-of-type {
    color: #fff;
}

.check_list_btn:disabled,
.btn_radio_box .check_btn:disabled,
.check_list_box.dark_ver .check_btn:disabled {
    opacity: 0.5;
    cursor: default;
}


/* 스포츠 페이지 상단 - 슬래시 */
.btn_slash {
    position: relative;
}

.btn_slash:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 170%;
    margin: -31px 1px;
    background-color: var(--color-grey-600);
    transform: skew(-20deg);
}

@media all and (max-width:767px) {
    .history_nav>* {
        display: none;
    }

    .history_nav>*:last-child {
        display: block;
    }
}

/* 내 베팅 > 하단 영수증 처리 */
.receipt_bottom {
    position: relative;
}

.receipt_bottom:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 6px;
    background: radial-gradient(circle, transparent, transparent 50%, var(--color-grey-500) 50%, var(--color-grey-500) 100%) 0px 1px/0.7rem 0.7rem repeat-x;

}

/** form custom css **/
.required {
    color: var(--form-required);
}

.form-control-btn-primary {
    background-color: var(--form-control-btn-primary);
}

.form-control-btn-primary:hover {
    background-color: var(--form-control-btn-primary-hover);
}

.form-control-btn-secondary {
    background-color: var(--form-control-btn-secondary);
}

.form-control-btn-secondary:hover {
    background-color: var(--form-control-btn-secondary-hover);
}

.btn-social {
    border: 0 none;
    border-radius: 3px;
    color: #fff;
    background-color: var(--btn-social);
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.3);
}

/* .btn-social:hover, .btn-social:active  {
    background-color: var(--btn-social-hover);
} */
.btn-social:focus {
    outline: 0;
    box-shadow: none;
}

.form-control-checkbox {
    display: inline-flex;
    align-items: center;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 1px 0;
    box-sizing: border-box;
    font-size: 0.625rem;
    cursor: pointer;
}

.form-control-checkbox input[type=checkbox] {
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
}

.form-control-checkbox input[type=checkbox]+div {
    border: 1px solid var(--form-control-checkbox-border);
    height: 0.875rem;
    width: 0.875rem;
    margin-right: 0.25rem;
    box-sizing: border-box;
    border-radius: 2px;
    position: relative;
}

.form-control-checkbox input[type=checkbox]:checked+div {
    border-color: var(--form-control-checkbox-border);
    transition: border-color 107ms cubic-bezier(0.65, 0.25, 0.56, 0.96);
}

.form-control-checkbox input[type=checkbox]:checked+div .form-control-check {
    opacity: 1;
    transition: opacity 107ms cubic-bezier(0.65, 0.25, 0.56, 0.96);
}

.form-control-checkbox input[type=checkbox]:checked+div .form-control-check polyline {
    -webkit-animation: dash-check 107ms cubic-bezier(0.65, 0.25, 0.56, 0.96) forwards;
    animation: dash-check 107ms cubic-bezier(0.65, 0.25, 0.56, 0.96) forwards;
}

.form-control-check {
    height: 100%;
    width: 100%;
    transform: scale(1);
    color: var(--form-control-checkbox-border);
    opacity: 0;
}

.form-control-check polyline {
    fill: none;
    transform-origin: 50% 50%;
    stroke-width: 4px;
    stroke-dasharray: 22.7713679002;
    stroke: currentcolor;
}

.form-control-checkbox .highlight {
    color: var(--form-control-highlight);
}

@supports (display: grid) {
    .ui-check polyline {
        stroke-dashoffset: 22.7713679002;
    }
}

@-webkit-keyframes dash-check {
    to {
        stroke-dashoffset: 0;
    }
}

@keyframes dash-check {
    to {
        stroke-dashoffset: 0;
    }
}

.radioset [type='radio'] {
    border-width: 2px;
    border-color: #fff;
    background-color: transparent;
}

.radioset [type='radio']:focus,
.radioset [type='radio']:checked {
    color: transparent;
    border-color: white;
    box-shadow: var(--tw-ring-offset-shadow);
}

/* SKELETON LOADING */
.wrap.svelte-gsxwxb {
    display: grid;
    position: relative;
    align-content: flex-start;
}

.image-focus.svelte-1idih21 {
    display: contents;
}

.game-card-wrap.svelte-3eknor {
    position: relative;
    transition: .3s;
}

.image-focus.svelte-1idih21 a {
    outline: none;
}

.link.svelte-3eknor {
    transform: translate(0);
    border-radius: .5rem;
    overflow: hidden;
    display: block;
}

.img-wrap.svelte-gsxwxb {
    position: relative;
    will-change: transform;
    transition: .3s;
    width: 100%;
}

.wrap.svelte-gsxwxb {
    display: grid;
    position: relative;
    align-content: flex-start;
}

.placeholder.svelte-gsxwxb {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: .5rem;
    box-shadow: 0 4px 6px -1px rgba(27, 23, 23, .2), 0 2px 4px -1px rgba(0, 0, 0, .12);
    overflow: hidden;
    opacity: 1;
}

.img-wrap.svelte-gsxwxb:before {
    content: "";
    display: block;
    width: 100%;
    padding-top: 134.1463414634%;
}

.line.svelte-1261s4u {
    display: inline-flex;
    border-radius: 3px;
    line-height: inherit;
    background: #aeb8d6;
    animation: svelte-1261s4u-gradient 1.5s linear infinite;
}

.info-wrap.svelte-gsxwxb {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    flex-direction: column;
    display: flex;
    justify-content: space-between;
    padding: 1rem;
    pointer-events: none;
    transition: .3s;
}

.game-info-container.svelte-pzaphj {
    z-index: 1;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.game-info-wrap.svelte-pzaphj {
    z-index: 1;
    display: flex;
    text-transform: capitalize;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    width: 100%;
}

.gameName.svelte-b61fgr {
    width: 100%;
    font-size: 1.5rem;
    color: #fff;
    margin-bottom: .5rem;
}

.line.svelte-1261s4u {
    display: inline-flex;
    border-radius: 3px;
    line-height: inherit;
    background: #aeb8d6;
    animation: svelte-1261s4u-gradient 1.5s linear infinite;
}

.wrap-icon.svelte-pzaphj {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
    color: #fff;
    z-index: 1;
    margin-bottom: 1rem;
}

.image-focus.svelte-1idih21 a svg {
    border-radius: .25rem;
}

.image-focus.svelte-1idih21 svg {
    transition: .2s;
    outline-offset: .125rem;
}

.game-info-wrap.svelte-pzaphj {
    z-index: 1;
    display: flex;
    text-transform: capitalize;
    overflow: hidden;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    width: 100%;
}

@keyframes svelte-1261s4u-gradient {

    0%,
    to {
        opacity: .5
    }

    50% {
        opacity: .8
    }
}

.line.svelte-1261s4u {
    display: inline-flex;
    border-radius: 3px;
    line-height: inherit;
    background: #aeb8d6;
    animation: svelte-1261s4u-gradient 1.5s linear infinite;
}

.game-card-wrap.svelte-3eknor:hover:not(.game-card-wrap:hover.is-mobile) {
    transform: translateY(-4%);
}

.card-list.svelte-1xgoul {
    display: grid;
    grid-gap: 2rem 1rem;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
}

.scrollY {
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
    -webkit-overflow-scroll: touch;
    scrollbar-width: thin;
}

.scrollY,
.scrollX {
    scrollbar-color: #2f4553 transparent;
}

/* DICE LOADING */
.svg-loader {
    transform-origin: center;
    animation-name: rotateAnimation;
    animation-duration: 1.6s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotateAnimation {

    0%,
    5% {
        transform: rotate(0) translate(0);
    }

    15% {
        transform: rotate(45deg) translate(-10%, -10%);
    }

    20%,
    30% {
        transform: rotate(90deg) translate(0);
    }

    37.5% {
        transform: rotate(135deg) translate(-10%, 10%);
    }

    45%,
    55% {
        transform: rotate(180deg) translate(0);
    }

    62.5% {
        transform: rotate(225deg) translate(10%, 10%);
    }

    70%,
    80% {
        transform: rotate(270deg) translate(0);
    }

    87.5% {
        transform: rotate(315deg) translate(10%, -10%);
    }

    95%,
    100% {
        transform: rotate(360deg) translate(0);
    }
}

.referral-items::-webkit-scrollbar-thumb,
.transaction-history-table::-webkit-scrollbar-thumb {
    background: #D9D9D9;
}

.page__btn,
.page__numbers {
    cursor: pointer;
}

.page__numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1.1rem;
    border-radius: 0.4rem;
}

.page__numbers.active {
    background: #fff;
    color: #2F4553;
}

.transaction-history-dialog,
.money-logs-modal {
    width: 100% !important;
    max-width: 720px;
}

.transaction-history-table::-webkit-scrollbar {
    background-color: transparent;
    scrollbar-gutter: 120px;
}

.transaction-history-table .grid:nth-child(even) {
    background-color: #213743;
}

.tab-content .list .md\:grid:nth-child(even) {
    background-color: #233A46;
}

/** Message **/
.message-table-header {
    width: calc(100% - 10px);
    margin: auto;
}

.message-accordion {
    width: calc(100% - 5px);
    margin-left: 5px;
}

.message-accordion .accordion-collapse.collapse.show {
    visibility: visible;
}

.message-accordion .accordion-collapse.collapse:not(.show) {
    display: none;
}

.message-accordion .accordion-item:nth-child(even) {
    background-color: #233A46;
}

.accordion-item {
    cursor: pointer;
}

.message-accordion .accordion-collapse a {
    text-decoration: underline;
    color: #00A2E8;
    transition: all .3s ease-in-out;
}

.message-accordion .accordion-collapse a:hover {
    color: #0522fd;
}

/** Deposit Modal **/
.checkbox-toggle {
    padding: 0 8px;
    background-color: #0F212E;
    border-radius: 30px;
    position: relative;
    color: #fff;
    overflow: hidden;
}

#checkbox_toggle {
    display: none;
}

.checkbox-toggle .toggle {
    position: absolute;
    left: 8px;
    padding: 0 16px;
    width: 54px;
    height: 100%;
    border-radius: 30px;
    cursor: pointer;
    background: #00FF38;
    transition: 0.4s;
}

.checkbox-toggle .slide {
    padding: 2px 0;
    display: flex;
    align-items: center;
    justify-content: space-around;
    cursor: pointer;
}

.checkbox-toggle .slide .text {
    width: 54px;
    text-align: center;
    z-index: 100;
    cursor: pointer;
}

.checkbox-toggle .slide label:nth-child(2) {
    color: #000;
}

.check:checked+.checkbox-toggle label:nth-child(2) {
    color: #fff;
}

.check:checked+.checkbox-toggle .slide .toggle {
    transform: translateX(54px);
    background: #FF0101;
}

.check:checked+.checkbox-toggle .slide {
    background-color: #0a1929;
    color: #fff;
}

.toggle-agreement svg {
    fill: #00FF01;
}

/** Wallet Modal **/
.wallet-dialog {
    width: 100% !important;
    max-width: 530px;
}

.wallet-dialog .modal-header {
    padding: 1rem 1.25rem;
}

@media (max-width: 520px) {
    .modal.show>.modal-dialog.wallet-dialog {
        margin-bottom: 0;
    }

    .wallet-dialog .modal-header {
        padding: .6rem 1.25rem;
    }
}

@media (min-width: 320px) {
    .modal.show>.modal-dialog.wallet-dialog {
        margin-top: 4rem;
    }
}

/** Money Logs **/
#money-logs-modal .list .grid:nth-child(even) {
    background-color: #233A46;
}

/** chat modal **/
#inquiry_modal {
    overflow: hidden !important;
}

/** Bonus Benefits **/
#reward_modal .list .grid {
    background-color: #2F4553;
}

#reward_modal .list .grid:nth-child(even) {
    background-color: #526876;
}

#reward_modal .list .grid div:first-child {
    font-weight: 700;
}

#reward_modal .list .grid div:nth-child(2) {
    color: #00FF01;
}

.h-screen-filler {
    height: calc(100vh - 176px);
}

/** Casino **/
.promotion-text {
    margin-bottom: 6px;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}

.transparent-scroll::-webkit-scrollbar-thumb {
    background: transparent;
}

/** Settings **/
.settings-form button:disabled,
#deposit-form button:disabled,
#withdraw-form button:disabled,
#convertion-form button:disabled {
    color: #fff;
    --tw-bg-opacity: 1;
    background-color: rgb(141 141 141 / var(--tw-bg-opacity));
}

#deposit-form button:disabled,
#withdraw-form button:disabled,
#convertion-form button:disabled {
    border-color: rgb(141 141 141 / var(--tw-bg-opacity));
}

/** Gameplay **/
.svg-icon.favourite {
    stroke: none;
}

.svg-icon.fullscreen {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
}

.gameplay-provider-swiper-button-prev[tabindex="-1"],
.gameplay-provider-swiper-button-next[tabindex="-1"] {
    opacity: 0.3;
}

.header-img {
    display: none;
}

@media(min-width: 768px) {
    .header-img {
        display: block;
    }

    .content.right_open {
        margin-right: 0;
    }
}

/** Swiper **/
.headerSwiper .swiper-slide {
    max-width: 24.188rem;
    min-height: 13.875rem;
}

.providersSwiper .swiper-slide,
.tab-content .swiper-slide,
.tablegamesSwiper .swiper-slide {
    width: 9rem;
}

#event-section .swiper-slide img {
    width: 100%;
    /* height: 100%;
    object-fit: cover; */
}

.powerball-swiper-button-prev,
.powerball-swiper-button-next {
    display: none;
}

@media (min-width: 1024px) {

    .tab-swiper-button-prev,
    .tab-swiper-button-next {
        display: none;
    }
}

.promotion_grid a img {
    height: 100%;
}

/** Slot **/
.select_custom.games-select-custom {
    min-width: 9.688rem;
}

.select_custom.games-select-custom .select_toggle_btn {
    padding: 0 1rem;
    height: 2.75rem;
    width: 100%;
}

.select_custom.games-select-custom .option_box {
    left: 80%;
}

.select_custom.games-select-custom .select_toggle_btn p {
    justify-content: space-between;
}

/** iframe **/
#launcher {
    top: 78%;
    z-index: 100 !important;
}

/** aside **/
#asideEventMenu li,
#asideEventMenu2 li {
    display: none;
}

#asideEventMenu li:nth-child(-n+3),
#asideEventMenu li:last-child,
#asideEventMenu2 li:nth-child(-n+3),
#asideEventMenu2 li:last-child {
    display: block;
}

/** swiper slider **/
.prev_btn,
.next_btn {
    opacity: 1 !important;
}

.prev_btn.swiper-button-disabled,
.next_btn.swiper-button-disabled {
    opacity: .3 !important;
}

.swiper-wrapper .swiper-slide-next+div+div+div+div+div+div {
    opacity: .3;
}

.providersSwiper .swiper-wrapper .swiper-slide-next+div+div+div+div+div+div {
    opacity: 1 !important;
}

@media (min-width: 768px) {
    .nav.nav-boxed-tabs .nav-item .nav-link {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .m-tabs-categories.en .nav span {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    .m-tabs-categories.en .nav span {
        font-size: 16px;
    }

    .tabSwiper .swiper-slide:last-child {
        margin-right: 0 !important;
    }
}

@media (min-width: 767px) {
    .modal-join-input {
        height: 40px;
    }

    #sms_verification_reg_timer {
        height: 40px;
    }

    .modal-join-btn, .modal-join-select {
        height: 40px;
    }
    
    .m-tabs-categories {
        width: 100%;
    }

    .m-tabs-categories .nav-boxed-tabs {
        justify-content: space-between;
        overflow: auto;
        -ms-overflow-style: none;
        /* Internet Explorer 10+ */
        scrollbar-width: none;
        /* Firefox */
    }

    .m-tabs-categories .nav-boxed-tabs::-webkit-scrollbar {
        display: none;
        /* Safari and Chrome */
    }

    .m-tabs-categories .nav.nav-boxed-tabs .nav-item .nav-link {
        height: 2rem;
    }

    .tabSwiper {
        width: 90%;
    }

    .right-sidebar {
        z-index: 999;
    }

    #setting_profile h3 {
        padding-bottom: 0px !important;
    }

}


@media (max-width: 414px) {
    .modal-join-input {
        height: 38px;
    }

    #sms_verification_reg_timer {
        height: 38px;
        margin-top: 0;
        line-height: 2.5rem;
    }

    .modal-join-btn, .modal-join-select {
        height: 38px;
    }

    .m-tabs-categories .nav-boxed-tabs {
        gap: 0;
    }
}

@media (max-width: 390px) {
    .m-tabs-categories .nav-boxed-tabs .nav-item .nav-link {
        font-size: 11px;
    }

    .m-tabs-categories.en .nav .nav-item .nav-link span {
        font-size: 9px;
    }

    .tabSwiper {
        width: 88%;
    }

}

@media (max-width: 375px) {
    .m-tabs-categories .nav-boxed-tabs .nav-item .nav-link {
        font-size: 10px;
    }
}

@media (max-width: 360px) {
    .m-tabs-categories .nav-boxed-tabs .nav-item .nav-link {
        /* padding: 8px 2px; */
    }
}

@media (max-width: calc(500px)) {
    .rs-width {
        flex-wrap: wrap;
        justify-content: center;
    }

    .tab-label {
        font-size: 12px;
    }

}

@media (max-width: 767px) {
    .header-size {
        font-size: clamp(10.5px, 2.6vw, 100%);
        white-space: nowrap;
    }

    .text-size {
        font-size: clamp(5px, 2vw, 100%);
        line-height: 1rem;
        white-space: nowrap;
    }
}


@media (max-height: 914px) {
    .modal-join-header {
        padding-bottom: 5px;
    }

    .modal-join-header h2 {
        font-size: 12px;
    }

    .modal-join-dialog {
        margin-top: 1.5rem !important;
    }

    .modal-join-password_onoff {
        top: 1rem;
    }

    .modal-join-btn-social {
        height: 40px;
    }

    #modal-join-form .font-bold {
        font-size: 12px;
    }

    #modal-join-form .mt-4 {
        margin-top: 10px
    }

    #modal-join-form .mt-5 {
        margin-top: 10px
    }

    /* #sms_verification_reg_timer {
        height: 38px;
        margin-top: 0;
        line-height: 2.5rem;
    } */
}

@media (max-height: 785px) {
    /* .modal-join-btn {
        height: 38px;
        line-height: 1px;
        font-size: 11px;
    }

    .modal-join-select { 
        height: 38px;
    }

    .modal-join-btn {
        height: 38px;
        line-height: 1px;
        font-size: 14px;
    }

    .modal-join-input {
        height: 38px;
    } */

    .modal-join-p {
        font-size: 14px;
    }

    .modal-join-header {
        padding-bottom: 5px;
    }

    .modal-join-header h2 {
        font-size: 14px;
    }

    .modal-join-dialog {
        margin-top: 1rem !important;
    }

    .modal-join-password_onoff {
        top: 0.5rem;
    }

    .modal-join-btn-social {
        height: 38px;
    }

    #modal-join-form .font-bold {
        font-size: 14px;
    }

    #modal-join-form .mt-4 {
        margin-top: 10px
    }

    #modal-join-form .mt-5 {
        margin-top: 10px
    }

    #sms_verification_reg_timer {
        margin-top: 0;
        line-height: 2rem;
    }
}

@media (max-height: 670px) {
    .modal-join-btn {
        line-height: 1px;
        font-size: 11px;
    }

    /* .modal-join-input {
        height: 25px;
    } */

    .modal-join-p {
        font-size: 11px;
    }

    .modal-join-header {
        padding-bottom: 5px;
    }
}


@media (max-height: 914px) {
    /* .modal-join-btn {
        height: 38px;
        line-height: 1px;
        font-size: 11px;
    }

    .modal-join-input {
        height: 38px;
    } */

    .modal-join-header {
        padding-bottom: 5px;
    }

    .modal-join-header h2 {
        font-size: 12px;
    }

    .modal-join-dialog {
        margin-top: 1.5rem !important;
    }

    .modal-join-password_onoff {
        top: 1rem;
    }

    .modal-join-btn-social {
        height: 40px;
    }

    #modal-join-form .font-bold {
        font-size: 12px;
    }

    #modal-join-form .mt-4 {
        margin-top: 10px
    }

    #modal-join-form .mt-5 {
        margin-top: 10px
    }

    #sms_verification_reg_timer {
        height: 38px;
        margin-top: 0;
        line-height: 2.5rem;
    }
}

@media (max-height: 785px) {
    /* .modal-join-btn {
        line-height: 1px;
        font-size: 14px;
    } */

    /* .modal-join-input {
        height: 35px;
    } */

    .modal-join-p {
        font-size: 14px;
    }

    .modal-join-header {
        padding-bottom: 5px;
    }

    .modal-join-header h2 {
        font-size: 14px;
    }

    .modal-join-dialog {
        margin-top: 1rem !important;
    }

    .modal-join-password_onoff {
        top: 0.5rem;
    }

    .modal-join-btn-social {
        height: 35px;
    }

    #modal-join-form .font-bold {
        font-size: 14px;
    }

    #modal-join-form .mt-4 {
        margin-top: 10px
    }

    #modal-join-form .mt-5 {
        margin-top: 10px
    }

    #sms_verification_reg_timer {
        margin-top: 0;
        line-height: 2rem;
    }
}

@media (max-height: 670px) {
    /* .modal-join-btn {
        line-height: 1px;
        font-size: 11px;
    } */

    /* .modal-join-input {
        height: 25px;
    } */

    .modal-join-p {
        font-size: 11px;
    }

    .modal-join-header {
        padding-bottom: 5px;
    }

    .modal-join-header h2 {
        font-size: 11px;
    }

    .modal-join-dialog {
        margin-top: 1rem !important;
    }

    .modal-join-password_onoff {
        top: 0.5rem;
    }

    .modal-join-btn-social {
        height: 25px;
    }

    #modal-join-form .font-bold {
        font-size: 11px;
    }

    .modal-join-footer-label {
        font-size: 11px;
    }

    #modal-join-form .mt-4 {
        margin-top: 10px
    }

    #modal-join-form .mt-5 {
        margin-top: 10px
    }

    #sms_verification_reg_timer {
        /* height: 25px; */
        margin-top: 0;
        line-height: 1.5rem;
        font-size: 12px;
    }
}

.user-title {
    justify-content: flex-start;
    font-size: clamp(10px, 2.3vw, 100%);
}

.user-welcome {
    padding-top: 6rem;
}

.user-text {
    font-size: 2.25rem;
}

.user-text-2 {
    font-size: 2rem;
    color: #95bed9;
}

.user-label {
    font-family: 'BM DoHyeon', sans-serif;
}

.message-modal {
    overflow-y: auto !important;
    padding-left: 0 !important;
}

.transparent-scroll {
    scrollbar-width: none;
}

.transparent-scroll::-webkit-scrollbar {
    display: none;
}

.swiper-container {
    width: 100%;
}

.nav-link {
    padding: 0.5rem 1rem;
    /* Adjust padding for compactness */
    font-size: 0.875rem;
    /* Smaller font size */
}

.swiper-button-next,
.swiper-button-prev {
    color: #000;
    /* Button color */
}

#tab-categories .nav-link span {
    justify-content: center;
}

.tabSwiper {
    background-color: #071d2a;
    border-radius: 50px;
    margin: 30px auto 0;
    /* max-width: 980px; */
}

.tabSwiper .swiper-slide {
    width: auto;
}

.tab-swiper-arrow-left {
    margin-top: 40px;
    z-index: 999;
    border: none !important;
}

.casino-tab-swiper .tab-swiper-arrow-left {
    margin-top: 30px;
}

.tab-swiper-arrow-right {
    right: 10px;
    margin-top: 40px;
    z-index: 999;
    border: none !important;
}

.casino-tab-swiper .tab-swiper-arrow-right {
    margin-top: 30px;
}

.tab-swiper-arrow-right:disabled {
    display: none !important;
}

#affiliate-ref-link:focus-visible {
    outline: 0;
}

.affiliate-body {
    min-height: calc(100vh - 872px);
}

@media (min-width: 768px) {
    .tab-swiper-arrow-left {
        margin-left: -20px;
    }

    .tabSwiper {
        margin: 30px 0 0;
    }
}

@media (min-width: 1280px) {
    .select_custom.games-select-custom .option_box {
        left: 80%;
    }
}

@media (orientation: landscape) {
    #inquiry_modal {
        overflow: auto !important;
    }

    .chat-list {
        min-height: 400px;
    }
}

/** Typograph **/
.break-all {
    word-break: break-all;
}

.whitespace-pre-wrap {
    white-space: pre-wrap;
}

.policies-sportbook li {
    padding-left: 2.5em;
    text-indent: -1.3em;
}

.policies-sportbook p {
    scroll-margin-top: 5rem;
}

#tab_con06 div li a:hover {
    color: rgb(255, 255, 255, 1);
}

#back-to-top {
    display: inline-block;
    position: fixed;
    width: 50px;
    height: 50px;
    transition: bottom .3s,
        opacity .5s, visibility .5s;
    opacity: 0;
    visibility: hidden;
    bottom: 20px;
    right: 160px;
    z-index: 99;
}

#back-to-top:hover {
    cursor: pointer;
}

#back-to-top.show {
    opacity: 1;
    visibility: visible;
}

#back-to-top:after {
    content: "";
    position: absolute;
    left: 1px;
    top: 1px;
    width: calc(100% - 2px);
    height: calc(100% - 2px);
    background: transparent;
    z-index: -1;
    border-radius: 100%;
    transition: background .3s ease;
}

#back-to-top.bt-active:after {
    background: #1475e1;
}

#promo-main-image {
    background: #213744;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
    border-radius: 8px;
}

@media(hover: hover) and (pointer: fine) {
    #back-to-top:hover:after {
        background: #1475e1;
    }

    .btn-social:hover,
    .btn-social:active {
        background-color: var(--btn-social-hover);
    }
}

@media screen and (max-width: 720px) {
    #back-to-top {
        display: inline-block;
        width: 35px;
        height: 35px;
        position: fixed;
        bottom: 130px;
        right: 23px;
        transition: bottom .3s, opacity .5s, visibility .5s;
        opacity: 0;
        visibility: hidden;
        z-index: 1;
    }
}

/** New Message Arrived **/
.top-bar .svg-icon.message.notif {
    animation: .5s linear 0s infinite messageNotif;
}

@keyframes messageNotif {
    from {
        stroke: #fff;
    }

    to {
        stroke: #fd5647;
    }
}

.dd-width {
    width: 245px !important;
}

.pd-left-ko {
    padding-left: 30px !important;
}

.pd-left-en {
    padding-left: 15px !important;
}

/** roulette **/
.header-roulette-link.active .header-roulette-gif {
    display: block;
}

.header-roulette-gif {
    display: none;
    min-width: 40px;
    top: -80%;
    left: -42%;
}

.header-roulette-link .icon-roulette path:first-of-type {
    transform-origin: center;
    -webkit-animation: rotate 2s linear infinite;
    animation: rotate 2s linear infinite;
}

.header-roulette-link.active .icon-roulette path:first-of-type {
    -webkit-animation: rotate .8s linear infinite, colors 2s linear infinite;
    animation: rotate .8s linear infinite, colors 2s linear infinite;

}

.tether-box {
    gap: 7px;
    border-radius: 0.375rem;
    border: 2px solid var(--form-control-border);
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
}
.expected-amount {
    right: 71.8579px;
}
.expected-quantity {
    right: 42.022px;
}
.deposit-switch {
    margin: -5px 0;
}
.usdt-active input,
.tether-input-wrapper input.active,
.tether-withdrawal-input-wrapper input.active,
.tether-input-wrapper input:focus,
.tether-withdrawal-input-wrapper input:focus,
.tether-input-wrapper input:hover,
.tether-withdrawal-input-wrapper input:hover {
    border: 2px solid #00E701; 
}
.tether-withdrawal-input-wrapper input:disabled {
    border: 2px solid var(--form-control-border);
    background-color: var(--form-control-bg);
}
.tether-input-wrapper input:disabled {
    border: 2px solid var(--form-control-border);
    background-color: var(--form-control-bg);
}
.tether-custom-dropdown {
    user-select: none;
    border-radius: 0.375rem;
    border: 2px solid var(--form-control-border);
    background-color: var(--form-control-bg);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.12);
}

.tether-dropdown-options {
    display: none;
    position: absolute;
    top: 62px;
    left: -2px;
    width: calc(100% + 4px);
    max-height: 278px;
    overflow-y: auto;
    border-radius: 0.375rem;
    border: 2px solid var(--form-control-border);
    background-color: var(--form-control-bg);
    z-index: 100;
}

.tether-dropdown-options .custom-option {
    cursor: pointer;
}
.tether-dropdown-options .custom-option:hover {
    background: #1967D2;
}

.tether-transaction-history-table tbody tr:nth-child(even) {
    background-color: #213743;
}
.tether-transaction-history-table thead tr th {
    height: 19px;
}
.tether-transaction-history-table tbody tr td {
    height: 28px;
}
.tether-transaction-history-table tbody tr td:nth-child(2) {
    font-weight: 700;
}
.tether-transaction-history-table .withdrawal {
    color: #FF0000;
}
.tether-transaction-history-table .deposit {
    color: #52FF00;
}
.tether-transaction-history-table .complete {
    color: #45B845;
}
.tether-transaction-history-table .progress {
    color: #4983EB;
}
.tether-transaction-history-table .cancellation {
    color: #FF0000;
}
.tether-transaction-history-table .waiting {
    color: #FF9D00;
}
.tether-wallet-address {
    max-width: 14.5rem;
}
.tether-delete-btn:after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 100%;
    height: 100%;
    border-radius: 100%;
    transform: translate(-50%, -50%);
    background-color: transparent;
    transition: all .3s ease-in-out;
}
.tether-delete-btn:hover:after {
    background-color: #FF0000;
}

.tether-custom-checkbox label {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 110px;
    height: 40px;
    border: 2px solid #2F4553;
    border-radius: 6px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.7);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2), 0px 1px 2px rgba(0, 0, 0, 0.12);
    transition: all .3s ease-in-out;
}
.tether-custom-checkbox label:hover {
    border-color: #2F4553;
    color: #A6C4E5;
}
.tether-custom-checkbox label .check {
    display: inline-block;
    position: relative;
    background-color: rgba(255,255,255,.7);
    width: 20px;
    height: 20px;
    transform-origin: center;
    border-radius: 50%;
    vertical-align: -6px;
    margin-right: 9px;
    transition: background-color 150ms 200ms, transform 350ms cubic-bezier(0.78, -1.22, 0.17, 1.89);
}
.tether-custom-checkbox label:hover .check{
    background-color: #A6C4E5;
}
.tether-custom-checkbox label .check:before {
    content: "";
    width: 0px;
    height: 0.165rem;
    background: #fff;
    position: absolute;
    transform: rotate(45deg);
    top: 9px;
    left: 6px;
    transition: width 50ms ease 50ms;
    transform-origin: 0% 0%;
}
.tether-custom-checkbox label .check:after {
    content: "";
    width: 0;
    height: 0.165rem;
    background: #fff;
    position: absolute;
    transform: rotate(315deg);
    top: 14px;
    left: 7px;
    transition: width 50ms ease;
    transform-origin: 0% 0%;
}
.tether-custom-checkbox label:hover .check:before {
    width: 5px;
    transition: width 100ms ease;
}
.tether-custom-checkbox label:hover .check:after {
    width: 10px;
    transition: width 150ms ease 100ms;
}
  
.tether-custom-checkbox input[type=radio] {
    display: none;
}
.tether-custom-checkbox input[type=radio]:checked + label {
    border-color: #2583EF;
    color: #2583EF;
}
.tether-custom-checkbox input[type=radio]:checked + label .check {
    background-color: #2583EF;
}
.tether-custom-checkbox input[type=radio]:checked + label .check:after {
    width: 11px;
    background: #fff;
    transition: width 150ms ease 100ms;
}
.tether-custom-checkbox input[type=radio]:checked + label .check:before {
    width: 6px;
    background: #fff;
    transition: width 150ms ease 100ms;
}
.tether-custom-checkbox input[type=radio]:checked + label:hover .check {
    background-color: #2583EF;
}
.tether-custom-checkbox input[type=radio]:checked + label:hover .check:after {
    width: 10px;
    background: #fff;
    transition: width 150ms ease 100ms;
}
.tether-custom-checkbox input[type=radio]:checked + label:hover .check:before {
    width: 5px;
    background: #fff;
    transition: width 150ms ease 100ms;
}

#withdraw-form .usdt-withdrawal-amount button:disabled,
#withdraw-form .krw-withdrawal-amount button:disabled {
    cursor: not-allowed;
    background-color: #2f4553;
}

#deposit-form .usdt-amount button:disabled,
#deposit-form .krw-amount button:disabled {
    cursor: not-allowed;
    background-color: #2f4553;
}
/* For Opera */
@-o-keyframes rotate {
    0% {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    100% {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* For Mozilla Firefox */
@-moz-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

/* For Google Chrome and Safari */
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes colors {
    0% {
        fill: rgb(252, 188, 188);
    }

    30% {
        fill: rgb(251, 255, 198);
    }

    50% {
        fill: rgb(176, 245, 191);
    }

    70% {
        fill: rgb(162, 235, 253);
    }

    100% {
        fill: rgb(183, 183, 250);
    }
}

@media (max-width: 1280px) {
    .pd-left-ko {
        padding-left: 28px !important;
    }

    .pd-left-en {
        padding-left: 18px !important;
    }
}

@media (max-width: 1024px) {

    .btn-social:hover,
    .btn-social:active {
        animation: socialBtnHover .6s forwards linear;
    }
}

@keyframes socialBtnHover {
    0% {
        background-color: var(--btn-social);
    }

    50% {
        background-color: var(--btn-social-hover);
    }

    100% {
        background-color: var(--btn-social);
    }
}

@media (max-width: 600px) {
    .pd-left-ko {
        padding-left: 20px !important;
    }

    .pd-left-en {
        padding-left: 10px !important;
    }

    .casino-tab-swiper .tabSwiper {
        margin: 15px auto 0;
    }
}


.header-video-size {
    width: 380px;
}

.tether-wallet-table table th,
.tether-wallet-table table td {
    padding: 2px;
}
.tether-wallet-table table tbody tr:nth-child(even) {
    background-color: #213743;
}

.bg-active {
    background: linear-gradient(0deg, #00E701 -97.37%, #1EAF0B 47.03%, #00E701 200%);
}
.bg-cancelled,
.bg-admin_cancellation {
    background: linear-gradient(0deg, #E70000 -97.37%, #AF0B0B 47.03%, #E70000 200%);
}
.bg-matured,
.bg-settled {
    background: linear-gradient(0deg, #E7C400 -97.37%, #CD7C0C 47.03%, #E7C400 200%);
}

@property --viewBtnColor1 {
    syntax: '<color>';
    initial-value: #0064E7;
    inherits: false;
}
@property --viewBtnColor2 {
    syntax: '<color>';
    initial-value: #0086AC;
    inherits: false;
}
@property --viewBtnColor3 {
    syntax: '<color>';
    initial-value: #0080C0;
    inherits: false;
}
  
.view-btn {
    background: #0080C0;
    background: linear-gradient(0deg, var(--viewBtnColor1) -97.37%, var(--viewBtnColor2) 47.03%, var(--viewBtnColor3) 200%);
    /* background: linear-gradient(180deg, var(--color3) 0%, var(--color4) 100%); */
    transition: --viewBtnColor1 .6s, --viewBtnColor2 .6s, --viewBtnColor3 .6s;
}
.view-btn:hover {
    --viewBtnColor1: #003984;
    --viewBtnColor2: #0086AC;
    --viewBtnColor3: #0080C0;
    background: linear-gradient(0deg, var(--viewBtnColor1) 1.28%, var(--viewBtnColor2) 79.91%, var(--viewBtnColor3) 200%);
}
.view-btn:active,
.view-btn:visited {
    --viewBtnColor1: #0064E7;
    --viewBtnColor2: #0086AC;
    --viewBtnColor3: #0080C0;
    background: linear-gradient(0deg, var(--viewBtnColor1) -97.37%, var(--viewBtnColor2) 47.03%, var(--viewBtnColor3) 200%);
    box-shadow: inset 0px 3px 6.1px #00316E;
}
.view-btn:disabled,
.view-btn:disabled:active,
.view-btn:disabled:visited {
    background: linear-gradient(0deg, #606060 -97.37%, #7E7E7E 47.03%, #B4B4B4 200%);
     box-shadow: none;
}

.betHistorySwiper {
    background-color: #071d2a;
    border-radius: 50px;
}
.betHistorySwiper ul li {
    width: auto;
}

@media (min-width: 320px) {
    .header-video-size {
        width: 170px;
    }
}

@media (min-width: 360px) {
    .tether-wallet-address {
        max-width: 15.5rem;
    }
}
@media (min-width: 375px) {
    .header-video-size {
        width: 220px;
    }
    .tether-wallet-address {
        max-width: 16.4rem;
    }
}
@media (min-width: 390px) {
    .tether-wallet-address {
        max-width: 17.3rem;
    }
}
@media (min-width: 412px) {
    .tether-wallet-address {
        max-width: 18.5rem;
    }
}

@media (min-width: 430px) {
    .header-video-size {
        width: 240px;
    }
    .tether-wallet-address {
        max-width: 20.5rem;
    }
}

@media (min-width: 500px) {
    .header-video-size {
        width: 380px;
    }
    .tether-wallet-address {
        max-width: none;
    }
}
@media(min-width: 768px) {
    .tether-dropdown-options {
        top: 70px;
    }
}

@media all and (max-width: 766px) {
    .single-address .tether-wallet-address {
        max-width: calc(100vw - 85px);
    }
}
@media (max-width: 639px) {
    .header-video-size {
        max-height: 100%;
    }
}

body.scroll-lock {
    overflow: hidden;
  }


.casino-tab-swiper-wrapper .tabSwiper {
    /* overflow: visible; */
    background-color: transparent;
    position: relative;
    border-radius: 0;
    padding: 16px 0 0 0;
}
.casino-tab-swiper-bg {
    width: 100%;
    height: 54px;
    position: absolute;
    left: 0;
    bottom: 0;
    border-radius: 999px;
    background-color: #071d2a;
}

.casino-tab-swiper-wrapper .tabSwiper .nav-boxed-tabs {
    background-color: transparent;
}

.side-nav.fold .fourgame-new {
    left: 45px;
    top: 10px;
}

@media (max-width: 1024px) {
    .casino-tab-swiper-wrapper .tabSwiper {
       padding: 16px 6px 0 0;
    }
}

@media (max-width: 820px) {
    .casino-tab-swiper-wrapper .tabSwiper {
        padding: 16px 8px 0 0;
        border-bottom-right-radius: 37px;
        border-top-right-radius: 69px;
        border-bottom-left-radius: 37px;
        border-top-left-radius: 69px;
    }
}