﻿body {
}
/*------------------------------------------------------------------

[Task Widget Stylesheet]


Last change:	08/21/2017
Assigned to:	You

-------------------------------------------------------------------*/

#task-progress {
  position:relative;
  transition:.2s ease;
  z-index:100;
}
.circle-graph-progress {
  width: 150px;
  height: 120px;
  display: block;
  position: relative;
  opacity:1;
  text-align:center;
  margin:0 auto;
  vertical-align:middle;
   -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;
}
.circle-graph-progress .active-border {
  position: relative;
  text-align: center;
  width: 120px;
  height: 120px;
  border-radius: 100%;
  background-color: #199cdb;
  margin:0 auto;
  /*-webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;*/
}
.circle-graph-progress #prec {
  position: relative;
  font-size: 25px;
  font-weight: 500;
  font-family: 'open sans',Arial,sans-serif;
   -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;
  top:44px;
  text-align:center;
}

.circle-graph-progress .circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 111px;
  height: 111px;
  border-radius: 50%;
  background-color: #fff;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;
}
.circle-graph-progress .circle i {
  position:absolute;
  top:14px;
  left:15px;
  color:#199cdb;
  font-size:18px;
  transition:.2s ease;
}
.circle-graph-progress.complete .circle i {
  color:#fff;
}

.circle-graph-progress.complete .circle {
  cursor:pointer;
  background:#199cdb;
  box-shadow:none;
}
.circle-graph-progress.complete .active-border {
    background-image:none !important;
    background-color:#199cdb !important;
}
.circle-graph-progress.complete .active-border:hover .circle {
  background:#098ccb;
}
.circle-graph-progress .active-border:hover #prec {
  display:block !important;
}
.circle-graph-progress.complete .active-border:hover {
  background:#098ccb !important;
  cursor:pointer;
}
