/* Google Font Import - Poppins */
 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');

 *{
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Poppins', sans-serif;
 }

 *::-webkit-scrollbar{
    display: none;
 }
 
 html{
    scroll-behavior: smooth;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    transition: .8s all ease;
    /* color-scheme: dark light; */
 }
 
 :root{

    /* ===== Colors ===== */
    /* --body-color: #f2f0e4; */
    --border-faded: rgba(255, 255, 255, 0.174);
    --heading-size: 40px;
    --border-faded_extreme: rgba(62, 61, 61, 0.251);
    --dark-b: black;
    --nice-b: #212121;
    --nice-b_light: #494949;
    --nice-white: #ccc;
    --faded-white: #cccccca6;
    --white-white: white;
    --white-body: rgb(233, 230, 230);
    --body-color: rgba(0, 0, 0, 0.951);
    --body-color-gradient: linear-gradient(45deg, var(--dark-b), var(--dark-d));
    --modal-b : rgba(0, 0, 0, 0.405);
    --modal-c : var(--nice-white);

    --dark-gradient: linear-gradient(
        45deg, var(--dark-b), var(--nice-b_light), var(--nice-b)
    );
    
    --gradient1: var(--dark-gradient);
    --gradient2: var(--dark-gradient);
    --gradient3: var(--dark-gradient);
    --gradient4: var(--dark-gradient);

    --bs-green : #198754;
    --nice_green:  #18b201;
    --light-l: gold;
    --dark-l :  rgba(255, 217, 0, 0.597);
    --light-l2: rgb(222, 13, 222);
    --dark-l2 :  purple;

    /* --dark-l : rgb(23, 195, 23); */
    --light-d:  var(--nice_green);
    --dark-d :var(--bs-green);

    --gradient: linear-gradient(to bottom, var(--dnice-b), var(--nice-b));
    --reverse-bw: var(--dark-b);
    --bt-nav-b: rgba(0, 0, 0, 0.452);
    /* --text-color: var(--nice-white); */
    --text-color: var(--white-white);
    --themed_color: var(--light-d);
    --themed_color_light: var(--dark-d);
    --danger:#dc3545;
    /* --danger:rgba(255, 0, 0, 0.801); */
    --bx-shad-sm: 4px 5px 15px var(--themed_color_light);
    --bx-shad-sm2: 10px 4px 20px var(--themed_color_light);
    --ddiv-b: var(--dnice-b);
    --ddiv-b2: var(--dnice-b);
    --ddiv-bh: var(--nice-b); 
    --icn-c: var(--nice-b);
    --icn-b: var(--themed_color_light);
    --icn-hc: var(--themed_color);
    --icf-c: var(--themed_color_light);
    --icf-b: var(--nice-b);
    --icf-hc: var(--themed_color);
    --icn-hb: var(--dark-b);
    --ici-c: var(--themed_color_light);
    --ici-hc: var(--nice-white);
    --ici-hb: transparent;
    --icon-list-c: var(--text-color);
    --icon-list-c: var(--text-color);

    --ic-card-b: rgba(0, 0, 0, 0.592);
    --text-bord-b: var(--nice-b);
    --text-bord-c:var(--themed_color);

    /* ====== Transition ====== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
 }

 body.light{
        --bxl : 4px 10px 10px rgba(112, 112, 112, 0.422);
        --bxl2 : 0px 5px 15px rgb(112, 112, 112);
        --bxl3 : 0px 4px 10px rgb(112, 112, 112);
    
        --gradient1: linear-gradient(
            45deg, #12c2e9, #c471ed, #f64f59
        );
        --gradient2: linear-gradient(
            45deg,  #c471ed, #f64f59, #12c2e9
        );
        --gradient3: linear-gradient(
            45deg,  #f64f59, #12c2e9, #c471ed 
        );
        --gradient4: linear-gradient(
            45deg,  var(--light-l), var(--light-l2), var(--bs-green) 
        );
    
        /* --modal-b : rgba(255, 255, 255, 0.686); */
        --modal-c: var(--nice-b_light);
        --border-faded: var(--border-faded_extreme);
    
        --dnice-b: #181818;
        --dnice-l: rgb(50, 107, 50);
    


        --gradient: linear-gradient(to bottom, var(--light-l2), var(--dark-l2));
        --reverse-bw: var(--white-body);
        --bt-nav-b: rgba(187, 186, 186, 0.571);
        --text-color: var(--nice-b);
        --body-color: var(--white-body);
        /* --body-color-gradient: var(--white-body); */
        /* linear-gradient(45deg, var(--dark-b), var(--dark-d)); */
        --body-color-gradient: linear-gradient(75deg,  var(--dark-l), var(--white-body)); 
        --themed_color: var(--light-l);
        --themed_color_light: var(--dark-l);
        --ddiv-b: var(--light-l);
        --ddiv-b2: var(--white-white);
        --ddiv-bh: var(--white-white);
        --icn-c: var(--white-white);
        --icn-b:  var(--light-l);
        --icn-hc: var(--themed_color);
        --icn-hb: var(--nice-b_light);
        --icf-c: var(--themed_color_light);
        --icf-b: var(--white-white);
        --icf-hc: var(--themed_color);
        --ici-c: var(--themed_color);
        --ici-hc: var(--dark-b);
        --ic-card-b:var(--white-body);
        --text-bord-b: var(--white-white);
    
 }
/* } */

body.light{
    color-scheme: light;
    --bxl : 4px 10px 10px rgba(112, 112, 112, 0.422);
    --bxl2 : 0px 5px 15px rgb(112, 112, 112);
    --bxl3 : 0px 4px 10px rgb(112, 112, 112);

    --gradient1: linear-gradient(
        45deg, #12c2e9, #c471ed, #f64f59
    );
    --gradient2: linear-gradient(
        45deg,  #c471ed, #f64f59, #12c2e9
    );
    --gradient3: linear-gradient(
        45deg,  #f64f59, #12c2e9, #c471ed 
    );
    --gradient4: linear-gradient(
        45deg,  var(--light-l), var(--light-l2), var(--bs-green) 
    );

    --modal-c: var(--nice-b_light);
    --border-faded: var(--border-faded_extreme);


    --gradient: linear-gradient(to bottom, var(--light-l2), var(--dark-l2));
    --reverse-bw: var(--white-body);
    --bt-nav-b: rgba(187, 186, 186, 0.571);
    --text-color: var(--nice-b);
    --body-color: var(--white-body);
    /* --body-color-gradient: var(--white-body); */
    /* linear-gradient(45deg, var(--dark-b), var(--dark-d)); */
    --body-color-gradient: linear-gradient(75deg,  var(--dark-l), var(--white-body)); 
    --themed_color: var(--light-l);
    --themed_color_light: var(--dark-l);
    --ddiv-b: var(--light-l2);
    --ddiv-b2: var(--white-white);
    --ddiv-bh: var(--white-white);
    --icn-c: var(--white-white);
    --icn-b:  var(--light-l2);
    --icn-hc: var(--themed_color);
    --icn-hb: var(--nice-b_light);
    --icf-c: var(--themed_color_light);
    --icf-b: var(--white-white);
    --icf-hc: var(--themed_color);
    --ici-c: var(--themed_color);
    --ici-hc: var(--dark-b);
    --ic-card-b:var(--white-body);
    --text-bord-b: var(--white-white);



}

body.dark{
    background: var(--nice-b);
}

body{
    height: 100vh;
    width: 100vw;
    max-width: 100vw;
    display: flex;
    text-decoration: none;
    background: var(--body-color);
    color:var(--text-color);
    justify-content: center;
    overflow: hidden;
    transition: var(--tran-03);
}

body.body_home{
    height: 100%;
    width: 100%;
    display: flex;
    max-width:none;
    justify-content:baseline;
    overflow-x:hidden;
    overflow-y: auto;
}

body::-webkit-scrollbar{
    display: none;
}

span{
    letter-spacing: 1.5px;
}

.ich{
    font-size: 30px;
    justify-content: center;
    align-items: center;
    display: flex;
    color: var(--themed_color_light);
}

.icu{
    display: flex;
    justify-content: center;
    align-items: center;
    /* color: #212121; */
    background-color: var(--nice-b);
    padding: .5em;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    text-align: center;
    color: var(--themed_color_light);
}
body.light .icu{
    background-color: var(--nice-white);
}
.icf{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--icf-c);
    background-color: var(--icf-b);
    padding: .5em;
    width: 35px;
    height: 35px;
    border-radius: .5em;
    text-align: center;

}

.icf:hover{
    color: var(--icf-hc);
}

.ici{
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 15px;
    padding: .3em;
    transition: var(--tran-03);
    border-radius: 50%;
    color:var(--ici-c);
}
.ici:hover{
    background-color: var(--ici-hb);
    color:var(--ici-hc);
    font-size: 20px;
    padding: .1em;
}

.icn{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--icn-c);
    background-color: var(--icn-b);
    padding: .5em;
    width: 30px;
    height: 30px;
    border-radius: .5em;
    text-align: center;
    font-size: 12px;
}
.icn:hover{
    background-color: var(--icn-hb);
    color: var(--icn-hc)
}

.icns{
    font-size: 12px;
}

.none{
    font-weight: 800;
}


/* homepage */

.mini{
    opacity: .7;
    margin-top: .2rem;
    text-transform: capitalize;
    font-size: 12px;
    margin-bottom: .8rem;
}

.user-sign_holder{
    width: 100%;
    justify-content: center;
    align-items: center;
    display: flex;
    margin: 1rem 0;
    padding: .2rem;
}


.modal_exiter{
    left: none;
    right: 5%;
    width: max-content;
}

.fsides.top-45{
    transform: rotate(30deg);
}
.fsides.bottom-45{
    transform: rotate(330deg);
}

section .heading{
    display: flex;
    font: 30px;
    font-weight: 700;
}
section .sub_head{
    display: flex;
    font: 10px;
    font-weight: 500;
    width: max-content;
}

.nice_btn{
    width: max-content;
    padding: .8rem 1rem;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    border-radius: .3rem;
    cursor: pointer;
    color: var(--reverse-bw);
    background-color: var(--themed_color_light);
}

/* .home{
    min-height: 50vh;
} */


/* dashboard */
.arena{
    display: flex;
    width: 0;
    flex-direction: column;
    z-index: 1;
    transition: var(--tran-03);
    /* backdrop-filter: blur(15px); */
    opacity: 0;
    gap: 10px;
    overflow: scroll;
}
.arena::-webkit-scrollbar{
    display: none;
}
.arena.active{
    width: 70vw;
    max-height: 100vh;
    height: 100vh;
    opacity: 1;
    padding: 0;
}

.arena .exit{
    position: fixed;
    animation: pop .5s ease;
    margin-top: 3rem;
    margin-left: 2rem;
    font-size: 40px;
    width: 50px;
    height: 50px;
    justify-content: center;
    align-items: center;
    display: flex;

}

.arena .a-content{
    display: flex;
    flex-direction: column;
    align-items: left;
    padding: .5rem 1rem;
    top: 13%;
    margin-top: 7rem;
    margin-bottom: 2rem;
    width: 100%;

}

.arena .a-content .setup{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}
/* .arena .setup.close{
    display: none;
} */
.arena .setup .paynplay{
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 1rem;
    justify-content: center;
    align-items: center;
}

.paynplay .stake_holder{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: black;
    padding: .5em 0;
    gap: 10px;
    border-radius: 12px;
    color: #18b201;
}
.stake_holder .notify{
    padding: 1em;
    background-color: #18b201;
    border-radius: .5em;
    margin: 0 1em;
    font-size: 12px;
    color: black;
    font-weight: 600;
    cursor: pointer;
    text-transform: capitalize;
    max-width: 350px;
    overflow: hidden;
}
.stake_holder .clear{
    position: relative;
    top: 60px;
    right: -1px;
    font-size: 12px;
    height: max-content;
    cursor: pointer;
}

.stake_holder .stake_main{
    justify-content: space-evenly;
    display: flex;
    align-items: center;
    gap: 30px;
    margin: 0 1rem;
}

.stake_main .small-side{
    justify-content: center;
    flex-direction: column;
    display: flex;
    align-items: center;
}

.stake_main .small-side .side-head{
    color: #ccc;
    font-size: 10px;
}
.stake_main .small-side .side-value{
    color: #ccc;
    font-size: 13px;
    font-weight: 800;
}

.stake_holder .multiple{
    color: #18b201;
    text-transform: uppercase;
    font-size: 8px;
    font-weight: 900;
    cursor: none;
}

.paynplay .play .proceed{
    display: none;
}
.paynplay .play.active .proceed{
    display: block;
}
.paynplay .play.active .nope{
    display: none;
}

.paynplay .play i{
    font-size: 50px;
    cursor: pointer;
}

.play .proceed{
    color: #18b201;
}
.play .nope{
    color:  var(--danger);
}

.cred{
    background-color: var(--danger);
}
.cgreen{
    background-color: var(--bs-green);
}

.paynplay .amount{
    font-size: 30px;
    font-weight: 900;
    text-align: center;
    border: 2px solid var(--themed_color_light);
    border-radius: 1rem;
    padding: .3rem .5rem;
    width: max-content;
}
.paynplay .amount::after{
    content: 'stake';
    display: block;
    font-size: 12px;
    font-weight: 800;
    text-align: center;
}
.paynplay .pay{
    /* background-color: #212121; */
    justify-content: center;
    align-items: center;
    display: flex;
    padding: .8rem 1rem;
    gap: 20px;
}
.paynplay .pay .this_pay{
    border: 2px solid #18b201;
    color: #ccc;
    font-size: 20px;
    font-weight: 800;
    border-radius: .3rem;
    padding: 0 .5rem;
    cursor: pointer;
}
.paynplay .pay .this_pay:hover{
    background-color: #18b201;
    color: black;
}
.arena .setup .appname{
    font-size: 50px;
    font-weight: 900;
    margin-bottom: 1em;
}
.arena .setup .appname::after{
    content: 'knowlege pays....';
    display: block;
    font-size: 10px;
    font-weight: 800;
    text-align: right;
    margin-bottom: 0;
}

.arena .setup .notice{
    background-color: var(--themed_color_light);
    padding: 2rem 3rem;
    color: #212121;
    border-radius: 1em;
    font-weight: 600;
    font-size: 12px;
}
.arena .setup .intress_text{
    margin-top: 2rem;
    text-align: left;
    font-size: 13px;
    font-weight: 900;
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.intress_text .intress-icn{
    margin-left: 1rem;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
}

.setup .intress-setup{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    gap: 5px;
    transition: var(--tran-03);
}

.setup .intress-setup.close .this_intress{
    display: none;
}
.setup .intress-setup.close .this_intress.active{
    display: flex;
}

.intress-setup .this_intress{
    width: max-content;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3em .5em;
    height: max-content;
    /* background-color: #18b201; */
}

.this_intress i{
    display: none;
    font-size: 8px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    transition: var(--tran-03);
    cursor: pointer;
}

.this_intress.active i:hover{
    color: var(--danger);
    font-size: 13px;
}

.this_intress.active i{
    display: flex;
    background-color: #212121;
    margin-left: 1px;
    justify-content: center;
    align-items: center;

}

.this_intress .intress-name{
    font-size: 10px;
    background-color: #212121;
    padding: .2em .3rem;
    border-radius: .3rem;
    transition: var(--tran-03);
    cursor: pointer;
}
.this_intress .intress-name:hover{
    /* font-size: 12.4px; */
    background-color: var(--themed_color_light);
    color: black;
}

.this_intress.active .intress-name{
    /* background-color: var(--themed_color); */
    color: var(--themed_color);
    font-weight: 500;
}
.this_intress.active .intress-name:hover{
    background-color: var(--themed_color);
    color: black;
}


.this{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    flex-direction: column;
    color: black;
}
.this.close{
    display: none;
}


.arena .timer_holder{
    overflow: hidden;
    margin-top: 50px;
    width: 100%;
    height: 20px;
    margin: 0;
    padding: 0;
    border-radius: 30px;
    animation: loadtime 15s linear infinite;
    
}

.arena .timer_holder .timmer{
    display: flex;
    height: 20px;
    width: 100%;
    transform: translateX(-80%);
    animation: loadtimebar 15s linear infinite;
}




.arena .questions_nd_options{
    border: 5px solid var(--themed_color_light);
    /* padding: 8px; */
    border-radius: 20px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.316);
    background-color: #212121;
    display: flex;
    flex-direction: column;
    backdrop-filter: blur(15px);
    gap: 10px;
}

.question-text{

    text-align: center;
    margin: 50px 20px 10px 20px;
    font-size: 12px;
    padding: 30px 15px;
    font-weight: 700;
    cursor:none;
    background-color: var(--themed_color);
    border-radius: 8px;

}

.arena .questions_nd_options .options{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    
}

.questions_nd_options .options .option{
    display: flex;
    width: 40%;
    justify-content: center;
    align-items: center;
    background-color: var(--themed_color_light);
    border-radius: 15px;
    gap: 10px;
    padding: 5px 0px;
    cursor: pointer;
    margin: 10px;
}

.questions_nd_options .options .option.active{
    background-color: var(--themed_color);
}

.questions_nd_options .options .option:hover{
    background-color: var(--themed_color);
}

.result{
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 900;
    color: var(--themed_color_light);
}

.reetake{
    margin-top: 1em;
    padding: 5px;
    font-size: 12px;
    cursor: pointer;
    color: #18b201;
    border: 1px solid #18b201;
    font-weight: 600;
    border-radius: .3rem;
}
.reetake:hover{
    background-color: #18b201;
    color: black;
}




.popup{
    position: fixed;
    display: none;
    width: 100%;
    height: 100vh;
    max-height: 100vh;
    background-color: var(--modal-b);
    color: var(--modal-c);
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9;
    backdrop-filter: blur(15px);
    overflow: scroll;
}

.home_modal{
    background-color: transparent;
    color: var(--text-color);
    z-index: 10;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
}

.popup::-webkit-scrollbar{
    display: none;
}

.popup.active{
    display: flex;
}


.popup .pop-card{
    color: #ccc;
    width: 100%;
    position: absolute;
    top: 2%;
    padding: .5rem 1rem;
    border-radius: 1rem;
    flex-direction: column;
    display: flex;
    animation: sca .5s ease;
    gap: 20px;
} 
.popup .pop-card .exit{
    position: absolute;
    top: 5px;
    left: 10px;
} 
.pop-card div{
    margin: 0 .2rem;
}
.pop-card .container, .pop-card .inner_container, .pop-card .follo_up_card{
    margin: 0;
}

.pop-card .header, .home_pop_content .header{
    font-size: 30px;
    margin-left: 1rem;
    margin-top: 1rem;
    font-weight: 900;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
}
.pop-card .showpay{
    display: none;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    animation: pop .6s ease;
}
.pop-card .showpay.active{
    display: flex;
}

.pop-card .showpay .header{
    font-size: 50px;
    font-weight: 900;
}
.pop-card .showpay .header::after{
    content: 'We Pay.. you Earn!!';
    display: block;
    text-align: right;
    font-size: 10px;
    font-weight: 900;
    margin-bottom: .5rem;
}
.pop-card .showpay .notice{
    font-size: 12px;
    font-weight: 700;
    color: #ccc;
    text-align: center;
    margin-bottom: 1.5rem;
}
.pop-card .showpay .form-feild{
    width: 70px;
}
.pop-card .showpay .feild-icon{
    right: -57px;
    width: max-content;
}


.pop-card .main-content{
    display: flex;
    margin-top: 2rem;
    justify-content: space-between;
    margin-bottom: 1rem;
}


.pop-card .main-content .big, .pop-card .main-content .small{
    display: flex;
    background-color: transparent;
    padding: .3rem 0;
    height: max-content;
    border-radius: .5rem;
    flex-direction: column;
    color: var(--text-color);
}
.pop-card .main-content .big{
    width: 65%;
}

body.light .pop-card .main-content .small{
    background-color: var(--nice-b);
}
body.light .pop-card .main-content .big, body.light .pop-card .main-content .small{
    border: none;
}

.pop-card .main-content .small{
    width: 30%;
    background-color: transparent;
    border: 1px solid #18b201;
    box-shadow: none;
    color: #18b201
}



.pop-card .main-content .big .big_head, .pop-card .main-content .small .small-head{
    text-align: center;
    margin-bottom: .5rem;
    font-size: 12px;
    font-weight: 900;
}

.pop-card .main-content .big .big-content, .pop-card .main-content .small .small-content{
    display: flex;
    flex-direction: column;
    gap: 8px;
    cursor: pointer;
}

.pop-card .main-content .small .small-content .this_small{
    transition: var(--tran-03);
    padding: .2rem .3rem;
    display: flex;
    justify-content: space-between;
}
.pop-card .main-content .small .small-content .this_small .small-upndn{
    display: flex;
    flex-direction: column;
}
.pop-card .main-content .small .small-content .this_small i{
    font-size: 15px;
    width: 20px;
    height: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    background-color: #18b201;
}
.pop-card .main-content .small .small-content .this_small .small-upndn .this_up{
    font-size: 14px;
    font-weight: 700;
}
.pop-card .main-content .small .small-content .this_small .small-upndn .this_down{
    font-size: 10px;
    font-weight: 500;
    color: #ccc;
}

.pop-card .main-content .big .big-content .this_big{
    transition: var(--tran-03);
    padding: .2rem .3rem;
}
.pop-card .main-content .big .big-content .this_big:hover{
    background-color: #131313;
    
}
.pop-card .main-content .big .big-content .this_big:hover .this_big_text{
    color: #18b201;
}
.pop-card .main-content .big .big-content .this_big:hover i{
    color: #18b201;
}
.pop-card .main-content .big .big-content .this_big i{
    font-size: 15px;
}
.pop-card .main-content .big .big-content .this_big .this_big_text{
    margin-left: 10px;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}



.popup .notifications_holder{
    display: flex;
    flex-direction: column-reverse;
    position: absolute;
    top:6%;
    max-width: 98vw;
    gap: .8rem;
    justify-content: center;
    align-items: center;
}

.notifications_holder .this_noti{
    padding: .5em 0;
    border-radius: .3rem;
    display: flex;
    transition: var(--tran-03);
    cursor: pointer;
    justify-content: flex-start;
    /* align-items: center; */
    width: 90%;
    height: 40px;
    /* animation: drop_in .5s ease */
}

.notifications_holder .this_noti .show{
    font-size: 20px;
    transition: var(--tran-03);
    margin-bottom: .5rem;
}
.notifications_holder .this_noti .show:hover{
    background-color: transparent;
    color: var(--themed_color);
}

.notifications_holder .this_noti.fly_away{
    transform: translate(90%, -500%);
}
.notifications_holder .this_noti.fly_away .noti_head_icon{
    opacity: 0;
}
.notifications_holder .this_noti.fly_away .main-not{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    opacity: 0;
}
.notifications_holder .this_noti.fly_away .noti_icons{
    opacity: 0;
}
.notifications_holder .this_noti.close{
    animation: close 1s ease;   
}

.notifications_holder .this_noti.active{
    height: auto;
}
.notifications_holder .this_noti.active .show{
    transform: rotate(180deg);
}

.notifications_holder .this_noti .noti_head_icon{
    margin-right: 10px;
    animation: reveal 2s ease;
}
.notifications_holder .this_noti.active .noti_icons{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.notifications_holder .this_noti.active .main-not{
    border: 1px solid var(--themed_color_light);
}

.notifications_holder .this_noti .main-not{
    background-color: var(--ddiv-bh);
    padding: .5rem .8rem;
    transition: var(--tran-03);
    /* margin-left: 40px; */
    border-radius: .3em;
    font-size: 12px;
    font-weight: 600;
    overflow: hidden;
    width: 400px;
    word-wrap: break-word;
    animation: drop_in .5s ease;
}
.notifications_holder .this_noti .noti_icons{
    display: flex;
    animation: reveal 2s ease;
}

.notifications_holder .this_noti .noti_icons .icn{
    font-size: 12px;
    width: 15px;
    height: 15px;
}

.popup .popup-content{
    background-color: #212121;
    backdrop-filter: blur(15px);
    border-radius: 20px;
    padding: 1em 2em;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    position: absolute;
    top: 30%;
}
.popup .popup-content:hover{
    background-color: black;
    border: none;
}


.main{
    height: 100vh;
    width: 70vw;
    animation: sca .3s linear;
    transition: all .3s ease;
}
.main .pagescroll{
    display: flex;
    height: 100vh;
    overflow: hidden;
    width: 100%;
    
}

.main .pagescroll .div1, .main .pagescroll .div2, .main .pagescroll .div3, .main .pagescroll .div4{
    min-height: 100vh;
    min-width: 100%;
    display: flex;
    transform: translateX(-100%);
    margin-bottom: 2rem;
    overflow: scroll;
    flex-direction: column;
    transition: all .3s ease-out;
    align-items: center;

}

.main .pagescroll .div1::-webkit-scrollbar, .main .pagescroll .div2::-webkit-scrollbar, .main .pagescroll .div3::-webkit-scrollbar, .main .pagescroll .div4::-webkit-scrollbar{
    display: none;
}

.main .pagescroll.show_home .div1, .main .pagescroll.show_home .div2, .main .pagescroll.show_home .div3, .main .pagescroll.show_home .div4{
    transform: translateX(0%);
}

.main .pagescroll.show_right .div1, .main .pagescroll.show_right .div2, .main .pagescroll.show_right .div3, .main .pagescroll.show_right .div4{
    transform: translateX(-200%);
}
.main .pagescroll.show_right2 .div1, .main .pagescroll.show_right2 .div2, .main .pagescroll.show_right2 .div3, .main .pagescroll.show_right2 .div4{
    transform: translateX(-300%);
}
.main .pagescroll .div1{
    margin-bottom: 0;
    position: relative;
    align-items: flex-start;
}
.main .pagescroll .div1.active .widget_holder, .main .pagescroll .div1.active .title, .main .pagescroll .div1.active .noti_card, .main .pagescroll .div1.active .upgrade{
    display: none;
}




.main::-webkit-scrollbar{
    display: none;
}
.main.active{
    transform: scale(500%);
    opacity: 0;
}

.navs{
    position: fixed;
    bottom: 50%;
    transform: translateX(-40%);
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.navs .bottom_nav{
    display: flex;
    justify-content: center;
    width: fit-content;
    flex-direction: column;
    gap: 20px;
    margin: 0em 1em;
    backdrop-filter: blur(10px);
    /* background-color: var(--bt-nav-b); */
    transform: translateX(-600%);
    transition: var(--tran-03);
    margin-bottom: .3rem;
}

.navs .ici{
    transform: rotate(90deg);
    
}
.navs .ici.active{
    display: none;
}

.navs.active .ici{
    display: none;
}
.navs.hide{
    display: none;
}

.navs.active .bottom_nav{
    transform: translateX(0);
}

.b-icon-text{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    border-radius: .5em;
    padding: .3em;
    margin: .3rem 0;
    cursor: pointer;
    transition: var(--tran-03);
    width: 30px;
    height: 30px;
}

.b-icon-text.active i, .b-icon-text i:hover{
    background-color:  var(--icn-hb);
    color: var(--themed_color_light);
}

.b-text{
    font-size: 8px;
    font-weight: 700;
}

.b-icon-text i{
    font-size: 25px;
    justify-content: center;
    align-items: center;
    display: flex;
}

.main .top_nav{
    display: flex;
    padding: 5px 10px;
    justify-content: space-between;
    width: 100%;
}
.main .top_nav .user{
    display: flex;
}

.main .top_nav .user .info{
    display: flex;
    gap: 20px;
    cursor: pointer;
}
.info .my_notification.active{
    background-color: var(--light-l);
    color: var(--dark-b);

}

.main .top_nav .user .namenlevel{
    display: flex;
    margin-left: 5px;
    flex-direction: column;
    gap: 3px;
}
.namenlevel .uname{
    font-size: 80%;
    font-weight: 600;
    cursor: pointer;
    transition: var(--tran-03);
}
.namenlevel .uname .uedit-sign{
    display: none;
    transition: var(--tran-03);
}

.namenlevel .uname:hover .uedit-sign, .namenlevel .uname.active .uedit-sign{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 60px;
}

.namenlevel .uname:hover .uedit-sign i, .namenlevel .uname.active .uedit-sign i{
    font-size: 10px;
    padding: .2rem;
    width: max-content;
    height: max-content;
    justify-content: center;
    align-items: center;
    display: flex;
}

.namenlevel .ulevel{
    font-size: 50%;
    font-weight: 400;
    background-color: var(--text-bord-b);
    color: var(--text-bord-c);
    width: fit-content;
    padding: .2em .5em;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .5em;
}

.user-funds{
    display: flex;
    position: relative;
    width: 90%;
    min-height: 30%;
    background-color: var(--ddiv-b);
    color: var(--nice-white);
    border-radius: 1rem;
    padding: 10px 15px;
    cursor: pointer;
    box-shadow: var(--bxl);
    transition: var(--tran-03);
    background-color: transparent;
    backdrop-filter: blur(20px);
}

.user-funds .ubalance-text{
    position: absolute;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    left: 20px;
}
.user-funds .uupgrade{
    position: absolute;
    right: 20px;
    top: 5px;
    display: flex;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    justify-content: center;
}
.user-funds .ubalance-value{
    position: absolute;
    top: 50px;
    right: 0;
    left: 0;
    text-align: center;
    display: flex;
    justify-content: center;
    font-size: 2rem;
    font-weight: 800;
}
.user-funds .fund-text{
    font-size: 70%;
    font-weight: 600;
    text-align: center;
}

.user-funds .u-icon-text{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    margin-top: .5em;
}



.user-funds .udeposit{
    position: absolute;
    bottom: 20px;
    left: 20px;
    cursor: pointer;
}
.user-funds .uwithdraw{
    position: absolute;
    cursor: pointer;
    bottom: 20px;
    left: 50%;
    right: 50%;
}
.user-funds .uhistory{
    position: absolute;
    cursor: pointer;
    bottom: 20px;
    right: 20px;
}

.main .user-funds.active{
    display: flex;
    position: relative;
    width: 90%;
    min-height: 10%;
    background-color: var(--ddiv-b);
    color: var(--nice-white);
    border-radius: 1rem;
    padding: 10px 15px;
    cursor: pointer;
    box-shadow: var(--bxl);
}

.user-funds.active .ubalance-text{
    display: none;
}
.user-funds.active .uupgrade{
    display: none;
}
.user-funds.active .ubalance-value{
    top: 10px;
    left: 20px;
    text-align: left;
    right: auto;
}
.user-funds.active .fund-text{
    display: none;
}

.user-funds.active .u-icon-text{
    width: 15px;
    height: 15px;
    padding: .1rem;
    font-size: 12px;
}



.user-funds.active .udeposit{
    top: 20px;
    left: auto;
    right: 120px;
}
.user-funds.active .uwithdraw{
    top: 20px;
    left: auto;
    right: 70px;
}
.user-funds.active .uhistory{
    top: 20px;
    right: 20px;
}

.notification-home_holder{
    cursor: pointer;
    background: var(--gradient);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1rem;
    padding: .5rem 1rem;
    width: 80%;
    color: var(--nice-white);
    font-size: 10px;
    font-weight: 600;
    text-align: center;
    border-bottom-left-radius: 1.875rem;
    border-bottom-right-radius: 1.875rem;
    box-shadow: var(--bxl3);

}

.infos{
    display: flex;
    justify-content: center;
    flex-direction: column;
    width: 90%;
    margin-bottom: 2rem;
    margin-top: 1rem;
    padding: 1rem .5rem;
    border-radius: .8rem;
    background-color: var(--ddiv-bh);
}
.infos .info_head{
    font-size: 20px;
    font-weight: 800;
    margin-bottom: .5rem;
}
.infos .guide_title{
    font-size: 15px;
    font-weight: 700;
    margin-bottom: .2rem;
    color: var(--themed_color_light);
}
.infos .guide_text{
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-left: 1rem;
}

.infos2{
    display: flex;
    flex-direction: column;
    width: fit-content;
    height: fit-content;
    padding: .8rem .5rem;
    border-radius: .8rem;
    box-shadow: var(--bxl3);
    /* background-color: var(--ddiv-bh); */
}
.infos2 .info_head{
    font-size: 15px;
    font-weight: 800;
    margin-bottom: .5rem;
}
.infos2 .guide_title{
    font-size: 12px;
    font-weight: 700;
    margin-bottom: .2rem;
    color: var(--themed_color_light);
}
.infos2 .guide_text{
    font-size: 10px;
    font-weight: 500;
    margin-bottom: 1rem;
    padding-left: 1rem;
}


.card6.active{
    background: var(--body-color-gradient);
}

.card6{
    display: flex;
    justify-content: space-between;
    padding: 1rem 3rem;
    background-color: var(--ddiv-bh);
    width: 90%;
    max-width: 100vw;
    cursor: pointer;
    align-items: center;
    box-shadow: var(--bxl2);
    transition: var(--tran-03);
    border-radius: 1em;
    margin: 1rem 0;
}
.card6.h_card{
    justify-content: space-between;
    padding: 1rem;
}
.card6 .first{
    display: flex;
    flex-direction: column;
}
.card6 .heading{
    font-size: 15px;
    font-weight: 600;
}
.card6 .value{
    font-size: 30px;
    font-weight: 800;
}
.card6 .second{
    display: flex;
    flex-direction: column;
    gap: 20px;
}



.card3{
    width: 90%;
    /* height: 7%; */
    background-color: var(--ddiv-bh);
    display: flex;
    margin: 1rem 0rem;
    padding: .5rem 0;
    border-radius: 1em;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--bxl2);
    transition: var(--tran-03);
    
}

.card3.active{
    border: 1px solid var(--themed_color_light);
    border-left: none;
    border-right: none;
    background-color: transparent;
    backdrop-filter: blur(15px);
}

.card3.active .card-icon{
    background-color: transparent;
}
.card3.active .top i{
    background-color: transparent;
    transform: rotate(180deg);
}

.card3 .this_card{
    display: flex;
    flex-direction: column;
    margin-left: 5px;
    width: 100%;
    padding-right: 10px;
}
.this_card .top{
    justify-content: space-between;
    display: flex;
    align-items: center;
}
.this_card .top .title{
    text-transform: uppercase;
    font-size: 20px;
    font-weight: 700;
}

.this_card .middle{
    display: flex;
    flex-direction: column;
}

.middle .brief{
    background-color: var(--ic-card-b);
    padding: .5rem .8rem;
    border-radius: 8px;
    font-size: 12px;
    display: flex;
    flex-direction: column;
}
.middle .brief .show{
    margin-top: 5px;
    text-align: right;
    color: var(--themed_color_light);
    transition: var(--tran-03);
    font-weight: 800;
    font-size: 10px;
    display: flex;
    cursor: pointer;
}
.middle .brief .show:hover{
    color: var(--themed_color);
}
.middle .activity{
    padding: .2rem .8rem;
    border-radius: 8px;
    font-size: 12px;
}

.this_card .bottom{
    margin: 10px 0;
    display: none;
    flex-direction: column;
    gap: 10px;
}

.card3.active .this_card .bottom{
    display: flex;
}
.card3.active .this_card .middle .brief{
    display: none;
}

.this_card .bottom .minner{
    display: flex;
    align-items: center;
    gap: 30px;
}

.this_card .bottom .minner .mined{
    font-size: 12px;
}

.this_card .bottom .trade_c{
    display: flex;
    width: fit-content;
    gap: 20px;
    background-color: var(--text-bord-b);
    padding: 0;
    border-radius: 10px;
    overflow: hidden;
    
}
body.light .this_card .trade_c{
    box-shadow: var(--bxl3);
}

.trade_c .profit{
    font-size: 20px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:0 .5rem
}
.trade_c .time{
    font-size: 20px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--dnice-b);
    padding:0 .5rem
}
body.light .trade_c .time{
    background-color: var(--white-body);
}



/* .card{
    width: 90%;
    height: 10%;
    background-color: var(--ddiv-bh);
    display: grid;
    margin: 1rem 0rem;
    padding: .5rem 0;
    grid-template-columns: 10% 80% 10%;
    grid-template-rows: 60% 40%;
    border-radius: 1em;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--bxl2);
    
} */
.card{
    width: 90%;
    min-height: 15%;
    background-color: var(--ddiv-bh);
    display: flex;
    margin: 1rem 0rem;
    padding: .5rem 0;
    border-radius: 1em;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    box-shadow: var(--bxl2);
    position: relative;
    
}
.card:hover{
    border: 1px solid var(--themed_color);
    border-left: none;
}
body.light .card:hover{
    border: none;
}
.card3 .card-icon{
    grid-area: 1/1/3/2;
    background-color: var(--ic-card-b) ;
    border-radius: 30px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.card .card-icon{
    position: absolute;
    background-color: var(--ic-card-b) ;
    border-radius: 30px;
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
    width: 60px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    left: -10px;
    z-index: 1;
}

.main .card .card-head{
    position: absolute;
    display: flex;
    font-size: 20px;
    text-align: left;
    font-weight: 700;
    left: 60px;
    top: 4px;
    
}

.main .card .card-sub{
    position: absolute;
    font-size: 10px;
    text-align: left;
    font-weight: 500;
    bottom: 15px;
    left: 60px;
}

/* .main .card .card-icon-exit{
    grid-area: 1/3/3/4;
} */
.card-icon-exit{
    position: absolute;
    right: 30px;
}


 
 .ring{
    position: relative;
    display: flex;
    width: 3.125em;
    height:50px;
    border-radius: 50%;
    animation: ring .5s linear infinite;
    justify-content: center;
    text-align: center;
 }
 
 .ring::before{
    content: '';
    left:0;
    top: 0;
    height: 100%;
    widows: 100px;
    box-shadow: 0 0 .3125em rgba(255,255,255, .3);
    border-radius: 50%;
 }

 .main .other-apps{
    display: flex;
    flex-direction: column;
    border-radius: .8rem;
    margin: .5em 0;
    justify-content: center;
    align-items: center;
    
}

.app-header{
    font-size: 15px;
    font-weight: 700;
    text-align: left;
}
.apps-h{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    width: 70%;
    gap: 20px;
}

.app-grid{
    display: grid;
    width: 50px;
    height: 80px;
    grid-template-columns: 100%;
    grid-template-rows: 80% 20%;
    justify-content: center;
    align-items: center;
}
.app-grid .ring{
    grid-area: 1/1/2/2;
}
.app-grid i{
    grid-area: 1/1/2/2;
    z-index: 1;
    /* text-align: center; */
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    font-size: 22px;
    padding: 14px;
    cursor: pointer;
    transition: var(--tran-03);
    color: var(--themed_color_light);

}
.app-grid i:hover{
    color: var(--themed_color);
    font-size: 30px;
}
.app-grid .app-name{
    grid-area: 2/1/3/2;
    font-size: 9px;
    font-weight: 700;
    text-align: center;
}
.show_sides{
    cursor: pointer;

}

.sides{
    position: absolute;
    background-color: var(--modal-b);
    border-bottom-left-radius: 1em;
    border-bottom: 0;
    border-top: 0;
    border-right: 0;
    border-top-left-radius: 1em;
    right: 0;
    height: 100vh;
    max-height: 100vh;
    width: 500px;
    z-index: 2;
    flex-direction: column;
    backdrop-filter: blur(15px);
    transform: translateX(100%);
    transition: var(--tran-03);
    overflow: hidden;
    
}


.sides.active{
    transform: translateX(0);
}
.sides.close{
    display: none;
}

.sides .sides_top{
    display: flex;
    justify-content: center;
    align-items: center;
}
.sides .sides_top i{
    position: absolute;
    left: 0;
    top: 2px;
}

.sides .sides_top .h-head{
    position: absolute;
    top: 2px;
    border: 4px solid var(--text-color);
    border-top: none;
    border-left: none;
    border-right: none;
    text-transform: uppercase;
    display: flex;
}
body.light .sides .sides-main{
    color: var(--nice-white);
}
body.light .sides .sides-main .this_holder:hover{
    color: var(--nice-b);
}

.sides .sides-main{
    display: flex;
    margin: 2rem;
    margin-bottom: 0;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;

}
.sides .sides-main .holder{
    display: flex;
    /* align-items: center; */
    flex-direction: column;
    gap: 20px;
    height: 90vh;
    overflow-y: scroll;
    margin-bottom: .3em;
    margin-top: 1em;
    padding: .6em 0em;
}

.sides .sides-main .holder::-webkit-scrollbar{
    display: none;

}

.some_details{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em .3em;
    margin-top: .3em;
    margin-bottom: .5em;
    width: 100%;
    border-radius: 30px;
    border: 1px solid var(--themed_color);
    border-left: none;
    background-color: var(--nice-b);
    cursor: pointer;
}


body.light .some_details{
    background-color: var(--white-body);
    color: var(--nice-b);
    box-shadow: var(--bxl);
    border: none;
}

.detailsnicon{
    display: flex;
    gap: 10px;
    width: 100%;
}

.detailsnicon i{
    background-color: var(--themed_color_light);
    justify-content: center;
    align-items: center;
    padding: .1em;
    border-radius: 50%;
    font-size: 30px;
    width: 40px;
    height: 40px;
    color: var(--nice-b);
    display: flex;
}
body.light .detailsnicon i{
    color: var(--nice-white);
}
.detailsnicon .detail{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 100%;
}

.detailsnicon .detail .other_details{
    width: 100%;
    display: none;
}

.some_details.active .other_details{
    display: flex;
    animation: glide_down .3s linear;
    opacity: 1;
    transform: translateY(0%);
}
.detailsnicon .detail .other_details .vertical_list_values{
    width: 100%;
    display: flex;
}

.d-title{
    font-size: 12px;
    font-weight: 800;
}
.d-sub{
    font-size: 10px;
    font-weight: 400;
}
.us-name{
    font-size: 20px;
    font-weight: 800;
    transition: var(--tran-03);
}
.us-email{
    font-size: 10px;
    font-weight: 400;
    color: #ccccccba;
}
body.light .us-email{
    color: var(--nice-b);
}
.us-tier{
    font-size: 10px;
    font-weight: 600;
    background-color: #131313;
    border-radius: 30px;
    padding: .4em .8em;
    width: max-content;
    color: var(--text-bord-c);
}

body.light .us-tier{
    background-color: var(--text-bord-b);
}

.edit_me{
    position: absolute;
    right: 20;
    top: 12;
}
.some_details:hover .edit_me i{
    display: flex;
}
.edit_me i{
    display: none;
    font-size: 15px;
    width: 20px;
    height: 20px;

}

.sides-main .someholders{
    display: flex;
    gap: 10px;
    flex-direction: column;
    width: 100%;
    max-height: 70vh;
    overflow: scroll;
    padding-bottom: 4rem;
    /* margin-bottom: 4rem; */
}
.sides-main .someholders::-webkit-scrollbar{
    display: none;
}

.someholders .this_holder{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1em .3em;
    width: 100%;
    border-radius: .5em;
    cursor: pointer;
    position: relative;
    transition: var(--tran-03);
}

.someholders .this_holder.active, .someholders .this_holder.active:hover{
    background: var(--body-color-gradient);
}

.someholders .this_holder:hover{
    /* border-radius: 30px; */
    border: 1px solid var(--themed_color);
    /* border-left: none; */
    background-color: var(--ddiv-bh);
    box-shadow: 5px 2px 20px var(--themed_color_light);
}

.this_holder .detailsnicon i{
    font-size: 15px;
    width: 25px;
    height: 25px;
}

.sides-main .sign-out{
    position: absolute;
    bottom: 0;
    text-transform: capitalize;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
    margin-bottom: 1em;
    color: var(--themed_color_light);
}

.sides-main .sign-out:hover{
    border-radius: .5em;
    border: 1px solid var(--themed_color_light);
    padding: .3rem;
}

.sides .sides-main .settings{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.sides-main .holder .this_noti{
    background-color: #212121;
    border-radius: .3rem .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .6rem;
    cursor: pointer;
    transition: var(--tran-03);
}

.sides-main .holder .this_noti.d-animate{
    border: 1px solid green;
    box-shadow: 4px 5px 15px #18b201;
}
.holder .this_noti .show_active_nt{
    display: none;
}
.this_noti.d-animate .show_active_nt{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.holder .this_noti.d-animate .show_active_nt .nt{
    font-size: 12px;
}
.this_noti.d-animate .show_active_nt .balndiff{
    display: flex;
    justify-content: space-between;
    gap: 20px;
    align-items: center;
}

.this_noti.d-animate .show_active_nt .balndiff .bfaf-h{
    display: flex;
    flex-direction: column;
    margin-right: 4em;
}
.this_noti.d-animate .show_active_nt .balndiff .amount{
    font-size: 30px;
    font-weight: 900;
    margin-left: 2rem;
}
.this_noti.d-animate .show_active_nt .bfaf-h .bfaf{
    font-size: 10px;
}
.this_noti.d-animate .show_active_nt .bfaf-h .bfaf .sm-am{
    font-size: 10px;
    font-weight: 800;
}

.this_noti.d-animate .show_active_nt .time_n_rd{
    display: flex;
    align-items: center;
    gap: 4rem;
}
.this_noti.d-animate .show_active_nt .time_n_rd span{
    font-size: 8px;
    font-weight: 900;
    color: #ccc;
}



.sides-main .holder .this_noti:hover{
    border: 1px solid var(--themed_color);
    box-shadow: var(--bx-shad-sm);
}

.sides-main .holder .this_noti.d-animate .noti-text{
    opacity: 0;
    width: 1px;
}
.sides-main .holder .this_noti.d-animate i{
    background-color: #18b201;
}
.sides-main .holder .this_noti.d-animate i:hover{
    font-size: 20px;
}

.this_noti i{
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    transition: var(--tran-03);
}
.this_noti i:hover{
    background-color: var(--themed_color);
}
.noti-text{
    font-size: 12px;
    overflow: hidden;
    max-height: 40px;
    word-wrap: break-word;
    transition: var(--tran-03);
}

.popup-icon{
    margin-top: 1rem;
    position: fixed;
    bottom: 4%;
    z-index: 1;
}

.modal{
    display: none;
    position: fixed;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #21212180;  /* var(--modal-b); */
    backdrop-filter: blur(15px);
    z-index: 10;
    /* color: var(--nice-white); */
}
.modal.active{
    display: flex;
}

.modal_container{
    display: flex;
    flex-direction: column;
    background-color: transparent;
    width: 100%;
}
.modal_container .infos{
    width: 100%;
    margin-top: 0;
    margin-bottom: 0;
    padding: .2rem;
}
.modal_container .middle{
    display: flex;
    max-height: 60vh;
    overflow: scroll;
    padding: .4rem .2rem;
    justify-content: center;
}
.modal_container .bottom{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .4rem .2rem;
}

.value_cards_holders{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}
.value_cards_holders .value_card{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .3rem .5rem;
    background-color: var(--nice-b);
    border-radius: 1.875rem 1em;
}
.value_card .value-title, .value_card .value-price{
    font-size: 20px;
    font-weight: 700;
    color: var(--themed_color);
}
.value_card .value-price{
    padding: .2rem 0;
}
.value_card .value-sm{
    font-size: 10px;
    font-weight: 800;
}

.value_card .value-heading{
    margin-bottom: .06rem;
    font-size: 13px;
    font-weight: 600;
    color: var(--themed_color);

}
.value_card i{
    margin-top: .3rem;
}

.modal .modal_container .middle::-webkit-scrollbar{
    display: none;
}

.modal_form_cont{
    display: flex;
    flex-direction: column;
    justify-content: center;
    max-width: 90vw;
    overflow: hidden;
    height: 25vh;
}
.modal_form_cont .top{
    display: flex;
    align-items: center;
    justify-content: center;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    border: 1px solid var(--reverse-bw);;
    padding: 3rem;
    height: 70%;
}
.modal_form_cont .bottom{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 800;
    height: 30%;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    background-color: var(--reverse-bw);
    border-top: none;
    
    

}


.modal .modal-content{
    justify-content: center;
    align-items: center;
    display: flex;
    animation: scaleup .5s linear;
    border-radius: 1.875rem;
    background-color: transparent;
    flex-direction: column;
    position: absolute;
    background-color: var(--ddiv-bh);
    padding: 1rem;
    top: 15%;
    max-width: 95%;
}

.big-round{
    display: flex;
    font-size: 50px;
    padding: .3em;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 50%;
    margin-bottom: .3em;

}

.warning-title{
    font-size: 33px;
    font-weight: 800;
    margin-bottom: .1em;
    text-align: center;
    text-transform: capitalize;
}

.error-code{
    font-size: 10px;
    color: #ccc;
    margin-bottom: 1.5em;
}

.warning-info{
    font-size: 12px;
    word-wrap: break-word;
    margin-bottom: 1em;
    /* text-align: cente; */
}

.teleicon{
    font-size: 20px;
    text-align: center;
}


.form_holder{
    margin-bottom: .5rem;
    display: flex;
    flex-direction: column;
    cursor: pointer;
    max-width: 90%;
    width: 90%;
    position: relative;
}
.form_holder .feild-icon{
    position: relative;
    right: -325px;
    top: -24px;
    color: var(--themed_color_light);
}

body.light .form_holder .feild-icon{
    color: var(--dark-b);
}

.form_holder .form-label{
    border: 1px solid var(--themed_color);
    bottom: -2px;
    left: 5px;
    position: relative;
    width: max-content;
    background-color: #0e0e0ee6;
    color: var(--themed_color_light);
    backdrop-filter: blur(25px);
    padding: .2em .4em 0 .4em;
    border-radius: .3rem;
    font-size: 12px;
    font-weight: 700;
    border-bottom: none;
}

body.light .form_holder .form-label{
    border: none;
    background-color: transparent;
    color: var(--dark-b);
    backdrop-filter: none;
    bottom: 1px;
}

.form_holder .form-feild{
    border: 1px solid var(--themed_color);
    background-color: transparent;
    padding: .5em .8em;
    border-top-left-radius: .4rem;
    width: 350px;
    color: var(--themed_color_light);
    transition: var(--tran-03);
    cursor: pointer;
}
body.light .form_holder .form-feild{
    border: none;
    background-color: var(--white-white);
    color: var(--nice-b);
    box-shadow: var(--bxl2);
}
body.light .form_holder .form-feild:focus{
    background-color: transparent;
    color: var(--dark-b);
    border: none;
    outline: none;
}

.form_holder .form-feild:focus{
    background-color: transparent;
    color: var(--nice-white);
    border: 1px solid var(--themed_color);
}
.form-text{
    font-size: 12px;
    font-weight: 800;
    width: 350px;
    word-wrap: break-word;
    margin-bottom: 1.5rem;
    margin-top: 1rem;
}
.save{
    margin-top: .6rem;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .6rem;
    color: var(--themed_color_light);
    font-size: 30px;
    transition: var(--tran-03);
    cursor: pointer;
}
.save:hover{
    font-size: 40px;
    color:var(--themed_color)
}


.toggle-h{
    background-color: var(--ddiv-b);
    border-radius: .5rem;
    width: 44px;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 2px 2px;
    transition: var(--tran-03);
    position: relative;
}
.toggle-h .toggle{
    display: flex;
    position: absolute;
    background-color: var(--themed_color_light);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    cursor: pointer;
    transition: var(--tran-05);
    left: 0;
}
.toggle-h:hover{
    background-color: #131313;
}

.toggle-h .toggle.active{
    left: 24px;
}


.main-grid{
    display: grid;
    grid-template-columns: repeat(100, ifr); 
    grid-template-rows: repeat(100, ifr); 
    background-color: black;
    height: 80vh;
    width: 90vh;
}

.pop-card .card2{
    display: none;
    justify-content: space-between;
    padding: .3rem .6rem;
    border-radius: 1rem;
    background-color: var(--ddiv-b);
    box-shadow: var(--bxl2);
    height: 20%;
    width: 100%;
    color: var(--dark-b);
    margin-top: 2rem;
    animation: pop .6s ease;
}
.pop-card .card2.active{
    display: flex;
}
.card2 .main-stuff{
    display: flex;
    justify-content: space-between;
    /* align-items: center; */
    width: 60%;
    flex-direction: column;
}
.card2 .main-stuff .form-feild{
    width: 100%;
}


.stuff_holder{
    overflow-y: scroll;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    max-height: 180px;
    gap: 20px;
    
}


.stuff_holder::-webkit-scrollbar{
    display: none;
}

.stuff_holder .this_stuff{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    transition: var(--tran-03);
    cursor: pointer;
}
.stuff_holder .this_stuff:hover i{
    background-color: var(--nice-b);
    color: var(--nice-white);
}
.stuff_holder .this_stuff.active i{
    background-color: var(--nice-b);
    color: var(--light-l);
}

.stuff_holder .this_stuff i{
    font-size: 20px;
    border: 1px solid var(--nice-b);
    padding: .2rem;
    justify-content: center;
    color: var(--icon-list-c);
    align-items: center;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    display: flex;
    box-shadow: var(--bxl2);
}
.stuff_holder .this_stuff:hover .title{
    color: var(--dark-b);
}
.stuff_holder .this_stuff .title{
    font-size: 8px;
    font-weight: 600;
    text-align: center;
    color: var(--text-color);
}

.card2 .confirm{
    display: flex;
    flex-direction: column;
    width: 35%;
    gap: 5px;
}
.card2 .confirm .form_holder{
    margin-bottom: 0;
}

.confirm .form-feild{
    width: 90%;
}
.confirm .feild-icon{
    position: relative;
    left: 300px;
    top: -30px;
}

.send, .search{
    width: 60%;
    padding: .2rem .5rem;
    background-color: var(--nice-b);
    color: var(--nice-white);
    border-radius: .5rem;
    font-weight: 700;
    cursor: pointer;
}
.card2 .confirm .notify{
    padding: .2rem .5rem;
    background-color: var(--nice-b);
    color: var(--nice-white);
    border-radius: .5rem;
    font-weight: 700;
    font-size: 10px;
}

.modal .add_group{
    display: flex;
    width: 100%;
    gap: 20px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.add_group .friends_list{
    background-color: var(--ddiv-b);
    padding: 1rem .5rem;
    border-radius: 1rem;
    color: var(--nice-b);
    max-width: 80vw;
    flex-wrap: wrap;
    display: flex;
    justify-content: center;
    max-height: 300px;
}

.result{
    background-color: var(--nice-b);
    display: none;
    width: max-content;
    padding: .4rem .5rem;
    justify-content: center;
    margin-top: .5rem;
    box-shadow: var(--bxl);
    gap: 10px;
    border-radius: .3rem;
    cursor: pointer;
}

.result.active{
    display: flex;
}
.result .result_d{
    display: flex;
    flex-direction: column;
}
.result .result_d .result-t{
    font-size: 15px;
    font-weight: 700;
}
.result .result_d .result-b{
    font-size: 10px;
    font-weight: 700;
    justify-content: space-between;
    display: flex;
}

.hidden{
    display: none;
}

.inputnwarning{
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.inputnwarning .warning{
    font-size: 10px;
    font-weight: 600;
    margin-bottom: .5rem;
}
.form-nice_field{
    box-shadow: var(--bxl3);
    overflow: hidden;
    border: none;
    border-radius: 8px;
    width: max-content;
    height: 30px;
    gap: 2px;
    display: flex;
    padding: 1rem .3rem;
    align-items: center;
    justify-content: space-between;
    color: #ccc;
    background: var(--body-color-gradient);
    margin: .5rem 0;
}

.form-nice_field .form-icon{
    justify-content: center;
    align-items: center;
    display: flex;
}
.form-nice_field i{
    font-size: 20px;
}

.form-nice_field .field{
    background-color: transparent;
    border: none;
    outline: none;
    font-size: 20px;
    color: var(--text-color);
    font-weight: 700;
}
.selector{
    display: flex;
    flex-direction: column;
    min-width: 100px;
    position: relative;
}
.selector .selectednicon{
    display: flex;
    padding: .1rem .3rem;
    justify-content: space-between;
    align-items: center;
    box-shadow: var(--bxl3);
    cursor: pointer;
    border-radius: .2rem;
}
.selectednicon .selected_text{
    font-size: 13px;
    font-weight: 700;
    text-transform: capitalize;
}

.selector.active .selectednicon i{
    transform: rotate(180deg);
}
.selector.active .options{
    display: flex;
}
.selector .options{
    display: none;
    flex-direction: column;
    background-color: var(--nice-b);
    color: #ccc;
    /* overflow: hidden; */
    justify-content: center;
    align-items: baseline;
    border-radius: 7px;
    position: absolute;
    opacity: 1;
    bottom: -50px;
    left: 0;
    width: 100%;
    z-index: 1;
    height: auto;
}
.selector .options input{
    display: flex;
    color: var(--text-color);
    background-color: var(--reverse-bw);
    outline: none;
    border: none;
    padding: .3rem .2rem;
}

.selector .option{
    padding: .2rem .3rem;
    font-size: 12px;
    cursor: pointer;
    display: flex;
    min-width: 100%;
    text-transform: uppercase;
}
.selector .option:hover{
    background-color: #ccc;
    color: #131313;
}
.do_invest{
    box-shadow: var(--bxl3);
    font-size: 15px;
    font-weight: 600;
    width: max-content;
    padding: .5rem .7rem;
    border-radius: 10px;
    cursor: pointer;
    text-transform: uppercase;
    background-color: #ccc;
    color: #5c5c5c;
}
.do_invest.active{
    background-color: transparent;
    color: #212121;
}

.invest{
    display: flex;
    gap: 15px;
}

.miniheader{
    margin-top: 3rem;
    font-size: 20px;
    text-transform: uppercase;
    width: max-content;
    border-radius: 10px;
    font-weight: 700;
    margin-bottom: 1rem;
}
.miniheader::after{
    content: '';
    min-width: 70vw;
    margin-top: .2rem;
    height: 2px;
    background-color: var(--themed_color_light);
    display: block;
}
.miniheader .cmh{
    /* background-color: var(--themed_color_light); */
    color: var(--themed_color_light);
    border: none;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 0px 5px;
}

.holder_column{
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-width: 100%;
    /* justify-content: center; */
}
.holder_row{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* remove if problems occur */
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
    margin: .3rem 0;
    
}
.width_content{
    width: fit-content;
}
.capitalize{
    text-transform: uppercase;
}
.center_main{
    justify-content: center;
    align-items: baseline;
    display: flex;
}

.floatcard{
    position: relative;
    display: flex;
    
}

.fcard4{
    height: 10vh;
    width: 30vw;
    position: relative;
    
}

.card4.active{
    position: absolute;
    z-index: 500;
    top: 0;
    left: 0;
    width: 500px;
    height: 400px;
    background-color: red;
    align-items: baseline;
    flex-direction: column;
    

}
.card4{
    display: flex;
    gap: 10px;
    align-items: center;
    position: relative;
}
.card4 .card-left{
    position: sticky;
}
.card4 .level{
    background-color: var(--nice-b);
    color: var(--nice-white);
    border-radius: 50%;
    padding: .6rem;
}
.card4 .card-right{
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
    display: flex;
    justify-content: space-around;
    border: 1px solid #2121211f;
    padding: 0;
    overflow: hidden;
    /* box-shadow: var(--bxl3); */
    backdrop-filter: blur(15px);
}
.card4 .first{
    position: relative;
    width: 150px;
    height: 150px;
}
.card7 .first2{
    position: relative;
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.card7{
    display: flex;
    height: 20vh;
    align-items: last baseline;
    gap: 8px;
    width: max-content;

}
.card7 .card-left{
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .3rem;
    background-color: var(--dnice-b);
    padding: .3rem;
}
.card7 .card-left .value{
    font-size: 12px;
    opacity: .8;
}

.card7 .card-right{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-width: 100%;
    border-radius: .3rem;
    border: 1px solid var(--nice-b);
    position: relative;
}

.card7 .card-right .top{
    display: flex;
    align-items: center;
    width: 100%;
    height: max-content;

}
.card-right .top .heading_left{
    display: flex;
    width: 70%;
    background-color: var(--dnice-b);
    padding: .2rem 1rem;
    font-size: 15px;
    font-weight: 700;
    height: 100%;
}
.card-right .top .head_right{
    display: flex;
    width: 30%;
    background-color: var(--nice-b);
    padding: .3rem;
    justify-content: space-around;
    align-items: center;
    opacity: .8;
    color: var(--themed_color_light);
    font-size: 10px;
    height: 100%;
}
.card-right .top .head_right i{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
}
.card-right .middle{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    padding: .3rem 0;
}
.card-right .middle .this_middle{
    display: flex;
    padding: .2rem .5rem;
    align-items: center;
    width: 100%;
    gap: .4rem;
    
}
.card-right .middle .this_middle i{
    color: var(--themed_color_light);
    opacity: .6;
}
.card-right .middle .this_middle .main_value{
    display: flex;
    justify-content: space-between;
    border: 1px solid var(--nice-white);
    border-radius: .2rem;
    align-items: center;
    padding: .2rem;
    
}

.card-right .middle .this_middle .main_value .this_value{
    display: flex;
    font-size: 12px;
    font-weight: 800;
}
.card-right .bottom{
    display: flex;
    background-color: var(--dnice-b);
    width: 100%;
    cursor: pointer;
}


.card4 .second{
    position: relative;
    width: 200px;
    height: 150px;
}
.card4 .first-top{
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--nice-b);
    color: #ccc;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .3rem .2rem;
    border-bottom-right-radius: 8px;
}
.card4 .first-top .trade_id{
    font-size: 8px;
    font-weight: 600;
}
.card4 .first-top i{
    font-size: 30px;
}

.card4 .middle_text{
    font-size: 25px;
    font-weight: 700;
    position: absolute;
    left: 0;
    top: 40%;
    padding-left: 10px;
}
.card4 .first-bottom{
    position: absolute;
    left: 0;
    bottom: 0;
    display: flex;
    /* justify-content: space-between; */
    align-items: center;
    gap: 10px;
}
.card4 .first-bottom2{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 1rem;
    gap: 10px;
}
.first-bottom2 .infoss{
    display: flex;
    justify-content: space-around;
    gap: 20px;
    padding: 0 .2em;
}
.claim{
    padding: .2rem .4rem;
    background-color: var(--nice-b);
    color: #ccc;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}
.purchase{
    padding: .2rem .4rem;
    background-color: var(--nice-b);
    color: #ccc;
    width: 100%;
    text-align: center;
}

.card4 .second_top{
    position: absolute;
    right: 0;
    top: 0;
    background-color: var(--nice-b);
    color: #ccc;
    justify-content: center;
    align-items: center;
    display: flex;
    padding: .3rem .2rem;
    border-bottom-left-radius: 10px;
}

.card4 .second_middle{
    position: absolute;
    right: 0;
    top: 30%;
    font-size: 10px;
    font-weight: 600;
    width: 190px;
    overflow: hidden;
    text-align: left;
    margin-right: .2rem;
}
.card4 .second_bottom{
    position: absolute;
    right: 0;
    bottom: 0;
    display: flex;
    width: 190px;
    justify-content: space-around;
    align-items: center;
}
.card4 .second_bottom i{
    font-size: 25px;
    color: var(--nice-b);
    padding: .18rem;
    transition: var(--tran-03);
    border-radius: 50%;
}
.card4 .second_bottom i.active{
    color: var(--themed_color);

}
.card4 .second_bottom i.now{
    color: var(--themed_color);
    background-color: var(--nice-b);
    justify-content: center;
    align-items: center;
    display: flex;
}

.card4 .first_text{
    font-size: 25px;
    margin-top: .8rem;
    font-weight: 700;
}

.circularpercent{
    position: relative;
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 50%;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.circularpercent::before{
    content: "";
    position: absolute;
    height: 84%;
    width: 84%;
    background-color: var(--nice-b);
    border-radius: 50%;
}

body.light .circularpercent::before{
    background-color: var(--nice-b);
}

.circularpercent .percentage{
    position: relative;
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--nice-white);
}
body.light .circularpercent .percentage{
    position: relative;
    margin: 0;
    font-size: 10px;
    font-weight: 700;
    color: var(--reverse-bw);
}

.popup-notice{
    position: fixed;
    top: 0;
    width: 80%;
    color: var(--text-color);
    padding: 1rem;
    justify-content: center;
    backdrop-filter: blur(20px);
    align-items: center;
    display: flex;
    font-size: 15px;
    font-weight: 700;
    box-shadow: var(--bxl2);
    border-radius: 20px;
    transform: translateY(-100%);
    z-index: 200;
    text-transform: capitalize;
    transition: var(--tran-05);
}

.popup-notice.active{
    transform: translateY(0);
}

.app_slogo{
    display: flex;
    width: 40px;
}
.app_blogo{
    display: none;
    width: 120px;
}
.app_slogo.active{
    display: none;
}
.app_blogo.active{
    display: flex;
    width: 120px;
}

.logonsign{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 0 2rem;
    margin-bottom: 2rem;
}
.logonsign .logo{
    animation: changeimg 10s linear infinite;
}
.logonsign .sign_home{
    justify-content: center;
    align-items: center;
    display: flex;
    gap: 40px;
}
.sign_home .navlink{
    font-weight: 700;
    background-color: var(--themed_color_light);
    color: var(--nice-white);
    padding: .2rem;
    cursor: pointer;
    border-radius: 4px;
}

.greeting{
    font-size: 22px;
    font-weight: 800;
    display: flex;
    text-transform: capitalize;
}
.names{
    font-size: 37px;
    font-weight: 800;
    margin-left: .5rem;
    word-wrap: break-word;
    max-width: 90%;
    text-transform: capitalize;
}

.current_time_holder{
    background-color: var(--ddiv-b);
    box-shadow: var(--bxl3);
    color: var(--nice-white);
    padding: 1rem;
    border-radius: .5rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    margin-top: 1rem;
    width: max-content;
}
.current_time_holder .c_time{
    font-size: 45px;
    margin-bottom: .3rem;
}
.current_time_holder .time_location{
    font-size: 12px;
    margin-bottom: .3rem;
}
.div1 .title{
    padding: 0 .2rem;
    font-size: 15px;
    font-weight: 700;
    margin-top: 1.5rem;
}
.noti_card{
    border-radius: 1rem 1.875rem;
    display: flex;
    flex-direction: column;
    background-color: var(--ddiv-b2);
    margin: 0 .3rem;
    margin-top: .3rem;
    padding: 0 1rem ;
    justify-content: center;
    box-shadow: var(--bxl3);
    align-items: center;

}
.noti_card .first{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .2rem;
    cursor: pointer;
}
.noti_card .first i{
    font-size: 25px;
    color: var(--dark-d);
}
.noti_card.active .first i{
    transform: rotate(180deg);
}

.noti_card .noti_holder{
    display: none;
    flex-direction: column;
    width: 95vw;
    gap: 10px;
    transition: var(--tran-03);
}
.noti_card.active .noti_holder{
    display: flex;
    flex-direction: column;
    width: 95vw;
    height: 15vh;
    overflow-y: scroll;
    gap: 10px;
}

.noti_card .first .not{
    font-size: 13px;
    font-weight: 700;
}
.noti_card .noti_holder .not{
    padding: .3rem .2rem;
    font-size: 12px;
    font-weight: 700;
}

.lock{
    position: fixed;
    bottom: 10%;
    right: 30px;
}
.lock i{
    font-size: 50px;
}

.widget_holder{
    margin-top: .3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    width: 100%;
}
.widget_holder .thisz-widget{
    position: relative;
    width: 40%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* background-color: var(--ddiv-b2); */
    background: var(--body-color-gradient);
    gap: 5px;
    border-radius: 1.875rem 1rem;
    box-shadow: var(--bxl3);
}
.thisz-widget .widget_title{
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: .2rem;
    color: var(--text-color);
}
.thisz-widget .widget_not{
    font-size: 10px;
    font-weight: 600;
    color: var(--text-color);
}
.choices{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.choices .choices_holder{
    display: flex;
    width: 100px;
    /* background-color: var(--nice-b); */
    overflow: hidden;
    border-radius: .3rem;
}
.choices .choices_holder .this_choice{
    display: flex;
    min-width: 100%;
    transition: var(--tran-03);
    transform: translate(0%);
    justify-content: center;
    align-items: center;
    
}
.choices .choices_holder .this_choice .choice{
    display: flex;
    font-size: 14px;
    justify-content: center;
    align-items: center;
}

.thisz-widget i{
    color: var(--themed_color_light);
}
.nice_show{
    display: flex;
    justify-content: space-between;
    align-items: last baseline;
    margin-right: 1rem;
    flex-wrap: wrap;
    gap: 10px;
    width: 100%;
}
.upgrade_row{
    justify-content: center;
    display: flex;
    align-items: center;
    
}
.upgrade{
    flex-direction: column;
    justify-content: center;
    display: flex;
    box-shadow: var(--bxl3);
    margin-right: 2rem;
    padding: .5rem;
}
.upgrade i, .upgrade_row i{
    font-size: 12px;
    margin-left: .3rem;
}
.upgrade .ulevel, .upgrade_row .ulevel{
    font-size: 15px;
    font-weight: 600;
}
.upgrade .upgrade_level, .upgrade_row .upgrade_level{
    font-size: 12px;
}

.card5{
    margin: 1rem ;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
}

.card5 .main_details{
    gap: 10px;
    padding: .5rem;
    width: 90%;
    display: flex;
    flex-direction: column;
    background-color: var(--ddiv-bh);
    box-shadow: var(--bxl2);
    justify-content: center;
    align-items: center;
    border-radius: 30px;
}

.card5 .main_details .title{
    font-size: 15px;
    font-weight: 700;
    /* color: rgba(255, 255, 255, 0.54); */
    text-transform: capitalize;
    opacity: .8;
}
.card5 .main_details .amount{
    font-size: 35px;
    font-weight: 800;
    margin-bottom: .3rem;
}

.card5 .time{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 10px;
    font-weight: 700;
    width: 70%;
    background-color: var(--ddiv-bh);
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
}
.card5 .xtra{
    display: flex;
    height: 4px;
    width: 60%;
    background-color: var(--ddiv-bh);
    border-bottom-left-radius: 80px;
    border-bottom-right-radius: 80px;
    box-shadow: var(--bxl3);
}

.upgrade_reward{
    display: flex;
    position: relative;
    align-items: center;
    background: var(--body-color-gradient);
    justify-content: space-between;
}

.upgrade_reward i{
    font-size: 30px;
    width: 35px;
    height: 35px;
    justify-content: center;
    align-items: center;
    display: flex;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    color: var(--themed_color);
}
.upgrade_reward span{
    font-size: 13px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-right: 10px;
    border-top-right-radius: 1rem;
    border-bottom-right-radius: 1rem;
    text-transform: capitalize;
    margin: .3rem;
}

.pin_body{
    display: flex;
    flex-direction: column;
    gap: 40px;
    justify-content: center;
    align-items: center;
    width: 90%;
    padding: 5rem;
}
.pin_body .show{
    display: flex;
    justify-content: space-around;
    width: 150px;
}
.pin_body .show span{
    width: 20px;
    height: 20px;
    border: 1px solid var(--themed_color_light);
    background-color: transparent;
    border-radius: 50%;
}
.pin_body .show span.active{
    background-color: var(--themed_color);
    animation: pop .3s ease;
}
.pin_body .keys{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 200px;
    align-items: center;
    gap: 10px;
 }
.pin_body .keys .pin_items{
    display: flex;
    width: 55px;
    height: 55px;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    cursor: pointer;
}

.pin_body .keys .pin_items.numbers{
    background-color: var(--reverse-bw);
    /* background-color: #131313; */
}

.epic_card_holder{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    flex-direction: column;
}


.epic_card{
    display: flex;
    /* flex-direction: column; */
    background-color: var(--ddiv-b);
    border-radius: 1.875rem;
    height: 25vh;
    width: 100%;
    /* position: relative; */
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
}

.epic_card .left{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
    background-color: var(--nice-b);
    height: 100%;
}
.epic_card .right{
    display: flex;
    justify-content: center;
    flex-direction: column;
    /* align-items: baseline; */
    width: 50%;
}
.epic_card .right .main_value{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 22px;
    font-weight: 700;
    margin: 3rem;
}
.epic_card .right .right_bottom{
    display: flex;
    align-items: center;
    justify-content: space-around;
}
.epic_card .right .right_bottom .icon_hders{
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-around;
}
.epic_card .right .right_bottom .icon_hders i{
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--themed_color_light);
    font-size: 20px;
}
.epic_card .right .right_bottom .icon_hders .icn_title{
    display: flex;
    color: var(--themed_color_light);
    font-size: 12px;
    font-weight: 700;
}

.below-card_time{
    width: 70%;
    background-color: #181818;
    font-size: 12px;
    padding: .2rem .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.unique_slide{
    display: flex;
    justify-content: space-between;
    width: 100%;
    overflow: hidden;
}

.unique_slide .slider{
    display: flex;
    justify-content: flex-start;
    align-items: baseline;
    width: 100%;
    padding: .3rem 1rem;
    background-color: var(--nice-b);
    /* transform: translate(500% 0%); */
    transform: translateX(-100%);
    z-index: 1;
    transition: var(--tran-03);
}
.unique_slide .slider.active{
    transform: translateX(0%);

}
.unique_slide .icon_slides_holder{
    display: flex;
    flex-direction: column;
    background-color: var(--dnice-b);
    z-index: 2;
}
.unique_slide .icon_slides_holder i{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.6rem .3rem;
    border: 1px solid var(--nice-b);
}


.notice_card{
    width: 100%;
    height: 20vh;
    background-color: var(--ddiv-b);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.notice_card .tp{
    display: flex;
    height: 50%;
}
.notice_card .tp .tp_title{
    width: 50%;
    display: flex;
    font-size: 15px;
    font-weight: 800;
    padding: .2rem 1rem;
    align-items: center;
    text-transform: capitalize;
}
.notice_card .tp .tp_value{
    width: 50%;
    display: flex;
    font-size: 15px;
    font-weight: 800;
    background-color: var(--ddiv-bh);
    padding: .2rem 1rem;
    align-items: center;
}
.notice_card .bt{
    display: flex;
    height: 50%;
    align-items: center;
}
.notice_card .bt .this_bt{
    display: flex;
    flex-direction: column;
    justify-content:center;
    align-items: center;
    background-color: var(--ddiv-bh);
    width: 33.33%;
    height: 100%;
    gap: 20px;
    border: 1px solid var(--border-faded);
}
.notice_card .bt .this_bt .bt_title{
    font-size: 12px;
    text-transform: capitalize;
    font-weight: 500;
}
.notice_card .bt .this_bt .bt_value{
    font-size: 20px;
    font-weight: 700;
}

.modal_accept{
    position: absolute;
    top: 35%;
    backdrop-filter: blur(15px);
    border: 1px solid var(--border-faded);
    box-shadow: var(--bxl3);
    display: flex;
    flex-direction: column;
    border-radius: 1.875rem;
    overflow: hidden;
    animation: pop .3s ease-in-out;
    gap: 20px;
}
.modal_accept .top{
    width: 100%;
    justify-content: center;
    align-items: center;
    padding: .3rem .8rem;
    flex-direction: column;
    display: flex;
    gap: 10px;

}

.modal_accept .top .head{
    font-size: 25px;
    font-weight: 700;
}
.modal_accept .top .head_text{
    font-size: 12px;
    font-weight: 500;
}
.modal_accept .top .head_text_agreed{
    font-size: 12px;
    font-weight: 600;
}

.modal_accept .bottom{
    width: 100%;
    align-items: center;
    display: flex;
}

.decision{
    border: 1px solid var(--border-faded);
    width: 50%;
    text-align: center;
    padding: .3rem;
    cursor: pointer;
    font-weight: 800;
    font-size: 15px;
    text-transform: uppercase;
    border-radius: 1.875rem;

}
.decision.no{
    color: var(--danger);
}
.decision.yes{
    color: var(--nice_green);
}
.decision.no:hover{
    color: var(--nice-b);
    background-color: var(--danger);
}
.decision.yes:hover{
    color: var(--nice-b);
    background-color: var(--nice_green);
}

.list_holder{
    display: flex;
    flex-direction: column;
    width: 80%;
    background-color: var(--ddiv-b);
    height: max-content;
}
.list_holder .this_list{
    display: flex;
    align-items: center;
    padding: .3rem .2rem;
    justify-content: space-around;
    border: 1px solid var(--border-faded);
}
.list_holder .this_list .infos{
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: .3rem 0 0 .3rem ;
    margin: 0;
    height: 100%;
    background-color: transparent;
    cursor: pointer;

}
.list_holder .this_list .infos .list_title{
    display: flex;
    font-size: 20px;
    font-weight: 800;
    
}
.list_holder .this_list .infos .bellow_holder{
    display: flex;
    justify-content: space-between;
    align-items: center;
    
}
.list_holder .this_list .infos .bellow_holder .left{
    display: flex;
    font-size: 12px;
    font-weight: 800;
    color: var(--themed_color_light);
    text-transform: uppercase;
    
}
.list_holder .this_list .infos .bellow_holder .right{
    display: flex;
    font-size: 15px;
    font-weight: 60;
    background-color: var(--reverse-bw);
    padding: .3rem;
    border-top-left-radius: 10px;
    opacity: .8;
    
}

.card_holder_epic{
    display: flex;
    padding: .5rem .3rem;
    flex-wrap: wrap;
    width: 100%;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.card_holder_epic .this_hd_epic{
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    margin-bottom: 2.5rem;
    width: max-content;
    max-width: 100%;
}

.card_holder_epic .this_hd_epic .tp{
    display: flex;
    flex-direction: column;
    z-index: 1;
    /* position: absolute; */
    width: 90%;
    /* top: -10px; */
    background-color: var(--nice-white);
    color: var(--nice-b);
    /* border: 1px solid var(--dnice-b); */
    border-radius: .6rem;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
    border-top: none;
    border-left: none;
    border-right: none;
    overflow: hidden;
}

.card_holder_epic .this_hd_epic .tp .tp_main{
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 30px;
    margin: .8rem 0;
    font-weight: 900;
}

.card_holder_epic .this_hd_epic .tp .tp_bttom{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    justify-content: space-between;
    padding: 0 1rem;
}
.card_holder_epic .this_hd_epic .tp .tp_bttom .this_tp_text{
    font-size: 15px;
    font-weight: 800;
}

.card_holder_epic .this_hd_epic .tp .tp_ic{
    display: flex;
    gap: 10px;
}
.card_holder_epic .this_hd_epic .tp .tp_ic i{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: .3rem;
    color: var(--themed_color_light);
    font-size: 30px;
    background-color: var(--nice-b);
    border-bottom-right-radius: .3rem;
}
.card_holder_epic .this_hd_epic .tp .tp_ic .bt_name{
    display: flex;
    font-size: 15px;
    font-weight: 900;
    width: 100%;
    text-transform: uppercase;
}

.card_holder_epic .this_hd_epic .bt{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    padding: 2.5rem 0 .3rem 0;
    bottom: -40px;
    width: 95%;
    height: 80px;
    border-radius: 1rem;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    background-color: var(--nice-b);
    color: var(--nice-white);

}
.card_holder_epic .this_hd_epic .bt .purchase{
    background-color: transparent;
    display: flex;
    text-align: center;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    width: 100%;
    font-weight: 900;
    color: var(--themed_color_light);
}

.container{
    display: flex;
    padding: 1rem;
    width: max-content;
    background-color: var(--ddiv-bh);
    color: var(--text-color);
    box-shadow: 8px 5px 0 var(--themed_color_light);
    border-radius: 1rem;
}
.container2{
    display: flex;
    justify-content: center;
    width: 100%;
}

.baseline{
    align-items: baseline;
    flex-direction: column;
    justify-content: center;
}
.center2{
    /* justify-content: center; */
    align-items: center;
    display: flex;
    width: 100%;
}
.center{
    align-items:center;
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}

.vertical_form{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.vertical_form .selector{
    display: flex;
    margin-bottom: 1rem;
    position: relative;
    width: 100%;
}

.quick_choice{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--ddiv-bh);
    box-shadow: var(--bxl);
    padding: 1rem .3rem;
    margin: 1rem 0;
    gap: 20px;
    border-radius: .3rem .4rem;
    cursor: pointer;
}
.quick_choice .title{
    font-size: 12px;
    font-weight: 600;
    /* color: var(--reverse-bw); */
}
.quick_choice .key{
    font-size: 15px;
    font-weight: 700;
    padding: .5rem;
    background-color: var(--themed_color_light);
    border-radius: .2rem;
    color: var(--reverse-bw);
}

.this_form_clicker{
    margin: .5rem 0 2rem 0;
    font-size: 15px;
    font-weight: 700;
}
input[type="checkbox"]{
    accent-color: var(--themed_color_light);
    width: 1.25em;
    height: 1.25em;
}
input[type="submit"],.saver, .check{
    display: flex;
    background-color: transparent;
    border: 1px solid var(--themed_color_light);
    padding: .5rem 1rem;
    transition: var(--tran-03);
    color: var(--text-color);
    border-radius: .8rem;
    text-transform: uppercase;
    width: max-content;
    cursor: pointer;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
input[type="submit"]:hover,.saver:hover, .check:hover{
    background-color: var(--themed_color_light);
    /* border: none; */
    color: var(--reverse-bw);
    border-radius: 1rem;
}

.this_form_input{
    display: flex;
    flex-direction: column;
    height: 8vh;
    position: relative;
    cursor: pointer;
}
.this_form_input textarea{
    background-color: transparent;
    outline: none;
    border: none;
    border-bottom: 1px solid var(--nice-b);
    width: 300px;
    height: auto;
    align-items: last baseline;
    transition: var(--tran-03);
    border-bottom: 1px solid var(--border-faded);
    color: var(--text-color);
    margin-top: .1rem;
    margin-bottom: .3rem;
}
.this_form_input input{
    background-color: transparent;
    outline: none;
    border: none;
    border-bottom: 1px solid var(--nice-b);
    width: 300px;
    height: 15px;
    align-items: last baseline;
    transition: var(--tran-03);
    border-bottom: 1px solid var(--border-faded);
    color: var(--text-color);
    margin-top: .1rem;
}
.this_form_input input:focus{
    height: 20px;
    margin-top: .4rem;
    margin-bottom: 0;
    border-top: 1px solid var(--border-faded);
    color: var(--text-color);
}

.this_form_input i{
    position: absolute;
    right: 5%;
    top: 10%;
    color: var(--themed_color_light);
}
.this_form_input .label{
    font-size: 12px;
    font-weight: 800;
}
/* .saver, .check{
    display: flex;
    background-color: transparent;
    border: 1px solid var(--themed_color_light);
    padding: .5rem 1rem;
    transition: var(--tran-03);
    color: var(--text-color);
    border-radius: .8rem;
    text-transform: uppercase;
    cursor: pointer;
    justify-content: center;
} */
.saver i, .check i{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 12px;
    /* color: var(--themed_color_light); */
    
}
.saver .save_clicker, .check .save_clicker{
    font-size: 15px;
    font-weight: 800;

}

.logo_control{
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;

}

.img_epic_holder{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: .5rem;
    width: 60%;
    max-width: 70%;

}
.img_epic_holder img{
    width: 150px;
    border-radius: .5rem;
}

.nice_notice{
    color: var(--themed_color_light);
    background-color: var(--reverse-bw);
    padding: .3rem;
    display: flex;
    opacity: .7;
    border-radius: .2rem;
    font-size: 10px;
    margin: 1rem 0;
}
.nice_notice2{
    color: var(--light-l);
    padding: .3rem;
    display: flex;
    border-radius: .2rem;
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
    margin: 1rem 0;
}

.inner_container{
    display: flex;
    flex-direction: column;
    max-width: 99%;
    justify-content: center;
    align-items: center;
}
.container .inner_container .infos{
    width: 70vw;
    display: flex;
    flex-direction: column;
    height: auto;
}
.container .inner_container .infos .guide_text{
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    font-size: 10px;
    font-weight: 800;
}
body.light .follo_up_card{
    background-color: transparent;
}
.follo_up_card{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--nice-b);
    border-radius: .5rem;
    padding: 0 .2rem;
    max-width: 85vw;
}
.follo_up_card.admin .bt{
    display: none;
}
.follo_up_card.admin.active .bt{
    display: flex;
}
.popup .follo_up_card{
    width: max-content;
}
.follo_up_card .tp, .follo_up_card .bt{
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: .3rem;

}
.follo_up_card .tp .choices{
    display: flex;
    border: 1px solid var(--themed_color_light);
    padding: 5px;
    border-radius: 50%;
    margin: .1rem .2rem;
}
.follo_up_card .tp .choices.first_icon{
    display: flex;
    background-color: var(--themed_color_light);
    padding: 5px;
    border-radius: 50%;
    margin: .1rem .2rem;
}
.follo_up_card.active .tp .choices.first_icon{
    display: flex;
    background-color: transparent;
    padding: 5px;
    border-radius: 50%;
    margin: .1rem .2rem;
}
.follo_up_card .tp .choices.second_icon{
    display: flex;
    background-color: transparent;
    padding: 5px;
    border-radius: 50%;
    margin: .1rem .2rem;
}
.follo_up_card.active .tp .choices.second_icon{
    display: flex;
    background-color: var(--themed_color_light);
    padding: 5px;
    border-radius: 50%;
    margin: .1rem .2rem;
}
.follo_up_card .md{
    display: flex;
    width: 100%;
    height: 100%;
    max-width: 100%;
    gap: 5px;
    overflow: hidden;
    
}

.follo_up_card .md .md_last, .follo_up_card .md .md_first{
    display: flex;
    width: 100%;
    height: 100%;
    min-width: 100%;
    transform: translateX(0%);
    flex-direction: column;
    transition: var(--tran-03);
}
.follo_up_card .md .md_last{
    justify-content: center;
    align-items: center;
}
.follo_up_card.active .md .md_last, .follo_up_card.active .md .md_first{
    transform: translateX(-100%);
}

.follo_up_card .md .md_first .main_md_vaiue_holder{
    display: flex;
    gap: 20px;
    border-radius: .3rem;
    align-items: center;
    max-width: 100%;
    padding: .2rem 1rem;
}
.follo_up_card .md .md_first .main_md_vaiue_holder .main_md_vaiue{
    display: flex;
    justify-content: space-around;
    border-radius: .3rem;
    padding: .2rem 1rem;
    text-wrap: wrap;
    font-size: 12px;
    overflow: hidden;
    font-weight: 600;
    max-width: 100%;
    border: 1px solid var(--themed_color_light);
    font-weight: 900;
}
.follo_up_card .md .md_first .main_md_vaiue_holder i{
    position: relative;
}
.follo_up_card .md .md_first .main_md_vaiue_holder i.active::after{
    display: block;
}
.follo_up_card .md .md_first .main_md_vaiue_holder i::after{
    content: 'copied';
    background-color: var(--dnice-b);
    color: var(--themed_color);
    padding: .3rem;
    border-radius: .3rem;
    justify-content: center;
    align-items: center;
    display: block;
    position: absolute;
    top: -30px;
    left: -15px;
    display: none;
    transition: var(--tran-03);
}
.follo_up_card .md .md_first .this_holder{
    display: flex;
    background-color: transparent;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    align-items: baseline;
}

.follo_up_card .md .md_first .this_holder .this_hd_second{
    display: flex;
    flex-direction: column;
}


.center{
    justify-content: center;
    align-items: center;
    display: flex;
}


.follo_up_card .md .md_first .this_holder .this_hd_first{
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 48%;
}

.follo_up_card .md .md_first .this_holder .this_hd_first .head{
    font-size: 25px;
    font-weight: 800;
    text-transform: uppercase;
}

.follo_up_card .md .md_first .this_holder .this_hd_first .type{
    font-size: 12px;
    font-weight: 900;
    text-transform: uppercase;
    background-color: var(--dnice-b);
    padding: .2rem;
    color: var(--themed_color);
    border-radius: .3rem;
    width: max-content;
    text-align: center;
}
.follo_up_card .bt{
    transform: var(--tran-03);
}

.follo_up_card .bt i{
    color: var(--themed_color_light);
    font-size: 40px;
}
.follo_up_card.active .bt{
    flex-direction: row-reverse;
}
.follo_up_card.active .bt i{
    transform: rotate(180deg);
}
.follo_up_card .bt span{
    font-size: 10px;
    font-weight: 800;
}

#deposite_form{
    gap: 30px;
    flex-direction: column;
    display: flex;
}

.vertical_list_values{
    display: flex;
    align-items: center;
    border-radius: .3rem;
    /* border: 1px solid var(--themed_color_light); */
}

.vertical_list_values .left, .vertical_list_values .right{
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 50%;
    padding: 0 .5rem;
}

.vertical_list_values .left{
    border: none;
    background-color: var(--ddiv-b);
    border-right: 1px solid var(--themed_color_light);
}
.vertical_list_values .left .list_title{
    font-size: 12px;
    font-weight: 800;
    text-transform: capitalize;
    height: 16px;
}
.vertical_list_values .right .list_text{
    font-size: 12px;
    font-weight: 600;
    text-transform: capitalize;
    height: 16px;
}

.vertical_list_values .right{
    border: none;
    border-left: .5px solid var(--themed_color_light);
}

.payment_adder, .payment_adder i{
    color: var(--themed_color);
    font-size: 15px;
    font-weight: 800;
}

.drop_down_holder{
    display: flex;
    gap: 20px;
    flex-direction: column;
    /* margin: 1.5rem 0; */

}
.drop_down_holder.active .drop_down_content{
    display: flex;
}
.drop_down_holder .drop_top{
    display: flex;
    justify-content: space-between;
    padding: .5rem .3rem;
    border-radius: .2rem;
    background-color: var(--ddiv-bh);
}
.drop_down_holder .drop_top .dt_title{
    display: flex;
    font-size: 22px;
    font-weight: 900;
    text-transform: uppercase;
    align-items: center;
    color: var(--text-color);
}
.drop_down_holder .drop_top .dt_title i{
    margin-right: .5rem;
}
.drop_down_holder.active .drop_top .arr{
    transform: rotate(180deg);
}
.drop_down_holder .drop_top i{
    font-size: 30px;
    color: var(--themed_color_light);
    transition: var(--tran-03);
}
.drop_down_holder .drop_down_content{
    display: none;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: .3rem;
    gap: 30px;
    transition: var(--tran-03);
}
.drop_down_holder .drop_down_content .left, .drop_down_holder .drop_down_content .right{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 100%;
}
.drop_down_holder .drop_down_content .left .heading, .drop_down_holder .drop_down_content .right .heading{
    font-size: 15px;
    font-weight: 700;
    text-transform: capitalize;
}
.drop_down_holder .drop_down_content .left .left_content, .drop_down_holder .drop_down_content .right .right_content{
    display: flex;
    flex-direction: column;
    animation: pop .3s ease;

}

.drop_down_holder .drop_down_content .right .right_content{
    margin-bottom: 2rem;
}

.drop_down_holder .drop_down_content .left .left_content{
    background-color: var(--ddiv-bh);
    padding: .3rem .4rem;
    border-radius: .3rem;
    gap: 10px;
    cursor: pointer;
    flex-direction: column;
    
    
}
.drop_down_holder .drop_down_content .left .left_content .this_content{
    flex-direction: column;
    display: flex;
    padding-bottom: .2rem;
    border-bottom: 1px solid var(--border-faded);
}
.drop_down_holder .drop_down_content .left .left_content .main_head{
    font-size: 20px;
    font-weight: 800;
    color: var(--themed_color_light);
}
.drop_down_holder .drop_down_content .left .left_content .below_head{
    display: flex;
    justify-content: space-between;
}
.drop_down_holder .drop_down_content .left .left_content .main_below_text{
    font-size: 12px;
    font-weight: 800;
    opacity: .3;
    color: var(--text-color);
}
.drop_down_holder .drop_down_content .left .left_content .delete{
    justify-content: flex-end;
    display: flex;
    align-items: center;
    font-size: 10px;
    font-weight: 400;
    gap: 10px;
    opacity: .4;
    margin-top: .6rem;
    color: var(--text-color);
}
.drop_down_holder .drop_down_content .left .left_content .delete i{
    font-size: 15px;
    color: var(--themed_color_light)
}
.drop_down_holder .drop_down_content .left .left_content .delete i:hover{
    color: var(--themed_color);
}

.continuous{
    background-color: var(--ddiv-bh);
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    border-radius: 30px;
    max-height: 90vh;
    overflow: scroll;

}
.continuous::-webkit-scrollbar, .bigtext_feild::-webkit-scrollbar{
    display: none;
}

.continuous .top{
    display: flex;
    width: 80vw;
    
}
.continuous .top .this_continuos{
    display: flex;
    width: 25%;
    justify-content: center;
    align-items: center;
    position: relative;
}
.continuous .top .this_continuos i{
    display: flex;
    font-size: 40px;
    justify-content: center;
    align-items: center;
    background-color: var(--white-body);
    color: var(--themed_color_light);
    border-radius: 50%;
    padding: .3rem;
}
.continuous .top .this_continuos.active i{
    background-color: var(--themed_color_light);
    color: var(--reverse-bw);
}
.continuous .top .this_continuos .continuos_title{
    position: absolute;
    top: 50px;
    font-size: 10px;
    font-weight: 700;
}
.continuous .top .this_continuos .continous_dash{
   width: 100%;
   height: 5px;
   background-color: var(--themed_color_light);
}
.continuous .middle{
    display: flex;
    /* justify-content: center; */
    align-items: center;
    width: 100%;
    overflow: hidden;
}

.continuous .middle .this_middle{
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 3rem 0;
    flex-direction: column;
    padding: .5rem;
    min-width: 100%;
    transform: translate(0%);
    transition: var(--tran-03);
}

.continuous .middle .middle_head{
    font-size: 35px;
    font-weight: 800;
    margin-bottom: 1rem;
    text-align: center;
}
.continuous .bottom{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
}
.continuous .bottom i{
    display: flex;
    font-size: 40px;
    color: var(--themed_color_light);
}


/* admin */

.details_card{
    /* background-color: var(--ddiv-bh); */
    display: flex;
    justify-content: space-between;
    height: 30vh;
    width: 100%;
    animation: glide_down .6s linear;
}
.details_card .left, .details_card .right{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    margin: .5rem 0;
    width: 50%;
    padding: .5rem;
}

.details_card .left .this_info{
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background-color: var(--nice-white);
    border-radius: 10px;
    /* height: 40px; */
    justify-content: space-between;
    padding: .2rem;
}
.details_card .left .this_info.right{
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    gap: 10px;
}
.details_card .left .this_info.right .title{
    border-radius: .5rem;
}
.details_card .left .this_info.right .value{
    padding-left: .5rem;
}
.details_card .left .this_info .title{
    background-color: var(--nice-b);
    color: var(--themed_color_light);
    padding: .2rem .5rem;
    font-size: 15px;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 800;
    box-shadow: var(--bxl2);
}
.details_card .left .this_info .value{
    color: var(--dnice-b);
    opacity: .8;
    font-size: 15px;
    font-weight: 800;
}


.chart_holder{
    width: 100%;
    /* height: 300px; */
    padding: .3rem;
    border-radius: .2rem;
    justify-content: center;
    align-items: center;
    display: flex;
    max-height: 190px;
    overflow: hidden;
}
.chart_holder .this_chart{
    width: 100px;
    height: 190px;
    background-color: var(--ddiv-bh);
    box-shadow: var(--bxl2);
    display: flex;
    border-radius: .5rem;
    
}


.right_container{
    display: flex;
    /* flex-direction: column; */
    gap: 10px;
    justify-content: space-around;
    margin: 1rem;
    margin-bottom: 0;
    width: 100%;
}

.this_user_card{
    display: flex;
    width: 100%;
    padding: 0 .2rem;
    align-items: center;
}
.this_user_card .left i{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    font-size: 30px;
}
.this_user_card .right{
    display: flex;
    padding: .3rem .5rem;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    
}
.this_user_card .right .first{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
}
.this_user_card .right .first .top{
    display: flex;
    flex-direction: column;
    width: 100%;
}
.this_user_card .right .first .top .Name{
    font-size: 22px;
    font-weight: 800;
    text-transform: uppercase;
}
.this_user_card .right .first .top .rank{
    font-size: 9px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--themed_color_light);
    opacity: .8;
}
.this_user_card .right .first .bottom{
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.this_user_card .right .first .bottom .balance{
    font-size: 15px;
    font-weight: 900;
}
.this_user_card .right .first .bottom .balance.active{
    color: var(--themed_color_light);
}
.this_user_card .right .first .bottom .notifications{
    display: flex;
    justify-content: space-around;
    align-items: center;
    gap: 10px;
    margin-right: 2rem;
}
.this_user_card .right .last{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}
.this_user_card .right .last i{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
}
.this_user_card.second .right .last i{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
}

.dot{
    border: 1px solid var(--nice-white);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.dot.stoped{
    border: 1px solid var(--danger);
    background-color: var(--danger);
}
.dot.on{
    border: 1px solid var(--nice_green);
    background-color: var(--nice_green);
}
.dot.pending{
    border: 1px solid gold;
    background-color: gold;
}
.dot.active.stoped{
    border: 1px solid var(--danger);
    background-color: var(--danger);
    animation: colorchanger 2.5s linear infinite;
}
.dot.active.on{
    border: 1px solid var(--nice_green);
    background-color: var(--nice_green);
    animation: colorchanger 3.5s linear infinite;
}
.dot.active.pending{
    border: 1px solid gold;
    background-color: gold;
    animation: colorchanger 3s linear infinite;
}

.holder_column .drop_down_holder.admin{
    width: 100%;
    margin: .3rem .5rem 1rem .5rem;
    padding: .5rem .3rem;
}

.drop_down_holder.admin .drop_top{
    border-radius: .5rem;
    align-items: center;
}
.drop_down_holder.admin .drop_top .this_setting{
    width: 100;
    flex-direction: column;
    gap: 3px;
}
.drop_down_holder.admin .drop_top .this_setting .dt_sub_title{
    font-size: 9.5px;
    font-weight: 800;
    width: 100%;
}
.drop_down_holder.admin .drop_down_content .this_content{
    flex-direction: column;
}
.drop_down_holder.admin .drop_down_content .this_content .main_below_text{
    opacity: .9;
}
.drop_down_holder.admin .drop_down_content .this_content .main_below_text.long{
    opacity: .8;
    margin: .5rem 0;
}
.drop_down_holder.admin .drop_down_content .this_content .main_below_text_sm{
    opacity: .7;
    margin-top: .2rem;
    text-transform: capitalize;
    font-size: 12px;
}

.drop_down_holder.admin .drop_down_content{
    display: flex;
}
.drop_down_holder.admin .drop_down_content .left{
    display: none;
}
.drop_down_holder.admin.active .drop_down_content .left{
    display: flex;
}
.drop_down_holder .drop_down_content .right .this_right_content{
    display: none;
}
.drop_down_holder .drop_down_content .right .this_right_content.active{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}

.column_card{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin-bottom: .5rem;
}
.column_card .column_head{
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--themed_color_light);
}
.column_card .column_head.bigger{
    font-size: 20px;
    font-weight: 800;
}
.column_card .vertical_list_values{
    width: 100%;
}

.btn1{
    width: 150px;
    padding: .4rem .3rem;
    background-color: transparent;
    outline: none;
}
.deny{
    color: var(--danger);
}
.okay{
    color: var(--nice_green);
}

.deny:hover{
    color: var(--nice-b);
    background-color: var(--danger);
}
.okay:hover{
    color: var(--nice-b);
    background-color: var(--nice_green);
}

.row_card{
    display: flex;
    width: 100%;
    justify-content: space-around;
    
}
.row_card .left, .row_card .right{
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    border: 1px solid var(--border-faded);
    width: 50%;
    padding: .3rem;
    border-left: none;
    border-right: none;
    margin: 0 .5rem;
}
.row_card .title{
    font-size: 25px;
    font-weight: 800;
    color: var(--themed_color_light);
}
.row_card .value{
    font-size: 20px;
    font-weight: 900;
}
.row_card .right{
    border-radius: .3rem;
    padding: .5rem 0;
}

.row_card img{
    width: 100px;
}

.show_pops{
    display: none;
    position: fixed;
    height: 100vh;
    min-width: 100vw;
    background-color: #212121e5;
    margin: 0;
    z-index: 50;
    left: 0;
    top: 0;
}
.show_pops.active{
    display: flex;
}
.show_pops .exit{
    display: flex;
    position: fixed;
    top: 2%;
    left: 5%;
    font-size: 30px;
    z-index: 100;
}
.exit{
    display: flex;
    position: fixed;
    top: 2%;
    left: 5%;
    z-index: 100;
}

.show_pops .main_pops{
    display: flex;
    position: relative;
    /* justify-content: center; */
    align-items: center;
    position: absolute;
    flex-direction: column;
    width: 100%;
    top: 0;
    padding: .3rem;
    z-index: -1;
    gap: 10px;
    height: 100vh;
}
/* .show_pops .main_pops.second{
    justify-content: center;
    position: relative;
    height: 100vh;
    
} */
.show_pops .main_pops.second .container{
    width: 70vw;
    display: flex;
    position: relative;
    gap: 10px;
    height: 100vh;
    flex-direction: column;
    align-items: center;
}
.show_pops .main_pops img{
    max-width: 90vw;
    max-height: 90vh;
}

.text_holder{
    display: flex;
    gap: 20px;
    padding: .5rem 1.2rem;
    font-size: 15px;
    background-color: var(--nice-white);
    justify-content: center;
    align-items: center;
    border-radius: 20px;
}
.text_holder .first_text{
    color: var(--nice-b);
    font-weight: 600;

}
.text_holder .second_text{
    color: var(--themed_color);
    background-color: var(--nice-b);
    padding: .5rem 1rem;
    border-radius: 15px;
    text-transform: uppercase;
}
.bigtext_feild{
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 78vh;
    height: 78vh;
    width: 100%;
    overflow-x: hidden;
}
.bigtext_feild .review{
    display: flex;
    text-wrap: wrap;
    font-size: 15px;
    font-weight: 800;
    word-wrap: break-word;
    width: 99%;
}

.bigtext_feild .this_text i{
    font-size: 20px;
    color: var(--themed_color_light);
}
.bigtext_feild .this_text.other_user i{
    color: var(--text-color);
}
.bigtext_feild .this_text{
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    gap: 10px;
    width: 100%;
}
.bigtext_feild .this_text .text_feild{
    background-color: var(--themed_color_light);
    font-size: 15px;
    border-radius: 5px;
    font-weight: 700;
    padding: 1rem;
    width: 100%;
}
.bigtext_feild .this_text.other_user{
    flex-direction: row;
}
.bigtext_feild .this_text.other_user .text_feild{
    background-color: var(--ddiv-bh);
}
.text_submit_form{
    position: absolute;
    bottom: 1%;
    z-index: 1;
    min-width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 5px;
}






.people_holder{
    display: flex;
    min-width: 100%;
    width: 100%;
    min-height: 80vh;
    overflow-x: hidden;
    animation: glide_up .6s linear;
    padding-bottom: 3rem;
}
.people_holder::-webkit-scrollbar{
    display: none;
}
.people_holder .holder_column{
    transform: translateX(0%);
    width: 100%;
    margin: 0;
    transition: var(--tran-03);
}
.people_holder.active .holder_column{
    transform: translateX(-100%);
    width: 100%;
}
.people_holder.active .holder_column .this_user_card{
    width: 100%;
}


.locked_feature{
    display: flex;
    position: absolute;
    z-index: 1;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
    background-color: #1a1b1b6a;
    backdrop-filter: blur(1px);

}
.locked_feature i{
    display: flex;
    font-size: 50px;
    color: var(--themed_color_light);
}


.show_text{
    font-size: 20px;
    display: none;
}
.show_text.active{
    display: flex;
}


.choice_holder{
    display: flex;
    width: 100%;
    justify-content: space-around;
    /* border-radius: .3rem; */
    background-color: var(--ddiv-bh);
    padding: 1rem .5rem;
    gap: 5px;
    margin: 0 .3rem;
    border-radius: 10px;
}
.choice_holder .this_main_choice{
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: .5rem 0;
    text-transform: uppercase;
    font-weight: 200;
    border-radius: 10px;
    cursor: pointer;
    background-color: var(--ic-card-b);
}
.choice_holder .this_main_choice.active{
    background-color: var(--themed_color);
    font-weight: 700;
}
.choice_holder.mini{
    display: flex;
    width: 100%;
    justify-content: space-around;
    border-radius: .3rem;
    background-color: transparent;
    padding: 0 1rem;
}
.choice_holder.mini .this_main_choice{
    display: flex;
    width: 100%;
    justify-content: space-around;
    padding: .5rem 0;
    text-transform: capitalize;
    font-weight: 200;
    font-size: 10px;
}
.choice_holder.mini .this_main_choice.active{
    background-color: var(--themed_color);
    border-radius: 1rem;
    color: var(--reverse-bw);
    font-weight: 500;
}

.unique_holder{
    display: flex;
    width: 100%;
    overflow-x: hidden;
    padding: .5rem 0;
}

.unique_holder::-webkit-scrollbar{
    display: none;
}

.unique_holder .this_unique_page{
    display: flex;
    min-width: 100%;
    flex-direction: column;
    overflow-y: scroll;
    height: 100%;
    margin-bottom: 2.5rem;
    position: relative;
    transition: var(--tran-03);

}
.unique_holder .this_unique_page::-webkit-scrollbar{
    display: none;
}

.this_unique_page .infos{
    margin-top: 8%;
    margin-left: 10px;
}

.back_arrow{
    position: absolute;
    top: 4px;
    left: 0;
}

.unique_holder .this_unique_page::-webkit-scrollbar{
    display: none;
}

.caps-card{
    display: flex;
    flex-direction: column;
    gap: 5px;
    width: 90%;
    margin: .5rem 0;
}
.caps-card .tp{
    display: flex;
    background-color: var(--ddiv-bh);
    padding: .5rem .2rem;
    border-radius: .2rem;
    align-items: center;
    position: relative;
}
.caps-card .tp .cap-icon{
    background-color: var(--themed_color_light);
    padding: .2rem;
    margin-right: 10px;
    border-radius: .2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
.caps-card .tp .cap-icon i{
    color: var(--reverse-bw);
    font-size: 15px;
}
.caps-card .tp .cap-per{
    position: absolute;
    right: 10px;
}
.caps-card .tp .cap-signal{
    position: absolute;
    right: 60px;
}
.caps-card .tp .cap-name{
    font-size: 20px;
    font-weight: 700;
    text-transform: capitalize;
}

.caps-card .bt{
    display: none;
    flex-direction: column;
    border: 1px solid var(--themed_color);
    border-top: none;
    border-top-right-radius: .3rem;
    border-bottom-right-radius: .3rem;
    border-bottom-left-radius: 1.875rem;
    animation: glide_down .3s linear;
    box-shadow: var(--bxl2);
}
.caps-card.active .bt{
    display: flex;

}
.caps-card .bt .bt-tp{
    display: flex;
    align-items: baseline;
    flex-direction: row;

}
.caps-card .bt .bt-tp .left, .caps-card .bt .bt-tp .right{
    display: flex;
    flex-direction: column;
    width: 50%; 
    padding: .3rem;
}
.caps-card .bt .bt-tp .left .title, .caps-card .bt .bt-tp .right .value{
    display: flex;
    height: 20px;       
}
.caps-card .bt .bt-bt{
    display: flex;
    background-color: var(--ddiv-bh);
    /* max-height: 20vh; */
    flex-direction: column;
    align-items: last baseline;
    gap: 10px;
    width: 100%;
    border-bottom-right-radius: .3rem;
    border-bottom-left-radius: 1.875rem;
    /* overflow: scroll; */
    padding-bottom: .5rem;
}
.caps-card .bt .bt-bt span{
    display: flex;
    font-size: 10px;
    padding: .2rem;
    text-align: center;

}


.critical_detail_card{
    display: flex;
    position: relative;
    flex-direction: column;
    min-height: 50vh;
    border-radius: 1.875rem;
    border-inline-start: 4px solid;
    border-block-start: 4px solid;
    border-image-source: 
    radial-gradient(
        circle at top left,
        var(--themed_color_light),
        transparent 50%
    );
    border-image-slice: 1;
    padding: 10px;
}
.critical_detail_card .bt{
    display: flex;
    width: 100%;
    gap: 20px;
    border-inline-end: 4px solid;
    border-block-end: 4px solid;
    border-image-source: 
    radial-gradient(
        circle at bottom right,
        var(--themed_color_light),
        transparent 70%
    );
    border-image-slice: 1;

    /* background-color: var(--ddiv-bh); */
    padding: .5rem;
    border-radius: 1.875rem;
}
.critical_detail_card .bt .left, .critical_detail_card .bt .right{
    display: flex;
    flex-direction: column;
}
.critical_detail_card .list_text{
    border-top: 1px solid var(--themed_color_light);
    padding: 4px 0;
}
.critical_detail_card .tp{
    display: flex;
    flex-direction: column;
    min-height: 60%;
    justify-content: center;
    align-items: center;
    position: relative;
}
.critical_detail_card .tp i{
    color: var(--themed_color_light);
}

.big-icon{
    font-size: 120px;
}

.key_notice{
    display: flex;
    flex-direction: column;
    width: 100%;
    position: relative;
    padding: .5rem .3rem;
    margin-bottom: 2rem;
}

.key_notice .keys{
    display: flex; gap: 10px; align-items: center; width: 100%;
    min-height: 30px;
    font-size: 20px;
    font-weight: 600;
}

.critical_detail_card2{
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 90%;
    
}
.critical_detail_card2 .bt{
    display: flex;
    justify-content: space-between;
    background: var(--body-color-gradient);
    padding: .4rem .2rem;
    
}
.critical_detail_card2 .tp{
    display: flex;
    flex-direction: column;
    background-color: var(--ddiv-b);
    padding: .5rem .4rem;
    border-radius: 20px;
    
}
.critical_detail_card2 .tp .head{
    margin-top: 1.4rem;
    display: flex;
    font-size: 30px;
    font-weight: 800;
    color: var(--themed_color_light);
    text-transform: uppercase;
    
}
.critical_detail_card2 .tp .other{
    display: flex;
    justify-content: space-between;
    padding: 0 .6rem;
    margin: .5rem 0;
    width: 100%;
    
}
.critical_detail_card2 .tp .value{
    font-size: 30px;
    font-weight: 800; 
}
.critical_detail_card2 .tp .type{
    font-size: 15px;
    font-weight: 800; 
    text-transform: uppercase;
    color: var(--themed_color_light);
}
.critical_detail_card2 .tp .type, .critical_detail_card2 .other_text{
    font-size: 15px;
    font-weight: 800; 
    text-transform: uppercase;
    color: var(--themed_color_light);
}

.centerdiv{
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.side-icn{
    position: absolute;
    bottom: 5%;
    right: 5%;
    font-size: 50px;
    border-radius: 50%;
    padding: .5rem;
    color: var(--themed_color_light);
    background-color: var(--body-color);
}

.nice_img{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nice_img img{
    width: 300px;
}
.img300{
    width: 300px;
}
.focus_text{
    padding: .8rem;
    font-size: 12px;
    font-weight: 600;
    background-color: var(--reverse-bw);
    box-shadow: var(--bxl2);
    position: relative;
    border-radius: .5rem;
    cursor: pointer;
    max-width: 95%;
    transition: var(--tran-03);
    word-wrap: break-word;

}
.focus_text::after{
    content: 'copied';
    background-color: var(--dnice-b);
    color: var(--themed_color);
    padding: .3rem;
    border-radius: .3rem;
    justify-content: center;
    align-items: center;
    display: block;
    position: absolute;
    top: -30px;
    right: 0px;
    display: none;
    transition: var(--tran-03);
}
.focus_text.active::after{
    display: flex;
}

.iholder{
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
    padding: 1rem;
    width: 100px;
}

.iholder i{
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 40px;
    width: 45px;
    height: 45px;
}
.iholder .i-text{
    font-size: 12px;
    font-weight: 700;
    max-width: 100%;
    overflow: hidden;
    text-align: center;
}

.focus{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    justify-content: center;
    align-items: center;
    background-color: var(--modal-b);
    backdrop-filter: blur(15px);
    z-index: 200;
}
.focus.active{
    display: flex;
}
.focus .exit{
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    font-size: 35px;
    color: var(--themed_color_light);
}

.focus .exit.hide{
    display: none;
}

.focus .focus-content{
    flex-direction: column;
    width: 70vw;
    height: 100vh;
    display: flex;
    margin: 0;
    position: relative;
    gap: 10px;
    padding: 0 .5rem;

}

.page_container{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    top: 20%;
    position: absolute;
    padding: 0 1rem;
}
.page_container .big_head{
    font-size: 30px;
    font-weight: 800;
    text-transform: capitalize;
    text-align: center;
}
.page_container .head_icn{
    font-size: 20rem;
}
.page_container .big_notice{
    font-size: 12px;
    font-weight: 700;
}

.animate_hder{
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    margin: 0;
    justify-content: center;
    align-items: center;
    background: var(--body-color-gradient);
}
.animate_hder .load_content{
    display: flex;
    width: 100%;
    height: 200px;
    position: relative;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
.load_content .box{
    position: absolute;
    width: 30px;
    height: 30px;
    background-color: var(--themed_color_light);
    border-radius: 4px;
}

.box.box1{
    left: -30px;
    top: 230px;
    animation: upnddown1 2s linear infinite;
}
.box.box2{
    left: -30px;
    top: 230px;
    animation: upnddown2 1.5s ease-in-out infinite;
}
.box.box3{
    left: -30px;
    top: 230px;
    animation: upnddown3 1.7s ease infinite;
}
.box.box4{
    left: -30px;
    top: 230px;
    animation: upnddown4 2.5s ease infinite;
}

.animate_hder .animate_cntent{
    background-color: var(--themed_color_light);
    width: 400px;
    height: 280px;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.animate_cntent .circle{
    /* background-color: transparent; */
    background: var(--body-color-gradient);
    height: 350px;
    width: 350px;
    border-radius: 50%;
    position: absolute;
    /* animation: spin4ever 2s linear infinite; */
    z-index: 2;
}

.animate_cntent .circle.left{
    left:-220px;
    top: -35px;
    
}
.animate_cntent .circle.right{
    right:-220px;
    top: -35px;
}
.animate_cntent .line_h{
    display: flex;
    flex-direction: column;
    gap: 35px;
    padding: 35px;
    animation: make_visible 2s linear infinite;
    z-index: 1;
}
.animate_cntent .line_h .lines{
    width: 350px;
    height: 35px;
    background: var(--body-color-gradient);
}


.wait_screen-overlay{
    display: flex;
    position: fixed;
    min-height: 100vh;
    justify-content: center;
    text-align: center;
    align-items: center;
    width: 100%;
    height: 100%;
    color: var(--white);
    flex-direction: column;
}

.box-special{
    position: absolute;
    background-color: var(--themed_color_light);
}
.lines-special{
    position: absolute;
    background-color: var(--text-color);
    filter: blur(1px);
}

.background_design{
    position: fixed;
    background: transparent;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100vw;
    height: 100vh;
}




/** new home */
.hm_ani{
    display: flex;
    width: 100vw;
    height: 100vh;
    position: fixed;
    z-index: -1;
    /* filter: blur(.1px); */
}

.hm_nav{
    --icon-img_size : 40px;

    position: fixed;
    width: 100%;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .2rem .5rem;
    z-index: 105;
    cursor: pointer;
}
.hm_nav .logo{
    display: flex;
    justify-content:center;
    align-items: center;
    gap: 2px;
    flex-direction: column;
    backdrop-filter: blur(1px);
}
.hm_nav .logo img{
    width: var( --icon-img_size);
}
.hm_nav .logo span{
    font-size: 15px;
    font-weight: bolder;
}

.nav-icns{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: 8px;
    position: absolute;
    left: 20px;
    top: 45vh;
    backdrop-filter: blur(1px);
}
.nav-icns.hide{
    display: none;
}
.nav-icns .nav-icn{
    --dimension : 4px;
    background-color: var(--nice-white);
    width: var(--dimension);
    height: var(--dimension);
    border-radius: 50%;
}

.nav-icns .nav-icn.active{
    border: .5px solid var(--light-l);
    background-color: transparent;
}

.nav-side{
    --nav-timedelay : 3s;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    backdrop-filter: blur(1px);
}
.nav-side .holder{
    display: flex;
    flex-direction: row;
}
.nav-side .holder span{
    display: flex;
    opacity: 0;
    position: relative;
}
.nav-side .holder span:nth-child(1){
    animation: mut calc(var(--nav-timedelay) * 1) linear;
}
.nav-side .holder span:nth-child(2){
    animation: mut calc(var(--nav-timedelay) * .9) linear;
}
.nav-side .holder span:nth-child(3){
    animation: mut calc(var(--nav-timedelay) * .8) linear;
}
.nav-side .holder span:nth-child(4){
    animation: mut calc(var(--nav-timedelay) * .7) linear;
}
.nav-side .holder span:nth-child(5){
    animation: mut calc(var(--nav-timedelay) * .6) linear;
}
.nav-side .holder span:nth-child(5){
    animation: mut calc(var(--nav-timedelay) * .5) linear;
}
.nav-side .holder span::after{
    content: '';
    display: flex;
    position: absolute;
    width: 50%;
    bottom: 0px;
    background-color: var(--white-white);
    height: 1px;
    box-shadow: var(--bxl2);
}

.nav-side .side-shwr{
    width: var( --icon-img_size);
    height: var( --icon-img_size);
    font-size: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--themed_color_light);
    transition: var(--tran-03);
    animation: rotatetoofast var(--nav-timedelay) linear;
}

.nav-side .side-shwr:hover{
    background-color:var(--themed_color_light);
    color:var(--dnice-b);
    font-size: var(--icon-img_size)/1.2;
}
.nav-side .lg{
    display: flex;
    padding: .6rem 1.2rem;
    border-radius: 20px;
    border: 1px solid var(--themed_color_light);
    font-size: 12px;
    color: var(--themed_color_light);
    font-weight: bolder;
    text-transform: capitalize;
    background-color: transparent;
    transition: var(--tran-03);
    animation: reveal var(--nav-timedelay) linear;
}
.nav-side .lg:hover{
    color: var(--nice-b);
    background-color: var(--themed_color_light);
}

.hm_side{
    display: flex;
    flex-direction: column;
    background-color: var(--modal-b);
    color: var(--nice-white);
    width: 100vw;
    height: 100vh;
    z-index: 100;
    position: fixed;
    backdrop-filter: blur(15px);
    transform: translateX(100%);
    transition: var(--tran-03);
    padding: 2.5rem 1rem;
    overflow-y: scroll;
    gap: 10px;
}
.hm_side::-webkit-scrollbar{
    display: none;
}

.hm_side.active{
    transform: translateX(0);
}

.hm_side .heading{
    margin-top: 1rem;
    font-size: calc(var(--heading-size) / 1.5);
    font-weight: 600;
}
.hm_side .contents{
    gap: 3px;
    flex-direction: column;
    display: flex;
    padding: .3rem;
    width: 48%;
}

.hm_side .contents .heading{
    font-size: calc(var(--heading-size) / 4.2);
    font-weight: 600;
    text-transform: uppercase;
}

.hm_focus{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
    justify-content: center;
    align-items: center;
    z-index: 106;
}

.hm_focus.active{
    display: flex;
}

.nice_grid{
    gap: 2px;
    width: 100%;
    height: 400px;
    padding: .5rem;
    display: grid;
    grid-template-columns: 14.28% 14.28% 14.28% 14.28% 14.28% 14.28% 14.28%;
    grid-template-rows: 12.5% 12.5% 12.5% 12.5% 12.5% 12.5% 12.5%;
}
.nice_grid .mad-grid-stuff{
    /* --grid-bcolor : var(--dnice-b); */
    --grid-bcolor : var(--body-color-gradient);
    background: var(--grid-bcolor);
    border-radius: 20px;
    padding: .2rem;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    color: var(--text-color);
}
.nice_grid .mad-grid-stuff .title{
    top: 8px;
    left: 8px;
    position: absolute;
    font-size: 10px;
    font-weight: 600;
    text-transform: capitalize;
    backdrop-filter: blur(.5px);
}
.nice_grid .mad-grid-stuff .top-icon{
    top: 8px;
    right: 8px;
    position: absolute;
    font-size: 150%;
    color: var(--light-l);
}
.nice_grid .mad-grid-stuff .background-grid-icon{
    --dimension: -40px;
    bottom: var(--dimension);
    right: var(--dimension);
    font-size: 800%;
    opacity: .3;
    position: absolute;
    filter: blur(.1px);
    color: var(--themed_color_light);
    
}
.nice_grid .mad-grid-stuff.dashboard .title{
    font-weight: bolder;
}
.nice_grid .mad-grid-stuff .main-icon{
    font-size: 500%;
    color: var(--themed_color_light);
    backdrop-filter: blur(.5px);
}

.nice_grid .grid-target{
    position: relative;
}
.nice_grid .grid-target .beep{
    position: absolute;
    top: 20;
    right: 5%;
    background-color: var(--reverse-bw);
    /* color: var(--light-l); */
    color: var(--themed_color_light);
    width: 25px;
    height: 25px;
    border-radius: 50%;
    justify-content: center;
    align-items: center;
    text-align: center;
    display: flex;
    
}

.beep .number{
    font-size: 10px;
    font-weight: 600;
}
.beep .dot{
    background-color: var(--light-l);
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.nice_grid .user{
    grid-area: 1/1/3/6;
    /* background: url(/static/uploads/_054895ee-7897-42ac-8726-ac94b2db34e2.jpeg);
    background-position: center;
    background-size: cover;
    background-blend-mode: darken; */
}
.nice_grid .theme{
    grid-area: 1/6/3/8;
}
.nice_grid .mining{
    grid-area: 3/1/7/3;
}
.nice_grid .notification{
    grid-area: 3/3/7/6;
}
.nice_grid .slots{
    grid-area: 3/6/7/8;
}
.nice_grid .trade{
    grid-area: 7/1/9/6;
    background: url(/static/uploads/_65169adb-0f20-4fc4-9761-9ef17562c148.jpeg);
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
}
.nice_grid .dashboard{
    grid-area: 7/6/9/8;
    background-color: var(--themed_color_light);
    color: var(--dnice-b);
    background: url(/static/uploads/_576de7db-2bb2-4bfa-ab4f-208271ead1f8.jpeg);
    background-position: center;
    background-size: cover;
    background-blend-mode: darken;
}

.card8{
    --card-dimension : 150px;

    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: .5rem 0;
}
.card8 .visual-holder{
    width: var(--card-dimension);
    height: var(--card-dimension);
    border-radius: 20px;
    background-color: var(--themed_color_light);
}

.card8 .title{
    font-size: calc(var(--heading-size) / 3.8);
    font-weight: 600;
    text-transform: capitalize;
}

.card8 .descr{
    font-size: calc(var(--heading-size) / 6.2);
    max-width: var(--card-dimension);
    word-wrap: break-word;

}




.btn_sd{
    box-shadow: var(--bxl3);
}

.group_holder_column{
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 1rem 0;
}
.group_holder_row{
    display: flex;
    flex-wrap: wrap;
    padding: .5rem 0;
    gap: 10px;
    justify-content: space-between;
}
.content-gap{
    gap: 4px;
    display: flex;
}
.content-gap10{
    gap: 10px;
    display: flex;
}
.content-gapl{
    gap: 2rem;
}

.align-center{
    display: flex;
    align-items: center;
}
.justify-center{
    display: flex;
    justify-content: center;
}

.all-center{
    display: flex;
    justify-content: center;
    align-items: center;
}

.hm_pop{
    display: none;
    flex-direction: column;
    background-color: var(--modal-b);
    width: 100vw;
    height: 100vh;
    z-index: 101;
    position: fixed;
    backdrop-filter: blur(15px);
    transition: var(--tran-03);
    padding: .5rem;
    overflow-y: scroll;
    min-height: 100vh;
    justify-content: center;
    align-items: center;
    animation: sca .5s ease;
}

.hm_pop::-webkit-scrollbar{
    display: none;
}

.hm_pop.active{
    display: flex;
}

.home_main{
    display: flex;
    width: 100vw;
    height: 100vh;
    overflow-y: scroll;
    overflow-x: auto;
}
.home_main .home_child{
    display: flex;
    width: 100%;
    min-width: 100%;
    transform: translateX(0);
}

.home_main.active .home_child{
    transform: translateX(-100%);
}

.home_main .home_child.main_home{
    display: flex;
    flex-direction: column;
}
.home_main .home_child.other{
    display: flex;
    flex-direction: column;
}

.home_main .home_child.main_home .home{
    background: var(--body-color-gradient);
}

.home_child .section_general{
    --section-bg: #1d25305b;

    display: flex;
    flex-direction: column;
    position: relative;
    background-color: var(--section-bg);
}

.home_child .section_general .show-bottom{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: .5px;
    position: absolute;
    top: 90vh;
    left: 50%;
    right: 50%;

    backdrop-filter: blur(1px);
    color: var(--dark-l);
    font-weight: 900;
    backdrop-filter: blur(.1px);
    cursor: pointer;
}
.home_child .section_general .show-bottom span{
    font-weight: 600;
    font-size: 10px;
    text-transform: capitalize;
}
.home_child .section_general .show-bottom i{
    font-size: 20px;
}

.home_child .section_general .sectionpages{
    display: flex;
    flex-direction: column;
}

.section_general .sectionpages.active{
    transform: translateY(-100%);
}

.home_child .section_general .sectionpages.slide_wrapper{
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
}
.home_child .section_general .sectionpages.slide_wrapper .section-mains{
    display:flex;
    flex-direction: column;
    width: 50%;
    
}



.home_child .section_general .sectionpages.slide_wrapper img{
    width: 500px;
    border-radius: .5rem;
    box-shadow: var(--bxl);
}

body.body_home img{
    filter: grayscale(90%);
    transition: var(--tran-03);
}

body.body_home.light img{
    filter: grayscale(0);

}

.home_child .section_general .sectionpages.others{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    margin: 0 5rem;
    margin-top: 2rem;

}

.home_main .main_home .head{
    display: flex;
    font-size: var(--heading-size);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    backdrop-filter: blur(.8px);
    /* max-width: 70%; */
    padding: .2rem;
    word-wrap: break-word;
}
.home_main .main_home .mid-text{
    font-size: 20px;
    /* text-align: center; */
    font-weight: 600;
    backdrop-filter: blur(.8px);
}
.home_main .main_home .smaller-text{
    font-size: 10px;
    /* text-align: center; */
    font-weight: 600;
    backdrop-filter: blur(.8px);

}

.bk60{
    max-width: 40%;
    word-wrap: break-word;
    text-align: left;
    display: flex;
}

.banner{
    display: flex;
    background: var(--gradient1);
    padding: .5rem .9rem;
    font-size: 15px;
    font-weight: 500;
    text-align: center;
    border-radius: 20px;
    box-shadow: var(--bxl2);
    text-transform: capitalize;
    letter-spacing: .2rem;
}

.choice_auto_fill_content{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}
.choice_auto_fill_content .choice_button_holder{
    display: flex;
    /* flex-direction: row; */
    gap: 20px;
}


/* .choice_auto_fill_content .choice_button_holder .choice span{
    display: flex;
    background-color: var(--ddiv-bh);
    padding: 1.5rem;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 800;
    transition: var(--tran-03);
    cursor: pointer;
} */
/* .choice_auto_fill_content .choice_button_holder .choice.active{
    background:var(--body-color-gradient);
} */

.choice_auto_fill_content .contents_holder{
    --this-height : 100%;
    --this-widght : 100%;

    width: var(--this-widght);
    height: var(--this-height);
    display: flex;
    overflow-x: hidden;  
}


.choice_auto_fill_content .contents_holder .contents{
    height: fit-content;
    min-width: 100vw;
    max-width: 100vw;
    width: 100%;
    transform: translateX(0);
    justify-content: baseline;
    display: flex;
    position: relative;
    flex-direction: column;
    gap: 10px;
    padding: 2rem 3rem;
    transition: var(--tran-03);
}
.choice_auto_fill_content .contents_holder .content_headling{
    background: var(--content-gradient);
    padding: .2rem;
    border-radius: 2px;
}
.choice_auto_fill_content .contents_holder .contents.angle1::after{
    transform: skewY(2deg);
}
.choice_auto_fill_content .contents_holder .contents.angle2::after{
    transform: skewY(0deg);
}
.choice_auto_fill_content .contents_holder .contents.angle3::after{
    transform: skewY(-2deg);
}
.choice_auto_fill_content .contents_holder .contents::after{
    content: '';
    position: absolute;
    background: var(--content-gradient);
    z-index: -1;
    inset: 0;
}

.choice_auto_fill_content .contents_holder .contents .card9{
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-color);
    margin: .3rem;
}
.card9 .title{
    background:var(--ddiv-b2);
    padding: .5rem 1.5rem;
    border-radius: 10px;
    width: fit-content;
}
.card9 .card_content_holder{
    background: var(--body-color-gradient);
    /* background: var(--ddiv-bh); */
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 20px;
}
.card9 .card_content_holder .content{
    position: relative;
    align-items: baseline;
}

.card9 .card_content_holder .content .content-title{
    /* background-color: var(--reverse-bw); */
    padding: .1rem;
    border-radius: 4px;
}
.card9 .card_content_holder .content .content-value{
    padding: .1rem;
    /* color: var(--light-l); */
    color: var(--themed_color_light);
    backdrop-filter: blur(2px);
    font-weight: 800;
}

.card9 .card_content_holder .content::after{
    content: '';
    background:  var(--content-gradient);
    position: absolute;
    bottom: -2px;
    height: 2px;
    width: 100%;
}


.divider{
    display: flex;
    flex-direction: row;
    gap: 8px;
    width: 100%;
}
.sb{
    justify-content: space-between;
}
.sa{
    justify-content: space-around;
}
.divider.half{
    max-width: 50%;
}
.divider.thirty{
    max-width: 30%;
}
.divider.sixty{
    max-width: 60%;
}
.divider.seventy{
    max-width: 70%;
}
.divider.fourty{
    max-width: 40%;
}
.divider.twenty{
    max-width: 20%;
}
.divider.eighty{
    max-width: 80%;
}

.slidesx{
    transition: var(--tran-04);
}

.nice_grid2{
    display: grid;
    padding: .3rem;
    width: 100%;
    height: 400px;
    gap: 2px;
    grid-template-columns: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
    grid-template-rows: 10% 10% 10% 10% 10% 10% 10% 10% 10% 10%;
}
.nice_grid2 .first{
    grid-area: 1/1/9/7;
    width: 100%;
    height: 100%;
    font-size: 10px;
    /* background-image: url(/static/uploads/_054895ee-7897-42ac-8726-ac94b2db34e2.jpeg);
    background-position: center;
    background-size: contain; */
    
}

.nice_grid2 .first .slide_card_holder, .slide_card_holder{
    --fnts-size : 15px;
    display: flex;
    /* background-color: #045466; */
    height: 100%;
    width: 100%;
    overflow: hidden;
}
.nice_grid2 .first .slide_card_holder .slide_card, .slide_card_holder .slide_card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: 100%;
    min-width: 100%;
    padding: .3rem;
    transform: translateX(0);
}


.slide_card_holder .slide_stuff{
    min-height: 100%;
    min-width: 100%;
}
.slide_card_holder .slide_card .c_name{
    font-size: var(--fnts-size);
    text-transform: uppercase;
    font-weight: 700;
    color: var(--light-l);
}
.slide_card_holder .slide_card .c_hder{
    display: flex;
    position: relative;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: .5rem;
    width: 80%;
}
.slide_card_holder .slide_card .c_hder .c_text{
    font-size: calc(var(--fnts-size)/1.6666);
    text-align: center;
}
.slide_card_holder .slide_card .c_hder i{
    font-size: calc(var(--fnts-size)/0.6666);
}

.slide_card_holder .slide_card .tp{
    display: flex;
    position: absolute;
    top: -30px;
    left: 0;
    color: var(--light-l);
}
.slide_card_holder .slide_card .bm{
    display: flex;
    position: absolute;
    bottom: -30px;
    right: 0;
    color: var(--light-l);
}
.slide_card_holder .slide_card .group_holder_row{
    justify-content: center;
    align-items: center;
    display: flex;
}
.slide_card_holder .slide_card .group_holder_row i{
    font-size: calc(var(--fnts-size)/0.6666);
    justify-content: center;
    align-items: center;
    display: flex;
    color: var(--light-l);
}


.nice_grid2 .second{
    grid-area: 9/1/11/7;
    display: flex;
    width: 100%;
}

.glide_card{
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    padding: .2rem;
    gap: 5px;
    flex-wrap: wrap;
}

.glide_card .grid-card-title{
    display: flex;
    background: var(--body-color-gradient);
    padding: .3rem;
    border-radius: 2px;
}

.glide_card .glidey{
    display: none;
    gap: 5px;
}
.glide_card .glidey .number_y{
    display: flex;
    flex-direction: column-reverse;
    width: 25px;
    height: 25px;
    overflow: hidden;

}
.glide_card .glidey .number_y span{
    width: 25px;
    height: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: var(--body-color-gradient);
    transform: translateY(0%);
    font-weight: 800;
    font-size: 22px;
    transition: var(--tran-05);
}



.nice_grid2 .grid_stuffs{
    border-radius: 8px;
    padding: .2rem;
    position: relative;
    justify-content: center;
    align-items: center;
    display: flex;
    cursor: pointer;
    overflow: hidden;
    border: 1px solid var(--border-faded);
    /* background-color: var(--ddiv-bh); */
    backdrop-filter: blur(15px);
}

.nice_grid2 .grid_stuffs.third{
    grid-area: 1/7/9/11;
    display: block;
    height: 100%;
}
.nice_grid2 .grid_stuffs.fourth{
    grid-area: 9/7/11/11;
}

.grid_holder{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 1rem;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
    padding: .5rem;
}

.big_content_container{
    display: flex;
    width: 100%;
    height: 400px;
    background-color: var(--ddiv-bh);
}

.drop_downlist{
    display: flex;
    flex-direction: column;
    overflow: hidden;
}


.cntent-grid{
    display: grid;
    height: 45vh;
    width: 90vh;
    max-width: 100%;
    grid-template-columns: repeat(20, 1fr);
    grid-template-rows: repeat(10, 1fr);
    z-index: 1;
    overflow: hidden;
}
.cntent-grid .bigger{
    background: var(--this-back);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    backdrop-filter: blur(2px);
    grid-area: 1/1/7/13;
    z-index: 1;
    border-radius: 20px;
    box-shadow: var(--bxl2);
}
.cntent-grid.switch .bigger{
    grid-area: 1/9/7/21;
}
.cntent-grid .smaller{
    background-color: var(--themed_color_light);
    grid-area: 8/17/11/21;
    z-index: 1;
    border-radius: 10px;
    box-shadow: var(--bxl2);
}
.cntent-grid.switch .smaller{
    grid-area: 8/1/11/5;
}
.cntent-grid .bt{
    grid-area: 7/3/10/17;
}
.cntent-grid.switch .bt{
    grid-area: 7/5/10/19;
}
.cntent-grid .tp{
    grid-area: 3/13/7/20;
}
.cntent-grid.switch .tp{
    grid-area: 3/2/7/9;
}
.cntent-grid .bgd{
    grid-area: 3/3/10/20;
    background-color: var(--ddiv-b2);
    border-radius: 30px;
    z-index: -1;
    border: 1px solid var(--border-faded);
}
.cntent-grid.switch .bgd{
    grid-area: 3/2/10/19;

}


.button{
    padding: .8rem 1.5rem;
    border-radius: 20px;
    font-weight: 700;
    font-size: 20px;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    display: flex;
    width: max-content;
    letter-spacing: .1rem;
}
.bt-1{
    --this_color: var(--nice-white);
    --this_color_text: var(--dnice-b);

    background-color: var(--this_color);
    border: .5px solid var(--this_color);
    color: var(--this_color_text);
}
.bt-2{
    --this_color: var(--themed_color_light);
    --this_color_text: var(--nice-white);

    background-color: var(--this_color);
    border: .5px solid var(--this_color);
    color: var(--this_color_text);
}

.cursor-container{
    --this_color: var(--dnice-b);
    --this_color_text: var(--nice-white);

    position: relative;
    background-color: var(--this_color);
    /* background-color: rgba(0, 0, 0, 0.295); */
    color: var(--this_color_text);
    overflow: hidden;
}
.cursor-container:hover{
    color: var(--themed_color_light);
    text-shadow: 0 0 15px var(--themed_color_light), 0 0 30px var(--themed_color_light);
}
.cursor-container::before{
    content: '';
    position: absolute;
    top: var(--y);
    left: var(--x);
    transform: translate(-50%, -50%);
    background: radial-gradient(var(--themed_color_light), transparent, transparent);
    width: 150px;
    height: 150px;
    transition: 0.5s, top 0s, left 0s;
    opacity: 0;
}

.cursor-container:hover::before{
    opacity: 1;
}
.cursor-container::after{
    position: absolute;
    content: '';
    inset: 1px;
    background-color: #2121216b;
}


/*icns fnts*/
.i{
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--themed_color_light);
}

.i-sm{
    font-size: 20px;
}
.i-mid{
    font-size: 30px;
}
.i-big{
    font-size: 50px;
}

/* bx shadws */
.bx-sh{
    box-shadow: 0 2px 5px var(--themed_color_light);
}
.bx-sh.active{
    box-shadow: -8px -5px 15px var(--themed_color_light);
}
.bx-sh1{
    box-shadow: var(--bxl);
}
.bx-sh2{
    box-shadow: var(--bxl2);
}
.bx-sh3{
    box-shadow: var(--bxl3);
}


/* border radius */
.br20{
    border-radius: 20px;
}
.br30{
    border-radius: 30px;
}
.br8{
    border-radius: 8px;
}
/* paddings */
.pd20{
    padding: 20px;
}
.pd10{
    padding: 10px;
}
.pd30{
    padding: 30px;
}
/* fnt sizes */
.sm{
    font-size: 12px;
}
.mid{
    font-size: 15px;
}
.big{
    font-size: 20px;
}

/* fnt wieghts */
.f500{
    font-weight: 500;
}
.f600{
    font-weight: 600;
}
.f800{
    font-weight: 800;
}
.fbolder{
    font-weight: bolder;
}

/* gap */
.space-b{
    gap: 20px;
}

.lg-b{
    background-color: var(--ddiv-bh);
    border: 1px solid var(--border-faded);
    border-radius: 20px;
    padding: 1.2rem .5rem;
    width: 130px;
    height: 130px;
}

/* display */
.df{
    display: flex;
}


.b-column{
    display: flex;
    flex-direction: column;
}

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

/* cntainer dimensins */
.cnt43{
    width: var(--dimension);
    height: calc(var(--dimension)/4*3);
}
.cnt169{
    width: var(--dimension);
    height: calc(var(--dimension)/16*9);
}
.cnt34{
    height: var(--dimension);
    width: calc(var(--dimension)/4*3);
}

/* cntainers backgrnd colors */

.cntbg{
    background: var(--body-color-gradient);

}

.cntbg1{
    background: var(--ddiv-b);

}

.cntbg2{
    background: var(--ddiv-b2);

}

.cntbg3{
    background: var(--ddiv-bh);
}

/* pstin reatives */
.pr{
    position: relative;
}

.pr .tp-50{
    position: absolute;
    top: -50%;
}

.pr .bp-10{
    position: absolute;
    bottom:-10%;
}
.pr .lp-50{
    position: absolute;
    left: -50%;
}

.pr .rp-30{
    position: absolute;
    right:-30%;
}

.pr .tp0{
    position: absolute;
    top: 0;
}
.pr .tp10{
    position: absolute;
    top: 10%;
}
.pr .bp0{
    position: absolute;
    bottom:0;
}
.pr .bp10{
    position: absolute;
    bottom:10%;
}
.pr .lp0{
    position: absolute;
    left: 0;
}
.pr .lp10{
    position: absolute;
    left: 10%;
}
.pr .rp0{
    position: absolute;
    right:0;
}
.pr .rp10{
    position: absolute;
    right:10%;
}
.pr .pcenter{
    position: absolute;
    left: 30%;
    top: 50%;
}

.overh{
    overflow-y: hidden;
}
.overs{
    overflow-y: scroll;
}

.ts1{
    text-shadow: 1px 0px 0 rgba(0, 0, 0, 0.316),
    1.1px 0px 0 var(--themed_color),
    1.2px 0px 0 var(--themed_color_light);
}

.ts2{
    background-image: linear-gradient(to left,var(--themed_color),var(--themed_color_light));
}


/* cursr pinter */
.cp{
    cursor: pointer;
}

/* animated*/
.flyleft{
    position: relative;
    transform: translateX(1500px);
    transition: all .5s ease;
}
.flyleft.animated{
    transform: translateX(0px);
}
.flyright{
    position: relative;
    transform: translateX(-1500px);
    transition: all .5s ease;
}
.flyright.animated{
    transform: translateX(0px);
}
.popin{
    position: relative;
    scale: 0%;
    transition: var(--tran-05);
}
.popin.animated{
    opacity: 1;
    scale: 100%;
}

@keyframes mut {
    0%{
        opacity: 0;
    }
    1%{
        opacity: 1;
    }
    60%{
        transform: translateY(0);
    }
    100%{
        transform: translateY(-40px);
    }
}

@keyframes mu {
    50%{
        transform: translateY(-50%);
    }
    100%{
        transform: translateY(0%);
    }
}
@keyframes md {
    50%{
        transform: translateY(50%);
    }
    100%{
        transform: translateY(0%);
    }
}
@keyframes ml {
    50%{
        transform: translateX(-50%);
    }
    100%{
        transform: translateX(0%);
    }
}
@keyframes mr {
    50%{
        transform: translateX(50%);
    }
    100%{
        transform: translateX(0%);
    }
}



@keyframes upnddown1{
    33.3%{
        left: 33%;
        top: 0px;
    }
    66.6%{
        left: 66%;
        top: 170px;
    }
    100%{
        left: 130%;
        top: -30px;
    }
}
@keyframes upnddown2{
    33.3%{
        left: 35%;
        top: 0px;
    }
    66.6%{
        left: 80%;
        top: 170px;
    }
    100%{
        left: 100%;
        top: -30px;
    }
}
@keyframes upnddown3{
    33.3%{
        left: 60%;
        top: 0px;
    }
    66.6%{
        left: 40%;
        top: 170px;
    }
    100%{
        left: 120%;
        top: -30px;
    }
}
@keyframes upnddown4{
    33.3%{
        left: 80%;
        top: 0px;
    }
    37.46%{
        left: 13%;
        top: 30px;
    }
    42.6%{
        left: 82%;
        top: 170px;
    }
    53.6%{
        left: 5%;
        top: 30px;
    }
    66.6%{
        left: 80%;
        top: 170px;
    }
    100%{
        left: 120%;
        top: -30px;
    }
}


@keyframes colorchanger {
    0%{
        border: 1px solid var(--nice-b);
        background-color: var(--nice-b);
    }
    33%{
        border: 1px solid var(--nice-white);
        background-color: var(--nice-white);
    }
    66%{
        border: 1px solid var(--nice_green);
        background-color: var(--nice_green);
    }
}
@keyframes pop {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(100%);
    }
}

@keyframes glide_down{
    0%{
        transform: translateY(-50%);
        opacity: 0;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes glide_up{
    0%{
        transform: translateY(+50%);
        opacity: 0;
    }
    100%{
        transform: translateY(0%);
        opacity: 1;
    }
}

@keyframes scaleup {
    0%{
        transform: scale(0);
    }
    100%{
        transform: scale(100%);
    }
}

@keyframes reveal {
    0%{
        opacity: 0;
    }
    100%{
        opacity: 1;
    }
}

@keyframes drop_in {
    0%{
        transform: translate(90%, -500%);
    }
    100%{
        transform: translate(0, 0);
    }
}

@keyframes close {
    0%{
        transform: translateX(0);
    }
    99%{
        border: none;
        transform: translateX(-220%);
        height: 1px;
        overflow: hidden;
    }
    100%{
        display:none;
    }
}

@keyframes spin4ever{
    0%{
        transform: rotate(0deg);
    }
    100%{
        transform: rotate(360deg);
    }
}


@keyframes changeimg{
    0%{
        transform: translateX(-600px);
    }
    10%{
        transform:translateX(-600px);
    }
    25%{
        transform:translateX(1.875em);
    }
    28%{
        transform:translateX(0);
    }
    90%{
        transform: translateX(0);
    }
    100%{
        transform: translateX(-600px);
    }
}

@keyframes loadtime{
    0%{
        border: 1px solid var(--themed_color_light);
    }
    100%{
        border: 1px solid var(--themed_color);
    }
}


@keyframes sca {
    0%{
        transform: scale(500%);
    }
    100%{
        transform: scale(100%);
    }
}
@keyframes make_visible {
    0%{
        opacity: 0;
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
    }
}


@keyframes loadtimebar{
    0%{
        background-color: var(--themed_color_light);
        transform: translateX(-100%);
    }
    70%{
        background-color: var(--themed_color);
        transform: translateX(-30%);
    }
    100%{
        background-color: #212121;
        transform: translateX(0);
    }
}



@keyframes ring{
    0%{
        transform: rotate(0deg);
        box-shadow: .0625em .3125em .125em var(--themed_color);
    }
    50%{
        transform: rotate(180deg);
        box-shadow: .0625em .3125em .125em #18b201;
    }
    100%{
        transform: rotate(360deg);
        box-shadow: .0625em .3125em .125em #0456c8;
    }
}

@keyframes rotatetoofast{
    0%{
        display: none;
    }
    1%{
        display: flex;
        transform: rotate(0deg);
        opacity: 0.1;
        scale: 30%;
    }
    90%{
        transform: rotate(3500deg);
    }
    100%{
        transform: rotate(3600deg);
        opacity: 1;
        scale: 100%;
    }
}

@keyframes cool_border{
    0%{
        border-top: 1px solid var(--themed_color);
        border-right: none;
        border-bottom: none;
        border-left: none;
    }
    25%{
        border-top: none;
        border-right: 1px solid var(--themed_color);
        border-bottom: none;
        border-left: none;
    }
    50%{
        border-top: none;
        border-top: none;
        border-top: 1px solid var(--themed_color);
        border-top: none;
    }
    75%{
        border-top: none;
        border-top: none;
        border-top: none;
        border-top: 1px solid var(--themed_color);
    }
 }



 @media(max-width:576px){
    :root{
        --heading-size: 40px;
    }
    body{
        transform: translateX(0);
        height: 100vh;
        width: 100vw;
        overflow-x: hidden;
    }
    .sides{
        width: 100vw;
        border-radius: 0;
    }
    .main{
        width: 100vw;
    }
    .arena.active{
        width: 100vw;
    }
    .navs{
        bottom: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        transform: translateX(0);
    }
    .focus .focus-content{
        width: 100vw;
    }
    .navs .bottom_nav{
        display: flex;
        justify-content: center;
        width: fit-content;
        gap: 20px;
        margin: 0em 1em;
        flex-direction: row;
        backdrop-filter: blur(10px);
        /* background-color: var(--bt-nav-b); */
        transform: translateY(110%);
        transition: var(--tran-03);
        margin-bottom: .3rem;
    }

    .navs.active .bottom_nav{
        transform: translateY(0);
    }

    .navs .ici{
    transform: rotate(0deg);
    
    }

    .card4 .middle_text{
        font-size: 18px;
    }

    .trade_c .profit{
        font-size: 15px;
        font-weight: 700;
    }
    .trade_c .time{
        font-size: 18px;
        /* font-weight: 00; */
    }
    
    .drop_down_content .left{
        width: 100%;
    }
    .drop_down_content .left .left_content{
        width: 100%;
        max-width: 100%;
    }
    .drop_down_content .right{
        width: 100%;
    }

    .drop_down_holder .container{
        width: 90%;
        margin: 0;
        margin: 0em .2rem;
    }

    .popup .follo_up_card{
        width: 100%;
    }

    .main .user-funds{
        min-height: 22%;
    }
    .caps-card .bt .bt-bt{
        max-height: 20vh;
        overflow: scroll;
    }
    .show_pops .main_pops.second .container{
        width: 100%;
        
    }

    .nav-icns{
        flex-direction: row;
        position: static;
        left: 0;
        top: 0;
    }
    .nav-side .lg{
        display: none;
    }
    .hm_side .contents{
        width: 100%;
    }
    .home_child .section_general .sectionpages.slide_wrapper{
        height: 50vh;
        overflow: hidden;
        position: relative;
    }
    .home_child .section_general.home .sectionpages.slide_wrapper{
        height: 80vh;
        overflow: hidden;
        position: relative;
    }
    .home_child .section_general .sectionpages.slide_wrapper img{
        position: absolute;
        inset: 0;
        z-index: -1;
         opacity: 40%;
        width: max-content;
        max-width: 100vw;

    }
    .home_main .main_home .head{
        font-size: var(--heading-size);
        /* font-weight: 600; */
        text-transform: uppercase;
        text-align: center;
    }
    
    .home_child .section_general .show-bottom{
        display: none;
    }
    .choice_auto_fill_content .contents_holder .contents{
        padding: 1rem;
    }
    .hm_nav{
        top: 0;
        left: 0;
    }  
    .nav-side .holder{
        display: none;
    }

    .home_child .section_general .sectionpages.others{
        margin: 0;
        margin-top: 2rem;
    
    }
 }