/* -------------------------- Tags ----------------------------------------- */
label {
    color: var(--secondary-color);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--secondary-color);
}

p {
    margin-bottom: 0px;
}

.nav-link {
    font-weight: 500; /* Medium font weight for readability */
}

body {
    background-color: var(--application-background-color); /* This is a light gray color. Replace with your desired color code. */
}

/* To make the application full screen, add the following to the style.css file: */
/* html, body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
} */

/* -------------------------- Row/Col -------------------------------------- */
.row {
    margin-top: 0px;
    margin-bottom: 5px;
    margin-left: 0px;
    margin-right: 0px;
}

.col {
    padding-left: 0px;
    padding-right: 0px;
}

/* Add padding between columns in a row.
Padding is applied to the right to all but first, and to the left to all but the last column. */
.row > [class*='col-'] {
    padding-right: 5px; /* Right padding for spacing */
}

.row > [class*='col-']:last-child {
    padding-right: 0; /* Remove right padding for the last column */
}

.row > [class*='col-']:not(:first-child) {
    padding-left: 5px; /* Left padding for all except the first column */
}

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main_gui {
    transition: margin-left .5s; /* If you want a transition effect */
    padding: 20px;
    padding-top: 10px;
}

/* -------------------------- Inline --------------------------------------- */
.inline-display {
    display: flex;
    align-items: center;
    /* gap: 5px; */
}

/* -------------------------- Nav bar -------------------------------------- */

.nav-tabs .nav-item.disabled {
    pointer-events: none;
    cursor: default;
    opacity: 0.5;
}

/* Progress bar */
.progress-bar {
    background-color: var(--progress-bar-color) !important;
}

.horizontal-line {
    border-top: 2px solid var(--application-background-color);
    margin-top: 10px;
    margin-bottom: 10px;
}

.status-bar {
    background-color: #dcdcdc;
    color: #212529;
    padding: 1px 5px;
    font-size: 0.7rem;
    text-align: left;
}

.nav {
    --bs-nav-link-padding-x: 0.75rem;
    --bs-nav-link-padding-y: 0.25rem;
}

/* -------------------------- Messages ------------------------------------- */
.alert-floating-container {
    position: fixed;
    top: 20px;
    right: 0;
    width: 33.33%;
    z-index: 1050;
    display: flex;
    flex-direction: column;
    gap: 2px; /* Space between alerts */
    margin-right: 10px; /* Optional: adjust margin from the right edge */
}

/* -------------------------- Disabled screen ------------------------------ */
.grayOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(128, 128, 128, 0.7); /* Gray color with 70% opacity */
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 24px;
    color: white;
    pointer-events: none; /* Disable clicking */
}

/* -------------------------- Other ---------------------------------------- */
.keep-badge-inline {
    white-space: nowrap;
    display: inline-block;
    padding-left: 10px;
}

.username {
    margin-right: auto; /* This will push the close button to the right */
}

.modal-header {
    padding-top: 5px;
    padding-bottom: 5px;
}

.overflow-scroll {
    background-color: white;
}