@import url('https://fonts.googleapis.com/css2?family=Lato:wght@300;400;700;900&display=swap');

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

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,
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 {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
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;
}
a {
  text-decoration: none;
}
* {
 box-sizing: border-box;
}

:root {
  font-size: 0.875em;
}
@media screen and (min-width: 40em) {
  :root {
    font-size: 1em;
  }
}

/* ------------------ VARIABLES ------------------ */

:root {
  --color--primary: rgba(31,49,91,1);
  --color--secondary: rgba(89,195,239,1);
  --color--red: rgba(237,58,83,1);
  --color--text: rgba(92,102,104,1);

  --color--input-background: rgba(247,247,247,1);
  --color--input-background--dark: rgba(240,240,240,1);

  --color--border-primary: rgba(255,255,255,0.2);
  --color--border: rgba(236,236,236,1);

  --color--select-border: rgba(227,227,227,1);
  --color--select-text: rgba(153,153,153,1);

  --color--background-form: rgba(255,255,255,1);
  --color--background-summary: rgba(250,250,250,1);

  --form-wrapper-width: 28rem;
  --form-width: 28rem;
  --spacing--summary-left-gap: 8rem;
}

/* ------------------ BODY ------------------ */


* {
  box-sizing: border-box;
}

body {
  position: relative;
  font-family: 'Lato', sans-serif;
  font-weight: 300;
  line-height: 1.4em;
  overflow-x: hidden;
  width: 100vw;
}

/* ------------------ CONTAINERS ------------------ */

#main-container {
  position: relative;
  width: 100%;
  max-width: 115rem;
  margin: 0 auto;
}

.form-container {
  position: relative;
  display: flex;
  justify-content: flex-end;
  z-index: 200;
  min-height: 100vh;
  width: var(--form-wrapper-width);
}

.form-container__wrapper {
  width: var(--form-width);
  padding: 2rem 0rem 2rem 2rem;
}

.summary-container {
  position: absolute;
  z-index: 100;
  top: 0;
  left: calc(var(--form-wrapper-width) - var(--spacing--summary-left-gap));
  width: calc(100% - var(--form-wrapper-width) + var(--spacing--summary-left-gap));
  min-height: 100%;
  border-left: 1px solid var(--color--border);
  background: var(--color--background-summary);
  padding-left: var(--spacing--summary-left-gap);
}

.summary-container::after {
  display: block;
  position: relative;
  content: '';
  background: white;
  position: absolute;
  top: 0;
  left: calc(-100% - 1px);
  width: 100%;
  height: 100%;
}

.summary-container__wrapper {
  margin: 0 auto;
  padding: 2rem;
  width: 100%;
  max-width: 46rem;
  opacity: 0;
}

@media screen and (max-width: 55em) {
  .form-container,
  .summary-container {
    position: relative;
    width: 100%;
    top: 0;
    left: 0;
    right: 0;
    padding: 0;
    border: none;
    overflow-x: hidden;
  }

  .summary-container {
    border-top: 1px solid var(--color--border);
    padding-top: 2rem;
  }

  .form-container__wrapper,
  .summary-container__wrapper {
    width: 100%;
    padding: 2rem;
    margin: 0 auto;
    max-width: 41.25rem;
  }
}

@media screen and (min-width: 64em) {
  :root {
    --form-width: 32rem;
    --form-wrapper-width: 34rem;
  }
  .form-container__wrapper {
    padding: 4rem 2rem;
  }
  .summary-container__wrapper {
    padding: 4rem 2rem;
  }
}

@media screen and (min-width: 76em) {
  :root {
    --form-width: 35rem;
    --form-wrapper-width: 40rem;
  }
  .summary-container__wrapper {
    padding: 4rem;
  }
}
@media screen and (min-width: 76em) {
  :root {
    --form-width: 36rem;
    --form-wrapper-width: 42rem;
  }
}

/* ------------------ MOBILE DISPLAY  ------------------ */

.topbar-savings {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 400;
  pointer-events: none;
  width: 100%;
  padding: 0rem 2rem;
  background: var(--color--primary);
  font-weight: 400;
  color: white;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.topbar-savings svg {
  height: 3.4rem;
  width: auto;
  margin-right: 0rem;
  stroke-width: 2;
  stroke: var(--color--secondary);
  fill: none;
}

.topbar-savings__saving {
  color: var(--color--secondary);
  font-weight: 600;
  margin-left: 0.5rem;
}

.topbar-savings__unit {
  font-size: 0.875em;
}

@media screen and (min-width: 55em) {
  .topbar-savings {
    display: none;
  }
}

/* ------------------ CONFIG SELECTS ------------------ */

.config-selects {
  position: absolute;
  top: 0;
  right: 4rem;
  z-index: 400;
  display: flex;
  width: auto;
  height: auto;
}

.config-select {
  display: flex;
  flex-direction: column;
}

.config-select a {
  display: block;
  height: 3rem;
  width: 3rem;
  line-height: 3rem;
  overflow: hidden;
  text-align: center;
  margin: 0;
  display: none;
  font-size: 1rem;
  color: white;
  font-weight: 400;
  background: var(--color--primary);
  border-top: 1px solid var(--color--border-primary);
}

.config-select a.selected {
  display: block;
  border-left: 1px solid var(--color--border-primary);
  border-top: none;
  order: -1 !important;
}

.config-select:first-child a{
  border-left: none;
}

.config-select.is-open a {
  display: block;
}

.config-select a:hover,
.config-select a:focus {
  background: var(--color--secondary);
}

@media screen and (max-width: 55em) {
  .config-selects {
    right: 2rem;
  }
}

/* ------------------ FORM CONTAINER ------------------ */

.form-container header {
  margin-top: 5.625rem;
  margin-bottom: 3rem;
}

.form-container__logo {
  width: 7.75rem;
  height: auto;
  margin-bottom: 5rem;
}

.form-container__logo svg {
  display: block;
  width: 100%;
  height: auto;
}

.form-container header h1 {
  font-size: 2.25rem;
  font-weight: 900;
  line-height: 1.2em;
  text-transform: uppercase;
  color: var(--color--primary);
}

.form-container header h1::after {
  content: '';
  display: block;
  width: 3.25rem;
  height: 0.25rem;
  margin-top: 1.625rem;
  margin-bottom: 1.875rem;
  background: var(--color--secondary);
}

.form-container header p {
  font-size: 1.25rem;
  line-height: 1.4em;
  color: var(--color--text);
  width: calc(100% - var(--spacing--summary-left-gap) - 1rem)
}

@media screen and (max-width: 55em) {
  .form-container header {
    margin-top: 2rem;
    margin-bottom: 2rem;
  }

  .form-container header p {
    width: 100%;
  }

  .form-container__logo {
    width: 8rem;
    height: auto;
    margin: 3rem auto 2rem;
  }
}

/* ------------------ INTRODUCTION ILLUSTRATION ------------------ */

.introduction-illustration { 
  display: block;
  z-index: 100;
  background: var(--color--background-summary);
  height: 100vh;
  min-height: 100vh;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
}

.form-container header .illustration {
  display: none;
  width: 100%;
  pointer-events: none;
  margin-bottom: 1rem;
}

.introduction-illustration svg,
.form-container header .illustration svg {
  display: block;
  margin-left: 2rem;
  margin-top: 2rem;
  width: calc(100% - 4rem);
  height: calc(100% - 4rem);
  object-fit: contain;
}

@media screen and (max-width: 55em) {
  .form-container header .illustration {
    display: block;
  }
}


/* ------------------ BLOCK FORM ------------------ */

.block-form {
  margin-bottom: 3rem;
}

.block-form h2 {
  text-transform: uppercase;
  color: var(--color--primary);
  font-weight: 900;
  font-size: 1.375rem;
  line-height: 1.2em;
  margin-bottom: 1.5rem;
}

.block-form h2 span:last-child {
  font-weight: 300;
}

.block-form__form {
  background: rgba(255,255,255,1);
  box-shadow: rgba(0,0,0,0.15) 0.375rem 0.5rem 2.65rem 0;
}

/* ------------------ FIELDSETS ------------------ */

.field input,
.field select {
  display: block;
  border: none;
  color: var(--color--primary);
  border: 0.125rem solid var(--color--input-background);
  outline: none;
  font-size: 1rem;
  font-weight: 400;
  margin-left: auto;
}

.field input:focus {
  outline: none;
  border-color: var(--color--primary);
}

.fieldset__primary {
  padding: 2rem;
}

.fieldset__primary .field {
  position: relative;
}

.fieldset__primary .field svg {
  position: absolute;
  top: 49%;
  left: 0.75rem;
  transform: translateY(-50%);
  height: 1.25rem;
  width: auto;
}


.fieldset__primary .field input,
.fieldset__primary .field select {
  display: block;
  width: 100%;
  padding: 1rem 1.125rem 1rem 2.25rem;
  background: var(--color--input-background);
  border-radius: 0.1875rem;
  outline: none;
}

.fieldset__secondary {
  padding: 2rem;
}

.fieldset__secondary .field {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  margin-bottom: 1rem;
}

.fieldset__secondary .field:last-child {
  margin-bottom: 0rem;
}

.fieldset__secondary .field label {
  line-height: 1.2em;
  font-weight: 600;
  color: var(--color--primary);
}

.fieldset__secondary .field input {
  width: 8rem;
  padding: 0.675rem 1.125rem;
  background: var(--color--input-background);
  text-align: right;
  border-radius: 0.25rem;
}

.fieldset__secondary .field__unit {
  width: 2.65rem;
  text-align: left;
  padding: 0 0 0 0.875rem;
}

.field__unit sup {
  vertical-align: super;
  font-size: .8em;
}

.fieldset__advanced {
  display: block;
  background: var(--color--background-summary);
  border-top: 1px solid var(--color--border);
}

.fieldset__advanced__view-more {
}

.advanced-link {
  display: block;
  width: 100%;
  color: var(--color--primary);
  text-align: center;
  text-transform: uppercase;
  padding: 1rem 2rem 0.875rem;
  color: var(--color--primary);
  font-size: 0.75rem;
  font-weight: 600;
}

.advanced-link svg {
  position: relative;
  top: 0.02rem;
  height: 0.6rem;
  width: auto;
  margin-left: 0.15rem;
  fill: var(--color--primary);
  transform: rotate(180deg);
}

.advanced-link.closed svg {
  transform: rotate(0deg);
}

.fieldset__advanced__content {
  padding: 0rem 2rem 1.25rem;
}

.fieldset__advanced__content.closed {
  height: 0;
  overflow: hidden;
  padding: 0;
}

.fieldset__advanced .field {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  margin-bottom: 0.75rem;
}

.fieldset__advanced .field:last-child {
  margin-bottom: 0rem;
}

.fieldset__advanced .field label {
  line-height: 1.2em;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color--primary);
}

.fieldset__advanced .field input {
  width: 8rem;
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
  background: var(--color--input-background--dark);
  text-align: right;
  border-radius: 0.25rem;
}

.fieldset__advanced .field__unit {
  width: 4rem;
  font-size: 0.875rem;
  text-align: left;
  padding: 0 0 0 0.875rem;
}

.field__description {
  display: none;
}

.fieldset__secondary .field label {
  max-width: calc(100% - 4rem - 8rem - 2rem);
}
.fieldset__advanced .field label {
  max-width: calc(100% - 4rem - 8rem - 2rem);
} 

.door-partial-opening {
  display: none;
}

.door-partial-opening.is-visible {
  display: block;
}

/* ------------------ SELECT AND OPTIONS ------------------ */

.select {
  width: 100%;
  margin-bottom: 1.5rem;
}

.select__title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--color--primary);
  margin-bottom: 0.75rem;
  text-transform: uppercase;
}

.select:last-child {
  margin-bottom: 0;
}

.options {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom: -1rem;
}

.option {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  width: calc(25% - 0.66rem);
  padding: 0.5rem 0.35rem;
  color: var(--color--select-text);
  border: 2px solid var(--color--select-border);
  border-radius: 0.25rem;
  font-weight: 600;
  font-size: 0.75rem;
  text-align: center;
  line-height: 1.2em;
  margin-bottom: 1rem;
}

@media screen and (max-width: 50em) {
  .option {
    width: calc(50% - 0.5rem);
  }
}

.option:hover,
.option:focus {
  cursor: pointer;
}

.option__icon {
  height: 4rem;
  width: auto;
  margin-bottom: 0.5rem;
}

.option__icon svg {
  height: 100%;
  width: auto;
  fill: var(--color--select-text);
}

.option__icon svg .opening-icon__manual, 
.option__icon svg .opening-icon__waves, 
.option__icon svg .opening-icon__lift, 
.option__icon svg .opening-icon__safety {
  fill: var(--color--select-text);
}

.option__icon svg .opening-icon__safety {
  opacity: 0.3;
}

.options--three .option {
  width: calc(33.33% - 0.66rem)
}

.option.selected {
  border-color: var(--color--primary);
  color: var(--color--primary);
}
.option.selected .option__icon svg {
  height: 100%;
  width: auto;
  fill: var(--color--primary);
}

.option.selected .option__icon svg .opening-icon__manual {
  fill: var(--color--primary);
}
.option.selected .option__icon svg .opening-icon__waves {
  fill: var(--color--secondary);
}
.option.selected .option__icon svg .opening-icon__lift {
  fill: var(--color--primary);
}
.option.selected .option__icon svg .opening-icon__safety {
  fill: var(--color--red);
  opacity: 0.6;
}

/* ------------------ SUMMARY ------------------ */

.summary h3 {
  font-size: 2.5rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--color--primary);
  line-height: 1.1em;
}

.summary h3 span {
  color: var(--color--secondary);
}


@media screen and (max-width: 55em) {
  .summary h3 {
    font-size: 1.75rem;
  }
}

.total {
  margin: 3rem 0rem;
}

.total h4 {
  font-weight: 700;
  font-size: 2.25rem;
  margin-bottom: 1.75rem;
  color: var(--color--primary);
}

.total__savings {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.total-saving {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  color: var(--color--primary);
  width: 30%;
  padding: 0rem 0.5rem 0.75rem;
  border: 1px solid var(--color--border);
  border-radius: 0.5rem;
  background: rgba(0,0,0,0.025);
}

.total-saving__icon {
  display: inline-block;
}

.total-saving__icon svg {
  height: 4.5rem;
  width: auto;
  stroke: var(--color--primary);
  stroke-width: 2;
  fill: none;
  margin-bottom: -1rem;
}

.total-saving__value {
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1em;
}


.total-saving__unit {
  margin-top: 0.15rem;
  font-size: 0.875rem;
}

.total-saving:first-child {
}

/* ------------------ CHART ------------------ */

.charts-container {
  display: block;
  position: relative;
}
.charts-container h4 {
  position: relative;
  font-weight: 700;
  font-size: 2rem;
  margin-bottom: 1.25rem;
  color: var(--color--primary);
}

.charts {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
}

.charts::before {
  content: '';
  position: absolute;
  background-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.025) 100%);
  width: 200vw;
  height: 100%;
  bottom: -1px;
  left: -100vw;
  border-bottom: 1px solid var(--color--border);
}

.chart {
  position: relative;
  width: calc(50% - 1rem);
}

.chart__title {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color--primary);
  margin-bottom: 0.3em;
}

.chart__subtitle {
  font-size: 1.25rem;
  color: var(--color--text);
  margin-bottom: 0.75rem;
}

.chart__bar {
  height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.chart__bar__part {
  position: relative;
  cursor: help;
}

.chart__bar__part__infos {
  pointer-events: none;
  position: absolute;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.25rem 0.5rem;
  top: 0rem;
  left: 0;
  background: white;
  color: var(--color--primary);
  transition: all .3s ease;
  opacity: 0;
}

.chart__bar__part:hover {
  z-index: 110;
  transition: transform .3s ease;
  transform: scale(1.02);
}

.chart__bar__part:hover .chart__bar__part__infos {
  box-shadow: rgba(0,0,0,0.15) 0.375rem 0.5rem 2.65rem 0;
  opacity: 1;
}

.chart__bar__part {
  width: 100%;
  height: 10%;
}

.chart__bar__1,
.chart-legend__1 .square {
  background-image: linear-gradient(180deg, #EF7F59 0%, #FF8C65 100%);
}
.chart__bar__2,
.chart-legend__2 .square {
  background-image: linear-gradient(180deg, #59C3EF 0%, #38AEDF 100%);
}
.chart__bar__3,
.chart-legend__3 .square {
  background-image: linear-gradient(180deg, #355080 0%, #172851 100%);
}

.chart-legend {
  margin-top: 2rem;
}

.chart-legend li {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  font-weight: 400;
  color: var(--color--text);
  line-height: 1.1em;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.chart-legend .square {
  height: 1em;
  width: 1em;
  margin-right: 0.5rem;
}

/* ------------------ FOOTER ------------------ */

.footer {
  padding-top: 2rem;
  opacity: 1;
}

.footer__study {
  font-size: 0.875rem;
  color: var(--color--text);
  margin-bottom: 1rem;
}

.footer__study a {
  color: var(--color--primary);
}

.footer__study a:focus,
.footer__study a:hover {
  color: var(--color--secondary);
}

.footer__powered-by {
  height: 4rem;
  width: 100%;
  background-image: url("/powered-by-bea.png");
  background-size: contain;
  background-position: left center;
  background-repeat: no-repeat;
}

/* ------------------ FOOTER ------------------ */

.loader {
  z-index: 1000;
  display: block;
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(31,49,91,0.3);
  opacity: 0;
  pointer-events: none;
  background-image: url("/loader.gif");
  background-size: 3rem 3rem;
  background-position: center center;
  background-repeat: no-repeat;
}

.loader.is-loading {
  opacity: 1;
  pointer-events: all;
}

/* ------------------ TOOLTIP ------------------ */

.tooltip {
  position: relative;
  top: 0.17rem;
  margin-left: 0.25rem;
  filter: grayscale(1) brightness(4.5);
  transition: filter 0.15s ease;
}

.tooltip:hover {
  filter: none;
  cursor: help;
}