@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css");

@import url("https://fonts.googleapis.com/css?family=Cairo&display=swap");



body{

  background-color: #FFFFFF;

}

#login-container {

  width: 100%;

  max-width: 40em; /* Puedes ajustar este valor según tus necesidades */

  height: 25em;

  background-color: rgba(0,0,0,.4);

  border-radius: 10px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  margin: auto;

}

#login-container1 {

  width: 100%;

  max-width: 40em; /* Puedes ajustar este valor según tus necesidades */

  height: 25em;

  background-color: #41998b;

  border-radius: 10px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  margin: auto;

}



@media (max-width: 576px) {

  /* Estilos para dispositivos móviles */

  #login-container1 {

    width: 100%;

    max-width: 40em; /* Puedes ajustar este valor según tus necesidades */

    height: 25em;

    background-color: #41998b;

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    margin-top: 14em;

  }



}



@media (max-width: 576px) {

  /* Estilos para dispositivos móviles */

  #login-container {

    margin-top: 12.5em; /* Ajusta este valor para centrar según tu preferencia */

    max-width: 25em; /* Puedes ajustar este valor según tus necesidades */

  

  }



}

#login-container h3{

  font-family: 'Cairo', sans-serif;

  font-weight: normal;

  text-align: center;

  color: #ffffff;

  font-size: 2rem;

  margin-top: 25px;

  margin-bottom: 5px;

}

#login-container hr{

  margin-top: 15px;

  margin-bottom: 2.7rem;

  width: 250px;

  border-color: #ffffff;

}

#login-container .input-group{

  padding-left: 30px;

  padding-right: 30px;

}

#login-container .input-group span{

  background-color: #343a40 ;

  color: #ffffff;

  border-color: #343a40 ;

  border-radius: 10px 0px 0px 10px;

}

#login-container .input-group input{

  border: 1px solid #00796b;

  border-radius: 0px 10px 10px 0px;

  font-family: 'Cairo', sans-serif;

}

#login-container .input-group input:focus{

  box-shadow: none;

  border: 1px solid #00796b;

}

#login-container1 h3{

  font-family: 'Cairo', sans-serif;

  font-weight: normal;

  text-align: center;

  color: #ffffff;

  font-size: 2rem;

  margin-top: 25px;

  margin-bottom: 5px;

}

#login-container1 hr{

  margin-top: 15px;

  margin-bottom: 2.7rem;

  width: 250px;

  border-color: #ffffff;

}

#login-container1 .input-group{

  padding-left: 30px;

  padding-right: 30px;

}

#login-container1 .input-group span{

  background-color: #343a40 ;

  color: #ffffff;

  border-color: #343a40 ;

  border-radius: 10px 0px 0px 10px;

}

#login-container1 .input-group input{

  border: 1px solid #00796b;

  border-radius: 0px 10px 10px 0px;

  font-family: 'Cairo', sans-serif;

}

#login-container1 .input-group input:focus{

  box-shadow: none;

  border: 1px solid #00796b;

}



.container-checkbox {

  display: block;

  position: relative;

  padding-left: 55px;

  margin-bottom: 12px;

  cursor: pointer;

  font-size: 22px;

  -webkit-user-select: none;

  -moz-user-select: none;

  -ms-user-select: none;

  user-select: none;

  color: #ffffff;

  font-size: 15px;

}



/* Hide the browser's default checkbox */

.container-checkbox input {

  position: absolute;

  opacity: 0;

  cursor: pointer;

  height: 0;

  width: 0;

}



/* Create a custom checkbox */

.checkmark {

  position: absolute;

  top: 0;

  left: 30px;

  height: 20px;

  width: 20px;

  background-color: #eee;

  border-radius: 5px;

}



/* On mouse-over, add a grey background color */

.container-checkbox:hover input ~ .checkmark {

  background-color: #ccc;

}



/* When the checkbox is checked, add a blue background */

.container-checkbox input:checked ~ .checkmark {

  background-color: #343a40 ;

}



/* Create the checkmark/indicator (hidden when not checked) */

.checkmark:after {

  content: "";

  position: absolute;

  display: none;

}



/* Show the checkmark when checked */

.container-checkbox input:checked ~ .checkmark:after {

  display: block;

}



/* Style the checkmark/indicator */

.container-checkbox .checkmark:after {

  left: 8px;

  top: 4px;

  width: 5px;

  height: 10px;

  border: solid white;

  border-width: 0 3px 3px 0;

  -webkit-transform: rotate(45deg);

  -ms-transform: rotate(45deg);

  transform: rotate(45deg);

}



.btn-customized{

  background-color: #343a40 ;

  margin-top: 30px;

  color: #ffffff;

  border-color: #343a40 ;

  font-family: 'Cairo', sans-serif;

  border-radius: 10px;

}



.btn-customized:hover, .btn-customized:focus, .btn-customized:active{

  color: #ffffff;

  border-color: #343a40 ;

}



.MensajeError{

  color: #ffffff;

}

.imagen_index{

  width: 20em;

  top: 50%;

  left: 50%;

}



.contenedor_login{

  margin-top: 9em;

}

.header {

  position: absolute;

  top: 0;

  width: 100%;

  background: radial-gradient(circle, rgba(65,153,139,1) 30%, rgba(140,199,190,1) 90%);

  color: #ffffff;

  padding: 10px 0;

  text-align: center; /* Centrar horizontalmente */

  display: flex;

  align-items: center; /* Centrar verticalmente */

  justify-content: center; /* Centrar horizontalmente */

}

.titulo{

  margin-top: .8em;

  text-align: center;

}

.footer {

  position: absolute;

  bottom: 0;

  width: 100%;

  background: radial-gradient(circle, rgba(65,153,139,1) 30%, rgba(140,199,190,1) 90%);

  color: #ffffff;

  padding: 10px 0;

  text-align: center; /* Centrar horizontalmente */

  display: flex;

  align-items: center; /* Centrar verticalmente */

  justify-content: center; /* Centrar horizontalmente */

}

.leyenda{

  color: #fff;

  margin-bottom: 1em;

  text-align: center;

}