/*Place your CSS code here*/
/*Individueller Style*/

/*Definition der Farben des Style*/
:root {
  --main-color: #272F66;
  --accent-color: #EB0A1E;
  --panel-color: #272F66;
  --main-color-t:   #272F6622;
  --c-brand-primary-lighten-40: var(--main-color-t) !important;
}

/*Dicker Balken oben*/
/*Farbe des Hintergrundes und des Rahmens über dem Balken*/
#ef-navbar, #ef-navbar li a.dropdown-toggle[aria-expanded="true"]
{background-color:#ffffff;border-color:#ffffff;
}
/*Einstellungen für das Administrator-Plugin - Damit der Text ab einer bestimmten Größe nicht sichtbar ist und das Logo an der richtigen Stelle*/
@media (max-width: 767px) {
.marginright {
	margin-right: -100px !important; 
}
}
@media (max-width: 991px) {
.nodisplay {
	display: none !important;
}
}
/*Slash im Balken oben zur Trennung der Seiten „Startseite / Kurse / Testukurs*/
.breadcrumb > li + li:before {
	color:#ffffff !Important;
  	font-size: 16px;
}
/*Balken und Rahmen oben auf der Seite*/
div.breadcrumb-x {
	background-color:var(--main-color);
    border-color:var(--main-color);;
}
/*Schriftfarbe und Schriftgröße oben im Balken auf der Seite*/
.breadcrumb-x .ef-breadcrumb a, .breadcrumb-x .ef-breadcrumb li, .breadcrumb-x .ef-breadcrumb li div.fa, .breadcrumb-x .ef-breadcrumb li.active a {
	color: #ffffff;
    font-size: 14px;
}

#ef-toggle-fullscreen {
	color: #ffffff; 
}

/*Ende Dicker Balken oben*/


/*Kopfzeile allgemein*/
/*Breite des Feldes der OE-Einheit in der navbar oben*/
@media all and (max-width: 767px) {
  body #ef-navbar .container .navbar-header .ef-navbar-branch-name  {
     max-width:200px;
  }
}
body #ef-navbar .container .navbar-header .ef-navbar-branch-name {
    max-width: 375px;
  }
/*Abstand und Höhe des Bereiches am oberen Rand der Seite bis zum Balken*/
#ef-navbar {
	padding-top: 15px;
    height: 88px;
}
/*Kleinere Darstellung des Logos indem zwischen Logo und Balken mehr Platz ist*/
#ef-navbar .container .navbar-header
{
	padding-bottom: 15px;
}
/*Für den oberen Rand, da durch die visuelle Erhöhung der Kopfzeile sonst grauer Bereich da ist*/
html{
  background-color: #ffffff;
}
/*Ende Kopfzeile allgemein*/


/*Symbole Menüs Kopfzeile rechts*/
/*Neu: Farben der Überschriften im Warenkorb*/
.bg-primary
{background-color:var(--main-color)}

/*Farbänderung Dropdown-Menü bei dem mit der Maus darüberfahren*/
.dropdown-menu > li > a:hover {
    background-color: #C1CDDA;
}
.dropdown-menu > li > a {
    color: #fff;
}

/*Symbole oben (Sprachblase / Glocke) im normalen Zustand der Menüs*/
#ef-navbar .container ul.nav.navbar-nav > li > a {
  color: #000 !important;
}
#ef-navbar .container ul.nav.navbar-nav > li > button {
  color: #000 !important;
}
/*Symbole oben (Sprachblase / Glocke) bei Auswahl der Menüs*/
#ef-navbar .container ul.nav.navbar-nav li.open .dropdown-toggle {
   color: #ffffff !important;
}

/*Schrift in den Dropdown-Menüs z.B. Benutzermenü oben*/
#ef-navbar .container ul.nav.navbar-nav ul.dropdown-menu > li a.dropdown-item,
#ef-navbar .container ul.nav.navbar-nav ul.dropdown-menu > li a.dropdown-item.nested:after,
#ef-navbar .container ul.nav.navbar-nav ul.dropdown-menu li  a.dropdown-back,
#ef-navbar .container ul.nav.navbar-nav ul.dropdown-menu li  a.dropdown-back:before
{
	color: #fff; 
}
/*Unter dem Benutzer-Menü das Ein/Aus-Symbol Transparenz sowie die Farbe*/
#ef-navbar .container ul.nav.navbar-nav ul.dropdown-menu a.dropdown-item i.fa {
  opacity: 1;
}
#ef-navbar .fa-power-off:before {
	color: #ffffff; 
}
/*Trennstriche unter dem Benutzermenü oben rechts*/
#ef-navbar .container ul.nav.navbar-nav ul.dropdown-menu li.divider {
	background-color: #3a4552;
}
/*Trennstrich zwischen den Initialen oben rechts und den auszuklappenden Menü*/
#ef-navbar .container ul.nav.navbar-nav > li.user-preferences ul.dropdown-menu:after {
  background-color: #1C2734;
}
/*Schrift in den Dropdown-Menüs z.B. Benutzermenü oben – jedoch hier die neue Nummerierung z.B. bei den Kalendern*/
#ef-navbar .container ul.nav.navbar-nav ul.dropdown-menu > li a.dropdown-item > span.label {
	color: #ffffff; 
}
/*Farbe der Initialen rechts oben auf der Seite*/
#ef-navbar .container ul.nav.navbar-nav > li .dropdown-toggle .img-thumbnail {
  background-color: var(--accent-color) !important; 
}
#ef-navbar .container ul.nav.navbar-nav > li a.dropdown-toggle .img-thumbnail {
	background-color: var(--accent-color) !important; 
}  
/*Farbe des Einkaufswagens*/
.navbar-inverse .navbar-nav > li > a, .navbar-inverse .navbar-nav > li > a .fa {
    color: #000000;
}
.navbar-inverse .navbar-nav > li > a:focus, .navbar-inverse .navbar-nav > li > a:hover {
    color: #6f7e95;
}  
/*Kein Rahmen für die Buttons oben rechts*/
#ef-navbar .container ul.nav.navbar-nav > li > a:focus:not(:active) > .fa,
#ef-navbar .container ul.nav.navbar-nav > li > a:focus:not(:active) > span, 
#ef-navbar .container ul.nav.navbar-nav > li > a:focus:not(:active) > .img-placeholder,
#ef-navbar .container ul.nav.navbar-nav > li > button:focus:not(:active) > .fa, 
#ef-navbar .container ul.nav.navbar-nav > li > button:focus:not(:active) > span, 
#ef-navbar .container ul.nav.navbar-nav > li > button:focus:not(:active) > .img-placeholder
{
  outline: 0;
}

/*Einfärbung Kopf im Benutzermenü*/
#ef-navbar .container ul.nav.navbar-nav > li.user-preferences ul.dropdown-menu:after {
background-color: #1C2734;
}
/*Ende Symbole Menüs Kopfzeile rechts*/


/*Administrator-Anwender-Ansichten*/
/*Der Hintergrund des Informationsbereiches auf L2R – heißt der weiße Bereiche auf welchem alles Dargestellt wird*/
div.ef-block, div.dashboard-panel div.panel-body{background-color:#ffffff;
}
/*Der Rahmen und Schatten des Informationsbereiches auf L2R – heißt der weiße Bereiche auf welchem alles Dargestellt wird*/
div.ef-block {
 box-shadow: 0 1px 4px #9a9ea3, 0 2px 3px #d4d8e3;  
}

/* Farbe für den Hintergrund */
body {
  /*background: #fafafa;*/
  background-color: #fafafa !important;
  font: Arial, sans-serif;
}
/* Farbe für den Hintergrund im Kurskatalog */
.ef-my-courses-controls {
background-color: #fafafa !important;
} 
/* Links unter den dashboard icons*/
.ef-dashboard-icon-label {
  color:var(--main-color);
}
/*Label bei Kursen „abgeschlossen“*/
.label-ef-completed
{ background-color: #0eac2f;
}
/*Label von Branches*/
.label-branch
{ background-color: #0000FF;
}
/*Label von BL-Kursen*/
.label-success
{ background-color: #096024;
}

/*Hintergrundfarbe der Kategorien bei der Nutzeransicht*/
.ef-my-courses .ef-courses-list ul li.ef-my-courses-category > div.ef-entry-head {
  background-color: #777777;
}
/* Hintergrundfarbe der 2., 3. Und weiteren Kategorien bei der Nutzeransicht*/
.ef-my-courses .ef-courses-list ul li.ef-my-courses-category ul li.ef-my-courses-category > div.ef-entry-head {
  background-color: #777777;
}
/*Mit der Maus in der Kursliste über die einzelnen Bereiche fahren*/
div.ef-entry-head:hover {
  background-color: #ccc !important;
}
/*Kursansicht der Nutzer – die Farbe der Kurse in den Kategorien*/
.ef-my-courses ul li.ef-my-courses-category > ul > li:nth-child(2n+2) {
	background-color: #f0f0f0 !important;
}
/*Darstellung Dropdown-Menü z.B. Berichte*/
.dropdown-menu {
    list-style: outside none none;
    background-color: #6F7E95;
}
/*Header Benutzeransicht in Kursen – für die Änderung der Daten etc.*/
div.modal-header {
	background-color: #efefef !important;
}
/*Hover für Dashboard Icons beim Administrator, damit diese durchscheint*/
div.ef-block table.iconTable td.iconData:hover {
	background-color:#00000022; 
}
/*Ende Administrator-Anwender-Ansichten*/

/*Filteransicht */
.grid-filter-label {
  Display: none;
}
/*Ende Filteransicht */

/*Kursinhalte */
/*Hintergrund des Headers bei der Ansicht der Fragen*/
.panel-primary {
  border-color: var(--panel-color);
}
.panel-primary > .panel-heading {
    background-color: var(--panel-color);
    border-color: var(--panel-color);
}
/*Farbe in der Kursliste bei Administratoren oder Trainer*/
.sortedTable tr.oddRowColor {
	background: #f0f0f0; 
}
/* Änderung Farbe des Aufnahmebuttons Video-/Audioantwort bei Aufgaben in Kursen*/
.vjs-record .vjs-record-button.vjs-control.vjs-icon-record-start:before {
     color: #ff0000 !Important;
}
.vjs-record .vjs-record-button.vjs-control.vjs-icon-record-stop:before {
     color: #ff0000 !Important;
}
/*Buchungsbutton in einem Kurs – Schriftgröße anpassen, um die Schrift im Button vollständig anzeigen zu können*/
.ef-dashboard-header .ef-main-action-button .btn {
  Font-size: 85%;
} 
/*Buttons auf der Plattform, wie z.B. in Kursen oder in Berichten*/
.btn-primary{background-color:var(--accent-color);border-color:var(--accent-color);}
*.btn.btn-primary, *.btn.btn-primary:not(.active), *.btn.btn-primary:hover, *.btn.btn-primary:hover:not(.active), *.btn.btn-primary:focus, *.btn.btn-primary:focus:not(.active){background-color:var(--accent-color);border-color:var(--accent-color);
}
/*Button wie z.B. bei Termine, um alle Termine anzeigen zu lassen*/
.btn-warning, .btn-warning:active, .btn-warning.active, .open > .btn-warning.dropdown-toggle
{background-color:var(--accent-color);border-color:var(--accent-color);}
.btn-warning:active:hover, .btn-warning:active:focus, .btn-warning:active.focus, .btn-warning.active:hover, .btn-warning.active:focus, .btn-warning.active.focus, .open > .btn-warning.dropdown-toggle:hover, .open > .btn-warning.dropdown-toggle:focus, .open > .btn-warning.dropdown-toggle.focus
{background-color:#f0ad4e;border-color:#eea236;} 
/*Ende Kursinhalte */


/*Systemeinstellungen*/
/*Systemeinstellungen Farbe Hintergrund und Auswahl*/
.nav-pills.nav-stacked {
  border-color: #f2f2f2 !important;
} 
.nav-pills > li.active > a, .nav-pills > li.active > a:focus, .nav-pills > li.active > a:hover  {
  background-color:var(--main-color);
  border-color:var(--main-color);
} 
 /*Ende Systemeinstellungen*/


/*Graph*/
/* Farben des Graphs auf der Seite des Administrators */
/* Graph ab 5.2.22 */
.ef-chart g[fill="#67b7dc"] { 
                fill: var(--accent-color);
}
.ef-chart g[stroke="#67b7dc"] {
    stroke: var(--accent-color);
}

.ef-chart g[fill="#009688"] {
                fill: #999;
}
.ef-chart g[stroke="#009688"] {
    stroke: #999;
}
/* Schrift beim Tooltip der Akzentfarbe von schwarz auf weiß */
.ef-chart g[role=tooltip] g[fill="#67b7dc"] + g > g[fill="#000000"]  {
                fill: #fff;
}
/* Graph ab 5.2.22 Ende */
/*Ende Graph*/


/*Plugin - Verwaltung*/
/*Verstecken des Feldes Kurse in Kurskatalog bei den OE anzeigen*/
label[for="ShowCoursesinCatalog"] {
	display: none !important; 
}
label[for="ShowCoursesinCatalog"] + div {
	display: none !important; 
}
/*Ende Plugin - Verwaltung*/


/*Suchfunktion*/
/*Kreuz z.B. bei der Suche*/
.fa-times:before {
	color#404040; 
}
/*Hintergrund des Suchfeldes am oberen Rand*/
#ef-navbar form.navbar-form input[type='text'] {
	background-color: #ffffff; 
}
/*Farbe für den Hintergrund bzw. den Rahmen um die Suche*/
#searchDiv {
    box-shadow: 0 0px 2px #9a9ea3;  
} 
/*Suchfeld oben auf der Seite – Bein hineinklicken ändert sich dann die Farbe */
input#ef-search-bar.form-control.ef-search-field.active-search-input {
    background-color: #ffffff !important;
    border: none !important;
}
/*Suche ganz oben auf der Seite / ein kleines Feld am rechten Rand*/
div.searchDivRight {
 	background-color:#ffffff; 
}
/*Suche ganz oben auf der Seite / ein kleines Feld am rechten Rand, wenn man nach etwas gesucht hat*/
.ef-active > .input-group > .searchDivRight, .ef-active > .input-group > .searchDivLeft {
 	background-color:#ffffff !important; 
}
/*Suche ganz oben auf der Seite / ein kleines Feld am rechten Rand, wenn man nach etwas gesucht hat*/
#ef-navbar form.navbar-form span.search-handle {
 	background-color: #ffffff !important;
}
/*Ende Suchfunktion*/

/* DO NOT ADD/EDIT AFTER THIS LINE */
html.new-ui-html:root{--c-brand-primary:#ffffff;--c-brand-primary-darken-5:#fafafa;--c-brand-primary-darken-7:#f8f8f8;--c-brand-primary-darken-10:#f5f5f5;--c-brand-primary-darken-15:#f0f0f0;--c-brand-primary-darken-17:#eeeeee;--c-brand-primary-darken-20:#ebebeb;--c-brand-primary-darken-25:#e6e6e6;--c-brand-primary-lighten-7:#ffffff;--c-brand-primary-lighten-40:#ffffff;}