html {
    scroll-padding-top: 12rem;
}

h1 img {
    height: 1em;
    width: 1em;
    margin-right:0.25em;
}
html.dark-mode h1 img,
body.dark-mode h1 img {
    filter: brightness(0) saturate(100%) invert(1);
}
h2 {
    margin-bottom: 1rem;
    font-weight: normal;
    margin-top: 2rem;
}



p {
    margin-bottom:1rem;
}


nav {
    margin: 0 auto;
    position:fixed;
    top: 3.5rem;
    max-width:960px;
    width:100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--background-color);
    padding-bottom:1rem;
    margin-bottom:0.5rem;

    border-bottom:3px solid var(--light-marker--highlight);
    z-index:1;
}


.phase-container {
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-evenly;
    padding-top:1rem;
}

.phase {
    flex-basis: 12.5%;
    flex-grow: 0;
    flex-shrink: 0;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content: flex-start;
    align-items:center;
}

.phase:not(.completed):not(.active) a {
    pointer-events: none;
}

.phase:not(.completed) .phase-bubble {
    background-color: var(--light-marker);
}

.phase.completed .phase-bubble {
    background-color: var(--green-marker);
}

.phase:not(.completed).active .phase-bubble {
    background-color: var(--light-marker--highlight);
    border: 2px solid var(--green-marker);
}


.phase-bubble {
    text-align:center;
    height:3rem;
    width:3rem;
    line-height:calc(3rem - 6px);
    font-size:2rem;
    border-radius:100%;
    border:2px solid transparent;
    color:white;
    text-shadow: -1px 0 var(--dark-marker), 0 1px var(--dark-marker), 1px 0 var(--dark-marker), 0 -1px var(--dark-marker);
}

.phase-bubble, a.phase-bubble:active, a.phase-bubble:visited {
    color:white;
    text-decoration:none;
}

a.phase-subscript, a.phase-subscript:active, a.phase-subscript:visited {
    color:var(--dark-marker);
    text-decoration:none;
}

.phase.active:hover .phase-subscript, .phase.active:active .phase-subscript,
.phase.completed:hover .phase-subscript, .phase.completed:active .phase-subscript {
    text-decoration: underline;
}

.phase-subscript {
    text-align:center;
    color:var(--dark-marker);
    margin-top:0.5rem;
}

.phase.active .phase-subscript {
    color:var(--darker-marker);
    font-weight:bold;
}

a.phase, a.phase:active, a.phase:visited {
    color: white;
    text-shadow: -1px 0 var(--dark-marker), 0 1px var(--dark-marker), 1px 0 var(--dark-marker), 0 -1px var(--dark-marker);
    text-decoration:none;
}

.main {
    max-width:960px;
    padding-left:0.5rem;
    padding-right:0.5rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4.5rem;
}


.main.main--phases {
    margin-top: 12.5rem;
}

.page {
    width:100%;
    clear:both;
    margin-top:1rem;
}

.page .page-content {
    width:100%;
    display: flex;
    flex-flow: row nowrap;
}

.page .questions {
    flex-basis: 100%;
    flex-grow: 1;
    flex-shrink: 1;
}

.page .left-right-sidebar {
    flex-basis: 25%;
    flex-grow: 0;
    flex-shrink: 0;
    margin-left:1rem;
    margin-bottom:1rem;
    background-color:blue;
    padding:0.5rem;
    background-color: var(--light-marker);
    border-radius:0.25rem;
    border:1px solid var(--dark-marker);
    height:8rem;
    order:2;

    cursor: pointer;
}

.page .left-right-sidebar:hover {
    background-color: var(--light-marker--highlight);
}

.page .left-right-sidebar .left-right-image {
    width:85%;
    display:block;
    margin: 0.5rem auto;
    border-radius:0.25rem;
}

.page .left-right-sidebar p {
    width:100%;
    text-align:center;
    font-style:italic;
    padding-top:0.25rem;
}


.connector {
    flex-basis: 5%;
    flex-grow:0;
    flex-shrink:0;
    align-self:top;

    --connector-height: 2rem;

    height:var(--connector-height);
    width:3rem;
    background-color: var(--light-marker);
    position: relative;
    margin-top: 0.5rem;
    margin-left: calc(-0.5 * var(--connector-height));
}

.connector:before {
    flex-grow:0;
    flex-shrink:0;
    align-self:center;

    content: '';
    position: absolute;
    border-left: calc(0.5 * var(--connector-height)) solid white;
    border-top: calc(0.5 * var(--connector-height)) solid transparent;
    border-bottom: calc(0.5 * var(--connector-height)) solid transparent;
}

.connector:after {
    flex-grow:0;
    flex-shrink:0;
    align-self:center;

    content: '';
    position: absolute;
    right: calc(-0.5 * var(--connector-height));
    border-left: calc(0.5 * var(--connector-height)) solid var(--light-marker);
    border-top: calc(0.5 * var(--connector-height)) solid transparent;
    border-bottom: calc(0.5 * var(--connector-height)) solid transparent;
}

.connector.active {
    background-color: var(--green-marker);
}
.connector.active:after {
    border-left-color: var(--green-marker);
}




.page.hidden + .next {
    display:none;
}

.next {
    width:100%;
    margin-top:1rem;
    margin-bottom:1rem;
    text-align:right;
}

.next .warning-button {
    background-color: #df0000;
    color:white;
    font-weight:bold;
    border-width: 0px;
    padding:0.5rem;
    cursor:pointer;
    border-radius:0.25rem;
}

.next .warning-button:hover, .next .warning-button:active {
    background-color: darkred;
    color:white;
    font-weight:bold;
    border-width: 0px;
    padding:0.5rem;
    cursor:pointer;
    border-radius:0.25rem;
}

.next .submit-button img {
    height:0.8rem;
    width:0.8rem;
}


.next .next-button, .next .submit-button {
    background-image: -webkit-linear-gradient(top, #EB7921 0, #E54E21 100%);
    background-image: -o-linear-gradient(top, #EB7921 0, #E54E21 100%);
    background-image: linear-gradient(to bottom, #EB7921 0, #E54E21 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeb7921', endColorstr='#ffe54e21', GradientType=0);
    color:white;
    font-weight:bold;
    border-width: 0px;
    padding:0.5rem;
    cursor:pointer;
    border-radius:0.25rem;
}

.next .next-button:not(:disabled) .enabled, .next .next-button:disabled .disabled {
    display:inline;
}
.next .next-button:disabled .enabled, .next .next-button:not(:disabled) .disabled {
    display:none;
}

.next .next-button:disabled, .next .submit-button:disabled {
    background: var(--dark-marker);
    /* Use same ✖️ marking the disabled button for the cursor */
    cursor: url("data:image/svg+xml;utf8, <svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' style='font-size: 16px'><text y='20'>✖️</text></svg>"), auto;

}

.next .next-button:disabled:hover, .next .submit-button:disabled:hover {
    background: var(--dark-marker);
}

.next .next-button:hover, .next .submit-button:hover {
    background-image:-webkit-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:-o-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:linear-gradient(to bottom, #E54E21 0, #E54E21 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe54e21', endColorstr='#ffe54e21', GradientType=0);
    -webkit-transition:.4s;
    -o-transition:.4s;
    transition:.4s
}

.next .next-button:active, .next .submit-button:active {
    background-image:-webkit-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:-o-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:linear-gradient(to bottom, #E54E21 0, #E54E21 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe54e21', endColorstr='#ffe54e21', GradientType=0);
    -webkit-transition:.4s;
    -o-transition:.4s;
    transition:.4s
}

.item_entries_empty {
    font-style:italic;
    background-color: var(--light-marker);
    padding: .25rem .5rem;
    border-radius: 0.25rem;
}

.entry:not(:first-child) {
    width:100%;
    margin-top:1rem;
    margin-bottom:1rem;
}

.entry.indent {
    padding-left:1.5rem;
}

.entry .main-entry {
    flex-basis:100%;
    flex-grow:0;
    flex-shrink:0;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-evenly;
}

.entry .label-input {
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-evenly;
}

.entry label {
    flex-basis: 16rem;
    flex-grow:0;
    flex-shrink:0;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
    height:2rem;
    line-height: calc(2rem - 2px);
    background-color: var(--light-marker);
    text-align:right;
    border-left: var(--dark-marker) 1px solid;
    border-top: var(--dark-marker) 1px solid;
    border-bottom: var(--dark-marker) 1px solid;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    padding-right:0.5rem;
    font-size:1em;
    cursor:pointer;
}

.entry .label-input:hover .input input, .entry .label-input:hover .input select, .entry .settings-input:hover {
    background-color: var(--light-marker);
}

.entry .label-input:hover label, .entry .label-input:active label {
    background-color: var(--light-marker--highlight);
}

.entry .checkbox-input {
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-content: flex-start;
}

.entry .checkbox-input .checkbox-check {
    width: 230px;
    flex-grow: 0;
    flex-shrink: 0;
    display: grid;
    grid-template-columns: [checkmark] 30px [label] calc(200px - 1rem);
    row-gap: 1rem;
}

.entry .checkbox-input .checkbox-check label {
    background-color: transparent;
    border-width: 0px;
    text-align:left;
    padding-left:0.5rem;
}

.entry .input {
    flex-basis: calc(100% - 16rem);
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
}

/* Settings */ 
.settings-input {
    flex-basis: calc(100% - 16rem);
    display:flex;
    align-items: center;
    justify-content: flex-end;
    flex-direction:row;
    flex-wrap:nowrap;
    background-color: var(--light-boxelem);
    border:1px solid var(--dark-marker);
    border-radius:0 0.25rem 0.25rem 0;
    font-size:1em;
    cursor:pointer;
    padding-right: 3rem;
}
.settings-button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 2px;
    position: relative;
}
.settings-button {
    width:1.5rem;
    height:1rem;
    background-color: var(--light-boxelem);
    border:1px solid var(--dark-marker);
    border-radius:0.5rem;
    cursor: pointer; 
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 0%;
    transform: translate(-50%, -50%);
    transition: left 0.3s ease;
}
.button-on { 
    left: 70%;
}
.button-off { 
    left: 30%;
}
.slider { 
    width: 2.5rem; 
    height: 0.8rem;
    border:1px solid var(--dark-marker); 
    border-radius:0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: background-color 0.4s ease;
}
.slider-on { 
    background-image: linear-gradient(to bottom, #EB7921 0, #E54E21 100%);
}
.slider-off { 
    background-color: var(--dark-marker);
}

.entry .input input, .entry .input select, .entry .input select option {
    height:2rem;
    border:1px solid var(--dark-marker);
    padding:0.25rem 0.5rem;
    flex-basis:100%;
    font-size:1em;
    border-top-right-radius:3px;
    border-top-left-radius:0px;
    border-bottom-right-radius:3px;
    border-bottom-left-radius:0px;
    background-color: var(--light-boxelem);
    color: var(--font-color);
}

.entry .input select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGhlaWdodD0iNTEycHgiIGlkPSJMYXllcl8xIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgdmVyc2lvbj0iMS4xIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiIgd2lkdGg9IjUxMnB4IiB4bWw6c3BhY2U9InByZXNlcnZlIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj48cGF0aCBkPSJNOTguOSwxODQuN2wxLjgsMi4xbDEzNiwxNTYuNWM0LjYsNS4zLDExLjUsOC42LDE5LjIsOC42YzcuNywwLDE0LjYtMy40LDE5LjItOC42TDQxMSwxODcuMWwyLjMtMi42ICBjMS43LTIuNSwyLjctNS41LDIuNy04LjdjMC04LjctNy40LTE1LjgtMTYuNi0xNS44djBIMTEyLjZ2MGMtOS4yLDAtMTYuNiw3LjEtMTYuNiwxNS44Qzk2LDE3OS4xLDk3LjEsMTgyLjIsOTguOSwxODQuN3oiLz48L3N2Zz4=");
    background-repeat: no-repeat;
    background-size: 1.25rem 1.25rem;
    background-position:center right 0.25rem;
    cursor:pointer;
}

.entry .input .input-addon {
    flex-basis:15%;
    min-width:4.5rem;
    line-height:2rem;
    height:2rem;
    text-align:left;
    padding-left:0.25rem;
}


.entry .help {
    flex-basis: 5%;
    min-width:3rem;
    line-height:calc(2rem - 2px);
    text-align:right;
}

.entry .help .help-button {
    background-color:var(--light-marker);
    width:2rem;
    height:2rem;
    margin-left:auto;
    margin-right:0;
    border-radius:0.25rem;
    text-align:center;
    font-weight:bold;
    cursor:pointer;
    border: 1px solid var(--dark-marker);
}

.entry .help .help-button:hover, .entry .help .help-button:active {
    background-color:var(--light-marker--highlight);
}

.entry .extended-help {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: 0.25rem;
    margin-bottom: .5rem;
    background-color: var(--light-marker);
    padding: .25rem .5rem;
    border-radius: 0.25rem;
}

.entry .extended-help p:not(:last-child) {
    margin-bottom: 0.5rem;
}

.entry .extended-help .ral_7035_demo {
    display:inline-block;
    padding: 0.1rem 0.25rem;
    border: 1px solid black;
    background-color: #CBD0CC;
}

.entry.has_error label, .entry.has_error input {
    border-color: var(--error-marker);
}

.entry .error::before {
    content: " ";
    display:inline-block;
    width:1.5rem;
    height:1.5rem;
    margin-bottom:-0.25rem;
    background-image:url('icons/warning-icon.png');
    background-size:100% 100%;
    margin-right:0.5rem;
}

.entry .error {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    margin-top: 0.25rem;
    margin-bottom: .5rem;
    background-color: var(--error-marker);
    padding: .25rem .5rem;
    border-radius: 0.25rem;
}

.hidden {
    display:none !important;
}


.item {
    width:100%;
    padding:1rem;
    margin-bottom:1rem;
    border:1px solid var(--dark-marker);
    border-radius:0.25rem;

    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;

    background-color: var(--light-boxelem);
    cursor:pointer;
}

.item:hover, .item.selected {
    background-color: var(--light-marker);
}

.item.selected:hover {
    background-color: var(--light-marker--highlight);
}

.item .image {
    flex-basis:15%;
    flex-grow:0;
    flex-shrink:0;
    max-width:15%;
    border-radius:0.25rem;
    text-align:center;
}

.item .image img {
    display:block;
    margin:auto;
    max-width:100%;
    border-radius:0.25rem;
}

.item .info {
    flex-basis:85%;
    flex-grow:0;
    flex-shrink:0;

    display:flex;
    flex-direction:column;
    flex-wrap:nowrap;
    justify-content:space-between;
    padding:0 1rem 0.5rem;
    text-align:justify;
}

.item .kast-warnings {
    flex-basis: 100%;
    flex-grow: 0;
    flex-shrink: 0;
    background-color:red;
    font-style: italic;
    background-color: var(--light-marker);
    padding:0.25rem 0.5rem;
    border-radius: 0.25rem;
}

.item.selected .kast-warnings, .item:hover:not(.selected) .kast-warnings {
    background-color: var(--light-marker--highlight)
}

.item.selected:hover .kast-warnings {
    background-color: var(--light-marker--highlighter)
}

.item .kast-warnings::before {
    content: " ";
    display:inline-block;
    width:1.5rem;
    height:1.5rem;
    margin-bottom:-0.25rem;
    background-image:url('icons/warning-icon.png');
    background-size:100% 100%;
    margin-right:0.5rem;
}


.item .info h3 {
    margin-bottom:0.5rem;
}

.item .info .summary {
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:nowrap;
    justify-content:space-between;
    margin-top:0.5rem;
}

.item .info .summary .field {
    flex-basis:25%;
    flex-grow: 0;
    flex-shrink: 0;
}

.item .info .summary .field .label {
    color: var(--dark-marker);
    font-size:80%;
}

.item .info .summary .field .data {
    color: var(--dark-marker);
}


.item .details {
    flex-basis:15%;
    flex-grow:0;
    flex-shrink:0;
    padding:0.5rem;
}

.item .energielabel {
    width:4rem;
    height:2rem;
    line-height: calc(2rem - 2px);
    font-size:1.8rem;
    color:white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
    text-align:left;
    padding-left:0.75rem;
    background-size:100% 100%;
    background-repeat:none;
    position:relative;
}
.item .energielabel:after {
    content: '';
    position: absolute;
    right: -1rem;
    border-top: 1rem solid transparent;
    border-bottom: 1rem solid transparent;
}

.item .energielabel.aa:before {
    content: "A+";
}
.item .energielabel.aa {
    background-color: #005c8d;
}
.item .energielabel.aa:after {
    border-left: 1rem solid #005c8d;
}


.item .energielabel.a:before {
    content: "A";
}
.item .energielabel.a {
    background-color: #0379b1;
}
.item .energielabel.a:after {
    border-left: 1rem solid #0379b1;
}

.item .energielabel.b:before {
    content: "B";
}
.item .energielabel.b {
    background-color: #4cb85c;
}
.item .energielabel.b:after {
    border-left: 1rem solid #4cb85c;
}

.item .energielabel.c:before {
    content: "C";
}
.item .energielabel.c {
    background-color: #ffdd00;
}
.item .energielabel.c:after {
    border-left: 1rem solid #ffdd00;
}

.item .energielabel.d:before {
    content: "D";
}
.item .energielabel.d {
    background-color: #ff0000;
}
.item .energielabel.d:after {
    border-left: 1rem solid #ff0000;
}

.item .energielabel.e:before {
    content: "E";
}
.item .energielabel.e {
    background-color: #730000;
}
.item .energielabel.e:after {
    border-left: 1rem solid #730000;
}



/**
 * Results Page
 */

.results h2 {
    margin-top: 2rem;
    text-align: center;
}

.results h3 {
    font-size:100%;
    font-weight:bold;
    text-align: center;
    width:100%;
    background-color: var(--light-marker);
    margin-bottom:1rem;
    margin-top:2rem;
}


.results .thanks .right + .right {
    margin-right: 0.5rem;
}

.results .right {
    float:right;
}
.results .right .qty {
    display:inline-block;
    width:4rem;
    text-align:center;
}
.results .right .times, .results .right .equals {
    display:inline-block;
    width:1rem;
    text-align:center;
}
.results .right .unitprice, .results .right .total {
    display:inline-block;
    width:6rem;
    text-align:right;
}

.results .right .total.sumline {
    border-bottom:1px solid black;
}

.results .key {
    display:inline-block;
    width:16rem;
}
.results .key_short {
    display:inline-block;
    width:8rem;
}

.results .value {
    display:inline-block;
}
.results .value1 {
    display:inline-block;
    width:10rem;
    text-align: right;
}
.results .unit1 {
    display:inline-block;
}

.results .airvalue {
    display:inline-block;
    min-width:4rem;
    text-align:right;
    padding-right:0.5rem;
}
.results .airunit {
    display:inline-block;
    min-width:4rem;
}

.results table {
    margin-top:1rem;
    margin-bottom:2rem;
}

.results .transport_table {
    width:100%;
}

.results .transport_table td, .transport_table th {
    width: calc(100% / 6)
}
.results .transport_table th {
    font-weight: normal;
}
.results .transport_table td {
    text-align: center;
}

.results .luchtgegevens_table {
    margin-top:1rem;
}
.results .luchtgegevens_table td, .results .luchtgegevens_table th {
    width: 25%;
}
.results .luchtgegevens_table th {
    text-align:left;
}


.results .mechanische_eigenschappen_table {
    margin-top:0.5rem;
    border: 0px solid #000000;
    width: 100%;
    text-align: center;
    border-collapse: collapse;
}
.results .mechanische_eigenschappen_table td, .results .mechanische_eigenschappen_table th {
    border: 1px solid #000000;
    padding: 5px 4px;
}
.results .mechanische_eigenschappen_table tbody td {
    font-size: 13px;
}
.results .mechanische_eigenschappen_table thead {
    background: #EBEBEB;
    border-bottom: 1px solid #000000;
}
.results .mechanische_eigenschappen_table thead th {
    font-size: 15px;
    font-weight: bold;
    text-align: center;
}
.results .mechanische_eigenschappen_table tfoot {
    font-size: 14px;
    font-weight: bold;
    border-top: 3px solid #000000;
}
.results .mechanische_eigenschappen_table tfoot td {
    font-size: 14px;
}

.results .erp_table, .results .erp_table tbody {
    width:100%;
}

.results .erp_table th {
    font-weight:normal;
    text-align:left;
    width:27.5%;
}

.results .erp_table th:first-child {
    width:20%;
}

.results .erp_table td {
    width:17.5%;
}

.results .sound_table {
    width:100%;
    padding-top:1rem;
}

.results .sound_table th, .results .sound_table td {
    width:2rem;
    text-align:center;
}

.results .sound_table th:first-child, .results .sound_table td:first-child {
    width:8rem;
    text-align:left;
}

.results .sound_table th.wider, .results .sound_table td.wider {
    width:3rem;
}


.results .ahu_sec_entry {
    width: 100%;
    clear:both;
    display: grid;
    grid-template-columns: 50% 50%;
}

.results .ahu_sec_entry .half {
    display: grid;
    grid-template-columns: 16rem auto;
}

.results .spec {
    width: 100%;
    float:right;
}

.results .spec.underline {
    border-bottom:1px solid black;
    margin-bottom:0.5rem;
    padding-bottom:0.5rem;

}

.results .spacer {
    clear:both;
}

.results .specifications {
    display:block;
    clear:both;
    margin-bottom:1rem;
}

.results .zie_toevoer {
    font-style: italic;
}

.thanks {
    max-width:960px;
    margin-top: 3rem;
    margin-left: auto;
    margin-right: auto;
    padding-left:0.5rem;
    padding-right:0.5rem;
}

.thanks h1 {
    padding-top:1rem;
    padding-bottom:1rem;
}
.thanks p {
    margin-bottom:1rem;
}

.thanks .summary {
    width: 100%;
}

.thanks .step {
    width: 100%;
    display:flex;
    flex-flow: row wrap;
    margin-bottom:2rem;
}

.thanks .step .fieldname {
    flex-basis: 16rem;
    flex-grow:0;
    flex-shrink:0;
    text-overflow:ellipsis;
    overflow:hidden;
    white-space: nowrap;
    height:2rem;
}

.thanks .step .fieldvalue {
    height:2rem;
    flex-basis:calc(100% - 16rem);
}

.thanks .ordered-unit {
    margin: 0px auto;
    width:100%;
    text-align:center;
}

.thanks .new-selection-button {
    background-image: -webkit-linear-gradient(top, #EB7921 0, #E54E21 100%);
    background-image: -o-linear-gradient(top, #EB7921 0, #E54E21 100%);
    background-image: linear-gradient(to bottom, #EB7921 0, #E54E21 100%);
    background-repeat: repeat-x;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffeb7921', endColorstr='#ffe54e21', GradientType=0);
    color:white;
    font-weight:bold;
    border-width: 0px;
    padding:0.5rem;
    cursor:pointer;
    border-radius:0.25rem;
}

.thanks .new-selection-button:hover {
    background-image:-webkit-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:-o-linear-gradient(top, #E54E21 0, #E54E21 100%);
    background-image:linear-gradient(to bottom, #E54E21 0, #E54E21 100%);
    background-repeat:repeat-x;
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe54e21', endColorstr='#ffe54e21', GradientType=0);
    -webkit-transition:.4s;
    -o-transition:.4s;
    transition:.4s
}

hr {
    margin-bottom:1rem;
}


.empty {
    border-top:1px solid lightgray;
    border-bottom:1px solid lightgray;
    padding-top: 1rem;
    padding-bottom: 1rem;
    margin-top: 1rem;
    margin-bottom: 1rem;
    text-align: center;
    color: var(--dark-marker);
}

.unnamed {
    font-style: italic;
    color: var(--dark-marker);
}


.selection-actions {
    margin-bottom: 1rem;
    display: flex;
    flex-direction: row wrap;
    justify-content: flex-start;
}

.selection-actions .button-icon {
    height:3rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left:3rem;
    padding-right:1rem;
    border-radius: 0.25rem;
    line-height:2rem;
    background-size: 2rem 2rem;
    background-position: 0.5rem 0.5rem;
    background-repeat:no-repeat;
    color: var(--dark-marker);
    background-color:var(--light-marker);
    text-decoration:none;
}

.selection-actions .button-icon:not(:first-child) {
    margin-left:1rem;
}

.selection-actions .button-icon.enabled {
    cursor: pointer;
    color: var(--font-color);
}

.selection-actions .button-icon.enabled:hover {
    background-color:var(--light-marker--highlight);
}

.selection-actions .button-icon.button-icon--delete {
    background-image: url('icons/trash_icon-light.svg');
}

.selection-actions .button-icon.button-icon--delete.enabled {
    background-image: url('icons/trash_icon-dark.svg');
}


.selection-actions .button-icon.button-icon--restore {
    background-image: url('icons/restore_icon-light.svg');
}

.selection-actions .button-icon.button-icon--restore.enabled {
    background-image: url('icons/restore_icon-dark.svg');
}

.selection-actions .button-icon.button-icon--new {
    background-image: url('icons/new_icon-light.svg');
}

.selection-actions .button-icon.button-icon--new.enabled {
    background-image: url('icons/new_icon-dark.svg');
}

.name-company {
    color: var(--dark-marker);
    font-size: 80%;
}

details.error-info {
    font-family: monospace;
    background-color: var(--light-marker);
    padding: 1rem;
    margin-bottom: 1rem;
}

details[open].error-info summary {
    border-bottom: 1px solid var(--dark-marker);
    margin-bottom: 1rem;
}

.tabs {
    margin-top:1rem;
    width:100%;
    border-bottom: 1px solid var(--dark-marker);

    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    gap:0.5rem;
}

.tabs .tabs-left {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    gap:0.5rem;
}

.tabs .tabs-right {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-end;
    gap:0.5rem;
}

.tabs .tab {
    display: block;
    padding:0.5rem 0.5rem;
    background-color:var(--light-marker);
    border-top-left-radius:0.25rem;
    border-top-right-radius:0.25rem;
}

.tabs a.tab {
    color: var(--font-color);
    text-decoration: none;
}

.tabs a.tab:hover {
    background-color: var(--light-marker--highlighter)
}

.tabs .tab.selected {
    background-color:var(--light-marker--highlight);
    border-top: 1px solid var(--dark-marker);
    border-left: 1px solid var(--dark-marker);
    border-right: 1px solid var(--dark-marker);
}

.tabs a.tab.tab--right {
    align-self: flex-end;
}


#pdf-calculation img {
    display: inline;
    height: 1em;
    width: 1em;
    vertical-align: text-bottom;
}


.tech-energy {
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
}

.tech-energy .tech {
    flex-basis: calc(100% - 14srem);
}

.tech-energy .energy {
    flex-basis: 13rem;
    flex-grow: 0;
    flex-shrink: 0;
}

.tech-energy .energy .energie-label-image {
    float: right;
    max-width: 13rem;
}


.basic-subheader {
    font-weight:normal;
}