/*General DevExpress Override*/


/*Sets the red background for the Close button on popups*/
/*.dx-popup-title.dx-toolbar .dx-button.dx-closebutton :hover,
.dx-popup-title.dx-toolbar .dx-button.dx-closebutton :focus {
    background-color: red;
    border-radius: 4px;
}

.dx-popup-title .dx-closebutton .dx-icon {
    color: var(--White);
}*/

/*Set All Devexpress LetterType*/
.dx-widget {
    font-family: 'Gill Sans MT' !important;
}

/*changed group header title font-size so it takes less space on the screen*/
.dx-form-group-caption{
    font-size: 12px;
}

.dx-form-group-with-caption > .dx-form-group-content {
    padding-top: 10px; /*only changed the top padding from 19 to 10, so we reduce the spacing from the header title to the content*/
    margin-top: 6px;
    border-top: 1px solid;
    padding-bottom: 10px;
}
/*this is added, because the standard width of devexpress is not on auto, and this solves a bug with the tabpanel 
    that it has over lapping texts, and the navbuttons not working when having large texts in the title
*/
.dx-tabpanel > .dx-tabpanel-tabs .dx-tab  {
    width: auto;
}

#ShipmentVerticalMenu span{
    padding: 7px;
}

.dx-menu-item {
    color: var(--MenuTextColor);
}

    .dx-menu-item.dx-state-hover {
        color: white;
        background-color: var(--MainBGColor);
    }

/*Hover on grid rows*/
.dx-datagrid-rowsview .dx-row:hover {
    background-color: rgba(179,179,179, 0.5);
}

.dx-button .dx-icon {
    color: var(--MenuTextColor);
    /*color: #1ca8dd;*/
}

.dx-icon-indeterminatestate {
    opacity: 0; /* Override to use as invisible icon */
}

.dx-dropdowneditor-icon {
    color: var(--MenuTextColor);
}

.dx-treeview-item {
    color: var(--MenuTextColor);
    /*color: #1ca8dd;*/
}

    .dx-treeview-item.dx-state-hover {
        background-color: var(--MainBGColor);
        /*background-color: #1ca8dd;*/
        color: var(--White);
    }

/* This is for the active labels in the typewriter, for documents that are editable in the viewer*/
.active {
    background-color: var(--LightBlue) !important;
    color: var(--White) !important;
}

.dx-treelist-edit-popup-form {
    padding-right: 10px;
}

/* Used to have toast infront of popups */
.dx-toast {
    z-index: 99999 !important;
}

/* added width: 100% to it, so we can use it and add extra features to the header, and center it if we want to*/
.dx-header-row > td > .dx-datagrid-text-content {
    display: inline-block;
    white-space: normal;
    vertical-align: top;
    width: 100%;
}

/* Used to vertically align selectbox in toolbar when labelMode "Floating" is used in combination with StylingMode "Outlined" */
.dx-toolbar-item-content .dx-editor-outlined.dx-texteditor-with-floating-label {
    margin-top: unset;
}

/*Border Around the dgsearch Search icon*/
/*.dx-button.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
    border: transparent;
}*/
/*Border around the Checked Radio button*/
/*.dx-radiobutton-icon-checked::before {
    border-color: var(--MainBGColor);
}*/
/*?*/
/*.dx-radiobutton.dx-radiobutton-checked.dx-state-active .dx-radiobutton-icon-checked:after,
.dx-radiobutton.dx-radiobutton-checked.dx-state-focused .dx-radiobutton-icon-checked:after {
    background-color: var(--MainBGColor);
}*/
/*?*/
/*.dx-radiobutton-icon:after {
    display: none;
}*/
/*Sets the input more to the right in the textbox field.*/
/*.dx-texteditor.dx-editor-filled .dx-texteditor-input, .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 0px 12px 0px;
}*/
/* The radiogroup get added this in standard devexpress added to the hover */
/*.dx-radiogroup-horizontal .dx-radiobutton {
    padding-right: 3px;
}*/
/*Color on title in column chooser*/
/*.dx-datagrid-column-chooser .dx-overlay-content .dx-popup-title .dx-toolbar-label {
    color: var(--White);
}*/
/*Left menu for the shipment and article, added radius to make it more smooth*/
/*.dx-menu .dx-menu-item {
    border-radius: 4px;
}*/
/*Paginator*/
/*Changers the padding else you cant see the whole number in the paginator*/
/*.dx-texteditor.dx-editor-filled .dx-texteditor-input, .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
    padding: 0px 4px 0px;
}*/
/*Checkbox*/
/* sets the border of the checkboxes and makes the background color transparent */
/*Sets Colors for the Checkbox to have a blue backgroudn with white check mark*/
/*.dx-checkbox-icon {
    background-color: transparent !important;
    border: 1px solid #ddd !important;
}

    .dx-checkbox-icon :hover {
        background-color: var(--MainBGColor) !important;
        border: 1px solid #ddd !important;
    }

.dx-checkbox-checked .dx-checkbox-icon {
    background-color: var(--MainBGColor) !important;
    border: 1px solid #ddd !important;
    color: white;
}*/
/*.dx-checkbox-text {
    margin-left: -22px;
    padding-left: 27px;
    line-height: 22px;
    margin-top: 5px;
}*/
/*Removes the gray glow when selected a checkbox*/
/*.dx-checkbox-icon:after{
    content: none;
}*/
/*.dx-checkbox:hover {
    background-color: var(--DGOfficeLightGrey);
}*/
/**/
/*.dx-checkbox.dx-checkbox-checked.dx-state-focused .dx-checkbox-icon:after,
.dx-checkbox.dx-checkbox-indeterminate.dx-state-focused .dx-checkbox-icon:after,
.dx-checkbox.dx-checkbox-checked.dx-state-active .dx-checkbox-icon:after,
.dx-checkbox.dx-checkbox-indeterminate.dx-state-active .dx-checkbox-icon:after {
    display: none;
}*/
/*.dx-checkbox.dx-state-focused .dx-checkbox-icon:after, .dx-checkbox.dx-state-active .dx-checkbox-icon:after {
    display: none;
}

.dx-button {
    box-shadow: none;
    -webkit-box-shadow: none;
    background-color: transparent;
    border-radius: 0;
}


.dx-button-HomeIcon {
    width: 82px;
    height: 24px;
}

.dx-button.dx-state-focused, .dx-button.dx-state-hover {
    box-shadow: none;
    -webkit-box-shadow: none;*/
/*    background-color: var(--MainBGColor);
*/ /*}


.dx-submenu > .dx-menu-items-container > .dx-menu-item-wrapper > .dx-icon .dx-icon-filter-operation-equals {
    color: var(--MainBGColor) !important;
}*/
/*.dx-button-back.dx-state-hover .dx-button-content, .dx-button-normal.dx-state-hover .dx-button-content {
    background-color: var(--MainBGColor) !important;
    color: var(--White) !important;
}*/
/*.dx-treeview-node {
    padding-left: 15px;
}

.dx-placeholder {
    opacity: 0.3;
    color: #666;
    padding-left: 3px;
}*/
/*.dx-treeview-toggle-item-visibility.dx-treeview-toggle-item-visibility-opened {
    color: #999999;
}

.dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item {
    background-color: var(--MainBGColor);
    color: var(--White);
}

.dx-treeview-toggle-item-visibility:before {
    color: #999999;
}

.dx-menu-base .dx-menu-items-container {
    width: 100%;
}

.dx-button-mode-outlined.dx-button-normal.dx-state-hover, .dx-button-mode-outlined.dx-button-normal.dx-state-focused {
    background-color: var(--MainBGColor);
}

.dx-button.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
    border-radius: 0;*/
/*border: transparent;*/
/*}*/
/*Datagrid*/
/*.dx-datagrid-focus-overlay:after {
    background-color: transparent !important;
}

.dx-datagrid-rowsview .dx-row > td, .dx-datagrid-rowsview .dx-row > tr > td {
    overflow: unset !important;
}

.dx-datagrid-form-buttons-container .dx-button {
    background-color: var(--MainBGColor);
    color: var(--White);
}

.dx-datagrid-rowsview .dx-row.dx-datagrid-edit-form {
    background-color: white !important;
}

.dx-datagrid-filter-row .dx-menu .dx-menu-horizontal .dx-menu-item-text {
    color: black;
}

.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td:last-of-type, .dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-cell-modified:not(.dx-field-item-content):last-of-type,
.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-datagrid-invalid:not(.dx-field-item-content):last-of-type
{*/
/*background-color: white;*/
/*}*/
/*Colors for the command buttons in a grid*/
/*.dx-datagrid .dx-link {
    text-decoration: underline;
    cursor: pointer;
    color: var(--MainBGColor);
}*/
/* Replaces the defualt search icon with the filter icon */
/*.dx-datagrid .dx-icon-filter-operation-default:before, .dx-datagrid-container .dx-icon-filter-operation-default:before {
    content: "\f050";
    font-size: 18px;
}
.dx-datagrid{
    background-color: var(--White);
}*/
/*Sets the icons in the filter row in the middle of the row*/
/*.dx-filter-menu.dx-menu .dx-menu-item .dx-menu-item-content {
    padding: 2px 5px 7px;
}*/
/*Sets the color of the top of the datagrid */
/*.dx-datagrid .dx-datagrid-headers .dx-header-filter, .dx-datagrid .dx-datagrid-headers .dx-header-row > td {
    background-color: var(--MainBGColor) !important;
    color: var(--White) !important;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover:not(.dx-command-select):not(.dx-command-expand):not(.dx-editor-cell):not(.dx-command-edit):not(.dx-datagrid-group-space) {
    background-color: var(--MainBGColorPlus20) !important;
    color: var(--White) !important;
}

.dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort-indicator, .dx-datagrid-headers .dx-datagrid-table .dx-row > td .dx-sort {
    color: var(--White) !important;
}
.dx-datagrid-headers .dx-datagrid-table .dx-row > td:hover .dx-datagrid-text-content {
    color: var(--White) !important;
}

.dx-selectbox .dx-texteditor-input {
    padding: 0px 5px 0px !important;
}*/
/* This is override because of the font-size, needed to be bigger, and bold*/
/*.dx-datagrid-headers .dx-datagrid-table .dx-row > td {
    border-bottom: 1px solid #999;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 16px;
    font-weight: bold;
    font-size: 16px;
}

.dx-datagrid .dx-toolbar .dx-toolbar-items-container {
}

.dx-datagrid .dx-toolbar .dx-toolbar-after {
    border-spacing: 5px 0;
}

.dx-datagrid .dx-toolbar,
.dx-treelist .dx-toolbar {
    background-color: transparent;
}



.dx-datagrid.dx-datagrid-borders > .dx-datagrid-pager {
    position: initial;
    bottom: 0;
    background: #fff;
}

.dx-datagrid .dx-datagrid-table .dx-datagrid-filter-row > td {
    border-bottom: none;
    background-color: var(--White);
}




.dx-datagrid-scroll-container {
    overflow: visible;
}

.dx-datagrid-headers {
    position: sticky;
    top: 50px;
}*/
/*This is override to change the TreeList header to be inline with the dataGrid header size*/
/*.dx-header-row {
    position: sticky;
    min-height: 40px;
    height: 40px;
}*/
/*.dx-page.dx-selection {
    background-color: #004272 !important;
    color: var(--White);
}

.dx-page-size.dx-selection {
    background: #004272 !important;
    color: var(--White);
}

.dx-button.dx-state-disabled {
    background-color: transparent;
}


.dx-texteditor.dx-state-focused:before,
.dx-texteditor.dx-state-active:before {
    border-bottom: 2px solid var(--MainBGColor);
}*/
/* Change cursor for data grid to pointer*/
/*.dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row) > td:not(.dx-focused) {
    cursor: pointer;
}

.dx-radiobutton:hover {
    background-color: var(--DGOfficeLightGrey);
    padding-right: 3px;
}

.dx-datagrid-table .dx-menu .dx-menu-item-expanded {
    background-color: var(--White);
}

.dx-treeview-item-content {
    font-size: 14px;
}

.dx-scrollable-wrapper {
    height: 100%;
}*/
/* #region Devexpress Override */
/*TextBox*/
/*.dx-texteditor.dx-editor-outlined {
    background: #fff;
    box-shadow: none;
}

    .dx-texteditor.dx-editor-outlined.dx-state-hover {
        -webkit-box-shadow: none;
        box-shadow: none;
    }

    .dx-texteditor.dx-editor-outlined.dx-state-focused,
    .dx-texteditor.dx-editor-outlined.dx-state-focused.dx-invalid,
    .dx-texteditor.dx-editor-outlined.dx-state-readonly,
    .dx-texteditor.dx-editor-outlined.dx-state-readonly.dx-state-hover {
        -webkit-box-shadow: none;
        box-shadow: none;
    }


.dx-editor-outlined.dx-texteditor-with-floating-label.dx-texteditor-empty .dx-texteditor-label .dx-label,
.dx-editor-outlined.dx-texteditor-with-floating-label .dx-texteditor-label .dx-label, .dx-editor-outlined.dx-texteditor-with-label .dx-texteditor-label .dx-label {
    max-width: 300px !important;
}

.dx-editor-outlined.dx-texteditor-with-floating-label.dx-state-readonly .dx-texteditor-label .dx-label span {
    -webkit-transform: translate(0,-7.5px);
    transform: translate(0,-7.5px);
    font-size: 12px;
    line-height: 1.35715;
    height: 19px;
    margin-top: 0;
    top: 0;
    background-color: var(--White);
    padding-left: 2px;
    padding-right: 2px;
}*/
/*Switch*/
/*.dx-switch {
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-user-drag: none;
}

.dx-switch-on-value .dx-switch-handle::before {
    background-color: var(--White);
}

.dx-switch.dx-state-hover .dx-switch-handle::before {
    background-color: transparent;
    border: 2px solid var(--MainBGColor);
}

.dx-switch.dx-state-active .dx-switch-handle::before {
    background-color: transparent;
    border: 1px solid var(--MainBGColor);
}

.dx-switch.dx-state-focused .dx-switch-handle::before {
    background-color: transparent;
    border: 1px solid var(--MainBGColor);
}

.dx-switch .dx-switch-wrapper {
    display: inline-block;
    text-align: left;
    height: 100%;
    width: 100%;
    position: relative;
    padding: 10px;
    left: -10px;
    top: -7px;
    overflow: hidden;
    vertical-align: middle;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

.dx-switch-handle::before {
    border-radius: 0;
    background-color: var(--White);
}

.dx-switch .dx-switch-wrapper::before {
    display: inline-block;
    height: 100%;
    content: "";
    vertical-align: middle;
}

.dx-switch-container {
    display: inline-block;
    width: 97%;
    vertical-align: middle;
    height: 18px;
    overflow: visible;
    position: relative;
    border: none !important;
    padding: 0px;
}

.dx-switch.dx-state-hover .dx-switch-handle::before, .dx-switch.dx-state-focused .dx-switch-handle::before {
    background-color: var(--White);
}

.dx-state-disabled .dx-switch,
.dx-state-disabled.dx-switch {
    cursor: default;
}

.dx-switch.dx-state-active .dx-switch-handle::before {
    background-color: var(--White);
}

.dx-switch-handle,
.dx-switch-on-value .dx-switch-inner {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.dx-switch-on-value .dx-switch-handle {
    -webkit-transform: translate(-48%, 9%);
    transform: translate(-48%, 9%);
    margin-top: 3px;
}

.dx-rtl .dx-switch-wrapper,
.dx-rtl.dx-switch-wrapper {
    text-align: right;
}

.dx-rtl .dx-switch-inner {
    -webkit-transform: translateX(50%);
    transform: translateX(50%);
}

.dx-rtl .dx-switch-handle {
    -webkit-transform: translateX(-100%);
    transform: translateX(-100%);
}

.dx-rtl.dx-switch-on-value .dx-switch-handle {
    -webkit-transform: translateX(0);
    transform: translateX(0);
}

.dx-switch {
    width: 32px;
    height: 18px;
}

    .dx-switch.dx-state-focused.dx-state-active .dx-switch-handle::before {
        background-color: transparent;
        border: 2px solid var(--MainBGColor);
    }

    .dx-switch.dx-state-active .dx-switch-container {
        background-color: transparent
    }

    .dx-switch.dx-state-disabled .dx-switch-handle::before,
    .dx-switch.dx-state-readonly .dx-switch-handle::before {
        background-color: #bdbdbd;
    }

    .dx-switch.dx-state-disabled .dx-switch-container::before,
    .dx-switch.dx-state-readonly .dx-switch-container::before {
        background-color: var(--DGOfficeGrey);
    }

    .dx-switch-on-value.dx-state-readonly.dx-state-focused .dx-switch-handle::before,
    .dx-switch.dx-state-active .dx-switch-handle::before,
    .dx-switch.dx-state-focused .dx-switch-handle::before,
    .dx-switch.dx-state-readonly.dx-state-focused .dx-switch-handle::before {
        -webkit-box-shadow: 0 0 0 10px rgba(0,0,0,.1);
        box-shadow: 0 0 0 10px rgba(0,0,0,.1);
        border-radius: 50%;
        border: 2px solid var(--MainBGColor);
    }

.dx-switch-container::before {
    position: absolute;
    content: "";
    width: 107%;
    height: 16px;
    border-radius: 500px;
    background-color: var(--Red);
    margin: 2px 0;
}

.dx-switch-on-value .dx-switch-container:hover {
    border: 2px solid var(--MainBGColor);
}

.dx-switch-inner {
    width: 200%;
    height: 100%;
    transform: translate(-48%, 9%);
}

.dx-switch-off {
    display: none;
    padding-bottom: 10px;
    background-color: transparent;
}

.dx-switch.dx-state-readonly .dx-switch-handle:before, .dx-switch.dx-state-disabled .dx-switch-handle:before {
    background-color: var(--White);
}

.dx-switch-handle {
    width: 14px !important;
    height: 14px !important;
    background-color: #fafafa;
    border-radius: 50%;
    margin-left: 1px;
    margin-top: 3px;
}

    .dx-switch-handle::before {
        display: block;
        content: " ";
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
        border-radius: 50%;
        -webkit-transition: none;
        transition: none;
    }

.dx-switch-on-value .dx-switch-handle::before {
    background-color: transparent;
}

.dx-switch-on-value .dx-switch-container::before {
    background-color: var(--Green);
    height: 16px;
    width: 33px;
}

.dx-switch-on-value.dx-state-active .dx-switch-handle::before,
.dx-switch-on-value.dx-state-focused .dx-switch-handle::before {
    -webkit-box-shadow: 0 0 0 10px rgba(3,169,244,.1);
    box-shadow: 0 0 0 10px rgba(3,169,244,.1);
    border-radius: 50%;
    border: 2px solid var(--MainBGColor);
}

.dx-rtl .dx-switch .dx-switch-off,
.dx-rtl .dx-switch .dx-switch-on,
.dx-switch.dx-rtl .dx-switch-off,
.dx-switch.dx-rtl .dx-switch-on {
    float: right;
    padding-left: 14px;
    padding-right: 2px;
}

.dx-rtl .dx-switch .dx-switch-off,
.dx-switch.dx-rtl .dx-switch-off {
    margin-left: 0;
}

.dx-rtl .dx-switch .dx-switch-handle,
.dx-switch.dx-rtl .dx-switch-handle {
    float: right;
    margin-left: 0;
    margin-right: -18px;
}

.dx-rtl .dx-switch .dx-switch-wrapper,
.dx-switch.dx-rtl .dx-switch-wrapper {
    left: 10px;
}

.dx-rtl .dx-switch .dx-switch-container,
.dx-switch.dx-rtl .dx-switch-container {
    margin: 0 0 0 -6px;
}

.dx-invalid.dx-switch .dx-switch-container::before {
    background-color: rgba(244,67,54,.5);
}

.dx-invalid.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled) .dx-switch-container .dx-switch-handle::before {
    background-color: #f44336;
}

.dx-invalid.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled).dx-state-active .dx-switch-container .dx-switch-handle::before,
.dx-invalid.dx-switch-on-value:not(.dx-state-readonly):not(.dx-state-disabled).dx-state-focused .dx-switch-container .dx-switch-handle::before {
    -webkit-box-shadow: 0 0 0 10px rgba(244,67,54,.1);
    box-shadow: 0 0 0 10px rgba(244,67,54,.1);
}*/
/*DataGrid*/
/*.dx-datagrid-rowsview .dx-row:nth-child(odd) {
    background-color: var(--DGOfficeMediumGrey); 
    color: black;
    border-color: #999999;
}*/
/*.dx-datagrid .dx-datagrid-rowsview .dx-datagrid-edit-form {
    background-color: white !important;
}

.dx-datagrid .dx-datagrid-rowsview .dx-datagrid-edit-form :hover {
    background-color: white !important;
}*/
/*.dx-datagrid-rowsview .dx-row:nth-child(odd):hover {
     background-color: var(--DGOfficeLightGrey);
}

.dx-page.dx-selection {
    background-color: var(--MainBGColor) !important;
    color: var(--White);
}

.dx-page-size.dx-selection {
    background: var(--MainBGColor) !important;
    color: var(--White);
}

.dx-datagrid .dx-editor-with-menu, .dx-datagrid-container .dx-editor-with-menu {
    height: 33px;
}

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

.dx-toolbar .dx-button-content::after {
    display: inline-block;
}

.dx-toolbar-after .dx-toolbar-item {
    border-radius: 0;
}

.dx-datagrid-header-panel .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon {
    border-radius: 0
}

.dx-editor-outlined .dx-texteditor-buttons-container:last-child > .dx-dropdowneditor-button:last-child {
    margin: 0;
}

div.dx-texteditor-container:nth-child(2) > div:nth-child(2) {*/
/*border-bottom: 1px solid var(--DGOfficeMediumGrey);*/
/*}

.dx-pager .dx-pages .dx-selection,
.dx-pager .dx-page-sizes .dx-selection {
    font-weight: 500;
    background-color: transparent;
    color: #fff;
    border-radius: 0%;
}*/
/*Sets the filter icons to MainBGColor*/
/*.dx-datagrid-filter-row .dx-menu-item-content .dx-icon {
    color: var(--MainBGColor) !important;
}

.dx-datagrid-column-chooser .dx-datagrid-column-chooser-plain .dx-treeview-item.dx-state-hover {
    color: #000;
    background-color: var(--DGOfficeLightGrey);
}

.dx-pager .dx-page:hover, .dx-pager .dx-page-size:hover {
    background-color: var(--MainBGColor);
    border-radius: 0%;
    color: var(--White);
}

.dx-popup-title.dx-toolbar .dx-toolbar-items-container {
    height: 36px;
    overflow: visible;
}

.dx-datagrid-column-chooser.dx-datagrid-column-chooser-mode-select .dx-popup-content {
    padding: 15px;
}

.dx-datagrid-content .dx-overlay-wrapper.dx-invalid-message.dx-datagrid-invalid-message .dx-overlay-content, .dx-datagrid-text-content {
    overflow: visible;
    text-overflow: ellipsis;
}

.dx-datagrid .dx-datagrid-content .dx-datagrid-table .dx-row > td.dx-command-select {
    padding-left: 5px !important;
    padding-right: 5px !important;
    text-align: center !important;
}*/
/*Accordion*/
/*.dx-accordion {
    background-color: #fff;
    color: #000;
    margin: 0px;
    padding-top: 2px;
}

.dx-accordion-item:first-child {
    border: 1px solid var(--DGOfficeGrey);
}

.dx-accordion-item-opened {
    border-color: var(--MainBGColor) !important;
}

.dx-accordion-item-title {
    color: #000;
    padding: 5px 12px;
    font-size: 18px;
    height: 34px;
}

.dx-accordion-item-opened.dx-state-hover > .dx-accordion-item-title,
.dx-accordion-item-opened > .dx-accordion-item-title {
    background-color: transparent;
    height: 34px;
}

    .dx-accordion-item-opened > .dx-accordion-item-title:before {
        content: "\f014";
        top: auto;
        right: 1px;
    }*/
/*Buttons*/
/*.dx-button-mode-contained.dx-state-hover {
    background-color: var(--MainBGColorPlus20) !important;
    border-color: transparent;
    color: white !important;
}

.dx-button-mode-contained.dx-state-focused {
    background-color: var(--MainBGColorPlus20) !important;
    border-color: transparent;
    color: white !important;
}*/
/*.dx-button-mode-contained.dx-button-success {
}

.dx-button-mode-contained.dx-button-success.dx-state-active {
    background-color: var(--MainBGColor);
}

.dx-button-mode-contained.dx-button-success {
    background-color: var(--MainBGColor) !important;
}

    .dx-button-mode-contained.dx-button-success.dx-state-hover {
        background-color: var(--MainBGColorPlus20) !important;
        border-color: transparent;
    }*/
/*Removes border*/
/*.dx-button-mode-contained {
    background-color: transparent;
    border-color: transparent;
}

.dx-datagrid-header-panel .dx-datagrid-toolbar-button .dx-icon {
    color: var(--MainBGColor);
}


.dx-state-hover > .dx-button-content > .dx-icon {
    color: #FFF !important;
}*/
/*Icons*/
/* sets the color of the icon inside the date dropdown to mainBGColor*/
/*.dx-datebox-calendar .dx-dropdowneditor-icon::before {
    color: var(--MainBGColor);
}


.dx-icon-chevronleft {
    font: 18px/1 DXIcons;
}

.dx-icon-chevronright {
    font: 18px/1 DXIcons;
}

.dx-icon-chevronleft:before {
    content: "\f012";
}

.dx-icon-penIcon {*/
/*background: url('../Icons/Language black.png');*/
/*filter: var(--ImageColor);
}

.dx-icon-editIcon {*/
/*background: url('../Icons/Edit black.png');*/
/*filter: var(--ImageColor);
}


.dx-icon-lockIcon {*/
/*background: url('../Icons/Lock black.png');*/
/*filter: var(--ImageColor);
}

.dx-icon-openlockIcon {*/
/*background: url('../Icons/Lock open black.png');*/
/*filter: var(--ImageColor);
}

.dx-icon-nextIcon {*/
/*background: url('../Icons/Next black.png');*/
/*filter: var(--ImageColor);
}

.dx-icon-previousIcon {*/
/*background: url('../Icons/Previous black.png');*/
/*filter: var(--ImageColor);
}

.dx-icon-saveIcon {*/
/*background: url('../Icons/Save as black.png');*/
/*filter: var(--ImageColor);
}

.dx-icon-closeIcon {*/
/*background: url('../Icons/Close black.png');*/
/*filter: var(--ImageColor);
}*/
/*Tag box*/
/*.dx-tagbox.dx-editor-filled .dx-tag-container, .dx-tagbox.dx-editor-outlined .dx-tag-container {
    padding: 0 4px 4px 0px;
    min-height: 0px;
    outline: 0;
}*/
/*Sets the "\00d7" as remove icon*/
/*.dx-tag-remove-button:after {
    right: 0px;
    margin-top: -6px;
    width: 0px;
    height: 0px;
    font-size: 20px;
    content: "\00d7";
    transform: rotate(90deg);
}*/
/* Removes the defualt dx remove icon */
/*.dx-tag-remove-button:before {
    width: 0px !important;
    height: 0px !important;
}

.dx-tag {
    margin: 0;

}
.dx-tag-content {
    background-color: var(--MainBGColor);
    color: white;
}

.dx-tag:hover .dx-tag-content {
    background-color: var(--MainBGColorPlus20);
    color: var(--White);
}*/
/*/*DropDown*/
/*.dx-dropdowneditor-button {
    width: 34px;
    min-width: 34px;
    padding: 1px;
    border-radius: 0;
}

.dx-menu-item-selected {
    background-color: var(--MainBGColor);
    color: var(--White) !important;
}*/
/*Removes the white Background from te menu item*/
/*.dx-menu .dx-menu-item-expanded {
    background-color: var(--MainBGColor);
}

.dx-dropdowneditor-input-wrapper.dx-selectbox-container .dx-texteditor-container .dx-texteditor-buttons-container
.dx-button-normal.dx-button-mode-contained.dx-widget.dx-dropdowneditor-button .dx-button-content > .dx-dropdowneditor-icon {
    border: 1px solid transparent;
    color: var(--MainBGColor);
    font: 18px/18px DXIcons;
    width: 32px !important;
    height: 60% !important;
    margin-top: 6px;
    text-align: center;
    border-radius: 0;
    content: "\f014"
}*/
/*ColumnChooser*/
/*.dx-datagrid-column-chooser .dx-overlay-content .dx-popup-title {
    padding-top: 7px;
    padding-right: 14px;
    padding-bottom: 9px;
    background-color: var(--MainBGColor);
    border-bottom: hidden;
    height: 50px;
}*/
/*Treeview*/
/*.dx-treeview-item-without-checkbox.dx-state-selected > .dx-treeview-item {
    color: var(--White);
    background-color: var(--MainBGColor);
}
.dx-treeview-item-without-checkbox.dx-state-focused > .dx-treeview-item *{
    color: var(--White);
    background-color: var(--MainBGColor);
}*/
/*selectbox*/
/*.dx-list:not(.dx-list-select-decorator-enabled) .dx-list-item.dx-state-hover {*/
/*    background-color: var(--MainBGColor);
    color: var(--White);*/
/*}

.dx-list-group-header {
    background-color: var(--MainBGColor);
    color: var(--White);
}*/
/*radiogroup*/
/*.dx-radiobutton.dx-state-hover .dx-radiobutton-icon:before {
    border-color: var(--MainBGColor);
}

.dx-radio-value-container {
    padding-left: 0;
    width: 22px;
}*/
/*RichEdit*/
/*.dx-tab-selected .dx-tab-text {
    color: var(--White);
}

.dx-item.dx-tab.dx-state-hover .dx-item-content.dx-tab-content .dx-tab-text {
    color: var(--White);
}

.dx-toolbar-after .dx-toolbar-button.dx-toolbar-menu-container
.dx-dropdownmenu.dx-dropdownmenu-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-icon .dx-button-content > .dx-icon.dx-icon-overflow {
    Color: var(--White);
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-tab-active .dx-tab-content, .dx-tabpanel > .dx-tabpanel-tabs .dx-tab.dx-tab-selected .dx-tab-content {
    color: #FFF;
}

.dx-dropdownmenu.dx-dropdownmenu-button.dx-button.dx-button-normal.dx-button-mode-contained.dx-widget.dx-button-has-icon.dx-state-hover {
    background-color: rgba(0,0,0,.15);
    border-color: transparent;
}*/
/*FileManager*/
/*.dx-filemanager .dx-filemanager-container .dx-drawer-panel-content.dx-drawer-panel-content-initial {
    display: none;
}

.dx-filemanager .dx-filemanager-breadcrumbs {
    display: none;
}

.dx-filemanager .dx-button-mode-text .dx-icon {
    color: var(--MainBGColor);
}

.dx-filemanager .dx-button-mode-text.dx-state-hover {
    background-color: var(--MainBGColor);
}

.dx-filemanager .dx-button-mode-text.dx-state-hover .dx-button-text {
        color: #FFF;
}*/
/*The PopUp that you get when leaving a edited page */
/*.dx-popup-content .dx-scrollable-wrapper .dx-scrollable-container {
    padding: 5px;
}

div > .dx-button-content:hover > .dx-button-text {
    color: white !important;
}*/
/*Sets the top of the popup color var(--MainBGColor) */
/*.dx-popup-title.dx-toolbar 
{
    background-color: var(--MainBGColor);
    color: white;
}*/
/*clear button*/
/*Removes the background color of the clear button*/
/*.dx-show-clear-button .dx-icon-clear {
    background-color: transparent;
    color: var(--MainBGColor);
}*/
/*Menu*/
/*.dx-menu-item-wrapper:hover > .dx-menu-no-icons > li:nth-child(1) > div:nth-child(1) > div:nth-child(1) > a:nth-child(1) > span:nth-child(1) {
    color: #fff;
}

.dx-menu .dx-menu-item-expanded {*/
/*    background-color: var(--MainBGColorPlus20);
*/ /*}*/
/*Date picker*/
/*.dx-calendar-cell.dx-calendar-selected-date span, .dx-calendar-cell.dx-calendar-selected-date.dx-calendar-today span {
    background-color: transparent;
}

.dx-dropdowneditor.dx-dropdowneditor-active .dx-dropdowneditor-icon, .dx-dropdowneditor-button.dx-state-active .dx-dropdowneditor-icon {
    width: 32px;
}
.dx-calendar-cell span {
    width: 20px;
}*/
/* To override the color */
/*.dx-calendar-cell.dx-calendar-today {
    color: var(--MainBGColor);
}*/
/*dx tab*/
/*.dx-tab {
    background-color: var(--White);
    color: var(--MainBGColor);
}

    .dx-tab.dx-tab-selected {
        color: var(--White);
        background-color: var(--MainBGColorPlus20) !important;
    }

        .dx-tab.dx-tab-selected .dx-icon {
            color: var(--White);
        }

        .dx-tab.dx-tab-selected::before {
            content: "";
            position: absolute;
            bottom: 0;
            height: 0;
            left: 0;
            right: 0;
            background-color: var(--White);
        }*/
/*.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs .dx-tab .dx-tab-content {
    color: var(--White);
    font-size: 20px;
}*/
/*.dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tab.dx-tab-active .dx-tab-content, .dx-tabpanel.dx-state-focused > .dx-tabpanel-tabs .dx-tab.dx-tab-selected .dx-tab-content {
    color: var(--White);
}

.dx-tab.dx-state-hover {
    color: var(--White);
    background-color: var(--MainBGColorPlus20) !important;
}

    .dx-tab.dx-state-hover .dx-icon {
        color: #FFF;
    }

.dx-tab .dx-icon.dx-icon-close:hover {
    background-color: var(--Red);
}

.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs .dx-tab.dx-state-hover .dx-tab-content {
    color: var(--White);
}*/
/*.dx-tabpanel > .dx-tabpanel-tabs .dx-tabs {
    background-color: var(--MainBGColor);
}*/
/*.dx-tab-content {
    vertical-align: middle;
    text-transform: initial;
    /*line-height: 1px;*/ /*Was in conflict with the end user report designer, so it is disabled*/
font-weight: 500;
}
*/


/*dx Drawers*/
/*.dx-drawer-wrapper {
    overflow: visible;
}*/

/*dx scrollbar*/

/*.dx-scrollable-scroll-content {
    background-color: var(--MainBGColor) !important;
}*/

/*Treelist*/
/*.dx-treelist .dx-editor-with-menu, .dx-treelist-container .dx-editor-with-menu {
    height: 34px;
}*/

/* colors for command buttons in a tree-list*/
/*.dx-treelist .dx-link {
    color: var(--MainBGColor);
}

.dx-treelist .dx-icon-filter-operation-default::before, .dx-treelist-container .dx-icon-filter-operation-default::before {
    content: "\f050";
    font-size: 18px;
}
.dx-treelist .dx-menu .dx-menu-item .dx-menu-item-content, .dx-treelist-container .dx-menu .dx-menu-item .dx-menu-item-content {
    color: var(--MainBGColor);
}
.dx-treelist-filter-row {
    background-color: var(--White); 
}
.dx-treelist-rowsview .dx-row:hover {
    background-color: var(--DGOfficeLightGrey);
}
.dx-treelist-header-panel .dx-toolbar-text-auto-hide .dx-button.dx-button-has-icon {
    border-radius: 0%;
}

.dx-treelist-focus-overlay:after {
    background-color: transparent !important;
}

.dx-treelist-header-panel .dx-treelist-toolbar-button .dx-icon {
    color: var(--MainBGColor);
}

.dx-filter-menu.dx-menu .dx-menu-item .dx-menu-item-content .dx-icon {
    color: var(--dg);
}

.dx-treelist-column-chooser .dx-overlay-content .dx-popup-title {
    padding-top: 7px;
    padding-bottom: 9px;
    background-color: var(--MainBGColor);
}

.dx-treelist-column-chooser.dx-treelist-column-chooser-mode-select .dx-popup-content {
    padding: 20px;
}*/
/*#endregion*/
/*  #region Devexpress*/