.sibjo_auth {
overflow: hidden;width: 100%;max-width: 1024px;margin: 0 auto;
}
.sibjo_auth header {
padding: 30px 0 15px;
display: flex;
align-items: center;
justify-content: center;
position:relative;z-index: -1;
width: 100%;background: var(--main-color);
}
.sibjo_auth header .logo{
text-align: center;z-index: 6;position: relative;
}
.sibjo_auth header .logo .textlogo{
font-size: 48px;font-weight: bold;color: white;position: relative;left: 0;bottom: 0;letter-spacing: 4px;
}
.sibjo_auth header .logo .ni{
font-size: 12px;font-weight: 500;color: white;margin-top: -12px;
}
.sibjo_auth header .logo.fa .ni{
font-size: 12px;font-weight: 500;color: white;margin-top: 2px;
}
.sibjo_auth header .logo img{
text-align: center;width: 140px;margin: 0 auto;vertical-align: middle;object-fit: cover;
}
.sibjo_auth header .logo.new{
text-align: center;z-index: 6;position: absolute;
right: 20px;
transform: translateY(-50%);
top: 50%;
}
.sibjo_auth header .logo.new .textlogo{
font-size: 58px;font-weight: bold;color: white;position: relative;left: 0;bottom: 0;letter-spacing: 4px;
}
.sibjo_auth header .logo.new .ni{
font-size: 12px;font-weight: 500;color: white;margin-top: -12px;
}
.sibjo_auth header.header_background {
background-repeat: no-repeat;
background-size: cover;
background-position: center bottom;
display: flex;
align-items: center;
justify-content: center;
height: 250px;min-height:250px;padding-bottom: 35px;
overflow: hidden;
}
.sibjo_auth header.header_background.hNew{
height: 400px;min-height:400px;
}
.sibjo_auth header.header_background .sibjo_auth_img_header{
width: 100%;height:100%;min-height: 100%;position: absolute;
left: 0;z-index: 5;top: 0;
}
.sibjo_auth header.header_background .sibjo_auth_img_header::after {
content: "";
background: #000;
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
top: 0;
background: linear-gradient(-180deg, rgba(0, 122, 255, 0) 0%, #000 96.67%);object-fit: cover;
}
.sibjo_auth header.header_background .sibjo_auth_img_header img{
width: 100%;height: 100%;min-height: 100%;object-fit: cover;
}
.sibjo_auth__motion{
width: 100%;overflow: hidden;
}
.sibjo_auth__motion::after {
content: "";
background: #000;
position: absolute;
bottom: 0;
right: 0;
left: 0;
z-index: 5;
top: 0;
background: linear-gradient(-180deg, rgba(0, 122, 255, 0) 0%, var(--main-color) 81.67%);
}
.login_sibjo_auth .sibjo_auth__inner {
z-index: 5;
position: relative;
}
.sibjo_auth__motion {
position: absolute;
z-index: 0;
right: 0;
left: 0;
display: flex;
justify-content: center;
}
.sibjo_auth__motion__inner {
display: flex;
gap: 30px;
transform: rotate(-15deg);
-webkit-transform: rotate(-15deg);
}
.sibjo_auth__motion__icons__line {
display: flex;
flex-direction: column;
animation: marquee 10s linear infinite;
}
.sibjo_auth__motion__icons__line:nth-child(odd) {
animation: marquee 7s linear infinite;
}
@keyframes marquee {
0% {
transform: translateY(-25%);
}
100% {
transform: translateY(25%);
}
}
.iconmask.sibjo_auth__tinyicons.box2d {
min-width: 70px;
width: 70px;
height: 70px;
margin: 15px auto;overflow: hidden;border-radius: 15px;background: #fff;
}
.iconmask.sibjo_auth__tinyicons img{
min-width: 70px;
width: 70px;
height: 70px;
}
.sibjo_auth_inner{
padding: 30px 20px 100px 20px;
border-radius: 25px 25px 0 0;
background: #fff;
color: #000;
overflow: auto;
width: 100%;
margin-top: -25px;
position: relative;left: 0;top: 0;
}
.sibjo_auth_inner .lodingloginfill{
position: fixed;left: 0;top: 0;background: rgba(0,0,0,0.5);width: 100%;content: "";z-index: 11;height: 100%;
}
.sibjo_auth_inner .lodingloginfill:after{
position: fixed;left: 50%;top: 50%;background: white;width: 100px;height: 100px;content: "";z-index:1;transform: translate(-50%,-50%);border-radius: 22px;
}
.sibjo_auth_inner .lodingloginfill .loading-container.loadingcenter{
min-height: 40px;z-index: 2;
}
.sibjo_auth_inner .sibjo-auth-form{
max-width: 500px;margin: 0 auto;
}
.sibjo_auth_inner .form_title{
padding-bottom: 10px;
}
.sibjo_auth_inner .form_title h3{
padding-bottom: 10px;display: flex;align-items: center;
}
.sibjo_auth_inner .form_title h3 .sibjo_auth_Back{
width: 25px;height: 25px;margin-left: 10px;transition: 0.3s ease;
}
.sibjo_auth_inner .form_title h3 .sibjo_auth_Back svg{
width: 100%;height: 100%;transition: 0.3s ease;
}
.sibjo_auth_inner .form_title h3 .sibjo_auth_Back:active svg{
transform:scale(0.9);
}
.sibjo_auth_inner .form_title span{
line-height: 1.8;
}
.sibjo_auth_inner .input-group-login-2{
display: flex;flex-wrap: wrap;width: 100%;margin-top: 1.8rem;
}
.sibjo_auth_inner .input-group-login-2 .input-group-login{
width: calc(50% - 5px);margin: 0 2.5px;
}
.sibjo_auth_inner .input-group-login {
margin-top: 1.5rem;
position: relative;left: 0;top: 0;width: 100%;height:50px;border: 1.5px solid #c3c3c3;border-radius:10px;transition: 0.3s ease;display: flex;align-items: center;
}
.sibjo_auth_inner .input-group-login.ltr input{
direction: ltr;
}
.sibjo_auth_inner .input-group-login .toggle-password{
width: 28px;height: 28px;margin-left: 10px;
}
.sibjo_auth_inner .input-group-login .toggle-password svg{
width: 100%;height: 100%;color: #999;transition: 0.3s ease;
}
.sibjo_auth_inner .input-group-login .toggle-password:active svg{
transform: scale(0.9);
}
.sibjo_auth_inner .input-group-top-login{
margin: 10px 0;
}
.sibjo_auth_inner .input-group-top-login label{
font-size: 13px;font-weight: 500;color: #777;
}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form{
display: flex;align-content: center;justify-content: center;direction: ltr;margin-top: 20px;
}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input{
padding: 0;margin-bottom: 0;width: 55px;height: 55px;margin: 0 4px;border: 1.5px solid #c3c3c3;border-radius:10px;transition: 0.3s ease;text-align: center;font-size: 22px;font-weight: 500;color: #555;background: #eee;
}
.sibjo_auth_inner .input-group-top-login .input-group-top-login-footer{
display: flex;align-items: center;justify-content: space-between;padding-top: 10px;
}
.sibjo_auth_inner .input-group-top-login .input-group-top-login-footer .eidtemail{
font-size: 12px;font-weight: 500;color: var(--main-color);
}
.sibjo_auth_inner .input-group-top-login .input-group-top-login-footer #timerotp{
font-size: 12px;font-weight: 500;color: #0db700;
}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form.otp-success input{
animation: colorsuccess calc(0.4s + var(--i) * 0.1s) forwards;
}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form.otp-error input{
animation: colorerror calc(0.4s + var(--i) * 0.1s) forwards;
}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:nth-child(1){--i:1}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:nth-child(2){--i:2}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:nth-child(3){--i:3}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:nth-child(4){--i:4}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:nth-child(5){--i:5}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:nth-child(6){--i:6}
@keyframes colorsuccess{
0%,50%{border-color:#c3c3c3}
100%{border-color:#34c759;color:#34c759;transform:scale(1.02);}
}
@keyframes colorerror{
0%,50%{border-color:#c3c3c3;}
100%{border-color:#ff3b30;color:#ff3b30;transform: scale(1.02);}
}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:focus,
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input:valid{
border: 1.5px solid var(--main-color);color: var(--main-color);
}
.sibjo_auth_inner .input-group-login input{
width: 100%;height: 100%;margin-bottom: 0;margin-top: 0;border: 0;border-radius:10px;transition: 0.3s ease;font-size: 12px;font-weight: 500;color: #555;
}
.sibjo_auth_inner .input-group-login label{
position: absolute;
right:15px;
top: 50%;
transform: translateY(-50%);
color: #999;
pointer-events: none;
transition: 0.3s ease;
background: #fff;
padding: 0 5px;font-size: 13px;font-weight: 500;
margin: 0;
}
.sibjo_auth_inner .input-group-login input:focus + label,
.sibjo_auth_inner .input-group-login input:valid + label {
top: -1.2px;
font-size: 10px;
}
.sibjo_auth_inner .input-group-login:hover{
border-color: var(--main-color);
box-shadow: 0 0 0 4px rgba(0,113,227,0.12);
}
.sibjo_auth_inner .sibjo-login-btn{
width: 100%;padding: 15px 0px;position: relative;left: 0;bottom: 0;background: white;border-top: 1.1px solid #ddd;margin-top: 10px;
}
.sibjo_auth_inner .sibjo-login-btn .sibjo-loginbtn{
background: var(--main-color);height: 50px;border-radius: 15px;text-align: center;font-size: 14px;font-weight: bold;color: white;overflow: hidden;border-radius: 10px;
}
.sibjo_auth_inner .sibjo-login-btn .sibjo-loginbtn button{
width: 100%;height: 100%;color: white;
}
.sibjo_auth_inner .optnes{
text-align: left;float: left;padding-top: 15px;color: #555;transition: 0.4s all;
}
.sibjo_auth_inner .optnes:hover{
color: var(--main-color);
}
.sibjo_auth .hidden {
display: none;
}
.sibjo_auth .fade-in {
opacity: 0;
animation: anslogins 1s forwards;
}
@keyframes anslogins {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.button-registrLogin{
text-align: center;margin-top: 15px;padding: 1rem;border-radius: 10px;border: 1.2px solid #eee;background: #ddd;
}
.modal-home-login{
background: white;
width: 100%;height: 100%;z-index: 100;
}
.modal-home-login .mhl-content{
display: flex;align-items: center;justify-content: center;
width: 100%;max-width: 550px;height: 100%;margin: auto;left: 50%;transform: translateX(-50%);
}
.modal-home-login .mhl-content .mhl_auth_Back{
width: 35px;height: 35px;position: absolute;right: 25px;top: 25px;border-radius: 50px;transition: 0.3s all;
}
.modal-home-login .mhl-content .mhl_auth_Back svg{
position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);
width: 28px;height: 28px;color: #555;
}
.modal-home-login .mhl-content .mhl_auth_Back:hover{
background: #eee;
}
.modal-home-login .mhl-content .mhl-footer{
text-align: center;padding-bottom: 1rem;
width: 100%;
}
.modal-home-login .mhl-content .mhl-footer .mhl-fr-text{
line-height: 1.8;padding: 0 2rem;margin-bottom: 20px;
}
.modal-home-login .mhl-content .mhl-footer .mhl-fr-text a{
font-weight: 500;border-bottom: 1px solid var(--main-color);padding-bottom: 2px;transition: 0.3s all;
}
.modal-home-login .mhl-content .mhl-footer .mhl-fr-text a:hover{
color: var(--main-color);opacity: 0.7;
}
.modal-home-login .mhl-content .mhl-footer .mhl-fr-buttom{
text-align: center;
padding: 0 2rem;position: relative;
}
.modal-home-login .mhl-content .mhl-footer .mhl-fr-buttom:after{
position: absolute;left: 0;top: 0;width: 100%;height: 0.5px;content: "";background: #ddd;margin-top: -12px;
}
.modal-home-login .mhl-content .mhl-footer .mhl-fr-buttom .mhl-fr-buttoms{
width: 100%;background: var(--main-color);color: white;border-radius: 15px;padding: 1.2rem 0;
}
.modal-home-login .mhl-content .mhl-logo{
width: 120px;height: 120px;border-radius: 22px;
}
@media(max-width:768px){
.sibjo_auth header.header_background.hNew{
height: 350px;min-height:350px;
}
}
@media(max-width:475px){
.sibjo_auth header.header_background {
height: 230px;min-height:230px;padding-bottom: 45px;
}
.sibjo_auth header.header_background.hNew{
height:250px;min-height:250px;
}
.sibjo_auth header .logo.new .textlogo{
font-size: 48px;font-weight: 800;color: white;position: relative;left: 0;bottom: 0;letter-spacing: 4px;
}
.sibjo_auth_inner .sibjo-login-btn{
padding: 15px 25px;position: fixed;margin-top: 0;
}
}
@media(max-width:375px){
.sibjo_auth header.header_background {
height: 230px;min-height:230px;padding-bottom: 35px;
}
.sibjo_auth header .logo.new{
text-align: center;z-index: 6;position: absolute;
right: 10px;
top: 30px;transform: translateY(0%);
}
.sibjo_auth header.header_background.hNew{
height:230px;min-height:230px;
}
.sibjo_auth header .logo.new .textlogo{
font-size: 38px;
}
.sibjo_auth header .logo.new .ni{
font-size: 10px;
}
}
@media(max-width:320px){
.sibjo_auth header.header_background {
height: 200px;min-height:200px;padding-bottom: 45px;
}
.sibjo_auth header.header_background.hNew{
height:200px;min-height:200px;
}
.sibjo_auth_inner .input-group-login-2.newpsd{
margin-top: 10px;
}
.sibjo_auth_inner .input-group-login-2.newpsd .input-group-login{
width: 100%;margin: 7px 0;
}
.sibjo_auth_inner .input-group-top-login .input-otp-verification-form input{
padding: 0;margin-bottom: 0;width: 48px;height: 48px;font-size: 18px;
}
}