.tabs {
  display: block;
  position: relative; /* Ensures sticky positioning works */
  min-height: 300px; /* Ensures enough height for scrolling */
}.tab-buttons {
  display: flex;
  flex-wrap: wrap; /* Allow tabs to wrap onto new rows */
  justify-content: flex-start; /* Align tabs neatly */
  gap: 5px; /* Add spacing between wrapped tabs */
  position: static;
  top: 0;
  z-index: 100;
  padding: 5px 0;
}.tab-buttons input {
  display: none; /* Hide the radio buttons */
}.tab-buttons label {
  display: inline-block;
  padding: 10px 15px;
  cursor: pointer;
  background: #ddd;
  border: 1px solid #ccc;
  font-size: 16px;
  border-radius: 8px 8px 0 0;
  max-width: 150px; /* Prevent tabs from becoming too wide */
  text-align: center;
  white-space: normal; /* Allow text to wrap */
  word-break: break-word; /* Ensure text doesn't overflow */
}.tab-buttons label:hover {
  background: #ccc;
}.tab-content > div {
  opacity: 0;
  visibility: hidden;
  height: 0;
  padding: 0 20px;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 0 0 8px 8px;
  transition: opacity 0.3s ease-in-out, height 0.3s ease-in-out, padding 0.3s ease-in-out;
  overflow: hidden; /* Keep overflow hidden when not active */
}/* content for the selected tab */
/* content for the selected tab */
.tabs:has(.tab-buttons input:nth-child(1):checked) .tab-content > div:nth-child(1),
.tabs:has(.tab-buttons input:nth-child(3):checked) .tab-content > div:nth-child(2),
.tabs:has(.tab-buttons input:nth-child(5):checked) .tab-content > div:nth-child(3),
.tabs:has(.tab-buttons input:nth-child(7):checked) .tab-content > div:nth-child(4),
.tabs:has(.tab-buttons input:nth-child(9):checked) .tab-content > div:nth-child(5),
.tabs:has(.tab-buttons input:nth-child(11):checked) .tab-content > div:nth-child(6),
.tabs:has(.tab-buttons input:nth-child(13):checked) .tab-content > div:nth-child(7),
.tabs:has(.tab-buttons input:nth-child(15):checked) .tab-content > div:nth-child(8),
.tabs:has(.tab-buttons input:nth-child(17):checked) .tab-content > div:nth-child(9),
.tabs:has(.tab-buttons input:nth-child(19):checked) .tab-content > div:nth-child(10),
.tabs:has(.tab-buttons input:nth-child(21):checked) .tab-content > div:nth-child(11),
.tabs:has(.tab-buttons input:nth-child(23):checked) .tab-content > div:nth-child(12),
.tabs:has(.tab-buttons input:nth-child(25):checked) .tab-content > div:nth-child(13),
.tabs:has(.tab-buttons input:nth-child(27):checked) .tab-content > div:nth-child(14),
.tabs:has(.tab-buttons input:nth-child(29):checked) .tab-content > div:nth-child(15),
.tabs:has(.tab-buttons input:nth-child(31):checked) .tab-content > div:nth-child(16),
.tabs:has(.tab-buttons input:nth-child(33):checked) .tab-content > div:nth-child(17),
.tabs:has(.tab-buttons input:nth-child(35):checked) .tab-content > div:nth-child(18),
.tabs:has(.tab-buttons input:nth-child(37):checked) .tab-content > div:nth-child(19),
.tabs:has(.tab-buttons input:nth-child(39):checked) .tab-content > div:nth-child(20),
.tabs:has(.tab-buttons input:nth-child(41):checked) .tab-content > div:nth-child(21),
.tabs:has(.tab-buttons input:nth-child(43):checked) .tab-content > div:nth-child(22),
.tabs:has(.tab-buttons input:nth-child(45):checked) .tab-content > div:nth-child(23),
.tabs:has(.tab-buttons input:nth-child(47):checked) .tab-content > div:nth-child(24),
.tabs:has(.tab-buttons input:nth-child(49):checked) .tab-content > div:nth-child(25),
.tabs:has(.tab-buttons input:nth-child(51):checked) .tab-content > div:nth-child(26),
.tabs:has(.tab-buttons input:nth-child(53):checked) .tab-content > div:nth-child(27),
.tabs:has(.tab-buttons input:nth-child(55):checked) .tab-content > div:nth-child(28),
.tabs:has(.tab-buttons input:nth-child(57):checked) .tab-content > div:nth-child(29),
.tabs:has(.tab-buttons input:nth-child(59):checked) .tab-content > div:nth-child(30),
.tabs:has(.tab-buttons input:nth-child(61):checked) .tab-content > div:nth-child(31),
.tabs:has(.tab-buttons input:nth-child(63):checked) .tab-content > div:nth-child(32),
.tabs:has(.tab-buttons input:nth-child(65):checked) .tab-content > div:nth-child(33),
.tabs:has(.tab-buttons input:nth-child(67):checked) .tab-content > div:nth-child(34),
.tabs:has(.tab-buttons input:nth-child(69):checked) .tab-content > div:nth-child(35),
.tabs:has(.tab-buttons input:nth-child(71):checked) .tab-content > div:nth-child(36),
.tabs:has(.tab-buttons input:nth-child(73):checked) .tab-content > div:nth-child(37),
.tabs:has(.tab-buttons input:nth-child(75):checked) .tab-content > div:nth-child(38),
.tabs:has(.tab-buttons input:nth-child(77):checked) .tab-content > div:nth-child(39),
.tabs:has(.tab-buttons input:nth-child(79):checked) .tab-content > div:nth-child(40),
.tabs:has(.tab-buttons input:nth-child(81):checked) .tab-content > div:nth-child(41),
.tabs:has(.tab-buttons input:nth-child(83):checked) .tab-content > div:nth-child(42),
.tabs:has(.tab-buttons input:nth-child(85):checked) .tab-content > div:nth-child(43),
.tabs:has(.tab-buttons input:nth-child(87):checked) .tab-content > div:nth-child(44),
.tabs:has(.tab-buttons input:nth-child(89):checked) .tab-content > div:nth-child(45),
.tabs:has(.tab-buttons input:nth-child(91):checked) .tab-content > div:nth-child(46),
.tabs:has(.tab-buttons input:nth-child(93):checked) .tab-content > div:nth-child(47),
.tabs:has(.tab-buttons input:nth-child(95):checked) .tab-content > div:nth-child(48),
.tabs:has(.tab-buttons input:nth-child(97):checked) .tab-content > div:nth-child(49),
.tabs:has(.tab-buttons input:nth-child(99):checked) .tab-content > div:nth-child(50),
.tabs:has(.tab-buttons input:nth-child(101):checked) .tab-content > div:nth-child(51) {
  opacity: 1;
  visibility: visible;
  height: auto;
  padding: 20px; /* Ensure padding is correctly applied */
  overflow: visible;
}/* selected tag */
.tab-buttons input:nth-child(1):checked + label,
.tab-buttons input:nth-child(3):checked + label,
.tab-buttons input:nth-child(5):checked + label,
.tab-buttons input:nth-child(7):checked + label,
.tab-buttons input:nth-child(9):checked + label,
.tab-buttons input:nth-child(11):checked + label,
.tab-buttons input:nth-child(13):checked + label,
.tab-buttons input:nth-child(15):checked + label,
.tab-buttons input:nth-child(17):checked + label,
.tab-buttons input:nth-child(19):checked + label,
.tab-buttons input:nth-child(21):checked + label,
.tab-buttons input:nth-child(23):checked + label,
.tab-buttons input:nth-child(25):checked + label,
.tab-buttons input:nth-child(27):checked + label,
.tab-buttons input:nth-child(29):checked + label,
.tab-buttons input:nth-child(31):checked + label,
.tab-buttons input:nth-child(33):checked + label,
.tab-buttons input:nth-child(35):checked + label,
.tab-buttons input:nth-child(37):checked + label,
.tab-buttons input:nth-child(39):checked + label,
.tab-buttons input:nth-child(41):checked + label,
.tab-buttons input:nth-child(43):checked + label,
.tab-buttons input:nth-child(45):checked + label,
.tab-buttons input:nth-child(47):checked + label,
.tab-buttons input:nth-child(49):checked + label,
.tab-buttons input:nth-child(51):checked + label,
.tab-buttons input:nth-child(53):checked + label,
.tab-buttons input:nth-child(55):checked + label,
.tab-buttons input:nth-child(57):checked + label,
.tab-buttons input:nth-child(59):checked + label,
.tab-buttons input:nth-child(61):checked + label,
.tab-buttons input:nth-child(63):checked + label,
.tab-buttons input:nth-child(65):checked + label,
.tab-buttons input:nth-child(67):checked + label,
.tab-buttons input:nth-child(69):checked + label,
.tab-buttons input:nth-child(71):checked + label,
.tab-buttons input:nth-child(73):checked + label,
.tab-buttons input:nth-child(75):checked + label,
.tab-buttons input:nth-child(77):checked + label,
.tab-buttons input:nth-child(79):checked + label,
.tab-buttons input:nth-child(81):checked + label,
.tab-buttons input:nth-child(83):checked + label,
.tab-buttons input:nth-child(85):checked + label,
.tab-buttons input:nth-child(87):checked + label,
.tab-buttons input:nth-child(89):checked + label,
.tab-buttons input:nth-child(91):checked + label,
.tab-buttons input:nth-child(93):checked + label,
.tab-buttons input:nth-child(95):checked + label,
.tab-buttons input:nth-child(97):checked + label,
.tab-buttons input:nth-child(99):checked + label,
.tab-buttons input:nth-child(101):checked + label {
  background: #ccc;
  font-weight: bold;
}
