:root {
    /* Colores */

    --bs-component-active-bg: #7EA532;

    --bs-primary: #7EA532;
    --bs-secondary: #FAFAFA;
    --bs-success: #50cd89;
    --bs-info: #748CAB;
    --bs-warning: #EF9207;
    --bs-danger: #B70B3C;
    --bs-dark: #071437;

    --bs-primary-light: #f0f3ea;
    --bs-secondary-light: #FAFAFA;
    --bs-success-light: #f5fffa;
    --bs-info-light: #f1f6fc;
    --bs-warning-light: #fff9f1;
    --bs-danger-light: #fcf4f6;

    --bs-primary-active: #6e8f2c;
    --bs-secondary-active: #7d7d86;
    --bs-light-active: #F1F1F2;
    --bs-success-active: #47be7d;
    --bs-info-active: #4316a5;
    --bs-warning-active: #cfa200;
    --bs-danger-active: #bb1e45;

    --bs-text-primary: #7EA532;
    --bs-text-secondary: #FAFAFA;
    --bs-text-success: #50cd89;
    --bs-text-info: #748CAB;
    --bs-text-warning: #EF9207;
    --bs-text-danger: #B70B3C;
    --bs-text-dark: #071437;

    --bs-component-primary-bg: #7EA532;
    --bs-component-secondary-bg: #FAFAFA;
    --bs-component-success-bg: #50cd89;
    --bs-component-info-bg: #748CAB;
    --bs-component-warning-bg: #EF9207;
    --bs-component-danger-bg: #B70B3C;
    --bs-component-dark-bg: #071437;

    --bs-primary-rgb: 126, 165, 50;

    --bs-light-active: #96969c;
    --bs-light-inverse: #FAFAFA;

    /* Imagenes */
    --bg-login-xs: url('/assets/media/images/xs/bg-login.jpg');
    --bg-login-md: url('/assets/media/images/md/bg-login.jpg');
    --bg-login-lg: url('/assets/media/images/lg/bg-login.jpg');
    --bg-login-xl: url('/assets/media/images/xl/bg-login.jpg');
    --bg-login-xxl: url('/assets/media/images/xxl/bg-login.jpg');
}

.bg-login {
    background-image: var(--bg-login-xs);
    background-size: contain;
    background-repeat: no-repeat;
}
.form-login {
    position: absolute !important;
    bottom: 0 !important;
    height: 70vh;
}

.form-login h1 {
    color: #252525;
    text-align: center;
    font-family: Poppins;
    font-size: 20px;
    font-style: normal;
    font-weight: 700;
    line-height: normal;
    letter-spacing: 4px;
    text-transform: uppercase;
}
.form-login h1::after {
    border-bottom: 3px solid var(--bs-primary);
    content: "";
    height: 42px;
    position: absolute;
    width: 38px;
    left: 50%;
    transform: translateX(-50%);
}

.form-login label {
    color: #252525;
    font-family: Open Sans;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 146%; /* 20.44px */
}

.form-login button {
    color: #FFF;
    text-align: center;
    font-family: Poppins;
    font-size: 16px;
    font-style: normal;
    font-weight: 600;
    line-height: 146%; /* 23.36px */
}

.form-login a {
    color: #252525 !important;
    text-align: center;
    font-family: Open Sans;
    font-size: 14px;
    font-style: italic;
    font-weight: 400;
    line-height: 157.523%; /* 22.053px */
}

.form-login a:hover {
    color: var(--bs-btn-hover-bg) !important;
}

.placeholder {
    display: inline-block;
    min-height: 1em;
    vertical-align: middle;
    cursor: wait;
    background-color: currentcolor;
    opacity: 0.5;
  }
  .placeholder.btn::before {
    display: inline-block;
    content: "";
  }
  
  .placeholder-xs {
    min-height: 0.6em;
  }
  
  .placeholder-sm {
    min-height: 0.8em;
  }
  
  .placeholder-lg {
    min-height: 1.2em;
  }
  
  .placeholder-glow .placeholder {
    animation: placeholder-glow 2s ease-in-out infinite;
  }

  .form-check-input.light-info:checked { background-color: var(--bs-info-light) !important; }
  .form-check-input.info:checked { background-color: var(--bs-info) !important; }
  .form-check-input.light-warning:checked { background-color: var(--bs-warning-light) !important; }
  .form-check-input.warning:checked { background-color: var(--bs-warning) !important; }
  .form-check-input.light-primary:checked { background-color: var(--bs-primary-light) !important; }
  .form-check-input.primary:checked { background-color: var(--bs-primary) !important; }
  .form-check-input.light-success:checked { background-color: var(--bs-success-light) !important; }
  .form-check-input.light-success:checked svg path { fill: var(--bs-success) !important; }
  .form-check-input.success:checked { background-color: var(--bs-success) !important; }
  
  @keyframes placeholder-glow {
    50% {
      opacity: 0.2;
    }
  }
  .placeholder-wave {
    -webkit-mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
            mask-image: linear-gradient(130deg, #000 55%, rgba(0, 0, 0, 0.8) 75%, #000 95%);
    -webkit-mask-size: 200% 100%;
            mask-size: 200% 100%;
    animation: placeholder-wave 2s linear infinite;
  }
  
  @keyframes placeholder-wave {
    100% {
      -webkit-mask-position: -200% 0%;
              mask-position: -200% 0%;
    }
  }

@media screen and (min-width: 769px) {
    .bg-login {
        background-image: var(--bg-login-md);
        background-size: cover;
    }
}
@media screen and (min-width: 993px) {
    .bg-login {
        background-image: var(--bg-login-lg);
    }
    .form-login {
        position: relative !important;
        bottom: auto !important;
        height: auto;
    }
}
@media screen and (min-width: 1281px) { .bg-login { background-image: var(--bg-login-xl) } }
@media screen and (min-width: 1441px) { .bg-login { background-image: var(--bg-login-xxl) } }