@import url("tags.css");

body
{
	margin-top  : 0;
	font-family : 'Open Sans', sans-serif;
	font-size   : 12pt;
	color       : #444444;
}

*
{
	font-family : 'Open Sans', sans-serif;
}

.notice
{
	font-size : 0.8em;
}


.panel
{
	border         : 1px solid #c9c9c9;
	overflow       : hidden;
	display        : flex;
	flex-direction : column;
}

.panel > .header
{
	padding          : 8px;
	background-color : #eaeaea;
	border-bottom    : 1px solid #c9c9c9;
	font-size        : 14pt;
	flex-grow        : 0;
}

.panel > .body
{
	padding          : 10px;
	background-color : #ffffff;
	flex-grow        : 1;
}

.panel > .footer
{
	padding          : 8pt;
	background-color : #eaeaea;
	text-shadow      : 1px 1px 1px rgba(0, 0, 0, 0.1);
	border-top       : 1px solid #c9c9c9;
	display          : flex;
	color            : #777777 !important;
	flex-grow        : 0;
	align-items      : center;
}

.panel > .footer > span, .panel > .footer > a
{
	color : #777777;
}


input[type="text"], input[type="password"], textarea
{
	padding          : 4px;
	font-size        : 12pt;
	border           : 1px solid #d1d1d1;
	background-color : white;
	box-sizing       : border-box;
	height           : 22pt;
}

input[type="text"]::placeholder, input[type="password"]::placeholder, textarea::placeholder
{
	color     : rgba(0, 0, 0, 0.44);
	font-size : 90%;
}

textarea[readonly], input[type="text"][readonly], input[type="text"][disabled]
{
	background-color : #e8e8e8;
	color            : #808080;
}

select
{
	xpadding         : 4px;
	font-size        : 12pt;
	border           : 1px solid #d1d1d1;
	background-color : white;
	box-sizing       : border-box;
	height           : 22pt;
}

select[disabled]
{
	background-color : #e8e8e8;
	color            : #808080;
}

.lookupTextbox
{
	background-image    : url("/img/search.svg");
	background-repeat   : no-repeat;
	background-position : 99%;
	background-size     : 1.2em;
	cursor              : pointer;
	background-color    : white !important;
	color               : initial !important;
}

.lookupTextbox[disabled]
{
	background-color : #e8e8e8 !important;
	color            : #808080 !important;
}

input[type="button"], button
{
	padding          : 6px 12px;
	font-size        : 12pt;
	border           : none;
	color            : #505050;
	transition       : all 0.3s ease;
	background-color : #c9c9c9;
}

input[type="button"].blue, button.blue
{
	background-color : #5c98ff;
	color            : white;
}

input[type="button"].yellow, button.yellow
{
	background-color : #e2c43d;
	color            : white;
}

input[type="button"].red, button.red
{
	background-color : #ff5b5b;
	color            : white;
}

input[type="button"].hotred, button.hotred
{
	background-color : #e91e63;
	color            : white;
}

input[type="button"].green, button.green
{
	background-color : #27a724;
	color            : white;
}

input[type="button"]:hover, button:hover
{
	opacity    : 0.8;
	transition : all 0.1s ease;
}

input[type="button"][disabled], button[disabled]
{
	opacity : 0.5 !important;
	cursor  : not-allowed;
}

a, a:visited
{
	color : #1f41ff;
}

a:hover
{
	color : red;
}

#infobox
{
	z-index       : 9999;
	text-align    : center;
	box-shadow    : rgba(0, 0, 0, 0.2) 3px 3px 3px 0;
	bottom        : 20px;
	position      : fixed;
	padding       : 4px;
	border-radius : 2px;
	font-weight   : 300;
	min-height    : 30px;
	font-size     : 1em;
	display       : block;
	cursor        : pointer;
	box-sizing    : border-box;
	animation     : fadeout 600ms ease-in-out both;
	min-width     : min-content;
	left          : 10px;
	right         : 10px;
	max-width     : max-content;
	margin        : 0 auto;
}

@keyframes fadein
{
	from
	{
		opacity    : 0;
		visibility : hidden;
	}
	to
	{
		opacity    : 1;
		visibility : visible;
	}
}

@keyframes fadeout
{
	from
	{
		opacity    : 1;
		visibility : visible;
	}
	to
	{
		opacity    : 0;
		visibility : hidden;
	}
}

#infobox.visible
{
	animation : fadein 200ms ease-in-out both;
}

#infobox.good
{
	color            : #ffffff;
	background-color : #4ba04b;
	border           : 1px solid #86a57b;
}

#infobox.bad
{
	background-color : #d64949;
	border           : 1px solid #daa6a6;
	color            : #ffffff;
}


.main_title
{
	font-size   : 2em;
	text-align  : center;
	margin      : 20px;
	font-weight : 300;
}


.mytable
{
	width           : 100%;
	border-collapse : collapse;
}

.mytable th
{
	background-color : #eaedf7;
	padding          : 2px 10px;
	text-align       : left;
}

.mytable td
{
	padding     : 4px 10px;
	line-height : 12pt;
	height      : 20px;
}

.mytable tr:nth-child(even)
{
	background-color : #f7f7f7;
}

.mytable tr:nth-child(odd)
{

}

.mytable td.right
{
	text-align    : right;
	padding-right : 30px;
}

.mytable tr.deleted
{
	background-color : #ffbcbb !important;
}

.mytable tr:hover td
{
	background-color : #e6e6e6;
	/*border-top       : 1px solid #b4ffc3;*/
}

.mytable tr.deleted:hover td
{
	background-color : #ff9fa7 !important;
}

.mytable tr:not(:first-child).p1 td
{
	border-top : 1px solid #a1b2ce;
}

.gridfooter
{
	display : flex;
}

.gridfooter > *
{
	margin-left : 5px;
}

.gridfooter #divErgebnisse
{
	margin-right : auto;
	padding-top  : 4px;
}

.gridfooter #divSeite
{
	width          : 200px;
	text-align     : center;
	vertical-align : middle;
	padding-top    : 4px;
}


.page_caption
{
	font-size   : 1.6em;
	font-weight : 300;
	text-align  : center;
}


.block_container
{
	display         : flex;
	justify-content : center;
	width           : 100%;
	xflex-wrap      : wrap;
	flex-direction  : column;
	align-items     : center;
	xborder         : 1px dotted red;
}

.client_block
{
	font-size            : 1.2em;
	color                : #969696;
	font-weight          : 300;

	background-color     : #f4f4f4;
	min-height           : 60px;
	padding              : 10px 10px 10px 50px;
	margin               : 10px 0;

	position             : relative;

	xtransition-duration : 0.3s;
	xtransition-property : d;
	xbox-shadow          : 1px 1px 2px 0 #c4c4c4;
	max-width            : 90% !important;
	width                : 800px;
	box-sizing           : border-box;
	flex-grow            : 1;
	border               : 1px solid #eeeeee;
}

.client_block:hover
{
	xtransition-duration : 0s;
	xbackground-color    : #efefef;
	xbox-shadow          : 2px 2px 2px 0 #c4c4c4;
	xborder              : 1px solid #ff8181;
}


.client_block > .icon
{

	position       : absolute;
	line-height    : 42px;
	left           : 10px;
	vertical-align : bottom;
}

.client_block > .link
{
	xfont-size : 1em;
}

.client_block > .small
{
	font-size : 0.8em;
}

.info_block
{
	xmargin-left      : 2em;
	text-indent       : -4px;

	font-size         : 0.8em;
	color             : #969696;
	font-weight       : 300;

	xbackground-color : #ebfff5;
	xmin-height       : 70px;
	padding           : 4px 4px 4px 15px;
	margin            : 10px 0;
	line-height       : 110%;

	position          : relative;

	xbox-shadow       : 1px 1px 2px 0 #c4c4c4;
	max-width         : 90% !important;
	width             : 500px;
	box-sizing        : border-box;
	flex-grow         : 1;
	border            : 1px solid #eeeeee;
}


.edit_block
{
	font-size        : 1.2em;
	color            : #555555;
	font-weight      : 300;

	background-color : #f4f4f4;
	min-height       : 70px;
	padding          : 10px 10px 10px 10px;
	margin           : 10px 0;

	position         : relative;

	max-width        : 90% !important;
	width            : 800px;
	box-sizing       : border-box;
	flex-grow        : 1;
	border           : 1px solid #eeeeee;
}

.edit_block.wide
{
	width : 1800px;
}

.edit_block .headline
{
	font-size      : 1.0em;
	font-weight    : 500;
	border-bottom  : 1px solid #d9d9d9;
	padding-bottom : 0.2em;
	margin-bottom  : 0.2em;
}

.edit_block.with_icon
{
	padding : 10px 10px 10px 50px;
}

.edit_block.green
{
	background-color : #ebffe6;
	border-color     : #b7ecb0;
}

.edit_block.green *:not(.icon)
{
	color : #3f752b;
}


.edit_block > .icon
{

	position       : absolute;
	line-height    : 42px;
	left           : 10px;
	vertical-align : bottom;
}

.edit_block > .footer
{
	xbackground-color : #88aa11;
	display           : flex;
	align-items       : center;
	justify-content   : space-between;
	padding-top       : 10px;
	xposition         : absolute;
	xleft             : 0;
	xright            : 0;
}

.edit_block .small
{
	font-size : 0.8em;
}

.edit_block .verysmall
{
	font-size : 0.6em;
}

.edit_block > .buttons
{
	display         : flex;
	justify-content : space-between;
	padding-top     : 10px;
	border-top      : 1px solid #e7e7e7;
}

.edit_block > .buttons > button
{
	font-size : 0.7em !important;
}

.button_block
{
	font-size        : 1.2em;
	color            : #969696;
	font-weight      : 300;

	background-color : #f4f4f4;
	min-height       : 20px;
	padding          : 10px;
	margin           : 10px 0;

	position         : relative;

	width            : 800px;
	max-width        : 90% !important;
	box-sizing       : border-box;
	flex-grow        : 1;
	border           : 1px solid #eeeeee;
	display          : flex;
	justify-content  : space-between;
	align-items      : center;

}

.button_block button
{
	margin : 0 4px;
}

.button_block button.right
{
	margin-left : auto !important;
}


.link_block
{
	font-size           : 1.2em;
	color               : #969696;
	font-weight         : 300;

	background-color    : #f4f4f4;
	min-height          : 70px;
	padding             : 10px;
	margin              : 10px 0;

	position            : relative;

	transition-duration : 0.3s;
	transition-property : color, background-color;
	box-shadow          : 1px 1px 2px 0 #c4c4c4;
	max-width           : 100%;
	width               : 400px;
	box-sizing          : border-box;
	flex-grow           : 1;
	border              : 1px solid #eeeeee;
}


.link_block > .icon
{

	position        : absolute;
	xline-height    : 42px;
	right           : 4px;
	top             : 4px;
	xvertical-align : bottom;
}

.link_block > .link > a
{
	xfont-size : 0.8em;
	color      : #7298ff;
}

.link_block > .link > a:visited
{
	xfont-size : 0.8em;
	color      : #7298ff;
}

.link_block > .small
{
	font-size : 0.7em;
}

.link_block > .bold
{
	font-weight : bold;
	color       : #000000;
}


.multiselect
{
	display   : flex;
	flex-wrap : wrap;
}

.multiselect > div
{
	background-color : #d3d3d3;
	color            : #8e8e8e;
	margin           : 2px;
	cursor           : pointer;
	border-radius    : 3px;
	padding          : 1px 8px;
}

.multiselect > div.selected.purple
{
	background-color : #ae23ff;
	color            : white;
}


.multiselect > div.selected.yellow
{
	background-color : #6c81ff;
	color            : white;
}

.multiselect > div.selected.green
{
	background-color : #4caf50;
	color            : white;
}

.multiselect > div.selected.red
{
	background-color : #fe3076;
	color            : white;
}


.greylink, .greylink:visited
{
	color           : #555555;
	cursor          : pointer;
	text-decoration : none;
}

.greylink:hover
{
	color : #ff5555;
}

.backlink, .backlink:visited
{
	color           : #555555;
	cursor          : pointer;
	text-decoration : none;
	padding         : 0 10px;
}

.backlink:hover
{
	color : #ff5555;
}


.detail_div
{
	xborder        : 1px solid red;
	display        : flex;

	flex-direction : row;
	flex-wrap      : wrap;
}

.detail_div > .item
{
	xborder        : 2px dotted red;
	display        : flex;
	flex-direction : column;
	flex-basis     : 200px;
	padding        : 2px;
}

.detail_div > .item.grow
{
	flex-grow : 1;
}

.detail_div > .break, .detail_div > .item.wide
{
	flex-basis : 100%;
}

.detail_div *
{
	xwidth     : 100%;
	box-sizing : border-box;
	xborder    : 1px dotted green;
}

.detail_div input[type='checkbox']
{
	width  : 16px !important;
	height : 16px !important;;
}

.detail_div .item > *
{
	width : 100%;
}

.detail_div .hint
{
	font-size : 0.6em;
}

.flex_row
{
	display        : flex;
	flex-direction : row !important;
}

.flex_row > *
{
	xwidth : initial !important;
}

.lookup_icon
{
	margin : 0 6px;
	cursor : pointer;
}

.lookup_icon:hover
{
	color : #767676;
}


.ajax_loader
{
	display : none;
}

.center
{
	display    : block;
	text-align : center;
}


.small
{
	font-size : 0.8em;
}


.verysmall
{
	font-size : 0.6em;
}

.service_month
{
	xbackground-color : #00000012;
	xfont-size        : 1.1em;
	xborder-radius    : 1px;
	text-align        : center;
	xfont-weight      : 600;
}


.ampel
{
	background-color : #00000012;
	xborder          : 1px dashed violet;

	height           : 12px;
	padding          : 1px 3px;
	display          : inline-flex;
	xwidth           : fit-content;
	justify-content  : space-around;
	align-items      : center;
	border-radius    : 1px;
}

.ampel.vertical
{

	width          : fit-content;
	padding        : 1px 3px;
	flex-direction : column;
	height         : fit-content;
}

.ampel.vertical.xl
{

}

.ampel.xl > *
{
	font-size : 14px !important;
	margin    : 0;
}

.ampel > *
{
	font-size    : 10px !important;
	margin-right : 1px;
	xbox-shadow  : 0px 0px 1px rgba(0, 0, 0, 0.6);
}

.ampel > *.grey
{
	color : #c5c0c0;
}

.ampel > *.green
{
	color : #00ad0b;
}

.ampel > *.yellow
{
	color : #ffc14b;
}

.ampel > *.red
{
	color : #ff4448;
}

.ampel > *.white
{
	color : #ffffff;
}


.table
{
	display : table;
	xborder : 1px solid #8d8d8d50;
}

.table > *
{
	display : table-row;
	xborder : 1px dashed violet;
}

.table > * > *
{
	display : table-cell;
	padding : 0.1em 0.2em;
	xborder : 1px dotted green;
}

.table > *:nth-child(even)
{
	background-color : #d9d9d950;
}

.table > *:nth-child(odd)
{
	background-color : #eaeaea50;
}

.table > * > *.column
{
	padding-bottom   : 0.3em;
	xborder          : 1px dotted orange;
	font-size        : 0.75em;
	xtext-align      : center;
	font-weight      : bold;
	background-color : #8d8d8d50 !important;
}

.hint
{
	font-size : 0.6em;
}

.pre
{
	white-space : pre-wrap;
}