@charset "utf-8";
/* ----- GENERATED FILE! Do NOT EDIT directly! -----
   Always edit and re-compile original {less}-file!
   ------------------------------------------------- 
   (c) Copyright FernUniversitaet in Hagen, ZDI
 */
/* 
    Document   : progressbar
    Created on : 15.09.2011, 15:58:41
    Author     : immo
    Description:
        CSS-Styles für einen Fortschrittsbalken.
        Dies ist eine separate CSS-Datei aus folgenden Gründen:
        - 1.) Nicht Teil von anderem CSS, da kaum irgendwo benötigt (derzeit nur beim Heft-Schliessen)
        - 2.) Nicht in Heftschliessen-Template aufgenommen, damit bei Reloads zur Fortschrittsaktualisierung der Code nicht immer wieder mit übertragen wird.


    Anwendung:
        <div class="progressbar outer">
            <div class="progressbar inner" style="width:75%"></div>
        </div>
        Der Fortschritt ist jeweils per width prozentual ins style-Attribut des span.progressbar.inner einzutragen.

        Der Balken ist stets zentriert im Container mit 10% Margin links und rechts, die Breite passt sich also an die Container-/Fensterbreite an.
        Die Höhe ist 0.5em, hängt also von der Schriftgröße des Containers ab.
        
        Klassen:
            .fullwidth: Entfernt linken und rechten Margin, Balken nimmt nun wirklich 100% der verfügbaren Breite ein.
            .flat     : Balken ohne Rahmen, Rundung und 3D-Effekt, nur rechteckig, auch dünner (0.2 em height).
                        In Kombination mit .fullwidth z.B. für Tabellenzellen (unterer Rand) geeignet.
            .nogb     : Nur in Kombination mit .flat: Deaktiviert die Hintergrundfarbe f. .outer.

Copyright (c) FernUniversität in Hagen 
*/
.progressbar:not(.flat).outer,
.progressbar:not(.flat) .inner {
  border-radius: 1em;
}
.progressbar.outer {
  position: relative;
  width: auto;
}
.progressbar.outer:not(.flat) {
  height: 0.5em;
  margin: 0.25em 10%;
  border: 1px solid silver;
  box-shadow: 0 0 0.4em #e0e0e0 inset;
  background-color: #f9f9f9;
}
.progressbar.outer.flat {
  height: 0.2em;
  margin: 0 10%;
  min-height: 3px;
}
.progressbar.outer.flat:not(.nobg) {
  background-color: #ddd;
}
.progressbar.outer .progressbar.inner {
  position: absolute;
  height: 100%;
  width: 0%;
  background-color: #004c97;
}
:not(.flat).progressbar.outer .progressbar.inner {
  box-shadow: 0.1em 0.2em 0.2em #337fca inset;
}
.progressbar.outer .progressbar.inner.disabled {
  opacity: 0.5;
}
.progressbar.outer.fullwidth {
  margin-left: 0;
  margin-right: 0;
}
@media (prefers-color-scheme: dark) {
  body.supportsDarkMode:not(.disableDarkMode) .progressbar.outer:not(.flat) {
    border-color: #555;
    box-shadow: 0 0 0.4em #333 inset;
    background-color: #111;
  }
  body.supportsDarkMode:not(.disableDarkMode) .progressbar.outer.flat:not(.nobg) {
    background-color: #555;
  }
  body.supportsDarkMode:not(.disableDarkMode) .progressbar.outer .progressbar.inner {
    background-color: #409AF1;
  }
}