/* ------------------------------
   Container
------------------------------ */

.tabs {
    width: 100%;
    margin: 60px auto;
    box-sizing: border-box;
}


/* ------------------------------
   Hide radio buttons
------------------------------ */

.tabs > input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}


/* ------------------------------
   Tab buttons
------------------------------ */

.tab-labels {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}

.tab-labels label {
    flex: 0 1 auto;

    padding: 12px 24px;

    background: #fff;
    color: #152e6b;

    border: 1px solid #b9d3f0;
    border-bottom: none;

    cursor: pointer;

    font-weight: 600;
    text-align: center;

    transition:
        color 0.2s ease,
        background 0.2s ease;
}

.tab-labels label + label {
    border-left: none;
}


/* ------------------------------
   Active tab
------------------------------ */

#tab-1:checked ~ .tab-labels label[for="tab-1"],
#tab-2:checked ~ .tab-labels label[for="tab-2"] {
    color: #152e6b;
    background: #b4d4f1;

    position: relative;
    z-index: 2;
}


/* ------------------------------
   Content container
------------------------------ */

.tab-content {
    width: 100%;

    box-sizing: border-box;

    background: #fff;
    border: 1px solid #b9d3f0;

    padding: 25px;

    /*
       Important:
       The content has NO internal scrollbar.
       Its height is determined naturally by its content.
    */
    overflow: visible;
}


/* ------------------------------
   Individual content panels
------------------------------ */

.content {
    display: none;
}


/* Show the selected content */

#tab-1:checked ~ .tab-labels ~ .tab-content .content-1,
#tab-2:checked ~ .tab-labels ~ .tab-content .content-2,
#tab-3:checked ~ .tab-labels ~ .tab-content .content-3 {
    display: block;
}


/* ------------------------------
   Responsive / mobile
------------------------------ */

@media (max-width: 600px) {

    .tabs {
        margin: 30px auto;
    }

    .tab-labels {
        flex-direction: column;
    }

    .tab-labels label {
        width: 100%;
        box-sizing: border-box;

        border: 1px solid #eee;
        border-bottom: none;

        text-align: left;
    }

    .tab-labels label:last-child {
        border-bottom: 1px solid #eee;
    }

    .tab-content {
        border-top: none;
        padding: 20px;
    }

}