:root {
  --logo: url('./assets/custom/Logo_RML_e-Mobility_Manager_lang.svg') no-repeat;
  --logo-compact: url('./assets/custom/Logo_RML_e-Mobility_Manager.svg');
  --logo-login: url('/assets/custom/Logo_RML_e-Mobility_Manager.svg');
  --logo-max-width: 60%;
  --logo-max-height: 3rem;

  --surface-ground: #dff3f5;

  --shell-header-background: #fff;
  --shell-header-text: var(--text-color);
  --shell-background: #fff;
  --shell-bg-color: #fff;
  --shell-border: 5px solid var(--blue-500);
  --shell-button-color: var(--text-color);
  --shell-font-color: var(--text-color);
  --shell-content-background: center/cover url('./assets/custom/2_halbe_kreise_RML.svg') no-repeat, var(--surface-ground);
  --text-color: #3f3f46;

  --offCanvas-width: 100vw;
  --header-height: 70px;

  --panelmenu-color: var(--text-color);
  --panelmenu-color-hover: #fff;
  --panelmenu-color-hover-bg: var(--blue-500);
  --panelmenu-color-active: #fff;
  --panelmenu-color-active-bg: var(--blue-500);
  --panelmenu-color-link-active: #fff;
  --panelmenu-color-link-active-bg: var(--blue-500);

  --login-background: var(--shell-content-background);
  --login-card-background: white;

  --state-available: var(--green-500);
  --state-charging: var(--blue-500);
  --state-reserved: var(--purple-600);
  --state-error: #b61d35;
  --ocppState-Unknown: var(--state-error);
  --state-not-connected: #757575;

  --mega-button-color: var(--primary-color);
  --mega-button-background: var(--primary-color-text);
  --mega-button-border: 1px solid var(--border-color-dark);
  --mega-button-border-hover: 1px solid var(--border-color-darker);

  --eum-user-enabled-color: var(--success-color);
  --eum-user-disabled-color: var(--danger-color);
  --eum-modal-max-width: 750px;
  --eum-create-button-primary-color: var(--primary-color);
  --eum-create-button-secondary-color: var(--surface-600);
  --eum-card-background-color: white;
  --eum-card-border: 1px solid #fff;
  --eum-card-border-radius: .5rem;

  --atm-modal-max-width: 750px;
  --atm-create-button-primary-color: var(--primary-color);
  --atm-create-button-secondary-color: var(--surface-600);
  --atm-card-background-color: white;
  --atm-card-border: 1px solid #fff;
  --atm-card-border-radius: .5rem;
  --atm-remove-button-border: .5rem solid var(--atm-create-button-primary-color);

  --dynamicForm-info-color: var(--info-color);
  --dynamicForm-warn-color: var(--warning-color);
  --dynamicForm-summary-color: var(--text-color-secondary);
  --dynamicForm-text-color: var(--text-color);
  --dynamicForm-container-background: #0000000d;
}
/* Shell */

@media (min-width: 992px) {
  :root {
    --offCanvas-width: 320px;
  }
}

/* Typography */
:root {
  --font-family-headline: 'Barlow', sans-serif;
  --font-family: 'Barlow', sans-serif;
  --icon-font-family: 'EAAZE-Icons';

  --font-weight-lighter: 200;
  --font-weight-light: 300;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 500;
  --font-weight-bold: 600;

  --h1-font-family: var(--font-family-headline);
  --h1-font-weight: 300;
  --h1-color: var(--text-color-secondary);
  --h1-text-transform: none;
  --h1-font-size: 30px;
  --h1-line-height: 36px;
  --h1-letter-spacing: 0;
  --h1-text-align: left;
  --h1-margin: 0 0 1rem 0;

  --h2-font-family: var(--font-family-headline);
  --h2-font-weight: normal;
  --h2-color: var(--text-color-secondary);
  --h2-text-transform: none;
  --h2-font-size: 24px;
  --h2-line-height: 30px;
  --h2-letter-spacing: 0;
  --h2-text-align: left;
  --h2-margin: 0 0 0.5rem 0;

  --h3-font-family: var(--font-family-headline);
  --h3-font-weight: 500;
  --h3-color: initial;
  --h3-text-transform: none;
  --h3-font-size: 18px;
  --h3-line-height: 30px;
  --h3-letter-spacing: 0;
  --h3-text-align: left;
  --h3-margin: 0 0 0.25rem 0;

  --h4-font-family: var(--font-family-headline);
  --h4-font-weight: 300;
  --h4-color: initial;
  --h4-text-transform: none;
  --h4-font-size: 18px;
  --h4-line-height: 30px;
  --h4-letter-spacing: 0;
  --h4-text-align: left;
  --h4-margin: 0 0 0.25rem 0;

  --h5-font-family: var(--font-family-headline);
  --h5-font-weight: 600;
  --h5-color: initial;
  --h5-text-transform: none;
  --h5-font-size: 14px;
  --h5-line-height: 20px;
  --h5-letter-spacing: 0;
  --h5-text-align: left;
  --h5-margin: 0 0 0.125rem 0;

  --h6-font-family: var(--font-family-headline);
  --h6-font-weight: 300;
  --h6-color: initial;
  --h6-text-transform: uppercase;
  --h6-font-size: 14px;
  --h6-line-height: 20px;
  --h6-letter-spacing: 1.4px;
  --h6-text-align: left;
  --h6-margin: 0 0 0.125rem 0;

  --p-font-family: var(--font-family-headline);
  --p-font-weight: normal;
  --p-color: initial;
  --p-text-transform: none;
  --p-font-size: 14px;
  --p-line-height: 20px;
  --p-letter-spacing: 0;
  --p-text-align: left;
  --p-margin: 0 0 0.5rem 0;

  --p-small-font-family: var(--font-family-headline);
  --p-small-font-weight: normal;
  --p-small-color: initial;
  --p-small-text-transform: none;
  --p-small-font-size: 12px;
  --p-small-line-height: 14px;
  --p-small-letter-spacing: 0;
  --p-small-text-align: left;

  --a-font-family: var(--p-font-family);
  --a-font-weight: 400;
  --a-color: var(--primary-color);
  --a-text-transform: none;
  --a-text-decoration: underline;
  --a-font-size: var(--p-font-size);
  --a-line-height: var(--p-line-height);
  --a-letter-spacing: var(--p-letter-spacing);
}

@media (max-width: 576px) {
  :root {
    --h1-font-size: 24px;
    --h1-line-height: 28px;
    --h2-font-size: 20px;
    --h2-line-height: 24px;
    --h3-font-size: 16px;
    --h3-line-height: 22px;
    --h4-font-size: 16px;
    --h4-line-height: 22px;
  }
}

.card {
  padding: 1rem;
  background: white;
  border-radius: 1.5rem;
  border: 1px solid white;
}
.card > h1,
.card > h2,
.card > h3,
.card > h4,
.card > h5,
.card > h6 {
  margin-top: 0;
  color: var(--text-color-secondary);
}

@media (min-width: 576px) {
  .card {
    padding: 1.25rem;
  }
}
@media (min-width: 992px) {
  .card {
    padding: 1.5rem;
  }
}

.p-confirm-popup {
  background: #ffffff;
  color: black;
  border: 0 none;
  border-radius: 1.5rem;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
}
.p-confirm-popup .p-confirm-popup-content {
  padding: 1rem;
}
.p-confirm-popup .p-confirm-popup-footer {
  text-align: right;
  padding: 0.5rem 1rem;
}
.p-confirm-popup .p-confirm-popup-footer button {
  margin: 0 0.5rem 0 0;
  width: auto;
}
.p-confirm-popup .p-confirm-popup-footer button:last-child {
  margin: 0;
}
.p-confirm-popup:after {
  border: solid transparent;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
}
.p-confirm-popup:before {
  border: solid transparent;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
}
.p-confirm-popup.p-confirm-popup-flipped:after {
  border-top-color: #ffffff;
}
.p-confirm-popup.p-confirm-popup-flipped:before {
  border-top-color: #ffffff;
}
.p-confirm-popup .p-confirm-popup-icon {
  font-size: 1.5rem;
}
.p-confirm-popup .p-confirm-popup-message {
  margin-left: 1rem;
}

.p-dialog {
  border-radius: 1.5rem;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
  border: 0 none;
  max-width: 80%;
}
.p-dialog .p-dialog-header {
  border-bottom: 1px solid #dee2e6;
  background: #ffffff;
  color: black;
  padding: 1.5rem;
  border-top-right-radius: 1.5rem;
  border-top-left-radius: 1.5rem;
}
.p-dialog .p-dialog-header .p-dialog-title {
  font-weight: 600;
  font-size: 1.25rem;
}
.p-dialog .p-dialog-header .p-dialog-header-icon {
  width: 2rem;
  height: 2rem;
  color: #6c757d;
  border: 0 none;
  background: transparent;
  border-radius: 50%;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  margin-right: 0.5rem;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:enabled:hover {
  color: black;
  border-color: transparent;
  background: #e9ecef;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:focus {
  outline: 0 none;
  outline-offset: 0;
  box-shadow: none;
}
.p-dialog .p-dialog-header .p-dialog-header-icon:last-child {
  margin-right: 0;
}
.p-dialog .p-dialog-content {
  background: #ffffff;
  color: black;
  padding: 1.5rem 1.5rem;
  border-radius: 0 0 1.5rem 1.5rem;
}
.p-dialog .p-dialog-footer {
  border-top: 1px solid #dee2e6;
  background: #ffffff;
  color: black;
  padding: 1.5rem;
  text-align: right;
  border-bottom-right-radius: 1.5rem;
  border-bottom-left-radius: 1.5rem;
}
.p-dialog .p-dialog-footer button {
  margin: 0 0.5rem 0 0;
  width: auto;
}
.p-dialog.p-confirm-dialog .p-dialog-content {
  border-radius: 0;
}
.p-dialog.p-confirm-dialog .p-confirm-dialog-icon {
  font-size: 2rem;
}
.p-dialog.p-confirm-dialog .p-confirm-dialog-message {
  margin-left: 1rem;
}

.p-overlaypanel {
  background: #ffffff;
  color: black;
  border: 0 none;
  border-radius: 1.5rem;
  box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
}
.p-overlaypanel .p-overlaypanel-content {
  padding: 1rem;
}
.p-overlaypanel .p-overlaypanel-close {
  background: #009fe3;
  color: #fff;
  width: 2rem;
  height: 2rem;
  transition: background-color 0.2s, color 0.2s, box-shadow 0.2s;
  border-radius: 50%;
  position: absolute;
  top: -1rem;
  right: -1rem;
}
.p-overlaypanel .p-overlaypanel-close:enabled:hover {
  background: #008dca;
  color: #fff;
}
.p-overlaypanel:after {
  border: solid transparent;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
}
.p-overlaypanel:before {
  border: solid transparent;
  border-color: rgba(255, 255, 255, 0);
  border-bottom-color: #ffffff;
}
.p-overlaypanel.p-overlaypanel-flipped:after {
  border-top-color: #ffffff;
}
.p-overlaypanel.p-overlaypanel-flipped:before {
  border-top-color: #ffffff;
}

.shell .header .p-button:focus {
  box-shadow: none;
}

.shell .header__logo {
  height: calc(var(--header-height) - 1.5rem);
  background-size: contain;
}

.shell-breadcrumb.p-breadcrumb {
  background: transparent;
}


.shell .p-panelmenu .p-panelmenu-panel:first-child .p-panelmenu-header > a {
  border-radius: 0 !important;
}

.eum-card {
  border-color: #fff !important;
}

.atm-card {
  border-color: #fff !important;
}