@font-face {
  font-family: 'Graphik Web';
  src: url('/fonts/graphik/Graphik-Regular-Web.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: 'Graphik Web';
  src: url('/fonts/graphik/Graphik-Semibold-Web.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
}

@font-face {
  font-family: 'Gustan';
  src: url('/fonts/gustan/Gustan-Book.otf') format('opentype');
  font-style: normal;
}

:root {
  --colour-prepop-input: #e0e0e0;
  --colour-one: rgba(var(--colour-one-rgb), var(--colour-one-a));
  --colour-one-rgb: 10, 43, 84;                       /*18, 77, 171;*/  /* Rich Blue */
  --colour-one-a: 1;
  --colour-one-lighten-0-1: #155ac8;

  --colour-two: rgba(var(--colour-two-rgb), var(--colour-two-a));
  --colour-two-rgb: 71, 204, 255; /* Sky Blue */
  --colour-two-a: 1;
  --colour-two-lighten-0-1: #59d1ff;

  --colour-three: rgba(var(--colour-three-rgb), var(--colour-three-a));
  --colour-three-rgb: 87, 96, 104; /* Dark Grey  */
  --colour-three-a: 1;
  --colour-three-lighten-0-1: #667079;

  --colour-four: rgba(var(--colour-four-rgb), var(--colour-four-a));
  --colour-four-rgb: 15, 18, 15; /* Deep Black  */
  --colour-four-a: 0.75;
  --colour-four-lighten-0-1: #252c25;

  --colour-five: rgba(var(--colour-five-rgb), var(--colour-five-a));
  --colour-five-rgb: 244, 246, 245;
  --colour-five-a: 1;
  --colour-five-lighten-0-1: #f5f7f6;

  --colour-six: rgba(var(--colour-six-rgb), var(--colour-six-a));
  --colour-six-rgb: 15, 18, 15; /* Deep Black  */
  --colour-six-a: 0;
  --colour-six-lighten-0-1: #252c25;

  --colour-neutral: rgba(var(--colour-neutral-rgb), var(--colour-neutral-a));
  --colour-neutral-rgb: 255, 255, 255;
  --colour-neutral-a: 1;
  --colour-neutral-lighten-0-1: #ffffff;

  --colour-body-background: rgba(var(--colour-body-background-rgb), var(--colour-body-background-a));
  --colour-body-background-rgb: 255, 255, 255;
  --colour-body-background-a: 1;
  --colour-body-background-lighten-0-1: #ffffff;

  --colour-link: rgba(var(--colour-link-rgb), var(--colour-link-a));
  --colour-link-rgb: var(--colour-one-rgb);
  --colour-link-a: 1;
  --colour-link-lighten-0-1: var(--colour-one-lighten-0-1);

  --colour-link-2: rgba(var(--colour-link-2-rgb), var(--colour-link-2-a));
  --colour-link-2-rgb: var(--colour-four-rgb);
  --colour-link-2-a: 1;
  --colour-link-2-lighten-0-1: var(--colour-four-lighten-0-1);

  --colour-text: rgba(var(--colour-text-rgb), var(--colour-text-a));
  --colour-text-rgb: var(--colour-four-rgb);
  --colour-text-a: 1;
  --colour-text-lighten-0-1: var(--colour-four-lighten-0-1);

  --colour-title: rgba(var(--colour-title-rgb), var(--colour-title-a));
  --colour-title-rgb: var(--colour-four-rgb);
  --colour-title-a: 1;
  --colour-title-lighten-0-1: var(--colour-four-lighten-0-1);

  --colour-sub-title: rgba(var(--colour-sub-title-rgb), var(--colour-sub-title-a));
  --colour-sub-title-rgb: var(--colour-four-rgb);
  --colour-sub-title-a: 1;
  --colour-sub-title-lighten-0-1: var(--colour-four-lighten-0-1);

  --colour-border: rgba(var(--colour-border-rgb), var(--colour-border-a));
  --colour-border-rgb: 235, 235, 235;
  --colour-border-a: 1;
  --colour-border-lighten-0-1: #ededed;

  --colour-accent: rgba(var(--colour-accent-rgb), var(--colour-accent-a));
  --colour-accent-rgb: 249, 249, 249;
  --colour-accent-a: 1;
  --colour-accent-lighten-0-1: #fafafa;

  /* theming */

  --theme-0-bg: rgba(var(--theme-0-bg-rgb), var(--theme-0-bg-a));
  --theme-0-bg-rgb: var(--colour-neutral-rgb);
  --theme-0-bg-a: var(--colour-neutral-a);
  --theme-0-colour: rgba(var(--theme-0-colour-rgb), var(--theme-0-colour-a));
  --theme-0-colour-rgb: var(--colour-title-rgb);
  --theme-0-colour-a: var(--colour-title-a);

  --theme-1-bg: rgba(var(--theme-1-bg-rgb), var(--theme-1-bg-a));
  --theme-1-bg-rgb: var(--colour-accent-rgb);
  --theme-1-bg-a: var(--colour-accent-a);
  --theme-1-colour: rgba(var(--theme-1-colour-rgb), var(--theme-1-colour-a));
  --theme-1-colour-rgb: var(--colour-title-rgb);
  --theme-1-colour-a: var(--colour-title-a);

  --theme-2-bg: rgba(var(--theme-2-bg-rgb), var(--theme-2-bg-a));
  --theme-2-bg-rgb: var(--colour-one-rgb);
  --theme-2-bg-a: var(--colour-one-a);
  --theme-2-colour: rgba(var(--theme-2-colour-rgb), var(--theme-2-colour-a));
  --theme-2-colour-rgb: var(--colour-neutral-rgb);
  --theme-2-colour-a: var(--colour-neutral-a);

  --theme-3-bg: rgba(var(--theme-3-bg-rgb), var(--theme-3-bg-a));
  --theme-3-bg-rgb: var(--colour-two-rgb);
  --theme-3-bg-a: var(--colour-two-a);
  --theme-3-colour: rgba(var(--theme-3-colour-rgb), var(--theme-3-colour-a));
  --theme-3-colour-rgb: var(--colour-one-rgb);
  --theme-3-colour-a: var(--colour-one-a);

  --theme-4-bg: rgba(var(--theme-4-bg-rgb), var(--theme-4-bg-a));
  --theme-4-bg-rgb: 230, 18, 50; /* theme red, not a branding */
  --theme-4-bg-a: 1;
  --theme-4-colour: inherit;
  --theme-4-colour-rgb: inherit;
  --theme-4-colour-a: inherit;

  --theme-5-bg: rgba(var(--theme-5-bg-rgb), var(--theme-5-bg-a));
  --theme-5-bg-rgb: 3, 85, 159; /* theme red, not a branding */
  --theme-5-bg-a: 1;
  --theme-5-colour: rgba(var(--theme-5-colour-rgb), var(--theme-5-colour-a));
  --theme-5-colour-rgb: var(--colour-neutral-rgb);
  --theme-5-colour-a: var(--colour-neutral-a);

  --table-row-accent: rgba(var(--table-row-accent-rgb), var(--table-row-accent-a));
  --table-row-accent-rgb: var(--colour-accent-rgb);
  --table-row-accent-a: var(--colour-accent-a);

  /* branding */

  --colour-footer-upper: rgba(var(--colour-footer-upper-rgb), var(--colour-footer-upper-a));
  --colour-footer-upper-rgb: var(--colour-three-rgb);
  --colour-footer-upper-a: var(--colour-three-a);

  --colour-footer-lower: rgba(var(--colour-footer-lower-rgb), var(--colour-footer-lower-a));
  --colour-footer-lower-rgb: 0, 0, 0;
  --colour-footer-lower-a: 1;

  --colour-icon-bg: rgba(var(--colour-icon-bg-rgb), var(--colour-icon-bg-a));
  --colour-icon-bg-rgb: var(--colour-one-rgb);
  --colour-icon-bg-a: var(--colour-one-a);

  --colour-icon-text: rgba(var(--colour-icon-text-rgb), var(--colour-icon-text-a));
  --colour-icon-text-rgb: var(--colour-two-rgb);
  --colour-icon-text-a: var(--colour-two-a);

  --colour-selection-bg: var(--colour-one);
  --colour-selection-text: var(--colour-neutral);

  /* tables */

  --table-head-bg: rgba(var(--table-head-bg-rgb), var(--table-head-bg-a));
  --table-head-bg-rgb: var(--colour-one-rgb);
  --table-head-bg-a: 1;

  --table-hover-bg: rgba(var(--table-hover-bg-rgb), var(--table-hover-bg-a));
  --table-hover-bg-rgb: var(--colour-one-rgb);
  --table-hover-bg-a: 1;

  --table-hover-border: solid 1px var(--colour-border);

  --table-hover-color: var(--colour-text);

  --table-hover-button-bg: rgba(var(--table-hover-button-bg-rgb), var(--table-hover-button-bg-a));
  --table-hover-button-bg-rgb: var(--colour-neutral-rgb);
  --table-hover-button-bg-a: var(--colour-neutral-a);

  --table-hover-button-color: var(--colour-neutral);

  --table-hover-button-border-color: var(--colour-neutral);
  --table-hover-button-border-color-rgb: var(--colour-neutral-rgb);
  --table-hover-button-border-color-a: var(--colour-neutral-a);

  /* tabs */

  --tabs-active-bg: rgba(var(--tabs-active-bg-rgb), var(--tabs-active-bg-a));
  --tabs-active-bg-rgb: var(--colour-one-rgb);
  --tabs-active-bg-a: 1;

  /* status */

  --colour-status-success: rgba(var(--colour-status-success-rgb), var(--colour-status-success-a));
  --colour-status-success-rgb: 75, 217, 59;
  --colour-status-success-a: 1;

  --colour-status-warning: rgba(var(--colour-status-warning-rgb), var(--colour-status-warning-a));
  --colour-status-warning-rgb: 247, 214, 1;
  --colour-status-warning-a: 1;

  --colour-status-danger: rgba(var(--colour-status-danger-rgb), var(--colour-status-danger-a));
  --colour-status-danger-rgb: 214, 27, 27;
  --colour-status-danger-a: 1;

  /* Check */
  --colour-check: var(--colour-status-success);

  /* borders */

  --border-width: 5px;
  --border-line: solid;
  --border-style: var(--border-width) var(--border-line) var(--colour-border);
  --border-radius: 0px;

  /* buttons */

  --colour-button-main-text: var(--colour-neutral);
  --colour-button-main-background: var(--colour-one);
  --colour-button-main-text-hover: var(--colour-neutral);
  --colour-button-main-background-hover: #00A575;
  --colour-button-main-border: none;

  --colour-button-one-text: var(--colour-one);
  --colour-button-one-background: transparent;
  --colour-button-one-text-hover: var(--colour-one);
  --colour-button-one-background-hover: #ECF700;
  --colour-button-one-border-color: 1px solid var(--colour-one);

  --colour-button-two-text: var(--colour-neutral);
  --colour-button-two-background: transparent;
  --colour-button-two-text-hover: var(--colour-neutral);
  --colour-button-two-background-hover: #FFFFFF;
  --colour-button-two-border: 1px solid var(--colour-neutral);

  --colour-button-three-text: var(--colour-five);
  --colour-button-three-background: transparent;
  --colour-button-three-text-hover: var(--colour-five);
  --colour-button-three-background-hover: #ECF700;
  --colour-button-three-border: 1px solid var(--colour-five);

  --button-line-height: 1;
  --button-padding-v: 18.5px;

  --button-height-0: 42px;
  --button-height-1: 55px;

  /* scrollbar */
  --scrollbar-width: 24px;

  /* border-radius */
  --module-border-radius: 0px;
  --button-border-radius: 200px;

  /* form elements */
  --form-input-border-radius: 25px;

  --form-label-colour: rgb(0, 0, 0);
  --form-label-font-weight: 500;


  --form-input-colour-border: var(--colour-border);
  --form-input-padding-v: 0px;
  --form-input-padding-h: 20px;
  --form-input-padding-v-1: 0px;
  --form-input-padding-h-1: 30px;
  --form-input-padding: var(--form-input-padding-v) var(--form-input-padding-h);
  --form-input-padding-1: var(--form-input-padding-v-1) var(--form-input-padding-h-1);
  --form-input-colour-background: var(--colour-neutral);
  --form-input-colour-text: var(--colour-title);
  --form-input-colour-placeholder: #000000;
  --form-input-placeholder-font-weight: 400;
  --form-input-colour-border-focus: var(--colour-one);
  --form-input-colour-icon: var(--colour-title);

  --form-input-height: 50px;
  --form-input-height-768: 55px;
  --form-checkbox-height: 25px;
  --form-checkbox-background-colour: var(--colour-one);
  --form-radio-circle-height: 25px;
  --form-radio-circle-background-colour: transparent;
  --form-checkbox-text-colour: var(--colour-one);
  --form-input-border-style: var(--border-width) var(--border-line) var(--form-input-colour-border);

  --form-check-height: 25px;

  --text-link-icon-font-size: 2.4;
  --divider-height: 1px;

  /* spacings */
  --spacing-mobile: 20px;
  --spacing-tablet: 30px;
  --spacing-desktop: 30px;
  --spacing-large: 30px;

  --spacing-internal: 20px;

  --section-spacing-mobile: 40px;
  --section-spacing-tablet: 60px;
  --section-spacing-desktop: 60px;
  --section-spacing-large: 60px;

  /* fonts */
  --font-family-body: "Graphik Web", sans-serif;
  --font-family-title: "Gustan", sans-serif;

  --line-height-body: 1.55;
  --line-height-body-768: var(--line-height-body);
  --line-height-body-992: var(--line-height-body);
  --line-height-body-1200: var(--line-height-body);

  --line-height-title: 1.3;
  --line-height-title-768: var(--line-height-title);
  --line-height-title-992: var(--line-height-title);
  --line-height-title-1200: var(--line-height-title);

  --sub-title-offset: 5px;

  --font-weight: 400;
  --font-weight-bold: 600;

  /* font sizes */

  --font-size-body: 1.4;
  --font-size-body-768: 1.4;
  --font-size-body-992: 1.6;
  --font-size-body-1200: 1.6;

  --font-size-1: 2.4;
  --font-size-1-768: 3;
  --font-size-1-992: 3.8;
  --font-size-1-1200: 4.8;

  --font-size-2: 2;
  --font-size-2-768: 2.4;
  --font-size-2-992: 2.4;
  --font-size-2-1200: 2.8;

  --font-size-3: 1.8;
  --font-size-3-768: 2;
  --font-size-3-992: 2;
  --font-size-3-1200: 2.2;

  --font-size-4: 1.6;
  --font-size-4-768: 1.8;
  --font-size-4-992: 2.2;
  --font-size-4-1200: 2.2;

  --font-size-5: 1.6;
  --font-size-5-768: 1.6;
  --font-size-5-992: 1.8;
  --font-size-5-1200: 1.8;

  --font-size-6: 1.0;
  --font-size-6-768: 1.0;
  --font-size-6-992: 1.0;
  --font-size-6-1200: 1.0;

  --font-size-small: 1.4;
  --font-size-small-768: 1.4;
  --font-size-small-992: 1.4;
  --font-size-small-1200: 1.4;

  --font-size-label: 1.4;
  --font-size-label-768: 1.4;
  --font-size-label-992: 1.6;
  --font-size-label-1200: 1.6;

  --font-size-validation: 1.4;
  --font-size-validation-768: 1.4;
  --font-size-validation-992: 1.4;
  --font-size-validation-1200: 1.4;

  /* settings */

  --transition: 0.3s;
  --gutter-width: 30px;

  /* viewport */
  /*
  css variables cannot be used in media queries
  --viewport-xs: 576px;
  --viewport-xs-max: 575px;

  --viewport-one: 768px;
  --viewport-one-max: 767px;

  --viewport-two: 992px;
  --viewport-two-max: 991px;

  --viewport-three: 1200px;
  --viewport-three-max: 1199px;

  --viewport-four: 1500px;
  --viewport-four-max: 1499px;
   */

}