:root {
  /*
    This file is part of the public API and requires documentation updates.
    @see "https://support.demica.com/knowledge/x/WvN2C"
  */

  /* Main */
  --_demica-blue: #483494;
  --_demica-light-blue: #6e50ff;
  --_demica-dark-blue: #140d48;

  --_demica-black: #000;

  --_demica-white: #fff;
  --_demica-pearl: #f7f7f7;
  --_demica-light-gray: #f6f7fa;
  --_demica-gray: #f1f1f1;
  --_demica-semi-gray: #f9f8ff;
  --_demica-mid-gray: #d9d9d9;
  --_demica-light-dark-gray: #ccc;
  --_demica-dark-gray: #9b9b9b;
  --_demica-purple: #9d00ff;
  --_demica-red: #d0021b;
  --_demica-dark-red: #a94442;
  --_demica-orange: #ff8100;
  --_demica-yellow: #ccbd49;
  --_demica-dark-orange: #b95e02;
  --_demica-mint: #60c3ad;
  --_demica-steel-blue: #2f71b2;
  --_demica-light-green: #5ee487;
  --_demica-green: green;
  --_demica-graphite: #4a4a4a;
  /*******************************/

  /* Data visualisation */
  --visualisation-color-1: #6e50ff;
  --visualisation-color-2: #3071b3;
  --visualisation-color-3: #6071b3;
  --visualisation-color-4: #9b9b9b;
  --visualisation-color-5: #322830;
  --visualisation-color-6: #004e64;
  --visualisation-color-7: #e08cad;
  --visualisation-color-8: #575266;
  --visualisation-color-9: #00a6d0;
  --visualisation-color-10: #6a7fdc;
  --visualisation-color-11: #7ba8ae;
  --visualisation-color-12: #6f7dac;
  --visualisation-color-13: #54f29d;
  --visualisation-color-14: #57e2e5;
  --visualisation-color-15: #bee277;

  /**********
      **** Fonts
      *****/
  --trf-font-family-regular: "SourceSansProRegular", "sans-serif";
  --trf-font-family-semi-bold: "SourceSansProSemiBold", "sans-serif";
  --trf-font-family-bold: "SourceSansProBold", "sans-serif";

  --ngp-font-family-regular: var(--trf-font-family-regular);
  --ngp-font-family-semi-bold: var(--trf-font-family-semi-bold);
  --ngp-font-family-bold: var(--trf-font-family-bold);

  /*********
      headings: 45px, 36px, 29px, 23px, 19px
      caption: 13px, 12px, 10px
      ***********/
  --trf-font-size-base: 14px;

  --trf-font-size-h1: 1.57rem;
  --trf-font-size-h2: 1.43rem;
  --trf-font-size-h3: 1.29rem;
  --trf-font-size-h4: 1.14rem;
  --trf-font-size-h5: 1.07rem;
  --trf-font-size-body: 1rem;
  --trf-font-size-sm: 0.87rem;
  --trf-font-size-xs: 0.8rem;
  --trf-font-size-xxs: 0.67rem;

  --ngp-font-size-base: var(--trf-font-size-base);
  --ngp-font-size-h1: var(--trf-font-size-h1);
  --ngp-font-size-h2: var(--trf-font-size-h2);
  --ngp-font-size-h3: var(--trf-font-size-h3);
  --ngp-font-size-h4: var(--trf-font-size-h4);
  --ngp-font-size-h5: var(--trf-font-size-h5);
  --ngp-font-size-body: var(--trf-font-size-body);
  --ngp-font-size-sm: var(--trf-font-size-sm);
  --ngp-font-size-lg: var(--trf-font-size-h5);
  --ngp-font-size-xs: var(--trf-font-size-xs);
  --ngp-font-size-xxs: var(--trf-font-size-xxs);
  /*******************************/

  --trf-color-primary: var(--_demica-blue);
  --trf-color-light-primary: var(--_demica-light-blue);
  --trf-color-dark-primary: var(--_demica-dark-blue);
  --trf-color-hover-primary: var(--_demica-blue);
  --trf-color-active-primary: var(--_demica-dark-blue);

  --trf-color-white: var(--_demica-white);
  --trf-color-black: var(--_demica-black);

  --trf-background-color: var(--_demica-pearl);
  --trf-font-color: var(--_demica-graphite);

  --ngp-font-color: var(--trf-font-color);

  /* Core */
  --trf-main-content-padding: 10px;

  /* Funding statuses */
  --trf-funding-status-newly-presented: var(--_demica-steel-blue);
  --trf-funding-status-ineligible: var(--_demica-dark-red);
  --trf-funding-status-eligible: var(--_demica-yellow);
  --trf-funding-status-funded: var(--_demica-mint);

  /* Timelines */
  --trf-timeline-sidebar-space: 40px;

  --trf-timeline-date-color: var(--_demica-graphite);
  --trf-timeline-date-border: 1px solid var(--_demica-white);
  --trf-timeline-date-margin: 10px 0;
  --trf-timeline-date-font-size: var(--ngp-font-size-lg);
  --trf-timeline-date-order: 0;
  --trf-timeline-date-font-weight: bold;
  --trf-timeline-date-padding: 0;
  --trf-timeline-date-icon-not-collapsed: rotate(180deg) translateY(-1px);
  --trf-timeline-date-icon-collapsed: rotate(90deg) translateY(-1px);

  --trf-timeline-event-shift: 25px;
  --trf-timeline-event-margin: 0 0 0 8px;
  --trf-timeline-event-margin-rtl: 0 8px 0 0;
  --trf-timeline-event-icon-position: absolute;
  --trf-timeline-event-icon-left: -12px;
  --trf-timeline-event-icon-top: 9px;
  --trf-timeline-event-icon-padding: 5px 0;
  --trf-timeline-event-icon-bg: var(--_demica-dark-gray);
  --trf-timeline-event-icon-color: var(--_demica-white);
  --trf-timeline-event-icon-background-color: var(--_demica-white);
  --trf-timeline-event-title-font: var(--trf-font-family-bold);
  --trf-timeline-event-title-color: var(--_demica-graphite);
  --trf-timeline-event-title-padding: var(--trf-section-padding);
  --trf-timeline-event-table-border: 1px solid var(--_demica-gray);
  --trf-timeline-event-table-padding: 0;
  --trf-timeline-event-container-border: 1px solid var(--_demica-gray);

  --trf-timeline-system-status-outstanding: var(--_demica-mint);
  --trf-timeline-system-status-delinquent: var(--_demica-orange);
  --trf-timeline-system-status-defaulted: var(--_demica-red);
  --trf-timeline-system-status-written-off: var(--_demica-light-blue);
  --trf-timeline-system-status-matured: var(--_demica-steel-blue);
  --trf-timeline-system-status-closed: #6e7dab;

  --trf-timeline-system-status-outstanding-icon: var(--_demica-mint);
  --trf-timeline-system-status-delinquent-icon: var(--_demica-orange);
  --trf-timeline-system-status-defaulted-icon: var(--_demica-red);
  --trf-timeline-system-status-written-off-icon: var(--_demica-light-blue);
  --trf-timeline-system-status-matured-icon: var(--_demica-steel-blue);
  --trf-timeline-system-status-closed-icon: #6e7dab;

  --trf-control-border: #ddd;

  /* Sections */
  --trf-section-bg: var(--_demica-white);
  --trf-section-margin: 10px;
  --trf-section-padding: 10px;
  --trf-section-nested-padding: 10px;
  --trf-section-border: 1px solid var(--_demica-gray);
  --trf-section-tabs-nested-header-padding: 10px;
  --trf-section-tabs-nested-header-border: 1px solid var(--_demica-gray);
  --trf-section-tabs-nested-header-margin: 0.5rem;

  --trf-section-header-color: var(--_demica-light-blue);
  --trf-section-header-border: var(--trf-section-border);
  --trf-section-header-font: var(--trf-font-family-regular);
  --trf-section-header-font-size: var(--trf-font-size-base);

  --trf-section-buttons-border: var(--trf-section-border);

  /* Header */
  --trf-header-logo-width: 152px;
  --trf-header-logo-height: 70px;
  --trf-header-logo-align: center;
  --trf-header-icon-width: 30px;
  --trf-header-icon-height: 30px;

  --trf-header-background-color: var(--_demica-white);
  --trf-header-font-color: var(--_demica-graphite);
  --trf-header-dropdown-header-font-color: var(--_demica-dark-gray);
  --trf-header-dropdown-header-color: var(--_demica-dark-gray);
  --trf-header-dropdown-box-shadow-color: var(--_demica-dark-gray);
  --trf-header-toggle-button-color: var(--_demica-light-blue);
  --trf-header-chevron-icon-color: var(--_demica-light-blue);
  --trf-header-dropdown-border-color: var(--_demica-light-gray);
  --trf-header-signout-icon-color: var(--_demica-light-blue);
  --trf-header-dropdown-header-text-transform: none;
  --trf-header-dropdown-active-element-color: var(--_demica-light-blue);
  --trf-header-dropdown-active-element-border-color: transparent;
  --trf-header-dropdown-active-element-border-width: 0;
  --trf-header-profile-dropdown-text-transform: none;
  --trf-header-profile-dropdown-username-font-weight: 700;

  /* Header Alerts */
  --trf-header-alert-status-performing: var(--_demica-mint);
  --trf-header-alert-status-watch-list: var(--_demica-orange);
  --trf-header-alert-status-at-risk: var(--_demica-red);
  --trf-header-alert-missing-files: var(--_demica-light-blue);

  /* Menu Aside */
  --trf-sidebar-width: 245px;
  --trf-sidebar-collapse-width: 75px;
  --trf-menu-aside-padding: 90px;
  --trf-menu-aside-bg: var(--_demica-white);
  --trf-menu-aside-border: 2px solid var(--_demica-gray);
  --trf-menu-aside-section-title-color: var(--_demica-graphite);
  --trf-menu-aside-section-title-font: var(--trf-font-family-regular);
  --trf-menu-aside-section-title-size: 0.8rem;
  --trf-menu-aside-section-title-spacing: 2px;
  --trf-menu-aside-section-title-transform: uppercase;
  --trf-menu-aside-section-border: 1px solid var(--_demica-gray);
  --trf-menu-aside-item-color: var(--_demica-graphite);
  --trf-menu-aside-item-font: var(--trf-font-family-bold);
  --trf-menu-aside-item-icon-size: 1.2rem;
  --trf-menu-aside-item-border-width: 4px;
  --trf-menu-aside-item-active-color: var(--_demica-light-blue);
  --trf-menu-aside-item-active-border: var(--trf-menu-aside-item-border-width) solid
    var(--_demica-light-blue);

  /* Buttons */
  --ngp-btn-color: var(--_demica-black);
  --ngp-btn-bg: var(--_demica-mid-gray);
  --ngp-btn-border-color: transparent;
  --ngp-btn-hover-bg: var(--_demica-dark-gray);
  --ngp-btn-active-bg: var(--_demica-graphite);
  --ngp-btn-focus-bg: var(--_demica-light-blue);

  --ngp-btn-primary-color: var(--_demica-white);
  --ngp-btn-primary-bg: var(--_demica-light-blue);
  --ngp-btn-primary-border-color: transparent;
  --ngp-btn-primary-hover-bg: var(--_demica-blue);
  --ngp-btn-primary-active-bg: var(--_demica-dark-blue);

  --ngp-btn-secondary-color: var(--_demica-light-blue);
  --ngp-btn-secondary-bg: var(--_demica-white);
  --ngp-btn-secondary-border-color: var(--_demica-light-blue);
  --ngp-btn-secondary-hover-bg: var(--_demica-gray);
  --ngp-btn-secondary-active-bg: var(--_demica-gray);

  --ngp-btn-tertiary-color: var(--_demica-light-blue);
  --ngp-btn-tertiary-bg: var(--_demica-white);
  --ngp-btn-tertiary-border-color: var(--_demica-light-blue);
  --ngp-btn-tertiary-hover-bg: var(--_demica-gray);
  --ngp-btn-tertiary-active-bg: var(--_demica-gray);

  --ngp-btn-inactive-color: var(--_demica-dark-gray);
  --ngp-btn-inactive-bg: var(--_demica-light-gray);
  --ngp-btn-inactive-border-color: transparent;

  --ngp-btn-border-radius: 2px;

  --ngp-btn-text-transform: none;

  /* Table List (Clients / Transactions / Funders) */
  --trf-table-list-text-color: var(--_demica-graphite);

  --trf-table-list-header-bg: var(--_demica-white);
  --trf-table-list-header-color: var(--_demica-graphite);
  --trf-table-list-header-border-x: 1px solid var(--_demica-gray);
  --trf-table-list-header-border-y: none;
  --trf-table-list-order-icon-color: var(--_demica-light-blue);

  --trf-table-list-action-icon-color: var(--_demica-graphite);
  --trf-table-list-action-icon-size: 1.5em;
  --trf-table-list-collapse-icon-color: var(--_demica-light-blue);

  --trf-table-list-font-size: 0.87rem;

  --trf-table-list-first-row-bg: var(--_demica-white);
  --trf-table-list-first-row-hover-bg: var(--trf-table-hover-bg);

  --trf-table-list-second-row-bg: var(--_demica-gray);
  --trf-table-list-second-row-hover-bg: var(--trf-table-hover-bg);

  --trf-table-list-third-row-bg: #f9f9f9;
  --trf-table-list-third-row-hover-bg: var(--trf-table-hover-bg);
  --trf-table-list-third-row-hover-border: none;

  --trf-table-list-cell-border-x: 1px solid #ddd;
  --trf-table-list-cell-border-y: 1px solid transparent;
  --trf-table-list-border-hover-x: var(--trf-table-list-cell-border-x);
  --trf-table-list-border-hover-y: var(--trf-table-list-cell-border-y);

  --trf-table-list-nested-row-gap-bg: var(--trf-table-list-first-row-bg);
  --trf-table-list-nested-row-gap-border-x: none;
  --trf-table-list-nested-row-gap-border-y: none;

  --trf-table-list-link-color: var(--_demica-light-blue);
  --trf-table-list-link-font: var(--trf-font-family-bold);
  --trf-table-list-contact-prefix-color: var(--_demica-light-blue);

  /* Modal */
  --trf-modal-backdrop-color: var(--_demica-white);
  --trf-modal-backdrop-opacity: 0.75;
  --trf-modal-bg: var(--_demica-white);
  --trf-modal-border-radius: 0;
  --trf-modal-border: rgba(0, 0, 0, 0.2);
  --trf-modal-close-icon-color: var(--_demica-dark-gray);
  --trf-modal-close-icon-font-size: 0.9rem;
  --trf-modal-control-divider: var(--_demica-gray);
  --trf-modal-header-color: var(--_demica-light-blue);
  --trf-modal-header-font-size: 1rem;
  --trf-modal-icon-color: #21298a;
  --trf-modal-section-bg: var(--_demica-white);
  --trf-modal-section-border: var(--_demica-gray);
  --trf-modal-shadow-blur: 15px;
  --trf-modal-shadow-color: rgba(0, 0, 0, 0.15);
  --trf-modal-shadow-y-offset: 4px;
  --trf-modal-body-padding: 0;

  /* Slide-in  */
  --trf-slidein-action-item-bg: var(--_demica-white);
  --trf-slidein-action-item-border: none;
  --trf-slidein-action-item-color: var(--_demica-dark-gray);
  --trf-slidein-action-item-font-size: 1.5rem;
  --trf-slidein-action-item-hoover-bg: var(--_demica-light-blue);
  --trf-slidein-action-item-hoover-color: var(--_demica-white);
  --trf-slidein-action-item-inner-border-color: transparent;
  --trf-slidein-action-item-size: 40px;
  --trf-slidein-bg: var(--_demica-white);
  --trf-slidein-border-color: transparent;
  --trf-slidein-border-width: 0;
  --trf-slidein-border: none;
  --trf-slidein-child-shift: 0;
  --trf-slidein-glass-applier-bg: rgba(155, 155, 155, 0.3);
  --trf-slidein-header-border-color: var(--_demica-gray);
  --trf-slidein-header-color: var(--_demica-light-blue);
  --trf-slidein-header-font-size: 1rem;
  --trf-slidein-header-padding: 10px;
  --trf-slidein-content-padding: 0;
  --trf-slidein-footer-padding: 10px;
  --trf-slidein-footer-border: 1px solid var(--_demica-gray);

  /* Wizard */
  --trf-wizard-bg: var(--_demica-light-gray);
  --trf-wizard-step: var(--_demica-blue);
  --trf-wizard-step-current: var(--_demica-light-blue);

  /* Inline alert */
  --trf-alert-success: #3c763d;
  --trf-alert-success-border: var(--_demica-green);
  --trf-alert-success-bg: #dff0d8;

  --trf-alert-info: #8a6d3b;
  --trf-alert-info-border: var(--_demica-orange);
  --trf-alert-info-bg: #fff8f1;

  --trf-alert-warning: var(--_demica-graphite);
  --trf-alert-warning-border: var(--_demica-orange);
  --trf-alert-warning-bg: #fff8f1;

  --trf-alert-error: var(--_demica-graphite);
  --trf-alert-error-border: var(--_demica-red);
  --trf-alert-error-bg: #ffeff1;

  /* Statuses */
  --trf-status-waiting-for-approval: #d2691e;
  --trf-status-rejected: #a94442;
  --trf-status-queued: #8a6d3b;
  --trf-status-processing: #31708f;
  --trf-status-failed: #a94442;
  --trf-status-complete: #3c763d;
  --trf-status-new: #0ff;
  --trf-status-rolled-back: #a94442;

  /* Panels */
  --panel-section-divider-margin: 30px;
  --panel-margin: 10px;
  --panel-padding: 10px;
  --panel-side-margin: 10px;

  /* Transition global options */
  --trf-transition-speed: 0.3s;
  --ngp-transition-speed: 0.3s;
  --transition-fn: ease-in-out;

  /* Context */
  --ngp-context-notification-font-size: 1rem;
  --ngp-context-notification-border-radius: 0;
  --ngp-context-notification-padding: 12px 5px;
  --ngp-context-notification-border: 1px solid;
  --ngp-context-notification-icon-display: center;
  --ngp-context-notification-icon-size: 22px;
  --ngp-context-notification-right-margin: 10px;
  --ngp-context-notification-left-margin: 10px;
  --ngp-context-notification-margin: 0 var(--ngp-context-notification-right-margin) 0
    var(--ngp-context-notification-left-margin);
  --ngp-context-notification-icon-margin-right: 8px;

  --ngp-context-notification-warning-bg: #fff8f1;
  --ngp-context-notification-warning-border-color: var(--_demica-orange);
  --ngp-context-notification-warning-icon-color: var(--_demica-orange);
  --ngp-context-notification-warning-font-color: var(--_demica-graphite);

  --ngp-context-notification-error-bg: #ffeff1;
  --ngp-context-notification-error-border-color: var(--_demica-red);
  --ngp-context-notification-error-icon-color: var(--_demica-red);
  --ngp-context-notification-error-font-color: var(--_demica-graphite);

  --ngp-context-notification-info-bg: #ebfbff;
  --ngp-context-notification-info-border-color: var(--_demica-steel-blue);
  --ngp-context-notification-info-icon-color: var(--_demica-steel-blue);
  --ngp-context-notification-info-font-color: var(--_demica-graphite);

  /* Inline notification */
  --ngp-inline-notification-msg-icon-display: block;
  --ngp-inline-notification-msg-icon-error-color: inherit;
  --ngp-inline-notification-msg-icon-margin-right: 0px;
  --ngp-inline-notification-msg-icon-warning-color: var(--_demica-orange);
  --ngp-inline-notification-msg-color: #a94442;
  --ngp-inline-notification-msg-warning-color: var(--_demica-dark-orange);
  --ngp-inline-notification-msg-margin-top: 0.1em;
  --ngp-inline-notification-font-size: 0.9rem;
  --ngp-inline-notification-error-icon: exclamation-triangle;
  --ngp-inline-notification-warning-icon: exclamation-circle;

  /* Forms */
  --trf-form-validation-msg-height: 1.2rem;
  --trf-form-label-asterisk: var(--_demica-light-blue);
  --trf-form-label-offset: 0;
  --trf-form-label-top-margin: 0;
  --trf-form-label-bottom-margin: 0;
  --trf-form-label-font-size: 0.8rem;
  --trf-form-label-disabled-color: var(--_demica-graphite);
  --trf-form-inline-button-top-margin: 1.5rem;

  --trf-input-font-size: 0.9rem;
  --trf-input-color: var(--_demica-graphite);
  --trf-input-icon-color: var(--_demica-dark-gray);
  --trf-input-border: 1px solid var(--_demica-graphite);
  --trf-input-border-radius: 2px;
  --trf-input-placeholder-color: var(--_demica-dark-gray);

  --trf-input-invalid-border: 1px solid #a94442;
  --trf-input-invalid-border-focus: 1px solid #843534;
  --trf-input-invalid-border-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  --trf-input-invalid-border-focus-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #ce8483;
  --trf-input-invalid-border-bg: transparent;

  --trf-input-disabled-border-color: var(--_demica-dark-gray);
  --trf-input-disabled-bg-color: var(--_demica-gray);
  --trf-input-disabled-border: 1px solid var(--_demica-dark-gray);
  --trf-input-disabled-bg: var(--_demica-gray);
  --trf-input-disabled-color: var(--_demica-dark-gray);
  --trf-input-disabled-placeholder-color: var(--_demica-dark-gray);

  --trf-input-warning-border: 1px solid var(--_demica-orange);
  --trf-input-warning-border-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  --trf-input-warning-border-focus: 1px solid var(--_demica-orange);
  --trf-input-warning-border-focus-box-shadow:
    inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px var(--_demica-orange);
  --trf-input-warning-bg: transparent;

  --trf-input-group-color: var(--trf-input-color);
  --trf-input-group-bg: #e9ecef;
  --trf-input-group-border-color: #ced4da;
  --trf-input-group-invalid-bg: #e9ecef;
  --trf-input-group-invalid-border-color: #ced4da;
  --trf-input-group-disabled-border-color: #e9ecef;
  --trf-input-group-disabled-bg: #e9ecef;

  --trf-date-picker-icon-color: var(--_demica-light-blue);
  --trf-date-picker-icon-bg: transparent;
  --trf-date-picker-icon-border-color: var(--_demica-graphite);
  --trf-date-piceker-icon-invalid-bg: transparent;
  --trf-date-picker-icon-border-invalid-color: #a94442;
  --trf-date-picker-inner-border-color: transparent;

  --trf-input-group-form-telephone-row-content-offset: 0;
  --trf-input-group-form-telephone-row-height: 80%;
  --trf-input-group-form-telephone-row-top: 10%;
  --trf-input-group-form-telephone-color: var(--_demica-dark-gray);

  --form-row-bottom-margin: 2px;

  /* Date picker calendar widget */

  --trf-date-picker-font-color: var(--trf-font-color);
  --trf-date-picker-hoover-bg: var(--_demica-mid-gray);
  --trf-date-picker-active-bg: var(--_demica-light-gray);
  --trf-date-picker-selected-bg: var(--_demica-light-blue);
  --trf-date-picker-border-radius: 2px;
  --trf-date-picker-select-border: solid 1px var(--_demica-mid-gray);
  --trf-date-picker-select-bg: var(--_demica-white);
  --trf-date-picker-header-bg: var(--_demica-light-gray);
  --trf-date-picker-chevron-color: var(--_demica-light-blue);
  --trf-date-picker-header-bottom-border: none;
  --trf-date-picker-row-item-bottom-border: transparent;
  --trf-date-picker-weekday-color: var(--_demica-light-blue);
  --trf-date-picker-weekdays-bg: var(--trf-background-color);
  --trf-date-picker-cell-width: 2rem;
  --trf-date-picker-cell-height: 2rem;
  --trf-date-picker-cell-font-size: 1rem;
  --trf-date-picker-calendar-padding: 0.5rem;
  --trf-date-picker-border-color: var(--_demica-light-gray);
  --trf-date-picker-navigation-margin: 0;

  /* Tables */
  --trf-table-header-padding: 10px 10px;
  --trf-table-header-dark-color: var(--_demica-graphite);
  --trf-table-header-bg-color: var(--_demica-white);
  --trf-table-header-divider: none;
  --trf-table-header-border-bottom: 1px solid var(--_demica-mid-gray);
  --trf-table-header-cell-display: inline-flex;
  --trf-table-header-cell-direction: row-reverse;
  --trf-table-header-cell-justify: space-between;
  --trf-table-sort-indicator-color: var(--trf-color-light-primary);
  --trf-table-inactive-sort-indicator-color: var(--_demica-pearl);

  --trf-table-row-divider: 1px solid var(--_demica-mid-gray);
  --trf-table-row-bg: #fafafa;
  --trf-table-hover-bg: #eaeaea;
  --trf-table-cell-hover-bg: #e3e3e3;
  --trf-table-border-hover-x: transparent;
  --trf-table-border-hover-y: transparent;

  --trf-table-cell-divider: none;
  --trf-table-cell-padding: 15px 10px;
  --trf-table-cell-actions-alignment: center;
  --trf-table-cell-actions-alignment-rtl: center;

  /* Action icons */
  --trf-action-icon-color: #333;
  --trf-action-icon-disabled-color: var(--_demica-dark-gray);
  --trf-action-icon-hover-color: var(--trf-color-primary);
  --trf-action-icon-processed-color: var(--_demica-mint);

  /* Images */
  --trf-logo-width: 100px;
  --trf-logo-height: 70px;
  --trf-client-edit-logo-width: 90px;
  --trf-client-edit-logo-height: 70px;
  --trf-client-edit-logo-height-bigger: 90px;
  --trf-client-edit-logo-height-smaller: 50px;

  /* Tabs */
  --ngp-tabs-hover-transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
  --ngp-tabs-inactive-invalid-bg: #a94442;

  --ngp-tabs-primary-border-bottom: 1px solid var(--_demica-light-blue);
  --ngp-tab-primary-container-padding: 10px;
  --ngp-tab-primary-font: var(--trf-font-family-regular);
  --ngp-tab-primary-bg: var(--_demica-white);
  --ngp-tab-primary-color: var(--_demica-dark-gray);
  --ngp-tab-primary-border: 1px solid var(--_demica-dark-gray);
  --ngp-tab-primary-border-radius: 0;
  --ngp-tab-primary-text-transform: none;
  --ngp-tab-primary-after-bottom: -1px;
  --ngp-tab-primary-active-bg: var(--_demica-white);
  --ngp-tab-primary-active-color: var(--_demica-light-blue);
  --ngp-tab-primary-active-border-style: solid;
  --ngp-tab-primary-active-border-left: 1px;
  --ngp-tab-primary-active-border-top: 1px;
  --ngp-tab-primary-active-border-right: 1px;
  --ngp-tab-primary-active-before-content: none;
  --ngp-tab-primary-active-before-top: auto;
  --ngp-tab-primary-active-before-right: auto;
  --ngp-tab-primary-active-before-bottom: auto;
  --ngp-tab-primary-active-before-left: auto;
  --ngp-tab-primary-active-before-height: 0;
  --ngp-tab-primary-active-before-color: transparent;
  --ngp-tab-primary-stripe-hover: var(--_demica-blue);

  --ngp-tabs-secondary-border-bottom: 1px solid var(--_demica-light-blue);
  --ngp-tab-secondary-container-padding: 10px;
  --ngp-tab-secondary-font: var(--trf-font-family-regular);
  --ngp-tab-secondary-bg: var(--_demica-white);
  --ngp-tab-secondary-color: var(--_demica-dark-gray);
  --ngp-tab-secondary-border: 1px solid var(--_demica-dark-gray);
  --ngp-tab-secondary-border-radius: 0;
  --ngp-tab-secondary-text-transform: none;
  --ngp-tab-secondary-after-bottom: -1px;
  --ngp-tab-secondary-active-bg: var(--_demica-white);
  --ngp-tab-secondary-active-color: var(--_demica-light-blue);
  --ngp-tab-secondary-active-border-style: solid;
  --ngp-tab-secondary-active-border-left: 1px;
  --ngp-tab-secondary-active-border-top: 1px;
  --ngp-tab-secondary-active-border-right: 1px;
  --ngp-tab-secondary-active-before-content: none;
  --ngp-tab-secondary-active-before-top: auto;
  --ngp-tab-secondary-active-before-right: auto;
  --ngp-tab-secondary-active-before-bottom: auto;
  --ngp-tab-secondary-active-before-left: auto;
  --ngp-tab-secondary-active-before-height: 0;
  --ngp-tab-secondary-active-before-color: transparent;
  --ngp-tab-secondary-stripe-hover: var(--_demica-blue);

  --ngp-tab-pills-btn-bg: transparent;
  --ngp-tab-pills-btn-padding: 2px 7px;
  --ngp-tab-pills-btn-color: var(--_demica-dark-gray);
  --ngp-tab-pills-btn-border: 1px solid var(--_demica-dark-gray);
  --ngp-tab-pills-btn-hover-bg: var(--_demica-white);
  --ngp-tab-pills-btn-hover-color: var(--_demica-black);
  --ngp-tab-pills-btn-hover-border: 1px solid var(--_demica-dark-gray);
  --ngp-tab-pills-btn-pressed-bg: var(--_demica-white);
  --ngp-tab-pills-btn-pressed-color: var(--_demica-black);
  --ngp-tab-pills-btn-pressed-border: 1px solid var(--_demica-dark-gray);
  --ngp-tab-pills-active-btn-bg: var(--_demica-light-blue);
  --ngp-tab-pills-active-btn-color: var(--_demica-white);
  --ngp-tab-pills-active-btn-border: 1px solid var(--_demica-light-blue);

  /* Tooltip */
  --ngp-tooltip-bg: var(--_demica-dark-gray);
  --ngp-tooltip-color: var(--_demica-white);
  --ngp-tooltip-text-color: var(--_demica-graphite);
  --ngp-tooltip-text-bg: var(--_demica-white);
  --ngp-tooltip-border: 1px solid var(--_demica-dark-gray);
  --ngp-tooltip-radius: 3px;
  --ngp-tooltip-padding: 3px 5px;
  --ngp-tooltip-margin: 8px;
  --ngp-tooltip-arrow-bordered-display: inline-block;
  /* use as display css properties: "none" to show solid arrow, or "inline-block" to show only arrow border */

  /* Notifications */
  --ngp-notification-toast-width: 300px;
  --ngp-notification-toast-max-width: 350px;
  --ngp-notification-content-max-width: 270px;
  --ngp-notigication-border-radius: 0.25rem;
  --ngp-notification-icon-size: 1.5rem;
  --ngp-notification-toast-padding: 10px;

  --ngp-notification-content-display: block;
  --ngp-notification-content-align-items: center;
  --ngp-notification-content-padding-side: 0;

  --ngp-notification-title-font-size: inherit;
  --ngp-notification-title-line-height: inherit;
  --ngp-notification-title-margin-side: 0;
  --ngp-notification-title-font-display: block;

  --ngp-notification-title-inline: none;
  /* Toggle with display above, to set where you want to place toaster title */

  --ngp-notification-message-line-height: 1rem;
  --ngp-notification-message-font-size: 0.9rem;

  --ngp-notification-close-btn-spacing: 0;
  --ngp-notification-close-btn-font-size: inherit;

  /* Icons unicodes can be found here: https://fontawesome.com/cheatsheet */
  --ngp-notification-display: none;
  --ngp-notification-success: var(--_demica-white);
  --ngp-notification-success-icon-color: transparent;
  --ngp-notification-success-bg: #3c763d;
  --ngp-notification-success-hover-bg: #4d984e;

  --ngp-notification-warning: var(--_demica-white);
  --ngp-notification-warning-icon-color: transparent;
  --ngp-notification-warning-bg: #c0a16b;
  --ngp-notification-warning-hover-bg: #cfb88f;

  --ngp-notification-error: var(--_demica-white);
  --ngp-notification-error-icon-color: transparent;
  --ngp-notification-error-bg: #a94442;
  --ngp-notification-error-hover-bg: #c0605e;

  /* Alert */
  --faulty-border-color: #843534;
  --faulty-background-color: #ce8483;
  --faulty-font-color: var(--_demica-black);
  --faulty-icon-color: #843534;

  --faultless-border-color: var(--_demica-mid-gray);
  --faultless-background-color: var(--_demica-white);
  --faultless-font-color: var(--_demica-mid-gray);
  --faultless-icon-color: var(--_demica-light-gray);

  /* Logo */
  --trf-client-icon-max-width: 100px;
  --trf-client-icon-max-height: 70px;

  /* Icons */
  --trf-status-icon-success-color: var(--_demica-mint);
  --trf-status-icon-warning-color: var(--_demica-orange);
  --trf-status-icon-error-color: var(--_demica-red);
  --trf-status-icon-info-color: var(--_demica-steel-blue);
  --trf-status-icon-font-size: 1.5rem;
  --trf-sort-indicator-icon-color: var(--_demica-light-blue);
  --trf-table-icon-size: 1.2rem;

  /* Accordion */
  --trf-accordion-header-btn-bg: var(--_demica-white);
  --trf-accordion-title-padding: 7px;
  --trf-accordion-title-height: 49px;
  --trf-accordion-panel-bg: var(--trf-table-row-bg);

  /* Helper */
  --trf-helper-background: var(--_demica-white);
  --trf-helper-border: var(--_demica-dark-gray);
  --trf-helper-arrow: var(--_demica-dark-gray);

  /* Dashboard search forms */
  --trf-search-form-border: 1px solid var(--_demica-gray);
  --trf-search-form-grid-gutter-2-col-width: 5px;
  --trf-search-form-grid-gutter-3-col-width: 7px;
  --trf-search-form-grid-gutter-4-col-width: 8px;
  --trf-search-form-controls-top-margin: 10px;

  /* sections-wrapper vertical row divider */
  --trf-sections-wrapper-row-non-divided-max-width: 1200px;
  --trf-sections-wrapper-row-divided-min-width: 1200px;

  /* Chart axis colors */
  --trf-chart-axis-gray: #858585;

  /* ng-select */
  --trf-multiselect-label-padding: 2px 0;
  --trf-multiselect-label-border: var(--_demica-light-blue);
  --trf-multiselect-label-separator: var(--_demica-light-blue);
  --trf-multiselect-label-background: #f2efff;
  --trf-multiselect-label-color: var(--_demica-light-blue);

  /* ng-select filters */
  --trf-filter-tag-border-radius: 2px;
  --trf-filter-button-font: var(--trf-font-family-bold);

  /* Logos */
  /*noinspection CssUnknownTarget*/

  --trf-brand-logo: "/assets/{clientAssets}/images/theme-logo.svg";
  /*noinspection CssUnknownTarget*/

  --trf-brand-icon: "/assets/{clientAssets}/images/theme-icon.svg";

  /* SVG sprite */

  /*noinspection CssUnknownTarget*/
  --trf-sprite-file: "/assets/{clientAssets}/images/theme-icon-sprite.svg";

  /* Checkbox */
  --ngp-checkbox-frame-color: var(--_demica-light-blue);
  --ngp-checkbox-frame-thickness: 3px;
  --ngp-checkbox-frame-size: 22px;
  --ngp-checkbox-frame-radius: 2px;

  --ngp-checkbox-tick-color: transparent;

  --ngp-checkbox-square-color: var(--_demica-light-blue);

  --ngp-checkbox-indeterminate-color: var(--_demica-light-blue);
  --ngp-checkbox-indeterminate-thickness: 4px;
  --ngp-checkbox-indeterminate-top: 6px;
  --ngp-checkbox-indeterminate-width: 12px;

  --ngp-checkbox-margin-between: 5px;

  /* Radio */
  --ngp-radio-size: 1.4em;
  --ngp-radio-frame-border-scale: 0.7;
  --ngp-radio-check-border-size: 3px;

  --ngp-radio-bg: var(--_demica-gray);
  --ngp-radio-frame-border-color: var(--_demica-light-blue);
  --ngp-radio-check-color: var(--_demica-light-blue);

  --ngp-radio-disabled-bg: var(--_demica-dark-gray);
  --ngp-radio-disabled-frame-border-color: var(--_demica-dark-gray);
  --ngp-radio-disabled-check-color: var(--_demica-dark-gray);

  /* Slide toggle */
  --ngp-slide-toggle-frame-checked-color: var(--_demica-light-blue);
  --ngp-slide-toggle-frame-unchecked-color: var(--_demica-dark-gray);
  --ngp-slide-toggle-frame-radius: 34px;
  --ngp-slide-toggle-frame-width: 40px;
  --ngp-slide-toggle-frame-height: 22px;

  --ngp-slide-toggle-handle-radius: 50%;
  --ngp-slide-toggle-handle-color: var(--_demica-white);
  --ngp-slide-toggle-handle-size: 15px;

  --ngp-slide-toggle-disabled-opacity: 0.6;

  /* Programme modelling */
  --trf-pm-configured-color: var(--_demica-light-green);
  --trf-pm-configured-text-color: var(--_demica-blue);
  --trf-pm-action-color: var(--_demica-blue);

  --trf-pm-file-format-border-radius: 30;
  --trf-pm-file-format-border-color: var(--_demica-light-blue);
  --trf-pm-file-format-border-width: 1.5;
  --trf-pm-file-format-text-color: var(--_demica-blue);

  --trf-pm-filter-border-color: var(--_demica-light-blue);
  --trf-pm-filter-border-width: 1.5;
  --trf-pm-filter-hoover-bg-color: var(--_demica-light-blue);
  --trf-pm-filter-hoover-text-color: var(--_demica-white);
  --trf-pm-filter-set-text-color: var(--_demica-blue);
  --trf-pm-filter-set-bg-color: var(--_demica-gray);
  --trf-pm-filter-set-border-color: var(--_demica-black);
  --trf-pm-filter-set-border-width: 0;
  --trf-pm-filter-set-size-reduction: 6;
  --trf-pm-filter-set-gap: 4;
  --trf-pm-filter-divider: none;

  --trf-pm-programme-text-color: var(--_demica-dark-blue);
  --trf-pm-programme-configured-border-color: var(--_demica-mid-gray);
  --trf-pm-programme-partially-configured-color: var(--_demica-gray);
  --trf-pm-programme-partially-configured-border-color: var(--_demica-mid-gray);
  --trf-pm-programme-partially-configured-border-width: 1.5;
  --trf-pm-programme-unconfigured-border-dash: 5, 5;
  --trf-pm-programme-unconfigured-text-color: var(--_demica-dark-gray);
  --trf-pm-programme-unconfigured-text-style: italic;
  --trf-pm-programme-icon-bg: var(--_demica-white);
  --trf-pm-programme-icon-black: var(--_demica-black);
  --trf-pm-programme-icon-blue: var(--_demica-light-blue);
  --trf-pm-programme-icon-red: var(--_demica-red);
  --trf-pm-programme-icon-purple: var(--_demica-purple);
  --trf-pm-programme-icon-green: var(--_demica-green);

  --trf-pm-selection: #1499d3;
  --trf-pm-highlight: #83aa30;

  /* States */
  --ngp-radio-buttons-focus-box-shadow: 0 0 0 2px var(--_demica-black);

  /* Dropdown */
  --trf-dropdown-arrow-color: var(--_demica-dark-gray);
  --trf-dropdown-border-color: var(--_demica-graphite);
  --trf-dropdown-border-radius: 2px;
  --trf-dropdown-border: 1px solid var(--_demica-graphite);
  --trf-dropdown-color: var(--_demica-graphite);
  --trf-dropdown-font-family: var(--trf-font-family-regular);
  --trf-dropdown-font-size: 0.9rem;
  --trf-dropdown-highlight-item-bg: rgba(110, 80, 255, 0.3);
  --trf-dropdown-highlight-item-color: var(--_demica-graphite);
  --trf-dropdown-placholder-color: var(--_demica-dark-gray);
  --trf-dropdown-selected-item-border: none;
  --trf-dropdown-selected-item-bg: rgba(110, 80, 255, 0.3);
  --trf-dropdown-selected-item-color: var(--_demica-graphite);
  --trf-dropdown-selected-item-font: var(--trf-font-family-bold);
  --trf-dropdown-disabled-color: var(--_demica-dark-gray);
  --trf-dropdown-disabled-option-color: var(--_demica-dark-gray);
  --trf-dropdown-disabled-label-color: var(--_demica-dark-gray);
  --trf-dropdown-disabled-border-color: var(--_demica-dark-gray);
  --trf-dropdown-disabled-bg: var(--_demica-gray);
  --trf-dropdown-disabled-placeholder-color: var(--trf-input-disabled-placeholder-color);

  /* Pagination*/
  --trf-pagination-bg-color: var(--_demica-gray);
  --trf-pagination-border-radius: 2px;
  --trf-pagination-border: none;
  --trf-pagination-btn-padding: 1px 6px;
  --trf-pagination-chevron-color: var(--_demica-light-blue);
  --trf-pagination-chevron-font-size: 0.6rem;
  --trf-pagination-chevron-margin: 5px;
  --trf-pagination-color: var(--_demica-black);
  --trf-pagination-font-size: 0.8rem;
  --trf-pagination-inactive-bg: var(--_demica-light-blue);
  --trf-pagination-inactive-color: var(--_demica-white);
  --trf-pagination-inactive-weight: 400;

  /* Export */
  --ngp-export-alignment: center;
  --ngp-button-margin: 0 1px;
  --ngp-export-label-color: var(--trf-color-light-primary);

  /* File status */
  --trf-status-icon-green: var(--_demica-mint);
  /* Charts - line chart */
  --trf-chart-axis-display: auto;
  --trf-chart-axis-text-color: var(--_demica-dark-gray);
  --trf-chart-grid-lines-color: var(--_demica-gray);
  --trf-chart-grid-text-color: var(--_demica-dark-gray);
  --trf-chart-legend-item-font-size: 0.8rem;
  --trf-chart-legend-item-icon-stroke-linecap: round;
  --trf-chart-legend-item-size: 10;
  --trf-chart-legend-item-text-rotate: rotate(65deg);
  --trf-chart-pie-legend-align-content: middle;
  --trf-chart-pie-legend-bg: var(--_demica-white);
  --trf-chart-pie-legend-entry-top-margin: 10;
  --trf-chart-pie-legend-icon-radius: 10;
  --trf-chart-tick-axis-color: var(--_demica-dark-gray);
  --trf-chart-tick-axis-font-size: 0.7rem;
  --trf-chart-tooltip-color: var(--_demica-graphite);
  --trf-chart-tooltip-font-size: 0.9rem;
  --trf-chart-tooltip-border: 1px solid var(--_demica-dark-gray);
  --trf-chart-tooltip-header-font-size: 1rem;
  --trf-chart-tooltip-header-bg: var(--_demica-dark-gray);
  --trf-chart-tooltip-header-color: var(--_demica-white);
  --trf-chart-tooltip-header-font-weight: 400;
  --trf-pie-chart-legend-text-margin-left: 15;
  --trf-chart-tooltip-header-padding: 0 5px;

  /* chart-last-value-component */
  --trf-chart-last-value-component-consolidate-amount-font-family: var(--trf-font-family-regular);
  --trf-chart-last-value-component-consolidate-amount-font-size: 1.7rem;
  --trf-chart-last-value-component-consolidate-amount-value-margin: 5px 0 10px;
  --trf-chart-last-value-component-original-currency-color: var(--_demica-light-blue);
  --trf-chart-last-value-component-original-currency-font-size: 0.8rem;
  --trf-chart-last-value-component-user-currency-color: var(--trf-font-color);
  --trf-chart-last-value-component-user-currency-font-size: 0.9rem;

  /* top-debtors-component */
  --trf-top-debtors-component-border-light: none;
  --trf-top-debtors-component-border-regular: 1px solid var(--_demica-gray);
  --trf-top-debtors-component-color: var(--_demica-light-blue);
  --trf-top-debtors-component-font-size: 1rem;
  --trf-top-debtors-component-head-font-family: var(--trf-font-family-regular);
  --trf-top-debtors-component-header-padding: 0 0 10px;

  /* Modal loader */
  --trf-modal-loader-outer-bg: rgba(0, 0, 0, 0.5);
  --trf-modal-loader-inner-bg: var(--_demica-blue);
  --trf-modal-loader-color: var(--_demica-white);
  --trf-modal-loader-border: none;

  /* Inline loader */
  --trf-inline-loader-with-status-color: var(--_demica-light-blue);
  --trf-inline-loader-with-status-success-color: var(--_demica-mint);
  --trf-inline-loader-with-status-sub-text: var(--_demica-dark-gray);

  /* Widgets */
  --trf-widgets-grid-gap: 2px;
  --trf-widget-bg-color: var(--_demica-white);
  --trf-widget-bg-color-hoover: var(--_demica-gray);
  --trf-widget-row-margin: 0.9rem;

  --ngp-focus-outline: auto 1px var(--_demica-black);

  /* Session timeout */
  --trf-session-timeout-page-color: var(--_demica-graphite);
  --trf-session-timeout-button-display: block;

  --ngp-pricing-set-slidein-dnd-container-width: 1000px;
  --ngp-pricing-set-slidein-dnd-columns-width: 1fr 1fr 0.7fr 1.2fr 1.5fr 120px;
  --ngp-pricing-set-reserves-slidein-dnd-columns-width: 1fr 1fr 0.7fr 1.5fr 120px;
  --ngp-pricing-set-slidein-dnd-padding: 40px;
  --ngp-pricing-set-slidein-dnd-max-level: 8;

  /* Drag & drop */
  --ngp-drag-and-drop-item-border-radius: 4px;
  --ngp-drag-and-drop-item-border-color: var(--_demica-gray);
  --ngp-drag-and-drop-item-border-color-active: var(--_demica-light-blue);
  --ngp-drag-and-drop-item-background-color: var(--_demica-semi-gray);
  --ngp-drag-and-drop-item-background-color-active: #f3f1ff;
  --ngp-drag-and-drop-item-handler-color: var(--_demica-dark-gray);
  --ngp-drag-and-drop-zone-border-radius: 2px;
  --ngp-drag-and-drop-zone-border-color: var(--_demica-light-blue);
  --ngp-drag-and-drop-zone-background-color-active: var(
    --ngp-drag-and-drop-item-background-color-active
  );

  /* Drag & drop nested */
  --ngp-drag-and-drop-nested-item-backgroud-color: var(--_demica-semi-gray);
  --ngp-drag-and-drop-nested-item-border-color: var(--_demica-gray);
  --ngp-drag-and-drop-nested-row-gap: 5px;
  --ngp-drag-and-drop-nested-line-height: 25px;
  --ngp-drag-and-drop-nested-line-color: var(--_demica-light-dark-gray);
  --ngp-drag-and-drop-nested-font-size: 0.93rem;
  --ngp-drag-and-drop-nested-border-radius: 0px;
  --ngp-drag-and-drop-nested-padding: var(--ngp-pricing-set-slidein-dnd-padding);
  --ngp-drag-and-drop-nested-dragged-border-color: var(--_demica-light-blue);
  --ngp-drag-and-drop-nested-dragged-backgroud-color: var(--_demica-semi-gray);

  /* Privacy policy vars */
  --ngp-privacy-bg: var(--_demica-light-gray);
  --ngp-privacy-main-bg: var(--_demica-white);

  /* global filters */
  --trf-global-filters-subtext-color: var(--_demica-dark-gray);
  --trf-global-filters-subtext-font-size: var(--trf-font-size-sm);
}