/* Customize the tooltip background color */
.introjs-tooltip {
    z-index: 1000 !important;
    background-color: var(--decorative-color) !important;
}

/* Customize the tooltip text color */
.introjs-tooltip .introjs-tooltiptext {
    text-align: left !important;
    color: var(--secondary-color) !important;
    padding-top: 0px !important; /* Replace 5px with your desired padding */
    padding-bottom: 0px !important; /* Replace 5px with your desired padding */
}

/* Customize the bullet points */
.introjs-bullets li a {
    background-color: var(--secondary-color) !important;
    border: 1px solid var(--decorative-color) !important;
}

/* Customize the active bullet point */
.introjs-bullets li a.active {
    background-color: var(--decorative-color) !important;
    border: 1px solid var(--secondary-color) !important;
}

/* Customize the tooltip arrow color */
.introjs-tooltip .introjs-arrow {
    border-color: var(--decorative-color) !important;
}

/* Customize the tooltip buttons color */
.introjs-tooltip .introjs-button {
    color: var(--text-color) !important;
    background-color: var(--secondary-color) !important;
    text-shadow: none !important;
}

a.introjs-skipbutton {
    color: var(--secondary-color) !important;
}

/* Disable text-shadow on the tooltip buttons */
.introjs-tooltip .introjs-button {
    text-shadow: none !important;
    border-color: var(--primary-color);
}

.large-tooltip {
    max-height: 30em !important;
}

.introjs-helperLayer {
    box-shadow: 0 0 0 2px var(--decorative-color) !important; /* Replace #yourColor with your desired color */
}

.same-bg-as-parent {
    background-color: inherit;
}