@font-face {
    font-family: "Calibri Regular";
    src: url(../fonts/calibri-regular.ttf);
}
@font-face {
	font-family: "Calibri Italic";
	src: url(../fonts/calibri_italic.ttf);
}
@font-face {
    font-family: "Calibri Bold";
    src: url(../fonts/calibri-bold.ttf);
}
body {
	font-size: 16px;
	font-family: "Calibri Regular";
}
button:focus {
	outline: none;
}
.login-page {
	display: flex;
}
.left-col-area {
	flex: 4;
	background: #113B76;
	padding-bottom: 168px;
}
.right-col-area {
	flex: 6;
	background-image: url(../images/background.png);
	background-repeat: no-repeat;
	background-position: 25% center;
	background-size: cover;
}
.logo-loginform {
	margin: 81px auto 38px auto;
	text-align: center;
}
.logo-loginform {
	width: 150px;
}
.title-page-login {
	font-family: "Calibri Italic";
	font-size: 24px;
	line-height: 44px;
	color: #E7DD4E;
	letter-spacing: 0.44px;
	text-align: center;
}
.des-page-login {
	margin: 2px 28px 20px 28px;
	font-family: "Calibri Bold";
	font-size: 28px;
	line-height: 45px;
	text-align: center;
	color: #fff;
}
.popup-content-introduce {
	text-align: center;
	margin-bottom: 30px;
}
.btn-introduce {
	width: 165px;
	background: #245293;
	color: #fff;
	font-size: 18px;
	line-height: 23px;
	letter-spacing: 0.34px;
	padding: 10px 12px;
	border-radius: 2px;
}
.btn-introduce:focus {
	box-shadow: none;
}
.btn-introduce:hover {
	background: #245293cc;
}
.form-login {
	width: 390px;
	margin: 0 auto;
	background: #fff;
	padding: 42px 30px 30px 30px;
}
.label-login-form {
	font-size: 14px;
	line-height: 17px;
	font-family: "Calibri Bold";
	letter-spacing: 0.3px;
	color: #113B76;
}
.form-login input {
	border: none;
	border-bottom: 1px solid #ced4da;
	border-radius: 0;
	padding-left: 0;
}
.form-login input:focus {
	border-color: #ced4da;
	box-shadow: none;
}
.submit-button {
	padding-top: 11px;
}
.btn-submit-login {
	width: 100%;
	text-align: center;
	color: #fff;
	background: #113B76;
	padding: 12px;
	border-radius: 4px;
}
.btn-submit-login:focus {
	box-shadow: none;
}
.btn-submit-login:hover {
	background: #113b76cc;
}
.footer-area {
	background-color: #072E64;
	padding-top: 12px;
	padding-bottom: 8px;
}
.col-left-footer {
	font-family: "Calibri Bold";
	float: left;
	width: 36%;
	padding-left: 20px;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: 0.34px;
	color: #fff;
}
.col-right-footer {
	font-family: "Calibri Bold";
	float: right;
	width: 64%;
	padding-left: 40px;
	font-size: 16px;
	line-height: 23px;
	letter-spacing: 0.34px;
	color: #fff;
}
.footer-area span {
	font-family: "Calibri Regular";
}
.col-right-footer .tell {
	margin-right: 36px;
}
.col-right-footer .email {
	margin-right: 20px;
}

/* Css for modal */
#introduce-popup .modal-body {
	padding: 0 40px 40px 40px;
}
.title-introduce {
	font-family: "Calibri Bold";
	font-size: 24px;
	line-height: 29px;
	letter-spacing: 0.3px;
	color: #113B76;
	text-transform: uppercase;
	margin-bottom: 34px;
}
.content-introduce {
	font-size: 17px;
	line-height: 21px;
	letter-spacing: 0.36px;
}
#introduce-popup .close {
	color: #113B76;
	font-size: 20px;
	margin-top: 30px;
	margin-right: 30px;
}
#introduce-popup a:hover {
	text-decoration: none;
}
.password-field {
	position: relative;
}
.password-field input {
	padding-right: 30px;
}
.password-field .icon-eye {
	position: absolute;
	top: 7px;
	right: 7px;
	color: rgba(0, 0, 0, 0.4);
	cursor: pointer;
}