body{
    padding-top:100px
}
.card {
    margin-bottom: 1rem;
}
.card table {
    margin-bottom: 0;
    table-layout: fixed;
}
/* table bars */
.table td.perc {
    position:relative;
    text-align:right;
    width:3em;
    z-index:1;
}
.table td.perc div {
    position:absolute;
    right:0;
    top:10%;
    z-index:-1;
    background-color: #18BC9C;
    height:75%;
    text-align: right;
    border-radius: 0.25rem;
}
.table td.perc span {
    color:black;
}
/* spinner */
.spinner {
    margin: 50px auto;
    width: 70px;
    text-align: center;
  }
.spinner > div {
  width: 18px;
  height: 18px;
  background-color: #3498DB;

  border-radius: 100%;
  display: inline-block;
  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.spinner .bounce1 {
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}
.spinner .bounce2 {
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
  0%, 80%, 100% { -webkit-transform: scale(0) }
  40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
  0%, 80%, 100% { 
    -webkit-transform: scale(0);
    transform: scale(0);
  } 40% { 
    -webkit-transform: scale(1.0);
    transform: scale(1.0);
  }
}