:root {
  /* Color Palette */
  --var-primary-color: #eb9c0a;
  --var-secondary-color: #00124a;
  --var-tertiary-color: #38708f;

  --var-success-color: #00765f;
  --var-information-color: #61378a;
  --var-warning-color: #38708f;
  --var-error-color: #c22a2e;

  --var-text-color: #2e2b24;
  --var-page-background-color: #f7f6f2;

  --var-link-color: var(--var-secondary-color);
  --var-link-hover-color: var(--var-secondary-color);
  --var-link-underline-color: #00323266;
  --var-link-underline-hover-color: var(--var-secondary-color);

  --var-error-label-color: var(--var-text-color);

  --var-loading-background-color: rgb(255, 255, 255, 0.3);

  /* Font Family */
  --var-font-family-base: "Commissioner";
  --var-font-family-bold: "Commissioner-bold";
  --var-font-family-medium: "Commissioner-medium";

  /* Font sizes */
  --var-font-size-larger: 18px;
  --var-font-size-base: 16px;
  --var-font-size-smaller: 14px;

  --var-font-size-h1: 36px;
  --var-font-size-h2: 30px;
  --var-font-size-h3: 26px;
  --var-font-size-h4: 22px;
  --var-font-size-h5: 20px;
  --var-font-size-h6: 18px;

  --var-line-height-base: 135%;

  --var-font-weight-title: 600;
  --var-font-weight-base: 400;
  --var-font-weight-bold: 800;

  --var-error-font-weight: 500;

  /* Logo */
  --var-logo-height: auto;
  --var-logo-width: 292px;

  /* Top navigation bar */
  --var-navigation-background-color: #fffef9;
  --var-navigation-color: #79756f;

  --var-navigation-arrow-colour: var(--var-tertiary-color);
  --var-navigation-arrow-background-color: var(
    --var-navigation-background-color
  );

  /* Side navigation bar */
  --var-side-navigation-background-color: var(--var-secondary-color);
  --var-side-navigation-color: #ffffff;

  /* Inputs */
  --var-input-background-color: #f7f6f2;
  --var-input-color: #79756f;
  --var-input-border-radius: 8px;
  --var-input-border-color: #c1beba;
  --var-input-border-width: 1px;
  --var-input-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);

  --var-input-placeholder-color: #c1beba;
  --var-input-light-placeholder-color: #7a8a94;

  --var-input-active-background-color: #f7f6f2;
  --var-input-active-border-color: #79756f;
  --var-input-active-box-shadow: none;

  --var-input-icon-color: var(--var-secondary-color);

  --var-input-padding: 10px 12px 6px 12px;

  /* Password Strength Indicator */
  --var-password-strength-indicator-label-color: #00000061;
  --var-password-invalid-label: #541313;
  --var-password-strength-weak-color: #541313;
  --var-password-strength-good-color: #5f2b01;
  --var-password-strength-strong-color: var(--var-secondary-color);

  --var-password-strength-label-font-weight: 400;
  --var-password-strength-result-font-weight: 700;

  --var-password-strength-indicator-font-size: var(--var-font-size-smaller);

  /* Selects */
  --var-select-background-color: var(--var-input-background-color);
  --var-select-color: var(--var-input-color);
  --var-select-border-radius: var(--var-input-border-radius);
  --var-select-border-color: var(--var-input-border-color);
  --var-select-border-width: var(--var-input-border-width);
  --var-select-box-shadow: var(--var-input-box-shadow);

  --var-select-active-border-color: #79756f;
  --var-select-active-box-shadow: none;

  --var-select-placeholder-color: var(--var-input-placeholder-color);

  --var-select-dropdown-background-color: var(--var-select-background-color);
  --var-select-dropdown-color: var(--var-select-color);
  --var-select-dropdown-border-radius: var(--var-select-border-radius);
  --var-select-dropdown-border-color: var(--var-select-border-color);
  --var-select-dropdown-border-width: var(--var-select-border-width);
  --var-select-dropdown-box-shadow: var(--var-select-box-shadow);

  --var-select-dropdown-active-background-color: var(--var-primary-color);
  --var-select-dropdown-active-color: #2e2b24;

  --var-select-dropdown-hover-background-color: var(--var-primary-color);
  --var-select-dropdown-hover-color: #2e2b24;

  /* Toggles */
  --var-toggle-border-color: #c1beba;
  --var-toggle-border-width: var(--var-input-border-width);
  --var-toggle-background-color: #e6e4df;
  --var-toggle-color: #79756f;

  --var-toggle-hover-background-color: #c1beba;
  --var-toggle-hover-color: #2e2b24;
  --var-toggle-hover-border-color: transparent;

  --var-toggle-selected-background-color: var(--var-secondary-color);
  --var-toggle-selected-color: #f7f6f2;
  --var-toggle-selected-border-color: transparent;

  --var-toggle-selected-hover-background-color: var(--var-secondary-color);
  --var-toggle-selected-hover-color: #f7f6f2;
  --var-toggle-selected-hover-border-color: transparent;

  /* Date picker */
  --var-datepicker-header-font-size: 12px;
  --var-datepicker-header-font-weight: 800;

  --var-datepicker-body-font-size: 12px;
  --var-datepicker-body-font-weight: 400;

  --var-datepicker-disabled-background-color: #e5ebeb;
  --var-datepicker-disabled-color: #989898;

  --var-datepicker-date-select-color: #f7f6f2;
  --var-datepicker-date-select-box-shadow: 0 0 0 2px #000000;

  --var-datepicker-weekday-color: var(--var-secondary-color);
  --var-datepicker-date-color: #2e2b24;

  --var-datepicker-active-date-background-color: var(--var-tertiary-color);
  --var-datepicker-active-date-color: var(--var-page-background-color);

  --var-datepicker-hover-date-background-color: var(--var-secondary-color);
  --var-datepicker-hover-date-color: var(--var-secondary-color);
  --var-datepicker-hover-date-background-opacity: 0.06;

  --var-datepicker-next-prev-background-color: var(--var-tertiary-color);
  --var-datepicker-next-prev-button-color: var(--var-page-background-color);
  --var-datepicker-next-prev-border-color: var(--var-page-background-color);

  --var-datepicker-next-prev-disabled-background-color: var(
    --var-datepicker-disabled-background-color
  );
  --var-datepicker-next-prev-disabled-button-color: #2e2b24;
  --var-datepicker-next-prev-disabled-border-color: var(
    --var-datepicker-disabled-background-color
  );

  /* Checkboxes */
  --var-checkbox-background-color: var(--var-input-background-color);
  --var-checkbox-border-color: var(--var-input-border-color);
  --var-checkbox-border-width: var(--var-input-border-width);
  --var-checkbox-border-radius: 2px;

  --var-checkbox-selected-background-color: var(--var-secondary-color);
  --var-checkbox-selected-border-color: var(--var-secondary-color);
  --var-checkbox-selected-color: #ffffff;

  /* Tooltips */
  --var-tooltip-icon-color: var(--var-primary-color);
  --var-tooltip-color: #f7f6f2;
  --var-tooltip-background-color: #2e2b24;
  --var-tooltip-border-radius: 4px;
  --var-tooltip-font-size: 20px;

  /* Buttons */
  --var-button-primary-color: #2e2b24;
  --var-button-primary-background-color: var(--var-primary-color);
  --var-button-primary-border-color: transparent;

  --var-button-primary-hover-color: var(--var-button-primary-color);
  --var-button-primary-hover-background-color: #d87a0f;
  --var-button-primary-hover-border-color: transparent;

  --var-button-secondary-color: #f7f6f2;
  --var-button-secondary-background-color: var(--var-secondary-color);
  --var-button-secondary-border-color: transparent;

  --var-button-secondary-hover-color: #c1beba;
  --var-button-secondary-hover-background-color: var(--var-secondary-color);
  --var-button-secondary-hover-border-color: transparent;

  --var-button-padding: 10px 12px 8px 12px;

  /* Panels */
  --var-panel-border-color: rgba(0, 0, 0, 0.15);
  --var-panel-border-width: 0;
  --var-panel-border-radius: 2px;
  --var-panel-box-shadow: 3px 3px 5px 0px #00000014;
  --var-panel-background-color: #ffffff;

  /* Alerts */
  --var-error-alert-background-color: #f3d4d5;
  --var-error-alert-color: #2e2b24;
  --var-error-alert-border-color: var(--var-error-alert-background-color);

  --var-information-alert-background-color: #d7e2e9;
  --var-information-alert-color: #2e2b24;
  --var-information-alert-border-color: var(
    --var-information-alert-background-color
  );

  --var-warning-alert-background-color: #e0d7e7;
  --var-warning-alert-color: #2e2b24;
  --var-warning-alert-border-color: var(--var-warning-alert-background-color);

  --var-success-alert-background-color: #cce4de;
  --var-success-alert-color: #2e2b24;
  --var-success-alert-border-color: var(--var-success-alert-background-color);

  /* Legend */
  --var-legend-border-bottom-color: #7a8a94;
  --var-legend-border-bottom-width: 0.5px;

  /* Footer */
  --var-footer-background-color: #1a1a1a;
  --var-footer-text-color: #f7f6f2;
  --var-footer-padding: 40px 135px 40px 135px;
  --var-footer-text-font-size: 14px;
}

@font-face {
  font-family: "Commissioner";
  src: url("../../../assets/Commissioner/Commissioner-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Commissioner-bold";
  src: url("../../../assets/Commissioner/Commissioner-Bold.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Commissioner-medium";
  src: url("../../../assets/Commissioner/Commissioner-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Logo */
.header .logo.custom-logo img {
  width: var(--var-logo-width);
  height: var(--var-logo-height);
}

/* Navigation bar */
.header {
  background: var(--var-navigation-background-color);
  background-color: var(--var-navigation-background-color);
  padding: 27px;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.step-wizard {
  box-shadow: none;
  -webkit-box-shadow: none;
}

.step-wizard #hamburgerBar .sst__navItem .sst__navLink::before,
.step-wizard #progressBar .sst__navItem:not(.sst__last) .sst__navLink::after {
  background: #e6e4df;
  color: #79756f;
}

.step-wizard #progressBar a.sst__navLink {
  color: #79756f;
}

/* Side Navigation */
.side-navigation > .sst__navMenu > .sst__navItem > .sst__navLink {
  background-color: var(--var-tertiary-color);
  background: var(--var-tertiary-color);
  color: #f7f6f2 !important;
}

.side-navigation
  > .sst__navMenu
  > .sst__navItem
  > .sst__navMenu
  > .sst__navItem
  > .sst__navLink {
  color: var(--var-tertiary-color) !important;
}

.side-navigation .sst__navDesc {
  color: var(--var-text-color);
}

/* Step wizard */
.step-wizard {
  background-color: #e6e4df;
  color: #79756f;
}

.step-wizard #progressBar .sst__expanded a,
.step-wizard #progressBar .sst__selected a,
.step-wizard #hamburgerBar .sst__expanded a,
.step-wizard #hamburgerBar .sst__selected a,
.step-wizard #progressBar .sst__selected.sst__last,
.step-wizard #hamburgerBar .sst__selected.sst__last {
  color: #2e2b24;
}

/* General */
body {
  background-color: var(--var-page-background-color) !important;
  color: var(--var-text-color);
  font-family: var(--var-font-family-base);
  font-size: var(--var-font-size-base);
  line-height: 21.6px;
  font-weight: var(--var-font-weight-base);
}

h1,
h2,
h3,
legend,
h4,
h5,
.side-navigation .sst__navLink,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--var-font-family-base);
}

.alert,
.pageInfo,
.addressInfo,
#resumeSavedApplication .errors {
  font-weight: var(--var-font-weight-title);
  font-size: var(--var-font-size-smaller);
}

/* Links */
a {
  color: var(--var-link-color);
}

a:hover,
a:focus {
  color: var(--var-link-hover-color);
}

#mainContent a,
#pagecontent a {
  text-decoration: underline;
  text-decoration-color: var(--var-link-underline-color);
}

#mainContent a:hover,
#pagecontent a:hover {
  text-decoration: underline;
  text-decoration-color: var(--var-link-underline-hover-color);
}

.addEntity,
.btn-default,
.payLater,
.sst__navLink {
  text-decoration: none !important;
}

/* Headers */
h1,
h2,
h3,
h4,
h5,
h6,
legend {
  color: var(--var-secondary-color);
}

/* Panels */
.panel,
.side-navigation > .sst__navDesc,
.side-navigation > .sst__navMenu > .sst__navItem {
  border: var(--var-panel-border-width) solid var(--var-panel-border-color);
  -webkit-box-shadow: var(--var-panel-box-shadow);
  box-shadow: var(--var-panel-box-shadow);
  border-radius: var(--var-panel-border-radius);
  background-color: var(--var-panel-background-color);
}

/* Inputs */
.form-horizontal .form-group .control-label {
  font-weight: var(--var-font-weight-base);
}

.addEntity,
.btn,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label,
.form-horizontal .form-group.form-group-yes-no .radio .yes-no-label,
.payLater,
.paymentProceed,
.createIsaTransfer {
  font-size: var(--var-font-size-smaller);
  font-weight: var(--var-font-weight-base);
}

.form-control {
  background-color: var(--var-input-background-color);
  color: var(--var-input-color);
  border-radius: var(--var-input-border-radius);
  border: var(--var-input-border-width) solid var(--var-input-border-color);
  font-weight: var(--font-weight-base);
  font-size: var(--var-font-size-smaller);
  padding: var(--var-input-padding);
}

.form-control::placeholder,
.duet-date__input::placeholder {
  color: var(--var-input-placeholder-color);
  font-weight: var(--var-font-weight-base);
}

#securityDetails .form-control::placeholder {
  color: var(--var-input-light-placeholder-color);
  font-weight: var(--var-font-weight-base);
}

.form-control:focus {
  background-color: var(--var-input-active-background-color);
  color: var(--var-input-color);
  border: var(--var-input-border-width) solid
    var(--var-input-active-border-color);
  -webkit-box-shadow: var(--var-input-active-box-shadow);
  box-shadow: var(--var-input-active-box-shadow);
}

.form-horizontal
  .form-group.form-group-select.has-error
  div.bootstrap-select
  button,
.form-horizontal
  .form-group.form-group-yes-no
  div.sst__error
  .radio
  .yes-no-label {
  border-color: var(--var-error-color);
}

.has-error .help-block,
.has-error .control-label,
.has-error .radio,
.has-error .checkbox,
.has-error .radio-inline,
.has-error .checkbox-inline,
.has-error.radio label,
.has-error.checkbox label,
.has-error.radio-inline label,
.has-error.checkbox-inline label {
  color: var(--var-error-color);
}

.has-error .form-control:focus {
  box-shadow: none;
  -webkit-box-shadow: none;
}

.has-error .control-label {
  color: var(--var-error-label-color);
}

.text-danger {
  color: var(--var-error-color) !important;
  font-weight: var(--var-error-font-weight);
}

.dropdown-toggle::after,
i#togglePassword,
.duet-date__toggle-icon {
  color: var(--var-input-icon-color);
}

/* Password Strength Indicator */
#psiDisplay {
  font-size: var(--var-password-strength-indicator-font-size);
}

.password-st strong {
  color: var(--var-password-strength-indicator-label-color);
  font-weight: var(--var-password-strength-label-font-weight);
}

#psiDisplay.weak .password-st {
  color: var(--var-password-strength-weak-color);
  font-weight: var(--var-password-strength-result-font-weight);
}

#psiDisplay.good .password-st {
  color: var(--var-password-strength-good-color);
  font-weight: var(--var-password-strength-result-font-weight);
}

#psiDisplay.strong .password-st {
  color: var(--var-password-strength-strong-color);
  font-weight: var(--var-password-strength-result-font-weight);
}

/* Date Picker */
.duet-date__select > :not(option[disabled=""]) {
  color: var(--var-datepicker-date-select-color);
}

.duet-date__select select:focus + .duet-date__select-label {
  box-shadow: var(--var-datepicker-date-select-box-shadow);
}

.duet-date__prev,
.duet-date__next {
  background: var(--var-datepicker-next-prev-background-color);
  color: var(--var-datepicker-next-prev-button-color);
  border: none;
}

.duet-date__prev:focus,
.duet-date__next:focus {
  box-shadow: none;
}

.duet-date__prev:disabled,
.duet-date__next:disabled {
  background: var(--var-datepicker-next-prev-background-color);
  color: var(--var-datepicker-next-prev-button-color);
  border: none;
  opacity: 0.35;
}

.duet-date__day.is-outside,
.duet-date__day:not(.is-month),
.duet-date__day[aria-disabled="true"] {
  background-color: transparent;
  color: #2e2b24;
  opacity: 0.35;
}

.duet-date__table {
  color: var(--var-datepicker-weekday-color);
}

.duet-date__day {
  color: var(--var-datepicker-date-color);
  font-size: var(--var-datepicker-body-font-size);
  font-weight: var(--var-datepicker-body-font-weight);
  border-radius: 0;
}

.duet-date__table-header {
  font-size: var(--var-datepicker-header-font-size);
  font-weight: var(--var-datepicker-header-font-weight);
  text-align: center;
  color: #2e2b24;
}

.duet-date__day:active {
  color: var(--var-datepicker-active-date-color);
  background: var(--var-datepicker-active-date-background-color);
  box-shadow: none;
}

.duet-date__day[aria-pressed="true"],
.duet-date__day:focus {
  color: var(--var-datepicker-active-date-color);
  background: var(--var-datepicker-active-date-background-color);
}

.duet-date__day:hover::before {
  background: #e6e4df;
  color: #2e2b24;
  opacity: 0.35;
  border-radius: 0;
}

.duet-date__day.is-today {
  box-shadow: none;
}

.duet-date__day.is-today::before {
  background: transparent;
  color: #2e2b24;
  opacity: 1;
  border-radius: 0;
}

.duet-date__input {
  background-color: var(--var-input-background-color);
  color: var(--var-input-color);
  border-radius: var(--var-input-border-radius);
  border: var(--var-input-border-width) solid var(--var-input-border-color);
}

.duet-date__input:focus {
  border: var(--var-input-border-width) solid
    var(--var-input-active-border-color);
  -webkit-box-shadow: var(--var-input-active-box-shadow);
  box-shadow: var(--var-input-active-box-shadow);
}

.duet-date__toggle {
  background: var(--var-input-background-color);
  border-bottom-right-radius: var(--var-input-border-radius);
  border-top-right-radius: var(--var-input-border-radius);
  box-shadow: none;
  -webkit-box-shadow: none;
}

.duet-date__toggle:focus {
  box-shadow: none;
}

.duet-date__dialog-content {
  padding: 0.2em 0.2em 0;
}

.duet-date__header {
  background-color: var(--var-tertiary-color);
  border-radius: 4px;
  height: 35px;
  padding: 5px;
}

.duet-date__nav svg {
  height: 28px;
  padding-top: 2px;
}

.duet-date__select select:focus + .duet-date__select-label {
  box-shadow: none;
}

/* Checkboxes */
.form-horizontal .form-group input[type="checkbox"]::after,
.form-horizontal .form-group .checkbox input[type="checkbox"]::after,
.form-horizontal .form-group .checkbox-inline input[type="checkbox"]::after {
  background-color: var(--var-checkbox-background-color);
  border: var(--var-checkbox-border-width) solid
    var(--var-checkbox-border-color);
  border-radius: var(--var-checkbox-border-radius);
}

.form-horizontal .form-group input[type="checkbox"]:checked::after,
.form-horizontal .form-group .checkbox input[type="checkbox"]:checked::after,
.form-horizontal
  .form-group
  .checkbox-inline
  input[type="checkbox"]:checked::after {
  background-color: var(--var-checkbox-selected-background-color);
  border-color: var(--var-checkbox-selected-border-color);
  color: var(--var-checkbox-selected-color);
}

.form-horizontal .form-group input[type="checkbox"]:focus::after,
.form-horizontal .form-group .checkbox input[type="checkbox"]:focus::after,
.form-horizontal
  .form-group
  .checkbox-inline
  input[type="checkbox"]:focus::after {
  border-color: var(--var-checkbox-selected-border-color);
}

/* Selects */
.bootstrap-select .btn.dropdown-toggle.btn-light {
  background-color: var(--var-select-background-color);
  color: var(--var-select-color);
  border-radius: var(--var-select-border-radius);
  border: var(--var-select-border-width) solid var(--var-select-border-color);
}

.bootstrap-select.show .btn.dropdown-toggle.btn-light {
  border: var(--var-select-border-width) solid
    var(--var-select-active-border-color);
  box-shadow: var(--var-select-active-box-shadow);
  -webkit-box-shadow: var(--var-select-active-box-shadow);
}

.dropdown-menu {
  background-color: var(--var-select-dropdown-background-color);
  color: var(--var-select-dropdown-color);
  border-radius: var(--var-select-dropdown-border-radius);
  border: var(--var-select-dropdown-border-width) solid
    var(--var-select-dropdown-border-color);
  -webkit-box-shadow: var(--var-select-dropdown-box-shadow);
  box-shadow: var(--var-select-dropdown-box-shadow);
}

.dropdown-menu > li > a {
  color: var(--var-select-dropdown-color);
}

.dropdown-item.active,
.dropdown-item:active,
.dropdown-menu > .active > a,
.dropdown-menu > .active > a:hover,
.dropdown-menu > .active > a:focus {
  background-color: var(--var-select-dropdown-active-background-color);
  color: var(--var-select-dropdown-active-color);
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  color: var(--var-select-dropdown-hover-color);
  background-color: var(--var-select-dropdown-hover-background-color);
}

#companySearchFields .ui-widget-content {
  background-color: var(--var-select-dropdown-background-color);
  color: var(--var-select-dropdown-color);
  border-radius: var(--var-select-dropdown-border-radius);
  border: var(--var-select-dropdown-border-width) solid
    var(--var-select-dropdown-border-color);
  -webkit-box-shadow: var(--var-select-dropdown-box-shadow);
  box-shadow: var(--var-select-dropdown-box-shadow);
}

#companySearchFields .ui-widget.ui-widget-content {
  border: var(--var-select-dropdown-border-width) solid
    var(--var-select-dropdown-border-color);
  -webkit-box-shadow: var(--var-select-dropdown-box-shadow);
  box-shadow: var(--var-select-dropdown-box-shadow);
}

#companySearchFields .ui-autocomplete .ui-menu-item div {
  color: var(--var-select-dropdown-color);
}

#companySearchFields .ui-autocomplete .ui-menu-item div:hover {
  color: var(--var-select-dropdown-hover-color);
  background-color: var(--var-select-dropdown-hover-background-color);
}

/* Toggles */
.form-horizontal .form-group.form-group-yes-no .radio .yes-no-label {
  background-color: var(--var-toggle-background-color);
  color: var(--var-toggle-color);
  border: var(--var-toggle-border-width) solid var(--var-toggle-border-color);
}

.form-horizontal .form-group.form-group-yes-no .radio .yes-no-label:hover {
  background-color: var(--var-toggle-hover-background-color);
  color: var(--var-toggle-hover-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-hover-border-color);
  box-shadow: none;
}

.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label {
  background-color: var(--var-toggle-selected-background-color);
  color: var(--var-toggle-selected-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-border-color);
  box-shadow: none;
}

.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label:hover {
  background-color: var(--var-toggle-selected-background-color);
  color: var(--var-toggle-selected-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-border-color);
  box-shadow: none;
}

.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label:active,
.form-horizontal .form-group.form-group-yes-no .radio .yes-no-label:active,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .active.yes-no-label,
.form-horizontal .form-group.form-group-yes-no .radio .active.yes-no-label {
  background-color: var(--var-toggle-selected-background-color);
  color: var(--var-toggle-selected-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-border-color);
  box-shadow: none;
}

.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label:active:hover,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  .yes-no-label:active:hover,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label:active:focus,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  .yes-no-label:active:focus {
  background-color: var(--var-toggle-selected-background-color);
  color: var(--var-toggle-selected-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-border-color);
  box-shadow: none;
}

.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label:active:focus,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  .yes-no-label:active:focus {
  background-color: var(--var-toggle-selected-background-color);
  color: var(--var-toggle-selected-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-border-color);
  box-shadow: none;
}

.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:focus
  ~ .yes-no-label {
  outline: none;
}

.btn-default:active,
.payLater:active,
.btn-default.active,
.active.payLater,
.open > .btn-default.dropdown-toggle,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  .open
  > input[type="radio"]:checked
  ~ .dropdown-toggle.yes-no-label,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  .open
  > .dropdown-toggle.yes-no-label,
.open > .dropdown-toggle.payLater {
  background-color: var(--var-toggle-selected-hover-background-color);
  color: var(--var-toggle-selected-hover-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-hover-border-color);
}

.addEntity:active,
.addEntity:hover,
addEntity:active:focus,
.addEntity:active:hover,
.btn-default:active:hover,
.payLater:active:hover,
.btn-default:active:focus,
.payLater:active:focus,
.btn-default:active.focus,
.payLater:active.focus,
.btn-default.active:hover,
.active.payLater:hover,
.addEntity:active:focus,
.addEntity:active:hover,
.btn-default.active:focus,
.active.payLater:focus,
.btn-default.active.focus,
.active.focus.payLater,
.open > .btn-default.dropdown-toggle:hover,
.open > .dropdown-toggle.payLater:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .dropdown-toggle.payLater:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .dropdown-toggle.focus.payLater {
  background-color: var(--var-toggle-selected-hover-background-color);
  color: var(--var-toggle-selected-hover-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-hover-border-color);
}

.addEntity:active,
.addEntity:hover,
addEntity:active:focus,
.addEntity:active:hover,
.btn-default:active:hover,
.payLater:active:hover,
.btn-default:active:focus,
.payLater:active:focus,
.btn-default:active.focus,
.payLater:active.focus,
.btn-default.active:hover,
.active.payLater:hover,
.addEntity:active:focus,
.addEntity:active:hover,
.btn-default.active:focus,
.active.payLater:focus,
.btn-default.active.focus,
.active.focus.payLater,
.open > .btn-default.dropdown-toggle:hover,
.open > .dropdown-toggle.payLater:hover,
.open > .btn-default.dropdown-toggle:focus,
.open > .dropdown-toggle.payLater:focus,
.open > .btn-default.dropdown-toggle.focus,
.open > .dropdown-toggle.focus.payLater {
  background-color: var(--var-toggle-selected-hover-background-color);
  color: var(--var-toggle-selected-hover-color);
  border: var(--var-toggle-border-width) solid
    var(--var-toggle-selected-hover-border-color);
}

.addEntity,
.btn-default,
.payLater {
  background-color: var(--var-button-secondary-background-color);
  color: var(--var-button-secondary-color);
  border-color: var(--var-button-secondary-border-color);
}

.btn-default:hover,
.payLater:hover {
  background-color: var(--var-button-secondary-hover-background-color);
  color: var(--var-button-secondary-hover-color);
  border-color: var(--var-button-secondary-hover-border-color);
}

/* Tooltips */
.form-horizontal .form-group .control-tooltip .fa-question-circle-o {
  color: var(--var-tooltip-icon-color);
  font-size: var(--var-tooltip-font-size);
}

.tooltip-inner {
  color: var(--var-tooltip-color);
  background-color: var(--var-tooltip-background-color);
  border-radius: var(--var-tooltip-border-radius);
  font-family: var(--var-font-family-base);
}

.bs-tooltip-auto[x-placement^="bottom"] .arrow::before,
.bs-tooltip-bottom .arrow::before {
  border-bottom-color: var(--var-tooltip-background-color);
}

.bs-tooltip-auto[x-placement^="top"] .arrow::before,
.bs-tooltip-top .arrow::before {
  border-top-color: var(--var-tooltip-background-color);
}

.bs-tooltip-auto[x-placement^="left"] .arrow::before,
.bs-tooltip-left .arrow::before {
  border-left-color: var(--var-tooltip-background-color);
}

.bs-tooltip-auto[x-placement^="right"] .arrow::before,
.bs-tooltip-right .arrow::before {
  border-right-color: var(--var-tooltip-background-color);
}

/* Base font colors */
.exptext,
.formInfoText {
  color: var(--var-text-color);
  font-size: var(--var-font-size-smaller);
  line-height: var(--var-line-height-base);
  font-weight: var(--var-font-weight-base);
}

.form-horizontal .form-group .control-label .control-required {
  color: var(--var-error-color);
}

/* Buttons */
.btn-primary,
.btn-default {
  padding: var(--var-button-padding);
}

.btn-primary,
.paymentProceed,
.createIsaTransfer {
  color: var(--var-button-primary-color);
  background-color: var(--var-button-primary-background-color);
  border-color: var(--var-button-primary-border-color);
}

.btn-primary:hover,
.paymentProceed:hover,
.createIsaTransfer:hover,
.btn-primary:not(:disabled):not(.disabled).active,
.btn-primary:not(:disabled):not(.disabled):active,
.show > .btn-primary.dropdown-toggle,
.btn-primary:focus,
.paymentProceed:focus,
.createIsaTransfer:focus,
.btn-primary.focus,
.focus.paymentProceed,
.focus.createIsaTransfer {
  color: var(--var-button-primary-hover-color);
  background-color: var(--var-button-primary-hover-background-color);
  border-color: var(--var-button-primary-hover-border-color);
}

.btn-primary.disabled,
.btn-primary:disabled,
.btn-primary[disabled]:hover,
.btn-primary[disabled]:focus {
  background-color: var(--var-button-primary-background-color);
  border-color: var(--var-button-primary-border-color);
  color: var(--var-button-primary-color);
}

.btn-light.focus,
.btn-light:focus {
  box-shadow: none;
}

.addressSearch,
.createIsaTransfer,
.chooseFile {
  background-color: var(--var-secondary-color);
  color: #f7f6f2;
  border-color: var(--var-secondary-color);
  text-decoration: none !important;
}

.addressSearch:hover,
.addressSearch:not(:disabled):not(.disabled):active,
.createIsaTransfer:hover,
.createIsaTransfer:not(:disabled):not(.disabled):active,
.chooseFile:hover,
.chooseFile:not(:disabled):not(.disabled):active {
  background-color: var(--var-secondary-color);
  color: #c1beba;
  border-color: var(--var-secondary-color);
}

.addressSearch:focus,
.createIsaTransfer:focus,
.chooseFile:focus {
  background-color: var(--var-secondary-color);
  color: #c1beba;
  border-color: var(--var-secondary-color);
}

.addEntity:focus,
.btn-default:focus,
.payLater:focus,
.btn-default.focus,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .focus.yes-no-label,
.form-horizontal .form-group.form-group-yes-no .radio .focus.yes-no-label,
.focus.payLater {
  background-color: var(--var-secondary-color);
  color: #c1beba;
  border-color: var(--var-secondary-color);
}

.addressSearch:not(:disabled):not(.disabled):active:focus,
.createIsaTransfer:not(:disabled):not(.disabled):active:focus,
.chooseFile:not(:disabled):not(.disabled):active:focus {
  box-shadow: none;
}

.btn-primary.focus,
.btn-primary:focus {
  box-shadow: none;
}

.btn-link,
.btn-link:hover,
.btn-link:focus,
.btn-link:not(:disabled):not(.disabled):active {
  color: var(--var-primary-color);
  text-decoration-color: var(--var-primary-color) !important;
}

/* Font sizes */
h1,
.h1 {
  font-size: var(--var-font-size-h1);
  font-weight: var(--var-font-weight-title);
}

.summarySection h1 {
  font-size: var(--var-font-size-h2);
  font-weight: var(--var-font-weight-title);
  color: var(--var-secondary-color);
}

.summarySection h2 {
  color: var(--var-secondary-color);
}

.summarySection .summarySubSection h3,
.summarySection .summarySubSection legend {
  font-size: var(--var-font-size-h3);
  font-weight: var(--var-font-weight-title);
  color: var(--var-secondary-color);
}

.radio label,
.checkbox label {
  font-weight: var(--var-font-weight-base);
}

.bold-text {
  font-weight: var(--var-font-weight-bold);
}

.editLinks .fieldValue {
  font-size: var(--var-font-size-base);
}

/* Alerts */
.alert-danger,
#resumeSavedApplication .errors {
  background-color: var(--var-error-alert-background-color);
  color: var(--var-error-alert-color);
  border-color: var(--var-error-alert-border-color);
}

.alert-info,
.pageInfo,
.addressInfo {
  background-color: var(--var-information-alert-background-color);
  color: var(--var-information-alert-color);
  border-color: var(--var-information-alert-border-color);
}

/* Legend */
legend {
  border-bottom: var(--var-legend-border-bottom-width) solid
    var(--var-legend-border-bottom-color);
}

.panel .nav-tabs,
.side-navigation > .sst__navDesc .nav-tabs {
  background: var(--var-page-background-color);
}

/* Footer */
html {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#pagecontent,
#headerContentWrapper,
#container {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

#customFooter {
  background: var(--var-footer-background-color);
  color: var(--var-footer-text-color);
  padding: var(--var-footer-padding);
}

#customFooter a {
  color: var(--var-footer-text-color);
}

#customFooter .col-md-3,
#customFooter .row {
  padding: 0;
  margin: 0;
}

#customerFooter .footer-text {
  font-size: var(--var-footer-text-font-size);
}

#customFooter .copyright {
  margin: 16px 0;
}

#customFooter p {
  font-weight: 400;
  line-height: 24px;
}

.external-link {
  font-size: 25px;
  padding-left: 5px;
  vertical-align: top;
}

/* Document Upload */

.doc-type-heading,
.doc-type-heading:focus-within {
  background-color: var(--var-side-navigation-background-color);
}

.doc-type-title a {
  color: var(--var-side-navigation-color);
}

/* Custom */
@media only screen and (max-width: 768px) {
  #customFooter {
    padding-left: 0;
  }
}

.btn:active,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .yes-no-label:active,
.form-horizontal .form-group.form-group-yes-no .radio .yes-no-label:active,
.payLater:active,
.paymentProceed:active,
.createIsaTransfer:active,
.btn.active,
.form-horizontal
  .form-group.form-group-yes-no
  .radio
  input[type="radio"]:checked
  ~ .active.yes-no-label,
.form-horizontal .form-group.form-group-yes-no .radio .active.yes-no-label,
.active.payLater,
.active.paymentProceed,
.active.createIsaTransfer {
  outline: 0;
  background-image: none;
  -webkit-box-shadow: none;
  box-shadow: none;
}

#branding {
  margin-left: 14px;
}

#citizenships #addRow,
#citizenships #removeRow {
  display: none;
}

.duet-date__cell {
  padding: 1px;
}

.form-horizontal .form-group.form-group-yes-no .radio .yes-no-label:active {
  box-shadow: none;
  -webkit-box-shadow: none;
}

#hamburgerBar .panel-title a:hover,
#hamburgerBar .panel-title a:focus {
  color: var(--var-navigation-color);
}

/* Custom Icons */

.alert::before,
.pageInfo::before,
.addressInfo::before,
#resumeSavedApplication .errors::before {
  color: var(--var-secondary-color);
}

.alert.alert-danger::before,
.alert-danger.pageInfo::before,
.alert-danger.addressInfo::before,
#resumeSavedApplication .errors::before {
  color: var(--var-error-color);
}

#confirm .errors {
  background-color: var(--var-error-alert-background-color);
  color: var(--var-error-alert-color);
  border: 1px solid var(--var-error-alert-border-color);
  font-weight: var(--var-font-weight-title);
  font-size: var(--var-font-size-smaller);
  padding: 15px;
  border-radius: 4px;
}

/* Tables */
#isaTransferRequestList,
#entitiesList,
#signatoriesList,
#productsList {
  padding-left: 5px;
  padding-right: 5px;
}

#isaTransferRequestList .sst__header,
#entitiesList .sst__header,
#signatoriesList .sst__header,
#productsList .sst__header {
  background-color: transparent;
  color: #79756f;
  border-bottom: none;
}

#isaTransferRequestList .sst__row.sst__even,
#entitiesList .sst__row.sst__even,
#signatoriesList .sst__row.sst__even,
#productsList .sst__row.sst__even {
  background: #e6e4df;
}

#isaTransferRequestList .sst__row.sst__odd,
#entitiesList .sst__row.sst__odd,
#signatoriesList .sst__row.sst__odd,
#productsList .sst__row.sst__odd {
  background: #f7f6f2;
}

#productsList .btn-primary,
#productsList .btn-primary:hover {
  text-decoration: none;
}

/* Custom */

.form-horizontal .form-group input[type="radio"]:checked::after,
.form-horizontal .form-group .radio input[type="radio"]:checked::after,
.form-horizontal .form-group .radio-inline input[type="radio"]:checked::after {
  border-color: var(--var-secondary-color);
}

.form-horizontal .form-group input[type="radio"]::before,
.form-horizontal .form-group .radio input[type="radio"]::before,
.form-horizontal .form-group .radio-inline input[type="radio"]::before {
  background-color: var(--var-secondary-color);
}

/* Remove cancel button from confirmation screen */

#confirm #cancelLink,
#internalIndex_cancel {
  display: none;
}

/* Hide add/remove buttons for additional tax residencies */

#taxResidencyOtherCountryId .actions.transparent,
#taxResidencyOtherCountryId .taxResidency {
  display: none;
}

.form-control:focus,
.duet-date__input:focus,
.bootstrap-select .btn.dropdown-toggle.btn-light:focus {
  color: var(--var-text-color);
}

/* GR8-230: Hide information box in customer support page */
#customerSupportDetails .pageInfo {
  display: none;
}

/* GR8-451: Adjust company search hover off background colour */
#companySearchFields .ui-autocomplete .ui-menu-item div.ui-state-active {
  background: var(--var-select-dropdown-hover-background-color);
  color: var(--var-select-dropdown-active-color);
}

/* GR8-476: Fix BFA IAO small screen dropdown not the same width as the button */
@media (max-width: 767px) {
  .header {
    text-align: center;
    padding: 27px 0px 27px 0px;
  }
  .header #branding {
    margin-left: 0px;
  }
}

#main_content_apply .dropdown-toggle {
  height: inherit;
}

#main_content_apply .dropdown-menu.show {
  width: 100%;
}

/* GR8-477: Fix BFA small screen progress bar colour */
.step-wizard #hamburgerBar a.sst__navLink {
  color: var(--var-navigation-color);
}

.step-wizard #hamburgerBar .sst__navItem.sst__expanded a,
.step-wizard #hamburgerBar .sst__selected a.sst__navLink {
  color: var(--var-text-color);
}

/* GR8-479: Fix BFA small screen calendar text labels */
.duet-date__mobile {
  width: 100%;
  margin-left: 0;
}

.duet-date__mobile + .duet-date__header .duet-date__prev,
.duet-date__mobile + .duet-date__header .duet-date__next {
  height: 32px;
  width: 32px;
}

/* GR8-532: Fix BFA datepicker select options not visible on Windows */
.duet-date__select option {
  color: var(--var-datepicker-date-color);
}

/* GR8-756: Fix Edit button alignment on mobile view */
@media (max-width: 767px) {
  .summarySubSection h3 {
    display: flex;
    justify-content: space-between;
  }
  .summarySubSection .editLinks {
    order: 2;
    width: 60px;
  }

  .summarySubSection .editLinks .fieldValue {
    width: 60px;
  }
}

/* GR8-1681: Hide regular deposit frequency and payment date fields */
#mainProductRegular #sst__formField_mainProduct\.deposit_depositFrequency,
#mainProductRegular #mainProductRegularPaymentDateDiv {
  display: none;
}

#mainProductRegularDepositSubSection.summarySubSection #confDepositFreq,
#mainProductRegularDepositSubSection.summarySubSection #confDateOfMonthlyPayment {
  display: none;
}