﻿.area {
    width: 100%;
    height:100%;
    margin: auto;
    flex-wrap: wrap;
    display: flex;
}

.tab_class {
    width: calc(100%/5);
    height: 50px;
    background-color: darkgrey;
    line-height: 50px;
    font-size: 15px;
    text-align: center;
    display: block;
    float: left;
    order: -1;
    border-top-left-radius:5px;
    border-top-right-radius:5px;
    margin-right:5px;

}

input[name="tab_name"] {
    display: none;
}

input:checked + .tab_class {
    background-color: cadetblue;
    color: aliceblue;
}

.content_class {
    display: none;
    width: 100%;
    height: 85%;
    overflow-y: auto;
}

input:checked + .tab_class + .content_class {
    display: block;
}
