:root{
    --color: #035de7;
    --colorh: 3, 93, 231;
    --colorH: rgba(var(--color), 0.9);
    --sidebarWidth: 250px;
    --color-folder: #035de7;
}
.color{color: var(--color);}

[class^="icon-"] .path2:before, 
[class*=" icon-"] .path2:before{
    color: var(--color) !important;
}
[class^="icon-"] .path1:before, 
[class*=" icon-"] .path1:before{
    color: var(--color)  !important;
}

@font-face {
    font-family: 'Google Sans';
    src:  url('../ui/fonts/Roboto.ttf?6m7xpz') format('truetype'),
      url('../ui/fonts/Roboto.woff2?6m7xpz') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.hided{display: none;}
body, .font{font-family: 'Google Sans', 'Roboto', 'Open Sans', sans-serif, arial;}
body{
    -webkit-font-smoothing: antialiased;
    color: #111;
    background: #fff;
    overflow: hidden;
}
body.nof{
    overflow: hidden;
}
a{
    color: #111;
}
.button{
    border: 0px;
    background: var(--color);
    padding: 8px 10px;
    border-radius: 6px;
}
.button:hover{
    background: rgba(var(--colorh), 0.8);
}
.button.link{
    padding: 0px;
    background: rgba(0,0,0,0);
}
.button:disabled{
    background: rgba(var(--color), 0.2);
}
.input{
    border: 1px #c3c3c3 solid;
    padding: 10px 12px;
    line-height: 1;
    border-radius: 6px;
}
.cover{
    z-index: 98;
    background: rgba(255, 255, 255, 0.95);
    display: none;
}
img{
    width: 50px;
}

.error-404{
    padding: 150px 0px;
    text-align: center;
}
.error-404 .line{
    width: 1px;
    background: #ccc;
    height: 16px;
    margin: 0px 15px;
}

._side{
    flex: 1;
    height: 100vh;
    border-right: 1px rgba(var(--colorh), 0.25) solid;
    max-width: 250px;
    padding: 20px;
    top: 51px;
    overflow-x: hidden;
    overflow-y: auto;
}
._side .title{
    margin-bottom: 15px;
    margin-left: 3px;
}
._side .nav a{
    padding: 6px 15px;
    margin-bottom: 4px;    
}
._side .nav a .ico{
    width: 30px;
    text-align: center;
    margin-right: 10px;
}
._side .nav a:before{
    content: '';
    position: absolute;
    top: 8px;
    left: 0px;
    bottom: 8px;
    width: 4px;
    border-radius: 3px;
    background: rgba(var(--colorh), 0.1);
}
._side .nav a:hover:before{
    background: rgba(var(--colorh), 0.3);
}
._side .nav a.on:hover:before,
._side .nav a.on:before{
    background: var(--color);
}
.data-table{
    flex: 1;
}
.data-table .data-row{
    flex: 1;
}
.data-table .data-row:nth-child(even){
    background: rgba(var(--colorh), 0);
}
.data-table .data-row:nth-child(odd){
    background: rgba(var(--colorh), 0.05);
}
.data-table .data-row.data-row-head{
    border-bottom: 1px #ddd solid;
    background: #fff;
}
.data-table .data-row.data-row-head .data-col:hover{
    background: rgba(var(--colorh), 0.07);
}
.data-table .data-row .data-col{
    flex: 1;
    padding: 12px;
    border-right: 1px #ddd solid;
    line-height: 1;
}
.data-table .data-row .data-col .chevron{margin: 2px 0px 0px 7px;}
.data-table .data-row .data-col .label-icon{margin-right: 7px;}
.data-table .data-row .data-col .label-icon.icon-folder-blank{
    color: var(--color);
}
.data-table .data-row{}
.data-table.dt_inverted .data-row:nth-child(odd){
    background: rgba(var(--colorh), 0.05) !important;
}
.data-table.dt_inverted .data-row:nth-child(odd):nth-child(even){
    background: rgba(var(--colorh), 0) !important;
}   

.section-title{
    padding: 25px;
}
div.section-title{

}
div.section-title ._l{flex: 1;}
div.section-title ._r{flex: 1;}
div.section-title ._r .search{
    background: rgba(var(--colorh), 0.1);
    border-radius: 5px;
    margin-right: 15px;
    overflow: hidden;
}
div.section-title ._r .search .ico{
    flex: 1;
    height: 32px;
    padding: 5px 8px;
    border: 0;
    background: rgba(0,0,0,0);
}
div.section-title ._r .search .query{
    border: 0;
    padding: 6px 8px;
    background: rgba(0,0,0,0);
}
div.section-title ._r .search select{
    border: 0;
    padding: 6px 8px;
    background: rgba(var(--colorh), 0.1);
    margin-right: 5px;
}
div.section-title ._r .search .icon-clear{display: none;}
.progress-ring{ width: 120px;   }
.progress-ring .progress .ring{
    transition: stroke-dashoffset 1s linear;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: 50% 50%;
}
.progress-ring .progress .ring:first-child{
    stroke: rgba(var(--colorh), 0.08);
}
.progress-ring .progress .ring:last-child{
    stroke: rgba(var(--colorh), 1);
}
.progress-ring{ width: 120px; }
.progress-ring{ width: 120px; }


.pro-done{
    width: 500px;
    margin: 75px auto;
    text-align: center;
}
.pro-done .checked{
    background: var(--color);
    color: #fff;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
}
.pro-done .button{
    width: 200px;
    margin: 30px auto;
}
.pro-done .em{
    margin: 4px 0px 30px 10px;
}
.pro-done .msg{
    margin-top: 15px;
}

.alert{
    background: #ffd4d4;
    padding: 10px 15px;
    border-radius: 4px;
    display: none;
}

/* ACCOUNT */
.account{
    width: 350px;
    margin: 50px auto 100px auto;
}
.account .ahead{
    margin-bottom: 20px;
}
.account .ahead .slogan{margin-bottom: 10px;}
.account .uform{
    width: 100%;
}
.account .uform .input{
    margin-bottom: 15px;
}
.account .uform .button{
    margin-top: 20px;
    width: 140px;
}
.account .uform .agree{margin: 10px 0px;}
.account .uform .button:hover{}
.account .uform .app-checkbox{margin-right: 8px;}
.account .sin-mein,
.account .recv-mein{margin-bottom: 30px;}
.account .cat{margin-top: 6px;}
.account .pro-done{width: 350px;}

.app-main ._side .logo,
.account .logo{
    height: 51px;
    margin-bottom: 20px;
    margin-left: 2px;
}
.app-main ._side .logo .fav,
.account .logo .fav{
    width: 30px;
    height: 30px;
    border-radius: 24px;
    margin-right: 6px;
    background: rgba(var(--colorh), 1);
    transform: scale(0.75);
}
.app-main ._side .logo .fav:before,
.account .logo .fav:before{
    content: "";
    position: absolute;
    width: 33px;
    height: 20px;
    border-radius: 24px;
    background: rgba(var(--colorh), 1);
    left: -10px;
    bottom: 0px;
}
.app-main ._side .logo .fav:after,
.account .logo .fav:after{
    content: "";
    position: absolute;
    width: 45px;
    height: 20px;
    border-radius: 24px;
    background: rgba(var(--colorh), 0.6);
    right: -6px;
    bottom: 0px;
}


.app-main{
    height: 100vh;
}
.app-main ._side{
    flex: 1;
    max-width: 250px;
    overflow-x: hidden;
    overflow-y: auto;
    border-right: 1px solid rgba(var(--colorh),0.5);
}
.app-main .app-content{
    overflow-x: hidden;
    overflow-y: auto;
    flex: 1;
}

.dashboard .stat{
    flex-wrap: wrap;
    padding: 20px;
}
.dashboard .stat .section{
    flex-basis: 33% !important;
    flex: 1;
    background: #fff;
    margin: 10px;
    border-radius: 3px;
}
.dashboard .stat .section .ico{
    width: 70px;
    height: 70px;
    text-align: center;
    background: rgba(var(--colorh), 0.1);
    border-radius: 28px;
}
.dashboard .stat .section .val{
    flex: 1;
    padding: 20px;
}


.vouchers .uform{
    width: 450px;
    margin: 15px 25px 0px 25px;
}
.vouchers .uform .app-checkbox{margin-right: 10px;}
.vouchers .uform .stc{
    margin-bottom: 20px;
}
.vouchers .uform .stc .lbl{margin-bottom: 6px;}
.vouchers .uform .group{
    flex: 1;
}
.vouchers .uform .group .stc{flex: 1;}
.vouchers .uform .group .spt{width: 15px;}
.vouchers .voucher-result{
    width: 450px;
    margin: 15px 25px 0px 25px;
    display: none;
}
.vouchers .voucher-result .h2{
    margin: 20px 0px 2px 0px;
}
.vouchers .refund-voucher{margin-top: 20px;}