/*-----------------------------------------*/
/*--LEDVANCE LED Power Calculator Web App--*/
/*---Author: Jens Fakesch @ Fuchs&Vogel----*/
/*-----------------------------------------*/

:root {
    --ledvorange: #ff6600;
    --ledvorange_light: #f8a17e;
    --backgroundcolor: #080807;
    --lineheight: 38px;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../assets/HelveticaNeueLTPro-Bd.woff2') format('woff2'),
        url('../assets/HelveticaNeueLTPro-Bd.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'HelveticaNeue';
    src: url('../assets/HelveticaNeueLTPro-Roman.woff2') format('woff2'),
        url('../assets/HelveticaNeueLTPro-Roman.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

html,
body {
    height: 100%;
}

#ledvcalc {
    font-family: "HelveticaNeue", sans-serif !important;
    overflow-wrap: break-word;
    /*min-height: 100%;*/
    max-height: 1400px;
}

@media (min-width: 992px) {
    #ledvcalc {
        height: 100%;
    }
}

/*-------HEADER--------*/
#ledvcalc_header {
    background-color: var(--ledvorange);
    height: 100px;
    min-height: 100px;
}

@media (min-width: 992px) {
    #ledvcalc_header {
        /*1/8 of screen*/
        height: 12.5vh;
    }
}

#ledvcalc_header img {
    height: 60%;
    max-width: 100%;
}

/*-------CONTENT--------*/
#ledvcalc_content {
    /*background-image: url("../assets/stromzaehler_01_Main_0000.jpg");*/
    background-color: var(--backgroundcolor);
    background-size: cover;
    background-position: 50% 50%;
    color: white;
    position: relative;
}

@media (max-width: calc(992px - 1px)) {
    #ledvcalc_content {
        height: 1000px;
        min-height: min(min(1160px, 155vh), 355vw);
    }
}

#ledvcalc_content h1 {
    font-size: min(6.5vw, calc(1.375rem + 1.5vw));
}

@media (min-width: 1200px) {
    #ledvcalc_content h1 {
        font-size: 2.5rem;
    }
}

@media (min-width: 992px) and (max-width: 1225px) {
    #ledvcalc_firstblock {
        transform-origin: top left;
        transform: scale(0.85);
        margin-right: -20vw;
        max-height: 100%;
    }

    #ledvcalc_interface_output {
        transform-origin: bottom right;
        transform: scale(0.85);
        margin-left: -20vw;
        max-height: 100%;
    }
}

#ledvcalc_content {
    overflow-x: hidden;
    z-index: 0;
}

#ledvcalc_preloader {
    background-color: var(--backgroundcolor);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 50;
}

#ledvcalc_content_container {
    max-width: 1400px;
}

@media (min-width: 992px) {
    #ledvcalc_content .mw-500 {
        max-width: 560px;
    }
}

#ledvcalc_noscript {
    background-color: var(--backgroundcolor);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
}

#ledvcalc_canvaswrapper {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    overflow: hidden;
}

#ledvcalc_canvas {
    width: 100%;
    height: 100%;
}

.ledvcalc_lamppicto {
    height: 50px;
    margin: 10px;
}

#ledvcalc_calcbtn {
    background-color: var(--ledvorange);
    color: white;
    border-radius: 100px;
    width: 100%;
    min-height: var(--lineheight);

    font-size: min(4vw, 1.25em);
}

#ledvcalc_calcbtn:hover {
    background-color: var(--ledvorange_light);
}

#ledvcalc_headline p {
    width: 0;
    min-width: 100%;
    line-height: 100%;
}

.ledvcalc_label {
    font-weight: bold;
    font-size: 0.75rem;
    line-height: 130%;
    margin-top: 6px;
}

@media (min-width: 992px) {
    .ledvcalc_label {
        font-size: .85rem;
        margin-top: initial;
        /*max-height: var(--lineheight);*/
    }
}

.ledvcalc_input_element {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;

    width: 100%;
    height: var(--lineheight);
    background-color: #e8e9eb;
    border-radius: 6px;

    color: #666767;
    text-align: center;

    padding: 2px;
    padding-left: 5px;
    padding-right: 5px;

    transition: background-color 0s;
}

.ledvcalc_input_element.withInput {
    cursor: pointer;
}


.ledvcalc_hovericon img {
    vertical-align: initial;
    position: absolute;
    right: 11px;
    top: 12px;
}

.ledvcalc_input_element select {
    border: none;
    background: none;
    width: 100%;
    height: 100%;
}

#ledvcalc_interface_input .dropdown-toggle::after {
    content: url("../assets/arrow-down-icon.svg");
    border: none;
    width: 15px;
    position: absolute;
    right: 12px;
    top: 7px;
    transition: transform 0.2s, filter 1s ease;
}

#ledvcalc_interface_input .dropdown-toggle.show::after {
    transform: rotate(180deg) translateY(-2px);
}

#ledvcalc .highlight button::after {
    filter: brightness(0) invert(1);
    transition: filter .2s ease;
}

.ledvcalc_input_element input,
.ledvcalc_input_element input:active,
.ledvcalc_input_element input:focus {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;

    height: 100%;

    text-align: center;
    width: 100%;
    z-index: 1;

    border: none;
    outline: none !important;
    background-color: #e8e9eb;
    border-radius: 6px;
    color: #666767;
}

.ledvcalc_input_element label {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

#ledvcalc .dropdown-item {
    color: #666767 !important;
    padding-left: 7px;
    padding-right: 5px;
}

#ledvcalc .dropdown-item.disabled {
    opacity: 0.4;
}

#ledvcalc .dropdown-item.active,
#ledvcalc .dropdown-item:active {
    background-color: #e8e9eb;
}

#ledvcalc .filter-option-inner-inner {
    text-align: center;
}

#ledvcalc .dropdown-toggle {
    background-color: #e8e9eb;
    color: #666767;
    border: none;
}

@media (max-width: calc(992px - 1px)) {

    #ledvcalc_interface_output:not(.ledvcalc_hidden),
    #ledvcalc_interface_input:not(.ledvcalc_hidden) {
        /*display: none;*/
        opacity: 1;
        transition: opacity .3s ease-in, transform .3s ease-out;
    }

    #ledvcalc_interface_output.ledvcalc_hidden {
        opacity: 0 !important;
        transition: opacity .3s ease-out, transform .3s ease-in;
        transform: translate(200px, 0);
    }

    #ledvcalc_interface_input.ledvcalc_hidden {
        opacity: 0 !important;
        transition: opacity .3s ease-out, transform .3s ease-in;
        transform: translate(-200px, 0);
    }

}

#ledvcalc_interface_output h1 {
    color: var(--ledvorange);
}

#ledvcalc_returnbtn {
    background-color: white;
    color: var(--ledvorange);
    border-radius: 100px;
    width: 100%;
    min-height: var(--lineheight);

    white-space: nowrap;
    font-size: min(4vw, 1.25em);
}

#ledvcalc .bg-darkgrey {
    background-color: #999a9a;
}

#ledvcalc .bg-orange {
    background-color: var(--ledvorange);
}

#ledvcalc .bg-orange-light {
    background-color: var(--ledvorange_light);
}

#ledvcalc *:not(.highlight) button {
    transition: background-color 1s ease, color 1s ease;
}

#ledvcalc .highlight button {
    background-color: var(--ledvorange);
    color: white;
    transition: background-color .2s ease, color .2s ease;
}

@keyframes ledvcalc_pop {
    50% {
        transform: scale(1.1);
    }
}

.ledvcalc_pop {
    animation: ledvcalc_pop 0.25s ease-out;
}

.ledvcalc_output_element {
    color: white;
    font-weight: bold;
}

/*-------FOOTER--------*/
#ledvcalc_footer {
    background-color: white;
    height: 100px;
    min-height: 100px;
    max-width: 100vw;
}

@media (min-width: 992px) {
    #ledvcalc_footer {
        /*1/8 of screen*/
        height: 12.5vh;
    }
}

#ledvcalc_osram {
    /*height: 42px;*/
    height: 80%;
    max-width: 100%;
}

@media (min-width: 992px) {
    #ledvcalc_osram {
        height: 70%;
    }
}