/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* ajax icon */
    #ajax_loader {
        display: none; /* Hidden by default */
        position: fixed; /* Stay in place */
        z-index: 1; /* Sit on top */
        left: 0;
        top: 0;
        width: 100%; /* Full width */
        height: 100vh; /* Full height */
        overflow: auto; /* Enable scroll if needed */
        background-color: rgb(255,255,255); /* Fallback color */
        background-color: rgba(255,255,255,0.4); /* Black w/ opacity */
    }

    #ajax_loader img {
        position: fixed;
        left: 50%;
        top: 50%;
    }

/* header/footer */
    footer {
        background-color: rgb(33,37,41,1);
        padding: 6px;
    }

    .logo-container {
        height: auto;
        overflow: hidden;
        background-color: rgba(34, 25, 51);
    }

    .logo {
        width: auto;
        height: 100%;
        flex-shrink: 0;
    }

    .nav-item {
        align-content: center;
    }

    li {
        padding: 0 10px; /* Adjust padding as needed */
    }

    .dropdown {
        align-content: center;
    }

    .dropdown-item:hover {
        background-color: lightgray;
    }

    .dropdown-toggle {
        height: 100%;
        align-content: center;
        border-right: none;
    }

/* general */
    /* Set width on the form input elements since they're 100% wide by default */
    input,
    select,
    textarea {
        
    }

    input {
        border-color: darkgray !important;
    }

    #loginPanel {
        max-width: 600px;
    }

.errorMsgColor {
    color: red;
}

.successMsgColor {
    color: darkgreen;
}

.messageColor {
    color: blue;
}

.hidden {
    display: none;
}

/* Search User */

    /* Ensures the jQuery UI autocomplete dropdown has a white background */
    .ui-autocomplete {
        background-color: #fff !important;
    
    }

    /* Grey background for hovered suggestion item */
    .ui-autocomplete .ui-menu-item-wrapper:hover,
    .ui-autocomplete .ui-state-active {
        background-color: #f0f0f0 !important;
        color: #333 !important; /* Optional: makes text readable on grey */
    }

.status-pending {
    color: blue;
}
.status-approved {
    color: green;
}
.status-declined {
    color: red;
}
.field-border-override {
    border-color: darkgray !important;
}


/* Accessibility tags for autocomplete are missing */
.ui-helper-hidden-accessible {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px); /* IE6, IE7 */
    clip: rect(1px 1px 1px 1px);
    padding: 0 !important;
    border: 0 !important;
    height: 1px !important;
    width: 1px !important;
    overflow: hidden !important;
}

/* Environment Logo Overlay */
.overlay-text {
    position: absolute;
    top: 0px;
    left: 250px;
    color: red;
    font-size: 80px;
    font-family: impact;
    background-color: rgba(0, 0, 0, 0);
    padding: 5px;
    border-radius: 0px;
    text-align: left;
    box-sizing: border-box;
}

.preprod-banner {
    width: 100%;
    height: 50px;
    font-size: 20px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    margin-bottom: 20px;
}

.red-white {
    background-color: white;
    color: red;
}

.black-coral {
    background-color: lightcoral;
    color: black;
}

.helper-text {
    font-size: 0.9em;
    color: gray;
    font-style: italic;
}