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 */
}

.installation-carousel-row > div {
  display: flex;
}

.installation-carousel-img {
  height: 260px;
  object-fit: cover;
  object-position: center;
  background: #f3f3f3;
}

.installation-carousel-trigger {
  cursor: zoom-in;
}

.installation-carousel-control {
  width: 5%;
  opacity: 0.75;
}

.installation-carousel-control .carousel-control-prev-icon,
.installation-carousel-control .carousel-control-next-icon {
  background-color: rgba(0, 0, 0, 0.45);
  border-radius: 50%;
  background-size: 65% 65%;
  width: 2.2rem;
  height: 2.2rem;
}

.installation-carousel-control:hover {
  opacity: 1;
}

@media (max-width: 768px) {
  .installation-carousel-img {
    height: 220px;
  }

  .installation-carousel-control {
    width: 8%;
  }
}

@media (max-width: 576px) {
  .installation-carousel-img {
    height: 180px;
  }

  .installation-carousel-control {
    width: 12%;
  }
}

#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;
  width: 100%;
  background-color: #f3f4f7;
}

canvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

@media (max-width: 576px) {
  .chart-container {
    height: 300px;
    min-height: 300px;
  }
}
.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;
    }
}

/* Download icon design */
.hover-card {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .hover-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 22px rgba(0, 0, 0, 0.12) !important;
    }

    .doc-icon {
        position: relative;
        width: 140px;
        height: 180px;
        margin: 0 auto;
        background: #f5f5f5;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 10px;
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.08);
        overflow: hidden;
    }

    .doc-icon::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        width: 24px;
        height: 24px;
        background: #e5e7eb;
        clip-path: polygon(0 0, 100% 0, 100% 100%);
        border-left: 1px solid rgba(0, 0, 0, 0.06);
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    .doc-preview {
        position: absolute;
        left: 12px;
        top: 18px;
        width: calc(100% - 24px);
        height: 120px;
        object-fit: cover;
        border-radius: 4px;
        background: #fff;
    }

    .pdf-tag {
        position: absolute;
        left: 12px;
        bottom: 12px;
        background: #d9342b;
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        padding: 4px 8px;
        border-radius: 4px;
    }