/*default version*/
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap");

::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background: #d2b996;
    /* border-radius: 10px; */
}

::-webkit-scrollbar-thumb {
    /* border-radius: 10px; */
    background: #f4b356;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Global & common styles */

.primary-button {
    font-family: "Poppins", Sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    font-style: normal;
    text-decoration: none;
    line-height: 1em;
    letter-spacing: 0px;
    background-color: #b70ea6;
    padding: 20px;
    border-radius: 5px;
    width: 100%;
    color: white;
    display: block;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    cursor: pointer;
}

.is_flipping .wrapper-glow-button:not(.flip-button) {
    opacity: .1 !important;
}

.wrapper-glow-button {
    min-width: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    overflow: hidden;
    transition: all 0.1s ease-in;
    -webkit-transition: all 0.1s ease-in;
}

.glow-button {
    position: relative;
    width: 100%;
    margin: 10px;
    background-color: transparent;
    border: 1px solid rgba(255,255,255,.05);
    border-radius: 5px;
    transition: all 0.1s ease-in;
    -webkit-transition: all 0.1s ease-in;
}

.glow-button h1 {
    font-size: 1.6em;
    margin: 0;
    position: relative;
    z-index: 3;
    padding: 20px;
    font-weight: 800;
    text-align: center;
    cursor: pointer;
    background-color: #060c1f;
    color: #fff;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all 0.1s ease-in;
    -webkit-transition: all 0.1s ease-in;
}

.glow-button[disabled] {
    opacity: .5;
    box-shadow: rgba(247, 173, 7, .3) 0px 7px 29px 0px;
    cursor: not-allowed;
}

.glow-button.selected h1 {
    background-color: #3caa32;
}

.glow-button.selected::before, .glow-button.selected::after {
    -webkit-box-shadow: 0 0 3px 1px #9af090, 0 0 4px 2px #9af090 !important;
    box-shadow: 0 0 3px 1px #9af090, 0 0 4px 2px #9af090 !important;
}

.glow-button:not([disabled])::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 13px 3px #b70ea6, 0 0 4px 2px #b70ea6;
    box-shadow: 0 0 13px 3px #b70ea6, 0 0 4px 2px #b70ea6;
    z-index: 1;
    -webkit-animation-name: glow-shadow1;
    animation-name: glow-shadow1;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all 0.1s ease-in;
    -webkit-transition: all 0.1s ease-in;
}

.glow-button:not([disabled])::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 50%;
    height: 50%;
    -webkit-box-shadow: 0 0 13px 3px #d94ccb, 0 0 4px 2px #d94ccb;
    box-shadow: 0 0 13px 3px #d94ccb, 0 0 4px 2px #d94ccb;
    z-index: 1;
    -webkit-animation-name: glow-shadow2;
    animation-name: glow-shadow2;
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    transition: all 0.1s ease-in;
    -webkit-transition: all 0.1s ease-in;
}

.glow-button:not(.selected):hover::after, .glow-button:not(.selected):hover::before {
    -webkit-box-shadow: 0 0 7px 3px #ea4127, 0 0 4px 2px #ea4127 !important;
    box-shadow: 0 0 7px 3px #ea4127, 0 0 4px 2px #ea4127 !important;
}

/* Global animations */

.spin-tails {
    animation: spin-tails 5s forwards ease-out;
}

.spin-tails-infinite {
    animation: spin-tails 5s infinite linear;
}

.spin-heads {
    animation: spin-heads 5s forwards ease-out;
}

.spin-heads-infinite {
    animation: spin-heads 5s infinite linear;
}

@keyframes spin-tails {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(1980deg);
    }
}
@keyframes spin-heads {
    0% {
        transform: rotateX(0);
    }
    100% {
        transform: rotateX(2160deg);
    }
}

@-webkit-keyframes glow-shadow1 {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 50%;
        left: 0;
    }
    50% {
        top: 50%;
        left: 50%;
    }
    75% {
        top: 0;
        left: 50%;
    }
    100% {
        top: 0;
        left: 0;
    }
}

@keyframes glow-shadow1 {
    0% {
        top: 0;
        left: 0;
    }
    25% {
        top: 50%;
        left: 0;
    }
    50% {
        top: 50%;
        left: 50%;
    }
    75% {
        top: 0;
        left: 50%;
    }
    100% {
        top: 0;
        left: 0;
    }
}

@-webkit-keyframes glow-shadow2 {
    0% {
        right: 0;
        bottom: 0;
    }
    25% {
        right: 0;
        bottom: 50%;
    }
    50% {
        right: 50%;
        bottom: 50%;
    }
    75% {
        right: 50%;
        bottom: 0;
    }
    100% {
        right: 0;
        bottom: 0;
    }
}

@keyframes glow-shadow2 {
    0% {
        right: 0;
        bottom: 0;
    }
    25% {
        right: 0;
        bottom: 50%;
    }
    50% {
        right: 50%;
        bottom: 50%;
    }
    75% {
        right: 50%;
        bottom: 0;
    }
    100% {
        right: 0;
        bottom: 0;
    }
}

/* Modal */

.rodal {
    z-index: 999998 !important;
}

.modal_container {
    background: rgba(0,0,0,0.8);
}

.modal_container .rodal-dialog {
    max-width: 90% !important;
    background: #222;
    border-radius: 20px;
    box-shadow: rgba(150, 150, 150, 0.2) 0px 12px 28px 0px, rgba(150, 150, 150, 0.1) 0px 2px 4px 0px, rgba(150, 150, 150, 0.05) 0px 0px 0px 1px inset;
}

canvas {
    max-width: 100% !important;
    z-index: 999999 !important;
}

/* Toastify */

.Toastify__toast--error {
    background: #222 !important;
    color: white !important;
    font-size: 0.8em !important;
    box-shadow: rgba(220, 38, 38, .5) 0px 13px 27px -5px, rgb(0 0 0) 0px 8px 16px -8px !important;
}

.Toastify__toast--error svg, .Toastify__toast--error svg path {
    fill: rgba(255,255,255, .8) !important;
}

.Toastify__toast--error .Toastify__progress-bar {
    background: rgb(215, 26, 51) !important;
}

.Toastify__toast--success {
    background: #222 !important;
    color: white !important;
    font-size: 0.8em !important;
    box-shadow: rgb(58, 194, 13, .5) 0px 13px 27px -5px, rgb(0 0 0) 0px 8px 16px -8px !important;
}

.Toastify__toast--success svg, .Toastify__toast--success svg path {
    fill: rgba(255,255,255, .8) !important;
}

.Toastify__toast--success .Toastify__progress-bar {
    background: rgb(58, 194, 13) !important;
}