/* Form Progress */
.progressZ {
  width: 100%;
  margin: 20px auto;
  text-align: center;  
  background-color:White
}
.progressZ .circle,
.progressZ .bar {
  display: inline-block;
  background: #fff;
  width: 35px; height: 35px;
  border-radius: 35px;
  border: 1px solid #d5d5da;
}
.progressZ .bar {
  position: relative;
  width: 58px;
  height: 6px;
  top: -28px;
  margin-left: -2px;
  margin-right: -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}
.progressZ .circle .label {
  display: inline-block;
  width: 35px;
  height: 35px;
  line-height: 35px;
  border-radius: 35px;
  margin-top: 0px;
  color: #b5b5ba;
  font-size: 11px;
}
.progressZ .circle .title {
  color: #b5b5ba;
  font-size: 9px;
  line-height: 15px;
  white-space: nowrap ;  
}

/* Done / Active */
.progressZ .bar.done,
.progressZ .circle.done {
  background: #0c95be;
}
.progressZ .bar.active {
  background: linear-gradient(to right, #8bc435 40%, #FFF 60%);
}
.progressZ .bar.cancel {
  background: linear-gradient(to right, #FFF 50%, #f3073e 50%);
}
.progressZ .bar.rejeitado {
  background: linear-gradient(to right, #ff8100 40%, #FFF 60%);
}
.progressZ .circle.done .label {
  color: #FFF;
  background: #0c95be;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progressZ .circle.done .title {
  color: #444;
}
.progressZ .circle.active .label {
  color: #FFF;
  background: #8bc435;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progressZ .circle.active .title {
  color: #444;
}

.progressZ .circle.cancel .label {
  color: #FFF;
  background: #f3073e;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progressZ .circle.cancel .title {
  color: #f3073e;
}

.progressZ .circle.rejeitado .label {
  color: #FFF;
  background: #ff8100;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}
.progressZ .circle.rejeitado .title {
  color: #444;
}




/* Form Progress */
.progressY {
  width: 100%;
  margin: 20px auto;
  text-align: center;  
  background-color:White
}

.progressY .bar {
  position: relative;
  width: 58px;
  height: 6px;
  top: -32px;
  margin-left: -2px;
  margin-right: -5px;
  border-left: none;
  border-right: none;
  border-radius: 0;
}




.progressY .circle .label {
  display: inline-block;
  width: 46px;
  height: 46px;
  line-height: 46px;
  border-radius: 46px;
  margin-top: 0px;
  color: #b5b5ba;
  font-size: 11px;
}
.progressY .circle .title {
  color: #b5b5ba;
  font-size: 9px;
  line-height: 15px;
  margin-left:3px;
  white-space: nowrap ;  
}

.progressY .bar {
  display: inline-block;
  background: #fff;
  width: 46px; height: 46px;
  border-radius: 46px;
  border: 1px solid #d5d5da;

}
.progressY .circle {
    display: inline-block;
    background: #fff;
    width: 46px; height: 46px;
    border : 0px;
    border-radius : 20px 20px 20px 20px;
    moz-border-radius : 20px 20px 20px 20px;
    -webkit-box-shadow : 0px 0px 5px rgba(0,0,0,0.0);
    -moz-box-shadow : 0px 0px 5px rgba(0,0,0,0.0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}


.progressY .circle.done {
    background:#39b8de ;   
}
.progressY .bar.cancel {
  background: #f3073e;
}
.progressY .bar.active {
  background: #8bc435;
}
.progressY .circle.inactive {
  background: #f3fbf9;
}

.progressY .circle.query {
  background: #d8e338;
}
.progressY .circle.rejeitado {
  background: #ff8100;
}



.progressY .circle.active .title {
  color: #0c95be;
}
.progressY .circle.done .title {
  color: #444;
}
.progressY .circle.rejeitado .title {
  color: #444;
}
.progressY .circle.cancel .title {
  color: #f3073e;
}
.progressY .circle.query .title {
  color: #444;
}






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


.progressY .circle.cancel .label {
  color: #FFF;
  background: #f3073e;
  box-shadow: inset 0 0 2px rgba(0,0,0,.2);
}









.progressY .barActiveToCancel 
 {
    display: inline-block;
     background: linear-gradient(to right, #8bc435 1%, #f3073e,#f3073e,#f3073e); 
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barActiveToDone 
 {
    display: inline-block;
    background: linear-gradient(to right, #8bc435 1%, #39b8de,#39b8de,#39b8de); 
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barActiveToInactive
 {
    display: inline-block;
    background: linear-gradient(to right, #8bc435 1%, #f3fbf9,#f3fbf9,#f3fbf9);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barActiveToQuery 
 {
    display: inline-block;
    background: linear-gradient(to right, #8bc435 1%, #d8e338,#d8e338,#d8e338);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barActiveToReject 
 {
    display: inline-block;
    background: linear-gradient(to right, #8bc435 1%, #ff8100,#ff8100,#ff8100);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barActiveToActive
 {
    display: inline-block;
   background: #8bc435;
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barCancelToActive
 {
    display: inline-block;
    background: linear-gradient(to right, #f3073e 1%, #8bc435,#8bc435,#8bc435);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barCancelToDone
 {
    display: inline-block;
     background: linear-gradient(to right, #f3073e 1%, #39b8de,#39b8de,#39b8de);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barCancelToInactive
 {
    display: inline-block;
    background: linear-gradient(to right, #f3073e 1%, #f3fbf9,#f3fbf9,#f3fbf9);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barCancelToQuery
 {
    display: inline-block;
    background: linear-gradient(to right, #f3073e 1%, #d8e338,#d8e338,#d8e338);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barCancelToReject
 {
    display: inline-block;
     background: linear-gradient(to right, #f3073e 1%, #ff8100,#ff8100,#ff8100);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barCancelToCancel
 {
    display: inline-block;
     background:#f3073e;
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barDoneToActive
 {
    display: inline-block;
   background: linear-gradient(to right, #39b8de 90%, #8bc435);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barDoneToCancel 
 {
    display: inline-block;
    background: linear-gradient(to right, #39b8de 90%, #f3073e);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barDoneToInactive
 {
    display: inline-block;
    background: linear-gradient(to right, #39b8de 1%, #f3fbf9,#f3fbf9,#f3fbf9);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barDoneToQuery
 {
    display: inline-block;    
    background: linear-gradient(to right, #39b8de 90%, #d8e338);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barDoneToReject
 {
    display: inline-block;
   background: linear-gradient(to right, #39b8de 90%, #ff8100);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barDoneToDone
 {
    display: inline-block;
   background: #39b8de;
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barInactiveToActive 
 {
    display: inline-block;
    background: #f3fbf9;
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barInactiveToCancel 
 {
    display: inline-block;
    background: linear-gradient(to right, #f3fbf9 1%, #f3073e,#f3073e,#f3073e);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barInactiveToDone 
 {
    display: inline-block;
     background: linear-gradient(to right, #f3fbf9 1%, #39b8de,#39b8de,#39b8de);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barInactiveToQuery 
 {
    display: inline-block;
     background: linear-gradient(to right, #f3fbf9 1%, #d8e338,#d8e338,#d8e338);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barInactiveToReject 
 {
    display: inline-block;
     background: linear-gradient(to right, #f3fbf9 1%, #ff8100,#ff8100,#ff8100);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barInactiveToInactive
 {
    display: inline-block;
    background: #f3fbf9;
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barQueryToActive
 {
    display: inline-block;
     background: linear-gradient(to right, #d8e338 1%, #d8e338,#8bc435,#8bc435);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barQueryToInactive
 {
    display: inline-block;
    background: linear-gradient(to right, #d8e338 1%, #f3fbf9,#f3fbf9,#f3fbf9);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barQueryToCancel 
 {
    display: inline-block;
     background: linear-gradient(to right, #d8e338 1%, #f3073e,#f3073e,#f3073e);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barQueryToDone 
 {
    display: inline-block;
    background: linear-gradient(to right, #d8e338 1%, #39b8de,#39b8de,#39b8de);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barQueryToReject 
 {
    display: inline-block;
     background: linear-gradient(to right, #d8e338 1%, #ff8100,#ff8100,#ff8100);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barQueryToQuery
 {
    display: inline-block;
    background: #d8e338;
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barRejectToActive
 {
    display: inline-block;
    background: linear-gradient(to right, #ff8100 1%, #8bc435,#8bc435,#8bc435);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barRejectToCancel 
 {
    display: inline-block;
    background: linear-gradient(to right, #ff8100 1%, #f3073e,#f3073e,#f3073e);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barRejectToDone 
 {
    display: inline-block;
    background: linear-gradient(to right, #ff8100 1%, #39b8de,#39b8de,#39b8de);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barRejectToInactive
 {
    display: inline-block;
    background: linear-gradient(to right, #ff8100 1%, #f3fbf9,#f3fbf9,#f3fbf9);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barRejectToQuery
 {
    display: inline-block;
    background: linear-gradient(to right, #ff8100 1%, #d8e338,#d8e338,#d8e338);
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}
.progressY .barRejectToReject
 {
    display: inline-block;
    background: #ff8100;
    border: 0px solid rgba(48, 163, 198, 0.57);
    position: relative;
    width: 60px;
    height: 5px;
    top: -32px;
    margin-left: -4px;
    margin-right: -5px;
}