/*region Text */
.bold {
  font-weight: bolder;
}

.highlight {
  font-weight: bold;
}

.f14 {
  font-size: 14px;
}

.f12 {
  font-size: 12px;
}

.f10 {
  font-size: 10px;
}

.f8 {
  font-size: 9px !important;
}

.f8-it {
  font-size: 9px;
  font-style: italic;
}

.italic {
  font-style: italic;
}

.f16 {
  font-size: 16px;
}

.f18 {
  font-size: 18px;
}

.text-right {
  text-align: right !important;
}

.relative {
  position: relative;
}

h1.inverse {
  color: #566770;
  background-color: #ced9db;
  padding: 10px;
}

h3.blueUnderline {
  margin: 0;
  padding: 0;
  padding-right: 10px;
  margin-bottom: 25px;
  border-bottom: 2px solid #73a8bc;
}

.noDecorationOnHover:hover {
  text-decoration: none;
}

/* rem based font size classes: 1 step ~ 2px ~ 0.16 rem , b for bold*/
.font-l {
  font-size: 1.16rem;
}

.font-xl {
  font-size: 1.33rem;
}

.font-xxl {
  font-size: 1.5rem;
}

.font-xl-b {
  font-size: 1.33rem;
  font-weight: bold;
}

.f-larger {
  font-size: larger;
}

/*endregion*/

/*region Colors and Borders */
.red {
  color: #ef5350 !important;
}

.blue {
  color: #4798c4 !important;
}

.lGrey {
  color: #bbb;
}

.grey {
  color: #888;
}

.dGrey {
  color: #666;
}

.d2Grey {
  color: hsl(0, 0%, 33.3%);
}

.ddGrey {
  color: #333;
}

.green {
  color: #72a336;
}

.orange {
  color: #f57c00;
}

.orange-text {
  color: #d36110;
}

.background-white {
  background-color: #fff;
  position: relative;
}

.bg-grey {
  background-color: #d6e9ed;
  padding-left: 10px;
}

/* BORDERS */

.borderRed {
  border: 1px solid #ef5350 !important;
}

.border-top {
  border-top: 1px solid #eee;
}

.border-bottom {
  border-bottom: 1px solid #eee !important;
}

.right-brdr {
  border-right: 1px dotted #afafaf !important;
}

.bor-grey {
  border: 1px solid #ddd;
}

.tr-bor-grey > * {
  border: thin solid #e8e8e8;
}

/* COLOR CODE */
.bg-dGrey {
  background-color: #efefef;
  padding: 0 5px;
  margin-right: 10px;
}

/*endregion*/

/*region Others */
.neverhide {
  display: block !important;
}

.jsCopyFromClass .jsShowOnlyAfterUpdate {
  display: none;
}

.x-scrollable {
  overflow-x: auto !important;
  max-width: 99% !important;
}

.led-hidden {
  display: none;
}

.hidden {
  display: none !important;
}

.rounded-corners {
  border-radius: 5px;
}

.invisible-scrollbar {
  /*noinspection CssUnknownProperty*/
  scrollbar-width: none;
}

.invisible-scrollbar::-webkit-scrollbar {
  display: none;
}

/*endregion*/

/*region Sizing */
.input-box-emulator {
  padding: var(--form-control-padding);
  border: 1px solid transparent;
}

.center-input-label {
  padding-top: var(--form-control-padding);
  padding-bottom: var(--form-control-padding);
}

.w20 {
  width: 25px !important;
}

.w35 {
  width: 35px !important;
}

.w45 {
  width: 45px;
}

.w50 {
  width: 50px;
}

.w55 {
  width: 55px;
}

.w60 {
  width: 60px;
}

.w65 {
  width: 65px;
}

.w70 {
  width: 70px;
}

.w75 {
  width: 75px;
}

.w80 {
  width: 80px !important;
}

.w85 {
  width: 85px;
}

.w90 {
  width: 90px;
}

.w100 {
  width: 100px !important;
}

.w105 {
  width: 105px;
}

.w115 {
  width: 115px;
}

.w120 {
  width: 120px !important;
}

.w135 {
  width: 135px;
}

.w150 {
  width: 150px;
}

.w155 {
  width: 155px;
}

.w160 {
  width: 160px !important;
}

.w165 {
  width: 165px;
}

.w170 {
  width: 170px;
}

.w180 {
  width: 180px !important;
}

.inputMaxWidth140 {
  width: 180px !important;
}

.w20rem {
  width: 20rem;
}

.inputMaxWidth160 {
  width: 192px !important;
}

@media screen and (max-width: 992px) {
  .inputMaxWidth160,
  .inputMaxWidth140 {
    width: 140px !important;
  }
}

@media screen and (max-width: 768px) {
  .inputMaxWidth160,
  .inputMaxWidth140 {
    width: 130px !important;
  }
}

@media only screen and (max-width: 768px) {
  .inputMaxWidth160,
  .inputMaxWidth140 {
    width: 110px !important;
  }
}

@media only screen and (max-width: 768px) {
  .inputMaxWidth160,
  .inputMaxWidth140 {
    width: 90px !important;
  }
}

.inputMaxWidth200 {
  width: 200px !important;
}

.inputMaxWidthLarge {
  width: 280px !important;
}

@media only screen and (max-width: 768px) {
  .inputMaxWidthLarge {
    width: 150px !important;
  }
}

.inputMaxWidth340 {
  width: 340px !important;
}

@media screen and (max-width: 576px) {
  .inputMaxWidth200,
  .inputMaxWidthLarge,
  .inputMaxWidth340,
  .inputMaxWidth160,
  .inputMaxWidth140 {
    width: 120px !important;
  }
}

@media screen and (max-width: 350px) {
  .inputMaxWidth160 {
    width: 180px !important;
  }

  .inputMaxWidth140 {
    width: 180px !important;
  }
}

.w200 {
  width: 100%;
  max-width: 200px;
}

.w240 {
  width: 100%;
  max-width: 240px;
}

.w250 {
  width: 100%;
  max-width: 250px;
}

.w275 {
  width: 100%;
  max-width: 275px;
}

.w300 {
  width: 100%;
  max-width: 300px;
}

.w320 {
  width: 100%;
  max-width: 320px;
}

.w330 {
  width: 100%;
  max-width: 330px;
}

.w400 {
  width: 100%;
  max-width: 400px;
}

.w700 {
  width: 100%;
  max-width: 700px;
}

.w750 {
  width: 100%;
  max-width: 750px;
}

.w880 {
  width: 100%;
  max-width: 880px;
}

.w-s {
  width: 100%;
  max-width: 400px;
}

.w-s2 {
  width: 100%;
  max-width: 500px;
}

.w-m {
  width: 100%;
  max-width: 800px;
}

.w-l {
  width: 100%;
  max-width: 900px;
}

.s {
  width: 100%;
  max-width: 500px;
}

.m {
  width: 100%;
  max-width: 600px;
}

.l {
  width: 100%;
  max-width: 860px;
}

.xl {
  width: 100%;
  max-width: 1100px;
}

.xl2 {
  width: 100%;
  max-width: 1200px;
}

.xxl {
  width: 100%;
  max-width: 1300px;
}

.sideByDocumentViewerOverlayWidth {
  max-width: 1200px;
  width: 100%;
}

.wFixed240 {
  width: 240px;
}

.wFixed250 {
  width: 250px;
}

.minW80 {
  min-width: 80px;
}

.minW150 {
  min-width: 150px;
}

.minW160 {
  min-width: 160px;
}

.minW360 {
  min-width: 360px;
}

.minW410 {
  min-width: 410px;
}

.minW505 {
  min-width: 505px;
}

.wauto {
  width: auto;
}

.w70per {
  width: 64%;
}

.w32per {
  width: 32%;
}

.w30per {
  width: 34%;
}

.w50per {
  width: 49%;
}

.w100per {
  width: 100%;
}

.wid-20em {
  width: 20em;
}

.led-h5 {
  height: 5px;
}

.h20 {
  height: 20px;
}

.h100 {
  height: 100px;
}

.height-2em {
  height: 2em;
}

.text-fix-width-4em {
  width: 4em;
  display: inline-block;
  text-align: right;
}

@media only screen and (min-width: 1440px) {
  .sideByDocumentViewerOverlayWidth:has(#sideByDocumentViewer) {
    max-width: 2000px;
  }
}

@media only screen and (max-width: 768px) {
  .adjust-width-100 {
    width: 100% !important;
  }
}

@media screen and (max-width: 576px) {
  .pad-50per {
    width: calc(100% - 20px) !important; /* NEEDED TO OVERRIDE THE IMPORTANT BEFORE*/
  }

  .description.w300 {
    width: 200px;
  }
}

@media screen and (max-width: 576px) {
  .phone-h20 {
    height: 20px;
  }
}

/*endregion*/

/*region Margins and Paddings */
.m15,
h3.m15 {
  margin-left: 15px;
  margin-right: 15px;
}

.m-b-25 {
  margin-bottom: 25px;
}

.m-r-25 {
  margin-right: 25px;
}

.p-r-25 {
  padding-right: 25px !important;
}

.indent {
  padding-left: 40px;
}

.p10 {
  padding-left: 10px;
}

.pl10 {
  padding-left: 10px;
}

.ptop {
  padding-top: 10px !important;
}

.pad4px {
  padding: 4px;
}

.pad-1em {
  padding: 1em;
}

.pad-0_5em {
  padding: 0.5em;
}

.pady-0_25em {
  padding-top: 0.25em;
  padding-bottom: 0.25em;
}

.pady-0_33em {
  padding-top: 0.33em;
  padding-bottom: 0.33em;
}

.pady-0_5em {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.tr-pady-0_5em > td,
.comp-table .tr-pady-0_5em > td {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}

.inlinePadding {
  display: inline-block;
  width: 20px;
}

.add-0_5em-spaces > :not(:last-child) {
  margin-bottom: 0.5em;
}

.margin-halfex {
  margin: 0.5ex;
}

.margin-halfem {
  margin: 0.5em;
}

.marginr-1em {
  margin-right: 1em;
}

.marginr-halfem {
  margin-right: 0.5em;
}

.margint-1em {
  margin-top: 30px;
}

.mary-0_5em {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

.mary-1em {
  margin-top: 1em;
  margin-bottom: 1em;
}

.margin-b-3em {
  margin-bottom: 3em;
}

/*endregion*/

/*region Positioning and Visibility */
.vmiddle {
  vertical-align: middle;
}

.vtop,
table.comp-table td.vtop {
  vertical-align: top;
  padding-top: 5px;
}

.vtopWOpadding {
  vertical-align: top;
}

.inline {
  display: inline;
}

.float {
  float: left;
}

.floating {
  padding-right: 5px;
  float: left;
}

.center {
  margin-left: auto;
  margin-right: auto;
}

.free-width {
  width: auto;
}

.float-r {
  float: right;
}

.nowrap {
  white-space: nowrap;
}

.strike {
  text-decoration: line-through;
}

.show-below900,
.show-below650,
span.led-label.show-below650,
span.led-label.show-below900 {
  display: none;
}

@media screen and (max-width: 768px) {
  .show-below900 {
    display: inline !important;
  }
}

.showBelowPad {
  display: none;
}

@media screen and (max-width: 768px) {
  .showBelowPad {
    display: initial;
  }
}

.adjust-floating {
  float: right;
}

@media screen and (max-width: 992px) {
  .adjust-floating {
    float: left !important;
  }
}

.clr {
  clear: both;
  overflow: hidden;
  height: 0;
}

.clr-small-screen,
.clr-below-650,
.clr-below-900 {
  clear: both;
  overflow: hidden;
  height: 0;
  display: none;
}

.positionTop {
  bottom: 100%;
  left: -50px;
}

.positionTopRight {
  bottom: 100%;
  left: 0;
}

.positionBottom {
  top: 100%;
  left: -50px;
}

.positionBottomLeft {
  top: 100%;
  right: 0;
}

.positionBottomRight {
  top: 100%;
  left: 0;
}

.positionLeftBottom {
  right: 100%;
  top: 0;
}

.empty-disappear:empty {
  display: none;
}

.flex-baseline {
  display: flex;
  align-items: baseline;
}

.flex-auto {
  flex: auto;
}

.border-box {
  box-sizing: border-box;
}

.jsCopyValueToClipboardText {
  opacity: 0;
}

@media screen and (max-width: 992px) {
  .hide-in-pad {
    display: none;
  }

  .adjust-width {
    width: auto !important;
    max-width: 100% !important;
  }

  .pad-50per {
    width: calc(50% - 20px) !important;
  }
}

@media screen and (max-width: 768px) {
  .hide-below-900 {
    display: none;
  }
}

@media only screen and (max-width: 768px) {
  .stop-floating {
    float: none !important;
    display: inline-block;
  }

  .clr-small-screen {
    display: block;
  }

  .clr-below-900 {
    display: block;
  }
}

@media screen and (max-width: 576px) {
  .hide-below650 {
    display: none;
  }

  .show-below650 {
    display: inline !important;
  }

  .clr-below-650 {
    display: block;
  }
}

input.clear {
  background: none;
  border: none;
}

/*endregion*/

/*region .showOnlyInIe*/
.showOnlyInIE {
  display: none;
}

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .showOnlyInIE {
    display: block;
  }
}

/* set and removed by javascript */
.waitForReact {
  /* display:none wont allow textarea resizing and window centering to work properly
     visibility:hidden might allow some internal content with absolute positioning to show
     opacity:0 seems to work the best */
  opacity: 0;
  /* fixed positioning makes it not compete for room with placeholder, avoiding some potential
     flickering, also keeps it from creating scrollbars on some browsers */
  position: fixed;
  top: 0;
  left: 0;
  /* at certain rendering stages unset width/height can small cause content to be rendered too
     small and cause window centering logic to not work properly, some width/height is needed */
  width: 100vw;
  height: 100vh;
}

.waitForReactOnPageLoad {
  visibility: hidden;
}

/* most useful on a tr */
.children-mw-40 > * {
  max-width: 40rem;
}

/* seems to be a pattern I often hit. */
.align-items-center {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.grid-2-columns-4sm {
  grid-template-columns: max-content max-content;
  gap: 0.5rem;
}

@media screen and (min-width: 576px) {
  .grid-2-columns-4sm {
    grid-template-columns: max-content max-content max-content max-content;
  }

  .grid-2-columns-4sm > div:nth-child(4n - 2) {
    margin-right: 1.5rem;
  }
}