:root{
    --color: #2f82ff;
    --colorh:26, 162, 238;
    --colorH: rgba(var(--color), 0.9);
    --sidebarWidth: 250px;
    --color-folder: var(--color);
    --radius: 20px;
    --bgc: #f3f3f3;
    --primary: var(--color);
    --light: #d1d5df;
    --blue: #2f82ff;
}
.color{color: var(--color);}
.pcolor{color: var(--primary);}

[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: #050b1f;
    overflow: hidden;
}
body.nof{
    overflow: hidden;
}
a{
    color: #111;
}
.button{
    border: 0px;
    background: var(--color);
    padding: 8px 10px;
    border-radius: 6px;
}
.button:hover{
    opacity: 0.9;
}
.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, .9);
    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; */
    padding: 5px 20px;
    background: #050b1f;
    z-index: 99;
    height: 60px;
    backdrop-filter: saturate(180%) blur(20px);
}
.ribbon-curve{
    background: #fff;
    border-radius: 20px 20px 0px 0px;
    height: 15px;
}
.header .logo{
    padding: 0px 5px;
    text-transform: uppercase;
    border-radius: 10px;
}
.header .logo a{ width: 150px; }
.header .logo img{ width: 160px !important; }
.header .logo .j{
    border-radius: var(--radius);
    margin-right: 4px;
    /* background: rgba(var(--colorh), 1); */
    padding: 5px 8px 3px 8px;
    line-height: 1;
}
.header .logo .oa{
    width: 65px;
    height: 60px;
    z-index: 2;
}
.header .logo .oa:before{
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    height: 32px;
    background: var(--primary);
    width: 74px;
    transform: translate(0px, -50%) skewX(-5deg);
    border-radius: 4px;
    transition: all 0.3s linear 0s;
    opacity: 1;
}
.header .logo .oa.h:before{
    transform: translate(-120px, -50%) skewX(5deg);
    opacity: 0;
}
.header .logo .oa.v:before{
    transform: translate(20px, -50%) skewX(-8deg);
}
.header .logo .ob{
    width: 65px;
    height: 60px;
    top: 50%;
    transform: translate(0px, -50%);
    z-index: 1;
    left: 84px;
}
.header .logo .ob h2{
    transform: translateX(0px);
}
.header .logo .ob.h h2{
    transform: translateX(-78px);
}
.header .logo .oa .b{ z-index: 2 ;}
.header .logo:hover{
    background: #191a33;
}
.header .nav{
    flex: 1;
}
.header .nav._l{
    left: 300px;
    z-index: 3;
    gap: 5px;
}
.header .nav._l a{
    padding: 6px 15px;
    border-radius: 30px;
}
.header .nav._l a:hover{
    background: #383b64;
}
.header .nav._l a.on{
    background: #5f617d;
}
/* .header .nav a{
    padding: 9px 12px;
    line-height: 1;
    background: #494949;
    margin-left: 1px;
    color: #fff;
}
.header .nav a.a-f{
    border-radius: var(--radius) 0px 0px var(--radius);
}
.header .nav a.a-r{
    border-radius: 0px var(--radius) var(--radius) 0px;
}
.header .nav a:hover{
    background: #6b6b6b;
}
.header .nav  a.on{
    /* background: #464646; */
    /* color: #fff; 
}

.header .nav a .tip{
    background: var(--color);
    line-height: 1;
    text-transform: uppercase;
    padding: 2px 6px;
    border-radius: 6px;
    margin-left: 5px;
}
.header .nav a.sin-meout{
    /* border-radius: var(--radius);
    background: #f74f4f;
    color: #fff;
}
.header .nav a.pro-upgrade{
    margin: 0px 12px 0px 6px;
    background: #2db11c;
    color: #fff;
    border-radius: var(--radius);
}
.header .nav a.sin-meout{
    border-radius: var(--radius);
} */
.header .pro-upgrade{
    background: #2eb01b;
    padding: 4px 12px 4px 3px;
    border-radius: 30px;
    margin: 1px 5px 0px 5px;
    height: 36px;
}
.header .pro-upgrade div{
    background: green;
    padding: 8px;
    border-radius: 30px;
    margin-right: 6px;
}
.header .pro-upgrade:hover{
    background: #219710;
}
.header .ume{
    background: #242647;
    padding: 4px 12px 4px 4px;
    border-radius: 30px;
}
.header .ume:hover{
    background: #2e3056;
}
.header .ume .dp{
    width: 30px;
    height: 30px;
    background: rgba(var(--colorh), 0.2);
    border-radius: 50px;
}
.header .ume .dp img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.header .ume .um{
    margin: 0px 5px 0px 10px;
}

.header .ume .tip{
    padding: 1px 3px 0px 3px;
    font-size: 8px;
    border-radius: 3px;
    text-transform: uppercase;
    background: var(--color);
    margin: 0px 0px 0px 6px;
}


.header .nav .sup{
    padding: 6px 18px;
    margin-left: 20px;
    border-radius: 23px;
    background: var(--primary);
}

.header ._youmu{
    background: #fbf7f2;
    top: 45px;
    right: 2px;
    border-radius: 5px;
    box-shadow: 0px 0px 0px 1px #c6c6c6, 0px 2px 2px #cecece;
    display: none;
}
.header ._youmu ._h{
    padding: 20px;
}
.header ._youmu ._h .picture{
    margin-right: 20px;
    min-width: 100px;
}
.header ._youmu ._h .picture img{
    width: 50px;
    height: 50px;
    background: #eee;
    border-radius: 50px;
    margin: 0 auto 8px auto;
    display: block;
}
.header ._youmu ._h .picture a:hover{ opacity: 0.8; }
.header ._youmu ._h .picture a{
    left: 50%;
    bottom: -15px;
    white-space: pre;
    border: 0px;
    line-height: 1;
    transform: translateX(-50%);
    background: var(--color);
    color: #fff;
    padding: 2px 4px;
    border-radius: 5px;
    font-size: 10px;
}
.header ._youmu .abt{ width: 250px; }
.header ._youmu .abt ._naam{color: #111;}
.header ._youmu .abt ._email{color: #111;}
.header ._youmu .prom{
    margin-top: 10px;
}
.header ._youmu .ribbon{
    width: 40px;
    margin-right: 10px;
    background: #71ad33;
    color: #fff;
    height: 40px;
    font-size: 24px;
    border-radius: 20px;
}
.header ._youmu .prom .plan{}
.header ._youmu ._stats{
    border-top: 1px #dfdfdf solid;
    border-bottom: 1px #dfdfdf solid;
}
.header ._youmu ._stats .strr{
    border-left: 1px #dfdfdf solid;
}
.header ._youmu ._stats .str{
    flex: 1;
    padding: 20px;
}
.header ._youmu ._stats .ring{
    width: 75px;
    height: 75px;
}
.header ._youmu ._stats .stats{}
.header ._youmu ._stats .stats .h1{color: #111;}
.header ._youmu ._stats .stats .h2{}
.header ._youmu .sin-meout{
    width: 100%;
    background: transparent;
    text-align: center;
    justify-content: center;
    padding: 8px;
    margin-bottom: 4px;
}
.header ._youmu .sin-meout:hover{
    background: #f1ede9;
}
._side{
    flex: 1;
    height: 100vh;
    max-width: 250px;
    padding: 20px;
    top: 51px;
    overflow-x: hidden;
    overflow-y: auto;
    background: rgba(255,255,255,0.7);
}
._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: 50%;
    left: 0px;
    width: 10px;
    border-radius: 13px;
    background: var(--light);
    transform: translateY(-50%);
    height: 10px;
}
._side .nav a:hover:before{
    background: rgba(var(--colorh), 0.3);
}
._side .nav a.on:hover:before,
._side .nav a.on:before{
    background: var(--primary);
}
.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(255,255,255, 0.5);
}
.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: 40px 0px 60px 0px;
    gap: 1px;
}
.premium-plans .proplan{
    background: rgb(240 246 255);
    flex: 1;
    padding: 40px 0px 40px 35px;
    text-align: center;
    border-radius: 7px;
}
.premium-plans .proplan.p3{
    background: rgb(216 230 248);
    transform: scale(1.05);
    z-index: 1;
}
.premium-plans .proplan:nth-child(1){
    margin-left: 0px;
}
.premium-plans .proplan:nth-child(4){
    margin-right: 0px;
}
.premium-plans .proplan .mta{
    flex: 1;
    /* padding: 0px 0px 0px 40px; */
}
.premium-plans .proplan .plbl{
    text-align: left;
    background: var(--primary);
    align-self: baseline;
    color: #fff;
    line-height: 1;
    padding: 10px 6px 3px 6px;
    border-radius: 0px 0px 3px 3px;
    position: absolute;
    top: -10px;
    left: 20px;
}
.premium-plans .proplan .plbl:before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    top: 0px;
    left: -10px;
    border: 5px transparent solid;
    border-bottom: 5px #363b4a solid;
    border-right: 5px #363b4a solid;
}
.premium-plans .proplan .mta .lbl{
    margin: 0px 3px 12px 0px;
}
.premium-plans .proplan .info{
    /* padding: 0px 0px 0px 0px; */
    text-align: left;
}
.premium-plans .proplan .info h2{
    margin: 3px 0px;
}
.premium-plans .proplan .info .sv{
    margin-top: 8px;
}
.premium-plans .proplan .button{
    margin: 25px 0px 30px 0px;
    border-radius: var(--radius);
    width: 160px;
    border: 1px var(--primary) solid;
    background: var(--primary);
    color: #fff;
}
.premium-plans .proplan .button:hover{ background: #40b0ee; }

.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(--primary);
    color: #fff;
    width: 80px;
    height: 80px;
    margin: 0 auto;
    border-radius: 50%;
}
.pro-done .button{
    width: 200px;
    margin: 30px auto;
    background: var(--primary);
}
.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: 500px;
    margin: 50px auto 100px auto;
    background: #f4f8ff;
    padding: 40px;
    border-radius: 0px var(--radius) 0px 0px;
}
.account-section{
    background: #fff;
    border-radius: var(--radius) var(--radius) 0px 0px;
    min-height: 100vh;
}
.account-section .lock-blur{
    position: absolute;
    filter: blur(10px);
    width: 200px;
    z-index: 1;
    left: 0px;
    height: auto;
    bottom: 3%;
    opacity: 0.5;
}
.account-section .key-blur{
    position: absolute;
    filter: blur(10px);
    width: 200px;
    z-index: 1;
    left: 30vw;
    height: auto;
    top: 3%;
    opacity: 0.5;
}
.account .ahead{
    margin-bottom: 20px;
}
.account .ahead .slogan{margin-bottom: 10px;}
.account .uform{
    width: 100%;
}
.account .uform .input{
    margin-bottom: 15px;
    border: 0px;
    padding: 15px;
    background: #fff;
    box-shadow: 0px 1px 1px #ccc;
}
.account .uform .button{
    margin-top: 20px;
    width: 140px;
    background: var(--primary);
}
.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: 120px 15%;
    min-height: calc(100vh - 50px);
    z-index: 3;
    background: #fff;
}
.lnd{border-radius: var(--radius) var(--radius) 0px 0px;}
.banding{
    padding: 20px 15%;
    background: #fff;
}
.landing img{
    width: 50%;
}
.landing img.abs{
    left: 150px;
}
.landing .folder-blur{
    position: absolute;
    filter: blur(10px);
    width: 400px;
    z-index: 1;
    left: 0px;
    height: auto;
    bottom: 10%;
    opacity: 0.5;
}
.landing .locker-blur{
    position: absolute;
    filter: blur(10px);
    width: 20vw;
    z-index: 1;
    right: 10%;
    height: auto;
    top: 10%;
    opacity: 0.35;
}
.banding .card-blur{
    position: absolute;
    filter: blur(10px);
    width: 20vw;
    z-index: 1;
    right: 2%;
    height: auto;
    top: 10%;
    opacity: 0.35;
}
.banding .circle-blur{
    position: absolute;
    filter: blur(10px);
    width: 12vw;
    z-index: 1;
    left: 1%;
    height: auto;
    bottom: 3%;
    opacity: 0.35;
}
.landing ._l{
    max-width: 700px;
    text-align: center;
}
.landing ._r{
    flex: 1;
}
.landing .gur{
    margin: 20px 0px;
    padding: 10px 30px;
    background: var(--primary);
}
.landing .allm{
    background-position: 50% top;
    background-size: 60%;
}
.img.fixed{
    top: 0px;
    left: 0px;
    height: 100%;
    z-index: 0;
    opacity: 0.2;
}

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

.help-in{
    border-radius: var(--radius) var(--radius) 0px 0px;
    background: #fff;
}
.help-in .head{
    border-bottom: 1px #ddd solid;
    padding: 15px 30px;
    color: #111;
    text-align: center;
    overflow: hidden;
}
/* .help-in .head:before{
    background: #44bbff;
    content: '';
    position: absolute;
    width: 50%;
    left: -100px;
    top: 0px;
    height: 200%;
    z-index: 0;
    transform: rotate(45deg);
}
.help-in .head:after{
    background: #58c2ff;
    content: '';
    position: absolute;
    width: 50%;
    left: -180px;
    top: 0px;
    height: 200%;
    z-index: 1;
    transform: rotate(45deg);
} */
.help-in .head .h{ z-index: 3; }
.help-in .meta{ padding: 50px; }
.help-in .label{
    margin-bottom: 4px;
}
.help-in .label.label-b{
    margin-top: 25px;
}
.help-in .feedback{
    width: 700px;
    padding: 50px;
    margin: 0 auto;
}
.help-in .feedback .uform{margin-top: 15px;}
.help-in .feedback .input{
    margin-bottom: 10px;
    border: 0px;
    padding: 12px;
    background: #f1f1f1;
}
.help-in .feedback textarea{
    height: 300px;
    resize: none;
}
.help-in .feedback .button{
    margin-top: 10px;
    width: 140px;
    background: var(--primary);
}
.help-support{
    flex: 1;
    border-radius: var(--radius) var(--radius) 0px 0px;
    margin-top: 35px;
}
.help-section{
    flex: 1;
    background: #fff;
    border-radius: var(--radius) var(--radius) 0px 0px;
}
.meta-help{ padding: 50px 12vw !important; }

.antidebrid{
    width: 700px;
    margin: 50px auto;
    background: var(--light);
    padding: 30px;
}
.antidebrid h2{
    margin-bottom: 10px;
}
.antidebrid p:last-child{color: red;}
.antidebrid .gform{
    margin: 20px 0px;
}
.antidebrid .gform .input{
    flex: 1;
    padding: 12px;
    margin-right: 10px;
    max-width: 450px;
    border: 0px;
}
.antidebrid .gform .button{
    background: var(--primary);
    padding: 11px;
}

.maintenance{
    width: 500px;
    margin: 150px auto;
}
.maintenance img{margin: 0px auto 30px auto;display:block;width: 300px;}

.me-nav{
    background: var(--primary);
    left: 0px;
    right: 0px;
    top: 60px;
    border-radius: var(--radius) var(--radius) 0px 0px;
    height: 100px;
}
.me-nav a{
    padding: 8px 20px;
    color: #fff;
    height: 35px;
}
.me-nav a:hover{
    background-color: #1f79ff;
}
.me-nav a.on{
    background: #0368ff;
}
.me-nav a .ico{
    margin-right: 4px;
}