/*region @font-face */
@font-face {
  font-family: "Roboto";
  src:
    local("Roboto"),
    local("Roboto-Regular"),
    /* from https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxM.woff */
      url("/assets/ctx/942129af/layout/fonts/roboto.woff") format("woff"),
    url("/assets/ctx/1e3a70fd/layout/fonts/roboto.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-weight: 500;

  src:
    local(Roboto Medium),
    /* from https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc4.woff2 */
      url("/assets/ctx/zaaf802ac/layout/fonts/Roboto_500.woff2") format("woff2"),
    /* from https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc-.woff */
      url("/assets/ctx/f3c59c13/layout/fonts/Roboto_500.woff") format("woff"),
    /* from https://fonts.gstatic.com/s/roboto/v29/KFOlCnqEu92Fr1MmEU9fBBc9.ttf */
      url("/assets/ctx/d5d638d1/layout/fonts/Roboto_500.ttf") format("truetype");
}

@font-face {
  font-family: "Roboto";
  font-weight: bold;
  src:
    local("Roboto Bold"),
    local("Roboto-Bold"),
    /* from https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc-.woff */
      url("/assets/ctx/b0cc24de/layout/fonts/roboto-bold.woff") format("woff"),
    url("/assets/ctx/797a5830/layout/fonts/roboto-bold.ttf") format("truetype");
}

/* Woff 2 and woff were converted from .ttf */
/* https://fonts.google.com/specimen/Jost */
@font-face {
  font-family: "Jost";
  src:
    local("Jost Regular"),
    local("Jost-Regular"),
    url("/assets/ctx/zc3b2f1/layout/fonts/Jost-VariableFont_wght.woff2") format("woff2"),
    url("/assets/ctx/55fc893/layout/fonts/Jost-VariableFont_wght.woff") format("woff"),
    url("/assets/ctx/45c16f05/layout/fonts/Jost-VariableFont_wght.ttf") format("truetype");
}

/* May be unused, but just incase don't want to remove it */
@font-face {
  font-family: "Jost";
  font-style: italic;
  src:
    local("Jost Italic"),
    local("Jost-Italic"),
    url("/assets/ctx/zfe69980c/layout/fonts/jost-v6-latin-italic.woff2") format("woff2"),
    url("/assets/ctx/8dc5f290/layout/fonts/jost-v6-latin-italic.woff") format("woff"),
    url("/assets/ctx/47b75dd8/layout/fonts/jost-v6-latin-italic.ttf") format("truetype");
}

/*endregion*/

:root {
  --col-dark-blue: #638599;
  --col-light-white: #ddd;
  --col-white: #ffffff;

  /* From bootstrap */
  --led-font-family: Roboto, var(--bs-font-sans-serif);

  /* box shadow settings */
  --led-shadow-amt-hover: 3px 3px 15px;
  --led-shadow-color-blue: rgba(32, 63, 140, 0.3);
  --led-shadow-color-cyan: rgba(52, 162, 148, 0.3);
  --led-shadow-color-green: rgba(23, 150, 50, 0.3);
  --led-shadow-color-orange: rgba(170, 103, 36, 0.3);
  --comp-card-shadow-color: rgba(91, 107, 117, 30%);

  --col-checkbox-bg: #dcdcdc;

  /* button colors */
  --col-classic-button-blue: #5199c9;
  --col-button-disabled: #bababa;
  --col-filter-icon-gray: #757575;

  --col-bright-blue: #689ed6;
  --col-bright-blue-hover: #518bb7;
  --col-bright-blue-focus: #77abdb;

  --col-bright-cyan: #2bb4a2;
  --col-bright-cyan-hover: #239e86;
  --col-bright-cyan-focus: #53c1ac;

  --col-bright-green: #46bb72;
  --col-bright-green-hover: #37aa5d;
  --col-bright-green-focus: #5acc80;

  --col-bright-orange: #d89948;
  --col-bright-orange-hover: #ce883c;
  --col-bright-orange-focus: #e2a561;

  --col-delete: #f39242;
  --col-bg-light-blue: #eff3f4;
  --col-text-gray: #4a4e51;

  /* table colors */
  --col-table-header-bg: #cddee4;
  --col-table-border-color: #e8e8e8;

  --table-td-padding: 0.75rem;
  --form-control-padding: 5px;
  --form-control-maxwidth: unset;

  --comp-heading-color: #73a8bc;

  /* should be same value as ---bs-body-line-height to set icons same height as text */
  --icon-line-height: 1.5em;

  --tooltip-red: firebrick;
  --tooltip-orange: #ed7615;
  --tooltip-black: black;

  --autocompleteInputPadding: 10px 5px;
  --autocompleteLineHeight: 1.5rem;
}

/* General Theme - START */
/*************************************************/
/*region Tag Styles */

html {
  height: 100%;
  -ms-overflow-style: scrollbar;
  font-size: 12px;
}

body {
  padding: 0;
  font-family: var(--led-font-family);
  color: black;
  letter-spacing: 0.01em;
}

/* Plan is to remove styles from h1, h2, h3 and h4 tags. This can be done when every h1 tag has the class head-1 etc */

h1,
.head-1 {
  font-size: 18px;
  color: #455a64;
  padding: 10px 0 3px 0;
  width: 100%;
  box-sizing: border-box;
  font-weight: bold;
}

h2,
.head-2 {
  font-size: 1.7em;
  color: #4798c4;
  font-weight: normal;
}

h3,
.head-3 {
  font-size: 18px;
  color: #455a64;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 10px;
}

h4,
.head-4 {
  font-size: 1.3em;
  font-weight: normal;
  color: #4798c4;
  margin: 5px 0 5px 0;
  padding: 5px 5px 5px 30px;
  border-bottom: 2px dotted #ccc;
  border-top: 2px dotted #ddd;
  background: #f9f9f9;
  text-shadow: 2px 1px 1px #fff;
}

a,
img,
form {
  padding: 0;
  margin: 0;
}

a,
.button-link {
  color: #3681a9;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s;
}

a:focus {
  text-decoration: none;
}

a:hover,
.button-link:hover {
  text-decoration: underline;
  color: #245773;
}

a:not([href]):not([class]) {
  color: #3681a9;
}

a:not([href]):not([class]):hover {
  text-decoration: underline;
  color: #245773;
}

a:not([href]):not([class]):focus {
  text-decoration: none;
  color: #245773;
}

td > label,
label > label,
h3 > label {
  margin-bottom: 0;
  display: inline;
}

.unreadLink {
  color: #fff;
  display: inline-block;
  padding: 5px;
}

.btn-img {
  appearance: none;
  border: none;
  background: none;
}

.button-link:focus,
.btn-img:focus {
  box-shadow: none;
}

img {
  -ms-interpolation-mode: bicubic;
  border: 0 none;
}

table {
  padding: 0;
  margin: 0;
  border: 0 none;
}

/* bootstrap default override - can be replaced with bootstrap .caption-top */
table caption {
  caption-side: top;
}

/*region input*/
input,
select,
textarea {
  border: 1px solid #c8c8c8;
  color: #222;
}

input[type="password"]:focus {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  outline: none;
}

input[type="text"]:focus,
select:focus,
.form-select:focus,
textarea:focus,
input[type="text"]:hover,
select:hover,
textarea:hover {
  color: #111;
  outline: none;
  border-bottom: 1px solid orange;
}

.input-required-left:before {
  content: url("/assets/ctx/6fed3530/layout/images/bck-required.png");
  position: absolute;
  margin-left: -12px;
}

/*region .input-no-border */
.input-no-border {
  border-top: none;
  border-right: none;
  border-left: none;
  background: transparent;
}
.input-no-border:disabled,
.input-no-border[type="text"]:disabled {
  background: transparent;
}
.input-no-border:disabled,
.input-no-border:disabled:hover {
  border-bottom: none;
}
/*endregion*/
/*endregion*/

select,
select.form-control,
.form-select {
  background: #fff url("/assets/ctx/f45c413e/layout/images/dropdown-arrow.png") right 3px top 50% / 8px no-repeat;
  padding-right: 16px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

select:focus {
  border-bottom: 1px solid orange;
}

select option {
  background-color: #fff;
}

select option:nth-child(even) {
  background-color: #f9f9f9;
}

optgroup {
  font-weight: bold;
  font-style: normal;
  color: #555;
}

option {
  color: #000;
  font-weight: normal;
}

/* Deprecated. Too specific and broad at the same time. */
input[type="text"]:disabled,
select:disabled,
textarea:disabled {
  background-color: #efefef;
}

/* This removes the padding inside the button in FF, so that IE and FF buttons show alike*/
button::-moz-focus-inner,
input[type="reset"]::-moz-focus-inner,
input[type="button"]::-moz-focus-inner,
input[type="submit"]::-moz-focus-inner,
input[type="file"] > input[type="button"]::-moz-focus-inner {
  padding: 0;
  border: none;
}

iframe {
  overflow: hidden;
  width: 100%;
}
/*endregion*/

/*region typography */
.h2_jost {
  font-family: Jost, var(--led-font-family);
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 500;
  line-height: 1.2;
  color: #6a7075;
}

.header-color {
  color: #455a64;
}

.large-heading {
  display: block;
  background-color: #e5ebec;
  font-size: 14px;
  padding: 10px;
  color: #333;
}

.large-heading:hover {
  background-color: #efefef;
  text-decoration: none;
  color: #4798c4;
}
/*endregion*/

/*region form and form input styles */
/*region .form-control */
.t-form-control {
  color: #222;
  width: 102px;
  padding: 5px;
}

.form-control {
  box-shadow: initial;
  display: initial;
  height: initial;

  color: #222;
  width: 102px;
  padding: var(--form-control-padding);
  border-radius: 0;
}

.form-select {
  width: 100%;
}

/* gives label identical height with js rendered inputs  */
.form-control-label-left {
  padding-top: var(--form-control-padding);
  padding-bottom: var(--form-control-padding);
  border: 1px solid transparent;
}

@media screen and (min-width: 576px) and (max-width: 992px) {
  .form-control-label-left {
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
  }
}

.form-control:focus {
  box-shadow: initial;
  border-color: #c8c8c8;
  border-bottom-color: orange;
}
/*endregion*/

.led-input {
  width: 100%;
}

.led-input-label {
  font-size: 18px;
  margin-bottom: 0.3rem;
}

::placeholder,
.form-control::placeholder {
  color: #777;
}

.legend {
  font-size: 16px;
  color: #4798c4;
}

.currency,
.percentage {
  width: 75px;
  text-align: right;
}

.small-currency {
  text-align: right;
}

/*region form checkboxes */

/*region general checkbox rules */
.partner-data input[type="checkbox"] ~ label span,
.list-table thead input[type="checkbox"] ~ label span,
.large-heading input[type="checkbox"] ~ label span,
.detail-rows-table thead input[type="checkbox"] ~ label span {
  background-color: #fff;
}

/* deprecated */
input[type="checkbox"],
input[type="radio"].led-checkbox,
    /* recommended
       I use a dash there to allow easier global search. */
.check-box {
  display: none;
}
input[type="checkbox"].labelBold:checked ~ label {
  font-weight: bold;
}

.check-box__label {
  /* A filter checkbox in a h1, h2, h3, h4, h5 element has its font-size and font-weight increased. */
  font-size: 1rem;
  font-weight: normal;
}

.check-box__label-large {
  font-size: 1.25rem;
}

/* deprecated */
input[type="checkbox"] ~ label span,
input[type="radio"].led-checkbox ~ label span,
    /* recommended */
.check-box__label:before {
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  background-color: var(--col-checkbox-bg);
  cursor: pointer;
  transition: all 0.3s;
  background-position: 50% 50%;
  background-size: 12px;
}
.check-box__label-large:before {
  width: 24px;
  height: 24px;
  background-size: 16px;
}

/* deprecated */
input[type="checkbox"]:disabled ~ label span,
    /* recommended */
.check-box:disabled + .check-box__label:before {
  background-color: hsl(0, 0%, 98%);
  cursor: default;
}

/* newer design */
.check-box:disabled + .check-box__label:before {
  border: thin solid #dcdcdc;
}

/* deprecated */
input[type="checkbox"]:checked ~ label span,
div.amounts-table-container input[type="checkbox"]:checked ~ label span,
table.list-table thead input[type="checkbox"]:checked ~ label span,
a.large-heading input[type="checkbox"]:checked ~ label span,
table.detail-rows-table thead input[type="checkbox"]:checked ~ label span,
input[type="radio"].led-checkbox:checked ~ label span,
    /* recommended */
.check-box:checked + .check-box__label:before {
  background: hsl(144, 42%, 50%) url("/assets/ctx/83b0ae37/layout/images/ico-ok-white.png") 50% 50% no-repeat;
  background-size: 12px;
}
.check-box:checked + .check-box__label-large:before {
  background-size: 16px;
}

input[type="checkbox"]:checked:disabled ~ label span {
  background-color: hsl(144, 42%, 80%);
}
/*endregion*/

/*region .large-checkbox */
input.large-checkbox[type="checkbox"] ~ label {
  font-size: 14px;
  color: #555;
}
input.large-checkbox[type="checkbox"] ~ label span {
  width: 24px;
  height: 24px;
  margin: -1px 4px 0 0;
  vertical-align: middle;
  background-color: #fff;
  border: 1px solid #ddd;
}

input.large-checkbox.bit-smaller[type="checkbox"] ~ label span {
  width: 20px;
  height: 20px;
}

input.large-checkbox[type="checkbox"]:checked ~ label span {
  background: #fff url("/assets/ctx/7d67278c/layout/images/ico-checked.png") 50% 50% no-repeat;
  background-size: 16px;
}
/*endregion*/

/*region .showMore*/
.showMore[type="checkbox"] ~ label {
  font-size: 14px;
  line-height: 25px;
  display: inline;
}

.showMore[type="checkbox"] ~ label span,
span.showMoreLink {
  width: 10px;
  height: 10px;
  background: #fff url("/assets/ctx/1b67db82/layout/images/ico-sort-ascending.png") 50% 50% no-repeat;
  background-size: 100%;
}

.showMore[type="checkbox"]:checked ~ label span,
span.showLessLink {
  background: #fff url("/assets/ctx/60e4d3e8/layout/images/ico-sort-descending.png") 50% 50% no-repeat;
  background-size: 100%;
}
/*endregion*/

/*region .flippedCheckbox */
.flippedCheckbox[type="checkbox"] {
  transition: all 1s;
}

.flippedCheckbox[type="checkbox"] ~ label {
  color: #aaa;
}

.flippedCheckbox[type="checkbox"] ~ label span {
  width: 25px;
  height: 16px;
  vertical-align: middle;
  border: 1px solid #90a4ae;
  border-radius: 8px;
  position: relative;
  background: #eeeeee none;
  transition: all 0.2s;
}

.flippedCheckbox[type="checkbox"]:checked ~ label span {
  background: #eeeeee none;
}

.flippedCheckbox[type="checkbox"] ~ label span dot {
  background: none;
  display: inline-block;
  position: absolute;
  height: 12px;
  width: 12px;
  top: 1px;
  left: 1px;
  background-color: #607d8b;
  border-radius: 50%;
  transition: left 0.1s;
}
.flippedCheckbox[type="checkbox"] ~ label > first {
  padding-right: 5px;
}

.flippedCheckbox[type="checkbox"]:checked ~ label span dot {
  left: 10px;
}
.flippedCheckbox[type="checkbox"]:not(:checked) ~ label > first {
  color: #555;
}
.flippedCheckbox[type="checkbox"]:checked ~ label > second {
  color: #555;
}

.flippedCheckboxLarge[type="checkbox"] ~ label span {
  width: 48px;
  height: 25px;
  border: none;
  background-color: #b3c5cd;
  border-radius: 12px;
  transition: background-color 0.1s;
}
.flippedCheckboxLarge[type="checkbox"]:checked ~ label span {
  background: #94c262 none;
}

.flippedCheckboxLarge[type="checkbox"] ~ label span dot {
  height: 21px;
  width: 21px;
  top: 2px;
  left: 2px;
  background-color: #d4dee3;
}

.flippedCheckboxLarge[type="checkbox"]:checked ~ label span dot {
  left: 25px;
  background-color: hsl(88.6, 44.2%, 90%);
}

.flipped-checkboxes .chosenOption {
  color: #5199c9;
  font-weight: bold;
}

.flipped-checkboxes span,
.flipped-checkboxes a {
  display: inline-block;
  text-decoration: none;
  width: auto;
  padding: 0;
  margin: 0;
  color: #999;
}

.flipped-checkboxes a .flipper {
  width: 48px;
  height: 25px;
  vertical-align: middle;
  border-radius: 12px;
  background: none;
  background-color: #b3c5cd;
  border: none;
  position: relative;
  padding: 0;
  margin: 0;
}

.flipped-checkboxes a .flipper .dot {
  background: none;
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  height: 21px;
  width: 21px;
  top: 2px;
  left: 2px;
  background-color: #d4dee3;
}

.flipped-checkboxes a .flipSecond .dot {
  /* Does not use transition. */
  left: auto;
  right: 2px;
}
/*endregion*/

/*region .on-off-switch */
.on-off-switch {
  width: 36px;
  height: 18px;
  border-radius: 8px;
  background: #ddd;
  transition: all 0.2s;
  display: block;
}

.on-off-switch > * {
  display: inline-block;
  position: relative;
  height: 16px;
  width: 16px;
  top: 1px;
  left: 1px;
  background: #607d8b;
  border-radius: 50%;
  transition: all 0.1s;
}

:checked ~ .on-off-switch {
  background: hsl(88.6, 44.2%, 65%);
}

:checked ~ .on-off-switch > * {
  left: 18px;
  background: hsl(88.6, 44.2%, 90%);
}
/*endregion*/

/*region .led-checkbox */
.led-checkbox {
  display: inline-block;
  width: 15px;
  height: 15px;
  vertical-align: middle;
  background-color: #dcdcdc;
  background-repeat: no-repeat;
  cursor: pointer;
  transition: all 0.3s;
  background-position: center;
  background-size: 80%;
}
:checked ~ .led-checkbox {
  background-color: #4bb576;
  background-image: url("/assets/ctx/83b0ae37/layout/images/ico-ok-white.png");
}
.led-checkbox.is-bow {
  height: 1.5em;
  width: 1.5em;
  border: 1px solid hsl(0, 0%, 87%);
  background-color: white;
}
.is-indeterminate ~ .led-checkbox.is-bow {
  background-image: url("/assets/ctx/c1651c16/layout/images/ico-indeterminate.png");
}
:checked ~ .led-checkbox.is-bow {
  background-image: url("/assets/ctx/7d67278c/layout/images/ico-checked.png");
}
/*endregion*/

/*endregion*/

/*region form labels */
.led-label {
  display: inline-block;
  min-width: 100px;
}

.led-label.required:after {
  content: url("/assets/ctx/6fed3530/layout/images/bck-required.png");
  margin-right: 3px;
  vertical-align: top;
  float: right;
}

.shortLabel {
  display: inline-block;
  min-width: 60px;
}

@media (max-width: 576px) {
  .led-label.required:after {
    content: url("/assets/ctx/6fed3530/layout/images/bck-required.png");
    display: inline-block;
    margin-left: 3px;
    vertical-align: top;
    float: none;
  }
}

/*endregion*/

/*region form select */
.filterValue select option[value=""],
.filter .filterValue select option[value=""],
.filter select.emptySelect,
select.emptySelect,
option.emptySelect {
  color: #888;
}
/*endregion*/

.dateField.form-control {
  padding-top: 5px;
  padding-bottom: 5px;
}

/*region form radiobuttons */
.radiogroup label {
  vertical-align: top;
}
/*region .led-radio*/
.led-radio {
  display: none;
}
.led-radio-label {
  transition: all 0.2s;
  margin-bottom: 0.5rem;
}

.led-radio-label:before {
  content: "";
  height: 18px;
  width: 18px;
  display: inline-block;
  vertical-align: middle;
  background: #e5e5e5;
  border-radius: 100%;
  margin-right: 10px;
}

.led-radio:checked + .led-radio-label {
  color: var(--col-bright-green);
}

.led-radio:checked + .led-radio-label:before {
  background: transparent url("/assets/ctx/z6e3e68bc/layout/images/radio-checked.svg") center/contain no-repeat;
}

.led-radio-label--feedback {
  padding: 0;
  height: 22px;
  line-height: 22px;
  color: #555;
  padding-right: 10px;
  display: inline-block;
  min-width: 120px;
  overflow: hidden;
  text-align: left;
}

.led-radio:disabled + .led-radio-label,
.led-radio:disabled + .minifiedHelp {
  opacity: 0.4;
}

.led-radio:disabled:checked + .led-radio-label {
  filter: grayscale(100%);
  color: unset;
  opacity: unset;
}

.radiogroup-large .led-radio-label {
  margin: 0.33em 0;
  font-size: 1.16em;
}
/*endregion*/

/*region .radioMiddle*/
.radioMiddle label {
  line-height: 14px;
  vertical-align: top;
  display: inline-block;
  padding: 3px;
  min-width: 30px;
}

.radioMiddle span.option {
  background: #fff;
  border: 1px solid #efefef;
  padding: 10px;
  display: inline-block;
  margin-right: 5px;
}

.radioMiddle input:checked + label {
  font-weight: bold;
}

.radioMiddle input:disabled + label {
  color: #999;
}
/*endregion*/
/*endregion*/

/*region form - textarea */
.textarea-large {
  width: 100%;
  height: 100px;
}

textarea.description {
  overflow: hidden;
}

.resizableTextarea {
  white-space: pre-wrap;
  overflow: hidden;
}
/*endregion*/

/*region form disabled elements */

fieldset[disabled] .dateContainer,
fieldset[disabled] .dateContainer:hover,
fieldset[disabled] .dateField,
.formDisabled .disabledBold input[type="text"]:disabled,
.formDisabled .disabledBold select:disabled,
.formDisabled .disabledBold textarea:disabled,
.formDisabled .disabledBold .dateContainer.disabled,
.formDisabled .disabledBold input[type="text"]:disabled:hover,
.formDisabled .disabledBold select:disabled:hover,
.formDisabled .disabledBold textarea:disabled:hover,
.formDisabled .disabledBold .dateContainer.disabled:hover {
  background: none;
  border: none;
  color: #444;
  font-size: 13px;
  font-weight: bold;
  line-height: 1em;
  padding: 0;
}

.disabled,
.disabled:hover {
  color: #888;
}

.disab fieldset {
  border: 2px solid #f2f2f2;
  background-color: #fdfdfd;
  color: #666;
}

.disab fieldset legend {
  font-size: 14px;
  font-weight: bold;
  color: #666;
  padding: 5px;
}

.disabled-control {
  opacity: 0.25;
  background-color: #fff;
}

.disabled-control a {
  cursor: default;
}

.disabled-control a:hover {
  text-decoration: none;
}

.formDisabled .disabledBold input::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: transparent;
}

.formDisabled .disabledBold input:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: transparent;
}

.formDisabled .disabledBold input::placeholder {
  /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: transparent;
}

.formDisabled .disabledBold textarea::-webkit-input-placeholder {
  /* WebKit, Blink, Edge */
  color: #888;
}
.formDisabled .disabledBold textarea:-ms-input-placeholder {
  /* Internet Explorer 10-11 */
  color: #888;
}
.formDisabled .disabledBold textarea::placeholder {
  /* Standard (https://drafts.csswg.org/selectors-4/#placeholder) */
  color: #888;
}
/*endregion*/

.labelAsInput {
  width: 90px;
  display: inline-block;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  border: 1px solid transparent;
  padding: 0.375rem 0.75rem 0.375rem 0;
}

.formDisabled .labelAsInput {
  padding: 0;
}
/*endregion*/

/*region form style modifiers */
/*region .large-led-inputs*/
.large-led-inputs .led-input {
  border-radius: 8px;
  font-size: 18px;
  padding: 0.375em 0.75em;
}
.large-led-inputs .led-input:focus {
  background: var(--col-bg-light-blue);
  border-color: #8fdfaa;
}
.large-led-inputs .led-input::placeholder {
  font-size: 14px;
  color: #888888;
  font-style: italic;
}
.large-led-inputs .led-input-label {
  font-size: 14px;
  color: var(--col-bright-green);
  text-transform: uppercase;
  font-weight: 500;
}
.large-led-inputs .led-input-label--optional {
  color: #7a7a7a;
}
.large-led-inputs .led-radio-label {
  color: #4b4b4b;
}
/*endregion*/
/*endregion*/

/*region animations*/
@keyframes saOpacity {
  0% {
    opacity: 0.3;
  }
  100% {
    opacity: 1;
  }
}

@keyframes saOpacityFade {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes saOpacityFadeFaster {
  0% {
    opacity: 0;
  }
  3% {
    opacity: 1;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes saBackgroundMove {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes saBottomMove {
  0% {
    background-color: #fff;
    bottom: -10px;
  }
  100% {
    background-color: #66a5c2;
    bottom: -2px;
  }
}

@keyframes saBottomMoveOnlyBottom {
  0% {
    bottom: -10px;
  }
  100% {
    bottom: 5px;
  }
}

@keyframes saTopMove {
  0% {
    top: -3px;
  }
  50% {
    background-color: #fff;
    top: -10px;
  }
  51% {
    background-color: #fff;
    top: 10px;
  }
  100% {
    top: -3px;
  }
}

.animateOnce {
  animation: saOpacityFade 2.5s 1 ease-out;
}

.fadeOut {
  animation: saOpacityFadeFaster 5s 1 ease-out;
}

/*endregion*/

/*region .advice*/
.advice {
  padding: 10px;
  background-color: #e5ebec;
}

.advice ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.advice li {
  background: transparent url("/assets/ctx/5091bf6e/layout/images/btn-page-next.png") 0 50% no-repeat;
  background-size: 7px;
  padding: 0 0 0 20px;
  margin: 10px 0;
}
/*endregion*/

/*region helptext*/
.helptext:before {
  content: "";
  display: block;
  background: #73a8bc url("/assets/ctx/fbea2931/layout/images/ico-exclamation-white.png") 50% 50% no-repeat;
  background-size: 2px;
  width: 20px;
  height: 20px;
  border-radius: 10px;
  float: left;
  margin-right: 10px;
}

.helptext.orangeIcon:before {
  background: #e69557 url("/assets/ctx/fbea2931/layout/images/ico-exclamation-white.png") 50% 50% no-repeat;
  background-size: 2px;
}
/*endregion*/

.grayBox {
  background-color: #f9f9f9;
  border: 1px solid #ddd;
  padding: 16px;
}

.grayBox--shadow {
  box-shadow: 1px 1px 2px #efefef;
}

/*region .progressBar*/
.progressBarOuter {
  width: 88px;
  padding: 2px 2px 2px 4px;
  background-color: #ffffff;
  border: 1px solid #73a8bc;
}

.progressBar {
  height: 1em;
  background: repeating-linear-gradient(to right, #73a8bc, #73a8bc 6px, #f5f5f5 6px, #f5f5f5 8px);
  transition: all 0.2s;
}

.progressBarExceed {
  background: repeating-linear-gradient(to right, #245773, #245773 6px, #f5f5f5 6px, #f5f5f5 8px);
}
/*endregion*/

.smallAjaxLoader {
  background: #fff;
  padding: 2px;
  display: inline-block;
  border-radius: 50%;
}

/*region miscellaneous */

/*region .excl */
.excl {
  display: inline-block;
  height: 18px;
  width: 18px;
  background-color: #73a8bc;
  color: #fff;
  margin-right: 5px;
  margin-top: 10px;
  border-radius: 50%;
  font-weight: bold;
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.excl:hover {
  text-decoration: none;
  background-color: #4a9cc9;
}

@media screen and (max-width: 768px) {
  .excl {
    margin-top: 5px;
  }
}

/*endregion*/

.content {
  margin-bottom: 20px;
}

.showInWL {
  display: none;
}

/* bootstrap */
/* border-radius values should always be the same */
.card {
  border-radius: 0.6rem;
}
.card > .list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.6rem;
  border-bottom-left-radius: 0.6rem;
}
.card-header:first-child {
  border-radius: calc(0.6rem - 1px) calc(0.6rem - 1px) 0 0;
}

/* bootstrap - add lighter color to placeholder-glow*/
.placeholder-glow {
  color: var(--col-light-white);
}

.pageloading-mask {
  animation-delay: 1s;
}

.cursor {
  cursor: pointer;
}

.opacity-disabled-element {
  opacity: 0.4;
}

/*region .large-logo .small-logo*/
.large-logo {
  display: inline-block;
  width: 350px;
  height: 30px;
  margin-left: 10px;
  margin-top: 22px;
  background: url("/assets/ctx/eba106c2/layout/images/smartaccounts-logo-350.png") 50% 50% no-repeat;
}

.small-logo {
  display: none;
  background: transparent url("/assets/ctx/63122ce2/layout/images/smartaccounts-logo-small.png") 0 50% no-repeat;
  background-size: contain;
  margin-left: 10px;
  margin-top: 22px;
  height: 30px;
  width: 87px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .large-logo {
    background: url("/assets/ctx/29570f3a/layout/images/smartaccounts-logo.png") 50% 50% no-repeat;
    background-size: 350px;
  }
}

@media only screen and (max-width: 992px) {
  .large-logo {
    display: none;
  }

  .small-logo {
    display: inline-block !important;
  }
}

@media (max-width: 576px) {
  .small-logo {
    height: 25px;
  }
}

@media (max-width: 400px) {
  .small-logo {
    height: 20px;
    margin-top: 15px;
  }
}
/*endregion*/

.has-tooltip {
  position: relative;
}

.has-tooltip:hover:after {
  content: attr(data-title);
  padding: 10px;
  position: absolute;
  left: 10px;
  top: 30px;
  z-index: 20;
  white-space: nowrap;
  color: #4798c4;
  background-color: #fff;
  box-shadow: 3px 3px 3px #aaa;
  border: 1px solid #f9f9f9;
}

/*region .comp-body*/
.comp-body {
  margin-top: 10px;
  min-height: 50px;
}

.comp-body .filter input,
.filter select,
.comp-body .filter img {
  vertical-align: middle;
}

.comp-body .filter .padding,
.padding {
  width: 10px;
  display: inline-block;
}

@media screen and (max-width: 576px) and (min-height: 576px) {
  .comp-body {
    padding-bottom: 10px;
  }
}
/*endregion*/

/*region .comp-background*/
.comp-background {
  background-color: #f5f5f5;
}

.comp-background-light {
  background-color: #f7f9f9;
}

.comp-background h1 {
  padding: 0;
  margin: 0 0 10px;
}

.comp-background .white-background,
.white-background {
  background-color: #fff;
  padding: 5px;
}
/*endregion*/

/*endregion*/

/*region .led-shadow*/
.led-shadow {
  box-shadow: 3px 3px 12px rgba(52, 65, 78, 0.2);
}

.led-shadow-blue:hover {
  box-shadow: var(--led-shadow-amt-hover) var(--led-shadow-color-blue);
}

.led-shadow-cyan:hover {
  box-shadow: var(--led-shadow-amt-hover) var(--led-shadow-color-cyan);
}

.led-shadow-green:hover {
  box-shadow: var(--led-shadow-amt-hover) var(--led-shadow-color-green);
}

.led-shadow-orange:hover {
  box-shadow: var(--led-shadow-amt-hover) var(--led-shadow-color-orange);
}
/*endregion*/

/*region legacy positioning/grid classes */
/*region multi column components using float and .led-row*/
.comp-body-4pane,
.comp-body-3pane,
.comp-body-2pane,
.comp-body-3pane-component {
  float: left;
  width: 25%;
  min-width: 110px;
  margin-bottom: 10px;
}

.comp-body-5pane {
  float: left;
  width: 20%;
  min-width: 110px;
  margin-bottom: 10px;
}

.comp-body-3pane,
.comp-body-3pane-component {
  width: calc(33% - 20px);
  margin: 10px;
  box-sizing: border-box;
  padding: 5px;
}

.comp-body-3pane.led-small {
  width: calc(30% - 20px);
}

.comp-body-3pane.large {
  width: calc(39% - 20px);
}

.comp-body-3pane.xsmall {
  width: calc(25% - 20px);
}

.comp-body-2pane {
  width: calc(50% - 20px);
  margin: 10px;
  padding: 5px;
}

.comp-body-2pane.led-small {
  width: calc(33% - 20px);
}

.comp-body-2pane.large {
  width: calc(66% - 20px);
}

.led-row {
  display: block;
  padding: 3px;
  min-height: 25px;
}

@media screen and (max-width: 768px) {
  .comp-body-3pane,
  .comp-body-3pane.led-small,
  .comp-body-3pane.xsmall .comp-body-3pane.large,
  .comp-body-2pane.led-small,
  .comp-body-2pane.large {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 576px) {
  .comp-body-4pane,
  .comp-body-5pane {
    width: 50%;
  }

  div.comp-body-3pane,
  div.comp-body-2pane,
  div.comp-body-3pane.led-small,
  div.comp-body-3pane.xsmall,
  div.comp-body-3pane.large,
  div.comp-body-2pane.led-small,
  div.comp-body-2pane.large {
    width: calc(100% - 20px);
  }

  .comp-body-3pane-component {
    width: calc(50% - 20px);
  }
}

@media screen and (max-width: 400px) {
  .comp-body-3pane-component {
    width: calc(100% - 20px);
  }
}

@media screen and (max-width: 350px) {
  .comp-body-4pane,
  .comp-body-5pane {
    width: 100% !important;
  }
}

/*endregion*/

/*region multi column components rows using table */
.comp-table {
  width: 100%;
  color: #000;
  border-collapse: collapse;
  font-size: 12px;
}

.comp-table thead {
  background-color: #fff;
}

.comp-table thead th {
  text-align: left;
  color: var(--col-dark-blue);
  white-space: nowrap;
  padding: 5px;
  min-width: 15px;
  border-radius: 2px;
  font-size: 14px;
  font-weight: 300;
  border: 1px solid #fff;
  text-transform: uppercase;
  border-bottom: 1px solid #ddd;
}

.comp-table tbody tr {
  text-align: left;
}

.comp-table:not(nohover) tbody tr.row0:hover td,
.comp-table tbody tr.row1:hover td,
#bankImportProblems p:hover {
  background-image: none;
}

.comp-table tbody tr td {
  height: 25px;
  padding: 6px 5px;
  line-height: 25px;
}

.comp-table tbody tr td.borderRight {
  border-right: 1px solid #ddd;
}
.comp-table tr.highlighted-row {
  background-color: #d8e6e6;
}

.comp-table .td {
  display: inline-block;
  padding: 1px;
  border-left: 1px solid #fff;
}

.comp-table td.heading {
  background-color: #dbedf1;
}

.comp-table td.led-label {
  white-space: nowrap;
  font-weight: bold;
  color: #5d616d;
}

.comp-table td.separator {
  height: 5px;
  border-bottom: 1px solid #999;
}

.comp-table td.required {
  background: url("/assets/ctx/6fed3530/layout/images/bck-required.png") 100% 6px no-repeat;
  padding-right: 15px;
}

.rows td {
  line-height: 20px;
  vertical-align: top;
}

.rows .td {
  vertical-align: top;
}

.comp-table.borderGrey input,
.comp-table.borderGrey textarea {
  border: 1px solid #ddd;
  padding: 2px;
}

.noHeader thead th {
  background: none;
  border: none;
  display: none;
  visibility: hidden;
}

.tdborders tbody tr {
  border-bottom: 1px solid #efefef;
}

.noHeader tbody td {
  vertical-align: top;
}

.tdborders tbody td.change,
.tdborders tbody td[data-grid-property="change"],
.tdborders thead th.change,
.tdborders thead th[data-grid-property="change"] {
  display: none;
}

.comp-table.frontpage p {
  line-height: 25px;
  padding: 0;
  margin: 0;
}

.comp-table.lessPadding tbody tr td {
  height: 20px;
  padding: 3px 3px;
  line-height: 20px;
}

.comp-table.smallPadding tbody tr td {
  padding: 0px 5px;
}

.comp-table.nopadding tr td {
  padding: 0 5px;
}

.comp-table.inputsWholeTd tbody tr:not(.nobackground) td {
  border: 1px solid #f0f0f0;
  padding: 0;
  margin: 0;
}
.comp-table.inputsWholeTd tbody td input,
table.comp-table.inputsWholeTd tbody td select {
  border: none;
  width: 100%;
  padding: 7px;
  padding-right: 16px;
  box-sizing: border-box;
}

.comp-table.borderGrey .row1 td {
  background-image: none;
  background-color: #f9f9f9;
}

@media screen and (max-width: 650px) {
  .comp-table.responsive-table tr:not(.hiddenRow) td {
    width: 47%;
  }
}

@media screen and (max-width: 400px) {
  .comp-table.responsive-table tr:not(.hiddenRow) td:before {
    min-width: 35%;
  }

  .comp-table.responsive-table tr:not(.hiddenRow) td {
    width: 100%;
  }

  /* Make the button small again */
  .comp-table.responsive-table .icon-16.delete-16 {
    background: #e5a36f url("/assets/ctx/9b1104bd/layout/images/btn-delete.png") no-repeat;
    background-size: 12px;
    background-position: 50% 50%;
    width: 22px;
    height: 22px;
    text-indent: -9999px;
    color: transparent;
    text-align: center;
    line-height: 22px;
  }
}
/*endregion*/
/*endregion*/

/* General Theme - END   */
/*************************************************/

/* Tapestry Style Overrides - START */
/*************************************************/

/*region t-error warning helptexts */
.t-error {
  margin-top: 5px;
  text-align: left;
  margin-bottom: 10px;
}

.t-error.addedPadding {
  background-color: #fff;
  padding: 5px;
}

.comp-body .t-error {
  margin-top: 0;
}

.t-error DIV {
  padding: 0;
  font-size: 14px;
  color: #555;
  margin-bottom: 2px;
  line-height: 18px;
  position: relative;
}

.t-error div .error-icon {
  display: inline-block;
  width: 32px;
  height: 100%;
  border-right: 2px solid #fff;
  position: absolute;
  box-sizing: border-box;
  top: 0;
  left: 0;
}

.t-error div .error-text {
  padding-left: 40px;
  display: inline-block;
  width: 100%;
  min-height: 30px;
  padding-top: 6px;
  box-sizing: border-box;
  padding-bottom: 6px;
}

.t-error div .error-text.text-with-button {
  width: calc(100% - 9em);
  padding-right: 1rem;
}

.t-error div .error-text a {
  text-decoration: underline;
}

.t-error div .error-text ul {
  margin-bottom: 0;
}

.preWarnings p {
  padding: 5px;
  background-color: #fbf9ce;
  line-height: 20px;
  margin: 0;
  font-size: 14px;
  color: #555;
}

.preWarnings p .error-icon {
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-right: 10px;
  background: #e7ac41 url("/assets/ctx/fbea2931/layout/images/ico-exclamation-white.png") 50% 50% no-repeat;
  background-size: 2px;
}

.jsShowMessages {
  min-width: 250px;
  margin-bottom: 0;
  background-color: #fff;
  position: fixed;
  right: 5px;
  bottom: 5px;
}

.jsShowMessages.messagesShown {
  border: 1px solid #ddd;
  padding: 15px;
  animation: saBottomMoveOnlyBottom 0.3s 1;
  box-shadow: 5px 5px 5px #bbb;
}

.t-error .help .error-icon {
  background: #8db349 url("/assets/ctx/83b0ae37/layout/images/ico-ok-white.png") 50% 50% no-repeat;
  background-size: 14px;
}

.t-error .help {
  background-color: #e1eeda;
}

.t-error .error .error-icon {
  background: #e46a58 url("/assets/ctx/13ba862c/layout/images/btn-abort.png") 50% 50% no-repeat;
  background-size: 14px;
}

.t-error .error {
  background-color: #f9dfdb;
}

.t-error .warning .error-icon {
  background: #e7ac41 url("/assets/ctx/fbea2931/layout/images/ico-exclamation-white.png") 50% 50% no-repeat;
  background-size: 2px;
}

.t-error .warning {
  background-color: #fbf9ce;
}

.t-error .notify .error-icon {
  background: #73a8bc url("/assets/ctx/fbea2931/layout/images/ico-exclamation-white.png") 50% 50% no-repeat;
  background-size: 2px;
}

.t-error .notify {
  background-color: #e9f3f7;
}

.t-error-input {
  border-left: 3px solid #ed7615;
  font-style: normal;
  color: #ed7615;
}

.t-error-icon {
  margin-left: 4px;
  width: 16px;
  height: 16px;
  display: none;
}

.t-error-popup {
  cursor: default;
  color: #fff;
  display: block;
  float: left;
  font-size: 14px;
  white-space: nowrap;
  height: 39px;
  text-decoration: none;
  z-index: 600;
}

.t-error-popup span {
  display: block;
  line-height: 32px;
  margin-left: 0;
  padding: 0 1em 10px 1em;
  background: transparent url("/assets/ctx/1c4d86bf/layout/images/error-bevel-left.png") no-repeat;
}

.t-blue-popup SPAN,
HTML > BODY .t-blue-popup SPAN {
  background: transparent url("/assets/ctx/a1e0847d/layout/images/help-bevel-left.png") no-repeat;
}

.t-blue-popup,
HTML > BODY .t-blue-popup {
  background: transparent url("/assets/ctx/cdd490e1/layout/images/help-bevel-right.png") no-repeat scroll top right;
}

.t-green-popup SPAN,
HTML > BODY .t-green-popup SPAN {
  background: transparent url("/assets/ctx/365588fa/layout/images/green-bevel-left.png") no-repeat;
}

.t-green-popup,
HTML > BODY .t-green-popup {
  background: transparent url("/assets/ctx/59a59500/layout/images/green-bevel-right.png") no-repeat scroll top right;
}
/*endregion*/

/*region grid pager styles */
.t-data-grid-pager {
  font-size: 14px;
  line-height: 22px;
  margin: 2px auto;
  padding: 5px;
  text-align: center;
  color: var(--col-dark-blue);
}

.t-data-grid-pager .grid-button.disabled img {
  opacity: 0.4;
}

.t-data-grid-pager a {
  display: inline-block;
  padding: 10px;
}

.t-data-grid-pager .grid-button.disabled {
  padding: 12px;
  display: inline-block;
}

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

.t-data-grid-pager A:hover {
  border: none;
  text-decoration: underline;
}

.t-data-grid-pager .active {
  background: none;
  font-weight: bold;
  padding: 12px;
  color: #555;
}

.t-data-grid-pager > li {
  display: inline-block;
}
/*endregion*/

/*region t-calendar */
.t-calendar-trigger {
  display: inline-block;
  height: 100%;
  width: 15px;
  background: url("/assets/ctx/5a767511/layout/images/btn-calendar.png") 50% 50% no-repeat;
  background-size: 14px;
  border: none;
  margin-right: 5px;
}

.t-calendar-trigger.disabled {
  background: none;
}

.t-calendar-trigger:disabled {
  display: none;
}
/*endregion*/

/*region t-autocomplete*/
.t-autocomplete-menu {
  position: absolute;
  top: 28px;
  background-color: #fff;
  border: 5px solid #73a8bc;
  z-index: 189;
  width: 220px !important;
  box-shadow: 1px 1px 2px #aaa;
}

.t-autocomplete-menu__header {
  position: absolute;
  top: 0px;
  height: 27px;
  width: 100%;
  left: 0;
  background-color: #73a8bc;
  padding: 0;
  margin: 0;
  padding-left: 3px;
  box-sizing: border-box;
  color: #fff;
  line-height: 20px;
}

.t-autocomplete-menu__close {
  width: 32px;
  height: 32px;
  background: #91baca url("/assets/ctx/ebdcb357/layout/images/btn-close-white.png") 50% 50% no-repeat;
  background-size: 12px;
  color: #fff;
  float: right;
  box-sizing: border-box;
  position: absolute;
  top: -5px;
  right: -5px;
}

.t-autocomplete-menu__close:hover {
  background-color: #75a2b5;
}

.t-autocomplete-menu ul {
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.t-autocomplete-menu ul li {
  cursor: pointer;
  transition: all 0.2s;
  padding: 5px;
  line-height: 14px;
}

.t-autocomplete-menu ul li:first-child {
  font-style: italic;
}

.t-autocomplete-menu ul li:nth-child(even) {
  background-color: #f9f9f9;
}

.t-autocomplete-menu ul li.selected {
  background-color: #87bcd9;
  color: #fff;
}

.t-loading {
  padding: 80px 0 0 0;
  text-align: center;
  margin: auto;
  height: 150px;
  color: #fff;
  background: url("/assets/ctx/51774356/layout/images/ajax-loader.gif") no-repeat center center;
}

@media screen and (max-width: 576px) {
  DIV.t-palette SELECT {
    width: 150px;
  }

  DIV.t-palette SELECT OPTION {
    background-color: #fff;
    padding: 4px 2px;
    width: 120px;
    border-bottom: 1px dotted #ddd;
    overflow: hidden;
    color: #566770;
  }
}
/*endregion*/

/* Tapestry Style Overrides - END   */
/*************************************************/