.login-content {
  width:100%;
}

.login-page {
  margin-top: -72px;
}

.border-l-light {
  border-left: 1px solid var(--light-gray);
}

.left-side-bar {
  display:none;
}

.banner-header {
  width:100%;
  background-color:blue;
  height:275px;
  /* background-image: url(../../assets/imgs/background-easy.png); */
}

.header-bg-md-login {
  min-height: 360px;
  background: #b3b3b3;
  /* box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.1); */
  background-image: url(../../assets/imgs/background-easy.png);
  background-size: 100% !important;
  margin-top: 0px;
  height: 450px;
}

.mt-0 {
  color:#78009b;
}

.fa-li i{
  color:#78009b !important;
}

h3{
  color:#78009b !important;
}

/* .container-carousel {
  display:none
} */

.btn-form {
  background-color:#380049 !important;
  color:#00cdbc;
}


/* Grid login */
.grid-login {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: 1fr;
  grid-row-gap: 25px;
  }
    .s-col {
      grid-template-columns: 1fr; max-width: 320px; margin:0 auto;
    }
    .s-col2 {
      display: grid;
      grid-template-columns: 40px 40px 40px 40px; max-width: 200px; margin: 0 auto;
      column-gap: 10px;
    }
    .s-col3 {
      max-width: 200px; margin: 0 auto;
    }
    .op-box, .op-box2 {
      display: inline-block;
      justify-content: center;
      text-align: center; 
      padding: 1rem;
      border-radius: 5px;
    }
    
   .op-box h3, .op-box2 h3  {
     font-size: 18px;
     font-weight: 700;
     margin-bottom: 10px;
   }
    .op-box:hover {
      cursor: pointer;
      background-color: #fafafa;
    }
    .info-icons i {
      font-size: 62px;
      margin-bottom: 15px;
      color: var(--orange-color);
    }

    
  .form-login {
    position: relative;
    z-index: 1;
    font-size: 12px;
    margin: 0 auto 100px;
    max-width: 620px;
  }
  .form-login h2 {
    margin:0 auto 20px; 
    font-size: 24px; 
    color: #000;
  }
  .form-login h3 {
    font-weight: bold;
    color: #000;
    margin-bottom: 0px;
  }
  .form-login p {
    margin-top: 0;
  }
  .form-login input.w-100 {width: 100%;}

 .btn-form > i{
    font-size: 16px;
    margin-right: 5px;
 }

.social-login {
    display: flex;
    text-align: center;
    margin-bottom: 3px;
}

.social-login a{
  width: 80px;
  height: 30px;
  justify-content: center;
  align-items: center;
  text-decoration: none;
  color: #fff;
  border-radius: 5px;
  position: relative;
  overflow: hidden;
  transition: all .35s;
  padding-top: 6px;
}

.social-login a.google{
	background-color: #ea4335;
}

.social-login a.google span{
	color: #ea4335;
}

.social-login a.fb{
	background-color: #3b5998;
}

.social-login a.fb span{
	color: #3b5998;
}
.social-login a:nth-child(2){
	margin: 0 10px;
}

.social-login a span{
	font-size: 12px;
	position: absolute;
  background: #fff;
  padding-top: 5px;
	top: 0;
	left: 0;
	width: 150px;
	height: 100%;
	border-radius: none;
	justify-content: center;
	align-items: center;
	transform: translateX(100%);
	transition: all .35s;
}

.social-login a:hover{
	width: 150px;
}

.social-login a:hover span{
	transform: translateX(0);
}
  .form-login .inline {display: inline;}
  .form-login .message {

    color: #b3b3b3;
    font-size: 12px;
    float: right;
  }
  .form-login .message a {
    color: var(--primary-color);
    text-decoration: none;
  }
  .form-login li {
   margin: 0;
  }
  .form-login li .fa-li{
    left: -2.5em;
  }
  .form-login li .fa-check {
    color: #000;
    font-size: 24px;
    margin: 15px auto;
}

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

.pt-0 {padding-top: 0 !important;}
  

@media screen and (max-width:1366px) {
  .login-content {
    margin-top:274px;
  }

  .recovery-container {
    margin-top: 262px;
  }

  .header-bg-md-login {
    min-height: 360px;
    background: transparent;
    /* box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.1); */
    background-image: url(../../assets/imgs/background-easy.png);
    background-size: 100% !important;
    background-repeat:no-repeat;
    margin-top: -275px;
    height: 450px;
    width:109.8%;
  }

  .login-page {
    margin-top: -168px;
    margin-left:353px;
  }
}

@media (max-width: 600px){
    .login-page{
        margin-top: -80px;
    }

    .container-grid-1 {
      margin-top:0px !important;
    }

    .header-bg-md-login {
      min-height: 360px;
      background: #b3b3b3;
      /* box-shadow: 0px 20px 60px rgba(0, 0, 0, 0.1); */
      background-image: url(../../assets/imgs/background-easylife-mobile2.png);
      /* background-size: 102% !important; */
      background-size: 107.5% !important;
      margin-top: 0px;
      height: 450px;
      background-position: center bottom;
      background-size: cover;
      background-repeat: no-repeat;
      background-color: white;
    }

    .login-content {
      margin-top: 0px !important;
    }
    .grid-login{
      grid-template-columns: 1fr;
  }
  .s-col {
    max-width: 600px;
    margin: 0;
  }
  .form-login {
      /* margin: 20px !important; */
  }
}

@media screen and (max-width:480px) {
  .header-bg-md-login {
    background-size: 100% !important;
    width: 563px;
    margin-top: -78px;
  }

  .whats-container {
    display:none;
  }

  .login-page {
    margin-top: -122px;
    width: 513px;
    margin-left: 23px;
}
}

@media screen and (max-width:420px) {
  .header-bg-md-login {
    background-size: 100% !important;
    width: 563px;
  }

  .whats-container {
    display:none;
  }

  .login-page {
    margin-top: -140px;
    width: 513px;
    margin-left: 53px;
  }
}