ul#index-msg {
  padding-left: 0;
  list-style-type: none;
}

#message_contact {
  height: 10em;
  margin-bottom: 15px;
}

.navbar-shadow {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.card-img-custom {
  max-width: 100%;
  height: auto;
}
.card-img-small {
  max-width: 70%; /* Set the desired max width */
  height: auto; /* Maintains aspect ratio */
  margin-top: 10px;
}
.carousel-img-custom {
  max-width: 80%; /* Set the desired max width */
  height: auto; /* Maintains aspect ratio */
  margin: 0 auto; /* Centers the image within the carousel item */
}

.carousel-container {
  max-width: 800px; /* Set the desired max width */
  margin: 0 auto; /* Centers the carousel within its parent container */
}

#gauge-container {
  width: 400px;
  height: 200px;
  margin: auto;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gauge-container_bga {
  width: 400px;
  height: 200px;
  margin: auto;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gauge-container_pool {
  width: 400px;
  height: 200px;
  margin: auto;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

#gauge-container_hydro {
  width: 400px;
  height: 200px;
  margin: auto;
  background-color: #f9f9f9;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-container {
  position: relative;
  height: auto; /* Set desired height */
  /*width: auto;*/
  background-color: #f3f4f7;
}

canvas {
  width: 100% !important; /* Ensure canvas scales to container width */
  height: auto !important; /* Maintain aspect ratio */
}

.disabled-link {
  pointer-events: none; /* Prevent clicks */
  opacity: 0.3; /* Make it appear disabled */
  filter: grayscale(100%); /* Apply grayscale filter */
  cursor: not-allowed; /* Change cursor to indicate disabled */
}

@media (max-width: 992px) {
  .navbar-collapse.text-end {
    text-align: right;
  }
}

.plant-image-container {
  position: relative;
  /*display: inline-block; /* Adjust based on your layout */
}

.icon-image {
  display: relative; /* Ensures the image fits its container */
}

.value-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #6f9f3f; /* Adjust color based on your image */
  font-size: 1.5em; /* Adjust font size as needed */
  font-weight: bold; /* Optional, for emphasis */
}

.value-overlay-example {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 5px;
  background: #ffffff;
  border: 2px solid red;
  transform: translate(-50%, -50%);
  color: #ff0000; /* Adjust color based on your image */
  font-size: 1.5em; /* Adjust font size as needed */
  font-weight: bold; /* Optional, for emphasis */
}

/* costum radio but , when selecting user status
/* Hide the default radio button */
.custom-radio {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Create a custom radio button */
.custom-radio + .form-check-label:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-right: 10px;
  border: 2px solid #9f9f9f; /* Change this color to your preferred border color */
  border-radius: 50%;
  vertical-align: middle;
}
/* Create the dot/circle inside the radio button */
.custom-radio:checked + .form-check-label:before {
  background-color: #9f9f9fbc; /* Change this color to your preferred inner circle color */
}

.custom-radio:checked + .form-check-label:after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: #ffffff; /* Change this color to your preferred inner dot color */
}

/* dont know if this works correct chatgpt :; */
/* ------------------ */
/* Default layout for screens larger than 400px */
.plant-info {
  display: flex;
  justify-content: space-between; /* Space between the elements */
  align-items: center;
}

/* Style each item (CO2, Temp, Amplitude) */
.plant-info .co2,
.plant-info .temp,
.plant-info .amp {
  margin: 5px; /* Some space between each element */
  text-align: center;
}

/* For screens smaller than 400px */
/* For screens smaller than 400px */
@media (max-width: 400px) {
  .plant-info {
    flex-direction: column; /* Stack the elements vertically */
    align-items: center; /* Center them */
  }

  /* Ensure co2 and temp are side by side in small screens */
  .co2,
  .temp {
    width: 48%; /* Set width to 48% for both CO2 and Temp */
    display: inline-block; /* Make sure they are inline */
    margin-right: 4%; /* Add a little space between them */
  }

  /* Amplitude (Amp) will be placed below CO2 and Temp */
  .amp {
    width: 100%; /* Full width for the Amp element */
    margin-top: 10px; /* Space between Amp and the other elements */
    text-align: center;
  }
}

.custom-caption {
  position: absolute;
  bottom: 10%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(255, 255, 255, 0.7); /* White with transparency */
  color: black; /* Text color */
  padding: 5px 5px;
  border-radius: 10px;
  text-align: center;
}

.custom-bg {
  background-color:rgb(111, 159, 63); /* Deine Wunschfarbe */
}





.warn-red {
  color: red !important;
  font-weight: bold;
}

.warn-yellow {
  color: #d4a200 !important;
  font-weight: bold;
}

.warn-black {
  color: black !important;
}

.blink-fast {
  animation: blink 0.5s infinite;
}

.blink-slow {
  animation: blink 1.5s infinite;
}

@keyframes blink {
  0% { opacity:1; }
  50% { opacity:0.2; }
  100% { opacity:1; }
}

.period-buttons .btn{
    flex:0 0 auto;
    min-width:90px;
}

@media(max-width:576px){
    .period-buttons{
        width:100%;
        margin-left:0!important;
        margin-right:0!important;
    }

    .period-buttons .btn{
        flex:1 1 calc(50% - 0.5rem);
        min-width:0;
    }
}