/* 

PROJECT NAME : Winzo GAME
VERSION      : 1.0
START DATE   : 05-01-24
AUTHOR       : C.GANESH

*/

/* START THEME CSS */

:root {
    --board-width: 650px;
    --cell-width: calc(var(--board-width) / 15);
    --board-bg: white;
    --red: red;
    --green: #07c107;
    --yellow: rgb(255 209 0);
    --blue: #2311db;
    --cell-border-color: rgb(216, 216, 216);
}

/* @import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:ital,wght@0,100..700;1,100..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Black+Ops+One&display=swap');

/* @import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap'); */
body {
    font-weight: 400;
    font-style: normal;
    font-family: "Black Ops One", system-ui !important;
    background: url(../../assets/img/3d-fantasy-scene.webp)no-repeat center;
    background-size: 100% 100%;
}
/* body.bg-black{
     background:#230948 !important;
} */
h1 {
    /* font-family: 'Black Ops One', system-ui; */
    /* font-family: "Chakra Petch", sans-serif; */
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

input[type=number] {
    -moz-appearance: textfield;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Josefin Sans", sans-serif;
}

a:hover {
    text-decoration: underline;
}

button {
    outline: none;
    border: 0;
}
a:hover{text-decoration: none;}
.py-100 {
    padding: 100px 0;
}

.black-ops-one-regular {
    font-family: "Black Ops One", system-ui;
    font-weight: 400;
    font-style: normal;
}

.btn-1 {
    padding: 16px 75px;
    color: white;
    background: linear-gradient(0deg, #ce5d5d 0%, #a14646 100%);
    box-shadow: 0px 4.45507px 8.91014px rgba(0, 0, 0, 0.25);
    border: none;
    letter-spacing: 0.05em;
    font-weight: 500;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    border-radius: 50px;
}

.btn-clear {
    padding: 15px 25px;
    background-color: transparent;
    /* background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%); */
    /* box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2); */
    /* border-radius: 14px; */
    font-weight: bold;
    font-size: 16px;
    border: 0;
    color: #f85b21;
    border: 1px solid #f85b21;

    &:hover {
        box-shadow: 0 0.7em 1.5em -0.5em #f85b21;
    }
}

.btn-1:active {
    box-shadow: 0 0.3em 1em -0.5em #14a73e98;
}


.btn-2 {
    /* background: #F00000;
    background: -webkit-linear-gradient(to right, #DC281E, #F00000,  #ffe259, #ffa751);
    background: linear-gradient(to right, #DC281E, #F00000, #ffe259, #ffa751);
    background-size: 300% 100%;
    box-shadow: 0px 4.45507px 8.91014px rgba(0, 0, 0, 0.25);
    color: #fff;
    position: relative;
    border-radius: 50px;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out; */
    /* cursor: pointer;
    background-image: radial-gradient(100% 100% at 100% 0, #862475 0, #742267 100%);
    border-radius: 25px;
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #93257f 0 -3px 0 inset;
    color: #fff;
    position: relative;
    transition: box-shadow .15s, transform .15s; */
      background: url(../img/btn-wood.png) no-repeat center;
    background-size: 100% 100%;
    color: #613700;

}

/* .btn-2:focus {
    box-shadow: #93257f 0 0 0 1.5px inset, rgba(45, 35, 66, .4) 0 2px 4px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #93257f 0 -3px 0 inset;
}

.btn-2:hover {
    box-shadow: rgba(45, 35, 66, .4) 0 4px 8px, rgba(45, 35, 66, .3) 0 7px 13px -3px, #93257f 0 -3px 0 inset;
    transform: translateY(-2px);
    text-decoration: none;
}

.btn-2:active {
    box-shadow: #93257f 0 3px 7px inset;
    transform: translateY(2px);
} */

/* .btn-2:hover {
    color: #fff;
}

.btn-2:before {
    background-color: initial;
    background-image: linear-gradient(#fff 0, rgba(255, 255, 255, 0) 100%);
    border-radius: 125px;
    content: "";
    height: 50%;
    left: 4%;
    opacity: .3;
    position: absolute;
    top: 0;
    transition: all .3s;
    width: 92%;
}

.btn-2:hover {
    background-position: 100% 0;
    moz-transition: all .4s ease-in-out;
    -o-transition: all .4s ease-in-out;
    -webkit-transition: all .4s ease-in-out;
    transition: all .4s ease-in-out;
} */

@media (min-width: 768px) {
    .btn-2 {
        padding: 11px 20px;
    }
}

.btn-3 {
    color: #fff;
    padding: 15px 25px;
    /* background-color: #ff5e00; */
    /* background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%); */
    /* box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2); */
    box-shadow: -1px 4px 0px 3px #ffffff4d;
    border-radius: unset;
    font-weight: bold;
    font-size: 16px;
    border: 1px solid #fff;

    &:focus {
        box-shadow: 0px 2px 0px 3px #ffffff4d;
    }
}

.nav-link.btn-3 {
    border: 1px solid #fff;
}

.btn-4 {
    color: #fff;
    padding: 15px 25px;
    background-color: #ff0000;
    background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    font-weight: bold;
    font-size: 16px;
    border: 0;
}

.btn-5 {
    color: #fff;
    padding: 15px 25px;
    background-color: #177c74 !important;
    background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    font-weight: bold;
    font-size: 16px;
    border: 0;
}

.outline-warning {
    outline: 2px solid #ffd400;
}

.text-danger {
    margin-top: 14px;
    display: inline-block;
}

.bg-gold {
    background: linear-gradient(to right, #BF953F, #FCF6BA, #B38728, #FBF5B7, #AA771C);
}

.border-shadow {
    box-shadow: inset 0px 0px 8px 1px #000000;
}

.theme-text {
    color: #240909 !important;
}

.text-gold {
    color: #ffda96;
}

.border-gold {
    /* border: 3px solid transparent; */
    /* border-image: linear-gradient(to right, #e09339 0%, #dc9e75 100%); */
    /* border-image-slice: 1;
  border-radius: 10px;  */

  background: linear-gradient(white, white) padding-box,
              linear-gradient(to right, #fee9be, #cca65b) border-box;
  border-radius: 20px;
  border: 4px solid transparent;
  overflow: hidden;
}

.gold-gradient-text {
    /* background: linear-gradient(180deg, #ff9c00 0, #ffd471 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; */
    color: #ffddab !important;
}

.text-hd-gold {
    /* background: linear-gradient(to top, #fd9e01, #fedc83);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; */
      color: #fad9a6 !important;
}
.bg-brown {
    background-color: #240909 !important;
    color: #fff !important;
}

.bg-main {
    /* background: linear-gradient(to bottom,#280a22,#4c0837,#4e0634,#36072b); */
    /* background: linear-gradient(90deg, rgba(33, 74, 40, 1) 0%, rgba(111, 177, 129, 1) 50%, rgba(39, 81, 35, 1) 100%); */
    background: #230948;
    
}

.border-bg {
    border-color: #593285;
}

.border-style {
    border-style: ridge;
    border-width: 20px;
    border-color: #0d6efd;
}

.border-style:hover {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.border-clr {
    border-width: 4px !important;
    border-color: #00ffec !important;
    border-style: dashed !important;
}

.border-clr:hover img,
.reward-card:hover img {
    -webkit-animation-name: tada;
    animation-name: tada;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-duration: var(--animate-duration);
    animation-duration: var(--animate-duration);
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.golden-btn {
    touch-action: manipulation;
    display: inline-block;
    outline: none;
    font-family: inherit;
    font-size: 1em;
    box-sizing: border-box;
    border: none;
    border-radius: 0.3em;
    height: 2.75em;
    line-height: 2.5em;
    text-transform: uppercase;
    padding: 0 3em;
    color: #fff;
    /* background-image: linear-gradient(160deg,
            #772ed5,
            #9c50f0,
            #b165fd,
            #6021a3); */
            background-image: url('../img/btn-purple.png');
            background-size: 100% 100%;
            color: #593285;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}
/* .golden-btn:focus,
.golden-btn:hover {
    background-size: 150% 150%;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23),
        inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    border: 1px solid rgba(165, 93, 7, 0.6);
    color: rgba(120, 50, 5, 0.8);
    text-decoration: none;
}

.golden-btn:active {
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4),
        inset 0 -2px 5px 1px #b17d10, inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
} */

/* END THEME CSS */


/* START COMMON CSS */

.p-6 {
    padding: 4rem;
}

.outline-0 {
    outline: 0;
}

select {
    cursor: pointer;
}

::placeholder {
    color: #ffffff !important;
    opacity: 1;
    /* Firefox */
}

::-ms-input-placeholder {
    /* Edge 12-18 */
    color: #ffffff !important;
}

.mt-n2 {
    margin-top: -20px;
}

.mt-n10 {
    margin-top: -10rem;
}

.mt-10 {
    margin-top: 10rem !important;
}

.vh-cal {
    height: calc(100vh - 20rem);
}

.mt-n20 {
    margin-top: -20rem;
}

.py-80 {
    padding: 80px 0px;
}

.w-f {
    width: fit-content;
}

.rotate {
    animation: animName 10s linear infinite;
}

.bg-blur {
    backdrop-filter: blur(10px);
}

@keyframes animName {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.title-color {
    text-shadow: 2px 2px 50px #000000 !important;
    --bs-text-opacity: 2;
    color: #aaa986;
}


/* END COMMON CSS */


/* START HEADER */

.outline-style {
    outline: auto !important;
    outline-style: outset !important;
    outline-color: #673AB7 !important;
    outline-width: 12px !important;

}

/* .nav-pills .nav-link {
    border-radius: unset !important;
} */
.nav-pills .nav-link {
    display: inline-block;
    border-radius: 0px !important;
    line-height: 2.5em;
    text-transform: uppercase;
    padding: 0 1em;
    border: 1px solid transparent;
    color: #fff;
    background-color: transparent !important;
}

.nav-pills .nav-link.active {

    /* box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(110, 80, 20, 0.4), inset 0 -2px 5px 1px rgba(139, 66, 8, 1), inset 0 -1px 1px 3px rgba(250, 227, 133, 1);
    background-image: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07);
    border-color: #a55d07;
    color: rgb(120, 50, 5) !important;
    text-shadow: 0 2px 2px rgba(250, 227, 133, 1);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    background-size: 100% 100%;
    background-position: center; */
    background: url('../img/btn-purple.png')no-repeat center;
    background-size: 100% 100%;
    color: #230948 !important;
}

/* END HEADER */

/* START DASHBOARD */

.bg-img {
    background-image: url("../../assets/img/winzo_bg.png");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
}

.frame-img {
    margin-left: 3.3rem !important;
    margin-top: 4.2rem !important;
}

.table-black {
    --bs-table-color: #fff !important;
    --bs-table-bg: #1235674a !important;
    --bs-table-border-color: #b1b1b1 !important;
    --bs-table-striped-bg: #000000 !important;
    --bs-table-striped-color: #fff !important;
    --bs-table-active-bg: #000000 !important;
    --bs-table-active-color: #fff !important;
    --bs-table-hover-bg: #000000 !important;
    --bs-table-hover-color: #fff !important;
    color: var(--bs-table-color) !important;
    border-color: var(--bs-table-border-color) !important;
}

/* spinner */
.wheel-spin-box .chartholder .slice path {
    fill: #7c40be !important;
}

.wheel-spin-box .chartholder .slice:nth-child(2n+1) path {
    fill: #3e2f4c  !important;
}

.wheel-spin-box .chartholder .slice:nth-child(2n+1) text {
    fill: #ffddab  !important;
}

#spinwheel #spin-in {
    /* border-image: linear-gradient(to right, #e09339 0%, #dc9e75 100%);
    box-shadow: 0 0 0 15px #efa000, 0 0 0 15px #f6bc60;
    border-radius: 50%; */
    padding: 16px;
    border-radius: 100%;
    /* background: linear-gradient(160deg, #a54e07, #b47e11, #fef1a2, #bc881b, #a54e07); */
     background: linear-gradient(160deg,
            #772ed5,
            #9c50f0,
            #b165fd,
            #6021a3);
}

#spinwheel #dotted-gif {
    position: absolute;
    left: -7%;
    top: -6%;
}

.wheel-spin-box {
    position: relative;
    display: inline-block;
}

#spinwheel {
    position: relative;
    width: 360px;
    margin: auto;
}

.wheeldotsround {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wheeldotsround {
    position: absolute;
    width: 100%;
    height: 100%;
}

.wheeldotsround .wheeldots {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffffff;
    position: absolute;
    z-index: 1;
}

.wheeldotsround .wheeldots:nth-child(2n+1) {
    background: #ff0000;
    left: 174px;
}

.wheeldotsround .wheeldots.active-dots {
    background: #ff8400;
}

.wheeldotsround .wheeldots.active-dots:nth-child(2n+1) {
    background: #2660a4;
}

.wheeldotsround .wheeldots:nth-child(1) {
    left: calc(50% - 4px);
    top: 3px;
}

.wheeldotsround .wheeldots:nth-child(2) {
    right: 25%;
    top: 7%;
}

.wheeldotsround .wheeldots:nth-child(3) {
    right: 7%;
    top: 25%;
    left: 324px;
}

.wheeldotsround .wheeldots:nth-child(4) {
    right: 3px;
    top: 50%;
}

.wheeldotsround .wheeldots:nth-child(5) {
    right: 8.2%;
    bottom: 23%;
    left: 89%;
}

.wheeldotsround .wheeldots:nth-child(6) {
    right: 25%;
    bottom: 7%;
}

.wheeldotsround .wheeldots:nth-child(7) {
    left: calc(50% - 4px);
    bottom: 3px;
}

.wheeldotsround .wheeldots:nth-child(8) {
    left: 25%;
    bottom: 7%;
}

h-600 .wheeldotsround .wheeldots:nth-child(9) {
    left: 8.2%;
    bottom: 23%;
}

.wheeldotsround .wheeldots:nth-child(10) {
    left: 3px;
    top: 50%;
}

.wheeldotsround .wheeldots:nth-child(11) {
    left: 7%;
    top: 25%;
}

.wheeldotsround .wheeldots:nth-child(12) {
    left: 25%;
    top: 7%;
}

#spinwheel {
    position: relative;
    width: 360px;
    margin: auto;
}

/* 
#spinwheel svg {
    width: 100%;
    height: 100%;
    border: 15px solid #CE3816;
    border-radius: 50%;
    background: #CE3816;
} */

.chartholder .wheel-spin-box .chartholder .slice path {
    text-shadow: 2px 2px 50px #000000 !important;
    --bs-text-opacity: 2;
    color: #aaa986;

    fill: #441ced;
}

.wheel-spin-box .chartholder .slice:nth-child(2n+1) path {
    fill: #F9AA00;
}

.wheel-spin-arrow {
    position: relative;
    margin-top: -35px;
    text-align: center;
    z-index: 1;
}

.wheel-spin-arrow svg {
    max-width: 65px;
}

.spin-click-button {
    background-color: #000;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    border: none;
    padding: 14px 35px;
    border-radius: 15px;
}

.images_container {
    /* min-height: calc(100vh - 90px); */
}

.div_winzo-banner {
    height: calc(100vh - (90px + 144px));

    & img {
        object-fit: contain;
        margin: auto;
    }
}

.text_style {
    position: relative;
    width: 50%;
    z-index: 1;
}

.game_gifs {
    margin-top: -13rem;
}

.btn_play-now {
    position: relative;
    /* margin-top: -8rem; */
    margin-top: 1rem;

    &:hover {
        text-shadow: 1px 4px 5px #b7b7b7;
    }
}

a.btn_play-now::before {
    content: '';
    height: 100%;
    width: 2px;
    display: inline-block;
    box-shadow: 0 0 30px 7px #f7f7f7;
    background: #ffffff61;
    position: absolute;
    top: 0;
    transform: skewX(-34deg);
    animation: shine 3s infinite;
}

@keyframes shine {
    0% {
        left: 28px;
    }

    100% {
        left: 332px;
    }
}

/* spinner */

/* END DASHBOARD */


/* START SLOT */

.h-600 {
    height: 500px;
}

.slot_bg {
    background: rgb(21, 3, 65);
    background: linear-gradient(90deg, rgb(20 3 62) 0%, rgb(14 2 41) 25%, rgb(13 2 23) 50%, rgb(14 2 41) 75%, rgba(21, 3, 65, 1) 100%);
}

.slot_shadow {
    box-shadow: 0px -12px 20px 1px #f9f3b4;
}

.bg_control {
    background: rgb(171, 87, 0);
    background: linear-gradient(360deg, rgba(171, 87, 0, 1) 0%, rgba(255, 245, 132, 1) 50%, rgba(255, 255, 132, 1) 100%);
}

.spin_bg {
    background: rgb(171, 87, 0);
    background: linear-gradient(360deg, rgba(171, 87, 0, 1) 16%, rgba(255, 245, 132, 1) 49%, rgba(255, 255, 132, 1) 100%);
}

.bg-score {
    background: rgb(95, 32, 140);
    background: linear-gradient(163deg, rgb(162 31 255) 0%, rgba(60, 0, 115, 1) 50%, rgb(117 36 247) 100%);
    color: #dcbdff;
}

.score-shadow {
    box-shadow: 1px 1px 3px #00000096;
}

.btn-spin:active {
    width: 186px !important;
    height: 172px !important;
    color: #fff;
    padding: 15px 25px;
    background-color: #a8ff00;
    background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset 6px 6px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 1px 4px 1px rgba(255, 255, 255, 0.6), inset 6px 14px 36px rgba(0, 0, 0, 0.3), inset 0px -4px 5px rgba(255, 255, 255, 0.6), 1px 10px 31px rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    font-weight: bold;
    border: 5px solid #302e13;
}

.btn-spin {
    color: #fff;
    padding: 15px 25px;
    background-color: #a8ff00;
    background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
    border-radius: 14px;
    font-weight: bold;
    border: 5px solid #302e13;
    width: 186px !important;
    height: 172px !important;
}

.bg-slot {
    background:
        linear-gradient(to bottom, rgb(209 207 77), rgb(252, 246, 186), rgb(117 13 255), rgb(251, 245, 183), rgb(193 88 241));
}

.bg-btn {
    background: rgb(95, 32, 140);
    background: linear-gradient(163deg, rgb(162 31 255) 0%, rgb(113 0 216) 50%, rgb(117 36 247) 100%);
    color: #dcbdff;
}

.bg-btn:active {
    background: rgb(95, 32, 140);
    background: linear-gradient(360deg, rgba(95, 32, 140, 1) 0%, rgba(60, 0, 115, 1) 50%, rgba(35, 6, 82, 1) 100%);
    color: #dcbdff;
    margin-top: -110px;
}

.btn-minus,
.btn-plus {
    position: absolute;
    top: 10px;
    width: 30px;
    height: 30px;
    border: none;
    text-align: center;
}

.btn-minus {
    left: 10px;
    background-color: #ff0000;
    background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
}

.btn-plus {
    background-color: lawngreen;
    background-image: radial-gradient(93% 87% at 87% 89%, rgba(0, 0, 0, 0.23) 0%, transparent 86.18%), radial-gradient(66% 66% at 26% 20%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0) 69.79%, rgba(255, 255, 255, 0) 100%);
    box-shadow: inset -3px -3px 9px rgba(255, 255, 255, 0.25), inset 0px 3px 9px rgba(255, 255, 255, 0.3), inset 0px 1px 1px rgba(255, 255, 255, 0.6), inset 0px -8px 36px rgba(0, 0, 0, 0.3), inset 0px 1px 5px rgba(255, 255, 255, 0.6), 2px 19px 31px rgba(0, 0, 0, 0.2);
    right: 10px;
}

#quantity::-webkit-inner-spin-button,
#quantity::-webkit-outer-spin-button {
    -webkit-appearance: none;
    /* Clear default arrow */
}

/* END SLOT */

/* START BLACKJACK */

.mt-n4 {
    margin-top: -4rem !important;
}

.bg-table {
    background-color: #015700;
    box-shadow: inset 0px 0px 5px 1px #000;
    border: 20px outset #be6323 !important;
    height: 80%;
}

.bj-card {
    width: 48px;
    margin-top: -228px;
    margin-left: 27px;
}

.rotate-6 {
    transform: rotate(6deg);
}

.mt-n6 {
    margin-top: -6rem;
}

.mt-n3 {
    margin-top: -3rem;
}

.translate-3d {
    transform: translate3d(18rem, -32rem, 0rem);
}

.translate-3d-1 {
    transform: translate3d(-3px, -386px, 10px);
}

.translate-3d-2 {
    transform: translate3d(-0px, -273px, 10px);
}

.translate-3d-3 {
    transform: translate3d(-222px, -303px, 10px);
}

.translate-3d-4 {
    transform: translate3d(-539px, -283px, 10px);
}

.translate-3d-a {
    transform: translate3d(-0px, -59px, 10px);
}

.translate-11deg {
    transform: rotate(-11deg);
}

.translate-3d-n {
    transform: translate3d(0rem, 0rem, 0rem);
    transition: transform 2s, all 2s;
}

.translate-45deg {
    transform: rotate(39deg);
    transition: transform 1s;
}


.flip-animate {
    visibility: hidden;
    transition: hidden 3s;
}

.front-card {
    visibility: hidden;
}

.pawn {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    border-radius: 50px;
    z-index: 99;

    &.highlight {
        box-shadow: 0px 0px 10px 2px rgb(255, 213, 0);
        border: 4px dashed rgb(0, 0, 0);
        animation: highlightPawn .5s infinite alternate-reverse;
        cursor: pointer;
    }
}


@keyframes highlightPawn {
    to {
        transform: scale(1.2);
    }
}

@keyframes highlightDice {
    to {
        transform: scale(1.2);
        box-shadow: 0px 0px 30px 6px rgb(255, 213, 0);
    }
}

.form-control,
.form-select {
    padding: 14px 30px !important;
    box-shadow: inset 0 0 10px 0 #555;
}

.form-select {
    box-shadow: unset;
}

/* END BLACKJACK */
.main-game {
    height: calc(100% - 98px);
    padding: 100px 0;
}

.main-banner {
    padding: 80px 0;
}

.reward-card {
    background-color: #831165 !important;
    background-image: radial-gradient(circle at top, #7a3aac 20%,#6b2fa1 60%, #b86df0 100%);
    position: relative;
}

.cdk-global-overlay-wrapper {
    justify-content: center;
}

.cdk-overlay-pane {
    max-width: 650px !important;
    margin: 0 auto !important;
}

.mdc-dialog__surface {
    overflow: hidden;
}

.mdc-dialog__container,
.mat-mdc-dialog-container {
    max-width: 100% !important;
}

.form-select {
    background-image: url(../../assets/img/chevron.png);
    ;
}

select option {
    word-wrap: break-word;
    white-space: pre-wrap;
}

.card-1 .input-group .form-control,
.card-2 .input-group .form-control {
    padding: 10px 15px !important;
}