body.resources .alert {
	margin-left:4px;
	margin-right:4px;
	display:inline-block;
	margin-top:1em; 
}


/* v=resource und v=editresource */
body.resource div.resource{
	display:flex;
	flex-wrap:wrap;
	background-color:#eee;
	padding: 1em 0 1em 1em;
	margin:0;
}
body.resource div.resource >div{
	background-color:#fff;
	margin:0 1em 1em 0;
	box-shadow: 0 2px 12px rgba(0,0,0,0.1);
	padding:0.5em;
	flex-grow:1;
}

.resourcegroup label.resource {
	box-sizing:border-box;
	min-width:30px;
	text-align:center;
	cursor:pointer;
	white-space: nowrap;
	background-color:#fff;
	border:1px solid #ddd;
	display:inline-block;
	padding:6px 3px;
	margin: 2px 2px 2px 0;
	font-size:larger;
	text-decoration:none;
}
.resourcegroup label.resource:hover {
	background-color:#fe0;
}

label.resource.prio1 {
	order:-2;
}

.resourceday.dropzone{
	background-color:rgba(0,255,0,0.1);
}
.resourceday.dropzone.over{
	background-color:rgba(100,255,0,0.3);
}
.rv {
	background-color:#ccc;
	border:1px solid #ccc;
	padding:0px;
	border-radius:3px;
	position:relative;
}
.rv span.title{
	word-break:break-word;
	word-wrap:break-word;
	hyphens:auto;
}

td a.rv {
	padding:5px;
	display:inline-block;
	text-decoration:none;
	color:#600;
}
td a.rv span{
	display:block;
	color:#000;
}

.rv {
	text-decoration:none;
}
a.rv {
	color:#300;
	padding:2px 2px;
}

body.resources a.rv{
	min-height:20px;
	z-index:10;
}
.rv > a {
	color:#300;
	display:inline-block;
	padding:4px;
}
label.rv > a {
	color:#f30;
}

a.rv.type1:hover {
	background-color:#9c6;
}
a.rv.type3:hover {
	background-color:#9cd;
}
a.rv.type5:hover {
	background-color:#da0;
}
a.rv.type6:hover {
	background-color:#f99;
}
a.rv.type9:hover {
	background-color:#999;
}
a.rv.type10:hover {
	background-color:#ee0;
}
a.rv.type11:hover {
	background-color:#ff0;
}
a.rv.type12:hover {
	background-color:#fcf;
}
a.rv .date {
	padding-right:2px;
}
.rv > a:hover {
	background-color:#f60;
	border-color:#f60;
}

.rv a.creator, .rv a.modifier {
	display:none;
	position:absolute;
	bottom:0;
	color:#000;
	background-color:#fff;
	text-decoration:none;
	font-size:10px;
	line-height:1em;
	box-sizing:border-box;
	padding:0;
	border:1px solid #fff;
	border-radius:2px;
}
.rv a.creator { left:0;}
.rv a.modifier { right:0;}

.rv:hover a.creator,
.rv:hover a.modifier {display:block;}

.rv a.att {
	text-decoration:none;
	text-align:center;
	display:inline-block;
	vertical-align:top;
	color:#600;
	background-color:#eee;
	font-size:12px;
	line-height:1em;
	box-sizing:border-box;
	width:24px;
	height:24px;
	padding:5px 0 0 0;
	border:1px solid #fff;
	border-radius:50%;
	word-break:normal;
	word-wrap:normal;
}
.rv span.result {
	display:block;
	background-color:rgba(255,255,0,0.3);
	font-size:10px;
}
.rv .tourn .comp {font-weight:bold;}

#layout2 .rv .t {
	font-size:10px;
	text-align:center;
	line-height:11px;
}

#layout2 .rv a.att,
#layout2 .rv a.attimg {
	margin-top:-2px;
	width:20px;
	height:20px;
}
#layout2 .rv a.att {
	padding:3px 0 0 0;
}
#layout2 .rv.three a.att,
#layout2 .rv.three a.attimg {
	margin-left:-2px;
}
#layout2 .rv.three a.att:first-of-type,
#layout2 .rv.three a.attimg:first-of-type {
	margin-left:0px;
}

#layout2 .rv.four a.att,
#layout2 .rv.four a.attimg {
	margin-left:-7px;
}
#layout2 .rv.four a.att:first-of-type,
#layout2 .rv.four a.attimg:first-of-type {
	margin-left:-2px;
}

#layout2 #plusbutton{
	display:none;
	position:absolute;
	width:60px;
	text-align:center;
	background-color:rgba(102,153,51,0.8);
	color:#fff;
	font-weight:bold;
	font-size:20px;
	height:30px;
	padding-top:4px;
	box-sizing:border-box;
}

.rv a.creator:hover,
.rv a.modifier:hover,
.rv a.att:hover{
	color:#fff;
	background-color:#f60;
}

.rv a.attimg {
	margin-left:2px;
	color:#600;
	display:inline-block;
	padding:0;
	font-size:12px;
	border-radius:50%;
	vertical-align:top;
	border:1px solid #fff;
	box-sizing:border-box;
	line-height:0;
}
.rv a.attimg img {
	border-radius:50%;
	width:22px;
	height:22px;
	user-select:none; /* prevents dragging attendee image instead of event item */
}
.rv a.attimg:hover img {
	scale:1.5;
}
#layout2 .rv a.attimg {
	margin-left:0;
	width:20px;
	height:20px;
	padding:0;
}
#layout2 .rv a.attimg img {
	width:18px;
	height:18px;
}
.rv a.attimg:hover {color:#fff;border-color:#f60;}

.sortlist a.rv.type6,
.sortlist a.rv.type10,
.sortlist a.rv.type11,
.sortlist a.rv.type12 {
	padding-bottom:12px;
}

div.resources .rv.type6,
div.resources .rv.type10,
div.resources .rv.type11,
div.resources .rv.type12 {
	padding-bottom:8px;
}

.sortlist a.rv.type4 span.construction,
.sortlist a.rv.type6 span.tourn,
.sortlist a.rv.type10 span.tschool,
.sortlist a.rv.type11 span.trainer,
.sortlist a.rv.type12 span.geselliges,
div.resources .rv.type4 span.construction,
div.resources .rv.type6 span.tourn,
div.resources .rv.type10 span.tschool,
div.resources .rv.type11 span.trainer,
div.resources .rv.type12 span.geselliges {
	position: absolute;
	left: 0;
	bottom: 0;
	font-size:12px;
	display:inline-block;
	margin:0;
	padding:1px 2px 0 1px;
	text-align:left;
	border-top-right-radius:5px;
}

.sortlist a.rv.type4 span.construction,
div.resources .rv.type4 span.construction {
	background-color: rgba(102,102,102,0.2);
}
.sortlist a.rv.type4 span.construction::before,
div.resources .rv.type4 span.construction::before {
	/* construction */
	/*content:'\01F6A7';*/
}

.sortlist a.rv.type6 span.tourn,
div.resources .rv.type6 span.tourn {
	background-color: rgba(255,0,0,0.1);
}

.sortlist a.rv.type10 span.tschool,
div.resources .rv.type10 span.tschool {
	background-color: rgba(255,255,0,0.2);
}

.sortlist a.rv.type11 span.trainer,
div.resources .rv.type11 span.trainer {
	background-color: rgba(255,255,0,0.2);
}

.sortlist a.rv.type12 span.geselliges,
div.resources .rv.type12 span.geselliges {
	background-color: rgba(255,0,255,0.2);
}

#layout2 .rv.type5{
	text-align:center;
}

#layout2 .rv.type6,
#layout2 .rv.type10,
#layout2 .rv.type11,
#layout2 .rv.type12 {
	padding-bottom:10px;
}

#layout2 .rv.type4 span.construction,
#layout2 .rv.type5 span.league,
#layout2 .rv.type6 span.tourn,
#layout2 .rv.type10 span.tschool,
#layout2 .rv.type11 span.trainer,
#layout2 .rv.type12 span.geselliges {
	position:absolute;
	left:0;
	bottom:0;
	/*border-top-left-radius:4px;*/
	font-size:10px;
	line-height:10px;
	padding-left:0px;
	padding-right:0px;
	box-sizing:border-box;
	width:104%;
	margin-left:-2%;
}
#layout2 .rv.type6 span.tourn {
	font-size:10px;
}



#layout2 .rv.type4 span.construction {
	/*background-color: rgba(102,102,102,0.2);*/
	padding-left:0;
	padding-right:0;
	margin-left:-1px;
	margin-right:-1px;
}

#layout2 .rv.type4 span.construction::before {
	content:'Platzarbeiten';
}
#layout2 .rv.type5 span.league{
	top:1em;
	bottom:initial;
	padding-left:0;
	padding-right:0;
	font-size:12px;
}

#layout2 .rv.type5 a.att,
#layout2 .rv.type5 a.attimg {
	margin-top:1em;
}

#layout2 .rv.type5 span.leagueteam{
	display:block;
	text-align:center;
	padding-top:2em;	
}

#layout2 .rv.type6 span.tourn {
	background-color: rgba(255,151,151,0.3);
}
#layout2 .rv.type6 span.tourn::before {
	/* trophy */
	/*content:'\01F3C6';*/
}

#layout2 .rv.type10 span.tschool {
	background-color: rgba(255,255,0,0.2);
	padding-left:0;
	padding-right:0;
	padding-top:2px;
	left:-1px;
	right:-1px;
}

#layout2 .rv.type11 span.trainer {
	background-color: rgba(255,255,0,0.2);
}

#layout2 .rv.type12 span.geselliges {
	background-color: rgba(255,0,255,0.2);
}

.attgroup {
	padding:0;
        margin:0;
        margin-bottom:0.5em;
        padding-bottom:0.5em;
        border:none;
        background-color:#eee;
        border-top: 1px solid #999;

	display:flex;
	/*flex-direction:column;*/
	flex-wrap:wrap;
	justify-content:space-between;
}

label.team {
	display:block;
	padding:0.5em;
	border:1px solid #ccc;
	border-radius: 6px;
}

/* XXX depends on count of current club members for nice flex wrapping */
@media only screen and ( min-width: 360px){
	input#addmore:checked ~ #addattendees #availusers {
		/*height:2080px;*/
	}
}
@media only screen and ( max-width: 480px){
	.attgroup label {
		width:48vw;
		margin-left:0 !important;
		margin-right:0 !important;
	}
}
@media only screen and ( max-width: 360px){
	.rv{
		border-left-width:1px;
	}
	.rv span.date{
		font-size:smaller;
		display:block;
	}
}
.attgroup label, .attendees label{
	/* flexlayout */
	/*align-self:flex-end;*/
	/*align-self:flex-start;*/

	/* divlayout */
	display:inline-block;
	vertical-align:top;

	height:30px;

	border:1px solid #ddd;
	background-color:#fff;
	border-radius:16px;
	margin:2px;
	padding-top:0px;
	padding-bottom:0px;
	padding-left:30px;
	padding-right:4px;
	box-sizing:border-box;
	line-height:24px;
	cursor:pointer;
	white-space:nowrap;
	max-width:180px;
	overflow-x:hidden; /* clip not everywhere supported */
	text-overflow:ellipsis;
}
.attendees label.withimg, .attgroup label.withimg{
	padding-left:2px;
}
.attgroup label.m, .attendees label.m {
	border-left: 4px solid #09c !important;
}
.attgroup label.w, .attendees label.w {
	border-left: 4px solid #f60 !important;
}

body.resources .attendees label::after {
	content: '✕';
	padding: 5px;
	color: #999;
	background-color: #ddd;
	margin: 2px;
	display: inline-block;
	line-height: 1em;
	font-size: 16px;
	border-radius: 50%;
	width:24px;
	height:24px;
	box-sizing:border-box;
	text-align:center;
}
body.resources .attendees label{
	padding-right:2px;
}
body.resources .attendees label:hover::after{
	color:#fff;
	background-color:#c00;
}


body.resources .attendees label:hover,
body.resources .attendees input:checked + label,
#deletereservation .repeatrv input:checked + label {
	background-color: #fc9;
	border-color: #f00;
	box-shadow: 0 0 3px 0px #f66;
	background: repeating-linear-gradient( 15deg, rgba(200,100,100,0.1), rgba(200,100,100,0.1) 46%, rgba(200,0,0,.5) 46%, rgba(200,0,0,.5) 54%), repeating-linear-gradient(165deg, rgba(200,100,100,0.1), rgba(200,100,100,0.1) 46%, rgba(200,0,0,.5) 46%, rgba(200,0,0,.5) 54%);
}

#availusers label img, .attendees label img {
	height:24px;
	width:24px;
	border-radius:12px;
	margin-right:4px;
	margin-top:2px;
	display:inline-block;
	vertical-align:bottom;
}

.typegroup {
	margin:0;
	padding:0.2em 0;
}
.typegroup legend{ display:none;}
.typegroup input {display:none;}
.typegroup label {
	display:inline-block;
	border-radius:4px;
	background-color:#fff;
	padding:6px 2px;
	margin-left:0px;
	margin-right:4px;
	margin-top:2px;
	margin-bottom:2px;
	border:1px solid #ccc;
	cursor:pointer;
}
.typegroup label:hover{
	box-shadow: 0 0 4px 2px #ff0;
}
.typegroup input:checked + label {
	color:#000;
	background-color:#fd0;
	border-color:#fc0;
	box-shadow: 0 0 4px 2px #ff0;
}
.typegroup label.wartung,
.typegroup label.tennis {}

.typegroup select#tid{
	display:none;
}

/* Turnierauswahl */
.typegroup #type6:checked ~ select#tid{
	height:200px;
}

.typegroup #wiederholungstermine,
.typegroup #competitiongames{
	transition:0.5s;
	height:0;
	overflow-y:auto;
}

/* TODO ist auch abhaengig von Berechtigung fuer Wiederholungstermine der jeweiligen Belegungsart und Ressource */
.typegroup #type6:checked ~ #wiederholungstermine
{
	height:110px;
}

.typegroup #type2:checked ~ #wiederholungstermine,
.typegroup #type10:checked ~ #wiederholungstermine,
.typegroup #type11:checked ~ #wiederholungstermine,
.typegroup #type12:checked ~ #wiederholungstermine
{
	height:210px;
}

.typegroup #type6:checked ~ #competitiongames{
	height:140px;
}

.typegroup #wiederholungstermine div {
	display:flex;
	flex-wrap:wrap;
}
.typegroup #wiederholungstermine div div label{
	width:100%;
}
.typegroup #wiederholungstermine p {
	margin:0.2em;
	line-height:1em;
}

.typegroup #wiederholungstermine p label{
	line-height:1em;
	padding-bottom:0.1em;
}

.typegroup #wiederholungstermine div div{
	width:25%;
	min-width:100px;
}

.typegroup #wiederholungstermine div label.notpossible {
	border:1px #666 solid;
	background-color:#999;
}

.typegroup #wiederholungstermine .repdate {
	display: block;
	text-align:center;
}

.typegroup #wiederholungstermine .reptime {
	display: block;
	text-align:center;
	color:#666;
	font-size:smaller;
}

.rv.self {
	box-shadow: 0 0 3px 3px #06f;
	z-index:100;
}

label.tennis, .rv.type1 {
	border-color:#9c0;
	background-color:rgba(204,255,153, 0.8);
}
label.training, .rv.type3 {
	border-color:#9cc;
	background-color:rgba(204,255,255,0.8);
}
label.punktspiel, .rv.type5 {
	border-color:#c90;
	background-color:rgba(255, 180, 51, 0.8);
}
label.turnier, .rv.type6 {
	border-color:#f60;
	background-color:rgba(255,204,204,0.8);
}
div.alert ul {padding-left:1em;}
div.alert ul li {padding-top:0.5em;}

.alert label.training,
.alert label.tennis,
.alert label.punktspiel,
.alert label.turnier {
	border-width:1px;
	border-style:solid;
	padding:4px 4px;
	border-radius:4px;
	display:inline-block;
}

label.forderung, .rv.type7 {
	border: 1px solid #daa;
	background-color: rgba(255,204,204,0.6);
}
label.schule, .rv.type10 {
	border-color:#dd0;
	background-color:rgba(255,255,153,0.8);
}
label.trainerstunde, .rv.type11 {}
label.geselliges, .rv.type12 {
	border-color:#d9d;
	background-color:rgba(255,230,255,0.8);
}
label.gast, .rv.type13 {
	border-color:#99c;
	background-color:rgba(204,204,255,0.8);
}
label.event, .rv.type14 {
	border-color:#d9c;
	background-color:rgba(255,204,238,0.8);
}

label.wartung, label.walzen, label.platzsperre,
.rv.type2, .rv.type8, .rv.type9 {
	border-color: #bbb !important;
	background-color:rgba(152,152,152,0.8);
}

.rv.type8::after {
	background-image: url('//tennis.chemieradebeul.de/images/smilies/chantier.gif');
	width: 34px;
	height: 22px;
	display: block;
	content: '';
	background-size: contain;
	position: absolute;
	right: 0;
	bottom: 0;
}
label.platzarbeiten, .rv.type4 {
	border-color: #bbb !important;
	background-color:rgba(102,102,102,0.5);
	/* zu ablenkend */
	/*background-image:repeating-linear-gradient(-45deg, rgba(0,0,0,0.2), rgba(0,0,0,0.2) 10px, rgba(255,255,0,0.3) 11px, rgba(255,255,0,0.3) 20px);*/
}
label.trainer, .rv.type11 {
	background-color:rgba(255,255,204,0.8);
	border-color:#dd0;
}

.rv.s2 {
	/*background-image: linear-gradient(45deg, #f00, #ff0 10%, #f0f 60%);*/
	background-image: linear-gradient(45deg, #f00, #f00 50%, #ff0 50%, #ff0 100%);
}

#rvbasics{
	display:block;
	vertical-align:top;
	background-color:#eee;
	padding:1em;
	margin-top:10px;
}

#deletereservation div.repeatrv.ended{
	background-color:#ccc;
	opacity:0.5;
}
#deletereservation div.repeatrv.ended label{
	font-size:smaller;
	color:#666;
}
#deletereservation div.repeatrv.ended input{
	display:none;
}
#deletereservation div.repeatrv {
	margin:0.5em;
}

#deletereservation div.repeatrv label{
	display:inline-block;
	padding:0.5em;
}
#deletereservation div.repeatrv.modified label{
	border-left: 5px solid #fc0;
}
#deletereservation div.repeatrv.modified label b{
	padding-top:0.2em;
	padding-bottom:0.2em;
	background-color:rgba(150,150,150,0.5);
}

img#dwd {
	width:100%;
}


#wetter{
	max-height:0;
	overflow:hidden;
	transition:0.5s;
}
input#s_wetter{
	display:none;
}

a#stapellink,
a#rasterlink,
label#wetterbutton,
a.sizebutton {
	line-height:1.5em;
	height:20px;
	margin:12px 4px;
	padding:3px;
	border-radius:3px;
	border-color:#ccc;
	border-style:solid;
	border-width:1px;
	display:inline-block;
	cursor:pointer;
	vertical-align:top;
	text-decoration:none;
}
#wetter a{
	border:1px solid #f60;
	display:inline-block;
}
label#wetterbutton:after{
	content:"\1f308 Wettervorhersage";
}
input#s_wetter:checked ~ label#wetterbutton:after {
	content:"\1f308 Vorhersage einklappen";
}
input#s_wetter:checked ~ #wetter {
	max-height:100vh;
	transition:0.5s;
}

@media only screen and ( min-width: 480px){
	#rvbasics {
		display:inline-block;
		margin-right:10px;
	}
}

@media only screen and ( min-width: 1000px){
	img#dwd {width:auto;}
}