/* open-sans-regular - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: local(""), url("/fonts/open-sans-v34-latin-regular.woff2") format("woff2"); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
/* open-sans-600 - latin */
@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: local(""), url("/fonts/open-sans-v34-latin-600.woff2") format("woff2"); /* Chrome 26+, Opera 23+, Firefox 39+ */
}
/* Tiny inline cms editor should appear on top of sticky header*/
.tox-tinymce-inline {
  z-index: 500;
}

/* Hide component content until they are defined in browser */
sl-select:not(:defined), sl-dropdown:not(:defined), sl-tooltip:not(:defined), sl-details:not(:defined), sl-tab-group:not(:defined) {
  visibility: hidden;
}

sl-dialog:not(:defined), sl-menu-item:not(:defined), sl-dropdown:not(:defined), sl-drawer:not(:defined) {
  display: none;
}

sl-tooltip[content="Single Sign On"] img {
  vertical-align: middle;
}

sl-badge::part(base) {
  border: none;
}

.btn-flat::part(base) {
  background-color: transparent !important;
  padding-left: 0;
  height: var(--sl-input-height-medium);
  transition: var(--sl-transition-slow) background ease, var(--sl-transition-slow) color ease;
  --sl-input-border-width: 0px;
  --sl-input-height-medium: 1em;
}
.btn-flat::part(base):hover {
  color: var(--ph-col-blue-hover);
}
.btn-flat::part(base):active {
  color: var(--ph-col-blue);
}
.btn-flat::part(prefix), .btn-flat::part(suffix) {
  fill: currentColor !important;
}

.phiadukt-counter-badge[data-content="0"] {
  display: none;
}

sl-tooltip div[slot=content] .example {
  background: var(--ph-col-grey-background);
  padding: 5px;
  color: var(--ph-col-black);
  margin: 5px 0;
  width: auto;
  font-size: var(--ph-fs-11);
}

sl-card {
  display: block;
}
sl-card:not(:defined) {
  padding: 1.25rem;
}
sl-card:not(:defined) sl-icon {
  aspect-ratio: 1/1;
  height: 33px;
  width: 33px;
  display: block;
}

/* Custom direction for detail open/close icon */
sl-details::part(summary-icon) {
  transform: rotate(90deg);
}
sl-details[open=""]::part(summary-icon) {
  transform: rotate(-180deg);
}

sl-button[variant=info]::part(base) {
  color: var(--ph-col-white);
  background: var(--ph-col-orange);
  border-color: var(--ph-col-orange);
}
sl-button[variant=info]:hover::part(base) {
  background: var(--ph-col-orange-light);
  border-color: var(--ph-col-orange-light);
}
sl-button[variant=info][outline]::part(base) {
  color: var(--ph-col-orange);
  background: var(--ph-col-white);
  border-color: var(--ph-col-orange-light);
}
sl-button[variant=info][outline]:hover::part(base) {
  color: var(--ph-col-white);
  background: var(--ph-col-orange);
}

@media (min-width: 1024px) {
  .mobile-visible {
    display: none;
  }
}

.tablet-visible {
  display: none;
}
@media (min-width: 768px) {
  .tablet-visible {
    display: initial;
  }
}

.desktop-visible {
  display: none;
}
@media (min-width: 1024px) {
  .desktop-visible {
    display: initial;
  }
}

[name=honey_email] {
  display: none;
}

:root {
  --ph-fs-8: 8pt;
  --ph-fs-9: 9pt;
  --ph-fs-10: 10pt;
  --ph-fs-11: 11pt;
  --ph-fs-12: 12pt;
  --ph-fs-13: 13pt;
  --ph-fs-14: 14pt;
  --ph-fs-15: 15pt;
  --ph-fs-16: 16pt;
  --ph-fs-18: 18pt;
  --ph-fs-20: 20pt;
  --ph-fs-22: 22pt;
  --ph-fs-25: 25pt;
  --ph-fs-30: 30pt;
  --ph-fs-32: 32pt;
  --ph-fs-40: 40pt;
  --ph-fs-65: 65pt;
  --ph-fs-85: 85pt;
  --ph-fs-100: 100pt;
  --ph-col-blue: hsl(204, 84%, 49%);
  --ph-col-blue-hover: hsl(210, 80%, 66%);
  --ph-col-blue-hover-light: hsl(204.4, 93.1%, 94.3%);
  --ph-col-green-default: green;
  --ph-col-green: hsl(155, 40%, 35%);
  --ph-col-green-hover: hsl(155, 39%, 48%);
  --ph-col-green-alert: hsl(142 70.6% 45.3%);
  --ph-col-green-inactive: hsl(161 17.3% 56.9%);
  --ph-col-green-in-basket: hsl(161 20% 85%);
  --ph-col-black: hsl(0 0% 0%);
  --ph-col-primary: hsl(230, 4%, 31%);
  --ph-col-primary-text: hsl(240, 2%, 13%);
  --ph-col-grey: hsl(0 0% 71%);
  --ph-col-grey-light: hsl(0 0% 81.2%);
  --ph-col-grey-background: hsl(0 0% 96.1%);
  --ph-col-grey-text-landing: hsl(0 0% 43.9%);
  --ph-col-grey-text-label: hsl(0 0% 43.9%);
  --ph-col-grey-text-price-label: hsl(0 0% 43.9%);
  --ph-col-grey-infotext: hsl(0 0% 30%);
  --ph-col-internal-cards: hsl(240, 4%, 95%);
  --ph-col-orange-link: hsl(25, 37%, 52%);
  --ph-col-orange: hsl(38 92.1% 50.2%);
  --ph-col-orange-light: hsl(37 92.1% 75.1%);
  --ph-col-orange-landing: hsl(26 79.7% 53.7%);
  --ph-col-beige: hsl(32 41.3% 67.3%);
  --ph-col-beige-hover: hsl(32, 41%, 74%);
  --ph-col-white: hsl(0 0% 100%);
  --ph-col-white-transparancy-landing: 255 255 255 / 90%;
  --ph-col-white-transparency: 255 255 255 / 85%;
  --ph-col-white-transparency-loading: 255 255 255 / 50%;
  --ph-col-mail-dashboard-header-bg: hsl(0, 0%, 90%);
  --ph-col-img-meta-grey-transparency: 0 0 0 / 50%;
  --ph-col-icon-highlight: hsl(11.3 100% 50%);
  --ph-col-product-highlight-background: hsl(0 0% 91%);
  --ph-col-further-information-setup-background: hsl(240 100% 96%);
  --ph-header-min-height: 55px;
  counter-reset: itemRow;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

html {
  height: 100%;
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--ph-col-white);
  font-family: "Open Sans", sans-serif;
  font-size: var(--ph-fs-10);
  color: var(--ph-col-primary-text);
}
html.impersonate,
body.impersonate {
  --ph-col-primary: hsl(0 100% 50%);
}

@keyframes spinner {
  to {
    transform: rotate(360deg);
  }
}
/* Provide place for scrollbar always to reduce CLS while reloading */
body {
  overflow-y: auto;
}
body.loading:before {
  content: "";
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgb(var(--ph-col-white-transparency));
}
body.loading:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  z-index: 5;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 2px solid var(--ph-col-grey);
  border-top-color: var(--ph-col-primary);
  animation: spinner 0.6s linear infinite;
}

.api-container-loading {
  position: relative;
}
.api-container-loading:before {
  content: "";
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgb(var(--ph-col-white-transparency));
  pointer-events: all;
}
.api-container-loading:after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  z-index: 30;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  margin-top: -15px;
  margin-left: -15px;
  border-radius: 50%;
  border: 2px solid var(--ph-col-grey);
  border-top-color: var(--ph-col-primary);
  animation: spinner 0.6s linear infinite;
}

a {
  color: var(--ph-col-blue);
  text-decoration: none;
  cursor: pointer;
}
a:hover {
  color: var(--ph-col-blue-hover);
  text-decoration: underline;
}
a.beige {
  color: var(--ph-col-beige);
}
a.beige:hover {
  color: var(--ph-col-beige-hover);
}

p {
  margin: 0 0 16px;
  line-height: 1.3em;
}

h1, h2, h3, h4, h5,
.h1, .h2, .h3, .h4, .h5 {
  font-weight: 600;
  color: var(--ph-col-primary-text);
  line-height: 1.1em;
}

.custom_error_page h1, .custom_error_page h2, .custom_error_page h3, .custom_error_page h4, .custom_error_page h5 {
  color: var(--ph-col-white);
}

h1, .h1 {
  font-size: var(--ph-fs-12);
}
@media (min-width: 768px) {
  h1, .h1 {
    font-size: var(--ph-fs-16);
  }
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: var(--ph-fs-18);
  }
}

h2, .h2 {
  font-size: var(--ph-fs-11);
}
@media (min-width: 768px) {
  h2, .h2 {
    font-size: var(--ph-fs-15);
  }
}
@media (min-width: 1024px) {
  h2, .h2 {
    font-size: var(--ph-fs-16);
  }
}

h3, .h3 {
  font-size: var(--ph-fs-10);
}
@media (min-width: 768px) {
  h3, .h3 {
    font-size: var(--ph-fs-14);
  }
}
@media (min-width: 1024px) {
  h3, .h3 {
    font-size: var(--ph-fs-14);
  }
}

h4, .h4 {
  font-size: var(--ph-fs-9);
}
@media (min-width: 768px) {
  h4, .h4 {
    font-size: var(--ph-fs-12);
  }
}
@media (min-width: 1024px) {
  h4, .h4 {
    font-size: var(--ph-fs-12);
  }
}

h5, .h5 {
  font-size: var(--ph-fs-8);
}
@media (min-width: 768px) {
  h5, .h5 {
    font-size: var(--ph-fs-10);
  }
}
@media (min-width: 1024px) {
  h5, .h5 {
    font-size: var(--ph-fs-11);
  }
}

.hidden {
  display: none;
  height: 0;
}

.visibility-faded-hidden {
  visibility: hidden;
  opacity: 0;
}

.visibility-faded-visible {
  visibility: visible;
  opacity: 1;
  transition: 0.25s opacity;
}

.custom-help-text {
  margin-top: var(--sl-spacing-3x-small);
  color: var(--sl-input-help-text-color);
}

sl-icon-button[variant=primary][outline]:active:not(:disabled)::part(base),
sl-button[variant=primary][outline]:active:not(:disabled)::part(base) {
  background-color: var(--ph-col-primary);
  border-color: var(--ph-col-primary);
}

sl-icon-button.green-button:not([outline])::part(base),
sl-button.green-button:not([outline])::part(base) {
  color: var(--ph-col-white);
  background: var(--ph-col-green);
  border: none;
}
sl-icon-button.green-button:not([outline])::part(base):hover,
sl-button.green-button:not([outline])::part(base):hover {
  background: var(--ph-col-green-hover);
}

sl-icon-button.green-button[outline]::part(base),
sl-button.green-button[outline]::part(base) {
  color: var(--ph-col-green);
  background-color: var(--ph-col-white);
  border: 1px solid var(--ph-col-green);
}
sl-icon-button.green-button[outline]::part(base):hover,
sl-button.green-button[outline]::part(base):hover {
  background: var(--ph-col-green-hover);
  border-color: var(--ph-col-green-hover);
  color: var(--ph-col-white);
}

sl-icon-button.blue-button:not([outline])::part(base),
sl-button.blue-button:not([outline])::part(base) {
  color: var(--ph-col-white);
  background: var(--ph-col-blue);
  border: none;
}
sl-icon-button.blue-button:not([outline])::part(base):hover,
sl-button.blue-button:not([outline])::part(base):hover {
  background: var(--ph-col-blue-hover);
}

sl-icon-button.blue-button[outline]::part(base),
sl-button.blue-button[outline]::part(base) {
  color: var(--ph-col-blue);
  background-color: var(--ph-col-white);
  border-color: var(--ph-col-blue);
}
sl-icon-button.blue-button[outline]::part(base):hover,
sl-button.blue-button[outline]::part(base):hover {
  background: var(--ph-col-blue-hover);
  border-color: var(--ph-col-blue-hover);
  color: var(--ph-col-white);
}

sl-icon-button.red-button:not([outline])::part(base),
sl-button.red-button:not([outline])::part(base) {
  color: var(--ph-col-white);
  background: var(--sl-color-danger-600);
  border: none;
}
sl-icon-button.red-button:not([outline])::part(base):hover,
sl-button.red-button:not([outline])::part(base):hover {
  background: var(--sl-color-danger-500);
}

sl-icon-button.red-button[outline]::part(base),
sl-button.red-button[outline]::part(base) {
  color: var(--sl-color-danger-600);
  background-color: var(--ph-col-white);
  border: 2px solid var(--sl-color-danger-600);
}
sl-icon-button.red-button[outline]::part(base):hover,
sl-button.red-button[outline]::part(base):hover {
  background: var(--sl-color-danger-600);
  border-color: var(--sl-color-danger-600);
  color: var(--ph-col-white);
}

sl-icon-button.beige-button:not([outline])::part(base),
sl-button.beige-button:not([outline])::part(base) {
  color: var(--ph-col-white);
  background: var(--ph-col-beige);
  border: none;
}
sl-icon-button.beige-button:not([outline])::part(base):hover,
sl-button.beige-button:not([outline])::part(base):hover {
  background: var(--ph-col-beige-hover);
}

sl-icon-button.beige-button[outline]::part(base),
sl-button.beige-button[outline]::part(base) {
  color: var(--ph-col-beige);
  background-color: var(--ph-col-white);
  border-color: var(--ph-col-beige);
}
sl-icon-button.beige-button[outline]::part(base):hover,
sl-button.beige-button[outline]::part(base):hover {
  background: var(--ph-col-beige-hover);
  border-color: var(--ph-col-beige-hover);
  color: var(--ph-col-white);
}

sl-icon[name=info].philipp-info-circle {
  border: 1px solid var(--ph-col-primary);
  border-radius: 100%;
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
}

sl-spinner.philipp-spinner {
  font-size: var(--ph-fs-40);
  margin: 0 auto;
  display: flex;
}

.sl-toast-stack {
  position: fixed;
  top: var(--ph-header-min-height) !important; /* don't let this be overwritten by rocket */
  right: 0;
  z-index: var(--sl-z-index-toast);
  width: 28rem;
  max-width: 100%;
  max-height: 100%;
  overflow: auto;
}
.sl-toast-stack sl-alert {
  margin: 15px 10px;
}

sl-alert.status-message::part(base) {
  max-width: 800px;
  margin: 10px auto;
  width: 100%;
}

.bottleneck-level.circle {
  width: 18px;
  height: 18px;
  border-radius: 50%;
}
.bottleneck-level[term-level=none] {
  background-color: var(--sl-color-success-600);
}
.bottleneck-level[term-level=none]::part(base) {
  background-color: var(--sl-color-success-600);
}
.bottleneck-level[term-level=short-term] {
  background-color: var(--sl-color-warning-300);
}
.bottleneck-level[term-level=short-term]::part(base) {
  color: var(--ph-col-black);
  background-color: var(--sl-color-warning-300);
}
.bottleneck-level[term-level=middle-term] {
  background-color: var(--sl-color-warning-600);
}
.bottleneck-level[term-level=middle-term]::part(base) {
  background-color: var(--sl-color-warning-600);
}
.bottleneck-level[term-level=long-term] {
  background-color: var(--sl-color-danger-600);
}
.bottleneck-level[term-level=long-term]::part(base) {
  background-color: var(--sl-color-danger-600);
}

#content_wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#content {
  width: 100%;
  max-width: 100%;
  flex: 1;
}

#content_frame {
  padding: 0 5px;
}
@media (min-width: 768px) {
  #content_frame {
    padding: 25px 15px;
  }
}

.impersonate-alert {
  text-align: center;
}
.impersonate-alert sl-icon {
  font-size: var(--ph-fs-25);
}
.impersonate-alert .impersonate-alert-span {
  font-size: var(--ph-fs-12);
}
@media (min-width: 768px) {
  .impersonate-alert .impersonate-alert-span {
    font-size: var(--ph-fs-14);
  }
}
@media (min-width: 1024px) {
  .impersonate-alert .impersonate-alert-span {
    font-size: var(--ph-fs-20);
  }
}

.portal-info-banner {
  text-align: center;
}
.portal-info-banner::part(message) {
  padding: var(--sl-spacing-small);
}
.portal-info-banner sl-icon {
  font-size: var(--ph-fs-20);
}
.portal-info-banner h5 {
  margin: 0;
}
.portal-info-banner .portal-info-banner-text {
  font-size: var(--ph-fs-12);
}

#confirm-dialog::part(header) {
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
}
#confirm-dialog::part(close-button__base) {
  color: var(--ph-col-white);
}
#confirm-dialog #confirm-dialog-message {
  white-space: break-spaces;
  margin: 5px 0 0;
}
#confirm-dialog sl-button {
  min-width: 55px;
}
#confirm-dialog.success::part(header) {
  background: var(--ph-col-green);
  color: var(--ph-col-white);
}
#confirm-dialog.success sl-button[variant=success]::part(base) {
  background: var(--ph-col-green);
}

#header {
  position: fixed;
  bottom: 0;
  top: auto;
  padding: 0 5px;
  z-index: 50;
  width: 100%;
  background: var(--ph-col-primary);
}
#header sl-button::part(base) {
  border-radius: 0;
}
@media (min-width: 768px) {
  #header {
    position: sticky;
    top: 0;
    padding: 0 15px;
  }
}
#header .limitation {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: calc(var(--ph-header-min-height) + env(safe-area-inset-bottom));
}
@media (min-width: 768px) {
  #header .limitation {
    height: var(--ph-header-min-height);
  }
}
@media (min-width: 1024px) {
  #header .limitation {
    max-width: 1600px;
    margin: 0 auto;
  }
}
#header .limitation sl-button {
  height: 100%;
}
@media (min-width: 768px) {
  #header .limitation sl-button {
    margin-right: 3px;
  }
}
#header .limitation sl-button::part(base) {
  display: flex;
  align-items: center;
  height: 100%;
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
  border: none;
}
#header .limitation sl-button::part(label) {
  padding-left: 0;
  padding-right: var(--sl-spacing-small);
}
#header .limitation sl-button:not(:defined) {
  visibility: hidden;
}
#header .limitation sl-button sl-icon {
  font-size: var(--ph-fs-14);
  color: var(--ph-col-white);
}
#header .limitation sl-button sl-icon.active-icon {
  display: none;
}
#header .limitation sl-button sl-icon.inactive-icon {
  display: flex;
}
#header .limitation sl-button .label {
  display: none;
}
@media (min-width: 768px) {
  #header .limitation sl-button .label {
    display: block;
    padding-left: 3px;
    font-size: var(--ph-fs-9);
  }
}
@media (min-width: 1024px) {
  #header .limitation sl-button .label {
    font-size: var(--ph-fs-11);
  }
}
#header .limitation sl-button.active::part(base) {
  color: var(--ph-col-orange-link);
  background: var(--ph-col-white);
}
#header .limitation sl-button.active sl-icon {
  color: var(--ph-col-orange-link);
}
#header .limitation sl-button.active sl-icon.active-icon {
  display: flex;
}
#header .limitation sl-button.active sl-icon.inactive-icon {
  display: none;
}
@media (min-width: 768px) {
  #header .limitation sl-button.push-right {
    margin-left: auto;
  }
}
#header .limitation sl-button:hover::part(base) {
  background: var(--ph-col-white);
  color: var(--ph-col-orange-link);
}
#header .limitation sl-button:hover sl-icon {
  color: var(--ph-col-orange-link);
}
#header .limitation sl-button:hover sl-icon.active-icon {
  display: flex;
}
#header .limitation sl-button:hover sl-icon.inactive-icon {
  display: none;
}
#header .limitation sl-button.within-flyout {
  width: 100%;
}
#header .limitation sl-button.within-flyout::part(base) {
  padding-left: var(--sl-spacing-medium);
  justify-content: flex-start;
}
#header .limitation sl-button.within-flyout sl-icon {
  margin-right: var(--sl-spacing-x-small);
  font-size: var(--ph-fs-14);
}
#header .limitation sl-button.within-flyout .label {
  display: block;
  padding-left: 3px;
  font-size: var(--ph-fs-12);
}
#header .limitation sl-button sl-badge {
  z-index: 5;
  top: 10px;
  right: 5px;
}
#header .limitation sl-icon-button::part(base) {
  color: var(--ph-col-white);
}
#header .limitation sl-icon-button:hover::part(base) {
  color: var(--ph-col-orange-link);
}
#header .limitation .language-select::part(base) {
  align-items: center;
}
#header .limitation .language-select sl-icon-button {
  font-size: var(--ph-fs-18);
}
#header .logo {
  display: none;
  height: 100%;
  padding-right: 35px;
}
#header .logo a {
  display: block;
}
@media (min-width: 768px) {
  #header .logo {
    display: flex;
    align-items: center;
  }
}
#header .logo img {
  height: 32px;
  width: auto;
}
@media (min-width: 1024px) {
  #header .logo img {
    height: 38px;
  }
}
#header sl-dropdown {
  height: 100%;
}
#header sl-dropdown::part(base) {
  height: 100%;
  display: flex;
}
#header sl-dropdown::part(panel) {
  overflow: hidden;
  background: var(--ph-col-white);
}
#header sl-dropdown .personal-data {
  margin-bottom: 1px;
}
#header sl-dropdown a {
  text-decoration: none;
}
#header sl-menu-item .label {
  display: block;
  padding-left: 3px;
}
#header sl-menu-item sl-icon {
  font-size: var(--ph-fs-14);
}
#header sl-menu-item::part(base) {
  padding: var(--sl-spacing-2x-small) var(--sl-spacing-medium);
}

#header-shop {
  position: sticky;
  top: 0;
  padding: 0 5px;
  z-index: 50;
  width: 100%;
  background: var(--ph-col-primary);
}
@media (min-width: 768px) {
  #header-shop {
    padding: 0 15px;
  }
}
#header-shop .limitation {
  display: grid;
  grid-template-columns: 1fr 0.5fr 50px;
  grid-template-areas: "logo basket languageSelect";
  align-items: center;
  height: var(--ph-header-min-height);
}
@media (min-width: 1024px) {
  #header-shop .limitation {
    max-width: 1600px;
    margin: 0 auto;
  }
}
#header-shop .limitation .basket {
  grid-area: basket;
  height: 100%;
}
#header-shop .limitation .basket::part(base) {
  display: flex;
  align-items: center;
  height: 100%;
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
  border: none;
}
#header-shop .limitation .basket::part(label) {
  padding-left: 0;
  padding-right: var(--sl-spacing-small);
}
#header-shop .limitation .basket:not(:defined) {
  visibility: hidden;
}
#header-shop .limitation .basket sl-icon {
  font-size: var(--ph-fs-14);
  color: var(--ph-col-white);
}
#header-shop .limitation .basket .label {
  display: none;
}
@media (min-width: 768px) {
  #header-shop .limitation .basket .label {
    display: block;
    padding-left: 3px;
    font-size: var(--ph-fs-9);
  }
}
@media (min-width: 1024px) {
  #header-shop .limitation .basket .label {
    font-size: var(--ph-fs-11);
  }
}
#header-shop .limitation .basket:hover::part(base) {
  background: var(--ph-col-white);
  color: var(--ph-col-orange-link);
}
#header-shop .limitation .basket:hover sl-icon {
  color: var(--ph-col-orange-link);
}
#header-shop .limitation sl-icon-button::part(base) {
  color: var(--ph-col-white);
}
#header-shop .limitation sl-icon-button:hover::part(base) {
  color: var(--ph-col-orange-link);
}
#header-shop .limitation .language-select {
  grid-area: languageSelect;
  justify-self: end;
}
#header-shop .limitation .language-select::part(base) {
  align-items: center;
}
#header-shop .limitation .language-select sl-icon-button {
  font-size: var(--ph-fs-18);
}
#header-shop .limitation .logo {
  grid-area: logo;
  display: flex;
  align-items: center;
  min-height: 100%;
}
#header-shop .limitation .logo a {
  display: block;
}
#header-shop .limitation .logo img {
  height: 38px;
  width: auto;
}
#header-shop sl-dropdown {
  height: 100%;
}
#header-shop sl-dropdown::part(base) {
  height: 100%;
  display: flex;
}
#header-shop sl-dropdown::part(panel) {
  overflow: hidden;
}
#header-shop sl-dropdown .personal-data {
  margin-bottom: 1px;
}
#header-shop sl-dropdown a {
  text-decoration: none;
}
#header-shop sl-menu-item .label {
  display: block;
  padding-left: 3px;
}
#header-shop sl-menu-item sl-icon {
  font-size: var(--ph-fs-14);
}
#header-shop sl-menu-item::part(base) {
  padding: var(--sl-spacing-2x-small) var(--sl-spacing-medium);
}

#footer {
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
  width: 100%;
  height: auto;
  margin-top: 50px;
  padding-bottom: 55px;
}
@media (min-width: 768px) {
  #footer {
    padding-bottom: 0;
  }
}
#footer .footer-fluid {
  display: flex;
  max-width: 1600px;
  margin: 0 auto;
  flex-wrap: wrap;
}
#footer .footer-fluid h3, #footer .footer-fluid p, #footer .footer-fluid a {
  color: var(--ph-col-white);
}
#footer .footer-fluid .contact-column {
  flex: 1;
  height: 100%;
  margin: 10px;
}
#footer .footer-fluid .contact-column .contact-info {
  margin: 0 0 10px;
  width: max-content;
}
#footer .footer-fluid .contact-column .contact-info sl-icon {
  margin-right: 15px;
}
#footer .footer-fluid .contact-column .contact-info span {
  width: 60px;
}
#footer .footer-fluid .contact-column .contact-info span, #footer .footer-fluid .contact-column .contact-info a {
  display: inline-block;
}
#footer .imprint {
  display: flex;
  justify-content: center;
  padding: 10px 0;
}
#footer .imprint a {
  margin: 0 10px;
  color: var(--ph-col-white);
}
#footer #feedback-trigger, #footer #faq-link {
  position: fixed;
  bottom: 60px;
  z-index: 2;
  right: 19px;
  opacity: 0.75;
  background: var(--ph-col-orange);
  height: 41px;
  width: 41px;
  transition: width 0.2s linear;
  overflow: hidden;
}
@media (min-width: 768px) {
  #footer #feedback-trigger, #footer #faq-link {
    bottom: 30px;
    width: 48px;
    height: 48px;
  }
}
#footer #feedback-trigger::part(base), #footer #faq-link::part(base) {
  display: flex;
  align-items: center;
  font-size: var(--ph-fs-12);
  color: var(--ph-col-white);
  background: var(--ph-col-orange);
  border: none;
  height: 100%;
}
#footer #feedback-trigger:hover, #footer #faq-link:hover {
  opacity: 1;
  width: 305px;
}
@media (min-width: 768px) {
  #footer #feedback-trigger:hover, #footer #faq-link:hover {
    width: 320px;
  }
}
#footer #feedback-trigger:hover .text, #footer #faq-link:hover .text {
  display: inline;
}
#footer #feedback-trigger .text, #footer #faq-link .text {
  display: none;
}
#footer #feedback-dialog {
  color: var(--ph-col-black);
}
#footer #feedback-dialog .stonly-buttons {
  margin-bottom: 20px;
}
#footer #feedback-dialog p {
  margin-bottom: 20px;
}
#footer #feedback-dialog .form-help-and-feedback sl-input {
  margin-bottom: 20px;
}
#footer #feedback-dialog .form-help-and-feedback sl-textarea {
  margin-bottom: 20px;
}
#footer #feedback-dialog .form-help-and-feedback .button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 30px;
}
#footer #faq-link {
  display: none;
  bottom: 160px;
}
@media (min-width: 768px) {
  #footer #faq-link {
    bottom: 160px;
  }
}
#footer #faq-link.show {
  display: block;
}

.to_top {
  position: fixed;
  bottom: 110px;
  z-index: 2;
  right: 19px;
  font-size: var(--ph-fs-20);
  background: var(--ph-col-grey);
  opacity: 0.5;
}
.to_top::part(base) {
  color: var(--ph-col-white);
}
.to_top:hover {
  opacity: 1;
}
@media (min-width: 768px) {
  .to_top {
    bottom: 95px;
    font-size: var(--ph-fs-25);
  }
}

@media (min-width: 1024px) {
  .accountdashboard sl-alert {
    margin-bottom: 50px;
  }
}

.container-fluid {
  display: grid;
  grid-template-columns: 1fr;
  margin: 0 auto;
  max-width: 1600px;
}
.container-fluid.container-minimal {
  color: var(--ph-col-primary);
  font-size: var(--ph-fs-10);
}
@media (min-width: 768px) {
  .container-fluid.container-minimal {
    font-size: var(--ph-fs-11);
  }
}
@media (min-width: 1024px) {
  .container-fluid.container-minimal {
    font-size: var(--ph-fs-12);
  }
}
.container-fluid.container-minimal .minimal-header {
  font-size: var(--ph-fs-40);
  margin: 0 auto;
  font-weight: normal;
}
.container-fluid.container-minimal .minimal-header a {
  color: var(--ph-col-primary);
  text-decoration: none;
}
.container-fluid.container-minimal .heading-and-button {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container-fluid.container-minimal .heading-and-button sl-button {
  width: 120px;
}
.container-fluid.container-minimal sl-details::part(header) {
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
}
.container-fluid.container-minimal h2 {
  margin: 10px 0;
}
.container-fluid.container-minimal h2.gtc-header {
  margin-top: 30px;
}
.container-fluid.container-minimal h4 {
  margin: 5px 0;
}
.container-fluid.container-minimal h4.details-heading {
  margin-bottom: 20px;
}
.container-fluid.container-minimal h5 {
  margin: 5px 0;
}
.container-fluid.container-minimal ul {
  margin: 0 0 16px;
}
.container-fluid.container-minimal p.followed-by-ul {
  margin-bottom: 0;
}
.container-fluid.container-minimal .enumerated {
  display: grid;
  grid-template-columns: 20px 1fr;
  grid-gap: 5px;
  grid-template-areas: "enumeration text";
}
.container-fluid.container-minimal .enumerated .enumeration {
  grid-area: enumeration;
  font-weight: bold;
}
.container-fluid.container-minimal .enumerated .text {
  grid-area: text;
}
.container-fluid .dashboard-greeting {
  display: block;
  margin-top: 30px;
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting {
    margin-top: 10px;
  }
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting {
    display: flex;
    align-items: center;
    background: var(--ph-col-internal-cards);
    width: 100vw;
    height: 132px;
    position: relative;
    left: 50%;
    right: 50%;
    margin: -30px -50vw 0;
    padding-left: 15px;
  }
}
@media (min-width: 1600px) {
  .container-fluid .dashboard-greeting {
    padding: 0;
  }
}
.container-fluid .dashboard-greeting .greeting {
  margin: 0 0 40px;
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting .greeting {
    margin: 0;
    width: 50%;
  }
}
@media (min-width: 1600px) {
  .container-fluid .dashboard-greeting .greeting {
    padding: 0;
    width: 1600px;
    margin: auto;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include {
  position: inherit;
  background: var(--ph-col-white);
  color: var(--ph-col-black);
  border: 1px solid var(--ph-col-grey);
  box-shadow: 2px 2px 4px -4px var(--ph-col-black);
  height: 140px;
  width: auto;
  padding: 5px 10px !important;
  margin-bottom: 50px;
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include {
    width: 330px;
  }
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting .dashboard-order-include {
    position: absolute;
    left: 50%;
    top: 56px;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "header header" "green orange" "button button";
  justify-content: space-between;
  width: 100%;
  height: 100%;
  grid-gap: 5px;
  cursor: pointer;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container h5 {
  margin: auto 0;
  grid-area: header;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container h5 hr {
  margin: 0;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-container {
  grid-area: green;
  display: flex;
  align-items: center;
  margin-top: 10px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-container.container-with-changes {
  grid-area: orange;
  position: relative;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-container.container-with-changes sl-badge {
  position: absolute;
  top: -5px;
  left: 25px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-container.container-with-changes sl-badge::part(base) {
  font-size: var(--ph-fs-10);
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-container .dashboard-orders {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ph-col-green);
  border-radius: 100%;
  color: var(--ph-col-green);
  background: var(--ph-col-white);
  box-shadow: 2px 2px 4px -4px var(--ph-col-black);
  height: 40px;
  width: 40px;
  font-size: var(--ph-fs-18);
  margin-right: 10px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-container .dashboard-orders.with-changes {
  color: var(--ph-col-orange);
  border-color: var(--ph-col-orange);
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-container span {
  font-size: var(--ph-fs-9);
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-button {
  grid-area: button;
  justify-self: center;
  margin-top: 10px;
  font-weight: bold;
  color: var(--ph-col-black);
  display: flex;
  align-items: center;
}
.container-fluid .dashboard-greeting .dashboard-order-include .container .dashboard-order-button sl-icon {
  font-size: var(--ph-fs-10);
}
.container-fluid .dashboard-greeting .dashboard-order-include sl-dialog::part(panel) {
  min-height: 70%;
  height: 90vh;
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include sl-dialog::part(panel) {
    width: 75%;
  }
}
@media (min-width: 1600px) {
  .container-fluid .dashboard-greeting .dashboard-order-include sl-dialog::part(panel) {
    width: 60%;
  }
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .filter {
    display: flex;
    flex-direction: row;
    gap: 25px;
  }
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .filter sl-select {
    width: 475px;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include sl-tab-panel::part(base) {
  padding-top: 0;
}
.container-fluid .dashboard-greeting .dashboard-order-include .show-all-details-container {
  display: flex;
  justify-content: flex-end;
}
.container-fluid .dashboard-greeting .dashboard-order-include .show-all-details-container sl-button::part(base) {
  font-size: var(--ph-fs-10);
  color: var(--ph-col-orange-link);
}
.container-fluid .dashboard-greeting .dashboard-order-include .show-all-details-container sl-button::part(label) {
  padding-left: 0;
}
.container-fluid .dashboard-greeting .dashboard-order-include .show-all-details-container #search-articles {
  max-width: 270px;
  flex: 1;
}
.container-fluid .dashboard-greeting .dashboard-order-include .table-head {
  display: none;
  font-weight: bold;
  background: var(--ph-col-grey-background);
  padding: 20px 20px 20px 40px;
  color: var(--ph-col-grey-text-label);
  text-transform: uppercase;
}
.container-fluid .dashboard-greeting .dashboard-order-include .table-head sl-tooltip {
  text-transform: none;
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .table-head {
    display: grid;
    grid-template-columns: 1fr 150px 100px 80px 165px;
    grid-template-areas: "article id total status date";
    margin-bottom: 5px;
  }
}
@media (min-width: 1280px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .table-head {
    grid-template-columns: 1fr 150px 100px 100px 165px;
  }
}
@media (min-width: 1600px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .table-head {
    grid-template-columns: 1fr 150px 150px 150px 165px;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include .table-head .table-head-article {
  grid-area: article;
}
.container-fluid .dashboard-greeting .dashboard-order-include .table-head .table-head-article-id {
  grid-area: id;
}
.container-fluid .dashboard-greeting .dashboard-order-include .table-head .table-head-total {
  grid-area: total;
}
.container-fluid .dashboard-greeting .dashboard-order-include .table-head .table-head-status {
  grid-area: status;
}
.container-fluid .dashboard-greeting .dashboard-order-include .table-head .table-head-date {
  grid-area: date;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details {
  margin-bottom: 10px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details::part(header) {
  padding-top: 0;
  padding-bottom: 0;
  flex-direction: row-reverse;
  gap: 15px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details::part(base) {
  border-top: none;
  border-left: none;
  border-right: none;
  padding-bottom: 10px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details::part(content) {
  padding: 5px var(--sl-spacing-medium) 5px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "name" "id" "total" "status" "date";
  grid-gap: 5px;
  padding: 5px 5px 5px 0;
  color: var(--ph-col-black);
  width: 100%;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order > div:not(:first-of-type) {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order > div:not(:first-of-type) {
    display: initial;
  }
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order {
    grid-template-columns: 2fr 1fr;
    grid-template-areas: "name name" "id total" "status ." "date date";
  }
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order {
    grid-template-columns: 1fr 145px 90px 80px 165px;
    grid-template-areas: "name id total status date";
  }
}
@media (min-width: 1280px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order {
    grid-template-columns: 1fr 145px 90px 100px 165px;
  }
}
@media (min-width: 1600px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order {
    grid-template-columns: 1fr 145px 135px 155px 165px;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order:nth-child(even) {
  background: var(--ph-col-grey-background);
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-article {
  grid-area: name;
  display: flex;
  align-items: center;
  padding: 0 15px 0 0;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-article sl-badge {
  margin-right: 5px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-article sl-badge::part(base) {
  font-size: var(--ph-fs-10);
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-article-id {
  grid-area: id;
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-article-id {
    display: flex !important;
    justify-content: flex-start !important;
  }
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-article-id span:first-of-type {
    padding-right: 3px;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-total {
  grid-area: total;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-status {
  grid-area: status;
  border: 1px solid var(--ph-col-green);
  border-radius: 20px;
  color: var(--ph-col-green);
  width: fit-content;
  padding: 3px 8px;
  align-self: flex-start;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-status.delayed {
  border-color: var(--sl-color-warning-600);
  color: var(--sl-color-warning-600);
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .dashboard-order .dashboard-order-date {
  grid-area: date;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-link-head {
  display: none;
  font-size: var(--ph-fs-8);
  color: var(--ph-col-grey-text-label);
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-link-head {
    display: grid;
    grid-template-columns: 150px 200px 100px 175px 90px 65px;
    grid-template-areas: "id reference amount preferredDate shippingDate confirmDelay";
    grid-gap: 15px;
    padding: 0 5px;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-link-head .body-head-order-id {
  grid-area: id;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-link-head .body-head-reference {
  grid-area: reference;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-link-head .body-head-amount {
  grid-area: amount;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-link-head .body-head-shipping-date {
  grid-area: shippingDate;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-link-head .body-head-preferred-delivery {
  grid-area: preferredDate;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "id" "reference" "amount" "preferredDate" "shippingDate" "confirmDelay";
  grid-gap: 5px;
  align-items: flex-start;
  padding: 5px;
  color: var(--ph-col-black);
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row > div {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row > div {
    display: initial;
  }
}
@media (min-width: 768px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "id reference" "amount preferredDate" "shippingDate shippingDate" "confirmDelay confirmDelay";
  }
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row {
    grid-template-columns: 150px 200px 100px 175px 90px 65px;
    grid-template-areas: "id reference amount preferredDate shippingDate confirmDelay";
    grid-gap: 15px;
    align-items: center;
  }
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row:nth-child(even) {
  background: var(--ph-col-grey-background);
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-link-order-id {
  grid-area: id;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-link-order-id .value {
  display: flex;
  align-items: center;
  gap: 8px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-link-customer-reference {
  grid-area: reference;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-link-amount {
  grid-area: amount;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-link-shipping-date {
  grid-area: shippingDate;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-link-preferred-delivery-date {
  grid-area: preferredDate;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-delay-confirm {
  grid-area: confirmDelay;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-delay-confirm sl-checkbox::part(control) {
  width: 20px;
  height: 20px;
}
.container-fluid .dashboard-greeting .dashboard-order-include .dashboard-order-details .article-row .article-delay-confirm sl-checkbox[checked]::part(control) {
  background-color: var(--sl-color-success-600);
  border-color: var(--sl-color-success-600);
}
.container-fluid .dashboard-greeting .dashboard-order-include .label {
  display: initial;
  font-size: var(--ph-fs-8);
  color: var(--ph-col-grey-text-label);
}
@media (min-width: 1024px) {
  .container-fluid .dashboard-greeting .dashboard-order-include .label {
    display: none;
  }
}
.container-fluid .security-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "changePassword" "addCredential";
  grid-gap: 20px;
}
@media (min-width: 1024px) {
  .container-fluid .security-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "changePassword addCredential";
    grid-gap: 40px;
  }
}
.container-fluid .security-container .webauthn-container {
  grid-area: addCredential;
}
.container-fluid .security-container .webauthn-container .actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (min-width: 1024px) {
  .container-fluid .security-container .webauthn-container #new_registration {
    display: none;
  }
}
.container-fluid .security-container .webauthn-container #new_registration.device-visible {
  display: block;
}
.container-fluid .security-container #change-password {
  grid-area: changePassword;
  width: 100%;
}
.container-fluid .security-container #change-password .password-info-text {
  font-size: var(--ph-fs-10);
  color: var(--sl-input-help-text-color);
  margin-bottom: 15px;
}
.container-fluid .security-container #change-password sl-input {
  margin-bottom: 10px;
}
.container-fluid .security-container #change-password #passwordStrengthContainer {
  margin-bottom: 5px;
}
.container-fluid .security-container #change-password #passwordStrengthContainer sl-progress-bar[value="25"] {
  --sl-color-primary-600: var(--sl-color-danger-600);
}
.container-fluid .security-container #change-password #passwordStrengthContainer sl-progress-bar[value="50"] {
  --sl-color-primary-600: var(--sl-color-warning-600);
}
.container-fluid .security-container #change-password #passwordStrengthContainer sl-progress-bar[value="75"] {
  --sl-color-primary-600: var(--sl-color-primary-100);
}
.container-fluid .security-container #change-password #passwordStrengthContainer sl-progress-bar[value="100"] {
  --sl-color-primary-600: var(--sl-color-success-600);
}
.container-fluid .account-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 20px;
}
@media (min-width: 1600px) {
  .container-fluid .account-container {
    grid-template-columns: 1fr 0.75fr;
  }
}
.container-fluid .account-container .user-information-container .user-information {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
  border: 1px solid var(--ph-col-grey);
  box-shadow: 2px 2px 4px -4px var(--ph-col-black);
  height: fit-content;
  padding: 20px;
}
.container-fluid .account-container .user-information-container .user-information .user-information-item {
  display: grid;
  grid-gap: 5px;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .container-fluid .account-container .user-information-container .user-information .user-information-item {
    grid-template-columns: 135px 1fr;
  }
}
.container-fluid .account-container .user-information-container .user-information .user-information-item .user-information-item-content {
  padding-left: 10px;
}
@media (min-width: 768px) {
  .container-fluid .account-container .user-information-container .user-information .user-information-item .user-information-item-content {
    padding-left: 0;
  }
}
.container-fluid .account-container .user-information-container .user-information .user-information-item ul {
  margin: 0;
  list-style-type: none;
}
.container-fluid .account-container .user-information-container .user-information .user-information-item ul li {
  padding: 0 0 5px 0;
}
.container-fluid .account-container .user-information-container .user-information .user-information-item ul li:not(:first-of-type) {
  padding-top: 5px;
}
.container-fluid .account-container .user-information-container .user-information .user-information-item .position-text {
  align-self: center;
}
.container-fluid .account-container .user-information-container .user-information .user-information-item .position {
  display: block;
}
@media (min-width: 768px) {
  .container-fluid .account-container .user-information-container .user-information .user-information-item .position {
    display: flex;
    gap: 10px;
  }
}
.container-fluid .account-container .user-information-container .user-information .user-information-item .position sl-select {
  flex: 1;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .container-fluid .account-container .user-information-container .user-information .user-information-item .position sl-select {
    margin-bottom: 0;
  }
}
.container-fluid .account-container .user-information-container .user-information .user-information-item .position sl-input {
  flex: 1;
}
.container-fluid .account-container .user-information-container .user-information .explanation {
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
  padding: 10px;
}
.container-fluid .account-container .button-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.container-fluid .account-container #default-delivery-address sl-radio:not(:last-of-type) {
  margin: 0 0 5px;
}
.container-fluid .dashboard {
  min-width: 0;
}
@media (min-width: 1024px) {
  .container-fluid .dashboard {
    margin-top: 150px;
  }
}
@media (min-width: 1024px) {
  .container-fluid .dashboard:has(.order-value-limit-approval-request) {
    margin-top: 90px;
  }
}
.container-fluid .impersonate-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "header" "impersonate" "internal-quick-impersonate";
}
@media (min-width: 768px) {
  .container-fluid .impersonate-container {
    grid-template-columns: 1fr 1fr;
    grid-template-areas: "header header" "impersonate internal-quick-impersonate";
    grid-column-gap: 20px;
  }
}
.container-fluid .impersonate-container .impersonate-header {
  grid-area: header;
}
.container-fluid .impersonate-container .impersonate {
  grid-area: impersonate;
  padding: 0;
}
.container-fluid .impersonate-container .impersonate .search-container {
  position: relative;
  margin-bottom: 30px;
}
@media (min-width: 1600px) {
  .container-fluid .impersonate-container .impersonate .search-container {
    width: 80%;
  }
}
.container-fluid .impersonate-container .impersonate .search-container sl-input {
  width: 100%;
}
.container-fluid .impersonate-container .impersonate .search-container sl-input sl-spinner {
  display: none;
}
.container-fluid .impersonate-container .impersonate .search-container sl-input sl-icon {
  display: flex;
}
.container-fluid .impersonate-container .impersonate .search-container sl-input.typing sl-spinner {
  display: flex;
}
.container-fluid .impersonate-container .impersonate .search-container sl-input.typing sl-icon {
  display: none;
}
.container-fluid .impersonate-container .impersonate .search-container sl-select {
  width: 100%;
  min-width: 100%;
}
.container-fluid .impersonate-container .impersonate .search-container sl-select sl-option {
  border: none;
  padding: 0;
}
.container-fluid .impersonate-container .impersonate .search-container .search-result {
  position: absolute;
  top: 100%;
  background: var(--ph-col-white);
  border: 1px solid var(--ph-col-grey-light);
  border-top: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1;
  padding: 5px 10px;
  display: none;
}
.container-fluid .impersonate-container .impersonate .search-container .search-result.show {
  display: block;
}
.container-fluid .impersonate-container .impersonate .search-container .search-result sl-menu-item::part(base) {
  padding: 5px;
}
.container-fluid .impersonate-container .impersonate sl-select#impersonate-portal-user {
  width: 100%;
}
@media (min-width: 1600px) {
  .container-fluid .impersonate-container .impersonate sl-select#impersonate-portal-user {
    width: 80%;
  }
}
.container-fluid .impersonate-container .impersonate sl-select#impersonate-portal-user small {
  padding: 0;
}
.container-fluid .impersonate-container .impersonate sl-select#impersonate-portal-user small .label-portal-user {
  display: grid;
  grid-template-columns: 1fr 1fr 80px;
  max-height: 40vh;
}
.container-fluid .impersonate-container .impersonate sl-option:not(:last-of-type) {
  border-bottom: 1px solid var(--ph-col-grey);
  padding: 5px 0;
}
.container-fluid .impersonate-container .internal-quick-impersonate {
  grid-area: internal-quick-impersonate;
  display: grid;
  grid-gap: 5px;
  margin-top: 20px;
}
@media (min-width: 768px) {
  .container-fluid .impersonate-container .internal-quick-impersonate {
    margin-top: 0;
  }
}
.container-fluid .impersonate-container .internal-quick-impersonate h5 {
  margin: 0;
}
.container-fluid .impersonate-container .internal-quick-impersonate sl-button {
  min-width: 315px;
  max-width: 340px;
}
.container-fluid .impersonate-container .internal-quick-impersonate sl-button::part(base) {
  font-size: var(--ph-fs-8);
}
.container-fluid .order-value-limit-approval-request {
  background: var(--ph-col-grey-background);
  border: 1px solid var(--ph-col-beige);
  border-radius: 5px;
  display: grid;
  grid-template-columns: 40px 1fr;
  grid-template-areas: "icon heading" "icon content" "icon button";
  gap: 10px;
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .container-fluid .order-value-limit-approval-request {
    grid-template-columns: 40px 1fr 125px;
    grid-template-areas: "icon heading button" "icon content button";
  }
}
.container-fluid .order-value-limit-approval-request > sl-icon {
  color: var(--ph-col-beige);
  font-size: var(--ph-fs-22);
  grid-area: icon;
}
.container-fluid .order-value-limit-approval-request h3 {
  color: var(--ph-col-beige);
  grid-area: heading;
  margin-top: 0;
}
@media (min-width: 768px) {
  .container-fluid .order-value-limit-approval-request h3 {
    margin: 0;
  }
}
.container-fluid .order-value-limit-approval-request p {
  grid-area: content;
}
.container-fluid .order-value-limit-approval-request sl-button {
  grid-area: button;
  width: 100%;
}
@media (min-width: 768px) {
  .container-fluid .order-value-limit-approval-request sl-button {
    width: fit-content;
  }
}
.container-fluid .link-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 7px;
}
@media (min-width: 768px) {
  .container-fluid .link-cards {
    grid-template-columns: repeat(5, 1fr);
  }
}
.container-fluid .link-cards .relative-container {
  position: relative;
  overflow: hidden;
}
.container-fluid .link-cards .relative-container sl-badge {
  position: absolute;
  top: 5px;
  right: 50%;
  left: 50%;
}
.container-fluid .link-cards .relative-container sl-badge.phiadukt-counter-badge::part(base) {
  width: 25px;
  height: 25px;
  font-size: var(--ph-fs-12);
}
.container-fluid .link-cards .relative-container sl-badge.new-badge {
  top: 4px;
  left: -14px;
  right: auto;
  transform: rotate(-45deg);
  padding: 0 10px;
  background: var(--ph-col-blue);
}
.container-fluid .link-cards .relative-container sl-badge.new-badge::part(base) {
  background: var(--ph-col-blue);
}
.container-fluid .link-cards .card-link {
  color: var(--ph-col-primary-text);
}
.container-fluid .link-cards .card-link.disabled {
  text-decoration: none;
}
.container-fluid .link-cards .card-link.disabled .card-basic {
  opacity: 0.3;
}
.container-fluid .link-cards .card-link.disabled .coming-soon-text {
  font-size: var(--ph-fs-10);
}
.container-fluid .link-cards .card-link .card-basic {
  width: 100%;
  text-align: center;
  box-shadow: 2px 2px 4px -4px var(--ph-col-black);
  height: 100%;
}
.container-fluid .link-cards .card-link .card-basic::part(base) {
  height: 100%;
}
.container-fluid .link-cards .card-link .card-basic.administration-card::part(base) {
  background: var(--ph-col-internal-cards);
}
.container-fluid .link-cards .card-link .card-basic p {
  margin: 0;
  font-size: var(--ph-fs-11);
}
.container-fluid .link-cards .card-link .card-basic sl-icon {
  font-size: var(--ph-fs-25);
}
.container-fluid .administration-tabs {
  margin-top: 60px;
  max-width: 100vw;
}
.container-fluid .administration-tabs sl-tab {
  position: relative;
}
.container-fluid .administration-tabs sl-tab::part(base) {
  font-size: var(--ph-fs-11);
}
@media (min-width: 1024px) {
  .container-fluid .administration-tabs sl-tab::part(base) {
    font-size: var(--ph-fs-12);
  }
}
.container-fluid .administration-tabs sl-tab sl-badge {
  position: absolute;
  top: 8px;
  right: -3px;
  display: none;
}
.container-fluid .administration-tabs sl-tab sl-badge::part(base) {
  width: 20px;
  height: 20px;
  font-size: var(--ph-fs-12);
  font-weight: bold;
}
.container-fluid .administration-tabs sl-tab.with-notifications sl-badge {
  display: block;
}
.container-fluid .portal-info-messages {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .container-fluid .portal-info-messages {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .container-fluid .portal-info-messages {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1600px) {
  .container-fluid .portal-info-messages {
    grid-template-columns: repeat(4, 1fr);
  }
}
.container-fluid .portal-info-messages .portal-info-message {
  margin: 10px auto;
  max-width: 330px;
}
.container-fluid .portal-info-messages .portal-info-message .end-date {
  margin-top: 10px;
}
.container-fluid .portal-info-messages .portal-info-message .show-from-date {
  margin-top: 10px;
}
.container-fluid .portal-info-messages .portal-info-message .message {
  margin-top: 10px;
}
.container-fluid .portal-info-messages .portal-info-message .headline {
  margin-top: 10px;
}
.container-fluid .portal-info-messages .portal-info-message .active-trigger {
  display: block;
  margin-top: 10px;
}
.container-fluid .portal-info-messages .portal-info-message .button-container {
  display: flex;
  margin-top: 20px;
}
.container-fluid .portal-info-messages .portal-info-message .button-container sl-button {
  width: 200px;
  margin-left: auto;
}
.container-fluid .portal-news-container {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .container-fluid .portal-news-container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1024px) {
  .container-fluid .portal-news-container {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (min-width: 1600px) {
  .container-fluid .portal-news-container {
    grid-template-columns: repeat(4, 1fr);
  }
}
.container-fluid .portal-news-container .portal-news {
  margin: 10px auto;
  max-width: 330px;
}
.container-fluid .portal-news-container .portal-news .text {
  margin-top: 10px;
}
.container-fluid .portal-news-container .portal-news .active-trigger {
  display: block;
  margin-top: 10px;
}
.container-fluid .portal-news-container .portal-news .button-container {
  display: flex;
  margin-top: 20px;
}
.container-fluid .portal-news-container .portal-news .button-container sl-button {
  width: 200px;
  margin-left: auto;
}
.container-fluid #add-a-line {
  max-width: 250px;
  margin-top: 30px;
}
.container-fluid .suggestion-error {
  margin-bottom: 20px;
}
.container-fluid .address-select-controls {
  margin-bottom: 30px;
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 7px;
}
@media (min-width: 768px) {
  .container-fluid .address-select-controls {
    grid-template-columns: 1fr 1fr;
  }
}
.container-fluid .address-select-controls .address-select {
  max-width: 100vw;
}
.container-fluid .address-select-controls .address-select .address-select-interactions {
  display: flex;
  flex-direction: row;
  gap: 3px;
  padding: 0 15px 0 0;
}
@media (min-width: 768px) {
  .container-fluid .address-select-controls .address-select .address-select-interactions {
    padding: 0;
  }
}
.container-fluid .address-select-controls .address-select .address-select-interactions sl-dialog::part(close-button) {
  display: none;
}
.container-fluid .address-select-controls .address-select .address-select-interactions sl-badge {
  width: 14px;
  height: 14px;
}
.container-fluid .address-select-controls .address-select .address-select-interactions sl-badge::part(base) {
  background-color: var(--ph-col-blue);
  --pulse-color: var(--ph-col-blue);
}
.container-fluid .address-select-controls .address-select .address-select-interactions sl-radio-group {
  padding: 15px;
}
.container-fluid .address-select-controls .address-select .address-select-interactions sl-radio:not(:last-of-type) {
  margin: 0 0 5px;
}
.container-fluid .address-select-controls .address-select sl-select {
  min-width: 0;
  width: 100%;
}
@media (min-width: 1600px) {
  .container-fluid .address-select-controls .address-select sl-select {
    width: 80%;
  }
}
.container-fluid .address-select-controls .address-select sl-select sl-icon {
  font-size: var(--ph-fs-10);
}
.container-fluid .address-select-controls .address-select .portal-admin-blocked-address-message {
  margin-top: 10px;
}
.container-fluid .address-select-controls .button-and-free-delivery {
  justify-self: flex-end;
  display: flex;
  flex-flow: column nowrap;
  align-items: flex-end;
  gap: 10px;
  width: 100%;
}
.container-fluid .address-select-controls sl-button.to-basket-button {
  width: 100%;
}
@media (min-width: 768px) {
  .container-fluid .address-select-controls sl-button.to-basket-button {
    width: fit-content;
  }
}
.container-fluid .address-select-controls sl-button.to-basket-button sl-icon {
  font-size: var(--ph-fs-12);
}
.container-fluid .suggestions {
  min-width: 0;
}
.container-fluid .suggestions .no-address-selected {
  margin-top: 30px;
}
.container-fluid .suggestions .filter-categories-multiple {
  margin: 0 0 15px;
}
.container-fluid .suggestions .filter-categories-multiple sl-select::part(form-control-label) {
  margin-bottom: var(--sl-spacing-3x-small);
}
.container-fluid .suggestions .filter-categories-multiple .category-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 5px 10px;
  padding: 0 15px;
}
@media (min-width: 768px) {
  .container-fluid .suggestions .filter-categories-multiple .category-options {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  }
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .filter-categories-multiple .category-options {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option::part(label) {
  white-space: normal;
  line-height: var(--sl-line-height-dense);
  text-align: center;
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option::part(base) {
  padding: 0;
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option::part(checked-icon) {
  position: absolute;
  top: 0.5rem;
  right: 1.2rem;
  z-index: 5;
  left: auto;
  background: var(--ph-col-primary);
  width: 20px;
  height: 20px;
  color: var(--ph-col-white);
  padding: 0;
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option:hover::part(base) {
  background: var(--ph-col-white);
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option:hover::part(label) {
  color: var(--sl-color-neutral-700);
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option:hover::part(checked-icon) {
  color: var(--sl-color-white);
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option[aria-selected=true] img {
  filter: saturate(100%);
  opacity: 1;
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option[aria-selected=false]::part(checked-icon) {
  visibility: visible;
  color: var(--ph-col-white);
  background: var(--ph-col-white);
  border: 1px solid var(--ph-col-primary);
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option[aria-selected=false]:hover::part(checked-icon) {
  color: var(--ph-col-white);
  background: var(--ph-col-primary);
  border: none;
}
.container-fluid .suggestions .filter-categories-multiple .category-options sl-option[tabindex="0"]::part(base) {
  background-color: initial;
  color: initial;
}
.container-fluid .suggestions .filter-categories-multiple .category-options .image {
  display: flex;
  position: relative;
  overflow: hidden;
  box-shadow: 0 5px 10px -3px var(--ph-col-grey);
  margin: 0 0 5px;
}
.container-fluid .suggestions .filter-categories-multiple .category-options .image img {
  width: 100%;
  transition: 0.3s;
  filter: saturate(0);
  opacity: 0.5;
}
.container-fluid .suggestions .filter-categories-multiple .category-options .image:hover img {
  filter: saturate(100%);
  opacity: 1;
}
.container-fluid .suggestions .suggestion-filters {
  width: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "search" "radios";
  grid-gap: 10px;
  align-items: center;
  margin-bottom: 10px;
  justify-content: space-between;
  background: var(--ph-col-grey-background);
  padding: 5px 10px 15px;
  max-height: 175px;
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .suggestion-filters {
    grid-template-columns: 540px 1fr;
    grid-template-areas: "search radios";
    justify-items: flex-end;
    max-height: 85px;
  }
}
.container-fluid .suggestions .suggestion-filters sl-input {
  grid-area: search;
  width: 100%;
}
.container-fluid .suggestions .suggestion-filters sl-input::part(form-control-label) {
  margin-bottom: var(--sl-spacing-3x-small);
}
.container-fluid .suggestions .suggestion-filters sl-input sl-spinner {
  display: none;
}
.container-fluid .suggestions .suggestion-filters sl-input.typing sl-spinner {
  display: flex;
}
.container-fluid .suggestions .suggestion-filters sl-input.typing sl-icon {
  display: none;
}
.container-fluid .suggestions .suggestion-filters sl-radio-group {
  grid-area: radios;
}
.container-fluid .suggestions .suggestion-filters sl-radio-group::part(form-control-input) {
  display: flex;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .container-fluid .suggestions .suggestion-filters sl-radio-group::part(form-control-input) {
    justify-content: start;
  }
}
.container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio {
  position: relative;
  max-width: 140px;
  --sl-toggle-size: 20px;
}
@media (min-width: 768px) {
  .container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio {
    width: 140px;
  }
  .container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio:after {
    display: block;
    content: "";
    position: absolute;
    bottom: 7px;
    background: var(--ph-col-grey-light);
    height: 1px;
    width: 100%;
    right: -77px;
  }
  .container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio:last-child:after {
    display: none;
  }
}
.container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio::part(base) {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: "label" "radio";
  justify-items: center;
  gap: 5px 0;
}
.container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio::part(control) {
  grid-area: radio;
  background-color: var(--ph-col-white);
}
.container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio::part(label) {
  grid-area: label;
}
.container-fluid .suggestions .suggestion-filters sl-radio-group sl-radio::part(checked-icon) {
  color: var(--ph-col-primary);
}
.container-fluid .suggestions .prime-text {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.container-fluid .suggestions .prime-text .promo-badge {
  margin: 0 5px;
}
.container-fluid .suggestions .articles .article {
  padding: 5px 7px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas: "article-title article-title" "article-number article-number" "price price" "amount basket-button";
  grid-gap: 5px;
  align-items: center;
  border: 1px solid var(--ph-col-grey);
  box-shadow: 2px 2px 4px -4px var(--ph-col-black);
  margin: 10px 0;
  max-width: calc(99vw - 40px);
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article {
    grid-template-columns: 1fr 1fr 100px 180px;
    grid-template-areas: "article-title article-title amount basket-button" "article-number article-number price price";
  }
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article {
    grid-template-columns: 1fr 160px 150px 100px 180px;
    grid-template-areas: "article-title article-number price amount basket-button";
    grid-column-gap: 10px;
  }
}
@media (min-width: 1600px) {
  .container-fluid .suggestions .articles .article {
    grid-template-columns: 1fr 275px 200px 100px 160px;
  }
}
.container-fluid .suggestions .articles .article[is-bottleneck=true] {
  grid-template-areas: "article-title article-title" "article-number article-number" "price price" "amount basket-button" "alternatives alternatives";
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article[is-bottleneck=true] {
    grid-template-areas: "article-title article-title amount basket-button" "article-number . price price" "alternatives alternatives alternatives alternatives";
  }
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article[is-bottleneck=true] {
    grid-template-areas: "article-title article-number price amount basket-button" "alternatives alternatives alternatives alternatives alternatives";
  }
}
.container-fluid .suggestions .articles .article.blocked {
  position: relative;
  overflow: hidden;
  grid-template-areas: "blocked-info blocked-info" "article-title article-title" "article-number article-number" "price price" "amount basket-button";
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article.blocked {
    grid-template-areas: "blocked-info blocked-info blocked-info blocked-info" "article-title article-title amount basket-button" "article-number article-number price price";
  }
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article.blocked {
    grid-template-areas: "blocked-info blocked-info blocked-info blocked-info blocked-info" "article-title article-number price amount basket-button";
  }
}
.container-fluid .suggestions .articles .article.blocked[is-bottleneck=true] {
  grid-template-areas: "blocked-info blocked-info" "article-title article-title" "article-number article-number" "price price" "amount basket-button" "alternatives alternatives";
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article.blocked[is-bottleneck=true] {
    grid-template-areas: "blocked-info blocked-info blocked-info blocked-info" "article-title article-title amount basket-button" "article-number . price price" "alternatives alternatives alternatives alternatives";
  }
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article.blocked[is-bottleneck=true] {
    grid-template-areas: "blocked-info blocked-info blocked-info blocked-info blocked-info" "article-title article-number price amount basket-button" "alternatives alternatives alternatives alternatives alternatives";
  }
}
.container-fluid .suggestions .articles .article.blocked:before {
  content: "";
  width: 100%;
  height: 100%;
  background: #fff;
  top: 0;
  left: 0;
  position: absolute;
  opacity: 0.6;
}
.container-fluid .suggestions .articles .article.blocked .article-blocked-info {
  background: var(--ph-col-orange);
  padding: 10px 25px;
  text-align: center;
  grid-area: blocked-info;
  z-index: 2;
  box-shadow: 2px 2px 4px -4px var(--ph-col-black);
}
.container-fluid .suggestions .articles .article.in-basket {
  position: relative;
}
.container-fluid .suggestions .articles .article.promo-article {
  background-color: var(--ph-col-product-highlight-background);
}
.container-fluid .suggestions .articles .article .in-basket-icon {
  display: none;
}
.container-fluid .suggestions .articles .article .in-basket-icon.show {
  display: flex;
  position: absolute;
  right: -32px;
  padding: 15px 5px;
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
  border-radius: 0 10px 10px 0;
  font-size: var(--ph-fs-16);
}
.container-fluid .suggestions .articles .article .article-header {
  grid-area: article-title;
  display: flex;
}
.container-fluid .suggestions .articles .article .article-header .article-name-container {
  display: flex;
  gap: 15px;
  align-items: center;
}
.container-fluid .suggestions .articles .article .article-header .article-name-container.trigger-3d {
  cursor: zoom-in;
}
.container-fluid .suggestions .articles .article .article-header .article-name-container .img-container {
  position: relative;
}
.container-fluid .suggestions .articles .article .article-header .article-name-container .img-container .icon-highlight {
  position: absolute;
  right: -10px;
  top: -12px;
}
.container-fluid .suggestions .articles .article .article-header .article-name-container .img-container .icon-3d {
  position: absolute;
  right: -10px;
  bottom: 5px;
  font-size: var(--ph-fs-16);
  color: var(--ph-col-primary);
}
.container-fluid .suggestions .articles .article .article-header .article-name-container img {
  width: 60px;
  height: 60px;
}
.container-fluid .suggestions .articles .article .article-header .article-name-container .article-name h4 {
  display: flex;
  align-items: center;
  margin: 0 auto;
}
.container-fluid .suggestions .articles .article .price-container {
  grid-area: price;
  display: grid;
  grid-template-columns: 100px 1fr;
  grid-template-areas: "priceLabel onlinePrice" ". rawMaterialSurcharge";
  grid-column-gap: 5px;
  align-items: baseline;
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article .price-container {
    justify-items: flex-start;
  }
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article .price-container {
    grid-template-columns: 1fr;
    grid-template-areas: "priceLabel" "onlinePrice" "rawMaterialSurcharge";
  }
}
.container-fluid .suggestions .articles .article .price-container .price-label {
  grid-area: priceLabel;
  font-size: var(--ph-fs-8);
  color: var(--ph-col-grey-text-price-label);
}
.container-fluid .suggestions .articles .article .price-container .online-price {
  grid-area: onlinePrice;
}
.container-fluid .suggestions .articles .article .price-container .online-price h4 {
  margin: 0;
  font-weight: normal;
  justify-self: flex-start;
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article .price-container .online-price h4 {
    font-weight: 600;
  }
}
.container-fluid .suggestions .articles .article .price-container .online-price h4.with-discount {
  display: flex;
  align-items: center;
  gap: 3px;
  color: var(--sl-color-danger-500);
}
.container-fluid .suggestions .articles .article .price-container .online-price h4.with-discount sl-icon {
  color: var(--ph-col-white);
  background: var(--sl-color-danger-500);
  padding: 1px 6px;
  border-radius: 5px;
}
.container-fluid .suggestions .articles .article .price-container .online-price .line-discount {
  font-size: var(--ph-fs-8);
  color: var(--ph-col-grey-text-price-label);
}
.container-fluid .suggestions .articles .article .price-container .raw-material-surcharge {
  grid-area: rawMaterialSurcharge;
  display: flex;
  justify-self: flex-start;
  align-items: center;
}
.container-fluid .suggestions .articles .article .price-container .raw-material-surcharge .philipp-info-circle {
  margin-left: 5px;
}
.container-fluid .suggestions .articles .article .add-button {
  grid-area: basket-button;
  justify-self: flex-end;
}
.container-fluid .suggestions .articles .article .add-button sl-button::part(prefix) {
  font-size: var(--ph-fs-12);
}
.container-fluid .suggestions .articles .article .add-button sl-button .button-span:after {
  content: attr(data-text-default);
}
.container-fluid .suggestions .articles .article .add-button sl-button sl-icon {
  font-size: var(--ph-fs-15);
}
.container-fluid .suggestions .articles .article .add-button.in-basket sl-button .button-span:after {
  content: attr(data-text-inbasket);
}
.container-fluid .suggestions .articles .article .article-numbers {
  grid-area: article-number;
}
.container-fluid .suggestions .articles .article .article-numbers .article-number {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3px;
}
.container-fluid .suggestions .articles .article .article-numbers .article-number sl-icon {
  font-size: var(--ph-fs-9);
}
.container-fluid .suggestions .articles .article .article-numbers .article-number .label {
  white-space: nowrap;
}
.container-fluid .suggestions .articles .article .article-numbers .article-number .label sl-tooltip {
  white-space: initial;
}
.container-fluid .suggestions .articles .article .article-amount {
  display: flex;
  align-items: center;
  min-width: 0;
  margin: auto;
}
.container-fluid .suggestions .articles .article .article-amount.in-basket sl-input:before {
  content: attr(data-text-inbasket) !important;
  color: var(--ph-col-green);
}
.container-fluid .suggestions .articles .article .article-amount sl-input {
  width: 75px;
  margin-right: 5px;
  position: relative;
}
.container-fluid .suggestions .articles .article .article-amount sl-input:before {
  content: attr(data-text-default);
  position: absolute;
  left: 0;
  top: 2px;
  font-size: var(--ph-fs-8);
  white-space: nowrap;
}
.container-fluid .suggestions .articles .article .article-alternatives {
  grid-area: alternatives;
}
.container-fluid .suggestions .articles .article .article-alternatives sl-details::part(header) {
  padding: 5px 8px;
}
.container-fluid .suggestions .articles .article .article-alternatives sl-badge::part(base) {
  font-size: var(--ph-fs-9);
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article .article-alternatives sl-badge::part(base) {
    font-size: var(--ph-fs-10);
  }
}
.container-fluid .suggestions .articles .article .article-alternatives-container {
  grid-area: alternatives;
}
.container-fluid .suggestions .articles .article .article-alternatives-container sl-details::part(header) {
  padding: 5px 8px;
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article .article-alternatives-container sl-details::part(header) {
    gap: 15px;
  }
}
@media (min-width: 768px) {
  .container-fluid .suggestions .articles .article .article-alternatives-container sl-details::part(summary) {
    flex: initial;
  }
}
.container-fluid .suggestions .articles .article .article-alternatives-container sl-details::part(content) {
  padding: 0;
}
.container-fluid .suggestions .articles .article .article-alternatives-container sl-badge::part(base) {
  font-size: var(--ph-fs-9);
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article .article-alternatives-container sl-badge::part(base) {
    font-size: var(--ph-fs-10);
  }
}
.container-fluid .suggestions .articles .article .article-alternatives-container sl-badge + span {
  margin: 0 0 0 10px;
  font-size: var(--ph-fs-9);
}
@media (min-width: 1024px) {
  .container-fluid .suggestions .articles .article .article-alternatives-container sl-badge + span {
    font-size: var(--ph-fs-10);
  }
}
.container-fluid .suggestions .articles .article .article-alternatives-container .article {
  border: none;
  border-bottom: 1px solid var(--ph-col-grey-background);
  box-shadow: none;
  border-radius: 0;
  margin: 0 0 5px;
  width: calc(100% - 35px);
}
.container-fluid .suggestions .articles .article .article-alternatives-container .article-name a {
  text-decoration: underline;
  color: var(--ph-col-green);
  font-size: var(--ph-fs-10);
  display: block;
  margin: 3px 0 0;
}
.container-fluid .suggestions .articles .article .article-alternatives-container .article-name a:hover {
  color: var(--ph-col-green-hover);
}
.container-fluid .suggestions .articles .article .article-alternatives-container h4 {
  font-size: var(--ph-fs-12);
}
.container-fluid .suggestions .articles .article .article-alternatives-container .article-alternatives > div:last-of-type {
  border: none;
}
.container-fluid .suggestions .articles .article .article-spinner {
  font-size: var(--ph-fs-25);
  margin: 0 auto;
  display: flex;
}
.container-fluid .suggestions sl-dialog.dialog-3d::part(panel) {
  width: 100%;
  height: 100%;
}
@media (min-width: 768px) {
  .container-fluid .suggestions sl-dialog.dialog-3d::part(panel) {
    height: 70%;
  }
}
@media (min-width: 1024px) {
  .container-fluid .suggestions sl-dialog.dialog-3d::part(panel) {
    width: 70%;
  }
}
.container-fluid .suggestions sl-dialog.dialog-3d .rendering-container {
  width: 100%;
  height: 100%;
}
.container-fluid .suggestions sl-dialog.dialog-3d .rendering-container iframe {
  width: 100%;
  height: 100%;
}
.container-fluid .business-goals {
  border: 0;
  width: 100%;
  height: 70vh;
}
@media (min-width: 768px) {
  .container-fluid .business-goals {
    height: 1000px;
  }
}
@media (min-width: 1024px) {
  .container-fluid .business-goals {
    height: 1700px;
  }
}
@media (min-width: 1600px) {
  .container-fluid .business-goals {
    height: 1820px;
  }
}
@media (min-width: 1024px) {
  .container-fluid:has(> sl-alert.status-message[open]) .dashboard-greeting {
    margin-top: 0;
  }
}

.custom_error_page {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden auto;
  color: var(--ph-col-white);
}
.custom_error_page:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  background: -moz-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 27%, rgba(0, 0, 0, 0) 100%);
  background: -webkit-linear-gradient(left, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 27%, rgba(0, 0, 0, 0) 100%);
  background: linear-gradient(to right, rgb(0, 0, 0) 0%, rgb(0, 0, 0) 27%, rgba(0, 0, 0, 0) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#000000", endColorstr="#00000000",GradientType=1 );
  z-index: 5;
}
.custom_error_page .error-text-container {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  padding: 0 10px;
  z-index: 10;
  display: flex;
}
.custom_error_page .error-text-container .error-text {
  max-width: 80%;
  margin: auto auto auto 30px;
  text-shadow: 1px 1px 3px #000;
}
@media (min-width: 768px) {
  .custom_error_page .error-text-container .error-text {
    margin: 40px 0 0 30px;
  }
}
@media (min-width: 1024px) {
  .custom_error_page .error-text-container .error-text {
    margin: 75px;
  }
}
.custom_error_page .error-text-container .error-text .headline {
  margin: 0 0 45px;
}
.custom_error_page .error-text-container .error-text .headline h1 {
  font-size: var(--ph-fs-25);
  margin: 0 0 10px;
}
@media (min-width: 768px) {
  .custom_error_page .error-text-container .error-text .headline p {
    font-size: var(--ph-fs-16);
  }
}
.custom_error_page .error-text-container .error-text .text {
  margin-bottom: 2rem;
  font-size: var(--ph-fs-14);
}
@media (min-width: 768px) {
  .custom_error_page .error-text-container .error-text .text {
    font-size: var(--ph-fs-16);
  }
}
.custom_error_page .error-text-container .error-text a {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ph-col-white);
}
.custom_error_page .error-text-container .error-text img.icon {
  width: 25px;
}
.custom_error_page .error-text-container .error-text .mail-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 20px;
  margin-bottom: 3rem;
  font-size: var(--ph-fs-14);
}
@media (min-width: 768px) {
  .custom_error_page .error-text-container .error-text .mail-container {
    grid-template-columns: 230px 1fr;
    font-size: var(--ph-fs-16);
  }
}
.custom_error_page .error-text-container .error-text .steward-container {
  font-size: var(--ph-fs-14);
  padding-left: 5px;
  margin-bottom: 2rem;
}
@media (min-width: 768px) {
  .custom_error_page .error-text-container .error-text .steward-container {
    font-size: var(--ph-fs-16);
    padding-left: 20px;
  }
}
.custom_error_page .error-text-container .error-text .steward-container .steward {
  display: grid;
  grid-template-columns: 15px 1fr;
  grid-template-areas: "mark name" "mark phone";
  grid-row-gap: 5px;
  margin-bottom: 10px;
}
@media (min-width: 768px) {
  .custom_error_page .error-text-container .error-text .steward-container .steward {
    grid-template-columns: 15px 200px 1fr;
    grid-template-areas: "mark name phone";
    grid-column-gap: 10px;
  }
}
.custom_error_page .error-text-container .error-text .steward-container .steward .mark {
  grid-area: mark;
}
.custom_error_page .error-text-container .error-text .steward-container .steward .name {
  grid-area: name;
}
.custom_error_page .error-text-container .error-text .steward-container .steward .phone {
  grid-area: phone;
}
.custom_error_page img {
  height: 100%;
  position: inherit;
  right: 0;
  top: 0;
}
@media (orientation: portrait) {
  .custom_error_page img {
    transform: translateX(40%);
  }
}
@media (min-width: 1024px) {
  .custom_error_page img {
    transform: initial;
  }
}
.custom_error_page .error-link {
  font-size: var(--ph-fs-18);
  color: var(--ph-col-white);
  background: var(--ph-col-primary);
  border-radius: 25px;
  padding: 10px 20px;
  cursor: pointer;
}

.color-key-container {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 10px;
}
@media (min-width: 768px) {
  .color-key-container {
    grid-template-columns: auto auto;
    width: fit-content;
    grid-gap: 50px;
    justify-content: flex-start;
  }
}
.color-key-container .color-key {
  display: flex;
  align-items: center;
}
.color-key-container .color-key .key {
  width: 10px;
  height: 40px;
  background: var(--ph-col-orange-link);
}
.color-key-container .color-key .key.phiadukt {
  background: var(--ph-col-primary);
}
.color-key-container .color-key span {
  margin-left: 10px;
}
.color-key-container.disabled {
  visibility: hidden;
}

@media (min-width: 768px) {
  .customer-management {
    width: 50%;
  }
}
@media (min-width: 1600px) {
  .customer-management {
    width: 30%;
  }
}
.customer-management .search-container {
  position: relative;
  margin-bottom: 30px;
}
@media (min-width: 768px) {
  .customer-management .search-container {
    display: flex;
    align-items: flex-end;
  }
}
.customer-management .search-container sl-input {
  flex: 1;
}
.customer-management .search-container sl-input sl-spinner {
  display: none;
}
.customer-management .search-container sl-input sl-icon {
  display: flex;
}
.customer-management .search-container sl-input.typing sl-spinner {
  display: flex;
}
.customer-management .search-container sl-input.typing sl-icon {
  display: none;
}
.customer-management .search-container .search-result {
  position: absolute;
  top: 100%;
  background: var(--ph-col-white);
  border: 1px solid var(--ph-col-grey-light);
  border-top: 0;
  width: 100%;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1;
  padding: 5px 10px;
  display: none;
}
.customer-management .search-container .search-result.show {
  display: block;
}
.customer-management .search-container .search-result .customer-management-contact {
  display: block;
  padding: 5px 0;
}
.customer-management .search-container .search-result .submit-button {
  position: sticky;
  bottom: 0;
  display: block;
  width: 200px;
  margin: 10px 0 0 auto;
}

.corporate-customer-user-select-header {
  text-align: center;
}

.corporate-customer-user-select {
  width: 100%;
  max-width: 1100px;
  display: grid;
  justify-items: center;
  grid-template-columns: 1fr 1fr;
  grid-gap: 15px;
  margin: 20px auto 0;
}
@media (min-width: 768px) {
  .corporate-customer-user-select {
    grid-template-columns: repeat(3, 1fr);
  }
}
.corporate-customer-user-select .card-link {
  color: var(--ph-col-black);
  height: 100%;
  width: 100%;
  max-width: 300px;
}
.corporate-customer-user-select .card-link.disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.corporate-customer-user-select .card-link .user-select-card {
  text-align: center;
  box-shadow: 2px 2px 4px -4px var(--ph-col-black);
  height: 100%;
  width: 100%;
}
.corporate-customer-user-select .card-link .user-select-card::part(base) {
  height: 100%;
}
.corporate-customer-user-select .card-link .user-select-card p {
  margin: 10px 0 0;
}
.corporate-customer-user-select .card-link .user-select-card sl-icon {
  font-size: var(--ph-fs-25);
}

.address-select-label::part(base) {
  padding-left: 10px;
  font-weight: bold;
}

.documents {
  margin-bottom: 10px;
}
.documents::part(base) {
  color: var(--ph-col-primary);
  border: none;
  background: inherit;
}
.documents::part(header) {
  padding: 5px 8px;
}
@media (min-width: 768px) {
  .documents::part(header) {
    gap: 15px;
  }
}
@media (min-width: 768px) {
  .documents::part(summary) {
    flex: initial;
  }
}
.documents .company-certificates {
  display: flex;
  flex-wrap: wrap;
  column-gap: 15px;
  row-gap: 10px;
}
.documents .company-certificates sl-icon {
  font-size: var(--ph-fs-12);
}

.start-codes-container .new-code {
  margin: 20px 0 50px;
  display: grid;
  grid-template-columns: 180px 1fr;
  grid-template-areas: "input checkbox" ". button";
  grid-gap: 10px;
  align-items: center;
}
@media (min-width: 768px) {
  .start-codes-container .new-code {
    grid-template-columns: 180px 100px 140px 1fr;
    grid-template-areas: "input checkbox button .";
  }
}
.start-codes-container .new-code sl-input {
  grid-area: input;
}
.start-codes-container .new-code sl-checkbox {
  grid-area: checkbox;
}
.start-codes-container .new-code sl-button {
  grid-area: button;
  width: 140px;
}
.start-codes-container sl-details {
  margin: 10px 0;
}
.start-codes-container sl-details .user-info {
  display: flex;
  align-items: center;
  padding: 10px 5px;
  column-gap: 10px;
}
.start-codes-container sl-details .user-info:not(:last-of-type) {
  border-bottom: 1px solid var(--ph-col-grey);
}
.start-codes-container sl-details .user-info .start-code {
  padding: 3px;
  background: var(--ph-col-primary);
  color: var(--ph-col-white);
}
.start-codes-container sl-details .user-info .delete {
  width: 100%;
  display: contents;
}
.start-codes-container sl-details .user-info .delete .delete-start-code {
  margin-left: auto;
}
.start-codes-container sl-details .user-info .delete .delete-start-code::part(base) {
  font-size: var(--ph-fs-14);
}

.icon-highlight {
  font-size: var(--ph-fs-16);
  color: var(--ph-col-icon-highlight);
}

.status-messages sl-alert {
  margin: 0 0 5px;
}
.status-messages sl-alert:not(:defined) {
  visibility: hidden;
  display: block;
  min-height: 78px;
}
.status-messages sl-alert .success-icon {
  color: var(--ph-col-green);
  font-size: var(--ph-fs-25);
}
.status-messages sl-alert .success-icon.hidden {
  display: none;
}

.more_details {
  margin: 0 4px;
}

.further_information .open_details {
  position: fixed;
  top: 5px;
  right: -20px;
  z-index: 10;
}
@media (min-width: 768px) {
  .further_information .open_details {
    right: -1px;
    top: 70px;
  }
}
.further_information .open_details::part(base) {
  font-size: var(--ph-fs-14);
  border-radius: 5px 0 0 5px;
}

.further_information_setup {
  padding: 15px;
  background-color: var(--ph-col-further-information-setup-background);
}
.further_information_setup .open_details::part(base) {
  font-size: var(--ph-fs-14);
}

#create-credential-dialog::part(body) {
  padding-top: 0;
}
#create-credential-dialog::part(title) {
  padding: 0;
}
#create-credential-dialog::part(close-button) {
  padding-right: 0;
}
#create-credential-dialog h3 {
  margin-top: 0;
  color: var(--ph-col-blue);
  font-size: var(--ph-fs-14);
}
#create-credential-dialog .hint {
  color: var(--ph-col-grey-infotext);
  font-size: var(--ph-fs-10);
}
#create-credential-dialog .hint + sl-icon {
  font-size: var(--ph-fs-30);
  display: block;
  margin: 25px auto;
  color: var(--ph-col-grey-infotext);
}
#create-credential-dialog sl-button#new_registration::part(base) {
  background-color: var(--ph-col-blue);
  border: none;
  color: var(--ph-col-white);
  font-size: var(--ph-fs-11);
}
#create-credential-dialog sl-button#new_registration:hover::part(base) {
  background-color: var(--ph-col-blue-hover);
}
#create-credential-dialog sl-button[variant=text] {
  margin: 5px 0 15px;
}
#create-credential-dialog sl-button[variant=text]::part(base) {
  color: var(--ph-col-blue);
}
#create-credential-dialog .dialog-content {
  text-align: center;
}
#create-credential-dialog small {
  display: block;
  line-height: var(--ph-fs-12);
}

.adjust_cookiefirst_setting {
  color: var(--ph-col-blue);
}

.zoomable-image {
  position: relative;
  width: 60px;
  height: 60px;
  cursor: zoom-in;
}
.zoomable-image img {
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.zoomable-image sl-icon.zoom-in-icon {
  position: absolute;
  bottom: 0;
  right: 0;
  font-size: var(--ph-fs-10);
  color: var(--ph-col-black);
  pointer-events: none;
}

.mail-management form#mail-language {
  margin-top: 40px;
  width: 100%;
}
@media (min-width: 768px) {
  .mail-management form#mail-language {
    width: 60%;
  }
}
@media (min-width: 1024px) {
  .mail-management form#mail-language {
    width: 50%;
  }
}
@media (min-width: 1280px) {
  .mail-management form#mail-language {
    width: 33%;
  }
}
.mail-management form#mail-language .language-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (min-width: 768px) {
  .mail-management form#mail-language .language-toggle {
    justify-content: end;
  }
}
@media (min-width: 1024px) {
  .mail-management form#mail-language .language-toggle {
    justify-content: normal;
  }
}
.mail-management form#mail-language .language-toggle div {
  font-size: var(--ph-fs-12);
}
.mail-management form#mail-language .language-toggle sl-switch {
  --width: 50px;
  --height: 25px;
  --thumb-size: 27px;
}
.mail-management form#mail-language .language-toggle sl-switch::part(control) {
  background: linear-gradient(#000 33.333%, #FF0000 33.33% 66.666%, #FFCC00 66.666%);
}
.mail-management form#mail-language .language-toggle sl-switch[checked]::part(control) {
  background: linear-gradient(transparent 40%, #C8102E 40% 60%, transparent 60%), linear-gradient(to right, transparent 45%, #C8102E 45% 55%, transparent 55%), linear-gradient(transparent 35%, #FFF 35% 65%, transparent 65%), linear-gradient(to right, transparent 42.25%, #FFF 42.25% 57.75%, transparent 42.25%), linear-gradient(25deg, transparent 47.5%, #C8102E 47.5% 52.5%, transparent 52.5%), linear-gradient(-25deg, transparent 47.5%, #C8102E 47.5% 52.5%, transparent 52.5%), linear-gradient(25deg, transparent 45%, #FFF 45% 55%, transparent 55%), linear-gradient(-25deg, transparent 45%, #FFF 45% 55%, transparent 55%);
  background-color: #012169;
}
.mail-management form.mail-cancellation {
  width: 100%;
}
@media (min-width: 768px) {
  .mail-management form.mail-cancellation {
    width: 60%;
  }
}
@media (min-width: 1024px) {
  .mail-management form.mail-cancellation {
    width: 50%;
  }
}
@media (min-width: 1280px) {
  .mail-management form.mail-cancellation {
    width: 33%;
  }
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box {
  margin-top: 40px;
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box .box-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box .box-header h3 {
  margin: 0;
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box .box-header sl-switch::part(label) {
  font-weight: bold;
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box .cancellation-item {
  display: grid;
  grid-template-columns: 1fr 100px;
  grid-gap: 10px;
  align-items: center;
  margin: 10px 0;
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box .cancellation-item .name {
  font-weight: bold;
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box sl-switch {
  justify-self: end;
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box sl-switch::part(control) {
  background-color: var(--sl-color-danger-600);
  border-color: var(--sl-color-danger-600);
}
.mail-management form.mail-cancellation .cancellation-boxes .cancellation-box sl-switch[checked]::part(control) {
  background-color: var(--ph-col-green);
  border-color: var(--ph-col-green);
}
.mail-management .button-container {
  display: flex;
  justify-content: end;
  width: 100%;
  margin-top: 30px;
}
.mail-management .button-container sl-button {
  width: fit-content;
}

.free-delivery-information-wrapper {
  border-radius: var(--sl-border-radius-medium);
  padding: 0 var(--sl-spacing-medium);
  width: 100%;
}
@media (min-width: 768px) {
  .free-delivery-information-wrapper {
    max-width: fit-content;
  }
}
.free-delivery-information-wrapper:has([loaded]) {
  background-color: var(--ph-col-grey-background);
}
.free-delivery-information-wrapper:has([empty]) {
  display: none;
}

.flatpickr-time {
  width: 100%;
}
.flatpickr-time .holiday-key {
  width: 100%;
  padding: 5px;
  display: flex;
  justify-content: space-evenly;
}
.flatpickr-time .holiday-key .key {
  display: inline-flex;
  align-items: center;
}
.flatpickr-time .holiday-key .key .feastDay {
  position: initial;
  margin-right: 5px;
}

.feastDay {
  position: absolute;
  width: 10px;
  height: 10px;
  border: 1px solid var(--sl-color-danger-500);
  border-radius: 100%;
  bottom: 0;
  left: calc(50% - 5px);
  content: " ";
  display: block;
  background: var(--sl-color-danger-500);
}
.feastDay.company {
  background: var(--ph-col-orange);
  border-color: var(--ph-col-orange);
}

sl-alert.beige::part(base) {
  border-top-color: var(--ph-col-beige);
}
sl-alert.beige sl-icon {
  color: var(--ph-col-beige);
  font-size: var(--ph-fs-16);
  flex-shrink: 0;
}
sl-alert.beige strong {
  font-size: var(--ph-fs-10);
  color: var(--ph-col-beige);
}

sl-button.beige:not([outline])::part(base) {
  background-color: var(--ph-col-beige);
  color: var(--ph-col-white);
  border: none;
}
sl-button.beige:not([outline]):hover::part(base) {
  background-color: var(--ph-col-beige-hover);
}

sl-button.beige[outline]::part(base) {
  border: 2px solid var(--ph-col-beige);
  color: var(--ph-col-beige);
}
sl-button.beige[outline]:hover::part(base) {
  background-color: var(--ph-col-beige-hover);
  color: var(--ph-col-white);
}

.beige {
  color: var(--ph-col-beige);
}

.textstyle-s {
  font-size: var(--ph-fs-10);
}

.textstyle-m {
  font-size: var(--ph-fs-12);
}

.tax-text {
  font-weight: normal;
  font-size: var(--ph-fs-8);
}

.mt-0 {
  margin-top: 0;
}

.mb-0 {
  margin-bottom: 0;
}

.mt-5 {
  margin-top: 5px;
}

.mb-5 {
  margin-bottom: 5px;
}

.mt-10 {
  margin-top: 10px;
}

.mb-10 {
  margin-bottom: 10px;
}

.mt-15 {
  margin-top: 15px;
}

.mb-15 {
  margin-bottom: 15px;
}

.mt-20 {
  margin-top: 20px;
}

.mb-20 {
  margin-bottom: 20px;
}

.mt-25 {
  margin-top: 25px;
}

.mb-25 {
  margin-bottom: 25px;
}

.mt-30 {
  margin-top: 30px;
}

.mb-30 {
  margin-bottom: 30px;
}

.mt-40 {
  margin-top: 40px;
}

.mb-40 {
  margin-bottom: 40px;
}

.mt-50 {
  margin-top: 50px;
}

.mb-50 {
  margin-bottom: 50px;
}

.mt-60 {
  margin-top: 60px;
}

.mb-60 {
  margin-bottom: 60px;
}

.mt-70 {
  margin-top: 70px;
}

.mb-70 {
  margin-bottom: 70px;
}

.mt-80 {
  margin-top: 80px;
}

.mb-80 {
  margin-bottom: 80px;
}

.mt-90 {
  margin-top: 90px;
}

.mb-90 {
  margin-bottom: 90px;
}

.mt-100 {
  margin-top: 100px;
}

.mb-100 {
  margin-bottom: 100px;
}

/*# sourceMappingURL=style.css.map */