/*
 * GroBase Intro.js theme for Intro.js v8.3.2
 * Load this file AFTER introjs8-3-2.css.
 */

:root {
    --gb-intro-accent: #046D66;
    --gb-intro-highlight: #4CDE98;
    --gb-intro-tooltip-bg: #ffffff;
    --gb-intro-tooltip-text: #000000;
    --gb-intro-disabled: #cccccc;
    --gb-intro-overlay: rgba(33, 33, 33, 0.5);
}

/* Keep the old GroBase font stack that was added to the v7 CSS. */
.introjs-tour,
.introjs-tooltipReferenceLayer,
.introjs-tooltipReferenceLayer * {
    font-family: 'Montserrat', "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif;
}

.introjs-helperNumberLayer {
    font-family: 'Montserrat', "Helvetica Neue", Inter, ui-sans-serif, "Apple Color Emoji", Helvetica, Arial, sans-serif;
}

/* Keep iOS 18 tooltip visibility fix. */
.introjs-tooltipReferenceLayer {
    visibility: visible !important;
}

/* Keep the GroBase green highlight ring that was previously baked into the v7 JS. */
.introjs-helperLayer {
    box-shadow:
        0 0 1px 2px var(--gb-intro-highlight),
        var(--gb-intro-overlay) 0 0 0 5000px !important;
}

.introjs-tooltip {
    background-color: var(--gb-intro-tooltip-bg);
    color: var(--gb-intro-tooltip-text);
    min-width: 300px;
    max-width: 300px;
    /*box-shadow: 0 3px 30px rgba(255, 255, 255, 0.3);*/
}

.introjs-tooltiptext {
    color: var(--gb-intro-tooltip-text);
}

.introjs-tooltip-title {
    color: var(--gb-intro-accent) !important;
}

.introjs-button,
.introjs-button:hover,
.introjs-button:focus,
.introjs-button:active,
.introjs-disabled,
.introjs-disabled:focus,
.introjs-disabled:hover {
    outline: none;
    background-image: none;
    background-color: transparent;
    color: var(--gb-intro-accent);
    border: 1px solid transparent;
    border-radius: 50px;
    box-shadow: none;
    text-shadow: none;
}

.introjs-button:hover,
.introjs-button:focus,
.introjs-button:active {
    border: 3px solid var(--gb-intro-accent);
}

.introjs-disabled,
.introjs-disabled:focus,
.introjs-disabled:hover {
    color: var(--gb-intro-disabled);
    border: 1px solid transparent;
}

.introjs-skipbutton {
    color: #616161;
    text-decoration: none;
}

.introjs-skipbutton:hover,
.introjs-skipbutton:focus {
    color: #212121;
    text-decoration: none;
}

.introjs-arrow {
    border: 10px solid var(--gb-intro-tooltip-bg);
}

.introjs-arrow.top,
.introjs-arrow.top-middle,
.introjs-arrow.top-right {
    border-color: transparent transparent var(--gb-intro-tooltip-bg);
    top: -20px;
    left: 20px;
}

.introjs-arrow.bottom,
.introjs-arrow.bottom-middle,
.introjs-arrow.bottom-right {
    border-color: var(--gb-intro-tooltip-bg) transparent transparent;
    bottom: -20px;
    left: 20px;
}

.introjs-arrow.left,
.introjs-arrow.right {
    top: 20px;
}

.introjs-arrow.left-bottom,
.introjs-arrow.right-bottom {
    bottom: 20px;
}

.introjs-arrow.left,
.introjs-arrow.left-bottom {
    left: -20px;
    border-color: transparent var(--gb-intro-tooltip-bg) transparent transparent;
}

.introjs-arrow.right,
.introjs-arrow.right-bottom {
    right: -20px;
    border-color: transparent transparent transparent var(--gb-intro-tooltip-bg);
}

@media (max-width: 576px) {
    .introjs-tooltip {
        min-width: min(320px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
        box-sizing: border-box;
    }

    .introjs-tooltiptext {
        overflow-wrap: break-word;
    }
}