:root {
  /* Colour Palette */
  --of-font: 100% 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font size and family */
  --of-fontfamily: 'Roboto',Roboto,Helvetica,Arial,sans-serif; /* OneFace's font family */
  --of-grey100: #F5F8FA;
  --of-grey150: #F8F8F9;
  --of-grey200: #E2E8EB;
  --of-grey300: #D0D7DD; /* white at 80% opacity over --of-primary500*/
  --of-grey400: #667384;
  --of-grey500: #506274; /*white at 10% opacity over --of-grey700*/
  --of-grey600: #46596C; /*white at 5% opacity over --of-grey700*/
  --of-grey700: #3C5064; /*dsg app menu colour*/
  --of-grey800: #334455; /*black at 15% opacity over --of-grey700*/
  --of-grey900: #1A2127; /* Grid header, ofParagraph text colour */
  --of-primary300: #537491; /*white at 28% opacity over --of-primary500 */
  --of-primary400: #335B7D; /*white at 14% opacity over --of-primary500 */
  --of-primary500: #134169; /*dsg header colour*/
  --of-secondary100: #DEEEF7;
  --of-secondary200: #1F8DC8; /* white at a 12% opacity over --of-secondary400 */
  --of-secondary300: #1487C5; /* white at a 8% opacity over --of-secondary400 */
  --of-secondary400: #007DC0;
  --of-secondary500: #006EA9;
  --of-accent100: #D9F2FF; /* Used for secondary button pressed/click animation */
  --of-accent300: #66CCFF;
  --of-accent400: #00AAFF;
  --of-green300: #77BB00;
  --of-green400: #00773C;
  --of-red300: #FF4400;
  --of-red400: #C23400;
  --of-purple300: #6C42F5;
  --of-purple400: #492DA7;
  --of-gold300: #FAC823;
  --of-gold400: #FA9F23;
  --of-white500: #FFFFFF;
  --of-wizardgrey: #ECF1F4;
  --of-input-border: #9DA7B1;
  --of-disabled-fill: var(--of-wizardgrey);
  /* Status Colours */
  --of-success: var(--of-green300);
  --of-warning: var(--of-gold400);
  --of-error: var(--of-red400);
  --of-info: var(--of-accent400);
  /* Dashboard Colour Palette */
  --of-ds-green: #64CE8B;
  --of-ds-blue: #B6F3F4;
  --of-ds-red: #FF6363;
  --of-ds-orange: #FAAD5A;
  --of-ds-yellow: #FFE98B;
  --of-ds-midPurple: #9886D5;
  --of-ds-lightPurple: #CBC8F9;
  /* OF Columns and Numbers */
  --of-col-1: calc(100% / 12);
  --of-col-2: calc(100% / 12 * 2);
  --of-col-3: calc(100% / 12 * 3);
  --of-col-4: calc(100% / 12 * 4);
  --of-col-5: calc(100% / 12 * 5);
  --of-col-6: calc(100% / 12 * 6);
  --of-col-7: calc(100% / 12 * 7);
  --of-col-8: calc(100% / 12 * 8);
  --of-col-9: calc(100% / 12 * 9);
  --of-col-10: calc(100% / 12 * 10);
  --of-col-11: calc(100% / 12 * 11);
  --of-col-12: calc(100%);
  --of-rl-margins: 30px;
  /* Constant Numbers */
  --of-rl-margins: 30px;
  --of-input-width-min: 70px;
  --of-sf-input-height: 22px;
  /* Other Variables */
  --of-spinner: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='spinner' id='spinnerSvg' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E%23spinnerSvg%7Banimation:rotate 2s linear infinite%7D%40keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29%3B%7D%7D%23spinnerPath%7Bstroke-linecap:round%3Bstroke:%233C5064%3Banimation:dash 1.5s ease-in-out infinite%7D%40keyframes dash%7B0%25%7Bstroke-dasharray: 1, 150%3Bstroke-dashoffset: 0%3B%7D50%25%7Bstroke-dasharray: 90, 150%3Bstroke-dashoffset: -35%3B%7D100%25%7Bstroke-dasharray: 90, 150%3Bstroke-dashoffset: -124%3B%7D%7D%3C/style%3E%3Ccircle id='spinnerPath' class='path' cx='25' cy='25' r='20' fill='none' stroke-width='5'%3E%3C/circle%3E%3C/svg%3E") center / contain no-repeat;
  --of-spinner-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' class='spinner' id='spinnerSvg' viewBox='0 0 50 50'%3E%3Cstyle type='text/css'%3E%23spinnerSvg%7Banimation:rotate 2s linear infinite%7D%40keyframes rotate%7B100%25%7Btransform:rotate%28360deg%29%3B%7D%7D%23spinnerPath%7Bstroke-linecap:round%3Bstroke:%23FFFFFF%3Banimation:dash 1.5s ease-in-out infinite%7D%40keyframes dash%7B0%25%7Bstroke-dasharray: 1, 150%3Bstroke-dashoffset: 0%3B%7D50%25%7Bstroke-dasharray: 90, 150%3Bstroke-dashoffset: -35%3B%7D100%25%7Bstroke-dasharray: 90, 150%3Bstroke-dashoffset: -124%3B%7D%7D%3C/style%3E%3Ccircle id='spinnerPath' class='path' cx='25' cy='25' r='20' fill='none' stroke-width='5'%3E%3C/circle%3E%3C/svg%3E") center / contain no-repeat;
}


body {
  font: var(--of-font);
  color: var(--of-grey900);
  background-color: var(--of-grey100);
  margin: 0;
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  overflow: auto;
  font-size: 14px;
}

main {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  overflow-y: auto;
}

#__MainContentBody {
  min-height: 100%;
}

/* --------------- width in columns -------------------- */
.ofCol-x {
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  max-width: 100%;
}

.ofCol-1 {
  -ms-flex: 0 0 var(--of-col-1);
  flex: 0 0 var(--of-col-1);
  max-width: var(--of-col-1);
}

.ofCol-2 {
  -ms-flex: 0 0 var(--of-col-2);
  flex: 0 0 var(--of-col-2);
  max-width: var(--of-col-2);
}

.ofCol-3 {
  -ms-flex: 0 0 var(--of-col-3);
  flex: 0 0 var(--of-col-3);
  max-width: var(--of-col-3);
}

.ofCol-4 {
  -ms-flex: 0 0 var(--of-col-4);
  flex: 0 0 var(--of-col-4);
  max-width: var(--of-col-4);
}

.ofCol-5 {
  -ms-flex: 0 0 var(--of-col-5);
  flex: 0 0 var(--of-col-5);
  max-width: var(--of-col-5);
}

.ofCol-6 {
  -ms-flex: 0 0 var(--of-col-6);
  flex: 0 0 var(--of-col-6);
  max-width: var(--of-col-6);
}

.ofCol-7 {
  -ms-flex: 0 0 var(--of-col-7);
  flex: 0 0 var(--of-col-7);
  max-width: var(--of-col-7);
}

.ofCol-8 {
  -ms-flex: 0 0 var(--of-col-8);
  flex: 0 0 var(--of-col-8);
  max-width: var(--of-col-8);
}

.ofCol-9 {
  -ms-flex: 0 0 var(--of-col-9);
  flex: 0 0 var(--of-col-9);
  max-width: var(--of-col-9);
}

.ofCol-10 {
  -ms-flex: 0 0 var(--of-col-10);
  flex: 0 0 var(--of-col-10);
  max-width: var(--of-col-10);
}

.ofCol-11 {
  -ms-flex: 0 0 var(--of-col-11);
  flex: 0 0 var(--of-col-11);
  max-width: var(--of-col-11);
}

.ofCol-12 {
  -ms-flex: 0 0 var(--of-col-12);
  flex: 0 0 var(--of-col-12);
  max-width: var(--of-col-12);
}

.ofForm_ctrl_container[class*='ofCol']{
  min-width: var(--of-input-width-min);
}

#passContainer > div {
  display: block;
}

#ofResetPassword {
  display: block;
}

.ofLoginPage .ofPasswordContent {
  text-align: center;
  padding: 10px 0;
  margin: auto;
  width: 300px;
  position: relative;
  font: var(--of-font);
  font-style: normal;
  font-size: 12px;
}

.ofLoginPage .ofPasswordTokenContent p {
  padding: 10px 0px 10px 75px;
  text-align: left;
}

.ofBasicText {
  font: var(--of-font);
  color: var(--of-grey900);
  font-size: 14px;
}

a {
  color: var(--of-secondary500);
  font-weight: 300;
}

  a:visited {
    color: var(--of-secondary500);
  }

  .ofListLabel{
    font-size:15px;
  }

.ofListLabel {
  font-size: 15px;
}

.ofFooter {
  position: fixed;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 70px;
  background: #EEEEEE;
  z-index: 999;
}

@media only screen and (min-width: 599px) and (orientation: landscape) {
  .ofMinMenu ~ .ofMain_appImperium .ofFooter {
    width: calc(100% - 50px); /* Number is the width of the icon menu (.ofMinMenu) */
  }
}

@media only screen and (max-width: 599px) and (orientation: portrait) {
  .ofFooter {
    display: block;
  }

  .ofFooterHeight {
    height: calc(100% - 70px) !important;
  }
}

@media only screen and (max-height: 599px) and (orientation: landscape) {
  .ofFooter {
    display: block;
  }

  .ofFooterHeight {
    height: calc(100% - 70px) !important;
  }
}

@media only screen and (min-width: 599px) and (orientation: portrait) {
  .ofFooter {
    display: none;
  }
}

@media only screen and (min-height: 599px) and (orientation: landscape) {
  .ofFooter {
    display: none;
  }
}

.ofActionBar {
  display: flex;
  height: 70px;
  width: 100%;
}

  .ofActionBar .ofActionBarButton {
    width: 100%;
    height: 100%;
    border-radius: 3px;
    display: table;
  }
    .ofActionBar .ofActionBarButton.ofDisabled {
      background: var(--of-grey100);
      border-color: var(--of-grey100);
      box-shadow: none;
      color: var(--of-grey500);
      pointer-events: none;
    }

    .ofActionBar .ofActionBarButton .ofActionBarIcon {
      display: table-cell;
      align-items: center;
      text-align: center;
      vertical-align: middle;
      font-size: 12px;
    }

      .ofActionBar .ofActionBarButton .ofActionBarIcon:active {
        /*background: #BFD5EA radial-gradient(circle, transparent 1%, #BFD5EA 1%) center/15000%;*/
        animation: ofButtonClick 0.15s linear;
        cursor: pointer;
        box-shadow: none;
      }
      .ofActionBar .ofActionBarButton .ofActionBarIcon svg {
        height: 22px;
        width: 22px;
        margin: auto;
        display: block;
      }
        .ofActionBar .ofActionBarButton .ofActionBarIcon svg.ofDisabled {
          fill: #9a9a9a !important;
          pointer-events: none;
        }


.ofEnvIndicator {
  min-height: 20px;
  background-color: var(--of-gold300);
  font-size: 14px;
  color: var(--of-grey900);
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

  .ofEnvIndicator.ofHidden {
    display: none;
  }

  .ofEnvIndicator .ofIcon {
    height: 12px;
    width: 12px;
  }

.ofMain_contentHeader .ofContainer .ofHeader:not(.ofHide) {
  display: inline-block;
}

.ofTitle .ofShow {
  word-wrap: break-word;
  display: block;
  max-width: 800px;
  color: #555555;
}

.ofSubtitle.ofShow  {
  word-break: break-word;
  display: block;
  font-size: 16px;
  max-width: 800px;
  color: #555555;
}

.ofSubheader {
  margin-top: 5px;
  margin-bottom: 10px;
}

@media only screen and (max-width: 599px) {
  .ofHide_sm:not(.ofShow), .ofHide:not(.ofShow) {
    display: none !important;
  }

  .ofMain_contentHeader .ofContainer .ofHeader {
    display: none;
  }

  pre.ofSample {
    overflow: scroll;
  }
}

.colorPickerContent .ofContent {
  position: relative;
  text-shadow: none;
  height: 100%;
  width: 100%;
  display: table;
  padding-left: 0px;
}

  .colorPickerContent .ofContent .ofTextStyles {
    padding-left: 5px;
    vertical-align: middle;
    display: table-cell;
  }

  .colorPickerContent .ofContent.ofWhite {
    color: white;
  }

  .colorPickerContent .ofContent.ofBlack {
    color: black;
  }

@media only screen and (min-width: 600px) and (max-width: 1199px) {
  .ofHide_gt_sm:not(.ofShow), .ofHide_md:not(.ofShow), .ofHide:not(.ofShow) {
    display: none!important;
  }

  pre.ofSample {
    overflow: scroll;
  }

  #cancelOption{
    margin-left:12px;
  }
}

.dev-collab-read-more {
  text-align: end;
}

@media only screen and (min-width: 1200px) {
  .ofHide_lg:not(.ofShow), .ofHide_gt_md:not(.ofShow), .ofHide_gt_sm:not(.ofShow), .ofHide:not(.ofShow) {
    display: none !important;
  }

  ul .ofAction, top_ofmmcollapseExpand_menu_link {
    display: none;
  }

  #passContainer > div {
    display: flex;
  }

  #ofResetPassword {
    display: flex;
  }

  .ofLoginPage .ofPasswordContent {
    width: 600px;
  }

  #cancelOption{
    margin-left:6px;
  }
}

.ofLink {
  cursor: pointer;
}

  .ofLink:not(#appmenuAlertTrigger):not(#appmenuUserTrigger):not(#appmenuQuickSearch) {
    position: relative;
  }

#appAlertCount {
  position: absolute;
  text-align: center;
  color: white;
  left: 17px;
  top: 13px;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  /* IE10+ CSS styles go here */
}

.ofMain_appImperium {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
}


@media only screen and (max-width: 450px) {
  .ofMain_appImperium {
    -webkit-overflow-scrolling: touch;
  }
}

.ofMain_content {
  padding: 15px 15px 0 15px;
  /*flex-grow: 1;*/
  height: 100%;
  overflow: auto;
}

/* OLD (legacy) section styles */
.d-section {
  border: 1px solid #A5B3C5;
  background-color: White;
  margin: 3px 0 0 3px;
  width: 1260px;
}

.d-section-titlebar {
  padding: .4em 0;
  font-size: 1.2em;
  line-height: 1.2em;
  white-space: nowrap;
  border-bottom: 1px solid #A5B3C5;
}

.d-section-header {
  border-color: #A5B3C5;
  background: #F7F5F2;
}

  .d-section-header, .d-section-header .d-link {
    color: #555;
  }


.d-section-title {
  overflow: hidden;
  margin: auto 0px;
}

.d-section-body {
  margin: 5px 1px 5px 1px;
}

.d-section-body-hide {
  display: none;
}
/* End of section styles */

/* End of oF Frame Class styles */

/* Start of oF Section Class styles */
.ofSection, .ofSearchSection {
  margin-bottom: 15px;
}

  .ofSection .ofHeader {
    background: var(--of-white500);
  }

  .ofSection .ofReadOnlyHeader {
    background: none;
    border: 1px solid #dcdcdc;
    border-bottom: none;
  }

  .ofSection.ofNoTitleSection > .ofHeader {
    display: none;
  }

  body .ofSection.ofNoTitleSection > .sectionBody {
    border-top: 1px solid var(--of-grey300);
    padding-top: 5px;
  }

.ofReadOnlySection {
  border-bottom: 1px solid #dcdcdc;
}

  .ofReadOnlySection label {
    font-size: 12px;
    color: #555555;
    padding-left: 10px;
  }

.ofReadOnly label {
  font-size: 12px;
  color: #555555;
  padding-left: 10px;
}

.ofWindowHeader > div {
  padding-left: 15px;
}

.ofWindow.ofDockingWindow .ofWindowContent .ofForm_ctrl_container {
  width: -webkit-fill-available;
}

.ofSectionHeaderText, .ofWindow > .ofHeader > div, .ofWindow .ofHeader > div {
    float: left;
    color: var(--of-primary500);
    font-size: 18px;
    padding-left: 15px;
    letter-spacing: 0;
    font-style: normal;
    line-height: 32px;
    font-weight: 400;
}

.ofWindow > .ofHeader > div, .ofWindow .ofHeader > div {
  margin-top: 0 !important;
}

.ofWindowContent .ofReadOnlySection .ofSection_header .ofSectionHeaderText {
  float: left;
  margin-top: 0px;
  color: var(--of-primary500);
  font-size: 16px;
}

.ofWindowContent .controls4 {
  display: inline-block;
}

.ofSectionHeaderAction {
  float: right;
  margin-top: -3px;
}

.ofWindow .ofHeader {
  background: var(--of-white500);
  color: var(--of-primary500);
  font-size: 16px;
  line-height: 1.7em;
  height: 40px !important;
  padding: 4px 0;
  border: none;
  align-items: center;
}

.ofWindow .ofButtonStrip {
  position: absolute;
  display: flex;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 70px;
  background: var(--of-white500);
  z-index: 999;
  padding-top: 15px;
}

  .ofWindow .ofWindowContent.has-buttonstrip{
    width: calc(100% - 45px)!important;
  }

  .ofWindow .ofButtonStrip .ofPositiveActions {
    display: flex;
    margin-left: auto;
  }

    .ofWindow .ofButtonStrip input[type="button"] {
      margin: auto 15px auto 0px;
    }

      .ofWindow .ofButtonStrip input[type="button"].OfSecondaryButton {
        margin: auto 30px auto 15px;
      }


.ofForm_ctrl_container.ofReadOnly .ofFieldText {
    padding: 0;
}

.ofFieldText {
    font-size: 14px;
    color: black;
    /*padding-left: 5px;
    padding-bottom: 20px;*/
    border: 1px solid transparent;
    padding-bottom: 6px;
    padding-top: 6px;
    overflow-wrap: break-word;
}

.ofHeader .ofSectionActions, .ofSection_header .ofSectionActions {
  display: flex;
  float: right;
  height: 100%; /* Possibly auto in some cases but it si hard to pin point */
}

.ofSection_header .ofSectionHeaderSubtitleContainer {
  padding-left: 20px;
  display: flex;
  flex-wrap: wrap;
}

.ofSection_header .ofSectionHeaderSubtitle {
  padding-left: 30px;
  /*margin: auto 0 auto 0;*/
  font-size: 14px;
  color: var(--of-grey900);
  white-space: nowrap;
  display: flex;
}

.ofSection_header .ofSectionHeaderSubtitle .ofSectionHeaderSubtitleLabel {
  margin-right: 2px;
}

.ofSectionControls {
  padding: 5px 15px 15px;
  margin-top: 0;
  display: inline-block
}

.ofPageSection_controls {
  display: block !important
}
/* End of oF Section Class styles */


/*-------------- Pure OF Section --------------*/
.ofSection.ofPureSection {
  margin-bottom: 15px;
  background-color: white;
  border: solid 1px var(--of-grey300);
  min-width: 260px;
  box-sizing: border-box;
  outline: none;
}

.ofSection.ofPureSection.ofBorderlessSection {
  border: none;
}

  .ofSection.ofPureSection .ofHeader:not(:empty) {
    height: 40px; /* 40px */
    background: var(--of-white500);
    /*border: solid 1px var(--of-grey300);*/
    border-bottom: none;
    display: flex;
    flex-direction: row;
    /*justify-content: space-between;*/
    padding: 0 !important;
    overflow:hidden;
  }

  .ofSection.ofPureSection.ofRtl .ofHeader:not(:empty) {
    flex-direction: row-reverse;
  }
    .ofSection.ofPureSection.ofRtl .ofHeader:not(:empty) > .ofText {
      margin-left: auto;
      padding: 0;
      padding-right: 15px;
    }
    .ofSection.ofPureSection.ofRtl .ofHeader:not(:empty) > .ofActions {
      margin-right: auto;
      margin-left: 0;
    }

    .ofSection.ofPureSection.ofNowPinnedSection {
      border: 1px solid;
      border-color: var(--of-primary500);  
    }

    .ofSection.ofPureSection .ofHeader > .ofActions {
      margin-left: auto;
      display: flex;
      align-self: center;
    }

    .ofSection.ofPureSection .ofHeader > .ofActions > .ofContainer, .ofSection .ofHeader > .ofActions > .ofImageButton {
      padding: 0 5px;
      display: flex;
    }

    .ofSection.ofPureSection .ofHeader > .ofActions .ofIcon {
      margin: auto 0px;
    }

    .ofSection.ofPureSection .ofHeader > .ofActions .ofIcon.ofCollapse {
      padding: 4px 6px 4px 6px;
    }


  .ofSection .ofHeader .ofIcon.iconPinnedActive {
    fill: var(--of-accent400);
  }
    .ofSection .ofHeader .ofIcon.iconPinnedActive:hover {
      fill: var(--of-accent400);
    }

  .ofSection .ofHeader > *:nth-child(2):not(.ofSectionHeaderText):not(.ofText) {
    margin-left: auto;
  }


  .ofSection.ofPureSection .ofHeader .ofCollapseIcon {
    margin-top: auto;
    margin-bottom: auto;
    display: flex;
  }

    .ofSection.ofPureSection .ofHeader .ofIcon:not(.ofDisabled) {
      cursor: pointer;
    }

    .ofSection.ofPureSection .ofHeader.ofCollapsed .ofCollapseIcon .ofIcon {
      transform: rotate(180deg);
    }


  .ofSection.ofPureSection .ofHeader:not(.ofCollapsed) .ofSectionHeaderText:has(.ofSectionHeaderSubtitleContainer) {
    display: block;
  }

    .ofSection.ofPureSection .ofHeader:not(.ofCollapsed) .ofSectionHeaderText:has(.ofSectionHeaderSubtitleContainer) .ofSectionHeaderSubtitleContainer {
      padding-left: 0px;
    }

      .ofSection.ofPureSection .ofHeader:not(.ofCollapsed) .ofSectionHeaderText:has(.ofSectionHeaderSubtitleContainer) .ofSectionHeaderSubtitleContainer .ofSectionHeaderSubtitle:first-child {
        padding-left: 0px;
      }

      /*.ofSection.ofPureSection .ofHeader.ofCollapsed ~ .ofContent {
      display: none;
    }*/
      .ofSection.ofPureSection .ofHeader > .ofText {
        float: left;
        color: var(--of-primary500);
        font-size: 18px;
        padding-left: 15px;
        letter-spacing: 0;
        font-style: normal;
        line-height: 32px;
        font-weight: 400;
        /*flex-grow: 1;*/
        min-width: fit-content;
        display: flex;
        margin: auto 0px;
      }

  .ofSection.ofPureSection > .ofContent {
    display: block;
  }

    .ofSection.ofPureSection > .ofContent.ofHorizontal {
      flex-direction: row;
      display: flex;
      align-items: flex-start;
      flex-wrap: wrap;
    }

    .ofSection.ofPureSection > .ofContent.ofHorizontal>* {
        flex-basis:100%;
    }

    .ofSection.ofPureSection > .ofContent.ofVertical {
      flex-direction: column;
      display: flex;
      flex-wrap: wrap;
      /*align-items: flex-start; do not add this it will mess up columns and button row*/
    }

    .ofSection.ofPureSection > .ofContent.ofScrollable {
      overflow: auto;
    }

    .ofSection.ofPureSection > .ofContent .ofSection {
      margin: 5px 15px 15px 15px;
    }

.ofSection.ofPureSection .ofHeader:not(.ofCollapsed) .ofSectionHeaderSubtitleContainer .ofSectionHeaderSubtitle .ofSectionHeaderSubtitleLabel {
  font-size: 12px;
  color: var(--of-grey700);
}

.ofSection.ofPureSection .ofHeader:not(.ofCollapsed) .ofSectionHeaderSubtitleContainer .ofSectionHeaderSubtitle {
  flex-direction: column;
  line-height: initial;
}

.ofPinnedContent {
  overflow-y: auto;
  max-height: 30vh;
  margin-right: -15px;
  padding-right: 15px;
}

  .ofPinnedContent > .ofSection:last-child{
    margin-bottom: 0px;
  }

.ofNotPinnedContent {
  /*min-height: 70vh;*/
}

div.ofHorizontal {
  flex-direction: row;
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

div.ofVertical {
  flex-direction: column;
  flex-wrap: wrap;
  /*align-items: flex-start; do not add this it will mess up columns and button row*/
  display: flex;
}

.ofImageButton{
  display: flex;
}

form:has(.ofForm_ctrl_container) > .ofImageButton .ofIcon, form:has(.ofForm_ctrl_container) > .ofRow > .ofImageButton .ofIcon {
  margin: 24px calc(var(--of-rl-margins) / 2) calc((var(--of-rl-margins) / 2) - 2px) calc(var(--of-rl-margins) / 2);
}

/* Start of oF Control Class styles */
.ofControl {
  padding: 5px 15px 15px 15px;
  margin-top: 0;
}


.ofSection .ofSection_header .ofIcon.ofIcon_help {
  width: 17px;
  height: 17px;
  margin: auto 0px;

}

.ofSection .ofSection_header .ofIcon {
  margin-top: 5px;
  margin: auto 0px;
}

.ofSavedSearch .ofIcon {
  margin: 4px 5px 0 5px;
}

.ofGridImageCell, .ofFlagColumn {
  text-align: center;
}

.ofGrid .ofIcon.ofGridColumnIcon {
  width: 22px;
  height: 22px;
}

.ofSection_header .ofImageButton {
  padding: 0 5px; /*space between buttons in section header */
  display: flex;
  flex-direction: column;
}

.ofImageButton.oFGridActionsDelimiter {
    width: 1px;
    background-color: var(--of-grey300);
    padding: 0;
    margin: 10px 5px;
}

    .ofImageButton.oFGridActionsDelimiter > * {
        display: none;
    }

.ofImageButton.ofActionGroupIcon .ofIcon_overlay {
  transform: scale(0.6) translate(550px, 700px)
}

.ofSectionExpander {
  position: absolute;
  bottom: 0;
  display: flex;
  justify-content: center;
  background-image: linear-gradient(to bottom, transparent, white);
  width: calc(100% - 20px);
  margin: 1px;
  height: 30px;
}

.ofSectionExpanderStub {
    height: 30px;
    flex-basis: 100%;
}

.ofSectionExpanderWhite {
    background-image: linear-gradient(to bottom, transparent, white);
}

.ofSection {
    position: relative;

}

.ctrlMetaAttribute button.ofDisabled {
  fill: #9a9a9a !important;
  pointer-events: none;
}

.ctrlMetaAttribute button:not(.ofDisabled):hover {
  fill: var(--of-accent400) !important;
  cursor: pointer;
}


svg {
  color: var(--of-white500);
}

.ofIcon, .ofIconNoHover {
  display: inline-block;
  line-height: 1;
  padding: 4px;
  width: 22px;
  height: 22px;
  overflow: hidden;
  fill: var(--of-grey800);
  border: 0px solid transparent;
  border-radius: 4px;
}

.ofWhiteLayer {
  fill: currentColor;
}

.ofIcon.ofNoStates:active, .ofIcon.ofNoStates:hover {
  background: none;
}

.ofTextButtonIcon.ofIcon {
  width: auto;
  line-height: 20px;
}

.ofIcon:not(.ofNoStates):not(.ofTearDrop):hover {
  fill: var(--of-grey800);
  background: var(--of-grey200);
  border-radius: 4px;
}

.ofIcon.ofHover:not(.ofNoStates), .ofIcon:hover:not(.ofNoStates):not(.ofTearDrop) {
  fill: var(--of-grey800);
  background: var(--of-grey200);
  border-radius: 4px;
  color: var(--of-grey200);
}

.ofIcon.ofActive:not(.ofNoStates), .ofIcon:active:not(.ofNoStates) {
  fill: var(--of-secondary500);
  background: var(--of-grey100);
  border-radius: 4px;
  color: var(--of-grey100);
}
  /*ensure Active state overrides Hover state*/
.ofIcon.ofActive.ofHover:not(.ofNoStates):not(.ofTearDrop), .ofIcon:active:hover:not(.ofNoStates):not(.ofTearDrop) {
    fill: var(--of-secondary500);
    background: var(--of-grey100);
    border-radius: 4px;
    color: var(--of-grey100);
  }

/*override regular icon setting for smaller underline in saved search active*/
.ofSavedSearchToggle.ofIcon {
    /*padding: 5px;*/
    margin: 4px 5px 0 5px;
    border-top-width: 3px;
}

.ofIcon.ofDisabled {
  fill: var(--of-grey400) !important;
  pointer-events: none;
}


.ofIcon.ofIcon_help:hover {
  cursor: default;
}

.ofIcon:hover:active:not(.ofNoStates) {
  fill: var(--of-secondary500);
  background: var(--of-grey100);
}

.ofIcon.ofInline {
  width: 24px;
  height: 24px;
}

.ofIcon.ofSmall {
  width: 18px;
  height: 18px;
}

.ofIcon.ofMedium {
  width: 22px;
  height: 22px;
}

.ofIcon.ofLarge {
  width: 32px;
  height: 32px;
}

.ofIcon.ofFlagged {
  fill: var(--of-primary500);
  fill: var(--of-primary500);
}

.ofIcon.ofIcon_flag.ofActive {
  fill: var(--of-primary500);
}

.ofIcon.ofFlagged.ofDisabled {
  fill: #AAAAAA;
}



.ofComment {
  font-size: 10px;
  color: black;
}

.ofControlTitle {
  font-size: 14px;
  color: black;
}

.ofParagraph {
  font-size: 14px;
  color: var(--of-grey900);
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
  padding: 6px 15px 10px 15px;
}

.geospatialDescriptionSection {
  font-size: 14px;
  color: var(--of-grey900);
  font-weight: 400;
  letter-spacing: 0;
  font-style: normal;
  padding: 0px 15px 10px 15px;
}

.ofTextHeading {
  height: 21px;
  color: var(--of-grey900);
  font-size: 16px;
  line-height: 21px;
}

.ofRadioButtonGroup .ctrlLabel.ofControlTitle {
  margin-top: 10px;
  padding-left: 5px;
  font-size: 12px;
  align-items: center;
  justify-content: start;
  /*display: table-row; this was conflict in merge*/
}

.ofRadioButtonGroup .ctrlLabel.ofControlTitle svg.required {
  margin-top: 0px;
  align-self: start;
}

.ofRadioButtonGroup .ofControl {
  display: inline-flex;
  /*justify-content: space-between;*/
  padding: 0px;
  margin-top: 2px;
}

  .ofRadioButtonGroup .ofControl.ofRadioButtonGroupVertical {
    display: block;
    margin-top: 0;
  }

  .ofRadioButtonGroup .ofControl > div {
    margin-right: 15px;
  }

/* End of oF Control Class styles */
/* Start of oF Object Class styles */
.ofHeader {
  display: flex;
  flex-direction: row;
  /*justify-content: space-between;*/
  padding: 0 !important;
}

.ofMain_contentHeader .ofContainer .ofHeader {
  padding: 0 0 10px 0 !important;
}

.ofMain_contentHeader .ofContainer .ofHeader:has(+ .ofSubheader) {
  padding: 0 0 0 0 !important;
}

.ofAggregateInfo {
  height: 16px;
  font-size: 14px;
  padding-left: 10px;
  border: 1px solid darkgray;
  padding-top: 3px;
  padding-bottom: 3px;
}
/*Start of Progress Indicator styles*/
.ofProgInd {
  cursor: pointer;
  text-align: center;
  display: inline-flex;
  z-index: 5;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofPast {
  fill: var(--of-primary500);
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofCurrentStep {
  fill:white;
}

.ofProgInd .ofSkipped .ofWhiteLayer {
  fill: var(--of-primary500);
}

/*This CSS is for dynamic view arrows */
.ofProgInd .ofAction_left.displayNone,
.ofProgInd .ofAction_right.displayNone {
    display: none !important;
}

.ofProgInd .ofAction_left.displayBlock,
.ofProgInd .ofAction_right.displayBlock {
    display: block !important;
}


/*This CSS is for only Skipped state for Index> CurrentState*/
.ofProgInd .ofskippedAfter {
  fill: #9A9A9A;
  /*  stroke: #9A9A9A;
  stroke-width: 11;*/
}

  .ofProgInd .ofskippedAfter .ofWhiteLayer {
    fill: #DCDCDC;
  }

  .ofProgInd .ofskippedAfter .ofIconSVG.ofSkippedIcon {
    fill: var(--of-grey900);
  }

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofSkipped {
  fill: var(--of-primary500);
}

.ofProgInd .ofInProgressIssues {
  fill: #FF9922;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofInProgressIssues {
  fill: #FF9922;
}

.ofProgInd .ofSeriousIssues {
  fill: #9A9A9A;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofSeriousIssues {
  fill: #9A9A9A;
}

.ofProgInd .ofPresentFuture .ofWhiteLayer {
  fill: #DCDCDC;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofPresentFuture {
  fill: #9A9A9A;
}

.ofProgInd .ofIconSVG {
  fill: var(--of-white500);
}

  .ofProgInd .ofIconSVG.ofInProgressIcon {
    fill: var(--of-grey900);
  }

  .ofProgInd .ofIconSVG.ofSkippedIcon {
    fill: var(--of-white500);
  }
    .ofProgInd .ofIconSVG.ofSkippedIcon path {
      transform: rotateZ(90deg);
      transform-origin: center;
    }

.ofProgInd .ofWarningIcon {
  fill: var(--of-white500);
}

.ofProgInd .ofErrorIcon {
  fill: var(--of-white500);
}

.ofProgInd .ofPresentFuture .ofIconSVG {
  fill: var(--of-grey900);
}

.ofProgInd .ofPast .ofInProgressIcon {
  fill: var(--of-white500);
}


.ofProgInd .ofPast text {
  fill: var(--of-white500);
}



.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIconSVG {
  fill: var(--of-white500);
}

.ofProgInd .ofCurrentStep {
  fill: var(--of-primary500);
  stroke-width: 11;
  stroke: none;
}

.ofProgInd .ofPast {
  fill: var(--of-primary500);
}
.ofProgInd .ofPast .ofWhiteLayer {
  fill: var(--of-primary500);
}

.ofProgInd .ofSkipped {
  fill: var(--of-primary500);
}

.ofProgInd .ofPresentFuture {
  fill: #9A9A9A;
}


.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofCurrentStep {
  fill: var(--of-primary500);
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofCurrentStep {
  fill: var(--of-primary500);
}

.ofProgInd .ofAction_left {
  width: 50px;
  height: 50px;
  z-index: 7;
  margin-top: 7px;
  margin-right: -17px;
  display: none;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofAction_left {
  width: 50px;
  height: 50px;
  z-index: 7;
  margin-top: 7px;
  margin-right: -17px;
  display: none;
}

.ofProgInd .ofAction_right {
  width: 50px;
  height: 50px;
  z-index: 7;
  display: none;
  margin-top: 7px;
  margin-left: -17px;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofAction_right {
  width: 50px;
  height: 50px;
  z-index: 7;
  display: none;
  margin-top: 7px;
  margin-left: -17px;
}

/* Small size PI */
@media only screen and (max-width: 599px) {
  .ofProgInd .ofStep:not(.focalPoint) {
    display: none;
  }

  .ofProgInd .ofLine_horizontal:not(.focalPoint) {
    display: none;
  }

  .ofProgInd .ofLine_horizontal.ofPast:not(.focalPoint) {
    display: none;
  }
  /* Add case for manually medium further shrinking */
  .ofProgInd.ofMedium .ofStep:not(.focalPoint) {
    display: none;
  }

  .ofProgInd.ofMedium .ofLine_horizontal:not(.focalPoint) {
    display: none;
  }

  .ofProgInd.ofMedium .ofLine_horizontal.ofPast:not(.focalPoint) {
    display: none;
  }

  .ofProgInd .ofAction_left {
    display: block;
  }

  .ofProgInd .ofAction_right {
    display: block;
  }
}
/* Manually small */
.ofProgInd.ofSmall .ofStep:not(.focalPoint) {
  display: none;
}

.ofProgInd.ofSmall .ofLine_horizontal:not(.focalPoint) {
  display: none;
}

.ofProgInd.ofSmall .ofLine_horizontal.ofPast:not(.focalPoint) {
  display: none;
}

.ofProgInd.ofSmall .ofAction_left {
  display: block;
}

.ofProgInd.ofSmall .ofAction_right {
  display: block;
}
/* Medium size PI */
@media only screen and (min-width: 600px) and (max-width: 1199px) {
  .ofProgInd .ofStep:not(.focalPoint):not(.focalNeighbor) {
    display: none;
  }

  .ofProgInd .ofLine_horizontal:not(.focalPoint):not(.focalNeighbor) {
    display: none;
  }

  .ofProgInd .ofLine_horizontal.ofPast:not(.focalPoint):not(.focalNeighbor) {
    display: none;
  }

  .ofProgInd .ofAction_left {
    display: block;
  }

  .ofProgInd .ofAction_right {
    display: block;
  }

  #passContainer > div {
    display: flex;
  }

  #ofResetPassword {
    display: flex;
  }

  .ofLoginPage .ofPasswordContent {
    width: 600px;
  }
}
/* Manually medium */
.ofProgInd.ofMedium .ofStep:not(.focalPoint):not(.focalNeighbor) {
  display: none;
}

.ofProgInd.ofMedium .ofLine_horizontal:not(.focalPoint):not(.focalNeighbor) {
  display: none;
}

.ofProgInd.ofMedium .ofLine_horizontal.ofPast:not(.focalPoint):not(.focalNeighbor) {
  display: none;
}

.ofProgInd.ofMedium .ofAction_left {
  display: block;
}

.ofProgInd.ofMedium .ofAction_right {
  display: block;
}
/* Default PI */
.ofProgInd .ofStep {
  width: 70px;
  height: 70px;
  z-index: 7;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofStep {
  width: 70px;
  height: 70px;
  z-index: 7;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg {
  width: 40px;
  height: 40px;
  padding: 0px;
  margin-top: 0px;
  fill: var(--of-white500);
  stroke: none;
}

.ofProgInd .ofLine_horizontal {
  position: relative;
  width: 65px;
  height: 5px;
  margin: -2px -21px 0px -21px;
  top: 19.6px;
  z-index: 6;
  background-color: #9A9A9A;
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofLine_horizontal {
  position: relative;
  width: 65px;
  height: 5px;
  margin: -2px -29px 0px -31px;
  top: 19.6px;
  z-index: 6;
  background-color: #9A9A9A;
}
/* Done / Active */
.ofProgInd .ofLine_horizontal.ofPast {
  background-color: var(--of-primary500);
}
/*Higher specificity for metapanel progress indicator*/
.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofLine_horizontal.ofPast {
  background-color: var(--of-primary500);
}

.ofProgInd .ofLine_horizontal.ofSkipped {
  background-color: var(--of-primary500);
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofLine_horizontal.ofSkipped {
  background-color: var(--of-primary500);
}

.ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon {
  display: inline-block;
  line-height: 1;
  padding: 2pt;
  width: 24px;
  height: 24px;
  overflow: hidden;
  fill: var(--of-grey900);
}

  .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon.ofHover {
    fill: var(--of-accent400);
  }

  .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon.ofActive {
    fill: var(--of-primary500);
  }

  .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon.ofDisabled {
    fill: #AAAAAA;
    pointer-events: none;
  }

  .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon:not(.ofDisabled):hover {
    fill: var(--of-accent400);
    cursor: pointer;
  }

  .ofMain_contentHeader > .ofMetaPanel .ofProgInd svg.ofIcon:hover:active {
    fill: var(--of-primary500);
  }

/* Progress Indicator History Dialog*/
#progressHistoryWin {
  display: none;
  position: fixed;
  z-index: 2147483647;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
  background-color: rgba(0, 0, 0, 0.4);
}

  #progressHistoryWin .modal-content {
    position: relative;
    background-color: var(--of-white500);
    margin: auto;
    padding: 0;
    width: 80%;
    max-width: 650px;
    min-width: 350px;
    font-size: 16px;
    box-shadow: 0px 0px 10px 2px #555555;
  }

  #progressHistoryWin .modal-header {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    align-items: center;
    background-color: var(--of-white500);
    color: var(--of-primary500);
    height: 40px;
  }

    #progressHistoryWin .modal-header > div {
      display: flex;
      align-items: center;
      padding-right: 5px;
      padding-left: 10px;
    }

  #progressHistoryWin .modal-body {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
    align-items: center;
  }

  #progressHistoryWin .full {
    width: 100%;
  }

  #progressHistoryWin .ofActive {
    visibility: visible;
    z-index: 2147485847 !important;
  }

  #progressHistoryWin .modal-body .ofSection {
    margin: 0 15px 15px 15px;
  }


/*End of Progress Indicator styles*/
/*Start of History Dialog styles*/
.ofHistoryDialog {
  color: black;
  padding: 10px;
  align-content: center;
}

#ofHistoryDialogPI.ofControl  {
  padding: 5px 15px 15px 0px;
}

.ofHistoryDialog .ofContainerBorder {
  width: 100%;
  height: 201px;
  border: solid;
  border-width: 0.75px;
  border-color: #818181;
}

  .ofHistoryDialog .ofContainer {
    padding-right: 1px;
    height: 200px;
    overflow-y: scroll;
  }

  .ofHistoryDialog .ofActions {
    height: 20px;
    width: 100%;
  }

    .ofHistoryDialog .ofActions .ofRadioButton {
      float: right;
      padding: 0px 5px 0px;
    }

.ofListItem {
  padding: 5px;
}

  .ofListItem .ofTitle {
    padding: 0px 0px 0px;
    display: inline-block;
  }

  .ofListItem .ofDate {
    padding: 0px 0px 0px;
    display: inline-block;
    float: right;
    font-size: 12px;
  }

  .ofListItem .ofBody {
    padding: 0px 5px 0px;
    font-size: 12px;
  }

  .ofListItem .ofListBoxText {
    padding-left: 5px;
  }

  .ofListItem .ofListBoxLabel {
    font-size: 14px;
    padding-bottom: 5px;
  }

/*End of History Dialog styles*/
/* End of oF Object Class styles */
span.pinned {
  content: url('../images/flagged.png');
  width: 60px;
  height: 60px;
}

span.unpinned {
  content: url('../images/unflagged.png');
  width: 60px;
  height: 60px;
}

.ofForm {
  flex-flow: row wrap;
  align-items: center;
}

body .ofRow {
  /*padding-right: 10px;*/
  word-spacing: -1em;
  letter-spacing: -.31em;
  overflow: hidden;
}

.ofRow > * {
  word-spacing: normal;
  letter-spacing: normal;
}

.ofForm_ctrl_container {
  margin: 5px 15px 15px 15px; /* Setting 10px space between input filed and Upload button 10px= 5px + 5px(margin of Input field)*/
  display: inline-table;
}
  .ofForm_ctrl_container.ofMinMargins {
    margin: 5px 10px 10px 10px;
  }

.ofRow > .ofForm_ctrl_container {
  align-self: flex-end;
}

  .ofRow > .ofForm_ctrl_container:has(.jqx-radiobutton), .ofRow > .ofForm_ctrl_container:has(.jqx-checkbox){
    align-self: start;
  }

  .ofForm_ctrl_container[class*="ofCol-"] .ofControlsContainer, .ofForm_ctrl_container[class*="ofCol-"] .ofControlsContent {
    width: 100%;
  }

.ofForm_ctrl_container.borderBoxImportant {
  padding: 5px 15px 15px 15px;
  margin: 0 !important;
}
  .ofForm_ctrl_container.borderBoxImportant.ofMinMargins {
    padding: 5px 10px 10px 10px;
  }

@media (max-width: 599px) {
  .ofForm_ctrl_container.ofCol-1 {
    -ms-flex: 0 0 var(--of-col-3);
    flex: 0 0 var(--of-col-3);
    max-width: var(--of-col-3);
    width: var(--of-col-3);
  }
  .ofForm_ctrl_container.ofCol-2 {
    -ms-flex: 0 0 var(--of-col-6);
    flex: 0 0 var(--of-col-6);
    max-width: var(--of-col-6);
    width: var(--of-col-6);
  }
  .ofForm_ctrl_container.ofCol-3,
  .ofForm_ctrl_container.ofCol-4,
  .ofForm_ctrl_container.ofCol-5,
  .ofForm_ctrl_container.ofCol-6,
  .ofForm_ctrl_container.ofCol-7,
  .ofForm_ctrl_container.ofCol-8,
  .ofForm_ctrl_container.ofCol-9,
  .ofForm_ctrl_container.ofCol-10,
  .ofForm_ctrl_container.ofCol-11,
  .ofForm_ctrl_container.ofCol-12 {
    -ms-flex: 0 0 var(--of-col-12);
    flex: 0 0 var(--of-col-12);
    max-width: var(--of-col-12);
    width: var(--of-col-12);
  }


  .ofCol-sm-1 {
    -ms-flex: 0 0 var(--of-col-1);
    flex: 0 0 var(--of-col-1);
    max-width: var(--of-col-1);
    width: var(--of-col-1);
  }

  .ofCol-sm-2 {
    -ms-flex: 0 0 var(--of-col-2);
    flex: 0 0 var(--of-col-2);
    max-width: var(--of-col-2);
    width: var(--of-col-2);
  }

  .ofCol-sm-3 {
    -ms-flex: 0 0 var(--of-col-3);
    flex: 0 0 var(--of-col-3);
    max-width: var(--of-col-3);
    width: var(--of-col-3);
  }

  .ofCol-sm-4 {
    -ms-flex: 0 0 var(--of-col-4);
    flex: 0 0 var(--of-col-4);
    max-width: var(--of-col-4);
    width: var(--of-col-4);
  }

  .ofCol-sm-5 {
    -ms-flex: 0 0 var(--of-col-5);
    flex: 0 0 var(--of-col-5);
    max-width: var(--of-col-5);
    width: var(--of-col-5);
  }

  .ofCol-sm-6 {
    -ms-flex: 0 0 var(--of-col-6);
    flex: 0 0 var(--of-col-6);
    max-width: var(--of-col-6);
    width: var(--of-col-6);
  }

  .ofCol-sm-7 {
    -ms-flex: 0 0 var(--of-col-7);
    flex: 0 0 var(--of-col-7);
    max-width: var(--of-col-7);
    width: var(--of-col-7);
  }

  .ofCol-sm-8 {
    -ms-flex: 0 0 var(--of-col-8);
    flex: 0 0 var(--of-col-8);
    max-width: var(--of-col-8);
    width: var(--of-col-8);
  }

  .ofCol-sm-9 {
    -ms-flex: 0 0 var(--of-col-9);
    flex: 0 0 var(--of-col-9);
    max-width: var(--of-col-9);
    width: var(--of-col-9);
  }

  .ofCol-sm-10 {
    -ms-flex: 0 0 var(--of-col-10);
    flex: 0 0 var(--of-col-10);
    max-width: var(--of-col-10);
    width: var(--of-col-10);
  }

  .ofCol-sm-11 {
    -ms-flex: 0 0 var(--of-col-11);
    flex: 0 0 var(--of-col-11);
    max-width: var(--of-col-11);
    width: var(--of-col-11);
  }

  .ofCol-sm-12 {
    -ms-flex: 0 0 var(--of-col-12);
    flex: 0 0 var(--of-col-12);
    max-width: var(--of-col-12);
    width: var(--of-col-12);
  }

}

@media (min-width: 600px) and (max-width: 1199px) {
  .ofForm_ctrl_container.ofCol-1,
  .ofForm_ctrl_container.ofCol-2 {
    -ms-flex: 0 0 var(--of-col-3);
    flex: 0 0 var(--of-col-3);
    max-width: var(--of-col-3);
    width: var(--of-col-3);
  }

  .ofForm_ctrl_container.ofCol-3 {
    -ms-flex: 0 0 var(--of-col-6);
    flex: 0 0 var(--of-col-6);
    max-width: var(--of-col-6);
    width: var(--of-col-6);
  }

  .ofForm_ctrl_container.ofCol-4,
  .ofForm_ctrl_container.ofCol-5 {
    -ms-flex: 0 0 var(--of-col-9);
    flex: 0 0 var(--of-col-9);
    max-width: var(--of-col-9);
    width: var(--of-col-9);
  }

  .ofForm_ctrl_container.ofCol-6,
  .ofForm_ctrl_container.ofCol-7,
  .ofForm_ctrl_container.ofCol-8,
  .ofForm_ctrl_container.ofCol-9,
  .ofForm_ctrl_container.ofCol-10,
  .ofForm_ctrl_container.ofCol-11,
  .ofForm_ctrl_container.ofCol-12 {
    -ms-flex: 0 0 var(--of-col-12);
    flex: 0 0 var(--of-col-12);
    max-width: var(--of-col-12);
    width: var(--of-col-12);
  }


  .ofCol-md-1 {
    -ms-flex: 0 0 var(--of-col-1);
    flex: 0 0 var(--of-col-1);
    max-width: var(--of-col-1);
    width: var(--of-col-1);
  }

  .ofCol-md-2 {
    -ms-flex: 0 0 var(--of-col-2);
    flex: 0 0 var(--of-col-2);
    max-width: var(--of-col-2);
    width: var(--of-col-2);
  }

  .ofCol-md-3 {
    -ms-flex: 0 0 var(--of-col-3);
    flex: 0 0 var(--of-col-3);
    max-width: var(--of-col-3);
    width: var(--of-col-3);
  }

  .ofCol-md-4 {
    -ms-flex: 0 0 var(--of-col-4);
    flex: 0 0 var(--of-col-4);
    max-width: var(--of-col-4);
    width: var(--of-col-4);
  }

  .ofCol-md-5 {
    -ms-flex: 0 0 var(--of-col-5);
    flex: 0 0 var(--of-col-5);
    max-width: var(--of-col-5);
    width: var(--of-col-5);
  }

  .ofCol-md-6 {
    -ms-flex: 0 0 var(--of-col-6);
    flex: 0 0 var(--of-col-6);
    max-width: var(--of-col-6);
    width: var(--of-col-6);
  }

  .ofCol-md-7 {
    -ms-flex: 0 0 var(--of-col-7);
    flex: 0 0 var(--of-col-7);
    max-width: var(--of-col-7);
    width: var(--of-col-7);
  }

  .ofCol-md-8 {
    -ms-flex: 0 0 var(--of-col-8);
    flex: 0 0 var(--of-col-8);
    max-width: var(--of-col-8);
    width: var(--of-col-8);
  }

  .ofCol-md-9 {
    -ms-flex: 0 0 var(--of-col-9);
    flex: 0 0 var(--of-col-9);
    max-width: var(--of-col-9);
    width: var(--of-col-9);
  }

  .ofCol-md-10 {
    -ms-flex: 0 0 var(--of-col-10);
    flex: 0 0 var(--of-col-10);
    max-width: var(--of-col-10);
    width: var(--of-col-10);
  }

  .ofCol-md-11 {
    -ms-flex: 0 0 var(--of-col-11);
    flex: 0 0 var(--of-col-11);
    max-width: var(--of-col-11);
    width: var(--of-col-11);
  }

  .ofCol-md-12 {
    -ms-flex: 0 0 var(--of-col-12);
    flex: 0 0 var(--of-col-12);
    max-width: var(--of-col-12);
    width: var(--of-col-12);
  }
} 

@media (min-width: 1200px) {

  .ofForm_ctrl_container.ofCol-1, .ofCol-lg-1 {
    -ms-flex: 0 0 var(--of-col-1);
    flex: 0 0 var(--of-col-1);
    max-width: var(--of-col-1);
    width: var(--of-col-1);
  }

  .ofForm_ctrl_container.ofCol-2, .ofCol-lg-2 {
    -ms-flex: 0 0 var(--of-col-2);
    flex: 0 0 var(--of-col-2);
    max-width: var(--of-col-2);
    width: var(--of-col-2);
  }

  .ofForm_ctrl_container.ofCol-3, .ofCol-lg-3 {
    -ms-flex: 0 0 var(--of-col-3);
    flex: 0 0 var(--of-col-3);
    max-width: var(--of-col-3);
    width: var(--of-col-3);
  }

  .ofForm_ctrl_container.ofCol-4, .ofCol-lg-4 {
    -ms-flex: 0 0 var(--of-col-4);
    flex: 0 0 var(--of-col-4);
    max-width: var(--of-col-4);
    width: var(--of-col-4);
  }

  .ofForm_ctrl_container.ofCol-5, .ofCol-lg-5 {
    -ms-flex: 0 0 var(--of-col-5);
    flex: 0 0 var(--of-col-5);
    max-width: var(--of-col-5);
    width: var(--of-col-5);
  }

  .ofForm_ctrl_container.ofCol-6, .ofCol-lg-6 {
    -ms-flex: 0 0 var(--of-col-6);
    flex: 0 0 var(--of-col-6);
    max-width: var(--of-col-6);
    width: var(--of-col-6);
  }

  .ofForm_ctrl_container.ofCol-7, .ofCol-lg-7 {
    -ms-flex: 0 0 var(--of-col-7);
    flex: 0 0 var(--of-col-7);
    max-width: var(--of-col-7);
    width: var(--of-col-7);
  }

  .ofForm_ctrl_container.ofCol-8, .ofCol-lg-8 {
    -ms-flex: 0 0 var(--of-col-8);
    flex: 0 0 var(--of-col-8);
    max-width: var(--of-col-8);
    width: var(--of-col-8);
  }

  .ofForm_ctrl_container.ofCol-9, .ofCol-lg-9 {
    -ms-flex: 0 0 var(--of-col-9);
    flex: 0 0 var(--of-col-9);
    max-width: var(--of-col-9);
    width: var(--of-col-9);
  }

  .ofForm_ctrl_container.ofCol-10, .ofCol-lg-10 {
    -ms-flex: 0 0 var(--of-col-10);
    flex: 0 0 var(--of-col-10);
    max-width: var(--of-col-10);
    width: var(--of-col-10);
  }

  .ofForm_ctrl_container.ofCol-11, .ofCol-lg-11 {
    -ms-flex: 0 0 var(--of-col-11);
    flex: 0 0 var(--of-col-11);
    max-width: var(--of-col-11);
    width: var(--of-col-11);
  }

  .ofForm_ctrl_container.ofCol-12, .ofCol-lg-12 {
    -ms-flex: 0 0 var(--of-col-12);
    flex: 0 0 var(--of-col-12);
    max-width: var(--of-col-12);
    width: var(--of-col-12);
  }
}

.newLineTag {
  display: block;
  float: left;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
}

.ofForm_ctrl_container.ofDisabled .ctrlLabel label {
  color: var(--of-grey700);
}


span.ofLanguageSelection.ofSelectedLanguage {
  background-image: url("../images/checkmarkenabled10.png");
  background-repeat: no-repeat;
  display: inline;
  padding-right: 10px !important;
  /*margin-left: -10px;*/
  position: relative;
  top: 3px;
  right: -5px;
}

  span.ofLanguageSelection.ofSelectedLanguage + span {
    display: inline;
    /*margin-left: -10px;*/
    padding-left: 6px;
  }

.ofLanguageSelection {
  width: 20px;
}

.ofForm_ctrl_container svg.required {
  width: 8px;
  min-width: 8px;
  height: 8px;
  min-height: 8px;
  display: inline-block;
  fill: var(--of-red400);
  margin-right: 2px;
  margin-bottom: 3px;
  align-self: flex-start;
}

.ofForm_ctrl_container div.help > svg {
  width: 16px;
  height: 16px;
  display: inline-block;
  fill: var(--of-grey500);
  position: relative;
}

.ofForm_ctrl_container div.help > svg:hover {
    background: var(--of-grey200);
    border-radius: 4px;
}

.ofForm_ctrl_container div.error > svg {
  width: 16px;
  height: 16px;
  fill: var(--of-red400);
}

.ofForm_ctrl_container .ctrlLabel {
  display: flex;
  flex-flow: row nowrap;
  /*justify-content: space-between;*/ 
  min-height: 20px;
}

  .ofForm_ctrl_container .ctrlLabel > div:first-child {
    margin-top: 2px;
    display: flex;
    align-items: baseline;
  }


.ofDisabled.ofForm_ctrl_container .ctrlMetaAttribute {
  color: var(--of-grey500);
}

.ofDisabled.ofForm_ctrl_container .ctrlAddElements .ctrlAction {
  cursor: not-allowed;
  pointer-events: none;
  fill: #AAAAAA;
}

.ofForm_ctrl_container .ctrlMain.ofHasCtrlMeta {
  display: flex;
}

.ofForm_ctrl_container .ctrlMain {
  display: table-row;
}

  .ofForm_ctrl_container .ctrlMain .ofControlsContainer {
    display: table-cell;
  }

/*.ofForm_ctrl_container .ctrlMain.ofHasCtrlMeta .ofControlsContainer {
    flex-grow: 1;
  }
*/

.ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements {
  padding-left: 0px;
}

.ofHasCtrlMeta.ctrlMain > .ofControlsContainer > *,
.ofHasCtrlMeta.ctrlMain > .ofControlsContainer .uploadFileName {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.ofForm_ctrl_container .ctrlAddElements {
  padding-left: 5px;
  display: table-cell;
  vertical-align: middle;
}

.ofDisabled.ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements .ofIcon {
  pointer-events: none;
  fill: var(--of-grey400);
}

.ofDisabled.ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements .ofImageButton,
.ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements .ofDisabled.ofImageButton{
  pointer-events: none;
  background:var(--of-grey150);
}

.ofForm_ctrl_container .ctrlAddElements > div {
  display: flex;
  align-items: center;
}

.ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute {
  border-style: solid;
  border-color: var(--of-input-border);
  border-width: 1px 1px 1px 0px;
  border-top-right-radius: 2px;
  border-bottom-right-radius: 2px;
  height: 100%;
  box-sizing: border-box;
}


.ofTabbedFocus:focus, .ofTabbedFocus:focus-within {
  outline-style: solid !important;
  outline-width: 1px !important;
  outline-color: var(--of-secondary400) !important;
}

.ofTabbedFocus.jqx-validator-error-element:focus, .ofTabbedFocus.jqx-validator-error-element:focus-within {
  outline-style: solid !important;
  outline-width: 1px !important;
  outline-color: var(--of-error) !important;
}


.ofForm_ctrl_container:has(.ofTabbedFocus) .ofHasCtrlMeta .ctrlAddElements {
  outline-color: var(--of-secondary400);
  border-color: var(--of-secondary400);
}

.ofForm_ctrl_container:has(.ofTabbedFocus.jqx-validator-error-element) .ofHasCtrlMeta .ctrlAddElements {
  outline-color: var(--of-error);
  border-color: var(--of-error);
}

.ofForm_ctrl_container:has(.ofTabbedFocus:focus-within) .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute {
  outline: solid 1px !important;
  outline-color: inherit !important;
  border-color: inherit;
}


.ofForm_ctrl_container.ofDisabled .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute {
  border-color: var(--of-grey300);
}

.ofForm_ctrl_container .ctrlAddElements > .ctrlMetaAttribute > button {
  height: 30px;
  width: 30px;
  margin: -1px 5px 0 5px;
}

.ofForm_ctrl_container .ctrlAddElements > .ctrlMetaAttribute .ofIcon {
  border: none;
}

.ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute > .ofMetaText {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  background: var(--of-grey150);
  padding: 0px 13px;
  border-style: solid;
  border-color: var(--of-input-border);
  border-width: 0px 1px 0px 0px;
  border-radius: 0;
}

.ofForm_ctrl_container .ctrlMetaAttribute > .ofControlsContainer > * {
  margin: -1px;
  z-index: 1;
  position: relative;
}


  .ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute .ofImageButton {
    height: 100%;
  }

  .ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute .ofIcon {
    width: 20px;
    padding: 0px 1px;
  }

  .ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute .ofIcon,
  .ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute > .ofUnitSelector {
    border-style: solid;
    border-color: var(--of-input-border);
    border-width: 0px 1px 0px 0px;
    border-radius: 0;
    height: 100%;
  }

  .ofForm_ctrl_container.ofDisabled .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute .ofIcon,
  .ofForm_ctrl_container.ofDisabled .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute > .ofMetaText, 
  .ofForm_ctrl_container.ofDisabled .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute > .ofUnitSelector {
    border-color: var(--of-grey300);
  }

  .ofForm_ctrl_container.borderBoxImportant .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute .ofIcon {
    padding: 0px;
  }

  .ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute > .ofImageButton:last-child .ofIcon,
  .ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute > .ofMetaText:last-child,
  .ofForm_ctrl_container .ofHasCtrlMeta .ctrlAddElements > .ctrlMetaAttribute > .ofUnitSelector:last-child {
    border: none;
  }

  .ofForm_ctrl_container .ctrlAddElements .ctrlAction {
    padding: 0;
    background: transparent;
    border: none;
    fill: var(--of-grey800);
  }

.ofForm_ctrl_container .ctrlAddElements .ctrlAction:focus {
  outline: none;
}

.ofForm_ctrl_container .ctrlAddElements .ctrlAction::-moz-focus-inner {
  border: none;
}

.ofForm_ctrl_container .ctrlAddElements .ctrlAction:enabled {
  cursor: pointer;
}

.ofForm_ctrl_container .ctrlAddElements .ctrlAction svg {
  width: 22px;
  height: 22px;
  padding: 4px;
  border: 1px solid transparent;
}

.ofForm_ctrl_container #qsMainSB .ctrlAddElements .ctrlAction svg {
  vertical-align: middle;
  padding-top: 0;
  fill: rgb(38, 38, 38) !important;
}

.ofForm_ctrl_container #qsMainSB .ctrlAddElements .ctrlAction:hover svg {
  border: 1px solid transparent;
}

.ofSpinner {
  background: var(--of-spinner);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 30px;
}

.qsLoadingGif.ofSpinner {
  width: 30px;
  height: 30px;
  background-size: 24px;
}

/* Placeholder font styles*/
::-webkit-input-placeholder {
  font-style: italic !important;
  color: var(--of-grey400) !important;
}

:-moz-placeholder {
    font-style: italic !important;
}

::-moz-placeholder {
    font-style: italic !important;
}

:-ms-input-placeholder {
    font-style: italic !important;
}

::placeholder {
    font-style: italic !important;
    color: var(--of-grey400) !important;
}

.ofForm_ctrl_container .ctrlAddElements .ctrlAction:hover svg {
  border: 1px dotted #525252;
}

.ofForm_ctrl_container .ctrlAddElements .ctrlAction:enabled:hover {
  fill: var(--of-accent400);
}

.ofForm_ctrl_container .ctrlAddElements .ctrlAction:active:hover {
  fill: var(--of-primary500);
}

  .ofForm_ctrl_container .ctrlAddElements .ctrlAction:active:hover svg {
    border: 1px solid transparent;
  }

.app_alerts .ofHeaderMenuIcon {
  position: relative;
}

  .app_alerts .ofHeaderMenuIcon::after {
    opacity: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    height: 60%;
    width: 60%;
    border-radius: 100%;
    animation-name: ripple;
    animation-duration: 3s;
    animation-delay: 0s;
    animation-iteration-count: 3;
    animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
    z-index: -1;
  }

  .app_alerts .ofHeaderMenuIcon::before {
    opacity: 0;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    height: 60%;
    width: 60%;
    border-radius: 100%;
    animation-name: ripple;
    animation-duration: 3s;
    animation-delay: 0.5s;
    animation-iteration-count: 3;
    animation-timing-function: cubic-bezier(0.65, 0, 0.34, 1);
    z-index: -1;
  }

@keyframes ripple {
  from {
    opacity: 1;
    transform: scale3d(0.75, 0.75, 1);
  }

  to {
    opacity: 0;
    transform: scale3d(1.7, 1.7, 1);
  }
}

.app_alerts.ofAlertUrgent .ofHeaderMenuIcon::before {
  border: 8px solid rgba(231,32,37,0.8);
}

.app_alerts.ofAlertUrgent .ofHeaderMenuIcon::after {
  border: 8px solid rgba(231,32,37,0.8);
}

.app_alerts.ofAlertUrgent svg {
  fill: #e72025;
}

.ofLink.menuIcon.app_alerts.ofAlertUrgent svg {
  fill: #e72025;
}

.app_alerts.ofAlertNonUrgent .ofHeaderMenuIcon::before {
  border: 8px solid rgba(255,68,0,0.8);
}

.app_alerts.ofAlertNonUrgent .ofHeaderMenuIcon::after {
  border: 8px solid rgba(255,68,0,0.8);
}

.app_alerts.ofAlertNonUrgent svg {
  fill: var(--of-red300);
}

.ofLink.menuIcon.app_alerts.ofAlertNonUrgent svg {
  fill: var(--of-red300);
}

.app_alerts.ofAlertInfo .ofHeaderMenuIcon::before {
  border: 8px solid rgba(0,119,0,0.8);
}

.app_alerts.ofAlertInfo .ofHeaderMenuIcon::after {
  border: 8px solid rgba(0,119,0,0.8);
}


.app_alerts svg {
  fill: var(--of-white500);
}

.ofForm_ctrl_container .ctrlLabel label {
  font-size: 12px;
  color: var(--of-grey700);
  font-weight: 500;
  letter-spacing: 0.1px;
}

.ofForm_ctrl_container label {
  display: inline-block;
  margin: 0 2px 4px 0;
  color: var(--of-grey900);
  font-weight: 400;
  letter-spacing: 0;
}

.ofForm_ctrl_container label.jqx-validator-error-label {
  display: none !important;
}

.ofForm_ctrl_container .jqx-checkbox-disabled label {
  color: var(--of-grey600);
}

.ofForm_ctrl_container.ofReadOnly label {
  margin: 0 2px 0px 0;
  font-size: 12px;
  color: var(--of-grey700);
  padding-left: 0;
}

.ofForm_ctrl_container.ofReadOnly {
  margin: 5px 5px 10px 0;
  padding-left: 15px;
}

#stopReason.ofFieldText {
  padding-bottom: 15px !important;
}

.ofForm_ctrl_container > .ctrlMain > div > input:not([type='button']) {
  display: block;
  height: 24px;
}

.ofTextArea {
  min-width: 200px;
  min-height: 50px;
}

.ofTextAreaCount {
  font-size: 12px;
}

.ofForm_ctrl_container.oFTextAreaControl.borderBoxImportant {
  position: relative;
}

  .ofForm_ctrl_container.oFTextAreaControl.borderBoxImportant > .ctrlMetaAttribute {
    position: absolute;
    width: 100%;
    right: 0;
    height: 10px;
    margin-right: 12px;
    bottom: 5px;
  }

#ofsalutation {
  min-height: 45px;
  line-height: 22px;
  display: flex;
  flex-direction: column;
  margin-top: 10px;
  color: var(--of-primary500);
}

.ofSalutation {
  padding: 0 10px;
  font-size: 18px;
  font-weight: 300;
  margin: auto 0px;
}

.ofDomain {
  padding: 3px 10px;
  font-weight: 300;
  font-size: 12px;
  word-break: break-all;
  line-height: 14px;
}


.ofAppLogo {
  max-height: 30px;
  margin: 6px 5px 2px 5px;
}

.ofMain_notificationBar {
  border-color: #a5b3c5;
  border-width: 1px;
  border-style: solid;
  display: table;
  width: 100%;
}

  .ofMain_notificationBar .ofMessage {
    vertical-align: middle;
    text-align: center;
    height: 25px;
    width: 100%;
    clear: both;
    right: 0;
    left: 0;
    line-height: 25px;
  }

    .ofMain_notificationBar .ofMessage span {
      position: absolute;
      right: 3px;
    }

.ofMain_notificationBar {
  margin: 0;
}

    .ofMain_notificationBar .ofColor_error {
        background-color: #e27025;
        color: white;
    }

    .ofMain_notificationBar .ofColor_warning {
        background-color: var(--of-red300);
        color: white;
    }

    .ofMain_notificationBar .ofColor_good {
        background-color: #007700;
        color: white;
    }

    .ofMain_notificationBar .ofColor_neutral {
        background-color: var(--of-primary500);
        color: white;
    }

.ofStatus.ofColor_warning {
  color: var(--of-red300);
}

.ofStatus.ofColor_good {
  color: #007700;
}

.ofStatus.ofColor_neutral {
  color: var(--of-primary500);
}

.ofColor_disabled {
  color: #AAAAAA;
}

.ofColor_active {
  color: #004488;
}

.ofColor_enabled {
  color: var(--of-grey900);
}

.ofColor_blue {
  color: var(--of-primary500);
}

.ofColor_green {
  color: var(--of-green300);
}

.ofColor_red {
  color: #aa0003;
}

.ofColor_purple {
  color: #814a9d;
}

.ofColor_orange {
  color: #ff9922;
}

.ofColor_hover, .ofColor_enabled:hover {
  color: var(--of-accent400);
}

.ofStrokeColor_accent {
  fill: var(--of-primary500) !important;
}

  .ofStrokeColor_accent use > svg {
    fill: var(--of-primary500) !important; /*fix issue in Firefox*/
  }

.ofBgColor_highlight {
  background-color: var(--of-primary300);
}

.ofBgColor_lightgray {
  background-color: var(--of-grey300);
}

input[type="text"] {
  height: 24px;
}
/*user page layout*/
.ofUserPage {
  min-width: 530px;
}

  .ofUserPage .brandlogo {
    max-width: 240px;
    max-height: 150px;
  }

  .ofUserPage .top {
    width: 100%;
    height: 200px;
    padding-bottom: 10px;
    display: flex;
  }

    .ofUserPage .top div {
      flex-grow: 1;
      flex-basis: 0;
      display: flex;
      justify-content: center;
      align-items: flex-end;
    }

  .ofUserPage .banner {
    color: white;
    font-size: 24px;
    width: 100%;
    height: 46px;
    line-height: 46px;
    text-align: center;
    background-color: var(--of-primary500);
    flex-shrink: 0;
  }

  .ofUserPage .content {
    width: 530px;
    height: 320px;
    display: inline-block;
    border: 1px solid #d3d3d3;
    margin-top: 10px;
    padding-top: 10px;
    font-size: 14px;
    text-align: center;
    background-color: white;
  }

    .ofUserPage .content .button_area {
      display: flex;
      margin: 0 auto;
      justify-content: space-around;
    }

  .ofUserPage footer {
    position: fixed;
    bottom: 0;
    width: 100%;
  }

  .ofUserPage .links {
    display: flex;
    justify-content: space-between;
    font-size: 16px;
    margin: 30px 100px;
  }

    .ofUserPage .links a {
      text-decoration: none;
    }

.ofLoginDsglogo {
  width: 55px;
  margin-top: 10px;
  margin-left: -10px;
}

.dsglogo {
  width: 240px;
  margin-left: auto;
}


/*placeholder for the icon image*/
.ofLoginLogo {
  background-color: var(--of-primary500);
  width: 80px;
  height: 80px;
  position: relative;
  left: 50%;
  margin-bottom: 10px;
  margin-left: -40px; /*half the width of the container*/
  /*margin-top: -100px; /*80px height + 20 px whitespace*/
  border-radius: 70px;
}


@media only screen and (max-width: 450px) {
  .ofMain_footer {
    font-size: 8px;
    padding-top: 4px;
    /*height: 1.6em;*/
    overflow: hidden;
    flex-shrink: 0;
  }

    .ofMain_footer .machine_span {
      /*display: block;
        float: left;*/
      padding-top: 3px;
    }

    .ofMain_footer .mach, .ofMain_footer .copy, .ofMain_footer .term {
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      float: left;
      white-space: pre-line;
      word-wrap: break-word;
      padding-right: 3px;
      line-height: 90%;
      padding-top: 3px;
    }

    .ofMain_footer .mach {
      /* left: 3px;*/
      width: 100%;
      text-align: center;
    }

    .ofMain_footer .copy {
      width: 100%;
      text-align: center;
    }

    .ofMain_footer .term {
      width: 100%;
      text-align: center;
    }

    .ofMain_footer .version {
      /* text-align: right;*/
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      float: left;
      /*padding-right: 3px;*/
      display: inline-block;
      width: 100%;
      /*line-height: 80%;*/
      text-align: center;
    }
}

@media only screen and (min-width: 1200px) {
  .ofMain_footer {
    font-size: 10px;
    height: 1.2em;
  }
}

/*----------------oFRow----------------*/

.ofRow {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  align-items: flex-start;
  box-sizing: border-box;
}

  .ofRow.ofNoWrap {
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .ofRow.ofSearch {
    padding: 5px 15px 15px 15px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

    .ofRow.ofSearch input:first-child {
      margin-right: 15px;
    }

    .ofRow.ofSearch > :first-child {
      margin-right: 15px;
    }

    .ofRow.ofSearch > div:first-child:not(:last-child) > input:not(:last-child) {
      margin-right: 15px;
    }

    .ofRow.ofSearch > div:last-child > input:not(:first-child) {
      margin-right: 15px;
    }

    @media only screen and (max-width: 1200px) {
      .ofRow.ofSearch > div > input, .ofRow.ofSearch > input {
        margin-top: 15px
      }
    }

  .ofRow.ofSectionRow {
    display: grid;
    grid-column-gap: calc(var(--of-rl-margins) / 2);
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }

    .ofRow.ofSectionRow > .ofSection {
      -ms-flex: unset;
      flex: unset;
      max-width: unset;
    }

.ofSection .ofContent .ofRow.ofSectionRow {
  padding: 0px 15px;
}

.ofRow > * > button:not(:last-child) {
  margin-right: 15px;
}

/* column picker styles -- start */
  .of_columnPickerWin {
    display: none;
    position: fixed;
    z-index: 5000;
    padding-top: 100px;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: black;
    background-color: rgba(0, 0, 0, 0.4);
  }

    .of_columnPickerWin .modal-content {
      position: relative;
      background-color: #fefefe;
      margin: auto;
      padding: 0;
      width: 80%;
      max-width: 414px;
      min-width: 430px; /*temporary solution until column picker is re-written*/
      font-size: 14px;
      box-shadow: 0 0 10px 2px #555555;
    }

    .of_columnPickerWin .modal-header {
      display: flex;
      flex-flow: row;
      justify-content: space-between;
      align-items: center;
      color: var(--of-primary500);
      height: 30px;
      padding-left: 15px;
      padding-top: 5px;
    }

      .of_columnPickerWin .modal-header > div {
        display: flex;
        align-items: center;
        padding-right: 5px;
        font-weight: 400;
        font-size: 16px;
      }

    .of_columnPickerWin .close {
      width: 22px;
      height: 22px;
      cursor: pointer;
      overflow: hidden;
      fill: #818181;
    }

    .of_columnPickerWin .close.ofCpStateChanged {
      fill: var(--of-secondary400);
    }

    .of_columnPickerWin .modal-body {
      display: flex;
      flex-flow: row wrap;
      justify-content: space-between;
      align-items: center;
    }

.ofColumnPickModal {
    margin-top: 0.5em;
    padding-left: 0px;
}

.ofColumnPicker {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.ofColumnPicker .ofColumnPickerArrows {
    display: flex;
    justify-content: center;
    width: 185px;
}

.ofColumnPicker .ofColumnPickerArrows > svg {
    margin: 5px 3px 0px 3px;
}

.ofColumnPicker .ofColumnPickModal .ofForm_ctrl_container.ofColumnPickerContainer {
    margin: 0px;
}

.ofListBox .ofListBoxDragItem {
    display: flex;
    align-content: center;
    height: 20px;
}

.itemNameLine {
  width: 150px;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.ofListBox .ofListBoxDragItem .ofListBoxDragItemBorder {
    width: 100%;
    border-bottom: 1px solid #DCDCDC;
    position: absolute;
    bottom: 0px;
    left: 0px;
}
/* column picker styles -- end */
/* Expander  and window x Icon hover state */
.ofSavedSearch {
  display: flex;
  border-left: 1px solid var(--of-grey300);
  border-right: 1px solid var(--of-grey300);
  cursor: default;
  background: rgba(255, 255, 255, 0.4);
  float: right;
}

    .ofSavedSearch .ofInfoTip .ofInfoTipContent{
      max-width: 300px;
    }

    .ofSavedSearch .ofInfoTip .ofInfoTipContent div {
      margin: 0px 0px 5px 0px;
    }

  .ofSearchIcon {
    float: right;
  }

  .ofSection_header {
    position: relative;
    height: 100%;
    width: 100%;
    display: flex;
  }

    .ofSection_header .ofSectionHeaderText {
      flex-grow: 1;
      /*min-width: fit-content;*/
      display: flex;
      margin: auto 0px;
      line-height: 42px;
    }

.ofSection_header .oFTitleGroup{
    display:inline-block;
}

.ofSection.saveSearchOpenned > .ofHeader {
    transition: padding-bottom 0.5s;
}
@media only screen and (max-width: 740px) {

    .ofSearchSection .ofSection_header {
        position: static;
    }

    .ofSection.saveSearchOpenned > .ofHeader {
        padding-bottom: 22px !important;
    }

    .ofSearchSection .ofSavedSearch {
        position: absolute;
        top: 30px;
        width: 290px;
        z-index: 400;
        left: 0px;
        border: none;
    }

    .ofSearchSection .ofSection_header:has(.ofHasSavedSearch) {
        display: flex;
    }
}

.ofTabSections {
    margin-bottom: 15px;
    border: none;
    flex-shrink: 0;
  }

    .ofTabSections > div > ul > li > svg {
      width: 24px;
      height: 24px;
      fill: var(--of-white500);
      padding: 0 6px 10px 3px;
    }

  .ofTabSections .jqx-tabs-content > .ofSection {
    margin: 0 0.1px 0 0;
  }

    .ofTabSections .ofSection .ofSection_header {
      width: 100%;
    }

  .ofTabSections .ofSearchSection .ofSection_header {
    width: 100%;
  }

  .ofTabSections .ofIcon.ofTabHeaderIcon {
    border: none;
  }

    .ofTabSections .ofIcon.ofTabHeaderIcon:hover {
      fill: #212121;
      border: none;
    }

/* File Upload Styles Start */

  .ofFileUpload {
    display: flex;
  }
    .ofFileUploadPreviewHeader{
      font-weight: normal;
      font-size: 12px;
      background: #F2F2F2;
      color: var(--of-grey900);
      padding-bottom: 2px;
      overflow: hidden;
      text-overflow: ellipsis;
      text-align: left;
      margin-left: 4px;
      margin-right: 2px;
      line-height: 30px;
    }
    
     .ofFileUploadPreviewBody{
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-bottom: 2px;
        text-align: left;
        margin-right: 2px;
        margin-left: 4px;
    }

    .ofFileUpload .buttonArea {
      display: flex;
      position: relative;
      margin-right: 0;
      margin-bottom: 0;
    }

  .ofFileUpload .buttonArea > [type="file"] {
    top: 0;
    left: 0;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    z-index: 1000;
    width: 1px;
    margin-left: 0px;
  }

  .ofFileUpload .nameArea {
    display: flex;
    position: relative;
    margin-left: -1px;
    flex-grow: 1;
  }

    .ofFileUpload .nameArea > .uploadFileName {
      padding-right: 20px;
      padding-left: 3px;
      flex-grow: 1;
      width: 100%;
      border-radius: 0px 2px 2px 0px;
      border-width: 1px 1px 1px 0px;
    }

    .ofForm_ctrl_container:not(.ofDisabled) .ofFileUpload .uploadFileName {
      border-color: var(--of-input-border);
    }

    .ofFileUpload .nameArea > svg {
      position: absolute;
      right: 2px;
      top: 50%;
      height: 10px;
      width: 10px;
      transform: translate(0, -50%);
    }



.ofFileUpload input[type=button].browseFile.ofButton {
  /*height: 30px !important;*/ /* Browse button Height because browse button and file input field sharing same input height*/
  border-radius: 5px 0px 0px 5px;
}

input[type="button"].ofUpload.ofButton {
  height: 24px;
}

/* THIS SHOULD NOT BE A STYLE. PLEASE DO NOT USE THIS */
#uploadFile.ofButton {
  min-width: 64px;
  border-radius: 1px;
}


/*Merge conflict addition from dev START*/
.ofActionPanel li {
  cursor: pointer;
}

  .ofActionPanel li.ofDisabled {
    cursor: default;
    pointer-events: none;
  }
/*Merge conflict addition from dev END*/

  .ofActionPanel.ofIconPanel {
    display: none;
    position: fixed;
    float: initial;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 20000; /*Set z-index with 20000 because Modal Window has 18000*/
    width: 114px;
    height: auto;
    background: var(--of-white500);
    border-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
    padding: 3px 3px 0 0;
    margin: 0px
}

.ofActionPanel.ofText {
  display: none;
  position: fixed;
  float: initial;
  background-color: #f9f9f9;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 20000; /*Set z-index with 20000 because Modal Window has 18000*/
  width: auto;
  height: auto;
  background: var(--of-white500);
  border-style: solid;
  border-width: 1px;
  border-color: #aaaaaa;
  padding: 2px 0px;
  margin-left: 0px;
  font-size: 14px;
  font-style: normal;
  line-height: 1.231;
  overflow: auto;
}

  .ofActionPanel.ofIconPanel .ofImageButton {
    display: inline-block;
    width: 28px;
    margin: 5px 5px 5px 5px;
    padding: 0px;
    float: left;
  }

  .ofActionPanel.ofIconPanel .ofSmall.ofIcon {
    width: 24px;
    padding: 2px;
  }

  .ofActionPanel.ofText ol {
    list-style-type: none;
    padding-left: 0px;
    padding-right: 0px;
    text-indent: 0px;
    color: black;
    margin: 0px;
  }

  .ofActionPanel.ofText ol li {
    padding: 5px;
    text-align: left;
  }

  .compactModeSettingsItem.ofActive, .ofActionPanel.ofText ol li:hover {
    background: #EBF8FF;
  }

  .ofActionPanel.ofText ol li.ofDisabled {
    opacity: 0.5;
  }

  .ofActionPanel.ofText ol li.ofDisabled:hover {
    background: #fff;
    cursor: default;
  }

  .ofActionPanel.ofText ol li.ofHide, .ofActionPanel.ofText ol hr.ofHide {
    display:none;
  }


  /*  Tile Docking and Tile Control  */


.ofTileDocking {
  display: flex;
  flex-wrap: wrap;
}

  .ofTileDocking .ofTile {
    padding: 5px 15px 15px 15px;
  }

  .ofTileDocking .ofWindow {
    border: none;
    margin: 0 !important;
    border-color: #dcdcdc;
    border-width: 1px;
    border-style: solid;
    padding-left: 0px;
    height: 80px !important;
  }

    .ofTileDocking .ofWindow.ofGrouped {
      border-width: 2px;
      margin: 15px 15px 0px 0px;
      border-radius: 1px;
    }

  .ofTileDocking.ofTileLimitedSpace .ofWindow {
    height: auto !important;
  }

  .ofTileDocking .ofWindow.ofGrouped:hover {
    background-color: #ebf8ff;
  }

.ofWindow.ofGrouped.ofSelected {
  background-color: var(--of-accent100) !important;
  color: var(--of-primary500);
  border-color: var(--of-primary500) !important; /* set inline, important needed to override */
}

.ofTileLimitedSpace {
  padding: 0px 0px 10px 0px !important;
  min-height: 50px !important;
}

  .ofTileLimitedSpace div {
    padding: 0px !important;
    height: auto !important;
  }

    .ofTileLimitedSpace div > span {
      padding: 0px !important;
      height: auto !important;
    }

.ofTile {
  z-index: 5;
  text-align: center;
  padding-left: 0px;
  background-color: transparent !important; /* For selected/hover state to work */
  cursor: pointer;
}

  .ofTile div {
    font-size: 14px;
    font-weight: 400;
    padding-top: 4px;
    padding-bottom: 1px;
    text-align: center;
  }

  .ofTile span {
    font-size: 24px;
    font-weight: 400;
  }

  .ofTile .ofLink {
    text-decoration: underline;
  }

  .ofTile .help {
    display: inline-block;
    margin-left: 5px;
    padding-top: 0px;
  }

    .ofTile .help svg {
      width: 14px;
      height: 14px;
      fill: var(--of-grey900);
    }



/*  Tile Docking and Tile Control -- FEATURE FLAGGED */

.ofNewFeature_TileDocking.ofTileDocking {
  display: flex;
  flex-wrap: wrap;
}

  .ofNewFeature_TileDocking.ofTileDocking .ofTile {
    padding: 5px 15px 15px 15px;
  }

  .ofNewFeature_TileDocking.ofTileDocking .ofWindow {
    border: none;
    margin: 0 !important;
    border-color: #dcdcdc;
    border-width: 0px;
    border-style: solid;
    padding-left: 0px;
    height: 80px !important;
    box-shadow: 2px 1px 4px 1px rgba(0, 0, 0, 0.1);
    border-radius: 5px;
  }

    .ofNewFeature_TileDocking.ofTileDocking .ofWindow.ofGrouped {
      border-width: 0px;
      margin: 15px 15px 0px 0px;
    }

  .ofNewFeature_TileDocking.ofTileDocking.ofTileLimitedSpace .ofWindow {
    height: auto !important;
  }

  .ofNewFeature_TileDocking.ofTileDocking .ofWindow.ofGrouped:hover {
    background-color: var(--of-accent100);
  }

.ofNewFeature_TileDocking .ofWindow.ofGrouped.ofSelected {
  background-color: var(--of-accent300) !important;
  color: var(--of-white500) !important;
  border-color: var(--of-primary500) !important; /* set inline, important needed to override */
}

  .ofNewFeature_TileDocking .ofWindow.ofGrouped.ofSelected .ofIcon {
    fill: var(--of-white500) !important;
  }

.ofNewFeature_TileDocking .ofTileLimitedSpace {
  padding: 0px 0px 10px 0px !important;
  min-height: 50px !important;
}

  .ofNewFeature_TileDocking .ofTileLimitedSpace div {
    padding: 0px !important;
    height: auto !important;
  }

    .ofNewFeature_TileDocking .ofTileLimitedSpace div > span {
      padding: 0px !important;
      height: auto !important;
    }

.ofNewFeature_TileDocking .ofTile {
  z-index: 5;
  text-align: center;
  padding-left: 0px;
  background-color: transparent !important; /* For selected/hover state to work */
  cursor: pointer;
  display: flex;
  flex-wrap: nowrap;
}

  .ofNewFeature_TileDocking .ofTile div {
    font-size: 14px;
    font-weight: 400;
    padding-top: 4px;
    padding-bottom: 1px;
    text-align: left;
    font-weight: 400;
  }

  .ofNewFeature_TileDocking .ofTile span {
    font-size: 32px;
    font-weight: 500;
  }

  .ofNewFeature_TileDocking .ofTile .ofLabel {
    font-size: 12px;
    line-height: 20px;
    padding-top: 0px;
    display: flex;
  }

  .ofNewFeature_TileDocking .ofTile .ofIcon {
    width: 46px;
    height: 46px;
    fill: var(--of-grey300);
    margin-left: auto;
  }

  .ofNewFeature_TileDocking .ofTile .ofLink {
    text-decoration: underline;
  }

  .ofNewFeature_TileDocking .ofTile .help {
    display: inline-block;
    margin-left: 5px;
    padding-top: 0px;
    display: flex;
    align-self: center;
  }

    .ofNewFeature_TileDocking .ofTile .help svg {
      width: 14px;
      height: 14px;
      fill: var(--of-grey900);
    }

.ofNewFeature_TileDocking .ofWindow.ofGrouped.ofSelected .ofTile .ofValue, .ofWindow.ofGrouped.ofSelected .ofTile .ofLabel, .ofWindow.ofGrouped.ofSelected .ofTile .help svg {
  color: var(--of-white500) !important;
  fill: var(--of-white500) !important;
}

.ofTile .ofColor_neutral,
.ofTile .ofColor_error,
.ofTile .ofColor_warning {
  color: unset;
}

.ofColor_neutral {
  color: var(--of-primary500);
}

  .ofFlagColumn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

.ofBoolColumn {
    /*pointer-events: none;*/
    display: block;
    margin: auto;
    justify-content: center;
    align-items: center;
}

/* Page loading spinner */

.ofLoading_Background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #555555;
    opacity: .18;
    -webkit-opacity: .18;
    -moz-opacity: .18;
    filter: alpha(opacity=18);
    z-index: 49999;
}

.ofLoading {
  position: absolute;
  border: 1px solid #AAAAAA;
  border-radius: 3px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  z-index: 50000;
  background: var(--of-spinner);
  background-color: var(--of-white500);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: 9px;
  background-size: 50px;
}
  .ofLoading:not(.landscape) {
    height: 75px;
    justify-content: end;
  }

  .ofLoading.landscape {
    flex-direction: row;
    background-size: 20px;
    background-position-x: 8px;
    background-position-y: center;
  }

  .ofLoading span {
    font-size: 14px;
  }

  .ofLoading.landscape span {
    margin-left: 26px;
  }

    .ofLoading.noBorder {
      border: none;
    }

/* Page loading spinner END*/


  .ofMain_content {
    display: flex;
    flex-direction: column;
    flex-shrink: 1;
  }

  .ofMain_appImperium {
    flex-shrink: 1;
    overflow: auto;
  }

  /*IMAGE VIEWER CONTROL*/
  .ofImageViewer.ofNavigation .ofItem img {
    cursor: pointer;
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    max-height: 100%;
  }

.ofImageViewer.ofNavigation .ofItem.ofActive {
  background: var(--of-accent100);
  z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
  cursor: pointer; /* Add a pointer on hover */
}

  .ofImageViewer.ofNavigation .ofItem.ofActive:hover {
    background: var(--of-accent100);
  }

  .ofImageViewer.ofNavigation .ofItem:hover {
    background: #ebf8ff;
  }

  .ofImageViewer.ofNavigation .ofItem .pageCount {
    float: left;
    padding-right: 5px;
    font-size: 12px;
    color: var(--of-grey900);
    text-align: left;
  }

.ofImageViewer.ofNavigation .ofItem.ofActive .pageCount {
    color: var(--of-primary500);
}

  .ofImageViewer.ofNavigation .ofItem .thumbnailSelector .imageComment {
    position: absolute;
    left: 25%;
    top: 25%;
    font-size: 26px;
    color: black;
    text-shadow: 0px 1px 5px white;
    font-weight: 600;
  }

  .ofImageViewer.ofNavigation .ofItem .thumbnailSelector {
    height: 100%;
    width: 100%;
    float: left;
  }

  .ofImageViewer.ofNavigation .ofItemContainer {
    display: inline-block;
    overflow-y: auto;
    /*min-width: 182px;*/
    height: 100%;
    width: 100%;
  }

  .ofImageViewer.ofNavigation .ofItem {
    font-size: 14pt;
    position: relative;
    text-align: center;
    padding: 5px 10px 20px 5px;
    height: 150px;
    width: 150px;
  }

  .ofImageViewer.ofNavigation {
    margin-right: 0px;
    height: 100%;
    display: inline-block;
  }

  .ofImageViewer.ofContent img.ofLargeView {
    border-width: 0px;
    cursor: default;
    width: auto;
    height: auto;
    max-width: 100%;
    display: block;
    max-height: 100%;
  }

  .ofImageViewer.ofContent {
    margin-right: 0px;
    display: inline-block;
    height: 100%;
    width: 100%;
  }

    .ofImageViewer.ofContent .ofLargeImageView {
      max-width: 100% !important;
      max-height: 100% !important;
      width: 100%;
      display: inline;
      overflow: auto;
      user-select: none;
      flex-grow: 1;
      border: 1px solid #DCDCDC;
    }

      .ofImageViewer.ofContent .ofLargeImageView .ofImagePosition {
        height: 100%;
        width: 100%;
      }

  .ofImageViewer .ofImageContent {
    height: 100%
  }

  .ofImageViewer.ofContent .ofImageContent {
    display: flex;
    flex-direction: column;
    display: grid;
    grid-template-rows: auto 30px;
    position: relative;
  }

    .ofImageViewer.ofContent .ofImageContent .ofActionWrap .ofActions {
      display: inline-flex;
    }

    .ofImageViewer.ofContent .ofImageContent .ofActionWrap {
      text-align: center;
      width: 100%;
      border-top: 0px;
    }

.ofImageViewer.ofContent .ofActions .imgViewerPageNumber {
    width: 50px;
}

/* Remove arrows from <input type=number...> specifically for image viewer / Chrome, Safari, Edge, Opera */
.ofImageViewer .ofActions input::-webkit-outer-spin-button,
.ofImageViewer .ofActions input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.ofImageViewer .ofActions  input[type=number] {
    -moz-appearance: textfield;
}

  .ofImageViewer.ofContent .ofActions .imgViewerPageCount {
    display: inline;
  }

  .ofImageViewer.ofContent .ofActions div {
    display: inline;
  }

  .ofImageViewer .ofActions.ofDisabled svg {
    fill: #9A9A9A;
    pointer-events: none;
  }

  .ofImageViewer.ofContent .ofActions.ofDisabled input {
    background-color: #f8f8f8;
    border: #9a9a9a;
  }

  .ofImageViewer.ofContent .ofImageContent .ofActions div {
    margin: 0px 10px 0px 10px;
    user-select: none;
  }

  .ofImageViewer .ofHeader .ofActions {
    float: right;
    display: inline-flex;
  }


  /*TILE LIST CONTROL*/
  .ofTileList {
    display: inline-flex;
  }

  .ofTileList .ofList {
    overflow: hidden;
    display: inline-flex;
    margin-left: 0px;
    margin-right: 0px;
  }
  
  .ofTileList .ofList_ViewAll {
    overflow: unset;
    display: inline-block;
    margin-left: 29px;
    margin-right: 29px;
  }
  
  .ofTileList .ofList .ofItem {
    border-radius: 1px;
    border: 2px solid;
    width: 110px;
    height: 55px;
    margin: 0 10px 0 10px;
    float: left;
    background-color: white;
  }
  
  .ofTileList .ofList_ViewAll .ofItem_ViewAll {
    border-radius: 5px;
    border: 2px solid;
    width: 110px;
    height: 55px;
    margin-left: 10px;
    margin-right: 10px;
    float: left;
    margin-bottom: 20px;
    background-color: white;
  }
  
  .ofTileList .ofList .ofItem span {
    padding: 4px;
  }
  
  .ofTileList .ofList a {
    color: black !important
  }
  
  .ofTileList .ofList .ofItem .ofItemContent {
    line-height: 49px;
    text-align: center;
    text-decoration: underline;
    font-size: 14px;
  }
  
  .ofTileList .ofItem .ofItemContent span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }
  
  .ofTileList .ofAction_right, .ofAction_left {
    margin: auto;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
  }
  
  .ofTileList .ofAction_right.svgDisabled, .ofTileList .ofAction_left.svgDisabled {
    opacity: 0.5;
    pointer-events: none;
    cursor: default;
  }
  
  .ofTileList .ofAction_right_ViewAll, .ofTileList .ofAction_left_ViewAll {
    display: none;
  }
  
  .ofTileList .ofListLeft {
    float: left;
    transform: rotateX(270);
  }

  .ofTileList .ofListRight {
    float: right;
    transform: rotateX(270);
  }

  /*CALENDAR CARDS*/
  .ofTileList.ofCalendarCards {
    display: flex;
    justify-content: center;
    margin-bottom: 15px;
  }

  .ofTileList.ofCalendarCards .ofAction_right, .ofAction_left {
    margin: initial;
    margin-top: auto;
    margin-bottom: auto;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem {
    border-radius: 1px;
    border: 1px solid;
    border-color: #543f99;
    width: 165px;
    height: 40px;
    margin: 0 10px 0 10px;
    float: left;
    background-color: white;
    display: flex;
    cursor: pointer;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem:hover {
    background-color: #ebf8ff;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem.ofSelected {
    background-color: #d9f2ff;
    color: #0055aa;
    border-color: #0055aa;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem .ofCalendarItemText {
    flex: 0 0 40px;
    background-color: #543f99;
    text-align: center;
    color: white;
    display: flex;
    flex-flow: column;
    justify-content: center;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem.ofSelected .ofCalendarItemText {
    background-color: #0055aa;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem .ofCalendarItemText span {
    font-size: 16px;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem .ofCalendarItemContent {
    flex: 1;
    text-align: center;
    font-size: 14px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .ofTileList.ofCalendarCards .ofList .ofItem.ofCalendarItem span {
    display: block;
    padding: 0px;
    font-weight: 400;
  }
  
  /*SINGLE TILE CONTROL*/
  .ofSingleTile .ofItem {
    border-radius: 1px;
    border: 2px solid;
    width: 110px;
    height: 55px;
    margin: 10px;
    float: left;
    background-color: white;
  }

  .ofSingleTile .ofItem span {
    padding: 4px;
  }

.ofSingleTile a {
  color: black !important
}

.ofSingleTile .ofItem .ofItemContent {
  line-height: 49px;
  text-align: center;
  font-size: 14px;
}

  .ofSingleTile .ofItem .ofItemContent span {
    display: inline-block;
    vertical-align: middle;
    line-height: normal;
  }

  .ofMaskedInput {
    letter-spacing: 3px;
  }

  label.ofSample {
    display: inline-block;
    margin: 0 2px 4px 0;
    font-size: 12px;
    color: var(--of-grey900);
  }

  pre.ofSample {
    line-height: 1.2em;
    background: #F8F8F8;
    display: block;
    padding: 1em 1em;
    border: 1px solid #9A9A9A;
    margin-top: 2px;
    overflow:auto;
  }
  /* Search Page Checkbox Alignment*/
  .ofVertical_align .ofForm_ctrl_container {
    vertical-align: top;
  }

  .ofForm_ctrl_container.ofDisabled textarea {
    background-color: #f8f8f8;
    border: #9a9a9a;
  }

  /*Map Icon SVG CSS*/
  svg.ofBlueIcon {
    fill: var(--of-primary500);
  }

  svg.ofOrangeIcon {
    fill: #ff9922;
  }

  svg.ofRedIcon {
    fill: #d50000;
  }

  svg.ofGreenIcon {
    fill: var(--of-green300);
  }

  svg.ofPurpleIcon {
    fill: #814a9d;
  }

  .ofMapIcon_tearDrop {
    stroke-width: 5px;
    fill: #fff;
  }
  
  .ofMapIcon_tearDrop, .ofMapIcon_text {
    opacity: 0.7;
  }
  
  .ofMapIcon_tearDrop, .ofMapIcon_outerTearDrop, .ofMapIcon_circle, .ofMapIcon_text, .ofMapIcon_line, .ofMapIcon_arrow {
    stroke-miterlimit: 10;
  }
  
  .ofMapIcon_outerTearDrop {
    fill: none;
    opacity: 0.5;
  }
  
  .ofMapIcon_outerTearDrop, .ofMapIcon_circle, .ofMapIcon_line, .ofMapICon_arrow {
    stroke-width: 2px;
  }
  
  .ofMapIcon_circle {
    fill: #fff;
  }
  
  .ofMapIcon_text {
    font-size: 350px;
    font-weight: 300;
    text-anchor: middle;
    transform: translate(320px, 365px);
  }
  
  .ofMapIcon_text.ofIcon_arrow {
    transform: translate(265px, 365px);
  }
  
  .ofMapIcon_text.ofMapIcon_twoNum {
    font-size: 250px;
    letter-spacing: 0.05em;
    transform: translate(320px, 320px);
  }
  
  .ofMapIcon_text.ofMapIcon_twoNum.ofIcon_arrow {
    transform: translate(265px, 320px);
  }
  
  .ofMapIcon_text.ofMapIcon_threeNum {
    font-size: 190px;
    letter-spacing: 0.05em;
    transform: translate(320px, 320px);
  }
  
  .ofMapIcon_text.ofMapIcon_threeNum.ofIcon_arrow {
    transform: translate(265px, 320px);
  }
  
  .ofMapIcon_text.ofMapIcon_fourNum {
    font-size: 150px;
    letter-spacing: 0.05em;
    transform: translate(320px, 320px);
  }
  
  .ofMapIcon_text.ofMapIcon_fourNum.ofIcon_arrow {
    transform: translate(265px, 320px);
  }


/* Map icon svg change classes */
.ofTearDropFill{
  opacity: 1;
}

.ofTearDropCutout {
  opacity: 0;
}

.ofTearDropShadow {
  opacity: 0;
}

.ofTearDropOutline {
  opacity: 0;
}
/* Map icon svg change classes ENDS*/

/*End -- GIS Map Marker Icons*/

/* Maps.css MATCHING ENDS */


.ofIcon_overlay {
  transform: scale(0.6) translate(400px, 370px);
}

  .ofIcon:hover .ofIcon_overlay .ofWhiteLayer {
    fill: var(--of-grey200);
  }

.ofIcon_teardropOverlay {
  transform: scale(0.45) translate(365px, 226px);
}

  .ofIcon_teardropOverlay.ofIcon_arrow {
    transform: scale(0.45) translate(270px, 226px);
  }

/*css for Question Dialog Window*/

#questionDialog_ofWindowContent_buttonArea {
    display: flex;
    justify-content: space-between;
    margin-top: 1em;
    padding-left: 0px;
    align-items: baseline;
    flex-wrap: wrap;
}
  #questionDialog_ofWindowContent_buttonArea > span {
    padding: 5px 15px 15px 0;
  }

  #QuestionDialogButtons {
    display: flex;
    justify-content: space-between;  
    padding: 5px 0px 15px 0px;
  }

#questionDialog_ofWindowHeader {
    margin-left: 15px;
}
 
#questionDialog_ofWindowHeader .jqx-window-close-button-background.jqx-window-close-button-background-dsgarctic {
  position: absolute;
  right: 0;
}

#questionDialog_ofWindowHeader > div {
  padding-left: 0px;
}

#questionDialog_ofWindowContent_cancel {
}

#questionDialog_ofWindowContent_button1 {

}

#questionDialog_ofWindowContent_button2 {
  margin-left: 15px;
  display: none;
}
@media only screen and (max-width: 417px) {
  #questionDialog_ofWindowContent_button2 {
    margin-left: 15px;
    display: none;
  }

}
  #questionDialog_ofWindowContent_body {
    font-size: 13px;
    color: var(--of-grey900);
    padding: 10px 0px 0px 0px;
    overflow: auto;
  }

  #questionDialog .ofWindowContent > div > #controls {
    margin: 0 0 0 -15px;
  }

  .ofIcon.ofRotate90 {
    transform: rotate(90deg);
  }

  .ofIcon.ofRotate180 {
    transform: rotate(180deg);
  }

  .ofIcon.ofRotate270 {
    transform: rotate(270deg);
  }

  .ofPageFilterHeader {
    background-color: #eeeeee;
    box-shadow: 0px 0px 7.36px 0px rgba(0, 0, 0, 0.24);
    position: relative;
    padding: 10px;
    z-index: 800;
  }

  .ofPageFilterHeader_Left {
    float: left;
    flex-wrap: wrap;
    display: inline-flex;
    width: auto;
    height: auto;
  }

    .ofPageFilterHeader_Left > *, .ofPageFilterHeader_Right > * {
      margin: 5px;
    }

  .ofPageFilterHeader_Right {
    float: right;
    display: inline-flex;
    width: auto;
    height: auto;
  }

    .ofPageFilterHeader_Right .ofImageButton {
      display: flex;
    }

      .ofPageFilterHeader_Right .ofImageButton svg {
        margin-top: auto;
      }

  @media only screen and (max-width: 599px) {
    .ofPageFilterHeader_Right {
      float: none;
    }
  }

  /*Start -- Filter Bar Controls CSS*/
  .ofPageFilterHeader .ofForm_ctrl_container {
    display: flex;
  }

    .ofPageFilterHeader .ofForm_ctrl_container .ctrlLabel {
      margin-top: 5px;
      margin-right: 5px;
    }

    .ofPageFilterHeader .ofForm_ctrl_container label {
      margin: 2px 2px 2px 0px;
    }
  /*End -- Filter Bar Controls CSS*/

  /*Start -- Filter Button Controls CSS*/
  .OfPageFilterButtonImage {
    display: inline-block;
    line-height: 1;
    padding: 4px;
    width: 14px;
    height: 14px;
    overflow: hidden;
    fill: #212121;
    vertical-align: middle;
    margin: auto 0px;
  }

  .OfPageFilterButton {
    height: 30px;
    min-width: 70px;
    display: flex;
    margin-top: auto;
  }

  .OfFilterButtonText {
    display: inline-block;
    padding-left: 5px;
    vertical-align: middle;
    font: var(--of-font);
    font-style: normal;
    font-size: 14px;
    margin: auto 0px;
  }

  .OfPageFilterButton.OfFilterButtonSet {
    border: 1px solid #555;
    background-color: #fff;
    border-radius: 3px;
  }

  .OfPageFilterButton:hover .OfPageFilterButtonImage {
    fill: var(--of-accent400);
    cursor: pointer;
  }

  .OfPageFilterButton:hover .OfFilterButtonText {
    color: var(--of-accent400);
    cursor: pointer;
  }

  .OfPageFilterButtonActive .OfPageFilterButtonImage {
    fill: var(--of-primary500);
  }

  .OfPageFilterButtonActive .OfFilterButtonText {
    color: var(--of-primary500);
  }

  .OfPageFilterButtonImage.OfCloseImage {
    /*here we are changeing the style of the button to match with UX standards*/
    width: 10px;
    height: 10px;
    margin-left: 5px;
    margin-top: 3px;
  }
  /*End -- Filter Button Controls CSS*/

  /* Start -- Open Button Panel Control's CSS*/

  .OfOpenButtonPanelImage {
    display: inline-block;
    line-height: 1;
    padding: 4px;
    width: 14px;
    height: 14px;
    overflow: hidden;
    fill: #212121;
    vertical-align: middle;
    margin: auto 0px;
  }

  .OfOpenButtonPanel {
    height: 30px;
    min-width: 70px;
    display: flex;
    margin-top: auto;
  }

  .OfOpenButtonPanelText {
    display: inline-block;
    padding-left: 5px;
    vertical-align: middle;
    font: var(--of-font);
    font-style: normal;
    font-size: 14px;
    margin: auto 0px;
  }

  .OfOpenButtonPanel.OfFilterButtonSet {
    border: 1px solid #555;
    background-color: #fff;
    border-radius: 3px;
  }

  .OfOpenButtonPanel:hover .OfOpenButtonPanelImage {
    fill: var(--of-accent400);
    cursor: pointer;
  }

  .OfOpenButtonPanel:hover .OfOpenButtonPanelText {
    color: var(--of-accent400);
    cursor: pointer;
  }

  .OfOpenButtonPanelActive .OfOpenButtonPanelImage {
    fill: var(--of-primary500);
  }

  .OfOpenButtonPanelActive .OfOpenButtonPanelText {
    color: var(--of-primary500);
  }

  .OfOpenButtonPanelImage.OfCloseImage {
    /*here we are changeing the style of the button to match with UX standards*/
    width: 10px;
    height: 10px;
    margin-left: 5px;
    margin-top: 3px;
  }

  .OfOpenButtonPanel_Content {
    width: auto;
    height: auto;
    min-width: 50px;
    min-height: 50px;
    position: fixed;
    z-index: 1;
    background: #fff;
    color: var(--of-grey900);
    overflow: hidden;
    visibility: hidden;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    border-style: solid;
    border-width: 1px;
    border-color: #aaaaaa;
    padding: 5px;
  }

  .OpenButtonPanel_Content_Buttons {
    display: flex;
    justify-content: space-between;
    margin: 15px;
    align-items: baseline;
  }

    .OpenButtonPanel_Content_Buttons a {
      color: var(--of-primary500);
    }

  .OfOpenButtonPanel_Content .ofImageButton {
    display: flex;
    justify-content: end;
  }

    .OfOpenButtonPanel_Content .ofImageButton svg {
      margin-left: auto;
    }

  /*Css Start:- OpenButtonPanel Controls*/
  .OfOpenButtonPanel .ofForm_ctrl_container {
    display: inline-table;
  }

    .OfOpenButtonPanel .ofForm_ctrl_container .ctrlLabel {
      margin: 0;
    }
  /*Css End:- OpenButtonPanel Controls*/

  /* END -- Open Button Panel Control's CSS*/

  /* InfoTip Control Css */

  .ofInfoTip {
    display: block; /* Might have to be removed when doing off focus */
    padding: 10px;
    background: white;
    box-shadow: 0px 8px 8px rgba(0,0,0,0.2);
    min-height: 50px;
    min-width: 50px;
    max-height: 500px;
    max-width: 500px;
    position: fixed;
    z-index: 999;
    margin-top: 2px;
    border: 1px solid #dcdcdc;
    margin-left: -20px;
    overflow: auto;
  }

    .ofInfoTip #closeIcon {
      position: absolute;
      top: 0px;
      right: 0px;
      width: 14px;
      height: 14px;
      stroke-width: 12px;
    }

    .ofInfoTip.ofHide {
      display: none;
    }

    .ofInfoTip .ofInfoTipContent {
      font-size: 12px !important;
    }


  .ofInfoTipUpArrowOut {
    width: 0px;
    height: 0px;
    position: fixed;
    z-index: 998;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-bottom: 8px solid #dcdcdc;
    margin-top: -4px;
    margin-left: 7px;
  }

  .ofInfoTipUpArrowIn {
    width: 0px;
    height: 0px;
    position: fixed;
    z-index: 1000;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 8px solid var(--of-white500);
    margin-top: -4px;
    margin-left: 8px;
  }
  /* End of InfoTIp Control CSS */


  .OfSectionBodySubTitle {
    /* This class used in of-section-body-sub-title */
    color: var(--of-primary500);
    font-size: 14px;
    padding-left: 15px;
    line-height: 1.6em;
    padding-top: 6px;
    font-weight: 300;
  }


.ofSectionContentTitle {
  color: var(--of-primary500);
  font-size: 16px;
  padding-left: 15px;
  font-weight: 300;
}

.ofParagraph > .ofSectionContentTitle {
  padding-left: 0px;
}

.maplibregl-popup-content > .ofSectionContentTitle {
  padding-left: 0px;
}

  /* DatePeriod Selector CSS */

  .ofDatePeriodSelector {
    display: block;
    margin: 0 auto;
    position: relative;
    outline: none;
  }

    .ofDatePeriodSelector > input {
      display: none;
    }

    .ofDatePeriodSelector .ofDateRangeSelectorWrap {
      position: absolute;
      top: 0;
      z-index: -1;
    }

  /*-------- Date Selector Period CSS END ---------*/


  /*------------Switch Control CSS Start----------*/

.ofSwitch {
  display: inline-flex;
  height: 22px;
}

  .ofSwitch:focus {
    outline-color: transparent;
  }

  .ofSwitch .ofSwitchArea {
    position: relative;
    display: inline-block;
    width: 38px;
    min-width: 38px;
    height: 22px;
    min-height: 20px;
    margin: auto 0px;
  }

  .ofSwitch.ofDisabled .ofSwitchArea {
    pointer-events: none;
  }

  .ofSwitch .ofSwitchArea .ofSlider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    border: 1px solid #525252;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 34px;
  }

  .ofSwitch.ofDisabled .ofSwitchArea .ofSlider {
    border: 1px solid #9A9A9A;
  }

  .ofSwitch .ofSwitchArea .ofSlider::before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    bottom: 3px;
    background-color: #525252;
    -webkit-transition: .4s;
    transition: .4s;
    border-radius: 50%;
  }

  .ofSwitch.ofDisabled .ofSwitchArea .ofSlider::before {
    background-color: #9A9A9A;
  }

  .ofSwitch .ofSwitchArea.ofSwitchRight .ofSlider {
    background-color: var(--of-primary500);
    border: 1px solid var(--of-primary500);
  }

  .ofSwitch.ofDisabled .ofSwitchArea.ofSwitchRight .ofSlider {
    background-color: #9A9A9A;
    border: 1px solid #9A9A9A;
  }

  .ofSwitch .ofSwitchArea.ofSwitchRight .ofSlider::before {
    -webkit-transform: translateX(11px);
    -ms-transform: translateX(11px);
    transform: translateX(11px);
    border-radius: 50%;
    left: 9px;
    background-color: white;
  }

  .ofSwitch .ofSwitchLabel {
    margin: auto 10px;
    display: flex;
    align-content: center;
    align-items: center;
    word-break: break-word;
  }

    .ofSwitch .ofSwitchLabel.ofSwitchLabelL {
      margin-left: 0;
    }

    .ofSwitch .ofSwitchLabel .ofSwitchLabelLeft {
      float: right;
      margin-left: auto;
    }

  /*-------------Switch Control CSS End-----------*/

  .oFmaskedRange {
    display: inline-block;
    vertical-align: bottom;
  }

    .oFmaskedRange > label {
      white-space: nowrap;
      height: 12px;
      line-height: 12px;
      max-width: 420px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: block;
      margin: 0 0px -15px 15px;
    }

  .oFLookupControlWindow .ofSection_header {
    background: none;
    border: none;
  }

    .oFLookupControlWindow .ofSection_header .ofSectionHeaderText {
      padding-left: 0;
    }

  .oFLookupControlWindow .sectionBody {
    border: none !important;
  }

    .oFLookupControlWindow .sectionBody .gridBorder {
      border: 1px solid #dcdcdc;
    }

    .oFLookupControlWindow .sectionBody input {
      margin-top: 15px;
    }

      .oFLookupControlWindow .sectionBody input.selectPopButton {
        float: right;
      }

  @media only screen and (max-width: 599px) {
    .oFLookupControlWindow .sectionBody input.selectPopButton, .oFLookupControlWindow .sectionBody input.OfSecondaryButton {
      min-width: 150px;
    }
  }

  .oFLookupControlWindow .ofImageButton.inputInnerImage {
    background-color: #fff;
    height: 30px;
  }

    .oFLookupControlWindow .ofImageButton.inputInnerImage > svg {
      border: none;
    }

    .oFLookupTextInputContainer {
      min-height: 28px;
      border: 1px solid var(--of-input-border);
      border-radius: 2px;
      display: flex;
    }

    .ofForm_ctrl_container[class*='ofCol'] .oFLookupTextInputContainer {
      box-sizing: border-box;
    }

      .ofForm_ctrl_container[class*='ofCol'] .oFLookupTextInputContainer .oFLookupPopUpItem {
        line-height: 18px;
      }

    .oFLookupTextInputContainer.oFFocused {
      border: 1px solid var(--of-secondary400);
    }

    .ofDisabled .oFLookupTextInputContainer {
      border-color: var(--of-grey300);
    }

  .ofForm_ctrl_container .ofDisabled .ctrlMain .oFLookupTextInputContainer {
    color: var(--of-grey900);
    background: #F8F8F8;
    border-color: #9A9A9A;
  }

  .ofForm_ctrl_container .oFLookupTextInputContainer .ofTextInput, .ofForm_ctrl_container .oFLookupTextInputContainer .ctrlAddElements svg {
    border: none;
  }

  .ofForm_ctrl_container .ofDisabled .oFLookupTextInputContainer .ctrlAddElements {
    background-color: #F8F8F8;
  }

  .ofForm_ctrl_container .ofDisabled .oFLookupTextInputContainer .ofImageButton {
    visibility: hidden;
  }

  .ofForm_ctrl_container .oFLookupTextInputContainer .ctrlAddElementsSelf .ctrlMetaAttribute {
    height: 100%;
  }

  .ofDisabled .ctrlAddElementsSelf, .ofDisabled .oFMultiselectTextBoxHolder, .ofDisabled .oFMultiselectTextBoxHolder .oFLookupTextInput {
    background-color: #F8F8F8;
    pointer-events: none;
  }

  .oFLookupTextInputContainer .oFLookuptexboxwrapper {
    display: table-cell;
    width: 100%;
    vertical-align: middle;
  }

  .noPadding.ofRow {
    padding: 0;
  }

  .oFLookupControlWindow .additionalFilters {
    display: inline-block;
  }

    .oFLookupControlWindow .additionalFilters > * {
      display: inline-block;
      vertical-align: bottom;
      margin-top: 5px;
    }
  .ofLookupPopUpHeaderHeader .filtersHolder > * {
    margin-left: 0;
    margin-right: 10px;
  }

  .ofLookupPopUpHeaderHeader .filtersHolder > * {
    margin-top: 5px;
    margin-bottom: 0;
  }

  .ofLookupPopUpHeaderHeader .buttonsHolder > * {
    display: inline-block;
    vertical-align: middle;
  }

  .ofLookupPopUpHeaderHeader .buttonsHolder .ofIcon {
    display: block;
  }

  .ofLookupPopUpHeaderHeader .lookupSearchTextInputSearchButton {
    vertical-align: text-bottom;
    margin-top: 10px;
  }

  .oFLookupControlWindow .ofLookupFieldNameWrapper {
    display: inline-block;
    vertical-align: text-bottom;
    margin-bottom: 0;
  }

  .ofLookupPopUpHeaderHeader .itmAdditionalComboInline {
    display: inline-block;
    vertical-align: middle;
    margin-right: 15px;
  }

  body .OfSecondaryButton.jqx-fill-state-disabled {
    cursor: not-allowed !important;
  }

  .oFLookupTextInputContainer .oFLookuptexboxwrapper.noPopup {
    display: block;
  }

  .oFLookupTextInputContainer .oFMultiselectTextBoxHolder {
    padding: 0 5px;
    font-size: 14px;
    outline: 0px solid transparent;
    cursor: text;
    max-height: 60px;
    overflow: auto;
  }

    .oFLookupTextInputContainer .oFLookupPopUpItem {
        border: none;
        color: var(--of-grey900);
        display: inline-flex;
        align-items: center;
        border-radius: 3px;
        font-size: 14px;
        line-height: 17px;
        background: var(--of-grey200);
        max-width: 90%;
        margin: 1px 3px;
        padding: 0 2px;
    }
    .oFLookupTextInputContainer .oFLookupPopUpItem .oFLookupPopUpItemText{
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 95%;
        white-space: nowrap;
        display: inline-block;
    }

    .oFLookupTextInputContainer .oFLookupPopUpItem.ofActive {
        border: 1px solid var(--of-primary500);
    }

    .oFLookupTextInputContainer .oFLookupPopUpItem:hover {
      background: var(--of-accent100);
      cursor: default;
    }

.oFLookupTextInputContainer .oFLookupTextInput {
    display: inline-block;
    border: 0;
    width: auto;
    outline: none;
    height: 20px;
    min-width: 20px;
    margin-left: 3px;
    max-width: 100%;
    align-self: center;
    line-height: 20px;
    vertical-align: bottom;
    font-size: 14px;
}

[contenteditable="true"].oFLookupTextInput {
  white-space: nowrap;
  overflow: hidden;
}

  [contenteditable="true"].oFLookupTextInput br {
    display: none;
  }

  [contenteditable="true"].oFLookupTextInput * {
    display: inline;
    white-space: nowrap;
  }

  .oFLookupControlWindow .ofGrid div[role=row]:hover > div {
    background: none;
    background-color: #ebf8FF;
    color: var(--of-primary500);
  }

  .ofGrayToolbarTitle {
    font-size: 14px;
  }

  .oFLookupTextInputContainer .ofImageButton {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    height: 100%;
    margin: 0 4px;
  }

  .oFLookupTextInputContainer ~ .ofImageButton {
    margin-left: 5px;
  }

.oFLookupTextInputContainer .ctrlAddElementsSelf .ofImageButton .ofIcon {
  background: none;
  width: 18px;
  height: 18px;
  padding: 0;
  z-index: 500;
}

  .ofForm_ctrl_container.oFLookupMultiFieldData {
    display: inline-block;
    margin: 5px 0 0 0;
    padding: 0px;
    vertical-align: top;
  }

  .oFLookupTextInputContainer .ctrlAddElementsSelf .ofIcon:not(.ofDisabled):not(.ofNoStates):hover {
    fill: var(--of-secondary400);
  }

  .ofDisabled .oFLookupTextInputContainer .ctrlAddElementsSelf .ofIcon {
    visibility: hidden;
  }

  /*-----------Grid PAGING CSS----------*/
  .ofGrid .ofPaging {
    display: flex;
    margin-top: 0px;
    width: 100%;
    height: 100%;
  }

    .ofGrid .ofPaging .ofNavigation {
      display: flex;
      margin: 0 auto;
    }

      .ofGrid .ofPaging .ofNavigation .ofImageButton {
        margin: 0px 10px 0px 10px;
        user-select: none;
      }

      .ofGrid .ofPaging .ofNavigation .ofInput {
        font-size: 11px;
        margin: 1px 3px;
        font-weight: bold;
      }

        .ofGrid .ofPaging .ofNavigation .ofInput input[type="number"] {
          width: 50px;
        }

      /* Remove arrows from <input type=number...> specifically for grid paging / Chrome, Safari, Edge, Opera */
      .ofGrid .ofPaging .ofNavigation input::-webkit-outer-spin-button,
      .ofGrid .ofPaging .ofNavigation input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

  /*-----------Grid PAGING CSS----------*/

  .ofGrid .ofPaging {
    display: flex;
    margin-top: 0px;
    width: 100%;
    height: 100%;
  }

    .ofGrid .ofPaging .ofNavigation {
      display: flex;
      margin: 0 auto;
    }

      .ofGrid .ofPaging .ofNavigation .ofImageButton {
        margin: 0px 10px 0px 10px;
        user-select: none;
      }

      .ofGrid .ofPaging .ofNavigation .ofInput {
        font-size: 11px;
        margin: 1px 3px;
        font-weight: bold;
      }

        .ofGrid .ofPaging .ofNavigation .ofInput input[type="number"] {
          width: 50px;
        }

      /* Remove arrows from <input type=number...> specifically for grid paging / Chrome, Safari, Edge, Opera */
      .ofGrid .ofPaging .ofNavigation input::-webkit-outer-spin-button,
      .ofGrid .ofPaging .ofNavigation input::-webkit-inner-spin-button {
        -webkit-appearance: none;
        margin: 0;
      }

  /*---------GRID PAGING CSS END--------*/

.oFSorticonMarker {
  background-color: var(--of-grey100);
  border-color: #aaa;
  display: flex;
  justify-content: center;
  align-items: center;
}

span.oFsemiBoldText {
  font-weight: 500; 
}

.ofSectionHeaderText .oFsemiBoldText {
  padding-left: 5px;
  padding-right: 10px;
}
/*--------NPS SURVEY CSS-------*/
.ofNpsSurvey {
}

  .ofNpsSurvey .ofValidation {
    padding-top: 5px;
    display: flex;
    width: 100%;
  }

    .ofNpsSurvey .ofValidation.ofError {
      color: var(--of-red400);
    }

      .ofNpsSurvey .ofValidation.ofError .ofErrorIcon {
        display: inline-block;
      }

    .ofNpsSurvey .ofValidation .ofContainer {
      margin-right: auto;
      display: flex;
    }

      .ofNpsSurvey .ofValidation .ofContainer .ofMessage {
        padding-left: 5px;
        margin: auto 0px;
        font-size: 14px;
      }

    .ofNpsSurvey .ofValidation .ofIcon {
      padding: 0px;
    }

  .ofNpsSurvey .ofIcon.ofLarge {
    width: 25px;
    height: 25px;
  }

  .ofNpsSurvey .ofIcon, .ofIconNoHover {
    display: inline-block;
    line-height: 1;
    overflow: hidden;
    border: 1px solid transparent;
  }

  .ofNpsSurvey .ofValidation.ofError {
    color: var(--of-red400);
  }

    .ofNpsSurvey .ofValidation.ofError .ofErrorIcon .ofIcon {
      fill: var(--of-red400);
    }

  .ofNpsSurvey .ofHeader {
  }

    .ofNpsSurvey .ofHeader > div {
      font-weight: 500;
      font-size: 22px;
      color: var(--of-grey900);
    }

  .ofNpsSurvey .ofTitle {
    font-size: 24px;
    font-weight: 500;
    padding-bottom: 10px;
  }

  .ofNpsSurvey .ofProgress {
    height: 3px;
    width: 100%;
    background: var(--of-grey200);
  }

    .ofNpsSurvey .ofProgress .ofRemaining {
      background: var(--of-primary300);
      width: 50%;
    }

    .ofNpsSurvey .ofProgress .ofComplete {
      width: 50%;
    }

  .ofNpsSurvey .ofContent {
    display: flex;
    flex-direction: column;
    padding-top: 0px !important;
  }

    .ofNpsSurvey .ofContent .ofStatement {
      margin-bottom: 25px;
      margin-top: 15px;
      font-size: 13px;
    }

.margin40 {
  margin-bottom: 40px !important
}

.ofNpsSurvey .ofContent .ofStatement .ofNotice {
  color: var(--of-grey900);
  font-size: 10px;
}

.ofNpsSurvey .ofContent .ofQuestion {
  margin-top: 40px;
  margin-bottom: 10px;
  font-size: 13px;
}

.ofNpsSurvey .ofContent .ofRating {
  display: flex;
}

  .ofNpsSurvey .ofContent .ofRating .ofScale {
    display: flex;
    margin: auto;
    width: 100%;
  }

    .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption {
      margin-right: 5px;
      height: 30px;
      width: 9%;
      background: #CCCCCC;
      display: flex;
      font-size: 13px;
      color: black;
      cursor: pointer;
    }

      .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption.ofActive {
        background: var(--of-primary500);
        color: white;
      }

      .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption span {
        margin: auto;
      }

      .ofNpsSurvey .ofContent .ofRating .ofScale .ofOption:last-child {
        margin-right: 0px;
      }

.ofNpsSurvey .ofLikeliness {
  width: 100%;
  height: 20px;
  font-size: 11px;
  color: gray;
}

.ofNpsSurvey .ofComment {
  font-size: 14px;
}

.ofNpsSurvey .ofSubmit {
  margin-top: auto;
  margin-left: auto;
  margin-bottom: 15px;
}

.ofNpsSurvey .ofProgress {
  display: flex;
}

.ofNpsSurvey .ofImage {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}


.ofNpsSurvey .ofProgress .ofProgBar1, .ofNpsSurvey .ofProgress .ofProgBar2 {
  height: 100%;
  margin: auto;
  text-align: center;
  color: #9a9a9a;
}

  .ofNpsSurvey .ofProgress .ofProgBar1.ofActive {
    color: var(--of-accent400);
  }

  .ofNpsSurvey .ofProgress .ofProgBar2.ofActive {
    color: var(--of-accent400);
  }


.ofNpsSurvey .ofThanks {
  margin-top: 10px;
}

  .ofNpsSurvey .ofThanks .ofParagraph {
    padding: 6px 0px 10px 0px;
    font-size: 13px;
  }

.ofWindow .oFChildForm {
  margin-left: -15px;
  margin-right: -15px;
}

.oFChildForm .ofForm_ctrl_container > .ctrlMain > div > input[type=button] {
  height: 30px;
}

.ofWindow .ofPopupChildbuttons {
  padding-right: 20px;
}

.of_error {
  background-color: #e27025;
  color: white;
}

.ofMain_contentHeader > .ofContainer > .ofHeader .ofAdditionalTitle {
  font-size: 16px;
}

.oFChildHeaderSpan span {
  vertical-align: top;
  display: inline-block;
}

.ofAdditionalTitle {
  padding-left: 20px;
}

  .ofAdditionalTitle span {
    vertical-align: middle;
    display: inline-block;
  }

.oFChildSpan {
  text-overflow: ellipsis;
  /*max-width: 150px;*/
  display: inline-block;
  overflow: hidden;
  margin-right: 15px;
  font-weight: 500;
}

.ofSection_header .oFTitleGroup > .oFChildSpan {
  margin-right: 0;
}

.sectionContentPreview {
  margin-left: 15px;
}

.ofSection_header .oFChildHeaderSpan {
  display: flex;
  flex-wrap: wrap;
  font-size: 14px;
  align-items: center;
}

.ofSection_header .oFTitleGroup + .oFTitleGroup {
  padding-left: 15px;
}

.ofHeader > div > .ofSection_header .oFTitleGroup > * {
  vertical-align: middle;
  display: inline-block;
}

.ofHeader.jqx-expander-header-expanded > div > .ofSection_header .oFTitleGroup > * {
  display: block;
  line-height: 1;
  font-size: 12px;
}

.ofHeader.jqx-expander-header-expanded > div > .ofSection_header .oFTitleGroup > .oFChildSpan {
  font-size: 14px;
}

.ofHeader.jqx-expander-header-expanded > div > .ofSection_header .oFTitleGroup.noCollapsed {
  display: none;
}

.ofSection_header .oFTitleGroup .oFChildSpan {
  color: var(--of-grey900);
  font-weight: 300;
  white-space: nowrap;
}


.ofRadioButtonGroupVertical {
  display: block;
  border: 1px solid transparent;
}

.ofRadioButtonGroupHorizontal {
  border: 1px solid transparent;
}
/*--------END OF NPS SURVEY CSS-------*/
  /*------------Chart Control CSS Start----------*/
  .OfChartControl {
    padding: 15px;
    margin: 0;
  }

  .OfLinkContainer {
    border: 1px solid transparent;
  }

  .jqx-listbox.jqx-popup {
    z-index: 1000000 !important;
  }

  /*------------End OF Chart Control CSS----------*/

  /*------------Page Filter Calendar Control CSS Start----------*/

  .OfOpenButtonPanel_CalendarContent {
    display: block;
    top: 50px;
    position: absolute;
    width: 200px;
    height: 205px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  }

  /*------------End OF Page Filter Calendar Control CSS----------*/

  /*------------Card List Control CSS Start----------*/

  .ofCardList {
    min-width: 100%;
    height: 100%;
    display: flex;
    overflow-x: auto;
  }

    .ofCardList .ofCardListContainer {
      display: flex;
      flex-wrap: nowrap;
    }

      .ofCardList .ofCardListContainer .ofCard {
        min-width: 260px;
        height: 70px;
        border-radius: 1px;
        margin: 3px;
        box-shadow: rgba( 0, 0, 0, 0.3 ) 0px 0px 1px 1px;
        display: flex;
        flex-flow: column;
      }

        .ofCardList .ofCardListContainer .ofCard:hover {
          background-color: #ebf8ff;
        }

        .ofCardList .ofCardListContainer .ofCard .ofCardHeader {
          display: flex;
          flex-wrap: nowrap;
          align-items: center;
          margin: 1px;
        }

          .ofCardList .ofCardListContainer .ofCard .ofCardHeader .ofIcon.ofCardHeaderDropIcon {
            width: 13px;
            height: 17px;
          }

        .ofCardList .ofCardListContainer .ofCard .ofCardBody {
          display: flex;
          flex-wrap: nowrap;
          justify-content: space-between;
          margin: 1px;
        }

          .ofCardList .ofCardListContainer .ofCard .ofCardBody .ofCardColumn {
            margin-left: 3px;
            margin-right: 3px;
          }

  /*------------End OF Card List Control CSS----------*/

  /* Legal and server footer */
  .ofLoginFooter {
    font-size: 10px;
    position: relative;
    bottom: 0px;
    width: 100%;
    text-align: center;
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
  }

  .ofLoginServerInfo {
    padding-top: 10px;
  }
  /* END of footer */

  /* Login router and IDS */

  .ofLoginPage > .content {
    background-size: cover;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    width: 420px;
    position: fixed;
    /*left: 50%;*/
    margin-left: -210px; /*half width negative margin with 50% left gives proper screen centering*/
    align-items: center;
  }

  .ofLoginPage .content {
    text-align: center;
    padding: 10px 0;
    margin: auto;
    width: 300px;
    position: relative;
    font-family: var(--of-fontfamily);
    font-style: normal;
    font-size: 12px;
  }


  .ofLoginPage .mobileContent {
    text-align: center;
    padding: 10px 0;
    margin: auto;
    width: 600px;
    position: relative;
    font-family: var(--of-fontfamily);
    font-style: normal;
    font-size: 12px;
  }

  .ofLoginPage {
    overflow: auto;
  }

    .ofLoginPage .ofLoginLink {
      display: inline-block;
      padding: 10px 0;
    }

    .ofLoginPage .ofForm_ctrl_container {
      margin: 0 15px;
      padding: 10px 0;
      position: relative;
    }

    .ofLoginPage .ofCaptchaSection {
      padding: 10px 0;
    }

    .ofLoginPage .content .ofLoginPageTitle {
      font-size: 14px;
    }

    .ofLoginPage .ofLoginLinks {
      font-size: 10px;
    }

    .ofLoginPage .help {
      padding-left: 20px;
    }

    .ofLoginPage .legal {
      padding-right: 20px;
    }

  .ofLoginLinks {
    width: 100%;
    padding-top: 10px;
  }

  .ofLoginPage .content .button_area {
    margin: 13px 0;
  }

    .ofLoginPage .content .button_area input:first-child {
      margin-right: 10px;
    }

    .ofLoginPage .content .button_area input:not(:first-child) {
      margin-left: 10px;
    }
  /* END OF Login Router and IDS */

  #oFRenderer_clearSearchButton, #preview_oFRenderer_clearSearchButton {
    float: right;
  }

  .ofItalic {
    font-style: italic !important;
  }

  body .borderBoxImportant {
    box-sizing: border-box !important;
  }

  body .oFFieldValidationError {
    border-color: #e72025;
  }



  .ofWizard {
    height: 65%;
    min-height: 600px;
    max-height: 715px;
    width: 50%;
    box-sizing: border-box;
    min-width: 460px;
    max-width: 535px;
    margin: auto;
    background: var(--of-wizardgrey);
    padding: 30px;
    padding-bottom: 10px;
    position: relative;
    flex-direction: column;
    display: flex;
    border: 1px solid var(--of-wizardgrey);
  }

    .ofWizard .ofImage {
      margin-top: 10px;
    }

      .ofWizard .ofImage img {
        height: 75px;
      }

        .ofWizard .ofImage img.ofLoginDescarteslogo {
          height: 75px;
          max-height: none;
          max-width: none;
          transform: translateX(-14px);
        }

    .ofWizard .ofTitle {
      color: var(--of-primary500);
      font-size: 32px;
      margin-top: 20px;
      font-weight: 300;
    }

      .ofWizard .ofTitle.ofLongText {
        font-size: 28px;
      }


    .ofWizard .ofProgressBars {
      padding: 20px 0 10px 0;
      display: inline-flex;
      margin: 0px auto;
    }

      .ofWizard .ofProgressBars span {
        display: block;
        height: 20px;
        width: 20px;
        max-width: 20px;
        max-height: 20px;
        border-radius: 50%;
        margin-right: 20px;
        flex-grow: 1;
      }

    .ofWizard .ofValidation {
      display: flex;
      width: 100%;
      height: 32px;
      min-height: 32px;
      margin-top: 10px;
    }

      .ofWizard .ofValidation.ofHidden {
        visibility: hidden;
      }

      .ofWizard .ofValidation span:not(.ofMessage) {
        display: none;
      }

      .ofWizard .ofValidation .ofIcon {
        padding: 0px;
      }

      .ofWizard .ofValidation.ofError {
        color: var(--of-red400);
      }

        .ofWizard .ofValidation.ofError .ofErrorIcon {
          display: inline-block;
        }

          .ofWizard .ofValidation.ofError .ofErrorIcon .ofIcon {
            fill: var(--of-red400);
          }


      .ofWizard .ofValidation.ofWarning {
        color: var(--of-gold400);
      }

        .ofWizard .ofValidation.ofWarning .ofWarningIcon {
          display: inline-block;
        }

          .ofWizard .ofValidation.ofWarning .ofWarningIcon .ofIcon {
            fill: var(--of-gold400);
          }


      .ofWizard .ofValidation.ofNeutral {
        color: var(--of-primary500);
      }

        .ofWizard .ofValidation.ofNeutral .ofNeutralIcon {
          display: inline-block;
        }

          .ofWizard .ofValidation.ofNeutral .ofNeutralIcon .ofIcon {
            fill: var(--of-primary500);
          }

      .ofWizard .ofValidation.ofSuccess {
        color: var(--of-green300);
      }

        .ofWizard .ofValidation.ofSuccess .ofSuccessIcon {
          display: inline-block;
        }

          .ofWizard .ofValidation.ofSuccess .ofSuccessIcon .ofIcon {
            fill: var(--of-green300);
          }


      .ofWizard .ofValidation .ofContainer {
        margin-right: auto;
        display: flex;
      }

        .ofWizard .ofValidation .ofContainer .ofMessage {
          padding-left: 5px;
          margin: auto 0px;
          font-size: 15px;
        }


    .ofWizard .ofContent {
      margin: 7px 0px auto 0px;
    }

    .ofWizard .ofInfo {
      margin-top: auto;
      display: flex;
      padding-top: 20px;
    }

      .ofWizard .ofInfo .ofContainer {
        margin: auto 0px;
      }

        .ofWizard .ofInfo .ofContainer .ofLink {
          font-size: 12px;
          margin-bottom: 5px;
        }

        .ofWizard .ofInfo .ofContainer .ofCopyright {
          font-size: 9px;
          color: #565656;
          margin-bottom: 4px;
        }

        .ofWizard .ofInfo .ofContainer .ofServerInfo {
          font-size: 9px;
          color: #565656;
        }

      .ofWizard .ofInfo .ofImage {
        margin: auto 0px auto auto;
      }

        .ofWizard .ofInfo .ofImage img {
          height: 35px;
        }

  .ofFiledragging {
    box-shadow: inset 0 0 3px black;
  }

body .oFDroppable {
  border: 2px solid rgb(0, 125, 192);
  box-sizing: border-box;
}

.ofTooltipOnRight {
    float: right;
    border: 2px solid transparent;
}

.ofTooltipOnRight div.help > svg {
    margin: auto;
}

.ofControlsGroup .ctrlLabel.ofControlTitle {
    margin-top: 10px;
    font-size: 12px;
    align-items: center;
    justify-content: start;
}

    .ofControlsGroup .ctrlLabel.ofControlTitle svg.required {
        margin-top: 0px;
        align-self: start;
    }

.ofControlsGroup .ofControlsContent {
    display: inline-flex;
    padding: 0px;
    /*margin-top: 2px;*/
    vertical-align: bottom;
}

.ofForm_ctrl_container .ofControlsGroupHorizontal .ofRadioButton {
  /*margin-top: 6px;*/
  margin-bottom: 0px;
}

  .ofControlsGroup .ofControlsContent.ofControlsGroupVertical {
    display: grid;
    margin-top: 0;
  }

    .ofControlsGroup .ofControlsContent.ofControlsGroupVertical > .ofForm_ctrl_container {
        margin-left: 5px;
    }

.ofControlsGroup .ofControlsContent.ofControlsGroupHorizontal > .ofForm_ctrl_container:first-child {
    margin-left: 0;
}

.ofControlsGroup .ofControlsContent:not(.ofControlsGroupVertical) > div[class*="check"] ~ div[class*="check"], .ofControlsGroup .ofControlsContent:not(.ofControlsGroupVertical) > div[class*="radio"] ~ div[class*="radio"] {
  margin-left: 15px;
}


.ofControlsGroupContent {
    display: table-cell;
}

.ctrlHeader {
    display: table-cell;
}

.ofSection .ofAdvancedSearchLink {
  cursor: pointer;
  text-decoration: underline;
  color: var(--of-secondary500);
}

.ofSection.ofBorderlessSection > * {
  border: none !important;
}

/*-----------Welcome Header START-----------*/
  .ofWelcomeHeader, .ofWelcomeHeader .ofSlideshow {
    max-height: 237px;
  }

  .ofWelcomeHeader .ofSlideshow .ofImages {
    max-height: 235px;
  }

  .ofWelcomeHeader {
    --of-welcome-header-height: 234px;
    width: calc(100%);
    height: var(--of-welcome-header-height);
    border: 0px 0px 1px 1px solid var(--of-grey300);
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    background-color: var(--of-white500);
  }

  .ofWelcomeHeader > .ofProfile {
    height: 100%;
    display: flex;
    align-items: center;
    overflow: hidden;
  }

  .ofWelcomeHeader > .ofAdvertContainer {
    margin: 0;
    height: 100%;
    width: 688px;
  }

  @media only screen and (max-width: 1099px) {
    .ofWelcomeHeader  > .ofAdvertContainer {
      display: none;
    }
  }

  .ofWelcomeHeader .ofImage, .ofWelcomeHeader .ofText {
    font-size: 56px;
    font-weight: lighter;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .ofWelcomeHeader .ofText {
    font-size: 2.9vw;
  }

  @media only screen and (max-width: 1099px) {
    .ofWelcomeHeader .ofText {
      font-size: 4vw;
    }
  }

  .ofWelcomeHeader .ofImage {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    /*background: rgb(0,125, 192);*/
    background: var(--of-primary500);
    color: #fff;
    text-align: center;
    line-height: 135px;
    margin: 20px 0;
    flex: 0 0 auto;
  }

  @media only screen and (max-width: 599px) {
    .ofWelcomeHeader {
      height: calc(var(--of-welcome-header-height) / 2);
    }

    .ofWelcomeHeader .ofText {
      font-size: 4.5vw;
    }

    .ofWelcomeHeader .ofImage {
      display: none;
    }
  }

  .ofWelcomeHeader .ofProfile .ofProfileContainer {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-left: 30px;
    width: 100%;
  }
  .ofWelcomeHeader .ofText {
    text-align: center;
    padding-left: 30px;
    padding-right: 10px;
  }
/*-----------Welcome Header END-----------*/

/*-----------Slideshow Control START-----------*/
  .ofSlideshow, .ofSlideshow * {
    box-sizing: border-box
  }

  .ofSlideshow .ofImages > .ofSlide {
    display: none;
  }

  .ofSlideshow .ofImages img {
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .ofSlideshow {
    position: relative;
    margin: auto;
    overflow: hidden;
    height: 100%;
  }

    .ofSlideshow > .ofPreviousSlide, .ofSlideshow > .ofNextSlide {
        cursor: pointer;
        position: absolute;
        top: 50%;
        margin-top: -25px;
        width: auto;
        padding: 16px;
        color: white;
        font-weight: bold;
        font-size: 18px;
        transition: 0.6s ease;
        border-radius: 0 3px 3px 0;
        user-select: none;
        z-index: 100;
        background:none;
    }

  .ofSlideshow > .ofNextSlide {
    right: 0;
    border-radius: 3px 0 0 3px;
  }

  .ofSlideshow > .ofPreviousSlide:hover, .ofSlideshow > .ofNextSlide:hover {
    /*background-color: var(--of-grey900);*/
  }

  .ofAnimationFade {
    -webkit-animation-name: ofAnimationFade;
    -webkit-animation-duration: 1.5s;
    animation-name: ofAnimationFade;
    animation-duration: 1.5s;
  }

  @-webkit-keyframes ofAnimationFade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
  }

  @keyframes ofAnimationFade {
    from {
        opacity: .4
    }
    to {
        opacity: 1
    }
  }

  .ofSlideshow /*.ofImages*/ .ofSlide .ofAdContent {
   position: absolute;
    /*position:relative;*/
   z-index:2;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    color: white;
    padding: 10px 50px;
  }

  .ofSlideshow /*.ofImages*/ .ofSlide .ofAdContent .ofInfoText {
    font-weight: bold;
    letter-spacing: 0.3em;
  }

  .ofSlideshow /*.ofImages*/ .ofSlide .ofAdContent .ofTitle,
  .ofSlideshow /*.ofImages*/ .ofSlide .ofAdContent .ofDescription {
    font-weight: lighter;
  }

  .ofSlideshow /*.ofImages*/ .ofSlide .ofAdContent .ofTitle {
    font-size: 1.5em;
  }

  /*ad campaign*/
.ofSlideshow .ofImages .ofSlide .ofAdContent .ofTitle {
    font-size: 2.0em;
}

.ofAdvertContainer .ofAdBannerFront:hover .ofAdContent {
    display: none;
}

.ofAdvertContainer .ofAdBannerFront:hover .ofAdBannerBack {
    word-wrap: break-word;
    display: flex;
    visibility: visible;
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: 1;
    transition: opacity 1s;
    transform: scale(1);
    z-index: 20;
    /*padding: 10px 40px 10px 40px;*/
    top: 0px;
    bottom: 0px;
    font-size: 15px;
    background-color: #1e4b6d;
    cursor: pointer;
}

.ofSlideshow .ofSlide .ofAdBannerBack {
    color: white;
}

div.ofAdBannerBack div.of-line {
    margin: 22px 0;
    font-size: 3px;
    line-height: 3px;
}

.of-has-white-background-color {
    background-color: #fff;
}

div.ofAdBannerBack .of-has-white-background-color {
    color: #565656;
    background-color: #fff;
}

div.ofAdBannerBack div.of-line span {
    display: inline-block;
    width: 63px;
    height: 3px;
    background-color: #0af;
}

div.ofAdBannerBack div.of-line span {
    background-color: #fff;
}

.of-block-button {
    color: #fff;
    padding:10px;
}

div.ofAdBannerBack {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    box-sizing: border-box;
    /*padding: 20px;*/
    text-align: center;
}

div.ofAdBannerBack .of-has-white-color {
        color: #fff;
}

div.ofAdBannerBack .of-has-dark-blue-background-color {
        color: #fff;
        background-color: #1e4b6d;
}

    div.ofAdBannerBack .of-block-button__link {
        display: inline-block;
        /*  box-sizing: border-box;
        padding: 18px 39px;
        margin: 0;
        font-weight: 400;
        font-size: 16px;
        line-height: 1em;
        white-space: nowrap;
        text-decoration: none;
        text-align: center;
        cursor: pointer;
        letter-spacing: 1px;
        color: #fff;
        border: 1px solid #1e4b6d;
        border-radius: 56px;
        background-color: #1e4b6d;
        background-image: none;
        text-shadow: none;
        overflow-wrap: break-word;
        transition: background-color .25s;
*/
        font-size: 14px;
        font-weight: 500;
        padding: 7px 6px 6px 6px;
        border-width: 0;
        border-radius: 4px;
        border-color: var(--of-secondary400);
        color: #FFFFFF;
        letter-spacing: 1px;
        line-height: 19px;
        min-width: 100px;
        height: 36px;
        padding: 0px 20px;
        background-position: center;
        box-shadow: 0px 8px 8px rgb(0 0 0 / 20%);
        text-decoration: none;
    }

    div.ofAdBannerBack .of-has-blue-background-color {
        color: #fff;
        /*background-color: #0af;*/
        background-color: var(--of-secondary400);
    }

div.of-block-descartes-hover-card div.hover-card-back a {
    color: #fff;
}

div.ofAdBannerBack .of-block-button.of-is-style-small .of-block-button__link, div.region-content .of-block-button.of-is-style-outline-small .of-block-button__link {
    padding: 10px 30px;
   /* padding: 12px 30px;*/
    font-size: 14px;
    /* border-radius: 38px;*/
}



.ofAdvertContainer .ofAdBannerBack .adDetailes {
    font-weight: 200;
    padding: 0px 45px;
    text-align: center;
    font-size: 16px;
    line-height: 1.1;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
}
/*-----------Slideshow Control END-----------*/


.ofFloatingSection {
  display: inline-block;
  vertical-align: top;
  box-sizing: content-box;
}

  .ofFloatingSection + .ofFloatingSection > * {
    margin-left: 15px;
  }


/*--- Ext Tile Start ----*/


.ofExtTile {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
    text-align: center;
    background-color: rgb(255, 255, 255);
    margin: 10px 10px 10px 10px;
    height: min-content;
    border-style: solid;
    border-width: 0px;
    border-bottom-width: 4px;
    font-family: 'Roboto';
    width: 200px;
    min-width: 200px;
}

    .ofExtTile a {
        color: inherit;
        text-decoration: inherit;
    }

    .ofExtTile .ofTileTable {
        width: 100%;
        padding-left: 15px;
        padding-right: 15px;
    }

    .ofExtTile .ofTileTable .ofTitle {
         height: 40px;
         vertical-align: text-top;
         font-size: 16px;
         font-weight: 500;
         padding-bottom: 5px;
         padding-top: 15px;
    }
    .ofExtTile .ofTileTable .ofTitle .ofText {
          overflow: hidden;
          text-overflow: ellipsis;
          width: 166px;
          height: 40px;
    }
        .ofExtTile .ofTileTable .ofTileIconWrap ~ tr .ofTitle {
            padding-top: 0px;
        }

        .ofExtTile .ofTileTable .ofTileIcon {
            height: min-content;
            padding-bottom: 5px;
            padding-top: 15px;
        }

            .ofExtTile .ofTileTable .ofTileIcon > img, .ofExtTile .ofTileTable .ofTileIcon > svg {
                width: auto;
                height: 60px;
            }


        .ofExtTile .ofTileTable .ofDescription {
            font-size: 12px;
            height: 28px;
            vertical-align: text-top;
            padding-bottom: 5px;
        }

        .ofExtTile .ofTileTable .ofFavorite {
            padding-bottom: 15px;
        }

            .ofExtTile .ofTileTable .ofFavorite .ofIcon {
                padding-bottom: 0px;
            }

    .ofExtTile .ofOptions {
        float: right;
    }

        .ofExtTile .ofOptions .ofIcon {
            padding-bottom: 0px;
        }

    .ofExtTile > .ofOptions ~ .ofTileTable .ofTitle, .ofExtTile > .ofOptions ~ .ofTileTable .ofTileIcon {
        padding-top: 0px;
    }


    .ofExtTile .ofTileTable tr:last-child > td {
        padding-bottom: 15px;
    }

/*--- Ext Tile End ----*/

/*--- Ext Tile List Start ----*/

.ofExtTileList {
    display: inline-flex;
}

.ofExtList {
    display: inline-flex;
    overflow: hidden;
    margin-left: 0px;
    margin-right: 0px;
}

.ofExtList_ViewAll {
    display: inline-block;
    overflow: unset;
    margin-left: 29px;
    margin-right: 29px;
}

.ofNavigationIconWrapper {
    margin-top: auto;
    margin-bottom: auto;
}


/*--- Ext Tile List End ----*/


/*--- Begin Section Loader ----*/
.sectionBody{
    position:relative;
}

.oFLocalLoader {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #555555;
    opacity: .18;
    -webkit-opacity: .18;
    -moz-opacity: .18;
    filter: alpha(opacity=18);
    z-index: 49999;
}

/*--- End Section Loader ----*/

/*--- Begin Section Dashboard ---*/

.ofMain_content:has(.ofDashboardParent) {
  padding: 15px;
  height: 100%;
  overflow: auto;
}

.ofDSGreenBackground {
  background-color: var(--of-ds-green);
}

.ofDSRedBackground {
  background-color: var(--of-ds-red);
}

.ofDSOrangeBackground {
  background-color: var(--of-ds-orange);
}

.ofDSYellowBackground {
  background-color: var(--of-ds-yellow);
}

.ofDSBlueBackground {
  background-color: var(--of-ds-blue);
}

.ofPanelHeader {
  display: flex;
  flex-flow: row nowrap;
  align-content: center;
  justify-content: space-between;
  height: 100%;
}

.ofPanelHeader .ofTitle {
  align-self: center;
  font-weight: 500;
  font-size: 22px;  
}

  .ofPanelHeader .ofIconBar {
    display: flex;
    flex-flow: row nowrap;
    align-content: center;
    justify-content: flex-end;
    flex-shrink: 0;
  }

.ofPanelHeader .ofIcon.ofColoured:not(.ofDisabled):not(.ofNoStates):hover {
  background-color: rgba(226, 232, 235, 0.6);
}

.ofPanelContent {
  height: 100%;
  padding: 0 15px;
}

  .ofPanelContent > div:not(.ofParagraph):not(.ofPanelContentInner) {
    height: calc(100% - 16px);
    max-width: calc(100% - 1px);
  }

  .ofPanelContent .ofPanelContentInner {
    height: calc(100% - 20px);
    overflow: auto;
  }

  .ofPanelContent:has(.ofParagraph) {
    padding-left: 10px;
  }

  .oFImageWidgetWrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden
  }

    .oFImageWidgetWrapper img {
        flex-shrink: 0;
        -webkit-flex-shrink: 0;
        /*max-width: 100%;*/        
        max-height: 100%;
        height: 100%;
    }

.overflowHidden {
  overflow: hidden;
}

  /*--- Begin Section Replaceable Widget ---*/

  .ofReplaceableWidgetCombo {
    margin-left: 0;
  }

  .ofReplaceableWidgetWindow .ofForm_ctrl_container {
    margin-left: 0;
    margin-bottom: 0;
  }

  .ofReplaceableWidgetWindow .ofButtonStrip {
    padding-top: 0;
  }

  .ofReplaceableWidgetWindow .ofParagraph {
    padding-left: 0;
  }

  /*--- End Section Replaceable Widget ---*/

  /*--- Begin Section Empty Widget ---*/

  .ofPanelContent .ofEmptyWidget {
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-family: var(--of-fontfamily);
  }

  .ofPanelContent .ofEmptyWidget > img {
    max-width: 100px;
    max-height: 100px;
    overflow: hidden;
  }

  .ofPanelContent .ofEmptyWidget > a[type="button"] {
    cursor: pointer;
    text-decoration: underline;
  }

/*.ofWindow .ofWindowContent .ofForm_ctrl_container {
    margin-left: 0px;
  }*/

  /*--- End Section Empty Widget ---*/

  /*--- Begin Section Data Summary Widget ---*/

  .ofPanelContent .ofDataSummaryWidget {
    position: relative;
  }

  .ofPanelContent .ofDataSummaryWidget .ofIllustration {
    position: absolute;
    right: 20px;
    bottom: 20px;
  }

  .ofPanelContent .ofDataSummaryWidget .ofIllustration > svg {
    height: 82px;
    width: 82px;
    fill: var(--of-grey200);
  }

  .ofPanelContent .ofDataSummaryWidget .ofSummary {
    display: flex;
    flex-flow: column nowrap;
    margin-left: 20px;
    color: var(--of-grey900);
    font-family: var(--of-fontfamily);
  }

  .ofPanelContent .ofDataSummaryWidget .ofSummary > .ofData {
    font-family: var(--of-font);
    font-size: 58px;
    font-weight: 500;
    width: fit-content;
    color: inherit;
    text-decoration: none;
  }

  .ofPanelContent .ofDataSummaryWidget .ofSummary > .ofData.ofClickable {
    text-decoration: underline;
  }

  .ofPanelContent .ofDataSummaryWidget .ofSummary > .ofData.ofClickable:hover {
    cursor: pointer;
  }

  .ofPanelContent .ofDataSummaryWidget .ofSummary > .ofSubtext {
    font-size: 16px;
    width: fit-content;
  }

  /*--- End Section Data Summary Widget ---*/   

/*--- End Section Dashboard ---*/

/*.ofImageButton.ofDisabled {
  pointer-events: none;
}*/

.oFChanged {
  font-style: italic;
}

.oFChanged::after {
  content: "*";
}

/* Core only at the moment */


  #freshWidgetContainer .ofRow > .ofForm_ctrl_container .ofControlsContainer > * {
    box-sizing: border-box!important;
  }

@media only screen and (max-width: 599px) and (orientation: portrait) {
  #freshWidgetContainer.ofWindow {
    left: calc(50% - 150px) !important;
    top: 0px !important;
  }
}

@media only screen and (max-height: 599px) and (orientation: landscape) {
  #freshWidgetContainer.ofWindow {
    left: auto !important;
    top: 0px !important;
  }
}


/*  OneFace Button Styles */

/* Primary Button Styles*/

.ofButton {
  font: var(--of-font);
  color: var(--of-white500);
  background: var(--of-primary500);
  border: 2px solid var(--of-primary500);
  font-size: 14px;
  font-weight: 400;
  border-radius: 5px;
  min-width: 100px;
  line-height: 19px;
  height: 36px;
  padding: 0px 20px;
  background-position: center;
  box-shadow: 2px 4px 6px 0px var(--of-grey300);
  box-sizing: border-box !important;
}

  .ofButton:hover {
    background-color: var(--of-primary300);
    border-color: var(--of-primary300);
    cursor: pointer;
  }

    .ofButton:focus:not(:active), .ofButton:hover:focus:not(:active) {
      background-color: var(--of-primary300); /*Custom value because I don't know what this colour was before calculation of overlay*/
      border-color: var(--of-primary300);
      box-shadow: none;
    }

    .ofButton:focus-visible:not(:active), .ofButton:hover:focus-visible:not(:active) {
      outline: var(--of-grey900) 2px solid;
      outline-offset: -1px;
    }

  .ofButton.ofActive, .ofButton:active,
  .ofButton.ofActive:focus, .ofButton:focus:active {
    background: var(--of-primary400);
    background-repeat: no-repeat;
    border-color: var(--of-primary400);
    box-shadow: inset 1px 3px 6px 0px var(--of-primary500);
  }

  .ofButton.ofActive, .ofButton:active {
    outline: none !important;
    /*animation: ofButtonClick 0.15s linear;*/
  }

  .ofButton.ofDisabled, .ofButton[disabled='true'] {
    background: var(--of-grey200);
    border-color: var(--of-grey200);
    color: var(--of-grey400);
    cursor: default !important; /* Are we sure? */
    opacity: 1;
    pointer-events: none;
    box-shadow: none;
  }

@keyframes ofButtonClick {
  0% {
    background: radial-gradient(circle, var(--of-primary300) 0%, var(--of-primary400) 0%) center no-repeat;
  }

  10% {
    background: radial-gradient(circle, var(--of-primary300) 10%, var(--of-primary400) 10%) center no-repeat;
  }

  20% {
    background: radial-gradient(circle, var(--of-primary300) 20%, var(--of-primary400) 20%) center no-repeat;
  }

  30% {
    background: radial-gradient(circle, var(--of-primary300) 30%, var(--of-primary400) 30%) center no-repeat;
  }

  40% {
    background: radial-gradient(circle, var(--of-primary300) 40%, var(--of-primary400) 40%) center no-repeat;
  }

  50% {
    background: radial-gradient(circle, var(--of-primary300) 50%, var(--of-primary400) 50%) center no-repeat;
  }

  60% {
    background: radial-gradient(circle, var(--of-primary300) 60%, var(--of-primary400) 60%) center no-repeat;
  }

  70% {
    background: radial-gradient(circle, var(--of-primary300) 70%, var(--of-primary400) 70%) center no-repeat;
  }

  80% {
    background: radial-gradient(circle, var(--of-primary300) 80%, var(--of-primary400) 80%) center no-repeat;
  }

  90% {
    background: radial-gradient(circle, var(--of-primary300) 90%, var(--of-primary400) 90%) center no-repeat;
  }

  100% {
    background: radial-gradient(circle, var(--of-primary300) 100%, var(--of-primary400) 100%) center no-repeat;
  }
}

/* Primary Button Styles END*/


/* Secondary button styles */

.ofButton.OfSecondaryButton {
  color: var(--of-primary500);
  background-color: var(--of-white500);
  border-color: var(--of-primary500);
}

  .ofButton.OfSecondaryButton:hover {
    background-color: var(--of-grey100);
    border-color: var(--of-primary300);
    cursor: pointer;
    color: var(--of-primary500);
  }

    .ofButton.OfSecondaryButton:focus:not(:active), .ofButton.OfSecondaryButton:hover:focus:not(:active) {
      background-color: var(--of-grey100);
      border-color: var(--of-primary300);
      color: var(--of-primary500);
      box-shadow: none;
    }

    .ofButton.OfSecondaryButton:focus-visible:not(:active), .ofButton.OfSecondaryButton:hover:focus-visible:not(:active) {
      outline: var(--of-primary500) 1px solid;
      outline-offset: -4px;
    }

  .ofButton.OfSecondaryButton.ofActive, .ofButton.OfSecondaryButton:active,
  .ofButton.OfSecondaryButton.ofActive:focus, .ofButton.OfSecondaryButton:focus:active {
    background-color: var(--of-grey100);
    background-repeat: no-repeat;
    border-color: var(--of-primary400);
    color: var(--of-primary500);
    box-shadow: inset 1px 3px 6px 0px var(--of-grey300);
  }

  .ofButton.OfSecondaryButton.ofActive, .ofButton.OfSecondaryButton:active {
    outline: none !important;
    /*animation: ofSecondaryButtonClick 0.1s linear;*/
  }

  .ofButton.OfSecondaryButton.ofDisabled, .ofButton.OfSecondaryButton[disabled='true'] {
    background-color: var(--of-white500);
    border-color: var(--of-grey300);
    color: var(--of-grey400);
    box-shadow: none;
  }

@keyframes ofSecondaryButtonClick {
  10% {
    background: radial-gradient(circle, var(--of-grey200) 10%, var(--of-grey100) 10%) center no-repeat;
  }

  20% {
    background: radial-gradient(circle, var(--of-grey200) 20%, var(--of-grey100) 20%) center no-repeat;
  }

  30% {
    background: radial-gradient(circle, var(--of-grey200) 30%, var(--of-grey100) 30%) center no-repeat;
  }

  40% {
    background: radial-gradient(circle, var(--of-grey200) 40%, var(--of-grey100) 40%) center no-repeat;
  }

  50% {
    background: radial-gradient(circle, var(--of-grey200) 50%, var(--of-grey100) 50%) center no-repeat;
  }

  60% {
    background: radial-gradient(circle, var(--of-grey200) 60%, var(--of-grey100) 60%) center no-repeat;
  }

  70% {
    background: radial-gradient(circle, var(--of-grey200) 70%, var(--of-grey100) 70%) center no-repeat;
  }

  80% {
    background: radial-gradient(circle, var(--of-grey200) 80%, var(--of-grey100) 80%) center no-repeat;
  }

  90% {
    background: radial-gradient(circle, var(--of-grey200) 90%, var(--of-grey100) 90%) center no-repeat;
  }

  100% {
    background: radial-gradient(circle, var(--of-grey200) 100%, var(--of-grey100) 100%) center no-repeat;
  }
}

/* Secondary Button styles End */

/* Submit loading styles Start */

.ofButton.ofSubmitGif, .ofButton.ofSubmitGif:hover:focus {
  background: var(--of-spinner-white);
  background-color: var(--of-primary300);
  border-color: var(--of-primary300);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 22px;
  color: transparent;
  pointer-events: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
  box-shadow: none;
}

.ofButton.OfSecondaryButton.ofSubmitGif {
  background: var(--of-spinner);
  background-color: var(--of-grey100);
  border-color: var(--of-primary300);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: center;
  background-size: 22px;
  color: transparent;
}

/* Submit loading styles End */

/* Miscellanceous Button Styles */

.ofComboBox .ofButton:not(:hover):not(:focus) {
  background: var(--of-grey200);
}

.OfSecondaryButtonRight {
  /* This class is used to position the Secondary Button */
  margin: 5px 15px 15px 15px !important;
  float: right;
}

/* OneFace Button Styles End */

.jqx-numberinput .jqx-icon-arrow-down {
  background-position: center -5px;
}

.jqx-numberinput .jqx-icon-arrow-up {
  background-position: center -1px;
}

.ofControlsContainer > .ofImageButton > .ofIcon {
  padding:1px;
}

#addOptionsListBox_actionPanelTextList {
    max-height: 218px;
}




/* Skeleton Styles */

.ofMain_appImperium:has(.ofSkeleton:not(.ofHide)) {
  position: relative;
}

.ofMain_appImperium:has(.ofMain_contentHeader:not(.ofHide)) .ofSkeleton.ofSkelContentHeader {
  display: none;
}


.ofNotPinnedContent:has(.ofSkeleton.ofSkelGrid:not(.ofHide)), #__MainContentBody:has(.ofSkeleton.ofSkelGrid:not(.ofHide)) {
  height: 100% !important;
  display: flex;
  flex-direction: column;
}


.ofSkeleton {
}

.ofSkelBackground {
  background-color: var(--of-grey200);
  /*animation: skeleton-loading-shimmer 1s linear infinite alternate;*/
  border-radius: 2px;
}

.ofSkeleton.ofSkelFormControl {
  display: inline-flex;
  flex-direction: column;
  padding: 5px 15px 15px 15px;
  box-sizing: border-box;
  row-gap: 7px;
  width: 160px;
}

  .ofSkeleton.ofSkelFormControl .ofSkelLabel {
    width: 65px;
    height: 12px;
  }

  .ofSkeleton.ofSkelFormControl .ofSkelInput {
    width: 100%;
    height: 24px;
  }



.ofSkeleton.ofSkelContentHeader {
  display: inline-flex;
  flex-direction: row;
  padding: 15px 15px 15px 15px;
  box-sizing: border-box;
  row-gap: 7px;
  background: white;
  width: 100%;
  height: 110px;
  z-index: 801;
}


  /*.ofSkeleton.ofSkelContentHeader {
  display: inline-flex;
  flex-direction: row;
  padding: 15px 15px 15px 15px;
  box-sizing: border-box;
  row-gap: 7px;
  background: white;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}
*/
  .ofSkeleton.ofSkelContentHeader .ofLeft {
    display: inline-flex;
    flex-direction: column;
    row-gap: 10px;
  }

  .ofSkeleton.ofSkelContentHeader .ofRight {
    display: inline-flex;
    flex-direction: column;
    margin-left: auto;
    row-gap: 10px;
    align-items: flex-end;
  }

  .ofSkeleton.ofSkelContentHeader .ofSkelTitle, .ofSkeleton.ofSkelSection .ofSkelTitle {
    width: 184px;
    height: 24px;
  }

  .ofSkeleton.ofSkelContentHeader .ofSkelToolbar {
    width: 218px; /* Style guide seemed a little short */
    height: 40px;
  }

  .ofSkeleton.ofSkelContentHeader .ofSkelStatus {
    width: 155px;
    height: 40px;
  }

  .ofSkeleton.ofSkelContentHeader .ofSkelMeta {
    width: 225px;
    height: 14px;
  }

  .ofSkeleton.ofSkelContentHeader .ofSkelMeta2 {
    width: 260px;
    height: 14px;
  }

.ofSkeleton.ofSkelSection {
  width: 100%;
  min-height: 170px;
  margin-bottom: 15px;
  display: inline-flex;
  flex-direction: column;
}

  .ofSkeleton.ofSkelSection .ofSkelContent {
    display: flex;
    flex-wrap: wrap;
    flex-grow: 1;
    background: var(--of-white500);
  }


  .ofSkeleton.ofSkelSection .ofSkelHeader {
    display: flex;
    background: var(--of-white500);
  }

    .ofSkeleton.ofSkelSection .ofSkelHeader .ofSkelTitle {
      margin: 10px 0px 10px 10px;
    }

  .ofSkeleton.ofSkelSection:has(.ofSkelTabs) .ofSkelHeader .ofSkelTitle {
    display: none;
  }


  .ofSkeleton.ofSkelSection .ofSkelHeader .ofSkelImgBtn {
    height: 24px;
    width: 24px;
    margin: 10px 10px 10px 0px;
    border-radius: 4px;
    margin-left: auto;
  }

  .ofSkeleton.ofSkelSection.ofSkelGridSection {
    height: 250px;
  }

  .ofSkeleton.ofSkelSection.ofSkelInputSection {
    height: 170px;
  }

  .ofSkeleton.ofSkelSection:has(.ofSkelGrid) {
    height: unset;
    flex-grow: 1;
  }


  .ofSkeleton.ofSkelSection .ofSkelTabs {
    display: flex;
    background-color: transparent;
  }

    .ofSkeleton.ofSkelSection .ofSkelTabs .ofSkelTab {
      height: 30px;
      width: 150px;
      margin-right: 10px;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      background: var(--of-white500);
    }

      .ofSkeleton.ofSkelSection .ofSkelTabs .ofSkelTab:before {
        content: "";
        display: flex;
        margin: 8px 0px 10px 10px;
        background: var(--of-grey200);
        height: 14px;
        width: 72px;
      }



.ofSkeleton.ofSkelGrid {
  width: 100%;
  /*height: 350px;*/
  background: var(--of-white500);
  display: flex;
  flex-direction: column;
}

  .ofSkeleton.ofSkelGrid .ofSkelGridHeader {
    background: var(--of-grey200);
    width: 100%;
    height: 26px;
  }

  .ofSkeleton.ofSkelGrid .ofSkelGridContent {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(3, 40px);
  }

    .ofSkeleton.ofSkelGrid .ofSkelGridContent > div {
      margin: 7.5px;
    }

      .ofSkeleton.ofSkelGrid .ofSkelGridContent > div:not(.ofSkelSyncAnimation) {
        /* animation: skeleton-loading-shimmer-grid 0.75s linear infinite alternate;*/
      }

      .ofSkeleton.ofSkelGrid .ofSkelGridContent > div:nth-child(-n+4) {
        background: linear-gradient(0deg, rgba(226,232,235,1) 0%, rgba(208,215,221,1) 100%);
      }

      .ofSkeleton.ofSkelGrid .ofSkelGridContent > div:nth-child(n+5):nth-child(-n+8) {
        background: linear-gradient(0deg, rgba(248,248,249,1) 0%, rgba(226,232,235,1) 100%);
      }

      .ofSkeleton.ofSkelGrid .ofSkelGridContent > div:nth-child(n+9):nth-child(-n+12) {
        background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(245,248,250,1) 100%);
      }

.ofSkeleton.ofSkelRect {
  display: flex;
  height: 100%;
  width: 100%;
}

.ofSkelSyncAnimation {
  animation: none !important;
}