body {
    background: #eee;
    font-family: Arial;
}

.tab {
    width: auto;
    margin: 10px auto;
}

    .tab input[type] {
        display: none;
    }
    /*envolve todo o nosso conteúdo*/
    .tab label {
        display: block;
        float: left;
        padding: 12px 20px;
        margin-right: 5px;
        cursor: pointer;
        transition: background-color .3s;
    }

        .tab label:hover,
        .tab input:checked + label {
            background: #5b9780;
            color: #fff;
        }

.tabs {
    clear: both;
    perspective: 400px;
    -webkit-perspective: 400px;
}

    .tabs .content {
        background: #fff;
        max-width: 1200px;
        position: absolute;
        border: 2px solid #5b9780;
        padding: 1px 3px 13px;
        line-height: 1.4em;
        opacity: 0;
        z-index: 0;
        height: 310px
    }

#tab1:checked ~ .tabs .content:nth-of-type(1),
#tab2:checked ~ .tabs .content:nth-of-type(2),
#tab3:checked ~ .tabs .content:nth-of-type(3),
#tab4:checked ~ .tabs .content:nth-of-type(4) {
    transform: rotateX(0);
    opacity: 1;
    z-index: 1;
}

.BarraRolagemcontainer {
    height: 230px; /* altura máxima */
    overflow: auto; /* Adiciona barra de rolagem quando necessário */
    border: 1px solid #ccc; /* Opcional: Adiciona uma borda para visualização */
}