:root {
  /*
  * Colors.
  */
  --color-primary:        #4b4e9f;
  --color-text:           #333;
  --color-text-light:     #777777;
  --color-white:          #fff;
  --color-gray-lightest:  #f3f4f9;
  --color-gray-lighter:   #ebedef;
  --color-gray-light:     #d4d4d8;
  --color-gray:           #82828c;
  --color-gray-dark:      #777777;
  --color-gray-darker:    #545560;
  --color-gray-darkest:   #333;
  --color-black:          #000;
  --color-danger:         #ff4141;
  --color-warning:        #f28d4f;
  --color-success:        #00746b;
  --color-focus:          #ffb03e;
  --color-primary-lightest:     #f0f0f8;
  --color-primary-lighter:      #e2e4f1;
  --color-primary-light:        #d1d5e8;
  --color-primary-darker:       #2c2f70;
  --color-primary-darkest:      #1b1d47;
  --color-danger-lightest:      #fdf5f5;
  --color-danger-lighter:       #fceded;
  --color-danger-dark:          #ff2828;
  --color-danger-darker:        #ff0e0e;
  /*
   * Base.
   */
  --color-fg: var(--color-text);
  --color-bg: var(--color-white);
  --color-link: var(--color-primary);
  --color-link-hover: var(--color-primary-darker);
  --color-link-active: var(--color-primary-darkest);
  --body-bg: var(--color-primary-lightest);
  /*
   * Typography.
   */
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
  --line-height: 1.5;
  --line-height-heading: 1.3;
  --font-size-base: 0.875rem;
  --font-size-h1: 2.027rem;
  /* ~32px */
  --font-size-h2: 1.802rem;
  /* ~29px */
  --font-size-h3: 1.602rem;
  /* ~26px */
  --font-size-h4: 1.424rem;
  /* ~23px */
  --font-size-h5: 1.266rem;
  /* ~20px */
  --font-size-h6: 1.125rem;
  /* 18px */
  --font-size-s: 0.889rem;
  /* ~14px */
  --font-size-xs: 0.79rem;
  /* ~13px */
  --font-size-xxs: 0.702rem;
  /* ~11px */
  --font-size-label: var(--font-size-s);
  --font-size-description: var(--font-size-xs);
  /**
   * Spaces.
   */
  --space-xxl: 5rem;
  /* 5 * 16px       = 80px */
  --space-xl: 3rem;
  /* 3 * 16px       = 48px */
  --space-l: 1.5rem;
  /* 1.5 * 16px   = 24px */
  --space-m: 1rem;
  /* 1 * 16px       = 16px */
  --space-s: 0.75rem;
  /* 0.75 * 16px = 12px */
  --space-xs: 0.5rem;
  /* 0.5 * 16px   = 8px */
  /*
   * Common.
   */
  --speed-transition: 0.2s;
  --transition: all var(--speed-transition) ease-out;
  --base-border-radius: 4px;
  --focus-border-size: 2px;
  --outline-size: 2px;
  --layout-spacing: var(--space-xxl);
  --layout-border-radius: 8px;
  /*
   * Inputs.
   */
  --input-fg-color: var(--color-fg);
  --input-bg-color: var(--color-bg);
  --input-fg-color--description: var(--color-gray-darker);
  --input-fg-color--placeholder: var(--color-gray-dark);
  --input-border-color: var(--color-gray-dark);
  --input--hover-border-color: var(--color-text);
  --input--focus-border-color: var(--color-primary);
  --input--focus-shadow-color: rgba(0, 74, 220, 0.3);
  /* Absolute zero with opacity. */
  --input--error-color: var(--color-danger);
  --input--error-border-color: var(--color-danger);
  --input--disabled-color: rgba(84, 85, 96, 0.6);
  /* Davy's grey with 0.6 opacity. */
  --input--disabled-fg-color: var(--color-gray);
  --input--disabled-bg-color: #f2f2f3;
  /* Light gray with 0.3 opacity on white bg. */
  --input--disabled-border-color: #bababf;
  /* Old silver with 0.5 opacity on white bg. */
  --input--disabled-border-opacity: 0.5;
  --input-border-radius-size: var(--base-border-radius);
  --input-border-size: 1px;
  /* (1/16)em ~ 1px */
  --input--error-border-size: 1px;
  --input-padding-vertical: calc(var(--space-xs) - var(--input-border-size));
  --input-padding-horizontal: calc(var(--space-m) - var(--input-border-size));
  --input-font-size: var(--font-size-base);
  --input-line-height: var(--space-l);
  --input--small-padding-vertical: calc(0.26rem - var(--input-border-size));
  --input--small-padding-horizontal: calc(var(--space-s) - var(--input-border-size));
  --input--small-font-size: var(--font-size-xs);
  --input--small-line-height: var(--space-l);
  --input--extrasmall-padding-vertical: calc(0.15rem - var(--input-border-size));
  --input--extrasmall-padding-horizontal: calc(var(--space-xs) - var(--input-border-size));
  --input--extrasmall-font-size: var(--font-size-s);
  --input--extrasmall-line-height: calc(var(--space-m) + 0.2rem);
  /* Font size is too big to use 1rem for extrasmall line-height */
  --input--required-mark-size: 0.4375rem;
  /* 7px inside the form element label. */
  --input--label-spacing: 1.6875rem;
  /* 8px with the checkbox width of 19px */
  /*
   * Details.
   */
  --details-bg-color: rgba(243, 244, 249, 0.4);
  --details-border-color: rgba(216, 217, 224, 0.8);
  --details-summary-shadow-color: var(--color-focus);
  --details-summary-focus-border-size: var(--focus-border-size);
  --details-desktop-wrapper-padding-start: calc(var(--space-m) + var(--space-s) + var(--space-xs));
  --details-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  --details-border-size: 1px;
  --details-border-size-radius: var(--layout-border-radius);
  --details-accordion-border-size-radius: var(--base-border-radius);
  --details-spread-box-shadow-radius: 2px;
  --details-bg-color-transition-duration: 0.12s;
  --details-box-shadow-transition-duration: 0.2s;
  --details-transform-transition-duration: 0.12s;
  /**
   * Buttons.
   */
  --button--focus-border-color: #5a8bed;
  --button-border-radius-size: var(--base-border-radius);
  --button-fg-color: var(--color-text);
  --button-bg-color: var(--color-gray-lightest);
  --button--hover-bg-color: var(--color-primary-lighter);
  --button--active-bg-color: var(--color-primary-light);
  --button--disabled-bg-color: #ebebed;
  --button--disabled-fg-color: var(--color-gray-dark);
  --button-fg-color--primary: var(--color-white);
  --button-bg-color--primary: var(--color-primary);
  --button--hover-bg-color--primary: var(--color-primary-darker);
  --button--active-bg-color--primary: var(--color-primary-darkest);
  --button--focus-bg-color--primary: var(--color-primary);
  --button--disabled-bg-color--primary: var(--color-gray-light);
  --button--disabled-fg-color--primary: var(--color-gray);
  --button-fg-color--danger: var(--color-white);
  --button-bg-color--danger: var(--color-danger);
  --button--hover-bg-color--danger: var(--color-danger-dark);
  --button--active-bg-color--danger: var(--color-danger-darker);
  /**
   * jQuery.UI dropdown.
   */
  --jui-dropdown-fg-color: var(--color-gray-darker);
  --jui-dropdown-bg-color: var(--color-white);
  --jui-dropdown--active-fg-color: var(--color-white);
  --jui-dropdown--active-bg-color: var(--color-primary);
  --jui-dropdown-border-color: rgba(216, 217, 224, 0.8);
  /* Light gray with 0.8 opacity. */
  --jui-dropdown-shadow-color: rgba(34, 35, 48, 0.1);
  /* Text color with 0.1 opacity. */
  /**
   * Progress bar.
   */
  --progress-bar-border-size: 1px;
  --progress-bar-small-size: calc(var(--space-xs) - (2 * var(--progress-bar-border-size)));
  --progress-bar-small-size-radius: var(--space-xs);
  --progress-bar-spacing-size: var(--space-xs);
  --progress-bar-transition: width 0.5s ease-out;
  --progress-bar-label-color: var(--color-text);
  --progress-bar-description-color: var(--color-gray-darker);
  --progress-bar-description-font-size: var(--font-size-xs);
  --progress-track-border-color: var(--color-gray-dark);
  --progress-track-bg-color: var(--color-gray-light);
  /**
   * Tabledrag icon size.
   */
  --tabledrag-handle-icon-size: calc(17rem / 16);
  /* 17px */
  /**
   * Ajax progress.
   */
  --ajax-progress-margin-horizontal: var(--space-s);
  /**
   * Breadcrumb.
   */
  --breadcrumb-height: 1.25rem;
}