@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

html {font-size:14px;
font-size: 1.886dvh;}
p,body{margin: 0;
    padding: 0;}
body {
             font-family: "Roboto", sans-serif;
             font-optical-sizing: auto;
             font-weight: normal;
             font-style: normal;
             font-variation-settings: "wdth" 100;
             background: #151D32;
             color:#D0D0D0;


         }
a{
    color:#D0D0D0;
}
#msg{
color: #C02F3B;
}
#msgerror,#fmsgerror{
color: #C02F3B;
}
#msgreg,#fmsgreg{
color: #0B9981;
}

.global_error{
     margin: auto;
     width: 50%;
}
*{outline: none; box-sizing: border-box;user-select: none; }

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

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

    width: 12rem;

    line-height: 2.14rem;
    border-radius: 1.07rem;
    background: #293046;
    color:#D0D0D0;
    border: 0;
    padding:0 1rem;
    margin-bottom: 0.85rem;
    font-size: 0.71rem;
}
button{
    font-size: 0.85rem;
    width: 10rem;
    white-space: nowrap;
    line-height: 2.14rem;
    text-align: center;
    border-radius: 1.07rem;
    border: 0;
}
.gray{
    background: #77809F;
    color:#ffffff;
}
#login_form .el{
    display: flex;
    justify-content: center;
    margin-bottom: 0.85rem;
}
#login_form{
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 100dvh;
}
.logo img{height: 11.4rem}
.logo{

    margin-top:7.1rem;
}
.inputs{

    flex-direction: column;
    align-items: center;
}
.forgot_password:hover{text-decoration:underline;cursor:pointer}
.forgot_password{
    font-size: 0.71rem;

}
.footer_login
{
    flex-direction: column;
    margin-bottom: 2rem !important;
    margin-top: auto;
    gap: 1.5rem;
    font-size: 0.85rem;
}

.half_w div{flex-grow: 1;text-align: left}
.half_w div:last-child{text-align: right}
.half_w{
    width: 73dvw;
    display: flex;
}
.signup{
    margin-top: 1rem;
}
pre{display: no1ne}
#bmain{
    display: flex;
    flex-direction: column;
    height: 100dvh;
}
#content_orders{
    height: calc(100dvh - 4.8rem);
    overflow-x: hidden;
    overflow-y: auto;
}
#bmenu {height: 4.8rem}
#bmenu img{height: 2rem;}
#bmenu .act{opacity: 1}
#bmenu div{opacity: 0.5;flex-grow: 1;
               display: flex
           ;
               justify-content: center;
               align-items: center;
               flex-direction: column;
               text-transform: lowercase;font-size:0.7rem;
                   gap: 0.3rem;

               }


               #bmenu div lng:first-letter{
                 text-transform: uppercase !important;
               }
#bmenu{
    display: flex;
    margin-top: auto;
    justify-content: space-around;
    background: #0F1628;
}
.content{
    display: none;
    height: calc(100dvh - 4.8rem);
    overflow: auto;
}
p{font-size: 0.85rem;}
ol{font-size: 0.85rem;}
ul{
    list-style: none;
    padding: 0;
    margin: 0;
    padding:0 1.4rem;
    display: block;
    background-color:  #293046;
    line-height: 2.8rem;
    font-size: 0.85rem;
    border-radius: 1.4rem;
}

.cselect ul{

    background-image: url("/imagesm/downarrow.svg");
    background-repeat: no-repeat;
    background-position: right 1rem top 1.2rem;
    height: 2.8rem;
    overflow: hidden;
    border-radius: 1.4rem;
}
.cselect ul.act{
    position: absolute !important;
    background-color:  #3B445D;
    height:auto !important;;
    overflow: auto !important;
    display: block;
    z-index: 1000;
}

.cselect ul li:first-child{border-radius: 1.4rem;}

.cselect{
    margin: 1.5rem;
    width: 50%;
}

.copen_select{



}
.userAcc,.emailAcc{overflow:hidden;background: linear-gradient(to left, transparent 0%, white 30%, white 100%);
                              -webkit-background-clip: text;
                              background-clip: text;
                              color: transparent !important;}
  #addressW,#nameW,#addressWCard{
         width: 100% !important;
         text-align: left !important;
 }
.find{
    width: 50%;
    text-align: left !important;
    padding:0 3rem;
    background-image: url("/imagesm/find.svg");
    background-repeat: no-repeat;
    background-position: left 1rem center;
    list-style: none;
    margin: 0;
    display: block;
    background-color:  #293046;
    line-height: 2.8rem;
    font-size: 0.85rem;
    border-radius: 1.4rem;
}
table caption{text-align: left;color:rgba(255,255,255,0.5);font-size: 0.85rem;margin-bottom: 1rem;}
table{
    border-collapse: separate;
    width: 100%;
    font-size: 0.7rem;
    color: #ffffff;
    border-spacing: 0.1rem 0.65rem;
}
td{text-align: center}
th{
    font-weight: normal;

    color:rgba(255,255,255,0.5);
}
.ctable{
    background:#293046;
    border-radius: 0.7rem;
    margin: 1rem;
    padding: 0.5rem;
}
.s_up{color:#4DD218 !important}
.s_down{color:#EA0000 !important}
.flogin{margin-top:3.5rem;}
.fsign{margin-top:0rem;display: none;}
.fforgot{display: none;}


#open_orders th{font-size: 0.5rem}

#menu_open_orders .close {display: flex;justify-content: end;margin-top: 1rem;    margin-bottom: -0.5rem;}
#menu_open_orders ul{
    overflow: hidden;
    background: #3B445D;
    border-radius: 0.7rem;
    text-align: left;
}
#hidebox{display: none}
#menu_open_orders .close_order{color:#C02F3B}
#menu_open_orders{
    position: absolute;
    right:2rem;
    margin-top:-1.5rem;
    width: 45%;
    height:auto;
    overflow: auto;

}
#e_order .close_order{
    background:#C02F3B;
    color:#ffffff;
    line-height: 3.2rem;
    font-size: 0.86rem;
    text-align:center ;
}


#e_order .close {display: flex;justify-content: end;height: 4rem;padding-right: 2rem;}

#e_order{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    display: none;
}

.order_details {
    border-radius: 0.7rem;
    color:#ffffff;
    background: #293046;
    margin: 1rem;
    padding:1.5rem;
}
h1{
    font-size: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0;padding: 0;
}
.content h1{font-size: 2rem;color:#ffffff}

.details{
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr 1fr;
    font-size: 0.7rem;
    line-height: 2rem;
    gap:0rem 0.5rem;
    white-space: nowrap;
}
.details div:nth-child(4n){justify-self: right;}

.tpsl{display: flex;justify-content: space-between;
    font-size: 0.7rem;
    margin: 1rem;
}
.tpsl div{
    width: 48%;
    white-space: nowrap;;
    background: #293046;
    border-radius: 1.07rem;
    padding: 0 1rem;
    height: 2.14rem;
    display: flex;justify-content: space-between;
    align-items: center;
}
.tpsl input{
    border:0;background: transparent;
    width: 50%;
    text-align: right;
    opacity: 0.5;
    font-size: 0.7rem;
    color: #ffffff;
}
#e_order .button{display: flex;justify-content: center}
#e_order button{
    background: #77809F;
    color:#ffffff;
    width: 44%;
}

#content_chart .head{display: flex;justify-content: space-between;font-size: 0.7rem;align-items: center;}
#content_chart .head div{text-align: center;color:#808080;}
#content_chart .head span{color:#ffffff;display: block}
#content_chart .charts{height: 50dvh; background:#293046;border-radius: 0.7rem;overflow: hidden;}
.balances{
    display: flex;justify-content: space-evenly;font-size: 0.7rem;align-items: center;
}
.balances div{text-align: center;color:#808080;}
.balances span{
    color:#ffffff;display: block;
}
.list{
    padding: 1rem;

    display: flex;

    flex-direction: column;
    height: 100%;
    justify-content: space-between;
}
.selects{display: flex;justify-content: space-between;gap: 1rem;}
.selects .cselect{
    margin: 0rem;
    width: 100%;
}
.cinput span{width: 40%}
.cinput{
    display: flex;justify-content: space-between;font-size: 0.7rem;align-items: center;
    height: 2.8rem;
    background-color:  #293046;
    padding: 1rem;
    flex-basis: 50%;
    border-radius: 1.4rem;
}
.cinput.readonly{border-radius: 0.5rem}
.cinput input{
    background: transparent;
    width:40%;
    text-align: center;
    color: #ffffff;
    border: 0;
    font-size: 0.7rem;
}
.selects .green{background: #0B9981;width:50%}
.selects .red{background: #C02F3B;width:50%}
.selects button{

    display: block;
    color: #ffffff;
}
#content_chart .hprice{display:none}


#list_symbol .close {display: flex;justify-content: end;height: 3rem;padding-right: 0rem;
margin-bottom: 1rem}

#list_symbol .cselect{width: 50%}
#list_symbol table{margin: 0;}
#list_symbol  th:first-child,
#list_symbol  td:first-child{width: 50%;text-align: left}

#list_symbol  th:last-child,
#list_symbol  td:last-child{text-align: right}

#list_symbol  th{font-size: 0.85rem}
#list_symbol  thead{    position: sticky;
    top: -2rem;
    z-index: 10;
    background: #151D32;
    line-height: 3rem;}

#list_symbol  td{font-size: 1rem;color:#ffffff}
#list_symbol{
    display: flex;
    flex-direction: column;
    display: none;
    padding: 2rem;

}
.find input{
    background: transparent;
    width:100%;
    text-align: left;
    color: #ffffff;
    border: 0;
    font-size: 0.85rem;
}
#content_wallet .message{
    width: 72%;
    font-size: 0.85rem;background: #293046;border-radius: 1.4rem;padding: 1rem;    word-break: break-word;}
#content_wallet p{margin: 1rem 0}
h2{font-size: 1rem;color:#ffffff;margin: 0}
#content_wallet i,#content_wallet b{color:#ffffff}

#content_wallet .list{height: auto;gap: 2rem; padding: 1.5rem;}
#content_wallet .balances{justify-content: space-between}
#content_wallet .type_select{ display: flex;
    flex-direction: column;
gap: 1rem}
#content_wallet button{background: #77809F;width: 100%;margin-top: auto;}
#content_wallet .cinput  input{font-size: 0.85rem; width: 50%;text-align: right }
#content_wallet .cinput{  height: 1.86rem;
    line-height: 1.86rem;font-size: 0.85rem;
    border-radius: 0.93rem;
    padding: 0 0.93rem;flex-basis: auto;}
#content_wallet{
    display: flex;
    flex-direction: column;
    gap:1rem;
}
#content_wallet ul{
    height: 1.86rem;
    line-height: 1.86rem;
    border-radius: 0.93rem;
    padding: 0 0.93rem;

    background-position: right 1rem top 0.7rem;
    background-size: 0.7rem;
}

lng[name="statusSuccess"]{color:#4DD218}
lng[name="statusPending"]{color:#F0E813}
lng[name="statusCanceled"]{color:#EA0000}

#content_setting h1 {align-items: center;height: 3.99rem;}
#content_setting .flags {width: 4.5rem;margin: 0;overflow: hidden;}
#content_setting .flags img{
    height: 2.0rem;
}
#content_setting .details {background: #293046;border-radius: 0.7rem;padding:0.2rem 0.7rem}
#content_setting .details div:nth-child(even ){color: #ffffff}
#content_setting .details div:nth-child(4n){justify-self: left;}
#content_setting .list{justify-content: space-between;gap:1.5rem}
#content_setting .flags li{height: 2.0rem;}
#content_setting .flags ul{
    height: 4rem;
    background-image: none;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    line-height: 1rem;
    border-radius: 1rem;
    padding:1rem;
    overflow: hidden;
}
#content_setting ol{font-size: 0.7rem;list-style: initial;    padding-left: 1rem;}

#content_setting button{background:#77809F;color: #ffffff}
#content_setting p{font-size: 0.7rem;margin: 0.5rem 0;}
.upload_inputs{display: flex;flex-direction: column;gap:1rem;width: 50%;align-items: center}
.upload_inputs img{width: 100%}
.password{display: flex;flex-direction: column;gap:1rem;width: 50%}
#content_setting .selects p{margin:1rem}
#content_setting .password_list h2{font-size: 1.14rem;}
#content_setting .password_list {align-items: center;display: flex;
    flex-direction: column;gap:1rem;width: 45%}
#content_setting input
{
    line-height: 2rem;
    background: #293046;
    font-size: 0.7rem;
    color:#D0D0D0;
    padding:0 1rem;
    border-radius: 1.4rem;
    border: 0;
    width: 100%;
}
.upload_photo{
    display: flex;
    gap:1rem;
    padding:1rem;
    background:#293046;
    border-radius: 0.7rem;
}
#logout{
    background: #C02F3B;
    color: #ffffff;
    line-height: 3.5rem;
    text-align: center;
    display: flex;
    align-items: center;
    font-size: 1.28rem;
    justify-content: center;
    gap: 0.5rem;
}

#msg_box .list{padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: space-between;
    height: auto;
    background: #434C6A;
    border-radius: 0.7rem;
    width: 74%;}
#msg_box{
    position: fixed;
    top: 0;
    background: rgba(21, 29, 50, 0.9);
    width: 100dvw;
    height: 100dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}
#msg_box{text-align: center;display: none}
#msg_box img{height: 2.3rem}
#msg_box .close img{height:1rem;float: right;}
#msg_box .close {height: 0;
    float: right;
    position: relative;
    top: -3rem;
    right: -1rem;}
#msg_box p{margin:0.5rem 0;font-size: 1rem}
#msg_box p.after{opacity: 0.5 }

#content_home .balances{
    margin: 1rem 0;
}
#close_orders{
display:none;
}

.bg_loader{
    position: fixed;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;

    align-items: center;
    background: #181A1F;
}
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #FFF;
    border-bottom-color: #FF3D00;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
}

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

button:disabled{
    background:#494949 !important;
}


#uploads{
    display: flex;
    flex-direction: column;
    width: 100%;
    gap:0.5rem;
}

#uploads img{height:1.5rem;max-width:3rem;float: left;}
#uploads div{
    display: flex;
    gap:1rem;
    align-items: center;
}