/*!******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles.css ***!
  \******************************************************************/
@import url(https://fonts.googleapis.com/css?family=Barlow:300,500);
/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles.css (1) ***!
  \**********************************************************************/
@import url(https://fonts.googleapis.com/css2?family=Barlow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap);
/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/splash-loader.css ***!
  \*************************************************************************/
#loader {
    background: #000000;

    /* This will show black initially */
    /*background: url('../assets/bg_loading.jpg') no-repeat;*/
    width: 100vw;
    height: 100vh;
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
   
    z-index: 9999;
    background-position: calc(50% + 5px) calc(50%);
    background-size:cover;
    transform: scale(1.06);

    flex-direction: column;
    align-items: center;
    justify-content: center;

}

#loader .loader-container{
    flex-direction: column;
    width: 50%;
    max-width: 700px;
    min-width: 200px;

    align-items: center;
    justify-content: center;
    display: flex;

}

#loader.hide {
    opacity: 0;
}


#loader img,
#loader #canvas-loader{
    width: 100%;
}


#loader.hide.destroy {
    display: none;
}


#loader p {
    font-size: larger;
    text-transform: uppercase;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    z-index: 1;
}


#overlay {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;

}

#progressBar {
    width: 50%;
    height: 4px;
    background-color: #FFFFFF33;
    /* border: 4px solid white; */
    border-radius: 0rem;
    position: relative;

    display: flex;
    justify-content: center;

}

#loader svg{
    width: 50%; 
    margin-top:24px;
}

@media only screen and (min-width: 1200px){
    #loader svg{
        width: 30%; 
        margin-top:48px;
    }
}

#progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    transform: translate(-50%, -45%);
    color: #FF6300;
    font-weight: 600;
    display: none;
}

#progress {
    width: 0%;
    height: 100%;
    background: #FF6300;
    border-radius: 2rem;
}

#progress-logo {
    max-width: 200px;
    width: 100%;
    /* position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -120%); */

}

#progress-text-img {
    
    transform: scale(0.5);
}

#canvas-loader{
    width: 100%;
}
/*!**********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles.css (2) ***!
  \**********************************************************************/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    scroll-behavior: auto;

}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: '';
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}


* {
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}


body {

    height: 100%;
    width: 100%;
  
    background: #fff;
    margin: 0px;
    overflow: hidden;
    padding-bottom: 5px;
}


#disconnect {
    position: fixed;
    z-index: 10000;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    background-color: black;
    line-height: 1;
}

#disconnect.hide {
    display: none;
}

#reload-placeholder {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  text-align: center;
}

.disconnect-btn {
    padding: 12px 24px;
    border: 1px solid white;
    border-radius: 5px;
    margin-top: 12px;
    background-color: transparent;
    color: white;
    cursor: pointer;
   
}

#disconnected-btns {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

button {
    cursor: pointer;
}

input {
    border-radius: 0;
}


:root {

    --offset-x: 15px;
    --offset-y: -21px;

    --background-100: #ffffff;
    --background-200: #e6e6e6;
    --background-300: #dddddd;
    --background-400: #00ff00;
    --background-500: #e58929;
    --background-600: rgba(255, 0, 0, 0.8);
    --background-700: #ff0000;
    --background-800: #408609;
    --background-900: #999999;
    --background-1000: #ababab;
    --background-light: rgba(239, 239, 239, 0.3);


    --text-50: #c4c4c4;
    --text-100: #ffffff;
    --text-200: #e58929;
    --text-300: #999999;
    --text-400: #ff0000;
    --text-500: #408609;
    --text-600: #666666;
    --text-700: #0000ee;
    --text-800: #383838;
    --text-900: #101010;
    --text-1000: #000000;
    --text-light-dark: rgb(84, 84, 84);

    --border-100: #dddddd;
    --border-200: #cccccc;
    --border-300: #aaaaaa;
    --border-400: #383838;
    --border-500: #000000;


    --custom-open: #F59E0B;
    --custom-no-win: #F97316;
    --custom-cashout: #0EA5E9;
    --custom-won: #16A34A;
    --custom-lost: #D32F2F;
    --custom-cancled: #546C8B;

    --default-950: #0D151D;
    --default-900: #0C1C2B;
    --default-800: #11202F;
    --default-700: #1B2B3A;
    --default-600: #304456;
    --default-500: #546C8B;
    --default-400: #697A9C;
    --default-300: #7E8AAC;
    --default-200: #959FBE;
    --default-100: #AFB6D5;
    --default-50: #D4DAEC;
    --default-0: #FFFFFF;

    --primary-main: #16A34A;
    --primary-light: #1AC459;
    --primary-dark: #12823B;
    --primary-text: #FFFFFF;

    --secondary-main: #1976D2;
    --secondary-light: #42A5F5;
    --secondary-dark: #1565C0;
    --secondary-text: #FFFFFF;


    --tertiary-main: #E36E00;
    --tertiary-light: #FF8411;
    --tertiary-dark: #B55800;
    --tertiary-text: #FFFFFF;

    --disable-main: #546C8B;
    --disable-light: #6582A7;
    --disable-dark: #43566F;
    --disable-text: #FFFFFF66;

    --gradient-default-primary: #546C8B;
    --gradient-default-secondary: #304456;


    --error-main: #D32F2F;
    --error-light: #EF5350;
    --error-dark: #C62828;
    --error-text: #FFFFFF;

    --warning-main: #ED6C02;
    --warning-light: #FF9800;
    --warning-dark: #E65100;
    --warning-text: #FFFFFF;

    --success-main: #2E7D32;
    --success-light: #4CAF50;
    --success-dark: #1B5E20;
    --success-text: #FFFFFF;

    --alert-main: #0288D1;
    --alert-light: #03A9F4;
    --alert-dark: #01579B;
    --alert-text: #FFFFFF;


    --custom-open: #F59E0B;
    --custom-no-win: #F97316;
    --custom-cashout: #0EA5E9;
    --custom-won: #16A34A;
    --custom-lost: #D32F2F;
    --custom-cancled: #546C8B;

    --text-primary: #FFFFFFDE;
    --text-secondary: #FFFFFF99;
    --text-disabled: #ffffff66;
    --text-divider: #FFFFFF1A;

    --opacity-dark-95: rgba(13, 21, 29, 0.95);
    --opacity-dark-85: rgba(13, 21, 29, 0.85);
    --opacity-dark-75: rgba(13, 21, 29, 0.75);
    --input-border: linear-gradient(to bottom, var(--default-950), var(--default-500));

}

#profit {
    white-space: nowrap;
}

.font_rtl #profit {
    direction: rtl;
 
}


#nickname-modal {
    position: fixed;
    left: 0;
    top: 0;
    background-color: #999999ad;
    width: 100%;
    height: 100%;
    display: grid;
    place-content: center;
}

#nickname-wrapper {
    width: 350px;
    height: 151px;
    border-radius: 10px;
    padding: 10px;
    padding-top: 16px;
    border: 1px solid var(--border-200);
    background-color: white;
    display: flex;
    flex-direction: column;
    gap: 10px
}

#nickname-wrapper>p {
    
    color: var(--text-300);
    line-height: 24px;
}

#nickname-input {
    border: 1px solid var(--border-300);
    outline: none;
    height: 28px;
    padding: 5px;
}

#nickname-placeholder{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

#nickname-button {
    border: none;
    height: 56px;
    padding: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 22px;
    font-weight: 400;
    border-bottom: 3px solid var(--border-400);
    border-radius: 10px;
    background-color: var(--background-900);
    cursor: default;
}

#nickname-button.active {
    background-color: var(--background-500);
    cursor: pointer;
}

#nickname-modal.hide {
    display: none;
}


/* slider */
.rangeslider__handle {
    width: 24px !important;
    height: 24px !important;
    top: -7px !important;

}

.rangeslider__handle::after {
    width: 17.28px !important;
    height: 17.28px !important;

}

.rangeslider {
    height: 10px !important;
}

.rangeslider,
.rangeslider__fill {
    display: block;
    -moz-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -webkit-box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.3);
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
}

.rangeslider {
    background: #e6e6e6;
    position: relative;
}

.rangeslider--horizontal {
    height: 20px;
    width: 100%;
}

.rangeslider--vertical {
    width: 20px;
    min-height: 150px;
    max-height: 100%;
}

.rangeslider--disabled {
    filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40);
    opacity: 0.4;
}

.rangeslider__fill {
    background: linear-gradient(to right, #00F60A, #70FFA9);
    position: absolute;
}

.rangeslider--horizontal .rangeslider__fill {
    top: 0;
    height: 100%;
}

.rangeslider--vertical .rangeslider__fill {
    bottom: 0;
    width: 100%;
}

.rangeslider__handle {

    border: 1px solid #ccc;
    cursor: pointer;
    display: inline-block;
    width: 40px;
    height: 40px;
    position: absolute;
    background: -webkit-radial-gradient(circle at top right, #FFFFFF, #888888);
    /* For Safari 5.1 to 6.0 */
    background: -moz-radial-gradient(circle at top right, #FFFFFF, #888888);
    /* For Firefox 3.6 to 15 */
    background: -o-radial-gradient(circle at top right, #FFFFFF, #888888);
    /* For Opera 11.6 to 12.0 */
    background: radial-gradient(circle at top right, #FFFFFF, #888888);
    background-size: 100%;


    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    border: 1px solid #AAAAAA;
}

.rangeslider__handle:after {
    content: "";


}

/* .rangeslider__handle:active,
.rangeslider--active .rangeslider__handle {
 
    background-size: 100%;
    background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));
    background-image: -moz-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
    background-image: -webkit-linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
    background-image: linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.12));
} */

.rangeslider--horizontal .rangeslider__handle {
    top: -10px;
    touch-action: pan-y;
    -ms-touch-action: pan-y;
}

.rangeslider--vertical .rangeslider__handle {
    left: -10px;
    touch-action: pan-x;
    -ms-touch-action: pan-x;
}

input[type="range"]:focus+.rangeslider .rangeslider__handle {}

.text-red {
    color: var(--text-400) !important;
}


#loader {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    width: 100%;
    height: 100vh;
}

#loader img:nth-of-type(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#loader img:nth-of-type(2) {
    animation: spin 2s linear infinite;
    width: 70px;
    height: 70px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
        /* Start at 0 degrees */
    }

    to {
        transform: rotate(360deg);
        /* End at 360 degrees */
    }
}

#loader.hide {
    display: none;
}

[data-wait] {
    transition: all 0.5s ease;
    opacity: 0;
}

[data-wait].show {
    opacity: 1;
}

#nickname {

    background-color: transparent;
    align-self: center;
    max-width: 40%;
    text-overflow: ellipsis;
    text-wrap: nowrap;
    overflow: hidden;
}

#player-information {
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    height: 26px;
    border-bottom: 1px solid var(--border-300);
    font-size: 18px;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
 

}

#player-information>div:nth-child(2) {
    display: flex;
    align-items: center;
    gap: 10px;

}

@media(max-width:450px){
    #profit,#exit-btn,#nickname{
        font-size: 12px !important;
    }

}

#player-information>div:nth-child(2)>button {
    color: var(--background-500);
    border: none;
    background-color: transparent;
    font-size: 18px;
    font-weight: 400;
}

#players-wide-screen {
    display: none;
   
    margin-top: 8px;
    margin-right: 5px;
    position: relative;
}

#players-wide-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 5px;
    background-color: var(--background-500);
    display: flex;
}

#players-container-wide>.player-item>span {
    height: 26px;
    flex: 0.85
}

#players-container-wide>.player-item>span:nth-child(1) {
    flex: 2;
}

#players-container-wide>.player-item>span:nth-child(2) {

    justify-content: start;

}

#players-container-wide>.player-item>span:nth-child(3) {

    justify-content: start;

}

#players-container-wide>.player-item>span:nth-child(4) {

    justify-content: start;

}

#main-wrapper {

    min-height: calc(100vh - 40px);
    overflow-y: auto;



}

.player-item-name-wrapper {
    overflow: hidden;
}

.player-item-name {
    white-space: nowrap;
    /* Prevents text from wrapping to a new line */
    overflow: hidden;
    /* Hides the overflowed text */
    text-overflow: ellipsis;
    /* Displays "..." when text overflows */
    width: 100%;
}

@media(min-width:1000px) {
    #main-wrapper {
        display: flex;
        gap: 10px;

    }

    #players-wide-screen {
        display: block;
        border: 1px solid var(--border-200);
        width: 30%;
 
    }
}


#app {
    height: calc(100vh - 34px);
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 4px;


}

#canvas-bet-wrapper {
    display: flex;
    flex-direction: column;
    padding: 0 10px;



}

#svg-element {
    position: absolute;


}

#currency-img {
    width: 24px;
    height: 24px;
    margin-left: 8px;

}








@media(min-width:1000px) {
    #canvas-bet-wrapper {
        flex-direction: row;
        gap: 20px;
        padding: 0;

    }

    #app {
        width: 65%;
        gap: 0;
        flex:1;
    }
}



#canvas {
    margin: 20px auto 0;
    width: 100%;
    max-width: 956px;
    aspect-ratio: 16/10;
    /* height: 253px; */
    overflow: hidden;
    position: relative;
    transition: opacity 0.1s ease;
    opacity: 1;

}

@media (min-width: 1000px) and (aspect-ratio >=1830/806) {
    #canvas {
        width: 45%;
    }
}





#control {
    overflow: hidden;
    order: 2;
    margin: 5px 5px 0;
    flex: 1;
    min-height: 200px;
}

@media (min-width:1000px) {
    #control {
        margin: 5px 0 0 5px;

    }
}

@media (max-width:1000px) {
    #canvas {
        max-width: 500px;




    }
}

/* next round counter */
#next-round {
    
    position: absolute;
    letter-spacing: 1px;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y));
    color: var(--text-50);
    white-space: nowrap;
    font-size: small;
    font-weight: 500;
    pointer-events: none;
    user-select: none;

}

.font_rtl #next-round {
    direction: rtl;
}

@media (min-width:400px) {
    #next-round {
        font-size: 22px;
    }
}

@media (min-width:1400px) {
    #next-round {
        font-size: 44px;
    }
}

#top-winners {
    color: var(--text-800);
    display: flex;
    position: absolute;
    top: 3px;
    left: 13%;
    font-size: 8px;
    flex-direction: column;
    font-weight: 500;
    gap: 4px;
    /* font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; */
    pointer-events: none;
    user-select: none;
}

.font_rtl #top-winners {
    /* font-family: Verdana, Geneva, Tahoma, sans-serif !important; */
}

@media(min-width:450px) {
    #top-winners {
        font-size: 10px;


    }
}

@media(min-width:700px) {
    #top-winners {
        font-size: 12px;


    }
}

@media(min-width:1250px) {
    #top-winners {
        font-size: 14px;
        gap: 7px
    }
}

@media(min-width:1850px) {
    #top-winners {
        font-size: 21px;


    }
}

@media (min-width: 1000px) and (aspect-ratio >=1830/806) {
    #top-winners {
        font-size: 14px;
        gap: 7px
    }
}

#top-winners>p:nth-child(2) {
    color: #68CA5E;
}

#top-winners>p:nth-child(3) {
    color: #E47C7D
}

#top-winners>p:nth-child(4) {
    color: #72ABD3
}


#next-round.hide {
    display: none;
}

/* multiplier */
#multiplier {
    font-family: "Barlow", sans-serif;
    font-style: normal;
    position: absolute;
    line-height: 1em;
    width: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translate(var(--offset-x), var(--offset-y));
    color: var(--text-1000);
    text-align: center;
    font-weight: 500;
    text-wrap: nowrap;
    font-size: 6vw;
    pointer-events: none;
    user-select: none;
}

@media(min-width:1224px) {
    #multiplier {
        /* font-size: 80px; */
    }
}

@media(min-width:1624px) {
    #multiplier {
        /* font-size: 160px; */
    }
}


#multiplier.hide {
    display: none;
}

#multiplier.green {
    color: var(--text-500);
}


/* BET COMPONENT & CASHOUT */
#bet-component {
    display: flex;
    flex-direction: column;
}

/* control bet panel state */


@media(min-width:1000px) {
    #bet-component {
        margin-top: 8px;
    }

}

#bet-component-header {
    display: none;
}

@media(min-width:1000px) {
    #bet-component {

        width: calc(50% - 20px);
        max-width: 305px;
        border: 1px solid var(--border-200);
     


    }

    #bet-component>* {
        margin: 0 8px;
    }

    #bet-component-header {
        margin: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        text-transform: uppercase;
        padding: 0 10px;
        height: 28px;
        background-color: var(--background-300);
        font-size: 14px;
        color: var(--text-800);
    }
}


#amount-component,
#cashout-component {
    display: flex;

    flex-direction: column;
    width: 95%;
    margin: 0 auto
}

@media(max-width:1000px) {

    #cashout-component,
    #amount-component {
        width: calc(90% + 18px);
    }

}

#amount-component>span,
#cashout-component>span {
    color: var(--text-300);
    font-weight: 400;
    font-size: 10px;
    margin-top: 4px;
    line-height: 16px;
}

#cashout-component>span {
    margin-top: 8px;
}

#amount-x {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 90px;
    background-color: var(--background-300);
    color: var(--text-600);
    font-size: 10px;
    width: 26px;
    height: 20px;
    border-radius: 10px;
    top: 50%;
    transform: translateY(-50%);
    border: none
}


#cashout-component>div {
    display: flex;
    border: 1px solid var(--border-300);
    height: 30px;
    margin-top: 2px;
    position: relative;
}

#amount-input-currency {
    display: flex;
    position: relative;
    border: 1px solid var(--border-300);
    align-items: center;
    flex: 1;
    height: 28px;
    padding-right: 4px;
}



#amount-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 2px;
    margin-top: 2px;
   

}

#amount-wrapper.inValid>#amount-input-currency,
#cashout-component>div.inValid {
    border: 1px solid red;
}

#amount-value {
    flex: 1;
 
    flex-shrink: 1;
    min-width: 3px;
    background-color: transparent;
    width: 100%;
    padding: 0 4px;
    display: flex;
    align-items: center;
    border: none;

    outline: none;
    font-size: 16px;
}
#amount-value::placeholder {
    font-size:  12px;
}

#currency {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #DDDDDD;
    width: 30px;
    height: 18px;
    padding: 2px 4px;
    font-size: 10px;
    border-radius: 12px;
    user-select: none;
}

.change-btn {
    font-size: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--background-300);
    width: 35px;
    align-self: stretch;
    cursor: pointer;
    font-weight: 500;
    user-select: none;

}

#bet-component.disabled #amount-wrapper {
    pointer-events: none;
    background-color: var(--background-light);
    color: var(--text-light-dark);
}






#cashout-value {
   
    display: flex;
    align-items: center;
    width: 80px;
    padding: 4px;
    font-size: 16px;
    border: none;
    border-right: 1px solid var(--border-300);
    outline: none;


}

#range-container {
    flex: 1;
    padding: 2px 5px 0;
    display: flex;
    align-items: center;

}

#range-container>input {
    width: 100%;
    height: 10px;
    appearance: none;
    background-color: green;
    outline: none;
    cursor: pointer;
    border-radius: 12px;
    ;
}

#range-container>input::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    border: 1px solid var(--border-300);
    background: white;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    z-index: 1;
}

#bet-component.disabled #cashout-component>div>div,
#bet-component.disabled #cashout-component>div>input {
    pointer-events: none;
    background-color: var(--background-light);
    color: var(--text-light-dark);
}


#activity-button {
    border: none;
    border-radius: 4px;
    padding: 10px;
    width: 95%;
    margin: 8px auto 0;
    font-size: 16px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    text-shadow: 0 1px 2px #000000B8;
    box-shadow: inset 0 2px rgba(255, 255, 255, 0.515), inset 0 -2px rgba(0, 0, 0, 0.515);
   
}


.font_rtl #activity-button {
    direction: rtl;
}

.placebet-button {
    height: 56px;
    background-color: var(--background-500);
    color: white;
    cursor: pointer;
}








.cancel-button {
    height: 56px;
    background-color: #666666;
    color: #00000066;

    text-shadow: none !important;
}

.cancel-button.nextround {
    height: 89px;
    flex-direction: column;
    background-color: #666666;
    color: #00000066;
    border-radius: 10px;
    gap: 3px;
    text-shadow: none !important;


}

.cancel-button.nextround>span:nth-of-type(2) {
    font-size: 12px;
}

.cashout-button {

    height: 89px;
    flex-direction: column;
    background-color: var(--background-800);
    color: white;
    gap: 3px;


}

.placebet-button.disabled,
.cancel-button.disabled,
.cashout-button.disabled {
    opacity: 0.8;
    background-color: gray;
    cursor: default;
    color: white;
    pointer-events: none;
}

.placebet-button {
   
    line-height: 150%;
}

@media(max-width:1000px) {

    #activityBtn {
        width: calc(90% + 18px);
    }
}






.cashout-button-green>span {
    font-size: 22px;
}

/* INTERACTION COMPONENT */

#interaction-component {

    display: flex;
    border: 1px solid var(--border-200);
    height: 100%;


}



#interaction-tabs {
    width: 40px;
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    height: 100%;

}

.font_rtl #interaction-tabs * {
    /* font-family:Verdana, Geneva, Tahoma, sans-serif !important ; */
}

#interaction-tabs>button {
    border: none;
   
    flex: 1;
    background-color: var(--background-300);
    color: var(--text-800);
    font-size: 16px;
    text-align: center;
    cursor: pointer;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

#history-tab-text,
#chat-tab-text,
#players-tab-text {
    white-space: nowrap;

}

#chat-tab.hide {
    display: none;
}

@media(min-width:1000px) {
    #interaction-tabs>button.hide {
        display: none;
    }
}


#interaction-tabs>button>span {
    display: block;
    transform: rotate(270deg);
    font-size: 12px;
    font-weight: 400;
}


#interaction-tabs>button.active {
    background-color: white;
    color: var(--text-200);
}

/* @media(min-width:1000px) {
    #players-tab {
        display: none;
    }
    #players-content{
        display: none;
    }
} */

/* INTERACTION CONTENT */

#interaction-content {
    height: 100%;
    width: calc(100% - 40px);
}

#history-content.hide,
#chat-content.hide,
#players-content.hide {
    display: none;
}

#chat-content {
    position: relative;
}

#chat-content,
#players-content,
#history-content {
    height: 100%;
}

#history-content {
    display: flex;
    overflow-y: auto;
    justify-content: center;

}

#history-wrapper {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex-wrap: wrap;
    gap: 4px;
    padding: 4px;
    width: 95%;
    height: fit-content;


}

@media (max-width:450px){
    #history-wrapper {
        grid-template-columns: repeat(5, 1fr);
    }
}

.historyItem {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    border-radius: 4px;
    padding: 4px;
    border: 1px solid #DDDDDD;
    height: 20px;
    font-size: 9.31px;
    font-weight: 800;
    ;
    cursor: pointer;
}










.historyItem.open {
    color: var(--custom-open);
    ;
}

.is-player.historyItem.open {
    color: var(--custom-open);
    ;
    border: 1px solid var(--custom-open);
    ;
    background-color: #e58a295b;
}

.historyItem.won {
    color: var(--custom-won);
}

.is-player.historyItem.won {
    color: var(--custom-won);
    border: 1px solid var(--custom-won);
    background-color: #4caf4f48;
}

.historyItem.lost {
    color: var(--custom-lost);
}

.is-player.historyItem.lost {
    color: var(--custom-lost);
    border: 1px solid var(--custom-lost);
    background-color: #ef53503b;
}

.historyItem.cashout {
    color: var(--custom-cashout);
}

.is-player.historyItem.cashout {
    color: var(--custom-cashout);
    border: 1px solid var(--custom-cashout);
    background-color: #5080ef3b;
}

.historyItem.cancel {
    color: var(--custom-cancled);
    ;
}

.is-player.historyItem.cancel {
    color: var(--custom-cancled);
    ;
    border: 1px solid var(--custom-cancled);
    ;
    background-color: #3a39393b;
}

#messages-container {
    height: calc(100% - 40px);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 4px;
    gap: 4px 0;
    scroll-behavior: auto;
}

#notice {
    position: absolute;
    top: 5px;
    left: 5px;
    padding: 10px;
    padding-right: 30px;
    text-align: justify;
    font-size: 12px;
    width: calc(100% - 10px);
    background: rgba(255, 0, 0, 0.8);
    border: 1px solid #000;
    color: #fff;


}

#notice.hide {
    display: none;
}

#notice-close {
    font-weight: 600;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    border: none;
    background-color: transparent;

}

.message {
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
    border-bottom: 1px solid var(--border-100);


}

.message-name {
    color: var(--text-200);
    font-size: 12px;
}

.message-content {

    font-size: 12px;
    width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    line-height: 160%;


}

#message-button {
    display: flex;
    align-items: center;
    justify-content: center;
}

#message-input-component {
    height: 40px;
    padding: 4px;
    background-color: var(--background-300);
    width: 100%;

}

#message-input-wrapper {
    display: flex;
    align-items: center;
    background-color: white;
    gap: 4px;
    height: 100%;
}

#message-input-wrapper.hide {
    display: none !important;
}

#message-input-wrapper>input {
    flex: 1;
    padding: 0 4px;
    background-color: white;
    outline: none;
    border: none;
}

#message-input-wrapper>button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: var(--text-200);
    font-size: 20px;
    padding: 4px;
}


/* PLAYERS TABLE HEADER */
#players-table-header,
#players-table-header-wide {
    display: flex;
    background-color: var(--background-300);
    height: 28px;
    font-size: 14px;
}

#players-table-header>span,
#players-table-header-wide>span {
    padding: 0 8px;
    display: flex;
    align-items: center;
    height: 100%;
    line-height: 40px;
    flex: 0.85;
}




#players-table-header>span:nth-child(1),
#players-table-header-wide>span:nth-child(1) {
    flex: 2;
}

#players-table-header>span:nth-child(2),
#players-table-header-wide>span:nth-child(2) {

    border-inline: solid 1px var(--border-200);


}

#players-table-header>span:nth-child(3),
#players-table-header-wide>span:nth-child(3) {

    border-right: solid 1px var(--border-200);


}


.player-item {
    display: flex;
    align-items: center;
    height: 26px;
    font-size: 14px;
    font-weight: 400;

}

.player-item.red {
    color: var(--text-400);
}

.player-item.green {
    color: var(--text-500);
}

.player-item.orange {
    color: var(--text-200);
}

.player-item>span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 100%;


}

.player-item>span {
    flex: 0.85
}

.player-item>span:nth-child(1) {
    flex: 2;


}

.player-item>span:nth-child(1)>span {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;


}




#players-container {
    height: calc(100% - 40px);
    overflow-y: auto;
}



#history-table-header {
    display: flex;
    height: 40px;
    font-size: 14px;
    display: flex;

}

#history-table-header>span {
    flex: 1;
    height: 100%;
    padding: 0 8px;
    display: flex;
    align-items: center;
    background-color: var(--background-300);
    line-height: 40px;
}

#history-table-header>span.hide {
    display: none;
}

@media(min-width:1000px) {
    #history-table-header>span.hide {
        display: flex;
        flex: 2
    }
}

#history-table-header>span:not(:last-of-type) {
    border-right: 1px solid var(--border-200);
}

#history-container {
    height: calc(100% - 40px);
    overflow-y: auto;
}

.history-item {
    display: flex;
    align-items: center;
    height: 26px;
    font-size: 14px;
    font-weight: 400;
}

.history-item>span {
    display: flex;
    align-items: center;
    padding: 0 10px;
    height: 100%;
    flex: 1
}


.history-item>span:nth-child(1).green {
    color: var(--text-500);
}

.history-item>span:nth-child(1).red {
    color: var(--text-400);
}

.history-item>span.hide {
    display: none;
}


@media(min-width:1000px) {
    .history-item>span.hide {
        display: flex;
        flex: 2;
        overflow: hidden;



    }

    .history-item>span.hide>p {
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        color: var(--text-800);

    }

    .history-item>span.hide>p:hover {
        text-decoration: underline;

    }
}


.isRTL {
    direction: rtl;
}


#history-details-overlay {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#history-details-overlay.hide {
    display: none;
}

#details {
    width: 344px;
    height: 564px;

    border: 3px solid var(--border-300);
    border-radius: var(--modal-border-radius);
    z-index: 4;
    overflow: hidden;
    background-color: white;
}

.font_rtl #details {
    direction: rtl;
}

#details *{
    font-family: Verdana, Geneva, Tahoma, sans-serif;
}

@media (max-width: 1024px) and (orientation: landscape) {
    #details {
        width: 100%;
        height: 100%;
    }
}


.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 8px 0 6px;
    border-bottom: 1px solid var(--border-300);
}

#details-close {
    background-color: var(--background-300);
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}

#details-container {
    padding: 8px;
    height: calc(100% - 40px);
    overflow-y: auto;
}

#details-wrapper {
    padding: 8px;


    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;

}

#details-general-title,
#details-boxes-title {
    color: #B7ABE5;
    font-weight: 800;
    line-height: 24px;
    font-size: var(--font-small);
    height: 24px;
}

#details-general-wrapper {
    margin-top: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.details-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
}

.details-item-title {
    font-size: 10px;
    font-weight: 600;
    line-height: 10px;
    color: #00000099;
    letter-spacing: 2%;
}

.details-item-value {
    line-height: 24px;
    color: #000000DE;
    font-weight: 400;
    font-size: 12px;

}

.details-item-value.won {
    color: var(--success-light);
    font-weight: 800;
}
.details-item-value.lost {
    color: var(--custom-lost);
    font-weight: 800;
}

#details-hands-wrapper {
    overflow-x: auto;
    display: flex;

}

.status-badge {
    padding: 4px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    gap: 6px;

}

.status-badge.won {
    background: var(--custom-won);
}

.status-badge.lost {
    background: var(--custom-lost);


}

.status-badge.open {
    background: var(--custom-open);



}

.status-badge.cashout {
    background: var(--custom-cashout);


}

.status-badge.cancel {
    background: var(--custom-cancled);

}

.status-badge.no-win {
    background: var(--custom-no-win);

}


@media (min-width:450px) {
    #details-hands-wrapper {
        justify-content: center;
    }
}

#details-boxes-wrapper span {
    color: white
}


.details-boxes-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 24px;
}

.boxes-item-title {
    color: #9684D9;
    font-weight: 700;
    font-size: var(--font-xsmall);
    letter-spacing: 2%;
    line-height: 10px;
}

.details-boxes-block {
    display: flex;
    align-items: center;
}









.details-badge-result {
    padding: 0 6px;
    line-height: 24px;
    color: #F2F2F4;
    font-size: 14px;
    font-weight: 800;

    text-shadow: 0 1px 2px #000000B8
}

.font_rtl .details-badge-result {
    padding-bottom: 5px;
}

.copy-round {
    filter: invert();
    width: 10px;
    cursor: pointer;
}

.details-badge-img {
    width: 16px;
    height: 16px;
}

.details-badge-img.spin {
    animation: spin 2s linear infinite;
}

#halve-btn.disabled,
#double-btn.disabled {
    pointer-events: none;
    opacity: 0.5;
}

#message-block {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background-color: white;
    height: 100%;
}

#message-block.hide {
    display: none !important;
}

#message-block img {
    height: 16px;
}

#message-block p {
    color: #999999;
    font-size: 12px;
}

/*# sourceMappingURL=styles.e5169c777e73472e1a50.css.map*/