body.swal2-shown>[aria-hidden="true"] {
    -webkit-filter: blur(0) !important;
    filter: blur(0) !important;
}

.block {
    position: fixed;
    inset: 0;
    background: black;
    opacity: 0.5;
    z-index: 5000;
}

.wrapper {
    background-image: url(https://maharatjoo.net/wheel-luck-page-background.png);
    background-position: center;
    background-size: cover;
    background-color: #4d4d4d;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 8rem 0 3rem 0;
}

.canvas {
    /*height: 418px;*/
    /*width: 319px;*/
    background-image: url("https://maharatjoo.net/wheel_back.png");
    background-position: center;
    background-repeat: no-repeat;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.bakht-eghbal {
    max-width: 300px;
}

.special-btn {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none;
    font-weight: bold;
    line-height: 1;
    grid-column: 1;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    padding: 0.725em 1.25em 0.8em;
    -webkit-box-shadow: 0 0.05em 0.5em rgba(97, 56, 216, 0.25), 0 0.15em 0.3em -0.1em rgba(156, 28, 218, 0.25), inset 0 0 0.05em 0.0333em rgba(177, 67, 231, 0.25), inset 0 0.1em 0.2em 0em rgba(177, 67, 231, 0.25), inset 0 0.1em 0.45em rgba(97, 56, 216, 0.25);
    box-shadow: 0 0.05em 0.5em rgba(97, 56, 216, 0.25), 0 0.15em 0.3em -0.1em rgba(156, 28, 218, 0.25), inset 0 0 0.05em 0.0333em rgba(177, 67, 231, 0.25), inset 0 0.1em 0.2em 0em rgba(177, 67, 231, 0.25), inset 0 0.1em 0.45em rgba(97, 56, 216, 0.25);
    background: -o-linear-gradient(130deg, #6138D8 25%, rgba(177, 67, 231, 0.9) 40%, rgba(177, 67, 231, 0.95) 65%, #6138D8 85%) no-repeat -1px 50%/300% calc(100% + 2px);
    background: -o-linear-gradient(320deg, #6138D8 25%, rgba(177, 67, 231, 0.9) 40%, rgba(177, 67, 231, 0.95) 65%, #6138D8 85%) no-repeat -1px 50%/300% calc(100% + 2px);
    background: linear-gradient(130deg, #6138D8 25%, rgba(177, 67, 231, 0.9) 40%, rgba(177, 67, 231, 0.95) 65%, #6138D8 85%) no-repeat -1px 50%/300% calc(100% + 2px);
    color: white;
    -webkit-transition: color 0.3s, background 0.3s, background-position 0.5s, -webkit-transform 0.75s, -webkit-box-shadow 0.5s;
    transition: color 0.3s, background 0.3s, background-position 0.5s, -webkit-transform 0.75s, -webkit-box-shadow 0.5s;
    -o-transition: color 0.3s, background 0.3s, transform 0.75s, background-position 0.5s, box-shadow 0.5s;
    transition: color 0.3s, background 0.3s, transform 0.75s, background-position 0.5s, box-shadow 0.5s;
    transition: color 0.3s, background 0.3s, transform 0.75s, background-position 0.5s, box-shadow 0.5s, -webkit-transform 0.75s, -webkit-box-shadow 0.5s;
    will-change: background-position, transform, box-shadow;
    position: relative;
    border-radius: 1em;
    border: 0.25rem solid #6138D8;
    cursor: pointer;
}

.special-btn.green {
    background: -o-linear-gradient(320deg, #0fb583 25%, #0d805d 40%, #0d805d 65%, #0fb583 85%) no-repeat -1px 50%/300% calc(100% + 2px);
    background: linear-gradient(130deg, #0fb583 25%, #0d805d 40%, #0d805d 65%, #0fb583 85%) no-repeat -1px 50%/300% calc(100% + 2px);
    border: 0.25rem solid #0fb583;
}

.special-btn.disabled {
    pointer-events: none;
    opacity: .65;
}

.special-btn:before,
.special-btn:after {
    content: "";
    border-radius: inherit;
    position: absolute;
    -webkit-transition: opacity 0.5s, -webkit-filter 0.5s;
    transition: opacity 0.5s, -webkit-filter 0.5s;
    -o-transition: opacity 0.5s, filter 0.5s;
    transition: opacity 0.5s, filter 0.5s;
    transition: opacity 0.5s, filter 0.5s, -webkit-filter 0.5s;
}

.special-btn:before {
    inset: calc(0.25rem * -1);
    -webkit-box-shadow: inset 0.0333em 0.0333em 0.2em #ca78e5, inset -0.0666em -0.0666em 0.15em #311879, inset 0.025em 0.025em 0.1em white;
    box-shadow: inset 0.0333em 0.0333em 0.2em #ca78e5, inset -0.0666em -0.0666em 0.15em #311879, inset 0.025em 0.025em 0.1em white;
    mix-blend-mode: hard-light;
}

.special-btn:after {
    inset: 0;
    border-radius: calc(1em - 0.25rem);
    -webkit-box-shadow: -0.05em -0.05em 0.05em #311879, 0.05em 0.05em 0.05em #ca78e5;
    box-shadow: -0.05em -0.05em 0.05em #311879, 0.05em 0.05em 0.05em #ca78e5;
    mix-blend-mode: hard-light;
}

.special-btn:after {
    content: none;
}

.special-btn:hover,
.special-btn:focus {
    background-position: calc(100% + 1px) 50%;
    -webkit-box-shadow: 0 0.15em 1.5em rgba(136, 67, 231, 0.666), 0 0.15em 0.333em -0.1em rgba(156, 28, 218, 0.666), inset 0 0.15em 0.3em -0.1em rgba(177, 67, 231, 0), inset 0 0 0.05em 0.0333em rgba(177, 67, 231, 0.25), inset 0 0.1em 0.666em rgba(97, 56, 216, 0.333);
    box-shadow: 0 0.15em 1.5em rgba(136, 67, 231, 0.666), 0 0.15em 0.333em -0.1em rgba(156, 28, 218, 0.666), inset 0 0.15em 0.3em -0.1em rgba(177, 67, 231, 0), inset 0 0 0.05em 0.0333em rgba(177, 67, 231, 0.25), inset 0 0.1em 0.666em rgba(97, 56, 216, 0.333);
}

.copy {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: stretch;
    -ms-flex-align: stretch;
    align-items: stretch;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
}

.copy .code {
    border: 2px solid var(--bc);
    border-top-right-radius: var(--border-radius);
    border-bottom-right-radius: var(--border-radius);
    text-align: center;
    font-weight: bold;
    border-left: 0;
    animation: bc 1s infinite;
}

@keyframes bc {
    50% { border-color: var(--main-color); }
}

.copy .code:focus-visible {
    outline: none;
}

.courses {
    margin-top: 3rem;
    width: 95%;
    max-width: 600px;
    padding: 0;
}

.courses .sbc-title {
    padding: 1rem;
    border-top-left-radius: var(--border-radius);
    border-top-right-radius: var(--border-radius);
    box-shadow: var(--box-shadow-hover);
    z-index: 120;
    position: sticky;
    top: 6rem;
    background: white;
}

/* .courses .items {
    max-height: 400px;
    overflow: auto;
} */

.courses .item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--bc);
}

.courses .item:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
}

.courses .item .price {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.courses .item .price i {
    margin: 0 5px;
}

.courses .item .price .h6 {
    color: var(--main-color);
}

.courses .item .btn {
    -ms-flex-negative: 0;
    flex-shrink: 0;
}

.courses .total {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    /* border-top: 2px solid var(--bc); */
    padding: 1rem;
}

.courses .accordion-button::after {
    margin-right: auto;
}

#timer {
    background-color: #ffffffb5;
    text-align: center;
    position: fixed;
    top: 0;
    width: 100%;
    -webkit-box-shadow: var(--box-shadow);
    box-shadow: var(--box-shadow);
    z-index: 6000;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}

#timer .container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: space-evenly;
    -ms-flex-pack: space-evenly;
    justify-content: space-evenly;
}

#timer .time {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    gap: 5px;
}

#timer .time .item {
    background: var(--main-color);
    width: 40px;
    border-radius: var(--border-radius);
    color: white;
}

#timer .time .item .adad {
    font-weight: 800;
    font-size: 1.5rem;
    margin-bottom: -0.7rem;
}

.fix-alert {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 1rem;
    background: white;
    z-index: 100;
}
.fix-alert .alert {
    margin: 0;
}
.fix-alert i {
    position: absolute;
    top: -10px;
    right: 10px;
    background: #ffc0c0;
    color: red;
    width: 20px;
    height: 20px;
    border-radius: 20rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.code-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
}
.code-wrap .h6 {
    margin-bottom: 0;
    margin-left: 1rem;
    font-weight: 800;
    color: var(--main-color);
}

@media (min-width: 992px) {
    #timer .time .item {
        width: 55px;
    }
}