:root{
    --color: #00b073;
    --colorh: 0, 176, 115;
    --colorH: rgba(var(--color), 0.9);
    --sidebarWidth: 250px;
    
    --bg-primary: #f1f5fd;
    --bg-secondary: #fff8ef;
    --padding-h: 10vw;
    --radius: 20px;
}
.color{ color: var(--color); }
* { word-spacing: normal !important; }
body, .font{ font-family: "THICCCBOI", sans-serif; }
body{
    font-size: 0.85rem;
    -webkit-font-smoothing: antialiased;
    color: #111;
}
.hidem{display: block;display: flex !important;}
.hided{display: none !important;}
.red{ color:rgb(228, 59, 59); }
.note{
    padding: 15px;
    border: 1px rgba(var(--colorh), 0.1) solid;
    background: rgba(var(--colorh), 0.05);
    border-radius: 5px;
}
.note.ylo{
    background: #ffedb8;
    border: 1px #f1dea4 solid;
}
.note.error{
    background: #ffb8b8;
    border: 1px #f1a4a4 solid;
}
.note .actions{
    margin-top: 15px;
}
.note .actions .or{
    margin: 0px 10px;
}
.note .actions .button{
    padding: 5px 10px;
    border-radius: 4px;
}
._pending, .empty{
    padding: 50px;
}
.empty .s1{ margin-bottom: 5px; }
.button{
    background: var(--color);
    border: 0px;
}
.button.bred{ background:rgb(228, 59, 59); }
.button.bred:hover{ background: rgb(250, 69, 69); }
.button:hover{
    background: rgba(var(--colorh), 0.8);
}
.fotr{ height: 15vh; }
.anim {
    transition: all 0.2s linear 0s;
}
header{
    background: var(--bg-secondary) !important;
    z-index: 1020;
    padding: 20px var(--padding-h);
}
header .logo{
    flex: 1;
}
header .logo div{
    margin-right: 5px;
    color: var(--color);
}
header .nav{
    flex: 2;
}
header .nav a{
    padding: 8px 20px;
    margin: 0px 2px;
    border-radius: 20px;
}
header .nav a:hover{
    background: rgba(0,0,0,0.05);
}
header .nav a.on{
    background: rgba(0,0,0,0.05);
}
header .nav .sub-menu{
    background: #333;
    z-index: 9;
    border-radius: 2px;
    padding: 5px 0px;
    top: 35px;
    right: 12px;
    display: none;
}
header .nav .sub-menu:before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border: 7px rgba(0,0,0,0) solid;
    border-bottom: 7px #333 solid;
    top: -13px;
    right: 10px;
}
header .nav .sub-menu a{
    color: #fff;
    text-align: left;
    padding: 8px 20px;
    margin: 0px;
    border-radius: 0px;
    white-space: pre;
}
header .nav .sub-menu a:hover{ background: #444; }

.sub-menu{
    background: #fff2e2 !important;
    top: 77px;
    left: var(--padding-h);
    right: var(--padding-h);
    z-index: 111;
    padding: 50px;
    border-radius: 0px 0px 50px 50px;
    box-shadow: 0px 0px 0px 7px #ffe0b5, 0px 5px 0px 7px #ffd090;
    gap: 75px;
    transform: translateY(-100vh);
    opacity: 0;
    transition: all 0.4s ease-in-out 0s;
}
.sub-menu.shown{
    transform: translateY(0px);
    opacity: 1;
}
.sub-menu .f{flex: 1;text-align:center;}
.sub-menu .l2{
    margin-bottom: 10px;
}
.sub-menu .spt{
    width: 4px;
    background: #f3dab6;
    height: 300px;
}
.sub-menu ul{
    margin-top: 15px;
    height: 190px;
}
.sub-menu li{
    margin-bottom: 10px;
}
.sub-menu li div{ margin-right: 5px; }
.sub-menu a.button{
    margin: 35px auto 0px auto;
    padding: 12px 25px;
    border-radius: 20px;
}

header .user{
    flex: 1;
}
header .user a{
    padding: 8px 20px;
    border-radius: 20px;
    margin-left: 10px;
}
header .nav a:hover{
    background: rgba(0,0,0,0.05);
}
header .user a.btn{
    background: var(--color);
    padding: 10px 40px;
    border-radius: 20px;
    white-space: pre;
}
header .user a.btn:hover{
    opacity: 0.8;
    background: var(--color);
}
header .user .me{ white-space: pre; }
header .user .me .chevr{ margin-left: 5px; }
header .user .umenu{
    background: #333;
    z-index: 9;
    border-radius: 2px;
    padding: 5px 0px;
    top: 35px;
    right: 12px;
    display: none;
}
header .user .umenu:before{
    content: '';
    position: absolute;
    width: 0px;
    height: 0px;
    border: 7px rgba(0,0,0,0) solid;
    border-bottom: 7px #333 solid;
    top: -13px;
    right: 10px;
}
header .user .umenu a{
    color: #fff;
    text-align: left;
    padding: 8px 20px;
    margin: 0px;
    border-radius: 0px;
    white-space: pre;
}
header .user .umenu a:hover{ background: #444; }

/*HOME*/
.landing{
    padding: 20px var(--padding-h);
    /* min-height: calc(100vh - 130px); */
}
.landing.main{
    background: #ffedd6;
    background: linear-gradient(180deg, #fff8ef, rgba(255, 255, 255, 0) 100%) !important;
    height: calc(100vh - 130px);
}
@keyframes ringing{
    50% {
        transform: scale(1.1);
        opacity: 0.5;
    }
}
.z1{z-index: 1;}
.landing.main .-ring{
    animation: ringing;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-duration: 6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
    width: 40vw;
    height: 40vw;
    border: 1px #c4c4c4 solid;
    border-radius: 50%;
    z-index: 0;
    opacity: 0;
}
.landing.main .-ring.-r2{ 
    animation-delay: 0.25s;
    width: 50vw;
    height: 50vw;
}
.landing.main .-ring.-r3{ 
    animation-delay: 0.5s;
    width: 70vw;
    height: 70vw;
}

.landing .lb{ flex-direction: row-reverse;}
@keyframes float{
    50% {
        transform: translateY(-10%);
    }
}
.--graphic{
    animation: float;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
    animation-duration: 6s;
    animation-direction: alternate;
    animation-iteration-count: infinite;
}
.landing .graphic{
    /* flex: 1.5;
    margin-right: 75px; */
    height: 50vh;
}
.landing .graphic img{
    /* width: 100%;
    max-width: 100%; */
    height: 100%;
    max-height: 100%;
}
.landing .lines{
    flex: 1;
}
.landing .l1{
    margin-bottom: 20px;
}
.landing.main .l1{
    width: 65vw;
    text-align: center;
}
.landing .lines .button{
    background: #0279e3;
    line-height: 1;
    padding: 14px 30px;
    margin-top: 50px;
    border-radius: 15px;
}
.landing .lines .button:hover{ opacity: 0.8; }
.landing .items{
    flex-wrap: wrap;
    gap: 20px;
    margin: 50px 0px 150px 0px;
}
.landing .item{
    flex: 1;
    flex-basis: 30%;
}
.landing .item .lbl{ white-space: pre; }


.howto{
    padding: 20px var(--padding-h);
    /* min-height: calc(100vh - 130px); */
}
.howto .f{
    flex: 1;
    border: 1px #a5dac7 solid;
    padding: 50px;
    border-radius: var(--radius);
    border-bottom: 10px #58aa8d solid;
    background: #fff;
}
.howto .l2{
    margin-bottom: 10px;
}
.howto .spt{
    margin: 0px 20px;
    height: 50vh;
    align-self: center;
}
.howto ul{
    margin-top: 15px;
    height: 190px;
}
.howto li{
    margin-bottom: 10px;
}
.howto li div{ margin-right: 5px; }
.howto a.button{
    margin-top: 25px;
    padding: 12px 25px;
    border-radius: 20px;
}

.features{
    padding: 20px var(--padding-h);
    min-height: calc(100vh - 130px);
    background: url(../ui/stripes_bg.png);
    margin-top: 50px;
}
.features .items{
    flex-wrap: wrap;
    gap: 50px;
}
.features .item{
    flex: 1;
    flex-basis: 30%;
}
.feautres .item .icon{
    font-size: 72px;
    margin-bottom: 10px;
}
.features .item .lbl{ white-space: pre; }
.mttl{
    margin: 50px 0px;
}

.landing.g{ padding-top: 100px; }
.reviews{
    background: linear-gradient(0deg, #fff8ef, rgba(255, 255, 255, 0) 100%) !important;
    padding: 20px var(--padding-h);
    min-height: calc(100vh - 130px);
}
.reviews .lines{
    flex: 1;
}
.reviews .list{
    flex: 1.5;
    margin-left: 75px;
}
.reviews .list .item{
    background: #fff;
    padding: 25px;
    border-radius: 5px;
    margin: 5px 15px 25px 0px;
    box-shadow: 0px 1px 1px 1px #eeeeee;
    transform: translateX(-10px);
}
.reviews .list .item.m{
    transform: translateX(20px);
}
.reviews .list .item .nm{
    margin: 8px 0px;
}
.reviews .list .item:before{
    position: absolute;
    font-size: 40px;
    z-index: 0;
    top: -20px;
    left: 20px;
    color: var(--color);
}

.landing.try{
    padding: 150px var(--padding-h);
}

.footer{
    background: rgb(52,63,82);
    padding: 50px var(--padding-h) 75px var(--padding-h);
}
/* .footer:before{
    content: '';
    background: rgb(52 63 82);
    position: absolute;
    width: 200vw;
    height: 100px;
    top: -50px;
    transform: rotate(2deg);
    left: -20vw;
} */

.footer .s1{ flex: 2; }
.footer .s2{ flex: 1; }
.footer h2{ margin-bottom: 5px; }
.footer .s1 .copyright{ margin: 10px 0px 20px 0px; }
.footer .s1 .social{
    margin-top: 15px;
}
.footer .s1 .social a{
    margin-right: 20px;
}
.footer .s2 .lnk{ margin-top: 5px; }
/*Apps*/
.section-header{
    background: #fffcf8;
    padding: 20px var(--padding-h);
    height: 60px;
}
.section-header .page-meta{
    flex: 1;
}
.section-header .page-meta .aro{
    padding: 0px 10px;
}
.section-header .page-actions{
    flex: 1;
}
.section-header .page-actions .add-new{
    line-height: 1;
    padding: 10px 12px;
    border-radius: 20px;
}

.user-stats{
    background: #fff6eb;
    gap: 20px;
}
.user-stats .stat{
    flex: 1;
}
.user-stats .stat .ttl{}
.user-stats .stat .progress{
    width: 100%;
    height: 6px;
    background: #e4dace;
    border-radius: 10px;
    margin-top: 7px;
    overflow: hidden;
}
.user-stats .stat .progress .bar{
    height: 6px;
    background: var(--color);
}
.user-stats .stat .button{
    padding: 10px;
    border-radius: var(--radius);
}


.treeview{
    border: 1px #ddd solid;
    padding: 20px;
}
.form{}
.form .sect{
    margin-bottom: 20px;
}
.form .sect.tr{
    gap: 10px;
}
.form .sect.tr .sect{ flex: 1; }
.form .sect .lb{}
.form .sect .ln{}
.form{
    width: 400px;
    margin: 0 auto;
}
.form .button{
    padding: 10px 12px;
    border-radius: 5px;
}
.input{
    flex: 1;
    width: 100%;
    border: 1px #ccc solid;
    border-radius: 5px;
    padding: 10px 12px;
    margin-top: 6px;
}
.add-site{
    padding: 20px var(--padding-h);
}
.capture-code{
    padding: 20px var(--padding-h);
}
.capture-code .form{
    width: 600px;
}

.account{
    padding: 50px 0px;
}
.account .form .spt{
    margin-top: 20px;
}
.account .form .spt .r{ margin-bottom: 4px; }
.account .app-checkbox{ margin-right: 8px; }

.app-list{
    margin: 0px var(--padding-h);
    min-height: 80vh;
}
.app-list .empty{
    padding: 150px;
}
.app-list .itemh{
    padding: 15px 0px;
}
.app-list .item{
    padding: 4px 10px;
    border-radius: 10px;
}
.app-list .item:nth-child(even){
    background: #f8f8f8;
}
.app-list .sct{
    flex: 1;
}
.app-list .naam{
    flex: 1;
}
.app-list .size{
    flex: 1;
    max-width: 160px;
}
.app-list .action{
    flex: 1;
    max-width: 120px;
}
.app-list .status{
    flex: 1;
    max-width: 220px;
}
.app-list .action .input{
    padding: 3px 6px;
    margin-top: 0px;
}
.request_direct_backup{
    padding: 7px 16px;
    border-radius: 10px;
}

.treeview{
    padding: 15px;
    border-radius: 5px;
    overflow: auto;
    max-height: 45vh;
}
.treeview .tree-root{
    margin-top: 10px;
}
.treeview .node{
    margin: 5px 0px;
}
.treeview .node .spinner{
    width: 20px;
    height: 20px;
    background: #fff;
    z-index: 1;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    display: none;
}
.treeview .node .spinner img{height: 14px;}
.treeview .node.node-root{
    margin-bottom: 12px;
    margin-left: 0px !important;
}
.treeview .node.sub-node,
.treeview .node.tree-root{
    margin-left: 25px;
}
.treeview .node .chevron{
    margin-right: 5px;
    border: 0px;
    padding: 2px;
    background: #0000;
}
.treeview .node .ico{
    color: var(--color);
    margin: 0px 4px 2px 0px;
    width: 20px;
    height: 20px;
}
.treeview .node button.chevron{
    border: 0px;
    padding: 0;
    line-height: 1;
    background: rgba(0,0,0,0);
}
.treeview .node button.chevron:disabled{
    color: #fff;
    cursor: auto;
}
.treeview .node button.check{
    padding: 0;
    line-height: 1;
    background: #fff;
    border-radius: 5px;
    width: 18px;
    height: 18px;
    margin-right: 7px;
    color: #fff;
    border: 1px #cfcfcf solid;
}
.treeview .node button.check:hover{
    color: #cfcfcf;
}
.treeview .node button.checked:hover,
.treeview .node button.checked{
    color: #fff;
    background: var(--color);
    border: 1px var(--color) solid;
}
.treeview .node .label{
    background: rgba(0, 0, 0, 0);
    padding: 1px 6px;
    border-radius: 8px;
    white-space: nowrap;
    color: #111;
}
.treeview .node .label.open{
    background: var(--color);
    color: #fff;
}
.treeview .node .node-sub{
    margin-left: 25px;
}
.treeview .node .icon-document-text{ color: #444; }

.website-added{
    padding: 100px 0px;
}
.website-added .form{ width: 600px; }
.website-added .form .button{ padding: 7px 12px; }
.website-added .or{ margin: 0px 20px; }

.appify{
    padding: 20px var(--padding-h);
}
.appify .side{
    flex: 1;
    max-width: 240px;
    border-right: 1px #eee solid;
}
.appify .side .title{
    padding: 0px 10px 4px 0px;
}
.appify .side .schedule{
    padding: 0px 10px 20px 0px;
}
.appify .side a{
    color: #111;
    padding: 7px 10px 7px 0px;
    margin-bottom: 1px;
}
.appify .side a div{ margin-right: 6px; }
.appify .side a:hover,
.appify .side a.on{
    color: var(--color);
}
.appify .side a:hover{}
.appify .content{
    flex: 1;
    padding: 0px 20px;
    min-height: 80vh;
}
.appify .content .page-title{
    margin-bottom: 20px;
}
.appify .content .page-title .meta{
    flex: 1;
}
.appify .content .page-title .action{
    flex: 1;
    max-width: 250px;
}
.appify .content .page-title .action a.button{
    padding: 5px 12px;
    border-radius: 10px;
}
.appify .content .blist .note{
    margin-bottom: 20px;
}
.appify .content .bitem{
    padding: 10px 0px;
    border-bottom: 1px #eee solid;
}
.appify .content .bitem .stamp{
    flex: 1;
}
.appify .content .bitem .stamp .day{
    background: var(--color);
    line-height: 1;
    padding: 2px 7px;
    margin-right: 10px;
    border-radius: 6px;
}
.appify .content .bitem .stats{
    flex: 1;
}
.appify .content .bitem .stats .it{
    margin-right: 16px;
}
.appify .content .bitem .stats .dot{
    width: 8px;
    height: 8px;
    margin-right: 4px;
    border-radius: 2px;
}
.appify .content .bitem .stats .dot.g{
    background: rgb(9, 162, 9);
}
.appify .content .bitem .stats .dot.y{
    background: rgb(235, 193, 23);
}
.appify .content .bitem .stats .dot.r{
    background: rgb(211, 36, 36);
}
.appify .content .bitem .acts{}
.appify .content .bitem .acts .btn:hover{
    background: rgba(var(--colorh), 0.075);
}
.appify .content .bitem .acts .btn{
    margin-left: 4px;
    padding: 5px 12px;
    border: 1px var(--color) solid;
    background: #fff;
    color: var(--color);
    border-radius: 9px;
}

.appify .fm{
    border: 1px #ddd solid;
    border-top: 0px;
    border-radius: 0px 0px 7px 7px;
}
.appify .current-path{
    background: #242424;
    padding: 10px;
    border-radius: 7px 7px 0px 0px;
}
.appify .fm .item{
    padding: 5px 10px;
    padding: 10px;
}
.appify .fm .item .ico{
    margin-right: 6px;
}
.appify .fm .item:not(:last-child){
    border-bottom: 1px #ddd solid;
}
.appify .fm .item .ico.icon-folder{ color: var(--color); }
.appify .fm .item a{}
.appify .fm .item a:hover{
    background: #f1f1f1;
}

.appify .blist .sector{
    margin-bottom: 30px;
}
.appify .blist .sector .ico{
    margin-right: 15px;
}
.appify .blist .sector .meta{}
.appify .blist .sector .meta p{ margin-top: 4px; }
.appify .blist .sector .meta .button{
    padding: 5px 12px;
    border-radius: 8px;
    margin-top: 20px;
}
.appify .blist .sector .meta .recm{
    background: #ffc127;
    padding: 1px 5px;
    margin-left: 8px;
    border-radius: 4px;
}
.appify .blist button.opt{
    border: 0px;
    background: #fff;
    margin: 8px 0px;
    padding: 0px 0px 0px 25px;
}
.appify .blist button.opt:before{
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #eee;
    left: 0px;
    top: 0px;
    border-radius: 3px;
    cursor: pointer;
}
.appify .blist button.opt:hover{}
.appify .blist button.opt.on:before{
    background: var(--color);
}
.appify .blist button.opt.on:after{
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #fff;
    left: 5px;
    top: 5px;
    border-radius: 1px;
    cursor: pointer;
}
.appify .blist .actions{
    margin-top: 20px;
}
.appify .blist .actions .button{
    padding: 5px 12px;
    margin-right: 5px;
    border-radius: 6px;
}
.appify .blist .reason .t1{
    margin-bottom: 10px;
}
.appify .remarks{ margin-top: 20px }
.appify .confirm-restore .sector{
    margin-bottom: 30px;
}
.appify .confirm-restore .sect{
    flex: 1;
}
.appify .confirm-restore .sect h2.b{
    margin-bottom: 8px;
}
.appify .pending-restore{
    padding: 100px;
}
.appify .ips{
    margin-top: 10px;
}
.appify .ips .ip{
    background: #e6f1ec;
    padding: 6px 10px;
    margin: 1px 0px;
    border-radius: 5px;
}

.hline{
    height: 1px;
    background: #ddd;
    margin: 30px 0px;
}
._backupstamp{
    margin-top: 11px;
    padding: 9px 6px 8px 6px;
    margin-right: 10px;
    flex: 1;
}
._delbackupermanent,
._delbackup{ 
    margin-top: 10px; 
    padding: 10px 32px;
    border-radius: 5px;
}

.inbox{
    flex: 1;
}
.profile{

}

.premium{
    background: #fff8ef;
    min-height: 95vh;
}
.premium:before{
    content: '';
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 400px;
    z-index: 0;
    /* background: linear-gradient(0deg, transparent, #fff8ef); */
}
.premium .parts{ z-index: 1;}
.premium .title{
    margin: 10px 0px 4px 0px;
}
.premium .cover{ z-index: 2 !important; }
.premium .cover .loading{ top: 10%; }
.premium .dura{
    margin: 50px 0px;
}
.premium .dura button{
    background: #fff;
    border: 0px;
    padding: 12px 30px;
    margin: 0px 1px;
}
.premium .dura button.on{
    background: var(--color);
    color: #fff;
}
.premium .dura button:first-child{
    border-radius: var(--radius) 0px 0px var(--radius);
}
.premium .dura button:last-child{
    border-radius: 0px var(--radius) var(--radius) 0px;
}
.premium .dura button:hover{ opacity: 0.85; }
.premium .plans{
    gap: 15px;
    margin-bottom: 30px;
}
.premium .plbox{
    gap: 20px;
    margin-top: 45px;
}
.premium .plbox .modules{
    flex: 1;
    gap: 10px;
    display: none;
}
.premium .plbox .mod-ttl{margin-bottom: 15px;}
.premium .plbox .modules .module{
    border: 1px #02b173 solid;
    background: #fff;
    border-radius: var(--radius);
    padding: 30px;
    text-align: left;
    gap: 10px;
}
.premium .plbox .modules .module ul{
    gap: 5px;
}
.premium .plbox .modules .module ul li{}
.premium .plbox .modules .module:hover{
    transform: scale(1.01);
}
.premium .sel-ttl{display: none;}
.premium .switch-pro-plan{
    display: none;
    margin: 5px 0px 10px 95px;
}
.premium .plbox .modules .module.active:before{
    content: 'SELECTED';
    font-size: 13px;
    font-weight: bold;
    background: var(--color);
    position: absolute;
    padding: 5px 10px 4px 10px;
    border-radius: 20px;
    top: 10px;
    right: 10px;
    z-index: 2;
    color: #fff;
}
.premium .buy-with-module{
    padding: 10px;
    border-radius: var(--radius);
    margin: 30px 0px 75px 0px;
    width: 200px;
}
.premium .plans .plan{
    background: #fff;
    border-radius: var(--radius);
    flex: 1;
    box-shadow: 0px 0px 0px 1px #02b173;
    transform: translateY(20px);
    opacity: 0;
    align-self: flex-start;
    min-width: 312px;
}
.premium .plans .plan:hover{
    transform: translate(0px, 0px) scale(1.03) !important;
}
.premium .plans .plan.loaded{
    transform: translateY(0px);
    opacity: 1;
}
.premium .plans .plan .pmeta{
    padding: 40px;
}
.premium .plans .plan .permo-person{display: none;}
.premium .plans .plan .lb{
    margin-bottom: 5px;
}
.premium .plans .plan .slg{
    height: 65px;
}
.premium .plans .plan .amt{
    margin: 20px 0px 0px 0px;
    font-size: 80px;
}
.premium .plans .plan .sl{
    margin-bottom: 25px;
}
.premium .plans .plan .button{
    /* margin-top: 20px; */
    white-space: pre;
    padding: 15px 20px;
    border-radius: 0px 0px var(--radius) var(--radius);
}

.s3-mta{
    margin: 50px var(--padding-h);
}
.s3-mta .item{background: #fff;}
.premium .mta{
    margin-top: 50px;
}
.s3-mta .props,
.premium .props{
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 50px;
}
.s3-mta .props .item,
.premium .props .item{
    flex: 1;
    flex-basis: 30%;
    background: #fff;
    padding: 30px;
    border: 1px var(--color) solid;
    border-radius: var(--radius);
    height: 210px;
}
.s3-mta .props .item .ico,
.premium .props .item .ico{
    height: 50px;
    margin-bottom: 15px;
}
.s3-mta .props .item .tt,
.premium .props .item .tt{
    margin-bottom: 10px;
}
.s3-mta .props .compare,
.premium .mta .compare{
    align-self: center;
    margin: 70px 0px 50px 0px;
    padding: 20px 50px;
    border-radius: var(--radius);
}
.s3-branding{
    border: 1px var(--color) solid;
    border-bottom: 8px var(--color) solid;
    margin: 0 var(--padding-h);
    border-radius: var(--radius);
    padding: 80px;
    background: #fff;
    z-index: 2;
    position: relative;
}
.choose-pmt{
    max-width: 400px;
    margin: 30px auto;
    display: none;
}
.choose-pmt .continue-buy{
    padding: 14px;
    border-radius: 10px;
    text-align: center;
    justify-content: center;
    margin-top: 20px;
}
.choose-pmts button{
    border: 0px;
    margin: 7px 0px;
    padding: 6px 10px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0px 0px 0px 3px #fff5e7;
}
.choose-pmts button:hover{
    box-shadow: 0px 0px 0px 3px #f8e1c2;
}
.choose-pmts button.on{
    box-shadow: 0px 0px 0px 3px var(--color) !important;
}
.choose-pmts button .icn{ 
    width: 40px; 
    margin-right: 7px;
}
.choose-pmts button .icn img{ width: 100%; }
.choose-pmts button h2{}
.choose-pmt .cpv{
    margin: 5px 0px 30px 0px;
}
.choose-pmt .cpv button{
    padding: 0px;
    border: 0px;
    background: transparent;
    margin-left: 10px;
}
.kpay .choose-pmt{
    margin: auto !important;
    max-width: 100%;
}
.kpay .choose-pmt .title{ text-align: left; }
.kpay .choose-pmt .cpv{ justify-content: left; }
.kpay .choose-pmts button{ box-shadow: 0px 0px 0px 1px #ddd; }

.faqs{
    gap: 10px;
}
.faqs .fitem{
    flex: 1;
    width: 100%;
    background: #fff;
    align-self: flex-start;
    padding: 15px;
    border-radius: var(--radius);
    box-shadow: 0px 5px 3px 0px #fff4e5;
    border: 1px var(--color) solid;
}
.faqs .fitem .hd{}
.faqs .fitem .hd .toggle{
    line-height: 1;
    width: 35px;
    height: 30px;
    border: 0px;
    border-radius: 10px;
    background: #fff;
}
.faqs .fitem .hd .toggle:hover{
    background: #f9f9f9;
    color: #333;
}
.faqs .fitem .hd .title{
    flex: 1;
}
.faqs .fitem div.p{
    margin-top: 10px;
    display: none;
}
.faqs .fitem div ul{}
.faqs .fitem div ul li{}

.done{
    background: #fff;
    width: 620px;
    margin: 60px auto;
    padding: 50px;
    text-align: center;
    border-radius: var(--radius);
}
.done .ico{}
.done .ttl{
    margin: 5px 0px;
}
.done .msg{}
.done .button{
    padding: 10px 20px;
    margin-top: 30px;
    border-radius: var(--radius);
}

.go-part{
    padding: 40px;
    width: 700px;
    margin: 50px auto;
}
.go-part .button{
    padding: 10px 30px;
    border-radius: var(--radius);
    margin-top: 30px;
}

.dbs-title{ margin-bottom: 15px; }
.db-list{}
.db-list .db-item{
    padding: 11px;
    border: 0px;
    margin: 0px 0px 5px 0px;
    background: #fbfbfb;
    border-radius: 5px;
}
.db-list .db-item.on{
    background: #f1f1f1;
}
.db-list .db-item .check{
    width: 19px;
    height: 19px;
    border: 1px #c7c7c7 solid;
    border-radius: 5px;
    padding: 1px 3px 2px 1px;
    font-size: 15px;
    margin-right: 8px;
    color: #fff;
}
.db-list .db-item.on .check{
    background: var(--color);
    border: 1px var(--color) solid;    
}
.db-list .db-item:hover .check{}
.db-list .db-item .lbl{}
.edit-dbinfo{
    top: 50%;
    transform: translateY(-50%);
    right: 0px;
    padding: 8px 20px;
    border-radius: 10px;
}
.request_db_backup{
    top: 50%;
    transform: translateY(-50%);
    right: 75px;
    padding: 8px 20px;
    border-radius: 10px;
}
.help{}
.help p{
    margin-bottom: 20px;
}
.help .how{}
.help .how .title{}
.help .how .btns{}
.help .how .btns button{
    width: 120px;
    height: 160px;
    margin: 15px;
    border: 0px;
}
.help .how .btns button .ico{
    font-size: 68px;
    background: var(--color);
    color: #fff;
    padding: 30px;
    margin-top: 5px;
}
.help .how .btns button h2{
    padding: 4px;
}
.help .how .btns button:hover .ico{ opacity: 0.8; }
.help .sector{
    padding: 100px;
}
.help .sector .mt{
    flex: 1;
}
.help .sector .mt .t{
    flex: 1;
    margin: 20px 0px 10px 0px;
}
.help .sector .graphic{
    flex: 1;
}
.help .sects{
    flex-wrap: wrap;
}
.help .sects .sector{ flex-basis: 45%; padding: 20px; }
.help .sects .sector .graphic{ max-width: 110px; }
.help .shot{
    border: 2px #a5a5a5 solid;
    border-radius: 4px;
}

.help .stat-card{
    background:#f5f5f5;
    border-radius: 5px;
    gap: 10px;
    padding: 20px 30px;
    min-width: 180px;
    flex: 1 1 200px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;    
}
.help .stat-card:hover {
    transform: translateY(-5px);
}

.help .faq-section {
    padding: 60px 20px;
    /* max-width: 900px;
    margin: 50px auto;
    background: #f9f9f9;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); */
}

.help .faq-section h2 {
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    margin-bottom: 40px;
}

.help .faq-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.help details {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 12px;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.08); */
    cursor: pointer;
}

.help details[open] {
    padding: 20px 20px 10px 20px;
    /* box-shadow: 0 6px 20px rgba(0,0,0,0.12); */
}

.help summary {
    font-size: 1.125rem;
    font-weight: 600;
    outline: none;
    list-style: none;
}

.help summary::-webkit-details-marker {
    display: none;
}

.help details p {
    margin-top: 10px;
    font-size: 1rem;
    color: #555;
}

.contact{}
.contact .hed{
    background: #ffefda;
    padding: 100px var(--padding-h) 200px var(--padding-h);
}
.contact .cform{ 
    top: -250px;
    margin: 100px var(--padding-h);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0px 1px 6px #ccc;
}
.contact .uform{
    flex: 1;
    padding: 50px;
}
.contact .uform .gr{
    margin-bottom: 20px;
    gap: 20px;
}
.contact .uform .gr .g{
    flex: 1;
}
.contact .uform .gr .g .input{
    border-left: 3px #ccc solid;
}
.contact .uform textarea{ min-height: 200px; }
.contact .submit-refund,
.contact .submit-feedback{
    border-radius: 6px;
    padding: 10px 20px;
}

.contact .address{
    flex: 0.6;
    padding: 50px;
    background: var(--color);
}

.adb-settings{
    gap: 20px;
    margin-bottom: 30px;
}
.adb-settings .button{
    padding: 10px;
    border-radius: 5px;
}

.bo-ttl{
    text-align: center;
    background: #fff0dd;
    align-self: center;
    padding: 10px 20px;
    border-radius: 40px;
}
.hosting-provider {
    gap: 40px;
}
.hosting-provider .p1{
    flex: 1;
    gap: 20px;
}
.hosting-provider .meta-sec{
    gap: 10px;
}
.hosting-provider .hp-form{
    border: 1px #ddd solid;
    padding: 70px;
    border-radius: var(--radius);
}
.hosting-provider .hp-form input[type="text"],
.hosting-provider .hp-form textarea{
    border: 1px solid #ddd;
    padding: 10px 10px;
    width: 100%;
    border-radius: 7px;
}
.hosting-provider .hp-form .m-t{margin-top: 25px;}
.hosting-provider .hp-form,
.hosting-provider .hp-form .step-1,
.hosting-provider .hp-form .step-2,
.hosting-provider .hp-form .step-3{
    margin-top: 10px;
    gap: 10px;
}
.hosting-provider .submit-host-prov{
    padding: 15px 50px !important;
    background-color: var(--color) !important;
    align-self: self-start !important;
    border-radius: 100px !important;
    margin: 50px 0px 100px 0px !important;
}
/* .hosting-provider .hp-form input[type="radio"] {
    order: 1;
}

.hp-form span {
    order: 0;
} */
 .hosting-provider .hp-form label{
    display: flex;
    flex-direction: column;
    gap: 10px;
 }
.hosting-provider .hp-form .lbl{
    align-items: center;
    display: flex;
    gap: 10px;
}
.hosting-provider .hp-form .lbl span{
    order: 1;
    font-size: 16px;
}
.hosting-provider .p2{
    flex: 0.5
}
.hosting-provider .button{
    padding: 10px 15px;
    background-color: var(--color);
    align-self: self-start;
    border-radius: var(--radius);
}
.hosting-provider .button:hover{
    background: rgba(var(--colorh), 0.8);
}

.tm-grid{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: 30px;
}
.tm-grid .testimonial{
    border: 1px var(--color) solid;
    padding: 50px;
    border-radius: var(--radius);
    border-bottom: 8px var(--color) solid;
}
.tm-grid .testimonial .testimonial-header{
    width: 75px;
    height: 75px;
    border-radius: 40px;
    margin-bottom: 20px;
    padding: 4px;
}
.tm-grid .testimonial .testimonial-header img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
}
.tm-grid .testimonial p{
    margin-bottom: 30px;
}
.tm-grid .testimonial .author{}
.tm-grid .testimonial .company{}

.s3b{
    z-index: 1;
    align-self: flex-start;
    margin: 0 auto;
}
.s3b:before{
    content: '';
    height: 20%;
    position: absolute;
    z-index: 0;
    background: #00ce8f;
    border-radius: 4px;
    left: 0px;
    right: 0px;
    bottom: -11px;
    transform: rotate(-3deg);
}
.s3b:after{
    content: '';
    height: 10%;
    position: absolute;
    z-index: 0;
    background: #14aa7c;
    border-radius: 4px;
    left: 0px;
    right: 0px;
    bottom: -11px;
    transform: rotate(-5deg);
}