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

  /* Main */
  --scb-blue: #0473ea;
  --scb-blue-10: #0473ea10;
  --scb-blue-dark: #0b56a8;
  --scb-blue-darker: #0c3a66;
  --scb-blue-semi: #e7f1fd;
  --scb-blue-light: #7bb6f5;
  --scb-blue-lighter: #c3defa;

  --scb-green: #38d200;
  --scb-green-10: #38d20010;
  --scb-green-dark: #238500;
  --scb-green-darker: #1b6600;
  --scb-green-darkest: #0b2900;
  --scb-green-light: #92e773;
  --scb-green-lighter: #cdf4bf;
  --scb-green-lightest: #ebfae5;

  --scb-gray-black: #212121;
  --scb-gray: #525355;
  --scb-gray-90: #52535590;
  --scb-gray-70: #52535570;
  --scb-gray-50: #52535550;
  --scb-gray-40: #52535540;
  --scb-gray-20: #52535520;
  --scb-gray-medium: #666666;
  --scb-gray-medium-50: #66666650;
  --scb-gray-light: #e5e5e5;
  --scb-gray-lightest: #f7f7f7;
  --scb-white: #ffff;

  --scb-red: #d50000;
  --scb-red-10: #d5000010;
  --scb-orange: #ef6923;
  --scb-orange-10: #ef692310;

  --scb-primary: var(--scb-blue);
  --scb-primary-dark: var(--scb-blue-dark);
  --scb-primary-darker: var(--scb-blue-darker);
  --scb-primary-light: var(--scb-blue-light);
  --scb-primary-lighter: var(--scb-blue-lighter);
  --scb-primary-lightest: var(--scb-blue-10);

  --scb-secondary: var(--scb-green);
  --scb-secondary-dark: var(--scb-green-dark);
  --scb-secondary-darker: var(--scb-green-darker);
  --scb-secondary-light: var(--scb-green-light);
  --scb-secondary-lighter: var(--scb-green-lighter);
  --scb-secondary-lightest: var(--scb-green-lightest);

  --scb-error: var(--scb-red);
  --scb-error-10: var(--scb-red-10);
  --scb-warning: var(--scb-orange);
  --scb-warning-10: var(--scb-orange-10);
  --scb-info: var(--scb-blue);
  --scb-info-10: var(--scb-blue-10);
  --scb-success: var(--scb-green);
  --scb-success-10: var(--scb-green-10);

  --scb-font: var(--scb-gray);
  /* extracted from demica theme */
  --scb-placeholder-font: var(--scb-gray-90);
  --scb-border: var(--scb-gray);
  --scb-layout-border: var(--scb-gray-light);
  --scb-input-border-radius: 8px;

  --scb-disabled-font: var(--scb-gray-light);
  --scb-disabled-placeholder-font: var(--scb-placeholder-font);
  --scb-disabled-border: var(--scb-gray-light);
  --scb-disabled-background: var(--scb-gray-lightest);

  /* ---- @deprecated - used in the end components */
  --trf-color-primary: var(--scb-primary);
  --trf-color-light-primary: var(--scb-blue);
  --trf-color-dark-primary: var(--scb-blue-dark);
  --trf-color-hover-primary: var(--scb-primary);
  --trf-color-active-primary: var(--scb-blue-dark);
  /* ---- @deprecated end */

  --trf-color-white: var(--scb-white);
  --trf-color-black: var(--scb-gray-black);

  --trf-background-color: var(--scb-gray-lightest);
  --trf-font-color: var(--scb-gray);
  --ngp-font-color: var(--trf-font-color);
  /*******************************/

  /* Data visualisation */
  --visualisation-color-1: #0e61ca;
  --visualisation-color-2: #086788;
  --visualisation-color-3: #00d1ff;
  --visualisation-color-4: #99f3ea;
  --visualisation-color-5: #00e394;
  --visualisation-color-6: #13a092;
  --visualisation-color-7: #147165;
  --visualisation-color-8: #095296;
  --visualisation-color-9: #6d61fa;
  --visualisation-color-10: #6aa6f5;
  --visualisation-color-11: #00ecde;
  --visualisation-color-12: #c5ceff;
  /* TODO confirm */
  --visualisation-color-13: #54f29d;
  --visualisation-color-14: #57e2e5;
  --visualisation-color-15: #bee277;

  /**********
      **** Fonts
      *****/
  --trf-font-family-regular: "SCProsperSansRegular";
  --trf-font-family-semi-bold: "SCProsperSansMedium";
  --trf-font-family-bold: "SCProsperSansBold";

  --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);
  /*******************************/

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

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

  --trf-timeline-date-color: var(--scb-gray);
  --trf-timeline-date-border: 1px solid var(--scb-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(--scb-gray);
  --trf-timeline-event-icon-color: var(--scb-white);
  --trf-timeline-event-icon-background-color: var(--scb-white);
  --trf-timeline-event-title-font: var(--trf-font-family-bold);
  --trf-timeline-event-title-color: var(--scb-gray);
  --trf-timeline-event-title-padding: var(--trf-section-padding);
  --trf-timeline-event-table-border: 1px solid var(--scb-gray-medium);
  --trf-timeline-event-table-padding: 0;
  --trf-timeline-event-container-border: 1px solid var(--scb-gray-light);

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

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

  --trf-control-border: #ddd;

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

  --trf-section-header-color: var(--scb-font);
  --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: 100px;
  --trf-header-logo-height: 90px;
  --trf-header-logo-align: left;
  --trf-header-icon-width: 40px;
  --trf-header-icon-height: 36px;

  --trf-header-background-color: var(--scb-white);
  --trf-header-font-color: var(--scb-gray);
  --trf-header-dropdown-header-font-color: var(--scb-gray-medium-50);
  --trf-header-dropdown-header-color: var(--scb-gray-medium-50);
  --trf-header-dropdown-box-shadow-color: var(--scb-gray-medium-50);
  --trf-header-toggle-button-color: var(--scb-blue);
  --trf-header-chevron-icon-color: var(--scb-blue);
  --trf-header-dropdown-border-color: var(--scb-gray-light);
  --trf-header-signout-icon-color: var(--scb-blue);
  --trf-header-dropdown-header-text-transform: none;
  --trf-header-dropdown-active-element-color: var(--scb-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(--scb-secondary);
  --trf-header-alert-status-watch-list: var(--scb-orange);
  --trf-header-alert-status-at-risk: var(--scb-red);
  --trf-header-alert-missing-files: var(--scb-blue);

  /* Menu Aside */
  --trf-sidebar-width: 245px;
  --trf-sidebar-collapse-width: 75px;
  --trf-menu-aside-padding: 90px;
  --trf-menu-aside-bg: var(--scb-white);
  --trf-menu-aside-border: 2px solid var(--scb-gray-light);
  --trf-menu-aside-section-title-color: var(--scb-green);
  --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: initial;
  --trf-menu-aside-section-border: 1px solid var(--scb-gray-light);
  --trf-menu-aside-item-color: var(--scb-gray);
  --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(--scb-blue);
  --trf-menu-aside-item-active-border: var(--trf-menu-aside-item-border-width) solid var(--scb-blue);

  /* Buttons */
  --ngp-btn-color: var(--scb-gray-black);
  --ngp-btn-bg: var(--scb-gray-light);
  --ngp-btn-border-color: transparent;
  --ngp-btn-hover-bg: var(--scb-gray-medium-50);
  --ngp-btn-active-bg: var(--scb-gray);
  --ngp-btn-focus-bg: var(--scb-blue);

  --ngp-btn-primary-color: var(--scb-white);
  --ngp-btn-primary-bg: var(--scb-primary);
  --ngp-btn-primary-border-color: transparent;
  --ngp-btn-primary-hover-bg: var(--scb-primary-dark);
  --ngp-btn-primary-active-bg: var(--scb-primary-darker);

  --ngp-btn-secondary-color: var(--scb-primary);
  --ngp-btn-secondary-bg: var(--scb-white);
  --ngp-btn-secondary-border-color: var(--scb-primary);
  --ngp-btn-secondary-hover-bg: var(--scb-primary-lighter);
  --ngp-btn-secondary-active-bg: var(--scb-primary-light);

  --ngp-btn-tertiary-color: var(--scb-primary);
  --ngp-btn-tertiary-bg: var(--scb-white);
  --ngp-btn-tertiary-border-color: var(--scb-primary);
  --ngp-btn-tertiary-hover-bg: var(--scb-primary-lighter);
  --ngp-btn-tertiary-active-bg: var(--scb-primary-light);

  --ngp-btn-inactive-color: var(--scb-gray-70);
  --ngp-btn-inactive-bg: var(--scb-gray-20);
  --ngp-btn-inactive-border-color: transparent;

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

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

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

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

  --trf-table-list-action-icon-color: var(--scb-gray);
  --trf-table-list-action-icon-size: 1.5em;
  --trf-table-list-collapse-icon-color: var(--scb-blue);

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

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

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

  --trf-table-list-third-row-bg: var(--scb-gray-lightest);
  --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(--scb-blue);
  --trf-table-list-link-font: var(--trf-font-family-bold);
  --trf-table-list-contact-prefix-color: var(--scb-blue);

  /* Modal */
  --trf-modal-backdrop-color: var(--scb-white);
  --trf-modal-backdrop-opacity: 0.75;
  --trf-modal-bg: var(--scb-white);
  --trf-modal-border-radius: 0;
  --trf-modal-border: rgba(0, 0, 0, 0.2);
  --trf-modal-close-icon-color: var(--scb-gray-medium-50);
  --trf-modal-close-icon-font-size: 0.9rem;
  --trf-modal-control-divider: var(--scb-layout-border);
  --trf-modal-header-color: var(--scb-blue);
  --trf-modal-header-font-size: 1rem;
  --trf-modal-icon-color: #21298a;
  --trf-modal-section-bg: var(--scb-white);
  --trf-modal-section-border: var(--scb-layout-border);
  --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(--scb-white);
  --trf-slidein-action-item-border: none;
  --trf-slidein-action-item-color: var(--scb-font);
  --trf-slidein-action-item-font-size: 1.5rem;
  --trf-slidein-action-item-hoover-bg: var(--scb-blue);
  --trf-slidein-action-item-hoover-color: var(--scb-white);
  --trf-slidein-action-item-inner-border-color: transparent;
  --trf-slidein-action-item-size: 40px;
  --trf-slidein-bg: var(--scb-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(--scb-layout-border);
  --trf-slidein-header-color: var(--scb-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(--scb-layout-border);

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

  /* Inline alert */
  --trf-alert-success: var(--scb-success);
  --trf-alert-success-border: var(--scb-success);
  --trf-alert-success-bg: rgba(var(--scb-success), 0.1);

  --trf-alert-info: var(--scb-info);
  --trf-alert-info-border: var(--scb-info);
  --trf-alert-info-bg: var(--scb-info-10);

  --trf-alert-warning: var(--scb-warning);
  --trf-alert-warning-border: var(--scb-warning);
  --trf-alert-warning-bg: rgba(var(--scb-warning), 0.1);

  --trf-alert-error: var(--scb-gray);
  --trf-alert-error-border: var(--scb-error);
  --trf-alert-error-bg: rgba(var(--scb-error), 0.1);

  /* Statuses */
  /* just guessing - to confirm */
  --trf-status-waiting-for-approval: var(--scb-orange);
  --trf-status-rejected: var(--scb-red);
  --trf-status-queued: #8a6d3b;
  --trf-status-processing: var(--scb-blue);
  --trf-status-failed: var(--scb-red);
  --trf-status-complete: var(--scb-green-dark);
  --trf-status-new: var(--scb-blue-light);
  --trf-status-rolled-back: var(--scb-blue-darker);

  /* 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: var(--scb-warning-10);
  --ngp-context-notification-warning-border-color: var(--scb-warning);
  --ngp-context-notification-warning-icon-color: var(--scb-warning);
  --ngp-context-notification-warning-font-color: var(--scb-gray);

  --ngp-context-notification-error-bg: var(--scb-error-10);
  --ngp-context-notification-error-border-color: var(--scb-error);
  --ngp-context-notification-error-icon-color: var(--scb-error);
  --ngp-context-notification-error-font-color: var(--scb-gray);

  --ngp-context-notification-info-bg: var(--scb-info-10);
  --ngp-context-notification-info-border-color: var(--scb-info);
  --ngp-context-notification-info-icon-color: var(--scb-info);
  --ngp-context-notification-info-font-color: var(--scb-gray);

  /* 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(--scb-warning);
  --ngp-inline-notification-msg-color: var(--scb-error);
  --ngp-inline-notification-msg-warning-color: var(--scb-warning);
  --ngp-inline-notification-msg-margin-top: 0.15em;
  --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(--scb-primary);
  --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(--scb-font);
  --trf-form-inline-button-top-margin: 1.5rem;

  --trf-input-font-size: 0.9rem;
  --trf-input-color: var(--scb-gray);
  --trf-input-icon-color: var(--scb-gray-90);
  --trf-input-border: 1px solid var(--scb-border);
  --trf-input-border-radius: var(--scb-input-border-radius);
  --trf-input-placeholder-color: var(--scb-placeholder-font);

  --trf-input-invalid-border: 1px solid var(--scb-error);
  --trf-input-invalid-border-focus: 1px solid var(--scb-error);
  --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 var(--scb-error);
  --trf-input-invalid-border-bg: transparent;

  --trf-input-disabled-border-color: var(--scb-disabled-border);
  --trf-input-disabled-bg-color: var(--scb-disabled-background);
  --trf-input-disabled-border: 1px solid var(--scb-disabled-border);
  --trf-input-disabled-bg: var(--scb-disabled-background);
  --trf-input-disabled-color: var(--scb-disabled-font);
  --trf-input-disabled-placeholder-color: var(--scb-disabled-placeholder-font);

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

  --trf-input-group-color: var(--scb-gray-medium);
  --trf-input-group-bg: var(--scb-gray-light);
  --trf-input-group-border-color: var(--scb-border);
  --trf-input-group-invalid-bg: var(--scb-gray-light);
  --trf-input-group-invalid-border-color: var(--scb-border);
  --trf-input-group-disabled-border-color: var(--scb-disabled-border);
  --trf-input-group-disabled-bg: var(--scb-disabled-background);

  --trf-date-picker-icon-color: var(--scb-blue);
  --trf-date-picker-icon-bg: transparent;
  --trf-date-picker-icon-border-color: var(--scb-border);
  --trf-date-piceker-icon-invalid-bg: transparent;
  --trf-date-picker-icon-border-invalid-color: var(--scb-error);
  --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(--scb-font);

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

  /* Date picker calendar widget */
  --trf-date-picker-font-color: var(--trf-font-color);
  --trf-date-picker-hoover-bg: var(--scb-gray-light);
  --trf-date-picker-active-bg: var(--scb-gray-light);
  --trf-date-picker-selected-bg: var(--scb-blue);
  --trf-date-picker-border-radius: var(--scb-input-border-radius);
  --trf-date-picker-select-border: solid 1px var(--scb-gray-light);
  --trf-date-picker-select-bg: var(--scb-white);
  --trf-date-picker-header-bg: var(--scb-gray-lightest);
  --trf-date-picker-chevron-color: var(--scb-primary);
  --trf-date-picker-header-bottom-border: none;
  --trf-date-picker-row-item-bottom-border: transparent;
  --trf-date-picker-weekday-color: var(--scb-primary);
  --trf-date-picker-weekdays-bg: var(--scb-gray-lightest);
  --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(--scb-gray-light);
  --trf-date-picker-navigation-margin: 0;

  /* Tables */
  --trf-table-header-padding: 10px 10px;
  --trf-table-header-dark-color: var(--scb-gray);
  --trf-table-header-bg-color: var(--scb-white);
  --trf-table-header-divider: none;
  --trf-table-header-border-bottom: 1px solid var(--scb-gray-light);
  --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(--scb-gray-lightest);

  --trf-table-row-divider: 1px solid var(--scb-gray-light);
  --trf-table-row-bg: var(--scb-gray-lightest);
  --trf-table-hover-bg: var(--scb-gray-light);
  --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(--scb-gray-medium-50);
  --trf-action-icon-hover-color: var(--trf-color-primary);
  --trf-action-icon-processed-color: var(--scb-secondary);

  /* 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: background-color 0.3s ease-in-out;
  --ngp-tabs-inactive-invalid-bg: var(--scb-error);

  --ngp-tabs-primary-border-bottom: 1px solid var(--scb-primary-lightest);
  --ngp-tab-primary-container-padding: 10px 0;
  --ngp-tab-primary-font: var(--trf-font-family-semi-bold);
  --ngp-tab-primary-bg: var(--scb-primary-lightest);
  --ngp-tab-primary-color: var(--scb-font);
  --ngp-tab-primary-border: none;
  --ngp-tab-primary-border-radius: 0;
  --ngp-tab-primary-text-transform: none;
  --ngp-tab-primary-after-bottom: -2px;
  --ngp-tab-primary-active-bg: var(--scb-white);
  --ngp-tab-primary-active-color: var(--scb-primary-dark);
  --ngp-tab-primary-active-border-style: none;
  --ngp-tab-primary-active-border-left: 0;
  --ngp-tab-primary-active-border-top: 0;
  --ngp-tab-primary-active-border-right: 0;
  --ngp-tab-primary-active-before-content: "";
  --ngp-tab-primary-active-before-top: 0;
  --ngp-tab-primary-active-before-right: 0;
  --ngp-tab-primary-active-before-bottom: auto;
  --ngp-tab-primary-active-before-left: 0;
  --ngp-tab-primary-active-before-height: 3px;
  --ngp-tab-primary-active-before-color: var(--scb-primary);
  --ngp-tab-primary-stripe-hover: var(--scb-primary);

  --ngp-tabs-secondary-border-bottom: 1px solid var(--scb-primary-lightest);
  --ngp-tab-secondary-container-padding: 10px 0;
  --ngp-tab-secondary-font: var(--trf-font-family-semi-bold);
  --ngp-tab-secondary-bg: var(--scb-primary-lightest);
  --ngp-tab-secondary-color: var(--scb-font);
  --ngp-tab-secondary-border: none;
  --ngp-tab-secondary-border-radius: 0;
  --ngp-tab-secondary-text-transform: none;
  --ngp-tab-secondary-after-bottom: -2px;
  --ngp-tab-secondary-active-bg: var(--scb-white);
  --ngp-tab-secondary-active-color: var(--scb-primary-dark);
  --ngp-tab-secondary-active-border-style: none;
  --ngp-tab-secondary-active-border-left: 0;
  --ngp-tab-secondary-active-border-top: 0;
  --ngp-tab-secondary-active-border-right: 0;
  --ngp-tab-secondary-active-before-content: "";
  --ngp-tab-secondary-active-before-top: 0;
  --ngp-tab-secondary-active-before-right: 0;
  --ngp-tab-secondary-active-before-bottom: auto;
  --ngp-tab-secondary-active-before-left: 0;
  --ngp-tab-secondary-active-before-height: 3px;
  --ngp-tab-secondary-active-before-color: var(--scb-primary);
  --ngp-tab-secondary-stripe-hover: var(--scb-primary);

  --ngp-tab-pills-btn-bg: transparent;
  --ngp-tab-pills-btn-padding: 4px 8px;
  --ngp-tab-pills-btn-color: var(--scb-font);
  --ngp-tab-pills-btn-border: 1px solid var(--scb-border);
  --ngp-tab-pills-btn-hover-bg: var(--scb-white);
  --ngp-tab-pills-btn-hover-color: var(--scb-gray-black);
  --ngp-tab-pills-btn-hover-border: 1px solid var(--scb-border);
  --ngp-tab-pills-btn-pressed-bg: var(--scb-white);
  --ngp-tab-pills-btn-pressed-color: var(--scb-gray-black);
  --ngp-tab-pills-btn-pressed-border: 1px solid var(--scb-border);
  --ngp-tab-pills-active-btn-bg: var(--scb-blue);
  --ngp-tab-pills-active-btn-color: var(--scb-white);
  --ngp-tab-pills-active-btn-border: 1px solid var(--scb-blue);

  /* Tooltip */
  --ngp-tooltip-bg: var(--scb-gray-medium);
  --ngp-tooltip-color: var(--scb-white);
  --ngp-tooltip-text-color: var(--scb-gray);
  --ngp-tooltip-text-bg: var(--scb-white);
  --ngp-tooltip-border: 1px solid var(--scb-gray-medium-50);
  --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(--scb-white);
  --ngp-notification-success-icon-color: transparent;
  --ngp-notification-success-bg: var(--scb-success);
  --ngp-notification-success-hover-bg: var(--scb-success);

  --ngp-notification-warning: var(--scb-white);
  --ngp-notification-warning-icon-color: transparent;
  --ngp-notification-warning-bg: var(--scb-warning);
  --ngp-notification-warning-hover-bg: var(--scb-warning);

  --ngp-notification-error: var(--scb-white);
  --ngp-notification-error-icon-color: transparent;
  --ngp-notification-error-bg: var(--scb-error);
  --ngp-notification-error-hover-bg: var(--scb-error);

  /* Alert - copied from base */
  --faulty-border-color: #843534;
  --faulty-background-color: #ce8483;
  --faulty-font-color: var(--scb-gray-black);
  --faulty-icon-color: #843534;

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

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

  /* Icons */
  --trf-status-icon-success-color: var(--scb-success);
  --trf-status-icon-warning-color: var(--scb-warning);
  --trf-status-icon-error-color: var(--scb-error);
  --trf-status-icon-info-color: var(--scb-info);
  --trf-status-icon-font-size: 1.5rem;
  --trf-sort-indicator-icon-color: var(--scb-blue);
  --trf-table-icon-size: 1.2rem;

  /* Accordion */
  --trf-accordion-header-btn-bg: var(--scb-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(--scb-white);
  --trf-helper-border: var(--scb-gray-medium-50);
  --trf-helper-arrow: var(--scb-gray-medium-50);

  /* Funding */
  --trf-funding-structure-graph-hover-color: var(--scb-blue-dark);
  --trf-funding-structure-border-radius: 5px;
  --trf-funding-structure-instrument-empty-color: var(--scb-secondary);
  --trf-funding-structure-instrument-error-border: 2px solid var(--scb-error);
  --trf-funding-structure-instrument-alpha-level: 0.3;
  --trf-funding-structure-funder-box-shadow: 1px 1px 2px 0 var(--scb-gray-medium-50);
  --trf-funding-structure-funder-border: 0;
  --trf-funding-structure-icon-size: 1rem;

  /* Dashboard search forms */
  --trf-search-form-border: 1px solid var(--scb-layout-border);
  --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 */
  /* copied from base */
  --trf-chart-axis-gray: #858585;

  /* ng-select */
  --trf-multiselect-label-padding: 2px 0;
  --trf-multiselect-label-border: var(--scb-primary);
  --trf-multiselect-label-separator: var(--scb-primary);
  --trf-multiselect-label-background: var(--scb-primary-lightest);
  --trf-multiselect-label-color: var(--scb-font);

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

  /* Logos */
  /*noinspection CssUnknownTarget*/

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

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

  /* SVG sprite */

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

  /* Checkbox */
  --ngp-checkbox-frame-color: var(--scb-primary);
  --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(--scb-primary);

  --ngp-checkbox-indeterminate-color: var(--scb-primary);
  --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(--scb-gray-lightest);
  --ngp-radio-frame-border-color: var(--scb-primary);
  --ngp-radio-check-color: var(--scb-primary);

  --ngp-radio-disabled-bg: var(--scb-gray-medium);
  --ngp-radio-disabled-frame-border-color: var(--scb-gray-medium);
  --ngp-radio-disabled-check-color: var(--scb-gray-medium);

  /* Programme modelling */
  --trf-pm-configured-color: var(--scb-secondary);
  --trf-pm-configured-text-color: var(--scb-white);
  --trf-pm-action-color: var(--scb-gray);

  --trf-pm-file-format-border-radius: 30;
  --trf-pm-file-format-border-color: var(--scb-primary);
  --trf-pm-file-format-border-width: 1.5;
  --trf-pm-file-format-text-color: var(--scb-gray);

  --trf-pm-filter-border-color: var(--scb-primary);
  --trf-pm-filter-border-width: 1.5;
  --trf-pm-filter-hoover-bg-color: var(--scb-primary);
  --trf-pm-filter-hoover-text-color: var(--scb-white);
  --trf-pm-filter-set-text-color: var(--scb-gray);
  --trf-pm-filter-set-bg-color: var(--scb-gray-light);
  --trf-pm-filter-set-border-color: var(--scb-gray-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(--scb-font);
  --trf-pm-programme-configured-border-color: var(--scb-gray-light);
  --trf-pm-programme-partially-configured-color: var(--scb-gray-light);
  --trf-pm-programme-partially-configured-border-color: var(--scb-gray-light);
  --trf-pm-programme-partially-configured-border-width: 1.5;
  --trf-pm-programme-unconfigured-border-dash: 5, 5;
  --trf-pm-programme-unconfigured-text-color: var(--scb-gray-medium-50);
  --trf-pm-programme-unconfigured-text-style: italic;
  --trf-pm-programme-icon-bg: var(--scb-white);
  --trf-pm-programme-icon-black: var(--scb-gray-black);
  --trf-pm-programme-icon-blue: var(--scb-blue);
  --trf-pm-programme-icon-red: var(--scb-red);
  --trf-pm-programme-icon-purple: var(--scb-blue-dark);
  --trf-pm-programme-icon-green: var(--scb-green);

  --trf-pm-selection: var(--scb-primary);
  --trf-pm-highlight: var(--scb-primary-light);

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

  /* Funding waterfall */
  --trf-waterfall-asset-base-bg: var(--scb-blue);
  --trf-waterfall-asset-base-border-color: var(--scb-blue);
  --trf-waterfall-asset-base-border-width: 1.5;
  --trf-waterfall-asset-base-text-size: 20px;

  --trf-waterfall-spv-bg: var(--scb-blue);
  --trf-waterfall-spv-border-color: var(--scb-blue);
  --trf-waterfall-spv-border-width: 1.5;
  --trf-waterfall-spv-text-weight: 900;
  --trf-waterfall-spv-text-size: 22px;

  --trf-waterfall-expense-bg: var(--scb-white);
  --trf-waterfall-expense-border-color: var(--scb-blue);
  --trf-waterfall-expense-border-width: 1.5;
  --trf-waterfall-expense-text-size: 14px;

  --trf-waterfall-residual-bg: var(--scb-gray-medium);
  --trf-waterfall-residual-border-color: var(--scb-blue);
  --trf-waterfall-residual-border-width: 1.5;
  --trf-waterfall-residual-text-size: 14px;

  --trf-waterfall-arrow-style: default;
  --trf-waterfall-arrow-color: #000;

  /* Dropdown */
  --trf-dropdown-arrow-color: var(--scb-gray-medium-50);
  --trf-dropdown-border-color: var(--scb-border);
  --trf-dropdown-border-radius: var(--scb-input-border-radius);
  --trf-dropdown-border: 1px solid var(--scb-border);
  --trf-dropdown-color: var(--scb-gray);
  --trf-dropdown-font-family: var(--trf-font-family-regular);
  --trf-dropdown-font-size: 0.9rem;
  --trf-dropdown-highlight-item-bg: var(--scb-primary-lighter);
  --trf-dropdown-highlight-item-color: var(--scb-gray);
  --trf-dropdown-placholder-color: var(--scb-placeholder-font);
  --trf-dropdown-selected-item-border: none;
  --trf-dropdown-selected-item-bg: var(--scb-primary);
  --trf-dropdown-selected-item-color: var(--scb-white);
  --trf-dropdown-selected-item-font: var(--trf-font-family-bold);
  --trf-dropdown-disabled-color: var(--scb-gray-medium-50);
  --trf-dropdown-disabled-option-color: var(--scb-gray-90);
  --trf-dropdown-disabled-label-color: var(--scb-gray-medium);
  --trf-dropdown-disabled-border-color: var(--scb-disabled-border);
  --trf-dropdown-disabled-bg: var(--scb-disabled-background);
  --trf-dropdown-disabled-placeholder-color: var(--trf-input-disabled-placeholder-color);

  /* Pagination*/
  --trf-pagination-bg-color: var(--scb-gray-light);
  --trf-pagination-border-radius: 2px;
  --trf-pagination-border: none;
  --trf-pagination-btn-padding: 1px 6px;
  --trf-pagination-chevron-color: var(--scb-blue);
  --trf-pagination-chevron-font-size: 0.6rem;
  --trf-pagination-chevron-margin: 5px;
  --trf-pagination-color: var(--scb-gray-black);
  --trf-pagination-font-size: 0.8rem;
  --trf-pagination-inactive-bg: var(--scb-blue);
  --trf-pagination-inactive-color: var(--scb-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(--scb-secondary);
  /* Charts - line chart */
  --trf-chart-axis-display: auto;
  --trf-chart-axis-text-color: var(--scb-gray-medium);
  --trf-chart-grid-lines-color: var(--scb-gray-light);
  --trf-chart-grid-text-color: var(--scb-gray-medium);
  --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(--scb-white);
  --trf-chart-pie-legend-entry-top-margin: 10;
  --trf-chart-pie-legend-icon-radius: 10;
  --trf-chart-tick-axis-color: var(--scb-gray-medium);
  --trf-chart-tick-axis-font-size: 0.7rem;
  --trf-chart-tooltip-color: var(--scb-gray);
  --trf-chart-tooltip-font-size: 0.9rem;
  --trf-chart-tooltip-border: 1px solid var(--scb-gray-medium);
  --trf-chart-tooltip-header-font-size: 1rem;
  --trf-chart-tooltip-header-bg: var(--scb-gray-light);
  --trf-chart-tooltip-header-color: var(--scb-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(--scb-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(--scb-gray-medium);
  --trf-top-debtors-component-color: var(--scb-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(--scb-primary);
  --trf-modal-loader-color: var(--scb-white);
  --trf-modal-loader-border: none;

  /* Inline loader */
  --trf-inline-loader-with-status-color: var(--scb-blue);
  --trf-inline-loader-with-status-success-color: var(--scb-success);
  --trf-inline-loader-with-status-sub-text: var(--scb-gray-medium-50);

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

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

  /* Session timeout */
  --trf-session-timeout-page-color: var(--scb-gray);
  --trf-session-timeout-button-display: none;

  --ngp-pricing-set-slidein-dnd-container-width: 1000px;
  --ngp-pricing-set-slidein-dnd-columns-width: 1fr 1fr 0.9fr 1.4fr 1.8fr 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(--scb-gray-light);
  --ngp-drag-and-drop-item-border-color-active: var(--scb-blue-dark);
  --ngp-drag-and-drop-item-background-color: var(--scb-white);
  --ngp-drag-and-drop-item-background-color-active: var(--scb-blue-semi);
  --ngp-drag-and-drop-item-handler-color: #b2b2b2;
  --ngp-drag-and-drop-zone-border-radius: 2px;
  --ngp-drag-and-drop-zone-border-color: var(--scb-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(--ngp-tab-primary-bg);
  --ngp-drag-and-drop-nested-item-border-color: var(--scb-gray-light);
  --ngp-drag-and-drop-nested-font-size: var(--scb-gray-light);
  --ngp-drag-and-drop-nested-row-gap: 5px;
  --ngp-drag-and-drop-nested-line-height: 25px;
  --ngp-drag-and-drop-nested-line-color: #ccc;
  --ngp-drag-and-drop-nested-font-size: 0.93rem;
  --ngp-drag-and-drop-nested-border-radius: 2px;
  --ngp-drag-and-drop-nested-padding: var(--ngp-pricing-set-slidein-dnd-padding);
  --ngp-drag-and-drop-nested-dragged-border-color: var(--scb-blue-dark);
  --ngp-drag-and-drop-nested-dragged-backgroud-color: var(--scb-blue-semi);

  /* Privacy policy vars */
  --ngp-privacy-bg: var(--scb-gray-lightest);
  --ngp-privacy-main-bg: var(--scb-white);
}