/* Tooltip personalizado */
.customTooltip {
    background-color: #f0f0f0; /* Color de fondo */
    color: #333; /* Color del texto */
    padding: 0px; /* Padding interno */
    border-radius: 10px; /* Bordes redondeados */
    box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Sombra */
    text-align: center; /* Alinear al centro */
}

/* Elemento resaltado personalizado */
.customHighlight {
    border: 1px solid #4CAF50; /* Borde verde */
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.7); /* Sombra verde */
}

/* Botón personalizado */
.introjs-button {
    padding: 10px 20px; /* Padding interno del botón */
    margin: 5px; /* Margen alrededor del botón */
    border-radius: 5px; /* Bordes redondeados del botón */
    cursor: pointer; /* Cursor de puntero */
}


.introjs-button:hover {
    background-color: #b7c3cb; /* Color de fondo del botón al pasar el cursor #45a049 */
}

/* Otros estilos personalizados */
.introjs-tooltiptext {
    margin: 0px 0px; /* Margen del texto del tooltip */
    padding: 1px 18px 9px 15px;

}

.introjs-tooltip-header {
    margin: 0px 0; /* Margen del texto del tooltip */
    padding: 0px 18px 4px 18px;

}

.introjs-tooltipbuttons {
    text-align: center; /* Alinear los botones al centro */
    padding: 7px 13px;
}