/*layout overflow to browser window but main y scroll will go under headers also applied mt-4 mb-4 to main*/
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    
    z-index: 1000; /* Ensure it's above other content */
    /*Add other styling for your header*/
}

main {
    padding-top: 120px; /*Adjust this value to match your header's height */
    /*Add other styling for your main content */
}
/*this makes app header narrower*/
#agency-header .navbar {
    padding-top: var(--lh-navbar-padding-y);
    padding-bottom: var(--lh-navbar-padding-y);
    background-color: white;
}
/*put hr style back for some reason was invisible*/
hr {
    height: 1px;
    background-color: black;
}
/*replacement for accessibility*/
.colorRed {
    color: #FF0000;
}

.error-star {
    color: #990000;
    font-size: 16px;
    font-weight: bold;
}
/*required star */
.required:after {
    content: " *";
    font-weight: bold;
    color: #990000;
}
/* Keyframe animation for the dots */
@keyframes loading-dots {
    0% {
        content: '';
    }

    25% {
        content: '.';
    }

    50% {
        content: '..';
    }

    75% {
        content: '...';
    }

    100% {
        content: '';
    }
}

.is-loading::after {
    content: '';
    animation: loading-dots 1.5s steps(1, end) infinite;
}
/*in log in screen floating label was covering text input*/
.form-floating > label::after {
    background-color: transparent !important;
}
.form-floating > .form-control:-webkit-autofill {
    padding-top: 2.25rem; /* Increase top padding */
}
/*makes profile and login/logout ul go vertical when in mobile mode not perfect*/
.verticalList {
    display: flex;
    flex-direction: row; /* Horizontal on desktop */
    list-style: none; /* Removes bullets */
}

@media only screen and (max-width: 800px) {
    .verticalList {
        flex-direction: column; /* Switches to vertical on mobile */
    }
}
#loginPartialLi {
    list-style: none; /* Removes bullets since not wrapped in d-flex*/
    margin-bottom:.125rem;/*hopefully makes logout align with rest of menu*/
}

/*working group and month styling*/
.label-container {
    display: flex;
    justify-content: space-between; /* Pushes items to opposite ends */
    width: 100%; /*am assuming this is needed because label container inside something else*/
    padding: 10px;
}

/* Mobile: Stack on smaller screens */
@media (max-width: 600px) {
    .label-container {
        flex-direction: column; /* Changes from row to column */
        align-items: center; /* Optional: centers stacked labels */
        gap: 10px; /* Adds space between stacked labels */
    }
}