/* Shell */
:root {
  --logo: url('/assets/custom/wfx_Ladefoxx-Logo-Schriftzug_rot-weiss.svg') no-repeat;
  --logo-compact: url('/assets/custom/wfx_Ladefoxx-Logo-Icon.svg');
  --logo-login: url('/assets/custom/wfx_Ladefoxx-Logo-Schriftzug_rot-weiss.svg');
  --logo-max-width: 60%;
  --logo-max-height: 2rem;

  --shell-header-background: #ffffff;
  --shell-background: #D1D2D4;
  --shell-header-text: #231F20;
  --shell-bg-color: transparent;
  --shell-border: 1px solid rgba(255, 255, 255, 0.2);
  --shell-button-color: var(--surface-900);
  --shell-font-color: #231F20;
  --shell-content-background: var(--white-darken-5);

  --surface-ground: #ffffff;

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

  --panelmenu-color: var(--surface-600);
  --panelmenu-color-hover: var(--primary-color);
  --panelmenu-color-active: var(--surface-400);
  --panelmenu-color-link-active: var(--primary-color);

  --login-background: linear-gradient(72deg, rgba(96,187,70,1) 0%, rgba(221,237,212,1) 100%);
  --login-card-background: white;

  --state-available: #60BB46;
  --state-charging: #1B4BA7;
  --state-reserved: #8548A8;
  --state-error: #EE1D23;
  --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);

  --dynamicForm-info-color: #009fe3;
  --dynamicForm-warn-color: #faad00;
  --dynamicForm-summary-color: #001017;
  --dynamicForm-text-color: #404040;
  --dynamicForm-container-background: #0000000d;

  --eum-user-enabled-color: #60BB46;
  --eum-user-disabled-color: #EE1D23;
  --eum-modal-max-width: 750px;
  --eum-create-button-primary-color: #60BB46;
  --eum-create-button-secondary-color: gray;
  --eum-card-background-color: white;
  --eum-card-border: 1px solid #EAEAEA;
  --eum-card-border-radius: 4px;
}

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

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

  --font-weight-lighter: 100;
  --font-weight-light: 100;
  --font-weight-regular: 400;
  --font-weight-semi-bold: 700;
  --font-weight-bold: 700;

  --h1-font-family: var(--font-family-headline);
  --h1-font-weight: 700;
  --h1-color: inherit;
  --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: initial;
  --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: 400;
  --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: 400;
  --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: 700;
  --h5-color: initial;
  --h5-text-transform: none;
  --h5-font-size: 1rem;
  --h5-line-height: auto;
  --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: 400;
  --h6-color: initial;
  --h6-text-transform: uppercase;
  --h6-font-size: 1rem;
  --h6-line-height: auto;
  --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: 400;
  --p-color: initial;
  --p-text-transform: none;
  --p-font-size: 1rem;
  --p-line-height: auto;
  --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: 400;
  --p-small-color: initial;
  --p-small-text-transform: none;
  --p-small-font-size: 12px;
  --p-small-line-height: 1rem;
  --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;
  }
}

.shell .header {
  border-bottom: 10px solid var(--primary-color);
  padding-left: 4rem;
  position: relative
}
@media (max-width: 575px) {
  .shell .header.pl-3 {
    padding-left: 4rem !important;
  }
}
@media (min-width: 1440px) {
  .shell .header {
    padding-left: 1rem;
  }
}

.shell .header:after {
  content: '';
  display: block;
  border-bottom: 10px solid var(--primary-color-light);
  width: 100%;
  height: 10px;
  background: var(--primary-color-light);
  position: absolute;
  left: 0;
  bottom: -20px;
}

.shell .header__logo {
  max-height: var(--logo-max-height);
}

.shell .offCanvas {
  background: #ffffff;
  height: calc(100vh - var(--header-height) - 10px);
  top: calc(var(--header-height) + 10px);
}

.shell .offCanvasButton-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  height: 60px;
  z-index: 2;
}

.shell .offCanvasButton-wrapper .p-button-icon {
  color: var(--text-color);
}

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

.shell .p-dropdown.shell-dropdown .p-dropdown-label {
  color: var(--surface-900);
}

.text-white-alpha-60 {
  color: var(--surface-500) !important;
}