@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,400italic,600|Ubuntu:300,400,500,600|Fira+Sans:400italic);

*{font-family: "Helvetica Neue";padding:0;margin:0;

    font-size: 12px;
    font-family: 'Open Sans', "Helvetica Neue", Helvetica, Arial, sans-serif;
}
body{
    background:#d9e0e7;
    overflow: hidden;
}
#menu {
    grid-area: menu;
    background: #2d353c;


}
@keyframes fadeOut {
  0% {opacity:1;display: block;}
  100% {opacity:0;display:none;}
}
/* HTML:  */
.loader {
    width: 50px;
    aspect-ratio: 1;
    --c:no-repeat radial-gradient(farthest-side,#514b82 92%,#0000);
    background:
            var(--c) 50%  0,
            var(--c) 50%  100%,
            var(--c) 100% 50%,
            var(--c) 0    50%;
    background-size: 10px 10px;
    animation: l18 1s infinite;
   
    
}
.loader::before {
    content:"";
    position: absolute;
    inset:0;
    margin: 3px;
    background: repeating-conic-gradient(#0000 0 35deg,#514b82 0 90deg);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 3px),#000 0);
    border-radius: 50%;
}
@keyframes l18 {
    100%{transform: rotate(.5turn)}
}

@keyframes hideLoading {
  0% {opacity:1;}
  100% {opacity:0;display:none;filter: blur(0px);}
}
@keyframes showLoading {
  0% {opacity:0;display:grid;filter: blur(0px);}
  100% {opacity:1;}
}
.load #load,#load
{
     animation-fill-mode:forwards;
     animation-iteration-count:1;
     animation-duration: 0.5s;
     animation-timing-function: ease-in;
}
.load #load{animation-name: showLoading;}
#load{
    width: calc(100vw - 255px);
    height: calc(100vh - 88px);
    backgr1ound: rgba(255, 255, 255, 0.3);
    position: absolute;
    padding: 10px;
    border-radius: 5px;
    z-index: 100;
    
    
    place-items: center;
    opacity:1;display:grid;filter: blur(0px);
    animation-name: hideLoading;
}

tt{
    font-family: monospace;
}
a{
    text-decoration: none;
    font-family: monospace, monospace;
    color:#03a9f4;
}
a:hover{
   
     color:#1e83ff;
}
#filters,#content, #pagination{
    filter: blur(0px);
   transition-duration: 0.5s;
   transition-property: filter;
   transition-timing-function: ease;
   min-height:25px;

}
.load #filters,.load #content,.load #pagination{
   filter: blur(2px);
  
}
#container {

    display: grid;
    grid-template-columns: 200px auto;
    grid-template-rows: 50px auto;
    grid-template-areas:"logo usermenu"
    "menu content";
    height: 100vh;
    t1ransition-property: filter;
    tr1ansition-duration: 500ms;
    tr1ansition-timing-function: ease;

}
#menu .h{
   border-bottom: 1px dashed;
  margin-bottom: 6px;
  display: flex
;
    justify-content: space-between;
}
#total{
     color: #fff;
     padding: 8px 15px;
     background: #242a30;
     line-height: 20px;
 }
 #fee_balance{
     color: #fff;
     padding: 8px 15px;
     line-height: 20px;
 }
#content_table {
     background: #D9E0E7 ;
     grid-area: content;
     padding: 10px;
    overflow-y: scroll;
 }
#content{
    background: #FFF ;
    grid-area: content;
padding: 10px;
    border-radius: 5px;
    overflow-x: auto;
}
td.network,td.status{
    text-transform: capitalize;
}
td span{
    cursor:pointer;
}
#usermenu {
     background: #FFFFFF ;
     grid-area: usermenu;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
 }
.in{    background: #00b300;
    color: #ffFFFF;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;}
.out{    background: #c23010;
    color: #ffFFFF;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;}

#logo {
    background: #1e83ff;
    grid-area: logo;
    padding: 10px;
    color: #fff;
    /* line-height: 29px; */
    display: flex
;
    align-items: anchor-center;
    font-size: 22px;
    font-weight: bold;
}


.edit{display:none;left:0;top:0}
.edit .shadow{position: fixed;width: 100%;height: 100%;z-index: 1;background: RGBA(0,0,0,0.5);left:0;top:0;
    backdro1p-filter: blur(2px);

}
.edit .content{
    position: absolute;width: 500px;z-index: 2;margin: auto;top:5%;background: #fff;
left:50%;
    margin-left:-250px;

}
.edit .content select,.edit .content input,.edit .content textarea{width: 100%;box-sizing: border-box;padding:3px 5px;
    min-width: 10px;
}
#pre_table,.list_table{
    border-collapse: collapse;
    width: 100%;

}
#pre_table td,.list_table td{padding:5px 8px;color:#878D96;}
#pre_table th,.list_table th{color:#242A30;text-align: left;padding:8px 8px;cursor: pointer}
#pre_table th:first-child, .list_table th:first-child{
    border-top-left-radius:5px;
}
#pre_table th:last-child,.list_table th:last-child{
    border-top-right-radius:5px;
}
.pre_table{overflow: hidden;position: fixed;top:0}



.list_table thead {border-bottom:1px solid #B6C2C9;
    position: sticky;
    top: -10px;
    background: #fff;}
.list_table tbody tr{background: #FFFFFF;color:#3B3B3B}
.list_table tbody tr:nth-child(odd){background: #F2F3F4;}

.list_table tfoot tr{ background: transparent !important;}
.list_table tfoot{border-top:1px solid #FFF;position: fixed;
    bottom: 0px;
    width: 100%;
    background: transparent}

.add_new_i input{width: 15px !important;height: 15px !important;margin-right: 10px;}
.add_new_i {display: flex;margin-top:10px}


#menu ul{list-style: none}
#menu li{
    padding: 8px 15px;
    margin: 5px 0;


    cursor: pointer;
    color: #a8acb1;




}
.reload{
    cursor: pointer;
}
.i_enabled input[type=checkbox]{
    width: 17px;
    height: 17px;
    float: right;
    margin-top: -20px;
}
#menu .act,#menu li:hover{ background: #475057;;}
.edit .content div{padding:2px 10px;line-height: 1.5em;    }
.edit .content .head{padding:10px 10px;
    background: #2196f3;
    text-align: center;
    color:#FFFFFF;
    font-size:14px;
}
.edit .buttons{
    overflow: hidden;
    border-top:1px solid #EEEEEE;
    margin-top:15px;
    margin-bottom:5px;
    padding:5px 10px !important;
    padding-top: 10px !important;
    display: flex;
    justify-content: space-around;
}

#add,.edit button{
    float:right;
    margin: 0 5px;
    border:0px;
    background: #03a9f4;
    padding:8px 5px;
    border-radius:2px;
    color:#FFFFFF;
    flex-grow: 1;
    border-radius: 5px;
}
.edit button{
background:#00b300;font-size:14px;
}
.edit .del{
background:#c23010;
}


.edit button:first-child{margin-left: 0}
.edit button:last-child{margin-right: 0}
.editable{overflow: hidden;padding:2px;}
.editable .add{    background: #209E51;cursor: default;
    color: #FFFFFF;
    margin-top: 9px;
    float: left;
    padding: 3px;
    border-radius: 10px;
    height: 11px;
    width: 12px;
    text-align: center;
    line-height: 9px;}
.editable .elarray{padding:4px !important;border:1px solid #999;float:left;margin:5px;}
.editable .elarray:after{
    margin-top: 2px;
    margin-left: 2px;
    content: "x";
    font-size: 12px;
    vertical-align: top;
    border: 1px solid #AAA;
    border-radius: 7px;
    width: 12px;
    float: right;
    height: 12px;
    line-height: 9px;
    text-align: center;
    color: #e84141;
}

#lists{overflow: hidden;background: #fff;padding:0 !important;float: left;margin:0px;cursor: default}
#lists input{width:100px;padding:4px}
#lists .lists{padding:0 !important;    position: absolute;
    background: #fff;
    border: 0px solid #999;    margin-top: 30px;
    margin-left: 3px;}
#lists a{display:block;padding:4px;border-top: 1px solid #AAA}
#lists a:hover{background: #EFEFEF}


.action{max-height: 18px;overflow: hidden;cursor: default}
.history:hover .action{max-height: max-content;position: absolute;background: #7BBA00;
    color:#fff;
    border: 1px solid #438800;
    margin-top: -9px;}
.action a{display: block;text-decoration: underline;padding:0 5px;margin-bottom:10px;}
.action a:hover{text-decoration: none}

th[type=ask]:after{
    opacity: 1;
}
th:after{ content: "🔻"; opacity: 0; font-size: 9px;margin-left:3px}
th[type=desk]:after{
    opacity: 1;
    
content: "🔺";
}
.username{
    display: flex;
    align-items: center;
    color:#4c4c4c;
}
.username svg:hover{ stroke: #000000;}
.username svg{
    cursor:pointer;
height: 20px;
    width: 20px;
    stroke: #4c4c4c;
        margin-left: 5px;
    
}
a svg{
    height:9px;
    width:9px;
    stroke:#FFFFFF;
}
.tabs{
    display: table;
    overflow: hidden;
}
.tabs li{
    display: table-cell;
    padding:5px;
    border:1px solid #E9E9E9;
}
.order{


}
.order .graph{


    height: 300px;
    vertical-align: top;
}
.order .fields{
    display: table;

    vertical-align: top;
}
.order .fields div{display: table-cell;}

#tooltip
{
    background: #fff;
    position: absolute;
    border: 1px solid #999;
    display: none;
}
#tooltip a{display: block}

#modal_button{overflow: hidden}

#action{width: auto !important;}

.order input[value=SELL]{background: #ff674f}
.order input[value=BUY]{background: #9cc2ff}
#kotirovki{background: #E9E9E9}
#kotirovki a{display: block}
#modal_button{    border-top: 1px solid #EEE;
    padding-top: 20px;}

.c_USD{background: #d5f5d7  !important;}
.c_EUR{background: #d9e4f5 !important;}
.c_RUB{background: #fff0d4 !important;}

#filters label{display: block;font-weight: bold;font-size: 10px;margin-bottom: 2px;}
#filters select,#filters input{display: block;font-size: 10px;border:1px solid #DDDDDD;color:#757575;padding:2px 2px;height: 20px;box-sizing: border-box}
#filters .el{margin-right: 20px}

#filters{
    background: #ffFFFF;
    padding: 10px;
    margin-bottom: 20px;
    display: flex;
    border-radius: 5px;
}
#filters #filter_button{
    padding: 6px 20px;
    height: 27px;
    background: #2196F3;
    color: #fff;
    border: 1px solid #2196F3;
    margin-top: 9px;
    border-radius: 5px;
}

#pagination a{padding: 5px;border:1px solid #DDDDDD;margin-left: 5px;cursor: pointer;border-radius: 2px;color:#000}
#pagination a.act{
    background: #2196F3;
    color: #fff;
    border:1px solid #2196F3;
  }
#pagination{
    background: #ffFFFF;
    padding: 10px;
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
    border-radius: 5px;
}