@charset "UTF-8";
/**
* Description: Overrides until better permanent solutions are implemented
* Author: Luka Ivas
* Last update: Wed, May 28 2025
* Version: 25.6
*/

/* 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: inherit; /* 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,
.dx-datagrid-headers .dx-row {
  background-color: var(--table_head-background) !important;
} /* [FIXED] #5676 - Roxtec Demand review table > Header > second row getting colored from .dx-row */

.dx-header-row > td {
  border-bottom: 1px solid var(--stroke-1);
}
/* TODO: figure out limitation for generic-universal table cell max-width, either CSS or config */

.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);
  white-space: normal;
} /* [FIXED] tripple grid height in S&OP #5469 - override in SolveGaps.css */

/* #6108 */
#genSetGrid .dx-row > td {
  white-space: nowrap;
}
/* TODO: Replace admin tables with basic table, then remove */

/* QUICKFIX for editable columns in basic_table and pivot_grid when text in column wraps */
.dx-row > td:has(.dx-texteditor) {
  padding-bottom: 0;
  padding-top: 0;
  vertical-align: top !important;
}

.dx-datagrid-rowsview .dx-texteditor-input {
  min-height: 40px;
}

.is-editable {
  transition: background-color var(--animation-300);
}

.is-editable:has(input) {
  background-color: var(--neutral-100) !important;
}

/* TODO: clean up */

.dx-row > td:first-of-type,
.table_pivot .dx-row > td:nth-of-type(2) {
  padding-left: var(--gap-M);
  /* background-color: red !important; */
}

.dx-row > td:last-of-type {
  padding-right: var(--gap-M);
  vertical-align: middle;
  white-space: nowrap;
  /* background-color: red !important; */
}

.dx-row > td:last-of-type .table-data-control {
  justify-content: flex-end;
}

.dx-master-detail-row .table-control,
.dx-master-detail-row .table-control button,
.dx-master-detail-row .dx-row > td {
  font-size: var(--text-S);
}

.dx-master-detail-row .dx-row > td:last-of-type {
  /* background-color: yellow !important; */
  text-align: left;
  white-space: normal;
}

.audit-grid .dx-row > td:last-of-type {
  /* background-color: green !important; */
  padding-right: var(--gap-M);
  white-space: normal;
}

.is-code[role="gridcell"] {
  font-family: var(--font-family-code);
  font-size: var(--text-S);
} /* TODO: make it a wrapper around the code, remove role, move to helpers */

.dx-row > td:last-of-type .table-control {
  justify-content: flex-end;
}

.dx-master-detail-row .dx-row > td:last-of-type .table-control {
  justify-content: flex-start;
}

.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*/

/* From audit.css */
.dx-datagrid-rowsview .dx-row > .dx-master-detail-cell {
  padding: 0;
}

.dx-master-detail-row .dx-datagrid tr:not(.dx-row-alt) > td,
.dx-datagrid tr:not(.dx-row-alt) > tr > td {
  background-color: var(--table_background-head);
}

.dx-master-detail-row .dx-datagrid tr.dx-header-row > td,
.dx-master-detail-row .dx-datagrid tr.dx-header-row > tr > td,
.dx-master-detail-row tr.dx-row.dx-column-lines.dx-header-row {
  background-color: #f2f2f2;
}
.dx-master-detail-row .dx-datagrid .dx-header-row > td {
  box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.5) inset;
  -webkit-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.5) inset;
  -moz-box-shadow: 0px 10px 10px -10px rgba(0, 0, 0, 0.5) inset;
}
.dx-master-detail-row .dx-datagrid .dx-data-row:nth-last-child(2) > td {
  box-shadow: 0px -6px 10px -10px rgba(0, 0, 0, 0.25) inset;
  -webkit-box-shadow: 0px -6px 10px -10px rgba(0, 0, 0, 0.25) inset;
  -moz-box-shadow: 0px -6px 10px -10px rgba(0, 0, 0, 0.25) inset;
}
/* TODO: revise */
/* end of audit.css */

.dx-overlay-shader .dx-popup-content {
  box-sizing: border-box;
  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 */
.dx-datebox-calendar .dx-dropdowneditor-icon::before {
  content: "\f108" !important;
  font-family: "Opticons" !important;
} /*TODO: remove when custom dropdown is implemented */

/* 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);
}
/* 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(.dpc-external-logic-wrapper) .toolbar {
  margin-bottom: 0;
}

.container_block:has(.toolbar-element:empty):has(.dpc-external-logic-wrapper) {
  display: none;
} /* TODO: 
.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 */
/* 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 */
.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 */
.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:not(#massCreationPopupId):not(#chartComponentPopupId):has(.dx-overlay-content) .dx-overlay-content,
.dx-overlay-shader:not(#massCreationPopupId):not(#chartComponentPopupId):has(.dx-overlay-content)
  .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 */

/* Notification center top navbar added margin from Bootstrap */
.top_navbar ol:not(.form_message) {
  margin-bottom: 0;
}
/* TODO: remove when bootstrap.css and _reboot.css is removed */

/* From NotificationsCentre.css */

#notificationCentreApp h1 {
  color: white;
  padding-top: 35px;
  padding-bottom: 20px;
  font-size: 45px;
}

#notificationCentreApp h6 {
  margin-bottom: 25px;
}

.owp-notif-none {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  text-align: center;
}

.owp-notif-none-icon-big {
  height: 190px;
  width: 190px;
}

#notificationCentreApp .owp-notif-sidebar {
  background: white;
  min-height: calc(100vh - 390px);
}

.owp-notif-list {
  overflow-y: auto;
  position: relative;
  height: 100%;
  margin-top: var(--gap-S);
  display: flex;
  flex-direction: column;
  gap: var(--gap-XS);
}

#notificationCentreApp .owp-btn-filter {
  display: flex;
  /*margin-bottom: 20px; */
}
#notificationCentreApp .owp-btn-filter {
  display: flex;
  /*margin-bottom: 20px; */
}

#notificationCentreApp .owp-notif-icon {
  height: 50px;
  width: 50px;
}
#notificationCentreApp .owp-notif-icon {
  height: 50px;
  width: 50px;
}

#notificationCentreApp .owp-notif-icon-big {
  height: 90px;
  width: 90px;
}
#notificationCentreApp .owp-notif-icon-big {
  height: 90px;
  width: 90px;
}

#notificationCentreApp .owp-notif-title {
  font-size: 16px;
  margin-left: 0;
}
#notificationCentreApp .owp-notif-title {
  font-size: 16px;
  margin-left: 0;
}

#notificationCentreApp .owp-notif-body {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 5px;
}
#notificationCentreApp .owp-notif-body {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 5px;
}

#notificationCentreApp .owp-notif-filter-btn {
  text-align: center;
}
#notificationCentreApp .owp-notif-filter-btn {
  text-align: center;
}

#notificationCentreApp .owp-notif-filter-btn:not(:last-child) {
  margin-right: 10px;
}

#notificationCentreApp .owp-notif-col {
  padding-left: 0;
}
#notificationCentreApp .owp-notif-filter-btn:not(:last-child) {
  margin-right: 10px;
}

#notificationCentreApp .owp-notif-col {
  padding-left: 0;
}

#notificationCentreApp .owp-notif-new-hidden {
  visibility: hidden;
}
#notificationCentreApp .owp-notif-new-hidden {
  visibility: hidden;
}

#notificationCentreApp .col-1 {
  padding-left: 0;
}
#notificationCentreApp .col-1 {
  padding-left: 0;
}

#notificationCentreApp .col {
  padding-left: 50px;
  width: min-content;
  height: calc(100vh - 560px);
  overflow: auto;
}
#notificationCentreApp .col {
  padding-left: 50px;
  width: min-content;
  height: calc(100vh - 560px);
  overflow: auto;
}

#notificationCentreApp .owp-dropdown-item {
  /* margin-right: 2px; */
}

#notificationCentreApp .owp-notif-active {
  /*
      border: solid;
      border-color: #a9b4b0;
    */
  background-color: var(--common_background--active);
}
/* TODO: Cleanup  and remove */

/* Tomas' styles for split_button */
.split-action_button .dx-button-mode-text .dx-button-content .dx-icon {
  font-size: 0.5rem;
}
.split-action_button.dx-dropdownbutton:not(.dx-dropdownbutton-has-arrow)
  .dx-button-has-icon:not(.dx-button-has-text)
  .dx-button-content {
  padding-left: 0px;
  padding-right: 0px;
}
.split-action_button .dx-button-has-icon .dx-icon {
  width: auto;
}
/* TODO: replace with .split_button HTML and CSS once we're aligned with that element */

/* BUG 5777 hit area fix */
.split-action_button.dx-dropdownbutton {
  padding-left: 0;
  padding-right: 0;
  width: 27px;
}

.split-action_button .dx-buttongroup {
  width: 100%;
}
.split-action_button .dx-buttongroup {
  width: 100%;
}
/* TODO: remove once DX button is replaced with custom HTML */

/* BAT_NEXT title above the table */
.grid-title {
  font-size: var(--text-size-450);
  margin-bottom: var(--gap-M);
  font-weight: bold;
} /* TODO: Redo with H3 element and generic class within Toolbar component */

/* Needed for Create notification US 5554, added by Martin S. */
.center_aligned_button_container {
  justify-content: center;
}
.form_bottom_margin {
  margin-bottom: var(--gap-S);
}

/*TODO: clean up Notifications center from these classes */

/* BUG 5928 background from useragent fix */
.action_button-alternative {
  background-color: transparent;
  transition: color var(--animation-300);
}

.action_button-alternative[data-action="delete"]:focus,
.action_button-alternative[data-action="delete"]:hover {
  color: var(--error);
}

/* TODO: change classname, define bg color */

.dx-datagrid-pager {
  column-gap: var(--gap-M);
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-bottom: var(--gap-XS);
  margin-top: var(--gap-S);
  row-gap: var(--gap-S);
  user-select: none;
  -webkit-touch-callout: none;
}

.dx-page-sizes {
  margin-right: auto;
}

.dx-page-sizes,
.dx-page-indexes {
  display: inline-flex;
  gap: var(--gap-XS);
}

.dx-pages {
  align-items: center;
  column-gap: var(--gap-M);
  display: flex;
  flex-wrap: wrap;
  row-gap: var(--gap-S);
}

.dx-pages .dx-info {
  color: var(--neutral-500);
  font-size: var(--text-S);
}

.dx-page,
.dx-page-size {
  align-items: center;
  background-color: transparent;
  border: 1px solid var(--stroke-2);
  border-radius: 0;
  cursor: pointer;
  display: inline-flex;
  font-size: var(--text-S);
  height: var(--gap-L);
  justify-content: center;
  min-width: var(--gap-L);
  padding-bottom: 0;
  padding-left: var(--gap-S);
  padding-right: var(--gap-S);
  padding-top: 0;
  transition: background-color var(--animation-300);
}

.dx-page:hover,
.dx-page-size:hover {
  background-color: var(--common_background--hover);
}

.dx-page:active,
.dx-page:focus,
.dx-page-size:active,
.dx-page-size:focus {
  background-color: var(--common_background--active);
}

.dx-pager .dx-selection {
  background-color: var(--action_button-background--active);
  border: 1px solid var(--action_button-border--active);
  color: var(--action_button-color--active);
}

/* BUG 6006 */
textarea {
  resize: none;
} /* TODO: remove once all textareas have same html structure: .form_field > textarea  */

/*For general settings grid, need to visualise for application consultants that rows are set to be deleted in batch editing mode US #5771 */
#genSetGrid .dx-datagrid-rowsview .dx-row-removed {
  text-decoration: line-through;
}
/*TODO: replace admin tables with basic_table, make this rule generic

/* AddMultipleRows.js styles */
#massCreationPopupId .mass-input-wrapper {
  position: relative;
  padding-bottom: 1.3rem;
}
#massCreationPopupId .mass-validation-block {
  margin: 0;
  position: absolute;
  bottom: 0;
}
/* TODO: align modal structure, make modal containers generic then remove above */

.mass-section {
  overflow-y: hidden !important;
}

.toolbar_helper_text {
  align-items: center;
  display: flex;
  font-size: var(--text-S);
  gap: var(--gap-S);
  margin-bottom: var(--gap-S);
}

.toolbar_helper_text i {
  font-size: var(--text-M);
}
/* TODO: rewise error flow for basic table, then remove this */

/* From BAT_NEXT */

.grid-data-negative {
  background-color: var(--red-200);
}

.grid-data-neutral {
  background-color: var(--table_cell-background-2);
}

.grid-data-positive {
  background-color: var(--green-200);
}

.grid-summary-negative {
  background-color: var(--red-400) !important;
}

.grid-summary-neutral {
  background-color: var(--table_cell-background-2) !important;
}

.grid-summary-positive {
  background-color: var(--green-400) !important;
}

.grid-totalcol-negative {
  background-color: var(--red-300) !important;
}

.grid-totalcol-neutral {
  background-color: var(--table_cell-background-2);
}

.grid-totalcol-positive {
  background-color: var(--green-300) !important;
}

.total-grid-scroll-spacer {
  background: var(--table_total-background-1);
  z-index: 1;
}
/* TODO: revise the class naming and move back under helpers in styles.css once done */