/*!********************************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./node_modules/normalize.css/normalize.css ***!
  \********************************************************************************************/
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
   ========================================================================== */

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
   ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

abbr[title] {
  border-bottom: none; /* 1 */
  text-decoration: underline; /* 2 */
  text-decoration: underline dotted; /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* Forms
   ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 1 */
  font-size: 100%; /* 1 */
  line-height: 1.15; /* 1 */
  margin: 0; /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input { /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

button,
select { /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
   ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/buttons.css ***!
  \**************************************************************************/

.button{
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 16px;
  
    font-weight: 900;
    font-size: 14px;
    transition: all 0.1s;
    color: white;
}
@media(min-width:800px){
    .button:hover
    {
        opacity: 0.8;
    }
}



.button-top-layer{
    position: absolute;
    z-index: 3;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 4px;
    border-radius:8px;
}

.button-gradient-1{
    position: absolute;
    z-index: 2;
    top: 3px;
    left: 3px;
    right: 3px;
    bottom: 3px;
    border-radius:8px;
}

.button-gradient-2{
    position: absolute;
    z-index: 1;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    border-radius:12px;
}

.button-shadow{
    position: absolute;
    z-index: 0;
    top: 2px;
    left: 0px;
    right: 0px;
    bottom: -2px;
    background: #000000;
    opacity: 60%;
    border-radius:12px;
}

.button-shadow::before{
    content: "";
    width: 100%;
    height: 100%;
    border-radius:12px;
    display: block;
}

.primary_button .button-top-layer {
    border: 1px solid #2A7110;
    background: linear-gradient(180deg, #D9F99D 1%, #84CC16 17%, #4D7C0F 100%);
}
.primary_button .button-gradient-1{
    background: linear-gradient(180deg, #6EAC06, #144900);
}
.primary_button .button-gradient-2{
    background: linear-gradient(180deg, #B6ED61 0%, #5F9836 49%, #215F0B 100%);
}

.primary_button .button-shadow::before{
    background: #1C5B05;
}

.secondary_button .button-top-layer {
    border: 1px solid #18181B;
    background: linear-gradient(180deg, #71717A 1%, #3F3F46 17%, #27272A 100%);
}
.secondary_button .button-gradient-1{
    background: linear-gradient(180deg, #71717A, #27272A);
}
.secondary_button .button-gradient-2{
    background: linear-gradient(180deg, #71717A 0%, #3F3F46 49%, #27272A 100%);
}
.secondary_button .button-shadow::before{
    background: #18181B;
}

.danger_button .button-top-layer {
    border: 1px solid #711010;
    background: linear-gradient(180deg, #F99DBE 1%, #CC1616 17%, #7C0F0F 100%);
}
.danger_button .button-gradient-1{
    background: linear-gradient(180deg, #AC0638, #490000);
}
.danger_button .button-gradient-2{
    background: linear-gradient(180deg, #ED6183 0%, #983636 49%, #5F0B0B 100%);
}

.danger_button .button-shadow::before{
    background: #5B0505;
}

.purple_button .button-top-layer {
    border: 1px solid #3B2882;
    background: linear-gradient(180deg, #9684D9 1%, #755DCD 17%, #563ABC 100%);
}
.purple_button .button-gradient-1{
    background: linear-gradient(180deg, #6449C7, #442E95);
}
.purple_button .button-gradient-2{
    background: linear-gradient(180deg, #9684D9 0%, #755DCD 49%, #563ABC 100%);
}
.purple_button .button-shadow::before{
    background: #3B2882;
}

.orange_button .button-top-layer {
    border: 1px solid #7C4A0F;
    background: linear-gradient(180deg, #F9C99D 1%, #CC8316 17%, #7C4A0F 100%);
}
.orange_button .button-gradient-1{
    background: linear-gradient(180deg, #AC5606, #491F00);
}
.orange_button .button-gradient-2{
    background: linear-gradient(180deg, #ED8B61 0%, #987136 49%, #5F3D0B 100%);
}
.orange_button .button-shadow::before{
    background: #5B3E05;
}
/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/menu.css ***!
  \***********************************************************************/

 
#menu {
    z-index: 4;
    backdrop-filter: blur(8px) ;
    -webkit-backdrop-filter: blur(8px) ; 
}

.portrait #menu, .landscape #menu {
    z-index: 1;
}
#menu-modal {
    max-width: 344px;
    max-height: 600px;
    height: 100vh;
    border-radius: 12px !important;
 
 
}

.portrait #menu-modal  {
    max-width: unset;
    max-height: unset;
    width: calc(100vw - 48px) !important;
    width: calc(100dvw - 48px) !important;
    height: calc(100vh - 48px) !important;
    height: calc(100dvh - 48px) !important;
    margin: 0 !important;
}
.landscape #menu-modal{
    max-width: unset;
    max-height: unset;
    width: calc(100vw) !important;
    width: calc(100dvw) !important;
    height: calc(100vh) !important;
    height: calc(100dvh) !important;
}

#menu-items {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    padding: 0 var(--modal-padding);
    justify-content: center;
    overflow-y: scroll;
  
}

.menu-item {
    display: -webkit-flexbox;
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10%;
    max-width: 117px;
    width: calc(33.34% - 3% - (2 * var(--modal-padding)));
    align-items: center;
    position: relative;
    aspect-ratio: 1/1;
    box-sizing: content-box;
    cursor: pointer;
    margin-bottom: 3%;
    border-radius:8px ;
}


@media screen and (max-width: 300px) {
    .menu-item {
        width: calc(50% - 3%);
    }
}

.menu-icon {

    width: 24px;
    height: 24px;

}

.menu-icon,
.menu-icon-title {
    z-index: 5;
}

.menu-icon-title {
    font-weight: 700;
    font-size: 12px;
    color: #FFFFFFDE;
    text-align: center;
 
    word-wrap:break-word;
    width: 90%
}


@media(min-width:500px) {
    .menu-icon-title {
        font-size: 12.21px;
    }

    .menu-icon {

        width:27px;
        height: 27px;
    
    }
}


#menu-versions {
    width: 100%;
    padding: var(--modal-padding);
    padding-top: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 6px;
    direction: ltr;
}

#menu-versions .key,
#menu-versions .val {
    font-weight: 800;
    font-size: 12px;
}

#menu-versions .key {
    color: var(--secondary-text-color);
}

#menu-versions .key::after {
    content: ":";
    color: var(--secondary-text-color);

}

#menu-versions .val {
    color: var(--text-color);
}


#menu-versions .version {
    display: flex;
    gap: 4px
}
/*!***********************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/info.css ***!
  \***********************************************************************/
#info-modal {
    max-width: 500px;
    max-height: 600px;
    height: 100vh;
    overflow-y: hidden;
    gap: 0 !important;
    border-radius: 12px !important;
}

#info.overlay {
    background-color: transparent;
}


.mobile #info-modal {
    max-width: unset;
    max-height: unset;
    width: calc(100vw - 48px);
    height: calc(100vh - 48px);

}

#info-details,#help-iframe{
    width: 100%;
    height: 100%;
}


.GameInformation {
    padding: 32px;
    line-height: 1.6;
    background-color:#240F59;
    height: calc(100% - 61px);
    overflow-y: auto;
}

.GameInformation .hidden {
    display: none;
}

.GameInformation h1,
.GameInformation h2,
.GameInformation h3,
.GameInformation h4,
.GameInformation h5,
.GameInformation h6 {
    color: #84CC16;
font-weight: 800;
}

.GameInformation ul {
    list-style-type: disc;
    list-style-position: inside;
    margin-left: 15px;
}

.GameInformation p,
.GameInformation li,
.GameInformation div {
    color: var(--text-primary);
    font-size: 14px;
    text-align: justify;
    font-weight: 600;
}

.GameInformation table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.GameInformation th,
.GameInformation td {
    padding: 12px;
    text-align: center;
    border: 1px solid white;
    color: rgb(219, 218, 218);
    font-size: 11px;
    direction: ltr;
}
/*!********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/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/chat.css ***!
  \***********************************************************************/


.chat {
    position: fixed;
    top: var(--header-height);
    right: 8px;
    left: unset;
    bottom: unset;
    z-index: 3;
   
    width: 100%;
    min-width: 212px;
}

 
    .desktop .chat, .large-desktop .chat {
        width: 340px;
    }
 

 


.portrait .chat {
    top: 20px !important;
    right: 20px !important;
    width: calc(100vw - 40px) !important;
    width: calc(100dvw - 40px) !important;
    height: calc(100vh - 40px) !important;
    height: calc(100dvh - 40px) !important;
    margin: 0 !important;
}

 
.landscape .chat {
   
    top: 0 !important;
    left: 0 !important;
    width: 100vw  !important;
    width: 100dvw  !important;
    height: 100vh  !important;
    height: 100dvh  !important;
    max-width: unset !important;
}
   
 
.messages-container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    overflow-y: scroll;
    font-family: inherit;
    padding:8px;
    padding-top: 0 !important;
    /* margin-bottom: var(--modal-padding);
    border-bottom: 1px solid var(--text-divider); */
    
}

.message {
    padding: 8px 12px;
    border-radius: 4px;
    color: var(--text-secondary);
    background-color:var(--default-600);
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: left;
    justify-content: center;
    gap: 4px;
    font-family: inherit;
}


.message .sender {
    color: var(--primary-main);
    line-height: 14.57px;
    font-size: 11.21px;
    /* long username */
    white-space: normal;
    word-wrap: break-word;
}

.message .content {
    font-size: 10px;
    line-height: 13px;
    word-break: break-word;

}

.message.sent {
    background-color: var(--default-700) !important;
    color: var(--text-primary) !important;

}

.sent .sender {
    display: none;
}


.chat-box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    width: 100%;
    font-family: inherit;
    padding: var(--modal-padding);
    padding-top: 0 !important;
}

.chat-input {
  flex:1;
 
 
   
    

}

#chat-button{
    height: 100%;
    width: 60px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 8px !important;
}
.chat-input::placeholder {
    color:#FFFFFF66
}

.chat-send.primary_button {
    min-width: 71px;
    height: 40px;




    font-family: inherit;
    line-height: 28px;

}

#chat-btn-text {
    display: block;
    z-index: 5;
    position: relative;
    color: var(--text-color);
    font-size: 14px;
    line-height: 28px;
    font-weight: 900;
    text-shadow: var(--text-shadow);
}

#chat-btn-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

#chat-empty {
    width: calc(100% - 32px);
    display: flex;
    justify-content: center;
    padding: 8px;
    border: solid 1px var(--default-600);
    border-radius: 8px;
    align-items: center;
    height:40px;
    margin: 16px;
    margin-top: 0;
    gap:5px
}

#chat-empty span{
    font-weight: 800;
    color: #FAFAFA;
    font-size: 10px;
    text-wrap: balance;
    opacity: 0.4;
}

#chat-empty img{
    width: 14px;
    height: 18px;
    margin: 0 4px 0 4px;
    opacity: 0.4;
}



#chat-devider{
    height: 1px;
    width: 95%;
    background-color: var(--text-divider);
    margin: 6px 0 8px 0;
}
/*!**************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/history.css ***!
  \**************************************************************************/
.history {
    position: fixed;
    top: var(--header-height);
    left: 8px;
    z-index: 3;



}

.desktop .history,
.large-desktop .history {
    width: 340px;
}

.portrait .history {
    top: 20px !important;
    left: 20px !important;
    width: calc(100vw - 40px) !important;
    width: calc(100dvw - 40px) !important;
    height: calc(100vh - 40px) !important;
    height: calc(100dvh - 40px) !important;
    margin: 0 !important;
}

.landscape .history {
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    margin: 0 !important;
    top: 0 !important;
    left: 0 !important;
}



#history-empty {
    width: 100%;
    display: flex;
    justify-content: center;
    padding: 20px 20px;
    color: var(--text-disabled);
    border: solid 1px var(--default-600);
    background-color: var(--default-800);
    border-radius: 4px;
    align-items: center;
    height: 76px;
    font-weight: 800;


}

.history.mobile {
    top: 24px !important;
    left: 24px !important;


}

.history.font_rtl.mobile {
    right: 24px !important;
}

/* 
.mobile .modal-container {
    width: calc(100vw - 48px) !important;
    width: calc(100dvw - 48px) !important;
    height: calc(100vh - 48px) !important;
    height: calc(100dvh - 48px) !important;
    margin: 0 !important;
} */

.history-items-wrapper {
    margin-top: 5.41px;
    padding: 5px;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    overflow-y: scroll;
    font-family: inherit;
}

.history-button {
    border-radius: 4px;
    height: 32px;
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.72);
    color: white;
    width: 100px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.1s;
}


.history-item {
    padding: 8px 12px;
    border: 1px solid var(--default-500);
    background-color: var(--default-800);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    border-radius: 4px;
}

.bet-win-result {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.history-item.selected {
    border: 1px solid var(--default-200);
}

.history-item-header {
    display: flex;
    justify-content: space-between;
    height: 10.83px;
    align-items: center;
}

.history-item-header .history-items-step {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);

}

.history-item-header .history-items-date {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-disabled);

}

.history-item-result {
    display: flex;
    justify-content: space-between;

}

.history-item-amount {
    display: flex;
    align-items: center;
    gap: 4px;

}

.history-item-amount .amount-title {
    font-size: 10px;
    font-weight: 500;

    color: var(--text-secondary);

}

.history-item-amount .amount-result {
    font-size: 12px;
    font-weight: 500;

    color: var(--text-primary);
}

.history-item-amount .amount-result.won {
    color: #4CAF50;
    font-weight: 800;
}

.history-item-btn-clickable {
    max-width: 100px !important;
    width: 100%;
    height: 40px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;




}

.history-item-btn-clickable:hover {
    opacity: 0.9;
}

.item-result-image {
    position: absolute;
    top: 0;
    left: 0;
}

.item-result-image-arrow {
    width: 10px;
    height: 16px;
    z-index: 1;
    position: relative;
}

.item-result-text {
    position: relative;
    z-index: 5;
    font-size: 14px;
    font-weight: 900;
    line-height: 28px;
    color: white;
    text-shadow: 0 1px 2px #000000B8;
  
}

.item-result-image-arrow.reversed {
    transform: scaleX(-1);
}

@media(max-width:280px) {

    .history-item-btn-clickable.button {
        padding: 8px !important;
        width: 60px !important;
        height: 30px !important;

    }

    .item-result-text {
        font-size: 8px !important;
    }
}

#details-modal {
    width: 300px;
    min-height: 112px;
    background: linear-gradient(360deg, #1B0C3F 0%, #3A1C84 100%);
    border: 3px solid var(--modal-border);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8.8px;

}

@media(max-width:350px) {
    #details-modal {
        width: 95vw;

    }

    #details-modal span {
        font-size: 10px !important;
    }
}

#details-modal.modal {
    width: 300px !important;
    height: 112px !important;
}

#details-modal {
    padding: var(--modal-padding);
}


#details {
    position: fixed;

    width: 344px;
    height: 564px;


    border-radius: 17.6px;
    z-index: 4;
    overflow: hidden;
}

.portrait #details {
    top: 20px !important;
    left: 20px !important;
    width: calc(100vw - 40px) !important;
    width: calc(100dvw - 40px) !important;
    height: calc(100vh - 40px) !important;
    height: calc(100dvh - 40px) !important;
    margin: 0 !important;
}

.landscape #details {
    top: 0 !important;
    left: 0 !important;
    max-width: unset;
    max-height: unset;
    height: 100%;
    width: 100%;
    margin: 0 !important;
}

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

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

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

#details-header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    background-color: #4C2ABA;
    padding: 16px;

}

#details-modal-container {
 
    background-size: contain;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #240F59;
}

#details-title {
    font-size: 16px;
    font-weight: 700;
    color: #FAFAFA;
}



#details-container {

    height: calc(100% - 16px - 72px - 4px);


}

#details-wrapper {
    padding: 8px;




    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 100%;
    overflow-y: auto;
}

#details-general-title,
#details-boxes-title {
    color: #B7ABE5;
    font-weight: 800;
    line-height: 24px;
    font-size: 12px;
    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: var(--text-secondary);
    letter-spacing: 2%;
}

.details-item-value {
    line-height: 24px;
    color: var(--text-primary);
    font-weight: 400;
    font-size: 12px;

}

.details-item-value.won {
    color: #4CAF50;
    font-weight: 800;
}

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


.details-boxes-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 48px;
    border-radius: 8px;
    border: 1px solid var(--default-600);
    background-color: var(--default-800);
    padding: 8px;
}

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

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

.details-boxes-block img {
    width: 35px;
  
    mix-blend-mode: luminosity;

}
.details-boxes-block img.chosen{
    mix-blend-mode: unset;
} 

.status-badge {
    padding: 0 8px;
    background-color: #388E3C;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 22px;
    gap: 6px;
    font-weight: 800;
    text-shadow: 0 1px 2px #000000B8;
}

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

}

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

}

.status-badge.cashout {
    background-color: var(--badge-cashout-bg)
}

.status-badge.cancel {
    background-color: var(--badge-cancel-bg)
}


.details-badge-result {

    line-height: 24px;
    color: #F2F2F4;
    font-size: 12px;
    /* font-weight: 500; */
}


.details-round-copy {
    display: flex !important;
    align-items: center !important;
    gap: 5px;
}

.copy-round-wrapper {
    display: flex;
    align-items: center;
    gap: 5px;
}

.copy-round {
    width: 10px;

    cursor: pointer;
}

@media(min-width:1000px){
    .history-button:hover{
        opacity: 0.9;
    }
}

/*!***************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/nickname.css ***!
  \***************************************************************************/
#nickname-modal {
    width: 312px;
    background: linear-gradient(360deg, var(--default-950) 0%, var(--default-800) 100%);
    background-size: contain;
    border-radius: 16px;
    overflow: hidden;
    border: 3px solid #1A103F;
}

 

.input-bg {
    display: flex;
    border-radius: var(--nickname-modal-input-raduis);
    width: 100%;
    padding: 2px;
    background: linear-gradient(to bottom, #1A103F, #5035ad);
}

#nickname-input {
    background-color: #000000;
    color: #F9E6FF;
    border: 1px solid transparent;
    width: calc(96% - 6px);
    height: 85%;
 padding: 0 6px;
 border-radius: 3px;
    border: none;
}

#nickname-bg {
    width: 100%;
    border-radius: 7px;
    background: linear-gradient(0deg, #D1A3FA 0%, #7432CD 100%);
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
     

}

#nickname-header {
    padding: 0 16px;
    height: 60px;
    background-color: var(--default-700);
    display: flex;
    align-items: center;
}

#nickname-wrapper {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}



#nickname-bg.invalid {
    background: rgb(228, 81, 81)
}

#nickname-input::placeholder {
    color: #FFFFFF66;
    font-family: inherit;
}



#nickname-button {
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

#nickname-btn-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}



#nickname-message {
    color: white;
    font-size: 12px;
}
/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/winner.css ***!
  \*************************************************************************/
#winner-modal {
    overflow: hidden;
    padding-bottom: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 233px;
    height: 237px;
    border-radius: 19px;
    border: 4px solid rgba(255, 255, 255, 0.1);
    display: flex;
    flex-direction: column;
    background-color: var(--chat-background-color-opacity);
    gap: 8px;
    z-index: 100;
}


#img-container {
    height: 60%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
  
}

#winner-odds {
    color: var(--input-color);
    font-weight: 700;
    align-self: center;
    font-size: 30px;
}

.classic_2 #winner-odds , .buruka #winner-odds  {
    color: var(--purple);
}

#winner-result {
    width: 193px;
    align-self: center;
    border-radius: 8px;
    background-color: var(--dark-purple);
    color: #fefefe;
    text-align: center;
    padding: 9px;
    font-weight: 600;

}



#winner-first-img {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%,-25%);
    width: 150%;
}

#winner-second-img {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%);
    width: 90%;
}
/*!****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/normalize.css ***!
  \****************************************************************************/
html,
body {
    min-width: 260px;
    overflow-x: auto;
    touch-action: manipulation; /* Prevents double-tap zoom */
    -ms-touch-action: manipulation; /* For IE */
}

/* CSS Reset */
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;
    vertical-align: baseline;
    box-sizing: border-box
}

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-smooth: always;
    text-rendering: optimizeLegibility;
    -webkit-user-select: none; /* Chrome */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE/Edge */
    user-select: none; 
     
     
}


/* width */
*::-webkit-scrollbar {
    display: none;
}


textarea,
input {
    outline: none;
}

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

body {
    line-height: 1;
}

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;
}

html,
body {
    height: 100%;
    overflow: hidden;

}

* {
    user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    font: inherit
}

input,
textarea {
    -webkit-user-select: auto;
    -ms-user-select: auto;
    user-select: auto;
}
/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/header.css ***!
  \*************************************************************************/
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    z-index: 2
}

.portrait #header, .landscape #header {
    z-index: 1
}

.landscape #header{
    height: 35px;
}

#header-username{
    color: white;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

}

#header-icons {
    display: flex;
    align-items: center;
    gap: 16px;
}

#header-icons div {
    cursor: pointer;
    width: 20px;
}
/*!*************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/footer.css ***!
  \*************************************************************************/
footer, #footer-panel{
    /* position: absolute;
    bottom: 5px;
    left: 5px;
    width: calc(100% - 10px); */
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    gap: 8px;
    align-items: center;
    background-color: var(--default-700);
    padding: 8px;
    border-top: 1px solid var( --default-600);
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
   
    overflow-x: auto;
}

#footer-panel-seperator{
    flex-grow: 1;
    background-color: var(--default-700);
}

 

.landscape #footer-panel{
   border-bottom-right-radius: 0;
   min-height: 40px;
}

.desktop footer {
    height: 53px;
}

footer .separator {
    height: 100%;
    width: 1px;
    background-color:var(--stake-700) ;
}

.portrait footer .separator, .landscape footer .separator {
    display: none;
}

.portrait footer {
 
    width: calc(100%);
    margin: 0 auto;
    
}

/* .landscape footer {
    display:none;
} */

.footer-info{
    display: flex;
    flex-grow: 1;
    gap: 1px;
    flex-wrap: wrap;
    height: fit-content;
    
}

.footer-info > div:first-child {
    direction: ltr;
}

.footer-row{
    display: flex;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    gap:8px
   
}

.footer-element{
    display: flex;
    gap: 4px;
    align-items: center;
}

.font_rtl .footer-element{
direction: rtl;
}

.footer-element span{
    /* color: var(--text-primary); */
    color: var(--text-primary);
    font-weight: 800;
    font-size: var(--font-xsmall);
    white-space: nowrap;
}

@media (max-width:380px){
    .footer-element{
        gap:2px
    }
    .footer-element span {
        font-size: 9px;
    }
}
@media (max-width:350px){
   
    .footer-element span {
        font-size: 8px;
    }
}
 
.footer-element span:first-child{
    color: var(--default-100);
    font-size: var(--font-2xsmall);
}

 

.img-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}


.portrait footer .img-wrapper, .landscape footer .img-wrapper{
    display: none;
}

.portrait #footer-panel, .desktop #footer-panel, .large-desktop #footer-panel{
    display: none;
}


/* 
#footer-panel .img-wrapper:nth-of-type(1) {
    left: 8px;
    top: -75%;
}
#footer-panel .img-wrapper:nth-of-type(2) {
    right: 8px;
    top: -75%;
} */


#footer-image,
#footer-image-panel {
    width: 54px;
    height: 26px;

    object-fit: contain;
}

.font_ltr #footer-image
  {
    border-right: 1px solid #651FFF;
    padding-right: 8px;
}

.font_rtl #footer-image
  {
    border-left: 1px solid #651FFF;
    padding-left: 8px;
}
.dark.classic #totalRoundsPlayed{
    filter: none;
}
.light #totalRoundsPlayed, .classic #totalRoundsPlayed, .buruka #totalRoundsPlayed{
    filter: invert();
}


.large-desktop .footer-element span, .desktop .footer-element span {
    font-size: var(--font-small);
}
/*!****************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/bet-modal.css ***!
  \****************************************************************************/
#bet-modal {
    position: absolute;
    width: 100%;
    max-width: 360px;
    bottom: 120px;
    left: 50%;
    transform: translate(-50%, 0);

    border-bottom: none;
    border-radius: 8px;
    background: url(4224436f509ee6dbf0cf.png) repeat;
    background-size: contain;
    overflow: hidden;

}

.portrait #bet-modal {
    top: unset;
    bottom: 49px;
    max-width: 100%;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;

}

.landscape #bet-modal {}

#bet-modal-header {
    height: 45px;
    background-color: #4C2ABA;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    height: 60px;

}

#bet-modal-title {
    color: white;
    text-transform: capitalize;

}

#bet-modal-container {
    padding: 8px 8px 8px 8px;
    background-color: var(--default-800);
}

.portrait #bet-modal-container {
    padding: 16px 16px 96px 16px;

}


#bet-modal-bar {
    padding: 4px;
    border-radius: 7px;
    background: linear-gradient(to bottom, #7432CD, #D1A3FA);
}

#bet-modal-control {
    background-color: #351A7A;
    border-radius: 3px;
    padding: 5px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#bet-modal-control span {
    color: #F9E6FF;
    font-weight: 800;
    font-size: 16;
}

#bet-modal-control button {
    width: 32px;
    height: 22px;
    background-color: #271359;
    color: #00000047;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    color: #F4F4F4;
    font-size: 10px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bet-modal-chips {
    margin-top: 4px;
    display: flex;
    align-items: center;
}

#bet-modal-chips button {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid #FFFFFF;
    color: #F4F4F4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;

}

#bet-modal-chips button.disabled {
    pointer-events: none;
    opacity: 0.5;
}


#bet-modal-chips button:nth-of-type(1) {
    background: linear-gradient(315.91deg, rgba(255, 255, 255, 0) -13.07%, rgba(255, 255, 255, 0.25) 70.01%);

}

#bet-modal-chips button:nth-of-type(2) {
    background: linear-gradient(44.09deg, rgba(255, 255, 255, 0) -13.07%, rgba(255, 255, 255, 0.25) 70.01%);
;

}













#bet-confirm {
    width: 100%;
    color: white;
    font-size: 16px;
    font-weight: 800;
    border: none;
    margin-top: 16px;
    height: 48px;

    cursor: pointer;


}

#bet-modal-chips-wrapper {
    flex: 1;
    display: flex;
    position: relative;
    align-items: center;
    height: 88px;
    overflow: hidden;

}

#bet-modal-chips-inner {
    display: flex;
    margin: 0 10px;
    gap: var(--chips-wrapper-gap);
}


.chip {
    width: var(--chip-size);
    height: var(--chip-size);
    border-radius: 50%;
    /* Circle */

    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 10px;
    color: #F9E6FF;
    text-shadow: 0 1.33px 1.33px #000000CC;
    background-size: contain;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
    font-weight: 800;
}


.chip.disabled {
    opacity: 0.5;
    pointer-events: none;
}
/*!**********************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/landscape-alert.css ***!
  \**********************************************************************************/
#landscape-alert-overlay{
    backdrop-filter: blur(10px); /* adjust px for more or less blur */
    -webkit-backdrop-filter: blur(10px); /* for Safari */
    background-color: rgba(0, 0, 0, 0.578);
}


#landscape-alert-modal {
    width: 312px;
    /* background: url(../assets/modal-bg.png) repeat; */
    background-color: #211055;
    background-size: contain;
    border: 3px solid #1A103F;
    border-radius: 16px;
    overflow: hidden;
}


#landscape-alert-header{
    padding: 0 16px;
    height: 60px;
    background-color: #4C2ABA;
    display: flex;
    align-items: center;
}


#landscape-alert-wrapper{
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 100px;
}

#landscape-alert-message{
    font-size: 14px;
}
/*!*******************************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles/auto-cashout.css ***!
  \*******************************************************************************/
.autocashout-container{
   
    --default-950: #0D151D;
    --default-900: #27147A;
    --default-800: #331990;
    --default-700: #3E23A3;
    --default-600: #4B2EB8;
    --default-500: #5C3ECC;
    --default-400: #7255E0;
    --default-300: #8972F0;
    --default-200: #A08FF9;
    --default-100: #B9ACFC;
    --default-50: #D5CCFE;
    --default-0: #EDE8FF;

    --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: #5C3ECC;
    --gradient-default-secondary: #4B2EB8;


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

    --warning-main: #ED6C02;
    --warning-light: #FF6800;
    --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.55);
    --opacity-dark-75: rgba(13, 21, 29, 0.75);

}


.autocashout-container{
    max-width: 350px;
    width: 80vw;
    height: 50px;
    gap: 10px;
    border-radius: 16px;
    padding: 8px 16px;
    background-color: #4C2ABA;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%,-50%);
}

.autocashout-container span{
    font-weight: 800;
    font-size:12px;
    color: var(--default-0);
}

.autocashout-container .progressBar {
   flex:1;
    height: 10px;
    border-radius: 50px;
    background-color: #240F59;
    position: relative;
    overflow: hidden;
}

.autocashout-container .progress {
    width: 100%;
    height: 100%;
    background-color: var(--primary-light);

}

.font_ltr .autocashout-container .progress {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
}

.font_rtl .autocashout-container .progress {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}
/*!******************************************************************!*\
  !*** css ./node_modules/css-loader/dist/cjs.js!./src/styles.css ***!
  \******************************************************************/
.font_rtl {
    font-family: 'Vazirmatn' !important;
    direction: rtl;
}

.font_ltr {
    font-family: 'NunitoSans' !important;
    direction: ltr;
}

.flex-rtl {
    flex-direction: row-reverse;
}

body.safari [data-text] {
    font-weight: 500 !important;
    text-shadow: -1.5px 1.5px 2.5px rgb(17, 16, 16) !important;
}

body.safari.font_ltr [data-text] {
    font-weight: 700 !important;
}

#canvas {
    height: 100% !important;
    width: 100% !important;

}

.hide {
    display: none !important;
}


:root {
    --button-background: #48d218;
    --button-border: 3px solid transparent;
    --button-background-secondary: #272760;
    --button-border-secondary: 3px solid transparent;
    --nickname-modal-width: 312px;
    --nickname-modal-gap: 16px;
    --modal-padding: 16px;
    --font-2xsmall: 8px;
    --font-xsmall: 10px;
    --font-small: 12px;
    --font-medium: 14px;
    --font-large: 16px;
    --border-radius: 8px;
    --border-radius-large: 8px;
    --nickname-modal-width: 312px;
    --nickname-modal-gap: 16px;
    --modal-padding: 16px;
    --nickname-modal-input-padding: 12px;
    --nickname-modal-input-raduis: 16px;
    --nickname-modal-input-padding: 12px;
    --nickname-modal-input-raduis: 16px;
    --input-bg: var(--dark-purple);
    --input-color: #C8BEEB;
    --input-border-color: var(--purple);
    --nickname-modal-input-placeholder-color: #4D34A8;
    --nickname-modal-button-height: 48px;
    --nickname-modal-button-padding: 10px;
    --modal-background: #3B2882D9;
    --modal-border: #1A103F;
    --modal-border-radius: 16px;

    --chat-background-color-opacity: #3B2882D9;
    --chat-background-color: #3c2882f1;

    --purple: #563ABC;
    --dark-purple: #1A103F;
    --light-purple: #9847FF;

    --text-shadow: -0.5px 1px 3px rgb(44, 40, 40);
    --text-color: #FFFFFF;
    --secondary-text-color: #A3E635;

    --modals-shadow: 0px 0px 20px rgba(255, 18, 246, 0.6);

    --input-shadow: inset 0px 6px 11px 0px rgba(0, 0, 0, 1);

    --badge-lost-bg: #F44336;
    --badge-open-bg: #F57C00;
    --badge-cashout-bg: #29B6F6;
    --badge-cancel-bg: #71717A;

    --chips-wrapper-gap: 0;
    --chip-size: 0;
    --header-height:50px;

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

    --text-primary: #FFFFFFDE;
}


body {
    --default-950: #0D151D;
    --default-900: #240F59;
    --default-800: #3A1C84;
    --default-700: #4C2ABA;
    --default-600: #5A31E5;
    --default-500: #651FFF;
    --default-400: #8354FF;
    --default-300: #A07EFF;
    --default-200: #C2AFFF;
    --default-100: #E2D9FF;
    --default-50: #F5F0FF;
    --default-0: #F5F0FF;

    --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: #651FFF;
    --gradient-default-secondary: #5A31E5;
    --inner-shadow-top:#0101011A;
    --inner-shadow-down:#FFFFFF1A;

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

    --warning-main: #ED6C02;
    --warning-light: #FF6800;
    --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: #0D151DF2;
    --opacity-dark-85: #0D151DD9;
    --opacity-dark-75: #0D151DBF;
    --input-border: linear-gradient(to bottom, var(--default-950), var(--default-500));
}


body.light {
    --default-950: #F5F7FB;
    --default-900: #E6EBF3;
    --default-800: #D3DDEE;
    --default-700: #C1CFEA;
    --default-600: #ADC1E1;
    --default-500: #97B2D6;
    --default-400: #82A4CB;
    --default-300: #6F96C0;
    --default-200: #5B89B5;
    --default-100: #477DAC;
    --default-50: #316EA2;
    --default-0: #1D5F96;

    --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: #ADC1E1;
    --gradient-default-secondary: #97B2D6;


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

    --warning-main: #ED6C02;
    --warning-light: #FF6800;
    --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: #000000DE;
    --text-secondary: #00000099;
    --text-disabled: #00000066;
    --text-divider: #0000001A;

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


}



.modal-container {
    height: 100%;
    position: relative;
    display: flex;
 
    background-color: #240F59;
    background-size: contain;
    border: 3px solid var(--modal-border);

    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    border-radius: 12px;


    overflow: hidden;
}

.pattern {
    background: url(4224436f509ee6dbf0cf.png) repeat;
    background-size: 250px;
}

#info-modal.modal-container {
 
   
}

#chat .modal-container,#history .modal-container, #menu-modal.modal-container, #menu-modal.modal, #info .modal-container, #info .modal  {
    border: none;
}

/* @media (max-width:1050px) {
    .modal-container {
        background-color: var(--chat-background-color);
    }
} */



.modal-header {
    display: flex;
    justify-content: space-between;
    color: #FAFAFA;
    font-size: 16px;
    font-weight: 700;
    align-items: center;
    width: 100%;
    background-color: var(--default-700);
    padding: var(--modal-padding);

}

.close-button {
    width: 32px;
    height: 29.06px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.menu-item.gradient-button {
    box-shadow: inset 0 2px 0 #FFFFFF1A, inset 0 -1px 0 #0101011A;
}


.gradient-button {
    background: linear-gradient(180deg, var(--default-600) 0%, var(--default-500) 100%);
    box-shadow: 0px 2px 0px 0px #FFFFFF40 inset;

    box-shadow: 0px -1px 0px 0px #00000040 inset;
    
    transition: 0.1s all;
}

.gradient-button:hover {
    opacity: 0.9;
}

.primary-btn {
    transition: 0.1s all;
    border: none;
    color: white;
    background: linear-gradient(180deg, #E2FFE9 2.4%, #9CF9B5 6.21%, #26AB26 18.4%, #087200 84.34%, #0DB001 100%);
    font-weight: bold;
    border-radius: 16px;
    box-shadow: inset 0 -2px 0 #1E962E, inset 0 2px 0 #FAFAFA26;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}





.secondary-btn{
    transition: 0.1s all;
    border: none;
    color: white;
    background: linear-gradient(180deg, #E2FFE9 2.4%, #42A5F5 6.21%, #1976D2 18.4%, #1565C0 84.34%, #1976D2 100%);
    border-width: 0px, 2px, 4px, 2px;
    font-weight: bold;
    box-shadow: inset 0 -2px 0 #1565C0, inset 0 2px 0 #FAFAFA26;
    border-radius: 16px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    cursor: pointer;
}

@media(min-width:1000px){
    .primary-btn:hover {
        opacity: 0.9;
    }
    .secondary-btn:hover {
        opacity: 0.9;
    }
    
}

.modal-btn{
    flex:1;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;

}

.modal-btn.disabled{
    opacity: 0.5;
    pointer-events: none;
}

.close-button img,
.close-button svg {
    z-index: 5;
    width: 20px;
    height: 20px;
}


.modal-title {
    text-align: center;
    font-family: inherit;
    color: var(--text-primary);
}



.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    backdrop-filter: blur(8px) ;
    -webkit-backdrop-filter: blur(8px) ; 
    width: 100%;
    height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
    background-color: #09090b82;
    z-index: 1000;
    font-family: inherit;
}

.modal {
    display: flex;

    flex-direction: column;
    width: 95vw;
    max-width: var(--nickname-modal-width);

    background-color: var(--modal-background);
    border: 3px solid var(--modal-border);
    border-radius: var(--modal-border-radius);
    gap: var(--nickname-modal-gap);
    font-family: inherit;
    position: relative;
}



#modal-header {
    height: 32px;
    display: flex;
    align-items: center;
 
}




.placeholder {
    color: #FFFFFFDE;
    line-height: 16px;
    user-select: none;
    font-family: inherit;
}

#modal-placeholder {
 
    font-weight: 600;
    font-size: 12px;
    line-height: 24px;
}


@media (max-width:300px) {
    #modal-buttons-container button {
        padding: 8px !important;
        font-size: 8px !important;
    }
}

.modal-buttons-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

}

.modal-button-text {
    position: relative;
    z-index: 5;
    text-shadow: var(--text-shadow);
    font-weight: 900 !important;
}

.btn-wrapper {
    position: relative;
    cursor: pointer;
    transition: 0.1s ease;
    font-family: inherit;
}

.btn-wrapper::after {
    content: '';
    position: absolute;
    height: calc(100% + 3px);
    width: 100%;
    background-color: #309A08;
    z-index: 0;
    top: 0;
    left: 0;
    border-radius: 8px;
    font-family: inherit;
}

.btn-wrapper:hover {
    opacity: 0.9;
}

.btn-wrapper:active {
    opacity: 0.8;
}

.landscape-modal {
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    max-width: unset !important;


}

.landscape-modal .modal-container {
    margin: 0 !important;
}


.input-style {
    height: 40px;
    color: var(--text-primary);
    background-color: var(--default-950);
    border-radius: 6px;
    border: 1px solid var(--default-600);
    padding: 0 12px;
    font-family: inherit;
    line-height: 28px;

    display: block;
}

.input-style::placeholder{
    color: var(--text-disabled);
}

#menu .golden-wrapper, #info .golden-wrapper {
    height: fit-content;
}
.golden-wrapper {
    height: 100%;
    padding: 4px;
    border-radius: 16px;
    background:linear-gradient(to bottom,#CB8E31,#E5AA51,#75490C,#A46718);
}


.history-won {

    background: var(--custom-won);

    box-shadow: 0px -2px 0px 0px #00000026 inset;

}


.history-open {

    background: var(--custom-open);

    box-shadow: 0px -2px 0px 0px #00000026 inset;

}


.history-lost {

    background: var(--custom-lost);

    box-shadow: 0px -2px 0px 0px #00000026 inset;

}


.history-cashout {

    background: var(--custom-cashout);

    box-shadow: 0px -2px 0px 0px #00000026 inset;

}

.history-canceled {

    background: var(--custom-cancled);

    box-shadow: 0px -2px 0px 0px #00000026 inset;

}

.history-no-win {

    background: var(--custom-no-win);

    box-shadow: 0px -2px 0px 0px #00000026 inset;

}


#game-state-input-wrapper{
    padding: 0 8px;
    display: flex;
    align-items: center;
    position: fixed;
    top: 50%;
    left: 50%;
    gap: 10px;
    width: 625px;
    border-radius: 10px;
    border:6px solid transparent;
    direction: ltr;
    overflow: hidden;
}

#game-state-input-wrapper.invalid {
    border-color: rgb(179, 67, 67);
}

#game-state-input-wrapper.disabled {
    pointer-events: none;
    opacity: 0.5;
}


#game-state-currency{
    color: #A382FF;
    font-weight: 800;
    font-size: 50px;   
    font-family: 'NunitoSans','Helvetica' ;
}

  #game-state-currency.isRtl{
    padding-top: 8px;
    font-family:'Vazirmatn','Helvetica' !important
}

#game-state-input{
 
    height: 100%;
background: transparent;
border: none;
color: #F9E6FF;
font-size:50px;
font-weight: 800;
 font-family: 'Montserrat' !important;
 padding: 0;
 
}

#game-state-input::placeholder {
    color: rgba(255, 255, 255, 0.667);
    font-size:40px;
}

.font_rtl #game-state-input::placeholder{
    font-family: 'Vazirmatn' !important;
}

.font_ltr #game-state-input::placeholder{
    font-family: 'NunitoSans' !important;
}


#info.overlay{
    background-color: transparent;
    backdrop-filter: unset ;
    -webkit-backdrop-filter: unset ; 
}