.x-btn.timeline,
.x-btn-default-small.timeline,
.x-btn-default-small-over.timeline,
.x-btn-default-small-pressed.timeline,
.x-btn-default-small-disabled.timeline {
    display: inline-block !important;
    height: 22px !important;
    line-height: 22px !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 20px !important;
    overflow: visible !important;
    vertical-align: middle !important;
    background-color: #e0e0e0 !important;
    background-image: linear-gradient(180deg, #f5f5f5 0%, #d4d4d4 100%) !important;
    box-shadow: none !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%) !important;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%, 11px 50%) !important;
}

/* First button: flat left edge */
.x-btn.timeline.one {
    padding-left: 11px !important;
    -webkit-clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%) !important;
    clip-path: polygon(0 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 0 100%) !important;
}

.x-btn.timeline .x-btn-wrap,
.x-btn.timeline .x-btn-button,
.x-btn.timeline .x-btn-inner {
    height: 22px !important;
    line-height: 22px !important;
}

.x-btn.timeline .x-btn-inner {
    color: #444444 !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    padding: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.6) !important;
    white-space: nowrap !important;
}

/* Hover */
.x-btn.timeline.x-btn-default-small-over {
    background-color: #d4d4d4 !important;
    background-image: linear-gradient(180deg, #ededed 0%, #c4c4c4 100%) !important;
}

/* Current / selected (pressed) */
.x-btn.timeline.x-btn-default-small-pressed,
.x-btn.timeline.x-btn-default-small-over.x-btn-default-small-pressed {
    background-color: #1a0090 !important;
    background-image: linear-gradient(180deg, #3b1fd6 0%, #12006b 100%) !important;
}

.x-btn.timeline.x-btn-default-small-pressed .x-btn-inner,
.x-btn.timeline.x-btn-default-small-over.x-btn-default-small-pressed .x-btn-inner {
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.4) !important;
}

/* Completed / done (disabled = green) */
.x-btn.timeline.x-btn-default-small-disabled {
    opacity: 1 !important;
    background-color: #1aaa35 !important;
    background-image: linear-gradient(180deg, #2ecc52 0%, #17a030 100%) !important;
}

.x-btn.timeline.x-btn-default-small-disabled .x-btn-inner,
.x-btn.timeline.x-item-disabled .x-btn-inner {
    opacity: 1 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-shadow: 0 1px 1px rgba(0,0,0,.3) !important;
}