@import url('https://fonts.googleapis.com/css?family=Outfit:400,400i,500,500i,700,700i&display=swap');

*{
font-family: Outfit, sans-serif;
box-sizing:border-box;
}

body{
font-size:16px;
line-height:1.8;
background:#f8f9fd;
color:gray;
margin:0;
}

/* ================================
   MAIN SECTION
================================ */

.ftco-section{
display:flex;
align-items:center;
justify-content:center;
min-height:100vh;
padding:20px;
background:whitesmoke;
}

/* ================================
   LOGIN CARD
================================ */

.wrap{
display:flex;
flex-direction:row;
width:100%;
max-width:1100px;
background:#fff;
border-radius:6px;
overflow:hidden;
box-shadow:0 10px 34px -15px rgba(0,0,0,.24);
margin:auto;
}

/* ================================
   LEFT SIDE (ANIMATION)
================================ */

.img{
width:50%;
background:#2c3e50;
display:flex;
align-items:center;
justify-content:center;
padding:40px;
position:relative;
}

.img lottie-player{
width:100%;
max-width:320px;
height:auto;
}

.overlay{
text-align:center;
color:white;
}

.overlay h4{
margin-top:15px;
}

.overlay p{
font-size:14px;
}

/* ================================
   RIGHT SIDE (LOGIN FORM)
================================ */

.login-wrap{
width:50%;
background:white;
padding:40px;
}

.logo-area{
text-align:center;
margin-bottom:20px;
}

.logo-area img{
max-width:180px;
}

.auth-title{
font-weight:600;
text-align:center;
margin-bottom:20px;
}

/* ================================
   FORM
================================ */

.form-group{
margin-bottom:15px;
}

.form-group label{
font-size:12px;
font-weight:700;
text-transform:uppercase;
}

.form-control{
height:48px;
font-size:14px;
border-radius:5px;
border:1px solid rgba(0,0,0,.1);
padding:10px;
}

.form-control:focus{
outline:none;
border-color:#8B5CF6;
}

/* ================================
   BUTTON
================================ */

.login-button{
height:48px;
background:#8B5CF6;
border:none;
color:white;
font-weight:600;
border-radius:6px;
width:100%;
cursor:pointer;
transition:.2s;
}

.login-button:hover{
background:#7c3aed;
}

/* ================================
   FORGOT PASSWORD
================================ */

.forgot-pass{
font-weight:500;
color:#307ef3;
text-decoration:underline;
font-size:14px;
}

.forgot-pass-wrap{
margin-top:10px;
}

/* ================================
   ALERT
================================ */

.alert-danger{
color:#f51111;
background:rgba(243,48,48,.1);
border:none;
}

.alert-success{
background:#f0fbea;
border:none;
}

/* ================================
   TABLET
================================ */

@media(max-width:991px){

.wrap{
flex-direction:column;
max-width:500px;
}

.img{
width:100%;
padding:35px;
}

.login-wrap{
width:100%;
}

}

/* ================================
   MOBILE
================================ */

@media(max-width:768px){

.img{
padding:30px 10px;
}

.img lottie-player{
max-width:240px;
}

.login-wrap{
padding:25px;
}

.logo-area img{
max-width:150px;
}

}

/* ================================
   SMALL MOBILE
================================ */

@media(max-width:480px){

.img{
padding:25px 10px;
}

.img lottie-player{
max-width:200px;
}

.login-wrap{
padding:20px;
}

}