:root {
    --color-op-blue-25: #B9E6FB;
    --color-op-blue-50: #6DD0F6;
    --color-op-blue: #009EE0;
    --color-op-black-10: #F2F2F2;
    --color-op-black-25: #C8C9CB;
    --color-op-black-50: #949599;
    --color-op-black-75: #646466;
    --color-op-black: #000000;
    --color-op-white: #FFFFFF;
    --color-op-gray: #949599;
    --color-op-yellow: #FFF044;
    --color-status-green: #1a8748;
    --color-status-green-bg: #eefaf1;
    --color-status-green-text: #1a8748;
    --color-status-red: #d92d20;
    --color-status-red-bg: #fdeceb;
    --color-status-red-text: #b42318;
    --color-status-yellow: #f0b100;
    --color-status-yellow-bg: #fff9c2;
    --color-status-yellow-text: #7a6100;
    --color-status-orange: #c2410c;
    --color-status-orange-bg: #fdeee6;
    --color-status-orange-text: #9a3412;
    --color-status-gray: #8a939c;
    --color-status-gray-bg: #f2f4f5;
    --color-status-gray-text: #5b6772;
    --color-status-blue: #009ee0;
    --color-status-blue-bg: #f0faff;
    --color-status-blue-text: #0079ab;
    --font-size-regular: 14px;
    --font-size-small: 12px;
    --font-size-big: 16px;
    --font-size-very-big: 20px;
    --font-size-huge: 30px;
}

html, body { height: 100%; margin: 0; font-size: var(--font-size-regular); }
a { color: inherit; }
a.simple { text-decoration: none; }
a.simple:hover { text-decoration: underline; }
pre { font-size: 13px; overflow-x: scroll !important; }

.normal { font-weight: normal; }
.bold { font-weight: 500; }
.big { font-size: var(--font-size-big); font-weight: bold; }
.very.big { font-size: var(--font-size-very-big);}
.huge { font-size: var(--font-size-huge); font-weight: bold; }
.small { font-size: var(--font-size-small); }
.uppercase { text-transform: uppercase; }

.gray { opacity: 0.5; }
.right.aligned { text-align: right; }
.inline { display: inline; }

.noborder { border: none; }
.border-right { border-right: 1px solid var(--color-op-black-25); }
.border-bottom { border-bottom: 1px solid var(--color-op-black-25); }

.flex { display: flex; }
.flex.gapped { gap: 0.5rem; }
.flex.gapped.wide { gap: 1rem; }
.flex.horizontal { flex-direction: row; }
.flex.vertical { flex-direction: column; }
.flex .flex-grow { flex-grow: 1; }

.list-item:not(:last-child) { border-bottom: 1px solid var(--color-op-black-25); }
.list-item { padding: 1rem 1.5rem 1rem 1.5rem; }

.button { border: 2px solid var(--color-op-blue) !important; background-color: var(--color-op-blue); color: var(--color-op-white); padding: 0.3rem 0.8rem !important; border-radius: 0.25rem; cursor: pointer; text-decoration: none; margin: 0 !important; font: inherit; font-weight: 500; line-height: normal; box-sizing: border-box; display: inline-block; vertical-align: middle; }
.button:hover { background-color: var(--color-op-white) !important; color: var(--color-op-blue) !important; }
.button.secondary { background-color: var(--color-op-blue-50); border: 2px solid var(--color-op-blue-50) !important; }
.button.small { border: 1px solid var(--color-op-blue) !important; padding: 0.2rem 0.6rem !important; font-size: 0.9rem; }
.button.light { background-color: var(--color-op-blue-50); border-color: var(--color-op-blue-50) !important; }

button.simple { border: none; padding: 0; margin: 0; }

ul.items { display: flex; list-style: none; padding: 0; gap: 0.5rem; margin: 0;}
ul.items li:not(:last-child)::after { content: "·"; margin-left: 0.5rem; }

table { width: 100%; border: 0; border-collapse: collapse; }
table th { background-color: var(--color-op-black-10); text-align: left; padding: 0.5rem 1.5rem 0.5rem 1.5rem; color: var(--color-op-black-75); font-weight: 500; text-transform: uppercase; border-bottom: 1px solid var(--color-op-black-25); font-size: var(--font-size-small); }
table td { padding: 0.5rem 1.5rem 0.5rem 1.5rem; border-bottom: 1px solid var(--color-op-black-25); }
table tr.noborder td { border: none; }
table.large td { padding-top: 1.5rem; padding-bottom: 1.5rem; }
table.dense td { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
table.inner { border: 1px solid var(--color-op-black-25); border-collapse: separate; border-spacing: 0; overflow: hidden; border-radius: 0.25rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }
table.inner th { padding: 0.5rem 0.75rem 0.5rem 0.75rem; }
table.inner td { border-bottom: none; padding: 1rem 0.75rem 1rem 0.75rem; }
table.inner tr:not(:last-child) td { border-bottom: 1px solid var(--color-op-black-25); }
table.separated tr:nth-child(even) td { background-color: var(--color-op-black-10); }
table.hoverable tr:hover td { background-color: var(--color-op-black-75); color: var(--color-op-white); }

.text.GREEN { color: var(--color-status-green-text); }
.text.YELLOW { color: var(--color-status-yellow-text); }
.text.ORANGE { color: var(--color-status-orange-text); }
.text.RED { color: var(--color-status-red-text); }
.text.BLUE { color: var(--color-status-blue-text); }
.text.GRAY { color: var(--color-status-gray-text); }

.opaque.GREEN { background-color: var(--color-status-green-bg); color: var(--color-status-green-text); }
.opaque.YELLOW { background-color: var(--color-status-yellow-bg); color: var(--color-status-yellow-text); }
.opaque.ORANGE { background-color: var(--color-status-orange-bg); color: var(--color-status-orange-text); }
.opaque.RED { background-color: var(--color-status-red-bg); color: var(--color-status-red-text); }
.opaque.BLUE { background-color: var(--color-status-blue-bg); color: var(--color-status-blue-text); }
.opaque.GRAY { background-color: var(--color-status-gray-bg); color: var(--color-status-gray-text); }

.cards.horizontal { display: flex; flex-direction: row; gap: 1rem; }
.cards.horizontal .card { flex: 1 1 0; min-width: 0; }
.card { padding: 1rem; border-radius: 0.25rem; overflow: hidden; }
.card.GREEN { border: 1px solid var(--color-status-green); box-shadow: 1px 2px 4px color-mix(in srgb, var(--color-status-green-text) 15%, transparent); }
.card.YELLOW { border: 1px solid var(--color-status-yellow); box-shadow: 1px 2px 4px color-mix(in srgb, var(--color-status-yellow-text) 15%, transparent); }
.card.ORANGE { border: 1px solid var(--color-status-orange); box-shadow: 1px 2px 4px color-mix(in srgb, var(--color-status-orange-text) 15%, transparent); }
.card.RED { border: 1px solid var(--color-status-red); box-shadow: 1px 2px 4px color-mix(in srgb, var(--color-status-red-text) 15%, transparent); }
.card.BLUE { border: 1px solid var(--color-status-blue); box-shadow: 1px 2px 4px color-mix(in srgb, var(--color-status-blue-text) 15%, transparent); }
.card.GRAY { border: 1px solid var(--color-status-gray); box-shadow: 1px 2px 4px color-mix(in srgb, var(--color-status-gray-text) 15%, transparent); }
.card.simple { padding: 0; }
.card.simple .card-header { font-weight: 500; text-transform: uppercase; }
.card.simple.GRAY .card-header { background-color: var(--color-op-black-10); color: var(--color-op-black-75); }
.card.disabled { opacity: 0.25; }
.card-header { padding: 0.5rem 1rem; font-weight: 500; border-bottom: 1px solid var(--color-status-gray); }
.card-title { font-size: 1.25rem; font-weight: bold; margin: 0 0 0.5rem 0; }
.card-title.small { font-size: 0.8rem; font-weight: 500; }
.card-content { padding: 1rem; }

.badges.horizontal { display: flex; flex-direction: row; gap: 0.5rem; }
.badges.vertical { display: flex; flex-direction: column; gap: 0.25rem; align-items: stretch; }
.badge { display: inline-block; padding: 0.25rem 0.75rem; border-radius: 0.25rem; font-weight: bold; font-size: var(--font-size-small); }
.badge.GREEN { background-color: var(--color-status-green-bg); color: var(--color-status-green-text); }
.badge.YELLOW { background-color: var(--color-status-yellow-bg); color: var(--color-status-yellow-text); }
.badge.ORANGE { background-color: var(--color-status-orange-bg); color: var(--color-status-orange-text); }
.badge.RED { background-color: var(--color-status-red-bg); color: var(--color-status-red-text); }
.badge.BLUE { background-color: var(--color-status-blue-bg); color: var(--color-status-blue-text); }
.badge.GRAY { background-color: var(--color-status-gray-bg); color: var(--color-status-gray-text); }
.badge.inverse.GREEN { background-color: var(--color-op-white); border: 1px solid var(--color-status-green); }
.badge.inverse.RED { background-color: var(--color-op-white); border: 1px solid var(--color-status-red); }
.badge.inverse.YELLOW { background-color: var(--color-op-white); border: 1px solid var(--color-status-yellow); }
.badge.inverse.ORANGE { background-color: var(--color-op-white); border: 1px solid var(--color-status-orange); }
.badge.inverse.BLUE { background-color: var(--color-op-white); border: 1px solid var(--color-status-blue); }
.badge.inverse.GRAY { background-color: var(--color-op-white); border: 1px solid var(--color-status-gray); }
.badge.small { font-size: 0.7rem; padding: 0.125rem 0.5rem; }

.panel { padding: 1rem; display: flex; flex-direction: column; gap: 1rem; }
.panel-title { font-weight: 500; }
.panel-conent { }

nav { background-color: var(--color-op-black); padding: 1rem 1.5rem; color: var(--color-op-white); display: flex; flex-direction: row; gap: 2rem; align-items: center; }
nav a { text-decoration: none; }
nav .title { font-weight: bold; }
nav .title .logo { background-color: var(--color-op-blue); min-width: 1rem; display: inline-block; margin-right: 0.5rem; border-radius: 4px; }
nav ul { flex-grow: 1; display: flex; list-style: none; margin: 0; padding: 0; gap: 1.5rem; }
nav ul li { color: var(--color-op-black-25); padding: 2px 4px 2px 4px; }
nav ul li.disabled { color: var(--color-op-black-75); }
nav ul li.selected { color: var(--color-op-white); font-weight: bold; border-bottom: 2px solid var(--color-op-yellow); }
nav .user { display: flex; align-items: center; }
nav .user-icon { font-size: 1.25rem; }
nav .user-name { margin-left: 0.5rem; }
nav .user-actions { font-size: 1.25rem; padding-left: 1rem; }

main { flex-grow: 1; overflow-y: auto; }
main .horizonal.sections { gap: 5rem; }
main section { margin: 1.5rem; }
main section:has(+ .sections) { margin-bottom: 0; }
main section + .sections section { margin-top: 0.5rem; }
main section.center { margin: 1.5rem auto; }
main section.max-800 { max-width: 800px; }
main section .section-header, main section .section-header-title { font-weight: 500; font-size: 1.1rem; }
main section .section-content.padded { padding-top: 1rem; }
main section .section-header-buttons { float: right; }
main section .section-footer { color: var(--color-op-black-50); }

.op-outer { box-sizing: border-box; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-op-black-10); padding: 1rem; }
.op-inner { flex: 1 1 auto; overflow: hidden; display: flex; flex-direction: column; min-height: 0; min-width: 0; background-color: var(--color-op-white); border-radius: 0.5rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); }

.op-title { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-op-black-25); color: var(--color-op-black-50); }
.op-title .breadcrumb { display: flex; list-style: none; margin: 0 1rem 0 0; padding: 0; gap: 0.5rem; }
.op-title .breadcrumb li:not(:last-child)::after { content: "/"; margin-left: 0.5rem; }
.op-title .breadcrumb a { text-decoration: none; }
.op-title .breadcrumb a:hover { text-decoration: underline; }
.op-title h1 { margin: 0; font-size: 1.4rem; color: var(--color-op-black); display: flex; align-items: center; gap: 1rem; }
.op-title .buttons { flex-grow: 1; text-align: right; }

.op-anlage-status { display: flex; flex-direction: row; padding: 1rem 1rem; gap: 1rem; align-items: center; border-bottom: 1px solid var(--color-op-black-25); }
.op-anlage-status .icon { font-size: 2rem; }
.op-anlage-status .description { flex-grow: 1; }
.op-anlage-status .description ul { display: flex; list-style: none; margin: 0; padding: 0; gap: 0.5rem; }
.op-anlage-status .description ul li:not(:last-child)::after { content: "·"; margin-left: 0.5rem; }
.op-anlage-status .description .title { display: flex; list-style: none; margin: 0; padding: 0; gap: 1.5rem; }
.op-anlage-status .description .messages { display: flex; gap: 0.5rem; }
.op-anlage-status .description .messages .message:not(:last-child)::after { content: "·"; margin-left: 0.5rem; }
.op-anlage-status .value { padding: 0 1rem 0 1rem; text-align: right; }
.op-anlage-status .value .value-wert-wert { font-weight: bold; font-size: 2rem; }
.op-anlage-status-details { display: flex; flex-direction: row; align-items: center; border-bottom: 1px solid var(--color-op-black-25); }
.op-anlage-status-details .details-item { border-right: 1px solid var(--color-op-black-25); flex-grow: 1; padding: 0.5rem 1rem; }
.op-anlage-status-details .details-item:not(:last-child) { border-right: 1px solid var(--color-op-black-25); }
.op-anlage-status-details .details-item.inactive { background-color: var(--color-op-white); opacity: 0.5; }
.op-anlage-status-details .details-item-title { }
.op-anlage-status-details .details-item-value { font-weight: bold; }

.op-form button { padding: 0.5rem 1rem; border-radius: 0.25rem; cursor: pointer; }
.op-form button.primary { background-color: var(--color-op-blue); color: var(--color-op-white); border: transparent; }
.op-form input[type=text], .op-form input[type=password] { border: 1px solid var(--color-op-black-25); border-radius: 0.25rem; }
.op-form input[type=text]:focus, .op-form input[type=password]:focus { outline: none; border: 1px solid var(--color-op-blue); background-color: #fafafa; }
.op-form input[type=text].YELLOW { background-color: var(--color-status-yellow-bg); color: var(--color-status-yellow-text); }
.op-form input[type=text].YELLOW:focus { border-color: var(--color-status-yellow); }
.op-form input[type=text].RED { background-color: var(--color-status-red-bg); color: var(--color-status-red-text); }
.op-form input[type=text].RED:focus { border-color: var(--color-status-red); }
.op-form input[type=checkbox] { accent-color: var(--color-op-blue); }
.op-form input[type=checkbox].large { transform: scale(1.5);accent-color: var(--color-op-blue); border: 2px solid var(--color-op-blue); }
.op-form input[type=checkbox].GREEN { accent-color: var(--color-status-green); }
.op-form input[type=checkbox].YELLOW { accent-color: var(--color-status-yellow); }
.op-form input[type=checkbox].ORANGE { accent-color: var(--color-status-orange); }
.op-form input[type=checkbox].RED { accent-color: var(--color-status-red); }
.op-form input[type=checkbox].BLUE { accent-color: var(--color-status-blue); }
.op-form .op-fields.vertical { display: flex; flex-direction: column; gap: 1rem; }
.op-form .op-field { display: flex; flex-direction: column; gap: 3px; }
.op-form .op-field.horizontal { flex-direction: row; gap: 0.5rem; align-items: center; }
.op-form .op-field label { display: block; font-size: 0.9rem !important; font-weight: normal; }
.op-form .op-field input { display: block; width: 100%; padding: 0.5rem; box-sizing: border-box; font-size: 1rem; }
.op-form .op-checkbox-field { border: 1px solid var(--color-op-black-25); border-radius: 0.5rem; padding: 0.5rem; white-space: nowrap; display: flex; align-items: center; gap: 0.5rem; }
.op-form .op-checkbox-field label { flex-grow: 1; }
.op-form .op-checkbox-field.GREEN { border-color: var(--color-status-green); }
.op-form .op-checkbox-field.GREEN input { accent-color: var(--color-status-green); }
.op-form .op-checkbox-field.GREEN:has(input:checked) { background-color: var(--color-status-green-bg); }
.op-form .op-checkbox-field.YELLOW { border-color: var(--color-status-yellow); }
.op-form .op-checkbox-field.YELLOW input { accent-color: var(--color-status-yellow); }
.op-form .op-checkbox-field.YELLOW:has(input:checked) { background-color: var(--color-status-yellow-bg); }
.op-form .op-checkbox-field.RED { border-color: var(--color-status-red); }
.op-form .op-checkbox-field.RED input { accent-color: var(--color-status-red); }
.op-form .op-checkbox-field.RED:has(input:checked) { background-color: var(--color-status-red-bg); }
.op-form .op-checkbox-field.ORANGE { border-color: var(--color-status-orange); }
.op-form .op-checkbox-field.ORANGE input { accent-color: var(--color-status-orange); }
.op-form .op-checkbox-field.ORANGE:has(input:checked) { background-color: var(--color-status-orange-bg); }
.op-form .op-checkbox-field.BLUE { border-color: var(--color-status-blue); }
.op-form .op-checkbox-field.BLUE input { accent-color: var(--color-status-blue); }
.op-form .op-checkbox-field.BLUE:has(input:checked) { background-color: var(--color-status-blue-bg); }

.op-message { border-radius: 0.25rem; padding: 1rem; }
.op-message-title { font-size: 1.25rem; font-weight: bold; margin: 0 0 0.5rem 0; }
.op-message.error { border: 1px solid var(--color-status-red); background-color: var(--color-status-red-bg); color: var(--color-status-red-text); }
.op-message.info { border: 1px solid var(--color-status-gray); background-color: var(--color-status-gray-bg); color: var(--color-status-gray-text); }

.op-ereignisse td { vertical-align: top; }
.op-ereignisse .column-quelle { width: 50px; }
.op-ereignisse .column-datum { width: 250px; }

#value-chart { background: #ffffff; width: 100%; box-sizing: border-box; }
#value-chart-container { padding: 1rem 1rem; width: 100%; box-sizing: border-box; }
#value-chart-container #value-chart-chart { width: 100%; height: auto; display: block; }
#value-chart-container #value-chart-tooltip { position: absolute; pointer-events: none; background: var(--color-op-blue); color: var(--color-op-white); font-size: 0.9rem; padding: 0.5rem; border-radius: 0.5rem; opacity: 0; transition: opacity 0.1s; }
#value-chart-container #value-chart-status { padding: 2rem; text-align: center; color: var(--color-op-black); font-size: 1rem; }
#value-chart-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--color-op-black-25); padding: 0.5rem 1rem; color: var(--color-op-black-50); }

#value-chart .value-chart-wert-line { fill: none; stroke: var(--color-op-black); stroke-width: 2px; }
#value-chart .value-chart-wert-gap-line { fill: none; stroke: var(--color-op-black-50); stroke-width: 1px; stroke-dasharray: 6 4; }
#value-chart .value-chart-threshold-line { fill: none; stroke-width: 1px; stroke-dasharray: 4 3; }
#value-chart .value-chart-threshold-area { opacity: 0.15; }
#value-chart .value-chart-axis text { font-size: 11px; fill: var(--color-op-black-75); }
#value-chart .value-chart-axis path, .value-chart-axis line { stroke: var(--color-op-black-50); }
#value-chart .value-chart-axis-unit { font-size: 11px; fill: var(--color-op-black-75); }
#value-chart .value-chart-grid line { stroke: var(--color-op-black-10); }
#value-chart .value-chart-grid path { stroke: none; }
#value-chart .value-chart-hover-line { stroke: var(--color-op-blue); stroke-width: 1px; stroke-dasharray: 3 3; }