$color-black: #000;
$color-white: #fff;
$color-primary: #42b0d5;
$color-primary-dark: #0073ab;
$color-primary-light: #e1f3fb;
$color-secondary-dark: #00233d;
$color-secondary: #878787;
$color-accent: #bd181d;
$color-dark: #2d2728;
$color-neutral: #eaf1f3;
$color-neutral-dark: #d7d7e0;
$color-shadow: #dee0e0;
$color-shadow-light: rgba(0, 0, 0, 0.03);
$color-icons: #00243d;
$color-sidebar-active: rgba(255, 255, 255, 0.03);
$color-side-menu-background: #fff;
$color-side-menu-opacity: rgba(40, 40, 40, 0.3);
$color-sidebar-light: #fff;
$color-sidebar-font: #fff;
$color-logo: #ffffff;
$color-separator: #cfcfcf;
$color-labels: #282828;
$color-headers: $color-labels;
$color-performance-high: #71c9a5;
$color-performance-medium: #fbba1a;
$color-performance-low: #f17676;
$color-primary-deep: #003e5e;
$color-info-bar-background: rgba(177, 217, 212, 0.3);
$color-separator: #e3e8ec;
$color-dark-grey: #6c7f8d;
$color-mid-grey: #b3bdc5;
$color-positive: #a3bf00;
$color-negative: #fa381c;
$color-info-box-background: rgba(181, 224, 244, 0.25);

$color-button-hover: #e5f4fb;
$color-button-active-hover: #57b9da;
$color-button-border: #57b9da;

$color-button-background-hover: #61c8eb;
$color-button-background-active: #42b0d515;

$color-background-alternative: #f7f8f9;
$color-background: #ffffff;
$color-background-primary: #edf7fc;
$color-inverted-background: #272b4c;
$color-positive-indicator-background: rgba(163, 191, 0, 0.1);
$color-negative-indicator-background: rgba(250, 56, 28, 0.1);
$color-blue-panel-background: rgba(181, 224, 244, 0.25);
$color-panel-background: rgba(181, 224, 244, 0.25);
$color-panel-hover-background: rgba(255, 255, 255, 0.25);
$color-panel-hover-border: #e3e8ec;
$color-secondary-button-hover: rgba(87, 185, 218, 0.08);

$color-paragraph: #35395e;
$color-paragraph-dark: #494d6e;
$color-paragraph-light: #b3b5c2;
$color-inverted-paragraph: $color-background;

$color-increase: #7c9d00;
$color-selected: #ffa201;

$color-warn-low: #efc153;
$color-warn-mid: #f68251;
$color-warn-height: #e74338;

$color-trends-vessel-consumption: #ffa201;
$color-trends-non-compliant: #f07508;

$font-metropolis: metropolis;
$font-maersk-headline: maersk-headline;
$font-maersk-text: maersk-text;

$base-font-size: 16px;
$base-font-family: $font-maersk-text, sans-serif;
$font-weight-light: 300;
$font-weight-normal: 400;
$font-weight-bold: 700;
$font-weight-bolder: 600;
$font-size-small: 0.6875em;
$font-size-medium: 0.75em;
$font-size-normal: 1em;
$font-size-caption: 0.875em;
$font-big-icon: 1.125em;
$font-size-big: 1.625em;
$font-size-huge: 2.125em;
$border-radius: 25em;

$hamburger-menu-height: 1.6em;

$letter-spacing-label: 0.125em;

$margin-tiny: 0.25em;
$margin-small: 0.5em;
$margin-normal: 1em;
$margin-medium: 1.5em;
$margin-big: 2em;
$margin-enormous: 3em;
$margin-jumbo: 4em;

$gutter-tiny: 0.25em;
$gutter-small: 0.5rem;
$gutter-normal: 1rem;
$gutter-medium: 1.5em;
$gutter-big: 2rem;
$gutter-enormous: 3rem;
$gutter-jumbo: 4rem;

$overlapping-depth: -10em;

$shadow-top-navigation: 0px 4px 25px rgba(0, 0, 0, 0.08);

$user-icon-padding: 0.125rem;
$small-icon-size: 2.5rem;
$medium-icon-size: 3.75rem;
$big-icon-size: 8rem;
$enormous-icon-size: 11.25rem;

$main-width: 75em;
$hairline: 0.0625rem;
$aside-width: 13rem;

$header-height: 5rem;
$mobile-header-item-height: 3.5rem;

$sub-header-height: 6.125rem;
$sub-header-full-height: 9rem;
$mobile-sub-header-full-height: 5.5rem;
$headers-summary-height: calc(#{$sub-header-height} + #{$header-height});
$content-start-gutter: calc(#{$sub-header-full-height} + #{$header-height});
$mobile-content-start-gutter: calc(#{$mobile-sub-header-full-height} + #{$mobile-header-item-height});

$sub-header-height-big-mobile: 7.562rem;
$sub-header-height-big: 6.5rem;

$headers-summary-height-big-mobile: calc(#{$sub-header-height-big-mobile} + #{$header-height});
$headers-summary-height-big: calc(#{$sub-header-height-big} + #{$header-height});

$sub-bar-border: $hairline;

$sidebar-border-weight: 0.125rem;

$logo-size: 3.4em;
$logo-color: $color-primary;
$logo-padding: 3rem;
$hr-margin: 2rem;

$overlay-color: rgba(0, 0, 0, 0.5);

$button-border-width: $hairline;

$layer-overlay: 10;
$layer-modal: 9;
$layer-blocker: 8;
$layer-burger: 7;
$layer-fixed: 6;
$layer-sticky: 5;
$layer-tooltip: 4;
$layer-screen-attached: 3;
$layer-blur-handler: 2;
$layer-content-attached: 1;
$layer-content: 0;

$transition-time: 0.3;
$transition-type: ease;

$animation-duration: 1;

$panel-item-radius: 4px;

$table-cell-padding: 1.563em;

$table-bg: transparent;
$table-accent-bg: rgba(255, 255, 255, 0.05);
$table-hover-bg: rgba(255, 255, 255, 0.095);
$table-active-bg: $table-hover-bg;

$table-border-width: $hairline;
$table-border-color: $color-neutral;

$table-head-bg: transparent;
$table-head-color: black;

$columns-count: 12;

$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1400px,
);

$print-grid-breakpoints: (
  xs: 0,
  sm: 4cm,
  md: 6cm,
  lg: 11cm,
  xl: 13cm,
);

$min-hover-info-width: 12rem;
$card-border-color: $color-neutral-dark;
$card-border-radius: 0.5em;
$card-border-width: $hairline;
$card-padding-size-vertical: 1em;
$card-padding-size-horizontal: 0.65em;
$modal-gradient-height: 5em;
$modal-gradient-height-mobile: 4em;

$max-data-points: 20;