.tabs {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
}

.tab-header {
    display: none;
}

.tab-header + label, .tab-header-link {
    display: grid;
    justify-items: center;
    align-items: center;
    width: auto;
    padding-left: 10px;
    padding-right: 10px;
    height: 30px;
    color: #fff;
    background-color: var(--secondary-dark);
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    user-select: none;
    cursor: pointer;
    text-decoration: none;
}

.tab-selected {
    background-color: var(--primary-dark);
    text-decoration: none;
}


.tab-header:checked+label {
    background-color: var(--primary-dark);
}

.tab-header:checked+label+.tab-body {
    display: block;
}

.tab-body {
    background-color: #fff;
    border: thin solid var(--secondary-light);
    flex-basis: 100%;
    width: 100%;
    display: none;
    padding:10px;
    order: 99;
}

.tab-body-show {
    background-color: #fff;
    border: thin solid var(--secondary-light);
    flex-basis: 100%;
    width: 100%;
    padding: 10px;
    order: 99;
}