html {
	height: 100%;
}
body {
	margin: 0px;
	padding: 0px;
	height: 100%;
	display: flex;
	flex-direction: column;
}
body, input, td, textarea, a {
	font-family: "Open Sans";
	font-size: 12px;
}
	
input[type=button], input[type=submit], input[type=reset], input[type=checkbox], input[type=radio], input[type=color], a, .clickable, select, option, label {
	cursor: pointer;
}
input[type=button], input[type=submit], input[type=reset] {
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 3px;
	padding-bottom: 3px;
	
	background-color: #ccc;
}
input[type=button].selected {
	background-color: #fcc;
}
label {
	vertical-align: top;
	top: 5px;
	position: relative;
}

h1 {
}
h2 {
	margin-top: 20px;
	margin-bottom: 5px;
}

table {
	border-collapse: collapse;
	width: 100%;
}
@media screen and (max-width: 480px) {
	table {
		margin-top: 60px;
	}
}

td {
	white-space: nowrap;
	min-width: 20px;
}
	

thead tr td {
	font-weight: bold;
	border-bottom: 2px solid #000;
}
@media screen and (max-width: 480px) {
	thead tr td div {
		transform-origin: top left;
		transform: rotate(-90deg);
		position: absolute;
		max-width: 60px;
		overflow: hidden;
	}
	.nomobile {
		display: none !important;
	}
}

tbody tr.highlight td {
	background-color: #FF0;
}

	
ul.navigation {
	display: block;
	border-bottom: 1px solid #000;
	background-color: #CCC;
	margin: 0px;
	padding: 0px;
	line-height: 20px;
	height: 21px;
	padding-top: 5px;
}
ul.navigation li {
	display: inline-block;
	margin: 0px;
	padding: 0px;
	border-left: 1px solid #CCC;
	border-right: 1px solid #CCC;
	border-top: 1px solid #CCC;
}
ul.navigation li.selected {
	border-bottom: 1px solid #FFF;
	background-color: #FFF;

	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	border-bottom: 1px solid #fff;
}
ul.navigation li.selected a {
	font-weight: bold;
}
ul.navigation li a {
	padding-left: 5px;
	padding-right: 5px;
	display: block;
}
ul.navigation li:hover {
	background-color: #AAA;
	border-left: 1px solid #000;
	border-right: 1px solid #000;
	border-top: 1px solid #000;
	border-bottom: 1px solid #000;
}


.contentarea {
	margin: 20px;
	height: calc(100% - 67px);
}
@media screen and (max-width: 480px) {
	.contentarea {
		margin: 0px;
	}
}


.footer {
	border-top: 1px solid #aaa;
	align-self: flex-end;
	width: 100%;
}


.loginbox.inner {
	width: 300px;
	background-color: #ddd;
	padding: 20px;
	border: 1px solid #aaa;
	margin: 20px;
}

a {
	text-decoration: none;
	color: #000;
}



/* ---- drag & drop ---- */

.draggable, .dropzone {
	user-select: none;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
}
.draggable {
}
.dropzone {
}
/* Alle Elemente, wenn ein d&d Vorgang läuft */
.draggable.ongoing {
	outline: 1px solid red !important;
	pointer: move !important;
	opacity: 0.5 !important;
}
.dropzone.ongoing {
	/*outline: 1px solid blue !important;*/
	pointer: move !important;
	/*opacity: 0.5 !important;*/
}
/* Das jeweils spezifische Element */
.draggable.hover, .dd-hover {
	outline: 1px solid lime !important;
	pointer: grab !important;
	opacity: 0.5 !important;
}
.dropzone.hover {
	background-color: #FFFFAA !important;
	pointer: grabbing !important;
}

/* hover bei einem gruppenelement - layoutplan */
g:hover {
	filter:invert(10%);
}
g.drop-hover {
	filter:invert(30%);
	background-color:red;
	fill:red;
}
g.drag-hover {
}
@media screen and (-webkit-min-device-pixel-ratio:0) and (min-resolution:.001dpcm) {
	g.hover {
		/* outline: 5px solid red; */
	}
}



#jhajxwrpr {
	margin: 0px;
	padding: 0px;
	flex-grow: 1;
}
#jhajxovrly {
	position: fixed;
	visibility: hidden;
	display: flex;
	height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	z-index: 99998;
}
#jhajxinly {
	position: fixed;
	visibility: hidden;
	display: flex;
	height: 100%;
	width: 100%;
	z-index: 99999;
}
#jhajxinly div.window {
	background-color: rgba(60,60,60,0.7);
	padding: 20px;
	padding-right: 30px;
	padding-left: 30px;
	/*box-shadow: 0px 0px 30px #000;*/
	color: #fff;
	margin: auto;
}
#jhajxinly div.head {
	font-size: 18px;
	margin-bottom: 10px;
}
#jhajxinly textarea {
	font-family: monospace;
	display:block;
	white-space: pre;
}
#jhajxinly textarea.multiline {
	width: 720px;
	height: 500px;
}
#jhajxinly textarea.single {
	/*width: 500px;*/
	width: 1000px;
	/*height: 19px;*/
	font-size: 16px;
	padding: 7px;
}
#jhajxinly div.btn {
	display: inline-block;
	border: 1px solid black;
	height: 19px;
	padding: 7px;
	cursor: pointer;
	width: 100px;
	text-align: center;
}
#jhajxinly div.btn:hover {
	background-color: #cfc;
}
@media screen and (max-width: 480px) {
	#jhajxinly {
		width: 100% !important;
		left: 0px !important;
	}
	#jhajxinly textarea {
		width: 100% !important;
	}
	#jhajxinly textarea.multiline {
		height: 200px;
	}
}


.clickable:hover {
	cursor: pointer;
	background-color: #ddd;
	outline: 1px solid #aaa;
}


.red {
	color: #FF3333;
}

.mark {
	display: inline;
	background-color: yellow;
	color: #000;
}

.left {
	text-align: left;
}
.center {
	text-align: center;
}
.right {
	text-align: right;
}

.nofloat {
	float: none !important;
}

.noselect, svg text {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}



/* ---- Personenliste ---- */

td.geschlecht {
	text-align:center;
}
td.geschlecht.geschlecht_m svg {
	height: 18px;
	fill: #00f;
}
td.geschlecht.geschlecht_f svg {
	height: 18px;
	fill: #f09;
}

td.zuordnung {
	text-align: center;
}
td.zuordnung_1 {
	background-color: #FFAAFF;
}
td.zuordnung_2 {
	background-color: #AACCFF;
}

tr.gruppe td {
	border-top: 1px solid #000;
}
tr.subgruppe td {
	border-top: 1px dotted #000;
}

table.personen tr:nth-child(2n), table.users tr:nth-child(2n), table.logistik_workflows tr:nth-child(2n), table.logistik_elements tr:nth-child(2n) td:nth-child(n+3), table.plan_elements tr:nth-child(2n), table.plan_assignments tr:nth-child(2n)  {
	background-color: rgba(210,210,210,0.15);
}

span.letter {
	font-weight: bold;
	font-size: 16px;
	width: 20px;
	height: 20px;
	border: 1px solid black;
	text-align: center;
	display: inline-block;
	font-family: "Courier";
	vertical-align: middle;
	line-height: 20px;
}
span.gepltxt {
	margin-left: 10px;
	font-size: 10px;
	color: #AAA;
	font-weight: normal;
	line-height: 20px;
	display: inline-block;
}
@media screen and (max-width: 480px) {
	span.gepltxt {
		margin-left: 0px;
		width: 15px;
		overflow: hidden;
		line-height: 14px;
	}
}


.fixiert.letter-J {
	background: #00FF00;
}
.fixiert.letter-N {
	background: #FF0000;
}
.fixiert.letter-V {
	background-color: #FFFF00;
}
.geplant.letter-J {
	background: #CCFFCC;
}
.geplant.letter-N {
	background: #FFCCCC;
}
.geplant.letter-V {
	background-color: #FFFFCC;
}


.zimmer-fix {
	font-weight: bold;
	color: #000;
}
.zimmer-maybe {
	color: #999;
}
.zimmer-unsure {
	color: #DDD;
}

td.gruppe {
	font-size: 8px;
	color: #ccc;
}


/* ------ Zimmerliste ------- */


tr.zimmer td {
	height: 40px;
	border-bottom: 1px solid #ccc;
}

div.zimmer_personen {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	float: left;
	width: 140px;
	margin: 3px;
	overflow: hidden;
	vertical-align: middle;
	white-space: none;
	margin-right: 10px;
}
@media screen and (max-width: 480px) {
	td div.zimmer_personen {
		width: calc(50% - 6px);
		margin: 2px;
	}
}

div.zimmer_personen div.first {
	width: 100%;
	white-space: nowrap;
	display: flex;
	/*flex-direction: column;*/
}
div.zimmer_personen div.second {
	flex-grow: 1;
	/*width: 33.333%;*/
	width:25%;
	text-align: center;
	border: 0px;
	line-height:15px;
	overflow: hidden;
}


div.zimmer_personen.zimmer_J {
	border: 1px solid black;
}
div.zimmer_personen.zimmer_V {
	border: 1px dotted black;
}

div.zimmer_personen .alter_E, thead .alter_E {
	background-color: #CCC;
}
div.zimmer_personen .alter_T, thead .alter_T, td.agestats.has.alter_T, div.zimmer_personen .alter_J, thead .alter_J, td.agestats.has.alter_J {
	background-color: #DDDDFF;
}
div.zimmer_personen .alter_K, thead .alter_K, td.agestats.has.alter_K {
	background-color: #BBBBFF;
}
div.zimmer_personen .alter_B, thead .alter_B, td.agestats.has.alter_B  {
	background-color: #6699FF;
	color: #FCC;
	font-weight: 700;
}

div.zimmer_personen .age {
	float: right;
	font-size: 10px;
	font-weight: bold;
	text-align: right;
	flex-grow: 1;
}

div.zimmer_personen .zahlenwir_J {
	font-weight: bold;
	background-color: #FFDDAA;
	font-size: 11px;
}
div.zimmer_personen .zahlenwir_V {
	font-weight: normal;
	background-color: #FFEEDD;
	font-size: 9px;
}

div.unzugeteilt.dropzone {
	display:flex;
	flex-wrap: wrap;
}

.betten.frei {
	background-color: #E0FFCC;
}
.betten.genau {
	background-color: #00FF00;
}
.betten.belegt {
	background-color: #FF0000;
}

.agestats {
	border-left: 1px dotted #aaa;
}

div.zimmer_personen .gruppenpos {
	font-size: 9px;
	color: #000;
}


/* ----- Plan ----- */

div.namelist {
	/* overflow-y: scroll; */
	/* max-height: 100px; */
}


div.assign_add {
}
div.assign_add > div {
	display: inline-block;
	height: 80px;
	cursor: pointer;
	text-align: center;
	margin-right: 20px;
}
div.assign_add > div svg {
	max-height:60px;
	max-width:100px;
	border: 1px solid #000;
}
div.assign_add > div > div {
	text-align: center;
	height: 20px;
}

div.namelist div.alter_E {
	background-color: #CCC;
}
div.namelist div.alter_T {
	background-color: #DDDDFF;
}
div.namelist div.alter_K {
	background-color: #BBBBFF;
}
div.namelist div.alter_B  {
	background-color: #6699FF;
	color: #FCC;
	font-weight: 700;
}

.chair.alter_E {
}
.chair.alter_T.zusage_J, .chair.alter_T.zusage_V {
	fill: #DDDDFF !important;
}
.chair.alter_K.zusage_J, .chair.alter_T.zusage_V {
	fill: #BBBBFF !important;
}
.chair.alter_B.zusage_J, .chair.alter_T.zusage_V {
	fill: #6699FF !important;
}

.chair.zusage_J.fix {
	fill: #44FF44;
}
.chair.zusage_J.geplant {
	fill: #CCFFBB;
}
.chair.zusage_V.fix {
	fill: #FFFF00;
}
.chair.zusage_V.geplant {
	fill: #FFFF99;
}
.chair.zusage_N.fix {
	fill: #FF0000;
}
.chair.zusage_N.geplant {
	fill: #FF9999;
}

.chair.zusage_.assigned {
	fill: #FFAA00;
}

.chair.empty {
	fill: #FFFFFF;
}


/* ----- Logistik ------ */

table.logistik_elements .hasblock div {
	display: flex;
	height: 48px;
	align-items: center;
	flex-wrap: wrap;
	line-height: 11px;
}
table.logistik_elements .hasblock.workflow div {
	display: block;
}

table.logistik_elements .identifier {
	width:100px;
}
table.logistik_elements .identifier div {
	font-size:22px;
}

table.logistik_elements .packaging {
	width:100px;
	font-size:11px;
	white-space:normal;
}
table.logistik_elements .packaging div {
	line-height:11px; 
}

table.logistik_elements .workflow {
	font-size: 11px;
	white-space:normal; 
	max-width: 70px;
	overflow: hidden;
}

table.logistik_elements .contents {
	
}
table.logistik_elements .detail {
	font-size: 9px;
	color: #aaa;
}
table.logistik_elements .notes {
	color: #f00;
	font-weight: 600;
}

table.logistik_elements .mainsection div {
	height: 16px;
	overflow: hidden;
	white-space: normal;
}


/* ------- DRUCKEN -------- */

@media print {
	html, body, .contentarea {
		height: auto !important;
		display: block !important;
	}
	body {
		-webkit-print-color-adjust: exact;
		color-adjust: exact;
	}
	.noprint {
		display: none !important;
	}
	ul.navigation {
		display: none;
	}
	div.zimmer_personen {
		width: 150px;
	}
}