.tabbed {
    overflow-x: hidden;
    margin: 32px 0;
    padding-bottom: 16px;
}

.tabbed [type="radio"] {
    display: none;
}

/* .tabs {
    display: flex;
    align-items: stretch;
    list-style: none;
    padding: 0;
    border-bottom: 1px solid #000;
} */

.tab>label {
    display: block;
    margin-bottom: -1px;
    /* border-bottom-color: #000; */
    transition: all .4s;
}


.tab-content {
    display: none;
}

/* As we cannot replace the numbers with variables or calls to element properties, the number of this selector parts is our tab count limit */
.tabbed [type="radio"]:nth-of-type(1):checked~.tabs .tab:nth-of-type(1) label,
.tabbed [type="radio"]:nth-of-type(2):checked~.tabs .tab:nth-of-type(2) label,
.tabbed [type="radio"]:nth-of-type(3):checked~.tabs .tab:nth-of-type(3) label, 
.tabbed [type="radio"]:nth-of-type(4):checked~.tabs .tab:nth-of-type(4) label, 
.tabbed [type="radio"]:nth-of-type(5):checked~.tabs .tab:nth-of-type(5) label,
.tabbed [type="radio"]:nth-of-type(6):checked~.tabs .tab:nth-of-type(6) label,
.tabbed [type="radio"]:nth-of-type(7):checked~.tabs .tab:nth-of-type(7) label,
.tabbed [type="radio"]:nth-of-type(8):checked~.tabs .tab:nth-of-type(8) label {
    /* border: 2px solid #73946B; */
    background-color: #94b4c160;
   
}

.tabbed [type="radio"]:nth-of-type(1):checked~.tab-content:nth-of-type(1),
.tabbed [type="radio"]:nth-of-type(2):checked~.tab-content:nth-of-type(2),
.tabbed [type="radio"]:nth-of-type(3):checked~.tab-content:nth-of-type(3), 
.tabbed [type="radio"]:nth-of-type(4):checked~.tab-content:nth-of-type(4), 
.tabbed [type="radio"]:nth-of-type(5):checked~.tab-content:nth-of-type(5),
.tabbed [type="radio"]:nth-of-type(6):checked~.tab-content:nth-of-type(6),
.tabbed [type="radio"]:nth-of-type(7):checked~.tab-content:nth-of-type(7),
.tabbed [type="radio"]:nth-of-type(8):checked~.tab-content:nth-of-type(8) {
    display: block;
}