body{
    font-family: "Segoe UI", Arial, sans-serif;
    min-height:100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    background:linear-gradient(180deg,#f5f6f8,#e9ecef);
}
.card-container{
    max-width:380px;
    width:100%;
    margin:auto;
    transform: translateY(-30px);
}
.form-check-input:checked {
	background-color: #0B7454;
    border-color: #0B7454;
}
.password-group{
	position:relative;
}

.toggle-password{
	position:absolute;
	right:12px;
	top:50%;
	transform:translateY(-50%);
	cursor:pointer;
	color:#888;
	z-index:5;
}

.toggle-password:hover{
	color:#0B7454;
}

.password-group input{
	padding-right:40px;
}
/* card */
.card-body{
    background:white;
    padding:35px;
    border-radius:12px;
    box-shadow:0 10px 25px rgba(0,0,0,0.08);
}

/* header */
.card-header{
    text-align:center;
    background:none;
    border:0;
    padding:0 0 20px 0;
}

.card-header.transparent-header{
    padding:10px 0 5px 0;
}

#img-logo{
    max-width:110px;
    width:100%;
    margin-bottom:10px;
}

/* input group */
.input-group{
    display:flex;
    align-items:stretch;
}

.input-group-text,
.form-control{
    height:45px;
}

.input-group-text{
    height:45px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid #ddd;
    border-right:0;
	background: white !important;
}

.form-control{
    height:45px;
    border:1px solid #ddd;
    border-left:0;
}

.form-control:focus{
    border-color:#ddd;
    box-shadow:none;
}

/* checkbox */
.form-check{
    margin-top:5px;
}

.form-check-label{
    font-size:14px;
    color:#666;
}

/* button */
#btn-submit-login{
    background:#0B7454;
    border:none;
    height:46px;
    font-weight:600;
    border-radius:6px;
}

#btn-submit-login:hover{
    background:#095c43;
}

/* alert */
.alert{
    border-radius:6px;
    font-size:14px;
}

/* copyright */
.copyright{
    text-align:center;
    margin-top:15px;
    font-size:13px;
    color:#777;
}

/* mobile */
@media(max-width:600px){

    .card-body{
        padding:25px;
    }

    #img-logo{
        max-width:130px;
    }

}
@media(max-width:780px){
	.card-header.transparent-header {
		padding: 20px;
	}
}