/*

			Zeigt NUR die TERMINE und den LEHRER
			Hintergrund wird ausgeblendet.


*/




/*Standardkommentare bei der Auslieferung der Instanz - sollten drin bleiben*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
	background-color: none !important;
}

/*----------------------------------
Schriftarten
-----------------------------------
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');    */

/*Variablen*/

:root {
	--white: hsl(40, 100%, 97%); /*Einfach ein Weisston*/
    --bg-color: none; /*Hintergrund-Farbe für alle Fälle*/
	

	/*Buttons*/
	--bt-color: #6bb33b; /*Hintergrundfarbe-Button*/
	--bt-color-hover: #389172; /*Farbe Button Hover State*/
	--bt-color-font: hsl(40, 100%, 97%);
    
	/*Schriftfarbe*/
	--color-font: hsl(0, 0%, 45%); 
	
	/*Table*/
	--th-color-font: hsl(0, 0%, 45%); 

	/*Anmeldeformular: AlertBox*/
	--alert-bg: hsl(#EEEEEE);
	--alert-bo: hsl(0, 0%, 45%);


}

/*Sorgt dafür dass die Termine in der Kurstabelle nicht standardmäßig ausgeklappt sind*/

.course-events {
    display: none;
}
.required-item:after:not(#lblPartnerBic){
    content: ' *';
    color: #bc0001;
}

#lblPartnerBic:after,
label[for="customerBic"]:after{
    content: ' *' !important;
    color: transparent !important;
}

#lblPartnerBic:after,
label[for="customerBic"]:after,
label[for="partnerIban"]:after,
label[for="partnerAccountOwner"]:after{
	display:none !important;
}

/* Blendet den Kurschlüssel systemweit aus*/

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


/***************************************Body-Allgemein**********************************************************/

body {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
	background-color: var(--bg-color);
	color: var(--color-font);
}

h1, h2, h3, .h1, .h2, .h3 {
    margin-top: 0;
    font-weight: 300;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--color-font);
}



/****************************************** Tabellen Sachen **********************************************/
table {
        margin: 15px;
        border-collapse: collapse;
        width: 90%;
		color: white;
    }
    th{
		background: var(--th-bg-color);
		background-color: #6bb33b;
		color: white;
	}
    tr {
        transition: all .2s ease-in;
        cursor: pointer;
    }
    
    
    h1 {
        font-weight: 600;
        text-align: center;
        color: var(--color-font);
        padding: 10px 0px;
    }
    
	tr.odd td {
    background-color: var(--tr-bg-color-odd) !important;
	}

	tr.even td {
    background-color: var(--tr-bg-color-even) !important;
	}
    /*TabellenLinien weg*/
	.table>thead>tr>th,
	.table>tbody>tr>th,
	.table>tfoot>tr>th,
	.table>thead>tr>td,
	.table>tbody>tr>td,
	.table>tfoot>tr>td {
    border: none;
	}

	
/* ------------ 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*/


	
	td.col-showAvailability,
	th.col-showAvailability,
	td.col-location, 
	th.col-location,
	td.col-teacher, 
	th.col-teacher,
	td.col-events, 
	th.col-events,
	td.col-price, 
	th.col-price,
	td.col-coursename, 
	th.col-coursename{
    	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{
		display: none !important;
	}



/*Button Änderungen  */

	.btn-default,
	.btn-primary{
    	text-decoration: none;
    	display: inline-block;
    	padding: 5px 14px;
    	background-color: var(--bt-color);
    	color: var(--bt-color-font);
    	border-radius: 5px;
   		box-shadow: 0 1px 3px #000;
    	transition: all 1s;
	}

	.btn-default:visited,
	.btn-primary:visited{
    	text-decoration: none;
    	display: inline-block;
    	padding: 5px 14px;
    	background-color: var(--bt-color);
    	color: var(--bt-color-font);
    	border-radius: 5px;
    	box-shadow: 0 1px 3px #000;
    	transition: all 1s;
	}

	.btn-default:hover,
	.btn-primary:hover{
    	text-decoration: none;
    	display: inline-block;
    	padding: 5px 14px;
    	background-color: var(--bt-color-hover) !important;
    	color: var(--bt-color-font);
	}
	.btn-default.disabled{
    	background-color: var(--bt-color);
    	color: var(--bt-color-font);
	}
	/*Design der Alertbox*/

	.alert-info {
    	color: var(--color-font);
		background: var(--alert-bg);
		border-color: var(--alert-bo);
		border-radius: 5px;
	}
	
/*-----------------------------------------------------*/

#public-coupon-form,
.coupon-step-container,
.coupon-step-header{
	background: transparent !important;
}

/*------------------------------MediaQueries (Wenns kleiner oder größer wird)-------------------------------------*/

@media screen and (max-width: 600px) {
    thead,
    #courses-table>tbody>tr:nth-child(odd)>td.col-events,
    #courses-table>tbody>tr:nth-child(even)>td.col-events {
        display: none;
    }
    table td[class*="col-"],
    table th[class*="col-"] {
        display: block;
    }
    #courses-table table,
    #courses-table tr,
    #courses-table tbody,
    #courses-table td,
    #courses-table th {
        display: block;
		border:none;
    }
    #courses-table>tbody>tr:nth-child(odd),
    #courses-table>tbody>tr:nth-child(even) {
        background-color: var(--bg-color);
		color: var(--color-font);
        border-top: 1px solid rgba(255, 255, 255, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        margin: 5%;
        box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);
    }
    /*Was vor den Zellen stehen soll*/
    #courses-table tbody tr:nth-child(even) td.col-coursename:before,
    #courses-table tbody tr:nth-child(odd) td.col-coursename:before {
        content: "Kurs:";
    }
    #courses-table tbody tr:nth-child(even) td.col-location:before,
    #courses-table tbody tr:nth-child(odd) td.col-location:before {
        content: "Ort:";
    }
    #courses-table tbody tr:nth-child(even) td.col-firstEvent:before,
    #courses-table tbody tr:nth-child(odd) td.col-firstEvent:before {
        content: "Einstieg: ";
    }
    #courses-table tbody tr:nth-child(even) td.col-events:before,
    #courses-table tbody tr:nth-child(odd) td.col-events:before {
        content: "Terminanzahl: ";
    }
    #courses-table tbody tr:nth-child(even) td.col-price:before,
    #courses-table tbody tr:nth-child(odd) td.col-price:before {
        content: "Preis: ";
    }
	 #courses-table tbody tr:nth-child(even) td.col-remarks:before,
    #courses-table tbody tr:nth-child(odd) td.col-remarks:before {
        content: "Anmerkungen: ";
    }
	
	
    /*Inhalt Zelle nach rechts*/
    td {
        text-align: right;
    }
    /*Inhalt Pseudo-Zelle nach links*/
    td::before {
        float: left;
        margin-right: 3rem;
        font-weight: bold;
    }
    #courses-table>tbody>tr:nth-child(odd)>td.col-coursename,
    #courses-table>tbody>tr:nth-child(even)>td.col-coursename {
        font-weight: bold;
    }
    /*Button soll die Zelle ausfüllen*/
        .btn-default {
            width: 100%;
        }
		
	.btn,
	.btn-primary{
		display:block;
		text-align:center;
		margin-top:10px;
		padding: 0.2em 0.6em;
	}
	.btn-default.disabled{
    	background-color: var(--bt-color);
    	color: var(--bt-color-font);
	}
    /*Ãœberschrift Level weg*/
    body>div.level-header-name {
        display: none;
    }
	
}