#bidtab_databases_resize_wrapper {
    position: absolute;
    top: 8em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_overview_statistics_resize_wrapper {
    position: absolute;
    top: 16em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_overview_statistics_missing_resize_wrapper {
    position: absolute;
    top: 12.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_overview_bidders_resize_wrapper {
    position: absolute;
    top: 16em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_bids_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_airports_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_projects_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_categories_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_controls_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_items_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_spec_numbers_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

#bidtab_units_resize_wrapper {
    position: absolute;
    top: 7.5em;
    left: 0;
    right: 0;
    bottom: 0;
}

div.dtsp-verticalContainer {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-content: flex-start;
    align-items: flex-start;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes {
    width: 30%;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 0;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 26%;
}

/*div.dtsp-verticalPanes {*/
/*    margin-right: 20px;*/
/*}*/

div.dtsp-title {
    margin-right: 0px !important;
    margin-top: 13px !important;
}

input.dtsp-search {
    min-width: 0px !important;
    padding-left: 0px !important;
    margin: 0px !important;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes {
    flex-direction: column;
    flex-basis: 0px;
}

div.dtsp-verticalContainer div.dtsp-verticalPanes div.dtsp-searchPanes div.dtsp-searchPane {
    flex-basis: 0px;
}

/*div.dtsp-verticalContainer div.container {*/
/*    flex-grow: 1;*/
/*    flex-shrink: 0;*/
/*    flex-basis: 60%;*/
/*}*/

/*div.dtsp-panesContainer {*/
/*    border: 1px solid #ccc;*/
/*    border-radius: 6px;*/
/*    padding: 1em !important;*/
/*}*/

div.dtsp-titleRow {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

div.dtsp-titleRow div.dtsp-title {
    margin-top: 0 !important;
    padding-top: 0;
}

html.dark div.dtsp-panesContainer {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* A .form-select that reads as a .btn-primary - used by the dollar basis
   toggle. The hover/active shades are the literal values Bootstrap compiles
   into .btn-primary from $primary, so the control matches a real primary
   button next to it. The caret is Bootstrap's own chevron recolored white,
   since the stock one is near-black and disappears on blue. */
.form-select-primary {
    color: #fff;
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

.form-select-primary:hover {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
}

.form-select-primary:focus {
    color: #fff;
    background-color: #0b5ed7;
    border-color: #0a58ca;
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.5);
}

.form-select-primary:disabled {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    opacity: 0.65;
}

/* The open list inherits the select's colors on Windows/Linux Chrome, which
   would render white-on-blue rows. Put the options back on the body palette. */
.form-select-primary option {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
}

/* The unit title shares DataTables' start cell with the export buttons (see
   overview_item_table_controller.js). Bootstrap 5 maps that cell to
   col-md-auto, which would hold it tight against the buttons, so let the cell
   and the title span the gap up to the search box. The tab pane id is outside
   the per-unit loop, so it scopes this without any extra markup. */
#item-table-tab-pane .dt-layout-start,
#item-table-tab-pane .dt-layout-start > h4 {
    flex: 1 1 auto;
}