// Bootstrap Loading Skeleton
%loading-skeleton {
  color: transparent;
  appearance: none;
  -webkit-appearance: none;
  background-color: #eee;
  border-color: #eee;

  &::placeholder {
    color: transparent;
  }
}
@keyframes loading-skeleton {
  from {
    opacity: .4;
  }
  to {
    opacity: 1;
  }
}
.loading-skeleton {
  pointer-events: none;
  animation: loading-skeleton 1s infinite alternate;
  
  filter: grayscale(100) contrast(0%) brightness(1.8);

  img {
    filter: grayscale(100) contrast(0%) brightness(1.8);
  }
  h1, h2, h3, h4, h5, h6,
  p, li,
  .btn,
  label,
  .form-control {
    @extend %loading-skeleton;
  }
}
.content-skeleton {
    background-color:#e6e6e6;
    border-radius: 5px;
}
.progress-bar {
  height: 4px;
/*  background-color: rgba(5, 114, 206, 0.2); */
/*  background-color: rgba(5, 114, 206, 1); */
  background-color: var(--color-06) !important;  
  width: 100%;
  overflow: hidden;
}
.progress-bar-value {
  width: 100%;
  height: 100%;
/*  background-color: rgb(5, 114, 206); */
  background-color: rgb(255, 255, 255);
  animation: indeterminateAnimation 2s infinite linear;
  transform-origin: 0% 100%;
}
@keyframes indeterminateAnimation {
  0% {
    transform:  translateX(0) scaleX(0);
  }
  40% {
    transform:  translateX(0) scaleX(0.8);
  }
  100% {
    transform:  translateX(100%) scaleX(1.0);
  }
}