/****************************** INITIALIZE ******************************/
/* Layout */
html, body {background-color: var(--color-59); color: #fff;}
/* body::-webkit-scrollbar { width: 10px; } 
body::-webkit-scrollbar-thumb { background-color: #bcbcbc; border-radius: 10px; background-clip: padding-box; border: 2px solid transparent; } 
body::-webkit-scrollbar-track { background-color: none; border-radius: 10px; box-shadow: inset 0px 0px 5px white; }  */
.not_scroll {position: fixed; overflow: hidden; width: 100%; height: 100%}

/* Scrollbar */
::-webkit-scrollbar { width: 16px; height: 16px; } 
::-webkit-scrollbar-thumb {
    background-color: #223f93;
    border-radius: 10px;
    background-clip: padding-box;
    border: 2px solid #000000;
}
::-webkit-scrollbar-track { background-color: none; border-radius: 10px; box-shadow: inset 0px 0px 5px #000000; } 

/****************************** UI KIT ******************************/
/* Dim Layer */
.dim_07 {background: rgba(0, 0, 0, 0.7);}
.dim_05 {background: rgba(0, 0, 0, 0.5);}
.dim_01 {background: rgba(0, 0, 0, 0.1);}

/* Button */
.btn-primary {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 240px; height: 54px; border: 1px solid #a0a0a0; border-radius: 28px; font-size: 20px; font-weight: 600; line-height: 1.6; text-align: center; color: #fff; transition: background-color 0.35s, border-color 0.35s, color 0.35s;}
.btn-primary::after {content: ""; position: absolute; top: 50%; right: 20px; display: inline-block; width: 10px; height: 10px; border-right: 1px solid white; border-bottom: 1px solid white; transform: translateY(-50%) rotate(-45deg); transition: border-color 0.35s;}
.btn-primary:hover { color: #000;}
.btn-primary:hover::after {border-color: #000;}

.btn-secondary {position: relative; display: inline-flex; justify-content: center; align-items: center; width: 100px; height: 54px; border: 1px solid #a0a0a0; border-radius: 28px; font-size: 20px; font-weight: 600; line-height: 1.6; text-align: center; color: #000; transition: background-color 0.35s, border-color 0.35s, color 0.35s;}
/* .btn-secondary:hover {background-color: #000; color: #fff;} */
.btn-secondary:hover {  color: #fff;}

@media screen and (max-width: 720px) {
    .btn-primary {width: 66.66vw; height: 15vw; font-size: 5.55vw; border-radius: 7.5vw;}
    .btn-secondary {width: 50vw; height: 15vw; font-size: 5.55vw; border-radius: 7.5vw; line-height: 1.6;}
}
 
.bg-color-1 {background-color: var(--color-2) !important;}
.bg-color-2 {background-color: var(--color-4) !important;}
.bg-color-3 {background-color: var(--color-68) !important;}
.bg-color-4 {background-color: var(--color-61) !important;}
.bg-color-5 {background-color: var(--color-59) !important;}
.bg-color-8 {background-color: var(--color-8) !important;}

.color-win {color: #45b845 !important;}
.color-lose {color: #ff6666 !important;}
.color-tie {color: #608df1 !important;}
.color-gold {color: #d5be60 !important;}

.text-align-left {text-align: left !important;}
.text-align-center {justify-content: center !important; text-align: center !important;}

.hide {display: none;}

input::placeholder {color: rgba(255, 255, 255, 0.3);}
[type="radio"] {position: relative; vertical-align: middle; appearance: none; border: 3px solid var(--color-11); border-radius: 50%; width: 20px; height: 20px; cursor: pointer;}
[type="radio"]:checked {border: 3px solid var(--color-11);}
[type="radio"]:checked::after {content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 8px; height: 8px; background-color: var(--color-11); border-radius: 50%;}
[type="radio"]:disabled {background-color: lightgray; box-shadow: none; opacity: 0.7; cursor: not-allowed;}

@media screen and (max-width: 720px) {
    [type="radio"] {width: 16px; height: 16px; border-width: 2px;}
    [type="radio"]:checked {border-width: 2px;}
    [type="radio"]:checked::after {width: 6px; height: 6px;}
}