/* Style the tab */
.tab {
    overflow: hidden;
    /*border: 1px solid #ccc;
    background-color: #f1f1f1;*/
}

    /* Style the buttons inside the tab */
    .tab button {
        /*background-color: inherit;*/
        float: left;
        border: none;
        outline: none;
        cursor: pointer;
        padding: 5px 10px;
        margin-right: 5px;
        transition: 0.3s;
        /*font-size: 17px;*/
    }

        /* Change background color of buttons on hover */
        .tab button:hover {
            color: darkred;
        }

        /* Create an active/current tablink class */
        /*.tab button.active {
            background-color: #ccc;
        }*/

/* Style the tab content */
.tabcontent {
    display: none;
    padding: 6px 12px;
    border: 1px solid #ccc;
    border-top: none;
    animation: fadeEffect 1s;
}

@keyframes fadeEffect {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}