/* Overrides until better permanent solutions are implemented */

/* TODO: Clean up HTML and CSS so Bootstrap.min.css and bootstrap icons can be removed */
button,
.button {
  outline: none !important;
} /* TODO: do with borders in styles.css */

/*Related to Dx-drop-down-button color and font size*/
.dx-button-mode-text .dx-icon {
  color: white; /* !important messed up modal X button - L. */
  font-size: var(--text-M);
}

/* BUG 5084: temporary fix, remove after Step 3 & 4 are aligned */
.filter_box {
  padding-bottom: 0 !important;
  padding-top: 0 !important;
  row-gap: var(--gap-M);
}

.filter_box .dx-texteditor-input {
  font-size: var(--text-XS);
  line-height: var(--line-height-XS);
}

.filter_box .dx-lookup {
  margin: 0 !important;
}

/* Removing container for bugged fixed position in S&OP modals */
.remove-container {
  container: none !important;
}

/* TODO: Remove when permanent fix is implemented in Step 4 */
.dx-header-row {
  background-color: var(--table_head-background) !important;
}

.dx-header-row > td {
  border-bottom: 1px solid var(--stroke-1);
}

.dx-row {
  background-color: var(--table_cell-background-1);
}

.dx-row > td {
  border-right: 1px solid grey;
  font-size: var(--text-S);
  line-height: var(--line-height-S);
  padding-bottom: var(--gap-S);
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: var(--gap-S);
}

.dx-header-row:has(.table-control) .dx-column-indicators {
  display: none;
} /* Can be fixed better by adding .is-hidden to .dx-column-indicators */

.dx-row-alt {
  background-color: var(--table_cell-background-2);
}

.dx-master-detail-cell .dx-gridbase-container {
  background-color: #f8f8f8;
}

.dx-master-detail-cell .dx-gridbase-container .dx-row {
  background-color: var(--table_head-background);
} /* table in an expandable table row*/

.dx-overlay-shader .dx-popup-content {
  padding-bottom: var(--gap-M);
  padding-left: var(--gap-M);
  padding-right: var(--gap-M);
  padding-top: var(--gap-M);
} /*TODO: add class .modal_block to overcome styling issues */

.total-column-header {
  background-color: var(--table_total-background-1);
}

.table_pivot .dx-datagrid-headers .dx-row {
  border-bottom: 1px solid var(--stroke-2);
}

/* .table_pivot .dx-datagrid-headers .dx-datagrid-content, */
.dx-datagrid-headers .dx-datagrid-content {
  border-bottom: 1px solid var(--stroke-2);
}

.table_pivot:not(.dx-total-grid) .dx-row {
  background-color: var(--table_cell-background-2);
}

.table_pivot:not(.dx-total-grid) td.total-column {
  background-color: var(--table_total-background-1);
}

.table_pivot .dx-row > td:first-of-type {
  padding-left: var(--gap-M); /* doesn't work */
}

.table_pivot .dx-row > td:last-of-type {
  padding-right: var(--gap-M);
}

.dx-cell-modified {
  font-weight: bold;
}

.table_pivot.dx-total-grid .dx-row {
  background-color: var(--table_total-background-1);
}

.table_pivot.dx-total-grid td.total-column {
  background-color: var(--table_total-background-2);
}

.dx-popup-wrapper > .dx-overlay-content {
}

.dx-overlay-shader > .dx-overlay-content {
  border-radius: 4px;
}

.dx-popup-title {
  background-color: var(--surface-4);
  border-bottom: 0 none;
}

.dx-popup-title.dx-toolbar .dx-toolbar-label {
  font-size: var(--text-M);
  font-weight: bold;
  line-height: var(--line-height-M);
}

.dx-popup-title .dx-icon {
  color: var(--body-text-color);
}

/*End OWPFIlterModal.js*/
.dx-popup-title .dx-icon {
  color: var(--body-text-color);
}

/* TODO: Calendar overlay - to unify styling for component: 
- either .calendar_popup has to be default wrapper everywhere (rename to .popup_container)
- OR .calendar_toolbar has to be rendered in .dx-calendar, thus removing the need for .calendar_popup wrapper 
*/
.calendar_popup {
  background-color: var(--surface-1);
  border: 1px solid var(--stroke-1);
  border-radius: 2px;
  box-shadow: var(--shadow-1);
  padding-top: var(--gap-S);
  position: absolute;
  z-index: 1050; /* TODO: when commenting out z-index popup hides under the table result, investigate and tweak z-index to lower value */
}

.calendar_popup:has(.popup_toolbar) {
  padding-top: 0;
}

.calendar_popup > .dx-calendar {
  background-color: transparent;
  border: 0 none;
  border-radius: 0;
  box-shadow: none;
  padding-top: 0;
}

.calendar_popup .dx-list-search {
  margin-left: var(--gap-S);
  margin-right: var(--gap-S);
} /* TODO: change parent class to dropdown generic in all instances */

/* From DFIStyle.css */
/* For WebKit based browsers (Chrome, Safari, etc.) */
::-webkit-scrollbar {
  width: 15px;
  height: 15px;
  padding-left: 4px;
}
::-webkit-scrollbar-thumb {
  background: #000;
}
::-webkit-scrollbar-thumb:hover {
  background: #2d2d2d;
}
::-webkit-scrollbar-track {
  background: var(--owp-beige);
}
/* For Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #000 var(--owp-beige);
}
*::-moz-scrollbar-thumb {
  background: #000;
}
*::-moz-scrollbar-thumb:hover {
  background: #2d2d2d;
}
*::-moz-scrollbar-track {
  background: var(--owp-beige);
}

#auditInput{
  min-width: 284px;
  /*
  font-size:  0.75em;
  color: #A1978F;
  border: 1px solid #707070;
  padding-left: 0.5rem;
  */
}

/* testing without this rule 
  .dx-overlay-wrapper, .dx-overlay-wrapper *,
  .dx-overlay-wrapper ::after, 
  .dx-overlay-wrapper ::before,
  .dx-overlay-wrapper::after, 
  .dx-overlay-wrapper::before {
      z-index: 10000 !important;   
  }
  */

  /* Super hacky way to adjust spacing / hide external logic toolbar */
  .container_block:has(.toolbar) {
    margin-top: var(--gap-ML);
  }

    .container_block:has(.dpc-external-logic-wrapper) .toolbar { 
      margin-bottom: 0;
    }

  .container_block:has(.toolbar-element:empty) {
    display: none;
  } /* TODO: 
    1. Place <div class="toolbar">...</div> outside of <section class="container_block">...</section> and delete <section> 
    2. Place modal box template near the end of </body> tag, inject content (title, modal window body) to the modal box
    3. Clean up HTML and CSS
  */
/* experimental */
  .resize-handle {
    width: 5px;
    height: 5px;
    background: rgba(0, 0, 0, 0);
    position: absolute;
    bottom: 0;
    right: 0;
    cursor: nwse-resize;
    border-radius: 2px;

    /* WIP */
    display: none;
  }

 /* OLD stylesheets DFIStyles.css causing tooltip to be above .popup_container */ 
  .dxc-tooltip {
    z-index: 4 !important;
  }
    /* Bad way to fix it, but it works for now */
    .dxc-tooltip * {
      font-family: var(--font-family-default);
    } /* TODO: Find where is Segoe UI font set (possibly inline in vue bundle), and remove it */

    .popup_container .form_item_label {
      width: auto;
    } /* TODO: delete once filter_box is sorted, remove width: 100% in styles.css */


    .dx-dropdowneditor-input-wrapper {
      flex: 1 1 auto;
    } /*TODO: aligns the dx-select to stretch full width of container, TEST */

/*
#5391 - modal height is hardcoded, but inner elements aren't responsive properly. 
#5466 - Modal and Popup using same classes
#5473 - Table filter Popup
 TODO: 
  1. Align all modals, create a unified HTML structure without DevExtreme in GlobalModal.js, delete below. 
  2. Separate HTML structure and CSS classes for Modal and Popup */
.dx-overlay-shader .dx-overlay-content,
.dx-overlay-shader .dx-overlay-content .dx-popup-content {
  height: auto !important;
 }
/* TODO: Clean up AddMultiRows.js, align all to top, delete below */
.mass-progress-bar + section {
  height: 440px;
  margin-bottom: auto !important;
  overflow-y: auto !important;
}
.popup-body {
  min-height: 100px;
} /* TODO: remove after modals alignment */

/* #5266 - link color inherited from bootstrap.css in other apps */
.navigation-item_block,
.navigation-item_block:hover {
  text-decoration: none;
  color: var(--body-text-color);
} /*TODO: remove color and underline from anchor tag, or remove bootstrap, then delete above */