:root {
  --los-border-radius: 0.25em;
  --logo-width: 189px;
  --logo-height: 112px;

  /*
    Each bright and dark color has 9 lighter variations;
    Generated using mix utility function available in Client On-boarding service

    Requires UX/UI team approval to introduce any new system color variables.
  */
  --white-sys-opacity-20: rgba(255, 255, 255, 0.2);
  --black-sys-opacity-20: rgba(0, 0, 0, 0.2);

  --white-sys: #fff;
  --brown-sys:#A5673F;
  --black-sys: #000;
 
  /* For Spread module grey color variant */
  --text-sys-spread:#333;
  --rich-black-sys-spread:#1B1C1D;
  --dark-grey-sys-spread:#444;
  --dark-grey-sys-spread-1:#555;
  --dark-grey-sys-spread-2:#666;

  --grey-sys-spread:#777;
  --grey-sys-spread-05: #f8f8f8;
  --grey-sys-spread-10: #f1f1f1;
  --grey-sys-spread-20: #e4e4e4;
  --grey-sys-spread-30: #d6d6d6;
  --grey-sys-spread-40: #c9c9c9;
  --grey-sys-spread-50: #bbbbbb;
  --grey-sys-spread-60: #adadad;
  --grey-sys-spread-70: #a0a0a0;
  --grey-sys-spread-80: #929292;
  --grey-sys-spread-90: #858585;


  --dark-sys-b:#0F1943;
  --dark-sys-b-5: #F3F4F6;
  --dark-sys-b-10: #E6E7EC;
  --dark-sys-b-20: #CFD1D9; 
  --dark-sys-b-30: #B6B9C6;
  --dark-sys-b-40: #9FA3B3;
  --dark-sys-b-50: #868BA0;
  
  --dark-sys-d-40: #090F29;

  --red-sys-b:#E31F28;
  --red-sys-b-90:#E5353D;
  --red-sys-b-80:#E85259;
  --red-sys-b-70:#EB6168;
  --red-sys-b-60:#EE787E;
  --red-sys-b-50:#F18E93;
  --red-sys-b-40:#F4A5A9;
  --red-sys-b-30:#F7BBBE;
  --red-sys-b-20:#FAD2D4;
  --red-sys-b-10:#FCE8E9;

  --red-sys-d:#BA1A22;
  --red-sys-d-90:#c13138;
  --red-sys-d-80:#c8484e;
  --red-sys-d-70:#cf5f64;
  --red-sys-d-60:#d6767a;
  --red-sys-d-50:#dd8d91;
  --red-sys-d-40:#881318;
  --red-sys-d-30:#eababd;
  --red-sys-d-20:#B51920;
  --red-sys-d-10:#f8e8e9;

  --orange-sys-b:#F58220;
  --orange-sys-b-90:#F68E35;
  --orange-sys-b-80:#F79B4C;
  --orange-sys-b-70:#F8A762;
  --orange-sys-b-60:#f9b479;
  --orange-sys-b-50:#FAC08F;
  --orange-sys-b-40:#FBCDA5;
  --orange-sys-b-30:#FCD9BB;
  --orange-sys-b-20:#fde6d2;
  --orange-sys-b-10:#FEF2E8;

  --orange-sys-d:#F35D2C;
  --orange-sys-d-90:#f46d41;
  --orange-sys-d-80:#f57d56;
  --orange-sys-d-70:#f78e6b;
  --orange-sys-d-60:#f89e80;
  --orange-sys-d-50:#f9ae96;
  --orange-sys-d-40:#934E13;
  --orange-sys-d-30:#fbcec0;
  --orange-sys-d-20:#C4681A;
  --orange-sys-d-10:#feefea;

  --yellow-sys-b:#FED617;
  --yellow-sys-b-90:#FEDA2D;
  --yellow-sys-b-80:#fede45;
  --yellow-sys-b-70:#FEE25C;
  --yellow-sys-b-60:#FEE673;
  --yellow-sys-b-50:#FEEA8A;
  --yellow-sys-b-40:#ffefa2;
  --yellow-sys-b-30:#fff3b9;
  --yellow-sys-b-20:#FFF7D0;
  --yellow-sys-b-10:#FFFBE7;

  --yellow-sys-d:#E8AC09;
  --yellow-sys-d-90:#eab422;
  --yellow-sys-d-80:#edbd3a;
  --yellow-sys-d-70:#efc553;
  --yellow-sys-d-60:#f1cd6b;
  --yellow-sys-d-50:#f4d684;
  --yellow-sys-d-40:#99810E;
  --yellow-sys-d-30:#f8e6b5;
  --yellow-sys-d-20:#CBAB12;
  --yellow-sys-d-10:#fdf7e6;

  --blue-sys-b:#0055D5;
  --blue-sys-b-90:#1965D9;
  --blue-sys-b-80:#3377DD;
  --blue-sys-b-70:#4C87E1;
  --blue-sys-b-60:#6699E6;
  --blue-sys-b-50:#7FA9EA;
  --blue-sys-b-40:#99BBEE;
  --blue-sys-b-30:#B2CBF2;
  --blue-sys-b-20:#CCDDF7;
  --blue-sys-b-10:#E5EDFB;
  --blue-sys-b-5:#F2F6FD;
  
  --blue-sys-d-20:#0044AA;
  --blue-sys-d-40:#003381;
 

  /*** special treat for spread ***/
  --blue-sys-spread-b:#099AED;
  --blue-sys-spread-b-90:#22a4ef;
  --blue-sys-spread-b-80:#3aaef1;
  --blue-sys-spread-b-70:#53b8f2;
  --blue-sys-spread-b-60:#6bc2f4;
  --blue-sys-spread-b-50:#84cdf6;
  --blue-sys-spread-b-40:#9dd7f8;
  --blue-sys-spread-b-30:#b5e1fa;
  --blue-sys-spread-b-20:#ceebfb;
  --blue-sys-spread-b-10:#e6f5fd;

  --blue-sys-spread-d:#0E6BA1;
  --blue-sys-spread-d-90:#267aaa;
  --blue-sys-spread-d-80:#3e89b4;
  --blue-sys-spread-d-70:#5697bd;
  --blue-sys-spread-d-60:#6ea6c7;
  --blue-sys-spread-d-50:#87b5d0;
  --blue-sys-spread-d-40:#9fc4d9;
  --blue-sys-spread-d-30:#b7d3e3;
  --blue-sys-spread-d-20:#cfe1ec;
  --blue-sys-spread-d-10:#e7f0f6;
  /***/

  --green-sys-b:#00B02D;
  --green-sys-b-90:#19B741;
  --green-sys-b-80:#33BF57;
  --green-sys-b-70:#4CC76B;
  --green-sys-b-60:#66CF81;
  --green-sys-b-50:#7FD795;
  --green-sys-b-40:#99DFAB;
  --green-sys-b-30:#B2E7BF;
  --green-sys-b-20:#CCEFD5;
  --green-sys-b-10:#E5F7E9;

  --green-sys-d:#207D38;
  --green-sys-d-90:#368a4c;
  --green-sys-d-80:#4d9760;
  --green-sys-d-70:#63a474;
  --green-sys-d-60:#79b188;
  --green-sys-d-50:#90be9c;
  --green-sys-d-40:#00691B;
  --green-sys-d-30:#bcd8c3;
  --green-sys-d-20:#008C24;
  --green-sys-d-10:#e9f2eb;

}

/* headers */

h1 {
  font-size: 2.25em;
}

h2 {
  font-size: 1.9em;
}

h3 {
  font-size: 1.65em;
}

h4 {
  font-size: 1.4em;
}

h5 {
  font-size: 1.25em;
}

h6 {
  font-size: 1.1em;
}

/* padding sizes */

.pad-mini {
  padding: 0.125em;
}

.pad-tiny {
  padding: 0.25em;
}

.pad-small {
  padding: 0.5em;
}

.pad-large {
  padding: 1em;
}

.pad-big {
  padding: 1.5em;
}

.pad-huge {
  padding: 1.75em;
}

.pad-massive {
  padding: 2em;
}

.client-logo {
  background: url(data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvbG9nby44Mjk4ZWEzYy40NTJlNGY1Yi1hMWQyLTQyODItOTY1Mi1hMTM1OTE1M2RmZjkucG5nIjs=) left center no-repeat;
}

.print-container .client-print-logo {
  background: url(data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvbG9nby44Mjk4ZWEzYy40NTJlNGY1Yi1hMWQyLTQyODItOTY1Mi1hMTM1OTE1M2RmZjkucG5nIjs=) left center no-repeat;
}

/* ----------------------  IMPORTANT!!! PLEASE NOTE!!!  ------------------------

Any edits to this file MUST be replicated to src/assets/css/default.css except
where noted.

------------------------------------------------------------------------------*/

:root {
  /*
    Include only default brand colors 
  */

  --brand-b:#0055D5;
  --brand-b-90:#1965D9;
  --brand-b-80:#3377DD;
  --brand-b-70:#4C87E1;
  --brand-b-60:#6699E6;
  --brand-b-50:#7FA9EA;
  --brand-b-40:#99BBEE;
  --brand-b-30:#B2CBF2;
  --brand-b-20:#CCDDF7;
  --brand-b-10:#E5EDFB;

  --brand-d:#0E6BA1;
  --brand-d-90:#267aaa;
  --brand-d-80:#3e89b4;
  --brand-d-70:#5697bd;
  --brand-d-60:#6ea6c7;
  --brand-d-50:#87b5d0;
  --brand-d-40:#9fc4d9;
  --brand-d-30:#b7d3e3;
  --brand-d-20:#cfe1ec;
  --brand-d-10:#e7f0f6;

  /*** AG-GRID Overide ***/
  --ag-data-font-size: 14px;
  --ag-cell-font-family: 'Roboto', sans-serif;

}

.client-logo {
  background: url(data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvbG9nby44Mjk4ZWEzYy40NTJlNGY1Yi1hMWQyLTQyODItOTY1Mi1hMTM1OTE1M2RmZjkucG5nIjs=) left center no-repeat;
}

.print-container .client-print-logo {
  background: url(data:image/png;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvbG9nby44Mjk4ZWEzYy40NTJlNGY1Yi1hMWQyLTQyODItOTY1Mi1hMTM1OTE1M2RmZjkucG5nIjs=) left center no-repeat;
}
@font-face {
  font-family: roboto;
  src: url(/fonts/Roboto-Regular.03523cf5.452e4f5b-a1d2-4282-9652-a1359153dff9.ttf);
}
@font-face {
  font-family: roboto-thin;
  src: url(/fonts/Roboto-Thin.c38fab23.452e4f5b-a1d2-4282-9652-a1359153dff9.ttf);
}
@font-face {
  font-family: roboto-bold;
  src: url(/fonts/Roboto-Bold.4f39c579.452e4f5b-a1d2-4282-9652-a1359153dff9.ttf);
}
@font-face {
  font-family: openSans;
  src: url(/fonts/open_sans_regular.17e98b9e.452e4f5b-a1d2-4282-9652-a1359153dff9.ttf);
}
@font-face {
  font-family: roboto-medium;
  src: url(/fonts/Roboto-Medium.13a29228.452e4f5b-a1d2-4282-9652-a1359153dff9.ttf);
}
::-webkit-scrollbar {
  -webkit-appearance: scrollbar;
  height: 7px;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}

html,
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "roboto", Helvetica, Verdana, sans-serif;
  font-size: 14px;
  background-color: var(--white-sys);
}
body b, body strong {
  font-family: roboto-medium, sans-serif;
  font-weight: 500;
}

div {
  box-sizing: border-box;
}

#app {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
}

a,
a:not([href]):not([tabindex]) {
  color: var(--brand-b);
}
a:hover,
a:not([href]):not([tabindex]):hover {
  color: var(--brand-b);
  text-decoration: underline;
}

/*we are reducing 3 px from each direction from original measurement to avoid horizontal scroll bar*/
.row {
  margin-right: -12px;
  margin-left: -12px;
}

.stepper-wrapper .progressbar .los-tooltip {
  top: 0em !important;
  left: 0em !important;
}

.admin-link-navbar-modal .footer {
  border-top: 1px solid var(--dark-sys-b-20);
}
.admin-link-navbar-modal .footer button {
  margin-top: 0.4em;
  float: left;
}

.admin-notification-content-settings .modal-dialog,
.admin-notification-content-settings .modal-lg,
.admin-notification-content-settings .modal-dialog-centered {
  width: 87% !important;
}
.admin-notification-content-settings .form-control {
  color: var(--dark-sys-b) !important;
}
.admin-notification-content-settings .form-group label,
.admin-notification-content-settings .los-form-label {
  color: var(--dark-sys-b-60) !important;
}
.admin-notification-content-settings .form-label > .denote-required-field {
  color: var(--dark-sys-b-60) !important;
}
.admin-notification-content-settings .notification-content-form {
  padding-top: 1em;
}
.admin-notification-content-settings .row {
  padding: 0 !important;
  border-bottom: 1px solid var(--dark-sys-b-20);
}
.admin-notification-content-settings .bottom-row {
  border-bottom-width: 0px !important;
}
.admin-notification-content-settings .container {
  max-width: none !important;
}
.admin-notification-content-settings .controls {
  border-top: none !important;
  padding: 0 !important;
  margin-top: 0 !important;
}
.admin-notification-content-settings .modal-body {
  padding: 0 !important;
}
.admin-notification-content-settings .modal-body.col {
  padding: 0 !important;
}
.admin-notification-content-settings .admin_notification_settings .cancel {
  display: flex;
  justify-content: flex-start;
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
}
.admin-notification-content-settings .admin_notification_settings.los-modal-context .modal-body .content {
  border-top: none !important;
  height: calc(100% - 50px);
  overflow-x: hidden;
  overflow-y: auto;
  padding-top: 1em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.no-grid {
  padding-left: 1em;
  padding-right: 1em;
  height: 100%;
}

.ag-theme-balham {
  font-family: "Roboto", Helvetica, Verdana, sans-serif;
}

.ag-theme-balham .ag-header {
  font-family: inherit;
}

.ag-theme-balham .ag-status-bar {
  border: none;
}

.content-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  overflow-y: auto;
  justify-content: space-between;
  border-top: 1px solid var(--dark-sys-b-5);
  background-color: var(--dark-sys-b-5);
}

.main-content {
  padding: 0em 2em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  overflow: auto !important;
  height: 100%;
  background-color: var(--dark-sys-b-5);
}
.main-content.flex-layout {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main-content .router {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.main-content .router > [role=group] {
  height: 100%;
}

.los-ui-avatar {
  text-align: center;
  background-color: var(--blue-sys-b);
  color: var(--white-sys);
  font-size: 1.5em;
  width: 2.75em;
  height: 2.75em;
  border-radius: 50%;
  margin-left: 0.5em;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  text-transform: uppercase;
}

.avatar-border-notf {
  border: 5px solid var(--blue-sys-b);
}

.avatar-border-no-notf {
  border: 5px solid var(--white-sys);
}

.x-large {
  font-size: x-large;
}

.page-title {
  margin: 0.5em 0;
}

.page-icon {
  height: 10em;
  margin-bottom: 1em;
  position: relative;
}
.page-icon svg {
  color: var(--brand-b);
  width: 100% !important;
  height: 100% !important;
}

.page-title.pad::before {
  display: block;
  content: " ";
  margin-top: -1.25em;
  height: 1.25em;
  visibility: hidden;
  pointer-events: none;
}

.row {
  padding-top: 0.1em;
  padding-bottom: 0.1em;
}

.los-footer {
  height: 2em;
  flex-shrink: 0;
  padding: 0 1em;
  background: var(--dark-sys-b);
  color: var(--white-sys);
  position: relative;
  display: flex;
  align-items: center;
}
.los-footer a.help-documents {
  color: var(--white-sys) !important;
  text-decoration: underline;
}
.los-footer.collapsed {
  height: 0;
  opacity: 0;
  overflow: hidden;
}
.los-footer sup {
  top: -0.2em;
}
.los-footer .support {
  cursor: pointer;
  text-decoration: underline;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

textarea.policy-description {
  width: 100%;
  height: calc(95vh - 300px);
  border-color: transparent;
  resize: none;
  border-width: 0;
  outline: none;
}
textarea.policy-description:focus, textarea.policy-description:focus-visible {
  border-color: transparent;
  border-width: 0;
}

.arrow-expand-collapse {
  display: inline-block;
  transform: rotate(0deg);
  transform-origin: center center;
  transition: transform 0.25s ease-in;
  color: var(--dark-sys-b);
  padding: 0;
  width: 0.5em;
  height: 0.5em;
  background: url(data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvcmlnaHQtYXJyb3ctc3ZncmVwby1jb20uYTBmODEzNjUuNDUyZTRmNWItYTFkMi00MjgyLTk2NTItYTEzNTkxNTNkZmY5LnN2ZyI7) center center no-repeat;
}

.arrow-expand-collapse.expanded {
  transform: rotate(90deg);
  transition: transform 0.25s ease-in;
}

.dual-list-arrow {
  font-size: 1em;
  color: var(--blue-sys-d-20);
  margin-left: 0.8em;
  vertical-align: middle;
}

.los-general-list .list-item {
  padding: 0.5em 0.5em;
  border-bottom: 1px solid var(--dark-sys-b-10);
}

.los-general-list .list-item:focus {
  outline: none;
  border: none;
  box-shadow: inset 0 0 0 2px var(--blue-sys-b-40);
}

/* Pulse animation: http://www.tipue.com/blog/css-pulse-buttons/ */
@keyframes shadow-pulse {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 30px transparent;
  }
}
@keyframes shadow-pulse-big {
  0% {
    box-shadow: 0 0 0 0px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 0 0 70px transparent;
  }
}
.form-control.calender {
  background: url(data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvY2FsZW5kZXIuNmVhN2MxM2QuNDUyZTRmNWItYTFkMi00MjgyLTk2NTItYTEzNTkxNTNkZmY5LnN2ZyI7) no-repeat calc(100% - 4px) center/26px 26px;
  padding-right: 35px;
  cursor: pointer;
}

.dropdown-item.active {
  background-color: var(--brand-b);
}

.required {
  color: var(--red-sys-d);
}

.form-group {
  position: relative;
  margin-bottom: 1.4em;
}
.form-group.error .form-control,
.form-group.error .los-select .dropdown-toggle {
  border: 1px solid var(--red-sys-b) !important;
}
.form-group .rbt-aux {
  z-index: 0;
}
.form-group .form-error {
  font-size: smaller;
  position: absolute;
  left: 0;
  bottom: -1.65em;
  color: var(--red-sys-b);
  font-size: 12px;
}
.form-group .form-error.date {
  bottom: -2.3em;
  line-height: 12px;
}
.form-group .form-error.mi {
  width: calc(100% + 3em);
}
.form-group .no-label,
.form-group .no-label-but-required {
  display: flex;
  align-items: center;
}
.form-group .no-label-but-required .denote-required-field {
  display: inline-block;
  width: 0.75em;
  top: 0.15em;
  left: 0;
}
.form-group .no-label-but-required ~ .form-error {
  margin-left: 1em;
}
.form-group .aligner {
  display: inline-block;
  width: 0;
  overflow: hidden;
}

.edit-user .form-error.date {
  width: 18em;
}

.form-group label,
.los-form-label {
  margin-bottom: 0.1em;
}

.los-layout-content-controls {
  display: flex;
  flex-direction: column;
}
.los-layout-content-controls .content {
  flex: 1 0 0;
}
.los-layout-content-controls .content h5 {
  color: var(--brand-b);
}
.los-layout-content-controls .controls {
  margin-top: 1em;
  display: flex;
  justify-content: flex-end;
  position: relative;
}
.los-layout-content-controls .controls > * {
  margin: 0 0.5em;
}
.los-layout-content-controls .controls .page-jump {
  position: absolute;
  right: 0;
  top: 0.25em;
}
.los-layout-content-controls .controls .page-jump .btn {
  background-color: transparent !important;
  border-color: var(--dark-sys-b-20) !important;
  color: var(--brand-b);
  font-weight: bold;
}
.los-layout-content-controls .controls .page-jump .btn.active {
  border-color: var(--brand-b) !important;
  background-color: var(--brand-b) !important;
  color: var(--white-sys);
}
.los-layout-content-controls .controls .page-jump .btn:not(.active):hover {
  background-color: var(--blue-sys-b-30) !important;
}

.privacy-policy {
  cursor: pointer;
  text-decoration: underline;
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.help-documents {
  margin-left: 0.25em;
  margin-right: 0.25em;
}

.los-quick-select {
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  margin: 0 auto;
}

.los-spread .los-quick-select {
  justify-content: flex-start;
}

.los-centered-title-with-bar {
  display: flex;
  align-items: center;
  margin: 1em 0;
}
.los-centered-title-with-bar span {
  font-size: 1.1em;
  margin: 0 0.5em;
}
.los-centered-title-with-bar:before, .los-centered-title-with-bar:after {
  content: " ";
  display: inline-block;
  flex: 1 0 0;
  border-bottom: 1px solid var(--dark-sys-b-20);
}

.los-circle {
  padding: 0.7em 1.1em 0.6em;
  border-radius: 50%;
  text-align: center;
  color: var(--dark-sys-b);
  background-color: var(--dark-sys-b-10);
  font-weight: bold;
}

.user-menu {
  position: absolute;
  top: 0;
  right: 7em;
}

[class^=confirm-] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
[class^=confirm-] .page-icon {
  width: 10em;
  height: 10em;
}
[class^=confirm-] .page-icon svg {
  color: var(--brand-b);
  width: 100%;
  height: 100% !important;
}

.confirmation-msg {
  font-size: larger;
  font-weight: bold;
}

.chart-type-container span.orgchart-icon {
  content: url(data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvb3JnY2hhcnQuODBhYjlhNGQuNDUyZTRmNWItYTFkMi00MjgyLTk2NTItYTEzNTkxNTNkZmY5LnN2ZyI7);
  width: 20px;
  margin-top: 6px;
}

.chart-type-container span.datatable-icon {
  content: url(data:image/svg+xml;base64,ZXhwb3J0IGRlZmF1bHQgIi9hc3NldHMvdGFibGUuZjBhZTMwOGMuNDUyZTRmNWItYTFkMi00MjgyLTk2NTItYTEzNTkxNTNkZmY5LnN2ZyI7);
  width: 20px;
  margin-top: 6px;
}

.chart-type-container button {
  border: 1px solid var(--white-sys);
}

button:focus {
  outline: none !important;
}

/* headers */
h1 {
  /*** 28px ***/
  font-size: 2em;
}

h2 {
  /*** 24px ***/
  font-size: 1.714em;
  color: var(--brand-b);
}

h3 {
  /*** 20px ***/
  font-size: 1.428em;
  color: var(--grey-sys);
}

h4 {
  /*** 18px ***/
  font-size: 1.285em;
  color: var(--dark-sys-b);
}

h5 {
  /*** 16px ***/
  font-size: 1.142em;
  color: var(--dark-sys-d-40);
}

h1, h2, h3, h4, h5 {
  font-weight: 500;
}

/**added for box container**/
.information-area {
  /*Task use this variable later: var(--dark-sys-b-10)*/
  background-color: var(--blue-sys-b-10);
  padding: 10px 10px;
  margin-bottom: 20px;
}
.information-area .header {
  margin: 5px 0px;
  height: 2.25em;
}
.information-area .header-content-wrapper {
  line-height: 2.5em;
}
.information-area .header-content-wrapper,
.information-area .header-img,
.information-area .header-title {
  float: left;
}
.information-area .header-title {
  font-size: large;
}
.information-area .content {
  margin: 10px 0px;
}
.information-area .button-wrapper {
  float: right;
}

.thead-list-value {
  margin-bottom: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.thead-unique-value {
  font-size: 11px;
  line-height: 16px;
  margin: 0;
  padding: 0;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/**added for box container**/
.flex-txt-align-center {
  display: flex;
  flex-direction: row;
  align-items: center;
}

/** Added for google map override don't delete **/
.pac-container {
  z-index: 1050;
}

.los-footer:not(:root:root) {
  flex-shrink: 0;
  padding: 0 1em;
  background: var(--dark-sys-b);
  color: var(--white-sys);
  display: flex;
  align-items: center;
  bottom: 0;
  width: 100%;
  z-index: 10000;
}

.unlock-user-wrapper .highlights .toggle-highlights-button-container .toggle-highlights-button {
  width: 15em;
}

.unlock-user-wrapper .highlights .toggle-highlights-button-container {
  top: calc(40% - 3em);
}

.unlock-user-wrapper .highlights .toggle-highlights-button:focus {
  box-shadow: 0 0 0 0.2rem var(--brand-b) !important;
}

.unlock-user-wrapper .highlights {
  height: 28em;
}
.unlock-user-wrapper .highlights .module-no-title {
  padding: 0;
}
.unlock-user-wrapper .highlights .admin-unlock-grid {
  padding: 0;
}

.unlock-user-wrapper .highlights.expanded {
  width: 70em;
  height: 28em;
}
.unlock-user-wrapper .highlights.expanded .unlock-user-container {
  padding: 12.5px 10px;
}
.unlock-user-wrapper .highlights.expanded .unlock-user-container .admin-unlock-grid {
  height: 370px !important;
}
.unlock-user-wrapper .highlights.expanded .unlock-user-loader-center {
  position: absolute;
}
.unlock-user-wrapper .highlights.expanded .custom-no-rows {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  top: 0px;
  left: 0px;
}
.unlock-user-wrapper .highlights.expanded .custom-no-rows button {
  position: absolute;
  top: 45%;
  left: 45%;
}

.los-tooltip {
  top: 0.25em;
  left: 0.3em;
  z-index: 15;
}

.input-form.container .los-tooltip {
  right: 1em;
  left: inherit;
}

.width-5 {
  width: 5%;
}

.width-10 {
  width: 10%;
}

.width-20 {
  width: 20%;
}

.width-25 {
  width: 25%;
}

.width-30 {
  width: 30%;
}

.width-100 {
  width: 100%;
}

.quick-links-item {
  cursor: pointer;
}

.quick-links-bar-partition {
  padding: 0 0.3em;
  color: var(--black-sys);
}

.inline-text-input {
  align-items: center;
}
.inline-text-input label {
  margin: 0;
}
.inline-text-input label::after {
  content: " |";
}
.inline-text-input .inline-text-input-icon {
  color: var(--grey-sys);
  margin-left: 0.5em;
  cursor: pointer;
}
.inline-text-input .form-group {
  margin-bottom: 0;
  margin-left: 0.3em;
  width: 10em;
}
.inline-text-input .form-group input {
  font-size: inherit;
}
.inline-text-input .form-group .form-control {
  height: 50%;
}
.inline-text-input .form-group .form-error {
  width: 25em;
}
.inline-text-input .plain-text-view {
  color: var(--brand-b);
  margin-left: 0.3em;
}

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

.mb-dot-5 {
  margin-bottom: 0.5em;
}

.los-hdr-nav.collapsed {
  opacity: 0;
  height: 0;
  overflow: hidden;
  margin: 0;
}
.los-hdr-nav:not(.collapsed) {
  overflow: none;
  opacity: 1;
  transition: opacity 0.4s;
}

/**TO DO: we have to remove after filemanager MF released**/
.los-modal .modal-header .close {
  background-color: var(--white-sys) !important;
}

.popup-menu-popover.popover {
  z-index: 99999;
}

.popup-menu-popover[data-popper-reference-hidden=true] {
  display: none;
}

.notification-content-form {
  border-right: 1px solid var(--dark-sys-b-20);
}

.notification-content-settings-preview-mode {
  height: 100%;
  width: 100%;
  padding-top: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.notification-content-settings-preview-mode-none {
  display: none;
}

.notification-content-settings-wrapper {
  padding: 1.5em;
  background-color: var(--grey-sys-spread-20);
}

.notification-content-settings-mainContent {
  height: 163px;
  width: 100%;
  background-color: var(--white-sys);
}

.notification-content-settings-logo {
  height: 38px;
  width: 22%;
  margin: auto;
  margin-top: 1.25em;
  margin-bottom: 1.25em;
  background-color: var(--white-sys);
}

.notification-content-settings-trademark {
  width: 100%;
  text-align: center;
  color: var(--dark-sys-b);
  font-weight: bold;
}

.notification-content-settings-address {
  width: 100%;
  text-align: center;
  color: var(--blue-sys-b);
  margin-top: 0.875em;
}

.notification-content-settings-description {
  width: 100%;
  text-align: center;
  color: var(--dark-sys-b-50);
  margin-top: 0.875em;
}

.flex-1 {
  flex: 1;
}

.flex-x {
  display: flex;
}

.error-boundary-modal .cancel-btn {
  display: none;
}

.tox .tox-toolbar__group {
  padding: 0 4px 0 4px !important;
}

.tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type) {
  border-right: 1px solid #ccc !important;
}

.tox .tox-tbtn--select, .tox .tox-split-button, .tox .tox-tbtn {
  margin: 2px 0 3px 0 !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
  padding: 0 !important;
}

.tox-notification {
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 0 !important;
  margin: 0 !important;
}

.ag-body-viewport {
  border-right: 0 !important;
}
@media only screen and (min-width: 1920px) {
  .main-content {
    width: 1920px;
    margin: 0 auto;
  }

  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1920px;
  }

  .login-form .container {
    max-width: 1200px;
  }

  .loan-pipeline-body .fixed-footer, .loan-pipeline-body .detailed-footer-wrapper {
    width: 1920px;
  }
}
@media only screen and (max-width: 1920px) {
  .container, .container-lg, .container-md, .container-sm, .container-xl {
    max-width: 1920px;
  }

  .login-form .container {
    max-width: 1200px;
  }
}