@CHARSET "ISO-8859-1";

body {
	background-color: #77A7B9;
}

*, *::before, *::after {
	box-sizing: border-box;
}

.container {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 10px;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -5px;
}

.col-12, .col-8, .col-6, .col-4 {
	padding: 0 5px;
}

.col-12 {
	flex: 0 0 100%;
}

.col-8 {
	flex: 0 0 66.666%;
}

.col-6 {
	flex: 0 0 50%;
}

.col-4 {
	flex: 0 0 33.333%;
}

.header {
	background-color: #102D41;
	width: 100%;
	text-align: center;
	padding: 20px 0 0px 0;
}
a img{
	border: none;
}

.header h1 {
	color: white;
}

.header a {
	color: white;
	text-decoration: none;
}

.header a:HOVER {
	text-decoration: underline;
}

.tabheader {
	background-color: #E8EFF5 ;
	font-size: 1.6em;
	padding: 5px 0px 5px 5px;
}

.tabcontent {
	background-color: #C0C0C0;
	padding: 10px;
	margin-bottom: 20px;
}

.formRow{
	clear: both;
	border: 1px solid;
	margin: 1px;
	padding: 4px;
}
.form-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 12px;
	align-items: center;
}

.form-row {
	display: flex;
	flex-direction: column;
	min-width: 160px;
}

.form-label {
	font-weight: bold;
	margin-bottom: 4px;
}

.form-control {
	padding: 6px 8px;
	border: 1px solid #9aa7b1;
	border-radius: 4px;
	background: #fff;
}
.row0{
	background-color: #70BAED;
}
.row1{
	background-color: #a7D7F8;
}
.row2{
	background-color: #70BAED;
}
.rowsubmit{
	background-color: #246593;
}
.formRow label{
	display: block;
	width: 140px;
	float: left;
}

/***** Message *******/
.msg {
	background-color: red;
	/* width: 100%; */
	font-size: 1.7em;
	color: white;
	padding-left: 10px;
}

.message-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-120%);
	opacity: 0;
	transition: transform 0.25s ease, opacity 0.25s ease;
	padding: 12px 44px 12px 16px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	background: #1b4a7a;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 1000;
}

.message-bar.is-visible {
	transform: translateY(0);
	opacity: 1;
}

.message-bar--success {
	background: #1f7a3b;
}

.message-bar--error {
	background: #a11b1b;
}

.message-bar--warning {
	background: #8a5a00;
}

.message-bar-close {
	position: absolute;
	top: 6px;
	right: 10px;
	width: 28px;
	height: 28px;
	border: none;
	border-radius: 14px;
	background: rgba(255, 255, 255, 0.2);
	color: #ffffff;
	font-size: 16px;
	font-weight: bold;
	cursor: pointer;
}

.message-bar-close:hover {
	background: rgba(255, 255, 255, 0.32);
}

body.message-bar-visible {
	padding-top: 52px;
}

/***** Debug - Bar *****/
.debug-bar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	transform: translateY(-120%);
	opacity: 1;
	transition: transform 0.25s ease, opacity 0.25s ease;
	padding: 12px 44px 12px 16px;
	font-size: 16px;
	font-weight: bold;
	text-align: center;
	color: #ffffff;
	background: #a11b1b;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
	z-index: 999;
}
body.debug-bar-visible {
	padding-top: 52px;
}
.debug-bar.is-visible {
	transform: translateY(0);
	opacity: 1;
}

/***** Select List ****/
.select_list,.select_list li ul {
	list-style: none outside none;
	margin: 4px;
	padding-left: 6px;
	cursor: pointer;
}

.select_list .expand {
	cursor: n-resize;
	margin-right: 5px;
}

.select_list .mark {
	background-color: red;
}

.expandable img {
	margin: 2px 5px -2px 2px;
	width: 16px;
}

.select_list li ul img {
	margin: 2px 5px -2px 2px;
	width: 16px;
}

.select_list .selected {
	background-color: #C0C0C0;
}

.select_list .partselected {
	background-color: #F0F0F0;
}

/** Student List **/
.studentlist_full {
	width: 100%;
	background-color: #98B5C1;
	margin: 10px 0 10px 0;
	padding: 10px 0 0 0;
}

.studentlist_full label {
	margin: 0px 0px 10px 10px; width : 100px;
	display: block;
	float: left;
	width: 100px;
}

.studentlist_select {
	background-color: #98B5C1;
	width: 48%;
	float: right;
	height: 300px;
	overflow: auto;
	border: 1px solid;
}

.studentlist_level1 :HOVER {
	cursor: pointer;
}

.studentlist_full_plus {
	float: left;
	cursor: pointer;
	border: 1px solid black;
	margin: 1px;
	height: 16px;
	width: 16px;
	text-align: center;
}

/** Option Rows **/
.option_div {
	width: 100%;
	/* background-color: #B6C299; */
	margin: 10px 0 10px 0;
}
.option_div::after {
	content: "";
	display: table;
	clear: both;
}

.option_div .option_icon {
	float: left;
	/*
	border: 1px solid black;
	background-color: #99C2A5;
	padding: 2px;
	margin: 5px;
	width: 40px;
	height: 40px;
	*/
}
.option_div img{
	padding: 3px;
	background-color: #FFF;
	width: 40px;
	height: 40px;
	float: left;
	margin-left: 5px;
}

.option_spacer {
	float: left;
	border: 1px solid #505050;
	background-color: #505050; 
	height : 40px;
	margin: 0 1px 0 5px;
	padding: 2px;
	height: 40px;
}

/** Grouplist **/
.grouplist_border {
	position: relative;
}

.grouplist {
	width: 160px;
	float: left;
	margin: 5px;
}

.grouplist_title {
	width: 100%;
	text-align: center;
}

/* Phase 2.2 CSS-Modernisierung (minimaler Start) */
.hidden-mobile {
	display: block;
}

@media (max-width: 768px) {
	.table {
		font-size: 0.9em;
	}
	.form-row {
		min-width: 100%;
	}
	.form-control {
		width: 100%;
	}
	.col-12, .col-8, .col-6, .col-4 {
		flex: 0 0 100%;
	}
	.option_div img {
		width: 28px;
		height: 28px;
		padding: 6px;
	}
	.option_spacer {
		height: 28px;
		margin: 5px 3px;
	}
	.studentlist_select {
		width: 100%;
		float: none;
		height: auto;
		max-height: 300px;
		margin-top: 10px;
	}
	.grouplist {
		/*
		width: 100%;
		float: none;
		*/
	}
	.hidden-mobile {
		display: none;
	}
}

.grouplist_outside {
	border: 1px solid black;
	float: left;
	position: relative;
	height: 320px;
	width: 160px;
	overflow: auto;
	background-color: #98B5C1;
	margin: 5px;
}

.grouplist_inside {
	clear: both;
	background-color: #E0E0E0;
	margin: 2px;
	padding: 1px;
	height: 25px;
	position: absolute;
	white-space: nowrap;
	cursor: pointer;
}

.studentlist_level2 {
	clear: both;
	background-color: #E0E0E0;
	margin: 2px 2px 2px 10px;;
	padding: 1px;
	height: 25px;
	white-space: nowrap;
	cursor: pointer;
}

.gwp_comment{
	/*margin: 10px;*/
	padding: 4px;
	width: 99%;
	background-color: #98B5C1;
	border: 1px solid black ;
}
.gwp_headline{
	font-weight: bold;
}
#gwp_textfield textarea{
	background-color: #E0E0E0;
}

/* Editlist - Teacher KV */
.editlist_teacher label {
	width: 110px;
	display: block;
	float: left;
}

/* Timetablelist */
.timetable_list {
	border-spacing: 0;
	border-collapse: collapse;
	text-align: center;
}

.timetable_list td {
	border: 1px solid black;
	padding: 5px;
}

.timetable_submit {
	padding: 10px;
}

/* Form addPlan */
#table_addplan td {
	white-space: nowrap;
}

/* Copyright Info */
.copyright {
	width: 100%;
	text-align: center;
	color: #404040;
}

.copyright a {
	color: #404040;
	text-decoration: none;
	font-style: italic;
}

/** Login **/
.login {
	width: 100%;
	text-align: center;
}

.login table {
	text-align: center;
}

.login p {
	width: 100%;
	text-align: center;
}

.login label {
	width: 100px;
}

/** Tooltip **/
.tip-wrap {
	color: #fff;
	width: 139px;
	z-index: 13000;
}

.tip-title {
	font-weight: bold;
	font-size: 12px;
	margin: 0;
	color: #9FD4FF;
	padding: 8px 8px 4px;
	background: url(bubble.png) top left;
}

.tip-text {
	font-size: 12px;
	padding: 4px 8px 8px;
	background: url(bubble.png) bottom right;
}

/*** Topmenu ***/
#cssmenu ul {
	list-style-type: none;
	position: relative;
	display: block;
	height: 33px;
	font-size: 12px;
	background: url(bg.png) repeat-x top left;
	font-family: Verdana, Helvetica, Arial, sans-serif;
	border: 1px solid #000;
	margin: 0;
	padding: 0;
	width: auto;
}

#cssmenu li {
	display: block;
	float: left;
	margin: 0;
	padding: 0;
}

#cssmenu li a {
	float: left;
	color: #A79787;
	text-decoration: none;
	height: 24px;
	padding: 9px 15px 0;
	font-weight: normal;
}

#cssmenu li a:hover,#cssmenu .active {
	color: #fff;
	background: url(bg.png) repeat-x top left;
	text-decoration: none;
}

#cssmenu .active a {
	color: #fff;
	font-weight: 700;
}

#cssmenu ul {
	background-color: #B11718;
}

#cssmenu li a:hover,#cssmenu li.active {
	background-color: #DE3330;
}

/**** RELEASE TABLE ******/
.table_release{
	border-collapse: collapse;
}
.table_release th, .table_release td {
	border: 1px solid black;
	padding: 5px;
	/* white-space: nowrap; */
}

.releaseHighlight{
	color: #AF3030;
}
.releaseCompleteHighlight{
	color: green;
}
.prematurelyHighlight{
	text-decoration: line-through;
	color: #AF3030;
}
/*
.noTeachsingHighlight {
	text-decoration: line-through;
	color: blue;	
}
*/

.tbl_payment {
	border-collapse: collapse;
	margin-top: 20px;
}

.tbl_payment tr td, .tbl_payment tr th {
	border: 1px solid black;
}

.myOwnbutton {
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
    border: solid 1px #4acf86;
    text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4);
    -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 1px 1px rgba(0, 0, 0, 0.2);
    background: #4acf86;
    color: #201c1c;
    padding: 8px 12px;
    text-decoration: none;
  }