body{
    --wh-bl: #fff;
    --wh-bl2: #fff;
    --wh2-bl2: #F4F5F9;
    --wh3-bl2: #A6AEBF;
    --wh3-bl3: #616D8A;
    --wh4-bl4: #A6AEBF;
    --wh6-bl6: #182331;
    --eb-bl: #ebebeb;
    
    --wh5-bl5: #616D8A;



    --white: #fff;
    --black: #0a1118;
    --red: #c82828;
    --blue: #1978d2;
    --light-blue: rgba(25,120,210,.15);
    --yellow: #ff9600;
    --light-yellow: rgba(255,150,0,.15);
    --light-red: rgba(200,40,40,.15);
    --green: #41a564;
    --light-green: rgba(65,165,100,.15);
    --purple: #aa41a0;
    --light-purple: rgba(170,65,160,.15);


    --white-Color: #F4F5F9;

    --white-Ex: #f9f9f9;

    --color-Ex: #146EBE;
    --color: #146EBE;
    --color-0: #F4F5F9;
    --color-1: #DBDBDB;
    --color-2: #A6AEBF;
    --color-3: #616D8A;
    --color-4: #182331;
    
    --a1-shadow: rgba(50,50,50,.1);
    --a1-color: rgba(20,110,190,.1);
    --a2-color: rgba(7,15,25,.4);
    --a3-color: rgba(7,15,25,.5);
    --a4-color: rgba(7,15,25,.7);

    --a7-White: rgba(254,254,254,.7);
    --a8-White: rgba(254,254,254,.8);
    --a9-White: rgba(254,254,254,.9);

    --dark-Color: #182331;
    --dark-0: #070F1A;


    --menu-width: 88px;
    --menu-width2: 300px;
    --nav-height: 70px;

}


body.dark{
    --wh-bl: #182331;
    --wh-bl2: #070F1A;
    --wh2-bl2: #070F1A;
    --wh3-bl2: #070F1A;
    --wh3-bl3: #A6AEBF;
    --wh4-bl4: #616D8A;
    --wh6-bl6: #F4F5F9;
    --eb-bl: #000;


    --wh5-bl5: #616D8A;



    --light-red: rgba(200,40,40,.1);
    --light-blue: rgba(25,120,210,.1);
    --light-yellow: rgba(255,150,0,.1);
    --light-green: rgba(65,165,100,.1);






    /**/


    --black: #fff;
    --white: #182331;

    --color-Ex: #1982e1;
    --color: #1982e1;
    --color-4: #F4F5F9;
    --color-3: #DBDBDB;
    --color-2: #A6AEBF;
    --color-1: #616D8A;
    --color-0: #182331;











}



    .white{
        background: var(--white)}

    body{
        color: var(--wh6-bl6);
        background: var(--wh2-bl2)}

    a{
        color: var(--color)}

    h4, h5{
        font-weight: 600}

    button, input, textarea, select{
        -webkit-border-radius: 8px;
        color: var(--wh3-bl3);
        padding: 1em !important;
        margin: 1em 0 !important;
        border-radius: 8px;
        background-color: var(--wh2-bl2)}

    select{padding-left: 30px !important}
    input{
        color: var(--wh3-bl3) !important}

    button{
        color: var(--white);
        background: var(--color);
    }

    .red{color: var(--red)}
    .yellow{color: var(--yellow)}
    .green{color: var(--green)}
    .blue{color: var(--blue)}

    .red::selection{
        background: var(--light-red);
    }
    .yellow::selection{
        background: var(--light-yellow);
    }
    .green::selection{
        background: var(--light-green);
    }
    .blue::selection{
        background: var(--light-blue);
    }

    .light-red{
        color: var(--red);
        background: var(--light-red);
    }

    .hover-red:hover{
        color: var(--wh-bl);
        background: var(--red)}
    

    .wh-bl{color: var(--wh-bl)}
    .wh-bl2{color: var(--wh-bl2)}
    .wh2-bl2{color: var(--wh2-bl2)}
    .wh3-bl2{color: var(--wh3-bl2)}
    .wh3-bl3{color: var(--wh3-bl3)}
    .wh4-bl4{color: var(--wh4-bl4)}
    .wh6-bl6{color: var(--wh6-bl6)}


hr{
    border-color: var(--wh2-bl2);
}


/**/
.destroy{
    z-index: 11;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    position: absolute;
    margin: 0 !important;
    background: var(--a2-color);
    backdrop-filter: blur(5px);
  }

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

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