: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;
}
.captcha-box{margin: 10px 0px 15px 0px;}
@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 !important;}
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;
}
.anim{transition:all 0.3s linear 0s;}
/** HEADER **/
.header{
    /* border-bottom: 1px var(--colorl) solid; */
    background: rgba(var(--colorh), 0.09);
    padding: 10px 25px;
    z-index: 99;
    top: 0px;
    height: 51px;
    backdrop-filter: saturate(180%) blur(20px);
}
.header .logo{
    padding: 0px 15px;
    height: 51px;
}
.header .logo .fav{
    width: 30px;
    height: 30px;
    border-radius: 24px;
    margin-right: 6px;
    background: rgba(var(--colorh), 1);
    transform: scale(0.75);
}
.header .logo .fav:before{
    content: "";
    position: absolute;
    width: 33px;
    height: 20px;
    border-radius: 24px;
    background: rgba(var(--colorh), 1);
    left: -10px;
    bottom: 0px;
}
.header .logo .fav:after{
    content: "";
    position: absolute;
    width: 45px;
    height: 20px;
    border-radius: 24px;
    background: rgba(var(--colorh), 0.6);
    right: -6px;
    bottom: 0px;
}
.header .logo:hover{
    background: rgba(var(--colorh), 0.08);
}
.header .nav{
    flex: 1;
}
.header .nav a{
    padding: 4px 2px;
    /* background: #fff; */
    border-radius: 10px;
    /* border: 1px #fff solid; */
}
.header .nav a:not(:last-child){
    margin-right: 10px;
}
.header .nav a:hover{
    /* background-color: rgba(var(--colorh), 0.09); */
}
.header .nav a:before{
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 25px;
    height: 3px;
    border-radius: 23px;
    background: rgba(var(--colorh), 0);
    transform: translateX(-50%);
}
.header .nav a:hover:before{
    content: '';
    position: absolute;
    bottom: -4px;
    left: 50%;
    width: 25px;
    height: 3px;
    border-radius: 23px;
    background: rgba(var(--colorh), 0.35);
    transform: translateX(-50%);
}
.header .nav  a.on:before{
    background: rgba(var(--colorh), 0.85);
}
.header .nav a .tip{
    background: var(--color);
    line-height: 1;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 5px;
}
.header .nav .udp{
    
}
.header .nav .udp .dp{
    width: 36px;
    height: 36px;
    background: rgba(var(--colorh), 0.2);
    border-radius: 50px;
}
.header .nav .udp .dp img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.header .nav .udp .dp .tip{
    padding: 1px 4px;
    left: 0px;
    font-size: 8px;
    border-radius: 9px;
    border: 2px #f6f9fe solid;
    bottom: -2px;
    background: #20ab20;
}
.header .nav .sup{
    padding: 4px 10px;
    margin-left: 10px;
    border-radius: 3px;
}

.header .you_blnc{
    background: #c1d7f9;
    line-height: 0.4;
    border-radius: 50px;
    margin: 0px 20px 0px 10px;
}
.header .you_blnc h2{
    padding: 8px 6px;
}
.header .you_blnc .yb_add{
    background: rgba(0,0,0,0.05);
    padding: 5px 7px 7px 7px;
    border-radius: 0px 20px 20px 0px;
    font-size: 24px;
}
.header .you_blnc .yb_add:hover{
    background: rgba(0,0,0,0.1);
}

._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;
}

.premium-plans{
    flex: 1;
    margin: 20px 0px;
}
.premium-plans .proplan{
    background: rgba(var(--colorh), 0.05);
    flex: 1;
    margin: 8px;
    text-align: center;
}
.premium-plans .proplan:nth-child(1){
    margin-left: 0px;
}
.premium-plans .proplan:nth-child(4){
    margin-right: 0px;
}
.premium-plans .proplan .mta{
    background: var(--color);
    flex: 1;
    padding: 25px;
}
.premium-plans .proplan .mta .lbl{
    margin-bottom: 6px;
}
.premium-plans .proplan .info{
    padding: 25px 0px;
}
.premium-plans .proplan .info h2{
    margin: 3px 0px;
}
.premium-plans .proplan .info .sv{
    margin-top: 8px;
}
.premium-plans .proplan .info .button{
    margin: 25px auto 0px auto;
    border-radius: 0px;
    width: 100px;
}

.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;}

.landing{
    padding: 50px 15%;
    min-height: calc(100vh - 50px);
    z-index: 3;
}
.banding{
    padding: 0px 15%;
}
.landing img{
    width: 100%;
}
.landing ._l{
    max-width: 400px;
}
.landing ._r{
    flex: 1;
    margin-left: 50px;
    flex: 1;
}
.landing .gur{
    margin: 20px 0px;
    padding: 7px 20px;
}
.img.fixed{
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 0;
    opacity: 0.2;
}

.footer{
    border-top: 1px solid #ddd;
    padding: 50px 100px;
}
.footer .copyr{flex: 2;}
.footer .nav{
    flex: 1;
}
.footer .nav .ttl{
    margin-bottom: 10px;
}
.footer .nav a{margin-bottom: 3px;}

.help-in{
    padding: 20px;
    width: 700px;
}
.help-in .head{
    margin-bottom: 20px;
}
.help-in .label{
    margin-bottom: 4px;
}
.help-in .label.label-b{
    margin-top: 25px;
}
.help-in .feedback{
    width: 500px;
}
.help-in .feedback .uform{margin-top: 15px;}
.help-in .feedback .input{
    margin-bottom: 10px;
}
.help-in .feedback textarea{
    height: 300px;
    resize: none;
}
.help-in .feedback .button{
    margin-top: 10px;
    width: 140px;
}

.help-section{
    flex: 1;
}

.antidebrid{
    width: 700px;
    margin: 50px auto;
    background: rgba(var(--colorh), 0.1);
    padding: 30px;
}
.antidebrid h2{
    margin-bottom: 10px;
}
.antidebrid p:last-child{color: red;}
.antidebrid .gform{
    margin: 20px 0px;
}
.antidebrid .gform .input{
    flex: 1;
    padding: 8px;
    margin-right: 10px;
    max-width: 450px;
}
.antidebrid .gform .button{}

.maintenance{
    width: 500px;
    margin: 150px auto;
}.maintenance img{margin: 0px auto 30px auto;display:block;width: 300px;}
.pptt{width: 500px;margin-top: 20px;}
.buy-with-pp{width: 300px;margin-bottom: 20px;margin-top: 10px;background: #0d640d;border: 0;padding: 8px 10px;border-radius: 6px;cursor: pointer;text-decoration: none;};
.buy-with-pp:hover{background: #043d04!important;}
.buy-with-tt{width: 300px;margin-bottom: 20px;border: 0;background: #035de7;padding: 8px 10px;border-radius: 6px;cursor: pointer;text-decoration: none;}
.buy-with-tt:hover {background:rgba(var(--colorh),0.8)}
.box{display:none;opacity: 0.8;background-color:#ccc;position:fixed;width:100%;height:100%;top:0px;left:0px;z-index:1000;}
/*Alerts*/
.alerts{
    width: 600px;
    margin: 0 auto 100px auto;
}
.alerts .section-title{
    padding: 25px 0px;
}
.alerts .list{
	width: 600px;
    margin: 0 auto;
}
.alerts .item{
	background: #fff;
    padding: 6px 15px;
    border-radius: 5px;
}
.alerts .item-unread:nth-child(even),
.alerts .item:nth-child(even){
    background: rgba(var(--colorh), 0.05);
}
.alerts .item-unread{
	background: #fafdff;
}
.alerts .item:not(:last-child){
	
}
.alerts .item .meta{}
.alerts .item .stat{
	width: 10px;
    height: 10px;
    background: #dfe6f0;
    margin-right: 20px;
    border-radius: 20px;
	border: 0px;
}
.alerts .item .stat-unread{
	background: var(--color);
	box-shadow: 0px 0px 0px 2px var(--color);
}
.alerts .item .txt{
	flex: 1;
	width: 460px;
}
.alerts .item .stamp{
	width: 130px;
    text-align: right;
}
.alerts .mark-all-alerts-read{
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
}

.header .ua-count{
    background: var(--color);
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    margin-left: 8px;
}