/***********************************************/
/************ Wachalarm-Web-CSS*****************/
/***********************************************/

/*** Anpassungen für fixed Header und Footer ***/

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
  padding-top: 5rem;
  padding-bottom: 0;
}

.footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  line-height: 60px;
}

.fullheight {
  height: calc(100vh - 60px - 7rem);
}

/*** Anpassungen an Bootstrap ******************/

audio {
  display: none;
}

.h-5 {
  height: 5% !important;
}

.h-10 {
  height: 10% !important;
}

.h-14 {
  height: 14% !important;
}

.h-15 {
  height: 15% !important;
}

.h-16-5 {
  height: 16.5% !important;
}

.h-20 {
  height: 20% !important;
}

.h-30 {
  height: 30% !important;
}

.h-33 {
  height: 33% !important;
}

.h-35 {
  height: 35% !important;
}

.h-40 {
  height: 40% !important;
}

.h-45 {
  height: 45% !important;
}

.h-55 {
  height: 55% !important;
}

.h-60 {
  height: 60% !important;
}

.h-65 {
  height: 65% !important;
}

.h-70 {
  height: 70% !important;
}

.h-80 {
  height: 80% !important;
}

.h-90 {
  height: 90% !important;
}

.h-95 {
  height: 95% !important;
}

.w-10 {
  width: 10% !important;
}

.w-90 {
  width: 90% !important;
}

#rueckmeldung .list-group-item {
  padding: 0.25rem;
}

/*** Klassen in Abhängigkeit der Rotation ******/

@media (orientation:portrait) {

  .h-5_p {
    height: 5% !important;
  }

  .h-7_p {
    height: 7% !important;
  }

  .h-40_p {
    height: 40% !important;
  }

  .h-60_p {
    height: 60% !important;
  }

  .h-93_p {
    height: 93% !important;
  }

  .h-95_p {
    height: 95% !important;
  }

  .w-100_pt {
    width: 100% !important;
  }
}

@media (orientation:landscape) {
  .ptr-3_ls {
    padding-top: 1rem !important;
    padding-right: 1rem !important;
  }

  .py-3_ls {
    padding-bottom: 1rem !important;
    padding-top: 1rem !important;
  }

  .pr-3_ls {
    padding-right: 1rem !important;
  }

  .col-5_ls {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 41.6666666667%;
    flex: 0 0 41.6666666667%;
    max-width: 41.6666666667%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .col-7_ls {
    -webkit-box-flex: 0;
    -ms-flex: 0 0 58.3333333333%;
    flex: 0 0 58.3333333333%;
    max-width: 58.3333333333%;
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
  }

  .h-2-5_ls {
    height: 2.5% !important;
  }

  .h-12-5_ls {
    height: 12.5% !important;
  }

  .h-15_ls {
    height: 15% !important;
  }

  .h-20_ls {
    height: 20% !important;
  }

  .h-70_ls {
    height: 70% !important;
  }

  .h-75_ls {
    height: 75% !important;
  }

  .h-80_ls {
    height: 80% !important;
  }

  .h-87-5_ls {
    height: 87.5% !important;
  } 

  .h-97-5_ls {
    height: 97.5% !important;
  }

  .h-100_ls {
    height: 100% !important;
  }

  .w-40_ls {
    width: 40% !important;
  }

  .w-60_ls {
    width: 60% !important;
  }
}

/*** Animation für den Wachennamen ***/

#wachenname_footer {
  display: inline-block;
  white-space: nowrap;
  /*padding: 0 1rem;*/
}

#em_alarmiert {
  font-size: 1.6vw;
}

#screen_saver {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

#clock_day {
  transition: all 0.5s ease-in-out;
  z-index: 1;
}

#em_weitere {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  text-align: center;
}

#besonderheiten {
  display: flex;
  align-items: flex-end;
  height: 100%;
  padding-left: 1rem;
  padding-bottom: 0.5rem;
}