/* Your app styles here */
[v-cloak] > * { display:none; }
[v-cloak]::before { 
  content: " ";
  display: block;
  margin: 0 auto;
  width: 16px;
  height: 16px;
  margin-top: 5%;
  /*background-image: url('data:image/gif;base64,R0lGODlhEAAQAPIAAP///wAAAMLCwkJCQgAAAGJiYoKCgpKSkiH/C05FVFNDQVBFMi4wAwEAAAAh/hpDcmVhdGVkIHdpdGggYWpheGxvYWQuaW5mbwAh+QQJCgAAACwAAAAAEAAQAAADMwi63P4wyklrE2MIOggZnAdOmGYJRbExwroUmcG2LmDEwnHQLVsYOd2mBzkYDAdKa+dIAAAh+QQJCgAAACwAAAAAEAAQAAADNAi63P5OjCEgG4QMu7DmikRxQlFUYDEZIGBMRVsaqHwctXXf7WEYB4Ag1xjihkMZsiUkKhIAIfkECQoAAAAsAAAAABAAEAAAAzYIujIjK8pByJDMlFYvBoVjHA70GU7xSUJhmKtwHPAKzLO9HMaoKwJZ7Rf8AYPDDzKpZBqfvwQAIfkECQoAAAAsAAAAABAAEAAAAzMIumIlK8oyhpHsnFZfhYumCYUhDAQxRIdhHBGqRoKw0R8DYlJd8z0fMDgsGo/IpHI5TAAAIfkECQoAAAAsAAAAABAAEAAAAzIIunInK0rnZBTwGPNMgQwmdsNgXGJUlIWEuR5oWUIpz8pAEAMe6TwfwyYsGo/IpFKSAAAh+QQJCgAAACwAAAAAEAAQAAADMwi6IMKQORfjdOe82p4wGccc4CEuQradylesojEMBgsUc2G7sDX3lQGBMLAJibufbSlKAAAh+QQJCgAAACwAAAAAEAAQAAADMgi63P7wCRHZnFVdmgHu2nFwlWCI3WGc3TSWhUFGxTAUkGCbtgENBMJAEJsxgMLWzpEAACH5BAkKAAAALAAAAAAQABAAAAMyCLrc/jDKSatlQtScKdceCAjDII7HcQ4EMTCpyrCuUBjCYRgHVtqlAiB1YhiCnlsRkAAAOwAAAAAAAAAAAA==');*/
}

/*Tap Hold Event (Long Tap), nichts kann man mehr markieren
*{
  -moz-user-select: none;
  -webkit-user-select: none;
  user-select: none;
}

input, input:before, input:after, .markable {
  -webkit-user-select: initial!important;
  -khtml-user-select: initial!important;
  -moz-user-select: initial!important;
  -ms-user-select: initial!important;
  user-select: initial!important;
}
*/

/* Loading Bar CSS - https://loading.io/progress/*/
.ldBar{position:relative}.ldBar.label-center>.ldBar-label{position:absolute;top:50%;left:50%;-webkit-transform:translate(-50%,-50%);transform:translate(-50%,-50%);text-shadow:0 0 3px #fff}.ldBar-label:after{content:"%";display:inline}.ldBar.no-percent .ldBar-label:after{content:""}
/* Ende */

.outputstatus{
 position: absolute;
 top: -14px;
 left: -14px;
}

.outputstatus.ledstripe{
 bottom: 282px!important;
 left: -14px;
 height: 20px;
 top: auto;
 width: 163px;
}

.outputstatus .ldBar path.mainline {
  stroke-width: 8;
  stroke: #09f;
  stroke-linecap: round;
  transition: stroke 0.2s ease;
}
.outputstatus .ldBar path.baseline {
  stroke-width: 10;
  stroke: #737373;
  stroke-linecap: round;
}
.outputstatus .ldBar-label {
  color: transparent;
  font-family: 'varela round';
  font-size: 1em;
  font-weight: 100;
  text-shadow: none!important;
  box-shadow: none;
}
.outputstatus .ldBar-label:after {
 content: ""; /* change from % to USD */
 font-size: 0.6em;
   text-shadow: none;
  box-shadow: none;
}

.outputstatus .ldBar.led_stripe{
    bottom: -137px;
    left: 0%;
    position: absolute;
}

.outputstatus .ldBar.led_stripe path.mainline {
  stroke-width: 2;
  stroke: #09f;
  stroke-linecap: round;
  transition: stroke 0.2s ease;
}
.outputstatus .ldBar.led_stripe path.baseline {
  stroke-width: 3;
  stroke: #737373;
  stroke-linecap: round;
}


/* auch bei Material-Design leicht grau */
#main-view .page-content{
  background: #f7f7f8;
}

/* Muss noch neu designt werden */
#install_app{
    color: black;
}

.progressbar{
  margin-bottom: -4px;
}


#wssprogressbar.progressbar-infinite{
 background-color: #009688; 
}

#wssprogressbar.progressbar-infinite:before{
 background-color: #8bc34a; 
}

#wssprogressbar.progressbar-infinite:after{
  background-color: #afb42b; 
}

.warning{
	border-radius: 5px;
 padding: 5px;
 margin: 10px 0;
}

.warning.orange{
	border: solid 1px #ff9500;
	color: #ff9500;
}

.warning.orange.strong{
    border: solid 1px #ff9500;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 3px;
    background-color: #ff9500;
    padding-left: 5px;
}

.text_center{
	text-align: center;
}
.text_left{
  text-align: right;
}

.block_center{
  margin: 0 auto;
}

li.red > .item-content{
  background-color: #B71C1C;
  color: #fff;
  border-radius: 10px;
}

.signout_button {
    color: rgba(255, 255, 255, 0.87);
    font-size: 0.9rem;
    font-weight: normal;
    background-color: #424242;
}

.mypaketkasten_info{
 z-index: 2;
 position: absolute;
    padding-top: 30px;
    top: 0px;
 margin: 0 auto;
 width: 100%;
 left: 0;
 right: 0;
 max-width: none;
 min-width: 250px;
 transition: none;
 -webkit-transform: none;
 -ms-transform: none;
 transform: none;
}

.mypaketkasten_info > div{
 margin: 0 auto;
width: 100%;
 text-align: center;
font-size: 0.8rem;
box-shadow: 0px 0px 5px 0px #606d7b;
}

.mypaketkasten_info > div.hinweistext p{
 background-color: #fff;
}


.editmode{
 z-index: 2;
 position: absolute;
 padding-top: 45px;
 top: 10px;
 margin: 0 auto;
 width: 100%;
 left: 0;
 right: 0;
 max-width: none;
 min-width: 250px;
 transition: none;
 -webkit-transform: none;
 -ms-transform: none;
 transform: none;
}

.editmode > div{
 margin: 0 auto;
 width: 250px;
 text-align: center;
}

.editmode > div.parcelbox_caption p{
 background-color: #13132ca3;
}

.editmode > div.parcelbox_caption.license a p{
 background-color: #9d9702d4;
 width: 250px;
}

#dashboard_slider_wrapper{
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
    background: url(/images/background.svg);
    background-size: contain;
    background-repeat: repeat-x;
    height: 100%;
    margin: 0;
    padding-top: 45px;
    width: 100%;
}

@media only screen and (max-width: 630px) {
	#dashboard_slider_wrapper{
		background: url(/images/background-tief.svg);
		background-size: contain;
		background-repeat: repeat-x;
		background-color: #5b8550;
	}
}


#dashboard_slider_wrapper > div{
  position: fixed;
  position: relative;
  bottom: -40%;
  -webkit-transform: translateY(-50%); 
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Paketkasten weiter unten auf Hintergrund bei Desktopansicht */
@media only screen and (min-width: 1700px) {
	#dashboard_slider_wrapper > div{
	  bottom: -50%;
	}
}


#dashboard_slider_wrapper > div{
    margin: 0 auto;
    max-width: 500px;
    transition: max-width 1s;
}
/* Je Anzahl Boxes andere Groesse */
.boxescount_0 > div{
    max-width: 130px!important;
}
.boxescount_1 > div{
    max-width: 130px!important;
}
.boxescount_2 > div{
    max-width: 260px!important;
}
.boxescount_3 > div{
    max-width: 390px!important;
}
.boxescount_4 > div{
    max-width: 520px!important;
}
.boxescount_5 > div{    
    max-width: 650px!important;
}
.boxescount_6 > div{    
    max-width: 780px!important;
}
.boxescount_7 > div{    
    max-width: 910px!important;
}
.boxescount_8 > div{    
    max-width: 1040px!important;
}
.boxescount_9 > div{    
    max-width: 1170px!important;
}
.boxescount_10 > div{    
    max-width: 1300px!important;
}
.boxescount_11 > div{    
    max-width: 1430px!important;
}
.boxescount_12 > div{    
    max-width: 1560px!important;
}
.boxescount_13 > div{    
    max-width: 1690px!important;
}
.boxescount_14 > div{    
    max-width: 1820px!important;
}
.boxescount_15 > div{    
    max-width: 1950px!important;
}
.boxescount_16 > div{    
    max-width: 2080px!important;
}
.boxescount_17 > div{    
    max-width: 2210px!important;
}
.boxescount_18 > div{    
    max-width: 2340px!important;
}
.boxescount_19 > div{    
    max-width: 2470px!important;
}
.boxescount_20 > div{    
    max-width: 2600px!important;
}

.no_edit_mode_false .handledrag{
  bottom: -10%;
  left: 41%;
  cursor: move;
	cursor: -webkit-grabbing;
}

.center_button{
  width: 250px;
  margin: 0 auto;
}

.bottom_margin{
  margin-bottom: 10px;
}

/* Ghosting Paketkasten ausblenden von Draggable */
.sortable-fallback{
  display: none!important;
}

.addnew{
   top: 26%;
   position: absolute;
   width: 120px!important;
}

/* Add new parcelboxes plus signs */
.dashboard_parcelbox.addnew > a > div {
 height: 70px;
 }

.dashboard_parcelbox.addnew div > i {
    position: absolute;
    color: #000;
    top: 25%;
    width: 100%;
    font-size: 3rem;
    text-align: center;
}

#dashboard_slider_wrapper.no_edit_mode_true .parcelbox_image{
	  transition: margin-top 1s;
}
/* Width Animation */
#dashboard_slider_wrapper.no_edit_mode_false .parcelbox_image img,
#dashboard_slider_wrapper.no_edit_mode_false > div > div > div > img{
 width: 120px;
 transition: width 1s, margin-top 1s;
}

/* Einheitliche JUMP Animation */
#dashboard_slider_wrapper.no_edit_mode_false .parcelbox_image,
#dashboard_slider_wrapper.no_edit_mode_false > div > div > div{

  transition: margin-top 1s;
 
  animation-name: jump;
  animation-duration: 1s;
  animation-timing-function: ease;
  animation-iteration-count: infinite;
  animation-direction: normal;
  animation-fill-mode: none;
}



@keyframes jump {
  0%{
	transform: translateY(-2px);
  }
  50%{
	transform: translateY(2px);
  }
  100%{
	transform: translateY(-2px);
  }
}

/* Animation zurueck zur normal Darstellung */
#dashboard_slider_wrapper.no_edit_mode_true > div > div > div > img {
 width: 125px;
 transition: width 1s, margin-top 1s;
}

.low_battery_btn a{
 background-color: #970000!important;
 font-size: 0.7rem;
 width: 123px;
}

.edit_a_pk{
  /*margin: 0 0 0 6px; */
  position: absolute;
  bottom: 153px;
  width: 102px;
  left: 14px;
  animation: none!important;
  opacity: 1;
  transition: opacity 0.8s!important;
}

/* PK Anpassen - Button DESIGN */
.edit_a_pk a{
    background-color: #795548!important;
    border-radius: 5px!important;
    text-transform: none!important;
    font-size: 12px;
    font-family: Verdana;
    font-weight: 500;
    height: 36px;
    line-height: 35px;
}

.design_a_pk {
 margin: 0 0 0 36px;
 position: absolute;
 bottom: 71px;
 width: 50px;
 animation: none!important;
 opacity: 1;
 transition: opacity 0.8s!important;
}

/* PK Anpassen - Button DESIGN */
.design_a_pk a{
 background-color: #607d8b!important;
 border-radius: 5px!important;
 text-transform: none!important;
 font-size: 14px;
 font-family: Verdana;
 font-weight: 500;
 height: 36px;
 line-height: 35px;
}

.design_a_pk a{
 color: #000;
}

.dashboard_parcelbox{
    display: inline-block;
    width: 120px;
    padding: 5px;
    height: auto;
}

/* unter Bild Hintergrundfarbe*/
#mainView_Icons_background{
    background-color: #58844f;
    height: 100%;
    position: absolute;
    width: 100%;
    top: 0%;
}


/* Checkbox-Buttons */
#menu_icon_wrapper input[type="checkbox"] {
  position: relative;
  display: inline-block;
  height: 45px;
  width: 45px;
  background: #428abb;
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  border-radius: 50%;
  margin-bottom: 4px;
  margin-top: 1px;
}

.center input[type="checkbox"]:after { 
    content: '';
    font-size: 2em;
    text-align: center;
    line-height: 65px;
    color: #555555;
    position: absolute;
    margin: auto auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    display: block;
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #ffffff;
    transition: all 0.3s ease-out;
 }

.center input[type="checkbox"]:before { 
    position: absolute;
    margin: auto auto;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    content: '';
    display: block;
    border: 4px solid #ffffff;
    border-radius: 50%;
    transition: all 0.1s ease-in;
}

.center input[type="checkbox"]:hover:before {
  height: 30px;
  width: 30px;
}

.center input[type="checkbox"]:checked:before {
  height: 100%;
  width: 100%;
  background: #13132ca3;
  border: none;
  border-radius: 10px;
}

.center input[type="checkbox"]:focus {
  outline: none;
}

.center input[type="checkbox"].a:after {
    width: 45px;
    height: 45px;
    content: " ";
    background-image: url(/images/reload.svg);
    position: absolute;
    left: 0px;
    top: 0px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 70%;
} 
.center input[type="checkbox"].a:checked:after {
    width: 30px;
    height: 30px;
}

.center input[type="checkbox"]:checked:after { content: ' '; }

.dockicon a i{
	font-size: 3.0rem;
 color: white;
 padding-bottom: 8px;
}

.menu_icon_description {
 font-size: 1rem;
 text-align: center;
}

.parcelbox_caption, .caption_editable{
 width: 120px;
 border: 0px solid #363b3f;
 transition: width 1s, border 1s;
}

.caption_editable{
 width: 100%;
 transition: width 1s;
}

.blink {
  font-weight: 100;
  -webkit-animation: 1s blink step-end infinite;
  -moz-animation: 1s blink step-end infinite;
  -ms-animation: 1s blink step-end infinite;
  -o-animation: 1s blink step-end infinite;
  animation: 1s blink step-end infinite;
}

@keyframes blink{from,to{color:transparent}50%{color:#fff}}
@-moz-keyframes blink{from,to{color:transparent}50%{color:#fff}}
@-webkit-keyframes blink{from,to{color:transparent}50%{color:#fff}}
@-ms-keyframes blink{from,to{color:transparent}50%{color:#fff}}
@-o-keyframes blink{from,to{color:transparent}50%{color:#fff}}

.blink.black {
  font-weight: 100;
  -webkit-animation: 1s blinkblack step-end infinite;
  -moz-animation: 1s blinkblack step-end infinite;
  -ms-animation: 1s blinkblack step-end infinite;
  -o-animation: 1s blinkblack step-end infinite;
  animation: 1s blinkblack step-end infinite;
}

@keyframes blinkblack{from,to{color:transparent}50%{color:#000}}
@-moz-keyframes blinkblack{from,to{color:transparent}50%{color:#000}}
@-webkit-keyframes blinkblack{from,to{color:transparent}50%{color:#000}}
@-ms-keyframes blinkblack{from,to{color:transparent}50%{color:#000}}
@-o-keyframes blinkblack{from,to{color:transparent}50%{color:#000}}


blink black

/* Bearbeitungsmodus */
#dashboard_slider_wrapper.no_edit_mode_false .parcelbox_caption{
  width: 105px;
  transition: width 1s, margin-top 1s;
}

#dashboard_slider_wrapper.no_edit_mode_false  a.caption_editable > p{
  border: 1px solid #363b3f;
  transition: border 1s, b;
}


.parcelbox_caption p{
 height: 22px;
 white-space: normal;
 text-align: center;
 line-height: 20px;
 margin: 2px 0;
 background: #1e1e1ea3;
 color: white;
 border-radius: 10px;
 padding: 2px 0px 0px 0px;
 width: 100%;
 transition: width 1s, background-color 1s;
}

.empty_button > a {
	position: absolute;
 width: 120px;
}

.deliverystop > a{
 position: absolute;
 width: 120px;
 font-size: 13px;
 overflow: inherit;
 line-height: 12px;
 padding: 7px 0px 0px 0px;
 text-transform: unset;
}

/* Offline Bar */
div#offline_bar {
 margin: 0;
 padding: 3px;
 background-color: #ff9800;
 text-align: center;
}

/* Parcelbox-Models */
#beschriftung_parcelbox{
 background: url(/images/background.svg);
 width: 80%;
 height: 115px;
 margin: 0 auto;
 padding-top: 15px;
}

.vorschau.parcelbox_caption{
 min-height: 24px;
 margin-bottom: 5px;
}

.modeldesigns {
    background-color: white;
    padding: 10px 0;
    margin: 5px 0;
}

.modeldesigns.titleheader{
    margin: 0 0;
}

.model_image, .model_selection > .header{
 text-align: center;
}
 

.modeldesigns.titleheader > div{
  width: 100%;
  text-align: center;
  font-weight: 600;
}

.row.modeldesigns > .col .modeldiv {
 text-align: center;
 margin: 0 auto;
}

.parcelbox_abgeschnitten{
 width: 100%;
 overflow: hidden;
 height: 85px;
}

.parcelbox_abgeschnitten > div{
 margin: 0 auto;
 width: 100px;
}

.modeldesigns .modeldiv .icon-radio {
 margin: 0 auto;
 margin-bottom: 5px;
}


.no_edit_mode_true .edit_a_pk{
 opacity: 0;
 transition: ease opacity 0.3s!important;
 display: none; /* Sonst kann man klicken */
}
.no_edit_mode_true .design_a_pk{
 opacity: 0;
 transition: ease opacity 0.3s!important;
 display: none; /* Sonst kann man klicken */
}

.no_edit_mode_true .button_delete_x{
 opacity: 0;
 height: 0;
 overflow: hidden;
 transition: opacity 0s!important;
}

.button_delete_x{
 position: absolute;
 height: auto;
 opacity: 1;
 transition: opacity 700ms!important;
 transition-delay: 400ms!important;
}

#dashboard_slider_wrapper .button_delete_x{
 bottom: 256px;
 left: 102px;
}

.backdoor_tab .button_delete_x{
 top: -15px;
 right: -8px;
}

.codemanager_box .button_delete_x{
 top: -15px;
 right: -8px;
}

.sharebox .button_delete_x{
 top: -15px;
 right: -8px;
}

.timeline .button_delete_x{
    top: -2%;
    right: -2%;
    opacity: 0.8;
}

.del_bin{
    color: black;
    font-size: 1.3rem!important;
    padding-top: 6px;
}

.button_delete_x.mail_adress{
    top: -15px;
    right: -8px;
}

.button_delete_x a{
    color: #272727;
    font-family: Verdana;
    border: solid 2px #4c4c4c;
    border-radius: 50%;
    padding: 0px 4px 4px 4px;
    line-height: 15px;
    font-weight: 400;
    font-size: 1.1rem;
    cursor: pointer;
    background-color: #9f9f9f;
    box-shadow: #00000057 0px 4px 15px 0px;
}

.no_edit_mode_true .dashboard_parcelbox.addnew{
  width: 0px;
}

.padding_right{
  padding-right: 15px;
}

.padding_left{
  padding-left: 15px;
}

.mediaoffset_left{
  padding-left: 58px;
}

.no_padding{
 padding: 0px!important;
}

.no_padding_right{
 padding-right: 0px!important;
}

.no_padding_left{
 padding-left: 0px!important;
}

.no_padding_left_2nth{
 padding-left: 0px!important;
}

.no_padding_left_2nth > div{
 padding-left: 0px!important;
}

.no_bottom{
  margin-bottom: 0px!important;
  padding-bottom: 0px!important;
}

.less_bottom{
	margin-bottom: 10px!important;
}

.much_bottom{
 margin-bottom: 15px;
}

.less_top{
	margin-top: 0px!important;
}

.little_top{
 margin-top: 5px!important;
}

.lesser_top{
	margin-top: 10px!important;
}

.no_margin {
	margin: 0px!important;
}

.much_top{
 margin-top: 20px;
}

.color_black{
 color: #000;
}

.color_grey{
 color: #0000008a;
}

.button_break{
 height: auto!important;
 white-space: initial; 
}

.no_background,
.no_background > ul{
  background-color: transparent!important;
}

.icon_next_text{
 display: inline!important;
}

.color-nicegreen {
  --f7-theme-color: #4caf50;
  --f7-theme-color-rgb: 76, 175, 80;
  --f7-theme-color-shade: #43a047;
  --f7-theme-color-tint: #4caf50;
}

/* versteckte Navigationsbar Android  */

#main-view.hidden_navbar > div.home .navbar-bg,
#main-view.hidden_navbar > div.home .navbar-bg:before{
  background: none!important;
}

#main-view.hidden_navbar > div.home .page-content{
  padding-top: 0px;
}

#main-view.hidden_navbar > div.home .navbar-inner,
#main-view.hidden_navbar > div.home .navbar-inner i.icon{
  color:white;
}



.no_edit_mode_false .deliverybutton,
.no_edit_mode_false .indicatorswitch,
.no_edit_mode_false .questionmark{
    opacity: 0; 
    height: 0;
    overflow: hidden;
}

.no_edit_mode_true .deliverybutton,
.no_edit_mode_true .indicatorswitch,
.no_edit_mode_true .questionmark{
    opacity: 1;
    height: auto;
    transition: opacity 600ms 500ms ease-out;
}

.dashboard_parcelbox.Paketkasten{
    position: relative!important;
}

.img_overlay,
.deliverybutton,
.highlights,
.opendoortoolong,
.deliverystop,
.shelf_label,
.shelf_reserved,
.shelf_codes,
.ps_indicatorswitch{
    position: absolute!important;
}

.highlights > canvas{
 background-color: #efefefa1;
}


.highlights.middle_upper_shelf{
  left: 14px;
  bottom: 146px;
}
.highlights.middle_bottom_shelf{
  left: 14px;
  bottom: 25px;
}

.highlights.upper_shelf{
  left: 14px;
  bottom: 201px;
}
.highlights.middle_shelf{
  left: 14px;
  bottom: 144px;
}
.highlights.bottom_shelf{
  left: 14px;
  bottom: 24px;
}

.PB_3F_creative .highlights.upper_shelf{
  left: 14px;
  bottom: 226px;
}

.PB_3F_creative .highlights.middle_shelf,
.PB_2F_creative .highlights.upper_shelf{
  left: 14px;
  bottom: 170px;
}

.PB_3F_creative .highlights.bottom_shelf,
.PB_2F_creative .highlights.bottom_shelf,
.PB_1F_creative .highlights.bottom_shelf{
  left: 14px;
  bottom: 7px;
}

.Box_stand_2F .highlights.upper_shelf{
  left: 14px;
  bottom: 144px;
}

.Box_stand_2F .highlights.bottom_shelf,
.Box_stand_1F .highlights.bottom_shelf{
  left: 14px;
  bottom: 62px;
}


#dashboard_slider_wrapper.no_edit_mode_false .img_overlay.letterflap{
 top: 125px;
}

.img_overlay.letterflap{
  position: absolute!important;
  width: 125px;
  height: 35px;  /* 20px niedriger */
  overflow: hidden;
}

.img_overlay.letterflap > div{
 height: auto;
 width: 100%;
 margin-top: -95px;
 position: relative;
}

.img_overlay.letterflap.space_1{ bottom: 229px; }
.img_overlay.letterflap.space_2{ bottom: 212px; }
.img_overlay.letterflap.space_3{ bottom: 194px; }

.Drehkasten .img_overlay.letterflap.space_1{ bottom: 159px; }
.Drehkasten .img_overlay.letterflap.space_2{ bottom: 141px; }
.Drehkasten .img_overlay.letterflap.space_3{ bottom: 101px; }

.Paketfaecher_2.PK_2F_lo_schindel .img_overlay.letterflap.space_4,
.Paketfaecher_2.PK_2F_lo_einbau .img_overlay.letterflap.space_4,
.Paketfaecher_2.PK_2F_lo_classic .img_overlay.letterflap.space_4,
.Paketfaecher_2.PK_2F_lo_nature .img_overlay.letterflap.space_4,
.Paketfaecher_2.PK_2F_lo_creative .img_overlay.letterflap.space_4{
 bottom: 176px;
}
.Paketfaecher_2.PK_2F_lo_schindel .img_overlay.letterflap.space_5,
.Paketfaecher_2.PK_2F_lo_einbau .img_overlay.letterflap.space_5,
.Paketfaecher_2.PK_2F_lo_classic .img_overlay.letterflap.space_5,
.Paketfaecher_2.PK_2F_lo_nature .img_overlay.letterflap.space_5,
.Paketfaecher_2.PK_2F_lo_creative .img_overlay.letterflap.space_5{
 bottom: 159px;
}
.Paketfaecher_2.PK_2F_lo_schindel .img_overlay.letterflap.space_6,
.Paketfaecher_2.PK_2F_lo_einbau .img_overlay.letterflap.space_6,
.Paketfaecher_2.PK_2F_lo_classic .img_overlay.letterflap.space_6,
.Paketfaecher_2.PK_2F_lo_nature .img_overlay.letterflap.space_6,
.Paketfaecher_2.PK_2F_lo_creative .img_overlay.letterflap.space_6{
 bottom: 141px;
}
.Paketfaecher_2.PK_2F_lo_schindel .img_overlay.letterflap.space_7,
.Paketfaecher_2.PK_2F_lo_einbau .img_overlay.letterflap.space_7,
.Paketfaecher_2.PK_2F_lo_classic .img_overlay.letterflap.space_7,
.Paketfaecher_2.PK_2F_lo_nature .img_overlay.letterflap.space_7,
.Paketfaecher_2.PK_2F_lo_creative .img_overlay.letterflap.space_7{
 bottom: 101px;
}

.img_overlay.letterflap.space_4{ bottom: 159px; }
.img_overlay.letterflap.space_5{ bottom: 141px; }
.img_overlay.letterflap.space_6{ bottom: 101px; }
.img_overlay.letterflap.space_7{ bottom: 84px; }
.img_overlay.letterflap.space_8{ bottom: 67px; }


/*Todo Start */
.Paketfaecher.PB_3F_creative .img_overlay.letterflap.space_1{ bottom: 238px; }
.Paketfaecher.PB_3F_creative .img_overlay.letterflap.space_2{ bottom: 223px; }
.Paketfaecher.PB_3F_creative .img_overlay.letterflap.space_3{ bottom: 182px; }
.Paketfaecher.PB_3F_creative .img_overlay.letterflap.space_4{ bottom: 167px; }
.Paketfaecher.PB_3F_creative .img_overlay.letterflap.space_5{ bottom: 118px; }
.Paketfaecher.PB_3F_creative .img_overlay.letterflap.space_6{ bottom: 80px; }

.Paketfaecher_2.PB_2F_creative .img_overlay.letterflap.space_1{ bottom: 182px; }
.Paketfaecher_2.PB_2F_creative .img_overlay.letterflap.space_2{ bottom: 167px; }
.Paketfaecher_2.PB_2F_creative .img_overlay.letterflap.space_3{ bottom: 118px; }
.Paketfaecher_2.PB_2F_creative .img_overlay.letterflap.space_4{ bottom: 80px; }
/*Todo Ende */

.Paketfach.Box_stand_1F .img_overlay.letterflap.space_1{ bottom: 179px; }
.Paketfach.Box_stand_1F .img_overlay.letterflap.space_2{ bottom: 108px; }

.Paketfach.PB_1F_creative .img_overlay.letterflap.space_1{ bottom: 118px; }
.Paketfach.PB_1F_creative .img_overlay.letterflap.space_2{ bottom: 80px; }


.Box_stand_2F .img_overlay.letterflap.space_1{ bottom: 177px; }
.Box_stand_2F .img_overlay.letterflap.space_2{ bottom: 161px; }
.Box_stand_2F .img_overlay.letterflap.space_3{ bottom: 145px; }
.Box_stand_2F .img_overlay.letterflap.space_4{ bottom: 100px; }
.Box_stand_2F .img_overlay.letterflap.space_5{ bottom: 84px; }
.Box_stand_2F .img_overlay.letterflap.space_6{ bottom: 68px; }

.letterbox .img_overlay.letterflap{
  display: none;
}

.img_overlay.middle-handle{
  position: absolute!important;
  bottom: 5px;
}

.img_overlay.opendoor{
  z-index: 1;
  left: -45px;
  bottom: 5px;
}



/* Position über Paketkasten */
.img_overlay.opendoortoolong{
  z-index: 1;
  left: 0px;
  bottom: 315px;
}

.img_overlay.opendoortoolong .parcelbox_caption{
 width: 100px;
}

.img_overlay.technik_inside{
 z-index: 1;
 left: 23px;
 bottom: 299px;
}

.technik_inside > a > img{
 width: 55px!important;
}

.img_overlay.lightbulb,
.img_overlay.lightbulb{
 z-index: 80;
 left: 84px;
 bottom: 217px;
}
.button_element .img_overlay.lightbulb{
 left: 44px;
 bottom: 133px;
}

.img_overlay.lightbulb > .click_area{
 z-index: 9;
 height: 33px;
 width: 31px;
 position: relative;
 left: -44px;
 top: -35px;
}

.button_element .img_overlay.lightbulb > .click_area{
 left: 0px;
 top: 1px;
 z-index: 3;
 position: relative;
}

/* Position und Farbe vom Ausrufezeichen */
.img_overlay.opendoortoolong i{
  position: relative;
  color: red;
}

/* die normale Note nach rechts verschieben */
.img_overlay.opendoortoolong .parcelbox_caption{
  margin-left: 0px;
}

/* Die normale Note färben */
.img_overlay.opendoortoolong .parcelbox_caption p{
  background: #ff9900;
  color: #000;
  font-size: 0.7rem;
}

.no_edit_mode_false .parcelbox_caption .caption_editable p{
 box-shadow: 1px 1px 2px 0px rgb(80 80 80 / 50%);
 background-color: #505050;
}

.text_button{
    padding: 0px 5px;
    margin-top: 10px;
    border-radius: 5px;
}

.text_button.grey{
  background-color: #dedede;
  border: 1px solid #8c8c8c;
  color: #000;
}


.img_overlay.opendoor img{
  width: 225px!important;
}

.deliverybutton > a > div {
 z-index: 30;
 position: relative;
 color: black;
 padding: 3px 8px 1px 8px;
 background-color: orange;
 border-radius: 50%;
 font-weight: 600;
 border: 1px solid #f5b33b;
 box-shadow: #7d5302 2px 2px 5px 0px;
}

.deliverybutton.friend > a > div {
 background-color: #bce60080;
 border: 1px solid #c59e17;
 box-shadow: #3d3e03 2px 2px 5px 0px;
}

.lflap_high_as_image{
 position: absolute!important;
 bottom: 168px;
}

.deliverybutton.letterflap{
 left: 78px;
}

.deliverybutton.upper_shelf{
 bottom: 227px;
 left: 8%;
}

.deliverybutton.middle_shelf{
 bottom: 164px;
 left: 8%;
}

.deliverybutton.bottom_shelf{
 bottom: 76px;
 left: 8%;
}

.letterbox .deliverybutton.upper_shelf{
 bottom: 96px;
 left: 8%;
}

.letterbox .deliverybutton.letterflap{
 bottom: 107px;
 left: 8%;
}



.Paketfaecher_2 .deliverybutton.upper_shelf,
.Paketfaecher .deliverybutton.upper_shelf{
  bottom: 224px;
}

.Paketfaecher .deliverybutton.middle_shelf{
  bottom: 166px;
}

.Paketfaecher_2 .deliverybutton.bottom_shelf{
  bottom: 116px;
}

.Paketfaecher_2.PK_2F_lo_schindel .deliverybutton.upper_shelf,
.Paketfaecher_2.PK_2F_lo_einbau .deliverybutton.upper_shelf,
.Paketfaecher_2.PK_2F_lo_classic .deliverybutton.upper_shelf,
.Paketfaecher_2.PK_2F_lo_nature .deliverybutton.upper_shelf,
.Paketfaecher_2.PK_2F_lo_creative .deliverybutton.upper_shelf{
  bottom: 201px;
}

.Paketfaecher .deliverybutton.bottom_shelf,
.Paketfaecher_2.PK_2F_lo_schindel .deliverybutton.bottom_shelf,
.Paketfaecher_2.PK_2F_lo_einbau .deliverybutton.bottom_shelf,
.Paketfaecher_2.PK_2F_lo_classic .deliverybutton.bottom_shelf,
.Paketfaecher_2.PK_2F_lo_nature .deliverybutton.bottom_shelf,
.Paketfaecher_2.PK_2F_lo_creative .deliverybutton.bottom_shelf{
  bottom: 79px;
}

.PB_3F_creative .deliverybutton.upper_shelf{
    bottom: 248px;
}

.PB_3F_creative .deliverybutton.middle_shelf,
.PB_2F_creative .deliverybutton.upper_shelf{
    bottom: 193px;
}

.PB_3F_creative .deliverybutton.bottom_shelf,
.PB_2F_creative .deliverybutton.bottom_shelf,
.PB_1F_creative .deliverybutton.bottom_shelf{
  bottom: 96px;
}

.Box_stand_2F .deliverybutton.upper_shelf{
  bottom: 177px;
}

.Box_stand_1F .deliverybutton.bottom_shelf{
  bottom: 142px;
}

.Box_stand_2F .deliverybutton.bottom_shelf{
  bottom: 100px;
}




/* LED Stripe via CSS ausblenden */
.img_overlay.led_stripe img{
 transition: transform 2s, opacity 1s!important;
 opacity: 1;
}

.no_edit_mode_false .img_overlay.led_stripe img{
 transform: translate(0px, 10px);
 transition: transform 2s, opacity 0.4s!important;
 opacity: 0;
}

.img_overlay.led_stripe{
 bottom: 7px;
 left: 4%;
 width: 50px;
}

.img_overlay.led_stripe .click_area{
    height: 25px;
    width: 50px;
    bottom: 253px;
    left: 74%;
}




/*
==============================================
Animation für neue Pakete
==============================================
*/

.deliverybutton{
	animation-name: expandOpen;
	-webkit-animation-name: expandOpen;	

	animation-duration: 1.2s;	
	-webkit-animation-duration: 1.2s;

	animation-timing-function: ease-out;	
	-webkit-animation-timing-function: ease-out;	

	visibility: visible !important;	
}

@keyframes expandOpen {
	0% {
		transform: scale(1.8);		
	}
	50% {
		transform: scale(0.95);
	}	
	80% {
		transform: scale(1.05);
	}
	90% {
		transform: scale(0.98);
	}	
	100% {
		transform: scale(1);
	}			
}

@-webkit-keyframes expandOpen {
	0% {
		-webkit-transform: scale(1.8);		
	}
	50% {
		-webkit-transform: scale(0.95);
	}	
	80% {
		-webkit-transform: scale(1.05);
	}
	90% {
		-webkit-transform: scale(0.98);
	}	
	100% {
		-webkit-transform: scale(1);
	}					
}

/* Türindikator */
/* der mypaketkastenswitch - tuerindikatorswitcher */
.myswitch {
    position: relative; width: 10px;
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
}
.myswitch input {
    display: none;
}
.myswitch-label {
    display: block;
    overflow: hidden;
    cursor: pointer;
    height: 22px;
    padding: 0;
    line-height: 24px;
    border: 0px solid #E3E3E3;
    border-radius: 22px;
    background-color: #f32a12;
    transition: background-color 300ms ease-in;
    box-shadow: inset -1px 1px 0 0 #313131;
}
.myswitch-label:before {
    content: "";
    display: block;
    width: 8px;
    margin: 0px;
    background: #d6d6d6;
    position: absolute;
    height: 8px;
    top: 13px;
    transition: top 300ms ease-in;
    bottom: 0;
    right: 1px;
    border-radius: 50%;
    border: solid 0.01rem #dadada;
}
.myswitch input:checked + .myswitch-label {
    background-color: #2D9E2B;
    transition: background-color 1s;
    height: 22px;
    box-shadow: inset -1px 1px 0 0 black;
}
.myswitch input:checked + .myswitch-label .mydoorindicatorswitch-inner {
   margin-left: 0;
}
.myswitch input:checked + .myswitch-label:before {
    border-color: #2D9E2B;
    right: 1px;
    top: 1px;
    transition: top 1s;
    border: solid 0.01rem #dadada;
}

.indicatorswitch{
  left: 100px;
  z-index: 30;
}

.elock{
  left: 42px;
  z-index: 30;
}

.elock > div{
 width: 25px;
 margin: 0 auto;
}

.indicatorswitch.elock1{
	bottom: 226px;
}
.elock.elock1{
 bottom: 223px;
}

.indicatorswitch.elock2{
	bottom: 166px;
}
.elock.elock2{
 bottom: 155px;
}

.indicatorswitch.elock3{
  bottom: 80px;
}
.elock.elock3{
  bottom: 78px;
}

.Paketfaecher_2 .indicatorswitch.elock1,
.Paketfaecher .indicatorswitch.elock1{
  bottom: 224px;
}

.Paketfaecher .indicatorswitch.elock2{
  bottom: 166px;
}

.PK_2F_lu_schindel .indicatorswitch.elock2,
.PK_2F_lu_einbau .indicatorswitch.elock2,
.PK_2F_lu_classic .indicatorswitch.elock2,
.PK_2F_lu_nature .indicatorswitch.elock2,
.PK_2F_lu_creative .indicatorswitch.elock2{
  bottom: 116px;
}

.Paketfaecher_2 .indicatorswitch.elock3{
  bottom: 116px;
}

.Paketfaecher_2.PK_2F_lo_schindel .indicatorswitch.elock1,
.Paketfaecher_2.PK_2F_lo_einbau .indicatorswitch.elock1,
.Paketfaecher_2.PK_2F_lo_classic .indicatorswitch.elock1,
.Paketfaecher_2.PK_2F_lo_nature .indicatorswitch.elock1,
.Paketfaecher_2.PK_2F_lo_creative .indicatorswitch.elock1{
  bottom: 201px;
}

.Paketfaecher .indicatorswitch.elock3,
.Paketfaecher_2.PK_2F_lo_schindel .indicatorswitch.elock3,
.Paketfaecher_2.PK_2F_lo_einbau .indicatorswitch.elock3,
.Paketfaecher_2.PK_2F_lo_classic .indicatorswitch.elock3,
.Paketfaecher_2.PK_2F_lo_nature .indicatorswitch.elock3,
.Paketfaecher_2.PK_2F_lo_creative .indicatorswitch.elock3{
  bottom: 79px;
}

.PB_3F_creative .indicatorswitch.elock1{
    bottom: 248px;
}

.PB_3F_creative .indicatorswitch.elock2,
.PB_2F_creative .indicatorswitch.elock1{
    bottom: 193px;
}

.PB_3F_creative .indicatorswitch.elock3,
.PB_2F_creative .indicatorswitch.elock3,
.PB_1F_creative .indicatorswitch.elock3{
  bottom: 96px;
}

.Box_stand_2F .indicatorswitch.elock1{
  bottom: 177px;
}

.Box_stand_1F .indicatorswitch.elock3{
  bottom: 142px;
}

.Box_stand_2F .indicatorswitch.elock3{
  bottom: 100px;
}


.Paketfaecher_2 .elock.elock1,
.Paketfaecher .elock.elock1{
  bottom: 224px;
}

.Paketfaecher .elock.elock2{
  bottom: 156px;
}

.Paketfaecher_2 .elock.elock3{
  bottom: 116px;
}

.Paketfaecher_2.PK_2F_lo_schindel .elock.elock1,
.Paketfaecher_2.PK_2F_lo_einbau .elock.elock1,
.Paketfaecher_2.PK_2F_lo_classic .elock.elock1,
.Paketfaecher_2.PK_2F_lo_nature .elock.elock1,
.Paketfaecher_2.PK_2F_lo_creative .elock.elock1{
  bottom: 201px;
}

.Paketfaecher .elock.elock3,
.Paketfaecher_2.PK_2F_lo_schindel .elock.elock3,
.Paketfaecher_2.PK_2F_lo_einbau .elock.elock3,
.Paketfaecher_2.PK_2F_lo_classic .elock.elock3,
.Paketfaecher_2.PK_2F_lo_nature .elock.elock3,
.Paketfaecher_2.PK_2F_lo_creative .elock.elock3{
  bottom: 79px;
}

.Paketfaecher.PB_3F_creative .shelf_codes.upper_door{
 bottom: 259px;
}

.Paketfaecher.PB_2F_creative .shelf_codes.upper_door,
.Paketfaecher.PB_3F_creative .shelf_codes.middle_door{
 bottom: 203px;
}

.Paketfaecher.PB_1F_creative .shelf_codes.bottom_door,
.Paketfaecher.PB_2F_creative .shelf_codes.bottom_door,
.Paketfaecher.PB_3F_creative .shelf_codes.bottom_door{
 bottom: 143px;
}

.Paketfaecher.PB_1F_creative .shelf_codes > div,
.Paketfaecher.PB_2F_creative .shelf_codes > div,
.Paketfaecher.PB_3F_creative .shelf_codes > div{
 border-color: #000;
 color: #000;
}



.PB_3F_creative .elock.elock1{
 bottom: 241px;
}

.PB_3F_creative .elock.elock2,
.PB_2F_creative .elock.elock1{
 bottom: 185px;
}

.PB_3F_creative .elock.elock3,
.PB_2F_creative .elock.elock3,
.PB_1F_creative .elock.elock3{
  bottom: 96px;
}

.Box_stand_2F .elock.elock1{
 bottom: 177px;
}

.Box_stand_1F .elock.elock3{
  bottom: 142px;
}

.Box_stand_2F .elock.elock3{
  bottom: 100px;
}

.tuer .elock.elock1{
 bottom: 138px;
}

.gardendoor .elock.elock1{
 bottom: 100px;
}

.tor .elock.elock1{
 bottom: 145px;
}

.garage .elock.elock1{
 bottom: 95px;
}

.schiebetor .elock.elock1 {
    bottom: 87px;
    left: 69%;
}

.shelf_codes > div {
    z-index: 35;
    line-height: 12px;
    font-weight: 700;
    font-size: 0.73rem;
    padding: 1px 2px 0px 2px;
    width: auto;
}

.shelf_codes {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 95px;
    height: 20px;
}

.shelf_codes.upper_door{
    bottom: 248px;
    left: 16%;
}
.shelf_codes.upper_door > div{
    color: #fff;
    border-radius: 5px;
    border-top: 2px solid #FFF;
    border-right: 2px solid #FFF;
    border-left: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
}

.shelf_codes.middle_door{
    bottom: 179px;
    left: 16%;
}
.shelf_codes.middle_door > div{
    color: #000000d1;
    border-radius: 5px;
    border-top: 2px solid #393939;
    border-right: 2px solid #393939;
    border-left: 2px solid #393939;
    border-bottom: 2px solid #393939;
}

.shelf_codes.bottom_door{
    bottom: 120px;
    left: 16%;
}
.shelf_codes.bottom_door > div{
    color: #fff;
    border-radius: 5px;
    border-top: 2px solid #FFF;
    border-right: 3px solid #FFF;
    border-left: 3px solid #FFF;
    border-bottom: 2px solid #FFF;
}

.shelf_reserved a > div,
.shelf_reserved > div{
    z-index: 1;
    color: #fff;
    background-color: #9b0000;
    font-weight: 600;
    font-size: 0.8rem;
    padding: 0px 4px;
    border-radius: 0 0 4px 0;
}

.shelf_reserved.upper_door{
    bottom: 209px;
    left: 76%;
}
.shelf_reserved.middle_door{
    bottom: 175px;
    left: 76%;
}
.shelf_reserved.bottom_door{
    bottom: 34px;
    left: 76%;
}

.Paketfaecher_2 .shelf_reserved.upper_door,
.Paketfaecher .shelf_reserved.upper_door{
  bottom: 209px;
}

.Paketfaecher .shelf_reserved.middle_door{
  bottom: 152px;
}

.Paketfaecher_2 .shelf_reserved.elock3{
  bottom: 116px;
}

.Paketfaecher_2.PK_2F_lo_schindel .shelf_reserved.upper_door,
.Paketfaecher_2.PK_2F_lo_einbau .shelf_reserved.upper_door,
.Paketfaecher_2.PK_2F_lo_classic .shelf_reserved.upper_door,
.Paketfaecher_2.PK_2F_lo_nature .shelf_reserved.upper_door,
.Paketfaecher_2.PK_2F_lo_creative .shelf_reserved.upper_door{
  bottom: 152px;
}

.Paketfaecher .shelf_reserved.elock3,
.Paketfaecher_2.PK_2F_lo_schindel .shelf_reserved.bottom_door,
.Paketfaecher_2.PK_2F_lo_einbau .shelf_reserved.bottom_door,
.Paketfaecher_2.PK_2F_lo_classic .shelf_reserved.bottom_door,
.Paketfaecher_2.PK_2F_lo_nature .shelf_reserved.bottom_door,
.Paketfaecher_2.PK_2F_lo_creative .shelf_reserved.bottom_door{
  bottom: 34px;
}

.PB_3F_creative .shelf_reserved.upper_door{
 bottom: 241px;
 left: 75%;
}

.PB_3F_creative .shelf_reserved.middle_door,
.PB_2F_creative .shelf_reserved.upper_door{
 bottom: 185px;
 left: 75%;
}

.PB_3F_creative .shelf_reserved.bottom_door,
.PB_2F_creative .shelf_reserved.bottom_door,
.PB_1F_creative .shelf_reserved.bottom_door{
  bottom: 12px;
  left: 75%;
}

.Box_stand_2F .shelf_reserved.upper_door{
 bottom: 156px;
}

.Box_stand_1F .shelf_reserved.bottom_door,
.Box_stand_2F .shelf_reserved.bottom_door{
  bottom: 79px;
}

.shelf_label{
  z-index: 30;
  position: relative;
  color: #8e8e8e;
  font-weight: 600;
  font-size: 1.1rem;
}
.shelf_label.upper_door{
    bottom: 243px;
    left: 76%;
}
.shelf_label.middle_door{
    bottom: 178px;
    left: 76%;
}
.shelf_label.bottom_door{
    bottom:120px;
    left: 76%;
}

.Paketfaecher .shelf_label.upper_door,
.Paketfaecher_2 .shelf_label.upper_door{
  bottom: 243px;
  left: 76%;
}

.Paketfaecher_2 .shelf_label.bottom_door{
  bottom: 178px;
  left: 76%;
}

.Box_stand_2F .shelf_label.bottom_door,
.Box_stand_1F .shelf_label.upper_door,
.Paketfaecher_2.PK_2F_lo_schindel .shelf_label.bottom_door,
.Paketfaecher_2.PK_2F_lo_einbau .shelf_label.bottom_door,
.Paketfaecher_2.PK_2F_lo_classic .shelf_label.bottom_door,
.Paketfaecher_2.PK_2F_lo_nature .shelf_label.bottom_door,
.Paketfaecher_2.PK_2F_lo_creative .shelf_label.bottom_door{
   bottom: 121px;
   left: 76%;
}

.PB_2F_creative .shelf_label.upper_door,
.Box_stand_2F .shelf_label.upper_door{
    bottom: 195px;
    left: 76%;
}

.Paketfach.Box_stand_1F .shelf_label.bottom_door,
.PB_3F_creative .shelf_label.middle_door{
  bottom: 198px;
  left: 76%;
}

.Paketfach.PB_1F_creative .shelf_label.bottom_door,
.PB_2F_creative .shelf_label.bottom_door,
.PB_3F_creative .shelf_label.bottom_door{
    bottom: 142px;
    left: 76%;
}

.PB_3F_creative .shelf_label.upper_door{
   bottom: 253px;
   left: 76%;
}

.Paketfach.PB_1F_creative .shelf_label.bottom_door{
  bottom: 139px;
}


.ps_indicatorswitch > div{
  z-index: 30;
  position: relative;
  color: black;
  font-weight: 600;
  font-size: 1.1rem;
  border: 0.3px solid #4d4d4d;
  border-radius: 50%;
}

.ps_indicatorswitch > .ps_indi.red > div{
 border-radius: 50%;
 background-color: red;
 height: 7px;
 width: 7px;
 border: 0.4px solid #bfbfbf;
}
.ps_indicatorswitch > .ps_indi.green > div{
  border-radius: 50%;
  background-color: green;
  height: 7px;
  width: 7px;
  border: 0.4px solid #bfbfbf;
}

.Paketfaecher_2 .ps_indicatorswitch.upper_door,
.Paketfaecher .ps_indicatorswitch.upper_door{
  bottom: 250px;
  left: 25px;
}

.Paketfaecher_2 .ps_indicatorswitch.bottom_door,
.Paketfaecher .ps_indicatorswitch.middle_door{
  bottom: 188px;
  left: 25px;
}

.Paketfaecher .ps_indicatorswitch.bottom_door,
.Paketfaecher_2.PK_2F_lo_schindel .ps_indicatorswitch.bottom_door,
.Paketfaecher_2.PK_2F_lo_einbau .ps_indicatorswitch.bottom_door,
.Paketfaecher_2.PK_2F_lo_classic .ps_indicatorswitch.bottom_door,
.Paketfaecher_2.PK_2F_lo_nature .ps_indicatorswitch.bottom_door,
.Paketfaecher_2.PK_2F_lo_creative .ps_indicatorswitch.bottom_door{
  bottom: 130px;
  left: 25px;
}


.PB_3F_creative .ps_indicatorswitch.upper_door{
    bottom: 265px;
    left: 26px;
}

.PB_3F_creative .ps_indicatorswitch.middle_door,
.PB_2F_creative .ps_indicatorswitch.upper_door{
    bottom: 209px;
    left: 26px;
}

.PB_3F_creative .ps_indicatorswitch.bottom_door,
.PB_2F_creative .ps_indicatorswitch.bottom_door,
.PB_1F_creative .ps_indicatorswitch.bottom_door{
  bottom: 153px;
  left: 26px;
}

.Box_stand_2F .ps_indicatorswitch.upper_door,
.Box_stand_1F .ps_indicatorswitch.bottom_door{
  bottom: 208px;
  left: 26px;
}

.Box_stand_2F .ps_indicatorswitch.bottom_door{
  bottom: 131px;
  left: 26px;
}



.questionmark{
  overflow: visible;
  pointer-events: none;
  position: absolute;
  top: 9px;
  left: 2.5px;
  font-size: 0.6rem;
}

.elock.elockicons{
 width: 69px;
 display: flex;
 left: 34px;
}

.elock .elockicon > div{
  padding: 2px;
  font-size: 5px;
  background-color: #757575;
  border-radius: 5px;
  color: black;
}

.elock .elockicon > div > i.icon{
  font-size: 17px;
  color: #fff;
}

.elock .elockicon > div.off{
 background-color: #cf230e;
}

.choose_shelf.blue .font_white.button {
    height: 26px;
    line-height: 0;
    padding: 1px;
}

.elock .choose_shelf{
    width: 50px;
    margin-left: 0px;
}

.elock .choose_shelf > div{
    border-radius: 5px;
}

.elock .choose_shelf > div i{
    margin: 0 auto;
}

.elock .choose_shelf.blue > div{
  background-color: #1976d2;
}


.drop-shadow:before,
.drop-shadow:after {
    content:"";
    position:absolute;
    z-index:-2;
}

.no_edit_mode_true .perspective:before {
    left:80px;
    bottom:15px;
    width:50%;
    height:35%;
    max-width:200px;
    max-height:50px;
    -webkit-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
       -moz-box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
	    box-shadow:-80px 0 8px rgba(0, 0, 0, 0.4);
    -webkit-transform:skew(50deg);
       -moz-transform:skew(50deg);
	-ms-transform:skew(50deg);
	 -o-transform:skew(50deg);
	    transform:skew(50deg);
    -webkit-transform-origin:0 100%;
       -moz-transform-origin:0 100%;
	-ms-transform-origin:0 100%;
	 -o-transform-origin:0 100%;
	    transform-origin:0 100%;
  opacity: 1;
  transition: opacity 2s 500ms;
}

.perspective:before {
  opacity: 0;
  transition: opacity 500ms;
}
/* Timeline */
#delivery_timeline .md .checkbox i, .md .icon-checkbox{
  margin: 0 auto;
}

#delivery_timeline label.checkbox{
  text-align: center;
}
.timeline_checkbox_abstand{
  margin-left: 2px;
}
.checkbox-label_pk-name{
  display: inline;
  margin-left: 5px;
}

div.colorchange_element{
  border-radius: 5px;
	width: 80px;
  height: 25px;
  margin-top: 10px;
}
div.colorchange_element:hover{
  background-color: #e4e4e4; 
}

div.colorchange_element .titel{
    position: absolute;
    top: 0px;
    left: 33px;
    font-size: 14px;
    color: black;
    line-height: 27px;
    font-family: Roboto;
    text-transform: initial;
}

.colourbin{
    color: #000;
    padding: 3px 6px 1px 6px;
    font-size: 0.6rem;
    border-radius: 3px;
    height: 15px;
    border: 1px solid #c3c3c3;
}

.text-normalization{
  display: initial;
}

.norm_item_height > div{
  height: 35px;
  padding-bottom: 5px;
}

.timeline-item-time.clock{
   color: #404040;
}

.timeline-item-title.parcelorletter{
	font-size: 1rem;
	padding-top: 5px;
  color: #000;
}

.timeline-item-content{
 min-width: 250px;
 width: 70%;
 max-width: 300px;
}

.timeline-item-content .del_descr{
 font-size: 0.8rem;
}
.timeline-item-content .del_empt_at{
 font-size: 0.7rem;
}

.timeline-item-title.unsure{
 font-size: 1rem;
 padding: 0px 5px 0 5px;
 line-height: 14px;
 color: #000;
 background-color: #ffffffeb;
 border-radius: 5px;
 box-shadow: 1px 1px 2px 0px #8d8d8d;
 border: 1px solid #ebebeb;
 margin-top: 0px;
}

.timeline-item-text.pk_note{
	font-size: 13px;
	color: #757575;
}
.timeline-item-inner{
	min-width: 194px;
}

.timeline{
  padding: 0;
}

.timeline .timeline-item-inner{
  position: relative!important;
}



.unimportant_note {
    color: #9e9e9e;
}

.astro_clock_time{
  padding-top: 2px;
  font-size: 1.2rem;
}

.time_stepper_field{
 background-color: #fff;
 padding: 5px 16px;
}

.clock_stepper_time{
 padding-top: 3px;
}

.Astrorangeslider{
	width: 80%;
  margin: 0 auto;
}

.Astrorangeslider .range-bar-active{
  background: none!important;
}

#note_letters{
  text-align: right;
  color: grey;
}


#login_or_register_field{
 width: 480px;
 margin: 0 auto;
}

.login_bg_wrapper{
 background: #fafafa;
 width: 478px;
 margin: 0 auto;
 padding-top: 20px;
 padding-bottom: 1px;
 border-left: 1px solid grey;
 border-bottom: 1px solid grey;
 border-right: 1px solid grey;
}

.login_bg_wrapper > form{
 margin-top: 0px!important;
}

.ownoptionstabs {
    border-bottom: 1px solid grey;
    border-radius: 5px 5px 0 0;
    text-align: center;
    height: 28px;
    background-color: white;
    width: 100%;
    color: black;
    padding: 21px;
}
.ownoptionstabs > div{
  display: block;
}

.ownoptionstabs:hover {
    background-color: #fbfbfb;
    cursor: pointer;
}

.ownoptionstabs.active{
    background-color: #fafafa;
    border-top: 3px solid #4caf50;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
    border-bottom: 0px;
    padding: 20px;
    border-radius: 10px 10px 0px 0px;
    top: 0px;
    width: 100%;
    font-weight: bold;
}

.no_margin_left{
 margin-left: 0px!important;
}

.margin_left{
 margin-left: 15px;
}


.registration_shortcode{
  font-size: 1.5rem;
  color: #455a64;
  font-weight: bold;
  background-color: #fff;
}


.unlock_slider_abstand{
 height: 115px;
}

.abstand{
  height: 10px;
}

.width_full{
  width: 100%;
}

.input_fullwidth{
  padding: 0px!important;
}

.input_fullwidth > .item-content.item-input{
  width: 100%;
  padding: 0px!important;
}

.icon_height_like_input{
  height: 44px;
  padding: 5px 0 0 0;
}

.sharebox{
  margin-bottom: 15px;
}

.sharebox .card-header{
  background: #607D8B;
}

.Shareslider{
  padding: 5px 0;
}

.Shareslider > div{
  text-align: center;
}

.sharebox .sharecolour input,
.sharebox .sharecolour i.icon,
.sharebox .sharecolour .input-clear-button{
  color: #ffffff;
  font-size: 1.2rem;
}
.sharebox .sharecolour .item-input-wrap:after{
    background-color: white!important;
}

.sharebox .shelf_min_width > span{
  min-width: 95px;
  display: inline-block;
}
.sharebox .shelf_min_width{
  margin: 0 auto;
}

.Shareslider ul > li{
  font-size: 0.6rem;
  /*text-align: left;*/
}

.Shareslider ul > li:first-child{
  font-weight: bold;
  text-align: center;
  font-size: 0.8rem;
}

.less_background > ul{
 background: rgba(255, 255, 255, 0.3)!important;
}

.less_background.list > ul:before,
.less_background.list > ul:after{
 height: 0px!important;
}

.background_grey{
  background-color: #f9f9fa;
}

.bg_darkorange{
  background-color: #b16000;
}

.bg_orange{
  background-color: #ffba68;
}

.date_text input[type="text"]{
  background: #f3f3f3;
  text-align: center;
  border: solid 1px #949494;
  border-width: 0 0 1px 0;
}

.bg_darkblue{
 background: #455a64;
}

.font_white{
 color: #fff;
}

.font_white input[type="text"]{
 color: #fff;
}

.font_blue{
 color: #2875fc;
}

.bg_light-blue{
 background: #b0bec5;
}
/* bei aktivierter Mail dunkler */
.bg_light-blue.active_true{
	background: #607d8b!important;
}
.bg_light-blue.active_true .header_text{
	color: #fff!important
}

.mail_card_header.header_text{
  padding-top: 3px;
}

.warning_field{
 background: #ffc107;
}

.bg_dark-brown{
 background: #795548!important;
}
.bg_dark-brown a.button{
  color: #fff!important;
}

.Edgebutton{
  background-color: #607d8b;
  padding: 8px 0 8px 0;
  border-radius: 0 5px 5px 0;
}

.Edgebutton a{
  color: #fff;
}

.huge_header{
	padding: 20px 5px 20px 5px;
 min-height: 60px;
}

.huge_header > div:nth-of-type(1){
	color: #000;
	text-align: center;
	font-size: 1.3rem;
}

.huge_header > div:nth-of-type(2){
	text-align: center;
	font-size: 0.9rem;
	color: #616161;
}

.huge_header > div:nth-of-type(3){
	text-align: center;
	font-size: 0.9rem;
	color: #616161;
}

.terminal_window{
  padding: 5px;
  background-color: black;
  min-height: 500px;
  border-radius: 5px;
}

.terminal_window > #socketio_terminal{
  color: white;
  padding: 5px;
  overflow: auto;
  overflow-x: hidden;
}

/* Output-Timer input data field*/

.level_time, .level_text{
 position: relative;
 text-align: center;
}

.ios .level_time{
  /* top: -6px; */
}

.md .level_time{
  /* top: -5px; */
}

.ios .level_text{
 top: 8px;
}

.md .level_text{
 top: 2px;
}

.header_grey{
 background-color: #d4d4d4;
 padding: 2px 10px;
 border-radius: 5px;
 margin: 5px auto;
}

.timer_height{   
 /* padding-top: 10px; */
}

.md .timer_height{
 height: 35px;
}

/*background images*/
.huge_header > div.bg_image{
 position: relative;
 margin-top: 10px;
 width: 90%;
 max-width: 270px;
 margin: 0 auto;
 display: block;
}

.bg_image > img{
 position: relative;
 width: 100%;
 height: auto;
 max-height: 120px;
}

.bg_image.bg_img_extra > img{
 padding: 5px;
}

.huge_header > div.bg_img_extra{
 border-radius: 15px;
 margin-top: 15px;
 background-color: rgb(0 0 0 / 15%);
}
 
.bg_standard > .bg_abstand{
 margin-top: 15px;
 height: 10px;
}

.bg_standard{
 background: #f7f7f8;
 box-shadow: 0px -4px 5px -5px black;
 min-height: 500px;
}

.text_truncate{
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
}

.text_smaller{
 font-size: 0.9rem;
}

.grey_info_icon{
 color: #7e7e7e;
 padding-left: 5px;
 top: 2px;
 cursor: pointer;
}

.grey_info_icon:hover{
 color: #525252;
}

.wait_icon{
    /* width: 100%; */
    margin: 70px 0;
    position: fixed;
    z-index: 999;
    background: #ffffffd9;
    width: 320px;
    padding: 20px;
    /* top: 50%; */
    left: 50%;
    /* margin-top: -50px; */
    margin-left: -170px;
}

.wait_icon > img{
 width: 80px;
 margin: 0 auto;
 display: block;
}

#elockselection{
 width: 250px;
 margin: 0 auto;
 background-color: #ffffffb8;
 color: black;
}

.block-title.strong{
 color: black;
}

.testchip {
    display: inline;
}

.infofield{
 width: 100%;
}

.infofield > div{
 margin: 0 auto;
 width: 270px;
 background: #e8e8e8;
 padding: 5px 15px;
 font-size: 1rem;
 border-radius: 5px;
 color: #424242;
}

.infofield > div > .header{
 font-size: 1.1rem;
 font-weight: 600;
 margin-bottom: 5px;
}

.statusbar_green{
 width: 100%;
 height: 5px;
}

.statusbar_green > div.terminalstatusbar{
 background-color: green;
 width: 0%;
 height: 5px;
 float: left;
 transition: width 2s ease, height 1s ease;
}

#bellfield_usermanager div.namefield {
 border-radius: 3px;
 background-color: #fff;
 padding: 5px;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 text-align: center;
 box-shadow: inset 0px 0px 3px 0px #2a2a2a;
 font-size: 1rem;
 margin-top: 3px;
 
}

#bellfield_usermanager .button_above div.namefield {
 margin-top: 0;
 margin-bottom: 5px;
}

#bellfield_usermanager div.namefield a{
 color: black;
 background-color: #efefef;
 padding: 0 0px;
 border-radius: 5px;
 max-width: 100%;
}

#bellfield_usermanager .row{
  margin-bottom: 5px;
}

#bellfield_usermanager div.button_bell > div {
    border-radius: 50%;
    background-color: #d1d1d1;
    padding: 5px 8px;
    margin: 0 auto;
    text-align: center;
    box-shadow: inset 0px 0px 1px 3px #ffffff;
    min-height: 20px;
    min-width: 12px;
    max-width: 15px;
    border: 4px solid #e1e1e1;
}

.button_bell.wide div{
    min-width: 30px!important;
    max-width: none!important;
    border-radius: 0%!important;
    border: 4px solid #e7e7e7!important;
}

#bellfield_usermanager > .row{
 margin-bottom: 5px;
}

.namediv{
 max-width: 100%;
 white-space: nowrap;
 overflow: hidden;
 text-overflow: ellipsis;
 font-size: 0.9rem;
 display: contents;
}

.icondiv{
 margin-left: 5px;
}

.change_icon i{
 text-align: right;
 padding: 3px;
 font-size: 0.9rem;
 background-color: #dbdbdb;
 border-radius: 5px;
}

.no_link{
 background-color: transparent!important;
}

.user_arrow_changer{
 height: 60px;
}

.user_arrow_changer i{
 color: #6e6e6e;
 padding-top: 21px;
 margin-left: -11px;
}

#bellfield_usermanager .namefield.active{
 background-color: #f7edda;
 box-shadow: inset 0px 1px 4px 1px #835b1d;
 transition: box-shadow 1s, background-color 1s;
}

#bellfield_usermanager .button_bell.active div{
 background-color: #c9b38e;
 box-shadow: inset 0px 0px 0px 3px #ffffff;
 color: white;
 font-weight: 800;
}
#bellfield_usermanager .button_bell > div.locked{
  box-shadow: inset 0px 0px 1px 3px #bfbfbf; 
}
#bellfield_usermanager .button_bell > div.cancel{
  box-shadow: inset 0px 0px 1px 3px #ffb92e; 
}
#bellfield_usermanager .button_bell > div.cat{
  box-shadow: inset 0px 0px 1px 3px #5588d7; 
}

.item-title.two_spans {
    width: 100%;
    display: contents;
}
.two_spans span:nth-child(1) {
    text-align: left;
}
.two_spans span:nth-child(2) {
    text-align: right;
    color: #747474;
}

.md .list .saveinput_icon.item-media {
  min-width: 27px;
}

.saveinput_icon{
 background: rgb(255,255,255);
 background: linear-gradient(180deg, rgba(255,255,255,1) 35%, rgba(247,247,247,1) 100%);
 border: 1px solid #f1f1f1;
}

.md .saveinput_icon {
    height: 59px;
    top: -8px;
    position: relative;
    margin: 0 auto;
}

.ios .saveinput_icon{
 height: 67px;
}

.saveinput_icon i{
 color: #027aff;
}

.savebutton_center{
    width: 90%;
    display: block!important;
    margin: 0 auto;
    padding-top: 5px;
}

.card-content.new::before {
    content: ' ';
    display: block;
    border-top: 5px solid #f7f7f8;
}

#astrobild{
 width: 100%;
 position: relative;
}


#astrobild > .astrobild_wrapper{
 max-width: 1200px;
 margin: 0 auto;
}

#astrobild .astrobild_wrapper div.sprite{
 background-image: url(/images/background/astrotimer/suns.svg);
 overflow: hidden;
 background-size: 300px 73px;
 background-repeat: no-repeat;
 transform: scale(0.5);
}

#astrobild #sunset_sun{
 height: 70px;
 width: 96px;
 margin-left: 0px;
}

#astrobild #moon{
 margin: 0 auto;
 background-position: -115px 0px;
 height: 74px;
 width: 72px;
}

#astrobild #sunrise_sun{
 background-position: -202px 0px;
 margin-left: auto;
 display: block;
 height: 74px;
 width: 105px;
}

#astrobild .astrobild_values{
 text-align: center;
}

#astrobild .astrobild_values #sunset_value{
 text-align: left;
}

#astrobild .astrobild_values #sunrise_value{
 text-align: right;
}

#astrobild .led_bars.row{
 padding: 0 10px;
 margin-top: 5px;
}

#astrobild #fadein img{
 margin-right: auto;
 display: block;
 height: 54px;
 width: 100%;
}
 
#astrobild #fadeout img{
 height: 54px;
 margin-left: auto;
 display: block;
 width: 100%;
}

#astrobild #colourbar img{
 margin-top: 5px;
 height: 20px;
 width: 100%;
}

#astrobild .led_block{
 width: 100%;
 height: 54px;
 background-color: #f3cc4a;
}

.terminal_checklist{
 padding-left: 10px;
}

.terminal_checklist span{
 color: green;
}

.time_section {
 width: 200px;
 margin: 0 auto;
 text-align: center;
}

.time_section .toggle {
 margin-top: 5px;
 margin-right: 10px;
}

.time_section > div.header{
 margin-top: 5px;
}

.ios .pad7p_ios{
 padding-top: 6px;
 display: inherit;
}

.up_down_buttons .button{
 text-overflow: unset;
 line-height: 0px;
 height: 22px;
}

.outputtimer .level_time{
 padding-top: 5px;
}

@media print {
    .page, .page-content, html, body, .framework7-root, .views, .view {
        height: auto !important;
    }

    html, body, .framework7-root, .views, .view {
        overflow: visible !important;
        overflow-x: visible !important;
    }

    .page.page-previous {
        display: none;
    }
    
    #main-view .page-content {
       padding-top: 0px!important;
   }
}

@media print {
 .no_print{
  display: none;
 }
}

.print_wrapper{
  size: 7in 9.25in;
  background-color: white;
  font-size: 0.6rem;
  padding-left: 5px;
}


.print_wrapper .header.big{
 font-size: 1rem;
}

.print_wrapper .header{
 font-size: 0.8rem;
 font-weight: 600;
 margin: 0 0 5px 0;
 display: inline-block;
}

.print_ucontainer{
height: 342px;
overflow:hidden;
border-bottom: 1px solid grey;
margin-bottom: 7px;
}

.timelimit_container{
 height: 40px;
 border-top: 1px solid #efefef;
 line-height: 40px;
}

.ios .save_icon_in_header{
	margin-top: 8px!important;
}

.md .save_icon_in_header{
	margin-top: 7px!important;
}

.ios .checkbox_in_header{
	margin-top: 8px!important;
}

.md .checkbox_in_header{
	margin-top: 12px!important;
}

.no_space_between > a > div > div{
 justify-content: initial!important;
}

.delivery_accordion,
.delivery_accordion > a > div{
 padding-left: 0px!important;
 line-height: 1.7rem;
}

.delivery_accordion > a.item-link{
 height: 37px;
}


.delivery_accordion .acc_box{
 width: 100%;
 margin-top: 5px;
}

.delivery_accordion .acc_title{
 font-size: 0.5rem;
 color: #757575;
 line-height: 0.5rem;
}

.delivery_accordion .acc_content{
 line-height: 1.5rem;
 padding-left: 10px;
 font-size: 0.7rem;
 margin-bottom: 5px;
}

.timeline-item.center{
 margin: 0 auto;
 max-width: 430px;
}

.testchip > div.chip:hover{
 cursor: pointer;
}

.small_icon{
 color: black;
 font-size: 1.2rem!important;
}