.progress {
 margin-bottom: 10px;
 text-align: left;
 background: #FAFAFA;
 border: 1px solid #F2F2F2;
 padding: 4px;
}

.progress .circle,.progress .bar {
 display: inline-block;
 background: #fff;
 width: 40px;
 height: 40px;
 border-radius: 40px;
 border: 1px solid #d5d5da;
 text-align: center;
}

.progress .bar {
 position: relative;
 width: 80px;
 height: 6px;
 top: 0px;
 margin-left: -5px;
 margin-right: -5px;
 border-left: none;
 border-right: none;
 border-radius: 0;
}

.progress .circle .label {
 display: inline-block;
 width: 32px;
 height: 32px;
 line-height: 32px;
 border-radius: 32px;
 margin-top: 3px;
 color: #b5b5ba;
 font-size: 17px;
 cursor: hand;
}

.progress .circle .title {
 color: #b5b5ba;
 font-size: 13px;
 line-height: 30px;
 margin-left: -5px;
}

/* Done / Active */
.progress .bar.done,.progress .circle.done {
 background: #eee;
}


.progress .bar.active {
 background: linear-gradient(to right, #EEE 40%, #FFF 60%);
}

.progress .circle.done .label {
 color: #FFF;
 background: #81CE97;
 box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.next .label {
 color: #FFF;
 background: #ffdc73;
 box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.done .title {
 color: #444;
}

.progress .circle.next .title {
 color: red;
}


.progress .circle.active .label {
 color: #FFF;
 background: #0c95be;
 box-shadow: inset 0 0 2px rgba(0, 0, 0, .2);
}

.progress .circle.active .title {
 color: #0c95be;
}
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}



/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #086A87;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    border-radius: 2px;
 
    /* Position the tooltip text - see examples below! */
    position: absolute;
    z-index: 1;
    width: 180px;
    top: 100%;
    left: 50%; 
    margin-left: -60px;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    text-align: left;
    padding: 4px;
    font-size: 11px;
}