body {
	padding-bottom: 2em;
}

/*
 * Layout
 */

div#header div#header-bar {
	font-size: 110%;
	position:  relative;
	margin:    0 0;
	padding:   0 1ex;
}

div#header div#logo-bar {
	position:      relative;
	display:       flex;
	border-radius: 0 0 15px 15px;
	background:    black linear-gradient(#F9F9F9 0%, #D8D8D8 55%, #E2E2E2 55%, #E2E2E2 73%, #AE0A2C 73%, #AE0A2C 92%, #D6D6D6 92%, #D6D6D6 96%, #AEB1B4 100%);
}

div#header div#logo-bar div#left-space {
	max-width: 12em;
}

div#header div#logo-bar div#left-space img#logo {
	flex-grow: 0;
	height:    8em;
}

div#header div#logo-bar div#left-space img#text {
	flex-grow: 0;
	height:    1.5em;
	position:  absolute;
	bottom:    1ex;
}

/*div#header div#logo-bar div#remaining-space {*/
/*	flex-grow:        1;*/
/*	height:           8em;*/
/*	border-radius:    0 0 15px 0;*/
/*	background-image: url(../acf-logo-fill.svg);*/
/*	background-size:  contain;*/
/*}*/

/*div#header div#logo-bar div#left-space {*/
/*	flex-grow:        0;*/
/*	height:           8em;*/
/*	border-radius:    0 0 0 15px;*/
/*	background-image: url(../acf-logo-fill.svg);*/
/*	!*background-image: url(../acf-logo-l.svg);*!*/
/*	background-size:  contain;*/
/*}*/

div#header div#navigation-box {
	padding: 1ex 1em;
}

div#header div#navigation-box a.navigation-button {
	padding:          3px 1em;
	text-decoration:  none;
	color:            inherit;
	border:           1px solid darkgray;
	border-radius:    5px;
	background-color: lightgray;
}

div#header div#navigation-box a.navigation-button:hover {
	border-color:     blue;
	background-color: lightblue;
}

div#header div.messages-box {
	margin:        0 1ex 3px;
	padding:       0 1ex;
	color:         black;
	border:        1px solid rgba(100, 100, 100, 0.5);
	border-radius: 8px;
}

div#header div#messages-messages {
	background-color: rgba(0, 0, 255, 0.4);
}


div#header div#messages-warnings {
	background-color: rgba(255, 128, 0, 0.4);
}

div#header div#messages-errors {
	background-color: rgba(255, 0, 0, 0.4);
}

div#header div#layout-actions-global {
	position:  absolute;
	right:     1em;
	bottom:    10px;
	max-width: 50%;
}

div#header div#layout-actions-global a.action-button {
	font-size:       80%;
	font-weight:     bold;
	text-decoration: none;
	color:           white;
}

div#header div#layout-actions-global img.icon {
	height:         0.8em;
	vertical-align: baseline;
}

div#header div#layout-actions-user {
	position:   absolute;
	right:      1em;
	bottom:     0.75em;
	max-width:  70%;
	text-align: right;
}

div#header div#layout-actions-user a.action-button {
	font-size:   80%;
	font-weight: bold;
	margin-left: 1em;
	color:       #FFFFFF;
}

div#header div#layout-actions-user a.action-button img.icon {
	height: 0.8em;
}

div#header div#layout-infos-user {
	position:    absolute;
	top:         0.75em;
	right:       1em;
	max-width:   29%;
	text-align:  right;
	line-height: initial;
}

div#header div#layout-infos-user span#user-info {
	font-size:   80%;
	font-weight: bold;
	color:       #AE0A2C;
}

div#header div#layout-infos-user span#user-info img#avatar {
	height:         0.8em;
	vertical-align: baseline;
}

div#header div#layout-infos-user a.action-button {
	font-size:   80%;
	font-weight: bold;
	margin-left: 1em;
	color:       #AE0A2C;
	display:     inline-block;
}

div#header div#layout-infos-user a.action-button img.icon {
	height:         0.8em;
	vertical-align: baseline;
}

div#header div#layout-title {
	font-size:           300%;
	font-weight:         Bold;
	position:            absolute;
	top:                 0;
	width:               100%;
	text-align:          center;
	color:               white;
	text-shadow:         black 1px 1px 5px;
	-webkit-text-stroke: 1px darkgray;
}

div#header div#header-bar div.status {
	font-size:   250%;
	font-weight: bold;
	position:    absolute;
	top:         1em;
	left:        55%;
	transform:   rotate(-20deg);
	text-shadow: black 1px 1px 5px;
}

div#header div#header-bar div.status.alpha {
	color: red;
}

div#header div#header-bar div.status.beta {
	color: orange;
}

div#layout-content-columns {
	display: flex;
	padding: 0 1em;
}

div#layout-content-columns div.layout-column-edge {
	flex-grow: 1;
	min-width: 20em;
}

div#layout-content-columns div#layout-column-center {
	flex-grow: 5;
}

div#layout-column-left {
	margin-left: 1em;
}

div#layout-column-right {
	margin-right: 1em;
}

div#footer {
	font-size:             90%;
	position:              fixed;
	bottom:                0;
	display:               grid;
	box-sizing:            border-box;
	width:                 100%;
	padding:               3px;
	border-top:            1px solid darkgray;
	background-color:      #E2E2E2;
	grid-gap:              2em;
	grid-template-columns: max-content auto auto max-content;
}

div#footer span#copyright {
	white-space: nowrap;
}

div#footer span#actions a {
	padding: 0 1ex;
}

div#footer a {
	text-decoration: none;
	color:           inherit;
}

div#footer a:hover {
	color: blue;
}

div#footer span#version-info {
	flex-grow:  1;
	text-align: right;
}

div#footer img.social-media-icon {
	max-height: 3ex;
	max-width:  3em;
}

div#layout-column-center div#content {
	margin: 0 1ex;
}

div.action-box a.action-button:hover {
	color:            lightskyblue;
	border:           none;
	background-color: transparent;
}

div.action-box a.action-button {
	white-space:     nowrap;
	text-decoration: none;
	border:          none;
}

/* Text */
div.floating-text {
	max-width: 60em;
}

/* Tabs */
div.tab-head {
	display:      none;
	max-width:    40em;
	margin-top:   1em;
	padding-left: 1em;
}

div.tab-head a {
	position:         relative;
	top:              0;
	padding:          2px 1em;
	text-decoration:  none !important;
	border:           1px solid darkgray;
	border-radius:    5px 5px 0 0;
	background-color: white;
}

div.tab-head a.active {
	z-index:       20;
	border-bottom: 1px solid #CCCCCC;
}

div.tab-body {
	position:      relative;
	padding:       1ex;
	border:        1px solid darkgrey;
	border-radius: 10px;
}

div.tab-body legend {
	display: none;
}

div.tab-body fieldset {
	margin: 0;
}

div.possible-tab-body {
	position: relative;
	padding:  1ex;
	border:   1px solid darkgrey;
}

/* fieldset */
fieldset.boxed {
	border:  2px groove darkgray;
	padding: 1ex;
}

fieldset.boxed legend {
	background-color: transparent;
	border:           none;
	width:            min-content;
	white-space:      nowrap;
	font-size:        initial;
	margin:           0 1em 0 0;
}

/*
 * Pages
 */

/* impressum */

div.address {
}

div.address div.name {
	font-weight: bold;
}

div.address div.city {
	display: flex;
	gap:     1ex;
}

div.address div.contacts {
	margin-top: 1em;
}

div.address div.contacts div {
	padding-left:        3ex;
	background-repeat:   no-repeat;
	background-position: 3px center;
	background-size:     auto 80%;
}

div.address div.contacts div.fon {
	background-image: url("/static-acf/icons/fon.svg");
}

div.address div.contacts div.fax {
	background-image: url("/static-acf/icons/fax.svg");
}

div.address div.contacts div.mail {
	background-image: url("/static-acf/icons/mail.svg");
}

div.credit-persons {
	display: flex;
	gap:     1em;
}

div.person-credit {
	max-width:     16em;
	padding:       3px;
	border:        1px solid darkgray;
	border-radius: 5px;
}

div.software-info div.package {
	margin-bottom: 1em;
}

div.software-info div.package div.package-infos {
	display:               grid;
	grid-gap:              0 1em;
	grid-template-columns: min-content auto;
}

div.software-info div.package div.package-infos div.title {
	font-weight: bold;
}

/*
 * Config view
 */

div#config-overview {
	display:  grid;
	grid-gap: 2em;
}

div#config-overview div.config-group div.title {
	font-size:     120%;
	font-weight:   bold;
	margin-bottom: 1ex;
	border-bottom: 1px solid darkgray;
}

div#config-overview div.config-group div.config-route img.icon {
	height: 1em;
}


div.action img.icon {
	height: 1em;
}


/*
 * common elements
 */

/* link button */

a.button {
	text-align:      center;
	padding:         3px 1ex;
	border:          1px solid darkgray;
	text-decoration: none !important;
	background:      #F0F0F0;
	display:         block;
}

a.button:hover {
	background: #F0F0FF;
}

/* Table with filled background*/

table.backfilled-display {
	border-spacing:  1px 1px;
	border-collapse: separate;
}

table.backfilled-display tr.header {
	background-color: #E0E0E0;
}

table.backfilled-display thead tr {
	background-color: #E0E0E0;
}

table.backfilled-display tr.body.even {
	background-color: #F0F0F0;
}

table.backfilled-display tr.body.odd {
	background-color: #F8F8F8;
}

table.backfilled-display tbody tr.even {
	background-color: #F0F0F0;
}

table.backfilled-display tbody tr.odd {
	background-color: #F8F8F8;
}

table.backfilled-display tr td {
	padding:        1px 2px;
	vertical-align: baseline;
}

table.backfilled-display tr th {
	padding: 2px;
}

table.backfilled-display tr td a.action img {
	height: 1.2em;
	margin: 1px;
}

table.backfilled-display tr td div.action {
	display: inline-block;
}

table.backfilled-display tr td div.action img {
	height: 1.2em;
	margin: 1px;
}


/* portlets */
div.portlet {
	min-width: 10em;
}

div.portlet div.title {
	font-weight: bold;
	position:    relative;
	text-align:  left;

}

div.portlet div.title a.more-link {
	font-size:   80%;
	font-weight: normal;
	position:    absolute;
	right:       3px;
	bottom:      3px;

}

div.portlet div.title div.actions {
	position:    absolute;
	right:       1px;
	bottom:      1px;
	width:       min-content;
	white-space: nowrap;
}

div.portlet div.title div.actions a img.icon {
	max-height:     2.5ex;
	max-width:      2.5ex;
	vertical-align: central;
}

div.portlet div.separator {
	font-weight: bold;
	position:    relative;
	text-align:  left;

}

div.portlet div.title div.portlet-actions {
	position: absolute;
	top:      0;
	right:    0;
}

div.portlet div.title div.portlet-actions a img.icon {
	max-height: 1.5em;
}

div.portlet div.title a.portlet-action img.icon {
	max-height: 1.5em;
}

div.layout-column-edge {
	font-size:      90%;
	display:        flex;
	flex-direction: column;
	max-width:      16em;
	gap:            1ex;
}

div.layout-column-edge div.portlet.boxed {
	border: 1px solid darkgray;
	/*border-radius: 4px 4px 0 0;*/
}

div.layout-column-edge div.portlet.boxed div.title {
	padding:          2px 1ex;
	color:            white;
	/*border-radius:    4px 4px 0 0;*/
	background-color: #AE0A2C;
}

div.layout-column-edge div.portlet.boxed div.title a.more-link {
	color: white;
}

div.layout-column-edge div.portlet.boxed div.separator {
	padding:          2px 1ex;
	/*border-radius:    4px 4px 0 0;*/
	background-color: lightgray;
}


div.layout-column-edge div.portlet.boxed div.content {
	padding: 3px;
}

div.layout-column-edge div.portlet.boxed div.content.even {
	background-color: #F0F0F0;
}

div.layout-column-edge div.portlet.boxed div.content.odd {
	background-color: #E0E0E0;
}


div.layout-banner {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(24em, 1fr));
	grid-gap:              1ex;
	margin-right:          1ex;
	margin-left:           1ex;
}

div#layout-banner-top div.portlet {
	margin-bottom: 1ex;
}

div#layout-banner-top div.portlet.boxed div.title {
	display: none;
}

div#layout-banner-bottom div.portlet {
	margin-top: 1ex;
}

div.layout-banner div.portlet.boxed div.title {
	font-size:     150%;
	font-weight:   bold;
	border-bottom: 1px solid darkgray;
}


div.layout-banner div.portlet.boxed div.title a.more-link {
	color: black;
}

div.layout-banner div.portlet.boxed div.separator {
	padding:       2px 1ex;
	font-weight:   bold;
	background:    whitesmoke;
	border-bottom: 1px solid lightgray;
}


div.layout-banner div.portlet.boxed div.content.even,
div.layout-banner div.portlet.boxed div.content.odd {
	padding:       3px;
	border-bottom: 1px solid lightgray;
}


div.banner-portlet {
	margin: 0 1ex 0 1ex;
}

div.banner-portlet.boxed {
	padding: 1ex;
	border:  1px solid darkgray;
	margin:  0;
}

/* object actions */

div#layout-context-action-bar {
	position:         relative;
	margin:           1ex;
	border-radius:    5px;
	background-color: #F0F0F0;
}

div#layout-context-action-bar div#object-info-line {
	z-index:          50;
	display:          flex;
	border-radius:    5px 5px 0 0;
	background-color: #E0E0E0;
}

div#layout-context-action-bar div#object-info-line div#context-title {
	font-size:        120%;
	font-weight:      bold;
	color:            white;
	border-radius:    5px 0 5px 0;
	background-color: #A0A0A0;
}

div#layout-context-action-bar div#object-info-line div#object-action-box {
	flex-grow:      1;
	padding:        3px 1ex;
	text-align:     left;
	vertical-align: baseline;
}

div#layout-context-action-bar div#context-status-box {
	font-size:        80%;
	position:         absolute;
	top:              -1.6em;
	right:            1em;
	padding:          3px 1em;
	border-radius:    5px;
	background-color: #E0E0E0;
}

div#layout-context-action-bar div#context-status-box a {
	display:         none;
	text-decoration: none;
	color:           inherit;
}

div#layout-context-action-bar div#context-status-box:hover {
	font-size: inherit;
	z-index:   100;
}

div#layout-context-action-bar div#context-status-box:hover div#status {
	font-weight: bold;
}

div#layout-context-action-bar div#context-status-box:hover a {
	display: block;
}

div#layout-context-action-bar div#context-status-box:hover a:hover {
	color: blue;
}

div#layout-context-action-bar div#context-title {
	font-weight: bold;
	padding:     3px 1ex 3px 1ex;
}

div#layout-context-action-bar a.action-button {
	display:        inline-block;
	padding:        3px 1ex;
	vertical-align: bottom;
	color:          inherit;
}

div#layout-context-action-bar a.action-button img.icon {
	height:         1em;
	max-width:      1.5em;
	vertical-align: baseline;
}

div#layout-context-action-bar a.action-button.active {
	font-weight: bold;
}

/* info display */

div.info-display {
	display:               grid;
	grid-gap:              0 1ex;
	grid-template-columns: min-content auto;
}

div.info-display div.title {
	font-weight: bold;
	white-space: nowrap;
}

div.info-display div img.icon {
	max-height:     1em;
	padding-top:    2px;
	vertical-align: baseline;
}


/*
 * Navigation tabs
 */

ul.navigation-tabs {
	display:         flex;
	margin:          0 0 1em;
	padding:         0;
	list-style-type: none;
	border-bottom:   1px solid darkgray;
}

ul.navigation-tabs li.tab {
	display: block;
	margin:  0 2px;
}

ul.navigation-tabs li.tab a {
	padding:          2px 1em;
	border:           2px solid darkgray;
	border-bottom:    none;
	border-radius:    5px 5px 0 0;
	background-color: #E0E0E0;
}

ul.navigation-tabs li.tab.active a {
	font-weight:      bold;
	background-color: transparent;
}

form.navigation-tabs {
	display:       none;
	margin-bottom: 3px;
}

/*
 breadcrumbs
 */

div#breadcrumbs {
	padding: 0 1ex;
}

div#breadcrumbs div {
	display: inline-block;
}

/*
 * Permissions
 */

/*
 * permission_list.pt
 */

div#permissions-list table a {
	text-decoration: none;
	color:           #3070B3;
}

/*
 * permissions_service.pt
 */

table.permission-matrix {
	margin-right:  -2em;
	margin-bottom: 2em;
}

table.permission-matrix th.admin-name {
	text-align:  left;
	white-space: nowrap;
}

table.permission-matrix th.admin-name img {
	vertical-align: middle;
}


table.permission-matrix thead td {
	position: relative;
	height:   16em;
}

table.permission-matrix tbody td {
	position:         relative;
	padding:          4px;
	background-color: lightgreen;
}

table.permission-matrix tbody th {
	position:         relative;
	width:            16em;
	padding:          4px;
	background-color: lightblue;
}

table.permission-matrix thead td span {
	position:      relative;
	top:           7em;
	left:          1ex;
	display:       block;
	width:         1.2em;
	-ms-transform: rotate(-45deg); /* IE 9 */
	transform:     rotate(-45deg);
	white-space:   nowrap;
}

table.permission-matrix tbody td.allperms {
	background-color: lightsalmon;
}

table.permission-matrix tbody th select {
	width: 100%;
}

@media screen and (max-width: 900px) {
	div#header div#layout-title {
		font-size: 250%;
	}

	div#header div#header-bar div#logo-bar div.status {
		font-size: 200%;
	}

	div#header div#layout-infos-user {
		top:       1ex;
		max-width: 31%;
	}

}


@media screen and (max-width: 825px) {
	div#header div#layout-title {
		font-size: 200%;
	}

	div#header div#header-bar div#logo-bar div.status {
		font-size: 150%;
	}

	div#header div#layout-infos-user {
		top:       0.5ex;
		max-width: 32%;
	}

}

@media screen and (max-width: 750px) {
	div#layout-content-columns {
		display: grid;
	}

	div#layout-content-columns div.layout-column-edge {
		order:     1;
		margin:    1em 0 0 0;
		min-width: initial;
		max-width: initial;
	}

	div#layout-content-columns div.layout-column-edge div.portlet.boxed {
		margin-top: 1em;
	}

	div#content {
		margin: initial !important;
	}

	div#header div#header-bar {
		font-size: 100%;
		position:  relative;
		margin:    0 0;
		padding:   0 1ex;
	}

	div#header div#logo-bar {
		position:   relative;
		display:    block;
		margin:     initial;
		height:     min-content;
		background: #F0F0F0;
	}

	div#header div#logo-bar div#left-space {
		width:         initial;
		display:       flex;
		background:    darkgray;
		border-radius: initial;
		height:        min-content;
	}

	div#header div#logo-bar div#left-space img#logo {
		flex-grow: 0;
		height:    2em;
		margin:    2px;
	}

	div#header div#logo-bar div#left-space img#text {
		flex-grow:  1;
		position:   inherit;
		height:     initial;
		bottom:     initial;
		margin:     1ex;
		max-height: 1.5em;
		min-height: 0.5em;
	}

	div#header div#logo-bar div#remaining-space {
		display: none;
	}

	div#header div#layout-title {
		font-size:           200%;
		font-weight:         initial;
		background:          #AE0A2C;
		text-shadow:         none;
		-webkit-text-stroke: initial;
	}

	div#header div#header-bar div#logo-bar div.status {
		position:    absolute;
		top:         3em;
		right:       1em;
		font-size:   inherit;
		text-shadow: none;
	}

	div#header div#header-bar div#logo-bar div {
		position:  inherit;
		max-width: none;
		top:       initial;
		bottom:    initial;
		left:      initial;
		right:     initial;
	}

	div#header div#layout-infos-user {
		text-align: center;
	}

	div#header div#layout-actions-user {
		text-align: center;
	}

	div#header div#layout-infos-user a.action-button {
		font-weight: normal;
		margin-left: 1ex;
	}

	div#header div#layout-actions-global {
		text-align:       center;
		border-radius:    0 0 5px 5px;
		background-color: darkgray;
		color:            white;
		font-weight:      bold;
	}

	div#header div#layout-actions-global a.action-button {
		color:       inherit;
		font-weight: normal;
	}

	div#header div#navigation-box a.navigation-button {
		padding: 1px 2px;
		margin:  1px;
		display: inline-block;
	}


	div#footer span#version-info {
		display: none;
	}

	div#footer span#copyright {
		display: none;
	}

	div#layout-banner-top {
		margin: inherit;
	}

	ul.navigation-tabs {
		display: none;
	}

	form.navigation-tabs {
		display: block;
	}
}