.ofFeatureFlagUseNewValidationPanel.notificationBar {
  border-color: var(--of-grey400);
  border-width: 2px;
  border-style: solid;
  /*display: table;
    width: 100%;*/
  margin: 0px 0 15px 0;
  background-color: white;
  border-radius: 1px;
  /*margin: 30px 15px 0px 15px;*/
  min-width: unset;
}

  .ofFeatureFlagUseNewValidationPanel.notificationBar.ofColor_error {
    border-color: var(--of-error);
    border-width: 2px;
  }

  .ofFeatureFlagUseNewValidationPanel.notificationBar.ofColor_warning {
    border-color: var(--of-warning);
    border-width: 2px;
  }

  .ofFeatureFlagUseNewValidationPanel.notificationBar.ofColor_neutral {
    border-color: var(--of-info);
    border-width: 2px;
  }

  .ofFeatureFlagUseNewValidationPanel.notificationBar.ofColor_success {
    border-color: var(--of-success);
    border-width: 2px;
  }

.ofFeatureFlagUseNewValidationPanel.ofSection.ofPureSection.notificationBar .ofHeader .ofText {
  padding-left: 4px;
}

.ofFeatureFlagUseNewValidationPanel.ofSection.ofPureSection.notificationBar.ofSingleNotif .ofHeader{
  pointer-events: none;
}

  .ofFeatureFlagUseNewValidationPanel.ofSection.ofPureSection.notificationBar.ofSingleNotif .ofHeader a {
    pointer-events: auto;
  }

.ofFeatureFlagUseNewValidationPanel.ofSection.ofPureSection.notificationBar.ofSingleNotif .ofContent {
  display: none !important;
}

#n_image_up, #n_image_down {
  height: 20px;
  cursor: pointer;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message {
  vertical-align: middle;
  text-align: center;
  height: 100%;
  width: 100%;
  clear: both;
  right: 0px;
  display: flex;
  left: 0px;
  align-items: center;
  line-height: 25px;
  font-size: 16px;
  font-weight: 400;
}

  .ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .summaryInfo {
    display: flex;
  }

    .ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .summaryInfo > div {
      display: flex;
      align-items: center
    }

      .ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .summaryInfo > div > span {
        padding: 0px 8px 0px 2px;
      }

    .notificationBar-info-message .summaryInfo > span {
      padding-left: 15px;
    }

    @media only screen and (max-width: 599px) {
      .ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .summaryInfo > span {
        display: none;
      }
    }

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message.has-sub {
  /*padding-left: 3px;*/
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message a {
  /*color: var(--of-primary500);*/
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message.collapsed {
  /*border-bottom-width: 2px;
        border-bottom-style: solid;*/
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message.ofColor_neutral.collapsed {
  /*border-bottom-width: 2px;
        border-bottom-style: solid;*/
  border-bottom-color: var(--of-info);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message.ofColor_error.collapsed {
  border-bottom-color: var(--of-error);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message.ofColor_warning.collapsed {
  border-bottom-color: var(--of-warning);
}


.ofFeatureFlagUseNewValidationPanel .notificationBar-full.ofColor_neutral {
  border-top-color: var(--of-info);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-full.ofColor_error {
  border-top-color: var(--of-error);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-full.ofColor_warning {
  border-top-color: var(--of-warning);
}

.ofFeatureFlagUseNewValidationPanel.notificationBar.ofColor_error > div > .notificationBar-info-message.collapsed {
  border-bottom-color: var(--of-error);
}

.ofFeatureFlagUseNewValidationPanel.notificationBar.ofColor_warning > div > .notificationBar-info-message.collapsed {
  border-bottom-color: var(--of-warning);
}

.ofFeatureFlagUseNewValidationPanel.notificationBar.ofColor_neutral > div > .notificationBar-info-message.collapsed {
  border-bottom-color: var(--of-info);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message span.holder {
  float: right;
  width: 20px;
  height: 12px;
}

.ofFeatureFlagUseNewValidationPanel.ofSection.notificationBar .ofContent .notificationFullList {
  border-top-color: var(--of-grey200);
  border-top-width: 1px;
  border-top-style: solid;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-full {
  max-height: 135px;
  overflow-y: auto;
  font-size: 12px;
  overflow-x: hidden;
}


.ofFeatureFlagUseNewValidationPanel .notificationBar-info {
  margin: 0px;
  /* background-color: rgb(254, 244, 151);*/
}

.ofFeatureFlagUseNewValidationPanel .notificationTableContainer {
  /*padding-top: 2px;*/
}

.ofFeatureFlagUseNewValidationPanel .notificationMessage {
  padding-left: 15px;
  color: black;
}

.ofFeatureFlagUseNewValidationPanel .tableFull {
  border-collapse: collapse;
  border: 0px;
  width: 100%;
  min-height: 25px;
}

  .ofFeatureFlagUseNewValidationPanel .tableFull {
    display: flex;
    flex-direction: column;
  }

    .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData {
      border: 0px;
      padding: 0px 0px;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      /*height: 40px;*/
    }

    .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      margin-top: 10px;
    }

      .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData:first-child {
        margin-top: 9px;
      }

      .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData.ofMessage .ofValPanelGroupMessages {
        padding-left: 0px;
        display: flex;
        flex-direction: column;
        margin: 5px 0px 10px 30px;
      }

      .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData.ofMessage .notificationMessage > span {
        display: flex;
        margin-left: 3px;
      }

        .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData.ofMessage .notificationMessage > span svg {
          width: 16px;
          height: 16px;
          fill: var(--of-grey800);
          padding: 0;
          border: none;
        }

      .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData.ofMessage.ofCollapsed .notificationMessage > span svg {
        transform: rotate(180deg);
      }

      .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData.ofMessage.ofCollapsed .ofValPanelGroupMessages {
        display: none;
      }

      .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData.ofMessage .ofValPanelGroupMessages .ofValGroupMessage {
        margin: 2px;
        padding-left: 3px;
      }
        .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofValRowHasGroup .ofValPanelData.ofMessage .ofValPanelGroupMessages .ofValGroupMessage:first-child {
          margin-top: 0px;
        }


.ofFeatureFlagUseNewValidationPanel.ofSection.notificationBar .tableFull .ofValPanelRow { /*.ofContent*/
  border-bottom: 1px solid var(--of-grey200);
  padding-left: 5px;
  padding-right: 5px;
  display: flex;
  height: 36px;
}

  .ofFeatureFlagUseNewValidationPanel.ofSection.notificationBar .ofHeader .tableFull .ofValPanelRow{
    border-bottom: 0px;
    padding-left: 0px;
  }


  .ofFeatureFlagUseNewValidationPanel.ofSection.notificationBar .ofContent .tableFull .ofValPanelRow.ofValRowHasGroup {
    min-height: 36px;
    height: auto;
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofError.ofValRowHasGroup {
    order: 1;
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofError {
    order: 2;
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofWarning.ofValRowHasGroup {
    order: 3;
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofWarning {
    order: 4;
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofNeutral.ofValRowHasGroup {
    order: 5;
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow.ofNeutral {
    order: 6;
  }

.ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData {
  border: 0px;
  padding: 0px;
  /* margin-bottom: 1px; */
  /* margin-top: 1px; */
  vertical-align: middle;
  /* margin-left: auto; */
  display: flex;
  align-items: center;
}

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData:last-child:not(:first-child) {
    margin-left: auto;
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData > a > svg {
    width: 16px;
    height: 16px;
    fill: var(--of-grey800);
    padding: 2px;
    /*margin: 2px 0px 2px 2px;*/
    margin: -2px;
  }

.ofFeatureFlagUseNewValidationPanel .ofValPanelRow .ofValPanelData > *:first-child {
  align-self: center;
  display: flex;
}

.ofFeatureFlagUseNewValidationPanel .ofValPanelRow.ofValRowHasGroup .ofValPanelData > *:first-child {
  align-self: flex-start;
  display: flex;
}

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData > svg {
    width: 16px;
    height: 16px;
    fill: var(--of-grey800);
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData.ofColor_error > a > svg {
    fill: var(--of-error);
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData.ofColor_error > svg {
    fill: var(--of-error);
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData.ofColor_warning > a > svg {
    fill: var(--of-warning);
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData.ofColor_warning > svg {
    fill: var(--of-warning);
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData.ofColor_neutral > a > svg {
    fill: var(--of-info);
  }

  .ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData.ofColor_neutral > svg {
    fill: var(--of-info);
  }


.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message svg {
  width: 18px !important;
  height: 18px !important;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofValPanelList .ofValPanelRow .ofValPanelData.ofColor_error > a > svg {
  fill: var(--of-error);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofValPanelList .ofValPanelRow .ofValPanelData.ofColor_error > svg {
  fill: var(--of-error);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofValPanelList .ofValPanelRow .ofValPanelData.ofColor_warning > a > svg {
  fill: var(--of-warning);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofValPanelList .ofValPanelRow .ofValPanelData.ofColor_warning > svg {
  fill: var(--of-warning);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofValPanelList .ofValPanelRow .ofValPanelData.ofColor_neutral > a > svg {
  fill: var(--of-info);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofValPanelList .ofValPanelRow .ofValPanelData.ofColor_neutral > svg {
  fill: var(--of-info);
}

.ofFeatureFlagUseNewValidationPanel .tableFull .ofValPanelRow .ofValPanelData > div {
  padding-left: 15px;
  /* margin-top: -5px; */
}


.ofFeatureFlagUseNewValidationPanel .tableFull img {
  height: 11px;
  margin-right: 5px;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message.has-sub.collapsed span.holder svg {
  transform: rotate(-90deg);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message.has-sub span.holder svg {
  transform: rotate(90deg);
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message > a > .holder > svg {
  width: 20px;
  height: 12px;
  fill: black;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofColor_error > svg {
  fill: var(--of-error) !important;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofColor_success > svg {
  fill: var(--of-success) !important;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofColor_warning > svg {
  fill: var(--of-warning) !important;
}

.ofFeatureFlagUseNewValidationPanel .notificationBar-info-message .ofColor_neutral > svg {
  fill: var(--of-info) !important;
}

.ofFeatureFlagUseNewValidationPanel.notificationBar .notificationBar-info-message .summaryInfo > div > svg {
  padding: 1px;
  border: 0px;
}

.ofFeatureFlagUseNewValidationPanel.notificationBar.ofHide {
  border-width: 0px;
  border-style: none;
}

.ofFeatureFlagUseNewValidationPanel .processAnyWay {
  padding-left: 30px;
  font-size: 14px;
}

  .ofFeatureFlagUseNewValidationPanel .processAnyWay > a {
    color: var(--of-primary500) !important;
    text-decoration: underline;
    font-weight: 400;
    pointer-events: auto;
    cursor: pointer;
  }

.ofFeatureFlagUseNewValidationPanel.notificationBar .ofContent.ofFilterNeutral .ofValPanelRow:not(.ofNeutral), .ofFeatureFlagUseNewValidationPanel.notificationBar .ofContent.ofFilterWarning .ofValPanelRow:not(.ofWarning), .ofFeatureFlagUseNewValidationPanel.notificationBar .ofContent.ofFilterError .ofValPanelRow:not(.ofError) {
  display: none;
}


/* Validation Panel OLD */
.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) {
  border-color: #a5b3c5;
  border-width: 2px;
  border-style: solid;
  /*display: table;
    width: 100%;*/
  margin: 0px 0 15px 0;
  background-color: white;
  border-radius: 1px;
  margin: 30px 15px 0px 15px;
}

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel).ofColor_error {
    border-color: #e72025;
    border-width: 2px;
  }

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel).ofColor_warning {
    border-color: var(--of-red300);
    border-width: 2px;
  }

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel).ofColor_nuetral {
    border-color: var(--of-primary500);
    border-width: 2px;
  }

#n_image_up, #n_image_down {
  height: 20px;
  cursor: pointer;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message {
  vertical-align: middle;
  text-align: center;
  height: 25px;
  width: 100%;
  clear: both;
  right: 0px;
  left: 0px;
  line-height: 25px;
  font-size: 14px;
  color: black;
}

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message a {
    color: var(--of-primary500);
  }

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message.collapsed {
    /*border-bottom-width: 2px;
        border-bottom-style: solid;*/
  }

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message.ofColor_nuetral.collapsed {
    /*border-bottom-width: 2px;
        border-bottom-style: solid;*/
    border-bottom-color: #0455ab;
  }

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message.ofColor_error.collapsed {
    border-bottom-color: #e72025;
  }

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message.ofColor_warning.collapsed {
    border-bottom-color: var(--of-red300);
  }


.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-full.ofColor_nuetral {
  border-top-color: #0455ab;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-full.ofColor_error {
  border-top-color: #e72025;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-full.ofColor_warning {
  border-top-color: var(--of-red300);
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel).ofColor_error > div > .notificationBar-info-message.collapsed {
  border-bottom-color: #e72025;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel).ofColor_warning > div > .notificationBar-info-message.collapsed {
  border-bottom-color: var(--of-red300);
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel).ofColor_neutral > div > .notificationBar-info-message.collapsed {
  border-bottom-color: #0455ab;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message span.holder {
  float: right;
  width: 20px;
  height: 12px;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationFullList {
  border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #dcdcdc;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-full {
  display: none;
  max-height: 135px;
  overflow-y: auto;
  font-size: 12px;
}

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-full span {
    float: right;
    margin-top: -23px;
    margin-right: 3px;
  }

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info {
  margin: 0px;
  /* background-color: rgb(254, 244, 151);*/
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationTableContainer {
  padding-left: 15px;
  padding-right: 15px;
  padding-top: 2px;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationMessage {
  padding-left: 15px;
  color: black;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull {
  border-collapse: collapse;
  border: 0px;
  width: 100%;
  min-height: 25px;
}

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr {
    border: 0px;
    padding: 2px 5px;
    margin-bottom: 1px;
    margin-top: 1px;
  }

    .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td {
      border: 0px;
      /*padding: 2px 0px 2px 2px;*/
      margin-bottom: 1px;
      margin-top: 1px;
      vertical-align: middle;
    }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td > a > svg {
        width: 16px;
        height: 16px;
        fill: black;
        padding-top: 3px;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td > svg {
        width: 16px;
        height: 16px;
        fill: black;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td.ofColor_error > a > svg {
        fill: #e72025;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td.ofColor_error > svg {
        fill: #e72025;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td.ofColor_warning > a > svg {
        fill: var(--of-red300);
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td.ofColor_warning > svg {
        fill: var(--of-red300);
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td.ofColor_neutral > a > svg {
        fill: #0455ab;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td.ofColor_neutral > svg {
        fill: #0455ab;
      }

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr {
    border: 0px;
    padding: 2px 5px;
    margin-bottom: 1px;
    margin-top: 1px;
  }

    .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td {
      border: 0px;
      padding: 2px 5px;
      margin-bottom: 1px;
      margin-top: 1px;
    }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td > a > svg {
        width: 16px;
        height: 16px;
        fill: black;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td > svg {
        width: 16px;
        height: 16px;
        fill: black;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td.ofColor_error > a > svg {
        fill: #e72025;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td.ofColor_error > svg {
        fill: #e72025;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td.ofColor_warning > a > svg {
        fill: var(--of-red300);
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td.ofColor_warning > svg {
        fill: var(--of-red300);
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td.ofColor_neutral > a > svg {
        fill: #0455ab;
      }

      .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td.ofColor_neutral > svg {
        fill: #0455ab;
      }


.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message table tbody tr td > svg {
  width: 16px;
  height: 16px;
  fill: black;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message table tbody tr td.ofColor_error > a > svg {
  fill: #e72025;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message table tbody tr td.ofColor_error > svg {
  fill: #e72025;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message table tbody tr td.ofColor_warning > a > svg {
  fill: var(--of-red300);
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message table tbody tr td.ofColor_warning > svg {
  fill: var(--of-red300);
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message table tbody tr td.ofColor_neutral > a > svg {
  fill: #0455ab;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message table tbody tr td.ofColor_neutral > svg {
  fill: #0455ab;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull tr td div {
  padding-left: 15px;
  margin-top: -5px;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull .tr .td div {
  padding-left: 5px;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .tableFull img {
  height: 11px;
  margin-right: 5px;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message.has-sub.collapsed span.holder svg {
  transform: rotate(-90deg);
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message.has-sub span.holder svg {
  transform: rotate(90deg);
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message > a > .holder > svg {
  width: 20px;
  height: 12px;
  fill: black;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message .ofColor_error > svg {
  width: 16px;
  height: 16px;
  fill: #e72025;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message .ofColor_good > svg {
  width: 16px;
  height: 16px;
  fill: #0455ab;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message .ofColor_warning > svg {
  width: 16px;
  height: 16px;
  fill: var(--of-red300);
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .notificationBar-info-message .ofColor_neutral > svg {
  width: 16px;
  height: 16px;
  fill: #0455ab;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel).ofHide {
  border-width: 0px;
  border-style: none;
}

.notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .processAnyWay {
  text-underline-position: under;
  padding-left: 5px;
}

  .notificationBar:not(.ofFeatureFlagUseNewValidationPanel) .processAnyWay > a {
    color: blue !important;
    text-decoration: underline;
  }



/*Notification center*/

#notificationContainer {
  position: absolute;
  min-width: 280px;
  right: 0;
  background-color: var(--of-white500);
  display: none;
  z-index: 100000;
  box-shadow: 0px 2px 3.92px 1.08px rgb(0 0 0 / 20%);
}

/* So the panel actually shows up on the users small screen */
@media only screen and (max-width: 599px) {
  #notificationContainer {
    right: 0px !important;
  }
}

#notificationContainer .headerContainer {
  display: flex;
  align-items: center;
  margin: 0 10px 0 6px;
}

#notificationContainer .headerTitle {
  font-size: 14px;
  color: var(--of-grey900);
  font-weight: 500;
}

#notificationContainer .headerIcons {
  position: relative;
  top: 3px;
  margin-left: auto;
}

#notificationContainer .notificationList {
  min-height: 231px;
  display: inline-grid;
  grid-template-rows: min-content;
  align-items: baseline;
  margin: 20px 0px 10px 0px;
  max-height: 500px;
  overflow: auto;
}

  #notificationContainer .notificationList .ofToast {
    margin: 10px 15px;
    left: 0px;
  }

    #notificationContainer .notificationList .ofToast:first-child {
      margin-top: 0;
    }


    #notificationContainer .notificationList .ofToast:last-child {
      margin-bottom: 20px;
    }

  #notificationContainer .notificationList .ofToastNew {
    border-width: 2px;
  }



  /* Scrollbar styles */
  #notificationContainer .notificationList::-webkit-scrollbar, .notificationBar.ofFeatureFlagUseNewValidationPanel .notificationBar-full::-webkit-scrollbar {
    width: 7px;
  }

  #notificationContainer .notificationList::-webkit-scrollbar-track, .notificationBar.ofFeatureFlagUseNewValidationPanel .notificationBar-full::-webkit-scrollbar-track {
    background: var(--of-white500);
  }

  #notificationContainer .notificationList::-webkit-scrollbar-thumb, .notificationBar.ofFeatureFlagUseNewValidationPanel .notificationBar-full::-webkit-scrollbar-thumb {
    background: var(--of-grey300);
  }

    #notificationContainer .notificationList::-webkit-scrollbar-thumb:hover, .notificationBar.ofFeatureFlagUseNewValidationPanel .notificationBar-full::-webkit-scrollbar-thumb:hover {
      background: var(--of-grey400);
    }




/* Stop action panel from going behind toasts */
#notificationContainer .ofActionPanel {
  z-index: 110001;
}


/* Filters */
#notificationContainer.ofFilterNew .notificationList > :not(.ofToastNew) {
  display: none;
}

#notificationContainer #notificationOptionsPanel ol > li::before, #notificationContainer #notificationOptions_panel ol > li::before {
  content: "\2713  ";
  visibility: hidden;
}

#notificationContainer.ofFilterNew #notificationOptionsPanel ol > li::before, #notificationContainer.ofFilterNew #notificationOptions_panel ol > li::before {
  visibility: visible;
}


#notificationContainer ol > #refreshNotifications::before {
  visibility: hidden !important;
}