:root {
	--primary: #11338c;
	--black : #191919;
}

.login-page {background:#f6f6f6; color:#525252;}
.login-box {display:flex; flex-direction:column; gap:25px; width:100%; max-width:400px; padding:30px; background:#fff; border-radius:8px; box-shadow:0 0px 12px rgba(0, 0, 0, 0.1);}
.login-logo {margin-bottom:0;}
.login-logo img {display:block; margin:0 auto;}
.login-box .intro {display:flex; flex-direction:column;}
.login-box .title {margin-top:8px; margin-bottom:0; text-align:center; font-size:18px; color:#1B2E6A; font-weight:700;}
.login-box .title b {font-weight:inherit;}
.login-box .headline {color:var(--black); font-size:16px; text-align:center;}
.login-box .card {margin:0; border:none; box-shadow:none; }
.login-card-body form {display:flex; flex-direction:column; gap:30px; color:#525252;}
.login-box-msg {padding:0; line-height:1.4;}
.login-card-body {padding:0;}
.login-card-body .form-control {height:42px; color:var(--black); border-radius:8px;}
.login-card-body .form-control[type='email']::placeholder {color:var(--black);}
.login-card-body .input-group-text i {font-size: 22px; color: #666;}
.login-card-body .btn {display:flex; align-items:center; justify-content:center; gap:6px; height:42px; background:var(--priamry); border:1px solid var(--primary); border-radius:8px;}
.login-card-body .btn-primary {background:var(--primary);}
.login-card-body .btn svg {width:16px; height:16px;}
.login-card-body .btn svg path {fill:#fff;}
.login-page .link_wrap > a {position:relative; flex:1; gap:4px; text-align:center; color:#666; font-size:15px; text-decoration:underline;}
.login-page .link_wrap > a:not(:first-child):before {position:absolute; top:50%; left:0; transform:translateY(-50%); content:""; display:inline-block; width:1px; height:80%; background:#ddd;}

@media (max-width:992px) {
	.login-box {width:94%; margin:0 auto; padding:24px 20px}
}