body {
    color: #111111;
    background: #fafafc;
}

.header-top.dark {
    background: #fafafc;
}

/** Abstände */
.mb30 { margin-bottom: 30px;}

.main h1 {
    font-size: 24px;
    margin-top: 0;
    font-weight: bold;
    text-transform: none;
}

h2  {
    font-weight: bold;
    font-size: 19px;
    text-transform: none;
}

.main h2 {
    font-size: 20px;
    margin: 10px 0;
    text-transform: none;
    font-weight: 600;
}

.main h3 {
    font-size: 18px;
    margin: 10px 0;
    text-transform: none;
    font-weight: 500;
}

.banner.dark-translucent-bg {
    min-height: 0;
    padding-top: 35px;
    padding-bottom: 0;
    background: #419728;
}

ol.breadcrumb {
    padding: 8px !important;
}
ol.breadcrumb a {
    font-size: 110% !important;
}

div#screenHeader {
    background-color: white;
    height: 92px;
    background: url(/images/template/kachelTopFrameless.gif) repeat-x;
}

/* Abstand nach OS-Logo-Zeile und vor Navigation rausnehmen
    > evtl. für mobile Ansicht wieder korrigieren
*/
.header-top:not(.banner) {
    padding: 0;
}

.header-top.dark {
    border: 0;
}

header {
    border: 0;
    margin-top: -1px;
}

.header {
    background-color: white;
}

a.link-dark:hover {
    color: white !important;
}

/* die folgenden Dinge treffen zu wenn man noch NICHT nach unten gescrollt hat ! */
body:not(.fixed-header-on) img#logo_img {
    display: none;
}
body:not(.fixed-header-on) #button-login-unten {
    display: none;
}
/* NICHT gescrollt ENDE */

/* Hier mal testweise das kleine haessliche Logo immer ausblenden */
img#logo_img {
    display: none;
}

/* GESCROLLT */
body.fixed-header-on /* Element */ {
    /* Anweisungen */
}
/* GESCROLLT ENDE */

/* Navigation */
.navbar-default {

}

/*** Anpassungen oben für Logo und NAVIGATION ***/
/* Grüner Strich vom "Mint-Template raus: */
.sm-mint {
    border-bottom: 0;
    border-top: 0;
}

/* Colors. Basically there is only  light green and dark green */
.sm-mint a.highlighted {
    background-color: #393;
    color: white;
}
.sm-mint > li > a.highlighted span.sub-arrow, .sm-mint > li > a.highlighted:hover span.sub-arrow { /*Make sure that the arrow stays white*/
    border-color: white transparent transparent transparent;
}

/* Das Icon (grün) */
.sm-mint li a i {
    color: #393;
}
.sm-mint li a:HOVER i, .sm-mint li a.highlighted i { /* Der zweite Teil sorgt dafür dass das icon auch weiss bleibt, wenn ich auf die Unternavigation gehe */
    color: #fff;
}

/* Die Dreieckle au in am gscheitem Blau machen */
/* Dreiecke nach rechts */


.sm-mint ul a span.sub-arrow{
    border-color: transparent transparent transparent #393;
}
/* Dreiecke nach unten*/
.sm-mint a span.sub-arrow {
    border-color: #333 transparent transparent transparent;
}

      /* Spezielle Farben Navigation für z.B. Funktionsklassifizierung und Unterpunkte */
/* Extra-Color 1: Tief / Himmelblau > xcol stands for eXtra color*/
.sm-mint li.xcol1 a, .sm-mint li.xcol1 a.highlighted  {
    background: #c5d5f7; /*Basiscolor auf color-hex.com ist #3f75e7 */
    color: black;
}
/* xcol1 icon */
.sm-mint li.xcol1 a i {
    color: #2c51a1;
}
.sm-mint li.xcol1 a:HOVER i, .sm-mint li.xcol1 a.highlighted i { /* Der zweite Teil sorgt dafür dass das icon auch weiss bleibt, wenn ich auf die Unternavigation gehe */
    color: #fff;
}
/* color of the triangle if mouse is not on this li */
.sm-mint li.xcol1 span.sub-arrow {
    border-color: transparent transparent transparent #1f3a73;
}
.sm-mint li.xcol1 a.highlighted span.sub-arrow {
    border-color: transparent transparent transparent white;
}
.sm-mint li.xcol1 a.highlighted, .sm-mint li.xcol1 a:hover {
    background: #393;
    color: whitesmoke;
}


/* Extra-Color 2: Türkis */
.sm-mint li.xcol2 a, .sm-mint li.xcol2 a.highlighted  {
    background: #E6F2E6; /*Basiscolor auf color-hex.com ist #3fe7c9 */
    color: #000;
}
/* xcol2 icon */
.sm-mint li.xcol2 a i {
    color: #393;
}
.sm-mint li.xcol2 a:HOVER i, .sm-mint li.xcol2.active a i { /* Der zweite Teil sorgt dafür dass das icon auch weiss bleibt, wenn ich auf die Unternavigation gehe */
    color: #fff;
}
/* color of the triangle if mouse is not on this li */
.sm-mint li.xcol2 span.sub-arrow {
    border-color: transparent transparent transparent #393;
}
.sm-mint li.xcol2 a.highlighted span.sub-arrow {
    border-color: transparent transparent transparent white;
}
.sm-mint li.xcol2.active a, .sm-mint li.xcol2 a:hover {
    background: #393;
    color: whitesmoke;
}

.fa-after {
    margin-left: 15px; /* Icons die (in der Navigation) nach einem Wort kommen */
}

@media (min-width: 768px){
    .sm-mint ul {
        background: #E6F2E6;
    }
}



.navbar-collapse {
    background-color: white;
}
/* Spezielle Farbe ENDE */

/*** Aktive states in the navigation ***/
@media all and (min-width: 768px) { /* with mmobile nav the chrildren of the active are green that does not look good, so... */
    .sm-mint ul {
        background: #f0f7f0; /* Hellgrüner Hintergrund bei den blauen Aufklappebenen*/
    }


    /* Active 1st level */
    .sm-mint li.active {
        background-color: #393;
        border-radius: 5px;
    }

    .sm-mint li.active > a,.sm-mint li.active > a i {
        color: white;
    }

    .sm-mint > li.active > a > span {
        border-color: white transparent transparent transparent;
    }

    /* Active 2nd layer */
    .sm-mint > li > ul > li.active {
        border-radius: 0; /* No round corners in 2nd level*/
    }

    .sm-mint > li > ul > li.active span {
        border-color: transparent transparent transparent white; /* Arrow to right white*/
    }

    /* Active 3rd layer */
    .sm-mint > li > ul > li > ul > li.active {
        border-radius: 0; /* No round corners in 3rd level*/
    }

    .sm-mint > li > ul > li > ul > li.active span {
        border-color: transparent transparent transparent white; /* Arrow to right white, in case there will be a forth layer one day */
    }
}


@media all and (min-width: 768px){
    /* Hover usw. erste Ebene der Navigation */
    .sm-mint a:not(.has-submenu):hover,
    .sm-mint a:not(.has-submenu):focus,
    .sm-mint a:not(.has-submenu):active
    {
        background: #393;
    }

    .sm-mint > li > a:not(.has-submenu):hover {
        border-radius: 5px;
    }

    .sm-mint > li > a:hover {
        background-color: #393;
    }

    /* Farbe der Zwischenmenüs 1. Ebene, auch wenn ich mit der Maus auf der Unterebene bin */
    .sm-mint ul a:hover, .sm-mint ul a:focus, .sm-mint ul a:active, .sm-mint ul a.highlighted {
        background: #393; /* Die selbe Farbe wie bei h1, h2 usw. */
    }

}
/*Anpassungen der Navigation fürs Tablet*/
@media all and (max-width: 1199px){ /* Alles ausser ganz gross */
    .sm-mint a, .sm-mint a:HOVER {
        /*font-size: 90%;*/
    }
}

.header-top a {
    color: #222;
    font-size: 110%;
}

.dark .btn-default {
    background: #707173;
}
.dark .btn-default:hover {
    background: #444648;
}

.alert.message {
    margin-top: 0; /* Bei den messages oben über der Überschrift Abstand oben raus */
}

div#links_nav {
    padding-right: 0;
}

div#links_logo, div#inks_logo_klein { /* Kleinen Fehler oben beheben */
    padding-top: 1px;
}

div#links_logo_klein {
    background: url("/images/template/kachelTopFrameless.gif") repeat-x;
    background-position-y: -15px;
}

div#rechts_nav, div#rechts_navEN {
    padding-top: 30px;
    padding-left: 0;
}

@media all and (min-width: 768px) and (max-width: 992px){
    div#links_logo {
        display: none;
    }
    div#rechts_nav, div#rechts_navEN {
        padding-left: 10px;
    }
}

/* Kleine Warenkorb-Voransicht oben */
ul.cart table {
    margin-bottom: 8px; /* Standard-Abstand unten (von Bootstrap) kleiner machen für WK-Voransicht */
}
th.amount {
    text-align: center;
}
td.amount, td.total-amount {
    text-align: right;
}


/* slick Slider */
.slickslider {
    width: 95%;
    margin-left: 25px;
}

.slick-slide img {
    border: 1px solid green;
}

div.sliderOpener {
    cursor: pointer;
}

/* Iframe im Modal */
.modalIFrame {
    width: 100%;
    height: auto;
    border: 0;
}

/* Video */
video {
    position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    transform: translateX(-50%) translateY(-50%);
    background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
    background-size: cover;
    transition: 1s opacity;
}

#videocover {
    height: 100%;
    width: 100%;
    z-index: -50;
    /*background-color: rgba(230,242,230,0.7); Super Hell Grün*/
    background-color: rgba(16,27,16,0.6);
    position: fixed;
}

#regenfest {
    position: fixed;
    top: 30px;
    left: -300px;
    width: 200px;
    height: 100px;
    background-color: rgba(255,255,255,0.25);
    font-size: 100%;
    border: 1px solid gray;
    z-index: 50;
    padding: 20px;
    display: none;
}

/* boxed Background-Colors and borders */
.light-green-bg {
    background-color: #e6f2e6;
    border: 1px solid #bbdcbb;
}
.light-blue-bg {
    background-color: #ebf2f8;
    border: 1px solid #a1ccf0;
}

div.light-blue-bg h3 {
    color: #036;
}
div.light-blue-bg .btn-default {
    background-color: #036;
}

.btn:active, .btn:focus {
    outline: none !important;
}

.box-ueberuns {
    height: 29.5em; /* Achtung! Für Mobilansicht die fixe Höhe ausschalten */
}
.box-ueberuns-unternehmen {
    height: 22.5em; /* Achtung! Für Mobilansicht die fixe Höhe ausschalten */
}

/* Produktübersichtsseiten Kategorien - Labels */
.produktuebersicht-kategorien {
    padding: 2px 5px;
    border-radius: 6px;
    font-size: 90%;
    font-variant: small-caps;
}

/* Übersichtsseiten Gelenkebenen (z.B. alle Hüftgelenke) */
.produkte-gelenkebene-untertitel {
    font-size: 110%;
    font-variant: small-caps;
    color: #333;
}

/** Produkt-Einzelseiten **/
/* Gelenk-Funktionen */
div.modal-opener {
    cursor: pointer;
}

/*Produkttabelle*/

table.produktspezifikation {
    background-color: whitesmoke;
    border-collapse: separate;
    border-spacing: 5px;
}
table.produktspezifikation tbody {
    background-color: whitesmoke;
    padding: 7px;
}
table.produktspezifikation td {
    padding: 5px;
}
table.produktspezifikation td, table.produktspezifikation th {
    color: #333;
}

.ProdukttabelleGruen  { background-color:#E6F2E6; border-color:#349933; border-width: 1px; line-height: 145%; border-style: solid; padding:4px; font-family: Arial; font-size:12px; text-align: left; }
.ProdukttabelleOlive  { background-color:#E6F2E6; border-color:#349933; border-width: 1px; border-style: solid; padding:5px; font-family: Arial; font-size:12px; font-weight:bold; text-align: left; }
.ProdukttabelleBlau { background-color:#ebf2f8; border-color:#4393C0; border-width: 1px; border-style: solid; padding:5px; font-family: Arial; font-size:12px; font-weight:bold; text-align: center;}
.ProdukttabelleOrange { color: black; background-color:#f6c47b; border-color:#5c4624; border-width: 1px; border-style: solid; padding:5px; font-family: Arial; font-size:12px; font-weight:bold; text-align: center;}
.ProdukttabelleWeiss { background-color:#ffffff; border-color:#666666; border-width: 1px; border-style: solid; padding:5px; font-family:Arial; font-size:12px; text-align:center; }
.ProdukttabelleWeiss.preis { line-height: 145%; text-align: right; }
.ProdukttabelleWeiss.preis a { color: gray; margin-right: 5px; }
.ProdukttabelleWeiss.preis a:HOVER { color: orange; }
.ProdukttabelleWeiss.preis a.blue:HOVER { color: blue; }
.ProdukttabelleOlive { background-color: #d6e3bc; font-weight: normal; }


div.centered {
    text-align: center;
}

table.centered {
    margin: 0 auto 20px auto;
}

table.gewichtsklassifizierung {
    border-spacing: 4px;
    padding: 1px;
}
table.gewichtsklassifizierung td {
   padding: 5px;
}

@media screen and (max-width: 768px) {
    table.gewichtsklassifizierung {
        display: block;
        overflow-x: hidden;
        background-color: transparent;
    }
}

@media screen and (max-width: 992px) {

    /* Abstand zur ersten Überschrift geringer auf kleineren Geräten */
    .main-container {
        padding-top: 10px;
    }

}



/* Responsible Version der Navigation anders gestalten*/
@media screen and (max-width: 768px) {
    .navbar-header {
        /*border: 1px solid #e0e0e0;
        border-radius: 8px;*/
        background: url("/images/template/logo_d.gif") no-repeat white;
        background-position: 0 -15px;
        padding: 10px 0;
    }
}

/* Dropdown-Kurzübersicht Warenkorb und Login oben */
.dropdown-menu.cart {
    min-width: 350px;
    background-color: white;
}
.dropdown-menu.cart table {
    background-color: white;
    color: black;
}

ul.cart th  {
    color: black;
}

.sm {
    z-index: 100; /* Navigation soll hinter Menü liegen */
}

.header-top .dropdown-menu {
    background-color: white;
    z-index: 200;
}

.dark.header-top .dropdown-menu {
    border: 1px solid #dddddd;
    border-top: none;
    background: whitesmoke;
    padding: 0;
}

/* Quick-Login */
ul.quicklogin {
    border: 0;
}

ul.quicklogin li {
    padding: 10px;
    background-color: #e6f2e6;
    border: 1px solid #999;
    border-radius: 10px;
}

ul.quicklogin label, ul.quicklogin span, ul.quicklogin a {
    color: black;
}

ul.quicklogin input.form-control,ul.quicklogin input.form-control:focus {
    background-color: white;
}

/** Dropdown-Kurzübersicht Warenkorb oben ENDE **/




/*** Tabellen responsive machen ***/

/** Mit der Overflow-Methode **/
@media screen and (max-width: 480px) {
    table.overflow-table {
        display: block;
        overflow-x: scroll;
    }
    table.overflow-table td {
        white-space: nowrap;
    }
}

/** Mit der Data-Header-Methode **/
@media screen and (max-width: 480px) {
    table.dataheader-table thead {
        display: none;
    }
    table.dataheader-table tr {
        display: block;
        border: 0;
        /*border: 1px solid #96cfbf;*/
    }
    table.dataheader-table td {
        width: 100%;
        display: block;
        border-bottom: 0;
    }
    table.dataheader-table td:first-of-type {
        text-align: center;
    }
    table.dataheader-table td:not(:first-of-type)::before {
        content: attr(data-header) ": ";
    }
    table.dataheader-table td#verylast {
        border-bottom: 1px solid;
    }
}

/** Foo-Table **/
/* Werte aus footable.css überschreiben: (Möglicherweise müssen wir das dann für spezielle Tabellen oder OS-Styles von Tabellen anpassen) */
table.footable-details > tbody > tr:first-child > td {
    border-top-width: 1px;
}

table > tbody > tr > td > span.footable-toggle {
    opacity: 1;
    color: #339;
}

table.footable.breakpoint {
    background-color: whitesmoke;
}
table.footable.breakpoint tr {
    background-color: whitesmoke;
}

@media (min-width : 651px)  {
    table#foo_revo_bewegung {
        width: auto;
    }
}

/** Gelenk-Einzelauswahl **/
#warning_size {display: none;}

.owl-nav-thumb img {
    border: 1px solid #d3d3d3;
}

/* Tabellensortierung, z.B Autragsverwaltung */
.datenTabelle th span { /* Sortier-Spans */
    cursor: pointer;
}
.datenTabelle th span:HOVER { /* Sortier-Spans */
    text-decoration: underline;
}
.datenTabelle th span.ASC, .datenTabelle th span.DESC  { /* Sortier-Spans */
    text-decoration: underline;
}

.datenTabelle th span.DESC:after {
    content: '';
    width: 0;
    height: 0;
    position: relative;
    top: 12px;
    left: 8px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #000;
    clear: both;
}
.datenTabelle th span.ASC:after {
    content: '';
    width: 0;
    height: 0;
    position: relative;
    top: -12px;
    left: 8px;
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-bottom: 6px solid #000;
    clear: both;
}

div.alert a {
    color: blue;
    text-decoration: underline;
}

div.shop-product-single {
    margin-bottom: 20px;
}

#btn_cart {
    margin-right: 10px;
}

a.btn {color: white;} /* Müssen wir dann schauen, ob wir das dann so global lassen können , oder nicht */

/* Grüner Button z.B. zum Öffnen der Info-Fenster oben auf der Seite */
.btn-gruen, .btn-gruen:HOVER , .btn-gruen:FOCUS,
a .btn-gruen , a .btn-gruen HOVER , a .btn-gruen FOCUS {
    background-color: #339933;
    color: white;
}

/* Inaktiver Button bei ersatzteil.php */
.btn_cart_inactive {
    background-color: #eee;
    color: black;
    cursor: not-allowed;
    border: 1px solid gray;
}

.btn_cart_inactive i {
    font-size: 135%;
    margin-left: 10px;
    color: #777;
}

/* Blauer Button */
.btn-blau, .btn-blau:HOVER , .btn-blau:FOCUS,
a.btn-blau a, a.btn-blau:HOVER , a.btn-blau:FOCUS {
    background-color: #3870cf;
    color: #fff;
}
.btn-blau:HOVER {
    background-color: #254b8a;
}

/* Orangener Button */
.btn-orange, .btn-orange:FOCUS,
a.btn-orange a, a.btn-orange:HOVER , a.btn-orange:FOCUS {
    background-color: #fac667;
    color: #000;
}

a.btn-blau, a.btn-gruen, a.btn-orange {
    color: white !important;
    text-decoration: none !important;
}
/*
.btn-orange:HOVER {
    background-color: #000;
}
*/
.btn-gruen i, .btn-blau i, .btn-inaktiv i { font-size: 125%; }

.btn-inaktiv {
    cursor: not-allowed;
}

.btn-inaktiv-speichern {
    padding-right: 17px;
    padding-left: 19px;
    cursor: not-allowed;
}

.btn-inaktiv i {
    min-width: 0 !important;
    padding-left: 15px !important;
}
/* - - - */

i.fa-edit, i.fa-trash-o, i.fa-print.rund, i.fa-info {
    font-size: 125%;
    cursor: pointer;
    margin: 0 10px 0 10px;
    border-radius: 30px;
}

/* Edit-Button: Blau */
i.fa-edit {
    color: white;
    background-color: #3870cf;
    padding: 7px;
}
i.fa-edit:hover {
    background-color: #254b8a;
}
/* Drucken-Button: Grau */
i.fa-print.rund {
    color: white;
    background-color: #777;
    padding: 7px;
}
i.fa-print.rund:hover {
    background-color: #555;
}

/* Info-Button: Gelb */
i.fa-info {
    color: #6a6a6a;
    background-color: #f6eb98;
    padding: 5px;
    border: 2px solid #f2df4d;
    width: 33px;
    text-align: center;
}
i.fa-info:hover {
    background-color: #f2df4d;
}

/* Löschen-Button: Orange */
i.fa-trash-o {
    color: white;
    background-color: #f0960d;
    padding: 7px;
    width: 30px;
}
i.fa-trash-o:hover {
    background-color: #c04a0a;
}

/* Grauer Kasten als Hervorhebung */
.hervorhebung {
    color: #000000;
    background-color: #e3e3e3;
    border: 1px solid #afafaf;
    padding: 5px;
    display: inline-block;
}

.main-container div.container a.textlink, .modal-body a {
    color: #333;
    text-decoration: underline;
    cursor: pointer;
}

button.close, button.close:HOVER, button.close:FOCUS {
    color: black;
    opacity: 1;
    text-shadow: none;
}

input.warning {
    background-color: #fcfaf0;
    border-color: #ecad8c;
}

/**** STAMMDATEN ***/
/* Anpassungen für die Stammdaten Übersichtsseite */
div.stammdaten div.body {
    padding-top:7px;
}

/* Anpassungen für Stammdaten Unterseiten*/
table.stammdaten {
    border:0;
}

table#nutzeruebersicht th, table#nutzeruebersicht td {
    padding: 4px;
}

table.stammdaten.nutzeruebersicht th {
    background-color: #f5f5f5;
    text-align: center;
    vertical-align: middle;
}

table.stammdaten.nutzeruebersicht td {
    text-align: center;
    vertical-align: middle;
}

/* Häkchen und Kreuze bei Stammdaten */
table.stammdaten .fa {
    font-size: 150%;
    margin-top: 0.2em;
    padding: 5px;
}
table.stammdaten .fa-check {
    color: #339933;
}
table.stammdaten .fa-times {
    color: red;
}

p.stammdaten .fa-check {
    color: #339933;
    font-size: 150%;
    padding: 5px;
}
p.stammdaten .fa-times {
    color: red;
    font-size: 150%;
    padding: 5px;
}

table.stammdaten .info, p .info { /* Arrows and Crosses to change right of user (passive icons) */
    cursor: help;
}
table.stammdaten .info-blur { /* Arrows and Crosses to change right of user (passive icons) */
    cursor: help;
    opacity: 0.5;
}
table.stammdaten .klick { /* Arrows and Crosses to change right of user (passive icons) */
    cursor: pointer;
}

table.stammdaten .changeRight { /* Arrows and Crosses to change right of user */
    cursor: pointer;
}

table.stammdaten td.invisible {
    background-color: white;
}

table.stammdaten td {
    font-size: 90%;
    background-color: #f9f9f9;
}
table.stammdaten .header1 {
    font-variant: small-caps;
    line-height: 200%;
    font-size: 120%;
}

table.stammdaten .header1, table.stammdaten .header2 {
    background-color: #f0f0f0;
}

table.stammdaten .emphasize {
    font-weight: bold;
    font-size: 90%;
}

button#hintergrundbild_ein, button#hintergrundbild_aus {
    cursor: pointer;
}

table#edit_user .fa-info-circle {
    color: #393;
    font-size: 200%;
    line-height: 80%;
    cursor: help;
}
table#edit_user .fa-info-circle:HOVER {
    color: #236b23;
}

div.tooltip div.tooltip-inner {
    background-color: #236b23;
}

.tooltip.top .tooltip-arrow {
    border-top-color: #236b23;
}
.tooltip.right .tooltip-arrow {
    border-right-color: #236b23;
}
.tooltip.bottom .tooltip-arrow {
    border-bottom-color: #236b23;
}
.tooltip.left .tooltip-arrow {
    border-left-color: #236b23;
}

/* Weiter - Links */
h5.weiter {
    margin-top: 25px;
    margin-bottom: 8px; /* etwas veringern */
}

ul.weiter {
    padding: 0;
    margin-bottom: 35px;
}

ul.weiter li {
    list-style: none;
    margin: 8px 0;
}

ul.weiter li a {
    padding-left: 5px;
}

ul.weiter li a i {
    margin-right: 7px;
}

/*Navigation Umbau am 3.1.17 wegen Tablet: Alles in eine Zelle, und dann Logo als Hintergrundbild */
#main-menu {
    margin-left: 233px;
    margin-top: 23px;
}
#rechts_nav {
    background: url(/images/template/Orthosystems_Logo_web_de.png) no-repeat;
    background-position-y: 0;
    padding-bottom: 30px;
}
#rechts_navEN {
    background: url(/images/template/Orthosystems_Logo_web_en.svg) no-repeat;
    background-position-y: 0;
    padding-bottom: 30px;
}
.navbar-collapse {
    background: transparent;
}

@media all and (max-width: 992px){ /* Kleines Tablet */

    div#rechts_nav, div#rechts_navEN {
        margin-top: 0;
        padding: 10px 0;
        background: none; /* Großes Logo im Hintergrund raus */
    }

    #main-menu {
        margin: 0;
    }

    a#home_link {
        display: none; /* Link über grossem Logo raus */
    }
}

/* Tabelle Stammdaten - Konditionen */
table.conditions td.abstand {
    background-color: white;
    border-top:0;
    border-bottom:0;
    width: 10px;
    padding: 0;
}
table.conditions td.produktName {
    border-right:0;
    padding-right: 5px;
}
table.conditions td.produktWert {
    border-left:0;
    padding-left: 5px;
    text-align: right;
    color: black;
}
table.conditions td.leer {
    background-color: white;
}
table.conditions td.abstandRow {
    background-color: white;
    padding: 0;
    font-size: 5px;
    border-width: 0 0 1px 0;
}

a.wkLink {
    text-decoration: underline;
}

#warenkorb_auflistung img {
    max-height: 100px;
    margin: auto;
}

td.wktabelle-boeckh {
    color: black;
    background-color: #E6F2E6;
    font-weight: normal;
}

input.OS, select.OS {
    background-color: #CCFFFF;
    color: black;
}

/*Styles noch aus altem HTML*/
.textRed, .textRed-Fett {
    color: #bc2020;
}
.textGreen, .textGreen-Fett {
    color: #359147;
}

/* Schwarzer Teil der Überschrift bei den Explosionszeichnungen */
h1 small {
    color: black;
    font-size: 90%;
    font-weight: bold;
}

#produkte_volltextsuche_starten {
    margin-top: 2px;
}

.main-container a {
    color:blue;
}

a.btn-blau, a.btn-gruen {
    color:white;
}

.btn-gelb, a.btn-gelb {
    background-color: #f5db08;
    border-color: #888888;
    color: black !important;
}
.btn-email, a.btn-email {
    background-color: #e3e6fa;
    border-color: #172aa3;
    color: indianred !important;
    font-weight: bold;
}

.btn-gelb i {
    font-size: 120%;
    color: #4a4444;
    font-weight: bold;
}

.btn-drucken, a.btn-drucken {
    background-color: #474747;
    border-color: #474747;
    color: white !important;
}
.btn-drucken:hover, a.btn-drucken:hover {
    background-color: #000;
    border-color: #000;
}

.btn-drucken i {
    font-size: 120%;
    color: #fff;
}


/**** PRODUKT DETAIL-SEITEN ****/
/* "Kästchen-Liste für die Produkt-Detailseiten */
ul.quadratBlau, ul.quadratGruen {
    margin: 1.3em 0 2em 0;
    padding: 0;
    list-style: none;
}
ul.quadratBlau li, ul.quadratGruen li {
    margin: 1em;
    margin-left: 3em;
}

ul.quadratBlau li:before, ul.quadratGruen li:before {
    content: '\f14a'; /* weisses Häkchen im abgerundetem quadrat*/
    font-family: 'FontAwesome';
    float: left;
    margin-left: -1.5em;
    color: #0074D9;
}
ul.quadratBlau li:before {
    color: #0074D9;
}
ul.quadratGruen li:before {
    color: #339933;
}

/* Liste mit grünen Kreisen für die "Aufgaben" bei den Gelenken */
ul.kreisGruen {
    margin: 0 0 25px 0;
    padding: 0;
    list-style: none;
}

ul.kreisGruen li {
    margin: 0 0 0.7em 3em;
}
ul.kreisGruen li:before {
    content: '\f111';
    font-family: 'FontAwesome';
    font-size: 60%;
    float: left;
    margin-left: -2em;
    margin-top: 0.3em;
    color: #339933;
}

/* Liste mit den Links zu den Einsatzgebieten */
ul.produkteEinsatzgebiete {
    margin: 0 0 25px 0;
    padding: 0;
    list-style: none;
}
ul.produkteEinsatzgebiete li {
    margin: 0 0 0.7em 3em;
}
ul.produkteEinsatzgebiete li:before {
    content: '\f138'; /* weisses Häkchen im abgerundetem quadrat*/
    font-family: 'FontAwesome';
    float: left;
    margin-left: -1.5em;
    color: #0074D9;
}

/* Überschrift für den Bereich Aufgaben bei den Produkten */


.ueberschriftAufgabenProdukte {
    color: #333333;
    line-height: 2.5em; /* soll aber nur bei kleinen Auflösungen gelten , siehe unten*/
}
@media (min-width: 768px) {
  .ueberschriftAufgabenProdukte {
      line-height: 100%;
  }
}


/* Warenkorb , eingeloggt als Böckh, Tabelle Vorgangsbeschreibung */
table#vorgangsbeschreibung input, table#vorgangsbeschreibung input select {
    width: 100%;
    background-color: #dff7d4;
    padding:2px;
    font-size: 90%;
    border: 1px solid #aaaaaa;
    border-radius: 3px;
}

/* Links, die nicht als solche erkennbar sind (ausser der Cursor), z.B. bei der Produkteübersichtsseite Hüfte */
h2 a.dont-show, h5 a.dont-show {
    color: #339933;
    text-decoration: none;
}
p a.dont-show {
    color: #333;
}

a.dont-show:hover {
    text-decoration: none;
}

/* Mehr-Lesen-Label*/
span.label.mehr-label, span.label.more-label {
    cursor: pointer;
    font-size: 85%;
}
span.label.mehr-label:hover,span.label.more-label:hover {
    opacity: 0.85;
}

p.display-inline {
    display: inline;
}

span.mehr {
    display: none;
}

p.mehr_opener {
    display: inline;
}

.label-gruen {
    background-color: #339933;
    font-weight: normal;
}

span.text11 {
    font-size: 85%;
}

/* Die Buttons z.B. auf der Übersichtsseite der Orthesen: */
div.uebersichtsseite-button {
    margin-top: 12px;
}
@media (max-width: 991px) {
    div.uebersichtsseite-button {
        margin-top: 0;
        margin-bottom: 20px;
    }
}

/* Englisches Menu */
header.en ul#main-menu {
    margin-left: 22px;
}

@media (min-width: 992px) {
    header.en ul#main-menu {
        margin-left: 265px;
    }
}

ul#main-menu > li {
    margin-right: 12px;
}

.table-header td {
    font-variant: small-caps;
    line-height: 200%;
    font-size: 120%;
    background-color: #555;
    color:white;
}

.main-container {
    padding: 28px 0 0 0 !important;
}

/* Abstand oben über erster Überschrift kleiner auf Tablet und Handy */
@media (max-width: 1200px) {
    .main-container {
        padding: 18px 0 0 0;
    }
    .seitenkpf {
        font-size: 80%;
    }

    .seitenkpf h1 {
        font-size: 180%;
    }
}

.footer {
    padding: 0;
    background-color: #f4f4f5;
}

.footer a {
    color: #333;
}
.footer a:hover {
    text-decoration: underline !important;
}

table#warenkorb_auflistung {
    margin-top: 15px;
}

.auftragsverwaltung-btn-edit {
    float:left;
    margin-right: 10px;
}

a.btn-grau {
    background-color: #e3e3e3;
    color: black;
    border-color: #bbb;
}

.nav-pills > li > a, .nav-pills > li > a:hover {
    color: black !important;
    background-color: #eee;
    border: 1px solid #ccc;
    border-radius: 7px;
    margin-right: 4px;
}

.nav-pills > li > a:hover {
    background-color: #d6d6d6;
}

.nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus, .nav-pills > li > a:focus {
    color: white !important;
    background-color: #555;
    border: 1px solid #000;
    border-radius: 7px;
}

/* Boxen auf Übersichtsseiten, z.B. Prothesen */
@media (min-width: 768px) {
    div.flex-large-screen-only {
        display: flex;
    }
}

.image-box .body.uebersicht {
    text-align: center;
}

div.justify > p {
    text-align: justify;
}

@media all and (max-width: 1199px) {
    .hide-non-large {
        display: none;
    }
}

a.btn-gray {
    color: #333 !important;
}

/* Beschriftung der Einzelbilder bei den Produkteinzelseiten oben links */
div.produkt-einzelseiten-bildbeschriftung {
    background-color: #eee;
    padding: 3px;
    margin-top: 3px;
    text-align: center;
}

.main a {
    color: blue;
}

thead.thead-dark th {
    background-color: #252 !important;
    color: white !important;
}

input.form-control-sm, select.form-control-sm { /* Ich habe an dieser Stelle schon mal Bootstrap 4 vorweg genommen > Dort gibt es diese Klasse */
    padding:2px 9px;
    height: 30px;
}

input::placeholder {
    color:#bbb !important;
}

input:focus::placeholder {
    color: white !important;
}

button a {
    color:#333 !important;
}
button a:hover {
    text-decoration: none !important;
}

.btn-warning {
    color: #333 !important;
}

a.btn-grau {
    color: #333 !important;
    background-color: #e3e3e3 !important;
}

/** RUNDE BUTTONS **/
.btn-round {
    border-radius: 30px;
    padding: 0.1em 0.4em;
    margin: 0 1em 0 1em;
    font-size: 125%;

}

/* Orange runde Buttons */
.btn-loeschen.btn-round {
    border: 1px solid #d39118;
    background-color: #ddd;
}
.btn-loeschen.btn-round:hover {
    background-color: #fff;
}


.btn-loeschen.btn-round i.fa-trash {
    color: #ec2d1f;
}

label {
    cursor: pointer;
}

/**** Slider Startseite ****/
div.slider-html-inhalt {
    padding: 15px 40px;
    margin: 15px 40px;
    font-size: 135%;
    line-height: 110%;
}

div.slider table.gelenkbeschreibungen td {
    text-align: center;
    vertical-align: top;
    font-size: 70%;
    /*border: 1px solid black;*/
}

div.slider span.badge {
    background: #393;
    font-size: 100%;
    font-weight: normal;
}


table.groessen_tabelle_slider {
    margin-top: 5px;
    border-collapse: collapse;
}
table.groessen_tabelle_slider td {
    padding: 5px;
    border: 1px solid #999;
    text-align: center;
    background: #f2fff2;
    font-size: 80%;
}

table.groessen_tabelle_slider tr.header td {
    background: #056304;
    color: white;
}
table.groessen_tabelle_slider tr.header.header-oben td {
    background: white;
    color: black;
    font-variant: small-caps;
    font-size: 90%;
    padding: 2px 25px;
}

table.gelenkbeschreibungen td {
    font-size: 83%;
    padding: 2px 7px;
    /* border: 1px solid gray; */
}

/**** Download-Seite ****/
table#download-tabelle td {
    vertical-align: middle !important;
}
table#download-tabelle span.badge {
    background: #393;
    font-size: 100%;
    font-weight: normal;
}

.header-top .btn-group {
    margin-bottom: 8px !important;
}

/** Neuer dunkelgrauer Footer vom Christian **/
.default-bg {
    background-color: #666;
}

#footer div ul {
   padding-left: 0;
   margin-bottom: 20px;
}
#footer ul li {
    list-style: none;
    padding: 3px 0;
}

#footer h2 {
    margin: 12px 0 10px 0;
}

.subfooter {
    font-size: 90%;
}
.subfooter a {
    text-decoration: none !important;
    margin-left: 28px;
}

@media (min-width: 1200px) {
    .boxed .page-wrapper {
        width: 1285px !important;
    }
    .container {
        width: 1285px !important;
    }
}
@media (max-width: 1199px) {
    .boxed .page-wrapper {
        width: 100% !important;
    }
    .container {
        width: 100% !important;
        padding-left:3rem;
        padding-right:3rem;
    }

    /* Namen der Gelenke bei den Dynamischen Übersichten */
    div.image-box h5 {
        font-size: 14px;
    }
}

/* Blaue Navigation im Bereich "Mein Konto" > Erkennbar durch "loggedInOnly" */

/* Hintergrund grundsätzlich helles blau machen */
.sm-mint .loggedInOnly ul, li.loggedInOnly {
    background-color: #d8e4f9 !important;
}

/* Allerdings den Punkt "Stammdaten" etwas dunkler machen zum abheben von den restlichen Punkten */
li.loggedInOnly li.stammdaten {
    background-color: #a9c6f9;
}

/* Den obersten Navigationspunkt etwas hervorheben (Mein Konto) */
ul#main-menu > li.loggedInOnly {
    border-radius: 6px;
    border: 1px dashed #a6a6a6;
}
ul#main-menu > li.loggedInOnly:hover, ul#main-menu > li.loggedInOnly.active {
    border-color: transparent;
}

/* Das Dreieckle blau machen */
li.loggedInOnly li>a span.sub-arrow {
    border-color: transparent transparent transparent #3870cf;
}

/* Dunkelblauer Hintergrund bei Mouseover usw. */
.sm-mint li.loggedInOnly.active,
.sm-mint li.loggedInOnly a:hover,
.sm-mint li.loggedInOnly a:focus,
.sm-mint li.loggedInOnly a:active,
.sm-mint > li.loggedInOnly > a:hover,
.sm-mint ul li.loggedInOnly a:hover, .sm-mint ul li.loggedInOnly  a:focus, .sm-mint ul li.loggedInOnly  a:active, .sm-mint ul li.loggedInOnly  a.highlighted,
li.loggedInOnly.active>a,li.loggedInOnly > a:hover,li.loggedInOnly a.has-submenu.highlighted,
li.loggedInOnly li.active
{
    background-color: #3870cf !important;
}