#selectPersons{
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    .persons {
        height: 32px;
        width:32px;
        border: solid 1px #e5e5e5;
        display:block;
        background-repeat: no-repeat;
        background-position: center;
        &.persons-1{
            background-image: url("/++resource++wolfix.econtrol/one.png");
        }
        &.persons-2{
            background-image: url("/++resource++wolfix.econtrol/two.png");
        }
        &.persons-3{
            background-image: url("/++resource++wolfix.econtrol/three.png");
        }
        &.persons-4{
            background-image: url("/++resource++wolfix.econtrol/four.png");
        }
        &.persons-5{
            background-image: url("/++resource++wolfix.econtrol/five.png");
        }
        &.selected{
            border:solid 2px black;
        }
    }
}
.portletCalculator{
    label{
        display:inline;
    }
    #formfield-form-widgets-emOneType, #formfield-form-widgets-emTwoType, #formfield-form-widgets-emTwoLowUsage,
    #formfield-form-widgets-emTwoHighUsage, #formfield-form-widgets-feedInQuantity, #formfield-form-widgets-feedInPv,
    #formfield-form-widgets-emTwoNightUsage{

        &:not([class*="show-field"]){
            visibility: hidden;
            opacity: 0;
            height:0;
            width:0;
            opacity: 0;
            margin-bottom:0px;
        }
        &.show-field{
            visibility: visible;
            opacity: 1;
            height:auto;
            width:auto;
            margin-bottom:15px;
            transition: all 2s, opacity 2s;
        }

    }

    #energytype{
        padding:0px;
        margin:0px;
        span{
             float:left;
             width:50%;
             display:block;
             label {
                display:block;
                 width:100%;
                 text-align:center;
                 text-transform:uppercase;
                 padding:0px;
                 height:34px;
                 line-height:34px;
                 &.power{background-color:#a51b25; color:white;
                    &:hover{
                        background-color:#a51b25;
                    }
                 }
                 &.gas{background-color:#EDDD38; color:black;
                    &:hover{
                        background-color:#989250;
                    }
                 }
            }
        }
    }
    .link{
        cursor: pointer;
    }
}
.loader-bg{
    position:fixed;
    background-color:lightgrey;
    opacity: 0.5;
    width:100%;
    height:100%;
    top:0px;
    left:0px;
}
.loader-wrapper{
    position:fixed;
    margin:auto;
    top:30%;
    width:100%;
}

.loader{
    &,
    &:before,
    &:after {
      background: #000000;
      -webkit-animation: load1 1s infinite ease-in-out;
      animation: load1 1s infinite ease-in-out;
      width: 1em;
      height: 4em;
    }
    & {
      color: #000000;
      text-indent: -9999em;
      margin: 88px auto;
      position: relative;
      font-size: 11px;
      -webkit-transform: translateZ(0);
      -ms-transform: translateZ(0);
      transform: translateZ(0);
      -webkit-animation-delay: -0.16s;
      animation-delay: -0.16s;
    }
    &:before,
    &:after {
      position: absolute;
      top: 0;
      content: '';
    }
    &:before {
      left: -1.5em;
      -webkit-animation-delay: -0.32s;
      animation-delay: -0.32s;
    }
    &:after {
      left: 1.5em;
    }
    @-webkit-keyframes load1 {
      0%,
      80%,
      100% {
        box-shadow: 0 0;
        height: 4em;
      }
      40% {
        box-shadow: 0 -2em;
        height: 5em;
      }
    }
    @keyframes load1 {
      0%,
      80%,
      100% {
        box-shadow: 0 0;
        height: 4em;
      }
      40% {
        box-shadow: 0 -2em;
        height: 5em;
      }
    }
}

/*
    START ECONTROL
*/
.econtrolha{margin-top:25px;}
.econtrolha > *{font-size:12px;}
.econtroldata{font-size:10px; text-align:right;padding-top:5px;}
.econtrollogo {
    text-align: right;
    margin-top: 30px;
    margin-bottom: -20px;
    padding: 0px;
}
.fecontrollogo{text-align: right;}
.fecontroldata{text-align:right; font-size:12px;}
.product-detail-wrapper .econtrollogo img{float:right}
.product-detail-wrapper h3 {
    font-size: 18px;
    font-weight: bold;
    border-bottom: solid 1px darkgrey;
    margin-left: 15px;
    margin-right: 15px;
}


.portletCalculator .select2-choice, .portletCalculator .select2-arrow{border-radius:0px!important;}

.portletCalculator .portlet-form{padding:0px!important;}
.portletCalculator form > div{padding-left:15px; padding-right:15px;}
.portletCalculator #formfield-form-widgets-energyType{padding:0px!important}
#formfield-form-widgets-zipcode .formHelp, #formfield-form-widgets-netsupplier .formHelp{display:none;}
.portletCalculator .portletHeader{display:none;}
#form-buttons-calculate{width:100%;background-color:#7A7A7A;border-color:black;color:white;}
#formfield-form-widgets-energyType .option label.selected{text-decoration:underline}
.product {    padding-top:0px}
#formfield-form-widgets-energyType .option label input{visibility:hidden; position:absolute;}
.template-calculator_view .documentFirstHeading{display:none}
.product .indent{padding-left:30px;}
.product label, .product-detail-wrapper label {font-weight:100;}

.product .span{text-align:right;}
.product-detail-wrapper .item > span {
    text-align: right;
}

#formfield-form-widgets-customerGroup.field {
    margin-bottom: 0;overflow:hidden;}
#ihreDaten{border: 3px solid #e3e5e7;}
#ihreDaten{margin-bottom:25px;padding-bottom:25px;text-align:center}
.product-detail-wrapper .sum{font-weight:normal}

.productSummary{
    .productTitle{
        display: flex;
        align-items: center;
        justify-content: center;
        height:70px;
       h2{
            font-size:28px;
            white-space: normal;
            overflow:hidden;
            margin:0;
            line-height:1;
            text-align:center;
            height:auto!important;
        }
    }
    .sum{
        font-size:16px!important;
        &.total{font-weight:nomal; font-size:32px!important;}
    }
}
#calculatorResult{
    .noresult {
        font-weight:bold;
        text-align: center;
        padding-top:15px;
        padding-bottom: 15px;
    }
}

.product-POWER .seperator{border-top: solid 1px #a51b25;
    width: 20%;
    margin: auto;
    margin-top: auto;
    margin-bottom: auto;
    margin-top: 11px;
    clear: both;
    margin-bottom: 15px;
 }
 .product-detail-wrapper{
     .box{
        border:solid 1px #a51b25;
        padding:5px;
        overflow: hidden;
        margin-bottom:15px;
     }
    .brandheader{color: #a51b25; font-weight:bold; }
    .highlight{background-color: #EEEEEE; }
    .discount input{margin-right: 10px;}
    .item{width:100%;overflow:hidden;}
    .seperator{border-top:solid 1px #e3e5e7;margin-top:10px; margin-bottom:10px;width:100%; overflow:hidden;}

 }


#content{
    .product {
        .productSummary {
            background: white none repeat scroll 0 0;
            border: solid 5px #a51b25;
            -webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            color: black;
            padding-bottom: 15px;
        }
        .details{
            display: none;
            padding : 5px;
        }
        a{text-decoration:none;}
        .showMoreMod{margin-top:20px;text-decoration: underline;}
        .plone-btn-wrapper .plone-btn{margin:3px;display:block;margin-top:5px; color:white;}
        .plone-btn-wrapper {padding:0px}
        .plone-btn-wrapper.btn-wechseln .plone-btn{background-color:#a51b25; border-color:#931007;}
        .plone-btn-wrapper.btn-wechseln .plone-btn:hover{background-color:#931007;}
        .plone-btn-wrapper.btn-details .plone-btn{background-color:#7A7A7A;border-color:black;}
        .plone-btn-wrapper.btn-details .plone-btn:hover{background-color:black;}
        .plone-btn-wrapper .glyphicon{font-size:16px;padding-right:5px}
}

}
.product-detail-wrapper {
    overflow: hidden;
    .tar{text-align:right;}
    #jahresgesamtpreis{
    background: #a51b25;
    color: white;
    font-weight:bold;
    }
    #jahresgesamtpreis label{
        color: white;
        font-weight:bold;
    }
}
.productSummary-GAS{ border: 5px solid #EDDD38!important;}
.view-name-calculatorgas_view{
    label .required{
        &::after{
            color: #EDDD38!important;
        }
    }
}




/* Kundengruppe: kompakte Darstellung im Formular */
#formfield-form-widgets-customerGroup.field,
.customer-group-info {
    clear: both;
    display: block;
    margin: 8px 0 10px 0;
    padding: 0;
    overflow: visible;
}

#formfield-form-widgets-customerGroup label,
.customer-group-info label {
    display: block;
    margin-bottom: 3px;
}

#formfield-form-widgets-customerGroup select,
.customer-group-info .customer-group-info-value {
    width: 100%;
    box-sizing: border-box;
}

.customer-group-info .customer-group-info-value {
    border: 1px solid #ccc;
    background: #f7f7f7;
    padding: 5px 6px;
    min-height: 28px;
}

/* Kundengruppe: eigene kompakte Auswahl im Portlet */
.portletCalculator #formfield-form-widgets-customerGroup {
    display: none !important;
}

.portletCalculator .customer-group-compact {
    clear: both;
    display: block;
    margin: 8px 15px 12px 15px;
    padding: 0;
}

.portletCalculator .customer-group-compact label {
    display: block;
    font-weight: bold;
    margin: 0 0 3px 0;
}

.portletCalculator .customer-group-select,
.portletCalculator .customer-group-info-value {
    display: block;
    width: 100%;
    height: 30px;
    line-height: 30px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    background: #fff;
    padding: 3px 6px;
}

.portletCalculator .customer-group-info-value {
    background: #f7f7f7;
}

/* E-Control Kennzeichnung */
.econtrollogo,
.fecontrollogo {
    margin-top: 12px;
    margin-bottom: 8px;
    text-align: right;
}

.econtrollogo .econtrol-logo-img,
.fecontrollogo .econtrol-logo-img {
    max-width: 180px;
    height: auto;
    display: inline-block;
}

.portletCalculator .customer-group-compact {
    margin-top: 10px;
    margin-bottom: 12px;
}

.portletCalculator .econtrol-portlet-logo {
    margin-top: 14px;
    text-align: center;
}

.portletCalculator .econtrol-portlet-logo img {
    max-width: 160px;
    height: auto;
}

/* E-Control Pflichtangaben gemäß Nutzungsbedingungen */
.portletCalculator .econtrol-portlet-compliance {
    margin: 14px 15px 8px 15px;
    padding-top: 12px;
    border-top: 1px solid #ddd;
}

.portletCalculator .econtrol-portlet-source {
    margin-top: 8px;
    font-size: 12px;
    font-weight: bold;
    line-height: 1.35;
}

.portletCalculator .econtrol-portlet-disclaimer,
.portletCalculator .econtrol-portlet-service-disclaimer {
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.35;
    color: #555;
    text-align: left;
}

.portletCalculator .econtrol-portlet-service-disclaimer {
    padding-top: 8px;
    border-top: 1px solid #eee;
}