/*.dx-grid-base .dx-grid-header-cell {
    font-size: .6875rem;
    background-color: #f8f2e8;
    color: #000
}

.dxbl-header-row-background {
    background-color: transparent;
}*/
/*
    These following styles are fixes to make the grids and lists work. I took them from the build list Tyler made.
    Ideally, we want to use CSS variables to map to values such as background and font-size

*/
/*.table > :not(:first-child) {
   border-top: 0px !important;
}

.dxbl-grid .dxbl-grid-table {
    border-collapse: collapse;
    table-layout: fixed;
    width: 100%;
}

.dxbl-grid .dxbl-grid-table > tbody > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tbody > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > tfoot > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > tfoot > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header), .dxbl-grid .dxbl-grid-table > thead > tr:not(.dxbl-grid-edit-row):not(.dxbl-grid-empty-row):not(.dxbl-grid-filter-row) > td:not(.dxbl-grid-indent-cell):not(.dxbl-grid-expand-button-cell):not(.dxbl-grid-empty-cell):not(.dxbl-grid-empty-data):not(.dxbl-grid-edit-form):not(.dxbl-grid-detail-cell), .dxbl-grid .dxbl-grid-table > thead > tr > th:not(.dxbl-grid-header-indent-cell):not(.dxbl-grid-empty-header) {
    padding: 0;
}

.grid-content {
    padding: 1rem;
}*/
/* the following style was copied from .table thead.thead-light th {
    font-size: .6875rem;
    background-color: #f8f2e8;
    color: #000;
}  */
/*.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell)::before {
    font-size: .6875rem;
    background-color: #f8f2e8;
    color: #000;
}

.dxbl-grid .dxbl-grid-table > thead .dxbl-grid-header-row > th:not(.dxbl-grid-empty-cell) {
    font-size: .6875rem;
    background-color: #f8f2e8;
    color: #000;
    border-left: 0;
}


.dxbl-grid .dxbl-grid-table > tbody > tr:not(first-child) > td {
    padding: 1.25rem .5rem;
    background-color: var(--bs-table-bg);
    border-bottom-width: 1px;
    border-right-width: 0px;
    border-left-width: 0px;
    border-top-width: 0px;
    box-shadow: inset 0 0 0 9999px var(--bs-table-accent-bg);
}

.dxbl-grid .dxbl-grid-table > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--bs-table-striped-bg);
    color: var(--bs-table-striped-color)
}

.dxbl-grid .dxbl-grid-table > tbody  > tr:hover > * {
    background-color: var(--bs-table-hover-bg);
    color: var(--bs-table-hover-color)
}*/

.dxbl-checkbox {
    --dxbl-checkbox-check-element-checked-bg: rgba(var(--bs-primary-rgb),1);
    --dxbl-checkbox-switch-checked-bg: rgba(var(--bs-primary-rgb),1);


/*    form check input focus color
*/
--dxbl-checkbox-switch-checked-hover-bg: #f5bd42;
    --dxbl-checkbox-check-element-checked-hover-bg: #f5bd42;
}
/* copies the btn-dark except the border color is now primary
*/

.dxbl-toolbar {
    --bs-btn-hover-bg: #2a2c3f;
    --bs-btn-hover-border-color: #f6c455;
    --dxbl-toolbar-btn-hover-bg: var(--bs-btn-hover-bg);
    --dxbl-btn-hover-border-color: var(--bs-btn-hover-border-color);
}
    .dxbl-toolbar > .dxbl-btn-toolbar .dxbl-toolbar-btn.dxbl-btn-primary {
        --dxbl-toolbar-btn-hover-color: #000;
        --dxbl-btn-hover-color: #000;
        --dxbl-btn-color: #000;
        --dxbl-btn-hover-background: none !important;
    }

    .dxbl-toolbar > .dxbl-btn-toolbar .dxbl-toolbar-btn.dxbl-btn-secondary {
        --bs-btn-hover-border-color: #f6c455;
        --bs-btn-hover-bg: #f6c455;
        --dxbl-btn-hover-border-color: var(--bs-btn-hover-border-color);
        --dxbl-toolbar-btn-hover-bg: var(--bs-btn-hover-bg);
        --dxbl-toolbar-btn-border-color: var(--bs-btn-hover-border-color);
}

    .dxbl-toolbar > .dxbl-btn-toolbar .dxbl-toolbar-btn.dxbl-btn-light {
        --bs-btn-hover-border-color: #f6c455;
        --dxbl-btn-hover-border-color: var(--bs-btn-hover-border-color);
        --dxbl-toolbar-btn-hover-bg: var(--bs-primary);
       
    }
        .dxbl-toolbar > .dxbl-btn-toolbar .dxbl-toolbar-btn.dxbl-btn-light:hover {
            background-color: var(--bs-primary);
        }


.btn-sidepanel-footer:hover {
    --dxbl-btn-hover-border-color: var(--bs-btn-hover-border-color) !important;
    --dxbl-btn-hover-background: none;
    --dxbl-btn-hover-bg: var(--bs-btn-hover-bg) !important;
    --dxbl-btn-hover-color: var(--bs-btn-hover-color) !important;
}
/*this rule removes the padding because the pagination is using it to add unnecessary padding
*/
.table-pagination > :not(caption) > * > * {
    padding: 0;
}


.main-toolbar .dxbl-text-edit:not(.parametrized-action-wrapper) {
    max-width: 120px;
}

/*Kanban style - this overrides the default syncfusion.css*/
.e-kanban {
    background-color: transparent !important;
} 
/*.e-kanban .e-kanban-header > div {
    overflow: hidden;
    justify-content: space-between;
    align-items: center;
} .e-kanban .e-kanban-header .e-header-cells {
        width: auto;
        font-family: 'Basier Square';
        background-color: #fafafa !important;
        transition: all .15s ease;
        border-radius: 0;
    } .e-kanban .e-kanban-header .e-header-cells .e-item-count {
            font-family: var(--bs-font-monospace) !important;
            color: #8e8e8e !important;
            font-weight: 400 !important;
            font-size: .8125rem !important
        } .e-kanban .e-kanban-content {
    overflow: auto;
    padding-bottom: 10px;
    transition: all .15s ease
} .e-kanban-header {
    position: -webkit-sticky;
    position: sticky;
    z-index: 100;
    top: 0;
    padding: 0 !important;
    background-color: #fafafa !important;
    transition: all .15s ease
} .e-kanban .e-kanban-header .e-header-cells .e-header-wrap .e-header-title {
    display: -ms-flexbox;
    display: flex;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    padding-left: 8px;
    padding-right: 8px;

}*/
  .e-kanban .e-kanban-table.e-content-table .e-content-row:not(.e-swimlane-row) td {
    background-color: #fafafa !important;
    width:288px;
}

.e-kanban-table colgroup col {
    width: 288px !important;
}

  .e-kanban .e-kanban-content .e-content-row .e-content-cells {
    width: auto;
} .e-kanban .e-kanban-content .e-content-row .e-content-cells {
        background-color: #fafafa
    }

    .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container {
        height: calc(100vh - 280px) !important;
        padding-bottom: 36px;
    }

    .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card {
        display: flex;
        flex-direction: column;
        align-content: stretch;
        background-color: #fff;
        box-shadow: 0 6px 10px rgba(202,202,202,.22), 0 3px 3px rgba(159,149,129,.15);
        border-radius: 0;
        border-color: #fff;
    }

  .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card:hover {
            border-color: var(--bs-primary);
        } .e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card .board-card-data {
            padding: .75rem;
            border-bottom: 1px dotted #eee
        } .e-kanban .e-kanban-content .e-content-row:not(.e-swimlane-row) .e-content-cells {
    border-radius: 0;
} .e-kanban .e-kanban-table.e-content-table .e-card.e-selection {
    /*    background-color: #f5bd426b;*/
    border: 1px solid #f4f4f4;
    /*    padding: 16px !important;*/
}



/*
    these styles were copied from site.css to handle the modals.
    When i pulled the latest work from refactor, the modals were no longer full screen.
    Unsure where these classes are being set.
*/
/*.detail-view-content {
    position: fixed;
    left: 0;
    z-index: 1048;*/
/*    margin-top: -24px;*/
/*}*/
/*layout-editor > .detail-view-content .modal-dialog {
    position: fixed;
    left: 0;
    z-index: 1048;*/
/*    margin-top: -24px;*/
/*}

.detail-view-content .modal-dialog.modal-fullscreen {
    position: fixed;
    left: 0;
    z-index: 1048;
    margin-top: -24px;
}*/
.detail-view-content #vehicleDetailModal .modal-dialog.modal-fullscreen {
    position: fixed;
    left: 0;
    z-index: 1048;
    margin-top: -74px;
} .customDetailModalTemplate {
    position: fixed;
    left: 0;
    z-index: 1048;
    margin-top: -74px;
    background-color: #fff;
    display: flex;
    height: 100%;
    width: 100%;
    overflow-x: hidden;
} .customDetailModalTemplate > .detail-view-content {
        overflow-y: auto;
        width: 100%
    } .customDetailModalTemplate > .detail-view-content > .dxbl-fl > .dxbl-row {
        overflow-y: auto;
    }

.customDetailModalTemplate layout-editor > div.detail-view-content {
    overflow-y: auto;
    width: 100%;
    overflow-x: hidden;
}


.customDetailModalTemplate .dxbl-fl-ctrl-nc {
    overflow-x: hidden;
}

.carfax-btn-wrapper .dxbl-toolbar {
    height: auto !important;
}

.carfax-btn-wrapper .dxbl-btn-toolbar {
    position: relative;
}

.carfax-btn-wrapper .xaf-toolbar-item-icon {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
}

/*    .detail-view-content #jobDetailModal .modal-dialog.modal-fullscreen {
        position: fixed;
        left: 0;
        z-index: 1048;
        margin-top: -24px;
    }*/
/*
.detail-view-content .modal-dialog.contact.modal-fullscreen {
    position: fixed;
    left: 0;
    z-index: 1048;
    margin-top: 0 !important;
}*/
/*.action-modals > .detail-view-content  {
    left: 0;
    z-index: 1048;
    margin-top: 0 !important;
}*/
/*handling the listview overflow scrolling - from site.css */
.listview-overflow {
    overflow: auto
} .listview-overflow > .grid-content:first-child {
        height: 100%
    } .dxbl-modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 500px;
    --bs-modal-padding: 1.5rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-color:;
    --bs-modal-bg: #fefefe;
    --bs-modal-border-color: transparent;
    --bs-modal-border-width: 0;
    --bs-modal-border-radius: 0;
    --bs-modal-box-shadow: 0 6px 50px 0px rgba(180, 180, 180, 0.5);
    --bs-modal-inner-border-radius: 0;
    --bs-modal-header-padding-x: 1.5rem;
    --bs-modal-header-padding-y: 1.5rem;
    --bs-modal-header-padding: 1.5rem 1.5rem;
    --bs-modal-header-border-color: transparent;
    --bs-modal-header-border-width: 0;
    --bs-modal-title-line-height: 1.5;
    --bs-modal-footer-gap: 0.5rem;
    --bs-modal-footer-bg: #04071D;
    --bs-modal-footer-border-color: transparent;
    --bs-modal-footer-border-width: 0;
    --bs-modal-bg: #fefefe;
} .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-body {
        padding: 0 !important;
    } .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header {
        padding: 0 !important;
        background-color: #fafafa !important;
        border-bottom: 0 !important;
    } .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-footer {
        padding: 0 !important;
    } .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content {
        --bs-modal-zindex: 1055;
        --bs-modal-width: 500px;
        --bs-modal-padding: 1.5rem;
        --bs-modal-margin: 0.5rem;
        --bs-modal-color:;
        --bs-modal-bg: #fefefe;
        --bs-modal-border-color: transparent;
        --bs-modal-border-width: 0;
        --bs-modal-border-radius: 0;
        --bs-modal-box-shadow: 0 6px 50px 0px rgba(180, 180, 180, 0.5);
        --bs-modal-inner-border-radius: 0;
        --bs-modal-header-padding-x: 1.5rem;
        --bs-modal-header-padding-y: 1.5rem;
        --bs-modal-header-padding: 1.5rem 1.5rem;
        --bs-modal-header-border-color: transparent;
        --bs-modal-header-border-width: 0;
        --bs-modal-title-line-height: 1.5;
        --bs-modal-footer-gap: 0.5rem;
        --bs-modal-footer-bg: #04071D;
        --bs-modal-footer-border-color: transparent;
        --bs-modal-footer-border-width: 0;
        --bs-modal-bg: #fefefe;
        position: relative;
        display: flex;
        flex-direction: column;
        width: 100%;
        color: var(--bs-modal-color);
        pointer-events: auto;
        background-color: var(--bs-modal-bg);
        background-clip: padding-box;
        border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
        border-radius: var(--bs-modal-border-radius);
        outline: 0
    } .dxbl-modal > .dxbl-modal-root > dxbl-modal-dialog[role="dialog"] > .dxbl-modal-content > .dxbl-modal-body {
    }


/*.dxbl-grid > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content {
    overflow: visible
}

.dxbl-grid > .dxbl-scroll-viewer {
    overflow: visible
}*/

.detail-view-content .dx-blazor-reporting {
    height: calc(100vh - 80px) !important;
    width: 100%;
}

.e-kanban .e-kanban-content .e-content-row .e-content-cells .e-card-container .e-card {
    overflow: visible;
    min-height: auto;
}

.board-container {
    overflow-y: hidden;
    overflow-x: auto;
}


.dxbl-modal > .dxbl-modal-root > .dxbl-popup.xafPopup.dxbl-popup-scrollable > .dxbl-modal-content {
    max-height: 100dvh;
}

.dxbl-dropdown-body .dxbl-listbox .dxbl-listbox-item .dxbl-listbox-item-selected {
    background-color: #F9D78E !important;
}
table > tbody > tr.dxbl-listbox-item.dxbl-listbox-item-selected {
    background-color: #F9D78E !important;
}

.dxbl-list-box > .dxbl-scroll-viewer > .dxbl-scroll-viewer-content > table > tbody > tr.dxbl-list-box-item-selected {
    background-color: #F9D78E !important;
}


.li-disabled {
    pointer-events: none;
    opacity: 0.7;
}

.ui-state-highlight {
    background-color: rgba(var(--bs-primary-rgb), .3);
}

.ui-state-hover {
    background: rgba(var(--bs-primary-rgb), .3);
}

.ui-draggable-dragging {
    box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}