/*
Der Dialog Header wird für die Anzeige des Titels und der Buttons benötigt.
Er ist "sticky", damit er auch bei größeren Formularen am oberen Ende der View immer sichtbar bleibt.
*/

.ic-sticky-dialog-header {
    width: 100%;
    position: sticky;
    top: -25px;
    z-index: 10;
    padding: 10px;
    padding-bottom: 15px !important;
    /* background-color: #EDEBE9; */
    background-color: #FFFFFF;
}

/*
Der Content Header wird für die Anzeige des Titels und der Buttons benötigt.
Er ist "sticky", damit er auch bei größeren Formularen am oberen Ende der View immer sichtbar bleibt.
*/

.ic-sticky-content-header {
    width: 100%;
    position: sticky;
    top: -25px;
    z-index: 10;
    padding: 10px;
    /* background-color: #EDEBE9; */
    background-color: #F3F2F1;
}


/* Switch-Button ist in der Standardfarbe schlecht erkennbar, wenn er on ist */
.rz-switch.rz-switch-checked .rz-switch-circle {
    background-color: var(--rz-success);
}

/* Die Breite des Content soll nicht beschränkt sein, damit große Bildschirme ausgenutzt werden können */
.rz-display-flex {
    width: 100% !important;
    max-width: 100% !important;
}

:root {
    --rz-white: #ffffff;
    --rz-black: #000000;
    --rz-base-50: #f5f5f5;
    --rz-base-100: #f3f2f1;
    --rz-base-200: #edebe9;
    --rz-base-300: #d2d0ce;
    --rz-base-400: #a19f9d;
    --rz-base-500: #8a8886;
    --rz-base-600: #605e5c;
    --rz-base-700: #616161;
    --rz-base-800: #323130;
    --rz-base-900: #201f1e;
    --rz-primary: hsl(0, 70%, 45%);
    --rz-primary-light: hsl(0, 72%, 71%);
    --rz-primary-lighter: hsl(207, 69%, 92%);
    --rz-primary-dark: hsl(0, 100%, 37%);
    --rz-primary-darker: hsl(0, 100%, 31%);
    --rz-secondary: hsl(30, 2%, 53%);
    --rz-secondary-light: hsl(30, 2%, 77%);
    --rz-secondary-lighter: hsl(60, 3%, 94%);
    --rz-secondary-dark: hsl(20, 1%, 48%);
    --rz-secondary-darker: hsl(20, 1%, 40%);
    --rz-info: hsl(184, 100%, 38%);
    --rz-info-light: hsl(184, 62%, 69%);
    --rz-info-lighter: hsl(182, 61%, 92%);
    --rz-info-dark: hsl(184, 100%, 35%);
    --rz-info-darker: hsl(184, 100%, 29%);
    --rz-success: hsl(120, 77%, 27%);
    --rz-success-light: hsl(120, 29%, 64%);
    --rz-success-lighter: hsl(120, 29%, 91%);
    --rz-success-dark: hsl(120, 78%, 25%);
    --rz-success-darker: hsl(120, 77%, 21%);
    --rz-warning: hsl(47, 100%, 52%);
    --rz-warning-light: hsl(47, 100%, 76%);
    --rz-warning-lighter: hsl(47, 100%, 94%);
    --rz-warning-dark: hsl(46, 92%, 47%);
    --rz-warning-darker: hsl(47, 92%, 39%);
    --rz-danger: hsl(357, 62%, 40%);
    --rz-danger-light: hsl(357, 41%, 70%);
    --rz-danger-lighter: hsl(356, 40%, 92%);
    --rz-danger-dark: hsl(357, 63%, 36%);
    --rz-danger-darker: hsl(357, 62%, 30%);
    --rz-on-primary: hsl(0, 0%, 100%);
    --rz-on-primary-light: hsl(0, 0%, 100%);
    --rz-on-primary-lighter: hsl(0, 100%, 31%);
    --rz-on-primary-dark: hsl(0, 0%, 100%);
    --rz-on-primary-darker: hsl(0, 0%, 100%);
    --rz-on-secondary: hsl(0, 0%, 100%);
    --rz-on-secondary-light: hsl(0, 0%, 100%);
    --rz-on-secondary-lighter: hsl(20, 1%, 40%);
    --rz-on-secondary-dark: hsl(0, 0%, 100%);
    --rz-on-secondary-darker: hsl(0, 0%, 100%);
    --rz-on-info: hsl(0, 0%, 100%);
    --rz-on-info-light: hsl(0, 0%, 100%);
    --rz-on-info-lighter: hsl(184, 100%, 29%);
    --rz-on-info-dark: hsl(0, 0%, 100%);
    --rz-on-info-darker: hsl(0, 0%, 100%);
    --rz-on-success: hsl(0, 0%, 100%);
    --rz-on-success-light: hsl(0, 0%, 100%);
    --rz-on-success-lighter: hsl(120, 77%, 21%);
    --rz-on-success-dark: hsl(0, 0%, 100%);
    --rz-on-success-darker: hsl(0, 0%, 100%);
    --rz-on-warning: hsl(30, 3%, 12%);
    --rz-on-warning-light: hsl(30, 3%, 12%);
    --rz-on-warning-lighter: hsl(47, 92%, 39%);
    --rz-on-warning-dark: hsl(30, 3%, 12%);
    --rz-on-warning-darker: hsl(0, 0%, 100%);
    --rz-on-danger: hsl(0, 0%, 100%);
    --rz-on-danger-light: hsl(0, 0%, 100%);
    --rz-on-danger-lighter: hsl(357, 62%, 30%);
    --rz-on-danger-dark: hsl(0, 0%, 100%);
    --rz-on-danger-darker: hsl(0, 0%, 100%);
    --rz-series-1: hsl(206, 100%, 42%);
    --rz-series-2: hsl(253, 100%, 81%);
    --rz-series-3: hsl(16, 99%, 43%);
    --rz-series-4: hsl(44, 100%, 50%);
    --rz-series-5: hsl(57, 100%, 50%);
    --rz-series-6: hsl(120, 77%, 27%);
    --rz-series-7: hsl(266, 64%, 22%);
    --rz-series-8: hsl(206, 100%, 31%);
    --rz-series-9: hsl(206, 71%, 56%);
    --rz-series-10: hsl(253, 100%, 86%);
    --rz-series-11: hsl(16, 74%, 57%);
    --rz-series-12: hsl(43, 100%, 63%);
    --rz-series-13: hsl(57, 100%, 72%);
    --rz-series-14: hsl(120, 35%, 46%);
    --rz-series-15: hsl(265, 25%, 41%);
    --rz-series-16: hsl(206, 48%, 48%);
    --rz-series-17: hsl(206, 72%, 71%);
    --rz-series-18: hsl(254, 100%, 91%);
    --rz-series-19: hsl(16, 74%, 71%);
    --rz-series-20: hsl(43, 100%, 75%);
    --rz-series-21: hsl(57, 100%, 81%);
    --rz-series-22: hsl(120, 30%, 64%);
    --rz-series-23: hsl(267, 18%, 61%);
    --rz-series-24: hsl(205, 44%, 65%);
    --blazor-load-percentage: 0%;
    --blazor-load-percentage-text: "Loading";
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.loading-progress {
    position: relative;
    display: block;
    width: 8rem;
    height: 8rem;
    margin: 20vh auto 1rem auto;
}

.loading-progress circle {
    fill: none;
    stroke: #e0e0e0;
    stroke-width: 0.6rem;
    transform-origin: 50% 50%;
    transform: rotate(-90deg);
}

.loading-progress circle:last-child {
    stroke: #1b6ec2;
    stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
    transition: stroke-dasharray 0.05s ease-in-out;
}

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    inset: calc(20vh + 3.25rem) 0 auto 0.2rem;
}

.loading-progress-text:after {
    content: var(--blazor-load-percentage-text, "Loading");
}


.border-divider {
    border-bottom: 1px solid var(--rz-base-300);
}

/* DJH */