:root {
  --main-brand-container-width: 1400px;
  --main-brand-font: "Poppins", sans-serif;
  --main-brand-font-size: 18px;

  /* Main brand green */
  --main-brand-color: #1F4D3A;
  --main-brand-secondary-color: #1F4D3A;

  --main-brand-body-color: #212529;
  --main-brand-tabs-banner-heading-color: #fff;
  --main-brand-tabs-sections-heading-color: var(--main-brand-body-color);
  --main-brand-icons-color: var(--main-brand-color);

  --main-brand-button-border-radius: 0.375rem;
  --main-brand-button-padding: .375rem .75rem;
  --main-brand-button-font-weight: 600;

  --main-brand-portal-button-bg: #fff;
  --main-brand-portal-border-color: 1px solid var(--main-brand-body-color);
  --main-brand-portal-button-color: var(--main-brand-body-color);
  --main-brand-portal-button-hover-bg: var(--main-brand-color);
  --main-brand-portal-border-hover-color: 1px solid var(--main-brand-color);
  --main-brand-portal-button-hover-color: #fff;

  --main-brand-primary-button-bg: var(--main-brand-secondary-color);
  --main-brand-primary-border-color: 1px solid var(--main-brand-secondary-color);
  --main-brand-primary-button-color: #fff;
  --main-brand-primary-button-hover-bg: #961253;
  --main-brand-primary-border-hover-color: 1px solid #961253;
  --main-brand-primary-button-hover-color: #fff;

  --main-brand-secondary-button-bg: #fff;
  --main-brand-secondary-border-color: 1px solid var(--main-brand-color);
  --main-brand-secondary-button-color: var(--main-brand-color);
  --main-brand-secondary-button-hover-bg: var(--main-brand-color);
  --main-brand-secondary-border-hover-color: 1px solid var(--main-brand-color);
  --main-brand-secondary-button-hover-color: #fff;

  --main-brand-border-radius: 6px;
  --main-brand-sm-border-radius: 6px;

  --main-brand-input-border-radius: 0.375rem;
  --main-brand-input-label-font-weight: 400;
  --main-brand-input-border-color: 1px solid #EAECF0;
  --main-brand-input-padding: .375rem .75rem;
  --main-brand-input-label-color: var(--main-brand-body-color);
  --main-brand-input-bg-color: #fff;
  --main-brand-readOnly-input-bg-color: #cccccc;
  --main-brand-readOnly-input-border: 1px solid #cccccc;

  --main-brand-file-upload-border-color: 2px dashed #EAECF0;

  --main-brand-hero-bg: var(--main-brand-color);
  --main-brand-hero-color: #fff;

  --main-brand-card-border: 1px solid #EAECF0;
  --main-brand-card-bg-color: #ffff;
  --main-brand-card-border-radius: 6px;

  --main-brand-table-header-bg: #F2F1F1;
  --main-brand-table-header-color: var(--main-brand-body-color);

  --main-brand-notification-bg-color: #F4F7FB;
  --main-brand-notification-border-color: 1px solid #D2DDEE;
  --main-brand-notification-color: var(--main-brand-body-color);

  --main-brand-web-form-sec-bg-color: #fff;
  --main-brand-web-form-sec-border: 1px solid #EAECF0;
  --main-brand-web-form-sec-border-radius: 6px;

  --main-brand-web-form-header-bg-color: #fff;
  --main-brand-web-form-header-color: var(--main-brand-body-color);
  --main-brand-web-form-header-border-radius: 0px 0px 0px 0px;

  --main-brand-web-form-badge-bg-color: var(--main-brand-secondary-color);
  --main-brand-web-form-badge-color: #000000;

  --main-brand-event-view-bg-color: #F2F1F1;

  --main-brand-grid-img-border-radius: 0px;
  --main-brand-grid-img-label: 0px 0px 12px 0px;

  --main-brand-half-divider-bg-color: var(--main-brand-color);

  --main-brand-collapse-icon-bg-color: #fff;
  --main-brand-collapse-icon-color: var(--main-brand-body-color);
  --main-brand-collapse-icon-border-radius: 0;
  --main-brand-collapse-icon-padding: 5px;
  --main-brand-collapse-icon-hover-bg-color: #F2F1F1;
  --main-brand-collapse-icon-hover-color: var(--main-brand-body-color);
  --main-brand-collapse-icon-hover-border-radius: 5px;
  --main-brand-collapse-icon-hover-padding: 5px;

  --main-brand-sidemenu-border-radius: 0;
  --main-brand-sidemenu-padding: 12px 20px;
  --main-brand-sidemenu-color: var(--main-brand-body-color);
  --main-brand-sidemenu-active-bg-color: #F3F9FA;
  --main-brand-sidemenu-active-color: var(--main-brand-body-color);
  --main-brand-sidemenu-active-border-width: 0px 3px;
  --main-brand-sidemenu-active-border-color: solid var(--main-brand-color);
  --main-brand-sidemenu-active-font-weight: 600;

  --main-brand-dashboard-link-color: var(--main-brand-color);
  --main-brand-dashboard-link-hover-color: var(--main-brand-color);

  --main-brand-portal-link-color: var(--main-brand-body-color);
  --main-brand-portal-link-hover-color: var(--main-brand-color);

  --main-brand-primary-link-color: var(--main-brand-color);
  --main-brand-primary-link-hover-color: var(--main-brand-secondary-color);

  --main-brand-secondary-link-color: var(--main-brand-secondary-color);
  --main-brand-secondary-link-hover-color: var(--main-brand-color);

  --main-brand-delete-dialog-model-header-bg: var(--main-brand-color);
  --main-brand-delete-dialog-model-header-color: #fff;

  /*
   * Illustration-specific colours.
   * These have deliberately not been changed.
   */
  --main-brand-thanks-svg-could-bg: #5578BA;
  --main-brand-thanks-svg-plane-mid-cloud-bg: #ccedfa;
  --main-brand-thanks-svg-plane-outline: #003e7e;
  --main-brand-thanks-svg-plane-triangle-outlined-solid: #003e7e;
  --main-brand-thanks-svg-plane-triangle-dark: #281D52;

  --main-brand-payment-summary-card-bg: #fff5f7;
  --main-brand-payment-summary-card-border: 1px solid var(--main-brand-color);

  --main-brand-directory-hero-content-bg: rgb(0 0 0 / 50%);
  --main-brand-directory-hero-content-Heading-color: #ffffff;
  --main-brand-directory-hero-content-subtext-color: #ffffff;

  --main-brand-directory-badge1-bg: var(--main-brand-color);
  --main-brand-directory-badge1-color: #ffffff;
  --main-brand-directory-badge2-bg: var(--main-brand-body-color);
  --main-brand-directory-badge2-color: #ffffff;

  --main-brand-card-preview-intro-color: var(--main-brand-body-color);

  --main-brand-dashboard-hero-banner-bg: var(--main-brand-color);
  --main-brand-dashboard-hero-banner-color: #fff;
  --main-brand-dashboard-hero-banner-padding: 0;
  --main-brand-dashboard-hero-banner-border-radius: 0px;
  --main-brand-dashboard-hero-banner-font-weight: 600;
  --main-brand-dashboard-hero-banner-font-size: 28px;

  --main-brand-dashboard-hero-bg: var(--main-brand-color);
  --main-brand-dashboard-hero-color: #fff;
  --main-brand-dashboard-hero-padding: 0.5rem;
  --main-brand-dashboard-hero-border-radius: 4px;
  --main-brand-dashboard-hero-font-weight: 700;
  --main-brand-dashboard-hero-font-size: 20px;
  --main-brand-dashboard-hero-card-bg: rgba(255, 255, 255, 0.95);

  --main-brand-side-menu-bg-color: #fff;

  --main-brand-toggle-icon-bg-color: var(--main-brand-color);
  --main-brand-toggle-icon-color: #fff;

  --main-brand-body-bg-color: #d3cdcd1f;

  --main-brand-listCard-bg-color: #F9FAFB;
  --main-brand-listCard-border-radius: 12px;
  --main-brand-listCard-border: 1px solid #EAECF0;

  --main-brand-page-banner-heading-font-size: 36px;

  --main-brand-field-row-gap: 8px;
  --main-brand-field-margin-bottom: 1rem;
  --main-brand-field-help-color: #667085;
  --main-brand-field-placeholder-color: #98A2B3;

  --main-brand-field-focus-border-color: 1px solid var(--main-brand-color);

  /*
   * Matching focus shadow for #1F4D3A.
   * RGB equivalent: 31, 77, 58.
   */
  --main-brand-field-focus-shadow: 0 0 0 0.2rem rgba(31, 77, 58, 0.15);

  --main-brand-field-error-color: #B42318;
  --main-brand-field-error-bg-color: #FFF5F5;
  --main-brand-field-error-border-color: 1px solid #FDA29B;

  --main-brand-field-success-color: #027A48;
  --main-brand-field-success-border-color: 1px solid #6CE9A6;

  --main-brand-checkbox-accent-color: var(--main-brand-color);
  --main-brand-radio-accent-color: var(--main-brand-color);
  --main-brand-select-arrow-color: var(--main-brand-body-color);
}


/* Field compatibility layer for demo-oomi-web1.co.uk portal styling */
.section-form-row,
.v2-form-row,
.saas-field-row {
  margin-bottom: var(--main-brand-field-margin-bottom);
  color: var(--main-brand-body-color);
  font-family: var(--main-brand-font);
}

.section-form-label,
.v2-form-label,
.saas-field-label {
  color: var(--main-brand-input-label-color);
  font-weight: var(--main-brand-input-label-font-weight);
  margin-bottom: var(--main-brand-field-row-gap);
}

.section-input-field,
.v2-input,
.saas-field-control input,
.saas-field-control select,
.saas-field-control textarea,
input.section-input-field,
select.section-input-field,
textarea.section-input-field {
  width: 100%;
  color: var(--main-brand-body-color);
  background-color: var(--main-brand-input-bg-color);
  border: var(--main-brand-input-border-color);
  border-radius: var(--main-brand-input-border-radius);
  padding: var(--main-brand-input-padding);
  font-family: var(--main-brand-font);
  font-size: 1rem;
  line-height: 1.5;
  transition:
    border-color .15s ease-in-out,
    box-shadow .15s ease-in-out;
}

.section-input-field::placeholder,
.v2-input::placeholder,
.saas-field-control input::placeholder,
.saas-field-control textarea::placeholder {
  color: var(--main-brand-field-placeholder-color);
}

.section-input-field:focus,
.v2-input:focus,
.saas-field-control input:focus,
.saas-field-control select:focus,
.saas-field-control textarea:focus {
  outline: 0;
  border: var(--main-brand-field-focus-border-color);
  box-shadow: var(--main-brand-field-focus-shadow);
}

.section-input-field[readonly],
.section-input-field:disabled,
.v2-input[readonly],
.v2-input:disabled,
.saas-field-control input[readonly],
.saas-field-control input:disabled,
.saas-field-control select:disabled,
.saas-field-control textarea[readonly],
.saas-field-control textarea:disabled {
  background-color: var(--main-brand-readOnly-input-bg-color);
  border: var(--main-brand-readOnly-input-border);
  opacity: 1;
}

input[type="checkbox"],
input[type="radio"] {
  accent-color: var(--main-brand-color);
}

.validation,
.field-validation-error,
.text-danger,
.saas-validation-error {
  color: var(--main-brand-field-error-color);
  font-size: .875rem;
  margin-top: .25rem;
}

.input-validation-error,
.section-input-field.error,
.saas-field-control .error {
  border: var(--main-brand-field-error-border-color);
  background-color: var(--main-brand-field-error-bg-color);
}

.v2-datepicker-wrap,
.saas-field-control {
  position: relative;
}

.v2-datepicker-wrap .fa-calendar-days,
.saas-field-control .fa-calendar-days {
  color: var(--main-brand-icons-color);
}

.v2-asterisk,
.required,
.mandatory {
  color: var(--main-brand-field-error-color);
}