/* Overides after devextreme upgrade
    Things tha visually changed between these versions.
-------------------------------------------------- */
/* 21.2.5 -> 22.1.6 */
.dx-datagrid .dx-datagrid-table .dx-header-row > td {
    padding: 12px;
}

.dx-datagrid-group-closed,
.dx-datagrid-group-opened,
.dx-datagrid-adaptive-more,
.dx-toolbar-button .dx-button-has-text .dx-button-content .dx-icon,
.dx-button-has-icon .dx-icon,
.dx-datagrid-container .dx-menu .dx-menu-item .dx-menu-item-content .dx-icon,
.dx-datagrid .dx-menu .dx-menu-item .dx-menu-item-content .dx-icon,
.dx-checkbox-icon,
.dx-datebox-calendar .dx-dropdowneditor-icon,
.dx-dropdowneditor-icon,
.dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon,
.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon {
    width: 18px;
    background-size: 18px 18px;
    font-size: 18px;
}

.dx-button-has-icon .dx-icon,
.dx-toolbar-button .dx-button-has-text .dx-button-content .dx-icon,
.dx-dropdowneditor-icon {
    line-height: 18px;
    height: 18px;
}

.dx-datagrid.dx-filter-menu .dx-menu-item-content .dx-icon {
    width: 14px;
    background-size: 14px 14px;
    font-size: 14px;
}

.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):not(.dx-validation-pending).dx-command-edit.dx-command-edit-with-icons .dx-link,
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-invalid:not(.dx-field-item-content):not(.dx-validation-pending):not(.dx-datagrid-select-all).dx-command-edit.dx-command-edit-with-icons .dx-link,
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td:not(.dx-validation-pending):not(.dx-datagrid-select-all).dx-command-edit.dx-command-edit-with-icons .dx-link {
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    font-size: 16px;
    line-height: 16px;
    color: var(--au-color-deepred-min1);
}

.dx-datagrid .dx-row > td {
    padding: 10px 11px;
    font-size: 13px;
    line-height: 16px;
}

.dx-slider-handle .dx-tooltip-wrapper .dx-overlay-content {
    background-color: inherit;
}

.dx-button-has-icon.dx-button-has-text .dx-icon {
    font-size: 1.5em;
}

.dx-datagrid .dx-menu .dx-menu-item .dx-menu-item-content,
.dx-datagrid-container .dx-menu .dx-menu-item .dx-menu-item-content {
    padding: 8px 4px;
}

.dx-menu-base .dx-menu-item .dx-menu-item-content,
.dx-textarea .dx-texteditor-input {
    line-height: 20px;
}

.dx-editor-cell .dx-texteditor .dx-texteditor-input {
    height: 36px;
    line-height: 36px;
}

.dx-toolbar .dx-toolbar-items-container {
    height: 38px;
}

.dx-button {
    height: 28px;
}

.dx-button-has-icon,
.dx-toolbar-button.dx-toolbar-text-auto-hide .dx-button {
    min-width: 28px;
}

.dx-toolbar-item-content .dx-button-has-icon .dx-button-content {
    padding: 0.4rem 0rem;
}

.dx-button-mode-text .dx-icon {
    color: #676e77;
}

.dx-context-menu .dx-menu-item .dx-menu-item-content {
    padding: 8px;
}

.dx-menu-base,
.dx-texteditor-input,
.dx-list-select-all,
.dx-widget,
.dx-context-menu .dx-menu-item,
.dx-placeholder,
.dx-editor-cell .dx-texteditor .dx-texteditor-input,
.dx-list-search.dx-searchbox .dx-placeholder::before {
    font-size: 13px;
}

.dx-list-select-all-label {
    line-height: 15px;
    padding: 0 30px;
    margin-top: 1px;
}

/*
.dx-texteditor.dx-editor-underlined .dx-placeholder::before,
.dx-texteditor.dx-editor-underlined .dx-texteditor-input,
*/
.dx-texteditor.dx-editor-filled .dx-placeholder::before,
.dx-texteditor.dx-editor-filled .dx-texteditor-input,
.dx-list .dx-list-item-content,
.dx-list .dx-list-group-header {
    padding: 6px 0 5px;
}

.dx-list .dx-list-item-content,
.dx-list .dx-list-group-header {
    padding-left: 11px;
}
/*/
.dx-texteditor.dx-editor-underlined .dx-texteditor-input, 
.dx-texteditor.dx-editor-underlined .dx-placeholder
*/
.dx-texteditor.dx-editor-filled .dx-texteditor-input,
.dx-texteditor.dx-editor-filled .dx-placeholder {
    margin-left: 0.625rem;
}

.dx-editor-cell .dx-texteditor .dx-texteditor-input,
.dx-datagrid .dx-editor-with-menu .dx-texteditor .dx-texteditor-input {
    padding: 0 13px;
}

.dx-searchbox.dx-editor-underlined .dx-placeholder::before,
.dx-searchbox.dx-editor-underlined .dx-texteditor-input {
    padding-left: 21.5px;
}

.dx-searchbox.dx-editor-underlined .dx-icon-search {
    margin-top: -9.75px;
    width: 21.5px;
    height: 21.5px;
    background-position: 2px 2px;
    background-size: 16px 16px;
    padding: 2px 5.5px;
    font-size: 16px;
    line-height: 16px;
}

.dx-list-select-all {
    padding: 9px 0;
}

.dx-list-select-all-checkbox,
.dx-list-item-before-bag .dx-list-select-checkbox, .dx-list-item-before-bag .dx-list-select-radiobutton {
    margin-left: 11px;
}

.dx-list-select-all::after {
    left: 11px;
    right: 11px;
}

/*todo: vanuit polaris is voor een dxlist, wss binnen een grid, deze padding gewenst.
    Alleen in een dxList zelf, willen we alles toch een beetje meer compact. Onderstaande css selector zal een beetje verfijning verei
    Nog te achterhalen waar precies deze van toepassing is.
     -> .dx-selectbox lijkt er 1 te zijn.
*/
.dx-selectbox-popup-wrapper .dx-list-item-content {
    padding: 10px 11px 9px
}

.dx-checkbox-icon {
    height: 16px;
    width: 16px;
}

.dx-dropdowneditor-overlay .dx-list-group-header, .dx-dropdowneditor-overlay .dx-list-item-content {
    font-size: 13px;
    line-height: 16px;
}

.dx-dropdowneditor-icon::before {
    width: 18px;
    margin-top: -9px;
    margin-left: -9px;
}

.dx-list-item-before-bag.dx-list-select-checkbox-container, .dx-list-item-before-bag.dx-list-select-radiobutton-container {
    width: 51px;
}

.dx-popup-title.dx-toolbar .dx-toolbar-label {
    font-size: 16px;
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
    height: 42px;
}

.dx-datagrid-rowsview .dx-adaptive-detail-row .dx-field-item-content {
    line-height: 26px;
    min-height: 26px;
    font-size: 13px;
}

.dx-datagrid-edit-popup .dx-popup-content,
.dx-popup-content {
    padding: 16px;
}

.dx-overlay-wrapper {
    font-size: 13px;
}

.dx-popup-content.dx-dialog-content {
    min-width: 188px;
    padding: 16px;
}

.dx-button-text {
    line-height: 17px;
}

.dx-popup-bottom .dx-toolbar-after .dx-button-text {
    line-height: 20px;
}

.dx-adaptive-item-text {
    padding: 0;
}

.dx-tag-content {
    padding: 4px 32px 4px 8px;
}

.dx-editor-cell .dx-texteditor .dx-tag-container {
    min-height: 36px;
}

.dx-editor-cell.dx-editor-inline-block:not(.dx-command-select)::before {
    padding-bottom: 10px;
    padding-top: 10px;
}

.input-group:not(.has-validation) > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating), 
.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n+3), 
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-control, 
.input-group:not(.has-validation) > .form-floating:not(:last-child) > .form-select {
    border: 0;
    margin-left: 0.5px;
}

.input-group-text {
    background: transparent;
    padding-top: 0;
    padding-right: 0;
    padding-bottom: 0;
    padding-bottom: 0;
    padding-left: 5.5px;
}

.dx-show-clear-button .dx-icon-clear {
    background-color: inherit;
    color: rgba(100,101,106,.54);
}

.dx-button-right {
    width: fit-content;
    margin-left: auto;
}
/* Datagrid
-------------------------------------------------- */
.dx-header-row {
    background-color: #f5f5f5;
}

.dx-datagrid-filter-row {
    background-color: #f5f5f5;
}

.dx-datagrid-total-footer {
    background-color: #f5f5f5;
}

.dx-datagrid-headers .dx-datagrid-table .dx-datagrid-filter-row > td {
    border-bottom: 3px solid #b4b6bf;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    font-size: 14px;
}

.dx-datagrid .dx-header-filter:not(.dx-header-filter-empty), .dx-datagrid-container .dx-header-filter:not(.dx-header-filter-empty) {
    background-color: var(--au-color-deepred-base);
    color: white;
}

.dx-datagrid .wrapped-column {
    white-space: normal;
    word-wrap: break-word;
}

.dx-datagrid .dx-command-select.dx-editor-cell {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

.dx-datagrid .row-max-150 {
    max-height: 150px;
    overflow-y: auto !important;
    /*display: block;*/
}

.dx-floating-header-panel .dx-datagrid .dx-datagrid-header-panel {
    position: absolute;
    right: -2px;
    top: -8px;
    z-index: 1;
    background: initial;
}

/* Diagram
-------------------------------------------------- */

.dxdi-canvas text {
    font-family: Ubuntu,Consolas !important;
}

.dxdi-canvas .connector path,
.dxdi-canvas .connector line {
    stroke-width: 2 !important;
    stroke: var(--au-color-grey-plus9) !important;
    stroke-linejoin: round !important;
    pointer-events: stroke !important;
}


/* Form
-------------------------------------------------- */
.dx-form .dx-item.dx-box-item {
    line-height: 1.5;
}

dx-form .dx-layout-manager .dx-field-item {
    /*should fix the label styling issue with dx-forms, however, devextreme is calculating a label width, which doesn't work with a different font-size.*/
    /*font-size: initial;*/
}

.dx-form .dx-layout-manager .dx-field-item-label-text {
    color: var(--au-color-grey-plus9) !important;
}

.dx-form .dx-texteditor-input {
    height: calc(1.5em + 0.625rem + 2px)
}

.dx-field-item:not(.dx-field-item-has-group):not(.dx-field-item-has-tabs):not(.dx-first-row):not(.dx-label-v-align) {
    padding-top: 20px;
}

.dx-form .dx-layout-manager .dx-field-item {
    padding-top: 0;
    padding-bottom: 0;
}

.dx-selectbox-popup-wrapper .is-insert-item {
    color: #0A7396;
}

    .dx-selectbox-popup-wrapper .is-insert-item .info {
        font-weight: bold;
    }

/* Dx Slider
-------------------------------------------------- */
.dx-slider-tooltip-position-top {
    padding-top: 0;
}

/* Material design icons
-------------------------------------------------- */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: local('Material Icons'), local('MaterialIcons-Regular'), url('../fonts/MaterialIcons-Regular.woff2') format('woff2'), url('../fonts/MaterialIcons-Regular.ttf') format('truetype');
}

/*Unicode https://github.com/Angelmmiguel/material_icons/blob/master/app/assets/stylesheets/material_icons_unicode.css.erb*/
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px; /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

.dx-link-icon
.dx-command-edit .dx-command-edit-with-icons .dx-link, .dx-command-edit .dx-command-edit-with-icons .dx-link:before,
.dx-toolbar-button .dx-button .dx-icon:not(.dx-icon-xlsxfile):before, /*:not(.dx-icon-export-excel-button),*/
.dx-context-menu .dx-menu-item.dx-menu-item-has-text.dx-menu-item-has-icon .dx-icon-filter-operation-default:before,
.dx-datagrid .dx-editor-with-menu .dx-menu-item-content .dx-icon.dx-icon-filter-operation-default:before,
.dx-link-icon:before,
.dx-searchbox .dx-icon-search::before {
    display: inline-block !important;
    font-family: "Material Icons" !important;
    /* commenting and splitting in multple parts, see: https://github.com/angular/angular-cli/issues/11679#issuecomment-409727121 */
    /* font: normal normal normal 24px/1 "Material Design Icons"!important; */
    font-size: inherit !important;
    text-rendering: auto !important;
    line-height: inherit !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}


.dx-icon-zoom-in,
.dx-icon-zoom-out {
    /*$icons not known in devextreme*/
    font: 14px/1 DXIcons;
    background-position: 0 0;
    background-repeat: no-repeat;
}

.dx-icon-edit:before {
    content: "\e3c9" !important;
}

.dx-icon-trash:before {
    content: "\e872" !important;
}

.dx-icon-save:before,
.dx-icon-edit-button-save::before {
    content: "\e161" !important;
}

.dx-icon-revert:before,
.dx-icon-edit-button-cancel::before {
    content: "\e166" !important;
}

.dx-icon-filter-operation-default:before {
    content: "\e8b6" !important;
}

.dx-icon-edit-button-addrow:before {
    content: "\e145" !important;
}

.dx-icon-list:before {
    content: "\e896" !important;
}

.dx-icon-search:before {
    content: "\e8b6" !important;
}

.dx-icon-print:before {
    content: "\e8ad" !important;
}

.dx-icon-doc:before {
    content: "\e873" !important;
}

.dx-icon-filter:before {
    content: "\e152" !important
}

.dx-icon-qrcode:before {
    content: "\e00a" !important;
}

.dx-icon-close:before {
    content: "\e5cd" !important;
}

.dx-icon-map:before {
    content: "\f00f" !important;
}

.dx-icon-zoom-in:before { /*icon doesn't work, further investigate?*/
    content: "\e8ff" !important;
}

.dx-icon-zoom-out:before { /*icon doesn't work, further investigate?*/
    content: "\e900" !important;
}

.dx-icon.dx-icon-xlsxfile::before { /*Material has no excel use devextreme*/
    font: 18px/18px DXIcons !important;
    content: "\f117" !important;
}

.dx-icon-column-chooser::before {
    content: "\efe8" !important;
}

.dx-icon-undo:before {
    content: "\e166" !important;
}

.dx-icon-redo:before {
    content: "\e15a" !important;
}

.dx-icon-spindown::before {
    content: "\e8ff" !important;
}

.dx-icon-export::before {
    content: "\e6b8" !important;
}

.dx-icon-preferences::before {
    content: "\e8b8" !important;
}

.dx-diagram-i {
    content: "\e3c2" !important;
}

.dx-icon-add::before {
    content: "\e145" !important;
}

.dx-icon-report::before {
    content: "\f071" !important;
} 

.dx-ltr.dx-fullscreen-wizard {
    background: white;
    border: 1px solid var(--au-color-grey-base);
}

.dx-fullscreen-wizard {
    z-index: 5;
}