/** FONT INTEGRATION
 ****************************************************************************
 *
 */
/* inter-tight-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 100;
  src: url("../../assets/fonts/inter-tight-v7-latin-100.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-tight-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 300;
  src: url("../../assets/fonts/inter-tight-v7-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-tight-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 400;
  src: url("../../assets/fonts/inter-tight-v7-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-tight-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 500;
  src: url("../../assets/fonts/inter-tight-v7-latin-500.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* inter-tight-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Inter Tight";
  font-style: normal;
  font-weight: 600;
  src: url("../../assets/fonts/inter-tight-v7-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/*****************************************************************************
 *  FONT INTEGRATION END 
 *  
 */
/*
 *  RESET
 ****************************************************************************
 */
* {
  -webkit-tap-highlight-color: transparent;
}

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
textarea,
input,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video,
hr {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  border: 0;
  font: inherit;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
menu,
nav,
section,
hr {
  display: block;
  box-sizing: border-box;
}

ol,
ul {
  list-style: none;
}

blockquote,
q {
  quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*
 *****************************************************************************
 *  ROOT SETTINGS END 
 */
/*
 *  ROOT SETTINGS
 ****************************************************************************
 */
:root {
  --font-base: "Inter Tight", sans-serif;
  --font-size: calc(9px + 0.4vw);
  --font-scaling: 1.1;
  --small-font: 0.8rem;
  --h3-size: calc(1rem * var(--font-scaling));
  --h2-size: calc(var(--h3-size) * var(--font-scaling));
  --h1-size: calc(var(--h2-size) * var(--font-scaling));
  --color-mint-200: hsl(164, 66%, 75%);
  --color-mint: #45d9b1;
  --color-mint-500: hsl(164, 66%, 40%);
  --color-petrol: #138686;
  --color-petrol: #005f5f;
  --color-petrol-700: hsl(180, 100%, 10%);
  --color-petrol-0: hsla(180, 100%, 19%, 0%);
  --color-forest: hsl(191, 100%, 12%);
  --color-forest-10: rgb(0, 48, 59, 0.1);
  --color-forest-50: rgb(0, 48, 59, 0.5);
  --color-forest-200: hsl(191, 100%, 16%);
  --color-forest-300: hsl(191, 100%, 14%);
  --color-forest-500: hsl(191, 100%, 10%);
  --color-forest-600: hsl(191, 100%, 8%);
  --color-forest-700: hsl(191, 100%, 6%);
  --color-forest-900: hsl(191, 100%, 2%);
  --color-forest-900-25: hsla(192, 100%, 3%, 0.25);
  --color-forest-900-50: hsla(192, 100%, 3%, 0.5);
  --color-white: #e3e8e7;
  --color-white-25: rgba(227, 232, 231, 0.25);
  --color-white-50: rgba(227, 232, 231, 0.5);
  --color-white-75: rgba(227, 232, 231, 0.75);
  /*
  --color-white: #ffffff;
  --color-white-25: rgba(255, 255, 255, 0.25);
  --color-white-50: rgba(255, 255, 255, 0.5);
  --color-white-75: rgba(255, 255, 255, 0.75);
  */
  --color-thumb: var(--color-white);
  --color-thumb-not-selected: var(--color-white-50);
  --color-input-border: var(--color-white);
  --color-gen-sandable: hsl(340, 40%, 30%);
  --color-gen-primer: hsl(340, 55%, 55%);
  --color-gen-basecoat: hsl(355, 75%, 70%);
  --color-gen-clearcoat: hsl(30, 85%, 75%);
  --color-ppg-sandable: hsl(164, 100%, 20%);
  --color-ppg-primer: hsl(164, 30%, 40%);
  --color-ppg-basecoat: hsl(164, 60%, 45%);
  --color-ppg-clearcoat: hsl(164, 100%, 60%);
  --color-linq: hsl(50, 100%, 50%);
  --color-mw: hsl(200, 100%, 60%);
  --slider-gradient-position: 50%;
  --gradient-slider-range: linear-gradient(
    to right,
    var(--color-petrol) var(--slider-gradient-position),
    var(--color-forest-900) var(--slider-gradient-position)
  );
  --gradient-thumb: radial-gradient(
    var(--color-white) 50%,
    var(--color-forest-300) 100%
  );
  --gradient-box: linear-gradient(
    0deg,
    var(--color-forest-500),
    var(--color-forest) 50%,
    var(--color-forest-300)
  );
  --gradient-box-light: linear-gradient(
    0deg,
    var(--color-forest-300),
    var(--color-forest-200)
  );
  --border-primary: 1px solid var(--color-forest-200);
  --border-petrol: 1px solid var(--color-petrol);
  --chart-bar-height: 0.25rem;
  --chart-bar-gap: 0.1rem;
  --chart-row-gap: 0.2rem;
  --chart-bar-radius: 0.1rem;
  --chart-indent: 2rem;
  --chart-label-width: 100px;
  --chart-panel-summary-width: 7rem;
  --chart-summary-width: 500px;
  --chart-total-width: 11rem;
  --chart-width: 1900px;
  --cycle_time-max: 450;
  --labour_time-max: 450;
  --energy_consumption-max: 200;
  --co2_emissions-max: 50;
  --knob-size: 1rem;
  --slider-range-height: 3px;
  --user-details-width: 15%;
  --interface-container-width: calc((100% - var(--user-details-width)) / 2);
  --shadow-default: rgba(0, 0, 0, 0.5) 0 0 1rem;
}

html,
body {
  min-height: 100vh;
  margin: 0;
}

/*
 *****************************************************************************
 *  ROOT SETTINGS END 
 */
/*
 *  TYPOGRAPHY
 ****************************************************************************
 */
html {
  color: var(--color-forest);
  font-family: var(--font-base);
  font-weight: 300;
  font-size: var(--font-size);
  text-rendering: optimizeLegibility;
  hyphens: auto;
  -ms-hyphens: auto;
  -webkit-hyphens: auto;
  hyphenate-limit-chars: auto 5;
  -ms-hyphenate-limit-chars: auto 5;
  -webkit-hyphenate-limit-chars: auto 5;
  hyphenate-limit-lines: 2;
  -ms-hyphenate-limit-lines: 2;
  -webkit-hyphenate-limit-lines: 2;
  line-height: 1.25;
  letter-spacing: 0.025em;
  scroll-behavior: smooth;
  font-feature-settings: "clig", "hlig", "kern", "liga";
  font-variant-ligatures: common-ligatures contextual;
  font-variant-numeric: oldstyle-nums;
  vertical-align: baseline;
}

h1,
h2 {
  font-weight: 600;
  margin-top: 1em;
  margin-bottom: 0.25em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 {
  font-size: var(--h1-size);
}

h2 {
  font-size: var(--h2-size);
}

h3 {
  font-size: var(--h3-size);
  font-weight: 300;
}

button {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
}

/*
 *****************************************************************************
 *  TYPOGRAPHY END 
 */
@keyframes blink {
  from {
    filter: brightness(0.75);
  }
  to {
    filter: brightness(1.25);
  }
}
form {
  margin-bottom: 1rem;
}

input#entry-key {
  font-size: 1rem;
  padding: 1rem 2rem;
  border-radius: 2rem;
  background-color: var(--color-white);
  color: var(--color-forest);
  border: none;
  outline: none;
  width: 100%;
  box-shadow: var(--color-forest-50) 2px 2px 6px inset;
}

button {
  cursor: pointer;
  background: var(--color-petrol);
  color: var(--color-white-75);
  border: none;
  border-radius: 2rem;
  padding: 1rem 2rem;
  filter: brightness(1);
  transition: filter 0.3s ease;
}
button:hover, button.active {
  filter: brightness(1.25);
}
button.secondary {
  background: var(--color-forest-300);
}
button#start-calculator, button#unlock {
  color: var(--color-mint);
  animation: blink 1s infinite alternate;
}

select {
  font-size: 1rem;
  padding: 0.25rem 1rem;
  border-radius: 0.25rem;
  background-color: var(--color-petrol);
  color: var(--color-white);
  border: none;
  outline: none;
  min-width: 11rem;
}

label,
.switch__label {
  font-weight: 300;
  color: var(--color-white-50);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  cursor: pointer;
}
label.selected,
.switch__label.selected {
  color: var(--color-white);
}

.no-choise {
  font-weight: 300;
  color: var(--color-white);
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.66667rem 0;
  height: calc(var(--knob-size) + 0.2rem + 2px);
}

/*
 *  SLIDER
 **************************************************************************** */
input[type=range] {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: var(--slider-range-height);
  background: linear-gradient(to right, var(--color-petrol) var(--slider-gradient-position), var(--color-forest-900) var(--slider-gradient-position));
  outline: none;
  border-bottom: var(--color-petrol) thin solid;
  border-right: var(--color-petrol) thin solid;
}
input[type=range]::-webkit-slider-thumb {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 0.25rem;
  height: 0.25rem;
  transform: scale(5);
  background: var(--color-white);
  border-radius: 100%;
  box-shadow: var(--color-forest-900-50) 3px 3px 6px;
  cursor: pointer;
}
input[type=range]::-moz-range-thumb {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  width: 0.25rem;
  height: 0.25rem;
  transform: scale(5);
  background: var(--color-white);
  border-radius: 100%;
  box-shadow: var(--color-forest-900-50) 3px 3px 6px;
  cursor: pointer;
}

.slider {
  position: relative;
  margin: 0.66667rem 0;
  z-index: 0;
}
.slider__scale {
  position: absolute;
  left: 1.5rem;
  bottom: 1.25rem;
  width: calc(100% - 3rem);
  display: flex;
  justify-content: space-between;
  z-index: -1;
}
.slider__scale + input[type=range] {
  border-radius: 0;
  margin-top: 2em;
}
.slider__label {
  width: 2px;
  position: relative;
}
.slider__label::before {
  content: attr(data-text);
  display: inline-block;
  font-weight: 300;
  color: var(--color-white-50);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
  cursor: pointer;
  margin-left: 50%;
  transform: translateX(-50%);
}
.slider__label::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.75rem;
  background-color: var(--color-white-50);
  position: absolute;
  top: 100%;
  left: calc(50% - 1px);
}
.slider__label.selected::before {
  color: var(--color-white);
}
.slider__labeling {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.slider__value {
  font-weight: 300;
  min-width: 4rem;
  text-align: right;
}

/* *****************************************************************************
 *  SLIDER END 
 */
/*
 *  SWITCH
 **************************************************************************** */
.switch {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin: 0.66667rem 0;
}
.switch-slider {
  padding: 0 1.5rem;
  width: 100%;
}
.switch.left {
  flex-direction: row-reverse;
}
.switch.fullwidth {
  width: 100%;
  justify-content: space-between;
}
.switch.double .switch__symbol {
  order: 2;
}
.switch.double .switch__label {
  order: 1;
  text-align: right;
  width: calc(50% - 1.6rem - 1px);
}
.switch.double .switch__label:last-of-type {
  order: 3;
  text-align: left;
}
.switch.tripple {
  height: calc(var(--knob-size) + 0.2rem + 2px);
  z-index: 1000;
  /*
  @media screen and (min-width: $interface-bp) {
    margin-top: -1.1em;
  }
  */
  /* padding-top: 1.75rem; */
  /*
  @media screen and (min-width: 1280px) {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 1.5rem 0 0;
    background: transparent;
    border: none;
    border-radius: 0;

    &::after {
      display: none;
    }

    .switch {
      &__symbol {
        display: flex;
      }
      &__label {
        padding: 0;
        color: var(--color-white-50);
      }
    }

    .label- {
      &0 {
        order: 1;
        width: calc(50% - 2.1rem - 1px);
        text-align: right;
      }
      &1,
      &2 {
        height: auto;
        overflow: initial;
        padding: 0;
      }
      &1 {
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
      }
      &2 {
        order: 3;
        width: calc(50% - 2.1rem - 1px);
        text-align: left;
      }
    }
  }
    */
}
.switch.tripple.hidden {
  display: none;
}
.switch.tripple.opened .switch__options {
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 1rem;
  padding: 1rem;
  filter: brightness(1.25);
}
.switch.tripple.opened .switch__options::after {
  opacity: 0;
}
.switch.tripple.opened .label-0,
.switch.tripple.opened .label-1,
.switch.tripple.opened .label-2 {
  height: 2rem;
  padding: 0.4rem 1rem;
  opacity: 1;
}
.switch.tripple .switch__symbol {
  display: none;
  order: 2;
  width: calc(3 * var(--knob-size) + 0.2rem + 2px);
}
.switch.tripple .switch__label {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white-50);
  padding: 0.33333rem 1rem;
  width: 100%;
  text-align: center;
  opacity: 0;
  transition: height 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
}
.switch.tripple .switch__label.active {
  font-weight: 500;
}
.switch.tripple .switch__label.selected {
  color: var(--color-white);
  height: 2rem;
  padding: 0.4rem 1rem;
  opacity: 1;
}
.switch.tripple .label-0, .switch.tripple .label-1, .switch.tripple .label-2 {
  height: 0;
  overflow: hidden;
  padding: 0 1rem;
}
.switch.tripple[data-select="1"] .switch__symbol::before {
  left: calc(50% - 1rem);
}
.switch.tripple[data-select="2"] .switch__symbol::before {
  left: calc(100% - 2rem - 1px);
}
.switch:not(.double):not(.tripple) input[type=checkbox]:checked + .switch__symbol + .switch__label {
  font-weight: 300;
  font-size: 1em;
}
.switch input[type=checkbox] {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
}
.switch input[type=checkbox]:checked + .switch__symbol::before {
  transform: translate(calc(100% + 1px));
}
.switch__options {
  position: absolute;
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 0;
  background: var(--color-forest);
  /* border: var(--color-white-25) thin solid; */
  border-radius: 1rem;
  filter: brightness(1);
  transition: padding 0.3s ease, filter 0.3s ease;
}
.switch__options::after {
  content: " ";
  display: block;
  position: absolute;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
  width: 0.33333rem;
  height: 1rem;
  background-image: url(../../assets/images/arrow_down.svg);
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
  opacity: 1;
  transition: opacity 0.3s ease;
}
.switch__symbol {
  position: relative;
  display: flex;
  align-items: center;
  width: calc(2 * var(--knob-size) + 0.2rem + 2px);
  height: calc(var(--knob-size) + 0.2rem + 2px);
  margin: 0 0.5rem;
  background-color: var(--color-forest-900);
  border: 0.1rem solid var(--color-input-border);
  border-radius: 1rem;
  cursor: pointer;
}
.switch__symbol::before {
  content: "";
  display: block;
  width: var(--knob-size);
  height: var(--knob-size);
  border-radius: 100%;
  background: var(--color-white);
  transition: transform 0.3s ease;
  transform: translateX(1px);
}

/* *****************************************************************************
 *  SWICTH END 
 */
/*
 *  DROPDOWN
 **************************************************************************** */
.dropdown {
  position: relative;
  font-size: 1rem;
  padding: 1rem;
  border-radius: 1rem;
  background-color: var(--color-petrol);
  color: var(--color-white);
  min-width: 20rem;
}
.dropdown__current {
  position: relative;
  display: block;
}
.dropdown__current::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.5rem;
  height: 0.5rem;
  border-bottom: var(--color-white) 2px solid;
  border-right: var(--color-white) 2px solid;
  transform: translate(-50%, -60%) rotate(45deg);
}
.dropdown__options {
  height: 0;
  overflow: hidden;
}
.dropdown__option {
  padding: 0.75rem 3rem;
}
.dropdown__option.selected {
  background-color: var(--color-petrol);
  color: var(--color-white);
  filter: brightness(1.2);
}
.dropdown__option.selected::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 1.5rem;
  width: 0.25rem;
  height: 0.5rem;
  border-bottom: var(--color-white) 2px solid;
  border-right: var(--color-white) 2px solid;
  transform: translateY(-70%) rotate(45deg);
}
.dropdown:focus {
  z-index: 10000;
}
.dropdown:focus .dropdown__options-container {
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-height: 62vh;
  overflow: hidden;
  padding: 0;
  border-radius: 1rem;
  box-shadow: var(--shadow-default);
}
.dropdown:focus .dropdown__options {
  width: 100%;
  height: auto;
  max-height: 62vh;
  overflow-y: scroll;
  scrollbar-width: thin;
  background-color: var(--color-petrol);
}

/* *****************************************************************************
 *  DROPDOWN END 
 */
body {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: var(--color-forest-500);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: cover;
  color: var(--color-white);
  overflow: hidden;
}

.hidden,
.dimmer.hidden,
.base-settings.hidden {
  display: none;
}

#log {
  position: absolute;
  top: 1rem;
  left: 1rem;
  width: fit-content;
  padding: 3rem;
  background: var(--color-white);
  color: var(--color-forest);
  z-index: 10000;
}

/**
 * START PAGE
 **************************************************************** */
.start label {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.start select {
  min-width: 20rem;
  padding: 1rem;
  border-radius: 1rem;
}
.start .wrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  transform: translateY(-3rem);
}
.start .select-box {
  width: 50%;
  min-width: 20rem;
  max-width: 640px;
}
.start .label {
  margin-bottom: 0.5rem;
  display: none;
}
.start #poi-logo {
  height: calc(80px + 2rem);
  max-height: none;
  display: block;
  padding-bottom: 2rem;
  border-bottom: var(--border-petrol);
  margin-bottom: 1rem;
}

/**
 * FRONTEND AREAS
 **************************************************************** */
/*  loader */
.loader {
  display: none;
}

/*  wrapper */
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* header */
.header {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  padding: calc(var(--chart-indent) * 0.75) var(--chart-indent);
  z-index: 10;
}
@media screen and (min-width: 1600px) {
  .header {
    z-index: 40;
  }
}

.brand {
  display: flex;
  align-items: center;
}
.brand button {
  width: fit-content;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--color-petrol);
  border: none;
  border-radius: 2rem;
  margin-right: 2rem;
  color: var(--color-white-75);
  filter: brightness(1);
  transition: filter 0.3s ease;
}
.brand button:active, .brand button.active {
  filter: brightness(1.5);
}
.brand img {
  width: auto;
  height: 1rem;
  margin-right: 0.5rem;
}

#poi-logo,
#ppg-logo,
#nexaautocolor-logo,
#maxmeyer-logo {
  height: 3vw;
  min-height: 30px;
  max-height: 60px;
  width: auto;
}

/* main */
@keyframes squeeze-to-right {
  0% {
    width: calc(100% - 2 * var(--chart-indent));
    margin-left: var(--chart-indent);
  }
  100% {
    width: calc(50% - 2 * var(--chart-indent));
    margin-left: calc(50% + var(--chart-indent));
  }
}
@keyframes squeeze-from-right {
  0% {
    width: calc(50% - 2 * var(--chart-indent));
    margin-left: calc(50% + var(--chart-indent));
  }
  100% {
    width: calc(100% - 2 * var(--chart-indent));
    margin-left: var(--chart-indent);
  }
}
@keyframes squeeze-to-left {
  0% {
    width: calc(100% - 2 * var(--chart-indent));
    margin-right: var(--chart-indent);
  }
  100% {
    width: calc(50% - 2 * var(--chart-indent));
    margin-right: calc(50% + var(--chart-indent));
  }
}
@keyframes squeeze-from-left {
  0% {
    width: calc(50% - 2 * var(--chart-indent));
    margin-right: calc(50% + var(--chart-indent));
  }
  100% {
    width: calc(100% - 2 * var(--chart-indent));
    margin-right: var(--chart-indent);
  }
}
.output {
  display: flex;
  justify-content: space-between;
  width: calc(100% - 2 * var(--chart-indent));
  margin: 0 var(--chart-indent);
}
.output.vertical {
  flex-direction: column;
}
.output.vertical .charts {
  width: 100%;
}
.output.vertical .potential {
  width: 100%;
  flex-direction: unset;
  flex-wrap: wrap;
  margin: 1rem 0;
}
.output.vertical .potential p {
  padding: 3rem 0;
  width: auto;
  border-bottom: none;
  border-right: var(--border-petrol);
  flex-grow: 1;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
}
.output.vertical .potential p.potential__indication {
  width: 100%;
  padding: 0;
  border-bottom: var(--border-petrol);
  border-right: none;
}
.output.vertical .potential p:last-child {
  border-right: none;
}
.output.squeeze.to-right {
  animation: squeeze-to-right forwards 0.4s cubic-bezier(0.75, -0.25, 0.25, 1.1);
}
.output.squeeze.from-right {
  animation: squeeze-from-right forwards 0.4s cubic-bezier(0.75, -0.25, 0.25, 1.1);
}
.output.squeeze.to-left {
  animation: squeeze-to-left forwards 0.4s cubic-bezier(0.5, 0, 0.25, 1.1);
}
.output.squeeze.from-left {
  animation: squeeze-from-left forwards 0.4s cubic-bezier(0.5, 0, 0.25, 1.1);
}

/*  potentials */
.potential {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-transform: capitalize;
  width: 25%;
  border: var(--border-petrol);
  border-radius: 4px;
  background: var(--color-forest);
}
.potential p {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 33.33333%;
  margin: 0;
  border-bottom: var(--border-petrol);
}
.potential p:last-child {
  border-bottom: none;
}
.potential p.potential__indication {
  color: var(--color-mint);
  font-size: 0.9rem;
  text-transform: uppercase;
  height: 4rem;
  width: 100%;
}
.potential__result {
  display: flex;
  align-items: inherit;
}
.potential__value {
  order: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  font-weight: 500;
  color: var(--color-mint);
  /*text-shadow: var(--color-mint-200) 0 0 1em;*/
  filter: brightness(1.2);
}
.potential__value.positive:not(#energy-cost-savings)::before {
  content: "+";
  display: inline-block;
  margin-right: 0.5rem;
}
.potential__label {
  order: 3;
  margin: 0;
  font-size: 1rem;
  letter-spacing: 0.05em;
  width: 100%;
}
.potential__currency {
  order: 2;
  display: inline-block;
  text-transform: lowercase;
  margin-left: 0.5em;
  position: relative;
  bottom: -0.33333em;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--color-mint);
  /*text-shadow: var(--color-mint-200) 0 0 1em;*/
}

/*  navigation */
.navigation {
  display: flex;
  position: absolute;
  justify-content: center;
  gap: 3rem;
  left: calc(100% - var(--interface-container-width));
  bottom: 0;
  width: var(--interface-container-width);
  min-height: 4rem;
  background: var(--color-forest-700);
  border-top: var(--border-petrol);
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 1rem;
  z-index: 30;
}
.navigation button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  padding: 1em 3em;
  color: var(--color-white);
  background: transparent;
  border: none;
  filter: brightness(0.75);
  transition: filter 0.3s ease, color 0.3s ease;
}
.navigation button .svg-icon {
  color: inherit;
  width: 1.25rem;
  height: auto;
  margin-right: 0.5rem;
}
.navigation button .svg-icon__path {
  fill: currentcolor;
}
.navigation button:active, .navigation button.active {
  color: var(--color-mint);
  filter: brightness(1.25);
}
.navigation button.hidden {
  display: none;
}
.navigation button img {
  width: 1.25rem;
  height: auto;
  margin-right: 0.5rem;
}

#control-button {
  display: none;
}

/*  dimmer */
@keyframes show-dimmer {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes hide-dimmer {
  0% {
    opacity: 1;
  }
  99% {
    opacity: 0;
  }
  100% {
    display: none;
  }
}
.dimmer {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: var(--color-forest-900-50);
}
.dimmer.show {
  display: block;
  animation: show-dimmer 0.3s forwards ease;
}
.dimmer.hide {
  animation: hide-dimmer 0.3s forwards ease;
}

/*  settings-dialog */
@keyframes show-base-settings {
  0% {
    transform: translate(-50%, -100%);
  }
  100% {
    transform: translate(-50%, 0%);
  }
}
@keyframes hide-base-settings {
  0% {
    transform: translate(-50%, 0%);
  }
  100% {
    transform: translate(-50%, -100%);
  }
}
.base-settings {
  position: absolute;
  top: 0;
  left: 50%;
  width: 25vw;
  min-width: 450px;
  padding: 3vh;
  transform: translate(-50%, -100%);
  background-color: var(--color-forest);
  border: var(--border-petrol);
  border-top: none;
  border-radius: 0 0 1rem 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.base-settings.show {
  animation: show-base-settings 0.3s forwards ease;
}
.base-settings.hide {
  animation: hide-base-settings 0.3s forwards ease;
}
.base-settings div {
  width: 100%;
}
.base-settings h2 {
  margin: 0rem 0 1rem;
  font-weight: 300;
  letter-spacing: 0.075rem;
}
.base-settings label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem;
}
.base-settings .label {
  width: fit-content;
  text-align: left;
}
.base-settings__panel-alignment {
  display: none;
  justify-content: space-between;
  align-items: center;
  margin: 0.5rem;
}
.base-settings__panel-alignment label {
  margin: 0;
}
.base-settings__panel-alignment .label {
  margin: 0 0.5rem;
  color: var(--color-white-50);
}
.base-settings__panel-alignment .switch {
  min-width: 145px;
  width: fit-content;
  padding-right: 1rem;
}
.base-settings__button-bar {
  margin-top: 2rem;
  display: flex;
  justify-content: center;
  gap: 2rem;
}

/*  reset-dialog */
@keyframes show-reset-dialog {
  0% {
    top: 50%;
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 0;
  }
  100% {
    top: 45%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
}
@keyframes hide-reset-dialog {
  0% {
    top: 45%;
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
  }
  99% {
    top: 50%;
    transform: translate(-50%, -50%) scale(0.25);
    opacity: 0;
  }
  100% {
    top: -100%;
  }
}
.reset-confirmation {
  position: absolute;
  top: -100%;
  left: 50%;
  width: 33vw;
  min-width: 450px;
  padding: 3vh;
  transform: translate(-50%, -50%);
  background-color: var(--color-forest);
  border: var(--border-petrol);
  border-radius: 1rem;
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 1rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  opacity: 1;
}
.reset-confirmation.show {
  animation: show-reset-dialog 0.3s forwards ease;
}
.reset-confirmation.hide {
  animation: hide-reset-dialog 0.15s forwards ease;
}
.reset-confirmation__text {
  /* font-weight: 100; */
  margin: 1rem 0 2rem;
}
.reset-confirmation__switch {
  display: none;
  margin-top: 2rem;
}

.nexaautocolor {
  --chart-total-width: 13rem;
}

.maxmeyer {
  --chart-total-width: 10rem;
}

.charts {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: calc(75% - var(--chart-indent));
  margin-top: 0.9rem;
}

.chart {
  width: calc(100% - var(--chart-panel-summary-width) - 2rem);
}
.chart-panels {
  width: 100%;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1vh;
}
.chart-panel {
  margin: 0;
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  width: 100%;
}
.chart-panel:first-child {
  margin-top: 0;
}
.chart-panel__data {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.chart-panel__summary {
  width: var(--chart-panel-summary-width);
  font-size: var(--small-font);
  /* font-weight: 100; */
  line-height: 1;
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}
.chart-panel__summary .left {
  text-align: right;
  width: auto;
  margin-right: 0.25rem;
}
.chart-panel.energy_consumption .visualizid,
.chart-panel.energy_consumption .moonwalk, .chart-panel.co2_emissions .visualizid,
.chart-panel.co2_emissions .moonwalk {
  display: none;
}
.chart-headline {
  margin: 0rem 0 0.25rem;
  font-size: 0.9rem;
  letter-spacing: 0.075rem;
  color: var(--color-white-75);
  font-weight: 400;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.chart-indication {
  color: var(--color-mint-200);
  filter: brightness(1.2);
}
.chart-legend {
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: var(--border-petrol);
  display: flex;
  align-items: baseline;
  font-size: 0.8rem;
  letter-spacing: 0.075rem;
  color: var(--color-white-75);
}
.chart-legend__item {
  position: relative;
  margin: 0 1.5rem 0 0;
  padding-left: calc(var(--small-font) * 2 + 0.75rem);
  display: flex;
  align-items: center;
}
.chart-legend__item.visualizid, .chart-legend__item.moonwalk {
  padding-left: calc(var(--small-font) + 0.5rem);
}
.chart-legend__item::before, .chart-legend__item::after {
  content: " ";
  display: inline-block;
  position: absolute;
  width: var(--small-font);
  height: var(--small-font);
  border-radius: var(--chart-bar-radius);
}
.chart-legend__item::before {
  left: 0;
}
.chart-legend__item::after {
  left: calc(var(--small-font) + 0.25rem);
}
.chart__above, .chart__below {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
}
.chart__bar {
  display: flex;
  flex-direction: row;
  justify-content: left;
  position: relative;
  width: calc(100% - var(--chart-total-width) - 1rem);
  min-height: calc(var(--chart-bar-height) + 1.9rem);
  height: calc(1vh + 1.9rem);
  max-height: 2.9rem;
}
.chart__bar::before {
  content: "";
  display: block;
  background: var(--color-forest-900-25);
  border-right: thin solid var(--color-ppg-basecoat);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  min-height: var(--chart-bar-height);
  height: 1vh;
  max-height: 1rem;
  border-radius: var(--chart-bar-radius);
}
.chart__value {
  --old: 0;
  position: relative;
  min-height: calc(var(--chart-bar-height) + 1.1rem);
  height: calc(1vh + 1.1rem);
  max-height: 2.1rem;
  width: 50px;
  font-size: var(--small-font);
  /* font-weight: 100; */
}
.chart__value::before {
  content: " ";
  display: inline-block;
  position: absolute;
  top: 0;
  left: var(--chart-bar-gap);
  width: calc(100% - var(--chart-bar-gap) * 2);
  min-height: var(--chart-bar-height);
  height: 1vh;
  max-height: 1rem;
  background-repeat: repeat;
  border-radius: var(--chart-bar-radius);
}
.chart__value.visualizid, .chart__value.basecoat {
  min-height: calc(var(--chart-bar-height) + 1.9rem);
  height: calc(1vh + 1.9rem);
  max-height: 2.9rem;
}
.chart__value.primer::after {
  content: " ";
  display: none;
  position: absolute;
  top: 0;
  left: var(--chart-bar-gap);
  width: 0%;
  min-height: var(--chart-bar-height);
  height: 1vh;
  max-height: 1rem;
  background-color: rgba(0, 0, 0, 0.25);
  transition: width 1s ease;
}
.chart__value-number {
  position: absolute;
  bottom: 0px;
  right: 0;
}
.chart__total {
  margin-left: 1rem;
  position: relative;
  width: var(--chart-total-width);
  display: flex;
  justify-content: space-between;
}
.chart__total .chart__value-number {
  position: relative;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  font-feature-settings: "tnum" 1;
}
.chart__above {
  align-items: flex-end;
}
.chart__above .chart__bar {
  margin-top: 0;
  margin-bottom: var(--chart-bar-gap);
  align-items: flex-end;
}
.chart__above .chart__bar::before {
  top: auto;
  bottom: 0;
}
.chart__above .chart__value::before, .chart__above .chart__value::after {
  top: auto;
  bottom: 0;
}
.chart__above .chart__value-number {
  top: 0px;
  /* right: 0.2rem; */
}
.chart__below {
  margin-top: var(--chart-row-gap);
}
.chart__below .primer::before {
  background-color: var(--color-gen-primer);
}
.chart__below .basecoat::before {
  background-color: var(--color-gen-basecoat);
}
.chart__below .clearcoat::before {
  background-color: var(--color-gen-clearcoat);
}
.chart__arrow {
  width: 0.5rem;
  height: auto;
  margin-left: 0.5rem;
}
.chart__arrow .shape {
  fill: var(--color-petrol);
}
.chart__summary {
  display: block;
  width: 100%;
  margin-bottom: 0.25rem;
  font-size: 1.7rem;
  font-weight: 500;
  letter-spacing: 0rem;
  text-align: right;
  font-feature-settings: "tnum";
  font-variant-numeric: tabular-nums;
  color: var(--color-mint-200);
  filter: brightness(1.2);
  order: 1;
}
.chart__summary-prefix {
  display: block;
  order: 3;
}
.chart__summary-suffix {
  display: block;
  order: 2;
  margin-right: 0.25rem;
}

.moonwalk .chart__value-number {
  left: 0.2rem;
}

.visualizid .chart__value-number {
  left: 0;
  transform: translateX(-0.5rem);
}

.split .chart__value.primer::after {
  display: inline-block;
}

/*  transitions */
:root {
  --test-val: 50;
}

#ppg-cycle_time-primer {
  transition: width 1s ease;
  width: calc(var(--ppg-cycle_time-primer) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-cycle_time-primer::after {
  width: calc(var(--ppg-cycle_time-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-cycle_time-visualizid {
  transition: width 1s ease;
  width: calc(var(--ppg-cycle_time-visualizid) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-cycle_time-visualizid::after {
  width: calc(var(--ppg-cycle_time-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-cycle_time-moonwalk {
  transition: width 1s ease;
  width: calc(var(--ppg-cycle_time-moonwalk) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-cycle_time-moonwalk::after {
  width: calc(var(--ppg-cycle_time-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-cycle_time-basecoat {
  transition: width 1s ease;
  width: calc(var(--ppg-cycle_time-basecoat) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-cycle_time-basecoat::after {
  width: calc(var(--ppg-cycle_time-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-cycle_time-clearcoat {
  transition: width 1s ease;
  width: calc(var(--ppg-cycle_time-clearcoat) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-cycle_time-clearcoat::after {
  width: calc(var(--ppg-cycle_time-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-cycle_time-primer {
  transition: width 1s ease;
  width: calc(var(--generic-cycle_time-primer) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-cycle_time-primer::after {
  width: calc(var(--generic-cycle_time-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-cycle_time-visualizid {
  transition: width 1s ease;
  width: calc(var(--generic-cycle_time-visualizid) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-cycle_time-visualizid::after {
  width: calc(var(--generic-cycle_time-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-cycle_time-moonwalk {
  transition: width 1s ease;
  width: calc(var(--generic-cycle_time-moonwalk) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-cycle_time-moonwalk::after {
  width: calc(var(--generic-cycle_time-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-cycle_time-basecoat {
  transition: width 1s ease;
  width: calc(var(--generic-cycle_time-basecoat) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-cycle_time-basecoat::after {
  width: calc(var(--generic-cycle_time-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-cycle_time-clearcoat {
  transition: width 1s ease;
  width: calc(var(--generic-cycle_time-clearcoat) / var(--cycle_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-cycle_time-clearcoat::after {
  width: calc(var(--generic-cycle_time-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-labour_time-primer {
  transition: width 1s ease;
  width: calc(var(--ppg-labour_time-primer) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-labour_time-primer::after {
  width: calc(var(--ppg-labour_time-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-labour_time-visualizid {
  transition: width 1s ease;
  width: calc(var(--ppg-labour_time-visualizid) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-labour_time-visualizid::after {
  width: calc(var(--ppg-labour_time-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-labour_time-moonwalk {
  transition: width 1s ease;
  width: calc(var(--ppg-labour_time-moonwalk) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-labour_time-moonwalk::after {
  width: calc(var(--ppg-labour_time-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-labour_time-basecoat {
  transition: width 1s ease;
  width: calc(var(--ppg-labour_time-basecoat) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-labour_time-basecoat::after {
  width: calc(var(--ppg-labour_time-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-labour_time-clearcoat {
  transition: width 1s ease;
  width: calc(var(--ppg-labour_time-clearcoat) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-labour_time-clearcoat::after {
  width: calc(var(--ppg-labour_time-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-labour_time-primer {
  transition: width 1s ease;
  width: calc(var(--generic-labour_time-primer) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-labour_time-primer::after {
  width: calc(var(--generic-labour_time-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-labour_time-visualizid {
  transition: width 1s ease;
  width: calc(var(--generic-labour_time-visualizid) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-labour_time-visualizid::after {
  width: calc(var(--generic-labour_time-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-labour_time-moonwalk {
  transition: width 1s ease;
  width: calc(var(--generic-labour_time-moonwalk) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-labour_time-moonwalk::after {
  width: calc(var(--generic-labour_time-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-labour_time-basecoat {
  transition: width 1s ease;
  width: calc(var(--generic-labour_time-basecoat) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-labour_time-basecoat::after {
  width: calc(var(--generic-labour_time-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-labour_time-clearcoat {
  transition: width 1s ease;
  width: calc(var(--generic-labour_time-clearcoat) / var(--labour_time-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-labour_time-clearcoat::after {
  width: calc(var(--generic-labour_time-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-energy_consumption-primer {
  transition: width 1s ease;
  width: calc(var(--ppg-energy_consumption-primer) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-energy_consumption-primer::after {
  width: calc(var(--ppg-energy_consumption-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-energy_consumption-visualizid {
  transition: width 1s ease;
  width: calc(var(--ppg-energy_consumption-visualizid) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-energy_consumption-visualizid::after {
  width: calc(var(--ppg-energy_consumption-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-energy_consumption-moonwalk {
  transition: width 1s ease;
  width: calc(var(--ppg-energy_consumption-moonwalk) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-energy_consumption-moonwalk::after {
  width: calc(var(--ppg-energy_consumption-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-energy_consumption-basecoat {
  transition: width 1s ease;
  width: calc(var(--ppg-energy_consumption-basecoat) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-energy_consumption-basecoat::after {
  width: calc(var(--ppg-energy_consumption-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-energy_consumption-clearcoat {
  transition: width 1s ease;
  width: calc(var(--ppg-energy_consumption-clearcoat) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-energy_consumption-clearcoat::after {
  width: calc(var(--ppg-energy_consumption-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-energy_consumption-primer {
  transition: width 1s ease;
  width: calc(var(--generic-energy_consumption-primer) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-energy_consumption-primer::after {
  width: calc(var(--generic-energy_consumption-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-energy_consumption-visualizid {
  transition: width 1s ease;
  width: calc(var(--generic-energy_consumption-visualizid) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-energy_consumption-visualizid::after {
  width: calc(var(--generic-energy_consumption-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-energy_consumption-moonwalk {
  transition: width 1s ease;
  width: calc(var(--generic-energy_consumption-moonwalk) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-energy_consumption-moonwalk::after {
  width: calc(var(--generic-energy_consumption-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-energy_consumption-basecoat {
  transition: width 1s ease;
  width: calc(var(--generic-energy_consumption-basecoat) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-energy_consumption-basecoat::after {
  width: calc(var(--generic-energy_consumption-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-energy_consumption-clearcoat {
  transition: width 1s ease;
  width: calc(var(--generic-energy_consumption-clearcoat) / var(--energy_consumption-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-energy_consumption-clearcoat::after {
  width: calc(var(--generic-energy_consumption-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-co2_emissions-primer {
  transition: width 1s ease;
  width: calc(var(--ppg-co2_emissions-primer) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-co2_emissions-primer::after {
  width: calc(var(--ppg-co2_emissions-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-co2_emissions-visualizid {
  transition: width 1s ease;
  width: calc(var(--ppg-co2_emissions-visualizid) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-co2_emissions-visualizid::after {
  width: calc(var(--ppg-co2_emissions-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-co2_emissions-moonwalk {
  transition: width 1s ease;
  width: calc(var(--ppg-co2_emissions-moonwalk) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-co2_emissions-moonwalk::after {
  width: calc(var(--ppg-co2_emissions-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-co2_emissions-basecoat {
  transition: width 1s ease;
  width: calc(var(--ppg-co2_emissions-basecoat) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-co2_emissions-basecoat::after {
  width: calc(var(--ppg-co2_emissions-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#ppg-co2_emissions-clearcoat {
  transition: width 1s ease;
  width: calc(var(--ppg-co2_emissions-clearcoat) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#ppg-co2_emissions-clearcoat::after {
  width: calc(var(--ppg-co2_emissions-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-co2_emissions-primer {
  transition: width 1s ease;
  width: calc(var(--generic-co2_emissions-primer) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-co2_emissions-primer::after {
  width: calc(var(--generic-co2_emissions-primer-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-co2_emissions-visualizid {
  transition: width 1s ease;
  width: calc(var(--generic-co2_emissions-visualizid) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-co2_emissions-visualizid::after {
  width: calc(var(--generic-co2_emissions-visualizid-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-co2_emissions-moonwalk {
  transition: width 1s ease;
  width: calc(var(--generic-co2_emissions-moonwalk) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-co2_emissions-moonwalk::after {
  width: calc(var(--generic-co2_emissions-moonwalk-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-co2_emissions-basecoat {
  transition: width 1s ease;
  width: calc(var(--generic-co2_emissions-basecoat) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-co2_emissions-basecoat::after {
  width: calc(var(--generic-co2_emissions-basecoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

#generic-co2_emissions-clearcoat {
  transition: width 1s ease;
  width: calc(var(--generic-co2_emissions-clearcoat) / var(--co2_emissions-max) * 100%);
  min-width: calc(1px + var(--chart-bar-gap) * 2);
}
#generic-co2_emissions-clearcoat::after {
  width: calc(var(--generic-co2_emissions-clearcoat-sandable) * 1% - var(--chart-bar-gap) * 2);
}

/*  legend-colors */
.primer::before {
  background-color: var(--color-ppg-primer);
}

.primer::after {
  background-color: var(--color-gen-primer);
}

.visualizid::before {
  background-color: var(--color-linq);
}

.visualizid::after {
  display: none;
}

.moonwalk::before {
  background-color: var(--color-mw);
}

.moonwalk::after {
  display: none;
}

.basecoat::before {
  background-color: var(--color-ppg-basecoat);
}

.basecoat::after {
  background-color: var(--color-gen-basecoat);
}

.clearcoat::before {
  background-color: var(--color-ppg-clearcoat);
}

.clearcoat::after {
  background-color: var(--color-gen-clearcoat);
}

@keyframes slide-from-bottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0%);
  }
}
@keyframes slide-to-bottom {
  0% {
    transform: translateY(0%);
  }
  100% {
    transform: translateY(100%);
  }
}
@keyframes slide-from-left {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes slide-to-left {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}
@keyframes slide-from-right {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0%);
  }
}
@keyframes slide-to-right {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(100%);
  }
}
.interface {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: var(--color-forest-600);
  border-top: var(--border-petrol);
  box-shadow: rgba(0, 0, 0, 0.25) 0 0 1rem;
  z-index: 20;
}
.interface.bottom.show {
  animation: slide-from-bottom forwards 0.3s ease;
}
.interface.bottom.hide {
  animation: slide-to-bottom forwards 0.3s ease;
}
.interface.left {
  top: 0;
  bottom: auto;
  width: 50%;
  min-width: 800px;
  height: 100vh;
  padding-top: 7rem;
  border-left: var(--border-petrol);
  transform: translateY(0%) translateX(-100%);
}
.interface.left.show {
  animation: slide-from-left forwards 0.3s ease;
}
.interface.left.hide {
  animation: slide-to-left forwards 0.3s ease;
}
.interface.left .ppg-specials {
  flex-direction: column;
}
.interface.left .interface__container:last-of-type {
  padding-right: 1rem;
}
.interface.right {
  top: 0;
  bottom: auto;
  right: 0;
  left: auto;
  width: 50%;
  min-width: 800px;
  height: 100vh;
  padding-top: 7rem;
  border-left: var(--border-petrol);
  transform: translateY(0%) translateX(100%);
}
.interface.right.show {
  animation: slide-from-right forwards 0.3s ease;
}
.interface.right.hide {
  animation: slide-to-right forwards 0.3s ease;
}
.interface.right .ppg-specials {
  flex-direction: column;
}
.interface.right .interface__container:first-of-type {
  padding-left: 1rem;
}
.interface h3 {
  font-size: var(--small-font);
  margin: 0 0 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.075rem;
  font-weight: 400;
}
.interface__container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;
  width: var(--interface-container-width);
  padding: 1em 1em 0rem;
}
.interface__container:first-of-type {
  padding-left: var(--chart-indent);
}
.interface__container:last-of-type {
  padding-right: var(--chart-indent);
}
.interface__headline {
  margin: 0;
  min-width: 33%;
  width: 100%;
  font-weight: 300;
  font-size: 0.9rem;
  letter-spacing: 0.075rem;
  padding: 0.66667rem 0;
}

.user-details {
  width: var(--user-details-width);
  min-width: 15%;
  padding: 1em 1em 3rem;
  border-left: var(--border-petrol);
  border-right: var(--border-petrol);
}
.user-details .slider {
  margin: 1.25rem 0;
}

.ppg-specials {
  display: flex;
  align-items: center;
  flex-direction: row;
  width: 100%;
  min-width: 67%;
  justify-content: space-between;
}
.ppg-specials .switch {
  width: 100%;
  margin: 0;
}

.ui-product,
.ui-process,
.ui-duration {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 60px;
}

.generic-basecoat .ui-duration,
.ppg-primer .ui-duration,
.ppg-basecoat .ui-duration,
.ppg-clearcoat .ui-duration {
  display: none;
}

.interface__top-bar,
.ui-section {
  padding-bottom: 1em;
  border-bottom: var(--border-petrol);
  margin-bottom: 0;
}
.interface__top-bar:last-child,
.ui-section:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.interface__top-bar {
  width: 100%;
  display: flex;
  align-items: center;
}

.ui-section {
  width: 33.33333%;
  padding-top: 1rem;
  padding-bottom: 0;
  border: none;
  margin-bottom: 0;
}
.ui-section:first-of-type {
  padding-right: 0.5rem;
}
.ui-section:nth-of-type(2) {
  padding-left: 0.5rem;
  padding-right: 0.5rem;
  border-left: var(--color-petrol) thin solid;
  border-right: var(--color-petrol) thin solid;
  height: 100%;
}
.ui-section:last-of-type {
  padding-left: 0.5rem;
}

.ui-section__sub {
  padding-bottom: 1rem;
  border-bottom: var(--border-petrol);
  margin-bottom: 1rem;
}
.ui-section__sub:last-child {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.generic-primer {
  /* h3 {
    color: $color;
    filter: brightness(1.33333);
    @media screen and (min-width: $interface-bp) {
      color: $color;
      padding-bottom: 1em;
      border-image: linear-gradient(90deg, transparent, $color, transparent) 1;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      margin: 0.5em 0 2em;
    }
  }*/
}
.generic-primer input[type=range] {
  background: linear-gradient(to right, var(--color-gen-primer) var(--slider-gradient-position), var(--color-forest-900) var(--slider-gradient-position));
  border-color: var(--color-gen-primer);
}
.generic-primer .switch__symbol {
  border-color: var(--color-gen-primer);
}
.generic-primer .switch.tripple {
  border-color: var(--color-gen-primer);
}
.generic-basecoat {
  /* h3 {
    color: $color;
    filter: brightness(1.33333);
    @media screen and (min-width: $interface-bp) {
      color: $color;
      padding-bottom: 1em;
      border-image: linear-gradient(90deg, transparent, $color, transparent) 1;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      margin: 0.5em 0 2em;
    }
  }*/
}
.generic-basecoat input[type=range] {
  background: linear-gradient(to right, var(--color-gen-basecoat) var(--slider-gradient-position), var(--color-forest-900) var(--slider-gradient-position));
  border-color: var(--color-gen-basecoat);
}
.generic-basecoat .switch__symbol {
  border-color: var(--color-gen-basecoat);
}
.generic-basecoat .switch.tripple {
  border-color: var(--color-gen-basecoat);
}
.generic-clearcoat {
  /* h3 {
    color: $color;
    filter: brightness(1.33333);
    @media screen and (min-width: $interface-bp) {
      color: $color;
      padding-bottom: 1em;
      border-image: linear-gradient(90deg, transparent, $color, transparent) 1;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      margin: 0.5em 0 2em;
    }
  }*/
}
.generic-clearcoat input[type=range] {
  background: linear-gradient(to right, var(--color-gen-clearcoat) var(--slider-gradient-position), var(--color-forest-900) var(--slider-gradient-position));
  border-color: var(--color-gen-clearcoat);
}
.generic-clearcoat .switch__symbol {
  border-color: var(--color-gen-clearcoat);
}
.generic-clearcoat .switch.tripple {
  border-color: var(--color-gen-clearcoat);
}

.ppg-primer {
  /* h3 {
    color: $color;
    filter: brightness(1.33333);
    @media screen and (min-width: $interface-bp) {
      color: $color;
      padding-bottom: 1em;
      border-image: linear-gradient(90deg, transparent, $color, transparent) 1;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      margin: 0.5em 0 2em;
    }
  }*/
}
.ppg-primer input[type=range] {
  background: linear-gradient(to right, var(--color-ppg-primer) var(--slider-gradient-position), var(--color-forest-900) var(--slider-gradient-position));
  border-color: var(--color-ppg-primer);
}
.ppg-primer .switch__symbol {
  border-color: var(--color-ppg-primer);
}
.ppg-primer .switch.tripple {
  border-color: var(--color-ppg-primer);
}
.ppg-basecoat {
  /* h3 {
    color: $color;
    filter: brightness(1.33333);
    @media screen and (min-width: $interface-bp) {
      color: $color;
      padding-bottom: 1em;
      border-image: linear-gradient(90deg, transparent, $color, transparent) 1;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      margin: 0.5em 0 2em;
    }
  }*/
}
.ppg-basecoat input[type=range] {
  background: linear-gradient(to right, var(--color-ppg-basecoat) var(--slider-gradient-position), var(--color-forest-900) var(--slider-gradient-position));
  border-color: var(--color-ppg-basecoat);
}
.ppg-basecoat .switch__symbol {
  border-color: var(--color-ppg-basecoat);
}
.ppg-basecoat .switch.tripple {
  border-color: var(--color-ppg-basecoat);
}
.ppg-clearcoat {
  /* h3 {
    color: $color;
    filter: brightness(1.33333);
    @media screen and (min-width: $interface-bp) {
      color: $color;
      padding-bottom: 1em;
      border-image: linear-gradient(90deg, transparent, $color, transparent) 1;
      border-bottom-width: 1px;
      border-bottom-style: solid;
      margin: 0.5em 0 2em;
    }
  }*/
}
.ppg-clearcoat input[type=range] {
  background: linear-gradient(to right, var(--color-ppg-clearcoat) var(--slider-gradient-position), var(--color-forest-900) var(--slider-gradient-position));
  border-color: var(--color-ppg-clearcoat);
}
.ppg-clearcoat .switch__symbol {
  border-color: var(--color-ppg-clearcoat);
}
.ppg-clearcoat .switch.tripple {
  border-color: var(--color-ppg-clearcoat);
}

#visualizid .switch__symbol {
  border-color: var(--color-linq);
}

#moonwalk .switch__symbol {
  border-color: var(--color-mw);
}

.show-interface {
  position: absolute;
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  width: var(--user-details-width);
}
.show-interface__button {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  background: var(--color-forest-500);
  border: var(--border-petrol);
  border-bottom: none;
  border-radius: 2rem 2rem 0 0;
  padding: 1.5rem 5rem;
  color: var(--color-white-75);
}
.show-interface__icon {
  width: 1rem;
  height: auto;
  margin-right: 1rem;
}

.confirm-interface {
  display: flex;
  justify-content: center;
  margin-top: 3rem;
  border-top: var(--border-petrol);
  padding-top: 2rem;
}
.confirm-interface__button {
  position: relative;
  display: flex;
  flex-direction: row;
  width: fit-content;
  padding-right: 1.5rem;
  background: var(--color-petrol);
  border: var(--color-white-25) thin solid;
  border-radius: 2rem;
  padding: 0.5rem 2rem;
  color: var(--color-white);
  align-items: center;
}
.confirm-interface__icon {
  width: 1rem;
  height: auto;
  margin-right: 1rem;
}

@media screen and (min-width: 1250px) {
  .interface {
    font-size: 14px;
  }
}
/*
@media screen and (min-width: $interface-bp) {
  .interface {
    h3 {
      text-align: center;
      font-weight: 100;
      font-size: 0.8rem;
    }
    &__top-bar {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      align-self: baseline;
      align-items: center;
    }
    &__headline {
      width: 100%;
      padding: 2.5em 0;
    }
    &__container {
      flex-direction: row;
      flex-wrap: wrap;
      height: fit-content;
      padding-top: 1em;

      &.ppg {
        .interface__top-bar > * {
          width: 30%;
        }
        .interface__headline {
          padding-top: 1em;
          padding-bottom: 0;
          border-bottom: none;
          margin-bottom: 0;
        }
      }
    }
  }
  .user-details {
    padding-top: 1em;
    .interface__headline {
      text-align: center;
    }
  }

  .ui-section {
    width: 33.33333%;
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
  }

  .ui-product,
  .ui-process,
  .ui-duration {
    height: 5em;
    justify-content: center;
  }
  .ppg-presets {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
    flex-grow: 1;
    .switch.tripple {
      margin: 0;
    }
  }
  .ppg-specials {
    flex-direction: column;
    align-items: end;
    padding: 0;
    .switch {
      width: fit-content;
    }
  }

  .slider {
    width: 100%;
  }
}
*/
.pdf-export {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
}

#pdf-content {
  --font-size: 12px;
  --font-color: #333;
  --h1-size: calc(var(--font-size) * 1.33333);
  --small-font: 12px;
  --chart-total-width: calc(var(--font-size) * 10);
  --chart-panel-summary-width: calc(var(--font-size) * 8);
  --chart-bar-height: var(--font-size);
  --chart-bar-gap: 1px;
  --color-linq: hsl(45, 100%, 50%);
  --color-gen-sandable: hsl(340, 40%, 30%);
  --color-gen-primer: hsl(340, 60%, 60%);
  --color-gen-basecoat: hsl(340, 65%, 75%);
  --color-gen-clearcoat: hsl(340, 70%, 85%);
  --color-ppg-sandable: hsl(164, 100%, 20%);
  --color-ppg-primer: hsl(164, 50%, 30%);
  --color-ppg-basecoat: hsl(164, 60%, 40%);
  --color-ppg-clearcoat: hsl(164, 70%, 50%);
  position: relative;
  background: #fff;
  padding: 3rem;
  width: 800px;
  color: var(--font-color);
  font-size: var(--font-size);
  margin: 1px;
}
#pdf-content h1 {
  color: var(--color-petrol);
  margin: 2em 0 1em 0;
}
#pdf-content .left-space {
  padding-left: calc(var(--font-size) * 0.5 + 3px);
}
#pdf-content .header {
  padding: 0 0 2em;
}
#pdf-content .header.next-page {
  padding: 3em 0 2em;
}
#pdf-content .header img {
  height: 20px !important;
}
#pdf-content .datetime {
  margin-top: 100px;
}
#pdf-content .generic-sandable, #pdf-content .generic-wow, #pdf-content .generic-basecoat, #pdf-content .generic-clearcoat,
#pdf-content .ppg-sandable,
#pdf-content .ppg-wow,
#pdf-content .ppg-basecoat,
#pdf-content .ppg-clearcoat {
  border-left: 3px solid var(--color-mint);
  padding-left: calc(var(--font-size) * 0.5);
}
#pdf-content .generic-sandable {
  border-left-color: var(--color-gen-sandable);
}
#pdf-content .generic-wow {
  border-left-color: var(--color-gen-primer);
}
#pdf-content .generic-basecoat {
  border-left-color: var(--color-gen-basecoat);
}
#pdf-content .generic-clearcoat {
  border-left-color: var(--color-gen-clearcoat);
}
#pdf-content .ppg-sandable {
  border-left-color: var(--color-ppg-sandable);
}
#pdf-content .ppg-wow {
  border-left-color: var(--color-ppg-primer);
}
#pdf-content .ppg-basecoat {
  border-left-color: var(--color-ppg-basecoat);
}
#pdf-content .ppg-clearcoat {
  border-left-color: var(--color-ppg-clearcoat);
}

.pdf__section .charts,
.pdf__section .potential {
  width: 100%;
}
.pdf__section .potential {
  background: none;
  border-radius: 0;
  flex-direction: column;
  padding: 24px;
}
.pdf__section .potential__indication {
  display: none;
}
.pdf__section .potential__label {
  text-align: initial;
  font-size: 1.33333em;
  letter-spacing: 0.05em;
}
.pdf__section .potential__value {
  color: var(--font-color);
  font-size: 1.33em;
}
.pdf__section .potential__value#additional-cars {
  margin-right: 26px;
}
.pdf__section .potential__currency {
  bottom: 0;
  color: var(--font-color);
  font-size: var(--font-size);
  width: 20px;
  text-align: left;
}
.pdf__section .potential p {
  border: none;
  padding: 0;
  flex-direction: row-reverse;
  align-items: baseline;
  margin-bottom: 0.5em;
}
.pdf__section .potential p:nth-child(3) {
  border: none;
}
.pdf__section .chart {
  width: calc(100% - var(--chart-panel-summary-width) - 0.5em);
}
.pdf__section .chart-headline {
  color: var(--font-color);
  font-size: 14px;
  margin-top: var(--font-size);
}
.pdf__section .chart-legend {
  flex-wrap: wrap;
  color: var(--font-color);
}
.pdf__section .chart-legend__item {
  width: 48%;
  margin: 0 2% 0 0;
  font-size: var(--font-size);
}
.pdf__section .chart-legend__item.primer {
  order: 1;
}
.pdf__section .chart-legend__item.basecoat {
  order: 3;
}
.pdf__section .chart-legend__item.clearcoat {
  order: 5;
}
.pdf__section .chart-legend__item.visualizid {
  order: 2;
}
.pdf__section .chart-legend__item.moonwalk {
  order: 4;
}
.pdf__section .chart__bar {
  min-height: calc(var(--font-size) * 3.2);
  height: calc(var(--font-size) * 3);
}
.pdf__section .chart__bar::before {
  display: none;
}
.pdf__section .chart__below {
  margin-top: 0;
}
.pdf__section .chart__value {
  height: 28px;
  min-height: calc(var(--chart-bar-height) + 14px);
}
.pdf__section .chart__value::before {
  height: var(--font-size);
}
.pdf__section .chart__value-number {
  font-size: var(--font-size);
}
.pdf__section .chart__value.primer::after {
  height: var(--font-size);
}
.pdf__section .chart__value.visualizid, .pdf__section .chart__value.basecoat {
  min-height: calc(var(--chart-bar-height) + 30px);
}
.pdf__section .chart__summary {
  color: var(--font-color);
  text-shadow: none;
  font-size: 1.33em;
  margin: 0;
}
.pdf__section .chart__summary-prefix {
  font-size: var(--font-size);
}
.pdf__section .chart-panel__summary {
  font-size: var(--font-size);
  margin-bottom: 1px;
}
.pdf__section .chart-panels {
  gap: 0;
}
.pdf__section .chart-indication, .pdf__section .chart__arrow {
  display: none;
}
.pdf__table {
  width: 100%;
  border-top: thin solid var(--font-color);
  border-bottom: thin solid var(--font-color);
}
.pdf__table th,
.pdf__table td {
  padding: calc(var(--font-size) * 0.75) 0;
  text-align: left;
  border-bottom: thin solid var(--font-color);
}
.pdf__table th::first-letter,
.pdf__table td::first-letter {
  text-transform: uppercase;
}
.pdf__table th {
  width: 150px;
  vertical-align: top;
}
.pdf__table td:first-of-type {
  width: 180px;
}
.pdf__table tr:last-child th,
.pdf__table tr:last-child td {
  border-bottom: thin solid var(--font-color);
}
.pdf__checkbox {
  width: calc(var(--font-size) * 1.5);
  height: auto;
  margin-left: calc(var(--font-size) * 0.5);
  margin-bottom: -4px;
}/*# sourceMappingURL=style.css.map */