.hover-hand {
}

    .hover-hand:hover {
        cursor: pointer;
    }

.hide-scroll {
    overflow-y: scroll;
    overflow-x: hidden;
    scrollbar-width: none;
    scrollbar-color: transparent;
}

    .hide-scroll::-webkit-scrollbar {
        display: none; /* Safari and Chrome */
        width: 0px;
        background: transparent; /* make scrollbar transparent */
    }
.thin-scrollbar::-webkit-scrollbar {
    width:4px;
}


 .small-carousel-bullets {
 }

.small-carousel-bullets svg {
    font-size: 12px;
}


/* ============================================
   Background Classes - Theme-Aware
   These classes use CSS variables that automatically 
   adapt to light/dark/high-contrast themes
   ============================================ */
.accent-background {
    background: linear-gradient(135deg, var(--connect-colors-menu-background), var(--connect-colors-accent)) !important;
}

.mb-dark-background,
.menu-background {
    background: linear-gradient(90deg, var(--connect-colors-mb-dark), var(--connect-colors-bg-dark)) !important;
}

.light-background {
    background: var(--connect-colors-bg-light) !important;
}

.dark-background {
    background: var(--connect-colors-bg-dark) !important;
}

.app-background {
    background: var(--connect-colors-app-background) !important;
}

.text-mid-emphasis {
    color: var(--mud-palette-text-secondary);
}

.text-low-emphasis {
    color: var(--mud-palette-info);
}

.text-high-emphasis {
    color: var(--mud-palette-text-primary)
}

.text-error {
    color: var(--connect-colors-alert);
}

text-semi-bold {
    font-weight: 600 !important;
}

.text-bold {
    font-weight: 700 !important;
}

.border {
    border: 1px solid var(--mud-palette-divider);
}

.font-weight-200 {
    font-weight: 200 !important;
}

.font-weight-300 {
    font-weight: 300 !important;
}

.font-weight-400 {
    font-weight: 400 !important;
}

.font-weight-600 {
    font-weight: 600 !important;
}

.font-weight-700 {
    font-weight: 700 !important;
}

.font-weight-800 {
    font-weight: 800 !important;
}

.font-weight-900 {
    font-weight: 900 !important;
}

.md-text {
    white-space: pre-wrap;
    font-family: 'Nunito Sans';
    font-weight: 600;
    font-size: 14px;
    line-height: 19.1px;
}

.md-ytdiv, .md-ytiframe {
    width: 90%;
    height: 200px;
    margin: 0 auto;
    padding-top: 15px;
    margin-bottom: 30px;
}

.md-ytiframe {
    display: block;
    border-style: none;
}

.text-xsmall {
    font-size: 12px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 16.37px;
}

.text-small {
    font-size: 14px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 19.1px;
}

.text-medium {
    font-size: 16px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 21.82px;
}

.text-large {
    font-size: 20px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 27.28px;
}

.text-xlarge {
    font-size: 24px !important;
    font-style: normal;
    font-weight: 400;
    line-height: 32.78px;
}

.text-red {
    color: var(--mud-palette-error);
}

.show-scroll::-webkit-scrollbar {
    width: 5px;
}

.show-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.show-scroll::-webkit-scrollbar-thumb {
    background-color: var(--mud-palette-divider);
    border-radius: 10px;
    border: 3px solid var(--mud-palette-divider);
}
.show-scroll {
    overflow-y: auto;
    overflow-x: hidden;
}
.outline {
    border: 1px solid var(--connect-colors-border);
}
.pathways-text-high-emphasis {
    color: var(--pathways-text-high-emphasis) !important;
}

.pathways-text-mid-emphasis {
    color: var(--pathways-text-mid-emphasis) !important;
}

.pathways-text-low-emphasis {
    color: var(--pathways-text-low-emphasis) !important;
}

.mb-gradient-80 {
    background: linear-gradient(var(--mb-gradient-direction), var(--connect-colors-mb-light-80), var(--connect-colors-mb-dark-80));
}

.mb-gradient-65 {
    background: linear-gradient(var(--mb-gradient-direction), var(--connect-colors-accent-65), var(--connect-colors-mb-dark-65));
}

.mb-gradient {
    background: linear-gradient(var(--mb-gradient-direction), var(--connect-colors-mb-light), var(--connect-colors-mb-dark));
}

    /* Dark mode gradients */
    .mb-gradient.diagonal-dark-light, .mb-gradient-80.diagonal-dark-light, .mb-gradient-65.diagonal-dark-light {
        --mb-gradient-direction: -20deg;
    }

    .mb-gradient.horizontal-light-dark, .mb-gradient-80.horizontal-light-dark, .mb-gradient-65.horizontal-light-dark {
        --mb-gradient-direction: 90deg;
    }

    .mb-gradient.horizontal-dark-light, .mb-gradient-80.horizontal-dark-light, .mb-gradient-65.horizontal-dark-light {
        --mb-gradient-direction: -90deg;
    }

    .mb-gradient.vertical-light-dark, .mb-gradient, .mb-gradient-80, .mb-gradient-80.vertical-light-dark, .mb-gradient-65, .mb-gradient-65.vertical-light-dark {
        --mb-gradient-direction: 180deg;
    }

        .mb-gradient.vertical-dark-light, .mb-gradient-80.vertical-dark-light, .mb-gradient-65.vertical-dark-light {
            --mb-gradient-direction: 360deg;
        }
    
    /* Light mode gradients */
    .mb-gradient.horizontal-light-mb, .mb-gradient-80.horizontal-light-mb, .mb-gradient-65.horizontal-light-mb {
        background: linear-gradient(90deg, var(--connect-colors-bg-light), var(--connect-colors-menu-background));
    }
    
    .mb-gradient.diagonal-light-mb, .mb-gradient-80.diagonal-light-mb, .mb-gradient-65.diagonal-light-mb {
        background: linear-gradient(-20deg, var(--connect-colors-bg-light), var(--connect-colors-menu-background));
    }

.bg-gradient-80 {
    background: linear-gradient(var(--bg-gradient-direction), var(--connect-colors-bg-light-80), var(--connect-colors-bg-dark-80) );
}
        
.bg-gradient {
    background: linear-gradient(var(--mb-gradient-direction), var(--connect-colors-bg-light), var(--connect-colors-bg-dark));
}

.bg-gradient.horizontal-light-dark, .bg-gradient-80.horizontal-light-dark, .mb-gradient-65.horizontal-light-dark {
    --bg-gradient-direction: 90deg;
}
.bg-gradient.horizontal-dark-light, .bg-gradient-80.horizontal-dark-light, .mb-gradient-65.horizontal-dark-light {
    --bg-gradient-direction: -90deg;
}

/* Light mode bg gradients */
.bg-gradient-80.horizontal-light-bg, .bg-gradient.horizontal-light-bg {
    background: linear-gradient(90deg, var(--connect-colors-bg-light), var(--connect-colors-app-background));
}
.border-radius {
    border-radius: var(--rounded-border-radius) !important;
}

    .border-radius.medium, .border-radius {
        --rounded-border-radius: var(--connect-border-radius);
    }

        .border-radius.large {
            --rounded-border-radius: var(--connect-border-radius-large);
        }

        .border-radius.pill {
            --rounded-border-radius: 999px
        }

/* ============================================
   Assessment Animation Styles
   Used by both Core and Drive assessments
   ============================================ */

.question-enter {
    animation: fade-in-forward 0.25s ease forwards;
}

.question-exit {
    animation: fade-out-forward 0.25s ease forwards;
}

.question-enter-reverse {
    animation: fade-in-back 0.25s ease forwards;
}

.question-exit-reverse {
    animation: fade-out-back 0.25s ease forwards;
}

.answer-initial {
    /* No animation on first load */
}

.answer-enter {
    animation: fade-in-forward 0.25s ease forwards;
}

.answer-exit {
    animation: fade-out-forward 0.25s ease forwards;
}

.answer-enter-reverse {
    animation: fade-in-back 0.25s ease forwards;
}

.answer-exit-reverse {
    animation: fade-out-back 0.25s ease forwards;
}

@keyframes fade-in-forward {
    0% {
        opacity: 0;
        transform: translateX(10%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-out-forward {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-10%);
    }
}

@keyframes fade-in-back {
    0% {
        opacity: 0;
        transform: translateX(-10%);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fade-out-back {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(10%);
    }
}