/*** Allgemeines ***/

body {
    font-size: 16px;
    font-weight: 300;
    font-family: "Gotham SSm A", "Gotham SSm B", Verdana, sans-serif;
    color: #333;
}
p { color: #454545; }
a { color: #008dbd; font-weight: 500; text-decoration: none; }
a:hover { color:#002c6c; text-decoration: none; }
h1 { font-weight: 400; margin: 20px 0; color: #002c6c; }
label { font-weight: 400; }
.btn { border-radius: 0; }
.btn-primary {
    background-color: #f26334; color: #fff;
    border: 0;
}
.input-group .form-control:first-child { border-radius: 0; } /* da auch der angehängte Button keinen Radius hat */
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #cc3c0d !important;
}
/* Forcierter Zeilenumbruch, wenn zu lang. Nur word-wrap: break-word wäre hübscher, da es bevorzugt an Spaces umbricht, 
   aber das funktioniert in Tabellen nicht. */
.break-all { word-wrap: break-word; word-break: break-all; } 

table th a, 
.actions > a,
a.action { color: #002c6c; }
table th a:hover, 
.actions > a:hover,
a.action:hover { color: #f26334; }
.actions > a.btn,
a.action { font-size: 16px; margin: 0 3px; padding: 0;}
.actions ul.dropdown-menu > li > a { text-align: left; }

th.mit-sortiericon a::after {
    font-family: "Glyphicons Halflings"; font-style: normal; font-weight: 400; 
    line-height: 1; font-size: 12px; padding-left: 0.5em; content: '\e150';
}

div.btn-toolbar, div.suchfeld { margin-bottom: 1em; }
@media screen and (max-width: 991px) {
    span[data-short] { display: none; }
    span[data-short]:after { content: attr(data-short); display: block; }
}
@media screen and (max-width: 1199px) {
    table.font-md-smaller { font-size: 14px; }
}
fieldset + fieldset { margin-top: 1em; }
div.abstand { margin-bottom: 0.5em; }
.tooltip-lang { text-align: left; padding: 10px;}
.tooltip-lang > div { margin-bottom: 0.5em; }
.tooltip.top .tooltip-arrow { border-top-color: #454545; }
.tooltip.top .tooltip-inner {
    max-width: 550px;
    color: #fff;
    background-color: #454545;
    box-shadow: 0 2px 10px 1px rgba(0, 0, 0, 0.5);
    font-family: "Gotham SSm A", "Gotham SSm B", Verdana, sans-serif;
}
.tooltip { opacity: 1 !important; }
.tooltip a { color: #fff; }
.tooltip a:hover { text-decoration: underline; }
.glyphicon-info-sign { color: #002c6c; }
span.gepir-icon { 
    font-weight: bold; display: inline-block; line-height: 1; font-size:110%;
}

img.Horizontal {
    float: left;
    width: 50%;
    padding: 5px 5% 20px 5%;
}

/* Farben aus dem Toolkit */
.alert-danger { background-color: #fce0d6; }
.alert-danger p { color: #cc532b; }
.alert-warning { background-color: #feefd6; }
.alert-warning p { color: #bd7e26; }
.alert-info { background-color: #ccedf5; }
.alert-info p { color: #007d99; }
.alert-success { background-color: #e4f3d9; }
.alert-success p { color: #5a8f32; }
.btn-danger { background-color: #cc532b; }

/*** Anpassungen für Schirme kleiner als 768px (keine Bootstrap-Responsiveness, da ungetestet und von den Content-Seiten nicht unterstützt) ***/
.container {
    min-width: 768px;
}
/* Navbar-Logik für Handy-Schirme rückgängig machen, um auch dort
   ein normales Menü zu haben. */
.navbar-nav { margin: 0; }
.navbar-nav > li { float: left; }
.navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; padding-left: 0px; padding-right: 0px; margin-left: 15px; margin-right: 15px;}
.navbar-nav .open .dropdown-menu { 
    position: absolute; float: left; background-color: #fff;
    border: 1px solid #ccc;
    -webkit-box-shadow: 0 6px 12px rgba(0,0,0,.175);
    box-shadow: 0 6px 12px rgba(0,0,0,.175)
}
.navbar-nav .open .dropdown-menu > li > a { padding: 3px 20px; }
.navbar-default .navbar-nav .open .dropdown-menu > li > a:hover { background-color: #f5f5f5; }
.form-horizontal .control-label { text-align: right; padding-top: 7px; margin-bottom: 0; }

/* Auf großen Schirmen erlauben wir dem Menü, eine Spur breiter zu werden, damit
    das Admin-Menü auch bei deutscher Beschriftung (gerade noch) hinein passt.
*/
@media screen and (min-width: 1250px) {
    .navbar-nav { margin-right: -20px; }
}

/*** Häufig genutzte Designelemente ***/

div.box { padding: 15px; }
div.box h1 { margin-top: 5px; font-size: 18px; }
div.box h1 span.glyphicon { padding-right: 5px; }
div.box h2 {
    line-height: 26px; color: #002c6c; font-size: 18px; 
    margin-top: 0; margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #b2b2b8;
}

div.box button { margin-top: 20px; }
div.box div.form-horizontal button { margin-top: 0;}

div.box-orange-top { border-top: 7px solid #f26334; }
div.box-blau-top { border-top: 7px solid #002c6c; }

div.box-grau { background-color: #f4f4f4; }
div.box-weiss {
    border-left: 1px solid #b1b3b3;
    border-right: 1px solid #b1b3b3;
    border-bottom: 1px solid #b1b3b3;
}

@media screen and (min-width: 992px)
{
    div.row.equal { display: flex; flex-wrap: wrap; }
    div.row.equal > div[class*='col-md-'] { display: flex; flex-direction: column; }
    div.row.equal > div[class*='col-md-'] > div.box { flex-grow: 1; }

    div.row.equal:before, div.row.equal:after { content: normal; } /* Safari-Bugfix, siehe https://stackoverflow.com/q/34250282 */
}

/*** Allgemeines Layout (Kopf + Main + Fuß) ***/
header {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: 0 -18px 30px 26px rgba(0,0,0,.05);
    background: white; /* Nicht-durchsichtiger Hintergrund, damit beim Scrollen nichts des main-Bereichs durchscheinen kann. */
    z-index: 999; /* Dropdown-Nav-Menüs über Inhalt anzeigen */
}
header .title {
    margin: 4px 10px 2px 120px;
    top: 35px;
    position: absolute;
}
header div.header-top { 
    background-color: #f4f4f4; 
    border-bottom: 1px solid #b1b3b3;
    margin-bottom: 1px;
}
header div.header-top div.logo { 
    float: left;
    padding-top: 39px;
    padding-bottom: 31px;
}
header div.header-top div.logo a { display: inline-block; }
header div.header-top div.logo a img { height: 61px; margin-right: 20px; }
header div.header-top div.logo p { display: inline-block; }

header div.secondary-nav {
    float: right;
    margin-top: 35px;
    text-align: right;
}
header div.secondary-nav ul.list-inline li { 
    border-right: 1px solid #b1b3b3; 
    padding-left: 1px;
}
header div.secondary-nav ul.list-inline li:last-of-type { 
    border-right: 0; 
    padding-right: 0;
}

header nav.navbar-default {
    margin-bottom: 0;
    border-top: 0 solid #b1b3b3;
    border-right: 0 solid #b1b3b3;
    border-bottom: 1px solid #b1b3b3;
    border-left: 0 solid #b1b3b3;
    background-color: rgba(177, 179, 179, 0.3);
}
header nav.navbar-default li a { color: #002c6c !important; }
header nav.navbar-default li a:hover { color: #f26334 !important; }
header nav.navbar-default .glyphicon-menu-down { font-size: 14px; padding-left: 2px;}

main { 
    margin-top: 184px; /* Wird von JavaScript basierend auf der tatsächliche header-Höhe angepasst. */
    padding-top: 26px; 
}

footer { margin-bottom: 20px; }
footer hr { border-color: #b1b3b3; margin-bottom: 15px; }
footer div.social-media a { display: inline-block; width: 40px; height: 41px; }
footer div.social-media a img { width: 100%; }

/*** Elemente mit fixer Breite ***/

td.gln { width: 14ch; }
td.actions { width: 1px; white-space: nowrap; } /* So schmal wie möglich. */
td.actions div.modal { white-space: normal; }

.basisnummer { width: 13rem; text-align: center; }
.lokation, .artikelbezug { width: 10rem; text-align: center; }
.pruefziffer { width: 8rem; text-align: center; }


/*** Listen ***/

table tr.Pager { background-color: white !important; }
table tr.Pager table { margin: 4px auto; }
table tr.Pager a { padding-left: 5px; padding-right: 5px; color: #002c6c; }
table tr.Pager a:hover { color: #f26334; }
table tr.Pager span { padding-left: 5px; padding-right: 5px; font-weight: 600; color: #f26334; }

tr.locked-gtin td:not(.actions) { color: gray; position: relative; text-decoration:line-through;}
/* tr.locked-gtin td:not(.actions):before {
    content: " ";  position: absolute;
    top: 50%; left: 0; border-bottom: 1px dashed #CCC;
    width: 100%;
}*/

/*** Eingabeformulare ***/

/* Fehlerpunkte:
    * span.fehlerpunkt: Explizit positionierter und mit data-feld zugewiesener Fehlerpunkt
    * div/span.control-mit-fehlerpunkt: Automatischer Fehlerpunkt innerhalb des rechten Rands des Steuerelements
*/
span.fehlerpunkt.aktiv:before,
.control-mit-fehlerpunkt.aktiv:after {
    content: "\25cf"; font-size: 32px; color: #d9534f; 
}
span.fehlerpunkt.aktiv:before {
    position: relative; line-height: 1px; top: 3px;
}
.control-mit-fehlerpunkt { position: relative; }
.control-mit-fehlerpunkt.aktiv:after { 
    position: absolute; right: 5px; 
}
div.control-mit-fehlerpunkt.aktiv:after { top: -8px; }
span.control-mit-fehlerpunkt.aktiv:after { top: -15px; }
.control-mit-fehlerpunkt.fehlerpunkt-links.aktiv:after { 
    right: inherit; left: 5px;
}
div.form-horizontal hr {
    border-top-color: #b2b2b8;
}
/* Bei einem full-size Dropdown muss der Fehlerpunkt etwas weiter nach links, um den
   Dropdown-Pfeil nicht zu verdecken */
.control-mit-fehlerpunkt.fehlerpunkt-fuer-dropdown.aktiv:after { right: 20px; }

/* Switches */
label.switch {
    position: relative;
    display: inline-block;
    width: 2.6em;
    height: 1.5em;
    top: -2px;
}
label.switch > input[type=checkbox] { 
    height: 0; width: 0; 
    opacity: 0; /* von Firefox benötigt */
}
label.switch > span.slider {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background-color: #bbb;
    border-radius: 57%/100%;
    transition: .5s;
}
label.switch > span.slider:before {
    position: absolute; top: 0.2em; left: 0.2em; width: 1.1em; height: 1.1em;
    content: "";
    background-color: #fff;
    border-radius: 50%;
    transition: .5s;
}
label.switch > input[type=checkbox]:focus + span.slider {
    box-shadow: 0 0 0 1px black;
}
label.switch > input[type=checkbox]:checked + span.slider {
    background-color: #f26334; /* GS1-orange */
}
label.switch > input[type=checkbox]:checked + span.slider:before {
    transform: translateX(1.1em);
}
label.switch > input[type=checkbox][disabled] + span.slider {
    opacity: .65;
    cursor: not-allowed;
}


/*** Auswertungen ***/
div.auswertung div.box {
    margin-right: 10px;
    min-height: 200px;
    margin-bottom: 20px;
    padding: 20px;
    width: 100%;
}

div.auswertung div.eingerueckt {
    padding-left: 20px;
}

div.auswertung span.erfolg {
    color: green;
}

div.auswertung span.fehler {
    color: darkred;
}

div.auswertung .tabellentitel {
    color: #002c6c;
}

div.auswertung .RadioButtonList label,
div.barcode .RadioButtonList label {
    padding: 0px 4px;
}

div.auswertung .CheckBoxList tr td label {
    padding: 0px 5px;
}

div.progress-pictureit {
    margin: 10px;
    display: none;
}

div.progress-pictureit-visible {
    margin: 10px;
    display: block;
}