/*@import url("http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,300,700");*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800);

/* ******************************* RESET ******************************* */
/* ********************************************************************* */
/* ********************************************************************* */

/* bootstrap*/
label{
    cursor: default;
}

.container-fluid {
    box-sizing: border-box;
    padding-left: 0;
    padding-right: 0;

}
/*
.twoColumnsFormular .row-fluid [class*="span"]{
    margin-left: 0px;
}*/

.wrapper{
    display: block;

    width: 100%;
    overflow: hidden;
}


.accordion-inner {
    padding: 0;
    background: #ffffff;
    text-transform: capitalize;
}

.accordion-inner h3 {
    color: #999;
    font-size: 11px;
    margin: 0;
    padding: 0 15px;
    text-transform: uppercase;
    background-color: #f3f3f3;
}

.accordion-inner hr {
    padding: 0;
    margin: 0;
}
.accordion hr {
    display: none;
}
.accordion ul {
    border-bottom: 1px solid #ddd;
    padding: 0; margin: 0;
    padding-bottom: 4px;
}
.nav-tabs>li>.btn-group {
    padding-top: 4px;
    padding-right: 4px;
}

.nav-tabs.nav-stacked>li:first-child>a {
    border-radius: 0;
}
.nav-tabs.nav-stacked>li:last-child>a {
    border-radius: 0;
}
.nav-tabs.nav-stacked>li>a {
    border-right: 0;
    border-left: 0;
}
.nav-tabs.nav-stacked>li>label {
    border: 1px solid #ddd;
    padding-top: 8px;
    padding-bottom: 8px;
    line-height: 20px;
    padding-right: 12px;
    padding-left: 12px;
    display: block;
    color: #f23b7f;
    text-decoration: none;
    border: 0;

}
.nav-tabs.nav-stacked>li>label:hover {
    text-decoration: none;
    background-color: #eee;
}

.btn{
    /*min-width: 45px;*/
}


/* ****************************** layout ******************************* */
/* ********************************************************************* */
/* ********************************************************************* */

html,body{
    height: 100%;
    overflow: hidden;
}

/*
wrapperOffCanvas Two Columns, Off Canvas
NavigationContent | Diagram
*/

.wrapperOffCanvas{
    overflow-x: hidden;
    white-space: nowrap;

}

.innerContainer{
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;

}
.innerContainer-off{
    -webkit-transition: .2s all ease;
    -moz-transition: .2s all ease;
    -o-transition: .2s all ease;
    -ms-transition: .2s all ease;
    transition: .2s all ease;
    margin-left: -100%;
    margin-right: 100%;

}

.wrapperOffCanvas:before,
.wrapperOffCanvas:after {
    content:"";
    display:table;
}
.wrapperOffCanvas:after {
    clear:both;
}

.header {
    height: 50px;
    box-sizing: border-box;
    padding-top:5px;
    padding-bottom: 5px;
}

.column{
    display: inline-block;
    float: none;
    vertical-align: top;
    white-space: normal;
}
/* One Column
content
*/
.contentOneColumn{
    width: 100%;
    overflow-y: auto;
}

/* Two Columns
Navigation | Content
*/

.navigationTwoColumns{
    width: 25%;
    min-width: 200px;
    overflow-y: auto;
}
.contentTwoColumns{
    width: 75%;
    padding-left: 20px;
    padding-right: 20px;
    overflow-y: auto;
}

/* Two Columns + Bericht
Navigation | Content | Bericht
*/
.berichtThreeColumns{
    width: 100%;
    padding-left: 20px;
    padding-right: 20px;
    overflow-y: auto;
}



/*
*/
.containerFix{
    width: 100%;
    margin-bottom: 20px;
}
.containerFix .input-append {
    margin-bottom: 0;
}

.row-overflow {
    overflow-x: auto;
    white-space: nowrap;
}

.row-overflow .span1,
.row-overflow .span2,
.row-overflow .span3,
.row-overflow .span4,
.row-overflow .span5,
.row-overflow .span6,
.row-overflow .span7,
.row-overflow .span8,
.row-overflow .span9,
.row-overflow .span10,
.row-overflow .span11,
.row-overflow .span12
{
    box-sizing: border-box;
    display: inline-block;
    float: none;
}


/*.containerInput [class*="span"]{
    margin-left: 0;
}*/

.divide{
    margin-bottom: 15px;
}
.divide-2x{
    margin-bottom: 30px;
}
.s25p{
    width: 25%;
    float: left;
}

.s75p{
    width: 75%;
    float: left;
}
.s80p{
    width: 75%;
    float: left;
}
.s100p{
    width: 100%;
    float: left;
}

/* ****************************** scroll ******************************* */
/* ********************************************************************* */
/* ********************************************************************* */

::-webkit-scrollbar {
    height: 16px;
    overflow: visible;
    width: 16px
}

::-webkit-scrollbar-button {
    height: 0;
    width: 0
}

::-webkit-scrollbar-track {
    background-clip: padding-box;
    border: solid transparent;
    border-width: 0 0 0 4px
}

::-webkit-scrollbar-track:horizontal {
    border-width: 4px 0 0
}

::-webkit-scrollbar-track:hover {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1)
}

::-webkit-scrollbar-track:horizontal:hover {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .1)
}

::-webkit-scrollbar-track:active {
    background-color: rgba(0, 0, 0, .05);
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}

::-webkit-scrollbar-track:horizontal:active {
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}


::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .2);
    background-clip: padding-box;
    border: solid transparent;
    border-width: 1px 1px 1px 6px;
    min-height: 28px;
    padding: 100px 0 0;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07)
}

::-webkit-scrollbar-thumb:horizontal {
    border-width: 6px 1px 1px;
    padding: 0 0 0 100px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset -1px 0 0 rgba(0, 0, 0, .07)
}

::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .4);
    box-shadow: inset 1px 1px 1px rgba(0, 0, 0, .25)
}

::-webkit-scrollbar-thumb:active {
    background-color: rgba(0, 0, 0, 0.5);
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.35)
}

::-webkit-scrollbar-corner {
    background: transparent
}

body::-webkit-scrollbar-track-piece {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 0 0 0 3px;
    box-shadow: inset 1px 0 0 rgba(0, 0, 0, .14), inset -1px 0 0 rgba(0, 0, 0, .07)
}

body::-webkit-scrollbar-track-piece:horizontal {
    border-width: 3px 0 0;
    box-shadow: inset 0 1px 0 rgba(0, 0, 0, .14), inset 0 -1px 0 rgba(0, 0, 0, .07)
}

body::-webkit-scrollbar-thumb {
    border-width: 1px 1px 1px 5px
}

body::-webkit-scrollbar-thumb:horizontal {
    border-width: 5px 1px 1px
}

body::-webkit-scrollbar-corner {
    background-clip: padding-box;
    background-color: #f5f5f5;
    border: solid #fff;
    border-width: 3px 0 0 3px;
    box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .14)
}

/* **************************** typography ***************************** */
/* ********************************************************************* */
/* ********************************************************************* */


body {
    font-family: 'Open Sans', sans-serif !important;

}
/*
h2{
    margin: 0;
    margin-bottom: 20px;
}*/

.input-append .add-on{
    font-size: 11px;
}


/* ******************************* form ******************************** */
/* ********************************************************************* */
/* ********************************************************************* */
textarea {
    width: 95%;

}

.navButton{
    display: none;
    float: none;
}

.iconBtn{

    background:none;
    border:none;
    color:#f23b7f;
}

.form-actions{
    background-color: transparent !important;
}


.highcharts-container .text{
    visibility: hidden !important;
}

.table{
    /*width: 0;*/
    margin-bottom: 0px;
}
.table th{
    font-weight: normal;
}
.tableSpan1{
    width: 100px;
    margin-right: 20px;
}
.tableSpan2{
    width: 300px;
}


.controls{
    min-width: 100px;
    max-width: 150px;

}

#formbtn{
    position: absolute;
    right: 19px;
    /*top: 50px;*/
}


.nav-newitem{
    background-color: #f3f3f3;
}

.displaylock{
    position:absolute;
    left:0px;
    top:0px;
    opacity: .4;
    width: 100%;
    height: 100%;
    background-color: #FFFFFF;
}
.icon-loading{
    display: inline-block;

    background: url(../asset/img/loader.gif);
    background-repeat:no-repeat;
    width: 16px;
    height: 11px;

}



.hideContainer{
    visibility: hidden;
}
.showContainer{
    visibility: visible;
}



.modalconfirm.fade.in{
    top:30%;
}
.modalicon{
    float: left;
}
.modaltext{
    margin-left: 60px;
}



/*
.messagemodal {
    top: -5px;
    left: 50%;
    width: 30%;
    margin-left: -15%;
    *//*width: 280px;
    margin-left: -140px;*//*
}
.errormodal{
    top: -5px;
    left: 50%;
    width: 40%;
    margin-left: -20%;
}

.messagemodal.fade,
.errormodal.fade {
    top: -25%
}

.messagemodal.fade.in,
.errormodal.fade.in {
    top: -5px
}


.yesnomodal{

}
.yesnomodal.fade {
    top: -25%
}
.yesnomodal.fade.in {
    top: 30%
}*/


.imagemodal.fade.in {
    top: 5%;
}
.imagemodal{
    margin-left: 0;
    left: 5%;
    width:90%;
    top: 5%;
    height: 90%;
}
.imagemodal .modal-body {
    max-height: inherit;
    height: 100%;
}
.imagemodal .modal-footer{
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
}

.crop-buttons{
    position: fixed;
    right: 10%;
}
.crop-buttons .btn{
    min-height: 50px;

}
/* IMPORTANT: nowrap as a global argument is pretty brutal + clear: both, else it pushed the howdata button to the left ! */
.alertcontainer {
    white-space:normal;
    clear: both;
}

.messageContainer i{
    float: left;
    width: 20%;
    text-align: center;
    vertical-align: middle;
    /* margin-right: 10px;
     border-right-style: solid;
     border-right-color: #000000;
     border-right-width: 1px;*/
}
.messageContainer p{
    margin: 0;
}




.quickmessage {
    position: fixed;
    top:0px;
    right:30%;
    left:30%;
    /*text-align:center;*/

    color: #333;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: 0px;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;

    padding: 10px;
}
.quickmessage .close{
    float: right;

}
.locker{
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: #FFFFFF;
    opacity: .4;
}

.quickmessage-show {
    visibility:visible;
    top:0px;
    -webkit-transition-delay:0s;
    transition-delay:0s;
    -webkit-transition:top 0.5s ease-in-out;
    transition:top 0.5s ease-in-out;
}
.quickmessage-hide{
    visibility:hidden;
    top: -25%;
    -webkit-transition:visibility 0s linear 0.5s,top 0.5s ease-in-out;
    transition:visibility 0s linear 0.5s,top 0.5s ease-in-out;
}
.quickmessage-body{

}
.quicktext{
    margin-left: 60px;
}
.quickicon{
    float: left;

}
.quickmessage.success .quickicon,
.quickmessage.success strong{
    color: #468847;
    /*background-color: #dff0d8;*/
    /*border-color: #d6e9c6;*/
}
.quickmessage.info .quickicon,
.quickmessage.info strong{
    color: #3a87ad;
    /*background-color: #d9edf7;*/
    /*border-color: #bce8f1;*/
}
.quickmessage.error .quickicon,
.quickmessage.error strong{
    color: #b94a48;
    /*background-color: #f2dede;*/
    /*border-color: #eed3d7;*/
}








.login{
position: fixed;
top: 10%;
left: 50%;
width: 250px;
margin-left: -125px;
}

.legacyPhotovoltaikElement, .legacyStromzaehlerElement {
padding-left:14px;
}


#preloader {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1040;
background-color: #FFFFFF;
}
.preloadercenter {
position: absolute;
top: 30%;
width: 100%;
vertical-align:  middle;
text-align: center;
}

.verticalul{

}
.verticalul > li > label {
color: #f23b7f;
}
.verticalul > li > label > input[type="checkbox"]{
margin: -3px 0 0;
}
/* ****************************** color ******************************** */
/* ********************************************************************* */
/* ********************************************************************* */

body {
    background: #f3f3f3;
    color: #4a4a4a;
}


/*select.ng-invalid-invalidselection{
    outline-width: 2px;
    outline-color: #f2dede;
}
.selectionerroralert {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}

textarea.ng-invalid ,
select.ng-invalid ,
input.ng-invalid
{
    border-color: red;
}

textarea:focus.ng-valid,
select:focus.ng-valid,
input:focus.ng-valid
{
    border-color: #adff2f;
}
*/

input:focus:invalid:focus, textarea:focus:invalid:focus, select:focus:invalid:focus {
    background-color: #f2dede;
    border-color: #eed3d7;
    color: #b94a48;
}

select.ng-invalid-invalidselection,
.selectionerroralert {
    color: #b94a48;
    background-color: #f2dede;
    border-color: #eed3d7;
}




input.ng-invalid-max,
.maximumerroralert {
    color: #468847;
    background-color: #dff0d8;
    border-color: #d6e9c6;
    outline: 0 none;
}



input.ng-invalid-min,
.minimumerroralert {
    color: rgba(200, 90, 125, 0.8);
    background-color:rgba(200, 90, 125, 0.1);
    border-color: rgba(200, 90, 125, 0.2);
    outline: 0 none;
}



input.ng-invalid-number,
.numbererroralert {
    color: rgba(255, 0, 255, 0.8);
    background-color:rgba(255, 0, 255, 0.1);
    border-color: rgba(255, 0, 255, 0.2);
    outline: 0 none;
}



input.ng-invalid-required,
input:focus.ng-invalid-required:focus,
.requirederroralert {
    color: #3a87ad;
    background-color: #d9edf7;
    border-color: #bce8f1;
    outline: 0 none;
}



input.ng-invalid-validnumber{
    color: rgba(0, 255, 255, 0.8);
    border-color: rgba(0, 255, 255, 0.8);
}
.validnumbererroralert {
    color: rgba(0, 255, 255, 0.8);
    background-color: rgba(0, 255, 255, 0.1);
    border-color: rgba(0, 255, 255, 0.2);
    outline: 0 none;
}


.iconBtnDisabled {
    color: #f4aac6;
    cursor: default;
}

.okcolor{
    /*color: #468847;*/
    color: #46a546;
}
.infocolor{
    /*color: #3a87ad;*/
    color: #049cdb;
}
.errorcolor{
    /*color: #b94a48;*/
    color: #9d261d;
}

/* *************************** mediaquery ****************************** */
/* ********************************************************************* */
/* ********************************************************************* */

@media screen
and (orientation : portrait){
    .navButton{
        display: inline-block;
    }
    .logo{
        display: none;
    }
    .navigation{
        display: none;
    }
    .navigation-active{
        display: inline-block;
        width: 25%;
    }
    .content{
        width: 100%;
    }
    .content-active{
        width: 75%
    }

}

/* ****************************** print ******************************** */
/* ********************************************************************* */
/* ********************************************************************* */


.paperA4{
    position: relative;
    /*width: 297mm;
    height: 210mm;*/
    width: 1051px;
    height: 741px;
    margin: 0;
    padding: 0;
    background-color: white;

    margin-bottom: 5px;
}

.page{
    margin: 0;
    padding: 5mm;

}
.pageheader{
    width: 100%;
    float: left;
    margin-bottom: 10px;
}
.pageheader h2 {
    margin: 0;

}


.page h1,
.page h2
{
    color:#b23171;
}

.page h3{
    color:#000000;
    line-height: 30px;
}
.page .table{
    width: 100%;
}

.bericht{
    overflow-x: auto;
}
.bericht-control-group-vertical > label{
    width: 100%;
    float: left;
    margin: 0;
}
.bericht-control-group-vertical > div > label{
    width: 100%;
    float: left;
    padding: 5px;
    background-color: #e5e5e5;
    min-height: 19px;
}

.bericht-control-group-horizontal > label{
    width: 50%;
    float: left;
    padding: 5px;
    font-weight:600 ;
}
.bericht-control-group-horizontal > div > label{
    width: 40%;
    float: left;
    padding: 5px;
    background-color: #e5e5e5;
    min-height: 19px;
}

.deckblatt > label{
    color: #b23171;
    font-size: 31.5px;
    line-height: 40px;
    font-weight: bold;
    text-rendering: optimizelegibility;
}
.deckblatt-body .bericht-control-group-vertical > div > label{
    background-color: #e5e5e5;
}
.fotolabel{
    font-weight:600 ;
}
.schritte h2 {
    font-size: 25px;
    line-height: 30px;
    margin: 5px 0;
}
.schritte h3 {
    font-size: 20px;
    margin: 5px 0;
}

.berichtfoto{
    max-height: 280px;
}

.footer {

}
.footer > .energieplaner{
    position: absolute;
    bottom: 0;
    left: 5mm;
}

.footer > .pagecount {
    position: absolute;
    bottom: 0;
    right: 5mm;
}

/* ****************************** demo ******************************** */
/* ********************************************************************* */
/* ********************************************************************* */

#demotoolbar{
    position: fixed;
    bottom: 0;
    background-color: #000000;
    width: 100%;
}