@import url(https://fonts.googleapis.com/css?family=Open+Sans:100,300,400,700);
@import url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);

body, html, main {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}


body {
  font-family: "Open Sans";
  font-weight: 100;
  display: flex;
  overflow: hidden;
}

.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Asegura que el contenedor ocupa al menos toda la altura de la ventana */
    margin: auto; /* Añadido para centrar horizontalmente */
    width: 100%; /* Añadido para definir el ancho del contenedor */
  }

input ::-webkit-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}
input ::-moz-placeholder {
  color: rgba(255, 255, 255, 0.7);
}
input :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.7);
}
input:focus {
  outline: 0 transparent solid;
}
input:focus ::-webkit-input-placeholder {
  color: rgba(0, 0, 0, 0.7);
}
input:focus ::-moz-placeholder {
  color: rgba(0, 0, 0, 0.7);
}
input:focus :-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.7);
}

.login-form {
  min-height: 10rem;
  max-width: 100%;
  /* padding: 0.5rem; */
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  background-color: rgba(128, 128, 128, 0.5); /* Gris con un poco de transparencia */
  border-radius: 30px; /* Bordes redondeados */
  padding: 20px; /* Espacio interno */
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.8); /* Sombra opcional */
}

.login-text {
  color: white;
  font-size: 1.5rem;
  margin: 0 auto;
  max-width: 50%;
  padding: 0.5rem;
  text-align: center;
  
}
.login-text .fa-stack-1x {
  color: black;
}

.login-username, .login-password {
    background: rgba(255, 255, 255, 0.819);
    border: 0 solid;
    border-bottom: 1px solid rgba(255, 255, 255, 0.5);
    color: rgb(0, 0, 0);
    /* display: block; */
    margin-top: 1rem;
    /* margin-right: 1rem; */
    margin-bottom: 1rem;
    /* margin-left: 1rem; */

    padding: 0.5rem;
    transition: 250ms background ease-in;
    width: 90%; /* Modificado para que las entradas de texto ocupen todo el ancho disponible del formulario */
  }
.login-username:focus, .login-password:focus {
  backdrop-filter: blur(5px);
  background: white;
  color: black;
  transition: 250ms background ease-in;
}

.login-forgot-pass {
    color: white;
    cursor: pointer;
    display: block;
    font-size: 75%;
    opacity: 0.6;
    padding: 0.5rem;
    text-align: center;
    text-decoration: none; /* Remueve el subrayado del enlace */
    margin-top: 0.5rem; /* Añade espacio entre el formulario y el enlace */
    position: relative; /* Cambiado de absolute a relative */
    width: 100%; /* Asegura que el enlace ocupa todo el ancho disponible del contenedor */
}
.login-forgot-pass:hover {
  opacity: 1;
}

.login-submit {
  border: 1px solid white;
  background: rgba(118, 192, 118, 0.327); /* Verde transparente */
  color: white;
  display: block;
  margin: 1rem auto;
  min-width: 100px; /* Ajusta el ancho mínimo según prefieras */
  padding: 0.5rem; /* Aumenta el relleno para hacer el botón más grande */
  transition: 250ms background ease-in;
  border-radius: 10px; /* Bordes redondeados */
  font-size: 1rem; /* Ajusta el tamaño de la fuente si lo necesitas */


}
.login-submit:hover, .login-submit:focus {
  background: rgba(62, 216, 62, 0.638); /* Verde un poco más oscuro al pasar el ratón o al enfocar */
  color: rgb(255, 255, 255);
  transition: 250ms background ease-in;
}

[class*=underlay] {
  left: 0;
  min-height: 100%;
  min-width: 100%;
  position: fixed;
  top: 0;
}

.underlay-photo {
  animation: hue-rotate 6s infinite;
  background: url("../images/fondoenergia.ecbf52f130fd.jpg");
  background-size: cover;
  -webkit-filter: grayscale(30%);
  z-index: -1;
}

.underlay-black {
  background: rgba(0, 0, 0, 0.7);
  z-index: -1;
}

@keyframes hue-rotate {
  from {
    -webkit-filter: grayscale(30%) hue-rotate(0deg);
  }
  to {
    -webkit-filter: grayscale(30%) hue-rotate(360deg);
  }
}

/*# sourceMappingURL=login.css.7ca4d9176dff.map */
.back-button {
    background-color: #add8e6; /* Azul claro */
    color: #000; /* Color del texto negro */
    padding: 10px 20px; /* Relleno */
    border: none; /* Sin borde */
    cursor: pointer; /* Cursor de mano al pasar el ratón */
    text-decoration: none; /* Sin subrayado */
    display: inline-block; /* Para aplicar padding y otros estilos */
    margin-top: 10px; /* Espacio en la parte superior para acercarlo al formulario */
    border-radius: 5px; /* Esquinas redondeadas */
}

.back-button:hover {
    background-color: #94b8d6; /* Un azul un poco más oscuro al pasar el ratón */
}