:root {
    --ai-primary: #155b8d;
    --ai-primary-text: white;
    --ai-primary-text-dimmed: rgba(255, 255, 255, 0.82);
}

.bg-primary {
    background-color: var(--ai-primary) !important;
    color: var(--ai-primary-text) !important;
}

.on-primary-text {
    color: var(--ai-primary-text) !important;
}

.text-primary {
    color: var(--ai-primary) !important;
}

.icon-quera {
    position: relative;
    background-image: url("/assets/quera.png");
    background-size: cover; /* Adjust as needed */
    background-repeat: no-repeat; /* Prevent image repetition */
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    bottom: -0.3125rem;
}

.scrollable-section {
    margin-top: -2.5rem;
    padding-top: 2.5rem;
}


@media (max-width: 768px) {
    #sidebar {
        width: 75vw;  /* Limit the width to 75% of the viewport */
        height: 100vh;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
    }

    #sidebar.active {
        transform: translateX(0);
    }

    /* Overlay effect when menu is open */
    .overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: 40;
        display: none;
    }

    .overlay.active {
        display: block;
    }
}