/*CSS Basics*/

div[id^='belplan'] * {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

/*Belegungskalender Klassisch Monatsansicht*/ 
#belplan_weekly {position: relative; width: 100%; margin-top: 20px; display: inline-block;} 
#belplan_weekly .belkal {border: 1px solid #ccc; display: inline-table; margin-right: 1.33%; border-spacing: 0px; width: 24%; float: left; margin-bottom: 15px;} 
#belplan_weekly .belkal:nth-child(4n) {margin-right: 0%;}
#belplan_weekly .belkal td {padding: 5px 0px; display: inline-block; text-align: center; width: 14.28%; font-size: 14px; border: 1px solid #fff; border-top: 0px; border-right: 0px;}
#belplan_weekly .belkal tr, .kalender .belkal tbody {border: 0px !important; width: 100%; display: inline-block;}
#belplan_weekly .belkal .tage td {font-weight: bold; float: left; border-bottom: 1px solid #ccc;background-color: #fff;} 
#belplan_weekly .belkal td.month {background-color: #F0F0F0; display: inline-block; padding: 10px 0px; width: 100%; font-weight: bold;} 

/*Belegungsplan Jahresansicht mit Tageszahlen*/
#belplan_monthWithDate {overflow: scroll; position: relative; width: 100%; margin-top: 20px; display: inline-block; border-bottom: 1px solid #ccc;}
#belplan_monthWithDate td {padding: 2px; min-width: 32px; border-right: 1px solid #ccc; text-align: center;}
#belplan_monthWithDate tr td:last-child {border-right: 0px;}
#belplan_monthWithDate table {width: 100%; border: 1px solid #ccc; display: inline-table; border-spacing: 0px; float: left; border-bottom: 0px;}
#belplan_monthWithDate table .month {width: 100px; padding-left: 10px; text-align: left !important; float: left;}
#belplan_monthWithDate table thead td {border-bottom: 1px solid #ddd; background-color: #f2f2f2;} 

/*Belegungsplan Jahresansicht mit Tagesnamen*/
#belplan_monthWithDaynames {overflow: scroll;margin-top: 40px !important;position: relative; width: 100%; margin-top: 20px; display: inline-block; border-bottom: 1px solid #ccc;}
#belplan_monthWithDaynames td {padding: 2px; min-width: 32px; border-right: 1px solid #ccc; text-align: center;}
#belplan_monthWithDaynames tr td:last-child {border-right: 0px;}
#belplan_monthWithDaynames table {width: 100%; border: 1px solid #ccc; display: inline-table; border-spacing: 0px; float: left; border-bottom: 0px;}
#belplan_monthWithDaynames table .month {width: 100px; padding-left: 10px; text-align: left !important;float: left;}
#belplan_monthWithDaynames table thead td {border-bottom: 1px solid #ddd; background-color: #f2f2f2;} 


/*Belegungsfarben*/
.frei{background-color: #8DC200 !important; color: #fff;}
.belegt, .belegung_E, .belegung_BL{background-color: #D56C6D !important; color: #fff;}
.wechsel_BB, .wechsel_EB, .wechsel_BBL{    color: #fff;
background-image: -ms-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -moz-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -o-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #D56C6D), color-stop(0.48, #D56C6D), color-stop(0.49, #FFFFFF), color-stop(0.51, #FFFFFF), color-stop(0.52, #D56C6D), color-stop(1, #D56C6D));
background-image: -webkit-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: linear-gradient(to bottom right, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);}
.start_B{    color: #fff;
background-image: -ms-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: -moz-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: -o-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8DC200), color-stop(0.49, #8DC200), color-stop(0.51, #D56C6D), color-stop(1, #D56C6D)); 
background-image: -webkit-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: linear-gradient(to bottom right, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);}
.ende_B{    color: #fff;
background-image: -ms-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: -moz-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: -o-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #D56C6D), color-stop(0.49, #D56C6D), color-stop(0.51, #8DC200), color-stop(1, #8DC200)); 
background-image: -webkit-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: linear-gradient(to bottom right, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);}
.wechsel_BB, .wechsel_EE, .wechsel_BLE, .wechsel_EBL, .wechsel_BE, .wechsel_BLBL, .wechsel_BLB{    color: #fff;
background-image: -ms-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -moz-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -o-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #D56C6D), color-stop(0.48, #D56C6D), color-stop(0.49, #FFFFFF), color-stop(0.51, #FFFFFF), color-stop(0.52, #D56C6D), color-stop(1, #D56C6D));
background-image: -webkit-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: linear-gradient(to bottom right, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);}
.start_B, .start_E, .start_BL{    color: #fff;
background-image: -ms-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: -moz-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: -o-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8DC200), color-stop(0.49, #8DC200), color-stop(0.51, #D56C6D), color-stop(1, #D56C6D)); 
background-image: -webkit-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);
background-image: linear-gradient(to bottom right, #8DC200 0%, #8DC200 49%, #D56C6D 51%, #D56C6D 100%);}
.ende_B, .ende_E, .ende_BL{    color: #fff;
background-image: -ms-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: -moz-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: -o-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #D56C6D), color-stop(0.49, #D56C6D), color-stop(0.51, #8DC200), color-stop(1, #8DC200)); 
background-image: -webkit-linear-gradient(top left, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);
background-image: linear-gradient(to bottom right, #D56C6D 0%, #D56C6D 49%, #8DC200 51%, #8DC200 100%);}
.belegung_A{background-color: #ffff00 !important;}
.wechsel_BA, .wechsel_EA, .wechsel_BLA{    color: #fff;
background-image: -ms-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: -moz-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: -o-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #D56C6D), color-stop(0.48, #ffff00), color-stop(0.49, #FFFFFF), color-stop(0.51, #FFFFFF), color-stop(0.52, #ffff00), color-stop(1, #ffff00));
background-image: -webkit-linear-gradient(top left, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: linear-gradient(to bottom right, #D56C6D 0%, #D56C6D 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);}
.ende_A{    color: #fff;
background-image: -ms-linear-gradient(top left, #ffff00 0%, #ffff00 49%, #8DC200  51%, #8DC200  100%);
background-image: -moz-linear-gradient(top left, #ffff00 0%, #ffff00 49%, #8DC200  51%, #8DC200  100%);
background-image: -o-linear-gradient(top left, #ffff00 0%, #ffff00 49%, #8DC200  51%, #8DC200  100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #ffff00), color-stop(0.49, #ffff00), color-stop(0.51, #8DC200 ), color-stop(1, #8DC200 )); 
background-image: -webkit-linear-gradient(top left, #ffff00 0%, #ffff00 49%, #8DC200  51%, #8DC200  100%);
background-image: linear-gradient(to bottom right, #ffff00 0%, #ffff00 49%, #8DC200  51%, #8DC200  100%);}
.start_A{
background-image: -ms-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #ffff00  51%, #ffff00  100%);
background-image: -moz-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #ffff00  51%, #ffff00  100%);
background-image: -o-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #ffff00  51%, #ffff00  100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #8DC200), color-stop(0.49, #8DC200), color-stop(0.51, #ffff00 ), color-stop(1, #ffff00 )); 
background-image: -webkit-linear-gradient(top left, #8DC200 0%, #8DC200 49%, #ffff00  51%, #ffff00  100%);
background-image: linear-gradient(to bottom right, #8DC200 0%, #8DC200 49%, #ffff00  51%, #ffff00  100%);}
.wechsel_AE, .wechsel_AB, .wechsel_ABL {
background-image: -ms-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -moz-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -o-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #ffff00 ), color-stop(0.48, #ffff00 ), color-stop(0.49, #FFFFFF), color-stop(0.51, #FFFFFF), color-stop(0.52, #D56C6D), color-stop(1, #D56C6D));
background-image: -webkit-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);
background-image: linear-gradient(to bottom right, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #D56C6D 52%, #D56C6D 100%);}
.wechsel_AA {
background-image: -ms-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: -moz-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: -o-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: -webkit-gradient(linear, left top, right bottom, color-stop(0, #ffff00 ), color-stop(0.48, #ffff00 ), color-stop(0.49, #FFFFFF), color-stop(0.51, #FFFFFF), color-stop(0.52, #ffff00), color-stop(1, #ffff00));
background-image: -webkit-linear-gradient(top left, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);
background-image: linear-gradient(to bottom right, #ffff00 0%, #ffff00 48%, #FFFFFF 49%, #FFFFFF 51%, #ffff00 52%, #ffff00 100%);}


/*Media Queries Responsive*/
@media (max-width: 1220px) {
	#belplan_monthWithDate {overflow: scroll;}
	#belplan_monthWithDate table .month {float: left;}
}

@media (max-width: 800px) {
	#belplan_weekly .belkal {width: calc(50% - 10px); margin-right: 20px;}
	#belplan_weekly .belkal:nth-child(2n) {margin-right: 0px;}
}

@media (max-width: 450px) {
	#belplan_weekly .belkal {width: 100%; margin-right: 0px;}
}