/* 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;
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: 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%;
}
.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: 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%;
}
.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;
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: 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%;
}
.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;
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: 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%;
}
.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;
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;
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;
mask-size: cover;
background-color: currentColor;
}
a.icon-right[target=_blank]:not(.more-info, .with-icon)::after {
mask-image: var(--link-icon-external);
}
a.icon-right.more-info:not(.with-icon)::after {
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;
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;
mask-size: cover;
background-color: currentColor;
}
a:not(.icon-right)[target=_blank]:not(.more-info, .with-icon)::before {
mask-image: var(--link-icon-external);
}
a:not(.icon-right).more-info:not(.with-icon)::before {
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;
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) ;
}
.mat-h1,
.mat-headline,
.mat-typography .mat-h1,
.mat-typography .mat-headline,
.mat-typography h1 {
font-size: 24px;
font-weight: 400;
line-height: 32px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
margin: 0 0 16px;
}
.mat-h2,
.mat-title,
.mat-typography .mat-h2,
.mat-typography .mat-title,
.mat-typography h2 {
font-size: 20px;
font-weight: 500;
line-height: 32px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
margin: 0 0 16px;
}
.mat-h3,
.mat-subheading-2,
.mat-typography .mat-h3,
.mat-typography .mat-subheading-2,
.mat-typography h3 {
font-size: 16px;
font-weight: 400;
line-height: 28px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
margin: 0 0 16px;
}
.mat-h4,
.mat-subheading-1,
.mat-typography .mat-h4,
.mat-typography .mat-subheading-1,
.mat-typography h4 {
font-size: 15px;
font-weight: 400;
line-height: 24px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
margin: 0 0 16px;
}
.mat-h5,
.mat-typography .mat-h5,
.mat-typography h5 {
font: 400 calc(14px * 0.83) / 20px Roboto, "Helvetica Neue", sans-serif;
margin: 0 0 12px;
}
.mat-h6,
.mat-typography .mat-h6,
.mat-typography h6 {
font: 400 calc(14px * 0.67) / 20px Roboto, "Helvetica Neue", sans-serif;
margin: 0 0 12px;
}
.mat-body-strong,
.mat-body-2,
.mat-typography .mat-body-strong,
.mat-typography .mat-body-2 {
font-size: 14px;
font-weight: 500;
line-height: 24px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
}
.mat-body,
.mat-body-1,
.mat-typography .mat-body,
.mat-typography .mat-body-1,
.mat-typography {
font-size: 14px;
font-weight: 400;
line-height: 20px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
}
.mat-body p,
.mat-body-1 p,
.mat-typography .mat-body p,
.mat-typography .mat-body-1 p,
.mat-typography p {
margin: 0 0 12px;
}
.mat-small,
.mat-caption,
.mat-typography .mat-small,
.mat-typography .mat-caption {
font-size: 12px;
font-weight: 400;
line-height: 20px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
}
.mat-display-4,
.mat-typography .mat-display-4 {
font-size: 112px;
font-weight: 300;
line-height: 112px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: -0.05em;
margin: 0 0 56px;
}
.mat-display-3,
.mat-typography .mat-display-3 {
font-size: 56px;
font-weight: 400;
line-height: 56px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: -0.02em;
margin: 0 0 64px;
}
.mat-display-2,
.mat-typography .mat-display-2 {
font-size: 45px;
font-weight: 400;
line-height: 48px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: -0.005em;
margin: 0 0 64px;
}
.mat-display-1,
.mat-typography .mat-display-1 {
font-size: 34px;
font-weight: 400;
line-height: 40px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
margin: 0 0 64px;
}
html {
--mat-badge-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-badge-text-size: 12px;
--mat-badge-text-weight: 600;
--mat-badge-small-size-text-size: 9px;
--mat-badge-large-size-text-size: 24px;
}
html {
--mat-bottom-sheet-container-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-bottom-sheet-container-text-line-height: 20px;
--mat-bottom-sheet-container-text-size: 14px;
--mat-bottom-sheet-container-text-tracking: normal;
--mat-bottom-sheet-container-text-weight: 400;
}
html {
--mat-legacy-button-toggle-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-standard-button-toggle-text-font: Roboto, "Helvetica Neue", sans-serif;
}
html {
--mat-datepicker-calendar-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-datepicker-calendar-text-size: 13px;
--mat-datepicker-calendar-body-label-text-size: 14px;
--mat-datepicker-calendar-body-label-text-weight: 500;
--mat-datepicker-calendar-period-button-text-size: 14px;
--mat-datepicker-calendar-period-button-text-weight: 500;
--mat-datepicker-calendar-header-text-size: 11px;
--mat-datepicker-calendar-header-text-weight: 400;
}
html {
--mat-expansion-header-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-expansion-header-text-size: 15px;
--mat-expansion-header-text-weight: 400;
--mat-expansion-header-text-line-height: inherit;
--mat-expansion-header-text-tracking: inherit;
--mat-expansion-container-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-expansion-container-text-line-height: 20px;
--mat-expansion-container-text-size: 14px;
--mat-expansion-container-text-tracking: normal;
--mat-expansion-container-text-weight: 400;
}
html {
--mat-grid-list-tile-header-primary-text-size: 14px;
--mat-grid-list-tile-header-secondary-text-size: 12px;
--mat-grid-list-tile-footer-primary-text-size: 14px;
--mat-grid-list-tile-footer-secondary-text-size: 12px;
}
html {
--mat-stepper-container-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-stepper-header-label-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-stepper-header-label-text-size: 14px;
--mat-stepper-header-label-text-weight: 400;
--mat-stepper-header-error-state-label-text-size: 14px;
--mat-stepper-header-selected-state-label-text-size: 14px;
--mat-stepper-header-selected-state-label-text-weight: 500;
}
html {
--mat-toolbar-title-text-font: Roboto, "Helvetica Neue", sans-serif;
--mat-toolbar-title-text-line-height: 32px;
--mat-toolbar-title-text-size: 20px;
--mat-toolbar-title-text-tracking: normal;
--mat-toolbar-title-text-weight: 500;
}
.mat-tree {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-tree-node,
.mat-nested-tree-node {
font-weight: 400;
font-size: 14px;
}
.mat-option {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 16px;
}
.mat-optgroup-label {
font-size: 14px;
font-weight: 500;
line-height: 24px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
}
.mat-button, .mat-raised-button, .mat-icon-button, .mat-stroked-button,
.mat-flat-button, .mat-fab, .mat-mini-fab {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 500;
}
.mat-datepicker-content .mdc-button {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: var(--mdc-typography-button-font-family, var(--mdc-typography-font-family, Roboto, "Helvetica Neue", sans-serif));
font-size: var(--mdc-typography-button-font-size, 14px);
line-height: var(--mdc-typography-button-line-height, 14px);
font-weight: var(--mdc-typography-button-font-weight, 500);
letter-spacing: var(--mdc-typography-button-letter-spacing, normal);
-webkit-text-decoration: var(--mdc-typography-button-text-decoration, none);
text-decoration: var(--mdc-typography-button-text-decoration, none);
text-transform: var(--mdc-typography-button-text-transform, none);
}
.mat-card {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-card-title {
font-size: 24px;
font-weight: 500;
}
.mat-card-header .mat-card-title {
font-size: 20px;
}
.mat-card-subtitle,
.mat-card-content {
font-size: 14px;
}
.mat-tooltip {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 10px;
padding-top: 6px;
padding-bottom: 6px;
}
.mat-tooltip-handset {
font-size: 14px;
padding-top: 8px;
padding-bottom: 8px;
}
input.mat-input-element {
margin-top: -0.0625em;
}
.mat-form-field {
font-size: inherit;
font-weight: 400;
line-height: 1.125;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
}
.mat-form-field-wrapper {
padding-bottom: 1.34375em;
}
.mat-form-field-prefix .mat-icon,
.mat-form-field-suffix .mat-icon {
font-size: 150%;
line-height: 1.125;
}
.mat-form-field-prefix .mat-icon-button,
.mat-form-field-suffix .mat-icon-button {
height: 1.5em;
width: 1.5em;
}
.mat-form-field-prefix .mat-icon-button .mat-icon,
.mat-form-field-suffix .mat-icon-button .mat-icon {
height: 1.125em;
line-height: 1.125;
}
.mat-form-field-infix {
padding: 0.5em 0;
border-top: 0.84375em solid transparent;
}
.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.34375em) scale(0.75);
width: 133.3333333333%;
}
.mat-form-field-can-float .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.34374em) scale(0.75);
width: 133.3333433333%;
}
.mat-form-field-label-wrapper {
top: -0.84375em;
padding-top: 0.84375em;
}
.mat-form-field-label {
top: 1.34375em;
}
.mat-form-field-underline {
bottom: 1.34375em;
}
.mat-form-field-subscript-wrapper {
font-size: 75%;
margin-top: 0.6666666667em;
top: calc(100% - 1.7916666667em);
}
.mat-form-field-appearance-legacy .mat-form-field-wrapper {
padding-bottom: 1.25em;
}
.mat-form-field-appearance-legacy .mat-form-field-infix {
padding: 0.4375em 0;
}
.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.001px);
width: 133.3333333333%;
}
.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00101px);
width: 133.3333433333%;
}
.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.28125em) scale(0.75) perspective(100px) translateZ(0.00102px);
width: 133.3333533333%;
}
.mat-form-field-appearance-legacy .mat-form-field-label {
top: 1.28125em;
}
.mat-form-field-appearance-legacy .mat-form-field-underline {
bottom: 1.25em;
}
.mat-form-field-appearance-legacy .mat-form-field-subscript-wrapper {
margin-top: 0.5416666667em;
top: calc(100% - 1.6666666667em);
}
@media print {
.mat-form-field-appearance-legacy.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.28122em) scale(0.75);
}
.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-form-field-autofill-control:-webkit-autofill + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.28121em) scale(0.75);
}
.mat-form-field-appearance-legacy.mat-form-field-can-float .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.2812em) scale(0.75);
}
}
.mat-form-field-appearance-fill .mat-form-field-infix {
padding: 0.25em 0 0.75em 0;
}
.mat-form-field-appearance-fill .mat-form-field-label {
top: 1.09375em;
margin-top: -0.5em;
}
.mat-form-field-appearance-fill.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-0.59375em) scale(0.75);
width: 133.3333333333%;
}
.mat-form-field-appearance-fill.mat-form-field-can-float .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-0.59374em) scale(0.75);
width: 133.3333433333%;
}
.mat-form-field-appearance-outline .mat-form-field-infix {
padding: 1em 0 1em 0;
}
.mat-form-field-appearance-outline .mat-form-field-label {
top: 1.84375em;
margin-top: -0.25em;
}
.mat-form-field-appearance-outline.mat-form-field-can-float.mat-form-field-should-float .mat-form-field-label,
.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server:focus + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.59375em) scale(0.75);
width: 133.3333333333%;
}
.mat-form-field-appearance-outline.mat-form-field-can-float .mat-input-server[label] + .mat-form-field-label-wrapper .mat-form-field-label {
transform: translateY(-1.59374em) scale(0.75);
width: 133.3333433333%;
}
.mat-select {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-select-trigger {
height: 1.125em;
}
.mat-checkbox {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-checkbox-layout .mat-checkbox-label {
line-height: 24px;
}
.mat-dialog-title {
font-size: 20px;
font-weight: 500;
line-height: 32px;
font-family: Roboto, "Helvetica Neue", sans-serif;
letter-spacing: normal;
}
.mat-chip {
font-size: 14px;
font-weight: 500;
}
.mat-chip .mat-chip-trailing-icon.mat-icon,
.mat-chip .mat-chip-remove.mat-icon {
font-size: 18px;
}
.mat-slide-toggle-content {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-tab-group {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-tab-label, .mat-tab-link {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 500;
}
.mat-radio-button {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-slider-thumb-label-text {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 12px;
font-weight: 500;
}
.mat-menu-item {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 400;
}
.mat-list-item {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-list-option {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-list-base .mat-list-item {
font-size: 16px;
}
.mat-list-base .mat-list-item .mat-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
box-sizing: border-box;
}
.mat-list-base .mat-list-item .mat-line:nth-child(n+2) {
font-size: 14px;
}
.mat-list-base .mat-list-option {
font-size: 16px;
}
.mat-list-base .mat-list-option .mat-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
box-sizing: border-box;
}
.mat-list-base .mat-list-option .mat-line:nth-child(n+2) {
font-size: 14px;
}
.mat-list-base .mat-subheader {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
font-weight: 500;
}
.mat-list-base[dense] .mat-list-item {
font-size: 12px;
}
.mat-list-base[dense] .mat-list-item .mat-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
box-sizing: border-box;
}
.mat-list-base[dense] .mat-list-item .mat-line:nth-child(n+2) {
font-size: 12px;
}
.mat-list-base[dense] .mat-list-option {
font-size: 12px;
}
.mat-list-base[dense] .mat-list-option .mat-line {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
box-sizing: border-box;
}
.mat-list-base[dense] .mat-list-option .mat-line:nth-child(n+2) {
font-size: 12px;
}
.mat-list-base[dense] .mat-subheader {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 12px;
font-weight: 500;
}
.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 12px;
}
.mat-simple-snackbar {
font-family: Roboto, "Helvetica Neue", sans-serif;
font-size: 14px;
}
.mat-simple-snackbar-action {
line-height: 1;
font-family: inherit;
font-size: inherit;
font-weight: 500;
}
.mat-table {
font-family: Roboto, "Helvetica Neue", sans-serif;
}
.mat-header-cell {
font-size: 12px;
font-weight: 500;
}
.mat-cell, .mat-footer-cell {
font-size: 14px;
}
.mat-ripple {
overflow: hidden;
position: relative;
}
.mat-ripple:not(:empty) {
transform: translateZ(0);
}
.mat-ripple.mat-ripple-unbounded {
overflow: visible;
}
.mat-ripple-element {
position: absolute;
border-radius: 50%;
pointer-events: none;
transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
transform: scale3d(0, 0, 0);
}
.cdk-high-contrast-active .mat-ripple-element {
display: none;
}
.cdk-visually-hidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
outline: 0;
-webkit-appearance: none;
-moz-appearance: none;
left: 0;
}
[dir=rtl] .cdk-visually-hidden {
left: auto;
right: 0;
}
.cdk-overlay-container, .cdk-global-overlay-wrapper {
pointer-events: none;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.cdk-overlay-container {
position: fixed;
z-index: 1000;
}
.cdk-overlay-container:empty {
display: none;
}
.cdk-global-overlay-wrapper {
display: flex;
position: absolute;
z-index: 1000;
}
.cdk-overlay-pane {
position: absolute;
pointer-events: auto;
box-sizing: border-box;
z-index: 1000;
display: flex;
max-width: 100%;
max-height: 100%;
}
.cdk-overlay-backdrop {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
pointer-events: auto;
-webkit-tap-highlight-color: transparent;
transition: opacity 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
opacity: 0;
}
.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 1;
}
.cdk-high-contrast-active .cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
opacity: 0.6;
}
.cdk-overlay-dark-backdrop {
background: rgba(0, 0, 0, 0.32);
}
.cdk-overlay-transparent-backdrop {
transition: visibility 1ms linear, opacity 1ms linear;
visibility: hidden;
opacity: 1;
}
.cdk-overlay-transparent-backdrop.cdk-overlay-backdrop-showing {
opacity: 0;
visibility: visible;
}
.cdk-overlay-backdrop-noop-animation {
transition: none;
}
.cdk-overlay-connected-position-bounding-box {
position: absolute;
z-index: 1000;
display: flex;
flex-direction: column;
min-width: 1px;
min-height: 1px;
}
.cdk-global-scrollblock {
position: fixed;
width: 100%;
overflow-y: scroll;
}
textarea.cdk-textarea-autosize {
resize: none;
}
textarea.cdk-textarea-autosize-measuring {
padding: 2px 0 !important;
box-sizing: content-box !important;
height: auto !important;
overflow: hidden !important;
}
textarea.cdk-textarea-autosize-measuring-firefox {
padding: 2px 0 !important;
box-sizing: content-box !important;
height: 0 !important;
}
@keyframes cdk-text-field-autofill-start { /*!*/ }
@keyframes cdk-text-field-autofill-end { /*!*/ }
.cdk-text-field-autofill-monitored:-webkit-autofill {
animation: cdk-text-field-autofill-start 0s 1ms;
}
.cdk-text-field-autofill-monitored:not(:-webkit-autofill) {
animation: cdk-text-field-autofill-end 0s 1ms;
}
.mat-focus-indicator {
position: relative;
}
.mat-focus-indicator::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
box-sizing: border-box;
pointer-events: none;
display: var(--mat-focus-indicator-display, none);
border: var(--mat-focus-indicator-border-width, 3px) var(--mat-focus-indicator-border-style, solid) var(--mat-focus-indicator-border-color, transparent);
border-radius: var(--mat-focus-indicator-border-radius, 4px);
}
.mat-focus-indicator:focus::before {
content: "";
}
.cdk-high-contrast-active {
--mat-focus-indicator-display: block;
}
.mat-mdc-focus-indicator {
position: relative;
}
.mat-mdc-focus-indicator::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
position: absolute;
box-sizing: border-box;
pointer-events: none;
display: var(--mat-mdc-focus-indicator-display, none);
border: var(--mat-mdc-focus-indicator-border-width, 3px) var(--mat-mdc-focus-indicator-border-style, solid) var(--mat-mdc-focus-indicator-border-color, transparent);
border-radius: var(--mat-mdc-focus-indicator-border-radius, 4px);
}
.mat-mdc-focus-indicator:focus::before {
content: "";
}
.cdk-high-contrast-active {
--mat-mdc-focus-indicator-display: block;
}
/* ersetzt durch die colors in der tokens.colors.css
$md-primarypalette: (
50 : #e0f1f9,
100 : #b3ddef,
200 : #80c6e4,
300 : #4dafd9,
400 : #269ed1,
500 : #008dc9,
600 : #0085c3,
700 : #007abc,
800 : #0070b5,
900 : #005da9,
A100 : #d3e8ff,
A200 : #a0ceff,
A400 : #6db4ff,
A700 : #53a7ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
$md-accentpalette: (
50 : #eceef0,
100 : #ced5da,
200 : #aeb9c1,
300 : #8e9da8,
400 : #758896,
500 : #5d7383,
600 : #556b7b,
700 : #4b6070,
800 : #415666,
900 : #304353,
A100 : #a1d3ff,
A200 : #6ebbff,
A400 : #3ba3ff,
A700 : #2297ff,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #000000,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #ffffff,
)
);
$md-warnpalette: (
50 : #f9e3e6,
100 : #efb9c2,
200 : #e48a99,
300 : #d95b70,
400 : #d13751,
500 : #c91432,
600 : #c3122d,
700 : #bc0e26,
800 : #b50b1f,
900 : #a90613,
A100 : #ffd4d6,
A200 : #ffa1a5,
A400 : #ff6e75,
A700 : #ff545d,
contrast: (
50 : #000000,
100 : #000000,
200 : #000000,
300 : #000000,
400 : #ffffff,
500 : #ffffff,
600 : #ffffff,
700 : #ffffff,
800 : #ffffff,
900 : #ffffff,
A100 : #000000,
A200 : #000000,
A400 : #000000,
A700 : #000000,
)
);
*/
.mat-button, .mat-icon-button, .mat-stroked-button {
color: inherit;
background: transparent;
}
.mat-button.mat-primary, .mat-icon-button.mat-primary, .mat-stroked-button.mat-primary {
color: var(--color-brand-primary-100);
}
.mat-button.mat-accent, .mat-icon-button.mat-accent, .mat-stroked-button.mat-accent {
color: var(--color-brand-secondary-100);
}
.mat-button.mat-warn, .mat-icon-button.mat-warn, .mat-stroked-button.mat-warn {
color: var(--color-danger-100);
}
.mat-button.mat-primary.mat-button-disabled, .mat-button.mat-accent.mat-button-disabled, .mat-button.mat-warn.mat-button-disabled, .mat-button.mat-button-disabled.mat-button-disabled, .mat-icon-button.mat-primary.mat-button-disabled, .mat-icon-button.mat-accent.mat-button-disabled, .mat-icon-button.mat-warn.mat-button-disabled, .mat-icon-button.mat-button-disabled.mat-button-disabled, .mat-stroked-button.mat-primary.mat-button-disabled, .mat-stroked-button.mat-accent.mat-button-disabled, .mat-stroked-button.mat-warn.mat-button-disabled, .mat-stroked-button.mat-button-disabled.mat-button-disabled {
color: rgba(0, 0, 0, 0.26);
}
.mat-button.mat-primary .mat-button-focus-overlay, .mat-icon-button.mat-primary .mat-button-focus-overlay, .mat-stroked-button.mat-primary .mat-button-focus-overlay {
background-color: var(--color-brand-primary-100);
}
.mat-button.mat-accent .mat-button-focus-overlay, .mat-icon-button.mat-accent .mat-button-focus-overlay, .mat-stroked-button.mat-accent .mat-button-focus-overlay {
background-color: var(--color-brand-secondary-100);
}
.mat-button.mat-warn .mat-button-focus-overlay, .mat-icon-button.mat-warn .mat-button-focus-overlay, .mat-stroked-button.mat-warn .mat-button-focus-overlay {
background-color: var(--color-danger-100);
}
.mat-button.mat-button-disabled .mat-button-focus-overlay, .mat-icon-button.mat-button-disabled .mat-button-focus-overlay, .mat-stroked-button.mat-button-disabled .mat-button-focus-overlay {
background-color: transparent;
}
.mat-button .mat-ripple-element, .mat-icon-button .mat-ripple-element, .mat-stroked-button .mat-ripple-element {
opacity: 0.1;
background-color: currentColor;
}
.mat-button-focus-overlay {
background: black;
}
.mat-stroked-button:not(.mat-button-disabled) {
border-color: rgba(0, 0, 0, 0.12);
}
.mat-flat-button, .mat-raised-button, .mat-fab, .mat-mini-fab {
color: rgba(0, 0, 0, 0.87);
background-color: white;
}
.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {
color: var(--color-white);
}
.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {
color: var(--color-white);
}
.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {
color: var(--color-white);
}
.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {
color: rgba(0, 0, 0, 0.26);
}
.mat-flat-button.mat-primary, .mat-raised-button.mat-primary, .mat-fab.mat-primary, .mat-mini-fab.mat-primary {
background-color: var(--color-brand-primary-100);
}
.mat-flat-button.mat-accent, .mat-raised-button.mat-accent, .mat-fab.mat-accent, .mat-mini-fab.mat-accent {
background-color: var(--color-brand-secondary-100);
}
.mat-flat-button.mat-warn, .mat-raised-button.mat-warn, .mat-fab.mat-warn, .mat-mini-fab.mat-warn {
background-color: var(--color-danger-100);
}
.mat-flat-button.mat-primary.mat-button-disabled, .mat-flat-button.mat-accent.mat-button-disabled, .mat-flat-button.mat-warn.mat-button-disabled, .mat-flat-button.mat-button-disabled.mat-button-disabled, .mat-raised-button.mat-primary.mat-button-disabled, .mat-raised-button.mat-accent.mat-button-disabled, .mat-raised-button.mat-warn.mat-button-disabled, .mat-raised-button.mat-button-disabled.mat-button-disabled, .mat-fab.mat-primary.mat-button-disabled, .mat-fab.mat-accent.mat-button-disabled, .mat-fab.mat-warn.mat-button-disabled, .mat-fab.mat-button-disabled.mat-button-disabled, .mat-mini-fab.mat-primary.mat-button-disabled, .mat-mini-fab.mat-accent.mat-button-disabled, .mat-mini-fab.mat-warn.mat-button-disabled, .mat-mini-fab.mat-button-disabled.mat-button-disabled {
background-color: rgba(0, 0, 0, 0.12);
}
.mat-flat-button.mat-primary .mat-ripple-element, .mat-raised-button.mat-primary .mat-ripple-element, .mat-fab.mat-primary .mat-ripple-element, .mat-mini-fab.mat-primary .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.1;
}
.mat-flat-button.mat-accent .mat-ripple-element, .mat-raised-button.mat-accent .mat-ripple-element, .mat-fab.mat-accent .mat-ripple-element, .mat-mini-fab.mat-accent .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.1;
}
.mat-flat-button.mat-warn .mat-ripple-element, .mat-raised-button.mat-warn .mat-ripple-element, .mat-fab.mat-warn .mat-ripple-element, .mat-mini-fab.mat-warn .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.1;
}
.mat-stroked-button:not([class*=mat-elevation-z]), .mat-flat-button:not([class*=mat-elevation-z]) {
box-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-raised-button:not([class*=mat-elevation-z]) {
box-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-raised-button:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
box-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-raised-button.mat-button-disabled:not([class*=mat-elevation-z]) {
box-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-fab:not([class*=mat-elevation-z]), .mat-mini-fab:not([class*=mat-elevation-z]) {
box-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:not(.mat-button-disabled):active:not([class*=mat-elevation-z]), .mat-mini-fab:not(.mat-button-disabled):active:not([class*=mat-elevation-z]) {
box-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.mat-button-disabled:not([class*=mat-elevation-z]), .mat-mini-fab.mat-button-disabled:not([class*=mat-elevation-z]) {
box-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-datepicker-content .mat-mdc-button.mat-unthemed {
--mdc-text-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-button.mat-primary {
--mdc-text-button-label-text-color: var(--color-brand-primary-100);
}
.mat-datepicker-content .mat-mdc-button.mat-accent {
--mdc-text-button-label-text-color: var(--color-brand-secondary-100);
}
.mat-datepicker-content .mat-mdc-button.mat-warn {
--mdc-text-button-label-text-color: var(--color-danger-100);
}
.mat-datepicker-content .mat-mdc-button[disabled][disabled] {
--mdc-text-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
--mdc-text-button-label-text-color: rgba(0, 0, 0, 0.38);
}
.mat-datepicker-content .mat-mdc-unelevated-button.mat-unthemed {
--mdc-filled-button-container-color: #fff;
--mdc-filled-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-unelevated-button.mat-primary {
--mdc-filled-button-container-color: var(--color-brand-primary-100);
--mdc-filled-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-unelevated-button.mat-accent {
--mdc-filled-button-container-color: var(--color-brand-secondary-100);
--mdc-filled-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-unelevated-button.mat-warn {
--mdc-filled-button-container-color: var(--color-danger-100);
--mdc-filled-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-unelevated-button[disabled][disabled] {
--mdc-filled-button-disabled-container-color: rgba(0, 0, 0, 0.12);
--mdc-filled-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
--mdc-filled-button-container-color: rgba(0, 0, 0, 0.12);
--mdc-filled-button-label-text-color: rgba(0, 0, 0, 0.38);
}
.mat-datepicker-content .mat-mdc-raised-button.mat-unthemed {
--mdc-protected-button-container-color: #fff;
--mdc-protected-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-raised-button.mat-primary {
--mdc-protected-button-container-color: var(--color-brand-primary-100);
--mdc-protected-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-raised-button.mat-accent {
--mdc-protected-button-container-color: var(--color-brand-secondary-100);
--mdc-protected-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-raised-button.mat-warn {
--mdc-protected-button-container-color: var(--color-danger-100);
--mdc-protected-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-raised-button[disabled][disabled] {
--mdc-protected-button-disabled-container-color: rgba(0, 0, 0, 0.12);
--mdc-protected-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
--mdc-protected-button-container-color: rgba(0, 0, 0, 0.12);
--mdc-protected-button-label-text-color: rgba(0, 0, 0, 0.38);
--mdc-protected-button-container-elevation: 0;
}
.mat-datepicker-content .mat-mdc-outlined-button {
--mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
}
.mat-datepicker-content .mat-mdc-outlined-button.mat-unthemed {
--mdc-outlined-button-label-text-color: #000;
}
.mat-datepicker-content .mat-mdc-outlined-button.mat-primary {
--mdc-outlined-button-label-text-color: var(--color-brand-primary-100);
}
.mat-datepicker-content .mat-mdc-outlined-button.mat-accent {
--mdc-outlined-button-label-text-color: var(--color-brand-secondary-100);
}
.mat-datepicker-content .mat-mdc-outlined-button.mat-warn {
--mdc-outlined-button-label-text-color: var(--color-danger-100);
}
.mat-datepicker-content .mat-mdc-outlined-button[disabled][disabled] {
--mdc-outlined-button-label-text-color: rgba(0, 0, 0, 0.38);
--mdc-outlined-button-disabled-label-text-color: rgba(0, 0, 0, 0.38);
--mdc-outlined-button-outline-color: rgba(0, 0, 0, 0.12);
--mdc-outlined-button-disabled-outline-color: rgba(0, 0, 0, 0.12);
}
.mat-datepicker-content .mat-mdc-button, .mat-datepicker-content .mat-mdc-outlined-button {
--mat-mdc-button-persistent-ripple-color: #000;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-datepicker-content .mat-mdc-button:hover .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button:hover .mat-mdc-button-persistent-ripple::before {
opacity: 0.04;
}
.mat-datepicker-content .mat-mdc-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
opacity: 0.12;
}
.mat-datepicker-content .mat-mdc-button:active .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-outlined-button:active .mat-mdc-button-persistent-ripple::before {
opacity: 0.12;
}
.mat-datepicker-content .mat-mdc-button.mat-primary, .mat-datepicker-content .mat-mdc-outlined-button.mat-primary {
--mat-mdc-button-persistent-ripple-color: var(--color-brand-primary-100);
--mat-mdc-button-ripple-color: rgba(var(--color-brand-primary-100), 0.1);
}
.mat-datepicker-content .mat-mdc-button.mat-accent, .mat-datepicker-content .mat-mdc-outlined-button.mat-accent {
--mat-mdc-button-persistent-ripple-color: var(--color-brand-secondary-100);
--mat-mdc-button-ripple-color: rgba(var(--color-brand-secondary-100), 0.1);
}
.mat-datepicker-content .mat-mdc-button.mat-warn, .mat-datepicker-content .mat-mdc-outlined-button.mat-warn {
--mat-mdc-button-persistent-ripple-color: var(--color-danger-100);
--mat-mdc-button-ripple-color: rgba(var(--color-danger-100), 0.1);
}
.mat-datepicker-content .mat-mdc-raised-button, .mat-datepicker-content .mat-mdc-unelevated-button {
--mat-mdc-button-persistent-ripple-color: #000;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-datepicker-content .mat-mdc-raised-button:hover .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button:hover .mat-mdc-button-persistent-ripple::before {
opacity: 0.04;
}
.mat-datepicker-content .mat-mdc-raised-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-raised-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
opacity: 0.12;
}
.mat-datepicker-content .mat-mdc-raised-button:active .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-unelevated-button:active .mat-mdc-button-persistent-ripple::before {
opacity: 0.12;
}
.mat-datepicker-content .mat-mdc-raised-button.mat-primary, .mat-datepicker-content .mat-mdc-unelevated-button.mat-primary {
--mat-mdc-button-persistent-ripple-color: #000;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-datepicker-content .mat-mdc-raised-button.mat-accent, .mat-datepicker-content .mat-mdc-unelevated-button.mat-accent {
--mat-mdc-button-persistent-ripple-color: #000;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-datepicker-content .mat-mdc-raised-button.mat-warn, .mat-datepicker-content .mat-mdc-unelevated-button.mat-warn {
--mat-mdc-button-persistent-ripple-color: #000;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button {
--mat-mdc-button-persistent-ripple-color: #000;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);
--mdc-icon-button-icon-color: inherit;
--mat-mdc-button-persistent-ripple-color: #000;
--mat-mdc-button-ripple-color: rgba(0, 0, 0, 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before {
opacity: 0.04;
}
.mat-datepicker-content .mat-mdc-icon-button.cdk-program-focused .mat-mdc-button-persistent-ripple::before, .mat-datepicker-content .mat-mdc-icon-button.cdk-keyboard-focused .mat-mdc-button-persistent-ripple::before {
opacity: 0.12;
}
.mat-datepicker-content .mat-mdc-icon-button:active .mat-mdc-button-persistent-ripple::before {
opacity: 0.12;
}
.mat-datepicker-content .mat-mdc-icon-button.mat-primary {
--mat-mdc-button-persistent-ripple-color: #6200ee;
--mat-mdc-button-ripple-color: rgba(98, 0, 238, 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button.mat-accent {
--mat-mdc-button-persistent-ripple-color: #018786;
--mat-mdc-button-ripple-color: rgba(1, 135, 134, 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button.mat-warn {
--mat-mdc-button-persistent-ripple-color: #b00020;
--mat-mdc-button-ripple-color: rgba(176, 0, 32, 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button.mat-primary {
--mdc-icon-button-icon-color: var(--color-brand-primary-100);
--mat-mdc-button-persistent-ripple-color: var(--color-brand-primary-100);
--mat-mdc-button-ripple-color: rgba(var(--color-brand-primary-100), 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button.mat-accent {
--mdc-icon-button-icon-color: var(--color-brand-secondary-100);
--mat-mdc-button-persistent-ripple-color: var(--color-brand-secondary-100);
--mat-mdc-button-ripple-color: rgba(var(--color-brand-secondary-100), 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button.mat-warn {
--mdc-icon-button-icon-color: var(--color-danger-100);
--mat-mdc-button-persistent-ripple-color: var(--color-danger-100);
--mat-mdc-button-ripple-color: rgba(var(--color-danger-100), 0.1);
}
.mat-datepicker-content .mat-mdc-icon-button[disabled][disabled] {
--mdc-icon-button-icon-color: rgba(0, 0, 0, 0.38);
--mdc-icon-button-disabled-icon-color: rgba(0, 0, 0, 0.38);
}
.mat-datepicker-content .mat-mdc-button.mat-mdc-button-base,
.mat-datepicker-content .mat-mdc-raised-button.mat-mdc-button-base,
.mat-datepicker-content .mat-mdc-unelevated-button.mat-mdc-button-base,
.mat-datepicker-content .mat-mdc-outlined-button.mat-mdc-button-base {
height: 36px;
}
.mat-datepicker-content .mat-mdc-icon-button.mat-mdc-button-base {
--mdc-icon-button-state-layer-size: 48px;
width: var(--mdc-icon-button-state-layer-size);
height: var(--mdc-icon-button-state-layer-size);
padding: 12px;
}
.mat-option {
color: rgba(0, 0, 0, 0.87);
}
.mat-option:hover:not(.mat-option-disabled), .mat-option:focus:not(.mat-option-disabled) {
background: rgba(0, 0, 0, 0.04);
}
.mat-option.mat-selected:not(.mat-option-multiple):not(.mat-option-disabled) {
background: rgba(0, 0, 0, 0.04);
}
.mat-option.mat-active {
background: rgba(0, 0, 0, 0.04);
color: rgba(0, 0, 0, 0.87);
}
.mat-option.mat-option-disabled {
color: rgba(0, 0, 0, 0.38);
}
.mat-primary .mat-option.mat-selected:not(.mat-option-disabled) {
color: var(--color-brand-primary-100);
}
.mat-accent .mat-option.mat-selected:not(.mat-option-disabled) {
color: var(--color-brand-secondary-100);
}
.mat-warn .mat-option.mat-selected:not(.mat-option-disabled) {
color: var(--color-danger-100);
}
.mat-optgroup-label {
color: rgba(0, 0, 0, 0.54);
}
.mat-optgroup-disabled .mat-optgroup-label {
color: rgba(0, 0, 0, 0.38);
}
.mat-ripple-element {
background-color: rgba(0, 0, 0, 0.1);
}
.mat-pseudo-checkbox-full {
color: rgba(0, 0, 0, 0.54);
}
.mat-pseudo-checkbox-full.mat-pseudo-checkbox-disabled {
color: #b0b0b0;
}
.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
color: var(--color-brand-primary-100);
}
.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
background: var(--color-brand-primary-100);
}
.mat-primary .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,
.mat-primary .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {
color: #fafafa;
}
.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
color: var(--color-brand-secondary-100);
}
.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
background: var(--color-brand-secondary-100);
}
.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,
.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {
color: #fafafa;
}
.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
color: var(--color-brand-secondary-100);
}
.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
background: var(--color-brand-secondary-100);
}
.mat-accent .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,
.mat-accent .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {
color: #fafafa;
}
.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
color: var(--color-danger-100);
}
.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
background: var(--color-danger-100);
}
.mat-warn .mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full::after,
.mat-warn .mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full::after {
color: #fafafa;
}
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-minimal::after,
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-minimal::after {
color: #b0b0b0;
}
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-checked.mat-pseudo-checkbox-full,
.mat-pseudo-checkbox-disabled.mat-pseudo-checkbox-indeterminate.mat-pseudo-checkbox-full {
background: #b0b0b0;
}
.mat-app-background {
background-color: #fafafa;
color: rgba(0, 0, 0, 0.87);
}
.mat-elevation-z0 {
box-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-elevation-z1 {
box-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-elevation-z2 {
box-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-elevation-z3 {
box-shadow: 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-elevation-z4 {
box-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-elevation-z5 {
box-shadow: 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-elevation-z6 {
box-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-elevation-z7 {
box-shadow: 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-elevation-z8 {
box-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-elevation-z9 {
box-shadow: 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-elevation-z10 {
box-shadow: 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-elevation-z11 {
box-shadow: 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-elevation-z12 {
box-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-elevation-z13 {
box-shadow: 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-elevation-z14 {
box-shadow: 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-elevation-z15 {
box-shadow: 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-elevation-z16 {
box-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-elevation-z17 {
box-shadow: 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-elevation-z18 {
box-shadow: 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-elevation-z19 {
box-shadow: 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-elevation-z20 {
box-shadow: 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-elevation-z21 {
box-shadow: 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-elevation-z22 {
box-shadow: 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-elevation-z23 {
box-shadow: 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-elevation-z24 {
box-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-theme-loaded-marker {
display: none;
}
.mat-card {
background: white;
color: rgba(0, 0, 0, 0.87);
}
.mat-card:not([class*=mat-elevation-z]) {
box-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-card.mat-card-flat:not([class*=mat-elevation-z]) {
box-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-card-subtitle {
color: rgba(0, 0, 0, 0.54);
}
.mat-progress-bar-background {
fill: var(--color-brand-primary-100);
}
.mat-progress-bar-buffer {
background-color: var(--color-brand-primary-100);
}
.mat-progress-bar-fill::after {
background-color: var(--color-brand-primary-100);
}
.mat-progress-bar.mat-accent .mat-progress-bar-background {
fill: var(--color-brand-secondary-100);
}
.mat-progress-bar.mat-accent .mat-progress-bar-buffer {
background-color: var(--color-brand-secondary-100);
}
.mat-progress-bar.mat-accent .mat-progress-bar-fill::after {
background-color: var(--color-brand-secondary-100);
}
.mat-progress-bar.mat-warn .mat-progress-bar-background {
fill: var(--color-danger-100);
}
.mat-progress-bar.mat-warn .mat-progress-bar-buffer {
background-color: var(--color-danger-100);
}
.mat-progress-bar.mat-warn .mat-progress-bar-fill::after {
background-color: var(--color-danger-100);
}
.mat-progress-spinner circle, .mat-spinner circle {
stroke: var(--color-brand-primary-100);
}
.mat-progress-spinner.mat-accent circle, .mat-spinner.mat-accent circle {
stroke: var(--color-brand-secondary-100);
}
.mat-progress-spinner.mat-warn circle, .mat-spinner.mat-warn circle {
stroke: var(--color-danger-100);
}
.mat-tooltip {
background: rgba(97, 97, 97, 0.9);
}
.mat-form-field-type-mat-native-select .mat-form-field-infix::after {
color: rgba(0, 0, 0, 0.54);
}
.mat-input-element:disabled,
.mat-form-field-type-mat-native-select.mat-form-field-disabled .mat-form-field-infix::after {
color: rgba(0, 0, 0, 0.38);
}
.mat-input-element {
caret-color: var(--color-brand-primary-100);
}
.mat-input-element::placeholder {
color: rgba(0, 0, 0, 0.42);
}
.mat-input-element::-moz-placeholder {
color: rgba(0, 0, 0, 0.42);
}
.mat-input-element::-webkit-input-placeholder {
color: rgba(0, 0, 0, 0.42);
}
.mat-input-element:-ms-input-placeholder {
color: rgba(0, 0, 0, 0.42);
}
.mat-form-field.mat-accent .mat-input-element {
caret-color: var(--color-brand-secondary-100);
}
.mat-form-field.mat-warn .mat-input-element,
.mat-form-field-invalid .mat-input-element {
caret-color: var(--color-danger-100);
}
.mat-form-field-type-mat-native-select.mat-form-field-invalid .mat-form-field-infix::after {
color: var(--color-danger-100);
}
.mat-form-field-disabled .mat-form-field-prefix,
.mat-form-field-disabled .mat-form-field-suffix {
color: rgba(0, 0, 0, 0.38);
}
.mat-form-field-label {
color: rgba(0, 0, 0, 0.6);
}
.mat-hint {
color: rgba(0, 0, 0, 0.6);
}
.mat-form-field.mat-focused .mat-form-field-label {
color: var(--color-brand-primary-100);
}
.mat-form-field.mat-focused .mat-form-field-label.mat-accent {
color: var(--color-brand-secondary-100);
}
.mat-form-field.mat-focused .mat-form-field-label.mat-warn {
color: var(--color-danger-100);
}
.mat-focused .mat-form-field-required-marker {
color: var(--color-brand-secondary-100);
}
.mat-form-field-ripple {
background-color: rgba(0, 0, 0, 0.87);
}
.mat-form-field.mat-focused .mat-form-field-ripple {
background-color: var(--color-brand-primary-100);
}
.mat-form-field.mat-focused .mat-form-field-ripple.mat-accent {
background-color: var(--color-brand-secondary-100);
}
.mat-form-field.mat-focused .mat-form-field-ripple.mat-warn {
background-color: var(--color-danger-100);
}
.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid) .mat-form-field-infix::after {
color: var(--color-brand-primary-100);
}
.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-accent .mat-form-field-infix::after {
color: var(--color-brand-secondary-100);
}
.mat-form-field-type-mat-native-select.mat-focused:not(.mat-form-field-invalid).mat-warn .mat-form-field-infix::after {
color: var(--color-danger-100);
}
.mat-form-field.mat-form-field-invalid .mat-form-field-label {
color: var(--color-danger-100);
}
.mat-form-field.mat-form-field-invalid .mat-form-field-label.mat-accent,
.mat-form-field.mat-form-field-invalid .mat-form-field-label .mat-form-field-required-marker {
color: var(--color-danger-100);
}
.mat-form-field.mat-form-field-invalid .mat-form-field-ripple,
.mat-form-field.mat-form-field-invalid .mat-form-field-ripple.mat-accent {
background-color: var(--color-danger-100);
}
.mat-error {
color: var(--color-danger-100);
}
.mat-form-field-appearance-legacy .mat-form-field-label {
color: rgba(0, 0, 0, 0.54);
}
.mat-form-field-appearance-legacy .mat-hint {
color: rgba(0, 0, 0, 0.54);
}
.mat-form-field-appearance-legacy .mat-form-field-underline {
background-color: rgba(0, 0, 0, 0.42);
}
.mat-form-field-appearance-legacy.mat-form-field-disabled .mat-form-field-underline {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);
background-size: 4px 100%;
background-repeat: repeat-x;
}
.mat-form-field-appearance-standard .mat-form-field-underline {
background-color: rgba(0, 0, 0, 0.42);
}
.mat-form-field-appearance-standard.mat-form-field-disabled .mat-form-field-underline {
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.42) 33%, transparent 0%);
background-size: 4px 100%;
background-repeat: repeat-x;
}
.mat-form-field-appearance-fill .mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.04);
}
.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-flex {
background-color: rgba(0, 0, 0, 0.02);
}
.mat-form-field-appearance-fill .mat-form-field-underline::before {
background-color: rgba(0, 0, 0, 0.42);
}
.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-label {
color: rgba(0, 0, 0, 0.38);
}
.mat-form-field-appearance-fill.mat-form-field-disabled .mat-form-field-underline::before {
background-color: transparent;
}
.mat-form-field-appearance-outline .mat-form-field-outline {
color: rgba(0, 0, 0, 0.12);
}
.mat-form-field-appearance-outline .mat-form-field-outline-thick {
color: rgba(0, 0, 0, 0.87);
}
.mat-form-field-appearance-outline.mat-focused .mat-form-field-outline-thick {
color: var(--color-brand-primary-100);
}
.mat-form-field-appearance-outline.mat-focused.mat-accent .mat-form-field-outline-thick {
color: var(--color-brand-secondary-100);
}
.mat-form-field-appearance-outline.mat-focused.mat-warn .mat-form-field-outline-thick {
color: var(--color-danger-100);
}
.mat-form-field-appearance-outline.mat-form-field-invalid.mat-form-field-invalid .mat-form-field-outline-thick {
color: var(--color-danger-100);
}
.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-label {
color: rgba(0, 0, 0, 0.38);
}
.mat-form-field-appearance-outline.mat-form-field-disabled .mat-form-field-outline {
color: rgba(0, 0, 0, 0.06);
}
.mat-select-value {
color: rgba(0, 0, 0, 0.87);
}
.mat-select-placeholder {
color: rgba(0, 0, 0, 0.42);
}
.mat-select-disabled .mat-select-value {
color: rgba(0, 0, 0, 0.38);
}
.mat-select-arrow {
color: rgba(0, 0, 0, 0.54);
}
.mat-select-panel {
background: white;
}
.mat-select-panel:not([class*=mat-elevation-z]) {
box-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-select-panel .mat-option.mat-selected:not(.mat-option-multiple) {
background: rgba(0, 0, 0, 0.12);
}
.mat-form-field.mat-focused.mat-primary .mat-select-arrow {
color: var(--color-brand-primary-100);
}
.mat-form-field.mat-focused.mat-accent .mat-select-arrow {
color: var(--color-brand-secondary-100);
}
.mat-form-field.mat-focused.mat-warn .mat-select-arrow {
color: var(--color-danger-100);
}
.mat-form-field .mat-select.mat-select-invalid .mat-select-arrow {
color: var(--color-danger-100);
}
.mat-form-field .mat-select.mat-select-disabled .mat-select-arrow {
color: rgba(0, 0, 0, 0.38);
}
.mat-checkbox-frame {
border-color: rgba(0, 0, 0, 0.54);
}
.mat-checkbox-checkmark {
fill: #fafafa;
}
.mat-checkbox-checkmark-path {
stroke: #fafafa !important;
}
.mat-checkbox-mixedmark {
background-color: #fafafa;
}
.mat-checkbox-indeterminate.mat-primary .mat-checkbox-background, .mat-checkbox-checked.mat-primary .mat-checkbox-background {
background-color: var(--color-brand-primary-100);
}
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background, .mat-checkbox-checked.mat-accent .mat-checkbox-background {
background-color: var(--color-brand-secondary-100);
}
.mat-checkbox-indeterminate.mat-warn .mat-checkbox-background, .mat-checkbox-checked.mat-warn .mat-checkbox-background {
background-color: var(--color-danger-100);
}
.mat-checkbox-disabled.mat-checkbox-checked .mat-checkbox-background, .mat-checkbox-disabled.mat-checkbox-indeterminate .mat-checkbox-background {
background-color: #b0b0b0;
}
.mat-checkbox-disabled:not(.mat-checkbox-checked) .mat-checkbox-frame {
border-color: #b0b0b0;
}
.mat-checkbox-disabled .mat-checkbox-label {
color: rgba(0, 0, 0, 0.38);
}
.mat-checkbox .mat-ripple-element {
background-color: black;
}
.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-primary .mat-ripple-element {
background: var(--color-brand-primary-100);
}
.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-accent .mat-ripple-element {
background: var(--color-brand-secondary-100);
}
.mat-checkbox-checked:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element,
.mat-checkbox:active:not(.mat-checkbox-disabled).mat-warn .mat-ripple-element {
background: var(--color-danger-100);
}
.mat-autocomplete-panel {
background: white;
color: rgba(0, 0, 0, 0.87);
}
.mat-autocomplete-panel:not([class*=mat-elevation-z]) {
box-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-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover) {
background: white;
}
.mat-autocomplete-panel .mat-option.mat-selected:not(.mat-active):not(:hover):not(.mat-option-disabled) {
color: rgba(0, 0, 0, 0.87);
}
.mat-dialog-container {
box-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);
background: white;
color: rgba(0, 0, 0, 0.87);
}
.mat-chip.mat-standard-chip {
background-color: #e0e0e0;
color: rgba(0, 0, 0, 0.87);
}
.mat-chip.mat-standard-chip .mat-chip-remove {
color: rgba(0, 0, 0, 0.87);
opacity: 0.4;
}
.mat-chip.mat-standard-chip:not(.mat-chip-disabled):active {
box-shadow: 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-chip.mat-standard-chip:not(.mat-chip-disabled) .mat-chip-remove:hover {
opacity: 0.54;
}
.mat-chip.mat-standard-chip.mat-chip-disabled {
opacity: 0.4;
}
.mat-chip.mat-standard-chip::after {
background: black;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary {
background-color: var(--color-brand-primary-100);
color: var(--color-white);
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-chip-remove {
color: var(--color-white);
opacity: 0.4;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-primary .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.1;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn {
background-color: var(--color-danger-100);
color: var(--color-white);
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-chip-remove {
color: var(--color-white);
opacity: 0.4;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-warn .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.1;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent {
background-color: var(--color-brand-secondary-100);
color: var(--color-white);
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-chip-remove {
color: var(--color-white);
opacity: 0.4;
}
.mat-chip.mat-standard-chip.mat-chip-selected.mat-accent .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.1;
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb {
background-color: var(--color-brand-secondary-100);
}
.mat-slide-toggle.mat-checked .mat-slide-toggle-bar {
background-color: var(--color-brand-secondary-100);
}
.mat-slide-toggle.mat-checked .mat-ripple-element {
background-color: var(--color-brand-secondary-100);
}
.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
background-color: var(--color-brand-primary-100);
}
.mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
background-color: var(--color-brand-primary-100);
}
.mat-slide-toggle.mat-primary.mat-checked .mat-ripple-element {
background-color: var(--color-brand-primary-100);
}
.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-thumb {
background-color: var(--color-danger-100);
}
.mat-slide-toggle.mat-warn.mat-checked .mat-slide-toggle-bar {
background-color: var(--color-danger-100);
}
.mat-slide-toggle.mat-warn.mat-checked .mat-ripple-element {
background-color: var(--color-danger-100);
}
.mat-slide-toggle:not(.mat-checked) .mat-ripple-element {
background-color: black;
}
.mat-slide-toggle-thumb {
box-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);
background-color: #fafafa;
}
.mat-slide-toggle-bar {
background-color: rgba(0, 0, 0, 0.38);
}
.mat-radio-outer-circle {
border-color: rgba(0, 0, 0, 0.54);
}
.mat-radio-button.mat-primary.mat-radio-checked .mat-radio-outer-circle {
border-color: var(--color-brand-primary-100);
}
.mat-radio-button.mat-primary .mat-radio-inner-circle,
.mat-radio-button.mat-primary .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-primary.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-primary:active .mat-radio-persistent-ripple {
background-color: var(--color-brand-primary-100);
}
.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
border-color: var(--color-brand-secondary-100);
}
.mat-radio-button.mat-accent .mat-radio-inner-circle,
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-accent:active .mat-radio-persistent-ripple {
background-color: var(--color-brand-secondary-100);
}
.mat-radio-button.mat-warn.mat-radio-checked .mat-radio-outer-circle {
border-color: var(--color-danger-100);
}
.mat-radio-button.mat-warn .mat-radio-inner-circle,
.mat-radio-button.mat-warn .mat-radio-ripple .mat-ripple-element:not(.mat-radio-persistent-ripple), .mat-radio-button.mat-warn.mat-radio-checked .mat-radio-persistent-ripple, .mat-radio-button.mat-warn:active .mat-radio-persistent-ripple {
background-color: var(--color-danger-100);
}
.mat-radio-button.mat-radio-disabled.mat-radio-checked .mat-radio-outer-circle,
.mat-radio-button.mat-radio-disabled .mat-radio-outer-circle {
border-color: rgba(0, 0, 0, 0.38);
}
.mat-radio-button.mat-radio-disabled .mat-radio-ripple .mat-ripple-element,
.mat-radio-button.mat-radio-disabled .mat-radio-inner-circle {
background-color: rgba(0, 0, 0, 0.38);
}
.mat-radio-button.mat-radio-disabled .mat-radio-label-content {
color: rgba(0, 0, 0, 0.38);
}
.mat-radio-button .mat-ripple-element {
background-color: black;
}
.mat-slider-track-background {
background-color: rgba(0, 0, 0, 0.26);
}
.mat-slider.mat-primary .mat-slider-track-fill,
.mat-slider.mat-primary .mat-slider-thumb,
.mat-slider.mat-primary .mat-slider-thumb-label {
background-color: var(--color-brand-primary-100);
}
.mat-slider.mat-primary .mat-slider-thumb-label-text {
color: var(--color-white);
}
.mat-slider.mat-primary .mat-slider-focus-ring {
background-color: var(--color-brand-primary-100);
opacity: 0.2;
}
.mat-slider.mat-accent .mat-slider-track-fill,
.mat-slider.mat-accent .mat-slider-thumb,
.mat-slider.mat-accent .mat-slider-thumb-label {
background-color: var(--color-brand-secondary-100);
}
.mat-slider.mat-accent .mat-slider-thumb-label-text {
color: var(--color-white);
}
.mat-slider.mat-accent .mat-slider-focus-ring {
background-color: var(--color-brand-secondary-100);
opacity: 0.2;
}
.mat-slider.mat-warn .mat-slider-track-fill,
.mat-slider.mat-warn .mat-slider-thumb,
.mat-slider.mat-warn .mat-slider-thumb-label {
background-color: var(--color-danger-100);
}
.mat-slider.mat-warn .mat-slider-thumb-label-text {
color: var(--color-white);
}
.mat-slider.mat-warn .mat-slider-focus-ring {
background-color: var(--color-danger-100);
opacity: 0.2;
}
.mat-slider:hover .mat-slider-track-background,
.mat-slider.cdk-focused .mat-slider-track-background {
background-color: rgba(0, 0, 0, 0.38);
}
.mat-slider.mat-slider-disabled .mat-slider-track-background,
.mat-slider.mat-slider-disabled .mat-slider-track-fill,
.mat-slider.mat-slider-disabled .mat-slider-thumb {
background-color: rgba(0, 0, 0, 0.26);
}
.mat-slider.mat-slider-disabled:hover .mat-slider-track-background {
background-color: rgba(0, 0, 0, 0.26);
}
.mat-slider.mat-slider-min-value .mat-slider-focus-ring {
background-color: rgba(0, 0, 0, 0.12);
}
.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb,
.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing .mat-slider-thumb-label {
background-color: rgba(0, 0, 0, 0.87);
}
.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb,
.mat-slider.mat-slider-min-value.mat-slider-thumb-label-showing.cdk-focused .mat-slider-thumb-label {
background-color: rgba(0, 0, 0, 0.26);
}
.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb {
border-color: rgba(0, 0, 0, 0.26);
background-color: transparent;
}
.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused .mat-slider-thumb {
border-color: rgba(0, 0, 0, 0.38);
}
.mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing):hover.mat-slider-disabled .mat-slider-thumb, .mat-slider.mat-slider-min-value:not(.mat-slider-thumb-label-showing).cdk-focused.mat-slider-disabled .mat-slider-thumb {
border-color: rgba(0, 0, 0, 0.26);
}
.mat-slider-has-ticks .mat-slider-wrapper::after {
border-color: rgba(0, 0, 0, 0.7);
}
.mat-slider-horizontal .mat-slider-ticks {
background-image: repeating-linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
background-image: -moz-repeating-linear-gradient(0.0001deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
}
.mat-slider-vertical .mat-slider-ticks {
background-image: repeating-linear-gradient(to bottom, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7) 2px, transparent 0, transparent);
}
.mat-menu-panel {
background: white;
}
.mat-menu-panel:not([class*=mat-elevation-z]) {
box-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-menu-item {
background: transparent;
color: rgba(0, 0, 0, 0.87);
}
.mat-menu-item[disabled],
.mat-menu-item[disabled] .mat-menu-submenu-icon,
.mat-menu-item[disabled] .mat-icon-no-color {
color: rgba(0, 0, 0, 0.38);
}
.mat-menu-item .mat-icon-no-color,
.mat-menu-submenu-icon {
color: rgba(0, 0, 0, 0.54);
}
.mat-menu-item:hover:not([disabled]),
.mat-menu-item.cdk-program-focused:not([disabled]),
.mat-menu-item.cdk-keyboard-focused:not([disabled]),
.mat-menu-item-highlighted:not([disabled]) {
background: rgba(0, 0, 0, 0.04);
}
.mat-list-base .mat-list-item {
color: rgba(0, 0, 0, 0.87);
}
.mat-list-base .mat-list-option {
color: rgba(0, 0, 0, 0.87);
}
.mat-list-base .mat-subheader {
color: rgba(0, 0, 0, 0.54);
}
.mat-list-base .mat-list-item-disabled {
background-color: #eeeeee;
color: rgba(0, 0, 0, 0.38);
}
.mat-list-option:hover, .mat-list-option:focus,
.mat-nav-list .mat-list-item:hover,
.mat-nav-list .mat-list-item:focus,
.mat-action-list .mat-list-item:hover,
.mat-action-list .mat-list-item:focus {
background: rgba(0, 0, 0, 0.04);
}
.mat-list-single-selected-option, .mat-list-single-selected-option:hover, .mat-list-single-selected-option:focus {
background: rgba(0, 0, 0, 0.12);
}
.mat-paginator {
background: white;
}
.mat-paginator,
.mat-paginator-page-size .mat-select-trigger {
color: rgba(0, 0, 0, 0.54);
}
.mat-paginator-decrement,
.mat-paginator-increment {
border-top: 2px solid rgba(0, 0, 0, 0.54);
border-right: 2px solid rgba(0, 0, 0, 0.54);
}
.mat-paginator-first,
.mat-paginator-last {
border-top: 2px solid rgba(0, 0, 0, 0.54);
}
.mat-icon-button[disabled] .mat-paginator-decrement,
.mat-icon-button[disabled] .mat-paginator-increment,
.mat-icon-button[disabled] .mat-paginator-first,
.mat-icon-button[disabled] .mat-paginator-last {
border-color: rgba(0, 0, 0, 0.38);
}
.mat-paginator-container {
min-height: 56px;
}
.mat-tab-nav-bar,
.mat-tab-header {
border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
.mat-tab-group-inverted-header .mat-tab-nav-bar,
.mat-tab-group-inverted-header .mat-tab-header {
border-top: 1px solid rgba(0, 0, 0, 0.12);
border-bottom: none;
}
.mat-tab-label, .mat-tab-link {
color: rgba(0, 0, 0, 0.87);
}
.mat-tab-label.mat-tab-disabled, .mat-tab-link.mat-tab-disabled {
color: rgba(0, 0, 0, 0.38);
}
.mat-tab-header-pagination-chevron {
border-color: rgba(0, 0, 0, 0.87);
}
.mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
border-color: rgba(0, 0, 0, 0.38);
}
.mat-tab-group[class*=mat-background-] > .mat-tab-header,
.mat-tab-nav-bar[class*=mat-background-] {
border-bottom: none;
border-top: none;
}
.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused,
.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused,
.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused,
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused,
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused {
background-color: var(--color-brand-primary-100);
}
.mat-tab-group.mat-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-group.mat-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-group.mat-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled {
background-color: rgba(0, 0, 0, 0.1);
}
.mat-tab-group.mat-primary .mat-ink-bar, .mat-tab-nav-bar.mat-primary .mat-ink-bar {
background-color: var(--color-brand-primary-100);
}
.mat-tab-group.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-primary.mat-background-primary > .mat-tab-link-container .mat-ink-bar {
background-color: var(--color-white);
}
.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused,
.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused,
.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused,
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused,
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused {
background-color: var(--color-brand-secondary-100);
}
.mat-tab-group.mat-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-group.mat-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-group.mat-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled {
background-color: rgba(0, 0, 0, 0.1);
}
.mat-tab-group.mat-accent .mat-ink-bar, .mat-tab-nav-bar.mat-accent .mat-ink-bar {
background-color: var(--color-brand-secondary-100);
}
.mat-tab-group.mat-accent.mat-background-accent > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-accent.mat-background-accent > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-accent.mat-background-accent > .mat-tab-link-container .mat-ink-bar {
background-color: var(--color-white);
}
.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused,
.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused,
.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused,
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused,
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused {
background-color: var(--color-danger-100);
}
.mat-tab-group.mat-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-group.mat-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-group.mat-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled {
background-color: rgba(0, 0, 0, 0.1);
}
.mat-tab-group.mat-warn .mat-ink-bar, .mat-tab-nav-bar.mat-warn .mat-ink-bar {
background-color: var(--color-danger-100);
}
.mat-tab-group.mat-warn.mat-background-warn > .mat-tab-header .mat-ink-bar, .mat-tab-group.mat-warn.mat-background-warn > .mat-tab-link-container .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn > .mat-tab-header .mat-ink-bar, .mat-tab-nav-bar.mat-warn.mat-background-warn > .mat-tab-link-container .mat-ink-bar {
background-color: var(--color-white);
}
.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused,
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused,
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused {
background-color: var(--color-brand-primary-100);
}
.mat-tab-group.mat-background-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-background-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-group.mat-background-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-primary .mat-tab-link.cdk-program-focused.mat-tab-disabled {
background-color: rgba(0, 0, 0, 0.1);
}
.mat-tab-group.mat-background-primary > .mat-tab-header, .mat-tab-group.mat-background-primary > .mat-tab-link-container, .mat-tab-group.mat-background-primary > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination {
background-color: var(--color-brand-primary-100);
}
.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-tab-link {
color: var(--color-white);
}
.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {
color: var(--color-white);
}
.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-focus-indicator::before,
.mat-tab-group.mat-background-primary > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-focus-indicator::before,
.mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-focus-indicator::before {
border-color: var(--color-white);
}
.mat-tab-group.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
border-color: var(--color-white);
opacity: 0.4;
}
.mat-tab-group.mat-background-primary > .mat-tab-header .mat-ripple-element,
.mat-tab-group.mat-background-primary > .mat-tab-link-container .mat-ripple-element,
.mat-tab-group.mat-background-primary > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-primary > .mat-tab-header .mat-ripple-element,
.mat-tab-nav-bar.mat-background-primary > .mat-tab-link-container .mat-ripple-element,
.mat-tab-nav-bar.mat-background-primary > .mat-tab-header-pagination .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.12;
}
.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused,
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused,
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused {
background-color: var(--color-brand-secondary-100);
}
.mat-tab-group.mat-background-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-background-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-group.mat-background-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-accent .mat-tab-link.cdk-program-focused.mat-tab-disabled {
background-color: rgba(0, 0, 0, 0.1);
}
.mat-tab-group.mat-background-accent > .mat-tab-header, .mat-tab-group.mat-background-accent > .mat-tab-link-container, .mat-tab-group.mat-background-accent > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination {
background-color: var(--color-brand-secondary-100);
}
.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-tab-link {
color: var(--color-white);
}
.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {
color: var(--color-white);
}
.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-accent > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-focus-indicator::before,
.mat-tab-group.mat-background-accent > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-focus-indicator::before,
.mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-focus-indicator::before {
border-color: var(--color-white);
}
.mat-tab-group.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
border-color: var(--color-white);
opacity: 0.4;
}
.mat-tab-group.mat-background-accent > .mat-tab-header .mat-ripple-element,
.mat-tab-group.mat-background-accent > .mat-tab-link-container .mat-ripple-element,
.mat-tab-group.mat-background-accent > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-accent > .mat-tab-header .mat-ripple-element,
.mat-tab-nav-bar.mat-background-accent > .mat-tab-link-container .mat-ripple-element,
.mat-tab-nav-bar.mat-background-accent > .mat-tab-header-pagination .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.12;
}
.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused,
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused,
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused {
background-color: var(--color-danger-100);
}
.mat-tab-group.mat-background-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-group.mat-background-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-group.mat-background-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-keyboard-focused.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn .mat-tab-label.cdk-program-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-keyboard-focused.mat-tab-disabled,
.mat-tab-nav-bar.mat-background-warn .mat-tab-link.cdk-program-focused.mat-tab-disabled {
background-color: rgba(0, 0, 0, 0.1);
}
.mat-tab-group.mat-background-warn > .mat-tab-header, .mat-tab-group.mat-background-warn > .mat-tab-link-container, .mat-tab-group.mat-background-warn > .mat-tab-header-pagination, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination {
background-color: var(--color-danger-100);
}
.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-label, .mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-tab-link, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-label, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-tab-link {
color: var(--color-white);
}
.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-tab-link.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-label.mat-tab-disabled, .mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-tab-link.mat-tab-disabled {
color: var(--color-white);
}
.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-warn > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-focus-indicator::before,
.mat-tab-group.mat-background-warn > .mat-tab-header .mat-focus-indicator::before, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-focus-indicator::before,
.mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-focus-indicator::before {
border-color: var(--color-white);
}
.mat-tab-group.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-group.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron,
.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination-disabled .mat-tab-header-pagination-chevron {
border-color: var(--color-white);
opacity: 0.4;
}
.mat-tab-group.mat-background-warn > .mat-tab-header .mat-ripple-element,
.mat-tab-group.mat-background-warn > .mat-tab-link-container .mat-ripple-element,
.mat-tab-group.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element, .mat-tab-nav-bar.mat-background-warn > .mat-tab-header .mat-ripple-element,
.mat-tab-nav-bar.mat-background-warn > .mat-tab-link-container .mat-ripple-element,
.mat-tab-nav-bar.mat-background-warn > .mat-tab-header-pagination .mat-ripple-element {
background-color: var(--color-white);
opacity: 0.12;
}
.mat-snack-bar-container {
color: rgba(255, 255, 255, 0.7);
background: #323232;
box-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-simple-snackbar-action {
color: var(--color-brand-secondary-100);
}
.mat-table {
background: white;
}
.mat-table thead, .mat-table tbody, .mat-table tfoot,
mat-header-row, mat-row, mat-footer-row,
[mat-header-row], [mat-row], [mat-footer-row],
.mat-table-sticky {
background: inherit;
}
mat-row, mat-header-row, mat-footer-row,
th.mat-header-cell, td.mat-cell, td.mat-footer-cell {
border-bottom-color: rgba(0, 0, 0, 0.12);
}
.mat-header-cell {
color: rgba(0, 0, 0, 0.54);
}
.mat-cell, .mat-footer-cell {
color: rgba(0, 0, 0, 0.87);
}
.mat-badge {
position: relative;
}
.mat-badge.mat-badge {
overflow: visible;
}
.mat-badge-content {
position: absolute;
text-align: center;
display: inline-block;
border-radius: 50%;
transition: transform 200ms ease-in-out;
transform: scale(0.6);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
pointer-events: none;
background-color: var(--mat-badge-background-color);
color: var(--mat-badge-text-color);
font-family: Roboto, sans-serif;
/* @alternate */
font-family: var(--mat-badge-text-font, Roboto, sans-serif);
font-size: 12px;
/* @alternate */
font-size: var(--mat-badge-text-size, 12px);
font-weight: 600;
/* @alternate */
font-weight: var(--mat-badge-text-weight, 600);
}
.cdk-high-contrast-active .mat-badge-content {
outline: solid 1px;
border-radius: 0;
}
.mat-badge-disabled .mat-badge-content {
background-color: var(--mat-badge-disabled-state-background-color);
color: var(--mat-badge-disabled-state-text-color);
}
.mat-badge-hidden .mat-badge-content {
display: none;
}
.ng-animate-disabled .mat-badge-content,
.mat-badge-content._mat-animation-noopable {
transition: none;
}
.mat-badge-content.mat-badge-active {
transform: none;
}
.mat-badge-small .mat-badge-content {
width: 16px;
height: 16px;
line-height: 16px;
font-size: 9px;
/* @alternate */
font-size: var(--mat-badge-small-size-text-size, 9px);
}
.mat-badge-small.mat-badge-above .mat-badge-content {
top: -8px;
}
.mat-badge-small.mat-badge-below .mat-badge-content {
bottom: -8px;
}
.mat-badge-small.mat-badge-before .mat-badge-content {
left: -16px;
}
[dir=rtl] .mat-badge-small.mat-badge-before .mat-badge-content {
left: auto;
right: -16px;
}
.mat-badge-small.mat-badge-after .mat-badge-content {
right: -16px;
}
[dir=rtl] .mat-badge-small.mat-badge-after .mat-badge-content {
right: auto;
left: -16px;
}
.mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
left: -8px;
}
[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-before .mat-badge-content {
left: auto;
right: -8px;
}
.mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
right: -8px;
}
[dir=rtl] .mat-badge-small.mat-badge-overlap.mat-badge-after .mat-badge-content {
right: auto;
left: -8px;
}
.mat-badge-medium .mat-badge-content {
width: 22px;
height: 22px;
line-height: 22px;
}
.mat-badge-medium.mat-badge-above .mat-badge-content {
top: -11px;
}
.mat-badge-medium.mat-badge-below .mat-badge-content {
bottom: -11px;
}
.mat-badge-medium.mat-badge-before .mat-badge-content {
left: -22px;
}
[dir=rtl] .mat-badge-medium.mat-badge-before .mat-badge-content {
left: auto;
right: -22px;
}
.mat-badge-medium.mat-badge-after .mat-badge-content {
right: -22px;
}
[dir=rtl] .mat-badge-medium.mat-badge-after .mat-badge-content {
right: auto;
left: -22px;
}
.mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
left: -11px;
}
[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-before .mat-badge-content {
left: auto;
right: -11px;
}
.mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
right: -11px;
}
[dir=rtl] .mat-badge-medium.mat-badge-overlap.mat-badge-after .mat-badge-content {
right: auto;
left: -11px;
}
.mat-badge-large .mat-badge-content {
width: 28px;
height: 28px;
line-height: 28px;
font-size: 24px;
/* @alternate */
font-size: var(--mat-badge-large-size-text-size, 24px);
}
.mat-badge-large.mat-badge-above .mat-badge-content {
top: -14px;
}
.mat-badge-large.mat-badge-below .mat-badge-content {
bottom: -14px;
}
.mat-badge-large.mat-badge-before .mat-badge-content {
left: -28px;
}
[dir=rtl] .mat-badge-large.mat-badge-before .mat-badge-content {
left: auto;
right: -28px;
}
.mat-badge-large.mat-badge-after .mat-badge-content {
right: -28px;
}
[dir=rtl] .mat-badge-large.mat-badge-after .mat-badge-content {
right: auto;
left: -28px;
}
.mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
left: -14px;
}
[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-before .mat-badge-content {
left: auto;
right: -14px;
}
.mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
right: -14px;
}
[dir=rtl] .mat-badge-large.mat-badge-overlap.mat-badge-after .mat-badge-content {
right: auto;
left: -14px;
}
html {
--mat-badge-background-color: var(--color-brand-primary-100);
--mat-badge-text-color: var(--color-white);
--mat-badge-disabled-state-background-color: #b9b9b9;
--mat-badge-disabled-state-text-color: rgba(0, 0, 0, 0.38);
}
.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-text-color: rgba(0, 0, 0, 0.87);
--mat-bottom-sheet-container-background-color: white;
}
html {
--mat-legacy-button-toggle-text-color: rgba(0, 0, 0, 0.38);
--mat-legacy-button-toggle-state-layer-color: rgba(0, 0, 0, 0.12);
--mat-legacy-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.54);
--mat-legacy-button-toggle-selected-state-background-color: #e0e0e0;
--mat-legacy-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
--mat-legacy-button-toggle-disabled-state-background-color: #eeeeee;
--mat-legacy-button-toggle-disabled-selected-state-background-color: #bdbdbd;
--mat-standard-button-toggle-text-color: rgba(0, 0, 0, 0.87);
--mat-standard-button-toggle-background-color: white;
--mat-standard-button-toggle-state-layer-color: black;
--mat-standard-button-toggle-selected-state-background-color: #e0e0e0;
--mat-standard-button-toggle-selected-state-text-color: rgba(0, 0, 0, 0.87);
--mat-standard-button-toggle-disabled-state-text-color: rgba(0, 0, 0, 0.26);
--mat-standard-button-toggle-disabled-state-background-color: white;
--mat-standard-button-toggle-disabled-selected-state-text-color: rgba(0, 0, 0, 0.87);
--mat-standard-button-toggle-disabled-selected-state-background-color: #bdbdbd;
--mat-standard-button-toggle-divider-color: #e0e0e0;
}
html {
--mat-standard-button-toggle-height: 48px;
}
html {
--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: rgba(0, 0, 0, 0.26);
--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--color-white);
--mat-datepicker-calendar-date-focus-state-background-color: var(--color-brand-primary-100);
--mat-datepicker-calendar-date-hover-state-background-color: var(--color-brand-primary-100);
--mat-datepicker-toggle-active-state-icon-color: var(--color-brand-primary-100);
--mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--color-brand-primary-100), 0.2);
--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
--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-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.38);
--mat-datepicker-calendar-date-today-disabled-state-outline-color: rgba(0, 0, 0, 0.18);
--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: rgba(0, 0, 0, 0.38);
--mat-datepicker-calendar-date-preview-state-outline-color: rgba(0, 0, 0, 0.24);
--mat-datepicker-range-input-separator-color: rgba(0, 0, 0, 0.87);
--mat-datepicker-range-input-disabled-state-separator-color: rgba(0, 0, 0, 0.38);
--mat-datepicker-range-input-disabled-state-text-color: rgba(0, 0, 0, 0.38);
--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-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: rgba(0, 0, 0, 0.26);
--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--color-white);
--mat-datepicker-calendar-date-focus-state-background-color: var(--color-brand-secondary-100);
--mat-datepicker-calendar-date-hover-state-background-color: var(--color-brand-secondary-100);
--mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--color-brand-secondary-100), 0.2);
--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}
.mat-datepicker-content.mat-warn {
--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: rgba(0, 0, 0, 0.26);
--mat-datepicker-calendar-date-today-selected-state-outline-color: var(--color-white);
--mat-datepicker-calendar-date-focus-state-background-color: var(--color-danger-100);
--mat-datepicker-calendar-date-hover-state-background-color: var(--color-danger-100);
--mat-datepicker-calendar-date-in-range-state-background-color: rgba(var(--color-danger-100), 0.2);
--mat-datepicker-calendar-date-in-comparison-range-state-background-color: rgba(249, 171, 0, 0.2);
--mat-datepicker-calendar-date-in-overlap-range-state-background-color: #a8dab5;
--mat-datepicker-calendar-date-in-overlap-range-selected-state-background-color: #46a35e;
}
.mat-datepicker-toggle-active.mat-accent {
--mat-datepicker-toggle-active-state-icon-color: var(--color-brand-secondary-100);
}
.mat-datepicker-toggle-active.mat-warn {
--mat-datepicker-toggle-active-state-icon-color: var(--color-danger-100);
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base {
--mdc-icon-button-state-layer-size: 40px;
width: var(--mdc-icon-button-state-layer-size);
height: var(--mdc-icon-button-state-layer-size);
padding: 8px;
}
.mat-calendar-controls .mat-mdc-icon-button.mat-mdc-button-base .mat-mdc-button-touch-target {
display: none;
}
html {
--mat-divider-color: rgba(0, 0, 0, 0.12);
}
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: rgba(0, 0, 0, 0.04);
--mat-expansion-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
--mat-expansion-header-disabled-state-text-color: rgba(0, 0, 0, 0.26);
--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-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-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: rgba(0, 0, 0, 0.04);
--mat-stepper-header-focus-state-layer-color: rgba(0, 0, 0, 0.04);
--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;
}
html .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);
}
html .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;
}
.mat-sort-header-arrow {
color: #757575;
}
html {
--mat-toolbar-container-background-color: whitesmoke;
--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;
}
.mat-tree {
background: white;
}
.mat-tree-node,
.mat-nested-tree-node {
color: rgba(0, 0, 0, 0.87);
}
.mat-tree-node {
min-height: 48px;
}
: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: -moz-fit-content;
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: -moz-fit-content;
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;
}
body {
margin: 0px;
}
.info-tooltip {
display: inline-flex;
position: inherit;
vertical-align: text-bottom;
cursor: pointer;
background-color: transparent;
}
/*.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;
}
}*/
.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: -moz-fit-content;
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: 0.6875rem;
}
.btn.btn-action[data-close]::after {
content: "";
height: 2rem;
aspect-ratio: 1;
mask-image: var(--button-icon-close);
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;
/*&: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-info-mini::after {
content: "";
mask-image: var(--button-icon-info);
mask-size: cover;
background-color: currentColor;
color: var(--color-brand-primary-100);
height: 1.5rem;
aspect-ratio: 1;
}
/*.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%;
}