/* Base */
:root {
    --main-color: #ffaa00;
    --secondary-color: #203E47;
    --secondary-color-light: #33474d;
    --blue-1:#2F4858;
    --blue-2:#006673;
    --blue-3:#006673a3;
    --green-1:#008370;
    --green-2:#3C9C50;
    --white-1: #e7e7e7;
    --white-2: #ffffff29;
    --white-light: #efefef4a;
    --gradient-1:#2F4858;
    --gradient-2:#006070;
    --gradient-3:#007876;
    --gradient-4:#008E67;
    --gradient-5:#50A047;
    --gradient-6:#9AAC1A;
    --orange-1: #EF4636;
    --orange-2: #F5793B;
    --orange-3: #FAAC3F;
    --orange-light: #ffa2007a;
    --color-pal-1:#007480;
    --color-pal-2:#69b58a;
    --box-shadow-1: 0 3px 15px rgba(0, 0, 0, 0.3);
    --box-shadow-2: 0 10px 25px rgba(0, 0, 0, 0.7);
    --box-shadow-3: 0 10px 20px rgba(0, 0, 0, 0.5);

    --nav-height: 8vh;
}


* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
    /* color: var(--secondary-color); */
    font-family: 'Roboto', sans-serif;

}

html, body {
    scroll-behavior: smooth;
    /* scroll-padding-top: 10vh; */
    overflow: hidden;
    width:100%;
    height: 100%;
}

sup {
    vertical-align: super;
    font-size: smaller;
    align-self: baseline;
}

sub {
    font-size: smaller;
    position: relative;
    top: 10%;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
    display: block;
}
a{
    text-decoration: none;
}

h1 {
    font-size: 1.5em;
    font-weight: 400;
    color: var(--white-1);
    line-height: 1.25em;
}

.display{
    display: block;
    z-index: auto;
}

.hide{
    display: none;
}
/* ===================
  Nav bar
=======================*/
.navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 10;
    background: transparent;
    height: var(--nav-height);
    top: 0;
    overflow: hidden;
}

.navigation img {
    height: var(--nav-height);
}


.navigation .menu-list {
    list-style: none;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    width: 35%;
    min-width: 450px;
    margin: auto 50px auto 0;
}

.navigation .menu-list li a {
    color: var(--white-1);
    font-size: 0.85rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 1s ease, border 1s ease;
    text-decoration: none;
}
/* ====================
  General
=======================*/

.section {
    height: 100vh;
    width: 100%;
    position: relative;
    z-index: 0;
    font-size: 1.75em;
    margin: auto auto;
    text-align: center;
    /* background: var(--gradient-4); */
    /* background: linear-gradient(to bottom right, var(--blue-1), var(--blue-3)); */
    background: linear-gradient(to bottom right, var(--color-pal-1), var(--color-pal-2));
}
.long-section{
    overflow-y: overlay;
    overflow-x: hidden;
}
.flex{
    display: flex;
    justify-content: center;
}
.overflow{
    overflow-y: auto;
    height: 55vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.masterhead {
    background: radial-gradient(#203e47f2, #203e47fc, #203e47);
    /* display: grid; */
}

.padded {
    padding: 5vh;
    box-sizing: border-box;
    font-size: 18px;
}

.next-btn {
    padding: 0em 1.5em;
    border-radius: 12px;
    /* font-size: 2em; */
    display: block;
    position: absolute;
    bottom: 30px;
    justify-self: center;
    color: var(--white-1);
    cursor: pointer;
    transition: 0.2s ease-out;
    left: 50%;
    /* width: 250px; */
    transform: translateX(-50%);
    align-items: center;
    height: 50px;
    /* margin-left: -125px; */
    border: 0.5px solid var(--main-color);
    font-size: 3vh;
    box-shadow: var(--box-shadow-1);
}
.main-border{
    border: 0.5px solid var(--main-color);
}
.next-btn::after {
    background: var(--main-color);
    content: '';
    height: 30px;
    left: 50%;
    position: absolute;
    top: 100%;
    width: 1px;
}

.next-btn:hover {
    transform: scale(1.1) translateX(-50%);
    background-color: var(--main-color);
    box-shadow: var(--box-shadow-2);
}

.main-theme-btn {
    color: white;
    z-index: 999;
    background: transparent;
    /* border: 1px solid var(--main-color); */
}

.main-theme-btn:hover {
    color: white;
    background: var(--main-color);

}

.white-btn{
    background: white;
    color: var(--main-color);
}

.no-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    border:none;
}
.no-btn:hover{
    color: white !important;
    background: var(--gradient-4) !important;
    transform: scale(1) translateX(-50%) !important;
    cursor: default !important;
}


.main-theme-btn:after {
    display: none;
}

.large {
    font-size: 2.5em;
    transform: scale(1.8, 1.1);
    color: inherit;
}

.screen-container{
    display: flex;
    flex-direction: column;
    height: calc(100vh - var(--nav-height));
    width: 100%;
    position: absolute;
    top:var(--nav-height);
    z-index: 1;
    margin: auto auto;
    box-sizing: border-box;
    padding: 30px;
    /* text-align: center; */
}

/* Controls */
.controls {
    position: fixed;
    z-index: 10;
    top: 50%;
    right: 1%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transform: translateY(-50%);
  }

  .control {
    padding: 1rem;
    cursor: pointer;
    background-color: var(--white-1);
    width: 15px;
    height: 15px;
    border-radius: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.7rem 0;
    box-shadow: var(--box-shadow-1);
  }

  .active-btn {
    background-color: var(--main-color);
    /* transition: all 0.4s ease-in-out; */
  }

  .active-btn i {
    color: var(--white-1);
  }

  i {
    font-size: 1.4rem;
    color: var(--white-1);
    pointer-events: none;
  }


/* ====================
  First page
=======================*/


  .column-container {
    margin: 0 auto;
    width: 100%;
    height: 100%;
    border: 1px solid #1a1a1a;
    display: flex;
    align-items: center;
  }

  .column-container .item {
    flex-grow: 1;
    height: 100%;
    display:flex;
    justify-content: center;
    color: white;
    position: relative;
    transition: all 0.5s ease;
    filter: grayscale(0);
    background-position: center !important;
    background-size: cover !important;
  }
  .column-container .item#left {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("img/bern_building.jpg");
  }

  .column-container .item#right {
    background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url("img/district_lausanne.jpg");
  }
  .column-container .item:hover {
    flex-grow: 3.28;
    /* background-color: #f10000; */
  }

  .column-container .item h2{
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: inline-block;
    font-weight: 300;
    color: inherit;
    line-height: 1.25em;
    font-size: 1.25em;
    opacity: 1;
    padding: 0.35em 1em;
    position: absolute;
    bottom: 5vh;
    z-index: 1;
    /* border: 1px solid #fff;
    box-shadow: var(--box-shadow-1);
    border-radius: 25px; */
    letter-spacing: .15em;

  }

  .column-container .smaller-font{
    font-size: 3.5vh;
  }

  .image_source{
    font-size: 11px;
    bottom: 20px;
    position: absolute;
    color: var(--white-light);
    /* right: 20px; */
  }

  /* .column-container .item#first {
    background: linear-gradient(to bottom right, var(--gradient-1), var(--gradient-3));
  }

  .column-container .item#second {
    background: linear-gradient(to bottom right, var(--gradient-2), var(--gradient-4));
  }
  .column-container .item#third {
    background: linear-gradient(to bottom right, var(--gradient-3), var(--gradient-5));
  }
  .column-container .item#fourth {
    background: linear-gradient(to bottom right, var(--gradient-4), var(--gradient-6));
  }
  .column-container .item#zero {
    background: linear-gradient(to bottom, var(--gradient-5), var(--gradient-6));
    max-width: 5vh;
    padding-left: 1vh;
  } */
  .column-container .orange-item{
    background:var(--main-color);
    color:white;
  }
  .column-container .orange-item:hover{
    background:white !important;
    color: var(--main-color);
  }


  .description-container{
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70%;
    position: absolute;
    bottom:0;
    box-sizing: border-box;
    padding: 0 10%;
    transition: opacity 0.5s ease;
  }
  .high{
    height:85%;
  }


/* ====================
  First page
=======================*/

.icon-row {
    display: flex;
    justify-content: space-evenly;
    margin: 0;
    position: relative;
}

.icon-card {
    padding: 2vh 5vh;
    margin: 0 auto;
    width: 25%;
}

/* .icon-card:hover {
    transform: scale(1.1);
    background-color: var(--secondary-color-light);
    border: .5px solid var(--main-color);
    border-radius: 12px;

} */

.icon-n {
    height: 10vh;
    display: flex;
    justify-content: center;
    color: inherit;
}
.big {
    height: 13vh;
    filter: invert(100%);
}
.small {
    height: 5vh;
    filter: invert(100%);
    /* padding-right: 2vh; */
    width: 10%;
}

.icon-n i {
    height: 10vh;
    width: 10vh;
    font-size: 7vh;
    color: transparent;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--main-color);
}

.icon-description {
    text-align: center;
    /* font-family: 'DM Sans', Helvetica, sans-serif !important; */
    margin: -2% 15%;
    font-size: 18px;
    line-height: 1.5em;
    color: var(--white-1) !important;
}

#banner h1 {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    -moz-transition: -moz-transform 0.5s ease, opacity 0.5s ease;
    -webkit-transition: -webkit-transform 0.5s ease, opacity 0.5s ease;
    -ms-transition: -ms-transform 0.5s ease, opacity 0.5s ease;
    transition: transform 0.5s ease, opacity 0.5s ease;
    display: inline-block;
    font-size: 1.75em;
    opacity: 1;
    padding: 0.35em 1em;
    position: relative;
    z-index: 1;
}

#banner h1:before {
    top: 0;
    left: 0;
}

#banner h1:before,
#banner h1:after {
    -moz-transition: width 0.85s ease;
    -webkit-transition: width 0.85s ease;
    -ms-transition: width 0.85s ease;
    transition: width 0.85s ease;
    -moz-transition-delay: 0.25s;
    -webkit-transition-delay: 0.25s;
    -ms-transition-delay: 0.25s;
    transition-delay: 0.25s;
    background: var(--main-color);
    content: '';
    display: block;
    height: 2px;
    position: absolute;
    width: 100%;
}

#banner h1:after {
    bottom: 0;
    right: 0;
}

#banner h1:before {
    width: 0%;
    -webkit-animation: animateTopLine 1s forwards ease;
    animation: animateTopLine 1s forwards ease;
}

#banner h1:after {
    width: 0%;
    -webkit-animation: animateBottomLine 1s forwards ease;
    animation: animateBottomLine 1s forwards ease;
}

@-webkit-keyframes animateTopLine {
    0% {
        width: 0%;
        left: 0%;
    }

    100% {
        width: 100%;
        left: 0%;
    }
}

@keyframes animateTopLine {
    0% {
        width: 0%;
        left: 0%;
    }

    100% {
        width: 100%;
        left: 0%;
    }
}

@-webkit-keyframes animateBottomLine {
    0% {
        width: 0%;
        right: 0%;
    }

    100% {
        width: 100%;
        right: 0%;
    }
}

@keyframes animateBottomLine {
    0% {
        width: 0%;
        right: 0%;
    }

    100% {
        width: 100%;
        right: 0%;
    }
}

.inner {
    height: 15vh;
    padding: 5vh;
    top:var(--nav-height);
    position: absolute;
    z-index:1;
}

.inner span {
    color: var(--white-1) !important;
    font-size: .75em;
    padding: 2vh;
    position: relative;
    top: 50%;
}



/* ====================
  Timeline
=======================*/

.timeline {
    width: 800px;
    height: 0.75vh;
    list-style: none;
    text-align: justify;
    margin: 35vh auto;
    background: linear-gradient(to right, var(--orange-1) 0%, var(--orange-2) 50%, var(--orange-3) 100%);
}

.timeline:after {
    display: inline-block;
    content: "";
    width: 100%;
}

.timeline li {
    display: inline-block;
    width: 5vh;
    height: 5vh;
    background: var(--main-color);
    text-align: center;
    line-height: 1.2;
    position: relative;
    border-radius: 50%;
    color: var(--white-1);
    margin-top: -2.25vh;
}

.timeline li:before {
    display: inline-block;
    content: attr(data-year);
    font-size: 26px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}

.timeline li:nth-child(odd):before {
    top: -40px;
}

.timeline li:nth-child(even):before {
    bottom: -40px;
}

.timeline li:after {
    display: inline-block;
    content: attr(data-text);
    font-size: 1.35em;
    position: absolute;
    width: 25vh;
}

.timeline li:nth-child(odd):after {
    bottom: 0;
    margin-bottom: -10px;
    transform: translate(-50%, 100%);
}

.timeline li:nth-child(even):after {
    top: 0;
    margin-top: -10px;
    transform: translate(-50%, -100%);
}

/* ====================
   Vertical Progress Bar
==================== */

.progressbar-strip {
    position: fixed;
    top: 50%;
    right: 1%;
    transform: translateY(-50%);
    z-index: 10;
}

/* container */
.progressbar {
    list-style: none;
    margin: 0;
    padding: 0;

    display: flex;
    flex-direction: column;
    align-items: center;
}

/* steps */
.progressbar li {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* step icon */
.progressbar li::before {
    width: 42px;
    height: 42px;

    display: flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.05);

    font-family: "FontAwesome";
    font-size: 16px;
    color: rgba(255,255,255,0.4);

    transition: all 0.25s ease;
}

/* connector line (only between items) */
.progressbar li:not(:last-child)::after {
    content: "";
    width: 2px;
    height: 50px;
    margin: 6px 0;

    background: rgba(255,170,0,0.25);
}

/* icons */
.progressbar li.one::before { content: "\f015"; }
.progressbar li.two::before { content: "\f044"; }
.progressbar li.three::before { content: "\f080"; }
.progressbar li.four::before { content: "\f1c1"; }

/* active step */
.progressbar li.active::before {
    background: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-color);
    box-shadow: 0 0 10px rgba(255,170,0,0.35);
}

/* active connector */
.progressbar li.active:not(:last-child)::after {
    background: linear-gradient(
        to bottom,
        var(--main-color),
        rgba(255,170,0,0.3)
    );
}

/* clickable zone */
.progressbar li a {
    position: absolute;
    inset: 0;
    border-radius: 50%;
}

/* ====================
   Special behaviour for last step
==================== */

.progressbar li.four.active::before {
    color: rgba(255,255,255,0.4);
    background-color: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.15);
    box-shadow: none;
}

/* only highlight when hovering */
.progressbar li.four.active:hover::before {
    background: transparent;
    border: 2px solid var(--main-color);
    color: var(--main-color);
    box-shadow: 0 0 10px rgba(255,170,0,0.35);
}

/* hidden steps */
.unactive {
    display: none;
}


/* connector (base) */
.progressbar li:not(:last-child)::after {
    content: "";
    width: 2px;
    height: 50px;
    margin: 6px 0;

    background: rgba(255,255,255,0.15);
    position: relative;
    overflow: hidden;
}

/* animated fill */
.progressbar li:not(:last-child)::after {
    background: rgba(255,255,255,0.15);
}

.progressbar li:not(:last-child)::before,
.progressbar li:not(:last-child)::after {
    transition: all 0.3s ease;
}

/* inner animated line */
.progressbar li:not(:last-child)::after {
    background:
        linear-gradient(
            to bottom,
            var(--main-color) 0%,
            var(--main-color) var(--fill, 0%),
            rgba(255,255,255,0.15) var(--fill, 0%),
            rgba(255,255,255,0.15) 100%
        );
}


/* ====================
  Map
=======================*/
#map {
    position: absolute;
    height: calc(100vh - var(--nav-height));
    top: var(--nav-height);
    width: 100%;
}

#map_parameters {
    height: 65vh;
    width: 70%;
}

.area-tooltip {
    background: #363636;
    background: rgba(0,0,0,0.5);
    border: none;
    color: #f8d5e4;
}

.two-col-container {
    display: inline-flex;
    width: 100%;
    height: 20vh;
    align-items: center;
}

.two-col-container .left {
    width: 100%;
    font-size: 1.75em;
    padding-left: 5vh;
    color: var(--secondary-color);
}

.two-col-container .rigth {
    width: 60%;
    padding-left: 25%;

}

.two-col-container span {
    color: var(--main-color);
}


/* The icon */
.help-tip {
    position: absolute;
    top: 3.7%;
    left: 4vh;
    transform: translate(-50%, -50%);
    margin: auto;
    text-align: center;
    border: 1px solid var(--main-color);
    border-radius: 12px;
    width: 4vh;
    height: 4vh;
    font-size: 3vh;
    /* line-height: 3vh; */
    cursor: default;
    z-index: 999;
    background: white;
}

.help-tip:before {
    content: 'i';
    font-style: italic;
    font-weight: 100;
    font-family: auto;
    color: #444;
}

/* .help-tip:hover p{
    display:block;
    transform-origin: 100% 0%;
    -webkit-animation: fadeIn 0.3s ease;
    animation: fadeIn 0.3s ease;
} */

/* The tooltip */
.help-tip p {
    display: none;
    font-family: sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-align: left;
    background-color: #FFFFFF;
    padding: 12px 16px;
    width: 300px;
    height: auto;
    position: relative;
    left: 50%;
    transform: translate(5vh, -4vh);
    border-radius: 3px;
    border: 1px solid #E0E0E0;
    box-shadow: 0 0px 20px 0 rgb(0 0 0 / 10%);
    color: #37393D;
    font-size: 15px;
    line-height: 18px;
    z-index: 999;
    display: block;
}

.help-tip span {
    color: var(--main-color);
}

.help-tip.show-tooltip p {
    display: none;
    /* other styles */
}

/* The pointer of the tooltip */
.help-tip p:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #ffffff;
    top: 20px;
    left: -9px;
    transform: translate(-50%, -100%) rotate(-90deg);
}

/* Prevents the tooltip from being hidden */
.help-tip p:after {
    width: 10px;
    height: 40px;
    content: '';
    position: absolute;
    top: 0;
    left: 40px;
}

.help-right {
    right: 0;
    margin: 0;
    left: auto;
    top: 5vh;
    background: none;
    border-color: white;
}
.help-right::before {
color: white;
}


/* CSS animation */
@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 100%;
    }
}

/* ====================
  Parameter edit
=======================*/

/* hover  info*/
.hover-container {
    position: relative;
    margin: auto;
    text-align: center !important;
  }

.hover-target {
    position: relative;
    font-size: 16px;
    border: 1px solid white;
    height: 20px;
    width: 20px;
    text-align: center;
    /* padding: 2px; */
    border-radius: 50%;
  }

  .hover-popup {
    position: absolute;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    top: 70%;
    left: 5%;
    width: 50ch;
    margin: min(1rem, 20px);
    font-size: .8rem;
    background-color: #fff;
    color:black;
    border-radius: 8px;
    padding: 1.5em;
    z-index: 42;
    transform: scale(0);
    transition: transform 200ms ease;
    transform-origin: 8% -10px;
  }

  .hover-target:hover + .hover-popup,
  .hover-target:focus + .hover-popup,
  .hover-popup:hover{
    transform: scale(1);
  }

  .hover-popup :not(:first-child) {
    margin-top: 1rem;
  }

  .hover-popup span {
    color: rgb(200, 20, 0);
    font-weight: 700;
  }

  .hover-popup::before {
  /* This is the triangle/arrow */
    content: '';
    position: absolute;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #fff;
    top: -10px;
  }

  .hover-popup::after {
    /* This is merely here to expand the hoverable area, as a buffer between the "Hover me" text and the popup. */
    content: '';
    position: absolute;
    top: -1rem;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
  }


/* address */
.address-block{
    display: flex;
    flex-direction: column;
    justify-content: left;
    text-align: left;
    width: fit-content;
}
.address-block h2{
    font-weight: 100;
    color:var(--white-1)
}
/* get a line under address block */
.address-block:after {
    content: '';
    display: block;
    width: 100%;
    height: .5px;
    background: var(--main-color);
    margin: 0.5em 0;
}


#error-message{
    position: absolute;
    /* display: flex; */
    /* overflow-y: auto; */
    top: 5%;
    right: 10.5%;
    /* transform: translateX(-50%); */
    height: fit-content;
    width: 40%;
    font-size: 13px;
    color: #9f4040;
    border: 1px solid;
    padding: 1rem;
    border-radius: 12px;
    text-align: left;
    font-weight: 600;
}

/* switch */

.toggle {
    --width: 60px;
    --height: calc(var(--width) / 3);

    position: absolute;
    /* display: inline-block; */
    width: var(--width);
    height: var(--height);
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: var(--height);
    cursor: pointer;
    right: 5vw;
    top: 5vh;
    z-index: 999;
}

.toggle .header {
    color: var(--white-1);
    position: relative;
    font-size: 18px;
    width: 200px;
    display: flex;
    bottom: 30px;
    right: calc(5vh + 40px);
    left: auto;
}

.toggle p {
    /* content: attr(data-content); */
    /* opacity: 0; */
    font-family: sans-serif;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    text-align: center;
    background-color: #FFFFFF;
    padding: 12px 16px;
    width: 300px;
    height: auto;
    position: absolute;
    right: 13vh;
    top: -5vh;
    /* transform: translate(-10vh, -4vh); */
    border-radius: 3px;
    border: 1px solid #E0E0E0;
    box-shadow: 0 0px 20px 0 rgb(0 0 0 / 10%);
    color: #37393D;
    font-size: 13px;
    line-height: 18px;
    z-index: 999;
    display: none;
}

.toggle:hover p {
    display: block;
}

.toggle input {
    display: none;
}

.toggle p:before {
    position: absolute;
    content: '';
    width: 0;
    height: 0;
    border: 10px solid transparent;
    border-bottom-color: #eaeaea;
    top: 20px;
    left: -9px;
    transform: translate(341px, 100%) rotate(90deg);
}

.toggle p span {
    color: var(--main-color);
}

.toggle .slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: var(--height);
    background-color: #ccc;
    transition: all 0.4s ease-in-out;
}

.toggle .slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: calc(var(--height));
    height: calc(var(--height));
    border-radius: calc(var(--height) / 2);
    background-color: #fff;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease-in-out;
}

.toggle input:checked+.slider {
    background-color: var(--main-color);
}

.toggle input:checked+.slider::before {
    transform: translateX(calc(var(--width) - var(--height)));
}

.toggle .labels {
    position: absolute;
    top: 5px;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 12px;
    font-family: sans-serif;
    transition: all 0.4s ease-in-out;
}

.toggle .labels::after {
    content: attr(data-off);
    position: absolute;
    right: 5px;
    color: #4d4d4d;
    opacity: 1;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4);
    transition: all 0.4s ease-in-out;
}

.toggle .labels::before {
    content: attr(data-on);
    position: absolute;
    left: 5px;
    color: #ffffff;
    opacity: 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.4);
    transition: all 0.4s ease-in-out;
}

.toggle input:checked~.labels::after {
    opacity: 0;
}

.toggle input:checked~.labels::before {
    opacity: 1;
}


/* Forms */
.form-parameters {
    /* margin: 2em 0; */
    /* padding: 1em 2em; */
    border-radius: 3px;
    min-width: 200px;
}

.form-parameters label {
    display: block;
    margin-top: 1.5em;
}

.form-parameters label:first-of-type {
    margin-top: 0em;
}

.form-parameters input {
    /* padding: 0.5em; */
    height: 30px;
    width: 100%;
    /* border: solid 1px #dd9a14d4; */
    color: white;
    display: block;
}

.form-parameters select {
    /* padding: 0.5em; */
    height: 30px;
    /* border: solid 1px #dd9a14d4; */
    color: white;
    background: var(--color-pal-2);
    border-radius: 4px;
    display: block;
    width: 100%;
}

.form-parameters ::placeholder {
    color: white;
}

.btn-primary {
    padding: 0 2vh;
    width: 100%;
    border: solid 1px var(--main-color);
    color: var(--white-1);
    border-radius: 6px;
    font-size: .75em;
    height: 50px;
    font-weight: 300;
    display: block;
    box-shadow: var(--box-shadow-1);
    cursor: pointer;
}

.btn-primary:hover {
    background-color: var(--orange-light);
    box-shadow: var(--box-shadow-1);
}

.container-params {
    display: flex;
    width: 100%;
    padding: 5vh 0;
    font-size: 18px;
}

.params-list {
    width: 80%;
}

.params-row {
    display: flex;
}

.params-edit {
    width: 20%;
    margin: auto;
    display: flex;
    flex-direction: column;
}

.container-row-1 {
    height: 30px;
    min-width: 60%;
    display: flex;
    justify-content: left;
    align-items: center;
}

.container-row-2 {
    height: 30px;
    min-width: 20%;
    display: flex;
    justify-content: left;
    align-items: center;
}

span.longer-text{
    display:none;
   }

   .expanded-text:hover span.short-name{
    display:none;
    /* border: none; */
   }
   /* On hover, display the longer name.  */
   .expanded-text:hover span.longer-text{
    display: block;
    background: white;
    /* border: 1px solid black; */
    position: absolute;
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.05);
    width: 30%;
    /* top: 0; */
    left: 30%;
    z-index: 1;
   }


/* ====================
  Map mode selector
=======================*/
#map-controls {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
}

.map-help-tip {
    position: static;
    transform: none;
    width: 32px;
    height: 32px;
    align-items: center;

}

.map-mode-selector {
  /* position: absolute;
  top: calc(var(--nav-height) + var(--progress-strip-height) + 12px);
  left: 12px;
  z-index: 2000; */
  background: rgba(255, 255, 255, 0.96);
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.map-radio-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.map-radio-option:hover {
  background: rgba(0, 135, 118, 0.06);
}

.map-radio-option input[type="radio"] {
  display: none;
}

.map-radio-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  background: rgba(0, 0, 0, 0.04);
  color: #555;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.map-radio-label {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  transition: color 0.15s;
}

/* Active state */
.map-radio-option.active .map-radio-icon {
  background: var(--green-1);
  border-color: var(--green-1);
  color: white;
}

.map-radio-option.active .map-radio-label {
  color: var(--secondary-color);
}

.map-radio-divider {
  height: 0.5px;
  background: rgba(0, 0, 0, 0.08);
  margin: 2px 4px;
}

.header {
    font-size: larger;
    font-weight: bold;
    color: var(--main-color);
}

.btn-container {
    display: flex;
    width: fit-content;
    /* height: 30px; */
    position: absolute;
    right: 15vh;
    bottom: 30px;
    padding-left: 2.5%;
}

.centered {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-icon {
    font-size: 1em;
    display: block;
}

.btn-icon:hover {
    color: var(--main-color);
}

.btn-inline {
    margin: 0 25px;
}

#loading-icon {
    color: transparent !important;
    -webkit-text-stroke-width: 1px;
    -webkit-text-stroke-color: var(--main-color);
    font-size: 10vh;
}

.copy-text {
	position: absolute;
    right: 2.5%;
    left: auto;
    width: 25%;
    top: 15%;
    box-sizing: border-box;
    padding: 10px;
    /* background: #fff; */
    border: 1px solid #ddd;
    border-radius: 10px;
    color: white;
    display: flex;
    font-size: 18px;
    justify-content: center;
    align-items: center;
    cursor: default;
}
.middle-text{
    border: none;
    justify-content: center;
    height: auto;
}
.middle-text a{
    color: white;
    text-decoration: none;
}

.middle-text a:hover{
    text-decoration: underline;
}
.middle-text i{
padding: 0 10px;
}

.middle-text::before{
    content: "";
    height: 5vh;
    width: 1px;
    bottom: calc(5vh + 18px);
    position: absolute;
    background-color: white;
}


.middle-text::after{
    content: "";
    height: 5vh;
    width: 1px;
    top: calc(5vh + 18px);
    position: absolute;
    background-color: white;
}

.copy-text button {
	padding: 10px;
    background: var(--main-color);
    color: #fff;
    font-size: 18px;
    border: 1px solid var(--main-color);
    outline: none;
    border-radius: 10px;
    cursor: pointer;
    position: absolute;
    right: -1px;
}

.copy-text button:active {
	background: var(--orange-3);
    border: 1px solid var(--orange-3);
}
.copy-text button:before {
    content: "Copied";
    position: absolute;
    top: -45px;
    right: -10px;
    background: var(--main-color);
    padding: 8px 10px;
    border-radius: 20px;
    font-size: 15px;
	display: none;
}
.copy-text button:after {
	content: "";
    position: absolute;
    top: -20px;
    right: 15px;
    width: 10px;
    height: 10px;
    background: var(--main-color);
    transform: rotate(45deg);
	display: none;
}
.copy-text.active button:before,
.copy-text.active button:after {
	display: block;
}



/* ================================================================= */
/* results */
/* ================================================================= */

/* loading dots */

.loading-block{
    position:absolute;
    top: 15vh;
    left: 5vw;
}

.loading{
    font-weight: inherit;
}

.loading:after {
    content: ' .';
    animation: dots 2s steps(5, end) infinite;}

  @keyframes dots {
    0%, 20% {
      color: rgba(0,0,0,0);
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    40% {
      color: white;
      text-shadow:
        .25em 0 0 rgba(0,0,0,0),
        .5em 0 0 rgba(0,0,0,0);}
    60% {
      text-shadow:
        .25em 0 0 white,
        .5em 0 0 rgba(0,0,0,0);}
    80%, 100% {
      text-shadow:
        .25em 0 0 white,
        .5em 0 0 white;}}

/* REHO running progress bar */
.loading-block.address-block:after {
    display: none; /* hide the decorative underline, progress bar serves as the line */
}

.reho-progress {
    margin-top: 2.5vh;
    width: 32vw;
    max-width: 480px;
}

.reho-progress-track {
    position: relative;
    height: 2px;
    width: 100%;
    background: rgba(255, 255, 255, 0.15);
    border-radius: 2px;
    overflow: hidden;
}

.reho-progress-line {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: var(--main-color);
    box-shadow: 0 0 8px var(--main-color);
    transition: width 0.35s ease-out;
}


/* Comparison table */
.comparison-table {
    position: relative;
    overflow: hidden;
    width: 80%;
    margin: auto;
    height: 70vh;
    display: flex;
    border: 2px solid var(--orange-light);
    border-radius: 12px;
}

.features {
    position: relative;
    z-index: 1;
    top: 0;
    left: 0;
    width: 20%;
    height: 100%;
    opacity: .95;
    display: block;
    background: var(--orange-light);
}


.features-top {
    cursor: auto;
    height: 25vh;
    display: flex;
    align-items: center;
}

.features-top li {
    list-style: none;
    margin: 0 5%;
    font-size: 3.25vh
}


.features-bottom {
    list-style: none;
    height: 80%;
    box-sizing: border-box;
    margin: 0 0;
}

.features-bottom li {
    margin: 0 5%;
    height: 10vh;
    align-items: center;
    display: flex;
    font-size: 2.75vh
}

.scenarios {
    width: 80%;
    position: relative;
}

.scenario {
    position: relative;
    float: left;
    transition: opacity .3s, visibility .3s, transform .3s;
    width: 25%;
    display: block;
    height: 100%;
    top: 0;
}

.scenario:hover {
    background: var(--white-light);
    box-shadow: 0 10px 16px 0 rgba(0, 0, 0, 0.1), 0 3px 10px 0 rgba(0, 0, 0, 0.05);
}

.scenario img {
    height: 50%;
}

.scenario-top {
    position: relative;
    height: 25vh;
    width: 100%;
    top: 10%;
    text-align: center;
    background: transparent;
    font-size: 2.75vh
}

.scenario-bottom {
    position: relative;
}

.scenario-bottom li {
    margin: 0 5%;
    height: 10vh;
    align-items: center;
    display: flex;
    justify-content: center;
    font-size: 2.75vh
}

.scenario-description{
    width: 100%;
    position: relative;
    text-align: left;
    font-size: 16px;
    /* color: inherit; */
    color: var(--blue-1);
    font-weight: 100;
    margin-top: 5vh;
}

.scenario-description .row{
   display: flex;
   flex-direction: row;
   align-items: center;
}
.scenario-description .description{
    width: 90%;
    line-height: 1.4em;
    padding: 2vh 1.5vh;
 }

 .scenario-description .description span{
    color: var(--main-color);
    font-weight: bold;
 }


.icon-summary {
    display: flex;
flex-direction: column;
position: relative;
top: 15%;
}

.icon-summary .row{
    display: flex;
    align-items: center;
    padding: 2vh 0;
}

.icon-summary .row .result{
    font-size: .85em;
    font-weight: 100;
    color: inherit;
    position: absolute;
    width: 100%;

}
.icon-summary .row .unit{
    font-size: .85em;
    font-weight: 100;
    color: inherit;
    width: 100%;
    text-align: right;

}

p.caption {
	color: #777;
	margin: auto;
	width: 90%;
	margin-bottom: 20px;
	margin-top: 10px;
	text-align: center;
    font-size: 16px;

}




/*  graphs */
.graph-selection {
    visibility: hidden;
    position: absolute;
  }

  .show {
    visibility: visible;
    z-index: 1;
  }
  .selector {
    max-width: 12vw;
    height: 5vh;
    position: absolute;
    top: 1vh;
    right: 2vh;
    font-size: smaller;
    text-align: center;
    font-size: 3vh;
    z-index: 10;
  }

  .plotly-graph-div {
    min-height: 63vh;
    flex: 1;
  }

  .plotly-graph-div > * {
    height: 100%;
}


  /* ##########################
  ########## EXTRA #################
  ################################## */

  /* console waiting text */
  .hidden {
    display:none;
  }
  .console-container {

    font-size: 10vh;
    text-align: center;
    height: 100vh;
    width: 80vw;
    display: flex;
    justify-content: center;
    position: absolute;
    align-items: center;
    color: white;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    font-weight: 100;
  }
  .console-underscore {
     display:inline-block;
    position:relative;
    top:-0.14em;
    left:10px;
  }





   /* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed;
    z-index: 1;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    color: #404040;
    font-size: 18px;
    justify-content: left;
    text-align: left;
    background-color: rgb(0,0,0);
    background-color: rgb(235 221 221 / 48%);
}
.modal .text{
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;

}

.modal .text pre{
    justify-content: center;
    display: flex;
    color: black;
    align-items: left !important;
    white-space: pre-wrap;
}

.modal p{
    padding: 5px 0;
    font-size: 16px;

}
.modal h2{
    font-size: 24px;
    font-weight: 900;
}
.modal ol{
    padding: 0 0 0 20px;
}

.modal li{
    padding: 10px 0;
}

/* Modal Content/Box */
.modal-content {
    background-color: white;
    margin: 15% auto;
    padding: 20px;
    border: 1px solid #888;
    min-width: 30%;
    max-width: 60%;
    max-height: 60%;
    border-radius: 12px;
    overflow-y: auto;
    box-shadow: var(--box-shadow-3);
}

/* The Close Button */
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

.report-btn{
    font-size: 1.3em;
    width: 23vw;
    transform: translateX(0);
    border: none;
    position: initial;
}
.report-btn:hover{
    transform: translateX(0);
}
.report-btn-container{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: space-evenly;
    /* top: 10vh; */
    position: relative;
    min-width: 30vw;
    max-width: 60vw;
    height: 30px;
}

.arrow_down{
position: absolute;
    width: 50px;
    height: 50px;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}
.arrow_down a {
    padding-top: 70px;
  }
.arrow_down a span {
    position: absolute;
    top: 0;
    left: 50%;
    width: 24px;
    height: 24px;
    margin-left: -12px;
    border-left: 1px solid var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
    -webkit-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-animation: sdb05 1.5s infinite;
    animation: sdb05 1.5s infinite;
    box-sizing: border-box;
  }
  @-webkit-keyframes sdb05 {
    0% {
      -webkit-transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      -webkit-transform: rotate(-45deg) translate(-20px, 20px);
      opacity: 0;
    }
  }
  @keyframes sdb05 {
    0% {
      transform: rotate(-45deg) translate(0, 0);
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
    100% {
      transform: rotate(-45deg) translate(-20px, 20px);
      opacity: 0;
    }
  }