body{
  background: rgb(255,255,255);
background: linear-gradient(180deg, rgba(255,255,255,1) 34%, rgba(10,119,224,1) 100%);
}
.track-form .form-control{
  height: calc(1.5em + .75rem + 8px);
  text-transform: uppercase;
  border-color: #8c8989;
  color: #000;
  font-weight: 700;
}
#trackContainer{
  margin-bottom: 5rem;
}
.form-group{
  margin-bottom: 1rem;
}
#loading{
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: transparent;
  z-index: 999;
  display: none;
}
.loader{
  position: absolute;
  left: 49%;
  top: 50%;
  z-index: 999;
}
.dot{
  width: 10px;
  height: 10px;	
  display: inline-block;
  border-radius: 50%;
  
}
.dot1{
  background-color: #1abc9c;
  animation: jump-up 0.6s 0.1s linear infinite;
}
.dot2{
  background-color: #ffd64a;
  animation: jump-up 0.6s 0.2s linear infinite;
}
.dot3{
  background-color: #e067af;
  animation: jump-up 0.6s 0.3s linear infinite;
}

@Keyframes jump-up{
  50%{
    transform: translate(0,15px);
  }
}
.timeline{
    counter-reset: test 0;
    position: relative;
  }
  
  .timeline li{
    list-style: none;
    float: left;
    width: 33.3333%;
    position: relative;
    text-align: center;
    text-transform: uppercase;
  }
  
  ul:nth-child(1){
    color: #4caf50;
  }
  
  .timeline li:before{
    counter-increment: test;
    content: counter(test);
    width: 50px;
    height: 50px;
    border: 3px solid #148f19;
    border-radius: 50%;
    display: block;
    text-align: center;
    line-height: 50px;
    margin: 0 auto 10px auto;
    background: #fff;
    color: #000;
    transition: all ease-in-out .3s;
    cursor: pointer;
    position: relative;
      z-index: 2;
  }
  
  .timeline li:after{
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: grey;
    top: 25px;
    left: -50%;
    z-index: 1;
    transition: all ease-in-out .3s;
  }
  
  .timeline li:first-child:after{
    content: none;
  }
  .timeline li.active-tl{
    color: #555555;
  }
  .timeline li.active-tl:before{
    background: #4caf50;
    color: #F1F1F1;
  }
  
  .timeline li.active-tl + li:after{
    background: #4caf50;
  }
  
  .timeline-error li:last-child.active-tl:before {
      background: #e55353;
      color: #F1F1F1;
      border: 3px solid #640b1c;
  }
  

.timeline-pending-state li:last-child.active-tl:before {
    background: #bfbcbc;
    color: #000000;
    border: 3px solid #d7d3d3;
}
.timeline-pending-state li:nth-child(2).active-tl:before {
  background: #bfbcbc;
  color: #000000;
  border: 3px solid #d7d3d3;
}

.timeline-state-approve li:nth-child(2).active-tl:before {
  background: #4caf50;
  color: #fff;
  border: 3px solid #298f18;
}
.timeline-state-approve li:last-child.active-tl:before {
  background: #bfbcbc;
  color: #000000;
  border: 3px solid #d7d3d3;
}


.timeline-state-reject li:nth-child(2).active-tl:before {
  background: #e55353;
  color: #F1F1F1;
  border: 3px solid #640b1c;
}
.timeline-state-reject li:last-child.active-tl:before {
  background: #bfbcbc;
  color: #000000;
  border: 3px solid #d7d3d3;
}

.timeline-federation-approve li:nth-child(2).active-tl:before {
  background: #4caf50;
  color: #fff;
  border: 3px solid #298f18;
}
.timeline-federation-approve li:last-child.active-tl:before {
  background: #4caf50  !important;
  -webkit-print-color-adjust: exact; 
  color: #fff;
  border: 3px solid #298f18;
}



.timeline-federation-reject li:nth-child(2).active-tl:before {
  background: #4caf50;
  color: #fff;
  border: 3px solid #298f18;
}
.timeline-federation-reject li:last-child.active-tl:before {
  background: #e55353  !important;
  -webkit-print-color-adjust: exact; 
  color: #fff;
  border: 3px solid #640b1c;
}
.labels{
  font-size: 16px;
  color: #000;
  font-weight: 600;
}
.heading{
  display: inline-block;
  background: #4654B6;
  font-size: 23px;
  color: #fff;
  padding: 10px;
  font-weight: 700;
  margin-top: 0.60rem;
  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
  border-radius: 5px;
}
.main-heading{
  font-size: 20px;
  text-transform: uppercase;
  margin-top: 10px;
  font-weight: 700;
}