@supports (-webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) or (clip-path: polygon(0 0, 0 100%, 100% 100%, 100% 0) ) {
    .kcmux-milestones {
        display: flex;
        margin: 0 -3px;
    }

    .kcmux-milestones .step {
        font-weight: 700;
        text-align: center;
        margin: 0 3px;
        padding: 12px 36px 12px 40px;
        position: relative;
        transition: background-color 0.2s ease;
        display: flex;
        flex: 1 1 0;
        align-items: center;
        flex-direction: column;
        justify-content: center;
    }

    .kcmux-milestones .step:first-child {
        padding: 12px 46px 12px 30px;
    }


    .kcmux-milestones .step:last-child {
        padding: 12px 25px 12px 51px;
    }

    .kcmux-milestones .step:not(:last-child) {
        margin-right: -30px;
    }

    .kcmux-milestones .step:after,
    .kcmux-milestones .step:before {
        top: 0;
        left: 0;
        z-index: -3;
        height: 100%;
        width: 100%;
        content: "";
        position: absolute;
    }

    .kcmux-milestones .step:after {
        background-color: #fff;
        -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
        clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
        transform: scale(0.93);
    }

    .kcmux-milestones .step:before {
        background-color: #ffff;
        -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
        clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%, 16% 50%);
    }

    .kcmux-milestones .step.complete:after,
    .kcmux-milestones .step.complete:before {
        background-color: #08365a;
    }

    .kcmux-milestones .step:nth-child(1):after {
        -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
        border-radius: 10px 0 0 10px;
        transform: scale(0.93);
    }

    .kcmux-milestones .step:nth-child(1):before {
        -webkit-clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
        clip-path: polygon(0% 0%, 84% 0%, 100% 50%, 84% 100%, 0% 100%);
        border-radius: 10px 0 0 10px;
    }

    .kcmux-milestones .step:last-child:after {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
        border-radius: 0 10px 10px 0;
        transform: scale(0.93);
    }

    .kcmux-milestones .step:last-child:before {
        -webkit-clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
        clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%, 16% 50%);
        border-radius: 0 10px 10px 0;
    }

    .kcmux-milestones .step .label {
        position: relative;
        width: 100%;
        color: #777;
    }

    .kcmux-milestones .step.complete .label {
        color: #fff;
    }

    .kcmux-milestones .step .value {
        border-top: 1px solid #c1c1c1;
        color: #fff;
        padding-top: 4px;
        margin-top: 6px;
        font-weight: 300;
    }
}