@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

container{
  width: 100%;
  height: 100vh;
  left:0;
  top:0;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.logo{
 z-index: 10;
 display: flex;
 width: 100px;
height: 90px;
flex-shrink: 0;
 flex-direction: column;
 align-items: flex-start;
 padding: 0px;
 gap: 3px;

 position: absolute;
 left: 20px;
 top: 20px;
}

.left-img:before{
 content: '';
 position:absolute;
 width:60%;
 height: 100%;
 opacity: 0.6;
 background: linear-gradient(360deg, #86AFFF 0%, #D6F5FF 100%);
 z-index:1;
 left: 0;
 top:0;
}

.left-img img{
  position:absolute;
  align-items: center;
  object-fit: cover;
  width:60%;
  left: 0;
  z-index: 4;
  bottom: 0;
}

.login-form{
  font-family: inter;
  display: flex;
  flex-direction: column;
  padding: 0px;
  right:5%;
  margin-top: 5%;
  position: absolute;
  max-width: 800px;
  width: 30%;
  z-index: 20;
  justify-content: center;
  align-items: center;
  background-color:#F2F8F7 20%;
  backdrop-filter:blur(10px);
}

.form-content{
width: 100%;
}
h2{
	width: auto;
  height: 39px;
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-size: 32px;
  line-height: 39px;
  background: linear-gradient(90deg, #185ADC 0%, #2ABBE7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  flex: none;
  order: 0;
  flex-grow: 0;
}

h3{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-size: 20px;
  line-height: 24px;
  margin-top: -24px;
  margin-bottom: 22px;
  
  /* Text1 */
  color: #292B37;
}

.form-group input{
  background: #fafafa;
  width: 100%;
  border: 1px solid #D0D5DD;
	box-shadow: 0px 1px 2px rgba(16, 24, 40, 0.05);
  margin-top: 6px;
  margin-bottom:16px;
  padding: 10px;
	height: 44px;
  box-sizing: border-box;
  font-size: 14px;
	border-radius: 5px;

}

/*  to show  eye option for show password */
.password-box{
	display: inline-block;
    position: relative;
     width: 100%;
}
.pass-icon
{
    position: absolute;
    top: 16px;
    right: 10px;
    width: 24px;
    cursor: pointer;
}

.form-group-rem-for{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  gap: 15px;
}

.form-group-checkbox{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 0px;
  gap: 8px;
}
.form-group-checkbox input{
  width: 16px;
  height: 16px;
}
input[type="checkbox"]:hover{
  box-shadow: 0px 0px 0px 4px#c5f1cc;
  cursor: pointer;
}

input[type="checkbox"]:checked:after{
  background-color: #1BAF59;
}
.form-group-forgot-password a{
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  color: #185ADC;
  text-align: right;
}
.form-group button{
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding: 8px 20px;
  gap: 5px;
  border: 0px;
  height: 40px;
  width:100%;
  margin-top: 30px;
  border-radius: 5px;
  cursor: pointer;
  
  /*text*/
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
}

.btn-login{
  background: linear-gradient(90deg, #185ADC 0%, #2ABBE7 100%);
  box-shadow: 16px 20px 30px 0px rgba(0, 63, 141, 0.1);
  color: #FFFFFF;
}

.google-login{
  background: #FFFFFF;
  box-shadow: 16px 20px 30px 0px rgba(0, 63, 141, 0.1);
  margin-bottom: 30px;
}

.google-login:hover{
  border: 1px solid #407FFC;
}

.form .message {
  margin: 15px 0 0;
  color: #b3b3b3;
  font-size: 12px;
}
.form .message a {
  color: #4CAF50;
  text-decoration: none;
}


body {
  background: var(--bg, #FAFCFF);
  height: 100%;
}


@media only screen and (max-width:768px{
	
})