.tabs {
    display: flex;
    position: relative;
    background-color: #fff;
    box-shadow: 0 0 1px 0 #2c978a, 0 6px 12px 0 #2c978a;
    padding: 8px 8px 0px 8px;
    /* border-radius: 99px; */
    z-index: 2;
}
input[type="radio"] {
    display: none;
}
.tab {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 54px;
    width: 250px;
    font-size: 1.05rem;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.15s ease-in;
}
.notification {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    margin-left: 0.75rem;
    /* border-radius: 50%; */
    background-color: #72737626;
    transition: 0.15s ease-in;
}
input[type="radio"]:checked + label {
    color:#fff;
    z-index: 2;

}
input[type="radio"]:checked + label > .notification {
    background-color: #2c978a;
    color: #fff;
}
input[id="radio-1"]:checked ~ .glider {
    transform: translateX(0);
}
input[id="radio-2"]:checked ~ .glider {
    transform: translateX(100%);
}
input[id="radio-3"]:checked ~ .glider {
    transform: translateX(200%);
}
.glider {
    position: absolute;
    display: flex;
    height: 54px;
    width: 250px;
    background-color: #2c978a;
    z-index: 1;
    /* border-radius: 99px; */
    transition: 0.25s ease-out;
}
@media (max-width: 700px) {
    .tabs {
        transform: scale(0.6);
   }
}