/* =========
Your custom styles for alle devices
 ========= */
 
 h1{
	 font-size: 1.2rem;
 }
 
 h2{
	 font-size: 1.15rem;
 }
 
 h3{
	 font-size: 1.1em;
 }
 
 
.login-back-button{
    float: left;
    margin: 0 -35px 0 12px;
}


#full_width_paketkasten{
    margin-left: -16px;
    margin-right: -16px;
}

/* Focalpoint von https://github.com/adamdbradley/focal-point */
/* 
 *  Focal Point: Pure HTML/CSS Adaptive Images Framework
 *  Author: Adam Bradley, 2012
 *  License: MIT/GPLv2
 *  https://github.com/adamdbradley/focal-point
*/
/* Tipp braucht man andere Werte, kann man dem Eltern-Element (vorm einzelnen div mit .focal-point in der Klasse)
 * eine andere font-size (z.B.: 1.4rem;) geben.
*/

.focal-point{       width:100%;         height:auto;    overflow:hidden}
.focal-point img{   width:100%;         max-width:100%; height:auto;    -ms-interpolation-mode:bicubic}
.focal-point div{   position:relative;  max-width:none; height:auto}


@media all and (max-width:48em){
    /* Zoomt bei jedem Element rein */
    .focal-point div        {margin:0 0}
    /* Querformat */
    .down-1 div             {margin-top:-3.5em;     margin-bottom:-2.5em}   .down-2 div{margin-top:-4em;margin-bottom:-2em}.down-3 div{margin-top:-4.5em;margin-bottom:-1.5em}.down-4 div{margin-top:-5em;margin-bottom:-1em}.down-5 div{margin-top:-5.5em;margin-bottom:-0.5em}.down-6 div{margin-top:-6em;margin-bottom:0}
    .up-1 div               {margin-top:-2.5em;     margin-bottom:-3.5em}   .up-2 div{margin-top:-2em;margin-bottom:-4em}.up-3 div{margin-top:-1.5em;margin-bottom:-4.5em}.up-4 div{margin-top:-1em;margin-bottom:-5em}.up-5 div{margin-top:-0.5em;margin-bottom:-5.5em}.up-6 div{margin-top:0;margin-bottom:-6em}
    .right-1 div            {margin-left:-4.66em;   margin-right:-3.34em}   .right-2 div{margin-left:-5.33em;margin-right:-2.67em}.right-3 div{margin-left:-6em;margin-right:-2em}.right-4 div{margin-left:-6.66em;margin-right:-1.34em}.right-5 div{margin-left:-7.33em;margin-right:-0.67em}.right-6 div{margin-left:-8em;margin-right:0}
    .left-1 div             {margin-left:-3.34em;   margin-right:-4.66em}   .left-2 div{margin-left:-2.67em;margin-right:-5.33em}.left-3 div{margin-left:-2em;margin-right:-6em}.left-4 div{margin-left:-1.34em;margin-right:-6.66em}.left-5 div{margin-left:-0.67em;margin-right:-7.33em}.left-6 div{margin-left:0;margin-right:-8em}
    /* Hochformat */
    .focal-point.hochformat div{margin:-4em -3em}
    .hochformat.down-1 div    {margin-top:-4.66em;    margin-bottom:-3.34em}  .hochformat.down-2 div{margin-top:-5.33em;margin-bottom:-2.67em}.hochformat.down-3 div{margin-top:-6em;margin-bottom:-2em}.hochformat.down-4 div{margin-top:-6.66em;margin-bottom:-1.34em}.hochformat.down-5 div{margin-top:-7.33em;margin-bottom:-0.67em}.hochformat.down-6 div{margin-top:-8em;margin-bottom:0}
    .hochformat.right-1 div   {margin-left:-3.5em;    margin-right:-2.5em}    .hochformat.right-2 div{margin-left:-4em;margin-right:-2em}.hochformat.right-3 div{margin-left:-4.5em;margin-right:-1.5em}.hochformat.right-4 div{margin-left:-5em;margin-right:-1em}.hochformat.right-5 div{margin-left:-5.5em;margin-right:-0.5em}.hochformat.right-6 div{margin-left:-6em;margin-right:0}
    .hochformat.up-1 div      {margin-top:-3.34em;    margin-bottom:-4.66em}  .hochformat.up-2 div{margin-top:-2.67em;margin-bottom:-5.33em}.hochformat.up-3 div{margin-top:-2em;margin-bottom:-6em}.hochformat.up-4 div{margin-top:-1.34em;margin-bottom:-6.66em}.hochformat.up-5 div{margin-top:-0.67em;margin-bottom:-7.33em}.hochformat.up-6 div{margin-top:0;margin-bottom:-8em}
    .hochformat.left-1 div    {margin-left:-2.5em;    margin-right:-3.5em}    .hochformat.left-2 div{margin-left:-2em;margin-right:-4em}.hochformat.left-3 div{margin-left:-1.5em;margin-right:-4.5em}.hochformat.left-4 div{margin-left:-1em;margin-right:-5em}.hochformat.left-5 div{margin-left:-0.5em;margin-right:-5.5em}.hochformat.left-6 div{margin-left:0;margin-right:-6em}
    /* Haller geadded */
    /* oben und unten nichts abschneiden */
    .focal-point.full_height div, .focal-point.big div    {margin-bottom: 0em;    margin-top: 0em}
    /* oben und unten sehr viel abschneiden */
    .focal-point.less_height div, .focal-point.flat div   {margin-bottom: -6em;   margin-top: -6em;}
}

.img_responsive {
    display: block;
    width: 100%;
    height: auto;
}



.img_overlay_parent{
    position: relative!important;
}

.img_overlay_parent div.img_overlay{
    position: absolute!important;
}



/* focalpoint-fix fuers overlay */
.img_overlay, .img_overlay div{
    margin: 0!important;
}


/* Standardtheme fuer Overlay */
.img_overlay div{
    font-family: 'open sans', sans-serif;
    color: white;
    display: table;
}

.title_black{
    
    color: black;
}

/* ElockOverlay */

.eoeffner_info_overlay{
    background-color: #7ca91f;
    border: solid 2px;
    border-radius: 5px;
    color: white;
    top: 60%;
    left: 46%;
    font-size: 22px;
    line-height: 13px;
}


.console_overlay{
   position:absolute;
   width: 100%;
   height:100%;
   display: inline-block;
    top: 0px;
    left:0px;

}

.weather_symbol_overlay{    
    top: 0%;
    right: 4%;
}



/*Benachrichtigungs Notification Symbol*/ /* Test: 320px */
.img_overlay.notificationbutton{
	left: 63%;
    background-color: #ff7f00;
    border: solid 2px;
    border-radius: 20px;
    color: white;
    font-size: 15px;
    line-height: 8px;
    padding: 6px;
}

.notificationbutton.button1{top: 17%;}
.notificationbutton.button2{top: 38%;}
.notificationbutton.button3{top: 64%;}

/* Tuerindikator-Slider */
.img_overlay.indicatorswitch{
    left: 55%;
}

.img_overlay.indicatorswitch.elock1{top: 18%;}
.img_overlay.indicatorswitch.elock2{top: 38%;}
.img_overlay.indicatorswitch.elock3{top: 64%;}


/* Fragezeichen */
.img_overlay.questionmark{
    left: 55.8%;
}

.img_overlay.questionmark.elock1{top: 24%;}
.img_overlay.questionmark.elock2{top: 43%;}
.img_overlay.questionmark.elock3{top: 69%;}

@media (min-width: 450px){  /* Test: 650px */
	.img_overlay.notificationbutton{
		border: solid 2px;
		left: 60%;
		font-size: 13px;
		line-height: 9px;
		padding: 7px;
	}
	
	.notificationbutton.button1{top: 15%;}
	.notificationbutton.button2{top: 37%;}
	.notificationbutton.button3{top: 55%;}
	
    .img_overlay.indicatorswitch {
        left: 57.6%;
    }
	.img_overlay.indicatorswitch.elock1{top: 22%;}
	.img_overlay.indicatorswitch.elock2{top: 41%;}
	.img_overlay.indicatorswitch.elock3{top: 64%;}
	.img_overlay.questionmark{
		left: 58%;
    }
	.img_overlay.questionmark.elock1{top: 24.5%;}
	.img_overlay.questionmark.elock2{top: 43.5%;}
	.img_overlay.questionmark.elock3{top: 66%;}
}

@media (min-width: 950px){   /* Test: 1020px */
    .img_overlay.notificationbutton{
		border: solid 2px;
		left: 57.4%;
		font-size: 20px;
		line-height: 14px;
		padding: 7px;
	}
	
	.notificationbutton.button1{top: 15%;}
	.notificationbutton.button2{top: 36%;}
	.notificationbutton.button3{top: 54%;}
	
	.img_overlay.indicatorswitch{
        left: 58.3%;
    }
	.img_overlay.indicatorswitch.elock1{top: 22%;}
	.img_overlay.indicatorswitch.elock2{top: 41%;}
	.img_overlay.indicatorswitch.elock3{top: 67%;}

	.img_overlay.questionmark{
        left: 58.6%;
    }
    .img_overlay.questionmark.elock1{top: 24%;}
	.img_overlay.questionmark.elock2{top: 43%;}
	.img_overlay.questionmark.elock3{top: 69%;} 

    .mydoorindicatorswitch-checkbox:checked + .mydoorindicatorswitch-label {
        height: 34px;  
    }
}

@media (min-width: 1280px){  /* Test: 1920px */
    .img_overlay.notificationbutton{
		border: solid 2px;
		left: 58.4%;
		font-size: 30px;
		line-height: 19px;
		padding: 9px;
	}
	
	.notificationbutton.button1{top: 15%;}
	.notificationbutton.button2{top: 36%;}
	.notificationbutton.button3{top: 53.2%;}
	
	.img_overlay.indicatorswitch{
        left: 59%;
    }
	.img_overlay.indicatorswitch.elock1{top: 23%;}
	.img_overlay.indicatorswitch.elock2{top: 42%;}
	.img_overlay.indicatorswitch.elock3{top: 68%;}

	.img_overlay.questionmark{
        left: 59.2%;
    }
    .img_overlay.questionmark.elock1{top: 24%;}
	.img_overlay.questionmark.elock2{top: 43%;}
	.img_overlay.questionmark.elock3{top: 69%;} 

    .mydoorindicatorswitch-checkbox:checked + .mydoorindicatorswitch-label {
        height: 34px;  
    }
}

/* der mypaketkastenswitch - tuerindikatorswitcher */
.mydoorindicatorswitch {
    position: relative; width: 15px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.mydoorindicatorswitch-checkbox {
    display: none;
}
.mydoorindicatorswitch-label {
    display: block; overflow: hidden; cursor: pointer;
    height: 30px; padding: 0; line-height: 24px;
    border: 0px solid #E3E3E3; border-radius: 22px;
    background-color: #FC3C3C;
    box-shadow: inset -1px 1px 0 0 black;
}
.mydoorindicatorswitch-label:before {
    content: "";
    display: block;
    width: 12px;
    margin: 0px;
    background: #e4e4e4;
    position: absolute;
    height: 11px;
    top: 18px;
    bottom: 0;
    right: 1px;
    border-radius: 22px;
    border: solid 0.01rem #dadada;
}
.mydoorindicatorswitch-checkbox:checked + .mydoorindicatorswitch-label {
    background-color: #2D9E2B;
    height: 30px;
    box-shadow: inset -1px 1px 0 0 black;
}
.mydoorindicatorswitch-checkbox:checked + .mydoorindicatorswitch-label, .mydoorindicatorswitch-checkbox:checked + .mydoorindicatorswitch-label:before {
   border-color: #2D9E2B;
}
.mydoorindicatorswitch-checkbox:checked + .mydoorindicatorswitch-label .mydoorindicatorswitch-inner {
    margin-left: 0;
}
.mydoorindicatorswitch-checkbox:checked + .mydoorindicatorswitch-label:before {
    right: 1px;
    top: 0;
    border: solid 0.01rem #dadada;
}


@media all and (max-width:48em){
	.eoeffner_info_overlay{
		background-color: #7ca91f;
		border: solid 2px;
		border-radius: 4px;
		color: white;
		top: 56%;
		left: 41%;
		font-size: 13px;
		line-height: 7px;
	}
}

.eschlossbutton{
    bottom: 22%;
    left: 40%;
    
}

.eschlosswidth{
    min-width:40px;
}

.eschlossopen {
     bottom: 34%;
    left: 44%;
}

.icon_width{
    width: 60px;
}

#margin_button{
    margin: 3%;
}

#questionmark {
    font-size: 5em;
    color: #565656;
    background-color: #dac7b1;
    font-style: normal;
    line-height: 0.8em;
    padding: 1%;
    border: #dac7b1;
    border-radius: 7px;
    margin-top: 3px;
}

.button_janein{

    display: inline-block;
}

.temperaturanzeige{
       text-align: center;
    padding: 10px 0 0px 0;
    font-size: large;
    
}

@media all and (max-width:48em){
   .temperaturanzeige{
    font-size: medium;
    } 
}


/*E-oeffner unteres Fach Seite*/
.eschlossunten {
    top:0px;
    left:0px;
    
}

.eschlosshide{
    display:hide;
}


  .facebook-card .card-header {
    display: block;
    padding: 10px;
  }
  .facebook-card .facebook-avatar {
    float: left;
  }
  .facebook-card .facebook-name {
    margin-left: 60px;
    font-size: 14px;
    font-weight: 500;
  }
  .facebook-card .facebook-date {
    margin-left: 60px;
    font-size: 13px;
    color: #8e8e93;
  }
  .facebook-card .card-footer {
    background: #fafafa;
    min-height: 0px;
  }
  .facebook-card .card-footer a {
    color: #81848b;
    font-weight: 500;
  }
  .facebook-card .card-content img {
    display: block;
  }
  .facebook-card .card-content-inner {
    padding: 15px 10px;
  }
  .facebook-action {
    position: absolute;
    top: 5px;
    right: 10px;
    background-color: #E0E0E0;
    border-radius: 20px;
    padding: 0 8px 1px 8px;
  }
  
  /*Einrichtungsassistent*/
  .assistent{
    background-color: #5a6063; /*#607d8b*/
    color: white;
  }
  .font_white_ue{
    color: white;
    font-weight: bolder;
    font-size: larger;
  }
  .font_white{
    color:white;
    font-size: large;
  }
  

.bg_toolbar_color{
   background-color: #607d8b;
  font-size: large;
}
  
.assistent .swiper-button-next, .assistent .swiper-button-prev {
    bottom: 0%;
    top: inherit;
}

.assistent-closing-button{
    margin: 10px;
    border: 1px solid #ffffff;
    color: #ffffff;
}
.assistent input{
    background-color: #fff!important;
    text-align: center;
}

.div_switch .label-switch{
	top: 3px;
}

.card_text{
	padding-top: 3px;
}