/* General Sytle */

* {
	box-sizing:border-box;
	margin:0;
	padding:0;
}

html {
	overflow-y: scroll;
}

body	{
	background:#FFFFFF;
	font-family:tuitype,arial,Helvetica;
	font-size:100%;
}

a	{
	text-decoration:none;
}

.button{
	width:100px;
	height:26px;
	padding-top:2px;
	border:1px solid #888888;
	border-radius:13px;
	text-decoration:none;
	display:inline-block;
	color: #FFFFFF;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	cursor:pointer;
	background: #70cbf4;
}
.button:hover{
	background-color: #4BAED8;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.buttonRed{
	width:100px;
	height:26px;
	padding-top:2px;
	border:1px solid #888888;
	border-radius:13px;
	text-decoration:none;
	display:inline-block;
	color: #FFFFFF;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	cursor:pointer;
	background: #E45450;
}
.buttonRed:hover{
	background-color: #D00E14;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.buttonGreen{
	width:100px;
	height:26px;
	padding-top:2px;
	border:1px solid #888888;
	border-radius:13px;
	text-decoration:none;
	display:inline-block;
	color: #FFFFFF;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	cursor:pointer;
	background: #63C384;
}
.buttonGreen:hover{
	background-color: #4E9967;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.buttonGrey{
	width:100px;
	height:26px;
	padding-top:2px;
	border:1px solid #888888;
	border-radius:13px;
	text-decoration:none;
	display:inline-block;
	color: #444444;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	cursor:pointer;
	background: #CCCCCC;
}
.buttonGrey:hover{
	background-color: #BBBBBB;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.buttonLight{
	width:100px;
	height:26px;
	padding-top:2px;
	border:1px solid #888888;
	border-radius:13px;
	text-decoration:none;
	display:inline-block;
	color: #888888;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	cursor:pointer;
}
.buttonLight:hover{
	background-color: rgba(0,0,0,0.1);
}

.buttonDisabled{
	width:100px;
	height:26px;
	padding-top:2px;
	border:1px solid #CCCCCC;
	border-radius:13px;
	text-decoration:none;
	display:inline-block;
	color: #AAAAAA;
	font-size:16px;
	font-weight:normal;
	text-align:center;
	background: #DDDDDD;
}

.buttonSmall{
	width:50px;
	height:17px;
	padding-top:0.4px;
	border:1px solid #888888;
	border-radius:10px;
	text-decoration:none;
	display:inline-block;
	color: #FFFFFF;
	font-size:13px;
	font-weight:normal;
	text-align:center;
	cursor:pointer;
	background: #70cbf4;
}
.buttonSmall:hover{
	background-color: #4BAED8;
	box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.buttonSmallDisabled{
	width:50px;
	height:17px;
	padding-top:0.4px;
	border:1px solid #CCCCCC;
	border-radius:10px;
	text-decoration:none;
	display:inline-block;
	color: #AAAAAA;
	font-size:13px;
	font-weight:normal;
	text-align:center;
	background: #DDDDDD;
}

.inputField {
	width:95%;
	height:22px;
	font-family:tuitype,Verdana,Helvetica;
	font-size:15px;
	border:solid 1px #444444;
	border-radius:5px;
	padding:0 5px;
}
.inputFieldMarked {
	background:#FFC6C6;
}
.inputTextArea {
	width:95%;
	font-family:tuitype,Verdana,Helvetica;
	font-size:15px;
	border:solid 1px #444444;
	border-radius:5px;
	padding:0 5px;	

}


.switch {
	position: relative;
	display: inline-block;
	width: 34px;
	height: 20px;
}
.switch input { 
	opacity: 0;
	width: 0;
	height: 0;
}
.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #ccc;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 34px;
}
.slider:before {
	position: absolute;
	content: "";
	height: 13px;
	width: 13px;
	left: 4px;
	bottom: 4px;
	background-color: white;
	-webkit-transition: .4s;
	transition: .4s;
	border-radius: 50%;
}
input:checked + .slider {
	background-color: #2196F3;
}
input:focus + .slider {
	box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
	-webkit-transform: translateX(13px);
	-ms-transform: translateX(13px);
	transform: translateX(13px);
}




/* JQUERY ToolTp */
.custom-tooltip {
    background:#FFF6D1 !important;
    color: #666666 !important;
}
.ui-tooltip {
	font-style:italic;
	font-size:13px; }

/* Alertify Message */
.ajs-message.ajs-custom { color: #31708f;  background-color: #d9edf7;  border-color: #31708f; }


/* Main-Grid */
.mainContainer {
	display:flex;
	flex-direction:column;
	align-items:stretch;
	align-content:stretch;
	height:100vh;
}
.mainContent {
	flex-grow:1;
	padding:1em;
	display:none;
}


/* TOP-Navigation */

.navHead {
	display:flex;
	justify-content:space-between;
	align-items:center;
	align-content:center;
	gap:3em;
	width:100%;
	min-height:55px;
	margin:0;
	padding:0.5em 1em 0 1em;
	background:#FFFFFF;
}

.navHead ul	{
	display:inline-block;
}

.navHead ul li	{
	display:inline;
	margin:0.188em 0em 0em 0em;
}

.navHead ul li span {
	font-size:1.2em;
	padding-right:0.2em;
	color:#70CBF4;
}

.navHead ul li a	{
	cursor:pointer;
	color:#454040;
	font-size:1.125em;
	line-height:2.5em;
	padding:0.563em 1.2em 0.623em 1.2em;
	border-radius:5px 5px 0 0;
}

.navHead ul li a.active {
	border-top: 0.188em solid #70cbf4;
	border-bottom: 1px solid #EEEEEE;
	background:#EEEEEE;
}

.navHead ul li a.inactive {
	border-top: 0.188em solid #c2e6fa;
	border-bottom: 1px solid #FFFFFF;
	background:#DCDCDC;
}



/* SUB-Navigation */
.subnav	{
	display:inline-block;
	height:29px;
	vertical-align:bottom;
	margin-top:0.5em;
}

.subnav div	{
	display:inline-block;
	cursor:pointer;
	height:30px;
	padding:5px 1em 0 1em;
	font-size:0.9em;
	color:#454040;
	border-radius:5px 5px 0 0;
}

.subnav div.active {
	border-top: 0.188em solid #70cbf4;
	border-bottom: 1px solid #FFFFFF;
	border-left:solid 1px #CCCCCC;
	border-right:solid 1px #CCCCCC;
	background:#FFFFFF;
}

.subnav div.inactive {
	border-top: 0.188em solid #c2e6fa;
	border-bottom: 1px solid #CCCCCC;
	border-left:solid 1px #DCDCDC;
	border-right:solid 1px #DCDCDC;
	background:#DCDCDC;
}




/* Login Container */
.dataContainerHeader {
	width:100%;
	padding:0.2em 1em;
	background:#092A5E;
	color:#FFFFFF;
	font-size:1.3em;
	border-radius:5px 5px 0 0;
	text-align:center;
}
.dataContainerContent {
	width:100%;
	padding:0.5em 0;
	background:#FFFFFF;
	border-radius:0 0 5px 5px;
	border:solid 1px #AAAAAA;
}
.dataContainerInfo {
	width:100%;
	padding:0.2em 1em;
	background:#E2F3FE;
	color:#333333;
}



/* Container zur Darstellung / abgerundet / dunkelblauer Header */
.contentBox {
	display:inline-block;
	width:95%;
	box-shadow: 5px 5px 5px #EEEEEE;
	margin-bottom:0.5em;
}
.contentBox > header {
	width:100%;
	background:#092a5e;
	color:#FFFFFF;
	font-weight:bold;
	padding:0.2em 1em;
	border:solid 1px #092a5e;
	border-radius:5px 5px 0 0;
}
.contentBox > header > span {
	font-weight:normal;
}
.contentBox > article {
	width:100%;
	min-height:15em;
	padding:0.5em 1em;
	border:solid 1px #CCCCCC;
	border-radius:0 0 5px 5px;
	background:#FFFFFF;
}
.contentBox > article > .break {
	width:calc(100% + 2em);
	background:#E2F3FE;
	margin:0.2em -1em 0.2em -1em;
	padding:0.3em 1em;
	color:#333333;
	font-weight:bold;
}



/* Container zur Darstellung / abgerundet / grauer Header */
.contentInnerBox {
	display:inline-block;
	width:99%;
	box-shadow: 5px 5px 5px #EEEEEE;
	margin-bottom:0.5em;
}
.contentInnerBox > header {
	width:100%;
	background:#CCCCCC;
	color:#000000;
	font-weight:bold;
	padding:0.2em 1em;
	border:solid 1px #CCCCCC;
	border-radius:5px 5px 0 0;
}
.contentInnerBox > header > span {
	font-weight:normal;
}
.contentInnerBox > article {
	width:100%;
	padding:0.5em 1em;
	border:solid 1px #CCCCCC;
	border-radius:0 0 5px 5px;
	background:#F8F8F8;
}






/* Breadcrumb navigation */
.breadcrumb {
	margin:0 0 0.7em 0;
}
.breadcrumb li {
	display:inline-block;
	font-size:14px;
	color:#888888;
	cursor:pointer;
}
.breadcrumb li::before {
	content: '>>';
}
.breadcrumb li:first-child::before {
	content: '';
}
.breadcrumb li span {
	padding:0 0.5em 0 0.7em;
}
.breadcrumb li span:hover {
	color:#000000;
}


::-webkit-input-placeholder {
	color: #BBBBBB;
}
:-moz-placeholder { /* older Firefox*/
	color: #BBBBBB;
}
::-moz-placeholder { /* Firefox 19+ */ 
	color: #BBBBBB;
} 
:-ms-input-placeholder { 
	color: #BBBBBB;
}


/* Content Area */
.tabContainer {
	display:block;
	width:100%;
	margin:0;
	padding:0;
}





.tableStd {
	table-layout:fixed;
	width:100%;
	padding:0.5em;
	border-spacing:0em;
	font-size:0.9em;
	text-align:left;
}
.tableStd thead tr td {
	color:#888888;
	padding:0.4em;
	vertical-align:bottom;
	background:#EEEEEE;
}
.tableStd thead tr:last-child td {
	border-bottom:solid 1px #CCCCCC;
}
.tableStd tbody tr:hover {
	background:#EEEEEE;
}
.tableStd tbody tr td {
	padding:0.4em;
}


.tableStdNoHover {
	table-layout:fixed;
	width:100%;
	padding:0.5em;
	border-spacing:0em;
	font-size:0.9em;
	text-align:left;
}
.tableStdNoHover thead tr td {
	color:#888888;
	padding:0.4em;
	vertical-align:bottom;
}
.tableStdNoHover thead tr:last-child td {
	border-bottom:solid 1px #CCCCCC;
}
.tableStdNoHover tbody tr td {
	padding:0.4em;
}


.tableStdRowMarked {
	background-color:#C2E6FA;
}





/* Tabelle für ein Formular / ungerade Spalten für Namen */
.dataTable {
	table-layout:fixed;
	padding:0.5em 0;
	border-spacing:0;
	font-size:0.9em;
	text-align:left;
}
.dataTable tbody tr td {
	padding:0.2em 0.5em;
}
.dataTable tbody tr td:nth-child(odd) {
	font-weight:bold;
}
.dataTable tbody tr td:nth-child(odd).mandatory::after {
	content: ' *';
	color:#888888;
	font-weight:normal;
}



/* Tabelle für einen Info-Header / ungerade Spalten für Namen */
.infoTable {
	width:100%;
	table-layout:fixed;
	padding:0.2em 0;
	margin-bottom: 0.7em;
	border-spacing:0;
	border:solid 1px #CCCCCC;
	border-radius:5px;
	background:#F2F2F2;
	font-size:0.9em;
	text-align:left;
}
.infoTable tr td {
	padding:0.2em 0.5em;
}
.infoTable tr td:nth-child(odd) {
	color:#AAAAAA;
}



/* Context-Menu V1 */
.selectMenu {
	display:none;
	position:absolute;
	margin-left:-20px;
	margin-top:-20px;
	background:#EEEEEE;
	padding:0.2em;
	border:solid 1px #CCCCCC;
	border-radius:5px;
	z-index:1000;
	color:#000000;
	font-weight:normal;
	font-size:1em;
}
.selectMenu > div {
	padding:0.2em 1em;
	cursor:pointer;
	white-space: nowrap;
}
.selectMenu > div:hover {
	background:#DDDDDD;
}

/* Context-Menu V2 */
.menu {
	display:none;
	position: absolute;
	padding: 4px;
	margin: 0;
	border: 1px solid #CCCCCC;
	border-radius:5px;
	background: #fff;
	z-index: 100;
	box-shadow: 2px 2px 4px rgba(0,0,0,.2);
	opacity: 0;
	transform: translate(0, 15px) scale(1);
	transition: transform 0.05s ease-out, opacity 0.05s ease-out;
	pointer-events: none;
}
.menu-item {
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
	white-space: nowrap;
}
.menu-btn { 
	display: block;
	color: #000;
	font-family: 'tuitype', sans-serif;
	font-size: 13px;
	cursor: pointer;
	border: 1px solid transparent;
	white-space: nowrap;
	padding: 4px 35px 4px 5px;
}
button.menu-btn {
	background: none;
	line-height: normal;
	overflow: visible;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	width: 100%;
	text-align: left;
}
a.menu-btn {
	outline: 0 none;
	text-decoration: none;
}
.menu-icon {
	display:inline-block;
	vertical-align:top;
	width:30px;
	color:#70CBF4;
	font-size:15px;
}
.menu-text {
	display:inline-block;
	vertical-align:top;
}
.menu-btn .fa {
	position: absolute;
	left: 8px;
	top: 50%;
	transform: translateY(-50%);
}
.menu-item:hover > .menu-btn { 
	color: #000; 
	outline: none; 
	background-color: #eee;
}
.menu-item-disabled {
	opacity: .5;
	pointer-events: none;
}
.menu-item-disabled .menu-btn {
	cursor: default;
}
.menu-separator {
	display:block;
	margin: 7px 5px;
	height:1px;
	background-color: #ccc;
}
.menu-item-submenu::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	border: 5px solid transparent;
	border-left-color: #808080; 
}
.menu .menu {
	top: -5px;
	left: 99%;
}
.menu-show,
.menu-item:hover > .menu {
	opacity: 1;
	transform: translate(0, 0) scale(1);
	pointer-events: auto;
}




.remarkBox {
	border:solid 1px #CCCCCC;
	border-radius:5px;
	background:#F0FDF0;
	color:#666666;
	font-size:0.9em;
	margin:0.5em 0.5em;
	padding:0.5em 1em;
}
.remarkBoxWarning {
	border:solid 1px #CCCCCC;
	border-radius:5px;
	background:#FDE0E0;
	color:#666666;
	font-size:0.9em;
	margin:0.5em 0.5em;
	padding:0.5em 1em;
}




#tableKat {
	table-layout:fixed;
	width:100%;
	padding:0.5em;
	padding-bottom:0px;
	border-spacing:0em;
	font-size:0.9em;
	text-align:left;
	margin-bottom:1em;
}

#tableKat thead tr {
	background-color:#E1E1E1;
}

#tableKat thead tr:first-child {
	background-color:#C2E6FA;
}

#tableKat thead tr:nth-child(2) td {
	background-color:#FFFFFF;
}

#tableKat thead tr:nth-child(3) td {
	border:solid 1px #CCCCCC;
	font-weight:bold;
}

#tableKat thead tr td {
	padding:0.4em;
}

#tableKat tbody tr td {
	padding:0.4em;
	vertical-align:top;
}

#tableKat tbody tr:nth-child(even) td {
	background-color:#C2E6FA;
}



#invalidMail {
	text-decoration:underline;
	text-decoration-color: red;
	text-decoration-style: wavy;
}


#tableMenu {
	padding:0;
	border-spacing:0;
	font-size:1em;
	text-align:left;
}

#tableMenu tbody tr:hover {
	background:#EEEEEE;
}

#tableMenu tbody tr td {
	white-space:nowrap;
	padding:0.7em;
	cursor:pointer;
}




.katSelectBox {
	font-family:Tuitype, arial, helvetica; font-size:10pt; height:22px; width:100%; border:solid 1px #888888; border-radius:4px;
}
.katSelectBoxRed {
	font-family:Tuitype, arial, helvetica; font-size:10pt; height:22px; width:100%; border:solid 1px #888888; border-radius:4px; background-color:#8C0004; color:#FFFFFF;
}
.katSelectBoxGreen {
	font-family:Tuitype, arial, helvetica; font-size:10pt; height:22px; width:100%; border:solid 1px #888888; border-radius:4px; background-color:#AAD700;
}