:root {
  /*color*/
  --base-color-main1: 197, 62%;
  --color-main1: hsla(var(--base-color-main1), 50%);
  --color-main1-dark: hsla(var(--base-color-main1), 40%);
  --color-main1-light: hsla(var(--base-color-main1), 60%);

  --base-color-black: 0, 0%;
  --color-black: hsla(var(--base-color-black), 0%);
  --color-text: hsla(var(--base-color-black), 30%);
  --color-darkgrey: hsla(var(--base-color-black), 35%);
  --color-shadow: hsla(var(--base-color-black), 50%);
  --color-grey: hsla(var(--base-color-black), 63%);
  --color-lightgrey: hsla(var(--base-color-black), 80%);
  --color-lightgrey-soft: hsla(var(--base-color-black), 95%);
  --color-white: hsla(var(--base-color-black), 100%);
  --color-mask: hsla(var(--base-color-black), 25%, 0.4);

  --base-color-danger: 0, 100%;
  --color-danger: hsla(var(--base-color-danger), 73%);
  --color-danger-light: hsla(var(--base-color-danger), 93%);
  --color-danger-dark: hsla(var(--base-color-danger), 63%);

  --base-color-warning: 56, 73%;
  --color-warning: hsla(var(--base-color-warning), 55%);
  --color-warning-light: hsla(var(--base-color-warning), 94%);
  --color-warning-dark: hsla(var(--base-color-warning), 28%);

  --color-table-row-highlighted: hsla(128, 69%, 87%);
  --color-highlight: hsla(58, 76%, 60%);

  /*font-size*/
  --font-large: 28px;
  --font-big: 18px;
  --font-medium: 16px;
  --font-small: 14px;
  --font36: 36px;
  --font24: 24px;
  --font15: 15px;
  --font13: 13px;
  --font12: 12px;
  --font10: 10px;

  /*font-family*/
  --font-condensed: roboto-condensed, sans-serif;
  --font-italic: roboto-italic, sans-serif;
  --font-thin: roboto-thin, sans-serif;
  --font-thin-italic: roboto-thin-italic, sans-serif;
  --font-regular: roboto-regular, sans-serif;
  --font-condensed-italic: roboto-condensed-italic, sans-serif;
  --font-bold: roboto-bold, sans-serif;
  --font-bold-italic: roboto-bold-italic, sans-serif;
  --font-bold-condensed: roboto-bold-condensed, sans-serif;
  --font-bold-condensed-italic: roboto-bold-condensed-italic, sans-serif;
  --font-light: roboto-light, sans-serif;
  --font-light-italic: roboto-light-italic, sans-serif;
  --font-family-medium: roboto-medium, sans-serif;
  --font-family-medium-italic: roboto-medium-italic, sans-serif;
  --font-black: roboto-black, sans-serif;
  --font-black-italic: roboto-black-italic, sans-serif;
  --font-icons: icons, sans-serif;

  /*margin*/
  --margin-none: 0;
  --margin-small: 8px;
  --margin-medium: 16px;
  --margin-big: 24px;
  --margin-large: 32px;

  /*padding*/
  --pad-none: 0;
  --pad-small: 8px;
  --pad-medium: 16px;
  --pad-big: 24px;
  --pad-large: 32px;

  /*paragraph*/
  --paragraph0: 0.75em;
  --paragraph1: 0.875em;
  --paragraph2: 1em;
  --paragraph3: 1.0625em;
  --paragraph4: 1.125em;
  --paragraph5: 1.25em;
  --paragraph6: 1.5em;

  /*mobile*/
  --mob-icon-size: 22px;

  /*placeholder*/
  --font-placeholder: var(--font-condensed-italic);
  --color-placeholder: var(--color-grey);

  /*other*/
  --color-list-header: var(--color-grey);
  --color-list-header-hover: var(--color-lightgrey);
  --color-list-header-group: var(--color-lightgrey);
  --color-list-footer: var(--color-grey);
  --color-item-selectable: var(--color-lightgrey-soft);

  /*Selector dropdown responsive elements*/
  --selectorResponsiveLabelHeight: 40px;
  --selectorResponsiveSearchHeight: 45px;
  --selectorResponsiveSelectedHeight: 53px;
  --selectorResponsiveButtonsHeight: 54px;
  --selectorResponsiveButtonsContentHeight: calc(var(--selectorResponsiveSelectedHeight) + var(--selectorResponsiveButtonsHeight));
}