/* Stili generici per il tutorial */
.introjs-tooltip {
    background-color: var(--background-color) !important;
    border: solid 0px var(--main-border-color) !important;
    color: var(--text-color) !important;
    font-family: 'Roboto', sans-serif !important;
    border-radius: 12px !important;
}

.introjs-tooltipbuttons {
    border-top: dotted 1px var(--sub-content-color) !important;
}

.introjs-arrow.top {
    border-bottom-color: var(--background-color) !important;
}

.introjs-arrow.bottom {
    border-top-color: var(--background-color) !important;
}

.introjs-arrow.left {
    border-right-color: var(--background-color) !important;
}

.introjs-arrow.right {
    border-left-color: var(--background-color) !important;
}

/* Stili per i campi di testo del tutorial */
.introjs-tooltiptext {
    font-size: 16px !important;
    color: var(--text-color) !important;
    text-align: center !important;
}

.introjs-bullet {
    color: var(--text-color) !important;
    font-size: 16px !important;
    margin-bottom: 10px !important;
}

.introjs-bullets ul li a.active {
    background: var(--sub-content-color) !important;
}

/* Stili per i pulsanti del tutorial */
.introjs-button {
    padding: 10px !important;
    background-color: var(--sub-content-color) !important;
    color: var(--text-color) !important;
    font-weight: bold !important;
    text-shadow: none !important;
    border: solid 1px var(--background-color) !important;
    border-radius: 5px !important;
    cursor: pointer !important;
    margin-top: 10px !important;
}

.introjs-button:hover {
    background-color: rgba(255, 255, 255, 0.6);
    border: 1px solid var(--main-border-color) !important;
    text-decoration: underline !important;
}