/* variables */
:root {
  /* spacing */
  --spacing-small: 0.3rem;
  --spacing-medium: 0.6rem;
  --spacing-large: 0.9rem;
  --spacing-x-large: 1.8rem;
  --spacing-xx-large: 3.6rem;

  /* colors */
  --color-error: #ec407a;
  --color-warning: #ff7043;
  --color-brand: #29b6f6;
  --color-info: #29b6f6;
  --color-success: #66bb6a;
  --color-links: #0277bd;
  --color-background: var(--grey-50);
  --disabled: var(--grey-300);

  --white: #fff;
  --grey-50: #fafafa;
  --grey-100: #f5f5f5;
  --grey-200: #eeeeee;
  --grey-300: #e0e0e0;
  --grey-400: #bdbdbd;
  --grey-500: #9e9e9e;
  --grey-600: #757575;
  --grey-700: #616161;
  --grey-800: #424242;
  --grey-900: #212121;

  /* shadows */
  --elevation-0: 0 3px 1px -2px rgba(0, 0, 0, 0.2),
    0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  --elevation-1: 0 2px 4px -1px rgba(0, 0, 0, 0.2),
    0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
  --elevation-2: 0 5px 5px -3px rgba(0, 0, 0, 0.2),
    0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
  --elevation-3: 0 8px 10px -5px rgba(0, 0, 0, 0.2),
    0 16px 24px 2px rgba(0, 0, 0, 0.14), 0 6px 30px 5px rgba(0, 0, 0, 0.12);

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

  /* typography */
  --font-size-tiny: 12px;
  --font-size-small: 14px;
  --font-size-default: 16px;
  --font-size-large: 18px;
  --font-size-title: 20px;
  --font-color: var(--grey-900);

  /* controls */
  --input-height: 30px;
  --border-radius: 3px;
  --default-transition: all ease-in 200ms;

  --footer-height: 30px;

  /* Timeline */
  --time-width: 145px;
  --time-label-width: 90px;
  --timeline-width: 6px;
  --timeline-max-width: 500px;

  /* Breakpoints */
  --mobile: 600px;
}

body {
  color: var(--grey-900);
  background-color: var(--grey-50);
}

@media only screen and (max-width: 600px) {
  :root {
    --timeline-max-width: 90vw;
  }
}
@media only screen and (min-width: 601px) {
  .hideOnMediumAndUp {
    display: none;
  }
}

a {
  text-decoration: none;
  color: var(--color-links);
}
a:hover {
  text-decoration: underline;
}

ul {
  list-style-type: none;
}

.application {
  color: var(--grey-900);
  background-color: var(--grey-50);
  transition: color ease-in 300ms;
  transition: background-color ease-in 300ms;
}

.application.dark {
  /* colors */
  --color-error: #ec407a;
  --color-warning: #ff7043;
  --color-brand: #29b6f6;
  --color-info: #29b6f6;
  --color-success: #66bb6a;
  --color-links: #0277bd;
  --color-background: var(--grey-50);
  --disabled: var(--grey-300);

  --white: #212121;
  --grey-50: #424242;
  --grey-100: #616161;
  --grey-200: #757575;
  --grey-300: #9e9e9e;
  --grey-400: #bdbdbd;
  --grey-500: #e0e0e0;
  --grey-600: #eeeeee;
  --grey-700: #f5f5f5;
  --grey-800: #fafafa;
  --grey-900: #fff;

  /* shadows */
  --elevation-0: 0 3px 1px -2px rgba(255, 255, 255, 0.2),
    0 2px 2px 0 rgba(255, 255, 255, 0.14), 0 1px 5px 0 rgba(255, 255, 255, 0.12);
  --elevation-1: 0 2px 4px -1px rgba(255, 255, 255, 0.2),
    0 4px 5px 0 rgba(255, 255, 255, 0.14),
    0 1px 10px 0 rgba(255, 255, 255, 0.12);
  --elevation-2: 0 5px 5px -3px rgba(255, 255, 255, 0.2),
    0 8px 10px 1px rgba(255, 255, 255, 0.14),
    0 3px 14px 2px rgba(255, 255, 255, 0.12);
  --elevation-3: 0 8px 10px -5px rgba(255, 255, 255, 0.2),
    0 16px 24px 2px rgba(255, 255, 255, 0.14),
    0 6px 30px 5px rgba(255, 255, 255, 0.12);
}