.my-accordion{
     box-shadow: 1px 2px 2px 2px rgba(0, 0, 0, 0.6); /* added shadow */
  border-radius: 5px; /* optional, for softer corners */
}

.my-accordion .accordion_li {
  position: relative;
  cursor: pointer;
  padding: 18px 50px 18px 18px; /* extra right space for badge */
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 20px;
  color: white;
  transition: 0.4s;

}

/* Colors for warning levels */
.my-accordion .accordion_li.red { background-color: #e74c3c; }
.my-accordion .accordion_li.orange { background-color: #e67e22; }
.my-accordion .accordion_li.yellow { background-color: #f1c40f; color: black; }
.my-accordion .accordion_li.green { background-color: #2ecc71; }

.my-accordion .accordion_li.active {
  filter: brightness(90%);
}

/* Expand/Collapse icons */
.my-accordion .accordion_li:after {
  content: '\002B';
  position: absolute;
  right: 15px;
  font-weight: bold;
}
.my-accordion .accordion_li.active:after {
  content: "\2212";
}

/* Badge style */
.my-accordion .badge {
  background: rgba(255, 255, 255, 0.9);
  color: black;
  border-radius: 50%;
  padding: 5px 10px;
  font-size: 17px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  right: 40px; /* position before plus/minus sign */
  transform: translateY(-50%);
}

/* Panel style */
.my-accordion .paneli {
  padding: 0px 9px;
  background-color: white;
  max-height: 0;
  color: black;
  margin-bottom: 3px;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}
.my-accordion .paneli.red {
  border: 2px solid #e74c3c; /* red */
}

.my-accordion .paneli.orange {
  border: 2px solid #e67e22; /* orange */
}

.my-accordion .paneli.yellow {
  border: 2px solid #f1c40f; /* yellow */
}

.my-accordion .paneli.green {
  border: 2px solid #2ecc71; /* green */
}