/* ----------------------------------------------------------------------------------------------------------------- */
/* Hints                                                                                                             */
/* ----------------------------------------------------------------------------------------------------------------- */
/* 

   - DxGrid and similar components need to be placed in a container that has a fixed height based on its parent
     container.
   - When a DxGrid component is placed in a DxPopup use BodyTemplate instead of BodyContentTemplate
                                                                                                            
 */

/* ----------------------------------------------------------------------------------------------------------------- */
/* Tabs                                                                                                              */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-tabs {
    --dxbl-tabs-separator-border-width: 0;
    --dxbl-tabs-tab-border-width: 0;
    --dxbl-tabs-font-size: 1rem;
    --dxbl-tabs-line-height: 1.25rem;
    --dxbl-tabs-content-font-size: unset;
    --dxbl-tabs-content-line-height: unset;
    --dxbl-tabs-tab-padding-x: 1rem;
    --dxbl-tabs-tab-padding-y: 0.25rem;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Tabs - Active Item                                                                                                */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-tabs.dxbl-tabs-top>.dxbl-tabs-tablist>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li>.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after, .dxbl-tabs.dxbl-tabs-top>.dxbl-tabs-tablist>ul>li>.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after {
    height: 3px;
    left: -1px;
    right: -1px;
    margin-bottom: -1px;
    bottom: 0;
}
.dxbl-tabs>.dxbl-tabs-tablist>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li>.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after, .dxbl-tabs>.dxbl-tabs-tablist>ul>li>.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active::after {
    content: "";
    position: absolute;
    z-index: 0;
    background-color: var(--dxbl-tabs-tab-selected-color);
}
.dxbl-tabs>.dxbl-tabs-tablist>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li>.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-tabs>.dxbl-tabs-tablist>ul>li>.dxbl-tabs-item:not(.dxbl-tabs-tmpl):not(.dxbl-disabled):not(:disabled).dxbl-active {
    color: var(--dxbl-tabs-tab-selected-color);
    background-color: var(--dxbl-tabs-tab-selected-bg);
    border-color: var(--dxbl-tabs-tab-border-color) var(--dxbl-tabs-tab-border-color) var(--dxbl-tabs-tab-border-color) var(--dxbl-tabs-tab-border-color);
    position: relative;
}
.dxbl-tabs>.dxbl-tabs-tablist>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li>.dxbl-tabs-item:not(.dxbl-disabled):not(:disabled).dxbl-active, .dxbl-tabs>.dxbl-tabs-tablist>ul>li>.dxbl-tabs-item:not(.dxbl-disabled):not(:disabled).dxbl-active {
    cursor: default;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Add "h-100" to DxTabs CssClass property in order to give TabPages 100% fixed height                               */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-tabs.h-100 .dxbl-tabs-content-panel {
    height: calc(100% - 2.625rem)!important;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Accordion                                                                                                         */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-accordion-group .dxbl-accordion-group-header {
    background-color: var(--bs-body-bg);
    padding-left: 0;
    padding-right: 0;
    font-weight: 600;
    font-size: 0.875rem;
}

.expanded .dxbl-accordion-group-header {
    --dxbl-group-header-btn-color: var(--bs-primary);
}
.expanded .dxbl-accordion-item-text {
    color: var(--bs-primary);
}

.dxbl-accordion {
    --dxbl-accordion-group-header-hover-bg: var(--bs-tertiary-bg);
    --dxbl-accordion-group-border-radius: 0;
    --dxbl-accordion-group-border-color: unset;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Remove borders from buttons inside controls                                                                       */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-date-edit .dxbl-btn, .dxbl-text-edit .dxbl-btn {
    --dxbl-btn-border-width: 0;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* DxGrid                                                                                                            */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-grid {
    --dxbl-grid-text-cell-padding-y: 0;
    --dxbl-grid-text-cell-padding-x: 0.25rem;
    --dxbl-grid-line-height: 3rem;
    --dxbl-grid-font-size: 0.875rem;
    --dxbl-grid-header-bg: var(--bs-body-bg);
    --dxbl-grid-border-width: 1px;
    border-width: 0;
}

.dxbl-grid .dxbl-grid-table>thead>tr {
    border-color: var(--bs-primary);
    border-style: solid;
}

.dxbl-grid .dxbl-grid-table>tbody>tr,.dxbl-grid .dxbl-grid-table>tfoot>tr {
    border-color: inherit;
    border-style: inherit;
}

.dxbl-grid .dxbl-grid-table>thead>tr>td.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell),
.dxbl-grid .dxbl-grid-table>thead>tr>th.dxbl-grid-fixed-cell:not(.dxbl-grid-empty-cell) {
    background: var(--bs-body-bg);
}

.dxbl-grid .dxbl-grid-table>thead>tr:last-child>td,.dxbl-grid .dxbl-grid-table>thead>tr:last-child>th {
    border-bottom-width: 1px;
    border-top-width: 0;
}

.dxbl-grid .dxbl-grid-table>thead>tr>th.dxbl-grid-empty-cell {
    border-bottom-width: 0
}

.dxbl-grid .dxbl-grid-table>tbody>tr>td,
.dxbl-grid .dxbl-grid-table>tbody>tr>th,
.dxbl-grid .dxbl-grid-table>tfoot>tr>td,
.dxbl-grid .dxbl-grid-table>tfoot>tr>th,
.dxbl-grid .dxbl-grid-table>thead>tr>td,
.dxbl-grid .dxbl-grid-table>thead>tr>th {
    border-left-width: 0;
}

.dxbl-grid .dxbl-grid-table>tbody>tr>td.dxbl-grid-last-fixed-left-cell,
.dxbl-grid .dxbl-grid-table>tbody>tr>th.dxbl-grid-last-fixed-left-cell,
.dxbl-grid .dxbl-grid-table>tfoot>tr>td.dxbl-grid-last-fixed-left-cell,
.dxbl-grid .dxbl-grid-table>tfoot>tr>th.dxbl-grid-last-fixed-left-cell,
.dxbl-grid .dxbl-grid-table>thead>tr>td.dxbl-grid-last-fixed-left-cell,
.dxbl-grid .dxbl-grid-table>thead>tr>th.dxbl-grid-last-fixed-left-cell {
    border-right-width: 0;
}

.dxbl-grid .dxbl-grid-table>thead .dxbl-grid-header-row>th:not(.dxbl-grid-empty-cell)::before {
    content: "";
    position: absolute;
    z-index: -1;
    left: calc(0px - var(--dxbl-border-width-with-scaling,0px));
    top: calc(0px - var(--dxbl-border-width-with-scaling,0px));
    right: calc(0px - var(--dxbl-border-width-with-scaling,0px));
    bottom: calc(0px - var(--dxbl-border-width-with-scaling,0px));
    border-radius: inherit;
    background-color: var(--bs-body-bg);
}

.dxbl-grid-group-panel-container>.dxbl-grid-header>.dxbl-grid-header-content {
    line-height: 1rem;
}

.dxbl-text-edit {
    --dxbl-text-edit-padding-x: 0.5rem;
    --dxbl-text-edit-padding-y: 0.2rem;
    --dxbl-text-edit-line-height: 1.313rem;
    --dxbl-text-edit-font-size: 0.875rem;
}

.dxbl-grid-selection-cell {
    line-height: 1.5rem !important;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Use "big-list" for big lists similar to the email or timerecords page                                             */
/* ----------------------------------------------------------------------------------------------------------------- */
.big-list.dxbl-list-box>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]) {
    padding: 1rem;
    border-bottom: 1px solid var(--bs-border-color);
}

.big-list.dxbl-list-box>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li.dxbl-list-box-item-selected,
.big-list.dxbl-list-box>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li:hover {
    border-radius: 0.25rem;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Use "small-list" for small lists                                                                                  */
/* ----------------------------------------------------------------------------------------------------------------- */
.small-list.dxbl-list-box>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li:not([dxbl-bottom-virtual-spacer-element]):not([dxbl-top-virtual-spacer-element]) {
    border-bottom: 1px solid var(--bs-border-color);
    padding: 0.25rem;
}

.small-list.dxbl-list-box>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li.dxbl-list-box-item-selected,
.small-list.dxbl-list-box>.dxbl-scroll-viewer>.dxbl-scroll-viewer-content>ul>li:hover {
    border-radius: 0.25rem;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Buttons inside selected list items                                                                                */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-list-box-item-selected .dxbl-btn-outline-primary {
    color: white;
    border-color: white;
}

.dxbl-list-box-item-selected .dxbl-btn-primary {
    color: var(--bs-primary);
    background-color: white;
    border-color: white;
}

.dxbl-list-box-item-selected .dxbl-btn-danger {
    color: var(--bs-danger);
    background-color: white;
    border-color: white;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Remove background color from appointment template headers, according to our design                                */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-apt-edit-dialog-header {
    background: none !important;
}

/* ab 24.x .dxbl */
.dxbs-apt-edit-dialog,
.dxbl-apt-edit-dialog {
    --dxbl-popup-max-width: min(80vw, 900px);
}

.dxbl-apt-edit-dialog-header,
.dxbl-apt-edit-dialog-body {
    padding: 1rem !important;
}

.dxbl-scheduler .dxbl-sc-tb-wrapper {
    padding: 0 0 0.75rem 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
{
    border: none !important;
    background: var(--bs-body-bg);
}

.dxbl-modal>.dxbl-modal-root>.dxbl-popup>.dxbl-modal-content .dxbl-popup-header>.dxbl-modal-header .dxbl-modal-title,
.dxbl-modal>.dxbl-modal-root>.dxbl-popup>.dxbl-modal-content>.dxbl-modal-header .dxbl-modal-title {
    color: var(--bs-primary);
}

.dxbl-flyout>.dxbl-flyout-dialog>.dxbl-flyout-body {
    /*background: var(--bs-tertiary-bg);*/
}

.dxbl-flyout>.dxbl-flyout-dialog>.dxbl-flyout-footer {
    /*background: var(--bs-tertiary-bg);*/
    border: none;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* 100% height for DxPopup BodyContentTemplate. Use in BodyCssClass property                                         */
/* ----------------------------------------------------------------------------------------------------------------- */
.popup-height-fix {
    height: calc(100% - 42px);
    max-height: calc(100% - 42px);
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* DxPopup                                                                                                           */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-modal-header-default {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content .dxbl-popup-header > .dxbl-modal-header .dxbl-modal-title, .dxbl-modal > .dxbl-modal-root > .dxbl-popup > .dxbl-modal-content > .dxbl-modal-header .dxbl-modal-title {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* DxProgressBar                                                                                                     */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-list-box-item-selected .dxbl-progress-bar {
    --dxbl-progress-bar-indicator-color: white;
    --dxbl-progress-bar-track-color: white;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* Small textsize for Text- and ComboBox                                                                             */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-text-edit.dxbl-sm {
    --dxbl-text-edit-font-size: 0.875rem;
}

.height-28 {
    height: 28px;
}

.height-300 {
    height: 300px;
}

.height-400 {
    height: 400px !important;
}

.height-500 {
    height: 500px;
}

.vh-75 {
    height: 75vh !important;
}

.vh-50 {
    height: 50vh;
}

.vh-25 {
    height: 25vh;
}

.width-32 {
    width: 32px;
}

.width-35 {
    width: 35px;
}

.width-42 {
    width: 42px;
}

.width-400 {
    width: 400px;
}

.width-300 {
    width: 300px;
}

.max-width-400 {
    max-width: 400px;
}

.max-width-1200 {
    max-width: 1200px;
}

/* ----------------------------------------------------------------------------------------------------------------- */
/* DxComboBox without border and background                                                                          */
/* ----------------------------------------------------------------------------------------------------------------- */
.dxbl-text-edit.no-border {
    border: none;
    background: transparent;
}

.dxbl-text-edit.no-border .dxbl-edit-btn-dropdown,
.dxbl-text-edit.no-border .dxbl-btn-group{
    border: none;
    background: transparent;
}


/* ----------------------------------------------------------------------------------------------------------------- */
/* RichEdit DarkMode                                                                                                 */
/* ----------------------------------------------------------------------------------------------------------------- */

/*.dxreRoot {*/
/*    --dxre-view-background-color: transparent;*/
/*}*/

/*.dxrePage {*/
/*    background: transparent;*/
/*}*/

/*.dxrePageArea {*/
/*    background: transparent !important;*/
/*}*/

body {
    --dxbl-grid-font-size: 0.875rem;
    --dxbl-text-edit-font-size: 0.875rem;
}

.service-report-grid .dxbl-checkbox {
    vertical-align: middle !important;
}