/* bootstrap overrides */
:root {
    
}

.modal {
    --bs-modal-header-padding: .5rem 1rem;
}

@media (min-width: 1500px) {
    .modal-xl {
        --bs-modal-width: 1500px;
    }
}

.form-label, 
.col-form-label-sm,
.table th {
    font-size: .775rem;
    font-weight: 700;
}

.form-control-sm, .form-select-sm {
    font-size: 0.8rem;
}

.table td {
    font-size: .775rem;
}

.form-label {
    margin-bottom: 0.15rem;
}

.modal-body {
    padding: 5px;
}



/* other styles */

html, body {
    height: 100%;
}

div.dropdown-search {
    position: absolute;
    z-index: 10;
    left: 15px;
    right: 15px;
    height: 200px;
    background-color: #fff;
}
   /* div.dropdown-search table tr td, div.dropdown-search table tr th {
        background-color: #eaf4ff;
    }*/

div.location-search {
    width: 600px;
    max-height: 200px;
}

div.location-search-lg {
    width: 760px;
    max-height: 300px;
}

/*div.location-search.mobile {
    width: 310px;
}*/

div.contract-select-list {
    width: 700px;
    max-height: 150px;
    overflow-y: scroll;
}

/*div.contract-select-list-mobile {
    max-height: 150px;
    overflow-y: scroll;
    width: 88vw;
    max-width: 100%;
}*/

div.load-breakout {
    max-height: 200px;
}

table.scrollable {
    overflow-y: scroll;
}
table.scrollable th {
    position: sticky;
    top: 0;
}

table .form-check-input {
    width: 1.2em;
    height: 1.2em;
    margin-top: 0.15em;
}

table.error-border {
    border-collapse: separate;
}
td.error-border {
    border-radius: 6px;
    border: 1px solid red;
    padding: 0 0 5px 0;
    
}

.date-input {
    width: 110px;
}

.select-m {
    width: 200px;
}

.select-sm {
    width: 150px;
}

.hidden {
    display: none;
}

div.light-background {
    background-color: #f8f9fa;
}

.drop-menu .menu-items {
    position: absolute;
    display: none;
    background-color: whitesmoke;
    z-index: 100;
    box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
    min-width: 120px;
}

    .drop-menu .menu-items div {
        padding: 6px 10px;
    }

.drop-menu .menu-items a{
    text-decoration: none;
}




/* Make the mat-select look more like an HTML select */
.cdk-overlay-container {
    z-index: 1060 !important; /* Higher than Bootstrap modal z-index */
}

.mat-mdc-form-field {
    width: 100%;
    height: 24px !important;
}

.mat-mdc-select {
    --mat-select-trigger-text-size: 0.8rem;
}

.mat-mdc-form-field-infix {
    min-height: 2px !important;
}

.mat-mdc-text-field-wrapper.mdc-text-field--outlined .mat-mdc-form-field-infix {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}

.mdc-text-field--outlined {
    padding-left: 8px !important;
    --mdc-outlined-text-field-outline-width: 1px !important;
    --mdc-outlined-text-field-focus-outline-width: 1px !important;
    --mdc-outlined-text-field-container-shape: 4px;
}

.mdc-text-field--focused {
    border-color: inherit !important;
}

.mat-mdc-option {
    min-height: 20px !important;
}

/* dropdown options text size */
.mat-mdc-option .mdc-list-item__primary-text {
    font-size: 0.8rem !important;
}

/* dropdown selected items text and background */
.mat-mdc-option.mdc-list-item--selected:not(.mdc-list-item--disabled) .mdc-list-item__primary-text {
    color: inherit !important; 
    background-color: transparent !important; 
}

/* dropdown selected checkbox color */
.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full, .mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
    background: #0d6efd !important;
}

.custom-dropdown {
    position: relative;
    width: 100%; /* Adjust as needed */
}

.selected {
    padding: 4px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius:4px;
    font-size: 0.8rem;
}

.unselected {
    padding: 15px;
    border: 1px solid #ccc;
    cursor: pointer;
    border-radius: 4px;
}

.dropdown-options {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 100px;
    overflow-y: auto;
    border: 1px solid #ccc;
    background: #fff;
    z-index: 10;
}

.option {
    padding: 6px;
    cursor: pointer;
    font-size: 0.8rem;
}

    .option:hover {
        background-color: #f1f1f1;
    }



/* Load-Breakout Columns */
div.load-breakout-col-header span {
    display: inline !important;
    justify-content: center;
}

div.grid-col-editable {
    background-color: #fff2cc;
}

div.loads-status-noloads {
    background-color: red;
}

div.loads-status-toofew {
    background-color: yellow;
}

div.loads-status-match {
    background-color: lightgreen;
}

div.loads-status-toomany {
    background-color: darkgreen;
    color: white;
}