.footer .top-area,.footer .bottom-area,.header .top-header,.header .top-storys,.header .main-nav,.footer .gototopbtn{display:none !important}
body{overflow:hidden}
main{position:absolute;bottom:0;right:0;overflow:hidden;height:100%;background:url('../img/shapes/kashi-t-l.webp') no-repeat top left,url('../img/shapes/kashi-b-r.webp') no-repeat bottom right,url('../img/shapes/pat1.webp')}
.header.has-bandar ~ main{height:calc(100% - 60px)}


.login-register-area{transform:translate(50%,-50%);top:50%;right:50%;width:500px;max-width:100%;max-height:100%;padding:20px}
.login-register-area .entery{padding:15px 25px;border:1px #EAEAEA solid}
.login-register-area .entery .top-info{height:30px;margin:10px 0 20px}
.login-register-area .entery .top-info .logo-side{top:0;right:50%;transform:translateX(50%)}
.login-register-area .entery .top-info .logo-side .logo{height:30px}
.login-register-area .entery .top-info .back-btn{right:-10px;padding:11px}
.login-register-area .bottom-text{line-height:1.8;padding:15px 10px}
.login-register-area .entery .titr{margin-bottom:8px}

.login-register-area .entery .animcon{height: 140px;width: 140px;background-image:url('../img/shapes/monkey_pwd.webp');background-size: 90% 85%;background-repeat: no-repeat;background-position: center;display: flex;align-items: center;flex-direction: column;margin:0 calc(50% - 70px) 20px;border:1px var(--blur) solid}
.login-register-area .entery .animcon img{margin-top:110%;height:140px;width:140px;transition:1s}

.login-register-area .entery #lottie{width:140px;height:140px;margin:5px calc(50% - 70px) 10px}


.login-register-area .entery .renewnumber .icon{width:20px;height:20px}
.login-register-area .entery .renewnumber .icon.right{margin-left:7px}
.login-register-area .entery .renewnumber .icon.left{margin-right:7px}
.login-register-area .entery .renewnumber .renew{opacity:.5}
.login-register-area .entery .renewnumber .renew,.login-register-area .entery .renewnumber .timer{padding:5px 0 15px 0}
.login-register-area .entery .renewnumber .timer:before{position:absolute;top:0;right:0;height:100%;width:100%;z-index:2}
.login-register-area .entery .renewnumber .timer.outed:before{display:none}
.login-register-area .entery .renewnumber .timer.outed ~ .renew{opacity:1}
.login-register-area .entery .inputs .item{margin-bottom:20px}
.login-register-area .entery .inputs .item .label{margin-bottom:8px}
.login-register-area .entery .inputs .item .input{border:1px #E8E8E8 solid;padding:12px 15px 12px 40px;background:none}
.login-register-area .entery .inputs .item .input[readonly]{cursor:no-drop;background:var(--blur)}
.login-register-area .entery .inputs .item .input.ltrspace{letter-spacing:3px}
.login-register-area .entery .inputs .item .icon{width:24px;height:24px;left:10px;top:10px}
.login-register-area .entery .inputs .item .icon.fa-eye.active:before{content:"\f070" !important}
.login-register-area .entery .inputs .item .icon.gr-icon-cm2,.login-register-area .entery .inputs .item .icon.gr-icon-cm3{width:22px;height:22px;background-size:90% !important;background-repeat:no-repeat !important;opacity:.8}
.login-register-area .entery .inputs .item.icon-right .icon{right:10px;left:inherit}
.login-register-area .entery .inputs .item.icon-right .input{padding-right:40px;padding-left:15px}
.login-register-area .entery .inputs .item .fa.icon{top:14px}
.login-register-area .entery .inputs .item .checkmark{width:20px;height:20px;margin-left:10px;background:none;border:1px var(--color) solid}
.login-register-area .entery .inputs .item .checkmark i{transform:scale(0);margin-top:2px}
.login-register-area .entery .inputs .item:hover .checkmark{background:var(--color2)}
.login-register-area .entery .inputs .item input:checked ~ .checkmark{background:var(--color) !important}
.login-register-area .entery .inputs .item input:checked ~ .checkmark i{transform:scale(1)}
.login-register-area .entery .inputs .item .check-list-password .ckl,.login-register-area .entery .inputs .item .password-status{margin-top:10px}
.login-register-area .entery .inputs .item .check-list-password .ckl:before,.login-register-area .entery .inputs .item .password-status:before{content:"";display:inline-block;width:8px;height:8px;margin-left:10px;border-radius:50%}
.login-register-area .entery .inputs .item .check-list-password .ckl.yellow{color:#FFC64B;font-weight:bold}
.login-register-area .entery .inputs .item .check-list-password .ckl.yellow:before{background:#FFC64B}
.login-register-area .entery .inputs .item .check-list-password .ckl.green{color:var(--color)}
.login-register-area .entery .inputs .item .check-list-password .ckl.green:before{background:var(--color)}
.login-register-area .entery .inputs .item .password-status{color:#ff7b7b;display:none}
.login-register-area .entery .inputs .item .password-status.active{display:block}
.login-register-area .entery .inputs .item .password-status:before{background:#ff7b7b}
.login-register-area .entery .inputs .sub{border:0;padding:15px 10px;margin-bottom:15px}
.login-register-area .entery .inputs .sub i{margin:3px 7px 0 0}
.login-register-area .entery .inputs .sub.sub3{padding:10px 20px}
.login-register-area .entery .inputs .sub-google{padding:10px 10px 15px 10px;border:1px var(--blur) solid}
.login-register-area .entery .inputs .sub-google .icon{transform:translateY(6px);width:20px;height:20px;margin-left:10px}
.login-register-area .entery .inputs .recovery-text{line-height:1.85;margin-bottom:15px}
.login-register-area .entery .inputs .recovery-text a{display:inline-block;padding:5px 0}
.login-register-area .entery .inputs .recovery-text .icon{width:20px;height:20px;margin:2px 0 0 7px}
.login-register-area .entery .inputs .code-inputs{width:calc(100% + 20px);transform:translateX(10px);margin-bottom:20px}
.login-register-area .entery .inputs .code-inputs .patinp{background:none;border:1px #E8E8E8 solid;width:calc(20% - 20px);margin:0 10px;padding:20px 0}
.login-register-area .entery .alert-area .f-alert{text-shadow:1px 1px 1px rgba(0, 0, 0, 0.1);background:#ff6363;padding:8px 15px;margin-bottom:10px;border-right:5px rgba(0, 0, 0, 0.1) solid}
.login-register-area .entery .alert-area .f-alert:last-child{margin-bottom:20px}
.login-register-area .entery .alert-area .f-alert.green{background:var(--color)}
.login-register-area .entery .alert-area .f-alert.yellow{background:#F9B420}


.dark-mode .login-register-area .entery{background:#2e2e2e;border-color:transparent}
.dark-mode .login-register-area .bottom-text,.dark-mode .login-register-area .entery .inputs .item,.dark-mode .login-register-area .entery .inputs .item .label,.dark-mode .login-register-area .entery .top-info .back-btn,.dark-mode .login-register-area .entery .inputs .recovery-text,.dark-mode .login-register-area .entery .inputs .recovery-text a,.dark-mode .login-register-area .bottom-text, .dark-mode .login-register-area .entery .inputs .item, .dark-mode .login-register-area .entery .inputs .item .label, .dark-mode .login-register-area .entery .top-info .back-btn, .dark-mode .login-register-area .entery .inputs .recovery-text, .dark-mode .login-register-area .entery .inputs .label.rt-666{color:#ddd}
.dark-mode .login-register-area .entery .titr,.dark-mode .login-register-area .entery .inputs .item .input,.dark-mode .login-register-area .entery .inputs .sub-google,.dark-mode .login-register-area .entery .inputs .code-inputs .patinp,.dark-mode .login-register-area .entery .renewnumber .renew{color:#fff}
.dark-mode .dark-mode .login-register-area .entery .titr, .dark-mode .login-register-area .entery .inputs .item .input,.dark-mode .login-register-area .entery .inputs .code-inputs .patinp{border-color:rgba(255, 255, 255, 0.1)}
.dark-mode .login-register-area .entery .inputs .item .icon,.dark-mode .login-register-area .entery .inputs .recovery-text a .icon,.dark-mode .login-register-area .entery .renewnumber .renew .icon{filter:grayscale(1) brightness(10);opacity:.6}

.login-register-area .entery .inputs .item .input:focus,.login-register-area .entery .inputs .code-inputs .patinp:focus{border-color:var(--color) !important}
.login-register-area .entery .inputs .sub:hover,.login-register-area .entery .inputs .sub-google:hover,.login-register-area .entery .top-info .back-btn:hover,.login-register-area .entery .inputs .recovery-text a:hover{opacity:.8}


@media only screen and (min-width:541px){
.login-register-area{transform:translate(0,-50%);right:0;width:100%;direction:ltr}
.login-register-area .entery{width:460px;margin:0 calc(50% - 230px)}
.login-register-area .bottom-text{width:460px;margin:0 calc(50% - 230px)}
}
@media only screen and (max-width:920px){
.header.has-bandar ~ main{height:calc(100% - 35px)}
}
@media only screen and (min-width:920px){
.login-register-area .entery .top-info .back-btn{top:-6px}
}
@media only screen and (max-width:540px){
.login-register-area .entery .top-info{position:absolute;margin:0;top:-50px;right:0}
.login-register-area .entery{margin-top:60px;padding-top:25px}

.login-register-area .entery .inputs .code-inputs{width:calc(100% + 6px);transform:translateX(3px)}
.login-register-area .entery .inputs .code-inputs .patinp{width:calc(20% - 6px);margin:0 3px;padding:10px 0}

.login-register-area .bottom-text{font-size:12px}
main{background-size: contain;}
}