/*

ANGEZEIGT:
Kursname
Standort
Lehrer
Tag und Uhrzeit aber ohne DATUM
Anmeldebutton

*/

/* latin-ext */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJbecmNE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: local('Poppins Regular'), local('Poppins-Regular'), url(https://fonts.gstatic.com/s/poppins/v20/pxiEyp8kv8JHgFVrJJnecmNE.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}


.alert-info .course-key {
 display: none !important; 
}

html,
body{
	background: none !important;
	font-size: 16px;
	font-family: 'Poppins', sans-serif;
}

.btn{
	padding: 5px 10px;
}

.btn:active, .btn:focus, .btn:hover {
	background-color: #16163F;
	color: lightblue;
}
.btn-default{
	background-color: #16163F;
	color: white;
}

.btn-primary{
	background-color: #16163F;
}

.btn-primary.active, .btn-primary:active, .btn-primary:focus, .btn-primary:hover, .open .dropdown-toggle.btn-primary{
	background-color: #16163F;
}

.alert-info {
    background-color: #16163F;
    border-color: #16163F;
    color: white;
}

.type-header-name{
    display: none !important;
}

.group-level-item-name {
    color: #333;
	font-size: 24px;
	font-family: 'Roboto Condensed', sans-serif;
}


a {
    color: #16163F;
}

a:focus, a:hover{
	color: #333;
}

.select#firstEvent.form-control.required {
    background color: #333;
}

/* courses */
.table > thead > tr > th{
	background-color: black;
	border-bottom: 4px solid #a6a6fd;
	color: #ffffff;
}

.table > tbody > tr > td, 
.table > tbody > tr > th {
    padding: 5px !important;
	vertical-align: center;
}

#courses-table > thead {
   background-color:white;	
}

.events-info{
	/*cursor: pointer;*/
    display: none !important;
}

.course-events{
	display: none;
}

.course-events table{
	width: 100%;
}

.course-events > td{
	padding-top: 1em !important;
	padding-bottom: 1em !important;
}

.course-events > td:before{
	content: 'Terminübersicht:';
	font-weight: bold;
	display: block;
	margin-bottom: .5em;
}

.course-events > td td{
	padding: 2px 0;
}


#courses-table .table thead,
#courses-table .table thead tr{
	background: #000 !important; 
}



tr.odd td{
	background-color: #FAF7F7 !important;
}

tr.even td{
	background-color: #ffffff !important;
}

.course-events .event-number {
	display: none;
}


.required-item:after {
            content: ' *';
            color: #16163F !important;
        }

.booking-type-item.selected {
    background-color: #fff2cc !important;
    border-color: #16163F;
    color: #333;
}



/* ------------ AUSBLENDUNGEN ----------------- */

/*
	th deffiniert die Überschrift der Spalte.
	td deffiniert den Inhalt
	Muss also beides verboten oder nicht verboten werden!!

	Spalten:
		Standort: 		td.col-location, th.col-location
		Lehrer: 		th.col-teacher, td.col-teacher
		Anmerkungen:	td.col-remarks, th.col-remarks
		Preis:			td.col-price, th.col-price
		Verfügbarkeit:	td.col-showAvailability, th.col-showAvailability
		Kursname:		td.col-coursename, th.col-coursename
		Starttermin:	td.col-firstEvent, th.col-firstEvent
		Termine i:		td.col-events, th.col-events
		

	Hier alle Tabellen Spalten die NICHT angezeigt werden sollen*/


	.course-type, 
.course-price , 
.col-price,
.course-numberOfEvents,
td.col-events + td ,
th.col-events ,
td.col-events , 
th.col-remarks ,
td.col-remarks ,
th.col-events ,
th.col-teacher, td.col-teacher,
td.col-location, th.col-location{
    	display: none !important;
	}

/*
	Hier alles was ebenfalls nicht angezeigt werden soll

	-Location-
		Saalname:	.room-name
	
	-Einstieg-
		Das Datum:	.course-firstEvent-date
	
	-Terminliste-
		Der Block: 	td.event-block
*/



.room-name,
.course-firstEvent-date{
	display: none !important;
}





/* media queries */
/*mobile Ansicht*/

@media screen and (max-width: 600px){
	
	#courses-table{
		font-size: .9em;
	}
	
	
	#courses-table table, tr, tbody, td, th{
		display: block;
	}
	
	#courses-table tr.course-item td{
		display: block !important;
	}
	
/*ausgeblendete Elemente*/
	
	#courses-table tr.course-item td.col-events,
	#courses-table tr.course-item td.col-showAvailability,

	#courses-table tr.course-item td.col-price,  
	#courses-table tr.course-item th.col-price,
	#courses-table tr.course-item td.col-remarks,
	#courses-table tr.course-item th.col-remarks,
	#courses-table td.col-events + td,
	#courses-table thead,
	.course-numberOfEvents,
	div.back-to-levels,
	div.level-header-name {
		display: none !important;
	}
	
	#courses-table > tbody > tr > td {
		padding-left: 95px !important;
		position: relative;
		width: auto !important;
		border: 0px;
	}
	
	#courses-table tr.course-item{
		border-top: 1px solid #e6e7e8;
	}

	/*Bezeichnung der Zeilen*/
	#courses-table .course-item td:before{
		font-weight: bold;
		padding-right: 1em;
		display: inline-block;
		width: 110px;
		margin-left: -80px;
	}
	
	#courses-table .course-item td.col-coursename:before{
		content: "Kurs: "
	}
	#courses-table .course-item td.col-firstEvent:before{
		content: "Termin: "
	}
	#courses-table .course-item td.col-location:before{
		content: "Standort: "
	}
	#courses-table .course-item td.col-remarks:before{
		content: "Anmerkungen: "
	}