/* ========================================================================
   dx-components font size override.
 ========================================================================== */
 .dx-button,
 .dx-texteditor-input,
 .dx-placeholder,
 .dx-list-item-content,
 .dx-tag-box input {
   font-size: 14px;
 }

 .dx-widget input,
 .dx-widget textarea,
 .dx-widget {
   font-family: 'Arial', sans-serif;
   font-size: 14px;
 }

 /* ========================================================================
     dx-textbox override
   ========================================================================== */
 .dx-textbox:not(.dx-tagbox),
 .dx-numberbox {
   height: 36px;
 }
 .dx-textbox.dx-textarea {
   height: 72px;
 }
 .dx-texteditor.dx-editor-filled .dx-texteditor-input,
 .dx-texteditor.dx-editor-outlined .dx-texteditor-input {
   padding: 7px 10px 6px !important;
 }

 .dx-texteditor.dx-editor-filled .dx-placeholder::before,
 .dx-texteditor.dx-editor-outlined .dx-placeholder::before {
   padding: 7px 10px 6px !important;
 }

 .dx-texteditor.dx-editor-outlined {
   background-color: #fff !important;
 }
 .dx-texteditor.dx-editor-outlined.dx-state-focused {
   box-shadow: inset 0 0 0 1px var(--color-primary-deep);
 }
 .dx-texteditor.dx-editor-outlined.dx-state-focused.dx-invalid {
   box-shadow: inset 0 0 0 1px var(--color-text-error);
 }
 .dx-texteditor.dx-editor-filled .dx-texteditor-buttons-container,
 .dx-texteditor.dx-editor-outlined .dx-texteditor-buttons-container {
   right: 0 !important;
 }

 /* ========================================================================
     dx-tag-box override
   ========================================================================== */
 .dx-tagbox:not(.dx-texteditor-empty):not(.dx-editor-filled):not(.dx-editor-outlined) .dx-tag-container {
   margin-top: 0;
 }

 .dx-tag {
   margin: 0;
 }
 .dx-tagbox .dx-texteditor-input-container input {
   height: 100%;
 }
 .dx-tagbox:not(.dx-texteditor-empty):not(.dx-editor-filled):not(.dx-editor-outlined) .dx-texteditor-input {
   margin-top: 0;
 }

 /* ========================================================================
     dx-button override
   ========================================================================== */
 .dx-button {
   min-width: 1.2rem !important;
   border-width: 0 !important;
   box-shadow: none !important;
 }
 .dx-button-text {
   text-transform: none !important;
 }

 .dx-button-has-icon {
   min-width: 36px !important;
   vertical-align: middle;
 }
 .button-indicator {
   width: 24px;
   height: 24px;
   position: absolute;
   right: 20px;
   vertical-align: middle;
 }
 .dx-button.dx-button-has-icon:not(.dx-button-has-text):not(.dx-shape-standard) {
   border-radius: 0 !important;
 }
 .dx-overlay-wrapper.dx-header-filter-menu.dx-popup-wrapper .dx-button-mode-text.dx-button-default {
   background-color: var(--color-secondary-deep) !important;
   color: white !important;
   box-shadow: none;
 }
 /* ========================================================================
     dx-popup override
   ========================================================================== */
 .dx-popup-title {
   margin-bottom: 0 !important;
 }

 .dx-dialog-wrapper .dx-popup-draggable {
   max-width: 345px;
 }

 .dx-popup-title.dx-toolbar {
   padding: 9px 0 9px 12px !important;
 }
 .dx-popup-title.dx-toolbar .dx-toolbar-label {
   font: bold 16px Arial !important;
 }
 .dx-popup-title.dx-toolbar .dx-toolbar-items-container {
   height: 30px !important;
 }
 .dx-popup-title.dx-toolbar .dx-toolbar-item:last-child {
   max-width: 350px !important;
 }
 .dx-popup-title.dx-toolbar .dx-toolbar-item:first-child .dx-button {
   min-width: 40px !important;
 }
 .dx-popup-title .dx-closebutton .dx-icon {
   width: 21px;
   height: 21px;
   background-position: 3px 3px;
   -webkit-background-size: 15px 15px;
   -moz-background-size: 15px 15px;
   background-size: 15px 15px;
   padding: 3px;
   font-size: 20px;
   text-align: center;
   line-height: 20px;
   color: #333 !important;
 }

 .dx-popup-title .dx-toolbar-after .dx-closebutton.dx-button.dx-button-has-icon {
   background-color: white !important;
   border-color: white !important;
 }
 .message-box .dx-button .dx-button-content {
   padding: 2px;
 }
 .message-box p {
   font-size: 15px;
 }

 /* ========================================================================
     cost dialog override
   ========================================================================== */
 .cost-info-dialog .dx-popup-content {
   margin: 0;
   padding: 0;
 }
 .cost-info-dialog .dx-popup-title .dx-toolbar-after .dx-closebutton.dx-button.dx-button-has-icon {
   background-color: white !important;
   border-color: white !important;
 }
 .cost-info-dialog .dx-popup-title .dx-toolbar-after .dx-closebutton.dx-button.dx-button-has-icon .dx-button-content {
   text-align: right;
 }
 .cost-info-dialog .message-box-body span {
   font-size: 15px;
 }
 .cost-info-dialog .dx-button .dx-button-content {
   padding: 2px;
 }

 /* ========================================================================
     dx-switch override
   ========================================================================== */
 .dx-switch.dx-state-active .dx-switch-handle:before,
 .dx-switch.dx-state-focused .dx-switch-handle:before {
   -webkit-box-shadow: 0 0 0 0 rgba(98, 97, 94, 0.1);
   -moz-box-shadow: 0 0 0 0 rgba(98, 97, 94, 0.1);
   box-shadow: 0 0 0 0 rgba(98, 97, 94, 0.1);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
 }
 .dx-switch-on-value.dx-state-readonly.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 0 rgba(98, 97, 94, 0.1);
   -moz-box-shadow: 0 0 0 0 rgba(98, 97, 94, 0.1);
   box-shadow: 0 0 0 0 rgba(98, 97, 94, 0.1);
   -webkit-border-radius: 50%;
   -moz-border-radius: 50%;
   -ms-border-radius: 50%;
   -o-border-radius: 50%;
   border-radius: 50%;
 }
 .dx-switch-wrapper {
   box-sizing: content-box !important;
 }
 .dx-switch-on-value .dx-switch-handle:before {
   background-color: var(--color-primary-deep) !important;
 }

 /* ========================================================================
     toolbar button override
   ========================================================================== */

 .dx-header-filter-menu .dx-toolbar .dx-toolbar-after .dx-toolbar-button:first-of-type .dx-button {
   min-width: 100px !important;
   color: #fff;
 }
 .dx-header-filter-menu .dx-toolbar .dx-toolbar-after .dx-toolbar-button:first-of-type .dx-button.dx-button-mode-text.dx-button-default {
   background-color: var(--color-secondary);
 }
 .dx-header-filter-menu
   .dx-toolbar
   .dx-toolbar-after
   .dx-toolbar-button:first-of-type
   .dx-button.dx-button-mode-text.dx-button-default.dx-state-hover {
   background-color: var(--color-primary-deep);
 }
 /* ========================================================================
     dx-datagrid override
   ========================================================================== */
 .dx-datagrid .dx-searchbox .dx-icon-search {
   left: auto;
   right: 0;
   position: absolute;
 }
 .dx-datagrid .dx-searchbox .dx-icon-search::before {
   content: '\f027';
   right: 0;
   text-indent: 0;
 }

 .dx-datagrid .dx-datagrid-search-panel .dx-placeholder {
   display: none;
 }
 .dx-datagrid .dx-datagrid-search-panel input.dx-texteditor-input {
   padding-left: 0;
 }
 .dx-datagrid-header-panel .dx-icon.dx-icon-search {
   display: none;
 }
 .dx-datagrid-header-panel .dx-texteditor-empty .dx-icon.dx-icon-search {
   display: block !important;
 }

 /* ========================================================================
    dx-tab-panel override.
  ========================================================================== */
 dx-tabs.dx-tabs .dx-tabs-wrapper,
 dx-tabs.dx-tabs .dx-tabs-wrapper .dx-tab {
   background-color: var(--color-general-background);
 }
 dx-tabs.dx-tabs .dx-tabs-wrapper .dx-tab .dx-tab-content,
 dx-tabs.dx-tabs .dx-tabs-wrapper .dx-tab .dx-tab-text {
   text-transform: capitalize;
 }
 dx-tabs.dx-tabs .dx-tabs-wrapper .dx-tab.dx-tab-selected .dx-tab-content,
 dx-tabs.dx-tabs .dx-tabs-wrapper .dx-tab.dx-tab-selected .dx-tab-text {
   font-weight: bold;
 }
 dx-tabs.dx-tabs .dx-tabs-wrapper .dx-tab:not(.dx-tab-selected):not(.dx-state-disabled) {
   color: var(--color-text);
 }
 dx-tabs.dx-tabs .dx-tabs-wrapper .dx-tab.dx-state-hover {
   color: var(--color-primary-deep);
 }
 /* ========================================================================
    searchbox override.
  ========================================================================== */
 .dx-texteditor-container .dx-icon.dx-icon-search {
   left: auto !important;
   right: 0;
   position: absolute;
 }
 .dx-texteditor-container .dx-icon.dx-icon-search::before {
   content: '\f027';
   right: 0;
   text-indent: 0;
 }
 .dx-texteditor-container .dx-placeholder {
   display: none;
 }

 .dx-searchbox.dx-editor-underlined .dx-texteditor-input {
   padding-left: 0 !important;
 }
 /* ========================================================================
    colorbox override.
  ========================================================================== */
 .dx-colorbox .dx-colorbox-input-container .dx-dropdowneditor-input-wrapper .dx-colorbox-input {
   padding-left: 40px !important;
 }

 /* ========================================================================
    custom popup override.
  ========================================================================== */
 .message-box .dx-popup-content {
   padding: 0;
 }
 .message-box-body {
   padding: 12px;
 }
 .message-box-footer {
   width: 100%;
   border-top: 1px solid #e0ddd9;
   height: 60px !important;
 }

 .message-box-footer dx-button {
   float: right;
   margin: 12px 12px 12px 0;
 }
 .message-box-footer dx-button.dx-button-mode-outlined.dx-button-normal {
   background-color: var(--color-secondary);
 }
 .message-box-footer dx-button.dx-button-mode-outlined.dx-button-normal:hover {
   background-color: var(--color-secondary-deep);
 }