html
{
    font-size: 14px;
}

@media (min-width: 768px)
{
    html
    {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus
{
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html
{
    position: relative;
    min-height: 100%;
}

body
{
    margin-bottom: 60px;
}

body
{
    width: 100%;
    display: flex;
    flex-direction: column;
}

#top-bar-hcc
{
    width: 100%;
    display: flex;
    order: -1;
}

.wrapper:has(.buttons-container)
{
    background-color: transparent !important;
    padding: 48px 82px !important;
    box-shadow: none;
    border-radius: 0;
}

.wrapper:has(.menu-container)
{
    background-color: transparent !important;
    box-shadow: none;
    border-radius: 0;
}

.main-container:has(.dashboard-container)
{
    max-width: 1600px;
}

/* Fix for mobile navigation overlapping with form buttons */
@media (max-width: 575.98px)
{
    .buttons-container
    {
        position: relative;
        z-index: 10;
    }
}

.autocomplete-items
{
    position: absolute;
    z-index: 999;
    background-color: white;
    padding-left: 5px;
}

.hidden-element
{
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s ease-in-out, visibility 0s linear 0.5s; /* Delay visibility change when hiding */
}

    .hidden-element.visible
    {
        opacity: 1;
        visibility: visible;
        transition: opacity 0.5s ease-in-out, visibility 0s linear 0s; /* No delay when showing */
    }

.expandable-content
{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-out; /* Adjust duration and easing */
}

    .expandable-content.expanded
    {
        max-height: 800px; /* Set a value larger than expected content height */
    }

.hcc-only
{
    color: red !important
}


/* Fix for mobile navigation overlapping with form buttons */
@media (max-width: 575.98px)
{
    .menu-container
    {
        position: relative;
        z-index: 10;
        margin-bottom: 80px;
    }

    /* Move the mobile nav to the bottom of the screen on small devices */
    .mobile-nav
    {
        position: fixed;
        bottom: 0;
        right: 0;
        left: 0;
        margin-top: 0;
        z-index: 100;
        border-radius: 16px 16px 0 0;
        transform: translateY(100%);
    }

        .mobile-nav.active,
        .mobile-nav[active]
        {
            transform: translateY(0);
        }
}

/* Return to normal positioning on larger screens */
@media (min-width: 576px)
{
    .mobile-nav
    {
        position: absolute;
        right: 1rem;
        left: auto;
        bottom: auto;
        top: 100%;
        border-radius: 16px;
        transform: translateY(-10px);
    }

    .wrapper
    {
        padding-left: 20px;
        padding-right: 20px;
    }
}

@media (min-width: 768px)
{
    .wrapper
    {
        padding-left: 82px;
        padding-right: 82px;
    }
}

input::placeholder, textarea::placeholder
{
    color: grey !important;
    font-style: italic;
    font-size: 0.9em;
}