@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap');

    body{
      min-height: 100vh
    }
    .card .card-body{
      background-color: white;
    }
    .card .card-footer {
      padding: 1.5rem;
      background-color: white;
    }
    .card-text{
      margin-bottom: 1.5rem;
    }

    .cuenta{
      padding: 2rem 0rem;
      display: flex;
      justify-content: center;
      gap: 5px;
    }
    .imagen-cuerpo img{
      width: 70%;
    }

    .cuenta a{
      color: #26C4C3 !important;
      font-weight: bold;
    }

    .remember-forgot input{
      border: 1px solid #0F6C71 !important;
      border-radius: 50% !important;
    }

    .remember-forgot label{
      color: #0F6C71 !important;
      font-weight: bold;
      margin: 0;
    }

    .card-cuerpo-header img{
      width: 100%;
      padding-bottom: 2rem;

    }

    .imagen-cuerpo{
      /*background-image: url("./img/fondo-inicio-sesion.svg");*/
      background-size: cover;
      background-position: center;
      min-height: 100vh
    }

    .imagen-cuerpo-text{
      padding-right: 7rem;
    }

    .card-text, .imagen-cuerpo-text{
      color: #0F6C71 !important;
      font-family: 'Baloo 2', cursive;
      font-size: 3rem
    }

    .remember-forgot{
      display:flex;
      justify-content: space-evenly;
      padding-bottom: 2rem;
      width: 100%;
    }

    .card-cuerpo{
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
    }

    .input-email, .input-password{
      font-family: 'Font Awesome 5 Free';
      font-weight: 700;
    }

    .input-email input{
      padding-left:1.5rem;
      /*border-radius: 25px;*/
      border: 1px solid #CCCCCC;
      width: 80%;
    }
   
    .input-email input::placeholder{
      color: #808080;
      opacity: 1;
    }
    .btn-ingresar{
      color: white;
      font-size: 1.5rem;
      border-radius: 25px;
      width: 35% !important;
      /*height: 50% !important;*/
      background-color: #26C4C3 !important;
      font-family: 'Segoe UI', sans-serif;
      font-weight: 700;
      font-size: 20px;
    }

    ::placeholder{
      color: #26C4C3;
    }

    .img-fondo-recuperar{
      background-image: url("../../img/fondoRecuperar.png");
      background-size: cover;
      background-position: center;
      width: 100%;
      height: 100%;
    }

    .img-disenio{
      background-image: url("../../img/disenioIniciarSesion.png");
      background-size: initial;
      background-repeat: no-repeat;
      background-position: bottom;
      width: 100%;
      height: 100%;
    }

    .card-completo{
      background-repeat: no-repeat;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 100vh !important;
    }

    .card-completo img{
      max-width: 20%;
      position: fixed;
      top: 0;
      left: 0;
      margin: 40px;
      min-width: 220px;
    }

    .card-plain{
      width: 85%;
      /*height: 40%;*/
      background-color: white;
      border-radius: 25px;
      box-shadow: 0px 0px 10px 0px #0F6C71;
      margin: 0px;
    }

    .text-bienvenido{
      font-family: Segoe UI, sans-serif;
      font-size: 21px;
      font-weight: 700;
      color: #26C4C3;
    }

    .text-recuperar{
      font-family: Segoe UI, sans-serif;
      font-size: 40px;
      font-weight: 700;
      color: #2B647F;
      text-align: center;
    }

    .text-ingrese{
      color: #808080;
    }
    .card-header{
      text-align: center !important;
    }

    .custom-input {
        font-family: 'Segoe UI', sans-serif;
        font-weight: 400;
    }

    .custom-input::placeholder {
        font-family: 'Segoe UI', sans-serif; 
        font-weight: 400; 
        color: #808080; 
    }
   
    @media (max-width: 280px){
      .text-dark {
          margin-left: 0 !important;
      }

      .input-email{
        margin-left: 0 !important;
      }
    }

    @media (max-width: 393px){
      .text-center {
        width: auto !important;
        height: auto !important;
      }
    }

    @media (max-width: 570px){
      .mb-3 {
          width: auto !important;
          border-right: 0;
      }
    }

    @media (max-width: 1020px){
      .imagen-cuerpo{
        display: none;
      }

      .btn-ingresar{
        padding: 10px;
      }
    }

    @media (max-width: 280px){
      .card-formulario{
        width: 90%;
      }

    .card-formulario {
    padding: 20px;
    }

    .imagen-cuerpo-text, .card-text {
    font-size: 1.6rem;
    }
    }

    @media (max-width: 678px){
      .img-fondo-recuperar{
        background-position: 65%;
      }
      .card-cuerpo{
        height: min-content;
      }
      .card-header{
        padding: 1rem !important;
        padding-bottom: 0 !important;
      }
      .card-body{
        padding: 1rem !important;
        padding-top: 0 !important;
      }
      .input-email{
        margin-bottom: 2rem !important;
      }
    }

    @media (max-width: 380px){
      .cuenta p{
        font-size: 14px;
      }
      .cuenta a{
        font-size: 14px;
      }
    }