/* Color Wheel: https://www.canva.com/colors/color-wheel/ */

h1, h3, h4 {
}

h2 {
    color: darkblue;
}

p, li {
}

a:link {
}

a:visited {
}

a:hover {
}

a:active {
}

a:focus {
}

hr {
    background: #c0c0c0;
    height: 1px;
    border-width: 0;
}

button {
    font-size: 14px;
    border-color: darkgrey;
    padding: 4px 8px;
    margin: 4px;
    border-radius: 6px;
}

/* Button: Puls and Glow: */
.pulse-button {
    background-color: #007bff;
    color: white;
    font-size: 18px;
    padding: 10px 10px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    outline: none;
    transition: transform 0.2s ease-in-out;
    /* Pulsierende Animation */
    animation: pulse 1.5s infinite;
}

/* Keyframes für den Puls-Effekt */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); } /* Leicht größer */
    100% { transform: scale(1); }
}

/* Pulse text: */
@keyframes pulse-color-scale {
    0% { transform: scale(1); color: #007bff; }
    50% { transform: scale(1.1); color: #007bff; }
    100% { transform: scale(1); color: #007bff; }
}

.pulsing-text {
    font-size: 22px;
    font-weight: bold;
    animation: pulse-color-scale 1.5s infinite;
}

.pulsing-long-text {
    color: #dd0000 !important;
}

.error-message {
    color: #ff2d34;
    text-align: center;
}

.gray-text {
    color: gray;
}

.button-disabled {
    font-size: 14px;
    color: gray;
    background-color: lightgray;
    border-color: darkgrey;
    padding: 4px 8px;
    margin: 4px;
    border-radius: 6px;
}

/* Popup-Container */
#popup {
    display: none; /* Anfangs versteckt */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 300px;
    padding: 5px;
    background: #f7fcfd;
    border-radius: 4px;
    box-shadow: 5px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

/* Hintergrund abdunkeln */
#overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.multi-timer-time-pos {
    font-size: 22px;
    font-weight: bold;
    color: #a9e0fc;
}

.multi-timer-time-neg {
    font-size: 20px;
    font-weight: bold;
    color: #fe5fa7;
}

/* Inline styles */
/* Funktionale Benennung: Was macht es, nicht was ist es: <div class="text-center bg-dark mb-2"></div>. Nachteil: Man hat oft sehr viele Klassen in einem Element stehen.*/
.text-long {
    font-size: 14px;
    color: black;
}

.text-color {
    color: black;
}

.bg-color {
    background-color: lightcyan;
}

.body-bg-color {
    background-color: #f7fcfd;
}

.headline {
    color: black;
    font-size: 24px;
    font-weight: bold;
    padding-bottom: 0.5em;
}

.div-border {
    border-style: solid;
    border-width: 2px;
    border-radius: 2px;
    border-color: black;
}

.multi-timer-headline {
    color: black;
    font-weight: bold;
    font-size: 18px;
}
.multi-timer-tile-bg-color {
    background-color: black;
}
.multi-timer-lane-number-enabled {
    font-size: 30px;
    font-weight: bold;
    color: #ff8228;
}
.multi-timer-lane-number-disabled {
    font-size: 30px;
    font-weight: bold;
    color: gray;
}

.smoothie {
    background: rgba(0,0,0,0.80);         /* Grid background */
    border-color: rgba(196, 255, 166, 0.11);     /* Grid lines color */
    color: #f4f4f4;                       /* Label (=Timestamp) font color */
    font-size: 14px;                      /* Timestamp font size */
}
.smoothie-par {
    border-width: 2px;                    /* Timeline "Parallel" line width */
    border-color: #00ff00;                /* Timeline "Parallel" line color */
    background: rgba(87,227,137,0.61);    /* Timeline "Parallel" area fill color */
}
.smoothie-beep {
    border-width: 2px;                    /* Timeline "Beep" line width */
    border-color: #ff9f54;                /* Timeline "Beep" line color */
}
.smoothie-audio-volume {
    border-width: 1px;                    /* Timeline "Audio Volume" line width */
    border-color: #1c20ff;                /* Timeline "Audio Volume" line color */
    background: rgba(28,32,255,0.52);     /* Timeline "Audio Volume" area fill color */
}
.smoothie-audio-threshold {
    border-width: 1px;                    /* Timeline "Audio Threshold" line width */
    border-color: #fa0c12;                /* Timeline "Audio Threshold" line color */
}
.smoothie-audio-shot {
    border-width: 1px;                    /* Timeline "Audio Shot" line width */
    border-color: #21ff00;                /* Timeline "Audio Shot" line color */
}

header {
  background: linear-gradient(180deg, rgb(0, 27, 138) 0%, #f7fcfd 100%);
  flex: 0 0 auto; /* nicht wachsen, nicht schrumpfen */
}
footer {
  background: linear-gradient(0deg, rgb(0, 27, 138) 0%, #f7fcfd 100%);
  padding: 4px;
  flex: 0 0 auto; /* nicht wachsen, nicht schrumpfen */
}





/*header { !* https://cssgradient.io/ *!*/
/*    background: linear-gradient(180deg, rgb(0, 27, 138) 0%, lightblue 100%);*/
/*	border-color: #d5d5d5;*/
/*}*/

/*footer { !* https://cssgradient.io/ *!*/
/*    background: linear-gradient(0deg, rgb(0, 27, 138) 0%, lightblue 100%);*/
/*	border-color: #d5d5d5;*/
/*    position: fixed;*/
/*    bottom: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*}*/