@import url('https://fonts.googleapis.com/css2?family=Red+Hat+Display:ital,wght@0,300..900;1,300..900&display=swap');

html,body { width: 100%; height: 100%; margin: 0; padding: 0;}
body {line-height: 1.8;  font-size: 15px;color:#060006;  font-family: "Red Hat Display", sans-serif; -webkit-text-size-adjust: 100%;-webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

.btn {padding-top: 15px;padding-bottom: 15px;padding-left: 48px;padding-right: 48px;border-radius: 0px;letter-spacing: 0.5px;font-size: 12px;font-weight: 700;text-transform: uppercase;background: #0A99A8; color:#fff; text-decoration:none; border-radius:5px}
.btn:hover{background:#088896; } 




/*---------Login css------------*/
.login_form{ background-color:#17c3d5;}
.page-content {display: flex; justify-content: center; padding-top: 100px;}
 
.login_form-content  {max-width: 830px;position: relative;display: flex;display: -webkit-flex;flex-direction: row;gap: 0;}
.login_form-content .form-left {position: relative;color: #fff;width: 50%;margin: 0;}
.login_form-content .form-left img {width: 100%; height: 100%; display: block;object-fit: cover;object-position: center;}
.login_form-content .form-left .text-1 {font-size: 30px;bottom: 1%;position: absolute;text-align: center;width: 100%;text-transform: uppercase;font-weight: 600;}

.login_form-content .form-detail {padding: 30px 80px 30px;position: relative;width: 50%;background: #fff;box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);-o-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);-ms-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);-moz-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);-webkit-box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.15);}
.login_form-content .form-detail .form-row {width: 100%;position: relative;}
.login_form-content .form-detail .form-row label {color: #555;font-weight: 700;font-size: 13px;margin-bottom: 0;}
.login_form-content .form-detail .input-text {margin-bottom: 12px; height: 38px;
    padding: 8px 0;}
    .login_form-content .form-detail .form-select{margin-bottom:10px;}
.login_form-content .form-detail input {width: 100%;padding: 5px 15px 10px 15px; border: 2px solid transparent; border-bottom: 2px solid #e5e5e5;appearance: unset;-moz-appearance: unset;-webkit-appearance: unset;-o-appearance: unset;-ms-appearance: unset;outline: none;-moz-outline: none;-webkit-outline: none;-o-outline: none;-ms-outline: none;font-size: 16px;font-weight: 700;color: #333;box-sizing: border-box; -o-box-sizing: border-box;-ms-box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}
.login_form-content .form-detail .form-row input:focus {border-bottom: 2px solid #0A99A8;}

 .text-center small a {text-decoration: none; font-weight: 700; color: #0e5e66;}

.text-center small a:hover {text-decoration:underline;}
 
 
/* Responsive */
@media screen and (max-width: 991.98px) {
    .page-content{padding-top:0;}
	.login_form-content .form-detail {padding: 30px;}
	
}
@media screen and (max-width: 767.98px) {
    .page-content{}
	.login_form-content{padding: 50px;}
	.login_form-content .form-detail {padding: 24px;}
}

@media screen and (max-width: 639.98px) {
    body.login_form{height:auto!important;}
	.login_form-content{width:100%; flex-direction:column;padding: 20px;}
	.login_form-content .form-left,
	.login_form-content .form-detail {width:100%;}
	.login_form-content .form-left img{width:100%; height:480px;}
	.form-detail figure.logo-l {text-align: center;}
    .form-detail figure.logo-l img {max-width: 120px; width: 100%; margin: 0 auto;}
}

@media screen and (max-width: 575.98px) {
    .login_form-content{}
    .login_form-content .form-detail {padding: 30px 20px;}
	.login_form-content .form-left img {height: 420px;}
   	}