@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    src: local("Inter Regular"), local("Inter-Regular"), url("fonts/inter-v2-latin-regular.woff2") format("woff2"), url("fonts/inter-v2-latin-regular.woff") format("woff");
    font-display: block;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 500;
    src: local("Inter Medium"), local("Inter-Medium"), url("fonts/inter-v2-latin-500.woff2") format("woff2"), url("fonts/inter-v2-latin-500.woff") format("woff");
    font-display: block;
}

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    src: local("Inter Bold"), local("Inter-Bold"), url("fonts/inter-v2-latin-700.woff2") format("woff2"), url("fonts/inter-v2-latin-700.woff") format("woff");
    font-display: block;
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: "Inter", sans-serif;
}
body{
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #1a191f;
  padding: 100px 00px;
}


.wrapper{
  background: #fff;
  max-width: 450px;
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 0 128px 0 rgba(255,255,255,0.1),
              0 32px 64px -48px rgba(255,255,255,0.5);
}

/* Login & Signup Form CSS Start */
.form{
  padding: 40px 60px;
}
.form header{
  font-size: 23px;
  padding-bottom: 5px;
  color: #555;
}
.form .sub-head{
  font-size: 14px;
  color: #555;
}
.form .sub-head a{
  color: #fc5b3f;
}
.form form{
  margin: 40px 0;
}
.form form .error-text{
  color: #721c24;
  padding: 8px 10px;
  text-align: center;
  border-radius: 5px;
  background: #f8d7da;
  border: 1px solid #f5c6cb;
  margin-bottom: 10px;
  display: none;
}
.form form .name-details{
  display: flex;
}
.form .name-details .field:first-child{
  margin-right: 5px;
}
.form .name-details .field:last-child{
  margin-left: 5px;
}
.form form .field{
  display: flex;
  margin-bottom: 20px;
  flex-direction: column;
  position: relative;
}

.form form .field.password{
  margin-bottom: 10px;
}
.link-text{
  font-size: 13px;
  text-align: right;
  margin-bottom: 10px;
  margin-right: 10px;
}
.link-text a{
  color: #fc5b3f;
}
.form form .field label{
  margin-bottom: 7px;
  font-size: 15px;
  color: #222;
  font-weight: 500;
}
.form form .input input, .input select{
  height: 40px;
  width: 100%;
  font-size: 14px;
  padding: 0 10px;
  border-radius: 5px;
  border: 1px solid #b6b6b6;
  background: #f9f9f9;
  color: #222;
}
.form form .input input:focus , .input select:focus{
  border: 2px solid #fc5b3f;
}
.form form .field input, .input select{
  outline: none;
}
.form form .image input{
  font-size: 17px;
}
.form form .button input{
  height: 45px;
  border: none;
  color: #fff;
  font-size: 15px;
  background: #fc5b3f;
  border-radius: 5px;
  cursor: pointer;
  margin-top: 13px;
}
.form form .field i{
  position: absolute;
  right: 15px;
  top: 70%;
  color: #aaa;
  cursor: pointer;
  transform: translateY(-50%);
}
.form form .field i.active::before{
  color: #aaa;
  content: "\f070";
}
.form .link{
  text-align: center;
  margin: 10px 0;
  font-size: 14px;
}
.form .link a{
  color: #fc5b3f;
}
.form .link a:hover{
  text-decoration: underline;
}