@import "../../../assets/scss/variables";

.introjs-helperLayer {
    border: none !important;
    border-radius: 1rem !important;
    box-shadow: rgba(33, 33, 33, 0.3) 0px 0px 0px 5000px !important;

}

.onboarding-tooltip,
.sidebar-tooltip{
    background-color: $app-background!important;
    border-radius: 1rem !important;
    color: $title-color;
}

.sidebar-tooltip {
    top: 100px !important;
}


.introjs-tooltip {
    z-index: 99999;
    min-width: 300px;
    max-width: 400px !important;
background-color:$app-background!important;
    .introjs-tooltipbuttons {
        border: none !important;
    }

    .introjs-progressbar {
        background-color:  $rolebox-background!important;
        transition: width 0.5s !important;
        border-radius:  4px !important;
    }

    .introjs-arrow {
        display: none !important;
    }

    .introjs-tooltip-title {
        font-family: $titleFont;
    }

    .introjs-skipbutton {
        color: $title-color !important;

        &:hover {
            color: $secondary-color !important;
        }
    }

    .introjs-tooltiptext {
        font-family: $font-family !important;
        color: $title-color !important;
    }

    .introjs-dontShowAgain {
        display: flex !important;
        align-items: center !important;

        & input {
            margin-bottom: 3px !important;
            border-radius: 5px !important;
        }

        & label {
            font-family: $font-family !important;
            background-color: $app-background !important;
            color: $title-color !important;
            font-size: $index-large !important;
            font-style: $italic !important;
        }
    }

    .introjs-bullets {
        padding-top: 2rem !important;
        ul li a {
            width: 8px !important;
            height: 8px !important;
            background: $inactive-color;
            &:hover {
                background: $secondary-color !important;
                width: 8px !important;
            }
            &.active {
                background: $rolebox-background !important;
                width: 8px !important;
            }
        }
    }

    .introjs-helperNumberLayer {
        color: $title-color !important;
        font-family: $font-family !important;
        font-weight: $bold !important;
    }

    .onboarding-btn {
        font-size: $index-large;
        font-weight: $medium;
        font-family: $font-family !important;
        background-color: $main-color;
        color: #fff;
        letter-spacing: 1px;
        padding: 1.2rem 1.2rem;
        border-radius: 10px;
        transition: 0.5s;
        white-space: nowrap;
        outline: none;
        border: none;

        &:hover {
            background-color: $secondary-color;
            color: #fff;
        }
    }
}