.zainmoni-mini-logo{
    display: none;
}
.errors {
    color: red;
}
.field-icon {
    float: right;
    top: -55px;
    right: 50px;
    position: relative;
    color: #2e6da4;
    z-index: 2;
}
.login{
    position: relative;
}
.logo{
    position: absolute;
    width: 138px;
    height: 30px;
    left: 48px;
    top: 55px;
}
.form-control{
    height: 48px !important;
}
.input001{
    position: absolute;
    width: 420px;
    height: 48px;
    left: 665px;
    top: 181px;
}
.input002{
    box-sizing: border-box;
    position: absolute;
    width: 420px;
    height: 48px;
    left: 665px;
    top: 245px;
}
.input003{
    position: absolute;
    width: 420px;
    height: 50px;
    left: 665px;
    top: 386px;
}
.login{
    position: relative;
    width: 1280px;
    height: 100vh;
    background: #FFFFFF;
}
.rectangle{
    position: absolute;
    width: 560px;
    height: 100vh;
    left: 0;

    background: #0C388F;
}
.image{
    position: absolute;
    left: -28.36%;
    right: 52.58%;
    top: 3.91%;
    bottom: -10.92%;
}
.span1{
    position: absolute;
    width: 192px;
    height: 32px;
    left: 650px;
    top: 91px;
    font-family: 'ClashDisplay', serif;
    font-style: normal;
    font-weight: 600;
    font-size: 26px;
    line-height: 32px;
    color: #252631;
}
.span2{
    position: absolute;
    height: 17px;
    left: 650px;
    top: 130px;
    font-family: 'ClashGrotesk-Variable', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #252631;
}
.span3{
    position: absolute;
    width: 187px;
    height: 15px;
    left: 665px;
    top: 380px;

    font-family: 'ClashGrotesk';
    font-style: normal;
    font-weight: 400;
    font-size: 12px;
    line-height: 15px;
    color: #252631;
}
.span4{
    width: 36px;
    height: 22px;

    font-family: 'ClashDisplay', serif;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 22px;
    color: #FFFFFF;
}
.span5{
    position: absolute;
    width: 348px;
    height: 62px;
    left: 48px;
    top: 149px;

    font-family: 'ClashDisplay', serif;
    font-style: normal;
    font-weight: 600;
    font-size: 24px;
    line-height: 31px;
    color: #FFFFFF;

}
.span6{
    position: absolute;
    width: 323px;
    height: 34px;
    left: 48px;
    top: 227px;
    font-family: 'ClashGrotesk-Variable', serif;
    font-style: normal;
    font-weight: 400;
    font-size: 14px;
    line-height: 17px;
    color: #FFFFFF;
}
.field-icon {
    float: right;
    margin-left: -25px;
    margin-top: -25px;
    position: relative;
    z-index: 2;
}
.image {
    position: absolute;
    top: 0;
    left: 0;
    width: 40%;
    height: 100%;
    object-fit: cover;
    /* z-index: -1; */
}
.toggle-password{
    position: absolute;
    margin-top: 130px;
    margin-right: -30px;
}

/* Tablet */
@media screen and (min-width:768px) and (max-width:1024px) {
    .login{
        position: relative;
        width: 100%;
        overflow: hidden;
    }
    .rectangle{
        position: absolute;
        width: 357px;
        left: 0px;        
        background: #0C388F;
    }
    .image{
        position: absolute;
        /* left: -28.36%; */
        right: 52.58%;
        top: 3.91%;
        bottom: -10.92%; 
    }
    .logo-content{
        position: absolute;
        width: 138px;
        height: 30px;
        /* left: 48px; */
        /* top: 55px; */
    }
    .span1{
        position: absolute;
        width: 192px;
        height: 32px;
        left: 0px;
        top: 0px;
        
        font-family: 'Clash Display Variable';
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 32px;
        /* identical to box height */
        
        
        color: #1C2C40;
    }
    .span2{
        position: absolute;
        width: 202px;
        height: 17px;
        left: 0px;
        top: 40px;
        
        font-family: 'ClashGrotesk';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        
        color: #252631;    
    }
    .span3{
        position: absolute;
        width: 187px;
        height: 15px;
        left: -10px;
        top: 250px;

        font-family: 'ClashGrotesk';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: #252631;
    }
    .span5{
        position: absolute;
        width: 257px;
        height: 93px;
        left: 48px;
        top: 149px;
        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 24px;
        line-height: 31px;
        color: #FFFFFF;
    }
    .span6{
        position: absolute;
        width: 239px;
        height: 34px;
        left: 48px;
        top: 261px;
        
        font-family: 'ClashGrotesk';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;
        
        color: #FFFFFF;    
    }
    .login-content{
        position: absolute;
        width: 321px;
        height: 305px;
        left: 396px;
        top: 91px;
    }
    .input001 .form-control{
        box-sizing: border-box;

        width: 321px;
        height: 50px !important;
     
        background: #FFFFFF;
        border: 1px solid #D9D9D9;
        border-radius: 6px;

    }
    .input001{
        position: absolute;
        width: 321px;
        height: 48px;
        left: 0px;
        top: 90px;
       
    }
    .input001 label{
        display: none;
    }
    .input002{
        box-sizing: border-box;

        position: absolute;
        width: 321px;
        height: 50px;
        left: 0px;
        top: 175px;

        background: #FFFFFF;
        border: 1px solid #D9D9D9;
        border-radius: 6px;

    }

    .input002 .form-control{
        height: 50px !important;
    }
    .input002 label{
        display: none;
    }
    .toggle-password{
        position: absolute;
        margin-top: 70px;
        margin-right: -30px;
    }
    .input003{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 14px 22px;
        gap: 8px;
        
        position: absolute;
        width: 321px;
        height: 50px;
        left: 0px;
        top: 250px;
        
        background: #1E87FF;
        border-radius: 8px;    
    }
    .btn-primary{
        background: #1E87FF !important;
        border-color: #1E87FF;
        width: 321px !important;
        height: 50px;
    }
    .btn-primary:focus{
        box-shadow: none !important;
        background: #1E87FF !important;
        border-color: #1E87FF;
    }
    .btn-primary:active{
        background: #1E87FF !important;
        box-shadow: none !important;
        border-color: #1E87FF;

    }
    .btn-primary:hover{
        background: #1E87FF !important;
        box-shadow: none !important;
        border-color: #1E87FF;
    }
    
}

/* Mobile */
@media screen and (max-width:767px) {
    .zainmoni-mini-logo{
        display: block;
        position: absolute;
        width: 170px;
        height: 37px;
        left: 22px;
        top: 69px;
    }
    .login{
        position: absolute;
        width: 100%;
        height: 100vh;
        overflow: hidden;
    }
    .rectangle{
        position: absolute;
        /* width: 100% !important; */
        height: 12px;
        left: 0px;
        background: #0C388F;
        z-index: 1;
    }
    .image {
        display: none;
    }
    .logo{
        position: absolute;
        width: 138px;
        height: 30px;
        left: 0px;
        top: 55px;
    }    
    .login-content{
        position: absolute;
        width: 321px;
        height: 399px;
        left: 19px;
        top: 69px;

    }
    .logo-content{
        display: none;
    }
    .span1{
        position: absolute;
        width: 192px;
        height: 32px;
        left: 19px;
        top: 163px;
        font-family: 'ClashDisplay';
        font-style: normal;
        font-weight: 600;
        font-size: 26px;
        line-height: 32px;
        color: #1C2C40;
    }
    .span2{
        position: absolute;
        width: 202px;
        height: 17px;
        left: 19px;
        top: 202px;
        
        font-family: 'ClashGrotesk';
        font-style: normal;
        font-weight: 400;
        font-size: 14px;
        line-height: 17px;        
        color: #252631;    
    }
    .span6{
        display: none !important;
    }
    .span5{
        display: none !important;
    }
    .login-content{
        position: absolute;
        width: 321px;
        height: 399px;
        left: 19px;
        top: 69px;
    }
    .form-control{
        height: 50px !important;
    }
    .input001{
        position: absolute;
        width: 321px;
        height: 48px;
        left: 19px;
        top: 253px;
    }
    .input001 label{
        display: none;
    }
    .input002{
        position: absolute;
        width: 321px;
        height: 50px !important;
        left: 19px;
        top: 330px;
    }
    .input002 label{
        display: none;
    }
    .input003{
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        padding: 14px 22px;
        gap: 8px;

        position: absolute;
        width: 321px;
        height: 50px;
        left: 19px;
        top: 400px;

        background: #1E87FF;
        border-radius: 8px;
    }
    .span3{
        position: absolute;
        width: 187px;
        height: 15px;
        left: 10px;
        top: 400px;

        font-family: 'ClashGrotesk';
        font-style: normal;
        font-weight: 400;
        font-size: 12px;
        line-height: 15px;
        color: #252631;
    }
    .toggle-password{
        position: absolute;
        margin-top: 70px;
        margin-right: -30px;
    }
    .btn-primary{
        background: #1E87FF !important;
        border-color: #1E87FF;
        width: 321px !important;
        height: 50px;
    }
    .btn-primary:focus{
        box-shadow: none !important;
        background: #1E87FF !important;
        border-color: #1E87FF;
    }
    .btn-primary:active{
        background: #1E87FF !important;
        box-shadow: none !important;
        border-color: #1E87FF;

    }
    .btn-primary:hover{
        background: #1E87FF !important;
        box-shadow: none !important;
        border-color: #1E87FF;
    }
}