.login_section_head {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
}
@media screen and (min-width: 920px) {
  .login_section_head {
    margin-bottom: 70px;
  }
}

.login_section_container {
  width: 100%;
  height: auto;
  max-width: 416px;
  padding: 0 20px;
  margin: 0 auto;
}
@media screen and (min-width: 920px) {
  .login_section_container {
    padding: 0;
  }
}

.login_section_form {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.login_container {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0 0 20px;
}

.login_container_last {
  margin: 0 0 40px;
}

.login_label {
  font-size: 16px;
  font-weight: 700;
  line-height: 1;
}

input,
select {
  width: 100%;
  height: auto;
  border-radius: 4px;
  border: 1px solid #DFE5E0;
  padding: 7px 16px;
  font-size: 16px;
}
@media screen and (min-width: 920px) {
  input,
  select {
    padding: 7px 16px 7px 20px;
  }
}

input:focus,
select:focus {
  outline:solid 2px #1CC1CF;
  box-shadow: 0 0 8px 0 #00000029;
}

input::placeholder,
select::placeholder {
  color: #B4B4B4;
}

.wrap_pass {
  position: relative;
}

.toggle-password {
  width: fit-content;
  height: auto;
  position: absolute;
  top: 50%;
  right: 16px;
  translate: 0 -50%;
}
@media screen and (min-width: 920px) {
  .toggle-password {
    cursor: pointer;
  }
}

.login_section_links {
  width: 100%;
  height: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
}

/*---------- error-style ----------*/

.login_section_container:has(.error_message) {
  max-width: 429px;
}

.login_section_container:has(.error_message) .login_section_form {
  max-width: 416px;
  margin: 0 auto;
}

/*---------- error-style ----------*/