.tabset > input[type="radio"] {
    position: absolute;
    left: -200vw;
}

.tabset .tab-panel {
    display: none;
}

.tabset > input:first-child:checked ~ .tab-panels > .tab-panel:first-child,
.tabset > input:nth-child(3):checked ~ .tab-panels > .tab-panel:nth-child(2),
.tabset > input:nth-child(5):checked ~ .tab-panels > .tab-panel:nth-child(3),
.tabset > input:nth-child(7):checked ~ .tab-panels > .tab-panel:nth-child(4),
.tabset > input:nth-child(9):checked ~ .tab-panels > .tab-panel:nth-child(5),
.tabset > input:nth-child(11):checked ~ .tab-panels > .tab-panel:nth-child(6) {
    display: block;
}

/*
 Styling
*/
body {
    font-size: 16px/1.5em;
    color: #333;
    font-weight: 300;
}

.tabset > label {
    position: relative;
    display: inline-block;
    padding: 15px 15px 25px;
    border: 1px solid transparent;
    border-bottom: 0;
    cursor: pointer;
    font-weight: 600;
}

    .tabset > label::after {
        content: "";
        position: absolute;
        left: 15px;
        bottom: 10px;
        width: 22px;
        height: 4px;
        background: #8d8d8d;
    }

    .tabset > label:hover,
    .tabset > input:focus + label {
        color: #64be67;
    }

        .tabset > label:hover::after,
        .tabset > input:focus + label::after,
        .tabset > input:checked + label::after {
            background: #64be67;
        }

.tabset > input:checked + label {
    border-color: #ccc;
    border-bottom: 1px solid #fff;
    margin-bottom: -1px;
}

.tab-panel {
    padding: 30px 0;
    border-top: 1px solid #ccc;
}

/*
 Demo purposes only
*/
*,
*:before,
*:after {
    box-sizing: border-box;
}

body {
    padding: 30px;
}

.tabset {
    max-width: 65em;
}

.bolder-text{
    font-weight: bold!important;
}

.pr-10,
.pt-6-pr-5,
.h-50 {
}


@media screen and (max-width: 900px) {
    .tabset label {
        width: 100% !important;
    }

    .table-responsive-transform {
        padding-bottom: 25px;
    }

    table.table-responsive-transform thead {
        display: none;
    }

    table.table-responsive-transform tr {
        display: block;
        /*margin-bottom: 1rem;*/
        border-bottom: 2px solid #e8e9eb;
    }

    table.table-responsive-transform td {
        display: block;
        padding-bottom: 10px;
        text-align: right;
    }

        table.table-responsive-transform td:before {
            content: attr(aria-label);
            float: left;
            font-weight: bold;
        }

        table.table-responsive-transform td.h-50 {
            height: 50px!important;
        }

    .pr-10 {
        padding-right: 10px !important;
        padding-top: 6px;
    }

    .pt-6-pr-5 {
        padding-top: 6px;
        padding-right: 5px;
    }
}