#circle{align-items:center;background:#BDC3C7;border-radius:50%;bottom:0;color:#fff;display:flex;flex-direction:column;height:50px;justify-content:center;left:0;margin:auto;position:absolute;right:0;text-align:center;top:0;width:50px;-webkit-transition:background-color 1s;-moz-transition:background-color 1s;-ms-transition:background-color 1s;transition:background-color 1s}#circle:hover{background:#c6a0d5;cursor:pointer}#circle.active{background:#8E44AD}#circle.complete{background:#1ABC9C}#circle.complete #label{display:none}#circle #count{font-weight:700;margin-right:2px}