.NavigationBar {
    padding: 5px 10px;
    background-color: white;
    /* Keep it at the top of the window, always */
    position: fixed;
    left: 0;
    right: 0;
    top: 0px;
    z-index: 90;
    height: auto;
    width: 100%;
    /* Don't wrap the contents, but let the NavigationPanel grow to the right */
    display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
}

.NavigationPanelNarrow {
    margin-top: 3px;
    margin-bottom: 3px;
    margin-right: 0px;
}

.background-image {
    background-color: white;
    background-image: url(/images/CottonShippingToolBackground.webp);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.global-mark-search {
    color: #0d6efd;
}

#loginPanel {
    background-color: #7690ce;
    opacity: .9;
}

.brand {
    list-style: none;
    display: flex;
    flex-direction: column;
    padding: 0;
    margin-right: .25rem;
}

#warehouseIDMarkSearch,
#fullMarkSearch,
#modalWarehouseIDMarkSearch,
#modalFullMarkSearch {
    width: 120px;
    max-width: 120px;
}

@media (max-width: 991px) {
    .global-mark-search {
        display: none;
    }
}

.availability-background-image {
    position: relative;
    height: 156px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.availability-background-image::before {
    content: "";
    background-image: url(/images/AvailabilityBackground.jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom, center;
    opacity: .7;
    padding: 0;
    margin: 0;
    
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    position: absolute;
}

#firstAvailableDateFilter {
    width: 160px;
}

#minimumAvailableFilter {
    width: 100px;
}

#shippedMonthsInput {
    width: 50px;
    padding-left: 2px;
    padding-right: 2px;
}

header {
    border-bottom-color: black;
    border-bottom-style: solid;
    border-width: 1px;
}

#availabilityFilterPanel {
    width: fit-content;
}

.warehouse-info-header {
    background-color: #cfe2ff;
    padding: .5rem;
    font-weight: bold;
}

/* modal-xl sizing caps out at a bit too small on smaller viewports, so we let it expand to take up a bit more space */
#markSearchModal .modal-dialog {
    max-width: 90%;
}

.global-mark-search-panel {
    align-items: center;
}

@media (max-width: 768px) {
    .global-mark-search-panel {
        align-items: start;
    }
}

/* Bring back table-primary styling on fixed left columns. */
table.dataTable thead.table-primary tr > .dtfc-fixed-left {
    background-color: #cfe2ff !important;
}

#warehouseIDFilter {
    width: 105px;
    max-width: 105px;
}

.rowScheduled > td {
    background-color: #ffffbb;
}

.rowReady > td {
    background-color: #c1ffc1;
}

.rowShipped > td {
    background-color: #ffcece;
}

.rowLate > td {
    background-color: #90ffff;
}

.warehouse-loading-notes {
    white-space: pre;
}

.calendar-day h5 {
    padding: 3px 5px 5px;
    margin: -8px -8px 8px -8px;
}

.calendar-day {
    min-height: 6.0vw;
}

.date {
    padding-left: 4px;
}

.calendar-today {
    background-color: lightblue;
}

/* Remove extra left border on bordered table display. This was also causing header widths to space incorrectly. */
div.dataTables_scrollBody  {
    border-left-width: 0px !important;
}

/* Fix color of left border when scroll appears on bordered tables */
div.dataTables_scrollBody table.table-bordered td:first-child {
    border-left-color: #dee2e6
}

.calendar-normal-availability {
    background-color: blue;
    color: white;
}

.calendar-low-availability {
    background-color: #d4bc08;
    color: black;
}

.calendar-no-availability {
    background-color: slategray;
    color: white;
}

.calendar-availability-wrapper {
    width: 50%;
}

@media (max-width: 1024px) {
    .calendar-availability-wrapper {
        width: 100%;
    }
}

.navbar-brand {
    max-width: 70%;
}

@media (max-width: 350px) {
    #username, #password {
        width: 100%;
    }
}

body {
    min-width: unset;
}

/* Shrink the login panel to a point between col-xl-4 and col-xl-3. */
@media (min-width: 1200px) {
    #loginPanel {
        width: 28%;
    }
}

.filter-badge {
    font-size: .7em;
}