@import url("open-iconic/font/css/open-iconic-bootstrap.min.css");
/* CSS Vars defined at root level */
/* -------------------------------------------------------------------------- */
:root {
  /* Colors: Primary */
  --color-primary-400: #ebbb00;
  --color-primary-300: #ffcb00;
  --color-primary-200: #ffd533;
  --color-primary-100: #ffea99;
  --color-primary: var(--color-primary-300);
  /* Colors: Secondary */
  --color-secondary-400: #157a75;
  --color-secondary-300: #1ca69f;
  --color-secondary-200: #21c4bc;
  --color-secondary-100: #bef4f1;
  --color-secondary: var(--color-secondary-300);
  /* Colors: Grey */
  --color-grey-900: #111213;
  --color-grey-800: #1d1e20;
  --color-grey-700: #2f3237;
  --color-grey-600: #5e636e;
  --color-grey-500: #8f96a3;
  --color-grey-400: #c2c9d6;
  --color-grey-300: #dee3ed;
  --color-grey-200: #f1f3f9;
  --color-grey-100: #f8f9fc;
  --color-grey: var(--color-grey-800);
  /* Colors: Danger */
  --color-danger-400: #981a26;
  --color-danger-300: #dc3545;
  --color-danger-200: #e25a67;
  --color-danger-100: #fbe9eb;
  --color-danger: var(--color-danger-300);
  /* Colors: Warning */
  --color-warning-400: #a26100;
  --color-warning-300: #ff8a00;
  --color-warning-200: #ffb84c;
  --color-warning-100: #fff5ea;
  --color-warning: var(--color-warning-300);
  /* Colors: Success */
  --color-success-400: #165a25;
  --color-success-300: #28a745;
  --color-success-200: #40bf5d;
  --color-success-100: #def7e4;
  --color-success: var(--color-success-300);
  /* Colors: Information */
  --color-information-400: #0c5864;
  --color-information-300: #17a2b8;
  --color-information-200: #19b4cc;
  --color-information-100: #dbf6fa;
  --color-information: var(--color-information-300);
  --color-text: var(--color-grey);
  --color-text-on-grey: #ffffff;
  --color-text-on-danger: #ffffff;
  --color-text-light: var(--color-text-on-grey);
  /* Colors: Machine State */
  /* Specific machine state colors which can match existing colors, but don't have to. */
  --ctfy-state-color--error: #dc3545;
  --ctfy-state-color--change: #ffa800;
  --ctfy-state-color--empty: #ffcb00;
  --ctfy-state-color--manual: #9fc52e;
  --ctfy-state-color--running: #40bf5d;
  --ctfy-state-color--prepare: #17a2b8;
  --ctfy-state-color--standby: #c2c9d6;
  --ctfy-state-color--on: #8f96a3;
  --ctfy-state-color--off: #000000;
  --ctfy-state-color--preparecleaningmanual: #28a745;
  /* Spacing */
  --ctfy-space--0: 0;
  --ctfy-space--1: 1px;
  --ctfy-space--012: 0.125rem;
  --ctfy-space--025: 0.25rem;
  --ctfy-space--050: 0.5rem;
  --ctfy-space--075: 0.75rem;
  --ctfy-space--100: 1rem;
  --ctfy-space--125: 1.25rem;
  --ctfy-space--150: 1.5rem;
  --ctfy-space--200: 2rem;
  --ctfy-space--300: 3rem;
  /* Z-Index */
  --ctfy-flyout-ZIndex: 100;
}


/*  === Neues Coatify CSS === */

/* Coatify-Card CSS */
.coatify-card {
    background-color: var(--color-grey-200);
    border: 1px solid var(--color-grey-200);
    border-radius: .25rem;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}


/* Maximago-Coatify-CSS-Werte*/

.ctfy-page {
  --_page-MaxWidth: var(--ctfy-page-MaxWidth, 1760px);
  --_page-Padding: var(--ctfy-page-Padding, 0 1rem);
  --_page__main-Padding: var(--ctfy-page__main-Padding, 1rem 0);
  display: flex;
  flex-flow: column nowrap;
  flex: 1 1 0%;
  padding: var(--_page-Padding);
  width: 100%;
  max-width: var(--_page-MaxWidth);
  position: relative;
  align-self: center;
}

.ctfy-page__header {
  flex: none;
  padding: 0.75rem 0 1rem 0;
}

.ctfy-page__main {
  flex: 1 1 0%;
  top: 0;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px) {
  .ctfy-page {
    --_page-Padding: var(--ctfy-page-Padding, 0 2rem);
    --_page__main-Padding: var(--ctfy-page__main-Padding, 1.5rem 0);
  }
  .ctfy-panel__header {
    flex-flow: row nowrap;
  }
}
@media (min-width: 1280px) {
  .ctfy-page {
    --_page-Padding: var(--ctfy-page-Padding, 0 2rem);
    --_page__main-Padding: var(--ctfy-page__main-Padding, 2rem 0);
  }
}
.ctfy-panel {
  background: #fff;
  min-width: 15rem;
  min-height: 3rem;
}

.ctfy-panel__header {
  padding: 1rem;
  display: flex;
  flex-flow: column nowrap;
  align-items: start;
  gap: 1rem;
}

@media (min-width: 768px) {
  .ctfy-panel__header {
    flex-flow: row nowrap;
  }
}
.ctfy-table {
  --_ctfy-table__row-GridTemplateColumns: var(--ctfy-table-GridTemplateColumns, 1fr);
  background: #fff;
  display: grid;
  grid-template-columns: var(--_ctfy-table__row-GridTemplateColumns);
  position: relative;
  overflow: auto;
  border-top: 1px solid var(--color-grey-300);
}

.ctfy-table__row {
  display: contents;
}

.ctfy-table [role=gridcell] {
  border-bottom: 1px solid var(--color-grey-300);
  word-break: break-word;
  font-size: 1rem;
  line-height: 1.5rem;
  min-height: 3rem;
  padding: 1.25rem 0.5rem;
}

.ctfy-table [role=gridcell]:first-child {
  padding-left: 1rem;
}

.ctfy-table [role=gridcell]:last-child {
  padding-right: 1rem;
}

.ctfy-table [role=columnheader] {
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1rem;
  text-transform: uppercase;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--color-grey-300);
  background: hsla(0, 0%, 100%, 0.8);
  backdrop-filter: blur(3px);
}

.ctfy-table [role=columnheader][hidden] {
  visibility: hidden;
}

.ctfy-table [role=columnheader]:first-of-type {
  padding: 20px 10px 20px 24px;
}

.ctfy-table [role=columnheader]:last-of-type {
  padding: 20px 24px 20px 10px;
}

/* Reusable utility (`.u-[...]`) classes */
/* -------------------------------------------------------------------------- */
.u-h-auto {
  height: auto;
}

.u-w-auto {
  width: auto;
}

.u-h-100 {
  height: 100%;
}

.u-w-100 {
  width: 100%;
}

.u-min-h-0 {
  min-height: 0;
}

.u-min-w-0 {
  min-width: 0;
}

.u-max-h-100 {
  max-height: 100%;
}

.u-max-w-100 {
  max-width: 100%;
}

.u-overflow-auto {
  overflow: auto;
}

.u-overflow-hidden {
  overflow: hidden;
}

/* Utility classes : Padding */
/* -------------------------------------------------------------------------- */
/* top */
.ctfy-pt--100 {
  padding-block-start: var(--ctfy-space--100);
}

.ctfy-pt--150 {
  padding-block-start: var(--ctfy-space--150);
}

.ctfy-pt--200 {
  padding-block-start: var(--ctfy-space--200);
}

/* bottom */
.ctfy-pb--100 {
  padding-block-end: var(--ctfy-space--100);
}

.ctfy-pb--150 {
  padding-block-end: var(--ctfy-space--150);
}

.ctfy-pb--200 {
  padding-block-end: var(--ctfy-space--200);
}

/* Coatify prefixed reusable classes (to avoid 3rd party naming collisions    */
/* -------------------------------------------------------------------------- */
.ctfy-button {
  --_ctfy-button-Background: var(--ctfy-button-Background, transparent);
  --_ctfy-button-Color: var(--ctfy-button-Color, var(--color-grey));
  --_ctfy-button-Width: var(--ctfy-button-Width, auto);
  --_ctfy-button-MinWidth: var(--ctfy-button-MinWidth, 0);
  --_ctfy-button-MaxWidth: var(--ctfy-button-MaxWidth, none);
  --_ctfy-button-Height: var(--ctfy-button-Height, 3rem);
  --_ctfy-button-MinHeight: var(--ctfy-button-MinHeight, 0);
  --_ctfy-button-MaxHeight: var(--ctfy-button-MaxHeight, none);
  --_ctfy-button-Padding: var(--ctfy-button-Padding, 0.75rem 1.5rem);
  --_ctfy-button-FontSize: var(--ctfy-button-FontSize, 1rem);
  --_ctfy-button-LineHeight: var(--ctfy-button-LineHeight, 1.5rem);
  --_ctfy-button-FontWeight: var(--ctfy-button-FontWeight, 700);
  --_ctfy-button-JustifyContent: var(--ctfy-button-JustifyContent, center);
  display: flex;
  align-items: center;
  justify-content: var(--_ctfy-button-JustifyContent);
  width: var(--_ctfy-button-Width);
  min-width: var(--_ctfy-button-MinWidth);
  max-width: var(--_ctfy-button-MaxWidth);
  height: var(--_ctfy-button-Height);
  min-height: var(--_ctfy-button-MinHeight);
  max-height: var(--_ctfy-button-MaxHeight);
  padding: var(--_ctfy-button-Padding);
  background: var(--_ctfy-button-Background);
  color: var(--_ctfy-button-Color);
  border: 10px;
  border-radius: 0.25rem;
  font-size: var(--_ctfy-button-FontSize);
  line-height: var(--_ctfy-button-LineHeight);
  font-weight: var(--_ctfy-button-FontWeight);
  transition: background 0.5s ease-in-out;
}

.ctfy-button:hover {
  --_ctfy-button-Background: var(--ctfy-button-Background--hover, transparent);
  --_ctfy-button-Color: var(--ctfy-button-Color--hover, inherit);
  cursor: pointer;
}

.ctfy-button:active {
  --_ctfy-button-Background: var(--ctfy-button-Background--active, transparent);
  --_ctfy-button-Color: var(--ctfy-button-Color--active, inherit);
}

.ctfy-button:disabled,
.ctfy-button.disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

.ctfy-button--primary {
  --ctfy-button-Background: var(--color-primary);
  --ctfy-button-Background--hover: var(--color-primary-200);
  --ctfy-button-Background--active: var(--color-primary-400);
}

.ctfy-button--secondary {
  --ctfy-button-Background: var(--color-grey-300);
  --ctfy-button-Background--hover: var(--color-grey-200);
  --ctfy-button-Background--active: var(--color-grey-400);
}

.ctfy-button--tertiary {
  /* --ctfy-button-Background: transparent; */
  --ctfy-button-Background--hover: var(--color-grey-200);
  --ctfy-button-Background--active: var(--color-grey-400);
}

.ctfy-button--icon-only {
  --_ctfy-button-Padding: 0.75rem;
  --_ctfy-button-MinWidth: var(--ctfy-button-MinWidth, 48px);
}

.ctfy-button--delete {
  --ctfy-button-Background: var(--color-danger);
  --ctfy-button-Background--hover: var(--color-danger-200);
  --ctfy-button-Background--active: var(--color-danger-400);
  --ctfy-button-Color: var(--color-text-on-danger);
  --ctfy-button-Color--hover: var(--color-text-on-danger);
  --ctfy-button-Color--active: var(--color-text-on-danger);
}

.ctfy-border-top {
  border-top: 1px solid var(--color-grey-300);
}

.ctfy-border-bottom {
  border-bottom: 1px solid var(--color-grey-300);
}

.ctfy-divider-hor {
  width: 1px;
  background-color: var(--color-grey-300);
}

.ctfy-divider-vert {
  height: 1px;
  background-color: var(--color-grey-300);
}

.ctfy-card {
  background-color: var(--ctfy-card-BackgroundColor, #fff);
  border: var(--ctfy-card-Border, 1px solid var(--color-grey-300));
}

.ctfy-flyout {
  --__ctfy-flyout-BoxShadow: 0px 2px 4px rgba(47, 50, 55, 0.15), 8px 4px 24px rgba(47, 50, 55, 0.15);
  --_ctfy-flyout-BackgroundColor: var(--ctfy-flyout-BackgroundColor, #fff);
  --_ctfy-flyout-Color: var(--ctfy-flyout-Color, var(--color-text));
  --_ctfy-flyout-BoxShadow: var(--ctfy-flyout-BoxShadow, var(--__ctfy-flyout-BoxShadow));
  --_ctfy-flyout-Padding: var(--ctfy-flyout-Padding, 1rem);
  --_ctfy-flyout-MaxWidth: var(--ctfy-flyout-MaxWidth, 75vw);
  --_ctfy-flyout-MaxHeight: var(--ctfy-flyout-MaxHeight, 75vh);
  --_ctfy-flyout-Overflow: var(--ctfy-flyout-Overflow, auto);
  display: var(--_ctfy-flyout-Display, block);
  visibility: var(--_ctfy-flyout-Visibility, visible);
  pointer-events: var(--_ctfy-flyout-PointerEvents, auto);
  background-color: var(--_ctfy-flyout-BackgroundColor);
  color: var(--_ctfy-flyout-Color);
  box-shadow: var(--_ctfy-flyout-BoxShadow);
  padding: var(--_ctfy-flyout-Padding);
  max-width: var(--_ctfy-flyout-MaxWidth);
  max-height: var(--_ctfy-flyout-MaxHeight);
  overflow: var(--_ctfy-flyout-Overflow);
  z-index: var(--ctfy-flyout-ZIndex);
}

.ctfy-flyout.invisible {
  --_ctfy-flyout-Visibility: hidden;
  --_ctfy-flyout-PointerEvents: none;
}

.ctfy-flyout.invisible + .ctfy-flyout-overlay {
  --_ctfy-flyout-overlay-Visibility: hidden;
  --_ctfy-flyout-overlay-PointerEvents: none;
}

.ctfy-flyout.hidden {
  --_ctfy-flyout-Display: none;
}

.ctfy-flyout.hidden + .ctfy-flyout-overlay {
  --_ctfy-flyout-overlay-Display: none;
}

.ctfy-flyout-overlay {
  display: var(--_ctfy-flyout-overlay-Display, block);
  visibility: var(--_ctfy-flyout-overlay-Visibility, visible);
  pointer-events: var(--_ctfy-flyout-overlay-PointerEvents, auto);
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: calc(var(--ctfy-flyout-ZIndex) - 1);
  background: transparent;
}

.ctfy-chart-tooltip {
  background-color: var(--color-grey);
  color: var(--color-text-on-grey);
  padding: 0.25rem 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  border-radius: 2rem;
}

.ctfy-input {
  --_ctfy-input-Background: var(--ctfy-input-Background, #fff);
  --_ctfy-input-BorderWidth: var(--ctfy-input-BorderWidth, 1px);
  --_ctfy-input-BorderColor: var(--ctfy-input-BorderColor, var(--color-grey-500));
  --_ctfy-input-Color: var(--ctfy-input-Color, inherit);
  --_ctfy-input-Width: var(--ctfy-input-Width, auto);
  --_ctfy-input-MinWidth: var(--ctfy-input-MinWidth, 0);
  --_ctfy-input-MaxWidth: var(--ctfy-input-MaxWidth, none);
  --_ctfy-input-JustifyContent: var(--ctfy-input-JustifyContent, center);
  --_ctfy-input-Height: var(--ctfy-input-Height, 3.5rem);
  --_ctfy-input-MinHeight: var(--ctfy-input-MinHeight, 0);
  --_ctfy-input-MaxHeight: var(--ctfy-input-MaxHeight, none);
  --_ctfy-input-Padding: var(--ctfy-input-Padding, 1rem 1.5rem);
  --_ctfy-input-FontSize: var(--ctfy-input-FontSize, 1rem);
  --_ctfy-input-LineHeight: var(--ctfy-input-LineHeight, 1.5rem);
  --_ctfy-input-FontWeight: var(--ctfy-input-FontWeight, normal);
  display: flex;
  align-items: center;
  background: var(--_ctfy-input-Background);
  border-style: solid;
  border-width: var(--_ctfy-input-BorderWidth);
  border-color: var(--_ctfy-input-BorderColor);
  color: var(--_ctfy-input-Color);
  width: var(--_ctfy-input-Width);
  min-width: var(--_ctfy-input-MinWidth);
  max-width: var(--_ctfy-input-MaxWidth);
  justify-content: var(--_ctfy-input-JustifyContent);
  height: var(--_ctfy-input-Height);
  min-height: var(--_ctfy-input-MinHeight);
  max-height: var(--_ctfy-input-MaxHeight);
  padding: var(--_ctfy-input-Padding);
  font-size: var(--_ctfy-input-FontSize);
  line-height: var(--_ctfy-input-LineHeight);
  font-weight: var(--_ctfy-input-FontWeight);
}

.ctfy-input:hover {
  --ctfy-input-BorderColor: var(--ctfy-input-BorderColor--hover, var(--color-information));
  cursor: pointer;
}

.ctfy-input.valid.modified:not([type=checkbox]) {
  outline: none;
}

.ctfy-input--secondary {
  --ctfy-input-BorderColor: var(--color-grey-300);
  --ctfy-input-BorderColor--hover: var(--color-grey-400);
}

.ctfy-floating-control-wrapper {
  position: relative;
  margin: 24px 0;
}

.ctfy-floating-control-wrapper .e-float-text.e-label-top {
  font-size: 12px;
  transform: translate3d(0, 8px, 0) scale(1);
}

/**
 * The arrow stays centered at the bottom, so it might
 * not be appropriate for every scenario, e.g. when the
 * tooltip is positioned below the marker or the likes.
 */
.ctfy-chart-tooltip.arrow-bottom {
  position: relative;
}

.ctfy-chart-tooltip.arrow-bottom:before {
  position: absolute;
  content: "";
  bottom: -11px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 11px 11px 0 11px;
  border-color: var(--color-grey) transparent transparent transparent;
}

/* Design system adopted classes */
/* -------------------------------------------------------------------------- */
/* Text 050 */
.text-050 {
  font-size: 0.75rem;
  line-height: 1rem;
}

/* Text 100 */
.text-100 {
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Text 100 Bold */
.text-100-bold {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
}

/* Text 200 */
.text-200 {
  font-size: 1.5rem;
  line-height: 2rem;
}

/* Text 200 Bold */
.text-200-bold {
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 700;
}

/* Text 300 */
.text-300 {
  font-size: 2rem;
  line-height: 2.5rem;
}

.text-bold {
  font-weight: 700;
}

.u-text-truncate {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.u-text-nowrap {
  white-space: nowrap;
}

@supports (-webkit-line-clamp: 1) {
  .u-text-truncate-multiline {
    display: -webkit-box;
    -webkit-line-clamp: var(--lines);
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
  }
}
.u-text-center {
  text-align: center;
}

/* Color classes */
/* -------------------------------------------------------------------------- */
.color-primary {
  color: var(--color-primary);
}

.color-secondary {
  color: var(--color-secondary);
}

.color-danger {
  color: var(--color-danger);
}

.color-warning {
  color: var(--color-warning);
}

.color-success {
  color: var(--color-success);
}

.color-information {
  color: var(--color-information);
}

.color-grey-600 {
  color: var(--color-grey-600);
}

html,
body {
  height: 100%;
  overflow: hidden !important;
}

body,
button,
input,
optgroup,
select,
textarea {
  font-family: "PT Sans", sans-serif;
  color: var(--color-text);
}

#app {
  position: relative;
}

/* Blazor: Error */
/* -------------------------------------------------------------------------- */
.valid.modified:not([type=checkbox]) {
  outline: 1px solid #26b050;
}

.invalid {
  outline: 1px solid red;
}

.validation-message {
  color: red;
  font-size: 12px;
  line-height: 16px;
  padding: 8px 24px 0;
}

.validation-message + .validation-message {
  padding: 0 24px 0;
}

.validation-hint {
  color: var(--color-grey-600);
  font-size: 12px;
  line-height: 16px;
  padding: 8px 24px 0;
}

.validation-message + .validation-hint {
  padding: 0 24px 0;
}

#blazor-error-ui {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(17, 18, 19, 0.18);
  backdrop-filter: none;
  z-index: 2000;
}

#blazor-error-ui.visible,
#blazor-error-ui[style*="display: block"],
#blazor-error-ui[style*="display:block"] {
  display: flex !important;
}

#blazor-error-ui .blazor-error-ui__card {
  width: min(100%, 32rem);
  background: linear-gradient(180deg, #ffd533 0%, #ffcb00 100%);
  color: #111213;
  border-radius: 16px;
  box-shadow: 0 18px 45px rgba(17, 18, 19, 0.22);
  padding: 1.5rem;
  border: 1px solid #ebbb00;
}

#blazor-error-ui[data-state="error"] .blazor-error-ui__card {
  border-color: #111213;
}

#blazor-error-ui .blazor-error-ui__title {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

#blazor-error-ui .blazor-error-ui__message {
  line-height: 1.5;
  margin-bottom: 1rem;
}

#blazor-error-ui .blazor-error-ui__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

#blazor-error-ui .blazor-error-ui__button {
  border: 0;
  border-radius: 999px;
  background: #111213;
  color: #ffcb00;
  cursor: pointer;
  font-weight: 700;
  padding: 0.7rem 1.2rem;
  text-decoration: none;
}

#blazor-error-ui .blazor-error-ui__button:hover,
#blazor-error-ui .blazor-error-ui__button:focus {
  color: #ffcb00;
  text-decoration: none;
}

#blazor-error-ui .blazor-error-ui__button--secondary {
  background: #ffcb00;
  color: #111213;
  border: 1px solid #111213;
}

.connectivity-banner {
  background: #ffcb00;
  border-bottom: 1px solid #ebbb00;
  color: #111213;
  font-size: 0.9rem;
  line-height: 1.3;
  padding: 0.45rem 1.25rem;
  text-align: center;
}

.connectivity-banner strong {
  font-weight: 700;
}

.mud-alert.coatify-update-banner {
  background: var(--color-primary-300);
  border: 1px solid var(--color-primary-400);
  color: var(--color-grey-900);
}

.mud-alert.coatify-update-banner .mud-alert-message,
.mud-alert.coatify-update-banner .mud-typography,
.mud-alert.coatify-update-banner .mud-alert-icon {
  color: var(--color-grey-900);
}

.mud-alert.coatify-update-banner .mud-button-root {
  color: var(--color-grey-900);
}

.mud-alert.coatify-update-banner .mud-button-outlined {
  border-color: var(--color-grey-900);
}

/* RESPONSIVE: Medium size and up */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  :root {
    --page-content-max-width: 1812px;
  }
  .main > div {
    padding-left: 2rem !important;
    padding-right: 1.5rem !important;
  }
}
/*
    SYNCFUSION BLAZOR COMPONENTS

    A temporary solution for styling.
*/
body .e-float-input:first-child,
body .e-float-input.e-control-wrapper:first-child {
  margin-top: 0;
}

body .e-float-input,
body .e-float-input.e-control-wrapper {
  line-height: 1.4;
  margin-bottom: 0;
  margin-top: 24px;
  padding-top: 0;
  position: relative;
  width: 100%;
}

body .e-input-group,
body .e-input-group.e-control-wrapper,
body .e-float-input,
body .e-float-input.e-input-group,
body .e-float-input.e-control-wrapper,
body .e-float-input.e-input-group.e-control-wrapper {
  color: var(--color-grey-800);
}

/* Input Elements */
body .e-input:not(:valid),
body .e-input:valid,
body .e-float-input.e-control-wrapper input:not(:valid),
body .e-float-input.e-control-wrapper input:valid,
body .e-float-input input:not(:valid),
body .e-float-input input:valid,
body .e-input-group input:not(:valid),
body .e-input-group input:valid,
body .e-input-group.e-control-wrapper input:not(:valid),
body .e-input-group.e-control-wrapper input:valid,
body .e-float-input.e-control-wrapper textarea:not(:valid),
body .e-float-input.e-control-wrapper textarea:valid,
body .e-float-input textarea:not(:valid),
body .e-float-input textarea:valid,
body .e-input-group.e-control-wrapper textarea:not(:valid),
body .e-input-group.e-control-wrapper textarea:valid,
body .e-input-group textarea:not(:valid),
body .e-input-group textarea:valid {
  font-size: 16px;
  height: 56px;
}

/*
    Input : Floating label
*/
body label.e-float-text,
body .e-float-input label.e-float-text,
body .e-float-input.e-control-wrapper label.e-float-text,
body .e-float-input:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom,
body .e-float-input.e-control-wrapper:not(.e-input-focus) input:not(:focus):valid ~ label.e-float-text.e-label-bottom {
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  left: 0;
  overflow: hidden;
  padding-left: 24px;
  pointer-events: none;
  position: absolute;
  text-overflow: ellipsis;
  top: 0;
  transform: translate3d(0, 18px, 0) scale(1);
  transform-origin: left top;
  transition: 0.25s cubic-bezier(0.25, 0.8, 0.25, 1);
  user-select: none;
  white-space: nowrap;
  width: 100%;
}

/*
    Input : Floating label
    Focused / Has value
*/
body .e-float-input input:valid ~ label.e-float-text,
body .e-float-input input:focus ~ label.e-float-text,
body .e-float-input input ~ label.e-label-top.e-float-text,
body .e-float-input input[readonly] ~ label.e-label-top.e-float-text,
body .e-float-input input[disabled] ~ label.e-label-top.e-float-text,
body .e-float-input input label.e-float-text.e-label-top,
body .e-float-input.e-control-wrapper input:focus ~ label.e-float-text,
body .e-float-input.e-control-wrapper input:valid ~ label.e-float-text,
body .e-float-input.e-control-wrapper input ~ label.e-label-top.e-float-text,
body .e-float-input.e-control-wrapper input[readonly] ~ label.e-label-top.e-float-text,
body .e-float-input.e-control-wrapper input[disabled] ~ label.e-label-top.e-float-text,
body .e-float-input.e-control-wrapper input label.e-float-text.e-label-top,
body .e-float-input.e-control-wrapper.e-input-focus input ~ label.e-float-text,
body .e-float-input.e-input-focus input ~ label.e-float-text {
  font-size: 12px;
  padding-right: 0;
  transform: translate3d(0, 8px, 0) scale(1);
}

body .e-float-input.e-error label.e-float-text,
body .e-float-input.e-control-wrapper.e-error label.e-float-text,
body .e-float-input.e-error input:focus ~ label.e-float-text,
body .e-float-input.e-control-wrapper.e-error input:focus ~ label.e-float-text,
body .e-float-input.e-error.e-input-focus input ~ label.e-float-text,
body .e-float-input.e-control-wrapper.e-error.e-input-focus input ~ label.e-float-text,
body .e-float-input.e-error textarea:focus ~ label.e-float-text,
body .e-float-input.e-control-wrapper.e-error textarea:focus ~ label.e-float-text {
  color: var(--color-grey-600);
}

body .e-input-group.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
body .e-input-group.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
body .e-float-input.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
body .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled),
body .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
body .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) input:not([disabled]),
body .e-float-input.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]),
body .e-float-input.e-control-wrapper.e-input-focus:hover:not(.e-input-group):not(.e-success):not(.e-warning):not(.e-error):not(.e-disabled) textarea:not([disabled]) {
  border-color: var(--color-information-300);
  box-shadow: none;
}

body .e-input-group.e-input-focus:not(.e-success):not(.e-warning):not(.e-error),
body .e-input-group.e-control-wrapper.e-input-focus:not(.e-success):not(.e-warning):not(.e-error) {
  border-color: var(--color-information-300);
  box-shadow: none;
  transition: none;
  border-radius: 0;
}

/*
Input : Floating label
Input control
*/
body input.e-input,
body .e-input-group input.e-input,
body .e-input-group input,
body .e-input-group.e-control-wrapper input.e-input,
body .e-input-group.e-control-wrapper input,
body .e-float-input input.e-input,
body .e-float-input input,
body .e-float-input.e-control-wrapper input.e-input,
body .e-float-input.e-control-wrapper input,
body .e-input-group input.e-input:focus,
body .e-input-group.e-control-wrapper input.e-input:focus,
body .e-float-input.e-control-wrapper input:focus,
body .e-float-input input:focus,
body .e-input-group.e-input-focus input.e-input,
body .e-input-group.e-control-wrapper.e-input-focus input.e-input,
body .e-float-input.e-control-wrapper.e-input-focus input,
body .e-float-input.e-input-focus input {
  padding: 16px 0 0 24px;
  text-indent: 0;
}

body input.e-input,
body .e-input-group input.e-input,
body .e-input-group input,
body .e-input-group.e-control-wrapper input.e-input,
body .e-input-group.e-control-wrapper input,
body .e-float-input input,
body .e-float-input.e-input-group input body .e-float-input.e-control-wrapper input,
body .e-float-input.e-control-wrapper.e-input-group input,
body .e-input-group,
body .e-input-group.e-control-wrapper,
body .e-float-input,
body .e-float-input.e-control-wrapper {
  border-radius: 0;
}

/* Dropdown */
body .e-input-group.e-control-wrapper.e-ddl .e-input[readonly],
body .e-float-input.e-control-wrapper.e-ddl input[readonly] {
  color: var(--color-grey-800);
}

/* SYNCFUSION BLAZOR */
.e-control,
.e-css {
  font-family: "PT Sans", sans-serif;
}

/* BUTTON : SECONDARY (default) */
body .e-btn,
body .e-css.e-btn {
  min-width: 0;
  max-width: none;
  height: 3rem;
  min-height: 0;
  max-height: none;
  padding: 0.75rem 1.5rem;
  background: var(--color-grey-300);
  color: var(--color-grey);
  border: 0;
  font-family: "PT Sans", sans-serif;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  border-radius: 0;
  box-shadow: none;
}

body .e-btn:hover,
body .e-css.e-btn:hover,
body .e-btn:focus,
body .e-css.e-btnt:focus {
  background: var(--color-grey-200);
  color: inherit;
  cursor: pointer;
  box-shadow: none;
  outline: none;
  border: 0;
}

body .e-btn:active,
body .e-css.e-btn:active {
  background: var(--color-grey-400);
  color: inherit;
}

body .e-btn:disabled,
body .e-css.e-btn:disabled {
  opacity: 0.25;
  cursor: not-allowed;
  pointer-events: none;
}

/* BUTTON : PRIMARY */
body .e-btn.e-primary,
body .e-css.e-btnt.e-primary {
  background: var(--color-primary-300);
  color: var(--color-grey);
}

body .e-btn.e-primary:hover,
body .e-css.e-btn.e-primary:hover,
body .e-btn.e-primary:focus,
body .e-css.e-btn.e-primary:focus {
  background: var(--color-primary-200);
  color: inherit;
  box-shadow: none;
  outline: none;
  border: none;
}

body .e-btn.e-primary:active,
body .e-css.e-btn.e-primary:active {
  background: var(--color-primary-400);
  color: inherit;
}

/* BUTTON : DANGER */
body .e-btn.e-danger,
body .e-css.e-btn.e-danger {
  background: var(--color-danger-300);
  color: #fff;
}

body .e-btn.e-danger:hover,
body .e-css.e-btn.e-danger:hover,
body .e-btn.e-danger:focus,
body .e-css.e-btn.e-danger:focus {
  background: var(--color-danger-200);
  color: #fff;
  box-shadow: none;
  outline: none;
  border: none;
}

body .e-btn.e-danger:active,
body .e-css.e-btn.e-danger:active {
  background: var(--color-danger-400);
  color: #fff;
}

/* BUTTON . ICON */
.e-btn [class*=coatify-icon-] {
  font-size: 1.5rem;
  vertical-align: middle;
}

/* BUTTON : SMALL */
body .e-btn.e-small {
  height: 2.5rem;
  min-height: 0;
  max-height: none;
  padding: 0.5rem 1.25rem;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Coatify toast (ursprünglich für Syncfusion entwickelt) */
body .e-toast-container {
  max-height: 100vh;
  overflow: auto;
  padding: 1rem 0 0;
}

body .e-toast-container.e-toast-bottom-center {
  pointer-events: auto;
  bottom: 0;
}

body .e-toast-container .e-toast,
body .e-toast-container .e-toast:hover {
  background: none;
  border: none;
  box-shadow: none;
  display: block;
  overflow: visible;
  padding: 0;
}

body .e-toast-container.e-toast-bottom-center .e-toast {
  margin: 0 auto 1rem;
}

body .e-toast-container .e-toast .e-toast-message {
  width: auto;
  overflow: visible;
}

body .e-toast-container .e-toast .e-toast-message .e-toast-content {
  overflow: visible;
}

.e-toast-container .ctfy-toast {
  --_ctfy-toast-color-highlight: var(--ctfy-toast-color-highlight, var(--color-grey-600, #5e636e));
  display: flex;
  background-color: var(--ctfy-toast-BackgroundColor, #ffffff);
  padding: 0;
  color: var(--ctfy-toast-Color, var(--color-grey-800, #1d1e20));
  border-width: var(--ctfy-toast-BorderWidth, 0 0 0 4px);
  border-style: var(--ctfy-toast-BorderStyle, solid);
  border-color: var(--ctfy-toast-BorderColor, var(--_ctfy-toast-color-highlight));
  border-radius: 0;
  box-shadow: var(--ctfy-toast-BoxShadow, 0px 2px 4px rgba(47, 50, 55, 0.15), 8px 4px 24px rgba(47, 50, 55, 0.15));
}

.e-toast-container .ctfy-toast:hover {
  box-shadow: var(--ctfy-toast-BoxShadow, 0px 2px 4px rgba(47, 50, 55, 0.15), 8px 4px 24px rgba(47, 50, 55, 0.15));
}

.e-toast-container .ctfy-toast.ctfy-toast--alert {
  --_ctfy-toast-color-highlight: var(--ctfy-toast-color-highlight, var(--color-danger-300, #dc3545));
}

.e-toast-container .ctfy-toast.ctfy-toast--warning {
  --_ctfy-toast-color-highlight: var(--ctfy-toast-color-highlight, var(--color-warning-300, #ff8a00));
}

.e-toast-container .ctfy-toast.ctfy-toast--success {
  --_ctfy-toast-color-highlight: var(--ctfy-toast-color-highlight, var(--color-success-300, #28a745));
}

.e-toast-container .ctfy-toast.ctfy-toast--information {
  --_ctfy-toast-color-highlight: var(--ctfy-toast-color-highlight, var(--color-information-300, #17a2b8));
}

.ctfy-toast__prefix {
  flex: none;
  padding: 1.25rem 1rem;
}

.ctfy-toast__main {
  flex: 1;
  padding: 1rem;
}

.ctfy-toast__suffix {
  flex: none;
  padding: 1.25rem 1rem;
}

.ctfy-toast__icon {
  font-size: 1.75rem;
  color: var(--ctfy-toast__icon-Color, var(--_ctfy-toast-color-highlight));
}

/* CTFY CHART PANEL */
/* -------------------------------------------------------------------------- */
.ctfy-chart-panel {
  padding: 1.5rem;
  background-color: var(--ctfy-chart-panel-Background, #fff);
  border: var(--ctfy-chart-panel-Border, 1px solid var(--color-grey-300));
}

.ctfy-chart-panel__aside {
  padding: 0 0 2rem 0;
  --gauge-chart-Margin: auto;
}

.ctfy-chart-panel__main {
  flex: 1;
  min-width: 0;
}

.ctfy-chart-panel__main--with-offset {
  padding-left: 10px;
}

/* CTFY CHART PANEL // RESPONSIVE: Medium size and up */
/* -------------------------------------------------------------------------- */
@media (min-width: 768px) {
  .ctfy-chart-panel {
    display: flex;
    flex-flow: row nowrap;
  }
  .ctfy-chart-panel__aside {
    --gauge-chart-Margin: 0 auto;
    flex: none;
    width: 296px;
    border-right: 1px solid var(--color-grey-300);
    padding: 0 2rem 0 0;
  }
}