* { box-sizing:border-box; }

body {
	font-family: "Open Sans", sans-serif;
	
background-image: url('../../../logos/login_pacientes.jpg');
	background-size: cover;
 -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
  }
.alert.alert-danger {
    background-color: #f2dede;
    border: 1px solid #ebccd1;
    color: #ca2e69;
    padding: 15px;
    border-radius: 4px;
    margin-bottom: 20px;
    font-size: 16px;
    text-align: center;
    width: 100%;
    opacity: 1; /* Asegura que la alerta sea visible */
    transition: opacity 0.5s ease; /* Agrega una transición de opacidad */
}

/* Animación para ocultar la alerta */
@keyframes hideAlert {
    0% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; display: none; }
}

/* Aplica la animación después de 5 segundos */
.alert.alert-danger {
    animation: hideAlert 5s forwards;
}
.wrapper {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    width: 541px;
    height: 635px;
    padding: 50px 40px;
    background: #152638;
    border-radius: 24px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.25);
}

hgroup {
	text-align: center; /* Centrar el contenido */
    margin-top: 10px; /* Ajusta según sea necesario */
    margin-bottom: 40px; /* Ajusta según sea necesario */
    background-color: transparent;
    padding: 10px 10px;
	}
img {
	text-align: center; /* Centrar el contenido */
  
  width: 150px;
  height: 100 px;
   
	}

h1,h2,h3,h4,h5,h6 { font-weight: 380; 
	color:white ; }


form {
    width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 0;
}


.input-field{
    position: relative;
margin-bottom: 25px; 
}

.input-field input {
    width: 100%;
    height: 48px;
    border-radius: 15px;
    font-size: 18px;
    padding: 0px 15px;
    border: 2px solid #01c38e;
    background: #12202d;
    color: #01c38e;
    outline: none;
}

.input-field label {
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    color: #01c38e;
    font-size: 19px;
    pointer-events: none;
    transition: .3s;
    background: transparent;
}

input:focus{
    border: 2px solid #01c38e;
}

input:focus ~ label,
input:valid ~ label{
    top: 0;
    font-size: 16px;
    padding: 0 15px;
    background: rgb(18 32 45);
color:#01c38e;
}

/* Button */

.button {
   width: 163px;
    height: 50px;
    padding: 12px;
    border-radius: 12px;
    border: none;
    background: #01c38e;
    color: #fff;
    font-weight: bold;
    font-size: 1.1rem;
    cursor: pointer;
    margin-top: 12px;
    transition: background 0.2s;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.button img {
  height: 100%; /* Ajusta la altura de la imagen al 100% del botón */
  width: auto; /* Mantiene la proporción de la imagen */
  margin-right: 8px; /* Espacio entre la imagen y el texto */
  background: transparent; /* Asegura que el fondo de la imagen sea transparente */
}

.button:focus { outline: 0; }

.button:hover { background:#01c38e; color:white; }