@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

body{margin:0;padding:0;font-family: 'Inter', sans-serif;background:#f2f2f2;}
.leftSection{background: #DA251D;color: #Fff;padding:80px 24px;min-height: 400px;}
.loginForm{padding:24px;}
.loginPage{max-width:1200px;margin:50px auto;box-shadow:0 0 7px #ddd;background:#fff;border-radius:6px;}
.loginPage img{width:180px;background:#fff;padding: 16px;}
.loginPage h2{font-size: 2.75rem;font-weight: 700;}
.form-floating { position: relative;}
.mt-20{margin-top: 20px;}
.mt-40{margin-top: 40px;}
.mb-30{margin-bottom: 30px;}
.inputField{    border: solid #ddd; border-width: 0 0 1px;
    background: none;height: 50px;padding: 0;font-weight: 500;
	box-shadow: none !important; border-color: #ddd !important;width: 100%;
	}
.inputField:focus{outline:None;}
.form-floating>label {
    position: absolute; top: 0;left: 0; width: 100%;
    height: 100%; padding: 1rem .75rem; overflow: hidden;
    text-align: start; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;  border: 1px solid transparent;  transform-origin: 0 0;
    transition: opacity .1s ease-in-out, transform .1s ease-in-out;
}

.form-floating > .inputField-plaintext ~ label, .form-floating > .inputField:focus ~ label, .form-floating > .inputField:not(:placeholder-shown) ~ label, .form-floating > .form-select ~ label{
    opacity: .65;
    transform: scale(.65) translateY(-.8rem) translateX(-.6rem);
}
.form-floating>.inputField-plaintext:focus, .form-floating>.inputField-plaintext:not(:placeholder-shown), .form-floating>.inputField:focus, .form-floating>.inputField:not(:placeholder-shown) {
    padding-top: 1.625rem;
    padding-bottom: .625rem;
}
.otpButton{background:#DA251D;color:#fff;border-radius:16px; padding:5px 16px;}
.otpButton:hover{background:#b51811; color:#fff;}

/*otp section*/
.otpPage{max-width:1200px;margin:50px auto;box-shadow:0 0 7px #ddd;background:#fff;border-radius:6px;}
.otpPage img{width:180px;background:#fff;padding: 16px;}
.otpPage h2{font-size: 2.75rem;font-weight: 700;}
.textRed{color: #DA251D;}
a{text-decoration: underline;cursor: pointer;}
a:hover{text-decoration: none;color:#DA251D;}
.messageSuccess{background: #1765001f; padding: 12px;  border-radius: 4px;}
.messageSuccess i{margin-right: 10px;}

/*otp section*/
.printPage{max-width:1200px;margin:50px auto;padding:24px;box-shadow:0 0 7px #ddd;background:#fff;border-radius:6px;}
.printPage img{width:120px;}
.printPage h2{font-size: 2rem;font-weight: 700;margin: 0 0 2rem 0;}
.printPage label{color:#888; font-weight: 500;}
.printButton{background:#DA251D;color:#fff;border-radius:16px; padding:5px 32px;}
.printButton:hover{background:#b51811; color:#fff;}


/*header Section*/
.headerSection{width:100%;display: flex;background: #fff;border-bottom:1px solid #dcdcdc;justify-content: space-between;padding:15px 5%;}
.headerSection .logo img{width: 150px;}
.headerSection .logOut{color: #DA251D;cursor: pointer;}
.headerSection .logOut:hover{text-decoration: underline;}


@media (max-width:767px) {
    .leftSection{display: none;}
}