.main-body {
  background-color: var(--login-body-bg-color);
  background-image: var(--login-body-bg-url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.login-wrapper {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.login-container {
  color: var(--login-container-font-color);
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
  border-color: var(--login-container-border-color);
  border-style: var(--login-container-border-style);
  border-width: var(--login-container-border-width);
  width: 100%;
  max-width: 400px;
  min-width: 300px;
  background-color: var(--login-container-bg-color);
  background-image: var(--login-container-bg-url);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;
}

.login-container .branding {
  width: 100%;
  margin-bottom: 10px;
}

.login-container .branding .logo-img {
  border-radius: 8px;
  aspect-ratio: 1/1 auto;
  min-width: 260px;
}

.login-container form {
  display: flex;
  flex-direction: column;
}

.login-container label {
  margin-bottom: 5px;
}

.login-container input:focus-visible,
.login-container textarea:focus-visible {
  outline: none;
}

.login-container input,
.login-container textarea {
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 4px;
  border: 1px solid #ddd;
  color: #222;
}

.login-container input[type="submit"],
.login-container .login_btn {
  background-color: var(--login-btn-bg-color);
  color: var(--login-btn-font-color);
  border: none;
  padding: 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  margin-top: 15px
}

.login-container a.login_btn {
  display: block;
  text-align: center;
  text-decoration: none;
  width: 100%;
}

.login-container .login-paragraph {
  margin-top: 10px;
  margin-bottom: 10px;
}

.login-container input[type="submit"]:hover,
.login-container .login_btn:hover {
  background-color: var(--login-btn-hover-bg-color);
}

.login-container .footer-text-container {
  margin-top: 10px;
  display: flex;
  justify-content: center;
}

.login-container .footer-text-container .footer-text-link {
  text-decoration: none;
  color: var(--login-container-color);
}

.login-container .footer-text-container .footer-text-link:hover {
  text-decoration: underline;
}

@media (max-width: 400px) {
  .login-container {
    width: 100%;
    padding: 20px;
  }
}


/* Breadcrumbs de login */
.login-container .login-breadcrumb {
  padding: 8px 0px;
  margin-bottom: 20px;
  list-style: none;
  color: var(--login-container-font-color);
  border-bottom: 1px solid #dadada;
  cursor: default;
}

.login-container .login-breadcrumb a {
  color: var(--login-container-font-color);
}