﻿div.w3calendar * {
	box-sizing:border-box;
}
div.w3calendar {
	font-family:Verdana, sans-serif;
}
div.w3calendar ul {
	list-style-type:none;
}

div.w3calendar .w3monat1,
div.w3calendar .w3monat2,
div.w3calendar .w3monat3 {
	position:relative;
	display:inline-block;
	vertical-align:top;
	width:32%;
	min-width:281px;
	margin-bottom:10px;
}
div.w3calendar .w3monat1,
div.w3calendar .w3monat2 {
	margin-right:10px;
}

div.w3calendar .month {
	width:100%;
	padding:15px;
	background:#4C5567;
	text-align:center;
}
div.w3calendar .month ul {
	margin:0;
	padding:0;
}
div.w3calendar .month ul li {
	list-style-type:none;
	color:white;
	font-size:20px;
	text-transform:uppercase;
	letter-spacing:3px;
}

div.w3calendar .weekdays,
div.w3calendar .days {
	margin:0;
	padding:10px 0;
	background:#eee;
}
div.w3calendar .weekdays {
	background:#ddd;
}
div.w3calendar .weekdays li,
div.w3calendar .days li {
	display:inline-block;
	width:14.25%;
	min-width:14.25%;
	text-align:center;
	font-size:12px;
	color:#777;
	margin-bottom:0;
}

div.w3calendar .days li {
	color:inherit;
	background-color:#EEE;
	border:1px #EEE solid;
	padding:5px;
}
div.w3calendar .days li.green {
	background-color:#9ACD32;
	color:#333;

	animation-name:einbgr1;
	animation-duration:0.2s;
	animation-iteration-count:2;
}
div.w3calendar .days li.green:hover {
	animation-name:einbgr2;
	animation-duration:0.3s;
	animation-iteration-count:1;
}
div.w3calendar .days li.yellow {
	background-color:#FFD700;
	color:#333;
	animation-name:einbye1;
	animation-duration:0.3s;
	animation-iteration-count:2;
}
div.w3calendar .days li.red {
	background-color:#FF3030;
	color:#FFF;
	animation-name:einbre1;
	animation-duration:0.3s;
	animation-iteration-count:2;
}
div.w3calendar .days li.ftag {
	background-color:#FFF;
	color:#c0c0c0;
}
div.w3calendar .days li.aktiv {
}
/*	background-color:#3D9BDD !important; */
/*	color:#FFF !important; */
div.w3calendar .days li.resettage {
	cursor:default;
	background-color:transparent;
	color:#333;

	animation-name:resett;
	animation-duration:0.3s;
	animation-iteration-count:2;
}


div.w3zeiten {
	box-sizing:border-box;
	display:flex;
	flex-wrap:wrap;
}
div.w3zeiten div {
	flex-basis:98px;
	flex-grow:0;
	flex-shrink:0;
	padding:5px;
	margin:5px 5px 0 0;
	text-align:center;
	background-color:#efefef;
	color:#c0c0c0;
}
div.w3zeiten div.aktiv {
	background-color:#9ACD32;
	color:#333;
	animation-name:einbgr1;
	animation-duration:0.2s;
	animation-iteration-count:2;
}
div.w3zeiten div.aktiv:hover {
	animation-name:einbgr2;
	animation-duration:0.3s;
	animation-iteration-count:1;
}
div.w3zeiten div.resetzeit {
	cursor:default;
	background-color:#efefef;
	color:#c0c0c0;

	animation-name:resetz;
	animation-duration:0.3s;
	animation-iteration-count:2;
}

/* Zeiten ausblenden */
div.w3zeiten #ze0700,
div.w3zeiten #ze0715,
div.w3zeiten #ze0730,
div.w3zeiten #ze0745,
div.w3zeiten #ze1200,
div.w3zeiten #ze1215,
div.w3zeiten #ze1230,
div.w3zeiten #ze1245,
div.w3zeiten #ze1300,
div.w3zeiten #ze1615,
div.w3zeiten #ze1630,
div.w3zeiten #ze1645,
div.w3zeiten #ze1700,
div.w3zeiten #ze1715,
div.w3zeiten #ze1730,
div.w3zeiten #ze1745,
div.w3zeiten #ze1800 {
	display:none;
}

@keyframes einbgr1 {
	from { background-color:#FFFFFF; color:#FFFFFF; }
	to   { background-color:#9ACD32; color:#333333; }
}
@keyframes einbgr2 {
	from { background-color:#FFFFFF; color:#FFFFFF; }
	to   { background-color:#9ACD32; color:#333333; }
}
@keyframes einbye1 {
	from { background-color:#FFFFFF; color:#FFFFFF; }
	to   { background-color:#FFD700; color:#333333; }
}
@keyframes einbre1 {
	from { background-color:#FFFFFF; color:#FFFFFF; }
	to   { background-color:#FF3030; color:#FFFFFF; }
}
@keyframes resett {
	from { background-color:#FF3030; color:#FF3030; }
	to   { background-color:#EEEEEE; color:#333333; }
}
@keyframes resetz {
	from { background-color:#FF3030; color:#FF3030; }
	to   { background-color:#EFEFEF; color:#C0C0C0; }
}


/* Add media queries for smaller screens */
@media screen and (max-width:1239px) {
	div.w3calendar .w3monat1,
	div.w3calendar .w3monat2,
	div.w3calendar .w3monat3 {
		width:100%;
		max-width:400px;
	}
}
@media screen and (max-width:720px) {
	div.w3calendar .w3monat1,
	div.w3calendar .w3monat2,
	div.w3calendar .w3monat3 {
		display:block;
		width:100%;
		max-width:400px;
	}
	div.w3calendar .w3monat1,
	div.w3calendar .w3monat2 {
		margin-right:0;
	}
}
@media screen and (max-width: 420px) {
}
@media screen and (max-width: 290px) {
}