:root {
    --primary: #ee3b59;
    --swiper-pagination-color: var(--primary);
    --swiper-pagination-bottom: 10px;
    --swiper-pagination-bullet-size: 10px;
    --swiper-pagination-bullet-width: 10px;
    --swiper-pagination-bullet-height: 10px;
    --swiper-pagination-bullet-inactive-color: #000;
    --swiper-pagination-bullet-inactive-opacity: 0.3;
    --swiper-pagination-bullet-opacity: 1;
    --swiper-pagination-bullet-horizontal-gap: 7px;
    --bs-gray-100: #f9f9f9;
    --bs-gray-700: #5e6278;
    --bs-gray-800: #3f4254;
    --wheel-size: min(90vmin, 460px);
    --hub-size: calc(var(--wheel-size) * 0.26);
    --pointer-size: calc(var(--wheel-size) * 0.085);
    --rim: #ffffff;
    --text: #fff
}

.lightMode {
    --background: #ffffff;
    --box: #f5f5f5;
    --lighter-box: #f5f5f5;
    --mid-box: #fafafa;
    --text-color: #000;
    --light-text-color: #000;
    --light-text-color-2: rgba(0, 0, 0, 0.50);
    --border: #00000020;
    --wheel-con-shadow: #00000020;
    --wheel-shadow: 0 12px 24px rgba(0, 0, 0, .18), 0 2px 6px rgba(0, 0, 0, .10);
    --progress-bg-color: rgb(233, 236, 239);
    --shadow: #00000015;
    --lighter-box-2: #ffffff80
}

.darkMode {
    --background: #1f1f1f;
    --box: #0d0d0d;
    --lighter-box: #1c1c1c;
    --mid-box: #1a1a1a;
    --text-color: #ababab;
    --light-text-color: #fff;
    --light-text-color-2: rgba(255, 255, 255, 0.75);
    --border: #ffffff20;
    --shadow: #ffffff15;
    --wheel-con-shadow: #ffffff20;
    --wheel-shadow: 0 12px 24px rgba(255, 255, 255, .18), 0 2px 6px rgba(255, 255, 255, .10);
    --progress-bg-color: #ffffff20;
    --lighter-box-2: #00000080
}

.darkMode .select2-container--default .select2-selection--single {
    background-color: var(--lighter-box) !important;
    border: 1px solid rgba(0, 0, 0, .1882352941) !important
}

.darkMode .select2-dropdown {
    background-color: var(--lighter-box) !important;
    border: 1px solid rgba(0, 0, 0, .1882352941) !important
}

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box
}

p {
    padding: 0;
    margin: 0
}

a {
    text-decoration: none
}

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

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


html,
body {
    width: 100%;
    font-family: "Tajawal", sans-serif;
    /* font-family: "LamaSans-Regular", "Tajawal", sans-serif; */
    overflow-x: clip
}

body {
    background-color: var(--background);
    color: var(--text-color);
    /* font-family: "LamaSans-Regular", "Tajawal", sans-serif !important; */
}

h1, h2, h3, h4, h5, h6 {
    /* font-family: "LamaRounded-Bold", "Tajawal", sans-serif !important; */
}


body *:not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(i),
input, textarea, select, button, 
span, div, a, li, td, th, label {
    /* font-family: "LamaSans-Regular", sans-serif !important; */
}

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

::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 5px
}

::-webkit-scrollbar-track {
    background-color: var(--background);
    border-radius: 5px
}

.mainLoader {
    width: 35px;
    height: 35px;
    border: 10px solid rgba(0, 0, 0, 0);
    border-radius: 50%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box
}

.mainLoader img {
    animation: pulse 2s linear infinite;
    width: 20px;
    height: 10px
}

.mainLoader::before {
    content: "";
    position: absolute;
    box-sizing: border-box;
    inset: -10px;
    border-radius: 50%;
    border: 5px solid var(--primary);
    animation: prixClipFix 2s infinite linear;
    transform: rotate(180deg)
}

.main-header .header-con {
    padding: 0 .5em
}

.main-header .header-dropdown-button {
    color: var(--light-text-color);
    position: relative
}

.main-header .header-dropdown-button::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: calc(100% + 1.5em);
    height: calc(100% + 1em);
    background-color: var(--box);
    border-radius: 50px;
    z-index: -1;
    transition: .25s;
    opacity: 0
}

.main-header .header-dropdown-button .open-icon {
    background-color: unset;
    width: 20px;
    height: 20px;
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    transition: .3s
}

.main-header .header-dropdown-button .open-icon svg path {
    fill: var(--light-text-color);
    transition: .3s
}

.main-header .header-dropdown-button:hover::after {
    opacity: 1
}

.main-header .header-dropdown-button:hover .open-icon:hover {
    background-color: var(--primary)
}

.main-header .header-dropdown-button:hover .open-icon:hover svg path {
    fill: #fff
}

.main-header .header-dropdown-button .per-header-main-category-image {
    width: 1em;
    height: 1em;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    display: inline-block
}

.main-header .header-dropdown-button .per-header-main-category-name {
    font-size: 1em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    display: contents
}

.main-header .header-dropdown-button .header-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background-color: var(--background);
    padding: 1em;
    padding-top: 2em;
    border-radius: .9em;
    min-width: 450px;
    margin-top: 1.7em;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1em;
    z-index: 9;
    box-shadow: 0 0 20px 0 var(--shadow);
    transition: opacity .3s, transform .3s;
    transform: translateY(10px);
    opacity: 0;
    visibility: hidden
}

.main-header .header-dropdown-button .header-dropdown .dropdown-item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: .5em;
    flex: 1;
    min-width: 120px;
    white-space: wrap;
    background-color: unset;
    color: var(--text-color)
}

.main-header .header-dropdown-button .header-dropdown .dropdown-item img {
    width: 1em;
    height: 1em;
    margin-inline-end: .5em
}

.main-header .header-dropdown-button .header-dropdown .dropdown-item div {
    font-size: .9em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.1em;
    display: contents
}

.main-header .header-dropdown-button .header-dropdown.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

@media(min-width: 50px)and (max-width: 400px) {
    .main-header .header-con {
        padding: 0
    }

    .main-header .header-dropdown {
        min-width: unset
    }
}

nav:not(.air-datepicker-nav) {
    position: fixed;
    right: 0;
    top: 0;
    left: 0;
    z-index: 111;
    height: 100px;
    background-color: var(--background);
    display: flex;
    align-items: center;
    justify-content: space-between
}

nav:not(.air-datepicker-nav) #line {
    background-color: var(--primary);
    transition: .3s;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 99999;
    height: 5px
}

nav:not(.air-datepicker-nav) ::-webkit-scrollbar {
    width: 9px;
    min-height: 50px;
    background-color: rgba(0, 0, 0, 0)
}

nav:not(.air-datepicker-nav) ::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 5px;
    min-height: 50px
}

nav:not(.air-datepicker-nav) ::-webkit-scrollbar-track {
    background-color: rgba(0, 0, 0, 0);
    border-radius: 5px;
    min-height: 50px
}

nav:not(.air-datepicker-nav) img,
nav:not(.air-datepicker-nav) span {
    cursor: pointer
}

nav:not(.air-datepicker-nav) .logoAndsearch .logoContainer .mainImg {
    width: 123px
}

@media(min-width: 780px)and (max-width: 991px) {
    nav:not(.air-datepicker-nav) .logoAndsearch .logoContainer .mainImg {
        width: 103px
    }
}

nav:not(.air-datepicker-nav) .searchBar {
    position: relative;
    border: none;
    background-color: var(--box);
    border-radius: 30px;
    width: 100%;
    box-sizing: border-box;
    transition: .2s all
}

nav:not(.air-datepicker-nav) .searchBar .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5em;
    background-color: var(--box);
    padding: 5px 20px;
    border-radius: 12px;
    width: 100%;
    height: 45px
}

nav:not(.air-datepicker-nav) .searchBar .input span {
    background-color: var(--text-color);
    padding: 8px 20px;
    border-radius: 25px
}

nav:not(.air-datepicker-nav) .searchBar .input i,
nav:not(.air-datepicker-nav) .searchBar .input span {
    cursor: pointer;
    color: var(--text-color)
}

nav:not(.air-datepicker-nav) .searchBar .input input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border: none;
    color: var(--light-text-color);
    position: relative;
    z-index: 1
}

nav:not(.air-datepicker-nav) .searchBar .input .mainLoader {
    display: flex;
    width: 23px;
    height: 23px
}

nav:not(.air-datepicker-nav) .searchBar .input .mainLoader img {
    animation: minPulse 2s linear infinite;
    width: 17px;
    height: auto
}

nav:not(.air-datepicker-nav) .searchBar .input .mainLoader::before {
    border: 2px solid var(--primary)
}

nav:not(.air-datepicker-nav) .searchBar input:-webkit-autofill {
    -webkit-text-fill-color: var(--text-color);
    color: var(--text-color)
}

nav:not(.air-datepicker-nav) .searchBar .btn-search {
    border: none;
    font-size: 16px
}

nav:not(.air-datepicker-nav) .searchBar.open-search-container {
    top: 140px;
    border-radius: 30px 30px 12px 12px
}

nav:not(.air-datepicker-nav) .searchBar .search-container {
    height: 280px;
    overflow-y: auto;
    background-color: var(--box);
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 20px;
    border-bottom-right-radius: 12px;
    border-bottom-left-radius: 12px;
    transition: opacity .5s, transform .3s;
    transform: translateY(-20px);
    top: 0;
    opacity: 0;
    visibility: hidden;
    position: absolute
}

nav:not(.air-datepicker-nav) .searchBar.open-search-container .search-container {
    position: relative;
    transform: translateY(0px);
    opacity: 1;
    visibility: visible
}

nav:not(.air-datepicker-nav) .searchBar .search-container .data {
    display: flex;
    align-items: center;
    justify-content: center
}

nav:not(.air-datepicker-nav) .searchBar .search-container .game {
    display: flex;
    align-items: center;
    gap: 15px;
    position: relative;
    padding: 7px 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0)
}

nav:not(.air-datepicker-nav) .searchBar .search-container .game:not(:last-child):not(.highlighted) {
    border-bottom: 1px solid rgba(0, 0, 0, .1254901961)
}

nav:not(.air-datepicker-nav) .searchBar .search-container .game.highlighted .highlight {
    position: absolute;
    top: -3.5px;
    left: -3.5px;
    width: calc(100% + 7px);
    height: calc(100% + 7px);
    border-radius: 7px;
    background-color: var(--border);
    opacity: .6;
    z-index: 0
}

nav:not(.air-datepicker-nav) .searchBar .search-container .game .text {
    display: flex;
    flex-direction: column
}

nav:not(.air-datepicker-nav) .searchBar .search-container .game .text span {
    color: var(--light-text-color) !important;
    font-size: 12px
}

nav:not(.air-datepicker-nav) .searchBar .search-container img {
    width: 48px;
    height: 48px;
    border-radius: 11px
}

nav:not(.air-datepicker-nav) .logout {
    display: flex;
    align-items: center;
    position: relative
}

nav:not(.air-datepicker-nav) .logout .mainIcons {
    position: relative
}

nav:not(.air-datepicker-nav) .logout .mainIcons .lang-icon {
    position: relative
}

nav:not(.air-datepicker-nav) .logout .mainIcons .lang-icon:hover img {
    filter: invert(33%) sepia(94%) saturate(2903%) hue-rotate(330deg) brightness(97%) contrast(91%)
}

nav:not(.air-datepicker-nav) .logout .mainIcons .lang-icon:hover .container-langs {
    display: flex
}

nav:not(.air-datepicker-nav) .logout .mainIcons .lang-icon .langs {
    position: absolute;
    top: 100%;
    right: -50px
}

nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs {
    margin-top: 20px;
    width: 171px;
    height: 266px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    flex-direction: column;
    background: var(--background);
    border: 1px solid var(--box);
    border-radius: 12px;
    gap: 8px
}

nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs .link,
nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs .box {
    width: 90%;
    text-align: center
}

nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs .link:not(:last-child),
nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs .box:not(:last-child) {
    padding-bottom: 10px;
    border-bottom: 1px solid #97989f
}

nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs .link.active span::before,
nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs .box.active span::before {
    content: "";
    font-family: "FontAwesome";
    color: var(--primary);
    position: absolute;
    right: 35px
}

nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs span {
    color: #97989f
}

nav:not(.air-datepicker-nav) .logout .mainIcons .container-langs h6 {
    margin-top: 10px;
    color: var(--primary);
    border-bottom: 1px solid var(--text-color);
    width: 100%;
    padding: 2px;
    text-align: center
}

nav:not(.air-datepicker-nav) .logout .mainIcons .country-icon {
    position: relative;
    cursor: pointer
}

nav:not(.air-datepicker-nav) .logout .mainIcons .hover-img:hover {
    filter: invert(33%) sepia(94%) saturate(2903%) hue-rotate(330deg) brightness(97%) contrast(91%)
}

nav:not(.air-datepicker-nav) .logout .mainIcons img {
    height: 22px;
    margin: 0px 5px
}

nav:not(.air-datepicker-nav) .logout .mainIcons .country-icon .langs {
    position: absolute;
    top: 100%;
    left: 0;
    transition: opacity .3s, transform .3s;
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    z-index: 1
}

nav:not(.air-datepicker-nav) .logout .mainIcons .country-icon .langs .nav-link {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center
}

nav:not(.air-datepicker-nav) .logout .mainIcons .country-icon .langs.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible
}

nav:not(.air-datepicker-nav) .logout .mainIcons i:hover {
    color: var(--primary)
}

nav:not(.air-datepicker-nav) .logout .sep {
    height: 20px;
    width: 1px;
    background-color: rgba(0, 0, 0, .1882352941)
}

nav:not(.air-datepicker-nav) .logout .cart-btn {
    position: relative
}

nav:not(.air-datepicker-nav) .logout .cart-btn span {
    position: absolute;
    background-color: var(--primary);
    color: #fff;
    top: -0.5em;
    left: -0.5em;
    border-radius: 200%;
    font-family: "Charter", sans-serif;
    font-size: 12.5px;
    min-width: 17px;
    height: 17px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

nav:not(.air-datepicker-nav) .logout .cart-btn span[data-value="0"] {
    display: none
}

nav:not(.air-datepicker-nav) .logout .bell {
    position: relative
}

nav:not(.air-datepicker-nav) .logout .bell i {
    color: #6b6c72;
    font-size: 23px;
    cursor: pointer
}

nav:not(.air-datepicker-nav) .logout .bell span {
    position: absolute;
    width: 7px;
    height: 7px;
    display: inline-block;
    background-color: var(--primary);
    border-radius: 50%;
    left: -2px
}

nav:not(.air-datepicker-nav) .logout .profile-image {
    position: relative;
    transition: all .4s;
    gap: 5px
}

nav:not(.air-datepicker-nav) .logout .profile-image .close {
    display: none
}

nav:not(.air-datepicker-nav) .logout .profile-image .settings {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    flex-wrap: wrap;
    width: 100%;
    gap: .5em
}

nav:not(.air-datepicker-nav) .logout .profile-image .settings span,
nav:not(.air-datepicker-nav) .logout .profile-image .settings i {
    color: var(--text-color);
    font-size: 14px
}

nav:not(.air-datepicker-nav) .logout .profile-image .settings .item {
    background-color: var(--box);
    border-radius: 7px;
    padding: .5em;
    flex: 1;
    min-width: 100px
}

nav:not(.air-datepicker-nav) .logout .profile-image .settings .item .rank-img {
    width: 20px;
    height: 20px
}

nav:not(.air-datepicker-nav) .logout .profile-image .settings .logout-item {
    flex: 1;
    min-width: 100px;
    background-color: rgba(0, 0, 0, 0)
}

nav:not(.air-datepicker-nav) .logout .profile-image .settings .logout-item span,
nav:not(.air-datepicker-nav) .logout .profile-image .settings .logout-item i {
    color: #b70707
}

nav:not(.air-datepicker-nav) .logout .profile-image.active {
    width: -moz-fit-content;
    width: fit-content
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .open {
    display: none
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .close {
    display: inline
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .main-profile {
    display: flex
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .email {
    display: inline
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .text .name {
    font-size: 10px;
    gap: 5px
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .text .name i {
    font-size: 15px
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .theRank img {
    width: 20px
}

nav:not(.air-datepicker-nav) .logout .profile-image.active .theRank span {
    font-size: 12px
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-profile {
    display: none;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    background-color: var(--background);
    border-radius: 7px;
    padding: 1em;
    width: 270px
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-profile .dropdown-profile-name {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    width: 100%
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-profile .dropdown-profile-name .img-con {
    position: relative
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-profile .dropdown-profile-name .img-con .mainImg {
    width: 42px;
    height: 42px;
    padding: 1px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    overflow: hidden
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-profile .dropdown-profile-name .img-con .rank-img {
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 24px;
    height: 24px
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-profile .dropdown-profile-name .profile_name {
    font-weight: 500;
    color: var(--light-text-color)
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-profile .dropdown-profile-name .profile_rank_name {
    font-weight: normal;
    font-size: .9em
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text {
    display: flex;
    align-items: center;
    position: relative
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text .text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: absolute;
    bottom: -5px;
    right: -5px
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text .text .name {
    display: flex;
    align-items: center;
    gap: 5px
}

nav:not(.air-datepicker-nav) .logout .bell i:hover {
    color: var(--primary)
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text .text .name i {
    color: var(--primary)
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text .text .name span {
    color: #000;
    font-size: 12px
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text p {
    cursor: pointer
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text .mainImg {
    width: 42px;
    height: 42px;
    padding: 1px;
    border: 1px solid var(--primary);
    border-radius: 50%;
    overflow: hidden
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text .theRank img {
    width: 24px;
    height: 24px
}

nav:not(.air-datepicker-nav) .logout .profile-image .main-text .theRank span {
    color: #fc6a32;
    margin-left: 10px;
    font-size: 13px
}

nav:not(.air-datepicker-nav) .logout .profile-image .wallet {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    padding: .3em .7em;
    position: relative;
    border-radius: 11px;
    width: 100%;
    background-color: rgba(236, 51, 90, .1);
    color: var(--light-text-color)
}

nav:not(.air-datepicker-nav) .logout .profile-image .wallet .wallet-label {
    font-size: .8em
}

nav:not(.air-datepicker-nav) .logout .profile-image .wallet .price .main-price {
    display: flex;
    align-items: center;
    color: var(--primary);
    font-size: 1em;
    font-weight: 100;
    display: flex;
    align-items: center;
    gap: 5px;
    font-weight: bold
}

nav:not(.air-datepicker-nav) .logout .profile-image .wallet .price .main-price span {
    color: #000
}

nav:not(.air-datepicker-nav) .logout .profile-image .wallet .arrow {
    position: absolute;
    top: 10px;
    left: 10px;
    transform: scaleX(-1)
}

.fa-chevron-right,
.rtl-arrow {
    transform: scaleX(-1)
}

nav:not(.air-datepicker-nav) .logout .profile-image .head {
    padding-bottom: 10px;
    color: #000;
    border-bottom: 1px solid #000;
    font-size: 14px;
    width: 100%;
    text-align: center
}

nav:not(.air-datepicker-nav) .logout .profile-image .log {
    margin: 5px 0px;
    display: flex;
    justify-content: end;
    width: 100%;
    color: var(--primary)
}

nav:not(.air-datepicker-nav) .logout .profile-image .log a {
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 5px
}

@media(max-width: 500px) {
    nav:not(.air-datepicker-nav) {
        padding: .7em
    }

    nav:not(.air-datepicker-nav) .logout .login-btn {
        display: none
    }

    nav:not(.air-datepicker-nav) .mainIcons {
        margin: 0px 10px
    }
}

@media(max-width: 375px) {
    #mainlogo {
        width: 100px
    }

    #side-bar {
        width: 25px
    }
}

@media(max-width: 1199px) {
    nav:not(.air-datepicker-nav) .searchBar {
        width: 230px
    }

    nav:not(.air-datepicker-nav) #main-icons img {
        margin: 0px 3px
    }
}

@media(max-width: 400px) {
    nav:not(.air-datepicker-nav) #main-icons img {
        margin: 0px 0px
    }
}

.custom-check input.custom-check-input {
    width: 20px;
    height: 20px;
    border-radius: 3px;
    background-color: var(--box);
    border: 1px solid var(--border);
    appearance: none;
    cursor: pointer;
    transition: background-color .3s, border-color .3s
}

.custom-check input.custom-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary)
}

.custom-check input.custom-check-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25)
}

.custom-check label.custom-check-label {
    margin-inline-start: .5em;
    color: var(--text-color);
    cursor: pointer;
    user-select: none
}

.custom-check label.custom-check-label a {
    color: var(--primary)
}

.custom-check input.custom-check-input:checked::before {
    content: "✓";
    display: inline-block;
    color: #fff;
    font-size: 14px;
    text-align: center;
    width: 100%;
    height: 100%
}

.form-switch .form-check-input {
    background-color: #000;
    border-color: rgba(0, 0, 0, .25) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ee3b59'/></svg>") !important
}

.form-switch .form-check-input:checked {
    background-color: var(--primary);
    border-color: rgba(0, 0, 0, .25) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%2397989f'/></svg>") !important
}

.progressOffer {
    margin-top: 2em;
    width: 100%;
    background-image: linear-gradient(to right, #6406b7, #370932);
    padding: 1.5em 2.5em;
    border-radius: 12px;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: .5em;
    position: relative;
    overflow: hidden
}

.progressOffer::before {
    content: "";
    width: 100%;
    height: 4px;
    background-image: linear-gradient(90deg, #c71585 0%, #32ba30 50.52%, #e2d45c 100%);
    position: absolute;
    top: 0;
    left: 0
}

.progressOffer .title-con {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%
}

.progressOffer .title-con .timer {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .3em
}

.progressOffer .title-con .timer .part {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.progressOffer .title-con .timer .part .number {
    font-family: sans-serif;
    font-size: 1.5em;
    font-weight: 500;
    line-height: 1.4
}

.progressOffer .title-con .timer .part .name {
    font-size: .9em;
    font-weight: 300;
    line-height: 1.4
}

.progressOffer .title-con .timer .sep {
    font-size: 1.6em;
    font-weight: 600;
    font-family: "Avenir Next Condensed";
    line-height: .5
}

.progressOffer .descr {
    font-weight: 300;
    margin-top: .3em;
    width: 100%
}

.progressOffer .descr b {
    color: #ffa800;
    font-weight: bold
}

.progressOffer .steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: .5em;
    margin-top: 1em;
    position: relative
}

.progressOffer .steps .step {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: .8em;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity))
}

.progressOffer .steps .step svg {
    width: 40px
}

.progressOffer .steps .step svg #toBeColored {
    fill: #fff
}

.progressOffer .steps .step.done svg #toBeColored {
    fill: #ffa800
}

.progressOffer .steps .sep {
    height: 5px;
    background-color: #fff;
    flex: 1
}

.progressOffer .steps .sep.done {
    background-color: #ffa800
}

@media(min-width: 50px)and (max-width: 500px) {
    .progressOffer {
        padding: 1em 1.25em;
        margin-top: 0;
        border-radius: 0;
        justify-content: center;
        align-items: center;
        text-align: center;
        border-top: 4px solid;
        border-image-source: linear-gradient(90deg, #c71585 0%, #32ba30 50.52%, #e2d45c 100%)
    }

    .progressOffer .title-con {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center
    }

    .progressOffer .descr,
    .progressOffer .sec-title {
        width: 100%;
        text-align: center
    }
}

@media(max-width: 768px) {
    .progressOffer {
        margin-top: 2em
    }
}

.offcanvas-backdrop {
    background-color: rgba(0, 0, 0, 0);
    backdrop-filter: blur(40px);
    -webkit-backdrop-filter: blur(40px)
}

.offcanvas {
    background-color: var(--background)
}

.offcanvas.offcanvas-start {
    left: 0;
    right: 0;
    transition: .3s all !important;
    transform: translateX(100%)
}

.offcanvas.offcanvas-start.show {
    transform: none
}

.offcanvas.mobile-offcanvas-start {
    top: 0;
    left: 0;
    right: 0;
    transition: .3s all !important;
    opacity: 0
}

.offcanvas.mobile-offcanvas-start.show {
    opacity: 1
}

.mobile-search-container {
    width: 100%
}

.mobile-search-container .game {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%
}

.mobile-search-container .game:not(:last-child) {
    border-bottom: 1px solid rgba(0, 0, 0, .1254901961);
    padding-bottom: 10px
}

.mobile-search-container .game .text {
    display: flex;
    flex-direction: column
}

.mobile-search-container .game .text span {
    color: var(--light-text-color) !important;
    font-size: 12px
}

.mobile-search-container img {
    width: 48px;
    height: 48px;
    border-radius: 11px
}

.offcanvas .offcanvas-body {
    overflow-y: visible
}

.offcanvas .btn-close {
    background-image: url("/assets/web/images/close.svg");
    background-color: rgba(0, 0, 0, 0)
}

.offcanvas .main-profile {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    border-top: 1px solid var(--border);
    padding-top: 20px
}

.offcanvas .main-profile .image {
    display: flex;
    align-items: center;
    gap: .8em
}

.offcanvas .main-profile .image img {
    width: 45px;
    height: 45px;
    border: 1px solid var(--primary);
    border-radius: 50%
}

.offcanvas .main-profile .image .text {
    display: flex;
    flex-direction: column;
    gap: 3px
}

.offcanvas .main-profile .image .text .head {
    color: var(--light-text-color);
    font-size: .9em;
    font-weight: bold
}

.offcanvas .main-profile .image .text .head span {
    color: var(--light-text-color)
}

.offcanvas .main-profile .image .text span {
    color: var(--light-text-color);
    opacity: .8;
    font-size: 12px
}

.offcanvas .main-profile .wallet {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .8em;
    padding: .3em .7em;
    position: relative;
    border-radius: 7px;
    background-color: rgba(236, 51, 90, .0509803922);
    width: 100%
}

.offcanvas .main-profile .wallet .price {
    padding: 0px;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 2px
}

.offcanvas .main-profile .wallet .wallet-title {
    font-weight: normal;
    font-size: .8em;
    color: var(--light-text-color);
    opacity: .5
}

.offcanvas .main-profile .wallet .wallet-price {
    font-weight: bold;
    font-size: 1em;
    color: var(--primary)
}

.offcanvas .main-profile .linkss {
    margin-top: 5px;
    display: flex;
    flex-direction: column;
    gap: 10px
}

.offcanvas .main-profile .linkss .link {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    font-size: 1em;
    color: var(--text-color)
}

.offcanvas .main-profile .linkss .link i {
    font-size: 1.2em;
    margin-top: -0.1em;
    display: inline-flex;
    width: 30px
}

.offcanvas .main-profile .linkss .link img {
    width: 1.2em;
    height: auto;
    aspect-ratio: 1/1;
    margin-left: calc(30px - 1.2em)
}

.offcanvas .main-profile .linkss .link .rank-img {
    width: 20px;
    height: 20px
}

.offcanvas .main-profile .logout-link {
    color: var(--primary)
}

.offcanvas .main-profile .logout-link span,
.offcanvas .main-profile .logout-link i {
    color: var(--primary)
}

.offcanvas .header {
    cursor: pointer
}

.offcanvas .links {
    margin-top: 50px
}

.offcanvas .links .link {
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    flex-wrap: wrap
}

.offcanvas .links .link .header-dropdown {
    width: 100%;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em;
    padding-right: 1em
}

.offcanvas .links .link .header-dropdown .dropdown-item {
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-end;
    gap: .5em;
    flex: 1;
    min-width: 120px;
    white-space: wrap;
    background-color: unset;
    color: var(--text-color)
}

.offcanvas .links .link .header-dropdown .dropdown-item img {
    width: 1em;
    height: 1em;
    margin-inline-end: .5em
}

.offcanvas .links .link .header-dropdown .dropdown-item div {
    font-size: .9em;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1.1em;
    display: contents
}

.offcanvas .links .link .header-dropdown.active {
    display: flex
}

.offcanvas .links .link span,
.offcanvas .links .link i {
    color: var(--text-color);
    font-size: 14px
}

.offcanvas .links .link.active span {
    color: var(--light-text-color)
}

.offcanvas .links .link.active i {
    color: var(--primary)
}

.offcanvas button {
    margin-top: 50px;
    background-color: var(--primary);
    color: var(--light-text-color);
    padding: 10px 70px;
    border: none;
    font-size: 16px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.offcanvas .searchBar {
    margin-top: 10px
}

.offcanvas .searchBar .input {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    background-color: #252728;
    width: 100%;
    padding: 5px 20px;
    border-radius: 30px
}

.offcanvas .searchBar .input span {
    background-color: #343637;
    padding: 8px 15px;
    border-radius: 25px;
    font-size: 12px
}

.offcanvas .searchBar .input i,
.offcanvas .searchBar .input span {
    cursor: pointer;
    color: #97989f
}

.offcanvas .searchBar .input input {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    outline: none;
    border: none;
    color: var(--light-text-color)
}

.offcanvas .logout {
    margin-top: 50px;
    display: none;
    align-items: center;
    gap: 20px
}

.offcanvas .logout span {
    color: var(--primary)
}

.offcanvas .categories {
    height: 450px;
    width: 900px;
    padding: 20px;
    border-radius: 30px;
    background-color: #111315;
    position: absolute;
    right: 110%;
    overflow: auto;
    display: none;
    top: 50px;
    gap: 30px
}

.offcanvas .categories.active {
    display: flex
}

.offcanvas .categories ul {
    list-style: none
}

.offcanvas .categories .games {
    width: 650px;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

.offcanvas .categories .games .game {
    display: flex;
    align-items: center;
    gap: 5px;
    width: 200px;
    color: #fff;
    cursor: pointer
}

.offcanvas .categories .games .game img {
    width: 50px;
    height: 50px;
    border-radius: 10px
}

.offcanvas .categories .games .game .text {
    display: flex;
    flex-direction: column;
    font-size: 12px
}

.offcanvas .categories .games .game .text span {
    font-weight: bold
}

.offcanvas .categories .close-categories {
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    display: none;
    position: absolute;
    right: 15px
}

.offcanvas .categories ul#tabs-nav li:hover .head,
.offcanvas .categories ul#tabs-nav li.active .head {
    background-color: #242627;
    color: #fff
}

.offcanvas .categories .links {
    display: flex;
    gap: 20px
}

.offcanvas .categories .links .link {
    display: flex;
    gap: 30px;
    transition: all .3s
}

.offcanvas .categories .links .link .head {
    color: #6b6c72;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer
}

@media(min-width: 1400px) {
    .offcanvas .categories {
        width: 1300px
    }
}

@media(max-width: 1000px) {
    .offcanvas .categories {
        top: 0;
        right: 0;
        left: 0;
        position: fixed;
        width: 100vw;
        height: 100vh
    }

    .offcanvas .categories .close-categories {
        display: inline-block
    }
}

#categoriesCon {
    width: 500px;
    max-height: 450px;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 30px;
    background-color: #111315;
    position: absolute;
    top: calc(100% + 20px);
    left: 0;
    display: none;
    gap: 30px;
    cursor: default
}

#categoriesCon.active {
    display: flex
}

#categoriesCon ul {
    list-style: none
}

#categoriesCon .games {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 20px
}

#categoriesCon .games .game {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 200px;
    color: #fff;
    cursor: pointer
}

#categoriesCon .games .game img {
    width: 50px;
    height: 50px;
    border-radius: 10px
}

#categoriesCon .games .game .text {
    display: flex;
    flex-direction: column;
    font-size: 12px
}

#categoriesCon .games .game .text span {
    font-weight: bold
}

#categoriesCon .games .game .text p {
    opacity: .5
}

#categoriesCon .close-categories {
    cursor: pointer;
    color: #fff;
    font-size: 20px;
    display: none;
    position: absolute;
    right: 15px
}

#categoriesCon ul#tabs-nav li:hover .head,
#categoriesCon ul#tabs-nav li.active .head {
    background-color: #242627;
    color: #fff
}

#categoriesCon .links {
    display: flex;
    gap: 20px
}

#categoriesCon .links .link {
    display: flex;
    gap: 30px;
    transition: all .3s
}

#categoriesCon .links .link .head {
    color: #6b6c72;
    padding: 10px;
    border-radius: 10px;
    cursor: pointer
}

@media(max-width: 1000px) {
    #categoriesCon .close-categories {
        display: inline-block
    }
}

@media(max-width: 1200px) {
    nav:not(.air-datepicker-nav) .search-icon {
        display: block
    }

    nav:not(.air-datepicker-nav) .searchBar {
        position: absolute;
        top: 100%;
        width: 98%;
        margin: 0px 5px;
        left: 0px;
        display: none
    }

    nav:not(.air-datepicker-nav) .searchBar .input {
        width: 100%
    }

    nav:not(.air-datepicker-nav) .searchBar.active {
        top: 100%;
        display: inline
    }
}

@media(max-width: 980px) {
    .sidebar-container .sidebar {
        width: 40%
    }
}

@media(max-width: 900px) {
    .sidebar-container .sidebar {
        width: 75%
    }
}

@media(min-width: 50px)and (max-width: 1000px) {
    nav:not(.air-datepicker-nav) .profile-image {
        display: none
    }
}

@media(min-width: 50px)and (max-width: 779px) {
    #headerNav {
        opacity: 0;
        position: absolute;
        z-index: -100
    }
}

.landing {
    margin-top: 75px;
    overflow-x: hidden
}

.swiper-pagination-custom {
    position: relative;
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto;
    margin-top: -90px;
    margin-bottom: 30px;
    -ms-overflow-style: none;
    scrollbar-width: none
}

.swiper-pagination-custom::-webkit-scrollbar {
    display: none
}

@media(min-width: 767px)and (max-width: 1000px) {
    .landing .swiper.mainSlider {
        position: relative
    }
    .landing .swiper.mainSlider .swiper-pagination-custom {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: .5rem;
        margin: 0;
        padding: 0;
        overflow: visible;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }
}

@media(min-width: 461px)and (max-width: 766px) {
    .swiper-pagination-custom {
        overflow-x: auto;
        margin-top: -150px
    }
}

@media(max-width: 300px) {
    .swiper-pagination-custom {
        margin-top: -150px
    }
}

@media(min-width: 301px)and (max-width: 473px) {
    .swiper-pagination-custom {
        margin-top: -150px
    }
}

.swiper-pagination-custom .swiper-pagination-bullet {
    aspect-ratio: 1.47/1;
    margin: 0 5px;
    background-size: cover;
    cursor: pointer;
    transition: transform .3s;
    border: unset;
    opacity: .8;
    background: var(--bs-gray-800) !important;
    border-radius: 50%;
    width: 20px;
    height: 20px
}

@media(min-width: 999px)and (max-width: 1250px) {
    .swiper-pagination-custom .swiper-pagination-bullet {
        width: 20px;
        height: 20px
    }
}

@media(min-width: 767px)and (max-width: 1000px) {
    .swiper-pagination-custom .swiper-pagination-bullet {
        width: 20px;
        height: 20px
    }
}

@media(min-width: 461px)and (max-width: 766px) {
    .swiper-pagination-custom .swiper-pagination-bullet {
        visibility: visible;
        min-width: 200px
    }
}

@media(min-width: 0px)and (max-width: 460px) {
    .swiper-pagination-custom .swiper-pagination-bullet {
        visibility: visible;
        min-width: 200px
    }
}

.swiper-pagination-custom .swiper-pagination-bullet-active {
    background: var(--bs-gray-100) !important;
    opacity: .8
}

@media(max-width: 600px) {
    .landing {
        margin-top: 80px
    }
}

.landing .swiper {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    aspect-ratio: 2.65/1
}

@media(max-width: 300px) {
    .landing .swiper {
        aspect-ratio: unset;
        height: 520px
    }
}

@media(min-width: 301px)and (max-width: 473px) {
    .landing .swiper {
        aspect-ratio: unset;
        height: 500px
    }
}

@media(min-width: 474px)and (max-width: 500px) {
    .landing .swiper {
        aspect-ratio: unset;
        height: 500px
    }
}

@media(min-width: 501px)and (max-width: 600px) {
    .landing .swiper {
        aspect-ratio: unset;
        height: 500px
    }
}

@media(min-width: 601px)and (max-width: 767px) {
    .landing .swiper {
        aspect-ratio: 1.3/1
    }
}
@media(width: 768px) {
    .landing .swiper {
        aspect-ratio: 1.3/1
    }
}

.landing .swiper .swiper-slide {
    position: relative;
    overflow: hidden;
    width: 100%;
    z-index: 1111;
    border-radius: 0
}

.landing .swiper .swiper-slide .image {
    position: relative;
    z-index: 11;
    width: 100%;
    border-radius: 0
}

@media(min-width: 461px)and (max-width: 766px) {
    .landing .swiper .swiper-slide .image {
        height: 100%;
        position: relative
    }
}

@media(min-width: 0px)and (max-width: 460px) {
    .landing .swiper .swiper-slide .image {
        height: 100%;
        position: relative
    }

    .landing .swiper .swiper-slide .image img {
        height: 100%;
        object-fit: cover;
        object-position: center
    }
}

.landing .swiper .swiper-slide .image::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .2);
    z-index: 1
}

@media(max-width: 770px) {
    .landing .swiper .swiper-slide .image::after {
        display: none
    }
}

.landing .swiper .swiper-slide .image .mainImg {
    width: 100%;
    border-radius: 0
}

.landing .swiper .swiper-slide .image img {
    width: 90px;
    margin-top: 10px
}

@media(min-width: 461px)and (max-width: 766px) {
    .landing .swiper .swiper-slide .image img {
        height: 100%;
        object-fit: cover;
        object-position: center
    }
}

@media(min-width: 767px)and (max-width: 1000px) {
    .landing .swiper .swiper-slide .image img {
        width: 60px;
        margin-top: 0
    }
}

@media(min-width: 500px)and (max-width: 766px) {
    .landing .swiper .swiper-slide .image img {
        margin-top: 0
    }
}

.landing .swiper .swiper-slide .image .img-text {
    position: absolute;
    top: 7%;
    color: #fff;
    right: 130px;
    width: 450px;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    direction: rtl;
    gap: 1em;
    z-index: 2
}

@media(min-width: 767px)and (max-width: 1000px) {
    .landing .swiper .swiper-slide .image .img-text {
        width: 320px;
        padding: 0;
        box-sizing: border-box;
        gap: .3em;
        top: 7%;
        right: 13%
    }
}

@media(min-width: 999px)and (max-width: 1250px) {
    .landing .swiper .swiper-slide .image .img-text {
        width: 400px
    }
}

@media(min-width: 461px)and (max-width: 766px) {
    .landing .swiper .swiper-slide .image .img-text {
        width: 100%;
        padding: 1em;
        box-sizing: border-box;
        gap: .5em;
        top: 7%;
        right: 0;
        margin: auto;
        justify-content: center;
        align-items: center;
        text-align: center
    }
}

@media(min-width: 0px)and (max-width: 460px) {
    .landing .swiper .swiper-slide .image .img-text {
        width: 100%;
        padding: 1em;
        box-sizing: border-box;
        gap: .5em;
        top: 7%;
        right: 0;
        margin: auto;
        justify-content: center;
        align-items: center;
        text-align: center
    }
}

@media(min-width: 500px)and (max-width: 766px) {
    .landing .swiper .swiper-slide .image .img-text {
        padding: 15px;
        box-sizing: border-box
    }
}

@media(min-width: 1400px) {
    .landing .swiper .swiper-slide .image .img-text {
        top: 20%;
        height: -moz-fit-content;
        height: fit-content;
        right: 200px
    }
}

.landing .swiper .swiper-slide .image .img-text h2 {
    font-size: 3em;
    font-weight: bolder;
    margin: 10px 0px
}

@media(min-width: 0px)and (max-width: 998px) {
    .landing .swiper .swiper-slide .image .img-text h2 {
        font-size: 21px;
        margin: 0
    }
}

@media(min-width: 999px)and (max-width: 1250px) {
    .landing .swiper .swiper-slide .image .img-text h2 {
        font-size: 2em
    }
}

@media(min-width: 767px)and (max-width: 1000px) {
    .landing .swiper .swiper-slide .image .img-text h2 {
        font-size: 1.8em;
        margin: 0
    }
}

.landing .swiper .swiper-slide .image .img-text h4 {
    font-size: 21px;
    font-weight: bolder;
    margin: 10px 0px
}

@media(min-width: 767px)and (max-width: 1000px) {
    .landing .swiper .swiper-slide .image .img-text h4 {
        margin: 5px 0
    }
}

@media(min-width: 500px)and (max-width: 766px) {
    .landing .swiper .swiper-slide .image .img-text h4 {
        font-size: 18px;
        margin: 2px 0
    }
}

.landing .swiper .swiper-slide .image .img-text p {
    font-size: 16px
}

.landing .swiper .swiper-slide .image .img-text a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 159px;
    height: 49px;
    margin-bottom: 10px;
    border: none;
    cursor: pointer;
    background-color: var(--primary);
    color: #fff;
    border-radius: 25px;
    z-index: 11111
}

@media(min-width: 767px)and (max-width: 1000px) {
    .landing .swiper .swiper-slide .image .img-text a {
        height: unset
    }
}

@media(min-width: 500px)and (max-width: 766px) {
    .landing .swiper .swiper-slide .image .img-text a {
        margin-bottom: 0
    }
}

@media(max-width: 768px) {
    .landing .swiper.mainSlider {
        /* let content (image) control the height on mobile to avoid extra empty space */
        aspect-ratio: auto;
        margin: 0 .5em;
        margin-top: 2em;
        width: unset;
        height: auto;
        border-radius: 20px;
        background-color: var(--lighter-box)
    }
}

@media(max-width: 768px)and (min-width: 576px) {
    .landing .swiper.mainSlider {
        max-width: 540px;
        margin: 0 auto;
        margin-top: 2em
    }
}

@media(max-width: 768px) {
    .landing .swiper.mainSlider .swiper-pagination-custom {
        margin: 0;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        bottom: 1.5em
    }

    .landing .swiper.mainSlider .swiper-pagination-custom .swiper-pagination-bullet {
        width: 6px;
        height: 6px;
        min-width: unset;
        transition: all .3s;
        background-image: unset;
        background-color: var(--background);
        opacity: .5
    }

    .landing .swiper.mainSlider .swiper-pagination-custom .swiper-pagination-bullet-active {
        border: unset;
        width: 18px;
        opacity: 1
    }
    .landing .swiper.mainSlider .swiper-slide .img-text {
        display: none;
        /* display: flex; */
        position: absolute;
        left: 0;
        right: 0;
        margin: 0 auto;
        bottom: 1.25rem;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: .4rem;
        padding: 0 .75rem;
        width: 100%;
        max-width: 85%;
        box-sizing: border-box
    }
    .landing .swiper.mainSlider .swiper-slide .image img {
        margin: 0
    }
}

.text-switch {
    font-size: 13px !important;
    text-align: center
}

.text-switch.aff {
    font-size: 11px !important
}

.text-switch.active {
    color: var(--primary)
}

.offers {
    border-radius: 25px;
    position: relative;
    width: 100%;
    margin: 1em auto;
    padding: 0;
    margin-bottom: 2em
}

.offers .swiper-wrapper {
    height: unset
}

.offers.top {
    margin-bottom: 50px
}

.offers.top .box {
    background: rgba(0, 0, 0, 0);
    transition: .3s all
}

.offers.top .box:hover {
    background-image: url("/assets/web/images/mask5.svg");
    background-color: #111315
}

.offers.top .box .text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%
}

.offers.top .box .star {
    color: #f8c346;
    display: flex;
    align-items: center;
    gap: 5px
}

.offers.top .box .star img {
    width: 10px
}

.offers .header {
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between
}

.offers .header .view {
    cursor: pointer;
    color: var(--primary)
}

.offers .back-img {
    position: absolute;
    top: -250px;
    right: -110px;
    z-index: -111;
    transform: scaleX(-1)
}

.offers h3 {
    font-size: 25px;
    margin: 1em 0px;
    font-weight: bolder;
    color: var(--light-text-color)
}

.offers .swiper-button-next,
.offers .swiper-button-prev {
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity));
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-color: var(--lighter-box);
    border: 1px solid rgba(var(--text-color), 0.5);
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 58%
}

.offers .swiper-button-next::after,
.offers .swiper-button-prev::after {
    content: "";
    font-size: 17px
}

.offers .swiper-button-next {
    right: -15px
}

.offers .swiper-button-prev {
    left: -15px
}

.offers svg path {
    stroke: var(--light-text-color)
}

@media(min-width: 50px)and (max-width: 575px) {
    .offers .swiper-button-next {
        right: 5px
    }

    .offers .swiper-button-prev {
        left: 5px
    }
}

.offers .box {
    box-sizing: border-box;
    width: 100%;
    height: auto;
    aspect-ratio: .76/1;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 17px;
    position: relative;
    overflow: hidden;
    direction: rtl
}

@media(min-width: 50px)and (max-width: 1023px) {
    .offers .box {
        width: 190px
    }
}

.offers .box .labels {
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

.offers .box .labels .perLabel {
    position: relative;
    z-index: 1;
    width: 100%;
    font-size: 15px;
    text-align: center;
    border-radius: 0 0 16px 0;
    padding: .6em 1em
}

.offers .box .labels .perLabel.discount {
    background-image: linear-gradient(to right, #ec335a, #a82440);
    color: #fff;
    direction: ltr
}

.offers .box .labels .perLabel.cashback {
    background-image: linear-gradient(to right, #a41b8b, #5c03bc);
    color: #fff
}

.offers .box .labels .perLabel:nth-child(even) {
    padding-top: calc(.6em + 16px);
    margin-top: -16px;
    z-index: 0
}

.offers .box .text-overlay {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 10px;
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, .1254901961);
    backdrop-filter: blur(55px);
    -webkit-backdrop-filter: blur(55px);
    padding: 1em;
    color: #fff
}

.offers .box .text-overlay .strikethrough {
    position: relative;
    opacity: .5;
    margin-right: .3em
}

.offers .box .text-overlay .cardName {
    font-size: 17px;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center
}

.offers .box .text-overlay .cardName .strikethrough {
    font-size: 15px
}

.offers .box .text-overlay .cardName .strikethrough::after {
    content: "";
    position: absolute;
    top: 33%;
    left: -1px;
    width: calc(100% + 2px);
    height: 1px;
    background-color: #fff;
    opacity: .8
}

.categories-container {
    margin: 5em auto;
    position: relative
}

.categories-container h3 {
    font-size: 25px;
    margin: 1em 0px;
    font-weight: bolder;
    color: var(--light-text-color)
}

.categories-container .categories {
    display: flex;
    gap: 12px;
    flex-wrap: wrap
}

@media(max-width: 400px) {
    .categories-container .categories {
        justify-content: center
    }
}

.categories-container .categories .category {
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    padding: 1.5em;
    background-color: var(--lighter-box);
    border-radius: 12px;
    box-shadow: 0 0 2px 1px var(--shadow);
    transition: .3s ease;
    flex: 1;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    gap: 1em;
    color: var(--light-text-color-2);
    position: relative;
    overflow: hidden;
    text-align: center;
    width: 200px;
    max-width: 200px;
    min-width: 200px
}

.categories-container .categories .category .category-icon {
    width: 70px;
    height: 70px;
    padding: 10px;
    border-radius: 17px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .2509803922);
    z-index: 2
}

.categories-container .categories .category img:not(.category-background) {
    width: 70px;
    height: 70px;
    border-radius: 17px;
    box-shadow: 0 7px 10px rgba(0, 0, 0, .2509803922);
    z-index: 2
}

.categories-container .categories .category img.category-background {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    object-fit: cover;
    filter: blur(6px)
}

.categories-container .categories .category h4 {
    font-size: 17px;
    font-weight: bolder;
    margin: 0
}

.categories-container .categories .category svg,
.categories-container .categories .category h4 {
    position: relative;
    z-index: 2
}

.categories-container .categories .category:hover {
    opacity: .8;
    cursor: pointer;
    animation: pulseShadow 1.5s infinite alternate
}

.categories-container .categories .category:hover .category-icon {
    box-shadow: 0 0 18px var(--primary)
}

@media(min-width: 50px)and (max-width: 300px) {
    .categories-container .categories {
        grid-template-columns: repeat(1, 1fr)
    }
}

@media(min-width: 301px)and (max-width: 575px) {
    .categories-container .categories {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 576px)and (max-width: 767px) {
    .categories-container .categories {
        grid-template-columns: repeat(3, 1fr)
    }
}

.partner-coupons {
    margin: 5em auto;
    position: relative
}

.partner-coupons h3 {
    font-size: 25px;
    margin: 1em 0px;
    font-weight: bolder;
    color: var(--light-text-color)
}

.partner-coupons .partner-coupons-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1em;
    overflow: hidden;
    position: relative;
    padding-top: 2em
}

.partner-coupons .partner-coupons-container .partner-coupon {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1.5em;
    border: 1px solid rgba(var(--box), 0.8);
    background-color: var(--lighter-box);
    border-radius: 12px;
    width: 100%;
    margin: 0
}

.partner-coupons .partner-coupons-container .partner-coupon img {
    width: 70px;
    height: 70px;
    aspect-ratio: 1/1;
    border-radius: 17px;
    margin-top: -2.5em;
    background-color: var(--lighter-box);
    box-shadow: 0 7px 10px rgba(0, 0, 0, .2509803922)
}

.partner-coupons .partner-coupons-container .partner-coupon h4 {
    font-size: 17px;
    font-weight: bolder;
    margin: 0;
    margin-top: 1.7em;
    flex: 1;
    color: var(--light-text-color)
}

.partner-coupons .partner-coupons-container .partner-coupon p {
    font-size: 16px;
    margin: 0;
    margin-top: .7em;
    opacity: .7;
    text-align: center;
    color: var(--light-text-color)
}

.partner-coupons .partner-coupons-container .partner-coupon a {
    background-color: var(--primary);
    color: #fff;
    padding: .5em 1.5em .3em 1.5em;
    border-radius: 30px;
    margin-top: 1em;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: .9em
}

.partner-coupons .show-more-link {
    color: var(--light-text-color)
}

.partner-coupons .show-more-link svg path {
    fill: var(--light-text-color)
}

.partner-coupons .swiper-button-next,
.partner-coupons .swiper-button-prev {
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity));
    cursor: pointer;
    width: 40px;
    height: 40px;
    background-color: var(--lighter-box);
    border: 1px solid rgba(var(--text-color), 0.5);
    border-radius: 100%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    top: 65%
}

.partner-coupons .swiper-button-next::after,
.partner-coupons .swiper-button-prev::after {
    content: "";
    font-size: 17px
}

.partner-coupons .swiper-button-next svg path,
.partner-coupons .swiper-button-prev svg path {
    stroke: var(--light-text-color)
}

.partner-coupons .swiper-button-next {
    right: -15px
}

.partner-coupons .swiper-button-prev {
    left: -15px
}

@media(min-width: 50px)and (max-width: 575px) {
    .partner-coupons .swiper-button-next {
        right: 5px
    }

    .partner-coupons .swiper-button-prev {
        left: 5px
    }
}

.events {
    margin: 5em auto;
    position: relative;
    background-color: var(--lighter-box);
    border-radius: 15px;
    padding: 1em 1.3em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em
}

.events h3 {
    font-size: 25px;
    margin: 0;
    font-weight: bolder;
    color: var(--light-text-color)
}

.events .show-more-link {
    color: var(--light-text-color)
}

.events .show-more-link svg path {
    fill: var(--light-text-color)
}

.events .choose {
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 0em;
    margin-top: 1em;
    margin-bottom: .5em
}

.events .choose span {
    cursor: pointer;
    position: relative;
    padding: .3em .7em;
    padding-top: .5em;
    text-align: center;
    font-size: 1em
}

.events .choose span.active {
    color: var(--primary)
}

.events .choose span.active::before {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    border-radius: 1em
}

.events .events-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em
}

.events .events-container .per-event {
    box-shadow: 0px 16px 12px -8px rgba(101, 93, 122, .0666666667);
    box-shadow: 0px 8px 24px 0px rgba(101, 93, 122, .0666666667);
    border-radius: 12px;
    position: relative;
    padding: 1.5px;
    background: rgba(0, 0, 0, 0);
    cursor: pointer
}

.events .events-container .per-event .event-con {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    padding: calc(.5em + 1px);
    gap: .5em;
    background: var(--lighter-box);
    border-radius: 10px;
    width: 100%;
    height: 100%
}

.events .events-container .per-event .event-con .img {
    width: 105px;
    height: 105px;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative
}

.events .events-container .per-event .event-con .img .timer {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 7px;
    width: calc(100% - 14px);
    background-color: var(--primary);
    color: #fff;
    border-radius: 5px;
    padding: .21em;
    font-family: sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .08em
}

.events .events-container .per-event .event-con .img .timer .part {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.events .events-container .per-event .event-con .img .timer .part .number {
    font-size: .9em;
    font-weight: 500;
    line-height: 1.1
}

.events .events-container .per-event .event-con .img .timer .part .name {
    font-size: .55em;
    font-weight: 300;
    line-height: 1.1
}

.events .events-container .per-event .event-con .img .timer .sep {
    font-size: 1.6em;
    font-weight: 600;
    font-family: "Avenir Next Condensed";
    line-height: .5
}

.events .events-container .per-event .event-con .texts {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .3em
}

.events .events-container .per-event .event-con .texts h4 {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--light-text-color);
    line-height: 1.2;
    padding: 0;
    margin: 0;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .4em
}

.events .events-container .per-event .event-con .texts h4 .label {
    font-size: .65em;
    font-weight: normal;
    padding: .4em .7em .2em .7em;
    border-radius: 7px
}

.events .events-container .per-event .event-con .texts p {
    font-size: .8em;
    font-weight: 400;
    padding: 0;
    margin: 0;
    opacity: .8;
    color: var(--text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical
}

.events .events-container .per-event .event-con .texts .expiry {
    font-size: .8em;
    font-weight: 400;
    color: var(--text-color)
}

.events .events-container .per-event .event-con .texts .expiry strong {
    font-weight: bold
}

.events .events-container .per-event.live {
    background: linear-gradient(180deg, #6406b7 0%, #ec335a 100%)
}

.events .events-container .per-event.live .texts h4 .label {
    background-color: var(--primary);
    color: #fff
}

.events .events-container .per-event.live .event-con .img .timer {
    background-color: #ec335a;
    color: #fff
}

.events .events-container .per-event.ended .texts h4 .label {
    background-color: #5c5c5c;
    color: #fff
}

.events .events-container .per-event.upcoming .texts h4 .label {
    background-color: #6406b7;
    color: #fff
}

.events .events-container .per-event.upcoming .event-con .img .timer {
    background-color: #6406b7;
    color: #fff
}

@media(min-width: 50px)and (max-width: 299px) {
    .events .events-container {
        grid-template-columns: repeat(1, 1fr)
    }

    .events .events-container .per-event .event-con {
        flex-direction: column;
        gap: 1.5em
    }

    .events .events-container .per-event .event-con .img {
        width: 100%;
        height: auto;
        aspect-ratio: 1/1
    }
}

@media(min-width: 300px)and (max-width: 779px) {
    .events .events-container {
        grid-template-columns: repeat(1, 1fr)
    }
}

@media(min-width: 780px)and (max-width: 1003px) {
    .events .events-container {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 1004px)and (max-width: 1211px) {
    .events .events-container {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 1212px)and (max-width: 1411px) {
    .events .events-container {
        grid-template-columns: repeat(3, 1fr)
    }
}

.show-partner-coupons {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
    margin-top: 8em;
    width: 100%;
    min-height: 50vh
}

.show-partner-coupons .header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
    flex-wrap: wrap;
    width: 100%
}

.show-partner-coupons .header h1 {
    font-size: 1.5em;
    font-weight: bolder;
    margin: 0;
    padding: 0;
    padding-top: .3em;
    color: var(--light-text-color)
}

.show-partner-coupons .header .btns {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em;
    flex-wrap: wrap
}

.show-partner-coupons .header .btns .btn {
    background-color: #ec335a;
    color: #fff;
    font-size: .9em;
    border-radius: 50px;
    padding: .6em 1em .4em 1em
}

.show-partner-coupons .options-con {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    width: 100%
}

.show-partner-coupons .options-con .input {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    border-radius: 80px;
    background-color: var(--box);
    width: 400px;
    padding: 0;
    padding-left: .3em
}

.show-partner-coupons .options-con .input input {
    flex: 1;
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    padding: 1em 1em .7em 1em;
    margin: 0;
    color: var(--light-text-color)
}

.show-partner-coupons .options-con .input i {
    font-size: 1.2em;
    cursor: pointer;
    background-color: #ec335a;
    color: #fff;
    border-radius: 50px;
    width: 50px;
    text-align: center;
    padding: .4em .6em;
    user-select: none
}

.show-partner-coupons .options-con .categories {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    user-select: none;
    flex: 1
}

.show-partner-coupons .options-con .categories .per-category {
    background-color: rgba(0, 0, 0, 0);
    padding: .6em 1em .4em 1em;
    border-radius: 50px;
    font-size: .9em;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    cursor: pointer;
    color: var(--light-text-color)
}

.show-partner-coupons .options-con .categories .per-category i {
    margin-top: -0.1em
}

.show-partner-coupons .options-con .categories .per-category.active {
    background-color: rgba(236, 51, 90, .1254901961);
    color: #ec335a
}

.show-partner-coupons .coupons-con {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    width: 100%;
    margin-top: 2em;
    gap: 1.5em
}

.show-partner-coupons .coupons-con .coupon-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 1.5em;
    border: 1px solid rgba(31, 31, 31, .1019607843);
    background-color: var(--lighter-box);
    border-radius: 12px;
    width: 100%
}

.show-partner-coupons .coupons-con .coupon-item img {
    width: 70px;
    height: 70px;
    border-radius: 17px;
    margin-top: -2.5em;
    background-color: var(--box);
    box-shadow: 0 7px 13px rgba(0, 0, 0, .0823529412)
}

.show-partner-coupons .coupons-con .coupon-item h4 {
    font-size: 16px;
    font-weight: 500;
    margin: 0;
    margin-top: 1.7em;
    color: var(--light-text-color)
}

.show-partner-coupons .coupons-con .coupon-item p {
    font-size: 15px;
    margin: 0;
    margin-top: .7em;
    opacity: .7;
    flex: 1;
    color: var(--text-color)
}

.show-partner-coupons .coupons-con .coupon-item a {
    background-color: var(--primary);
    color: #fff;
    padding: .5em 1.5em .3em 1.5em;
    border-radius: 30px;
    margin-top: 1em;
    width: 100%;
    text-align: center;
    font-weight: 600;
    font-size: .9em
}

.show-partner-coupons .pagination-con {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 1em;
    margin-top: 2em
}

.show-partner-coupons .pagination-con .pagination {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em
}

.show-partner-coupons .pagination-con .pagination .page-item .page-link {
    border-radius: 5px;
    color: #ec335a
}

.show-partner-coupons .pagination-con .pagination .page-item .page-link:hover {
    color: #ec335a
}

.show-partner-coupons .pagination-con .pagination .page-item.active .page-link {
    background-color: #ec335a;
    border: 1px solid #ec335a;
    color: #fff
}

@media(min-width: 992px)and (max-width: 1399px) {
    .show-partner-coupons .coupons-con {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .show-partner-coupons .coupons-con {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(min-width: 576px)and (max-width: 767px) {
    .show-partner-coupons .coupons-con {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 301px)and (max-width: 575px) {
    .show-partner-coupons .options-con .input {
        width: 100%
    }

    .show-partner-coupons .coupons-con {
        grid-template-columns: repeat(2, 1fr);
        gap: .5em
    }

    .show-partner-coupons .coupons-con .coupon-item {
        margin-top: 1.6em;
        padding: 1em
    }
}

@media(min-width: 50px)and (max-width: 300px) {
    .show-partner-coupons .options-con .input {
        width: 100%
    }

    .show-partner-coupons .coupons-con {
        grid-template-columns: repeat(1, 1fr)
    }
}

.mainBoxes {
    margin-bottom: 50px;
    padding: 0px 10px
}

.mainBoxes .header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mainBoxes .header h3 {
    font-size: 24px;
    font-weight: bolder;
    margin-bottom: 1em
}

.mainBoxes .header .most span {
    color: #6b6c72
}

.mainBoxes .header .view {
    cursor: pointer;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity))
}

.mainBoxes .header .choose {
    display: flex;
    align-items: center;
    gap: 1.5em;
    margin-bottom: 30px
}

.mainBoxes .header .choose span {
    cursor: pointer;
    position: relative;
    padding: 0 .5em;
    padding-bottom: .3em;
    text-align: center
}

.mainBoxes .header .choose span.active {
    color: var(--primary);
    font-weight: bold
}

.mainBoxes .header .choose span.active::before {
    content: "";
    width: 100%;
    height: 3px;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary);
    border-radius: 1em
}

.mainBoxes .box {
    background-color: #242627;
    border-radius: 25px;
    padding: 0px;
    width: 176px
}

.mainBoxes .box .mainImg {
    width: 100%;
    height: 163px;
    border-top-right-radius: 25px;
    border-top-left-radius: 25px;
    -o-object-fit: cover;
    object-fit: cover
}

.mainBoxes .box .name {
    width: 100%;
    margin-bottom: 7px;
    display: flex;
    flex-direction: column
}

.mainBoxes .box .name span {
    font-size: 12px
}

.mainBoxes .box .name .cardName {
    font-size: 15px
}

.mainBoxes .box .name .cardType {
    display: flex;
    align-items: center;
    gap: 5px
}

.mainBoxes .box .text {
    width: 100%;
    color: #fff;
    padding: 15px;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px
}

.mainBoxes .box .text .star {
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 13px;
    gap: 5px;
    justify-content: flex-end
}

.mainBoxes .box .text .star span {
    color: #f8c346
}

.mainBoxes .box .text button {
    width: 100%;
    background-color: var(--primary);
    color: #fff;
    padding: 8px 20px;
    border: none;
    font-size: 13px;
    outline: none;
    border-radius: 25px;
    cursor: pointer;
    font-weight: bold
}

.mainBoxes.trending {
    position: relative
}

.mainBoxes.trending .back-img {
    position: absolute;
    top: 180px;
    left: -110px;
    z-index: -1111
}

.mainBoxes.trending .tabcontent {
    display: none;
    grid-template-columns: repeat(5, 1fr);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5em;
    margin: 0
}

.mainBoxes.trending .tabcontent .box {
    width: 100%;
    aspect-ratio: 1/1.6;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    border-radius: 17px;
    overflow: hidden
}

.mainBoxes.trending .tabcontent .box .text {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 1em;
    background-color: rgba(0, 0, 0, .1254901961);
    backdrop-filter: blur(55px);
    -webkit-backdrop-filter: blur(55px);
    color: #fff;
    display: flex;
    flex-direction: column
}

.mainBoxes.trending .tabcontent .box .text .more {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    width: 100%;
    color: #fff
}

.mainBoxes.trending .tabcontent .box .text .more .ratings {
    flex: 1;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1.3em
}

.mainBoxes.trending .tabcontent .box .text .more .ratings .imgs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 0
}

.mainBoxes.trending .tabcontent .box .text .more .ratings .imgs .perImg {
    width: 26px;
    height: 26px;
    margin-left: -0.8em;
    border-radius: 200%;
    border: 2px solid #fff;
    background-color: #fff;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.mainBoxes.trending .tabcontent .box .text .more .ratings .ratings-text {
    font-size: 11px;
    color: #fff;
    opacity: .7
}

.mainBoxes.trending .tabcontent .box .text .more button {
    background-color: #fff;
    color: #000;
    font-size: .8em;
    padding: .6em 1em .4em 1em;
    width: auto;
    font-weight: 500
}

@media(min-width: 50px)and (max-width: 500px) {
    .mainBoxes.trending .tabcontent {
        grid-template-columns: repeat(1, 1fr)
    }

    .mainBoxes.trending .tabcontent .box {
        aspect-ratio: 1/1
    }
}

@media(min-width: 501px)and (max-width: 767px) {
    .mainBoxes.trending .tabcontent {
        grid-template-columns: repeat(2, 1fr);
        gap: .5em
    }

    .mainBoxes.trending .tabcontent .box {
        aspect-ratio: 1/1.2
    }
}

@media(min-width: 768px)and (max-width: 1023px) {
    .mainBoxes.trending .tabcontent {
        grid-template-columns: repeat(2, 1fr)
    }

    .mainBoxes.trending .tabcontent .box {
        aspect-ratio: 1/1.2
    }
}

@media(min-width: 1024px)and (max-width: 1200px) {
    .mainBoxes.trending .tabcontent {
        grid-template-columns: repeat(4, 1fr);
        gap: .5em
    }

    .mainBoxes.trending .tabcontent .box {
        aspect-ratio: 1/1.2
    }
}

@media(min-width: 1201px)and (max-width: 1400px) {
    .mainBoxes.trending .tabcontent {
        grid-template-columns: repeat(4, 1fr)
    }

    .mainBoxes.trending .tabcontent .box {
        aspect-ratio: 1/1.2
    }
}

@media(max-width: 420px) {
    .offers h3 {
        font-size: 19px
    }

    .mainBoxes .header h3 {
        font-size: 19px
    }
}

.tab-panel {
    display: none;
    padding: 20px
}

.tab-panel.active {
    display: block
}

.twelve {
    position: relative;
    color: #fff;
    margin-top: 30px;
    padding-top: 30px
}

.twelve .back-img {
    position: absolute;
    top: -200px;
    right: -110px;
    z-index: -11;
    transform: scaleX(-1)
}

.twelve::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    top: 0;
    right: 0;
    background-color: #fff
}

.twelve .row p {
    color: #97989f
}

.twelve .back {
    position: absolute;
    top: 0;
    right: -100px
}

.mobile-app {
    background-color: #ec335a;
    color: #fff;
    display: flex;
    align-items: center;
    height: 260px;
    z-index: 11;
    justify-content: space-evenly;
    margin-bottom: 50px;
    border-radius: 25px;
    position: relative;
    text-align: center;
    overflow: hidden
}

.mobile-app .mobile-bg-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 350px;
    z-index: 0
}

@media(max-width: 995px) {
    .mobile-app {
        flex-direction: column;
        justify-content: center;
        gap: 40px;
        padding: 20px;
        height: 100%
    }

    .mobile-app .stores .store img {
        width: 150px
    }
}

@media(max-width: 575px) {
    .mobile-app-container {
        padding: 0
    }

    .mobile-app-container .mobile-app {
        border-radius: 0;
        margin-bottom: 0
    }

    .mobile-app-container .mobile-app .mobile-bg-pattern {
        display: none
    }
}

footer {
    padding: 20px 0;
    background-color: var(--background);
    margin-top: 20px;
    position: relative;
    top: 24px
}

footer .upper-sec {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: 3em;
    flex-wrap: wrap
}

footer .first-sec {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
    width: 100px
}

footer .first-sec .footer-logo {
    width: 70px
}

footer .first-sec .footer-logo-light {
    display: block !important
}

footer .first-sec .footer-logo-dark {
    display: none !important
}

footer .first-sec .icons {
    display: flex;
    align-items: center;
    gap: 1em
}

footer .second-sec {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em
}

footer .second-sec .links {
    display: flex;
    flex-direction: column;
    gap: 1em
}

footer .link-section-title {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--light-text-color)
}

footer .payment-mehtods {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em
}

footer .payment-mehtods img {
    width: 100%;
    max-width: 60px;
    max-height: 40px;
    height: auto;
    object-fit: contain;
    object-position: center;
    background-color: white;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 4px
}

footer .footer-app-section {
    display: flex;
    align-items: center;
    gap: 1em;
    flex: unset
}

footer .footer-app-section .app {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 2em
}

footer .footer-app-section .stores {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em
}

footer .footer-app-section img {
    width: 170px
}

footer a {
    text-decoration: none;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity))
}

footer .text-footer {
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-between;
    margin-top: 50px;
    padding: 2em 0;
    border-top: 1px solid rgba(33, 33, 33, .1882352941);
    text-align: center;
    width: 100%;
    box-sizing: border-box
}

footer .text-footer span {
    width: 100%;
    box-sizing: border-box
}

footer .only-mobile-sec {
    display: none
}

@media(min-width: 50px)and (max-width: 575px) {
    footer .upper-sec {
        flex-direction: column;
        gap: 2em
    }

    footer .first-sec {
        display: none
    }

    footer .second-sec .links {
        flex-direction: row;
        flex-wrap: wrap;
        gap: .5em
    }

    footer .second-sec .links a {
        text-wrap: nowrap;
        font-weight: normal;
        font-size: .9em
    }

    footer .third-sec .payment-mehtods {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5em
    }

    footer .third-sec .payment-mehtods img {
        width: 100%;
        max-width: 60px;
        max-height: 40px;
        height: auto;
        object-fit: contain;
        object-position: center;
        background-color: white;
        border: 1px solid #000;
        border-radius: 4px;
        padding: 4px
    }

    footer .footer-app-section .app {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: unset;
        gap: 1em
    }

    footer .footer-app-section .stores {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em
    }

    footer .footer-app-section .stores img {
        width: 150px
    }

    footer .only-mobile-sec {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        gap: 1em;
        flex-wrap: wrap
    }

    footer .only-mobile-sec .footer-logo {
        width: 65px
    }

    footer .only-mobile-sec .footer-logo-light-mobile {
        display: block !important
    }

    footer .only-mobile-sec .footer-logo-dark-mobile {
        display: none !important
    }

    footer .only-mobile-sec .icons {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: .7em
    }
}

@media(min-width: 576px)and (max-width: 767px) {
    footer .upper-sec {
        gap: 2em
    }

    footer .first-sec {
        gap: 1em
    }

    footer .second-sec {
        min-width: 100px
    }

    footer .third-sec .payment-mehtods {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: .5em
    }

    footer .third-sec .payment-mehtods img {
        width: 100%;
        max-width: 60px;
        max-height: 40px;
        height: auto;
        object-fit: contain;
        object-position: center;
        background-color: white;
        border: 1px solid #000;
        border-radius: 4px;
        padding: 4px
    }

    footer .footer-app-section .app {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: unset;
        gap: 1em
    }

    footer .footer-app-section .stores {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em
    }

    footer .footer-app-section .stores img {
        width: 150px
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    footer .upper-sec {
        gap: 2em
    }

    footer .first-sec {
        gap: 1em
    }

    footer .second-sec {
        min-width: 170px
    }

    footer .footer-app-section .app {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
        text-align: unset;
        gap: 1em
    }

    footer .footer-app-section .stores {
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        gap: 1em
    }

    footer .footer-app-section .stores img {
        width: 150px
    }
}

.show-category {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4em;
    margin-top: 8em;
    margin-bottom: 5em;
    min-height: 50vh
}

.show-category .sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
    width: 270px;
    background-color: var(--lighter-box);
    border-radius: 17px;
    padding: 1.2em 1em
}

.show-category .sidebar .sidebar-item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    color: var(--text-color);
    text-decoration: none;
    text-align: right;
    font-size: .85em;
    padding: .5em 1em;
    border-radius: 20px
}

.show-category .sidebar .sidebar-item.active {
    background-color: rgba(0, 0, 0, .062745098)
}

.show-category .sidebar .sidebar-item .sidebar-item-image {
    width: 20px;
    height: 20px
}

.show-category .sidebar .sidebar-item .sidebar-item-name {
    flex: 1
}

.show-category .sidebar .sidebar-item .sidebar-item-count {
    opacity: .8
}

.show-category .products-con {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    flex-wrap: wrap;
    flex: 1
}

.show-category .products-con h1 {
    font-size: 1.4em;
    font-weight: 600;
    color: var(--light-text-color)
}

.show-category .products-con .boxes {
    gap: 1em;
    flex-wrap: wrap;
    width: 100%;
    display: grid;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    grid-template-columns: repeat(4, 1fr)
}

.show-category .products-con .boxes .box {
    flex: 1
}

.show-category .products-con .boxes .box .mainimg {
    width: 100%;
    height: auto;
    aspect-ratio: 1/1;
    border-radius: 14px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden
}

.show-category .products-con .boxes .box .mainimg .rating-badge {
    position: absolute;
    bottom: 10px;
    left: 10px
}

.show-category .products-con .boxes .box .mainimg .cashback {
    background: linear-gradient(90deg, #a41b8b 0%, #5c03bc 100%, #861d33 100.01%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 20px;
    padding: .5em 1.1em .3em 1.1em
}

.show-category .products-con .boxes .box .mainimg .cashback .number {
    font-weight: 500;
    font-size: .9em;
    line-height: 1.2
}

.show-category .products-con .boxes .box .mainimg .cashback .text {
    font-weight: 300;
    font-size: .8em;
    line-height: 1.2
}

.show-category .products-con .boxes .box h2 {
    font-size: 1em;
    font-weight: 400;
    margin-top: .7em;
    color: var(--light-text-color)
}

@media(min-width: 50px)and (max-width: 300px) {
    .show-category {
        flex-direction: column-reverse
    }

    .show-category .sidebar {
        width: 100%
    }

    .show-category .searchBar {
        width: 100%
    }

    .show-category .products-con {
        width: 100%
    }

    .show-category .products-con .boxes {
        grid-template-columns: repeat(1, 1fr)
    }
}

@media(min-width: 301px)and (max-width: 575px) {
    .show-category {
        flex-direction: column-reverse
    }

    .show-category .sidebar {
        width: 100%
    }

    .show-category .searchBar {
        width: 100%
    }

    .show-category .products-con {
        width: 100%
    }

    .show-category .products-con .boxes {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 576px)and (max-width: 767px) {
    .show-category {
        flex-direction: column-reverse
    }

    .show-category .sidebar {
        width: 100%
    }

    .show-category .products-con {
        width: 100%
    }

    .show-category .products-con .boxes {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .show-category .products-con .boxes {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 992px)and (max-width: 1199px) {
    .show-category .products-con .boxes {
        grid-template-columns: repeat(3, 1fr)
    }
}

.maingame {
    margin-top: 80px;
    margin-bottom: 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 120vh
}

.maingame .big-img {
    width: 100%
}

.maingame .back1,
.maingame .back2 {
    position: absolute;
    z-index: -11
}

.maingame .back1 {
    top: -150px;
    right: -110px;
    transform: scaleX(-1)
}

.maingame .back2 {
    top: 40%;
    left: -180px
}

.maingame .pubg-cards {
    margin-top: 50px;
    display: flex;
    z-index: 11
}

.maingame .pubg-cards .box {
    color: #fff;
    display: flex;
    align-items: center;
    background-color: #242627;
    border-radius: 38px
}

.maingame .pubg-cards .box .mainimg {
    width: 272px;
    height: 272px;
    border-top-right-radius: 38px;
    border-bottom-right-radius: 38px
}

.maingame .pubg-cards .box .text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    padding: 20px
}

.maingame .pubg-cards .box .text p {
    width: 230px;
    white-space: normal;
    word-wrap: break-word
}

.maingame .pubg-cards .box .text .header {
    display: flex;
    justify-content: space-between;
    width: 100%
}

.maingame .pubg-cards .box .text .header .head span {
    color: #6b6c72
}

.maingame .pubg-cards .box .text .header .star {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px
}

.maingame .pubg-cards .box .text .header .star span {
    color: #f8c346
}

.maingame .pubg-cards .box .text a {
    background-color: var(--primary);
    color: #fff;
    padding: 10px 50px;
    border: none;
    font-size: 15px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.maingame .row p {
    color: #fff !important
}

.maingame .row .pagination .page-item {
    margin: 0px;
    color: var(--primary)
}

.maingame .row .pagination .page-item .page-link {
    color: var(--primary)
}

.maingame .row .pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--primary);
    border: 1px solid #dee2e6
}

@media(max-width: 1300px) {
    .maingame .pubg-cards .box .text p {
        width: 240px
    }
}

@media(max-width: 1000px) {
    .maingame .pubg-cards .box .text p {
        width: 300px
    }
}

@media(max-width: 777px) {
    .maingame .pubg-cards .box {
        flex-direction: column
    }

    .maingame .pubg-cards .box .mainimg {
        width: 100%
    }

    .maingame .pubg-cards .box .text {
        padding: 20px
    }
}

@media(max-width: 820px) {
    .maingame .box {
        margin: 20px 0px
    }

    .maingame .big-img {
        width: 800px
    }
}

@media(max-width: 600px) {
    .maingame .big-img {
        padding: 0px 30px;
        width: 550px
    }
}

.input {
    position: relative;
    padding: 15px;
    border-radius: 12px;
    display: flex;
    align-items: center
}

.input.phone i {
    color: var(--primary)
}

.input.phone .number {
    padding-left: 8px;
    width: 30%
}

.input.phone input {
    width: 80%;
    color: var(--light-text-color)
}

.input input,
.input textarea,
.input select {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    color: var(--light-text-color)
}

.input label {
    position: absolute;
    z-index: 1;
    top: -1.6em;
    right: 0
}

.send-gift {
    color: #fff;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    transition: .3s;
    border-radius: 20px
}

.send-gift select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23EE3B59'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 16px;
    background-position: calc(100% - (100% - 20px)) 1.1em;
    background-repeat: no-repeat
}

.send-gift select option:checked {
    background-color: var(--primary);
    color: #fff
}

.send-gift select option {
    background-color: #fff;
    color: #555
}

.send-gift.active {
    border: 1px solid #ccc
}

.send-gift .head {
    background-color: var(--box);
    color: var(--light-text-color);
    display: flex;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 20px;
    border-radius: 20px
}

.send-gift .head input[type=checkbox] {
    border: 1px solid var(--border);
    width: 18px;
    height: 18px;
    border-radius: 3px
}

.send-gift .head input[type=checkbox]:checked {
    background-color: var(--primary);
    color: var(--primary)
}

.send-gift .head input[type=checkbox]:checked .head span {
    display: none
}

.send-gift .gift-details {
    padding: 20px;
    display: none;
    flex-direction: column;
    gap: 20px
}

.send-gift .gift-details .mainbox {
    margin: 20px 0px;
    background-color: var(--box);
    color: var(--light-text-color);
    padding: 20px;
    border-radius: 20px
}

.send-gift .gift-details .mainbox input[type=text],
.send-gift .gift-details .mainbox input[type=tel],
.send-gift .gift-details .mainbox input[type=email],
.send-gift .gift-details .mainbox input[type=date],
.send-gift .gift-details .mainbox select,
.send-gift .gift-details .mainbox textarea {
    width: 100%;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--border);
    resize: none
}

.accordion {
    border: none;
    overflow: hidden
}

.accordion h5 {
    color: var(--light-text-color)
}

.accordion .accordion-header {
    width: 280px;
    margin: 5px auto;
    background-color: var(--box);
    color: var(--light-text-color);
    border: 1px solid var(--primary)
}

.accordion .accordion-item {
    color: var(--text-color);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    border-radius: 25px
}

.accordion .accordion-item .accordion-body {
    background-color: var(--box);
    color: var(--text-color);
    border-radius: 20px
}

.accordion .accordion-item .accordion-body .pay {
    margin-top: 20px;
    display: flex;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    width: 100%
}

.accordion .accordion-item .accordion-body .pay p {
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 5px
}

.accordion .accordion-item .accordion-body .pay p span {
    font-size: 21px;
    color: var(--light-text-color);
    font-weight: bold
}

.accordion .accordion-item .accordion-body .method .inputs {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.accordion .accordion-item .accordion-body .method .inputs .inp {
    background-color: var(--lighter-box);
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 18px;
    padding: 15px
}

.accordion .accordion-item .accordion-body .method .inputs .inp .image {
    display: flex;
    align-items: center;
    gap: 15px
}

.accordion .accordion-item .accordion-body .method .inputs .inp .image img {
    width: 32px !important;
    height: 32px !important;
    min-width: 32px;
    min-height: 32px;
    background-color: white;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 4px;
    object-fit: contain;
    object-position: center;
    display: block;
    box-sizing: border-box
}

.accordion .accordion-item .accordion-body .method .inputs .inp .image .big-imgs img {
    width: 40px !important;
    height: 28px !important;
    min-width: 40px;
    min-height: 28px;
    background-color: white;
    border: 1px solid #000;
    border-radius: 4px;
    padding: 3px;
    object-fit: contain;
    object-position: center;
    display: block;
    box-sizing: border-box
}

.accordion .accordion-item .accordion-body .method .inputs .inp .image.multi {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.accordion .accordion-item .accordion-body .method .inputs .inp .image.multi .first,
.accordion .accordion-item .accordion-body .method .inputs .inp .image.multi .second {
    display: flex;
    align-items: center;
    gap: 10px
}

.accordion .accordion-item .accordion-body .method .inputs input[type=radio] {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    accent-color: var(--primary)
}

.accordion .accordion-item .accordion-body .method .payment-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    border: 1px solid var(--primary);
    padding: 10px;
    border-radius: 15px;
    margin-top: 20px;
    justify-content: space-between
}

.accordion .accordion-item .accordion-body .method .payment-toggle .form-switch .form-check-input {
    background-color: var(--lighter-box);
    border-color: var(--border) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ee3b59'/></svg>") !important
}

.accordion .accordion-item .accordion-body .method .payment-toggle .form-switch .form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--border) !important;
    outline: 0 !important;
    box-shadow: 0 0 0 0 rgba(0, 0, 0, 0) !important;
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23ffffff'/></svg>") !important
}

.accordion .accordion-item .accordion-body .method .payment-toggle .form-check-label {
    font-size: 16px
}

.accordion .accordion-item .accordion-body .method .payment-toggle .image {
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 5px
}

.accordion .accordion-item .accordion-body .method .payment-toggle .image p {
    margin-top: 18px;
    font-size: 13px
}

.accordion .accordion-item .accordion-body .method .payment-toggle .image p span {
    font-weight: bold;
    font-size: 15px
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle .word {
    font-size: 13px
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle .enabled {
    display: none;
    font-size: 13px;
    color: var(--primary)
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle .main-toggle {
    display: inline-block;
    position: relative;
    width: 40px;
    height: 20px;
    border-radius: 20px;
    background-color: #000;
    cursor: pointer;
    transition-duration: 1s
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle .main-toggle::before {
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--primary);
    transition-duration: 1s
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle.active .word {
    display: none
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle.active .enabled {
    display: inline-block
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle.active .main-toggle {
    transition-duration: .2s;
    background-color: var(--primary)
}

.accordion .accordion-item .accordion-body .method .payment-toggle .toggle.active .main-toggle::before {
    transition-duration: .2s;
    right: 60%;
    background-color: #97989f;
    border: 1px solid #fff
}

.accordion .accordion-item .accordion-header {
    border-radius: 15px
}

.accordion .accordion-item .accordion-header button {
    border-radius: 15px;
    outline: none;
    border: none;
    background: rgba(0, 0, 0, 0);
    font-size: 18px;
    box-shadow: none;
    color: #fff
}

.accordion .accordion-item .accordion-header button span {
    color: #222;
    font-weight: bold
}

.accordion .accordion-button:focus {
    box-shadow: none;
    border: none;
    box-shadow: none
}

.accordion .accordion-button:not(.collapsed)::after {
    background-image: none;
    content: "";
    font-family: fontawesome;
    width: auto;
    height: auto;
    font-size: 25px;
    color: var(--primary)
}

.accordion .accordion-button.collapsed::after {
    background-image: none;
    content: "";
    font-family: fontawesome;
    width: auto;
    height: auto;
    color: var(--primary);
    font-size: 25px
}

.voucher-container {
    margin-top: 130px;
    position: relative
}

.voucher-container .back-img {
    position: absolute;
    top: -100px;
    right: -120px;
    z-index: -11
}

.voucher-container .receiver .img-btn>input {
    display: none
}

.voucher-container .receiver .img-btn>img {
    cursor: pointer;
    border: 5px solid rgba(0, 0, 0, 0)
}

.voucher-container .receiver .img-btn>input:checked+img {
    border: 1px solid var(--primary)
}

.voucher-container button {
    background-color: var(--primary);
    color: #fff;
    padding: 10px 60px;
    border: none;
    font-size: 16px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.voucher-container .or {
    margin: 50px 0px;
    width: 280px;
    color: #fff;
    position: relative
}

.voucher-container .or.direct {
    width: 100%
}

.voucher-container .or span {
    background-color: #111315;
    z-index: 11;
    padding: 10px;
    border-radius: 50%;
    font-weight: bold
}

.voucher-container .or::before {
    content: "";
    width: 100%;
    top: 50%;
    right: 0;
    height: 1px;
    background-color: #707070;
    position: absolute;
    z-index: -1
}

.voucher-container .select-voucher {
    position: relative
}

.voucher-container .select-voucher a {
    color: var(--text-color)
}

.voucher-container .select-voucher form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2.5em
}

.voucher-container .select-voucher .mainbox {
    width: 100%
}

.voucher-container .select-voucher .mainbox.countries-con .rcon {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%
}

.voucher-container .select-voucher .mainbox.countries-con .rcon .chip {
    border-radius: 10px;
    padding: .55em 1em;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: .5em;
    border: unset;
    box-shadow: unset;
    color: var(--text-color);
    background-color: var(--lighter-box)
}

.voucher-container .select-voucher .mainbox.countries-con .rcon .chip.active {
    background-color: var(--primary);
    color: #fff
}

.voucher-container .select-voucher .mainbox.countries-con .rcon .chip img {
    width: 20px;
    aspect-ratio: 1/1;
    border-radius: 100%
}

.voucher-container .select-voucher .mainbox.countries-con .rcon .chip span {
    margin-bottom: -0.2em
}

.voucher-container .select-voucher .mainbox.types-con .rcon {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%
}

.voucher-container .select-voucher .mainbox.types-con .rcon .chip {
    border-radius: 10px;
    padding: 8px 15px;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    gap: .7em;
    border: unset;
    box-shadow: unset;
    color: var(--text-color);
    background-color: var(--lighter-box)
}

.voucher-container .select-voucher .mainbox.types-con .rcon .chip svg path {
    fill: #666
}

.voucher-container .select-voucher .mainbox.types-con .rcon .chip.active {
    background-color: var(--primary);
    color: #fff
}

.voucher-container .select-voucher .mainbox.types-con .rcon .chip.active svg path {
    fill: #fff
}

.voucher-container .select-voucher .mainbox.types-con .rcon .chip .texts {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0em;
    margin-bottom: -0.2em
}

.voucher-container .select-voucher .mainbox.types-con .rcon .chip .texts span {
    font-size: .9em
}

.voucher-container .select-voucher .mainbox.types-con .rcon .chip .texts span.sub-title {
    opacity: .8;
    font-size: .8em
}

.voucher-container .select-voucher .mainbox.events {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em;
    width: 100%;
    margin: unset
}

.voucher-container .select-voucher .mainbox.events .events-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%
}

.voucher-container .select-voucher .mainbox.events .events-header h3 {
    font-weight: 500
}

.voucher-container .select-voucher .mainbox.events .events-header a {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    color: var(--text-color)
}

.voucher-container .select-voucher .mainbox.events .events-header a svg {
    margin-top: -0.1em
}

.voucher-container .select-voucher .mainbox.events .events-header a svg path {
    fill: var(--text-color)
}

.voucher-container .select-voucher .mainbox.events .events-header a:hover {
    color: var(--primary)
}

.voucher-container .select-voucher .mainbox.events .events-header a:hover svg path {
    fill: var(--primary)
}

.voucher-container .select-voucher .mainbox.events .boxes {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1.5em;
    width: 100%
}

@media(min-width: 780px) {
    .voucher-container .select-voucher .mainbox.events .boxes {
        grid-template-columns: repeat(2, 1fr)
    }
}

.voucher-container .select-voucher .mainbox.events .boxes .img-btn {
    min-width: unset
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event {
    box-shadow: 0px 16px 12px -8px rgba(101, 93, 122, .0666666667);
    box-shadow: 0px 8px 24px 0px rgba(101, 93, 122, .0666666667);
    border-radius: 12px;
    position: relative;
    padding: 1.5px;
    background: rgba(0, 0, 0, 0)
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    padding: calc(.5em + 1px);
    gap: .5em;
    background: var(--lighter-box);
    border-radius: 10px;
    width: 100%
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .img {
    width: 105px;
    height: 105px;
    border-radius: 5px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .img .timer {
    position: absolute;
    bottom: 0;
    left: 0;
    margin: 7px;
    width: calc(100% - 14px);
    background-color: var(--primary);
    color: #fff;
    border-radius: 5px;
    padding: .21em;
    font-family: sans-serif;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .08em
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .img .timer .part {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .img .timer .part .number {
    font-size: .9em;
    font-weight: 500;
    line-height: 1.1
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .img .timer .part .name {
    font-size: .55em;
    font-weight: 300;
    line-height: 1.1
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .img .timer .sep {
    font-size: 1.6em;
    font-weight: 600;
    font-family: "Avenir Next Condensed";
    line-height: .5
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .texts {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .3em
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .texts h4 {
    font-size: 1.1em;
    font-weight: 500;
    color: var(--light-text-color);
    line-height: 1.2;
    padding: 0;
    margin: 0;
    width: 100%;
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: .4em
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .texts h4 .label {
    font-size: .65em;
    font-weight: normal;
    padding: .4em .7em .2em .7em;
    border-radius: 7px
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .texts p {
    font-size: .8em;
    font-weight: 400;
    padding: 0;
    margin: 0;
    opacity: .8;
    color: var(--text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .texts .expiry {
    font-size: .8em;
    font-weight: 400;
    color: var(--text-color)
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event .event-con .texts .expiry strong {
    font-weight: bold
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event.live {
    background: linear-gradient(180deg, #6406b7 0%, #ec335a 100%)
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event.live .texts h4 .label {
    background-color: var(--primary);
    color: #fff
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event.live .event-con .img .timer {
    background-color: #ec335a;
    color: #fff
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event.ended .texts h4 .label {
    background-color: #5c5c5c;
    color: #fff
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event.upcoming .texts h4 .label {
    background-color: #6406b7;
    color: #fff
}

.voucher-container .select-voucher .mainbox.events .boxes .per-event.upcoming .event-con .img .timer {
    background-color: #6406b7;
    color: #fff
}

.voucher-container .select-voucher .mainbox .show-accounts-button {
    color: var(--primary);
    font-size: .8em;
    cursor: pointer;
    user-select: none
}

@media(min-width: 300px)and (max-width: 767px) {
    .voucher-container .select-voucher .mainbox.events .boxes {
        gap: .5em
    }

    .voucher-container .select-voucher .mainbox.events .boxes .box {
        aspect-ratio: unset;
        height: 200px
    }

    .voucher-container .select-voucher .mainbox.events .boxes .box .text {
        padding: .7em;
        gap: .4em
    }

    .voucher-container .select-voucher .mainbox.events .boxes .box .text h4 {
        font-size: 1em;
        line-height: 1.2
    }

    .voucher-container .select-voucher .mainbox.events .boxes .box .text p {
        font-size: .75em
    }

    .voucher-container .select-voucher .mainbox.events .boxes .box .text .expiry {
        font-size: .75em
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .voucher-container .select-voucher .mainbox.events .boxes {
        gap: .5em
    }

    .voucher-container .select-voucher .mainbox.events .boxes .box {
        aspect-ratio: 1/.7
    }
}

@media(min-width: 992px)and (max-width: 1199px) {
    .voucher-container .select-voucher .mainbox.events .boxes {
        gap: .8em
    }

    .voucher-container .select-voucher .mainbox.events .boxes .box {
        aspect-ratio: 1/.9
    }
}

.voucher-container .select-voucher .mainbox.common h3 {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: .5em;
    font-size: 1.25em;
    font-weight: 400;
    color: var(--light-text-color)
}

.voucher-container .select-voucher .mainbox.account .info span {
    color: var(--primary)
}

.voucher-container .select-voucher .mainbox.account .inputs {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    width: 100%;
    margin-top: 1em
}

.voucher-container .select-voucher .mainbox.account .inputs input,
.voucher-container .select-voucher .mainbox.account .inputs select {
    width: 100%;
    border-radius: 7px;
    background-color: var(--box);
    color: var(--text-color) !important;
    outline: none;
    appearance: none;
    border: none;
    padding: .6em .9em;
    font-family: sans-serif;
    min-width: 200px
}

@media(min-width: 50px)and (max-width: 300px) {
    .voucher-container .select-voucher .mainbox.account .inputs {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }

    .voucher-container .select-voucher .mainbox.account .inputs input,
    .voucher-container .select-voucher .mainbox.account .inputs select {
        min-width: unset;
        width: 100%;
        margin: 0
    }
}

.voucher-container .select-voucher .mainbox.amount {
    margin-top: 30px
}

.voucher-container .select-voucher .mainbox.amount .amount-box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px
}

.voucher-container .select-voucher .mainbox.amount .amount-box .img-btn>input {
    display: none
}

.voucher-container .select-voucher .mainbox.amount .amount-box .img-btn>input:checked+.box {
    background-color: #242627;
    border: 1px solid var(--primary)
}

.voucher-container .select-voucher .mainbox.amount .amount-box .box {
    color: #fff;
    border-radius: 29px;
    width: 156px;
    height: 58px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #111315;
    cursor: pointer
}

.voucher-container .select-voucher .mainbox.amount .amount-box .box.active {
    background-color: #242627;
    border: 1px solid var(--primary)
}

.voucher-container .select-voucher .mainbox.amount .amount-box .box.active span {
    font-weight: bold
}

.voucher-container .select-voucher .mainbox .add {
    background-color: var(--primary);
    width: 77px;
    height: 26px;
    padding: 5px 7px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer
}

.voucher-container .select-voucher .mainbox .boxes {
    display: grid;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px
}

@media(min-width: 50px)and (max-width: 300px) {
    .voucher-container .select-voucher .mainbox .boxes {
        grid-template-columns: repeat(1, 1fr)
    }
}

@media(min-width: 301px)and (max-width: 575px) {
    .voucher-container .select-voucher .mainbox .boxes {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 576px)and (max-width: 767px) {
    .voucher-container .select-voucher .mainbox .boxes {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .voucher-container .select-voucher .mainbox .boxes {
        grid-template-columns: repeat(3, 1fr)
    }
}

@media(min-width: 992px)and (max-width: 1199px) {
    .voucher-container .select-voucher .mainbox .boxes {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(min-width: 1200px)and (max-width: 1399px) {
    .voucher-container .select-voucher .mainbox .boxes {
        grid-template-columns: repeat(3, 1fr)
    }
}

.voucher-container .select-voucher .mainbox .boxes .img-btn {
    flex: 1;
    min-width: 120px
}

.voucher-container .select-voucher .mainbox .boxes .img-btn>input {
    display: none
}

.voucher-container .select-voucher .mainbox .boxes .img-btn>img {
    cursor: pointer;
    border: 5px solid rgba(0, 0, 0, 0)
}

.voucher-container .select-voucher .mainbox .boxes .box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    width: -moz-fit-content;
    width: fit-content;
    cursor: pointer;
    border-radius: 10px;
    padding: 1.5em 1em 1em 1em;
    background-color: var(--lighter-box);
    width: 100%;
    height: 100%;
    border: 2px solid rgba(0, 0, 0, 0);
    position: relative;
    overflow: hidden
}

.voucher-container .select-voucher .mainbox .boxes .box .cashback {
    background: linear-gradient(90deg, #a41b8b 0%, #5c03bc 100%, #861d33 100.01%);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: absolute;
    top: 0;
    left: 0;
    border-bottom-right-radius: 20px;
    padding: .5em 1em .3em 1em
}

.voucher-container .select-voucher .mainbox .boxes .box .cashback .number {
    font-weight: 500;
    font-size: .9em;
    line-height: 1.2
}

.voucher-container .select-voucher .mainbox .boxes .box .cashback .text {
    font-weight: 300;
    font-size: .8em;
    line-height: 1.2
}

.voucher-container .select-voucher .mainbox .boxes .box img {
    width: 50px;
    height: 50px;
    object-fit: cover
}

.voucher-container .select-voucher .mainbox .boxes .box .offer-price {
    font-size: 1em;
    font-weight: 600;
    color: var(--primary)
}

.voucher-container .select-voucher .mainbox .boxes .box .discounted-price {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    font-size: .9em;
    color: var(--text-color);
    font-family: sans-serif;
    margin-top: .2em;
    direction: ltr
}

.voucher-container .select-voucher .mainbox .boxes .box .discounted-price .percentage {
    background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjEiIGhlaWdodD0iMjEiIHZpZXdCb3g9IjAgMCAyMSAyMSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE5LjE0MDggMTAuNDI3N0MxOS4xNDA4IDEwLjUxNzYgMTkuMTYyMyAxMC42MDYyIDE5LjIwMzcgMTAuNjg2OEwxOS45ODExIDEyLjIxMjdDMjAuNDEzOSAxMy4wNjI0IDIwLjA3MSAxNC4wNzUxIDE5LjIwMDMgMTQuNTE4M0wxNy42MzY3IDE1LjMxNDRDMTcuNTUzOSAxNS4zNTYzIDE3LjQ4MjIgMTUuNDE1OSAxNy40MjcyIDE1LjQ4ODVDMTcuMzcyMSAxNS41NjEyIDE3LjMzNTMgMTUuNjQ1IDE3LjMxOTQgMTUuNzMzNkwxNy4wMTM1IDE3LjQwNjVDMTYuODQzMiAxOC4zMzggMTUuOTQ1NyAxOC45NjM5IDE0Ljk2OTYgMTguODMxNEwxMy4yMTY5IDE4LjU5MzVDMTMuMDI3OCAxOC41NjgxIDEyLjg0MDcgMTguNjI2MyAxMi43MDM0IDE4Ljc1MzdMMTEuNDMxMiAxOS45MzQ2QzExLjA3NzEgMjAuMjYzMyAxMC42MjI0IDIwLjQyNzcgMTAuMTY4IDIwLjQyNzdDOS43MTM0MSAyMC40Mjc4IDkuMjU5MDEgMjAuMjYzNCA4LjkwNDc1IDE5LjkzNDZMNy42MzI1NCAxOC43NTM3QzcuNTY1NDcgMTguNjkxIDcuNDg0MjggMTguNjQzOSA3LjM5NTI1IDE4LjYxNjJDNy4zMDYyMiAxOC41ODg0IDcuMjExNzMgMTguNTgwNyA3LjExOTA3IDE4LjU5MzVMNS4zNjY0MSAxOC44MzE0QzUuMjc4OTIgMTguODQzMyA1LjE5MTg5IDE4Ljg0OTEgNS4xMDYxMSAxOC44NDkxQzQuMjM1MjEgMTguODQ5MiAzLjQ3NzQ1IDE4LjI1NDUgMy4zMjI0MyAxNy40MDY1TDMuMDE2NjIgMTUuNzMzNUMzLjAwMDcyIDE1LjY0NSAyLjk2MzgzIDE1LjU2MTIgMi45MDg4IDE1LjQ4ODVDMi44NTM3OCAxNS40MTU4IDIuNzgyMDggMTUuMzU2MyAyLjY5OTI0IDE1LjMxNDRMMS4xMzU1OSAxNC41MTgzQzAuMjY0OTggMTQuMDc1MSAtMC4wNzc5NTcxIDEzLjA2MjQgMC4zNTQ4NjYgMTIuMjEyOEwxLjEzMjI1IDEwLjY4NjlDMS4xNzM2MyAxMC42MDYzIDEuMTk1MTUgMTAuNTE3NyAxLjE5NTE1IDEwLjQyNzhDMS4xOTUxNSAxMC4zMzggMS4xNzM2MyAxMC4yNDk0IDEuMTMyMjUgMTAuMTY4OEwwLjM1NDkwNyA4LjY0Mjg3Qy0wLjA3NzkxNjMgNy43OTMyMyAwLjI2NTAyIDYuNzgwNDcgMS4xMzU2MyA2LjMzNzI3TDIuNjk5MjkgNS41NDExOUMyLjc4MjExIDUuNDk5MzIgMi44NTM4IDUuNDM5NzUgMi45MDg4MiA1LjM2NzA4QzIuOTYzODQgNS4yOTQ0IDMuMDAwNzIgNS4yMTA1NyAzLjAxNjYyIDUuMTIyMDVMMy4zMjI0MyAzLjQ0OTE0QzMuNDkyNzEgMi41MTc2NyA0LjM5MDM2IDEuODkxNjYgNS4zNjYzNyAyLjAyNDJMNy4xMTkwMyAyLjI2MjA4QzcuMjExNjggMi4yNzQ5MiA3LjMwNjE3IDIuMjY3MTUgNy4zOTUyIDIuMjM5MzlDNy40ODQyMiAyLjIxMTYzIDcuNTY1NDEgMi4xNjQ2MSA3LjYzMjUgMi4xMDE5N0w4LjkwNDc1IDAuOTIwOTI3QzkuNjEzMSAwLjI2MzMxNyAxMC43MjI4IDAuMjYzMzU2IDExLjQzMTIgMC45MjA5MjdMMTIuNzAzNCAyLjEwMTg1QzEyLjc3MDUgMi4xNjQ1MSAxMi44NTE3IDIuMjExNTQgMTIuOTQwNyAyLjIzOTNDMTMuMDI5OCAyLjI2NzA2IDEzLjEyNDMgMi4yNzQ4MiAxMy4yMTY5IDIuMjYxOTdMMTQuOTY5NiAyLjAyNDA4QzE1Ljk0NTMgMS44OTE2MiAxNi44NDMyIDIuNTE3NTUgMTcuMDEzNSAzLjQ0OTAyTDE3LjMxOTMgNS4xMjIwMUMxNy4zMzUyIDUuMjEwNTMgMTcuMzcyMSA1LjI5NDM2IDE3LjQyNzEgNS4zNjcwM0MxNy40ODIyIDUuNDM5NyAxNy41NTM5IDUuNDk5MjYgMTcuNjM2NyA1LjU0MTExTDE5LjIwMDMgNi4zMzcxOUMyMC4wNzEgNi43ODA0MyAyMC40MTM5IDcuNzkzMTEgMTkuOTgxMSA4LjY0Mjc1TDE5LjIwMzcgMTAuMTY4N0MxOS4xNjIzIDEwLjI0OTMgMTkuMTQwOCAxMC4zMzc5IDE5LjE0MDggMTAuNDI3N1oiIGZpbGw9InVybCgjcGFpbnQwX2xpbmVhcl8zNzE5XzMpIi8+CjxkZWZzPgo8bGluZWFyR3JhZGllbnQgaWQ9InBhaW50MF9saW5lYXJfMzcxOV8zIiB4MT0iMC4xNjc5NjkiIHkxPSIxMC40Mjc3IiB4Mj0iMjAuMTY4IiB5Mj0iMTAuNDI3NyIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgo8c3RvcCBzdG9wLWNvbG9yPSIjRUMzMzVBIi8+CjxzdG9wIG9mZnNldD0iMC41MDAwNDUiIHN0b3AtY29sb3I9IiNBNDFCOEIiLz4KPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNUMwM0JDIi8+CjxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzg2MUQzMyIvPgo8L2xpbmVhckdyYWRpZW50Pgo8L2RlZnM+Cjwvc3ZnPgo=);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    color: #fff;
    width: 25px;
    height: 25px;
    text-align: center;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: baseline;
    font-size: .6em;
    margin-top: -0.2em
}

.voucher-container .select-voucher .mainbox .boxes .box .discounted-price .percentage div {
    margin-bottom: -0.2em
}

.voucher-container .select-voucher .mainbox .boxes .box .discounted-price .old-price {
    opacity: .5;
    position: relative
}

.voucher-container .select-voucher .mainbox .boxes .box .discounted-price .old-price::after {
    content: "";
    width: 100%;
    height: 1px;
    background-color: var(--text-color);
    border-radius: 5px;
    position: absolute;
    top: calc(50% - .05em);
    left: 0;
    transform: translate(0%, -50%)
}

.voucher-container .select-voucher .mainbox .boxes .img-btn>input:disabled+.box {
    cursor: default;
    opacity: .5
}

.voucher-container .select-voucher .mainbox .boxes .box span.title {
    font-weight: bold;
    margin-top: .5em;
    text-align: center;
    color: var(--light-text-color)
}

.voucher-container .select-voucher .mainbox .boxes .box p {
    font-size: 14px;
    margin-top: 1em
}

.voucher-container .select-voucher .mainbox .boxes .box.active {
    border: 2px solid var(--primary)
}

.voucher-container .select-voucher .btns {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    gap: .5em;
    margin-top: 1em
}

.voucher-container .select-voucher .btns .cart-btn {
    background-color: var(--primary);
    color: #fff;
    padding: .5em 1.1em .3em 1.1em;
    font-size: .9em;
    font-weight: 500;
    border: none;
    outline: none;
    appearance: none;
    border-radius: 50px;
    cursor: pointer;
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 1em;
    flex: 1;
    text-wrap: nowrap
}

.voucher-container .select-voucher .btns .cart-btn.added-to-cart {
    background-color: #fff;
    border: 1px solid var(--primary);
    color: #ec335a
}

.voucher-container .select-voucher .btns .gift-btn {
    border-radius: 50%;
    border: 1px solid var(--primary);
    width: 30px;
    height: auto;
    aspect-ratio: 1/1;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

@media(min-width: 50px)and (max-width: 410px) {
    .voucher-container .select-voucher .btns {
        flex-direction: column-reverse;
        gap: 1em;
        width: 100%
    }

    .voucher-container .select-voucher .btns .cart-btn {
        justify-content: center;
        font-size: .8em
    }

    .voucher-container .select-voucher .btns .gift-btn {
        aspect-ratio: unset;
        width: 100%;
        border-radius: 50px;
        padding-bottom: .1em
    }

    .voucher-container .select-voucher .go-to-cart {
        width: 100%
    }

    .voucher-container .select-voucher .direct-pay {
        width: 100%
    }
}

.voucher-container .select-voucher .btn .cart-btn button {
    background-color: var(--primary);
    color: #fff;
    padding: .5em 1em;
    border: none;
    outline: none;
    appearance: none;
    font-size: 16px;
    border-radius: 50px;
    cursor: pointer
}

.voucher-container .select-voucher .btn .cart-btn .text {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px
}

.voucher-container .select-voucher .direct-pay {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: .6em 1.2em .3em 1.2em;
    gap: 10px;
    border-radius: 15px;
    color: var(--primary)
}

.voucher-container .select-voucher .go-to-cart {
    background-color: var(--primary);
    border: 1px solid var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: .6em 1.2em .3em 1.2em;
    gap: 10px;
    border-radius: 15px;
    color: #fff
}

.voucher-container .row {
    position: relative
}

.voucher-container .right-section {
    font-size: 13px;
    color: var(--text-color);
    z-index: 11 !important;
    margin-top: -115px;
    margin-right: .5em;
    width: 350px
}

.voucher-container .right-section .game-container {
    display: flex;
    flex-direction: column
}

.voucher-container .right-section .game-container .main-img {
    width: 350px;
    border-radius: 30px;
    box-shadow: 10px 20px 20px rgba(0, 0, 0, .0823529412)
}

.voucher-container .right-section .game-container h5 {
    color: var(--light-text-color);
    font-size: 2em;
    font-weight: 500;
    margin-top: .7em;
    margin-bottom: .7em;
    text-overflow: ellipsis;
    overflow: hidden
}

.voucher-container .right-section .text {
    width: 100%
}

.voucher-container .right-section .text .head {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.voucher-container .right-section .text p {
    width: 100%;
    white-space: normal;
    word-wrap: break-word;
    line-height: 28px;
    font-size: 16px;
    margin-top: 1em;
    text-align: right
}

.voucher-container .right-section .text p br {
    display: none
}

.voucher-container .right-section .text .head span {
    color: #6b6c72
}

.voucher-container .right-section .text .head .star span {
    color: #f8c346
}

.voucher-container .right-section .text .tabscon {
    background-color: var(--lighter-box);
    border-radius: 15px;
    overflow: hidden
}

.voucher-container .right-section .text .tabscon .nav-pills {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1em;
    z-index: 1;
    position: relative
}

.voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link {
    background-color: var(--lighter-box);
    color: var(--light-text-color);
    border-radius: 0;
    border: unset;
    margin: 0;
    font-weight: normal;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em
}

.voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link span {
    margin-bottom: -0.4em
}

.voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link svg path {
    fill: var(--light-text-color)
}

.voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link.active {
    box-shadow: 0 0 15px rgba(0, 0, 0, .0941176471);
    font-weight: bold;
    color: #ec335a;
    background-color: var(--lighter-box)
}

.voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link.active svg path {
    fill: #ec335a
}

.voucher-container .right-section .text .tabscon .tab-content {
    background-color: var(--lighter-box);
    z-index: 2;
    position: relative;
    padding: 1em;
    padding-top: 1.1em
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1.2em
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .right {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: .5em
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .right .number {
    font-size: 4.5em;
    font-weight: bold;
    color: #ec335a;
    font-family: sans-serif;
    line-height: .8em
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .right .total p {
    margin: 0;
    padding: 0;
    font-size: 1em
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .right .total .num {
    font-weight: bold
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .left {
    flex: 1;
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .left .item {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .5em;
    width: 100%;
    font-family: sans-serif;
    color: var(--text-color)
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .left .item .progress {
    flex: 1;
    height: 9px
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .left .item .progress .progress-bar {
    background-color: #ec335a
}

.voucher-container .right-section .text .tabscon .tab-content .rating-details .left .progress {
    background-color: var(--progress-bg-color)
}

.voucher-container .right-section .text .tabscon .tab-content .form-group {
    margin-top: 1em
}

.voucher-container .right-section .text .tabscon .tab-content .form-group .add-review-title {
    color: var(--light-text-color)
}

.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box {
    background-color: var(--box);
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 1em;
    border-radius: 10px;
    gap: 1em;
    flex-wrap: wrap;
    margin-top: .5em
}

.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box .star-rating {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .3em
}

.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box .star-rating input {
    display: none
}

.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box .star-rating label {
    font-size: 1.3em;
    color: var(--text-color);
    padding: 0;
    cursor: pointer
}

.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box .star-rating input:checked~label,
.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box .star-rating label:hover,
.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box .star-rating label:hover~label {
    color: #ec335a
}

.voucher-container .right-section .text .tabscon .tab-content .form-group .rating-box button {
    width: auto;
    background-color: #ec335a;
    border: unset;
    color: #fff;
    border-radius: 10px;
    padding: .4em 1em .2em 1em;
    margin: 0;
    font-weight: normal
}

.voucher-container .right-section .text .tabscon .tab-content ul,
.voucher-container .right-section .text .tabscon .tab-content ol {
    margin: 0;
    padding: 0;
    margin-inline-start: 1em
}

.voucher-container .right-section .text .tabscon .tab-content h1,
.voucher-container .right-section .text .tabscon .tab-content h2,
.voucher-container .right-section .text .tabscon .tab-content h3,
.voucher-container .right-section .text .tabscon .tab-content h4 {
    font-size: 1.5em;
    font-weight: bold
}

.voucher-container .right-section button {
    margin-top: 10px;
    width: 100%;
    border: none;
    border: 1px solid var(--primary);
    background-color: #242627;
    padding: 10px;
    border-radius: 20px;
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    gap: 10px
}

.voucher-container .right-section .app h4 {
    font-size: 15px;
    text-align: center;
    color: var(--primary)
}

@media(min-width: 50px)and (max-width: 400px) {
    .voucher-container .right-section .text .tabscon .nav-pills {
        gap: .2em
    }

    .voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link {
        font-size: .9em
    }

    .voucher-container .right-section .text .tabscon .nav-pills .nav-item .nav-link svg {
        width: 15px;
        height: 15px
    }
}

@media(min-width: 50px)and (max-width: 767px) {
    .voucher-container .right-section {
        margin: 0 auto;
        margin-top: -70px;
        width: 100%
    }

    .voucher-container .right-section .text h5 {
        width: 100%;
        box-sizing: border-box;
        text-align: center
    }

    .voucher-container .right-section .text .tabscon .nav-pills {
        gap: .5em
    }

    .voucher-container .right-section .game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .voucher-container .right-section .game-container .main-img {
        width: 190px
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .voucher-container .right-section {
        margin: 0 auto;
        margin-top: -70px;
        width: 100%
    }

    .voucher-container .right-section .text h5 {
        width: 100%;
        box-sizing: border-box;
        text-align: center
    }

    .voucher-container .right-section .game-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .voucher-container .right-section .game-container .main-img {
        width: 200px
    }
}

.voucher-container .product-banner {
    width: 100%;
    border-radius: 15px;
    height: auto;
    aspect-ratio: 19/3.5;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat
}

.voucher-container .product-banner .mobile-details {
    display: none
}

.voucher-container .product-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2em
}

@media(min-width: 50px)and (max-width: 991px) {
    .voucher-container .product-details {
        flex-direction: column;
        justify-content: flex-start
    }
}

@media(min-width: 50px)and (max-width: 767px) {
    .voucher-container {
        margin-top: 100px
    }

    .voucher-container .game-container .main-img,
    .voucher-container .game-container h5 {
        display: none
    }

    .voucher-container .right-section {
        margin-top: 0
    }

    .voucher-container .product-details {
        display: flex;
        flex-direction: column-reverse
    }

    .voucher-container .product-banner {
        aspect-ratio: 1/1;
        margin: -0.75rem;
        width: calc(100% + 1.5rem);
        position: relative
    }

    .voucher-container .product-banner::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(to bottom, rgba(0, 0, 0, 0), #000000);
        z-index: 1
    }

    .voucher-container .product-banner .mobile-details {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5em;
        position: relative;
        z-index: 3;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%
    }

    .voucher-container .product-banner .mobile-details .main-img {
        width: 60%;
        height: auto;
        aspect-ratio: 1/1;
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        border-radius: 15px
    }

    .voucher-container .product-banner .mobile-details h5 {
        font-size: 1.2em;
        font-weight: normal;
        color: #fff
    }
}

@media(min-width: 768px)and (max-width: 991px) {
    .voucher-container .product-banner {
        aspect-ratio: 19/5
    }
}

.voucher-container .product-details .left-section {
    flex: 1;
    margin-top: 2em
}

.voucher-container .verify-account-info {
    display: none;
    gap: 10px
}

.voucher-container .verify-account-info button {
    background-color: var(--primary);
    color: #fff;
    padding: .6em 1.1em .4em 1.1em;
    border: none;
    font-size: .85em;
    font-weight: 500;
    outline: none;
    border-radius: 50px;
    cursor: pointer
}

.voucher-container .verify-account-info.active {
    display: flex
}

.voucher-container .account-name {
    margin-top: 25px;
    display: none;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    gap: 1em
}

.voucher-container .account-name.active {
    display: flex
}

.voucher-container .account-name i {
    color: var(--primary)
}

.voucher-container .account-name h5 {
    font-size: 18px;
    margin-top: 3px
}

.voucher-container .account-name .another {
    font-size: 15px;
    color: var(--primary);
    text-decoration: underline
}

.mainForm {
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    right: 0;
    opacity: 1;
    z-index: 2222222;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, .1254901961);
    display: none;
    overflow-y: auto
}

.mainForm.modal {
    overflow: visible
}

.mainForm.modal .modal-dialog {
    position: relative;
    top: -28px
}

.mainForm .email-verify {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #97989f
}

.mainForm .email-verify .mail {
    font-weight: bold;
    color: #97989f
}

.mainForm .email-verify .change {
    color: var(--primary);
    text-transform: uppercase
}

.mainForm .nums {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px
}

.mainForm .nums .num {
    width: 100%;
    border: 1px solid #707070;
    border-radius: 7px;
    background-color: rgba(0, 0, 0, 0);
    padding: .3em .5em;
    font-size: 1.1em;
    font-family: sans-serif;
    font-weight: bold;
    letter-spacing: 1em;
    text-align: center;
    outline: none;
    color: var(--light-text-color);
    position: relative
}

.mainForm .nums .num::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: var(--primary)
}

.mainForm.active {
    display: block
}

.mainForm .profile-image {
    width: 104px;
    height: 103px;
    border-radius: 50%;
    border: 2px solid var(--primary)
}

.mainForm select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23EE3B59'><polygon points='0,0 100,0 50,50'/></svg>") no-repeat;
    background-size: 12px;
    background-position: calc(50% - 20px) 50%;
    background-repeat: no-repeat
}

.mainForm .login-container.partner-coupons-code-modal {
    overflow: visible
}

.mainForm .login-container.partner-coupons-code-modal .card-img-top {
    width: 110px;
    height: 110px;
    border-radius: 17px;
    margin: 0 auto;
    margin-top: -90px;
    margin-bottom: 1.2em;
    background-color: var(--background)
}

.mainForm .login-container.partner-coupons-code-modal .coupon-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .5em .9em;
    border: 1px dashed var(--primary);
    background-color: var(--lighter-box);
    color: var(--primary);
    flex-wrap: wrap;
    gap: 1em;
    border-radius: 10px;
    cursor: pointer
}

.mainForm .login-container.partner-coupons-code-modal .coupon-container span {
    font-weight: normal;
    font-family: sans-serif;
    flex: 1
}

.mainForm .login-container.partner-coupons-code-modal .coupon-container button {
    background-color: var(--primary);
    color: #fff;
    padding: .6em 1.1em .4em 1.1em;
    border: none;
    font-size: .8em;
    outline: none;
    border-radius: 7px;
    cursor: pointer
}

.mainForm .login-container.partner-coupons-code-modal .coupon-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.7em;
    margin: 1em auto
}

.mainForm .login-container.partner-coupons-code-modal .coupon-btns .per-btn {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5em;
    cursor: pointer;
    color: var(--text-color);
    font-weight: lighter;
    font-size: .8em;
    position: relative;
    padding: 0 .5em;
    min-width: 120px
}

.mainForm .login-container.partner-coupons-code-modal .coupon-btns .per-btn span {
    text-align: center
}

.mainForm .login-container.partner-coupons-code-modal .coupon-btns .per-btn.selected::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: auto;
    height: calc(100% + 1em);
    aspect-ratio: 1/1;
    border: 1px solid var(--primary);
    border-radius: 10px
}

@media(min-width: 50px)and (max-width: 300px) {
    .mainForm .login-container.partner-coupons-code-modal .coupon-container {
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .mainForm .login-container.partner-coupons-code-modal .coupon-container button {
        width: 100%
    }
}

.mainForm .login-container.show-event-modal {
    overflow: visible
}

.mainForm .login-container.show-event-modal .card-img-top {
    width: 110px;
    height: 110px;
    border-radius: 17px;
    margin: 0 auto;
    margin-top: -90px;
    margin-bottom: 1.2em;
    background-color: var(--background)
}

.mainForm .login-container.show-event-modal .coupon-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: .5em .9em;
    border: 1px dashed var(--primary);
    background-color: var(--lighter-box);
    color: var(--primary);
    flex-wrap: wrap;
    gap: 1em;
    border-radius: 10px;
    cursor: pointer
}

.mainForm .login-container.show-event-modal .coupon-container span {
    font-weight: normal;
    font-family: sans-serif;
    flex: 1
}

.mainForm .login-container.show-event-modal .coupon-container button {
    background-color: var(--primary);
    color: #fff;
    padding: .6em 1.1em .4em 1.1em;
    border: none;
    font-size: .8em;
    outline: none;
    border-radius: 7px;
    cursor: pointer
}

.mainForm .login-container.show-event-modal .event-btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.7em;
    margin: 1em auto;
    width: 100%
}

.mainForm .login-container.show-event-modal .event-btns .per-btn {
    background-color: var(--primary);
    color: #fff;
    font-size: .9em;
    font-weight: bold;
    position: relative;
    padding: .5em;
    width: 100%;
    border-radius: 50px;
    text-align: center;
    cursor: pointer
}

@media(min-width: 50px)and (max-width: 300px) {
    .mainForm .login-container.show-event-modal .coupon-container {
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .mainForm .login-container.show-event-modal .coupon-container button {
        width: 100%
    }
}

.mainForm .login-container {
    overflow: auto;
    width: 560px;
    margin: auto;
    margin-top: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 35px;
    border-radius: 12px;
    background-color: var(--background);
    position: relative
}

.mainForm .login-container .input {
    position: relative;
    border: 1px solid rgba(0, 0, 0, .1882352941);
    background-color: var(--lighter-box);
    padding: 0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    margin-top: 3em
}

.mainForm .login-container .input.phone select {
    padding: .7em
}

.mainForm .login-container .input.phone select option:checked {
    background-color: var(--primary);
    color: #fff
}

.mainForm .login-container .input.phone select option {
    background-color: #fff;
    color: #555
}

.mainForm .login-container .input.phone i {
    color: var(--primary)
}

.mainForm .login-container .input.phone .number {
    width: 100px;
    border-left: 1px solid var(--text-color);
    padding-left: 8px;
    box-sizing: border-box
}

.mainForm .login-container .input.phone .inputCon {
    width: 100%
}

.mainForm .login-container .input.phone input {
    width: 80%
}

.mainForm .login-container .input input,
.mainForm .login-container .input select {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    color: var(--text-color);
    padding: .7em;
    font-family: sans-serif;
    font-size: 15px
}

.mainForm .login-container .input label {
    position: absolute;
    z-index: 1;
    top: -1.6em;
    right: 0;
    color: var(--light-text-color)
}

.mainForm .login-container .chooseEmail {
    margin-top: 10px
}

.mainForm .login-container .chooseEmail .main {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    color: #6b6c72;
    padding: 10px 30px;
    border-radius: 25px;
    border: 1px solid #707070
}

.mainForm .login-container button {
    background-color: var(--primary);
    color: #fff;
    padding: 13px 75px;
    border: none;
    font-size: 16px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.mainForm .login-container h3 {
    font-size: 20px;
    font-weight: bolder;
    margin: 0;
    color: var(--light-text-color)
}

.mainForm .login-container p span {
    color: var(--primary);
    font-weight: bold;
    cursor: pointer
}

.mainForm .login-container .email-verify {
    display: flex;
    align-items: center
}

.mainForm .login-container .email-verify button,
.mainForm .login-container .email-verify .resend-btn {
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    color: var(--primary)
}

.mainForm .login-container .email-verify button.not-active,
.mainForm .login-container .email-verify .resend-btn.not-active {
    cursor: not-allowed
}

.mainForm .login-container .order {
    font-size: 14px;
    color: #6b6c72
}

.mainForm .login-container .or {
    margin: 50px 0px;
    color: #000;
    width: 100%;
    position: relative;
    background-color: var(--border);
    height: 1px;
    display: flex;
    align-items: center;
    justify-content: center
}

.mainForm .login-container .or span {
    position: absolute;
    background-color: var(--background);
    border: 1px solid var(--border);
    color: var(--text-color);
    z-index: 111;
    width: 40px;
    height: auto;
    aspect-ratio: 1/1;
    padding-top: .4em;
    font-size: .9em;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    font-weight: bold
}

.mainForm .login-container .input {
    width: 100%
}

.mainForm .login-container .input input {
    width: 100%
}

.mainForm .login-container .pass {
    cursor: pointer
}

.mainForm .login-container .close-login-form {
    width: 14px;
    color: #6b6c72;
    cursor: pointer
}

.mainForm .login-container .icons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px
}

.mainForm .login-container .icons i {
    color: #97989f;
    font-size: 25px;
    cursor: pointer
}

.mainForm.chargeWallet .wallet h3 {
    font-size: 23px
}

.mainForm.chargeWallet .wallet img {
    width: 75px;
    height: 71px
}

.mainForm.chargeWallet .method .inputs {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.mainForm.chargeWallet .method .inputs .inp {
    background-color: var(--lighter-box);
    display: flex;
    align-items: center;
    gap: 30px;
    border-radius: 18px;
    padding: 15px
}

.mainForm.chargeWallet .method .inputs .inp .image {
    display: flex;
    align-items: center;
    gap: 15px
}

.mainForm.chargeWallet .method .inputs .inp .image.multi {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mainForm.chargeWallet .method .inputs .inp .image.multi .first,
.mainForm.chargeWallet .method .inputs .inp .image.multi .second {
    display: flex;
    align-items: center;
    gap: 10px
}

.mainForm.chargeWallet .method .inputs input[type=radio] {
    height: 20px;
    width: 20px;
    border-radius: 50%;
    accent-color: var(--primary)
}

.mainForm.chargeWallet .pay {
    margin-top: 20px;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    text-align: center
}

.mainForm.chargeWallet .pay p {
    margin-top: 15px
}

.mainForm.chargeWallet .pay p span {
    font-size: 20px
}

.mainForm.chargeWallet .pay button {
    background-color: var(--primary);
    color: #fff;
    padding: 13px 60px;
    border: none;
    font-size: 14px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.mainForm.showSavedAccounts h3 {
    font-size: 1em
}

.mainForm.showSavedAccounts .close-login-form {
    font-size: 20px
}

.mainForm.add-saved-account h3 {
    font-size: 1em
}

.mainForm.add-saved-account .close-login-form {
    font-size: 20px
}

.mainForm.add-saved-account select {
    background-position: 3% 62%
}

.mainForm.add-saved-account button {
    width: 100%;
    margin-top: 1em;
    padding: .5em 1em;
    font-weight: 500
}

.pagination-container p {
    color: #fff !important
}

.pagination-container .pagination .page-item {
    margin: 0px;
    color: var(--primary)
}

.pagination-container .pagination .page-item .page-link {
    color: var(--primary)
}

.pagination-container .pagination .page-item.active .page-link {
    color: #fff;
    background-color: var(--primary);
    border: 1px solid #dee2e6
}

@media(max-width: 600px) {
    .accordion .accordion-item .accordion-body .method .inputs span {
        font-size: 11px
    }

    .accordion .accordion-item .accordion-body .method .inputs img {
        width: 25px;
        height: 25px
    }

    .accordion .accordion-item .accordion-body .method .inputs .stc {
        width: 50px
    }

    .accordion .accordion-item .accordion-body .method .pay {
        flex-direction: column
    }

    .accordion .accordion-item .accordion-body .method .payment-toggle {
        flex-direction: column
    }

    .accordion .accordion-item .accordion-body .method .payment-toggle .image {
        flex-direction: column
    }

    .mainForm .login-container {
        width: 100%
    }

    .mainForm .email-verify.main {
        flex-direction: column
    }

    .mainForm.sign-form button {
        font-size: 15px;
        padding: 8px 50px
    }

    .mainForm .method .inputs span {
        font-size: 11px
    }

    .mainForm .method .inputs img {
        width: 25px;
        height: 25px
    }

    .mainForm .method .inputs .stc {
        width: 50px
    }

    .mainForm .pay {
        flex-direction: column
    }

    .verify-account-info,
    .account-name {
        flex-direction: column
    }
}

@media(max-width: 570px) {
    .voucher-container .select-voucher .mainbox .inputs {
        display: flex;
        flex-direction: column;
        align-items: center
    }
}

.settings-container {
    position: relative;
    margin: 0 auto;
    margin-top: 10em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
    min-height: 50vh;
    width: 1000px
}

.settings-container .account-info {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 2em;
    margin-bottom: 2em;
    width: 100%
}

.settings-container .account-info .right {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

.settings-container .account-info .right .account-img {
    position: relative
}

.settings-container .account-info .right .account-img img.account-image {
    width: 85px;
    height: 85px;
    border-radius: 50%;
    border: 1px solid var(--primary);
    padding: 3px
}

.settings-container .account-info .right .account-img img.account-rank {
    position: absolute;
    width: 36px;
    height: 36px;
    bottom: -5px;
    right: -5px;
    z-index: 2
}

.settings-container .account-info .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em
}

.settings-container .account-info .left .name {
    font-weight: bold;
    font-size: 1.25em;
    color: var(--light-text-color)
}

.settings-container .account-info .left .rank {
    width: 100%;
    max-width: 500px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .3em;
    flex: 1;
    color: var(--light-text-color)
}

.settings-container .account-info .left .rank .rank-info {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    opacity: .5;
    font-size: .9em
}

.settings-container .account-info .left .rank .rank-progress {
    width: 100%;
    background-color: var(--lighter-box);
    height: 8px;
    border-radius: 20px;
    position: relative;
    margin-top: .2em
}

.settings-container .account-info .left .rank .rank-progress .rp {
    position: absolute;
    background-color: var(--primary);
    border-radius: 20px;
    height: 100%;
    top: 0;
    right: 0;
    min-width: 1%;
    box-shadow: 0 0 10px rgba(var(--primary), 0.5)
}

.settings-container .blured {
    position: absolute;
    top: -3%;
    left: -5%;
    width: 110%;
    height: 110%;
    backdrop-filter: blur(15px);
    background-image: linear-gradient(to right, transparent);
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media(max-width: 500px) {
    .settings-container .blured {
        top: -1em
    }
}

.settings-container .blured span {
    color: var(--text-color);
    background-color: var(--lighter-box);
    font-weight: bold;
    padding: .6em .9em .4em .9em;
    border-radius: 10px
}

@media(min-width: 50px)and (max-width: 800px) {
    .settings-container {
        width: 95%;
        margin-top: 7em
    }
}

@media(min-width: 800px)and (max-width: 1050px) {
    .settings-container {
        width: 750px
    }
}

.settings-container .settings-row-container {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 4em;
    width: 100%
}

@media(min-width: 50px)and (max-width: 650px) {
    .settings-container .settings-row-container {
        gap: 2em
    }
}

@media(min-width: 50px)and (max-width: 479px) {
    .settings-container .settings-row-container {
        flex-direction: column-reverse
    }
}

.settings-container .receiver .img-btn>input {
    display: none
}

.settings-container .receiver .img-btn>img {
    cursor: pointer;
    border: 5px solid rgba(0, 0, 0, 0)
}

.settings-container .receiver .img-btn>input:checked+img {
    border-color: var(--primary);
    border-radius: 10px
}

.settings-container ::-webkit-scrollbar {
    width: 10px;
    height: 10px
}

.settings-container ::-webkit-scrollbar-thumb {
    background-color: var(--primary);
    border-radius: 5px
}

.settings-container ::-webkit-scrollbar-track {
    background-color: #f1f1f1
}

.settings-container .back-img {
    position: absolute;
    top: -100px;
    right: -130px;
    z-index: -11;
    transform: scaleX(-1)
}

.settings-container .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap
}

.settings-container .header span {
    color: var(--primary);
    font-size: 14px;
    text-decoration: underline
}

.settings-container h1 {
    font-size: 20px;
    color: var(--light-text-color);
    font-weight: bolder;
    margin: 0;
    padding: 0
}

.settings-container h2 {
    letter-spacing: 2.8px;
    color: #000;
    text-transform: uppercase;
    font-size: 1em;
    font-weight: bold
}

.settings-container .table-responsive {
    background-color: var(--lighter-box);
    padding: 20px;
    border-radius: 10px;
    width: 100%;
    margin-top: -1em
}

.settings-container .pending {
    color: #8e1bd1
}

.settings-container .approved {
    color: #1bd18e
}

.settings-container .amountMinus,
.settings-container .cancel {
    color: var(--primary)
}

.settings-container table {
    color: var(--light-text-color)
}

.settings-container table tr th,
.settings-container table tr td {
    font-size: 14px;
    text-align: center;
    white-space: nowrap;
    color: var(--light-text-color);
    padding: 1em .5em;
    border-bottom-color: rgba(0, 0, 0, .1254901961)
}

.settings-container table tr th {
    color: #97989f
}

.settings-container table tr .amount {
    color: #1bd18e
}

.settings-container table tr .amountMinus,
.settings-container table tr .cancel {
    color: var(--primary)
}

.settings-container table tr .type {
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em
}

.settings-container table tr .type::before {
    content: "";
    position: relative;
    border-top: 7px solid rgba(0, 0, 0, 0);
    border-right: 7px solid rgba(0, 0, 0, 0);
    border-bottom: 7px solid #1bd18e;
    border-left: 7px solid rgba(0, 0, 0, 0);
    margin-top: -0.6em
}

.settings-container table tr .typeMinus {
    position: relative
}

.settings-container table tr .typeMinus::before {
    content: "▼";
    color: red
}

.settings-container table tr .order {
    text-decoration: underline
}

.settings-container table tbody {
    overflow-x: scroll
}

.settings-container .settings-nav {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    position: sticky;
    top: 100px;
    width: 210px
}

@media(min-width: 480px)and (max-width: 650px) {
    .settings-container .settings-nav {
        width: 150px
    }
}

@media(min-width: 50px)and (max-width: 479px) {
    .settings-container .main-sideBar {
        width: 100%
    }

    .settings-container .settings-nav {
        width: 100%
    }
}

.settings-container .settings-nav a {
    text-decoration: none
}

.settings-container .settings-nav .box {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: .5em;
    position: relative;
    padding: .5em .9em;
    cursor: pointer;
    border-radius: 50px
}

.settings-container .settings-nav .box .dot {
    position: absolute;
    left: 10%;
    background-color: var(--primary);
    color: #fff;
    padding: 0px 7px;
    border-radius: 50%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-family: sans-serif;
    font-size: .9em;
    min-width: 25px;
    min-height: 25px
}

.settings-container .settings-nav .box .dot span {
    color: #fff
}

.settings-container .settings-nav .box span,
.settings-container .settings-nav .box i {
    color: var(--text-color);
    margin-bottom: -0.2em
}

.settings-container .settings-nav .box img {
    width: 17px
}

.settings-container .settings-nav .box.active {
    background: rgba(236, 51, 91, .0901960784);
    color: var(--primary)
}

.settings-container .settings-nav .box.active span {
    color: var(--primary)
}

.settings-container .settings-nav .box.active .dot {
    background-color: rgba(0, 0, 0, 0)
}

.settings-container .settings-nav .box svg:not(.rank-icon) path {
    fill: var(--light-text-color)
}

.settings-container .settings-nav .box svg:not(.rank-icon) circle {
    stroke: var(--light-text-color)
}

.settings-container .settings-nav .box.active svg:not(.rank-icon) path {
    fill: #ec335a
}

.settings-container .settings-nav .box.active img {
    filter: invert(33%) sepia(99%) saturate(2659%) hue-rotate(330deg) brightness(97%) contrast(93%)
}

.settings-container .account {
    width: 100%
}

.settings-container .account .main-account {
    width: 100%;
    position: relative
}

.settings-container .account .main-account .edit {
    position: absolute;
    top: 10px;
    left: 20px;
    display: flex;
    align-items: center;
    gap: 3px;
    cursor: pointer
}

.settings-container .account .main-account .edit span,
.settings-container .account .main-account .edit i {
    font-size: 13px;
    color: var(--primary)
}

.settings-container .account .main-account .image {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px
}

.settings-container .account .main-account .image .delete-image {
    background-color: unset;
    appearance: none;
    outline: none;
    border: none;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    color: var(--light-text-color)
}

.settings-container .account .main-account .image .delete-image i {
    font-size: .8em
}

.settings-container .account .main-account .image .delete-image span {
    margin-bottom: -0.2em
}

.settings-container .account .main-account .image img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 2px solid var(--primary)
}

.settings-container .account .main-account .image .upload-form {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1em
}

.settings-container .account .main-account .image .upload-form input {
    position: absolute;
    z-index: -100;
    opacity: 0
}

.settings-container .account .main-account .image .upload-form label {
    border: 1px solid var(--light-text-color);
    border-radius: 50px;
    color: var(--light-text-color);
    cursor: pointer;
    padding: .4em 1em .2em 1em;
    text-align: center
}

@media(min-width: 50px)and (max-width: 500px) {
    .settings-container .account .main-account .image .upload-form label {
        padding: .3em .8em .1em .8em;
        font-size: .8em
    }
}

.settings-container .account .main-account .update-info-form {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 3em;
    margin-top: 3em;
    width: 100%
}

.settings-container .account .main-account .update-info-form .input {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    width: 100%;
    padding: 0
}

.settings-container .account .main-account .update-info-form .input.column-input {
    flex-direction: column;
    align-items: flex-start;
    gap: .5em
}

.settings-container .account .main-account .update-info-form .input .fld {
    position: relative;
    width: 100%
}

.settings-container .account .main-account .update-info-form .input .fld svg {
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%)
}

.settings-container .account .main-account .update-info-form .input .fld svg path {
    fill: var(--light-text-color)
}

.settings-container .account .main-account .update-info-form .input .fld input {
    width: 100%;
    padding: .6em 1em .3em 1em;
    border: 1px solid rgba(0, 0, 0, .062745098);
    border-radius: 7px;
    outline: none;
    appearance: none;
    background-color: var(--box);
    padding-inline-start: 3em;
    color: var(--light-text-color)
}

.settings-container .account .main-account .update-info-form .input .fld select {
    width: 100%;
    padding: .5em 1em;
    border: 1px solid #000;
    border-radius: 50px;
    outline: none
}

.settings-container .account .main-account .update-info-form .input label {
    font-size: 14px;
    color: #97989f
}

.settings-container .account .main-account .update-info-form #edit-account-submit {
    background-color: var(--primary);
    color: #fff;
    padding: .7em 1.4em .4em 1.4em;
    font-size: .9em;
    font-weight: 500;
    border-radius: 20px;
    cursor: pointer;
    outline: none;
    border: none;
    appearance: none;
    margin-top: -1em
}

.settings-container .account .main-account .box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: center
}

.settings-container .account .main-account .box p {
    font-size: 13px;
    color: #97989f
}

.settings-container .account .main-account .box span {
    font-size: 13px
}

.settings-container .account .main-pass {
    width: 367px;
    height: 62px;
    background-color: #242627;
    border-radius: 15px;
    display: flex;
    align-items: center;
    padding: 0px 30px;
    justify-content: space-between;
    cursor: pointer
}

.settings-container .account .main-pass .pass {
    display: flex;
    align-items: center;
    gap: 10px
}

.settings-container .account .main-pass .pass span {
    font-size: 13px
}

.settings-container .wheel-of-fortune {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    width: 100%;
    color: var(--text-color)
}

.settings-container .wheel-of-fortune .wheel-con {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 2em;
    box-shadow: 0px 16px 12px -8px var(--wheel-con-shadow);
    box-shadow: 0px 8px 24px 0px var(--wheel-con-shadow);
    padding-bottom: 1.5em;
    border-radius: 20px
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

@media(min-width: 50px)and (max-width: 479px) {
    .settings-container .wheel-of-fortune .wheel-con .wheel-main-con {
        margin: 0 -2.5%;
        width: 105%
    }
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-wheel-con {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: 4px solid #ec335a;
    width: unset;
    margin-top: 1em;
    display: none
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-wheel-con .wheel-pointer {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10;
    width: 15px
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-wheel-con .wheel-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1em;
    font-weight: bold;
    background-color: #ec335a;
    color: #fff;
    border-radius: 200%;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-align: center;
    z-index: 10
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-wheel-con #spin-button {
    margin-top: 20px;
    padding: 10px 20px;
    font-size: 16px;
    cursor: pointer
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: relative;
    min-height: 190px;
    margin-top: 2em;
    overflow: hidden
}

@media(min-width: 50px)and (max-width: 479px) {
    .settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes {
        margin-top: 0
    }
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes .prizes-con {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    gap: .5em
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes .prizes-con .per-prize {
    width: 120px;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    border-radius: 8px;
    padding: 1em;
    min-height: 160px;
    position: relative;
    transition: min-height .2s, width .2s, border .2s, border-radius .2s
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes .prizes-con .per-prize.selected {
    border: 2.5px solid var(--primary);
    min-height: 190px;
    border-radius: 9.6px;
    width: 130px
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes .prizes-con .per-prize.selected::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-bottom: 10px solid var(--primary);
    border-left: 17px solid rgba(0, 0, 0, 0);
    border-right: 17px solid rgba(0, 0, 0, 0);
    width: 0;
    height: 0
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes .prizes-con .per-prize img {
    width: 80%
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .prizes .prizes-con .per-prize span {
    text-align: center
}

.settings-container .wheel-of-fortune .wheel-con .wheel-main-con .real-prizes-con .show-wheel-btn {
    margin: 0 auto;
    margin-top: 1.5em;
    background-color: var(--primary);
    color: #fff;
    padding: .6em 2.5em .4em 2.5em;
    border-radius: 50px;
    font-weight: 500
}

.settings-container .wheel-of-fortune .wheel-con .text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    flex: 1;
    margin-bottom: -1em;
    padding: 1em
}

@media(min-width: 50px)and (max-width: 479px) {
    .settings-container .wheel-of-fortune .wheel-con .text {
        width: 100%
    }
}

.settings-container .wheel-of-fortune .wheel-con .text h3 {
    font-size: 1.1em;
    font-weight: 500
}

.settings-container .wheel-of-fortune .wheel-con .text .stats {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    width: 100%
}

@media(min-width: 50px)and (max-width: 479px) {
    .settings-container .wheel-of-fortune .wheel-con .text .stats {
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start
    }
}

.settings-container .wheel-of-fortune .wheel-con .text .stats .per-stat {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em
}

.settings-container .wheel-of-fortune .wheel-con .text .stats .per-stat svg {
    margin-top: -0.5em
}

.settings-container .wheel-of-fortune .wheel-con .text .stats .per-stat .per-stat-text {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em
}

.settings-container .wheel-of-fortune .wheel-con .text .stats .per-stat .per-stat-text h4 {
    font-size: 1em;
    font-weight: normal;
    opacity: .8;
    margin: 0;
    padding: 0
}

.settings-container .wheel-of-fortune .wheel-con .text .stats .per-stat .per-stat-text p {
    font-size: 1em;
    font-weight: bold
}

.settings-container .wheel-of-fortune .wheel-con .text .progress {
    width: 100%;
    background-color: rgba(252, 213, 39, .2);
    height: 38px;
    border-radius: 20px;
    position: relative;
    overflow: visible
}

.settings-container .wheel-of-fortune .wheel-con .text .progress .progress-bar {
    position: absolute;
    background-color: #fcd425;
    border-radius: 20px;
    height: calc(100% - 8px);
    top: 4px;
    right: 4px;
    min-width: 1%;
    box-shadow: 0 0 10px rgba(243, 224, 8, .3137254902);
    overflow: visible;
    color: #6a5910;
    font-weight: 500;
    font-size: 1.05em;
    font-family: sans-serif;
    text-align: center
}

.settings-container .wheel-of-fortune .prizes-history {
    width: 100%
}

.settings-container .wheel-of-fortune .prizes-history .prizes-history-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: 2em 0
}

.settings-container .wheel-of-fortune .prizes-history .prizes-history-header h2 {
    font-size: 1.1em;
    font-weight: 500;
    padding: 0;
    margin: 0;
    margin-bottom: -0.7em;
    color: var(--light-text-color)
}

.settings-container .wheel-of-fortune .prizes-history table {
    padding: 0
}

.settings-container .wheel-of-fortune .prizes-history table thead {
    background-color: #ec335a;
    color: #fff
}

.settings-container .wheel-of-fortune .prizes-history table tr th {
    color: #fff;
    font-weight: normal
}

.settings-container .wheel-of-fortune .prizes-history table tr:last-child td,
.settings-container .wheel-of-fortune .prizes-history table tr.no-border td {
    border-bottom: none
}

@media(min-width: 50px)and (max-width: 799px) {
    .settings-container .wheel-of-fortune .wheel-con {
        flex-direction: column;
        gap: 1em
    }

    .settings-container .wheel-of-fortune .wheel-con .text {
        margin-bottom: 1.2em
    }

    .settings-container .wheel-of-fortune .wheel-con .text .stats {
        flex-wrap: wrap
    }
}

@media(min-width: 800px)and (max-width: 1050px) {
    .settings-container .wheel-of-fortune .wheel-con {
        flex-direction: column;
        gap: 2em
    }

    .settings-container .wheel-of-fortune .wheel-con .text {
        margin-bottom: 1.2em
    }
}

.settings-container .wallet {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
    width: 100%;
    overflow-x: hidden
}

.settings-container .wallet .head-wallet h2 {
    margin-bottom: -0.1em;
    color: var(--light-text-color)
}

.settings-container .wallet .head-wallet .dropdown .btn {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    padding: .3em 1em .2em 1em;
    border-radius: 25px
}

.settings-container .wallet .box {
    width: 100%;
    color: var(--text-color);
    border-radius: 10px;
    padding: 1em 1.5em;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--box)
}

.settings-container .wallet .box .add {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    background-color: var(--primary);
    padding: .5em 1.2em .3em 1.2em;
    border-radius: 25px;
    cursor: pointer;
    color: #fff;
    font-size: .8em
}

.settings-container .wallet .box .add.points {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 15px
}

.settings-container .wallet .box .add.points button {
    background-color: var(--primary);
    color: #fff;
    padding: 8px 40px;
    border: none;
    font-size: 16px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.settings-container .wallet .box .add.points p {
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 2px
}

.settings-container .wallet .box .add.points p span {
    font-size: 20px;
    font-weight: bold
}

.settings-container .wallet .box .add.points .equal {
    font-size: 18px;
    font-weight: bold
}

.settings-container .saved-accounts {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
    width: 100%;
    overflow: visible
}

.settings-container .saved-accounts .saved-accounts-history {
    width: 100%;
    overflow: visible
}

.settings-container .saved-accounts .saved-accounts-history .saved-accounts-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    padding-bottom: 1.7em
}

.settings-container .saved-accounts .saved-accounts-history .saved-accounts-header h2 {
    font-size: 1.1em;
    font-weight: 500;
    padding: 0;
    margin: 0;
    color: var(--light-text-color)
}

.settings-container .saved-accounts .saved-accounts-history .saved-accounts-header .dropdown .btn {
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    padding: .3em 1em .2em 1em;
    border-radius: 25px
}

.settings-container .saved-accounts .saved-accounts-history .table-responsive {
    overflow: visible
}

.settings-container .saved-accounts .saved-accounts-history table {
    padding: 0;
    overflow: visible
}

.settings-container .saved-accounts .saved-accounts-history table thead {
    background-color: #ec335a;
    color: #fff
}

.settings-container .saved-accounts .saved-accounts-history table tbody {
    overflow: visible
}

.settings-container .saved-accounts .saved-accounts-history table tr {
    overflow: visible
}

.settings-container .saved-accounts .saved-accounts-history table tr th {
    color: #fff;
    font-weight: normal
}

.settings-container .saved-accounts .saved-accounts-history table tr:last-child td,
.settings-container .saved-accounts .saved-accounts-history table tr.no-border td {
    border-bottom: none
}

.settings-container .saved-accounts .saved-accounts-history table tr td {
    overflow: visible
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown button {
    padding: 0;
    margin: 0;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    color: var(--light-text-color);
    cursor: pointer
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown button svg path {
    fill: var(--light-text-color)
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu {
    background-color: var(--background) !important;
    color: var(--text-color);
    border-radius: 7px !important;
    direction: initial;
    box-shadow: 0 5px 20px var(--shadow);
    padding: unset !important;
    left: 0
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item {
    color: var(--text-color);
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    text-align: right;
    direction: rtl;
    padding: .8em 1em !important;
    border-bottom: 1px solid var(--shadow) !important
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item:last-child {
    border-bottom: unset !important
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item.ltr {
    text-align: left;
    direction: ltr
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item:focus,
.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item:hover {
    background-color: var(--box)
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item svg {
    width: 14px;
    height: 14px;
    margin-top: -0.2em
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item svg path {
    fill: var(--text-color)
}

.settings-container .saved-accounts .saved-accounts-history table tr td .dropdown-menu .dropdown-item span {
    line-height: 1;
    font-size: .9em;
    color: var(--text-color)
}

.settings-container .not-found {
    width: 100%;
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    text-align: center;
    gap: 1.5em
}

.settings-container .not-found h1 {
    color: #ec335a;
    font-weight: normal;
    margin-top: 1em;
    text-align: center
}

.settings-container .not-found span {
    color: #68696f;
    text-align: center
}

.settings-container .not-found a {
    background-color: #ec335a;
    border: 1px solid #ec335a;
    color: #fff;
    border-radius: 50px;
    padding: .4em 1.5em .3em 1.5em
}

.settings-container .notification {
    width: 100%
}

.settings-container .notification .header {
    margin-bottom: 1em
}

.settings-container .notification .boxes {
    display: flex;
    flex-direction: column;
    gap: 1em;
    width: 100%
}

.settings-container .notification .boxes .box {
    width: 100%;
    color: var(--text-color);
    padding: 20px;
    background-color: var(--lighter-box);
    border: 1px solid var(--border);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em
}

.settings-container .notification .boxes .box i {
    color: var(--primary)
}

.settings-container .notification .boxes .box span {
    font-size: .85em;
    color: var(--text-color);
    margin-bottom: -0.4em
}

.settings-container .notification .boxes .box button {
    background-color: #ec335a;
    padding: .3em .8em .1em .8em;
    border-radius: 50px;
    font-size: .8em;
    color: #fff
}

.settings-container .notification .boxes .box .image {
    display: flex;
    align-items: center;
    gap: 10px
}

.settings-container .notification .boxes .box .image img {
    width: 21px;
    height: 21px
}

.settings-container .my-cards-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em
}

.settings-container .my-cards-container .cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1.5em;
    width: 100%
}

.settings-container .my-cards-container .cards .per-card {
    background-color: var(--lighter-box);
    border-radius: 17px;
    border: 1px solid var(--border);
    overflow: hidden
}

.settings-container .my-cards-container .cards .per-card .img {
    width: 100%;
    height: auto;
    aspect-ratio: 1/.8;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative
}

.settings-container .my-cards-container .cards .per-card .img .rating {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background-color: #f8a60a;
    color: #fff;
    padding: .25em .6em .24em .6em;
    border-radius: 7px;
    font-size: .8em;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    font-family: sans-serif;
    direction: ltr
}

.settings-container .my-cards-container .cards .per-card .img .rating span {
    margin-bottom: -0.1em
}

.settings-container .my-cards-container .cards .per-card .text {
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em;
    width: 100%
}

.settings-container .my-cards-container .cards .per-card .text .card {
    width: 100%
}

.settings-container .my-cards-container .cards .per-card .text h5 {
    font-size: 1em;
    margin: 0;
    color: var(--text-color);
    direction: auto;
    font-weight: 400
}

.settings-container .my-cards-container .cards .per-card .text .price {
    font-size: .9em;
    color: var(--text-color);
    font-weight: 500
}

.settings-container .my-cards-container .cards .per-card .text .card-code {
    width: 100%;
    background-color: var(--background);
    color: var(--text-color);
    padding: 1em;
    border-radius: 7px;
    margin-top: .5em;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    font-size: .8em;
    font-family: sans-serif;
    cursor: pointer;
    max-width: 100%
}

.settings-container .my-cards-container .cards .per-card .text .card-code .card-code-value {
    flex: 1;
    overflow: hidden
}

.settings-container .my-cards-container .cards .per-card .text .card-code .card-code-value.single-code-value {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.settings-container .my-cards-container .cards .per-card .text .card-code .card-code-value .card-code-title {
    font-size: .8em
}

.settings-container .my-cards-container .cards .per-card .text .card-code .card-code-value .card-code-real-value {
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.settings-container .my-cards-container .cards .per-card .text .card-code i {
    color: #ec335a;
    font-size: 1.2em
}

@media(min-width: 50px)and (max-width: 300px) {
    .settings-container .my-cards-container .cards {
        grid-template-columns: repeat(1, 1fr)
    }
}

@media(min-width: 301px)and (max-width: 800px) {
    .settings-container .my-cards-container .cards {
        grid-template-columns: repeat(2, 1fr);
        gap: .5em
    }
}

@media(min-width: 801px)and (max-width: 1050px) {
    .settings-container .my-cards-container .cards {
        grid-template-columns: repeat(2, 1fr)
    }
}

.settings-container .orders-container {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em
}

.settings-container .orders-container .per-order {
    background-color: var(--lighter-box);
    padding: 1.5em;
    border-radius: 15px;
    width: 100%;
    color: var(--text-color)
}

.settings-container .orders-container .head {
    width: 100%;
    display: flex;
    text-align: center;
    justify-content: space-between;
    position: relative;
    flex-wrap: wrap;
    gap: 1em;
    border-bottom: 1px solid rgba(0, 0, 0, .1254901961);
    padding-bottom: .5em
}

.settings-container .orders-container .head .order-text {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 5px;
    margin-bottom: 10px
}

.settings-container .orders-container .head .order-text .text-item {
    font-size: .8em;
    color: var(--text-color);
    font-weight: 500;
    opacity: .8
}

.settings-container .orders-container .head .order-text .text-item .text-item-value {
    font-weight: bold;
    color: var(--text-color)
}

.settings-container .orders-container .head .order-text span {
    font-size: 13px;
    color: #97989f
}

.settings-container .orders-container .confirm {
    display: flex;
    justify-content: end;
    gap: 15px
}

.settings-container .orders-container .confirm .check {
    color: #1bd18e;
    display: flex;
    align-items: center;
    height: 35px
}

.settings-container .orders-container .confirm .check.declined {
    color: var(--primary)
}

.settings-container .orders-container .confirm .check.declined i {
    color: var(--primary)
}

.settings-container .orders-container .confirm .check span {
    font-size: 13px
}

.settings-container .orders-container .confirm .check i {
    color: #1bd18e;
    background-color: rgba(0, 0, 0, 0);
    padding: 0
}

.settings-container .orders-container i {
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 31px;
    height: 31px;
    border-radius: 5px;
    background-color: var(--primary)
}

.settings-container .orders-container .items {
    margin: 1em 0px;
    color: var(--text-color);
    display: flex;
    align-items: center;
    font-size: 13px;
    gap: 3px
}

.settings-container .orders-container .items span {
    font-weight: 500
}

.settings-container .orders-container .more-boxes {
    display: none
}

.settings-container .orders-container .more-boxes.active {
    display: flex
}

.settings-container .orders-container .box {
    width: 242px;
    margin: 10px;
    border-radius: 15px;
    padding: 10px;
    color: var(--text-color);
    background-color: var(--lighter-box);
    border: 1px solid var(--border);
    position: relative
}

.settings-container .orders-container .box .text p {
    color: #97989f;
    font-size: 12px
}

.settings-container .orders-container .box .discount {
    position: absolute;
    top: 10px;
    left: 10px;
    background-color: var(--primary);
    padding: .3em .5em .01em .5em;
    border-radius: 20px;
    color: #fff;
    font-size: 11px
}

.settings-container .orders-container .box .image {
    display: flex;
    align-items: center;
    gap: 10px
}

.settings-container .orders-container .box .image img {
    width: 82px;
    height: 82px;
    border-radius: 11px
}

.settings-container .orders-container .box .image a {
    text-decoration: none;
    color: var(--primary)
}

.settings-container .orders-container .box .image h5 {
    font-size: 14px
}

.settings-container .orders-container .box .image span {
    font-size: 11px
}

.settings-container .orders-container .seeAll {
    display: flex;
    align-items: center;
    justify-content: end;
    color: var(--primary);
    font-size: 12px;
    cursor: pointer
}

.settings-container .orders-container .seeAll .less {
    display: none
}

.settings-container .orders-container .seeAll.active .all {
    display: none
}

.settings-container .orders-container .seeAll.active .less {
    display: flex
}

.settings-container .orders-container .seeAll i {
    background-color: rgba(0, 0, 0, 0);
    color: var(--primary)
}

.settings-container .rewards {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em
}

.settings-container .rewards .main-box {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: stretch;
    gap: 1em;
    flex-wrap: wrap;
    width: 100%
}

.settings-container .rewards .main-box .box {
    background-color: var(--lighter-box);
    border-radius: 15px;
    color: var(--text-color);
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    padding: 1em;
    flex: 1;
    min-width: 140px;
    text-align: center
}

.settings-container .rewards .main-box .box svg {
    margin-bottom: .5em
}

.settings-container .rewards .main-box .box h4 {
    font-weight: normal;
    font-size: .9em;
    opacity: .9;
    margin: 0;
    padding: 0;
    color: var(--light-text-color)
}

.settings-container .rewards .main-box .box p {
    font-weight: bold;
    font-size: 1.1em
}

.settings-container .rewards .main-box .box a {
    font-size: .8em;
    color: var(--primary);
    text-decoration: underline;
    margin-top: -0.5em
}

.settings-container .rewards .rewards-field {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .2em;
    width: 100%
}

.settings-container .rewards .rewards-field .fld-title {
    font-size: .9em;
    font-weight: 400;
    width: 100%;
    color: var(--light-text-color)
}

.settings-container .rewards .rewards-field .fld-con {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    width: 100%;
    gap: 1em
}

.settings-container .rewards .rewards-field .fld-con .fld {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    padding: .7em 1em;
    background-color: var(--box);
    border-radius: 7px;
    border: 1px solid rgba(0, 0, 0, .1254901961);
    flex: 1
}

.settings-container .rewards .rewards-field .fld-con .fld input {
    border: none;
    outline: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: .9em;
    width: 100%;
    padding: 0;
    margin: 0;
    margin-bottom: -0.3em;
    color: var(--light-text-color)
}

.settings-container .rewards .rewards-field .fld-con .fld button.sub-btn {
    background-color: rgba(0, 0, 0, 0);
    color: #000;
    cursor: pointer;
    outline: none;
    border: none;
    appearance: none;
    padding: 0;
    margin: 0;
    color: #ec335a
}

.settings-container .rewards .rewards-field .fld-con button.main-btn {
    background-color: var(--box);
    color: var(--light-text-color);
    border-radius: 7px;
    cursor: pointer;
    outline: none;
    border: 1px solid var(--box);
    appearance: none;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0;
    margin: 0;
    gap: .5em;
    padding: .6em 1em .3em 1em;
    font-size: .9em
}

.settings-container .rewards .rewards-field #alert {
    font-size: .8em;
    color: var(--primary)
}

.settings-container .rewards .ranks-progress {
    background-color: #c02648;
    padding: 1.5em 2em;
    border-radius: 7px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .5em;
    width: 100%;
    margin-bottom: 1em
}

.settings-container .rewards .ranks-progress .per-rank {
    border: 3px solid hsla(0, 0%, 100%, .0274509804);
    width: 65px;
    height: 65px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 58.84%);
    border-radius: 14px
}

.settings-container .rewards .ranks-progress .per-rank::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border: 3px solid hsla(0, 0%, 100%, .031372549);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55.71%, rgba(255, 255, 255, 0.15) 99.65%);
    z-index: 0;
    border-radius: 7px
}

.settings-container .rewards .ranks-progress .per-rank .img {
    width: 65%;
    height: auto;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.settings-container .rewards .ranks-progress .per-rank .rank-tooltip {
    position: absolute;
    top: calc(100% + 13px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #ec335a;
    color: #fff;
    padding: .7em 1em .3em 1em;
    border-radius: 50px;
    font-size: .8em;
    width: 100px;
    text-align: center
}

.settings-container .rewards .ranks-progress .per-rank .rank-tooltip::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-bottom: 8px solid #ec335a
}

.settings-container .rewards .ranks-progress .rank-sep {
    flex: 1;
    background: hsla(0, 0%, 100%, .3137254902);
    height: 7px;
    border-radius: 50px
}

.settings-container .rewards .ranks-progress .rank-sep.active {
    background: #ffa800
}

.settings-container .rewards .requests-history {
    width: 100%
}

.settings-container .rewards .requests-history .requests-history-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: 2em 0
}

.settings-container .rewards .requests-history .requests-history-header h2 {
    font-size: 1.1em;
    font-weight: 500;
    padding: 0;
    margin: 0;
    margin-bottom: -0.7em;
    color: var(--light-text-color)
}

.settings-container .rewards .requests-history .requests-history-header .button {
    background-color: #ec335a;
    padding: .5em 1em .3em 1em;
    border-radius: 50px;
    font-size: .8em;
    color: #fff
}

.settings-container .rewards .requests-history table {
    padding: 0
}

.settings-container .rewards .requests-history table thead {
    background-color: #ec335a;
    color: #fff
}

.settings-container .rewards .requests-history table tr th {
    color: #fff;
    font-weight: normal
}

.settings-container .rewards .requests-history table tr:last-child td,
.settings-container .rewards .requests-history table tr.no-border td {
    border-bottom: none
}

.settings-container .rewards .requests-history table tr td .image {
    width: 40px;
    height: 40px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .3137254902);
    margin: 0 auto
}

.settings-container .rewards .requests-history table tr td .rank-image {
    width: 27px;
    height: 27px
}

.settings-container .rewards .requests-history table tr td.approved {
    color: #17b37a
}

.settings-container .rewards .requests-history table tr td.cancell {
    color: var(--primary)
}

.settings-container .rewards .requests-history table tr td.pending {
    color: #c4581e
}

@media(min-width: 50px)and (max-width: 799px) {
    .settings-container .rewards .main-box {
        flex-direction: column;
        gap: 1em
    }
}

.settings-container .cart {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3em;
    width: 100%;
    padding: 0
}

.settings-container .cart .cart-items {
    display: flex;
    flex-direction: column;
    gap: 1.2em;
    width: 100%
}

@media(min-width: 50px)and (max-width: 475px) {
    .settings-container.cart-container .account-info {
        display: none
    }

    .settings-container .cart {
        width: 100%
    }

    .settings-container .cart .cart-box {
        gap: 15px
    }
}

.settings-container .cart .cart-box {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-color: var(--lighter-box);
    border-radius: 20px;
    padding: 1em;
    border: .5px solid var(--border);
    width: 100%
}

.settings-container .cart .cart-box .upper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
    gap: 1em
}

.settings-container .cart .cart-box .lower {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5em;
    margin-top: 1em;
    border-top: 1px solid var(--border);
    padding-top: 1em;
    width: 100%
}

.settings-container .cart .cart-box .lower .per-fld {
    direction: ltr;
    font-size: .9em;
    text-align: left;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    text-overflow: unset
}

.settings-container .cart .cart-box .lower .per-fld .ellipsis {
    text-overflow: ellipsis
}

.settings-container .cart .cart-box img {
    width: 75px;
    height: 75px;
    border-radius: 10px
}

.settings-container .cart .cart-box .add {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .7em
}

.settings-container .cart .cart-box .add i {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background-color: var(--lighter-box);
    border: 1px solid var(--border);
    display: inline-flex;
    font-size: 12px;
    color: var(--text-color);
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer
}

.settings-container .cart .cart-box .left-part {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: .5em
}

.settings-container .cart .cart-box .left-part .custom-row {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5em;
    flex-wrap: wrap
}

.settings-container .cart .cart-box .left-part .custom-row .price-con {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em
}

.settings-container .cart .cart-box .left-part .custom-row .price-con .price {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    font-weight: 500;
    color: var(--light-text-color);
    line-height: 1;
    margin-bottom: -0.2em
}

.settings-container .cart .cart-box .left-part .cashback {
    border-radius: 5px;
    background-color: #009a00;
    color: #fff;
    padding: .15em .3em .25em .3em;
    font-size: .75em;
    text-align: center;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: .3em
}

.settings-container .cart .cart-box .left-part .cashback .number {
    font-family: sans-serif;
    font-size: 1.1em;
    line-height: 1;
    margin-bottom: -0.2em
}

.settings-container .cart .cart-box .left-part .cashback svg {
    width: 15px;
    height: 15px
}

.settings-container .cart .cart-box .image .text {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: .5em
}

.settings-container .cart .cart-box .image .text span {
    font-size: 14px
}

.settings-container .cart .cart-box .image .text .name {
    display: flex;
    align-items: center;
    gap: 5px;
    color: var(--light-text-color)
}

.settings-container .cart .cart-box .image .text .account {
    font-size: 11px
}

.settings-container .cart .cart-box .image .text .sub-name {
    opacity: .5
}

.settings-container .cart .cart-box .disc {
    display: flex;
    align-items: center;
    gap: 20px
}

.settings-container .cart .cart-box .disc .main {
    color: #6b6c72;
    text-decoration: line-through
}

.settings-container .copyText {
    color: #97989f;
    font-size: 12px
}

.settings-container .copy {
    cursor: pointer;
    display: flex;
    gap: 5px
}

.settings-container .copy p {
    font-size: 11px
}

.settings-container .copy i {
    color: var(--primary)
}

.settings-container .copy .fa-check {
    display: none
}

.settings-container .copy.active .fa-check {
    display: inline
}

.settings-container .copy.active .fa-link {
    display: none
}

.settings-container .copy span {
    color: #97989f
}

.settings-container .copy .copy-word {
    color: var(--primary);
    text-decoration: underline
}

.settings-container .rank {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
    width: 100%;
    overflow-x: hidden
}

.settings-container .rank .my-rank-con {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em;
    background-color: var(--lighter-box);
    border-radius: 10px;
    padding: 1.5em;
    width: 100%
}

.settings-container .rank .my-rank-con img {
    width: 80px
}

.settings-container .rank .my-rank-con .text {
    flex: 1
}

.settings-container .rank .my-rank-con .text h3 {
    font-size: 1.1em;
    font-weight: bold;
    color: var(--light-text-color)
}

.settings-container .rank .my-rank-con .text p {
    font-size: .9em;
    opacity: .8;
    color: var(--light-text-color)
}

.settings-container .rank .my-rank-con .discount {
    background-color: rgba(var(--primary), 0.15);
    color: var(--primary);
    padding: .6em 1em .4em 1em;
    border-radius: 7px;
    font-size: .8em;
    text-align: center;
    word-break: keep-all;
    align-self: flex-start
}

.settings-container .rank .ranks-progress {
    background-color: #c02648;
    padding: 1.5em 2em;
    border-radius: 7px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: .5em;
    width: 100%;
    margin-bottom: 1em
}

.settings-container .rank .ranks-progress .per-rank {
    border: 3px solid hsla(0, 0%, 100%, .0274509804);
    width: 65px;
    height: 65px;
    position: relative;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 58.84%);
    border-radius: 14px
}

.settings-container .rank .ranks-progress .per-rank::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    border: 3px solid hsla(0, 0%, 100%, .031372549);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 55.71%, rgba(255, 255, 255, 0.15) 99.65%);
    z-index: 0;
    border-radius: 7px
}

.settings-container .rank .ranks-progress .per-rank .img {
    width: 65%;
    height: auto;
    aspect-ratio: 1/1;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat
}

.settings-container .rank .ranks-progress .per-rank .rank-tooltip {
    position: absolute;
    top: calc(100% + 13px);
    left: 50%;
    transform: translateX(-50%);
    background-color: #ec335a;
    color: #fff;
    padding: .7em 1em .3em 1em;
    border-radius: 50px;
    font-size: .8em;
    width: 100px;
    text-align: center
}

.settings-container .rank .ranks-progress .per-rank .rank-tooltip::before {
    content: "";
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid rgba(0, 0, 0, 0);
    border-right: 8px solid rgba(0, 0, 0, 0);
    border-bottom: 8px solid #ec335a
}

.settings-container .rank .ranks-progress .rank-sep {
    flex: 1;
    background: hsla(0, 0%, 100%, .3137254902);
    height: 7px;
    border-radius: 50px
}

.settings-container .rank .ranks-progress .rank-sep.active {
    background: #ffa800
}

.settings-container .rank .top-users {
    width: 100%
}

.settings-container .rank .top-users .top-users-header {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    padding: 2em 0
}

.settings-container .rank .top-users .top-users-header h2 {
    font-size: 1.1em;
    font-weight: 500;
    padding: 0;
    margin: 0;
    margin-bottom: -0.7em;
    color: var(--light-text-color)
}

.settings-container .rank .top-users .top-users-header .button {
    background-color: #ec335a;
    padding: .5em 1em .3em 1em;
    border-radius: 50px;
    font-size: .8em;
    color: #fff
}

.settings-container .rank .top-users table {
    padding: 0
}

.settings-container .rank .top-users table thead {
    background-color: #ec335a;
    color: #fff
}

.settings-container .rank .top-users table tr th {
    color: #fff;
    font-weight: normal
}

.settings-container .rank .top-users table tr:last-child td,
.settings-container .rank .top-users table tr.no-border td {
    border-bottom: none
}

.settings-container .rank .top-users table tr td .image {
    width: 40px;
    height: 40px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid rgba(0, 0, 0, .3137254902);
    margin: 0 auto
}

.settings-container .rank .top-users table tr td .rank-image {
    width: 27px;
    height: 27px
}

@media(min-width: 800px)and (max-width: 1050px) {
    .settings-container .rank .my-rank-con {
        justify-content: center
    }

    .settings-container .rank .my-rank-con .text {
        min-width: 300px
    }

    .settings-container .rank .ranks-progress {
        padding: 1.2em 1.5em;
        gap: .2em
    }

    .settings-container .rank .ranks-progress .per-rank {
        width: 50px;
        height: 50px;
        border-radius: 10px
    }

    .settings-container .rank .ranks-progress .per-rank .img {
        width: 65%
    }

    .settings-container .rank .ranks-progress .per-rank .rank-tooltip {
        width: 120px
    }

    .settings-container .rank .ranks-progress .rank-sep {
        height: 4px
    }
}

@media(min-width: 480px)and (max-width: 799px) {
    .settings-container .rank .my-rank-con {
        justify-content: center;
        align-items: center;
        flex-direction: column
    }

    .settings-container .rank .my-rank-con .text {
        min-width: unset;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%
    }

    .settings-container .rank .my-rank-con .text h3 {
        text-align: center
    }

    .settings-container .rank .my-rank-con .text p {
        text-align: center
    }

    .settings-container .rank .my-rank-con .discount {
        align-self: unset
    }

    .settings-container .rank .ranks-progress {
        padding: 1.2em 1.5em;
        gap: .2em
    }

    .settings-container .rank .ranks-progress .per-rank {
        width: 50px;
        height: 50px;
        border-radius: 10px
    }

    .settings-container .rank .ranks-progress .per-rank .img {
        width: 65%
    }

    .settings-container .rank .ranks-progress .per-rank .rank-tooltip {
        width: 120px
    }

    .settings-container .rank .ranks-progress .rank-sep {
        height: 4px
    }

    .settings-container .rank .top-users {
        overflow: hidden;
        max-width: 100%
    }

    .settings-container .rank .top-users .table-responsive {
        max-width: 100%;
        overflow-x: auto
    }
}

@media(min-width: 50px)and (max-width: 650px) {
    .settings-container .rank .my-rank-con {
        justify-content: center;
        align-items: center;
        flex-direction: column
    }

    .settings-container .rank .my-rank-con .text {
        min-width: unset;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%
    }

    .settings-container .rank .my-rank-con .text h3 {
        text-align: center
    }

    .settings-container .rank .my-rank-con .text p {
        text-align: center
    }

    .settings-container .rank .my-rank-con .discount {
        align-self: unset
    }

    .settings-container .rank .ranks-progress {
        padding: .6em;
        gap: .1em
    }

    .settings-container .rank .ranks-progress .per-rank {
        width: 45px;
        height: 45px;
        border-radius: 10px
    }

    .settings-container .rank .ranks-progress .per-rank .img {
        width: 65%
    }

    .settings-container .rank .ranks-progress .per-rank .rank-tooltip {
        width: 120px
    }

    .settings-container .rank .ranks-progress .rank-sep {
        height: 4px
    }
}

.settings-container .rank .det {
    width: 100%;
    color: #000
}

.settings-container .rank .det p {
    font-size: 14px
}

.settings-container .rank .det p.curr span {
    font-weight: bold
}

.settings-container .rank .det .refeer {
    background-color: var(--lighter-box);
    padding: 20px;
    border-radius: 15px
}

.settings-container .rank .det .refeer .links .link {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px
}

.settings-container .rank .det .refeer button {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #fff;
    background-color: var(--primary);
    color: #fff;
    padding: 5px 40px;
    border: none;
    font-size: 15px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.settings-container .summary {
    background-color: rgba(0, 0, 0, 0);
    height: -moz-fit-content;
    height: fit-content;
    width: 240px;
    color: var(--light-text-color);
    border-radius: 20px;
    box-shadow: 0 0 20px 0 var(--shadow);
    background-color: var(--background);
    padding: 1em
}

.settings-container .summary .code-title {
    font-weight: 500;
    font-size: .9em;
    color: var(--light-text-color)
}

@media(min-width: 50px)and (max-width: 1050px) {
    .settings-container .cart {
        flex-direction: column;
        gap: 2em;
        flex: 1
    }

    .settings-container .main-sideBar.cart-summary-con,
    .settings-container .summary {
        width: 100%
    }
}

.settings-container .summary .allPrices {
    padding: 10px 0px
}

.settings-container .summary .allPrices .box {
    display: flex;
    font-size: 14px;
    justify-content: space-between
}

.settings-container .summary .allPrices .box .text span {
    color: #97989f;
    font-size: 12px
}

.settings-container .summary .total {
    border-top: 1px dashed var(--text-color);
    padding-top: 1em
}

.settings-container .summary .discount,
.settings-container .summary .total {
    display: flex;
    font-size: 14px;
    justify-content: space-between;
    margin-bottom: .2em
}

.settings-container .summary .total p {
    font-size: 16px;
    font-weight: bold;
    color: #ec335a
}

.settings-container .checkOut {
    background-color: var(--primary);
    color: #fff;
    width: 100%;
    padding: .6em 1em;
    border: none;
    font-size: 1em;
    outline: none;
    border-radius: 50px;
    text-align: center;
    cursor: pointer;
    justify-content: center;
    align-items: center
}

.settings-container .checkOut:hover {
    color: #fff;
    background-color: var(--primary)
}

.settings-container #mainCart.active {
    display: none
}

.settings-container #mainSidebar.active {
    display: none
}

.settings-container #mainPayAndGift {
    display: none
}

.settings-container #mainPayAndGift.active {
    display: block
}

.settings-container #mainPayAndGift .backToCart {
    cursor: pointer;
    font-size: 1em;
    font-weight: 500;
    margin-bottom: 1.5em;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em
}

.settings-container #mainPayAndGift .backToCart i {
    color: var(--primary);
    font-size: .9em;
    margin-top: -0.25em
}

.settings-container .pay.summary {
    padding: 5px 0;
    margin-bottom: .5em;
    width: 100%;
    box-shadow: unset
}

.settings-container .pay.summary input {
    font-size: 13px;
    width: 60%
}

.settings-container .pay.summary span {
    padding: 5px;
    font-size: 13px;
    width: 40%
}

.settings-container .pay .inp {
    background-color: var(--box);
    border: unset;
    border-radius: 7px;
    display: none;
    align-items: center;
    justify-content: space-between;
    padding: 0 .7em;
    gap: 1em
}

.settings-container .pay .inp.active {
    display: flex
}

.settings-container .pay .inp input {
    color: var(--light-text-color);
    background-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    padding: 1.2em 0 .8em 0;
    flex: 1
}

.settings-container .pay .inp button {
    cursor: pointer;
    padding: 0
}

.settings-container .pay .coupon-code {
    display: none
}

.settings-container .pay .coupon-code.active {
    display: block
}

.settings-container .pay .coupon-code .disc {
    color: #97989f;
    font-size: 14px;
    margin-top: 15px
}

.settings-container .pay .coupon-code .main i {
    color: var(--primary);
    font-size: 15px
}

.settings-container .pay .coupon-code .main span {
    font-size: 14px
}

.settings-container .pay .coupon-code .main span.remove {
    color: var(--primary);
    text-decoration: underline;
    cursor: pointer
}

.tooltip-custom {
    position: relative
}

.tooltip-custom .tooltip-container {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    min-width: 150px
}

.tooltip-custom .tooltip-container .tooltip-content {
    margin-bottom: 15px;
    background-color: rgba(236, 51, 90, .3137254902);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(236, 51, 90, .8);
    border-radius: 10px;
    padding: .7em;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%
}

.tooltip-custom .tooltip-container .tooltip-content i {
    color: var(--primary);
    font-size: 20px
}

.tooltip-custom .tooltip-container .tooltip-content a {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center
}

.tooltip-custom .tooltip-container .tooltip-content::before {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    border-style: solid;
    border-width: 10px;
    border-color: rgba(0, 0, 0, 0) rgba(0, 0, 0, 0) #ec335a rgba(0, 0, 0, 0)
}

.tooltip-custom .tooltip-container.toolip-show {
    left: 0;
    right: 0;
    transform: none
}

.tooltip-custom .tooltip-container.toolip-show .tooltip-content {
    width: 100%;
    height: 100%;
    padding: 10px;
    color: #fff;
    font-size: 13px;
    font-weight: normal
}

.tooltip-custom:hover .tooltip-container {
    display: inline-block
}

.success-page {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    background-color: var(--box);
    border-radius: 20px;
    width: 900px;
    margin: 0 auto;
    margin-top: 8em;
    padding: 2em;
    gap: 1.5em
}

@media(max-width: 950px) {
    .success-page {
        width: 100%;
        padding: 1em
    }
}

@media(max-width: 550px) {
    .success-page {
        background-color: rgba(0, 0, 0, 0)
    }
}

.success-page .right {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1.2em;
    width: 100%;
    text-align: center
}

.success-page .right .main-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%
}

.success-page .right .main-header svg {
    width: 50px;
    height: 50px
}

.success-page .right .main-header .header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .7em;
    flex: 1;
    margin-bottom: 1em
}

@media(max-width: 550px) {
    .success-page .right .main-header .header {
        justify-content: center;
        align-items: center;
        text-align: center;
        gap: 1.5em
    }
}

.success-page .right .main-header .header .upper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: .5em
}

@media(max-width: 550px) {
    .success-page .right .main-header .header .upper {
        flex-direction: column;
        text-align: center;
        gap: 2em
    }
}

.success-page .right .main-header .header .upper i {
    color: #096;
    font-size: 1.5em
}

.success-page .right .main-header .header .upper h1 {
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    font-weight: 500;
    margin-bottom: -0.2em;
    color: var(--light-text-color)
}

.success-page .right .main-header .header .upper svg {
    width: 35px;
    height: 35px
}

@media(max-width: 550px) {
    .success-page .right .main-header .header .upper svg {
        width: 75px;
        height: 75px
    }
}

.success-page .right .main-header .header .lower {
    font-size: 1.2em
}

@media(max-width: 550px) {
    .success-page .right .main-header .page-logo {
        display: none
    }
}

.success-page .right .sub-header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1em;
    text-align: initial;
    width: 100%
}

.success-page .right .sub-header .order-number {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em
}

.success-page .right .sub-header .order-number i {
    cursor: pointer;
    user-select: none;
    margin-inline-start: .2em;
    color: #858585
}

.success-page .right .sub-header .order-number span {
    direction: ltr;
    font-weight: bold
}

.success-page .right .sub-header .date {
    direction: ltr
}

.success-page .right p {
    opacity: .7;
    font-size: .9em;
    line-height: 1.5em
}

.success-page .right .note {
    background-color: rgba(106, 89, 16, .1882352941);
    text-align: initial;
    border-radius: 10px;
    padding: .7em
}

.success-page .right .btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 1em
}

.success-page .right .btns a {
    background-color: var(--box);
    border: 1px solid --border;
    border-radius: 50px;
    padding: .5em 1em .3em 1em;
    color: var(--light-text-color)
}

.success-page .right .btns a.cta {
    background-color: #ec335a;
    color: #fff;
    border: 1px solid #ec335a
}

.success-page .left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.2em;
    background-color: var(--mid-box);
    width: 100%;
    border-radius: 15px;
    padding: 1em
}

.success-page .left h2 {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--light-text-color)
}

.success-page .left h3 {
    font-size: 1em;
    font-weight: 500;
    color: var(--light-text-color)
}

.success-page .left .items {
    display: flex;
    flex-direction: column;
    gap: .5em;
    width: 100%
}

.success-page .left .items .per-item .item-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
    flex-wrap: wrap;
    width: 100%
}

.success-page .left .items .per-item .item-details .img {
    width: 100px;
    height: 100px;
    background-color: var(--box);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 10px
}

.success-page .left .items .per-item .item-details .img-left {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    flex: 1
}

.success-page .left .items .per-item .item-details .img-left .texts {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: .5em;
    flex-wrap: wrap;
    width: 100%
}

.success-page .left .items .per-item .item-details .img-left .texts .prices {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .3em;
    color: var(--text-color);
    direction: ltr
}

.success-page .left .items .per-item .item-details .img-left .texts .prices .price {
    font-weight: 600;
    font-family: sans-serif;
    font-size: .8em;
    white-space: nowrap
}

.success-page .left .items .per-item .item-details .img-left .texts .prices .old-price {
    opacity: .5;
    position: relative;
    font-family: sans-serif;
    font-size: .8em;
    white-space: nowrap
}

.success-page .left .items .per-item .item-details .img-left .texts .prices .old-price::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 1px;
    border-radius: 5px;
    background-color: var(--text-color)
}

.success-page .left .items .per-item .item-details .img-left .codes {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1em;
    flex-wrap: wrap;
    width: 100%
}

.success-page .left .items .per-item .item-details .img-left .codes .real-codes {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em;
    flex-wrap: wrap;
    width: 100%
}

@media(max-width: 550px) {
    .success-page .left .items .per-item .item-details .img-left .codes .real-codes {
        flex-direction: column
    }
}

.success-page .left .items .per-item .item-details .img-left .codes .real-codes .per-code {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    font-size: .9em;
    white-space: nowrap
}

.success-page .left .items .per-item .item-details .img-left .codes .real-codes .per-code i {
    cursor: pointer;
    user-select: none;
    margin-inline-start: .2em;
    color: #858585
}

.success-page .left .items .per-item .item-details .img-left .codes .real-codes .per-code span {
    direction: ltr
}

.success-page .left .items .per-item .item-details .img-left .codes .collapse-btn {
    color: var(--primary);
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em;
    cursor: pointer;
    user-select: none;
    font-size: .9em;
    line-height: 1em
}

.success-page .left .items .per-item .item-details .img-left .codes .collapse-btn span {
    margin-bottom: -0.2em
}

@media(max-width: 550px) {
    .success-page .left .items .per-item .item-details .img-left .codes .collapse-btn {
        display: none
    }
}

.success-page .left .items .per-item .item-help {
    margin-top: 1.5em
}

.success-page .left .items .per-item .item-help img,
.success-page .left .items .per-item .item-help iframe,
.success-page .left .items .per-item .item-help video,
.success-page .left .items .per-item .item-help image {
    max-width: 100%
}

.success-page .left .items .per-item .mobile-collapse-btn {
    color: var(--primary);
    display: none;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    cursor: pointer;
    user-select: none;
    font-size: .9em;
    line-height: 1em;
    width: 100%;
    text-align: center;
    padding: 1em;
    margin-top: .5em
}

.success-page .left .items .per-item .mobile-collapse-btn span {
    margin-bottom: -0.2em
}

@media(max-width: 550px) {
    .success-page .left .items .per-item .mobile-collapse-btn {
        display: flex
    }
}

.success-page .last-details {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 1em;
    flex-wrap: wrap;
    width: 100%
}

@media(max-width: 550px) {
    .success-page .last-details {
        flex-direction: column
    }
}

.success-page .last-details .first {
    display: inline-flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: .5em;
    flex: 1
}

@media(max-width: 550px) {
    .success-page .last-details .first {
        width: 100%
    }
}

.success-page .last-details .first span {
    font-weight: bold;
    color: var(--primary);
    white-space: nowrap
}

.success-page .last-details .second {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: .5em
}

@media(max-width: 550px) {
    .success-page .last-details .second {
        flex-direction: column-reverse;
        justify-content: center;
        width: 100%
    }
}

.success-page .last-details .second a {
    background-color: var(--mid-box);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: .5em 1em .3em 1em;
    color: var(--light-text-color);
    text-align: center
}

@media(max-width: 550px) {
    .success-page .last-details .second a {
        width: 100%
    }
}

.success-page .last-details .second a.cta {
    background-color: #ec335a;
    color: #fff;
    border: 1px solid #ec335a
}

.error-page {
    margin-top: 8em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 1em
}

.error-page .main {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 3em;
    width: 700px;
    border-radius: 20px;
    background-color: var(--lighter-box);
    padding: 2em
}

@media(max-width: 800px) {
    .error-page .main {
        width: 95%
    }
}

.error-page .texts {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 1em;
    text-align: center
}

.error-page .texts h1 {
    color: #ff3b30;
    font-size: 1.5em;
    line-height: 1.5
}

.error-page .texts p {
    color: var(--text-color);
    font-size: 1.2em;
    line-height: 1.5
}

.error-page .btns {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 1em
}

.error-page .btns a {
    background-color: rgba(0, 0, 0, 0);
    border: 1px solid var(--border);
    border-radius: 50px;
    padding: .5em 1em .3em 1em;
    color: var(--light-text-color)
}

.error-page .btns a.cta {
    background-color: #ec335a;
    color: #fff;
    border: 1px solid #ec335a
}

.tabs-main-con {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em;
    width: 100%
}

.tabs-main-con .tabs {
    width: 100%;
    background-color: var(--lighter-box);
    border-radius: 17px;
    padding: .6em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 1em;
    flex-wrap: wrap
}

.tabs-main-con .tabs .per-tab {
    flex: 1;
    display: inline-flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: .5em;
    padding: .7em 1em;
    border-radius: 10px;
    background-color: rgba(0, 0, 0, 0);
    color: var(--text-color);
    user-select: none;
    cursor: pointer
}

.tabs-main-con .tabs .per-tab span {
    margin-bottom: -0.2em
}

.tabs-main-con .tabs .per-tab svg path {
    fill: rgba(var(--text-color), 0.5)
}

.tabs-main-con .tabs .per-tab.active {
    background-color: #ec335a;
    color: #fff
}

.tabs-main-con .tabs .per-tab.active svg path {
    fill: #fff
}

.tabs-main-con .tab-contents {
    width: 100%;
    padding-bottom: 2em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start
}

.tabs-main-con .tab-contents .per-con {
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    display: none;
    width: 100%
}

.tabs-main-con .tab-contents .per-con.active {
    display: flex
}

.tabs-main-con .tab-contents .per-con .method {
    width: 100%
}

.tabs-main-con .tab-contents .per-con .pay {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    width: 100%
}

.tabs-main-con .tab-contents .per-con .pay p {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
    gap: 1em
}

.tabs-main-con .tab-contents .per-con .pay p span {
    color: var(--light-text-color);
    font-weight: normal;
    font-size: 1em
}

.tabs-main-con .tab-contents .per-con .pay p span:last-child {
    font-weight: bold
}

.tabs-main-con .tab-contents .per-con .pay button {
    width: 100%;
    border-radius: 7px;
    padding: .7em 1em .5em 1em
}

.conditions-container {
    min-height: 100vh;
    margin-top: 10em;
    position: relative;
    color: var(--text-color)
}

.conditions-container h1 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 1em;
    color: var(--light-text-color)
}

.conditions-container h2 {
    font-size: 1.2em;
    font-weight: 500;
    margin-top: 1em
}

.conditions-container h3,
.conditions-container h4,
.conditions-container h5,
.conditions-container h6 {
    font-size: 1em;
    font-weight: 500;
    margin-top: .5em
}

.conditions-container h2,
.conditions-container h3,
.conditions-container h4,
.conditions-container h5,
.conditions-container h6 {
    color: var(--light-text-color);
    margin-bottom: .5em
}

.conditions-container ul {
    margin-inline-start: 1em
}

.conditions-container .back-img {
    position: absolute;
    top: -100px;
    z-index: -11;
    right: -130px;
    transform: scaleX(-1)
}

.allBoxes {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 2em;
    padding: 0
}

@media(max-width: 390px) {
    .allBoxes {
        gap: .5em
    }
}

@media(min-width: 391px)and (max-width: 700px) {
    .allBoxes {
        gap: 1em
    }
}

@media(max-width: 389px) {
    .allBoxes {
        flex-direction: column;
        gap: .5em
    }
}

.allBoxes .mainbox {
    flex: 1;
    min-width: 45%
}

@media(max-width: 400px) {
    .allBoxes .mainbox {
        width: 100%
    }
}

.allBoxes .mainbox .box {
    background-color: var(--lighter-box);
    padding: 30px 20px;
    border-radius: 15px;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em
}

@media(max-width: 390px) {
    .allBoxes .mainbox .box {
        padding: 20px 10px
    }
}

.allBoxes .mainbox .box .header {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

@media(max-width: 575px) {
    .allBoxes .mainbox .box .header {
        justify-content: center;
        text-align: center
    }
}

.allBoxes .mainbox .box .header .title {
    font-size: 18px;
    color: var(--light-text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.allBoxes .mainbox .box .header .show-more-link {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 1em;
    color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity));
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

@media(max-width: 575px) {
    .allBoxes .mainbox .box .header .show-more-link {
        display: none
    }
}

.allBoxes .mainbox .box .boxes {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1em;
    width: 100%
}

@media(max-width: 300px) {
    .allBoxes .mainbox .box .boxes {
        grid-template-columns: repeat(1, 1fr)
    }
}

@media(max-width: 1211px) {
    .allBoxes .mainbox .box .boxes {
        grid-template-columns: repeat(2, 1fr)
    }
}

@media(max-width: 390px) {
    .allBoxes .mainbox .box .boxes {
        gap: .4em
    }
}

.allBoxes .mainbox .box .boxes .mini {
    display: inline-flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1em;
    width: 100%;
    color: var(--text-color)
}

@media(max-width: 700px) {
    .allBoxes .mainbox .box .boxes .mini {
        display: none
    }

    .allBoxes .mainbox .box .boxes .mini:nth-child(-n+6) {
        display: inline-flex
    }
}

@media(max-width: 780px) {
    .allBoxes .mainbox .box .boxes .mini .image {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center
    }
}

.allBoxes .mainbox .box .boxes .mini .image img {
    width: 70px;
    height: auto;
    aspect-ratio: 1/1;
    object-fit: cover;
    border-radius: 10px
}

.allBoxes .mainbox .box .boxes .mini .image .text .star {
    color: #f8c346
}

.allBoxes .mainbox .box .boxes .mini .image .text .star span {
    font-size: 12px
}

.allBoxes .mainbox .box .boxes .mini .image .text .name {
    font-size: 14px;
    font-weight: bold;
    color: var(--light-text-color);
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    -webkit-box-orient: vertical
}

.allBoxes .mainbox .box .boxes .mini .image .text .type {
    font-size: 14px;
    color: rgba(var(--light-text-color), 0.7)
}

.allBoxes .mainbox .box .show-more-link-mobile {
    display: none
}

@media(max-width: 575px) {
    .allBoxes .mainbox .box .show-more-link-mobile {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 1em;
        color: rgba(var(--bs-dark-rgb), var(--bs-text-opacity));
        margin: 0 auto
    }
}

.contact-us {
    margin-top: 10em;
    margin-bottom: 10em;
    position: relative;
    color: #fff;
    background-color: hsla(0, 0%, 100%, .062745098);
    padding: 3em;
    border-radius: 20px;
    max-width: 1100px;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 2em
}

@media(max-width: 500px) {
    .contact-us {
        margin-top: 6em;
        border-radius: 0;
        background-color: unset;
        padding: 1em
    }
}

.contact-us h1 {
    font-size: 1.8em;
    margin-bottom: .05em;
    font-weight: bolder
}

.contact-us p {
    font-size: 1em;
    line-height: 1.7em;
    opacity: .8
}

.contact-us form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    max-width: 600px
}

@media(min-width: 1000px)and (max-width: 1200px) {
    .contact-us form {
        max-width: 500px
    }
}

.contact-us form .input {
    position: relative;
    border: 1px solid hsla(0, 0%, 100%, .3333333333);
    background-color: hsla(0, 0%, 100%, .0352941176);
    padding: .7em;
    border-radius: 7px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1em
}

.contact-us form .input input,
.contact-us form .input textarea {
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    border: none;
    outline: none;
    color: #fff;
    resize: none
}

.contact-us form .input input::placeholder,
.contact-us form .input textarea::placeholder {
    color: hsla(0, 0%, 100%, .4588235294)
}

.contact-us form .input label {
    border-radius: 10px;
    display: flex;
    padding: 0 1em
}

.contact-us form button {
    background-color: var(--primary);
    color: #fff;
    padding: 10px 70px;
    border: none;
    font-size: 16px;
    outline: none;
    border-radius: 25px;
    cursor: pointer;
    width: 100%
}

.contact-us .contact-us-image-container img {
    width: 460px
}

@media(min-width: 50px)and (max-width: 999px) {
    .contact-us .contact-us-image-container {
        display: none
    }

    .contact-us form {
        max-width: unset
    }
}

.contact-us .back-img {
    position: absolute;
    top: -100px;
    z-index: -11;
    right: -130px;
    transform: scaleX(-1)
}

.about-us {
    position: relative;
    margin-top: 120px;
    color: var(--text-color);
    background-color: var(--box);
    border-radius: 20px;
    padding: 3em;
    display: flex;
    width: 100%;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 2em
}

.about-us h1 {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--light-text-color)
}

.about-us h2 {
    font-size: 1.3em;
    font-weight: bold;
    color: var(--light-text-color)
}

.about-us p {
    margin: 20px 0px
}

.about-us .per-section {
    width: 100%
}

.about-us .features {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1.5em;
    flex-wrap: wrap;
    width: 100%
}

.about-us .features .per-feature {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5em;
    flex: 1;
    text-align: center;
    max-width: 300px;
    width: 100%
}

.about-us .features .per-feature img {
    width: 150px;
    margin-bottom: 1em
}

.about-us .features .per-feature h3 {
    font-size: 1em;
    font-weight: bold;
    color: var(--light-text-color)
}

.about-us .features .per-feature p {
    margin: 0
}

@media(min-width: 50px)and (max-width: 767px) {
    .about-us {
        padding: 1.5em;
        text-align: center;
        background-color: unset
    }

    .about-us .features {
        justify-content: center;
        flex-direction: column
    }

    .about-us .features .per-feature {
        max-width: unset
    }
}

.filter-btn {
    background-color: var(--primary);
    color: #fff;
    padding: 10px 30px;
    border: none;
    font-size: 16px;
    outline: none;
    border-radius: 25px;
    cursor: pointer
}

.dropdown-menu {
    background: var(--background) 0% 0% no-repeat padding-box !important;
    box-shadow: 0 0 20px var(--shadow);
    border: 1px solid rgba(0, 0, 0, 0) !important;
    border-radius: 15px !important;
    text-transform: capitalize
}

.dropdown-menu span {
    color: var(--primary)
}

.dropdown-menu li {
    color: #000
}

.dropdown-menu li .inp {
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    gap: 7px;
    margin: 4px 0px
}

.dropdown-menu li label {
    font-size: 13px
}

.dropdown-menu hr {
    color: #fff
}

@media(max-width: 648px) {
    .settings-container .cart .cart-box {
        gap: 15px
    }
}

@media(max-width: 1000px) {
    .settings-container {
        height: -moz-fit-content;
        height: fit-content
    }
}

@media(max-width: 992px) {
    .settings-container .rank .user .floating p {
        font-size: 11px
    }

    #userRank {
        margin-bottom: 100px
    }
}

@media(min-width: 1400px) {
    .mainBoxes.trending .back-img {
        left: -310px
    }

    .offers .back-img,
    .settings-container .back-img,
    .voucher-container .back-img,
    .conditions-container .back-img,
    .twelve .back-img {
        right: -200px
    }

    .maingame .back1 {
        right: -310px
    }

    .maingame .back2 {
        left: -300px
    }
}

.filter-btn {
    background-color: var(--primary);
    color: #fff;
    padding: .6em 1em .4em 1em;
    border: none;
    font-size: .8em;
    outline: none;
    border-radius: 25px;
    cursor: pointer;
    width: 90%
}

.dropdown-menu span {
    color: var(--primary)
}

.dropdown-menu li {
    color: var(--light-text-color)
}

.dropdown-menu li .inp {
    display: flex;
    width: 80%;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
    margin: 4px 0px
}

.dropdown-menu li label {
    font-size: 13px;
    margin-top: 4px
}

.dropdown-menu hr {
    color: var(--text-color)
}

.quantity-input {
    width: 25px;
    text-align: center;
    border: none;
    background-color: rgba(0, 0, 0, 0);
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
    font-family: sans-serif;
    font-weight: normal;
    font-size: 14px;
    color: var(--light-text-color)
}

.voucher-container .select-voucher .mainbox .add {
    background-color: var(--primary);
    width: 105px;
    height: 26px;
    padding: 5px 7px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    cursor: pointer
}

.voucher-container button,
.submit-btn {
    background-color: var(--primary);
    color: #fff;
    padding: .6em 1.5em .4em 1.5em;
    border: none;
    font-size: 1em;
    font-weight: bold;
    outline: none;
    border-radius: 15px;
    cursor: pointer
}

.group-btns {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 500px;
    margin-top: 20px;
    gap: 10px
}

@media(max-width: 510px) {
    .group-btns {
        width: 100%
    }
}

.group-btns .add-to-cart,
.group-btns .direct-pay {
    width: 100%
}

.group-btns .or-text {
    position: relative;
    text-align: center
}

.group-btns .or-text::before {
    display: none
}

.group-btns .or-text span {
    position: relative;
    z-index: 1;
    background-color: var(--background);
    padding: 0 20px
}

@media(max-width: 640px) {
    .group-btns {
        flex-direction: column
    }
}

.add-minus-card .disabled {
    cursor: not-allowed !important;
    color: #c4c4c4 !important
}

.settings-container h2 {
    letter-spacing: 0px
}

.wheel-wrap {
    position: relative;
    width: var(--wheel-size);
    aspect-ratio: 1/1
}

.pointer {
    position: absolute;
    inset: auto 0 calc(100% - var(--pointer-size)) 0;
    width: var(--pointer-size);
    height: var(--pointer-size);
    margin: auto;
    filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.2));
    z-index: 3
}

.pointer svg {
    display: block;
    width: 100%;
    height: 100%
}

.wheel {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 50%, #fff 0 8%, #f0f1f6 8% 9%, transparent 9% 100%);
    transform: rotate(var(--rot, 0deg));
    transition: transform var(--spin-dur, 0s) cubic-bezier(0.17, 0.84, 0.12, 0.99);
    will-change: transform
}

.rim {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    box-shadow: inset 0 0 0 10px var(--rim), var(--wheel-shadow)
}

.wheel svg {
    display: block;
    width: 100%;
    height: 100%
}

.hub {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none
}

.hub button {
    pointer-events: auto;
    width: var(--hub-size);
    height: var(--hub-size);
    border-radius: 50%;
    border: none;
    color: #fff;
    background: url("/assets/web/images/arrow.svg");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: top;
    display: grid;
    place-items: center;
    cursor: pointer;
    position: relative;
    transition: transform .12s ease
}

.hub button:active {
    transform: scale(0.98)
}

.hub .inner {
    position: absolute;
    inset: 10%;
    border-radius: 50%;
    background: var(--accent);
    display: grid;
    place-items: center;
    box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .8509803922)
}

.lvl {
    display: flex;
    align-items: center;
    gap: .35rem;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .3px;
    margin-top: 10px
}

.lvl svg {
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 auto
}

.slice-label {
    font-size: 4px;
    font-weight: 700;
    fill: var(--text);
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25)
}

.slice-sub {
    font-size: 6px;
    font-weight: 600;
    opacity: .95
}

@media(prefers-reduced-motion: reduce) {
    .wheel {
        transition: none
    }
}

@supports not (aspect-ratio: 1/1) {
    .wheel-wrap::before {
        content: "";
        float: left;
        padding-top: 100%
    }

    .wheel-wrap::after {
        content: "";
        display: block;
        clear: both
    }
}

.progress-container {
    width: 100%;
    background-color: #fff8dc;
    border-radius: 50px;
    padding: 4px
}

.progress-bar {
    width: 1%;
    background-color: #ffd835;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 8px 16px;
    color: #000;
    font-size: 16px;
    font-weight: 500;
    position: relative
}

.progress-text {
    color: #555;
    margin-left: 8px;
    font-weight: 400
}

.progress-label {
    font-weight: 600
}

.icon {
    display: inline-block;
    margin: 10px;
    font-size: 22px;
    cursor: pointer;
    position: relative;
    transition: all .5s ease;
    opacity: 0;
    transform: translateY(30px)
}

.icon.visible {
    opacity: 1;
    transform: translateY(0)
}

.icon.fade-up {
    transform: translateY(-30px);
    opacity: 0
}

.icon.fade-down {
    transform: translateY(30px);
    opacity: 0
}

#lightSwitch i {
    color: #fff
}

#darkSwitch i {
    color: #333
}

@keyframes prixClipFix {
    0% {
        -webkit-clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0);
        clip-path: polygon(50% 50%, 0 0, 0 0, 0 0, 0 0, 0 0)
    }

    25% {
        -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0);
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 0, 100% 0, 100% 0)
    }

    50% {
        -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%);
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 100% 100%, 100% 100%)
    }

    75% {
        -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%);
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 100%)
    }

    100% {
        -webkit-clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0);
        clip-path: polygon(50% 50%, 0 0, 100% 0, 100% 100%, 0 100%, 0 0)
    }
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    30% {
        transform: scale(0.7)
    }

    50% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes minPulse {
    0% {
        transform: scale(1)
    }

    30% {
        transform: scale(0.7)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes pulseShadow {
    from {
        box-shadow: inset 0 0 8px var(--primary)
    }

    to {
        box-shadow: inset 0 0 18px var(--primary)
    }
}

/* Footer logo switching for dark mode */
body.darkMode footer .first-sec .footer-logo-light {
    display: none !important
}

body.darkMode footer .first-sec .footer-logo-dark {
    display: block !important
}

body.darkMode footer .only-mobile-sec .footer-logo-light-mobile {
    display: none !important
}

body.darkMode footer .only-mobile-sec .footer-logo-dark-mobile {
    display: block !important
}

/*# sourceMappingURL=style.rtl.min.css.map */