@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@700&display=swap');
    
    .swal2-container {
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .card-text{
      margin-bottom: 1.5rem;
    }
    .card-completo{
      /*background-image: url("./img/disenioIniciarSesion.png");*/
      background-repeat: no-repeat;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
      height: 100vh !important;
    }

    .cuenta{
      padding-top: 3rem;
      display: flex;
      justify-content: center;
      gap: 5px;
    }

    .cuenta a ,.remember-forgot 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{
      margin-bottom: 2rem;
    } */

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

    }

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

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

    .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: 40%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      background-color: #fff;
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
      border-radius: 10px;
      /*padding: 20px;*/
      height: 50vh;
      max-width: 600px;
      height: min-content;
    }

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

    .input-email input, .input-password input{
      padding-left:1.5rem;
      /*border-radius: 25px;*/
      font-family: 'Segoe UI', sans-serif;
      font-size: 17px;
      font-weight: 400;
      border: 1px solid #CCCCCC; 
      color: #808080;
    }
    .input-email input::placeholder, .input-password input::placeholder {
    color: #808080;
    opacity: 1;
    }

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

    .text-iniciar-sesion{
      font-family: Segoe UI, sans-serif;
      font-size: 47px;
      font-weight: 700;
      color: #2B647F;
    }

    @media (min-width:281px){
      .input-email input, .input-password input{      
      width: 100%;
    }
    }

    .card-formulario{
      width: 80%;
      padding: 20px 0px;
    }

    .btn-ingresar{
      color: white;
      font-size: 1.5rem;
      border-radius: 25px;
      width: 36% !important;
      height: 50% !important;
      background: #26C4C3;
      font-family: Segoe UI, sans-serif;
      font-size: 18px;
      font-weight: 700;
      border: 1px solid #26C4C3;
      padding: 6px 0px;
    }

    ::placeholder{
      color: #26C4C3;
    }

    .navbar{
      display: none;
    }

    
    @media (max-width: 899px){

      .card-completo{
        height: 100%;
      }

      .imagen-cuerpo-text{
        display: none;
      }

      .input-email, .input-password{
        border: 0;
      }
      .card-cuerpo{
        width: 80%;
      }

      .card-cuerpo-header img{
        padding-top:1.5rem;
      }

      .card-text{
        font-size: 1.5rem
      }

      .cuenta{
        font-size: 0.8rem;
      }

      .card-formulario, .card-cuerpo-header{
        display: flex;
        flex-direction: column;
        flex-wrap:wrap;
        justify-content: center !important;
      }

      .input-ingresar{
        width: 100% !important;
      }

      #ingresar01{
        margin: 0 !important;
        font-size: 0.9rem !important; 
      }

      button[type="submit"]{
        height: 50% !important;
        width: 50% !important;
      }

      .remember-forgot a,.remember-forgot label, .remember-forgot input{
        font-size: 0.8rem;
      }

    }

    
    @media (max-width: 1020px){
      
      .card-completo{
        height: 100%;
      }

      .imagen-cuerpo{  
        position: absolute;
        z-index: -1;
      }
      /*.imagen-cuerpo{
        display: flex;
        position:relative;
        width:600px;
        top:-10px;
        right:-50px;

      }*/
      

      .card-cuerpo-header img{
        padding-top:1.5rem;
      }

      .imagen-cuerpo-text{
        display:flex;
        font-size: auto;  
        z-index:2;
        padding: 0;
        margin: 0;
      }
      .imagen-cuerpo-text br{
        display:none;
      }
      .remember-forgot a,.remember-forgot label, .remember-forgot input{
        font-size: 1rem;
      }

      .card-text{
        font-size: 1.8rem
      }

      .input-email, .input-password{
        border: 0;
        width: 100%;
      }
      

      .card-formulario{
        display: flex;
        flex-wrap:wrap;
        justify-content: center ;
        background:white;
        border-radius:50px;
        padding:70px;
        background: rgba(255, 255, 255, 0.173) !important;
        backdrop-filter: blur(4px) !important;
        /*box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);*/
        width: 100%;
      }


      .btn-ingresar{
        width: 100% !important;

      }
    }

    @media (max-width:600px){
      .card-completo{
        height: 100%;
      }

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

      .remember-forgot a, .remember-forgot label, .remember-forgot input, .cuenta{
        font-size: 0.7rem;
      }


    }
    @media (min-width: 900px){
      .card-completo{
        height: 100%;
      }

      .imagen-cuerpo-text, .card-text{
        font-size: 40px;    
      }

      .remember-forgot a, .remember-forgot label, .remember-forgot input, .cuenta{
        font-size: 0.7rem;
      }
    }

    @media (min-width: 1020px){
      .card-completo{
        height: 100%;
      }
    }

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

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

      .card-text{
        margin: 0px;
      }

      .remember-forgot{
        padding: 0px;
      }
      .cuenta{
      padding-top: 0;
    }

    .card-formulario{
      padding: 20px;
      gap: 10px;
    }

    .tm{
      width: 50%;
    }

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

    .flex-contenedor {
    width: 100% !important;
    height: 100% !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}
.btn-ingresar{
        padding: 10px;
      }

      #ingresar01 {   
      width: 100% !important;
    }
    }

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

    .card-formulario {
    padding: 20px;
    }

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

    @media (min-width: 1021px){
      .p_responsive{
        display: none;        
      }

      .imagen-cuerpo-text{
        font-size: 3rem;
      }

      .remember-forgot a, .remember-forgot label, .remember-forgot input, .cuenta {
        font-size: 1rem;
      }
    }

    /* eyes password */
    .password-container {
      position: relative;
    }

    .toggle-password {
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
      cursor: pointer;
    }

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

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

    
    @media (max-width: 678px){
      .img-fondo{
        background-position: 85%;
      }
      .card-cuerpo{
        height: min-content;
      }
      .remember-forgot-contendio a{
        font-size: 14px;
      }
      .cuenta p{
        font-size: 14px;
      }
      .cuenta a{
        font-size: 14px;
      }
      #ingresar01{
        margin-bottom: 1rem !important;
      }
    }
    .google-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.8rem 2rem; /* Reducir el padding para hacerlo más compacto */
      border: 1px solid #d1d1d1;
      border-radius: 16px;
      background-color: white;
      font-weight: 500;
      color: #5f6368;
      cursor: pointer;
      transition: background-color 0.3s ease, box-shadow 0.3s ease;
      box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
      outline: none;
      margin-top: 0.8rem; /* Reducir margen superior */
    }
    
    .google-btn img {
      width: 16px; /* Reducir el tamaño del logo */
      height: 16px;
      margin-right: 8px;
    }
    
    .google-btn:hover {
      background-color: #f8f8f8;
      box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.15);
    }
    
    .google-btn:active {
      background-color: #eaeaea;
    }
    
    @media (max-width: 768px) {
      .google-btn {
        width: 100%; /* Hacer que los botones ocupen todo el ancho en pantallas pequeñas */
        padding: 0.8rem 2rem; /* Ajustar el padding */
      }
    
      .google-btn img {
        width: 14px; /* Reducir aún más el tamaño de la imagen */
        height: 14px;
      }
    
      .google-btn span {
        font-size: 14px; /* Ajustar tamaño de texto */
      }
    
      /* Cambiar la disposición a vertical en pantallas pequeñas */
      .google {
        width: 100%; /* Hacer que cada botón ocupe el 100% del ancho */
        margin-bottom: 1rem; /* Separar los botones */
      }
    
      /* Centrar el contenedor de botones */
      .google-btn-container {
        display: flex;
        flex-direction: column!important; /* Alineación vertical */
        align-items: center;
        width: 100%;
      }
    }