/***************************************************************************/
#body {
	font-family: sans-serif;
	font-size: small;
}
#header {
	width: 100%;
	height: 52px;
	overflow: hidden;
	background-color: gray;
}
#header #logo {
	float: left;
	background-image: url("/ptp/jakarta.faces.resource/oth-logo-negativ.png.xhtml?ln=img"); /* OTH Logo */
	background-repeat: no-repeat; /* Logo only once */
	background-size: 280px 48px; /* Size of Logo */
	background-position: 2px 2px; /* Small offsets on top and on left */
	width: 282px; /* width of the surrounding box */
	height: 52px; /* height of the surrounding box */
}
#header #title {
	float: left;
	font-size: x-large; /* Large font */
	font-weight: bold; /* Bold font */
	height: 26px;
	margin-top: 8px;
	margin-left: 20px;
	padding-top: 4px;
	padding-bottom: 5px;
	padding-left: 8px;
	padding-right: 8pt;
	background-color: #FFFFFF; /* White */
}

#header #breadcrumb { /* NOT USED */
	font-size: xx-small;
	color: white;
	padding: 3px 10px 4px 10px; /* top right bottom left */
}
#header #breadcrumb a:link { /* NOT USED */
	color: white;
	margin-left: 5px;
}

#menu {
	font-size: small;
	width: 33%; /* Content 64% */
	max-width: 225px; 
	padding-left: 10px; /* Space inside menu */
	padding-right: 10px;
	background-color: #DDDDDD; /* Light gray */
	float: left; /* Damit Menü links im Parent (und Content daneben) */
}
#menu a:link {
	text-decoration: none; /* No underline */
}
#menu .h1 {
	padding-top: 20px; /* Space to item before */
	display: block; /* Display in a column, not in a row */
}
#menu .h1 + .h1:last-child {
	padding-top: 5px; /* Smaller space between last two h1 items (before Impressum) */
}
#menu .h1:last-child {
	padding-bottom: 10px; /* Space after last item (Impressum) */
}
#menu .h2 {
	padding-left: 12px; /* Indent */
	padding-top: 5px; /* Space between h1 and this h2 item */
	display: block; /* Display in a column, not in a row */
}
#menu .h3 { /* Alle Räume etc. nur für Planner */
	padding-left: 36px; /* Indent */
	padding-top: 5px; /* Space between h1 and this h2 item */
	display: block; /* Display in a column, not in a row */
}
.display {
	display: block !important; /* in navigation.xhtml */
}
#menu .passed { /* für passierte Menus TODO */
	color: green;
	opacity: 1.0;
}
#contents {
	float: left; /* Damit Content neben Menü und nicht darum herum fließt */
	padding-left: 10px; /* Abstand vom Menü */
	width: 64%; /* Menu 33% */
}
#contents #headline {
	color: #666699; /* soft-blue */
	font-size: larger; /* Larger font */
	font-weight: bold; /* Bold font */
}
#footer {
	clear: both; /* Löscht Umfließen */
	padding-top: 2em; /* Unterer Rand zum Bildschirm (falls kein Text in footer) */
	xbackground-color: gray;
}

#draft_bg {
	position: fixed;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background: url("/ptp/jakarta.faces.resource/draft-bg.jpg.xhtml?ln=img") -100px 0px;
	z-index: -2;
}

.piNICHTMEHR { 
	font-size: larger; /* Icons in Buttons etwas größer: pi-sign-in etc. */
}

/* Date Picker */
.ui-widget-content .ui-state-active {
	background-color: #C0C0C0; /* dunkleres grau 200 als 230 */
}


.ui-widget-content
.ui-button-icon-only {
	font-size: small;
	width: 20px;
	height: 20px;
	margin-top: 2px;
}
.fa-sun-o, .fa-moon-o {
	vertical-align: 2px;
	x-color: yellow;
	x-background-color: blue;
}

/* Überschriften */
h1, h2 {
	color: #666699; /* soft-blue */
}


/* Liste mit Fakultäten und Links auf Tabellen */
ul.facultyList { 
	margin-top: -1ex;
}
ul.facultyList li {
	margin-top: 1ex; 
}

ul.facultyList p {
	margin-top: 2px;
	margin-bottom: 0px;
}

ul.jointList {
	margin-top: 0ex; 
	margin-bottom: 0ex; 
	padding-left: 2ex;
}

/* Liste mit Links auf Hauptarbeitsseiten von Welcome aus */
/* Liste mit Studiengängen und Links auf Tabellen */
ul.welcomeList,
ul.courseList {
	margin-top: -1.5ex;
}
ul.courseList li {
	margin-top: 0.75ex; 
}
ul.welcomeList li:not(:first-child) {
	line-height: 150%;
}
ul.infoList li:not(:first-child) {
	line-height: 150%;
}
/* Pattern dialog */
.pattern {
	font-size: smaller !important;
	height: 200;
}
/* Legende */
table.legend {
	margin-top: -2ex;
	margin-left: 2ex;
}
table.legend th {
	text-align: right;
	vertical-align: top;
}
table.legend td {
	vertical-align: top;
	padding-left: 1ex;
}

/*** General styles. ***/

/* Link colors. */
a:link,
a:visited {
	color: blue;
}
.facultyTable a:link,
a.support:link {
	color: inherit;
}
.nowrap {
	white-space: nowrap;	/* avoids   */	
}
.center {
	text-align: center;
}
.left {
	text-align: left;
}
.right {
	text-align: right;
}
.leftFloat {
	float: left;
}
.rightFloat {
	float: right;
}
.indent {
	padding-left: 8px;
}
.top {
	vertical-align: top;
}
.bottom {
	vertical-align: bottom;
}
.bold {
	font-weight: bold;
}
.smaller {
	font-size: smaller;
}
.small {
	font-size: small;
}
.x-small {
	font-size: x-small;
}
.larger {
	font-size: larger;
}
.okay,
.okay .ui-selectonemenu-label {
	color: green;
}
.info {
	color: blue;
}
.warn {
	color: magenta !important;
}
.warning {
	color: red;
}
.error {
	color: red;
	font-weight: bold;
}
.fatal {
	color: #990000;
	font-weight: bold;
}
.strikeout {
	text-decoration: line-through;
}
.Important {
	font-weight: bold;
	color: #990000;
}
.important {
	font-weight: normal;
	color: #990000;
}
.buttons .hidden {
	display: none;
}
.black {
	color: black;
}
.blue {
	color: blue;
}
.gray {
	color: gray;
}
.grayBackground {
	background-color: #f5f5f5; /* light gray */
}
.noOpacity {
	opacity: 1.0 !important;
}
.medOpacity {
	opacity: 0.6 !important;
}
.fullWidth {
	width: 100% !important;
}
.noborder td {
	border: hidden !important;
}

/* Login symbols */
.checkbox {
	padding: 0pt 0pt !important;
}
.symbol {
	padding: 0pt -4pt !important;
}
tbody .symbol {
	font-size: medium !important;
	text-align: center;
}
tbody td.symbol {
	padding-left: 0px !important;
	padding-right: 0px !important;
}
.symbol .send {
	background-color: #D0D000; /* dark yellow */
}
.symbol .remind {
	background-color: orange; 
}
.symbol .irrelevant,
.symbol .partial {
	color: gray; 
}
.missing {
	color: red;
}
.soon {
	color: #D0D000; /* dark yellow */
}
.late {
	color: blue; /* or violet #8000FF; */
}

/* Super-index for project state. */
.stateIndex {
	margin-left: 1.5ex;
	vertical-align: super;
	font-size: x-small;
	white-space: nowrap; 
}

/* Small top links. */
.topLink {
	font-size: x-small;
}
/* Paragraphs like p tag */
.p {
  display: block;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: 0;
  margin-right: 0;
} 

/* Colors, depending on project state (called by projectController.getProjectState(project)). */
.INDEFINITE {
	color: red;
	font-weight: bold;
}
.PREPARING,
.BLOCKING,
.PLANNING {
	color: black;
}
.DRAFT_STUDENT,
.DRAFT_STUDENT_VISOR {
	color: magenta;
}
.PROVISIONAL_SUPERVISOR,
.PROVISIONAL_SUPERVISOR_VISOR,
.DRAFT_SUPERVISOR,
.DRAFT_SUPERVISOR_VISOR,
.NOT_FINAL_SEND {
	color: red;
}
.FINAL_BOARD_NO_VISOR {
	color: rgb(64, 64, 255);
}
.FINAL_BOARD {
	color: blue;
}
.FINAL_SEND_NO_VISOR {
	color: rgb(0, 128, 128);
}
.FINAL_SEND,
.INFORMATION_ADMIN {
	color: green;
}

/* Colors, depending on user role (not in thead). */
tbody .studentview_PLANNER,
tbody .studentview_SECRETARY,
tbody .studentview_ADMIN {
	background-color: #EEEE77; /* soft yellow: CMYK 0,0,50,7 */
}

.changed,
.changed input,
.changed .ui-selectonemenu-label,
.changed.ui-inputtext { 
    background-color: #D0D0FF !important; /* soft blue */
}
.changed.ui-inputfield {
    background: #D0D0FF; /* geht auch background-color wie oben? */
}
.invalid {
	padding: 2pt 4pt;
	background: #FFD0D0;
}
.invalid.ui-inputfield { 
    background: #FFD0D0;
}
.nostudentview_PLANNER,
.nostudentview_SECRETARY,
.nostudentview_ADMIN {
	background-color: white;
}

/* To show tooltip on disabled button */
.showTooltip {
    pointer-events: all !important;
}

/*** Table styles. ***/

table.input > tbody > tr > td:nth-child(2) {
	width: 70% !important;
} 

/* Input tables: profile, complaint */

.input label { /* p:outputLabel */
	font-weight: bold;
}
.blockedTable {
	width: auto !important;
}
.ui-widget { /* p:dataTable, buttons, ... */
	font-size: small;
}
.ui-widget-header {
	default-background: #f5f5f5;
	background: #e0e0e0;
}
.ui-button-text {
	font-weight: normal;
}
.ui-progressbar { /* for fileupload */
	width: 100px !important; /* 200px zu groß */
}
.legendPanel td {
	vertical-align: top;
}
.legendPanel td:first-child {
	font-weight: bold;
}
.previewPanel {
	background-color: #EEEE77; /* soft yellow: CMYK 0,0,50,7 */
}

.previewPanelAdmin {
	background-color: #ffc58a; /* soft yellow: CMYK 0,0,50,7 */
}

/* Tables: supervisors, students, modules, examinations, rooms. */

.mailTable {
	margin-left: 25px;
}
.mailTable td {
	padding-right: 10px;
} 

.userTable th {
	text-align: left;
}
.userTable td {
	text-align: right;
}

.ui-widget-content {
	color: black; /* to avoid gray 79,79,79 */
}

.configTable,
.facultyTable,
.userGroupTable {
	width: max-content;
	min-width: 100%;
	font-size: smaller; /* wird sonst von ui-widget überschrieben */
	padding-right: 10px; /* Abstand zum linken Fensterrand */
}
.supervisorTable,
.studentTable,
.moduleTable,
.examinationTable,
.roomTable,
.studentScheduleTable,
.supervisorScheduleTable,
.compareTable {
	overflow: auto; /* 2021 TODO Test, weil Tabellen auf ipad abgeschnitten sind: hilft das? */
	width: max-content;
	padding-right: 10px; /* Abstand zum linken Fensterrand */
}
.supervisorScheduleTable .odd {
	background: none repeat scroll 0 0 #f2f5f9;
}
.supervisorScheduleTable .even {
	background: none repeat scroll 0 0 #ffffff;
}

.supervisorScheduleTable .th,
.supervisorScheduleTable .tr {
	border-left-color: #a8a8a8 !important;
	border-right-color: #a8a8a8 !important;
}
.supervisorScheduleTable .firstOfDay {
	border-top-style: double !important;
	border-top-width: 4px !important;
	border-top-color: #a8a8a8 !important;
}
.supervisorScheduleTable .firstOfTime {
	border-top-width: 2px !important;
	border-top-color: #a8a8a8 !important;
}

.examinationTable th,
.examinationTable tr,
.roomTable th,
.roomTable tr {
	x-border-color: #a8a8a8 !important;
}
.examinationTable .firstOfDay,
.roomTable .firstOfDay {
	border-top-style: double !important;
	border-top-width: 4px !important;
}

.lectureTable {
	width: max-content;
	min-width: 100%;
}

.moduleTable .modul {
	x-width: 385px;
	width: 450px;
	padding-left: 0pt;
	padding-right: 0pt;
}
.supervisorScheduleTable .modul,
.studentScheduleTable .modul {
	width: 450px;
	padding-left: 0pt;
	padding-right: 0pt;
}
.supervisorScheduleTable tr.modul td:first-child,
.studentScheduleTable tr.modul td:first-child {
	width: 10ex;
}
.supervisorScheduleTable tr.modul td:nth-child(2),
.studentScheduleTable tr.modul td:nth-child(2) {
	width: 80px;
}

.supervisorScheduleTable .cnt,
.studentScheduleTable .cnt,
.lectureTable .cnt {
	border-right: hidden;
}
.lectureTable tbody .remark {
	vertical-align: top;
	max-width: 350px;
}

.lectureTable .remark div.innerHead:not(:first-child) {
	margin-top: 4px;
}
.moduleTable ul,
.lectureTable ul,
.supervisorScheduleTable ul,
.compareTable ul {
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 14px;
}
.examinationTable ul,
.roomTable ul {
	font-size: x-small;
	margin-top: 0px;
	margin-bottom: 0px;
	padding-left: 10px;
}

.medskip {
	margin-bottom: 8px;
}
.smallskip {
	margin-bottom: 4px;
}
.bigskip {
	margin-bottom: 12px;
}
.roomSelectionLink {
	padding-bottom: 6px;
}
.autoTable {
	table-layout: auto !important;
}
.whiteBackground {
	background-color: white;
}
.lightBackground {
	background-color: #f2f5f9; 
}
.loginPanel td {
	vertical-align: top;
	padding-right: 5px;
}
.loginPanel div {
	font-size: small;
	width: max-content;
}
.loginPanel td:first-child {
	width: 110px;
}
	
.supervisorTable .rotateLogin {
	transform: translate(59px,51px) rotate(270deg);
	width: 6px;
	height: 120px;
}
.studentTable .rotateLogin {
	transform: translate(59px,51px) rotate(270deg); /* 32px,25px */
	width: 10px;
	height: 120px; /* 65 */
}
.studentLectureTable .rotateLogin {
	transform: translate(32px,25px) rotate(270deg);
	width: 10px;
	height: 65px;
}
.supervisorTable tbody td,
.studentTable tbody td,
.iconTable tbody td
 {
	padding-top: 0px !important;
	padding-bottom: 1px !important;
	padding-left: 6px !important;
	padding-right: 6px !important;
}
.iconNICHTBENUTZT {
	height: 28px;
}

.supervisorTable tbody td.checkbox
 {
	padding-top: 0px !important;
	padding-bottom: 1px !important;
	padding-left: 2px !important;
	padding-right: 2px !important;
}

/* Detail-Link */

.inner td {
	border: none !important;
} 

.moduleTable .innerLink {
	font-weight: bold;
	border: hidden;
}
.moduleTable .innerLink.wideColumn {
	width: 135px;
}
.moduleTable .innerLink.smallColumn {
	width: 65px;
}

/* Nachteilsausgleich, Gruppierung etc. */
.moduleTable .innerHead {
	vertical-align: baseline;
	font-style: italic;
	text-align: right;
	border: hidden;
	padding-right: 0px;
}

/* Nachteilsausgleich, Gruppierung etc. */
.moduleTable .innerText {
	vertical-align: baseline;
}

.examinationTable .tableColumn,
.roomTable .tableColumn {
	max-width: 250px;
	vertical-align: top;
}

div .buttons,
div .inner {
	display: flex;
	justify-content: space-between;
}
.panel { /* not used any more ??? */
	min-width: 100%;
}
.examinationTable .inner,
.examinationTable .inner span,
.roomTable .inner,
.roomTable .inner span {
	font-size: x-small;	
}
.examinationTable .inner span .modul,
.roomTable .inner span .modul {
	font-size: larger;	
}
.examinationTable .inner.head,
.roomTable .inner.head {
	font-size: x-small;
	font-style: italic;
	color: gray;
}
.examinationTable .inner.head:not(:first-child),
.roomTable .inner.head:not(:first-child),
.roomTable .inner.foot {
	margin-top: 4px;
}
.inner.foot {
	margin-top: 12px;
}

.roomTable .blocked {
	font-weight: bold;
	font-style: italic;
}
.roomTable .count {
	font-weight: bold;
}
.dateColumn {
	width: max-content;
}

.workflow {
	display: inline-block;
	font-size: smaller;
	width: 120px;
	border: 2px solid black;
	padding: 3px;
	text-align: center;
    background-color: #D0D0FF;/* soft blue */
}
.workflow.done {
	background-color: #80ff80; /* lighter green */
}
.workflow.todo {
	background-color: orange;
}

/* used in Primefaces Text Editor for Large : use h3 - see: https://stackoverflow.com/questions/30980873/what-are-the-default-css-styling-of-heading-tags-h1-h2-h3-h4-h5 */
.primefacesCss li {
	margin-top: 1ex; 
}
.primefacesCss .ql-size-large { /* like h3 */
	display: block;
    font-size: 1.17em;
    margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}
.primefacesCss .ql-size-huge { /* like h2, but in soft-blue */
	color: #666699; /* soft-blue */
	display: block;
	font-size: 1.5em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    margin-left: 0;
    margin-right: 0;
    font-weight: bold;
}