.template {
    display: none;
}

div.plannerModeLookUp {
}

input.lookUpInput {
    width: 280px;
    padding-left: 2px;
}

div.selectAll, div.unselectAll {
    display: none;
}

div#plannerModeResponse {
}

div.plannerModeResponseHeader {
    border-bottom: 1px dotted black;
}

    div.plannerModeResponseHeader label {
        vertical-align: top;
        height: 38px;
        font-size: 13px;
        cursor: pointer;
    }


        div.plannerModeResponseHeader label.desc:after {
            content: url(data:image/gif;base64,R0lGODlhCAAIAPcAAPX19Xp6euvr67m5udjY2Ht7e+zs7KSkpGdnZ8PDw9fX12ZmZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAIAAgAAAgvAAEoGEhgoAIGBRYgULjgAIMECyJGNMAAIUOHFSFGFFCxYoCGHTMuoBiSwYCOAQEAOw==);
            margin-left: 4px;
        }

        /*
div.plannerModeResponseHeader label.desc {
    background-image: url(data:image/gif;base64,R0lGODlhCAAIAPcAAPX19Xp6euvr67m5udjY2Ht7e+zs7KSkpGdnZ8PDw9fX12ZmZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAAIAAgAAAgvAAEoGEhgoAIGBRYgULjgAIMECyJGNMAAIUOHFSFGFFCxYoCGHTMuoBiSwYCOAQEAOw==);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 5px;
}
*/

        div.plannerModeResponseHeader label.asc:after {
            content: url(data:image/gif;base64,R0lGODlhCAAIAPcAAPX19Xp6euvr67m5udjY2Ht7e+zs7KSkpGdnZ8PDw9fX12ZmZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAACAAIAAAILwAZCBwgsCADAwsSGGRwYEEAgwIWSFQosCGCBQUEIpQ4keGCixczKhhJYKQCAAEBADs=);
            margin-left: 4px;
        }

/*
div.plannerModeResponseHeader label.asc {
    background-image: url(data:image/gif;base64,R0lGODlhCAAIAPcAAPX19Xp6euvr67m5udjY2Ht7e+zs7KSkpGdnZ8PDw9fX12ZmZv///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACwAAAAACAAIAAAILwAZCBwgsCADAwsSGGRwYEEAgwIWSFQosCGCBQUEIpQ4keGCixczKhhJYKQCAAEBADs=);
    background-repeat: no-repeat;
    background-position-x: right;
    background-position-y: 5px;
}
*/



div.plannerModeResponseItem {
    border-bottom: 1px dotted black;
    height: 30px;
}

    div.plannerModeResponseItem label {
        cursor: pointer;
        line-height: 30px;
    }

label.luminaireCode {
    display: inline-block;
    width: 100px;
}

label.model {
    display: inline-block;
    width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

label.distribution {
    display: inline-block;
    width: 105px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

label.numberOfLED {
    display: inline-block;
    width: 48px;
}


label.lumenMin {
    display: inline-block;
    width: 68px;
}

label.lumenMax {
    display: inline-block;
    width: 68px;
}

label.powerMin {
    display: inline-block;
    width: 68px;
}

label.powerMax {
    display: inline-block;
    width: 62px;
}

label.download {
    margin-top: 20px;
    cursor: pointer;
}

.plannerModeResponseItem input[type=checkbox] {
    display: none;
}


    .plannerModeResponseItem input[type=checkbox] + label {
        background-image: url(data:image/gif;base64,R0lGODlhCwALAJEAAGdnZ2ZmZv///wAAACH5BAAAAAAALAAAAAALAAsAAAIWjI8my6zdHlwgTGevkJNDH2VXUlVHAQA7);
        background-position-y: center;
        background-repeat: no-repeat;
        cursor: pointer;
        padding-left: 20px;
    }



    .plannerModeResponseItem input[type=checkbox]:checked + label {
        background-image: url(data:image/gif;base64,R0lGODlhCwALAJEAAGdnZ////2ZmZgAAACH5BAAAAAAALAAAAAALAAsAAAIclI8WyywQkpoyQiliNgAcrXGKFx7XVpFNY2JCAQA7);
        background-position-y: center;
        background-repeat: no-repeat;
    }



div.alertFullscreenOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(256,256,256,0.6);
    z-index: 6001;
}


div.alertContainer {
    position: relative;
    margin: 15% auto;
    width: 600px;
    height: auto;
    padding-bottom: 10px;
    background: #fff;
    border-top: 1px solid #000000;
    border-left: 1px solid #000000;
    -webkit-box-shadow: 4px 4px 7px 0px rgba(0,0,0,0.5);
    -moz-box-shadow: 4px 4px 7px 0px rgba(0,0,0,0.5);
    box-shadow: 4px 4px 7px 0px rgba(0,0,0,0.5);
}


    div.alertContainer h1 {
        position: relative;
        margin-left: 18px;
        margin-top: 6px;
        margin-bottom: 3px;
        font-family: ewo_lightb;
        font-size: 13px;
        line-height: 18px;
        text-transform: uppercase;
    }

    div.alertContainer p {
        position: relative;
        top: 13px;
        font-family: ewo_lightb;
        line-height: 21px;
        width: auto;
        margin-left: 40px;
        margin-right: 40px;
        overflow: hidden;
        word-wrap: break-word;
    }

        div.alertContainer p.closeElement {
            position: absolute;
            right: 10px;
            margin-right: 0;
            top: 2px;
            cursor: pointer;
        }

            div.alertContainer p.closeElement:before {
                content: "\2716";
            }

            div.alertContainer p.closeElement:hover {
                color: #000000;
            }

div.alertButtonContainer {
    position: relative;
    margin: 20px auto 20px;
    width: 540px;
    height: 34px;
}

div.alertButton {
    position: relative;
    float: left;
    width: 248px;
    height: 30px;
    margin: 10px;
    border: 1px solid #b9bbbb;
    text-align: center;
    cursor: pointer;
}

    div.alertButton p {
        position: relative;
        left: 0;
        top: 0;
        width: auto;
        line-height: 30px;
    }

    div.alertButton:hover {
        border: 1px solid #000000;
    }

        div.alertButton:hover p {
            color: #000000;
        }

/* Loader Spinner Styles */
.questionLoaderSpinner {
    display: block !important;
    position: relative;
    padding-top: 20px;
    padding-bottom: 30px;
    text-align: center;
    margin: 10px 0;
    border-bottom: 1px solid #e7e7e7;
    width: 570px;
}

.loader-container {
    display: inline-block;
    text-align: center;
}

.loader-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid #e7e7e7;
    border-top: 2px solid #666666;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}

.loader-text {
    font-family: ewo_lightb;
    font-size: 13px;
    color: #666666;
    display: inline-block;
    vertical-align: middle;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* CONF-820: centre the page. The wide legacy layout is a fixed-width block pinned to the left edge with an empty
   450px column on its left, so the content sits right of centre. Up to 1010px prodconf.css and fonts.css already
   switch to a centred single column; this applies that column to wider screens, with header and modules
   sharing one 570px width. */
@media only screen and (min-width: 1011px) {
    .wrapper {
        display: block;
        width: 570px;
        margin: 0 auto;
    }

    #wrapper {
        margin-left: 0;
    }

    header,
    div.pcHeader {
        width: 570px;
    }

    header div.logo {
        background-size: 180px auto;
        height: 90px;
        width: 180px;
        top: 58px;
        left: -28px;
    }

    div.pcHeader div.navigationHolder {
        margin-bottom: 40px;
    }

    div.container,
    #main,
    .module,
    .question,
    #M06ELCustomContainer .module {
        width: 570px;
    }

    #main {
        margin-left: 0;
    }

    #LightingControl .answers {
        display: inline-block;
        width: 570px;
    }

    .languageBar {
        position: relative;
        left: unset;
        float: right;
        z-index: 700;
    }
}

.languageBar {
    /* The bar sits right of the logo, which leaves 390px. fonts.css made that a fixed width with no wrapping; keep the
       languages within it, right-aligned to the column edge. */
    position: relative;
    width: auto;
    max-width: 390px;
    text-align: right;
}

/* Login button / user name: its own row in the empty band above the languages (right-aligned, out of the language
   line), so it never wraps or collides with the logo whatever the language or the length of the name. */
.plannerModeAccount {
    position: absolute;
    right: 0;
    top: -28px;
    white-space: nowrap;
    font-family: ewo_lightb;
    font-size: 13px;
    line-height: 20px;
}

.plannerModeLoginButton {
    padding: 0 12px;
    height: 20px;
    font-family: ewo_lightb;
    font-size: 13px;
    line-height: 18px;
    color: #000000;
    background: #ffffff;
    border: 1px solid #b9bbbb;
    cursor: pointer;
}

    .plannerModeLoginButton:hover,
    .plannerModeLoginButton:focus {
        border-color: #000000;
    }

.plannerModeUserName {
    display: inline-block;
    max-width: 260px; /* a long name is cut with an ellipsis (full name in the title) */
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: top;
}

div.alertContainer.loginModal {
    max-width: 90%;
}

    /* The title is position: relative and later in the DOM, so without a z-index it covers the X and takes its clicks.
       The padding makes a hit area the size of a finger; top/right keep the glyph where it was. */
    div.alertContainer.loginModal p.closeElement {
        z-index: 1;
        top: -4px;
        right: 2px;
        margin: 0;
        padding: 6px 8px;
    }

.loginModalForm {
    margin: 14px 40px 0;
    font-family: ewo_lightb;
    font-size: 13px;
    line-height: 18px;
}

.loginModalField {
    display: block;
    margin-bottom: 12px;
}

    .loginModalField span {
        display: block;
        margin-bottom: 3px;
    }

    .loginModalField input {
        width: 100%;
        box-sizing: border-box;
        height: 30px;
        padding: 0 8px;
        border: 1px solid #b9bbbb;
        font-family: inherit;
        font-size: 13px;
    }

        .loginModalField input:focus {
            border-color: #000000;
            outline: none;
        }

.loginModalRemember {
    display: block;
    cursor: pointer;
}

    .loginModalRemember input {
        margin-right: 6px;
        vertical-align: middle;
    }

.loginModalError {
    min-height: 21px;
    margin-top: 8px;
    line-height: 21px;
    color: #cc0000;
}

.loginModalButtons {
    display: flex;
    gap: 20px;
    margin: 6px 0 14px;
}

.loginModalButton {
    flex: 1;
    height: 30px;
    border: 1px solid #b9bbbb;
    background: #ffffff;
    font-family: ewo_lightb;
    font-size: 13px;
    cursor: pointer;
}

    .loginModalButton:hover,
    .loginModalButton:focus {
        border-color: #000000;
    }

    .loginModalButton:disabled {
        opacity: 0.5;
        cursor: default;
    }