@import url('message.css');
.custom-tooltip .mud-tooltip-content {
    background-color: #fff9c4; /* Amarillo claro */
    color: #000; /* Texto negro para contraste */
    font-weight: 500;
}

/* Cambiar el fondo del contenido del cuadro de diálogo a negro */
.mud-dialog-background-black .mud-dialog-content {
    background-color: black !important; /* Asegúrate de usar !important si hay reglas de estilo que prevalecen */
    color: white; /* Cambia el color del texto a blanco para mayor visibilidad */
}

/* Opcional: Cambiar el fondo de la barra superior del cuadro de diálogo a negro */
.mud-dialog-background-black .mud-dialog-title {
    background-color: black !important;
    color: white; /* Cambia el color del título a blanco */
}


.form-content {
    display: grid;
    /*grid-template-columns: 1fr 1fr 1fr;*/ /* Crea tres columnas iguales */
    grid-template-columns: 30% 20% 40%; /* 50%, 30% y 20% del espacio disponible */
    gap: 20px; /* Espacio entre las columnas */
}

.form-group {
    display: flex;
    flex-direction: column;
}

/* Aplica estilos a las imágenes dentro de cualquier contenedor con la clase 'form_col_right' */
.form_col_right img {
    float: right; /* Alinea la imagen a la derecha */
    margin-left: 50px; /* Añade un margen a la izquierda de la imagen */
    border-radius: 50%; /* Haciendo la imagen circular si lo deseas */
}

.form_col_right {
    text-align: right;       /* Alinea todo el contenido dentro del grupo a la izquierda */
}

/*.form_col_right img {
        float: right;*/ /* Alinea la imagen a la derecha */
        /*margin-left: 10px;*/ /* Espacio entre la imagen y el texto, si lo deseas */
    /*}*/


h3 {
    grid-column: span 3; /* Hacer que el título ocupe toda la fila */
}

.visit-schedule, .visit-reason {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Espacio entre los elementos dentro de cada sección */
}

.custom-snackbar {
    max-width: 500px !important;
    max-height: 100px !important;
    padding: 20px;
    font-size: 16px;
}