@font-face {
  font-family: "icons";
  font-display: swap;
  src: url("../fonts/icons.woff2") format("woff2"), url("../fonts/icons.woff") format("woff");
}
.icon {
  font-family: "icons";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none;
  text-transform: none;
}

:root {
  --base-icon-360: "\E001";
  --base-icon-academy: "\E002";
  --base-icon-adress: "\E003";
  --base-icon-adressbook: "\E004";
  --base-icon-angle-down: "\E005";
  --base-icon-angle-left: "\E006";
  --base-icon-angle-right: "\E007";
  --base-icon-angle-up: "\E008";
  --base-icon-arrow-down: "\E009";
  --base-icon-arrow-left: "\E00A";
  --base-icon-arrow-right: "\E00B";
  --base-icon-arrow-up: "\E00C";
  --base-icon-basket: "\E00D";
  --base-icon-bike: "\E00E";
  --base-icon-chart: "\E00F";
  --base-icon-chat: "\E010";
  --base-icon-check-circle: "\E011";
  --base-icon-check: "\E012";
  --base-icon-clock: "\E013";
  --base-icon-close: "\E014";
  --base-icon-columns: "\E015";
  --base-icon-copy: "\E016";
  --base-icon-date: "\E017";
  --base-icon-document-archive: "\E018";
  --base-icon-download: "\E019";
  --base-icon-drag-drop: "\E01A";
  --base-icon-edit: "\E01B";
  --base-icon-exclamation-circle: "\E01C";
  --base-icon-exclamation: "\E01D";
  --base-icon-expand: "\E01E";
  --base-icon-facebook: "\E01F";
  --base-icon-file-doc: "\E020";
  --base-icon-file-document: "\E021";
  --base-icon-file-image: "\E022";
  --base-icon-file-pdf: "\E023";
  --base-icon-file-powerpoint: "\E024";
  --base-icon-file-video: "\E025";
  --base-icon-file-xls: "\E026";
  --base-icon-filter: "\E027";
  --base-icon-gift: "\E028";
  --base-icon-heart-filled: "\E029";
  --base-icon-heart: "\E02A";
  --base-icon-home: "\E02B";
  --base-icon-info: "\E02C";
  --base-icon-instagram: "\E02D";
  --base-icon-invoice: "\E02E";
  --base-icon-language: "\E02F";
  --base-icon-linkedin: "\E030";
  --base-icon-list: "\E031";
  --base-icon-loading: "\E032";
  --base-icon-lock: "\E033";
  --base-icon-logged: "\E034";
  --base-icon-login: "\E035";
  --base-icon-logout: "\E036";
  --base-icon-mail: "\E037";
  --base-icon-map-pin: "\E038";
  --base-icon-marketing: "\E039";
  --base-icon-minus: "\E03A";
  --base-icon-password-hide: "\E03B";
  --base-icon-password-show: "\E03C";
  --base-icon-pause: "\E03D";
  --base-icon-payment: "\E03E";
  --base-icon-pen-to-square: "\E03F";
  --base-icon-phone: "\E040";
  --base-icon-pintereset: "\E041";
  --base-icon-play: "\E042";
  --base-icon-plus: "\E043";
  --base-icon-print: "\E044";
  --base-icon-question: "\E045";
  --base-icon-quickorder: "\E046";
  --base-icon-register: "\E047";
  --base-icon-reload: "\E048";
  --base-icon-retoure: "\E049";
  --base-icon-rma: "\E04A";
  --base-icon-search: "\E04B";
  --base-icon-send: "\E04C";
  --base-icon-service: "\E04D";
  --base-icon-settings: "\E04E";
  --base-icon-share: "\E04F";
  --base-icon-shipping: "\E050";
  --base-icon-sorting: "\E051";
  --base-icon-star-filled: "\E052";
  --base-icon-star-half: "\E053";
  --base-icon-star: "\E054";
  --base-icon-subscriptions: "\E055";
  --base-icon-tiktok: "\E056";
  --base-icon-trash: "\E057";
  --base-icon-twitter: "\E058";
  --base-icon-upload: "\E059";
  --base-icon-user: "\E05A";
  --base-icon-users: "\E05B";
  --base-icon-voice: "\E05C";
  --base-icon-whatsapp: "\E05D";
  --base-icon-xing: "\E05E";
  --base-icon-youtube: "\E05F";
  --base-icon-zoom: "\E060";
}

.icon-360:before {
  content: var(--base-icon-360);
}

.icon-academy:before {
  content: var(--base-icon-academy);
}

.icon-adress:before {
  content: var(--base-icon-adress);
}

.icon-adressbook:before {
  content: var(--base-icon-adressbook);
}

.icon-angle-down:before {
  content: var(--base-icon-angle-down);
}

.icon-angle-left:before {
  content: var(--base-icon-angle-left);
}

.icon-angle-right:before {
  content: var(--base-icon-angle-right);
}

.icon-angle-up:before {
  content: var(--base-icon-angle-up);
}

.icon-arrow-down:before {
  content: var(--base-icon-arrow-down);
}

.icon-arrow-left:before {
  content: var(--base-icon-arrow-left);
}

.icon-arrow-right:before {
  content: var(--base-icon-arrow-right);
}

.icon-arrow-up:before {
  content: var(--base-icon-arrow-up);
}

.icon-basket:before {
  content: var(--base-icon-basket);
}

.icon-bike:before {
  content: var(--base-icon-bike);
}

.icon-chart:before {
  content: var(--base-icon-chart);
}

.icon-chat:before {
  content: var(--base-icon-chat);
}

.icon-check-circle:before {
  content: var(--base-icon-check-circle);
}

.icon-check:before {
  content: var(--base-icon-check);
}

.icon-clock:before {
  content: var(--base-icon-clock);
}

.icon-close:before {
  content: var(--base-icon-close);
}

.icon-columns:before {
  content: var(--base-icon-columns);
}

.icon-copy:before {
  content: var(--base-icon-copy);
}

.icon-date:before {
  content: var(--base-icon-date);
}

.icon-document-archive:before {
  content: var(--base-icon-document-archive);
}

.icon-download:before {
  content: var(--base-icon-download);
}

.icon-drag-drop:before {
  content: var(--base-icon-drag-drop);
}

.icon-edit:before {
  content: var(--base-icon-edit);
}

.icon-exclamation-circle:before {
  content: var(--base-icon-exclamation-circle);
}

.icon-exclamation:before {
  content: var(--base-icon-exclamation);
}

.icon-expand:before {
  content: var(--base-icon-expand);
}

.icon-facebook:before {
  content: var(--base-icon-facebook);
}

.icon-file-doc:before {
  content: var(--base-icon-file-doc);
}

.icon-file-document:before {
  content: var(--base-icon-file-document);
}

.icon-file-image:before {
  content: var(--base-icon-file-image);
}

.icon-file-pdf:before {
  content: var(--base-icon-file-pdf);
}

.icon-file-powerpoint:before {
  content: var(--base-icon-file-powerpoint);
}

.icon-file-video:before {
  content: var(--base-icon-file-video);
}

.icon-file-xls:before {
  content: var(--base-icon-file-xls);
}

.icon-filter:before {
  content: var(--base-icon-filter);
}

.icon-gift:before {
  content: var(--base-icon-gift);
}

.icon-heart-filled:before {
  content: var(--base-icon-heart-filled);
}

.icon-heart:before {
  content: var(--base-icon-heart);
}

.icon-home:before {
  content: var(--base-icon-home);
}

.icon-info:before {
  content: var(--base-icon-info);
}

.icon-instagram:before {
  content: var(--base-icon-instagram);
}

.icon-invoice:before {
  content: var(--base-icon-invoice);
}

.icon-language:before {
  content: var(--base-icon-language);
}

.icon-linkedin:before {
  content: var(--base-icon-linkedin);
}

.icon-list:before {
  content: var(--base-icon-list);
}

.icon-loading:before {
  content: var(--base-icon-loading);
}

.icon-lock:before {
  content: var(--base-icon-lock);
}

.icon-logged:before {
  content: var(--base-icon-logged);
}

.icon-login:before {
  content: var(--base-icon-login);
}

.icon-logout:before {
  content: var(--base-icon-logout);
}

.icon-mail:before {
  content: var(--base-icon-mail);
}

.icon-map-pin:before {
  content: var(--base-icon-map-pin);
}

.icon-marketing:before {
  content: var(--base-icon-marketing);
}

.icon-minus:before {
  content: var(--base-icon-minus);
}

.icon-password-hide:before {
  content: var(--base-icon-password-hide);
}

.icon-password-show:before {
  content: var(--base-icon-password-show);
}

.icon-pause:before {
  content: var(--base-icon-pause);
}

.icon-payment:before {
  content: var(--base-icon-payment);
}

.icon-pen-to-square:before {
  content: var(--base-icon-pen-to-square);
}

.icon-phone:before {
  content: var(--base-icon-phone);
}

.icon-pintereset:before {
  content: var(--base-icon-pintereset);
}

.icon-play:before {
  content: var(--base-icon-play);
}

.icon-plus:before {
  content: var(--base-icon-plus);
}

.icon-print:before {
  content: var(--base-icon-print);
}

.icon-question:before {
  content: var(--base-icon-question);
}

.icon-quickorder:before {
  content: var(--base-icon-quickorder);
}

.icon-register:before {
  content: var(--base-icon-register);
}

.icon-reload:before {
  content: var(--base-icon-reload);
}

.icon-retoure:before {
  content: var(--base-icon-retoure);
}

.icon-rma:before {
  content: var(--base-icon-rma);
}

.icon-search:before {
  content: var(--base-icon-search);
}

.icon-send:before {
  content: var(--base-icon-send);
}

.icon-service:before {
  content: var(--base-icon-service);
}

.icon-settings:before {
  content: var(--base-icon-settings);
}

.icon-share:before {
  content: var(--base-icon-share);
}

.icon-shipping:before {
  content: var(--base-icon-shipping);
}

.icon-sorting:before {
  content: var(--base-icon-sorting);
}

.icon-star-filled:before {
  content: var(--base-icon-star-filled);
}

.icon-star-half:before {
  content: var(--base-icon-star-half);
}

.icon-star:before {
  content: var(--base-icon-star);
}

.icon-subscriptions:before {
  content: var(--base-icon-subscriptions);
}

.icon-tiktok:before {
  content: var(--base-icon-tiktok);
}

.icon-trash:before {
  content: var(--base-icon-trash);
}

.icon-twitter:before {
  content: var(--base-icon-twitter);
}

.icon-upload:before {
  content: var(--base-icon-upload);
}

.icon-user:before {
  content: var(--base-icon-user);
}

.icon-users:before {
  content: var(--base-icon-users);
}

.icon-voice:before {
  content: var(--base-icon-voice);
}

.icon-whatsapp:before {
  content: var(--base-icon-whatsapp);
}

.icon-xing:before {
  content: var(--base-icon-xing);
}

.icon-youtube:before {
  content: var(--base-icon-youtube);
}

.icon-zoom:before {
  content: var(--base-icon-zoom);
}

/*

<i class='icon icon-360'></i>

<i class='icon icon-academy'></i>

<i class='icon icon-adress'></i>

<i class='icon icon-adressbook'></i>

<i class='icon icon-angle-down'></i>

<i class='icon icon-angle-left'></i>

<i class='icon icon-angle-right'></i>

<i class='icon icon-angle-up'></i>

<i class='icon icon-arrow-down'></i>

<i class='icon icon-arrow-left'></i>

<i class='icon icon-arrow-right'></i>

<i class='icon icon-arrow-up'></i>

<i class='icon icon-basket'></i>

<i class='icon icon-bike'></i>

<i class='icon icon-chart'></i>

<i class='icon icon-chat'></i>

<i class='icon icon-check-circle'></i>

<i class='icon icon-check'></i>

<i class='icon icon-clock'></i>

<i class='icon icon-close'></i>

<i class='icon icon-columns'></i>

<i class='icon icon-copy'></i>

<i class='icon icon-date'></i>

<i class='icon icon-document-archive'></i>

<i class='icon icon-download'></i>

<i class='icon icon-drag-drop'></i>

<i class='icon icon-edit'></i>

<i class='icon icon-exclamation-circle'></i>

<i class='icon icon-exclamation'></i>

<i class='icon icon-expand'></i>

<i class='icon icon-facebook'></i>

<i class='icon icon-file-doc'></i>

<i class='icon icon-file-document'></i>

<i class='icon icon-file-image'></i>

<i class='icon icon-file-pdf'></i>

<i class='icon icon-file-powerpoint'></i>

<i class='icon icon-file-video'></i>

<i class='icon icon-file-xls'></i>

<i class='icon icon-filter'></i>

<i class='icon icon-gift'></i>

<i class='icon icon-heart-filled'></i>

<i class='icon icon-heart'></i>

<i class='icon icon-home'></i>

<i class='icon icon-info'></i>

<i class='icon icon-instagram'></i>

<i class='icon icon-invoice'></i>

<i class='icon icon-language'></i>

<i class='icon icon-linkedin'></i>

<i class='icon icon-list'></i>

<i class='icon icon-loading'></i>

<i class='icon icon-lock'></i>

<i class='icon icon-logged'></i>

<i class='icon icon-login'></i>

<i class='icon icon-logout'></i>

<i class='icon icon-mail'></i>

<i class='icon icon-map-pin'></i>

<i class='icon icon-marketing'></i>

<i class='icon icon-minus'></i>

<i class='icon icon-password-hide'></i>

<i class='icon icon-password-show'></i>

<i class='icon icon-pause'></i>

<i class='icon icon-payment'></i>

<i class='icon icon-pen-to-square'></i>

<i class='icon icon-phone'></i>

<i class='icon icon-pintereset'></i>

<i class='icon icon-play'></i>

<i class='icon icon-plus'></i>

<i class='icon icon-print'></i>

<i class='icon icon-question'></i>

<i class='icon icon-quickorder'></i>

<i class='icon icon-register'></i>

<i class='icon icon-reload'></i>

<i class='icon icon-retoure'></i>

<i class='icon icon-rma'></i>

<i class='icon icon-search'></i>

<i class='icon icon-send'></i>

<i class='icon icon-service'></i>

<i class='icon icon-settings'></i>

<i class='icon icon-share'></i>

<i class='icon icon-shipping'></i>

<i class='icon icon-sorting'></i>

<i class='icon icon-star-filled'></i>

<i class='icon icon-star-half'></i>

<i class='icon icon-star'></i>

<i class='icon icon-subscriptions'></i>

<i class='icon icon-tiktok'></i>

<i class='icon icon-trash'></i>

<i class='icon icon-twitter'></i>

<i class='icon icon-upload'></i>

<i class='icon icon-user'></i>

<i class='icon icon-users'></i>

<i class='icon icon-voice'></i>

<i class='icon icon-whatsapp'></i>

<i class='icon icon-xing'></i>

<i class='icon icon-youtube'></i>

<i class='icon icon-zoom'></i>

*/
:root {
  --main-color-white: #ffffff;
  --main-color-black: #022c4c;
  --main-color-gray-base: #757575;
  --main-color-middle-gray: #d9dddd;
  --main-color-dark-gray: #757575;
  --main-color-light-gray: #f1f1f1;
  --main-color-primary: #022c4c;
  --main-color-primary-dark: rgb(1.3461538462, 29.6153846154, 51.1538461538);
  --main-color-primary-darken: rgb(0.6923076923, 15.2307692308, 26.3076923077);
  --main-color-secondary: #28acae;
  --main-color-action: #022c4c;
  --main-color-danger: #a12b4d;
  --main-color-danger-dark: rgb(140.875, 37.625, 67.375);
  --main-color-warning: #fbaa26;
  --main-color-warning-dark: rgb(250.5384615385, 160.1923076923, 12.9615384615);
  --main-color-success: #287233;
  --main-color-success-dark: rgb(33.3766233766, 95.1233766234, 42.5551948052);
  --main-color-info: #f1f1f1;
  --main-color-hygiene: #3598b5;
  --main-color-gastronomy: #8b2d65;
  --main-color-events: #216477;
  --main-color-gastronomy-needs: #a12b4d;
  --main-color-industry: #849daa;
  --main-color-cleaning: #287233;
  --main-color-medical: #00a093;
  --main-color-education: #ffd10e;
  --main-color-sustainability: #a5c83c;
  --main-color-healthcare: #6dd19c;
  --main-color-primary-contrast: var(--main-color-white);
  --main-color-primary-dark-contrast: var(--main-color-white);
  --main-color-primary-darken-contrast: var(--main-color-white);
  --main-color-secondary-contrast: var(--main-color-white);
  --main-color-action-contrast: var(--main-color-white);
  --main-color-danger-contrast: var(--main-color-white);
  --main-color-danger-dark-contrast: var(--main-color-white);
  --main-color-warning-contrast: #022c4c;
  --main-color-warning-dark-contrast: #022c4c;
  --main-color-success-contrast: var(--main-color-white);
  --main-color-success-dark-contrast: #ffffff;
  --main-color-info-contrast: #022c4c;
  --main-color-hygiene-contrast: var(--main-color-white);
  --main-color-gastronomy-contrast: var(--main-color-white);
  --main-color-events-contrast: var(--main-color-white);
  --main-color-gastronomy-needs-contrast: var(--main-color-white);
  --main-color-industry-contrast: var(--main-color-white);
  --main-color-cleaning-contrast: var(--main-color-white);
  --main-color-medical-contrast: var(--main-color-white);
  --main-color-education-contrast: var(--main-color-black);
  --main-color-sustainability-contrast: var(--main-color-white);
  --main-color-healthcare-contrast: var(--main-color-black);
  --main-font-family: 'Open Sans',Helvetica, Arial, sans-serif;
  --main-font-family-headline: Montserrat, Helvetica, Arial, sans-serif;
  --main-font-weight: 300;
  --main-font-weight-semibold: 600;
  --main-font-weight-bold: 700;
  --main-font-size-base: 1.6rem;
  --main-font-size-small: 1.4rem;
  --main-font-size-big: 2.1rem;
  --main-line-height: 1.4;
  --main-link-color: #022c4c;
  --main-link-color-hover: #28acae;
}

/* montserrat-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/montserrat-v31-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* montserrat-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/montserrat-v31-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/open-sans-v44-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/open-sans-v44-latin-regular.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* open-sans-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/open-sans-v44-latin-600.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
  font-weight: var(--main-font-weight-semibold);
  font-family: var(--main-font-family-headline);
  margin: 0;
  margin-bottom: clamp(10px, 1em, 20px);
}
h1.highlighted, .h1.highlighted,
h2.highlighted, .h2.highlighted,
h3.highlighted, .h3.highlighted,
h4.highlighted, .h4.highlighted,
h5.highlighted, .h5.highlighted,
h6.highlighted, .h6.highlighted {
  font-weight: var(--main-font-weight);
  line-height: 95%;
  text-transform: uppercase;
}

h1, .h1 {
  line-height: 110%;
  font-size: 2.4rem;
}
@media (min-width: 1024px) {
  h1, .h1 {
    font-size: 4.2rem;
  }
}
h1.highlighted, .h1.highlighted {
  font-size: 3.4rem;
}
@media (min-width: 1024px) {
  h1.highlighted, .h1.highlighted {
    font-size: 4rem;
  }
}
@media (min-width: 1250px) {
  h1.highlighted, .h1.highlighted {
    font-size: 6.7rem;
  }
}

h2, .h2 {
  line-height: 125%;
  font-size: 1.8rem;
}
@media (min-width: 1024px) {
  h2, .h2 {
    font-size: 3.2rem;
  }
}
h2.highlighted, .h2.highlighted {
  font-size: 2.8rem;
}
@media (min-width: 1024px) {
  h2.highlighted, .h2.highlighted {
    font-size: 3.4rem;
  }
}
@media (min-width: 1250px) {
  h2.highlighted, .h2.highlighted {
    font-size: 4.7rem;
  }
}

h3, .h3 {
  line-height: 125%;
  color: var(--main-color-secondary);
  font-weight: var(--main-font-weight);
  font-size: 2.6rem;
}

h4, .h4 {
  line-height: 142%;
  font-weight: var(--main-font-weight);
  font-size: 1.92rem;
}

h5, .h5 {
  line-height: 133%;
  text-transform: none;
  letter-spacing: 1px;
  font-style: normal;
  font-weight: var(--main-font-weight);
  font-size: 1.8rem;
}

h6, .h6 {
  line-height: 125%;
  text-transform: none;
  letter-spacing: 1px;
  font-weight: var(--main-font-weight);
  font-size: 1.6rem;
}

button.disabled:hover,
.button_disabled:hover,
.btn-disabled:hover, button.disabled:focus,
.button_disabled:focus,
.btn-disabled:focus, button.disabled:active,
.button_disabled:active,
.btn-disabled:active,
button:hover,
button:focus,
button:active,
.button:hover,
.button:focus,
.button:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-white);
  text-decoration: none;
}

button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled],
button,
.button {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: 2px solid var(--main-color-primary);
  border-radius: 0;
  color: var(--main-color-primary);
  cursor: pointer;
  background: var(--main-color-white);
  text-align: center;
  text-decoration: none;
  line-height: 18px;
  font-family: var(--main-font-family-headline);
  font-size: var(--main-font-size-small);
  padding: 10px 15px 10px 15px;
  transition: ease-in-out 0.1s;
  position: relative;
  gap: 10px;
}
@media (min-width: 768px) {
  button.disabled,
  .button_disabled,
  .btn-disabled,
  .button[disabled],
  button,
  .button {
    line-height: 20px;
    font-size: var(--main-font-size-base);
    padding: 14px 20px 14px 20px;
  }
}
.button_disabled:active,
.btn-disabled:active,
button:active,
.button:active {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
  text-decoration: none;
}
button--primary,
.button--primary {
  background: var(--main-color-secondary);
  color: var(--main-color-secondary-contrast);
  border-color: var(--main-color-secondary);
}
button--primary:hover,
button--primary:focus,
.button--primary:hover,
.button--primary:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  color: var(--main-color-primary-contrast);
}
button--primary:active,
.button--primary:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
button--action,
.button--action {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  border-color: var(--main-color-secondary);
}
button--action:hover,
button--action:focus,
.button--action:hover,
.button--action:focus {
  background: var(--main-color-white);
  border-color: var(--main-color-white);
  color: var(--main-color-primary);
}
button--action:active,
.button--action:active {
  background: var(--main-color-white);
  border-color: var(--main-color-white);
  color: var(--main-color-primary);
}
button--bordered,
.button--bordered {
  background: transparent;
  color: var(--main-color-primary);
  border-color: var(--main-color-primary);
}
button--bordered:hover,
button--bordered:focus,
.button--bordered:hover,
.button--bordered:focus {
  background: var(--main-color-secondary);
  border-color: var(--main-color-secondary);
  color: var(--main-color-secondary-contrast);
}
button--bordered:active,
.button--bordered:active {
  background: var(--main-color-primary-darken);
  border-color: var(--main-color-primary-darken);
  color: var(--main-color-primary-darken-contrast);
}
button--danger,
.button--danger {
  background: var(--main-color-danger);
  color: var(--main-color-danger-contrast);
  border-color: var(--main-color-danger);
}
button--danger:hover,
button--danger:focus,
.button--danger:hover,
.button--danger:focus {
  background: var(--main-color-danger-dark);
  border-color: var(--main-color-danger-dark);
  color: var(--main-color-danger-dark-contrast);
}
button--danger:active,
.button--danger:active {
  background: var(--main-color-danger-dark);
  border-color: var(--main-color-danger-dark);
  color: var(--main-color-danger-dark-contrast);
}
button--sm,
.button--sm {
  padding-top: 10px;
  padding-right: 15px;
  padding-bottom: 10px;
  padding-left: 15px;
  line-height: 18px;
  font-size: var(--main-font-size-small);
}
@media (min-width: 768px) {
  button--xl,
  .button--xl {
    padding-top: 18px;
    padding-right: 30px;
    padding-bottom: 18px;
    padding-left: 30px;
    line-height: 22px;
    font-size: var(--main-font-size-big);
  }
}
.is-success.button_disabled,
.is-success.btn-disabled,
button.is-success,
.button.is-success {
  color: var(--main-color-white) !important;
}
.is-success.button_disabled:after,
.is-success.btn-disabled:after,
button.is-success:after,
.button.is-success:after {
  color: var(--main-color-white);
}
button.disabled,
.button_disabled,
.btn-disabled,
.button[disabled] {
  background: var(--main-color-light-gray);
  color: var(--main-color-primary);
  border-color: var(--main-color-light-gray);
  cursor: not-allowed;
}
button.disabled:hover, button.disabled:focus, button.disabled:active,
.button_disabled:hover,
.button_disabled:focus,
.button_disabled:active,
.btn-disabled:hover,
.btn-disabled:focus,
.btn-disabled:active,
.button[disabled]:hover,
.button[disabled]:focus,
.button[disabled]:active {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
  color: var(--main-color-primary);
}

@keyframes scaleRequestIconBtn {
  0% {
    opacity: 0;
    scale: 0;
  }
  50% {
    opacity: 1;
    scale: 1.2;
  }
  100% {
    opacity: 1;
    scale: 1;
  }
}
.buttonLink {
  color: var(--main-color-primary);
}
.buttonLink:hover {
  color: var(--main-color-primary);
}

input,
select,
textarea,
.customSelect__selected {
  background-color: var(--main-color-white);
  color: var(--main-color-black);
  border: 2px solid var(--main-color-secondary);
  border-radius: 0px;
  box-shadow: none;
  display: block;
  width: 100%;
  line-height: 18px;
  font-size: clamp(16px, var(--main-font-size-small), 20px);
  padding: 10px 15px 10px 15px;
}
@media (min-width: 768px) {
  input,
  select,
  textarea,
  .customSelect__selected {
    line-height: 20px;
    font-size: 16px;
    padding: 14px 20px 14px 20px;
  }
}
input:not(:disabled):active, input:not(:disabled):focus,
select:not(:disabled):active,
select:not(:disabled):focus,
textarea:not(:disabled):active,
textarea:not(:disabled):focus,
.customSelect__selected:not(:disabled):active,
.customSelect__selected:not(:disabled):focus {
  border-color: var(--main-color-primary);
}
input:not(:disabled):focus-visible,
select:not(:disabled):focus-visible,
textarea:not(:disabled):focus-visible,
.customSelect__selected:not(:disabled):focus-visible {
  border-radius: 0;
}

.selectBody select, .customSelect__selected select {
  color: var(--main-color-black);
  border-color: var(--main-color-secondary);
}
.selectBody.focus select, .focus.customSelect__selected select {
  border-color: var(--main-color-primary);
}

.specialradiobox,
.specialcheckbox,
.specialcheckboxSwitch {
  position: relative;
  line-height: 20px;
  display: inline-block;
  cursor: pointer;
  margin-bottom: 10px;
  padding-left: 34px;
  color: var(--main-color-black);
}
.specialradiobox i,
.specialcheckbox i,
.specialcheckboxSwitch i {
  font-style: normal;
  position: absolute;
  left: 0;
  width: 24px;
  height: 24px;
  background-color: var(--main-color-white);
  border: 2px solid var(--main-color-secondary);
  border-radius: 50%;
  top: -2px;
  display: block;
  pointer-events: none;
  margin-bottom: 0;
  font-family: var(--main-font-family);
}
.specialradiobox i:after,
.specialcheckbox i:after,
.specialcheckboxSwitch i:after {
  left: 3px;
  top: 3px;
}
.specialradiobox:has(input:checked) i:after,
.specialcheckbox:has(input:checked) i:after,
.specialcheckboxSwitch:has(input:checked) i:after {
  opacity: 1;
}
.specialradiobox:has(input:disabled) i,
.specialcheckbox:has(input:disabled) i,
.specialcheckboxSwitch:has(input:disabled) i {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.specialradiobox:has(input:disabled) i:after,
.specialcheckbox:has(input:disabled) i:after,
.specialcheckboxSwitch:has(input:disabled) i:after {
  color: var(--main-color-gray-base);
}
.specialradiobox:has(input:focus) input + i,
.specialcheckbox:has(input:focus) input + i,
.specialcheckboxSwitch:has(input:focus) input + i {
  border-color: var(--main-color-primary);
}
.specialradiobox input,
.specialcheckbox input,
.specialcheckboxSwitch input {
  position: absolute;
  left: 0;
  top: 0;
  width: 40px;
  height: 40px;
  opacity: 0;
  cursor: pointer;
  margin: 0;
}
.specialradiobox input:disabled,
.specialcheckbox input:disabled,
.specialcheckboxSwitch input:disabled {
  cursor: not-allowed;
}
.specialradiobox:has(input:active):not(.disabled) i:after,
.specialcheckbox:has(input:active):not(.disabled) i:after,
.specialcheckboxSwitch:has(input:active):not(.disabled) i:after {
  opacity: 1;
}
.specialradiobox:has(input:active):disabled,
.specialcheckbox:has(input:active):disabled,
.specialcheckboxSwitch:has(input:active):disabled {
  cursor: not-allowed;
}
.specialradiobox:has(input:active):disabled + i,
.specialcheckbox:has(input:active):disabled + i,
.specialcheckboxSwitch:has(input:active):disabled + i {
  background: var(--main-color-light-gray);
  border-color: var(--main-color-light-gray);
}
.specialradiobox:has(input:active):disabled + i:after,
.specialcheckbox:has(input:active):disabled + i:after,
.specialcheckboxSwitch:has(input:active):disabled + i:after {
  color: var(--main-color-gray-base);
}
.specialradiobox:has(input:active):focus + i,
.specialcheckbox:has(input:active):focus + i,
.specialcheckboxSwitch:has(input:active):focus + i {
  border-color: var(--main-color-primary);
}
.specialradiobox:active:not(.disabled) i:after,
.specialcheckbox:active:not(.disabled) i:after,
.specialcheckboxSwitch:active:not(.disabled) i:after {
  opacity: 0.7;
}
.specialradiobox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckbox:active:not(.disabled) input:disabled:not(:checked) + i:after,
.specialcheckboxSwitch:active:not(.disabled) input:disabled:not(:checked) + i:after {
  opacity: 0;
}
.specialradiobox.disabled,
.specialcheckbox.disabled,
.specialcheckboxSwitch.disabled {
  cursor: default;
  color: var(--main-color-black);
}

.specialcheckbox i {
  border-radius: 0px;
}
.specialcheckbox i:after {
  top: -2px;
  left: -2px;
}
.specialcheckbox input {
  width: 24px;
  height: 24px;
  left: 0;
  top: 0;
}

.specialcheckboxSwitch {
  padding-left: 45px;
  margin-bottom: 0;
}
.specialcheckboxSwitch i {
  background: var(--main-color-secondary);
  border-radius: 16px;
  width: 36px;
  height: 20px;
  border: 0;
  position: absolute;
  margin-top: 3px;
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch i:after {
  content: "";
  display: block;
  background: var(--main-color-light-gray);
  border-radius: 50%;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 2px;
  left: 2px;
  opacity: 1;
  transition: 0.2s ease-in-out;
}
.specialcheckboxSwitch input {
  width: 36px;
  height: 20px;
  left: 0;
  top: 0;
}
.specialcheckboxSwitch:has(input:checked) i {
  background: var(--main-color-primary);
}
.specialcheckboxSwitch:has(input:checked) i:after {
  left: 17px;
  background: var(--main-color-white);
}

/*
Background individual

Markup:
<div class="kssColorBoxes">
  <div class="kssColorBox bg--hygiene">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--gastronomy">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--events">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--gastronomy-needs">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--industry">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--cleaning">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--medical">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--education">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--sustainability">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
  <div class="kssColorBox bg--healthcare">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a><br/><br/>
    <a href="#" class="button">Button</a><br/><br/>
    <a href="#" class="button button--primary">Button</a><br/><br/>
  </div>
</div>

Styleguide Colors.Background individual
*/
/*
Border individual

Markup:
<div class="kssColorBoxes">
  <div class="kssColorBox border--hygiene">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--gastronomy">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--events">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--gastronomy-needs">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--industry">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--cleaning">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--medical">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--education">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--sustainability">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
  <div class="kssColorBox border--healthcare">
    <h1>Headline 1</h1>
    Text<br/>
    <a href="#">Link</a>
  </div>
</div>

Styleguide Colors.Border individual
*/
/*
Font individual

Markup:
<span class="{{modifier_class}}">Text</span>

.color--hygiene - Hygiene
.color--gastronomy - Gastronomy
.color--events - Events
.color--gastronomy-needs - Gastronomy Needs
.color--industry - Industry
.color--cleaning - Cleaning
.color--medical - Medical
.color--education - Education
.color--sustainability - Sustainability
.color--healthcare - Healthcare

Styleguide Colors.Font individual
*/
.bg--white {
  background-color: #ffffff;
}
.border--white {
  border-color: #ffffff;
}

.color--white {
  color: #ffffff;
}
.color--white a:not(:hover):not(:focus):not(:active), .color--white .link:not(:hover):not(:focus):not(:active) {
  color: #ffffff;
}

.bg--black {
  background-color: #022c4c;
  color: #ffffff;
}
.bg--black a:not(.button), .bg--black .link {
  color: #ffffff;
}

.border--black {
  border-color: #022c4c;
}

.color--black {
  color: #022c4c;
}
.color--black a:not(:hover):not(:focus):not(:active), .color--black .link:not(:hover):not(:focus):not(:active) {
  color: #022c4c;
}

.bg--gray-base {
  background-color: #757575;
  color: #ffffff;
}
.bg--gray-base a:not(.button), .bg--gray-base .link {
  color: #ffffff;
}

.border--gray-base {
  border-color: #757575;
}

.color--gray-base {
  color: #757575;
}
.color--gray-base a:not(:hover):not(:focus):not(:active), .color--gray-base .link:not(:hover):not(:focus):not(:active) {
  color: #757575;
}

.bg--middle-gray {
  background-color: #d9dddd;
  color: #022c4c;
}
.bg--middle-gray a:not(.button), .bg--middle-gray .link {
  color: #022c4c;
}

.border--middle-gray {
  border-color: #d9dddd;
}

.color--middle-gray {
  color: #d9dddd;
}
.color--middle-gray a:not(:hover):not(:focus):not(:active), .color--middle-gray .link:not(:hover):not(:focus):not(:active) {
  color: #d9dddd;
}

.bg--dark-gray {
  background-color: #757575;
  color: #ffffff;
}
.bg--dark-gray a:not(.button), .bg--dark-gray .link {
  color: #ffffff;
}

.border--dark-gray {
  border-color: #757575;
}

.color--dark-gray {
  color: #757575;
}
.color--dark-gray a:not(:hover):not(:focus):not(:active), .color--dark-gray .link:not(:hover):not(:focus):not(:active) {
  color: #757575;
}

.bg--light-gray {
  background-color: #f1f1f1;
  color: #022c4c;
}
.bg--light-gray a:not(.button), .bg--light-gray .link {
  color: #022c4c;
}

.border--light-gray {
  border-color: #f1f1f1;
}

.color--light-gray {
  color: #f1f1f1;
}
.color--light-gray a:not(:hover):not(:focus):not(:active), .color--light-gray .link:not(:hover):not(:focus):not(:active) {
  color: #f1f1f1;
}

.bg--primary {
  background-color: #022c4c;
  color: #ffffff;
}
.bg--primary a:not(.button), .bg--primary .link {
  color: #ffffff;
}

.border--primary {
  border-color: #022c4c;
}

.color--primary {
  color: #022c4c;
}
.color--primary a:not(:hover):not(:focus):not(:active), .color--primary .link:not(:hover):not(:focus):not(:active) {
  color: #022c4c;
}

.bg--primary-dark {
  background-color: rgb(1.3461538462, 29.6153846154, 51.1538461538);
  color: #ffffff;
}
.bg--primary-dark a:not(.button), .bg--primary-dark .link {
  color: #ffffff;
}

.border--primary-dark {
  border-color: rgb(1.3461538462, 29.6153846154, 51.1538461538);
}

.color--primary-dark {
  color: rgb(1.3461538462, 29.6153846154, 51.1538461538);
}
.color--primary-dark a:not(:hover):not(:focus):not(:active), .color--primary-dark .link:not(:hover):not(:focus):not(:active) {
  color: rgb(1.3461538462, 29.6153846154, 51.1538461538);
}

.bg--primary-darken {
  background-color: rgb(0.6923076923, 15.2307692308, 26.3076923077);
  color: #ffffff;
}
.bg--primary-darken a:not(.button), .bg--primary-darken .link {
  color: #ffffff;
}

.border--primary-darken {
  border-color: rgb(0.6923076923, 15.2307692308, 26.3076923077);
}

.color--primary-darken {
  color: rgb(0.6923076923, 15.2307692308, 26.3076923077);
}
.color--primary-darken a:not(:hover):not(:focus):not(:active), .color--primary-darken .link:not(:hover):not(:focus):not(:active) {
  color: rgb(0.6923076923, 15.2307692308, 26.3076923077);
}

.bg--secondary {
  background-color: #28acae;
  color: #ffffff;
}
.bg--secondary a:not(.button), .bg--secondary .link {
  color: #ffffff;
}

.border--secondary {
  border-color: #28acae;
}

.color--secondary {
  color: #28acae;
}
.color--secondary a:not(:hover):not(:focus):not(:active), .color--secondary .link:not(:hover):not(:focus):not(:active) {
  color: #28acae;
}

.bg--action {
  background-color: #022c4c;
  color: #ffffff;
}
.bg--action a:not(.button), .bg--action .link {
  color: #ffffff;
}

.border--action {
  border-color: #022c4c;
}

.color--action {
  color: #022c4c;
}
.color--action a:not(:hover):not(:focus):not(:active), .color--action .link:not(:hover):not(:focus):not(:active) {
  color: #022c4c;
}

.bg--danger {
  background-color: #a12b4d;
  color: #ffffff;
}
.bg--danger a:not(.button), .bg--danger .link {
  color: #ffffff;
}

.border--danger {
  border-color: #a12b4d;
}

.color--danger {
  color: #a12b4d;
}
.color--danger a:not(:hover):not(:focus):not(:active), .color--danger .link:not(:hover):not(:focus):not(:active) {
  color: #a12b4d;
}

.bg--warning {
  background-color: #fbaa26;
  color: #022c4c;
}
.bg--warning a:not(.button), .bg--warning .link {
  color: #022c4c;
}

.border--warning {
  border-color: #fbaa26;
}

.color--warning {
  color: #fbaa26;
}
.color--warning a:not(:hover):not(:focus):not(:active), .color--warning .link:not(:hover):not(:focus):not(:active) {
  color: #fbaa26;
}

.bg--success {
  background-color: #287233;
  color: #ffffff;
}
.bg--success a:not(.button), .bg--success .link {
  color: #ffffff;
}

.border--success {
  border-color: #287233;
}

.color--success {
  color: #287233;
}
.color--success a:not(:hover):not(:focus):not(:active), .color--success .link:not(:hover):not(:focus):not(:active) {
  color: #287233;
}

.bg--info {
  background-color: #f1f1f1;
  color: #022c4c;
}
.bg--info a:not(.button), .bg--info .link {
  color: #022c4c;
}

.border--info {
  border-color: #f1f1f1;
}

.color--info {
  color: #f1f1f1;
}
.color--info a:not(:hover):not(:focus):not(:active), .color--info .link:not(:hover):not(:focus):not(:active) {
  color: #f1f1f1;
}

.bg--hygiene {
  background-color: #3598b5;
  color: #ffffff;
}
.bg--hygiene a:not(.button), .bg--hygiene .link {
  color: #ffffff;
}

.border--hygiene {
  border-color: #3598b5;
}

.color--hygiene {
  color: #3598b5;
}
.color--hygiene a:not(:hover):not(:focus):not(:active), .color--hygiene .link:not(:hover):not(:focus):not(:active) {
  color: #3598b5;
}

.bg--gastronomy {
  background-color: #8b2d65;
  color: #ffffff;
}
.bg--gastronomy a:not(.button), .bg--gastronomy .link {
  color: #ffffff;
}

.border--gastronomy {
  border-color: #8b2d65;
}

.color--gastronomy {
  color: #8b2d65;
}
.color--gastronomy a:not(:hover):not(:focus):not(:active), .color--gastronomy .link:not(:hover):not(:focus):not(:active) {
  color: #8b2d65;
}

.bg--events {
  background-color: #216477;
  color: #ffffff;
}
.bg--events a:not(.button), .bg--events .link {
  color: #ffffff;
}

.border--events {
  border-color: #216477;
}

.color--events {
  color: #216477;
}
.color--events a:not(:hover):not(:focus):not(:active), .color--events .link:not(:hover):not(:focus):not(:active) {
  color: #216477;
}

.bg--gastronomy-needs {
  background-color: #a12b4d;
  color: #ffffff;
}
.bg--gastronomy-needs a:not(.button), .bg--gastronomy-needs .link {
  color: #ffffff;
}

.border--gastronomy-needs {
  border-color: #a12b4d;
}

.color--gastronomy-needs {
  color: #a12b4d;
}
.color--gastronomy-needs a:not(:hover):not(:focus):not(:active), .color--gastronomy-needs .link:not(:hover):not(:focus):not(:active) {
  color: #a12b4d;
}

.bg--industry {
  background-color: #849daa;
  color: #022c4c;
}
.bg--industry a:not(.button), .bg--industry .link {
  color: #022c4c;
}

.border--industry {
  border-color: #849daa;
}

.color--industry {
  color: #849daa;
}
.color--industry a:not(:hover):not(:focus):not(:active), .color--industry .link:not(:hover):not(:focus):not(:active) {
  color: #849daa;
}

.bg--cleaning {
  background-color: #287233;
  color: #ffffff;
}
.bg--cleaning a:not(.button), .bg--cleaning .link {
  color: #ffffff;
}

.border--cleaning {
  border-color: #287233;
}

.color--cleaning {
  color: #287233;
}
.color--cleaning a:not(:hover):not(:focus):not(:active), .color--cleaning .link:not(:hover):not(:focus):not(:active) {
  color: #287233;
}

.bg--medical {
  background-color: #00a093;
  color: #ffffff;
}
.bg--medical a:not(.button), .bg--medical .link {
  color: #ffffff;
}

.border--medical {
  border-color: #00a093;
}

.color--medical {
  color: #00a093;
}
.color--medical a:not(:hover):not(:focus):not(:active), .color--medical .link:not(:hover):not(:focus):not(:active) {
  color: #00a093;
}

.bg--education {
  background-color: #ffd10e;
  color: #022c4c;
}
.bg--education a:not(.button), .bg--education .link {
  color: #022c4c;
}

.border--education {
  border-color: #ffd10e;
}

.color--education {
  color: #ffd10e;
}
.color--education a:not(:hover):not(:focus):not(:active), .color--education .link:not(:hover):not(:focus):not(:active) {
  color: #ffd10e;
}

.bg--sustainability {
  background-color: #a5c83c;
  color: #022c4c;
}
.bg--sustainability a:not(.button), .bg--sustainability .link {
  color: #022c4c;
}

.border--sustainability {
  border-color: #a5c83c;
}

.color--sustainability {
  color: #a5c83c;
}
.color--sustainability a:not(:hover):not(:focus):not(:active), .color--sustainability .link:not(:hover):not(:focus):not(:active) {
  color: #a5c83c;
}

.bg--healthcare {
  background-color: #6dd19c;
  color: #022c4c;
}
.bg--healthcare a:not(.button), .bg--healthcare .link {
  color: #022c4c;
}

.border--healthcare {
  border-color: #6dd19c;
}

.color--healthcare {
  color: #6dd19c;
}
.color--healthcare a:not(:hover):not(:focus):not(:active), .color--healthcare .link:not(:hover):not(:focus):not(:active) {
  color: #6dd19c;
}

.bg--black .button--action {
  background: var(--main-color-white);
  color: var(--main-color-black);
  border-color: var(--main-color-black);
}
.bg--black .button--action:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-white);
}

.bg--action .button--action {
  background: var(--main-color-white);
  color: var(--main-color-black);
  border-color: var(--main-color-black);
}
.bg--action .button--action:hover {
  background: var(--main-color-black);
  color: var(--main-color-white);
  border-color: var(--main-color-white);
}

.bg--primary .button:hover {
  background: rgb(1.3461538462, 29.6153846154, 51.1538461538);
  color: var(--main-color-white);
}
.bg--primary .button--primary {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
}
.bg--primary .button--action {
  background: var(--main-color-white);
  color: var(--main-color-primary);
  border-color: var(--main-color-white);
}

.bg--secondary .button:not(.button--primary) {
  background: var(--main-color-white);
  color: var(--main-color-black);
}
.bg--secondary .button:hover {
  background: rgb(1.3461538462, 29.6153846154, 51.1538461538);
  color: var(--main-color-white);
}
.bg--secondary .button--primary {
  background: var(--main-color-primary);
  color: var(--main-color-white);
}
.bg--secondary .button--primary:hover {
  background: var(--main-color-secondary);
}

.bg--medical .button--primary,
.bg--industry .button--primary {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  border-color: var(--main-color-primary);
}
.bg--medical .button--primary:hover,
.bg--industry .button--primary:hover {
  background: var(--main-color-secondary);
  border-color: var(--main-color-white);
}

.uploadFileBody input + span {
  border-radius: 0px;
  border: 2px solid var(--main-color-secondary);
}

.pg_registrieren .mainContentArea .container,
.pg_kontakt .mainContentArea .container {
  max-width: 500px;
}

.footer {
  background: var(--main-color-primary);
  color: var(--main-color-white);
  font-size: 1.4rem;
  padding: 10px 20px;
}
.footer .nav > ul {
  gap: 20px;
}
.footer .nav > ul li {
  padding-right: 20px;
  position: relative;
}
.footer .nav > ul li:after {
  content: "";
  display: block;
  height: 14px;
  width: 1px;
  background-color: var(--main-color-secondary);
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.footer .nav > ul li:last-child:after {
  display: none;
}
.footer .nav > ul li:hover > a, .footer .nav > ul li:focus > a, .footer .nav > ul li.is-active > a {
  color: var(--main-color-white);
  text-decoration: underline;
}
@media (max-width: 767px) {
  .footer .nav > ul li.level_1 {
    padding-right: 0;
  }
}
.footer .nav a {
  color: var(--main-color-white);
}
.footer .nav a:hover, .footer .nav a.is-active {
  color: var(--main-color-white);
  text-decoration: underline;
}

.actionIcon:hover {
  color: var(--main-color-secondary);
}

.alert {
  border-radius: 0px;
}
.alert--primary {
  background: #022c4c;
  color: #ffffff;
}
.alert--secondary {
  background: #28acae;
  color: #ffffff;
}
.alert--action {
  background: #022c4c;
  color: #ffffff;
}
.alert--danger {
  background: #a12b4d;
  color: #ffffff;
}
.alert--warning {
  background: #fbaa26;
  color: #022c4c;
}
.alert--success {
  background: #287233;
  color: #ffffff;
}
.alert--hygiene {
  background: #3598b5;
  color: #ffffff;
}
.alert--gastronomy {
  background: #8b2d65;
  color: #ffffff;
}
.alert--events {
  background: #216477;
  color: #ffffff;
}
.alert--gastronomy-needs {
  background: #a12b4d;
  color: #ffffff;
}
.alert--industry {
  background: #849daa;
  color: #022c4c;
}
.alert--cleaning {
  background: #287233;
  color: #ffffff;
}
.alert--medical {
  background: #00a093;
  color: #ffffff;
}
.alert--education {
  background: #ffd10e;
  color: #022c4c;
}
.alert--sustainability {
  background: #a5c83c;
  color: #022c4c;
}
.alert--healthcare {
  background: #6dd19c;
  color: #022c4c;
}

.breadcrumbBackbutton {
  color: var(--main-color-dark-gray);
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.breadcrumbBackbutton:hover {
  color: var(--main-link-color-hover);
  text-decoration: none;
}
.breadcrumbBackbutton i {
  margin-right: 4px;
}
@media (max-width: 1023px) {
  .breadcrumbBackbutton {
    margin-top: 10px;
  }
}

.breadcrumbWrapper {
  margin-top: 20px;
  margin-bottom: 20px;
  font-size: var(--main-font-size-small);
  line-height: 1;
  color: var(--main-color-dark-gray);
}
@media (min-width: 1024px) {
  .breadcrumbWrapper {
    margin-bottom: 40px;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
  }
}
.breadcrumbWrapper a {
  color: var(--main-color-dark-gray);
  text-decoration: none;
}
.breadcrumbWrapper a:hover {
  color: var(--main-link-color-hover);
  text-decoration: none;
}

.contentBox {
  border-radius: 0px;
  border: 0;
  border-right: 4px solid var(--main-color-primary);
  border-bottom: 4px solid var(--main-color-primary);
}
@media (min-width: 768px) {
  .contentBox {
    box-shadow: none;
  }
}
.contentBox .contentText {
  padding: 0 30px 30px 0;
}
.contentBox .contentText .button:hover, .contentBox .contentText .button:focus {
  color: var(--main-color-white);
}

.customSelect__selected {
  padding-right: 40px;
  display: flex;
}
@media (min-width: 768px) {
  .customSelect__dropdown {
    border: 2px solid var(--main-color-secondary);
    border-radius: 0px;
  }
}
.customSelect.is-success .customSelect__selected {
  color: var(--main-color-white) !important;
}
.customSelect--radio:before, .customSelect--checkbox:before {
  border: 2px solid var(--main-color-secondary);
  border-radius: 0px;
}
.customSelectReset:hover {
  background: var(--main-color-white);
}

.iconbarHover {
  border-right: 4px solid var(--main-color-primary);
  border-bottom: 4px solid var(--main-color-primary);
  border-radius: 0;
}
.iconbarHover:before {
  border-color: transparent;
}
.iconbarHover__navigation li > a:hover, .iconbarHover__navigation li > a.is-active, .iconbarHover__navigation li > span:hover, .iconbarHover__navigation li > span.is-active {
  color: var(--main-color-secondary);
}

.inputGroup__addon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border: 2px solid var(--main-color-secondary);
  overflow: hidden;
  text-decoration: none;
  padding-left: 15px;
  padding-right: 15px;
  border-radius: 0px;
}
@media (min-width: 768px) {
  .inputGroup__addon {
    height: 52px;
    padding-left: 20px;
    padding-right: 20px;
  }
}
.inputGroup__addon:first-child {
  margin-right: -1px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
.inputGroup__addon:last-child {
  margin-left: -1px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon .button {
  min-width: 0;
  border-radius: 0;
  margin: -1px;
  min-height: 0;
}
.inputGroup__addon .icon {
  line-height: 1;
  display: block;
  font-size: 20px;
}
@media (min-width: 768px) {
  .inputGroup__addon .icon {
    font-size: 24px;
  }
}
.inputGroup__addon + input,
.inputGroup__addon + select {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.inputGroup__addon--clickable {
  cursor: pointer;
}
.inputGroup__addon--clickable:hover {
  color: var(--main-color-primary);
}
.inputGroup button.inputGroup__addon {
  min-width: 42px;
  background: var(--main-color-secondary);
  color: var(--main-color-white);
}
@media (min-width: 768px) {
  .inputGroup button.inputGroup__addon {
    min-width: 52px;
  }
}
.inputGroup button.inputGroup__addon:hover, .inputGroup button.inputGroup__addon:focus, .inputGroup button.inputGroup__addon:active {
  background: var(--main-color-primary);
  color: var(--main-color-white);
}
.inputGroup--infieldAddon > input:first-child {
  padding-right: 42px;
  border-radius: 0;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:first-child {
    padding-right: 52px;
  }
}
.inputGroup--infieldAddon > input:last-child {
  padding-left: 42px;
  border-radius: 0;
}
@media (min-width: 768px) {
  .inputGroup--infieldAddon > input:last-child {
    padding-left: 52px;
  }
}
.inputGroup.is-focus {
  border-color: var(--main-color-secondary);
  color: var(--main-color-primary);
}
.inputGroup.is-focus > input,
.inputGroup.is-focus > .input,
.inputGroup.is-focus select {
  background: var(--main-color-white);
  border-color: var(--main-color-secondary);
  color: var(--main-color-primary);
}
.inputGroup.is-focus .inputGroup__addon {
  background: var(--main-color-white);
  border-color: var(--main-color-secondary);
  color: var(--main-color-primary);
}
.inputGroup.is-inactive .inputGroup__addon {
  display: none;
}

.inputGroup .iti__flag-container + input {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}

.mainnav > ul > li > ul {
  border-right: 4px solid var(--main-color-primary);
  border-bottom: 4px solid var(--main-color-primary);
}
.mainnav > ul > li > ul:before {
  border-color: transparent;
}
.mainnav li.is-active-tree > a, .mainnav li.is-active > a, .mainnav li:hover > a, .mainnav li:focus > a {
  color: var(--main-color-secondary);
}
.mainnav li.is-active-tree > a:after, .mainnav li.is-active > a:after, .mainnav li:hover > a:after, .mainnav li:focus > a:after {
  display: none;
}

@media (min-width: 768px) {
  .modal__dialog {
    border-right: 4px solid var(--main-color-primary);
    border-bottom: 4px solid var(--main-color-primary);
    border-radius: 0;
  }
}
@media (min-width: 1250px) {
  .modal__dialog {
    box-shadow: 0 10px 60px rgba(0, 0, 0, 0.2);
  }
}
.modal__close {
  border-radius: 0;
}
.modal__close:hover, .modal__close:focus {
  color: var(--main-color-primary);
  text-decoration: none;
  background: var(--main-color-middle-gray);
}

#editUserModal .modal__body .marginTop {
  display: none;
}

.navgroup {
  margin-bottom: -15px;
}
.navgroup li > span,
.navgroup a {
  color: var(--main-color-primary);
  margin-bottom: 15px;
}
.navgroup a:hover, .navgroup a:focus, .navgroup a:active {
  color: var(--main-link-color-hover);
}
.navgroup li:hover > a {
  color: var(--main-link-color-hover);
}
.navgroup > ul > li > span,
.navgroup > ul > li > a {
  font-weight: var(--main-font-weight-bold);
}
@media (max-width: 767px) {
  .navgroup--collapse-mobile > ul > li {
    border-bottom: 1px solid var(--main-color-primary);
    margin-bottom: 20px;
  }
}

.processbar {
  display: flex;
}

.radioListItem {
  border: 2px solid var(--main-color-secondary);
  border-radius: 0px;
}
.radioListItem:hover, .radioListItem:focus, .radioListItem:active {
  border-color: var(--main-color-primary);
}
.radioListItem:has(input:focus) {
  border-color: var(--main-color-primary);
}
.radioListItem input + i {
  border: 2px solid var(--main-color-secondary);
}
.radioListItem input + i:after {
  background-color: var(--main-color-primary);
  top: 3px;
  left: 3px;
}
.radioListItem input:focus + i {
  border-color: var(--main-color-primary);
}

.radioList--small .radioListItem:first-child {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
}
.radioList--small .radioListItem:last-child {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.searchBar {
  border-radius: 0px;
}
.searchBar input {
  background: var(--main-color-white);
  border-color: var(--main-color-secondary);
  outline: none;
}
.searchBar.is-focus button.inputGroup__addon, .searchBar.is-focus span.inputGroup__addon {
  color: var(--main-color-white);
  background: var(--main-color-secondary);
  border-color: var(--main-color-secondary);
  outline: none;
}
.searchBar.is-focus:hover, .searchBar.is-focus:focus {
  color: var(--main-color-primary);
  outline: none;
  border-color: var(--main-color-primary);
}
.searchBar.is-focus:hover input, .searchBar.is-focus:focus input {
  outline: none;
  border-color: var(--main-color-primary);
}
.searchBar.is-focus:hover button, .searchBar.is-focus:hover span, .searchBar.is-focus:focus button, .searchBar.is-focus:focus span {
  color: var(--main-color-white);
  background: var(--main-color-primary);
  border-color: var(--main-color-primary);
  outline: none;
}
.searchBar.is-focus:hover button:hover, .searchBar.is-focus:hover button:focus, .searchBar.is-focus:hover span:hover, .searchBar.is-focus:hover span:focus, .searchBar.is-focus:focus button:hover, .searchBar.is-focus:focus button:focus, .searchBar.is-focus:focus span:hover, .searchBar.is-focus:focus span:focus {
  background: var(--main-color-primary);
  border-color: var(--main-color-secondary);
}
.searchBar input:-webkit-autofill,
.searchBar input:-webkit-autofill:hover,
.searchBar input:-webkit-autofill:focus,
.searchBar input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 30px var(--main-color-white) inset !important;
}
.searchBar .inputGroup__addon,
.searchBar button.inputGroup__addon {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  border: 2px solid var(--main-color-secondary);
  border-left-width: 1px;
  border-radius: 0px;
  height: 52px;
  outline: none;
}
.searchBar .inputGroup__addon:hover, .searchBar .inputGroup__addon:focus,
.searchBar button.inputGroup__addon:hover,
.searchBar button.inputGroup__addon:focus {
  background: var(--main-color-primary);
  color: var(--main-color-white);
}

.searchSuggestionItem {
  border-bottom: 2px solid var(--main-color-secondary);
}

.searchBarSuggestions {
  border-radius: 0px;
}

.shareLink {
  border: 2px solid var(--main-color-secondary);
  border-radius: 0px;
}

.categoryNav > ul > li > a.is-active {
  color: var(--main-color-secondary);
}

.tag {
  background: var(--main-color-light-gray);
  display: inline-flex;
  align-items: center;
  padding: 7px 10px;
  font-size: var(--main-font-size-small);
  cursor: pointer;
  text-decoration: none;
  color: var(--main-color-primary);
  border-radius: 4px;
  line-height: 1;
  text-align: center;
}
.tag:hover, .tag.is-active {
  background: var(--main-link-color-hover);
  color: var(--main-color-white);
  text-decoration: none;
}
.tag:focus, .tag:active {
  background: var(--main-color-secondary);
  color: var(--main-color-white);
  text-decoration: none;
}
.tag .icon {
  font-size: 1.4em;
  margin-left: 5px;
  line-height: 1;
  display: block;
  margin-top: -1px;
}
.tag.is-loading, .tag.is-success, .tag.is-error {
  background: var(--main-color-middle-gray) !important;
  border-color: var(--main-color-middle-gray) !important;
  color: var(--main-color-black) !important;
  cursor: not-allowed;
  pointer-events: none;
  position: relative;
}
.tag.is-loading .icon, .tag.is-success .icon, .tag.is-error .icon {
  opacity: 0;
}
.tag.is-loading:after, .tag.is-success:after, .tag.is-error:after {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "icons", Helvetica, Arial, sans-serif;
  translate: -50% -50%;
  font-size: 20px;
}
.tag.is-loading {
  cursor: wait;
  color: var(--main-color-middle-gray) !important;
}
.tag.is-loading:after {
  content: var(--base-icon-loading);
  color: var(--main-color-black);
  opacity: 1;
  animation: rotation 1s infinite ease-in-out;
}
.tag.is-success {
  background: var(--main-color-success) !important;
  border-color: var(--main-color-success) !important;
  color: var(--main-color-success) !important;
}
.tag.is-success:after {
  content: var(--base-icon-check);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}
.tag.is-error {
  background: var(--main-color-danger) !important;
  border-color: var(--main-color-danger) !important;
  color: var(--main-color-danger) !important;
}
.tag.is-error:after {
  content: var(--base-icon-close);
  color: var(--main-color-white);
  animation: scaleRequestIconBtn 1s forwards ease-in-out;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
@media (max-width: 1023px) {
  .tags {
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    flex-wrap: nowrap;
    max-width: 100vw;
    gap: 20px;
  }
  .tags > * {
    scroll-snap-align: center;
    flex-shrink: 0;
  }
}

.custom-wavy-top {
  margin-top: -100px;
  background: linear-gradient(180deg, rgb(234.1037383178, 249.9560747664, 250.1962616822) 0%, transparent 100%);
  height: 400px;
  width: 100%;
  overflow: hidden;
  clip-path: url(#wavy-clippy);
  position: absolute;
  z-index: 0;
}

@media only screen and (max-width: 599px) {
  .custom-wavy-top {
    clip-path: url(#wavy-clippy-mobile);
  }
}
.dcCookieBar__button {
  border-radius: 0;
}
.dcCookieBarSwitch {
  border-radius: 0;
  background-color: var(--main-color-light-gray);
}
.dcCookieBarSwitch span {
  border-radius: 0;
  background-color: var(--main-color-dark-gray);
}
.dcCookieBarSwitch input:checked + span {
  background-color: var(--main-color-secondary);
}

.dcCookieModal a:hover {
  color: var(--main-color-secondary);
}
.dcCookieModal__dialog {
  border-radius: 0px;
  border-right: 4px solid var(--main-color-primary);
  border-bottom: 4px solid var(--main-color-primary);
}
.dcCookieModal .dcCookieBar__buttonaction {
  background: var(--main-color-secondary);
  border-color: var(--main-color-secondary);
  color: var(--main-color-white);
  border-radius: 0;
}
/*# sourceMappingURL=child.css.map */