/*------------------------------------------------------------------

[Task Widget Stylesheet]


Last change:	08/21/2017
Assigned to:	You

-------------------------------------------------------------------*/

.task-widget-container {
  position:fixed;
  bottom:70px;
  left:35px;
  transition:.2s ease;
  z-index:100;
}
.circle-graph {
  width: 90px;
  height: 90px;
  display: block;
  position: relative;
  top:30px;
  opacity:0;
  vertical-align:middle;
   -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;
}
.circle-graph.open {
  opacity:1;
  top:0px;
}
.circle-graph.close {
  opacity:0;
  margin-top:0;
  margin-bottom:0;
  height:0;
}

.circle-graph .prec {
  position: relative;
  font-size: 25px;
  font-weight: 500;
  font-family: 'open sans';
   -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;
}
.circle-graph .prec p {
    display:block;
}
.circle-graph .circle {
  position: relative;
  top: 4px;
  left: 4px;
  text-align: center;
  width: 47px;
  height: 47px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: 0 0 5px #ddd;
  -webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;
}
.circle-graph .circle i {
  position:absolute;
  top:14px;
  left:15px;
  color:#199cdb;
  font-size:18px;
  transition:.2s ease;
}
.circle-graph.complete .circle i {
  color:#fff;
}
.circle-graph .active-border {
  position: relative;
  text-align: center;
  width: 55px;
  height: 55px;
  border-radius: 100%;
  background-color: #199cdb;
  box-shadow: 0 0 10px #999;
  /*-webkit-transition: .2s ease;
  -moz-transition: .2s ease;
  -o-transition: .2s ease;
  transition:.2s ease;*/
}

.circle-graph:hover .circle div {
  display:block;
}
.circle-graph .circle div {
  display:block;
  font-family: 'open sans', arial;
  font-weight: 400;
  background:rgba(0,0,0,.8);
  border-radius:5px;
  padding:10px 20px;
  color: #fff;
  text-align:left !important;
  position:absolute;
  width:240px;
  left:70px;
  top:-6px;
}
.circle-graph.complete .circle {
  cursor:pointer;
  background:#199cdb;
  box-shadow:none;
}
.circle-graph.complete .active-border {
    background-image:none !important;
    background-color:#199cdb !important;
}
.circle-graph.complete .active-border:hover .circle {
  background:#098ccb;
}
.circle-graph .active-border:hover #prec {
  display:block !important;
}
.circle-graph.complete .active-border:hover {
  background:#098ccb !important;
  cursor:pointer;
}
.circle-graph .circle div:after {
  content:'';
  position:absolute;
  left:-8px;
  top:23px;
  width:0;
  height:0;
  border-right:8px solid rgba(0,0,0,.8);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
}

.circle-graph .circle div p {
  display: inline-block;
  font-weight: 500;
  font-size: 15px;
  transition: .2s ease;
  position:relative;
  margin:0;
  text-align:left;
  line-height:14px;
}
.circle-graph .circle div p:nth-of-type(2){
    font-weight:600;
}
.circle-graph .circle div #percent {
    position:absolute;
    top:26px;
    right:25px;
    font-size:17px;
}

/**** Fresh Desk Icon ****/
.fresh-desk-icon {
    position:fixed;
    left:35px;
    bottom:30px;
    width:55px;
    height:55px;
    background:#199cdb;
    border-radius:50%;
    color:#fff;
    text-align:center;
    box-shadow:0 0 10px #999;
    cursor:pointer;
    z-index:100;
}
.fresh-desk-icon:hover {
    background:#098ccb;
}
.fresh-desk-icon img {
    width:28px;
    padding-top:16px
}
#lc_chat_layout {
    opacity:0;
    transition:.3s ease !important;
    left:35px !important;
    pointer-events:none;
}
#lc_chat_layout.lc-expanded {
    opacity:1;
    pointer-events:all;
}
@media screen and (max-width:720px){
    #lc_chat_layout {
        left:0px !important;
    }
    #lc_chat_layout.lc-expanded {
        height: 100% !important;
    }
}