/* Colors */
:root {
/* Colors */
--gradient-brand-primary: linear-gradient(135deg, var(--color-brand-primary-100), #0E6BA1);
--gradient-brand-secondary: linear-gradient(135deg, #35556E, #223747);
--color-white: #fff;
--color-black-100: #000;
--color-black-40: rgba(0,0,0,.4);
--color-black-15: rgba(0,0,0,.15);
--color-brand-primary-100: rgba(17,125,186,1);
--color-brand-primary-25: rgba(17,125,186,.25);
--color-brand-primary-5: rgba(17,125,186,.05);
--color-brand-secondary-100: rgba(53,85,108,1);
--color-brand-secondary-25: rgba(53,85,108,.25);
--color-brand-secondary-5: rgba(53,85,108,.05);
--color-neutral-100: rgba(51,51,51,1);
--color-neutral-50: #494E50;
--color-neutral-25: rgba(51,51,51,.25);
--color-neutral-10: rgba(51,51,51,.1);
--color-neutral-10-opaque: #eaeaea;
--color-neutral-5: rgba(51,51,51,.05);
--color-success-100: rgba(37,115,16,1);
--color-success-20: rgba(37,115,16,.25);
--color-success-5: rgba(37,115,16,.05);
--color-help-100: rgba(235,211,20,1);
--color-help-50: rgba(235,211,20,.5);
--color-help-25: rgba(235,211,20,.25);
--color-help-25-opaque: #faf4cd;
--color-help-5: rgba(235,211,20,.05);
--color-warning-100: rgba(245,114,60,1);
--color-warning-25: rgba(245,114,60,.25);
--color-warning-5: rgba(245,114,60,.05);
--color-danger-100: rgba(201,20,50,1);
--color-danger-25: rgba(201,20,50,.25);
--color-danger-5: rgba(201,20,50,.05);
--color-mode-100: rgba(155,80,215,1);
--color-mode-25: rgba(155,80,215,.25);
--color-mode-5: rgba(155,80,215,.05);
--color-stepper: rgba(47, 72, 90, 1);
--status-indicator-bg-open: rgba(250, 244, 196, 1);
--button-icon-close: url('icon-close.0606d696ac13a802.svg');
--button-icon-info: url('help_i_mitKreis.ff4a6d31450b216e.svg');
}
color {
aspect-ratio: 1/1;
display: flex;
border-radius: var(--roundness-1);
padding: var(--space-l);
font-size: 0.7em;
font-size: 0.7em;
width: 12%;
}
gradient {
display: flex;
padding: 1em;
margin-bottom: 1em;
border-radius: var(--roundness-1);
padding: var(--space-l);
font-size: 0.7em;
}
.gradient-brand-primary {
background-image: var(--gradient-brand-primary);
color: white;
}
.gradient-brand-secondary {
background-image: var(--gradient-brand-secondary);
color: white;
}
.color-black-100 {
background-color: var(--color-black-100);
color: var(--color-white);
}
.color-black-40 {
background-color: var(--color-black-40);
color: var(--color-black);
}
.color-black-15 {
background-color: var(--color-black-15);
color: var(--color-black);
}
.color-brand-primary-100 {
background-color: var(--color-brand-primary-100);
color: var(--color-white);
}
.color-brand-secondary-100 {
background-color: var(--color-brand-secondary-100);
color: var(--color-white);
}
.color-neutral-100 {
background-color: var(--color-neutral-100);
color: var(--color-white);
}
.color-success-100 {
background-color: var(--color-success-100);
color: var(--color-white);
}
.color-help-100 {
background-color: var(--color-help-100);
color: var(--color-black-100);
}
.color-warning-100 {
background-color: var(--color-warning-100);
color: var(--color-black-100)
}
.color-danger-100 {
background-color: var(--color-danger-100);
color: var(--color-white);
}
.color-mode-100 {
background-color: var(--color-mode-100);
color: var(--color-white);
}
.color-brand-primary-25 {
background-color: var(--color-brand-primary-25);
}
.color-brand-secondary-25 {
background-color: var(--color-brand-secondary-25);
}
.color-neutral-10 {
background-color: var(--color-neutral-10);
}
.color-success-20 {
background-color: var(--color-success-20);
}
.color-help-25 {
background-color: var(--color-help-25);
}
.color-help-25-opaque {
background-color: var(--color-help-25-opaque);
}
.color-warning-25 {
background-color: var(--color-warning-25);
}
.color-danger-25 {
background-color: var(--color-danger-25);
}
.color-mode-25 {
background-color: var(--color-mode-25);
}
.color-brand-primary-5 {
background-color: var(--color-brand-primary-5);
}
.color-brand-secondary-5 {
background-color: var(--color-brand-secondary-5);
}
.color-neutral-5 {
background-color: var(--color-neutral-5);
}
.color-success-5 {
background-color: var(--color-success-5);
}
.color-help-5 {
background-color: var(--color-help-5);
}
.color-warning-5 {
background-color: var(--color-warning-5);
}
.color-danger-5 {
background-color: var(--color-danger-5);
}
.color-mode-5 {
background-color: var(--color-mode-5);
}
.color-neutral-10-opaque {
background-color: var(--color-neutral-10-opaque);
}
/* Typo */
:root {
font-family: Roboto, sans-serif !important;
line-height: 1.7;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
--base-font-size: 1em; /* fallback */
--base-font-size: clamp(0.85em, 1.75vw, 1.2em);
}
body {
font-size: var(--base-font-size);
}
.heading-1 {
color: var(--color-brand-secondary-100);
font-size: 2.25em;
font-weight: 500;
margin-bottom: 0;
}
.heading-2 {
color: var(--color-brand-primary-100);
font-size: 1.625em;
font-weight: 500;
margin-bottom: 0;
}
.heading-3 {
color: var(--color-brand-secondary-100);
font-size: 1.375em;
font-weight: 500;
margin-bottom: 0;
}
.heading-4 {
font-size: 1.25em;
font-weight: 500;
margin-bottom: 0;
}
.heading-5 {
color: var(--color-brand-secondary-100);
font-size: 1.125em;
font-weight: 500;
margin-bottom: 0;
}
.heading-6 {
color: var(--color-brand-primary-100);
font-size: 1em;
font-weight: 500;
margin-bottom: 0;
}
.heading-7 {
color: var(--color-black-100);
font-size: 1em;
font-weight: 600;
margin-bottom: 0;
}
/* Shapes */
:root {
--roundness-1: 4px;
--roundness-2: 8px;
}
shape {
width: 5em;
aspect-ratio: 1/1;
display: flex;
background: black;
color: white;
}
.roundness-1 {
border-radius: var(--roundness-1);
}
.roundness-2 {
border-radius: var(--roundness-2);
}
/* Elevation */
:root {
--elevation-0: 0 0 0 1px var(--color-brand-primary-1);
--elevation-1: 0 1px 4px rgba(0,0,0,0.22);
--elevation-1-hover: 0 2px 5px rgba(0,0,0,0.15);
--elevation-2: 0 3px 6px rgba(0,0,0,0.22);
--elevation-3: 0 7px 16px rgba(0,0,0,0.22);
--elevation-4: 0 7px 36px rgba(0,0,0,0.22);
}
elevation {
background: white;
width: 5em;
aspect-ratio: 1/1;
margin-right: 1em;
border-radius: var(--roundness-1);
padding: var(--space-xs);
}
.elevation-0 {box-shadow: var(--elevation-0);}
.elevation-1 {box-shadow: var(--elevation-1);}
.elevation-2 {box-shadow: var(--elevation-2);}
.elevation-3 {box-shadow: var(--elevation-3);}
.elevation-4 {box-shadow: var(--elevation-4);}
/* Spacing */
:root {
--space-xxs: calc(1em * 0.25); /* 4px */
--space-xs: calc(1em * 0.5); /* 8px */
--space-s: calc(1em * 0.75); /* 12px */
--space: 1em;
--space-l: calc(1em * 1.5); /* 24px */
--space-xl: calc(1em * 2); /* 32px */
--space-xxl: calc(1em * 3); /* 48px */
}
space {
background: var(--color-black-100);
display: inline-block;
aspect-ratio: 1/1;
}
.space-xxs {width: var(--space-xxs);}
.space-xs {width: var(--space-xs);}
.space-s {width: var(--space-s);}
.space {width: var(--space);}
.space-l {width: var(--space-l);}
.space-xl {width: var(--space-xl);}
.space-xxl {width: var(--space-xxl);}
/* ========
Links general
======== */
a {
color: var(--color-brand-primary-100);
position: relative;
top: 0;
transition: .1s ease-in-out;
}
a:hover {
text-decoration: none;
}
a:hover span {
text-decoration: none;
}
a:focus:not(:focus-visible) {
top: 1px;
}
/* detect links opening in new tab (target="_blank") */
a[target="_blank"]::before {
content: '';
display: inline-block;
vertical-align: baseline;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
/* neu dazu, um das „Hochstellen“ zu fixen: */
margin-top: 0; /* überschreibt margin-top aus dem Designsystem */
align-self: baseline; /* überschreibt align-self: first baseline */
}
a[target="_blank"] {
display: inline; /* statt inline-flex */
}
.link--more-info::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
}
/* detect external url */
/*
a:not([href^="https://lff.bayern.de"])::before {
background:lime;
}
*/
/* ========
Links with icon
======== */
.link-with-icon {
display: grid;
grid-template-columns: 1.5em 1fr;
grid-gap: var(--space-xs);
}
.link-with-icon::before {
content: '';
height: 1.5em;
width: 1.5em;
margin-top: 0.1em;
background: var(--color-brand-secondary-25);
display: inline-block;
align-self: baseline;
}
/* ========
CARD
======== */
.card {
margin: 2em 0;
display: block;
padding: var(--space-s);
box-shadow: var(--elevation-1);
border-radius: var(--roundness-1);
}
.card > p {
margin: 0;
}
.card:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
a.card {
position: relative;
top: 0;
transition: .1s ease-in-out;
color: var(--color-black-100);
text-decoration: none;
}
a.card:hover {
box-shadow: var(--elevation-1-hover);
top: -1px;
opacity: 0.75;
}
.card--has-info {
position: relative;
padding-top: 2em;
padding-right: 2em;
}
.card--has-info a {
position: static;
color: inherit;
text-decoration: none;
}
.card--has-info a:focus {
outline: none;
}
.card--has-info a::after {
content: '';
display: block;
background: transparent;
inset: 0;
position: absolute;
}
.info-tooltip {
display: block;
height: 24px;
width: 24px;
background: var(--color-white);
border: none;
color: var(--color-brand-primary-100);
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.5em;
right: 0.5em;
pointer-events: visible;
border: 2px solid currentColor; /* demo only */
font-weight: bold; /* demo only */
}
.info-tooltip:hover {
background: var(--color-brand-primary-100);
color: var(--color-white);
border: none; /* demo only */
}
/* ========
Button
======== */
.button {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 3rem;
gap: var(--space-xxs);
top: 0;
transition: all .1s ease-in-out;
outline: none;
border: none;
font-size: inherit; /* NOT Base font size! Inherit it from parent element */
padding: var(--space-s) var(--space);
border-radius: var(--roundness-2);
box-shadow: var(--elevation-1);
height: max-content; /* damit bei Zoom von mehr als 150% der Button mitwächst */
}
.button:hover {
transform: translateY(-1px);
opacity: 0.9;
box-shadow: var(--elevation-1-hover);
}
.button:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button:focus {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
button:active:not(:focus-visible) {
top: 1px;
}
.button mat-icon {
height: 1em !important;
width: 1em !important;
fill: currentColor;
}
.button-primary {
background-color: var(--color-brand-primary-100);
background-image: var(--gradient-brand-primary);
color: var(--color-white);
}
.button-primary:disabled{
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-danger {
background-color: var(--color-brand-primary-100);
background-image: var(--color-danger-100);
color: var(--color-white);
}
.button-danger:disabled {
background-color: var(--color-black-40);
background-image: var(--color-black-40);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button-outline-mode {
background-color: var(--color-white);
color: var(--color-mode-100);
border: 2px solid var(--color-mode-100);
}
.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button-outline-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary mat-icon{
fill: currentColor;
}
.button-outline-danger {
background-color: var(--color-white);
color: var(--color-danger-100);
border: 2px solid var(--color-danger-100);
}
.button-outline-danger:focus-visible {
outline: 2px solid var(--color-danger-100);
outline-offset: 2px;
}
.button-group {
display: flex;
gap: 0.5em;
}
.button-group.card-end{
justify-content: flex-end;
}
.button.button-action-mini {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 1rem !important;
min-height: 1rem !important;
max-width: 1rem !important;
max-height: 1rem !important;
}
.button.button-action-mini.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
/*fill: currentColor;*/
}
.button.button-action-mini.button-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-primary mat-icon{
fill: var(--color-white);
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-primary span {
color: var(--color-white);
}
.button.button-action-mini.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action-mini.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-outline-primary mat-icon {
fill: currentColor;
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* width: 4.5rem;
height: 4.5rem; */
text-align: center;
text-overflow: ellipsis;
font-size: .6rem
}
.button.button-action.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
}
.button.button-action.button-primary:disabled {
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button.button-action.button-primary mat-icon {
fill: var(--color-white);
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-primary span {
color: var(--color-white);
}
.button.button-action.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button.button-action.button-outline-primary mat-icon {
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action-mini.button-align-right{
text-align: right;
}
.nav-chevron-right{
height: 1rem !important;
width: 1rem !important;
}
/* Base */
body {
margin: 0;
}
hr {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
border: 1px solid #eee;
}
*:focus-visible {
outline: 2px solid currentColor;
}
figure {
margin: 0;
}
figcaption {
font-size: 0.875em;
margin-top: 0.25em;
display: flex;
}
figcaption::before {
content:'∟';
display: inline-block;
font-size: 1.25em;
line-height: .75em;
margin-right: .15em;
}
img {
width: 100%;
height: auto;
background: silver;
}
iframe {
height: 100%;
width: 100%;
border: none;
}
ol, ul {
padding-left: 1em;
}
li::marker {
color: var(--color-brand-primary-100);
font-weight: bold;
}
grid {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
grid > * {
align-self: flex-end;
}
/* Eigene Flex-Container-Klasse*/
.d-flex {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-flex-checkbox {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-flex-column {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: column;
}
.d-flex-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-row-center{
align-items: center;
}
.buttons-space-between{
justify-content: space-between;
}
.buttons-align-left{
justify-content: flex-end;
}
.d-flex.flex-grow > * {
flex-grow: 1;
}
.startseite-space-between{
justify-content: space-between;
}
.margin-right-startseite{
margin-right: 4rem;
}
/* ========
Links general
======== */
a {
color: var(--color-brand-primary-100);
position: relative;
top: 0;
transition: .1s ease-in-out;
}
a:hover {
text-decoration: none;
}
a:hover span {
text-decoration: none;
}
a:focus:not(:focus-visible) {
top: 1px;
}
/* detect links opening in new tab (target="_blank") */
a[target="_blank"]::before {
content: '';
display: inline-block;
vertical-align: baseline;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
/* neu dazu, um das „Hochstellen“ zu fixen: */
margin-top: 0; /* überschreibt margin-top aus dem Designsystem */
align-self: baseline; /* überschreibt align-self: first baseline */
}
a[target="_blank"] {
display: inline; /* statt inline-flex */
}
.link--more-info::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
}
/* detect external url */
/*
a:not([href^="https://lff.bayern.de"])::before {
background:lime;
}
*/
/* ========
Links with icon
======== */
.link-with-icon {
display: grid;
grid-template-columns: 1.5em 1fr;
grid-gap: var(--space-xs);
}
.link-with-icon::before {
content: '';
height: 1.5em;
width: 1.5em;
margin-top: 0.1em;
background: var(--color-brand-secondary-25);
display: inline-block;
align-self: baseline;
}
/* ========
CARD
======== */
.card {
margin: 2em 0;
display: block;
padding: var(--space-s);
box-shadow: var(--elevation-1);
border-radius: var(--roundness-1);
}
.card > p {
margin: 0;
}
.card:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
a.card {
position: relative;
top: 0;
transition: .1s ease-in-out;
color: var(--color-black-100);
text-decoration: none;
}
a.card:hover {
box-shadow: var(--elevation-1-hover);
top: -1px;
opacity: 0.75;
}
.card--has-info {
position: relative;
padding-top: 2em;
padding-right: 2em;
}
.card--has-info a {
position: static;
color: inherit;
text-decoration: none;
}
.card--has-info a:focus {
outline: none;
}
.card--has-info a::after {
content: '';
display: block;
background: transparent;
inset: 0;
position: absolute;
}
.info-tooltip {
display: block;
height: 24px;
width: 24px;
background: var(--color-white);
border: none;
color: var(--color-brand-primary-100);
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.5em;
right: 0.5em;
pointer-events: visible;
border: 2px solid currentColor; /* demo only */
font-weight: bold; /* demo only */
}
.info-tooltip:hover {
background: var(--color-brand-primary-100);
color: var(--color-white);
border: none; /* demo only */
}
/* ========
Button
======== */
.button {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 3rem;
gap: var(--space-xxs);
top: 0;
transition: all .1s ease-in-out;
outline: none;
border: none;
font-size: inherit; /* NOT Base font size! Inherit it from parent element */
padding: var(--space-s) var(--space);
border-radius: var(--roundness-2);
box-shadow: var(--elevation-1);
height: max-content; /* damit bei Zoom von mehr als 150% der Button mitwächst */
}
.button:hover {
transform: translateY(-1px);
opacity: 0.9;
box-shadow: var(--elevation-1-hover);
}
.button:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button:focus {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
button:active:not(:focus-visible) {
top: 1px;
}
.button mat-icon {
height: 1em !important;
width: 1em !important;
fill: currentColor;
}
.button-primary {
background-color: var(--color-brand-primary-100);
background-image: var(--gradient-brand-primary);
color: var(--color-white);
}
.button-primary:disabled{
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-danger {
background-color: var(--color-brand-primary-100);
background-image: var(--color-danger-100);
color: var(--color-white);
}
.button-danger:disabled {
background-color: var(--color-black-40);
background-image: var(--color-black-40);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button-outline-mode {
background-color: var(--color-white);
color: var(--color-mode-100);
border: 2px solid var(--color-mode-100);
}
.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button-outline-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary mat-icon{
fill: currentColor;
}
.button-outline-danger {
background-color: var(--color-white);
color: var(--color-danger-100);
border: 2px solid var(--color-danger-100);
}
.button-outline-danger:focus-visible {
outline: 2px solid var(--color-danger-100);
outline-offset: 2px;
}
.button-group {
display: flex;
gap: 0.5em;
}
.button-group.card-end{
justify-content: flex-end;
}
.button.button-action-mini {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 1rem !important;
min-height: 1rem !important;
max-width: 1rem !important;
max-height: 1rem !important;
}
.button.button-action-mini.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
/*fill: currentColor;*/
}
.button.button-action-mini.button-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-primary mat-icon{
fill: var(--color-white);
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-primary span {
color: var(--color-white);
}
.button.button-action-mini.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action-mini.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-outline-primary mat-icon {
fill: currentColor;
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* width: 4.5rem;
height: 4.5rem; */
text-align: center;
text-overflow: ellipsis;
font-size: .6rem
}
.button.button-action.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
}
.button.button-action.button-primary:disabled {
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button.button-action.button-primary mat-icon {
fill: var(--color-white);
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-primary span {
color: var(--color-white);
}
.button.button-action.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button.button-action.button-outline-primary mat-icon {
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action-mini.button-align-right{
text-align: right;
}
.nav-chevron-right{
height: 1rem !important;
width: 1rem !important;
}
/* Colors */
:root {
/* Colors */
--gradient-brand-primary: linear-gradient(135deg, var(--color-brand-primary-100), #0E6BA1);
--gradient-brand-secondary: linear-gradient(135deg, #35556E, #223747);
--color-white: #fff;
--color-black-100: #000;
--color-black-40: rgba(0,0,0,.4);
--color-black-15: rgba(0,0,0,.15);
--color-brand-primary-100: rgba(17,125,186,1);
--color-brand-primary-25: rgba(17,125,186,.25);
--color-brand-primary-5: rgba(17,125,186,.05);
--color-brand-secondary-100: rgba(53,85,108,1);
--color-brand-secondary-25: rgba(53,85,108,.25);
--color-brand-secondary-5: rgba(53,85,108,.05);
--color-neutral-100: rgba(51,51,51,1);
--color-neutral-50: #494E50;
--color-neutral-25: rgba(51,51,51,.25);
--color-neutral-10: rgba(51,51,51,.1);
--color-neutral-10-opaque: #eaeaea;
--color-neutral-5: rgba(51,51,51,.05);
--color-success-100: rgba(37,115,16,1);
--color-success-20: rgba(37,115,16,.25);
--color-success-5: rgba(37,115,16,.05);
--color-help-100: rgba(235,211,20,1);
--color-help-50: rgba(235,211,20,.5);
--color-help-25: rgba(235,211,20,.25);
--color-help-25-opaque: #faf4cd;
--color-help-5: rgba(235,211,20,.05);
--color-warning-100: rgba(245,114,60,1);
--color-warning-25: rgba(245,114,60,.25);
--color-warning-5: rgba(245,114,60,.05);
--color-danger-100: rgba(201,20,50,1);
--color-danger-25: rgba(201,20,50,.25);
--color-danger-5: rgba(201,20,50,.05);
--color-mode-100: rgba(155,80,215,1);
--color-mode-25: rgba(155,80,215,.25);
--color-mode-5: rgba(155,80,215,.05);
--color-stepper: rgba(47, 72, 90, 1);
--status-indicator-bg-open: rgba(250, 244, 196, 1);
--button-icon-close: url('icon-close.0606d696ac13a802.svg');
--button-icon-info: url('help_i_mitKreis.ff4a6d31450b216e.svg');
}
color {
aspect-ratio: 1/1;
display: flex;
border-radius: var(--roundness-1);
padding: var(--space-l);
font-size: 0.7em;
font-size: 0.7em;
width: 12%;
}
gradient {
display: flex;
padding: 1em;
margin-bottom: 1em;
border-radius: var(--roundness-1);
padding: var(--space-l);
font-size: 0.7em;
}
.gradient-brand-primary {
background-image: var(--gradient-brand-primary);
color: white;
}
.gradient-brand-secondary {
background-image: var(--gradient-brand-secondary);
color: white;
}
.color-black-100 {
background-color: var(--color-black-100);
color: var(--color-white);
}
.color-black-40 {
background-color: var(--color-black-40);
color: var(--color-black);
}
.color-black-15 {
background-color: var(--color-black-15);
color: var(--color-black);
}
.color-brand-primary-100 {
background-color: var(--color-brand-primary-100);
color: var(--color-white);
}
.color-brand-secondary-100 {
background-color: var(--color-brand-secondary-100);
color: var(--color-white);
}
.color-neutral-100 {
background-color: var(--color-neutral-100);
color: var(--color-white);
}
.color-success-100 {
background-color: var(--color-success-100);
color: var(--color-white);
}
.color-help-100 {
background-color: var(--color-help-100);
color: var(--color-black-100);
}
.color-warning-100 {
background-color: var(--color-warning-100);
color: var(--color-black-100)
}
.color-danger-100 {
background-color: var(--color-danger-100);
color: var(--color-white);
}
.color-mode-100 {
background-color: var(--color-mode-100);
color: var(--color-white);
}
.color-brand-primary-25 {
background-color: var(--color-brand-primary-25);
}
.color-brand-secondary-25 {
background-color: var(--color-brand-secondary-25);
}
.color-neutral-10 {
background-color: var(--color-neutral-10);
}
.color-success-20 {
background-color: var(--color-success-20);
}
.color-help-25 {
background-color: var(--color-help-25);
}
.color-help-25-opaque {
background-color: var(--color-help-25-opaque);
}
.color-warning-25 {
background-color: var(--color-warning-25);
}
.color-danger-25 {
background-color: var(--color-danger-25);
}
.color-mode-25 {
background-color: var(--color-mode-25);
}
.color-brand-primary-5 {
background-color: var(--color-brand-primary-5);
}
.color-brand-secondary-5 {
background-color: var(--color-brand-secondary-5);
}
.color-neutral-5 {
background-color: var(--color-neutral-5);
}
.color-success-5 {
background-color: var(--color-success-5);
}
.color-help-5 {
background-color: var(--color-help-5);
}
.color-warning-5 {
background-color: var(--color-warning-5);
}
.color-danger-5 {
background-color: var(--color-danger-5);
}
.color-mode-5 {
background-color: var(--color-mode-5);
}
.color-neutral-10-opaque {
background-color: var(--color-neutral-10-opaque);
}
/* Typo */
:root {
font-family: Roboto, sans-serif !important;
line-height: 1.7;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
--base-font-size: 1em; /* fallback */
--base-font-size: clamp(0.85em, 1.75vw, 1.2em);
}
body {
font-size: var(--base-font-size);
}
.heading-1 {
color: var(--color-brand-secondary-100);
font-size: 2.25em;
font-weight: 500;
margin-bottom: 0;
}
.heading-2 {
color: var(--color-brand-primary-100);
font-size: 1.625em;
font-weight: 500;
margin-bottom: 0;
}
.heading-3 {
color: var(--color-brand-secondary-100);
font-size: 1.375em;
font-weight: 500;
margin-bottom: 0;
}
.heading-4 {
font-size: 1.25em;
font-weight: 500;
margin-bottom: 0;
}
.heading-5 {
color: var(--color-brand-secondary-100);
font-size: 1.125em;
font-weight: 500;
margin-bottom: 0;
}
.heading-6 {
color: var(--color-brand-primary-100);
font-size: 1em;
font-weight: 500;
margin-bottom: 0;
}
.heading-7 {
color: var(--color-black-100);
font-size: 1em;
font-weight: 600;
margin-bottom: 0;
}
/* Shapes */
:root {
--roundness-1: 4px;
--roundness-2: 8px;
}
shape {
width: 5em;
aspect-ratio: 1/1;
display: flex;
background: black;
color: white;
}
.roundness-1 {
border-radius: var(--roundness-1);
}
.roundness-2 {
border-radius: var(--roundness-2);
}
/* Elevation */
:root {
--elevation-0: 0 0 0 1px var(--color-brand-primary-1);
--elevation-1: 0 1px 4px rgba(0,0,0,0.22);
--elevation-1-hover: 0 2px 5px rgba(0,0,0,0.15);
--elevation-2: 0 3px 6px rgba(0,0,0,0.22);
--elevation-3: 0 7px 16px rgba(0,0,0,0.22);
--elevation-4: 0 7px 36px rgba(0,0,0,0.22);
}
elevation {
background: white;
width: 5em;
aspect-ratio: 1/1;
margin-right: 1em;
border-radius: var(--roundness-1);
padding: var(--space-xs);
}
.elevation-0 {box-shadow: var(--elevation-0);}
.elevation-1 {box-shadow: var(--elevation-1);}
.elevation-2 {box-shadow: var(--elevation-2);}
.elevation-3 {box-shadow: var(--elevation-3);}
.elevation-4 {box-shadow: var(--elevation-4);}
/* Spacing */
:root {
--space-xxs: calc(1em * 0.25); /* 4px */
--space-xs: calc(1em * 0.5); /* 8px */
--space-s: calc(1em * 0.75); /* 12px */
--space: 1em;
--space-l: calc(1em * 1.5); /* 24px */
--space-xl: calc(1em * 2); /* 32px */
--space-xxl: calc(1em * 3); /* 48px */
}
space {
background: var(--color-black-100);
display: inline-block;
aspect-ratio: 1/1;
}
.space-xxs {width: var(--space-xxs);}
.space-xs {width: var(--space-xs);}
.space-s {width: var(--space-s);}
.space {width: var(--space);}
.space-l {width: var(--space-l);}
.space-xl {width: var(--space-xl);}
.space-xxl {width: var(--space-xxl);}
/* ========
Links general
======== */
a {
color: var(--color-brand-primary-100);
position: relative;
top: 0;
transition: .1s ease-in-out;
}
a:hover {
text-decoration: none;
}
a:hover span {
text-decoration: none;
}
a:focus:not(:focus-visible) {
top: 1px;
}
/* detect links opening in new tab (target="_blank") */
a[target="_blank"]::before {
content: '';
display: inline-block;
vertical-align: baseline;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
/* neu dazu, um das „Hochstellen“ zu fixen: */
margin-top: 0; /* überschreibt margin-top aus dem Designsystem */
align-self: baseline; /* überschreibt align-self: first baseline */
}
a[target="_blank"] {
display: inline; /* statt inline-flex */
}
.link--more-info::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
}
/* detect external url */
/*
a:not([href^="https://lff.bayern.de"])::before {
background:lime;
}
*/
/* ========
Links with icon
======== */
.link-with-icon {
display: grid;
grid-template-columns: 1.5em 1fr;
grid-gap: var(--space-xs);
}
.link-with-icon::before {
content: '';
height: 1.5em;
width: 1.5em;
margin-top: 0.1em;
background: var(--color-brand-secondary-25);
display: inline-block;
align-self: baseline;
}
/* ========
CARD
======== */
.card {
margin: 2em 0;
display: block;
padding: var(--space-s);
box-shadow: var(--elevation-1);
border-radius: var(--roundness-1);
}
.card > p {
margin: 0;
}
.card:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
a.card {
position: relative;
top: 0;
transition: .1s ease-in-out;
color: var(--color-black-100);
text-decoration: none;
}
a.card:hover {
box-shadow: var(--elevation-1-hover);
top: -1px;
opacity: 0.75;
}
.card--has-info {
position: relative;
padding-top: 2em;
padding-right: 2em;
}
.card--has-info a {
position: static;
color: inherit;
text-decoration: none;
}
.card--has-info a:focus {
outline: none;
}
.card--has-info a::after {
content: '';
display: block;
background: transparent;
inset: 0;
position: absolute;
}
.info-tooltip {
display: block;
height: 24px;
width: 24px;
background: var(--color-white);
border: none;
color: var(--color-brand-primary-100);
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.5em;
right: 0.5em;
pointer-events: visible;
border: 2px solid currentColor; /* demo only */
font-weight: bold; /* demo only */
}
.info-tooltip:hover {
background: var(--color-brand-primary-100);
color: var(--color-white);
border: none; /* demo only */
}
/* ========
Button
======== */
.button {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 3rem;
gap: var(--space-xxs);
top: 0;
transition: all .1s ease-in-out;
outline: none;
border: none;
font-size: inherit; /* NOT Base font size! Inherit it from parent element */
padding: var(--space-s) var(--space);
border-radius: var(--roundness-2);
box-shadow: var(--elevation-1);
height: max-content; /* damit bei Zoom von mehr als 150% der Button mitwächst */
}
.button:hover {
transform: translateY(-1px);
opacity: 0.9;
box-shadow: var(--elevation-1-hover);
}
.button:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button:focus {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
button:active:not(:focus-visible) {
top: 1px;
}
.button mat-icon {
height: 1em !important;
width: 1em !important;
fill: currentColor;
}
.button-primary {
background-color: var(--color-brand-primary-100);
background-image: var(--gradient-brand-primary);
color: var(--color-white);
}
.button-primary:disabled{
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-danger {
background-color: var(--color-brand-primary-100);
background-image: var(--color-danger-100);
color: var(--color-white);
}
.button-danger:disabled {
background-color: var(--color-black-40);
background-image: var(--color-black-40);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button-outline-mode {
background-color: var(--color-white);
color: var(--color-mode-100);
border: 2px solid var(--color-mode-100);
}
.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button-outline-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary mat-icon{
fill: currentColor;
}
.button-outline-danger {
background-color: var(--color-white);
color: var(--color-danger-100);
border: 2px solid var(--color-danger-100);
}
.button-outline-danger:focus-visible {
outline: 2px solid var(--color-danger-100);
outline-offset: 2px;
}
.button-group {
display: flex;
gap: 0.5em;
}
.button-group.card-end{
justify-content: flex-end;
}
.button.button-action-mini {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 1rem !important;
min-height: 1rem !important;
max-width: 1rem !important;
max-height: 1rem !important;
}
.button.button-action-mini.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
/*fill: currentColor;*/
}
.button.button-action-mini.button-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-primary mat-icon{
fill: var(--color-white);
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-primary span {
color: var(--color-white);
}
.button.button-action-mini.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action-mini.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-outline-primary mat-icon {
fill: currentColor;
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* width: 4.5rem;
height: 4.5rem; */
text-align: center;
text-overflow: ellipsis;
font-size: .6rem
}
.button.button-action.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
}
.button.button-action.button-primary:disabled {
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button.button-action.button-primary mat-icon {
fill: var(--color-white);
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-primary span {
color: var(--color-white);
}
.button.button-action.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button.button-action.button-outline-primary mat-icon {
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action-mini.button-align-right{
text-align: right;
}
.nav-chevron-right{
height: 1rem !important;
width: 1rem !important;
}
/* Base */
body {
margin: 0;
}
hr {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
border: 1px solid #eee;
}
*:focus-visible {
outline: 2px solid currentColor;
}
figure {
margin: 0;
}
figcaption {
font-size: 0.875em;
margin-top: 0.25em;
display: flex;
}
figcaption::before {
content:'∟';
display: inline-block;
font-size: 1.25em;
line-height: .75em;
margin-right: .15em;
}
img {
width: 100%;
height: auto;
background: silver;
}
iframe {
height: 100%;
width: 100%;
border: none;
}
ol, ul {
padding-left: 1em;
}
li::marker {
color: var(--color-brand-primary-100);
font-weight: bold;
}
grid {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
grid > * {
align-self: flex-end;
}
/* Eigene Flex-Container-Klasse*/
.d-flex {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-flex-checkbox {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-flex-column {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: column;
}
.d-flex-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-row-center{
align-items: center;
}
.buttons-space-between{
justify-content: space-between;
}
.buttons-align-left{
justify-content: flex-end;
}
.d-flex.flex-grow > * {
flex-grow: 1;
}
.startseite-space-between{
justify-content: space-between;
}
.margin-right-startseite{
margin-right: 4rem;
}
/* Colors */
:root {
/* Colors */
--gradient-brand-primary: linear-gradient(135deg, var(--color-brand-primary-100), #0E6BA1);
--gradient-brand-secondary: linear-gradient(135deg, #35556E, #223747);
--color-white: #fff;
--color-black-100: #000;
--color-black-40: rgba(0,0,0,.4);
--color-black-15: rgba(0,0,0,.15);
--color-brand-primary-100: rgba(17,125,186,1);
--color-brand-primary-25: rgba(17,125,186,.25);
--color-brand-primary-5: rgba(17,125,186,.05);
--color-brand-secondary-100: rgba(53,85,108,1);
--color-brand-secondary-25: rgba(53,85,108,.25);
--color-brand-secondary-5: rgba(53,85,108,.05);
--color-neutral-100: rgba(51,51,51,1);
--color-neutral-50: #494E50;
--color-neutral-25: rgba(51,51,51,.25);
--color-neutral-10: rgba(51,51,51,.1);
--color-neutral-10-opaque: #eaeaea;
--color-neutral-5: rgba(51,51,51,.05);
--color-success-100: rgba(37,115,16,1);
--color-success-20: rgba(37,115,16,.25);
--color-success-5: rgba(37,115,16,.05);
--color-help-100: rgba(235,211,20,1);
--color-help-50: rgba(235,211,20,.5);
--color-help-25: rgba(235,211,20,.25);
--color-help-25-opaque: #faf4cd;
--color-help-5: rgba(235,211,20,.05);
--color-warning-100: rgba(245,114,60,1);
--color-warning-25: rgba(245,114,60,.25);
--color-warning-5: rgba(245,114,60,.05);
--color-danger-100: rgba(201,20,50,1);
--color-danger-25: rgba(201,20,50,.25);
--color-danger-5: rgba(201,20,50,.05);
--color-mode-100: rgba(155,80,215,1);
--color-mode-25: rgba(155,80,215,.25);
--color-mode-5: rgba(155,80,215,.05);
--color-stepper: rgba(47, 72, 90, 1);
--status-indicator-bg-open: rgba(250, 244, 196, 1);
--button-icon-close: url('icon-close.0606d696ac13a802.svg');
--button-icon-info: url('help_i_mitKreis.ff4a6d31450b216e.svg');
}
color {
aspect-ratio: 1/1;
display: flex;
border-radius: var(--roundness-1);
padding: var(--space-l);
font-size: 0.7em;
font-size: 0.7em;
width: 12%;
}
gradient {
display: flex;
padding: 1em;
margin-bottom: 1em;
border-radius: var(--roundness-1);
padding: var(--space-l);
font-size: 0.7em;
}
.gradient-brand-primary {
background-image: var(--gradient-brand-primary);
color: white;
}
.gradient-brand-secondary {
background-image: var(--gradient-brand-secondary);
color: white;
}
.color-black-100 {
background-color: var(--color-black-100);
color: var(--color-white);
}
.color-black-40 {
background-color: var(--color-black-40);
color: var(--color-black);
}
.color-black-15 {
background-color: var(--color-black-15);
color: var(--color-black);
}
.color-brand-primary-100 {
background-color: var(--color-brand-primary-100);
color: var(--color-white);
}
.color-brand-secondary-100 {
background-color: var(--color-brand-secondary-100);
color: var(--color-white);
}
.color-neutral-100 {
background-color: var(--color-neutral-100);
color: var(--color-white);
}
.color-success-100 {
background-color: var(--color-success-100);
color: var(--color-white);
}
.color-help-100 {
background-color: var(--color-help-100);
color: var(--color-black-100);
}
.color-warning-100 {
background-color: var(--color-warning-100);
color: var(--color-black-100)
}
.color-danger-100 {
background-color: var(--color-danger-100);
color: var(--color-white);
}
.color-mode-100 {
background-color: var(--color-mode-100);
color: var(--color-white);
}
.color-brand-primary-25 {
background-color: var(--color-brand-primary-25);
}
.color-brand-secondary-25 {
background-color: var(--color-brand-secondary-25);
}
.color-neutral-10 {
background-color: var(--color-neutral-10);
}
.color-success-20 {
background-color: var(--color-success-20);
}
.color-help-25 {
background-color: var(--color-help-25);
}
.color-help-25-opaque {
background-color: var(--color-help-25-opaque);
}
.color-warning-25 {
background-color: var(--color-warning-25);
}
.color-danger-25 {
background-color: var(--color-danger-25);
}
.color-mode-25 {
background-color: var(--color-mode-25);
}
.color-brand-primary-5 {
background-color: var(--color-brand-primary-5);
}
.color-brand-secondary-5 {
background-color: var(--color-brand-secondary-5);
}
.color-neutral-5 {
background-color: var(--color-neutral-5);
}
.color-success-5 {
background-color: var(--color-success-5);
}
.color-help-5 {
background-color: var(--color-help-5);
}
.color-warning-5 {
background-color: var(--color-warning-5);
}
.color-danger-5 {
background-color: var(--color-danger-5);
}
.color-mode-5 {
background-color: var(--color-mode-5);
}
.color-neutral-10-opaque {
background-color: var(--color-neutral-10-opaque);
}
/* Typo */
:root {
font-family: Roboto, sans-serif !important;
line-height: 1.7;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
--base-font-size: 1em; /* fallback */
--base-font-size: clamp(0.85em, 1.75vw, 1.2em);
}
body {
font-size: var(--base-font-size);
}
.heading-1 {
color: var(--color-brand-secondary-100);
font-size: 2.25em;
font-weight: 500;
margin-bottom: 0;
}
.heading-2 {
color: var(--color-brand-primary-100);
font-size: 1.625em;
font-weight: 500;
margin-bottom: 0;
}
.heading-3 {
color: var(--color-brand-secondary-100);
font-size: 1.375em;
font-weight: 500;
margin-bottom: 0;
}
.heading-4 {
font-size: 1.25em;
font-weight: 500;
margin-bottom: 0;
}
.heading-5 {
color: var(--color-brand-secondary-100);
font-size: 1.125em;
font-weight: 500;
margin-bottom: 0;
}
.heading-6 {
color: var(--color-brand-primary-100);
font-size: 1em;
font-weight: 500;
margin-bottom: 0;
}
.heading-7 {
color: var(--color-black-100);
font-size: 1em;
font-weight: 600;
margin-bottom: 0;
}
/* Shapes */
:root {
--roundness-1: 4px;
--roundness-2: 8px;
}
shape {
width: 5em;
aspect-ratio: 1/1;
display: flex;
background: black;
color: white;
}
.roundness-1 {
border-radius: var(--roundness-1);
}
.roundness-2 {
border-radius: var(--roundness-2);
}
/* Elevation */
:root {
--elevation-0: 0 0 0 1px var(--color-brand-primary-1);
--elevation-1: 0 1px 4px rgba(0,0,0,0.22);
--elevation-1-hover: 0 2px 5px rgba(0,0,0,0.15);
--elevation-2: 0 3px 6px rgba(0,0,0,0.22);
--elevation-3: 0 7px 16px rgba(0,0,0,0.22);
--elevation-4: 0 7px 36px rgba(0,0,0,0.22);
}
elevation {
background: white;
width: 5em;
aspect-ratio: 1/1;
margin-right: 1em;
border-radius: var(--roundness-1);
padding: var(--space-xs);
}
.elevation-0 {box-shadow: var(--elevation-0);}
.elevation-1 {box-shadow: var(--elevation-1);}
.elevation-2 {box-shadow: var(--elevation-2);}
.elevation-3 {box-shadow: var(--elevation-3);}
.elevation-4 {box-shadow: var(--elevation-4);}
/* Spacing */
:root {
--space-xxs: calc(1em * 0.25); /* 4px */
--space-xs: calc(1em * 0.5); /* 8px */
--space-s: calc(1em * 0.75); /* 12px */
--space: 1em;
--space-l: calc(1em * 1.5); /* 24px */
--space-xl: calc(1em * 2); /* 32px */
--space-xxl: calc(1em * 3); /* 48px */
}
space {
background: var(--color-black-100);
display: inline-block;
aspect-ratio: 1/1;
}
.space-xxs {width: var(--space-xxs);}
.space-xs {width: var(--space-xs);}
.space-s {width: var(--space-s);}
.space {width: var(--space);}
.space-l {width: var(--space-l);}
.space-xl {width: var(--space-xl);}
.space-xxl {width: var(--space-xxl);}
/* ========
Links general
======== */
a {
color: var(--color-brand-primary-100);
position: relative;
top: 0;
transition: .1s ease-in-out;
}
a:hover {
text-decoration: none;
}
a:hover span {
text-decoration: none;
}
a:focus:not(:focus-visible) {
top: 1px;
}
/* detect links opening in new tab (target="_blank") */
a[target="_blank"]::before {
content: '';
display: inline-block;
vertical-align: baseline;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
/* neu dazu, um das „Hochstellen“ zu fixen: */
margin-top: 0; /* überschreibt margin-top aus dem Designsystem */
align-self: baseline; /* überschreibt align-self: first baseline */
}
a[target="_blank"] {
display: inline; /* statt inline-flex */
}
.link--more-info::before {
content: '';
display: inline-block;
vertical-align: middle;
width: 1em;
height: 1em;
margin-inline-end: 0.125em;
background-image: url('data:image/svg+xml;utf8,');
background-repeat: no-repeat;
background-position: left;
background-size: 100%;
}
/* detect external url */
/*
a:not([href^="https://lff.bayern.de"])::before {
background:lime;
}
*/
/* ========
Links with icon
======== */
.link-with-icon {
display: grid;
grid-template-columns: 1.5em 1fr;
grid-gap: var(--space-xs);
}
.link-with-icon::before {
content: '';
height: 1.5em;
width: 1.5em;
margin-top: 0.1em;
background: var(--color-brand-secondary-25);
display: inline-block;
align-self: baseline;
}
/* ========
CARD
======== */
.card {
margin: 2em 0;
display: block;
padding: var(--space-s);
box-shadow: var(--elevation-1);
border-radius: var(--roundness-1);
}
.card > p {
margin: 0;
}
.card:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
a.card {
position: relative;
top: 0;
transition: .1s ease-in-out;
color: var(--color-black-100);
text-decoration: none;
}
a.card:hover {
box-shadow: var(--elevation-1-hover);
top: -1px;
opacity: 0.75;
}
.card--has-info {
position: relative;
padding-top: 2em;
padding-right: 2em;
}
.card--has-info a {
position: static;
color: inherit;
text-decoration: none;
}
.card--has-info a:focus {
outline: none;
}
.card--has-info a::after {
content: '';
display: block;
background: transparent;
inset: 0;
position: absolute;
}
.info-tooltip {
display: block;
height: 24px;
width: 24px;
background: var(--color-white);
border: none;
color: var(--color-brand-primary-100);
border-radius: 100px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0.5em;
right: 0.5em;
pointer-events: visible;
border: 2px solid currentColor; /* demo only */
font-weight: bold; /* demo only */
}
.info-tooltip:hover {
background: var(--color-brand-primary-100);
color: var(--color-white);
border: none; /* demo only */
}
/* ========
Button
======== */
.button {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
height: 3rem;
gap: var(--space-xxs);
top: 0;
transition: all .1s ease-in-out;
outline: none;
border: none;
font-size: inherit; /* NOT Base font size! Inherit it from parent element */
padding: var(--space-s) var(--space);
border-radius: var(--roundness-2);
box-shadow: var(--elevation-1);
height: max-content; /* damit bei Zoom von mehr als 150% der Button mitwächst */
}
.button:hover {
transform: translateY(-1px);
opacity: 0.9;
box-shadow: var(--elevation-1-hover);
}
.button:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button:focus {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
button:active:not(:focus-visible) {
top: 1px;
}
.button mat-icon {
height: 1em !important;
width: 1em !important;
fill: currentColor;
}
.button-primary {
background-color: var(--color-brand-primary-100);
background-image: var(--gradient-brand-primary);
color: var(--color-white);
}
.button-primary:disabled{
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-danger {
background-color: var(--color-brand-primary-100);
background-image: var(--color-danger-100);
color: var(--color-white);
}
.button-danger:disabled {
background-color: var(--color-black-40);
background-image: var(--color-black-40);
top: 0px;
opacity: 1;
}
.button-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button-outline-mode {
background-color: var(--color-white);
color: var(--color-mode-100);
border: 2px solid var(--color-mode-100);
}
.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button-outline-primary:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button-outline-primary mat-icon{
fill: currentColor;
}
.button-outline-danger {
background-color: var(--color-white);
color: var(--color-danger-100);
border: 2px solid var(--color-danger-100);
}
.button-outline-danger:focus-visible {
outline: 2px solid var(--color-danger-100);
outline-offset: 2px;
}
.button-group {
display: flex;
gap: 0.5em;
}
.button-group.card-end{
justify-content: flex-end;
}
.button.button-action-mini {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-width: 1rem !important;
min-height: 1rem !important;
max-width: 1rem !important;
max-height: 1rem !important;
}
.button.button-action-mini.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
/*fill: currentColor;*/
}
.button.button-action-mini.button-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-primary mat-icon{
fill: var(--color-white);
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-primary span {
color: var(--color-white);
}
.button.button-action-mini.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action-mini.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-40);
border: 2px solid var(--color-black-40);
}
.button.button-action-mini.button-outline-primary mat-icon {
fill: currentColor;
min-height: 1rem !important;
min-width: 1rem !important;
max-height: 1rem !important;
max-width: 1rem !important;
vertical-align: top;
overflow: visible;
}
.button.button-action-mini.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
/* width: 4.5rem;
height: 4.5rem; */
text-align: center;
text-overflow: ellipsis;
font-size: .6rem
}
.button.button-action.button-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
}
.button.button-action.button-primary:disabled {
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}
.button.button-action.button-primary mat-icon {
fill: var(--color-white);
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-primary span {
color: var(--color-white);
}
.button.button-action.button-outline-primary {
background-color: var(--color-white);
color: var(--color-brand-primary-100);
border: 2px solid var(--color-brand-primary-100);
}
.button.button-action.button-outline-primary:disabled {
background-color: var(--color-white);
color: var(--color-black-15);
border: 2px solid var(--color-black-15);
fill: var(--color-black-15);
}
.button.button-action.button-outline-primary mat-icon {
min-height: 2rem !important;
min-width: 2rem !important;
max-height: 2rem !important;
max-width: 2rem !important;
vertical-align: top;
}
.button.button-action.button-outline-primary span {
color: var(--color-brand-primary-100);
}
.button.button-action-mini.button-align-right{
text-align: right;
}
.nav-chevron-right{
height: 1rem !important;
width: 1rem !important;
}
/* Base */
body {
margin: 0;
}
hr {
margin-block-start: 0.5rem;
margin-block-end: 0.5rem;
border: 1px solid #eee;
}
*:focus-visible {
outline: 2px solid currentColor;
}
figure {
margin: 0;
}
figcaption {
font-size: 0.875em;
margin-top: 0.25em;
display: flex;
}
figcaption::before {
content:'∟';
display: inline-block;
font-size: 1.25em;
line-height: .75em;
margin-right: .15em;
}
img {
width: 100%;
height: auto;
background: silver;
}
iframe {
height: 100%;
width: 100%;
border: none;
}
ol, ul {
padding-left: 1em;
}
li::marker {
color: var(--color-brand-primary-100);
font-weight: bold;
}
grid {
display: flex;
gap: 1em;
flex-wrap: wrap;
}
grid > * {
align-self: flex-end;
}
/* Eigene Flex-Container-Klasse*/
.d-flex {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-flex-checkbox {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-flex-column {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: column;
}
.d-flex-row {
display: flex;
gap: 0.5rem;
flex-wrap: wrap;
flex-direction: row;
}
.d-row-center{
align-items: center;
}
.buttons-space-between{
justify-content: space-between;
}
.buttons-align-left{
justify-content: flex-end;
}
.d-flex.flex-grow > * {
flex-grow: 1;
}
.startseite-space-between{
justify-content: space-between;
}
.margin-right-startseite{
margin-right: 4rem;
}
table-responsive {
overflow-x: auto;
max-width: 100%;
}
.table-responsive table {
width: unset;
min-width: 100%;
}
table {
width: 100%;
table-layout: fixed;
caption-side: top;
border-collapse: collapse;
color: var(--table-txt);
background-color: var(--table-bg);
}
table caption {
padding-top: var(--space-xs);
padding-bottom: var(--space-xs);
font-size: var(--heading-3-size);
color: var(--table-caption-txt);
text-align: center;
}
table thead,
table tbody,
table tfoot,
table tr,
table td,
table th {
text-align: inherit;
border-color: inherit;
border-style: var(--border-style);
border-width: var(--border-0);
}
table td,
table th {
padding: var(--space-s);
}
table tr {
border-bottom: var(--border-2) var(--border-style) var(--table-border);
}
table.table-striped:not(.table-card) > tbody > tr:nth-of-type(odd):not(:hover) * {
background-color: var(--table-striped-bg);
color: var(--table-striped-txt);
}
table.table-striped:not(.table-card):not(.table-hover) > tbody > tr:nth-of-type(odd) * {
background-color: var(--table-striped-bg);
color: var(--table-striped-txt);
}
table.table-hover tr:hover .status-indicator {
color: var(--card-color);
}
table.table-hover tr:hover .status-indicator svg {
background-color: var(--card-statusindicator-color) !important;
fill: var(--card-color) !important;
}
table.table-hover tr:hover svg {
fill: var(--table-hover-txt) !important;
}
table.table-hover tr:hover *:not(dialog, div.body, button.bottommargin05em, div.prev-default-color, mat-icon) {
color: var(--table-hover-txt);
background-color: var(--table-hover-bg) !important;
}
table.table-sortable th button {
font-weight: bold;
display: flex;
font-size: inherit;
padding: var(--space-s) var(--space-s) var(--space-s) var(--space-0) !important;
justify-content: flex-start;
align-items: center;
gap: var(--space-xxs);
text-decoration: none;
border-radius: var(--roundness-xs);
box-shadow: none;
outline-offset: var(--border-2);
outline-width: var(--border-2);
outline-style: var(--border-style);
outline-color: transparent;
border: var(--border-2);
border-style: var(--border-style);
border-color: transparent;
background-color: transparent;
color: currentColor;
width: 100%;
height: 100%;
text-align: start;
}
table.table-sortable th button::after {
content: " ";
font-size: 0.5em;
color: var(--table-sort-txt);
white-space: pre;
}
table.table-sortable th button:hover {
transform: translateY(-1px);
color: var(--table-hover-txt);
background-color: var(--table-hover-bg) !important;
}
table.table-sortable th button:hover::after {
color: var(--table-hover-txt);
}
table.table-sortable th button:focus, table.table-sortable th button:focus-visible, table.table-sortable th button:active {
outline-color: var(--table-striped-bg);
border-color: transparent;
color: var(--table-hover-txt);
background-color: var(--table-hover-bg) !important;
}
table.table-sortable th button:focus::after, table.table-sortable th button:focus-visible::after, table.table-sortable th button:active::after {
color: var(--table-hover-txt);
}
table.table-sortable th[aria-sort] button {
justify-content: space-between;
}
table.table-sortable th[aria-sort=ascending] button::after {
content: "A\a🠇\aZ";
}
table.table-sortable th[aria-sort=ascending].num button::after {
content: "1\a🠇\a 9";
}
table.table-sortable th[aria-sort=ascending].date button::after {
content: "jan\a🠇\a dez";
}
table.table-sortable th[aria-sort=ascending].custom button::after {
font-size: large;
content: "🠇\a";
}
table.table-sortable th[aria-sort=descending] button::after {
content: "Z\a🠇\a A";
}
table.table-sortable th[aria-sort=descending].num button::after {
content: "9\a🠇\a 1";
}
table.table-sortable th[aria-sort=descending].date button::after {
content: "dez\a🠇\ajan";
}
table.table-sortable th[aria-sort=descending].custom button::after {
font-size: large;
content: "🠅\a";
}
table.table-sortable td.num,
table.table-sortable td.date {
text-align: right;
}
table.table-sortable.table-hover tr:hover button::after {
color: var(--table-hover-txt);
}
.table-filter button[type=submit]:disabled {
background-color: var(--button-status-color);
color: var(--button-status-contrast-color);
}
table.table-card {
border-collapse: separate;
border-spacing: var(--space-0) var(--space-s);
padding: var(--space-0) var(--space-xxs);
}
table.table-card.timeline {
padding-left: var(--space-xxl);
}
table.table-card.timeline tbody {
position: relative;
}
table.table-card.timeline tbody::before {
content: "";
position: absolute;
left: calc(-1 * var(--space-xxl) / 2);
top: var(--space-0);
height: 100%;
border: var(--border-2) var(--border-style) var(--neutral-25);
}
table.table-card.timeline tbody tr {
position: relative;
}
table.table-card.timeline tbody tr::after {
content: "";
position: absolute;
top: calc(50% - var(--space-s));
left: calc(-1 * (var(--space-xxl) / 2 + var(--space-l) / 2 - var(--border-2) / 2));
height: var(--space-l);
width: var(--space-l);
aspect-ratio: 1;
border-radius: var(--roundness-xxxl);
background: var(--card-status-color);
}
table.table-card thead {
background: var(--mini-card-header-bg);
color: var(--mini-card-header-text);
font-size: 0.875rem;
line-height: 150%;
}
table.table-card thead tr::before {
border-color: transparent;
}
table.table-card thead tr:focus, table.table-card thead tr:focus-within {
outline-color: var(--mini-card-header-text);
}
table.table-card thead th {
font-size: 0.875rem;
font-weight: 400;
line-height: 150%;
}
table.table-card thead th button {
font-weight: 400;
}
table.table-card thead th.footer {
width: 6rem;
}
table.table-card tbody {
background-color: var(--card-bg);
color: var(--card-color);
font-size: 0.875rem;
line-height: 1.3125rem;
}
table.table-card tr {
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.5rem;
border-radius: var(--roundness-xs);
box-shadow: var(--elevation-1);
border: none;
}
table.table-card tr.neutral {
--card-status-color: var(--card-status-color-neutral);
--card-statusindicator-color: var(--card-statusindicator-color-neutral);
--card-teaser-title:var(--card-teaser-title-neutral);
--card-teaser-txt:var(--card-teaser-txt-neutral);
--card-teaser-link: var(--card-teaser-link-neutral);
--card-teaser-bg:var(--card-teaser-bg-neutral);
--captcha-status-color: var(--captcha-status-color-neutral);
}
table.table-card tr.primary {
--card-status-color: var(--card-status-color-primary);
--card-statusindicator-color: var(--card-statusindicator-color-primary);
--card-teaser-title:var(--card-teaser-title-primary);
--card-teaser-txt:var(--card-teaser-txt-primary);
--card-teaser-link: var(--card-teaser-link-primary);
--card-teaser-bg:var(--card-teaser-bg-primary);
--captcha-status-color: var(--captcha-status-color-primary);
}
table.table-card tr.secondary {
--card-status-color: var(--card-status-color-secondary);
--card-statusindicator-color: var(--card-statusindicator-color-secondary);
--card-teaser-title:var(--card-teaser-title-secondary);
--card-teaser-txt:var(--card-teaser-txt-secondary);
--card-teaser-link: var(--card-teaser-link-secondary);
--card-teaser-bg:var(--card-teaser-bg-secondary);
--captcha-status-color: var(--captcha-status-color-secondary);
}
table.table-card tr.success {
--card-status-color: var(--card-status-color-success);
--card-statusindicator-color: var(--card-statusindicator-color-success);
--card-teaser-title:var(--card-teaser-title-success);
--card-teaser-txt:var(--card-teaser-txt-success);
--card-teaser-link: var(--card-teaser-link-success);
--card-teaser-bg:var(--card-teaser-bg-success);
--captcha-status-color: var(--captcha-status-color-success);
}
table.table-card tr.help {
--card-status-color: var(--card-status-color-help);
--card-statusindicator-color: var(--card-statusindicator-color-help);
--card-teaser-title:var(--card-teaser-title-help);
--card-teaser-txt:var(--card-teaser-txt-help);
--card-teaser-link: var(--card-teaser-link-help);
--card-teaser-bg:var(--card-teaser-bg-help);
--captcha-status-color: var(--captcha-status-color-help);
}
table.table-card tr.warning {
--card-status-color: var(--card-status-color-warning);
--card-statusindicator-color: var(--card-statusindicator-color-warning);
--card-teaser-title:var(--card-teaser-title-warning);
--card-teaser-txt:var(--card-teaser-txt-warning);
--card-teaser-link: var(--card-teaser-link-warning);
--card-teaser-bg:var(--card-teaser-bg-warning);
--captcha-status-color: var(--captcha-status-color-warning);
}
table.table-card tr.danger {
--card-status-color: var(--card-status-color-danger);
--card-statusindicator-color: var(--card-statusindicator-color-danger);
--card-teaser-title:var(--card-teaser-title-danger);
--card-teaser-txt:var(--card-teaser-txt-danger);
--card-teaser-link: var(--card-teaser-link-danger);
--card-teaser-bg:var(--card-teaser-bg-danger);
--captcha-status-color: var(--captcha-status-color-danger);
}
table.table-card tr.mode {
--card-status-color: var(--card-status-color-mode);
--card-statusindicator-color: var(--card-statusindicator-color-mode);
--card-teaser-title:var(--card-teaser-title-mode);
--card-teaser-txt:var(--card-teaser-txt-mode);
--card-teaser-link: var(--card-teaser-link-mode);
--card-teaser-bg:var(--card-teaser-bg-mode);
--captcha-status-color: var(--captcha-status-color-mode);
}
table.table-card tr .status-indicator {
display: inline-flex;
font-size: 0.875rem;
padding: var(--space-xxs) var(--space-xs);
justify-content: center;
align-items: center;
gap: var(--space-xxs);
text-align: center;
border-radius: var(--roundness-xs);
background-color: var(--card-statusindicator-color) !important;
}
table.table-card tr .status-indicator svg,
table.table-card tr .status-indicator img {
width: var(--space-m);
height: var(--space-m);
fill: currentColor;
overflow: unset;
}
table.table-card tr:focus-within {
outline: var(--border-2) var(--border-style) var(--card-status-color);
outline-offset: var(--border-2);
}
table.table-card tr .status-indicator {
width: 100%;
}
table.table-card tr::before {
content: "";
display: table-cell;
width: var(--space-0);
border-radius: var(--roundness-xs) var(--roundness-0) var(--roundness-0) var(--roundness-xs);
border-left: var(--border-6) var(--border-style) var(--card-status-color);
}
table.table-card td,
table.table-card th {
padding: var(--space-xxs) var(--space-xs) var(--space-xxs) var(--space-m);
}
table.table-card td .footer,
table.table-card th .footer {
height: 100%;
display: flex;
align-items: center;
gap: var(--space-m);
}
@media screen and (max-width: 991px) {
table.table-card td .footer,
table.table-card th .footer {
flex-direction: column;
justify-content: flex-start;
align-self: flex-start;
margin: var(--space-s) var(--space-s) var(--space-0) var(--space-s);
}
}
@media (min-width: 992px) {
table.table-card td .footer,
table.table-card th .footer {
flex-direction: row;
justify-content: flex-start;
padding-left: var(--space-s);
margin: var(--space-0) var(--space-s) var(--space-0) var(--space-s);
}
}
table.table-card td:last-child,
table.table-card th:last-child {
border-radius: var(--roundness-0) var(--roundness-xs) var(--roundness-xs) var(--roundness-0);
}
@media screen and (max-width: 991px) {
.table-reorganise {
border-collapse: separate;
border-spacing: var(--space-xxs) var(--space-s);
}
.table-reorganise thead {
display: none;
}
.table-reorganise tr {
font-size: 1rem;
line-height: 1.5rem;
box-shadow: var(--elevation-1);
border-radius: var(--roundness-xs);
padding: var(--space-m);
}
.table-reorganise td,
.table-reorganise th {
display: block;
word-break: break-word;
white-space: pre-line;
}
.table-reorganise td::before,
.table-reorganise th::before {
content: attr(data-parent);
display: block;
font-size: 1.1rem;
font-weight: 600;
line-height: 2rem;
}
}
.col-auto {
flex: 0 0 auto;
width: auto;
}
.col-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-3 {
flex: 0 0 auto;
width: 25%;
}
.col-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.col-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-9 {
flex: 0 0 auto;
width: 75%;
}
.col-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-12 {
flex: 0 0 auto;
width: 100%;
}
:root {
--base-font-family: Roboto, sans-serif;
font-family: var(--base-font-family);
line-height: 1.7;
font-style: normal;
font-weight: 400;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
--base-font-size: 1em;
--list-marker-color: var(--primary);
--heading-1-margin:var(--space-m);
--heading-1-size:3rem;
--heading-2-margin:var(--space-m);
--heading-2-size:2rem;
--heading-3-margin:var(--space-m);
--heading-3-size:1.625rem;
--heading-4-margin:var(--space-m);
--heading-4-size:1.375rem;
--heading-5-margin:var(--space-xs);
--heading-5-size:1.25rem;
--heading-6-margin:var(--space-xs);
--heading-6-size:1.125rem;
--highlight-color: var(--danger);
--header-branding-wappen-bayern: url('wappen-bayern.550a4ada08bbd036.png');
--header-icon-menu-open: url('close.b8b37c4b9a639589.svg');
--header-icon-menu-closed: url('menu.8fdbf724946beeb6.svg');
--start-page-image: url('start-header-bg.a3e972e7021db359.jpg');
--text-color-start-page-image: var(--white);
--footer-outline-focus: var(--white);
--footer-txt: var(--white);
--header-branding-logo-msb: url('logo-msb-wordmark.57a43f0e39e89a24.svg');
--app-nav-disabled-icon: url('lock.06a525cf13c67644.svg');
--app-nav-collapse-icon: url('arrow_up.1a60f0cf04074c9f.svg');
--link-icon-more-info: url('link.1ef131fdc6c425b0.svg');
--link-icon-external: url('target_blank.d440aceda3333402.svg');
--link-icon-download: url('download.5daecc713c186b14.svg');
--space-0: 0rem;
--space-xxs: 0.25rem;
--space-xs: 0.5rem;
--space-s: 0.75rem;
--space-m: 1rem;
--space-l: 1.5rem;
--space-xl: 2rem;
--space-xxl: 3rem;
--border-0: 0;
--border-1: 0.0625rem;
--border-2: 0.125rem;
--border-3: 0.1875rem;
--border-4: 0.25rem;
--border-5: 0.375rem;
--border-6: 0.5rem;
--border-style: solid;
--roundness-0: 0rem;
--roundness-xxs: 0.25rem;
--roundness-xs: 0.5rem;
--roundness-s: 0.75rem;
--roundness-m: 1rem;
--roundness-l: 1.5rem;
--roundness-xl: 2rem;
--roundness-xxl: 3rem;
--roundness-xxxl: 50%;
--elevation-0:0 0 0 0.0625rem var(--primary);
--elevation-1:0 0.0625rem 0.25rem rgba(0, 0, 0, 0.25);
--elevation-1-hover:0 0.125rem 0.3125rem rgba(0, 0, 0, 0.1);
--elevation-2:0 0.1875011719rem 0.3749953126rem rgba(0, 0, 0, 0.25);
--elevation-3:0 0.4375027344rem 1rem rgba(0, 0, 0, 0.25);
--elevation-4:0 0.4375027344rem 2.25rem rgba(0, 0, 0, 0.25);
--black:#000000;
--white:#ffffff;
--neutral:#494E50;
--neutral-lighter-75:#61676B;
--neutral-lighter-50:#949A9E;
--neutral-lighter-25:#C9CDCF;
--neutral-lighter-5:#E9EAEB;
--neutral-darker-75:#2C2F30;
--neutral-darker-50:#272A2C;
--neutral-darker-25:#232526;
--neutral-darker-5:#1F2122;
--primary:#117dba;
--primary-lighter-75:#4D9DCB;
--primary-lighter-50:#88bedd;
--primary-lighter-25:#c3deee;
--primary-lighter-5:#f3f8fc;
--primary-darker-75:#146694;
--primary-darker-50:#174F6F;
--primary-darker-25:#193849;
--primary-darker-5:#1B262B;
--secondary:#35556C;
--secondary-lighter-75:#678091;
--secondary-lighter-50:#9AAAB6;
--secondary-lighter-25:#CCD5DA;
--secondary-lighter-5:#F5F7F8;
--secondary-darker-75:#2F485A;
--secondary-darker-50:#283B47;
--secondary-darker-25:#222E35;
--secondary-darker-5:#1D2427;
--success:#257310;
--success-lighter-75:#5C964C;
--success-lighter-50:#92B987;
--success-lighter-25:#C8DCC3;
--success-lighter-5:#F4F8F3;
--success-darker-75:#235F15;
--success-darker-50:#204A19;
--success-darker-25:#1E351E;
--success-darker-5:#1C2522;
--help:#EBD314;
--help-lighter-75:#F0DE4F;
--help-lighter-50:#F5E989;
--help-lighter-25:#FAF4C4;
--help-lighter-5:#FEFDF3;
--help-darker-75:#B7A618;
--help-darker-50:#837A1B;
--help-darker-25:#504E1F;
--help-darker-5:#262A22;
--warning:#F5723C;
--warning-lighter-75:#F8956D;
--warning-lighter-50:#FAB99E;
--warning-lighter-25:#FDDCCE;
--warning-lighter-5:#FFF8F5;
--warning-darker-75:#BF5E36;
--warning-darker-50:#884930;
--warning-darker-25:#523529;
--warning-darker-5:#272524;
--danger:#C91432;
--danger-lighter-75:#D74F65;
--danger-lighter-50:#E48999;
--danger-lighter-25:#F2C4CC;
--danger-lighter-5:#FCF3F5;
--danger-darker-75:#9E172E;
--danger-darker-50:#721A2A;
--danger-darker-25:#471E27;
--danger-darker-5:#252024;
--mode:#9B50D7;
--mode-lighter-75:#B47CE1;
--mode-lighter-50:#CDA7EB;
--mode-lighter-25:#E6D3F5;
--mode-lighter-5:#FAF6FD;
--mode-darker-75:#743CA1;
--mode-darker-50:#4E286C;
--mode-darker-25:#271436;
--mode-darker-5:#08040B;
--input-size: 1rem;
--input-padding-top: var(--space-xs);
--input-margin-bottom: calc(var(--input-size) / 4);
--input-padding-side: calc(var(--input-size) / 2);
--input-height: 2.8125rem;
--input-label-top: var(--input-size);
--input-padding-icon: var(--space-0);
--input-padding-info: var(--space-s);
--input-width: calc(100% - var(--space-xs) - var(--input-padding-right));
--input-padding-top: var(--space-s);
--input-margin-bottom: var(--space-0);
--input-select-icon: url('arrow_down.b085ed0def58ea0d.svg');
--input-slide-icon-lock: url('lock_filled.a08c77de2518aba0.svg');
--input-icon-camera: url('camera.33f6ee6d6ddc2fa3.svg');
--input-icon-upload: url('upload.745e3800eac90139.svg');
--button-icon-back-to-top: url('arrow_up.1a60f0cf04074c9f.svg');
--button-icon-close: url('close.b8b37c4b9a639589.svg');
--button-icon-info: url('info.d4af934cdb7d8055.svg');
--button-icon-download: url('download.5daecc713c186b14.svg');
--button-icon-download-busy: url('download_animated.5d8370f5fd02b030.svg');
--button-icon-download-failed: url('close.b8b37c4b9a639589.svg');
--button-icon-download-success: url('check.3e77a1214663c023.svg');
--button-icon-sort: url('sort.3f4c1d03bcf553ad.svg');
--button-icon-sort-asc: url('arrow_down.b085ed0def58ea0d.svg');
--button-icon-sort-desc: url('arrow_up.1a60f0cf04074c9f.svg');
--carousel-button-bg: transparent;
--carousel-button-status-hover-color: transparent;
--carousel-play-img: url('play.48812c8b6130d6ba.svg');
--carousel-break-img: url('pause.c1e1a9393cee06fb.svg');
--carousel-prev-img: url('arrow_left.ec23bfbf97710f45.svg');
--carousel-next-img: url('arrow_right.dfbbbc2bcb0fc683.svg');
--carousel-indicator-img: url('rectangle.bc42c3d4fa33a7f2.svg');
--chip-bg-neutral: var(--neutral);
--chip-color-neutral: var(--white);
--chip-hover-bg-neutral: var(--neutral-75);
--close-color-neutral: var(--white);
--chip-bg-primary: var(--primary);
--chip-color-primary: var(--white);
--chip-hover-bg-primary: var(--primary-75);
--close-color-primary: var(--white);
--chip-bg-secondary: var(--secondary);
--chip-color-secondary: var(--white);
--chip-hover-bg-secondary: var(--secondary-75);
--close-color-secondary: var(--white);
--chip-bg-success: var(--success);
--chip-color-success: var(--white);
--chip-hover-bg-success: var(--success-75);
--close-color-success: var(--white);
--chip-bg-help: var(--help);
--chip-color-help: var(--black);
--chip-hover-bg-help: var(--help-75);
--close-color-help: var(--black);
--chip-bg-warning: var(--warning);
--chip-color-warning: var(--black);
--chip-hover-bg-warning: var(--warning-75);
--close-color-warning: var(--black);
--chip-bg-danger: var(--danger);
--chip-color-danger: var(--white);
--chip-hover-bg-danger: var(--danger-75);
--close-color-danger: var(--white);
--chip-bg-mode: var(--mode);
--chip-color-mode: var(--white);
--chip-hover-bg-mode: var(--mode-75);
--close-color-mode: var(--white);
--dialog-width: fit-content;
--dialog-max-width: 31.25rem;
--expansion-icon:url('arrow_down.b085ed0def58ea0d.svg');
--stepper-scroll-forward-icon: url('arrow_right.dfbbbc2bcb0fc683.svg');
--stepper-scroll-backward-icon: url('arrow_left.ec23bfbf97710f45.svg');
--stepper-error-icon: url('warning.dcb5cc488c2d2770.svg');
--stepper-checked-icon: url('check.3e77a1214663c023.svg');
--notification-border: var(--border-2) var(--border-style) transparent;
--notification-icon-notification-danger:url('warning.dcb5cc488c2d2770.svg');
--notification-icon-notification-success:url('check_filled.e20dfa62f4c75bc3.svg');
--notification-icon-notification-warning:url('warning.dcb5cc488c2d2770.svg');
--notification-icon-notification-intruction:url('info.d4af934cdb7d8055.svg');
--notification-icon-notification-new:url('neu.f314f71d68bef94a.svg');
--notification-global-icon-notification-info:url('info_filled.7b369ef73bbe1b61.svg');
--notification-global-icon-notification-warning:url('warning.dcb5cc488c2d2770.svg');
--notification-global-icon-notification-error:url('warning.dcb5cc488c2d2770.svg');
--tab-icon-lock: url('lock.06a525cf13c67644.svg');
--tab-icon-forward: url('arrow_right.dfbbbc2bcb0fc683.svg');
--tab-icon-reverse: url('arrow_left.ec23bfbf97710f45.svg');
--tooltip-position: 1.75rem;
--filter-icon: url('filter.a4e474daa7f39b5b.svg');
--sort-icon: url('sort.3f4c1d03bcf553ad.svg');
--filter-active-indicator: var(--danger);
--body-bg: var(--white);
--body-color: var(--black);
--disabled: var(--neutral-25);
--neutral-75:var(--neutral-lighter-75);
--neutral-50:var(--neutral-lighter-50);
--neutral-25:var(--neutral-lighter-25);
--neutral-5:var(--neutral-lighter-5);
--primary-75:var(--primary-lighter-75);
--primary-50:var(--primary-lighter-50);
--primary-25:var(--primary-lighter-25);
--primary-5:var(--primary-lighter-5);
--secondary-75:var(--secondary-lighter-75);
--secondary-50:var(--secondary-lighter-50);
--secondary-25:var(--secondary-lighter-25);
--secondary-5:var(--secondary-lighter-5);
--success-75:var(--success-lighter-75);
--success-50:var(--success-lighter-50);
--success-25:var(--success-lighter-25);
--success-5:var(--success-lighter-5);
--help-75:var(--help-lighter-75);
--help-50:var(--help-lighter-50);
--help-25:var(--help-lighter-25);
--help-5:var(--help-lighter-5);
--warning-75:var(--warning-lighter-75);
--warning-50:var(--warning-lighter-50);
--warning-25:var(--warning-lighter-25);
--warning-5:var(--warning-lighter-5);
--danger-75:var(--danger-lighter-75);
--danger-50:var(--danger-lighter-50);
--danger-25:var(--danger-lighter-25);
--danger-5:var(--danger-lighter-5);
--mode-75:var(--mode-lighter-75);
--mode-50:var(--mode-lighter-50);
--mode-25:var(--mode-lighter-25);
--mode-5:var(--mode-lighter-5);
--border-color: var(--primary);
--border-color-neutral:var(--neutral);
--border-color-primary:var(--primary);
--border-color-secondary:var(--secondary);
--border-color-success:var(--success);
--border-color-help:var(--help);
--border-color-warning:var(--warning);
--border-color-danger:var(--danger);
--border-color-mode:var(--mode);
--icon-color: var(--black);
--icon-color-neutral:var(--neutral);
--icon-color-primary:var(--primary);
--icon-color-secondary:var(--secondary);
--icon-color-success:var(--success);
--icon-color-help:var(--help);
--icon-color-warning:var(--warning);
--icon-color-danger:var(--danger);
--icon-color-mode:var(--mode);
--app-nav-fullnav-bg:var(--secondary-darker-75);
--app-nav-icon: var(--white);
--app-nav-txt:var(--white);
--app-nav-locked-txt: var(--neutral-25);
--app-nav-menu-item-bg-current: var(--secondary-darker-25);
--app-nav-menu-item-bg-hover: var(--secondary-darker-50);
--footer-bg: var(--neutral);
--footer-bg-focus: var(--neutral);
--footer-bg-current: var(--neutral-darker-5);
--footer-bg-hover: var(--neutral-darker-75);
--footer-txt-hover: var(--neutral-5);
--header-branding-bg: var(--white);
--header-branding-icon: var(--primary);
--header-logo-freistaatbayern: var(--primary);
--header-branding-supplement: var(--primary);
--header-branding-supplement-danger: var(--danger);
--header-logo-primary: var(--primary);
--header-logo-secondary: var(--primary-darker-50);
--header-menu-item-bg-hover: var(--primary-5);
--header-menu-item-outline: var(--primary);
--header-menu-item-text-hover: var(--secondary);
--header-menu-item-txt: var(--primary);
--header-menu-primary-bg: var(--white);
--header-menu-secondary-bg: var(--secondary-5);
--header-menu-secondary-txt: var(--secondary);
--header-menu-secondary-txt-hover: var(--secondary-lighter-75);
--header-moreapps-bg: var(--primary);
--header-moreapps-txt: var(--white);
--header-top-bg: var(--secondary-5);
--header-top-icon: var(--secondary);
--header-top-txt: var(--secondary);
--header-branding-logo-color: var(--primary);
--link-color: var(--primary);
--download-link-color: var(--primary);
--download-link-bg: transparent;
--download-link-txt-hover: var(--white);
--download-link-border: var(--neutral-50);
--horizontal-line-color: var(--neutral-25);
--delete-color: var(--danger);
--insert-color: var(--success);
--mark-color: var(--help-25);
--heading-1-color:var(--secondary);
--heading-2-color:var(--secondary);
--heading-3-color:var(--secondary);
--heading-4-color:var(--secondary);
--heading-5-color:var(--secondary);
--heading-6-color:var(--secondary);
--help-tooltip-bg: var(--help-25);
--help-tooltip-border: var(--neutral-25);
--help-sidebar-bg: var(--white);
--help-sidebar-header-bg: var(--help-25);
--help-close-button-bg: var(--help-50);
--help-txt: var(--neutral-darker-50);
--placeholder-background: var(--black);
--placeholder-wave: var(--white);
--spinner-color: var(--primary);
--spinner-color-neutral:var(--neutral);
--spinner-color-primary:var(--primary);
--spinner-color-secondary:var(--secondary);
--spinner-color-success:var(--success);
--spinner-color-help:var(--help);
--spinner-color-warning:var(--warning);
--spinner-color-danger:var(--danger);
--spinner-color-mode:var(--mode);
--fieldset: var(--neutral-5);
--input-bg: var(--white);
--input-neutral-bg: var(--neutral-5);
--input-line: var(--neutral-darker-5);
--input-required: var(--primary-darker-75);
--input-label: var(--primary);
--input-neutral-label: var(--primary-darker-75);
--input-value: var(--neutral-darker-5);
--input-select-bg: var(--secondary);
--input-select-txt: var(--white);
--input-select-hover-bg: var(--secondary-50);
--input-select-hover-txt: var(--black);
--input-placeholder: var(--neutral-50);
--input-disabled: var(--neutral-50);
--input-invalid: var(--danger);
--input-invalid-radio: var(--danger-25);
--input-valid: var(--success);
--input-valid-radio: var(--success-25);
--input-slide-checked: var(--primary);
--input-slide-unchecked: var(--neutral-75);
--input-slide: var(--white);
--select-line: var(--neutral-darker-5);
--select-bg: var(--white);
--button-status-color: var(--white);
--button-status-contrast-color: var(--black);
--button-status-hover-color: var(--white);
--button-status-disabled-color: var(--neutral-50);
--button-status-disabled-contrast-color: var(--neutral-75);
--button-outline-status-color: var(--white);
--button-opacity-bg: var(--white);
--button-opacity-color: var(--black);
--button-opacity-hover: var(--white);
--button-status-color-neutral:var(--neutral);
--button-status-contrast-color-neutral: var(--white);
--button-status-hover-color-neutral:var(--neutral-75);
--button-status-outline-color-neutral:var(--neutral);
--button-outline-status-color-neutral:var(--neutral);
--button-opacity-bg-neutral: var(--neutral-5);
--button-opacity-color-neutral: var(--neutral-darker-75);
--button-opacity-hover-neutral: var(--neutral-lighter-75);
--button-status-color-primary:var(--primary);
--button-status-contrast-color-primary: var(--white);
--button-status-hover-color-primary:var(--primary-75);
--button-status-outline-color-primary:var(--primary);
--button-outline-status-color-primary:var(--primary);
--button-opacity-bg-primary: var(--primary-5);
--button-opacity-color-primary: var(--primary-darker-75);
--button-opacity-hover-primary: var(--primary-lighter-75);
--button-status-color-secondary:var(--secondary);
--button-status-contrast-color-secondary: var(--white);
--button-status-hover-color-secondary:var(--secondary-75);
--button-status-outline-color-secondary:var(--secondary);
--button-outline-status-color-secondary:var(--secondary);
--button-opacity-bg-secondary: var(--secondary-5);
--button-opacity-color-secondary: var(--secondary-darker-75);
--button-opacity-hover-secondary: var(--secondary-lighter-75);
--button-status-color-success:var(--success);
--button-status-contrast-color-success: var(--white);
--button-status-hover-color-success:var(--success-75);
--button-status-outline-color-success:var(--success);
--button-outline-status-color-success:var(--success);
--button-opacity-bg-success: var(--success-5);
--button-opacity-color-success: var(--success-darker-75);
--button-opacity-hover-success: var(--success-lighter-75);
--button-status-color-help:var(--help);
--button-status-contrast-color-help: var(--black);
--button-status-hover-color-help:var(--help-darker-50);
--button-status-outline-color-help:var(--help);
--button-outline-status-color-help:var(--help-darker-25);
--button-opacity-bg-help: var(--help-5);
--button-opacity-color-help: var(--help-darker-25);
--button-opacity-hover-help: var(--help);
--button-status-color-warning:var(--warning);
--button-status-contrast-color-warning: var(--black);
--button-status-hover-color-warning:var(--warning-darker-75);
--button-status-outline-color-warning:var(--warning);
--button-outline-status-color-warning:var(--warning-darker-50);
--button-opacity-bg-warning: var(--warning-5);
--button-opacity-color-warning: var(--warning-darker-50);
--button-opacity-hover-warning: var(--warning);
--button-status-color-danger:var(--danger);
--button-status-contrast-color-danger: var(--white);
--button-status-hover-color-danger:var(--danger-75);
--button-status-outline-color-danger:var(--danger);
--button-outline-status-color-danger:var(--danger);
--button-opacity-bg-danger: var(--danger-5);
--button-opacity-color-danger: var(--danger-darker-75);
--button-opacity-hover-danger: var(--danger-lighter-75);
--button-status-color-mode:var(--mode);
--button-status-contrast-color-mode: var(--white);
--button-status-hover-color-mode:var(--mode-75);
--button-status-outline-color-mode:var(--mode);
--button-outline-status-color-mode:var(--mode);
--button-opacity-bg-mode: var(--mode-5);
--button-opacity-color-mode: var(--mode-darker-75);
--button-opacity-hover-mode: var(--mode-lighter-75);
--newslist-bg: var(--neutral-5);
--card-link: var(--link-color);
--card-status-color: var(--neutral-75);
--card-statusindicator-color: var(--neutral-25);
--card-bg: var(--white);
--card-color: var(--neutral-darker-50);
--card-teaser-link: var(--primary);
--card-teaser-txt: var(--neutral);
--card-teaser-title: var(--secondary);
--card-teaser-bg: var(--white);
--card-page-teaser-title: var(--secondary);
--card-badge-bg: var(--warning);
--card-badge-txt: var(--black);
--captcha-status-color:var(--primary);
--card-footer-line-color:var(--neutral-25);
--card-teaser-txt-neutral:var(--white);
--card-teaser-title-neutral:var(--white);
--card-teaser-link-neutral:var(--white);
--card-teaser-bg-neutral:var(--neutral);
--card-status-color-neutral:var(--neutral);
--captcha-status-color-neutral:var(--neutral);
--card-statusindicator-color-neutral:var(--neutral-25);
--card-teaser-txt-primary:var(--white);
--card-teaser-title-primary:var(--white);
--card-teaser-link-primary:var(--white);
--card-teaser-bg-primary:var(--primary);
--card-status-color-primary:var(--primary);
--captcha-status-color-primary:var(--primary);
--card-statusindicator-color-primary:var(--primary-25);
--card-teaser-txt-secondary:var(--white);
--card-teaser-title-secondary:var(--white);
--card-teaser-link-secondary:var(--white);
--card-teaser-bg-secondary:var(--secondary);
--card-status-color-secondary:var(--secondary);
--captcha-status-color-secondary:var(--secondary);
--card-statusindicator-color-secondary:var(--secondary-25);
--card-teaser-txt-success:var(--white);
--card-teaser-title-success:var(--white);
--card-teaser-link-success:var(--white);
--card-teaser-bg-success:var(--success);
--card-status-color-success:var(--success);
--captcha-status-color-success:var(--success);
--card-statusindicator-color-success:var(--success-25);
--card-teaser-txt-help:var(--black);
--card-teaser-title-help:var(--black);
--card-teaser-link-help:var(--black);
--card-teaser-bg-help:var(--help);
--card-status-color-help:var(--help);
--captcha-status-color-help:var(--help);
--card-statusindicator-color-help:var(--help-25);
--card-teaser-txt-warning:var(--black);
--card-teaser-title-warning:var(--black);
--card-teaser-link-warning:var(--black);
--card-teaser-bg-warning:var(--warning);
--card-status-color-warning:var(--warning);
--captcha-status-color-warning:var(--warning);
--card-statusindicator-color-warning:var(--warning-25);
--card-teaser-txt-danger:var(--white);
--card-teaser-title-danger:var(--white);
--card-teaser-link-danger:var(--white);
--card-teaser-bg-danger:var(--danger);
--card-status-color-danger:var(--danger);
--captcha-status-color-danger:var(--danger);
--card-statusindicator-color-danger:var(--danger-25);
--card-teaser-txt-mode:var(--white);
--card-teaser-title-mode:var(--white);
--card-teaser-link-mode:var(--white);
--card-teaser-bg-mode:var(--mode);
--card-status-color-mode:var(--mode);
--captcha-status-color-mode:var(--mode);
--card-statusindicator-color-mode:var(--mode-25);
--carousel-figcaption-bg: rgba(255, 255, 255, .625);
--carousel-topcarousel-bg: var(--neutral-5);
--carousel-footer-bg: var(--white);
--carousel-button-status-color: var(--primary);
--carousel-button-status-txt-hover-color: var(--primary);
--carousel-button-status-txt-color: var(--neutral-50);
--carousel-button-status-hover-bg: var(--white);
--carousel-indicator-bg: var(--white);
--carousel-indicator-active-txt: var(--success);
--chip-bg: var(--neutral-5);
--chip-color: var(--neutral-darker-50);
--chip-hover-bg: var(--neutral-25);
--close-background-color: var(--neutral-75);
--close-color: var(--white);
--close-background-color-neutral:var(--neutral-darker-75);
--close-background-color-primary:var(--primary-darker-75);
--close-background-color-secondary:var(--secondary-darker-75);
--close-background-color-success:var(--success-darker-75);
--close-background-color-help:var(--help-darker-75);
--close-background-color-warning:var(--warning-darker-75);
--close-background-color-danger:var(--danger-darker-75);
--close-background-color-mode:var(--mode-darker-75);
--dialog-bg: var(--white);
--dialog-outline: var(--primary);
--dialog-title: var(--secondary);
--dialog-content-color: var(--black);
--expansion-bg: var(--white);
--expansion-title: var(--primary);
--expansion-title-hover: var(--secondary);
--stepper-color: var(--neutral);
--stepper-background-color: var(--white);
--stepper-line-neutral: var(--neutral-lighter-25);
--stepper-line-secondary: var(--secondary);
--stepper-dot-background-neutral: var(--neutral-lighter-25);
--stepper-dot-background-primary: var(--primary);
--stepper-dot-background-secondary: var(--secondary);
--stepper-dot-background-danger: var(--danger);
--stepper-number-neutral: var(--neutral-darker-75);
--stepper-number-primary: var(--white);
--stepper-icon-color: var(--white);
--stepper-scroll-bg: var(--white);
--stepper-scroll-txt: var(--primary);
--notification-global-txt: var(--neutral-darker-5);
--notification-bg: var(--white);
--notification-highlight: var(--neutral-5);
--notification-global-bg: var(--neutral-5);
--notification-bg-neutral: var(--neutral-5);
--notification-highlight-neutral: var(--neutral);
--notification-global-bg-neutral: var(--neutral);
--notification-global-txt-neutral: var(--white);
--notification-bg-primary: var(--primary-5);
--notification-highlight-primary: var(--primary);
--notification-global-bg-primary: var(--primary);
--notification-global-txt-primary: var(--white);
--notification-bg-secondary: var(--secondary-5);
--notification-highlight-secondary: var(--secondary);
--notification-global-bg-secondary: var(--secondary);
--notification-global-txt-secondary: var(--white);
--notification-bg-success: var(--success-5);
--notification-highlight-success: var(--success);
--notification-global-bg-success: var(--success);
--notification-global-txt-success: var(--white);
--notification-bg-help: var(--help-5);
--notification-highlight-help: var(--help);
--notification-global-bg-help: var(--help);
--notification-global-txt-help: var(--black);
--notification-bg-warning: var(--warning-5);
--notification-highlight-warning: var(--warning);
--notification-global-bg-warning: var(--warning);
--notification-global-txt-warning: var(--black);
--notification-bg-danger: var(--danger-5);
--notification-highlight-danger: var(--danger);
--notification-global-bg-danger: var(--danger);
--notification-global-txt-danger: var(--white);
--notification-bg-mode: var(--mode-5);
--notification-highlight-mode: var(--mode);
--notification-global-bg-mode: var(--mode);
--notification-global-txt-mode: var(--white);
--qr-color:var(--neutral-darker-5);
--qr-bg:var(--secondary-5);
--snackbar-bg: var(--white);
--snackbar-color: var(--neutral);
--snackbar-close-bg: var(--primary-5);
--snackbar-close-color: var(--primary);
--snackbar-color-neutral:var(--neutral);
--snackbar-color-primary:var(--primary);
--snackbar-color-secondary:var(--secondary);
--snackbar-color-success:var(--success);
--snackbar-color-help:var(--help-darker-25);
--snackbar-color-warning:var(--warning-darker-50);
--snackbar-color-danger:var(--danger);
--snackbar-color-mode:var(--mode);
--table-txt: var(--neutral-darker-5);
--table-bg: var(--white);
--table-caption-txt: var(--heading-3-color);
--table-border: var(--neutral-5);
--table-striped-bg: var(--secondary-25);
--table-striped-txt: var(--body-color);
--table-hover-bg: var(--primary);
--table-hover-txt: var(--white);
--table-sort-txt: var(--neutral-75);
--mini-card-header-bg: var(--neutral-5);
--mini-card-header-text: var(--primary-darker-75);
--tablist-bg: var(--neutral-5);
--tablist-border: var(--neutral-25);
--tabs-txt: var(--neutral-darker-50);
--tabs-current: var(--primary-darker-75);
--tabs-hover: var(--primary-75);
--tabs-locked: var(--neutral-50);
--tabs-scroll-bg: var(--white);
--tabs-scroll-txt: var(--primary);
--tooltip-bg: var(--white);
--tooltip-border: var(--neutral-25);
--tooltip-txt: var(--neutral-darker-5);
--filter-active-indicator: var(--danger);
--filter-active-indicator-border: var(--white);
--filter-icon-background: var(--primary);
--filter-dialog-background: var(--white);
--filter-dialog-border: var(--neutral-lighter-25);
--breadcrumbs-bg: var(--neutral-5);
--breadcrumbs-current-txt: var(--primary-darker-75);
--breadcrumbs-divider: var(--primary-darker-75);
}
a {
color: var(--link-color);
outline-offset: var(--border-2);
outline: var(--border-2) var(--border-style) transparent;
}
a:focus {
border-radius: var(--roundness-xxs);
outline-color: var(--link-color);
}
a.icon-right[target=_blank]:not(.btn, .card):not(.more-info, .with-icon):after, a.icon-right.more-info:not(.btn, .with-icon):after {
content: "";
display: inline-flex;
align-self: first baseline;
margin-top: var(--space-xxs);
height: 1em;
min-height: 1em;
width: 1em;
min-width: 1em;
aspect-ratio: 1;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
a.icon-right[target=_blank]:is(.btn):not(.more-info, .with-icon):after, a.icon-right.more-info:is(.btn):not(.with-icon):after {
content: "";
display: inline-flex;
align-self: center;
height: 1em;
min-height: 1em;
width: 1em;
min-width: 1em;
aspect-ratio: 1;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
a.icon-right[target=_blank]:not(.more-info, .with-icon)::after {
-webkit-mask-image: var(--link-icon-external);
mask-image: var(--link-icon-external);
}
a.icon-right.more-info:not(.with-icon)::after {
-webkit-mask-image: var(--link-icon-more-info);
mask-image: var(--link-icon-more-info);
}
a[target=_blank], a.more-info, a.with-icon {
display: inline-flex;
gap: var(--space-xs);
margin: var(--space-0);
transition: all 400ms ease-in-out;
}
a[target=_blank]:hover, a.more-info:hover, a.with-icon:hover {
text-decoration: none;
}
a[target=_blank]:hover span, a.more-info:hover span, a.with-icon:hover span {
text-decoration: none;
}
a:not(.icon-right)[target=_blank]:not(.btn, .card):not(.more-info, .with-icon):before, a:not(.icon-right).more-info:not(.btn, .with-icon):before {
content: "";
display: inline-flex;
align-self: first baseline;
margin-top: var(--space-xxs);
height: 1em;
min-height: 1em;
width: 1em;
min-width: 1em;
aspect-ratio: 1;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
a:not(.icon-right)[target=_blank]:is(.btn):not(.more-info, .with-icon):before, a:not(.icon-right).more-info:is(.btn):not(.with-icon):before {
content: "";
display: inline-flex;
align-self: center;
height: 1em;
min-height: 1em;
width: 1em;
min-width: 1em;
aspect-ratio: 1;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
a:not(.icon-right)[target=_blank]:not(.more-info, .with-icon)::before {
-webkit-mask-image: var(--link-icon-external);
mask-image: var(--link-icon-external);
}
a:not(.icon-right).more-info:not(.with-icon)::before {
-webkit-mask-image: var(--link-icon-more-info);
mask-image: var(--link-icon-more-info);
}
a.with-icon:not(.more-info) > svg {
height: 1em;
min-height: 1em;
width: 1em;
min-width: 1em;
aspect-ratio: 1;
-webkit-mask-size: cover;
mask-size: cover;
margin-top: var(--space-xxs);
display: inline-flex;
align-self: first baseline;
fill: currentColor;
}
dialog.dialog {
isolation: isolate;
display: grid;
visibility: hidden;
position: fixed;
padding: var(--space-m);
background-color: var(--dialog-bg);
width: var(--dialog-width);
max-width: var(--dialog-max-width);
border: 0;
color: var(--dialog-content-color);
border-radius: var(--roundness-s);
box-shadow: var(--elevation-4);
}
dialog.dialog[data-inline] {
position: absolute;
display: none;
z-index: 1;
}
dialog.dialog[data-modal]::backdrop {
opacity: 0;
background-color: var(--color-backdrop);
}
dialog.dialog:not([data-modal]) {
border: var(--border-2) var(--border-style) var(--dialog-outline);
}
dialog.dialog:not([data-modal])::backdrop {
background-color: transparent;
}
dialog.dialog[open] {
visibility: visible;
transform: scale(1);
animation: show-dialog 400ms ease-in;
}
dialog.dialog[open][data-inline] {
display: block;
}
dialog.dialog[open][data-modal]::backdrop {
opacity: 0.7;
animation: show-backdrop 400ms ease-in;
}
dialog.dialog.hide {
animation: hide-dialog 400ms ease-out;
}
dialog.dialog.hide[data-modal]::backdrop {
animation: hide-backdrop 400ms ease-out;
}
dialog.dialog .header,
dialog.dialog header {
position: initial;
isolation: unset;
z-index: unset;
box-shadow: none;
grid-row: 1;
font-size: 1.1875rem;
font-weight: 500;
color: var(--dialog-title);
padding-bottom: var(--space-m);
}
dialog.dialog .body {
grid-row: 2;
padding-top: var(--space-m);
padding-bottom: var(--space-m);
}
dialog.dialog .footer,
dialog.dialog footer {
grid-area: unset;
background-color: transparent;
grid-row: 3;
margin-top: auto;
margin-bottom: unset;
column-gap: var(--space-xs);
display: flex;
justify-content: space-between;
padding-top: var(--space-m);
}
@media (min-width: 576px) {
dialog.dialog.sm {
--dialog-max-width: 540px;
--dialog-width: auto;
}
}
@media (min-width: 992px) {
dialog.dialog.lg {
--dialog-max-width: 960px;
--dialog-width: auto;
}
}
@media (min-width: 1200px) {
dialog.dialog.xl {
--dialog-max-width: 1140px;
--dialog-width: auto;
}
}
dialog.dialog.scrollable[open] {
max-height: 90%;
display: flex;
flex-direction: column;
}
dialog.dialog.scrollable[open] .header {
flex-shrink: 0;
max-height: 10%;
}
dialog.dialog.scrollable[open] .body {
overflow-y: auto;
}
dialog.dialog.scrollable[open] .footer {
flex-shrink: 0;
max-height: 10%;
}
dialog.sidebar-help {
display: none;
visibility: hidden;
background-color: var(--help-sidebar-bg);
color: var(--help-txt);
width: 0;
height: 80vh;
border: var(--border-0);
box-shadow: var(--elevation-2);
border-radius: var(--roundness-s);
padding: var(--space-0);
box-shadow: var(--elevation-2);
}
dialog.sidebar-help::backdrop {
background-color: transparent;
}
dialog.sidebar-help[open] {
display: block;
margin-right: var(--space-0);
visibility: visible;
animation: slide-in 400ms ease-in-out;
}
@media (min-width: 992px) {
dialog.sidebar-help[open] {
width: 20vw;
}
}
@media screen and (max-width: 991px) {
dialog.sidebar-help[open] {
width: 80vw;
}
}
dialog.sidebar-help.hide {
animation: slide-out 400ms ease-in-out;
}
dialog.sidebar-help .header,
dialog.sidebar-help header {
position: initial;
isolation: unset;
z-index: unset;
box-shadow: none;
display: flex;
padding: var(--space-m);
align-items: flex-start;
align-self: stretch;
background-color: var(--help-sidebar-header-bg);
font-size: 1.125rem;
line-height: 150%;
color: var(--help-txt);
justify-content: space-between;
flex-direction: row;
gap: var(--space-xxs);
text-wrap: pretty;
/** Für Firefox => kann text-wrap nicht **/
white-space: pre-wrap;
word-wrap: break-word;
}
dialog.sidebar-help .header button[data-close],
dialog.sidebar-help header button[data-close] {
color: var(--help-txt);
background-color: var(--help-close-button-bg);
height: 2rem;
min-height: 2rem;
width: 2rem;
min-width: 2rem;
aspect-ratio: 1;
}
dialog.sidebar-help .header button[data-close]:after,
dialog.sidebar-help header button[data-close]:after {
display: block;
height: 1rem;
min-height: 1rem;
width: 1rem;
min-width: 1rem;
aspect-ratio: 1;
inset: 0;
background-color: currentColor;
}
dialog.sidebar-help .header button[data-close]:focus, dialog.sidebar-help .header button[data-close]:active,
dialog.sidebar-help header button[data-close]:focus,
dialog.sidebar-help header button[data-close]:active {
outline-offset: var(--border-2);
outline-color: currentColor;
}
dialog.sidebar-help .header button[data-close]:hover,
dialog.sidebar-help header button[data-close]:hover {
outline-offset: var(--border-2);
outline: var(--border-2) var(--border-style) currentColor;
}
dialog.sidebar-help .content {
display: flex;
padding: var(--space-m);
align-items: flex-start;
gap: var(--space-xl);
text-overflow: ellipsis;
font-size: 1rem;
line-height: 150%;
text-wrap: pretty;
/** Für Firefox => kann text-wrap nicht **/
white-space: pre-wrap;
word-wrap: break-word;
}
dialog.sort,
dialog.filter {
isolation: isolate;
display: none;
visibility: hidden;
background-color: var(--filter-dialog-background);
padding: var(--space-xs);
margin: var(--space-0);
margin-top: var(--space-m);
color: var(--help-txt);
border: var(--border-0);
border-radius: var(--roundness-s);
min-width: 17.375rem;
max-width: var(--dialog-max-width);
box-shadow: var(--elevation-2);
}
dialog.sort[open],
dialog.filter[open] {
position: absolute;
display: block;
padding: var(--space-m);
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 2;
border: var(--border-2) var(--border-style) var(--filter-dialog-border);
left: unset;
right: var(--space-0);
top: var(--space-0);
bottom: unset;
}
dialog.sort[open].left,
dialog.filter[open].left {
top: var(--space-0);
left: var(--space-0);
}
dialog.sort[open].left::before,
dialog.filter[open].left::before {
left: var(--space-m);
right: unset;
top: calc(-1 * var(--space-s));
bottom: unset;
}
dialog.sort[open].top,
dialog.filter[open].top {
top: unset;
bottom: var(--space-m);
right: var(--space-0);
left: unset;
}
dialog.sort[open].top::before,
dialog.filter[open].top::before {
right: var(--space-m);
left: unset;
top: unset;
bottom: calc(-1 * var(--space-s));
transform: rotate(135deg);
}
dialog.sort[open].top.left,
dialog.filter[open].top.left {
left: var(--space-0);
}
dialog.sort[open].top.left::before,
dialog.filter[open].top.left::before {
left: var(--space-m);
right: unset;
}
dialog.sort::before,
dialog.filter::before {
content: "";
display: block;
visibility: hidden;
width: 1em;
height: 1em;
top: calc(-1 * var(--space-s));
bottom: unset;
right: var(--space-m);
left: unset;
position: absolute;
visibility: visible;
background: var(--filter-dialog-background);
border-right: var(--border-2) var(--border-style) var(--filter-dialog-border);
border-top: var(--border-2) var(--border-style) var(--filter-dialog-border);
transform: rotate(-45deg);
}
dialog.sort .body,
dialog.filter .body {
display: flex;
flex-direction: column;
gap: var(--space-m);
padding-top: var(--space-m);
}
dialog.sort .footer,
dialog.filter .footer {
display: flex;
gap: var(--space-m);
justify-content: flex-end;
padding-top: var(--space-m);
}
::backdrop {
--color-backdrop: #000;
}
@charset "UTF-8";
/* Einige Variablen ändern, so dass es ähnlicher zum Portal wird. */
:root {
--color-validation-error: var(--color-danger-100) ;
}
/* ---------------------------
Paletten (mit CSS-Variablen)
--------------------------- */
/* ---------------------------
Material-Paletten & Theme
--------------------------- */
/* ---------------------------
Mixins nach Theme-Definition
--------------------------- */
/* Komponenten-Styles aus dem Theme */
html {
--mat-app-background-color: #fafafa;
--mat-app-text-color: rgba(0, 0, 0, 0.87);
--mat-app-elevation-shadow-level-0: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-1: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-2: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-3: 0px 3px 3px -2px rgba(0, 0, 0, 0.2), 0px 3px 4px 0px rgba(0, 0, 0, 0.14), 0px 1px 8px 0px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 5px 8px 0px rgba(0, 0, 0, 0.14), 0px 1px 14px 0px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-6: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-7: 0px 4px 5px -2px rgba(0, 0, 0, 0.2), 0px 7px 10px 1px rgba(0, 0, 0, 0.14), 0px 2px 16px 1px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-8: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-9: 0px 5px 6px -3px rgba(0, 0, 0, 0.2), 0px 9px 12px 1px rgba(0, 0, 0, 0.14), 0px 3px 16px 2px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-10: 0px 6px 6px -3px rgba(0, 0, 0, 0.2), 0px 10px 14px 1px rgba(0, 0, 0, 0.14), 0px 4px 18px 3px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-11: 0px 6px 7px -4px rgba(0, 0, 0, 0.2), 0px 11px 15px 1px rgba(0, 0, 0, 0.14), 0px 4px 20px 3px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-12: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-13: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 13px 19px 2px rgba(0, 0, 0, 0.14), 0px 5px 24px 4px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-14: 0px 7px 9px -4px rgba(0, 0, 0, 0.2), 0px 14px 21px 2px rgba(0, 0, 0, 0.14), 0px 5px 26px 4px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-15: 0px 8px 9px -5px rgba(0, 0, 0, 0.2), 0px 15px 22px 2px rgba(0, 0, 0, 0.14), 0px 6px 28px 5px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-16: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-17: 0px 8px 11px -5px rgba(0, 0, 0, 0.2), 0px 17px 26px 2px rgba(0, 0, 0, 0.14), 0px 6px 32px 5px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-18: 0px 9px 11px -5px rgba(0, 0, 0, 0.2), 0px 18px 28px 2px rgba(0, 0, 0, 0.14), 0px 7px 34px 6px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-19: 0px 9px 12px -6px rgba(0, 0, 0, 0.2), 0px 19px 29px 2px rgba(0, 0, 0, 0.14), 0px 7px 36px 6px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-20: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 20px 31px 3px rgba(0, 0, 0, 0.14), 0px 8px 38px 7px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-21: 0px 10px 13px -6px rgba(0, 0, 0, 0.2), 0px 21px 33px 3px rgba(0, 0, 0, 0.14), 0px 8px 40px 7px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-22: 0px 10px 14px -6px rgba(0, 0, 0, 0.2), 0px 22px 35px 3px rgba(0, 0, 0, 0.14), 0px 8px 42px 7px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-23: 0px 11px 14px -7px rgba(0, 0, 0, 0.2), 0px 23px 36px 3px rgba(0, 0, 0, 0.14), 0px 9px 44px 8px rgba(0, 0, 0, 0.12);
--mat-app-elevation-shadow-level-24: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
html {
--mat-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
html {
--mat-option-selected-state-label-text-color: var(--color-brand-primary-100);
--mat-option-label-text-color: rgba(0, 0, 0, 0.87);
--mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
--mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.mat-accent {
--mat-option-selected-state-label-text-color: var(--color-brand-secondary-100);
--mat-option-label-text-color: rgba(0, 0, 0, 0.87);
--mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
--mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
.mat-warn {
--mat-option-selected-state-label-text-color: var(--color-danger-100);
--mat-option-label-text-color: rgba(0, 0, 0, 0.87);
--mat-option-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
--mat-option-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-option-selected-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
}
html {
--mat-optgroup-label-text-color: rgba(0, 0, 0, 0.87);
}
html {
--mat-pseudo-checkbox-full-selected-icon-color: var(--color-brand-secondary-100);
--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--color-brand-secondary-100);
--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.mat-primary {
--mat-pseudo-checkbox-full-selected-icon-color: var(--color-brand-primary-100);
--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--color-brand-primary-100);
--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.mat-accent {
--mat-pseudo-checkbox-full-selected-icon-color: var(--color-brand-secondary-100);
--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--color-brand-secondary-100);
--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.mat-warn {
--mat-pseudo-checkbox-full-selected-icon-color: var(--color-danger-100);
--mat-pseudo-checkbox-full-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-pseudo-checkbox-full-disabled-selected-checkmark-color: #fafafa;
--mat-pseudo-checkbox-full-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-full-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-pseudo-checkbox-minimal-selected-checkmark-color: var(--color-danger-100);
--mat-pseudo-checkbox-minimal-disabled-selected-checkmark-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
html {
--mat-card-elevated-container-shape: 4px;
--mat-card-outlined-container-shape: 4px;
--mat-card-filled-container-shape: 4px;
--mat-card-outlined-outline-width: 1px;
}
html {
--mat-card-elevated-container-color: white;
--mat-card-elevated-container-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--mat-card-outlined-container-color: white;
--mat-card-outlined-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
--mat-card-outlined-outline-color: rgba(0, 0, 0, 0.12);
--mat-card-subtitle-text-color: rgba(0, 0, 0, 0.54);
--mat-card-filled-container-color: white;
--mat-card-filled-container-elevation: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
}
html {
--mat-progress-bar-active-indicator-height: 4px;
--mat-progress-bar-track-height: 4px;
--mat-progress-bar-track-shape: 0;
}
.mat-mdc-progress-bar {
--mat-progress-bar-active-indicator-color: var(--color-brand-primary-100);
--mat-progress-bar-track-color: var(--color-brand-primary-100);
}
.mat-mdc-progress-bar.mat-accent {
--mat-progress-bar-active-indicator-color: var(--color-brand-secondary-100);
--mat-progress-bar-track-color: var(--color-brand-secondary-100);
}
.mat-mdc-progress-bar.mat-warn {
--mat-progress-bar-active-indicator-color: var(--color-danger-100);
--mat-progress-bar-track-color: var(--color-danger-100);
}
html {
--mat-tooltip-container-shape: 4px;
--mat-tooltip-supporting-text-line-height: 16px;
}
html {
--mat-tooltip-container-color: #424242;
--mat-tooltip-supporting-text-color: white;
}
html {
--mat-form-field-filled-active-indicator-height: 1px;
--mat-form-field-filled-focus-active-indicator-height: 2px;
--mat-form-field-filled-container-shape: 4px;
--mat-form-field-outlined-outline-width: 1px;
--mat-form-field-outlined-focus-outline-width: 2px;
--mat-form-field-outlined-container-shape: 4px;
}
html {
--mat-form-field-focus-select-arrow-color: color-mix(in srgb, var(--color-brand-primary-100) 87%, transparent);
--mat-form-field-filled-caret-color: var(--color-brand-primary-100);
--mat-form-field-filled-focus-active-indicator-color: var(--color-brand-primary-100);
--mat-form-field-filled-focus-label-text-color: color-mix(in srgb, var(--color-brand-primary-100) 87%, transparent);
--mat-form-field-outlined-caret-color: var(--color-brand-primary-100);
--mat-form-field-outlined-focus-outline-color: var(--color-brand-primary-100);
--mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, var(--color-brand-primary-100) 87%, transparent);
--mat-form-field-disabled-input-text-placeholder-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-form-field-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-form-field-error-text-color: var(--color-danger-100);
--mat-form-field-select-option-text-color: inherit;
--mat-form-field-select-disabled-option-text-color: GrayText;
--mat-form-field-leading-icon-color: unset;
--mat-form-field-disabled-leading-icon-color: unset;
--mat-form-field-trailing-icon-color: unset;
--mat-form-field-disabled-trailing-icon-color: unset;
--mat-form-field-error-focus-trailing-icon-color: unset;
--mat-form-field-error-hover-trailing-icon-color: unset;
--mat-form-field-error-trailing-icon-color: unset;
--mat-form-field-enabled-select-arrow-color: rgba(0, 0, 0, 0.54);
--mat-form-field-disabled-select-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-form-field-hover-state-layer-opacity: 0.04;
--mat-form-field-focus-state-layer-opacity: 0.12;
--mat-form-field-filled-container-color: #f6f6f6;
--mat-form-field-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
--mat-form-field-filled-label-text-color: rgba(0, 0, 0, 0.54);
--mat-form-field-filled-hover-label-text-color: rgba(0, 0, 0, 0.54);
--mat-form-field-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-form-field-filled-input-text-color: rgba(0, 0, 0, 0.87);
--mat-form-field-filled-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-form-field-filled-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
--mat-form-field-filled-error-hover-label-text-color: var(--color-danger-100);
--mat-form-field-filled-error-focus-label-text-color: var(--color-danger-100);
--mat-form-field-filled-error-label-text-color: var(--color-danger-100);
--mat-form-field-filled-error-caret-color: var(--color-danger-100);
--mat-form-field-filled-active-indicator-color: rgba(0, 0, 0, 0.54);
--mat-form-field-filled-disabled-active-indicator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-form-field-filled-hover-active-indicator-color: rgba(0, 0, 0, 0.87);
--mat-form-field-filled-error-active-indicator-color: var(--color-danger-100);
--mat-form-field-filled-error-focus-active-indicator-color: var(--color-danger-100);
--mat-form-field-filled-error-hover-active-indicator-color: var(--color-danger-100);
--mat-form-field-outlined-label-text-color: rgba(0, 0, 0, 0.54);
--mat-form-field-outlined-hover-label-text-color: rgba(0, 0, 0, 0.87);
--mat-form-field-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-form-field-outlined-input-text-color: rgba(0, 0, 0, 0.87);
--mat-form-field-outlined-disabled-input-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-form-field-outlined-input-text-placeholder-color: rgba(0, 0, 0, 0.54);
--mat-form-field-outlined-error-caret-color: var(--color-danger-100);
--mat-form-field-outlined-error-focus-label-text-color: var(--color-danger-100);
--mat-form-field-outlined-error-label-text-color: var(--color-danger-100);
--mat-form-field-outlined-error-hover-label-text-color: var(--color-danger-100);
--mat-form-field-outlined-outline-color: rgba(0, 0, 0, 0.38);
--mat-form-field-outlined-disabled-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-form-field-outlined-hover-outline-color: rgba(0, 0, 0, 0.87);
--mat-form-field-outlined-error-focus-outline-color: var(--color-danger-100);
--mat-form-field-outlined-error-hover-outline-color: var(--color-danger-100);
--mat-form-field-outlined-error-outline-color: var(--color-danger-100);
}
.mat-mdc-form-field.mat-accent {
--mat-form-field-focus-select-arrow-color: color-mix(in srgb, var(--color-brand-secondary-100) 87%, transparent);
--mat-form-field-filled-caret-color: var(--color-brand-secondary-100);
--mat-form-field-filled-focus-active-indicator-color: var(--color-brand-secondary-100);
--mat-form-field-filled-focus-label-text-color: color-mix(in srgb, var(--color-brand-secondary-100) 87%, transparent);
--mat-form-field-outlined-caret-color: var(--color-brand-secondary-100);
--mat-form-field-outlined-focus-outline-color: var(--color-brand-secondary-100);
--mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, var(--color-brand-secondary-100) 87%, transparent);
}
.mat-mdc-form-field.mat-warn {
--mat-form-field-focus-select-arrow-color: color-mix(in srgb, var(--color-danger-100) 87%, transparent);
--mat-form-field-filled-caret-color: var(--color-danger-100);
--mat-form-field-filled-focus-active-indicator-color: var(--color-danger-100);
--mat-form-field-filled-focus-label-text-color: color-mix(in srgb, var(--color-danger-100) 87%, transparent);
--mat-form-field-outlined-caret-color: var(--color-danger-100);
--mat-form-field-outlined-focus-outline-color: var(--color-danger-100);
--mat-form-field-outlined-focus-label-text-color: color-mix(in srgb, var(--color-danger-100) 87%, transparent);
}
html {
--mat-form-field-container-height: 56px;
--mat-form-field-filled-label-display: block;
--mat-form-field-container-vertical-padding: 16px;
--mat-form-field-filled-with-label-container-padding-top: 24px;
--mat-form-field-filled-with-label-container-padding-bottom: 8px;
}
html {
--mat-select-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
html {
--mat-select-panel-background-color: white;
--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
--mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
--mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
--mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-select-focused-arrow-color: var(--color-brand-primary-100);
--mat-select-invalid-arrow-color: var(--color-danger-100);
}
.mat-mdc-form-field.mat-accent {
--mat-select-panel-background-color: white;
--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
--mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
--mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
--mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-select-focused-arrow-color: var(--color-brand-secondary-100);
--mat-select-invalid-arrow-color: var(--color-danger-100);
}
.mat-mdc-form-field.mat-warn {
--mat-select-panel-background-color: white;
--mat-select-enabled-trigger-text-color: rgba(0, 0, 0, 0.87);
--mat-select-disabled-trigger-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-select-placeholder-text-color: rgba(0, 0, 0, 0.54);
--mat-select-enabled-arrow-color: rgba(0, 0, 0, 0.54);
--mat-select-disabled-arrow-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-select-focused-arrow-color: var(--color-danger-100);
--mat-select-invalid-arrow-color: var(--color-danger-100);
}
html {
--mat-select-arrow-transform: translateY(-8px);
}
html {
--mat-autocomplete-container-shape: 4px;
--mat-autocomplete-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
html {
--mat-autocomplete-background-color: white;
}
html {
--mat-dialog-container-shape: 4px;
--mat-dialog-container-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
--mat-dialog-container-max-width: 80vw;
--mat-dialog-container-small-max-width: 80vw;
--mat-dialog-container-min-width: 0;
--mat-dialog-actions-alignment: start;
--mat-dialog-actions-padding: 8px;
--mat-dialog-content-padding: 20px 24px;
--mat-dialog-with-actions-content-padding: 20px 24px;
--mat-dialog-headline-padding: 0 24px 9px;
}
html {
--mat-dialog-container-color: white;
--mat-dialog-subhead-color: rgba(0, 0, 0, 0.87);
--mat-dialog-supporting-text-color: rgba(0, 0, 0, 0.54);
}
.mat-mdc-standard-chip {
--mat-chip-container-shape-radius: 16px;
--mat-chip-disabled-container-opacity: 0.4;
--mat-chip-disabled-outline-color: transparent;
--mat-chip-flat-selected-outline-width: 0;
--mat-chip-focus-outline-color: transparent;
--mat-chip-hover-state-layer-opacity: 0.04;
--mat-chip-outline-color: transparent;
--mat-chip-outline-width: 0;
--mat-chip-selected-hover-state-layer-opacity: 0.04;
--mat-chip-selected-trailing-action-state-layer-color: transparent;
--mat-chip-trailing-action-focus-opacity: 1;
--mat-chip-trailing-action-focus-state-layer-opacity: 0;
--mat-chip-trailing-action-hover-state-layer-opacity: 0;
--mat-chip-trailing-action-opacity: 0.54;
--mat-chip-trailing-action-state-layer-color: transparent;
--mat-chip-with-avatar-avatar-shape-radius: 14px;
--mat-chip-with-avatar-avatar-size: 28px;
--mat-chip-with-avatar-disabled-avatar-opacity: 1;
--mat-chip-with-icon-disabled-icon-opacity: 1;
--mat-chip-with-icon-icon-size: 18px;
--mat-chip-with-trailing-icon-disabled-trailing-icon-opacity: 1;
}
.mat-mdc-standard-chip {
--mat-chip-disabled-label-text-color: rgba(0, 0, 0, 0.87);
--mat-chip-elevated-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-chip-elevated-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-chip-elevated-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-chip-flat-disabled-selected-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-focus-state-layer-opacity: 0.12;
--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-label-text-color: rgba(0, 0, 0, 0.87);
--mat-chip-selected-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
--mat-chip-selected-focus-state-layer-color: 0.12;
--mat-chip-selected-focus-state-layer-opacity: 0.12;
--mat-chip-selected-hover-state-layer-color: 0.04;
--mat-chip-selected-label-text-color: rgba(0, 0, 0, 0.87);
--mat-chip-selected-trailing-icon-color: rgba(0, 0, 0, 0.87);
--mat-chip-with-icon-disabled-icon-color: rgba(0, 0, 0, 0.87);
--mat-chip-with-icon-icon-color: rgba(0, 0, 0, 0.87);
--mat-chip-with-icon-selected-icon-color: rgba(0, 0, 0, 0.87);
--mat-chip-with-trailing-icon-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
--mat-chip-with-trailing-icon-trailing-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-primary, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-primary {
--mat-chip-disabled-label-text-color: var(--color-white);
--mat-chip-elevated-container-color: var(--color-brand-primary-100);
--mat-chip-elevated-disabled-container-color: var(--color-brand-primary-100);
--mat-chip-elevated-selected-container-color: var(--color-brand-primary-100);
--mat-chip-flat-disabled-selected-container-color: var(--color-brand-primary-100);
--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-focus-state-layer-opacity: 0.12;
--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-label-text-color: var(--color-white);
--mat-chip-selected-disabled-trailing-icon-color: var(--color-white);
--mat-chip-selected-focus-state-layer-color: 0.12;
--mat-chip-selected-focus-state-layer-opacity: 0.12;
--mat-chip-selected-hover-state-layer-color: 0.04;
--mat-chip-selected-label-text-color: var(--color-white);
--mat-chip-selected-trailing-icon-color: var(--color-white);
--mat-chip-with-icon-disabled-icon-color: var(--color-white);
--mat-chip-with-icon-icon-color: var(--color-white);
--mat-chip-with-icon-selected-icon-color: var(--color-white);
--mat-chip-with-trailing-icon-disabled-trailing-icon-color: var(--color-white);
--mat-chip-with-trailing-icon-trailing-icon-color: var(--color-white);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-accent, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-accent {
--mat-chip-disabled-label-text-color: var(--color-white);
--mat-chip-elevated-container-color: var(--color-brand-secondary-100);
--mat-chip-elevated-disabled-container-color: var(--color-brand-secondary-100);
--mat-chip-elevated-selected-container-color: var(--color-brand-secondary-100);
--mat-chip-flat-disabled-selected-container-color: var(--color-brand-secondary-100);
--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-focus-state-layer-opacity: 0.12;
--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-label-text-color: var(--color-white);
--mat-chip-selected-disabled-trailing-icon-color: var(--color-white);
--mat-chip-selected-focus-state-layer-color: 0.12;
--mat-chip-selected-focus-state-layer-opacity: 0.12;
--mat-chip-selected-hover-state-layer-color: 0.04;
--mat-chip-selected-label-text-color: var(--color-white);
--mat-chip-selected-trailing-icon-color: var(--color-white);
--mat-chip-with-icon-disabled-icon-color: var(--color-white);
--mat-chip-with-icon-icon-color: var(--color-white);
--mat-chip-with-icon-selected-icon-color: var(--color-white);
--mat-chip-with-trailing-icon-disabled-trailing-icon-color: var(--color-white);
--mat-chip-with-trailing-icon-trailing-icon-color: var(--color-white);
}
.mat-mdc-standard-chip.mat-mdc-chip-selected.mat-warn, .mat-mdc-standard-chip.mat-mdc-chip-highlighted.mat-warn {
--mat-chip-disabled-label-text-color: var(--color-white);
--mat-chip-elevated-container-color: var(--color-danger-100);
--mat-chip-elevated-disabled-container-color: var(--color-danger-100);
--mat-chip-elevated-selected-container-color: var(--color-danger-100);
--mat-chip-flat-disabled-selected-container-color: var(--color-danger-100);
--mat-chip-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-focus-state-layer-opacity: 0.12;
--mat-chip-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-chip-label-text-color: var(--color-white);
--mat-chip-selected-disabled-trailing-icon-color: var(--color-white);
--mat-chip-selected-focus-state-layer-color: 0.12;
--mat-chip-selected-focus-state-layer-opacity: 0.12;
--mat-chip-selected-hover-state-layer-color: 0.04;
--mat-chip-selected-label-text-color: var(--color-white);
--mat-chip-selected-trailing-icon-color: var(--color-white);
--mat-chip-with-icon-disabled-icon-color: var(--color-white);
--mat-chip-with-icon-icon-color: var(--color-white);
--mat-chip-with-icon-selected-icon-color: var(--color-white);
--mat-chip-with-trailing-icon-disabled-trailing-icon-color: var(--color-white);
--mat-chip-with-trailing-icon-trailing-icon-color: var(--color-white);
}
.mat-mdc-chip.mat-mdc-standard-chip {
--mat-chip-container-height: 32px;
}
html {
--mat-slide-toggle-disabled-handle-opacity: 0.38;
--mat-slide-toggle-disabled-selected-handle-opacity: 0.38;
--mat-slide-toggle-disabled-selected-icon-opacity: 0.38;
--mat-slide-toggle-disabled-track-opacity: 0.12;
--mat-slide-toggle-disabled-unselected-handle-opacity: 0.38;
--mat-slide-toggle-disabled-unselected-icon-opacity: 0.38;
--mat-slide-toggle-disabled-unselected-track-outline-color: transparent;
--mat-slide-toggle-disabled-unselected-track-outline-width: 1px;
--mat-slide-toggle-handle-height: 20px;
--mat-slide-toggle-handle-shape: 10px;
--mat-slide-toggle-handle-width: 20px;
--mat-slide-toggle-hidden-track-opacity: 1;
--mat-slide-toggle-hidden-track-transition: transform 75ms 0ms cubic-bezier(0.4, 0, 0.6, 1);
--mat-slide-toggle-pressed-handle-size: 20px;
--mat-slide-toggle-selected-focus-state-layer-opacity: 0.12;
--mat-slide-toggle-selected-handle-horizontal-margin: 0;
--mat-slide-toggle-selected-handle-size: 20px;
--mat-slide-toggle-selected-hover-state-layer-opacity: 0.04;
--mat-slide-toggle-selected-icon-size: 18px;
--mat-slide-toggle-selected-pressed-handle-horizontal-margin: 0;
--mat-slide-toggle-selected-pressed-state-layer-opacity: 0.12;
--mat-slide-toggle-selected-track-outline-color: transparent;
--mat-slide-toggle-selected-track-outline-width: 1px;
--mat-slide-toggle-selected-with-icon-handle-horizontal-margin: 0;
--mat-slide-toggle-track-height: 14px;
--mat-slide-toggle-track-outline-color: transparent;
--mat-slide-toggle-track-outline-width: 1px;
--mat-slide-toggle-track-shape: 7px;
--mat-slide-toggle-track-width: 36px;
--mat-slide-toggle-unselected-focus-state-layer-opacity: 0.12;
--mat-slide-toggle-unselected-handle-horizontal-margin: 0;
--mat-slide-toggle-unselected-handle-size: 20px;
--mat-slide-toggle-unselected-hover-state-layer-opacity: 0.12;
--mat-slide-toggle-unselected-icon-size: 18px;
--mat-slide-toggle-unselected-pressed-handle-horizontal-margin: 0;
--mat-slide-toggle-unselected-pressed-state-layer-opacity: 0.1;
--mat-slide-toggle-unselected-with-icon-handle-horizontal-margin: 0;
--mat-slide-toggle-visible-track-opacity: 1;
--mat-slide-toggle-visible-track-transition: transform 75ms 0ms cubic-bezier(0, 0, 0.2, 1);
--mat-slide-toggle-with-icon-handle-size: 20px;
--mat-slide-toggle-touch-target-size: 48px;
}
html {
--mat-slide-toggle-selected-icon-color: var(--color-white);
--mat-slide-toggle-disabled-selected-icon-color: var(--color-white);
--mat-slide-toggle-selected-focus-state-layer-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-handle-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-hover-state-layer-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-pressed-state-layer-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-focus-handle-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-hover-handle-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-pressed-handle-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-focus-track-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-hover-track-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-pressed-track-color: var(--color-brand-primary-100);
--mat-slide-toggle-selected-track-color: var(--color-brand-primary-100);
--mat-slide-toggle-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-slide-toggle-disabled-handle-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
--mat-slide-toggle-disabled-selected-handle-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-disabled-selected-track-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-disabled-unselected-handle-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-disabled-unselected-icon-color: #f6f6f6;
--mat-slide-toggle-disabled-unselected-track-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-handle-elevation-shadow: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--mat-slide-toggle-handle-surface-color: white;
--mat-slide-toggle-label-text-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-unselected-hover-handle-color: #424242;
--mat-slide-toggle-unselected-focus-handle-color: #424242;
--mat-slide-toggle-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-unselected-focus-track-color: rgba(0, 0, 0, 0.12);
--mat-slide-toggle-unselected-icon-color: #f6f6f6;
--mat-slide-toggle-unselected-handle-color: rgba(0, 0, 0, 0.54);
--mat-slide-toggle-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-unselected-hover-track-color: rgba(0, 0, 0, 0.12);
--mat-slide-toggle-unselected-pressed-handle-color: #424242;
--mat-slide-toggle-unselected-pressed-track-color: rgba(0, 0, 0, 0.12);
--mat-slide-toggle-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-slide-toggle-unselected-track-color: rgba(0, 0, 0, 0.12);
}
.mat-mdc-slide-toggle.mat-accent {
--mat-slide-toggle-selected-icon-color: var(--color-white);
--mat-slide-toggle-disabled-selected-icon-color: var(--color-white);
--mat-slide-toggle-selected-focus-state-layer-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-handle-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-hover-state-layer-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-pressed-state-layer-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-focus-handle-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-hover-handle-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-pressed-handle-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-focus-track-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-hover-track-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-pressed-track-color: var(--color-brand-secondary-100);
--mat-slide-toggle-selected-track-color: var(--color-brand-secondary-100);
}
.mat-mdc-slide-toggle.mat-warn {
--mat-slide-toggle-selected-icon-color: var(--color-white);
--mat-slide-toggle-disabled-selected-icon-color: var(--color-white);
--mat-slide-toggle-selected-focus-state-layer-color: var(--color-danger-100);
--mat-slide-toggle-selected-handle-color: var(--color-danger-100);
--mat-slide-toggle-selected-hover-state-layer-color: var(--color-danger-100);
--mat-slide-toggle-selected-pressed-state-layer-color: var(--color-danger-100);
--mat-slide-toggle-selected-focus-handle-color: var(--color-danger-100);
--mat-slide-toggle-selected-hover-handle-color: var(--color-danger-100);
--mat-slide-toggle-selected-pressed-handle-color: var(--color-danger-100);
--mat-slide-toggle-selected-focus-track-color: var(--color-danger-100);
--mat-slide-toggle-selected-hover-track-color: var(--color-danger-100);
--mat-slide-toggle-selected-pressed-track-color: var(--color-danger-100);
--mat-slide-toggle-selected-track-color: var(--color-danger-100);
}
html {
--mat-slide-toggle-state-layer-size: 40px;
--mat-slide-toggle-touch-target-display: block;
}
html {
--mat-radio-disabled-selected-icon-opacity: 0.38;
--mat-radio-disabled-unselected-icon-opacity: 0.38;
--mat-radio-state-layer-size: 40px;
--mat-radio-touch-target-size: 48px;
}
.mat-mdc-radio-button.mat-primary {
--mat-radio-checked-ripple-color: var(--color-brand-primary-100);
--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
--mat-radio-selected-focus-icon-color: var(--color-brand-primary-100);
--mat-radio-selected-hover-icon-color: var(--color-brand-primary-100);
--mat-radio-selected-icon-color: var(--color-brand-primary-100);
--mat-radio-selected-pressed-icon-color: var(--color-brand-primary-100);
--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-accent {
--mat-radio-checked-ripple-color: var(--color-brand-secondary-100);
--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
--mat-radio-selected-focus-icon-color: var(--color-brand-secondary-100);
--mat-radio-selected-hover-icon-color: var(--color-brand-secondary-100);
--mat-radio-selected-icon-color: var(--color-brand-secondary-100);
--mat-radio-selected-pressed-icon-color: var(--color-brand-secondary-100);
--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-radio-button.mat-warn {
--mat-radio-checked-ripple-color: var(--color-danger-100);
--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
--mat-radio-selected-focus-icon-color: var(--color-danger-100);
--mat-radio-selected-hover-icon-color: var(--color-danger-100);
--mat-radio-selected-icon-color: var(--color-danger-100);
--mat-radio-selected-pressed-icon-color: var(--color-danger-100);
--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
html {
--mat-radio-state-layer-size: 40px;
--mat-radio-touch-target-display: block;
}
html {
--mat-slider-active-track-height: 6px;
--mat-slider-active-track-shape: 9999px;
--mat-slider-handle-elevation: 0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12);
--mat-slider-handle-height: 20px;
--mat-slider-handle-shape: 50%;
--mat-slider-handle-width: 20px;
--mat-slider-inactive-track-height: 4px;
--mat-slider-inactive-track-shape: 9999px;
--mat-slider-value-indicator-border-radius: 4px;
--mat-slider-value-indicator-caret-display: block;
--mat-slider-value-indicator-container-transform: translateX(-50%);
--mat-slider-value-indicator-height: 32px;
--mat-slider-value-indicator-padding: 0 12px;
--mat-slider-value-indicator-text-transform: none;
--mat-slider-value-indicator-width: auto;
--mat-slider-with-overlap-handle-outline-width: 1px;
--mat-slider-with-tick-marks-active-container-opacity: 0.6;
--mat-slider-with-tick-marks-container-shape: 50%;
--mat-slider-with-tick-marks-container-size: 2px;
--mat-slider-with-tick-marks-inactive-container-opacity: 0.6;
--mat-slider-value-indicator-transform-origin: bottom;
}
html {
--mat-slider-active-track-color: var(--color-brand-primary-100);
--mat-slider-focus-handle-color: var(--color-brand-primary-100);
--mat-slider-handle-color: var(--color-brand-primary-100);
--mat-slider-hover-handle-color: var(--color-brand-primary-100);
--mat-slider-focus-state-layer-color: color-mix(in srgb, var(--color-brand-primary-100) 12%, transparent);
--mat-slider-hover-state-layer-color: color-mix(in srgb, var(--color-brand-primary-100) 4%, transparent);
--mat-slider-inactive-track-color: var(--color-brand-primary-100);
--mat-slider-ripple-color: var(--color-brand-primary-100);
--mat-slider-with-tick-marks-active-container-color: var(--color-white);
--mat-slider-with-tick-marks-inactive-container-color: var(--color-brand-primary-100);
--mat-slider-disabled-active-track-color: rgba(0, 0, 0, 0.87);
--mat-slider-disabled-handle-color: rgba(0, 0, 0, 0.87);
--mat-slider-disabled-inactive-track-color: rgba(0, 0, 0, 0.87);
--mat-slider-label-container-color: #424242;
--mat-slider-label-label-text-color: white;
--mat-slider-value-indicator-opacity: 1;
--mat-slider-with-overlap-handle-outline-color: rgba(0, 0, 0, 0.87);
--mat-slider-with-tick-marks-disabled-container-color: rgba(0, 0, 0, 0.87);
}
.mat-accent {
--mat-slider-active-track-color: var(--color-brand-secondary-100);
--mat-slider-focus-handle-color: var(--color-brand-secondary-100);
--mat-slider-handle-color: var(--color-brand-secondary-100);
--mat-slider-hover-handle-color: var(--color-brand-secondary-100);
--mat-slider-focus-state-layer-color: color-mix(in srgb, var(--color-brand-secondary-100) 12%, transparent);
--mat-slider-hover-state-layer-color: color-mix(in srgb, var(--color-brand-secondary-100) 4%, transparent);
--mat-slider-inactive-track-color: var(--color-brand-secondary-100);
--mat-slider-ripple-color: var(--color-brand-secondary-100);
--mat-slider-with-tick-marks-active-container-color: var(--color-white);
--mat-slider-with-tick-marks-inactive-container-color: var(--color-brand-secondary-100);
}
.mat-warn {
--mat-slider-active-track-color: var(--color-danger-100);
--mat-slider-focus-handle-color: var(--color-danger-100);
--mat-slider-handle-color: var(--color-danger-100);
--mat-slider-hover-handle-color: var(--color-danger-100);
--mat-slider-focus-state-layer-color: color-mix(in srgb, var(--color-danger-100) 12%, transparent);
--mat-slider-hover-state-layer-color: color-mix(in srgb, var(--color-danger-100) 4%, transparent);
--mat-slider-inactive-track-color: var(--color-danger-100);
--mat-slider-ripple-color: var(--color-danger-100);
--mat-slider-with-tick-marks-active-container-color: var(--color-white);
--mat-slider-with-tick-marks-inactive-container-color: var(--color-danger-100);
}
html {
--mat-menu-container-shape: 4px;
--mat-menu-divider-bottom-spacing: 0;
--mat-menu-divider-top-spacing: 0;
--mat-menu-item-spacing: 16px;
--mat-menu-item-icon-size: 24px;
--mat-menu-item-leading-spacing: 16px;
--mat-menu-item-trailing-spacing: 16px;
--mat-menu-item-with-icon-leading-spacing: 16px;
--mat-menu-item-with-icon-trailing-spacing: 16px;
--mat-menu-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
html {
--mat-menu-item-label-text-color: rgba(0, 0, 0, 0.87);
--mat-menu-item-icon-color: rgba(0, 0, 0, 0.87);
--mat-menu-item-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
--mat-menu-item-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-menu-container-color: white;
--mat-menu-divider-color: rgba(0, 0, 0, 0.12);
}
html {
--mat-list-active-indicator-color: transparent;
--mat-list-active-indicator-shape: 4px;
--mat-list-list-item-container-shape: 0;
--mat-list-list-item-leading-avatar-shape: 50%;
--mat-list-list-item-container-color: transparent;
--mat-list-list-item-selected-container-color: transparent;
--mat-list-list-item-leading-avatar-color: transparent;
--mat-list-list-item-leading-icon-size: 24px;
--mat-list-list-item-leading-avatar-size: 40px;
--mat-list-list-item-trailing-icon-size: 24px;
--mat-list-list-item-disabled-state-layer-color: transparent;
--mat-list-list-item-disabled-state-layer-opacity: 0;
--mat-list-list-item-disabled-label-text-opacity: 0.38;
--mat-list-list-item-disabled-leading-icon-opacity: 0.38;
--mat-list-list-item-disabled-trailing-icon-opacity: 0.38;
}
html {
--mat-list-list-item-label-text-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-supporting-text-color: rgba(0, 0, 0, 0.54);
--mat-list-list-item-leading-icon-color: rgba(0, 0, 0, 0.54);
--mat-list-list-item-trailing-supporting-text-color: rgba(0, 0, 0, 0.54);
--mat-list-list-item-trailing-icon-color: rgba(0, 0, 0, 0.54);
--mat-list-list-item-selected-trailing-icon-color: rgba(0, 0, 0, 0.54);
--mat-list-list-item-disabled-label-text-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-disabled-leading-icon-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-disabled-trailing-icon-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-hover-label-text-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-hover-leading-icon-color: rgba(0, 0, 0, 0.54);
--mat-list-list-item-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-hover-state-layer-opacity: 0.04;
--mat-list-list-item-hover-trailing-icon-color: rgba(0, 0, 0, 0.54);
--mat-list-list-item-focus-label-text-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-list-list-item-focus-state-layer-opacity: 0.12;
}
.mdc-list-item__start,
.mdc-list-item__end {
--mat-radio-checked-ripple-color: var(--color-brand-primary-100);
--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
--mat-radio-selected-focus-icon-color: var(--color-brand-primary-100);
--mat-radio-selected-hover-icon-color: var(--color-brand-primary-100);
--mat-radio-selected-icon-color: var(--color-brand-primary-100);
--mat-radio-selected-pressed-icon-color: var(--color-brand-primary-100);
--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-accent .mdc-list-item__start,
.mat-accent .mdc-list-item__end {
--mat-radio-checked-ripple-color: var(--color-brand-secondary-100);
--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
--mat-radio-selected-focus-icon-color: var(--color-brand-secondary-100);
--mat-radio-selected-hover-icon-color: var(--color-brand-secondary-100);
--mat-radio-selected-icon-color: var(--color-brand-secondary-100);
--mat-radio-selected-pressed-icon-color: var(--color-brand-secondary-100);
--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-warn .mdc-list-item__start,
.mat-warn .mdc-list-item__end {
--mat-radio-checked-ripple-color: var(--color-danger-100);
--mat-radio-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-radio-disabled-selected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-disabled-unselected-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-label-text-color: rgba(0, 0, 0, 0.87);
--mat-radio-ripple-color: rgba(0, 0, 0, 0.87);
--mat-radio-selected-focus-icon-color: var(--color-danger-100);
--mat-radio-selected-hover-icon-color: var(--color-danger-100);
--mat-radio-selected-icon-color: var(--color-danger-100);
--mat-radio-selected-pressed-icon-color: var(--color-danger-100);
--mat-radio-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-radio-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-radio-unselected-pressed-icon-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-list-option {
--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-selected-checkmark-color: var(--color-white);
--mat-checkbox-selected-focus-icon-color: var(--color-brand-primary-100);
--mat-checkbox-selected-hover-icon-color: var(--color-brand-primary-100);
--mat-checkbox-selected-icon-color: var(--color-brand-primary-100);
--mat-checkbox-selected-pressed-icon-color: var(--color-brand-primary-100);
--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-checkbox-selected-focus-state-layer-color: var(--color-brand-primary-100);
--mat-checkbox-selected-hover-state-layer-color: var(--color-brand-primary-100);
--mat-checkbox-selected-pressed-state-layer-color: var(--color-brand-primary-100);
--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-list-option.mat-accent {
--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-selected-checkmark-color: var(--color-white);
--mat-checkbox-selected-focus-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-hover-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-pressed-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-checkbox-selected-focus-state-layer-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-hover-state-layer-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-pressed-state-layer-color: var(--color-brand-secondary-100);
--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-list-option.mat-warn {
--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-selected-checkmark-color: var(--color-white);
--mat-checkbox-selected-focus-icon-color: var(--color-danger-100);
--mat-checkbox-selected-hover-icon-color: var(--color-danger-100);
--mat-checkbox-selected-icon-color: var(--color-danger-100);
--mat-checkbox-selected-pressed-icon-color: var(--color-danger-100);
--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-checkbox-selected-focus-state-layer-color: var(--color-danger-100);
--mat-checkbox-selected-hover-state-layer-color: var(--color-danger-100);
--mat-checkbox-selected-pressed-state-layer-color: var(--color-danger-100);
--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--selected .mdc-list-item__start,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__primary-text,
.mat-mdc-list-base.mat-mdc-list-base .mdc-list-item--activated .mdc-list-item__start {
color: var(--color-brand-primary-100);
}
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__start,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__content,
.mat-mdc-list-base .mdc-list-item--disabled .mdc-list-item__end {
opacity: 1;
}
html {
--mat-list-list-item-leading-icon-start-space: 16px;
--mat-list-list-item-leading-icon-end-space: 32px;
--mat-list-list-item-one-line-container-height: 48px;
--mat-list-list-item-two-line-container-height: 64px;
--mat-list-list-item-three-line-container-height: 88px;
}
.mdc-list-item__start,
.mdc-list-item__end {
--mat-radio-state-layer-size: 40px;
--mat-radio-touch-target-display: block;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-one-line, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-one-line {
height: 56px;
}
.mat-mdc-list-item.mdc-list-item--with-leading-avatar.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-checkbox.mdc-list-item--with-two-lines, .mat-mdc-list-item.mdc-list-item--with-leading-icon.mdc-list-item--with-two-lines {
height: 72px;
}
html {
--mat-paginator-page-size-select-width: 84px;
--mat-paginator-page-size-select-touch-target-height: 48px;
}
html {
--mat-paginator-container-text-color: rgba(0, 0, 0, 0.87);
--mat-paginator-container-background-color: white;
--mat-paginator-enabled-icon-color: rgba(0, 0, 0, 0.54);
--mat-paginator-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
html {
--mat-paginator-container-size: 56px;
--mat-paginator-form-field-container-height: 40px;
--mat-paginator-form-field-container-vertical-padding: 8px;
--mat-paginator-touch-target-display: block;
}
html {
--mat-tab-container-height: 48px;
--mat-tab-divider-color: transparent;
--mat-tab-divider-height: 0;
--mat-tab-active-indicator-height: 2px;
--mat-tab-active-indicator-shape: 0;
}
.mat-mdc-tab-group,
.mat-mdc-tab-nav-bar {
--mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
--mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
--mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-active-label-text-color: var(--color-brand-primary-100);
--mat-tab-active-ripple-color: var(--color-brand-primary-100);
--mat-tab-inactive-ripple-color: var(--color-brand-primary-100);
--mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-active-focus-label-text-color: var(--color-brand-primary-100);
--mat-tab-active-hover-label-text-color: var(--color-brand-primary-100);
--mat-tab-active-focus-indicator-color: var(--color-brand-primary-100);
--mat-tab-active-hover-indicator-color: var(--color-brand-primary-100);
--mat-tab-active-indicator-color: var(--color-brand-primary-100);
}
.mat-mdc-tab-group.mat-accent,
.mat-mdc-tab-nav-bar.mat-accent {
--mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
--mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
--mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-active-label-text-color: var(--color-brand-secondary-100);
--mat-tab-active-ripple-color: var(--color-brand-secondary-100);
--mat-tab-inactive-ripple-color: var(--color-brand-secondary-100);
--mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-active-focus-label-text-color: var(--color-brand-secondary-100);
--mat-tab-active-hover-label-text-color: var(--color-brand-secondary-100);
--mat-tab-active-focus-indicator-color: var(--color-brand-secondary-100);
--mat-tab-active-hover-indicator-color: var(--color-brand-secondary-100);
--mat-tab-active-indicator-color: var(--color-brand-secondary-100);
}
.mat-mdc-tab-group.mat-warn,
.mat-mdc-tab-nav-bar.mat-warn {
--mat-tab-disabled-ripple-color: rgba(0, 0, 0, 0.54);
--mat-tab-pagination-icon-color: rgba(0, 0, 0, 0.87);
--mat-tab-inactive-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-active-label-text-color: var(--color-danger-100);
--mat-tab-active-ripple-color: var(--color-danger-100);
--mat-tab-inactive-ripple-color: var(--color-danger-100);
--mat-tab-inactive-focus-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-inactive-hover-label-text-color: rgba(0, 0, 0, 0.54);
--mat-tab-active-focus-label-text-color: var(--color-danger-100);
--mat-tab-active-hover-label-text-color: var(--color-danger-100);
--mat-tab-active-focus-indicator-color: var(--color-danger-100);
--mat-tab-active-hover-indicator-color: var(--color-danger-100);
--mat-tab-active-indicator-color: var(--color-danger-100);
}
.mat-mdc-tab-group.mat-background-primary,
.mat-mdc-tab-nav-bar.mat-background-primary {
--mat-tab-background-color: var(--color-brand-primary-100);
--mat-tab-foreground-color: var(--color-white);
}
.mat-mdc-tab-group.mat-background-accent,
.mat-mdc-tab-nav-bar.mat-background-accent {
--mat-tab-background-color: var(--color-brand-secondary-100);
--mat-tab-foreground-color: var(--color-white);
}
.mat-mdc-tab-group.mat-background-warn,
.mat-mdc-tab-nav-bar.mat-background-warn {
--mat-tab-background-color: var(--color-danger-100);
--mat-tab-foreground-color: var(--color-white);
}
.mat-mdc-tab-header {
--mat-tab-container-height: 48px;
}
html {
--mat-checkbox-disabled-selected-checkmark-color: white;
--mat-checkbox-selected-focus-state-layer-opacity: 0.12;
--mat-checkbox-selected-hover-state-layer-opacity: 0.04;
--mat-checkbox-selected-pressed-state-layer-opacity: 0.12;
--mat-checkbox-unselected-focus-state-layer-opacity: 0.12;
--mat-checkbox-unselected-hover-state-layer-opacity: 0.04;
--mat-checkbox-unselected-pressed-state-layer-opacity: 0.12;
--mat-checkbox-touch-target-size: 48px;
}
html {
--mat-checkbox-disabled-label-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-label-text-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-selected-checkmark-color: var(--color-white);
--mat-checkbox-selected-focus-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-hover-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-pressed-icon-color: var(--color-brand-secondary-100);
--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-checkbox-selected-focus-state-layer-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-hover-state-layer-color: var(--color-brand-secondary-100);
--mat-checkbox-selected-pressed-state-layer-color: var(--color-brand-secondary-100);
--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-checkbox.mat-primary {
--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-selected-checkmark-color: var(--color-white);
--mat-checkbox-selected-focus-icon-color: var(--color-brand-primary-100);
--mat-checkbox-selected-hover-icon-color: var(--color-brand-primary-100);
--mat-checkbox-selected-icon-color: var(--color-brand-primary-100);
--mat-checkbox-selected-pressed-icon-color: var(--color-brand-primary-100);
--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-checkbox-selected-focus-state-layer-color: var(--color-brand-primary-100);
--mat-checkbox-selected-hover-state-layer-color: var(--color-brand-primary-100);
--mat-checkbox-selected-pressed-state-layer-color: var(--color-brand-primary-100);
--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-checkbox.mat-warn {
--mat-checkbox-disabled-selected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-disabled-unselected-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-checkbox-selected-checkmark-color: var(--color-white);
--mat-checkbox-selected-focus-icon-color: var(--color-danger-100);
--mat-checkbox-selected-hover-icon-color: var(--color-danger-100);
--mat-checkbox-selected-icon-color: var(--color-danger-100);
--mat-checkbox-selected-pressed-icon-color: var(--color-danger-100);
--mat-checkbox-unselected-focus-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-icon-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-icon-color: rgba(0, 0, 0, 0.54);
--mat-checkbox-selected-focus-state-layer-color: var(--color-danger-100);
--mat-checkbox-selected-hover-state-layer-color: var(--color-danger-100);
--mat-checkbox-selected-pressed-state-layer-color: var(--color-danger-100);
--mat-checkbox-unselected-focus-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-hover-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-checkbox-unselected-pressed-state-layer-color: rgba(0, 0, 0, 0.87);
}
html {
--mat-checkbox-touch-target-display: block;
--mat-checkbox-state-layer-size: 40px;
}
html {
--mat-button-filled-container-shape: 4px;
--mat-button-filled-horizontal-padding: 16px;
--mat-button-filled-icon-offset: -4px;
--mat-button-filled-icon-spacing: 8px;
--mat-button-filled-touch-target-size: 48px;
--mat-button-outlined-container-shape: 4px;
--mat-button-outlined-horizontal-padding: 15px;
--mat-button-outlined-icon-offset: -4px;
--mat-button-outlined-icon-spacing: 8px;
--mat-button-outlined-keep-touch-target: false;
--mat-button-outlined-outline-width: 1px;
--mat-button-outlined-touch-target-size: 48px;
--mat-button-protected-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
--mat-button-protected-container-shape: 4px;
--mat-button-protected-disabled-container-elevation-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0.2), 0px 0px 0px 0px rgba(0, 0, 0, 0.14), 0px 0px 0px 0px rgba(0, 0, 0, 0.12);
--mat-button-protected-focus-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
--mat-button-protected-horizontal-padding: 16px;
--mat-button-protected-hover-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
--mat-button-protected-icon-offset: -4px;
--mat-button-protected-icon-spacing: 8px;
--mat-button-protected-pressed-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-button-protected-touch-target-size: 48px;
--mat-button-text-container-shape: 4px;
--mat-button-text-horizontal-padding: 8px;
--mat-button-text-icon-offset: 0;
--mat-button-text-icon-spacing: 8px;
--mat-button-text-with-icon-horizontal-padding: 8px;
--mat-button-text-touch-target-size: 48px;
--mat-button-tonal-container-shape: 4px;
--mat-button-tonal-horizontal-padding: 16px;
--mat-button-tonal-icon-offset: -4px;
--mat-button-tonal-icon-spacing: 8px;
--mat-button-tonal-touch-target-size: 48px;
}
html {
--mat-button-filled-container-color: white;
--mat-button-filled-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-filled-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-filled-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-button-filled-focus-state-layer-opacity: 0.12;
--mat-button-filled-hover-state-layer-opacity: 0.04;
--mat-button-filled-label-text-color: rgba(0, 0, 0, 0.87);
--mat-button-filled-pressed-state-layer-opacity: 0.12;
--mat-button-filled-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-filled-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-button-outlined-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-outlined-disabled-outline-color: rgba(0, 0, 0, 0.12);
--mat-button-outlined-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-button-outlined-focus-state-layer-opacity: 0.12;
--mat-button-outlined-hover-state-layer-opacity: 0.04;
--mat-button-outlined-label-text-color: rgba(0, 0, 0, 0.87);
--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
--mat-button-outlined-pressed-state-layer-opacity: 0.12;
--mat-button-outlined-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-outlined-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-button-protected-container-color: white;
--mat-button-protected-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-protected-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-protected-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-button-protected-focus-state-layer-opacity: 0.12;
--mat-button-protected-hover-state-layer-opacity: 0.04;
--mat-button-protected-label-text-color: rgba(0, 0, 0, 0.87);
--mat-button-protected-pressed-state-layer-opacity: 0.12;
--mat-button-protected-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-protected-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-button-text-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-text-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-button-text-focus-state-layer-opacity: 0.12;
--mat-button-text-hover-state-layer-opacity: 0.04;
--mat-button-text-label-text-color: rgba(0, 0, 0, 0.87);
--mat-button-text-pressed-state-layer-opacity: 0.12;
--mat-button-text-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-text-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-button-tonal-container-color: white;
--mat-button-tonal-disabled-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-tonal-disabled-label-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-tonal-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-button-tonal-focus-state-layer-opacity: 0.12;
--mat-button-tonal-hover-state-layer-opacity: 0.04;
--mat-button-tonal-label-text-color: rgba(0, 0, 0, 0.87);
--mat-button-tonal-pressed-state-layer-opacity: 0.12;
--mat-button-tonal-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-tonal-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-button.mat-primary,
.mat-mdc-unelevated-button.mat-primary,
.mat-mdc-raised-button.mat-primary,
.mat-mdc-outlined-button.mat-primary,
.mat-tonal-button.mat-primary {
--mat-button-filled-container-color: var(--color-brand-primary-100);
--mat-button-filled-label-text-color: var(--color-white);
--mat-button-filled-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-filled-state-layer-color: var(--color-white);
--mat-button-outlined-label-text-color: var(--color-brand-primary-100);
--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
--mat-button-outlined-ripple-color: color-mix(in srgb, var(--color-brand-primary-100) 12%, transparent);
--mat-button-outlined-state-layer-color: var(--color-brand-primary-100);
--mat-button-protected-container-color: var(--color-brand-primary-100);
--mat-button-protected-label-text-color: var(--color-white);
--mat-button-protected-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-protected-state-layer-color: var(--color-white);
--mat-button-text-label-text-color: var(--color-brand-primary-100);
--mat-button-text-ripple-color: color-mix(in srgb, var(--color-brand-primary-100) 12%, transparent);
--mat-button-text-state-layer-color: var(--color-brand-primary-100);
--mat-button-tonal-container-color: var(--color-brand-primary-100);
--mat-button-tonal-label-text-color: var(--color-white);
--mat-button-tonal-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-tonal-state-layer-color: var(--color-white);
}
.mat-mdc-button.mat-accent,
.mat-mdc-unelevated-button.mat-accent,
.mat-mdc-raised-button.mat-accent,
.mat-mdc-outlined-button.mat-accent,
.mat-tonal-button.mat-accent {
--mat-button-filled-container-color: var(--color-brand-secondary-100);
--mat-button-filled-label-text-color: var(--color-white);
--mat-button-filled-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-filled-state-layer-color: var(--color-white);
--mat-button-outlined-label-text-color: var(--color-brand-secondary-100);
--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
--mat-button-outlined-ripple-color: color-mix(in srgb, var(--color-brand-secondary-100) 12%, transparent);
--mat-button-outlined-state-layer-color: var(--color-brand-secondary-100);
--mat-button-protected-container-color: var(--color-brand-secondary-100);
--mat-button-protected-label-text-color: var(--color-white);
--mat-button-protected-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-protected-state-layer-color: var(--color-white);
--mat-button-text-label-text-color: var(--color-brand-secondary-100);
--mat-button-text-ripple-color: color-mix(in srgb, var(--color-brand-secondary-100) 12%, transparent);
--mat-button-text-state-layer-color: var(--color-brand-secondary-100);
--mat-button-tonal-container-color: var(--color-brand-secondary-100);
--mat-button-tonal-label-text-color: var(--color-white);
--mat-button-tonal-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-tonal-state-layer-color: var(--color-white);
}
.mat-mdc-button.mat-warn,
.mat-mdc-unelevated-button.mat-warn,
.mat-mdc-raised-button.mat-warn,
.mat-mdc-outlined-button.mat-warn,
.mat-tonal-button.mat-warn {
--mat-button-filled-container-color: var(--color-danger-100);
--mat-button-filled-label-text-color: var(--color-white);
--mat-button-filled-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-filled-state-layer-color: var(--color-white);
--mat-button-outlined-label-text-color: var(--color-danger-100);
--mat-button-outlined-outline-color: rgba(0, 0, 0, 0.12);
--mat-button-outlined-ripple-color: color-mix(in srgb, var(--color-danger-100) 12%, transparent);
--mat-button-outlined-state-layer-color: var(--color-danger-100);
--mat-button-protected-container-color: var(--color-danger-100);
--mat-button-protected-label-text-color: var(--color-white);
--mat-button-protected-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-protected-state-layer-color: var(--color-white);
--mat-button-text-label-text-color: var(--color-danger-100);
--mat-button-text-ripple-color: color-mix(in srgb, var(--color-danger-100) 12%, transparent);
--mat-button-text-state-layer-color: var(--color-danger-100);
--mat-button-tonal-container-color: var(--color-danger-100);
--mat-button-tonal-label-text-color: var(--color-white);
--mat-button-tonal-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-button-tonal-state-layer-color: var(--color-white);
}
html {
--mat-button-filled-container-height: 36px;
--mat-button-filled-touch-target-display: block;
--mat-button-outlined-container-height: 36px;
--mat-button-outlined-touch-target-display: block;
--mat-button-protected-container-height: 36px;
--mat-button-protected-touch-target-display: block;
--mat-button-text-container-height: 36px;
--mat-button-text-touch-target-display: block;
--mat-button-tonal-container-height: 36px;
--mat-button-tonal-touch-target-display: block;
}
html {
--mat-icon-button-icon-size: 24px;
--mat-icon-button-container-shape: 50%;
--mat-icon-button-touch-target-size: 48px;
}
html {
--mat-icon-button-disabled-icon-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-icon-button-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-icon-button-focus-state-layer-opacity: 0.12;
--mat-icon-button-hover-state-layer-opacity: 0.04;
--mat-icon-button-icon-color: inherit;
--mat-icon-button-pressed-state-layer-opacity: 0.12;
--mat-icon-button-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-icon-button-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-icon-button.mat-primary {
--mat-icon-button-icon-color: var(--color-brand-primary-100);
--mat-icon-button-state-layer-color: var(--color-brand-primary-100);
--mat-icon-button-ripple-color: color-mix(in srgb, var(--color-brand-primary-100) 12%, transparent);
}
.mat-mdc-icon-button.mat-accent {
--mat-icon-button-icon-color: var(--color-brand-secondary-100);
--mat-icon-button-state-layer-color: var(--color-brand-secondary-100);
--mat-icon-button-ripple-color: color-mix(in srgb, var(--color-brand-secondary-100) 12%, transparent);
}
.mat-mdc-icon-button.mat-warn {
--mat-icon-button-icon-color: var(--color-danger-100);
--mat-icon-button-state-layer-color: var(--color-danger-100);
--mat-icon-button-ripple-color: color-mix(in srgb, var(--color-danger-100) 12%, transparent);
}
html {
--mat-icon-button-touch-target-display: block;
}
.mat-mdc-icon-button.mat-mdc-button-base {
--mdc-icon-button-state-layer-size: 48px;
--mat-icon-button-state-layer-size: 48px;
width: var(--mat-icon-button-state-layer-size);
height: var(--mat-icon-button-state-layer-size);
padding: 12px;
}
html {
--mat-fab-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
--mat-fab-container-shape: 50%;
--mat-fab-touch-target-size: 48px;
--mat-fab-extended-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
--mat-fab-extended-container-height: 48px;
--mat-fab-extended-container-shape: 24px;
--mat-fab-extended-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-fab-extended-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-fab-extended-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
--mat-fab-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-fab-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-fab-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
--mat-fab-small-container-elevation-shadow: 0px 3px 5px -1px rgba(0, 0, 0, 0.2), 0px 6px 10px 0px rgba(0, 0, 0, 0.14), 0px 1px 18px 0px rgba(0, 0, 0, 0.12);
--mat-fab-small-container-shape: 50%;
--mat-fab-small-touch-target-size: 48px;
--mat-fab-small-focus-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-fab-small-hover-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
--mat-fab-small-pressed-container-elevation-shadow: 0px 7px 8px -4px rgba(0, 0, 0, 0.2), 0px 12px 17px 2px rgba(0, 0, 0, 0.14), 0px 5px 22px 4px rgba(0, 0, 0, 0.12);
}
html {
--mat-fab-container-color: white;
--mat-fab-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-fab-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-fab-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-fab-focus-state-layer-opacity: 0.12;
--mat-fab-foreground-color: rgba(0, 0, 0, 0.87);
--mat-fab-hover-state-layer-opacity: 0.04;
--mat-fab-pressed-state-layer-opacity: 0.12;
--mat-fab-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-fab-small-container-color: white;
--mat-fab-small-disabled-state-container-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-fab-small-disabled-state-foreground-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-fab-small-disabled-state-layer-color: rgba(0, 0, 0, 0.54);
--mat-fab-small-focus-state-layer-opacity: 0.12;
--mat-fab-small-foreground-color: rgba(0, 0, 0, 0.87);
--mat-fab-small-hover-state-layer-opacity: 0.04;
--mat-fab-small-pressed-state-layer-opacity: 0.12;
--mat-fab-small-ripple-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-fab-small-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-fab-state-layer-color: rgba(0, 0, 0, 0.87);
}
.mat-mdc-fab.mat-primary, .mat-mdc-mini-fab.mat-primary {
--mat-fab-container-color: var(--color-brand-primary-100);
--mat-fab-foreground-color: var(--color-white);
--mat-fab-ripple-color: color-mix(in srgb, var(--color-brand-primary-100) 12%, transparent);
--mat-fab-small-container-color: var(--color-brand-primary-100);
--mat-fab-small-foreground-color: var(--color-white);
--mat-fab-small-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-fab-small-state-layer-color: var(--color-white);
--mat-fab-state-layer-color: var(--color-white);
}
.mat-mdc-fab.mat-accent, .mat-mdc-mini-fab.mat-accent {
--mat-fab-container-color: var(--color-brand-secondary-100);
--mat-fab-foreground-color: var(--color-white);
--mat-fab-ripple-color: color-mix(in srgb, var(--color-brand-secondary-100) 12%, transparent);
--mat-fab-small-container-color: var(--color-brand-secondary-100);
--mat-fab-small-foreground-color: var(--color-white);
--mat-fab-small-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-fab-small-state-layer-color: var(--color-white);
--mat-fab-state-layer-color: var(--color-white);
}
.mat-mdc-fab.mat-warn, .mat-mdc-mini-fab.mat-warn {
--mat-fab-container-color: var(--color-danger-100);
--mat-fab-foreground-color: var(--color-white);
--mat-fab-ripple-color: color-mix(in srgb, var(--color-danger-100) 12%, transparent);
--mat-fab-small-container-color: var(--color-danger-100);
--mat-fab-small-foreground-color: var(--color-white);
--mat-fab-small-ripple-color: color-mix(in srgb, var(--color-white) 12%, transparent);
--mat-fab-small-state-layer-color: var(--color-white);
--mat-fab-state-layer-color: var(--color-white);
}
html {
--mat-fab-small-touch-target-display: block;
--mat-fab-touch-target-display: block;
}
html {
--mat-snack-bar-container-shape: 4px;
}
html {
--mat-snack-bar-container-color: #424242;
--mat-snack-bar-supporting-text-color: white;
--mat-snack-bar-button-color: var(--color-brand-primary-100);
}
html {
--mat-table-row-item-outline-width: 1px;
}
html {
--mat-table-background-color: white;
--mat-table-header-headline-color: rgba(0, 0, 0, 0.87);
--mat-table-row-item-label-text-color: rgba(0, 0, 0, 0.87);
--mat-table-row-item-outline-color: rgba(0, 0, 0, 0.12);
}
html {
--mat-table-header-container-height: 56px;
--mat-table-footer-container-height: 52px;
--mat-table-row-item-container-height: 52px;
}
html {
--mat-progress-spinner-active-indicator-width: 4px;
--mat-progress-spinner-size: 48px;
}
html {
--mat-progress-spinner-active-indicator-color: var(--color-brand-primary-100);
}
.mat-accent {
--mat-progress-spinner-active-indicator-color: var(--color-brand-secondary-100);
}
.mat-warn {
--mat-progress-spinner-active-indicator-color: var(--color-danger-100);
}
html {
--mat-badge-container-shape: 50%;
--mat-badge-container-size: unset;
--mat-badge-small-size-container-size: unset;
--mat-badge-large-size-container-size: unset;
--mat-badge-legacy-container-size: 22px;
--mat-badge-legacy-small-size-container-size: 16px;
--mat-badge-legacy-large-size-container-size: 28px;
--mat-badge-container-offset: -11px 0;
--mat-badge-small-size-container-offset: -8px 0;
--mat-badge-large-size-container-offset: -14px 0;
--mat-badge-container-overlap-offset: -11px;
--mat-badge-small-size-container-overlap-offset: -8px;
--mat-badge-large-size-container-overlap-offset: -14px;
--mat-badge-container-padding: 0;
--mat-badge-small-size-container-padding: 0;
--mat-badge-large-size-container-padding: 0;
}
html {
--mat-badge-background-color: var(--color-brand-primary-100);
--mat-badge-text-color: var(--color-white);
--mat-badge-disabled-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-badge-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
}
.mat-badge-accent {
--mat-badge-background-color: var(--color-brand-secondary-100);
--mat-badge-text-color: var(--color-white);
}
.mat-badge-warn {
--mat-badge-background-color: var(--color-danger-100);
--mat-badge-text-color: var(--color-white);
}
html {
--mat-bottom-sheet-container-shape: 4px;
}
html {
--mat-bottom-sheet-container-text-color: rgba(0, 0, 0, 0.87);
--mat-bottom-sheet-container-background-color: white;
}
html {
--mat-button-toggle-focus-state-layer-opacity: 0.12;
--mat-button-toggle-hover-state-layer-opacity: 0.04;
--mat-button-toggle-legacy-focus-state-layer-opacity: 1;
--mat-button-toggle-legacy-height: 36px;
--mat-button-toggle-legacy-shape: 2px;
--mat-button-toggle-shape: 4px;
}
html {
--mat-button-toggle-background-color: white;
--mat-button-toggle-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-toggle-disabled-selected-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-toggle-disabled-state-background-color: white;
--mat-button-toggle-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-toggle-divider-color: rgba(0, 0, 0, 0.12);
--mat-button-toggle-legacy-disabled-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-toggle-legacy-disabled-state-background-color: white;
--mat-button-toggle-legacy-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-button-toggle-legacy-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-toggle-legacy-selected-state-text-color: rgba(0, 0, 0, 0.87);
--mat-button-toggle-legacy-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-toggle-legacy-text-color: rgba(0, 0, 0, 0.87);
--mat-button-toggle-selected-state-background-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
--mat-button-toggle-state-layer-color: rgba(0, 0, 0, 0.87);
--mat-button-toggle-text-color: rgba(0, 0, 0, 0.87);
}
html {
--mat-button-toggle-height: 48px;
}
html {
--mat-datepicker-calendar-container-shape: 4px;
--mat-datepicker-calendar-container-touch-shape: 4px;
--mat-datepicker-calendar-container-elevation-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2), 0px 4px 5px 0px rgba(0, 0, 0, 0.14), 0px 1px 10px 0px rgba(0, 0, 0, 0.12);
--mat-datepicker-calendar-container-touch-elevation-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
}
html {
--mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, var(--color-brand-primary-100) 20%, transparent);
--mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, var(--color-brand-secondary-100) 20%, transparent);
--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
--mat-datepicker-calendar-date-selected-state-text-color: var(--color-white);
--mat-datepicker-calendar-date-selected-state-background-color: var(--color-brand-primary-100);
--mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, var(--color-brand-primary-100) 38%, transparent);
--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--color-white);
--mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, var(--color-brand-primary-100) 12%, transparent);
--mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, var(--color-brand-primary-100) 4%, transparent);
--mat-datepicker-toggle-active-state-icon-color: var(--color-brand-primary-100);
--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-calendar-date-outline-color: transparent;
--mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-container-background-color: white;
--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.mat-datepicker-content.mat-accent, .mat-datepicker-toggle-active.mat-accent {
--mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, var(--color-brand-secondary-100) 20%, transparent);
--mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, var(--color-brand-secondary-100) 20%, transparent);
--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
--mat-datepicker-calendar-date-selected-state-text-color: var(--color-white);
--mat-datepicker-calendar-date-selected-state-background-color: var(--color-brand-secondary-100);
--mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, var(--color-brand-secondary-100) 38%, transparent);
--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--color-white);
--mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, var(--color-brand-secondary-100) 12%, transparent);
--mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, var(--color-brand-secondary-100) 4%, transparent);
--mat-datepicker-toggle-active-state-icon-color: var(--color-brand-secondary-100);
--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-calendar-date-outline-color: transparent;
--mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-container-background-color: white;
--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.mat-datepicker-content.mat-warn, .mat-datepicker-toggle-active.mat-warn {
--mat-datepicker-calendar-date-in-range-state-background-color: color-mix(in srgb, var(--color-danger-100) 20%, transparent);
--mat-datepicker-calendar-date-in-comparison-range-state-background-color: color-mix(in srgb, var(--color-brand-secondary-100) 20%, transparent);
--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: rgb(69.5241935484, 163.4758064516, 93.9516129032);
--mat-datepicker-calendar-date-selected-state-text-color: var(--color-white);
--mat-datepicker-calendar-date-selected-state-background-color: var(--color-danger-100);
--mat-datepicker-calendar-date-selected-disabled-state-background-color: color-mix(in srgb, var(--color-danger-100) 38%, transparent);
--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--color-white);
--mat-datepicker-calendar-date-focus-state-background-color: color-mix(in srgb, var(--color-danger-100) 12%, transparent);
--mat-datepicker-calendar-date-hover-state-background-color: color-mix(in srgb, var(--color-danger-100) 4%, transparent);
--mat-datepicker-toggle-active-state-icon-color: var(--color-danger-100);
--mat-datepicker-toggle-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-body-label-text-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-period-button-text-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-calendar-period-button-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-navigation-button-icon-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-header-divider-color: rgba(0, 0, 0, 0.12);
--mat-datepicker-calendar-header-text-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-date-today-outline-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-calendar-date-today-disabled-state-outline-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-date-text-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-calendar-date-outline-color: transparent;
--mat-datepicker-calendar-date-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.54);
--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-range-input-disabled-state-separator-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-range-input-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-datepicker-calendar-container-background-color: white;
--mat-datepicker-calendar-container-text-color: rgba(0, 0, 0, 0.87);
}
.mat-calendar-controls {
--mat-icon-button-touch-target-display: none;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
--mdc-icon-button-state-layer-size: 40px;
--mat-icon-button-state-layer-size: 40px;
width: var(--mat-icon-button-state-layer-size);
height: var(--mat-icon-button-state-layer-size);
padding: 8px;
}
html {
--mat-divider-width: 1px;
}
html {
--mat-divider-color: rgba(0, 0, 0, 0.12);
}
html {
--mat-expansion-container-shape: 4px;
--mat-expansion-container-elevation-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
--mat-expansion-legacy-header-indicator-display: inline-block;
--mat-expansion-header-indicator-display: none;
}
html {
--mat-expansion-container-background-color: white;
--mat-expansion-container-text-color: rgba(0, 0, 0, 0.87);
--mat-expansion-actions-divider-color: rgba(0, 0, 0, 0.12);
--mat-expansion-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
--mat-expansion-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-expansion-header-disabled-state-text-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 38%, transparent);
--mat-expansion-header-text-color: rgba(0, 0, 0, 0.87);
--mat-expansion-header-description-color: rgba(0, 0, 0, 0.54);
--mat-expansion-header-indicator-color: rgba(0, 0, 0, 0.54);
}
html {
--mat-expansion-header-collapsed-state-height: 48px;
--mat-expansion-header-expanded-state-height: 64px;
}
html {
--mat-icon-color: inherit;
}
.mat-icon.mat-primary {
--mat-icon-color: var(--color-brand-primary-100);
}
.mat-icon.mat-accent {
--mat-icon-color: var(--color-brand-secondary-100);
}
.mat-icon.mat-warn {
--mat-icon-color: var(--color-danger-100);
}
html {
--mat-sidenav-container-shape: 0;
--mat-sidenav-container-elevation-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.2), 0px 16px 24px 2px rgba(0, 0, 0, 0.14), 0px 6px 30px 5px rgba(0, 0, 0, 0.12);
--mat-sidenav-container-width: auto;
}
html {
--mat-sidenav-container-divider-color: rgba(0, 0, 0, 0.12);
--mat-sidenav-container-background-color: white;
--mat-sidenav-container-text-color: rgba(0, 0, 0, 0.87);
--mat-sidenav-content-background-color: #fafafa;
--mat-sidenav-content-text-color: rgba(0, 0, 0, 0.87);
--mat-sidenav-scrim-color: rgba(0, 0, 0, 0.6);
}
html {
--mat-stepper-header-focus-state-layer-shape: 0;
--mat-stepper-header-hover-state-layer-shape: 0;
}
html {
--mat-stepper-header-icon-foreground-color: var(--color-white);
--mat-stepper-header-selected-state-icon-background-color: var(--color-brand-primary-100);
--mat-stepper-header-selected-state-icon-foreground-color: var(--color-white);
--mat-stepper-header-done-state-icon-background-color: var(--color-brand-primary-100);
--mat-stepper-header-done-state-icon-foreground-color: var(--color-white);
--mat-stepper-header-edit-state-icon-background-color: var(--color-brand-primary-100);
--mat-stepper-header-edit-state-icon-foreground-color: var(--color-white);
--mat-stepper-container-color: white;
--mat-stepper-line-color: rgba(0, 0, 0, 0.12);
--mat-stepper-header-hover-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 4%, transparent);
--mat-stepper-header-focus-state-layer-color: color-mix(in srgb, rgba(0, 0, 0, 0.87) 12%, transparent);
--mat-stepper-header-label-text-color: rgba(0, 0, 0, 0.54);
--mat-stepper-header-optional-label-text-color: rgba(0, 0, 0, 0.54);
--mat-stepper-header-selected-state-label-text-color: rgba(0, 0, 0, 0.87);
--mat-stepper-header-error-state-label-text-color: var(--color-danger-100);
--mat-stepper-header-icon-background-color: rgba(0, 0, 0, 0.54);
--mat-stepper-header-error-state-icon-foreground-color: var(--color-danger-100);
--mat-stepper-header-error-state-icon-background-color: transparent;
}
.mat-step-header.mat-accent {
--mat-stepper-header-icon-foreground-color: var(--color-white);
--mat-stepper-header-selected-state-icon-background-color: var(--color-brand-secondary-100);
--mat-stepper-header-selected-state-icon-foreground-color: var(--color-white);
--mat-stepper-header-done-state-icon-background-color: var(--color-brand-secondary-100);
--mat-stepper-header-done-state-icon-foreground-color: var(--color-white);
--mat-stepper-header-edit-state-icon-background-color: var(--color-brand-secondary-100);
--mat-stepper-header-edit-state-icon-foreground-color: var(--color-white);
}
.mat-step-header.mat-warn {
--mat-stepper-header-icon-foreground-color: var(--color-white);
--mat-stepper-header-selected-state-icon-background-color: var(--color-danger-100);
--mat-stepper-header-selected-state-icon-foreground-color: var(--color-white);
--mat-stepper-header-done-state-icon-background-color: var(--color-danger-100);
--mat-stepper-header-done-state-icon-foreground-color: var(--color-white);
--mat-stepper-header-edit-state-icon-background-color: var(--color-danger-100);
--mat-stepper-header-edit-state-icon-foreground-color: var(--color-white);
}
html {
--mat-stepper-header-height: 72px;
}
html {
--mat-sort-arrow-color: rgba(0, 0, 0, 0.87);
}
html {
--mat-toolbar-container-background-color: white;
--mat-toolbar-container-text-color: rgba(0, 0, 0, 0.87);
}
.mat-toolbar.mat-primary {
--mat-toolbar-container-background-color: var(--color-brand-primary-100);
--mat-toolbar-container-text-color: var(--color-white);
}
.mat-toolbar.mat-accent {
--mat-toolbar-container-background-color: var(--color-brand-secondary-100);
--mat-toolbar-container-text-color: var(--color-white);
}
.mat-toolbar.mat-warn {
--mat-toolbar-container-background-color: var(--color-danger-100);
--mat-toolbar-container-text-color: var(--color-white);
}
html {
--mat-toolbar-standard-height: 64px;
--mat-toolbar-mobile-height: 56px;
}
html {
--mat-tree-container-background-color: white;
--mat-tree-node-text-color: rgba(0, 0, 0, 0.87);
}
html {
--mat-tree-node-min-height: 48px;
}
html {
--mat-timepicker-container-shape: 4px;
--mat-timepicker-container-elevation-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2), 0px 8px 10px 1px rgba(0, 0, 0, 0.14), 0px 3px 14px 2px rgba(0, 0, 0, 0.12);
}
html {
--mat-timepicker-container-background-color: white;
}
/* Default-Komponenten-Typographien (ohne eigenes typography-config) */
/* ---------------------------
CSS-Variablen aus Theme-Farben
--------------------------- */
/* Wir holen hier die Farbe mit Index 500 als sinnvolle Default-Farbe */
:root {
--color-primary: var(--color-brand-primary-100);
--color-accent: var(--color-brand-secondary-100);
--color-warn: var(--color-danger-100);
}
mat-expansion-panel-header {
color: var(--color-brand-primary-100);
font-weight: bold !important;
}
.mat-expansion-indicator::after {
color: var(--color-brand-primary-100);
border-width: 0 0.1875rem 0.1875rem 0 !important;
padding: 0.3125rem !important;
margin-top: -0.5625rem !important;
}
/*::ng-deep .ng-animating div mat-accordion mat-expansion-panel mat-expansion-panel-header {
height: 48px;
}
::ng-deep .ng-animating div mat-accordion mat-expansion-panel div.mat-expansion-panel-content {
height: 0px;
visibility: hidden;
}*/
.button-danger {
background-color: var(--color-danger-100);
background-image: linear-gradient(135deg, var(--color-danger-100), var(--color-danger-100));
color: var(--color-white);
box-shadow: var(--elevation-1);
}
.button-confirm {
background-color: var(--color-success-100);
background-image: linear-gradient(135deg, var(--color-success-100), var(--color-success-100));
color: var(--color-white);
box-shadow: var(--elevation-1);
}
/*
Für z.B. Löschen Knöpfe in Cards
background-color kann evtl später gelöscht werden, wenn rework css gemacht wurde (entfernen des leichten Grautons)
*/
/*
Disabled condition Farben +
ueberschreiben der Hover Condition
*/
/*.button:disabled{
background-color: var(--color-black-15);
background-image: var(--color-black-15);
top: 0px;
opacity: 1;
}*/
.mat-button-wrapper {
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-s);
}
.mat-button-wrapper-contents {
display: contents;
align-items: center;
justify-content: center;
gap: var(--space-s);
}
.content-wrapper {
display: flex;
align-items: left;
justify-content: left;
gap: var(--space-s);
}
mat-icon[filterBadge]:after {
content: "";
display: inline-block;
border-style: solid;
border-width: 5px;
border-color: var(--color-danger-100);
position: relative;
top: -13px;
right: 10px;
border-radius: 6px;
}
.button-float-right {
float: right;
}
.mat-radio-button {
margin-right: 1rem !important;
}
.sammelabrechnung-icon {
color: var(--color-white);
fill: var(--color-white) important;
}
.pflichtmitzeichner-icon {
color: var(--color-white);
fill: var(--color-white) important;
}
.card-bearbeitung {
border-left: solid 0.4375rem var(--color-brand-primary-100);
}
.card-fehlerhaft {
border-left: solid 0.4375rem var(--color-danger-100);
}
.card-abgeschlossen {
border-left: solid 0.4375rem var(--color-brand-primary-100);
}
.card-neutral {
border-left: solid 0.4375rem var(--color-neutral-10);
}
.card-wichtiger-hinweis {
border-left: solid 0.4375rem var(--color-help-100);
}
.card-abgeschlossen .va-status {
font-weight: bold;
}
.card-bearbeitung .va-status, .card-fehlerhaft .va-status {
font-style: italic;
}
.card-rmb-abgeschlossen {
border-left: solid 0.4375rem var(--color-neutral-10);
}
.card-rmb-success {
border-left: solid 0.4375rem var(--color-success-100);
}
.card-rmb-brand-primary {
border-left: solid 0.4375rem var(--color-brand-primary-100);
}
.card-rmb-help {
border-left: solid 0.4375rem var(--color-help-100);
}
.card-rmb-danger {
border-left: solid 0.4375rem var(--color-danger-100);
}
.card-rmb-genehmigung-ausstehend {
border-left: solid 0.4375rem var(--color-warning-100);
}
.card-sachbearbeitung {
border-left: solid 0.4375rem var(--color-warning-100);
}
.card-abgerechnet {
border-left: solid 0.4375rem var(--color-success-100);
}
.card-offen-versandbereit {
border-left: solid 0.4375rem var(--color-brand-primary-100);
}
.card-genehmigt {
border-left: solid 0.4375rem var(--color-success-100);
}
.card-offen {
border-left: solid 0.4375rem var(--color-help-100);
}
.card-inaktiv {
border-left: solid 0.4375rem var(--color-neutral-10);
}
.card-entwurf {
border-left: solid 0.4375rem var(--color-brand-primary-100);
}
.card-abgelehnt {
border-left: solid 0.4375rem var(--color-danger-100);
}
.card-seperator-vertical {
border-left: #EDEDED 0.0625rem solid;
margin: -1rem 0 -1rem 0;
}
.card-seperator-horizontal {
border-top: #EDEDED 0.0625rem solid;
margin: 1rem -1rem 1rem -1rem;
}
.card-liste-element {
margin: 1em 0em 1em 0em !important;
text-align: left;
}
.card-liste-element:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
border-radius: var(--roundness-2);
}
.card-suchliste-element {
margin: 1em 0.5em 0em 0.5em !important;
text-align: center;
padding-left: 0em !important;
}
.card-suchliste-element:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
border-radius: var(--roundness-2);
}
.card-voreinstellung-element {
margin: 1em 0em 0em 0em !important;
text-align: left;
padding-left: 1em !important;
font-weight: bold;
}
.card-voreinstellung-element:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
border-radius: var(--roundness-2);
}
.card-no-element {
margin: 1em 0em 1em 0em !important;
text-align: left;
white-space: normal;
word-wrap: break-word;
}
.card-spacing {
justify-content: space-between;
}
.card-spacing-combined {
justify-content: space-between;
align-items: center;
}
ul {
list-style-type: none;
}
li {
list-style-type: none;
}
.anlagen_label {
text-align: center;
}
.card-spalte-1 {
width: 70%;
text-align: left;
}
.card-spalte-2 {
width: 20%;
text-align: center;
}
.card-spalte-3 {
width: 10%;
text-align: center;
}
.vkm-edit-border {
border-radius: var(--roundness-2);
padding: 1rem 1rem 1rem 1rem;
}
.voreinstellungen-button {
height: 1rem;
padding: 1rem 1rem 1rem 1rem;
margin-left: -1rem;
margin-bottom: 1rem;
}
.slide-toggle {
margin-top: 1rem;
margin-bottom: 1rem;
align-items: normal;
display: flex;
}
.mat-slide-toggle {
margin-right: 1rem !important;
}
.on-create-fade {
animation-timing-function: ease-out;
animation-duration: 0.6s;
animation-delay: 1s;
border-right: solid 0.4375rem var(--color-brand-primary-100);
}
.card.miniCardCombined .miniCard {
grid-column: 1;
margin: 0;
margin-left: -0.4rem;
padding: 0;
padding-left: 1rem;
display: flex;
padding: var(--space-s);
border-radius: var(--roundness-2);
justify-content: space-between;
}
.card.miniCardCombined .miniCard .content {
display: flex;
padding-right: 0px;
align-items: flex-start;
justify-content: flex-start;
gap: 0.5rem;
}
.card.miniCardCombined {
isolation: isolate;
--status-color: var(--neutral-25);
display: grid;
gap: 0;
grid-template-columns: 1fr auto;
border-left: 0;
margin: 1rem 0 0 0.4rem;
padding: 0;
flex: 1 0 0;
box-shadow: var(--elevation-1);
min-width: fit-content;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.3125rem;
gap: var(--space-s);
row-gap: 0;
margin: var(--space-s);
}
.card.miniCard {
--status-color: var(--neutral-25);
isolation: isolate;
display: flex;
padding: var(--space-m) var(--space-s) var(--space-m) var(--space-l);
justify-content: flex-end;
align-items: center;
gap: var(--space-s);
margin: var(--space-s);
flex: 1 0 0;
border-radius: var(--roundness-2);
border-left: var(--border-2) var(--border-style) var(--status-color);
box-shadow: var(--elevation-1);
min-width: fit-content;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.3125rem;
justify-content: space-between;
padding: var(--space-s) var(--space-xs) var(--space-s) var(--space-m);
}
.card-beschreibung {
padding-left: 1rem;
}
.mat-expansion-panel {
margin-bottom: 0.5rem !important;
}
.card-mini-beschreibung {
margin-left: 10rem;
}
.card-status-help {
background-color: var(--color-help-25);
color: var(--color-black-100);
border-radius: var(--roundness-2);
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
margin-left: 2rem;
padding-right: 1.5em;
padding-left: 1.5em;
}
.card-status-success {
background-color: var(--color-success-20);
color: var(--color-black-100);
border-radius: var(--roundness-2);
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
margin-left: 2rem;
padding-right: 1.5em;
padding-left: 1.5em;
}
.card-status-danger {
background-color: var(--color-danger-25);
color: var(--color-black-100);
border-radius: var(--roundness-2);
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
margin-left: 2rem;
padding-right: 1.5em;
padding-left: 1.5em;
}
.card-status-brand-primary {
background-color: var(--color-brand-primary-25);
color: var(--color-black-100);
border-radius: var(--roundness-2);
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
margin-left: 2rem;
padding-right: 1.5em;
padding-left: 1.5em;
}
.card-status-neutral {
background-color: var(--color-neutral-10);
color: var(--color-black-100);
border-radius: var(--roundness-2);
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
margin-left: 2rem;
padding-right: 1.5em;
padding-left: 1.5em;
}
.card-status-warning {
background-color: var(--color-warning-25);
color: var(--color-black-100);
border-radius: var(--roundness-2);
display: inline-flex;
justify-content: center;
align-items: center;
margin-right: 1rem;
margin-left: 2rem;
padding-right: 1.5em;
padding-left: 1.5em;
}
.card-startseite {
padding: 1.5rem;
border-radius: var(--roundness-2);
box-shadow: var(--elevation-1);
margin-bottom: 1rem;
}
.card-startseite.aktuelles {
border-left: solid 0.4375rem var(--color-brand-primary-100);
background-color: var(--color-brand-primary-5);
}
.card-startseite.behoerde {
border-left: solid 0.4375rem var(--color-warning-100);
background-color: var(--color-warning-5);
}
.card-startseite.kontakt {
border-left: solid 0.4375rem var(--color-brand-primary-100);
background-color: var(--color-brand-primary-5);
}
.card-successpage {
padding: 1.5rem;
border-radius: var(--roundness-2);
box-shadow: var(--elevation-1);
margin-bottom: 1rem;
}
.card-successpage.success {
border-left: solid 0.4375rem var(--color-success-100);
background-color: var(--color-success-5);
}
.card-successpage.warning {
border-left: solid 0.4375rem var(--color-warning-100);
background-color: var(--color-warning-5);
}
.card-successpage.error {
border-left: solid 0.4375rem var(--color-danger-100);
background-color: var(--color-danger-5);
}
.dateiuploadfehlerheader {
font-weight: bold;
margin-top: 0.5rem;
}
.dateiuploadfehlertext {
margin-left: 1rem;
font-weight: normal;
}
.icon-new {
color: var(--color-brand-primary-100) !important;
width: 2rem !important;
height: 2rem !important;
}
.margin-bottom-startseite {
margin-bottom: 2rem !important;
}
.rmb-icons-justify-center {
justify-content: center;
}
.margin-bottom-button-group {
margin-bottom: 2rem !important;
}
.table-persoenliche-daten-zeile {
display: flex;
}
.table-persoenliche-daten-feld {
width: 35%;
font-weight: bold;
white-space: normal;
word-wrap: break-word;
}
.table-persoenliche-daten-inhalt {
width: 65%;
font-weight: normal;
white-space: normal;
word-wrap: break-word;
}
.administrationmargintopbottom {
margin-top: 2rem;
margin-bottom: 1rem;
}
fieldset {
background-color: var(--color-brand-secondary-5);
border: none;
border-radius: var(--roundness-1);
margin-bottom: 0.5rem;
}
fieldset legend {
color: var(--color-brand-secondary-100);
float: left;
align-items: center;
width: 100%;
align-items: center;
}
fieldset legend p {
text-align: left;
}
.mat-form-field-appearance-fill .mat-form-field-flex {
background-color: var(--color-white);
height: 4em;
}
.mat-form-field-appearance-outline .mat-form-field-outline {
background-color: var(--color-white);
height: 4em;
}
.mat-form-field-appearance-standard .mat-form-field-flex {
padding-top: 0em;
background-color: var(--color-white);
padding: 0.75em 0 0 0.75em;
}
.mat-form-field-subscript-wrapper {
margin-top: 0.1em !important;
margin-bottom: 0.4em !important;
}
.checkbox-left {
text-align: left;
}
.full-width {
width: 100%;
}
.margin-top-heading {
margin-top: 1em !important;
}
.radiogroup-middle {
justify-content: center;
display: flex;
align-items: center;
}
.toggle-middle {
justify-content: center;
display: flex;
align-items: center;
}
.icon-middle {
justify-content: center;
display: flex;
align-items: center;
font-weight: normal !important;
text-align: left;
}
.vollmachten-middle {
display: flex;
align-items: center;
font-weight: bold;
text-align: left;
}
.search-field-lupe {
line-height: 0.95em !important;
fill: white;
color: white;
}
/* TODO entfernen wenn überall ausgebaut*/
.form-field-width {
/*width: 25.5em; */
}
.form-field-padding-left {
padding-left: 1em;
}
.text-red {
color: var(--color-danger-100);
}
.text-yellow {
color: var(--color-warning-100);
}
.grey-div-background {
margin-top: 1em;
background-color: var(--color-brand-secondary-5);
}
.icon-external {
transform: scale(0.7) !important;
}
.color-danger-100-inverted {
background-color: var(--color-white) !important;
color: var(--color-danger-100) !important;
}
.color-black-100-inverted {
color: var(--color-black-100) !important;
background-color: var(--color-white) !important;
}
dialog.sidebar-help .header button[data-close],
dialog.sidebar-help header button[data-close] {
width: 2rem !important;
height: 2rem !important;
min-width: 2rem !important;
min-height: 2rem !important;
}
dialog.sidebar-help .header button[data-close]::after,
dialog.sidebar-help header button[data-close]::after {
width: 1rem !important;
height: 1rem !important;
min-width: 1rem !important;
min-height: 1rem !important;
}
body {
margin: 0px;
}
/*.info-tooltip {
display: inline-flex;
position: inherit;
vertical-align: text-bottom;
cursor: pointer;
background-color: transparent;
}
*/
msb-app-nav nav.group:not(:has(msb-app-nav-item button)) {
display: none !important;
}
msb-app-nav nav.app-menu:not(:has(button)) {
display: none !important;
}
@media (min-width: 992px) {
msb-app-nav .app-nav-toggler {
display: none !important;
}
}
/*.no-spacing {
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
> .row {
margin-left: 0;
margin-right: 0;
}
> .col,
> [class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}*/
fieldset .mat-mdc-text-field-wrapper {
background-color: white !important;
}
.no-margin {
margin-right: 0 !important;
margin-left: 0 !important;
}
.container {
width: 100%;
margin-right: auto;
margin-left: auto;
}
/* Dieser komplette Block (inkl. before und after) ist nötig, damit der Material Stepper richtig responsive ist
1. --mat-stepper-header-height auf none setzen (die Variable verhindert den Umbruch durch Kalkulation der Header-Höhe. Manuell setzen funktioniert nicht
2. Label-Position und Line-Position anpassen da sonst nicht zentriert
3. Padding setzen, da das vorher auch durch die Variable --mat-stepper-header-height errechnet wurde
4. before und after: Beginn- und Endstriche auf die richtige Höhe setzen*/
html {
--mat-stepper-header-height: none;
}
.mat-stepper-horizontal-line {
margin-top: 0.75rem !important;
}
.mat-stepper-label-position-bottom {
margin-bottom: 1rem;
}
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
padding: 0 0.5rem 2rem 0.5rem !important;
}
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:last-child)::after {
margin-top: 0.75rem;
}
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header:not(:first-child)::before {
margin-top: 0.75rem;
}
/*.mat-stepper-label-position-bottom .mat-stepper-horizontal-line {
top: calc((var(72px) - 24px) / 2) !important;
}
.mat-stepper-label-position-bottom .mat-horizontal-stepper-header {
padding: calc((var(72px) - 24px) / 2) !important;
}*/
/*.test{
background: red;
max-width: 100%;
*{
box-sizing: border-box;
}
}*/
/*.mat-horizontal-stepper-header-container{
//overflow-x: auto;
max-width: 100%;
}
.mat-horizontal-stepper-header{
min-width: fit-content;
}*/
.mat-datepicker-content .mat-calendar {
width: 296px;
height: unset !important;
}
.mat-error {
font-size: 0.8125rem !important;
}
.mat-option {
text-wrap: balance !important;
line-height: 1.5em !important;
white-space: normal !important;
}
.mat-select-panel mat-option.mat-option {
height: unset;
margin-top: 0.5em;
}
dl, ol, ul {
margin-bottom: 0;
}
.card {
overflow: visible !important; /* Damit werden Popups (z. B. von NgbDropdown oder NgbDatepicker nicht abgeschnitten) */
}
.nav-tabs .nav-link.active .tab-full-title {
display: inline !important;
}
.minWwidth100 {
min-width: 100%;
}
a.disabled {
pointer-events: none;
cursor: not-allowed;
opacity: 0.5;
}
.ng-invalid.ng-touched > .app-formcontrol .app-form-input, .ng-invalid.ng-touched > .app-formcontrol .app-checkbox-group, .ng-invalid.ng-touched > .app-formcontrol .dropdown-toggle, .ng-invalid.ng-touched > .app-formcontrol .mat-form-field-underline {
border: 1px solid var(--color-warn);
}
.ng-invalid.ng-touched > .app-formcontrol .app-form-input.app-checkbox-group .app-checkbox-group-content, .ng-invalid.ng-touched > .app-formcontrol .app-checkbox-group.app-checkbox-group .app-checkbox-group-content, .ng-invalid.ng-touched > .app-formcontrol .dropdown-toggle.app-checkbox-group .app-checkbox-group-content, .ng-invalid.ng-touched > .app-formcontrol .mat-form-field-underline.app-checkbox-group .app-checkbox-group-content {
margin-left: 0.4em;
}
.ng-invalid.ng-touched > .app-formcontrol .app-form-input.app-radiobutton-group .app-radiobutton-group-content, .ng-invalid.ng-touched > .app-formcontrol .app-checkbox-group.app-radiobutton-group .app-radiobutton-group-content, .ng-invalid.ng-touched > .app-formcontrol .dropdown-toggle.app-radiobutton-group .app-radiobutton-group-content, .ng-invalid.ng-touched > .app-formcontrol .mat-form-field-underline.app-radiobutton-group .app-radiobutton-group-content {
margin-left: 0.4em;
}
.ng-invalid.ng-touched > .app-formcontrol .app-form-input.row, .ng-invalid.ng-touched > .app-formcontrol .app-checkbox-group.row, .ng-invalid.ng-touched > .app-formcontrol .dropdown-toggle.row, .ng-invalid.ng-touched > .app-formcontrol .mat-form-field-underline.row {
margin-left: 0;
margin-right: 0;
}
.invalid-text {
color: var(--color-warn);
}
button:disabled {
cursor: not-allowed;
}
/* Wird von app-validation-view verwendet */
.error-text {
color: var(--color-warn);
margin-bottom: 1em;
margin-top: -1.25em;
font-size: 0.8125rem; /*von Mario kopiert*/
}
.mat-checkbox-layout {
white-space: normal !important;
}
.mat-checkbox-inner-container {
margin-bottom: auto !important;
margin-top: 4px !important;
}
.mat-checkbox-layout .mat-checkbox-label {
display: flex;
flex-direction: row;
}
/* Firefox schneidet bei g unten den Bogen ab => mat-form-field muss überschrieben werden, line-height von 1.125 auf 1.15*/
.mat-form-field {
line-height: 1.35em !important;
}
/*ab hier neue styles für material design */
.icon-button-container {
display: flex;
flex-direction: column;
align-items: center;
}
.icon-button-container > mat-icon {
margin-top: 10px;
}
.icon-button-container > mat-icon > svg {
margin-top: -10px;
}
.expansionpanel-hinweis {
max-width: 35em;
margin-bottom: 2em !important;
}
/*.mat-expansion-indicator::after{
color: var(--color-primary);
border-width: 0 3px 3px 0 !important;
padding: 5px !important;
margin-top: -9px !important;
}*/
.button-right {
float: right;
}
.icon-button-raised-basic {
padding-left: 8px !important;
}
.icon-button-raised-basic mat-icon {
margin-right: 8px !important;
}
.card-hinweis {
border-left: solid 7px #008DC9;
max-width: 46em;
min-width: 20em;
}
.card-hinweis h1 {
margin-bottom: 0.8em !important;
}
.card-hinweis mat-card-content {
margin: 0em 5.8em 2.4em 4em !important;
}
.card-hinweis-xs mat-card-content {
margin: 0em 1.4em 2em 1.4em !important;
}
.card-hinweis mat-card-header {
margin: 1.2em 1.4em 2.4em 4em !important;
border-bottom: #EDEDED 1px solid;
}
.card-hinweis-xs mat-card-header {
margin-bottom: 1.5em !important;
margin-left: 1.4em !important;
margin-right: 1.4em !important;
}
.card-hinweis .mat-card-header-text {
margin: 0em !important;
}
.card-hinweis-xs button {
width: 100%;
}
.card-hinweis-xs img {
width: 70%;
height: 70%;
}
.mat-raised-button:focus {
box-shadow: 0px 1px 10px #008DC9;
}
.mat-raised-button .mat-button-focus-overlay {
display: none;
}
.mat-step-header .mat-step-icon-state-done, .mat-step-header .mat-step-icon-state-edit, .mat-step-header .mat-step-icon-state-number {
background-color: #35556C !important;
color: white !important;
}
.mat-step-header .mat-step-icon-state-done + .mat-step-label, .mat-step-header .mat-step-icon-state-edit + .mat-step-label, .mat-step-header .mat-step-icon-state-number + .mat-step-label {
color: #35556C !important;
}
.mat-step-header .mat-step-icon-state-number {
background-color: var(--color-neutral-25) !important;
color: white !important;
}
.mat-step-header .mat-step-icon-state-number + .mat-step-label {
color: #35556C !important;
}
.mat-step-header .mat-step-icon-state-error {
background-color: var(--color-white) !important;
color: white !important;
}
.mat-step-header .mat-step-icon-state-error + .mat-step-label {
color: #35556C !important;
}
.mat-step-header .mat-step-icon-selected {
background-color: #35556C !important;
color: white !important;
}
.mat-step-header .mat-step-icon-selected + .mat-step-label {
color: #35556C !important;
}
.mat-step-header .mat-step-label {
color: #35556C !important;
}
.white-background {
background-color: var(--color-white) !important;
}
.mat-step-header .mat-step-icon {
color: white !important;
background-color: #EDEDED;
}
.notopmargin,
#content .notopmargin {
margin-top: 0 !important;
}
.topmargin03em,
#content .topmargin03em {
margin-top: 0.3em;
}
.topmargin05em,
#content .topmargin05em {
margin-top: 0.5em;
}
.topmargin07em,
#content .topmargin07em {
margin-top: 0.7em;
}
.topmargin08em,
#content .topmargin08em {
margin-top: 0.8em;
}
.topmargin1em,
#content .topmargin1em {
margin-top: 1em !important;
}
.topmargin15em,
#content .topmargin15em {
margin-top: 1.5em !important;
}
.topmargin2em,
#content .topmargin2em {
margin-top: 2em !important;
}
.topmargin25em,
#content .topmargin25em {
margin-top: 2.5em !important;
}
.topmargin3em,
#content .topmargin3em {
margin-top: 3em !important;
}
.topmargin4em,
#content .topmargin4em {
margin-top: 4em !important;
}
.topmargin45em,
#content .topmargin45em {
margin-top: 4.5em !important;
}
.topmargin-06em,
#content .topmargin-06em {
margin-top: -0.6em !important;
}
.topmargin-12em,
#content .topmargin-12em {
margin-top: -1.2em !important;
}
.nobottommargin,
#content .nobottommargin {
margin-bottom: 0 !important;
}
.bottommargin05em {
margin-bottom: 0.5em !important;
}
.bottommargin1em {
margin-bottom: 1em !important;
}
.bottommargin15em {
margin-bottom: 1.5em !important;
}
.bottommargin2em {
margin-bottom: 2em !important;
}
.bottommargin3em {
margin-bottom: 3em !important;
}
.rightmargin1em {
margin-right: 1rem !important;
}
.padding1em {
padding: 1em !important;
}
.margin1em {
margin: 1em !important;
}
.emphasized {
font-weight: bold;
}
.mat-slide-toggle-bar {
width: 48px !important;
height: 24px !important;
border-radius: 16px !important;
}
.mat-slide-toggle-thumb-container {
top: 2px !important;
left: 2px !important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
transform: translate3d(24px, 0, 0) !important;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color: var(--color-white);
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color: var(--color-brand-primary-100);
}
.mat-raised-button.mat-primary:not([disabled=true]) {
color: #f0fff3;
background: transparent linear-gradient(104deg, #1285c7 0%, #0e6ba1 100%) 0% 0% no-repeat padding-box;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2196078431);
border-radius: 8px;
opacity: 1;
}
.mat-stroked-button.mat-secondary:not([disabled=true]) {
color: #117DBA;
background: #FFFFFF 0% 0% no-repeat padding-box;
box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.2196078431);
border: 2px solid #1C7EB8;
border-radius: 8px;
opacity: 1;
}
.mat-button.mat-tertiary:not([disabled=true]) {
color: #117DBA;
background: #FFFFFF 0% 0% no-repeat padding-box;
border-radius: 8px;
opacity: 1;
}
.mat-raised-button {
box-shadow: var(--elevation-1);
}
.mat-raised-button:hover {
box-shadow: var(--elevation-1-hover);
}
.mat-raised-button:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.mat-step-text-label {
font-size: 0.8rem;
text-wrap: wrap;
/** Für Firefox => kann text-wrap nicht **/
white-space: pre-wrap;
word-wrap: break-word;
}
.mat-radio-label-content {
text-wrap: pretty !important;
white-space: pre-wrap !important;
word-wrap: break-word !important;
}
input.mat-input-element {
margin-top: 0em;
}
.divsammelabrechnung-align-buttons {
justify-content: flex-end;
}
.divsammelabrechnung-align-antragstellen-button {
justify-content: flex-end;
margin-bottom: -4.7em;
}
.divreisemittelbestellung-align-antragstellen-button {
justify-content: flex-end;
}
.divsammelabrechnung-card-reisetage {
isolation: isolate;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
padding-left: 0.5rem;
padding-right: 0.5rem;
margin-top: 1.25rem;
margin-bottom: 1.25rem;
border: 2px solid var(--color-brand-primary-100);
border-left: 0.5rem solid var(--color-brand-primary-100);
border-radius: var(--roundness-2);
box-sizing: border-box;
box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
border-style: solid;
}
.divsammelabrechnung-card {
border: none;
}
.divsammelabrechnung-card:focus-within {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
border-radius: var(--roundness-2);
}
.divsammelabrechung-margin {
margin-top: 1.5rem;
margin-bottom: 1.5rem;
}
.divsammelabrechnung_verpflegung {
margin-top: 3rem;
}
.card {
isolation: isolate;
position: relative;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 0 0 auto;
align-self: stretch;
align-items: flex-start;
padding: var(--space-m);
box-shadow: var(--elevation-1);
border-radius: var(--roundness-2);
border-left: var(--border-2) var(--border-style) var(--border-color);
flex-shrink: 0;
}
.card.card-status {
--status-color: var(--neutral-25);
isolation: isolate;
display: flex;
padding: var(--space-m) var(--space-s) var(--space-m) var(--space-l);
justify-content: flex-end;
align-items: center;
gap: var(--space-s);
margin: var(--space-s);
flex: 1 0 0;
border-radius: var(--roundness-2);
border-left: var(--border-2) var(--border-style) var(--status-color);
box-shadow: var(--elevation-1);
min-width: fit-content;
font-size: 0.875rem;
font-style: normal;
font-weight: 400;
line-height: 1.3125rem;
}
.mobile-stepper .mat-horizontal-stepper-header-container {
display: none !important;
}
.progress-bar-container {
height: 5em;
background-color: #F8F8F8;
padding-left: 0.7em !important;
padding-right: 0.7em !important;
margin-bottom: 2rem;
color: var(--color-stepper);
border-radius: var(--roundness-2);
}
.progress-bar {
height: 0.8em !important;
border-radius: var(--roundness-2) !important;
z-index: 10;
border: 0.5em !important;
}
.ueberschrift-liste {
background-color: var(--color-neutral-10);
border: none;
height: 3rem;
justify-content: center;
align-items: center;
display: flex;
gap: 0.5rem;
color: var(--color-brand-primary-100);
}
.background-liste {
background-color: var(--color-neutral-10) !important;
}
.ueberschrift-liste-reworked {
background-color: var(--color-neutral-10-opaque);
border: none;
height: 3rem;
justify-content: center;
align-items: center;
display: flex;
gap: 0.5rem;
color: var(--color-brand-primary-100);
}
.ueberschrift-liste-button {
background-color: var(--color-neutral-10-opaque);
border: none;
color: var(--color-brand-primary-100);
justify-content: center !important;
align-items: center !important;
}
.mat-card {
border-radius: var(--roundness-2) !important;
}
.mat-mdc-progress-bar {
background: var(--color-neutral-10) !important;
border-width: 0.5em !important;
border-top-width: 0.75em !important;
--mdc-linear-progress-active-indicator-height: 10px !important;
}
.mdc-linear-progress__bar-inner {
border-top-width: 10px !important;
}
.mdc-linear-progress {
height: 10px !important;
}
.margin-left-card {
margin-left: 2rem;
}
.margin-right-card {
margin-right: 2rem;
}
.margin-left2rem {
margin-left: 2rem;
}
.alignend {
align-items: end;
}
.textwrap-pretty {
text-wrap: pretty;
/** Für Firefox => kann text-wrap nicht **/
white-space: pre-wrap;
word-wrap: break-word;
}
.currentcolor {
fill: currentColor !important;
}
.vollmmachten-header {
margin-top: 4rem !important;
}
.mitzeichner-name {
font-weight: bold;
}
.mitzeichner-text {
font-weight: normal;
}
.vertretungen-header {
margin-top: 4rem !important;
}
@media (prefers-reduced-motion: no-preference) {
.spinner {
border: 0.4rem solid var(--color-brand-primary-100);
border-radius: 50%;
border-top: 0.4rem solid transparent;
width: 2rem;
height: 2rem;
margin: 1rem;
}
}
@media (prefers-reduced-motion: no-preference) {
.spinner {
animation: spin 1500ms linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
}
.spinner.spinner-primary {
border-color: var(--color-brand-primary-100);
border-top-color: transparent;
}
.spinner.spinner-white {
border-color: var(--color-white);
border-top-color: transparent;
}
.spinner.spinner-xs {
border-width: 0.2rem;
border-top-width: 0.2rem;
width: 1rem;
height: 1rem;
}
@media all and (max-width: 800px) {
.mobilunsichtbar {
display: none !important;
}
.mobilsichtbar {
text-align: left;
}
.trenner {
margin-left: 2rem;
margin-right: 1rem;
}
.col-switch {
display: flex;
flex-wrap: wrap;
margin-left: 1em;
padding-bottom: 0.2em;
}
.row-switch {
flex: 1 0 0%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0%;
}
.card-end-switch {
justify-content: flex-end;
}
}
@media all and (min-width: 801px) {
.desktopunsichtbar {
display: none !important;
text-align: left;
}
.row-switch {
display: flex;
flex-wrap: wrap;
}
.col-switch {
flex: 1 0 0%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0%;
}
}
.flipped {
transform: rotate(180deg);
}
.grid {
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(12, 1fr);
gap: 1.5rem;
}
.gap-2 {
gap: 1em !important;
}
.grid .g-col-6 {
grid-column: auto/span 6;
}
.row {
display: flex;
flex-wrap: wrap;
}
.col {
flex: 1 0 0%;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 0%;
}
.placeholder {
isolation: isolate;
display: inline-block;
min-height: 1rem;
vertical-align: middle;
cursor: wait;
background-color: var(--color-neutral-100);
border-radius: var(--roundness-2);
opacity: 0.25;
}
@media (prefers-color-scheme: dark) {
.placeholder {
--background: var(--color-neutral-100);
--wave: var(--color-black-100) ;
}
}
@media (prefers-color-scheme: light) {
.placeholder {
--background: var(--color-neutral-100);
--wave: var(--color-black-100) ;
}
}
.placeholder-xs {
min-height: 0.6rem;
}
.placeholder-sm {
min-height: 0.8rem;
}
.placeholder-lg {
min-height: 1.2rem;
}
.placeholder-xl {
min-height: 2rem;
}
.placeholder-xxl {
min-height: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
.placeholder-glow .placeholder {
animation: placeholder-glow 2s ease-in-out infinite;
}
@keyframes placeholder-glow {
50% {
opacity: 0.05;
}
}
}
@media (prefers-reduced-motion: no-preference) {
.placeholder-wave .placeholder {
background: linear-gradient(to right, transparent 8%, var(--wave) 18%, transparent 33%);
background-color: var(--color-neutral-100);
background-size: 200% 100%;
position: relative;
}
}
@media (prefers-reduced-motion: no-preference) {
.placeholder-wave .placeholder {
animation: placeholder-wave 2s forwards infinite;
}
@keyframes placeholder-wave {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
}
.help-drawer {
min-width: 21rem;
overflow-y: auto;
}
.help-pane {
min-width: 21rem;
position: fixed;
overflow-y: auto;
height: 100%;
top: 0;
}
@keyframes show-dialog {
from {
transform: scale(0.01);
}
to {
transform: scale(1);
}
}
@keyframes hide-dialog {
to {
transform: scale(0.01);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slide-out {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.dialog[open] {
animation: show-dialog 400ms ease-in;
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.dialog[open][data-modal]::backdrop {
animation: show-backdrop 400ms ease-in;
}
}
/*dialog.dialog[open] {
animation: show-dialog 400ms ease-in;
}*/
dialog.dialog[open] {
visibility: visible;
transform: scale(1);
}
dialog.dialog.hide {
animation: hide-dialog 300ms ease-out;
}
/*@keyframes show-backdrop {
from {
opacity: .7;
}
to {
opacity: .7;
}
} */
/*
.btn.btn-action {
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
min-height: 4.5rem;
padding: 0.25rem;
aspect-ratio: 1;
text-align: center;
text-overflow: ellipsis;
font-size: .6875rem;
}
.btn.btn-action[data-close]::after {
content: "";
height: 2rem;
aspect-ratio: 1;
-webkit-mask-image: var(--button-icon-close);
mask-image: var(--button-icon-close);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
*/
.button-info-mini {
content: "";
height: 2rem;
max-height: 2rem;
width: 2rem;
max-width: 2rem;
aspect-ratio: 1;
color: var(--color-brand-primary-100);
transform: scale(0.75);
border-radius: 50%;
background: transparent;
box-shadow: none;
}
.button-info-mini::after {
content: "";
-webkit-mask-image: var(--button-icon-info);
mask-image: var(--button-icon-info);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
color: var(--color-brand-primary-100);
height: 1.5rem;
aspect-ratio: 1;
}
.button-info-mini {
/*&:focus-visible{
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
&:hover {
outline-offset: 0;
outline-color: var(--color-brand-primary-100);
}*/
}
/*.button:focus {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.button:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}*/
/*.info-icon {
text-decoration: none;
display: inline-block;
color: #117dba;
transform: scale(0.85);
}
.mat-icon-button {
height: 1.50rem;
width: 1.50rem;
line-height: 1.50rem;
margin-left: 0.5rem;
}
.info-icon:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
.mat-icon-button:focus-visible {
outline: 2px solid var(--color-brand-primary-100);
outline-offset: 2px;
}
*/
.dialog-container {
display: flex;
position: relative;
margin: -1px;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
display: flex;
justify-content: center;
align-items: center;
}
.checkbox-align {
display: flex;
align-items: flex-end;
justify-content: space-between;
}
.max-width-half {
max-width: calc(50% - 0.25rem);
}
.width-half {
width: 50%;
max-width: 50%;
}
.width-third {
width: 33%;
max-width: 33%;
}
/*msb-checkbox msb-info-button > button {
position: static !important;
right: auto !important;
top: auto !important;
}
*/
msb-checkbox:has(msb-info-button) {
display: inline-flex !important;
flex-direction: row !important;
align-items: center;
width: auto !important;
}
msb-checkbox:has(msb-info-button) > .form-check {
flex: 0 0 auto;
width: auto;
}
msb-checkbox msb-info-button {
display: inline-flex !important;
vertical-align: middle;
flex: 0 0 auto;
}
msb-checkbox msb-info-button > button {
position: static !important;
right: auto !important;
top: auto !important;
}
msb-textarea textarea {
resize: vertical;
}
a[target=_blank],
a.more-info,
a.with-icon {
align-items: center !important;
vertical-align: middle !important;
}
a[target=_blank]::before, a[target=_blank]::after,
a.more-info::before,
a.more-info::after,
a.with-icon::before,
a.with-icon::after {
align-self: center !important;
margin-top: 0 !important;
}
a[target=_blank] > svg,
a.more-info > svg,
a.with-icon > svg {
align-self: center !important;
margin-top: 0 !important;
}
/*Version 0.5.66*/
@media (min-width: 992px) {
:root {
--base-font-size: clamp(0.85em, 1.75vw, 1.2em);
}
}
@media screen and (max-width: 991.99px) {
:root {
--base-font-size: clamp(1em, 4vw, 1.75em);
}
}
:root {
--border-0: 0;
--border-1: 0.0625rem;
--border-2: 0.125rem;
--border-3: 0.1875rem;
--border-4: 0.25rem;
--border-5: 0.375rem;
--border-6: 0.5rem;
--border-color: var(--primary);
--border-style: solid;
--button-icon-back-to-top: url('arrow_up.3d70768a1deb5b46.svg');
--button-icon-close: url('close.bf1025b0e8c2e86b.svg');
--button-icon-info: url('info.d4af934cdb7d8055.svg');
--button-icon-download: url('download.5daecc713c186b14.svg');
--button-icon-download-busy: url('download_animated.5d8370f5fd02b030.svg');
--button-icon-download-failed: url('close.bf1025b0e8c2e86b.svg');
--button-icon-download-success: url('check.140d2683b84555f0.svg');
--button-icon-sort: url('sort.19062dfa8c8db98b.svg');
--button-icon-sort-asc: url('arrow_down.ec4d32558c9336a9.svg');
--button-icon-sort-desc: url('arrow_up.3d70768a1deb5b46.svg');
--button-select-icon: url('add.b5919089cd16d7c8.svg');
--carousel-button-bg: transparent;
--carousel-button-status-hover-color: transparent;
--carousel-play-img: url('play.48812c8b6130d6ba.svg');
--carousel-break-img: url('pause.c1e1a9393cee06fb.svg');
--carousel-prev-img: url('arrow_left.d34cd8fb968a954d.svg');
--carousel-next-img: url('arrow_right.1c111109d94a1f3d.svg');
--carousel-indicator-img: url('rectangle.bc42c3d4fa33a7f2.svg');
--chip-bg-neutral: var(--neutral);
--chip-color-neutral: var(--white);
--chip-hover-bg-neutral: var(--neutral-75);
--close-color-neutral: var(--white);
--chip-bg-primary: var(--primary);
--chip-color-primary: var(--white);
--chip-hover-bg-primary: var(--primary-75);
--close-color-primary: var(--white);
--chip-bg-secondary: var(--secondary);
--chip-color-secondary: var(--white);
--chip-hover-bg-secondary: var(--secondary-75);
--close-color-secondary: var(--white);
--chip-bg-success: var(--success);
--chip-color-success: var(--white);
--chip-hover-bg-success: var(--success-75);
--close-color-success: var(--white);
--chip-bg-help: var(--help);
--chip-color-help: var(--black);
--chip-hover-bg-help: var(--help-75);
--close-color-help: var(--black);
--chip-bg-warning: var(--warning);
--chip-color-warning: var(--black);
--chip-hover-bg-warning: var(--warning-75);
--close-color-warning: var(--black);
--chip-bg-danger: var(--danger);
--chip-color-danger: var(--white);
--chip-hover-bg-danger: var(--danger-75);
--close-color-danger: var(--white);
--chip-bg-mode: var(--mode);
--chip-color-mode: var(--white);
--chip-hover-bg-mode: var(--mode-75);
--close-color-mode: var(--white);
--black:#000000;
--white:#ffffff;
--neutral:#494E50;
--neutral-lighter-75:#61676B;
--neutral-lighter-50:#949A9E;
--neutral-lighter-25:#C9CDCF;
--neutral-lighter-5:#E9EAEB;
--neutral-darker-75:#2C2F30;
--neutral-darker-50:#272A2C;
--neutral-darker-25:#232526;
--neutral-darker-5:#1F2122;
--primary:#117dba;
--primary-lighter-75:#4D9DCB;
--primary-lighter-50:#88bedd;
--primary-lighter-25:#c3deee;
--primary-lighter-5:#f3f8fc;
--primary-darker-75:#146694;
--primary-darker-50:#174F6F;
--primary-darker-25:#193849;
--primary-darker-5:#1B262B;
--secondary:#35556C;
--secondary-lighter-75:#678091;
--secondary-lighter-50:#9AAAB6;
--secondary-lighter-25:#CCD5DA;
--secondary-lighter-5:#F5F7F8;
--secondary-darker-75:#2F485A;
--secondary-darker-50:#283B47;
--secondary-darker-25:#222E35;
--secondary-darker-5:#1D2427;
--success:#257310;
--success-lighter-75:#5C964C;
--success-lighter-50:#92B987;
--success-lighter-25:#C8DCC3;
--success-lighter-5:#F4F8F3;
--success-darker-75:#235F15;
--success-darker-50:#204A19;
--success-darker-25:#1E351E;
--success-darker-5:#1C2522;
--help:#EBD314;
--help-lighter-75:#F0DE4F;
--help-lighter-50:#F5E989;
--help-lighter-25:#FAF4C4;
--help-lighter-5:#FEFDF3;
--help-darker-75:#B7A618;
--help-darker-50:#837A1B;
--help-darker-25:#504E1F;
--help-darker-5:#262A22;
--warning:#F5723C;
--warning-lighter-75:#F8956D;
--warning-lighter-50:#FAB99E;
--warning-lighter-25:#FDDCCE;
--warning-lighter-5:#FFF8F5;
--warning-darker-75:#BF5E36;
--warning-darker-50:#884930;
--warning-darker-25:#523529;
--warning-darker-5:#272524;
--danger:#C91432;
--danger-lighter-75:#D74F65;
--danger-lighter-50:#E48999;
--danger-lighter-25:#F2C4CC;
--danger-lighter-5:#FCF3F5;
--danger-darker-75:#9E172E;
--danger-darker-50:#721A2A;
--danger-darker-25:#471E27;
--danger-darker-5:#252024;
--mode:#9B50D7;
--mode-lighter-75:#B47CE1;
--mode-lighter-50:#CDA7EB;
--mode-lighter-25:#E6D3F5;
--mode-lighter-5:#FAF6FD;
--mode-darker-75:#743CA1;
--mode-darker-50:#4E286C;
--mode-darker-25:#271436;
--mode-darker-5:#08040B;
--dialog-width: fit-content;
--dialog-max-width: 31.25rem;
--elevation-0:initial;
--elevation-1:0 1px 4px 0.5px rgba(0, 0, 0, 0.25);
--elevation-1-hover:0 2px 9px 0.5px rgba(0, 0, 0, 0.2);
--elevation-2:0 2px 9px 0.5px rgba(0, 0, 0, 0.2);
--elevation-3:0 4px 10px 3px rgba(0, 0, 0, 0.15);
--elevation-4:0 7px 16px 0 rgba(0, 0, 0, 0.25);
--expansion-icon: url('arrow_down.ec4d32558c9336a9.svg');
--filter-icon: url('filter.a4e474daa7f39b5b.svg');
--footer-outline-focus: var(--white);
--footer-txt: var(--white);
--notification-global-icon-notification-info:url('info_filled.7b369ef73bbe1b61.svg');
--notification-global-icon-notification-warning:url('warning.11f0d980e70453c5.svg');
--notification-global-icon-notification-error:url('warning.11f0d980e70453c5.svg');
--header-branding-wappen-bayern: url('wappen-bayern.550a4ada08bbd036.png');
--header-icon-menu-open: url('close.bf1025b0e8c2e86b.svg');
--header-icon-menu-closed: url('menu.3c7746cd95526fb7.svg');
--header-branding-logo-msb: url('logo-msb-wordmark.57a43f0e39e89a24.svg');
--highlight-color: var(--danger);
--input-size: 1rem;
--input-height: 2.8125rem;
--input-label-top: var(--input-size);
--input-padding-icon: var(--space-0, 0rem);
--input-padding-info: var(--space-s, 0.75rem);
--input-width: 100%;
--input-padding-top: var(--space-s, 0.75rem);
--input-margin-bottom: var(--space-0, 0rem);
--input-padding-side: 0.5rem;
--start-page-image: url('start-header-bg.a3e972e7021db359.jpg');
--text-color-start-page-image: var(--white);
--link-icon-more-info: url('link.61aa330525729a45.svg');
--link-icon-external: url('target_blank.d440aceda3333402.svg');
--link-icon-download: url('download.5daecc713c186b14.svg');
--app-nav-icon: var(--white);
--app-nav-txt: var(--white);
--app-nav-locked-txt: var(--neutral-lighter-25);
--app-nav-menu-item-bg-hover: var(--secondary-darker-50);
--app-nav-disabled-icon: url('lock.a2852a5dab583464.svg');
--app-nav-collapse-icon: url('arrow_up.3d70768a1deb5b46.svg');
--notification-border: var(--border-2, 0.125rem) var(--border-style, solid) var(--notification-highlight);
--notification-icon-notification-danger:url('warning.11f0d980e70453c5.svg');
--notification-icon-notification-success:url('check_filled.e20dfa62f4c75bc3.svg');
--notification-icon-notification-warning:url('warning.11f0d980e70453c5.svg');
--notification-icon-notification-instruction:url('info_filled.7b369ef73bbe1b61.svg');
--notification-icon-notification-new:url('neu.f314f71d68bef94a.svg');
--button-icon-reset: url('close.bf1025b0e8c2e86b.svg');
--button-icon-search: url('search.f3f715415bccd5ed.svg');
--select-icon: url('arrow_down.ec4d32558c9336a9.svg');
--roundness-0: 0rem;
--roundness-xxs: 0.25rem;
--roundness-xs: 0.5rem;
--roundness-s: 0.75rem;
--roundness-m: 1rem;
--roundness-l: 1.5rem;
--roundness-xl: 2rem;
--roundness-xxl: 3rem;
--roundness-xxxl: 50%;
--input-slide-icon-lock: url('lock_filled.7a3023bfc7071f94.svg');
--sort-icon: url('sort.19062dfa8c8db98b.svg');
--space-0: 0rem;
--space-xxs: 0.25rem;
--space-xs: 0.5rem;
--space-s: 0.75rem;
--space-m: 1rem;
--space-l: 1.5rem;
--space-xl: 2rem;
--space-xxl: 3rem;
--stepper-scroll-forward-icon: url('arrow_right.1c111109d94a1f3d.svg');
--stepper-scroll-backward-icon: url('arrow_left.d34cd8fb968a954d.svg');
--stepper-error-icon: url('warning.11f0d980e70453c5.svg');
--stepper-checked-icon: url('check.140d2683b84555f0.svg');
--tabs-locked: var(--disabled);
--tab-icon-lock: url('lock.a2852a5dab583464.svg');
--tab-icon-forward: url('arrow_right.1c111109d94a1f3d.svg');
--tab-icon-reverse: url('arrow_left.d34cd8fb968a954d.svg');
--card-teaser-img: url('service-teaser-bg.9a86c1d66f67aa47.jpg');
--tooltip-position: 1.75rem;
--input-upload-outline: var(--primary);
--input-upload-bg: var(--primary);
--input-upload-txt: var(--white);
--input-icon-camera: url('camera.33f6ee6d6ddc2fa3.svg');
--input-icon-upload: url('upload.0a892302221562a6.svg');
--list-marker-color: var(--primary);
--base-font-family: Roboto,
sans-serif;
font-family: var(--base-font-family, Roboto, sans-serif);
line-height: 1.7;
font-style: normal;
font-weight: 400;
word-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
--heading-intro-margin: var(--space-m, 1rem);
--heading-intro-size:3rem;
--heading-1-margin: var(--space-m, 1rem);
--heading-1-size:2rem;
--heading-2-margin: var(--space-m, 1rem);
--heading-2-size:1.625rem;
--heading-3-margin: var(--space-m, 1rem);
--heading-3-size:1.375rem;
--heading-4-margin: var(--space-xs, 0.5rem);
--heading-4-size:1.25rem;
--heading-5-margin: var(--space-xs, 0.5rem);
--heading-5-size:1.125rem;
--heading-6-margin: var(--space-s, 0.75rem);
--heading-6-size:1rem;
}
@media (prefers-color-scheme: light) {
:root {
--autocomplete-txt: var(--black);
--autocomplete-bg: var(--secondary-50);
--autocomplete-hover-txt: var(--black);
--autocomplete-hover-bg: var(--secondary-50);
--border-color-neutral:var(--neutral);
--border-color-primary:var(--primary);
--border-color-secondary:var(--secondary);
--border-color-success:var(--success);
--border-color-help:var(--help);
--border-color-warning:var(--warning);
--border-color-danger:var(--danger);
--border-color-mode:var(--mode);
--border-color: var(--primary);
--breadcrumbs-bg: var(--neutral-5);
--breadcrumbs-current-txt: var(--primary-darker-75);
--breadcrumbs-divider: var(--primary-darker-75);
--button-status-color: var(--white);
--button-status-contrast-color: var(--black);
--button-status-hover-color: var(--white);
--button-status-focus-color: var(--black);
--button-status-disabled-color: var(--neutral-5);
--button-status-disabled-contrast-color: var(--neutral-75);
--button-outline-status-color: var(--white);
--button-outline-stroke-color: var(--white);
--button-opacity-bg: var(--white);
--button-opacity-color: var(--black);
--button-opacity-hover: var(--white);
--button-status-color-neutral:var(--neutral);
--button-status-contrast-color-neutral: var(--white);
--button-status-focus-color-neutral: var(--neutral);
--button-status-hover-color-neutral:var(--neutral-75);
--button-status-outline-color-neutral:var(--neutral);
--button-outline-status-color-neutral:var(--neutral-darker-75);
--button-outline-status-stroke-neutral:var(--neutral);
--button-opacity-bg-neutral: var(--neutral-5);
--button-opacity-color-neutral: var(--neutral-darker-75);
--button-opacity-hover-neutral: var(--neutral-lighter-75);
--button-status-color-primary:var(--primary);
--button-status-contrast-color-primary: var(--white);
--button-status-focus-color-primary: var(--primary);
--button-status-hover-color-primary:var(--primary-75);
--button-status-outline-color-primary:var(--primary);
--button-outline-status-color-primary:var(--primary-darker-75);
--button-outline-status-stroke-primary:var(--primary);
--button-opacity-bg-primary: var(--primary-5);
--button-opacity-color-primary: var(--primary-darker-75);
--button-opacity-hover-primary: var(--primary-lighter-75);
--button-status-color-secondary:var(--secondary);
--button-status-contrast-color-secondary: var(--white);
--button-status-focus-color-secondary: var(--secondary);
--button-status-hover-color-secondary:var(--secondary-75);
--button-status-outline-color-secondary:var(--secondary);
--button-outline-status-color-secondary:var(--secondary-darker-75);
--button-outline-status-stroke-secondary:var(--secondary);
--button-opacity-bg-secondary: var(--secondary-5);
--button-opacity-color-secondary: var(--secondary-darker-75);
--button-opacity-hover-secondary: var(--secondary-lighter-75);
--button-status-color-success:var(--success);
--button-status-contrast-color-success: var(--white);
--button-status-focus-color-success: var(--success);
--button-status-hover-color-success:var(--success-75);
--button-status-outline-color-success:var(--success);
--button-outline-status-color-success:var(--success-darker-75);
--button-outline-status-stroke-success:var(--success);
--button-opacity-bg-success: var(--success-5);
--button-opacity-color-success: var(--success-darker-75);
--button-opacity-hover-success: var(--success-lighter-75);
--button-status-color-help:var(--help);
--button-status-contrast-color-help: var(--black);
--button-status-focus-color-help: var(--help);
--button-status-hover-color-help:var(--help-darker-50);
--button-status-outline-color-help:var(--help);
--button-outline-status-color-help:var(--help-darker-25);
--button-outline-status-stroke-help:var(--help-darker-5);
--button-opacity-bg-help: var(--help-5);
--button-opacity-color-help: var(--help-darker-25);
--button-opacity-hover-help: var(--help);
--button-status-color-warning:var(--warning);
--button-status-contrast-color-warning: var(--black);
--button-status-focus-color-warning: var(--warning);
--button-status-hover-color-warning:var(--warning-darker-75);
--button-status-outline-color-warning:var(--warning);
--button-outline-status-color-warning:var(--warning-darker-50);
--button-outline-status-stroke-warning:var(--warning-darker-25);
--button-opacity-bg-warning: var(--warning-5);
--button-opacity-color-warning: var(--warning-darker-50);
--button-opacity-hover-warning: var(--warning);
--button-status-color-danger:var(--danger);
--button-status-contrast-color-danger: var(--white);
--button-status-focus-color-danger: var(--danger);
--button-status-hover-color-danger:var(--danger-75);
--button-status-outline-color-danger:var(--danger);
--button-outline-status-color-danger:var(--danger-darker-75);
--button-outline-status-stroke-danger:var(--danger);
--button-opacity-bg-danger: var(--danger-5);
--button-opacity-color-danger: var(--danger-darker-75);
--button-opacity-hover-danger: var(--danger-lighter-75);
--button-status-color-mode:var(--mode);
--button-status-contrast-color-mode: var(--white);
--button-status-focus-color-mode: var(--mode);
--button-status-hover-color-mode:var(--mode-75);
--button-status-outline-color-mode:var(--mode);
--button-outline-status-color-mode:var(--mode-darker-75);
--button-outline-status-stroke-mode:var(--mode);
--button-opacity-bg-mode: var(--mode-5);
--button-opacity-color-mode: var(--mode-darker-75);
--button-opacity-hover-mode: var(--mode-lighter-75);
--button-menu-outline: var(--neutral-25);
--button-menu-bg: var(--white);
--button-select-outline: var(--neutral-25);
--button-select-bg: var(--white);
--button-select-txt: var(--neutral);
--button-select-txt-hover: var(--primary-25);
--button-select-txt-focus: var(--primary);
--captcha-status-color: var(--primary);
--captcha-status-color-neutral:var(--neutral);
--captcha-status-color-primary:var(--primary);
--captcha-status-color-secondary:var(--secondary);
--captcha-status-color-success:var(--success);
--captcha-status-color-help:var(--help);
--captcha-status-color-warning:var(--warning);
--captcha-status-color-danger:var(--danger);
--captcha-status-color-mode:var(--mode);
--newslist-bg: var(--neutral-5);
--card-link: var(--link-color);
--card-status-color: var(--neutral-75);
--card-bg: var(--white);
--card-color: var(--neutral-darker-50);
--card-badge-bg: var(--warning);
--card-badge-txt: var(--black);
--card-footer-line-color: var(--neutral-25);
--card-bg-hover: var(--secondary-5);
--card-status-color-neutral:var(--neutral);
--card-status-color-primary:var(--primary);
--card-status-color-secondary:var(--secondary);
--card-status-color-success:var(--success);
--card-status-color-help:var(--help);
--card-status-color-warning:var(--warning);
--card-status-color-danger:var(--danger);
--card-status-color-mode:var(--mode);
--carousel-figcaption-bg: rgba(255, 255, 255, .625);
--carousel-topcarousel-bg: var(--neutral-5);
--carousel-footer-bg: var(--white);
--carousel-button-status-color: var(--primary);
--carousel-button-status-txt-hover-color: var(--primary);
--carousel-button-status-txt-color: var(--neutral-50);
--carousel-button-status-hover-bg: var(--white);
--carousel-indicator-bg: var(--white);
--carousel-indicator-active-txt: var(--success);
--input-invalid-check: var(--danger-25);
--input-valid-check: var(--success-25);
--input-invalid-check-hover: var(--danger-50);
--input-valid-check-hover: var(--success-50);
--chip-bg: var(--neutral-5);
--chip-color: var(--neutral-darker-50);
--chip-hover-bg: var(--neutral-25);
--close-background-color: var(--neutral-75);
--close-color: var(--white);
--close-background-color-neutral:var(--neutral-darker-75);
--close-background-color-primary:var(--primary-darker-75);
--close-background-color-secondary:var(--secondary-darker-75);
--close-background-color-success:var(--success-darker-75);
--close-background-color-help:var(--help-darker-75);
--close-background-color-warning:var(--warning-darker-75);
--close-background-color-danger:var(--danger-darker-75);
--close-background-color-mode:var(--mode-darker-75);
--body-bg: var(--white);
--body-color: var(--black);
--disabled: var(--neutral-75);
--neutral-75:var(--neutral-lighter-75);
--neutral-50:var(--neutral-lighter-50);
--neutral-25:var(--neutral-lighter-25);
--neutral-5:var(--neutral-lighter-5);
--primary-75:var(--primary-lighter-75);
--primary-50:var(--primary-lighter-50);
--primary-25:var(--primary-lighter-25);
--primary-5:var(--primary-lighter-5);
--secondary-75:var(--secondary-lighter-75);
--secondary-50:var(--secondary-lighter-50);
--secondary-25:var(--secondary-lighter-25);
--secondary-5:var(--secondary-lighter-5);
--success-75:var(--success-lighter-75);
--success-50:var(--success-lighter-50);
--success-25:var(--success-lighter-25);
--success-5:var(--success-lighter-5);
--help-75:var(--help-lighter-75);
--help-50:var(--help-lighter-50);
--help-25:var(--help-lighter-25);
--help-5:var(--help-lighter-5);
--warning-75:var(--warning-lighter-75);
--warning-50:var(--warning-lighter-50);
--warning-25:var(--warning-lighter-25);
--warning-5:var(--warning-lighter-5);
--danger-75:var(--danger-lighter-75);
--danger-50:var(--danger-lighter-50);
--danger-25:var(--danger-lighter-25);
--danger-5:var(--danger-lighter-5);
--mode-75:var(--mode-lighter-75);
--mode-50:var(--mode-lighter-50);
--mode-25:var(--mode-lighter-25);
--mode-5:var(--mode-lighter-5);
--dialog-bg: var(--white);
--dialog-outline: var(--primary);
--dialog-title: var(--secondary);
--dialog-content-color: var(--black);
--download-link-color: var(--primary-darker-75);
--download-link-color-hover: var(--primary-darker-75);
--download-link-bg: transparent;
--download-link-border: var(--neutral-50);
--expansion-bg: var(--white);
--expansion-title: var(--primary);
--expansion-title-hover: var(--secondary);
--expansion-card-status-color: var(--neutral-50);
--expansion-card-hover-color: var(--neutral-75);
--expansion-card-status-color-neutral:var(--neutral);
--expansion-card-status-color-primary:var(--primary);
--expansion-card-status-color-secondary:var(--secondary);
--expansion-card-status-color-success:var(--success);
--expansion-card-status-color-help:var(--help);
--expansion-card-status-color-warning:var(--warning);
--expansion-card-status-color-danger:var(--danger);
--expansion-card-status-color-mode:var(--mode);
--fieldset: var(--secondary-5);
--link-on-fieldset-color: var(--secondary);
--filter-active-indicator: var(--danger);
--filter-active-indicator-border: var(--white);
--filter-icon-background: var(--primary);
--filter-dialog-background: var(--white);
--filter-dialog-border: var(--neutral-lighter-25);
--horizontal-line-color: var(--neutral-25);
--delete-color: var(--danger);
--insert-color: var(--success);
--mark-color: var(--help-25);
--mark-color-text-color: var(--body-color);
--heading-intro-color:var(--secondary);
--heading-1-color:var(--secondary);
--heading-2-color:var(--secondary);
--heading-3-color:var(--secondary);
--heading-4-color:var(--secondary);
--heading-5-color:var(--secondary);
--heading-6-color:var(--secondary);
--footer-bg: var(--neutral);
--footer-bg-focus: var(--neutral);
--footer-bg-current: var(--neutral-darker-5);
--footer-bg-hover: var(--neutral-darker-75);
--footer-txt-hover: var(--neutral-5);
--notification-global-txt: var(--neutral-darker-5);
--notification-global-bg: var(--neutral-5);
--notification-global-bg-neutral: var(--neutral);
--notification-global-txt-neutral: var(--white);
--notification-global-bg-primary: var(--primary);
--notification-global-txt-primary: var(--white);
--notification-global-bg-secondary: var(--secondary);
--notification-global-txt-secondary: var(--white);
--notification-global-bg-success: var(--success);
--notification-global-txt-success: var(--white);
--notification-global-bg-help: var(--help);
--notification-global-txt-help: var(--black);
--notification-global-bg-warning: var(--warning);
--notification-global-txt-warning: var(--black);
--notification-global-bg-danger: var(--danger);
--notification-global-txt-danger: var(--white);
--notification-global-bg-mode: var(--mode);
--notification-global-txt-mode: var(--white);
--header-branding-bg: var(--white);
--header-branding-icon: var(--primary);
--header-logo-freistaatbayern: var(--primary);
--header-branding-supplement: var(--primary);
--header-branding-supplement-danger: var(--danger);
--header-logo-primary: var(--primary);
--header-logo-secondary: var(--primary-darker-50);
--header-menu-item-bg-hover: var(--primary-5);
--header-menu-item-text-hover: var(--secondary);
--header-menu-item-outline: var(--primary);
--header-menu-item-txt: var(--primary);
--header-menu-primary-bg: var(--white);
--header-menu-secondary-bg: var(--secondary-5);
--header-menu-secondary-txt: var(--secondary);
--header-menu-secondary-txt-hover: var(--secondary-lighter-75);
--header-top-bg: var(--secondary-5);
--header-top-icon: var(--secondary);
--header-top-txt: var(--secondary);
--header-branding-logo-color: var(--primary);
--help-tooltip-bg: var(--help-25);
--help-tooltip-border: var(--neutral-25);
--help-sidebar-bg: var(--white);
--help-sidebar-header-bg: var(--help-25);
--help-close-button-bg: var(--help-50);
--help-close-button-color: var(--neutral-darker-5);
--help-txt: var(--neutral-darker-50);
--icon-color: var(--black);
--icon-color-neutral:var(--neutral);
--icon-color-primary:var(--primary);
--icon-color-secondary:var(--secondary);
--icon-color-success:var(--success);
--icon-color-help:var(--help);
--icon-color-warning:var(--warning);
--icon-color-danger:var(--danger);
--icon-color-mode:var(--mode);
--input-bg: var(--white);
--input-neutral-bg: var(--neutral-5);
--input-line: var(--neutral-darker-5);
--input-required: var(--primary-darker-75);
--input-label: var(--primary);
--input-label-hover: var(--primary-25);
--input-neutral-label: var(--primary-darker-75);
--input-value: var(--neutral-darker-5);
--input-invalid: var(--danger);
--input-valid: var(--success);
--input-disabled: var(--disabled);
--input-placeholder: var(--disabled);
--link-color: var(--primary);
--download-link-txt-hover: var(--white);
--mini-card-header-bg: var(--neutral-5);
--mini-card-header-text: var(--primary-darker-75);
--app-nav-fullnav-bg: var(--secondary-darker-75);
--app-nav-menu-item-bg-current: var(--secondary-darker-25);
--notification-bg: var(--white);
--notification-highlight: var(--neutral-5);
--notification-bg-neutral: var(--neutral-5);
--notification-highlight-neutral: var(--neutral);
--notification-bg-primary: var(--primary-5);
--notification-highlight-primary: var(--primary);
--notification-bg-secondary: var(--secondary-5);
--notification-highlight-secondary: var(--secondary);
--notification-bg-success: var(--success-5);
--notification-highlight-success: var(--success);
--notification-bg-help: var(--help-5);
--notification-highlight-help: var(--help);
--notification-bg-warning: var(--warning-5);
--notification-highlight-warning: var(--warning);
--notification-bg-danger: var(--danger-5);
--notification-highlight-danger: var(--danger);
--notification-bg-mode: var(--mode-5);
--notification-highlight-mode: var(--mode);
--placeholder-background: var(--black);
--placeholder-wave: var(--white);
--progress-bar-bg: var(--neutral-50);
--progress-value-bg: var(--primary);
--progress-value-color: var(--black);
--progress-value-label-bg: var(--primary-50);
--progress-value-bg-neutral: var(--neutral);
--progress-value-neutral-color: var(--black);
--progress-value-label-neutral-bg: var(--neutral-50);
--progress-value-bg-primary: var(--primary);
--progress-value-primary-color: var(--black);
--progress-value-label-primary-bg: var(--primary-50);
--progress-value-bg-secondary: var(--secondary);
--progress-value-secondary-color: var(--black);
--progress-value-label-secondary-bg: var(--secondary-50);
--progress-value-bg-success: var(--success);
--progress-value-success-color: var(--black);
--progress-value-label-success-bg: var(--success-50);
--progress-value-bg-help: var(--help);
--progress-value-help-color: var(--black);
--progress-value-label-help-bg: var(--help-50);
--progress-value-bg-warning: var(--warning);
--progress-value-warning-color: var(--black);
--progress-value-label-warning-bg: var(--warning-50);
--progress-value-bg-danger: var(--danger);
--progress-value-danger-color: var(--black);
--progress-value-label-danger-bg: var(--danger-50);
--progress-value-bg-mode: var(--mode);
--progress-value-mode-color: var(--black);
--progress-value-label-mode-bg: var(--mode-50);
--qr-color: var(--neutral-darker-5);
--qr-bg: var(--secondary-5);
--input-invalid-radio: var(--danger-25);
--input-valid-radio: var(--success-25);
--input-invalid-radio-hover: var(--danger-50);
--input-valid-radio-hover: var(--success-50);
--select-bg: var(--white);
--input-slide-checked: var(--primary);
--input-slide-unchecked: var(--neutral-75);
--input-slide: var(--white);
--snackbar-bg: var(--white);
--snackbar-color: var(--neutral);
--snackbar-close-bg: var(--primary-5);
--snackbar-close-color: var(--primary);
--snackbar-color-neutral:var(--neutral);
--snackbar-color-primary:var(--primary);
--snackbar-color-secondary:var(--secondary);
--snackbar-color-success:var(--success);
--snackbar-color-help:var(--help-darker-25);
--snackbar-color-warning:var(--warning-darker-50);
--snackbar-color-danger:var(--danger);
--snackbar-color-mode:var(--mode);
--sort-icon-background: var(--primary);
--sort-dialog-background: var(--white);
--sort-dialog-border: var(--neutral-lighter-25);
--spinner-color: var(--primary);
--spinner-color-neutral:var(--neutral);
--spinner-color-primary:var(--primary);
--spinner-color-secondary:var(--secondary);
--spinner-color-success:var(--success);
--spinner-color-help:var(--help);
--spinner-color-warning:var(--warning);
--spinner-color-danger:var(--danger);
--spinner-color-mode:var(--mode);
--card-statusindicator-color: var(--neutral-5);
--card-statusindicator-color-neutral:var(--neutral-25);
--card-statusindicator-color-primary:var(--primary-25);
--card-statusindicator-color-secondary:var(--secondary-25);
--card-statusindicator-color-success:var(--success-25);
--card-statusindicator-color-help:var(--help-25);
--card-statusindicator-color-warning:var(--warning-25);
--card-statusindicator-color-danger:var(--danger-25);
--card-statusindicator-color-mode:var(--mode-25);
--stepper-color: var(--neutral);
--stepper-background-color: var(--white);
--stepper-line-neutral: var(--neutral-lighter-25);
--stepper-line-secondary: var(--secondary);
--stepper-dot-background-neutral: var(--neutral-lighter-25);
--stepper-dot-background-primary: var(--primary);
--stepper-dot-background-secondary: var(--secondary);
--stepper-dot-background-danger: var(--danger);
--stepper-number-neutral: var(--neutral-darker-75);
--stepper-number-primary: var(--white);
--stepper-icon-color: var(--white);
--stepper-scroll-bg: var(--white);
--stepper-scroll-txt: var(--primary);
--table-txt: var(--neutral-darker-5);
--table-bg: var(--white);
--table-caption-txt: var(--heading-3-color);
--table-border: var(--neutral-5);
--table-striped-bg: var(--secondary-25);
--table-striped-txt: var(--body-color);
--table-hover-bg: var(--primary);
--table-hover-txt: var(--white);
--table-sort-txt: var(--neutral-75);
--tablist-bg: transparent;
--tablist-border: var(--neutral-25);
--tabs-txt: var(--neutral-darker-50);
--tabs-current: var(--primary-darker-75);
--tabs-hover: var(--primary-75);
--tabs-scroll-bg: var(--white);
--tabs-scroll-txt: var(--primary);
--card-teaser-link: var(--primary);
--card-teaser-txt: var(--neutral);
--card-teaser-title: var(--secondary);
--card-teaser-bg: var(--white);
--card-page-teaser-title: var(--secondary);
--card-teaser-txt-neutral:var(--white);
--card-teaser-title-neutral:var(--white);
--card-teaser-link-neutral:var(--white);
--card-teaser-bg-neutral:var(--neutral);
--card-teaser-txt-primary:var(--white);
--card-teaser-title-primary:var(--white);
--card-teaser-link-primary:var(--white);
--card-teaser-bg-primary:var(--primary);
--card-teaser-txt-secondary:var(--white);
--card-teaser-title-secondary:var(--white);
--card-teaser-link-secondary:var(--white);
--card-teaser-bg-secondary:var(--secondary);
--card-teaser-txt-success:var(--white);
--card-teaser-title-success:var(--white);
--card-teaser-link-success:var(--white);
--card-teaser-bg-success:var(--success);
--card-teaser-txt-help:var(--black);
--card-teaser-title-help:var(--black);
--card-teaser-link-help:var(--black);
--card-teaser-bg-help:var(--help);
--card-teaser-txt-warning:var(--black);
--card-teaser-title-warning:var(--black);
--card-teaser-link-warning:var(--black);
--card-teaser-bg-warning:var(--warning);
--card-teaser-txt-danger:var(--white);
--card-teaser-title-danger:var(--white);
--card-teaser-link-danger:var(--white);
--card-teaser-bg-danger:var(--danger);
--card-teaser-txt-mode:var(--white);
--card-teaser-title-mode:var(--white);
--card-teaser-link-mode:var(--white);
--card-teaser-bg-mode:var(--mode);
--tooltip-bg: var(--white);
--tooltip-border: var(--neutral-25);
--tooltip-txt: var(--neutral-darker-5);
}
:root .color-scheme-dark {
--autocomplete-txt: var(--white);
--autocomplete-bg: var(--secondary-75);
--autocomplete-hover-txt: var(--black);
--autocomplete-hover-bg: var(--secondary-75);
--border-color-neutral:var(--neutral-lighter-75);
--border-color-primary:var(--primary-lighter-75);
--border-color-secondary:var(--secondary-lighter-75);
--border-color-success:var(--success-lighter-75);
--border-color-help:var(--help-lighter-75);
--border-color-warning:var(--warning-lighter-75);
--border-color-danger:var(--danger-lighter-75);
--border-color-mode:var(--mode-lighter-75);
--border-color: var(--primary-lighter-75);
--breadcrumbs-bg: var(--neutral-50);
--breadcrumbs-current-txt: var(--primary-lighter-75);
--breadcrumbs-divider: var(--primary-lighter-75);
--button-status-color: var(--neutral-5);
--button-status-contrast-color: var(--white);
--button-status-hover-color: var(--neutral-25);
--button-status-focus-color: var(--neutral-25);
--button-status-disabled-color: var(--neutral-75);
--button-status-disabled-contrast-color: var(--neutral-lighter-50);
--button-outline-status-color: var(--black);
--button-opacity-bg: var(--black);
--button-opacity-color: var(--white);
--button-opacity-hover: var(--black);
--button-status-color-neutral:var(--neutral);
--button-status-contrast-color-neutral: var(--white);
--button-status-hover-color-neutral:var(--neutral-lighter-25);
--button-outline-status-color-neutral:var(--neutral-lighter-50);
--button-outline-stroke-color-neutral:var(--neutral-lighter-50);
--button-opacity-bg-neutral: var(--neutral-5);
--button-opacity-color-neutral: var(--neutral-lighter-50);
--button-opacity-hover-neutral: var(--neutral-lighter-25);
--button-status-color-primary:var(--primary);
--button-status-contrast-color-primary: var(--white);
--button-status-hover-color-primary:var(--primary-lighter-50);
--button-outline-status-color-primary:var(--primary-lighter-75);
--button-outline-stroke-color-primary:var(--primary-lighter-75);
--button-opacity-bg-primary: var(--primary-5);
--button-opacity-color-primary: var(--primary-lighter-50);
--button-opacity-hover-primary: var(--primary-lighter-25);
--button-status-color-secondary:var(--secondary);
--button-status-contrast-color-secondary: var(--white);
--button-status-hover-color-secondary:var(--secondary-lighter-50);
--button-outline-status-color-secondary:var(--secondary-lighter-75);
--button-outline-stroke-color-secondary:var(--secondary-lighter-75);
--button-opacity-bg-secondary: var(--secondary-5);
--button-opacity-color-secondary: var(--secondary-lighter-50);
--button-opacity-hover-secondary: var(--secondary-lighter-25);
--button-status-color-success:var(--success);
--button-status-contrast-color-success: var(--white);
--button-status-hover-color-success:var(--success-lighter-50);
--button-outline-status-color-success:var(--success-lighter-75);
--button-outline-stroke-color-success:var(--success-lighter-75);
--button-opacity-bg-success: var(--success-5);
--button-opacity-color-success: var(--success-lighter-50);
--button-opacity-hover-success: var(--success-lighter-25);
--button-status-color-help:var(--help);
--button-status-contrast-color-help: var(--black);
--button-status-hover-color-help:var(--help-75);
--button-outline-status-color-help:var(--help-lighter-75);
--button-outline-stroke-color-help:var(--help-lighter-75);
--button-opacity-bg-help: var(--help-5);
--button-opacity-color-help: var(--help-lighter-75);
--button-opacity-hover-help: var(--help-75);
--button-status-color-warning:var(--warning);
--button-status-contrast-color-warning: var(--black);
--button-status-hover-color-warning:var(--warning-75);
--button-outline-status-color-warning:var(--warning-lighter-75);
--button-outline-stroke-color-warning:var(--warning-lighter-75);
--button-opacity-bg-warning: var(--warning-5);
--button-opacity-color-warning: var(--warning-lighter-75);
--button-opacity-hover-warning: var(--warning-75);
--button-status-color-danger:var(--danger);
--button-status-contrast-color-danger: var(--white);
--button-status-hover-color-danger:var(--danger-lighter-50);
--button-outline-status-color-danger:var(--danger-lighter-75);
--button-outline-stroke-color-danger:var(--danger-lighter-75);
--button-opacity-bg-danger: var(--danger-5);
--button-opacity-color-danger: var(--danger-lighter-50);
--button-opacity-hover-danger: var(--danger-lighter-25);
--button-status-color-mode:var(--mode);
--button-status-contrast-color-mode: var(--white);
--button-status-hover-color-mode:var(--mode-lighter-50);
--button-outline-status-color-mode:var(--mode-lighter-75);
--button-outline-stroke-color-mode:var(--mode-lighter-75);
--button-opacity-bg-mode: var(--mode-5);
--button-opacity-color-mode: var(--mode-lighter-50);
--button-opacity-hover-mode: var(--mode-lighter-25);
--button-menu-outline: var(--neutral-lighter-25);
--button-menu-bg: var(--neutral-50);
--button-select-outline: var(--neutral-lighter-25);
--button-select-bg: var(--neutral-50);
--button-select-txt: var(--white);
--button-select-txt-hover: var(--primary-25);
--button-select-txt-focus: var(--primary-lighter-75);
--captcha-status-color: var(--primary-lighter-50);
--captcha-status-color-neutral:var(--neutral-lighter-50);
--captcha-status-color-primary:var(--primary-lighter-50);
--captcha-status-color-secondary:var(--secondary-lighter-50);
--captcha-status-color-success:var(--success-lighter-50);
--captcha-status-color-help:var(--help-lighter-50);
--captcha-status-color-warning:var(--warning-lighter-50);
--captcha-status-color-danger:var(--danger-lighter-50);
--captcha-status-color-mode:var(--mode-lighter-50);
--newslist-bg: var(--neutral-75);
--card-link: var(--primary-lighter-50);
--card-status-color: var(--neutral-lighter-50);
--card-bg: var(--neutral-75);
--card-color: var(--white);
--card-badge-bg: var(--warning-lighter-75);
--card-badge-txt: var(--neutral-75);
--card-footer-line-color: var(--neutral-lighter-75);
--card-bg-hover: var(--neutral);
--card-status-color-neutral:var(--neutral-lighter-75);
--card-status-color-primary:var(--primary-lighter-75);
--card-status-color-secondary:var(--secondary-lighter-75);
--card-status-color-success:var(--success-lighter-75);
--card-status-color-help:var(--help-lighter-75);
--card-status-color-warning:var(--warning-lighter-75);
--card-status-color-danger:var(--danger-lighter-75);
--card-status-color-mode:var(--mode-lighter-75);
--carousel-figcaption-bg: rgba(0, 0, 0, .625);
--carousel-topcarousel-bg: var(--neutral-75);
--carousel-footer-bg: var(--neutral-50);
--carousel-button-status-color: var(--primary-lighter-50);
--carousel-button-status-txt-hover-color: var(--primary-lighter-50);
--carousel-button-status-txt-color: var(--neutral-lighter-50);
--carousel-button-status-hover-bg: var(--neutral-lighter-75);
--carousel-indicator-bg: var(--neutral-lighter-75);
--carousel-indicator-active-txt: var(--success-lighter-75);
--input-invalid-check: var(--danger-lighter-50);
--input-valid-check: var(--success-lighter-50);
--input-invalid-check-hover: var(--danger-75);
--input-valid-check-hover: var(--success-75);
--chip-bg: var(--neutral);
--chip-color: var(--white);
--chip-hover-bg: var(--neutral-75);
--close-background-color: var(--neutral-25);
--close-color: var(--white);
--close-background-color-neutral:var(--neutral-lighter-75);
--close-background-color-primary:var(--primary-lighter-75);
--close-background-color-secondary:var(--secondary-lighter-75);
--close-background-color-success:var(--success-lighter-75);
--close-background-color-help:var(--help-lighter-75);
--close-background-color-warning:var(--warning-lighter-75);
--close-background-color-danger:var(--danger-lighter-75);
--close-background-color-mode:var(--mode-lighter-75);
--body-bg: var(--black);
--body-color: var(--white);
--disabled: var(--neutral-lighter-50);
--neutral-75:var(--neutral-darker-75);
--neutral-50:var(--neutral-darker-50);
--neutral-25:var(--neutral-darker-25);
--neutral-5:var(--neutral-darker-5);
--primary-75:var(--primary-darker-75);
--primary-50:var(--primary-darker-50);
--primary-25:var(--primary-darker-25);
--primary-5:var(--primary-darker-5);
--secondary-75:var(--secondary-darker-75);
--secondary-50:var(--secondary-darker-50);
--secondary-25:var(--secondary-darker-25);
--secondary-5:var(--secondary-darker-5);
--success-75:var(--success-darker-75);
--success-50:var(--success-darker-50);
--success-25:var(--success-darker-25);
--success-5:var(--success-darker-5);
--help-75:var(--help-darker-75);
--help-50:var(--help-darker-50);
--help-25:var(--help-darker-25);
--help-5:var(--help-darker-5);
--warning-75:var(--warning-darker-75);
--warning-50:var(--warning-darker-50);
--warning-25:var(--warning-darker-25);
--warning-5:var(--warning-darker-5);
--danger-75:var(--danger-darker-75);
--danger-50:var(--danger-darker-50);
--danger-25:var(--danger-darker-25);
--danger-5:var(--danger-darker-5);
--mode-75:var(--mode-darker-75);
--mode-50:var(--mode-darker-50);
--mode-25:var(--mode-darker-25);
--mode-5:var(--mode-darker-5);
--dialog-bg: var(--neutral-50);
--dialog-outline: var(--primary-lighter-75);
--dialog-title: var(--secondary-lighter-50);
--dialog-content-color: var(--white);
--download-link-color: var(--primary-lighter-5);
--download-link-color-hover: var(--primary-lighter-25);
--download-link-bg: var(--neutral-75);
--download-link-border: var(--neutral-50);
--expansion-bg: var(--neutral-50);
--expansion-title: var(--primary-lighter-75);
--expansion-title-hover: var(--secondary-lighter-50);
--expansion-card-status-color: var(--neutral-lighter-50);
--expansion-card-hover-color: var(--neutral-lighter-50);
--expansion-card-status-color-neutral:var(--neutral);
--expansion-card-status-color-primary:var(--primary);
--expansion-card-status-color-secondary:var(--secondary);
--expansion-card-status-color-success:var(--success);
--expansion-card-status-color-help:var(--help);
--expansion-card-status-color-warning:var(--warning);
--expansion-card-status-color-danger:var(--danger);
--expansion-card-status-color-mode:var(--mode);
--fieldset: var(--secondary-5);
--link-on-fieldset-color: var(--link-color);
--filter-active-indicator: var(--danger);
--filter-active-indicator-border: var(--black);
--filter-icon-background: var(--primary);
--filter-dialog-background: var(--neutral-darker-50);
--filter-dialog-border: var(--neutral-lighter-25);
--horizontal-line-color: var(--neutral-lighter-75);
--delete-color: var(--danger-lighter-50);
--insert-color: var(--success-lighter-50);
--mark-color: var(--help-25);
--mark-color-text-color: var(--body-color);
--heading-intro-color:var(--secondary-lighter-25);
--heading-1-color:var(--secondary-lighter-25);
--heading-2-color:var(--secondary-lighter-25);
--heading-3-color:var(--secondary-lighter-25);
--heading-4-color:var(--secondary-lighter-25);
--heading-5-color:var(--secondary-lighter-25);
--heading-6-color:var(--secondary-lighter-25);
--footer-bg: var(--neutral-50);
--footer-bg-focus: var(--neutral-50);
--footer-bg-current: var(--neutral-lighter-75);
--footer-bg-hover: var(--neutral-5);
--footer-txt-hover: var(--neutral-lighter-5);
--notification-global-txt: var(--neutral-lighter-50);
--notification-global-bg: var(--neutral-25);
--notification-global-bg-neutral: var(--neutral-25);
--notification-global-txt-neutral: var(--neutral-lighter-50);
--notification-global-bg-primary: var(--primary-25);
--notification-global-txt-primary: var(--primary-lighter-50);
--notification-global-bg-secondary: var(--secondary-25);
--notification-global-txt-secondary: var(--secondary-lighter-50);
--notification-global-bg-success: var(--success-25);
--notification-global-txt-success: var(--success-lighter-50);
--notification-global-bg-help: var(--help-25);
--notification-global-txt-help: var(--help-lighter-50);
--notification-global-bg-warning: var(--warning-25);
--notification-global-txt-warning: var(--warning-lighter-50);
--notification-global-bg-danger: var(--danger-25);
--notification-global-txt-danger: var(--danger-lighter-50);
--notification-global-bg-mode: var(--mode-25);
--notification-global-txt-mode: var(--mode-lighter-50);
--header-branding-bg: var(--neutral-50);
--header-branding-icon: var(--primary-lighter-50);
--header-logo-freistaatbayern: var(--primary-lighter-50);
--header-branding-supplement: var(--primary-lighter-50);
--header-branding-supplement-danger: var(--danger-lighter-50);
--header-logo-primary: var(--primary-lighter-50);
--header-logo-secondary: var(--primary-lighter-50);
--header-menu-item-bg-hover: var(--primary-25);
--header-menu-item-outline: var(--primary-lighter-75);
--header-menu-item-text-hover: var(--secondary-lighter-25);
--header-menu-item-txt: var(--primary-lighter-50);
--header-menu-primary-bg: var(--neutral-50);
--header-menu-secondary-bg: var(--neutral);
--header-menu-secondary-txt: var(--secondary-lighter-25);
--header-menu-secondary-txt-hover: var(--secondary-lighter-5);
--header-top-bg: var(--neutral);
--header-top-icon: var(--secondary-lighter-25);
--header-top-txt: var(--secondary-lighter-25);
--header-branding-logo-color: var(--primary-lighter-50);
--help-tooltip-bg: var(--help-25);
--help-tooltip-border: var(--neutral-lighter-25);
--help-sidebar-bg: var(--neutral-50);
--help-sidebar-header-bg: var(--help-25);
--help-close-button-bg: var(--help-5);
--help-close-button-color: var(--white);
--help-txt: var(--white);
--icon-color: var(--white);
--icon-color-neutral:var(--neutral-lighter-75);
--icon-color-primary:var(--primary-lighter-75);
--icon-color-secondary:var(--secondary-lighter-75);
--icon-color-success:var(--success-lighter-75);
--icon-color-help:var(--help-lighter-75);
--icon-color-warning:var(--warning-lighter-75);
--icon-color-danger:var(--danger-lighter-75);
--icon-color-mode:var(--mode-lighter-75);
--input-bg: var(--black);
--input-neutral-bg: var(--neutral-50);
--input-line: var(--white);
--input-label: var(--primary-lighter-75);
--input-label-hover: var(--primary-lighter-75);
--input-required: var(--primary-lighter-75);
--input-neutral-label: var(--primary-lighter-75);
--input-value: var(--white);
--input-invalid: var(--danger-lighter-50);
--input-valid: var(--success-lighter-50);
--input-disabled: var(--disabled);
--input-placeholder: var(--disabled);
--link-color: var(--primary-lighter-50);
--download-link-txt-hover: var(--white);
--mini-card-header-bg: var(--neutral);
--mini-card-header-text: var(--primary-lighter-25);
--app-nav-fullnav-bg: var(--secondary-25);
--app-nav-menu-item-bg-current: var(--secondary-darker-75);
--notification-bg: var(--neutral-50);
--notification-highlight: var(--neutral-lighter-75);
--notification-bg-neutral: var(--neutral-25);
--notification-highlight-neutral: var(--neutral);
--notification-bg-primary: var(--primary-25);
--notification-highlight-primary: var(--primary);
--notification-bg-secondary: var(--secondary-25);
--notification-highlight-secondary: var(--secondary);
--notification-bg-success: var(--success-25);
--notification-highlight-success: var(--success);
--notification-bg-help: var(--help-25);
--notification-highlight-help: var(--help);
--notification-bg-warning: var(--warning-25);
--notification-highlight-warning: var(--warning);
--notification-bg-danger: var(--danger-25);
--notification-highlight-danger: var(--danger);
--notification-bg-mode: var(--mode-25);
--notification-highlight-mode: var(--mode);
--placeholder-background: var(--white);
--placeholder-wave: var(--black);
--progress-bar-bg: var(--neutral-50);
--progress-value-bg: var(--primary);
--progress-value-color: var(--white);
--progress-value-label-bg: var(--primary-50);
--progress-value-bg-neutral: var(--neutral);
--progress-value-neutral-color: var(--white);
--progress-value-label-neutral-bg: var(--neutral-50);
--progress-value-bg-primary: var(--primary);
--progress-value-primary-color: var(--white);
--progress-value-label-primary-bg: var(--primary-50);
--progress-value-bg-secondary: var(--secondary);
--progress-value-secondary-color: var(--white);
--progress-value-label-secondary-bg: var(--secondary-50);
--progress-value-bg-success: var(--success);
--progress-value-success-color: var(--white);
--progress-value-label-success-bg: var(--success-50);
--progress-value-bg-help: var(--help);
--progress-value-help-color: var(--black);
--progress-value-label-help-bg: var(--help-50);
--progress-value-bg-warning: var(--warning);
--progress-value-warning-color: var(--white);
--progress-value-label-warning-bg: var(--warning-50);
--progress-value-bg-danger: var(--danger);
--progress-value-danger-color: var(--white);
--progress-value-label-danger-bg: var(--danger-50);
--progress-value-bg-mode: var(--mode);
--progress-value-mode-color: var(--white);
--progress-value-label-mode-bg: var(--mode-50);
--qr-color: var(--white);
--qr-bg: var(--neutral-5);
--input-invalid-radio: var(--danger-lighter-50);
--input-valid-radio: var(--success-lighter-50);
--input-invalid-radio-hover: var(--danger-lighter-75);
--input-valid-radio-hover: var(--success-lighter-75);
--select-bg: var(--neutral-lighte-5);
--input-slide-checked: var(--primary);
--input-slide-unchecked: var(--neutral-50);
--input-slide: var(--white);
--snackbar-bg: var(--neutral-50);
--snackbar-color: var(--white);
--snackbar-close-bg: var(--primary-25);
--snackbar-close-color: var(--primary-lighter-25);
--snackbar-color-neutral:var(--neutral-lighter-50);
--snackbar-color-primary:var(--primary-lighter-50);
--snackbar-color-secondary:var(--secondary-lighter-50);
--snackbar-color-success:var(--success-lighter-50);
--snackbar-color-help:var(--help-lighter-50);
--snackbar-color-warning:var(--warning-lighter-50);
--snackbar-color-danger:var(--danger-lighter-50);
--snackbar-color-mode:var(--mode-lighter-50);
--sort-icon-background: var(--primary);
--sort-dialog-background: var(--neutral-darker-50);
--sort-dialog-border: var(--neutral-lighter-25);
--spinner-color: var(--primary-lighter-75);
--spinner-color-neutral:var(--neutral-lighter-75);
--spinner-color-primary:var(--primary-lighter-75);
--spinner-color-secondary:var(--secondary-lighter-75);
--spinner-color-success:var(--success-lighter-75);
--spinner-color-help:var(--help-lighter-75);
--spinner-color-warning:var(--warning-lighter-75);
--spinner-color-danger:var(--danger-lighter-75);
--spinner-color-mode:var(--mode-lighter-75);
--card-statusindicator-color: var(--neutral-50);
--card-statusindicator-color-neutral:var(--neutral-25);
--card-statusindicator-color-primary:var(--primary-25);
--card-statusindicator-color-secondary:var(--secondary-25);
--card-statusindicator-color-success:var(--success-25);
--card-statusindicator-color-help:var(--help-25);
--card-statusindicator-color-warning:var(--warning-25);
--card-statusindicator-color-danger:var(--danger-25);
--card-statusindicator-color-mode:var(--mode-25);
--stepper-color: var(--white);
--stepper-background-color: var(--black);
--stepper-line-neutral: var(--neutral);
--stepper-line-secondary: var(--secondary-lighter-75);
--stepper-dot-background-neutral: var(--neutral-lighter-25);
--stepper-dot-background-secondary: var(--secondary);
--stepper-dot-background-primary: var(--primary);
--stepper-dot-background-danger: var(--danger-lighter-75);
--stepper-number-neutral: var(--neutral-75);
--stepper-number-primary: var(--white);
--stepper-icon-color: var(--white);
--stepper-scroll-bg: var(--black);
--stepper-scroll-txt: var(--primary-lighter-75);
--table-txt: var(--white);
--table-bg: var(--black);
--table-caption-txt: var(--heading-3-color);
--table-border: var(--neutral);
--table-striped-bg: var(--secondary-25);
--table-striped-txt: var(--body-color);
--table-hover-bg: var(--primary);
--table-hover-txt: var(--black);
--table-sort-txt: var(--neutral-lighter-50);
--tablist-bg: transparent;
--tablist-border: var(--neutral-lighter-75);
--tabs-txt: var(--neutral-lighter-5);
--tabs-current: var(--primary-lighter-75);
--tabs-hover: var(--primary-lighter-50);
--tabs-scroll-bg: var(--black);
--tabs-scroll-txt: var(--primary-lighter-75);
--card-teaser-link: var(--primary-lighter-50);
--card-teaser-txt: var(--white);
--card-teaser-title: var(--white);
--card-teaser-bg: var(--neutral-25);
--card-page-teaser-title: var(--secondary-lighter-25);
--card-teaser-txt-neutral: var(--white);
--card-teaser-title-neutral: var(--white);
--card-teaser-link-neutral: var(--white);
--card-teaser-bg-neutral:var(--neutral-25);
--card-teaser-txt-primary: var(--white);
--card-teaser-title-primary: var(--white);
--card-teaser-link-primary: var(--white);
--card-teaser-bg-primary:var(--primary-25);
--card-teaser-txt-secondary: var(--white);
--card-teaser-title-secondary: var(--white);
--card-teaser-link-secondary: var(--white);
--card-teaser-bg-secondary:var(--secondary-25);
--card-teaser-txt-success: var(--white);
--card-teaser-title-success: var(--white);
--card-teaser-link-success: var(--white);
--card-teaser-bg-success:var(--success-25);
--card-teaser-txt-help: var(--white);
--card-teaser-title-help: var(--white);
--card-teaser-link-help: var(--white);
--card-teaser-bg-help:var(--help-25);
--card-teaser-txt-warning: var(--white);
--card-teaser-title-warning: var(--white);
--card-teaser-link-warning: var(--white);
--card-teaser-bg-warning:var(--warning-25);
--card-teaser-txt-danger: var(--white);
--card-teaser-title-danger: var(--white);
--card-teaser-link-danger: var(--white);
--card-teaser-bg-danger:var(--danger-25);
--card-teaser-txt-mode: var(--white);
--card-teaser-title-mode: var(--white);
--card-teaser-link-mode: var(--white);
--card-teaser-bg-mode:var(--mode-25);
--tooltip-bg: var(--neutral-50);
--tooltip-border: var(--neutral-lighter-25);
--tooltip-txt: var(--white);
}
}
@media (prefers-color-scheme: dark) {
:root {
--autocomplete-txt: var(--white);
--autocomplete-bg: var(--secondary-75);
--autocomplete-hover-txt: var(--black);
--autocomplete-hover-bg: var(--secondary-75);
--border-color-neutral:var(--neutral-lighter-75);
--border-color-primary:var(--primary-lighter-75);
--border-color-secondary:var(--secondary-lighter-75);
--border-color-success:var(--success-lighter-75);
--border-color-help:var(--help-lighter-75);
--border-color-warning:var(--warning-lighter-75);
--border-color-danger:var(--danger-lighter-75);
--border-color-mode:var(--mode-lighter-75);
--border-color: var(--primary-lighter-75);
--breadcrumbs-bg: var(--neutral-50);
--breadcrumbs-current-txt: var(--primary-lighter-75);
--breadcrumbs-divider: var(--primary-lighter-75);
--button-status-color: var(--neutral-5);
--button-status-contrast-color: var(--white);
--button-status-hover-color: var(--neutral-25);
--button-status-focus-color: var(--neutral-25);
--button-status-disabled-color: var(--neutral-75);
--button-status-disabled-contrast-color: var(--neutral-lighter-50);
--button-outline-status-color: var(--black);
--button-opacity-bg: var(--black);
--button-opacity-color: var(--white);
--button-opacity-hover: var(--black);
--button-status-color-neutral:var(--neutral);
--button-status-contrast-color-neutral: var(--white);
--button-status-hover-color-neutral:var(--neutral-lighter-25);
--button-outline-status-color-neutral:var(--neutral-lighter-50);
--button-outline-stroke-color-neutral:var(--neutral-lighter-50);
--button-opacity-bg-neutral: var(--neutral-5);
--button-opacity-color-neutral: var(--neutral-lighter-50);
--button-opacity-hover-neutral: var(--neutral-lighter-25);
--button-status-color-primary:var(--primary);
--button-status-contrast-color-primary: var(--white);
--button-status-hover-color-primary:var(--primary-lighter-50);
--button-outline-status-color-primary:var(--primary-lighter-75);
--button-outline-stroke-color-primary:var(--primary-lighter-75);
--button-opacity-bg-primary: var(--primary-5);
--button-opacity-color-primary: var(--primary-lighter-50);
--button-opacity-hover-primary: var(--primary-lighter-25);
--button-status-color-secondary:var(--secondary);
--button-status-contrast-color-secondary: var(--white);
--button-status-hover-color-secondary:var(--secondary-lighter-50);
--button-outline-status-color-secondary:var(--secondary-lighter-75);
--button-outline-stroke-color-secondary:var(--secondary-lighter-75);
--button-opacity-bg-secondary: var(--secondary-5);
--button-opacity-color-secondary: var(--secondary-lighter-50);
--button-opacity-hover-secondary: var(--secondary-lighter-25);
--button-status-color-success:var(--success);
--button-status-contrast-color-success: var(--white);
--button-status-hover-color-success:var(--success-lighter-50);
--button-outline-status-color-success:var(--success-lighter-75);
--button-outline-stroke-color-success:var(--success-lighter-75);
--button-opacity-bg-success: var(--success-5);
--button-opacity-color-success: var(--success-lighter-50);
--button-opacity-hover-success: var(--success-lighter-25);
--button-status-color-help:var(--help);
--button-status-contrast-color-help: var(--black);
--button-status-hover-color-help:var(--help-75);
--button-outline-status-color-help:var(--help-lighter-75);
--button-outline-stroke-color-help:var(--help-lighter-75);
--button-opacity-bg-help: var(--help-5);
--button-opacity-color-help: var(--help-lighter-75);
--button-opacity-hover-help: var(--help-75);
--button-status-color-warning:var(--warning);
--button-status-contrast-color-warning: var(--black);
--button-status-hover-color-warning:var(--warning-75);
--button-outline-status-color-warning:var(--warning-lighter-75);
--button-outline-stroke-color-warning:var(--warning-lighter-75);
--button-opacity-bg-warning: var(--warning-5);
--button-opacity-color-warning: var(--warning-lighter-75);
--button-opacity-hover-warning: var(--warning-75);
--button-status-color-danger:var(--danger);
--button-status-contrast-color-danger: var(--white);
--button-status-hover-color-danger:var(--danger-lighter-50);
--button-outline-status-color-danger:var(--danger-lighter-75);
--button-outline-stroke-color-danger:var(--danger-lighter-75);
--button-opacity-bg-danger: var(--danger-5);
--button-opacity-color-danger: var(--danger-lighter-50);
--button-opacity-hover-danger: var(--danger-lighter-25);
--button-status-color-mode:var(--mode);
--button-status-contrast-color-mode: var(--white);
--button-status-hover-color-mode:var(--mode-lighter-50);
--button-outline-status-color-mode:var(--mode-lighter-75);
--button-outline-stroke-color-mode:var(--mode-lighter-75);
--button-opacity-bg-mode: var(--mode-5);
--button-opacity-color-mode: var(--mode-lighter-50);
--button-opacity-hover-mode: var(--mode-lighter-25);
--button-menu-outline: var(--neutral-lighter-25);
--button-menu-bg: var(--neutral-50);
--button-select-outline: var(--neutral-lighter-25);
--button-select-bg: var(--neutral-50);
--button-select-txt: var(--white);
--button-select-txt-hover: var(--primary-25);
--button-select-txt-focus: var(--primary-lighter-75);
--captcha-status-color: var(--primary-lighter-50);
--captcha-status-color-neutral:var(--neutral-lighter-50);
--captcha-status-color-primary:var(--primary-lighter-50);
--captcha-status-color-secondary:var(--secondary-lighter-50);
--captcha-status-color-success:var(--success-lighter-50);
--captcha-status-color-help:var(--help-lighter-50);
--captcha-status-color-warning:var(--warning-lighter-50);
--captcha-status-color-danger:var(--danger-lighter-50);
--captcha-status-color-mode:var(--mode-lighter-50);
--newslist-bg: var(--neutral-75);
--card-link: var(--primary-lighter-50);
--card-status-color: var(--neutral-lighter-50);
--card-bg: var(--neutral-75);
--card-color: var(--white);
--card-badge-bg: var(--warning-lighter-75);
--card-badge-txt: var(--neutral-75);
--card-footer-line-color: var(--neutral-lighter-75);
--card-bg-hover: var(--neutral);
--card-status-color-neutral:var(--neutral-lighter-75);
--card-status-color-primary:var(--primary-lighter-75);
--card-status-color-secondary:var(--secondary-lighter-75);
--card-status-color-success:var(--success-lighter-75);
--card-status-color-help:var(--help-lighter-75);
--card-status-color-warning:var(--warning-lighter-75);
--card-status-color-danger:var(--danger-lighter-75);
--card-status-color-mode:var(--mode-lighter-75);
--carousel-figcaption-bg: rgba(0, 0, 0, .625);
--carousel-topcarousel-bg: var(--neutral-75);
--carousel-footer-bg: var(--neutral-50);
--carousel-button-status-color: var(--primary-lighter-50);
--carousel-button-status-txt-hover-color: var(--primary-lighter-50);
--carousel-button-status-txt-color: var(--neutral-lighter-50);
--carousel-button-status-hover-bg: var(--neutral-lighter-75);
--carousel-indicator-bg: var(--neutral-lighter-75);
--carousel-indicator-active-txt: var(--success-lighter-75);
--input-invalid-check: var(--danger-lighter-50);
--input-valid-check: var(--success-lighter-50);
--input-invalid-check-hover: var(--danger-75);
--input-valid-check-hover: var(--success-75);
--chip-bg: var(--neutral);
--chip-color: var(--white);
--chip-hover-bg: var(--neutral-75);
--close-background-color: var(--neutral-25);
--close-color: var(--white);
--close-background-color-neutral:var(--neutral-lighter-75);
--close-background-color-primary:var(--primary-lighter-75);
--close-background-color-secondary:var(--secondary-lighter-75);
--close-background-color-success:var(--success-lighter-75);
--close-background-color-help:var(--help-lighter-75);
--close-background-color-warning:var(--warning-lighter-75);
--close-background-color-danger:var(--danger-lighter-75);
--close-background-color-mode:var(--mode-lighter-75);
--body-bg: var(--black);
--body-color: var(--white);
--disabled: var(--neutral-lighter-50);
--neutral-75:var(--neutral-darker-75);
--neutral-50:var(--neutral-darker-50);
--neutral-25:var(--neutral-darker-25);
--neutral-5:var(--neutral-darker-5);
--primary-75:var(--primary-darker-75);
--primary-50:var(--primary-darker-50);
--primary-25:var(--primary-darker-25);
--primary-5:var(--primary-darker-5);
--secondary-75:var(--secondary-darker-75);
--secondary-50:var(--secondary-darker-50);
--secondary-25:var(--secondary-darker-25);
--secondary-5:var(--secondary-darker-5);
--success-75:var(--success-darker-75);
--success-50:var(--success-darker-50);
--success-25:var(--success-darker-25);
--success-5:var(--success-darker-5);
--help-75:var(--help-darker-75);
--help-50:var(--help-darker-50);
--help-25:var(--help-darker-25);
--help-5:var(--help-darker-5);
--warning-75:var(--warning-darker-75);
--warning-50:var(--warning-darker-50);
--warning-25:var(--warning-darker-25);
--warning-5:var(--warning-darker-5);
--danger-75:var(--danger-darker-75);
--danger-50:var(--danger-darker-50);
--danger-25:var(--danger-darker-25);
--danger-5:var(--danger-darker-5);
--mode-75:var(--mode-darker-75);
--mode-50:var(--mode-darker-50);
--mode-25:var(--mode-darker-25);
--mode-5:var(--mode-darker-5);
--dialog-bg: var(--neutral-50);
--dialog-outline: var(--primary-lighter-75);
--dialog-title: var(--secondary-lighter-50);
--dialog-content-color: var(--white);
--download-link-color: var(--primary-lighter-5);
--download-link-color-hover: var(--primary-lighter-25);
--download-link-bg: var(--neutral-75);
--download-link-border: var(--neutral-50);
--expansion-bg: var(--neutral-50);
--expansion-title: var(--primary-lighter-75);
--expansion-title-hover: var(--secondary-lighter-50);
--expansion-card-status-color: var(--neutral-lighter-50);
--expansion-card-hover-color: var(--neutral-lighter-50);
--expansion-card-status-color-neutral:var(--neutral);
--expansion-card-status-color-primary:var(--primary);
--expansion-card-status-color-secondary:var(--secondary);
--expansion-card-status-color-success:var(--success);
--expansion-card-status-color-help:var(--help);
--expansion-card-status-color-warning:var(--warning);
--expansion-card-status-color-danger:var(--danger);
--expansion-card-status-color-mode:var(--mode);
--fieldset: var(--secondary-5);
--link-on-fieldset-color: var(--link-color);
--filter-active-indicator: var(--danger);
--filter-active-indicator-border: var(--black);
--filter-icon-background: var(--primary);
--filter-dialog-background: var(--neutral-darker-50);
--filter-dialog-border: var(--neutral-lighter-25);
--horizontal-line-color: var(--neutral-lighter-75);
--delete-color: var(--danger-lighter-50);
--insert-color: var(--success-lighter-50);
--mark-color: var(--help-25);
--mark-color-text-color: var(--body-color);
--heading-intro-color:var(--secondary-lighter-25);
--heading-1-color:var(--secondary-lighter-25);
--heading-2-color:var(--secondary-lighter-25);
--heading-3-color:var(--secondary-lighter-25);
--heading-4-color:var(--secondary-lighter-25);
--heading-5-color:var(--secondary-lighter-25);
--heading-6-color:var(--secondary-lighter-25);
--footer-bg: var(--neutral-50);
--footer-bg-focus: var(--neutral-50);
--footer-bg-current: var(--neutral-lighter-75);
--footer-bg-hover: var(--neutral-5);
--footer-txt-hover: var(--neutral-lighter-5);
--notification-global-txt: var(--neutral-lighter-50);
--notification-global-bg: var(--neutral-25);
--notification-global-bg-neutral: var(--neutral-25);
--notification-global-txt-neutral: var(--neutral-lighter-50);
--notification-global-bg-primary: var(--primary-25);
--notification-global-txt-primary: var(--primary-lighter-50);
--notification-global-bg-secondary: var(--secondary-25);
--notification-global-txt-secondary: var(--secondary-lighter-50);
--notification-global-bg-success: var(--success-25);
--notification-global-txt-success: var(--success-lighter-50);
--notification-global-bg-help: var(--help-25);
--notification-global-txt-help: var(--help-lighter-50);
--notification-global-bg-warning: var(--warning-25);
--notification-global-txt-warning: var(--warning-lighter-50);
--notification-global-bg-danger: var(--danger-25);
--notification-global-txt-danger: var(--danger-lighter-50);
--notification-global-bg-mode: var(--mode-25);
--notification-global-txt-mode: var(--mode-lighter-50);
--header-branding-bg: var(--neutral-50);
--header-branding-icon: var(--primary-lighter-50);
--header-logo-freistaatbayern: var(--primary-lighter-50);
--header-branding-supplement: var(--primary-lighter-50);
--header-branding-supplement-danger: var(--danger-lighter-50);
--header-logo-primary: var(--primary-lighter-50);
--header-logo-secondary: var(--primary-lighter-50);
--header-menu-item-bg-hover: var(--primary-25);
--header-menu-item-outline: var(--primary-lighter-75);
--header-menu-item-text-hover: var(--secondary-lighter-25);
--header-menu-item-txt: var(--primary-lighter-50);
--header-menu-primary-bg: var(--neutral-50);
--header-menu-secondary-bg: var(--neutral);
--header-menu-secondary-txt: var(--secondary-lighter-25);
--header-menu-secondary-txt-hover: var(--secondary-lighter-5);
--header-top-bg: var(--neutral);
--header-top-icon: var(--secondary-lighter-25);
--header-top-txt: var(--secondary-lighter-25);
--header-branding-logo-color: var(--primary-lighter-50);
--help-tooltip-bg: var(--help-25);
--help-tooltip-border: var(--neutral-lighter-25);
--help-sidebar-bg: var(--neutral-50);
--help-sidebar-header-bg: var(--help-25);
--help-close-button-bg: var(--help-5);
--help-close-button-color: var(--white);
--help-txt: var(--white);
--icon-color: var(--white);
--icon-color-neutral:var(--neutral-lighter-75);
--icon-color-primary:var(--primary-lighter-75);
--icon-color-secondary:var(--secondary-lighter-75);
--icon-color-success:var(--success-lighter-75);
--icon-color-help:var(--help-lighter-75);
--icon-color-warning:var(--warning-lighter-75);
--icon-color-danger:var(--danger-lighter-75);
--icon-color-mode:var(--mode-lighter-75);
--input-bg: var(--black);
--input-neutral-bg: var(--neutral-50);
--input-line: var(--white);
--input-label: var(--primary-lighter-75);
--input-label-hover: var(--primary-lighter-75);
--input-required: var(--primary-lighter-75);
--input-neutral-label: var(--primary-lighter-75);
--input-value: var(--white);
--input-invalid: var(--danger-lighter-50);
--input-valid: var(--success-lighter-50);
--input-disabled: var(--disabled);
--input-placeholder: var(--disabled);
--link-color: var(--primary-lighter-50);
--download-link-txt-hover: var(--white);
--mini-card-header-bg: var(--neutral);
--mini-card-header-text: var(--primary-lighter-25);
--app-nav-fullnav-bg: var(--secondary-25);
--app-nav-menu-item-bg-current: var(--secondary-darker-75);
--notification-bg: var(--neutral-50);
--notification-highlight: var(--neutral-lighter-75);
--notification-bg-neutral: var(--neutral-25);
--notification-highlight-neutral: var(--neutral);
--notification-bg-primary: var(--primary-25);
--notification-highlight-primary: var(--primary);
--notification-bg-secondary: var(--secondary-25);
--notification-highlight-secondary: var(--secondary);
--notification-bg-success: var(--success-25);
--notification-highlight-success: var(--success);
--notification-bg-help: var(--help-25);
--notification-highlight-help: var(--help);
--notification-bg-warning: var(--warning-25);
--notification-highlight-warning: var(--warning);
--notification-bg-danger: var(--danger-25);
--notification-highlight-danger: var(--danger);
--notification-bg-mode: var(--mode-25);
--notification-highlight-mode: var(--mode);
--placeholder-background: var(--white);
--placeholder-wave: var(--black);
--progress-bar-bg: var(--neutral-50);
--progress-value-bg: var(--primary);
--progress-value-color: var(--white);
--progress-value-label-bg: var(--primary-50);
--progress-value-bg-neutral: var(--neutral);
--progress-value-neutral-color: var(--white);
--progress-value-label-neutral-bg: var(--neutral-50);
--progress-value-bg-primary: var(--primary);
--progress-value-primary-color: var(--white);
--progress-value-label-primary-bg: var(--primary-50);
--progress-value-bg-secondary: var(--secondary);
--progress-value-secondary-color: var(--white);
--progress-value-label-secondary-bg: var(--secondary-50);
--progress-value-bg-success: var(--success);
--progress-value-success-color: var(--white);
--progress-value-label-success-bg: var(--success-50);
--progress-value-bg-help: var(--help);
--progress-value-help-color: var(--black);
--progress-value-label-help-bg: var(--help-50);
--progress-value-bg-warning: var(--warning);
--progress-value-warning-color: var(--white);
--progress-value-label-warning-bg: var(--warning-50);
--progress-value-bg-danger: var(--danger);
--progress-value-danger-color: var(--white);
--progress-value-label-danger-bg: var(--danger-50);
--progress-value-bg-mode: var(--mode);
--progress-value-mode-color: var(--white);
--progress-value-label-mode-bg: var(--mode-50);
--qr-color: var(--white);
--qr-bg: var(--neutral-5);
--input-invalid-radio: var(--danger-lighter-50);
--input-valid-radio: var(--success-lighter-50);
--input-invalid-radio-hover: var(--danger-lighter-75);
--input-valid-radio-hover: var(--success-lighter-75);
--select-bg: var(--neutral-lighte-5);
--input-slide-checked: var(--primary);
--input-slide-unchecked: var(--neutral-50);
--input-slide: var(--white);
--snackbar-bg: var(--neutral-50);
--snackbar-color: var(--white);
--snackbar-close-bg: var(--primary-25);
--snackbar-close-color: var(--primary-lighter-25);
--snackbar-color-neutral:var(--neutral-lighter-50);
--snackbar-color-primary:var(--primary-lighter-50);
--snackbar-color-secondary:var(--secondary-lighter-50);
--snackbar-color-success:var(--success-lighter-50);
--snackbar-color-help:var(--help-lighter-50);
--snackbar-color-warning:var(--warning-lighter-50);
--snackbar-color-danger:var(--danger-lighter-50);
--snackbar-color-mode:var(--mode-lighter-50);
--sort-icon-background: var(--primary);
--sort-dialog-background: var(--neutral-darker-50);
--sort-dialog-border: var(--neutral-lighter-25);
--spinner-color: var(--primary-lighter-75);
--spinner-color-neutral:var(--neutral-lighter-75);
--spinner-color-primary:var(--primary-lighter-75);
--spinner-color-secondary:var(--secondary-lighter-75);
--spinner-color-success:var(--success-lighter-75);
--spinner-color-help:var(--help-lighter-75);
--spinner-color-warning:var(--warning-lighter-75);
--spinner-color-danger:var(--danger-lighter-75);
--spinner-color-mode:var(--mode-lighter-75);
--card-statusindicator-color: var(--neutral-50);
--card-statusindicator-color-neutral:var(--neutral-25);
--card-statusindicator-color-primary:var(--primary-25);
--card-statusindicator-color-secondary:var(--secondary-25);
--card-statusindicator-color-success:var(--success-25);
--card-statusindicator-color-help:var(--help-25);
--card-statusindicator-color-warning:var(--warning-25);
--card-statusindicator-color-danger:var(--danger-25);
--card-statusindicator-color-mode:var(--mode-25);
--stepper-color: var(--white);
--stepper-background-color: var(--black);
--stepper-line-neutral: var(--neutral);
--stepper-line-secondary: var(--secondary-lighter-75);
--stepper-dot-background-neutral: var(--neutral-lighter-25);
--stepper-dot-background-secondary: var(--secondary);
--stepper-dot-background-primary: var(--primary);
--stepper-dot-background-danger: var(--danger-lighter-75);
--stepper-number-neutral: var(--neutral-75);
--stepper-number-primary: var(--white);
--stepper-icon-color: var(--white);
--stepper-scroll-bg: var(--black);
--stepper-scroll-txt: var(--primary-lighter-75);
--table-txt: var(--white);
--table-bg: var(--black);
--table-caption-txt: var(--heading-3-color);
--table-border: var(--neutral);
--table-striped-bg: var(--secondary-25);
--table-striped-txt: var(--body-color);
--table-hover-bg: var(--primary);
--table-hover-txt: var(--black);
--table-sort-txt: var(--neutral-lighter-50);
--tablist-bg: transparent;
--tablist-border: var(--neutral-lighter-75);
--tabs-txt: var(--neutral-lighter-5);
--tabs-current: var(--primary-lighter-75);
--tabs-hover: var(--primary-lighter-50);
--tabs-scroll-bg: var(--black);
--tabs-scroll-txt: var(--primary-lighter-75);
--card-teaser-link: var(--primary-lighter-50);
--card-teaser-txt: var(--white);
--card-teaser-title: var(--white);
--card-teaser-bg: var(--neutral-25);
--card-page-teaser-title: var(--secondary-lighter-25);
--card-teaser-txt-neutral: var(--white);
--card-teaser-title-neutral: var(--white);
--card-teaser-link-neutral: var(--white);
--card-teaser-bg-neutral:var(--neutral-25);
--card-teaser-txt-primary: var(--white);
--card-teaser-title-primary: var(--white);
--card-teaser-link-primary: var(--white);
--card-teaser-bg-primary:var(--primary-25);
--card-teaser-txt-secondary: var(--white);
--card-teaser-title-secondary: var(--white);
--card-teaser-link-secondary: var(--white);
--card-teaser-bg-secondary:var(--secondary-25);
--card-teaser-txt-success: var(--white);
--card-teaser-title-success: var(--white);
--card-teaser-link-success: var(--white);
--card-teaser-bg-success:var(--success-25);
--card-teaser-txt-help: var(--white);
--card-teaser-title-help: var(--white);
--card-teaser-link-help: var(--white);
--card-teaser-bg-help:var(--help-25);
--card-teaser-txt-warning: var(--white);
--card-teaser-title-warning: var(--white);
--card-teaser-link-warning: var(--white);
--card-teaser-bg-warning:var(--warning-25);
--card-teaser-txt-danger: var(--white);
--card-teaser-title-danger: var(--white);
--card-teaser-link-danger: var(--white);
--card-teaser-bg-danger:var(--danger-25);
--card-teaser-txt-mode: var(--white);
--card-teaser-title-mode: var(--white);
--card-teaser-link-mode: var(--white);
--card-teaser-bg-mode:var(--mode-25);
--tooltip-bg: var(--neutral-50);
--tooltip-border: var(--neutral-lighter-25);
--tooltip-txt: var(--white);
}
:root .color-scheme-light {
--autocomplete-txt: var(--black);
--autocomplete-bg: var(--secondary-50);
--autocomplete-hover-txt: var(--black);
--autocomplete-hover-bg: var(--secondary-50);
--border-color-neutral:var(--neutral);
--border-color-primary:var(--primary);
--border-color-secondary:var(--secondary);
--border-color-success:var(--success);
--border-color-help:var(--help);
--border-color-warning:var(--warning);
--border-color-danger:var(--danger);
--border-color-mode:var(--mode);
--border-color: var(--primary);
--breadcrumbs-bg: var(--neutral-5);
--breadcrumbs-current-txt: var(--primary-darker-75);
--breadcrumbs-divider: var(--primary-darker-75);
--button-status-color: var(--white);
--button-status-contrast-color: var(--black);
--button-status-hover-color: var(--white);
--button-status-focus-color: var(--black);
--button-status-disabled-color: var(--neutral-5);
--button-status-disabled-contrast-color: var(--neutral-75);
--button-outline-status-color: var(--white);
--button-outline-stroke-color: var(--white);
--button-opacity-bg: var(--white);
--button-opacity-color: var(--black);
--button-opacity-hover: var(--white);
--button-status-color-neutral:var(--neutral);
--button-status-contrast-color-neutral: var(--white);
--button-status-focus-color-neutral: var(--neutral);
--button-status-hover-color-neutral:var(--neutral-75);
--button-status-outline-color-neutral:var(--neutral);
--button-outline-status-color-neutral:var(--neutral-darker-75);
--button-outline-status-stroke-neutral:var(--neutral);
--button-opacity-bg-neutral: var(--neutral-5);
--button-opacity-color-neutral: var(--neutral-darker-75);
--button-opacity-hover-neutral: var(--neutral-lighter-75);
--button-status-color-primary:var(--primary);
--button-status-contrast-color-primary: var(--white);
--button-status-focus-color-primary: var(--primary);
--button-status-hover-color-primary:var(--primary-75);
--button-status-outline-color-primary:var(--primary);
--button-outline-status-color-primary:var(--primary-darker-75);
--button-outline-status-stroke-primary:var(--primary);
--button-opacity-bg-primary: var(--primary-5);
--button-opacity-color-primary: var(--primary-darker-75);
--button-opacity-hover-primary: var(--primary-lighter-75);
--button-status-color-secondary:var(--secondary);
--button-status-contrast-color-secondary: var(--white);
--button-status-focus-color-secondary: var(--secondary);
--button-status-hover-color-secondary:var(--secondary-75);
--button-status-outline-color-secondary:var(--secondary);
--button-outline-status-color-secondary:var(--secondary-darker-75);
--button-outline-status-stroke-secondary:var(--secondary);
--button-opacity-bg-secondary: var(--secondary-5);
--button-opacity-color-secondary: var(--secondary-darker-75);
--button-opacity-hover-secondary: var(--secondary-lighter-75);
--button-status-color-success:var(--success);
--button-status-contrast-color-success: var(--white);
--button-status-focus-color-success: var(--success);
--button-status-hover-color-success:var(--success-75);
--button-status-outline-color-success:var(--success);
--button-outline-status-color-success:var(--success-darker-75);
--button-outline-status-stroke-success:var(--success);
--button-opacity-bg-success: var(--success-5);
--button-opacity-color-success: var(--success-darker-75);
--button-opacity-hover-success: var(--success-lighter-75);
--button-status-color-help:var(--help);
--button-status-contrast-color-help: var(--black);
--button-status-focus-color-help: var(--help);
--button-status-hover-color-help:var(--help-darker-50);
--button-status-outline-color-help:var(--help);
--button-outline-status-color-help:var(--help-darker-25);
--button-outline-status-stroke-help:var(--help-darker-5);
--button-opacity-bg-help: var(--help-5);
--button-opacity-color-help: var(--help-darker-25);
--button-opacity-hover-help: var(--help);
--button-status-color-warning:var(--warning);
--button-status-contrast-color-warning: var(--black);
--button-status-focus-color-warning: var(--warning);
--button-status-hover-color-warning:var(--warning-darker-75);
--button-status-outline-color-warning:var(--warning);
--button-outline-status-color-warning:var(--warning-darker-50);
--button-outline-status-stroke-warning:var(--warning-darker-25);
--button-opacity-bg-warning: var(--warning-5);
--button-opacity-color-warning: var(--warning-darker-50);
--button-opacity-hover-warning: var(--warning);
--button-status-color-danger:var(--danger);
--button-status-contrast-color-danger: var(--white);
--button-status-focus-color-danger: var(--danger);
--button-status-hover-color-danger:var(--danger-75);
--button-status-outline-color-danger:var(--danger);
--button-outline-status-color-danger:var(--danger-darker-75);
--button-outline-status-stroke-danger:var(--danger);
--button-opacity-bg-danger: var(--danger-5);
--button-opacity-color-danger: var(--danger-darker-75);
--button-opacity-hover-danger: var(--danger-lighter-75);
--button-status-color-mode:var(--mode);
--button-status-contrast-color-mode: var(--white);
--button-status-focus-color-mode: var(--mode);
--button-status-hover-color-mode:var(--mode-75);
--button-status-outline-color-mode:var(--mode);
--button-outline-status-color-mode:var(--mode-darker-75);
--button-outline-status-stroke-mode:var(--mode);
--button-opacity-bg-mode: var(--mode-5);
--button-opacity-color-mode: var(--mode-darker-75);
--button-opacity-hover-mode: var(--mode-lighter-75);
--button-menu-outline: var(--neutral-25);
--button-menu-bg: var(--white);
--button-select-outline: var(--neutral-25);
--button-select-bg: var(--white);
--button-select-txt: var(--neutral);
--button-select-txt-hover: var(--primary-25);
--button-select-txt-focus: var(--primary);
--captcha-status-color: var(--primary);
--captcha-status-color-neutral:var(--neutral);
--captcha-status-color-primary:var(--primary);
--captcha-status-color-secondary:var(--secondary);
--captcha-status-color-success:var(--success);
--captcha-status-color-help:var(--help);
--captcha-status-color-warning:var(--warning);
--captcha-status-color-danger:var(--danger);
--captcha-status-color-mode:var(--mode);
--newslist-bg: var(--neutral-5);
--card-link: var(--link-color);
--card-status-color: var(--neutral-75);
--card-bg: var(--white);
--card-color: var(--neutral-darker-50);
--card-badge-bg: var(--warning);
--card-badge-txt: var(--black);
--card-footer-line-color: var(--neutral-25);
--card-bg-hover: var(--secondary-5);
--card-status-color-neutral:var(--neutral);
--card-status-color-primary:var(--primary);
--card-status-color-secondary:var(--secondary);
--card-status-color-success:var(--success);
--card-status-color-help:var(--help);
--card-status-color-warning:var(--warning);
--card-status-color-danger:var(--danger);
--card-status-color-mode:var(--mode);
--carousel-figcaption-bg: rgba(255, 255, 255, .625);
--carousel-topcarousel-bg: var(--neutral-5);
--carousel-footer-bg: var(--white);
--carousel-button-status-color: var(--primary);
--carousel-button-status-txt-hover-color: var(--primary);
--carousel-button-status-txt-color: var(--neutral-50);
--carousel-button-status-hover-bg: var(--white);
--carousel-indicator-bg: var(--white);
--carousel-indicator-active-txt: var(--success);
--input-invalid-check: var(--danger-25);
--input-valid-check: var(--success-25);
--input-invalid-check-hover: var(--danger-50);
--input-valid-check-hover: var(--success-50);
--chip-bg: var(--neutral-5);
--chip-color: var(--neutral-darker-50);
--chip-hover-bg: var(--neutral-25);
--close-background-color: var(--neutral-75);
--close-color: var(--white);
--close-background-color-neutral:var(--neutral-darker-75);
--close-background-color-primary:var(--primary-darker-75);
--close-background-color-secondary:var(--secondary-darker-75);
--close-background-color-success:var(--success-darker-75);
--close-background-color-help:var(--help-darker-75);
--close-background-color-warning:var(--warning-darker-75);
--close-background-color-danger:var(--danger-darker-75);
--close-background-color-mode:var(--mode-darker-75);
--body-bg: var(--white);
--body-color: var(--black);
--disabled: var(--neutral-75);
--neutral-75:var(--neutral-lighter-75);
--neutral-50:var(--neutral-lighter-50);
--neutral-25:var(--neutral-lighter-25);
--neutral-5:var(--neutral-lighter-5);
--primary-75:var(--primary-lighter-75);
--primary-50:var(--primary-lighter-50);
--primary-25:var(--primary-lighter-25);
--primary-5:var(--primary-lighter-5);
--secondary-75:var(--secondary-lighter-75);
--secondary-50:var(--secondary-lighter-50);
--secondary-25:var(--secondary-lighter-25);
--secondary-5:var(--secondary-lighter-5);
--success-75:var(--success-lighter-75);
--success-50:var(--success-lighter-50);
--success-25:var(--success-lighter-25);
--success-5:var(--success-lighter-5);
--help-75:var(--help-lighter-75);
--help-50:var(--help-lighter-50);
--help-25:var(--help-lighter-25);
--help-5:var(--help-lighter-5);
--warning-75:var(--warning-lighter-75);
--warning-50:var(--warning-lighter-50);
--warning-25:var(--warning-lighter-25);
--warning-5:var(--warning-lighter-5);
--danger-75:var(--danger-lighter-75);
--danger-50:var(--danger-lighter-50);
--danger-25:var(--danger-lighter-25);
--danger-5:var(--danger-lighter-5);
--mode-75:var(--mode-lighter-75);
--mode-50:var(--mode-lighter-50);
--mode-25:var(--mode-lighter-25);
--mode-5:var(--mode-lighter-5);
--dialog-bg: var(--white);
--dialog-outline: var(--primary);
--dialog-title: var(--secondary);
--dialog-content-color: var(--black);
--download-link-color: var(--primary-darker-75);
--download-link-color-hover: var(--primary-darker-75);
--download-link-bg: transparent;
--download-link-border: var(--neutral-50);
--expansion-bg: var(--white);
--expansion-title: var(--primary);
--expansion-title-hover: var(--secondary);
--expansion-card-status-color: var(--neutral-50);
--expansion-card-hover-color: var(--neutral-75);
--expansion-card-status-color-neutral:var(--neutral);
--expansion-card-status-color-primary:var(--primary);
--expansion-card-status-color-secondary:var(--secondary);
--expansion-card-status-color-success:var(--success);
--expansion-card-status-color-help:var(--help);
--expansion-card-status-color-warning:var(--warning);
--expansion-card-status-color-danger:var(--danger);
--expansion-card-status-color-mode:var(--mode);
--fieldset: var(--secondary-5);
--link-on-fieldset-color: var(--secondary);
--filter-active-indicator: var(--danger);
--filter-active-indicator-border: var(--white);
--filter-icon-background: var(--primary);
--filter-dialog-background: var(--white);
--filter-dialog-border: var(--neutral-lighter-25);
--horizontal-line-color: var(--neutral-25);
--delete-color: var(--danger);
--insert-color: var(--success);
--mark-color: var(--help-25);
--mark-color-text-color: var(--body-color);
--heading-intro-color:var(--secondary);
--heading-1-color:var(--secondary);
--heading-2-color:var(--secondary);
--heading-3-color:var(--secondary);
--heading-4-color:var(--secondary);
--heading-5-color:var(--secondary);
--heading-6-color:var(--secondary);
--footer-bg: var(--neutral);
--footer-bg-focus: var(--neutral);
--footer-bg-current: var(--neutral-darker-5);
--footer-bg-hover: var(--neutral-darker-75);
--footer-txt-hover: var(--neutral-5);
--notification-global-txt: var(--neutral-darker-5);
--notification-global-bg: var(--neutral-5);
--notification-global-bg-neutral: var(--neutral);
--notification-global-txt-neutral: var(--white);
--notification-global-bg-primary: var(--primary);
--notification-global-txt-primary: var(--white);
--notification-global-bg-secondary: var(--secondary);
--notification-global-txt-secondary: var(--white);
--notification-global-bg-success: var(--success);
--notification-global-txt-success: var(--white);
--notification-global-bg-help: var(--help);
--notification-global-txt-help: var(--black);
--notification-global-bg-warning: var(--warning);
--notification-global-txt-warning: var(--black);
--notification-global-bg-danger: var(--danger);
--notification-global-txt-danger: var(--white);
--notification-global-bg-mode: var(--mode);
--notification-global-txt-mode: var(--white);
--header-branding-bg: var(--white);
--header-branding-icon: var(--primary);
--header-logo-freistaatbayern: var(--primary);
--header-branding-supplement: var(--primary);
--header-branding-supplement-danger: var(--danger);
--header-logo-primary: var(--primary);
--header-logo-secondary: var(--primary-darker-50);
--header-menu-item-bg-hover: var(--primary-5);
--header-menu-item-text-hover: var(--secondary);
--header-menu-item-outline: var(--primary);
--header-menu-item-txt: var(--primary);
--header-menu-primary-bg: var(--white);
--header-menu-secondary-bg: var(--secondary-5);
--header-menu-secondary-txt: var(--secondary);
--header-menu-secondary-txt-hover: var(--secondary-lighter-75);
--header-top-bg: var(--secondary-5);
--header-top-icon: var(--secondary);
--header-top-txt: var(--secondary);
--header-branding-logo-color: var(--primary);
--help-tooltip-bg: var(--help-25);
--help-tooltip-border: var(--neutral-25);
--help-sidebar-bg: var(--white);
--help-sidebar-header-bg: var(--help-25);
--help-close-button-bg: var(--help-50);
--help-close-button-color: var(--neutral-darker-5);
--help-txt: var(--neutral-darker-50);
--icon-color: var(--black);
--icon-color-neutral:var(--neutral);
--icon-color-primary:var(--primary);
--icon-color-secondary:var(--secondary);
--icon-color-success:var(--success);
--icon-color-help:var(--help);
--icon-color-warning:var(--warning);
--icon-color-danger:var(--danger);
--icon-color-mode:var(--mode);
--input-bg: var(--white);
--input-neutral-bg: var(--neutral-5);
--input-line: var(--neutral-darker-5);
--input-required: var(--primary-darker-75);
--input-label: var(--primary);
--input-label-hover: var(--primary-25);
--input-neutral-label: var(--primary-darker-75);
--input-value: var(--neutral-darker-5);
--input-invalid: var(--danger);
--input-valid: var(--success);
--input-disabled: var(--disabled);
--input-placeholder: var(--disabled);
--link-color: var(--primary);
--download-link-txt-hover: var(--white);
--mini-card-header-bg: var(--neutral-5);
--mini-card-header-text: var(--primary-darker-75);
--app-nav-fullnav-bg: var(--secondary-darker-75);
--app-nav-menu-item-bg-current: var(--secondary-darker-25);
--notification-bg: var(--white);
--notification-highlight: var(--neutral-5);
--notification-bg-neutral: var(--neutral-5);
--notification-highlight-neutral: var(--neutral);
--notification-bg-primary: var(--primary-5);
--notification-highlight-primary: var(--primary);
--notification-bg-secondary: var(--secondary-5);
--notification-highlight-secondary: var(--secondary);
--notification-bg-success: var(--success-5);
--notification-highlight-success: var(--success);
--notification-bg-help: var(--help-5);
--notification-highlight-help: var(--help);
--notification-bg-warning: var(--warning-5);
--notification-highlight-warning: var(--warning);
--notification-bg-danger: var(--danger-5);
--notification-highlight-danger: var(--danger);
--notification-bg-mode: var(--mode-5);
--notification-highlight-mode: var(--mode);
--placeholder-background: var(--black);
--placeholder-wave: var(--white);
--progress-bar-bg: var(--neutral-50);
--progress-value-bg: var(--primary);
--progress-value-color: var(--black);
--progress-value-label-bg: var(--primary-50);
--progress-value-bg-neutral: var(--neutral);
--progress-value-neutral-color: var(--black);
--progress-value-label-neutral-bg: var(--neutral-50);
--progress-value-bg-primary: var(--primary);
--progress-value-primary-color: var(--black);
--progress-value-label-primary-bg: var(--primary-50);
--progress-value-bg-secondary: var(--secondary);
--progress-value-secondary-color: var(--black);
--progress-value-label-secondary-bg: var(--secondary-50);
--progress-value-bg-success: var(--success);
--progress-value-success-color: var(--black);
--progress-value-label-success-bg: var(--success-50);
--progress-value-bg-help: var(--help);
--progress-value-help-color: var(--black);
--progress-value-label-help-bg: var(--help-50);
--progress-value-bg-warning: var(--warning);
--progress-value-warning-color: var(--black);
--progress-value-label-warning-bg: var(--warning-50);
--progress-value-bg-danger: var(--danger);
--progress-value-danger-color: var(--black);
--progress-value-label-danger-bg: var(--danger-50);
--progress-value-bg-mode: var(--mode);
--progress-value-mode-color: var(--black);
--progress-value-label-mode-bg: var(--mode-50);
--qr-color: var(--neutral-darker-5);
--qr-bg: var(--secondary-5);
--input-invalid-radio: var(--danger-25);
--input-valid-radio: var(--success-25);
--input-invalid-radio-hover: var(--danger-50);
--input-valid-radio-hover: var(--success-50);
--select-bg: var(--white);
--input-slide-checked: var(--primary);
--input-slide-unchecked: var(--neutral-75);
--input-slide: var(--white);
--snackbar-bg: var(--white);
--snackbar-color: var(--neutral);
--snackbar-close-bg: var(--primary-5);
--snackbar-close-color: var(--primary);
--snackbar-color-neutral:var(--neutral);
--snackbar-color-primary:var(--primary);
--snackbar-color-secondary:var(--secondary);
--snackbar-color-success:var(--success);
--snackbar-color-help:var(--help-darker-25);
--snackbar-color-warning:var(--warning-darker-50);
--snackbar-color-danger:var(--danger);
--snackbar-color-mode:var(--mode);
--sort-icon-background: var(--primary);
--sort-dialog-background: var(--white);
--sort-dialog-border: var(--neutral-lighter-25);
--spinner-color: var(--primary);
--spinner-color-neutral:var(--neutral);
--spinner-color-primary:var(--primary);
--spinner-color-secondary:var(--secondary);
--spinner-color-success:var(--success);
--spinner-color-help:var(--help);
--spinner-color-warning:var(--warning);
--spinner-color-danger:var(--danger);
--spinner-color-mode:var(--mode);
--card-statusindicator-color: var(--neutral-5);
--card-statusindicator-color-neutral:var(--neutral-25);
--card-statusindicator-color-primary:var(--primary-25);
--card-statusindicator-color-secondary:var(--secondary-25);
--card-statusindicator-color-success:var(--success-25);
--card-statusindicator-color-help:var(--help-25);
--card-statusindicator-color-warning:var(--warning-25);
--card-statusindicator-color-danger:var(--danger-25);
--card-statusindicator-color-mode:var(--mode-25);
--stepper-color: var(--neutral);
--stepper-background-color: var(--white);
--stepper-line-neutral: var(--neutral-lighter-25);
--stepper-line-secondary: var(--secondary);
--stepper-dot-background-neutral: var(--neutral-lighter-25);
--stepper-dot-background-primary: var(--primary);
--stepper-dot-background-secondary: var(--secondary);
--stepper-dot-background-danger: var(--danger);
--stepper-number-neutral: var(--neutral-darker-75);
--stepper-number-primary: var(--white);
--stepper-icon-color: var(--white);
--stepper-scroll-bg: var(--white);
--stepper-scroll-txt: var(--primary);
--table-txt: var(--neutral-darker-5);
--table-bg: var(--white);
--table-caption-txt: var(--heading-3-color);
--table-border: var(--neutral-5);
--table-striped-bg: var(--secondary-25);
--table-striped-txt: var(--body-color);
--table-hover-bg: var(--primary);
--table-hover-txt: var(--white);
--table-sort-txt: var(--neutral-75);
--tablist-bg: transparent;
--tablist-border: var(--neutral-25);
--tabs-txt: var(--neutral-darker-50);
--tabs-current: var(--primary-darker-75);
--tabs-hover: var(--primary-75);
--tabs-scroll-bg: var(--white);
--tabs-scroll-txt: var(--primary);
--card-teaser-link: var(--primary);
--card-teaser-txt: var(--neutral);
--card-teaser-title: var(--secondary);
--card-teaser-bg: var(--white);
--card-page-teaser-title: var(--secondary);
--card-teaser-txt-neutral:var(--white);
--card-teaser-title-neutral:var(--white);
--card-teaser-link-neutral:var(--white);
--card-teaser-bg-neutral:var(--neutral);
--card-teaser-txt-primary:var(--white);
--card-teaser-title-primary:var(--white);
--card-teaser-link-primary:var(--white);
--card-teaser-bg-primary:var(--primary);
--card-teaser-txt-secondary:var(--white);
--card-teaser-title-secondary:var(--white);
--card-teaser-link-secondary:var(--white);
--card-teaser-bg-secondary:var(--secondary);
--card-teaser-txt-success:var(--white);
--card-teaser-title-success:var(--white);
--card-teaser-link-success:var(--white);
--card-teaser-bg-success:var(--success);
--card-teaser-txt-help:var(--black);
--card-teaser-title-help:var(--black);
--card-teaser-link-help:var(--black);
--card-teaser-bg-help:var(--help);
--card-teaser-txt-warning:var(--black);
--card-teaser-title-warning:var(--black);
--card-teaser-link-warning:var(--black);
--card-teaser-bg-warning:var(--warning);
--card-teaser-txt-danger:var(--white);
--card-teaser-title-danger:var(--white);
--card-teaser-link-danger:var(--white);
--card-teaser-bg-danger:var(--danger);
--card-teaser-txt-mode:var(--white);
--card-teaser-title-mode:var(--white);
--card-teaser-link-mode:var(--white);
--card-teaser-bg-mode:var(--mode);
--tooltip-bg: var(--white);
--tooltip-border: var(--neutral-25);
--tooltip-txt: var(--neutral-darker-5);
}
}
@keyframes slide-in {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes slide-out {
to {
transform: translateX(100%);
}
}
@keyframes show-dialog {
from {
transform: scale(0.01);
}
to {
transform: scale(1);
}
}
@keyframes show-backdrop {
from {
opacity: 0;
}
to {
opacity: 0.7;
}
}
@keyframes hide-dialog {
to {
transform: scale(0.01);
}
}
@keyframes hide-backdrop {
to {
opacity: 0;
}
}
@keyframes close-menu {
0% {
transform: scale(1);
opacity: 1;
-webkit-mask-image: var(--header-icon-menu-open);
mask-image: var(--header-icon-menu-open);
}
50% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
-webkit-mask-image: var(--header-icon-menu-closed);
mask-image: var(--header-icon-menu-closed);
}
}
@keyframes close-menu {
0% {
transform: scale(1);
opacity: 1;
-webkit-mask-image: var(--header-icon-menu-closed);
mask-image: var(--header-icon-menu-closed);
}
50% {
transform: scale(0);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
-webkit-mask-image: var(--header-icon-menu-open);
mask-image: var(--header-icon-menu-open);
}
}
@keyframes glow {
50% {
opacity: 0.05;
}
}
@keyframes wave {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
@keyframes spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
@keyframes loading {
from {
transform: translateX(var(--checkedPosition)) rotate(0);
}
to {
transform: translateX(var(--checkedPosition)) rotate(360deg);
}
}
@keyframes remove-card {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
@keyframes add-card {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes snackbar-in {
from {
opacity: 0;
transform: var(--snackbar-translateX) var(--snackbar-translateY) scale(0.01);
}
to {
opacity: 1;
transform: var(--snackbar-translateX) var(--snackbar-translateY) scale(1);
}
}
@keyframes snackbar-out {
from {
opacity: 1;
transform: var(--snackbar-translateX) var(--snackbar-translateY) scale(1);
}
to {
opacity: 0;
transform: var(--snackbar-translateX) var(--snackbar-translateY) scale(0.01);
}
}
@keyframes fade-in-left {
from {
transform: translateX(100%);
}
to {
transform: translateX(0);
}
}
@keyframes fade-in-right {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes fade-out-left {
from {
transform: translateX(0);
}
to {
transform: translateX(-100%);
}
}
@keyframes fade-out-right {
from {
transform: translateX(0);
}
to {
transform: translateX(100%);
}
}
@media (min-width: 576px) {
.container-sm, .container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container-md, .container-sm, .container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container-lg, .container-md, .container-sm, .container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1140px;
}
}
@media (min-width: 1400px) {
.container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
max-width: 1320px;
}
}
.container,
.container-fluid,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
width: 100%;
margin-right: auto;
margin-left: auto;
}
.d-flex {
display: flex !important;
flex-wrap: wrap;
}
.d-flex.items-flex-grow > * {
flex-grow: 1;
}
@media screen and (max-width: 991.99px) {
.visible-only-on-desktop {
display: none !important;
visibility: hidden !important;
}
}
@media (min-width: 992px) {
.visible-only-on-mobile {
display: none !important;
visibility: hidden !important;
}
}
.elevation-0 {
box-shadow: var(--elevation-0, initial) !important;
}
.elevation-1 {
box-shadow: var(--elevation-1, initial) !important;
}
.elevation-1:hover {
box-shadow: var(--elevation-1-hover, initial) !important;
}
.elevation-2 {
box-shadow: var(--elevation-2, initial) !important;
}
.elevation-3 {
box-shadow: var(--elevation-3, initial) !important;
}
.elevation-4 {
box-shadow: var(--elevation-4, initial) !important;
}
.row {
display: flex;
flex-wrap: wrap;
}
.row > * {
box-sizing: border-box;
flex-shrink: 0;
width: 100%;
max-width: 100%;
}
.col {
flex: 1 0 0%;
}
.row-cols-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.row-cols-7 > * {
flex: 0 0 auto;
width: 14.2857142857%;
}
.row-cols-8 > * {
flex: 0 0 auto;
width: 12.5%;
}
.row-cols-9 > * {
flex: 0 0 auto;
width: 11.1111111111%;
}
.row-cols-10 > * {
flex: 0 0 auto;
width: 10%;
}
.row-cols-11 > * {
flex: 0 0 auto;
width: 9.0909090909%;
}
.row-cols-12 > * {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-auto {
flex: 0 0 auto;
width: auto;
}
.col-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-3 {
flex: 0 0 auto;
width: 25%;
}
.col-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-6 {
flex: 0 0 auto;
width: 50%;
}
.col-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-9 {
flex: 0 0 auto;
width: 75%;
}
.col-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-1 {
margin-left: 8.3333333333%;
}
.offset-2 {
margin-left: 16.6666666667%;
}
.offset-3 {
margin-left: 25%;
}
.offset-4 {
margin-left: 33.3333333333%;
}
.offset-5 {
margin-left: 41.6666666667%;
}
.offset-6 {
margin-left: 50%;
}
.offset-7 {
margin-left: 58.3333333333%;
}
.offset-8 {
margin-left: 66.6666666667%;
}
.offset-9 {
margin-left: 75%;
}
.offset-10 {
margin-left: 83.3333333333%;
}
.offset-11 {
margin-left: 91.6666666667%;
}
@media (min-width: 576px) {
.col-sm {
flex: 1 0 0%;
}
.row-cols-sm-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-sm-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-sm-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-sm-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-sm-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-sm-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-sm-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.row-cols-sm-7 > * {
flex: 0 0 auto;
width: 14.2857142857%;
}
.row-cols-sm-8 > * {
flex: 0 0 auto;
width: 12.5%;
}
.row-cols-sm-9 > * {
flex: 0 0 auto;
width: 11.1111111111%;
}
.row-cols-sm-10 > * {
flex: 0 0 auto;
width: 10%;
}
.row-cols-sm-11 > * {
flex: 0 0 auto;
width: 9.0909090909%;
}
.row-cols-sm-12 > * {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-sm-auto {
flex: 0 0 auto;
width: auto;
}
.col-sm-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-sm-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-sm-3 {
flex: 0 0 auto;
width: 25%;
}
.col-sm-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-sm-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-sm-6 {
flex: 0 0 auto;
width: 50%;
}
.col-sm-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-sm-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-sm-9 {
flex: 0 0 auto;
width: 75%;
}
.col-sm-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-sm-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-sm-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-sm-0 {
margin-left: 0;
}
.offset-sm-1 {
margin-left: 8.3333333333%;
}
.offset-sm-2 {
margin-left: 16.6666666667%;
}
.offset-sm-3 {
margin-left: 25%;
}
.offset-sm-4 {
margin-left: 33.3333333333%;
}
.offset-sm-5 {
margin-left: 41.6666666667%;
}
.offset-sm-6 {
margin-left: 50%;
}
.offset-sm-7 {
margin-left: 58.3333333333%;
}
.offset-sm-8 {
margin-left: 66.6666666667%;
}
.offset-sm-9 {
margin-left: 75%;
}
.offset-sm-10 {
margin-left: 83.3333333333%;
}
.offset-sm-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 768px) {
.col-md {
flex: 1 0 0%;
}
.row-cols-md-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-md-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-md-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-md-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-md-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-md-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-md-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.row-cols-md-7 > * {
flex: 0 0 auto;
width: 14.2857142857%;
}
.row-cols-md-8 > * {
flex: 0 0 auto;
width: 12.5%;
}
.row-cols-md-9 > * {
flex: 0 0 auto;
width: 11.1111111111%;
}
.row-cols-md-10 > * {
flex: 0 0 auto;
width: 10%;
}
.row-cols-md-11 > * {
flex: 0 0 auto;
width: 9.0909090909%;
}
.row-cols-md-12 > * {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-md-auto {
flex: 0 0 auto;
width: auto;
}
.col-md-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-md-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-md-3 {
flex: 0 0 auto;
width: 25%;
}
.col-md-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-md-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-md-6 {
flex: 0 0 auto;
width: 50%;
}
.col-md-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-md-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-md-9 {
flex: 0 0 auto;
width: 75%;
}
.col-md-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-md-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-md-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-md-0 {
margin-left: 0;
}
.offset-md-1 {
margin-left: 8.3333333333%;
}
.offset-md-2 {
margin-left: 16.6666666667%;
}
.offset-md-3 {
margin-left: 25%;
}
.offset-md-4 {
margin-left: 33.3333333333%;
}
.offset-md-5 {
margin-left: 41.6666666667%;
}
.offset-md-6 {
margin-left: 50%;
}
.offset-md-7 {
margin-left: 58.3333333333%;
}
.offset-md-8 {
margin-left: 66.6666666667%;
}
.offset-md-9 {
margin-left: 75%;
}
.offset-md-10 {
margin-left: 83.3333333333%;
}
.offset-md-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 992px) {
.col-lg {
flex: 1 0 0%;
}
.row-cols-lg-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-lg-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-lg-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-lg-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-lg-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-lg-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-lg-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.row-cols-lg-7 > * {
flex: 0 0 auto;
width: 14.2857142857%;
}
.row-cols-lg-8 > * {
flex: 0 0 auto;
width: 12.5%;
}
.row-cols-lg-9 > * {
flex: 0 0 auto;
width: 11.1111111111%;
}
.row-cols-lg-10 > * {
flex: 0 0 auto;
width: 10%;
}
.row-cols-lg-11 > * {
flex: 0 0 auto;
width: 9.0909090909%;
}
.row-cols-lg-12 > * {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-lg-auto {
flex: 0 0 auto;
width: auto;
}
.col-lg-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-lg-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-lg-3 {
flex: 0 0 auto;
width: 25%;
}
.col-lg-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-lg-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-lg-6 {
flex: 0 0 auto;
width: 50%;
}
.col-lg-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-lg-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-lg-9 {
flex: 0 0 auto;
width: 75%;
}
.col-lg-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-lg-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-lg-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-lg-0 {
margin-left: 0;
}
.offset-lg-1 {
margin-left: 8.3333333333%;
}
.offset-lg-2 {
margin-left: 16.6666666667%;
}
.offset-lg-3 {
margin-left: 25%;
}
.offset-lg-4 {
margin-left: 33.3333333333%;
}
.offset-lg-5 {
margin-left: 41.6666666667%;
}
.offset-lg-6 {
margin-left: 50%;
}
.offset-lg-7 {
margin-left: 58.3333333333%;
}
.offset-lg-8 {
margin-left: 66.6666666667%;
}
.offset-lg-9 {
margin-left: 75%;
}
.offset-lg-10 {
margin-left: 83.3333333333%;
}
.offset-lg-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 1200px) {
.col-xl {
flex: 1 0 0%;
}
.row-cols-xl-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-xl-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-xl-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-xl-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-xl-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-xl-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-xl-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.row-cols-xl-7 > * {
flex: 0 0 auto;
width: 14.2857142857%;
}
.row-cols-xl-8 > * {
flex: 0 0 auto;
width: 12.5%;
}
.row-cols-xl-9 > * {
flex: 0 0 auto;
width: 11.1111111111%;
}
.row-cols-xl-10 > * {
flex: 0 0 auto;
width: 10%;
}
.row-cols-xl-11 > * {
flex: 0 0 auto;
width: 9.0909090909%;
}
.row-cols-xl-12 > * {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-xl-auto {
flex: 0 0 auto;
width: auto;
}
.col-xl-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-xl-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-xl-3 {
flex: 0 0 auto;
width: 25%;
}
.col-xl-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-xl-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-xl-6 {
flex: 0 0 auto;
width: 50%;
}
.col-xl-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-xl-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-xl-9 {
flex: 0 0 auto;
width: 75%;
}
.col-xl-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-xl-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-xl-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-xl-0 {
margin-left: 0;
}
.offset-xl-1 {
margin-left: 8.3333333333%;
}
.offset-xl-2 {
margin-left: 16.6666666667%;
}
.offset-xl-3 {
margin-left: 25%;
}
.offset-xl-4 {
margin-left: 33.3333333333%;
}
.offset-xl-5 {
margin-left: 41.6666666667%;
}
.offset-xl-6 {
margin-left: 50%;
}
.offset-xl-7 {
margin-left: 58.3333333333%;
}
.offset-xl-8 {
margin-left: 66.6666666667%;
}
.offset-xl-9 {
margin-left: 75%;
}
.offset-xl-10 {
margin-left: 83.3333333333%;
}
.offset-xl-11 {
margin-left: 91.6666666667%;
}
}
@media (min-width: 1400px) {
.col-xxl {
flex: 1 0 0%;
}
.row-cols-xxl-auto > * {
flex: 0 0 auto;
width: auto;
}
.row-cols-xxl-1 > * {
flex: 0 0 auto;
width: 100%;
}
.row-cols-xxl-2 > * {
flex: 0 0 auto;
width: 50%;
}
.row-cols-xxl-3 > * {
flex: 0 0 auto;
width: 33.3333333333%;
}
.row-cols-xxl-4 > * {
flex: 0 0 auto;
width: 25%;
}
.row-cols-xxl-5 > * {
flex: 0 0 auto;
width: 20%;
}
.row-cols-xxl-6 > * {
flex: 0 0 auto;
width: 16.6666666667%;
}
.row-cols-xxl-7 > * {
flex: 0 0 auto;
width: 14.2857142857%;
}
.row-cols-xxl-8 > * {
flex: 0 0 auto;
width: 12.5%;
}
.row-cols-xxl-9 > * {
flex: 0 0 auto;
width: 11.1111111111%;
}
.row-cols-xxl-10 > * {
flex: 0 0 auto;
width: 10%;
}
.row-cols-xxl-11 > * {
flex: 0 0 auto;
width: 9.0909090909%;
}
.row-cols-xxl-12 > * {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-xxl-auto {
flex: 0 0 auto;
width: auto;
}
.col-xxl-1 {
flex: 0 0 auto;
width: 8.3333333333%;
}
.col-xxl-2 {
flex: 0 0 auto;
width: 16.6666666667%;
}
.col-xxl-3 {
flex: 0 0 auto;
width: 25%;
}
.col-xxl-4 {
flex: 0 0 auto;
width: 33.3333333333%;
}
.col-xxl-5 {
flex: 0 0 auto;
width: 41.6666666667%;
}
.col-xxl-6 {
flex: 0 0 auto;
width: 50%;
}
.col-xxl-7 {
flex: 0 0 auto;
width: 58.3333333333%;
}
.col-xxl-8 {
flex: 0 0 auto;
width: 66.6666666667%;
}
.col-xxl-9 {
flex: 0 0 auto;
width: 75%;
}
.col-xxl-10 {
flex: 0 0 auto;
width: 83.3333333333%;
}
.col-xxl-11 {
flex: 0 0 auto;
width: 91.6666666667%;
}
.col-xxl-12 {
flex: 0 0 auto;
width: 100%;
}
.offset-xxl-0 {
margin-left: 0;
}
.offset-xxl-1 {
margin-left: 8.3333333333%;
}
.offset-xxl-2 {
margin-left: 16.6666666667%;
}
.offset-xxl-3 {
margin-left: 25%;
}
.offset-xxl-4 {
margin-left: 33.3333333333%;
}
.offset-xxl-5 {
margin-left: 41.6666666667%;
}
.offset-xxl-6 {
margin-left: 50%;
}
.offset-xxl-7 {
margin-left: 58.3333333333%;
}
.offset-xxl-8 {
margin-left: 66.6666666667%;
}
.offset-xxl-9 {
margin-left: 75%;
}
.offset-xxl-10 {
margin-left: 83.3333333333%;
}
.offset-xxl-11 {
margin-left: 91.6666666667%;
}
}
.grid,
.fieldset,
fieldset {
--grid-columns:12;
display: grid;
grid-auto-rows: min-content;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(var(--grid-columns, 12), 1fr);
}
.grid.g-auto-cols-1,
.fieldset.g-auto-cols-1,
fieldset.g-auto-cols-1 {
--grid-columns: 1;
}
.grid.g-auto-cols-1 legend *,
.fieldset.g-auto-cols-1 legend *,
fieldset.g-auto-cols-1 legend * {
grid-column: auto/span 1;
}
.grid.g-auto-cols-2,
.fieldset.g-auto-cols-2,
fieldset.g-auto-cols-2 {
--grid-columns: 2;
}
.grid.g-auto-cols-2 legend *,
.fieldset.g-auto-cols-2 legend *,
fieldset.g-auto-cols-2 legend * {
grid-column: auto/span 2;
}
.grid.g-auto-cols-3,
.fieldset.g-auto-cols-3,
fieldset.g-auto-cols-3 {
--grid-columns: 3;
}
.grid.g-auto-cols-3 legend *,
.fieldset.g-auto-cols-3 legend *,
fieldset.g-auto-cols-3 legend * {
grid-column: auto/span 3;
}
.grid.g-auto-cols-4,
.fieldset.g-auto-cols-4,
fieldset.g-auto-cols-4 {
--grid-columns: 4;
}
.grid.g-auto-cols-4 legend *,
.fieldset.g-auto-cols-4 legend *,
fieldset.g-auto-cols-4 legend * {
grid-column: auto/span 4;
}
.grid.g-auto-cols-5,
.fieldset.g-auto-cols-5,
fieldset.g-auto-cols-5 {
--grid-columns: 5;
}
.grid.g-auto-cols-5 legend *,
.fieldset.g-auto-cols-5 legend *,
fieldset.g-auto-cols-5 legend * {
grid-column: auto/span 5;
}
.grid.g-auto-cols-6,
.fieldset.g-auto-cols-6,
fieldset.g-auto-cols-6 {
--grid-columns: 6;
}
.grid.g-auto-cols-6 legend *,
.fieldset.g-auto-cols-6 legend *,
fieldset.g-auto-cols-6 legend * {
grid-column: auto/span 6;
}
.grid.g-auto-cols-7,
.fieldset.g-auto-cols-7,
fieldset.g-auto-cols-7 {
--grid-columns: 7;
}
.grid.g-auto-cols-7 legend *,
.fieldset.g-auto-cols-7 legend *,
fieldset.g-auto-cols-7 legend * {
grid-column: auto/span 7;
}
.grid.g-auto-cols-8,
.fieldset.g-auto-cols-8,
fieldset.g-auto-cols-8 {
--grid-columns: 8;
}
.grid.g-auto-cols-8 legend *,
.fieldset.g-auto-cols-8 legend *,
fieldset.g-auto-cols-8 legend * {
grid-column: auto/span 8;
}
.grid.g-auto-cols-9,
.fieldset.g-auto-cols-9,
fieldset.g-auto-cols-9 {
--grid-columns: 9;
}
.grid.g-auto-cols-9 legend *,
.fieldset.g-auto-cols-9 legend *,
fieldset.g-auto-cols-9 legend * {
grid-column: auto/span 9;
}
.grid.g-auto-cols-10,
.fieldset.g-auto-cols-10,
fieldset.g-auto-cols-10 {
--grid-columns: 10;
}
.grid.g-auto-cols-10 legend *,
.fieldset.g-auto-cols-10 legend *,
fieldset.g-auto-cols-10 legend * {
grid-column: auto/span 10;
}
.grid.g-auto-cols-11,
.fieldset.g-auto-cols-11,
fieldset.g-auto-cols-11 {
--grid-columns: 11;
}
.grid.g-auto-cols-11 legend *,
.fieldset.g-auto-cols-11 legend *,
fieldset.g-auto-cols-11 legend * {
grid-column: auto/span 11;
}
.grid.g-auto-cols-12,
.fieldset.g-auto-cols-12,
fieldset.g-auto-cols-12 {
--grid-columns: 12;
}
.grid.g-auto-cols-12 legend *,
.fieldset.g-auto-cols-12 legend *,
fieldset.g-auto-cols-12 legend * {
grid-column: auto/span 12;
}
.grid .g-col-1,
.fieldset .g-col-1,
fieldset .g-col-1 {
grid-column: auto/span 1;
}
.grid .g-col-1 legend *,
.fieldset .g-col-1 legend *,
fieldset .g-col-1 legend * {
grid-column: auto/span 1;
}
.grid .g-col-2,
.fieldset .g-col-2,
fieldset .g-col-2 {
grid-column: auto/span 2;
}
.grid .g-col-2 legend *,
.fieldset .g-col-2 legend *,
fieldset .g-col-2 legend * {
grid-column: auto/span 2;
}
.grid .g-col-3,
.fieldset .g-col-3,
fieldset .g-col-3 {
grid-column: auto/span 3;
}
.grid .g-col-3 legend *,
.fieldset .g-col-3 legend *,
fieldset .g-col-3 legend * {
grid-column: auto/span 3;
}
.grid .g-col-4,
.fieldset .g-col-4,
fieldset .g-col-4 {
grid-column: auto/span 4;
}
.grid .g-col-4 legend *,
.fieldset .g-col-4 legend *,
fieldset .g-col-4 legend * {
grid-column: auto/span 4;
}
.grid .g-col-5,
.fieldset .g-col-5,
fieldset .g-col-5 {
grid-column: auto/span 5;
}
.grid .g-col-5 legend *,
.fieldset .g-col-5 legend *,
fieldset .g-col-5 legend * {
grid-column: auto/span 5;
}
.grid .g-col-6,
.fieldset .g-col-6,
fieldset .g-col-6 {
grid-column: auto/span 6;
}
.grid .g-col-6 legend *,
.fieldset .g-col-6 legend *,
fieldset .g-col-6 legend * {
grid-column: auto/span 6;
}
.grid .g-col-7,
.fieldset .g-col-7,
fieldset .g-col-7 {
grid-column: auto/span 7;
}
.grid .g-col-7 legend *,
.fieldset .g-col-7 legend *,
fieldset .g-col-7 legend * {
grid-column: auto/span 7;
}
.grid .g-col-8,
.fieldset .g-col-8,
fieldset .g-col-8 {
grid-column: auto/span 8;
}
.grid .g-col-8 legend *,
.fieldset .g-col-8 legend *,
fieldset .g-col-8 legend * {
grid-column: auto/span 8;
}
.grid .g-col-9,
.fieldset .g-col-9,
fieldset .g-col-9 {
grid-column: auto/span 9;
}
.grid .g-col-9 legend *,
.fieldset .g-col-9 legend *,
fieldset .g-col-9 legend * {
grid-column: auto/span 9;
}
.grid .g-col-10,
.fieldset .g-col-10,
fieldset .g-col-10 {
grid-column: auto/span 10;
}
.grid .g-col-10 legend *,
.fieldset .g-col-10 legend *,
fieldset .g-col-10 legend * {
grid-column: auto/span 10;
}
.grid .g-col-11,
.fieldset .g-col-11,
fieldset .g-col-11 {
grid-column: auto/span 11;
}
.grid .g-col-11 legend *,
.fieldset .g-col-11 legend *,
fieldset .g-col-11 legend * {
grid-column: auto/span 11;
}
.grid .g-col-12,
.fieldset .g-col-12,
fieldset .g-col-12 {
grid-column: auto/span 12;
}
.grid .g-col-12 legend *,
.fieldset .g-col-12 legend *,
fieldset .g-col-12 legend * {
grid-column: auto/span 12;
}
.grid .g-start-1,
.fieldset .g-start-1,
fieldset .g-start-1 {
grid-column-start: 1;
}
.grid .g-start-2,
.fieldset .g-start-2,
fieldset .g-start-2 {
grid-column-start: 2;
}
.grid .g-start-3,
.fieldset .g-start-3,
fieldset .g-start-3 {
grid-column-start: 3;
}
.grid .g-start-4,
.fieldset .g-start-4,
fieldset .g-start-4 {
grid-column-start: 4;
}
.grid .g-start-5,
.fieldset .g-start-5,
fieldset .g-start-5 {
grid-column-start: 5;
}
.grid .g-start-6,
.fieldset .g-start-6,
fieldset .g-start-6 {
grid-column-start: 6;
}
.grid .g-start-7,
.fieldset .g-start-7,
fieldset .g-start-7 {
grid-column-start: 7;
}
.grid .g-start-8,
.fieldset .g-start-8,
fieldset .g-start-8 {
grid-column-start: 8;
}
.grid .g-start-9,
.fieldset .g-start-9,
fieldset .g-start-9 {
grid-column-start: 9;
}
.grid .g-start-10,
.fieldset .g-start-10,
fieldset .g-start-10 {
grid-column-start: 10;
}
.grid .g-start-11,
.fieldset .g-start-11,
fieldset .g-start-11 {
grid-column-start: 11;
}
@media (min-width: 576px) {
.grid .g-col-sm-1,
.fieldset .g-col-sm-1,
fieldset .g-col-sm-1 {
grid-column: auto/span 1;
}
.grid .g-col-sm-2,
.fieldset .g-col-sm-2,
fieldset .g-col-sm-2 {
grid-column: auto/span 2;
}
.grid .g-col-sm-3,
.fieldset .g-col-sm-3,
fieldset .g-col-sm-3 {
grid-column: auto/span 3;
}
.grid .g-col-sm-4,
.fieldset .g-col-sm-4,
fieldset .g-col-sm-4 {
grid-column: auto/span 4;
}
.grid .g-col-sm-5,
.fieldset .g-col-sm-5,
fieldset .g-col-sm-5 {
grid-column: auto/span 5;
}
.grid .g-col-sm-6,
.fieldset .g-col-sm-6,
fieldset .g-col-sm-6 {
grid-column: auto/span 6;
}
.grid .g-col-sm-7,
.fieldset .g-col-sm-7,
fieldset .g-col-sm-7 {
grid-column: auto/span 7;
}
.grid .g-col-sm-8,
.fieldset .g-col-sm-8,
fieldset .g-col-sm-8 {
grid-column: auto/span 8;
}
.grid .g-col-sm-9,
.fieldset .g-col-sm-9,
fieldset .g-col-sm-9 {
grid-column: auto/span 9;
}
.grid .g-col-sm-10,
.fieldset .g-col-sm-10,
fieldset .g-col-sm-10 {
grid-column: auto/span 10;
}
.grid .g-col-sm-11,
.fieldset .g-col-sm-11,
fieldset .g-col-sm-11 {
grid-column: auto/span 11;
}
.grid .g-col-sm-12,
.fieldset .g-col-sm-12,
fieldset .g-col-sm-12 {
grid-column: auto/span 12;
}
.grid .g-start-sm-1,
.fieldset .g-start-sm-1,
fieldset .g-start-sm-1 {
grid-column-start: 1;
}
.grid .g-start-sm-2,
.fieldset .g-start-sm-2,
fieldset .g-start-sm-2 {
grid-column-start: 2;
}
.grid .g-start-sm-3,
.fieldset .g-start-sm-3,
fieldset .g-start-sm-3 {
grid-column-start: 3;
}
.grid .g-start-sm-4,
.fieldset .g-start-sm-4,
fieldset .g-start-sm-4 {
grid-column-start: 4;
}
.grid .g-start-sm-5,
.fieldset .g-start-sm-5,
fieldset .g-start-sm-5 {
grid-column-start: 5;
}
.grid .g-start-sm-6,
.fieldset .g-start-sm-6,
fieldset .g-start-sm-6 {
grid-column-start: 6;
}
.grid .g-start-sm-7,
.fieldset .g-start-sm-7,
fieldset .g-start-sm-7 {
grid-column-start: 7;
}
.grid .g-start-sm-8,
.fieldset .g-start-sm-8,
fieldset .g-start-sm-8 {
grid-column-start: 8;
}
.grid .g-start-sm-9,
.fieldset .g-start-sm-9,
fieldset .g-start-sm-9 {
grid-column-start: 9;
}
.grid .g-start-sm-10,
.fieldset .g-start-sm-10,
fieldset .g-start-sm-10 {
grid-column-start: 10;
}
.grid .g-start-sm-11,
.fieldset .g-start-sm-11,
fieldset .g-start-sm-11 {
grid-column-start: 11;
}
.grid.g-auto-cols-sm-1,
.fieldset.g-auto-cols-sm-1,
fieldset.g-auto-cols-sm-1 {
--grid-columns: 1;
}
.grid.g-auto-cols-sm-2,
.fieldset.g-auto-cols-sm-2,
fieldset.g-auto-cols-sm-2 {
--grid-columns: 2;
}
.grid.g-auto-cols-sm-3,
.fieldset.g-auto-cols-sm-3,
fieldset.g-auto-cols-sm-3 {
--grid-columns: 3;
}
.grid.g-auto-cols-sm-4,
.fieldset.g-auto-cols-sm-4,
fieldset.g-auto-cols-sm-4 {
--grid-columns: 4;
}
.grid.g-auto-cols-sm-5,
.fieldset.g-auto-cols-sm-5,
fieldset.g-auto-cols-sm-5 {
--grid-columns: 5;
}
.grid.g-auto-cols-sm-6,
.fieldset.g-auto-cols-sm-6,
fieldset.g-auto-cols-sm-6 {
--grid-columns: 6;
}
.grid.g-auto-cols-sm-7,
.fieldset.g-auto-cols-sm-7,
fieldset.g-auto-cols-sm-7 {
--grid-columns: 7;
}
.grid.g-auto-cols-sm-8,
.fieldset.g-auto-cols-sm-8,
fieldset.g-auto-cols-sm-8 {
--grid-columns: 8;
}
.grid.g-auto-cols-sm-9,
.fieldset.g-auto-cols-sm-9,
fieldset.g-auto-cols-sm-9 {
--grid-columns: 9;
}
.grid.g-auto-cols-sm-10,
.fieldset.g-auto-cols-sm-10,
fieldset.g-auto-cols-sm-10 {
--grid-columns: 10;
}
.grid.g-auto-cols-sm-11,
.fieldset.g-auto-cols-sm-11,
fieldset.g-auto-cols-sm-11 {
--grid-columns: 11;
}
.grid.g-auto-cols-sm-12,
.fieldset.g-auto-cols-sm-12,
fieldset.g-auto-cols-sm-12 {
--grid-columns: 12;
}
}
@media (min-width: 768px) {
.grid .g-col-md-1,
.fieldset .g-col-md-1,
fieldset .g-col-md-1 {
grid-column: auto/span 1;
}
.grid .g-col-md-2,
.fieldset .g-col-md-2,
fieldset .g-col-md-2 {
grid-column: auto/span 2;
}
.grid .g-col-md-3,
.fieldset .g-col-md-3,
fieldset .g-col-md-3 {
grid-column: auto/span 3;
}
.grid .g-col-md-4,
.fieldset .g-col-md-4,
fieldset .g-col-md-4 {
grid-column: auto/span 4;
}
.grid .g-col-md-5,
.fieldset .g-col-md-5,
fieldset .g-col-md-5 {
grid-column: auto/span 5;
}
.grid .g-col-md-6,
.fieldset .g-col-md-6,
fieldset .g-col-md-6 {
grid-column: auto/span 6;
}
.grid .g-col-md-7,
.fieldset .g-col-md-7,
fieldset .g-col-md-7 {
grid-column: auto/span 7;
}
.grid .g-col-md-8,
.fieldset .g-col-md-8,
fieldset .g-col-md-8 {
grid-column: auto/span 8;
}
.grid .g-col-md-9,
.fieldset .g-col-md-9,
fieldset .g-col-md-9 {
grid-column: auto/span 9;
}
.grid .g-col-md-10,
.fieldset .g-col-md-10,
fieldset .g-col-md-10 {
grid-column: auto/span 10;
}
.grid .g-col-md-11,
.fieldset .g-col-md-11,
fieldset .g-col-md-11 {
grid-column: auto/span 11;
}
.grid .g-col-md-12,
.fieldset .g-col-md-12,
fieldset .g-col-md-12 {
grid-column: auto/span 12;
}
.grid .g-start-md-1,
.fieldset .g-start-md-1,
fieldset .g-start-md-1 {
grid-column-start: 1;
}
.grid .g-start-md-2,
.fieldset .g-start-md-2,
fieldset .g-start-md-2 {
grid-column-start: 2;
}
.grid .g-start-md-3,
.fieldset .g-start-md-3,
fieldset .g-start-md-3 {
grid-column-start: 3;
}
.grid .g-start-md-4,
.fieldset .g-start-md-4,
fieldset .g-start-md-4 {
grid-column-start: 4;
}
.grid .g-start-md-5,
.fieldset .g-start-md-5,
fieldset .g-start-md-5 {
grid-column-start: 5;
}
.grid .g-start-md-6,
.fieldset .g-start-md-6,
fieldset .g-start-md-6 {
grid-column-start: 6;
}
.grid .g-start-md-7,
.fieldset .g-start-md-7,
fieldset .g-start-md-7 {
grid-column-start: 7;
}
.grid .g-start-md-8,
.fieldset .g-start-md-8,
fieldset .g-start-md-8 {
grid-column-start: 8;
}
.grid .g-start-md-9,
.fieldset .g-start-md-9,
fieldset .g-start-md-9 {
grid-column-start: 9;
}
.grid .g-start-md-10,
.fieldset .g-start-md-10,
fieldset .g-start-md-10 {
grid-column-start: 10;
}
.grid .g-start-md-11,
.fieldset .g-start-md-11,
fieldset .g-start-md-11 {
grid-column-start: 11;
}
.grid.g-auto-cols-md-1,
.fieldset.g-auto-cols-md-1,
fieldset.g-auto-cols-md-1 {
--grid-columns: 1;
}
.grid.g-auto-cols-md-2,
.fieldset.g-auto-cols-md-2,
fieldset.g-auto-cols-md-2 {
--grid-columns: 2;
}
.grid.g-auto-cols-md-3,
.fieldset.g-auto-cols-md-3,
fieldset.g-auto-cols-md-3 {
--grid-columns: 3;
}
.grid.g-auto-cols-md-4,
.fieldset.g-auto-cols-md-4,
fieldset.g-auto-cols-md-4 {
--grid-columns: 4;
}
.grid.g-auto-cols-md-5,
.fieldset.g-auto-cols-md-5,
fieldset.g-auto-cols-md-5 {
--grid-columns: 5;
}
.grid.g-auto-cols-md-6,
.fieldset.g-auto-cols-md-6,
fieldset.g-auto-cols-md-6 {
--grid-columns: 6;
}
.grid.g-auto-cols-md-7,
.fieldset.g-auto-cols-md-7,
fieldset.g-auto-cols-md-7 {
--grid-columns: 7;
}
.grid.g-auto-cols-md-8,
.fieldset.g-auto-cols-md-8,
fieldset.g-auto-cols-md-8 {
--grid-columns: 8;
}
.grid.g-auto-cols-md-9,
.fieldset.g-auto-cols-md-9,
fieldset.g-auto-cols-md-9 {
--grid-columns: 9;
}
.grid.g-auto-cols-md-10,
.fieldset.g-auto-cols-md-10,
fieldset.g-auto-cols-md-10 {
--grid-columns: 10;
}
.grid.g-auto-cols-md-11,
.fieldset.g-auto-cols-md-11,
fieldset.g-auto-cols-md-11 {
--grid-columns: 11;
}
.grid.g-auto-cols-md-12,
.fieldset.g-auto-cols-md-12,
fieldset.g-auto-cols-md-12 {
--grid-columns: 12;
}
}
@media (min-width: 992px) {
.grid .g-col-lg-1,
.fieldset .g-col-lg-1,
fieldset .g-col-lg-1 {
grid-column: auto/span 1;
}
.grid .g-col-lg-2,
.fieldset .g-col-lg-2,
fieldset .g-col-lg-2 {
grid-column: auto/span 2;
}
.grid .g-col-lg-3,
.fieldset .g-col-lg-3,
fieldset .g-col-lg-3 {
grid-column: auto/span 3;
}
.grid .g-col-lg-4,
.fieldset .g-col-lg-4,
fieldset .g-col-lg-4 {
grid-column: auto/span 4;
}
.grid .g-col-lg-5,
.fieldset .g-col-lg-5,
fieldset .g-col-lg-5 {
grid-column: auto/span 5;
}
.grid .g-col-lg-6,
.fieldset .g-col-lg-6,
fieldset .g-col-lg-6 {
grid-column: auto/span 6;
}
.grid .g-col-lg-7,
.fieldset .g-col-lg-7,
fieldset .g-col-lg-7 {
grid-column: auto/span 7;
}
.grid .g-col-lg-8,
.fieldset .g-col-lg-8,
fieldset .g-col-lg-8 {
grid-column: auto/span 8;
}
.grid .g-col-lg-9,
.fieldset .g-col-lg-9,
fieldset .g-col-lg-9 {
grid-column: auto/span 9;
}
.grid .g-col-lg-10,
.fieldset .g-col-lg-10,
fieldset .g-col-lg-10 {
grid-column: auto/span 10;
}
.grid .g-col-lg-11,
.fieldset .g-col-lg-11,
fieldset .g-col-lg-11 {
grid-column: auto/span 11;
}
.grid .g-col-lg-12,
.fieldset .g-col-lg-12,
fieldset .g-col-lg-12 {
grid-column: auto/span 12;
}
.grid .g-start-lg-1,
.fieldset .g-start-lg-1,
fieldset .g-start-lg-1 {
grid-column-start: 1;
}
.grid .g-start-lg-2,
.fieldset .g-start-lg-2,
fieldset .g-start-lg-2 {
grid-column-start: 2;
}
.grid .g-start-lg-3,
.fieldset .g-start-lg-3,
fieldset .g-start-lg-3 {
grid-column-start: 3;
}
.grid .g-start-lg-4,
.fieldset .g-start-lg-4,
fieldset .g-start-lg-4 {
grid-column-start: 4;
}
.grid .g-start-lg-5,
.fieldset .g-start-lg-5,
fieldset .g-start-lg-5 {
grid-column-start: 5;
}
.grid .g-start-lg-6,
.fieldset .g-start-lg-6,
fieldset .g-start-lg-6 {
grid-column-start: 6;
}
.grid .g-start-lg-7,
.fieldset .g-start-lg-7,
fieldset .g-start-lg-7 {
grid-column-start: 7;
}
.grid .g-start-lg-8,
.fieldset .g-start-lg-8,
fieldset .g-start-lg-8 {
grid-column-start: 8;
}
.grid .g-start-lg-9,
.fieldset .g-start-lg-9,
fieldset .g-start-lg-9 {
grid-column-start: 9;
}
.grid .g-start-lg-10,
.fieldset .g-start-lg-10,
fieldset .g-start-lg-10 {
grid-column-start: 10;
}
.grid .g-start-lg-11,
.fieldset .g-start-lg-11,
fieldset .g-start-lg-11 {
grid-column-start: 11;
}
.grid.g-auto-cols-lg-1,
.fieldset.g-auto-cols-lg-1,
fieldset.g-auto-cols-lg-1 {
--grid-columns: 1;
}
.grid.g-auto-cols-lg-2,
.fieldset.g-auto-cols-lg-2,
fieldset.g-auto-cols-lg-2 {
--grid-columns: 2;
}
.grid.g-auto-cols-lg-3,
.fieldset.g-auto-cols-lg-3,
fieldset.g-auto-cols-lg-3 {
--grid-columns: 3;
}
.grid.g-auto-cols-lg-4,
.fieldset.g-auto-cols-lg-4,
fieldset.g-auto-cols-lg-4 {
--grid-columns: 4;
}
.grid.g-auto-cols-lg-5,
.fieldset.g-auto-cols-lg-5,
fieldset.g-auto-cols-lg-5 {
--grid-columns: 5;
}
.grid.g-auto-cols-lg-6,
.fieldset.g-auto-cols-lg-6,
fieldset.g-auto-cols-lg-6 {
--grid-columns: 6;
}
.grid.g-auto-cols-lg-7,
.fieldset.g-auto-cols-lg-7,
fieldset.g-auto-cols-lg-7 {
--grid-columns: 7;
}
.grid.g-auto-cols-lg-8,
.fieldset.g-auto-cols-lg-8,
fieldset.g-auto-cols-lg-8 {
--grid-columns: 8;
}
.grid.g-auto-cols-lg-9,
.fieldset.g-auto-cols-lg-9,
fieldset.g-auto-cols-lg-9 {
--grid-columns: 9;
}
.grid.g-auto-cols-lg-10,
.fieldset.g-auto-cols-lg-10,
fieldset.g-auto-cols-lg-10 {
--grid-columns: 10;
}
.grid.g-auto-cols-lg-11,
.fieldset.g-auto-cols-lg-11,
fieldset.g-auto-cols-lg-11 {
--grid-columns: 11;
}
.grid.g-auto-cols-lg-12,
.fieldset.g-auto-cols-lg-12,
fieldset.g-auto-cols-lg-12 {
--grid-columns: 12;
}
}
@media (min-width: 1200px) {
.grid .g-col-xl-1,
.fieldset .g-col-xl-1,
fieldset .g-col-xl-1 {
grid-column: auto/span 1;
}
.grid .g-col-xl-2,
.fieldset .g-col-xl-2,
fieldset .g-col-xl-2 {
grid-column: auto/span 2;
}
.grid .g-col-xl-3,
.fieldset .g-col-xl-3,
fieldset .g-col-xl-3 {
grid-column: auto/span 3;
}
.grid .g-col-xl-4,
.fieldset .g-col-xl-4,
fieldset .g-col-xl-4 {
grid-column: auto/span 4;
}
.grid .g-col-xl-5,
.fieldset .g-col-xl-5,
fieldset .g-col-xl-5 {
grid-column: auto/span 5;
}
.grid .g-col-xl-6,
.fieldset .g-col-xl-6,
fieldset .g-col-xl-6 {
grid-column: auto/span 6;
}
.grid .g-col-xl-7,
.fieldset .g-col-xl-7,
fieldset .g-col-xl-7 {
grid-column: auto/span 7;
}
.grid .g-col-xl-8,
.fieldset .g-col-xl-8,
fieldset .g-col-xl-8 {
grid-column: auto/span 8;
}
.grid .g-col-xl-9,
.fieldset .g-col-xl-9,
fieldset .g-col-xl-9 {
grid-column: auto/span 9;
}
.grid .g-col-xl-10,
.fieldset .g-col-xl-10,
fieldset .g-col-xl-10 {
grid-column: auto/span 10;
}
.grid .g-col-xl-11,
.fieldset .g-col-xl-11,
fieldset .g-col-xl-11 {
grid-column: auto/span 11;
}
.grid .g-col-xl-12,
.fieldset .g-col-xl-12,
fieldset .g-col-xl-12 {
grid-column: auto/span 12;
}
.grid .g-start-xl-1,
.fieldset .g-start-xl-1,
fieldset .g-start-xl-1 {
grid-column-start: 1;
}
.grid .g-start-xl-2,
.fieldset .g-start-xl-2,
fieldset .g-start-xl-2 {
grid-column-start: 2;
}
.grid .g-start-xl-3,
.fieldset .g-start-xl-3,
fieldset .g-start-xl-3 {
grid-column-start: 3;
}
.grid .g-start-xl-4,
.fieldset .g-start-xl-4,
fieldset .g-start-xl-4 {
grid-column-start: 4;
}
.grid .g-start-xl-5,
.fieldset .g-start-xl-5,
fieldset .g-start-xl-5 {
grid-column-start: 5;
}
.grid .g-start-xl-6,
.fieldset .g-start-xl-6,
fieldset .g-start-xl-6 {
grid-column-start: 6;
}
.grid .g-start-xl-7,
.fieldset .g-start-xl-7,
fieldset .g-start-xl-7 {
grid-column-start: 7;
}
.grid .g-start-xl-8,
.fieldset .g-start-xl-8,
fieldset .g-start-xl-8 {
grid-column-start: 8;
}
.grid .g-start-xl-9,
.fieldset .g-start-xl-9,
fieldset .g-start-xl-9 {
grid-column-start: 9;
}
.grid .g-start-xl-10,
.fieldset .g-start-xl-10,
fieldset .g-start-xl-10 {
grid-column-start: 10;
}
.grid .g-start-xl-11,
.fieldset .g-start-xl-11,
fieldset .g-start-xl-11 {
grid-column-start: 11;
}
.grid.g-auto-cols-xl-1,
.fieldset.g-auto-cols-xl-1,
fieldset.g-auto-cols-xl-1 {
--grid-columns: 1;
}
.grid.g-auto-cols-xl-2,
.fieldset.g-auto-cols-xl-2,
fieldset.g-auto-cols-xl-2 {
--grid-columns: 2;
}
.grid.g-auto-cols-xl-3,
.fieldset.g-auto-cols-xl-3,
fieldset.g-auto-cols-xl-3 {
--grid-columns: 3;
}
.grid.g-auto-cols-xl-4,
.fieldset.g-auto-cols-xl-4,
fieldset.g-auto-cols-xl-4 {
--grid-columns: 4;
}
.grid.g-auto-cols-xl-5,
.fieldset.g-auto-cols-xl-5,
fieldset.g-auto-cols-xl-5 {
--grid-columns: 5;
}
.grid.g-auto-cols-xl-6,
.fieldset.g-auto-cols-xl-6,
fieldset.g-auto-cols-xl-6 {
--grid-columns: 6;
}
.grid.g-auto-cols-xl-7,
.fieldset.g-auto-cols-xl-7,
fieldset.g-auto-cols-xl-7 {
--grid-columns: 7;
}
.grid.g-auto-cols-xl-8,
.fieldset.g-auto-cols-xl-8,
fieldset.g-auto-cols-xl-8 {
--grid-columns: 8;
}
.grid.g-auto-cols-xl-9,
.fieldset.g-auto-cols-xl-9,
fieldset.g-auto-cols-xl-9 {
--grid-columns: 9;
}
.grid.g-auto-cols-xl-10,
.fieldset.g-auto-cols-xl-10,
fieldset.g-auto-cols-xl-10 {
--grid-columns: 10;
}
.grid.g-auto-cols-xl-11,
.fieldset.g-auto-cols-xl-11,
fieldset.g-auto-cols-xl-11 {
--grid-columns: 11;
}
.grid.g-auto-cols-xl-12,
.fieldset.g-auto-cols-xl-12,
fieldset.g-auto-cols-xl-12 {
--grid-columns: 12;
}
}
@media (min-width: 1400px) {
.grid .g-col-xxl-1,
.fieldset .g-col-xxl-1,
fieldset .g-col-xxl-1 {
grid-column: auto/span 1;
}
.grid .g-col-xxl-2,
.fieldset .g-col-xxl-2,
fieldset .g-col-xxl-2 {
grid-column: auto/span 2;
}
.grid .g-col-xxl-3,
.fieldset .g-col-xxl-3,
fieldset .g-col-xxl-3 {
grid-column: auto/span 3;
}
.grid .g-col-xxl-4,
.fieldset .g-col-xxl-4,
fieldset .g-col-xxl-4 {
grid-column: auto/span 4;
}
.grid .g-col-xxl-5,
.fieldset .g-col-xxl-5,
fieldset .g-col-xxl-5 {
grid-column: auto/span 5;
}
.grid .g-col-xxl-6,
.fieldset .g-col-xxl-6,
fieldset .g-col-xxl-6 {
grid-column: auto/span 6;
}
.grid .g-col-xxl-7,
.fieldset .g-col-xxl-7,
fieldset .g-col-xxl-7 {
grid-column: auto/span 7;
}
.grid .g-col-xxl-8,
.fieldset .g-col-xxl-8,
fieldset .g-col-xxl-8 {
grid-column: auto/span 8;
}
.grid .g-col-xxl-9,
.fieldset .g-col-xxl-9,
fieldset .g-col-xxl-9 {
grid-column: auto/span 9;
}
.grid .g-col-xxl-10,
.fieldset .g-col-xxl-10,
fieldset .g-col-xxl-10 {
grid-column: auto/span 10;
}
.grid .g-col-xxl-11,
.fieldset .g-col-xxl-11,
fieldset .g-col-xxl-11 {
grid-column: auto/span 11;
}
.grid .g-col-xxl-12,
.fieldset .g-col-xxl-12,
fieldset .g-col-xxl-12 {
grid-column: auto/span 12;
}
.grid .g-start-xxl-1,
.fieldset .g-start-xxl-1,
fieldset .g-start-xxl-1 {
grid-column-start: 1;
}
.grid .g-start-xxl-2,
.fieldset .g-start-xxl-2,
fieldset .g-start-xxl-2 {
grid-column-start: 2;
}
.grid .g-start-xxl-3,
.fieldset .g-start-xxl-3,
fieldset .g-start-xxl-3 {
grid-column-start: 3;
}
.grid .g-start-xxl-4,
.fieldset .g-start-xxl-4,
fieldset .g-start-xxl-4 {
grid-column-start: 4;
}
.grid .g-start-xxl-5,
.fieldset .g-start-xxl-5,
fieldset .g-start-xxl-5 {
grid-column-start: 5;
}
.grid .g-start-xxl-6,
.fieldset .g-start-xxl-6,
fieldset .g-start-xxl-6 {
grid-column-start: 6;
}
.grid .g-start-xxl-7,
.fieldset .g-start-xxl-7,
fieldset .g-start-xxl-7 {
grid-column-start: 7;
}
.grid .g-start-xxl-8,
.fieldset .g-start-xxl-8,
fieldset .g-start-xxl-8 {
grid-column-start: 8;
}
.grid .g-start-xxl-9,
.fieldset .g-start-xxl-9,
fieldset .g-start-xxl-9 {
grid-column-start: 9;
}
.grid .g-start-xxl-10,
.fieldset .g-start-xxl-10,
fieldset .g-start-xxl-10 {
grid-column-start: 10;
}
.grid .g-start-xxl-11,
.fieldset .g-start-xxl-11,
fieldset .g-start-xxl-11 {
grid-column-start: 11;
}
.grid.g-auto-cols-xxl-1,
.fieldset.g-auto-cols-xxl-1,
fieldset.g-auto-cols-xxl-1 {
--grid-columns: 1;
}
.grid.g-auto-cols-xxl-2,
.fieldset.g-auto-cols-xxl-2,
fieldset.g-auto-cols-xxl-2 {
--grid-columns: 2;
}
.grid.g-auto-cols-xxl-3,
.fieldset.g-auto-cols-xxl-3,
fieldset.g-auto-cols-xxl-3 {
--grid-columns: 3;
}
.grid.g-auto-cols-xxl-4,
.fieldset.g-auto-cols-xxl-4,
fieldset.g-auto-cols-xxl-4 {
--grid-columns: 4;
}
.grid.g-auto-cols-xxl-5,
.fieldset.g-auto-cols-xxl-5,
fieldset.g-auto-cols-xxl-5 {
--grid-columns: 5;
}
.grid.g-auto-cols-xxl-6,
.fieldset.g-auto-cols-xxl-6,
fieldset.g-auto-cols-xxl-6 {
--grid-columns: 6;
}
.grid.g-auto-cols-xxl-7,
.fieldset.g-auto-cols-xxl-7,
fieldset.g-auto-cols-xxl-7 {
--grid-columns: 7;
}
.grid.g-auto-cols-xxl-8,
.fieldset.g-auto-cols-xxl-8,
fieldset.g-auto-cols-xxl-8 {
--grid-columns: 8;
}
.grid.g-auto-cols-xxl-9,
.fieldset.g-auto-cols-xxl-9,
fieldset.g-auto-cols-xxl-9 {
--grid-columns: 9;
}
.grid.g-auto-cols-xxl-10,
.fieldset.g-auto-cols-xxl-10,
fieldset.g-auto-cols-xxl-10 {
--grid-columns: 10;
}
.grid.g-auto-cols-xxl-11,
.fieldset.g-auto-cols-xxl-11,
fieldset.g-auto-cols-xxl-11 {
--grid-columns: 11;
}
.grid.g-auto-cols-xxl-12,
.fieldset.g-auto-cols-xxl-12,
fieldset.g-auto-cols-xxl-12 {
--grid-columns: 12;
}
}
.roundness-0 {
border-radius: var(--roundness-0, 0rem);
}
.roundness-1 {
border-radius: var(--roundness-xxs, 0.25rem);
}
.roundness-2 {
border-radius: var(--roundness-xs, 0.5rem);
}
.roundness-3 {
border-radius: var(--roundness-s, 0.75rem);
}
.roundness-4 {
border-radius: var(--roundness-m, 1rem);
}
.roundness-5 {
border-radius: var(--roundness-l, 1.5rem);
}
.roundness-6 {
border-radius: var(--roundness-xl, 2rem);
}
.roundness-7 {
border-radius: var(--roundness-xxl, 3rem);
}
.roundness-8 {
border-radius: var(--roundness-xxxl, 50%);
}
.m-0 {
margin: var(--space-0, 0rem) !important;
}
.mt-0 {
margin-top: var(--space-0, 0rem) !important;
}
.mb-0 {
margin-bottom: var(--space-0, 0rem) !important;
}
.ms-0 {
margin-left: var(--space-0, 0rem) !important;
}
.me-0 {
margin-right: var(--space-0, 0rem) !important;
}
.mx-0 {
margin-left: var(--space-0, 0rem) !important;
margin-right: var(--space-0, 0rem) !important;
}
.my-0 {
margin-top: var(--space-0, 0rem) !important;
margin-bottom: var(--space-0, 0rem) !important;
}
.p-0 {
padding: var(--space-0, 0rem) !important;
}
.pt-0 {
padding-top: var(--space-0, 0rem) !important;
}
.pb-0 {
padding-bottom: var(--space-0, 0rem) !important;
}
.ps-0 {
padding-left: var(--space-0, 0rem) !important;
}
.pe-0 {
padding-right: var(--space-0, 0rem) !important;
}
.px-0 {
padding-left: var(--space-0, 0rem) !important;
padding-right: var(--space-0, 0rem) !important;
}
.py-0 {
padding-top: var(--space-0, 0rem) !important;
padding-bottom: var(--space-0, 0rem) !important;
}
.gap-0 {
gap: var(--space-0, 0rem) !important;
}
.row-gap-0 {
row-gap: var(--space-0, 0rem) !important;
}
.column-gap-0 {
column-gap: var(--space-0, 0rem) !important;
}
.m-1 {
margin: var(--space-xxs, 0.25rem) !important;
}
.mt-1 {
margin-top: var(--space-xxs, 0.25rem) !important;
}
.mb-1 {
margin-bottom: var(--space-xxs, 0.25rem) !important;
}
.ms-1 {
margin-left: var(--space-xxs, 0.25rem) !important;
}
.me-1 {
margin-right: var(--space-xxs, 0.25rem) !important;
}
.mx-1 {
margin-left: var(--space-xxs, 0.25rem) !important;
margin-right: var(--space-xxs, 0.25rem) !important;
}
.my-1 {
margin-top: var(--space-xxs, 0.25rem) !important;
margin-bottom: var(--space-xxs, 0.25rem) !important;
}
.p-1 {
padding: var(--space-xxs, 0.25rem) !important;
}
.pt-1 {
padding-top: var(--space-xxs, 0.25rem) !important;
}
.pb-1 {
padding-bottom: var(--space-xxs, 0.25rem) !important;
}
.ps-1 {
padding-left: var(--space-xxs, 0.25rem) !important;
}
.pe-1 {
padding-right: var(--space-xxs, 0.25rem) !important;
}
.px-1 {
padding-left: var(--space-xxs, 0.25rem) !important;
padding-right: var(--space-xxs, 0.25rem) !important;
}
.py-1 {
padding-top: var(--space-xxs, 0.25rem) !important;
padding-bottom: var(--space-xxs, 0.25rem) !important;
}
.gap-1 {
gap: var(--space-xxs, 0.25rem) !important;
}
.row-gap-1 {
row-gap: var(--space-xxs, 0.25rem) !important;
}
.column-gap-1 {
column-gap: var(--space-xxs, 0.25rem) !important;
}
.m-2 {
margin: var(--space-xs, 0.5rem) !important;
}
.mt-2 {
margin-top: var(--space-xs, 0.5rem) !important;
}
.mb-2 {
margin-bottom: var(--space-xs, 0.5rem) !important;
}
.ms-2 {
margin-left: var(--space-xs, 0.5rem) !important;
}
.me-2 {
margin-right: var(--space-xs, 0.5rem) !important;
}
.mx-2 {
margin-left: var(--space-xs, 0.5rem) !important;
margin-right: var(--space-xs, 0.5rem) !important;
}
.my-2 {
margin-top: var(--space-xs, 0.5rem) !important;
margin-bottom: var(--space-xs, 0.5rem) !important;
}
.p-2 {
padding: var(--space-xs, 0.5rem) !important;
}
.pt-2 {
padding-top: var(--space-xs, 0.5rem) !important;
}
.pb-2 {
padding-bottom: var(--space-xs, 0.5rem) !important;
}
.ps-2 {
padding-left: var(--space-xs, 0.5rem) !important;
}
.pe-2 {
padding-right: var(--space-xs, 0.5rem) !important;
}
.px-2 {
padding-left: var(--space-xs, 0.5rem) !important;
padding-right: var(--space-xs, 0.5rem) !important;
}
.py-2 {
padding-top: var(--space-xs, 0.5rem) !important;
padding-bottom: var(--space-xs, 0.5rem) !important;
}
.gap-2 {
gap: var(--space-xs, 0.5rem) !important;
}
.row-gap-2 {
row-gap: var(--space-xs, 0.5rem) !important;
}
.column-gap-2 {
column-gap: var(--space-xs, 0.5rem) !important;
}
.m-3 {
margin: var(--space-s, 0.75rem) !important;
}
.mt-3 {
margin-top: var(--space-s, 0.75rem) !important;
}
.mb-3 {
margin-bottom: var(--space-s, 0.75rem) !important;
}
.ms-3 {
margin-left: var(--space-s, 0.75rem) !important;
}
.me-3 {
margin-right: var(--space-s, 0.75rem) !important;
}
.mx-3 {
margin-left: var(--space-s, 0.75rem) !important;
margin-right: var(--space-s, 0.75rem) !important;
}
.my-3 {
margin-top: var(--space-s, 0.75rem) !important;
margin-bottom: var(--space-s, 0.75rem) !important;
}
.p-3 {
padding: var(--space-s, 0.75rem) !important;
}
.pt-3 {
padding-top: var(--space-s, 0.75rem) !important;
}
.pb-3 {
padding-bottom: var(--space-s, 0.75rem) !important;
}
.ps-3 {
padding-left: var(--space-s, 0.75rem) !important;
}
.pe-3 {
padding-right: var(--space-s, 0.75rem) !important;
}
.px-3 {
padding-left: var(--space-s, 0.75rem) !important;
padding-right: var(--space-s, 0.75rem) !important;
}
.py-3 {
padding-top: var(--space-s, 0.75rem) !important;
padding-bottom: var(--space-s, 0.75rem) !important;
}
.gap-3 {
gap: var(--space-s, 0.75rem) !important;
}
.row-gap-3 {
row-gap: var(--space-s, 0.75rem) !important;
}
.column-gap-3 {
column-gap: var(--space-s, 0.75rem) !important;
}
.m-4 {
margin: var(--space-m, 1rem) !important;
}
.mt-4 {
margin-top: var(--space-m, 1rem) !important;
}
.mb-4 {
margin-bottom: var(--space-m, 1rem) !important;
}
.ms-4 {
margin-left: var(--space-m, 1rem) !important;
}
.me-4 {
margin-right: var(--space-m, 1rem) !important;
}
.mx-4 {
margin-left: var(--space-m, 1rem) !important;
margin-right: var(--space-m, 1rem) !important;
}
.my-4 {
margin-top: var(--space-m, 1rem) !important;
margin-bottom: var(--space-m, 1rem) !important;
}
.p-4 {
padding: var(--space-m, 1rem) !important;
}
.pt-4 {
padding-top: var(--space-m, 1rem) !important;
}
.pb-4 {
padding-bottom: var(--space-m, 1rem) !important;
}
.ps-4 {
padding-left: var(--space-m, 1rem) !important;
}
.pe-4 {
padding-right: var(--space-m, 1rem) !important;
}
.px-4 {
padding-left: var(--space-m, 1rem) !important;
padding-right: var(--space-m, 1rem) !important;
}
.py-4 {
padding-top: var(--space-m, 1rem) !important;
padding-bottom: var(--space-m, 1rem) !important;
}
.gap-4 {
gap: var(--space-m, 1rem) !important;
}
.row-gap-4 {
row-gap: var(--space-m, 1rem) !important;
}
.column-gap-4 {
column-gap: var(--space-m, 1rem) !important;
}
.m-5 {
margin: var(--space-l, 1.5rem) !important;
}
.mt-5 {
margin-top: var(--space-l, 1.5rem) !important;
}
.mb-5 {
margin-bottom: var(--space-l, 1.5rem) !important;
}
.ms-5 {
margin-left: var(--space-l, 1.5rem) !important;
}
.me-5 {
margin-right: var(--space-l, 1.5rem) !important;
}
.mx-5 {
margin-left: var(--space-l, 1.5rem) !important;
margin-right: var(--space-l, 1.5rem) !important;
}
.my-5 {
margin-top: var(--space-l, 1.5rem) !important;
margin-bottom: var(--space-l, 1.5rem) !important;
}
.p-5 {
padding: var(--space-l, 1.5rem) !important;
}
.pt-5 {
padding-top: var(--space-l, 1.5rem) !important;
}
.pb-5 {
padding-bottom: var(--space-l, 1.5rem) !important;
}
.ps-5 {
padding-left: var(--space-l, 1.5rem) !important;
}
.pe-5 {
padding-right: var(--space-l, 1.5rem) !important;
}
.px-5 {
padding-left: var(--space-l, 1.5rem) !important;
padding-right: var(--space-l, 1.5rem) !important;
}
.py-5 {
padding-top: var(--space-l, 1.5rem) !important;
padding-bottom: var(--space-l, 1.5rem) !important;
}
.gap-5 {
gap: var(--space-l, 1.5rem) !important;
}
.row-gap-5 {
row-gap: var(--space-l, 1.5rem) !important;
}
.column-gap-5 {
column-gap: var(--space-l, 1.5rem) !important;
}
.m-6 {
margin: var(--space-xl, 2rem) !important;
}
.mt-6 {
margin-top: var(--space-xl, 2rem) !important;
}
.mb-6 {
margin-bottom: var(--space-xl, 2rem) !important;
}
.ms-6 {
margin-left: var(--space-xl, 2rem) !important;
}
.me-6 {
margin-right: var(--space-xl, 2rem) !important;
}
.mx-6 {
margin-left: var(--space-xl, 2rem) !important;
margin-right: var(--space-xl, 2rem) !important;
}
.my-6 {
margin-top: var(--space-xl, 2rem) !important;
margin-bottom: var(--space-xl, 2rem) !important;
}
.p-6 {
padding: var(--space-xl, 2rem) !important;
}
.pt-6 {
padding-top: var(--space-xl, 2rem) !important;
}
.pb-6 {
padding-bottom: var(--space-xl, 2rem) !important;
}
.ps-6 {
padding-left: var(--space-xl, 2rem) !important;
}
.pe-6 {
padding-right: var(--space-xl, 2rem) !important;
}
.px-6 {
padding-left: var(--space-xl, 2rem) !important;
padding-right: var(--space-xl, 2rem) !important;
}
.py-6 {
padding-top: var(--space-xl, 2rem) !important;
padding-bottom: var(--space-xl, 2rem) !important;
}
.gap-6 {
gap: var(--space-xl, 2rem) !important;
}
.row-gap-6 {
row-gap: var(--space-xl, 2rem) !important;
}
.column-gap-6 {
column-gap: var(--space-xl, 2rem) !important;
}
.m-7 {
margin: var(--space-xxl, 3rem) !important;
}
.mt-7 {
margin-top: var(--space-xxl, 3rem) !important;
}
.mb-7 {
margin-bottom: var(--space-xxl, 3rem) !important;
}
.ms-7 {
margin-left: var(--space-xxl, 3rem) !important;
}
.me-7 {
margin-right: var(--space-xxl, 3rem) !important;
}
.mx-7 {
margin-left: var(--space-xxl, 3rem) !important;
margin-right: var(--space-xxl, 3rem) !important;
}
.my-7 {
margin-top: var(--space-xxl, 3rem) !important;
margin-bottom: var(--space-xxl, 3rem) !important;
}
.p-7 {
padding: var(--space-xxl, 3rem) !important;
}
.pt-7 {
padding-top: var(--space-xxl, 3rem) !important;
}
.pb-7 {
padding-bottom: var(--space-xxl, 3rem) !important;
}
.ps-7 {
padding-left: var(--space-xxl, 3rem) !important;
}
.pe-7 {
padding-right: var(--space-xxl, 3rem) !important;
}
.px-7 {
padding-left: var(--space-xxl, 3rem) !important;
padding-right: var(--space-xxl, 3rem) !important;
}
.py-7 {
padding-top: var(--space-xxl, 3rem) !important;
padding-bottom: var(--space-xxl, 3rem) !important;
}
.gap-7 {
gap: var(--space-xxl, 3rem) !important;
}
.row-gap-7 {
row-gap: var(--space-xxl, 3rem) !important;
}
.column-gap-7 {
column-gap: var(--space-xxl, 3rem) !important;
}
msb-clearfix,
msb-text-align {
display: contents;
}
.clearfix::after {
content: "";
display: block;
clear: both;
}
.visually-hidden-title {
width: 1px !important;
height: 1px !important;
padding: var(--space-0, 0rem) !important;
margin: -1px !important;
overflow: hidden !important;
white-space: nowrap !important;
border: var(--border-0, 0) !important;
}
.visually-hidden-title:not(caption) {
position: absolute !important;
}
.skip-navigation:not(:focus):not(:focus-within) {
width: 1px !important;
height: 1px !important;
padding: var(--space-0, 0rem) !important;
margin: -1px !important;
overflow: hidden !important;
white-space: nowrap !important;
border: var(--border-0, 0) !important;
}
.skip-navigation:not(:focus):not(:focus-within):not(caption) {
position: absolute !important;
}
.visually-hidden,
.visually-hidden-focusable:not(:focus):not(:focus-within) {
width: 1px !important;
height: 1px !important;
padding: var(--space-0, 0rem) !important;
margin: -1px !important;
overflow: hidden !important;
white-space: nowrap !important;
border: var(--border-0, 0) !important;
}
.visually-hidden:not(caption),
.visually-hidden-focusable:not(:focus):not(:focus-within):not(caption) {
position: absolute !important;
}
.ratio {
position: relative;
width: 100%;
}
.ratio::before {
display: block;
padding-top: var(--aspect-ratio, 100%);
content: "";
}
.ratio > * {
position: absolute;
top: var(--space-0, 0rem);
left: var(--space-0, 0rem);
width: 100%;
height: 100%;
}
.ratio-1x1 {
--aspect-ratio: 100%;
}
.ratio-4x3 {
--aspect-ratio: 75%;
}
.ratio-16x9 {
--aspect-ratio: 56.25%;
}
.ratio-21x9 {
--aspect-ratio: 42.8571428571%;
}
.w-25 {
width: 25% !important;
}
.w-50 {
width: 50% !important;
}
.w-75 {
width: 75% !important;
}
.w-100 {
width: 100% !important;
}
.w-auto {
width: auto !important;
}
.mw-none {
max-width: none !important;
}
.mw-max {
max-width: max-content !important;
}
.mw-min {
max-width: min-content !important;
}
.mw-fit {
max-width: fit-content !important;
}
.mw-stretch {
max-width: -webkit-fill-available !important;
max-width: -moz-available !important;
max-width: stretch !important;
}
.vw-100 {
width: 100vw !important;
}
.min-vw-100 {
min-width: 100vw !important;
}
.h-25 {
height: 25% !important;
}
.h-50 {
height: 50% !important;
}
.h-75 {
height: 75% !important;
}
.h-100 {
height: 100% !important;
}
.h-auto {
height: auto !important;
}
.mh-none {
max-height: none !important;
}
.mh-max {
max-height: max-content !important;
}
.mh-min {
max-height: min-content !important;
}
.mh-fit {
max-height: fit-content !important;
}
.mh-stretch {
max-height: -webkit-fill-available !important;
max-height: -moz-available !important;
max-height: stretch !important;
}
.vh-100 {
height: 100vh !important;
}
.min-vh-100 {
min-height: 100vh;
}
.text-lowercase {
text-transform: lowercase !important;
}
.text-uppercase {
text-transform: uppercase !important;
}
.text-capitalize {
text-transform: capitalize !important;
}
.text-start {
text-align: start !important;
}
.text-center {
text-align: center !important;
}
.text-end {
text-align: end !important;
}
.align-baseline {
vertical-align: baseline;
}
.align-top {
vertical-align: top;
}
.align-middle {
vertical-align: middle;
}
.align-bottom {
vertical-align: bottom;
}
.align-text-top {
vertical-align: text-top;
}
.align-text-bottom {
vertical-align: text-bottom;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-column {
flex-direction: column;
}
.flex-column-reverse {
flex-direction: column-reverse;
}
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.justify-content-evenly {
justify-content: space-evenly !important;
}
.align-items-normal {
align-items: normal !important;
}
.align-items-stretch {
align-items: stretch !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-self-normal {
align-self: normal !important;
}
.align-self-stretch {
align-self: stretch !important;
}
.align-self-center {
align-self: center !important;
}
.align-self-start {
align-self: flex-start !important;
}
.align-self-end {
align-self: flex-end !important;
}
.align-self-baseline {
align-self: baseline !important;
}
.float-start {
float: inline-start !important;
}
.float-end {
float: inline-end !important;
}
.float-none {
float: none !important;
}
.-visible {
visibility: visible;
}
.-invisible {
visibility: hidden;
}
.d-none {
display: none !important;
}
.d-inline {
display: inline !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-inline-grid {
display: inline-grid !important;
}
.d-inline-table {
display: inline-table !important;
}
msb-autocomplete {
display: contents;
}
.autocomplete-items {
position: absolute;
z-index: 100;
border: none;
border-radius: var(--roundness-0, 0rem) var(--roundness-0, 0rem) var(--roundness-s, 0.75rem) var(--roundness-s, 0.75rem);
top: var(--input-height, 2.8125rem);
left: var(--space-0, 0rem);
right: var(--space-0, 0rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
}
.autocomplete-items .item {
display: block;
padding: var(--space-s, 0.75rem);
cursor: pointer;
color: var(--input-value);
background-color: var(--input-bg);
}
.autocomplete-items .item:hover {
color: var(--autocomplete-hover-txt);
background-color: var(--autocomplete-hover-bg);
}
.autocomplete-items .item.active {
color: var(--autocomplete-txt);
background-color: var(--autocomplete-bg);
}
nav.breadcrumbs {
display: flex;
position: relative;
height: auto;
width: 100%;
box-sizing: border-box;
background-color: var(--breadcrumbs-bg);
margin: var(--space-0, 0rem);
font-size: 0.9rem;
}
nav.breadcrumbs .container {
display: flex;
}
nav.breadcrumbs span:not(.current) {
padding: var(--space-m, 1rem) var(--space-xs, 0.5rem);
}
nav.breadcrumbs ol {
list-style: none !important;
display: flex;
flex-wrap: wrap;
margin-bottom: var(--space-xs, 0.5rem);
margin-block: var(--space-0, 0rem);
margin-inline: var(--space-0, 0rem);
padding-inline: var(--space-0, 0rem);
}
nav.breadcrumbs ol li {
display: inline;
padding: var(--space-m, 1rem) var(--space-0, 0rem);
color: var(--body-color);
}
nav.breadcrumbs ol li::marker {
display: none;
}
nav.breadcrumbs ol li a {
color: var(--body-color);
}
nav.breadcrumbs ol li button {
padding-inline: var(--space-0, 0rem);
border: none;
text-decoration: none;
background-color: transparent;
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
font-size: 0.9rem;
color: var(--body-color);
}
nav.breadcrumbs ol li button:focus {
border-radius: var(--roundness-xxs, 0.25rem);
outline-color: var(--link-color);
}
nav.breadcrumbs ol li + li {
padding-left: var(--space-xs, 0.5rem);
}
nav.breadcrumbs ol li + li::before {
float: left;
padding-right: var(--space-xs, 0.5rem);
color: var(--breadcrumbs-divider);
content: "•";
font-weight: 700;
}
nav.breadcrumbs ol li .current {
text-decoration: none;
color: var(--breadcrumbs-current-txt);
}
msb-button-menu {
display: contents;
}
.btn-menu:has(dialog.menu[open]) {
position: relative;
}
.btn-menu dialog.menu {
display: none;
visibility: hidden;
width: 100%;
max-width: 25rem;
min-width: 12rem;
padding: var(--space-m, 1rem);
gap: var(--space-xxs, 0.25rem);
border-radius: var(--roundness-xs, 0.5rem);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-menu-outline);
background: var(--button-menu-bg);
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
box-sizing: border-box;
}
@supports (-webkit-touch-callout: none) {
.btn-menu dialog.menu {
min-width: 0;
flex-shrink: 1;
}
}
.btn-menu dialog.menu[open] {
position: absolute;
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.5rem);
visibility: visible;
margin-right: calc(-1 * var(--space-s, 0.75rem));
top: calc(100% + var(--space-m, 1rem));
}
.btn-menu dialog.menu::after {
content: "";
display: block;
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
top: calc(-1 * var(--space-s, 0.75rem));
bottom: unset;
right: var(--space-m, 1rem);
left: unset;
position: absolute;
background: var(--button-menu-bg);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-menu-outline);
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-menu-outline);
transform: rotate(-45deg);
}
msb-button-select {
display: contents;
}
.btn-select {
box-sizing: border-box;
}
.btn-select:has(dialog[open]) {
position: relative;
}
.btn-select.label-transform > button {
position: relative;
}
.btn-select.label-transform > button span.label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
.btn-select label,
.btn-select select,
.btn-select > svg {
display: none;
visibility: hidden;
}
.btn-select > button {
display: flex;
padding: var(--space-s, 0.75rem);
justify-content: space-between;
align-items: center;
gap: var(--space-s, 0.75rem);
background: var(--button-select-bg) !important;
width: 100%;
}
.btn-select > button span {
display: flex;
flex-direction: row;
gap: var(--space-xs, 0.5rem);
font-size: 1rem;
font-weight: 500;
line-height: 150%;
}
.btn-select > button span.ellipsis {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.btn-select > button span.ellipsis * {
display: inline;
}
.btn-select > button span[data-icon]::before {
content: "";
-webkit-mask-size: cover;
mask-size: cover;
display: flex;
background-color: currentColor;
height: 1.5rem;
width: 1.5rem;
}
.btn-select > button span[data-icon=contrast]::before {
-webkit-mask-image: url('contrast.5cba9c0b2232e723.svg');
mask-image: url('contrast.5cba9c0b2232e723.svg');
}
.btn-select > button span[data-icon=light_mode]::before {
-webkit-mask-image: url('light_mode.7ae2131710cb2dd2.svg');
mask-image: url('light_mode.7ae2131710cb2dd2.svg');
}
.btn-select > button span[data-icon=dark_mode]::before {
-webkit-mask-image: url('dark_mode.f35dd3ae3fb52a43.svg');
mask-image: url('dark_mode.f35dd3ae3fb52a43.svg');
}
.btn-select > button span[data-icon=language]::before {
-webkit-mask-image: url('language.8bbfbd5ed81a33b4.svg');
mask-image: url('language.8bbfbd5ed81a33b4.svg');
}
.btn-select > button:not(:has(svg))::after {
opacity: 1;
content: "";
display: flex;
flex-direction: row;
width: 1rem;
height: 1rem;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 2rem;
mask-size: 2rem;
-webkit-mask-image: var(--button-select-icon);
mask-image: var(--button-select-icon);
background-color: currentColor;
min-width: 1rem;
}
.btn-select dialog {
display: none;
visibility: hidden;
width: 25rem;
max-width: 100%;
padding: var(--space-m, 1rem);
margin-top: var(--space-m, 1rem);
gap: var(--space-xxs, 0.25rem);
border-radius: var(--roundness-xs, 0.5rem);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-select-outline);
background: var(--button-select-bg);
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
}
.btn-select dialog .form-check,
.btn-select dialog button {
width: 100%;
}
.btn-select dialog label {
align-items: self-start;
display: initial;
visibility: initial;
color: var(--button-select-txt);
}
.btn-select dialog label:has(input:disabled) {
pointer-events: none;
color: var(--input-disabled);
}
.btn-select dialog[open] {
position: absolute;
display: flex;
visibility: visible;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
pointer-events: auto;
left: unset;
right: var(--space-0, 0rem);
top: unset;
bottom: unset;
z-index: 100;
}
.btn-select dialog::after {
content: "";
display: block;
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
top: calc(-1 * var(--space-s, 0.75rem));
bottom: unset;
right: var(--space-m, 1rem);
left: unset;
position: absolute;
background: var(--button-select-bg);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-select-outline);
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-select-outline);
transform: rotate(-45deg);
}
.btn-select dialog button {
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
position: unset;
display: block;
background: var(--button-select-bg);
color: var(--button-select-txt);
max-width: calc(25rem - var(--space-m, 1rem) - var(--space-m, 1rem));
font-size: 1rem;
font-weight: 500;
line-height: 150%;
text-align: start;
border-radius: var(--roundness-xs, 0.5rem);
gap: var(--space-s, 0.75rem);
}
.btn-select dialog button * {
padding-top: var(--space-xxs, 0.25rem);
display: inline-block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
max-width: 100%;
}
.btn-select dialog button[data-icon]::before {
content: "";
-webkit-mask-size: cover;
mask-size: cover;
display: flex;
background-color: currentColor;
height: 1.5rem;
width: 1.5rem;
}
.btn-select dialog button[data-icon=contrast]::before {
-webkit-mask-image: url('contrast.5cba9c0b2232e723.svg');
mask-image: url('contrast.5cba9c0b2232e723.svg');
}
.btn-select dialog button[data-icon=light_mode]::before {
-webkit-mask-image: url('light_mode.7ae2131710cb2dd2.svg');
mask-image: url('light_mode.7ae2131710cb2dd2.svg');
}
.btn-select dialog button[data-icon=dark_mode]::before {
-webkit-mask-image: url('dark_mode.f35dd3ae3fb52a43.svg');
mask-image: url('dark_mode.f35dd3ae3fb52a43.svg');
}
.btn-select dialog button:hover {
background-color: var(--button-select-txt-hover);
}
.btn-select dialog button:focus {
outline: none;
border-color: var(--button-select-txt-focus);
}
.btn-select.show-selected dialog button[data-selected] {
position: relative;
}
.btn-select.show-selected dialog button[data-selected]::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: var(--space-0, 0rem);
right: var(--space-0, 0rem);
border-bottom: var(--border-4, 0.25rem) var(--border-style, solid) var(--button-outline-status-color-primary);
}
msb-container-button-toggle,
msb-button-toggle {
display: contents;
}
.toggle-btn-group {
display: flex;
flex-direction: row;
padding: var(--space-xs, 0.5rem);
overflow-x: auto;
}
.toggle-btn-group > input[type=checkbox], .toggle-btn-group > input[type=radio] {
appearance: none;
height: 0px;
width: 0px;
margin: 0px;
padding: 0px;
}
.toggle-btn-group > input[type=checkbox] + label, .toggle-btn-group > input[type=radio] + label {
display: inline-flex;
word-wrap: unset;
white-space: nowrap;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
padding: var(--space-s, 0.75rem);
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
flex-shrink: 0;
text-decoration: none;
outline: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
outline-offset: var(--border-0, 0);
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
background-color: var(--input-bg);
color: var(--input-label);
cursor: pointer;
border-radius: var(--roundness-0, 0rem);
}
.toggle-btn-group > input[type=checkbox] + label > svg, .toggle-btn-group > input[type=radio] + label > svg {
fill: currentColor;
height: 1.5rem;
width: 1.5rem;
}
.toggle-btn-group > input[type=checkbox] + label:first-of-type, .toggle-btn-group > input[type=radio] + label:first-of-type {
padding-left: var(--space-m, 1rem);
border-left-color: var(--input-bg);
border-top-left-radius: var(--roundness-xs, 0.5rem);
border-bottom-left-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group > input[type=checkbox] + label:last-of-type, .toggle-btn-group > input[type=radio] + label:last-of-type {
padding-right: var(--space-m, 1rem);
border-right-color: var(--input-bg);
border-top-right-radius: var(--roundness-xs, 0.5rem);
border-bottom-right-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group > input[type=checkbox]:not(:disabled) + label:hover, .toggle-btn-group > input[type=radio]:not(:disabled) + label:hover {
background: var(--input-select-hover-bg);
opacity: 0.9;
}
.toggle-btn-group > input[type=checkbox]:not(:disabled) + label:active, .toggle-btn-group > input[type=checkbox]:not(:disabled) + label:focus, .toggle-btn-group > input[type=radio]:not(:disabled) + label:active, .toggle-btn-group > input[type=radio]:not(:disabled) + label:focus {
isolation: isolate;
z-index: 1;
outline-color: var(--input-label);
}
.toggle-btn-group > input[type=checkbox]:not(:disabled):is(:checked) + label, .toggle-btn-group > input[type=radio]:not(:disabled):is(:checked) + label {
background: var(--input-label);
color: var(--input-bg);
}
.toggle-btn-group > input[type=checkbox]:not(:disabled):is(:checked) + label:first-of-type, .toggle-btn-group > input[type=radio]:not(:disabled):is(:checked) + label:first-of-type {
border-left-color: var(--input-label);
}
.toggle-btn-group > input[type=checkbox]:not(:disabled):is(:checked) + label:last-of-type, .toggle-btn-group > input[type=radio]:not(:disabled):is(:checked) + label:last-of-type {
border-right-color: var(--input-label);
}
.toggle-btn-group > input[type=checkbox]:not(:disabled):is(:checked):active + label, .toggle-btn-group > input[type=checkbox]:not(:disabled):is(:checked):focus + label, .toggle-btn-group > input[type=radio]:not(:disabled):is(:checked):active + label, .toggle-btn-group > input[type=radio]:not(:disabled):is(:checked):focus + label {
isolation: isolate;
z-index: 1;
outline-color: var(--input-bg);
}
.toggle-btn-group > input[type=checkbox]:not(:disabled):focus:not(:checked) + label, .toggle-btn-group > input[type=radio]:not(:disabled):focus:not(:checked) + label {
isolation: isolate;
z-index: 1;
outline-color: var(--input-label);
opacity: 0.9;
}
.toggle-btn-group > input[type=checkbox]:is(:disabled), .toggle-btn-group > input[type=radio]:is(:disabled) {
pointer-events: none;
cursor: none;
}
.toggle-btn-group > input[type=checkbox]:is(:disabled):not(:checked) + label, .toggle-btn-group > input[type=radio]:is(:disabled):not(:checked) + label {
color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group > input[type=checkbox]:is(:disabled):is(:checked) + label, .toggle-btn-group > input[type=radio]:is(:disabled):is(:checked) + label {
color: var(--button-status-disabled-color);
background-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group > input[type=checkbox]:is(:disabled):is(:checked) + label:first-of-type, .toggle-btn-group > input[type=radio]:is(:disabled):is(:checked) + label:first-of-type {
border-left-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group > input[type=checkbox]:is(:disabled):is(:checked) + label:last-of-type, .toggle-btn-group > input[type=radio]:is(:disabled):is(:checked) + label:last-of-type {
border-right-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group > input[type=checkbox]:is(:disabled):is(:checked):active + label, .toggle-btn-group > input[type=checkbox]:is(:disabled):is(:checked):focus + label, .toggle-btn-group > input[type=radio]:is(:disabled):is(:checked):active + label, .toggle-btn-group > input[type=radio]:is(:disabled):is(:checked):focus + label {
outline-color: var(--button-status-disabled-color);
}
.toggle-btn-group > label {
position: relative;
}
.toggle-btn-group > label:has(input[type=checkbox], input[type=radio]) {
display: inline-flex;
word-wrap: unset;
white-space: nowrap;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
padding: var(--space-s, 0.75rem);
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
flex-shrink: 0;
text-decoration: none;
outline: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
outline-offset: var(--border-0, 0);
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
background-color: var(--input-bg);
color: var(--input-label);
cursor: pointer;
border-radius: var(--roundness-0, 0rem);
}
.toggle-btn-group > label:has(input[type=checkbox], input[type=radio]) > svg {
fill: currentColor;
height: 1.5rem;
width: 1.5rem;
}
.toggle-btn-group > label:has(input[type=checkbox], input[type=radio]):first-of-type {
padding-left: var(--space-m, 1rem);
border-left-color: var(--input-bg);
border-top-left-radius: var(--roundness-xs, 0.5rem);
border-bottom-left-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group > label:has(input[type=checkbox], input[type=radio]):last-of-type {
padding-right: var(--space-m, 1rem);
border-right-color: var(--input-bg);
border-top-right-radius: var(--roundness-xs, 0.5rem);
border-bottom-right-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group > label:has(input[type=checkbox], input[type=radio]) input[type=checkbox], .toggle-btn-group > label:has(input[type=checkbox], input[type=radio]) input[type=radio] {
position: absolute;
appearance: none;
height: 0px;
width: 0px;
margin: 0px;
padding: 0px;
}
.toggle-btn-group > label:has(input[type=checkbox], input[type=radio]) input[type=checkbox]:disabled, .toggle-btn-group > label:has(input[type=checkbox], input[type=radio]) input[type=radio]:disabled {
pointer-events: none;
cursor: none;
outline: none;
}
.toggle-btn-group > label:has(input[type=checkbox]:not(:disabled), input[type=radio]:not(:disabled)):hover {
background: var(--input-select-hover-bg);
opacity: 0.9;
}
.toggle-btn-group > label:has(input[type=checkbox]:not(:disabled), input[type=radio]:not(:disabled)):active, .toggle-btn-group > label:has(input[type=checkbox]:not(:disabled), input[type=radio]:not(:disabled)):focus {
isolation: isolate;
z-index: 1;
outline-color: var(--input-label);
}
.toggle-btn-group > label:has(input[type=checkbox]:not(:disabled):focus, input[type=radio]:not(:disabled):focus) {
isolation: isolate;
z-index: 1;
outline-color: var(--input-label);
}
.toggle-btn-group > label:has(input[type=checkbox]:not(:disabled):is(:checked):focus, input[type=radio]:not(:disabled):is(:checked):focus) {
isolation: isolate;
z-index: 1;
outline-color: var(--input-bg);
}
.toggle-btn-group > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)) {
background: var(--input-label);
color: var(--input-bg);
}
.toggle-btn-group > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)):first-of-type {
border-left-color: var(--input-label);
}
.toggle-btn-group > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)):last-of-type {
border-right-color: var(--input-label);
}
.toggle-btn-group > label:has(input[type=checkbox]:is(:disabled):not(:checked), input[type=radio]:is(:disabled):not(:checked)) {
color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group > label:has(input[type=checkbox]:is(:disabled):is(:checked), input[type=radio]:is(:disabled):is(:checked)) {
color: var(--button-status-disabled-color);
background-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group > label:has(input[type=checkbox]:is(:disabled):is(:checked), input[type=radio]:is(:disabled):is(:checked)):first-of-type {
border-left-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group > label:has(input[type=checkbox]:is(:disabled):is(:checked), input[type=radio]:is(:disabled):is(:checked)):last-of-type {
border-right-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle {
position: relative;
}
.toggle-btn-group msb-button-toggle:focus-visible {
outline: none;
}
.toggle-btn-group msb-button-toggle > input {
position: absolute;
}
.toggle-btn-group msb-button-toggle > input[type=checkbox], .toggle-btn-group msb-button-toggle > input[type=radio] {
appearance: none;
height: 0px;
width: 0px;
margin: 0px;
padding: 0px;
}
.toggle-btn-group msb-button-toggle > input[type=checkbox] + label, .toggle-btn-group msb-button-toggle > input[type=radio] + label {
display: inline-flex;
word-wrap: unset;
white-space: nowrap;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
padding: var(--space-s, 0.75rem);
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
flex-shrink: 0;
text-decoration: none;
outline: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
outline-offset: var(--border-0, 0);
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
background-color: var(--input-bg);
color: var(--input-label);
cursor: pointer;
border-radius: var(--roundness-0, 0rem);
}
.toggle-btn-group msb-button-toggle > input[type=checkbox] + label > svg, .toggle-btn-group msb-button-toggle > input[type=radio] + label > svg {
fill: currentColor;
height: 1.5rem;
width: 1.5rem;
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:not(:disabled) + label:hover, .toggle-btn-group msb-button-toggle > input[type=radio]:not(:disabled) + label:hover {
background: var(--input-select-hover-bg);
opacity: 0.9;
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:not(:disabled) + label:active, .toggle-btn-group msb-button-toggle > input[type=checkbox]:not(:disabled) + label:focus, .toggle-btn-group msb-button-toggle > input[type=radio]:not(:disabled) + label:active, .toggle-btn-group msb-button-toggle > input[type=radio]:not(:disabled) + label:focus {
isolation: isolate;
z-index: 1;
outline-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:not(:disabled):is(:checked) + label, .toggle-btn-group msb-button-toggle > input[type=radio]:not(:disabled):is(:checked) + label {
background: var(--input-label);
color: var(--input-bg);
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:not(:disabled):is(:checked):active + label, .toggle-btn-group msb-button-toggle > input[type=checkbox]:not(:disabled):is(:checked):focus + label, .toggle-btn-group msb-button-toggle > input[type=radio]:not(:disabled):is(:checked):active + label, .toggle-btn-group msb-button-toggle > input[type=radio]:not(:disabled):is(:checked):focus + label {
isolation: isolate;
z-index: 1;
outline-color: var(--input-bg);
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:not(:disabled):focus:not(:checked) + label, .toggle-btn-group msb-button-toggle > input[type=radio]:not(:disabled):focus:not(:checked) + label {
isolation: isolate;
z-index: 1;
outline-color: var(--input-label);
opacity: 0.9;
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:is(:disabled), .toggle-btn-group msb-button-toggle > input[type=radio]:is(:disabled) {
pointer-events: none;
cursor: none;
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:is(:disabled):not(:checked) + label, .toggle-btn-group msb-button-toggle > input[type=radio]:is(:disabled):not(:checked) + label {
color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:is(:disabled):is(:checked) + label, .toggle-btn-group msb-button-toggle > input[type=radio]:is(:disabled):is(:checked) + label {
color: var(--button-status-disabled-color);
background-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle > input[type=checkbox]:is(:disabled):is(:checked):active + label, .toggle-btn-group msb-button-toggle > input[type=checkbox]:is(:disabled):is(:checked):focus + label, .toggle-btn-group msb-button-toggle > input[type=radio]:is(:disabled):is(:checked):active + label, .toggle-btn-group msb-button-toggle > input[type=radio]:is(:disabled):is(:checked):focus + label {
outline-color: var(--button-status-disabled-color);
}
.toggle-btn-group msb-button-toggle > label {
position: relative;
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox], input[type=radio]) {
display: inline-flex;
word-wrap: unset;
white-space: nowrap;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
padding: var(--space-s, 0.75rem);
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
flex-shrink: 0;
text-decoration: none;
outline: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
outline-offset: var(--border-0, 0);
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
background-color: var(--input-bg);
color: var(--input-label);
cursor: pointer;
border-radius: var(--roundness-0, 0rem);
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox], input[type=radio]) > svg {
fill: currentColor;
height: 1.5rem;
width: 1.5rem;
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox], input[type=radio]) input[type=checkbox], .toggle-btn-group msb-button-toggle > label:has(input[type=checkbox], input[type=radio]) input[type=radio] {
position: absolute;
appearance: none;
height: 0px;
width: 0px;
margin: 0px;
padding: 0px;
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox], input[type=radio]) input[type=checkbox]:disabled, .toggle-btn-group msb-button-toggle > label:has(input[type=checkbox], input[type=radio]) input[type=radio]:disabled {
pointer-events: none;
cursor: none;
outline: none;
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:not(:disabled), input[type=radio]:not(:disabled)):hover {
background: var(--input-select-hover-bg);
opacity: 0.9;
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:not(:disabled), input[type=radio]:not(:disabled)):active, .toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:not(:disabled), input[type=radio]:not(:disabled)):focus {
isolation: isolate;
z-index: 1;
outline-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)) {
background: var(--input-label);
color: var(--input-bg);
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)):first-of-type {
border-left-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)):last-of-type {
border-right-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:is(:disabled):not(:checked), input[type=radio]:is(:disabled):not(:checked)) {
color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle > label:has(input[type=checkbox]:is(:disabled):is(:checked), input[type=radio]:is(:disabled):is(:checked)) {
color: var(--button-status-disabled-color);
background-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle:first-of-type > input[type=checkbox] + label, .toggle-btn-group msb-button-toggle:first-of-type > input[type=radio] + label {
padding-left: var(--space-m, 1rem);
border-left-color: var(--input-bg);
border-top-left-radius: var(--roundness-xs, 0.5rem);
border-bottom-left-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group msb-button-toggle:first-of-type > input[type=checkbox]:not(:disabled):is(:checked) + label, .toggle-btn-group msb-button-toggle:first-of-type > input[type=radio]:not(:disabled):is(:checked) + label {
border-left-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle:first-of-type > input[type=checkbox]:is(:disabled):is(:checked) + label, .toggle-btn-group msb-button-toggle:first-of-type > input[type=radio]:is(:disabled):is(:checked) + label {
border-left-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle:first-of-type > label:has(input[type=checkbox], input[type=radio]) {
padding-left: var(--space-m, 1rem);
border-left-color: var(--input-bg);
border-top-left-radius: var(--roundness-xs, 0.5rem);
border-bottom-left-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group msb-button-toggle:first-of-type > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)) {
border-left-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle:first-of-type > label:has(input[type=checkbox]:is(:disabled):is(:checked), input[type=radio]:is(:disabled):is(:checked)):first-of-type {
border-left-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle:last-of-type > input[type=checkbox] + label, .toggle-btn-group msb-button-toggle:last-of-type > input[type=radio] + label {
padding-right: var(--space-m, 1rem);
border-right-color: var(--input-bg);
border-top-right-radius: var(--roundness-xs, 0.5rem);
border-bottom-right-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group msb-button-toggle:last-of-type > input[type=checkbox]:not(:disabled):is(:checked) + label, .toggle-btn-group msb-button-toggle:last-of-type > input[type=radio]:not(:disabled):is(:checked) + label {
border-right-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle:last-of-type > input[type=checkbox]:is(:disabled):is(:checked) + label, .toggle-btn-group msb-button-toggle:last-of-type > input[type=radio]:is(:disabled):is(:checked) + label {
border-right-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group msb-button-toggle:last-of-type > label:has(input[type=checkbox], input[type=radio]) {
padding-right: var(--space-m, 1rem);
border-right-color: var(--input-bg);
border-top-right-radius: var(--roundness-xs, 0.5rem);
border-bottom-right-radius: var(--roundness-xs, 0.5rem);
}
.toggle-btn-group msb-button-toggle:last-of-type > label:has(input[type=checkbox]:not(:disabled):is(:checked), input[type=radio]:not(:disabled):is(:checked)) {
border-right-color: var(--input-label);
}
.toggle-btn-group msb-button-toggle:last-of-type > label:has(input[type=checkbox]:is(:disabled):is(:checked), input[type=radio]:is(:disabled):is(:checked)):last-of-type {
border-right-color: var(--button-status-disabled-contrast-color);
}
.toggle-btn-group:focus-visible {
outline: none;
}
msb-button,
msb-button-action,
msb-info-button,
msb-button-link,
msb-navigation-buttons {
display: contents;
}
.btn {
display: inline-flex;
font-family: var(--base-font-family, Roboto, sans-serif);
font-size: 1rem;
font-weight: 500;
padding: var(--space-xxs, 0.25rem) var(--space-m, 1rem);
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
flex-shrink: 0;
text-decoration: none;
border-radius: var(--roundness-xs, 0.5rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
outline-offset: var(--border-2, 0.125rem);
outline-width: var(--border-2, 0.125rem);
outline-style: var(--border-style, solid);
outline-color: transparent;
border: var(--border-2, 0.125rem);
border-style: var(--border-style, solid);
border-color: transparent;
background-color: var(--button-status-color);
color: var(--button-status-contrast-color);
text-align: center;
}
.btn:not(.action, [data-close], [data-back-to-top], [data-toggle=tooltip], [data-toggle=collapse], [data-toggle=sidebar], [data-sort-order]) {
min-height: 3rem;
}
.btn:hover {
transform: translateY(-1px);
background-color: var(--button-status-hover-color);
}
.btn:focus, .btn:focus-visible, .btn:active {
outline-color: var(--button-status-focus-color);
border-color: transparent;
background-color: var(--button-status-hover-color);
}
.btn:disabled, .btn.disabled,
.btn fieldset:disabled {
pointer-events: none;
cursor: none;
font-weight: normal;
background-color: var(--button-status-disabled-color);
color: var(--button-status-disabled-contrast-color);
}
.btn > * > svg,
.btn > svg {
display: flex;
flex-shrink: 0;
fill: currentColor;
height: var(--space-l, 1.5rem);
width: var(--space-l, 1.5rem);
aspect-ratio: 1;
}
.btn span.icon {
--icon-color: currentColor;
flex-shrink: 0;
height: var(--space-l, 1.5rem);
width: var(--space-l, 1.5rem);
aspect-ratio: 1;
}
.btn.outline {
background-color: var(--body-bg);
border-color: var(--button-outline-stroke-color);
color: var(--button-outline-status-color);
}
.btn.outline:hover {
border-color: var(--button-status-hover-color);
color: var(--button-status-hover-color);
}
.btn.outline:focus, .btn.outline:focus-visible, .btn.outline:active {
outline-color: var(--button-status-color);
border-color: var(--button-status-hover-color);
}
.btn.outline:disabled, .btn.outline.disabled,
.btn.outline fieldset:disabled {
border-color: var(--button-status-disabled-color);
color: var(--button-status-disabled-contrast-color);
}
.btn.opacity {
background-color: var(--button-opacity-bg);
color: var(--button-opacity-color);
}
.btn.opacity:hover {
color: var(--button-opacity-hover);
}
.btn.opacity:focus, .btn.opacity:focus-visible, .btn.opacity:active {
color: var(--button-opacity-hover);
}
.btn.opacity:disabled, .btn.opacity.disabled,
.btn.opacity fieldset:disabled {
background-color: var(--button-status-disabled-color);
color: var(--button-status-disabled-contrast-color);
}
.btn.action {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 4.5rem;
height: 4.5rem;
padding: var(--space-xxs, 0.25rem);
text-overflow: ellipsis;
font-size: 0.6875rem;
}
.btn.action > * > svg,
.btn.action > svg {
fill: currentColor;
width: 2rem;
height: 2rem;
vertical-align: top;
}
.btn.action[data-back-to-top] {
position: relative;
position: fixed;
margin: var(--space-0, 0rem);
bottom: var(--space-l, 1.5rem);
right: var(--space-l, 1.5rem);
top: unset;
background-color: var(--button-status-color);
}
.btn.action[data-back-to-top]::before {
content: "";
width: 2rem;
height: 2rem;
-webkit-mask-image: var(--button-icon-back-to-top);
mask-image: var(--button-icon-back-to-top);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
.btn.action[data-back-to-top][data-opacity] {
visibility: visible;
}
.btn.action[data-back-to-top][data-opacity="0.5"] {
opacity: 0.5;
}
.btn.action[data-back-to-top][data-opacity="0.6"] {
opacity: 0.6;
}
.btn.action[data-back-to-top][data-opacity="0.7"] {
opacity: 0.7;
}
.btn.action[data-back-to-top][data-opacity="0.8"] {
opacity: 0.8;
}
.btn.action[data-back-to-top][data-opacity="0.9"] {
opacity: 0.9;
}
.btn.action[data-back-to-top][data-opacity="1"] {
opacity: 1;
}
.btn.action[data-back-to-top]:not([data-opacity]) {
visibility: hidden;
opacity: 0;
}
.btn.action[data-close]::after {
content: "";
width: 2rem;
height: 2rem;
-webkit-mask-image: var(--button-icon-close);
mask-image: var(--button-icon-close);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
.btn.action[data-toggle=collapse], .btn.action[data-toggle=tooltip], .btn.action[data-toggle=sidebar] {
position: absolute;
top: var(--space-xxs, 0.25rem);
right: var(--space-xxs, 0.25rem);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem !important;
height: 2rem !important;
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
border-radius: var(--roundness-xxxl, 50%);
color: var(--button-status-color);
background-color: transparent;
border: none;
}
.btn.action[data-toggle=collapse]::after, .btn.action[data-toggle=tooltip]::after, .btn.action[data-toggle=sidebar]::after {
content: "";
width: 2rem !important;
height: 2rem !important;
-webkit-mask-image: var(--button-icon-info);
mask-image: var(--button-icon-info);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
.btn.action[data-sort-order]::before {
content: "";
width: 2rem;
height: 2rem;
-webkit-mask-image: var(--button-icon-sort);
mask-image: var(--button-icon-sort);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
.btn.action[data-sort-order=asc]::before {
-webkit-mask-image: var(--button-icon-sort-asc);
mask-image: var(--button-icon-sort-asc);
}
.btn.action[data-sort-order=desc]::before {
-webkit-mask-image: var(--button-icon-sort-desc);
mask-image: var(--button-icon-sort-desc);
}
.btn.action[data-download]:after, .btn.action[data-download=default]:after {
content: "";
width: 2rem;
height: 2rem;
-webkit-mask-image: var(--button-icon-download);
mask-image: var(--button-icon-download);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
.btn.action[data-download=busy]::after {
-webkit-mask-image: var(--button-icon-download-busy);
mask-image: var(--button-icon-download-busy);
}
.btn.action[data-download=failed] {
--button-status-color: var(--button-status-color-danger) !important;
--button-status-contrast-color: var(--button-status-contrast-color-danger) !important;
--button-status-focus-color: var(--button-status-focus-color-danger) !important;
--button-status-hover-color: var(--button-status-hover-color-danger) !important;
--button-outline-status-color: var(--button-outline-status-color-danger) !important;
--button-outline-stroke-color: var(--button-outline-stroke-color-danger) !important;
--button-opacity-bg: var(--button-opacity-bg-danger) !important;
--button-opacity-color: var(--button-opacity-color-danger) !important;
--button-opacity-hover: var(--button-opacity-hover-danger) !important;
}
.btn.action[data-download=failed]::after {
-webkit-mask-image: var(--button-icon-download-failed);
mask-image: var(--button-icon-download-failed);
}
.btn.action[data-download=success] {
--button-status-color: var(--button-status-color-success) !important;
--button-status-contrast-color: var(--button-status-contrast-color-success) !important;
--button-status-focus-color: var(--button-status-focus-color-success) !important;
--button-status-hover-color: var(--button-status-hover-color-success) !important;
--button-outline-status-color: var(--button-outline-status-color-success) !important;
--button-outline-stroke-color: var(--button-outline-stroke-color-success) !important;
--button-opacity-bg: var(--button-opacity-bg-success) !important;
--button-opacity-color: var(--button-opacity-color-success) !important;
--button-opacity-hover: var(--button-opacity-hover-success) !important;
}
.btn.action[data-download=success]::after {
-webkit-mask-image: var(--button-icon-download-success);
mask-image: var(--button-icon-download-success);
}
.btn.action.mini {
width: 2rem;
height: 2rem;
}
.btn.action.mini > * > svg,
.btn.action.mini > svg, .btn.action.mini::before, .btn.action.mini::after {
width: 1rem;
height: 1rem;
}
.btn.neutral {
--button-status-color: var(--button-status-color-neutral);
--button-status-contrast-color: var(--button-status-contrast-color-neutral);
--button-status-focus-color: var(--button-status-focus-color-neutral);
--button-status-hover-color: var(--button-status-hover-color-neutral);
--button-outline-status-color: var(--button-outline-status-color-neutral);
--button-outline-stroke-color: var(--button-outline-stroke-color-neutral);
--button-opacity-bg: var(--button-opacity-bg-neutral);
--button-opacity-color: var(--button-opacity-color-neutral);
--button-opacity-hover: var(--button-opacity-hover-neutral);
}
.btn.primary {
--button-status-color: var(--button-status-color-primary);
--button-status-contrast-color: var(--button-status-contrast-color-primary);
--button-status-focus-color: var(--button-status-focus-color-primary);
--button-status-hover-color: var(--button-status-hover-color-primary);
--button-outline-status-color: var(--button-outline-status-color-primary);
--button-outline-stroke-color: var(--button-outline-stroke-color-primary);
--button-opacity-bg: var(--button-opacity-bg-primary);
--button-opacity-color: var(--button-opacity-color-primary);
--button-opacity-hover: var(--button-opacity-hover-primary);
}
.btn.secondary {
--button-status-color: var(--button-status-color-secondary);
--button-status-contrast-color: var(--button-status-contrast-color-secondary);
--button-status-focus-color: var(--button-status-focus-color-secondary);
--button-status-hover-color: var(--button-status-hover-color-secondary);
--button-outline-status-color: var(--button-outline-status-color-secondary);
--button-outline-stroke-color: var(--button-outline-stroke-color-secondary);
--button-opacity-bg: var(--button-opacity-bg-secondary);
--button-opacity-color: var(--button-opacity-color-secondary);
--button-opacity-hover: var(--button-opacity-hover-secondary);
}
.btn.success {
--button-status-color: var(--button-status-color-success);
--button-status-contrast-color: var(--button-status-contrast-color-success);
--button-status-focus-color: var(--button-status-focus-color-success);
--button-status-hover-color: var(--button-status-hover-color-success);
--button-outline-status-color: var(--button-outline-status-color-success);
--button-outline-stroke-color: var(--button-outline-stroke-color-success);
--button-opacity-bg: var(--button-opacity-bg-success);
--button-opacity-color: var(--button-opacity-color-success);
--button-opacity-hover: var(--button-opacity-hover-success);
}
.btn.help {
--button-status-color: var(--button-status-color-help);
--button-status-contrast-color: var(--button-status-contrast-color-help);
--button-status-focus-color: var(--button-status-focus-color-help);
--button-status-hover-color: var(--button-status-hover-color-help);
--button-outline-status-color: var(--button-outline-status-color-help);
--button-outline-stroke-color: var(--button-outline-stroke-color-help);
--button-opacity-bg: var(--button-opacity-bg-help);
--button-opacity-color: var(--button-opacity-color-help);
--button-opacity-hover: var(--button-opacity-hover-help);
}
.btn.warning {
--button-status-color: var(--button-status-color-warning);
--button-status-contrast-color: var(--button-status-contrast-color-warning);
--button-status-focus-color: var(--button-status-focus-color-warning);
--button-status-hover-color: var(--button-status-hover-color-warning);
--button-outline-status-color: var(--button-outline-status-color-warning);
--button-outline-stroke-color: var(--button-outline-stroke-color-warning);
--button-opacity-bg: var(--button-opacity-bg-warning);
--button-opacity-color: var(--button-opacity-color-warning);
--button-opacity-hover: var(--button-opacity-hover-warning);
}
.btn.danger {
--button-status-color: var(--button-status-color-danger);
--button-status-contrast-color: var(--button-status-contrast-color-danger);
--button-status-focus-color: var(--button-status-focus-color-danger);
--button-status-hover-color: var(--button-status-hover-color-danger);
--button-outline-status-color: var(--button-outline-status-color-danger);
--button-outline-stroke-color: var(--button-outline-stroke-color-danger);
--button-opacity-bg: var(--button-opacity-bg-danger);
--button-opacity-color: var(--button-opacity-color-danger);
--button-opacity-hover: var(--button-opacity-hover-danger);
}
.btn.mode {
--button-status-color: var(--button-status-color-mode);
--button-status-contrast-color: var(--button-status-contrast-color-mode);
--button-status-focus-color: var(--button-status-focus-color-mode);
--button-status-hover-color: var(--button-status-hover-color-mode);
--button-outline-status-color: var(--button-outline-status-color-mode);
--button-outline-stroke-color: var(--button-outline-stroke-color-mode);
--button-opacity-bg: var(--button-opacity-bg-mode);
--button-opacity-color: var(--button-opacity-color-mode);
--button-opacity-hover: var(--button-opacity-hover-mode);
}
.card msb-captcha {
display: contents;
}
.card.captcha {
display: flex;
gap: var(--space-xs, 0.5rem);
border-color: var(--captcha-status-color);
outline-color: var(--captcha-status-color);
align-items: center;
flex-direction: row;
}
.card.captcha.neutral {
--captcha-status-color: var(--captcha-status-color-neutral);
}
.card.captcha.primary {
--captcha-status-color: var(--captcha-status-color-primary);
}
.card.captcha.secondary {
--captcha-status-color: var(--captcha-status-color-secondary);
}
.card.captcha.success {
--captcha-status-color: var(--captcha-status-color-success);
}
.card.captcha.help {
--captcha-status-color: var(--captcha-status-color-help);
}
.card.captcha.warning {
--captcha-status-color: var(--captcha-status-color-warning);
}
.card.captcha.danger {
--captcha-status-color: var(--captcha-status-color-danger);
}
.card.captcha.mode {
--captcha-status-color: var(--captcha-status-color-mode);
}
.card.captcha button {
text-align: start;
max-width: calc(100% - 3rem - var(--space-xs, 0.5rem));
}
.card.captcha svg {
width: 3rem;
min-width: 3rem;
height: 3rem;
min-height: 3rem;
fill: var(--captcha-status-color);
}
.card.captcha > *:not(.btn) {
color: var(--captcha-status-color);
}
msb-card,
msb-card-status,
msb-card-footer,
msb-card-combined-container,
msb-card-combined,
msb-card-select,
msb-card-form,
msb-teaser,
msb-mini-card,
msb-mini-card-content,
msb-mini-card-footer,
msb-action-button-mini,
msb-captcha,
msb-search-container {
display: contents;
}
.card {
position: relative;
display: flex;
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5rem;
flex-direction: column;
gap: var(--space-xs, 0.5rem);
align-items: flex-start;
padding: var(--space-m, 1rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
border-radius: var(--roundness-xs, 0.5rem);
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--card-status-color);
background-color: var(--card-bg);
color: var(--card-color);
}
.card:has(> .btn.action, > [data-toggle=collapse], > [data-toggle=tooltip], > [data-toggle=sidebar]), .card:has(> *:not(.footer) > .btn.action:not([type=reset], [type=submit]) > * > [data-toggle=collapse], > * > [data-toggle=tooltip], > * > [data-toggle=sidebar]) {
padding-right: var(--space-xxl, 3rem);
}
.card [data-toggle=collapse],
.card [data-toggle=tooltip],
.card [data-toggle=sidebar] {
background-color: var(--card-bg) !important;
}
.card > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse]),
.card > *:not(.footer) > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse], [type=reset], [type=submit]) {
position: absolute;
top: var(--space-xxs, 0.25rem);
right: var(--space-xxs, 0.25rem);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 2rem;
height: 2rem;
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
border-radius: var(--roundness-xxxl, 50%);
color: var(--button-status-color);
background-color: var(--card-bg);
}
.card > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse]) > svg,
.card > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse]) > * > svg,
.card > *:not(.footer) > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse], [type=reset], [type=submit]) > svg,
.card > *:not(.footer) > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse], [type=reset], [type=submit]) > * > svg {
display: inline-block;
position: relative;
top: var(--space-0, 0rem);
left: var(--space-0, 0rem);
fill: var(--button-status-color);
}
.card > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse]) > svg title,
.card > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse]) > * > svg title,
.card > *:not(.footer) > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse], [type=reset], [type=submit]) > svg title,
.card > *:not(.footer) > .btn.action.mini:not([data-toggle=tooltip], [data-toggle=sidebar], [data-toggle=collapse], [type=reset], [type=submit]) > * > svg title {
background-color: var(--card-bg);
color: var(--card-color);
}
.card a:not(.btn) {
color: var(--card-link);
}
.card > p,
.card > * > p {
margin: var(--space-0, 0rem);
}
.card.add {
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
.card.add {
animation: add-card 300ms ease-in 300ms;
}
}
.card.remove {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
.card.remove {
animation: remove-card 300ms ease-out 300ms;
}
}
.card:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--card-status-color);
outline-offset: var(--border-2, 0.125rem);
}
.card.link:has(a) a {
text-decoration: none;
color: var(--body-color);
}
.card.link:has(a) a::after {
content: "";
display: block;
background: transparent;
inset: 0;
position: absolute;
}
.card.hover:hover {
background: var(--card-bg-hover);
}
.card.card-status {
display: flex;
padding: var(--space-m, 1rem) var(--space-s, 0.75rem) var(--space-m, 1rem) calc(var(--space-l, 1.5rem) - var(--border-6, 0.5rem));
justify-content: flex-end;
align-items: center;
gap: var(--space-s, 0.75rem);
flex: 1 0 0;
border-radius: var(--roundness-xs, 0.5rem);
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--card-status-color);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
line-height: 1.3125rem;
}
.card.card-status .status-indicator {
background-color: var(--statusindicator-color);
}
@media screen and (max-width: 991.99px) {
.card.card-status {
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
}
@media (min-width: 992px) {
.card.card-status {
flex-direction: row;
}
}
.card.card-status.notChangable .footer,
.card.card-status.notChangable footer {
display: none;
visibility: hidden;
}
.card.card-status.timeline {
margin-left: var(--space-xxl, 3rem);
}
.card.card-status.timeline::before {
content: "";
position: absolute;
left: calc(-1 * var(--space-xl, 2rem));
top: calc(-1 * var(--space-s, 0.75rem));
height: calc(100% + 2 * var(--space-s, 0.75rem));
width: var(--space-0, 0rem);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--neutral-25);
border-left: var(--border-0, 0);
}
.card.card-status.timeline::after {
content: "";
position: absolute;
top: calc(50% - var(--space-s, 0.75rem));
left: calc(-1 * (var(--space-xl, 2rem) + var(--space-l, 1.5rem) / 2 - var(--border-2, 0.125rem) / 2));
height: var(--space-l, 1.5rem);
width: var(--space-l, 1.5rem);
aspect-ratio: 1;
border-radius: var(--roundness-xxxl, 50%);
background: var(--card-status-color);
}
.card.card-status .content {
display: flex;
flex: 1 1 0;
padding-right: var(--space-0, 0rem);
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: var(--space-xs, 0.5rem);
}
.card.card-status .content .title {
font-size: 1.25rem;
font-weight: 500;
line-height: 1.875rem;
}
@media screen and (max-width: 991.99px) {
.card.card-status .content .meta {
display: flex;
flex-direction: column;
}
}
@media (min-width: 992px) {
.card.card-status .content .meta {
display: flex;
flex-direction: row;
gap: var(--space-l, 1.5rem);
}
}
.card.card-status .content .meta > * {
flex: 1 1 0;
}
.card.card-status .footer,
.card.card-status footer {
height: 100%;
display: flex;
align-items: center;
gap: var(--space-m, 1rem);
}
@media screen and (max-width: 991.99px) {
.card.card-status .footer,
.card.card-status footer {
flex-direction: row;
justify-content: flex-start;
padding-top: var(--space-m, 1rem);
width: 100%;
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--card-footer-line-color);
}
}
@media (min-width: 992px) {
.card.card-status .footer,
.card.card-status footer {
flex-direction: row;
justify-content: flex-end;
padding-left: var(--space-s, 0.75rem);
border-left: var(--border-2, 0.125rem) var(--border-style, solid) var(--card-footer-line-color);
}
}
.card.neutral {
--card-status-color: var(--card-status-color-neutral);
--card-teaser-title:var(--card-teaser-title-neutral);
--card-teaser-txt:var(--card-teaser-txt-neutral);
--card-teaser-link: var(--card-teaser-link-neutral);
--card-teaser-bg:var(--card-teaser-bg-neutral);
}
.card.primary {
--card-status-color: var(--card-status-color-primary);
--card-teaser-title:var(--card-teaser-title-primary);
--card-teaser-txt:var(--card-teaser-txt-primary);
--card-teaser-link: var(--card-teaser-link-primary);
--card-teaser-bg:var(--card-teaser-bg-primary);
}
.card.secondary {
--card-status-color: var(--card-status-color-secondary);
--card-teaser-title:var(--card-teaser-title-secondary);
--card-teaser-txt:var(--card-teaser-txt-secondary);
--card-teaser-link: var(--card-teaser-link-secondary);
--card-teaser-bg:var(--card-teaser-bg-secondary);
}
.card.success {
--card-status-color: var(--card-status-color-success);
--card-teaser-title:var(--card-teaser-title-success);
--card-teaser-txt:var(--card-teaser-txt-success);
--card-teaser-link: var(--card-teaser-link-success);
--card-teaser-bg:var(--card-teaser-bg-success);
}
.card.help {
--card-status-color: var(--card-status-color-help);
--card-teaser-title:var(--card-teaser-title-help);
--card-teaser-txt:var(--card-teaser-txt-help);
--card-teaser-link: var(--card-teaser-link-help);
--card-teaser-bg:var(--card-teaser-bg-help);
}
.card.warning {
--card-status-color: var(--card-status-color-warning);
--card-teaser-title:var(--card-teaser-title-warning);
--card-teaser-txt:var(--card-teaser-txt-warning);
--card-teaser-link: var(--card-teaser-link-warning);
--card-teaser-bg:var(--card-teaser-bg-warning);
}
.card.danger {
--card-status-color: var(--card-status-color-danger);
--card-teaser-title:var(--card-teaser-title-danger);
--card-teaser-txt:var(--card-teaser-txt-danger);
--card-teaser-link: var(--card-teaser-link-danger);
--card-teaser-bg:var(--card-teaser-bg-danger);
}
.card.mode {
--card-status-color: var(--card-status-color-mode);
--card-teaser-title:var(--card-teaser-title-mode);
--card-teaser-txt:var(--card-teaser-txt-mode);
--card-teaser-link: var(--card-teaser-link-mode);
--card-teaser-bg:var(--card-teaser-bg-mode);
}
a.card {
position: relative;
top: var(--space-0, 0rem);
color: var(--body-color);
text-decoration: none;
}
a.card:hover {
box-shadow: var(--elevation-1-hover, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
transform: translateY(-1px);
opacity: 0.75;
}
@media (prefers-reduced-motion: no-preference) {
a.card {
transition: all 300ms ease-in-out;
}
}
.element-filter button[type=submit]:disabled {
background-color: var(--button-status-color);
color: var(--button-status-contrast-color);
}
msb-slideshow,
msb-slideshow-content,
msb-slideshow-figure,
msb-slideshow-footer {
display: contents;
}
.carousel {
position: relative;
box-sizing: border-box;
padding-top: var(--space-m, 1rem);
padding-bottom: var(--space-m, 1rem);
}
.carousel .content {
width: 100%;
overflow: hidden;
border-radius: var(--roundness-s, 0.75rem);
}
.carousel .content:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--link-color);
outline-offset: var(--border-2, 0.125rem);
}
.carousel .content figure.carousel-item,
.carousel .content .figure.carousel-item {
display: none;
float: left;
width: 100%;
margin-right: -100%;
backface-visibility: hidden;
}
.carousel .content figure.carousel-item img,
.carousel .content .figure.carousel-item img {
outline: none;
}
.carousel .content figure.carousel-item figcaption::before,
.carousel .content figure.carousel-item .figcaption::before,
.carousel .content .figure.carousel-item figcaption::before,
.carousel .content .figure.carousel-item .figcaption::before {
display: none;
}
@media (prefers-reduced-motion: no-preference) {
.carousel .content figure.carousel-item.fade-in-left,
.carousel .content .figure.carousel-item.fade-in-left {
animation: fade-in-left calc(300ms * 2) ease-in-out;
}
}
@media (prefers-reduced-motion: no-preference) {
.carousel .content figure.carousel-item.fade-in-right,
.carousel .content .figure.carousel-item.fade-in-right {
animation: fade-in-right calc(300ms * 2) ease-in-out;
}
}
@media (prefers-reduced-motion: no-preference) {
.carousel .content figure.carousel-item.fade-out-left,
.carousel .content .figure.carousel-item.fade-out-left {
animation: fade-out-left calc(300ms * 2) ease-in-out;
}
}
@media (prefers-reduced-motion: no-preference) {
.carousel .content figure.carousel-item.fade-out-right,
.carousel .content .figure.carousel-item.fade-out-right {
animation: fade-out-right calc(300ms * 2) ease-in-out;
}
}
.carousel .content figure.carousel-item.active, .carousel .content figure.carousel-item.next, .carousel .content figure.carousel-item.prev,
.carousel .content .figure.carousel-item.active,
.carousel .content .figure.carousel-item.next,
.carousel .content .figure.carousel-item.prev {
display: flex;
visibility: visible;
}
.carousel .content figure.carousel-item.next a,
.carousel .content figure.carousel-item.next input,
.carousel .content figure.carousel-item.next button, .carousel .content figure.carousel-item.prev a,
.carousel .content figure.carousel-item.prev input,
.carousel .content figure.carousel-item.prev button,
.carousel .content .figure.carousel-item.next a,
.carousel .content .figure.carousel-item.next input,
.carousel .content .figure.carousel-item.next button,
.carousel .content .figure.carousel-item.prev a,
.carousel .content .figure.carousel-item.prev input,
.carousel .content .figure.carousel-item.prev button {
visibility: hidden;
}
.carousel .content figure.carousel-item.next,
.carousel .content .figure.carousel-item.next {
transform: translateX(100%);
}
.carousel .content figure.carousel-item.prev,
.carousel .content .figure.carousel-item.prev {
transform: translateX(-100%);
}
.carousel footer {
display: grid;
width: calc(100% - var(--space-s, 0.75rem));
border-radius: var(--roundness-s, 0.75rem);
background-color: var(--carousel-footer-bg);
margin: var(--space-xxs, 0.25rem);
margin-top: var(--space-0, 0rem);
align-items: center;
color: unset;
}
.carousel footer .btn.action {
background-color: var(--carousel-button-bg);
--button-status-color: var(--carousel-button-status-color);
--button-status-hover-color: var(--carousel-button-status-hover-color);
--button-status-txt-color: var(--carousel-button-status-txt-color);
--button-status-txt-hover-color: var(--carousel-button-status-txt-hover-color);
}
.carousel footer .btn.action::after {
content: "";
background-color: var(--carousel-button-status-txt-color);
-webkit-mask-size: cover;
mask-size: cover;
}
.carousel footer .btn.action:not(.mini)::after {
height: 3.5rem;
width: 3.5rem;
}
.carousel footer .btn.action:hover, .carousel footer .btn.action:focus {
background-color: var(--carousel-button-status-hover-bg);
}
.carousel footer .btn.action:hover::after, .carousel footer .btn.action:focus::after {
background-color: var(--carousel-button-status-txt-hover-color);
}
.carousel footer .btn.action.play {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.carousel footer .btn.action.play::after {
-webkit-mask-image: var(--carousel-play-img);
mask-image: var(--carousel-play-img);
}
.carousel footer .btn.action.play.start::after {
-webkit-mask-image: var(--carousel-break-img);
mask-image: var(--carousel-break-img);
}
.carousel footer .btn.action.prev {
position: absolute;
top: 50%;
left: var(--space-xs, 0.5rem);
transform: translateY(-50%);
}
.carousel footer .btn.action.prev::after {
-webkit-mask-image: var(--carousel-prev-img);
mask-image: var(--carousel-prev-img);
-webkit-mask-size: cover;
mask-size: cover;
}
.carousel footer .btn.action.next {
position: absolute;
top: 50%;
right: var(--space-xs, 0.5rem);
transform: translateY(-50%);
}
.carousel footer .btn.action.next::after {
-webkit-mask-image: var(--carousel-next-img);
mask-image: var(--carousel-next-img);
-webkit-mask-size: cover;
mask-size: cover;
}
.carousel footer .indicators {
display: flex;
max-width: 100%;
justify-self: center;
justify-content: flex-start;
overflow-x: auto;
padding: var(--space-xxs, 0.25rem);
gap: var(--space-xxs, 0.25rem);
}
.carousel footer .indicators::before, .carousel footer .indicators::after {
content: "";
}
.carousel footer .indicators .btn.action {
display: flex;
flex: 1 1 0;
}
.carousel footer .indicators .btn.action.indicator:after {
content: "";
background-color: var(--carousel-button-status-txt-color);
-webkit-mask-image: var(--carousel-indicator-img);
mask-image: var(--carousel-indicator-img);
-webkit-mask-size: cover;
mask-size: cover;
}
.carousel footer .indicators .btn.action.active {
background-color: var(--carousel-indicator-bg);
}
.carousel footer .indicators .btn.action.active::after {
background-color: var(--carousel-indicator-active-txt);
}
.carousel footer .indicators .btn.action:hover::after, .carousel footer .indicators .btn.action:focus::after {
background-color: var(--carousel-button-status-txt-hover-color);
}
.carousel:not(:has(.figcaption-card)) .content figure.carousel-item figcaption,
.carousel:not(:has(.figcaption-card)) .content figure.carousel-item .figcaption,
.carousel:not(:has(.figcaption-card)) .content .figure.carousel-item figcaption,
.carousel:not(:has(.figcaption-card)) .content .figure.carousel-item .figcaption {
position: absolute;
display: flex;
align-self: center;
flex-direction: column;
background: var(--carousel-figcaption-bg);
padding: var(--space-m, 1rem) var(--space-m, 1rem) var(--space-s, 0.75rem) var(--space-m, 1rem);
top: calc(50% + 1.25rem + var(--space-l, 1.5rem));
left: 50%;
transform: translateX(-50%);
font-size: 1rem;
}
.carousel:not(:has(.figcaption-card)) .content figure.carousel-item figcaption *,
.carousel:not(:has(.figcaption-card)) .content figure.carousel-item .figcaption *,
.carousel:not(:has(.figcaption-card)) .content .figure.carousel-item figcaption *,
.carousel:not(:has(.figcaption-card)) .content .figure.carousel-item .figcaption * {
margin-block: var(--space-0, 0rem);
}
.carousel:not(:has(.figcaption-card)) .content figure.carousel-item figcaption::before,
.carousel:not(:has(.figcaption-card)) .content figure.carousel-item .figcaption::before,
.carousel:not(:has(.figcaption-card)) .content .figure.carousel-item figcaption::before,
.carousel:not(:has(.figcaption-card)) .content .figure.carousel-item .figcaption::before {
display: none;
}
.carousel:not(:has(.figcaption-card)) footer {
height: 100%;
}
.carousel:not(:has(.figcaption-card)) footer .indicators {
position: absolute;
bottom: var(--space-xl, 2rem);
}
.carousel:has(.figcaption-card) footer {
display: flex;
justify-content: space-between;
height: 100%;
width: 100%;
max-width: 100%;
margin: var(--space-0, 0rem);
padding: var(--space-xxs, 0.25rem);
flex-direction: row;
box-sizing: border-box;
}
.carousel:has(.figcaption-card) footer .indicators {
align-self: flex-end;
}
.carousel:has(.figcaption-card) footer .btn.action.prev, .carousel:has(.figcaption-card) footer .btn.action.next {
display: flex;
position: relative;
top: unset;
left: unset;
right: unset;
transform: unset;
}
.carousel:has(.figcaption-card) footer .btn.action.play {
transform: translate(-50%, -105%);
}
.topcarousel {
background-color: var(--carousel-topcarousel-bg);
padding: var(--space-m, 1rem);
}
msb-checkbox {
display: contents;
}
.form-check:has(> input[type=checkbox]) {
display: grid;
grid-template-columns: 2.5rem auto auto;
padding-left: var(--space-0, 0rem);
height: max-content;
position: relative;
}
.form-check > .container-info:has(> input[type=checkbox]) {
display: grid;
grid-template-columns: 2.5rem auto auto;
padding-left: var(--space-0, 0rem);
height: max-content;
position: relative;
}
.form-check > .container-info > input[type=checkbox],
.form-check > input[type=checkbox] {
position: relative;
grid-column: 1;
z-index: 2;
margin: var(--space-xs, 0.5rem);
accent-color: var(--input-label);
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
}
.form-check > .container-info > input[type=checkbox] ~ label,
.form-check > input[type=checkbox] ~ label {
grid-column: 2;
align-self: center;
}
.form-check > .container-info > input[type=checkbox] ~ label::before,
.form-check > input[type=checkbox] ~ label::before {
position: absolute;
z-index: 1;
left: var(--space-0, 0rem);
top: var(--space-0, 0rem);
content: "";
width: 1.75rem;
height: 1.75rem;
border-radius: var(--roundness-xxxl, 50%);
background-color: transparent;
border: none;
}
.form-check > .container-info > input[type=checkbox] ~ .invalid-feedback,
.form-check > .container-info > input[type=checkbox] ~ .valid-feedback,
.form-check > input[type=checkbox] ~ .invalid-feedback,
.form-check > input[type=checkbox] ~ .valid-feedback {
display: none;
}
.form-check > .container-info > input[type=checkbox] ~ [data-toggle=collapse],
.form-check > .container-info > input[type=checkbox] ~ [data-toggle=tooltip],
.form-check > .container-info > input[type=checkbox] ~ [data-toggle=sidebar],
.form-check > input[type=checkbox] ~ [data-toggle=collapse],
.form-check > input[type=checkbox] ~ [data-toggle=tooltip],
.form-check > input[type=checkbox] ~ [data-toggle=sidebar] {
position: unset !important;
grid-column: 3;
display: inline-flex;
width: 1.5rem;
max-width: 2rem;
align-self: center;
vertical-align: middle !important;
background-color: transparent;
}
.form-check > .container-info > input[type=checkbox]:focus,
.form-check > input[type=checkbox]:focus {
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label);
}
.form-check > .container-info > input[type=checkbox]:disabled,
.form-check > input[type=checkbox]:disabled {
accent-color: var(--input-disabled);
pointer-events: none;
}
.form-check > .container-info > input[type=checkbox]:disabled ~ label,
.form-check > input[type=checkbox]:disabled ~ label {
pointer-events: none;
color: var(--input-disabled);
}
.form-check > .container-info > input[type=checkbox].isInvalid ~ .invalid-feedback,
.form-check > input[type=checkbox].isInvalid ~ .invalid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-invalid);
}
.form-check > .container-info > input[type=checkbox].isInvalid ~ label::before,
.form-check > input[type=checkbox].isInvalid ~ label::before {
background-color: var(--input-invalid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-check);
}
.form-check > .container-info > input[type=checkbox].isValid ~ .valid-feedback,
.form-check > input[type=checkbox].isValid ~ .valid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-valid);
}
.form-check > .container-info > input[type=checkbox].isValid ~ label::before,
.form-check > input[type=checkbox].isValid ~ label::before {
background-color: var(--input-valid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-check);
}
.form-check > .container-info > input[type=checkbox]:required ~ label::after,
.form-check > input[type=checkbox]:required ~ label::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
.form-check > .container-info > input[type=checkbox]:hover ~ label::before,
.form-check > input[type=checkbox]:hover ~ label::before {
background-color: var(--input-label-hover);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label-hover);
}
.form-check > .container-info > input[type=checkbox]:hover:is(.isValid) ~ label::before,
.form-check > input[type=checkbox]:hover:is(.isValid) ~ label::before {
background-color: var(--input-valid-radio-hover);
border-color: var(--input-valid-radio-hover);
}
.form-check > .container-info > input[type=checkbox]:hover:is(.isInvalid) ~ label::before,
.form-check > input[type=checkbox]:hover:is(.isInvalid) ~ label::before {
background-color: var(--input-invalid-radio-hover);
border-color: var(--input-invalid-radio-hover);
}
.form-check label:has(input[type=checkbox]) {
display: grid;
grid-template-columns: 2.5rem auto auto;
padding-left: var(--space-0, 0rem);
height: max-content;
position: relative;
align-items: center;
}
.form-check label:has(input[type=checkbox]) input[type=checkbox] {
position: relative;
grid-column: 1;
z-index: 2;
margin: var(--space-xs, 0.5rem);
accent-color: var(--input-label);
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
align-self: flex-start;
}
.form-check label:has(input[type=checkbox]) input[type=checkbox]:focus {
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label);
}
.form-check label:has(input[type=checkbox]) input[type=checkbox]:disabled {
accent-color: var(--input-disabled);
pointer-events: none;
}
.form-check label:has(input[type=checkbox])::before {
position: absolute;
z-index: 1;
left: var(--space-0, 0rem);
top: var(--space-0, 0rem);
content: "";
width: 1.75rem;
height: 1.75rem;
border-radius: var(--roundness-xxxl, 50%);
background-color: transparent;
border: none;
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox].isInvalid):hover::before {
background-color: var(--input-invalid-radio-hover);
border-color: var(--input-invalid-radio-hover);
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox].isInvalid) .invalid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-invalid);
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox].isInvalid)::before {
background-color: var(--input-invalid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-check);
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox].isValid):hover::before {
background-color: var(--input-valid-radio-hover);
border-color: var(--input-valid-radio-hover);
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox].isValid) .valid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-valid);
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox].isValid)::before {
background-color: var(--input-valid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-check);
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox]:required) .input-required::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
.form-check label:has(input[type=checkbox]):hover::before {
background-color: var(--input-label-hover);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label-hover);
}
.form-check label:has(input[type=checkbox]) .invalid-feedback,
.form-check label:has(input[type=checkbox]) .valid-feedback {
display: none;
}
.form-check label:has(input[type=checkbox]) [data-toggle=collapse],
.form-check label:has(input[type=checkbox]) [data-toggle=tooltip],
.form-check label:has(input[type=checkbox]) [data-toggle=sidebar] {
position: unset !important;
grid-column: 3;
display: inline-flex;
width: 1.5rem;
max-width: 2rem;
align-self: center;
vertical-align: middle !important;
background-color: transparent;
}
.form-check label:has(input[type=checkbox]):has(input[type=checkbox]:disabled) {
pointer-events: none;
color: var(--input-disabled);
}
msb-container-chip,
msb-chip {
display: contents;
}
.chips {
display: flex;
--chip-height: 2rem;
--close-height: 1rem;
gap: var(--space-s, 0.75rem);
font-size: 0.875rem;
font-weight: 500;
line-height: 150%;
flex-wrap: wrap;
}
.chips .chip {
display: flex;
padding: var(--space-s, 0.75rem) var(--space-xs, 0.5rem) var(--space-s, 0.75rem) var(--space-s, 0.75rem);
align-items: center;
gap: var(--space-s, 0.75rem);
background-color: var(--chip-bg);
color: var(--chip-color);
border-radius: var(--roundness-xl, 2rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
height: calc(var(--chip-height) + var(--border-2, 0.125rem));
line-height: calc(var(--chip-height) + var(--border-2, 0.125rem));
overflow: unset;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
}
.chips .chip:hover {
background-color: var(--chip-hover-bg);
}
.chips .chip.hidden {
visibility: hidden;
display: none;
}
.chips .chip .btn[data-close] {
display: inline-flex;
background-color: var(--close-background-color);
color: var(--close-color);
width: var(--close-height);
height: var(--close-height);
align-self: center;
border-radius: var(--roundness-xxxl, 50%);
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
}
.chips .chip .btn[data-close]::after {
width: calc(var(--close-height) - var(--border-2, 0.125rem) - var(--border-2, 0.125rem)) !important;
height: calc(var(--close-height) - var(--border-2, 0.125rem) - var(--border-2, 0.125rem)) !important;
background-color: currentColor;
}
.chips .chip .btn[data-close]:focus, .chips .chip .btn[data-close]:active {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--close-color);
outline-offset: var(--border-2, 0.125rem);
}
.chips .chip.neutral {
--chip-bg: var(--chip-bg-neutral);
--chip-color:var(--chip-color-neutral);
--chip-hover-bg:var(--chip-hover-bg-neutral);
--close-background-color:var(--close-background-color-neutral);
--close-color: var(--close-color-neutral);
}
.chips .chip.primary {
--chip-bg: var(--chip-bg-primary);
--chip-color:var(--chip-color-primary);
--chip-hover-bg:var(--chip-hover-bg-primary);
--close-background-color:var(--close-background-color-primary);
--close-color: var(--close-color-primary);
}
.chips .chip.secondary {
--chip-bg: var(--chip-bg-secondary);
--chip-color:var(--chip-color-secondary);
--chip-hover-bg:var(--chip-hover-bg-secondary);
--close-background-color:var(--close-background-color-secondary);
--close-color: var(--close-color-secondary);
}
.chips .chip.success {
--chip-bg: var(--chip-bg-success);
--chip-color:var(--chip-color-success);
--chip-hover-bg:var(--chip-hover-bg-success);
--close-background-color:var(--close-background-color-success);
--close-color: var(--close-color-success);
}
.chips .chip.help {
--chip-bg: var(--chip-bg-help);
--chip-color:var(--chip-color-help);
--chip-hover-bg:var(--chip-hover-bg-help);
--close-background-color:var(--close-background-color-help);
--close-color: var(--close-color-help);
}
.chips .chip.warning {
--chip-bg: var(--chip-bg-warning);
--chip-color:var(--chip-color-warning);
--chip-hover-bg:var(--chip-hover-bg-warning);
--close-background-color:var(--close-background-color-warning);
--close-color: var(--close-color-warning);
}
.chips .chip.danger {
--chip-bg: var(--chip-bg-danger);
--chip-color:var(--chip-color-danger);
--chip-hover-bg:var(--chip-hover-bg-danger);
--close-background-color:var(--close-background-color-danger);
--close-color: var(--close-color-danger);
}
.chips .chip.mode {
--chip-bg: var(--chip-bg-mode);
--chip-color:var(--chip-color-mode);
--chip-hover-bg:var(--chip-hover-bg-mode);
--close-background-color:var(--close-background-color-mode);
--close-color: var(--close-color-mode);
}
msb-dialog,
msb-dialog-header,
msb-dialog-body,
msb-dialog-footer {
display: contents;
}
dialog.dialog {
visibility: hidden;
position: fixed;
padding: var(--space-m, 1rem);
background-color: var(--dialog-bg);
width: var(--dialog-width);
max-width: var(--dialog-max-width);
border: 0;
color: var(--dialog-content-color);
border-radius: var(--roundness-s, 0.75rem);
box-shadow: var(--elevation-4, 0 7px 16px 0 rgba(0, 0, 0, 0.25));
}
dialog.dialog[data-inline] {
position: absolute;
display: none;
}
dialog.dialog[data-modal]::backdrop {
opacity: 0;
background-color: var(--color-backdrop);
}
dialog.dialog:not([data-modal]) {
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--dialog-outline);
}
dialog.dialog:not([data-modal])::backdrop {
background-color: transparent;
}
dialog.dialog[open] {
visibility: visible;
transform: scale(1);
}
dialog.dialog[open][data-inline] {
display: block;
}
@media (prefers-reduced-motion: no-preference) {
dialog.dialog[open] {
animation: show-dialog 300ms ease-in;
}
}
dialog.dialog[open][data-modal]::backdrop {
opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
dialog.dialog[open][data-modal]::backdrop {
animation: show-backdrop 300ms ease-in;
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.dialog.hide {
animation: hide-dialog 300ms ease-out;
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.dialog.hide[data-modal]::backdrop {
animation: hide-backdrop 300ms ease-out;
}
}
dialog.dialog .header,
dialog.dialog header {
position: initial;
box-shadow: none;
grid-row: 1;
font-size: 1.1875rem;
font-weight: 500;
color: var(--dialog-title);
padding-bottom: var(--space-m, 1rem);
}
dialog.dialog .body {
grid-row: 2;
padding-top: var(--space-m, 1rem);
padding-bottom: var(--space-m, 1rem);
}
dialog.dialog .footer,
dialog.dialog footer {
grid-area: unset;
background-color: transparent;
margin-top: auto;
margin-bottom: unset;
column-gap: var(--space-xs, 0.5rem);
display: flex;
justify-content: space-between;
padding-top: var(--space-m, 1rem);
}
dialog.dialog .footer .btn[data-close],
dialog.dialog footer .btn[data-close] {
min-height: 3.5rem;
}
@media (min-width: 576px) {
dialog.dialog.sm {
--dialog-max-width: 540px;
--dialog-width: auto;
}
}
@media (min-width: 992px) {
dialog.dialog.lg {
--dialog-max-width: 960px;
--dialog-width: auto;
}
}
@media (min-width: 1200px) {
dialog.dialog.xl {
--dialog-max-width: 1140px;
--dialog-width: auto;
}
}
dialog.dialog.scrollable[open] {
max-height: 90%;
display: flex;
flex-direction: column;
}
dialog.dialog.scrollable[open] .header,
dialog.dialog.scrollable[open] header {
flex-shrink: 0;
max-height: 10%;
}
dialog.dialog.scrollable[open] .body {
flex-shrink: 1;
overflow-y: auto;
}
dialog.dialog.scrollable[open] .footer,
dialog.dialog.scrollable[open] footer {
flex-shrink: 0;
max-height: 10%;
}
.downloads msb-download {
display: contents;
}
.downloads {
display: flex;
flex-direction: column;
gap: var(--space-s, 0.75rem);
}
.downloads *, .downloads::after, .downloads::before {
box-sizing: border-box;
}
.downloads a {
display: flex;
gap: var(--space-s, 0.75rem);
font-size: 1rem;
text-indent: 0;
background-color: var(--card-bg);
color: var(--download-link-color);
word-wrap: break-word;
transition: none;
text-decoration: none;
padding: var(--space-l, 1.5rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
border-radius: var(--roundness-xs, 0.5rem);
}
.downloads a .download-zusatz,
.downloads a .download-beschreibung {
color: var(--body-color);
margin-block: var(--space-0, 0rem);
}
.downloads a[download]::before {
content: "";
display: inline-flex;
align-self: first baseline;
margin-top: var(--space-xxs, 0.25rem);
-webkit-mask-image: var(--download-icon);
mask-image: var(--download-icon);
width: 1.25em;
height: 1.25em;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
.downloads a:hover, .downloads a:focus, .downloads a:focus-within {
color: var(--download-link-color-hover);
background-color: var(--card-bg-hover);
}
@media screen and (max-width: 991.99px) {
.downloads a {
position: relative;
flex-direction: column;
padding-left: calc(var(--space-xs, 0.5rem) + 1.25em + var(--space-l, 1.5rem));
gap: var(--space-0, 0rem);
}
.downloads a[download]::before {
position: absolute;
top: 1.75em;
left: var(--space-l, 1.5rem);
align-self: flex-start;
}
}
msb-expansion,
msb-expansion-button,
msb-expansion-collapse,
msb-accordion {
display: contents;
}
.expansion {
display: block;
padding: var(--space-s, 0.75rem);
margin: var(--space-s, 0.75rem) var(--space-0, 0rem);
margin-block-start: var(--space-s, 0.75rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
border-radius: var(--roundness-s, 0.75rem);
background-color: var(--expansion-bg);
font-size: 1rem;
}
.expansion:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--expansion-title);
outline-offset: var(--border-2, 0.125rem);
}
.expansion:focus-within > msb-expansion-button > button.expansion:focus-visible,
.expansion:focus-within > button.expansion:focus-visible {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--expansion-title);
outline-offset: var(--border-2, 0.125rem);
}
.expansion > msb-expansion-button > button.expansion,
.expansion > button.expansion {
display: flex;
width: 100%;
flex-direction: row;
justify-content: space-between;
align-items: center;
column-gap: var(--space-m, 1rem);
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
visibility: visible;
text-align: start;
border-color: transparent;
color: var(--expansion-title);
background-color: var(--expansion-bg);
box-shadow: none;
font-weight: 600;
}
.expansion > msb-expansion-button > button.expansion:hover,
.expansion > button.expansion:hover {
color: var(--expansion-title-hover);
}
.expansion > msb-expansion-button > button.expansion:hover > p,
.expansion > msb-expansion-button > button.expansion:hover > p span,
.expansion > msb-expansion-button > button.expansion:hover > span,
.expansion > msb-expansion-button > button.expansion:hover > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.expansion > button.expansion:hover > p,
.expansion > button.expansion:hover > p span,
.expansion > button.expansion:hover > span,
.expansion > button.expansion:hover > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
color: var(--expansion-title-hover);
}
.expansion > msb-expansion-button > button.expansion:hover > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.expansion > button.expansion:hover > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
color: var(--expansion-title-hover);
}
.expansion > msb-expansion-button > button.expansion > *,
.expansion > button.expansion > * {
margin-block-start: var(--space-0, 0rem) !important;
margin-block-end: var(--space-0, 0rem);
visibility: visible;
height: unset;
text-align: start;
font-weight: 600;
color: var(--expansion-title);
}
.expansion > msb-expansion-button > button.expansion > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.expansion > button.expansion > :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
font-size: 1rem;
}
.expansion > msb-expansion-button > button.expansion::after,
.expansion > button.expansion::after {
content: "";
display: block;
height: 1.5rem;
width: 1.5rem;
background-color: currentColor;
-webkit-mask-image: var(--expansion-icon);
mask-image: var(--expansion-icon);
-webkit-mask-size: cover;
mask-size: cover;
background-size: 100% 100%;
transform: rotate(0);
}
@media (prefers-reduced-motion: no-preference) {
.expansion > msb-expansion-button > button.expansion::after,
.expansion > button.expansion::after {
transition: transform 300ms ease-in-out;
}
}
.expansion > msb-expansion-button > button.expansion::after:hover,
.expansion > button.expansion::after:hover {
color: var(--expansion-title-hovery);
}
.expansion > msb-expansion-collapse > .collapse,
.expansion > .collapse {
display: none;
visibility: collapse;
max-height: 0;
}
@media (prefers-reduced-motion: no-preference) {
.expansion > msb-expansion-collapse > .collapse,
.expansion > .collapse {
transition: max-height 300ms ease-in-out;
}
}
.expansion.show > msb-expansion-button > button.expansion,
.expansion.show > button.expansion {
margin-block-end: var(--space-s, 0.75rem);
}
.expansion.show > msb-expansion-button > button.expansion::after,
.expansion.show > button.expansion::after {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
.expansion.show > msb-expansion-button > button.expansion::after,
.expansion.show > button.expansion::after {
transition: transform 300ms ease-in-out;
}
}
.expansion.show > msb-expansion-collapse > .collapse,
.expansion.show > .collapse {
display: initial;
visibility: visible;
max-height: max-content;
max-height: 100vh;
}
@media (prefers-reduced-motion: no-preference) {
.expansion.show > msb-expansion-collapse > .collapse,
.expansion.show > .collapse {
transition: max-height 300ms ease-in-out;
}
}
msb-expansion-card,
msb-expansion-card-button,
msb-expansion-card-collapse,
msb-expansion-card-collapse-button {
display: contents;
}
.expansion-card {
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--expansion-card-status-color);
display: block;
align-items: center;
box-sizing: border-box;
max-width: 100%;
padding: var(--space-s, 0.75rem);
margin: var(--space-0, 0rem) var(--space-0, 0rem);
margin-block-start: var(--space-0, 0rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
border-radius: var(--roundness-xs, 0.5rem);
outline-color: transparent;
background-color: var(--expansion-bg);
font-size: 1rem;
}
.expansion-card:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--expansion-card-status-color);
outline-offset: var(--border-2, 0.125rem);
}
.expansion-card:focus-within button.expansion:focus {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--expansion-card-status-color);
outline-offset: var(--border-2, 0.125rem);
}
.expansion-card .header {
display: flex;
flex-direction: row;
column-gap: var(--space-xs, 0.5rem);
width: 100%;
box-sizing: border-box;
max-width: 100%;
}
.expansion-card .header button.expansion {
position: relative;
font-family: var(--base-font-family, Roboto, sans-serif);
display: flex;
flex-direction: row;
width: 100%;
box-sizing: border-box;
max-width: 100%;
column-gap: var(--space-m, 1rem);
margin: var(--space-0, 0rem) auto;
padding: var(--space-0, 0rem);
visibility: visible;
text-align: start;
background-color: var(--expansion-bg);
height: 2rem;
box-shadow: none;
outline-offset: var(--border-2, 0.125rem);
outline-width: var(--border-2, 0.125rem);
outline-style: var(--border-style, solid);
outline-color: transparent;
border: var(--border-2, 0.125rem);
border-style: var(--border-style, solid);
border-color: transparent;
border-radius: var(--roundness-xs, 0.5rem);
color: var(--card-color);
min-width: 0px;
align-items: center;
}
.expansion-card .header button.expansion *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
margin-block-start: var(--space-0, 0rem) !important;
}
.expansion-card .header button.expansion .content {
position: absolute;
inset: 0 2rem 0 0;
margin-top: var(--space-xxs, 0.25rem);
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
width: calc(100% - 2rem);
max-width: calc(100% - 2rem);
box-sizing: border-box;
}
.expansion-card .header button.expansion:hover {
transform: unset;
color: var(--expansion-card-hover-color);
}
.expansion-card .header button.expansion:hover p,
.expansion-card .header button.expansion:hover strong,
.expansion-card .header button.expansion:hover span {
color: var(--expansion-card-hover-color);
}
.expansion-card .header button.expansion:hover::after {
color: var(--expansion-card-hover-color);
}
.expansion-card .header button.expansion span.datum,
.expansion-card .header button.expansion strong.datum {
max-width: fit-content;
box-sizing: border-box;
margin-right: var(--space-xs, 0.5rem);
}
.expansion-card .header button.expansion span.bezeichung,
.expansion-card .header button.expansion strong.bezeichung {
max-width: 100%;
width: 100%;
box-sizing: border-box;
}
.expansion-card .header button.expansion::after {
content: "";
position: absolute;
inset: auto 0 auto auto;
display: block;
height: 1.5rem;
width: 1.5rem;
min-height: 1.5rem;
min-width: 1.5rem;
color: var(--button-status-color-primary);
background-color: currentColor;
-webkit-mask-image: var(--expansion-icon);
mask-image: var(--expansion-icon);
-webkit-mask-size: cover;
mask-size: cover;
background-size: 100% 100%;
transform: rotate(0);
}
@media (prefers-reduced-motion: no-preference) {
.expansion-card .header button.expansion::after {
transition: transform 300ms ease-in-out;
}
}
.expansion-card .header .btn.action {
flex-direction: row;
width: 2rem;
height: 2rem;
justify-content: center;
align-items: center;
margin: var(--space-0, 0rem) var(--space-xxs, 0.25rem);
column-gap: var(--space-m, 1rem);
padding: var(--space-0, 0rem);
text-align: start;
border-color: transparent;
border-radius: var(--roundness-xs, 0.5rem);
display: inline-flex;
background-color: var(--expansion-bg);
color: var(--button-status-color-primary);
outline-offset: var(--space-0, 0rem);
min-height: unset;
}
.expansion-card .header .btn.action:focus {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-status-color-primary);
outline-offset: var(--border-2, 0.125rem);
}
.expansion-card .header .btn.action[data-download=failed] {
color: var(--button-status-color-danger);
}
.expansion-card .header .btn.action[data-download=failed]:focus {
outline-color: var(--button-status-focus-color-danger) !important;
}
.expansion-card .header .btn.action[data-download=success] {
color: var(--button-status-color-success);
}
.expansion-card .header .btn.action[data-download=success]:focus {
outline-color: var(--button-status-focus-color-success) !important;
}
.expansion-card .header .btn.action::after {
width: 1rem;
height: 1rem;
}
.expansion-card .header .btn.action:hover {
transform: unset;
}
.expansion-card .collapse {
display: none;
visibility: collapse;
height: max-content;
box-sizing: border-box;
}
.expansion-card .collapse button {
outline: none;
font-weight: initial;
outline-offset: var(--border-2, 0.125rem);
background-color: var(--card-bg);
border-color: transparent;
color: var(--button-status-color-primary);
min-height: unset;
padding: var(--space-xs, 0.5rem);
margin: var(--space-xxs, 0.25rem);
overflow: auto;
align-self: stretch;
justify-content: start;
height: fit-content;
box-sizing: border-box;
overflow-wrap: break-word;
}
.expansion-card .collapse button:focus {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--button-status-color-primary);
outline-offset: var(--border-2, 0.125rem);
}
.expansion-card .collapse button:focus:has(svg):has(use[href$="#check"]) {
outline-color: var(--button-status-color-success) !important;
}
.expansion-card .collapse button:focus:has(svg):has(use[href$="#close"]) {
outline-color: var(--button-status-color-danger) !important;
}
.expansion-card .collapse button svg use[href$="#check"] {
fill: var(--button-status-color-success) !important;
}
.expansion-card .collapse button svg use[href$="#close"] {
fill: var(--button-status-color-danger) !important;
}
.expansion-card .collapse button > *:not(svg, .icon) {
width: 100%;
display: flex;
justify-content: space-between;
text-align: start;
}
.expansion-card .collapse button .available {
color: var(--card-color);
text-align: end;
}
.expansion-card .collapse button:disabled {
color: var(--button-status-disabled-colory);
}
.expansion-card .collapse button .shortened {
color: var(--button-status-color-danger);
}
.expansion-card .collapse {
max-height: 0;
}
@media (prefers-reduced-motion: no-preference) {
.expansion-card .collapse {
transition: max-height 300ms ease-in-out;
}
}
.expansion-card.show button.expansion {
margin-block-end: var(--space-s, 0.75rem);
}
.expansion-card.show button.expansion::after {
transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
.expansion-card.show button.expansion::after {
transition: transform 300ms ease-in-out;
}
}
.expansion-card.show .collapse {
display: flex;
flex-direction: column;
overflow: auto;
gap: var(--space-xxs, 0.25rem);
visibility: visible;
word-wrap: break-word;
max-height: 100vh;
}
@media (prefers-reduced-motion: no-preference) {
.expansion-card.show .collapse {
transition: max-height 300ms ease-in-out;
}
}
.expansion-card:hover {
background-color: var(--card-bg-hover);
}
.expansion-card:hover button {
background-color: var(--card-bg-hover) !important;
}
.expansion-card.neutral {
--expansion-card-status-color: var(--expansion-card-status-color-neutral);
}
.expansion-card.primary {
--expansion-card-status-color: var(--expansion-card-status-color-primary);
}
.expansion-card.secondary {
--expansion-card-status-color: var(--expansion-card-status-color-secondary);
}
.expansion-card.success {
--expansion-card-status-color: var(--expansion-card-status-color-success);
}
.expansion-card.help {
--expansion-card-status-color: var(--expansion-card-status-color-help);
}
.expansion-card.warning {
--expansion-card-status-color: var(--expansion-card-status-color-warning);
}
.expansion-card.danger {
--expansion-card-status-color: var(--expansion-card-status-color-danger);
}
.expansion-card.mode {
--expansion-card-status-color: var(--expansion-card-status-color-mode);
}
fieldset,
.fieldset {
padding: var(--space-m, 1rem);
border: var(--border-0, 0);
border-radius: var(--roundness-s, 0.75rem);
background: var(--fieldset);
margin: var(--space-0, 0rem);
gap: var(--space-m, 1rem);
--grid-columns:1;
display: grid;
grid-auto-rows: min-content;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(var(--grid-columns, 1), 1fr);
}
fieldset legend,
fieldset .legend,
.fieldset legend,
.fieldset .legend {
display: contents;
color: var(--heading-3-color);
text-align: center;
font-size: 1.375rem;
font-weight: 600;
line-height: 150%;
}
fieldset legend > *,
fieldset .legend > *,
.fieldset legend > *,
.fieldset .legend > * {
margin-block-start: var(--space-0, 0rem) !important;
}
fieldset legend *:is(small.tooltip-help, small.collapse-help),
fieldset .legend *:is(small.tooltip-help, small.collapse-help),
.fieldset legend *:is(small.tooltip-help, small.collapse-help),
.fieldset .legend *:is(small.tooltip-help, small.collapse-help) {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
fieldset a,
.fieldset a {
color: var(--link-on-fieldset-color);
}
fieldset .legend,
.fieldset .legend {
display: block;
grid-column: 1/span var(--grid-columns, 1);
margin-block: var(--space-0, 0rem);
}
.dialog-container {
display: flex;
position: relative;
margin: var(--space-0, 0rem);
}
msb-filter-dialog,
msb-button-filter {
display: contents;
}
.btn[data-toggle=filter] {
flex-direction: row;
padding-left: var(--space-m, 1rem);
padding-right: var(--space-m, 1rem);
}
.btn[data-toggle=filter]::before {
content: "";
}
.btn[data-toggle=filter] .title {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-xs, 0.5rem);
}
.btn[data-toggle=filter] .title::before {
content: "";
display: flex;
width: 1.5rem;
height: 1.5rem;
grid-column: 2;
-webkit-mask-position: center right;
mask-position: center right;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1.5rem;
mask-size: 1.5rem;
background-color: currentColor;
-webkit-mask-image: var(--filter-icon);
mask-image: var(--filter-icon);
}
.btn[data-toggle=filter].filter-active .title {
position: relative;
}
.btn[data-toggle=filter].filter-active .title::after {
content: "";
height: 0.375rem;
width: 0.375rem;
background-color: var(--filter-active-indicator);
border-radius: var(--roundness-xxxl, 50%);
position: absolute;
left: var(--space-s, 0.75rem);
bottom: var(--space-s, 0.75rem);
margin-right: var(--space-xxs, 0.25rem);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--filter-active-indicator-border);
}
.btn[data-toggle=filter].show-title::before {
content: "Filter";
}
dialog.filter {
display: none;
visibility: hidden;
background-color: var(--filter-dialog-background);
padding: var(--space-xs, 0.5rem);
margin: var(--space-0, 0rem);
margin-top: var(--space-m, 1rem);
color: var(--help-txt);
border: var(--border-0, 0);
border-radius: var(--roundness-s, 0.75rem);
min-width: 17.375rem;
max-width: var(--dialog-max-width);
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
}
dialog.filter[open] {
position: absolute;
display: block;
padding: var(--space-m, 1rem);
opacity: 1;
visibility: visible;
pointer-events: auto;
z-index: 1000;
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--filter-dialog-border);
left: unset;
right: var(--space-0, 0rem);
top: var(--space-0, 0rem);
bottom: unset;
}
dialog.filter[open].left {
top: var(--space-0, 0rem);
left: var(--space-0, 0rem);
}
dialog.filter[open].left::before {
left: var(--space-m, 1rem);
right: unset;
top: calc(-1 * var(--space-s, 0.75rem));
bottom: unset;
}
dialog.filter[open].top {
top: unset;
bottom: var(--space-m, 1rem);
right: var(--space-0, 0rem);
left: unset;
}
dialog.filter[open].top::before {
right: var(--space-m, 1rem);
left: unset;
top: unset;
bottom: calc(-1 * var(--space-s, 0.75rem));
transform: rotate(135deg);
}
dialog.filter[open].top.left {
left: var(--space-0, 0rem);
}
dialog.filter[open].top.left::before {
left: var(--space-m, 1rem);
right: unset;
}
dialog.filter::before {
content: "";
display: block;
width: 1em;
height: 1em;
top: calc(-1 * var(--space-s, 0.75rem));
bottom: unset;
right: var(--space-m, 1rem);
left: unset;
position: absolute;
visibility: visible;
background: var(--filter-dialog-background);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--filter-dialog-border);
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--filter-dialog-border);
transform: rotate(-45deg);
}
dialog.filter .body {
display: flex;
flex-direction: column;
gap: var(--space-m, 1rem);
padding-top: var(--space-m, 1rem);
}
dialog.filter .footer,
dialog.filter footer {
display: flex;
gap: var(--space-m, 1rem);
justify-content: flex-end;
padding-top: var(--space-m, 1rem);
}
dialog.filter .footer .btn,
dialog.filter footer .btn {
min-height: 3rem;
}
footer {
display: block;
margin-top: auto;
margin-bottom: 0;
}
footer nav {
background: var(--footer-bg);
padding: var(--space-s, 0.75rem) var(--space-m, 1rem) var(--space-s, 0.75rem) var(--space-m, 1rem);
display: flex;
gap: var(--space-xs, 0.5rem);
align-items: flex-start;
justify-content: flex-start;
flex-shrink: 0;
}
footer nav a {
text-decoration: none;
padding: var(--space-xs, 0.5rem) var(--space-m, 1rem) var(--space-xs, 0.5rem) var(--space-m, 1rem);
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
display: flex;
flex-direction: row;
gap: 0.5rem;
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
color: var(--footer-txt);
text-align: start;
font-size: 1rem;
line-height: 1.5rem;
}
footer nav a:hover {
background: var(--footer-bg-hover);
border-radius: var(--roundness-s, 0.75rem);
color: var(--footer-txt-hover);
}
footer nav a:focus {
border-radius: var(--roundness-s, 0.75rem);
outline-color: var(--footer-outline-focus);
}
@media screen and (max-width: 991.99px) {
footer nav {
flex-direction: column;
}
footer nav a {
box-sizing: border-box;
width: 100%;
}
footer nav a.current {
position: relative;
}
footer nav a.current::after {
content: "";
background-color: transparent;
position: absolute;
right: var(--space-0, 0rem);
top: var(--space-0, 0rem);
width: calc(100% + var(--space-s, 0.75rem));
height: 100%;
border-left: var(--border-4, 0.25rem) var(--border-style, solid) var(--footer-txt);
}
}
@media (min-width: 992px) {
footer nav {
flex-direction: row;
}
footer nav a.current {
position: relative;
}
footer nav a.current::after {
content: "";
background-color: transparent;
position: absolute;
width: 100%;
top: var(--space-0, 0rem);
right: var(--space-0, 0rem);
height: calc(100% + var(--space-xs, 0.5rem));
border-bottom: var(--border-4, 0.25rem) var(--border-style, solid) var(--footer-txt);
}
}
msb-global-notification {
display: contents;
}
.notification-global {
box-sizing: border-box;
position: relative;
display: flex;
padding: var(--space-l, 1.5rem) var(--space-l, 1.5rem) var(--space-l, 1.5rem) var(--space-m, 1rem);
flex-direction: row;
align-items: center;
justify-content: center;
gap: var(--space-s, 0.75rem);
border-radius: var(--border-0, 0);
border: none;
background-color: var(--notification-global-bg);
align-self: flex-start;
width: 100%;
font-size: 1rem;
line-height: 150%;
}
.notification-global::before {
-webkit-mask-image: var(--notification-global-icon);
mask-image: var(--notification-global-icon);
align-self: flex-start;
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--notification-global-txt);
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
}
.notification-global msb-icon > svg,
.notification-global > svg {
align-self: flex-start;
width: 2.75rem;
height: 2.75rem;
flex-shrink: 0;
fill: var(--notification-global-txt);
}
.notification-global msb-icon > svg title,
.notification-global > svg title {
color: var(--notification-global-txt);
background-color: var(--notification-global-bg);
}
.notification-global .content {
display: flex;
flex-direction: column;
color: var(--notification-global-txt);
line-height: 150%;
max-width: 1140px;
}
.notification-global .content a:not(.btn),
.notification-global .content ::marker {
color: var(--notification-global-txt);
}
.notification-global .content a:not(.btn) svg, .notification-global .content a:not(.btn)::before,
.notification-global .content ::marker svg,
.notification-global .content ::marker::before {
background-color: var(--notification-global-bg);
}
.notification-global .content ol li::marker,
.notification-global .content ul li::marker {
color: var(--notification-global-txt);
}
.notification-global .content .btn:focus {
outline-color: var(--notification-global-txt);
}
.notification-global .content * {
margin-block: var(--space-0, 0rem);
margin-inline: var(--space-0, 0rem);
padding-block: var(--space-0, 0rem);
}
.notification-global .content .header,
.notification-global .content header {
font-size: 1.375rem !important;
font-weight: 500 !important;
line-height: 150% !important;
color: var(--notification-global-txt) !important;
}
.notification-global.notification-info {
--notification-global-bg:var(--notification-global-bg-primary);
--notification-global-icon:var(--notification-global-icon-notification-info);
--notification-global-txt:var(--notification-global-txt-primary);
}
.notification-global.notification-info::before {
content: "";
}
.notification-global.notification-warning {
--notification-global-bg:var(--notification-global-bg-warning);
--notification-global-icon:var(--notification-global-icon-notification-warning);
--notification-global-txt:var(--notification-global-txt-warning);
}
.notification-global.notification-warning::before {
content: "";
}
.notification-global.notification-error {
--notification-global-bg:var(--notification-global-bg-danger);
--notification-global-icon:var(--notification-global-icon-notification-error);
--notification-global-txt:var(--notification-global-txt-danger);
}
.notification-global.notification-error::before {
content: "";
}
.notification-global.neutral {
--notification-global-bg:var(--notification-global-bg-neutral);
--notification-global-txt:var(--notification-global-txt-neutral);
}
.notification-global.primary {
--notification-global-bg:var(--notification-global-bg-primary);
--notification-global-txt:var(--notification-global-txt-primary);
}
.notification-global.secondary {
--notification-global-bg:var(--notification-global-bg-secondary);
--notification-global-txt:var(--notification-global-txt-secondary);
}
.notification-global.success {
--notification-global-bg:var(--notification-global-bg-success);
--notification-global-txt:var(--notification-global-txt-success);
}
.notification-global.help {
--notification-global-bg:var(--notification-global-bg-help);
--notification-global-txt:var(--notification-global-txt-help);
}
.notification-global.warning {
--notification-global-bg:var(--notification-global-bg-warning);
--notification-global-txt:var(--notification-global-txt-warning);
}
.notification-global.danger {
--notification-global-bg:var(--notification-global-bg-danger);
--notification-global-txt:var(--notification-global-txt-danger);
}
.notification-global.mode {
--notification-global-bg:var(--notification-global-bg-mode);
--notification-global-txt:var(--notification-global-txt-mode);
}
header {
position: relative;
box-shadow: var(--elevation-3, 0 4px 10px 3px rgba(0, 0, 0, 0.15));
}
header nav.menu-primary {
display: flex;
background: var(--header-menu-primary-bg);
}
header nav.menu-primary nav.visible-links {
margin-right: var(--space-xs, 0.5rem);
}
header nav.menu-primary nav.more {
margin-left: var(--space-xs, 0.5rem);
}
header nav.menu-primary nav.visible-links, header nav.menu-primary nav.more {
display: flex;
gap: var(--space-m, 1rem);
padding-top: var(--space-xs, 0.5rem);
padding-bottom: var(--space-xs, 0.5rem);
align-items: center;
justify-content: flex-start;
flex-wrap: wrap;
background: var(--header-menu-primary-bg);
}
header nav.menu-primary nav.visible-links > a,
header nav.menu-primary nav.visible-links > button, header nav.menu-primary nav.more > a,
header nav.menu-primary nav.more > button {
text-decoration: none;
padding: var(--space-0, 0rem) var(--space-xs, 0.5rem);
margin: var(--space-0, 0rem);
display: flex;
flex-direction: row;
gap: var(--space-xxs, 0.25rem);
align-items: center;
justify-content: center;
flex-shrink: 0;
height: 2.5rem;
min-height: 2.5rem;
color: var(--header-menu-item-txt);
text-align: start;
font-size: 1.125rem;
font-weight: 500;
font-family: var(--base-font-family, Roboto, sans-serif);
line-height: 150%;
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
background-color: var(--header-menu-primary-bg);
}
header nav.menu-primary nav.visible-links > a.more,
header nav.menu-primary nav.visible-links > button.more, header nav.menu-primary nav.more > a.more,
header nav.menu-primary nav.more > button.more {
display: none;
}
header nav.menu-primary nav.visible-links > a:hover,
header nav.menu-primary nav.visible-links > button:hover, header nav.menu-primary nav.more > a:hover,
header nav.menu-primary nav.more > button:hover {
border-radius: var(--space-xs, 0.5rem);
background: var(--header-menu-item-bg-hover);
color: var(--header-menu-item-text-hover);
}
header nav.menu-primary nav.visible-links > a:focus:not(.hidden-links),
header nav.menu-primary nav.visible-links > button:focus:not(.hidden-links), header nav.menu-primary nav.more > a:focus:not(.hidden-links),
header nav.menu-primary nav.more > button:focus:not(.hidden-links) {
border-radius: var(--space-xs, 0.5rem);
outline-offset: var(--space-0, 0rem);
outline-color: var(--header-menu-item-outline);
color: var(--header-menu-item-txt);
}
header nav.menu-primary nav.visible-links > a:hover:focus:not(.hidden-links),
header nav.menu-primary nav.visible-links > button:hover:focus:not(.hidden-links), header nav.menu-primary nav.more > a:hover:focus:not(.hidden-links),
header nav.menu-primary nav.more > button:hover:focus:not(.hidden-links) {
color: var(--header-menu-item-text-hover);
}
header nav.menu-primary nav.hidden-links {
position: absolute;
isolation: isolate;
z-index: 1000;
top: var(--space-xxl, 3rem);
width: max-content;
background-color: var(--header-menu-primary-bg);
border-radius: var(--roundness-xs, 0.5rem);
padding: var(--space-xs, 0.5rem);
display: flex;
flex-direction: column;
gap: var(--space-xxs, 0.25rem);
align-items: flex-end;
justify-content: flex-end;
box-shadow: var(--elevation-3, 0 4px 10px 3px rgba(0, 0, 0, 0.15));
}
header nav.menu-primary nav.hidden-links > a {
text-decoration: none;
padding: var(--space-xs, 0.5rem);
display: flex;
flex-direction: row;
gap: var(--space-xs, 0.5rem);
align-items: center;
justify-content: center;
color: var(--header-menu-item-txt);
text-align: start;
font-size: 1rem;
font-weight: 500;
line-height: 1.5rem;
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
}
header nav.menu-primary nav.hidden-links > a:hover {
border-radius: var(--space-xs, 0.5rem);
background: var(--header-menu-item-bg-hover);
color: var(--header-menu-item-text-hover);
}
header nav.menu-primary nav.hidden-links > a:focus:not(.hidden-links) {
border-radius: var(--space-xs, 0.5rem);
outline-color: var(--header-menu-item-outline);
color: var(--header-menu-item-txt);
}
header nav.menu-secondary {
background: var(--header-menu-secondary-bg);
padding: var(--space-xs, 0.5rem) var(--space-l, 1.5rem) var(--space-xs, 0.5rem) var(--space-m, 1rem);
display: flex;
gap: var(--space-l, 1.5rem);
align-items: flex-start;
}
header nav.menu-secondary nav {
display: flex;
flex-wrap: wrap;
gap: var(--space-l, 1.5rem);
}
header nav.menu-secondary nav .btn-select {
color: var(--header-menu-secondary-txt) !important;
display: flex;
font-size: 0.875rem;
line-height: 1.3125rem;
position: relative;
padding: var(--space-xxs, 0.25rem);
}
header nav.menu-secondary nav .btn-select button {
background: var(--header-menu-secondary-bg) !important;
color: var(--header-menu-secondary-txt);
padding: var(--space-0, 0rem);
width: unset;
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
}
header nav.menu-secondary nav .btn-select button span {
align-items: center;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
header nav.menu-secondary nav .btn-select button svg {
display: flex;
flex-direction: row;
width: 1.5rem;
height: 1.5rem;
fill: var(--header-menu-secondary-txt);
}
header nav.menu-secondary nav .btn-select button:hover {
border-radius: var(--space-xs, 0.5rem);
background: var(--header-menu-item-bg-hover) !important;
color: var(--header-menu-secondary-txt-hover) !important;
}
header nav.menu-secondary nav .btn-select button:hover svg {
fill: var(--header-menu-secondary-txt-hover);
}
header nav.menu-secondary nav .btn-select button:focus {
border-radius: var(--space-xs, 0.5rem);
border-color: var(--header-menu-secondary-txt) !important;
color: var(--header-menu-secondary-txt) !important;
}
header nav.menu-secondary nav .btn-select dialog {
display: flex;
flex-direction: column;
top: var(--space-xxl, 3rem);
background: var(--header-menu-secondary-bg);
color: var(--header-menu-secondary-txt);
gap: var(--space-xxs, 0.25rem);
}
header nav.menu-secondary nav .btn-select dialog::after {
background: var(--header-menu-secondary-bg);
}
header nav.menu-secondary nav .btn-select dialog button {
display: flex;
justify-content: flex-start;
width: 100%;
flex-direction: row;
color: var(--header-menu-secondary-txt);
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
}
header nav.menu-secondary nav .btn-select dialog button:hover {
border-radius: var(--space-xs, 0.5rem);
background: var(--header-menu-item-bg-hover) !important;
color: var(--header-menu-secondary-txt-hover) !important;
}
header nav.menu-secondary nav .btn-select dialog button:focus {
border-radius: var(--space-xs, 0.5rem);
border-color: var(--header-menu-secondary-txt) !important;
color: var(--header-menu-secondary-txt) !important;
}
header nav.menu-secondary nav .btn-select dialog button[data-selected]::after {
border-bottom-color: var(--header-menu-secondary-txt);
}
header nav.menu-secondary nav a {
text-decoration: none;
display: flex;
flex-direction: row;
padding: var(--space-xxs, 0.25rem);
color: var(--header-menu-secondary-txt);
text-align: start;
font-size: 0.875rem;
line-height: 1.3125rem;
gap: var(--space-s, 0.75rem);
align-items: center;
justify-content: flex-start;
flex-shrink: 0;
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
}
header nav.menu-secondary nav a:not(.btn) svg {
flex-shrink: 0;
width: 1.5rem;
height: 1.5rem;
fill: var(--header-menu-secondary-txt);
}
header nav.menu-secondary nav a:hover:not(.btn) {
border-radius: var(--space-xs, 0.5rem);
background: var(--header-menu-item-bg-hover);
color: var(--header-menu-secondary-txt-hover);
}
header nav.menu-secondary nav a:focus:not(.btn) {
border-radius: var(--space-xs, 0.5rem);
border-color: var(--header-menu-secondary-txt);
color: var(--header-menu-secondary-txt);
}
header .branding {
background: var(--header-branding-bg);
padding: var(--space-xs, 0.5rem) var(--space-s, 0.75rem) var(--space-xs, 0.5rem) var(--space-m, 1rem);
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
align-self: stretch;
flex: 1;
}
header .branding a:hover {
border-radius: var(--space-xs, 0.5rem);
background: var(--header-menu-item-bg-hover);
color: var(--header-menu-primary-txt-hover);
}
header .branding a:focus {
border-radius: var(--space-xs, 0.5rem);
border-color: var(--header-menu-primary-txt);
color: var(--header-menu-primary-txt);
}
header .branding .logo-msb::after {
display: block;
content: "";
width: 234px;
height: 78px;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-image: var(--header-branding-logo-msb);
mask-image: var(--header-branding-logo-msb);
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center center;
mask-position: center center;
background-color: var(--header-branding-logo-color);
}
header .branding .logo-bayern {
display: grid;
gap: var(--space-xs, 0.5rem);
font-size: 1.25rem;
line-height: 1.875rem;
text-decoration: none;
grid-template-areas: "title title wappen" "subtitle supplement wappen";
grid-template-rows: 1fr 1fr;
/* Beide Zeilen haben die gleiche Höhe */
}
header .branding .logo-bayern:not(:has(.subtitle)):has(.supplement) {
grid-template-areas: ". x wappen" "title supplement wappen";
}
header .branding .logo-bayern:not(:has(.subtitle)):has(.supplement)::before {
grid-area: x;
content: " ";
line-height: 1.875rem;
}
header .branding .logo-bayern:not(:has(.supplement)):has(.subtitle) {
grid-template-areas: ". . wappen" "title subtitle wappen";
}
header .branding .logo-bayern:not(:has(.subtitle, .supplement)) {
grid-template-areas: "x wappen" "title wappen";
}
header .branding .logo-bayern:not(:has(.subtitle, .supplement))::before {
grid-area: x;
content: " ";
line-height: 1.875rem;
}
header .branding .logo-bayern::after {
grid-area: wappen;
content: "";
background-image: var(--header-branding-wappen-bayern);
background-repeat: no-repeat;
margin-top: auto;
margin-right: auto;
margin-left: var(--space-xs, 0.5rem);
background-size: 5.5rem 3.25rem;
height: 3.25rem;
width: 5.5rem;
line-height: calc(200% + var(--space-xs, 0.5rem));
}
header .branding .logo-bayern .title,
header .branding .logo-bayern .subtitle,
header .branding .logo-bayern .supplement {
line-height: 1.875rem;
align-items: baseline;
}
header .branding .logo-bayern .title {
grid-area: title;
text-align: end;
width: 100%;
font-size: 1.25rem;
color: var(--header-logo-freistaatbayern);
margin-bottom: calc(var(--space-xs, 0.5rem) * -1);
}
header .branding .logo-bayern .subtitle {
grid-area: subtitle;
text-align: end;
font-size: 1.25rem;
color: var(--header-logo-freistaatbayern);
}
header .branding .logo-bayern .supplement {
grid-area: supplement;
font-size: 1.25rem;
color: var(--header-branding-supplement);
margin-bottom: calc(var(--space-xs, 0.5rem) * -1);
}
header .branding .logo-bayern .supplement.danger {
color: var(--header-branding-supplement-danger);
}
@media screen and (max-width: 991.99px) {
header.show nav.menu-primary {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
header.show nav.menu-primary nav {
display: flex;
flex-direction: column;
align-self: stretch;
align-items: stretch;
}
header.show nav.menu-primary nav a {
margin-right: var(--space-s, 0.75rem);
}
header.show nav.menu-primary nav a::before {
margin-top: var(--space-xxs, 0.25rem) !important;
}
header.show nav.menu-secondary:not(.only-mobile.show) {
display: flex;
flex-direction: column;
align-items: flex-start;
align-self: stretch;
}
header.show nav.menu-secondary:not(.only-mobile.show) nav {
display: flex;
flex-direction: column;
align-self: stretch;
align-items: stretch;
}
header .only-mobile.show {
display: flex !important;
flex-direction: column;
align-self: stretch;
align-items: stretch;
}
header .only-mobile.show nav:not(:first-child) a {
justify-content: flex-start;
}
header .only-mobile:first-child {
display: flex !important;
flex-direction: column;
align-self: stretch;
align-items: stretch;
}
header .only-mobile:first-child a {
justify-content: flex-end !important;
}
header .only-desktop {
display: none !important;
}
header .only-desktop * {
display: none !important;
}
header nav.menu-primary {
display: none;
}
header nav.menu-primary nav.visible-links > a {
align-items: start;
justify-content: flex-start;
}
header nav.menu-primary nav.visible-links > a.current {
position: relative;
}
header nav.menu-primary nav.visible-links > a.current::after {
content: "";
background-color: transparent;
position: absolute;
right: var(--space-0, 0rem);
top: var(--space-0, 0rem);
width: calc(100% + var(--space-xxs, 0.25rem));
height: 100%;
border-left: var(--border-4, 0.25rem) var(--border-style, solid) var(--header-menu-item-outline);
}
header nav.menu-primary nav.visible-links > a::before {
margin-top: var(--space-xxs, 0.25rem);
}
header nav.menu-primary nav.more, header nav.menu-primary nav.hidden {
display: none;
}
header nav.menu-secondary {
display: none;
flex-direction: column;
justify-content: flex-start;
}
header nav.menu-secondary nav {
flex-direction: column;
}
header nav.menu-secondary nav .btn-select button {
width: 100%;
justify-content: space-between;
}
header nav.menu-secondary nav a {
align-items: center;
justify-content: flex-start;
}
header nav.menu-secondary nav a.current {
position: relative;
}
header nav.menu-secondary nav a.current::after {
content: "";
background-color: transparent;
position: absolute;
right: var(--space-0, 0rem);
top: var(--space-0, 0rem);
width: calc(100% + var(--space-s, 0.75rem));
height: 100%;
border-left: var(--border-4, 0.25rem) var(--border-style, solid) var(--header-menu-secondary-txt);
}
header .branding {
display: flex;
}
header .branding * {
display: flex;
}
header .branding .logo-bayern {
display: none;
}
header .nav-toggler {
display: flex;
justify-self: flex-end;
align-self: center;
background-color: transparent;
border-radius: var(--roundness-s, 0.75rem);
height: 2.5rem;
width: 2.5rem;
margin: var(--space-m, 1rem) var(--space-s, 0.75rem) var(--space-m, 1rem) var(--space-0, 0rem);
padding: var(--space-0, 0rem);
border: none;
box-shadow: none;
color: var(--header-branding-icon);
}
header .nav-toggler.collapse::after {
-webkit-mask-image: var(--header-icon-menu-closed);
mask-image: var(--header-icon-menu-closed);
}
}
@media screen and (max-width: 991.99px) and (prefers-reduced-motion: no-preference) {
header .nav-toggler.collapse::after {
animation: close-menu 300ms linear;
}
}
@media screen and (max-width: 991.99px) {
header .nav-toggler::after {
content: "";
border-radius: var(--roundness-s, 0.75rem);
width: 2.5rem;
height: 2.5rem;
background-color: currentColor;
-webkit-mask-image: var(--header-icon-menu-open);
mask-image: var(--header-icon-menu-open);
-webkit-mask-size: cover;
mask-size: cover;
}
}
@media screen and (max-width: 991.99px) and (prefers-reduced-motion: no-preference) {
header .nav-toggler::after {
animation: open-menu 300ms linear;
}
}
@media screen and (max-width: 991.99px) {
header .nav-toggler:focus {
outline: var(--border-2, 0.125rem) var(--border-style, solid) currentColor;
outline-offset: var(--border-2, 0.125rem);
}
}
@media (min-width: 992px) {
header .only-mobile {
display: none !important;
}
header .only-mobile * {
display: none !important;
}
header nav.menu-primary {
flex-direction: row;
}
header nav.menu-primary nav.more:not(:has(.hidden)) {
position: relative;
}
header nav.menu-primary nav.more:has(.current) button {
position: relative;
}
header nav.menu-primary nav.more:has(.current) button::after {
content: "";
background-color: transparent;
position: absolute;
width: 100%;
top: var(--space-0, 0rem);
right: var(--space-0, 0rem);
height: calc(100% + var(--space-xxs, 0.25rem));
border-bottom: var(--border-4, 0.25rem) var(--border-style, solid) var(--header-menu-item-outline);
}
header nav.menu-primary nav.more:has(.current)::before {
position: absolute;
margin: var(--space-0, 0rem) !important;
align-self: center !important;
}
header nav.menu-primary nav.visible-links > a.current {
position: relative;
}
header nav.menu-primary nav.visible-links > a.current::after {
content: "";
background-color: transparent;
position: absolute;
width: 100%;
top: var(--space-0, 0rem);
right: var(--space-0, 0rem);
height: calc(100% + var(--space-xxs, 0.25rem));
border-bottom: var(--border-4, 0.25rem) var(--border-style, solid) var(--header-menu-item-outline);
}
header nav.menu-primary nav.visible-links > a::before {
margin: var(--space-0, 0rem) !important;
align-self: center !important;
}
header nav.menu-primary nav.hidden-links {
display: flex;
align-self: stretch;
position: absolute;
}
header nav.menu-primary nav.hidden-links > a {
align-self: stretch;
justify-content: flex-start;
}
header nav.menu-primary nav.hidden-links > a.current {
position: relative;
}
header nav.menu-primary nav.hidden-links > a.current::after {
content: "";
background-color: transparent;
position: absolute;
right: var(--space-0, 0rem);
top: var(--space-0, 0rem);
width: calc(100% + var(--space-xxs, 0.25rem));
height: 100%;
border-left: var(--border-4, 0.25rem) var(--border-style, solid) var(--header-menu-item-outline);
}
header nav.menu-primary nav.hidden {
display: none;
position: unset;
}
header nav.menu-secondary {
flex-direction: row;
justify-content: space-between;
}
header nav.menu-secondary nav {
flex-direction: row;
}
header nav.menu-secondary nav a.current {
position: relative;
}
header nav.menu-secondary nav a.current::after {
content: "";
background-color: transparent;
position: absolute;
right: var(--space-0, 0rem);
top: var(--space-0, 0rem);
width: 100%;
height: calc(100% + var(--space-xs, 0.5rem));
border-bottom: var(--border-4, 0.25rem) var(--border-style, solid) var(--header-menu-secondary-txt);
}
header .nav-toggler {
display: none;
}
}
msb-tooltip-info,
msb-dialog-help,
msb-dialog-header-help,
msb-dialog-content-help,
msb-collapse-info,
msb-info-button {
display: contents;
}
.tooltip-help {
--tooltip-content-margin-top: var(--space-0, 0rem);
--tooltip-parent-width: var(--space-0, 0rem);
--tooltip-position: var(--space-m, 1rem);
position: absolute;
display: block;
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
top: calc(var(--tooltip-position) + var(--tooltip-content-margin-top));
left: unset;
right: var(--space-0, 0rem);
padding: var(--space-m, 1rem);
border-style: var(--border-style, solid);
border-width: var(--border-2, 0.125rem);
border-color: var(--help-tooltip-border);
border-radius: var(--roundness-s, 0.75rem);
visibility: hidden;
min-width: 100%;
max-width: calc(var(--tooltip-parent-width) - var(--space-m, 1rem) - var(--space-m, 1rem));
text-align: start;
line-height: 1.125rem;
background: var(--help-tooltip-bg);
color: var(--help-txt);
}
.tooltip-help.top {
top: unset;
bottom: calc(var(--tooltip-position) + var(--tooltip-content-margin-top));
right: var(--space-0, 0rem);
left: unset;
}
.tooltip-help.top::before {
right: var(--space-m, 1rem);
left: unset;
top: unset;
bottom: -0.75em;
transform: rotate(135deg);
}
.tooltip-help.left {
right: unset;
left: var(--space-0, 0rem);
}
.tooltip-help.left::before {
left: var(--space-m, 1rem);
right: unset;
}
.tooltip-help::before {
content: "";
display: block;
visibility: hidden;
width: 1.2em;
height: 1.2em;
top: -0.75em;
bottom: unset;
right: var(--space-m, 1rem);
left: unset;
position: absolute;
background: var(--help-tooltip-bg);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--help-tooltip-border);
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--help-tooltip-border);
transform: rotate(-45deg);
}
.tooltip-help[open] {
visibility: visible;
z-index: 100;
}
.tooltip-help[open]::before {
visibility: visible;
}
.collapse-help {
--tooltip-content-margin-top: var(--space-0, 0rem);
--tooltip-parent-width: var(--space-0, 0rem);
--tooltip-position: var(--space-m, 1rem);
display: none;
visibility: collapse;
padding: var(--space-m, 1rem);
padding-right: var(--space-xl, 2rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
min-width: 100%;
max-width: calc(var(--tooltip-parent-width) - var(--space-m, 1rem) - var(--space-m, 1rem));
text-align: start;
line-height: 1.125rem;
background: var(--help-tooltip-bg);
color: var(--help-txt);
position: relative;
border: none;
}
.collapse-help [data-close] {
position: absolute;
top: var(--space-0, 0rem);
right: var(--space-0, 0rem);
border-radius: var(--roundness-xs, 0.5rem);
border: none;
background-color: transparent;
box-shadow: var(--elevation-0, initial);
color: var(--help-close-button-color);
}
.collapse-help [data-close]:focus {
outline-offset: var(--border-0, 0);
outline-color: var(--help-tooltip-border);
}
.collapse-help:focus-within {
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--help-tooltip-border);
}
.collapse-help[open] {
display: block;
visibility: visible;
}
dialog.sidebar-help {
display: none;
visibility: hidden;
isolation: isolate;
z-index: 1;
background-color: var(--help-sidebar-bg);
color: var(--help-txt);
width: 0;
height: 80vh;
position: fixed;
border: var(--border-0, 0);
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
border-radius: var(--roundness-s, 0.75rem);
padding: var(--space-0, 0rem);
}
dialog.sidebar-help::backdrop {
background-color: transparent;
}
dialog.sidebar-help[open] {
display: block;
margin-right: var(--space-0, 0rem);
visibility: visible;
}
@media (min-width: 992px) {
dialog.sidebar-help[open] {
width: 20vw;
}
}
@media screen and (max-width: 991.99px) {
dialog.sidebar-help[open] {
width: 80vw;
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.sidebar-help[open] {
animation: slide-in 300ms ease-in-out;
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.sidebar-help.hide {
animation: slide-out 300ms ease-in-out;
}
}
dialog.sidebar-help .header,
dialog.sidebar-help header {
position: initial;
box-shadow: none;
display: flex;
padding: var(--space-m, 1rem);
align-items: flex-start;
align-self: stretch;
background-color: var(--help-sidebar-header-bg);
font-size: 1.125rem;
line-height: 150%;
color: var(--help-txt);
justify-content: space-between;
flex-direction: row;
gap: var(--space-xxs, 0.25rem);
}
dialog.sidebar-help .header button[data-close],
dialog.sidebar-help header button[data-close] {
color: var(--help-txt);
background-color: var(--help-close-button-bg);
width: 2rem;
height: 2rem;
}
dialog.sidebar-help .header button[data-close]:after,
dialog.sidebar-help header button[data-close]:after {
display: block;
width: 1rem;
height: 1rem;
inset: 0;
background-color: currentColor;
}
dialog.sidebar-help .header button[data-close]:focus, dialog.sidebar-help .header button[data-close]:active,
dialog.sidebar-help header button[data-close]:focus,
dialog.sidebar-help header button[data-close]:active {
outline-offset: var(--border-2, 0.125rem);
outline-color: currentColor;
}
dialog.sidebar-help .header button[data-close]:hover,
dialog.sidebar-help header button[data-close]:hover {
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) currentColor;
}
dialog.sidebar-help .content {
display: flex;
padding: var(--space-m, 1rem);
align-items: flex-start;
gap: var(--space-xl, 2rem);
text-overflow: ellipsis;
font-size: 1rem;
line-height: 150%;
}
msb-input {
display: contents;
}
.form-group {
position: relative;
width: 100%;
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: min-content min-content min-content;
}
.form-group:not(:has(.counter)) input ~ .hint {
grid-column: span 2;
}
.form-group {
--input-padding-right: calc(var(--space-xs, 0.5rem) + var(--input-padding-icon, var(--space-m, 1rem)) + var(--input-padding-info, var(--space-m, 1rem)));
}
.form-group.withIcon {
--input-padding-icon: 2.75em;
}
.form-group.withInfo {
--input-padding-info: 2.75em;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini {
--input-height: calc(2.8125rem * 0.75);
--input-size: 0.75rem;
--input-padding-top: var(--input-size, 1rem);
--input-margin-bottom: calc(var(--input-size, 1rem) / 3);
--input-padding-size: calc(var(--input-size, 0.75rem) /2);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ label {
--input-label-top: var(--space-xs, 0.5rem);
font-size: 0.75em;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ .hint,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ .counter,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ .invalid-feedback,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ .valid-feedback {
--input-size: 0.75em;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ msb-button-action button[type=reset],
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ msb-button-action button[type=submit] {
width: 1.25rem;
height: 1.25rem;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ msb-icon svg {
width: 1.25rem;
height: 1.25rem;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ button[type=reset],
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ button[type=submit],
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ svg {
width: 1.25rem;
height: 1.25rem;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).mini ~ svg {
padding: var(--space-xxs, 0.25rem);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) {
line-height: 1.347em;
overflow: hidden;
text-overflow: ellipsis;
height: var(--input-size, 1rem);
min-height: var(--input-height, 2.8125rem);
font-size: var(--input-size, 1rem);
grid-row: 1;
grid-column: span 2;
display: inline-block;
box-sizing: border-box;
width: var(--input-width, 100%);
padding-right: var(--input-padding-right, 0rem);
margin-bottom: var(--input-margin-bottom, var(--space-m, 1rem));
padding-left: var(--input-padding-side, 0.5rem);
padding-top: var(--space-s, 0.75rem);
background-color: var(--input-bg);
border-radius: var(--roundness-xxs, 0.25rem) var(--roundness-xxs, 0.25rem) var(--roundness-0, 0rem) var(--roundness-0, 0rem);
border: none;
padding-bottom: var(--border-1, 0.0625rem);
border-bottom: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-line);
color: var(--input-line);
font-family: var(--base-font-family, Roboto, sans-serif);
}
@supports (-webkit-touch-callout: none) or (-webkit-appearance: none) {
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) {
height: var(--input-height, 2.8125rem);
}
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).neutral {
background-color: var(--input-neutral-bg);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).neutral ~ label {
color: var(--input-neutral-label);
background-color: var(--input-neutral-bg);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).neutral:autofill {
box-shadow: 0 0 0px 1000px var(--input-bg) inset;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).neutral ~ [data-toggle=collapse],
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).neutral ~ [data-toggle=tooltip],
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).neutral ~ [data-toggle=sidebar] {
background-color: var(--input-neutral-bg) !important;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):autofill {
box-shadow: 0 0 0px 1000px var(--input-bg) inset;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):hover:not(:disabled, :read-only) {
padding-bottom: var(--border-0, 0);
border-width: var(--border-1, 0.0625rem);
border-color: var(--input-line);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):focus-within, input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):focus {
outline: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-label);
outline-offset: var(--border-4, 0.25rem);
border-bottom-width: var(--border-2, 0.125rem);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):focus:not(:disabled, :read-only) {
border-color: var(--input-line);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden])::placeholder {
color: var(--input-placeholder);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):-moz-placeholder:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):focus:not(:read-only):not(.mini) ~ label, input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):placeholder-shown:not(.mini) ~ label, input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).value-shown:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):-moz-placeholder:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):focus:not(:read-only):is(.mini) ~ label, input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):placeholder-shown:is(.mini) ~ label, input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).value-shown:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):read-only:not(:disabled) {
cursor: not-allowed;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):required ~ label::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):disabled {
color: var(--input-disabled);
border-color: var(--input-disabled);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):disabled ~ label {
color: var(--input-disabled);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):disabled ~ .invalid-feedback,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):disabled ~ .valid-feedback,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):disabled ~ .hint,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]):disabled ~ .counter {
display: none;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ [data-toggle=collapse],
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ [data-toggle=tooltip],
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ [data-toggle=sidebar] {
background-color: var(--input-bg) !important;
top: var(--space-xxs, 0.25rem) !important;
right: var(--space-xs, 0.5rem) !important;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ msb-icon svg,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ svg {
position: absolute;
top: var(--space-xs, 0.5rem);
right: var(--input-padding-info, var(--space-m, 1rem));
width: 1.5em;
height: 1.5em;
fill: var(--input-placeholder);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ .hint {
grid-row: 2;
grid-column: 1;
margin-left: var(--space-xs, 0.5rem);
font-size: calc(var(--input-size, 1rem) / 16 * 13);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ .counter {
grid-row: 2;
grid-column: 2;
margin-right: var(--space-xs, 0.5rem);
font-size: calc(var(--input-size, 1rem) / 16 * 13);
text-align: end;
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ .invalid-feedback,
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ .valid-feedback {
grid-row: 3;
grid-column: 1/span 2;
margin-left: var(--space-xs, 0.5rem);
display: none;
font-size: var(--input-size, 1rem);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ label {
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
line-height: 1.26688rem;
position: absolute;
pointer-events: none;
left: var(--space-s, 0.75rem);
color: var(--input-label);
background-color: var(--input-bg);
top: var(--input-label-top, var(--input-size, 1rem));
}
@media (prefers-reduced-motion: no-preference) {
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]) ~ label {
transition: all 300ms ease-in-out;
}
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isValid {
border-color: var(--input-valid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isValid ~ label {
color: var(--input-valid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isValid ~ label:after {
color: var(--input-valid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isValid ~ .valid-feedback {
display: block;
color: var(--input-valid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isValid:hover:not(:disabled, :read-only) {
border-color: var(--input-valid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isValid:focus:not(:disabled, :read-only) {
border-color: var(--input-valid);
outline-color: var(--input-valid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isInvalid {
border-color: var(--input-invalid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isInvalid ~ label {
color: var(--input-invalid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isInvalid ~ label:after {
color: var(--input-invalid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isInvalid ~ .invalid-feedback {
display: block;
color: var(--input-invalid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isInvalid:hover:not(:disabled, :read-only) {
border-color: var(--input-invalid);
}
input:not([type=button], [type=checkbox], [type=color], [type=file], [type=image], [type=radio], [type=range], [type=reset], [type=submit], [type=hidden]).isInvalid:focus:not(:disabled, :read-only) {
border-color: var(--input-invalid);
outline-color: var(--input-invalid);
}
input[type=date], input[type=datetime-local], input[type=time] {
appearance: none;
}
input[type=date] ~ label, input[type=datetime-local] ~ label, input[type=time] ~ label {
position: absolute;
font-size: 0.75em;
line-height: 126.688%;
left: 0.5rem;
top: 0.0625rem;
}
@supports (-webkit-touch-callout: none) or (-webkit-appearance: none) {
input[type=date]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value, input[type=time]::-webkit-date-and-time-value, input[type=week]::-webkit-date-and-time-value, input[type=month]::-webkit-date-and-time-value {
text-align: left;
padding-top: var(--space-s, 0.75rem);
}
}
input::-webkit-calendar-picker-indicator {
/* immer sichtbar */
pointer-events: auto;
cursor: pointer;
/*eigene Focus outline*/
}
input::-webkit-calendar-picker-indicator:focus-within {
outline: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-label);
outline-offset: var(--border-2, 0.125rem);
border-radius: var(--roundness-xxs, 0.25rem);
}
@media (prefers-color-scheme: dark) {
input::-webkit-calendar-picker-indicator::-webkit-calendar-picker-indicator {
filter: invert(1);
}
}
@media (prefers-color-scheme: dark) {
input {
color-scheme: dark;
}
.color-scheme-light input {
color-scheme: light;
}
}
@media (prefers-color-scheme: light) {
input {
color-scheme: light;
}
.color-scheme-dark input {
color-scheme: dark;
}
}
main .intro *,
.main .intro * {
box-sizing: border-box;
}
main .intro,
.main .intro {
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
align-self: stretch;
flex-shrink: 0;
position: relative;
}
main .start-page-container,
.main .start-page-container {
max-width: 1140px;
width: 100%;
margin: var(--space-l, 1.5rem) auto;
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(1, 1fr);
gap: var(--space-l, 1.5rem);
}
main .start-page-container.overflow-intro,
.main .start-page-container.overflow-intro {
margin-top: calc(-1 * (8.25rem - var(--space-l, 1.5rem)));
display: grid;
grid-template-rows: repeat(1, 1fr);
grid-template-columns: repeat(1, 1fr);
gap: var(--space-l, 1.5rem);
}
main .start-page-image,
.main .start-page-image {
padding: var(--space-0, 0rem);
padding-bottom: 8.25rem;
display: flex;
flex-direction: column;
gap: var(--space-xxl, 3rem);
align-self: stretch;
overflow: hidden;
background: url('start-header-bg.a3e972e7021db359.jpg') center;
background-size: cover;
background-repeat: no-repeat;
background-color: var(--secondary);
}
main .start-page-image > *,
.main .start-page-image > * {
max-width: 1140px;
width: 100%;
margin-left: auto;
margin-right: auto;
}
main .start-page-image h1,
main .start-page-image .h1,
.main .start-page-image h1,
.main .start-page-image .h1 {
color: var(--white);
}
main .start-page-image h1:is(.heading-intro),
main .start-page-image .h1:is(.heading-intro),
.main .start-page-image h1:is(.heading-intro),
.main .start-page-image .h1:is(.heading-intro) {
text-align: center;
}
main .start-page-image h1:not(.heading-intro),
main .start-page-image .h1:not(.heading-intro),
.main .start-page-image h1:not(.heading-intro),
.main .start-page-image .h1:not(.heading-intro) {
margin-bottom: -8.25rem;
padding-left: var(--space-s, 0.75rem);
}
msb-link-icon {
display: contents;
}
p > a,
p > * > a {
display: inline !important;
}
p > a[target=_blank]::before, p > a[target=_blank]::after, p > a[download]::before, p > a[download]::after, p > a.more-info::before, p > a.more-info::after,
p > * > a[target=_blank]::before,
p > * > a[target=_blank]::after,
p > * > a[download]::before,
p > * > a[download]::after,
p > * > a.more-info::before,
p > * > a.more-info::after {
margin-bottom: calc(-1 * var(--space-xxs, 0.25rem));
}
p > a.with-icon svg,
p > * > a.with-icon svg {
margin-bottom: calc(-1 * var(--space-xxs, 0.25rem));
}
a {
color: var(--link-color);
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
text-decoration: none;
}
a.disabled, a:disabled, a[disabled] {
pointer-events: none;
cursor: default;
}
a span {
text-decoration: none;
}
a:focus {
border-radius: var(--roundness-xxs, 0.25rem);
outline-color: var(--link-color);
}
a[target=_blank] svg, a[download] svg, a.more-info svg {
display: none;
}
a.icon-right:not(.btn) {
justify-content: space-between;
width: 100%;
}
a.icon-right[download]:not(.btn, .card):not(.more-info, .with-icon):after, a.icon-right[target=_blank]:not(.btn, .card):not(.more-info, .with-icon):after, a.icon-right.more-info:not(.btn, .with-icon):after {
content: "";
display: inline-flex;
align-self: baseline;
width: 1.5rem;
height: 1.5rem;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
a.icon-right[download]:is(.btn):not(.more-info, .with-icon):after, a.icon-right[target=_blank]:is(.btn):not(.more-info, .with-icon):after, a.icon-right.more-info:is(.btn):not(.with-icon):after {
content: "";
display: inline-flex;
align-self: center;
width: 1.5rem;
height: 1.5rem;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
a.icon-right[download]:not(.more-info, .with-icon)::after {
-webkit-mask-image: var(--link-icon-download);
mask-image: var(--link-icon-download);
}
a.icon-right[target=_blank]:not(.more-info, .with-icon, [download])::after {
-webkit-mask-image: var(--link-icon-external);
mask-image: var(--link-icon-external);
}
a.icon-right.more-info:not(.with-icon)::after {
-webkit-mask-image: var(--link-icon-more-info);
mask-image: var(--link-icon-more-info);
}
a.icon-right.with-icon:not(.more-info) svg:is(:last-child) {
width: 1.5rem;
height: 1.5rem;
-webkit-mask-size: cover;
mask-size: cover;
display: inline-flex;
fill: currentColor;
}
a.icon-right.with-icon:not(.more-info) span.icon:is(:first-child) {
background-color: currentColor;
}
a.icon-right.with-icon:not(.more-info) svg:not(:last-child) {
display: none;
}
a[target=_blank], a[download], a.more-info, a.with-icon {
display: inline-flex;
gap: var(--space-xs, 0.5rem);
margin: var(--space-0, 0rem);
}
@media (prefers-reduced-motion: no-preference) {
a[target=_blank], a[download], a.more-info, a.with-icon {
transition: all 300ms ease-in-out;
}
}
a[target=_blank]::before, a[target=_blank]::after,
a[target=_blank] svg, a[download]::before, a[download]::after,
a[download] svg, a.more-info::before, a.more-info::after,
a.more-info svg, a.with-icon::before, a.with-icon::after,
a.with-icon svg {
min-width: 1.5rem;
}
a[target=_blank]:hover, a[download]:hover, a.more-info:hover, a.with-icon:hover {
text-decoration: underline;
}
a[target=_blank]:hover span, a[download]:hover span, a.more-info:hover span, a.with-icon:hover span {
text-decoration: underline;
}
a:not(.icon-right)[download]:not(.btn, .card):not(.more-info, .with-icon)::before, a:not(.icon-right)[target=_blank]:not(.btn, .card):not(.more-info, .with-icon)::before, a:not(.icon-right).more-info:not(.btn, .with-icon)::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1.5rem;
-webkit-mask-size: cover;
mask-size: cover;
margin-right: var(--space-xxs, 0.25rem);
background-color: currentColor;
}
a:not(.icon-right)[download]:is(.btn):not(.more-info, .with-icon)::before, a:not(.icon-right)[target=_blank]:is(.btn):not(.more-info, .with-icon)::before, a:not(.icon-right).more-info:is(.btn):not(.with-icon)::before {
content: "";
display: inline-block;
width: 1.5rem;
height: 1.5rem;
-webkit-mask-size: cover;
mask-size: cover;
margin-right: var(--space-xxs, 0.25rem);
background-color: currentColor;
}
a:not(.icon-right)[download]:not(.more-info, .with-icon)::before {
-webkit-mask-image: var(--link-icon-download);
mask-image: var(--link-icon-download);
}
a:not(.icon-right)[target=_blank]:not(.more-info, .with-icon, [download])::before {
-webkit-mask-image: var(--link-icon-external);
mask-image: var(--link-icon-external);
}
a:not(.icon-right).more-info:not(.with-icon)::before {
-webkit-mask-image: var(--link-icon-more-info);
mask-image: var(--link-icon-more-info);
}
a.with-icon:not(.icon-right, .more-info) svg:is(:first-child) {
width: 1.5rem;
height: 1.5rem;
-webkit-mask-size: cover;
mask-size: cover;
margin-top: var(--space-xxs, 0.25rem);
margin-right: var(--space-xxs, 0.25rem);
display: inline-flex;
align-self: first baseline;
fill: currentColor;
}
a.with-icon:not(.icon-right, .more-info) span.icon:is(:first-child) {
background-color: currentColor;
}
a.with-icon:not(.icon-right, .more-info) svg:not(:first-child) {
display: none;
}
msb-spinner {
display: contents;
}
.spinner {
content: "";
-webkit-mask-image: url('loading_spinner.4fbb9292ac17a571.svg');
mask-image: url('loading_spinner.4fbb9292ac17a571.svg');
-webkit-mask-size: cover;
mask-size: cover;
display: inline-flex;
background-color: var(--spinner-color);
width: 3.125rem;
height: 3.125rem;
}
@media (prefers-reduced-motion: no-preference) {
.spinner {
animation: spin 2s linear infinite;
}
}
.spinner.spinner-xs {
width: 1rem;
height: 1rem;
}
.spinner.spinner-s {
width: 1.5rem;
height: 1.5rem;
}
.spinner.spinner-m {
width: 2rem;
height: 2rem;
}
.spinner.spinner-l {
width: 3rem;
height: 3rem;
}
.spinner.spinner-xl {
width: 5rem;
height: 5rem;
}
.spinner.neutral {
--spinner-color: var(--spinner-color-neutral);
}
.spinner.primary {
--spinner-color: var(--spinner-color-primary);
}
.spinner.secondary {
--spinner-color: var(--spinner-color-secondary);
}
.spinner.success {
--spinner-color: var(--spinner-color-success);
}
.spinner.help {
--spinner-color: var(--spinner-color-help);
}
.spinner.warning {
--spinner-color: var(--spinner-color-warning);
}
.spinner.danger {
--spinner-color: var(--spinner-color-danger);
}
.spinner.mode {
--spinner-color: var(--spinner-color-mode);
}
.wait-content {
position: relative;
}
.wait-content *:not(.btn) {
color: var(--disabled);
}
.wait-content > msb-spinner:last-child > .spinner,
.wait-content > .spinner:last-child {
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
margin: auto;
}
table.table-card thead {
background-color: var(--mini-card-header-bg);
color: var(--mini-card-header-text);
font-size: 1rem;
line-height: 150%;
}
table.table-card thead tr::before {
background-color: var(--mini-card-header-bg);
color: var(--mini-card-header-text);
border-color: transparent;
}
table.table-card thead tr:focus, table.table-card thead tr:focus-within {
outline-color: var(--mini-card-header-text);
}
table.table-card thead th {
background-color: var(--mini-card-header-bg);
color: var(--mini-card-header-text);
font-size: 1rem;
font-weight: 400;
line-height: 150%;
}
table.table-card thead th button {
font-weight: 400;
}
table.table-card thead th.footer {
width: 6rem;
}
table.table-card {
border-collapse: separate;
border-spacing: var(--space-0, 0rem) var(--space-s, 0.75rem);
padding: var(--space-0, 0rem) var(--space-xxs, 0.25rem);
}
table.table-card.timeline {
padding-left: var(--space-xxl, 3rem);
}
table.table-card.timeline tbody {
position: relative;
}
table.table-card.timeline tbody::before {
content: "";
position: absolute;
left: calc(-1 * (var(--space-xxl, 3rem) - var(--border-1, 0.0625rem)) / 2);
top: var(--space-0, 0rem);
bottom: var(--space-0, 0rem);
border-left: var(--border-1, 0.0625rem) var(--border-style, solid) var(--neutral-25);
}
table.table-card.timeline tbody tr {
position: relative;
}
table.table-card.timeline tbody tr::after {
content: "";
position: absolute;
top: 50%;
left: calc(-1 * (var(--space-xxl, 3rem) + var(--space-l, 1.5rem) + var(--border-1, 0.0625rem)) / 2);
height: var(--space-l, 1.5rem);
width: var(--space-l, 1.5rem);
border-radius: var(--roundness-xxxl, 50%);
transform: translateY(-50%);
background: var(--card-status-color);
}
table.table-card tbody {
background-color: var(--card-bg);
color: var(--card-color);
font-size: 0.875rem;
line-height: 1.3125rem;
}
table.table-card .title {
font-size: 0.875rem;
font-weight: 500;
line-height: 1.3125rem;
}
table.table-card tr {
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.3125rem;
border-radius: var(--roundness-xs, 0.5rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
background-color: var(--card-bg);
border: var(--border-2, 0.125rem);
border-style: var(--border-style, solid);
border-color: transparent;
}
table.table-card tr.neutral {
--card-status-color: var(--card-status-color-neutral);
--card-teaser-title:var(--card-teaser-title-neutral);
--card-teaser-txt:var(--card-teaser-txt-neutral);
--card-teaser-link: var(--card-teaser-link-neutral);
--card-teaser-bg:var(--card-teaser-bg-neutral);
}
table.table-card tr.primary {
--card-status-color: var(--card-status-color-primary);
--card-teaser-title:var(--card-teaser-title-primary);
--card-teaser-txt:var(--card-teaser-txt-primary);
--card-teaser-link: var(--card-teaser-link-primary);
--card-teaser-bg:var(--card-teaser-bg-primary);
}
table.table-card tr.secondary {
--card-status-color: var(--card-status-color-secondary);
--card-teaser-title:var(--card-teaser-title-secondary);
--card-teaser-txt:var(--card-teaser-txt-secondary);
--card-teaser-link: var(--card-teaser-link-secondary);
--card-teaser-bg:var(--card-teaser-bg-secondary);
}
table.table-card tr.success {
--card-status-color: var(--card-status-color-success);
--card-teaser-title:var(--card-teaser-title-success);
--card-teaser-txt:var(--card-teaser-txt-success);
--card-teaser-link: var(--card-teaser-link-success);
--card-teaser-bg:var(--card-teaser-bg-success);
}
table.table-card tr.help {
--card-status-color: var(--card-status-color-help);
--card-teaser-title:var(--card-teaser-title-help);
--card-teaser-txt:var(--card-teaser-txt-help);
--card-teaser-link: var(--card-teaser-link-help);
--card-teaser-bg:var(--card-teaser-bg-help);
}
table.table-card tr.warning {
--card-status-color: var(--card-status-color-warning);
--card-teaser-title:var(--card-teaser-title-warning);
--card-teaser-txt:var(--card-teaser-txt-warning);
--card-teaser-link: var(--card-teaser-link-warning);
--card-teaser-bg:var(--card-teaser-bg-warning);
}
table.table-card tr.danger {
--card-status-color: var(--card-status-color-danger);
--card-teaser-title:var(--card-teaser-title-danger);
--card-teaser-txt:var(--card-teaser-txt-danger);
--card-teaser-link: var(--card-teaser-link-danger);
--card-teaser-bg:var(--card-teaser-bg-danger);
}
table.table-card tr.mode {
--card-status-color: var(--card-status-color-mode);
--card-teaser-title:var(--card-teaser-title-mode);
--card-teaser-txt:var(--card-teaser-txt-mode);
--card-teaser-link: var(--card-teaser-link-mode);
--card-teaser-bg:var(--card-teaser-bg-mode);
}
table.table-card tr .status-indicator {
display: inline-flex;
flex-wrap: nowrap;
white-space: nowrap;
font-size: 0.875rem;
padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem);
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
text-align: center;
border-radius: var(--roundness-xs, 0.5rem);
background-color: var(--card-statusindicator-color) !important;
}
table.table-card tr .status-indicator svg {
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
fill: currentColor;
overflow: unset;
}
table.table-card tr .status-indicator svg:not(:first-child),
table.table-card tr .status-indicator img:not(:first-child) {
display: none;
}
table.table-card tr .status-indicator {
width: 100%;
}
table.table-card tr td {
padding-top: var(--space-s, 0.75rem);
padding-bottom: var(--space-s, 0.75rem);
}
table.table-card tr td:first-of-type {
padding-left: var(--space-m, 1rem);
}
table.table-card tr td:last-of-type {
padding-right: var(--space-xs, 0.5rem);
}
table.table-card tr.add {
opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
table.table-card tr.add {
animation: add-card 300ms ease-in 300ms;
}
}
table.table-card tr.remove {
opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
table.table-card tr.remove {
animation: remove-card 300ms ease-out 300ms;
}
}
table.table-card tr:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--card-status-color);
outline-offset: var(--border-2, 0.125rem);
}
table.table-card tr::before {
content: "";
display: table-cell;
width: var(--space-0, 0rem);
border-radius: var(--roundness-xs, 0.5rem) var(--roundness-0, 0rem) var(--roundness-0, 0rem) var(--roundness-xs, 0.5rem);
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--card-status-color);
}
table.table-card td,
table.table-card th {
padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem) var(--space-xxs, 0.25rem) var(--space-m, 1rem);
}
table.table-card td .footer,
table.table-card th .footer {
height: 100%;
display: flex;
gap: var(--space-m, 1rem);
}
@media screen and (max-width: 991.99px) {
table.table-card td .footer,
table.table-card th .footer {
flex-direction: column;
justify-content: flex-start;
align-items: flex-end;
margin: auto var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
@media (min-width: 992px) {
table.table-card td .footer,
table.table-card th .footer {
flex-direction: row;
justify-content: flex-end;
align-items: center;
padding-left: var(--space-s, 0.75rem);
margin: var(--space-0, 0rem) var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
table.table-card td:last-child,
table.table-card th:last-child {
border-radius: var(--roundness-0, 0rem) var(--roundness-xs, 0.5rem) var(--roundness-xs, 0.5rem) var(--roundness-0, 0rem);
}
.card.miniCard {
display: flex;
align-items: center;
gap: var(--space-s, 0.75rem);
flex: 1 0 0;
border-radius: var(--roundness-xs, 0.5rem);
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--card-status-color);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
line-height: 1.3125rem;
}
.card.miniCard .status-indicator {
background-color: var(--statusindicator-color);
}
.card.miniCard {
padding: var(--space-s, 0.75rem) var(--space-xs, 0.5rem) var(--space-s, 0.75rem) var(--space-m, 1rem);
flex-direction: row;
justify-content: space-between;
}
.card.miniCard .content {
display: flex;
padding-right: var(--space-0, 0rem);
gap: var(--space-xs, 0.5rem);
flex: 1;
line-height: 150%;
align-items: flex-start;
}
@media (min-width: 992px) {
.card.miniCard .content {
flex-direction: column;
}
}
@media screen and (max-width: 991.99px) {
.card.miniCard .content {
flex-direction: column;
}
}
.card.miniCard .content > * {
margin-block: var(--space-0, 0rem);
margin-inline: var(--space-0, 0rem);
}
@media (min-width: 992px) {
.card.miniCard .content {
flex-direction: row;
align-items: center;
}
}
@media screen and (max-width: 991.99px) {
.card.miniCard .content {
flex-direction: column;
}
}
.card.miniCard .content .title {
font-weight: 500;
line-height: 1.3125rem;
}
.card.miniCard .content .status-indicator {
align-self: first baseline;
}
.card.miniCard .content .meta {
line-height: 150%;
display: flex;
}
.card.miniCard .content .meta > * {
flex: 1 1 0;
}
@media screen and (max-width: 991.99px) {
.card.miniCard .content .meta {
padding: var(--space-xxs, 0.25rem);
flex-direction: column;
}
}
@media (min-width: 992px) {
.card.miniCard .content .meta {
padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem);
flex-direction: row;
align-items: first baseline;
gap: var(--space-l, 1.5rem);
}
}
.card.miniCard .footer,
.card.miniCard footer {
height: 100%;
display: flex;
align-items: flex-start;
gap: var(--space-m, 1rem);
}
@media screen and (max-width: 991.99px) {
.card.miniCard .footer,
.card.miniCard footer {
flex-direction: column;
justify-content: flex-start;
align-self: flex-start;
width: fit-content;
margin: var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
@media (min-width: 992px) {
.card.miniCard .footer,
.card.miniCard footer {
flex-direction: row;
justify-content: flex-end;
padding-left: var(--space-s, 0.75rem);
margin: var(--space-0, 0rem) var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
.card.miniCard.notChangable .footer,
.card.miniCard.notChangable footer {
display: none;
visibility: hidden;
}
.card.miniCard.timeline {
margin-left: var(--space-xxl, 3rem);
}
.card.miniCard.timeline::before {
content: "";
position: absolute;
left: calc(-1 * var(--space-xl, 2rem));
top: calc(-1 * var(--space-s, 0.75rem));
height: calc(100% + 2 * var(--space-s, 0.75rem));
width: var(--space-0, 0rem);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--neutral-25);
border-left: var(--border-0, 0);
}
.card.miniCard.timeline::after {
content: "";
position: absolute;
top: calc(50% - var(--space-s, 0.75rem));
left: calc(-1 * (var(--space-xl, 2rem) + var(--space-l, 1.5rem) / 2 - var(--border-2, 0.125rem) / 2));
height: var(--space-l, 1.5rem);
width: var(--space-l, 1.5rem);
aspect-ratio: 1;
border-radius: var(--roundness-xxxl, 50%);
background: var(--card-status-color);
}
.card.miniCardCombined {
--status-color: var(--neutral-25);
display: grid;
grid-template-columns: 1fr auto;
border-left: var(--border-0, 0);
padding: var(--space-0, 0rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
line-height: 1.3125rem;
gap: var(--space-s, 0.75rem);
row-gap: var(--space-0, 0rem);
margin-left: var(--space-xs, 0.5rem);
}
.card.miniCardCombined.notChangable .footer,
.card.miniCardCombined.notChangable footer {
display: none;
visibility: hidden;
}
.card.miniCardCombined .miniCard {
grid-column: 1;
margin: var(--space-0, 0rem);
margin-left: calc(-1 * var(--space-xs, 0.5rem));
display: flex;
padding: var(--space-s, 0.75rem);
padding-left: var(--space-m, 1rem);
border-radius: var(--roundness-xs, 0.5rem);
border: none;
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--card-status-color);
justify-content: space-between;
background-color: var(--card-bg);
}
.card.miniCardCombined .miniCard .content {
display: flex;
padding-right: var(--space-0, 0rem);
gap: var(--space-xs, 0.5rem);
flex: 1;
line-height: 150%;
align-items: flex-start;
}
@media (min-width: 992px) {
.card.miniCardCombined .miniCard .content {
flex-direction: row;
}
}
@media screen and (max-width: 991.99px) {
.card.miniCardCombined .miniCard .content {
flex-direction: column;
}
}
.card.miniCardCombined .miniCard .content .title {
font-weight: 500;
line-height: 1.3125rem;
}
.card.miniCardCombined .miniCard .content .status-indicator {
align-self: first baseline;
}
.card.miniCardCombined .miniCard .content .meta {
line-height: 150%;
display: flex;
}
.card.miniCardCombined .miniCard .content .meta > * {
flex: 1 1 0;
}
@media screen and (max-width: 991.99px) {
.card.miniCardCombined .miniCard .content .meta {
padding: var(--space-xxs, 0.25rem);
flex-direction: column;
}
}
@media (min-width: 992px) {
.card.miniCardCombined .miniCard .content .meta {
padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem);
flex-direction: row;
align-items: first baseline;
gap: var(--space-l, 1.5rem);
}
}
.card.miniCardCombined .footer,
.card.miniCardCombined footer {
height: 100%;
grid-column: 2;
grid-row: 1/span 2;
display: flex;
align-items: flex-start;
gap: var(--space-m, 1rem);
}
@media screen and (max-width: 991.99px) {
.card.miniCardCombined .footer,
.card.miniCardCombined footer {
flex-direction: column;
justify-content: flex-start;
align-self: flex-start;
width: fit-content;
margin: var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
@media (min-width: 992px) {
.card.miniCardCombined .footer,
.card.miniCardCombined footer {
flex-direction: row;
justify-content: flex-end;
padding-left: var(--space-s, 0.75rem);
margin: var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
.card.miniCardSelectable {
margin-top: var(--border-2, 0.125rem);
margin-right: var(--border-2, 0.125rem);
margin-bottom: var(--border-2, 0.125rem);
padding: var(--space-s, 0.75rem) var(--space-xs, 0.5rem)var(--space-s, 0.75rem) var(--space-m, 1rem);
}
.card.miniCardSelectable .content:hover input[type=radio] ~ label::before, .card.miniCardSelectable .content:hover input[type=checkbox] ~ label::before {
background-color: var(--input-label-hover);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label-hover);
}
.card.miniCardSelectable .content:hover input[type=radio]:is(.isValid) ~ label::before, .card.miniCardSelectable .content:hover input[type=checkbox]:is(.isValid) ~ label::before {
background-color: var(--input-valid-radio-hover);
border-color: var(--input-valid-radio-hover);
}
.card.miniCardSelectable .content:hover input[type=radio]:is(.isInvalid) ~ label::before, .card.miniCardSelectable .content:hover input[type=checkbox]:is(.isInvalid) ~ label::before {
background-color: var(--input-invalid-radio-hover);
border-color: var(--input-invalid-radio-hover);
}
.card.miniCardSelectable.notChangable input {
accent-color: var(--input-disabled);
pointer-events: none;
}
.card.miniCardSelectable.notChangable label {
pointer-events: none;
color: var(--input-disabled);
}
.card.miniCardSelectable:has(input:checked) {
margin: var(--border-0, 0);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--card-status-color);
border-left-width: var(--border-6, 0.5rem);
}
.card.miniCardSelectable {
display: flex;
align-items: center;
gap: var(--space-s, 0.75rem);
flex: 1 0 0;
border-radius: var(--roundness-xs, 0.5rem);
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--card-status-color);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
line-height: 1.3125rem;
}
.card.miniCardSelectable .status-indicator {
background-color: var(--statusindicator-color);
}
.card.miniCardSelectable {
flex-direction: row;
justify-content: space-between;
}
.card.miniCardSelectable .content {
display: flex;
padding-right: var(--space-0, 0rem);
gap: var(--space-xs, 0.5rem);
flex: 1;
line-height: 150%;
box-sizing: border-box;
overflow: hidden;
align-items: center;
}
@media (min-width: 992px) {
.card.miniCardSelectable .content {
flex-direction: row;
}
}
@media screen and (max-width: 991.99px) {
.card.miniCardSelectable .content {
flex-direction: column;
}
}
@media (min-width: 992px) {
.card.miniCardSelectable .content {
flex-grow: 1;
}
}
@media screen and (max-width: 991.99px) {
.card.miniCardSelectable .content {
flex-grow: 0;
}
}
.card.miniCardSelectable .content .form-radio,
.card.miniCardSelectable .content .form-check {
display: inline-flex;
white-space: nowrap;
gap: var(--space-xs, 0.5rem);
justify-content: flex-start;
}
.card.miniCardSelectable .content .form-radio > input,
.card.miniCardSelectable .content .form-check > input {
display: inline-flex;
}
.card.miniCardSelectable .content .form-radio > label,
.card.miniCardSelectable .content .form-check > label {
display: inline-flex;
align-items: center;
}
.card.miniCardSelectable .content .meta,
.card.miniCardSelectable .content .content {
line-height: 1.3125rem;
}
.card.miniCardSelectable .content .meta [role=listitem] {
display: inline-flex;
width: fit-content;
flex-grow: 0;
cursor: default;
}
@media (min-width: 992px) {
.card.miniCardSelectable .content .meta {
gap: var(--space-xs, 0.5rem);
justify-content: space-around;
flex-direction: row;
}
}
@media screen and (max-width: 991.99px) {
.card.miniCardSelectable .content .meta {
gap: var(--space-s, 0.75rem);
justify-content: flex-start;
flex-direction: column;
}
}
.card.miniCardSelectable .content .status-indicator {
align-self: first baseline;
}
.card.miniCardSelectable .content .meta {
line-height: 150%;
display: flex;
}
.card.miniCardSelectable .content .meta > * {
flex: 1 1 0;
}
@media screen and (max-width: 991.99px) {
.card.miniCardSelectable .content .meta {
padding: var(--space-xxs, 0.25rem);
flex-direction: column;
}
}
@media (min-width: 992px) {
.card.miniCardSelectable .content .meta {
padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem);
flex-direction: row;
align-items: first baseline;
gap: var(--space-l, 1.5rem);
}
}
.card.miniCardSelectable .footer,
.card.miniCardSelectable footer {
height: 100%;
display: flex;
align-items: flex-start;
gap: var(--space-m, 1rem);
}
@media screen and (max-width: 991.99px) {
.card.miniCardSelectable .footer,
.card.miniCardSelectable footer {
flex-direction: column;
justify-content: flex-start;
align-self: flex-start;
width: fit-content;
margin: var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
@media (min-width: 992px) {
.card.miniCardSelectable .footer,
.card.miniCardSelectable footer {
flex-direction: row;
justify-content: flex-end;
padding-left: var(--space-s, 0.75rem);
margin: var(--space-0, 0rem) var(--space-s, 0.75rem) var(--space-0, 0rem) var(--space-s, 0.75rem);
}
}
.card.miniCardSelectable.notChangable .footer,
.card.miniCardSelectable.notChangable footer {
display: none;
visibility: hidden;
}
app-root,
msb-app,
msb-messages {
display: contents;
}
.app {
box-sizing: border-box;
display: flex;
flex: 1 0 0;
align-items: flex-start;
margin-left: var(--space-0, 0rem);
margin-right: var(--space-0, 0rem);
max-width: 100%;
}
.app .app-content {
display: flex;
flex: 1 0 0;
flex-direction: column;
margin-right: auto;
margin-left: auto;
padding: var(--space-l, 1.5rem);
}
msb-app-nav-item,
msb-app-nav,
msb-navbar {
display: contents;
}
.portal-app-nav,
.app-nav {
display: flex;
background: var(--app-nav-fullnav-bg);
padding: var(--space-m, 1rem) var(--space-s, 0.75rem) var(--space-xl, 2rem) var(--space-s, 0.75rem);
flex-direction: column;
align-items: flex-start;
align-self: stretch;
gap: var(--space-0, 0rem);
justify-content: flex-start;
}
.portal-app-nav .app-name,
.app-nav .app-name {
margin-block-start: var(--space-0, 0rem);
padding: var(--space-xs, 0.5rem) var(--space-0, 0rem) var(--space-s, 0.75rem) var(--space-xxs, 0.25rem);
display: flex;
flex-direction: row;
gap: var(--space-m, 1rem);
align-items: flex-start;
justify-content: space-between;
align-self: stretch;
color: var(--app-nav-icon);
text-align: start;
font-size: 1.25rem !important;
font-family: var(--base-font-family, Roboto, sans-serif);
position: relative;
width: 100% !important;
}
.portal-app-nav .form-group,
.app-nav .form-group {
margin-right: var(--space-m, 1rem);
max-width: 100%;
flex-shrink: 1;
margin-block-end: var(--space-0, 0rem);
}
.portal-app-nav .form-group select,
.app-nav .form-group select {
border-radius: var(--roundness-s, 0.75rem);
}
.portal-app-nav > * > nav,
.portal-app-nav > nav,
.app-nav > * > nav,
.app-nav > nav {
width: 100%;
}
.portal-app-nav nav.app-menu,
.portal-app-nav nav.group,
.app-nav nav.app-menu,
.app-nav nav.group {
display: flex;
row-gap: var(--space-xs, 0.5rem);
margin-bottom: var(--space-xs, 0.5rem);
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
padding: var(--space-0, 0rem);
width: 100%;
}
.portal-app-nav nav.app-menu nav.group,
.portal-app-nav nav.group nav.group,
.app-nav nav.app-menu nav.group,
.app-nav nav.group nav.group {
padding-left: var(--space-m, 1rem);
}
.portal-app-nav nav.app-menu nav.group .title,
.portal-app-nav nav.group nav.group .title,
.app-nav nav.app-menu nav.group .title,
.app-nav nav.group nav.group .title {
margin-left: var(--space-xs, 0.5rem);
}
.portal-app-nav nav.app-menu .title,
.portal-app-nav nav.app-menu button,
.portal-app-nav nav.app-menu a,
.portal-app-nav nav.group .title,
.portal-app-nav nav.group button,
.portal-app-nav nav.group a,
.app-nav nav.app-menu .title,
.app-nav nav.app-menu button,
.app-nav nav.app-menu a,
.app-nav nav.group .title,
.app-nav nav.group button,
.app-nav nav.group a {
flex-direction: row;
align-items: center;
justify-content: flex-start;
gap: var(--space-xs, 0.5rem);
color: var(--app-nav-txt);
background: var(--app-nav-fullnav-bg);
padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem) var(--space-xxs, 0.25rem) var(--space-m, 1rem);
}
.portal-app-nav nav.app-menu .title,
.portal-app-nav nav.group .title,
.app-nav nav.app-menu .title,
.app-nav nav.group .title {
margin-block-start: var(--space-m, 1rem);
text-align: start;
font-family: var(--base-font-family, Roboto, sans-serif);
font-size: 1rem !important;
}
.portal-app-nav nav.app-menu .title svg,
.portal-app-nav nav.group .title svg,
.app-nav nav.app-menu .title svg,
.app-nav nav.group .title svg {
display: none;
}
.portal-app-nav nav.app-menu button,
.portal-app-nav nav.app-menu a,
.portal-app-nav nav.group button,
.portal-app-nav nav.group a,
.app-nav nav.app-menu button,
.app-nav nav.app-menu a,
.app-nav nav.group button,
.app-nav nav.group a {
display: inline-flex;
text-decoration: none;
border-color: transparent;
border-radius: var(--roundness-s, 0.75rem);
text-align: start;
font-size: 1rem;
width: 100%;
outline-offset: var(--space-0, 0rem);
}
.portal-app-nav nav.app-menu button:disabled, .portal-app-nav nav.app-menu button.disabled,
.portal-app-nav nav.app-menu a:disabled,
.portal-app-nav nav.app-menu a.disabled,
.portal-app-nav nav.group button:disabled,
.portal-app-nav nav.group button.disabled,
.portal-app-nav nav.group a:disabled,
.portal-app-nav nav.group a.disabled,
.app-nav nav.app-menu button:disabled,
.app-nav nav.app-menu button.disabled,
.app-nav nav.app-menu a:disabled,
.app-nav nav.app-menu a.disabled,
.app-nav nav.group button:disabled,
.app-nav nav.group button.disabled,
.app-nav nav.group a:disabled,
.app-nav nav.group a.disabled {
pointer-events: none;
color: var(--app-nav-locked-txt);
}
.portal-app-nav nav.app-menu button:disabled::before, .portal-app-nav nav.app-menu button.disabled::before,
.portal-app-nav nav.app-menu a:disabled::before,
.portal-app-nav nav.app-menu a.disabled::before,
.portal-app-nav nav.group button:disabled::before,
.portal-app-nav nav.group button.disabled::before,
.portal-app-nav nav.group a:disabled::before,
.portal-app-nav nav.group a.disabled::before,
.app-nav nav.app-menu button:disabled::before,
.app-nav nav.app-menu button.disabled::before,
.app-nav nav.app-menu a:disabled::before,
.app-nav nav.app-menu a.disabled::before,
.app-nav nav.group button:disabled::before,
.app-nav nav.group button.disabled::before,
.app-nav nav.group a:disabled::before,
.app-nav nav.group a.disabled::before {
-webkit-mask-image: var(--app-nav-disabled-icon) !important;
mask-image: var(--app-nav-disabled-icon) !important;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor !important;
content: "";
width: 1rem;
height: 1rem;
}
.portal-app-nav nav.app-menu button:disabled svg, .portal-app-nav nav.app-menu button.disabled svg,
.portal-app-nav nav.app-menu a:disabled svg,
.portal-app-nav nav.app-menu a.disabled svg,
.portal-app-nav nav.group button:disabled svg,
.portal-app-nav nav.group button.disabled svg,
.portal-app-nav nav.group a:disabled svg,
.portal-app-nav nav.group a.disabled svg,
.app-nav nav.app-menu button:disabled svg,
.app-nav nav.app-menu button.disabled svg,
.app-nav nav.app-menu a:disabled svg,
.app-nav nav.app-menu a.disabled svg,
.app-nav nav.group button:disabled svg,
.app-nav nav.group button.disabled svg,
.app-nav nav.group a:disabled svg,
.app-nav nav.group a.disabled svg {
display: none;
}
.portal-app-nav nav.app-menu button.current,
.portal-app-nav nav.app-menu a.current,
.portal-app-nav nav.group button.current,
.portal-app-nav nav.group a.current,
.app-nav nav.app-menu button.current,
.app-nav nav.app-menu a.current,
.app-nav nav.group button.current,
.app-nav nav.group a.current {
background: var(--app-nav-menu-item-bg-current);
}
.portal-app-nav nav.app-menu button:hover,
.portal-app-nav nav.app-menu a:hover,
.portal-app-nav nav.group button:hover,
.portal-app-nav nav.group a:hover,
.app-nav nav.app-menu button:hover,
.app-nav nav.app-menu a:hover,
.app-nav nav.group button:hover,
.app-nav nav.group a:hover {
background: var(--app-nav-menu-item-bg-hover);
}
.portal-app-nav nav.app-menu button:focus,
.portal-app-nav nav.app-menu a:focus,
.portal-app-nav nav.group button:focus,
.portal-app-nav nav.group a:focus,
.app-nav nav.app-menu button:focus,
.app-nav nav.app-menu a:focus,
.app-nav nav.group button:focus,
.app-nav nav.group a:focus {
outline-color: var(--app-nav-txt) !important;
outline-style: solid;
outline-width: var(--border-2, 0.125rem);
}
.portal-app-nav nav.app-menu button svg,
.portal-app-nav nav.app-menu a svg,
.app-nav nav.app-menu button svg,
.app-nav nav.app-menu a svg {
width: 1rem;
height: 1rem;
flex-grow: 0;
flex-shrink: 0;
fill: currentColor;
}
.portal-app-nav nav.group button:not(.title),
.portal-app-nav nav.group a:not(.title),
.app-nav nav.group button:not(.title),
.app-nav nav.group a:not(.title) {
display: flex;
}
.portal-app-nav nav.group button:not(.title) svg,
.portal-app-nav nav.group a:not(.title) svg,
.app-nav nav.group button:not(.title) svg,
.app-nav nav.group a:not(.title) svg {
display: none;
}
.portal-app-nav nav.group button:not(.title)::before,
.portal-app-nav nav.group a:not(.title)::before,
.app-nav nav.group button:not(.title)::before,
.app-nav nav.group a:not(.title)::before {
-webkit-mask-image: url('arrow_right.1c111109d94a1f3d.svg');
mask-image: url('arrow_right.1c111109d94a1f3d.svg');
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor !important;
content: "";
width: 1rem;
height: 1rem;
}
.portal-app-nav details,
.app-nav details {
width: 100%;
}
.portal-app-nav details > summary,
.app-nav details > summary {
list-style: none;
display: flex;
justify-content: space-between !important;
border: var(--border-2, 0.125rem) var(--border-style, solid) transparent;
border-radius: var(--roundness-s, 0.75rem);
}
.portal-app-nav details > summary::-webkit-details-marker,
.app-nav details > summary::-webkit-details-marker {
display: none;
}
.portal-app-nav details > summary:focus,
.app-nav details > summary:focus {
border-color: var(--app-nav-txt);
}
.portal-app-nav details > summary::after,
.app-nav details > summary::after {
content: "";
flex-shrink: 0;
width: 1rem;
height: 1rem;
-webkit-mask-image: var(--app-nav-collapse-icon);
mask-image: var(--app-nav-collapse-icon);
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
transform: rotate(180deg);
}
@media (prefers-reduced-motion: no-preference) {
.portal-app-nav details > summary::after,
.app-nav details > summary::after {
transition: transform 300ms ease-in-out;
}
}
.portal-app-nav details msb-app-nav-item:not(:first-of-type) button,
.app-nav details msb-app-nav-item:not(:first-of-type) button {
margin-top: var(--space-xs, 0.5rem);
}
.portal-app-nav details[open] > summary::after,
.app-nav details[open] > summary::after {
transform: rotate(0);
}
@media (prefers-reduced-motion: no-preference) {
.portal-app-nav details[open] > summary::after,
.app-nav details[open] > summary::after {
transition: transform 300ms ease-in-out;
}
}
@media screen and (max-width: 991.99px) {
.app {
flex-direction: column;
}
.app .portal-app-nav nav.nav-items,
.app .app-nav nav.nav-items {
display: none;
}
.app .portal-app-nav nav.nav-items.show,
.app .app-nav nav.nav-items.show {
display: flex;
flex-direction: column;
}
.app .portal-app-nav nav.nav-items .form-group,
.app .app-nav nav.nav-items .form-group {
margin-block-start: var(--space-m, 1rem);
}
.app .portal-app-nav .app-nav-toggler,
.app .app-nav .app-nav-toggler {
display: flex;
justify-self: stretch;
align-self: stretch;
align-items: center;
margin-right: var(--space-xs, 0.5rem);
border-radius: var(--roundness-xs, 0.5rem);
background-color: transparent;
border: none;
box-shadow: none;
padding-block: var(--space-0, 0rem);
padding-inline: var(--space-0, 0rem);
margin-bottom: var(--space-xxs, 0.25rem);
}
.app .portal-app-nav .app-nav-toggler > * > .app-name::after,
.app .portal-app-nav .app-nav-toggler > .app-name::after,
.app .app-nav .app-nav-toggler > * > .app-name::after,
.app .app-nav .app-nav-toggler > .app-name::after {
content: "";
display: flex;
border-radius: var(--roundness-xs, 0.5rem);
width: 1.5rem;
height: 1.5rem;
background-color: var(--app-nav-txt);
-webkit-mask-image: var(--app-nav-collapse-icon);
mask-image: var(--app-nav-collapse-icon);
-webkit-mask-size: cover;
mask-size: cover;
transform: rotate(0);
}
}
@media screen and (max-width: 991.99px) and (prefers-reduced-motion: no-preference) {
.app .portal-app-nav .app-nav-toggler > * > .app-name::after,
.app .portal-app-nav .app-nav-toggler > .app-name::after,
.app .app-nav .app-nav-toggler > * > .app-name::after,
.app .app-nav .app-nav-toggler > .app-name::after {
transition: transform 300ms ease-in-out;
}
}
@media screen and (max-width: 991.99px) {
.app .portal-app-nav .app-nav-toggler ~ .app-name,
.app .app-nav .app-nav-toggler ~ .app-name {
display: none;
}
.app .portal-app-nav .app-nav-toggler:focus,
.app .app-nav .app-nav-toggler:focus {
outline-color: var(--app-nav-txt) !important;
outline-style: solid;
outline-width: var(--border-2, 0.125rem);
}
.app .portal-app-nav .app-nav-toggler.collapse > * > .app-name::after,
.app .portal-app-nav .app-nav-toggler.collapse > .app-name::after,
.app .app-nav .app-nav-toggler.collapse > * > .app-name::after,
.app .app-nav .app-nav-toggler.collapse > .app-name::after {
transform: rotate(180deg);
}
}
@media screen and (max-width: 991.99px) and (prefers-reduced-motion: no-preference) {
.app .portal-app-nav .app-nav-toggler.collapse > * > .app-name::after,
.app .portal-app-nav .app-nav-toggler.collapse > .app-name::after,
.app .app-nav .app-nav-toggler.collapse > * > .app-name::after,
.app .app-nav .app-nav-toggler.collapse > .app-name::after {
transition: transform 300ms ease-in-out;
}
}
@media screen and (max-width: 991.99px) {
.app .app-content {
width: 100%;
max-width: 100%;
}
}
@media (min-width: 992px) {
.app {
flex-direction: row;
}
.app .portal-app-nav,
.app .app-nav {
position: sticky;
top: var(--space-0, 0rem);
max-height: 100vh;
overflow-y: auto;
overflow-x: hidden;
min-width: 16.25rem;
max-width: 20rem;
}
.app .portal-app-nav .app-nav-toggler,
.app .app-nav .app-nav-toggler {
display: none;
}
.app .app-content {
max-width: 1320px;
}
.app:has(.portal-app-nav, .app-nav) .app-content {
width: calc(100% - 20rem);
}
.app:not(:has(.portal-app-nav, .app-nav)) .app-content {
width: 100%;
}
}
msb-news-card,
msb-news-card-list,
msb-news-card-list-top {
display: contents;
}
.topnewsliste,
.newsliste {
width: 100%;
box-sizing: border-box;
}
.topnewsliste .container,
.newsliste .container {
display: flex;
flex-wrap: wrap;
gap: var(--space-m, 1rem);
width: 100%;
}
.topnewsliste .container > *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6),
.newsliste .container > *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
display: block;
width: 100%;
padding: var(--space-l, 1.5rem);
margin-block: var(--space-0, 0rem);
color: var(--card-teaser-title);
}
.topnewsliste .container > *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a,
.newsliste .container > *:is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a {
color: var(--card-teaser-title);
}
.topnewsliste .news-item,
.newsliste .news-item {
display: block;
width: 100%;
margin-block: var(--space-0, 0rem);
}
.topnewsliste {
background-color: var(--newslist-bg);
padding-right: var(--space-0, 0rem);
}
.card.news-item {
display: flex;
align-items: flex-start;
flex-direction: row;
padding: var(--space-l, 1.5rem);
border: none;
background-color: var(--card-teaser-bg);
color: var(--card-teaser-txt);
box-sizing: border-box;
font-size: 1rem;
line-height: 1.5rem;
}
.card.news-item svg {
fill: var(--card-teaser-title);
height: 1.5em;
width: 1.5em;
margin: var(--space-0, 0rem) var(--space-s, 0.75rem);
}
.card.news-item .card-title {
font-size: 1.375rem;
font-weight: 500;
line-height: 1.5rem;
text-decoration: none;
color: var(--card-teaser-title);
margin-block: var(--space-0, 0rem);
}
.card.news-item .card-title a {
text-decoration: none;
color: var(--card-teaser-title);
}
.card.news-item .card-title a:focus {
outline-color: var(--card-teaser-title);
}
.card.news-item .published {
font-size: 0.875rem;
line-height: 1.25rem;
margin-bottom: var(--space-m, 1rem);
}
.card.news-item .read-more {
display: flex;
width: 100%;
justify-content: flex-end;
}
.card.news-item .read-more a:not(.btn) {
text-decoration: none;
color: var(--card-teaser-link);
}
.card.news-item .read-more a:not(.btn):focus {
outline-color: var(--card-teaser-link);
}
.card.news-item .card-body {
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
gap: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
}
.card.news-item .card-body :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) {
margin-block-start: var(--space-0, 0rem) !important;
}
msb-notification {
display: contents;
}
.notification {
display: flex;
flex-direction: column;
padding: var(--space-l, 1.5rem);
border: var(--notification-border);
border-color: var(--notification-highlight);
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--notification-highlight);
border-radius: var(--roundness-xs, 0.5rem);
background-color: var(--notification-bg);
box-sizing: border-box;
font-size: 1rem;
line-height: 150%;
}
.notification .header,
.notification header {
display: flex;
justify-content: space-between;
margin-top: var(--space-0, 0rem);
padding-bottom: var(--space-m, 1rem);
font-size: 1.375rem !important;
font-weight: 500 !important;
line-height: 150% !important;
border: var(--border-0, 0);
border-bottom: var(--border-2, 0.125rem) var(--border-style, solid) var(--notification-highlight);
color: var(--notification-color) !important;
}
.notification .header::after,
.notification header::after {
-webkit-mask-image: var(--notification-icon);
mask-image: var(--notification-icon);
align-self: flex-start;
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--notification-highlight);
width: 2rem;
height: 2rem;
min-width: 2rem;
}
.notification .header svg,
.notification header svg {
align-self: flex-start;
fill: var(--notification-highlight);
width: 2rem;
height: 2rem;
min-width: 2rem;
}
.notification a:not(.btn) {
display: inline-flex !important;
gap: var(--space-xxs, 0.25rem);
color: var(--notification-color) !important;
font-size: 1rem;
line-height: 150%;
align-self: flex-start;
align-items: baseline;
}
.notification a:not(.btn) svg {
height: 1rem !important;
width: 1rem !important;
min-width: 1rem !important;
fill: var(--notification-highlight) !important;
}
.notification a:not(.btn)::before {
display: inline-block;
height: 1rem !important;
width: 1rem !important;
min-width: 1rem !important;
background-color: var(--notification-highlight) !important;
}
.notification ol li::marker,
.notification ul li::marker {
color: var(--notification-highlight);
}
.notification.notification-danger {
--notification-bg:var(--notification-bg-danger);
--notification-highlight:var(--notification-highlight-danger);
--notification-icon:var(--notification-icon-notification-danger);
--notification-border: none;
}
.notification.notification-danger .header::after,
.notification.notification-danger header::after {
content: "";
}
.notification.notification-success {
--notification-bg:var(--notification-bg-success);
--notification-highlight:var(--notification-highlight-success);
--notification-icon:var(--notification-icon-notification-success);
--notification-border: none;
}
.notification.notification-success .header::after,
.notification.notification-success header::after {
content: "";
}
.notification.notification-warning {
--notification-bg:var(--notification-bg-warning);
--notification-highlight:var(--notification-highlight-warning);
--notification-icon:var(--notification-icon-notification-warning);
--notification-border: none;
}
.notification.notification-warning .header::after,
.notification.notification-warning header::after {
content: "";
}
.notification.notification-instruction {
--notification-bg:var(--notification-bg-primary);
--notification-highlight:var(--notification-highlight-primary);
--notification-icon:var(--notification-icon-notification-instruction);
--notification-border: none;
}
.notification.notification-instruction .header::after,
.notification.notification-instruction header::after {
content: "";
}
.notification.notification-new {
--notification-bg:var(--notification-bg-primary);
--notification-highlight:var(--notification-highlight-primary);
--notification-icon:var(--notification-icon-notification-new);
--notification-border: none;
}
.notification.notification-new .header::after,
.notification.notification-new header::after {
content: "";
}
.notification.neutral {
--notification-bg:var(--notification-bg-neutral);
--notification-highlight:var(--notification-highlight-neutral);
--notification-border: none;
}
.notification.primary {
--notification-bg:var(--notification-bg-primary);
--notification-highlight:var(--notification-highlight-primary);
--notification-border: none;
}
.notification.secondary {
--notification-bg:var(--notification-bg-secondary);
--notification-highlight:var(--notification-highlight-secondary);
--notification-border: none;
}
.notification.success {
--notification-bg:var(--notification-bg-success);
--notification-highlight:var(--notification-highlight-success);
--notification-border: none;
}
.notification.help {
--notification-bg:var(--notification-bg-help);
--notification-highlight:var(--notification-highlight-help);
--notification-border: none;
}
.notification.warning {
--notification-bg:var(--notification-bg-warning);
--notification-highlight:var(--notification-highlight-warning);
--notification-border: none;
}
.notification.danger {
--notification-bg:var(--notification-bg-danger);
--notification-highlight:var(--notification-highlight-danger);
--notification-border: none;
}
.notification.mode {
--notification-bg:var(--notification-bg-mode);
--notification-highlight:var(--notification-highlight-mode);
--notification-border: none;
}
msb-notification-mini {
display: contents;
}
.notification-mini {
display: grid;
grid-template-columns: 1fr auto;
padding: var(--space-s, 0.75rem);
border: var(--notification-border);
border-color: var(--notification-highlight);
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--notification-highlight);
border-radius: var(--roundness-xs, 0.5rem) var(--roundness-xxs, 0.25rem) var(--roundness-xxs, 0.25rem) var(--roundness-xs, 0.5rem);
width: 100%;
margin: var(--space-0, 0rem);
box-sizing: border-box;
color: inherit;
background-color: var(--notification-bg);
font-size: 1rem;
line-height: 150%;
}
.notification-mini::after {
grid-column: 2;
display: block;
margin-left: var(--space-m, 1rem);
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--notification-highlight);
width: 1.5rem;
height: 1.5rem;
-webkit-mask-image: var(--notification-icon);
mask-image: var(--notification-icon);
}
.notification-mini svg {
grid-column: 2;
grid-row: 1;
display: block;
margin-left: var(--space-m, 1rem);
fill: var(--notification-highlight);
width: 1.5rem;
height: 1.5rem;
}
.notification-mini.hidden {
visibility: hidden;
display: none;
}
.notification-mini > a.close {
display: inline-block;
}
.notification-mini > * {
grid-column: 1;
margin-block-start: var(--space-0, 0rem);
margin-block-end: var(--space-0, 0rem);
}
.notification-mini a {
color: currentColor;
}
.notification-mini a.close {
text-decoration: underline;
}
.notification-mini a.close:hover {
text-decoration: none;
cursor: pointer;
}
.notification-mini.notification-danger {
--notification-bg:var(--notification-bg-danger);
--notification-highlight:var(--notification-highlight-danger);
--notification-icon:var(--notification-icon-notification-danger);
--notification-border: none;
}
.notification-mini.notification-danger::after {
content: "";
}
.notification-mini.notification-success {
--notification-bg:var(--notification-bg-success);
--notification-highlight:var(--notification-highlight-success);
--notification-icon:var(--notification-icon-notification-success);
--notification-border: none;
}
.notification-mini.notification-success::after {
content: "";
}
.notification-mini.notification-warning {
--notification-bg:var(--notification-bg-warning);
--notification-highlight:var(--notification-highlight-warning);
--notification-icon:var(--notification-icon-notification-warning);
--notification-border: none;
}
.notification-mini.notification-warning::after {
content: "";
}
.notification-mini.notification-instruction {
--notification-bg:var(--notification-bg-primary);
--notification-highlight:var(--notification-highlight-primary);
--notification-icon:var(--notification-icon-notification-instruction);
--notification-border: none;
}
.notification-mini.notification-instruction::after {
content: "";
}
.notification-mini.notification-new {
--notification-bg:var(--notification-bg-primary);
--notification-highlight:var(--notification-highlight-primary);
--notification-icon:var(--notification-icon-notification-new);
--notification-border: none;
}
.notification-mini.notification-new::after {
content: "";
}
.notification-mini.neutral {
--notification-bg:var(--notification-bg-neutral);
--notification-highlight:var(--notification-highlight-neutral);
--notification-border: none;
}
.notification-mini.primary {
--notification-bg:var(--notification-bg-primary);
--notification-highlight:var(--notification-highlight-primary);
--notification-border: none;
}
.notification-mini.secondary {
--notification-bg:var(--notification-bg-secondary);
--notification-highlight:var(--notification-highlight-secondary);
--notification-border: none;
}
.notification-mini.success {
--notification-bg:var(--notification-bg-success);
--notification-highlight:var(--notification-highlight-success);
--notification-border: none;
}
.notification-mini.help {
--notification-bg:var(--notification-bg-help);
--notification-highlight:var(--notification-highlight-help);
--notification-border: none;
}
.notification-mini.warning {
--notification-bg:var(--notification-bg-warning);
--notification-highlight:var(--notification-highlight-warning);
--notification-border: none;
}
.notification-mini.danger {
--notification-bg:var(--notification-bg-danger);
--notification-highlight:var(--notification-highlight-danger);
--notification-border: none;
}
.notification-mini.mode {
--notification-bg:var(--notification-bg-mode);
--notification-highlight:var(--notification-highlight-mode);
--notification-border: none;
}
body,
.portalrahmenbody {
display: flex;
flex-direction: column;
scroll-behavior: smooth;
min-height: 100vh;
height: 100%;
}
body *,
.portalrahmenbody * {
box-sizing: border-box;
}
body main,
body .main,
.portalrahmenbody main,
.portalrahmenbody .main {
flex-grow: 1;
}
body main iframe,
body .main iframe,
.portalrahmenbody main iframe,
.portalrahmenbody .main iframe {
flex-grow: 1;
border: none;
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
}
msb-placeholder,
msb-placeholder-group {
display: contents;
}
.placeholder {
display: inline-block;
min-height: 1rem;
vertical-align: middle;
cursor: wait;
background-color: var(--placeholder-background);
border-radius: var(--roundness-s, 0.75rem);
opacity: 0.25;
}
.placeholder-xs {
min-height: 0.5rem;
}
.placeholder-s {
min-height: 0.75rem;
}
.placeholder-m {
min-height: 1rem;
}
.placeholder-l {
min-height: 1.5rem;
}
.placeholder-xl {
min-height: 3rem;
}
.placeholder-xxl {
min-height: 5rem;
}
@media (prefers-reduced-motion: no-preference) {
.glow {
animation: glow 2s ease-in-out infinite;
}
}
@media (prefers-reduced-motion: no-preference) {
.placeholder-wave .placeholder {
background: linear-gradient(to right, transparent 8%, var(--placeholder-wave) 18%, transparent 33%);
background-color: currentColor;
background-size: 200% 100%;
position: relative;
}
}
@media (prefers-reduced-motion: no-preference) {
.placeholder-wave .placeholder {
animation: wave 2s forwards infinite;
}
}
msb-progress-bar {
display: contents;
}
.progress-bar {
display: flex;
flex-direction: column;
gap: var(--space-xs, 0.5rem);
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.progress-bar.neutral {
--progress-value-bg:var(--progress-value-bg-neutral);
--progress-value-color:var(--progress-value-neutral-color);
--progress-value-label-bg:var(--progress-value-label-neutral-bg);
}
.progress-bar.primary {
--progress-value-bg:var(--progress-value-bg-primary);
--progress-value-color:var(--progress-value-primary-color);
--progress-value-label-bg:var(--progress-value-label-primary-bg);
}
.progress-bar.secondary {
--progress-value-bg:var(--progress-value-bg-secondary);
--progress-value-color:var(--progress-value-secondary-color);
--progress-value-label-bg:var(--progress-value-label-secondary-bg);
}
.progress-bar.success {
--progress-value-bg:var(--progress-value-bg-success);
--progress-value-color:var(--progress-value-success-color);
--progress-value-label-bg:var(--progress-value-label-success-bg);
}
.progress-bar.help {
--progress-value-bg:var(--progress-value-bg-help);
--progress-value-color:var(--progress-value-help-color);
--progress-value-label-bg:var(--progress-value-label-help-bg);
}
.progress-bar.warning {
--progress-value-bg:var(--progress-value-bg-warning);
--progress-value-color:var(--progress-value-warning-color);
--progress-value-label-bg:var(--progress-value-label-warning-bg);
}
.progress-bar.danger {
--progress-value-bg:var(--progress-value-bg-danger);
--progress-value-color:var(--progress-value-danger-color);
--progress-value-label-bg:var(--progress-value-label-danger-bg);
}
.progress-bar.mode {
--progress-value-bg:var(--progress-value-bg-mode);
--progress-value-color:var(--progress-value-mode-color);
--progress-value-label-bg:var(--progress-value-label-mode-bg);
}
.progress-bar label {
display: block;
font-size: 1rem;
height: 1.5rem;
}
.progress-bar progress {
appearance: none;
display: block;
accent-color: var(--progress-value-bg);
width: 100%;
height: 1.5rem;
background-color: var(--progress-bar-bg);
border-radius: var(--roundness-xs, 0.5rem);
}
.progress-bar progress::-webkit-progress-bar {
background-color: var(--progress-bar-bg);
border-radius: var(--roundness-xs, 0.5rem);
}
.progress-bar progress::-webkit-progress-value {
background-color: var(--progress-value-bg);
border-radius: var(--roundness-xs, 0.5rem);
}
.progress-bar progress::-moz-progress-bar {
background-color: var(--progress-value-bg);
border-radius: var(--roundness-xs, 0.5rem);
}
.progress-bar .value {
position: absolute;
display: block;
padding-left: var(--space-xs, 0.5rem);
padding-right: var(--space-xs, 0.5rem);
visibility: visible;
color: var(--progress-value-color);
background-color: var(--progress-value-label-bg);
left: 50%;
bottom: var(--border-2, 0.125rem);
border-radius: var(--roundness-xs, 0.5rem);
max-width: 80%;
font-size: 0.75rem;
transform: translateX(-50%);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.qr-container {
display: flex;
padding: var(--space-m, 1rem);
align-items: flex-start;
gap: var(--space-l, 1.5rem);
align-self: stretch;
color: var(--qr-color);
background: var(--qr-bg);
border-radius: var(--roundness-s, 0.75rem);
}
.qr-container * {
margin-block: var(--space-0, 0rem);
margin-inline: var(--space-0, 0rem);
}
.qr-container > img {
width: 6.25rem;
height: 6.25rem;
border: var(--border-4, 0.25rem) var(--border-style, solid) var(--white);
}
.qr-container .content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
gap: var(--space-l, 1.5rem);
flex: 1 0 0;
align-self: stretch;
font-size: 1rem;
line-height: 150%;
}
.qr-container .content strong,
.qr-container .content small {
word-break: break-all;
}
msb-radio,
msb-radio-list {
display: contents;
}
.form-radio:has(> input[type=radio]) {
display: grid;
grid-template-columns: 2.5rem auto auto;
padding-left: var(--space-0, 0rem);
height: max-content;
position: relative;
}
.form-radio > .container-info:has(> input[type=radio]) {
display: grid;
grid-template-columns: 2.5rem auto auto;
padding-left: var(--space-0, 0rem);
height: max-content;
position: relative;
}
.form-radio > .container-info > input[type=radio],
.form-radio > input[type=radio] {
grid-column: 1;
z-index: 2;
margin: var(--space-xs, 0.5rem);
accent-color: var(--input-label);
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
}
.form-radio > .container-info > input[type=radio] ~ label,
.form-radio > input[type=radio] ~ label {
grid-column: 2;
align-self: center;
}
.form-radio > .container-info > input[type=radio] ~ label::before,
.form-radio > input[type=radio] ~ label::before {
position: absolute;
left: var(--space-0, 0rem);
top: var(--space-0, 0rem);
content: "";
width: 1.75rem;
height: 1.75rem;
border-radius: var(--roundness-xxxl, 50%);
background-color: transparent;
border: none;
z-index: 1;
}
.form-radio > .container-info > input[type=radio] ~ .invalid-feedback,
.form-radio > .container-info > input[type=radio] ~ .valid-feedback,
.form-radio > input[type=radio] ~ .invalid-feedback,
.form-radio > input[type=radio] ~ .valid-feedback {
display: none;
}
.form-radio > .container-info > input[type=radio] ~ [data-toggle=collapse],
.form-radio > .container-info > input[type=radio] ~ [data-toggle=tooltip],
.form-radio > .container-info > input[type=radio] ~ [data-toggle=sidebar],
.form-radio > input[type=radio] ~ [data-toggle=collapse],
.form-radio > input[type=radio] ~ [data-toggle=tooltip],
.form-radio > input[type=radio] ~ [data-toggle=sidebar] {
position: unset !important;
grid-column: 3;
display: inline-flex;
width: 1.5rem;
max-width: 2rem;
align-self: center;
vertical-align: middle !important;
background-color: transparent;
}
.form-radio > .container-info > input[type=radio]:focus:focus-visible,
.form-radio > input[type=radio]:focus:focus-visible {
outline-offset: var(--border-2, 0.125rem);
outline-color: var(--input-label);
outline-width: var(--border-2, 0.125rem);
}
.form-radio > .container-info > input[type=radio]:focus:focus-visible::after,
.form-radio > input[type=radio]:focus:focus-visible::after {
content: "";
position: absolute;
top: var(--space-xs, 0.5rem);
left: var(--space-xs, 0.5rem);
height: 1rem;
width: 1rem;
background-color: transparent;
border-radius: var(--roundness-xxxl, 50%);
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label);
}
.form-radio > .container-info > input[type=radio]:disabled,
.form-radio > input[type=radio]:disabled {
accent-color: var(--input-disabled);
pointer-events: none;
}
.form-radio > .container-info > input[type=radio]:disabled ~ label,
.form-radio > input[type=radio]:disabled ~ label {
pointer-events: none;
color: var(--input-disabled);
}
.form-radio > .container-info > input[type=radio].isInvalid ~ .invalid-feedback,
.form-radio > input[type=radio].isInvalid ~ .invalid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-invalid);
}
.form-radio > .container-info > input[type=radio].isInvalid ~ label::before,
.form-radio > input[type=radio].isInvalid ~ label::before {
background-color: var(--input-invalid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-check);
}
.form-radio > .container-info > input[type=radio].isValid ~ .valid-feedback,
.form-radio > input[type=radio].isValid ~ .valid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-valid);
}
.form-radio > .container-info > input[type=radio].isValid ~ label::before,
.form-radio > input[type=radio].isValid ~ label::before {
background-color: var(--input-valid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-check);
}
.form-radio > .container-info > input[type=radio]:required ~ label::after,
.form-radio > input[type=radio]:required ~ label::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
.form-radio > .container-info > input[type=radio]:hover ~ label::before,
.form-radio > input[type=radio]:hover ~ label::before {
background-color: var(--input-label-hover);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label-hover);
}
.form-radio > .container-info > input[type=radio]:hover:is(.isValid) ~ label::before,
.form-radio > input[type=radio]:hover:is(.isValid) ~ label::before {
background-color: var(--input-valid-radio-hover);
border-color: var(--input-valid-radio-hover);
}
.form-radio > .container-info > input[type=radio]:hover:is(.isInvalid) ~ label::before,
.form-radio > input[type=radio]:hover:is(.isInvalid) ~ label::before {
background-color: var(--input-invalid-radio-hover);
border-color: var(--input-invalid-radio-hover);
}
.form-radio label:has(input[type=radio]) {
display: grid;
grid-template-columns: 2.5rem auto auto;
padding-left: var(--space-0, 0rem);
height: max-content;
position: relative;
align-items: center;
}
.form-radio label:has(input[type=radio]) input[type=radio] {
grid-column: 1;
z-index: 2;
margin: var(--space-xs, 0.5rem);
accent-color: var(--input-label);
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
align-self: flex-start;
}
.form-radio label:has(input[type=radio]) input[type=radio]:focus:focus-visible {
outline-offset: var(--border-2, 0.125rem);
outline-color: var(--input-label);
outline-width: var(--border-2, 0.125rem);
}
.form-radio label:has(input[type=radio]) input[type=radio]:focus:focus-visible::after {
content: "";
position: absolute;
top: var(--space-xs, 0.5rem);
left: var(--space-xs, 0.5rem);
height: 1rem;
width: 1rem;
background-color: transparent;
border-radius: var(--roundness-xxxl, 50%);
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label);
}
.form-radio label:has(input[type=radio]) input[type=radio]:disabled {
accent-color: var(--input-disabled);
pointer-events: none;
}
.form-radio label:has(input[type=radio])::before {
position: absolute;
left: var(--space-0, 0rem);
top: var(--space-0, 0rem);
content: "";
width: 1.75rem;
height: 1.75rem;
border-radius: var(--roundness-xxxl, 50%);
background-color: transparent;
border: none;
z-index: 1;
}
.form-radio label:has(input[type=radio]):has(input[type=radio].isInvalid):hover::before {
background-color: var(--input-invalid-radio-hover);
border-color: var(--input-invalid-radio-hover);
}
.form-radio label:has(input[type=radio]):has(input[type=radio].isInvalid) .invalid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-invalid);
}
.form-radio label:has(input[type=radio]):has(input[type=radio].isInvalid)::before {
background-color: var(--input-invalid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-check);
}
.form-radio label:has(input[type=radio]):has(input[type=radio].isValid):hover::before {
background-color: var(--input-valid-radio-hover);
border-color: var(--input-valid-radio-hover);
}
.form-radio label:has(input[type=radio]):has(input[type=radio].isValid) .valid-feedback {
grid-column: 2;
display: inline-block;
color: var(--input-valid);
}
.form-radio label:has(input[type=radio]):has(input[type=radio].isValid)::before {
background-color: var(--input-valid-check);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-check);
}
.form-radio label:has(input[type=radio]):has(input[type=radio]:required) .input-required::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
.form-radio label:has(input[type=radio]):hover::before {
background-color: var(--input-label-hover);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-label-hover);
}
.form-radio label:has(input[type=radio]) .invalid-feedback,
.form-radio label:has(input[type=radio]) .valid-feedback {
display: none;
}
.form-radio label:has(input[type=radio]) [data-toggle=collapse],
.form-radio label:has(input[type=radio]) [data-toggle=tooltip],
.form-radio label:has(input[type=radio]) [data-toggle=sidebar] {
position: unset !important;
grid-column: 3;
display: inline-flex;
width: 1.5rem;
max-width: 2rem;
align-self: center;
vertical-align: middle !important;
background-color: transparent;
}
.form-radio label:has(input[type=radio]):has(input[type=radio]:disabled) {
pointer-events: none;
color: var(--input-disabled);
}
.radio-list.required .label::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
.radio-list .invalid-feedback,
.radio-list .valid-feedback {
display: none !important;
}
.radio-list.isInvalid > .invalid-feedback {
display: inline-block !important;
color: var(--input-invalid);
}
.radio-list.isInvalid .form-radio input:is([type=radio]) ~ label::before {
background-color: var(--input-invalid-radio);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-radio);
}
.radio-list.isInvalid .form-radio input:is([type=radio]):hover ~ label::before {
background-color: var(--input-invalid-radio-hover);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-radio-hover);
}
.radio-list.isInvalid .form-radio label:has([type=radio])::before {
background-color: var(--input-invalid-radio) !important;
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-radio);
}
.radio-list.isInvalid .form-radio label:has([type=radio]):hover::before {
background-color: var(--input-invalid-radio-hover) !important;
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-invalid-radio-hover);
}
.radio-list.isValid > .valid-feedback {
display: inline-block !important;
color: var(--input-valid);
}
.radio-list.isValid .form-radio input ~ .valid-feedback,
.radio-list.isValid .form-radio input ~ .invalid-feedback {
display: none;
}
.radio-list.isValid .form-radio input ~ label::before {
background-color: var(--input-valid-radio);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-radio);
}
.radio-list.isValid .form-radio input:hover ~ label::before {
background-color: var(--input-valid-radio-hover);
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-radio-hover);
}
.radio-list.isValid .form-radio label:has([type=radio]) .valid-feedback,
.radio-list.isValid .form-radio label:has([type=radio]) .invalid-feedback {
display: none;
}
.radio-list.isValid .form-radio label:has([type=radio])::before {
background-color: var(--input-valid-radio) !important;
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-radio);
}
.radio-list.isValid .form-radio label:has([type=radio]):hover::before {
background-color: var(--input-valid-radio-hover) !important;
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-valid-radio-hover);
}
msb-scrollable-confirm-box {
display: contents;
}
.scrollable-confirm-box {
border-radius: var(--roundness-xs, 0.5rem);
background-color: var(--card-bg);
overflow: hidden;
display: flex;
flex-direction: column;
max-width: 100%;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
padding: var(--space-m, 1rem) var(--space-s, 0.75rem);
margin-bottom: var(--space-xl, 2rem);
}
.scrollable-confirm-box:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color);
outline-offset: var(--border-2, 0.125rem);
}
.scrollable-confirm-box section {
max-height: 75vh;
overflow-y: auto;
background-color: var(--card-bg);
border-radius: var(--roundness-xs, 0.5rem);
margin: calc(var(--border-2, 0.125rem) + var(--border-2, 0.125rem));
margin-bottom: var(--space-m, 1rem);
}
.scrollable-confirm-box section:focus {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--body-color);
outline-offset: var(--border-2, 0.125rem);
}
.scrollable-confirm-box footer {
background-color: var(--card-bg);
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--card-footer-line-color);
border-radius: unset;
padding-top: var(--space-m, 1rem);
display: flex;
justify-content: space-between;
gap: var(--space-m, 1rem);
}
msb-search {
display: contents;
}
input[type=search] {
--input-height: calc(var(--input-size, 1rem) * 2.8125);
--input-padding-top:var(--space-xs, 0.5rem);
padding-right: calc(2 * var(--space-xxl, 3rem)) !important;
}
input[type=search]:is(.mini) ~ button[type=reset],
input[type=search]:is(.mini) ~ button[type=submit],
input[type=search]:is(.mini) ~ svg {
border-radius: var(--roundness-xxs, 0.25rem);
}
input[type=search]:is(.mini) ~ button[type=reset] {
right: var(--space-xl, 2rem);
}
input[type=search]:is(.mini) ~ msb-button-action button[type=reset],
input[type=search]:is(.mini) ~ msb-button-action button[type=submit] {
border-radius: var(--roundness-xxs, 0.25rem);
}
input[type=search]:is(.mini) ~ msb-button-action button[type=reset] {
right: var(--space-xl, 2rem);
}
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-results-button, input[type=search]::-webkit-search-results-decoration {
display: none;
}
input[type=search] ~ msb-button-action button[type=reset],
input[type=search] ~ msb-button-action button[type=submit],
input[type=search] ~ msb-button-action svg,
input[type=search] ~ msb-icon button[type=reset],
input[type=search] ~ msb-icon button[type=submit],
input[type=search] ~ msb-icon svg {
position: absolute;
top: var(--space-xxs, 0.25rem);
width: 1.5em;
height: 1.5em;
padding: var(--space-0, 0rem);
}
input[type=search] ~ msb-button-action button[type=submit],
input[type=search] ~ msb-button-action svg,
input[type=search] ~ msb-icon button[type=submit],
input[type=search] ~ msb-icon svg {
right: var(--space-xs, 0.5rem);
}
input[type=search] ~ msb-button-action .btn.action[type=reset] svg, input[type=search] ~ msb-button-action .btn.action[type=submit] svg,
input[type=search] ~ msb-icon .btn.action[type=reset] svg,
input[type=search] ~ msb-icon .btn.action[type=submit] svg {
display: none;
}
input[type=search] ~ msb-button-action .btn.action[type=reset]::after, input[type=search] ~ msb-button-action .btn.action[type=submit]::after,
input[type=search] ~ msb-icon .btn.action[type=reset]::after,
input[type=search] ~ msb-icon .btn.action[type=submit]::after {
content: "";
width: 1.5em;
height: 1.5em;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
input[type=search] ~ msb-button-action .btn.action[type=submit],
input[type=search] ~ msb-icon .btn.action[type=submit] {
background-color: var(--button-status-color);
border-color: transparent;
color: var(--button-status-contrast-color);
}
input[type=search] ~ msb-button-action .btn.action[type=submit]::after,
input[type=search] ~ msb-icon .btn.action[type=submit]::after {
-webkit-mask-image: var(--button-icon-search);
mask-image: var(--button-icon-search);
}
input[type=search] ~ msb-button-action .btn.action[type=reset],
input[type=search] ~ msb-icon .btn.action[type=reset] {
background-color: var(--body-bg);
border-color: var(--button-outline-stroke-color);
color: var(--button-outline-status-color);
}
input[type=search] ~ msb-button-action .btn.action[type=reset]::after,
input[type=search] ~ msb-icon .btn.action[type=reset]::after {
-webkit-mask-image: var(--button-icon-reset);
mask-image: var(--button-icon-reset);
}
input[type=search] ~ button[type=reset],
input[type=search] ~ button[type=submit],
input[type=search] ~ svg {
position: absolute;
top: var(--space-xxs, 0.25rem);
width: 1.5em;
height: 1.5em;
padding: var(--space-0, 0rem);
}
input[type=search] ~ button[type=submit],
input[type=search] ~ svg {
right: var(--space-xs, 0.5rem);
}
input[type=search] ~ msb-icon svg {
background-color: var(--input-label);
fill: var(--white);
padding: var(--space-xs, 0.5rem);
border-radius: var(--roundness-xs, 0.5rem);
}
input[type=search] ~ msb-icon svg title {
background-color: var(--input-bg);
color: var(--input-label);
}
input[type=search] ~ svg {
background-color: var(--input-label);
fill: var(--white);
padding: var(--space-xs, 0.5rem);
border-radius: var(--roundness-xs, 0.5rem);
}
input[type=search] ~ svg title {
background-color: var(--input-bg);
color: var(--input-label);
}
input[type=search] ~ msb-button-action button[type=reset] {
right: var(--space-xxl, 3rem);
display: none;
visibility: collapse;
}
input[type=search] ~ msb-button-action button[type=reset].show {
display: flex;
visibility: visible;
}
input[type=search] ~ button[type=reset] {
right: var(--space-xxl, 3rem);
display: none;
visibility: collapse;
}
input[type=search] ~ button[type=reset].show {
display: flex;
visibility: visible;
}
input[type=search] .btn.action[type=reset] svg, input[type=search] .btn.action[type=submit] svg {
display: none;
}
input[type=search] .btn.action[type=reset]::after, input[type=search] .btn.action[type=submit]::after {
content: "";
width: 1.5em;
height: 1.5em;
-webkit-mask-size: cover;
mask-size: cover;
background-color: currentColor;
}
input[type=search] .btn.action[type=submit] {
background-color: var(--button-status-color);
border-color: transparent;
color: var(--button-status-contrast-color);
}
input[type=search] .btn.action[type=submit]::after {
-webkit-mask-image: var(--button-icon-search);
mask-image: var(--button-icon-search);
}
input[type=search] .btn.action[type=reset] {
background-color: var(--body-bg);
border-color: var(--button-outline-stroke-color);
color: var(--button-outline-status-color);
}
input[type=search] .btn.action[type=reset]::after {
-webkit-mask-image: var(--button-icon-reset);
mask-image: var(--button-icon-reset);
}
input[type=search] {
line-height: 1.347em;
overflow: hidden;
text-overflow: ellipsis;
height: var(--input-size, 1rem);
min-height: var(--input-height, 2.8125rem);
font-size: var(--input-size, 1rem);
grid-row: 1;
grid-column: span 2;
display: inline-block;
box-sizing: border-box;
width: var(--input-width, 100%);
margin-bottom: var(--input-margin-bottom, var(--space-m, 1rem));
padding-left: var(--input-padding-side, 0.5rem);
padding-top: var(--space-s, 0.75rem);
background-color: var(--input-bg);
border-radius: var(--roundness-xxs, 0.25rem) var(--roundness-xxs, 0.25rem) var(--roundness-0, 0rem) var(--roundness-0, 0rem);
border: none;
padding-bottom: var(--border-1, 0.0625rem);
border-bottom: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-line);
color: var(--input-line);
font-family: var(--base-font-family, Roboto, sans-serif);
}
@supports (-webkit-touch-callout: none) or (-webkit-appearance: none) {
input[type=search] {
height: var(--input-height, 2.8125rem);
}
}
input[type=search]:autofill {
box-shadow: 0 0 0px 1000px var(--input-bg) inset;
}
input[type=search]:hover:not(:disabled, :read-only) {
padding-bottom: var(--border-0, 0);
border-width: var(--border-1, 0.0625rem);
border-color: var(--input-line);
}
input[type=search]:focus-within, input[type=search]:focus {
outline: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-label);
outline-offset: var(--border-4, 0.25rem);
border-bottom-width: var(--border-2, 0.125rem);
}
input[type=search]:focus:not(:disabled, :read-only) {
border-color: var(--input-line);
}
input[type=search]::placeholder {
color: var(--input-placeholder);
}
input[type=search]:-moz-placeholder:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
input[type=search]:focus:not(:read-only):not(.mini) ~ label, input[type=search]:placeholder-shown:not(.mini) ~ label, input[type=search].value-shown:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
input[type=search]:-moz-placeholder:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
input[type=search]:focus:not(:read-only):is(.mini) ~ label, input[type=search]:placeholder-shown:is(.mini) ~ label, input[type=search].value-shown:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
input[type=search]:read-only:not(:disabled) {
cursor: not-allowed;
}
input[type=search]:required ~ label::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
input[type=search]:disabled {
color: var(--input-disabled);
border-color: var(--input-disabled);
}
input[type=search]:disabled ~ label {
color: var(--input-disabled);
}
input[type=search]:disabled ~ .invalid-feedback,
input[type=search]:disabled ~ .valid-feedback,
input[type=search]:disabled ~ .hint,
input[type=search]:disabled ~ .counter {
display: none;
}
input[type=search] ~ label {
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
line-height: 1.26688rem;
position: absolute;
pointer-events: none;
left: var(--space-s, 0.75rem);
color: var(--input-label);
background-color: var(--input-bg);
top: var(--input-label-top, var(--input-size, 1rem));
}
@media (prefers-reduced-motion: no-preference) {
input[type=search] ~ label {
transition: all 300ms ease-in-out;
}
}
msb-select {
display: contents;
}
.form-group.withInfo select {
padding-right: calc(var(--input-padding-right) + 2.5em);
}
.form-group.withInfo select ~ msb-info-button [data-toggle=collapse],
.form-group.withInfo select ~ msb-info-button [data-toggle=tooltip],
.form-group.withInfo select ~ msb-info-button [data-toggle=sidebar] {
margin-right: var(--space-xl, 2rem);
}
.form-group.withInfo select ~ [data-toggle=collapse],
.form-group.withInfo select ~ [data-toggle=tooltip],
.form-group.withInfo select ~ [data-toggle=sidebar] {
margin-right: var(--space-xl, 2rem);
}
select {
--input-with: 100%;
overflow: hidden !important;
white-space: nowrap !important;
}
select ~ .selector {
position: absolute;
top: var(--space-0, 0rem);
right: var(--space-0, 0rem);
height: calc(var(--input-height, 2.8125rem) - var(--border-6, 0.5rem));
width: 2rem;
background-color: var(--input-bg);
}
select ~ .selector::after {
content: "";
width: 1.75rem;
display: flex;
height: calc(var(--input-height, 2.8125rem) - var(--border-2, 0.125rem));
-webkit-mask-image: var(--select-icon);
mask-image: var(--select-icon);
-webkit-mask-size: 1.5rem;
mask-size: 1.5rem;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background-color: var(--input-line);
}
select:disabled ~ .selector::after {
background-color: var(--input-disabled);
}
select:focus {
padding-bottom: var(--border-0, 0);
border-width: var(--border-3, 0.1875rem);
outline: var(--border-0, 0);
outline-offset: var(--border-0, 0);
border-color: var(--input-line);
}
select:read-only:not(:disabled) {
outline: var(--border-0, 0);
cursor: unset !important;
}
select option {
color: var(--input-label);
background-color: var(--select-bg);
font-size: 1.25rem;
min-height: 2rem;
padding: var(--space-s, 0.75rem);
margin: var(--space-s, 0.75rem);
}
select.placeholderSelected {
color: var(--input-placeholder);
}
select {
line-height: 1.347em;
text-overflow: ellipsis;
height: var(--input-size, 1rem);
min-height: var(--input-height, 2.8125rem);
font-size: var(--input-size, 1rem);
grid-row: 1;
grid-column: span 2;
display: inline-block;
box-sizing: border-box;
width: var(--input-width, 100%);
padding-right: var(--input-padding-right, 0rem);
margin-bottom: var(--input-margin-bottom, var(--space-m, 1rem));
padding-left: var(--input-padding-side, 0.5rem);
padding-top: var(--space-s, 0.75rem);
background-color: var(--input-bg);
border-radius: var(--roundness-xxs, 0.25rem) var(--roundness-xxs, 0.25rem) var(--roundness-0, 0rem) var(--roundness-0, 0rem);
border: none;
padding-bottom: var(--border-1, 0.0625rem);
border-bottom: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-line);
color: var(--input-line);
font-family: var(--base-font-family, Roboto, sans-serif);
}
@supports (-webkit-touch-callout: none) or (-webkit-appearance: none) {
select {
height: var(--input-height, 2.8125rem);
}
}
select.neutral {
background-color: var(--input-neutral-bg);
}
select.neutral ~ label {
color: var(--input-neutral-label);
background-color: var(--input-neutral-bg);
}
select.neutral:autofill {
box-shadow: 0 0 0px 1000px var(--input-bg) inset;
}
select.neutral ~ [data-toggle=collapse],
select.neutral ~ [data-toggle=tooltip],
select.neutral ~ [data-toggle=sidebar] {
background-color: var(--input-neutral-bg) !important;
}
select:autofill {
box-shadow: 0 0 0px 1000px var(--input-bg) inset;
}
select:hover:not(:disabled, :read-only) {
padding-bottom: var(--border-0, 0);
border-width: var(--border-1, 0.0625rem);
border-color: var(--input-line);
}
select:focus-within, select:focus {
outline: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-label);
outline-offset: var(--border-4, 0.25rem);
border-bottom-width: var(--border-2, 0.125rem);
}
select:focus:not(:disabled, :read-only) {
border-color: var(--input-line);
}
select::placeholder {
color: var(--input-placeholder);
}
select:-moz-placeholder:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
select:focus:not(:read-only):not(.mini) ~ label, select:placeholder-shown:not(.mini) ~ label, select.value-shown:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
select:-moz-placeholder:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
select:focus:not(:read-only):is(.mini) ~ label, select:placeholder-shown:is(.mini) ~ label, select.value-shown:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
select:required ~ label::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
select:disabled {
color: var(--input-disabled);
border-color: var(--input-disabled);
}
select:disabled ~ label {
color: var(--input-disabled);
}
select:disabled ~ .invalid-feedback,
select:disabled ~ .valid-feedback,
select:disabled ~ .hint,
select:disabled ~ .counter {
display: none;
}
select ~ [data-toggle=collapse],
select ~ [data-toggle=tooltip],
select ~ [data-toggle=sidebar] {
background-color: var(--input-bg) !important;
top: var(--space-xxs, 0.25rem) !important;
right: var(--space-xs, 0.5rem) !important;
}
select ~ msb-icon svg,
select ~ svg {
position: absolute;
top: var(--space-xs, 0.5rem);
right: var(--input-padding-info, var(--space-m, 1rem));
width: 1.5em;
height: 1.5em;
fill: var(--input-placeholder);
}
select ~ .hint {
grid-row: 2;
grid-column: 1;
margin-left: var(--space-xs, 0.5rem);
font-size: calc(var(--input-size, 1rem) / 16 * 13);
}
select ~ .counter {
grid-row: 2;
grid-column: 2;
margin-right: var(--space-xs, 0.5rem);
font-size: calc(var(--input-size, 1rem) / 16 * 13);
text-align: end;
}
select ~ .invalid-feedback,
select ~ .valid-feedback {
grid-row: 3;
grid-column: 1/span 2;
margin-left: var(--space-xs, 0.5rem);
display: none;
font-size: var(--input-size, 1rem);
}
select ~ label {
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
line-height: 1.26688rem;
position: absolute;
pointer-events: none;
left: var(--space-s, 0.75rem);
color: var(--input-label);
background-color: var(--input-bg);
top: var(--input-label-top, var(--input-size, 1rem));
}
@media (prefers-reduced-motion: no-preference) {
select ~ label {
transition: all 300ms ease-in-out;
}
}
select.isValid {
border-color: var(--input-valid);
}
select.isValid ~ label {
color: var(--input-valid);
}
select.isValid ~ label:after {
color: var(--input-valid);
}
select.isValid ~ .valid-feedback {
display: block;
color: var(--input-valid);
}
select.isValid:hover:not(:disabled, :read-only) {
border-color: var(--input-valid);
}
select.isValid:focus:not(:disabled, :read-only) {
border-color: var(--input-valid);
outline-color: var(--input-valid);
}
select.isInvalid {
border-color: var(--input-invalid);
}
select.isInvalid ~ label {
color: var(--input-invalid);
}
select.isInvalid ~ label:after {
color: var(--input-invalid);
}
select.isInvalid ~ .invalid-feedback {
display: block;
color: var(--input-invalid);
}
select.isInvalid:hover:not(:disabled, :read-only) {
border-color: var(--input-invalid);
}
select.isInvalid:focus:not(:disabled, :read-only) {
border-color: var(--input-invalid);
outline-color: var(--input-invalid);
}
msb-slide-toggle {
display: contents;
}
.checkbox-switch input[type=checkbox] {
block-size: 1px;
border: none;
clip: rect(0 0 0 0);
inline-size: 1px;
margin: var(--space-0, 0rem);
overflow: hidden;
padding: var(--space-0, 0rem);
position: absolute;
}
.checkbox-switch input[type=checkbox]:checked ~ label {
--checkedPosition: 1.5rem;
--colorChecked: var(--input-slide-checked);
}
.checkbox-switch input[type=checkbox]:checked ~ label::before {
background: var(--colorChecked);
}
.checkbox-switch input[type=checkbox]:checked ~ label::after {
transform: translateX(var(--checkedPosition));
}
.checkbox-switch input[type=checkbox]:not(:checked) ~ label {
--checkedPosition: var(--space-0, 0rem);
--colorChecked: var(--input-slide-unchecked);
}
.checkbox-switch input[type=checkbox]:focus ~ label::before {
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-slide-checked);
}
.checkbox-switch input[type=checkbox].waiting ~ label {
pointer-events: none;
cursor: wait;
}
.checkbox-switch input[type=checkbox].waiting ~ label::after {
background: radial-gradient(circle, var(--colorChecked), var(--colorChecked) 0.5rem, transparent 0.5rem, transparent), conic-gradient(from 90deg at 50% 50%, var(--colorChecked) 0deg, var(--white) 360deg);
}
@media (prefers-reduced-motion: no-preference) {
.checkbox-switch input[type=checkbox].waiting ~ label::after {
animation: loading 2s linear infinite;
}
}
@media (prefers-reduced-motion: no-preference) {
.checkbox-switch input[type=checkbox].waiting ~ label::before, .checkbox-switch input[type=checkbox].waiting ~ label::after {
transition: all 300ms ease-in-out;
}
}
.checkbox-switch input[type=checkbox]:disabled:not(.waiting) ~ label {
cursor: not-allowed;
}
.checkbox-switch input[type=checkbox]:disabled:not(.waiting) ~ label::after {
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--input-slide-icon-lock);
mask-image: var(--input-slide-icon-lock);
}
.checkbox-switch label:not(:has(input[type=checkbox])) {
border-radius: var(--roundness-xxs, 0.25rem);
cursor: pointer;
display: grid;
grid-template-columns: 3rem 1fr;
gap: var(--space-xs, 0.5rem);
align-self: center;
}
.checkbox-switch label:not(:has(input[type=checkbox])):nth-child(1) {
grid-column-start: 2;
}
.checkbox-switch label:not(:has(input[type=checkbox]))::before {
block-size: 1.5rem;
border-radius: var(--roundness-m, 1rem);
box-sizing: border-box;
background: var(--colorChecked);
inline-size: 3rem;
}
.checkbox-switch label:not(:has(input[type=checkbox]))::before, .checkbox-switch label:not(:has(input[type=checkbox]))::after {
content: "";
grid-column: 1/2;
grid-row: 1/2;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
align-self: center;
}
.checkbox-switch label:not(:has(input[type=checkbox]))::after {
background-color: var(--input-slide);
block-size: calc(1.5rem - var(--border-2, 0.125rem) * 2);
inline-size: calc(1.5rem - var(--border-2, 0.125rem) * 2);
border-radius: var(--roundness-xxxl, 50%);
margin: var(--border-2, 0.125rem);
}
@media (prefers-reduced-motion: no-preference) {
.checkbox-switch label:not(:has(input[type=checkbox]))::after {
transition: all 300ms ease-in-out;
}
}
.checkbox-switch label:has(input[type=checkbox]) {
border-radius: var(--roundness-xxs, 0.25rem);
cursor: pointer;
display: grid;
grid-template-columns: 3rem 1fr;
gap: var(--space-xs, 0.5rem);
align-self: center;
}
.checkbox-switch label:has(input[type=checkbox]):nth-child(1) {
grid-column-start: 2;
}
.checkbox-switch label:has(input[type=checkbox])::before {
block-size: 1.5rem;
border-radius: var(--roundness-m, 1rem);
box-sizing: border-box;
background: var(--colorChecked);
inline-size: 3rem;
}
.checkbox-switch label:has(input[type=checkbox])::before, .checkbox-switch label:has(input[type=checkbox])::after {
content: "";
grid-column: 1/2;
grid-row: 1/2;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
align-self: center;
}
.checkbox-switch label:has(input[type=checkbox])::after {
background-color: var(--input-slide);
block-size: calc(1.5rem - var(--border-2, 0.125rem) * 2);
inline-size: calc(1.5rem - var(--border-2, 0.125rem) * 2);
border-radius: var(--roundness-xxxl, 50%);
margin: var(--border-2, 0.125rem);
}
@media (prefers-reduced-motion: no-preference) {
.checkbox-switch label:has(input[type=checkbox])::after {
transition: all 300ms ease-in-out;
}
}
.checkbox-switch label:has(input[type=checkbox]) input[type=checkbox] {
block-size: 1px;
border: none;
clip: rect(0 0 0 0);
inline-size: 1px;
margin: var(--space-0, 0rem);
overflow: hidden;
padding: var(--space-0, 0rem);
position: absolute;
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox]:checked) {
--checkedPosition: 1.5rem;
--colorChecked: var(--input-slide-checked);
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox]:checked)::before {
background: var(--colorChecked);
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox]:checked)::after {
transform: translateX(var(--checkedPosition));
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox]:not(:checked)) {
--checkedPosition: var(--space-0, 0rem);
--colorChecked: var(--input-slide-unchecked);
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox]:focus)::before {
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-slide-checked);
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox].waiting) {
pointer-events: none;
cursor: wait;
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox].waiting)::after {
background: radial-gradient(circle, var(--colorChecked), var(--colorChecked) 0.5rem, transparent 0.5rem, transparent), conic-gradient(from 90deg at 50% 50%, var(--colorChecked) 0deg, var(--white) 360deg);
}
@media (prefers-reduced-motion: no-preference) {
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox].waiting)::after {
animation: loading 2s linear infinite;
}
}
@media (prefers-reduced-motion: no-preference) {
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox].waiting)::before, .checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox].waiting)::after {
transition: all 300ms ease-in-out;
}
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox]:disabled:not(.waiting)) {
cursor: not-allowed;
}
.checkbox-switch label:has(input[type=checkbox]):has(input[type=checkbox]:disabled:not(.waiting))::after {
-webkit-mask-position: center;
mask-position: center;
-webkit-mask-size: cover;
mask-size: cover;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: var(--input-slide-icon-lock);
mask-image: var(--input-slide-icon-lock);
}
msb-snackbar,
msb-snachbar-stack {
display: contents;
}
.snackbar {
--snackbar-left: 50%;
--snackbar-bottom: var(--space-xl, 2rem);
--snackbar-top: unset;
--snackbar-right: unset;
--snackbar-translateX: translateX(-50%);
--snackbar-translateY: translateY(0);
visibility: hidden;
position: fixed;
display: flex;
font-size: 1rem;
color: var(--snackbar-color);
background-color: var(--snackbar-bg);
padding: var(--space-m, 1rem) var(--space-xs, 0.5rem) var(--space-m, 1rem) var(--space-m, 1rem);
flex-direction: column;
align-items: flex-start;
border-radius: var(--roundness-s, 0.75rem);
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
gap: var(--space-xs, 0.5rem);
left: var(--snackbar-left);
bottom: var(--snackbar-bottom);
top: var(--snackbar-top);
right: var(--snackbar-right);
transform: var(--snackbar-translateX) var(--snackbar-translateY);
line-height: 171.688%;
padding-right: var(--space-xxl, 3rem);
}
.snackbar.fadeIn {
visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
.snackbar.fadeIn {
animation: snackbar-in 300ms ease-in-out;
}
}
.snackbar.show {
visibility: visible;
}
.snackbar.fadeOut {
visibility: visible;
}
@media (prefers-reduced-motion: no-preference) {
.snackbar.fadeOut {
animation: snackbar-out 300ms ease-in-out;
}
}
.snackbar .title {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-right: var(--space-xxl, 3rem);
}
.snackbar .btn[data-close] {
position: absolute;
right: var(--space-xs, 0.5rem);
top: var(--space-xs, 0.5rem);
width: 2rem;
height: 2rem;
background-color: var(--snackbar-close-bg);
color: var(--snackbar-close-color);
}
.snackbar .btn[data-close]::after {
width: 1rem;
height: 1rem;
}
.snackbar.top {
--snackbar-top:var(--space-xl, 2rem) !important;
--snackbar-bottom: unset !important;
--snackbar-left: 50%;
--snackbar-right: unset;
--snackbar-translateX: translateX(-50%);
--snackbar-translateY: translateY(0);
}
.snackbar.bottom {
--snackbar-bottom: var(--space-xl, 2rem) !important;
--snackbar-top: unset !important;
--snackbar-left: 50%;
--snackbar-right: unset;
--snackbar-translateX: translateX(-50%);
--snackbar-translateY: translateY(0);
}
.snackbar.start {
--snackbar-left: var(--space-xl, 2rem) !important;
--snackbar-right: unset !important;
--snackbar-top: 50%;
--snackbar-bottom: unset;
--snackbar-translateX: translateX(0);
--snackbar-translateY: translateY(-50%);
}
.snackbar.start.top, .snackbar.start.bottom {
--snackbar-translateY: translateY(0);
}
.snackbar.end {
--snackbar-right: var(--space-xl, 2rem) !important;
--snackbar-left: unset !important;
--snackbar-top: 50%;
--snackbar-bottom: unset;
--snackbar-translateX: translateX(0);
--snackbar-translateY: translateY(-50%);
}
.snackbar.end.top, .snackbar.end.buttom {
--snackbar-translateY: translateY(0);
}
.snackbar.neutral {
--snackbar-color:var(--snackbar-color-neutral);
}
.snackbar.primary {
--snackbar-color:var(--snackbar-color-primary);
}
.snackbar.secondary {
--snackbar-color:var(--snackbar-color-secondary);
}
.snackbar.success {
--snackbar-color:var(--snackbar-color-success);
}
.snackbar.help {
--snackbar-color:var(--snackbar-color-help);
}
.snackbar.warning {
--snackbar-color:var(--snackbar-color-warning);
}
.snackbar.danger {
--snackbar-color:var(--snackbar-color-danger);
}
.snackbar.mode {
--snackbar-color:var(--snackbar-color-mode);
}
.snackbar-stack {
position: fixed;
display: flex;
flex-direction: column;
gap: var(--space-l, 1.5rem);
--snackbar-stack-right: var(--space-xl, 2rem);
--snackbar-stack-left: unset;
--snackbar-stack-top: var(--space-xl, 2rem);
--snackbar-stack-bottom: unset;
--snackbar-stack-translateX: translateX(0);
--snackbar-stack-translateY: translateY(0);
left: var(--snackbar-stack-left);
bottom: var(--snackbar-stack-bottom);
top: var(--snackbar-stack-top);
right: var(--snackbar-stack-right);
transform: var(--snackbar-stack-translateX) var(--snackbar-stack-translateY);
}
.snackbar-stack .snackbar {
visibility: hidden;
display: none;
position: relative;
--snackbar-left: unset;
--snackbar-bottom: unset;
--snackbar-top: unset;
--snackbar-right: unset;
--snackbar-translateX: unset;
--snackbar-translate: unset;
}
.snackbar-stack .snackbar.fadeIn, .snackbar-stack .snackbar.show, .snackbar-stack .snackbar.fadeOut {
display: flex;
visibility: visible;
}
.snackbar-stack.top {
--snackbar-stack-top:var(--space-xl, 2rem);
--snackbar-stack-bottom: unset;
--snackbar-stack-left: 50%;
--snackbar-stack-right: unset;
--snackbar-stack-translateX: translateX(-50%);
--snackbar-stack-translateY: translateY(0);
}
.snackbar-stack.bottom {
--snackbar-stack-bottom: var(--space-xl, 2rem);
--snackbar-stack-top: unset;
--snackbar-stack-left: 50%;
--snackbar-stack-right: unset;
--snackbar-stack-translateX: translateX(-50%);
--snackbar-stack-translateY: translateY(0);
}
.snackbar-stack.start {
--snackbar-stack-left: var(--space-xl, 2rem);
--snackbar-stack-right: unset;
--snackbar-stack-top: 50%;
--snackbar-stack-bottom: unset;
--snackbar-stack-translateX: translateX(0);
--snackbar-stack-translateY: translateY(-50%);
}
.snackbar-stack.start.top, .snackbar-stack.start.bottom {
--snackbar-stack-translateY: translateY(0);
}
.snackbar-stack.start.top {
--snackbar-stack-top: var(--space-xl, 2rem);
--snackbar-stack-bottom: unset;
}
.snackbar-stack.start.bottom {
--snackbar-stack-top: unset;
--snackbar-stack-bottom: var(--space-xl, 2rem);
}
.snackbar-stack.end {
--snackbar-stack-right: var(--space-xl, 2rem);
--snackbar-stack-left: unset;
--snackbar-stack-top: 50%;
--snackbar-stack-bottom: unset;
--snackbar-stack-translateX: translateX(0);
--snackbar-stack-translateY: translateY(-50%);
}
.snackbar-stack.end.top, .snackbar-stack.end.buttom {
--snackbar-stack-translateY: translateY(0);
}
.snackbar-stack.end.top {
--snackbar-stack-top: var(--space-xl, 2rem);
--snackbar-stack-bottom: unset;
}
.snackbar-stack.end.bottom {
--snackbar-stack-top: unset;
--snackbar-stack-bottom: var(--space-xl, 2rem);
}
.btn[data-toggle=sort] {
flex-direction: row;
padding-left: var(--space-m, 1rem);
padding-right: var(--space-m, 1rem);
}
.btn[data-toggle=sort]::before {
content: "";
}
.btn[data-toggle=sort].show-title::before {
content: "Sortieren";
}
.btn[data-toggle=sort] .title {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--space-xs, 0.5rem);
}
.btn[data-toggle=sort] .title::before {
content: "";
-webkit-mask-image: var(--sort-icon);
mask-image: var(--sort-icon);
display: flex;
width: 1.5rem;
height: 1.5rem;
grid-column: 2;
-webkit-mask-position: center right;
mask-position: center right;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-size: 1.5rem;
mask-size: 1.5rem;
background-color: currentColor;
}
dialog.sort {
display: none;
visibility: hidden;
background-color: var(--sort-dialog-background);
padding: var(--space-xs, 0.5rem);
margin: var(--space-0, 0rem);
margin-top: var(--space-m, 1rem);
color: var(--help-txt);
border: var(--border-0, 0);
border-radius: var(--roundness-s, 0.75rem);
min-width: 17.375rem;
max-width: var(--dialog-max-width);
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
}
dialog.sort[open] {
position: absolute;
display: block;
padding: var(--space-m, 1rem);
opacity: 1;
visibility: visible;
pointer-events: auto;
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--sort-dialog-border);
left: unset;
right: var(--space-0, 0rem);
top: var(--space-0, 0rem);
bottom: unset;
z-index: 1000;
}
dialog.sort[open].left {
top: var(--space-0, 0rem);
left: var(--space-0, 0rem);
}
dialog.sort[open].left::before {
left: var(--space-m, 1rem);
right: unset;
top: calc(-1 * var(--space-s, 0.75rem));
bottom: unset;
}
dialog.sort[open].top {
top: unset;
bottom: var(--space-m, 1rem);
right: var(--space-0, 0rem);
left: unset;
}
dialog.sort[open].top::before {
right: var(--space-m, 1rem);
left: unset;
top: unset;
bottom: calc(-1 * var(--space-s, 0.75rem));
transform: rotate(135deg);
}
dialog.sort[open].top.left {
left: var(--space-0, 0rem);
}
dialog.sort[open].top.left::before {
left: var(--space-m, 1rem);
right: unset;
}
dialog.sort::before {
content: "";
display: block;
width: 1em;
height: 1em;
top: calc(-1 * var(--space-s, 0.75rem));
bottom: unset;
right: var(--space-m, 1rem);
left: unset;
position: absolute;
visibility: visible;
background: var(--sort-dialog-background);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--sort-dialog-border);
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--sort-dialog-border);
transform: rotate(-45deg);
}
dialog.sort .body {
display: flex;
flex-direction: column;
gap: var(--space-m, 1rem);
padding-top: var(--space-m, 1rem);
}
dialog.sort .footer,
dialog.sort footer {
display: flex;
gap: var(--space-m, 1rem);
justify-content: flex-end;
padding-top: var(--space-m, 1rem);
}
dialog.sort .footer .btn,
dialog.sort footer .btn {
min-height: 3rem;
}
.card.neutral,
tr.neutral {
--card-statusindicator-color: var(--card-statusindicator-color-neutral);
}
.card.primary,
tr.primary {
--card-statusindicator-color: var(--card-statusindicator-color-primary);
}
.card.secondary,
tr.secondary {
--card-statusindicator-color: var(--card-statusindicator-color-secondary);
}
.card.success,
tr.success {
--card-statusindicator-color: var(--card-statusindicator-color-success);
}
.card.help,
tr.help {
--card-statusindicator-color: var(--card-statusindicator-color-help);
}
.card.warning,
tr.warning {
--card-statusindicator-color: var(--card-statusindicator-color-warning);
}
.card.danger,
tr.danger {
--card-statusindicator-color: var(--card-statusindicator-color-danger);
}
.card.mode,
tr.mode {
--card-statusindicator-color: var(--card-statusindicator-color-mode);
}
.card .status-indicator,
tr .status-indicator {
display: inline-flex;
flex-wrap: nowrap;
white-space: nowrap;
font-size: 0.875rem;
padding: var(--space-xxs, 0.25rem) var(--space-xs, 0.5rem);
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
text-align: center;
border-radius: var(--roundness-xs, 0.5rem);
background-color: var(--card-statusindicator-color) !important;
}
.card .status-indicator svg,
tr .status-indicator svg {
width: var(--space-m, 1rem);
height: var(--space-m, 1rem);
fill: currentColor;
overflow: unset;
}
.card .status-indicator svg:not(:first-child),
.card .status-indicator img:not(:first-child),
tr .status-indicator svg:not(:first-child),
tr .status-indicator img:not(:first-child) {
display: none;
}
msb-stepper,
msb-stepper-header,
msb-stepper-content,
msb-step,
msb-stepper-panel {
display: contents;
}
.stepper {
display: flex;
flex-direction: column;
}
.stepper .stepper-header {
display: flex;
overflow: auto;
flex-grow: 1;
flex-shrink: 1;
justify-content: center;
width: 100%;
}
.stepper .stepper-header.scrollbar {
position: relative;
}
.stepper .stepper-header.scrollbar ol.steps {
overflow: auto;
}
.stepper .stepper-header.scrollbar::before, .stepper .stepper-header.scrollbar::after {
position: absolute;
content: "";
top: var(--space-0, 0rem);
width: 3rem;
height: 90%;
}
.stepper .stepper-header.scrollbar::before {
left: var(--space-0, 0rem);
background: linear-gradient(to right, var(--stepper-background-color), transparent);
}
.stepper .stepper-header.scrollbar::after {
right: var(--space-0, 0rem);
background: linear-gradient(to left, var(--stepper-background-color), transparent);
}
.stepper .stepper-header.scrollbar.start::before {
display: none;
}
.stepper .stepper-header.scrollbar.end::after {
display: none;
}
.stepper .stepper-header.overflow ol.steps {
overflow: hidden;
margin: var(--space-0, 0rem) var(--space-xs, 0.5rem);
width: calc(100% - var(--space-l, 1.5rem));
}
.stepper .stepper-header.overflow .action {
display: flex;
position: relative;
flex-shrink: 0;
}
.stepper .stepper-header .action {
display: none;
background-color: var(--stepper-scroll-bg);
color: var(--stepper-scroll-txt);
width: var(--space-l, 1.5rem);
height: auto;
border-radius: var(--roundness-xs, 0.5rem);
margin: var(--space-xxs, 0.25rem) var(--space-0, 0rem);
outline-offset: 0;
outline-color: var(--stepper-scroll-bg);
}
.stepper .stepper-header .action::after {
content: "";
opacity: 1;
display: inline-flex;
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--stepper-scroll-txt);
width: 1.5rem;
height: 1.5rem;
}
.stepper .stepper-header .action[data-toggle=scroll-forward] {
right: var(--border-2, 0.125rem);
}
.stepper .stepper-header .action[data-toggle=scroll-forward]::after {
right: var(--border-2, 0.125rem);
margin-right: var(--space-xs, 0.5rem);
-webkit-mask-image: var(--stepper-scroll-forward-icon);
mask-image: var(--stepper-scroll-forward-icon);
}
.stepper .stepper-header .action[data-toggle=scroll-reverse] {
left: var(--border-2, 0.125rem);
}
.stepper .stepper-header .action[data-toggle=scroll-reverse]::after {
left: var(--border-2, 0.125rem);
margin-left: var(--space-xs, 0.5rem);
-webkit-mask-image: var(--stepper-scroll-backward-icon);
mask-image: var(--stepper-scroll-backward-icon);
}
.stepper .stepper-header .action:focus, .stepper .stepper-header .action:hover {
outline-color: var(--stepper-scroll-txt);
}
.stepper .stepper-header ol.steps {
--space: 1vi;
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
list-style: none;
display: flex;
gap: var(--space, 1vi);
counter-reset: stepper-counter;
width: 100%;
}
.stepper .stepper-header ol.steps li {
counter-increment: stepper-counter;
margin: var(--space-m, 1rem) var(--space-0, 0rem);
padding: var(--space-m, 1rem) var(--space-0, 0rem);
background: transparent;
flex-grow: 1;
flex-basis: 20%;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-xs, 0.5rem);
position: relative;
min-width: 6.5rem;
}
.stepper .stepper-header ol.steps li::before {
content: "";
display: none;
}
.stepper .stepper-header ol.steps li button {
appearance: none;
background: transparent;
border: transparent;
}
.stepper .stepper-header ol.steps li a,
.stepper .stepper-header ol.steps li button {
position: unset;
}
.stepper .stepper-header ol.steps li a:focus, .stepper .stepper-header ol.steps li a:focus-visible,
.stepper .stepper-header ol.steps li button:focus,
.stepper .stepper-header ol.steps li button:focus-visible {
outline: var(--border-1, 0.0625rem) var(--border-style, solid) var(--link-color);
border-radius: var(--roundness-xs, 0.5rem);
}
.stepper .stepper-header ol.steps li a.title,
.stepper .stepper-header ol.steps li button.title {
text-decoration: none;
color: currentColor;
font-size: 0.85em;
box-sizing: border-box;
overflow-wrap: anywhere;
outline-offset: var(--border-0, 0);
margin: var(--border-2, 0.125rem);
}
.stepper .stepper-header ol.steps li a.title:focus::after,
.stepper .stepper-header ol.steps li button.title:focus::after {
margin: var(--space-xxs, 0.25rem);
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--primary);
border-radius: var(--roundness-m, 1rem);
}
.stepper .stepper-header ol.steps li a.title:not(:disabled):hover::after,
.stepper .stepper-header ol.steps li button.title:not(:disabled):hover::after {
border-radius: var(--roundness-m, 1rem);
background-color: var(--primary);
opacity: 0.2;
}
.stepper .stepper-header ol.steps li a.title:not(:disabled)::after,
.stepper .stepper-header ol.steps li button.title:not(:disabled)::after {
content: "";
background: transparent;
inset: 0;
position: absolute;
display: block;
z-index: 3;
cursor: pointer;
}
.stepper .stepper-header ol.steps li .step-icon {
height: 2em;
width: 2em;
border: var(--border-4, 0.25rem) var(--border-style, solid) var(--stepper-background-color);
display: flex;
align-items: center;
justify-content: center;
background-color: var(--stepper-dot-background-neutral);
color: var(--stepper-number-neutral);
border-radius: var(--roundness-xxxl, 50%);
z-index: 2;
}
.stepper .stepper-header ol.steps li .step-icon::after {
content: counter(stepper-counter);
}
.stepper .stepper-header ol.steps li[aria-current=step] .step-icon {
background-color: var(--stepper-dot-background-primary);
color: var(--stepper-number-primary);
}
.stepper .stepper-header ol.steps li.done .step-icon {
background-color: var(--stepper-dot-background-secondary);
}
.stepper .stepper-header ol.steps li.done .step-icon::after {
content: "";
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--stepper-icon-color);
height: 1.5rem;
width: 1.5rem;
-webkit-mask-image: var(--stepper-checked-icon);
mask-image: var(--stepper-checked-icon);
}
.stepper .stepper-header ol.steps li.no-data .step-icon {
background-color: var(--stepper-dot-background-secondary);
}
.stepper .stepper-header ol.steps li.no-data .step-icon::after {
content: "/";
color: var(--stepper-number-primary);
-webkit-mask-image: none;
mask-image: none;
background-color: transparent;
}
.stepper .stepper-header ol.steps li.error .step-icon {
background-color: var(--stepper-dot-background-danger);
}
.stepper .stepper-header ol.steps li.error .step-icon::after {
content: "";
-webkit-mask-size: cover;
mask-size: cover;
background-color: var(--stepper-icon-color);
height: 1.5rem;
width: 1.5rem;
-webkit-mask-image: var(--stepper-error-icon);
mask-image: var(--stepper-error-icon);
position: relative;
bottom: var(--border-2, 0.125rem);
}
.stepper .stepper-header ol.steps li::after {
content: " ";
height: 3px;
width: calc(100% + var(--space, 1vi));
background: var(--stepper-line-neutral);
display: block;
position: absolute;
right: 50%;
top: calc(var(--space-m, 1rem) + 1em);
transform: translateX(100%);
}
.stepper .stepper-header ol.steps li:last-child::after {
display: none;
}
.stepper .stepper-header ol.steps li.done::after, .stepper .stepper-header ol.steps li.no-data::after {
background: var(--stepper-line-secondary);
}
.stepper .stepper-header ol.steps msb-step:not(:last-child) li::after {
display: block;
}
.stepper .stepper-header ol.steps msb-step:last-child li::after {
display: none;
}
.stepper .stepper-content {
background-color: var(--neutral-5);
padding-left: var(--space-m, 1rem);
padding-right: var(--space-m, 1rem);
overflow: hidden;
font-size: 1rem;
}
.stepper .stepper-content.transparent {
background-color: transparent;
}
.stepper .stepper-content.roundned-bottom {
border-bottom-left-radius: var(--roundness-xs, 0.5rem);
border-bottom-right-radius: var(--roundness-xs, 0.5rem);
}
.stepper .stepper-content.roundned-top {
border-top-left-radius: var(--roundness-xs, 0.5rem);
border-top-right-radius: var(--roundness-xs, 0.5rem);
}
.stepper .stepper-content .steppanel {
visibility: hidden;
display: none;
}
.stepper .stepper-content .fadeIn {
visibility: collapse;
display: flex;
transform: translateX(100%);
}
.stepper .stepper-content .active {
display: block;
visibility: visible;
transform: translateX(0);
}
@media (prefers-reduced-motion: no-preference) {
.stepper .stepper-content .active {
transition: transform 300ms ease-in;
}
}
msb-table,
msb-table-body,
msb-table-foot,
msb-table-head,
msb-table-row,
msb-table-cell,
msb-table-header-cell {
display: contents;
}
table {
width: 100%;
table-layout: fixed;
overflow: hidden;
caption-side: top;
border-collapse: collapse;
}
table caption {
padding-top: var(--space-xs, 0.5rem);
padding-bottom: var(--space-xs, 0.5rem);
font-size: var(--heading-3-size);
color: var(--table-caption-txt);
text-align: center;
}
table thead,
table tbody,
table tfoot,
table tr,
table td,
table th {
text-align: inherit;
border-color: inherit;
border-style: var(--border-style, solid);
border-width: var(--border-0, 0);
}
table td,
table th {
padding: var(--space-s, 0.75rem);
}
table tr {
border-bottom: var(--border-2, 0.125rem) var(--border-style, solid) var(--table-border);
}
table.table-striped:not(.table-card) tbody tr:nth-of-type(odd):not(:hover) * {
background-color: var(--table-striped-bg);
color: var(--table-striped-txt);
}
table.table-striped:not(.table-card):not(.table-hover) tbody tr:nth-of-type(odd) * {
background-color: var(--table-striped-bg);
color: var(--table-striped-txt);
}
.table-responsive {
overflow-x: auto;
max-width: 100%;
}
.table-responsive table {
width: unset;
min-width: 100%;
}
table.table-hover:not(.table-card) tr:hover {
color: var(--table-hover-txt);
background-color: var(--table-hover-bg);
}
table.table-hover:is(.table-card) tr:hover {
background-color: var(--card-bg-hover);
}
table.table-sortable th button {
font-weight: 600;
display: flex;
font-size: inherit;
padding: var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-0, 0rem) !important;
justify-content: flex-start;
align-items: center;
gap: var(--space-xxs, 0.25rem);
text-decoration: none;
border-radius: var(--roundness-xs, 0.5rem);
box-shadow: none;
outline-offset: var(--border-2, 0.125rem);
outline-width: var(--border-2, 0.125rem);
outline-style: var(--border-style, solid);
outline-color: transparent;
border: var(--border-2, 0.125rem);
border-style: var(--border-style, solid);
border-color: transparent;
background-color: transparent;
color: currentColor;
width: 100%;
height: 100%;
text-align: start;
}
table.table-sortable th button::after {
content: " ";
font-size: 0.5em;
color: var(--table-sort-txt);
white-space: pre;
}
table.table-sortable th[aria-sort] button {
justify-content: space-between;
}
table.table-sortable th[aria-sort=ascending] button::after {
content: "A\a↓\aZ";
}
table.table-sortable th[aria-sort=ascending].num button::after {
content: "1\a↓\a 9";
}
table.table-sortable th[aria-sort=ascending].date button::after {
content: "jan\a↓\a dez";
}
table.table-sortable th[aria-sort=ascending].custom button::after {
font-size: large;
content: "↓\a";
}
table.table-sortable th[aria-sort=descending] button::after {
content: "Z\a↓\a A";
}
table.table-sortable th[aria-sort=descending].num button::after {
content: "9\a↓\a 1";
}
table.table-sortable th[aria-sort=descending].date button::after {
content: "dez\a↓\ajan";
}
table.table-sortable th[aria-sort=descending].custom button::after {
font-size: large;
content: "↑\a";
}
table.table-sortable td.num,
table.table-sortable td.date {
text-align: end;
}
table.table-sortable:is(table.table-sortable.table-card) th button:hover {
transform: translateY(-1px);
}
table.table-sortable:is(table.table-sortable.table-card) th button:focus, table.table-sortable:is(table.table-sortable.table-card) th button:focus-visible, table.table-sortable:is(table.table-sortable.table-card) th button:active {
outline-color: var(--mini-card-header-text);
}
table.table-sortable:not(table.table-sortable.table-card):hover {
color: currentColor;
background-color: transparent !important;
}
table.table-sortable:not(table.table-sortable.table-card):hover::after {
color: currentColor;
}
table.table-sortable:not(table.table-sortable.table-card) th button:hover {
transform: translateY(-1px);
color: var(--table-hover-txt);
background-color: var(--table-hover-bg) !important;
}
table.table-sortable:not(table.table-sortable.table-card) th button:hover::after {
color: var(--table-hover-txt);
}
table.table-sortable:not(table.table-sortable.table-card) th button:focus, table.table-sortable:not(table.table-sortable.table-card) th button:focus-visible, table.table-sortable:not(table.table-sortable.table-card) th button:active {
outline-color: var(--table-striped-bg);
border-color: transparent;
color: var(--table-hover-txt);
background-color: var(--table-hover-bg) !important;
}
table.table-sortable:not(table.table-sortable.table-card) th button:focus::after, table.table-sortable:not(table.table-sortable.table-card) th button:focus-visible::after, table.table-sortable:not(table.table-sortable.table-card) th button:active::after {
color: var(--table-hover-txt);
}
table.table-sortable:not(table.table-sortable.table-card).table-hover tr:hover button::after {
color: var(--table-hover-txt);
}
table.table-filter button[type=submit]:disabled {
background-color: var(--button-status-color);
color: var(--button-status-contrast-color);
}
@media screen and (max-width: 991.99px) {
table.table-reorganise {
border-collapse: separate;
border-spacing: var(--space-0, 0rem) var(--space-s, 0.75rem);
padding: var(--space-0, 0rem) var(--space-xxs, 0.25rem);
}
table.table-reorganise thead {
display: none;
}
table.table-reorganise tr {
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.3125rem;
border-radius: var(--roundness-xs, 0.5rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
border: var(--border-2, 0.125rem);
border-style: var(--border-style, solid);
border-color: transparent;
}
table.table-reorganise td,
table.table-reorganise th {
display: block;
word-break: break-word;
white-space: pre-line;
background-color: var(--card-bg);
}
table.table-reorganise td::before,
table.table-reorganise th::before {
content: attr(data-parent);
display: block;
font-size: 1.1rem;
font-weight: 600;
line-height: 2rem;
}
table.table-reorganise td:first-child,
table.table-reorganise th:first-child {
border-radius: var(--roundness-xs, 0.5rem) var(--roundness-xs, 0.5rem) var(--roundness-0, 0rem) var(--roundness-0, 0rem);
}
table.table-reorganise td:last-child,
table.table-reorganise th:last-child {
border-radius: var(--roundness-0, 0rem) var(--roundness-0, 0rem) var(--roundness-xs, 0.5rem) var(--roundness-xs, 0.5rem);
}
}
msb-table,
msb-table-body,
msb-table-foot,
msb-table-head,
msb-table-row,
msb-table-cell,
msb-table-header-cell {
display: contents;
}
table {
width: 100%;
table-layout: fixed;
overflow: hidden;
caption-side: top;
border-collapse: collapse;
}
table caption {
padding-top: var(--space-xs, 0.5rem);
padding-bottom: var(--space-xs, 0.5rem);
font-size: var(--heading-3-size);
color: var(--table-caption-txt);
text-align: center;
}
table thead,
table tbody,
table tfoot,
table tr,
table td,
table th {
text-align: inherit;
border-color: inherit;
border-style: var(--border-style, solid);
border-width: var(--border-0, 0);
}
table td,
table th {
padding: var(--space-s, 0.75rem);
}
table tr {
border-bottom: var(--border-2, 0.125rem) var(--border-style, solid) var(--table-border);
}
table.table-striped:not(.table-card) tbody tr:nth-of-type(odd):not(:hover) * {
background-color: var(--table-striped-bg);
color: var(--table-striped-txt);
}
table.table-striped:not(.table-card):not(.table-hover) tbody tr:nth-of-type(odd) * {
background-color: var(--table-striped-bg);
color: var(--table-striped-txt);
}
.table-responsive {
overflow-x: auto;
max-width: 100%;
}
.table-responsive table {
width: unset;
min-width: 100%;
}
table.table-hover:not(.table-card) tr:hover {
color: var(--table-hover-txt);
background-color: var(--table-hover-bg);
}
table.table-hover:is(.table-card) tr:hover {
background-color: var(--card-bg-hover);
}
table.table-sortable th button {
font-weight: 600;
display: flex;
font-size: inherit;
padding: var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-s, 0.75rem) var(--space-0, 0rem) !important;
justify-content: flex-start;
align-items: center;
gap: var(--space-xxs, 0.25rem);
text-decoration: none;
border-radius: var(--roundness-xs, 0.5rem);
box-shadow: none;
outline-offset: var(--border-2, 0.125rem);
outline-width: var(--border-2, 0.125rem);
outline-style: var(--border-style, solid);
outline-color: transparent;
border: var(--border-2, 0.125rem);
border-style: var(--border-style, solid);
border-color: transparent;
background-color: transparent;
color: currentColor;
width: 100%;
height: 100%;
text-align: start;
}
table.table-sortable th button::after {
content: " ";
font-size: 0.5em;
color: var(--table-sort-txt);
white-space: pre;
}
table.table-sortable th[aria-sort] button {
justify-content: space-between;
}
table.table-sortable th[aria-sort=ascending] button::after {
content: "A\a↓\aZ";
}
table.table-sortable th[aria-sort=ascending].num button::after {
content: "1\a↓\a 9";
}
table.table-sortable th[aria-sort=ascending].date button::after {
content: "jan\a↓\a dez";
}
table.table-sortable th[aria-sort=ascending].custom button::after {
font-size: large;
content: "↓\a";
}
table.table-sortable th[aria-sort=descending] button::after {
content: "Z\a↓\a A";
}
table.table-sortable th[aria-sort=descending].num button::after {
content: "9\a↓\a 1";
}
table.table-sortable th[aria-sort=descending].date button::after {
content: "dez\a↓\ajan";
}
table.table-sortable th[aria-sort=descending].custom button::after {
font-size: large;
content: "↑\a";
}
table.table-sortable td.num,
table.table-sortable td.date {
text-align: end;
}
table.table-sortable:is(table.table-sortable.table-card) th button:hover {
transform: translateY(-1px);
}
table.table-sortable:is(table.table-sortable.table-card) th button:focus, table.table-sortable:is(table.table-sortable.table-card) th button:focus-visible, table.table-sortable:is(table.table-sortable.table-card) th button:active {
outline-color: var(--mini-card-header-text);
}
table.table-sortable:not(table.table-sortable.table-card):hover {
color: currentColor;
background-color: transparent !important;
}
table.table-sortable:not(table.table-sortable.table-card):hover::after {
color: currentColor;
}
table.table-sortable:not(table.table-sortable.table-card) th button:hover {
transform: translateY(-1px);
color: var(--table-hover-txt);
background-color: var(--table-hover-bg) !important;
}
table.table-sortable:not(table.table-sortable.table-card) th button:hover::after {
color: var(--table-hover-txt);
}
table.table-sortable:not(table.table-sortable.table-card) th button:focus, table.table-sortable:not(table.table-sortable.table-card) th button:focus-visible, table.table-sortable:not(table.table-sortable.table-card) th button:active {
outline-color: var(--table-striped-bg);
border-color: transparent;
color: var(--table-hover-txt);
background-color: var(--table-hover-bg) !important;
}
table.table-sortable:not(table.table-sortable.table-card) th button:focus::after, table.table-sortable:not(table.table-sortable.table-card) th button:focus-visible::after, table.table-sortable:not(table.table-sortable.table-card) th button:active::after {
color: var(--table-hover-txt);
}
table.table-sortable:not(table.table-sortable.table-card).table-hover tr:hover button::after {
color: var(--table-hover-txt);
}
table.table-filter button[type=submit]:disabled {
background-color: var(--button-status-color);
color: var(--button-status-contrast-color);
}
@media screen and (max-width: 991.99px) {
table.table-reorganise {
border-collapse: separate;
border-spacing: var(--space-0, 0rem) var(--space-s, 0.75rem);
padding: var(--space-0, 0rem) var(--space-xxs, 0.25rem);
}
table.table-reorganise thead {
display: none;
}
table.table-reorganise tr {
box-sizing: border-box;
font-size: 0.875rem;
line-height: 1.3125rem;
border-radius: var(--roundness-xs, 0.5rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
border: var(--border-2, 0.125rem);
border-style: var(--border-style, solid);
border-color: transparent;
}
table.table-reorganise td,
table.table-reorganise th {
display: block;
word-break: break-word;
white-space: pre-line;
background-color: var(--card-bg);
}
table.table-reorganise td::before,
table.table-reorganise th::before {
content: attr(data-parent);
display: block;
font-size: 1.1rem;
font-weight: 600;
line-height: 2rem;
}
table.table-reorganise td:first-child,
table.table-reorganise th:first-child {
border-radius: var(--roundness-xs, 0.5rem) var(--roundness-xs, 0.5rem) var(--roundness-0, 0rem) var(--roundness-0, 0rem);
}
table.table-reorganise td:last-child,
table.table-reorganise th:last-child {
border-radius: var(--roundness-0, 0rem) var(--roundness-0, 0rem) var(--roundness-xs, 0.5rem) var(--roundness-xs, 0.5rem);
}
}
.card.service-teaser {
display: flex;
flex-direction: row;
min-width: 9.6875rem;
border: none;
padding: var(--space-0, 0rem);
position: relative;
align-items: center;
font-size: 1.375rem;
font-weight: 500;
line-height: 1.5rem;
--card-status-color: var(--card-status-color-primary);
}
.card.service-teaser a {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-decoration: none;
color: var(--card-page-teaser-title) !important;
}
.card.service-teaser a::after {
content: "";
display: block;
background: transparent;
inset: 0;
position: absolute;
}
.card.service-teaser a::before {
display: inline-block !important;
margin-right: var(--space-xs, 0.5rem);
margin-bottom: calc(-1 * var(--space-xxs, 0.25rem));
}
.card.service-teaser:has(> .btn.action) {
padding-right: var(--space-xxl, 3rem);
}
.card.service-teaser .btn.action svg {
width: 1.5rem;
height: 1.5rem;
}
.card.service-teaser::before {
display: inline-flex;
content: "";
border-top-left-radius: var(--roundness-xs, 0.5rem);
border-bottom-left-radius: var(--roundness-xs, 0.5rem);
width: 5.4375rem;
height: 5.4375rem;
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
flex-shrink: 0;
opacity: 1;
background-image: var(--card-teaser-img);
background-size: cover;
background-position-x: center;
background-position-y: top;
background-repeat: no-repeat;
}
.card.service-teaser > .badge {
left: calc(-1 * var(--space-l, 1.5rem));
top: calc(-1 * var(--space-s, 0.75rem));
}
.card.service-teaser > svg {
height: 3rem;
width: 3rem;
position: absolute;
top: 50%;
left: 2.71875rem;
transform: translate(-50%, -50%);
fill: var(--white);
}
.card.service-teaser > button.info {
grid-column: 3;
}
.card .card-body {
padding: var(--space-m, 1rem);
gap: var(--space-l, 1.5rem);
}
.card .card-body > * {
padding-block: var(--space-0, 0rem);
margin-block: var(--space-0, 0rem);
}
.card .card-body .card-title {
color: var(--card-teaser-title);
font-size: 1.375rem;
font-weight: 500;
line-height: 1.5rem;
}
.card.teaser {
display: flex;
align-items: flex-start;
flex-shrink: 0;
flex-direction: column;
max-width: 100%;
padding: var(--space-0, 0rem);
border: none;
background-color: var(--card-teaser-bg);
color: var(--card-teaser-txt);
}
.card.teaser.msb {
max-width: 35.3125rem !important;
}
.card.teaser.msb.flat {
max-width: unset !important;
min-width: 35.375rem !important;
}
.card.teaser.msb.flat .card-img {
width: 17.6875rem !important;
}
.card.teaser.msb > .card-img {
height: 10.5rem !important;
flex-shrink: 0;
max-width: 100%;
align-self: stretch;
}
.card.teaser.flat {
flex-direction: row;
}
.card.teaser.flat .card-img {
max-width: 50%;
align-self: stretch;
}
.card.teaser > .card-img {
object-fit: cover;
max-width: 100%;
border-top-left-radius: var(--roundness-xs, 0.5rem);
border-top-right-radius: var(--roundness-xs, 0.5rem);
}
.card.teaser .footer,
.card.teaser footer {
margin-top: auto;
}
.card.teaser a:not(.btn) {
text-decoration: underline;
color: var(--card-teaser-link);
}
svg .card.teaser a:not(.btn)::before {
margin-top: var(--space-xxs, 0.25rem);
}
.card.teaser a:not(.btn):focus {
outline-color: var(--card-teaser-link);
}
.card.teaser:not(.card-thumbnail) > img:not(.card-img),
.card.teaser:not(.card-thumbnail) > svg {
fill: currentColor;
margin: var(--space-m, 1rem);
height: 5rem !important;
width: 5rem !important;
}
.card.teaser > .card-body {
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
flex: 1 0 0;
align-self: stretch;
font-size: 1rem;
line-height: 1.5rem;
}
.card .badge {
position: absolute;
display: flex;
font-size: 1rem;
padding: var(--space-xxs, 0.25rem) var(--roundness-s, 0.75rem);
justify-content: center;
align-items: center;
gap: var(--space-xs, 0.5rem);
background: var(--card-badge-bg);
color: var(--card-badge-txt);
left: var(--space-s, 0.75rem);
top: var(--space-m, 1rem);
font-weight: 500;
border-radius: var(--roundness-xxs, 0.25rem);
text-transform: uppercase;
}
.card > .card-img {
padding: var(--space-0, 0rem);
object-fit: cover;
height: 10.5rem;
flex-shrink: 0;
align-self: stretch;
filter: drop-shadow();
}
.card msb-address {
display: contents;
}
.card .address,
.card address {
display: grid;
grid-template-columns: repeat(2, auto);
column-gap: var(--space-m, 1rem);
}
.card .address msb-address,
.card address msb-address {
display: contents;
}
.card .address msb-address > *:nth-child(even),
.card .address > *:not(msb-address):nth-child(even),
.card address msb-address > *:nth-child(even),
.card address > *:not(msb-address):nth-child(even) {
grid-column: 2;
}
msb-textarea {
display: contents;
}
textarea {
min-width: 100%;
max-width: 100% !important;
padding-block-start: var(--space-l, 1.5rem);
line-height: 1.347em;
overflow: hidden;
text-overflow: ellipsis;
height: var(--input-size, 1rem);
min-height: var(--input-height, 2.8125rem);
font-size: var(--input-size, 1rem);
grid-row: 1;
grid-column: span 2;
display: inline-block;
box-sizing: border-box;
width: var(--input-width, 100%);
padding-right: var(--input-padding-right, 0rem);
margin-bottom: var(--input-margin-bottom, var(--space-m, 1rem));
padding-left: var(--input-padding-side, 0.5rem);
padding-top: var(--space-m, 1rem);
background-color: var(--input-bg);
border-radius: var(--roundness-xxs, 0.25rem) var(--roundness-xxs, 0.25rem) var(--roundness-0, 0rem) var(--roundness-0, 0rem);
border: none;
padding-bottom: var(--border-1, 0.0625rem);
border-bottom: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-line);
color: var(--input-line);
font-family: var(--base-font-family, Roboto, sans-serif);
}
@supports (-webkit-touch-callout: none) or (-webkit-appearance: none) {
textarea {
height: var(--input-height, 2.8125rem);
}
}
textarea.neutral {
background-color: var(--input-neutral-bg);
}
textarea.neutral ~ label {
color: var(--input-neutral-label);
background-color: var(--input-neutral-bg);
}
textarea.neutral:autofill {
box-shadow: 0 0 0px 1000px var(--input-bg) inset;
}
textarea.neutral ~ [data-toggle=collapse],
textarea.neutral ~ [data-toggle=tooltip],
textarea.neutral ~ [data-toggle=sidebar] {
background-color: var(--input-neutral-bg) !important;
}
textarea:autofill {
box-shadow: 0 0 0px 1000px var(--input-bg) inset;
}
textarea:hover:not(:disabled, :read-only) {
padding-bottom: var(--border-0, 0);
border-width: var(--border-1, 0.0625rem);
border-color: var(--input-line);
}
textarea:focus-within, textarea:focus {
outline: var(--border-1, 0.0625rem) var(--border-style, solid) var(--input-label);
outline-offset: var(--border-4, 0.25rem);
border-bottom-width: var(--border-2, 0.125rem);
}
textarea:focus:not(:disabled, :read-only) {
border-color: var(--input-line);
}
textarea::placeholder {
color: var(--input-placeholder);
}
textarea:-moz-placeholder:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
textarea:focus:not(:read-only):not(.mini) ~ label, textarea:placeholder-shown:not(.mini) ~ label, textarea.value-shown:not(.mini) ~ label {
position: absolute;
font-size: 0.75rem;
line-height: 0.95019rem;
left: 0.5rem;
top: 0.0625rem;
}
textarea:-moz-placeholder:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
textarea:focus:not(:read-only):is(.mini) ~ label, textarea:placeholder-shown:is(.mini) ~ label, textarea.value-shown:is(.mini) ~ label {
position: absolute;
font-size: 0.5625rem;
line-height: 0.7126425rem;
left: 0.375rem;
top: 0.0625rem;
}
textarea:read-only:not(:disabled) {
cursor: not-allowed;
}
textarea:required ~ label::after {
content: "*";
color: var(--input-required);
margin-left: var(--space-xxs, 0.25rem);
}
textarea:disabled {
color: var(--input-disabled);
border-color: var(--input-disabled);
}
textarea:disabled ~ label {
color: var(--input-disabled);
}
textarea:disabled ~ .invalid-feedback,
textarea:disabled ~ .valid-feedback,
textarea:disabled ~ .hint,
textarea:disabled ~ .counter {
display: none;
}
textarea ~ [data-toggle=collapse],
textarea ~ [data-toggle=tooltip],
textarea ~ [data-toggle=sidebar] {
background-color: var(--input-bg) !important;
top: var(--space-xxs, 0.25rem) !important;
right: var(--space-xs, 0.5rem) !important;
}
textarea ~ msb-icon svg,
textarea ~ svg {
position: absolute;
top: var(--space-xs, 0.5rem);
right: var(--input-padding-info, var(--space-m, 1rem));
width: 1.5em;
height: 1.5em;
fill: var(--input-placeholder);
}
textarea ~ .hint {
grid-row: 2;
grid-column: 1;
margin-left: var(--space-xs, 0.5rem);
font-size: calc(var(--input-size, 1rem) / 16 * 13);
}
textarea ~ .counter {
grid-row: 2;
grid-column: 2;
margin-right: var(--space-xs, 0.5rem);
font-size: calc(var(--input-size, 1rem) / 16 * 13);
text-align: end;
}
textarea ~ .invalid-feedback,
textarea ~ .valid-feedback {
grid-row: 3;
grid-column: 1/span 2;
margin-left: var(--space-xs, 0.5rem);
display: none;
font-size: var(--input-size, 1rem);
}
textarea ~ label {
overflow: hidden;
text-overflow: ellipsis;
font-size: 1rem;
line-height: 1.26688rem;
position: absolute;
pointer-events: none;
left: var(--space-s, 0.75rem);
color: var(--input-label);
background-color: var(--input-bg);
top: var(--input-label-top, var(--input-size, 1rem));
}
@media (prefers-reduced-motion: no-preference) {
textarea ~ label {
transition: all 300ms ease-in-out;
}
}
textarea.isValid {
border-color: var(--input-valid);
}
textarea.isValid ~ label {
color: var(--input-valid);
}
textarea.isValid ~ label:after {
color: var(--input-valid);
}
textarea.isValid ~ .valid-feedback {
display: block;
color: var(--input-valid);
}
textarea.isValid:hover:not(:disabled, :read-only) {
border-color: var(--input-valid);
}
textarea.isValid:focus:not(:disabled, :read-only) {
border-color: var(--input-valid);
outline-color: var(--input-valid);
}
textarea.isInvalid {
border-color: var(--input-invalid);
}
textarea.isInvalid ~ label {
color: var(--input-invalid);
}
textarea.isInvalid ~ label:after {
color: var(--input-invalid);
}
textarea.isInvalid ~ .invalid-feedback {
display: block;
color: var(--input-invalid);
}
textarea.isInvalid:hover:not(:disabled, :read-only) {
border-color: var(--input-invalid);
}
textarea.isInvalid:focus:not(:disabled, :read-only) {
border-color: var(--input-invalid);
outline-color: var(--input-invalid);
}
msb-tooltip {
display: contents;
}
.tooltip-info {
position: relative;
cursor: help;
--tooltip-content-margin-top: var(--space-s, 0.75rem);
--tooltip-parent-width: calc(2 * var(--space-xxl, 3rem));
}
.tooltip-info.showOnFocus:focus, .tooltip-info:hover {
isolation: isolate;
z-index: 1;
}
.tooltip-info.showOnFocus:focus .tooltiptext, .tooltip-info:hover .tooltiptext {
visibility: visible;
z-index: 2;
}
.tooltip-info.showOnFocus:focus .tooltiptext::before, .tooltip-info:hover .tooltiptext::before {
visibility: visible;
}
.tooltip-info .tooltiptext {
position: absolute;
display: block;
box-shadow: var(--elevation-2, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
top: calc(var(--tooltip-position) + var(--tooltip-content-margin-top));
left: unset;
right: var(--space-0, 0rem);
padding: var(--space-m, 1rem);
border-style: var(--border-style, solid);
border-width: var(--border-2, 0.125rem);
border-color: var(--tooltip-border);
border-radius: var(--roundness-s, 0.75rem);
visibility: hidden;
min-width: 100%;
max-width: calc(var(--tooltip-parent-width) - var(--space-m, 1rem) - var(--space-m, 1rem));
text-align: start;
line-height: 1.125rem;
background: var(--tooltip-bg);
color: var(--tooltip-txt);
}
.tooltip-info .tooltiptext.top {
top: unset;
bottom: calc(var(--tooltip-position) + var(--tooltip-content-margin-top));
right: var(--space-0, 0rem);
left: unset;
}
.tooltip-info .tooltiptext.top::before {
right: var(--space-m, 1rem);
left: unset;
top: unset;
bottom: -0.75em;
transform: rotate(135deg);
}
.tooltip-info .tooltiptext.left {
right: unset;
left: var(--space-0, 0rem);
}
.tooltip-info .tooltiptext.left::before {
left: var(--space-m, 1rem);
right: unset;
}
.tooltip-info .tooltiptext::before {
content: "";
display: block;
visibility: hidden;
width: 1.2em;
height: 1.2em;
top: -0.75em;
bottom: unset;
right: var(--space-m, 1rem);
left: unset;
position: absolute;
background: var(--tooltip-bg);
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--tooltip-border);
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--tooltip-border);
transform: rotate(-45deg);
}
.container-info {
position: relative;
}
.container-info * {
box-sizing: border-box;
}
.upload-group {
display: grid;
gap: var(--space-m, 1rem);
margin-block-end: var(--space-m, 1rem);
}
@media screen and (max-width: 991.99px) {
.upload-group {
grid-template-columns: 1fr;
}
}
@media (min-width: 992px) {
.upload-group {
grid-template-columns: auto 1fr;
}
}
.upload-group > * {
margin-right: var(--space-0, 0rem) !important;
margin-left: var(--space-0, 0rem) !important;
}
.upload-group .card {
grid-column: 1;
}
@media (min-width: 992px) {
.upload-group .card {
grid-column: span 2;
}
}
.upload-group .footer:not(.card),
.upload-group footer:not(.card) {
margin-block: var(--space-0, 0rem);
font-size: 0.75rem;
}
.upload-group input[type=file] {
block-size: 1px;
border: none;
clip: rect(0 0 0 0);
inline-size: 1px;
overflow: hidden;
position: absolute;
font-size: var(--base-font-size, 1em);
grid-row: 1;
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
}
@media screen and (max-width: 991.99px) {
.upload-group input[type=file] {
grid-row: 2;
}
}
.upload-group input[type=file]:focus ~ label {
outline-offset: var(--border-2, 0.125rem);
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--input-upload-outline);
}
.upload-group input[type=file][capture] ~ label::before {
-webkit-mask-image: var(--input-icon-camera);
mask-image: var(--input-icon-camera);
}
.upload-group input[type=file][capture] ~ label::after {
content: "Beleg fotografieren";
}
.upload-group input[type=file]:disabled ~ .invalid-feedback {
display: none;
}
.upload-group input[type=file] ~ .invalid-feedback,
.upload-group input[type=file] ~ .valid-feedback {
grid-row: 2;
grid-column: 1/span 2;
margin-left: var(--space-xs, 0.5rem);
display: none;
font-size: var(--input-size, 1rem);
}
.upload-group input[type=file]:required ~ label::after {
content: "Datei auswählen *";
}
.upload-group input[type=file] ~ label {
display: flex;
position: relative;
flex-direction: column;
justify-content: center;
align-items: center;
gap: var(--space-xxs, 0.25rem);
top: var(--space-0, 0rem);
width: 7rem;
height: 4.5rem;
background: var(--input-upload-bg);
color: var(--input-upload-txt);
text-align: center;
border-radius: var(--roundness-s, 0.75rem);
padding: var(--space-xs, 0.5rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
}
.upload-group input[type=file] ~ label:hover {
box-shadow: var(--elevation-1-hover, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
top: -1px;
opacity: 0.9;
}
.upload-group input[type=file] ~ label::before {
opacity: 1;
content: "";
display: flex;
width: 100%;
height: 2rem;
-webkit-mask-position: center center;
mask-position: center center;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
grid-row: 1;
-webkit-mask-size: 2rem;
mask-size: 2rem;
-webkit-mask-image: var(--input-icon-upload);
mask-image: var(--input-icon-upload);
background-color: currentColor;
}
.upload-group input[type=file] ~ label::after {
content: "Datei auswählen";
display: flex;
height: 0.8125rem;
flex-direction: column;
justify-content: center;
flex-shrink: 0;
align-self: stretch;
overflow: hidden;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.6875rem;
font-weight: 500;
}
.upload-group input[type=file].isInvalid ~ .invalid-feedback {
display: block;
color: var(--input-invalid);
}
.upload-group input[type=file].isInvalid:hover:not(:disabled, :read-only) {
border-color: var(--input-invalid);
}
.upload-group input[type=file].isInvalid:focus:not(:disabled, :read-only) {
border-color: var(--input-invalid);
outline-color: var(--input-invalid);
}
@media screen and (max-width: 991.99px) {
.upload-group .footer,
.upload-group footer {
grid-row: 1;
}
}
video {
box-sizing: border-box;
width: 100%;
max-width: 100%;
border-radius: var(--roundness-s, 0.75rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
}
video:hover {
box-shadow: var(--elevation-1-hover, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
}
video:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--link-color);
outline-offset: var(--border-2, 0.125rem);
}
.border {
border: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-0 {
border-width: var(--border-0, 0) !important;
}
.border.border-top-0 {
border-top: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border.border-bottom-0 {
border-bottom: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border.border-start-0 {
border-left: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border.border-end-0 {
border-right: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border.border-1 {
border-width: var(--border-1, 0.0625rem) !important;
}
.border.border-top-1 {
border-top: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-bottom-1 {
border-bottom: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-start-1 {
border-left: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-end-1 {
border-right: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-2 {
border-width: var(--border-2, 0.125rem) !important;
}
.border.border-top-2 {
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-bottom-2 {
border-bottom: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-start-2 {
border-left: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-end-2 {
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-3 {
border-width: var(--border-3, 0.1875rem) !important;
}
.border.border-top-3 {
border-top: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-bottom-3 {
border-bottom: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-start-3 {
border-left: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-end-3 {
border-right: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-4 {
border-width: var(--border-4, 0.25rem) !important;
}
.border.border-top-4 {
border-top: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-bottom-4 {
border-bottom: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-start-4 {
border-left: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-end-4 {
border-right: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-5 {
border-width: var(--border-5, 0.375rem) !important;
}
.border.border-top-5 {
border-top: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-bottom-5 {
border-bottom: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-start-5 {
border-left: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-end-5 {
border-right: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-6 {
border-width: var(--border-6, 0.5rem) !important;
}
.border.border-top-6 {
border-top: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-bottom-6 {
border-bottom: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-start-6 {
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
.border.border-end-6 {
border-right: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
.border.neutral {
--border-color: var(--border-color-neutral);
}
.border.primary {
--border-color: var(--border-color-primary);
}
.border.secondary {
--border-color: var(--border-color-secondary);
}
.border.success {
--border-color: var(--border-color-success);
}
.border.help {
--border-color: var(--border-color-help);
}
.border.warning {
--border-color: var(--border-color-warning);
}
.border.danger {
--border-color: var(--border-color-danger);
}
.border.mode {
--border-color: var(--border-color-mode);
}
.border-top {
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-top-0 {
border-top: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border-top-1 {
border-top: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border-top-2 {
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-top-3 {
border-top: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border-top-4 {
border-top: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border-top-5 {
border-top: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border-top-6 {
border-top: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom {
border-bottom: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom-0 {
border-bottom: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom-1 {
border-bottom: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom-2 {
border-bottom: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom-3 {
border-bottom: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom-4 {
border-bottom: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom-5 {
border-bottom: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border-bottom-6 {
border-bottom: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
.border-start {
border-left: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-start-0 {
border-left: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border-start-1 {
border-left: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border-start-2 {
border-left: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-start-3 {
border-left: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border-start-4 {
border-left: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border-start-5 {
border-left: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border-start-6 {
border-left: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
.border-end {
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-end-0 {
border-right: var(--border-0, 0) var(--border-style, solid) var(--border-color) !important;
}
.border-end-1 {
border-right: var(--border-1, 0.0625rem) var(--border-style, solid) var(--border-color) !important;
}
.border-end-2 {
border-right: var(--border-2, 0.125rem) var(--border-style, solid) var(--border-color) !important;
}
.border-end-3 {
border-right: var(--border-3, 0.1875rem) var(--border-style, solid) var(--border-color) !important;
}
.border-end-4 {
border-right: var(--border-4, 0.25rem) var(--border-style, solid) var(--border-color) !important;
}
.border-end-5 {
border-right: var(--border-5, 0.375rem) var(--border-style, solid) var(--border-color) !important;
}
.border-end-6 {
border-right: var(--border-6, 0.5rem) var(--border-style, solid) var(--border-color) !important;
}
msb-disabled-text {
display: contents;
}
.disabled,
:disabled,
[disabled] {
color: var(--disabled, var(--neutral-lighter-75, #61676B));
}
body {
background-color: var(--body-bg, #ffffff);
color: var(--body-color, #000000);
}
.bg-black {
background-color: var(--black, #000000) !important;
color: var(--white, #ffffff) !important;
}
.text-black {
color: var(--black, #000000);
}
.bg-white {
background-color: var(--white, #ffffff) !important;
color: var(--black, #000000) !important;
}
.text-white {
color: var(--white, #ffffff);
}
.bg-neutral {
background-color: var(--neutral, #494E50) !important;
color: var(--white, #ffffff) !important;
}
.text-neutral {
color: var(--neutral, #494E50);
}
.bg-lighter-neutral-75 {
background-color: var(--neutral-lighter-75, #61676B);
color: var(--white, #ffffff);
}
.bg-lighter-neutral-50 {
background-color: var(--neutral-lighter-50, #949A9E);
color: var(--black, #000000);
}
.bg-lighter-neutral-25 {
background-color: var(--neutral-lighter-25, #C9CDCF);
color: var(--black, #000000);
}
.bg-lighter-neutral-5 {
background-color: var(--neutral-lighter-5, #E9EAEB);
color: var(--black, #000000);
}
.bg-darker-neutral-75 {
background-color: var(--neutral-darker-75, #2C2F30);
color: var(--white, #ffffff);
}
.bg-darker-neutral-50 {
background-color: var(--neutral-darker-50, #272A2C);
color: var(--white, #ffffff);
}
.bg-darker-neutral-25 {
background-color: var(--neutral-darker-25, #232526);
color: var(--white, #ffffff);
}
.bg-darker-neutral-5 {
background-color: var(--neutral-darker-5, #1F2122);
color: var(--white, #ffffff);
}
.bg-primary {
background-color: var(--primary, #117dba) !important;
color: var(--white, #ffffff) !important;
}
.text-primary {
color: var(--primary, #117dba);
}
.bg-lighter-primary-75 {
background-color: var(--primary-lighter-75, #4D9DCB);
color: var(--black, #000000);
}
.bg-lighter-primary-50 {
background-color: var(--primary-lighter-50, #88bedd);
color: var(--black, #000000);
}
.bg-lighter-primary-25 {
background-color: var(--primary-lighter-25, #c3deee);
color: var(--black, #000000);
}
.bg-lighter-primary-5 {
background-color: var(--primary-lighter-5, #f3f8fc);
color: var(--black, #000000);
}
.bg-darker-primary-75 {
background-color: var(--primary-darker-75, #146694);
color: var(--white, #ffffff);
}
.bg-darker-primary-50 {
background-color: var(--primary-darker-50, #174F6F);
color: var(--white, #ffffff);
}
.bg-darker-primary-25 {
background-color: var(--primary-darker-25, #193849);
color: var(--white, #ffffff);
}
.bg-darker-primary-5 {
background-color: var(--primary-darker-5, #1B262B);
color: var(--white, #ffffff);
}
.bg-secondary {
background-color: var(--secondary, #35556C) !important;
color: var(--white, #ffffff) !important;
}
.text-secondary {
color: var(--secondary, #35556C);
}
.bg-lighter-secondary-75 {
background-color: var(--secondary-lighter-75, #678091);
color: var(--black, #000000);
}
.bg-lighter-secondary-50 {
background-color: var(--secondary-lighter-50, #9AAAB6);
color: var(--black, #000000);
}
.bg-lighter-secondary-25 {
background-color: var(--secondary-lighter-25, #CCD5DA);
color: var(--black, #000000);
}
.bg-lighter-secondary-5 {
background-color: var(--secondary-lighter-5, #F5F7F8);
color: var(--black, #000000);
}
.bg-darker-secondary-75 {
background-color: var(--secondary-darker-75, #2F485A);
color: var(--white, #ffffff);
}
.bg-darker-secondary-50 {
background-color: var(--secondary-darker-50, #283B47);
color: var(--white, #ffffff);
}
.bg-darker-secondary-25 {
background-color: var(--secondary-darker-25, #222E35);
color: var(--white, #ffffff);
}
.bg-darker-secondary-5 {
background-color: var(--secondary-darker-5, #1D2427);
color: var(--white, #ffffff);
}
.bg-success {
background-color: var(--success, #257310) !important;
color: var(--white, #ffffff) !important;
}
.text-success {
color: var(--success, #257310);
}
.bg-lighter-success-75 {
background-color: var(--success-lighter-75, #5C964C);
color: var(--black, #000000);
}
.bg-lighter-success-50 {
background-color: var(--success-lighter-50, #92B987);
color: var(--black, #000000);
}
.bg-lighter-success-25 {
background-color: var(--success-lighter-25, #C8DCC3);
color: var(--black, #000000);
}
.bg-lighter-success-5 {
background-color: var(--success-lighter-5, #F4F8F3);
color: var(--black, #000000);
}
.bg-darker-success-75 {
background-color: var(--success-darker-75, #235F15);
color: var(--white, #ffffff);
}
.bg-darker-success-50 {
background-color: var(--success-darker-50, #204A19);
color: var(--white, #ffffff);
}
.bg-darker-success-25 {
background-color: var(--success-darker-25, #1E351E);
color: var(--white, #ffffff);
}
.bg-darker-success-5 {
background-color: var(--success-darker-5, #1C2522);
color: var(--white, #ffffff);
}
.bg-help {
background-color: var(--help, #EBD314) !important;
color: var(--black, #000000) !important;
}
.text-help {
color: var(--help, #EBD314);
}
.bg-lighter-help-75 {
background-color: var(--help-lighter-75, #F0DE4F);
color: var(--black, #000000);
}
.bg-lighter-help-50 {
background-color: var(--help-lighter-50, #F5E989);
color: var(--black, #000000);
}
.bg-lighter-help-25 {
background-color: var(--help-lighter-25, #FAF4C4);
color: var(--black, #000000);
}
.bg-lighter-help-5 {
background-color: var(--help-lighter-5, #FEFDF3);
color: var(--black, #000000);
}
.bg-darker-help-75 {
background-color: var(--help-darker-75, #B7A618);
color: var(--black, #000000);
}
.bg-darker-help-50 {
background-color: var(--help-darker-50, #837A1B);
color: var(--black, #000000);
}
.bg-darker-help-25 {
background-color: var(--help-darker-25, #504E1F);
color: var(--white, #ffffff);
}
.bg-darker-help-5 {
background-color: var(--help-darker-5, #262A22);
color: var(--white, #ffffff);
}
.bg-warning {
background-color: var(--warning, #F5723C) !important;
color: var(--black, #000000) !important;
}
.text-warning {
color: var(--warning, #F5723C);
}
.bg-lighter-warning-75 {
background-color: var(--warning-lighter-75, #F8956D);
color: var(--black, #000000);
}
.bg-lighter-warning-50 {
background-color: var(--warning-lighter-50, #FAB99E);
color: var(--black, #000000);
}
.bg-lighter-warning-25 {
background-color: var(--warning-lighter-25, #FDDCCE);
color: var(--black, #000000);
}
.bg-lighter-warning-5 {
background-color: var(--warning-lighter-5, #FFF8F5);
color: var(--black, #000000);
}
.bg-darker-warning-75 {
background-color: var(--warning-darker-75, #BF5E36);
color: var(--black, #000000);
}
.bg-darker-warning-50 {
background-color: var(--warning-darker-50, #884930);
color: var(--white, #ffffff);
}
.bg-darker-warning-25 {
background-color: var(--warning-darker-25, #523529);
color: var(--white, #ffffff);
}
.bg-darker-warning-5 {
background-color: var(--warning-darker-5, #272524);
color: var(--white, #ffffff);
}
.bg-danger {
background-color: var(--danger, #C91432) !important;
color: var(--white, #ffffff) !important;
}
.text-danger {
color: var(--danger, #C91432);
}
.bg-lighter-danger-75 {
background-color: var(--danger-lighter-75, #D74F65);
color: var(--black, #000000);
}
.bg-lighter-danger-50 {
background-color: var(--danger-lighter-50, #E48999);
color: var(--black, #000000);
}
.bg-lighter-danger-25 {
background-color: var(--danger-lighter-25, #F2C4CC);
color: var(--black, #000000);
}
.bg-lighter-danger-5 {
background-color: var(--danger-lighter-5, #FCF3F5);
color: var(--black, #000000);
}
.bg-darker-danger-75 {
background-color: var(--danger-darker-75, #9E172E);
color: var(--white, #ffffff);
}
.bg-darker-danger-50 {
background-color: var(--danger-darker-50, #721A2A);
color: var(--white, #ffffff);
}
.bg-darker-danger-25 {
background-color: var(--danger-darker-25, #471E27);
color: var(--white, #ffffff);
}
.bg-darker-danger-5 {
background-color: var(--danger-darker-5, #252024);
color: var(--white, #ffffff);
}
.bg-mode {
background-color: var(--mode, #9B50D7) !important;
color: var(--white, #ffffff) !important;
}
.text-mode {
color: var(--mode, #9B50D7);
}
.bg-lighter-mode-75 {
background-color: var(--mode-lighter-75, #B47CE1);
color: var(--black, #000000);
}
.bg-lighter-mode-50 {
background-color: var(--mode-lighter-50, #CDA7EB);
color: var(--black, #000000);
}
.bg-lighter-mode-25 {
background-color: var(--mode-lighter-25, #E6D3F5);
color: var(--black, #000000);
}
.bg-lighter-mode-5 {
background-color: var(--mode-lighter-5, #FAF6FD);
color: var(--black, #000000);
}
.bg-darker-mode-75 {
background-color: var(--mode-darker-75, #743CA1);
color: var(--white, #ffffff);
}
.bg-darker-mode-50 {
background-color: var(--mode-darker-50, #4E286C);
color: var(--white, #ffffff);
}
.bg-darker-mode-25 {
background-color: var(--mode-darker-25, #271436);
color: var(--white, #ffffff);
}
.bg-darker-mode-5 {
background-color: var(--mode-darker-5, #08040B);
color: var(--white, #ffffff);
}
.text-invalid {
color: var(--input-invalid);
}
.text-valid {
color: var(--input-valid);
}
msb-icon {
display: contents;
}
.icon.highlight {
position: relative;
line-height: 0;
display: inline-block;
}
.icon.highlight svg {
opacity: 1;
display: inline;
fill: var(--icon-color) !important;
height: 1.5rem;
width: 1.5rem;
}
.icon.highlight svg.neutral {
--icon-color: var(--icon-color-neutral);
}
.icon.highlight svg.primary {
--icon-color: var(--icon-color-primary);
}
.icon.highlight svg.secondary {
--icon-color: var(--icon-color-secondary);
}
.icon.highlight svg.success {
--icon-color: var(--icon-color-success);
}
.icon.highlight svg.help {
--icon-color: var(--icon-color-help);
}
.icon.highlight svg.warning {
--icon-color: var(--icon-color-warning);
}
.icon.highlight svg.danger {
--icon-color: var(--icon-color-danger);
}
.icon.highlight svg.mode {
--icon-color: var(--icon-color-mode);
}
.icon.highlight svg title {
background-color: var(--body-bg);
color: var(--body-color);
}
.icon.highlight::after {
position: absolute;
content: "";
background-color: var(--highlight-color);
border-radius: var(--roundness-xxl, 3rem);
height: 0.75rem;
width: 0.75rem;
right: 0;
top: 0;
}
.icon.highlight.fit::after {
height: 0.5em;
width: 0.5em;
}
.icon.highlight.fit svg {
height: 1em;
width: 1em;
}
.icon.highlight.xs::after {
height: 0.6rem;
width: 0.6rem;
}
.icon.highlight.xs svg {
height: 1.2rem;
width: 1.2rem;
}
.icon.highlight.s::after {
height: 0.75rem;
width: 0.75rem;
}
.icon.highlight.s svg {
height: 1.5rem;
width: 1.5rem;
}
.icon.highlight.m::after {
height: 1rem;
width: 1rem;
}
.icon.highlight.m svg {
height: 2rem;
width: 2rem;
}
.icon.highlight.l::after {
height: 1.5rem;
width: 1.5rem;
}
.icon.highlight.l svg {
height: 3rem;
width: 3rem;
}
.icon.highlight.xl::after {
height: 3rem;
width: 3rem;
}
.icon.highlight.xl svg {
height: 6rem;
width: 6rem;
}
.icon.highlight.start::after {
left: 0;
right: unset;
}
.icon.highlight.bottom::after {
top: unset;
bottom: 0;
}
svg.icon {
opacity: 1;
display: inline;
fill: var(--icon-color) !important;
height: 1.5rem;
width: 1.5rem;
}
svg.icon.fit {
height: 1em;
width: 1em;
}
svg.icon.xs {
height: 1.2rem;
width: 1.2rem;
}
svg.icon.s {
height: 1.5rem;
width: 1.5rem;
}
svg.icon.m {
height: 2rem;
width: 2rem;
}
svg.icon.l {
height: 3rem;
width: 3rem;
}
svg.icon.xl {
height: 6rem;
width: 6rem;
}
svg.icon.neutral {
--icon-color: var(--icon-color-neutral);
}
svg.icon.primary {
--icon-color: var(--icon-color-primary);
}
svg.icon.secondary {
--icon-color: var(--icon-color-secondary);
}
svg.icon.success {
--icon-color: var(--icon-color-success);
}
svg.icon.help {
--icon-color: var(--icon-color-help);
}
svg.icon.warning {
--icon-color: var(--icon-color-warning);
}
svg.icon.danger {
--icon-color: var(--icon-color-danger);
}
svg.icon.mode {
--icon-color: var(--icon-color-mode);
}
span.icon.download_animated {
content: "";
-webkit-mask-image: url('download_animated.5d8370f5fd02b030.svg');
mask-image: url('download_animated.5d8370f5fd02b030.svg');
-webkit-mask-size: cover;
mask-size: cover;
display: inline-flex;
background-color: var(--icon-color);
height: 1.5rem;
width: 1.5rem;
}
span.icon.fit {
height: 1em;
width: 1em;
}
span.icon.xs {
height: 1.2rem;
width: 1.2rem;
}
span.icon.s {
height: 1.5rem;
width: 1.5rem;
}
span.icon.m {
height: 2rem;
width: 2rem;
}
span.icon.l {
height: 3rem;
width: 3rem;
}
span.icon.xl {
height: 6rem;
width: 6rem;
}
span.icon.neutral {
--icon-color: var(--icon-color-neutral);
}
span.icon.primary {
--icon-color: var(--icon-color-primary);
}
span.icon.secondary {
--icon-color: var(--icon-color-secondary);
}
span.icon.success {
--icon-color: var(--icon-color-success);
}
span.icon.help {
--icon-color: var(--icon-color-help);
}
span.icon.warning {
--icon-color: var(--icon-color-warning);
}
span.icon.danger {
--icon-color: var(--icon-color-danger);
}
span.icon.mode {
--icon-color: var(--icon-color-mode);
}
msb-img {
display: contents;
}
img {
max-width: 100%;
height: auto;
}
a:has(> img) {
display: flex;
height: 100%;
text-decoration: none;
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
}
a:has(> img):hover {
box-shadow: var(--elevation-1-hover, 0 2px 9px 0.5px rgba(0, 0, 0, 0.2));
}
a:has(> img) img {
border-radius: var(--roundness-s, 0.75rem);
width: 100%;
}
figure:focus-within,
.figure:focus-within {
outline: var(--border-2, 0.125rem) var(--border-style, solid) var(--link-color);
outline-offset: var(--border-2, 0.125rem);
}
figure:has(img),
.figure:has(img) {
display: flex;
flex-direction: column;
margin: var(--space-0, 0rem);
gap: var(--space-s, 0.75rem);
}
figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]) *:is(h1, h2, h3, h4, h5, h6),
figure:has(img):not(:has(.figcaption-card)) .figcaption *:is(h1, h2, h3, h4, h5, h6),
.figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]) *:is(h1, h2, h3, h4, h5, h6),
.figure:has(img):not(:has(.figcaption-card)) .figcaption *:is(h1, h2, h3, h4, h5, h6) {
display: inherit;
font-size: inherit !important;
font-weight: inherit !important;
margin-block-start: inherit !important;
color: inherit !important;
}
figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]):last-child,
figure:has(img):not(:has(.figcaption-card)) .figcaption:last-child,
.figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]):last-child,
.figure:has(img):not(:has(.figcaption-card)) .figcaption:last-child {
display: flex;
}
figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]):last-child::before,
figure:has(img):not(:has(.figcaption-card)) .figcaption:last-child::before,
.figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]):last-child::before,
.figure:has(img):not(:has(.figcaption-card)) .figcaption:last-child::before {
content: "∟";
display: inline-block;
font-size: 1.25rem;
line-height: 0.75rem;
}
figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]):first-child,
figure:has(img):not(:has(.figcaption-card)) .figcaption:first-child,
.figure:has(img):not(:has(.figcaption-card)) figcaption:not([class]):first-child,
.figure:has(img):not(:has(.figcaption-card)) .figcaption:first-child {
display: none;
}
figure:has(img):has(.figcaption-card:last-child),
.figure:has(img):has(.figcaption-card:last-child) {
display: flex;
padding: var(--space-xxs, 0.25rem);
gap: var(--space-s, 0.75rem);
}
@media (min-width: 992px) {
figure:has(img):has(.figcaption-card:last-child),
.figure:has(img):has(.figcaption-card:last-child) {
flex-direction: row;
}
figure:has(img):has(.figcaption-card:last-child) img,
.figure:has(img):has(.figcaption-card:last-child) img {
width: calc(50% - var(--space-s, 0.75rem) / 2);
}
}
@media screen and (max-width: 991.99px) {
figure:has(img):has(.figcaption-card:last-child),
.figure:has(img):has(.figcaption-card:last-child) {
flex-direction: column;
}
}
figure:has(img):has(.figcaption-card:last-child) .figcaption-card:last-child,
.figure:has(img):has(.figcaption-card:last-child) .figcaption-card:last-child {
padding: var(--space-l, 1.5rem);
background-color: var(--card-bg);
border-radius: var(--roundness-s, 0.75rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
font-size: initial;
display: flex;
flex-direction: column;
}
@media (min-width: 992px) {
figure:has(img):has(.figcaption-card:last-child) .figcaption-card:last-child,
.figure:has(img):has(.figcaption-card:last-child) .figcaption-card:last-child {
width: calc(50% - var(--space-s, 0.75rem) / 2);
}
}
@media (min-width: 992px) {
figure:has(img):has(.figcaption-card:last-child.left),
.figure:has(img):has(.figcaption-card:last-child.left) {
flex-direction: row-reverse;
}
}
figure:has(img) img,
.figure:has(img) img {
width: 100%;
height: fit-content;
background-color: var(--card-bg);
border-radius: var(--roundness-s, 0.75rem);
box-shadow: var(--elevation-1, 0 1px 4px 0.5px rgba(0, 0, 0, 0.25));
}
msb-img-dialog,
msb-img-link,
msb-img-thumbnail {
display: contents;
}
.card-thumbnail {
max-width: 13rem;
padding: 1rem !important;
justify-content: center;
align-items: center;
}
.card-thumbnail img {
height: auto;
max-width: 100%;
max-height: 10rem;
border-radius: var(--roundness-s, 0.75rem);
box-shadow: none;
background-color: var(--card-bg);
outline-color: transparent;
}
dialog.image {
display: grid;
visibility: hidden;
position: fixed;
padding: var(--space-m, 1rem);
background-color: var(--dialog-bg);
border: var(--space-0, 0rem);
color: var(--dialog-content-color);
border-radius: var(--roundness-s, 0.75rem);
box-shadow: var(--elevation-4, 0 7px 16px 0 rgba(0, 0, 0, 0.25));
}
dialog.image::backdrop {
opacity: 0;
background-color: var(--color-backdrop);
}
dialog.image[open] {
visibility: visible;
transform: scale(1);
}
@media (prefers-reduced-motion: no-preference) {
dialog.image[open] {
animation: show-dialog 300ms ease-in;
}
}
dialog.image[open]::backdrop {
opacity: 0.7;
}
@media (prefers-reduced-motion: no-preference) {
dialog.image[open]::backdrop {
animation: show-backdrop 300ms ease-in;
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.image.hide {
animation: hide-dialog 300ms ease-out;
}
}
@media (prefers-reduced-motion: no-preference) {
dialog.image.hide::backdrop {
animation: hide-backdrop 300ms ease-out;
}
}
dialog.image img {
max-width: 100%;
max-height: 90vh;
}
msb-abbreviation {
display: contents;
}
html {
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
}
html body {
font-size: var(--base-font-size, 1em);
margin: var(--space-0, 0rem);
padding: var(--space-0, 0rem);
}
.text-wrap {
white-space: normal;
}
.text-nowrap {
white-space: nowrap;
}
.text-nowrap-over-xs {
white-space: nowrap;
}
@media (min-width: 576px) {
.text-nowrap-over-sm {
white-space: nowrap;
}
}
@media (min-width: 768px) {
.text-nowrap-over-md {
white-space: nowrap;
}
}
@media (min-width: 992px) {
.text-nowrap-over-lg {
white-space: nowrap;
}
}
@media (min-width: 1200px) {
.text-nowrap-over-xl {
white-space: nowrap;
}
}
@media (min-width: 1400px) {
.text-nowrap-over-xxl {
white-space: nowrap;
}
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
h1,
.h1 {
display: block;
font-size: var(--heading-1-size, 2rem) !important;
font-weight: 600 !important;
line-height: 150%;
margin-bottom: var(--space-0, 0rem);
color: var(--heading-1-color);
margin-block-start: var(--heading-1-margin, var(--space-m, 1rem)) !important;
margin-block-end: var(--space-0, 0rem);
}
h1 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info),
.h1 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info) {
margin-block-start: var(--space-xxl, 3rem);
}
h1 *:is(small.tooltip-help, small.collapse-help),
.h1 *:is(small.tooltip-help, small.collapse-help) {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
h1.heading-intro,
.h1.heading-intro {
font-size: var(--heading-intro-size, 3rem) !important;
color: var(--heading-intro-color);
margin-block-start: var(--heading-intro-margin, var(--space-m, 1rem));
margin-block-end: var(--space-0, 0rem);
}
h1 [data-toggle=collapse],
h1 [data-toggle=tooltip],
h1 [data-toggle=sidebar],
.h1 [data-toggle=collapse],
.h1 [data-toggle=tooltip],
.h1 [data-toggle=sidebar] {
position: unset !important;
display: inline-flex !important;
margin-left: var(--space-xxs, 0.25rem);
}
h2,
.h2 {
display: block;
font-size: var(--heading-2-size, 1.625rem) !important;
font-weight: 600 !important;
line-height: 150%;
margin-bottom: var(--space-0, 0rem);
color: var(--heading-2-color);
margin-block-start: var(--heading-2-margin, var(--space-m, 1rem)) !important;
margin-block-end: var(--space-0, 0rem);
}
h2 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info),
.h2 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info) {
margin-block-start: var(--space-xxl, 3rem);
}
h2 *:is(small.tooltip-help, small.collapse-help),
.h2 *:is(small.tooltip-help, small.collapse-help) {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
h2 [data-toggle=collapse],
h2 [data-toggle=tooltip],
h2 [data-toggle=sidebar],
.h2 [data-toggle=collapse],
.h2 [data-toggle=tooltip],
.h2 [data-toggle=sidebar] {
position: unset !important;
display: inline-flex !important;
margin-left: var(--space-xxs, 0.25rem);
}
h3,
.h3 {
display: block;
font-size: var(--heading-3-size, 1.375rem) !important;
font-weight: 600 !important;
line-height: 150%;
margin-bottom: var(--space-0, 0rem);
color: var(--heading-3-color);
margin-block-start: var(--heading-3-margin, var(--space-m, 1rem)) !important;
margin-block-end: var(--space-0, 0rem);
}
h3 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info),
.h3 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info) {
margin-block-start: var(--space-xxl, 3rem);
}
h3 *:is(small.tooltip-help, small.collapse-help),
.h3 *:is(small.tooltip-help, small.collapse-help) {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
h3 [data-toggle=collapse],
h3 [data-toggle=tooltip],
h3 [data-toggle=sidebar],
.h3 [data-toggle=collapse],
.h3 [data-toggle=tooltip],
.h3 [data-toggle=sidebar] {
position: unset !important;
display: inline-flex !important;
margin-left: var(--space-xxs, 0.25rem);
}
h4,
.h4 {
display: block;
font-size: var(--heading-4-size, 1.25rem) !important;
font-weight: 600 !important;
line-height: 150%;
margin-bottom: var(--space-0, 0rem);
color: var(--heading-4-color);
margin-block-start: var(--heading-4-margin, var(--space-xs, 0.5rem)) !important;
margin-block-end: var(--space-0, 0rem);
}
h4 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info),
.h4 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info) {
margin-block-start: var(--space-xxl, 3rem);
}
h4 *:is(small.tooltip-help, small.collapse-help),
.h4 *:is(small.tooltip-help, small.collapse-help) {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
h4 [data-toggle=collapse],
h4 [data-toggle=tooltip],
h4 [data-toggle=sidebar],
.h4 [data-toggle=collapse],
.h4 [data-toggle=tooltip],
.h4 [data-toggle=sidebar] {
position: unset !important;
display: inline-flex !important;
margin-left: var(--space-xxs, 0.25rem);
}
h5,
.h5 {
display: block;
font-size: var(--heading-5-size, 1.125rem) !important;
font-weight: 600 !important;
line-height: 150%;
margin-bottom: var(--space-0, 0rem);
color: var(--heading-5-color);
margin-block-start: var(--heading-5-margin, var(--space-xs, 0.5rem)) !important;
margin-block-end: var(--space-0, 0rem);
}
h5 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info),
.h5 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info) {
margin-block-start: var(--space-xxl, 3rem);
}
h5 *:is(small.tooltip-help, small.collapse-help),
.h5 *:is(small.tooltip-help, small.collapse-help) {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
h5 [data-toggle=collapse],
h5 [data-toggle=tooltip],
h5 [data-toggle=sidebar],
.h5 [data-toggle=collapse],
.h5 [data-toggle=tooltip],
.h5 [data-toggle=sidebar] {
position: unset !important;
display: inline-flex !important;
margin-left: var(--space-xxs, 0.25rem);
}
h6,
.h6 {
display: block;
font-size: var(--heading-6-size, 1rem) !important;
font-weight: 600 !important;
line-height: 150%;
margin-bottom: var(--space-0, 0rem);
color: var(--heading-6-color);
margin-block-start: var(--heading-6-margin, var(--space-s, 0.75rem)) !important;
margin-block-end: var(--space-0, 0rem);
}
h6 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info),
.h6 + *:not(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6, section, article, .collapse-help, .container-info) {
margin-block-start: var(--space-xxl, 3rem);
}
h6 *:is(small.tooltip-help, small.collapse-help),
.h6 *:is(small.tooltip-help, small.collapse-help) {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
h6 [data-toggle=collapse],
h6 [data-toggle=tooltip],
h6 [data-toggle=sidebar],
.h6 [data-toggle=collapse],
.h6 [data-toggle=tooltip],
.h6 [data-toggle=sidebar] {
position: unset !important;
display: inline-flex !important;
margin-left: var(--space-xxs, 0.25rem);
}
strong {
font-weight: 700;
}
abbr[title],
abbr[data-original-title] {
cursor: help;
}
small {
font-size: 0.75rem;
line-height: 160%;
font-weight: initial;
}
hr {
border-top: var(--border-2, 0.125rem) var(--border-style, solid) var(--horizontal-line-color);
}
del {
color: var(--delete-color);
-webkit-text-decoration: line-through var(--delete-color);
text-decoration: line-through var(--delete-color);
}
ins {
text-decoration: none;
color: var(--insert-color);
}
mark {
color: var(--mark-color-text-color);
background-color: var(--mark-color);
}
sup,
sub {
vertical-align: baseline;
position: relative;
font-size: 0.75em;
}
sup {
top: -0.35em;
}
sub {
top: 0.35em;
}
ol li::first-letter,
ul li::first-letter {
text-transform: capitalize;
}
ol.no-marker,
ul.no-marker {
list-style: none;
}
ol.no-marker li::marker,
ul.no-marker li::marker {
display: none;
}
ol.no-marker.right-aligned,
ul.no-marker.right-aligned {
padding-inline-start: var(--space-0, 0rem);
}
ul {
list-style-type: disc;
}
ul li::marker {
color: var(--list-marker-color);
font-weight: 700;
}
ol {
list-style-type: decimal;
counter-reset: item;
}
ol > li {
counter-increment: item;
}
ol > li > ol {
counter-reset: item;
}
ol > li::marker {
content: counters(item, ".") " ";
color: var(--list-marker-color);
font-weight: 700;
}
ul.check {
list-style: "✓ ";
}
ul.check li {
padding-left: var(--space-xs, 0.5rem);
}
ul.link {
list-style: "»";
}
ul.link li {
padding-left: var(--space-xs, 0.5rem);
}
ul.link li a[download]::before {
display: none !important;
}
@font-face {
font-display: swap;
font-family: Roboto;
font-style: normal;
font-weight: 400;
src: url('roboto-v30-latin-regular.f2894edcf7d09d36.woff2') format("woff2"), url('roboto-v30-latin-regular.224e95b0e84110d8.woff') format("woff");
}
@font-face {
font-display: swap;
font-family: Roboto;
font-style: normal;
font-weight: 500;
src: url('roboto-v30-latin-500.3170fd9aa9258fe0.woff2') format("woff2"), url('roboto-v30-latin-500.e5748c3b7acf0d45.woff') format("woff");
}
@font-face {
font-display: swap;
font-family: Roboto;
font-style: normal;
font-weight: 700;
src: url('roboto-v30-latin-700.71b2beb82c4d1389.woff2') format("woff2"), url('roboto-v30-latin-700.bd41d1cdc29811cf.woff') format("woff");
}
@media (prefers-color-scheme: dark) {
::backdrop {
--color-backdrop: #fff;
}
}
@media (prefers-color-scheme: light) {
::backdrop {
--color-backdrop: #000;
}
}