body {
    padding-bottom: 2em;
}

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

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

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

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

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

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

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

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

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

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-weight:     bold;
    color:           white;
    text-decoration: none;
    font-size:       80%;
}

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;
    text-align: right;
    max-width:  70%;
}

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

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

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

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

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

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

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

div#header div#layout-title {
    position:            absolute;
    top:                 0;
    font-weight:         Bold;
    font-size:           300%;
    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: 18em;
    max-width: 26em;
}

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 {
    display:          flex;
    gap:              1em;
    box-sizing:       border-box;
    background-color: #E2E2E2;
    position:         fixed;
    bottom:           0;
    border-top:       1px solid darkgray;
    font-size:        90%;
    padding:          3px;
    width:            100%;

}

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#layout-column-center div#content {
    margin: 0 1ex;
}

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

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

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

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

div.tab-head a.active {
    z-index:       20;
    border-bottom: 1px solid #CCCCCC;
    background:    #F8F8F8 linear-gradient(#F8F8F8, #CCCCCC);
}

div.tab-body {
    background:    #F8F8F8 linear-gradient(5deg, #CCCCCC, #F8F8F8, #CCCCCC);
    border:        1px solid darkgrey;
    border-radius: 10px;
    padding:       1ex;
    position:      relative;
    max-width:     40em;
}

/* 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-size:     auto 80%;
    background-repeat:   no-repeat;
    background-position: 3px center;
}

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;
    border:        1px solid darkgray;
    border-radius: 5px;
    padding:       3px;
}

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

/*
 * common elements
 */

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

div.layout-column-edge div.portlet.boxed {
    min-width:     10em;
    border:        1px solid darkgray;
    border-radius: 5px;
}

div.layout-column-edge div.portlet.boxed div.title {
    padding:          2px 1ex;
    background-color: #AE0A2C;
    color:            white;
    text-align:       left;
    font-weight:      bold;
    border-radius:    5px 5px 0 0;
    position:         relative;
}

div.layout-column-edge div.portlet.boxed div.title a.more-link {
    font-size:   80%;
    position:    absolute;
    right:       3px;
    bottom:      3px;
    color:       white;
    font-weight: normal;
}

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-column-edge div.portlet.boxed div.title div.portlet-actions {
    position: absolute;
    right:    0;
    top:      0;
}

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

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

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

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

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

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

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

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 {
    padding:     3px 1ex 3px 1ex;
    font-weight: bold;
}

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

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

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;
}


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

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

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


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