body{
  font: 200 0.85em/1.3 helvetica neue,helvetica light,helvetica,arial,verdana,sans-serif;
  margin:0px;
  background-image: linear-gradient(#f7f7f7, #d7d7d7);
  background-attachment: fixed; 
  background-repeat: no-repeat; 
  background-position: left top; 
}

.header{
  /* Original Config Image from let to right
  top:0px;
  left: 0px;
  width: 100%;
  height: 200px;
  background-image: url("../images/background.jpg");
  background-position: center 600px;
  background-size: 100% auto;
*/

    /*background-image: url("../images/background-small.jpg");*/
    background-image: url("../images/bg13-small.jpg");
    background-size: 1500px auto;
    height: 200px;
    left: 0;
    margin: auto;
    max-width: 1500px;
    top: 0;
}
.applicationlogo{
  color: white;
  font-size: 60px;
  font-weight: 100;
  padding-left: 50px;
  padding-top: 50px;
  text-shadow: 1px 1px 10px black;

}

.modern{
  /*color:rgba(39, 41, 92, 0.49)!important;*/
  /*color:rgba(36, 89, 141, 1.49)!important;*/
  text-shadow: unset !important;
}

.applicationslogan{
  color: white;
  font-size: 15px;
  font-weight: 300;
  padding-left: 250px;
  margin-top: -14px;
  text-shadow: 1px 1px 10px black;
}

.headerapplicationlogo{
  color: black;
  font-size: 40px;
  font-weight: 100;
}

.headerapplicationslogan{
  color: black;
  font-size: 10px;
  font-weight: 300;
  padding-left: 130px;
  margin-top: -10px;
}


.iconPrevious{
  position: relative;
  top: 4px;
  padding-left:7px;
}

.iconNext{
  position: relative;
  top: 4px;
  padding-left:9px;
}

.contentANDnav{
  margin-left: auto;
  margin-right: auto;
  width: 1140;
}

.footer{
  margin-left: auto;
  margin-right: auto;
  width: 1140;
  margin-top: 15px;
  /*background: #24598d;
  border-top: 4px solid #24598d;*/
  /*margin-bottom: 15px;*/
  color: white;
}

.footerContent{
    /*padding: 10px 20px 10px 20px;
    min-height: 150px;*/
}

.footerContainer{
  float: left;
  width: 100%;
}

.container{
  float: left;
  background-color: #ffffff;
  width:570px;
  /*border-radius: 10px;*/
  padding:15px 20px 20px 20px;
  /*box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);*/
  margin-top: 15px;
}

.containerfullsize{
  float: left;
  background-color: #ffffff;
  width:710px;
  /*border-radius: 10px;*/
  padding:15px 20px 20px 20px;
  /*box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);*/
  margin-top: 15px;
}

.containerForfullsizes{
  float: left;
  width:710px;
  /*border-radius: 10px;*/
  padding:0px;
  /*box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);*/
  margin-top: 0px;
}

.school_containerfullsize{
  float: left;
  background-color: #ffffff;
  width:1100px;
  /*border-radius: 10px;*/
  padding:15px 20px 20px 20px;
  /*box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);*/
  margin-top: 15px;
}

.arbeitszeit.container{
  min-width:1100px !important;
}

.containerBreadcrumb{
  float: left;
  background-color: #ffffff;
  width:100%;
  padding:0px;
  margin-top: -20px; 
}

.breadcrumb{
  text-align: left;
  font-weight: 400;
  color: grey;
  font-size: 13px;
  padding:10px 20px 10px 20px;

}
.breadcrumb a{
   border-radius: 2px;
  color: inherit;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
  text-decoration: none;
  background-color: transparent;

}
.breadcrumb a:hover, .breadcrumb a:active, .breadcrumb a:focus {
/*background: #4c98c2 none repeat scroll 0 0;*/
  background: #24598d none repeat scroll 0 0; 
  color: #fff;
}


.collectionLink{
  margin-right: 2px;
  margin-top: 2px;
  border-radius: 2px;
  color: inherit;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
  text-decoration: none;
  border:1px solid #24598d;
  background-color: transparent; 
}

.collectionLink.thisItem{
  border:1px solid orangered;
}

.collectionLink.thisItem:hover, .collectionLink.thisItem:active, .collectionLink.thisItem:focus{
  border:1px solid transparent;
  background: orangered none repeat scroll 0 0; 

  color: #fff;
}

.collectionLink:hover, .collectionLink:active, .collectionLink:focus {
/*background: #4c98c2 none repeat scroll 0 0;*/
  background: #24598d none repeat scroll 0 0; 
  color: #fff;
}

.fileLink{
  margin-right: 2px;
  margin-top: 2px;
  border-radius: 2px;
  color: inherit;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
  text-decoration: none;
  border:1px solid lightgrey;
  background-color: transparent; 
}

.fileLink:hover, .fileLink:active, .fileLink:focus {
/*background: #4c98c2 none repeat scroll 0 0;*/
  background: lightgrey none repeat scroll 0 0; 
}

.headline{
  font-weight: 400;
  font-size: 30px;
  text-align: left;
  margin-bottom: 10px;
  /*padding-top: 20px;*/
}

.headline > .editable {
  margin-left:  30px;
}

.headline.small{
  font-weight: 300;
  font-size: 20px;
  text-align: left;
  margin-bottom: 10px;
  color: grey;
  border-bottom: 0.5px solid #24598d;
  /*padding-top: 20px;*/

}

.subheadline{
  font-weight: 300;
  font-size: 15px;
  text-align: left;
  margin-bottom: 30px;

}

.entryarea{
  text-align: left;
  /*display: table;*/
  width: 100%;
}

.entryarea.active{
  display: none !important;
}

#inventoryTable.active{
  display: none !important;
}

 .lineTitle{
  font-weight: 400;
  min-width: 130px;
 }

 .zwischenTitle{
  font-weight: 300;
  border-bottom: 1.5px solid #24598d;
  padding-left: 5px;
}


.spaceLine{
  height: 10px;
}

 .lineEntry{
  font-weight: 200;
 }

.image_picker_image{
  max-height: 100px;
}

.collapsible.active .editImage{
  display: none;
}
.collapsible .saveImage{
  display: none;
}
.collapsible.active .saveImage{
  display: block;
}

.back-navigation{
  float: left;
  margin-top: 1px;
  margin-left: -11;
  max-height: 40px;
  margin-right: 5;
}

.entry{
  float: left;
  margin: 5px;
  padding:5px;
  width: 109px;
  border-width:0.5px;
  text-align: center;
  min-height: 55px;
  text-decoration: none;
  color: #000;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
}
.entry:hover, .entry:active, .entry:focus {
   /* background: #bee0ee none repeat scroll 0 0;*/
    background: #74b6ea none repeat scroll 0 0;
}

.entry .logo{
  padding: 10 10 3 10px;
  max-width: 80px;
  max-height: 15px;
} 

.entry .name{
  text-align: center;
  padding: 3 10 3 10px;

}

.function{
  font-weight: 500;
  font-size:130%;
  margin-bottom: 5px; 
}

.previous{
  width: 40px;
  height: 40px;
  border-radius: 50%; 
  background-color: #4c98c2;
  float: left;
  margin-left: -100px;
  margin-top: 50px;
  box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
  cursor: hand;
}

.next{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #4c98c2;
  float: right;
  margin-right: -100px;
  margin-top: 50px;
  box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
  cursor: hand;

}

div.voucherCode{
   /*border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;*/
    padding: 10px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
    font-size: 20;
}
.codecontent{
  margin-top:7px;
}

div.button{
   border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
}
div.button:hover{
   background: #24598d;
   border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: #ffffff;
}

a.button{
    cursor: pointer;
    padding: 5px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
}
a.button:hover{
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: #ffffff;
}

a.button.active{
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: #ffffff;
}

a.button.active:hover{
    border-radius: 3px;
    cursor: pointer;
    padding: 5px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
}
a.historyButton{
   border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
}
a.historyButton:hover{
   background: #24598d;
   border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: #ffffff;
}

a.historyButton.active{
   background: #24598d;
   border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: #ffffff;
}

a.historyButton.active:hover{
   border: 1px solid #24598d;
   background-color: unset;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
}

div.button.critical{
   border: 1px solid red;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: red;
}
div.button.critical:hover{
   background: red;
   border: 1px solid red;
    border-radius: 3px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: #ffffff;
}

div.button.AZButton{
  width: 175px;
  padding-top: 0px;
  padding-bottom: 0px;


}

.button_Container{
    width:148px; 
    float: left; 
    margin-right: 20px;
    margin-bottom: 10px;
}
@media(min-width:767px){
  .button_container.PictureCollection{
        float: right;
        margin-top: -100px;
  }
}
.searchButton{
    background: none;
    border-color: #24598d;
    border-style: solid solid solid none;
    border-width: 1px 1px 1px 0;
    border-radius: 0 3px 3px 0;
    cursor: pointer;
    padding: 3px;
    text-align: center;
    width: 80px;
    height: 25px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
    font-size: 13.6px;

}
@supports (-webkit-touch-callout: none){

  .searchbox {
    padding-bottom: 0px;
    background-clip: padding-box;
  }

}


.searchButton:hover{
  background: #24598d;
  color: #ffffff;
}

.searchbox {
  border-color: #24598d;
  border-radius: 3px 0 0 3px;
  border-style: solid none solid solid;
  border-width: 1px 0 1px 1px;
  font-size: 13.6px;
  font-weight: 500;
  height: 25px;
  text-align: center;
  width: 150px;
  color:#24598d;
  margin-right: -4px;
}
.searchbox.wiki{
    width: 100%;
    height: 21px;
    z-index: 99;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    margin-right: 0px;
}

.searchbox.inventory{
    width: 200px;
    float: right;
    margin-top:30px;
    height: 21px;
    z-index: 99;
    border-style: solid;
    border-width: 1px;
    border-radius: 3px;
    margin-right: 0px;
}
.searchWiki{
  z-index: 2;
  position: relative;
  padding-right: 4px;
}

.searchInventory{
  z-index: 2;
  position: relative;
  padding-right: 4px;
}

.searchResults{
display: none;
position: absolute;
background: white;
margin-top: -35px;
width: 500px;
box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
right: 20px;
padding: 10px;
padding-top: 40px;
margin-right: -15px;
z-index: 100;
max-height: 250px;
overflow: scroll;
}

.searchResultsInventory{
display: none;
position: absolute;
background: white;
margin-top: 20px;
width: 500px;
box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
right: 20px;
padding: 10px;
padding-top: 40px;
margin-right: -15px;
z-index: 100;
max-height: 250px;
overflow: scroll;
}

.searchResultsBlende{
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-backdrop-filter: blur(40px);
  z-index: 100;
}
.searchResultsTopper{
  display: none;
  height: 40px;
  background: white;
  z-index: 101;
  position: absolute;
  width: 520px;
  left: -265px;
  top: 10px;
  box-shadow: 0 6px 8px -5px rgba(10, 10, 22, 0.1);
}

.searchResultsTopperInventory{
  display: none;
  height: 40px;
  background: white;
  z-index: 101;
  position: absolute;
  width: 520px;
  margin-top:20px;
  right: 5px;
  /*top: 10px;*/
  box-shadow: 0 6px 8px -5px rgba(10, 10, 22, 0.1);
}

.searchResultEntry{
  border-bottom: 0.5px solid lightgrey;
  border-radius: 0px!important;
  width: 480px;
  padding: 5px 10px 5px 10px !important;
}

.searchResultEntry:hover, .searchResultEntry:active, .searchResultEntry:focus {
  background-color: #24598d;
  color: white;
}

.searchResultEntryTitle{
  font-weight: 400;
}

.searchResultEntrySubTitle{
  margin-left: 20px;
}



.search_area{
  margin-top: 15px;  
  float: right;
}

.dr_search_area{
  margin-top: -20px;
  margin-bottom: 0px;  
  float: right;
}

.search_area form{
  margin-bottom: 0px;  
}

/* Style the tab */
div.tab {
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
}

/* Style the buttons inside the tab */
div.tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    padding: 14px 16px;
    transition: 0.3s;
    width: 50%;
}

/* Change background color of buttons on hover */
div.tab button:hover {
    background-color: #ddd;
}

/* Create an active/current tablink class */
div.tab button.active {
    background-color: #ccc;
}

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
}
.loginpage {
  background-image: url(../images/bg13.jpg) !important;
  background-size: cover;
  background-position: center;
  background-color: black;
} 
.box {
  /*border: 1px solid #666666;*/
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 5px;
  font-family: helvetica Neue;
  font-size: 15px;
  font-weight: 300;
  height: 25px;
  text-align: center;
  width: 300px;
  background-color: rgba(255,255,255,0);
  color: white;
}

.box::placeholder {
  color: white;
}


.login_screen{
 /*background-color: white;
  border-radius: 3px;
  box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
  padding: 0px 20px 20px;
*/
  background-color: rgba(255,255,255,0);
  -webkit-backdrop-filter: blur(5px);
  border-radius: 10px;
  padding: 0px 60px 30px;
  border: 1px solid rgba(255,255,255, 0.3);
} 

.loginpage .header{
  background-image: none;
}

.on, .ON, .On{
  color:green;
}

.off, .OFF, .Off{
  color: red;
}

.infoArea{
    margin-top:5px;
    float: right;
    position: relative;

}
.infoentry{
   width: 220px;
    margin-top: 10px;
    min-height: 1px;
    padding:0.625rem 1.25rem;
    background:white;
    margin-left: 10px;
    margin-top: 10px;
  }

.infoArea .title {
    color: #333;
    font-weight: bold;
    padding-bottom: 5px;
  }
.startseite_links{
  text-decoration: none;
  color: #959595; 
}

.subPoint{
  margin-left: 20px;
  margin-top: 10px;
  min-height: 50px;
}

.startseite_links .description{
  padding-left: 70px;
  font-size: 90%;
}

.subPoint .description{
    padding-left: 50px;
}

.subPoint .title{
    font-size: 110%!important;
    margin-left: 50px;
}

.startseite_topArea{
  width: 100%;
  float: left;
  min-height: 80px;
}

.startseite_container{ 
  width: 50%;
  float: left;
  min-height: 80px;
  
}

.startseite_container img{ 
  max-height: 60px;
  float: left;
  margin-right: 10px;
  margin-top: 5px;
}

.startseite_container.divided{
  border-top: solid 0.5px lightgrey;
  margin-top: 19px;
  padding-top: 15px;
}

.startseite_links .title {
    color: #333;
    font-weight: 300  ;
    font-size:110%;

  }

.infoArea .content td{
    color: #333;
    font:200 0.85em/1.3 helvetica neue,helvetica light,helvetica,arial,verdana,sans-serif;
    /*border-bottom: 1px solid #eee;*/
  }
.infoArea .content{
  padding-bottom: 5px;
}
.link_im_content{
  font-weight: 500;
  text-decoration: none;  
  color: #333;
}

.link_im_content:hover {
  font-weight: 500;
  text-decoration: none;  
  color: #24598d;
}

tr.linkedRow{
  border-bottom: solid 0.5px lightgrey;
}

.inventory th {
  text-align: left;
  border-bottom: solid 0.5px lightgrey;
  min-width: 100px;
}

tr.linkedRow:hover{
  background-color: rgba(0,0,0,0.05);
  cursor: pointer;
}

tr.linkedRow #img{
  background-color: white !important;
  padding-top: 0px;
  padding-bottom: 0px;
}

table.nogap{
  border-collapse: collapse;
  width: 100%;
 font-size: 90%;
}

tr.linkedDrRow{
  border-bottom: solid 0.5px lightgrey;
}
tr.linkedDrRow:hover{
  background-color: rgba(0,0,0,0.05);
  cursor: pointer;
}

tr.linkedSchoolWorkRow{
  border-bottom: solid 0.5px lightgrey;
}
tr.linkedSchoolWorkRow:hover{
  background-color: rgba(0,0,0,0.05);
}

tr.linkedSchoolWorkRow.thisItem{
  border-bottom: solid 0.5px lightgrey;
  background-color: rgba(255,0,0,0.05);

}
tr.linkedSchoolWorkRow.thisItem:hover{
  background-color: rgba(255,0,0,0.1);
}





/*PRIVATEBASE CONTENT*/
.header-meta{
  padding-top: 5px;
}

.header-logo{float:left}
.header-logo{float:left;text-decoration:none}
.header-logo:visited,.header-logo:hover,.header-logo:active{text-decoration:none}

.color-gray{color:#666}

.header-logo{float:left}
.header-meta{float:right}
.header-meta .welcome{padding:.75rem 0 0 0}
.header-meta .language-switcher{padding:.75rem .3125rem 0 0}
.header-meta .language-switcher .dropdown{top:-1px;padding-right:.3125rem}
.header-meta .language-switcher img{padding:0 .3125rem}
.header-meta .welcome{display:inline-block;white-space:nowrap;text-overflow:ellipsis}
.header-meta .language-switcher,.header-meta .divider,.header-meta .logoff{text-align:right;display:inline-block}


.Headercontainer{margin-left:auto;margin-right:auto;padding-left:.625rem;padding-right:.625rem; height:50px;}
.Headercontainer::after{content:"";display:table;clear:both}

@media(min-width:0px){
  .flip-card{width: 100%;}
  .applicationlogo{padding-left: 10px;}
  .applicationslogan{padding-left: 210px;}
  .Headercontainer{max-width:100%}
  .contentANDnav{max-width:100%;}
  .footer{max-width: 100%;}
  .pb-navigation{display: none !important;}
  .mobile-navigation img{position:absolute; left: 10px; margin-left: -7px;}
  .container{max-width: 100%; width: -webkit-fill-available; overflow-wrap: break-word;}
  .containerfullsize{max-width:100%; width: -webkit-fill-available; padding-left: 15px;}
  .containerForfullsizes{max-width:100%; width: -webkit-fill-available;}
  .school_containerfullsize{max-width:100%; width: -webkit-fill-available; padding-left: 15px;}
  .timeline .timeline-item .timeline-content.right {margin-right: unset!important;}
  .infoentry{width: unset; margin-left: 0;}
  .infoArea{float: left; margin: 0; width: -webkit-fill-available;}
  .DR_progressDisplay{display: none;}
  #tablecolumnSeriennummer{display: none;}
  #tablecolumnHersteller{display: none;}
  #tablecolumnID{display: none; min-width: 20px!important;}
  #tablecolumnMore{display: none;}
  .login_screen{width: unset !important;}
  .flyingButton{z-index: 99;}
  .startseite_container{width: unset;}
  .subPoint.one{margin-top: 25px;}
  .searchResults{left: 0px; width: 100%;}
  .searchResultsInventory{left: 0px; width: 100%;}
  .searchResultEntry{width: 90%;}
  .searchResultsTopper{left:0px; width: 100%;}
  .BLShowprepreMonth{display: none;}
  .BLShowpreMonth{display: none;}
  .BLShownextMonth{display: none;}
  .BLShownextnextMonth{display: none;}
  .BLShowlastMonth{display: none;}
  .VerbrauchsTable{width: 100%;}
  .chartDiv{width: 100% !important;}
  .VerbrauchsTableVergleich{display: none!important;}
  .VerbrauchsTableZahlerstand{display: none!important;}
  .VerbrauchsTableBright{display: none!important;}
  .VerbrauchsTableSmall{display: none!important;}
  .VerbrauchsTableExtraSmall{display: table-cell!important;}
  .spaceColumn{display: none!important;}
  .statusContainer{margin-right: 0px!important; margin-left: 0px!important; width: 100%!important;}
  .statusContainerSpacer{width: 100%}
  .systemstatus{width: 100%; border: none; height: 3050px;}
  .picture360Preview{height: calc((1283/112)*1vw);}
  .GalleryTeaser{width: 100%;}
  .BabyTeaserContainer{margin-bottom:10px; height: 237px;}
  .babyEntryRightPart.below{margin-top: 15px;}
  .babyEntryRightPart.ontop > a{display: none;}
  .babyEntryRightPart.forsmallonly{display: flex;}
  .notForSmall{display: none;}


}
@media(min-width:415px){
    #tablecolumnSeriennummer{display: none;}
  #tablecolumnHersteller{display: none;}
  #tablecolumnID{display: none;}
  #tablecolumnMore{display: none;}
  .mobile-navigation img{position:absolute; left: 10px; margin-left: 0px;}
  .containerfullsize{padding-left: 20px;}
  .subPoint.one{margin-top: 35px;}
  .BLShownextMonth{display: block;}
  .picture360Preview{height: 23px;}


}
@media(min-width:500px){
  .VerbrauchsTableExtraSmall{display: none!important;}
  .VerbrauchsTableSmall{display: table-cell!important;}
  .VerbrauchsTableZahlerstand{display: table-cell!important;}
  .statusContainer{margin-right: 10px!important; margin-left: 10px!important; width: 188px!important;}
  .statusContainerSpacer{width: unset}



}

@media(min-width:767px){
  .flip-card{width: 45%;}
  .applicationlogo{padding-left: 50px;}
  .applicationlogo.modern{padding-left: 10px;}
  .applicationslogan{padding-left: 250px;}
  .applicationslogan.modern{padding-left: 239px;}  
  .Headercontainer{max-width:720px}
  .contentANDnav{max-width:100%;}
  .footer{max-width:100%;}
  .pb-navigation{display: none !important;}
  .container{max-width:480px; min-width: unset; width: 100%;}
  .containerfullsize{max-width:100%;}
  .containerForfullsizes{max-width:100%;}
  .infoentry{width: 220px; max-width: 180px;}
  .infoArea{float: right; margin-top: 5px; width: unset;}
  #tablecolumnSeriennummer{display: table-cell;}
  #tablecolumnHersteller{display: table-cell;}
  #tablecolumnID{display: table-cell;}
  #tablecolumnMore{display: table-cell;}
  .login_screen{width: 400px !important;}
  .DR_progressDisplay{display: unset;}
  .startseite_container{width: 50%;}
  .subPoint.one{margin-top: 10px;}
  .searchResults{left: unset; width: 500px;}
  .searchResultsInventory{left: unset; width: 500px;}
  .searchResultEntry{width: 480px;}
  .searchResultsTopper{left: -305px; width: 520px;}
  .BLShowprepreMonth{display: block;}
  .BLShowpreMonth{display: block;}
  .BLShownextMonth{display: block;}
  .BLShownextnextMonth{display: block;}
  .VerbrauchsTable{width: 19%;}
  .chartDiv{width: 33%!important;}
  .VerbrauchsTableVergleich{display: table-cell!important;}
  .VerbrauchsTableSmall{display: none!important;}
  .VerbrauchsTableBright{display: table-cell!important;}
  .systemstatus{width: 100%; border: none; height: 1250px;}
  .BabyTeaserContainer{margin-bottom:60px; height: 151px;}
  .babyEntryRightPart.below{margin-top: unset;}
  .babyEntryRightPart.ontop > a {display: block;}
  .babyEntryRightPart.forsmallonly{display: none;}
  .babyEntry.WithImage.showBigger{display: grid;}
  .showBigger > .babyEntryRightPart, .showBigger > .babyEntryLeftPart{width: 100% !important;}
  .showBigger > .babyEntryRightPart > a > img {max-height: 600px !important; margin-top: 15px;}
  .showBigger > .babyEntryRightPart.ontop > a {display: none;}
  .showBigger > .babyEntryRightPart.forsmallonly{display: flex;}
  .notForSmall{display: table-cell;}


  }

@media(min-width:992px){
  .Headercontainer{max-width:940px}
  .contentANDnav{max-width:940px;}
  .footer{max-width:940px;}
  .pb-navigation,.pb-aside{max-width:180px;}
  .pb-navigation{display: block !important;}
  .mobile-navigation{display: none !important;}
  .container{max-width:480px;}
  .containerfullsize{max-width:710px; min-width:unset;}
  .containerForfullsizes{max-width:710px; min-width:unset;}
  .containerfullsize.babyPage{max-width:750px; min-width:unset;}
  .GalleryTeaser{width:750px;}
  .infoentry{max-width: 180px;}
  .infoArea{float: right; margin-top: 5px;}
  .searchResultsTopper{left: -305px; width: 520px;}




}
@media(min-width:1200px){
  .Headercontainer{max-width:1140px}
  .contentANDnav{max-width:1140px;}
  .footer{max-width:1140px;}
  .pb-navigation,.pb-aside{max-width:250px;}
  .pb-navigation{display: block !important;}
  .mobile-navigation{display: none !important;}
  .container{max-width:570px;}
  .containerfullsize{min-width:840px;}
  .containerForfullsizes{min-width:840px;}
  .containerfullsize.babyPage{min-width:880px;}
  .GalleryTeaser{width:880px;}
  .infoentry{max-width: 220px;}
  .infoArea{float: right; margin-top: 5px;}
  .searchResultsTopper{left: -265px; width: 520px;}
    .BLShowlastMonth{display: block;}
      .spaceColumn{display: block!important;}
  .systemstatus{width: 100%; border: none; height: 900px;}
  .picture360Preview{height: 28px;}


}


#pb-subnavigation .nav .nav .pb-nav-link{font-weight:normal;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.pb-nav-link{color:#333;width:100%;font-weight:bold;text-decoration:none}
.pb-nav-link:visited{color:#333}
.pb-nav-link:hover,.pb-nav-link:active{color:#24598d;text-decoration:none}
.pb-nav-link.active{color:#24598d;font-weight:bold}
.language-switcher .pb-nav-link{font-weight:bold}

.profile-link{color:#333;width:100%;text-decoration:none}
.profile-link:hover,.profile-link:active{color:#24598d;text-decoration:none}
.profile-picture{margin-top: 10px; margin-bottom: 5px; width: 75px; height: 75px; border-radius: 50%; text-align: center;}
.profile-picture.big{margin-top: 10px; margin-bottom: 5px; width: 175px; height: 175px; border-radius: 50%; text-align: center;}


/*NAVIGATIOn*/
.pb-navigation{
  margin-top: 15px;
  margin-left: auto;
  margin-right: auto;
}
.pb-navigation,.pb-banner{display:block}
.pb-navigation,.pb-aside{position:relative;float:left;min-height:1px;padding-left:0;padding-right:.625rem;width:250px}
.nav {
    list-style: outside none none;
    margin-bottom: 0;
    padding-left: 0;
    margin-top: 0;
}
.pb-subnavigation{border-top:4px solid #24598d;width:100%}
.pb-subnavigation #pb-subnavigation>.nav{background:white}
.pb-subnavigation .nav .nav-item{padding:.625rem 1.25rem .625rem;}
.pb-subnavigation .nav>.nav .nav{padding-left:1rem}
.pb-subnavigation .nav>.nav .nav .nav-item{padding-top:.3125rem;padding-bottom:.3125rem}
.pb-subnavigation .navbar-toggler{float:right;color:#24598d}
.pb-subnavigation hr{margin:0}
#pb-subnavigation .nav .nav .pb-nav-link{font-weight:normal;text-overflow:ellipsis;overflow:hidden;white-space:nowrap}
.pb-nav-link{color:#333;width:100%;font-weight:bold;}
.pb-nav-link:visited{color:#333}
.pb-nav-link:hover,.pb-nav-link:active{color:#24598d;text-decoration:none}
.pb-nav-link.active{color:#24598d;font-weight:bold}
#pb-subnavigation>.nav>.nav-item{border-bottom:1px #eee solid}
#pb-subnavigation>.nav>.nav-item>a>i{display:none}

.nav-item > a {/*Added by Steve*/ 
  margin: 0px; 
  display: block; 
  width: -webkit-fill-available;
  padding:.625rem 1.25rem .625rem;
}

li.nav-item{/*Added by Steve*/ 
  padding:0px !important;
}

.nav-item.active {
background-color: rgba(36,89,141,0.2);
}

.mobile-navigation img{
  max-height: 30px;
  float: left;
  margin-top: 10px;
}

.mobile-navigation-links {
  min-width: 100%;
  position: absolute;
  top: 35px;
  display: none;
  height: 100%;
  z-index: 109;
}
.mobile-navigation-links .pb-navigation{
  min-width: 100%;
  padding-left: 0px;
  padding-right: 0px;
  display: block !important;
  height: 100%;
}

#mobile-navigation-links > div > div{
  height: 100%;
  -webkit-backdrop-filter: blur(10px);
}




.timeline .timeline-item::after, .timeline .timeline-item::before {
  clear: both;
  content: '';
  display: block;
  width: 100%;
}
.timeline-item .alert {
  background:red;
}

.timeline-item .error {
  background:red;
}

.timeline-item .info, .timeline-item .sunprotection, .timeline-item .day, .timeline-item .night, .timeline-item .motion, .timeline-item .light, .timeline-item .water, .timeline-item .face, .timeline-item .doorbell{
  background:white;
}

.timeline-item .system {
  background:orange;
}

.timeline {
  margin: 30px auto;
  padding: 0 10px;
  position: relative;
  transition: all 0.25s ease-in;
  background: white;
  max-width: 710px;
}

.timeline::before {
  background: lightgrey;
  content: '';
  left: 50%;
  position: absolute;
  top: 13px;
  width: 1px;
  bottom: 15px;
}

.timeline::after {
  clear: both;
  content: '';
  display: table;
  width: 100%;
}

.timeline a {
  color: grey;
  font-weight: bold;
  transition: all 0.25s ease-in;
}

/*.timeline a:hover {
  box-shadow: 0 1px 0px 0px grey;
  transition: all 0.25s ease-in;
}*/

.imageScroller{
  max-height: 70px;
  overflow: auto;
  overflow-y: hidden;
  max-width: 100%;
}
@media screen and (min-width: 39.9375em){
  .timeline-content > a > .imageScroller{
    float: right;
  }

  .timeline-content.right > a > .imageScroller{
    float: left;
  }
}
.imageScrollerContent{
  width: max-content;
}

.timeline .timeline-item {
  margin-bottom: 10px;
  position: relative;
}

/*.timeline .timeline-item .timeline-icon {
  border-radius: 50%;
  height: 10px;
  left: 50%;
  margin-left: -4px;
  overflow: hidden;
  position: absolute;
  top: 13px;
  width: 10px;
}*/
.filter{
  height: 40px;
  width: -webkit-fit-content;
  border: 0.5px solid grey;
  border-radius: 30px;
  padding: 10 15 10 15px;
  color: grey;
}

.filterLabel{
  float: left;
  margin-top: 10px;
  font-size: 15px;
  margin-right: 10px;
}

.filterName{
  text-transform: capitalize;
  overflow: scroll;
}

.filter .filterContainer{
    float: left;
    width: 40px;
    font-size: 30%;
    text-align: center;
}

.filter .timeline-icon{
  border-radius: 50%;
  height: 30px;
 /* margin-left: -15px;*/
  overflow: hidden;
  position: relative;
  /*top: 12px;*/
  width: 30px;
  box-shadow: 0px 0px 19px lightgrey;
  margin-left: 5px;
  cursor: pointer;
}

.timeline .timeline-item .timeline-icon{
  border-radius: 50%;
  height: 30px;
  left: 50%;
  margin-left: -15px;
  overflow: hidden;
  position: absolute;
  top: 12px;
  width: 30px;
  box-shadow: 0px 0px 19px lightgrey;
}

.timeline-icon.selected{
  background-color: #24598d;
}

.timeline-icon.info{
  background-image: url(/images/info.png);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position-x: 2.5px;
  background-position-y: 2.5px;
}

.timeline-icon.day{
  background-image: url(/images/day.png);
  background-size: 30px;
  background-repeat: no-repeat;
}

.timeline-icon.night{
  background-image: url(/images/night.png);
  background-size: 30px;
  background-repeat: no-repeat;
}

.timeline-icon.light{
  background-image: url(/images/light.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position-x: 5px;
  background-position-y: 5px;
}

.timeline-icon.motion{
  background-image: url(/images/motion.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position-x: 5px;
  background-position-y: 5px;
}

.timeline-icon.face{
  background-image: url(/images/face-recognition-dark.png);
  background-size: 24px;
  background-repeat: no-repeat;
  background-position-x: 3px;
  background-position-y: 2px;
}

.timeline-icon.face.selected{
  background-image: url(/images/face-recognition.png);
}

.timeline-icon.sunprotection{
  background-image: url(/images/sunprotection.png);
  background-size: 20px;
  background-repeat: no-repeat;
  background-position-x: 5px;
  background-position-y: 5px;
}

.timeline-icon.water{
  background-image: url(/images/water.png);
  background-size: 25px;
  background-repeat: no-repeat;
  background-position-x: 2.5px;
  background-position-y: 2.5px;
}

.timeline-icon.doorbell{
  background-image: url(/images/bell.png);
  background-size: 30px;
  background-repeat: no-repeat;
  background-position-x: 0px;
  background-position-y: 0px;
}

.timeline .timeline-item .timeline-icon img,
.timeline .timeline-item .timeline-icon svg {
  left: 14px;
  position: relative;
  top: 11px;
}

.timeline .timeline-item .timeline-icon svg {
  top: 14px;
}

.timeline .timeline-item .timeline-content {
  text-align: right;
  transition: all 0.25s ease-in;
  width: 48%;

  font-size: 13px;
  margin-bottom: 0;
  margin-top: 0px;
  /*background: whitesmoke;
  border-radius: 7px;*/
  padding: 8px 15px;
  box-sizing: border-box;
}

.timeline .timeline-item .timeline-content p {
  font-size: 13px;
  line-height: 1.4;
  margin-bottom: 0;
  margin-top: 0px;
  font-weight: 300;
  color: grey;

}
.timeline .timeline-item .timeline-content span {
  color: grey;

}
.timeline > .timeline-item > .timeline-content > a > .imageScroller > .imageScrollerContent > img {
  margin-top:7px;
  /*max-width: 32%;*/
  max-height: 56px;
}

.timeline .timeline-item .timeline-content .timeline-content-date {
  font-size: 10px;
  font-weight: 300;
  margin-bottom: 0;
}

.timeline .timeline-item .timeline-content .timeline-content-title {
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 0;
}

.timeline .timeline-item .timeline-content .timeline-content-month {
  font-size: 0.875rem;
  text-transform: uppercase;
  font-weight: 400;
}

.timeline .timeline-item .timeline-content.right {
  /*float: right;*/
  margin-left: 52%;
  text-align: left;
  margin-right: 10px;
}

@media screen and (max-width: 39.9375em) {
  .timeline {
    margin: 30px;
    padding: 0;
    width: 90%;
  }
  .timeline::before {
    left: 10px;
  }
  .timeline .timeline-item .timeline-content {
    float: right;
    text-align: left;
    width: 90%;
  }
  .timeline .timeline-item .timeline-content::before, .timeline .timeline-item .timeline-content.right::before {
    border-left: 0;
    border-right: 7px solid grey;
    left: 10%;
    margin-left: -6px;
  }
  .timeline .timeline-item .timeline-icon {
    left: 10px;
  }
}

/** LIGHTBOX MARKUP **/

.lightbox {
  /** Default lightbox to hidden */
  display: none;

  /** Position and style */
  position: fixed;
  z-index: 999;
  width: 100%;
  height: 100%;
  text-align: center;
  top: 0;
  left: 0;
  background: rgba(0,0,0,0.6);
  -webkit-backdrop-filter: blur(3px);
}

.lightbox img, .lightbox video{
  /** Pad the lightbox image */
  max-width: 80vw !important;
  max-height: 80vh !important;
  margin-top: 5% !important;
}

.videoClose{
  /*height: 100%;
  position: absolute;
  width: 100%;
  z-index: -1;*/

  position: absolute;
  right: 32px;
  top: 32px;
  width: 32px;
  height: 32px;
  opacity: 0.7;
  z-index: 99;
}

.videoClose:hover {
  opacity: 1;
}
.videoClose:before, .videoClose:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #fff;
}
.videoClose:before {
  transform: rotate(45deg);
}
.videoClose:after {
  transform: rotate(-45deg);
}

.slideshow-container a.slideNavigationNext, .slideshow-container a.slideNavigationPrev{
  color: rgba(0,0,0,0) !important;
}

.slideNavigationNext:before, .slideNavigationNext:after, .slideNavigationPrev:before, .slideNavigationPrev:after {
  position: absolute;
  left: 15px;
  content: ' ';
  height: 33px;
  width: 2px;
  background-color: #fff;

}

.slideNavigationNext, .slideNavigationPrev {
  top: 0px;
  position: absolute;
  width: 200px;
  height: 100%;
  padding-top: 42vh;
}

.slideNavigationNext{
  right: 15px;
}

.slideNavigationPrev{
  left: 15px;
}


.slideNavigationNext:before {
  transform: rotate(45deg);
  margin-top: 22px;
  margin-left: 170px;
}
.slideNavigationNext:after {
  transform: rotate(-45deg);
  margin-left: 170px;

}

.slideNavigationPrev:before {
  transform: rotate(45deg);
}
.slideNavigationPrev:after {
  transform: rotate(-45deg);
  margin-top: 22px;
}

.lightbox:target {
  /** Remove default browser outline */
  outline: none;

  /** Unhide lightbox **/
  display: block;
}



/**  ARBEITSZEIT CSS  **/

.arbeitszeitArea th{
  font-weight: 400;
  font-size:90%;
}

.arbeitszeitArea td, .arbeitszeitArea tr{
  font-weight: 200;
  font-size:90%;
}

.arbeitszeitArea h2{
  font-size:150%;
  font-weight: 200;
  text-transform: none;
}

.arbeitszeitArea table{
  border-collapse: collapse;
  margin: 0 auto;
}

.arbeitszeitArea td, .arbeitszeitArea th{
  border:1px solid grey;
}

.arbeitszeitArea td{
  min-width:19px;
  min-height:19px;
  text-align:center;
}

.arbeitszeitArea #page_title{
  margin:0px;
  margin-left:0px;
  padding-top:9px;
  float:left;
  -webkit-transform: translate3d(0, 0, 0);
}

.arbeitszeitArea #back_icon{
  height:30px;
  margin-top: 10px;
  margin-left: 10px;
  margin-right: 10px;
  float:left;
}

.arbeitszeitArea #header{
    background: rgba(0, 0, 0, 0.6) none repeat scroll 0 0;
    color: #fff;
    height: 50px;
    line-height: 32px;
    position: relative;
    z-index: 500;
    margin: -20 -20 0 -20;
}

.arbeitszeitArea #header_text{
    float: left;
    font-weight: 110;
    margin-left: 10px;
    margin-top: 12px;
    -webkit-transform: translate3d(0, 0, 0);

}

.arbeitszeitArea .auswertung.links{
  text-align:left;
}

.arbeitszeitArea .auswertung h3{
  text-align:center;
  margin-top:0px;
}


.arbeitszeitArea #auswertung_container tbody tr td{
  border-width: 0px; 
  width: 372px;
  vertical-align: top;
}

.arbeitszeitArea .linkes_td{
  border-right-width: 1px !important;
}

.arbeitszeitArea #auswertung_container{
  margin-top:20px;
}

.arbeitszeitArea .darkenBackground {
background-color: rgb(0, 0, 0);
opacity: 0.7; /* Safari, Opera */
-moz-opacity:0.70; /* FireFox */
filter: alpha(opacity=70); /* IE */
z-index: 501;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
}
 
.arbeitszeitArea .loginboxhover{
    z-index: 502;
    position:fixed;
}

.arbeitszeitArea #uploadconfirmleave{
    background-color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
    box-sizing: border-box;
    color: #72727d;
    display: inline-block;
    max-width: 800px;
    min-width: 600px;
    position: relative;
    padding-bottom: 21px;
    padding-top: 1px;
}

.arbeitszeitArea .modal-header {
    border-bottom: 1px solid #efeff2;
    box-sizing: border-box;
    color: #23232d;
    margin: 0 20px;
    text-align: center;
}

.arbeitszeitArea .defaultContainerInner{
  margin: 13px;
}

.arbeitszeitArea #modal-close-img{
  height:15px;
  position: absolute;
  top:22px;
  right:22px;
}

.arbeitszeitArea #errorHandler{
   border-width: 0;
    height: 140px;
    width: 100%;
}

.arbeitszeitArea #newEntryHandler{
   border-width: 0;
    height: 155px;
    width: 100%;
}

.arbeitszeitArea #yearselector{
  height: 10px;
}

.arbeitszeitArea #yearselector_link{
   text-decoration: none;
}

.arbeitszeitArea .buttons{

  position: relative;
  margin:0 auto;
  width:55px;
  height:55px;
}

.arbeitszeitArea .view {
  
    cursor: pointer;
    float: left;
    height: 50px;
    margin: 10px;
    margin-left: 0px;
    overflow: hidden;
    position: relative;
    text-align: center;
    width: 50px;
}
.arbeitszeitArea .view .mask, .arbeitszeitArea .view .content {
    height: 50px;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 50px;
}
.arbeitszeitArea .view img {
    display: block;
    position: relative;
    width:50px;
    opacity: 0.5;
}
.arbeitszeitArea .view p {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    color: #fff;
    height: 100px;
    margin: 0;
    padding: 1px;
    position: relative;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
}

.arbeitszeitArea .view-first img {
    transition: all 0.2s linear 0s;
}

.arbeitszeitArea .view-first p {
  -webkit-transform: translateY(110px);
   -moz-transform: translateY(110px);
   -o-transform: translateY(110px);
   -ms-transform: translateY(110px);
   transform: translateY(110px);
   -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
   filter: alpha(opacity=0);
   opacity: 0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   -ms-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}

.arbeitszeitArea .view-first:hover img {
    -webkit-transform: scale(1.1,1.1);
   -moz-transform: scale(1.1,1.1);
   -o-transform: scale(1.1,1.1);
   -ms-transform: scale(1.1,1.1);
   transform: scale(1.1,1.1);
}
.arbeitszeitArea .view-first a.info {
    opacity: 0;
    transition: all 0.2s ease-in-out 0s;
}
.arbeitszeitArea .view-first:hover .mask {
    opacity: 1;
}
.arbeitszeitArea .view-first:hover p, .arbeitszeitArea .view-first:hover a.info {
    -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
   filter: alpha(opacity=100);
   opacity: 1;
   -webkit-transform: translateY(0px);
   -moz-transform: translateY(0px);
   -o-transform: translateY(0px);
   -ms-transform: translateY(0px);
   transform: translateY(0px);
}
.arbeitszeitArea .view-first:hover p {
    transition-delay: 0.1s;
}
.arbeitszeitArea .view-first:hover a.info {
    transition-delay: 0.2s;
}



@media (min-width:1040px) {

  .arbeitszeitArea .buttons { 
    /*position: absolute;
    height:80px;
    width:80px;
    margin-top:7px;*/
  }
 
 .arbeitszeitArea .view {
    height: 75px;
    width: 75px;
}

.arbeitszeitArea .view p {
    padding: 10px 5px 5px;
    font-size: 13.6px;
}
.arbeitszeitArea .view .mask, .arbeitszeitArea .view .content {
    height: 75px;
    width: 75px;
}
  
  .arbeitszeitArea .view img {
    width:75px;
}

}

.arbeitszeitArea .workhours{
  color: black;
    text-decoration: none;
    cursor:default;
}

.arbeitszeitArea .content{
  cursor:default;
}

.arbeitszeitArea .content .more {
  display:none;
  
    }
    
.arbeitszeitArea .content:hover .more, .arbeitszeitArea .content:focus .more, .arbeitszeitArea .content:active .more {
  background-color: white;
  width: 235px;
  /*margin: 10px;
  margin-left:10px;*/
  padding: 20px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius: 5px;
  font-size: 14px;
  box-shadow: 1px 1px 8px #B4B4B4;
  cursor:default;
  display:block;
    position:absolute;
    z-index:1;
    margin-left: -108px;
    margin-top:6px;
    /*left:-40px;*/
    /*top:40px;*/
    /*width:140px;*/
    /*padding:78px 5px 5px;*/
   /* border:1px solid #900;*/
    /*background-color:#FFEFEF;*/
    }
    
@-moz-document url-prefix() {
  .arbeitszeitArea .content:hover .more {
    /*width: 240px;*/
    /*padding-top:4px;*/
  }
}

.arbeitszeitArea .content:hover .more td{
  /*width:100% !important;*/
  }
  
.arbeitszeitArea #delete_img{
  height: 8px;
    padding-left: 2px;
}

.arbeitszeitArea #u-start {
    float: left;
    height: 16px;
    padding-top: 10px;
}

.arbeitszeitArea #u-ende {
    float: right;
    height: 16px;
    padding-top: 10px;
}

.arbeitszeitArea #u-remove {
    height: 16px;
    padding-top: 10px;
}
.arbeitszeitArea #harmonize_day {
    height: 16px;
    padding-top: 10px;
}

.arbeitszeitArea #addTime {
    height: 16px;
    padding-top: 10px;
}

.arbeitszeitArea #addTimeInTable {
    height: 16px;
    padding-left: 20px;
    padding-right: 20px;
}


.arbeitszeitArea #feiertag{
  background-color: orange;
  color: grey;
}
/*
#feiertag .more {
  background-color: orange;
}
*/


/* WIKI*/

p {
  margin-block-end: 0;
  margin-block-start: 0;
}

.edit-save{
  cursor: pointer;
  border-radius: 50%;
  background: #24598d;
  padding: 14px;
  box-shadow: 0px 0px 19px 8px rgba(255,255,255,1);
  float: right;
}

.addPage{
  cursor: pointer;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #24598d;
  margin-left: 60px;
  margin-bottom: 15px;
  box-shadow: 0px 0px 19px 8px rgba(255,255,255,1);
}

.addSubPage{
  cursor: pointer;
  width: 37px;
  height: 37px;
  border-radius: 50%;
  background: #24598d;
  box-shadow: 0px 0px 19px 8px rgba(255,255,255,1);
  float: left;
  margin-right: 15px;
}

.flyingButton{
  position: fixed;
  right: 30px;
  bottom: 30px;
}

.wikiLinks a{
  border-radius: 2px;
  color: inherit;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
  text-decoration: none;
  background-color: transparent;
}

.searchResultLinks a{
  border-radius: 2px;
  color: inherit;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
  text-decoration: none;
  background-color: transparent;
}

.subPageLink{
  background-image: url("../images/subPage.png");
  margin-left: 20px;
  padding-left: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;
}

.subPageLink.child{
  margin-left: 40px;  
}

.subPageLink:hover, .subPageLink:active, .subPageLink:focus {
  background: #24598d url("../images/subPageHover.png") no-repeat scroll 0 0;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;
  color: #fff;
  background-position-x: 4px;
  padding-left: 8px;
}

.subPageLink p{
  margin-left: 20px;
}

.motherLink{
  background-image: url("../images/motherPage.png");
  padding-left: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;

}

.motherLink:hover, .motherLink:active, .motherLink:focus {
  background: #24598d url("../images/motherPageHover.png") no-repeat scroll 0 0;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;
  color: #fff;
  background-position-x: 4px;
  padding-left: 8px;
}

.motherLink p{
  margin-left: 20px;
}

.currentLink{
  background-image: url("../images/currentPage.png");
  margin-left: 10px;
  padding-left: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;

}

.currentLink:hover, .currentLink:active, .currentLink:focus {
  background: #24598d url("../images/currentPageHover.png") no-repeat scroll 0 0;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;
  color: #fff;
  background-position-x: 4px;
  padding-left: 8px;
}

.currentLink.active{
  background: #24598d url("../images/currentPageHover.png") no-repeat scroll 0 0;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: left;
  color: #fff;  
}

.currentLink.active:hover, .currentLink.active:active, .currentLink.active:focus{
  background-position-x: 4px;
  padding-left: 8px; 
}

.currentLink p{
  margin-left: 20px;
}

#Wiki a {
  text-decoration: none;
  color: #24598d;
  font-weight: 500;
}
/*#Wiki a:hover, #Wiki a:active, #Wiki a:focus{
  font-weight: 500;
}*/

#Wiki img{
  max-width: 100%;
  height: unset;
}

hr{
  border-top: 0.5px solid lightgrey;
  border-bottom: 0px;
  border-left: 0px;
  border-right: 0px;
  margin-left: 30px;
  margin-right: 30px;
}

:not(pre)>code[class*=language-], pre[class*=language-] {
background: whitesmoke;
}

blockquote{
  background-color: whitesmoke;
  border-left: 3px solid #24598d;
  border-radius: 2px;
  padding: 20px;
  margin-left: 20px;
  margin-right: 20px;
  background-image: url("https://osx-server.home/images/info-blue-round.png");
  background-position-x: 8px;
  background-position-y: 14px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  padding-left: 50px;
}

pre{
  background-color: whitesmoke;
  /*border-left: 3px solid #24598d;*/
  border-radius: 2px;
  padding: 20px;
  margin-left: 20px;
  margin-right: 20px;
  background-image: url("https://osx-server.home/images/code-round.png");
  background-position-x: 8px;
  background-position-y: 14px;
  background-repeat: no-repeat;
  background-size: 30px 30px;
  padding-left: 50px;
  overflow: scroll;
}

blockquote pre {
  background-color: unset;
  border-radius: unset;
  padding: unset;
  margin-left: unset;
  margin-right: unset;
  background-image: unset;
  background-position-x: unset;
  background-position-y: unset;
  background-repeat: unset;
  background-size: unset;
  padding-left: unset;
  overflow: unset;
}

.dropzone {
  min-height: 50px;
  border: 2px dashed #24598d;
  padding: 20px 20px;
  font-weight: 400;
  font-size: 125%;
  color: #24598d;
}

.dropzone .dz-message {
    text-align: center;
    margin: 0; 
}

.UploadBabyImage .dropzone {
  border-radius: 50%;
  width: 185px;
  height: 185px;
  margin-top: -187px;
  margin-left: 15px;
}

.UploadBabyImage .dropzone .dz-message {
    text-align: center;
    margin: 0;
    margin-top: 34px; 
}



.schoolwork_dropzone{
  min-height: 0px;
  border: 2px dashed #24598d;
  padding: 0px 0px;
  font-weight: 400;
  font-size: 100%;
  color: #24598d;
}

#myFullAreaDropzone {
  min-height: unset;
  border: 2px solid rgba(0,0,0,0);
  padding: 0px;
  font-weight: unset;
  font-size: unset;
  color: unset;
  margin:-2px;
}

#myFullAreaDropzone.dz-drag-hover{
  border: 2px dashed #24598d !important;
}

#myFullAreaDropzone .dz-message {
    display: none; 
}

/* Slideshow container */
.slideshow-container {
  max-width: 1000px;
  position: relative;
  margin: auto;
}

.slideshow-container a {
  color: #fff !important;
}

/* Hide the images by default */
.mySlides {
  display: none;
}

/* Next & previous buttons */
.prevSlide, .nextSlide {
  cursor: pointer;
  /*position: absolute;*/
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 3px 15px 3px 15px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

.prevSlide.timelapse, .nextSlide.timelapse{
  position: absolute;
}

/* Position the "next button" to the right */
.nextSlide {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prevSlide:hover, .nextSlide:hover {
  background-color: rgba(0,0,0,0.8);
}

/* Caption text */
.text {
  color: #f2f2f2;
  font-size: 15px;
  padding: 8px 12px;
  position: absolute;
  bottom: 8px;
  width: 100%;
  text-align: center;
}

/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}

/* The dots/bullets/indicators */
.dot {
  cursor: pointer;
  height: 5px;
  width: 5px;
  margin: 0 2px;
  background-color: #bbb;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
}

.dot.active, .dot:hover {
  background-color: #717171;
}

.imageIndex{
  display: none;
}

.imageIndex.active {
  display: block;
}


/* Fading animation */
.fade {
 /* -webkit-animation-name: fade;
  -webkit-animation-duration: 0.5s;
  animation-name: fade;
  animation-duration: 0.5s;*/
}

@-webkit-keyframes fade {
  from {opacity: 1} 
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: 1} 
  to {opacity: 1}
}

.inputText:focus {
  outline:none;
  border: 0.5px solid #24598d; 
  border-right: 0px;
  border-top: 0px;
}

.inputText:focus ~ .floating-label,
.inputText:not(:focus):valid ~ .floating-label,
.inputText:not(:focus):disabled ~ .floating-label {
  top: -37px;
  bottom: 10px;
  /*left: -200px;*/
  font-size: 11px;
  opacity: 0.5;
  margin-right: 20px;
  height: 14px!important;

}
.inputText:disabled {
  background-color: white;
}

#attachmentTable{
  width: 100%;
}

.inputText {
  width: 100%;
  height: 35px !important;
  padding-top: 10px;
  padding-left: 5px;
  font: 200 0.85em/1.3 helvetica neue,helvetica light,helvetica,arial,verdana,sans-serif;
  border: 0.5px solid lightgrey;
  border-right: 0px;
  border-top: 0px;
  border-radius: 0px;
}

.floating-label {
 /* position: absolute;
  pointer-events: none;
  left: 0px;
  top: 18px;
  transition: 0.2s ease all;*/
 /* position: relative;
  pointer-events: none;
  left: -195px;
*/  /* top: 18px; */
/*  transition: 0.2s ease all;
  top: -5px;
  opacity: 0.5
*/
  position: relative;
  pointer-events: none;
  left: 5px;
  transition: 0.2s ease all;
  top: -27px;
  opacity: 0.5;
}

.modernDREntry{
  height: 55px;
  vertical-align: top;
}
.modernInputEntry{
  height: 55px;
  vertical-align: top;
}

.inputDivDr{
  margin-right: 10px;
}

.inputDivDr.right{
  margin-right: 10px;
  margin-left: 10px;
}

.DRdarkenBackground {
background-color: rgba(0, 0, 0, 0.7);
filter: alpha(opacity=70); /* IE */
z-index: 501;
height: 100%;
width: 100%;
background-repeat:repeat;
position:fixed;
top: 0px;
left: 0px;
-webkit-backdrop-filter: blur(6px);
}

.DR_progressDisplay{
  margin-bottom: 15px;
  font-size: 80%;
  margin: 0 auto;

} 

.DR_passivStatus{
  opacity: 0.2;
  margin-left: 5px;
  margin-right: 5px;
  /*float: left;*/
}

.DR_activeStatus{
  opacity: 1;
  margin-left: 5px;
  margin-right: 5px;
 /* float: left;*/  
}

.DR_progressStatus_active{
  background: #24598d;
}
.DR_progressStatus_passive{
  background: unset;
}
.DR_dropzone{
  margin-bottom: 5px;
}
.pictureOverviewContainerwithLabel{
  width: 100%;
}

.pictureOverviewContainer{
  box-shadow: 1px 1px 8px #B4B4B4;
  float: left;
  border-radius: 5px;
  margin-right: 7.5px;
  margin-bottom: 7.5px;
  margin-top: 7.5px;
  margin-left: 7.5px;
  width: -webkit-fit-content;
  height: -webkit-fit-content;
}
.pictureLabelArea{
  float:left;
}

.pictureOverview{
  max-width: 175px;
  min-width: 175px;
  /*min-height: 120px;*/
  max-height: 130px;
  height: auto;
  padding: 10px;
}
.pictureOverviewLabelArea{
  width: 100%;
  float: left;
}

.pictureOverviewImage{
  margin: auto auto;
  max-width: 100%;
  max-height: 120px;
}

.PictureButton{
  /*position: absolute;*/
  margin-bottom: 10px;
  max-width: 25px;
  position: absolute;
  margin-top: 15px;
  margin-left: 155px;
  background-color: rgba(255,255,255,0.4);
  border-radius: 50%;
  box-shadow: 1px 1px 8px #B4B4B4;
}

.blumenline {
  /*margin: 30px auto;*/
  /*padding: 0 10px;*/
  position: relative;
  transition: all 0.25s ease-in;
  /*background: white;*/
  /*max-width: 710px;*/
  width: 25px;
}

.blumenline::before {
  background: lightgrey;
  content: '';
  top: 50%;
  position: absolute;
  left: -1px;
  height: 1px;
  right: -1px;
}

.BlumenTable{
  font-weight: 200;
  font-size: 100%;
  border-collapse: collapse;
  margin: 0 auto;
}

.BlumenName{
  text-align: center;
  width: 150px;
  overflow-wrap: break-word;
}

.BlumenNameEntry{
  padding-top: 10px;
  padding-bottom: 10px;
  min-width: 151px;
}

.BlumenIcon{
  margin-left: 10px;
  margin-right: 10px;
}

.BlumenMonth{
  border-left: 1px solid lightgrey;
  text-align: center;
  vertical-align: top;
}

.BlumenEntry{
  width: 25px;
  text-align: center;
}

.BlumenEntryBorder{
  border-left: 1px solid lightgrey;
  width: 20px;
  text-align: center;;
}

.BlumenDuengen{
  border-radius: 50%;
  width: 12px;
  height: 12px;
  background-color: lightgrey;
  margin-left: 7px;
  position: absolute;
  margin-top: -6px;
}

.BlumenAktuell{
  background-color: #24598d;
}

.BlumenAktuell::before {
  background: #24598d;
  content: '';
  left: 6px;
  position: absolute;
  top:-50px;  
  width: 1px;
  bottom: 0px;
}

.currentWeek::before {
  background: #24598d;
  content: '';
  left: 13px;
  position: absolute;
  top:-50px;  
  width: 1px;
  bottom: -20px;
}

.currentDate{
  text-align: center;
  font-size: 90%;
  height: 25px;
  vertical-align: top;
  color: #24598d;
}

.schoolTable{
  min-width: 15%;
  max-width: 15%;
  width: 15%;
  text-align: center;
  height: 50px;
  border: 0.5px solid lightgrey;
  border-radius: 5px;

}

.schoolTable2{
  min-width: 12%;
  max-width: 12%;
  width: 12%;
  text-align: center;
  height: 50px;
  border: 0.5px solid lightgrey;
  border-radius: 5px;

}

.schoolGang{
  min-width: 5%;
  max-width: 5%;
  width: 5%;
}

.schoolGang2{
  min-width: 4%;
  max-width: 4%;
  width: 4%;
}

.schoolButton{
  width: 29%;
  height: 30px;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  background-color: rgba(0,0,0,0.1);
  float: left;
  margin-right: 1.67%;
  margin-left: 1.67%;
  border-radius: 5px;

}

.WertungPlus{
  background-color: rgba(50,225,80,0.4);
}

.WertungMinus{
  background-color: rgba(225,50,80,0.4);
}

.WertungWelle{
  background-color: rgba(255,223,3,0.4);
}

.WertungNeutral{
  background-color: rgba(255,255,255,0);
}

.school_coursKachel{
   border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: #24598d;
    height: 40px;
    margin-right: 20px;
    margin-bottom: 20px;
}
.school_coursKachel:hover{
   background: #24598d;
   border: 1px solid #24598d;
    border-radius: 3px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: #ffffff;
}

.school_coursKachel.slave{
   border: 1px solid lightgrey;
    border-radius: 3px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    width: 128px;
    font-weight: 500;
    text-decoration: none;  
    color: grey;
}
.school_coursKachel.slave:hover{
   background: lightgrey;
   border: 1px solid lightgrey;
    border-radius: 3px;
    cursor: pointer;
    padding: 10px;
    text-align: center;
    text-decoration: none;  
    width: 128px;
    color: grey;
}

.school_teacher{
   border: 1px solid lightgrey;
    border-radius: 3px;
    padding: 10px;
    text-align: center;
    width: 30vw;
    font-weight: 500;
    text-decoration: none;  
    color: grey;
}

.school_teacher.history{
  background-color: red;
}

.vertical-header span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  text-align: left;
  max-height: 150px;
}
.results{
  border-collapse: collapse;
}

.results td{
  min-width: 20px;
  text-align: center;
  border: 0.5px solid lightgrey;
}

.coursLabel{
  margin-left: 20px;
  margin-right: 20px;
  float: left;
  font-size: 80px;
  font-weight: 100;
}

.NameResultsLabel{
  font-size: 20px;
  font-weight: 300;
}
.resultTableArea{
  max-width: 70%;
  height: 100px;
  overflow: scroll;
}

.ResultsOverview td{
  font-weight: 600;

}

.ResultsSummary{
  margin: auto;
  width: -webkit-fit-content;

}

.ResultsNameAndOverview{
  float: left;
  margin-right: 20px;

}

.ResultsOverview .WertungMinus, .ResultsOverview .WertungPlus, .ResultsOverview .WertungWelle{
  width: 30px;
  text-align: center;
}

/* The Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 100px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  margin-top: -15px;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

.schoolModalHead{
  text-align: center;
  font-size: 200%;
  font-weight: 100;
}

#ModalContent{
  border-left: 0.5px solid #24598d;
  border-bottom: 0.5px solid #24598d;
  padding:5px;
}

.entryarea .inputText{
  font-size: 100%;
  height: unset;
}

.headlineStudentsEdit{
  font-size: 100%;
  font-weight: 500;
  margin-bottom: 10px;
}

.NotesHistory{
  margin-top: 30px;
  max-height: 50vh;
  overflow: scroll;
}

.schoolNotehistoryDate{
  font-weight: 500;
  border-bottom: 0.5px solid #24598d;
}

.HistoryHeadline{
  font-weight: 500;
  font-size: 120%;
  margin-bottom: 10px;
}

.nachtragsAnzeige{
  float: right;
  margin-top: -100px;
}

.VerbrauchsTable{
  margin-top: 10px;
  float: left;
}

.gasTableHead{
  background-color: orange;
}
.wasserTableHead{
  background-color: lightblue;
}
.stromTableHead{
  background-color: lightgreen;
}

.verbrauchsTableHeader{
  font-size: 80%;
}
.verbrauchsTableSubheader{
  font-size: 70%;
}
.verbrauchsTableContent{
  font-size: 80%;
  border-bottom: 0.5px solid lightgrey;
}

.verbrauchsTableContent.subheadline{
  background-color: rgba(0,0,0,0.2);
}

.verbrauchsTableContent.presubheadline{
height: 10px;}


.verbrauchsTableContent.grey{
  background-color: rgba(0,0,0,0.05);
}
.verbrauchsTableContent td{
  padding-left: 10px;
  padding-right: 10px;
}
.border.right{
  border-right: 0.5px solid lightgrey;
}
.border.left{
  border-left: 0.5px solid lightgrey;
}
.chartDiv{
  padding-top: 10px;
  width:33%;
  float: left;
} 
.statusIndicator{
  border-radius:50%; 
  height:10px; 
  width:10px;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 2px;
}
.statusIndicator.green{
    background-color:yellowgreen; 
}
.statusIndicator.orange{
    background-color:orange; 
}
.statusIndicator.red{
    background-color:red; 
    animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.statusContainerSpacer{
  min-height: 165px;
  float: left;
}
.statusContainer{
  border: 1px solid lightgrey;
  border-radius: 5px;
  padding-bottom: 5px;
  margin-bottom: 20px;
}
.statusHeadline{
  font-weight: 500;
  margin-top: 5px;
  margin-bottom: 5px;
  border-bottom: 0.5px solid lightgrey;
  height: 20px
}
.statusHeadlineIndicatorContainer{
  height: 20px;
  float: left;
}
.statusHeadlineIndicatorContainer .statusIndicator{
  margin-top: 5px;
}

.statusHeadlineLabel{
  width: -webkit-fit-content;
  float: left;
}
.statusHeadlineContainer{
  margin: auto auto;
  width: -webkit-fit-content;

}
.statusEntryArea{
  margin: auto auto;
  width: -webkit-fit-content;
  height: 7px;
  padding-bottom: 3px;
}
.statusEntry{
  float: left;
  width: 52px;
}
.statusEntry .statusIndicator{
  height:7px; 
  width:7px; 
}
.statusEntryLabel{
  font-weight: 200;
  font-size: 70%;
}

.infoEntryArea{
  text-align: center;
}
.infoEntryArea a{
  text-decoration: none;
  color: #24598d;
  font-weight: 500;
}
.infoEntryArea .value{
  color: grey;
  font-weight: 500;
}

/* Start BabyPage Customizings */
.containerfullsize.babyPage{
  background-color: unset;
  padding: 0px;
}


.babyEntry{
  background-color: #ffffff;
  padding:15px 20px 20px 20px;
  margin-top: 15px;
}  

.babyAlwaysOnTop{
  margin-bottom: 60px;
  margin-top: 67px;
}

.babyAlwaysOnTop td, .babyAlwaysOnTop table {
  border: 0px;
}

.babyAlwaysOnTopEntry{
  background-color: #fafced;
  padding:15px 20px 20px 20px;
  margin-top: 0px;
  margin-bottom: 15px;
  border-radius: 15px;
}

.babyFaceImageContainer{
  width: 175px;
  margin-top: -100px;
}

.babyFaceImageRahmen{
  width: 190px;
  height: 190px;
  background-color: #fafced;
  border-radius: 50%;
}

@media(min-width:0px){
 .firstBabyContentImage{
  margin-top: 60px;
 }
 .babyEntry.second.SpaceL.SpaceR{
  margin-top: 0px;
 }

 .babyEntry{
  box-shadow: none;
 }

 .babyEntry.WithImage{
    display: flow-root;
  }

}

@media(min-width:767px){
  .babyEntry{
    box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);
  }

  .babyEntry.WithImage{
    display: flex;
  }

  .babyEntry.first{
  /*margin-top: 0px;*/
  margin-top: 30px;
  padding: 0px;
  box-shadow: none;
  display: flex;
}

.babyEntry.second{
  margin-top: 0px;
  margin-top: 0px;
  padding: 0px;
  padding-top: 10px;
  box-shadow: none;
  display: block;
  min-width: 31%;
  width: 31%;
  float: left;
}
.babyEntry.second.SpaceL{
  padding-left: 10px;
}

.babyEntry.second.SpaceR{
  padding-right: 10px;
}

.babyEntry.second.borderR{
  border-right: 0.5px dotted #24598d;
}
.babyEntry.second.borderL{
  border-left: 0.5px dotted #24598d;

}

.babyEntryHeadArea{
  box-shadow: 1px 1px 4px 0 rgba(0,0,0,.1);

}

.firstBabyContainer{
  background-color: #fff;
  /* float: left; */
  min-width: 33%;
  /* display: block; */
  /* padding: 20px; */
  position: relative;
  left: 20px;
  z-index: 20;
}

.firstBabyContent{
  padding:15px 20px 20px 0px;
}

.firstBabyContentImage{
  max-width: 70%;
  height: unset;
  /* float: left; */
  /* left: -20px; */
  position: relative;
  margin-top: -30px;/*15px;*/
  min-width: 70%;
  left: -85px;
}
.afterTopStory{
  padding:1px 15px 15px 15px;
  background-color: #fff;
}

.horizontalDivider{
  border-top: 0.5px dotted #24598d;
  margin-top: 15px;
  margin-bottom: 15px;
  min-width: 100%;
  float: left;
}

.babyEntryLeftPart{
  width: 50%;
  float: left;
  padding-right: 15px;
}


.babyEntryRightPart{
  width: 50%;
  float: left;
  display : flex;
  align-items : center;
  justify-content: center;
}

.babyWishes .babyEntryRightPart{
  justify-content: end;
}

}


.babyEntryRightPart{
  display : flex;
  align-items : center;
  justify-content: center;
}




.contentDate{
  color: #24598d;
  font-weight: 600;
}

.babyEntry.second>.headline, .EntryList>.babyEntry>.headline, .babyEntryLeftPart>.headline{
  font-size: 20px;
}



body > div.contentANDnav > div.containerfullsize.babyPage > div.babyAlwaysOnTop > div > div.babyAlwaysOnTopContainer > div > div.babySaveButton{
  position: absolute;
  /* top: 7px; */
  z-index: 33;
  margin-left: 0px;
  margin-top: -10px;
}
.babySaveButton{
  position: absolute;
  /* top: 7px; */
  z-index: 33;
  margin-left: 175px;
  margin-top: 8px;
}
.babySaveButtonHeader{
  position: absolute;
  /* top: 7px; */
  z-index: 33;
  margin-left: 140px;
  margin-top: -28px;  
}

/* Ende BabyPage Customizings */

.manualUploadTitle {
width: 165px;
word-wrap: break-word;
}

.tooltip {
  position: relative;
  display: inline-block;
 /* border-bottom: 1px dotted black;*/
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 90px;
  background-color: #555;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -45px;
  opacity: 0;
  transition: opacity 0.3s;
}

.tooltip .tooltiptext.Auto{
  width: 110px !important;
  margin-left: -55px !important;
  font-size:80%;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

/* Inventory PopUp */

#tablecolumnMore {
  /*width: 1px;
  padding: 0px;*/
}

.morePopOut {
  display:none;
}

.morePopOut table{
  font-size: 100%;
}
.morePopOut a{
  text-decoration: none;
}

.morePopOut a {
  border-radius: 2px;
  color: inherit;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  transition: color 0.3s ease 0s, background 0.3s ease 0s;
  text-decoration: none;
  background-color: transparent;
}

.morePopOut a:hover {
  background: #24598d none repeat scroll 0 0;
  color: #fff;
}
    
#tablecolumnMore:hover .morePopOut, #tablecolumnMore:focus .morePopOut, #tablecolumnMore:active .morePopOut{
  background-color: white;
  width: 100px;
  padding: 10px;
  padding-top:10px;
  padding-bottom:10px;
  border-radius: 5px;
  font-size: 12px;
  box-shadow: 1px 1px 8px #B4B4B4;
  cursor:default;
  display:block;
  position:absolute;
  z-index:1;
  margin-left: 15px;
  margin-top:-38px;
}

#InventaryduplicateLink{
  background-image:url("../images/duplicat.png");
  background-size: 12px;
  background-position-y: 2px;
  background-position-x:5px;
  background-repeat: no-repeat;
  padding-left:20px;
}

#InventarDetailTable .floating-label{
  font-weight: 200;
}

.morePopOut #InventaryduplicateLink:hover{
  background-image:url("../images/duplicat-white.png");
}

.modernInventarEntry{
  height: 56px;
  vertical-align: top;
}

.suggestionInventory{
display: none;
position: absolute;
background: white;
width: 420px;
box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
padding: 10px;
margin-right: -15px;
z-index: 100;
max-height: 250px;
overflow: scroll;
margin-top: -15px;
}

.suggestionInventory.hersteller, .suggestionInventory.seriennummer{
  width: 193px;
}{
  width: 193px;
}

.suggestResultEntry{
  border-bottom: 0.5px solid lightgrey;
  border-radius: 0px!important;
  padding: 5px 10px 5px 10px !important;
}

.suggestResultEntry:hover, .suggestResultEntry:active, .suggestResultEntry:focus {
  background-color: #24598d;
  color: white;
}

.suggestResultEntryTitle{
  font-weight: 400;
}

.suggestResultEntrySubTitle{
  margin-left: 20px;
}

/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  /*background-color: #eee;
  color: #444;*/
  cursor: pointer;
 /* padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;*/
  transition: 0.4s;
}

/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active, .accordion:hover {
  /*background-color: #ccc;*/
}

/* Style the accordion panel. Note: hidden by default */
.panel {
 /* padding: 0 18px;*/
  /*background-color: white;*/
  display: none;
  overflow: hidden;
}

.accordion:after {
  content: '\02795'; /* Unicode character for "plus" sign (+) */
  font-size: 13px;
  font-weight: 100;
  color: #fff;
  float: right;
  margin-left: 5px;
}

.accordion.active:after {
  content: "\2796"; /* Unicode character for "minus" sign (-) */
}

.textTop{
  vertical-align: top;
  word-break: break-word;
}

figure > div > div > a >.imageContainer{
  margin-top:-45px;
  box-shadow: -1px -1px 4px 0 rgba(0,0,0,.1); 
}

figure > a > .imageContainer{
    max-height: unset!important;
}

.babyEntryRightPart a, .firstBabyContentImage a {
    text-decoration: none !important;
}

.PictureCount{
  text-align: center;
  color: grey;
  font-weight: 400;
  margin-bottom: 3px;
}

.GalleryTeaser{
  position: absolute;
  text-align: center; 
  margin-top: 32px;
  font-size: 60px;
  font-weight: 200;
  z-index: 1;
  color: #24598d;
}

.BabyTeaserContainer{
  overflow: hidden; 
  cursor: pointer;
}

.urlaubsContainer{
  /*width: 100%;*/
  /*border:  0.5px solid lightgrey;*/
  /*padding: 10px;*/
  /*border-radius: 10px;*/
 /* float: left;*/
  /*margin-right: 10px;
  box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
  margin-top: 20px;*/
}

.urlaubsContainer > #img{
  /*height: 180px;
  overflow: hidden;*/
}

#urlaubslocation{
  font-weight: 500;
  font-size: 200%;
  float: left;
  margin-top: 10px;
  max-width: 70%;
}

#urlaubsdate{
  float: right;
  margin-top: 25px;
  max-width: 30%;
  min-width: 100px;
  text-align: right;

}
.video{
  max-width: 100%;
  max-height: 100%;
}

.autoWerte td{
  padding-left: 5px;
  padding-right: 5px;
}

.autoWerte{
  margin-top: 15px;
}

#dateTable > div > .floating-label{
top: -37px;
bottom: 10px;
/* left: -200px; */
font-size: 11px;
opacity: 0.5;
margin-right: 20px;
height: 14px!important;
}

.button#loadMoreButton{
  width: 90%;
  padding-left: 0px;
  padding-right: 0px;
  margin: auto;
  margin-top: 20px;
}

.flip-card{
  /*width: 45%;*/
  /*height: 450px;
  margin:  auto;*/
  perspective: 1000px;
  float: left;
  margin-right: 20px;
  margin-bottom: 20px;
}
.flip-card-inner{
  position: relative;
  height: 240px;
  transition: transform 2.0s;
  transform-style: preserve-3d;
}
.flip-card-front{
  /*background-color: green;*/
}
.flip-card-back, .flip-card-front{
  position: absolute;
  width: 100%;
  height: 240px;
  -webkit-perspective: 0;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translate3d(0,0,0);
  visibility:visible;
  backface-visibility: hidden;
  background-color: white;
  /*padding: 10px;*/

  border:  0.5px solid lightgrey;
  border-radius: 10px;
  box-shadow: 0 2px 8px 2px rgba(10, 10, 22, 0.3);
  overflow: hidden;
}
.flip-card-back{
  /*background-color: red;
  color: #fff;*/
  transform: rotateY(-180deg);
  z-index: 1;

}
.flip-card-back-header{
  text-align: center;
  font-weight: 500;
  font-size: 200%;
  
}
.flip-card-back-footer{
  margin-top: 40px;
}

.flip-card.backvisible .flip-card-inner{
  transform: rotateY(-180deg);
}

.flip-card-front-container{
  padding: 10px;
  overflow: hidden;
}

.PicturePreviewContainer{
  cursor: pointer;
  max-height: 150px;
  overflow: hidden;
} 

.PictureCollection_button{
  color: lightgrey;
  font-size: 120%;
}
.PictureCollection_button ion-icon{
  cursor: pointer;
}

.PictureCollection_ueberbelnder{
  position: relative;
  background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 80%);
  height: 50px;
  width: 100%;
  margin-bottom: 0px;
  margin-top: -50px;
  cursor: pointer;
}

.pictureCollection_buttonArea{
 margin-top: 10px;
 width: 100%;
 float: left;
 text-align: center;
}

.pictureCollection_settings{
  float: left;
}

.flip-card-back .editable{
  border-left: 0.5px solid #24598d;
  border-bottom: 0.5px solid #24598d;
  width: 80%;
  float: right;
  margin-bottom: 10px;
  padding-left: 5px;
  /*width: 100%;*/
}

.flip-card-back-header .editable{
    border-left: unset;
  border-bottom: 0.5px solid #24598d;
  width: 100%;
  float: unset;
  /*width: 100%;*/
}

.pictureCollection_settingsContainer{
  height: 30px;
}

.verbrauchsFilter{
  height: 30px;
  width: -webkit-fit-content;
 /* border: 0.5px solid grey;
  border-radius: 30px;
  padding: 10 15 10 15px;*/
  color: grey;
}

.verbrauchsFilter .verbrauchsLocationContainer{
    float: left;
    font-size: 80%;
    text-align: center;
}
.verbrauchsLocation.selected{
  background-color: #24598d;
  color: white;
}

.verbrauchsFilter .verbrauchsLocation{
  height: 20px;
  box-shadow: 0px 0px 19px lightgrey;
  margin-left: 5px;
  margin-top: 10px;
  cursor: pointer;
  width: 100px;
  border-radius: 10px;
}

.verbrauchsLocationLabel{
  padding-top: 3px;
}


.babyWishes > .babyEntry.WithImage{
  float: left;
  display: unset;
}


@media(min-width:0px){
  .babyWishes > .babyEntry.WithImage{
    width: -webkit-fill-available;
  }
  .nonAvailable .werdeGeschenkt{
    margin-left: calc(50% - 105px);
  }
  .nonAvailable.Me .werdeGeschenktMe{
    margin-left: calc(50% - 155px);
  }
}
@media(min-width:992px){
      .babyWishes > .babyEntry.WithImage{
    width: 327px;
  }
  .babyWishes > .babyEntry.WithImage.left{
    margin-right: 16px;
  }
  .nonAvailable .werdeGeschenkt{
    margin-left: 75px;
  }
  .nonAvailable.Me .werdeGeschenktMe{
        margin-left: 25px;
  }

}
@media(min-width:1200px){
  .babyWishes > .babyEntry.WithImage{
    width: 392px;
  }
    .nonAvailable .werdeGeschenkt{
    margin-left: 110px;
  }
  .nonAvailable.Me .werdeGeschenktMe{
        margin-left: 58px;
  }
}

.babyWishEntryLeftPart{
  width: 100%;
}

.babyWishEntryRightPart{
  margin-top: 10px;
  width: 100%;
  float: left;
  display: flex;
  align-items: center;
  justify-content: center;
}

.babyWishes .PictureCount{
  display: none;
}

.babyWishes .contentDate{
  display: none;
}

.babyWishes .priceArea{
  width: 100%;
  align-items: center;
  justify-content: center;
  float: left;
  display: flex;
  margin-top: 5px;
}

.babyWishes .priceItem{
  border: 1px solid #24598d;
  border-radius: 5px;
  /*background-color: #24598d;*/
  color: #24598d;
  padding: 5px 10px 5px 10px;
  font-weight: 500;
}

.babyWishes .dividerLine{
  border-bottom: 0.5px solid lightgrey;
  width: 100%;
  float: left;
  margin-top: 10px;
  margin-bottom: 20px;
}

.babyWishes .button{
  border-radius: 16px;
  background-color: #24598d;
  color: #fff;
  padding: 5px 10px 5px 10px;
  font-weight: 500;
}

.babyWishes .button.link{
  border:  1px solid #24598d;
  background-color: unset;
  color: #24598d;
}

.babyWishes .nonAvailable .button.select{
  display: none;
}

.babyWishes .button.unselect{
  display: none;
}

.babyWishes .nonAvailable.Me .button.unselect{
  display: unset;
  background-color: red;
}

.babyWishes .babyEntry.nonAvailable{
  /*background-color: lightgrey;*/
}

.babyWishes .babyEntry.nonAvailable.Me{
  /*background-color: red;*/
}

.werdeGeschenkt{
  display: none;
}

.werdeGeschenktMe{
  display: none;
}

.nonAvailable.Me .werdeGeschenkt{
  display: none;
}
.nonAvailable .werdeGeschenktMe{
  display: none;
}

.nonAvailable .werdeGeschenkt{
  display: unset;
  position: absolute;
  color: red;
  font-size: 31px;
  font-weight: 200;
  rotate: -30deg;
  margin-top: 130px;
  border: 1px solid red;
  padding: 0px 15px 0px 15px;
  border-radius: 30px;
  background-color: rgba(255,255,255,0.8);
}

.nonAvailable.Me .werdeGeschenktMe{
  display: unset;
  position: absolute;
  color: #24598d;
  font-size: 31px;
  font-weight: 200;
  rotate: -30deg;
  margin-top: 130px;
  border: 1px solid #24598d;
  padding: 0px 15px 0px 15px;
  border-radius: 30px;
  background-color: rgba(255,255,255,0.8);
}

/* CSS Syteles für Tridom - Start */
.tridomHeadline{
  font-size: 140%;
  font-weight: 300;
}
.selectPlayerNumber{
  padding-top: 20px;
  padding-bottom: 20px;
  width: fit-content;
}

.playerNumber{
  float: left;
  border-radius: 10px;
  border: 1px solid #24598d;
  padding: 5 10 5 10px;
  margin: 5px;
  font-weight: 500;
  color: #24598d;
  text-decoration: none;

}
.playerNumber:hover{
  background: #24598d;
  color: white;
}

.tridomResultTable{
  border-collapse: collapse;
}

.tridomResultTable td, .tridomResultTable input{
  text-align: center;
  min-width: 80px;
}

.toggle-buttons input[type="radio"] {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
  /*top: 10px;*/
}
.toggle-buttons label {
  border: 1px solid #24598d;
  /*border-radius: 0.5em;*/
  padding: 0.4em;
  color: #24598d;
  font-size: 80%;
}
 
.toggle-buttons input:checked + label {
  background: #24598d;
  color: white;
  box-shadow: none;
}

input:hover + label,
input:focus + label {
  background: #24598d;
  color: white;
}
.tridomButtonLeft{
  border-bottom-left-radius: 10px;
  border-top-left-radius: 10px;
  margin-left: -5px;
}
.tridomButtonMiddle{
  margin-left: -5px;

}
.tridomButtonRight{
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
  margin-left: -5px;
}

.tridomWertButtonTable{
  border-collapse: collapse;
}
.tridomWertButtonTable td{
  padding:0px;
}

.tridomWertButton{
  min-width: 20px;
  padding-top:5px!important;
  padding-bottom:5px!important;
  padding-left:10px!important;
  padding-right:10px!important;
  margin-left: -1px;
}

.tridomWertButton.twoDigits{
  padding-left:6.5px!important;
  padding-right:6.5px!important;
}

.tridomWertButton.TopLeft{
  border-top-left-radius: 10px;


}

.tridomWertButton.Top{
}

.tridomWertButton.TopRight{
  border-top-right-radius: 10px;
}

.tridomWertButton.MiddleLeft{
}

.tridomWertButton.Middle{
}

.tridomWertButton.Middle.twoDigits{
}

.tridomWertButton.MiddleRight{
}

.tridomWertButton.BottomLeft{
  border-bottom-left-radius: 10px;
}

.tridomWertButton.Bottom{
}

.tridomWertButton.BottomRight{
  border-bottom-right-radius: 10px;
}

.tridomWertButtonTr{
  height: 26px;
}

.tridomWertZelle{
  padding-right: 10px;
}
.tridomWert{
  height: 95px;
  font-size: 30px;
  width: 120px;
  text-align: center;
  border: 1px solid #24598d;
  border-radius: 10px;
}

.tridomHandPunkte{
  font-size: 20px;
  width: 120px;
  text-align: center;
  border: 1px solid #24598d;
  border-radius: 10px;
}
.tridomButtonArray{
  line-height: 29px;
}
.tridomEntryArea{
  width: 100%;
  border-top: 0.5px solid lightgrey;
  padding-top: 15px;
  margin-top: 15px;
}
.tridomWeiter{
  max-height: 95px;
  cursor: pointer;
  float:right;
}
.tridomWeiter img{
  height: 95px;
  opacity: 30%;
}

.spielerEintrag{
  margin-top: 5px;
  margin-bottom: 5px;
}

.startGameButton{
  float: left;
  border-radius: 10px;
  border: 1px solid #24598d;
  padding: 5 10 5 10px;
  margin: 5px;
  font-weight: 500;
  color: #24598d;
  text-decoration: none;
  cursor: pointer;

}
.startGameButton:hover, .newGameButton:hover, .setHandPunkte:hover{
  background: #24598d;
  color: white;
}

.newGameButton{
  border-radius: 10px;
  border: 1px solid #24598d;
  padding: 5 10 5 10px;
  margin: 5px;
  font-weight: 500;
  color: #24598d;
  text-decoration: none;
  cursor: pointer;
}

.currentSpieler{
  background-color: rgba(36, 89, 141, 0.1);
  color: #24598d;
}

.tridomSumRow{
  border-top: 0.5px solid lightgrey;
  font-weight: bold;
}

.TridomResultTableHeader{
  font-weight: bold;
  border-bottom: 0.5px solid lightgrey;

}

.scrollTable{
  max-height:200px;
  overflow:scroll;
}

.scrollTable .TridomResultTableHeader{
  visibility: hidden;
  line-height: 0px;
}

.tridomResultTable .tridomResultTable {
  margin-top: -3px;
}

.letzterSteinPunkte{
  float:left;
  margin-left:10px;
  margin-right:10px;
  display: none;
}

.TridomInfoText{
  margin-top: 20px;
  background-color: rgba(0,0,0,0.1);
  padding: 10px;
  border-radius: 10px;
  font-weight: bold;
}

.setHandPunkte{
  border-radius: 10px;
  border: 1px solid #24598d;
  padding: 5 10 5 10px;
  margin: 5px;
  font-weight: 500;
  color: #24598d;
  text-decoration: none;
  cursor: pointer;
}
/* CSS Syteles für Tridom - ENDE */