.toggle {
    cursor: pointer;
  display: flex;
align-items: center;
    /* font-weight: 600; */
    margin: 3px 3px;
    border-radius: 100px;
}
.card {
    position: relative;
    margin: 3px;
    /* margin-top:20px; */
    padding: 0.1em 0em .0;
    width: 16%;
    display: inline-block;
    /* max-width: 23%; */
    /* border:1px solid #c3c4c7; */
    box-shadow: 0 1px 1px rgba(0,0,0,.04);
    background: #ededed;
    box-sizing: content-box;
}
.card:has(input.toggle__input:checked) {
    background: #c8dfc8; /* your "selected" color */
}
.toggle__input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.toggle__input:focus + .toggle-track {
  box-shadow: 0 0 0 2px #333; /* focus ring */
  border: 1px solid transparent;
}

.toggle__input:disabled + .toggle-track {
  cursor: not-allowed;
  opacity: 0.7;
}

.toggle-track {
  background: #f0f0f0;
  border: 1px solid #999;
  border-radius: 10px;
  cursor: pointer;
  display: flex;
  position: relative;
  width: 35px;
  height: 16px;
  margin-right: 8px;
}

.toggle-indicator {
  position: absolute;
  bottom: 2px;
  left: 2px;
  width: 10px;
  height: 10px;
  background: #afa2a2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.checkMark {
  width: 6px;
  height: 6px;
  fill: #fff;
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.toggle__input:checked + .toggle-track .toggle-indicator {
  transform: translateX(19px); /* track width - track height */
  background: green;
}

.toggle__input:checked + .toggle-track .toggle-indicator .checkMark {
  opacity: 1;
}




.tabs-container {
    overflow-x: auto;
    border-bottom: 1px solid #ccc;
    margin-bottom: 15px;
}
.tabs-scroll {
    display: flex;
    flex-wrap: nowrap;
}
.tab {
    padding: 8px 16px;
    cursor: pointer;
    background: #f1f1f1;
    margin-right: 5px;
    border: 1px solid #ccc;
    border-bottom: none;
    border-radius: 5px 5px 0 0;
    white-space: nowrap;
    flex-shrink: 0;
}
.tab.active {
    background: #fff;
    font-weight: bold;
}
.result-row {
    display: none; /* Hidden by default */
}
.result-row.active {
    display: block;
}