.login {
  width: 100%;
  height: 100%;
  padding-bottom: calc(100vh / 10);
  display: flex;
  justify-content: center;
  align-items: center;
}

.login__credentials {
  width: 100%;
  display: flex;
  flex-direction: column;
  height: 180px;
  justify-content: start;
  align-items: center;
  gap: 10px 0;
}

#loginCredentialsError {
  color: var(--danger-color-400);
  height: 40px;
}

.login__section {
  width: 400px;
  height: 490px;
  box-shadow: rgba(50, 50, 105, 0.15) 0px 2px 5px 0px,
    rgba(0, 0, 0, 0.05) 0px 1px 1px 0px;
  background-color: var(--faded-color-50);
  border-radius: 3px;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  padding: 30px 36px;
  gap: 30px 0;
}

.login__image-container {
  width: 80%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 14px 0;
}

.login__form {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 26px 0;
}

.login__form .form__control {
  width: 100%;
}

.login__password_container {
  display: flex;
  flex-direction: column;
  position: relative;
}

.login__password-visibility {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  right: 8px;
  color: var(--primary-color-500);
}

#btnLoginPasswordVisibility {
  font-size: 26px;
}

.login__recaptcha-container {
  display: flex;
  flex-direction: column;
  justify-content: start;
  align-items: center;
  gap: 10px 0;
  height: 100px;
}

#loginUsernameError,
#loginPasswordError {
  height: 16px;
}

@media screen and (max-width: 639px) {
  /* Tiny Screens */

  .login__section {
    width: 340px;
    padding: 30px 18px;
  }
}

@media screen and (min-width: 640px) and (max-width: 767px) {
  /* Small Screens */
}

@media screen and (min-width: 786px) and (max-width: 1023px) {
  /* Medium Screens */
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  /* Large Screens */
}

@media screen and (min-width: 1280px) and (max-width: 1535px) {
  /* Tablet Screens */
}

@media screen and (min-width: 1536px) and (max-width: 1920px) {
  /* Wide Screens  */
}