: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: #8B97A6;
  --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;
  /* Status Colours */
  --of-success: var(--of-green300);
  --of-warning: var(--of-gold400);
  --of-error: var(--of-red400);
  --of-info: var(--of-accent400);
  /* 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;
  /* 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;
}

/* --------------- width in columns -------------------- */
.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);
}


#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;
}

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

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

  .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;
        }


.ofCookieBanner {
  position: fixed;
  bottom: 0px;
  left: 200px;
  width: calc(100% - 200px);
  background-color: #543F99;
  z-index: 100000;
  overflow: auto;
  color: white;
}

  .ofCookieBanner .ofCookieHeader {
    margin-left: 11px;
    margin-right: 15px;
    margin-top: 15px;
  }

    .ofCookieBanner .ofCookieHeader .ofNotice {
      display: inline-flex;
      top: 0px;
      left: 0px;
    }
      .ofCookieBanner .ofCookieHeader .ofNotice .ofNoticeText {
        margin: auto 0px auto 5px;
        font-size: 22px;
        font-weight: 500;
      }
      .ofCookieBanner .ofCookieHeader .ofNotice .ofIcon {
        fill: white;
        width: 30px;
        height: 30px;
        pointer-events: none;
      }

    .ofCookieBanner .ofCookieHeader .ofClose {
      top: 0px;
      right: 15px;
      position: absolute;
      margin: 5px;
      margin-right: 0px;
      margin-top: 15px;
    }
      .ofCookieBanner .ofCookieHeader .ofClose .ofIcon {
        fill: white;
      }

  .ofCookieBanner .ofCookieContent {
    margin: 0px 15px 0px 15px;
  }

    .ofCookieBanner .ofCookieContent .ofText {
      margin: 15px 0px 15px 0px;
    }

      .ofCookieBanner .ofCookieContent .ofText .ofLink {
        color: white;
      }

        .ofCookieBanner .ofCookieContent .ofText .ofLink:visited {
          color: white;
        }

  .ofCookieBanner .ofCookieOptions {
    float: right;
    margin-right: 15px;
    margin-bottom: 25px;
    display: inline-flex;
  }
    

    .ofCookieBanner .ofCookieOptions .ofCookieAccept {
      border: 2px solid white !important;
      min-width: 150px !important;
      color: #543F99 !important;
    }


.ofMinMenu ~ .ofMain_appImperium .ofCookieBanner {
  width: calc(100% - 50px); /* Number is the width of the icon menu (.ofMinMenu) */
  left: 50px; /* Number is the width of the icon menu (.ofMinMenu) */
}

@media only screen and (max-width: 599px) {
  .ofCookieBanner {
    width: 100%;
    left: 0px;
  }
}

.ofEnvIndicator {
  min-height: 20px;
  background-color: #fed81e;
  text-align: center;
  font-size: 14px;
  color: var(--of-grey900);
  line-height: 21px;
  height: 20px;
}

  .ofEnvIndicator.ofHidden {
    display: none;
  }

  .ofEnvIndicator .ofIcon {
    height: 12px;
    width: 12px;
    vertical-align: bottom;
    padding: 3px;
  }

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

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

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

  .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;
  }

  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;
  }

  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;
  }


.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: 22px;
  padding-left: 15px;
  letter-spacing: 0;
  font-style: normal;
  line-height: 32px;
  font-weight: 300;
}

.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;
      }

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

.ofSection_header .ofSectionActions {
  display: flex;
  float: right;
  height: 100%;
}

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

.ofPageSection_controls {
  display: block !important
}
/* End of oF Section Class styles */
/* Start of oF Control Class styles */
.ofControl {
  padding: 5px 15px 15px 15px;
  margin-top: 0;
}

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

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

.ofIcon.ofNoStates:not(.ofDisabled):active, .ofIcon.ofNoStates:not(.ofDisabled):hover {
  background: none;
}

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

.ofTextToolbarButton > .ofIcon {
  width: auto;
}

.ofTextToolbarButton.ofDisabled > .ofIcon {
  opacity: 0.5;
}


.ofTextToolbarButton > .ofIcon:hover {
  color: var(--of-accent400);
}

.ofTextToolbarButton.ofDisabled > .ofIcon:hover {
  cursor: default;
  color: var(--of-grey900);
}

.ofMain_contentHeader .ofToolBarSet > .ofToolBar > .ofTooltip > button {
  display: none;
}

.ofMain_contentHeader .ofMoreButtonHiddenHolder {
  position: absolute;
  background-color: #fff;
  border: 1px solid #aaaaaa;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  display: none !important;
}

  .ofMain_contentHeader .ofMoreButtonHiddenHolder.shown {
    display: block !important;
  }

  .ofMain_contentHeader .ofMoreButtonHiddenHolder .ofTooltip > button {
    display: none;
  }

.ofMoreButtonHiddenHolder .ofTooltip .ofIcon {
  vertical-align: top;
}

.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;
}

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

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

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

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

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

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

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

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

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

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

.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;
}

.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;
}

.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;
}

.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 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);
    /*transform: rotate(90deg);*/
  }

.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 {
  display: flex;
  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;
}

.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;
}

  .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.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 .ctrlLabel {
  color: #9A9A9A;
}

.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 {
  display: table-row;
}

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

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

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

  .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;
}

input:placeholder-shown {
  font-style: italic;
}

.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 6px 0;
  color: var(--of-grey900);
  font-weight: 400;
  letter-spacing: 0;
}



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

.ofForm_ctrl_container.ofReadOnly {
  margin: 5px 5px 0 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;
  max-width: 600px;
  min-height: 50px;
  max-height: 200px;
}

.ofTextAreaCount {
  font-size: 12px;
}

#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: 0px 15px 15px 15px;
    justify-content: space-between;
    flex-wrap: nowrap;
  }

    .ofRow.ofSearch > :first-child {
      margin-right: 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 .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%;
    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;
}

@media only screen and (max-width: 599px) {
    .ofSearchSection.ofSavedSearchShow .ofHeader {
      height: 60px !important;
    }

    .ofSearchSection .ofSavedSearch {
      position: absolute;
      top: 30px;
      border: none;
      background: transparent;
      width: 290px;
    }

    .ofSavedSearchShow .ofSection_header {
      display: block;
    }
  }

  .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 .ofSection {
    margin: 0 0.1px 0 0;
  }

    .ofTabSections .ofSection .ofHeader {
      padding-top: 10px !important;
    }

    .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;
    }


  .ofFileUpload {
    display: flex;
  }

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

  .ofFileUpload .buttonArea > [type="file"] {
    height: 28px;
    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;
        height: 28px;
        flex-grow: 1;
        width:100%;
    }

    .ofFileUpload .nameArea > svg {
      position: absolute;
      right: 2px;
      top: 12%;
      height: 10px;
      width: 10px;
    }

/*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;
  }

  .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;
  }

  .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);
      }

  .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;
  }

/*--- 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: 30px;
    padding-right: 30px;
  }

    .ofExtTile .ofTileTable .ofTitle {
      height: 40px;
      vertical-align: text-top;
      font-size: 16px;
      font-weight: 500;
      padding-bottom: 5px;
      padding-top: 15px;
    }

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

  /* Search Page Checkbox Alignment*/
  .ofVertical_align .ofForm_ctrl_container {
    vertical-align: text-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);
      }

.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 > 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;
  }

    .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;
  }

  .OfSecondaryButtonRight {
    /* This class is used to position the Secondary Button */
    margin: 5px 15px 15px 15px !important;
    float: right;
  }

  /* 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: 30px;
  }

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

    .ofSwitch .ofSwitchArea {
      position: relative;
      display: inline-block;
      width: 38px;
      min-width: 38px;
      height: 20px;
      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: 2px;
      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 {
    border: 1px solid;
    border-left-color: currentcolor;
    border-left-style: solid;
    border-left-width: 1px;
    border-left: 0;
    margin-left: -6px;
    background-color: #fff;
    height: 30px;
  }

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

    .oFLookupTextInputContainer {
      border: 0.5px solid var(--of-grey900);
      display: block;
    }

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

  .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;
  }

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

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

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

  .oFLookupTextInputContainer .oFMultiselectTextBoxHolder {
    padding: 0 5px;
    font-size: 14px;
    outline: 0px solid transparent;
  }


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

  .oFLookupTextInputContainer .oFLookupPopUpItem {
    border: 1px solid #A8A8A8;
    color: var(--of-grey900);
    display: inline-flex;
    align-items: center;
    padding: 0 3px;
    border-radius: 3px;
    font-size: 14px;
    line-height: 20px;
    background: var(--of-white500);
    margin: 3px;
    max-width: 90%
  }
    .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%;
  }

  .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;
    cursor: pointer;
  }

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

/*--------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;
}


.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;
  }

  .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;
}

.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 > div {
    margin-right: 15px;
}

.ofControlsGroupContent {
    display: table-cell;
}

.ctrlHeader {
    display: table-cell;
}

.ofSection .ofAdvancedSearchLink {
  cursor: pointer;
  line-height: 35px;
  text-decoration: underline;
  color: var(--of-secondary400);
}
.ofSection .ofAdvancedSearchLink:hover {
  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 {
    width: calc(100%);
    height: 235px;
    border: 0px 0px 1px 1px solid var(--of-grey300);
    display: flex;
    flex-flow: row nowrap;
    background-color: var(--of-white500);
  }

  .ofWelcomeHeader > .ofProfile {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .ofWelcomeHeader > .ofAdvertContainer {
    margin: 0;
    height: 100%
  }

  .ofWelcomeHeader .ofImage, .ofWelcomeHeader .ofText {
    font-size: 3.5em;
    font-weight: lighter;
  }
  .ofWelcomeHeader .ofImage {
    width: 135px;
    height: 135px;
    border-radius: 50%;
    background: rgb(0,125, 192);
    color: #fff;
    text-align: center;
    line-height: 135px;
    margin: 20px 0;
    flex: 0 0 auto;
  }
  .ofWelcomeHeader .ofProfile .ofProfileContainer {
    display: flex;
    align-items: center;
    flex-direction: row;
    padding-left: 30px;
    width: 100%;
  }
  .ofWelcomeHeader .ofText {
    text-align: center;
    padding-left: 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;
  }

  .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;
    top: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    display: flex;
    flex-flow: column nowrap;
    align-items: flex-start;
    justify-content: center;
    color: white;
    padding: 0 50px;
  }

  .ofSlideshow .ofImages .ofSlide .ofAdContent .ofInfoText {
    font-weight: bold;
    margin-right: auto;
    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;
  }
/*-----------Slideshow Control END-----------*/


.ofFloatingSection {
  display: inline-block;
  vertical-align: top;
  box-sizing: content-box;
}

.ofFloatingSection + .ofFloatingSection > * {
  margin-left:15px;
}