@import url('https://fonts.googleapis.com/css2?family=Readex+Pro:wght@200;300;400;500;600;700&display=swap');
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css");
:root {
  scroll-behavior: smooth;
}
*{ font-family: 'Readex Pro', sans-serif;}
body {
  background: #fff;
  color: #101010;
}

a {
  color: #4154f1;
  text-decoration: none;
}

a:hover {
  color: #717ff5;
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  /* font-family: "Nunito", sans-serif; */
  /* color: #101010; */
}
/* custom input */
.form__group {
  position: relative;
  padding: 15px 0 0;
  margin-top: 10px;
  width: 50%;
}

.form__field {
  font-family: inherit;
  width: 100%;
  border: 0;
  border-bottom: 2px solid #9b9b9b;
  outline: 0;
  font-size: 1.3rem;
  color: #fff;
  padding: 7px 0;
  background: transparent;
  transition: border-color 0.2s;
}
.form__field::placeholder {
  color: transparent;
}
.form__field:placeholder-shown ~ .form__label {
  font-size: 1.3rem;
  cursor: text;
  top: 20px;
}

.form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #9b9b9b;
}

.form__field:focus {
  padding-bottom: 6px;
  font-weight: 700;
  border-width: 3px;
  border-image: linear-gradient(to right, #11998e, #38ef7d);
  border-image-slice: 1;
}
.form__field:focus ~ .form__label {
  position: absolute;
  top: 0;
  display: block;
  transition: 0.2s;
  font-size: 1rem;
  color: #11998e;
  font-weight: 700;
}

/* reset input */
.form__field:required, .form__field:invalid { box-shadow: none;
}

.input-group-text{border: 0;border-radius: 0;position: absolute;top: 10px;z-index: 99;}
.input-group-text i{font-size: 22px;color: #7B7B7B;}
.form-floating>.form-control, .form-floating>.form-control-plaintext{border: 0;border-bottom: 1px solid #ddd;border-radius: 0;padding-left: 48px;}
.form-control:focus{box-shadow: none;border-color: #4154f1;}
.form-floating>label{padding-left: 50px;color: #7B7B7B;}
.left_panel h2, .left_panel p{color: #4C5272;}
         
.btn-grad {
  background-image: linear-gradient(to right, #8F90FF 0%, #C779D0 51%, #efa3ff 100%);
  margin-top: 20px;
  padding: 12px 35px;
  text-align: center;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  box-shadow:-1px 9px 17px #cbcbcb;
  border-radius: 24px;
  /* display: block; */
  border: 0;
}

.btn-grad:hover {
  background-position: right center; /* change the direction of the change here */
  color: #fff;
  text-decoration: none;
}

section.login{    
    
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding:50px 0;
}
 
 
@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
.img_animate img {
    opacity: 0;
    filter: blur(4px);
}
.login_img {
    animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.login-2 {
    background: url(../images/bg_login.png)no-repeat;
    background-position: center;
    background-size: cover;
}
.captcha {
    width: 135px;
}
@media screen and (max-width:576px){
    .login-2 {
        background-position: right;
    }
    .captcha{width:100%;}
}
@media screen and (max-width:990px) {
    .pills {
        display: none;
    }
}

@media screen and (min-width:991px) and (max-width:1199px) {
    .pill1, .pill2, .pill3, .pill4 {
        width: 160px;
    }
}

@media screen and (max-width:820px) {
    section.login {
        display: block;
        min-height: 0;
    }
    .login_img{width:100%;float:none !important;}
    .left_panel h2{font-size:20px}
    .left_panel p{font-size:14px}
   
}