html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

main {
  flex: 1 1 auto;  /* darf wachsen und schrumpfen */
  overflow-y: auto;
}

.button-main-page {
    padding: 4px 4px;
    min-width: 110px;
    margin-right: 1px;
}

.clickable-element {} /* Logo, ?, Logout, Buttons */

.flex-col-center {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.button-w-130 {
    width: 130px;
}

.pad-top-1em {
    padding-top: 1em;
}

.pad-top-3em {
    padding-top: 3em;
}

.pad-5 {
     padding: 5px;
}
.pad-bot-8 {
     padding-bottom: 8px;
}
.pad-bot-medium {
    padding-bottom: 0.7em;
}
.margin-top-10 {
     margin-top: 10px;
}
.margin-bottom-4 {
     margin-bottom: 4px;
}
.margin-bottom-10 {
     margin-bottom: 10px;
}
.margin-bottom-30 {
     margin-bottom: 30px;
}
.margin-1 {
    margin: 1px;
}
.margin-20 {
    margin: 20px;
}

.text-center {
    text-align: center;
}

.text-bold {
    font-weight: bold;
}

.text-justify {
    text-align: justify;
    hyphens: auto;
}

.text-size-24 {
    font-size: 24px;
}

/* ************** Multi Timer Start: ************** */
.multi-timer-press-button {
    outline: none;
    transition: transform 0.1s ease-in-out;
    /* Pulsierende Animation */
    animation: multi-timer-pulse 0.7s;
}

/* Keyframes für den Puls-Effekt */
@keyframes multi-timer-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(0.85); }
    100% { transform: scale(1); }
}

.multi-timer-flex-1-start-text-center {
    display: flex;
    flex: 1;
    justify-content: flex-start;
    text-align: center;
}

.multi-timer-flex-1-center-center {
    display: flex;
    flex: 1;
    justify-content: center;
    align-items: center;
}

.multi-timer-flex-1-end-center {
    display: flex;
    flex: 1;
    justify-content: flex-end;
    text-align: center;
}

.multi-timer-flex-row-center-center {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.flex {
    display: flex;
}
.flex-col {
    flex-direction: column;
}
.flex-row {
    flex-direction: row;
}
.al-it-ce {
    align-items: center;
}
.ju-co-ce {
    justify-content: center;
}
.te-al-ce {
    text-align: center;
}
/* ************** Multi Timer End. ************** */

.slider-round .noUi-connect {
    background: #c0392b;
}

#slider-round .noUi-handle {
    height: 18px;
    width: 18px;
    top: -5px;
    right: -9px; /* half the width */
    border-radius: 9px;
}