.demo-preview {
  padding-top: 100px;
  padding-bottom: 10px;
  margin: auto;
  width: 50%;
  text-align: center;
}

#progressBar{
  height: 100%;
  display: none;
}

#lightningBar{
  display: none;
}

#loadingBar{
  display: none;
}

.progress {
  background-color: #f5f5f5;
  border-radius: 3px;
  box-shadow: none;
  text-align: center;
}
.progress.progress-xs {
  height: 5px;
  margin-top: 5px;
}
.progress.progress-sm {
  height: 10px;
  margin-top: 5px;
}
.progress.progress-lg {
  height: 25px;
}
.progress.vertical {
  position: relative;
  width: 20px;
  height: 200px;
  display: inline-block;
  margin-right: 10px;
}
.progress.vertical > .progress-bar {
  width: 100% !important;
  position: absolute;
  bottom: 0;
}
.progress.vertical.progress-xs {
  width: 5px;
  margin-top: 5px;
}
.progress.vertical.progress-sm {
  width: 10px;
  margin-top: 5px;
}
.progress.vertical.progress-lg {
  width: 30px;
}

.progress-bar {
  background-color: #7B675B;
  box-shadow: none;
}
.progress-bar.text-left {
  text-align: left;
}
.progress-bar.text-left span {
  margin-left: 10px;
}
.progress-bar.text-right {
  text-align: right;
}
.progress-bar.text-right span {
  margin-right: 10px;
}

@-webkit-keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
@keyframes progress-bar-stripes {
  from {
    background-position: 40px 0;
  }
  to {
    background-position: 0 0;
  }
}
.progress.active .progress-bar,
.progress-bar.active {
  -webkit-animation: progress-bar-stripes 2s linear infinite;
  -o-animation: progress-bar-stripes 2s linear infinite;
  animation: progress-bar-stripes 2s linear infinite;
}

.progress-striped .progress-bar,
.progress-bar-striped {
  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: -o-linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
  background-size: 40px 40px;
}

.progress-bar-secondary {
  background-color: #CCBAA1;
}

.progress-bar-default {
  background-color: #B0BEC5;
}

.progress-bar-success {
  background-color: #84ADD7;
}

.progress-bar-info {
  background-color: #29B6F6;
}

.progress-bar-warning {
  background-color: #FFD600;
}

.progress-bar-danger {
  background-color: #ef1c1c;
}

.progress-lightning {
  background-color:  #FEE185;
}