#paginationContainer,
#paginationBottomContainer {
    display: flex;
    flex-wrap: wrap;
}
/* The record count sits at the right of the pagination, or on its own line when there is no room. */
#resultsSummary {
    margin-bottom: 1rem;
    white-space: nowrap;
}
/* Legend for the row colours, which are the Bootstrap table tints used on each card. */
#resultsLegend {
    padding-left: 0.75rem;
}
#resultsLegend .legend-swatch {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    margin: 0 0.35em 0 1em;
    vertical-align: -0.1em;
    border: 1px solid #a0a9b3;
    /* Bootstrap applies its table tints with an inset shadow, so paint the tint's colour directly. */
    background-color: var(--bs-table-bg);
}
#resultsLegend .legend-swatch:first-child {
    margin-left: 0;
}
.paginationSpinner {
    align-self: center;
    margin-bottom: 1rem;
    margin-left: 1rem;
}
#mainContent {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    flex-grow: 1;
}
#mainContentBorder {
    margin-left: 15px;
    margin-right: 15px;
    height: 100%;
}
#leftContainerContent {
    padding-bottom: 15px;
}
/* The Like/Starts/Ends/Unlike dropdowns are hidden until asked for; the text box then takes the whole row. */
#leftContainerContent.simple-criteria .name-criteria {
    display: none;
}
#leftContainerContent.simple-criteria .name-criteria + .input-group-text-search {
    border-top-left-radius: var(--bs-border-radius-sm);
    border-bottom-left-radius: var(--bs-border-radius-sm);
}
#rightContainer {
    width: 100%;
}
#searchResultsContainer {
    overflow: hidden;
}
.row label {
    margin-bottom: .25rem;
}
/* Year hints must not look like typed values. */
#searchMinimumYear::placeholder,
#searchMaximumYear::placeholder {
    color: #6c757d;
    opacity: 0.6;
    font-style: italic;
}
#resultsTable .headerRow {
    position: sticky;
    top: 0;
    z-index: 1;
    border: 1px solid #ced4da;
}
#resultsTable .recordRow {
    border-top: 0;
    border-left: 1px solid #ced4da;
    border-right: 1px solid #ced4da;
    border-bottom: 1px solid #a0a9b3;
}
/* Column dividers only apply once the column sits beside the record rather than under it. */
@media (min-width: 768px) {
    #resultsTable .leftBorder-md {
        border-left: 1px solid #a0a9b3;
    }
}
@media (min-width: 992px) {
    #resultsTable .leftBorder-lg {
        border-left: 1px solid #a0a9b3;
    }
}
#results {
    height: 100%;
}
@media (min-width: 1200px) {
    #results {
        display: flex;
        flex-flow: row nowrap;
    }
    #leftContainer {
        width: 280px;
    }
    #leftContainerContent {
        margin-right: 15px;
    }
    #rightContainer {
        width: calc(100% - 280px);
    }
}