body, html {
    max-width: 1535px;
    margin: 0 auto;
    direction: rtl !important;
    text-align: right !important;
    scroll-behavior: smooth;
    background-color: transparent;
}

* {
    transition: all 0.5s ease !important;

}

body {
    font-family: YekanBakhExtraBlack;
    overflow-x: hidden;
    margin: 0 auto;
}

.bg {
    /*background-image: linear-gradient(to right, #700608, #A50C11 , #A50C11 10%, #ab8c00);*/
    background-color: #bb0f14;

}

.bgM {
    /*background-image: linear-gradient(to bottom, #700608, #A50C11, #A50C11 10%, #ab8c00   );*/
    background-color: #bb0f14;

}

.bg2 {
    background-image: linear-gradient(to top, #008163, #008163 10%, #0c5a77, darkolivegreen);

}

.bg2M {
    background-image: linear-gradient(to bottom, #008163, #008163 10%, #0c5a77);

}

.snappEx {
    background: linear-gradient(180deg, #FF9600 50%, #D70 100%);
    box-shadow: 0px 10px 30px 0px rgba(0, 24, 111, 0.3);
}

a {
    color: rgba(var(--bs-link-color-rgb), var(--bs-link-opacity, 1));
    text-decoration: underline;
}

.digikala {
    background: linear-gradient(180deg, #EE384E 50.5%, #C63042 100%);
    box-shadow: 0px 10px 30px 0px rgba(0, 24, 111, 0.3);
}

.recipe {
    background: linear-gradient(180deg, #00a208 50.5%, #007011 100%);
    box-shadow: 0px 10px 30px 0px rgba(0, 24, 111, 0.3);
}

.play-btn {
    background: linear-gradient(180deg, #00b7a5 50.5%, #006055 100%);
    box-shadow: 0px 10px 30px 0px rgba(0, 24, 111, 0.3);
}

.button {
    width: 100%;
    height: auto;
    justify-content: center;
    margin: 0 10px;
}


::-webkit-scrollbar {
    width: 5px;
    cursor: pointer !important;
    background-color: gray !important;
}


/* Track */
::-webkit-scrollbar-track {
    /*box-shadow: inset 0 0 5px grery;*/
    /*border-radius: 10px;*/
    cursor: pointer !important;
}

/* Handle */
::-webkit-scrollbar-thumb {
    background: dimgray;
    border-radius: 5px;
    cursor: pointer !important;

}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
    background: darkgray;
    cursor: pointer !important;

}

@media (max-width: 700px) {
    ::-webkit-scrollbar {
        width: 0 !important;
        background: transparent !important;
    }

    /* Handle */
    ::-webkit-scrollbar-thumb {
        background: transparent !important;
    }

    /* Handle on hover */
    ::-webkit-scrollbar-thumb:hover {
        background: transparent !important;
    }
}


.chance, .wheel {
    animation: grow 2s infinite linear;
    animation-iteration-count: infinite;

}

@keyframes grow {
    0% {
        transform: scale(1);
    }
    33% {
        transform: scale(1.02);
    }
    66% {
        transform: scale(0.8);
    }
    100% {
        transform: scale(1.002);
    }
}

.wheel {
    animation: rotate 2s infinite linear;
    animation-iteration-count: infinite;
}

@keyframes rotate {
    0% {
        transform: rotate(0deg);
    }
    /*20% {*/
    /*   transform: rotate(80deg);*/
    /* }*/
    /*40% {*/
    /*   transform: rotate(180deg);*/
    /* }*/
    /*60% {*/
    /*   transform: rotate(300deg);*/
    /* }*/
    100% {
        transform: rotate(360deg);
    }
}

.ww {
    transform: rotate(15deg);
}

.play {
    animation: play 5s infinite linear;
    animation-iteration-count: 1;
}

@keyframes play {
    0% {
        transform: rotate(15deg);
    }
    10% {
        transform: rotate(20deg);
    }
    20% {
        transform: rotate(30deg);
    }
    30% {
        transform: rotate(50deg);
    }
    40% {
        transform: rotate(180deg);
    }
    50% {
        transform: rotate(270deg);
    }
    80% {
        transform: rotate(360deg);
    }
    100% {
        transform: rotate(375deg);
    }
}

.result {
    transform: scale(0, 0);
}

.errorMessage {
    color: indianred !important;
}

.cursor-pointer {
    cursor: pointer;
}

.en {
    direction: ltr;
    text-align: left;
}

.disabled-wheel {
    /*filter: grayscale(0.9);*/
}

.text-justify {
    text-align: justify;
}

#resend {
    cursor: pointer;
    color: darkcyan;
}

.disabledResend {
    color: gray !important;
    cursor: text !important;
}

.mtitle {
    font-size: 50px;
    text-align: justify;
}
.txtt{
    width: 400px;
}
@media (max-width: 1385px) {

    .mtitle {
        font-size: 40px;
    }

    .txtt{
        width: 350px;
    }
}
@media (max-width: 1200px) {

    .mtitle {
        font-size: 35px;
    }

    .txtt{
        width: 300px;
    }
}