:root {
  /* ratefinding rot */
  --color-primary: #cc0018;

  --color-white: #fff;
  --color-black: #000;

  --color-gray-100: #eee;
  --color-gray-200: #e8e8e8;
  --color-gray-300: #ddd;
  --color-gray-400: #ccc;
  --color-gray-450: #c4c4c4;
  --color-gray-500: #aaa;
  --color-gray-520: #979797;
  --color-gray-550: #a6a6a6;
  --color-gray-600: #999;
  --color-gray-700: #777;
  --color-gray-800: #696969;
  --color-gray-900: #444;

  --color-green-100: #acd7ac;
  --color-green-200: #97c777;
  --color-green-500: #3b3;
  --color-green-600: #009644;
  --color-green-700: #008000;

  --color-green-blue-100: #ced;
  --color-green-blue-200: #bed;
  --color-green-blue-300: #aecccc;

  --color-blue-100: #91bae3;
  --color-blue-500: #359ac1;
  --color-blue-700: #2e74b5;
  --color-blue-900: #00f;

  --color-yellow-500: #ff0;
  --color-yellow-600: #f0ea00;
  --color-yellow-700: #ffc000;
  --color-yellow-800: #f2b800;

  --color-yellow-red-100: #fed;

  --color-red-300: #a55;
  --color-red-500: #f00;
  --color-red-550: #ff696d;
  --color-red-600: #ea0000;
  --color-red-700: #b70016;

  --color-cyan-200: #5dffff;
  --color-cyan-300: #93ffff;
  --color-cyan-500: #00c5c0;
  --color-cyan-700: #00b0ac;


  /* Menü */
  --menue-color: var(--color-white);
  --menue-inactive-color: var(--color-gray-300);
  --menue-background-color: var(--color-primary);

  /* Buttons */
  --button-color: var(--color-white);
  --button-background-color: var(--color-primary);

  /* Accordion */
  --accordion-color: var(--color-white);
  --accordion-background-color: var(--color-primary);
  --accordion-background-color-hover: var(--color-red-300);

  /* Fehler & Validierung */
  --error-message-color: var(--color-primary);
  --color-not-allowed: var(--color-primary);
  --required-flag-color: var(--color-primary);
  --input-error-border-color: var(--color-primary);

  /* Formulare */
  --form-background-color: var(--color-gray-100);

  /* Inputs & Options & Selects */
  --input-background-color: var(--color-white);
  --input-disabled-color: var(--color-gray-800);
  --option-background-color: var(--color-gray-400);
  --option-background-color-selected: var(--color-green-100);
  --option-disabled-color: var(--color-gray-800);

  /* Rahmen & Borders */
  --border1-color: var(--color-gray-700);
  --border2-color: var(--color-gray-600);
  --border3-color: var(--color-gray-400);

  /* Tabellen */
  --table-header-background-color: var(--color-gray-400);
  --table-background-color-second-row: var(--color-gray-200);
  --table-background-color-selected: var(--color-green-blue-100);
  --table-background-color-selected-second-row: var(--color-green-blue-200);
  --table-background-color-selected-fixed-column: var(--color-green-blue-300);
  --table-background-color-sub-row: var(--color-yellow-red-100);
  --table-border-color: var(--color-gray-500);
  --table-border: 1px solid var(--table-border-color);

  /* Donut Status Colors with Active States */
  --color-donut-status-0: var(--color-gray-550);
  --color-donut-status-0-active: var(--color-gray-520);
  --color-donut-status-1: var(--color-white);
  --color-donut-status-1-active: var(--color-gray-100);
  --color-donut-status-2: var(--color-gray-100);
  --color-donut-status-2-active: var(--color-gray-300);
  --color-donut-status-3: var(--color-blue-700);
  --color-donut-status-3-active: var(--color-blue-900);
  --color-donut-status-4: var(--color-green-500);
  --color-donut-status-4-active: var(--color-green-600);
  --color-donut-status-5: var(--color-red-500);
  --color-donut-status-5-active: var(--color-red-600);
  --color-donut-status-6: var(--color-yellow-500);
  --color-donut-status-6-active: var(--color-yellow-600);
  --color-donut-status-7: var(--color-yellow-700);
  --color-donut-status-7-active: var(--color-yellow-800);
  --color-donut-status-8: var(--color-cyan-300);
  --color-donut-status-8-active: var(--color-cyan-200);
  --color-donut-status-9: var(--color-cyan-500);
  --color-donut-status-9-active: var(--color-cyan-700);
  --color-donut-status-10: var(--color-gray-400);
  --color-donut-status-10-active: var(--color-gray-450);
  --color-donut-status-11: var(--color-green-100);
  --color-donut-status-11-active: var(--color-green-200);
  --color-donut-status-12: var(--color-green-500);
  --color-donut-status-12-active: var(--color-green-600);
  --color-donut-status-13: var(--color-red-550);
  --color-donut-status-13-active: var(--color-red-550);
  --color-donut-status-14: var(--color-red-500);
  --color-donut-status-14-active: var(--color-red-600);
  --color-donut-status-15: var(--color-red-550);
  --color-donut-status-15-active: var(--color-red-550);
  --color-donut-status-16: var(--color-blue-100);
  --color-donut-status-16-active: var(--color-blue-100);

  /* Contract Status Colors */
  --color-contract-status-0: var(--color-gray-550);
  --color-contract-status-1: var(--color-white);
  --color-contract-status-2: var(--color-gray-100);
  --color-contract-status-3: var(--color-blue-700);
  --color-contract-status-4: var(--color-green-500);
  --color-contract-status-5: var(--color-red-500);
  --color-contract-status-6: var(--color-yellow-500);
  --color-contract-status-7: var(--color-yellow-700);
  --color-contract-status-8: var(--color-cyan-300);
  --color-contract-status-9: var(--color-cyan-500);
  --color-contract-status-10: var(--color-gray-400);
  --color-contract-status-11: var(--color-green-100);
  --color-contract-status-12: var(--color-green-500);
  --color-contract-status-13: var(--color-red-550);
  --color-contract-status-14: var(--color-red-500);
  --color-contract-status-15: var(--color-red-550);
  --color-contract-status-16: var(--color-blue-100);

  /* Autocomplete */
  --autocomplete-border-color: var(--color-gray-500);
}

.dummy-dummy {
  color: var(--input-background-color);
}

a {
  text-decoration: none;
}

.italic {
  font-style: italic;
}

.baseContainer {
  display: flex;
  flex-direction: column;
  height: 98%;
  font: 11px/11px Arial, sans-serif;
}

.ratefindingHeader {
  display: flex;
  flex-direction: row;
  margin: 10px 10px 5px;
}

.ratefindingHeader > div {
  display: flex;
  flex-direction: column;
  margin: 0 0 0 auto;
}

.ratefindingLanguages {
  margin: auto 0 0 auto;
}

.ratefindingLanguages .languages,
.printLanguages .languages,
.rejectionDialog,
.contractCopyDialog {
  display: flex;
}

.ratefindingLanguages .languages > div,
.printLanguages .languages > div {
  margin-left: 5px;
}

td.action.horizontal > div {
  display: flex;
  flex-direction: row;
}

td.action.horizontal > div > div {
  padding: 3px 2px 2px 2px;
  margin-right: 3px;
}

td.action.horizontal > div > * {
  margin-right: 5px;
}

td.action.horizontal > div > div:last-child {
  padding-right: 0;
}

.in-one-row {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.building-block-data-table-layout .in-one-row {
  display: inline;
}

.logoLogin {
  margin: 0 0 auto auto;
  outline: none;
}

.ratefindingTab {
  display: flex;
  flex-direction: row;
  align-items: center;
  min-height: 16px;
}

.ratefindingMenu {
  display: flex;
  flex-direction: row;
  align-items: center;
  background: var(--menue-background-color) !important;
  min-height: 29px;
  margin: 0 10px;
  position: sticky;
  top: 0;
  z-index: 10;
}

.ratefindingMenu + div {
  background-color: var(--menue-color) !important;
  margin: 0 10px;
  height: 11px;
  position: sticky;
  top: 29px;
  z-index: 3;
}

.ratefindingMenu .tabItem {
  font: 13px/13px Arial, sans-serif;
  color: var(--menue-inactive-color);
  text-transform: uppercase;
  white-space: nowrap;
  padding: 0 6px;
}

.ratefindingMenu .tabItem:nth-of-type(1) {
  margin-left: 4px;
}

.tabItem.hide {
  display: none;
}

.tabItem:hover,
.tabItem.selected {
  color: var(--menue-color);
  padding: 8px 6px;
  background-color: var(--border1-color);
}

.ratefindingPage {
  flex-grow: 1;
  padding: 0 10px 10px 10px;
}

.ratefindingTable {
  height: fit-content;
  max-height: 70vh;
  overflow: auto;
  max-width: 100%;
  border-left: var(--table-border);
  z-index: 1;
  position: relative;
}

.userGroupSearchCompanyDialog .ratefindingTable {
  max-height: 50vh !important;
}

.ratefindingTable > table {
  border-collapse: separate;
  border-spacing: 0;
  padding-right: 5px;
}

.ratefindingTable > table > thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

.ratefindingTable > table > thead > tr > th {
  font-weight: inherit;
  line-height: 1.4;
  min-width: 10px;
  padding: 4px;
  background-color: var(--table-header-background-color);
  border-right: var(--table-border);
  border-bottom: var(--table-border);
  text-align: left;
  vertical-align: top;
  text-transform: uppercase;
  position: relative;
}

.ratefindingTable > table > thead > tr > th[data-column-key] {
  padding-right: 16px;
}

.ratefindingTable > table > thead > tr:first-of-type > th {
  border-top: var(--table-border);
}

.ratefindingTable > table > tbody > tr > td {
  padding: 4px;
  border-right: var(--table-border);
  border-bottom: var(--table-border);
  position: relative;
  height: fit-content;
}

.ratefindingTable > table:not(.explicit-zebra) > tbody > tr:nth-child(2n) {
  background-color: var(--table-background-color-second-row);
}

.ratefindingTable > table:not(.explicit-zebra) > tbody > tr:nth-child(2n+1).selected {
  background-color: var(--table-background-color-selected);
}

.ratefindingTable > table:not(.explicit-zebra) > tbody > tr:nth-child(2n).selected {
  background-color: var(--table-background-color-selected-second-row);
}

.ratefindingTable > table.explicit-zebra > tbody > tr {
  background-color: inherit;
}

.ratefindingTable > table.explicit-zebra > tbody > tr.odd {
  background-color: var(--table-background-color-second-row);
}

.ratefindingTable > table.explicit-zebra > tbody > tr.selected {
  background-color: var(--table-background-color-selected);
}

.ratefindingTable > table.explicit-zebra > tbody > tr.odd.selected {
  background-color: var(--table-background-color-selected-second-row);
}

.ratefindingTable > table > tbody > tr.active-row {
  background-image: linear-gradient(var(--table-header-background-color) 0%, transparent 50%, var(--table-header-background-color) 100%);
}

.ratefindingTable > table > tbody > tr.sub {
  background-color: var(--table-background-color-sub-row);
}

.ratefindingTable > table > thead > tr > th.column-fixed,
.ratefindingTable > table > tbody > tr > td.column-fixed {
  background-color: var(--table-header-background-color);
  position: sticky;
  z-index: 1;
}

.ratefindingTable > table > tbody > tr.selected > td.column-fixed {
  background-color: var(--table-background-color-selected-fixed-column);
}

.ratefindingTable > table > thead > tr > th > div.rowOrderCount {
  display: none;
  position: absolute;
  width: 6px;
  height: 10px;
  right: 9px;
  font-size: 9px;
  text-align: right;
  color: var(--color-black);
  top: 1px;
}

.ratefindingTable > table > thead > tr > th[class^="rowOrder"] > div.rowOrderCount {
  display: flex;
}

.ratefindingTable > table > thead > tr > th[class^="rowOrder1"] > div.rowOrderCount::before {
  content: "1";
}

.ratefindingTable > table > thead > tr > th[class^="rowOrder2"] > div.rowOrderCount::before {
  content: "2";
}

.ratefindingTable > table > thead > tr > th[class^="rowOrder3"] > div.rowOrderCount::before {
  content: "3";
}

.ratefindingTable > table > thead > tr > th > div.rowOrderButton {
  position: absolute;
  color: var(--form-background-color);
  width: 10px;
  height: 10px;
}

.ratefindingTable > table > thead > tr > th[class^="rowOrder"] > div.rowOrderButton:hover,
.ratefindingTable > table > thead > tr > th[class*="rowOrder"][class$="asc"] > div.rowOrderButton.orderAsc,
.ratefindingTable > table > thead > tr > th[class*="rowOrder"][class$="desc"] > div.rowOrderButton.orderDesc {
  color: var(--color-black);
}

.ratefindingTable > table > thead > tr > th > div.rowOrderButton.orderAsc {
  top: 1px;
  right: 1px;
}

.ratefindingTable > table > thead > tr > th > div.rowOrderButton.orderDesc {
  top: 10px;
  right: 1px;
}

.ratefindingTable > table.hideRowOrderButtons > thead > tr > th > div.rowOrderCount,
.ratefindingTable > table.hideRowOrderButtons > thead > tr > th > div.rowOrderButton {
  display: none;
}

.ratefindingTable > table > thead > tr > th > div.columnOrderButton {
  display: none;
  position: absolute;
  width: 10px;
  height: 10px;
}

.ratefindingTable > table > thead > tr > th:hover > div.columnOrderButton {
  display: flex;
  color: var(--form-background-color);
}

.ratefindingTable > table > thead > tr > th:hover {
  color: var(--color-gray-500);
}

.ratefindingTable > table > thead > tr > th > div.columnOrderButton:hover {
  color: var(--color-black);
}

.ratefindingTable > table > thead > tr > th > div.columnOrderButton.moveLeft {
  bottom: 1px;
}

.ratefindingTable > table > thead > tr > th > div.columnOrderButton.moveRight {
  bottom: 1px;
  left: 13px;
}

.ratefindingTable > table > thead > tr > th > div.columnOrderButton.fix {
  top: 1px;
}

.ratefindingTable > table > thead > tr > th > div.columnOrderButton.unfix {
  top: 1px;
  left: 1px;
}

.ratefindingTable .last-column-fixed > thead > tr > th:last-child,
.ratefindingTable .last-column-fixed > tbody > tr > td:last-child {
  position: sticky;
  right: 0;
  border-left: var(--table-border);
}

.ratefindingTable .last-column-fixed th:nth-last-child(2),
.ratefindingTable .last-column-fixed td:nth-last-child(2) {
  border-right: none;
}

.finalSelectionTable .ratefindingTable > table > thead > tr > th input {
  min-width: 60px;
}

.action-grid {
  border-collapse: collapse;
}

.ratefindingTable > table > tbody > tr > td.action {
  background-color: var(--table-header-background-color);
  vertical-align: top;
}

.ratefindingTable > table > tbody > tr > td.action > * {
  padding: 1px !important;
}

.action-grid tr {
  height: 16px;
}

.action-grid:hover td {
  opacity: 0.2;
}

.action-grid td:hover {
  opacity: 1;
}

.servicesTotal {
  text-align: right;
}

.building-block-table-wrapper {
  overflow: auto;
}

.no-text-selection {
  user-select: none;
}

.rowNumber {
  text-align: right;
}

.lastChangedContractStatus {
  font-weight: bold;
  margin: 15px 0;
}

.accordionDummy.fixedHeader,
.accordion.fixedHeader.accordionActive {
  position: sticky;
  z-index: 3;
  top: 40px;
}

.tenderInfo ~ .accordionDummy.fixedHeader,
.tenderInfo ~ .accordion.fixedHeader.accordionActive {
  top: 71px;
}

.tenderInfo ~ .sourceTenderInfo ~ .accordion.fixedHeader.accordionActive {
  top: 101px;
}

.accordion.fixedHeader.accordionActive.masterDataDetails ~ .accordion.fixedHeader.accordionActive {
  top: 70px;
}

.accordion.contract {
  text-transform: none;
  white-space: nowrap;
}

.action button {
  margin-left: 5px;
}

.action button:first-child {
  margin-left: 0;
}

.contractAction,
.tableActionButtons,
.preSelectionButtons,
.actionButtons {
  padding: 0 0 4px 4px;
  background-color: var(--border1-color);
}

.newButtonContainer {
  padding-top: 5px;
}

.selectionContainer,
.preSelectionFilterContainer {
  background-color: var(--border1-color);
}

.filterButtons,
.filterActionButtons {
  padding: 0 0 4px 4px;

  /* background-color: rgba(0, 0, 0, 0); */
}

.filterButton,
.removeFilterButton {
  text-shadow: 0 0 2px var(--color-black);
}

td.action.horizontal:hover > div > *,
.resultsButtons:hover button,
.contractAction:hover button,
.tableActionButtons:hover button,
.actionButtons:hover button,
.filterButtons:hover button,
.filterActionButtons:hover button {
  opacity: 0.2;
}

td.action.horizontal > div > *:hover,
.resultsButtons button:hover,
.contractAction button:hover,
.tableActionButtons button:hover,
.actionButtons button:hover,
.filterButtons button:hover,
.filterActionButtons button:hover {
  opacity: 1;
}

.tableActionButtons {
  padding: 0;
}

.preSelectionButtons,
.finalSelectionButtons {
  background-color: var(--border1-color);
  padding: 0;
}

.preSelectionButtons table,
.finalSelectionButtons table {
  width: 100%;
}

.preSelectionButtons table td,
.finalSelectionButtons table td {
  text-transform: uppercase;
  font-size: 13px;
  border: none;
  color: var(--menue-color);
}

.preSelectionButtons table td:nth-of-type(2),
.finalSelectionButtons table td:nth-of-type(2) {
  text-align: right;
  padding-right: 10px;
}

.preSelectionButtons select,
.finalSelectionButtons select {
  border: none;
  height: 21px;
}

.fixedPanelActions {
  background-color: var(--border1-color);
  position: sticky;
  top: 70px;
  min-height: 20px;
  z-index: 2;
}

#selectAssignedUserDialog .fixedPanelActions {
  background-color: unset;
  position: unset;
  min-height: unset;
}

#selectAssignedUserDialog .border2 {
  border: none;
}

#selectAssignedUserDialog .formLayout > table > tbody > tr > td {
  border: none;
}

.tenderInfo ~ * .fixedPanelActions {
  top: 101px;
}

.tenderInfo ~ .sourceTenderInfo ~ * .fixedPanelActions {
  top: 129px;
}

.filterButtons {
  z-index: 2;
  position: relative;
}

.filterButtons button {
  padding-right: 5px;
}

.fsSelectedFilter {
  padding-bottom: 5px;
}

.contractAction br {
  background-color: var(--form-background-color);
}

div > button {
  background-color: var(--button-background-color);
  color: var(--color-white);
  text-transform: uppercase;
  border: 0;
  padding: 2px 4px;
  transition: transform 0.2s;
  margin-right: 5px;
  cursor: pointer;
}

div.bbLayout > button {
  margin-bottom: 5px;
}

div.bbLayout {
  background-color: var(--form-background-color);
}

dialog button:last-child {
  margin-right: 2px;
}

.logoutButton {
  margin-right: 0;
}

button:hover {
  transform: scale(1.1);
}

.button-borderless {
  border: none;
  padding: 0;
  background: none;
  outline: none;
}

.contractAction button {
  display: none;
}

.errorMessage,
.redMessage {
  color: var(--error-message-color);
  font-weight: bold;
}

.inputError {
  border: 2px solid var(--input-error-border-color);
  width: fit-content;
}

.required::after {
  content: "*";
  color: var(--required-flag-color);
  padding-left: 2px;
  position: relative;
  top: -3px;
}

/* -------------- TenderInfo -------------- */

.tenderInfo table,
.sourceTenderInfo table {
  border-collapse: collapse;
  border-spacing: 0;
}

.tenderInfo,
.sourceTenderInfo {
  padding-left: 10px;
  background-color: var(--border1-color);
  color: var(--accordion-color);
  border-bottom: 1px solid var(--border3-color);
  display: flex;
  align-items: center;
  min-height: 30px;
  position: sticky;
  top: 40px;
  z-index: 4;
  white-space: nowrap;
}

.sourceTenderInfo {
  top: 71px;
}

.header {
  width: 100%;
}

.infoKey {
  padding-right: 20px;
  font-size: 13px;
  text-transform: uppercase;
  cursor: default;
  width: 8%;
  display: inline-table;
  white-space: nowrap;
}

.infoRow {
  font-size: 13px;
  cursor: default;
}

.infoLabel {
  text-transform: uppercase;
}

.infoValue {
  padding-right: 20px;
  padding-left: 2px;
}

.infoPart:first-child {
  width: 180px;
  display: inline-block;
}

/* -------------- TenderInfo end -------------- */

/* -------------- rfp accordion -------------- */

.accordion {
  background-color: var(--accordion-background-color);
  color: var(--accordion-color);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  padding: 10px;
  transition: 0.4s;
  text-transform: uppercase;
  line-height: 10px;
}

.accordion:not(.accordionDummy):hover {
  background-color: var(--accordion-background-color-hover);
}

/* separator lines (not on top, at the end and after open) */
.accordion.accordionActive + .accordionPanel + .accordion.accordionActive,
:not(.accordion.accordionActive) + .accordionPanel + :not(.accordion.accordionActive),
.subAccordion.subAccordionActive + .subAccordionPanel + .subAccordion.subAccordionActive,
:not(.subAccordion.subAccordionActive) + .subAccordionPanel + :not(.subAccordion.subAccordionActive) {
  border-top: 1px solid var(--border3-color);
}

.accordionActive {
  background-color: var(--border1-color);
}

.accordion::after,
.subAccordion::after {
  content: "\e902";
  transform: rotate(90deg);
  color: var(--color-gray-100);
  float: right;
  margin-left: 5px;
  font-family: ratefinding-icons, sans-serif !important;
  font-size: 0.8em;
}

.accordionPanel {
  display: none;
  transition: max-height 0.2s ease-out;
  border-bottom: 5px solid var(--border1-color);
}

.accordionPanel > div {
  border: 5px solid var(--border1-color);
  border-top: 0;
  border-bottom: 0;
}

.accordionDummy {
  background-color: var(--border1-color);
  color: var(--accordion-color);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  padding: 10px;
  text-transform: uppercase;
  line-height: 10px;
}

/* -------------- rfp accordion end -------------- */

/* -------------- contract/feature/filter accordion -------------- */

.subAccordion {
  background-color: var(--accordion-background-color);
  color: var(--accordion-color);
  cursor: pointer;
  text-align: left;
  font-size: 13px;
  padding: 10px;
  transition: 0.4s;
  text-transform: uppercase;
  line-height: 10px;
}

.subAccordion:not(.subAccordionDummy):hover {
  background-color: var(--color-red-300);
}

.filterAccordionActive,
.subAccordionActive {
  background-color: var(--border2-color);
}

.subAccordionPanel {
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.subAccordionPanel > div {
  border: 5px solid var(--border2-color);
  border-top: 0;
}

/* -------------- contract/feature/filter accordion end -------------- */

.accordionDummy::after,
.subAccordionDummy::after,
.contractHistory .accordion::after,
.contractHistory .subAccordion::after {
  content: none;
}

.contractHistory .accordion:hover {
  background-color: var(--border1-color);
}

.contractHistory .subAccordion:hover {
  background-color: var(--border2-color);
}

.contractHistory .accordion.contract.accordionActive {
  top: 28px;
}

.contractHistory .tenderInfo {
  top: 0;
}

.border1 {
  border: 5px solid var(--border1-color);
  border-top: none;
}

.border2 {
  border: 5px solid var(--border2-color);
}

.formLayout {
  background-color: var(--border3-color);
}

dialog .formLayout {
  background-color: unset;
}

.formLayout > table {
  table-layout: fixed;
  width: 100%;
  border-collapse: collapse;
}

dialog .formLayout > table {
  width: unset;
}

.formLayout table.small {
  width: unset;
}

.formLayout table td.key {
  padding-right: 10px;
}

.formLayout > table > tbody > tr > td {
  vertical-align: top;
  background-color: var(--form-background-color);
  border: 5px solid var(--border3-color);
  border-bottom: none;
  padding: 0;
}

dialog .formLayout > table > tbody > tr > td {
  border: none;
}

.formLayout.section > table > tbody > tr > td,
.formLayout:last-of-type > table > tbody > tr > td {
  border-bottom: 5px solid var(--border3-color);
}

dialog .formLayout:last-of-type > table > tbody > tr > td {
  border: none;
}

.formLayout > table > tbody > tr > td.dummy {
  background-color: var(--border3-color);
}

.formLayout > table > tbody > tr > td h1 {
  font-size: 12px;
  font-weight: normal;
  background-color: var(--border3-color);
  text-transform: uppercase;
  cursor: default;
  padding: 4px;
  margin: 0;
}

.formLayout > table > tbody > tr > td > div.bbName {
  font-size: 12px;
  background-color: var(--border3-color);
  text-transform: uppercase;
  cursor: default;
  padding: 5px 0 5px 2px;
}

.formLayout > table > tbody > tr > td > div.bbLayout {
  padding: 6px;
  background-color: var(--form-background-color);
  height: 100%;
  overflow: auto;
}

.formLayout > table > tbody > tr > td > div.bbLayout.tenderContainer,
.formLayout > table > tbody > tr > td > div.bbLayout.countryContainer,
.formLayout > table > tbody > tr > td > div.bbLayout.statusCbContainer,
.formLayout > table > tbody > tr > td > div.bbLayout.businessUnitCbContainer {
  height: 200px;
}

.contractStatusContainer.tm > .formLayout > table > tbody > tr > td > div.bbLayout.countryContainer {
  height: auto;
  max-height: 443px;
}

.formLayout.singlePage > table > tbody > tr > td > div.bbLayout {
  height: 73vh;
}

.formLayout > table > tbody > tr > td > div > table {
  border-spacing: 0;
}

.formLayout > table > tbody > tr > td > div.building-block-data-table-layout > table {
  width: 100%;
}

.formLayout > table > tbody > tr > td > div.building-block-data-table-layout > table > tbody > tr > td {
  vertical-align: top;
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td {
  padding: 0;
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > table {
  border-spacing: 0;
  margin-bottom: 3px;
  width: 100%;
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > table > tbody > tr > td {
  padding: 0;
  vertical-align: bottom;
  border-bottom: 1px solid var(--form-background-color);
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > table > tbody > tr > td.field {
  padding-right: 4px;
  vertical-align: baseline;
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > table > tbody > tr > td.field.autocompletion {
  position: absolute;
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > table > tbody > tr > td.field .text p {
  cursor: auto;
  user-select: none;
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > table > tbody > tr > td.label {
  width: 350px;
  border-bottom: 1px dotted var(--color-gray-600);
  text-transform: uppercase;
  line-height: 20px;
  cursor: auto;
  user-select: none;
  vertical-align: baseline;
}

dialog .formLayout:last-of-type > table > tbody > tr > td > div > table > tbody > tr > td > table > tbody > tr > td.label {
  border-bottom: none;
  vertical-align: top;
}

dialog td.label {
  width: 150px !important;
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > div > table > tbody > tr > td.label.dummy {
  border-bottom: 1px solid var(--color-gray-100);
}

.formLayout > table > tbody > tr > td > div > table > tbody > tr > td > table > tbody > tr > td.label.dummy.hidden {
  border-bottom: none;
}

.different {
  display: inline-block;
}

dialog .countries,
.userGroup .cities,
.userGroup .countries,
.userGroup .businessUnits,
.companyContact .businessUnits {
  max-height: 30vh;
  overflow: hidden scroll;
}

.userGroup .cities {
  max-height: 27vh;
}

/* -------------- Donut -------------- */

.contractStatusContainer {
  display: flex;
  flex-direction: row;
}

.explanationContainer {
  height: 443px;
  cursor: default;
}

.contractStatusChart {
  font-weight: bold;
  margin-bottom: 4px;
}

.donut {
  height: 441px;
}

.donut .segment {
  cursor: pointer;
  stroke-dashoffset: 0;
  fill: transparent;
  pointer-events: stroke;
}

.donut .shadow {
  fill: transparent;
  stroke: var(--color-white);
  filter: drop-shadow(1px 1px 1px rgb(0 0 0 / 40%));
  stroke-dashoffset: 0;
}

.donut .center-text {
  font-size: 0.3em;
  transform: translateY(0.5em);
  font-weight: bold;
  cursor: pointer;
}

.donut .segment-text {
  cursor: pointer;
  font-size: 0.3em;
  transform: translateY(0.5em);
}


.donut .status-0 {
  stroke: var(--color-donut-status-0);
}

.donut .status-1 {
  stroke: var(--color-donut-status-1);
}

.donut .status-2 {
  stroke: var(--color-donut-status-2);
}

.donut .status-3 {
  stroke: var(--color-donut-status-3);
}

.donut .status-4 {
  stroke: var(--color-donut-status-4);
}

.donut .status-5 {
  stroke: var(--color-donut-status-5);
}

.donut .status-6 {
  stroke: var(--color-donut-status-6);
}

.donut .status-7 {
  stroke: var(--color-donut-status-7);
}

.donut .status-8 {
  stroke: var(--color-donut-status-8);
}

.donut .status-9 {
  stroke: var(--color-donut-status-9);
}

.donut .status-10 {
  stroke: var(--color-donut-status-10);
}

.donut .status-11 {
  stroke: var(--color-donut-status-11);
}

.donut .status-12 {
  stroke: var(--color-donut-status-12);
}

.donut .status-13 {
  stroke: var(--color-donut-status-13);
}

.donut .status-14 {
  stroke: var(--color-donut-status-14);
}

.donut .status-15 {
  stroke: var(--color-donut-status-15);
}

.donut .status-16 {
  stroke: var(--color-donut-status-16);
}

.donut .status-0.active {
  stroke: var(--color-donut-status-0-active);
}

.donut .status-1.active {
  stroke: var(--color-donut-status-1-active);
}

.donut .status-2.active {
  stroke: var(--color-donut-status-2-active);
}

.donut .status-3.active {
  stroke: var(--color-donut-status-3-active);
}

.donut .status-4.active {
  stroke: var(--color-donut-status-4-active);
}

.donut .status-5.active {
  stroke: var(--color-donut-status-5-active);
}

.donut .status-6.active {
  stroke: var(--color-donut-status-6-active);
}

.donut .status-7.active {
  stroke: var(--color-donut-status-7-active);
}

.donut .status-8.active {
  stroke: var(--color-donut-status-8-active);
}

.donut .status-9.active {
  stroke: var(--color-donut-status-9-active);
}

.donut .status-10.active {
  stroke: var(--color-donut-status-10-active);
}

.donut .status-11.active {
  stroke: var(--color-donut-status-11-active);
}

.donut .status-12.active {
  stroke: var(--color-donut-status-12-active);
}

.donut .status-13.active {
  stroke: var(--color-donut-status-13-active);
}

.donut .status-14.active {
  stroke: var(--color-donut-status-14-active);
}

.donut .status-15.active {
  stroke: var(--color-donut-status-15-active);
}

.donut .status-16.active {
  stroke: var(--color-donut-status-16-active);
}

/* -------------- Donut end -------------- */

/* -------------- ContractStatus -------------- */

.explanationContainer table {
  min-width: 170px;
}

.explanationContainer tr.odd > td {
  background-color: var(--table-background-color-second-row);
}

.explanationContainer .contractStatus {
  font-weight: bold;
}

.contractStatusColorDiv {
  width: 15px;
  height: 15px;
}

.contractstatus-0 {
  background: var(--color-contract-status-0);
}

.contractstatus-1 {
  background: var(--color-contract-status-1);
}

.contractstatus-2 {
  background: var(--color-contract-status-2);
}

.contractstatus-3 {
  background: var(--color-contract-status-3);
}

.contractstatus-4 {
  background: var(--color-contract-status-4);
}

.contractstatus-5 {
  background: var(--color-contract-status-5);
}

.contractstatus-6 {
  background: var(--color-contract-status-6);
}

.contractstatus-7 {
  background: var(--color-contract-status-7);
}

.contractstatus-8 {
  background: var(--color-contract-status-8);
}

.contractstatus-9 {
  background: var(--color-contract-status-9);
}

.contractstatus-10 {
  background: var(--color-contract-status-10);
}

.contractstatus-11 {
  background: var(--color-contract-status-11);
}

.contractstatus-12 {
  background: var(--color-contract-status-12);
}

.contractstatus-13 {
  background: var(--color-contract-status-13);
}

.contractstatus-14 {
  background: var(--color-contract-status-14);
}

.contractstatus-15 {
  background: var(--color-contract-status-15);
}

.contractstatus-16 {
  background: var(--color-contract-status-16);
}

.ratefindingTable .contractStatus-common {
  background-repeat: no-repeat;
  background-position: center, center;
  float: left;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* -------------- ContractStatus end -------------- */

.cursor-pointer {
  cursor: pointer;
}

/* -------------- Country Selection -------------- */

.gridCountryContainer {
  display: grid;
  grid-template-rows: 10px 1fr 1fr;
  grid-gap: 10px;
}

.gridCountryContainer .filterTitle {
  padding-bottom: 10px;
  font-weight: bold;
  margin-left: 20px;
}

.pageDashboard .countryContainer {
  height: 443px;
}

.selectedCountryContainer {
  margin-left: 20px;
  width: 250px;
}

/* -------------- Country Selection end -------------- */

/* -------------- Tender Selection -------------- */

.tenderRef {
  cursor: pointer;
}

.selectedTenderContainer {
  margin-left: 20px;
  width: 350px;
}

.tenderContainer .multiCheckbox {
  width: 100%;
  height: 100%;
  overflow: auto auto;
}

/* -------------- Tender Selection end -------------- */

/* -------------- Final Selection -------------- */

.max-lines-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.row textarea {
  width: 206px;
  font: 11px/11px Arial, sans-serif;
  border: none;
  margin-right: 10px;
  height: 100%;
}

.row > td.qfsEditable[data-value=""] * {
  color: var(--color-gray-700);
}

.data-type-String {
  white-space: nowrap;
  overflow: hidden;
}

.data-type-SingleSelection {
  position: relative;
}

.preSelectionTable .data-type-SingleSelection select,
.finalSelectionTable .data-type-SingleSelection select {
  border: none;
  font-size: 12px;
  background-color: var(--input-background-color);
  padding: 4px 0 4px 2px;
  position: relative;
  left: -2px;
  min-width: fit-content;
}

.data-type-Boolean > div {
  background-repeat: no-repeat;
  background-position: center, center;
  width: 10px;
  margin-left: auto;
  margin-right: auto;
  cursor: pointer;
}

.row-pager {
  white-space: nowrap;
  cursor: default;
}

.row-pager td.button {
  padding: 0 8px;
  background-repeat: no-repeat;
  background-position: center;
}

.row-pager td.button.enabled {
  cursor: pointer;
}

.row-pager .button.enabled:hover,
.row-pager .button.selected {
  background-color: var(--color-gray-400);
  cursor: default;
}

.row-pager td.size.selection {
  padding-left: 20px;
  padding-right: 4px;
}

.row-pager td.size.selection select {
  width: 5em;
  border: none;
  background-color: white;
}

.row-pager td.button.disabled {
  opacity: 0.3;
}

.fsValueSaved * {
  color: var(--color-green-700);
}

.rowCount {
  padding: 10px 0;
  font-weight: bold;
}

.finalSelectionFilter {
  display: none;
}

.selectionFilter {
  display: none;
}

.contractedData {
  font-weight: bold;
}

.nonContractedData {
  color: gray;
}

.nonContractedData:hover {
  color: initial;
}

/* -------------- Final Selection end -------------- */

/* -------------- FS Workflow Log / Answer History - */

div.workflowLog,
div.answerHistory {
  position: absolute;
  left: calc(100% - 10px);
  top: calc(100% - 14px);
  width: 10px;
  height: 10px;
  z-index: 0;
}

div.workflowLog::before,
div.answerHistory::before {
  color: var(--color-gray-700);
  content: "?";
}

div.workflowLog:hover::before,
div.answerHistory:hover::before {
  color: var(--color-black);
  font-weight: bold;
}

/* -------------- FS Workflow Log / A ... end ------ */

/* -------------- Supplier Selection -------------- */

.filterField {
  margin: 2px;
}

.filterValue {
  border-radius: 15px;
  background-color: var(--color-gray-100);
  padding: 5px;
  box-shadow: 0 0 2px var(--color-black);
}

.filterValue .icon-cross {
  padding-left: 4px;
}

.filterParent {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 4px 0 4px 4px;
}

.filterLabel {
  text-transform: uppercase;
}

.supplierSelectionFilter {
  display: none;
  padding-bottom: 5px;
  background-color: var(--border1-color);
}

.filterCountryContainer,
.contractStatusFilterContainer {
  display: grid;
  grid-template-rows: 10px 1fr;
  grid-gap: 10px;
  padding-bottom: 10px;
}

.filterCountryContainer .filterTitle,
.contractStatusFilterContainer .filterTitle,
.businessUnitContainer .filterTitle,
.preselectionWorkflowContainer .filterTitle,
.finalSelectionWorkflowContainer .filterTitle {
  padding-bottom: 10px;
  font-weight: bold;
  margin-left: 20px;
}

.preWorkflowCbContainer,
.fsWorkflowCbContainer {
  height: 90px;
}

.selectedStatusContainer,
.selectedBusinessUnitContainer {
  margin-left: 20px;
  width: 250px;
}

.selectedPreWorkflowContainer,
.selectedFsWorkflowContainer {
  margin-left: 20px;
  width: 180px;
}

.countryContainer .multiCheckbox,
.statusCbContainer .multiCheckbox,
.businessUnitCbContainer .multiCheckbox,
.preWorkflowCbContainer .multiCheckbox,
.fsWorkflowCbContainer .multiCheckbox {
  width: 100%;
  height: 100%;
  overflow: auto auto;
}

/* -------------- Supplier Selection end -------------- */

/* ------------------------------------------------------------------ contractStructure */

.contractStructure {
  font: 11px/11px Arial, "Helvetica sans serif", sans-serif;
}

.tenderHeader,
.featureHeader {
  background-color: var(--border1-color);
  color: var(--accordion-color);
  padding: 2px 0 5px 2px;
}

.newOrganization,
.dualControl {
  color: darkred;
}

.formName {
  font-weight: bold;
  font-size: 20px;
  padding: 10px;
  background-color: lightsteelblue;
  text-align: center;
}

input,
textarea {
  border: none;
  line-height: 18px;
}

.field input {
  width: 141px;
}

input[type="checkbox"] {
  margin-left: 0;
  width: unset !important;
}

.pageUserAdministration input.email {
  width: 300px;
}

.row-filter th {
  position: relative;
}

.row-filter th:hover .clearInput {
  display: inline;
}

.row-filter .clearInput {
  display: none;
  position: absolute;
  top: 7px;
  right: 8px;
  color: var(--color-gray-700);
}

.rowFilterInput,
.bbTable input {
  width: calc(100% - 4px);
}

.bbTable {
  border-collapse: collapse;
}

.bbTable div {
  width: 100%;
}

.featureFilterContainer select,
.field select,
.answer-wrapper select {
  width: 145px;
  border: none;
  background-color: white;
  line-height: 18px;
  padding: 2px;
}

.button-selection .option,
.checkboxOption {
  cursor: pointer;
  user-select: none;
  background-color: var(--option-background-color);
  padding: 4px;
  text-transform: uppercase;
}

.button-selection.vertical {
  display: flex;
}

.button-selection.vertical .option {
  margin-right: 4px;
}

.button-selection.horizontal .option {
  margin-bottom: 4px;
}

.button-selection.vertical .option:last-child {
  margin: 0;
}

.button-selection:hover .option,
.checkbox:hover .checkboxOption {
  opacity: 0.5;
}

.button-selection .option:hover,
.checkbox .checkboxOption:hover {
  opacity: 1;
  transform: scale(1.1);
  background-color: var(--option-background-color-selected);
}

.button-selection.horizontal .option:hover {
  transform: none;
}

.button-selection .option.disabled,
.checkboxOption.disabled {
  opacity: 1 !important;
  transform: none !important;
  cursor: default;
  color: var(--option-disabled-color) !important;
  background-color: var(--option-background-color) !important;
}

.button-selection .option.disabled.selected,
.checkboxOption.disabled.selected {
  background-color: var(--option-background-color-selected) !important;
}

.button-selection .option.selected,
.checkboxOption.selected {
  background-color: var(--option-background-color-selected);
}

.user .button-selection .option {
  width: 200px;
}

.user .country select {
  width: 208px;
}

/* ------------------------------------------------------------------ contractStructure end */

/* ------------------------------------------------------------------ masterData */

.masterDataConfirmed dl {
  display: grid;
  grid-template-columns: max-content auto;
}

.masterDataConfirmed dt {
  grid-column-start: 1;
  font-weight: bold;
}

.masterDataConfirmed dd {
  grid-column-start: 2;
}

.masterData .buOverflow {
  height: 100px;
  overflow: auto auto;
}

/* ------------------------------------------------------------------ masterData end */

/* ------------------------------------------------------------------ attachmentHistory */

.attachmentHistoryFilter {
  display: grid;
  grid-template-columns: 50% 50%;
}

.attachmentConfirm.icon-releasedNegotiation {
  color: var(--color-green-500);
  display: inline;
  cursor: initial;
}

/* ------------------------------------------------------------------ attachmentHistory end */

/* ------------------------------------------------------------------ autocomplete */

.autocomplete {
  position: relative;
  display: inline-block;
}

.autocompleteList {
  position: absolute;
  border: 1px solid var(--autocomplete-border-color);
  border-bottom: none;
  border-top: none;
  z-index: 99;
  top: 100%;
  left: 0;
  right: 0;
}

.autocompleteItem span {
  font-weight: bold;
}

.autocompleteList div {
  padding: 10px;
  cursor: pointer;
  background-color: var(--input-background-color);
  border-bottom: 1px solid var(--autocomplete-border-color);
}

.autocompleteList div:hover {
  background-color: var(--color-gray-400);
}

.autocompleteActive {
  background-color: var(--color-gray-400) !important;
}

.autoCompleteHint {
  display: block;
  margin-top: 5px;
}

/* ------------------------------------------------------------------ autocomplete end */

dialog {
  font: 11px/11px Arial, sans-serif;
  box-shadow: 3px 5px 10px var(--color-gray-700);
}

dialog#fetchApiLoader {
  box-shadow: none;
}

dialog .multiCheckbox label {
  display: inline-block;
  width: 75%;
}

dialog label span {
  font: 12px/12px Arial, sans-serif;
  text-transform: uppercase;
  min-width: 150px;
  display: inline-block;
}

dialog select {
  border: none;
  padding: 4px;
  background-color: white;
}

dialog span.title {
  font-weight: bold;
  font-size: 15px;
}

.dialogButtons {
  text-align: right;
}

#reasonCommentTA {
  width: 400px;
  height: 100px;
  border: none;
}

#fsGetRejectionReason {
  min-width: 600px;
  overflow: hidden;
}

.negotiationFormSettingTitle {
  padding: 4px;
  text-transform: uppercase;
}

/* ---------------------------------------------------------------------- tooltip */

.field .tooltip {
  margin-left: 4px;
}

.tooltip > [class^="icon-"],
.tooltip > [class*=" icon-"] {
  display: inline;
}

.tooltip .tooltiptext {
  display: none;
}

.tooltip-dialog {
  position: absolute;
  background-color: var(--form-background-color);
  padding: 6px;
  box-shadow: 3px 5px 10px var(--color-gray-700);
  cursor: pointer;
  font: 11px/11px Arial, sans-serif;
  border: 5px solid var(--color-gray-400);
  z-index: 3;
  max-height: 50vh;
  overflow: auto;
}

.message textarea {
  min-width: 1100px;
  min-height: 200px;
  margin: 0 10px 15px;
}

/* ------------------------------------------------------------------ tooltip end */

/* ---------------------------------------------------------------------- formFlow */

.ffBusinessUnitContainer {
  height: 300px;
}

.ffBusinessUnitContainer .multiCheckbox {
  width: 100%;
  height: 100%;
  overflow: auto auto;
}

/* ---------------------------------------------------------------------- formFlow end */

/* ---------------------------------------------------------------------- email */

.emailRecipient,
.emailRecipientCc {
  width: 300px !important;
}

.emailError {
  color: red;
}

.sendEmail {
  overflow-y: auto;
  max-height: 600px;
  height: fit-content;
}

.isHidden {
  display: none;
}

/* ---------------------------------------------------------------------- email end */

/* ---------------------------------------------------------------------- download  */

.tree ul {
  list-style-type: none;
}

.tree li,
.tree ul li {
  display: block;
  margin-bottom: 5px;
}

.caret,
.leaf {
  cursor: pointer; /* Safari */ /* IE 10 und IE 11 */
  user-select: none; /* Standard-Syntax */
}

.treeFolder {
  grid-area: treeFolder;
  max-height: 70vh;
  overflow: auto;
}

.treeFolder .active {
  display: block;
}

.leafFolder {
  grid-area: leafFolder;
}

.tableFolder {
  grid-area: tableFolder;
}

.treeGridContainer {
  display: grid;
  grid-template-areas:
    'treeFolder leafFolder'
    'treeFolder tableFolder';
  grid-gap: 20px;
  grid-template-columns: 25% 74%;
}

.leafFolder tr.row.active {
  font-weight: bold;
}

.caret::before,
.leaf::before {
  display: inline-block;
  margin-right: 6px;
  color: var(--color-black);
}

.caret::before {
  content: "\25B6";
}

.caret-down::before {
  content: "\25B6";
  transform: rotate(90deg);
  margin-bottom: 5px;
}

.leaf::before {
  content: "\26AC";
  font-size: 18px;
}

.leaf:hover::before,
.caret:hover::before,
.caret-down:hover::before {
  transform: scale(1.5);
}

.leaf.active,
.leaf:hover,
.caret:hover,
.caret-down:hover {
  font-weight: bold;
}

.nested {
  display: none;
}

/* ---------------------------------------------------------------------- download end */

/* ---------------------------------------------------------------------- print */

.contractPrintDialog {
  overflow-y: auto;
  max-height: 600px;
  height: fit-content;
  max-width: 800px;
}

.printForms {
  overflow-y: auto;
  max-height: 300px;
}

/* ---------------------------------------------------------------------- print end */

.action-container {
  display: grid;
  grid-template-columns: auto auto;
  grid-row-gap: 4px;
}

.action-item {
  background-repeat: no-repeat;
  background-position: center, center;
  float: left;
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.table-status {
  cursor: pointer;
}

.text-padding-left {
  padding-left: 2px;
}

@font-face {
  font-family: ratefinding-icons;
  src: url("../fonts/ratefinding-icons.ttf") format("truetype"),
  url("../fonts/ratefinding-icons.woff") format("woff"),
  url("../fonts/ratefinding-icons.svg") format("svg");
}

[class^="icon-"],
[class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: ratefinding-icons !important;
  font-size: 1.3em;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.2s;
  cursor: pointer;
}

[class^="icon-"].icon-dynamic:hover,
[class*=" icon-"].icon-dynamic:hover,
[class^="icon-"].icon-dynamic.hover,
[class*=" icon-"].icon-dynamic.hover {
  transform: scale(1.5);
}

[class^="icon-"].no-action:hover,
[class*=" icon-"].no-action:hover,
[class^="icon-"].no-action.hover,
[class*=" icon-"].no-action.hover {
  cursor: default;
}

.icon-extra-large {
  font-size: 1.8em;
}

.icon-large {
  font-size: 1.5em;
}

.icon-medium {
  font-size: 0.8em;
}

.icon-small {
  font-size: 0.5em;
}

.icon-negotiation::before {
  /* convert-icon */
  content: "\e900";
}

.icon-scroll-body-up::before,
.icon-arrow-top::before,
.icon-arrow-down::before,
.icon-arrow-left::before,
.icon-arrow-right::before {
  /* play */
  content: "\e902";
}

.icon-arrow-left::before {
  content: "\e902";
}

.icon-arrow-right-end::before {
  /* last */
  content: "\e903";
}

.icon-arrow-left-end::before {
  content: "\e903";
}

.icon-rejectedNegotiation::before {
  /* reject-negotiation-icon */
  content: "\e904";
}

.icon-notInterested::before {
  /* dislike-button-line-icon */
  content: "\e906";
}

.icon-counterOffer::before {
  /* price-icon */
  content: "\e907";
}

.icon-filter::before {
  content: "\e908";
  color: var(--color-white);
}

.icon-remove-filter::before {
  content: "\e909";
  color: var(--color-white);
}

.icon-releasedNegotiation::before {
  content: "\e90b";
}

.icon-accepted::before,
.icon-secondAccepted::before {
  content: "\e90c";
  color: var(--color-green-700);
}

.icon-rejected::before,
.icon-secondRejected::before {
  content: "\e90d";
  color: var(--color-red-700);
}

.icon-firstAccepted::before {
  content: "\e90c";
}

.icon-firstRejected::before {
  content: "\e90d";
}

.icon-tender::before {
  content: "\e90e";
}

.icon-rollback::before {
  content: "\e90f";
}

.icon-undo::before {
  content: "\e90f";
  transform: rotate(90deg);
  padding: 0 3px;
}

.icon-undoFirstDecision::before,
.icon-undoSecondDecision::before {
  content: "\e910";
}

.icon-released::before {
  content: "\e911";
}

.icon-negotiationHistory::before {
  content: "\e912";
  color: var(--color-gray-600);
}

.icon-renegotiationConfiguration::before {
  content: "\e916";
}

.icon-sideLetter::before {
  content: "\e917";
}

.icon-open::before {
  content: "\e930";
}

.icon-previousYears::before {
  content: "\e902";
  transform: rotate(90deg);
}

.icon-previousYearsClose::before {
  content: "\e902";
  transform: rotate(270deg);
}

.icon-copyToSupplierCircle::before,
.icon-contractCopy::before {
  content: "\e915";
}

.icon-contractHistory::before {
  content: "\e914";
}

.icon-contractStatusHistory::before {
  content: "\e913";
}

.icon-preSelectionStatusHistory::before {
  content: "\e913";
}

.icon-buyerStatusOpen::before {
  content: "\e918";
  color: var(--color-green-700);
}

.icon-buyerStatusClose::before {
  content: "\e918";
  color: var(--color-red-700);
}

.icon-supplierStatusOpen::before {
  content: "\e919";
  color: var(--color-green-700);
}

.icon-supplierStatusClose::before {
  content: "\e919";
  color: var(--color-red-700);
}

.icon-spinner::before {
  content: "\e983";
}

.icon-print::before {
  content: "\e91a";
}

.icon-printDone::before {
  content: "\e91a";
  color: var(--color-green-700);
}

.icon-exportToExcel::before {
  content: "\e91b";
}

.icon-psOpen::before {
  content: "\e91c";
  color: var(--color-green-700);
}

.icon-psClose::before {
  content: "\e91c";
  color: var(--color-red-700);
  transform: rotate(90deg);
}

.icon-remove::before {
  content: "\e91d";
}

.icon-delete::before {
  content: "\ea0f";
  color: var(--color-red-700);
}

.icon-cross::before {
  content: "\ea0f";
}

.icon-info::before {
  content: "\ea0c";
  color: var(--color-blue-500);
}

.icon-plus::before {
  /* plus */
  content: "\ea0a";
}

.icon-fullscreen {
  position: absolute;
  color: var(--form-background-color);
  font-weight: bold;
  top: 1px;
  right: 3px;
  z-index: 2;
  margin: 0;
  padding: 0;
  line-height: 1;
}

.icon-fullscreen::before {
  content: "\26F6";
}

.icon-search::before {
  /* search */
  content: "\e986";
}

.icon-circle-up::before {
  /* answer history up */
  content: "\ea41";
}

.icon-circle-down::before {
  /* answer history down */
  content: "\ea43";
}

.icon-send-email::before {
  /* send email */
  content: "\e905";
}

.icon-email-log::before {
  /* email log */
  content: "\1F4CB";
  font-size: 15px;
  filter: grayscale(100%);
  color: var(--color-black);
}

.icon-scroll-body-up,
.icon-arrow-top {
  transform: rotate(270deg);
  color: var(--form-background-color);
}

.icon-scroll-body-down,
.icon-arrow-down {
  transform: rotate(90deg);
}

.icon-arrow-top:hover {
  transform: scale(1.5) rotate(270deg) !important;
}

.icon-arrow-down:hover {
  transform: scale(1.5) rotate(90deg) !important;
}

.icon-arrow-left,
.icon-arrow-left-end {
  transform: scale(-1, 1);
}

.icon-arrow-left.icon-dynamic:hover,
.icon-arrow-left-end.icon-dynamic:hover {
  transform: scale(-1.5, 1.5);
}

.language-icon {
  background-image: url("../images/languages.png");
  background-repeat: no-repeat;
  height: 11px;
  width: 16px;
  transition: transform 0.2s;
}

.language-icon:hover {
  transform: scale(1.2);
}

.language-icon.selected {
  box-shadow: 0 0 2px 2px var(--color-gray-300);
}

.language-icon.de {
  background-position: 50% -66px;
}

.language-icon.en {
  background-position: 50% -110px;
}

.language-icon.it {
  background-position: 50% -253px;
}

.language-icon.fr {
  background-position: 50% -187px;
}

.language-icon.es {
  background-position: 50% -121px;
}

.language-icon.pt {
  background-position: 50% -374px;
}

/* -------------- Google Maps --------------------------------------------------------  */

#map,
#geo-map {
  height: 500px;
}

/* Hide the control initially, to prevent it from appearing  before the map loads. */
.map-control {
  background-color: var(--color-white);
  border: 1px solid var(--border3-color);
  box-shadow: 0 2px 2px rgb(33 33 33 / 40%);
  font-family: Roboto, sans-serif;
  margin: 10px;
  padding-right: 5px;
  display: none;
}

/* Display the control once it is inside the map. */
#geo-map .map-control,
#map .map-control {
  display: block;
}

.selector-control {
  font-size: 14px;
  line-height: 30px;
  vertical-align: baseline;
}

.grey {
  color: var(--color-gray-700);
}

.green {
  color: var(--color-green-700);
}

.red {
  color: var(--color-red-500);
}

.blue {
  color: var(--color-blue-900);
}

/* -------------- Google Maps end -------------------------------------------------------- */

.textAlignRight {
  text-align: right;
}

.password {
  -webkit-text-security: disc;
}

.passwordForgotten {
  text-decoration: underline;
}

/* -------------- Progress Bar  -------------------------------------------------------- */

.progressWrapper {
  width: 320px;
}

.progressContainer {
  width: 100%;
  height: 20px;
  border: 2px solid var(--color-black);
  border-radius: 5px;
  background-color: var(--form-background-color);
  position: relative;
  overflow: hidden;
}

.progressBar {
  width: 0;
  height: 100%;
  background-color: var(--color-primary);
  transition: width 0.3s ease-in-out;
}

.progressInfo {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 5px;
}

/* -------------- Progress Bar  end ----------------------------------------------------- */

span.version {
  display: block;
  font: 9px sans-serif;
  color: var(--color-gray-900);
  text-align: left;
  margin: 0 20px;
}

.backToTop {
  position: fixed;
  right: -5px;
  bottom: 3px;
  z-index: 1000;
  cursor: pointer;
  display: none;
}

div.notAllowed {
  color: var(--color-not-allowed);
}

.formFlow .form-hidden {
  color: var(--color-primary)
}

.formFlow td.form {
  white-space: nowrap;
}

.formFlowConfiguration select {
  width: 400px;
}

/* ------------ Email Log  -------------------------------------------------------- */

.email-log-details-container {
  padding: 20px;
  font-family: Arial, sans-serif;
}

.email-log-header {
  border-bottom: 1px solid #ccc;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

.email-log-header div {
  margin-bottom: 15px;
}

.email-log-content-box {
  margin-top: 15px;
}

.email-log-content-header {
  font-weight: bold;
  margin-bottom: 10px;
}

.email-log-content-body {
  background-color: #f9f9f9;
  padding: 10px;
  border: 1px solid #ddd;
  max-height: 400px;
  overflow-y: auto; 
}

.email-log-actions {
  text-align: right;
  margin-top: 30px;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
  border: none;
  padding: 5px 10px;
  cursor: pointer;
}

.btn-secondary:hover {
  background-color: #5a6268;
}

/* ------------ Email Log  end ----------------------------------------------------- */

.hiddenNonFullscreenStructures {
  display: none;
}