/* --- progress --- */
.progress-container {
  position: relative;
}

.progress.bs-progress,
.panel-progress.bs-progress,
.detail-progress.bs-progress,
.field-progress.bs-progress {
    width:100%;
    height:3px;
    overflow-x: hidden;
    position: absolute;
    top: calc(var(--header-height) - 3px);
}

.progress.bs-progress .line,
.panel-progress.bs-progress .line,
.detail-progress.bs-progress .line,
.field-progress.bs-progress .line {
    position:absolute;
    opacity: 0.4;
    background: var(--primary);
    width:150%;
    height:3px;
}

.progress.bs-progress .subline,
.panel-progress.bs-progress .subline,
.detail-progress.bs-progress .subline,
.field-progress.bs-progress .subline {
    position:absolute;
    background: var(--primary);
    height:3px; 
}

.progress.bs-progress .inc,
.panel-progress.bs-progress .inc,
.detail-progress.bs-progress .inc,
.field-progress.bs-progress .inc {
  animation: progress_increase 2s infinite;
}

.progress.bs-progress .dec,
.panel-progress.bs-progress .dec,
.detail-progress.bs-progress .dec,
.field-progress.bs-progress .dec {
  animation: progress_decrease 2s 0.5s infinite;
}

.field-progress.bs-progress {
  top: 0;
  height: 100%;
  border-radius: 20px;
}

.field-progress.bs-progress .line,
.panel-field-progress.bs-progress .line,
.detail-field-progress.bs-progress .line,
.field-progress.bs-progress .subline {
    height: 100%;
}

@keyframes progress_increase {
  from { left: -5%; width: 5%; }
  to { left: 130%; width: 100%;}
}

@keyframes progress_decrease {
  from { left: -80%; width: 80%; }
  to { left: 110%; width: 10%;}
}