.m_w_blog_sidebar{
    max-width:25% !important;
}

@media(max-width:992px){
    .m_w_blog_sidebar{
        max-width:100% !important;
    }
}


.blog-content img {
    width:100%;
    object-fit:cover;
    border-radius: 16px;
    box-shadow: 4px 6px 4px 3px rgb(0 0 0 / 84%);
    height: auto !important;
}

blockquote{
    padding: 10px;
    background: #ffffff29;
    position: relative;
    transition: all 0.3s ease;
    animation: fa-fade-blog 0.7s ease-in-out infinite alternate;
}

blockquote::before {
    content: "\f10e";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -50%;
    right: -2%;
    color: rgba(255, 255, 255, 0.7);
    font-size: 4rem;
    opacity: 0.7;
    padding: 8px;
    border-radius: 0 0 0 8px;
    transform: rotate(-10deg);
}

@keyframes fa-fade-blog {
    0% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}


.blog-content a{
    color: var(--color_main_1) !important;
    text-decoration: underline !important;
}

/* Estilos especiales para listas */
.blog-content ul {
    list-style: none;
    padding-left: 0;
    margin: 1.5rem 0;
}

.blog-content ul li {
    position: relative;
    padding-left: 2.5rem;
    margin-bottom: 1rem;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    transition: all 0.3s ease;
}

.blog-content ul li::before {
    content: "\f058";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: #ffffff;
    font-size: 1.1rem;
    transition: all 0.3s ease;
    /* text-shadow: 0 0 5px rgba(var(--color_main_1), 0.5); */
    transform:scale(1);
    text-shadow: 0 0 10px var(--color_main_1);
}

.blog-content ul li:hover {
    /* padding-left: 3rem; */
    color: #ffffff;
    /* background: rgba(255, 255, 255, 0.05); */
    border-radius: 8px;
    transform:scale(1.02);
    /* padding-top: 0.5rem; */
    /* padding-bottom: 0.5rem; */
}

.blog-content ul li:hover::before {
    transform: scale(1.2);
    color: #ffffff;
    /* text-shadow: 0 0 10px var(--color_main_1); */
}



















    
.bg_description_booster{
    width:90%;
}

.w_review_bubble{
    max-width:340px;
}

.h_champs_info_booster{
    height:50px;
}

@media(max-width:992px){
    .w_info_wave{
        width:100%;
    }

    .bg_description_booster{
        background: var(--color_main_base);
        padding: 10px;
        width: auto !important;
    }

    .h_champs_info_booster{
        height:auto !important;
    }

    .w_review_bubble{
        width:100% !important;
    }

    
}

.z-index-2{
    z-index:2;
}

.m_w_description_seo{
    max-width:80%;
}

@media (max-width: 992px) {
    .m_w_description_seo{
        max-width:100%;
    }
}

.w_secion_right_hero_extras{
    width:320px;
}

@media (max-width: 992px) {
    .w_secion_right_hero_extras{
        width:100%;
    }
}

.mt_6{
    margin-top:6rem !important;
}

.w_card_caracteristicas{
    width:499px;
}

@media(max-width:992px){
    .w_card_caracteristicas{
        width:100%;
    }
}

@media(min-width:992px){
    .mt_lg_6{
        margin-top:7rem !important;
    }
}


.text-white-75{
    color: rgba(255, 255, 255, 0.75) !important;
}

.bg_credit{
    background:radial-gradient(circle, rgb(46 217 88 / 31%) 0%, rgb(0 255 0 / 14%) 51%, rgb(0 163 52 / 0%) 100%) !important;
    border:1px solid rgb(0, 207, 0) !important;
}

.text-no-wrap{
    text-wrap: nowrap;
    white-space: nowrap;
}

/* ====================================
ANIMACIONES PARA BADGE DORADO (HIGHLIGHT SERVICE)
==================================== */



/* Animación de brillo para la estrella */
@keyframes starGlow {
    0% {
        text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
        transform: rotate(0deg);
    }
    100% {
        text-shadow: 
            0 0 20px rgba(255, 255, 255, 1),
            0 0 30px rgba(255, 215, 0, 0.8);
        transform: rotate(5deg);
    }
}

/* Animación de destello deslizante */
@keyframes shimmer {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(100%);
    }
}


/* ====================================
FIN ANIMACIONES BADGE DORADO
==================================== */


    .apply_for_us_page {
        background-color: var(--bg-main);
        height: 100vh !important;
        width: 100vw !important
    }

    .apply_for_us_page .left_image {
        background-image: url(/images/work_with_us_bg.webp);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        flex: 0.5;
        height: 100%;
        min-width: 50%;
        width: 100%
    }

    .apply_for_us_page .right_form {
        background-color: var(--bg-main);
        flex: 0.5;
        height: 100%;
        padding: 90px;
        position: relative;
        width: 100%
    }

    .apply_for_us_page .prev-button {
        border: 1.2px solid var(--stroke-dark, #17181a);
        border-radius: 50%;
        height: 90px;
        padding: 13px;
        width: 90px
    }

    .apply_for_us_page .prev-button:hover {
        border: 1.2px solid var(--color_main_1)
    }

    .apply_for_us_page .prev-button:disabled {
        background-color: transparent !important;
        color: var(--text-white) !important;
        opacity: .5
    }

    .apply_for_us_page .next-button {
        background-color: var(--button-orange);
        border-radius: 50%;
        height: 90px;
        padding: 13px;
        width: 90px
    }

    .apply_for_us_page .next-button:hover {
        background-color: var(--button-orange-hover)
    }

    .apply_for_us_page .next-button:disabled {
        background-color: var(--button-orange);
        opacity: .5
    }

    .apply_for_us_page .progress_bar {
        background-color: var(--bg-extra-light);
        bottom: 0;
        height: 18px;
        left: 0;
        position: absolute;
        transition: background-color .2s ease;
        width: 100%
    }

    @media screen and (max-width:900px) {
        .apply_for_us_page .left_image {
            display: none
        }

        .apply_for_us_page .right_form {
            flex: 1;
            padding: 20px
        }
    }

    .servers_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 12px;
        grid-row-gap: 12px
    }

    @media screen and (max-width:900px) {
        .servers_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .servers_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .ranks_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 12px;
        grid-row-gap: 12px
    }

    .ranks_container.league-of-legends-boost,
    .ranks_container.teamfight-tactics-boost,
    .ranks_container.valorant-boost {
        grid-template-columns: repeat(3, 1fr)
    }

    @media screen and (max-width:900px) {
        .ranks_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .ranks_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .roles_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 12px;
        grid-row-gap: 12px
    }

    @media screen and (max-width:900px) {
        .roles_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .roles_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }






    .t-red {
        color: var(--red)
    }

    .t-white {
        color: var(--text-white)
    }

    .t-grey {
        color: var(--text-gray)
    }

    .t-light {
        color: var(--text-light)
    }

    .t-green {
        color: var(--green)
    }

    .t-yellow {
        color: var(--yellow)
    }

    .t-black {
        color: var(--text-black)
    }

    .t-light-orange {
        color: var(--light-orange)
    }

    .t-grey-dark {
        color: var(--text-gray-dark)
    }

    .t-orange {
        color: var(--color_main_1)
    }

    .t-blue {
        color: var(--color_main_1)
    }

    .t-light-blue {
        color: var(--light-blue)
    }

    .text-black {
        color: var(--text-black)
    }

    .t-danger {
        color: var(--danger)
    }

    .t-pink {
        color: var(--pink)
    }

    .t-time {
        color: var(--time)
    }

    .t-gradient {
        background: var(--Gradient-Membership, linear-gradient(97deg, #77f9a2 .35%, #65eda9 26.82%, #59e8cb 51.35%, #57cfe9 74.83%, #47ade2 100.56%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .underline {
        text-decoration: underline
    }

    .font-family-1 {
        
    }

    .champions_box .champion_search .champion_search_input,
    .font-family-2 {
        font-family: Satoshi, sans-serif
    }

    .f-w-200 {
        font-weight: 200
    }

    .f-w-300 {
        font-weight: 300 !important
    }

    .editorx_body .code p,
    .editorx_body .quote-text p,
    .editorx_body .warning p,
    .f-w-400,
    .regular-l,
    .regular-l2,
    .regular-m,
    .regular-pack,
    .regular-s,
    .regular-xl,
    .regular-xs,
    .regular-xxl,
    .regular-xxxl,
    .regular-xxxxl {
        font-weight: 400 !important
    }

    .f-w-500,
    .medium-l,
    .medium-m,
    .medium-s,
    .medium-xl,
    .medium-xs,
    .medium-xxl,
    .medium-xxxl,
    .medium-xxxxl {
        font-weight: 500 !important
    }

    .f-w-600,
    .title {
        font-weight: 600 !important
    }

    .bold-l,
    .bold-m,
    .bold-pack,
    .bold-s,
    .bold-xl,
    .bold-xs,
    .bold-xxl,
    .bold-xxxl,
    .bold-xxxxl,
    .f-w-700 {
        font-weight: 700 !important
    }

    .f-w-800 {
        font-weight: 800 !important
    }

    .benefits {
        font-size: calc(50.4px + 3.9375vw);
        line-height: calc(58px + 3.75vw)
    }

    .title-h1 {
        font-size: calc(20.8px + 2.25vw);
        line-height: calc(31.2px + 2.4375vw)
    }

    .title-h2 {
        font-size: calc(26.4px + 1.125vw);
        line-height: calc(24.2px + 1.8125vw)
    }

    .title-h3 {
        font-size: calc(21.6px + .75vw);
        line-height: calc(29.6px + .75vw)
    }

    .title-h4 {
        font-size: calc(25.2px + .25vw);
        line-height: calc(28.8px + .375vw)
    }

    .title-h5 {
        font-size: 24px;
        line-height: 29px
    }

    .title-h6 {
        font-size: calc(15.6px + .125vw);
        line-height: calc(13.6px + .4375vw)
    }

    .bold-xxxxl {
        font-size: calc(19.2px + .25vw);
        line-height: calc(24px + .3125vw)
    }

    .bold-xxxl {
        font-size: calc(17.6px + .125vw);
        line-height: calc(23.4px + .1875vw)
    }

    .bold-xxl {
        font-size: calc(15.6px + .125vw);
        line-height: calc(19.2px + .25vw)
    }

    .bold-xl {
        font-size: calc(13.6px + .125vw);
        line-height: calc(16.2px + .25vw)
    }

    .bold-l {
        font-size: calc(11.6px + .125vw);
        line-height: calc(15.6px + .125vw)
    }

    .bold-m {
        font-size: calc(10.6px + .125vw);
        line-height: calc(14.6px + .125vw)
    }

    .bold-s {
        font-size: 12px;
        line-height: 16px
    }

    .bold-xs {
        font-size: 10px;
        line-height: calc(11.8px + .0625vw)
    }

    .bold-pack {
        font-size: calc(16.8px + .375vw);
        line-height: calc(24px + .3125vw)
    }

    .caps {
        text-transform: uppercase
    }

    .medium-xxxxl {
        font-size: calc(16.8px + .375vw);
        line-height: calc(24.8px + .375vw)
    }

    .medium-xxxl {
        font-size: calc(15.2px + .25vw);
        line-height: calc(19.8px + .375vw)
    }

    .medium-xxl {
        font-size: calc(14.4px + .1875vw);
        line-height: calc(19.2px + .25vw)
    }

    .medium-xl {
        font-size: 16px;
        line-height: 21px
    }

    .medium-l {
        font-size: 14px;
        line-height: 18px
    }

    .medium-m {
        font-size: calc(9.4px + .1875vw);
        line-height: calc(8.6px + .4375vw)
    }

    .medium-s {
        font-size: calc(9.6px + .125vw);
        line-height: calc(11.2px + .25vw)
    }

    .medium-xs {
        font-size: 10px;
        line-height: 13px
    }

    .regular-xxxxl {
        font-size: calc(20.4px + .1875vw);
        line-height: calc(28.4px + .1875vw)
    }

    .regular-xxxl {
        font-size: calc(16.4px + .1875vw);
        line-height: calc(23.4px + .1875vw)
    }

    .regular-xxl {
        font-size: calc(14.4px + .1875vw);
        line-height: calc(20.4px + .1875vw)
    }

    .regular-xl {
        font-size: 16px;
        line-height: 21px
    }

    .regular-l2 {
        font-size: 14px;
        line-height: 18px
    }

    .regular-l {
        font-size: calc(11.6px + .125vw);
        line-height: calc(13.2px + .25vw)
    }

    .regular-m {
        font-size: 13px;
        line-height: 17px
    }

    .regular-s {
        font-size: 12px;
        line-height: 16px
    }

    .regular-xs {
        font-size: calc(8.8px + .0625vw);
        line-height: calc(8.2px + .25vw)
    }

    .regular-pack {
        font-size: 13px;
        line-height: 17px
    }

    @media screen and (max-width:600px) {
        .regular-pack {
            font-size: 16px;
            line-height: 22px
        }
    }

    .editorx_body .code,
    .editorx_body .quote-text,
    .editorx_body .warning {
        margin-bottom: 10px;
        margin-top: 10px
    }

    .editorx_body .code p,
    .editorx_body .quote-text p,
    .editorx_body .warning p {
        font-size: calc(13.2px + .25vw);
        line-height: calc(13.2px + .25vw)
    }

    .rank_division_picker {
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        justify-content: space-between !important;
        min-height: 260px;
        position: relative
    }

    .rank_division_picker .rank_picker_area {
        overflow: hidden;
        padding: 18px;
        position: relative
    }




    .rank_division_picker.full-width .rank_picker_area:before {
        height: 10%;
        left: 0;
        opacity: .5;
        transform: translate(0);
        width: 70%
    }

    .rank_division_picker .selected_rank_image {
        height: auto;
        max-width: 70px;
        min-width: 70px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 30%
    }

    .rank_picker_container {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        grid-column-gap: 9px;
        grid-row-gap: 9px;
        width: -moz-max-content;
        width: max-content;
        width: 100%
    }



    .rank_picker_container.rainbow-six-siege,
    .rank_picker_container.rocket-league,
    .rank_picker_container.the-finals-divisions,
    .rank_picker_container.valorant {
        grid-template-columns: repeat(4, 1fr)
    }

    @media screen and (max-width:768px) {
        .rank_picker_container {
            grid-template-columns: repeat(4, 1fr) !important
        }
    }

    .division_picker_container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        grid-column-gap: 9px;
        grid-row-gap: 9px;
        width: -moz-max-content;
        width: max-content;
        width: 100%
    }

    .division_picker_container.rocket-league,
    .division_picker_container.valorant {
        grid-template-columns: repeat(3, 1fr)
    }

    .division_picker_container.rainbow-six-siege {
        grid-template-columns: repeat(5, 1fr)
    }

    .division_picker_container.reverse {
        direction: rtl
    }

    @media screen and (max-width:1300px) {
        .division_picker_container.rainbow-six-siege {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    @media screen and (max-width:900px) {
        .division_picker_container.rainbow-six-siege {
            grid-template-columns: repeat(5, 1fr)
        }
    }

    @media screen and (max-width:500px) {
        .division_picker_container.rainbow-six-siege {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    .rank_picker {
        align-items: center;
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        justify-content: center;
        padding: 6px;
        transition: all .15s ease-in;
        width: 100%
    }

    .rank_picker.selected,
    .rank_picker:hover {
        border: 1px solid var(--lol-card)
    }

    .rank_picker.selected {
        background-color: var(--color_main_2)
    }

    .rank_picker .picker_rank_image {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 30px
    }

    .rank_picker.disabled {
        background-color: var(--bg-medium) !important;
        border: 1px solid transparent !important;
        opacity: .25;
        pointer-events: none !important
    }

    .value_setter {
        height: 42px !important
    }

    .value_setter .value_setter_button {
        align-items: center;
        background-color: var(--color_main_2);
        border: 1px solid transparent;
        border-radius: 6px;
        display: flex;
        height: 100%;
        justify-content: center;
        transition: all .15s ease-in;
        width: 100%
    }

    .value_setter .value_setter_button:hover {
        border: 1px solid var(--lol-card)
    }

    @media screen and (max-width:786px) {
        .value_setter .value_setter_button {
            min-width: 50px
        }
    }

    .value_setter .value_setter_field {
        background-color: transparent;
        background-color: var(--bg-medium);
        border: none;
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        color: var(--text-white);
        height: 100%;
        outline: none;
        text-align: center;
        width: 100%
    }

    .exptra_options {
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        padding: 15px 18px 18px
    }

    .picker_option_container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        grid-column-gap: 9px;
        grid-row-gap: 9px;
        height: -moz-max-content;
        height: max-content;
        width: -moz-max-content;
        width: max-content;
        width: 100%
    }

    .picker_option_container.queue {
        grid-template-columns: repeat(4, 1fr)
    }
    
    @media screen and (max-width:700px) {
        .picker_option_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .picker_option_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .picker_option {
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 9px;
        cursor: pointer;
        padding: 9px 12px;
        transition: all .15s ease
    }

    .picker_option .price_container {
        border: 1px solid var(--stroke-medium);
        border-radius: 4px;
        padding: 3px 9px
    }

    .picker_option.selected {
        background-color: var(--color_main_2)
    }

    .picker_option.selected,
    .picker_option:hover {
        border: 1px solid var(--color_main_1)
    }

    .picker_option.always-selected {
        pointer-events: none
    }

    .picker_option.disabled {
        opacity: .5;
        pointer-events: none
    }

    .role_picker {
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 9px;
        min-width: 150px;
        padding: 9px 12px
    }

    .role_picker .role_icon {
        height: 24px;
        width: 24px
    }

    .role_picker.selected {
        background-color: var(--color_main_2)
    }

    .role_picker.selected,
    .role_picker:hover {
        border: 1px solid var(--color_main_1)
    }

    @media screen and (max-width:480px) {
        .role_picker {
            flex: 1;
            width: 100%
        }
    }

    .role_picker_container .role_picker {
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 9px;
        min-width: 150px;
        padding: 9px 12px
    }

    .role_picker_container .role_picker .role_icon {
        height: 24px;
        width: 24px
    }

    .role_picker_container .role_picker.selected {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    .role_picker_container .role_picker:hover {
        border: 1px solid var(--color_main_1)
    }

    @media screen and (max-width:480px) {
        .role_picker_container .role_picker {
            flex: 1;
            width: 100%
        }
    }

    .platform_picker_container {
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        padding: 9px
    }

    .platform_picker_container .role_picker {
        width: 100%
    }

    .platform_picker_container .platform_picker {
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 9px;
        flex: 0.35;
        padding: 9px 12px
    }

    .platform_picker_container .platform_picker .role_icon {
        height: 24px;
        width: 24px
    }

    .platform_picker_container .platform_picker.selected {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    .platform_picker_container .platform_picker:hover {
        border: 1px solid var(--color_main_1)
    }

    @media screen and (max-width:480px) {
        .platform_picker_container .platform_picker {
            flex: 1;
            width: 100%
        }
    }

    .champions_box {
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        cursor: pointer;
        padding: 12px;
        transition: all .15s ease
    }

    .champions_box .champion_search {
        max-width: 280px;
        padding: 0 9px;
        width: 100%
    }

    .champions_box .champion_search .champion_search_input {
        background-color: transparent;
        border: none;
        color: var(--text-light);
        outline: none;
        width: 100%
    }

    .champions_box .champion_search .champion_search_input::-moz-placeholder {
        color: var(--text-light)
    }

    .champions_box .champion_search .champion_search_input::placeholder {
        color: var(--text-light)
    }

    .champions_box .champion_grid_container {
        display: grid;
        grid-template-columns: repeat(8, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 12px;
        grid-row-gap: 15px;
        max-height: 475px;
        overflow: auto;
        overflow-x: hidden
    }

    @media (max-width: 768px) {
        .champions_box .champion_grid_container {
            max-height: 250px;
        }
    }

    .champions_box .champion_grid_container.badges {
        grid-template-columns: repeat(4, 1fr)
    }

    .champions_box .champion_grid_container.badges2 {
        grid-template-columns: repeat(5, 1fr)
    }

    .champions_box .champion_grid_container .champ_button {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 3px;
        justify-content: flex-start
    }

    .champions_box .champion_grid_container .champ_button:hover .badge_image_container,
    .champions_box .champion_grid_container .champ_button:hover .champ_image_container {
        border: 1px solid var(--color_main_1)
    }

    .champions_box .champion_grid_container .champ_button.selected .badge_image_container,
    .champions_box .champion_grid_container .champ_button.selected .champ_image_container {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    .champions_box .champion_grid_container .champ_button.item_button {
        align-items: flex-start;
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 9px;
        display: flex;
        gap: 5px;
        justify-content: flex-start;
        padding: 12px 9px;
        transition: all .15s ease;
        width: 100%
    }

    .champions_box .champion_grid_container .champ_button.item_button.selected {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    .champions_box .champion_grid_container .champ_image_container {
        align-items: center;
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 9px;
        display: flex;
        justify-content: flex-end;
        transition: all .15s ease;
        width: 100%
    }

    .champions_box .champion_grid_container .champ_image_container .champion_img {
        border-radius: 0 9px 0 0;
        height: auto;
        max-height: 80px;
        max-width: 130px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 70%
    }

    .champions_box .champion_grid_container .badge_image_container {
        align-items: center;
        background-color: var(--bg-medium);
        border: 1px solid transparent;
        border-radius: 9px;
        display: flex;
        justify-content: center;
        padding: 12px 15px;
        transition: all .15s ease;
        width: 100%
    }

    .champions_box .champion_grid_container .badge_image_container .champion_img {
        border-radius: 0 9px 0 0;
        height: auto;
        max-height: 69px;
        max-width: 69px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 70%
    }

    @media screen and (max-width:1440px) {
        .champions_box .champion_grid_container {
            grid-template-columns: repeat(5, 1fr)
        }

        .champions_box .champion_grid_container.badges {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    @media screen and (max-width:768px) {
        .champions_box .champion_grid_container {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .champions_box .champion_grid_container {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media screen and (max-width:350px) {
        .champions_box .champion_grid_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .range_picker_container {
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        overflow: hidden;
        padding: 18px;
        position: relative
    }

    .range_picker_container:before {
        background-color: var(--color_main_1);
        content: "";
        filter: blur(50px);
        height: 10%;
        left: 35%;
        opacity: .5;
        position: absolute;
        right: 0;
        top: 0;
        transform: translate(-50%);
        transition: all .25s ease-in;
        width: 50%;
        z-index: 0
    }

    .range_picker_container.wins-val:before {
        background-color: var(--color_main_1)
    }

    .range_picker_container.plain:before {
        display: none
    }

    .cart_container {
        position: sticky;
        position: -webkit-sticky;
        top: 90px
    }

    @media screen and (max-width:900px) {
        .cart_container {
            position: relative;
            top: 0
        }
    }

    .cart {
        padding: 12px
    }

    .cart,
    .pay_cart {
        background-color: color-mix(in srgb, var(--bg-main) 70%, transparent);
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        max-width: 100%
    }

    .pay_cart {
        padding: 30px
    }

    .pay_cart .membership {
        border-radius: 6px
    }

    .pay_cart .membership .content_area {
        background-color: var(--color_main_2);
        border-radius: 6px
    }

    .pay_cart .membership .content_area .become_a_member {
        padding-bottom: 3px;
        padding-right: 6px;
        padding-top: 3px
    }

    .pay_cart .membership .content_area .become_a_member img {
        height: 30px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 30px
    }

    .pay_cart .membership_2 {
        background: linear-gradient(96.72deg, #77f9a2 .35%, #65eda9 26.82%, #59e8cb 51.35%, #57cfe9 74.83%, #47ade2 100.56%);
        border-radius: 6px;
        padding: 1.5px
    }

    .pay_cart .membership_2 .content_area_2 {
        background-color: var(--bg-medium);
        border-radius: 6px;
        height: 50px;
        max-height: -moz-max-content;
        max-height: max-content;
        overflow: hidden;
        padding: 12px;
        transition: height .2s ease-in
    }

    .pay_cart .membership_2 .content_area_2.active {
        height: 250px
    }

    .pay_cart .membership_2 .content_area_2.active_2 {
        height: 300px
    }

    .pay_cart .membership_2 .perk_icon {
        height: 18px;
        width: 18px
    }

    .pay_cart .membership_icon {
        height: 100px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 90px
    }

    .become_a_member {
        background-color: var(--bg-medium);
        border: 1px solid var(--stroke-medium);
        border-radius: 6px !important;
        padding: 7px 0 7px 15px
    }

    .cart_applied_coupon {
        background: var(--color_main_2, #0c1c1f);
        border: 1px solid var(--color_main_1);
        border-radius: 6px;
        margin-bottom: 8px;
        max-height: 86px;
        overflow: hidden;
        padding: 10px 9px;
        position: relative
    }

    .cart_applied_coupon .progress_bar {
        bottom: -.5px;
        height: 2px;
        left: 0;
        position: absolute;
        transition: all .2s ease;
        width: 0
    }

    .cart_applied_coupon.in_active {
        background: var(--color_main_2, #0c1c1f);
        border: 1px solid rgba(72, 228, 255, .3)
    }

    .cart_applied_coupon.active {
        background: var(--dark-green, #1d2110) !important;
        border: 1px solid var(--color_main_1) !important
    }

    .sticky_checkout_button {
        background: rgba(5, 6, 7, .8);
        border-radius: 0 !important;
        border-top: 1px solid var(--Stroke-Medium, #27292b);
        bottom: 75px;
        gap: 0 !important;
        height: -moz-max-content;
        height: max-content;
        left: 0;
        max-height: 80px;
        padding: 9px 12px;
        position: fixed;
        z-index: 19
    }

    .sticky_checkout_button.pay_cart {
        bottom: 0
    }

    .sticky_checkout_button.pay_cart .membership {
        height: -moz-max-content;
        height: max-content
    }

    .armor_type_picker {
        opacity: 1;
        pointer-events: 1;
        transition: all .2s ease-in
    }

    .armor_type_picker.disabled {
        opacity: .5;
        pointer-events: none
    }

    .warning_message {
        background-color: rgba(255, 191, 72, .1);
        border: 1px solid #ffbf48;
        border-radius: .5rem !important;
        -moz-border-radius: .5rem !important;
        -webkit-border-radius: .5rem !important;
        padding: 9px;
        position: relative
    }

    .warning_message>* {
        z-index: 1
    }



    .checkout_page {
        height: -moz-max-content;
        height: max-content;
        min-height: 100vh;
        padding: 12px;
        width: 100%
    }

    .checkout_page.magic-page {
        padding-top: 0
    }

    .checkout_page .forms_container {
        background-color: var(--bg-main)
    }

    @media screen and (max-width:1200px) {
        .checkout_page {
            padding: 1rem
        }
    }

    td.payment_method {
        border: none !important
    }

    .payment_method {
        background-color: var(--bg-extra-dark);
        border: 1px solid var(--stroke-medium, #27292b);
        border-radius: 12px;
        padding: 9px 15px 9px 24px;
        position: relative;
        transition: all .3s ease;
        opacity:0.5;
    }

    .payment_method.active_method {
        border: 1px solid var(--color_main_1) !important;
        background: var(--color_main_1) !important;
        opacity: 1 !important;
        
    }

    .payment_method .checkout_image {
        height: auto;
        max-height: 28px;
        max-width: 110px;
        -o-object-fit: contain;
        object-fit: contain;
    }

    .payment_method .option {
        max-width: -moz-max-content;
        max-width: max-content
    }

    .payment_method .option_image {
        align-self: flex-start;
        height: auto;
        max-width: 135px;
        -o-object-fit: contain;
        object-fit: contain;
        padding-top: 12px;
        width: 100%
    }

    .payment_method .option_image.paysafe {
        max-width: 150px
    }

    .payment_method .option_image.coinbase {
        max-width: 170px
    }

    @media screen and (max-width:768px) {
        .payment_method {
            padding: 3px;
            transition: all .2s ease
        }

        .payment_method .option_image,
        .payment_method .radio {
            display: none
        }

        .payment_method.active_method {
            background-color: var(--color_main_base);
            border: 1px solid var(--color_main_1)
        }
    }

    .payment_method_2 {
        background-color: var(--bg-extra-dark);
        border: 1px solid var(--stroke-medium, #27292b);
        border-radius: 12px;
        position: relative
    }

    .payment_method_2.active_method {
        border: 1px solid var(--color_main_1)
    }

    .payment_method_2 .checkout_image {
        height: auto;
        max-height: 54px;
        max-width: 110px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 30%
    }

    .payment_method_2 .method_area {
        padding: 9px 9px 9px 24px
    }

    .payment_method_2 .option {
        max-width: -moz-max-content;
        max-width: max-content
    }

    .payment_method_2 .option_image {
        align-self: flex-start;
        height: auto;
        max-width: 135px;
        -o-object-fit: contain;
        object-fit: contain;
        padding-top: 12px;
        width: 100%
    }

    .payment_method_2 .option_image.paysafe {
        max-width: 150px
    }

    .payment_method_2 .option_image.coinbase {
        max-width: 170px
    }

    @media screen and (max-width:768px) {
        .payment_method_2 {
            padding: 3px;
            transition: all .2s ease
        }

        .payment_method_2 .method_area {
            padding: 0
        }

        .payment_method_2 .option_image,
        .payment_method_2 .radio {
            display: none
        }

        .payment_method_2.active_method {
            background-color: var(--color_main_2);
            border: 1px solid var(--color_main_1)
        }
    }

    .payment_disclaimer {
        background-color: var(--color_main_2);
        border-radius: 0 0 12px 12px;
        padding: 4px 24px
    }

    .wow_raid_schedule {
        background-color: transparent;
        background-color: var(--color_main_2);
        background-image: url(/img/games/world-of-warcraft-boost/difficulties/normal-faded.webp);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        border: 1px solid transparent;
        cursor: pointer;
        height: auto;
        overflow: hidden;
        padding: 12px;
        position: relative;
        transition: all .2s ease;
        width: 100%
    }

    .wow_raid_schedule.active,
    .wow_raid_schedule:hover {
        border: 1px solid var(--color_main_1)
    }

    .wow_raid_schedule.active {
        background-color: var(--color_main_2)
    }

    .wow_raid_schedule.Normal {
        background-image: url(/img/games/world-of-warcraft-boost/difficulties/normal-faded.webp)
    }

    .wow_raid_schedule.Heroic {
        background-image: url(/img/games/world-of-warcraft-boost/difficulties/heroic-faded.webp)
    }

    .wow_raid_schedule.Mythic {
        background-image: url(/img/games/world-of-warcraft-boost/difficulties/mythic-faded.webp)
    }

    .order_progress_container {
        margin-bottom: 20px;
        margin-top: 20px
    }

    @media screen and (max-width:500px) {
        .order_progress_container {
            justify-content: flex-start !important
        }

        .order_progress_container,
        .order_progress_container .order_progress_item {
            align-items: flex-start !important;
            flex-direction: column !important
        }

        .order_progress_container .order_progress_item hr {
            background-color: var(--stroke-medium);
            border: none;
            height: 20px;
            margin-left: 15px;
            width: 1px
        }
    }

    .order_progress_item .icon_ {
        align-items: center;
        background-color: var(--color_main_2);
        border-radius: 50%;
        display: flex;
        height: 28px;
        justify-content: center;
        max-height: 28px;
        max-width: 28px;
        width: 28px
    }

    .order_progress_item hr {
        background-color: var(--stroke-medium);
        border: none;
        height: 1px;
        width: 42px
    }

    .order_progress_item.active_ico .icon_ {
        background-color: var(--cion)
    }

    .order_progress_item.in_active .icon_ {
        background-color: #4e4e4e
    }

    .order_progress_item.in_active span {
        color: #4e4e4e
    }



    .dashboard_layout .main_layout_page {
        padding-left: 150px;
        padding-right: 150px
    }

    @media screen and (max-width:1000px) {
        .dashboard_layout .main_layout_page {
            padding-left: 75px;
            padding-right: 75px
        }
    }

    @media screen and (max-width:768px) {
        .dashboard_layout {
            margin-bottom: 60px
        }

        .dashboard_layout .main_layout_page {
            padding: 1rem
        }
    }

    .dashboard_banner {
        align-items: center;
        background-color: var(--bg-extra-dark);
        border-radius: 18px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: 37.5vh;
        justify-content: center;
        max-height: 300px;
        min-height: 100%;
        overflow: hidden;
        position: relative;
        width: 100%;
        z-index: 1
    }

    .dashboard_banner .title-h3 {
        text-align: center;
        width: 20ch
    }

    .account_detail {
        background-color: var(--bg-medium);
        border-radius: 9px !important;
        -moz-border-radius: 9px !important;
        -webkit-border-radius: 9px !important;
        padding: 9px 6px 9px 15px
    }

    .account_detail label {
        max-width: 200px;
        word-wrap: break-word;
        white-space: normal
    }

    .cashback_container .cashback_area {
        background-color: var(--color_main_2);
        border-radius: 9px;
        padding: 18px 0 18px 20px;
        position: relative
    }

    .cashback_container .cashback_area p {
        width: 25ch
    }

    .cashback_container .cashback_area:after {
        background-image: url(/images/cashback_image.webp);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        left: 60%;
        position: absolute;
        top: 0;
        width: 50%
    }

    .order-game-selector {
        border: 1px solid var(--stroke-dark);
        border-radius: 9px;
        max-width: 230px;
        width: 100%
    }

    .order-game-selector .order_game_image {
        height: auto;
        max-height: 100px;
        width: 100%
    }

    .order-game-selector .games_list {
        overflow: auto;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .order-game-selector .games_list::-webkit-scrollbar {
        display: none
    }

    .order-game-selector .pack_selector {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        padding: 5px;
        transition: all .2s ease;
        width: 100%
    }

    .order-game-selector .pack_selector .pack-title {
        color: var(--text-gray)
    }

    .order-game-selector .pack_selector:hover {
        border: 1px solid var(--color_main_1)
    }

    .order-game-selector .pack_selector:hover .pack-title {
        color: var(--text-white)
    }

    .order-game-selector .pack_selector.active {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    .order-game-selector .pack_selector.active .pack-title {
        color: var(--text-white)
    }

    @media screen and (max-width:768px) {
        .order-game-selector {
            max-width: 100%
        }

        .order-game-selector .pack_selector {
            min-width: 160px
        }

        .order-game-selector .order_game_image {
            display: none
        }
    }

    .layout_filter {
        align-items: center;
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        display: flex;
        gap: 4px;
        height: 40px;
        justify-content: center;
        padding: 4px
    }

    .layout_filter button {
        background-color: transparent;
        border-radius: 3px
    }

    .layout_filter button.active {
        background-color: var(--stroke-medium)
    }

    .layout_filter button.active svg path {
        fill: var(--text-white)
    }

    .layout_filter_2 {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        gap: 4px;
        height: 40px;
        max-width: -moz-max-content;
        max-width: max-content;
        padding: 4px
    }

    .layout_filter_2 button {
        background-color: transparent;
        border-radius: 3px
    }

    .layout_filter_2 button.active {
        background-color: var(--stroke-medium)
    }

    .layout_filter_2 button.active svg path {
        fill: var(--text-white)
    }

    .order_grid_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 24px;
        grid-row-gap: 24px
    }

    @media screen and (max-width:1440px) {
        .order_grid_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:900px) {
        .order_grid_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    @media screen and (max-width:768px) {
        .order_grid_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .order_grid_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .order_card {
        background-color: var(--color_main_2);
        border: 1px solid transparent;
        border-radius: 9px;
        cursor: pointer;
        padding: 15px;
        position: relative;
        transition: all .2s linear
    }

    .order_card .content_area {
        background-color: var(--bg-medium);
        border-radius: 6px;
        padding: 12px
    }

    .order_card:hover {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1);
    }

    .order_card:hover:after {
        opacity: 1
    }

    .legend_image {
        align-items: flex-end;
        background-color: var(--bg-extra-light);
        border-radius: 7px;
        display: flex;
        height: 36px;
        justify-content: center;
        width: 36px
    }

    .legend_image img {
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        width: 30px
    }

    .settings_sidebar_mask {
        background-color: var(--bg-main);
        height: 100vh;
        left: 0;
        opacity: .5;
        position: absolute;
        top: 0;
        width: 100vw;
        z-index: 29
    }

    .settings_sidebar {
        border-right: 1px solid var(--stroke-medium);
        height: 100%;
        min-height: 80vh;
        min-width: 220px;
        padding-right: 24px;
        transition: all .5s ease-in-out
    }

    .settings_sidebar .user_avatar {
        height: auto;
        max-width: 100px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    @media screen and (max-width:768px) {
        .settings_sidebar {
            background-color: var(--bg-main);
            left: -100%;
            max-width: 50%;
            min-height: calc(100vh - 50px);
            padding: 24px;
            position: absolute;
            top: 0;
            width: 50%;
            z-index: 30
        }

        .settings_sidebar.opened {
            left: 0
        }
    }

    .user_avatar_large {
        border-radius: 50%;
        height: auto;
        max-height: 120px;
        max-width: 120px;
        -o-object-fit: fill !important;
        object-fit: fill !important;
        width: 100%
    }

    .settings_container {
        padding: 0 3vw;
        width: 100%
    }

    @media screen and (max-width:1440px) {
        .settings_container {
            padding: 0
        }
    }

    .add_accounts {
        background-color: var(--bg-extra-dark);
        padding: 24px
    }

    .connected_account .top {
        background-color: var(--color_main_2);
        border-radius: 12px 12px 0 0;
        padding: 12px
    }

    .connected_account .bottom {
        background-color: var(--bg-extra-dark);
        border-radius: 0 0 12px 12px;
        padding: 20px 12px
    }

    .game_credientials_container {
        background-color: var(--bg-extra-dark);
        border-radius: 12px;
        overflow: hidden;
        padding: 30px;
        position: relative
    }

    .game_credientials_container:before {
        background-color: var(--color_main_1);
        border-radius: 0 3px 3px 0;
        content: "";
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        transform: translate(0);
        width: 3px
    }

    .game_credientials_container .important_section {
        background-color: var(--color_main_2);
        border-radius: 9px;
        padding: 12px
    }

    .no_booster {
        padding: 30px 12px
    }

    .no_booster,
    .order_detail_container {
        background-color: var(--bg-extra-dark);
        border-radius: 12px
    }

    .order_detail_container {
        padding: 18px
    }

    .order_detail_container .option_item {
        background-color: var(--bg-medium);
        border-radius: 9px;
        padding: 18px
    }

    .order_detail_container .extra_options_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: -moz-max-content;
        height: max-content;
        width: 100%;
        grid-column-gap: 9px;
        grid-row-gap: 9px
    }

    .order_detail_container .extra_options_container svg {
        height: 20px;
        width: 20px
    }

    .account_details {
        background-color: var(--bg-extra-dark);
        border-radius: 12px;
        overflow: hidden;
        padding: 18px;
        position: relative
    }

    .account_details .order_link {
        align-items: flex-start;
        background-color: var(--bg-medium);
        border-radius: 9px;
        display: flex;
        justify-content: flex-start;
        overflow: hidden;
        padding: 5px 10px;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 280px
    }

    .account_details>* {
        z-index: 1
    }

    .customer_duties {
        background-color: var(--bg-extra-dark);
        border-radius: 12px;
        overflow: hidden;
        padding: 18px;
        position: relative
    }

    .customer_duties>* {
        z-index: 1
    }

    .customer_duties:after {
        background-image: url(/img/garen_questions.webp);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%
    }

    .payout_info {
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        padding: 24px 42px
    }

    .payout_info .balance {
        background-color: var(--color_main_2);
        border-radius: 9px;
        min-height: 96px;
        padding: 18px 18px 18px 110px;
        position: relative
    }

    .payout_info .balance img {
        height: auto;
        left: -10%;
        max-height: 103px;
        max-width: 117px;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        top: 0;
        width: 100%
    }

    .payout_info._2 .balance {
        background-color: var(--color_main_2);
        border-radius: 9px;
        min-height: 96px;
        padding: 18px 18px 18px 110px;
        position: relative
    }

    .payout_info._2 .balance img {
        left: -30px
    }

    @media screen and (max-width:900px) {
        .payout_info._2 .balance img {
            left: -10%
        }
    }

    .order_booster_image {
        border-radius: 50%;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 30px
    }

    .order_actions_drop {
        align-items: center;
        border-radius: 36px;
        display: flex;
        gap: 14px;
        height: 42px;
        justify-content: center;
        width: -moz-max-content;
        width: max-content;
        width: 42px;
        pad: 12px;
        background-color: transparent;
        border: 1px solid var(--color_main_1);
        cursor: pointer;
        position: relative;
        transition: all .2s ease
    }

    .order_actions_drop:hover {
        background-color: var(--bg-medium)
    }

    .order_actions_drop:hover svg path {
        fill: #fff
    }

    .order_actions_drop.active {
        background-color: var(--bg-medium)
    }

    .order_actions_drop.active svg path {
        fill: var(--color_main_1)
    }

    .order_settings_drop {
        align-items: center;
        border-radius: 36px;
        display: flex;
        gap: 14px;
        height: 30px;
        justify-content: center;
        width: -moz-max-content;
        width: max-content;
        width: 30px;
        pad: 7px;
        background-color: transparent;
        border: 1px solid var(--stroke-dark);
        cursor: pointer;
        position: relative;
        transition: all .2s ease;
        z-index: 15
    }

    .order_settings_drop:hover {
        background-color: var(--bg-medium)
    }

    .order_settings_drop:hover svg path {
        fill: #fff
    }

    .order_settings_drop.active {
        background-color: var(--bg-medium)
    }

    .order_settings_drop.active svg path {
        fill: var(--color_main_1)
    }

    .deliver_order_form {
        height: 50vh;
        max-height: 340px;
        max-width: 420px
    }

    .add_payment_method,
    .deliver_order_form {
        background-color: var(--bg-main);
        border-radius: 12px;
        padding: 24px;
        width: 80vw
    }

    .add_payment_method {
        height: -moz-max-content;
        height: max-content;
        max-height: 65vh;
        max-width: 700px;
        overflow-y: auto
    }

    .add_payment_method .left_area {
        border-right: 1px solid var(--stroke-dark);
        height: 100%;
        padding-right: 24px;
        width: 100%
    }

    .add_payment_method .right {
        height: 100%
    }

    @media screen and (max-width:768px) {
        .add_payment_method .left_area {
            border-bottom: 1px solid var(--stroke-dark);
            border-right: none;
            padding-bottom: 24px;
            padding-right: 0
        }
    }

    .pay_booster_form {
        background-color: var(--bg-main);
        border-radius: 12px;
        height: -moz-max-content;
        height: max-content;
        max-height: 65vh;
        max-width: 500px;
        overflow-y: auto;
        padding: 24px;
        width: 80vw
    }

    .pay_booster_form .payout_details_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: -moz-max-content;
        height: max-content;
        min-height: -moz-max-content;
        min-height: max-content;
        width: 100%;
        grid-column-gap: 12px;
        grid-row-gap: 12px
    }

    .pay_booster_form .payout_details_container .payment_detail {
        background-color: var(--bg-extra-dark);
        border-radius: 9px;
        height: 100%;
        padding: 12px 15px;
        width: 100%
    }

    @media screen and (max-width:480px) {
        .pay_booster_form .payout_details_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .chat-avatar {
        border-radius: 50%
    }

    .chat_container {
        align-items: flex-start;
        gap: 16px;
        height: auto;
        justify-items: flex-start
    }

    .chat_container,
    .chat_container .chat_box {
        display: flex;
        flex-direction: column;
        width: 100%
    }

    .chat_container .chat_box {
        align-items: center;
        background: var(--bg-extra-dark);
        gap: 0;
        justify-items: center
    }

    .chat_container .chat_header {
        align-items: center;
        background: var(--color_main_2);
        border-top-left-radius: 12px;
        border-top-right-radius: 12px;
        display: flex;
        flex-direction: row;
        height: 66px;
        justify-content: space-between;
        padding: 9px 15px 9px 9px;
        width: 100%
    }

    .chat_container .chat_header .chat-btn-icon {
        height: 16px;
        width: 16px
    }

    .chat_container .chat_header .other-user-avatar {
        border-radius: 50%;
        position: relative
    }

    .chat_container .chat_header .other-user-avatar .online-indicator {
        bottom: 3px;
        position: absolute;
        right: 0
    }

    @media screen and (max-width:768px) {
        .chat_container .chat_header .mobile-button {
            padding: 5px 10px
        }
    }

    .chat_container .chat_body {
        align-items: flex-end;
        background: var(--bg-extra-dark);
        display: flex;
        flex-direction: row;
        gap: 9px;
        height: 389px;
        justify-content: flex-start;
        overflow-y: scroll;
        padding: 12px;
        width: 100%
    }

    .chat_container .chat_body .user-avatar {
        border-radius: 50%;
        height: 48px;
        width: 48px
    }

    .chat_container .chat_body .messages-container {
        align-items: center;
        display: flex;
        flex-direction: column-reverse;
        gap: 3px;
        height: 389px;
        justify-content: flex-start;
        overflow-x: hidden;
        overflow-y: scroll;
        padding-left: 5px;
        padding-top: 20px;
        width: 100%
    }

    .chat_container .chat_body .messages-container .my-message {
        word-wrap: break-word;
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 9px;
        justify-content: flex-end;
        width: 100%
    }

    .chat_container .chat_body .messages-container .my-message .user-avatar .avatar {
        display: none
    }

    .chat_container .chat_body .messages-container .my-message .message-container {
        border-radius: 12px 12px 12px 12px;
        max-width: 800px;
        min-width: 100px;
        padding: 12px 18px 14px;
        position: relative;
        color: white;
        border:1px solid white;

    }

    .chat_container .chat_body .messages-container .my-message .message-container .message-text {
        font-family: Satoshi, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px
    }

    .chat_container .chat_body .messages-container .my-message .message-container .read_mark {
        bottom: 0;
        position: absolute;
        right: 4px;
        color:white;
    }

    .chat_container .chat_body .messages-container .my-message .message-container .time_mark {
        bottom: 3px;
        color: var(--text-black);
        font-family: Satoshi, sans-serif;
        font-size: 9px;
        font-weight: 400;
        line-height: 9px;
        position: absolute;
        right: 22px;
        color:white;
    }

    .chat_container .chat_body .messages-container .my-message .message-container .is-typing {
        height: 30px;
        width: 100px
    }

    @media screen and (max-width:768px) {
        .chat_container .chat_body .messages-container .my-message .message-container {
            padding: 12px 14px
        }

        .chat_container .chat_body .messages-container .my-message .message-container .message-text {
            font-size: 10px;
            line-height: 14px
        }
    }

    .chat_container .chat_body .messages-container .my-message:first-child .user-avatar .avatar,
    .chat_container .chat_body .messages-container .not-my-message:first-child .user-avatar .avatar {
        display: block
    }

    .chat_container .chat_body .messages-container .service-message {
        word-wrap: break-word;
        align-items: center;
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-left: 55px;
        padding-right: 55px;
        width: 100%
    }

    .chat_container .chat_body .messages-container .service-message.danger .message-container {
        border-left: 3px solid var(--danger)
    }

    .chat_container .chat_body .messages-container .service-message .message-container {
        border: 1px solid var(--stroke-medium);
        border-left: 3px solid var(--color_main_1);
        border-radius: 12px 12px 12px 12px;
        border-bottom-left-radius: 6px;
        border-top-left-radius: 6px;
        padding: 12px 18px 14px;
        position: relative;
        width: 100%
    }

    .chat_container .chat_body .messages-container .service-message .message-container .message-text {
        color: var(--text-light);
        font-family: Satoshi, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px;
        text-align: center
    }

    .chat_container .chat_body .messages-container .service-message .message-container .time_mark {
        bottom: 3px;
        color: var(--text-light);
        font-family: Satoshi, sans-serif;
        font-size: 9px;
        font-weight: 400;
        line-height: 9px;
        position: absolute;
        right: 10px
    }

    @media screen and (max-width:768px) {
        .chat_container .chat_body .messages-container .service-message {
            padding-left: 0;
            padding-right: 0
        }

        .chat_container .chat_body .messages-container .service-message .message-container .message-text {
            font-size: 10px;
            line-height: 14px
        }
    }

    .chat_container .chat_body .messages-container .not-my-message {
        word-wrap: break-word;
        align-items: center;
        display: flex;
        flex-direction: row;
        gap: 9px;
        justify-content: flex-start;
        width: 100%
    }

    .chat_container .chat_body .messages-container .not-my-message .user-avatar .avatar {
        display: none
    }

    .chat_container .chat_body .messages-container .not-my-message.support .message-container {
        background: var(--green)
    }

    .chat_container .chat_body .messages-container .not-my-message .message-container {
        background: white;
        border-radius: 12px 12px 12px 12px;
        max-width: 800px;
        min-width: 100px;
        padding: 12px 18px 14px;
        position: relative
    }

    .chat_container .chat_body .messages-container .not-my-message .message-container .message-text {
        font-family: Satoshi, sans-serif;
        font-size: 14px;
        font-weight: 500;
        line-height: 18px
    }

    .chat_container .chat_body .messages-container .not-my-message .message-container .time_mark {
        bottom: 3px;
        color: var(--text-black);
        font-family: Satoshi, sans-serif;
        font-size: 9px;
        font-weight: 400;
        line-height: 9px;
        position: absolute;
        right: 10px
    }

    @media screen and (max-width:768px) {
        .chat_container .chat_body .messages-container .not-my-message .message-container {
            padding: 12px 14px
        }

        .chat_container .chat_body .messages-container .not-my-message .message-container .message-text {
            font-size: 10px;
            line-height: 14px
        }
    }

    .chat_container .chat_body .messages-container .chat-bubble {
        background-color: var(--text-light);
        -webkit-border-radius: 12px;
        -webkit-border-top-left-radius: 6px;
        -moz-border-radius: 12px;
        padding: 12px 18px 14px;
        -moz-border-radius-topleft: 6px;
        border-radius: 12px;
        border-top-left-radius: 6px;
        display: inline-block
    }

    .chat_container .chat_body .messages-container .typing {
        align-items: center;
        display: flex;
        height: 15px
    }

    .chat_container .chat_body .messages-container .typing .dot {
        animation: mercuryTypingAnimation 1.8s ease-in-out infinite;
        background-color: var(--color_main_2);
        border-radius: 50%;
        display: inline-block;
        height: 5px;
        margin-right: 4px;
        vertical-align: middle;
        width: 5px
    }

    .chat_container .chat_body .messages-container .typing .dot:first-child {
        animation-delay: .2s
    }

    .chat_container .chat_body .messages-container .typing .dot:nth-child(2) {
        animation-delay: .3s
    }

    .chat_container .chat_body .messages-container .typing .dot:nth-child(3) {
        animation-delay: .4s
    }

    .chat_container .chat_body .messages-container .typing .dot:last-child {
        margin-right: 0
    }

    @keyframes mercuryTypingAnimation {
        0% {
            background-color: var(--color_main_2);
            transform: translateY(0)
        }

        28% {
            background-color: var(--color_main_1);
            transform: translateY(-7px)
        }

        44% {
            background-color: var(--color_main_2);
            transform: translateY(0)
        }
    }

    .chat_container .chat_body .tooltip-width {
        max-width: 50%
    }

    @media screen and (max-width:768px) {
        .chat_container .chat_body .user-avatar {
            /* display: none */
        }

        .chat_container .chat_body .tooltip-width {
            max-width: 80%
        }
    }

    .chat_container .chat_footer {
        align-items: center;
        background: var(--color_main_2);
        border-bottom-left-radius: 12px;
        border-bottom-right-radius: 12px;
        display: flex;
        flex-direction: row;
        gap: 9px;
        height: 85px;
        justify-content: space-between;
        padding: 12px;
        position: relative;
        width: 100%
    }

    .chat_container .chat_footer .emoji_picker_area {
        bottom: 30px;
        position: absolute;
        right: 80px;
        z-index: 2
    }

    .chat_container .chat_footer .emoji_picker_picker {
        bottom: 70%;
        position: absolute;
        right: 80px;
        z-index: 2
    }

    .chat_container .chat_footer .emoji_picker_picker .v3-sticky {
        !important
    }

    .saved_payment_method {
        background-color: var(--bg-extra-dark);
        border-radius: 9px;
        padding: 6px
    }

    .saved_payment_method .method_title {
        background-color: var(--bg-main);
        border-radius: 6px;
        min-width: 130px;
        padding: 10px 16.4px
    }

    .saved_payment_method .method_title img {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .info_div {
        align-items: center;
        background-color: var(--bg-medium);
        display: flex;
        justify-content: flex-start;
        min-height: 42px;
        padding: 0 11px 0 12px;
        width: 100%
    }

    .info_div,
    .is_ban_changer {
        border: 1px solid var(--stroke-medium);
        border-radius: 6px
    }

    .is_ban_changer {
        background-color: var(--bg-extra-dark);
        min-height: 60px;
        padding: 10px 18px
    }

    .booster_tier_picker {
        background-color: var(--color_main_2);
        border: 1px solid transparent;
        cursor: pointer;
        padding: 9px 12px;
        transition: all .2s ease-in-out
    }

    .booster_tier_picker.active_tier,
    .booster_tier_picker:hover {
        border: 1px solid var(--color_main_1)
    }

    .booster_tier_picker.active_tier {
        background-color: var(--color_main_2)
    }

    .enable_games_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        height: -moz-min-content;
        height: min-content;
        width: 100%;
        grid-column-gap: 9px;
        grid-row-gap: 9px
    }

    @media screen and (max-width:1440px) {
        .enable_games_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:1200px) {
        .enable_games_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .booster_game_profile {
        background-color: var(--bg-extra-dark);
        border-radius: 12px
    }

    .booster_game_profile .game_title {
        background-color: var(--color_main_2);
        border-radius: 12px 12px 0 0;
        padding: 9px 12px
    }

    .booster_game_profile .options_area {
        border-radius: 0 0 12px 12px;
        padding: 15px
    }

    .otp_generator {
        background-color: var(--bg-extra-dark);
        border-radius: 6px;
        height: 100%;
        min-height: 200px;
        padding: 15px;
        width: 100%
    }

    .otp_generator .otpcode_container {
        background-color: var(--color_main_2);
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        padding: 15px;
        text-align: center;
        width: 100%
    }

    .order_detail_hero_image img {
        transform: scale(1);
        transition: all .2s ease
    }

    .order_detail_hero_image:hover {
        cursor: pointer
    }

    .order_detail_hero_image:hover img {
        transform: scale(1.5)
    }

    .review_us_banner {
        background: var(--bg-extra-dark, #0a0b0d);
        border-radius: 12px
    }

    .review_us_banner .left_area .review_us_image {
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .review_us_banner .right_area {
        padding: 30px
    }

    .read_rules_form {
        background-color: var(--bg-main);
        border-radius: 12px;
        height: 80vh;
        max-height: 800px;
        max-width: 700px;
        overflow: hidden;
        padding: 24px;
        width: 80vw
    }

    .read_rules_form .rules {
        overflow: auto
    }

    .read_rules_form .rules .rule {
        background-color: var(--color_main_2);
        border-radius: 6px !important;
        -moz-border-radius: 6px !important;
        -webkit-border-radius: 6px !important;
        padding: 12px
    }

    .list_style {
        list-style-image: url(/img/games/league-of-legends-boost/star.svg);
        margin-left: 20px
    }

    .list_style li {
        margin-top: 10px
    }

    .file_picker {
        display: none
    }

    .membership_dashboard_overview {
        -webkit-backdrop-filter: blur(4.5px);
        backdrop-filter: blur(4.5px);
        background-color: var(--color_main_2);
        border-radius: 12px
    }

    .membership_dashboard_overview .top_area {
        padding: 24px
    }

    .membership_dashboard_overview .top_area .membership_icon {
        height: auto;
        max-width: 158.999px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .membership_dashboard_overview .membership_perks_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: -moz-max-content;
        height: max-content;
        width: 100%;
        grid-column-gap: 12px;
        grid-row-gap: 12px
    }

    @media screen and (max-width:900px) {
        .membership_dashboard_overview .membership_perks_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .membership_dashboard_overview .bottom_area {
        border-top: 1px solid var(--stroke-dark, #17181a);
        padding: 18px 24px
    }

    .subscription_history {
        background-color: var(--color_main_2);
        border-radius: 9px;
        padding: 15px
    }

    .hiring_request_data_row {
        background-color: var(--bg-extra-dark);
        border-radius: 9px;
        padding: 16px
    }

    .hiring_request_selected {
        background-color: var(--color_main_2);
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--text-light);
        justify-content: flex-start;
        min-height: 37px;
        padding: 9px 12px
    }

    .medium-zoom-image,
    .medium-zoom-overlay {
        z-index: 25
    }

    .ip_login_admin {
        border: 1px solid var(--stroke-medium);
        border-radius: 16px;
        -moz-border-radius: 16px !important;
        -webkit-border-radius: 16px !important
    }

    .ip_login_admin .top_area {
        padding: 1.5rem .75rem
    }

    .ip_login_admin .top_area .danger_button {
        background-color: #2c2126;
        color: #f95657 !important
    }

    .ip_login_admin .top_area .danger_button:hover {
        background-color: #43292e
    }

    .ip_login_admin .bottom_area {
        max-height: 300px;
        overflow: auto;
        padding: 1.5rem .75rem
    }

    .ip_login_admin .bottom_area .browser_icon {
        border: 1px solid var(--stroke-medium);
        border-radius: 50%;
        height: 50px;
        padding: 12px;
        width: 50px
    }

    .ip_login_admin .bottom_area .ip_log_ip {
        background-color: var(--color_main_2);
        border: 1px solid var(--stroke-dark);
        border-radius: 9px;
        -moz-border-radius: 9px !important;
        -webkit-border-radius: 9px !important;
        padding: 6px 9px
    }

    .ip_login_admin .bottom_area .ip_log_ip .hide {
        visibility: hidden
    }

    .delete_account {
        border: 1px solid var(--danger-ring);
        border-radius: .5rem !important;
        -moz-border-radius: .5rem !important;
        -webkit-border-radius: .5rem !important;
        overflow: hidden;
        padding: 16px;
        position: relative
    }

    .delete_account>* {
        z-index: 1
    }

    .delete_account:before {
        background-color: var(--danger-ring);
        content: "";
        filter: blur(10px);
        height: 80%;
        left: .5rem;
        opacity: .2;
        position: absolute;
        top: .5rem;
        width: 60%
    }

    .delete_account button {
        border: 1px solid var(--danger-ring);
        border-radius: .5rem !important;
        -moz-border-radius: .5rem !important;
        -webkit-border-radius: .5rem !important
    }

    .delete_account button:hover {
        border: 1px solid #ee4443
    }

    .verification {
        background-color: transparent;
        height: 100%;
        padding-top: 5%
    }

    .verification .default-block {
        background-color: #0a0b0d;
        border-radius: 12px;
        padding: 20px 40px
    }

    .verification .medium-block {
        max-width: 758px
    }

    .verification .medium-block,
    .verification .small-block {
        background-color: #0a0b0d;
        border-radius: 12px;
        padding: 10px
    }

    .verification .small-block {
        max-width: 406px
    }

    .default-block {
        background-color: #0a0b0d;
        border-radius: 12px;
        padding: 20px 40px
    }

    .medium-block {
        max-width: 758px
    }

    .medium-block,
    .small-block {
        background-color: #0a0b0d;
        border-radius: 12px;
        padding: 10px
    }

    .small-block {
        max-width: 406px
    }

    .maxed_kye_width {
        max-width: 700px
    }

    .kyc_disabled {
        background-color: transparent
    }

    .such_wow_container {
        border: 1px solid var(--stroke-medium);
        border-radius: 12px;
        padding: 60px 16px
    }

    .no_orders {
        border: 1px solid var(--stroke-medium);
        border-radius: 12px;
        padding: 24px
    }

    .no_orders .no_order_games {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        place-items: center;
        width: 100%;
        grid-column-gap: 12px;
        grid-row-gap: 12px
    }

    @media screen and (max-width:1440px) {
        .no_orders .no_order_games {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media screen and (max-width:900px) {
        .no_orders .no_order_games {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:600px) {
        .no_orders .no_order_games {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .no_orders .pack_selector {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        min-height: -moz-max-content;
        min-height: max-content;
        min-width: -moz-max-content;
        min-width: max-content;
        padding: 5px;
        transition: all .2s ease;
        width: 100%
    }

    .no_orders .pack_selector .pack-title {
        color: var(--text-gray)
    }

    .no_orders .pack_selector:hover {
        background-color: var(--color_main_2);
        border: 1px solid var(--stroke-orange)
    }

    .no_orders .pack_selector:hover .pack-title {
        color: var(--text-white)
    }

    .no_orders .pack_selector.disabled {
        opacity: .5;
        pointer-events: none
    }





    .login_page {
        height: -moz-max-content;
        height: max-content;
        min-height: 100vh;
        padding: 12px;
        width: 100%
    }

    .login_page,
    .login_page .forms_container {
        background-color: var(--bg-main)
    }

    .login_page_image {
        height: auto !important;
        max-width: 250px !important;
        width: 100% !important
    }

    .login-padding {
        padding: 15px 13px 0
    }

    .gsi-material-button {
        -webkit-appearance: none;
        background-color: #131314;
        background-image: none;
        border: 1px solid #8e918f;
        border-radius: 20px;
        box-sizing: border-box;
        color: #e3e3e3;
        cursor: pointer;
        font-family: Roboto, arial, sans-serif;
        font-size: 14px;
        height: 40px;
        letter-spacing: .25px;
        max-width: 400px;
        min-width: -moz-min-content;
        min-width: min-content;
        outline: none;
        overflow: hidden;
        padding: 0 12px;
        position: relative;
        text-align: center;
        transition: background-color .218s, border-color .218s, box-shadow .218s;
        -moz-user-select: none;
        -webkit-user-select: none;
        -ms-user-select: none;
        vertical-align: middle;
        white-space: nowrap;
        width: auto
    }

    .gsi-material-button .gsi-material-button-icon {
        height: 20px;
        margin-right: 12px;
        min-width: 20px;
        width: 20px
    }

    .gsi-material-button .gsi-material-button-content-wrapper {
        align-items: center;
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        height: 100%;
        justify-content: space-between;
        position: relative;
        width: 100%
    }

    .gsi-material-button .gsi-material-button-contents {
        flex-grow: 1;
        font-family: Roboto, arial, sans-serif;
        font-weight: 500;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: top
    }

    .gsi-material-button .gsi-material-button-state {
        bottom: 0;
        left: 0;
        opacity: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: opacity .218s
    }

    .gsi-material-button:disabled {
        background-color: rgba(19, 19, 20, .38);
        border-color: hsla(140, 1%, 56%, .122);
        cursor: default
    }

    .gsi-material-button:disabled .gsi-material-button-state {
        background-color: hsla(0, 0%, 89%, .122)
    }

    .gsi-material-button:disabled .gsi-material-button-contents,
    .gsi-material-button:disabled .gsi-material-button-icon {
        opacity: 38%
    }

    .gsi-material-button:not(:disabled):active .gsi-material-button-state,
    .gsi-material-button:not(:disabled):focus .gsi-material-button-state {
        background-color: #fff;
        opacity: 12%
    }

    .gsi-material-button:not(:disabled):hover {
        box-shadow: 0 1px 2px 0 rgba(60, 64, 67, .3), 0 1px 3px 1px rgba(60, 64, 67, .15)
    }

    .gsi-material-button:not(:disabled):hover .gsi-material-button-state {
        background-color: #fff;
        opacity: 8%
    }



    .membership_hero_banner {
        max-height: 609px;
        min-height: 70vh;
        position: relative
    }

    .membership_hero_banner>* {
        z-index: 1
    }

    .membership_hero_banner:after {
        background-image: url(/images/membership/membership_banner_image.webp);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 70%
    }

    @media screen and (max-width:900px) {
        .membership_hero_banner {
            min-height: 100%
        }

        .membership_hero_banner:after {
            opacity: .5;
            width: 100%
        }
    }

    .review_banner_loop {
        gap: 4vw;
        height: 100%;
        margin-left: -150px;
        overflow-x: hidden;
        overflow: hidden;
        width: calc(100% + 220px)
    }

    .review_banner_loop .loop_track {
        animation: textLeftToRight 40s linear infinite;
        display: flex;
        gap: 4vw;
        width: 3500px
    }

    .review_banner_loop .benefits_text {
        -webkit-text-stroke: 1px var(--stroke-medium);
        color: transparent
    }

    @media screen and (max-width:768px) {
        .review_banner_loop {
            margin-left: 0;
            width: 100%
        }

        .review_banner_loop .reviews_text {
            font-size: 6rem
        }
    }

    @media screen and (max-width:480px) {
        .review_banner_loop .reviews_text {
            font-size: 4rem
        }
    }

    .membership_page .membership_banner {
        margin-top: 0 !important
    }

    .membership_priority_banners {
        border: 1px solid hsla(0, 0%, 100%, .08);
        border-radius: 12px;
        height: 100%;
        max-height: 460px;
        min-height: 46vh;
        overflow: hidden;
        padding: 8vh 4vw;
        position: relative
    }

    .membership_priority_banners>* {
        z-index: 1
    }

    .membership_priority_banners .title-h2 {
        max-width: 20ch
    }

    .membership_priority_banners .benefit_image {
        bottom: 0;
        height: auto;
        max-width: 600px;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        right: 0;
        width: 40%
    }

    .membership_priority_banners svg {
        height: 36px;
        width: 36px
    }

    .membership_priority_banners:before {
        bottom: -10%;
        left: -5%;
        opacity: .4
    }

    .membership_priority_banners:after,
    .membership_priority_banners:before {
        content: "";
        filter: blur(60px);
        height: 50%;
        position: absolute;
        width: 25%;
        z-index: -1
    }

    .membership_priority_banners:after {
        opacity: .2;
        right: -5%;
        top: -10%
    }

    .membership_priority_banners.banner-0:after,
    .membership_priority_banners.banner-0:before {
        background: #11687a
    }

    .membership_priority_banners.banner-1:after,
    .membership_priority_banners.banner-1:before {
        background: #11547a
    }

    .membership_priority_banners.banner-2:after,
    .membership_priority_banners.banner-2:before {
        background: #117a7a
    }

    .membership_priority_banners.banner-3:after,
    .membership_priority_banners.banner-3:before {
        background: #107755
    }

    .apparel_banner {
        background-color: var(--bg-extra-dark);
        border-radius: 12px;
        overflow: hidden;
        padding: 8vh 4vw;
        position: relative
    }

    .apparel_banner>* {
        z-index: 1
    }

    .apparel_banner .apparel_image {
        bottom: 0;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        right: 0;
        width: 30%;
        z-index: 0
    }

    @media screen and (max-width:600px) {
        .apparel_banner .apparel_image {
            opacity: .4;
            width: 100%
        }
    }

    .membership_benefits_scroll {
        position: sticky;
        position: -webkit-sticky;
        top: 80px
    }

    @media screen and (max-width:900px) {
        .membership_benefits_scroll {
            position: relative
        }
    }

    .membership_icon_bottom {
        height: 22px;
        width: 22px
    }

    .perk_list_benefits {
        list-style-type: none;
        margin-left: 10px
    }

    .perk_list_benefits li {
        display: inline-block;
        margin-right: 20px
    }

    @media screen and (max-width:500px) {
        .perk_list_benefits li {
            align-items: center;
            display: flex;
            gap: 5px;
            justify-content: flex-start;
            margin-bottom: 10px;
            margin-right: 0
        }
    }

    .p-Input-input {
        background: red !important;
        font-size: 16px !important
    }



    .work_with_us_hero_banner {
        max-height: 609px;
        min-height: 70vh;
        position: relative
    }

    .work_with_us_hero_banner>* {
        z-index: 1
    }

    .work_with_us_hero_banner:after {
        background-image: url(/images/work-with-us/workwithus_banner_image.webp);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 70%
    }

    @media screen and (max-width:900px) {
        .work_with_us_hero_banner {
            min-height: 100%
        }

        .work_with_us_hero_banner:after {
            opacity: .5;
            width: 100%
        }
    }

    .work_with_us_why_card {
        border-bottom: 1px solid var(--stroke-dark);
        height: 100%;
        max-height: 450px;
        padding-left: 12.5vh;
        position: relative;
        width: 100%
    }

    .work_with_us_why_card .why_us_image {
        height: auto;
        max-width: 850px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .work_with_us_why_card .index {
        left: 0;
        position: absolute;
        top: 30px
    }

    .work_with_us_why_card:first-child {
        border-top: 1px solid var(--stroke-dark)
    }

    @media screen and (max-width:1400px) {
        .work_with_us_why_card {
            padding: 1rem
        }
    }

    @media screen and (max-width:1200px) {
        .work_with_us_why_card {
            padding: 60px 1rem 1rem
        }
    }

    .why_us_benefit_card_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        margin-top: 50px;
        width: 100%;
        grid-column-gap: 120px;
        grid-row-gap: 50px
    }

    .why_us_benefit_card_container .card {
        min-height: -moz-max-content;
        min-height: max-content
    }

    @media screen and (max-width:1200px) {
        .why_us_benefit_card_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:600px) {
        .why_us_benefit_card_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .booster_requirement_card_container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        margin-top: 50px;
        width: 100%;
        grid-column-gap: 54px;
        grid-row-gap: 0
    }

    .booster_requirement_card_container .card {
        border-bottom: 1px solid var(--stroke-dark);
        height: 100%;
        padding: 30px 0
    }

    .booster_requirement_card_container .card.disabled {
        filter: saturate(0);
        opacity: .75;
        pointer-events: none
    }

    .booster_requirement_card_container .card:first-child,
    .booster_requirement_card_container .card:nth-child(2),
    .booster_requirement_card_container .card:nth-child(3),
    .booster_requirement_card_container .card:nth-child(4) {
        border-top: 1px solid var(--stroke-dark)
    }

    @media screen and (max-width:1200px) {
        .booster_requirement_card_container {
            grid-template-columns: repeat(3, 1fr)
        }

        .booster_requirement_card_container .card:first-child,
        .booster_requirement_card_container .card:nth-child(2),
        .booster_requirement_card_container .card:nth-child(3) {
            border-top: 1px solid var(--stroke-dark)
        }

        .booster_requirement_card_container .card:nth-child(4) {
            border-top: none
        }
    }

    @media screen and (max-width:768px) {
        .booster_requirement_card_container {
            grid-template-columns: repeat(2, 1fr)
        }

        .booster_requirement_card_container .card:first-child,
        .booster_requirement_card_container .card:nth-child(2) {
            border-top: 1px solid var(--stroke-dark)
        }

        .booster_requirement_card_container .card:nth-child(3),
        .booster_requirement_card_container .card:nth-child(4) {
            border-top: none
        }
    }

    @media screen and (max-width:480px) {
        .booster_requirement_card_container {
            grid-template-columns: repeat(1, 1fr)
        }

        .booster_requirement_card_container .card:first-child {
            border-top: 1px solid var(--stroke-dark)
        }

        .booster_requirement_card_container .card:nth-child(2),
        .booster_requirement_card_container .card:nth-child(3),
        .booster_requirement_card_container .card:nth-child(4) {
            border-top: none
        }
    }



    @charset "UTF-8";

    .d-flex-row,
    .online_boosters_chip {
        flex-direction: row;
        height: 100%
    }

    .d-flex-column,
    .d-flex-row,
    .online_boosters_chip {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: center;
        width: 100%
    }

    .d-flex-column {
        flex-direction: column;
        height: -moz-max-content;
        height: max-content
    }

    .d-hide {
        display: none
    }

    @media screen and (max-width:768px) {
        .md-flex {
            display: flex
        }

        .md-flex-wrap {
            flex-wrap: wrap
        }
    }

    @media screen and (max-width:1200px) {
        .lg-flex {
            display: flex
        }
    }

    @media screen and (max-width:900px) {
        .lg-hide {
            display: none !important
        }
    }

    @media screen and (min-width:900px) {
        .above-lg-hide {
            display: none !important
        }
    }

    @media screen and (min-width:769px) {
        .above-md-hide {
            display: none !important
        }
    }

    @media screen and (max-width:768px) {
        .md-hide {
            display: none !important
        }
    }

    @media screen and (max-width:600px) {
        .sm-hide {
            display: none !important
        }
    }

    @media screen and (min-width:600px) {
        .above-sm-hide {
            display: none !important
        }
    }

    @media screen and (max-width:1200px) {
        .xl-hide {
            display: none !important
        }
    }

    @media screen and (min-width:1201px) {
        .above-xl-hide {
            display: none !important
        }
    }

    @media screen and (max-height:500px) and (orientation:landscape) {
        .on-mobile-show {
            display: flex !important
        }
    }

    @media screen and (max-width:900px) {
        .lg-show {
            display: flex
        }
    }

    @media screen and (max-width:768px) {
        .md-show {
            display: flex
        }
    }

    @media screen and (max-width:480px) {
        .sm-row-to-col {
            flex-direction: column
        }
    }

    @media screen and (max-width:768px) {
        .md-row-to-col {
            flex-direction: column
        }
    }

    @media screen and (max-width:1200px) {
        .xl-row-to-col {
            flex-direction: column
        }
    }

    @media screen and (max-width:900px) {
        .lg-row-to-col {
            flex-direction: column
        }

        .lg-col-to-row {
            flex-direction: row
        }
    }

    @media screen and (max-width:768px) {
        .md-col-to-row {
            flex-direction: row
        }
    }

    .justify-center {
        justify-content: center
    }

    .align-center {
        align-items: center !important
    }

    .space-between {
        justify-content: space-between
    }

    .align-start {
        align-items: flex-start !important
    }

    .align-end {
        align-items: flex-end !important
    }

    .justify-start {
        justify-content: flex-start
    }

    .justify-end {
        justify-content: flex-end
    }

    .space-evenly {
        justify-content: space-evenly
    }

    @media screen and (max-width:768px) {
        .align-md-start {
            align-items: flex-start
        }
    }

    @media screen and (max-width:900px) {
        .align-lg-start {
            align-items: flex-start !important
        }

        .align-lg-center {
            align-items: center !important
        }
    }

    @media screen and (max-width:768px) {
        .align-md-center {
            align-items: center
        }
    }

    @media screen and (max-width:900px) {
        .align-lg-center {
            align-items: center
        }
    }

    @media screen and (max-width:768px) {
        .justify-md-between {
            justify-content: space-between
        }

        .justify-md-center {
            justify-content: center
        }

        .align-md-center {
            align-items: center !important
        }

        .justify-md-start {
            justify-content: start
        }
    }

    @media screen and (max-width:900px) {
        .justify-lg-center {
            justify-content: center
        }
    }

    @media screen and (min-width:768px) {
        .justify-md-end {
            justify-content: flex-end
        }
    }

    @media screen and (max-width:480px) {
        .justify-sm-start {
            justify-content: flex-start
        }
    }

    @media screen and (max-width:600px) {
        .justify-sm-center {
            justify-content: center
        }
    }

    @media screen and (max-width:480px) {
        .align-sm-start {
            align-items: flex-start
        }
    }

    @media screen and (max-width:600px) {
        .align-sm-center {
            align-items: center !important
        }
    }

    .text-center {
        display: flex;
        text-align: center
    }

    .align-self-center {
        align-self: center
    }

    .align-self-end {
        align-self: flex-end
    }

    .row-reverse {
        flex-direction: row-reverse
    }

    .column-reverse {
        flex-direction: column-reverse
    }



    .gap-6 {
        gap: 6px
    }

    .gap-8 {
        gap: 8px
    }

    .gap-9 {
        gap: 9px
    }

    .gap-10 {
        gap: 10px
    }

    .gap-12 {
        gap: 12px
    }

    .gap-15 {
        gap: 15px
    }

    .gap-18 {
        gap: 18px
    }

    .gap-24 {
        gap: 24px
    }

    .gap-30 {
        gap: 30px
    }

    .gap-36 {
        gap: 36px
    }

    .gap-50 {
        gap: 50px
    }

    .gap-0 {
        gap: 0
    }

    .gap-16 {
        gap: 16px
    }

    .gap-42 {
        gap: 42px
    }

    .gap-40 {
        gap: 40px
    }

    .gap-48 {
        gap: 48px
    }

    .gap-60 {
        gap: 60px
    }

    .gap-180 {
        gap: 180px
    }

    @media screen and (max-width:768px) {
        .gap-md-10 {
            gap: 10px
        }
    }

    @media screen and (max-width:1200px) {
        .gap-lg-0 {
            gap: 0
        }

        .gap-lg-15 {
            gap: 15px
        }
    }

    .gap-2vh {
        gap: 2vh
    }

    .gap-4vh {
        gap: 4vh
    }

    .gap-38vw {
        gap: 3.84vw
    }

    .flex-05 {
        flex: 0.05
    }

    .flex-1 {
        flex: 0.1
    }

    .flex-15 {
        flex: 0.15
    }

    .flex-2 {
        flex: 0.2
    }

    .flex-25 {
        flex: 0.25
    }

    .flex-3 {
        flex: 0.3
    }

    .flex-35 {
        flex: 0.35
    }

    .flex-4 {
        flex: 0.4
    }

    .flex-5 {
        flex: 0.5
    }

    .flex-55 {
        flex: 0.55
    }

    .flex-6 {
        flex: 0.6
    }

    .flex-65 {
        flex: 0.65
    }

    .flex-7 {
        flex: 0.7
    }

    .flex-75 {
        flex: 0.75
    }

    .flex-775 {
        flex: 0.775
    }

    .flex-85 {
        flex: 0.85
    }

    .flex-8 {
        flex: 0.8
    }

    .flex-9 {
        flex: 0.9
    }

    .flex-95 {
        flex: 0.95
    }

    .flex-45 {
        flex: 0.45
    }

    .flex-10 {
        flex: 1
    }

    @media screen and (max-width:1440px) {
        .flex-xl-8 {
            flex: 8
        }
    }

    @media screen and (max-width:900px) {
        .flex-lg-10 {
            flex: 1
        }

        .flex-lg-9 {
            flex: 9
        }

        .flex-lg-1 {
            flex: 1
        }
    }

    @media screen and (max-width:768px) {
        .flex-md-10 {
            flex: 1
        }
    }

    @media screen and (max-width:480px) {
        .flex-sm-10 {
            flex: 1
        }
    }

    @media screen and (max-width:768px) {
        .flex-md-5 {
            flex: 0.5
        }
    }

    @media screen and (max-height:500px) and (orientation:landscape) {
        .flex-mobile-10 {
            flex: 1
        }
    }

    @media screen and (max-width:1200px) {
        .flex-lg-5 {
            flex: 0.5
        }

        .flex-lg-10 {
            flex: 1
        }
    }

    @media screen and (max-width:1600px) {
        .flex-xl-10 {
            flex: 1
        }
    }

    @media screen and (max-width:500px) {
        .flex-sm-wrap {
            flex-wrap: wrap
        }
    }

    .flex-wrap {
        flex-wrap: wrap
    }

    .mb-2 {
        margin-bottom: 2vh
    }

    .mt-2 {
        margin-top: 2vh
    }

    .mb-1 {
        margin-bottom: 10px
    }

    .width-100 {
        width: 100%
    }

    @media screen and (max-width:768px) {
        .width-m-100 {
            width: 100%
        }
    }

    @media screen and (max-width:480px) {
        .sm-width-95 {
            width: 95%
        }
    }

    .width-75 {
        width: 75%
    }

    .width-50 {
        width: 50%
    }

    .width-25 {
        width: 25%
    }

    .max-width-100 {
        max-width: 100% !important
    }

    .height-100 {
        height: 100% !important
    }

    @media screen and (max-width:1200px) {
        .lg-min-height-100 {
            min-height: 100% !important
        }
    }

    .container-w-100 {
        margin-left: auto;
        margin-right: auto;
        width: 100%
    }

    .border-none {
        border: none !important
    }

    .b-radius-3 {
        border-radius: 3px !important;
        -moz-border-radius: 3px !important;
        -webkit-border-radius: 3px !important
    }

    .b-radius-4 {
        border-radius: 4px !important;
        -moz-border-radius: 4px !important;
        -webkit-border-radius: 4px !important
    }

    .b-radius-6 {
        border-radius: 6px !important;
        -moz-border-radius: 6px !important;
        -webkit-border-radius: 6px !important
    }

    .b-radius-9 {
        border-radius: 9px !important;
        -moz-border-radius: 9px !important;
        -webkit-border-radius: 9px !important
    }

    .b-radius-10 {
        border-radius: 10px !important;
        -moz-border-radius: 10px !important;
        -webkit-border-radius: 10px !important
    }

    .b-radius-12 {
        border-radius: 12px !important;
        -moz-border-radius: 12px !important;
        -webkit-border-radius: 12px !important
    }

    .b-radius-15 {
        border-radius: 15px !important;
        -moz-border-radius: 15px !important;
        -webkit-border-radius: 15px !important
    }

    .b-radius-18 {
        border-radius: 18px !important;
        -moz-border-radius: 18px !important;
        -webkit-border-radius: 18px !important
    }

    .b-radius-24 {
        border-radius: 24px;
        -moz-border-radius: 24px !important;
        -webkit-border-radius: 24px !important
    }

    .b-radius-35 {
        border-radius: 35px;
        -moz-border-radius: 35px !important;
        -webkit-border-radius: 35px !important
    }

    .border-top {
        border-top: 1px solid var(--divider)
    }

    .border-bottom {
        border-bottom: 1px solid var(--divider)
    }

    .border {
        border: 1px solid var(--divider)
    }

    .border-primary {
        border: 1px solid var(--primary) !important
    }

    .bg-transparent {
        background-color: transparent !important
    }

    .bg-extra-dark {
        background-color: var(--bg-extra-dark)
    }

    .single-blog .single-blog-menu,
    .white-space-no {
        white-space: nowrap
    }

    .zIndex-1 {
        z-index: 1
    }

    .pad-b-0 {
        padding-bottom: 0 !important
    }

    .pad-t-0 {
        padding-top: 0 !important
    }

    .pad-4px {
        padding: 4px
    }

    .pad-1 {
        padding: 1rem
    }

    .pad-2 {
        padding: 2rem
    }

    .pad-0-10 {
        padding: 0 10px
    }

    .pad-24-0 {
        padding: 24px 0
    }

    .pad-10-15 {
        padding: 10px 15px
    }

    .pad-48 {
        padding: 48px
    }

    .mt-15 {
        margin-top: 15px
    }

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

    .mt-30 {
        margin-top: 30px
    }

    @media screen and (max-width:1200px) {
        .mt-lg-15 {
            margin-top: 15px
        }
    }

    .ml-12 {
        margin-left: 12px
    }

    .cursor-pointer {
        cursor: pointer
    }

    .m-t-2 {
        margin-top: 2vw
    }

    .m-t-3 {
        margin-top: 3vw
    }

    .m-t-5 {
        margin-top: 5vw
    }

    .m-t-6 {
        margin-top: clamp(50px, 6vw, 100px)
    }

    .m-t-11 {
        margin-top: 11vw
    }

    @media screen and (min-width:2100px) {
        .xl-screen-m {
            margin-top: 100px
        }
    }

    .relative {
        position: relative;
        width: 100%
    }

    .grey-scale-img {
        filter: grayscale(100%)
    }

    .inline {
        display: inline
    }

    .opacity-50 {
        opacity: .5
    }

    .order-1 {
        order: 1
    }

    .order-2 {
        order: 2
    }

    @media screen and (max-width:768px) {
        .md-order-1 {
            order: 1
        }

        .md-order-2 {
            order: 2
        }
    }

    .custom-faqs,
    .unselectable {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .text-underline {
        text-decoration: underline
    }

    .strike-through {
        text-decoration-line: line-through
    }

    .hide_scroll,
    .opened_games_list .games_list {
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .hide_scroll::-webkit-scrollbar,
    .opened_games_list .games_list::-webkit-scrollbar {
        display: none
    }

    .height-max-content {
        height: -moz-max-content !important;
        height: max-content !important
    }

    .width-max-content {
        width: -moz-max-content !important;
        width: max-content !important
    }

    @media screen and (max-width:768px) {
        .mobile-min-height {
            min-height: 600px
        }
    }

    .animateOpacity,
    .animation-1,
    .animation-2,
    .opacity-enter-active,
    .opacity-leave-active,
    .pop_item_container.main .selector,
    .pop_item_container.notifications .selector,
    .slide-fade-bottom-enter-active,
    .slide-fade-bottom-leave-active,
    .slide-fade-top-enter-active,
    .slide-fade-top-leave-active,
    .why_us_banner .left_area:after,
    .why_us_banner .left_area:before {
        transition: all .3s cubic-bezier(.4, .68, .07, .65)
    }

    .slide-fade-top-enter-from,
    .slide-fade-top-leave-to {
        opacity: 0;
        transform: translateY(-50px)
    }

    .slide-fade-bottom-enter-from,
    .slide-fade-bottom-leave-to {
        opacity: 0;
        transform: translateY(50px)
    }

    .slide-down-enter-active,
    .slide-down-leave-active {
        transition: all .25s ease-out
    }

    .slide-down-enter-from {
        opacity: 0;
        transform: translateY(-30px)
    }

    .slide-down-leave-to {
        opacity: 0;
        transform: translateY(30px)
    }

    .slider-left-enter-active,
    .slider-left-leave-active {
        transition: all .4s cubic-bezier(1, .1, .5, 0)
    }

    .slider-left-enter-from {
        opacity: 0;
        transform: translateX(60px)
    }

    .slider-left-leave-to {
        opacity: 0;
        transform: translateX(-60px)
    }

    .menu-left-enter-active,
    .menu-left-leave-active {
        transition: all .4s cubic-bezier(1, .1, .5, 0)
    }

    .menu-left-enter-from {
        opacity: 0;
        transform: translateX(60px)
    }

    .menu-left-leave-to {
        opacity: 0;
        transform: translateX(-60px)
    }

    .lang_menu-enter-active,
    .lang_menu-leave-active {
        transform-origin: left;
        transition: all .4s cubic-bezier(1, .1, .5, 0)
    }

    .lang_menu-enter-from,
    .lang_menu-leave-to {
        transform: translate(-100%)
    }

    .profile_menu-enter-active,
    .profile_menu-leave-active {
        transform-origin: left;
        transform: translateX(-10px);
        transition: all .4s cubic-bezier(1, .1, .5, 0)
    }

    .profile_menu-enter-from,
    .profile_menu-leave-to {
        transform: translate(100%)
    }

    .profile_menu-mobile-enter-active,
    .profile_menu-mobile-leave-active {
        transform-origin: bottom;
        transition: all .5s cubic-bezier(.7, 0, .84, 0)
    }

    .profile_menu-mobile-enter-from,
    .profile_menu-mobile-leave-to {
        transform: translateY(100%)
    }

    .opacity-enter-from,
    .opacity-leave-to {
        opacity: 0
    }

    .blur-left-slide-in {
        animation: slide-in-blurred-left .6s cubic-bezier(.23, 1, .32, 1) both
    }

    .blur-left-slide-out {
        animation: slide-out-blurred-left .45s cubic-bezier(.755, .05, .855, .06) both
    }

    .blur-right-slide-out {
        animation: slide-out-blurred-right .45s cubic-bezier(.755, .05, .855, .06) both
    }

    .blur-right-slide-in {
        animation: slide-in-blurred-right .6s cubic-bezier(.23, 1, .32, 1) both
    }

    .list-enter-active,
    .list-leave-active {
        transition: all .4s ease
    }

    .list-enter-from,
    .list-leave-to {
        opacity: 0;
        transform: translateY(-50px)
    }

    .array-bulk-enter-active,
    .array-bulk-leave-active,
    .array-bulk-move {
        transition: all .5s cubic-bezier(.55, 0, .1, 1)
    }

    .array-bulk-enter-from,
    .array-bulk-leave-to {
        opacity: 0;
        transform: scaleY(.01) translate(0)
    }

    @keyframes slide-in-blurred-left {
        0% {
            filter: blur(40px);
            opacity: 0;
            transform: translateX(-1000px) scaleX(2.5) scaleY(.2);
            transform-origin: 100% 50%
        }

        to {
            filter: blur(0);
            opacity: 1;
            transform: translateX(0) scaleY(1) scaleX(1);
            transform-origin: 50% 50%
        }
    }

    @keyframes slide-out-blurred-left {
        0% {
            filter: blur(0);
            opacity: 1;
            transform: translateX(0) scaleY(1) scaleX(1);
            transform-origin: 50% 50%
        }

        to {
            filter: blur(40px);
            opacity: 0;
            transform: translateX(-1000px) scaleX(2) scaleY(.2);
            transform-origin: 100% 50%
        }
    }

    @keyframes slide-in-blurred-right {
        0% {
            filter: blur(40px);
            opacity: 0;
            transform: translateX(1000px) scaleX(2.5) scaleY(.2);
            transform-origin: 0 50%
        }

        to {
            filter: blur(0);
            opacity: 1;
            transform: translateX(0) scaleY(1) scaleX(1);
            transform-origin: 50% 50%
        }
    }

    @keyframes slide-out-blurred-right {
        0% {
            filter: blur(0);
            opacity: 1;
            transform: translateX(0) scaleY(1) scaleX(1);
            transform-origin: 50% 50%
        }

        to {
            filter: blur(40px);
            opacity: 0;
            transform: translateX(1000px) scaleX(2) scaleY(.2);
            transform-origin: 0 50%
        }
    }

    @keyframes slider_pagination {
        0% {
            width: 0
        }

        to {
            width: 100%
        }
    }

    @keyframes slider_pagination_vertical {
        0% {
            height: 0
        }

        to {
            height: 100%
        }
    }

    @keyframes pulse-animation-lol {
        0% {
            box-shadow: 0 0 0 0 #0fa2b7
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(15, 162, 183, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(15, 162, 183, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(15, 162, 183, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(15, 162, 183, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(15, 162, 183, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(15, 162, 183, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(15, 162, 183, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(15, 162, 183, 0)
        }
    }

    @keyframes pulse-animation-val {
        0% {
            box-shadow: 0 0 0 0 #ff5261
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(255, 82, 97, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(255, 82, 97, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(255, 82, 97, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(255, 82, 97, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(255, 82, 97, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(255, 82, 97, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(255, 82, 97, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(255, 82, 97, 0)
        }
    }

    @keyframes pulse-animation-r6s {
        0% {
            box-shadow: 0 0 0 0 #c49e2c
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(196, 158, 44, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(196, 158, 44, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(196, 158, 44, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(196, 158, 44, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(196, 158, 44, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(196, 158, 44, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(196, 158, 44, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(196, 158, 44, 0)
        }
    }

    @keyframes pulse-animation-ow2 {
        0% {
            box-shadow: 0 0 0 0 #fa7024
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(250, 112, 36, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(250, 112, 36, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(250, 112, 36, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(250, 112, 36, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(250, 112, 36, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(250, 112, 36, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(250, 112, 36, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(250, 112, 36, 0)
        }
    }

    @keyframes pulse-animation-rl {
        0% {
            box-shadow: 0 0 0 0 #e9852d
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(233, 133, 45, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(233, 133, 45, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(233, 133, 45, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(233, 133, 45, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(233, 133, 45, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(233, 133, 45, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(233, 133, 45, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(233, 133, 45, 0)
        }
    }

    @keyframes pulse-animation-wow {
        0% {
            box-shadow: 0 0 0 0 #ebbf37
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(235, 191, 55, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(235, 191, 55, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(235, 191, 55, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(235, 191, 55, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(235, 191, 55, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(235, 191, 55, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(235, 191, 55, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(235, 191, 55, 0)
        }
    }

    @keyframes pulse-animation-do2 {
        0% {
            box-shadow: 0 0 0 0 #d43d32
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(212, 61, 50, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(212, 61, 50, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(212, 61, 50, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(212, 61, 50, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(212, 61, 50, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(212, 61, 50, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(212, 61, 50, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(212, 61, 50, 0)
        }
    }

    @keyframes pulse-animation-apex {
        0% {
            box-shadow: 0 0 0 0 #fc485a
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(252, 72, 90, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(252, 72, 90, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(252, 72, 90, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(252, 72, 90, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(252, 72, 90, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(252, 72, 90, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(252, 72, 90, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(252, 72, 90, 0)
        }
    }

    @keyframes pulse-animation-tft {
        0% {
            box-shadow: 0 0 0 0 #7e73ff
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(126, 115, 255, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(126, 115, 255, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(126, 115, 255, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(126, 115, 255, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(126, 115, 255, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(126, 115, 255, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(126, 115, 255, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(126, 115, 255, 0)
        }
    }

    @keyframes pulse-animation-greens {
        0% {
            box-shadow: 0 0 0 0 #c5ea50
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(197, 234, 80, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(197, 234, 80, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(197, 234, 80, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(197, 234, 80, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(197, 234, 80, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(197, 234, 80, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(197, 234, 80, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(197, 234, 80, 0)
        }
    }

    @keyframes animateOpacity {
        0% {
            opacity: 1
        }

        50% {
            opacity: .4
        }

        to {
            opacity: 1
        }
    }

    .animateOpacity {
        animation: animateOpacity 3s infinite;
        opacity: 0
    }

    [class*=scrollMagicMobileReverse],
    [class*=scrollMagicMobile],
    [class*=scrollMagicReverse],
    [class*=scrollMagic] {
        overflow: hidden
    }

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

        to {
            transform: rotate(1turn)
        }
    }

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

        to {
            transform: rotate(-1turn)
        }
    }

    @keyframes heartbeat {
        0% {
            transform: scale(.9)
        }

        20% {
            transform: scale(1)
        }

        40% {
            transform: scale(.9)
        }

        60% {
            transform: scale(1)
        }

        80% {
            transform: scale(.9)
        }

        to {
            transform: scale(.9)
        }
    }

    .backgroundParallax {
        background-attachment: fixed;
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover
    }

    @keyframes infinite-slide-bar {
        0% {
            transform: translate3d(-60%, 0, 0)
        }

        to {
            transform: translateZ(0)
        }
    }

    @keyframes infinite-slide-bar-mobile {
        0% {
            transform: translate3d(-40%, 0, 0)
        }

        to {
            transform: translateZ(0)
        }
    }

    @keyframes infinite-slide-bar-inverse {
        0% {
            transform: translateZ(0)
        }

        to {
            transform: translate3d(-66%, 0, 0)
        }
    }

    .infinite-slide-bar,
    .infinite-slide-bar-inverse {
        transform: translateZ(0)
    }

    .infinite-slide-bar {
        animation: infinite-slide-bar 240s linear infinite
    }

    @media (max-width:1200px) {
        .infinite-slide-bar {
            animation-name: infinite-slide-bar-mobile
        }
    }

    .infinite-slide-bar-inverse {
        animation: infinite-slide-bar-inverse 240s linear infinite
    }

    @keyframes pulse-animation-green {
        0% {
            box-shadow: 0 0 0 0 #ff9e48
        }

        13% {
            box-shadow: 0 0 0 .75px rgba(255, 158, 72, .875)
        }

        25% {
            box-shadow: 0 0 0 1.5px rgba(255, 158, 72, .75)
        }

        38% {
            box-shadow: 0 0 0 2.25px rgba(255, 158, 72, .625)
        }

        50% {
            box-shadow: 0 0 0 3px rgba(255, 158, 72, .5)
        }

        63% {
            box-shadow: 0 0 0 3.75px rgba(255, 158, 72, .375)
        }

        75% {
            box-shadow: 0 0 0 4.5px rgba(255, 158, 72, .25)
        }

        83% {
            box-shadow: 0 0 0 5.25px rgba(255, 158, 72, .125)
        }

        to {
            box-shadow: 0 0 0 7.5px rgba(255, 158, 72, 0)
        }
    }

    @keyframes dot_animation {
        0% {
            transform: translateY(0)
        }

        16.667% {
            transform: translateY(-.42px)
        }

        33.333% {
            transform: translateY(-.84px)
        }

        50% {
            transform: translateY(-1.26px)
        }

        66.667% {
            transform: translateY(-1.68px)
        }

        83.333% {
            transform: translateY(-2.1px)
        }

        to {
            transform: translateY(0)
        }
    }

    .typing {
        display: flex;
        gap: 3px;
        padding-top: 4px;
        position: relative
    }

    .typing span {
        animation: blink 1.5s infinite;
        animation-fill-mode: both;
        background: var(--text-white);
        border-radius: 50%;
        content: "";
        height: 3px;
        width: 3px
    }

    .typing span:nth-child(2) {
        animation-delay: .2s
    }

    .typing span:nth-child(3) {
        animation-delay: .4s
    }

    @keyframes blink {
        0% {
            opacity: .1
        }

        20% {
            opacity: 1
        }

        to {
            opacity: .1
        }
    }

    @keyframes textLeftToRight {
        0% {
            transform: translateX(0)
        }

        to {
            transform: translateX(-1750px)
        }
    }


    @keyframes bottomToTop {
        0% {
            transform: translateY(0)
        }

        to {
            transform: translateY(-4500px)
        }
    }


    @keyframes topToBottom {
        0% {
            transform: translateY(4500px)
        }

        to {
            transform: translateY(0)
        }
    }


    @keyframes leftToRight {
        0% {
            transform: translateX(0)
        }

        to {
            transform: translateX(-7500px)
        }
    }

    @keyframes rightToLeft {
        0% {
            transform: translateX(7500px)
        }

        to {
            transform: translateX(0)
        }
    }

    @keyframes path_first_animation {
        0% {
            opacity: .25
        }

        33.33%,
        to {
            opacity: 1
        }
    }

    @keyframes path_second_animation {
        0% {
            opacity: .25
        }

        33.33% {
            opacity: .25
        }

        66.66%,
        to {
            opacity: 1
        }
    }

    @keyframes path_last_animation {
        0% {
            opacity: .25
        }

        66.66% {
            opacity: .25
        }

        to {
            opacity: 1
        }
    }

    @keyframes loading-rotate {
        0% {
            transform: rotate(0turn)
        }

        to {
            transform: rotate(1turn)
        }
    }

    @keyframes gradientAnimation {
        0% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 0, var(--bg-extra-light) 0, var(--bg-extra-light) 100%)
        }

        5% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 5%, var(--bg-extra-light) 5%, var(--bg-extra-light) 100%)
        }

        10% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 10%, var(--bg-extra-light) 10%, var(--bg-extra-light) 100%)
        }

        15% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 15%, var(--bg-extra-light) 15%, var(--bg-extra-light) 100%)
        }

        20% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 20%, var(--bg-extra-light) 20%, var(--bg-extra-light) 100%)
        }

        25% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 25%, var(--bg-extra-light) 25%, var(--bg-extra-light) 100%)
        }

        30% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 30%, var(--bg-extra-light) 30%, var(--bg-extra-light) 100%)
        }

        35% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 35%, var(--bg-extra-light) 35%, var(--bg-extra-light) 100%)
        }

        40% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 40%, var(--bg-extra-light) 40%, var(--bg-extra-light) 100%)
        }

        45% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 45%, var(--bg-extra-light) 45%, var(--bg-extra-light) 100%)
        }

        50% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 50%, var(--bg-extra-light) 50%, var(--bg-extra-light) 100%)
        }

        55% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 55%, var(--bg-extra-light) 55%, var(--bg-extra-light) 100%)
        }

        60% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 60%, var(--bg-extra-light) 60%, var(--bg-extra-light) 100%)
        }

        65% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 65%, var(--bg-extra-light) 65%, var(--bg-extra-light) 100%)
        }

        70% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 75%, var(--bg-extra-light) 75%, var(--bg-extra-light) 100%)
        }

        75% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 75%, var(--bg-extra-light) 75%, var(--bg-extra-light) 100%)
        }

        80% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 80%, var(--bg-extra-light) 80%, var(--bg-extra-light) 100%)
        }

        85% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 85%, var(--bg-extra-light) 85%, var(--bg-extra-light) 100%)
        }

        90% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 90%, var(--bg-extra-light) 90%, var(--bg-extra-light) 100%)
        }

        95% {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 95%, var(--bg-extra-light) 95%, var(--bg-extra-light) 100%)
        }

        to {
            background: conic-gradient(from 0deg, var(--stroke-orange) 0, var(--stroke-orange) 0 100%, var(--bg-extra-light) 100%, var(--bg-extra-light) 100%)
        }
    }

    @keyframes progressLeft {
        to {
            width: 100%
        }
    }

    .slide-fade-nav-top-enter-active,
    .slide-fade-nav-top-leave-active {
        transition: all .5s cubic-bezier(.65, 0, .35, 1)
    }

    .slide-fade-nav-top-enter-from,
    .slide-fade-nav-top-leave-to {
        opacity: 0;
        transform: translateY(-50px)
    }

    .slide-fade-nav-bottom-enter-active,
    .slide-fade-nav-bottom-leave-active {
        transition: all .5s cubic-bezier(.65, 0, .35, 1)
    }

    .slide-fade-nav-bottom-enter-from,
    .slide-fade-nav-bottom-leave-to {
        opacity: 0;
        transform: translateY(50px)
    }

    .slide-fade-nav-left-enter-active,
    .slide-fade-nav-left-leave-active {
        transition: all .5s cubic-bezier(.65, 0, .35, 1)
    }

    .slide-fade-nav-left-enter-from,
    .slide-fade-nav-left-leave-to {
        opacity: 0;
        transform: translateX(50px)
    }


    .t-red {
        color: var(--red)
    }

    .date_picker,
    .dropdown,
    .dropdown .drop_down_search,
    .dropdown.variant-primary .item,
    .dropdown.variant-primary .placeholder,
    .dropdown.variant-primary .selected_item,
    .dropdown.variant-transparent .item,
    .dropdown.variant-transparent .placeholder,
    .dropdown.variant-transparent .selected_item,
    .editorx_body ol li,
    .editorx_body td,
    .editorx_body th,
    .editorx_body ul li,
    .input_field .input_field_container .input_field,
    .pagination .pagination-elpises,
    .single-blog .single-blog-menu,
    .t-white,
    .textarea,
    .tooltip-container .tooltip-custom,
    input.otp-input {
        color: var(--text-white)
    }

    .t-grey,
    .table_container thead tr>th {
        color: var(--text-gray)
    }

    .t-light {
        color: var(--text-light)
    }

    .t-green {
        color: var(--green)
    }

    .t-yellow {
        color: var(--yellow)
    }

    .t-black {
        color: var(--text-black)
    }

    .t-light-orange {
        color: var(--light-orange)
    }

    .textarea::-moz-placeholder {
        color: var(--text-gray-dark)
    }

    .t-grey-dark,
    .textarea::placeholder {
        color: var(--text-gray-dark)
    }

    .t-orange {
        color: var(--color_main_1)
    }

    .t-blue {
        color: var(--color_main_1)
    }

    .t-light-blue {
        color: var(--light-blue)
    }

    .text-black {
        color: var(--text-black)
    }

    .t-danger {
        color: var(--danger)
    }

    .t-pink {
        color: var(--pink)
    }

    .t-time {
        color: var(--time)
    }

    .t-gradient {
        background: var(--Gradient-Membership, linear-gradient(97deg, #77f9a2 .35%, #65eda9 26.82%, #59e8cb 51.35%, #57cfe9 74.83%, #47ade2 100.56%));
        background-clip: text;
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .underline {
        text-decoration: underline
    }

    .available_for_order,
    .blog-head,
    .blogs-head,
    .editorx_body h1,
    .editorx_body h2,
    .editorx_body h3,
    .editorx_body h4,
    .editorx_body h5,
    .editorx_body h6,
    .font-family-1,
    .pagination .pagination-item,
    .policy_list_2 li::marker,
    .search_bar_container .search_bar_field .search_field {
        
    }

    .codex-editor,
    .custom-faqs .accordion .faqs-answer,
    .custom-faqs .accordion .faqs-question,
    .date_picker,
    .dropdown .drop_down_search,
    .dropdown.variant-primary .item,
    .dropdown.variant-primary .placeholder,
    .dropdown.variant-primary .selected_item,
    .dropdown.variant-transparent .item,
    .dropdown.variant-transparent .placeholder,
    .dropdown.variant-transparent .selected_item,
    .editorx_body ol li,
    .editorx_body p,
    .editorx_body td,
    .editorx_body th,
    .editorx_body ul li,
    .font-family-2,
    .input_field .input_field_container .input_field,
    .membership_banner .left-side .monthly_year_chip button.yearly:after,
    .opened_nav_bar .search_field,
    .single-blog .single-blog-menu,
    .table_container thead tr>th,
    .textarea,
    .tooltip-container .tooltip-custom,
    .vue-tel-input {
        font-family: Satoshi, sans-serif
    }

    .f-w-200 {
        font-weight: 200
    }

    .f-w-300 {
        font-weight: 300 !important
    }

    .available_for_order,
    .codex-editor,
    .custom-faqs .accordion .faqs-answer,
    .custom-faqs .accordion .faqs-question,
    .dropdown.variant-primary .item,
    .dropdown.variant-primary .placeholder,
    .dropdown.variant-primary .selected_item,
    .dropdown.variant-transparent .item,
    .dropdown.variant-transparent .placeholder,
    .dropdown.variant-transparent .selected_item,
    .editorx_body .code p,
    .editorx_body .quote-text p,
    .editorx_body .warning p,
    .editorx_body ol li,
    .editorx_body p,
    .editorx_body td,
    .editorx_body th,
    .editorx_body ul li,
    .f-w-400,
    .pagination .pagination-item,
    .policy_list_2 li::marker,
    .regular-l,
    .regular-l2,
    .regular-m,
    .regular-pack,
    .regular-s,
    .regular-xl,
    .regular-xs,
    .regular-xxl,
    .regular-xxxl,
    .regular-xxxxl,
    .table_container thead tr>th,
    .vue-tel-input {
        font-weight: 400 !important
    }

    .dropdown,
    .dropdown .drop_down_search,
    .f-w-500,
    .medium-l,
    .medium-m,
    .medium-s,
    .medium-xl,
    .medium-xs,
    .medium-xxl,
    .medium-xxxl,
    .medium-xxxxl,
    .opened_nav_bar .search_field,
    .single-blog .single-blog-menu,
    .textarea.chat,
    .tooltip-container .tooltip-custom {
        font-weight: 500 !important
    }

    .available_for_order,
    .f-w-600,
    .search_bar_container .search_bar_field .search_field,
    .title {
        font-weight: 600 !important
    }

    .bold-l,
    .bold-m,
    .bold-pack,
    .bold-s,
    .bold-xl,
    .bold-xs,
    .bold-xxl,
    .bold-xxxl,
    .bold-xxxxl,
    .custom-faqs .accordion .faqs-question,
    .f-w-700 {
        font-weight: 700 !important
    }

    .f-w-800 {
        font-weight: 800 !important
    }

    .benefits {
        font-size: calc(50.4px + 3.9375vw);
        line-height: calc(58px + 3.75vw)
    }

    .editorx_body h1,
    .title-h1 {
        font-size: calc(20.8px + 2.25vw);
        line-height: calc(31.2px + 2.4375vw)
    }

    .editorx_body h2,
    .title-h2 {
        font-size: calc(26.4px + 1.125vw);
        line-height: calc(24.2px + 1.8125vw)
    }

    .editorx_body h3,
    .title-h3 {
        font-size: calc(21.6px + .75vw);
        line-height: calc(29.6px + .75vw)
    }

    .editorx_body h4,
    .title-h4 {
        font-size: calc(25.2px + .25vw);
        line-height: calc(28.8px + .375vw)
    }

    .editorx_body h5,
    .title-h5 {
        font-size: 24px;
        line-height: 29px
    }

    .editorx_body h6,
    .title-h6 {
        font-size: calc(15.6px + .125vw);
        line-height: calc(13.6px + .4375vw)
    }

    .bold-xxxxl {
        font-size: calc(19.2px + .25vw);
        line-height: calc(24px + .3125vw)
    }

    .bold-xxxl {
        font-size: calc(17.6px + .125vw);
        line-height: calc(23.4px + .1875vw)
    }

    .bold-xxl {
        font-size: calc(15.6px + .125vw);
        line-height: calc(19.2px + .25vw)
    }

    .bold-xl {
        font-size: calc(13.6px + .125vw);
        line-height: calc(16.2px + .25vw)
    }

    .bold-l {
        font-size: calc(11.6px + .125vw);
        line-height: calc(15.6px + .125vw)
    }

    .bold-m {
        font-size: calc(10.6px + .125vw);
        line-height: calc(14.6px + .125vw)
    }

    .bold-s {
        font-size: 12px;
        line-height: 16px
    }

    .bold-xs {
        font-size: 10px;
        line-height: calc(11.8px + .0625vw)
    }

    .bold-pack {
        font-size: calc(16.8px + .375vw);
        line-height: calc(24px + .3125vw)
    }

    .blog-head,
    .blogs-head,
    .caps {
        text-transform: uppercase
    }

    .medium-xxxxl {
        font-size: calc(16.8px + .375vw);
        line-height: calc(24.8px + .375vw)
    }

    .medium-xxxl {
        font-size: calc(15.2px + .25vw);
        line-height: calc(19.8px + .375vw)
    }

    .medium-xxl {
        font-size: calc(14.4px + .1875vw);
        line-height: calc(19.2px + .25vw)
    }

    .medium-xl,
    .opened_nav_bar .search_field {
        font-size: 16px;
        line-height: 21px
    }

    .dropdown,
    .dropdown .drop_down_search,
    .medium-l,
    .single-blog .single-blog-menu,
    .textarea.chat {
        font-size: 14px;
        line-height: 18px
    }

    .medium-m,
    .tooltip-container .tooltip-custom {
        font-size: calc(9.4px + .1875vw);
        line-height: calc(8.6px + .4375vw)
    }

    .medium-s {
        font-size: calc(9.6px + .125vw);
        line-height: calc(11.2px + .25vw)
    }

    .medium-xs {
        font-size: 10px;
        line-height: 13px
    }

    .regular-xxxxl {
        font-size: calc(20.4px + .1875vw);
        line-height: calc(28.4px + .1875vw)
    }

    .custom-faqs .accordion .faqs-question,
    .regular-xxxl {
        font-size: calc(16.4px + .1875vw);
        line-height: calc(23.4px + .1875vw)
    }

    .regular-xxl {
        font-size: calc(14.4px + .1875vw);
        line-height: calc(20.4px + .1875vw)
    }

    .codex-editor,
    .custom-faqs .accordion .faqs-answer,
    .editorx_body p,
    .pagination .pagination-item,
    .policy_list_2 li::marker,
    .regular-xl {
        font-size: 16px;
        line-height: 21px
    }

    .dropdown.variant-primary .item,
    .dropdown.variant-primary .placeholder,
    .dropdown.variant-primary .selected_item,
    .dropdown.variant-transparent .item,
    .dropdown.variant-transparent .placeholder,
    .dropdown.variant-transparent .selected_item,
    .regular-l2 {
        font-size: 14px;
        line-height: 18px
    }

    .regular-l,
    .vue-tel-input {
        font-size: calc(11.6px + .125vw);
        line-height: calc(13.2px + .25vw)
    }

    .editorx_body ol li,
    .editorx_body td,
    .editorx_body th,
    .editorx_body ul li,
    .regular-m {
        font-size: 13px;
        line-height: 17px
    }

    .available_for_order,
    .regular-s,
    .table_container thead tr>th {
        font-size: 12px;
        line-height: 16px
    }

    .regular-xs {
        font-size: calc(8.8px + .0625vw);
        line-height: calc(8.2px + .25vw)
    }

    .regular-pack {
        font-size: 13px;
        line-height: 17px
    }

    @media screen and (max-width:600px) {
        .regular-pack {
            font-size: 16px;
            line-height: 22px
        }
    }

    .editorx_body .code,
    .editorx_body .quote-text,
    .editorx_body .warning {
        margin-bottom: 10px;
        margin-top: 10px
    }

    .editorx_body .code p,
    .editorx_body .quote-text p,
    .editorx_body .warning p {
        font-size: calc(13.2px + .25vw);
        line-height: calc(13.2px + .25vw)
    }

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

    * ::-webkit-scrollbar {
        width: 4px;
        height:4px;
    }

    * ::-webkit-scrollbar-track {
        border-radius: 10px
    }

    * ::-webkit-scrollbar-thumb {
        background: var(--color_main_1);
        border-radius: 10px;
    }


    * ::-webkit-scrollbar-thumb:hover {
        background: white;
    }

    body {
        background-color: var(--bg-main);
        overflow-x: hidden !important;
        overflow-y: auto;
        width: 100%
    }

    @media screen and (max-width:480px) {
        html {
            overflow-x: hidden
        }
    }

    .main_layout_bg {
        height: auto;
        left: 0;
        /* max-height: 550px; */
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        top: 0;
        transition: all .2s ease;
        width: 100%;
        z-index: -1
    }

    .main_layout_bg.in_active {}

    .main_layout_bg_home {
        height: 100%;
        max-height: 600px;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        right: 0;
        top: 0;
        transition: opacity .2s ease;
        z-index: -1
    }

    @media screen and (max-width:900px) {
        .main_layout_bg_home {
            height: auto;
            transform: translate(0);
            width: 100%
        }
    }

    @media screen and (max-width:600px) {
        .main_layout_bg_home {
            height: 100vh;
            -o-object-fit: cover;
            object-fit: cover;
            opacity: .5;
            transform: translate(0);
            width: 100vw;
            z-index: -1
        }
    }

    .main_layout {
        align-items: flex-start;
        background-position: 100% 0;
        background-repeat: no-repeat;
        display: flex;
        flex-direction: column;
        height: 100%;
        justify-content: flex-start;
        min-height: 100vh;
        /* padding-top: 80px; */
        transition: background .25s ease-in;
        width: 100vw
    }

    .main_layout .main_layout_page {
        height: 100%;
        /* min-height: 100vh; */
        padding: 1rem 100px;
        width: 100%
    }

    .main_layout .main_layout_page .mobile-topbar {
        min-height: 52px
    }

    @media screen and (min-width:1441px) {
        .main_layout .main_layout_page {
            padding-left: 120px;
            padding-right: 120px
        }
    }



    @media screen and (max-width:850px) {
        .main_layout .main_layout_page {
            padding-left: 50px;
            padding-right: 50px
        }
    }

    @media screen and (max-width:768px) {
        .main_layout .main_layout_page {
            margin-bottom: 60px;
            padding: 1rem
        }

        .main_layout.home_bg {
            background-size: contain
        }
    }

    .games_list_container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        grid-column-gap: 30px;
        grid-row-gap: 20px;
        height: -moz-max-content;
        height: max-content;
        width: 100%
    }

    .games_list_container .game_card_con {
        /* overflow: hidden; */
        padding-top: 13px;
        position: relative;
        width: 100%
    }

    .games_list_container .game_card_con .new_pack_chip {
        top: 3px
    }

    .games_list_container .game_card {
        border-radius: 9px;
        cursor: pointer;
        flex-shrink: 0;
        height: 100%;
        height: -moz-max-content;
        height: max-content;
        min-height: 220px;
        overflow: hidden;
        padding: 24px;
        position: relative;
        transition: all .25s ease-in;
        z-index: 1;
        /* background:#070718b3; */
    }

    .games_list_container.grid_game_list .game_card{
        background:#070718b3;
    }

    .games_list_container .game_card.card_disabled {
        filter: saturate(0)
    }





    .games_list_container .game_card.valorant-boost:before {
        background-color: var(--color_main_1)
    }

    .games_list_container .game_card.apex-legends-boost:before {
        background-color: var(--apex-card)
    }

    .games_list_container .game_card.rainbow-six-siege-boost:before {
        background-color: var(--r6s-card)
    }

    .games_list_container .game_card.rocket-league-boost:before {
        background: var(--rocket-league-card)
    }

    .games_list_container .game_card.teamfight-tactics-boost:before {
        background-color: var(--teamfight-card)
    }

    .games_list_container .game_card.counter-strike-2-boost:before {
        background-color: var(--cs2-card)
    }

    .games_list_container .game_card.dota-2-boost:before {
        background-color: var(--dota2-card)
    }

    .games_list_container .game_card.overwatch-2-boost:before {
        background-color: var(--overwatch-2-card)
    }

    .games_list_container .game_card.the-finals-boost:before {
        background-color: var(--thefinals)
    }

    .games_list_container .game_card.world-of-warcraft-dragonflight-boost:before {
        background-color: var(--wow-card)
    }

    .games_list_container .game_card.destiny-2-boost:before {
        background-color: var(--destiny2-card)
    }

    .games_list_container .game_card.fortnite-boost:before {
        background-color: var(--fortnite-card)
    }

    .games_list_container .game_card.call-of-duty-warzone-boost:before {
        background-color: var(--cod-card)
    }

    .games_list_container .game_card.world-of-warcraft-boost:before {
        background-color: var(--wow-card)
    }

    .games_list_container .game_card .game_image {
        bottom: 0;
        height: auto;
        max-width: 220px;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        right: 0;
        width: 60%
    }

    .games_list_container .game_card .stroked_text {
        -webkit-text-stroke: 1px var(--text-white);
        color: transparent;
        opacity: .24;
        white-space: nowrap
    }

    .games_list_container .game_card .logo_img {
        height: 36px;
        max-height: 36px;
        -o-object-fit: contain;
        object-fit: contain;
        width: auto
    }

    .games_list_container .game_card .arrow_right {
        align-items: center;
        background-color: #171b1c;
        border-radius: 24px;
        display: flex;
        gap: 10px;
        height: 36px;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 10px;
        transition: all .2s ease;
        width: 36px
    }

    .games_list_container .game_card .arrow_right.full_width {
        width: -moz-max-content !important;
        width: max-content !important
    }

    .games_list_container .game_card .arrow_right.full_width .text {
        color: var(--text-light) !important;
        display: block;
        opacity: 1;
        width: 100%
    }

    .games_list_container .game_card .arrow_right .text {
        display: none;
        opacity: 0
    }

    .games_list_container .game_card:hover:before {
        opacity: 1
    }

    .games_list_container .game_card:hover .arrow_right {
        background-color: hsla(0, 0%, 100%, .15)
    }

    .games_list_container .game_card:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    @media screen and (max-width:1440px) {
        .games_list_container {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media screen and (max-width:900px) {
        .games_list_container {
            grid-template-columns: repeat(2, 1fr)
        }

        .games_list_container .game_card:hover:before {
            opacity: .25 !important
        }
    }

    @media screen and (max-width:600px) {
        .games_list_container {
            grid-template-columns: repeat(2, 1fr);
            grid-column-gap: 9px;
            grid-row-gap: 9px
        }

        .games_list_container .game_card {
            min-height: 170px
        }

        .games_list_container .game_card .stroked_text {
            display: none
        }

        .games_list_container .game_card .arrow_right {
            background-color: transparent !important;
            opacity: .5;
            padding: 0
        }

        .games_list_container .game_card .logo_img {
            height: 38px
        }

        .games_list_container .game_card .game_image {
            max-width: 149px;
            opacity: .6;
            width: 70%;
            z-index: -1
        }

        .games_list_container .game_card:hover:before {
            opacity: .25 !important
        }

        .games_list_container .game_card:hover .arrow_right {
            width: 36px
        }

        .games_list_container .game_card:hover .arrow_right .text {
            display: none
        }
    }

    .contact_banner {
        border-radius: 12px;
        height: 100%;
        max-height: 350px;
        min-height: 43.75vh;
        overflow: hidden;
        padding: 24px 60px;
        position: relative
    }

    .contact_banner>* {
        z-index: 1
    }

    .contact_banner:before {
        background-image: url(/images/contact_us/contact_banner_bg_2.webp);
        background-position: 0 0;
        background-size: contain;
        left: 0;
        width: 30%
    }

    .contact_banner:after,
    .contact_banner:before {
        background-repeat: no-repeat;
        content: "";
        height: 100%;
        position: absolute;
        top: 0
    }

    .contact_banner:after {
        background-image: url(/images/contact_us/contact_banner_bg.webp);
        background-position: 50%;
        background-size: cover;
        right: 0;
        width: 80%
    }

    @media screen and (max-width:1200px) {
        .contact_banner:after {
            opacity: .3
        }
    }

    .knowledge_banner {
        border-radius: 12px;
        height: 100%;
        max-height: 350px;
        min-height: 43.75vh;
        overflow: hidden;
        padding: 24px 60px;
        position: relative
    }

    .knowledge_banner>* {
        z-index: 1
    }

    .knowledge_banner:before {
        background-image: url(/images/knowledge_base/knowledge_base_banner_bg_2.webp);
        background-position: 0 0;
        background-size: contain;
        left: 0;
        width: 30%
    }

    .knowledge_banner:after,
    .knowledge_banner:before {
        background-repeat: no-repeat;
        content: "";
        height: 100%;
        position: absolute;
        top: 0
    }

    .knowledge_banner:after {
        background-image: url(/images/knowledge_base/knowledge_base_banner_bg.webp);
        background-position: 50%;
        background-size: cover;
        right: 0;
        width: 80%
    }

    @media screen and (max-width:1200px) {
        .knowledge_banner:after {
            opacity: .3
        }
    }

    .contact_card {
        padding: 40px 16px;
        position: relative
    }

    .contact_card .top-left {
        left: 0;
        position: absolute;
        top: 0
    }

    .contact_card .top-right {
        position: absolute;
        right: 0;
        top: 0;
        transform: rotate(90deg)
    }

    .contact_card .bottom-right {
        bottom: 0;
        position: absolute;
        right: 0;
        transform: rotate(180deg)
    }

    .contact_card .bottom-left {
        bottom: 0;
        left: 0;
        position: absolute;
        transform: rotate(270deg)
    }

    .not_found_page {
        background-image: url(/images/not_found_bg.webp);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        min-height: 90vh;
        padding-top: 56px;
        width: 100%
    }

    .not_found_page .four_zero_four {
        height: auto;
        max-width: 422px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    @media screen and (max-width:600px) {
        .not_found_page {
            background-size: cover
        }
    }

    .coming_soon {
        min-height: 90vh;
        padding-top: 56px;
        width: 100%
    }

    .coming_soon .four_zero_four {
        height: auto;
        max-width: 422px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .footer_container {
        border-top: 1px solid var(--stroke-dark);
        overflow: hidden;
        padding: 0 100px 0 100px;
        position: relative
    }

    .footer_container .copyright_container {
        border-top: 1px solid var(--stroke-dark);
        padding: 27px 0
    }






    @media screen and (max-width:576px) {
        .footer_container {
            padding: 20px 10px;
        }
    }


    .top_footer {
        align-items: stretch !important;
        border-bottom: 1px solid var(--stroke-dark);
        height: 100%;
        min-height: 330px
    }

    .top_footer .brand_container {
        border-right: 1px solid var(--stroke-dark);
        padding-bottom: 30px;
        padding-right: 10px;
        padding-top: 60px
    }

    .top_footer .brand_container .footer_logo {
        height: auto;
        max-width: 123px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .top_footer .main_container,
    .top_footer .main_container_main {
        border-right: 1px solid var(--stroke-dark);
        height: 100%;
        min-height: 336px;
        padding: 60px 30px 0
    }

    .top_footer .contact_container {
        height: 100%;
        min-height: 270px;
        padding: 60px 30px 0
    }

    .top_footer .payment_method_container_grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 18px;
        grid-row-gap: 18px
    }

    .top_footer .payment_method_container_grid .payment_pill {
        align-items: center;
        display: flex;
        justify-content: center
    }

    .top_footer .payment_method_container_grid .payment_pill .payment_pill_image {
        height: auto;
        max-height: 78px;
        max-width: 221px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    @media screen and (max-width:900px) {
        .top_footer {
            padding-top: 20px
        }

        .top_footer .brand_container {
            border-right: none;
            padding-top: 0
        }

        .top_footer .contact_container,
        .top_footer .main_container {
            border-right: none;
            min-height: 100%;
            padding: 30px 0
        }

        .top_footer .main_container {
            border-bottom: 1px solid var(--stroke-dark)
        }

        .top_footer .main_container_main {
            min-height: 100%;
            padding: 30px 0
        }

        .top_footer .main_container_2 {
            border-bottom: 1px solid var(--stroke-dark);
            border-right: none
        }

        .top_footer .payment_method_container_grid {
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(2, 1fr);
            place-items: center
        }
    }

    .bottom_footer_container {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        grid-template-rows: repeat(auto, 1ft);
        padding: 60px 0;
        width: 100%;
        grid-column-gap: 0;
        grid-row-gap: 30px
    }

    .bottom_footer_container .footer_game {
        -o-border-image: linear-gradient(180deg, rgba(25, 26, 26, 0), #191a1a 30.13%, #191a1a 68.68%, rgba(25, 26, 26, 0));
        border-image: linear-gradient(180deg, rgba(25, 26, 26, 0), #191a1a 30.13%, #191a1a 68.68%, rgba(25, 26, 26, 0));
        border-image-slice: 1;
        border-style: solid;
        border-width: 0 1px 1px;
        height: 100%;
        min-width: 210px;
        padding-left: 30px;
        padding-right: 30px;
        width: 100%
    }

    .bottom_footer_container .footer_game.disabled {
        filter: saturate(0);
        pointer-events: none
    }

    @media screen and (min-width:769px) and (max-width:1200px) {
        .bottom_footer_container {
            grid-template-columns: repeat(3, 1fr)
        }

        .bottom_footer_container .footer_game:first-child,
        .bottom_footer_container .footer_game:nth-child(10),
        .bottom_footer_container .footer_game:nth-child(13),
        .bottom_footer_container .footer_game:nth-child(4),
        .bottom_footer_container .footer_game:nth-child(7) {
            border-width: 0;
            padding-left: 0
        }

        .bottom_footer_container .footer_game,
        .bottom_footer_container .footer_game:nth-child(3),
        .bottom_footer_container .footer_game:nth-child(6) {
            border-width: 0
        }
    }

    @media screen and (min-width:1200px) and (max-width:1700px) {
        .bottom_footer_container {
            grid-template-columns: repeat(5, 1fr)
        }

        .bottom_footer_container .footer_game:first-child,
        .bottom_footer_container .footer_game:nth-child(11),
        .bottom_footer_container .footer_game:nth-child(6) {
            border-width: 0;
            padding-left: 0
        }

        .bottom_footer_container .footer_game:nth-child(10),
        .bottom_footer_container .footer_game:nth-child(15),
        .bottom_footer_container .footer_game:nth-child(5) {
            border-width: 0
        }
    }

    @media screen and (min-width:1710px) {
        .bottom_footer_container {
            grid-template-columns: repeat(7, 1fr)
        }

        .bottom_footer_container .footer_game:first-child,
        .bottom_footer_container .footer_game:nth-child(15),
        .bottom_footer_container .footer_game:nth-child(8) {
            border-width: 0;
            padding-left: 0
        }

        .bottom_footer_container .footer_game:nth-child(14),
        .bottom_footer_container .footer_game:nth-child(7) {
            border-width: 0
        }
    }

    @media screen and (max-width:768px) {
        .bottom_footer_container {
            grid-template-columns: repeat(3, 1fr)
        }

        .bottom_footer_container .footer_game {
            -o-border-image: linear-gradient(180deg, rgba(25, 26, 26, 0), #191a1a 30.13%, #191a1a 68.68%, rgba(25, 26, 26, 0));
            border-image: linear-gradient(180deg, rgba(25, 26, 26, 0), #191a1a 30.13%, #191a1a 68.68%, rgba(25, 26, 26, 0));
            border-width: 0 1px 1px;
            height: 100%;
            padding-left: 0
        }
    }

    @media screen and (max-width:650px) {
        .bottom_footer_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:350px) {
        .bottom_footer_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .e_learning_cards_container {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: -moz-max-content;
        height: max-content;
        width: 100%;
        grid-column-gap: 20px;
        grid-row-gap: 20px
    }

    @media screen and (max-width:1440px) {
        .e_learning_cards_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:1000px) {
        .e_learning_cards_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    @media screen and (max-width:768px) {
        .e_learning_cards_container {
            min-height: 600px
        }
    }

    .e_learning_card {
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        cursor: pointer;
        max-height: 330px;
        min-height: 330px;
        overflow: hidden;
        padding: 24px;
        position: relative;
        transition: all .2s ease-in-out;
        width: 100%
    }

    .e_learning_card.selected,
    .e_learning_card:hover {
        border: 1px solid var(--color_main_1)
    }

    .e_learning_card>* {
        z-index: 0
    }

    .e_learning_card .pack_image {
        height: auto;
        left: 0;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1
    }

    .booster_profile_game_card {
        border-radius: 12px
    }

    .booster_profile_game_card .top_area {
        background-color: var(--color_main_2);
        border-radius: 12px 12px 0 0;
        padding: 9px 12px
    }

    .booster_profile_game_card .primary_game {
        border: 1px solid var(--white-opace);
        border-radius: 19px;
        padding: 5px 10px
    }

    .booster_profile_game_card .hero_image {
        background-color: var(--bg-extra-light);
        border-radius: 6px
    }

    .booster_profile_game_card .bottom_area {
        background-color: var(--bg-extra-dark);
        border-radius: 0 0 12px 12px;
        padding: 15px
    }

    .booster_profile_game_card .bottom_area .left_area {
        border-right: 1px solid var(--stroke-dark)
    }

    .booster_profile_game_card .bottom_area .left_area .rank_image {
        height: auto;
        max-height: 80px;
        max-width: 80px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .booster_profile_game_card .game_detail_info {
        border-bottom: 1px solid var(--stroke-dark);
        padding: 9px 0
    }

    .booster_profile_game_card .region_chip {
        background-color: var(--bg-medium);
        border-radius: 5px;
        padding: 5px 8px
    }

    @media screen and (max-width:768px) {
        .booster_profile_game_card .bottom_area .left_area {
            border-bottom: 1px solid var(--stroke-dark);
            border-right: 0 !important;
            justify-content: flex-start;
            padding-bottom: 30px
        }
    }

    .reviews_banner .review_image {
        height: auto;
        max-width: 180px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .reviews_banner .left_area {
        position: relative
    }

    .reviews_banner .left_area .reviews_banner_image {
        bottom: 0;
        height: auto;
        max-width: 640px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .reviews_banner .left_area .reviews_count {
        position: relative
    }

    .reviews_banner .left_area .reviews_count .reviews_count_1 {
        left: 0;
        position: absolute;
        top: 0;
        width: 30%
    }

    .reviews_banner .left_area .reviews_count .reviews_count_2 {
        position: absolute;
        right: 0;
        top: 0;
        width: 30%
    }

    .reviews_banner .right_area {
        max-height: -moz-max-content;
        max-height: max-content;
        min-height: 60vh;
        overflow: hidden;
        position: relative
    }

    .reviews_banner .right_area:after {
        background: linear-gradient(180deg, var(--color_main_base), rgba(5, 6, 7, 0));
        content: "";
        height: 100px;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .reviews_banner .right_area:before {
        background: linear-gradient(0, var(--color_main_base), rgba(5, 6, 7, 0));
        bottom: 0;
        content: "";
        height: 100px;
        left: 0;
        position: absolute;
        width: 100%;
        z-index: 2
    }

    @media screen and (max-width:768px) {

        .reviews_banner .right_area:after,
        .reviews_banner .right_area:before {
            display: none
        }
    }

    @media screen and (max-width:600px) {
        .reviews_banner .left_area .reviews_banner_image {
            max-width: 100px;
            visibility: hidden
        }

        .reviews_banner .left_area .reviews_count .reviews_count_1 {
            left: 10%
        }

        .reviews_banner .left_area .reviews_count .reviews_count_2 {
            right: 10%
        }
    }


    .review_card {
        /* background-color: var(--color_main_2); */
        border-radius: 12px;
        cursor: pointer;
        gap: 42px;
        padding: 24px;
        position: relative;
        transition: all .2s ease
    }

    .review_card>* {
        z-index: 1
    }

    .review_card .rating_chip {
        align-items: center;
        border-radius: 6px;
        display: flex;
        gap: 3px;
        justify-content: center;
        padding: 1px 6px
    }

    .review_card .rating_chip svg {
        height: 18px;
        width: 18px
    }

    .review_card .rating_chip.trustpilot {
        background: var(--color_main_1);
        color: #c9e1fd
    }

    .review_card .rating_chip.reviews_io {
        background: rgba(255, 158, 72, .15);
        color: var(--light-orange)
    }

    .review_card:after {
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 84px;
        position: absolute;
        right: 0;
        top: 10%;
        width: 84px
    }

    .review_card .arrow_top_right path {
        transition: all .2s ease
    }


    .review_card:hover {
        background-color: var(--color_main_2);
    }

    .review_card:hover .arrow_top_right path {
        fill: #ffffff
    }

    @media screen and (max-width:768px) {
        .review_card {
            height: -moz-max-content;
            height: max-content;
            min-height: 182px;
            min-width: 315px
        }
    }



    .banner_loop {
        animation: bottomToTop 250s linear infinite;
        animation-fill-mode: backwards
    }



    .banner_loop:hover {
        animation-play-state: paused
    }

    .banner_loop_2 {
        animation: topToBottom 250s linear infinite;
        animation-direction: reverse;
        animation-fill-mode: backwards
    }



    .banner_loop_2:hover {
        animation-play-state: paused
    }

    .no_chat_found {
        background-color: var(--bg-extra-light);
        border-radius: 9px;
        min-height: 42px;
        padding: 6px 9px 6px 6px;
        width: 100%
    }



    .message_count,
    .no_chat_found {
        align-items: center;
        display: flex;
        justify-content: center
    }

    .message_count {
        background-color: var(--color_main_1);
        border-radius: 50%;
        height: 20px;
        width: 20px
    }

    .message_count_container {
        position: relative
    }

    .message_count_container .message_count {
        position: absolute;
        right: -5px;
        top: -5px
    }

    .message_count_container.convert img {
        filter: brightness(0) invert(1) sepia(0) saturate(0) hue-rotate(0deg) replace(#9a9a9a, #cbcbcb)
    }

    .notification_game {
        position: relative
    }

    .notification_game .notification_icon {
        bottom: -5px;
        position: absolute;
        right: -5px
    }

    .custom-faqs {
        border: 1px solid var(--stroke-medium);
        margin-top: 18px
    }

    .custom-faqs.default {
        width: calc(100% + 4rem)
    }

    .custom-faqs.pack {
        width: 100%
    }

    @media screen and (max-width:786px) {
        .custom-faqs.twocol {
            max-width: 100%
        }
    }

    .custom-faqs .accordion {
        padding: 30px 36px;
        transition: all .8s ease
    }

    .custom-faqs .accordion:hover {
        background-color: var(--color_main_2)
    }

    .custom-faqs .accordion .arrow {
        transform: rotate(0deg);
        transition: all .4s ease
    }

    .custom-faqs .accordion .faqs-question {
        color: var(--text-white);
        margin: auto;
        position: relative
    }

    .custom-faqs .accordion .faqs-answer {
        color: var(--text-light);
        padding-bottom: 0;
        padding-top: 0;
        transition: all .8s ease
    }

    .custom-faqs .accordion.faqs-single-active {
        background-color: var(--color_main_2);
        transition: all .8s ease
    }

    .custom-faqs .accordion.faqs-single-active .arrow {
        transform: rotate(180deg);
        transition: all .4s ease
    }

    .custom-faqs .accordion.faqs-single-active .faqs-answer {
        padding-top: 30px
    }

    .custom-faqs .accordion.faqs-single-active.light {
        background: var(--white)
    }

    .custom-faqs .accordion.faqs-single-active.light .faqs-question {
        color: var(--white)
    }

    .custom-faqs .accordion.faqs-single-active.light .faqs-answer {
        color: var(-white)
    }

    .custom-faqs .accordion.faqs-single-active.light .faqs-answer a {
        color: var(--white)
    }

    @media screen and (max-width:768px) {
        .custom-faqs .accordion {
            padding: 18px
        }
    }

    .custom-faqs::-webkit-scrollbar {
        display: none
    }

    .boosters_card_grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 16px;
        grid-row-gap: 16px;
        place-items: center
    }

    @media screen and (max-width:1200px) {
        .boosters_card_grid {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media screen and (max-width:900px) {
        .boosters_card_grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .boosters_card_grid {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .optimal_text_area {
        max-height: 500px;
        overflow-y: auto
    }

    .optimal_text_area .optimal_text_answer a {
        color: var(--color_main_1) !important;
        display: inline !important;
        font-weight: 700;
        width: -moz-max-content;
        width: max-content
    }

    .optimal_text_area .optimal_text_answer ul,
    .optimal_text_area .optimal_text_answer ul li {
        list-style-image: url(/img/games/league-of-legends-boost/star.svg) !important
    }

    #nprogress .bar {
        background: var(--color_main_1) !important;
        z-index: 50
    }

    .blog_title {
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden
    }

    .blog_banner {
        cursor: pointer;
        gap: 36px;
        height: 50vh;
        margin-top: 12px;
        max-height: 412px;
        width: 100%
    }

    .blog_banner .content_area {
        padding: 18px
    }

    .blog_banner .blog_image {
        border-radius: 9px;
        height: auto;
        max-height: 412px;
        max-width: 750px;
        -o-object-fit: contain;
        object-fit: contain;
        padding: 18px;
        width: 100%
    }

    .blog_banner .blog_divider {
        height: 2px;
        margin-top: 6px;
        max-width: 100px;
        width: 100%
    }

    .blog_banner .blog_divider.game_id_1 {
        background-color: var(--color_main_1)
    }

    .blog_banner .blog_divider.game_id_2 {
        background-color: var(--val)
    }

    .blog_banner .blog_divider.game_id_3 {
        background-color: var(--r6s)
    }

    .blog_banner .blog_divider.game_id_4 {
        background-color: var(--rocket-league)
    }

    .blog_banner .blog_divider.game_id_5 {
        background-color: var(--dota2)
    }

    .blog_banner .blog_divider.game_id_6 {
        background-color: var(--overwatch-2)
    }

    .blog_banner .blog_divider.game_id_7 {
        background-color: var(--cs2)
    }

    .blog_banner .blog_divider.game_id_8 {
        background-color: var(--apex)
    }

    .blog_banner .blog_divider.game_id_9 {
        background-color: var(--teamfight-card)
    }

    .blog_banner .blog_divider.game_id_10 {
        background-color: var(--fortnite-card)
    }

    .blog_banner .blog_divider.game_id_11 {
        background-color: var(--cod-card)
    }

    .blog_banner .blog_divider.game_id_12,
    .blog_banner .blog_divider.game_id_13,
    .blog_banner .blog_divider.game_id_14,
    .blog_banner .blog_divider.game_id_15 {
        background-color: var(--wow-card)
    }

    .blog_banner .description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis
    }

    .blog_banner .arrow_right {
        align-items: center;
        background-color: #171b1c;
        border-radius: 24px;
        display: flex;
        gap: 10px;
        height: 36px;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 10px;
        transition: all .2s ease;
        width: 36px
    }

    .blog_banner .arrow_right.full_width {
        width: -moz-max-content !important;
        width: max-content !important
    }

    .blog_banner .arrow_right.full_width .text {
        color: var(--text-light) !important;
        display: block;
        opacity: 1;
        width: 100%
    }

    .blog_banner .arrow_right .text {
        display: none;
        opacity: 0;
        width: 0
    }

    .blog_banner:hover .arrow_right {
        background-color: hsla(0, 0%, 100%, .15);
        width: 75px
    }

    .blog_banner:hover .arrow_right .text {
        display: block;
        opacity: 1;
        width: 100%
    }

    @media screen and (max-width:768px) {
        .blog_banner {
            background: var(--color_main_2, #0e1012);
            border-radius: 9px;
            height: -moz-max-content;
            height: max-content;
            max-height: -moz-max-content;
            max-height: max-content
        }

        .blog_banner .blog_image_container {
            padding: 0 18px 18px
        }
    }

    .blogs_container {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 36px;
        place-items: center;
        grid-row-gap: 36px;
        grid-auto-rows: auto
    }

    @media screen and (max-width:1440px) {
        .blogs_container {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media screen and (max-width:900px) {
        .blogs_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .blogs_container {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .blog_card {
        border-radius: 9px;
        height: 380px;
        max-height: 406px;
        max-width: 357px;
        padding: 18px;
        transition: all .2s ease;
        /* width: 100% */
    }

    .blog_card .blog_image {
        border-radius: 6px;
        height: 180px;
        max-height: 180px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .blog_card .description {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis
    }

    .blog_card .arrow svg path {
        stroke: #9a9a9a !important
    }

    .blog_card .blog_divider {
        height: 2px;
        margin-top: 6px;
        width: 100%
    }

    .blog_card .blog_divider.game_id_1 {
        background-color: var(--color_main_1)
    }

    .blog_card .blog_divider.game_id_2 {
        background-color: var(--val)
    }

    .blog_card .blog_divider.game_id_3 {
        background-color: var(--r6s)
    }

    .blog_card .blog_divider.game_id_4 {
        background-color: var(--rocket-league)
    }

    .blog_card .blog_divider.game_id_5 {
        background-color: var(--dota2)
    }

    .blog_card .blog_divider.game_id_6 {
        background-color: var(--overwatch-2)
    }

    .blog_card .blog_divider.game_id_7 {
        background-color: var(--cs2)
    }

    .blog_card .blog_divider.game_id_8 {
        background-color: var(--apex)
    }

    .blog_card .blog_divider.game_id_9 {
        background-color: var(--teamfight-card)
    }

    .blog_card .blog_divider.game_id_10 {
        background-color: var(--fortnite-card)
    }

    .blog_card .blog_divider.game_id_11 {
        background-color: var(--cod-card)
    }

    .blog_card .blog_divider.game_id_12,
    .blog_card .blog_divider.game_id_13,
    .blog_card .blog_divider.game_id_14,
    .blog_card .blog_divider.game_id_15 {
        background-color: var(--wow-card)
    }

    .blog_card:hover {
        background-color: var(--color_main_2)
    }

    .blog_card:hover .arrow svg path {
        stroke: #fff !important
    }

    @media screen and (max-width:768px) {
        .blog_card {
            background: var(--color_main_2, #0e1012);
            border-radius: 9px
        }
    }

    .why_us_banner {
        gap: 70px;
        margin-top: 100px;
        max-height: 560px;
        min-height: 70vh
    }

    .why_us_banner .left_area {
        min-height: 70vh;
        overflow: hidden;
        position: relative
    }

    .why_us_banner .left_area .why_us_image {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .why_us_banner .left_area:before {
        transform: translate(-50%, -50%);
        z-index: -1;
        z-index: 1
    }

    .why_us_banner .left_area:after,
    .why_us_banner .left_area:before {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        left: 50%;
        position: absolute;
        top: 50%;
        width: 100%
    }

    .why_us_banner .left_area:after {
        background-image: url(/images/why_us/why_us_bg_sphere.webp);
        z-index: -1
    }

    .why_us_banner .left_area.first:after,
    .why_us_banner .left_area:after {
        transform: translate(-50%, -50%) rotate(-90deg)
    }

    .why_us_banner .left_area.first:before {
        background-image: url(/images/why_us/first.webp)
    }

    .why_us_banner .left_area.second:after {
        transform: translate(-50%, -50%) rotate(0deg)
    }

    .why_us_banner .left_area.second:before {
        background-image: url(/images/why_us/second.webp)
    }

    .why_us_banner .left_area.third:after {
        transform: translate(-50%, -50%) rotate(90deg)
    }

    .why_us_banner .left_area.third:before {
        background-image: url(/images/why_us/third.webp)
    }

    .why_us_banner .left_area.fourth:after {
        transform: translate(-50%, -50%) rotate(180deg)
    }

    .why_us_banner .left_area.fourth:before {
        background-image: url(/images/why_us/fourth.webp)
    }

    .why_us_banner .right_area .reason_title {
        width: 20ch
    }

    .why_us_banner .right_area .reason_title span {
        color: var(--light-orange)
    }

    .why_us_banner .right_area .tabs_area {
        border-bottom: 1px solid var(--stroke-medium);
        margin: 30px 0;
        overflow: hidden;
        padding-bottom: 24px;
        position: relative
    }

    .why_us_banner .right_area .tabs_area .reason_tab.active {
        color: var(--text-white) !important
    }

    .why_us_banner .right_area .tabs_area .progress {
        animation: none;
        background-color: var(--color_main_1);
        bottom: 0;
        content: "";
        height: 1px;
        position: absolute;
        width: 0
    }

    @media screen and (max-width:900px) {
        .why_us_banner {
            max-height: -moz-max-content;
            max-height: max-content;
            min-height: -moz-max-content;
            min-height: max-content
        }

        .why_us_banner .left_area {
            order: 2
        }

        .why_us_banner .right_area {
            order: 1
        }

        .why_us_banner .tabs_area {
            margin: 0
        }
    }

    @media screen and (max-width:480px) {
        .why_us_banner {
            gap: 20px
        }

        .why_us_banner .left_area {
            order: 2
        }

        .why_us_banner .right_area {
            order: 1
        }
    }

    .mobile_chats {
        background-color: var(--bg-main);
        height: calc(100vh - 50px);
        left: 0;
        padding: 20px 16px;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 30
    }

    .mobile_chats .chats_area {
        background-color: var(--bg-extra-dark);
        border-radius: 9px;
        gap: 30px;
        max-height: 95%;
        min-height: 95%;
        overflow-x: auto;
        padding: 10px
    }

    .mobile_chats .chats_area .chat_message {
        height: -moz-max-content;
        height: max-content
    }

    @media screen and (min-width:769px) {
        .mobile_chats {
            display: none
        }
    }

    input[type=color],
    input[type=date],
    input[type=datetime-local],
    input[type=datetime],
    input[type=email],
    input[type=month],
    input[type=number],
    input[type=password],
    input[type=search],
    input[type=tel],
    input[type=text],
    input[type=time],
    input[type=url],
    input[type=week],
    select,
    textarea {
        font-size: 16px !important
    }

    .game_banner .description {
        max-width: 60%
    }

    @media screen and (max-width:900px) {
        .game_banner .description {
            max-width: 100%
        }
    }

    .swiper {
        width: 100% !important
    }

    .pack_selector_dropdown {
        position: relative
    }

    .pack_selector_dropdown button img {
        height: 20px;
        transform: rotate(90deg);
        transition: all .2s ease-in-out;
        width: 20px
    }

    .pack_selector_dropdown button.opened img {
        transform: rotate(-90deg)
    }

    .pack_selector_dropdown .packs_list {
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        height: -moz-max-content;
        height: max-content;
        left: 0;
        max-height: 300px;
        overflow-y: auto;
        padding: 10px 18px;
        position: absolute;
        top: 120%;
        width: 100%;
        z-index: 19
    }

    .pack_selector_dropdown .packs_list .routes {
        width: 100%
    }

    .seller_avatar_container {
        position: relative
    }

    .seller_avatar_container .online-indicator {
        bottom: 3px;
        position: absolute;
        right: 0
    }

    .seller_avatar_container .online-indicator-online {
        animation: pulse-animation-greens 1s linear infinite;
        background-color: var(--green);
        border: 2px solid var(--bg-main);
        border-radius: 50%;
        bottom: 6px;
        height: 8px;
        position: absolute;
        right: 0;
        right: 6px;
        width: 8px
    }

    .booster_dashboard_banner {
        background-color: var(--bg-extra-dark);
        border-radius: 12px;
        padding: 30px;
        position: relative
    }

    .booster_dashboard_banner .booster_avatar_container {
        position: relative
    }

    .booster_dashboard_banner .booster_avatar_container .booster_avatar {
        border-radius: 50%;
        height: auto;
        max-width: 100px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .booster_dashboard_banner .booster_avatar_container .online-indicator {
        bottom: 3px;
        position: absolute;
        right: 0
    }

    .booster_dashboard_banner .booster_avatar_container .online-indicator-online {
        animation: pulse-animation-greens 1s linear infinite;
        background-color: var(--green);
        border: 2px solid var(--bg-main);
        border-radius: 50%;
        bottom: 6px;
        height: 12px;
        position: absolute;
        right: 0;
        right: 6px;
        width: 12px
    }

    .booster_dashboard_banner>* {
        z-index: 1
    }

    .booster_dashboard_banner:after {
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 12px;
        content: "";
        height: 40%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .booster_dashboard_banner.top:after {
        background-image: url(/images/top_booster_bg.webp)
    }

    .booster_dashboard_banner.expert:after {
        background-image: url(/images/export_booster_bg.webp)
    }

    .booster_rating {
        border: 1px solid var(--white-opace);
        border-radius: 16px;
        display: flex;
        gap: 10px;
        padding: 5px 12px;
        z-index: 1
    }

    .booster_rating svg path {
        fill: var(--color_main_1)
    }

    .quote {
        border: 1px solid #cbcbcb;
        height: 100%;
        min-height: 57px;
        width: 2px
    }

    .quote-text-text {
        padding-left: 17px;
        padding-right: 30px
    }

    .warning {
        background-color: #38271f;
        padding-left: 30px;
        padding-right: 30px
    }

    .code,
    .warning {
        border-radius: 3px
    }

    .code {
        background-color: #31312e;
        color: #eb5757;
        padding: 5px
    }

    .stripe-preloader-container {
        background-color: #0e100f;
        border-radius: 12px;
        min-height: 284px
    }

    .stripe-preloader-container .stripe-preloader {
        aspect-ratio: 1;
        width: 45px;
        --c: no-repeat linear-gradient(var(--color_main_1) 0 0);
        animation: l1 1s linear infinite;
        background: var(--c) 0 50%, var(--c) 50% 50%, var(--c) 100% 50%;
        background-size: 20% 100%
    }

    .preloader-container_custom {
        background-color: #0e100f;
        border-radius: 12px;
        min-height: 284px
    }

    .preloader-container_custom .preloader_custom {
        aspect-ratio: 1;
        width: 45px;
        --c: no-repeat linear-gradient(var(--color_main_1) 0 0);
        animation: l1 1s linear infinite;
        background: var(--c) 0 50%, var(--c) 50% 50%, var(--c) 100% 50%;
        background-size: 20% 100%
    }

    @keyframes l1 {
        0% {
            background-size: 20% 100%, 20% 100%, 20% 100%
        }

        33% {
            background-size: 20% 10%, 20% 100%, 20% 100%
        }

        50% {
            background-size: 20% 100%, 20% 10%, 20% 100%
        }

        66% {
            background-size: 20% 100%, 20% 100%, 20% 10%
        }

        to {
            background-size: 20% 100%, 20% 100%, 20% 100%
        }
    }

    .magic-page {
        --fontSizeBase: 16px
    }

    .magic-page #Field-numberInput {
        background-color: red;
        font-size: 16px !important
    }

    .magic-page .p-Input-input {
        background: red !important;
        font-size: 16px !important
    }

    #tidio-chat-iframe {
        z-index: 9999999999 !important
    }

    .online_boosters {
        animation: pulse-animation-green 1s linear infinite;
        background-color: var(--color_main_1);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters.apex-legends-boost,
    .online_boosters.dota-2-boost,
    .online_boosters.fortnite-boost,
    .online_boosters.league-of-legends-boost,
    .online_boosters.overwatch-2-boost,
    .online_boosters.rainbow-six-siege-boost,
    .online_boosters.rocket-league-boost,
    .online_boosters.teamfight-tactics-boost,
    .online_boosters.valorant-boost {
        animation: pulse-animation-greens 1s linear infinite;
        background-color: var(--green)
    }

    .online_main_container {
        align-items: center;
        display: flex;
        gap: 10px;
        height: -moz-max-content;
        height: max-content;
        justify-content: flex-start;
        margin-right: 10px;
        width: -moz-max-content;
        width: max-content
    }

    .online_main_container .online_icon {
        animation: online_icon_animation infinite linear .25s ease 0
    }

    .online_main_container .online_icon #path_first {
        animation: path_first_animation 2s ease-in-out infinite;
        opacity: .25
    }

    .online_main_container .online_icon #path_second {
        animation: path_second_animation 2s ease-in-out infinite;
        opacity: .25
    }

    .online_main_container .online_icon #path_last {
        animation: path_last_animation 2s ease-in-out infinite;
        opacity: .25
    }

    @media screen and (max-width:600px) {
        .online_main_container {
            margin-right: 0
        }
    }

    .online_container {
        flex-direction: column;
        gap: 5px;
        justify-content: flex-start
    }

    .online_container,
    .sidebar_tab {
        align-items: center;
        display: flex
    }

    .sidebar_tab {
        cursor: pointer;
        gap: 9px;
        justify-content: center;
        max-height: 30px;
        overflow: hidden;
        padding: 9px 15px 9px 12px;
        width: -moz-max-content;
        width: max-content
    }

    .sidebar_tab .sidebar_icon {
        justify-content: flex-start;
        width: 16px
    }

    .sidebar_tab .sidebar-title {
        color: var(--text-light);
        opacity: 1
    }

    .sidebar_tab:hover {
        background-size: contain
    }

    .routes_absolute {
        height: 100%;
        position: absolute
    }

    .opened_nav_bar,
    .routes_absolute {
        background-color: var(--bg-main);
        width: 100%
    }

    .opened_nav_bar {
        bottom: 52px;
        display: flex;
        flex-direction: column;
        height: calc(100% - 52px);
        justify-content: flex-start;
        left: 0;
        max-height: calc(100% - 52px);
        overflow: auto;
        padding: 12px 18px;
        position: fixed;
        transition: all .5s cubic-bezier(.65, 0, .35, 1);
        transition-delay: .05s;
        z-index: 20
    }

    .opened_nav_bar .field {
        background: var(--BG-Medium, #121517);
        border: 1px solid var(--Stroke-Medium, #27292b);
        border-radius: 6px;
        min-height: 48px;
        padding: 0 12px 0 16px
    }

    .opened_nav_bar .search_field {
        background-color: transparent;
        border: none;
        color: var(--text-white);
        outline: none;
        width: 100%
    }

    .opened_nav_bar .search_field::-moz-placeholder {
        color: var(--text-gray)
    }

    .opened_nav_bar .search_field::placeholder {
        color: var(--text-gray)
    }

    .opened_nav_bar.closed {
        background-color: transparent;
        padding: 12px 18px;
        pointer-events: none;
        visibility: none
    }

    .opened_nav_bar .tab {
        height: 54px;
        width: 54px
    }

    .opened_nav_bar .tab.active svg path {
        fill: var(--color_main_1)
    }

    .opened_nav_bar .routes {
        overflow: auto
    }

    .opened_nav_bar .mobile_route {
        background: var(--BG-Medium, #121517);
        background-image: url(/images/effects/sidebar_hover.png);
        background-position: 0;
        background-repeat: no-repeat;
        background-size: 0;
        border-radius: 7px;
        cursor: pointer;
        height: 48px;
        justify-content: flex-start;
        min-height: 48px;
        overflow: hidden;
        padding: 0 20px;
        position: relative;
        width: 100%
    }

    .opened_nav_bar .mobile_route:before {
        background-image: url(/images/effects/sidebar_active.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 48px;
        left: 1px;
        opacity: 0;
        position: absolute;
        top: 50%;
        transform: translate(-3.5px, -50%);
        transition: opacity .15s ease-in-out;
        width: 10px
    }

    .opened_nav_bar .mobile_route .sidebar_icon {
        justify-content: flex-start;
        padding-left: 20px
    }

    .opened_nav_bar .mobile_route .language_image {
        border-radius: 6px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        transform: rotate(0deg);
        width: 25px
    }

    .opened_nav_bar .mobile_route.active {
        background-size: contain
    }

    .opened_nav_bar .mobile_route.active:before {
        opacity: 1
    }

    .opened_nav_bar .mobile_route.active .sidebar-title {
        color: var(--text-white)
    }

    .opened_nav_bar .mobile_route.active svg path {
        fill: #fff
    }

    .opened_games_list {
        background-color: var(--bg-main);
        bottom: 52px;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 0;
        justify-content: flex-start;
        left: 0;
        max-height: calc(100% - 52px);
        overflow: auto;
        position: fixed;
        transition: all .3s cubic-bezier(.4, .68, .07, .65);
        width: 100%;
        z-index: 20
    }

    .opened_games_list.opened {
        height: calc(100% - 52px);
        padding: 12px 18px
    }

    .opened_games_list.closed {
        background-color: transparent;
        padding: 12px 18px;
        pointer-events: none;
        visibility: none
    }

    .opened_games_list .close_button {
        border: 1px solid var(--stroke-dark);
        border-radius: 36px;
        height: 48px;
        width: 48px
    }

    .opened_games_list .games_list {
        overflow: auto
    }

    .opened_games_list .game_tab {
        height: 40px;
        width: 100%
    }

    .opened_games_list .game_tab.tab_disabled {
        pointer-events: none
    }

    .opened_games_list .game_tab.tab_disabled img {
        filter: saturate(0);
        opacity: .5
    }

    .bottom_tab_bar {
        align-items: center;
        -webkit-backdrop-filter: blur(2px);
        backdrop-filter: blur(2px);
        background: rgba(5, 6, 7, .9);
        bottom: 0;
        display: flex;
        justify-content: space-between;
        padding: 6px 12px 18px;
        position: fixed;
        width: 100%;
        z-index: 31
    }

    .bottom_tab_bar .bottom_tab {
        border-radius: 12px;
        padding: 7px 6px;
        position: relative
    }

    .bottom_tab_bar .bottom_tab .unread_count {
        align-items: center;
        background-color: var(--color_main_1);
        background: var(--orange, #ff9e48);
        border-radius: 5px;
        display: flex;
        height: 16px;
        justify-content: center;
        left: 65%;
        position: absolute;
        top: 0;
        width: 14px
    }

    .bottom_tab_bar .bottom_tab.router-link-active {
        background-color: var(--bg-light)
    }

    .bottom_tab_bar .logged_nav {
        flex-direction: column;
        gap: 2px;
        min-height: 54px;
        min-width: 72px;
        padding: 7px 6px
    }

    @media screen and (min-width:1201px) {
        .bottom_tab_bar {
            display: none
        }
    }

    .sidebar_mask {
        background-color: var(--text-white);
        display: none;
        height: 100%;
        left: 0;
        opacity: .025;
        pointer-events: none;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 10
    }

    .sidebar_mask.active_mask {
        display: block;
        pointer-events: all
    }

    @media screen and (min-width:769px) {
        .sidebar_mask {
            display: none
        }

        .sidebar_mask.active_mask {
            display: none;
            pointer-events: none
        }
    }

    .top_bar_container {
        height: -moz-max-content;
        height: max-content;
        position: relative;
        width: 100%
    }

    @media screen and (max-width:768px) {
        .top_bar_container {
            height: 100%
        }
    }

    .game_selector {
        background-color: var(--navigation-opace);
        border: 1px solid var(--stroke-dark);
        border-radius: 24px;
        cursor: pointer;
        max-width: -moz-max-content;
        max-width: max-content;
        min-width: 144px;
        padding: 5px 15px 5px 5px;
        transition: all .2s ease
    }

    .game_selector .icon {
        border-radius: 50%;
        height: 28px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 28px
    }

    .game_selector.active,
    .game_selector:hover {
        border: 1px solid var(--color_main_1)
    }

    .game_selector.active {
        background-color: var(--color_main_2) !important
    }

    .game_selector .disabled {
        filter: saturate(0);
        opacity: .8;
        pointer-events: none
    }

    .game_selector .disabled_hover {
        cursor: default !important;
        pointer-events: none
    }

    @media screen and (max-width:768px) {
        .game_selector {
            min-width: auto;
            min-width: auto;
            width: auto;
        }

        .game_selector .selected_title {
            display: none;
            overflow: hidden;
            text-overflow: ellipsis;
            width: 10ch
        }
    }

    .game_list_dropdown {
        -webkit-backdrop-filter: blur(7.5px);
        backdrop-filter: blur(7.5px);
        background: rgba(5, 6, 7, .9);
        height: -moz-max-content;
        height: max-content;
        left: 0;
        min-height: 77vh;
        padding: 12px 100px;
        position: fixed;
        top: 62px;
        transition: all .2s ease;
        width: 100%;
        z-index: 9999999999
    }

    .game_list_dropdown>* {
        z-index: 1
    }

    .game_list_dropdown .content_container {
        align-items: flex-start;
        display: flex;
        flex-direction: row;
        gap: 18px;
        justify-content: flex-start;
        min-height: -moz-max-content;
        min-height: max-content;
        width: 100%
    }

    .game_list_dropdown .content_container .games {
        flex: 0.24;
        gap: 0
    }

    .game_list_dropdown .content_container .games .game_nav {
        border-radius: 29px;
        cursor: pointer;
        padding: 3px
    }

    .game_list_dropdown .content_container .games .game_nav .game_icon {
        border-radius: 50%;
        height: 30px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 30px
    }

    .game_list_dropdown .content_container .games .game_nav.active_nav {
        background: hsla(0, 0%, 100%, .09);
        border: 0 solid var(--opacity-8-white, hsla(0, 0%, 100%, .08))
    }

    .game_list_dropdown .content_container .games .game_nav:hover {
        border: 0 solid var(--opacity-8-white, hsla(0, 0%, 100%, .08))
    }

    .game_list_dropdown .content_container hr {
        background: linear-gradient(180deg, rgba(25, 26, 26, 0) 0, #191a1a 30.13%, #191a1a 68.68%, rgba(25, 26, 26, 0));
        border: none;
        height: 684px;
        width: 2px
    }

    .game_list_dropdown .content_container .packs {
        display: grid;
        flex: 0.7;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        grid-column-gap: 12px;
        grid-row-gap: 12px
    }

    .game_list_dropdown .content_container .packs .game_pack_card {
        max-height: 330px;
        width: 100%
    }

    .game_list_dropdown .content_container .packs .hot_category_card {
        border-radius: 12px;
        cursor: pointer;
        height: 100%;
        min-height: 330px;
        overflow: hidden;
        padding: 9px;
        position: relative;
        width: 100%
    }

    .game_list_dropdown .content_container .packs .hot_category_card>* {
        z-index: 1
    }

    .game_list_dropdown .content_container .packs .hot_category_card .hot_category_bg {
        height: auto;
        left: 0;
        min-height: 380px;
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        top: 0;
        width: 100%
    }

    .game_list_dropdown .content_container .packs .hot_category_card .category_info {
        -webkit-backdrop-filter: blur(5.0500001907px);
        backdrop-filter: blur(5.0500001907px);
        background: var(--bg-opace, rgba(5, 6, 7, .5));
        border-radius: 9px;
        padding: 15px 18px 18px
    }

    .game_list_dropdown .content_container .packs .hot_category_card .arrow_right {
        align-items: center;
        background-color: #171b1c;
        border-radius: 24px;
        display: flex;
        gap: 10px;
        height: 36px;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 10px;
        transition: all .2s ease;
        width: 36px;
        z-index: 1
    }

    .game_list_dropdown .content_container .packs .hot_category_card .arrow_right .text {
        display: none;
        opacity: 0
    }

    .game_list_dropdown .content_container .packs .hot_category_card .perk_list {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: flex-start;
        list-style-type: none;
        margin-left: 9px;
        margin-top: 6px;
        padding: 0;
        width: 100%
    }

    .game_list_dropdown .content_container .packs .hot_category_card .perk_list li {
        margin-right: 24px;
        padding-left: 5px
    }

    .game_list_dropdown .content_container .packs .hot_category_card .perk_list.world-of-warcraft-boost {
        list-style-image: url(/img/games/world-of-warcraft-boost/star.svg)
    }

    .game_list_dropdown .content_container .packs .hot_category_card:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    @media screen and (max-width:1440px) {
        .game_list_dropdown {
            padding: 12px 0 12px 80px
        }

        .game_list_dropdown .content_container .packs {
            grid-template-columns: repeat(4, 1fr)
        }

        .game_list_dropdown .content_container .packs .game_pack_card,
        .game_list_dropdown .content_container .packs .hot_category_card {
            min-height: 300px
        }
    }

    @media screen and (max-width:1200px) {
        .game_list_dropdown .content_container hr {
            display: none
        }

        .game_list_dropdown .content_container .games {
            flex: 1
        }

        .game_list_dropdown .content_container .packs {
            display: none
        }
    }

    @media screen and (max-width:900px) {
        .game_list_dropdown {
            min-height: -moz-max-content;
            min-height: max-content
        }
    }

    @media screen and (max-width:850px) {
        .game_list_dropdown {
            padding: 12px 50px
        }
    }

    @media screen and (max-width:768px) {
        .game_list_dropdown {
            padding: 12px 1rem
        }
    }

    .home_banner {
        height: 444px;
        padding: 174px 0 50px 0;
    }

    .home_banner .review_banner {
        border-radius: 6px;
        max-height: 30px;
        max-width: -moz-max-content;
        max-width: max-content;
        padding: 9px 7px
    }

    .home_banner .review_banner.reviewio {
        border: 1px solid #7a4f28
    }

    .home_banner .review_banner.reviewio p {
        color: var(--light-orange)
    }

    .home_banner .review_banner.reviewio img {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 87px
    }

    .home_banner .review_banner.reviewio img.small {
        width: 18px
    }

    .home_banner .review_banner.trustpilot {
        border: 1px solid #275143
    }

    .home_banner .review_banner.trustpilot p {
        color: #c9fdec
    }

    .home_banner .review_banner.trustpilot img {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 70px
    }

    @media screen and (max-width:580px) {
        .home_banner {
            height: 50vh;
            margin-bottom: 15vh;
            padding: 0
        }

        .home_banner .boosting_title {
            align-items: center;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center
        }
    }

    .safe_secure_container.hide {
        height: 0 !important;
        overflow-y: hidden
    }

    .safe_secure_container .review_banner {
        border-radius: 6px;
        justify-content: center !important;
        padding: 9px 7px;
        width: 100%
    }

    .safe_secure_container .review_banner.reviewio {
        border: 1px solid #7a4f28
    }

    .safe_secure_container .review_banner.reviewio p {
        color: var(--light-orange)
    }

    .safe_secure_container .review_banner.reviewio img {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 87px
    }

    .safe_secure_container .review_banner.reviewio img.small {
        width: 18px
    }

    .safe_secure_container .review_banner.trustpilot {
        border: 1px solid #275143
    }

    .safe_secure_container .review_banner.trustpilot p {
        color: #c9fdec
    }

    .safe_secure_container .review_banner.trustpilot img {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 87px
    }

    .safe_secure_container .review_banner.trustpilot img.small {
        width: 18px
    }

    .textarea {
        border: none;
        border: 1px solid var(--stroke-medium);
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        font-size: 16px;
        height: 100%;
        min-height: 134px;
        outline: none;
        padding: 11px 12px;
        resize: none;
        width: 100%
    }

    .textarea.about_box {
        background: var(--bg-medium);
        border-radius: 6px;
        min-height: 100px
    }

    .textarea.chat {
        background: var(--bg-medium);
        border: 1px solid var(--stroke-medium);
        border-radius: 12px;
        height: 43px;
        line-height: 18px;
        min-height: unset;
        padding: 11.5px 11px 11.5px 12px
    }

    .textarea.chat.single_row {
        white-space: nowrap
    }

    .textarea.primary {
        background-color: var(--bg-medium)
    }

    .textarea.message_box {
        background-color: transparent;
        min-height: 61px
    }

    .textarea.bio_box {
        background: var(--bg-medium);
        min-height: 61px
    }

    .textarea.review_box {
        background: var(--bg-medium);
        border-radius: 6px;
        min-height: 100px
    }

    .textarea.transparent {
        background-color: transparent
    }

    .textarea.note {
        background-color: var(--bg-main);
        border-radius: 6px
    }

    .date_picker {
        background-color: var(--bg-medium);
        border: 1px solid var(--stroke-medium);
        cursor: pointer;
        outline: none;
        transition: all .2s ease-in-out;
        width: 100%
    }

    .date_picker.disabled {
        opacity: .5;
        pointer-events: none
    }

    .date_picker.medium {
        height: 42px;
        padding: 12px
    }

    .date_picker svg path {
        fill: var(--text-white)
    }

    .date_picker:hover {
        border: 1px solid var(--stroke-orange)
    }

    .date_picker:focus-within {
        border: 1px solid var(--color_main_1)
    }

    .input_field {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 12px;
        height: 100%;
        justify-items: flex-start;
        width: 100%
    }

    .input_field.disabled {
        opacity: .5;
        pointer-events: none
    }

    .input_field .input_field_container {
        background-color: var(--bg-medium);
        border: 1px solid var(--stroke-medium);
        border-radius: 6px;
        cursor: pointer;
        height: 100%;
        height: 48px;
        padding: 0 15px;
        transition: all .2s ease-in-out;
        width: 100%
    }

    .input_field .input_field_container.medium {
        height: 42px;
        padding: 12px
    }

    .input_field .input_field_container.small {
        height: 36px;
        padding: 0
    }

    .input_field .input_field_container.outlined {
        background-color: transparent;
        border: 1px solid var(--stroke-dark)
    }

    .input_field .input_field_container.transparent {
        background-color: transparent;
        border: none
    }

    .input_field .input_field_container.transparent:hover {
        border: none
    }

    .input_field .input_field_container.transparent:focus-within {
        border: none
    }

    .input_field .input_field_container.errored {
        border: none;
        position: relative
    }

    .input_field .input_field_container.errored:hover {
        border: none
    }

    .input_field .input_field_container.errored:focus-within {
        border: none
    }

    .input_field .input_field_container.errored:after {
        background: linear-gradient(#fc485a 100%, #fff 0);
        border-left: 1.5px solid transparent;
        border-radius: 6px;
        border-right: 1.5px solid transparent;
        bottom: 0;
        content: "";
        left: 0;
        -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
        mask-composite: exclude;
        -webkit-mask-composite: destination-out;
        position: absolute;
        right: 0;
        top: 0;
        z-index: 0
    }

    .input_field .input_field_container:hover {
        border: 1px solid var(--color_main_1)
    }

    .input_field .input_field_container .input_field {
        background-color: transparent;
        border: none;
        font-size: 16px;
        height: 45px;
        outline: none;
        z-index: 2
    }

    .input_field .input_field_container:focus-within {
        border: 1px solid var(--color_main_1)
    }

    .input_field .input_field_container.disabled {
        background-color: transparent;
        opacity: 50%;
        pointer-events: none
    }

    .divider_container .left_div,
    .divider_container .right_div {
        background-color: var(--color_main_1);
        height: 1px;
        width: 45%
    }

    .divider_container.no_show_or .left_div {
        width: 100%
    }

    .divider_container.no_show_or .right_div {
        display: none
    }

    .search_bar_container .search_bar_field {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1);
        border-radius: 20px;
        height: 40px;
        height: 42px;
        left: 12.5%;
        padding: 15px 12px;
        position: fixed;
        top: 15px;
        width: calc(100% - 650px);
        z-index: 16
    }

    .search_bar_container .search_bar_field .field svg {
        transform: rotate(-90deg)
    }

    .search_bar_container .search_bar_field .field svg path {
        fill: var(--text-white)
    }

    .search_bar_container .search_bar_field .search_field {
        background-color: transparent;
        border: none;
        color: var(--text-white);
        outline: none;
        width: 100%
    }

    .search_bar_container .search_bar_field .search_field::-moz-placeholder {
        color: var(--text-gray)
    }

    .search_bar_container .search_bar_field .search_field::placeholder {
        color: var(--text-gray)
    }

    .search_bar_container .search_bar_field:focus-within {
        border: 1px solid var(--color_main_1)
    }

    .search_bar_container .search_results_area {
        height: -moz-max-content;
        height: max-content;
        left: 12.5%;
        max-height: calc(100vh - 84px);
        overflow: auto;
        position: fixed;
        top: 94px;
        width: calc(100% - 20vw);
        z-index: 16
    }

    @media screen and (min-width:1441px) {
        .search_bar_container .search_results_area {
            width: calc(100% - 18vw)
        }
    }

    @media screen and (max-width:768px) {

        .search_bar_container .search_bar_field,
        .search_bar_container .search_results_area {
            left: 10%;
            width: 80%
        }
    }

    .game_boost_result {
        background-color: transparent;
        border-radius: 9px;
        cursor: pointer;
        padding: 9px 18px;
        position: relative;
        transform: all .2s ease-in
    }

    .game_boost_result .booster_games {
        position: relative
    }

    .game_boost_result .booster_games .game_icon {
        border-radius: 3px;
        height: auto;
        max-height: 30px;
        max-width: 30px;
        -o-object-fit: contain;
        object-fit: contain;
        padding: 3px;
        position: absolute;
        width: 30px
    }

    .game_boost_result .booster_games .game_icon:not(:first-child) {
        background-color: var(--color_main_2);
        padding: 3px
    }

    .game_boost_result .booster_rating svg path {
        fill: var(--color_main_1);
        stroke: none !important
    }

    .game_boost_result svg path {
        stroke: var(--white-opace);
        transform: all .2s ease-in
    }

    .game_boost_result:hover {
        background-color: var(--color_main_2)
    }

    .game_boost_result:hover svg path {
        stroke: var(--color_main_1)
    }

    .search_bar_mask {
        background-color: rgba(0, 0, 0, .95);
        height: 100vh;
        left: 0;
        position: fixed;
        top: 0;
        width: 100vw;
        z-index: 15
    }

    .online_boosters_chip {
        background-color: var(--tags-opace);
        border-radius: 40px;
        cursor: default;
        max-width: -moz-max-content;
        max-width: max-content;
        padding: 6px 12px
    }

    .online_boosters_chip span {
        margin-right: 6px
    }

    .online_boosters_chip.league-of-legends-boost span {
        color: var(--lol) !important
    }

    .online_boosters_chip.league-of-legends-boost .online_boosters {
        animation: pulse-animation-lol 1s linear infinite;
        background-color: var(--lol);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters_chip.valorant-boost span {
        color: var(--val) !important
    }

    .online_boosters_chip.valorant-boost .online_boosters {
        animation: pulse-animation-val 1s linear infinite;
        background-color: var(--val);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters_chip.rainbow-six-siege-boost span {
        color: var(--r6s) !important
    }

    .online_boosters_chip.rainbow-six-siege-boost .online_boosters {
        animation: pulse-animation-r6s 1s linear infinite;
        background-color: var(--r6s);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters_chip.overwatch-2-boost span {
        color: var(--overwatch-2) !important
    }

    .online_boosters_chip.overwatch-2-boost .online_boosters {
        animation: pulse-animation-ow2 1s linear infinite;
        background-color: var(--overwatch-2);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters_chip.counter-strike-2-boost span {
        color: var(--cs2) !important
    }

    .online_boosters_chip.counter-strike-2-boost .online_boosters {
        animation: pulse-animation-ow2 1s linear infinite;
        background-color: var(--cs2);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters_chip.teamfight-tactics-boost span {
        color: var(--teamfight) !important
    }

    .online_boosters_chip.teamfight-tactics-boost .online_boosters {
        animation: pulse-animation-tft 1s linear infinite;
        background-color: var(--teamfight-card);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters_chip.rocket-league-boost span {
        color: var(--rocket-league) !important
    }

    .online_boosters_chip.rocket-league-boost .online_boosters {
        animation: pulse-animation-rl 1s linear infinite;
        background-color: var(--rocket-league);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .online_boosters_chip.world-of-warcraft-boost span {
        color: var(--wow) !important
    }

    .online_boosters_chip.world-of-warcraft-boost .online_boosters {
        animation: pulse-animation-wow 1s linear infinite;
        background-color: var(--wow);
        border-radius: 50%;
        height: 4.75px;
        width: 4.75px
    }

    .game_pack_container .hide-show-all {
        visibility: hidden
    }

    @media screen and (max-width:786px) {
        .game_pack_container.mobile-styles {
            min-height: 600px
        }
    }

    .game_pack_cards_container {
        align-items: flex-start;
        display: flex;
        height: 100%;
        justify-content: flex-start;
        min-height: 350px;
        width: 100%;
        -ms-overflow-style: none;
        border-radius: 9px;
        gap: 20px;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch
    }

    .game_pack_cards_container::-webkit-scrollbar {
        display: none
    }

    @media screen and (max-width:900px) {
        .game_pack_cards_container {
            min-height: 310px
        }
    }

    .swiper-slide {
        padding-top: 20px
    }

    .new_pack_chip {
        align-items: center;
        border-radius: 15px;
        display: flex;
        height: -moz-max-content;
        height: max-content;
        justify-content: center;
        left: 5%;
        min-height: 20px;
        min-width: 54px;
        padding: 0 10px;
        position: absolute;
        top: 10px;
        width: -moz-max-content;
        width: max-content;
        z-index: 999
    }

    .new_pack_chip.green {
        background-color: var(--green)
    }

    .new_pack_chip.green .bottom_right_star,
    .new_pack_chip.green .bottom_star,
    .new_pack_chip.green .top_right_star {
        stroke: var(--green)
    }

    .new_pack_chip.yellow {
        background-color: var(--yellow)
    }

    .new_pack_chip.yellow .bottom_right_star,
    .new_pack_chip.yellow .bottom_star,
    .new_pack_chip.yellow .top_right_star {
        stroke: var(--yellow)
    }

    .new_pack_chip.button-blue {
        background-color: var(--color_main_1)
    }

    .new_pack_chip.button-blue .bottom_right_star,
    .new_pack_chip.button-blue .bottom_star,
    .new_pack_chip.button-blue .top_right_star {
        stroke: var(--color_main_1)
    }

    .new_pack_chip.orange {
        background-color: var(--color_main_1)
    }

    .new_pack_chip.orange .bottom_right_star,
    .new_pack_chip.orange .bottom_star,
    .new_pack_chip.orange .top_right_star {
        stroke: var(--color_main_1)
    }

    .new_pack_chip .bottom_star {
        bottom: -2px;
        left: -2px;
        position: absolute;
        stroke-width: 1.75px
    }

    .new_pack_chip .top_right_star {
        height: 15px;
        position: absolute;
        right: -2px;
        top: -4px;
        width: 15px;
        stroke-width: 1.75px
    }

    .new_pack_chip .bottom_right_star {
        bottom: 1px;
        height: 10px;
        position: absolute;
        right: -3px;
        width: 10px;
        stroke-width: 1.75px
    }

    .game_pack_card {
        background-color: var(--bg-extra-dark);
        border-radius: 9px;
        cursor: pointer;
        flex-shrink: 0;
        min-height: 330px;
        min-width: 100%;
        overflow: hidden;
        padding: 20px;
        position: relative;
        width: 100%;
        z-index: 1
    }

    .game_pack_card .new_pack_chip {
        top: 0
    }

    .game_pack_card:before {}

    .game_pack_card .no_pointer {
        pointer-events: none
    }

    .game_pack_card:hover:before {}

    .game_pack_card.disable {
        pointer-events: none
    }

    .game_pack_card.disable .game_pack_card_disable_mask {
        align-items: center;
        background-color: var(--bg-opace);
        display: flex;
        height: 100%;
        justify-content: center;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 2
    }

    .game_pack_card.disable .disable_pill {
        background-color: var(--bg-opace);
        border: 1px solid var(--stroke-dark);
        padding: 6px 12px
    }

    .game_pack_card .title {
        word-wrap: break-word
    }

    .game_pack_card .pack_index {
        /* border: 1px solid var(--stroke-medium); */
        border-radius: 4px;
        padding: 3px 7px;
        text-align: center;
        width: 42px
    }

    .game_pack_card .pack_image {
        bottom: -10px;
        height: auto;
        max-width: 170px;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        right: -10px;
        width: 70%;
        z-index: 0
    }

    .game_pack_card .perk_list {
        list-style-type: none;
        margin-left: 10px
    }

    .game_pack_card .perk_list li {
        margin-bottom: 2.5px
    }

    .game_pack_card .arrow_right {
        align-items: center;
        background-color: #171b1c;
        border-radius: 24px;
        display: flex;
        gap: 10px;
        height: 36px;
        justify-content: center;
        overflow: hidden;
        padding: 0 10px;
        transition: all .2s ease;
        width: 36px;
        z-index: 1
    }

    .game_pack_card .arrow_right .text {
        display: none;
        opacity: 0
    }

    .game_pack_card.fortnite-rocket-racing-boost .pack_image {
        bottom: 8px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        right: 5px;
        width: 70%;
        z-index: 0
    }

    .game_pack_card.league-of-legends-boost:before {
        background-color: var(--color_main_1)
    }

    .game_pack_card .perk_list li {
            padding-left: 15px;
            background-image: url(/img/icons/menu_icon.webp);
            background-repeat: no-repeat;
            background-size: 10px 10px;
            background-position: left center;
        }

        .game_pack_card .perk_list {
            list-style: none;
        }


    .game_pack_card.league-of-legends-boost:hover .arrow_right {
        background-color: var(--color_main_1)
    }

    .game_pack_card.league-of-legends-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.valorant-boost:before {
        background-color: var(--val-card)
    }

    .game_pack_card.valorant-boost .perk_list {
        list-style-image: url(/img/games/valorant-boost/star.svg)
    }

    .game_pack_card.valorant-boost:hover .arrow_right {
        background-color: var(--val)
    }

    .game_pack_card.valorant-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.rainbow-six-siege-boost:before {
        background-color: var(--r6s-card)
    }

    .game_pack_card.rainbow-six-siege-boost .perk_list {
        list-style-image: url(/img/games/rainbow-six-siege-boost/star.svg)
    }

    .game_pack_card.rainbow-six-siege-boost:hover .arrow_right {
        background-color: var(--r6s-card)
    }

    .game_pack_card.rainbow-six-siege-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.overwatch-2-boost:before {
        background-color: var(--overwatch-2-card)
    }

    .game_pack_card.overwatch-2-boost .perk_list {
        list-style-image: url(/img/games/overwatch-2-boost/star.svg)
    }

    .game_pack_card.overwatch-2-boost:hover .arrow_right {
        background-color: var(--overwatch-2-card)
    }

    .game_pack_card.overwatch-2-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.rocket-league-boost:before {
        background-color: var(--rocket-league)
    }

    .game_pack_card.rocket-league-boost .perk_list {
        list-style-image: url(/img/games/rocket-league-boost/star.svg)
    }

    .game_pack_card.rocket-league-boost:hover .arrow_right {
        background-color: var(--rocket-league)
    }

    .game_pack_card.rocket-league-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.counter-strike-2-boost:before {
        background-color: var(--cs2-card)
    }

    .game_pack_card.counter-strike-2-boost .perk_list {
        list-style-image: url(/img/games/overwatch-2-boost/star.svg)
    }

    .game_pack_card.counter-strike-2-boost:hover .arrow_right {
        background-color: var(--cs2-card)
    }

    .game_pack_card.counter-strike-2-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.dota-2-boost:before {
        background-color: var(--dota2-card)
    }

    .game_pack_card.dota-2-boost .perk_list {
        list-style-image: url(/img/games/dota-2-boost/star.svg)
    }

    .game_pack_card.dota-2-boost:hover .arrow_right {
        background-color: var(--dota2-card)
    }

    .game_pack_card.dota-2-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.apex-legends-boost:before {
        background-color: var(--apex)
    }

    .game_pack_card.apex-legends-boost .perk_list {
        list-style-image: url(/img/games/apex-legends-boost/star.svg)
    }

    .game_pack_card.apex-legends-boost:hover .arrow_right {
        background-color: var(--apex)
    }

    .game_pack_card.apex-legends-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.fortnite-boost:before {
        background-color: var(--fortnite)
    }

    .game_pack_card.fortnite-boost .perk_list {
        list-style-image: url(/img/games/fortnite-boost/star.svg)
    }

    .game_pack_card.fortnite-boost:hover .arrow_right {
        background-color: var(--fortnite)
    }

    .game_pack_card.fortnite-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.teamfight-tactics-boost:before {
        background-color: var(--teamfight)
    }

    .game_pack_card.teamfight-tactics-boost .perk_list {
        list-style-image: url(/img/games/teamfight-tactics-boost/star.svg)
    }

    .game_pack_card.teamfight-tactics-boost:hover .arrow_right {
        background-color: var(--teamfight)
    }

    .game_pack_card.teamfight-tactics-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.the-finals-boost:before {
        background-color: var(--thefinals)
    }

    .game_pack_card.the-finals-boost .perk_list {
        list-style-image: url(/img/games/the-finals-boost/star.svg)
    }

    .game_pack_card.the-finals-boost:hover .arrow_right {
        background-color: var(--thefinals)
    }

    .game_pack_card.the-finals-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    .game_pack_card.world-of-warcraft-boost:before {
        background-color: var(--wow)
    }

    .game_pack_card.world-of-warcraft-boost .pack_image {
        bottom: 0;
        max-width: 250px;
        width: 80%;
        z-index: 0
    }

    .game_pack_card.world-of-warcraft-boost .perk_list {
        list-style-image: url(/img/games/world-of-warcraft-boost/star.svg)
    }

    .game_pack_card.world-of-warcraft-boost:hover .arrow_right {
        background-color: var(--wow)
    }

    .game_pack_card.world-of-warcraft-boost:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    @media screen and (min-width:2000px) {
        .game_pack_card {
            max-width: 300px
        }
    }

    @media screen and (max-width:1024px) {
        .game_pack_card {
            min-width: 100%;
            width: 100%
        }
    }

    @media screen and (max-width:900px) {
        .game_pack_card {
            min-height: 280px;
            min-width: 100%;
            width: 100%
        }

        .game_pack_card .pack_image {
            max-width: 150px !important;
            width: 60% !important
        }

        .game_pack_card:before,
        .game_pack_card:hover:before {
            opacity: .5 !important
        }
    }

    @media screen and (max-width:768px) {
        .game_pack_card {
            min-height: 180px
        }
    }

    @media screen and (max-width:600px) {
        .game_pack_card:hover .arrow_right {
            background-color: #171b1c !important
        }

        .game_pack_card:hover .arrow_right .text {
            display: none !important
        }
    }

    .game_booster:hover {
        background-color: var(--color_main_2);
        border-radius: 6px
    }

    .game_booster_card {
        align-items: center;
        background-color: var(--bg-extra-dark);
        border-radius: 9px;
        cursor: pointer;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        gap: 10px;
        justify-content: space-between;
        min-height: 210px;
        overflow: hidden;
        padding: 18px;
        position: relative;
        width: 100%
    }

    .game_booster_card .avatar {
        border-radius: 50%;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100px;
        z-index: 1
    }

    .game_booster_card .username_text {
        max-width: 10ch;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        z-index: 1
    }

    .game_booster_card .flag_icon {
        border-radius: 3.12px;
        height: 14.545px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 20px;
        z-index: 1
    }

    .game_booster_card .rank_icon {
        height: 21px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 24px;
        z-index: 1
    }

    .game_booster_card .booster_rating {
        border: 1px solid var(--white-opace);
        border-radius: 16px;
        display: flex;
        gap: 10px;
        padding: 5px 12px;
        z-index: 1
    }

    .game_booster_card:before {
        bottom: 0;
        content: "";
        filter: blur(83.111114502px);
        height: 50%;
        opacity: 0;
        position: absolute;
        right: -10%;
        transition: all .25s ease-in;
        width: 100%;
        z-index: 0
    }

    .game_booster_card:hover:before {
        opacity: .3
    }

    .game_booster_card.league-of-legends-boost:before {
        background-color: var(--lol-card)
    }

    .game_booster_card.valorant-boost:before {
        background-color: var(--val-card)
    }

    .game_booster_card.rainbow-six-siege-boost:before {
        background-color: var(--r6s-card)
    }

    .game_booster_card.overwatch-2-boost:before {
        background-color: var(--overwatch-2)
    }

    .game_booster_card.counter-strike-2-boost:before {
        background-color: var(--cs2)
    }

    .game_booster_card.rocket-league-boost:before {
        background-color: var(--rocket-league)
    }

    .game_booster_card.dota-2-boost:before {
        background-color: var(--dota2)
    }

    .game_booster_card.apex-legends-boost:before {
        background-color: var(--apex)
    }

    .game_booster_card.fortnite-boost:before {
        background-color: var(--fortnite)
    }

    .game_booster_card.teamfight-tactics-boost:before {
        background-color: var(--teamfight-card)
    }

    @media screen and (min-width:2000px) {
        .game_booster_card {
            max-width: 240px
        }
    }

    .stripe-payment-form {
        display: none
    }

    .stripe-payment-form.visible {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        width: 100%
    }

    .stripe-payment-form form {
        align-self: center;
        padding: 10px 10px 10px 40px;
        width: 100%
    }

    .stripe-payment-form .hidden {
        display: none
    }

    .stripe-payment-form #payment-message {
        color: #697386;
        font-size: 16px;
        line-height: 20px;
        padding-top: 12px;
        text-align: center
    }

    .stripe-payment-form #payment-element {
        margin-bottom: 24px
    }

    .stripe-payment-form button {
        background: #5469d4;
        border: 0;
        border-radius: 4px;
        box-shadow: 0 4px 5.5px 0 rgba(0, 0, 0, .07);
        color: #fff;
        cursor: pointer;
        display: block;
        font-family: Arial, sans-serif;
        font-size: 16px;
        font-weight: 600;
        padding: 12px 16px;
        transition: all .2s ease;
        width: 100%
    }

    .stripe-payment-form button:hover {
        filter: contrast(115%)
    }

    .stripe-payment-form button:disabled {
        cursor: default;
        opacity: .5
    }

    .stripe-payment-form .spinner,
    .stripe-payment-form .spinner:after,
    .stripe-payment-form .spinner:before {
        border-radius: 50%
    }

    .stripe-payment-form .spinner {
        box-shadow: inset 0 0 0 2px;
        color: #fff;
        font-size: 22px;
        height: 20px;
        margin: 0 auto;
        position: relative;
        text-indent: -99999px;
        transform: translateZ(0);
        width: 20px
    }

    .stripe-payment-form .spinner:after,
    .stripe-payment-form .spinner:before {
        content: "";
        position: absolute
    }

    .stripe-payment-form .spinner:before {
        animation: loading 2s ease 1.5s infinite;
        background: #5469d4;
        border-radius: 20.4px 0 0 20.4px;
        height: 20.4px;
        left: -.2px;
        top: -.2px;
        transform-origin: 10.4px 10.2px;
        width: 10.4px
    }

    .stripe-payment-form .spinner:after {
        animation: loading 2s ease infinite;
        background: #5469d4;
        border-radius: 0 10.2px 10.2px 0;
        height: 10.2px;
        left: 10.2px;
        top: -.1px;
        transform-origin: 0 10.2px;
        width: 10.4px
    }

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

        to {
            transform: rotate(1turn)
        }
    }

    @media only screen and (max-width:600px) {
        .stripe-payment-form form {
            min-width: auto;
            width: 80vw
        }
    }

    .membership_banner {
        background-image: url(/images/membership_bg.webp);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        border-radius: 12px;
        gap: 54px;
        margin-top: 15vh;
        padding: 3.75vh 3.75vw
    }

    .membership_banner .left-side {
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        background-color: hsla(0, 0%, 100%, .04);
        border: 1.5px solid hsla(0, 0%, 100%, .3);
        border-radius: 12px;
        gap: 3.3vw;
        padding: 5vh 3.3vw
    }

    .membership_banner .left-side .monthly_year_chip {
        background: hsla(0, 0%, 100%, .1);
        border-radius: 56px;
        max-width: -moz-max-content;
        max-width: max-content;
        padding: 3px;
        position: relative
    }

    .membership_banner .left-side .monthly_year_chip button {
        padding: 7px 15px;
        position: relative;
        text-align: center;
        z-index: 1
    }

    .membership_banner .left-side .monthly_year_chip button.active {
        color: var(--text-black)
    }

    .membership_banner .left-side .monthly_year_chip button.active:after {
        color: var(--text-black) !important
    }

    .membership_banner .left-side .monthly_year_chip button.yearly:after {
        color: var(--light-blue);
        content: "-20%";
        font-size: 8px;
        position: absolute;
        right: 10%;
        top: 0
    }

    .membership_banner .left-side .monthly_year_chip:before {
        background-color: var(--text-white);
        border-radius: 56px;
        content: "";
        height: calc(100% - 7px);
        left: 0;
        position: absolute;
        top: 3.5px;
        transition: all .2s ease;
        width: 50%
    }

    .membership_banner .left-side .monthly_year_chip.monthly:before {
        left: 5px
    }

    .membership_banner .left-side .monthly_year_chip.yearly:before {
        left: calc(50% - 5px)
    }

    .membership_banner .left-side .membership_icon {
        height: auto;
        max-width: 250px;
        min-width: 175px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .membership_banner .left-side button svg path {
        fill: var(--text-black)
    }

    .membership_banner .perks_container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(4, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 48px;
        grid-row-gap: 30px;
        margin-top: 20px
    }

    .membership_banner .perks_container .perk {
        height: -moz-max-content;
        height: max-content
    }

    .membership_banner .perks_container:after {
        display: none
    }

    @media screen and (max-width:768px) {
        .membership_banner .perks_container {
            grid-template-columns: repeat(1, 1fr);
            grid-template-rows: repeat(8, 1fr)
        }
    }

    .membership_banner.membership_dashboard_banner {
        background-image: none;
        flex-direction: column !important;
        margin-top: 0
    }

    .membership_banner.membership_dashboard_banner .left-side {
        flex-direction: row-reverse
    }

    .membership_banner.modal_membership {
        background-color: var(--bg-main);
        justify-content: flex-start;
        margin-top: 0;
        max-height: 90vh;
        max-width: 90vw;
        overflow: auto
    }

    @media screen and (max-width:1200px) {

        .membership_banner,
        .membership_banner.membership_dashboard_banner .left-side {
            flex-direction: column
        }
    }

    @media screen and (max-width:768px) {
        .membership_banner {
            background-position: 0 0;
            margin-top: 2.5vh
        }
    }

    .e_learning_banner {
        background-color: var(--bg-extra-dark);
        background-repeat: no-repeat;
        border-radius: 12px;
        margin-top: 30px;
        overflow: hidden;
        padding: 40px;
        position: relative
    }

    .e_learning_banner>* {
        z-index: 2
    }

    .e_learning_banner:before {
        background-position: 0;
        border-radius: 12px;
        left: 0;
        top: 0
    }

    .e_learning_banner:after,
    .e_learning_banner:before {
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: absolute;
        width: 100%
    }

    .e_learning_banner:after {
        background-position: 100%;
        bottom: 0;
        max-width: 100%;
        right: 0;
        z-index: 1
    }

    .e_learning_banner .arrow_right {
        align-items: center;
        background-color: #171b1c;
        border-radius: 24px;
        display: flex;
        gap: 10px;
        height: 36px;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 10px;
        transition: all .2s ease;
        width: 36px;
        z-index: 1
    }

    .e_learning_banner .arrow_right .text {
        display: none;
        opacity: 0;
        width: 0
    }

    .e_learning_banner:hover .arrow_right {
        width: 102px
    }

    .e_learning_banner:hover .arrow_right .text {
        display: block;
        opacity: 1;
        width: 100%
    }

    .e_learning_banner.league-of-legends-boost:before {
        background-image: url(/img/games/league-of-legends-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.league-of-legends-boost:after {
        background-image: url(/img/games/league-of-legends-boost/e_learning_bg.webp)
    }

    .e_learning_banner.league-of-legends-boost .title {
        color: var(--lol-card)
    }

    .e_learning_banner.league-of-legends-boost svg path {
        fill: var(--lol-card)
    }

    .e_learning_banner.valorant-boost:before {
        background-image: url(/img/games/valorant-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.valorant-boost:after {
        background-image: url(/img/games/valorant-boost/e_learning_bg.webp)
    }

    .e_learning_banner.valorant-boost .title {
        color: var(--val)
    }

    .e_learning_banner.valorant-boost svg path {
        fill: var(--val)
    }

    .e_learning_banner.rainbow-six-siege-boost:before {
        background-image: url(/img/games/rainbow-six-siege-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.rainbow-six-siege-boost:after {
        background-image: url(/img/games/rainbow-six-siege-boost/e_learning_bg.webp)
    }

    .e_learning_banner.rainbow-six-siege-boost .title {
        color: var(--r6s)
    }

    .e_learning_banner.rainbow-six-siege-boost svg path {
        fill: var(--r6s)
    }

    .e_learning_banner.overwatch-2-boost:before {
        background-image: url(/img/games/overwatch-2-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.overwatch-2-boost:after {
        background-image: url(/img/games/overwatch-2-boost/e_learning_bg.webp)
    }

    .e_learning_banner.overwatch-2-boost .title {
        color: var(--overwatch-2)
    }

    .e_learning_banner.overwatch-2-boost svg path {
        fill: var(--overwatch-2)
    }

    .e_learning_banner.counter-strike-2-boost:before {
        background-image: url(/img/games/counter-strike-2-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.counter-strike-2-boost:after {
        background-image: url(/img/games/counter-strike-2-boost/e_learning_bg.webp)
    }

    .e_learning_banner.counter-strike-2-boost .title {
        color: var(--cs2)
    }

    .e_learning_banner.counter-strike-2-boost svg path {
        fill: var(--cs2)
    }

    .e_learning_banner.rocket-league-boost:before {
        background-image: url(/img/games/rocket-league-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.rocket-league-boost:after {
        background-image: url(/img/games/rocket-league-boost/e_learning_bg.webp)
    }

    .e_learning_banner.rocket-league-boost .title {
        color: var(--rocket-league)
    }

    .e_learning_banner.rocket-league-boost svg path {
        fill: var(--rocket-league)
    }

    .e_learning_banner.dota-2-boost:before {
        background-image: url(/img/games/dota-2-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.dota-2-boost:after {
        background-image: url(/img/games/dota-2-boost/e_learning_bg.webp)
    }

    .e_learning_banner.dota-2-boost .title {
        color: var(--dota2)
    }

    .e_learning_banner.dota-2-boost svg path {
        fill: var(--dota2)
    }

    .e_learning_banner.apex-legends-boost:before {
        background-image: url(/img/games/apex-legends-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.apex-legends-boost:after {
        background-image: url(/img/games/apex-legends-boost/e_learning_bg.webp)
    }

    .e_learning_banner.apex-legends-boost .title {
        color: var(--apex)
    }

    .e_learning_banner.apex-legends-boost svg path {
        fill: var(--apex)
    }

    .e_learning_banner.fortnite-boost:before {
        background-image: url(/img/games/fortnite-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.fortnite-boost:after {
        background-image: url(/img/games/fortnite-boost/e_learning_bg.webp)
    }

    .e_learning_banner.fortnite-boost .title {
        color: var(--fortnite)
    }

    .e_learning_banner.fortnite-boost svg path {
        fill: var(--fortnite)
    }

    .e_learning_banner.teamfight-tactics-boost:before {
        background-image: url(/img/games/teamfight-tactics-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.teamfight-tactics-boost:after {
        background-image: url(/img/games/teamfight-tactics-boost/e_learning_bg.webp)
    }

    .e_learning_banner.teamfight-tactics-boost .title {
        color: var(--teamfight)
    }

    .e_learning_banner.teamfight-tactics-boost svg path {
        fill: var(--teamfight)
    }

    .e_learning_banner.the-finals-boost:before {
        background-image: url(/img/games/the-finals-boost/e_learning_bg_1.webp)
    }

    .e_learning_banner.the-finals-boost:after {
        background-image: url(/img/games/the-finals-boost/e_learning_bg.webp)
    }

    .e_learning_banner.the-finals-boost .title {
        color: var(--thefinals)
    }

    .e_learning_banner.the-finals-boost svg path {
        fill: var(--thefinals)
    }

    @media screen and (min-width:1201px) {
        .e_learning_banner .banner_options {
            flex: 5
        }

        .e_learning_banner .banner_image_mobile {
            display: none
        }
    }

    @media screen and (max-width:1200px) {
        .e_learning_banner {
            padding-bottom: 0
        }

        .e_learning_banner:before {
            background-size: cover
        }

        .e_learning_banner:after {
            background-image: none !important;
            filter: blur(65.8215179443px);
            height: 75%;
            opacity: .1;
            width: 40%
        }

        .e_learning_banner.league-of-legends-boost:after {
            background-color: var(--lol)
        }

        .e_learning_banner.valorant-boost:after {
            background-color: var(--val)
        }

        .e_learning_banner.rainbow-six-siege-boost:after {
            background-color: var(--r6s)
        }

        .e_learning_banner.overwatch-2-boost:after {
            background-color: var(--overwatch-2)
        }

        .e_learning_banner.counter-strike-2-boost:after {
            background-color: var(--cs2)
        }

        .e_learning_banner.rocket-league-boost:after {
            background-color: var(--rocket-league)
        }

        .e_learning_banner.dota-2-boost:after {
            background-color: var(--dota2)
        }

        .e_learning_banner.apex-legends-boost:after {
            background-color: var(--apex)
        }

        .e_learning_banner.fortnite-boost:after {
            background-color: var(--fortnite)
        }

        .e_learning_banner.teamfight-tactics-boost:after {
            background-color: var(--teamfight)
        }

        .e_learning_banner.the-finals-boost:after {
            background-color: var(--thefinals)
        }

        .e_learning_banner .banner_image_mobile {
            height: auto;
            -o-object-fit: cover;
            object-fit: cover;
            width: 100%
        }

        .e_learning_banner .banner_options {
            max-width: 45%
        }
    }

    @media screen and (max-width:600px) {
        .e_learning_banner:hover .arrow_right {
            background-color: #171b1c !important
        }

        .e_learning_banner:hover .arrow_right .text {
            display: none !important
        }
    }

    .arrow_right {
        background-color: #171b1c;
        border-radius: 24px;
        gap: 10px;
        height: 36px;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 10px;
        transition: all .2s ease;
        width: 36px
    }

    .arrow_right,
    .chip_container {
        align-items: center;
        display: flex
    }

    .chip_container {
        gap: 6px;
        justify-content: flex-start
    }

    .chip_container.xs {
        border-radius: 22px;
        height: 22px;
        padding: 3px 9px
    }

    .chip_container.small {
        border-radius: 40px;
        height: 24px;
        padding: 3px 9px 3px 6px
    }

    .chip_container.medium {
        border-radius: 6px;
        height: 24px;
        padding: 6px
    }

    .chip_container.session {
        background-color: #162032;
        border: 1px solid #2d476e;
        border-radius: 6px !important;
        padding: 3px 9px !important
    }

    .chip_container.session label {
        color: #65a0ff !important
    }

    .chip_container.session .div_session_color {
        background-color: #65a0ff;
        border-radius: 50%;
        height: .4rem;
        width: .4rem
    }

    .chip_container.xl {
        border-radius: 25px;
        padding: 9px 13px
    }

    .chip_container.option {
        background-color: var(--bg-extra-light)
    }

    .chip_container.primary {
        background-color: var(--orange-opace)
    }

    .chip_container.process {
        background-color: var(--blue-opace)
    }

    .chip_container.process label {
        color: var(--color_main_1) !important
    }

    .chip_container.completed {
        background-color: var(--green-opace)
    }

    .chip_container.completed label {
        color: var(--green) !important
    }

    .chip_container.verified {
        background-color: var(--green-opace);
        justify-content: center
    }

    .chip_container.verified label {
        color: var(--green) !important
    }

    .chip_container.danger {
        background-color: var(--danger-opace);
        justify-content: center
    }

    .chip_container.danger label {
        color: var(--danger) !important
    }

    .chip_container.legacy {
        background-color: var(--orange-opace)
    }

    .chip_container.legacy label {
        color: var(--color_main_1) !important
    }

    .pack_selector_container {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: flex-start;
        overflow: auto;
        width: 100%;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .pack_selector_container::-webkit-scrollbar {
        display: none
    }

    .pack_selector_container.categories {
        overflow-x: hidden
    }

    .pack_selector_container.categories .pack_selector {
        padding: 7px 8px 7px 5px
    }

    .pack_selector_container.categories .pack_selector.active {
        background-color: var(--color_main_2);
        /* border: 1px solid var(--stroke-orange) */
    }

    .pack_selector_container.categories .pack_selector.active .pack-title {
        color: var(--text-white)
    }

    .pack_selector_container.categories .pack_selector.active svg path {
        fill: #ffcc3b
    }

    .pack_selector_container .pack_selector {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        padding: 9px 15px;
        transition: all .2s ease;
        width: 100%
    }

    .pack_selector_container .pack_selector .pack-title {
        color: var(--text-gray)
    }

    .pack_selector_container .pack_selector:hover {
        border: 1px solid var(--color_main_1)
    }

    .pack_selector_container .pack_selector:hover .pack-title {
        color: var(--text-white)
    }

    .pack_selector_container .pack_selector.active {
        background-color: var(--color_main_2);
        /* border: 1px solid var(--stroke-orange) */
    }

    .pack_selector_container .pack_selector.active .pack-title {
        color: var(--text-white)
    }

    @media screen and (max-width:900px) {
        .pack_selector_container .pack_selector:hover {
            border: 1px solid var(--stroke-dark)
        }

        .pack_selector_container .pack_selector:hover .pack-title {
            color: var(--text-gray)
        }

        .pack_selector_container {
            flex-direction: row
        }
    }

    .dropdown {
        align-items: center;
        border: none;
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        cursor: pointer;
        display: flex;
        height: 42px;
        justify-content: space-between;
        min-height: 42px;
        outline: none;
        padding: 0 11px 0 12px;
        position: relative;
        width: 100%
    }

    .dropdown.small {
        height: 30px;
        min-height: 36px
    }

    .dropdown .drop_down_search {
        background-color: transparent;
        border: none;
        color: var(--white);
        outline: none
    }

    .dropdown.variant-primary {
        background-color: var(--bg-medium);
        border: 1px solid var(--stroke-medium)
    }

    
    .dropdown.variant-primary .dropdown_list_container{
        background-color: var(--color_main_base);
        border: 1px solid var(--color_main_1);
        border-radius: 10px 0 0 10px;
    }

    @media screen and (max-width:768px) {
        .dropdown.variant-primary .dropdown_list_container{
        border-radius: 10px;
        }
    }

    .dropdown.variant-primary svg {
        stroke: var(--white)
    }

    .dropdown.variant-transparent {
        background-color: transparent;
        border: 1px solid var(--stroke-medium)
    }

    .dropdown.variant-transparent .dropdown_list_container {
        background-color: var(--bg-medium);
        border: 1px solid var(--stroke-medium)
    }

    .dropdown.variant-transparent svg {
        stroke: var(--white)
    }

    .dropdown .dropdown_list_container {
        align-items: flex-start;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        height: -moz-max-content;
        height: max-content;
        justify-content: flex-start;
        left: 0;
        max-height: 25vh;
        overflow-y: auto;
        padding: 6px;
        position: absolute;
        top: 105%;
        width: 100%;
        z-index: 10
    }

    .dropdown .dropdown_list_container .item {
        border: none;
        border-radius: 3px;
        -moz-border-radius: 3px;
        -webkit-border-radius: 3px;
        cursor: pointer;
        outline: none;
        padding: 11px;
        text-align: start;
        width: 100%;
        z-index: 1
    }

    @media screen and (max-width:480px) {
        .dropdown .dropdown_list_container .item {
            padding: 16px;
            height:30px;
        }
    }

    .dropdown .dropdown_list_container .active_item {
        background-color: var(--bg-main);
        color: var(--white)
    }

    .dropdown .selected_item {
        color: var(--white);
        white-space: nowrap
    }

    .dropdown .selected_item.placeholder {
        color: var(--text-gray-dark) !important
    }

    .dropdown svg {
        stroke: var(--white)
    }

    @media screen and (max-width:768px) {
        .dropdown {
            flex: 1
        }
    }

    .switch {
        background-color: var(--bg-main);
        border-radius: 34px;
        display: inline-block;
        height: 24px;
        position: relative;
        width: 36px;
        z-index: 0
    }

    .switch.disabled,
    .switch.disabled:hover {
        background: linear-gradient(#1b1c1c, #1b1c1c, #1b1c1c, #1b1c1c)
    }

    .switch.disabled .slider:before {
        background-color: var(--text-gray)
    }

    .switch :after {
        background: var(--bg-main);
        border: 1px solid var(--stroke-medium);
        border-radius: 34px;
        content: "";
        height: 24px;
        left: 1px;
        position: absolute;
        top: 0;
        transition: .4s;
        width: 36px;
        z-index: -1
    }

    .switch:hover {
        background: linear-gradient(var(--divider), #c4ed4f 50.43%, #c4ed4f 40.43%, var(--divider))
    }

    .switch input {
        height: 0;
        opacity: 0;
        width: 0
    }

    .switch .slider {
        background-color: transparent;
        bottom: 0;
        cursor: pointer;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
        transition: .4s
    }

    .switch .slider:before {
        background-color: var(--text-gray);
        bottom: 3px;
        content: "";
        height: 18px;
        left: 3px;
        position: absolute;
        transition: .4s;
        width: 18px
    }

    .switch input:checked+.slider:before {
        background-color: var(--color_main_1);
        transform: translateX(14px)
    }

    .switch input:checked+.slider:after {
        border: 1px solid var(--color_main_1)
    }

    .switch .slider.round {
        border-radius: 34px
    }

    .switch .slider.round:before {
        border-radius: 50%
    }

    .switch.primary :after {
        background-color: var(--color_main_2) !important
    }

    .switch.primary input:checked+.slider:before {
        background-color: var(--text-white)
    }

    .switch.primary input:checked+.slider:after {
        border: 1px solid var(--color_main_1)
    }

    .slider-container {
        align-items: center;
        display: flex;
        justify-content: space-between;
        position: relative;
        width: 100%
    }

    .slider-container input[type=range] {
        position: relative;
        --webkit-appearance: none;
        --moz-appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border-radius: 3px;
        display: block;
        height: 2px;
        outline: none;
        width: 100%
    }

    .slider-container input[type=range]::-webkit-slider-runnable-track {
        --webkit-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        height: 2px
    }

    .slider-container input[type=range]::-moz-track {
        --moz-appearance: none;
        -moz-appearance: none;
        appearance: none;
        height: 2px
    }

    .slider-container input[type=range]::-ms-track {
        appearance: none;
        height: 2px
    }

    .slider-container input[type=range]::-webkit-slider-thumb {
        --webkit-appearance: none;
        -webkit-appearance: none;
        appearance: none;
        background-color: transparent;
        background-image: url(/images/icons/slider-thumb.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        border: none;
        cursor: pointer;
        height: 20px;
        margin-top: -8px;
        outline: none;
        width: 20px
    }

    .slider-container input[type=range]::-moz-range-thumb {
        --moz-appearance: none;
        -moz-appearance: none;
        appearance: none;
        background-color: transparent;
        background-image: url(/images/icons/slider-thumb.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        border: none;
        cursor: pointer;
        height: 20px;
        margin-top: -8px;
        outline: none;
        width: 20px
    }

    .slider-container input[type=range]::-ms-thumb {
        appearance: none;
        background-color: transparent;
        background-image: url(/images/icons/slider-thumb.png);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: contain;
        border: none;
        cursor: pointer;
        height: 20px;
        margin-top: -8px;
        outline: none;
        width: 20px
    }

    .slider-container .range-value {
        background-color: var(--bg-medium);
        border-radius: 6px;
        height: 42px;
        padding: 12px
    }

    .slider-container .range-value input {
        background-color: transparent;
        border: none;
        max-width: 60px;
        outline: none;
        text-align: center
    }

    hr {
        background-color: var(--stroke-dark)
    }

    hr.horizontal {
        border: none;
        height: 1px;
        width: 100%
    }

    hr.vertical {
        border: none;
        height: 5px;
        width: 1px
    }

    .booster_list_container {
        background-color: var(--bg-main);
        height: 100%;
        max-height: 177px;
        overflow: auto;
        padding: 6px 3px;
        width: 100%;
        z-index: 12
    }

    .specific_booster_container {
        cursor: pointer;
        position: relative;
        width: 100%
    }

    .specific_booster_container .booster_select {
        position: relative
    }

    .current_time_booster {
        align-items: center;
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1);
        border-radius: 6px;
        display: flex;
        gap: 5px;
        justify-content: center;
        padding: 3px 6px
    }

    .current_time_booster svg {
        height: 15px;
        width: 15px
    }

    .booster_select_online {
        position: relative
    }

    .booster_select_online .booster_online {
        animation: pulse-animation-greens 1s linear infinite;
        background-color: var(--green)
    }

    .booster_select_online .booster_offline,
    .booster_select_online .booster_online {
        border-radius: 50%;
        bottom: 5px;
        height: 4.75px;
        position: absolute;
        right: 2.2px;
        width: 4.75px
    }

    .booster_select_online .booster_offline {
        background-color: var(--stroke-light)
    }

    .radio {
        cursor: pointer;
        display: block;
        text-align: left;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .radio input {
        display: none
    }

    .radio input+span {
        display: inline-block;
        height: 18px;
        padding-left: 2rem;
        position: relative;
        width: 100%
    }

    .radio input+span:before {
        background: transparent;
        border: 1px solid var(--stroke-light);
        border-radius: 50%;
        content: "";
        display: block;
        height: 18px;
        left: 0;
        margin-right: 5px;
        position: absolute;
        top: 0;
        width: 18px
    }

    .payment_checkout_methods .radio input+span:before{
        top: 3px !important;
    }

    .radio input+span:after {
        background: var(--color_main_1);
        border-radius: 50%;
        content: "";
        display: block;
        height: 10px;
        left: 5.5px;
        opacity: 0;
        position: absolute;
        top: 5.5px;
        transform: scale(0) translate(15%, -35%);
        transition: all .2s cubic-bezier(.64, .57, .67, 1.53);
        width: 10px
    }

    @media screen and (min-width:1441px) {
        .radio input+span:after {
            left: 4px;
            top: 4px
        }

        .payment_checkout_methods .radio input+span:after{
            top: 7px !important;
        }
    }



    .radio input:checked+span:after {
        opacity: 1;
        transform: scale(1) translate(0)
    }

    .radio input:checked+span:before {
        border: 1.5px solid var(--color_main_1)
    }

    .radio.primary input:checked+span:before {
        border: 1.5px solid var(--color_main_1)
    }

    .radio.primary input+span:after {
        background: var(--color_main_1)
    }

    .apply_coupon_container {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 20px;
        justify-content: flex-start;
        overflow: hidden;
        transition: all .2s ease-in;
        width: 100%
    }

    .apply_coupon_container.opened_coupon_container {
        height: 75px
    }

    .specific_boost_parent_container {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 28px;
        justify-content: flex-start;
        overflow: hidden;
        transition: all .2s ease-in;
        width: 100%
    }

    .specific_boost_parent_container.opened_coupon_container {
        height: 200px
    }

    .plus rect {
        transform: scaleY(1);
        transform-origin: 50% 50%;
        transition: all .2s ease-in
    }

    .plus.minus .vertical-line {
        transform: scaleY(0)
    }

    .snack_bar {
        align-items: flex-start;
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        background-color: var(--snack-bg);
        border: 1px solid var(--stroke-medium);
        border-radius: 9px;
        display: flex;
        flex-direction: column;
        height: -moz-max-content;
        height: max-content;
        justify-content: flex-start;
        min-height: 73px;
        overflow: hidden;
        padding: 9px;
        position: fixed;
        width: -moz-max-content;
        width: max-content;
        z-index: 20;
        z-index: 10000000000000000
    }

    .snack_bar .progress {
        border-radius: 9px;
        bottom: -1.5px;
        height: 3px;
        position: absolute;
        width: calc(100% - 18px)
    }

    .snack_bar .progress.paymentrequest,
    .snack_bar .progress.paymentsuccess,
    .snack_bar .progress.success {
        background-color: var(--green)
    }

    .snack_bar .progress.wait {
        background-color: var(--color_main_1)
    }

    .snack_bar .progress.error,
    .snack_bar .progress.paymenterror {
        background-color: var(--pink)
    }

    .snack_bar .description {
        white-space: nowrap
    }

    @media screen and (max-width:480px) {
        .snack_bar {
            width: 93%
        }

        .snack_bar .description {
            white-space: normal
        }
    }

    .drop_user_drop {
        align-items: center;
        background-color: var(--navigation-opace);
        border: 1px solid var(--stroke-dark);
        border-radius: 20px;
        cursor: pointer;
        display: flex;
        gap: 14px;
        height: 100%;
        justify-content: space-between;
        min-height: 40px;
        padding: 3px 14px 3px 3px;
        position: relative;
        transition: all .2s ease;
        width: -moz-max-content;
        width: max-content
    }

    .drop_user_drop~.navs_list {
        max-height: 180px
    }

    .drop_user_drop~.navs_list .coins_image {
        height: auto;
        max-width: 35px;
        min-width: 35px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .drop_user_drop .user_avatar {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 34px
    }

    .drop_user_drop svg {
        height: 20px;
        width: 20px
    }

    .drop_user_drop:hover {
        background-color: var(--bg-medium)
    }

    .drop_user_drop:hover svg path {
        fill: #fff
    }

    .drop_user_drop.active {
        background-color: var(--bg-medium)
    }

    .drop_user_drop.active svg path {
        fill: var(--color_main_1)
    }

    .navs_list {
        background-color: var(--snack-bg);
        border: 1px solid var(--stroke-medium);
        border-radius: 12px;
        gap: 3px;
        height: -moz-max-content;
        height: max-content;
        left: 50%;
        max-height: 150px;
        min-height: 87px;
        min-width: 200px;
        overflow: auto;
        padding: 6px;
        position: absolute;
        top: 110%;
        transform: translate(-50%);
        width: 100%;
        z-index: 20
    }

    .navs_list .drop_tab {
        border-radius: 6px;
        cursor: pointer;
        padding: 8px 9px;
        transition: all .15s ease
    }

    .navs_list .drop_tab:hover {
        background-color: var(--bg-extra-light)
    }

    .navs_list .drop_tab:hover svg path {
        fill: var(--color_main_1)
    }

    .table_container {
        background-color: transparent;
        height: 100%;
        overflow-x: auto;
        width: 100%
    }

    .table_container.table-border {
        border-radius: 9px;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        padding: 0 .25rem
    }

    .table_container #table {
        border-spacing: 0 .5rem;
        white-space: nowrap;
        width: 100%
    }

    @media screen and (min-width:769px) and (max-width:1080px) {
        .table_container #table {
            display: block;
            width: 0
        }
    }

    .table_container.secondary tbody tr {
        border: 1px solid transparent;
        height: 60px
    }

    .table_container.secondary tbody tr td {
        background-color: var(--color_main_2);
        border: 1px solid transparent
    }

    .table_container.secondary tbody tr td:first-child {
        border-radius: 9px 0 0 9px;
        -moz-border-radius: 9px 0 0 9px;
        -webkit-border-radius: 9px 0 0 9px;
        padding: 0 9px
    }

    .table_container.secondary tbody tr td:first-child.icon {
        padding: 6px
    }

    .table_container.secondary tbody tr td:last-child {
        border-radius: 0 9px 9px 0;
        -moz-border-radius: 0 9px 9px 0;
        -webkit-border-radius: 0 9px 9px 0;
        padding: 0 9px;
        text-align: right
    }

    .table_container.secondary tbody tr td:last-child>div {
        float: right
    }

    .table_container.secondary tbody tr td:last-child.reward {
        padding: 0 .75rem 0 0
    }

    .table_container.secondary tbody tr:hover {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    .table_container thead tr>th {
        white-space: nowrap;
        width: auto
    }

    .table_container thead tr>th:first-child {
        padding: 0 0 0 .75rem
    }

    .table_container thead tr>th:last-child {
        padding: 0 .75rem 0 0
    }

    .table_container tbody tr {
        cursor: pointer;
        height: 66px;
        padding: 3px 4px;
        width: 100%
    }

    .table_container tbody tr.disabled {
        opacity: 50%;
        pointer-events: none
    }

    .table_container tbody tr td {
        background-color: var(--bg-extra-dark);
        padding: .25rem;
        transition: all .2s
    }

    .table_container tbody tr td:first-child {
        border: var(--white);
        border-radius: .563rem 0 0 .563rem;
        -moz-border-radius: .563rem 0 0 .563rem;
        -webkit-border-radius: .563rem 0 0 .563rem;
        padding: 0 .75rem
    }

    .table_container tbody tr td:first-child.icon {
        padding: 6px
    }

    .table_container tbody tr td.difficulty,
    .table_container tbody tr td.requirements,
    .table_container tbody tr td.title {
        padding: 0
    }

    .table_container tbody tr td:last-child {
        border: var(--white);
        border-radius: 0 .563rem .563rem 0;
        -moz-border-radius: 0 .563rem .563rem 0;
        -webkit-border-radius: 0 .563rem .563rem 0;
        padding: 0 .75rem;
        text-align: right
    }

    .table_container tbody tr td:last-child>div {
        float: right
    }

    .table_container tbody tr td:last-child.reward {
        padding: 0 .75rem 0 0
    }

    .table_container tbody tr td p {
        max-width: 90%;
        word-wrap: break-word;
        white-space: normal
    }

    .table_container tbody tr td p.long-text {
        text-align: justify;
        white-space: break-spaces
    }

    .table_container tbody tr:hover td {
        background-color: var(--custom-dashboard-btn-border)
    }

    .table_container tbody tr:hover td.difficulty,
    .table_container tbody tr:hover td.requirements,
    .table_container tbody tr:hover td.title,
    .table_container tbody tr:hover td:first-child.icon,
    .table_container tbody tr:hover td:last-child.reward {
        background-color: var(--custom-box-light)
    }

    .table_container tbody tr:hover td>svg path {
        stroke: var(--primary-color-1) !important
    }

    .carousel {
        flex-direction: column;
        overflow-x: hidden
    }

    .carousel,
    .carousel #slides {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: center;
        position: relative;
        width: 100%
    }

    .carousel #slides {
        max-height: 300px;
        min-height: 300px;
        overflow: hidden
    }

    .carousel #slides>div {
        background-position: 50%;
        background-repeat: no-repeat;
        position: absolute;
        transition: all .5s ease
    }

    .carousel #slides>div.membership_carousel {
        background-image: url(/images/slider_bg.webp)
    }

    .carousel #slides>div.membership_carousel:before {
        background-image: url(/images/slider_bg_character1.webp);
        left: -5%
    }

    .carousel #slides>div.membership_carousel:after,
    .carousel #slides>div.membership_carousel:before {
        background-position: bottom;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        max-width: 377px;
        position: absolute;
        width: 40%;
        z-index: -1
    }

    .carousel #slides>div.membership_carousel:after {
        background-image: url(/images/slider_bg_character2.webp);
        bottom: -10%;
        right: -5%
    }

    .carousel #slides>div.app_carousel {
        background-color: #0e1012;
        background-image: url(/images/mobile_app_banner_bg.webp);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100% 300px
    }

    .carousel #slides>div.app_carousel:before {
        background-image: url(/images/slider_app_mobile_1.webp);
        background-position: 0 100%;
        left: 0;
        width: 45%
    }

    .carousel #slides>div.app_carousel:after,
    .carousel #slides>div.app_carousel:before {
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: absolute;
        z-index: -1
    }

    .carousel #slides>div.app_carousel:after {
        background-image: url(/images/slider_app_mobile_2.webp);
        background-position: 100% 0;
        bottom: 0;
        right: 0;
        width: 15%
    }

    .carousel #slides>div.app_carousel .banner_image {
        left: -2%
    }

    .carousel #slides>div.app_carousel .banner_image,
    .carousel #slides>div.app_carousel .banner_image_right {
        bottom: -40%;
        height: auto;
        max-width: 300px;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        width: 90%;
        z-index: -1
    }

    .carousel #slides>div.app_carousel .banner_image_right {
        right: -2%
    }

    @media screen and (max-width:1800px) {

        .carousel #slides>div.app_carousel .banner_image,
        .carousel #slides>div.app_carousel .banner_image_right {
            max-width: 350px
        }
    }

    @media screen and (max-width:1600px) {

        .carousel #slides>div.app_carousel .banner_image,
        .carousel #slides>div.app_carousel .banner_image_right {
            max-width: 250px
        }
    }

    @media screen and (max-width:1100px) {

        .carousel #slides>div.app_carousel .banner_image,
        .carousel #slides>div.app_carousel .banner_image_right {
            max-width: 150px
        }
    }

    @media screen and (max-width:900px) {
        .carousel #slides>div.app_carousel .banner_image {
            left: -7.5%;
            max-width: 225px
        }

        .carousel #slides>div.app_carousel .banner_image_right {
            max-width: 225px;
            right: -7.5%
        }
    }

    @media screen and (max-width:480px) {
        .carousel #slides>div.app_carousel .banner_image {
            left: -10%;
            max-width: 150px
        }

        .carousel #slides>div.app_carousel .banner_image_right {
            max-width: 150px;
            right: -10%
        }
    }

    .carousel::-webkit-scrollbar {
        display: none
    }

    .slider_pagination_container {
        align-items: center;
        bottom: 10%;
        display: flex;
        gap: 15px;
        justify-content: center;
        position: absolute !important;
        width: 100%;
        z-index: 19
    }

    .slider_pagination_container .pg_item {
        background-color: hsla(0, 0%, 100%, .3);
        border-radius: 6px;
        cursor: pointer;
        height: 4px;
        position: relative;
        transition: all .2s ease-in-out;
        width: 40px
    }

    .slider_pagination_container .pg_item .progress {
        animation: slider_pagination 5s linear 1;
        background-color: var(--text-white);
        border-radius: 50px;
        height: 100%;
        left: 0;
        opacity: 1;
        position: absolute;
        right: 0;
        z-index: 21
    }

    .slider_pagination_container .pg_item:hover {
        transform: scale(1.2)
    }

    .modal_container {
        align-items: center;
        display: flex;
        height: 100vh;
        justify-content: center;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 9999999999999
    }

    .modal_container .modal_mask {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        background: transparent;
        background: rgba(33, 35, 38, .6);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 20
    }

    .modal_container .mask-overlay {
        z-index: 20
    }

    .modal_alert_popup {
        align-items: center;
        background-color: var(--bg-main);
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        height: -moz-max-content;
        height: max-content;
        justify-content: center;
        max-height: 414px;
        max-width: 428px;
        padding: 24px;
        text-align: center;
        width: 85vw
    }

    .modal_alert_popup .success_alert_image {
        height: auto;
        max-width: 200px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .checkmark_container {
        align-items: center;
        cursor: pointer;
        display: flex;
        font-size: 15px;
        height: 18px;
        justify-content: flex-start;
        padding-left: 25px;
        position: relative;
        transition: all .3s ease-in-out;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .checkmark_container.primary .checkmark {
        border: 1px solid var(--stroke-light)
    }

    .checkmark_container.primary input:checked~.checkmark {
        background-color: var(--color_main_1)
    }

    .checkmark_container.secondary .checkmark {
        border: 1px solid var(--stroke-light)
    }

    .checkmark_container.secondary input:checked~.checkmark {
        background-color: var(--color_main_1)
    }

    .checkmark_container input {
        cursor: pointer;
        height: 0;
        opacity: 0;
        position: absolute;
        width: 0
    }

    .checkmark_container .checkmark {
        border-radius: 4px;
        height: 18px;
        left: 0;
        position: absolute;
        top: 0;
        transition: all .15s ease-in-out;
        width: 18px
    }

    .checkmark_container .checkmark:after {
        content: "";
        display: none;
        position: absolute
    }

    .checkmark_container input:checked~.checkmark:after {
        display: block
    }

    .checkmark_container .checkmark:after {
        border: solid var(--text-black);
        border-width: 0 2px 2px 0;
        height: 7px;
        left: 32.5%;
        top: 15%;
        transform: rotate(45deg);
        width: 3.5px
    }

    .checkmark_container.disabled {
        opacity: 50%;
        pointer-events: none
    }

    .lang_selector svg {
        height: 14px;
        transform: rotate(270deg);
        width: 14px
    }

    .lang_selector .lang_btn {
        border: 1px solid hsla(0, 0%, 100%, .15);
        border-radius: 21px;
        min-height: 38px;
        min-width: 38px;
        transition: all .2s ease
    }

    .lang_selector .lang_btn:hover {
        border: 1px solid var(--color_main_1)
    }

    .lang_selector .lang_btn.opened {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    .lang_selector button img {
        transform: rotate(90deg);
        transition: all .3s cubic-bezier(.4, .68, .07, .65)
    }

    .lang_selector button .language_image {
        border-radius: 2px;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        transform: rotate(0deg);
        /* width: 15px; */
    }

    .lang_selector button.opened img {
        transform: rotate(-90deg)
    }

    .lang_selector button.opened .language_image {
        transform: rotate(0deg)
    }

    .languages_container {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        background-color: var(--snack-bg);
        border-radius: 12px;
        bottom: 10px;
        height: calc(100vh - 20px);
        left: 0;
        max-height: calc(100vh - 20px);
        max-width: 250px;
        overflow: hidden;
        overflow-x: hidden;
        position: fixed;
        width: 100%;
        z-index: 99999999999
    }

    .languages_container .button_grid_container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: -moz-max-content;
        height: max-content;
        width: 100%;
        grid-column-gap: 9px;
        padding: 12px;
        grid-row-gap: 9px
    }

    .languages_container .button_grid_container .lang_change_btn {
        background-color: var(--bg-main);
        border: 1px solid transparent;
        border-radius: 9px;
        gap: 15px !important;
        justify-content: flex-start;
        padding: 12px
    }

    .languages_container .button_grid_container .lang_change_btn .language_image {
        border-radius: 4px;
        height: 16px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 24px
    }

    .languages_container .button_grid_container .lang_change_btn:hover {
        border: 1px solid var(--color_main_1)
    }

    .languages_container .button_grid_container .lang_change_btn.active {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    @media screen and (max-width:1200px) {
        .languages_container {
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            background: var(--Opacity-Dropdown-Nav, rgba(14, 15, 15, .92));
            border-radius: 12px 12px 0 0;
            border-top: 1px solid var(--stroke-medium, #27292b);
            bottom: 0;
            height: -moz-max-content;
            height: max-content;
            max-width: 100%;
            padding-bottom: 20px;
            right: 0;
            width: 100%
        }

        .languages_container .button_grid_container {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    .blog-banner {
        padding-bottom: 3.75vw;
        padding-top: 3.75vw
    }

    .available_for_order {
        border: 1px solid var(--white-opace);
        border-radius: 16px;
        color: var(--green);
        padding: 5px 12px
    }

    .available_for_order.working {
        color: var(--pink)
    }

    .multiselect_drop {
        align-items: center;
        display: flex;
        flex-direction: column;
        gap: 2vh;
        height: 100%;
        justify-content: center;
        position: relative;
        width: 100%
    }

    .multiselect_drop.large label {
        color: var(--text-gray)
    }

    .multiselect_drop.large .input_field_container {
        height: 48px
    }

    .multiselect_drop .drop-list-items {
        align-items: flex-start;
        background-color: var(--bg-medium);
        border: 1px solid var(--stroke-medium);
        border-radius: 9px;
        -moz-border-radius: 9px;
        -webkit-border-radius: 9px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        height: -moz-max-content;
        height: max-content;
        justify-content: flex-start;
        left: 0;
        max-height: 30vh;
        min-height: 100%;
        min-width: 140px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: .5rem;
        position: absolute;
        top: 80px;
        width: 100%;
        z-index: 4
    }

    .multiselect_drop .drop-list-items .imput-button1 {
        justify-content: flex-end
    }

    .multiselect_drop.secondary .drop-list-items {
        top: 50px
    }

    .multiselect_drop.secondary .input_field_container {
        background-color: transparent !important
    }

    .multiselect_drop.dropdown {
        background-color: var(--bg-medium);
        border: 1px solid var(--stroke-medium)
    }

    .multiselect_drop .multi_select_item {
        border-radius: 6px;
        -moz-border-radius: 6px;
        -webkit-border-radius: 6px;
        padding: 8px 9px;
        transition: all .2s ease
    }

    .multiselect_drop .multi_select_item:hover {
        background-color: var(--bg-extra-light)
    }

    .achievement_card,
    .testimonial_card {
        background-color: var(--bg-extra-dark);
        border-radius: 12px;
        height: -moz-max-content;
        height: max-content;
        padding: 18px
    }

    .testimonial_card {
        min-height: 250px
    }

    .testimonial_card .reviewers {
        margin-top: auto;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        -ms-overflow-style: none;
        max-width: 300px;
        position: relative
    }

    .testimonial_card .reviewers::-webkit-scrollbar {
        height: 0;
        width: 0
    }

    .testimonial_card .reviewers .reviewer {
        align-items: center;
        display: flex;
        flex-shrink: 0;
        justify-content: center;
        position: relative
    }

    .testimonial_card .reviewers .reviewer .progress {
        background: conic-gradient(from 0deg, var(--color_main_1) 0, var(--color_main_1) 0 var(--i), var(--bg-extra-light) var(--i), var(--bg-extra-light) 100%);
        border-radius: 50px;
        height: 100%;
        left: 50%;
        max-height: 40px;
        opacity: 1;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        z-index: 1
    }

    .testimonial_card .reviewers .reviewer .progress:before {
        background-color: var(--bg-main);
        border-radius: 50%;
        content: "";
        height: 85%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 85%
    }

    .testimonial_card .reviewers .reviewer_avatar {
        border-radius: 50%;
        cursor: pointer;
        padding: 4px;
        position: relative;
        z-index: 2
    }

    .testimonial_card .reviewers .active_review {
        border: 1.5px solid var(--stroke-orange, #a36730)
    }

    .testimonial_card .content_area {
        border-radius: 6px
    }

    .tooltip-container {
        height: -moz-max-content;
        height: max-content;
        position: relative;
        width: -moz-max-content;
        width: max-content
    }

    .tooltip-container .tooltip_section {
        opacity: 0;
        position: relative;
        z-index: 20
    }

    .tooltip-container.input-btn .tooltip-arrow {
        top: -20% !important
    }

    .tooltip-container.input-btn-received .tooltip-arrow {
        top: -24% !important
    }

    .tooltip-container .tooltip-custom {
        border: 1px solid hsla(0, 0%, 100%, .1);
        border-radius: 10px;
        -moz-border-radius: 10px;
        -webkit-border-radius: 10px;
        max-width: 237px;
        min-width: 250px;
        opacity: 1 !important;
        padding: 12px;
        pointer-events: none;
        position: absolute;
        text-align: left;
        transition: all .3s;
        white-space: normal;
        z-index: 9999
    }

    .tooltip-container .tooltip-custom * {
        z-index: 1
    }

    .tooltip-container .tooltip-custom:before {
        -webkit-backdrop-filter: blur(4.5500001907px);
        backdrop-filter: blur(4.5500001907px);
        background: rgba(5, 6, 7, .5);
        border-radius: 10px;
        box-shadow: 0 4px 20px 0 rgba(5, 6, 7, .8);
        content: "";
        height: 100%;
        inset: 3%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1
    }

    @media screen and (max-width:480px) {
        .tooltip-container .tooltip-custom {
            max-width: 300px;
            min-width: 150px
        }
    }

    @media screen and (max-width:900px) {
        .tooltip-container .tooltip-custom:after {
            transform: translate(-50%, -25%)
        }
    }

    .tooltip-container.small .tooltip-custom {
        text-align: center;
        white-space: normal
    }

    .tooltip-container.large .tooltip-custom {
        text-align: left;
        text-overflow: ellipsis;
        top: auto;
        white-space: pre-wrap;
        width: 300px
    }

    .tooltip-container.top .tooltip-custom {
        left: 50%;
        top: 0;
        transform: translate(-50%, -115%)
    }

    .tooltip-container.left .tooltip-custom {
        left: -3px;
        padding: 8px 9px;
        top: 0;
        transform: translate(-100%, -30%)
    }

    .tooltip-container.left .tooltip-custom:after {
        right: -53%;
        top: 50%;
        transform: translateY(-50%) rotate(270deg)
    }

    .tooltip-container.right .tooltip-custom {
        padding: 8px 9px;
        right: -5px;
        top: 0;
        transform: translate(100%, -30%)
    }

    .tooltip-container.right .tooltip-custom:after {
        left: -1.5%;
        top: 50%;
        transform: translate(-50%, -50%) rotate(90deg)
    }

    .tooltip-container.bottom .tooltip-custom {
        bottom: -120px;
        left: 50%;
        transform: translate(-50%)
    }

    .tooltip-container.bottom .tooltip-custom:after {
        left: 50%;
        top: -11px;
        transform: translate(-50%) rotate(180deg)
    }

    .tooltip-container.rank-btn-tooltip .tooltip-custom {
        top: -5%
    }

    .tooltip-container.rank-btn-small-tooltip .tooltip-custom {
        top: -3.5%
    }

    .tooltip-container:hover .tooltip_section {
        opacity: 1
    }

    .pop_over_container {
        align-items: center;
        display: flex;
        justify-content: flex-start;
        position: relative
    }

    .pop_over_container:hover {
        cursor: pointer
    }

    .backgroud_mask_drop {
        bottom: 0;
        left: 0;
        position: fixed;
        right: 0;
        top: 0;
        z-index: 1
    }

    .pop_item_container {
        display: flex;
        flex-direction: column;
        gap: 2vh;
        height: -moz-max-content;
        height: max-content;
        max-height: 318px;
        max-width: 60vw;
        overflow: auto;
        padding: 9px 9px 9px 15px;
        position: absolute;
        right: 0;
        top: 110%;
        width: -moz-max-content;
        width: max-content;
        z-index: 2;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .pop_item_container::-webkit-scrollbar {
        display: none
    }

    .pop_item_container.main {
        background: var(--snack-bg);
        gap: 0;
        min-width: 350px
    }

    .pop_item_container.main,
    .pop_item_container.main .selector {
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px
    }

    .pop_item_container.main .selector {
        cursor: pointer;
        padding: 9px 12px;
        width: 100%
    }

    .pop_item_container.main .selector.selected,
    .pop_item_container.main .selector:hover {
        background: var(--bg-extra-light)
    }

    .pop_item_container.notifications {
        background: var(--snack-bg);
        border-radius: 18px;
        -moz-border-radius: 18px;
        -webkit-border-radius: 18px;
        box-shadow: 0 11px 50px rgba(25, 31, 42, .13);
        gap: 0;
        max-height: 441px;
        max-width: 370px;
        min-width: 370px;
        overflow-x: hidden;
        overflow-y: auto;
        padding: 10px;
        width: -moz-max-content;
        width: max-content
    }

    .pop_item_container.notifications .selector {
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        cursor: pointer;
        padding: 8px;
        position: relative
    }

    .pop_item_container.notifications .selector:hover {
        background: var(--bg-extra-light)
    }

    .pop_item_container.notifications .selector .notification-img {
        border-radius: 54px;
        -moz-border-radius: 54px;
        -webkit-border-radius: 54px;
        height: 54px;
        width: 54px
    }

    @media screen and (max-width:768px) {
        .pop_item_container.notifications {
            max-width: 60vw;
            min-width: 60vw
        }
    }

    @media screen and (max-width:440px) {
        .pop_item_container.notifications {
            max-width: 75vw;
            min-width: 75vw;
            right: -140%
        }
    }

    .stripe-service-button {
        display: none;
        width: 100%
    }

    .stripe-service-button.visible {
        display: block
    }

    .user_online_avatar {
        align-items: center;
        display: flex;
        justify-content: center;
        position: relative
    }

    .user_online_avatar:after {
        background-color: var(--green);
        border: 3px solid var(--color_main_2);
        border-radius: 50%;
        bottom: 0;
        content: "";
        height: 9px;
        position: absolute;
        right: 0;
        width: 9px
    }

    .flag_icon {
        border-radius: 5px
    }

    .adjust-order-container {
        align-items: center;
        display: flex;
        height: 100vh;
        justify-content: center;
        left: 0;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 20
    }

    .adjust-order-container .adjust_creds_mask {
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        background: transparent;
        background: rgba(33, 35, 38, .6);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: 20
    }

    .adjust-order-container .adjust-order-overlay {
        background-color: var(--bg-main);
        height: 100vh;
        padding: 24px;
        position: absolute;
        right: 0;
        top: 0;
        width: 50%;
        z-index: 21
    }

    @media screen and (max-width:900px) {
        .adjust-order-container .adjust-order-overlay {
            width: 90%
        }
    }

    .policy_list_2 {
        padding-top: 5px
    }

    .policy_list_2 p b {
        color: var(--color_main_1)
    }

    .policy_list_2 li {
        line-height: 1.5;
        margin-bottom: 16px;
        margin-left: 16px
    }

    .policy_list_2 li::marker {
        color: var(--text-white);
        font-variant-numeric: tabular-nums;
        text-align: start !important;
        -moz-text-align-last: start !important;
        text-align-last: start !important;
        text-indent: 0 !important;
        text-transform: none;
        unicode-bidi: isolate
    }

    .policy_list_2 li a {
        font-weight: 600;
        text-decoration: underline
    }

    .pagination {
        align-items: center;
        display: flex;
        gap: 10px;
        justify-content: flex-start;
        margin: auto 0;
        transition: all .2s ease;
        width: 100%
    }

    .pagination li {
        list-style: none
    }

    .pagination .pagination-btn {
        background-color: transparent;
        height: 20px;
        width: 20px
    }

    .pagination .pagination-btn:hover svg path {
        fill: var(--color_main_1)
    }

    .pagination .pagination-btn:disabled {
        background-color: transparent !important;
        opacity: .5
    }

    .pagination .pagination-item {
        border: 1px solid transparent;
        color: var(--text-white);
        padding: 3.5px 7px
    }

    .pagination .pagination-item.disabled_pagination {
        padding: 0;
        pointer-events: none
    }

    .pagination .pagination-item.active {
        border: 1px solid var(--color_main_1);
        border-radius: 9px;
        color: var(--text-white);
        padding: 7px 14px
    }

    .profile_platform_image {
        filter: brightness(55%)
    }

    .stars input {
        position: absolute;
        clip: rect(0, 0, 0, 0);
        display: none
    }

    .stars label {
        background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='transparent' stroke='orange' stroke-width='38' d='M259.216 29.942L330.27 173.92l158.89 23.087L374.185 309.08l27.145 158.23-142.114-74.698-142.112 74.698 27.146-158.23L29.274 197.007l158.89-23.088z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
        box-sizing: border-box;
        cursor: pointer;
        display: inline-block;
        font-size: 0;
        height: 16px;
        margin-right: 6px;
        width: 16px
    }

    .stars input:first-child:checked~label:nth-of-type(-n+1),
    .stars input:nth-child(2):checked~label:nth-of-type(-n+2),
    .stars input:nth-child(3):checked~label:nth-of-type(-n+3),
    .stars input:nth-child(4):checked~label:nth-of-type(-n+4),
    .stars input:nth-child(5):checked~label:nth-of-type(-n+5) {
        background: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='orange' stroke='orange' stroke-width='38' d='M259.216 29.942L330.27 173.92l158.89 23.087L374.185 309.08l27.145 158.23-142.114-74.698-142.112 74.698 27.146-158.23L29.274 197.007l158.89-23.088z' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    }

    .carousel_container {
        align-items: center;
        display: flex;
        height: 100%;
        justify-content: space-between;
        min-height: 70vh;
        overflow: hidden;
        padding: 0 3vw;
        position: relative;
        width: 100%
    }

    .carousel_container .pagination_container {
        align-items: flex-start;
        display: flex;
        flex: 0.05;
        flex-direction: column;
        gap: 18px;
        height: 100%;
        justify-content: space-between
    }

    .carousel_container .pagination_container .pg_item {
        background-color: var(--color_main_2);
        border-radius: 6px;
        cursor: pointer;
        height: 80px;
        position: relative;
        transition: all .25s ease-in-out;
        width: 3px
    }

    .carousel_container .pagination_container .pg_item .progress {
        animation: slider_pagination_vertical 6s linear 1;
        background-color: var(--color_main_1);
        border-radius: 50px;
        left: 0;
        position: absolute;
        right: 0;
        width: 3px
    }

    .carousel_container .content_container {
        align-items: center;
        display: flex;
        flex: 0.95;
        height: 100%;
        justify-content: space-between;
        width: 100%
    }

    .carousel_container .content_container .item_detail {
        align-items: flex-start;
        display: flex;
        flex: 1;
        flex-direction: column;
        gap: 16px;
        height: 100%;
        justify-content: space-between
    }

    .carousel_container .content_container .item_detail .carousel_title span {
        color: var(--light-orange) !important
    }

    @media screen and (max-width:600px) {
        .carousel_container .content_container .item_detail .carousel_title.index-1 br {
            content: " ";
            display: inline;
            margin-left: 6px
        }
    }

    .carousel_container .content_container .item_image {
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        width: 55%
    }

    @media screen and (max-width:768px) {
        .carousel_container .content_container {
            flex-direction: column
        }

        .carousel_container .content_container .item_detail {
            margin-bottom: 2vh
        }

        .carousel_container .content_container .item_image {
            width: 100%
        }
    }

    @media screen and (max-width:600px) {
        .carousel_container {
            margin-top: 2.5vh
        }
    }

    @media screen and (max-width:768px) {
        .footer-link {
            /* height: 48px; */
            min-width: 48px
        }
    }

    .safe_secure_payments {
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        padding: 12px
    }

    .safe_secure_payments .payment_method {
        border: none;
        border-radius: 7px;
        display: flex;
        height: 24px;
        padding: 0;
        width: 24px
    }

    .safe_secure_payments .payment_method img,
    .safe_secure_payments .safe_secure_image {
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .safe_secure_payments .safe_secure_image {
        max-width: 113px
    }

    .raid_chip {
        align-items: center;
        background: var(--Opacity-BG, rgba(5, 6, 7, .5));
        border: 1px solid var(--wow, #f4bf2a);
        border-radius: 25px;
        display: flex;
        gap: 10px;
        justify-content: center;
        padding: 6px 12px;
        z-index: 1
    }

    .raid_chip svg path {
        fill: var(--text-white)
    }

    .raid_chip.index-1 {
        background: rgba(244, 191, 42, .15)
    }

    .kye_verification {
        background-color: var(--color_main_2) !important;
        max-width: 265px !important;
        min-height: 75px
    }

    @media screen and (max-width:786px) {
        .kye_verification {
            max-width: 100% !important
        }
    }

    .vue-tel-input {
        height: 48px;
        width: 100%
    }

    .vue-tel-input .vti__input {
        background-color: var(--bg-medium);
        color: #fff
    }

    .vue-tel-input .vti__dropdown,
    .vue-tel-input .vti__input {
        border: 1px solid var(--stroke-medium);
        border-radius: 6px;
        cursor: pointer;
        padding: 0 15px;
        transition: all .2s ease-in-out
    }

    .warning-block {
        height: 60px;
        left: 50%;
        max-width: 450px;
        position: fixed;
        top: 0;
        transform: translate(-50%);
        z-index: 20
    }

    .maintenance-banner,
    .warning-block {
        background-color: #0a0b0d;
        border-radius: 8px;
        padding: 12px
    }

    .maintenance-banner {
        border: 1px solid var(--yellow);
        height: -moz-max-content;
        height: max-content;
        z-index: 1
    }

    .maintenance-banner,
    .maintenance-banner.mobile {
        max-width: 90vw;
        position: relative
    }

    .notification_loader {
        animation: l13 1s linear infinite;
        aspect-ratio: 1;
        background: radial-gradient(farthest-side, #ffa516 94%, transparent) top/4px 4px no-repeat, conic-gradient(transparent 30%, #ffa516);
        border-radius: 50%;
        -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0);
        width: 25px
    }

    @keyframes l13 {
        to {
            transform: rotate(1turn)
        }
    }

    .user_note {
        background-color: #fff7c2;
        border-radius: 16px 16px 16px 0;
        padding: 10px 18px 10px 24px
    }

    .mobile_banner {
        align-items: center;
        border-radius: 12px;
        display: flex;
        flex-direction: row;
        height: 100%;
        justify-content: center;
        margin-bottom: 100px;
        margin-top: 150px;
        min-height: 300px;
        overflow: hidden;
        padding-top: 16px;
        position: relative;
        width: 100%
    }

    .mobile_banner .background {
        background-color: #0e1012;
        background-image: url(/images/mobile_app_banner_bg.webp);
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: 100% 300px;
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -2
    }

    .mobile_banner .close_btn {
        align-items: center;
        background-color: var(--white-opace);
        border-radius: 50%;
        display: flex;
        height: 34px;
        justify-content: center;
        position: absolute;
        right: 12px;
        top: 12px;
        width: 34px
    }

    .mobile_banner .content {
        max-height: 300px
    }

    .mobile_banner:before {
        background-image: url(/images/slider_app_mobile_1.webp);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        left: 0;
        max-height: 300px;
        position: absolute;
        top: 0;
        width: 100%;
        z-index: -1
    }

    .mobile_banner .image_item {
        max-height: 300px;
        min-height: 300px;
        position: relative;
        z-index: -1
    }

    .mobile_banner .image_item .banner_image {
        left: 0
    }

    .mobile_banner .image_item .banner_image,
    .mobile_banner .image_item .banner_image_right {
        bottom: -150px;
        height: auto;
        max-width: 350px;
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        width: 100%
    }

    .mobile_banner .image_item .banner_image_right {
        right: 0
    }

    .mobile_banner:after {
        background-image: url(/images/slider_app_mobile_2.webp);
        background-position: 100% 0;
        background-repeat: no-repeat;
        background-size: contain;
        bottom: 0;
        content: "";
        height: 100%;
        max-width: 75px;
        position: absolute;
        right: 0;
        width: 10%;
        z-index: -1
    }

    .mobile_banner .mobile_images_container {
        display: none
    }

    @media screen and (max-width:1100px) {
        .mobile_banner {
            flex-direction: column;
            justify-content: flex-start;
            margin-bottom: 10vh;
            margin-top: 12vh;
            min-height: 520px
        }

        .mobile_banner .background {
            background-size: cover
        }

        .mobile_banner .image_item {
            display: none
        }

        .mobile_banner .content {
            flex: 1 !important
        }

        .mobile_banner .mobile_images_container {
            display: flex;
            height: -moz-max-content;
            height: max-content;
            max-height: 220px;
            min-height: 220px;
            width: 100%
        }

        .mobile_banner .mobile_images_container .left_image {
            align-items: flex-start;
            justify-content: flex-start;
            min-height: 220px;
            position: relative;
            width: 50%
        }

        .mobile_banner .mobile_images_container .left_image .app_banner_image {
            bottom: -40%;
            height: auto;
            left: -20%;
            min-width: 220px;
            -o-object-fit: contain;
            object-fit: contain;
            position: absolute;
            width: 100%
        }

        .mobile_banner .mobile_images_container .right_image {
            align-items: flex-start;
            justify-content: flex-start;
            min-height: 220px;
            position: relative;
            width: 50%
        }

        .mobile_banner .mobile_images_container .right_image .app_banner_image {
            bottom: -40%;
            height: auto;
            min-width: 220px;
            -o-object-fit: contain;
            object-fit: contain;
            position: absolute;
            right: -20%;
            width: 100%
        }
    }

    .mobile_banner.small {
        justify-content: space-between;
        margin-bottom: 20px;
        margin-top: 0
    }

    .mobile_banner.small .image_item .banner_image_right {
        right: -80px;
        width: 170%
    }

    .mobile_banner.small .image_item .banner_image {
        left: -80px;
        width: 170%
    }

    .cb_con {
        align-items: flex-start;
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-medium);
        border-radius: 16px;
        bottom: 2%;
        display: flex !important;
        flex-direction: column;
        gap: 24px;
        height: -moz-max-content;
        height: max-content;
        justify-content: flex-start;
        left: 2%;
        max-width: 480px;
        padding: 24px;
        position: fixed;
        width: 96%;
        z-index: 9999999999
    }

    .season_length_container {
        max-width: 655px
    }

    .season_length_container .progress-container {
        align-items: center;
        display: flex;
        gap: 2px;
        justify-content: space-between;
        width: 100%
    }

    .season_length_container .progress-container .progress-item {
        background-color: var(--bg-extra-light);
        border-radius: 3px;
        height: 28px;
        width: 6px;
        transform: rotate(31deg);
    }

    .season_length_container .progress-container .progress-item.active {
        background-color: var(--color_main_1)
    }

    @media screen and (max-width:1200px) {
        .season_length_container {
            max-width: 100%
        }
    }

    .why_we_cheap {
        background: var(--opacity-top-navigation, rgba(8, 9, 10, .6));
        border: 1px solid var(--stroke-dark);
        border-radius: 12px;
        gap: 30px;
        max-width: 350px
    }

    .why_we_cheap .piggy_bank {
        height: auto;
        max-width: 122px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .why_we_cheap p {
        padding: 11px 0 11px 18px
    }

    @media screen and (max-width:1200px) {
        .why_we_cheap {
            max-width: 100%
        }
    }

    .why_we_cheap_modal {
        align-items: flex-start;
        background: var(--color_main_2);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 24px;
        height: 90vh;
        justify-content: space-between;
        max-height: 680px;
        max-width: 1322px;
        padding: 24px 48px;
        width: 90vw
    }

    .why_we_cheap_modal .content {
        overflow: auto
    }

    .why_we_cheap_modal .reason_image {
        height: auto;
        max-width: 320px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        gap: 15px;
        height: 100%;
        justify-content: flex-start;
        max-width: 320px;
        min-height: 315px;
        padding: 18px 10px 20px;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .price_items {
        align-items: flex-start;
        display: flex;
        gap: 25px;
        height: 100%;
        justify-content: flex-start;
        min-height: 244px;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .price_items .price_item {
        align-items: flex-end;
        background-image: url(/images/cheap/price_comparison_bg.webp);
        background-position: 50%;
        background-size: cover;
        border-radius: 20px;
        display: flex;
        flex: 0.5;
        justify-content: flex-end;
        min-height: 245px;
        width: 50%
    }

    .why_we_cheap_modal .price_comparison_container .price_items .price_item .price_description {
        align-items: center;
        background: rgba(255, 158, 72, .06);
        border: 2px solid var(--orange, #ff9e48);
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        gap: 6px;
        justify-content: center;
        min-height: 115px;
        position: relative;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .price_items .price_item .price_description:before {
        border: 2px solid var(--orange, #ff9e48);
        border-radius: 20px;
        content: "";
        filter: blur(5.6500000954px);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .price_items .price_item .platform_logo {
        height: auto;
        max-width: 41px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .price_items .price_item .price_description_other {
        align-items: center;
        background: rgba(255, 158, 72, .06);
        border: 2px solid #f7595c;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 215px;
        position: relative;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .price_items .price_item .price_description_other .platform_logo {
        max-width: 54px
    }

    .why_we_cheap_modal .price_comparison_container .price_items .price_item .price_description_other:before {
        border: 2px solid #f7595c;
        border-radius: 20px;
        content: "";
        filter: blur(5.5999999046px);
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .comparison_title {
        align-items: center;
        display: flex;
        gap: 25px;
        justify-content: space-between;
        width: 100%
    }

    .why_we_cheap_modal .price_comparison_container .comparison_title .price_chip {
        height: auto;
        max-width: 115px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    @media screen and (max-width:500px) {
        .why_we_cheap_modal {
            max-height: 90vh;
            max-width: 90vw
        }

        .why_we_cheap_modal .price_comparison_container .price_items {
            gap: 15px
        }
    }

    :root {
        --orange: #ff9e48;
        --cion: #4fede3;
        --pink: #fe64ca;
        --green: #c4ed4f;
        --blue: #48e4ff;
        --violet: #9a6aff;
        --yellow: #ffd600;
        --time: #4e4e4e;
        --red: #f7595c;
        --light-blue: #b8f5ff;
        --light-green: #ebffb2;
        --light-orange: #ffdcb3;
        --light-violet: #cdb6ff;
        --dark-orange: #21160b;
        --text-white: #fff;
        --text-light: #cbcbcb;
        --text-gray: #9a9a9a;
        --text-black: #050607;
        --text-gray-dark: #666;
        --button-disable: #666;
        --button-orange: #ff9e48;
        --button-blue: #48e4ff;
        --button-orange-hover: #ffb370;
        --button-blue-hover: #84edff;
        --stroke-light: #45494d;

        /* --stroke-medium: #27292b; */
        --stroke-medium: var(--color_main_2_2);


        /* --stroke-dark: #17181a; */
        --stroke-dark: var(--color_main_2_2);


        --stroke-orange: #a36730;
        --stroke-blue: #307e8c;

        /* --snack-bg: rgba(14, 15, 15, .92); */
        --snack-bg: var(--color_main_2_2);

        /* --bg-main: #050607; */
        --bg-main: var(--color_main_base);
        /* --bg-medium: #121314; */
        --bg-medium: var(--color_main_2_2);


        --bg-light: #17181a;


        /* --bg-extra-dark: #08090a; */
        --bg-extra-dark: var(--color_main_2_2);



        --bg-extra-light: #202224;
        --apex: #fc485a;
        --lol: #158a9b;
        --val: #ff5261;
        --r6s: #c49e2c;
        --overwatch-2: #fa7024;
        --cs2: #fa7024;
        --rocket-league: #e9852d;
        --dota2: #d43d32;
        --fortnite: #ae66ff;
        --teamfight: #7e73ff;
        --thefinals: #d31f3c;
        --wow: #efc02e;
        --green-opace: rgba(196, 237, 79, .1);
        --button-opace: rgba(196, 237, 79, .18);
        --navigation-opace: rgba(18, 19, 20, .6);
        --tags-opace: rgba(18, 19, 20, .6);
        --orange-opace: rgba(255, 158, 72, .12);
        --blue-opace: rgba(67, 227, 255, .1);
        --bg-opace: rgba(5, 6, 7, .5);
        --white-opace: hsla(0, 0%, 100%, .08);





        --opacity-top-navigation: rgba(8, 9, 10, .6);
        --apex-card: #f75e34;
        --lol-card: #0fa2b7;
        --val-card: #ff5261;
        --overwatch-2-card: #fa7024;
        --teamfight-card: #7e73ff;
        --r6s-card: #aea896;
        --rocket-league-card: linear-gradient(206.12deg, #fe9004 10.32%, #0067dd 88.63%);
        --cs2-card: #ff6b1b;
        --dota2-card: #df1c19;
        --wow-card: #8c3d1c;
        --destiny2-card: #476114;
        --fortnite-card: #8d2b8a;
        --cod-card: #896f4c;
        --thefinals-card: #d31f3c;
        --danger: #fc485a;
        --danger-hover: #f75868;
        --danger-opace: rgba(247, 88, 104, .1);
        --gradient: linear-gradient(97deg, #77f9a2 0.35%, #65eda9 26.82%, #59e8cb 51.35%, #57cfe9 74.83%, #47ade2 100.56%);
        --danger-ring: #3e2428
    }

    a,
    button {
        align-items: center;
        background: none;
        border: none;
        color: inherit;
        cursor: pointer;
        display: flex;
        font: inherit;
        justify-content: center;
        outline: inherit;
        padding: 0;
        transition: all .2s ease-in-out;
        -webkit-touch-callout: none;
        position: relative;
        text-decoration: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none
    }

    .blog-content a, 
    .blog-content button{
        justify-content: start !important;
        align-items: start !important;
    }

    a.height-48,
    button.height-48 {
        height: 48px
    }

    a.height-42,
    button.height-42 {
        height: 42px
    }

    a.height-36,
    button.height-36 {
        height: 36px
    }

    a.height-30,
    button.height-30 {
        height: 30px
    }

    a.height-40,
    button.height-40 {
        height: 40px
    }

    a.height-38,
    button.height-38 {
        height: 38px
    }

    a.height-54,
    button.height-54 {
        height: 54px
    }

    a.height-24,
    button.height-24 {
        height: 24px
    }

    a.width-40,
    button.width-40 {
        width: 40px
    }

    a.width-36,
    button.width-36 {
        width: 36px
    }

    a.width-80,
    button.width-80 {
        width: 80px
    }

    a.width-100,
    button.width-100 {
        width: 100px
    }

    a.width-120,
    button.width-120 {
        width: 120px
    }

    a.max-width-100px,
    button.max-width-100px {
        max-width: 100px
    }

    a.max-width-302px,
    button.max-width-302px {
        max-width: 302px
    }

    a.max-width-140px,
    button.max-width-140px {
        max-width: 140px
    }

    a.max-width-213px,
    button.max-width-213px {
        max-width: 213px
    }

    a.max-width-250px,
    button.max-width-250px {
        max-width: 250px
    }

    a.max-width-150px,
    button.max-width-150px {
        max-width: 150px
    }

    a.max-width-160px,
    button.max-width-160px {
        max-width: 160px
    }

    a.max-width-180px,
    button.max-width-180px {
        max-width: 180px
    }

    a.circular,
    button.circular {
        border-radius: 50%
    }

    a.full-width,
    button.full-width {
        width: 100%
    }

    a.large,
    a.xl,
    a.xxl,
    button.large,
    button.xl,
    button.xxl {
        padding: 10px 24px
    }

    a.medium,
    button.medium {
        padding: 10px 18px
    }

    a.small,
    button.small {
        padding: 4px 12px
    }

    a.other,
    button.other {
        padding: 9px 11px
    }

    a.icon,
    button.icon {
        height: 28px;
        width: 28px
    }

    a.disabled,
    a:disabled,
    button.disabled,
    button:disabled {
        opacity: .35;
        pointer-events: none
    }

    a.gradient,
    button.gradient {
        background: var(--gradient);
        border-radius: 9px;
        color: var(--text-black)
    }

    a.dark_icon svg path,
    button.dark_icon svg path {
        fill: var(--text-black) !important
    }

    a.copy_btn,
    button.copy_btn {
        background-color: var(--bg-medium);
        border-radius: 6px
    }

    a.copy_btn:hover,
    button.copy_btn:hover {
        background-color: var(--bg-extra-light)
    }

    a.copy_btn:hover svg path,
    button.copy_btn:hover svg path {
        fill: var(--color_main_1)
    }

    a.chat_btn,
    button.chat_btn {
        background-color: var(--bg-medium);
        border-radius: 6px
    }

    a.primary.filled,
    button.primary.filled {
        background-color: var(--color_main_1);
        color: var(--text-black)
    }

    a.primary.filled:hover,
    button.primary.filled:hover {
        background-color: var(--button-orange-hover)
    }

    a.primary.outlined-color,
    button.primary.outlined-color {
        background-color: var(--bg-main);
        border: 1px solid var(--color_main_1);
        color: var(--text-white)
    }

    a.primary.outlined-color.active,
    a.primary.outlined-color:hover,
    button.primary.outlined-color.active,
    button.primary.outlined-color:hover {
        background-color: var(--color_main_1);
        color: var(--text-black)
    }

    a.primary.outlined-grey,
    button.primary.outlined-grey {
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-dark);
        color: var(--color_main_1)
    }

    a.primary.outlined-grey:hover,
    button.primary.outlined-grey:hover {
        border: 1px solid var(--color_main_1)
    }

    a.primary.opacity,
    button.primary.opacity {
        background-color: var(--color_main_2);
        color: var(--color_main_1)
    }

    a.primary.opacity:hover,
    button.primary.opacity:hover {
        background-color: var(--color_main_1);
        color: var(--text-dark)
    }

    a.primary.plain,
    button.primary.plain {
        background-color: transparent;
        color: var(--color_main_1)
    }

    a.primary.plain:hover,
    button.primary.plain:hover {
        color: var(--button-orange-hover)
    }

    a.secondary.filled,
    button.secondary.filled {
        background-color: var(--color_main_1);
        color: var(--text-black)
    }

    a.secondary.filled:hover,
    button.secondary.filled:hover {
        color: white
    }

    a.secondary.outlined-color,
    button.secondary.outlined-color {
        background-color: var(--bg-main);
        border: 1px solid var(--color_main_1);
        color: var(--text-white)
    }

    a.secondary.outlined-color:hover,
    button.secondary.outlined-color:hover {
        background-color: var(--color_main_1);
        color: var(--text-black)
    }

    a.secondary.outlined-grey,
    button.secondary.outlined-grey {
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-dark);
        color: var(--color_main_1)
    }

    a.secondary.outlined-grey:hover,
    button.secondary.outlined-grey:hover {
        border: 1px solid var(--color_main_1)
    }

    a.secondary.opacity,
    button.secondary.opacity {
        background-color: var(--color_main_1);
        color: white
    }

    a.secondary.opacity:hover,
    button.secondary.opacity:hover {
        background-color: var(--color_main_1);
        color: var(--text-black) !important
    }

    a.secondary.opacity:hover>*,
    button.secondary.opacity:hover>* {
        color: var(--text-black) !important
    }

    a.secondary.option,
    button.secondary.option {
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-dark);
        color: var(--text-light)
    }

    a.secondary.option:hover,
    button.secondary.option:hover {
        border: 1px solid var(--color_main_1)
    }

    a.secondary.option.active,
    button.secondary.option.active {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    a.secondary.plain,
    button.secondary.plain {
        background-color: transparent;
        color: var(--color_main_1)
    }

    a.secondary.plain:hover,
    button.secondary.plain:hover {
        color: var(--color_main_1)
    }

    a.danger.filled,
    button.danger.filled {
        background-color: var(--danger);
        color: var(--text-black)
    }

    a.danger.filled:hover,
    button.danger.filled:hover {
        background-color: var(--danger-hover)
    }

    a.dark.opacity,
    button.dark.opacity {
        background-color: var(--navigation-opace);
        border: 1px solid var(--stroke-dark);
        color: var(--text-white)
    }

    a.dark.opacity._plain,
    button.dark.opacity._plain {
        background-color: transparent
    }

    a.dark.opacity:hover,
    button.dark.opacity:hover {
        color: var(--text-white)
    }

    a.dark.tab,
    button.dark.tab {
        background-color: var(--navigation-opace);
        border: 1px solid var(--stroke-dark);
        color: var(--text-light)
    }

    a.dark.tab._plain,
    button.dark.tab._plain {
        background-color: transparent
    }

    .dropdown a.dark.tab.drop_down_search,
    .dropdown button.dark.tab.drop_down_search,
    .dropdown.variant-primary a.dark.tab.item,
    .dropdown.variant-primary a.dark.tab.placeholder,
    .dropdown.variant-primary a.dark.tab.selected_item,
    .dropdown.variant-primary button.dark.tab.item,
    .dropdown.variant-primary button.dark.tab.placeholder,
    .dropdown.variant-primary button.dark.tab.selected_item,
    .dropdown.variant-transparent a.dark.tab.item,
    .dropdown.variant-transparent a.dark.tab.placeholder,
    .dropdown.variant-transparent a.dark.tab.selected_item,
    .dropdown.variant-transparent button.dark.tab.item,
    .dropdown.variant-transparent button.dark.tab.placeholder,
    .dropdown.variant-transparent button.dark.tab.selected_item,
    .input_field .input_field_container a.dark.tab.input_field,
    .input_field .input_field_container button.dark.tab.input_field,
    .pagination a.dark.tab.pagination-elpises,
    .pagination button.dark.tab.pagination-elpises,
    .single-blog a.dark.tab.single-blog-menu,
    .single-blog button.dark.tab.single-blog-menu,
    .tooltip-container a.dark.tab.tooltip-custom,
    .tooltip-container button.dark.tab.tooltip-custom,
    a.dark.tab.date_picker,
    a.dark.tab.dropdown,
    a.dark.tab.t-white,
    a.dark.tab.textarea,
    button.dark.tab.date_picker,
    button.dark.tab.dropdown,
    button.dark.tab.t-white,
    button.dark.tab.textarea {
        color: var(--text-white)
    }

    a.dark.tab.active_tab,
    a.dark.tab:hover,
    button.dark.tab.active_tab,
    button.dark.tab:hover {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1);
        color: var(--text-white)
    }

    a.dark.orange,
    button.dark.orange {
        background-color: var(--navigation-opace);
        color: var(--color_main_1)
    }

    a.dark.orange:hover,
    button.dark.orange:hover {
        background-color: var(--color_main_1);
        color: var(--text-dark)
    }

    a.dark.plain,
    button.dark.plain {
        background-color: transparent
    }

    a.dark.plain svg,
    button.dark.plain svg {
        height: 18px;
        width: 18px
    }

    a.dark.plain.hover,
    button.dark.plain.hover {
        border: 1px solid transparent
    }

    a.dark.plain.hover.active_tab,
    a.dark.plain.hover:hover,
    button.dark.plain.hover.active_tab,
    button.dark.plain.hover:hover {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1);
        color: var(--text-white)
    }

    a.dark.tab_plain,
    button.dark.tab_plain {
        background-color: transparent;
        color: var(--text-gray-dark)
    }

    a.dark.tab_plain svg,
    button.dark.tab_plain svg {
        filter: saturate(0);
        height: 24px;
        width: 24px
    }

    a.dark.tab_plain._white,
    button.dark.tab_plain._white {
        color: var(--text-white)
    }

    a.dark.tab_plain._orange,
    button.dark.tab_plain._orange {
        filter: saturate(1)
    }

    a.dark.tab_plain._orange.active_tab,
    a.dark.tab_plain._orange:hover,
    button.dark.tab_plain._orange.active_tab,
    button.dark.tab_plain._orange:hover {
        color: var(--color_main_1)
    }

    a.dark.tab_plain._orange.active_tab svg,
    a.dark.tab_plain._orange:hover svg,
    button.dark.tab_plain._orange.active_tab svg,
    button.dark.tab_plain._orange:hover svg {
        filter: saturate(1)
    }

    a.dark.tab_plain._orange.active_tab svg path,
    a.dark.tab_plain._orange:hover svg path,
    button.dark.tab_plain._orange.active_tab svg path,
    button.dark.tab_plain._orange:hover svg path {
        fill: var(--color_main_1)
    }

    a.dark.tab_plain.active_tab,
    a.dark.tab_plain:hover,
    button.dark.tab_plain.active_tab,
    button.dark.tab_plain:hover {
        color: var(--text-white)
    }

    a.dark.tab_plain.active_tab svg,
    a.dark.tab_plain:hover svg,
    button.dark.tab_plain.active_tab svg,
    button.dark.tab_plain:hover svg {
        filter: saturate(1)
    }

    a.dark.tab_plain.active_tab_orange,
    button.dark.tab_plain.active_tab_orange {
        color: var(--color_main_1)
    }

    a.dark.tab_plain.active_tab_orange svg,
    button.dark.tab_plain.active_tab_orange svg {
        filter: saturate(1)
    }

    a.server_select,
    button.server_select {
        background-color: var(--color_main_2);
        border: 1px solid transparent;
        border-radius: 6px;
        color: var(--text-light);
        justify-content: flex-start;
        min-height: 37px;
        padding: 9px 12px
    }

    a.server_select:hover,
    button.server_select:hover {
        border: 1px solid var(--stroke-orange, #a36730)
    }

    a.server_select.active,
    button.server_select.active {
        background: var(--dark-orange, #21160b);
        border: 1px solid var(--stroke-orange, #a36730)
    }

    a.discord_button,
    button.discord_button {
        background: #5865f2
    }

    a.steam_button,
    button.steam_button {
        background: #31353a
    }

    a.flip_icon svg,
    button.flip_icon svg {
        transform: rotate(-90deg)
    }

    a.loading,
    button.loading {
        font-size: 0 !important;
        pointer-events: none
    }

    a.loading>*,
    button.loading>* {
        font-size: 0 !important
    }

    a.loading:after,
    button.loading:after {
        animation: loading-rotate 1s linear infinite;
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='21' fill='none'%3E%3Cpath fill='%23fff' d='M10.469 5.179a2.34 2.34 0 1 0 0-4.679 2.34 2.34 0 0 0 0 4.679M10.469 20.5a1.403 1.403 0 1 0 0-2.807 1.403 1.403 0 0 0 0 2.807M4.72 7.326a2.105 2.105 0 1 0 0-4.21 2.105 2.105 0 0 0 0 4.21M16.217 17.884a1.17 1.17 0 1 0 0-2.34 1.17 1.17 0 0 0 0 2.34M2.34 12.84a1.871 1.871 0 1 0 0-3.742 1.871 1.871 0 0 0 0 3.742M18.597 11.902a.935.935 0 1 0 0-1.87.935.935 0 0 0 0 1.87M3.563 15.559a1.636 1.636 0 1 0 2.315 2.315c.64-.64.64-1.675 0-2.315a1.63 1.63 0 0 0-2.315 0M16.216 5.921a.701.701 0 1 0 0-1.402.701.701 0 0 0 0 1.402'/%3E%3C/svg%3E");
        background-repeat: no-repeat;
        background-size: contain;
        border-radius: 50%;
        bottom: 0;
        content: "";
        height: 20px;
        left: 0;
        margin: auto;
        position: absolute;
        right: 0;
        top: 0;
        width: 20px
    }

    .upload_avatar_button {
        align-items: center;
        background-color: var(--color_main_1);
        cursor: pointer;
        display: flex;
        justify-content: center;
        padding: 10px 18px;
        width: 140px
    }

    .upload_avatar_button:hover {
        background-color: var(--button-orange-hover)
    }

    .custom_order_mmo {
        border: 1px solid var(--stroke-dark, #17181a);
        border-radius: 6px;
        flex-direction: column;
        height: -moz-max-content;
        height: max-content;
        min-height: 54px;
        overflow: hidden;
        padding: 0 12px;
        position: relative
    }

    .custom_order_mmo:after {
        background: var(--bg-opace, rgba(5, 6, 7, .5));
        background-image: url(/img/games/world-of-warcraft-boost/customer_order_bg.webp);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: absolute;
        width: 100%;
        z-index: -2
    }

    .custom_order_mmo .custom_order_icon {
        height: auto;
        max-width: 72px;
        -o-object-fit: contain;
        object-fit: contain;
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 100%;
        z-index: -1
    }

    @media screen and (max-width:1440px) {
        .custom_order_mmo .custom_order_icon {
            opacity: .5
        }
    }

    .select_game_button img {
        filter: brightness(0);
        height: 16px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 16px
    }

    .download_app_store {
        background-color: var(--text-white);
        border-radius: 9px;
        min-height: 48px;
        overflow: hidden;
        padding: 10px 20px;
        position: relative
    }

    .download_app_store .comming_soon_text {
        align-items: center;
        background-color: rgba(5, 6, 7, .8);
        display: flex;
        height: 100%;
        justify-content: center;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%
    }

    .login_form {
        max-width: 400px
    }

    input {
        -moz-appearance: textfield
    }

    input.otp-input {
        background: var(--bg-medium);
        border: 1px solid var(--stroke-medium);
        border-radius: 12px;
        -moz-border-radius: 12px;
        -webkit-border-radius: 12px;
        height: 48px;
        margin: 0;
        max-width: 63.33px;
        outline: none;
        padding: 25px;
        text-align: center
    }

    @media screen and (max-width:768px) {
        input.otp-input {
            max-width: 40px;
            padding: 0 15px
        }
    }

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

    .coupon_create_form {
        align-items: flex-start;
        background-color: var(--bg-extra-dark);
        border-radius: 12px;
        display: flex;
        flex-direction: column;
        gap: 10px;
        height: 100%;
        justify-content: flex-start;
        overflow: hidden;
        padding: 24px;
        width: 100%
    }

    .coupon_create_form .elements_area_grid {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: 100%;
        width: 100%;
        grid-column-gap: 18px;
        grid-row-gap: 18px
    }

    @media screen and (max-width:1200px) {
        .coupon_create_form .elements_area_grid {
            grid-template-columns: repeat(4, 1fr)
        }
    }

    @media screen and (max-width:900px) {
        .coupon_create_form .elements_area_grid {
            grid-template-columns: repeat(3, 1fr)
        }
    }

    @media screen and (max-width:768px) {
        .coupon_create_form .elements_area_grid {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media screen and (max-width:480px) {
        .coupon_create_form .elements_area_grid {
            grid-template-columns: repeat(1, 1fr)
        }
    }

    .login_form_cntainer {
        align-items: flex-start;
        justify-content: flex-start;
        max-height: 580px;
        max-width: 500px;
        overflow-y: auto;
        padding: 24px
    }

    .login_form_cntainer,
    .tip_booster_form {
        background-color: var(--bg-main);
        border-radius: 12px;
        height: 80vh;
        width: 80vw
    }

    .tip_booster_form {
        max-height: 420px;
        max-width: 652px;
        overflow: auto;
        padding: 12px
    }

    .tip_booster_form .left_area {
        border-right: 1px solid var(--stroke-dark);
        height: 100%;
        padding-right: 24px;
        width: 100%
    }

    .tip_booster_form .right {
        height: 100%
    }

    .tip_booster_form .amount_field {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        padding: 10px 12px
    }

    .tip_booster_form .amount_text_field {
        background-color: transparent;
        border: none;
        color: var(--text-white);
        outline: none;
        width: 100%
    }

    @media screen and (max-width:768px) {
        .tip_booster_form {
            max-height: 500px
        }

        .tip_booster_form .left_area {
            border-bottom: 1px solid var(--stroke-dark);
            border-right: none;
            padding-bottom: 24px;
            padding-right: 0
        }
    }

    .select_our_avatars {
        background-color: var(--bg-main);
        border-radius: 12px;
        height: 80vh;
        max-height: 500px;
        max-width: 500px;
        padding: 24px;
        width: 80vw
    }

    .select_our_avatars .avatars {
        overflow: auto
    }

    .select_our_avatars .one_of_our_avatar {
        border-radius: 50%;
        cursor: pointer;
        height: auto;
        max-width: 100px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .add_fine_bonus {
        background-color: var(--bg-main);
        border-radius: 12px;
        height: 80vh;
        max-height: 430px;
        max-width: 500px;
        padding: 24px;
        width: 80vw
    }

    .add_fine_bonus .one_of_our_avatar {
        border-radius: 50%;
        cursor: pointer;
        height: auto;
        max-width: 100px;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .transfer_order_form {
        background-color: var(--bg-main);
        border-radius: 12px;
        height: 80vh;
        max-height: 400px;
        max-width: 428px;
        padding: 24px;
        width: 80vw
    }

    .toggle_delete_form {
        align-items: flex-start;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        max-width: 600px;
        overflow: auto
    }

    .adjust_order_form,
    .toggle_delete_form {
        background-color: var(--bg-main);
        border-radius: 12px;
        height: 80vh;
        max-height: 300px;
        padding: 24px;
        width: 80vw
    }

    .adjust_order_form {
        max-width: 652px
    }

    .adjust_order_form .left_area {
        border-right: 1px solid var(--stroke-dark);
        height: 100%;
        max-height: 200px;
        overflow-y: auto;
        padding-right: 24px;
        width: 100%;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .adjust_order_form .left_area::-webkit-scrollbar {
        display: none
    }

    .adjust_order_form .right {
        height: 100%
    }

    .adjust_order_form .amount_field {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        padding: 10px 12px
    }

    .adjust_order_form .amount_text_field {
        background-color: transparent;
        border: none;
        color: var(--text-white);
        outline: none;
        width: 100%
    }

    @media screen and (max-width:768px) {
        .adjust_order_form {
            max-height: 400px
        }

        .adjust_order_form .left_area {
            border-bottom: 1px solid var(--stroke-dark);
            border-right: none;
            overflow-x: auto;
            overflow-y: hidden;
            padding-bottom: 24px;
            padding-right: 0
        }
    }

    .booster_review_form {
        background-color: var(--bg-extra-dark);
        height: 100%;
        min-height: 219px;
        overflow: hidden;
        position: relative
    }

    .booster_review_form .left_area {
        padding: 36px;
        z-index: 1
    }

    .booster_review_form .right_area {
        height: 100% !important;
        padding: 36px;
        z-index: 1
    }

    .booster_review_form:after {
        background-image: url(/images/order_done_bg.webp);
        background-position: 100%;
        background-repeat: no-repeat;
        background-size: contain;
        content: "";
        height: 100%;
        position: absolute;
        right: 0;
        top: 0;
        width: 100%
    }

    @media screen and (max-width:900px) {
        .booster_review_form:after {
            background-position: 50%;
            background-size: cover;
            opacity: .5
        }
    }

    .landing_section_1 {
        background-position: 50%;
        background-repeat: no-repeat;
        background-size: cover;
        height: 70vh;
        max-height: 560px;
        padding: 1rem;
        width: 100%
    }

    .rating_section .rating_tag {
        position: relative
    }

    .rating_section .rating_tag:before {
        background-color: var(--primary);
        content: "";
        height: 35px;
        left: -14px;
        position: absolute;
        top: 0;
        transform: rotate(15deg);
        width: 4px
    }

    .reasons_container {
        border-top: 1px solid var(--divider);
        height: 100%;
        min-height: 512px;
        width: calc(100% + 4rem)
    }

    .reasons_container .why_us_card {
        border-left: 1px solid var(--divider);
        height: 100%;
        min-height: 540px
    }

    @media screen and (max-width:900px) {
        .reasons_container .why_us_card {
            border-bottom: 1px solid var(--divider);
            border-left: none
        }
    }

    .admin-blog {
        display: flex;
        flex-direction: space-between;
        margin-top: 50px;
        width: 100%
    }

    .admin-blog .blog-menu {
        display: flex;
        flex-direction: column;
        gap: 20px;
        max-width: 400px;
        width: 100%
    }

    .blogs-head {
        color: var(--text-white)
    }

    .blog-image {
        flex-direction: row;
        height: 100%;
        justify-content: center;
        max-height: 140px;
        -o-object-fit: cover;
        object-fit: cover
    }

    .blog-head,
    .blog-image {
        display: flex;
        width: 100%
    }

    .blog-head {
        color: var(--text-white);
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 15px;
        max-width: 1200px;
        padding-left: 5%;
        padding-right: 5%;
        padding-top: 50px;
        white-space: nowrap
    }

    .b-menu {
        max-width: 400px;
        position: sticky;
        top: 10px
    }

    .single-blog {
        display: flex;
        flex-direction: space-between;
        padding-bottom: 50px;
        width: 100%
    }

    .single-blog .single-blog-menu {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        gap: 5px;
        max-width: 255px;
        padding: 20px
    }

    .single-blog .single-blog-menu .title {
        padding-bottom: 10px
    }

    .single-blog .single-blog-menu .link {
        height: 41px;
        padding-left: 10px;
        padding-right: 10px
    }

    .editorx_body {
        color: var(--text-white);
        display: flex;
        flex-direction: column;
        gap: 0;
        max-width: 1200px;
        padding-left: 5%;
        padding-right: 5%;
        width: 100%
    }

    .editorx_body p {
        display: block
    }

    .editorx_body a,
    .editorx_body p {
        -webkit-margin-before: 1em;
        -webkit-margin-after: 1em;
        -webkit-margin-start: 0;
        -webkit-margin-end: 0
    }

    .editorx_body a {
        display: inline-block;
        text-decoration: underline
    }

    .editorx_body img {
        display: flex;
        flex-direction: row;
        height: 100%;
        justify-content: center;
        max-height: 600px;
        -o-object-fit: cover;
        object-fit: cover;
        padding: 8px;
        width: 100%
    }

    .editorx_body ol,
    .editorx_body ul {
        margin-left: 16px
    }

    .editorx_body ol li,
    .editorx_body ul li {
        padding: 5px
    }

    .editorx_body table {
        border-collapse: collapse;
        margin-bottom: 20px;
        width: 100%
    }

    .editorx_body th {
        background-color: transparent;
        font-weight: 700
    }

    .editorx_body td,
    .editorx_body th {
        border: 1px solid #ddd;
        padding: 8px;
        text-align: left
    }

    .codex-editor,
    .editorx_body tr:hover {
        background-color: var(--bg-medium)
    }

    .codex-editor {
        color: #fff;
        min-height: 1000px
    }

    .codex-editor .cdx-button,
    .codex-editor .ce-block--selected .ce-block__content,
    .codex-editor .ce-conversion-toolbar,
    .codex-editor .ce-inline-toolbar,
    .codex-editor .ce-popover,
    .codex-editor .ce-settings,
    .codex-editor .ce-settings__button,
    .codex-editor .ce-toolbar__plus:hover,
    .codex-editor .ce-toolbar__settings-btn,
    .codex-editor .codex-editor--narrow .ce-toolbox {
        background: #fff;
        color: #000
    }

    .codex-editor .cdx-settings-button,
    .codex-editor .ce-conversion-toolbar__label,
    .codex-editor .ce-inline-tool,
    .codex-editor .ce-toolbar__plus,
    .codex-editor .ce-toolbox__button {
        color: inherit
    }

    .codex-editor ::-moz-selection {
        background: blue;
        color: #fff
    }

    .codex-editor ::selection {
        background: blue;
        color: #fff
    }

    .codex-editor .cdx-button:hover,
    .codex-editor .cdx-settings-button:hover,
    .codex-editor .ce-inline-tool:hover,
    .codex-editor .ce-inline-toolbar__dropdown:hover,
    .codex-editor .ce-popover__item:hover,
    .codex-editor .ce-settings__button:hover,
    .codex-editor .ce-toolbar__settings-btn:hover,
    .codex-editor .ce-toolbox__button--active,
    .codex-editor .ce-toolbox__button:hover {
        color: #000
    }

    .codex-editor .cdx-notify--error {
        background: #fb5d5d !important
    }

    .codex-editor .cdx-notify__cross:after,
    .codex-editor .cdx-notify__cross:before {
        background: #000
    }

    .codex-editor .tc-popover__item {
        color: #000
    }

    .categories-selector {
        width: auto
    }

    .categories-selector .categories_selector {
        border: 1px solid var(--stroke-dark);
        border-radius: 6px;
        cursor: pointer;
        display: flex;
        gap: 10px;
        height: 41px;
        justify-content: flex-start;
        padding: 10px;
        transition: all .2s ease;
        width: auto;
        width: 100%
    }

    .categories-selector .categories_selector .pack-title {
        color: var(--text-gray)
    }

    .categories-selector .categories_selector:hover {
        border: 1px solid var(--stroke-orange)
    }

    .categories-selector .categories_selector:hover .pack-title {
        color: var(--text-white)
    }

    .categories-selector .categories_selector.active {
        background-color: var(--color_main_2);
        /* border: 1px solid var(--stroke-orange) */
    }

    .categories-selector .categories_selector.active .pack-title {
        color: var(--text-white)
    }

    @media screen and (max-width:768px) {
        .categories-selector .pack_selector {
            min-width: 160px
        }

        .categories-selector .order_game_image {
            display: none
        }
    }

    .custom-blog-sidebar {
        max-width: 220px
    }

    .profile_menu_container {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
        background-color: var(--snack-bg);
        border-radius: 12px;
        bottom: 0;
        height: calc(100vh - 20px);
        max-height: calc(100vh - 20px);
        max-width: 500px;
        overflow: hidden;
        overflow-x: hidden;
        position: fixed;
        right: -10px;
        width: 100%;
        z-index: 99999999999
    }

    .profile_menu_container .top_bar {
        padding: 12px
    }

    .profile_menu_container .top_bar .menu_tab {
        border-radius: 20px;
        color: var(--text-light);
        gap: 9px;
        min-height: 36px;
        padding: 9px 15px;
        transition: all .3s ease-in-out
    }

    .profile_menu_container .top_bar .menu_tab .message_count {
        border-radius: 5px;
        height: 14px;
        width: 16px
    }

    .profile_menu_container .top_bar .menu_tab.active {
        background: var(--color_main_2);
        color: var(--text-white)
    }

    .profile_menu_container .top_bar .menu_tab.active img {
        filter: grayscale(100%) brightness(0) invert(100%) sepia(0) saturate(0) hue-rotate(0deg)
    }

    .profile_menu_container .top_bar .menu_tab img {
        height: 16px;
        transition: all .3s ease-in-out;
        width: 16px
    }

    .profile_menu_container .top_bar .menu_tab:hover {
        color: var(--text-white)
    }

    .profile_menu_container .top_bar .menu_tab:hover img {
        filter: grayscale(100%) brightness(0) invert(100%) sepia(0) saturate(0) hue-rotate(0deg)
    }

    .profile_menu_container .profile_details {
        padding: 12px
    }

    .profile_menu_container .profile_details .content {
        background-color: var(--bg-main);
        border-radius: 15px;
        padding: 12px
    }

    .profile_menu_container .profile_details .content .customer_pov {
        border: 1px solid var(--stroke-dark);
        border-radius: 9px;
        padding: 9px 19px
    }

    .profile_menu_container .profile_details .content .customer_pov hr {
        background-color: hsla(0, 0%, 100%, .15);
        border: none;
        height: 7.5px;
        width: 1px
    }

    .profile_menu_container .profile_details .user_avatar {
        border-radius: 50%;
        height: auto;
        max-width: 100px;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .profile_menu_container .critical_nav_container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        grid-template-rows: repeat(auto, 1fr);
        height: -moz-max-content;
        height: max-content;
        width: 100%;
        grid-column-gap: 15px;
        grid-row-gap: 15px;
        padding: 0 15px
    }

    .profile_menu_container .critical_nav_container .critical_nav_item {
        background-color: var(--bg-main);
        border-radius: 15px;
        height: -moz-max-content;
        height: max-content;
        padding: 18px 24px;
        width: 100%
    }

    .profile_menu_container .critical_nav_container .critical_nav_item img,
    .profile_menu_container .critical_nav_container .critical_nav_item svg {
        height: 30px;
        width: 30px
    }

    .profile_menu_container .critical_nav_container .critical_nav_item.router-link-exact-active {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1);
        color: var(--text-white)
    }

    .profile_menu_container .critical_nav_container .critical_nav_item.router-link-exact-active svg path {
        fill: var(--text-white)
    }

    .profile_menu_container .critical_nav_container .critical_nav_item.router-link-exact-active img {
        filter: grayscale(100%) brightness(0) invert(100%) sepia(0) saturate(0) hue-rotate(0deg)
    }

    .profile_menu_container .profile_tab {
        /* max-height: 95%; */
        overflow: auto;
        padding-bottom: 50px
    }

    .profile_menu_container .other_navs_container {
        margin-top: 15px;
        padding: 0 15px
    }

    .profile_menu_container .other_navs_container .scroll_items_container {
        background-color: var(--bg-main);
        border-radius: 15px;
        padding: 9px;
        width: 100%
    }

    .profile_menu_container .other_navs_container .items_container {
        border-radius: 15px
    }

    .profile_menu_container .other_navs_container .items_container p {
        margin-left: 15px;
        margin-right: 6px
    }

    .profile_menu_container .other_navs_container .items_container .nav_item {
        border-radius: 9px;
        padding: 12px 15px
    }

    .profile_menu_container .other_navs_container .items_container .nav_item img,
    .profile_menu_container .other_navs_container .items_container .nav_item svg {
        height: 24px;
        width: 24px
    }

    .profile_menu_container .other_navs_container .items_container .nav_item .right_icon {
        height: 16px;
        width: 16px
    }

    .profile_menu_container .other_navs_container .items_container .nav_item.router-link-active {
        background-color: var(--color_main_2);
        border: 1px solid var(--color_main_1)
    }

    @media screen and (min-width:1201px) {
        .profile_menu_container {
            top: 10px
        }
    }

    @media screen and (max-width:1200px) {
        .profile_menu_container {
            -webkit-backdrop-filter: blur(6px);
            backdrop-filter: blur(6px);
            background: var(--Opacity-Dropdown-Nav, rgba(14, 15, 15, .92));
            border-radius: 12px 12px 0 0;
            border-top: 1px solid var(--stroke-medium, #27292b);
            bottom: 0;
            height: 100vh;
            max-width: 100%;
            right: 0;
            width: 100%
        }

        .profile_menu-enter-active{
            transform: translateX(-5px);
        }

        .profile_menu_container .critical_nav_container .critical_nav_item img,
        .profile_menu_container .critical_nav_container .critical_nav_item svg {
            height: 24px;
            width: 24px
        }

        .profile_menu_container .profile_details .user_avatar {
            max-width: 72px
        }

        .profile_menu_container .profile_tab {
            padding-bottom: 50px
        }
    }

    .chats_container {
        background-color: var(--bg-main);
        height: 100%;
        overflow: auto;
        padding: 12px 12px 100px;
        width: 100%
    }

    .chat_component {
        background-color: var(--color_main_2);
        border-radius: 9px;
        cursor: pointer
    }

    .chat_component .top_bar {
        background-color: var(--bg-medium);
        border-radius: 6px 6px 0 0;
        padding: 6px 9px 6px 14px;
        transition: all .2s ease-in
    }

    .chat_component .top_bar img {
        height: 30px;
        width: 30px
    }

    .chat_component .top_bar .chip_container {
        border-radius: 6px;
        padding: 3px 6px
    }

    .chat_component .bottom_bar {
        border-radius: 0 0 6px 6px;
        padding: 6px 9px 6px 6px;
        transition: all .2s ease-in;
        width: 100%
    }

    .chat_component .user_avatar_container {
        align-items: center;
        border-radius: 50%;
        display: flex;
        height: 48px;
        justify-content: center;
        position: relative;
        width: 48px
    }

    .chat_component .user_avatar_container img {
        border-radius: 50%;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 100%
    }

    .chat_component .user_avatar_container .online_indication {
        background: var(--green);
        border: 3px solid var(--color_main_2, #0e1012);
        border-radius: 54.444px;
        bottom: 5px;
        height: 12px;
        position: absolute;
        right: 0;
        width: 12px;
        z-index: 12
    }

    .chat_component .last_message {
        max-width: 50%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        width: 200px
    }

    .chat_component:hover .top_bar {
        background-color: var(--bg-extra-light)
    }

    .chat_component:hover .bottom_bar {
        background-color: #16191c
    }

    .chat_component .unread_count {
        align-items: center;
        background-color: var(--color_main_1);
        border-radius: 17px;
        display: flex;
        height: 20px;
        justify-content: center;
        padding: 3px 1px 2px;
        width: 20px
    }

    .notification_component {
        background-color: var(--color_main_2);
        border-radius: 9px;
        padding: 6px 9px 6px 6px
    }

    .notification_component .notification_game {
        align-items: center;
        display: flex;
        justify-content: center
    }

    .quick_chat {
        background-color: var(--bg-main);
        height: calc(100% - 61px);
        padding: 0;
        width: 100%
    }

    .quick_chat .chat_header {
        max-height: 68px;
        padding: 12px
    }

    .quick_chat .chat_header .back_button {
        border: 1px solid var(--white-opace);
        min-height: 36px;
        min-width: 36px
    }

    .quick_chat .chat_header .user_avatar_container {
        align-items: center;
        border-radius: 50%;
        display: flex;
        height: 42px;
        justify-content: center;
        position: relative;
        width: 42px
    }

    .quick_chat .chat_header .user_avatar_container .user_avatar {
        border-radius: 50%;
        height: auto;
        -o-object-fit: cover;
        object-fit: cover;
        width: 100%
    }

    .quick_chat .chat_header .user_avatar_container .online_indicator {
        background: var(--green);
        border: 2.6px solid var(--color_main_2);
        border-radius: 48.395px;
        bottom: 5px;
        flex-shrink: 0;
        height: 10px;
        position: absolute;
        right: 0;
        width: 10px
    }

    .quick_chat .chat_section {
        height: 100%;
        overflow: auto;
        padding: 12px 16px
    }

    .quick_chat .chat_section .date-container {
        margin: 16px 0
    }

    .quick_chat .chat_section .chat_message {
        max-height: -moz-max-content !important;
        max-height: max-content !important;
        min-width: 100px
    }

    .quick_chat .chat_section .chat_message.service_message {
        align-items: center;
        background-color: var(--bg-main);
        border: 1px solid var(--stroke-medium);
        border-radius: 12px;
        display: flex;
        justify-content: center;
        margin-bottom: 10px;
        padding: 12px 14px 12px 18px;
        text-align: center
    }

    .quick_chat .chat_section .chat_message.service_message.success-message {
        border-left: 2px solid var(--color_main_1)
    }

    .quick_chat .chat_section .chat_message.service_message.error-message {
        border-left: 2px solid var(--danger)
    }

    .quick_chat .chat_section .chat_message.normal_message {
        background-color: red;
        max-width: 50%;
        width: -moz-max-content;
        width: max-content
    }

    .quick_chat .chat_section .chat_message.normal_message.support-message {
        background-color: var(--green) !important
    }

    .quick_chat .chat_section .chat_message.normal_message.my-message {
        align-self: flex-end;
        background-color: var(--light-orange);
        border-radius: 12px 12px 6px 12px;
        margin-bottom: 1px;
        padding-bottom: 4px;
        padding-right: 6px
    }

    .quick_chat .chat_section .chat_message.normal_message.my-message .message_text {
        padding: 8px 18px 4px
    }

    .quick_chat .chat_section .chat_message.normal_message.my-message p {
        color: var(--text-black)
    }

    .quick_chat .chat_section .chat_message.normal_message.my-message.same-sender {
        border-radius: 12px 6px 12px 12px
    }

    .quick_chat .chat_section .chat_message.normal_message.received-message {
        align-self: flex-start;
        background: var(--Text-Light, #cbcbcb);
        border-radius: 12px 12px 12px 6px;
        margin-bottom: 1px;
        padding-bottom: 4px;
        padding-right: 6px
    }

    .quick_chat .chat_section .chat_message.normal_message.received-message .message_text {
        padding: 8px 18px 4px
    }

    .quick_chat .chat_section .chat_message.normal_message.received-message p {
        color: var(--text-black)
    }

    .quick_chat .chat_section .chat_message.normal_message.received-message.same-sender {
        border-radius: 6px 12px 12px 12px
    }

    .quick_chat .chat_section .chat_message.normal_message .sender_avatar {
        border-radius: 50%;
        height: auto;
        -o-object-fit: contain;
        object-fit: contain;
        width: 25px
    }

    .quick_chat .chat_footer {
        background-color: #0f0f10;
        max-height: 76px;
        padding: 12px 16px
    }

    .quick_chat .chat_footer .send_btn {
        background-color: var(--color_main_1);
        border-radius: 30px;
        max-height: 52px;
        padding: 18px
    }

    .quick_chat .chat_footer .send_btn.disabled {
        background-color: var(--stroke-medium);
        opacity: 1;
        pointer-events: none
    }

    .quick_chat .chat_footer .send_btn:hover {
        background-color: var(--button-orange-hover)
    }

    .quick_chat textarea.chat {
        border: 1px solid var(--stroke-medium);
        border-radius: 30px;
        height: 52px;
        padding: 15px 11px 15px 24px
    }

    .hot_categories {
        background: var(--bg-opace, rgba(5, 6, 7, .5));
        border: 1px solid var(--Stroke-Dark, #17181a);
        border-radius: 24px;
        height: -moz-max-content;
        height: max-content;
        padding: 18px
    }

    .hot_categories .hot_category_card {
        border-radius: 12px;
        cursor: pointer;
        height: 100%;
        min-height: 380px;
        overflow: hidden;
        padding: 9px;
        position: relative;
        width: 100%
    }

    .hot_categories .hot_category_card>* {
        z-index: 1
    }

    .hot_categories .hot_category_card .hot_category_bg {
        height: auto;
        left: 0;
        min-height: 380px;
        -o-object-fit: cover;
        object-fit: cover;
        position: absolute;
        top: 0;
        width: 100%
    }

    .hot_categories .hot_category_card .category_info {
        -webkit-backdrop-filter: blur(5.0500001907px);
        backdrop-filter: blur(5.0500001907px);
        background: var(--bg-opace, rgba(5, 6, 7, .5));
        border-radius: 9px;
        padding: 15px 18px 18px
    }

    .hot_categories .hot_category_card .arrow_right {
        align-items: center;
        background-color: #171b1c;
        border-radius: 24px;
        display: flex;
        gap: 10px;
        height: 36px;
        justify-content: space-between;
        overflow: hidden;
        padding: 0 10px;
        transition: all .2s ease;
        width: 36px;
        z-index: 1
    }

    .hot_categories .hot_category_card .arrow_right .text {
        display: none;
        opacity: 0
    }

    .hot_categories .hot_category_card .perk_list {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 5px;
        justify-content: flex-start;
        list-style-type: none;
        margin-left: 9px;
        margin-top: 6px;
        padding: 0;
        width: 100%
    }

    .hot_categories .hot_category_card .perk_list li {
        margin-right: 24px;
        padding-left: 5px
    }

    .hot_categories .hot_category_card .perk_list.world-of-warcraft-boost {
        list-style-image: url(/img/games/world-of-warcraft-boost/star.svg)
    }

    .hot_categories .hot_category_card:hover .arrow_right .text {
        display: flex;
        opacity: 1
    }

    @media screen and (max-width:1440px) {

        .hot_categories .hot_category_card,
        .hot_categories .hot_category_card .hot_category_bg {
            min-height: 300px
            }
        }
    
        .hot_packs .hot_pack_card {
            background: var(--bg-extra-dark, #0a0b0d);
            border-radius: 12px;
            cursor: pointer;
            height: 100%;
            min-height: 370px;
            overflow: hidden;
            padding: 30px;
            position: relative;
            width: 100%
        }
    
        .hot_packs .hot_pack_card>* {
            z-index: 1
        }
    
        .hot_packs .hot_pack_card .hot_pack_image {
            bottom: 10px;
            height: auto;
            left: 0;
            -o-object-fit: contain;
            object-fit: contain;
            position: absolute;
            width: 100%;
            z-index: 0
        }
    
        .hot_packs .hot_pack_card .arrow_right {
            align-items: center;
            background: hsla(0, 0%, 100%, .05);
            border-radius: 24px;
            display: flex;
            gap: 10px;
            height: 36px;
            justify-content: space-between;
            overflow: hidden;
            padding: 0 10px;
            transition: all .2s ease;
            width: 36px;
            z-index: 1
        }
    
        .hot_packs .hot_pack_card .arrow_right .text {
            display: none;
            opacity: 0
        }
    
        .hot_packs .hot_pack_card .perk_list {
            gap: 5px;
            list-style-type: none;
            margin-bottom: 16px;
            margin-left: 18px;
            margin-top: 6px;
            padding: 0;
            width: 100%
        }
    
        .hot_packs .hot_pack_card .perk_list li {
            margin-right: 24px;
            padding-left: 5px
        }
    
        .hot_packs .hot_pack_card .perk_list.world-of-warcraft-boost {
            list-style-image: url(/img/games/world-of-warcraft-boost/star.svg)
        }
    
        .hot_packs .hot_pack_card:hover .arrow_right {
            background: rgba(0, 0, 0, .5)
        }
    
        .hot_packs .hot_pack_card:hover .arrow_right .text {
            display: flex;
            opacity: 1
        }
    
        @media screen and (max-width:1440px) {
            .hot_packs .hot_pack_card {
                min-height: 315px
            }
        }
    
        @media screen and (max-width:900px) {
            .hot_packs .hot_pack_card .hot_pack_image {
                left: 0;
                opacity: .75;
                top: 100%;
                transform: translateY(-75%)
            }
        }
    
        @media screen and (max-width:480px) {
            .hot_packs .hot_pack_card {
                min-height: 280px
            }
        }
    
        @media screen and (max-width:340px) {
            .hot_packs .hot_pack_card {
                min-height: 230px
            }
        }
    
        .game_server_selector {
            background-color: var(--bg-medium);
            border: 1px solid transparent;
            border-radius: 9px;
            cursor: pointer;
            max-height: 84px;
            padding: 9px 24px 9px 12px;
            transition: all .2s ease
        }
    
        .game_server_selector>* {
            cursor: pointer
        }
    
        .game_server_selector .server_icon {
            filter: saturate(0);
            height: auto;
            max-width: 76px;
            -o-object-fit: contain;
            object-fit: contain;
            width: 100%
        }
    
        .game_server_selector:hover {
            border: 1px solid var(--color_main_1)
        }
    
        .game_server_selector.active {
            background-color: var(--color_main_2);
            border: 1px solid var(--color_main_1)
        }
    
        .game_server_selector.active .server_icon {
            filter: saturate(100%)
        }
    
        .select_honor_picker {
            background: var(--bg-main, #050607);
            border: 1px solid var(--stroke-dark, #17181a);
            border-radius: 12px;
            padding: 12px
        }
    
        .select_honor_picker .select_honor_top {
            background: var(--color_main_2, #0e1012);
            border-radius: 9px;
            padding: 12px 18px
        }
    
        .select_honor_picker .select_honor {
            height: auto;
            max-width: 77px;
            -o-object-fit: contain;
            object-fit: contain;
            width: 100%
        }
    
        .range-slider {
            background-color: var(--stroke-medium);
            border-radius: 9px;
            height: 5px;
            outline: none;
            position: relative;
            width: 100%
        }
    
        .range-slider .progress {
            background-color: var(--color_main_1);
            border-radius: 50px;
            height: 100%;
            left: 0;
            position: absolute;
            right: 0
        }
    
        @-moz-document url-prefix() {
            .range-slider input[type=range] {
                top: -5px !important
            }
        }
    
        .range-slider input[type=range] {
            -webkit-appearance: none;
            appearance: none;
            -moz-appearance: none;
            background: none;
            left: 0;
            outline: none;
            pointer-events: none;
            position: absolute;
            top: -13px;
            width: 100%
        }
    
        .range-slider input[type=range]::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            background-color: var(--color_main_1);
            background: url(/images/icons/slider_thumb.webp);
            background-repeat: no-repeat;
            background-size: contain;
            border: none;
            cursor: pointer;
            height: 30px;
            pointer-events: auto;
            width: 42px
        }
    
        .range-slider input[type=range]::-moz-range-thumb {
            -moz-appearance: none;
            appearance: none;
            background-color: var(--color_main_1);
            background: url(/images/icons/slider_thumb.webp);
            background-repeat: no-repeat;
            background-size: contain;
            border: none;
            cursor: pointer;
            height: 30px;
            pointer-events: auto;
            width: 42px
        }
    
        .extra_option_picker {
            background: var(--bg-opace, rgba(5, 6, 7, .5));
            border: 1px solid var(--stroke-dark, #17181a);
            border-radius: 12px;
            padding: 12px 12px 18px
        }
    
        .extra_option_picker .option_picker {
            align-items: center;
            background: var(--color_main_2, #0e1012);
            border: 1px solid var(--stroke-dark, #17181a);
            border-radius: 7px;
            cursor: pointer;
            display: flex;
            justify-content: flex-start;
            min-height: 36px;
            padding: 9px 12px 9px 9px
        }
    
        .extra_option_picker .option_picker>* {
            cursor: pointer
        }
    
        .extra_option_picker .option_picker.active {
            background: var(--color_main_2);
            border: 1px solid var(--color_main_1)
        }
    
        .extra_option_picker .option_picker.disabled {
            opacity: .5;
            pointer-events: none
        }
    
        .extra_option_picker .extra_raid_option_picker {
            cursor: pointer;
            min-width: 260px
        }
    
        .extra_option_picker .extra_raid_option_picker .price_details {
            border: 1px solid var(--stroke-medium, #27292b);
            border-radius: 4px;
            color: var(--color_main_1);
            padding: 3px 9px;
            transition: all .2s ease-in
        }
    
        .extra_option_picker .extra_raid_option_picker>* {
            cursor: pointer
        }
    
        .extra_option_picker .extra_raid_option_picker.active {
            background: var(--color_main_2);
            border: 1px solid var(--color_main_1)
        }
    
        .extra_option_picker .extra_raid_option_picker.active .price_details {
            background-color: var(--color_main_1);
            border: 1px solid var(--color_main_1);
            color: var(--text-black)
        }
    
        .info_pack {
            background: var(--color_main_2, #0e1012);
            padding: 15px 18px
        }
    
        .info_pack .chev_icon {
            cursor: pointer;
            transform: rotate(90deg);
            transition: all .4s ease-in-out
        }
    
        .info_pack .chev_icon.opened {
            transform: rotate(-90deg)
        }
    
        .info_pack .info_pack_content {
            border-width: 1px 0 0;
            border-top: 0 solid var(--stroke-dark);
            margin-top: 0;
            max-height: 0;
            overflow: hidden;
            padding-top: 0;
            transition: all .4s ease-in-out
        }
    
        .info_pack .info_pack_content ul {
            list-style-type: none
        }
    
        .info_pack .info_pack_content ul li {
            align-items: flex-start;
            display: flex
        }
    
        .info_pack .info_pack_content ul li:before {
            background: url(/images/icons/bullet-points.png) no-repeat 50%;
            content: "";
            display: inline-block;
            height: 16px;
            margin-right: 5px;
            vertical-align: middle;
            width: 16px
        }
    
        .info_pack .info_pack_content ul li:not(:last-child) {
            margin-bottom: 10px
        }
    
        .info_pack .info_pack_content ul .faq_info:before {
            background: url(/images/icons/faq-points.webp) no-repeat 50%;
            border-radius: 50%;
            content: "";
            display: inline-block;
            height: 6px;
            margin-right: 5px;
            margin-top: 5px;
            min-width: 6px;
            vertical-align: middle;
            width: 6px
        }
    
        .info_pack .info_pack_content ul .faq_info:not(:last-child) {
            margin-bottom: 10px
        }
    
        .level_picker_content {
            background: var(--bg-main, #050607);
            border: 1px solid var(--stroke-dark, #17181a);
            border-radius: 12px;
            padding: 12px
        }
    
        .level_adjusters {
            background: var(--color_main_2, #0e1012);
            padding: 18px
        }
    
        .range_slider_ranks {
            min-height: 60px;
            position: relative
        }
    
        .range_slider_ranks .range_slider_rank {
            left: 0;
            position: absolute;
            top: 0
        }
    
        .become_legend {
            background: var(--color_main_2, #0e1012);
            border: 1px solid transparent;
            cursor: pointer;
            overflow: hidden;
            padding: 12px 24px 12px 15px;
            position: relative;
            transition: all .3s ease-in-out;
            width: 100%
        }
    
        .become_legend>* {
            z-index: 1
        }
    
        .become_legend .become_a_legend_bg {
            filter: saturate(0);
            height: 100%;
            left: 100%;
            -o-object-fit: cover;
            object-fit: cover;
            opacity: .4;
            position: absolute;
            top: 0;
            transform: translate(-100%);
            transition: all .3s ease-in-out;
            width: 70%
        }
    
        .become_legend:hover .become_a_legend_bg {
            filter: saturate(1);
            opacity: 1
        }
    
        .become_legend.active {
            background: var(--color_main_2, #0c1c1f);
            border: 1px solid var(--blue, #48e4ff)
        }
    
        .become_legend.active .become_a_legend_bg {
            filter: saturate(1);
            opacity: 1
        }
    
        .become_legend.disabled {
            opacity: .5;
            pointer-events: none
        }
    
        .mmo_category_list {
            list-style: none;
            max-height: 0;
            overflow: hidden;
            transition: all 1s ease-in-out;
            width: 100%
        }
    
        .mmo_category_list.opened {
            margin-top: 10px;
            max-height: 500px
        }
    
        .mmo_category_list li {
            padding-left: 11px;
            position: relative
        }
    
        .mmo_category_list li:before {
            background-image: url(/img/games/world-of-warcraft-boost/category_list_other.webp);
            background-size: cover;
            content: "";
            height: 100%;
            left: 0;
            position: absolute;
            width: 14px
        }
    
        .mmo_category_list li:first-child:before {
            background-image: url(/img/games/world-of-warcraft-boost/category_list_first.webp)
        }
    
        .mmo_category_list li:last-child:before {
            background-image: url(/img/games/world-of-warcraft-boost/category_list_last.webp);
            top: -10px !important
        }
    
        .mmo_category_list li:not(:first-child) {
            margin-top: 5px
        }
    
        .mmo_category_list li:not(:first-child):before {
            top: -5px
        }
    
        .dungeons_list_container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(auto, 1fr);
            grid-column-gap: 12px;
            grid-row-gap: 12px;
            height: -moz-max-content;
            height: max-content;
            width: 100%
        }
    
        .dungeons_list_container .dungeon_picker {
            border: 1px solid var(--stroke-dark, #17181a);
            border-radius: 9px;
            cursor: pointer;
            height: 100%;
            padding: 3px 3px 8px;
            width: 100%
        }
    
        .dungeons_list_container .dungeon_picker .dungeon_image {
            height: auto;
            -o-object-fit: contain;
            object-fit: contain;
            width: 100%
        }
    
        .dungeons_list_container .dungeon_picker:hover {
            border: 1px solid var(--color_main_1)
        }
    
        @media screen and (max-width:1440px) {
            .dungeons_list_container {
                grid-template-columns: repeat(3, 1fr)
            }
        }
    
        @media screen and (max-width:900px) {
            .dungeons_list_container {
                grid-template-columns: repeat(2, 1fr)
            }
        }
    
        @media screen and (max-width:600px) {
            .dungeons_list_container {
                grid-template-columns: repeat(1, 1fr)
            }
        }
    
        .difficulty_picker {
            background-repeat: no-repeat;
            background-size: cover;
            border: 1px solid transparent;
            border-radius: 9px;
            filter: saturate(0);
            height: -moz-max-content;
            height: max-content;
            min-height: 120px;
            overflow: hidden;
            position: relative;
            transition: all .2s ease;
            width: 100%
        }
    
        .difficulty_picker.normal {
            background-image: url(/img/games/world-of-warcraft-boost/difficulties/normal.webp)
        }
    
        .difficulty_picker.heroic {
            background-image: url(/img/games/world-of-warcraft-boost/difficulties/heroic.webp)
        }
    
        .difficulty_picker.mythic {
            background-image: url(/img/games/world-of-warcraft-boost/difficulties/mythic.webp)
        }
    
        .difficulty_picker.active {
            border: 1px solid var(--color_main_1);
            filter: saturate(100%)
        }
    
        .booster_raid_calendar {
            margin-top: 20px;
            max-width: 50vw;
            overflow: auto
        }
    
        .booster_raid_calendar .date_picker {
            background: var(--bg-medium, #121517);
            border: 1px solid transparent;
            border-radius: 7.2px;
            cursor: pointer;
            height: 50px;
            max-width: 60px;
            min-width: 60px;
            padding: 4px;
            position: relative;
            transition: all .2s ease-in-out;
            width: 60px
        }
    
        .booster_raid_calendar .date_picker>* {
            cursor: pointer
        }
    
        .booster_raid_calendar .date_picker.active {
            background-color: var(--color_main_2);
            border: 1px solid var(--color_main_1)
        }
    
        .booster_raid_calendar .date_picker:hover {
            border: 1px solid var(--color_main_1)
        }
    
        .booster_raid_calendar .date_picker:after {
            background-color: var(--color_main_1);
            border-radius: 50%;
            content: "";
            height: 4px;
            opacity: 0;
            position: absolute;
            right: 4px;
            top: 4px;
            width: 4px
        }
    
        .booster_raid_calendar .date_picker.available:after {
            opacity: 1
        }
    
        @media screen and (max-width:800px) {
            .booster_raid_calendar {
                max-width: 90vw
            }
        }
    
        .raids_date_picker {
            background: var(--bg-opace, rgba(5, 6, 7, .5));
            border: 1px solid var(--stroke-dark, #17181a);
            border-radius: 12px;
            width: 100%
        }
    
        .raids_date_picker .top_area {
            border-bottom: 1px solid var(--stroke-dark);
            padding: 9px 12px
        }
    
        .raids_date_picker .top_area .chev_buttons {
            background: hsla(0, 0%, 100%, .05);
            border-radius: 24px;
            cursor: pointer;
            height: 36px;
            max-height: 36px;
            max-width: 36px;
            min-height: 36px;
            min-width: 36px;
            opacity: .5;
            transition: all .2s ease;
            width: 36px
        }
    
        .raids_date_picker .top_area .chev_buttons:hover {
            background: var(--color_main_2)
        }
    
        .raids_date_picker .top_area .calendar_dates {
            overflow: auto
        }
    
        .raids_date_picker .top_area .date_picker {
            background: var(--bg-medium, #121517);
            border: 1px solid transparent;
            border-radius: 7.2px;
            cursor: pointer;
            flex-shrink: 0;
            height: 50px;
            max-width: 60px;
            padding: 4px;
            position: relative;
            transition: all .2s ease-in-out;
            width: 60px
        }
    
        .raids_date_picker .top_area .date_picker>* {
            cursor: pointer
        }
    
        .raids_date_picker .top_area .date_picker.active {
            background-color: var(--color_main_2);
            border: 1px solid var(--color_main_1)
        }
    
        .raids_date_picker .top_area .date_picker:after {
            background-color: var(--color_main_1);
            border-radius: 50%;
            content: "";
            height: 4px;
            opacity: 0;
            position: absolute;
            right: 4px;
            top: 4px;
            width: 4px
        }
    
        .raids_date_picker .top_area .date_picker.available:after {
            opacity: 1
        }
    
        .raids_date_picker .bottom_area {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            grid-template-rows: repeat(auto, 1fr);
            padding: 12px;
            grid-column-gap: 9px;
            grid-row-gap: 9px;
            height: -moz-max-content;
            height: max-content;
            max-height: 350px;
            overflow: auto;
            width: 100%
        }
    
        .wow_raid_schedule {
            background-color: transparent;
            background-color: var(--color_main_2);
            background-image: url(/img/games/world-of-warcraft-boost/difficulties/normal-faded.webp);
            background-position: 100%;
            background-repeat: no-repeat;
            background-size: contain;
            border: 1px solid transparent;
            cursor: pointer;
            height: auto;
            overflow: hidden;
            padding: 12px;
            position: relative;
            transition: all .2s ease;
            width: 100%
        }
    
        .wow_raid_schedule.active,
        .wow_raid_schedule:hover {
            border: 1px solid var(--color_main_1)
        }
    
        .wow_raid_schedule.active {
            background-color: var(--color_main_2)
        }
    
        .wow_raid_schedule.Normal {
            background-image: url(/img/games/world-of-warcraft-boost/difficulties/normal-faded.webp)
        }
    
        .wow_raid_schedule.Heroic {
            background-image: url(/img/games/world-of-warcraft-boost/difficulties/heroic-faded.webp)
        }
    
        .wow_raid_schedule.Mythic {
            background-image: url(/img/games/world-of-warcraft-boost/difficulties/mythic-faded.webp)
        }
    
        @media screen and (max-width:480px) {
            .wow_raid_schedule {
                background-position: 70%;
                background-size: cover
            }
        }
    
        .boss_picker {
            background: var(--color_main_2, #0e1012);
            border: 1px solid var(--stroke-dark, #17181a);
            border-radius: 7px;
            cursor: pointer;
            max-width: -moz-max-content;
            max-width: max-content;
            padding: 9px 12px 9px 9px;
            transition: all .2s ease
        }
    
        .boss_picker.active {
            background-color: var(--color_main_2)
        }
    
        .boss_picker.active,
        .boss_picker:hover {
            border: 1px solid var(--color_main_1)
        }
    
        .boss_picker>* {
            cursor: pointer
        }
    
        @media screen and (max-width:600px) {
            .boss_picker {
                max-width: 48%
            }
        }
    
        .gold_filter_tab {
            background: var(--bg-opace, rgba(5, 6, 7, .5));
            border: 1px solid var(--stroke-medium, #27292b);
            border-radius: 8px;
            height: 40px;
            padding: 4px
        }
    
        .gold_filter_tab button {
            border: 1px solid transparent;
            padding: 5px 15px
        }
    
        .gold_filter_tab button.active {
            background: var(--dark-orange, #21160b);
            border: 1px solid var(--orange, #ff9e48);
            border-radius: 4px;
            color: var(--text-white) !important
        }
    
        .gold_list_container {
            background: var(--opacity-top-navigation, rgba(8, 9, 10, .6));
            border: 1px solid var(--stroke-dark, #17181a);
            padding: 12px
        }
    
        .gold_detail_chip {
            align-items: center;
            background: var(--white-opace, hsla(0, 0%, 100%, .08));
            border-radius: 5px;
            display: flex;
            justify-content: center;
            padding: 3px 6px
        }
    
        .gold_proposal_card {
            background: var(--color_main_2, #0e1012);
            border-radius: 6px;
            cursor: pointer;
            padding: 12px
        }
    
        .gold_boost_checkout-modal {
            background: var(--bg-main, #050607);
            border-radius: 18px;
            height: 90vh;
            max-height: 1009px;
            max-width: 1256px;
            overflow: auto;
            padding: 24px 30px;
            width: 90vw
        }
    
        @media screen and (max-width:900px) {
            .gold_boost_checkout-modal .specific_boost_parent_container {
                height: 30px !important
            }
    
            .gold_boost_checkout-modal .specific_boost_parent_container.opened_coupon_container {
                height: 250px !important
            }
    
            .gold_boost_checkout-modal .apply_coupon_container {
                height: 30px !important
            }
    
            .gold_boost_checkout-modal .apply_coupon_container.opened_coupon_container {
                height: 100px !important
            }
    
            .gold_boost_checkout-modal .mobile_info {
                padding-bottom: 100px
            }
        }
    
        .cross_button {
            border: 1.2px solid var(--stroke-dark, #17181a);
            border-radius: 36px;
            padding: 12px
        }
    
        .gold_detail {
            background: var(--bg-medium, #121517);
            border-radius: 9px;
            padding: 9px 12px
        }
    
        .category_pack_container {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            grid-template-rows: repeat(auto, 1fr);
            grid-column-gap: 20px;
            grid-row-gap: 18px;
            height: -moz-max-content;
            height: max-content;
            width: 100%
        }
    
        @media screen and (max-width:1440px) {
            .category_pack_container {
                grid-template-columns: repeat(3, 1fr)
            }
        }
    
        @media screen and (max-width:900px) {
            .category_pack_container {
                grid-template-columns: repeat(2, 1fr)
            }
        }
    
        @media screen and (max-width:600px) {
            .category_pack_container {
                grid-template-columns: repeat(1, 1fr)
            }
        }
    
        .wow_custom_order_banner {
            background-color: var(--bg-extra-dark);
            background-repeat: no-repeat;
            border-radius: 12px;
            cursor: pointer;
            margin-top: 30px;
            overflow: hidden;
            padding: 40px;
            position: relative
        }
    
        .wow_custom_order_banner>* {
            cursor: pointer;
            z-index: 2
        }
    
        .wow_custom_order_banner:after {
            background-image: url(/img/games/world-of-warcraft-boost/wow_custom_order_bg_2.webp);
            background-repeat: no-repeat;
            right: 0;
            z-index: 0
        }
    
        .wow_custom_order_banner:after,
        .wow_custom_order_banner:before {
            background-position: 100%;
            background-size: cover;
            content: "";
            height: 100%;
            position: absolute;
            top: 0;
            width: 100%
        }
    
        .wow_custom_order_banner:before {
            background-image: url(/img/games/world-of-warcraft-boost/wow_custom_order_bg.webp);
            left: 0;
            z-index: 1
        }
    
        .wow_custom_order_banner .title {
            color: var(--wow)
        }
    
        .wow_custom_order_banner .arrow_right {
            align-items: center;
            background-color: #171b1c;
            border-radius: 24px;
            display: flex;
            gap: 10px;
            height: 36px;
            justify-content: space-between;
            overflow: hidden;
            padding: 0 10px;
            transition: all .2s ease;
            width: 36px;
            z-index: 1
        }
    
        .wow_custom_order_banner .arrow_right .text {
            display: none;
            opacity: 0;
            width: 0
        }
    
        .wow_custom_order_banner:hover .arrow_right {
            width: 102px
        }
    
        .wow_custom_order_banner:hover .arrow_right .text {
            display: block;
            opacity: 1;
            width: 100%
        }
    
        @media screen and (max-width:768px) {
            .wow_custom_order_banner:before {
                background-image: url(/img/games/world-of-warcraft-boost/wow_custom_order_bg.webp);
                background-position: bottom;
                background-repeat: no-repeat;
                background-size: contain;
                bottom: 0;
                content: "";
                height: 100%;
                left: 0;
                position: absolute;
                width: 100%;
                z-index: 1
            }
        }

        /* ====================================
            SEO NAVIGATION STYLES
            ==================================== */

        /* Skip to content link for accessibility */
        .skip-link {
            position: absolute;
            top: -40px;
            left: 6px;
            background: #000;
            color: white;
            padding: 8px;
            text-decoration: none;
            border-radius: 4px;
            z-index: 10000;
            transition: top 0.3s;
        }

        .skip-link:focus {
            top: 6px;
        }

        /* Breadcrumb Navigation */
        .breadcrumb-nav {
            background: rgba(0, 0, 0, 0.8);
            padding: 8px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }

        .breadcrumb {
            background: transparent;
            padding: 0;
            margin: 0;
            list-style: none;
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .breadcrumb-item {
            display: flex;
            align-items: center;
        }

        .breadcrumb-item:not(:last-child)::after {
            content: ">";
            color: rgba(255, 255, 255, 0.6);
            margin-left: 8px;
            font-size: 12px;
        }

        .breadcrumb-item a {
            color: rgba(255, 255, 255, 0.8);
            text-decoration: none;
            font-size: 14px;
            transition: color 0.3s;
        }

        .breadcrumb-item a:hover {
            color: white;
            text-decoration: underline;
        }

        .breadcrumb-item.active {
            color: rgba(255, 255, 255, 0.6);
            font-size: 14px;
        }

        /* Primary Navigation */
        .primary-nav {
            margin-left: 20px;
        }

        .nav-list {
            list-style: none;
            margin: 0;
            padding: 0;
            display: flex;
            align-items: center;
            gap: 20px;
        }

        .nav-item {
            position: relative;
        }

        .nav-link {
            color: rgba(255, 255, 255, 0.9) !important;
            text-decoration: none;
            padding: 8px 12px;
            border-radius: 6px;
            transition: all 0.3s ease;
            position: relative;
            font-weight: 500;
        }

        .nav-link:hover {
            color: white !important;
            background: rgba(255, 255, 255, 0.1);
            text-decoration: none;
        }

        .nav-link:focus {
            outline: 2px solid rgba(255, 255, 255, 0.5);
            outline-offset: 2px;
        }

        /* Responsive adjustments */
        @media (max-width: 991px) {
            .primary-nav {
                display: none !important;
            }
            
            .breadcrumb-nav {
                display: none !important;
            }
        }

        /* Accessibility improvements */
        .visually-hidden-focusable:not(:focus):not(:focus-within) {
            position: absolute !important;
            width: 1px !important;
            height: 1px !important;
            padding: 0 !important;
            margin: -1px !important;
            overflow: hidden !important;
            clip: rect(0, 0, 0, 0) !important;
            white-space: nowrap !important;
            border: 0 !important;
        }

        /* ARIA menu improvements */
        [role="menu"] {
            outline: none;
        }

        [role="menuitem"]:focus {
            outline: 2px solid rgba(255, 255, 255, 0.5);
            outline-offset: 2px;
        }

        /* Container for breadcrumbs */
        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        /* ====================================
            END SEO NAVIGATION STYLES
            ==================================== */