.card-header.toolbar {
    /*padding: 2px !important; */
    min-height: 60px;
    background-color: #F6F4F3;
    flex-shrink: 0;
}

.card {
    border: solid;
    border-color: lightgrey;
    border-width: 1px;
    background-color: #fffcfc !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.card-header {
    background-color: white;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 8px;
    padding-right: 8px;
    border: 0;
}

.card-header-tabs .nav-link {
    border-bottom-style: solid;
    border-bottom-color: #dee2e6;
}

    .card-header-tabs .nav-link.active {
        border-bottom: 0;
        background-color: white;
    }

.card-footer {
    background-color: #f7f7fa;
}

.card-body:not(:empty) {
    border-top-width: 1px !important;
    border-top: solid;
    border-color: lightgrey;
    background-color: #fffdfc !important;
}


.modal-header {
    background-color: #0B6FAD;
    color: white;
}

    .modal-header .btn-close {
        background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'  fill='white'%3e%3cpath stroke='white' stroke-width='2' d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
    }

.control-label {
    padding-top: 0px;
    opacity: 0.65;
    transform: scale(.85) translateX(0.5rem);
}

.control-label-x0 {
    font-size:0.8em;
    padding-top: 0px;
    opacity: 0.65;
    width: 100%;
    text-align: right !important;
}


/* Empty-table message centering inside scrollX tables */
.dt-scroll-body td.dt-empty {
    position: sticky;
    left: 0;
    padding: 0 !important;
}
.dt-empty-center {
    display: block;
    text-align: center;
    padding: 0.5em 1em;
}

div.dataTables_filter input {
    border-width: 1px;
    border-color: lightgrey;
    outline-offset: 0px;
    outline-color: #86b7fe;
    width: 8em;
    min-width: 0;
}

/* Keep the DT search box compact so it sits inline next to the gear button */
div.dataTables_filter {
    margin: 0;
}

div.dataTables_filter label {
    display: flex;
    align-items: center;
    margin: 0;
    white-space: nowrap;
}

/* toolbar-close-btn: absolutely anchored to top-right of the card-header */
.toolbar-close-btn {
    position: absolute;
    top: 2px;
    right: 4px;
    padding: 0;
    line-height: 1;
    border: none;
    background: transparent;
    z-index: 1;
}

.bg-hd {
    background-color: white !important;
}

.pac-container {
    z-index: 10000 !important;
}

.table.dataTable {
    margin-top: 0px !important;
}

    .table.dataTable tr {
        border-bottom-color: lightgrey;
        border-top-color: lightgrey;
    }

    .table.dataTable thead th {
        border-bottom-color: lightgrey;
        font-weight: 400;
        background-color: #fffdfc;
    }

    .table.dataTable.no-footer {
        border-bottom: none;
    }

.table > :not(:first-child) {
    border-top: none;
}

table tr:last-child td {
    border-bottom: none;
}

a {
    color: #337ab7;
    text-decoration: none;
}

.dropdown-menu {
    font-size: 14px
}



.dataTablesSearch {
    max-width: 75px;
}

@media (min-width: 400px) {
    .dataTablesSearch {
        max-width: 150px;
    }
}

@media (max-width: 1199px) {
    .vh-100-xl-h-100 {
        height: calc(100vh - 55px) !important;
    }
}

@media (min-width: 1200px) {
    .vh-100-xl-h-100 {
        height: 100% !important;
    }
}

.divider:after,
.divider:before {
    content: "";
    flex: 1;
    height: 1px;
    background: #eee;
}

.status-alert-container {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translate(-50%,0%);
    z-index: 99999;
    background-color: white;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    margin-bottom: 15px;
}



table.dataTable > tbody > tr.selected > * {
    background-color: #0B6FAD !important;
    color: white;
    box-shadow: none !important;
}

table.dataTable > tbody > tr.selected:hover > * {
    background-color: #0a669f !important;
}

/* Checkbox checkmark visibility fix in selected rows */
table.dataTable > tbody > tr.selected input[type="checkbox"].form-check-input {
    background-color: white !important;
    border-color: white !important;
}

table.dataTable > tbody > tr.selected input[type="checkbox"].form-check-input:checked {
    background-color: white !important;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAyMCAyMCc+PHBhdGggZmlsbD0nbm9uZScgc3Ryb2tlPScjMEI2RkFEJyBzdHJva2UtbGluZWNhcD0ncm91bmQnIHN0cm9rZS1saW5lam9pbj0ncm91bmQnIHN0cm9rZS13aWR0aD0nMycgZD0nbTYgMTAgMyAzIDYtNicvPjwvc3ZnPg==") !important;
    border-color: white !important;
}

table.dataTable {
    margin-bottom: 0 !important;
}


.table-hover > tbody > tr.active {
    color: white !important;
    background-color: #0B6FAD !important;
}

    .table-hover > tbody > tr.active > * {
        background-color: transparent;
        color: white !important;
    }

.btn-xxs {
    height: 60px;
}

.btn-group .toolbar-element {
    border-radius: 0;
}

.btn-group .btn .toolbar-element {
    border-radius: 0;
}

tr.selected td button i {
    color: white;
}

.btn-close {
    background: transparent url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3e%3cpath d='M.293.293a1 1 0 011.414 0L8 6.586 14.293.293a1 1 0 111.414 1.414L9.414 8l6.293 6.293a1 1 0 01-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 01-1.414-1.414L6.586 8 .293 1.707a1 1 0 010-1.414z'/%3e%3c/svg%3e") center/1em auto no-repeat;
}


@-webkit-keyframes loading {
    0% {
        transform: scale(0);
    }

    50% {
        opacity: 1;
        transform: none;
    }
}

@keyframes loading {
    0% {
        opacity: 1;
        transform: none;
        transform-origin: top bottom;
    }

    50% {
        transform: scale(0);
        transform-origin: top bottom;
    }

    100% {
        transform: none;
        transform-origin: top bottom;
    }
}


.loading {
    pointer-events: none;
    cursor: not-allowed;
}

.spinning-logo::before {
    content: url("/Assets/Logo.svg");
    display: inline-block;
    width: 24px;
    height: 24px;
    -webkit-animation: 1.5s linear infinite loading;
    animation: 1.5s linear infinite loading;
    padding-top:2px;
    vertical-align: bottom;
}

button.loading span.bi::before {
    content: url("/Assets/LogoWhite.svg");
    display: inline-block;
    width: 16px;
    height: 16px;
    -webkit-animation: 1.5s linear infinite loading;
    animation: 1.5s linear infinite loading;
}

.b-box {
    -webkit-box-sizing: border-box !important;
    box-sizing: border-box !important;
}

.form-select option {
    white-space: normal;
    word-wrap: break-word;
}

.DTE_Form_Info {
    margin-top:-0.8em;
    margin-bottom: 0.8em;
}

tr div.DTE div.DTE_Form_Buttons button {
    color: #0B6FAD;
}

tr.selected div.DTE div.DTE_Form_Buttons button {
    color: white;
}

td.mandatory::before {
    content: "!";
    color: red;
    position: absolute;
}

.floating-label-up {
    opacity: .65;
    transform: scale(.85) translateY(-0.5rem) translateX(0.15rem);
}

.dropdown-menu-scroll {
    max-height: 350px;
    overflow-y: auto;
}

.bg-toolbar {
    background-color: #F6F4F3 !important;
}

.btn-dropdown-select {
    height: auto !important;
    min-height: calc(3.5rem + 2px);
}

a.DTE-drop-select {
    height: auto !important;
    min-height: 38px !important;
}

.DTE_Body.modal-body {
    overflow:visible;
}
.DTE.DTE_Action_Edit.modal-content {
    overflow: visible;
}
.DTE.DTE_Action_Create .DTE_Body.modal-body {
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: visible;
}

.DTE_Inline_Field {
    width:100%;
}

.label-zoom-in{
    cursor:zoom-in;
}

table.dataTable > tbody > tr.details-open > * {
    --bs-table-bg-state: rgba(0, 0, 0, 0.075);
}

.btn-chevron-details {
    background: none;
    border: none;
    border-radius: .25rem;
    padding: 0 4px;
    color: #495057;
    cursor: pointer;
    font-weight: 400;
}

    .btn-chevron-details:hover {
        background: #0B6FAD !important;
        color: white !important;
    }

/* DataTables column-visibility gear (rendered as a Bootstrap .btn-link,
   which otherwise inherits the site's blue link color). Both the item-detail
   table ("itemsTable-colvis") and the outer list table ("reportsTable-colvis")
   use this pattern. */
[class*="-colvis"] {
    color: #495057;
    border-radius: .25rem;
}
    [class*="-colvis"]:hover,
    [class*="-colvis"]:focus {
        background: #0B6FAD !important;
        color: white !important;
    }

/* Row-details chevron variants that use Bootstrap's .text-primary utility
   instead of .btn-chevron-details (AuthGroups/ReportContracts/TripTypes/Vehicles).
   Scoped to .btn.text-primary (not just .dt-chevron-col, which some of those
   tables don't actually set on the cell) so it doesn't touch the unrelated
   .text-primary status icons used elsewhere in the trips table (odometer/
   deviance indicators), which aren't buttons and should stay blue. */
.btn.text-primary {
    color: #495057 !important;
    border-radius: .25rem;
}
    .btn.text-primary:hover {
        background: #0B6FAD !important;
        color: white !important;
    }

    .btn-chevron-details:hover i {
        font-weight: 900;
        -webkit-text-stroke: 0.75px currentColor;
    }

.btn-primary {
    --bs-btn-bg: #0B6FAD;
    --bs-btn-border-color: #0B6FAD;
    --bs-btn-hover-bg: #0a669f;
    --bs-btn-hover-border-color: #0a669f;
    --bs-btn-active-bg: #095e91;
    --bs-btn-active-border-color: #095e91;
    --bs-btn-disabled-bg: #0B6FAD;
    --bs-btn-disabled-border-color: #0B6FAD;
}

.btn-outline-secondary {
    border-color: #ced4da;
}   

div.DTE_Bubble_Background{
    z-index:2000;
}

div.DTE_Bubble {
    z-index: 2011;
}

.form-control[readonly] {
    --bs-text-opacity: 1;
    
    pointer-events: none;
    background-color: #fffdfc !important;
}

.form-control.bg-toolbar[readonly] {
    --bs-text-opacity: 1;
    pointer-events: none;
    background-color: #F6F4F3 !important;
}

.form-select.bg-toolbar[readonly] {
    --bs-text-opacity: 1;
    pointer-events: none;
    background-color: #F6F4F3 !important;
}


.form-select:disabled {
    --bs-text-opacity: 1;
    pointer-events: none;
    background-color: #fffdfc !important;
}

.form-select[readonly] {
    --bs-text-opacity: 1;
    pointer-events: none;
    background-color: #fffdfc !important;
}
.btn-dropdown-select.pe-none {
    --bs-text-opacity: 1;
    background-color: #fffdfc !important;
}


.btn-dropdown-select.pe-none .js-dropdown-header span {
    --bs-text-opacity: 1;
    background-color: #fffdfc !important;
}

.sticky-top.bg-body {
    background-color: #fffdfc !important;
}

thead.sticky-top tr.bg-body {
    background-color: #fffdfc !important;
}

.form-check-input[readonly]{
    pointer-events:none;
}
.form-check-input[readonly]:not(:checked) {
    background-color: #fffdfc !important;
}

/* Checked checkbox: white background + Logify blue tick instead of blue fill */
.form-check-input:checked {
    background-color: #fff !important;
    border-color: #0B6FAD !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%230B6FAD' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e") !important;
}

.modal-content {
    background-color: #fffdfc !important;
}

.body-bgcolor {
    background-color: var(--bs-body-bg) !important;
}
.mx-05 {
    margin-right: 0.125rem !important;
    margin-left: 0.125rem !important;
}
.mt-05 {
    margin-top: 0.125rem !important;
}

/* .pac-container z-index kept for any legacy Google autocomplete dropdown */

/* carsTable / reportContractsTable - fill the flex list panel vertically */
#carsTable_wrapper,
#reportContractsTable_wrapper {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}
#carsTable_wrapper .dataTables_scroll,
#reportContractsTable_wrapper .dataTables_scroll {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
}

/* Allow selected columns to wrap onto multiple lines inside a scrollX table.
   Apply class="dt-wrap" to <th> and set className in JS so <td> cells also wrap. */
#itemsTable th.dt-wrap,
#itemsTable td.dt-wrap {
    white-space: normal;
    word-break: break-word;
}