.tabs {
    list-style: none;
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
}

    .tabs:after {
        content: '';
        display: table;
        clear: both;
    }

    .tabs input[type=radio] {
        display: none;
    }

    .tabs label {
        display: inline-block;
        min-width: 20%;
        flex: 1 1 20%;
        color: #ccc;
        text-align: center;
        cursor: pointer;
        transition: all 0.5s;
    }

        .tabs label span {
            display: none;
            font-size: 1rem;
            font-weight: 600;
        }

        .tabs label:hover {
            color: #3498db;
        }

            .tabs label:hover .icon {
                border-color: #3498db;
                background-position: 50px 0;
                background-size: 100px 50px;
            }

.tab__content {
    display: none;
    text-align: center;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
    background-color: #fff;
    margin-top: 2rem;
    text-align: start;
}

@keyframes scale {
    0% {
        transform: scale(0.9);
        opacity: 0;
    }

    50% {
        transform: scale(1.01);
        opacity: 0.5;
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

.tabs [id^="tab"]:checked + label {
    background: #fff;
    color: #3498db;
}

    .tabs [id^="tab"]:checked + label i {
        border-color: #3498db;
        background-position: 50px 0;
        background-size: 100px 50px;
    }

/* Show content for the active tab */
#tab1:checked ~ .tab__content:nth-child(6),
#tab2:checked ~ .tab__content:nth-child(7),
#tab3:checked ~ .tab__content:nth-child(8),
#tab4:checked ~ .tab__content:nth-child(9),
#tab5:checked ~ .tab__content:nth-child(10) {
    display: block;
}

@media (min-width: 768px) {
    .tabs label span {
        display: block;
    }
}

.iconn {
    margin-top: 1rem;
    display: inline-block;
    width: 54px;
    height: 54px;
    border-radius: 100%;
    border: 2px solid #cacfd6;
    background-size: 100px 50px;
    box-sizing: border-box;
}

.Info-cal {
    background: white url('../img/Icons/Personal.png');
    background-position: 0 0;
    background-size: 100px 50px;
}

.snapshot {
    background: white url('../img/Icons/Date.png');
    background-size: 100px 50px;
    background-position: 0 0;
}

.Doc-calls {
    background: white url('../img/Icons/Document.png');
    background-size: 100px 50px;
    background-position: 0 0;
}

.Visit-apps {
    background: white url('../img/Icons/Visit.jpg');
    background-size: 100px 50px;
    background-position: 0 0;
}

.People-calls {
    background: white url('../img/Icons/Users.jpg');
    background-size: 100px 50px;
    background-position: 0 0;
}
.Decision-calls {
    background: white url('../img/Icons/Decision.png');
    background-size: 100px 50px;
    background-position: 0 0;
}