/* Standard */

body {
	margin: 0px;
}

/* Styles für BODY werden über ID und nicht über TAG definiert */

#body {
	font-size: 1rem;
	margin: 0px;
	padding: 0px;
}

#body img { border: 0px; display: block; }
#body input.hasDatepicker + img { display: inline; }

#body .File a:hover { padding: 0px; }

#no_layout .TraminoVorlage { margin:0px; }

/* Vorgaben für alle Stylesheets für Websites und Rahmen */

/* Vorgaben für Blöcke */



.TraminoVorlage {
	margin: 20px 0px 0px 0px;
}

/* Vorgaben für Bilder */

#TraminoArtikel .File img {
	border: 0px;
}

#TraminoArtikel .File a {
	border: 0px;
}

/* Darstellung für Datentyp PDF */

.TraminoFile {
	background-color: #eee;
	padding: 15px;
	font-size: 0.8em;
	color: #666;
	margin-bottom: 20px;
}

.TraminoFile h5 { margin: 3px 0px;  color: #999 !important; }
.TraminoFile h3 { margin: 5px 0px;  color: #000 !important; font-size: 14px !important;}
.TraminoFile p { margin: 3px 0px;  color: #333 !important; }
.TraminoFile .download { margin-top: 7px; text-align: right; }
.TraminoFile .download a { color: #339 !important; }


/* Vorgaben für Artikel */

#TraminoArtikel .Files {
	float: right;
	width: 300px;
	margin-left: 15px;
}

#TraminoArtikel .Headlines h5 {
	font-size: 0.9em;
	text-transform: uppercase;
}





/* Vorgaben für Elemente innerhalb von Textile Feldern */

.TraminoTextile b {
	font-size: 1.2em;
	line-height: 1em;
}

.TraminoTextile i {
	font-size: 1.2em;
	line-height: 1em;
}

.TraminoTextile ins {
	background-color: #eee;
	font-style: normal;
	text-decoration: none;
	line-height: 1em;
	border-bottom: 2px solid #bbb;
	padding: 0.1em 0.3em 0em 0.3em;	
}

.TraminoTextile cite {
	background-color: #eee;
	font-style: oblique;
	text-decoration: none;
	font-family: serif;
	line-height: 1em;
	border-left: 4px solid #bbb;
	padding: 0.1em 0.3em 0.1em 0.3em;
}

.TraminoTextile code {
	display: block;
	white-space: pre;
	background-color: #ddd;
	color: #333;
	margin: 0px;
	padding: 0.1em 0.3em 1.1em 0.3em;
}
	
	.TraminoTextile p code {
		display: inline;
		white-space: normal;
		padding: 0.1em 0.3em 0.1em 0.3em;
	}

.TraminoTextile blockquote {
	font-style: oblique;
	text-decoration: none;
	font-family: serif;
	font-weight: 100;
	font-size: 1.1em;
	padding: 0.2em 1em;
}

.TraminoTextile ul li {
	line-height: 1.3em;
}


.TraminoTextile table {
	table-layout: auto;
	border-collapse: collapse;
	border: 1px solid #999;
}

	.TraminoTextile table th {
		padding: 0.5em 0.3em 0.2em 0.4em;
		border: 1px solid #999;
		text-align: left;
		font-size: 0.9em;
		vertical-align: bottom;
	}


	.TraminoTextile table td {
		padding: 0.2em 0.3em 0.2em 0.4em;
		border: 1px solid #999;
		vertical-align: top;
	}



/* Allgemeine Klassen */

.break {
	clear: both;
}

.clear {
	clear: left;
}

.left {
	float: left;
}

.right {
	float: right;
}

/* clearfix */
.clearfix:before, .clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { zoom: 1; }

.bold {
	font-weight: bold;
}


@media print {
	body {
		margin:
	}
	.noprint {
		display: none;
	}
}

.nodisplay {
	display: none;
}

span.textmarker {
	background-color: #ff0;
	padding: 0.1em 0.5em 0.1em 0.5em;
}

span.invers {
	background-color: #000;
	color: #fff;
	padding: 0.1em 0.5em 0.1em 0.5em;
}

.code {
	font-family: monospace !important;
	font-size: 12px;
	color: #000;
}

.adresse .nummer { margin-top: 0.3em; }
.adresse .email { margin-top: 0.3em; }


/* Öffnungszeiten Widget */
.oeffnungszeiten .tag { display: flex; }
.oeffnungszeiten .tag .tage { flex: 2; white-space: nowrap; padding-right: 1rem; }
.oeffnungszeiten .tag .rightside { flex: 1; }
.oeffnungszeiten .tag .rightside .vormittag { white-space: nowrap; }
.oeffnungszeiten .tag .rightside .nachmittag { white-space: nowrap; }

/* ---------- Notizen in Bildern ------------- */

.TraminoStorageMap {
	position: relative;

		-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none
}

.TraminoStorageMap div.MapItem {
	position: absolute;
	border: 1px dotted #fff !important;
	margin: -1px;
	color: #fff; 
	font-size: 11px;
	background-image: url(/tramino/gfx/alpha100.png);

	box-shadow: 2px 2px 3px 3px rgba(0,0,0,0.1);
	
}


.TraminoStorageMap div.MapItem > span { display: block; }

.TraminoStorageMap .MapItem:hover {
	border: 2px solid #fff;
}

.TraminoStorageMap .MapItemInfo {
	padding: 2px 10px 3px 7px;
	display: block;
	font-size: 11px;
	line-height: 14px;
	font-family: Arial;
	color: #fff;
}

.TraminoStorageMap .MapItem:hover .MapItemInfo {
	background-color: #fff;
	color: #000;
	cursor: pointer;
}

.TraminoStorageMap.hover .MapItem {
	display: none;
}

.TraminoStorageMap.hover:hover .MapItem {
	display: block;
}

.Bild .Name { margin-top: 0.3em; }
.Bild a { display: block; margin: 0!important; padding: 0!important; border: 0px !important; }

.Bild.Panorama {
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 500px;
}
.Bild.Panorama img {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 500px;
}


#activeMapItem {
}

#activeMapItemHandle {
	position: absolute;
	bottom: -5px;
	right: -5px;
	background-color: #fff;
	width: 10px;
	height: 10px;
	color: #000;
	cursor: pointer;
}



.TraminoStorageMap a.MapItem.highlight { border: 1px dotted #ff0 !important;  }
.TraminoStorageMap a.MapItem.highlight #activeMapItemHandle { background-color: #ff0; }
.TraminoStorageMap a.MapItem.highlight .MapItemInfo { color: #ff0;  }
.TraminoStorageMap a.MapItem.highlight:hover .MapItemInfo { background-color: #ff0; color: #000; }


/* ---------- Lightroom ------------- */



#lightroom {
	display: block;
	overflow: hidden;
	margin-left: -10px;
}

#TraminoContent #lightroom {
	background-color: #333;
	padding: 10px 15px;	
	margin: 0px;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}



#TraminoContent #lightroom .empty {
	color: #ccc;
	text-align: center;
	padding: 40px;
}

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

#lightroom .Files {
	float: none;
	width: auto;
	margin: 10px 0px 10px 0px;
}

#lightroom .file {
	float: left;
	width: 150px;
	height: 145px;
	padding: 10px;
	overflow: hidden;
	position:relative;
}
#lightroom .info a {
	color: white;
}

#lightroom .file .geoinfo {
	position:absolute;
	bottom:0px;
	left:0px;
}


#lightroom .bild {
	background-color: #888;
	display: block;
	position: relative;
	width: 150px;
	height: 100px;
	overflow: hidden;
	
}

#lightroom .bild img {
	border: 0px;
	position: absolute;
	left: 0px;
	top: 0px;
}

#lightroom .zoom {
	display: none;
	position: absolute;
	top: 5px;
	left: 5px;
	width: 13px;
	height: 13px;
	cursor: pointer;
}

#lightroom .zoom a, #lightroom .download a {
	display:block;
	width: 100%;
	height: 100%;
}

#lightroom .zoom img {
	width: 13px;
	height: 13px;
}

#lightroom .download {
	display: none;
	position: absolute;
	top: 5px;
	left: 22px;
	width: 14px;
	height: 14px;
	cursor: pointer;
}

#lightroom .zoom a {
	display:block;
	width: 100%;
	height: 100%;
}

#lightroom .file:hover {
	background-color: #ddd !important;
}
	
#lightroom .file:hover .bild {
	background-color: #ddd !important;
}

#lightroom .file:hover .info {
	color: #000 !important;
}


#lightroom .file.highlight  {
	background-color: #555;
}

#lightroom .file:hover .zoom, #lightroom .file:hover .download { display: block; }



#lightroom .info {
	display: block;
	padding: 4px 0px 0px 0px;
	font-size: 11px;
	line-height: 12px;
	text-align: center;
}

	#TraminoContent #lightroom .info {
		color: #aaa;	
	}

#lightroom .info input[type=checkbox] {
	line-height: 0px;
	padding: 0px 0px 0px 0px;
	margin: 0px 3px 0px 0px;
}


#lightroom .subtitle { font-size: 9px; line-height: 10px; margin-top: 3px; }

	#TraminoContent #lightroom .subtitle { color: #999; }

#lightroom .info span {
	background-color: #999;
	font-size: 14px;
	color: #666;
	cursor: pointer;
	padding: 0px 4px 0px 4px;
	margin: 0px 5px 0px 0px;
}

#lightroom .file:hover .info  {
	color: #333;
}

#lightroom .file:hover .info span {
	background-color: #999;
}


#lightroom .typ {
	position: absolute;
	top: 10px;
	right: 0px;
	font-weight: normal !important;
	font-size: 9px;
	line-height: 12px;
	color: #333;
	text-align: right;
}

#lightroom .typ span {
	background-color: #fff;
	padding: 1px 4px 2px 4px;
}

#TraminoContent #lightroom .input input {
	
	display: block;
	font-size: 9px;
	font-weight: bold;
	width: 142px;
	background-color: #555;
	padding: 3px 4px;
	border: 0px;
	margin: 0px 0px 0px 0px;
	color: #eee;
}

#TraminoContent #lightroom .input textarea {

	display: block;
	height: 35px;
	font-size: 9px;
	background-color: #444;
	padding: 2px 2px;
	width: 146px;
	border: 0px;
	margin: 0px;
	color: #aaa;
}





/* ---------- Blättern ------------- */



.TraminoPaginator {
	margin: 0px;
	line-height: 1.6em;
}


.TraminoPaginator span.anzahl {
	padding-right: 30px;
	font-size: 11px;
}

.TraminoPaginator span a {
	padding: 2px 5px 2px 5px !important;
	text-decoration: none;
	border: 0px !important;
	color: #666;
}

.TraminoPaginator span.button a {
	display:inline-block;
	font-size:13px;
	background-color: #ccc;
	padding: 2px 10px 2px 10px !important;
	margin-right:4px;
}

.TraminoPaginator span.button.active a {
	background-color: #333;
	color:#fff;

}

.TraminoPaginator span a:hover {
	background-color: #000 !important;
	color: #fff !important;
}

.TraminoPaginator span.aktiv a {
	font-size: 1.4em;
	font-weight: bold;
	color: #000;
}

#lightroom .TraminoPaginator {
	color: #666;
}

#lightroom .TraminoPaginator span a {
	color: #666;
}

#lightroom .TraminoPaginator span.aktiv a {
	color: #fff;
}

#lightroom .TraminoPaginator span a:hover {
	background-color: #fff !important;
	color: #000 !important;
}









/* Stichworter Clouds */


.Tagcloud {
	padding: 15px 0px;
	line-height: 17px;
	text-align: center;
	/* margin: 0px 0px 10px 0px; */
	line-height: 18px;
}
	
	.Tagcloud .TagSelected a {
		background-color: #FF6600 !important;
		color: #fff !important;
	}
	
	.Tagcloud span {
		vertical-align: middle;
		padding: 0px 0px 0px 0px;
	}
	
	
	.Tagcloud a {
		padding: 2px 7px 2px 7px !important;
		font-weight: bold;
		text-decoration: none;
		vertical-align: middle;
		border: 0px !important;
	}
	
	.Tagcloud a:hover {
		padding: 2px 7px 2px 7px !important;
		background-color: #666 !important;
		color: #fff !important;
		text-decoration: none;
		border: 0px !important;
	}
	

	.Tagcloud .TagSize1 a { font-size: 12px !important; }
	.Tagcloud .TagSize2 a { font-size: 13px !important; }
	.Tagcloud .TagSize3 a { font-size: 15px !important; }
	.Tagcloud .TagSize4 a { font-size: 17px !important; }
	.Tagcloud .TagSize5 a { font-size: 19px !important; }
	.Tagcloud .TagSize6 a { font-size: 21px !important; }
	
	#TraminoContent .Tagcloud .TagSize1 a { color: #888 !important; }
	#TraminoContent .Tagcloud .TagSize2 a { color: #666 !important; }
	#TraminoContent .Tagcloud .TagSize3 a { color: #444 !important; }
	#TraminoContent .Tagcloud .TagSize4 a { color: #222 !important; }
	#TraminoContent .Tagcloud .TagSize5 a { color: #111 !important; }
	#TraminoContent .Tagcloud .TagSize6 a { color: #000 !important; }
	#TraminoContent .Tagcloud a:hover { color: #fff !important; }
	
	#TraminoContent #lightroom .Tagcloud .TagSize1 a { color: #888 !important; }
	#TraminoContent #lightroom .Tagcloud .TagSize2 a { color: #aaa !important; }
	#TraminoContent #lightroom .Tagcloud .TagSize3 a { color: #ccc !important; }
	#TraminoContent #lightroom .Tagcloud .TagSize4 a { color: #ddd !important; }
	#TraminoContent #lightroom .Tagcloud .TagSize5 a { color: #eee !important; }
	#TraminoContent #lightroom .Tagcloud .TagSize6 a { color: #fff !important; }

	#TraminoContent #lightroom .Tagcloud a:hover { color: #000 !important; background: #fff !important; }
	#TraminoContent #lightroom .Tagcloud .TagSelected a { color: #000 !important; }
	
	body #TraminoContent .Tagcloud a { color: #999; }
	body #TraminoContent .Tagcloud .TagSelected a { color: #fff !important; }
	body #TraminoContent #lightroom .Tagcloud a { color: #999; }
	body #TraminoContent #lightroom .Tagcloud .TagSelected a { color: #fff !important; }
	


/* Kommentare */

#TraminoComment {
	margin-top: 30px;
	position: relative;
}

#TraminoContent #TraminoComment {
	margin-top: 0px;
}

#TraminoComment .error {
	display: inline;
	font-size: 1.1em;
	line-height: 1.5em;
	color: #f00;
	background-color: #fcc;
	padding: 0.1em 0.3em;
}

#TraminoComment .login {
	font-size: 0.9em;
	margin-bottom: 0.8em;
}

#TraminoComment .login span {
	font-size: 0.7em;
}

#TraminoComment .head  {
	margin: 1em 0em 0.5em 0em;
}

#TraminoComment .comment .Bild {
	float:left;
	margin: 2px 15px 15px 0px;
}

#TraminoComment .Bild.userbild {
	float: none;
	position: absolute;
	left : 0px;
}

#TraminoComment .comment .Bild a {
	border: 0px;
	display: block;
	padding: 0px;
	margin: 0px;
}

#TraminoComment .comment .Bild img {
	display: block;
	border: 0px;
}

#TraminoComment .comment .content .File .Name {
	margin-top: 0.3em;
	font-size: 0.8em;
	width: 150px;
}


#TraminoComment .head  {
	margin-bottom: 0.5em;
	margin-left:65px;
}

#TraminoComment .head .subject {
	font-weight: bold;
}

#TraminoComment .head .name {
	font-weight: bold;
}

#TraminoComment .head .name sup {
	font-weight: 200;
	font-size: 0.7em;
}

#TraminoComment .head .date {
	font-size: 0.7em;
	padding-left: 0.5em;
}

#TraminoComment .head .who_likes {
	margin-left: 2em;
	font-size: 0.9em;
}

#TraminoComment .head .like_action {
	margin-left: 2em;
	font-size: 0.7em;
}



#TraminoComment .comment {
	margin-top: 2em;
}

#TraminoContent #TraminoComment .comment {
	margin-top: 0em;
	clear: left;
	border-bottom: 1px solid #ccc;
	overflow: hidden;
	padding-bottom: 10px;
	margin-bottom: 10px;
}


#TraminoComment .comment .content {
	padding-left: 20px;
	padding-right: 150px;
	margin-top: 10px;
	font-size: 0.9em;
	line-height: 130%;
	margin-left: 45px;
}

#TraminoComment .comment .content.with_image .text {
	margin-top: 20px;
	padding-right: 200px;
}

#TraminoComment .comment .comment .content {
	padding-right: 20px;
}




#TraminoComment .comment .content .text {
}

#TraminoComment .comment .content .reply {
	margin-top: 5px;
	text-align: right;
	font-style: normal;
	font-size: 1em;
}

#TraminoComment .comment .content .reply a {
	font-size: 0.7em;
}



#TraminoCommentForm {
	margin-right: 0px;
	text-align: left;
	margin-bottom: 40px;

}
#TraminoCommentForm .feld {
	float: left;
	margin-bottom: 0.5em;
	margin-right: 1em;
}

#TraminoCommentForm .feld .label {
	font-size: 0.8em;
	margin-top: 0.5em;
	margin-bottom: 0.1em;
}

#TraminoCommentForm .feld .input input {
	font-size: 0.8em;
	font-weight: bold;
}

#TraminoCommentForm .feld .input textarea {
	font-size: 0.8em;
	width: 48em;
	font-weight: bold;
}

#TraminoCommentForm .feld .input input {
	font-size: 0.8em;
	font-weight: bold;
}

#TraminoCommentForm .feld .help {
	font-size: 0.7em;
}

#TraminoCommentForm button[type="submit"] {
	cursor: pointer;
}

#TraminoContent #TraminoCommentForm .feld .input textarea {

	width: 100%;
}


#TraminoLoginPage {
	margin: 5em auto 0;
	position:relative;
	width:560px;
	box-sizing: border-box;
}
#TraminoLoginPage * {
	box-sizing: border-box;
}

#TraminoLogin {
	position: relative;
	width: 100%;
	background-color: #fff;
	font-family: Helvetica, Arial, sans-serif;
	margin: 0px;
	color: #333;
	padding-bottom: 15px;
}


#TraminoLogin.box {
	border:1px solid #aaa;
}


#TraminoLogin .feld {
	margin-bottom: 4px;
}

#TraminoLogin .left H3, #TraminoLogin .right H3, #TraminoLogin H3 {
	margin: 0px;
	padding: 35px 0px 25px 25px;
	font-size: 30px;
	font-weight: 100;
	color: #333;
}

#TraminoLogin .left H3, #TraminoLogin .maxi H3 {
	padding: 35px 0px 25px 100px;
	background-image: url(/tramino/gfx/logo.png);
	background-repeat: no-repeat;
	background-position: 20px 15px;
}

#TraminoLogin H3.nologo {
	padding-left: 30px;
	background-image: none;
}

#TraminoLogin .left .ssl_label {
	color:#0a0;
}
#TraminoLogin .left {
	width: 280px;
	min-height: 300px;
}
#TraminoLogin .left.wide {
	width: 500px;
}
#TraminoLogin .left ul {
	padding-left: 1em;
}

#TraminoLogin .right {
	background-color: #ccc;	
	width: 280px;
	height:300px;
	display: flex;
	justify-content: center;
	align-items: center;
}

#TraminoLogin .listeData .left {
	width: auto;
	height:auto;
}

#TraminoLogin .listeData .right {
	background-color: transparent;	
	width: auto;
	height:auto;
}
#TraminoLogin.box .left, #TraminoLogin.box .right {
	height:175px;
}

#TraminoLoginPage .flex_wrap {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: -2px;
}
#TraminoLoginPage .flex_wrap .show_password {
	color: #666;
	cursor: pointer;
}

@media (max-width: 567px) {
	#TraminoLoginPage {
		width: 100%;
		max-width: 320px;
	}
	#TraminoLogin .left {
		width: 280px;
	    height: auto;
	    float: none;
	}
	#TraminoLogin .right {
		width: 100%;
  		height: auto;
  		float: none;
	}
}

#timegrid_monat {
	position: relative;
	font-size: 10px;
	line-height: 10px;
}

#timegrid_monat span {
	display: inline-block;
	width: 20px;
	height: 10px;
	font-size: 10px;
	line-height: 10px;
	color: #aaa;
	text-align: center;
	padding: 5px 0px 5px 0px;
	margin: 0px;
}


#timegrid_monat span , x:-moz-any-link { display:-moz-inline-box; }
#timegrid_monat span , x:-moz-any-link, x:default {display:inline-block; }

#timegrid_monat .monat {
	border: 1px solid #999;
	margin-top:-1px;
	background: url(/tramino/gfx/timegrid.png);
}

#timegrid_monat span.info {
	width: 72px; 
	background-color: #fff; 
	border-right: 1px solid #999;
	text-align: left;
	padding-left: 7px;
}

#timegrid_monat span.info b {
	font-size:12px;
}
#timegrid_monat span.selected {
	background:#292;
	color:#6c6;
}

#timegrid_monat span.tgf {
	background: #060;
	color:#292;
}

#timegrid_monat span.saison{
	background: #999;
	color: #eee;
	border-right: 1px solid #ddd;
	white-space: nowrap;
}

#timegrid_monat span.saison.color_1 { background: #988; }
#timegrid_monat span.saison.color_2 { background: #889; }
#timegrid_monat span.saison.color_3 { background: #898; }
#timegrid_monat span.saison.color_4 { background: #989; }
#timegrid_monat span.saison.color_5 { background: #899; }
#timegrid_monat span.saison.color_6 { background: #998; }


#timegrid_monat span.markable{	cursor:pointer;}







/* TimeGrid */

#timegrid {
	position: relative;
	background: url(/tramino/gfx/timegrid.png);
	font-size: 10px;
	line-height: 10px;
	overflow: hidden;

	user-select: none; /* supported by Chrome and Opera */
   -webkit-user-select: none; /* Safari */
   -khtml-user-select: none; /* Konqueror HTML */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* Internet Explorer/Edge */

}

#timegrid span {
	display: inline-block;
	width: 20px;
	height: 10px;
	font-size: 10px;
	line-height: 10px;
	color: #666;
	text-align: center;
	padding: 5px 0px 5px 0px;
	margin: 0px;
}

#timegrid span , x:-moz-any-link { display:-moz-inline-box; }
#timegrid span , x:-moz-any-link, x:default {display:inline-block; }

/* -- Kontingent und Mindestaufenthalt Popup */

#timegrid_menu {
	z-index: 10000;
	background-color: #000;
	border-radius: 5px;
	padding: 10px 0px 5px 10px;
	color: #fff;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 145px;
	
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#timegrid_menu.aufenthalt {
	z-index: 10000;
	background-color: #000;
	border-radius: 15px;
	padding: 17px 33px 12px 20px;
	color: #fff;
	position: absolute;
	left: 0px;
	top: 0px;
	width: 175px;

	
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-o-user-select: none;
	user-select: none;
}

#timegrid_menu .close { 
	position: absolute; 
	right: 10px; 
	top: 5px; 
	color: #fff; 
	font-size: 17px; 
	cursor: pointer; 
}

#timegrid_menu.aufenthalt .close { 
	right: 12px; 
	top: 8px;  
}

#timegrid_menu.aufenthalt.expanded {
  width: 420px; /* expand the menu to the right */
}

#timegrid_menu.aufenthalt .minauf_help { 
	display: block;
	position: absolute; 
	right: 10px; 
	bottom: 9px; 
	color: #fff; 
	font-size: 15px; 
	cursor: pointer; 
}

#timegrid_menu.aufenthalt .help_text {
  display: none;
  position: absolute;
  color: #fff;
  font-size: 14px;
  top: 0px;
  right: 20px;
  left: 195px;
  bottom: 20px;

}

#timegrid_menu .row { width: 135px; margin: 0px 0px 5px 0px; }

#timegrid_menu.aufenthalt .row { width: 160px; margin: 0px 0px 5px 0px; }

#timegrid_menu .minauf_header { 
	font-size: 15px; 
	margin-top: 15px; 
	margin-bottom: 6px; 
	line-height: 100%; 
	width: 160px;
}

#timegrid_menu .button {
	box-sizing: border-box;
	cursor: pointer;
	float: left;
	width: 30px;
	border-radius: 4px;
	padding: 4px 0px;
	text-align: center;
	font-size: 13px;
	color: #bbb;
	border: 1px solid #999;
	margin: 0px 5px 0px 0px;
}

#timegrid_menu.aufenthalt .button {
	box-sizing: border-box;
	cursor: pointer;
	float: left;
	width: 36px;
	border-radius: 6px;
	padding: 4px 0px;
	text-align: center;
	font-size: 13px;
	color: #bbb;
	border: 1px solid #000;
	margin: 0px 5px 0px 0px;
}


#timegrid_menu .button.generic { background: #999; color: #fff }
#timegrid_menu .button.minauf { background: #ff9901; color: #fff }
#timegrid_menu .button.minthru { background: #a93398; color: #fff }

#timegrid_menu .button:last-child { margin: 0; }
#timegrid_menu .button.right { float: right; }
#timegrid_menu .button:hover { color: #fff; border: 1px solid #fff; }

#timegrid_menu.kontigent .aufenthalt { display: none; }
#timegrid_menu.kontigent .quotaseason { display: none; }

#timegrid_menu.aufenthalt .kontingent { display: none; }
#timegrid_menu.aufenthalt .quotaseason { display: none; }

#timegrid_menu.quotaseason .aufenthalt { display: none; }
#timegrid_menu.quotaseason .kontingent { display: none; }



/* --- */


#timegrid .monate {
	border-top: 1px solid #999;
	background:#fff;
}


/* Firefox 2 fix */
#timegrid .monate , x:-moz-any-link { padding-left: 10px; }
#timegrid .monate , x:-moz-any-link, x:default { padding-left: 0px; }

#timegrid .monate span {
	background-color: #fff;
	border-right: 1px solid #999;
	text-align: left;
	overflow: hidden;
	white-space: nowrap;
	padding: 2px 0px 2px 7px;
	height: 10px;
	vertical-align: middle;
}

/* Firefox 2 fix */
#timegrid .monate span , x:-moz-any-link { height: 16px; }
#timegrid .monate span , x:-moz-any-link, x:default { height: 10px; }


#timegrid .woche { 
	height: 20px;
	overflow: hidden;
	z-index: 10000;
	background-color: #fff;
}
#timegrid .woche .weeknumber {
	display: inline-block;
	box-sizing: border-box;
	max-width: 140px;
	height: 20px;
	overflow: hidden;
	border-top: 1px solid #999;
	border-right: 1px solid #999;
}

#timegrid .woche .weeknumber.heute { background-color: #669 !important; }
#timegrid .woche .weeknumber.heute > span { color: #fff; }
#timegrid .woche .weeknumber:nth-child(odd) { background-color: #FFFFFF; }
#timegrid .woche .weeknumber:nth-child(even) { background-color: #F7F7F7; }

#timegrid .tage {
	border-top: 1px solid #999;
}

#timegrid .monate.timeline, #timegrid .tage.timeline {
	border-top: 1px solid #bbb;
}

#timegrid .tage.timeline {
	border-bottom: 1px solid #bbb;
}


/* Firefox 2 fix */
#timegrid .tage , x:-moz-any-link { padding-left: 10px; }
#timegrid .tage , x:-moz-any-link, x:default { padding-left: 0px; }

#timegrid .tage span {
	padding: 3px 0px 2px 0px;
	height: 10px;
	overflow:hidden;
	white-space:nowrap;
	vertical-align: middle;
}

/* Firefox 2 fix */
#timegrid .tage span , x:-moz-any-link { height: 16px; }
#timegrid .tage span , x:-moz-any-link, x:default { height: 10px; }


#timegrid .wochentage span {
	padding: 3px 0px 2px 0px;
	height: 10px;
	overflow:hidden;
	white-space:nowrap;
}


#timegrid .tage span.heute {
	background-color: #669;
	color: #fff;
}



#timegrid .belegung span.marker {
	background-color: #ff0;
	background: url(/tramino/gfx/timegrid_marker.png) -10px 0px;
	color: #fff;
	overflow:hidden;
	white-space:nowrap;
}

#timegrid .belegung span.marker2 {
	background-color: #ff0;
	background: url(/tramino/gfx/timegrid_marker2.png) -10px 0px;
	color: #fff;
	overflow:hidden;
	white-space:nowrap;
}


	#timegrid div.belegung {
		border-top: 1px solid #999;
		line-height: 0px;
	}

	#timegrid .belegung.disabled .info {
		color: #aaa;
	}

	#timegrid .belegung.disabled span.frei { background-color: #999; background-image: none; color: #999; }
	#timegrid .belegung.disabled.nolabel span.frei { background-color: #999; background-image: none; color: #999; }

	#timegrid .belegung.kompakt {
		height: 6px;
		line-height: 0px;
	}

	#timegrid .belegung.kompakt span {
		padding: 0px;
		height: 6px;
		line-height: 0px;
	}

	#timegrid .belegung span.frei {
		background-color: #292;
		background: url(/tramino/gfx/timegrid_frei.png);
		color: #fff;
	}
	
	#tpc #timegrid .belegung span.belegt {
		background: url(/tramino/gfx/timegrid-x.png);
	}
	
	#timegrid .belegung.kompakt span.frei {
		background: url(/tramino/gfx/timegrid_frei.png) -10px 0px;
	}
	
	#timegrid .yellow span.frei {
		background: none !important;
		background-color: #993 !important;
		color: #EE9 !important;
	}

	#timegrid .blue span.frei {
		background: none !important;
		background-color: #bdd !important;
		color: #466 !important;
	}

	#timegrid .belegung.nolabel span.frei {
		color: #292;
	}

	#timegrid .belegung span.tgs {
		background: #111;
		color: #fff;
	}
	
	#timegrid .belegung.nolabel span.tgs {
		color: #111;
	}

	#timegrid .belegung span.tgf {
		background: #060;
		color: #fff;
	}
	
	#timegrid .belegung.nolabel span.tgf {
		color: #060;
	}
	
	#timegrid .belegung span.kontigent {
		cursor:pointer;
		height: auto;
	}

	#timegrid div.aufenthalt {
		border-top:1px solid #ddd;
		padding:0;
		margin:0;
		height:11px;
	}

	#timegrid .aufenthalt span {
		height: 11px;
		font-size: 9px;
		line-height: 11px;
		padding:0;
		margin:0;
		cursor:pointer;
	}
	
	#timegrid .aufenthalt span.frei {
		background-color: #922;
		background: url(/tramino/gfx/timegrid_marker.png);
		color: #fff;
	}


	#timegrid .belegung span.over {
		background-color: #922;
		color: #fff;
	}

	#timegrid .aufenthalt span.minthru {
		background: #a93398;
	}

	#timegrid .aufenthalt span.noarrival {
		background: #999;
		color: #fff;
	}

	#timegrid .aufenthalt span.error {
		background: #999;
	}
	
	#timegrid .aufenthalt span.tgs {
		background: #111;
		color: #fff;
	}

	#timegrid .aufenthalt span.tgf {
		background: #666;
		color: #fff;
	}

	#timegrid .aufenthalt span.info{
		height: 12px;
		font-size: 9px;
		line-height: 12px;
		margin:0;
		text-align: right;
		color:#999;
		width: 152px;
		padding: 0px 7px 0px 0;
	}

	#timegrid .aufenthalt span.info.shifted {
		width:162px;
	}
	
	#timegrid .belegung span.disable,
	#timegrid .aufenthalt span.disable {
		background-color: #ddd;
		color:#bbb;
	}

/* ... */

	#timegrid div.quotaseason {
		border-top:1px solid #ddd;
		padding:0;
		margin:0;
		height:14px;
	}

	#timegrid .quotaseason span {
		height: 14px;
		font-size: 9px;
		line-height: 14px;
		padding:0;
		margin:0;
		cursor:pointer;
		vertical-align: middle;
	}
	
	#timegrid .quotaseason span.frei {
		background-color: #327;
		background: url(/tramino/gfx/timegrid_marker.png);
		color: #fff;
	}


	#timegrid .quotaseason span.over {
		background-color: #922;
		color: #fff;
	}
	
	#timegrid .quotaseason span.error {
		background:#999;
	}
	
	#timegrid .quotaseason span.tgs {
		background: #111;
		color: #fff;
	}

	#timegrid .quotaseason span.tgf {
		background: #666;
		color: #fff;
	}

	#timegrid .quotaseason span.info{
		height: 14px;
		background-color: #fff;
		font-size: 9px;
		line-height: 14px;
		margin:0;
		text-align: right;
		color: #666;
		width: 152px;
		padding: 0px 7px 0px 0;
	}

	#timegrid .quotaseason span.info.shifted {
		width:162px;
	}

	#timegrid .quotaseason span.disable {
		background-color: #ddd;
		color:#bbb;
	}


/* ... */

#timegrid div.termin, #timegrid div.buchung {
	position:relative;
	text-align: left;
	left:0px;
	right:0px;
	background: url(/tramino/gfx/white_pattern.png);
}

#timegrid div.buchung:hover { background-color: rgba(255,255,0,0.5) !important;  }
#timegrid div.buchung:hover .secondbuchung { background-color: #ff0 !important;  }

#timegrid div.termin:hover { background-color: rgba(255,255,0,0.5) !important;  }
#timegrid div.termin:hover span.info { background-color: #ffb !important;  }

#timegrid div.buchung {
	background: url(/tramino/gfx/white_pattern2a.png);
}

#timegrid div.buchung.secondbuchung, #timegrid span.secondbuchung {
	background: url(/tramino/gfx/white_pattern3a.png);
}

#timegrid .termin.divider {
	border-top: 1px solid #999 !important;
	height: 30px;
	
}
#timegrid .termin.divider .info {
	padding-top: 3px;
	height: 22px;
}
#timegrid .termin.divider .termine {
	padding-top: 3px;
}


#timegrid .termine span {
	overflow:hidden;
	padding: 2px 0px 2px 2px;
	height:auto;
	text-align:left;
	border-left:5px solid #ccc;
}



#timegrid .buchung .termine.info {
	width: 100%;
	margin-top: 1px;
}

#timegrid .termine span.terminduration {
	background:#ccc;
}

#timegrid .termine span.terminduration[onclick] {
	cursor:pointer;
}

#timegrid span.spacer {
	box-sizing: border-box;
	width: 160px;
	height: 100%;
	background-color: #fff; 
	border-right: 1px solid #999;
	border-left:0px;
	text-align: left;
	padding: 4px 0px 4px 8px;
	font-size: 9px;
	line-height: 13px;
	color: #999;
}
#timegrid span.spacer.shifted{
	width: 170px;
}
#timegrid .spacer.zimmer.click {
	cursor: pointer;
}

#timegrid span.spacer_shift {
	width: 1px;
}
#timegrid span.info {
	width: 152px; 
	background-color: #fff; 
	border-right: 1px solid #999;
	text-align: left;
	padding-left: 7px;
	position: relative;
}

#timegrid span.info.shifted {
	width:162px;
}

#timegrid span.cinfo {
	_position: absolute;
	_right: 3px;
	_top: 3px;
	margin: -2px 5px 0px 0px;
	float: right;
	width: auto;
	height: auto;
	background-color: rgba(0,0,0,0.1);
	color: rgba(0,0,0,0.4);
	border-radius: 7px;
	padding: 2px 4px;
	cursor: help;
}


.Widget.TextWidget { white-space: nowrap; }

.Widget.TextWidget .linkiconbox {
	background: transparent url(/tramino/gfx/icons/link.gif) no-repeat 0px 4px;
	padding: 0 0 0 18px;
}

.Widget.TextWidget .keyiconbox {
	background: transparent url(/tramino/gfx/icons/key.gif) no-repeat 0px 4px;
	padding: 0 0 0 18px;
}

.Widget.NumberWidget { white-space: nowrap; }

.Widget.TagsWidget {
	background: transparent url(/tramino/gfx/icons/tag.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.ClientsWidget {
	background: transparent url(/tramino/gfx/icons/inherit.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.ProdukteWidget {
	background: transparent url(/tramino/gfx/icons/cart.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.ProduktWidget {
	background: transparent url(/tramino/gfx/icons/gear.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}


.Widget.KontaktWidget {
	background: transparent url(/tramino/gfx/icons/user.png) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.RangeWidget .top {
	display: flex;
	justify-content:  space-between;
	margin-bottom: 0.5rem;
}

.Widget.RangeWidget .range {
	display: flex;
	justify-content: space-between;
}

.Widget.RangeWidget .range .r {
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid #666;
	color: #666;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 0.3rem;
	cursor: pointer;
}

.Widget.RangeWidget .range .r:hover {
	background-color: #666;
	color: #FFF;
}
.Widget.RangeWidget .range .r.active {
	background-color: #333;
	color: #FFF;
}


.Widget.noicon {
	background: transparent;
	padding: 0;
}

.Widget.DatumWidget_ {
	padding: 1px;
}


.Widget.DatumWidget_ input {
	display: block;
}

.Widget.DatumWidget_ label input {
	display: inline-block;
}

.Widget.LinkWidget {
	background: transparent url(/tramino/gfx/icons/link.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.LinkContentWidget {
	background: transparent url(/tramino/gfx/icons/next.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.AppContentWidget {
	background: transparent url(/tramino/gfx/icons/next.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.PeriodWidget {
	background: transparent url(/tramino/gfx/icons/calc.gif) no-repeat 0px 2px;
	padding: 0 0 0 18px;
}

.Widget.StaticStarsWidget {
	height:16px;
	width:80px;
	background: transparent url(/tramino/gfx/rating/ui.stars.gif) 0 -32px;
}

.Widget.StaticStarsWidget .StativStarsAktiv{
	height:16px;
	background: transparent url(/tramino/gfx/rating/ui.stars.gif) 0 -48px;
}

.Widget.StaticStarsWidgetSmall {
	height:10px;
	width:50px;
	background: transparent url(/tramino/gfx/rating/ui.stars_s.gif) 0 -10px;
	padding:0px !important;
	margin:0px !important;
}

.Widget.StaticStarsWidgetSmall .StativStarsAktiv{
	height:10px;
	background: transparent url(/tramino/gfx/rating/ui.stars_s.gif) 0 -20px;
}
.Widget.PeriodWidget .content {
	border: 1px solid #999;
	background-color: #fff;
	padding: 8px 12px;
	font-size: 12px;
}

.Widget.ImageButtonsWidget .Element {
	position:relative;
	width:100px;
	height:100px;
	float:left;
	margin: 0 15px 15px 0;
	cursor:pointer;
	border: 2px solid #eee;
	border-radius: 5px;
	background: #fff;
	padding: 10px 10px;
	color:#333;
	font-size:11px;
	text-align:center;
	overflow:hidden;
}

.Widget.ImageButtonsWidget.big .Element {
	width:150px;
	height:125px;
}

.Widget.ImageButtonsWidget .label {
	position: absolute;
	bottom: 0px;
	left: 10px;
	right: 10px;
	font-size: 11px;
	line-height: 11px;
	color: #666;
	height: 23px;
	overflow: hidden;
	text-align: center;
}




.Widget.ImageButtonsWidget .Element.checked {
	color:#000;
	border:1px solid #000;
}



.Widget.ImageButtonsWidget .Element:hover {	border: 2px solid #aaaaaa; }
.Widget.ImageButtonsWidget .Element:hover .label { color: #000; }

.Widget.ImageButtonsWidget .Element.aktiv { border: 2px solid #FF6600 !important; }



.Widget.ImageButtonsWidget .Buttonimage {
}
.Widget.ImageButtonsWidget.big .Buttonimage {
	width:150px;
}

.Widget.ImageButtonsWidget .Buttonheadline {
	font-weight: bold;
	font-size: 12px;
	margin: 8px 0px;
	color: #aaa;
	
}

.Widget.colorpickerWidget {
	position: relative;
	border: 1px solid #999;
	padding: 10px;
	height: 240px;
}

.Widget.colorpickerWidget input {
	width: 100% !important;
	padding: 5px 15px 5px 15px !important;
	font-size: 15px;
	border: 0px solid #000;
	text-align: center;
	box-sizing: border-box;

}

.Widget.colorpickerWidget .farbtastic {
	position: absolute;
	left: 10px;
	top: 50px;
}


/* listeData() Stylesheets */

DIV.listeData form {
	margin: 0px;
}

#TraminoContent .listeData .empty {
	text-align: center;
	margin: 5px 0px;
	padding: 30px;
	border: 1px solid #ccc;
	color: #999;
	font-size: 16px;
	
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	
}

#TraminoContent .box .listeData .empty {
	border-width: 0px !important;
	padding: 30px 30px 20px 30px;
}

#TraminoContent div.listeData {
	padding: 0px 10px 5px 10px;
	border: 1px solid #ccc;
	min-height: 50px;
	background-color: #fff;
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

#TraminoContent .listeData.default { min-height: 20px; }

table.listeData {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	/* border-top: 1px solid #000; */
}

table.listeData pre {
	margin: 0;
}

	#TraminoContent table.listeData {
		background-color: #fff;
		color: #000;
	}

div.listeData.box { border: 1px solid #aaa !important; border-radius: 0.5em !important; padding: 0.7em !important; }


table.listeData.chart { border: 1px solid #999; }
table.listeData.chart th { border: 1px solid #999; color: #999; background-color: #ddd; font-size: 12px;}
table.listeData.chart td { border-left: 1px solid #999; padding: 0px; }
table.listeData.chart td input { width: 90% !important; border: 0px; padding: 2px 6px; }
table.listeData.chart td.rowheader { background-color: #ddd; color: #999; font-size: 12px; font-weight: bold; padding: 3px 4px; text-align: right;}

.listeData.verticals table td { border-left: 1px solid #ccc; border-right: 1px solid #ccc; }
.listeData.verticals table { border-bottom: 1px solid #ccc; margin-bottom: 10px; }

table.listeData a.listedata_mouseover { color: inherit !important; display: block; margin: -4px -8px; padding: 4px 8px; }
table.listeData a.listedata_mouseover::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
}

table.listeData tr.summary td { vertical-align: bottom; padding-top: 15px; /*font-size: 10px !important;*/ }

table.listeData tr.rowinfo td {
	color: #999;
	font-size: 11px;
	padding-left: 28px !important;
	border-top: 0px;
	padding-top: 0px;
	padding-bottom: 6px;
	font-style: oblique;
	white-space: normal;
}

table.listeData tr.topspace td {
	padding-top: 15px !important;
}

table.listeData td.small { font-size: 12px; line-height: 15px; padding-left: 1px !important; }

table.listeData tr.red { color: #a33; }
table.listeData td.red { color: #a33; }

table.listeData tr.green { color: #393; }
table.listeData td.green { color: #393; }

table.listeData tr.blue { color: #339; }
table.listeData td.blue { color: #339; }

table.listeData td.gold { color: #a93; }
table.listeData tr.gold { color: #a93; }
table.listeData tr.gold td { color: #a93; }


table.listeData tr.marked {
	color: #339;
}

table.listeData tr.hidden { color: #777; }

.off table.listeData tr.hidden input, table.listeData tr.hidden select { opacity: 0.3; }


table.listeData tr.opacity50 td { opacity: 0.5; }


table.listeData tr.hidden1 {
	color: #966;
}

table.listeData tr.hidden2 {
	color: #696;
}

table.listeData tr.hidden3 {
	color: #669;
}

table.listeData tr.hidden4 {
	color: #366;
}

table.listeData tr.disabled td {
	color: #888;
	text-decoration: line-through;
}

table.listeData tr.disabled2 td {
	color: #aaa;
	border-top: 1px solid #fff !important;
	background-color: #eee;
}

table.listeData tr.topborder td {
	border-top: 1px solid #bbb !important;
}


table.listeData tr.danger { background-color: #ff834b; }
table.listeData tr.highlight { background-color: #ff0; }
table.listeData tr.active { background-color: #efd; }
table.listeData tr.active2 { background-color: #cea; }

table.listeData tr.fixed { background-color: #e8e8e8; color: #666; }
table.listeData tr.abgerechnet { background-color: #F8F8F8; }
table.listeData tr.feiertag { background-color: #F8FCF4; }

table.listeData tr.fullreserved { background-color: #ddb4f2; }

table.listeData tr.divider td { padding-top: 15px; font-size: 13px; color: #777; border-bottom: 1px solid #bbb !important; }


table.listeData .right {
	float: none;
	text-align: right;
}

table.listeData .center { text-align: center; }
table.listeData .center input { text-align: center; }

/* Cell based Styles */


table.listeData td.hidden { color: #777; }

table.listeData td.weekend { background-color: rgba( 236, 236, 236, 50% ) !important; }

table.listeData td.lang  { background-color: #eee; text-transform: uppercase;
	padding: 6px 8px; font-size: 10px; text-align: center; color: #aaa; font-weight: bold; }



table.listeData td.points span  { background-color: #393; text-transform: uppercase;
	 text-align: center; color: #fff; font-weight: bold; border-radius: 5px;
	 padding: 2px 6px; }

table.listeData td.points.negativ span  { background-color: #933;  }


table.listeData td.monospace  {
	font-family: monospace;
}

/* Screen Width filter, ranking: 1366, 1920, (gap), 1440, 1536, 1600  */

@media all and ( max-width: 1440px ) {
	table.listeData th.wide_only { display: none; }
	table.listeData td.wide_only { display: none; }
}

@media all and ( max-width: 1600px ) {
	table.listeData th.ultrawide_only { display: none; }
	table.listeData td.ultrawide_only { display: none; }
}


/* Headers */


table.listeData th {
	text-align: left;
	border-bottom: 1px solid #ccc;
	vertical-align: bottom; 
	padding: 9px 6px 4px 7px;
	white-space: nowrap;
	color: #999;
	font-size: 11px;
	font-weight: bold;
}

table.listeData th.raw2 {
	padding-left: 0px;
}
table.listeData th.wordwrap { white-space: normal; }
table.listeData th.heute { background: #ff8 !important; }

table.listeData th a { color: #999 !important; }

table.listeData td {
	text-align: left;
	border-top: 1px solid #ccc;
	vertical-align: top; 
	padding: 4px 8px 4px 8px;
	white-space: nowrap;
	font-size: 13px;
	position: relative;
}



table.listeData.mini td {
	padding: 0px 8px 1px 8px;
}

table.listeData tr.noline td {
	border-top: 1px solid #fff;
}





table.listeData td.tiny {
	padding: 3px 8px 3px 8px;
	font-size: 11px;
}
	
	table.listeData tr.tiny td {
		padding: 3px 8px 3px 8px;
		font-size: 11px;
	}

	#TraminoContent table.listeData td.tiny a.button {
		padding: 2px 4px 1px 4px;
		line-height: 1;
		font-size: 10px;
	}
	
	table.listeData div.info {
		margin-top: 2px;
		font-size: 12px; line-height: 14px;
		color: #666;
	}
	
	table.listeData div.info2 {
		margin-top: 2px;
		font-size: 11px; line-height: 13px;
		color: #777;
	}
	
	
table.listeData td.big {
	padding: 4px 8px 4px 8px;
	font-size: 18px;
}

	table.listeData tr.big td {
		padding: 4px 8px 4px 8px;
		font-size: 18px;
	}


table.listeData td.noborder {
	border-top: 0px !important;
	padding: 0px 8px 6px 8px;
	padding: 0px 0px 6px 0px !important;
}

	table.listeData tr.noborder td {
		border-top: 0px !important;
		padding: 0px 8px 6px 8px;
	}


table.listeData td.border {
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}

table.listeData td.lborder {
	border-left: 1px solid #ccc;
}

table.listeData td.rborder {
	border-right: 1px solid #ccc;
}


table.listeData td.narrow {
	padding-right: 2px !important;
	padding-left: 2px !important;
}

	table.listeData th.narrow {
		padding-right: 0px !important;
		padding-left: 0px !important;
	}

	table.listeData tr.narrow td {
		padding-right: 2px !important;
		padding-left: 2px !important;
	}
	
	table.listeData th.narrow2 {
		padding-left: 1px !important;
	}

	table.listeData td.narrow2 {
		padding-left: 1px !important;
	}


	table.listeData td.vcenter {
		vertical-align: middle !important; 
	}




table.listeData td.tall {
	padding-top: 6px;
	padding-bottom: 6px;
}

	table.listeData tr.tall td {
		padding-top: 7px;
		padding-bottom: 6px;
	}

	table.listeData tr.subheader td {
		font-size: 11px;
		color: #aaa;
		padding-bottom: 0px;
	}

table.listeData tr.wordwrap td {
	white-space: normal;
}

	table.listeData td.wordwrap {
		white-space: normal;
	}


table.listeData td.header {
	font-size: 15px;
	line-height: 1.1em;
	padding: 4px 300px 4px 10px;
	border-top: 0px solid #000;
	white-space: normal;
}

table.listeData td.highlight {
	background-color: #ff8;
}

table.listeData td.gruppe  {
	padding-top: 15px;
	font-size: 12px;
	font-weight: bold;
	color: #777;
	border-top-width: 0px;
}


table.listeData td.none {
	padding: 0px;
	margin: 0px;
}
	table.listeData tr.none td {
		padding: 0px;
		margin: 0px;
	}

table.listeData td.raw  {
	padding: 2px 8px;
	margin: 0px;
}
	table.listeData tr.raw td {
		padding: 2px 8px;
		margin: 0px;
	}

	#TraminoContent table.listeData td.raw.icon {
		vertical-align: top;
		padding: 3px 2px 0px 0px;
	}

table.listeData tr.raw2 td  {
	padding: 2px 2px 2px 0px;
	margin: 0px;
}

	table.listeData td.raw2  {
		padding: 2px 2px 2px 0px !important;
		margin: 0px!importan;
	}

table.listeData td.icon48  {
	padding: 6px 8px 3px 0px;
	margin: 0px;
}

table.listeData td.icon48 img  {
	width: 48px;
	height: 48px;
}

table.listeData td.href  {
	cursor: pointer !important;
	background: url(/tramino/gfx/gui_pfeil_r.png) 0px 8px no-repeat;
	padding-left: 10px !important;
	background-size: 8px;
	cursor: alias !important;
}

table.listeData td.href:hover  {
	background-position: -2px 7px;
	background-size: 11px 11px;
}

table.listeData td.onclick  {
	cursor: pointer;
}

table.listeData td.reorder  {
	cursor: pointer;
}






table.listeData TR:hover tr.editable {
	cursor: text;
	/* background: url(/gfx/editable.png) 0px 3px no-repeat; */
}

#TraminoContent table.listeData td select { margin: 0.1em 0; width: 100%; font-size: 0.95em; }
#TraminoContent table.listeData td input[type=text] { 
	margin: 0px; 
	width: 100%; 
	border: 1px solid #bbb;
	padding: 2px 4px;
	box-sizing: border-box;
}

table.listeData tr.edit TH { padding: 0px; }
table.listeData tr.edit td { padding: 0px; }
table.listeData tr.edit { padding: 0px; }

table.listeData tr.edit input {
	width: 90%;
	min-width: 30px;
	font-size: 13px;
	margin-top: 1px;
	font-family: inherit;
	font-weight: inherit;
}

table.listeData td.err { border-bottom: 2px solid #f00 !important; }

table.listeData td.error span.widget { position: relative; }
table.listeData td.error span.widget:after {
	content: "";
	border-bottom: 2px solid #f00;
	position: absolute;
	bottom: -3px;
	left: 0px;
	width: 100%;
}

table.listeData td.warning span.widget { position: relative; }
table.listeData td.warning span.widget:after {
	content: "";
	border-bottom: 2px solid #FC6;
	position: absolute;
	bottom: -3px;
	left: 0px;
	width: 100%;
}


table.listeData td.warn input, table.listeData input.warn, table.listeData span.warn { background-color: #ff6;}


table.listeData tr.button {
}

	table.listeData tr.button a {
		padding: 1px 4px 1px 4px;
		background-color: #ccc;
		text-decoration: none;
		color: #000 !important;
		border-bottom: 0px;
	}
	table.listeData tr.button a:hover {
		background-color: #C33 !important;
		color: #fff !important;
		border-bottom: 0px;
	}

table.listeData tr.delete a {
	padding: 1px 4px 1px 4px;
	background-color: #C33;
	text-decoration: none;
	color: #fff;
}
	table.listeData tr.delete a:hover {
		background-color: #000;
		color: #fff;
	}

table.listeData td.header b {
	padding: 2px 6px 2px 6px;
	border: 1px solid #aaa;
}

table.listeData td.header h3 {
	margin: 12px 0px 7px 0px;
	padding: 0px;
	font-size: 19px;
}

table.listeData td.header p {
	margin: 7px 0px;
	padding: 0px;
	font-size: 14px;
	font-weight: 100;
	color: #999;
}


table.listeData.hover tr.data.hover:hover td {
	background-color: rgb(255, 102, 10);
	color: #fff !important;
	cursor: pointer;
}

table.listeData.hover2 tr.data:hover { 
	background-color: #f8f8f8;
}

table.listeData.hover2 tr.data td { 
	cursor: pointer;
}

table.listeData td.dragHandle  { cursor: move; vertical-align: middle !important; padding: 0px !important;  }
table.listeData tr.onDragHandle  { 
	background-color: #ddd !important; }

table.listeData tr.data.hover:active {
	background-color: #ddd;
	color: inherit;
}




table.listeData td .button {
	display: inline-block;
	background-color: #666;
	margin: 1px;
	padding: 2px 9px 3px 9px;
	font-size: 11px;
	color: #fff;
	cursor: pointer;
	text-align: center;
	border-radius: 0.3em;
	height: auto;
	width: auto;
}

table.listeData td .button:hover { background-color: #333; }

table.listeData td .button.save { background-color: #393; }
table.listeData td .button.save:hover { background-color: #5B5; }

table.listeData td .button.delete { background-color: #C33; }
table.listeData td .button.delete:hover { background-color: #f00; }

table.listeData td .button.outline { background-color: #fff !important; color: #000 !important; border: 1px solid #999; padding: 2px 7px 2px 7px !important;}
table.listeData td .button.monospace { font-family: monospace;}



.listeData .button {
	display: inline-block;
	background-color: #999;
	margin: 0px 4px 0px 0px ;
	padding: 2px 8px 3px 8px;
	font-size: 11px;
	color: #fff !important;
	cursor: pointer;
	text-align: center;
}

.listeData .button button {
	background-color: transparent;
	padding: 0px; margin: 0px; border: 0px; color: #fff;
}

.listeData .button:hover { background-color: #333; }




table.listeData td.liste-buttons .button {
	margin: 0px;
	padding: 0px;
	background-color: transparent;
}

table.listeData td.liste-buttons .button:hover {
	background-color: transparent;
}

table.listeData td.liste-buttons button {
	background-color: #666;
	margin: 1px 3px 1px 1px;
	padding: 1px 7px 3px 7px;
	font-size: 11px;
	color: #fff;
	cursor: pointer;
	text-align: center;
}

table.listeData td.liste-buttons button:hover {
	background-color: #333; 
}







.sepia table.listeData {
	color: #ffc;
	background-color: #997;
	border-bottom: 1px solid #cca;
}

.sepia table.listeData th {
	border-bottom: 1px solid #cca;
	background-color: #fff;
	color: #000;
}

.sepia table.listeData td {
	border-top: 1px solid #bb9;
	font-size: 14px;
}

.sepia table.listeData tr.tiny td {
	font-size: 13px;
}

.sepia table.listeData tr.bold {
	color: #fff !important;
	font-size: 16px;
}
	
.sepia table.listeData tr.gruppe  {
	color: #dda;
	font-size: 25px;
}

@media print {
	table.listeData tr.hidden { color: #444; }
	table.listeData td.hidden { color: #444; }
	table.listeData th { border-bottom: 1px solid #666; color: #000; }
	table.listeData td { border-top: 1px solid #666; }
	table.listeData td.href { padding-left: 7px !important; background: none;	}
	.listeData .csv_export { display: none; }
}

/* Timline */

.TraminoForm .element.statusButton.active .input { 
	background-color: #CCC;
	border: 1px solid #9e9e9e;
	color: #FFF;
	font-weight: bold;
}

#TraminoContent div.listeData td.heute { background: #ff8; }
#TraminoContent div.listeData td { cursor: default; }

#TraminoContent div.listeData td div.time_am {
	background: linear-gradient(135deg, rgba(255,255,255,0) 52%, rgba(255,255,255,1) 52%);
	justify-content: flex-start;
	padding-left: 3px;
}
#TraminoContent div.listeData td div.time_pm {
	background: linear-gradient(315deg, rgba(255,255,255,0) 52%, rgba(255,255,255,1) 52%);
	justify-content: flex-end;
	padding-right: 3px;
}

/* -- viewData() -- */

table.viewData {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	/* border-top: 1px solid #000; */
	font-family: Arial;
}

table.viewData table.viewData {
	width: auto;
	padding: 0px; 
	margin: 0px;
	border-spacing: 0px;
}


table.viewData td {
	text-align: left;
	vertical-align: middle; 
	padding: 5px 10px 4px 0px;
	white-space: nowrap;
	font-size: 13px;
}

table.viewData td.wordwrap { white-space: normal; }
table.viewData td.monospace { font-family: monospace !important; }


table.viewData td.red { color: #f00; }
table.viewData td.green { color: #393; }


table.viewData td.label {
	text-align: right;
	color: #999;
	font-size: 12px;
}

table.viewData td.widget {
	padding: 3px 10px 3px 0px;
}

	table.viewData td.widget input {
		font-size: 12px; padding: 2px 5px;
		height: auto;
	}

	table.viewData td.widget ::placeholder {
		opacity: 0.4;
	}

table.viewData table.viewData td {
	padding: 0px 10px 0px 0px !important;
}

table.viewData td.error span.widget {
	border-bottom: 2px solid #f00;
	display: inline-block;
}

table.viewData td.warning span.widget {
	border-bottom: 2px solid #FC6;
	display: inline-block;
}

table.viewData td.warning span.content {
	border-bottom: 2px solid #FC6;
	padding-bottom: 1px;
}

table.viewData td.error span.content {
	border-bottom: 2px solid #f00;
	padding-bottom: 1px;
}


table.listeData.mini td {
	padding: 2px 5px;
	font-size: 12px;
}


/* -- Memos -- */

.memo  { margin-bottom: 35px; }

.memo .message { margin-bottom: 15px; min-height: 50px;  }
.memo .avatar { float: left; width: 50px; margin-right: 15px; }
.memo .user { font-weight: bold; }

.memo .info { margin-top: 5px; font-size: 11px; color: #dde0dd; text-align: right; }

.memo .ref { font-size: 14px;}
.memo .ref.content .Bild { float: left; margin: 0px 15px 10px 0px; }

.memo .ref .videobox { cursor: pointer; position: relative; }

.memo .ref .playbutton, #tpc_pictures .playbutton {
	position: absolute; 
	left: 50%; top: 50%; right: 50%; bottom: 50%;
	margin: -32px 0px 0px -32px;
	z-index: 100; width: 64px; height: 45px; border: 1px solid #fff;
	background-color: #444;
	background-color: rgba(30,30,30,0.5);
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
}

.memo .ref .playbutton:hover, #tpc_pictures .playbutton:hover {
	background-color: rgba(30,30,30,0.75);
}

.memo .ref .playbutton span, #tpc_pictures .playbutton span {
	margin: 12px 0px 0px 23px;
	display: block;
	border-color: transparent transparent transparent white;
	border-style:solid;
	border-width: 10px 20px 10px 20px;
	width:0;
	height:0;
	
}



.privacy-stop {
	display: none;
	
}

.privacy-info {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 10px 20px;
	margin: 15px 0;
	background-color: #EEE;
	border: 1px solid #DDD;
	color: #333;
	font-size: 14px;
	line-height: 1.2;
	font-style: italic;
	text-align: center;
}

.privacy-info .text { margin: 5px 0; }

.privacy-button-wrapper { display: flex; justify-content: center; margin-top: 15px; }

.privacy-button {
	background-color: #3a9212;
	color: #FFF;
	display: inline-block;
	padding: 6px 20px;
	display: inline-block;
	font-style: normal;
	font-size: 20px;
	
	border-radius: 5px;
	cursor: pointer;
}

.privacy-button:hover {
	background-color: #3fb908;
}



#TraminoInhalt > div { position: relative; }
.TraminoBookmark {
	position: absolute;
	top: 0;
	right: 0rem;
	display: flex;
	font-size: 15px;
	justify-content: center;
	align-items: center;
	color: #FFF;
	padding: 0.25rem 0.6rem;
    cursor: pointer;
    transform: rotate(270deg);
    transform-origin: bottom right;
    background-color: rgba(0,0,0,0.6);
}

.TraminoBookmark i {
	margin-right: 0.5rem;
	font-size: 1rem;
}

.TraminoBookmark:hover { color: #000; border-color: #000; }


/* Quill */

li[data-list=bullet] { list-style-type: disc; margin-bottom: 0.1em; }
li.ql-indent-1 { margin-left: 2em; }
li.ql-indent-2 { margin-left: 4em; }