/**
 * @version 2025-09-12
 *
 * mobile/css/styles.css
 */

/** border-box model **/
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* 18.06.2025 EXPERIMENTAL OFF */
/* html * {
  font-size: 100%;
} */

:focus {
  outline: 0;
}

:root {
  --font-family: Roboto, Tahoma, "Trebuchet MS";
  /* Primary font family. [may be imported font] */
  /*--font-family: Arial, Verdana; */
  /* Primary font family. [may be imported font] */
  --font-size: 16px; /* 16.05.2025 --font-size is it good? */
  /* default font size for certainly areas */

  /* Scale factor for <img/> (not global) */
  --img-scale: 1;

  /* Layout settings */
  --wrapper-width: 1140px;
  --wrapper-paddings-left-right: 1rem;
  --wrapper-max-width: calc(var(--wrapper-width) + var(--wrapper-paddings-left-right) * 2);
  --layout-column-1-width: 15.625rem; /* before 16.05.2025: 250px; */
  --layout-columns-gap: var(--wrapper-paddings-left-right);
  --layout-column-3-margin: calc(
    var(--layout-column-1-width) + var(--layout-columns-gap)
  );

  /** Border radius settings **/
  --theme-border-radius: 4px;

  /** Colors **/
  /*PARITY Gelb: #ffcd00 PARITY Grau: #333333*/
  /* compliance colors are marked with suffixes: b1, b2, ... - brighter; d1, d2, ... - darker */

  --theme-color-black: #000;
  --theme-color-black-1: #333;
  --theme-color-white-1: #aaa;
  --theme-color-white: #fff;
  --theme-color-black-opposite: var(--theme-color-white);
  --theme-color-black-1-opposite: #eee;
  --theme-color-white-opposite: var(--theme-color-black);
  --theme-color-white-1-opposite: var(--theme-color-black-1);

  /* PARITY grey: #333333*/
  --theme-color-dark: var(--theme-color-black-1);
  /* PARITY grey: #333333*/
  --theme-color-dark-b1: #ededed;
  --theme-color-dark-b2: #d0d0d0;
  --theme-color-dark-b3: #f9f9f9;

  --theme-color-middle: #ffcd00;
  /*PARITY yellow: #ffcd00 */

  --theme-color-bright: #ffcd00;
  /*PARITY yellow: #ffcd00 */
  --theme-color-bright-d1: #ffcd00;
  /*PARITY yellow: #ffcd00 */

  /* article voting colors */
  --theme-color-vote-star: var(--theme-color-bright);
  --theme-color-vote-star-opposite: var(--theme-color-dark);

  /* opposite colors */
  --theme-color-dark-opposite: var(--theme-color-white);
  --theme-color-dark-b1-opposite: var(--theme-color-dark);
  --theme-color-dark-b2-opposite: var(--theme-color-dark);
  --theme-color-middle-opposite: var(--theme-color-dark);
  --theme-color-bright-opposite: var(--theme-color-dark);

  /* messages colors */
  --message-color-default-icon: var(--theme-color-dark);
  --message-color-default: var(--theme-color-dark);
  --message-color-default-opposite: var(--theme-color-dark-opposite);

  --message-color-info-icon: #2d4dd8;
  --message-color-info: var(--theme-color-dark);
  --message-color-info-opposite: var(--theme-color-dark-b1);

  --message-color-error-icon: var(--theme-color-middle-opposite);
  --message-color-error: var(--theme-color-middle-opposite);
  --message-color-error-opposite: var(--theme-color-middle);

  --message-color-error-strong: #cc1a2a;
  --message-color-error-strong-opposite: #fff;

  --message-color-running-icon: var(var(--theme-color-white-1));
  --message-color-running: var(--theme-color-dark);
  --message-color-running-opposite: var(--theme-color-dark-b1);

  --message-color-success-icon: var(--theme-color-dark);
  --message-color-success: var(--theme-color-dark);
  --message-color-success-opposite: var(--theme-color-dark-b1);

  --message-color-warning-icon: var(--theme-color-middle);
  --message-color-warning: var(--theme-color-middle);
  --message-color-warning-opposite: var(--theme-color-middle-opposite);

  /* Buttons */
  --button-normal-height: 2.438rem;
  /* 39 for better vertical centering of the caption */
  --button-small-height: 1.875rem;

  --button-final-color: #019901;
  --button-final-color-opposite: #fff;

  /* Errors by form fields */
  --theme-color-input-invalid: var(--theme-color-bright);

  /** prices **/
  /* default */
  --theme-color-price-with-unit: var(--theme-color-dark);
  --theme-color-price-value: var(--theme-color-bright);
  /* action */
  --theme-color-action-price: #a00;
  --theme-color-action-price-opposite: #fff;
  --theme-color-action-price-with-unit: var(--theme-color-action-price);
  --theme-color-action-price-value: var(--theme-color-action-price-with-unit);

  /* focus */
  --theme-color-focus: #a00;
  --theme-color-focus-opposite: #fff;
}

/* @package Accessibility */
:root[data-theme="contrast"] {
  --theme-color-black-1: var(--theme-color-black);
  --theme-color-white-1: #eee;
  /* --theme-color-black-1-opposite: var(--theme-color-white);
  --theme-color-white-1-opposite: var(--theme-color-black); */

  --theme-color-bright: #6c5600;
  --theme-color-bright-opposite: #fff;
  --theme-color-middle: #907300;
  /* Recommended */
  --theme-color-middle: var(--theme-color-dark);
  --theme-color-middle-opposite: var(--theme-color-dark-opposite);
  /* ... but by icons and abbreviations black looks better. */

  --message-color-info-icon: var(--theme-color-dark);
  /* --message-color-error-icon:  */

  /*   --message-color-error-opposite;
	  --message-color-error; */
  /* .box.error a { */
  /*  --message-color-error; */

}

/* @package Accessibility : mmenu */
:root[data-theme="contrast"] {
	--mm-color-border: var(--theme-color-black);
	--mm-color-button: var(--theme-color-black);
	--mm-color-text: var(--theme-color-black);
	--mm-color-text-dimmed: var(--theme-color-black);
	--mm-color-background: var(--theme-color-white);
}

/* 14.05.2025 while alfa-state of developing ignore the browsers set font size: */
:root[data-font-size=""] {
  --font-size: 16px; /* 16.05.2025 --font-size is it good? */
  font-size: 16px;
}

:root[data-font-size="big"] {
  --font-size: 24px; /* 16.05.2025 --font-size is it good? */
  font-size: 24px;
  --wrapper-width: 1400px;

  --img-scale: calc(24 / 16);
}

:root[data-font-size="bigger"] {
  --font-size: 26px; /* 16.05.2025 --font-size is it good? */
  font-size: 24px;

}

body {
  /* agent toolbar */
  --agent-toolbar-height: 0px;
  /* intro */
  --intro-top: var(--agent-toolbar-height);
  --design-color-bar-height: 6px;
  /* header */
  --header-top: calc(var(--intro-top) + var(--design-color-bar-height));
  --header-height: 100px;
  --main-line-height: 80px;
  /* main */
  --main-top: calc(var(--header-top) + var(--header-height));
  /* breadcrumbs */
  --breadcrumbs-height: 5rem;  /* 80px; */
  /* icon debug */
  --icon-debug-top: var(--main-top);

  /* accessibility focus border width */
  /* @package Accessibility */
  --accessibility-focus-width-default: 0px;
  --accessibility-focus-width-by-buttons: 0px;
  --accessibility-focus-width-by-inputs: 0px;
  --accessibility-focus-width-by-links: 0px;
  --accessibility-focus-width: 0px;
  --accessibility-focus-input-width-delta: 0px;
  /* accessibility toolbar */
  /* @package Accessibility */
  /* --accessibility-toolbar-top: var(--main-top); */
  --accessibility-toolbar-top: 0px;
  /* base fonts settings */
  font-family: var(--font-family);
}

:root[data-focus-outline="visible"] body {
  --accessibility-focus-width-default: 4px;
  --accessibility-focus-width-by-buttons: 2px;
  --accessibility-focus-width-by-inputs: 3px;
  --accessibility-focus-width-by-links: 2px;
  --accessibility-focus-width: var(--accessibility-focus-width-default); /* @package Accessibility */
}

html[data-focus-outline="visible"].iframe-route body {
  padding: var(--accessibility-focus-width);
}

/* @package Accessibility */
:root[data-focus-outline="visible"] .ym-button.ym-primary:focus,
:root[data-focus-outline="visible"] :focus {
  outline: var(--accessibility-focus-width) dashed var(--theme-color-focus);
  --accessibility-focus-input-width-delta: calc(var(--accessibility-focus-width) * 2);
}

/* @package Accessibility by buttons */
:root[data-focus-outline="visible"]
  :where(
    button:focus,
    input[type="submit"],
    input[type="image"],
    input[type="button"]
  ) {
  --accessibility-focus-width: var(--accessibility-focus-width-by-buttons);
}

/* @package Accessibility by links */
:root[data-focus-outline="visible"] :where(a:focus) {
  --accessibility-focus-width: var(--accessibility-focus-width-by-links);
}

/* @package Accessibility selection in inputs, textarea */
:root[data-focus-outline="visible"] :focus::selection {
  background-color: var(--theme-color-focus);
  color: var(--theme-color-focus-opposite);
}

/* @package Accessibility inputs: margins and padding */
:root[data-focus-outline="visible"]
  :where(
    input[type="date"]:focus,
    input[type="email"]:focus,
    input[type="number"]:focus,
    input[type="text"]:focus,
    input[type="password"]:focus,
    textarea:focus,
    .ui-selectmenu-button:focus
  ) {
  --accessibility-focus-width: var(--accessibility-focus-width-by-inputs);
  outline-offset: 0px;
  margin-left: var(--accessibility-focus-width);
  padding: var(--accessibility-focus-width);
}

html.touch-screen-mode > body {
  --accessibility-focus-width-default: 0px;
  --accessibility-focus-width-by-buttons: 0px;
  --accessibility-focus-width-by-inputs: 0px;
  --accessibility-focus-width-by-links: 0px;
}

/**** containerMainContent ****/
div.ym-column > div > div.ym-cbox {
  container-name: containerMainContent;
	container-type: inline-size;
}


.ui-selectmenu-button:focus {
  padding-left: 1em; /* restored default value */
}

:root[data-focus-outline="visible"] span.ui-spinner:focus-within {
  --accessibility-focus-width: var(--accessibility-focus-width-by-inputs);
  outline: var(--accessibility-focus-width) dashed var(--theme-color-focus);
  --accessibility-focus-input-width-delta: calc(var(--accessibility-focus-width) * 2);
}

:root[data-focus-outline="visible"]
  span.ui-spinner:focus-within
  input:focus {
  --accessibility-focus-width: 0;
}

/* @package Accessibility checboxes: margins and padding */
:root[data-focus-outline="visible"] input[type="checkbox"]:focus {
  margin-left: var(--accessibility-focus-width);
}

/* @package Accessibility article search field: margins and padding */
:root[data-focus-outline="visible"] input[name="needle"]:focus {
  padding: 0;
}

/* @package Accessibility mmenu-js: margins and padding by linked captions */
:root[data-focus-outline="visible"] a.mm-listitem__text:focus {
  margin: var(--accessibility-focus-width);
  /* padding-left: calc(20px - var(--accessibility-focus-width));
  padding-top: var(--accessibility-focus-width);
  padding-bottom: var(--accessibility-focus-width); */
  --padding-mmenujs: calc(
    (var(--mm-listitem-size) - var(--mm-line-height)) / 2
  );
  /* padding-top   : calc((var(--mm-listitem-size) - var(--mm-line-height) - var(--accessibility-focus-width)*2)/ 2);
  padding-bottom: calc((var(--mm-listitem-size) - var(--mm-line-height) - var(--accessibility-focus-width)*2)/ 2); */
  padding-left: calc(
    (var(--padding-mmenujs) - var(--accessibility-focus-width)) * 2
  );
  padding-top: calc(var(--padding-mmenujs) - var(--accessibility-focus-width));
  padding-bottom: calc(
    var(--padding-mmenujs) - var(--accessibility-focus-width)
  );
}

/* @package Accessibility mmenu-js: buttons "back" ("<") and close ("x") */
:root[data-focus-outline="visible"] div.mm-navbar > a:focus {
  margin: var(--accessibility-focus-width);
  padding: var(--accessibility-focus-width);
  /*height: calc(44px - var(--accessibility-focus-width)  * 2);
  width: calc(50px - var(--accessibility-focus-width)  * 2);*/
}
/* @package Accessibility mmenu-js: margins by breadcrumbs */
:root[data-focus-outline="visible"] div.mm-navbar__breadcrumbs > a:focus {
  margin-left: var(--accessibility-focus-width);
  padding-left: var(--accessibility-focus-width);
}

/* @package Accessibility mmenu-js: margins and padding by buttons ">" (open next level) */
:root[data-focus-outline="visible"] a.mm-listitem__btn:focus {
  margin: var(--accessibility-focus-width);
}

:root[data-focus-outline="visible"] a.mm-btn_next.mm-listitem__btn:focus::after {
  right: calc(23px - var(--accessibility-focus-width));
}

/* @package Accessibility jquery-ui: theme "contrast" */
:root[data-theme="contrast"] .ui-widget-content a {
  color: var(--theme-color-dark);
}

:root[data-theme="contrast"] .ui-state-default,
:root[data-theme="contrast"] .ui-widget-content .ui-state-default,
:root[data-theme="contrast"] .ui-widget-header .ui-state-default,
:root[data-theme="contrast"] .ui-button,
:root[data-theme="contrast"] .ui-button.ui-state-disabled:hover,
:root[data-theme="contrast"] .ui-button.ui-state-disabled:active {
  border-color: var(--theme-color-bright);
  background-color: var(--theme-color-bright);
  color: var(--theme-color-bright-opposite);
}

/* @package Accessibility jquery-ui: theme "contrast", exceptions */
:root[data-theme="contrast"] .free-title.ui-state-default {
  background-color: var(--theme-color-black-opposite);
  color: var(--theme-color-black);
}

/* @package Accessibility jquery-ui: theme "contrast", exceptions: ui-tabs */
:root[data-theme="contrast"] .ui-tabs .ui-tabs-nav li.ui-state-default a {
  border-color: var(--theme-color-bright);
  background-color: var(--theme-color-bright);
  color: var(--theme-color-bright-opposite);
}
:root[data-theme="contrast"] .ui-tabs .ui-tabs-nav li.ui-state-default:hover a,
:root[data-theme="contrast"] .ui-tabs .ui-tabs-nav li.ui-state-active a {
  border-color: var(--theme-color-dark);
  background: var(--theme-color-dark);
  color: var(--theme-color-white);
}

/* @package Accessibility jquery-ui: theme "contrast", exceptions: ui-accordion */
:root[data-theme="contrast"]
  .ui-accordion
  .ui-state-default.ui-accordion-header-collapsed
  a {
  color: var(--theme-color-bright-opposite);
}
:root[data-theme="contrast"]
  .ui-accordion
  .ui-state-default.ui-accordion-header-collapsed
  .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.real-white.png");
}
:root[data-theme="contrast"]
  .ui-accordion
  .ui-state-default.ui-accordion-header-active {
  background-color: var(--theme-color-dark);
}

/* @package Accessibility jquery-ui: theme "contrast", exceptions: ui-datepicker */
:root[data-theme="contrast"] .ui-datepicker .ui-icon {
  background-image: url("images/ui-icons_000000_256x240.png");
  /* background-image: url("images/ui-icons_333333_256x240.png"); */
}
:root[data-theme="contrast"] .ui-datepicker .ui-state-hover .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.real-white.png");
}
/* Day selected */
:root[data-theme="contrast"] .ui-datepicker .ui-state-default.ui-state-hover,
:root[data-theme="contrast"]
  .ui-datepicker
  .ui-datepicker-current-day
  .ui-state-active {
  background-color: var(--theme-color-dark);
  color: var(--theme-color-white);
}

.ym-form .ym-fbox::after,
.ym-form .ym-fbox-text::after,
.ym-form .ym-fbox-select::after,
.ym-form .ym-fbox-check::after,
.ym-form .ym-fbox-button::after {
  /*clear: both;*/
  content: "";
  /* 09.12.2025 EXPERIMENTAL ON */
  /*display: block;*/
  /*font-size: 0;*/
  /*height: 0;*/
  /*visibility: hidden;*/
}

html.touch-screen-mode body {
  /* header <<redefined>> */
  --header-height: 85px;
}

html.agent body {
  /* agent toolbar <<redefined>> */
  --agent-toolbar-height: 41px;
}
/*** color settings ***/
.color-dark-background {
  background-color: var(--theme-color-dark);
}
.color-middle-background {
  background-color: var(--theme-color-middle);
}
.color-bright-background {
  background-color: var(--theme-color-bright);
}
.color-dark {
  color: var(--theme-color-dark);
}
.color-middle {
  color: var(--theme-color-middle);
}
.color-bright {
  color: var(--theme-color-bright);
}

/** jQuery UI **/
.ui-visual-focus {
  /*box-shadow: 0 0 1px 1px var(--theme-color-middle);*/
  box-shadow: none;
}

.ui-progressbar .ui-progressbar-value {
  background: #a00;
}

/**** Font Awesome 6 Pro ****/
.fa-duotone {
  --fa-primary-color: var(--theme-color-bright);
  --fa-secondary-color: var(--theme-color-dark);
  --fa-secondary-opacity: 1;
}

.fa-duotone.fa-cart-plus {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-bright);
}

:root[data-theme="contrast"] .fa-duotone.fa-cart-plus {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-bright);
  --fa-secondary-color: #ffcd00;
}

.fa-duotone.fa-toggle-off {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-dark);
}

.fa-duotone.fa-toggle-on {
  --fa-primary-color: var(--theme-color-bright);
  --fa-secondary-color: var(--theme-color-dark);
}
/* @package Accessibility : switcher is on */
.ui-tooltip .fa-duotone.fa-universal-access,
.fa-duotone.fa-universal-access {
  --fa-primary-color: var(--theme-color-dark-opposite);
  --fa-secondary-color: var(--theme-color-dark);
}
/* @package Accessibility : theme "contrast" */
:root[data-theme="contrast"] .fa-duotone.fa-toggle-off {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-dark);
}

:root[data-theme="contrast"] .fa-duotone.fa-toggle-on {
  --fa-primary-color: var(--theme-color-white);
  --fa-secondary-color: var(--theme-color-dark);
}

/* Button for opening order lists dialog: mini (in cells) */
span.fa-stack.order-lists {
  width: 2em;
}
.ui-tooltip span.fa-stack.order-lists .fa-duotone.fa-circle,
span.fa-stack.order-lists .fa-duotone.fa-circle {
  --fa-secondary-color: var(--theme-color-dark-b1);
}

span.fa-stack.order-lists .fa-regular.fa-star {
  color: var(--theme-color-dark);
  display: inline-block;
}

span.fa-stack.order-lists .fa-duotone.fa-star {
  --fa-secondary-color: var(--theme-color-white);
  display: none;
}

html.touch-mode-off span.fa-stack.order-lists:hover .fa-duotone.fa-circle {
  --fa-secondary-color: var(--theme-color-bright);
}
html.touch-mode-off span.fa-stack.order-lists:hover .fa-regular.fa-star {
  display: none;
}
html.touch-mode-off span.fa-stack.order-lists:hover .fa-duotone.fa-star {
  display: inline-block;
}
.ui-tooltip span.fa-stack.order-lists .fa-duotone.fa-circle {
  --fa-secondary-color: var(--theme-color-dark-b1) !important;
}
.ui-tooltip span.fa-stack.order-lists .fa-regular.fa-star {
  color: var(--theme-color-dark) !important;
  display: inline-block !important;
}
.ui-tooltip span.fa-stack.order-lists .fa-duotone.fa-star {
  display: none !important;
}

/* FontAwesome 4.7: Button for opening order lists dialog: mini (in cells) */
.ui-tooltip span.fa-version-4.fa-stack.order-lists .fa-circle,
span.fa-version-4.fa-stack.order-lists .fa-circle {
  color: var(--theme-color-dark-b1);
}

span.fa-version-4.fa-stack.order-lists .fa-star {
  color: var(--theme-color-white);
  display: none;
}

html.touch-mode-off span.fa-version-4.fa-stack.order-lists:hover .fa-circle {
  color: var(--theme-color-bright);
}
html.touch-mode-off span.fa-version-4.fa-stack.order-lists:hover .fa-star-o {
  display: none;
}
html.touch-mode-off span.fa-version-4.fa-stack.order-lists:hover .fa-star {
  display: inline-block;
}
.ui-tooltip span.fa-version-4.fa-stack.order-lists .fa-circle {
  color: var(--theme-color-dark-b1) !important;
}
.ui-tooltip span.fa-version-4.fa-stack.order-lists .fa-star-o {
  color: var(--theme-color-dark) !important;
  display: inline-block !important;
}
.ui-tooltip span.fa-version-4.fa-stack.order-lists .fa-star {
  display: none !important;
}

/* FontAwesome 4.7: Button for opening order lists dialog: normal (in details view) */
span.fa-version-4.fa-stack.order-lists.normal .fa-circle {
  color: var(--theme-color-white);
}
span.fa-version-4.fa-stack.order-lists.normal .fa-star {
  color: var(--theme-color-bright);
  font-size: 1.25em;
}
html.touch-mode-off
  span.fa-version-4.fa-stack.order-lists.normal:hover
  .fa-circle {
  color: var(--theme-color-bright);
}
html.touch-mode-off
  span.fa-version-4.fa-stack.order-lists.normal:hover
  .fa-star {
  color: var(--theme-color-white);
}

/* shopcart icon */
html.touch-mode-off a:hover .fa-duotone.fa-cart-plus {
  --fa-primary-color: var(--theme-color-bright);
  --fa-secondary-color: var(--theme-color-bright);
}

/* Cirlce with check */
.fa-duotone.fa-circle-check {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-dark-opposite);
}

.fa-duotone.fa-user-tie-hair {
  --fa-primary-color: var(--theme-color-dark);
  --fa-secondary-color: var(--theme-color-bright);
}

html.touch-mode-off table.clickable-rows tr:hover i[class^="fa"] {
  --fa-primary-color: var(--theme-color-bright-opposite);
  --fa-secondary-color: var(--theme-color-bright-opposite);
  color: var(--theme-color-bright-opposite);
}

/* Border radus settings */
/*
.ui-corner-all {
}
*/
button {
  border-radius: var(--theme-border-radius);
}
.ui-widget.ui-widget-content {
  border: 1px solid var(--theme-color-bright);
  border: 1px solid var(--theme-color-dark);
}
.ui-selectmenu-button {
  --td-padding-vertical: 1em;
  --ui-selectmenu-button-height: calc(
    2 * var(--td-padding-vertical) + var(--button-normal-height)
  );
}
.ui-selectmenu-button.ui-button {
  text-align: left;
  white-space: nowrap;
  /*max-width: 14em;*/
  width: 100%;
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--button-normal-height);
  /*height: var(--ui-selectmenu-button-height);*/
  height: auto;
  position: relative;
}
.ym-columnar .ui-selectmenu-button.ui-button {
  width: calc(
    var(--ym-form-field-width) - var(--accessibility-focus-input-width-delta)
  );
}
.ym-columnar .ui-selectmenu-button.ui-button:focus {
  margin-left: var(--accessibility-focus-width);
}
span.ui-selectmenu-button .ui-selectmenu-icon {
  top: 50%;
  transform: translateY(-50%);
  position: absolute;
  right: 15px;
}
/** **/
div.pages-bar .filter-select-label > .selection .ui-selectmenu-button.ui-button,
div.pages-bar .sort-select-label > .selection .ui-selectmenu-button.ui-button {
  height: var(--button-small-height);
  /* the same height like by pagination buttons ("prev next") */
  line-height: var(--button-small-height);
  /* the same height like by pagination buttons ("prev next") */
}
/** iconselectmenu extends ui-selectmenu **/
span.ui-selectmenu-button > table.selected-item img {
  width: auto;
  max-height: calc(var(--button-normal-height) - 4px);
}
/** ui-selectmenu (ui dropdowns) **/
/* dropdown selector */
section.filters-aggregator
  ul.group-filter
  div.ym-fbox-select
  > div.no-value
  > div.content,
span.ui-selectmenu-button .ui-selectmenu-text {
  font-size: 1rem;
  /*line-height: 22px;*/
  font-weight: 400;
}
/* form#orderStep1 ul li fieldset div.country span.ui-selectmenu-button { */
/*height: unset;*/
/* 11.04.2022 EXPERIMENTAL OFF */
/*} */
.ui-button:focus .ui-selectmenu-icon.ui-icon,
.ui-selectmenu-icon.ui-icon {
  background-image: url("images/ui-icons_000000_256x240.png");
}

.ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s {
  /*background-position: -65px -15px; */
  /* black icon "arrow down" */
  background-position: -243px -18px;
  /* white icon "arrow down" */
}
/* ui-selectmenu options panel */
/*.ui-front.ui-selectmenu-open,*/
.ui-front.ui-selectmenu-open .ui-widget-content {
  border: 1px solid var(--theme-color-dark);
}

/* ui-selectmenu item */
.ui-front.ui-selectmenu-open .ui-menu-item-wrapper {
  padding: 10px 19px;
}
.ui-front.ui-selectmenu-open table.ui-menu-item-wrapper {
  padding: 0;
  /* Safari fix(?): padding by tables?? */
  margin: 0;
  /*border: 1px solid red;*/
}
/*
  .ui-front.ui-selectmenu-open table.ui-menu-item-wrapper td {
  }
  */
/* ui-selectmenu item by hover */
/*
  .ui-front.ui-selectmenu-open .ui-menu-item-wrapper.ui-state-active {

  }
  */

/* .ui-selectmenu-button:focus .ui-icon, */
/* 08.04.2022 OFF because the same CSS like by .group-b buttons (see lower) */
/* :root[data-theme='contrast'] .ui-selectmenu-button .ui-icon, */
.ui-selectmenu-button:active .ui-icon,
.ui-selectmenu-button:hover .ui-icon {
  background-image: url("images/ui-icons_ffffff_256x240.png") !important;
}
.ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s,
.ui-selectmenu-icon.ui-icon.ui-icon-triangle-1-s {
  background-position: -240px -17px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
  top: 2px !important;
  /* 2022-02-09 CSS fix by hover */
}
.ui-datepicker .ui-datepicker-prev {
  left: 2px !important;
  /* 2022-02-09 CSS fix by hover */
}

.ui-datepicker .ui-datepicker-next {
  right: 2px !important;
  /* 2022-02-09 CSS fix by hover */
}

.ui-spinner-input {
  padding: 0em 0;
  margin: 0em 0;
}

/*** input[type="number"] ***/
span.ui-spinner > input[type="number"] {
  width: calc(100% - 28px);
}

.ui-spinner-button {
  border: 1px solid var(--theme-color-white);
}

.ui-spinner.minus-plus .ui-spinner-button,
.ui-spinner.minus-plus .ui-spinner-button:hover,
.ui-spinner.minus-plus .ui-spinner-button {
  background: var(--theme-color-white);
}

/*** .ui-dialog ***/
.ui-dialog {
  --padding-y: 12px;
  --padding-x: 15px;

  max-width: 50rem;
}
.ui-dialog > .ui-dialog-titlebar {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-white);
   padding: var(--padding-y) var(--padding-x);
}
:root[data-theme="contrast"] .ui-dialog > .ui-dialog-titlebar .ui-button,
:root[data-theme="contrast"] .ui-dialog > .ui-dialog-titlebar .ui-button:hover,
.ui-dialog > .ui-dialog-titlebar .ui-button {
  background: var(--theme-color-white);
  border: 1px solid var(--theme-color-white);
}
/*
.ui-dialog .ui-dialog-titlebar-close {
  top: var(--padding-x);
  right: var(--padding-x);
  width: 20px;
  margin: -8px 0 0 0;
  padding: 1px;
  height: 20px;
} */
.ui-dialog .ui-dialog-titlebar-close {
	top: var(--padding-y);
	right: var(--padding-x);

  width: 1rem;
	height: 1rem;

	margin: 0px 0 0 0;
	padding: 0;
}
.ui-dialog > .ui-dialog-titlebar > .ui-button .ui-icon.ui-icon-closethick {
  width: 1rem;
  height: 1rem;
  background: url("../img/icons/close.png");
  background-size: contain;
  opacity: 0.6;

  margin: 0;
  top: 0;
  left: 0;
}

.ui-dialog > .ui-dialog-titlebar > .ui-dialog-title {
  /* font-size: 1rem; */
  font-weight: 100;
}
.ui-dialog > .ui-dialog-titlebar > .ui-button {
  border: 1px solid var(--theme-color-white);
}
/*
  .ui-dialog > .ui-dialog-titlebar > .ui-button img {

  }
  */

.ui-dialog-buttonset>.ui-button,
/* buttons in jQuery UI dialogs */
  .ym-button.ui-button {
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.8125rem;
  height: var(--button-normal-height);
}

/* buttons in jQuery UI dialogs */
/*.ui-dialog-buttonset > .ui-button > .interactive:AFTER,
  .ym-button.ui-button > .interactive:AFTER { */
/*content: ' ...';*/
/* it destroys the FontAwesome animation */
/*} */

.ym-button.ui-button.ym-small {
  height: var(--button-small-height);
}

button.ui-button,
button {
  padding: 0px 0.625em;
  /* 2022-03-09 EXPERIMENTAL ON */
}

button.ui-state-disabled {
  opacity: 0.7;
}

/* buttons in jQuery UI dialogs */
.ui-dialog-buttonset > .ui-button {
  height: var(--button-small-height);
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  /* radio buttons bei active or hover state */
  border-color: var(--theme-color-bright);
}

/*** Progress Bar ***/
.ui-progressbar .ui-progressbar-value {
  margin: 0;
  height: 100%;
  border: 0;
}

/*** Long time process ***/
.longTimeProcess {
  display: grid;
  grid-template-areas:
    "button"
    "progressbar"
    "message"
    "iframe";
}
.longTimeProcess button {
  grid-area: button;
  margin: 0;
}
.longTimeProcess > .progressbar {
  grid-area: progressbar;
  margin-top: 10px;
}
.longTimeProcess > .message {
  grid-area: message;
  margin-top: 5px;
  text-align: center;
  cursor: pointer;
}

.longTimeProcess > iframe {
  grid-area: iframe;
  position: absolute;
  left: -1000px;
  top: -1000px;
  width: 1px;
  height: 1px;
}

html.development .longTimeProcess > iframe {
  display: block;
  position: relative;
  left: 0;
  top: 0;
  margin-top: 10px;
  width: 100%;
  height: 25vh;
  border: 1px dotted red;
}

.longTimeProcess .ui-progressbar {
  position: relative;
}
.longTimeProcess .ui-progressbar > .progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* state running */
.longTimeProcess.state-running .ui-progressbar > .progress-label {
  color: var(--message-color-info);
}

.longTimeProcess.state-running .ui-progressbar > .ui-progressbar-value {
  background: var(--message-color-info-opposite);
}

/* state error */
.longTimeProcess.state-error .ui-progressbar > .progress-label {
  color: var(--message-color-error);
}

.longTimeProcess.state-error .ui-progressbar > .ui-progressbar-value {
  background: var(--message-color-error-opposite);
}
/*
  .longTimeProcess.state-error .message > a {

  }
  */

/* state success */
.longTimeProcess.state-success .ui-progressbar > .progress-label {
  color: var(--message-color-success);
}

.longTimeProcess.state-success .ui-progressbar > .ui-progressbar-value {
  background: var(--message-color-success-opposite);
}

/*** @package SiteReplication ***/
.siteReplication {
  display: grid;
  grid-template-areas:
    "progressbar"
    "message";
  margin-bottom: 1em;
}
.siteReplication > .progressbar {
  grid-area: progressbar;
  margin-top: 10px;
}
.siteReplication > .message {
  grid-area: message;
  margin-top: 5px;
  text-align: center;
  cursor: pointer;
}

.siteReplication .ui-progressbar {
  position: relative;
}
.siteReplication .ui-progressbar > .progress-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* intermediate state */
.siteReplication .ui-progressbar.ui-progressbar-indeterminate {
  border: 0px solid var(--theme-color-bright);
}
.siteReplication
  .ui-progressbar.ui-progressbar-indeterminate
  .ui-progressbar-overlay {
  opacity: 0.05;
}
/*
.siteReplication .ui-progressbar.ui-progressbar-indeterminate > .progress-label {
  color: var(--theme-color-dark);
}
*/

/* state running */
.siteReplication.state-running .ui-progressbar > .progress-label {
  color: var(--message-color-info);
}

.siteReplication.state-running .ui-progressbar > .ui-progressbar-value {
  background: var(--message-color-info-opposite);
}

/* state error */
.siteReplication.state-error .ui-progressbar {
  border-color: var(--message-color-error-strong);
}
.siteReplication.state-error .ui-progressbar > .progress-label {
  color: var(--message-color-error-strong-opposite);
}

.siteReplication.state-error .ui-progressbar > .ui-progressbar-value {
  background: var(--message-color-error-strong);
}
/*
.longTimeProcess.state-error .message > a {

}
*/

/* state success */
.siteReplication.state-success .ui-progressbar > .progress-label {
  color: var(--message-color-success);
}

.siteReplication.state-success .ui-progressbar > .ui-progressbar-value {
  background: var(--message-color-success-opposite);
}

/*** Buttons groups ***/
/** Redefine this rules in concrete project **/
/*
  button.group-a {

  }

  button.group-a.group-b {

  }
  */

:root[data-theme='contrast'] .ui-selectmenu-button.ui-button,
:root[data-theme='contrast'] .ui-selectmenu-button.ui-button:focus,
.ui-selectmenu-button.ui-button,
.ui-selectmenu-button.ui-button:focus,
/* within it you may make the same look by dropdowns like with the .group-b buttons */
:root[data-theme='contrast'] button.group-b:focus,
:root[data-theme='contrast'] button.group-b,
button.group-b:focus,
button.group-b {
  /*border: 1px solid var(--theme-color-white);*/
  border: 1px solid var(--theme-color-dark);
  background: var(--theme-color-white);
  color: var(--theme-color-dark);
}

:root[data-theme='contrast'] .ui-button:hover,
.ui-selectmenu-button.ui-button:hover,
.ui-selectmenu-button.ui-button:active,
/* within it you may make the same look by dropdowns like with the .group-b buttons */
  button.group-b:hover,
  button.group-b:active {
  border: 1px solid var(--theme-color-dark);
  background: var(--theme-color-dark);
  color: var(--theme-color-white);
}

:root[data-theme="contrast"] .ui-spinner-button:hover {
	background: var(--theme-color-white);
	color: var(--theme-color-white);
	border: none;
}

:root[data-theme="contrast"] button.group-c:focus,
:root[data-theme="contrast"] button.group-c,
button.group-c:focus,
button.group-c {
  border: 1px solid var(--theme-color-dark);
  background: var(--theme-color-white);
  color: var(--theme-color-dark);
}

button.group-c:hover,
button.group-c:active {
  border: 1px solid var(--theme-color-dark);
  background: var(--theme-color-bright);
  color: var(--theme-color-dark);
}

/*** Buttons with prefix|suffix ***/
/** prefix|suffix images visibility by hover **/
button > .image.hover,
button:hover > .image.default,
button:active > .image.default,
button:focus > .image.default {
  display: none;
}
button:hover > .image.hover,
button:active > .image.hover,
button:focus > .image.hover,
button > .image.default {
  display: table-cell;
}

section.buttons > .count-2 button > .image,
section.buttons > .count-2 button:hover > .image {
  display: none;
  /* not enough space for icons */
}

/** button.with-prefix|suffix-image **/
button.with-prefix,
button.with-suffix {
  margin: 0;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  --line-heihgt: 1.4em;
}
button.with-prefix > .caption,
button.with-suffix > .caption {
  padding: 0px;
  flex-grow: 1;
  word-break: break-word;
}
button.with-prefix > :where(span.caption, i[class^="fa"]),
button.with-suffix > :where(span.caption, i[class^="fa"]) {
  line-height: var(--line-heihgt);
  margin: 0;
  padding: 0;
}
:where(button.with-prefix, button.with-suffix) > i[class^="fa"] {
  font-size: var(--line-heihgt);
}

button.with-prefix > .caption.ym-hideme,
button.with-suffix > .caption.ym-hideme {
  display: none;
}

:where(button.with-prefix, button.with-suffix) img {
  max-height: calc(var(--button-normal-height) - 15px);
}

button.with-prefix > .caption {
  padding-left: 0.4em;
}
button.with-suffix > .caption {
  padding-right: 0.4em;
}

/** Hide the arrows "up|down" by input[type="number" **/
/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  /*-moz-appearance: textfield;*/
  /* Firfox*/
  appearance: textfield;
  /* 18.10.2023 EXPERIMENTAL ON */
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="text"],
input[type="password"] {
  border: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--theme-color-dark);
}

/* Do not display the [x] for cleaning input field by Edge */
input[type="date"]::-ms-clear,
input[type="email"]::-ms-clear,
input[type="number"]::-ms-clear,
input[type="text"]::-ms-clear,
input[type="password"]::-ms-clear {
  display: none;
}

input[type="date"],
input[type="email"],
input[type="number"],
input[type="text"],
input[type="password"],
textarea {
  padding: 0 0 0;
  font-family: var(--font-family);
  font-size: var(--font-size);
  color: var(--theme-color-dark);
  background: var(--theme-color-white);
}
.ym-form input[type="date"],
.ym-form input[type="email"],
.ym-form input[type="number"],
.ym-form input[type="text"],
.ym-form input[type="password"] {
  padding-top: calc(var(--ym-form-text-label-top) - 0px);
}
.ui-spinner input[type="date"],
.ui-spinner input[type="number"],
.ui-spinner input[type="text"],
.ui-spinner input[type="password"],
.ui-spinner textarea {
  padding-top: 0;
}

textarea {
  border: 1px solid var(--theme-color-dark-b2);
  padding: 0.2em 0.2em;
}

input[type="date"].read-only,
input[type="email"].read-only,
input[type="number"].read-only,
input[type="text"].read-only,
input[type="password"].read-only,
textarea.read-only {
  background: none;
  font-weight: 600;
  border: 0;
}

/**
   * "Yet Another Multicolumn Layout" - YAML CSS Framework
   *
   * default screen stylesheet - FULLPAGE-layout type layout
   *
   * @copyright       © 2005-2013, Dirk Jesse
   * @license         CC-BY 2.0 (http://creativecommons.org/licenses/by/2.0/),
   *                  YAML-CDL (http://www.yaml.de/license.html)
   * @link            http://www.yaml.de
   * @package         yaml
   * @version         4.1.2
   */
/* force vertical scrollbar */
body {
  overflow-y: scroll;
}

/* Layout Configuration */
.ym-wrapper {
  margin: 0 auto;
}
.ym-wrapper,
.ym-wrapper > .ym-wbox {
  max-width: var(--wrapper-max-width);
  margin: 0 auto;
}

.ym-wbox {
  padding: 1.5em;
}

.ym-gbox {
  padding: 0 1.5em;
  padding: 0 0;
  /* EXPERIMENTAL */
}

.ym-wrapper > .ym-wbox {
  padding: 0 0em;
}

.ym-wrapper.wide {
  max-width: none;
  padding: 0;
}

/**** layout paddings ****/
nav#menuPrimaryTouchScreen,
footer .ym-wrapper > .ym-wbox,
footer.additional .ym-wrapper > .ym-wbox,
.ym-wrapper > .ym-wbox {
  padding-left: var(--wrapper-paddings-left-right);
  padding-right: var(--wrapper-paddings-left-right);
}

.ym-form {
  --ym-form-text-label-top: calc(var(--button-normal-height) / 2 - 2px);
  --ym-form-label-width: 100%;
  --ym-form-field-width: 100%;
}

.ym-form.ym-columnar {
  --ym-form-label-width: 38%;
  --ym-form-field-width: calc(100% - var(--ym-form-label-width));
}
/*
  .tooltip-popup .ym-form {

  }
  */
.ym-form.ym-columnar fieldset.read-only {
  --ym-form-text-label-top: 10px;
}

.ym-form label.optional,
.ym-form label.required,
.ym-form label {
  font-weight: 600;
}



.ym-form.wizard-step-users-data > .field-submit {
  container-type: inline-size;

  display: flex;
  justify-content: flex-end;
}

@container (width < 30rem) {
   .ym-form.wizard-step-users-data > .field-submit button.ui-button,
   .ym-form.wizard-step-users-data > .field-submit {
      width: 100%;
   }
}

/* ui radio buttons */
label.ui-checkboxradio-label {
  font-weight: 400;
}

.ym-form fieldset.read-only label.optional,
.ym-form fieldset.read-only label.required,
.ym-form fieldset.read-only label {
  font-weight: 400;
}

.ym-form .ym-fbox-select > label {
  line-height: var(--button-normal-height);
}
/*
  .ym-form .ym-fbox-select > label {

  }
  */

.ym-form .ym-fbox > label,
.ym-form .ym-fbox-text > label {
  /*padding-top: calc(var(--button-normal-height) / 4);*/
  /* not exactly perfect solution; 11.04.2022 OFF */
  height: var(--button-normal-height);
  /*border: 1px solid;*/
  position: relative;
}

.ym-form .ym-fbox-check.field-radio > label,
.ym-form .ym-fbox-check.field-checkbox > label {
  /* 2023-08-22 EXPERIMENTAL ON */
  line-height: var(--button-normal-height);
}

.ym-form .ym-fbox.textarea > label {
  height: auto;
  /*margin-top: var(--ym-form-text-label-top);*/
}

.ym-form.ym-columnar .ym-fbox.textarea,
.ym-form.ym-full .ym-fbox.textarea > label {
  margin-top: var(--ym-form-text-label-top);
}

.ym-form .ym-fbox-text > label {
  top: var(--ym-form-text-label-top);
  line-height: 1em;
}

.tooltip-popup .ym-form .ym-fbox-text > label {
  height: auto;
  line-height: 2em;
}

.ym-columnar label,
.ym-columnar .ym-fbox-check > label,
.ym-columnar .ym-label {
  width: var(--ym-form-label-width);
}
.ym-columnar .ym-message {
  margin-left: var(--ym-form-label-width);
}

.ym-form input,
.ym-form textarea,
.ym-form select {
  width: var(--ym-form-field-width);
}
.ym-form input,
.ym-form select {
  width: calc(
    var(--ym-form-field-width) - var(--accessibility-focus-input-width-delta)
  );
  height: var(--button-normal-height);
}
.ym-form .ym-fbox-check > .ui-controlgroup {
  width: var(--ym-form-field-width);
}

/* element with fixed position */
.position-fixed {
  position: fixed;
}

/*** this span is inserting by blocks with overflow ***/
span.tooltip-if-overflow.more:after {
  content: "...";
}

/* fallback for missing media queries support*/
body > header,
body > nav,
body > main,
body > footer {
  min-width: 760px;
}

/* Basic Element Styling */
header {
  background: var(--theme-color-white);
  color: #000;
}
header h1 {
  background: transparent;
  color: var(--theme-color-white);
}
header .ym-wbox {
  padding: 1.5em;
}

nav {
  background: #222222;
}

main aside .ym-gbox-right {
  border-left: 1px solid var(--theme-color-dark);
}

div.footers div.layout-footer-suffix,
footer {
  color: var(--theme-color-dark);
}
footer p {
  margin: 0;
}
footer .ym-wbox {
  padding: 1.5em;
}

.ym-gbox-left {
  padding: 0 1.5em 0 0;
}

.ym-gbox-right {
  padding: 0 0 0 1.5em;
}

/* reset fallback values in modern browsers */
@media screen and (min-width: 0px) {
  body > header,
  body > nav,
  body > main,
  body > footer {
    min-width: 0;
  }
}
@media screen and (max-width: 47.5rem) {
  /* 760px */
  /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-1 */
  .linearize-level-1,
  .linearize-level-1 > [class*="ym-c"],
  .linearize-level-1 > [class*="ym-g"] {
    /* linearization for grids and columns module */
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    width: auto !important;
  }

  .linearize-level-1 > [class*="ym-c"] > [class*="ym-cbox"],
  .linearize-level-1 > [class*="ym-g"] > [class*="ym-gbox"] {
    /* reset defined gutter values */
    margin: 0;
    padding: 0;
    /* optional for containing floats */
    overflow: hidden;
  }

  .secondary {
    border-top: 1px #888 solid;
    /*margin-top: 1.5em !important;*/
    margin-top: 1.5em;
    /* 2023-06-23 EXPERIMENTAL */
    /* padding-top: 1.5em !important;*/
    padding-top: 1.5em;
    /* 2023-06-23 EXPERIMENTAL */
  }

  main aside .ym-gbox-right {
    border: 0 none;
  }

  .ym-searchform {
    display: block;
    float: none;
    width: auto;
    text-align: right;
  }

  .ym-searchform input[type="search"] {
    width: 14%;
  }
}

@media screen and (max-width: 30rem) {
  /* 480px */
  /* Linearisation for Grid- and Column-Module, based on CSS class .linearize-level-2 */
  .linearize-level-2,
  .linearize-level-2 > [class*="ym-c"],
  .linearize-level-2 > [class*="ym-g"] {
    /* linearization for grids and columns module */
    display: block;
    float: none;
    padding: 0;
    margin: 0;
    width: auto !important;
  }

  .linearize-level-2 > [class*="ym-c"] > [class*="ym-cbox"],
  .linearize-level-2 > [class*="ym-g"] > [class*="ym-gbox"] {
    /* reset defined gutter values */
    margin: 0;
    padding: 0;
    /* optional for containing floats */
    overflow: hidden;
  }

  header .ym-wbox {
    padding: 0.75em 10px;
  }
  header h1 {
    font-size: 1.5em;
    line-height: 1em;
    margin: 0;
  }

  footer .ym-wbox,
  .ym-wbox,
  .ym-searchform,
  nav .ym-hlist ul {
    padding-left: 10px;
    padding-right: 10px;
  }

  .ym-searchform,
  nav .ym-hlist ul,
  nav .ym-hlist li {
    display: block;
    float: none;
    width: auto;
    text-align: left;
  }

  .ym-searchform input[type="search"] {
    width: 75%;
  }
}

/**
   * typography.css
   */
/*
  * @section global typography settings
  *
  * vertical rhythm settings (based on em-unit)
  * -------------------------------------------
  * basefont-size:  14px (87.5%)
  * line-height  :  21px (factor: 1.5) */
/* (en) reset font size for all elements to standard (16 Pixel) */
body {
  /* font-size: 87.5%; 24.06.2025 EXPERIMENTAL OFF */
  color: var(--theme-color-dark);
}

/*--- Headings | Überschriften ------------------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 400;
  margin: 0;
}

h1 {
  font-size: 250%;
  line-height: 0.875;
  margin: 0 0 0.4375em;
}

h2 {
  /* font-size: 32px; */
  font-size: 166%;
  line-height: 1.3125;
  margin: 0 0 0.65625em 0;
}

h3 {
  /* font-size: 24px; */
  font-size: 171.42857%;
  line-height: 0.875;
  margin: 0 0 0.875em 0;
}

h4 {
  /* font-size: 21px; */
  font-size: 150%;
  line-height: 1;
  margin: 0 0 1em 0;
}

h5 {
  /* font-size: 18px; */
  font-size: 128.57143%;
  line-height: 1.16667;
  margin: 0 0 1.16667em 0;
}

h6 {
  /* font-size: 14px; */
  font-size: 100%;
  font-weight: 600;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
}

.hyphens {
  hyphens: auto;
  -ms-hyphens: auto;
  -moz-hyphens: auto;
  -webkit-hyphens: auto;
  white-space: normal;
  overflow-wrap: anywhere;
  /* by not really good browsers */
}

/* --- Lists | Listen  -------------------------------------------------------------------------------- */
ul,
ol,
dl {
  font-size: 100%;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
}

ul.ym-grid {
  margin: 0;
  padding: 0;
}

ul {
  list-style-type: disc;
}

ol {
  list-style-type: decimal;
}

ul ul {
  list-style-type: circle;
  margin-top: 0;
}

ol ol {
  list-style-type: lower-latin;
  margin-top: 0;
}

ol ul {
  list-style-type: circle;
  margin-top: 0;
}

li {
  font-size: 100%;
  line-height: 1.2;
  margin-left: 1.2em;
}

dt {
  font-weight: 600;
}

dd {
  margin: 0 0 1.5em 0.8em;
}

/* --- general text formatting | Allgemeine Textauszeichnung ------------------------------------------ */
p {
  font-size: 100%;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
}

blockquote,
cite,
q {
  font-style: italic;
}

blockquote {
  background: transparent;
  margin: 1.5em 0 0 1.5em;
}

strong,
b {
  font-weight: 600;
}

em,
i {
  font-style: italic;
}

big {
  /* font-size: 16px; */
  font-size: 114.28571%;
  line-height: 1.3125;
}

small {
  /* font-size: 12px; */
  font-size: 85.71429%;
  line-height: 1.75;
}

pre,
code,
kbd,
tt,
samp,
var {
  font-size: 100%;
}

pre {
  font-size: 100%;
  line-height: 1.5;
  margin: 0 0 1.5em 0;
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

pre,
code {
  color: #880000;
}

kbd,
samp,
var,
tt {
  color: #666666;
  font-weight: 600;
}

var,
dfn {
  font-style: italic;
}

acronym,
abbr {
  border-bottom: 1px #aaa dotted;
  font-variant: small-caps;
  letter-spacing: 0.07em;
  cursor: help;
}

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

mark {
  background: yellow;
  color: black;
}

hr {
  color: var(--theme-color-white);
  background: transparent;
  margin: 0 0 0.75em 0;
  padding: 0 0 0.67857em 0;
  border: 0;
  border-bottom: 1px #eeeeee solid;
}

/*--- Links --- */
a {
  color: var(--theme-color-dark);
  background: transparent;
  text-decoration: none;
}

a:active {
  outline: none;
}

/* (en) maximum constrast for tab focus - change with great care */
/* (en) Maximaler Kontrast für Tab Focus - Ändern Sie diese Regel mit Bedacht */
.touch-mode-off a:hover,
.touch-mode-off a:focus {
  text-decoration: none;
}

/* --- images ------------------ */
img,
figure {
  margin: 0;
}

.flexible {
  margin-bottom: 1.5em;
  max-width: 100%;
  height: auto;
}

img.flexible {
  margin-bottom: 0;
}

img.flexible.center {
  margin: 0 auto;
}

.bordered {
  margin-bottom: 1.5em;
  border: 2px #eee solid;
  border: 2px white solid;
  -webkit-box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.25);
}

/**** centering ****/
.container-center {
  display: grid;
  grid-template-columns: 100%;
  grid-template-rows: 100%;
  align-items: center;
  justify-items: center;
}

a.container-center {
  height: 100%;
  width: 100%;
  max-width: 100% !important;
  /* 16.09.2022 TODO: remove !important */
  max-height: 100% !important;
  /* 16.09.2022 TODO: remove !important */
}

.container-center > img {
  width: auto;
  height: auto;
  max-width: 100% !important;
  /* 16.09.2022 TODO: remove !important */
  max-height: 100% !important;
  /* 16.09.2022 TODO: remove !important */
}

/*** centering tiny slider arrows ***/
.tns-outer.has-container-center {
  --prev-next-width: 20px;
  --tns-controls-height: auto;
  /* redefine it by concrete slider */
  padding-left: var(--prev-next-width) !important;
  padding-right: var(--prev-next-width) !important;
}
.tns-outer.has-container-center.transitionStart .tns-controls i.fa {
  color: var(--theme-color-dark);
}

/*
  .tns-outer > .tns-controls.container-center {

  }
  .tns-outer.has-container-center > .tns-controls.container-center {

  }
  */
.tns-outer > .tns-controls.container-center {
  display: grid;
  grid-template-areas: "prev next";
  grid-template-columns: 50% 50%;
  grid-template-columns: var(--prev-next-width) var(--prev-next-width);
  grid-template-rows: 100%;
  /*align-items: center;
	  justify-items: center;*/

  justify-content: stretch;
  justify-content: space-between;

  position: absolute;
  height: var(--tns-controls-height);
  top: auto;
  transform: none;

  z-index: 0;
  /* else links of items are not clickable */

  border: 0px solid red;
}
.tns-outer > .tns-controls.container-center > div {
  border: 1px solid blue;
}
.tns-outer > .tns-controls.container-center > div[data-controls="prev"] {
  grid-area: prev;
}
.tns-outer > .tns-controls.container-center > div[data-controls="next"] {
  grid-area: next;
}

/**
   * Generic Content Classes
   *
   * standard classes for positioning and highlighting
   */
.highlight {
  color: #cc3300;
}

.dimmed {
  color: #888888;
}

/**** parallax effect ****/
.parallax {
  /* this value will be set to 'scroll' by $('.parallax').parallax(); */
  background-attachment: fixed;
  /* required property for the parallax effect */
  background-repeat: no-repeat;
  /* usually no background repeat needs */
  background-position-x: center;
  /* X-axe: centering background is not bad by common cases */
  background-position-y: top;
  /*  Y-axe: it plays no rolw by $('.parallax').parallax(); */
  background-size: cover;
  /* background fills the whole container space */
  background-size: contain;
  /* background takes the whole container width */
  background-size: 100%;
  /* background has a percentage width */
  width: 100%;
  /* usually 100% width is ok */
  min-height: 300px;
  /* redefine it if needs */
}

/*** .parallax.route-start-page ***/
.parallax.route-start-page.case-1 {
  /*border: 1px solid red;*/
  /* 28vw = (1100 / 3800)% */
  height: calc(28vw + 14vw);
}
.parallax.ym-wrapper.wide.layout-footer-prefix {
  --prefix-height: 40vw;
  height: var(--prefix-height);
  min-height: auto;
  max-height: 25rem; /* 2025-09-11 EXPERIMENTAL rem */
  background-size: auto calc(var(--prefix-height) * 1);
  background-repeat: no-repeat;
  background-position-x: center;
  background-position-y: top;

  /* 17.08.2023 EXPERIMENTAL ON */
  /*max-width: var(--wrapper-max-width);
	  margin: 0 auto;*/
}

/**** parallax-z effect : 2023-02-07 Still nowhere applied ****/
.parallax-z {
  height: 100vh;

  overflow-x: hidden;
  overflow-y: auto;

  perspective: 1px;

  border: 1px solid red;
}
.parallax-z > [class^="z-"] {
  border: 1px solid blue;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.parallax-z > .z-0 {
  transform: translateZ(0);
}
.parallax-z > .z-1 {
  transform: translateZ(-1px);
  background: red;
}
.parallax-z > .z-2 {
  transform: translateZ(-2px);
  background: blue;
}
.parallax-z > [class^="z-"] img {
  width: 100%;
  height: auto;
}

/*** .parallax-z.route-start-page ***/
.parallax-z.route-start-page {
  /*border: 1px solid red;*/
  margin-top: -22px;
  height: 330px;
}
.parallax-z.route-start-page > .z-2 {
  top: auto;
  bottom: 10px;
  height: 100px;
}

/*** Special <ul>s ***/
/** ul.table-2-cols **/
ul.table-2-cols {
  margin: 0;
}
ul.table-2-cols > li {
  width: 50%;
}

ul.table-2-cols > li.label {
  font-weight: 600;
  text-align: right;
  padding-right: 0.4em;
}
/*
  ul.table-2-cols > li.value {
  }
  */

/** ul.table-2-cols.icon-label **/
ul.table-2-cols.icon-label > li.label {
  width: auto;
}
ul.table-2-cols.icon-label > li.label img {
  vertical-align: middle;
}
/*
  ul.table-2-cols.icon-label > li.value {

  }
  */
ul.table-2-cols.icon-label.please-wait > li.value label {
  line-height: 32px;
  margin-left: 10px;
}

/** ul.table-2-cols.dataprotection **/
ul.table-2-cols.dataprotection > li.value {
  width: auto;
}
ul.table-2-cols.dataprotection > li.value > i[class^="fa-"] {
  margin-right: 0.25em;
}

/** ul.toolbar **/
ul.toolbar {
  margin: 0px;
}
ul.toolbar li {
  width: auto;
}

/*** Messages ***/
/** layout messages **/
section.layout-message {
  margin-top: 0.3125rem;

  container-name: containerLayoutMessage;
  container-type: inline-size;
}
section.layout-message ul.table-2-cols > li.label {
  width: auto;
  padding-right: var(--box-padding-horizontal);
}

section.layout-message ul.table-2-cols > li.label img {
  position: relative;
  top: 2px;
}

section.layout-message ul.table-2-cols > li.label i[class^="fa"] {
  /*position: relative;
	  top: 2px;*/
  font-size: 1.5em;
}

section.layout-message ul.table-2-cols > li.value {
  width: 90%;
  padding-top: 4px;
  /* this padding because of the icons position */
  padding-bottom: 4px;
  /* this padding because of the icons position */
}

section.layout-message ul.table-2-cols > li.value > ul {
  margin: 0;
}

section.layout-message ul.table-2-cols > li.value > ul > li {
  margin-top: 10px;
}
section.layout-message ul.table-2-cols > li.value > ul > li:first-child {
  margin-top: 0px;
}

/* div.more-info */
section.layout-message ul.table-2-cols > li.value .more-info {
  font-size: 0.9em;
}

section.layout-message ul.table-2-cols > li.value .more-info::before {
  content: "(";
}

section.layout-message ul.table-2-cols > li.value .more-info::after {
  content: ")";
}

@container containerLayoutMessage (width < 25em) {
  section.layout-message ul.table-2-cols > li.label.icon {
    display: none;
  }
}

/*** Main-Line ***/
div.main-line {
  /* height: var(--main-line-height); */
  min-height: var(--main-line-height);
  width: 100%;
 /*  background-color: var(--theme-color-dark-b1); */
  margin-bottom: 50px;
  /* 35px wenn ohne main-line */
}

div.main-line::before {
  content: '';
  position: absolute;
  top: var(--main-top);
  left: 0;
  height: var(--main-line-height);
  width: 100%;
  background-color: var(--theme-color-dark-b1); /* color for the first 40px */
  pointer-events: none; /* optional: allows clicks to pass through */
}

/*
div.other div.main-line {
  background-color: var(--theme-color-dark-b1);
}
div.articles div.main-line {
  background-color: var(--theme-color-dark-b1);
} */
div.main-line h1.layout-title.default {
  display: inline-block;
  font-size: 1.3125rem;
  padding: 0.75rem 1rem;
  line-height: 1.2em;

  font-weight: 400;
  /* 2 paddings top + font-size + (line-height - 1em) */
  --this-height: calc(0.75rem + 1.3125rem + 0.2em + 0.75rem);

  position: relative;
  top: calc(var(--main-line-height) - var(--this-height) / 2);
  left: 0;
  background: var(--theme-color-bright);
  color: var(--theme-color-bright-opposite);
  width: auto;
}
/*
@media (max-width: 37.5rem) {
  main > div.main-line {
    height: auto;

  }
   main > div.main-line h1.layout-title.default {

  }
} */


div.responsive.source.id-title {
  display: none;
}
main > div.ym-wrapper section.toolbar ul.shopcart li.pdf {
  display: none;
}

/** messages .box: common settings **/
.box {
  --box-padding-horizontal: 20px;
  --box-padding-vertical: calc(var(--box-padding-horizontal) - 2px);
  margin: 0 0 var(--box-padding-vertical) 0;
  padding: var(--box-padding-vertical) var(--box-padding-horizontal);
  font-size: 1.2em;

  border: 1px solid var(--message-color-default-opposite);
  background: var(--message-color-default-opposite);
  color: var(--message-color-default);
}

.box > *:last-child {
  margin-bottom: 0;
}

i.default-fa {
  color: var(--message-color-default-icon);
}

/* messages .info: information */
.box i.info-fa {
  color: var(--message-color-info-icon);
}
.box.info {
  border-color: var(--message-color-info-opposite);
  background-color: var(--message-color-info-opposite);
  color: var(--message-color-info);
}
.box.info a {
  color: var(--message-color-info);
}

/* messages .running: information */
.box i.running-fa {
  color: var(--message-color-running-icon);
}
.box.running {
  border-color: var(--message-color-running-opposite);
  background-color: var(--message-color-running-opposite);
  color: var(--message-color-running);
}
.box.running a {
  color: var(--message-color-info);
}

/* messages .success: success */
i.success-fa {
  color: var(--message-color-success-icon);
}
.box.success {
  border-color: var(--message-color-success-opposite);
  background-color: var(--message-color-success-opposite);
  color: var(--message-color-success);
}

.box.success a {
  color: var(--message-color-success);
}

/* messages .warning: warning */
i.warning-fa {
  color: var(--message-color-warning-icon);
}
.box.warning {
  border-color: var(--message-color-warning-opposite);
  background-color: var(--message-color-warning-opposite);
  color: var(--message-color-warning);
}
.box.warning a {
  color: var(--message-color-warning);
}

/* messages .error: errors */
i.error-fa {
  color: var(--message-color-error-icon);
}
.box.error {
  border-color: var(--message-color-error-opposite);
  background-color: var(--message-color-error-opposite);
  color: var(--message-color-error);
}
.box.error a {
  color: var(--message-color-error);
}

/* by jQuery UI popup dialogs use the dialogs background */
.ui-dialog-content .box {
  background: none;
}

/*** reqular floats ***/
.float-left {
  float: left;
  display: inline;
  margin: 0 0.4em 0em 0;
}

.float-right {
  float: right;
  display: inline;
  margin: 0 0 0em 0.4em;
}

.center {
  display: block;
  text-align: center;
  margin: 0 auto 0em auto;
}

/**
  * ------------------------------------------------------------------------------------------------- #
  *
  * Tables | Tabellen
  *
  * (en) Generic classes for table-width and design definition
  *
  * @section content-tables
  */
table {
  width: 100%;
  border-collapse: collapse;
  color: var(--theme-color-dark);
  margin: 0 0 1.35714em 0;
}
table.narrow {
  margin: 0 0 1.42857em 0;
}
table.narrow th,
table.narrow td {
  padding: 0 0.5em;
  /*line-height: 1.42857;*/
  line-height: 1.8;
}
table.fixed {
  table-layout: fixed;
}
table.bordertable {
  border-top: 1px solid var(--theme-color-dark-b1);
  border-bottom: 3px solid var(--theme-color-dark-b1);
}
table.bordertable thead th {
  background: var(--theme-color-white);
  border-right: 1px solid var(--theme-color-dark-b1);
}
table.bordertable thead {
  border-bottom: 1px solid var(--theme-color-dark-b1);
}
table.bordertable tbody th[scope="row"] {
  background: var(--theme-color-white);
}
table.bordertable tbody th {
  border-right: 1px solid var(--theme-color-dark-b1);
}

table.bordertable tbody td {
  border-right: 0;
  border-bottom: 1px solid var(--theme-color-dark-b1);
  vertical-align: middle;
}

caption {
  font-variant: small-caps;
}

th,
td {
  line-height: 1.5em;
  vertical-align: top;
  padding: 0.71429em 0.5em;
}

th *:first-child,
td *:first-child {
  margin-top: 0;
}

th.nowrap,
td.nowrap {
  white-space: nowrap;
}

thead th {
  text-align: left;
  border-top: 1px solid var(--theme-color-white);
  border-bottom: 1px solid var(--theme-color-dark-b1);
}

tbody th {
  text-align: left;
  border-top: 1px solid #ccc;
}
tbody td {
  text-align: left;
  border-top: 1px solid #ccc;
}
/*
  html.touch-mode-off tbody tr:hover th,
  html.touch-mode-off tbody tr:hover td {

  }
  */

a.dotted > span {
  text-decoration: none;
  border-bottom: 1px dotted var(--theme-color-bright);
}
a.dotted:hover > span {
  border-bottom: 1px solid var(--theme-color-dark);
}
/*
  a.dotted > span {

  }
  */
html.touch-mode-off a.dotted:hover span {
  border-bottom-style: solid;
}
a.external,
span.href.external {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAA7DAAAOwwHHb6hkAAAAB3RJTUUH3QwJDhwPptpqHAAAAJRJREFUGNOFkDsOAjEMRJ/5aAVUiKMsx6HOncKZQs1JKNGj2Hi1CwWWpsh4MmM7VJYVEQBrEtgsH9f7I0ptqJGYm2oiVChextq2PcnX8zYn+I3aPKQoP3TTyZUitTl0MWNtmx9hFx1TBEhxX2pbjinZfD1vUDwlP07LsYqubXLOOPWsDirRifi+W0So7oA3wC5J/tQHPWaNmxtN7IEAAAAASUVORK5CYII=");
  /* background-image: url("img/external-link.png");*/
  background-position: right center;
  background-repeat: no-repeat;
  padding-right: 13px;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px dotted #000;
}
html.touch-mode-off a.external:hover,
html.touch-mode-off span.href.external:hover {
  border-bottom: 1px solid #000;
}

ul.sharing a.external,
ul.sharing a.external:hover,
ul.sharing span.href.external {
  background-image: none;
  border-bottom: 0;
}

/* Download|popup "Trades and Conditions" */
.show-gtct > a {
  text-decoration: underline;
}
.show-gtct > a.dotted {
  text-decoration: none;
}

/** .free-title **/
.free-title {
  font-size: 26px;
  font-weight: 600;
  letter-spacing: 0px;
  margin: 0.3em 0 0.5em;
  border: 0px solid #fff;
  background: unset;
  color: var(--theme-color-dark);
}
.free-title:after {
  /*content: ':';*/
  content: "";
}

/** button.free-title **/
button.free-title:after {
  content: "";
}

footer.additional .layout-footer.additional > li,
footer.additional .layout-footer.additional > li a {
  color: #000;
}

/*** form theme ***/
/* Button size-scaling classes */
/*
  .ym-button {

  }
  */
/*font-size: 1.5em;*/
/*
  .ym-button.ym-xlarge {
  }
  */
/*font-size: 1.2857em;*/
/*
  .ym-button.ym-large {
  }
  */
/*font-size: 0.8571em;*/
/*
  .ui-widget.ui-button.ym-small,
  .ym-button.ym-small {
  }
  */
/*font-size: 0.7143em;*/
/*
  .ym-button.ym-xsmall {
  }
  */

/* Button color scheme: primary */
.ym-button.ym-primary,
.ym-form button.ym-primary,
.ym-form input[type="button"].ym-primary,
.ym-form input[type="reset"].ym-primary,
.ym-form input[type="submit"].ym-primary {
  /*-webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(0, 0, 0, 0.15);
	box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3) inset, 0 1px 0 rgba(0, 0, 0, 0.15);*/
  /*   background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007FFF), color-stop(100%, #0000cc));
	 background-image: -webkit-linear-gradient(top, #007FFF, #0000cc);
	 background-image: -moz-linear-gradient(top, #007FFF, #0000cc);
	 background-image: -ms-linear-gradient(top, #007FFF, #0000cc);
	 background-image: linear-gradient(to bottom, #007FFF,#0000cc);
	 background-color: #007FFF;
	 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FF8888EE', endColorstr='#FF6666CC');
	 */
  zoom: 1;
  /*border: 1px solid #007;
	color: var(--theme-color-white) !important;*/
  /*text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);*/
}
.ym-button.ym-primary:hover,
.ym-form button.ym-primary:hover,
.ym-form input[type="button"].ym-primary:hover,
.ym-form input[type="reset"].ym-primary:hover,
.ym-form input[type="submit"].ym-primary:hover {
  /*  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #00aFFF), color-stop(100%, #0000dd));
	background-image: -webkit-linear-gradient(top, #00aFFF, #0000dd);
	background-image: -moz-linear-gradient(top, #00aFFF, #0000dd);
	background-image: -ms-linear-gradient(top, #00aFFF, #0000dd);
	background-image: linear-gradient(to bottom, #00aFFF,#0000dd);
	background-color: #00aFFF;
	filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FF8888FF', endColorstr='#FF6666DD');
	*/
  zoom: 1;
}
.ym-button.ym-primary:active,
.ym-form button.ym-primary:active,
.ym-form input[type="button"].ym-primary:active,
.ym-form input[type="reset"].ym-primary:active,
.ym-form input[type="submit"].ym-primary:active {
  /* -webkit-box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);
	box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.2);*/
  /*  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #007F77), color-stop(100%, #0000aa));
	 background-image: -webkit-linear-gradient(top, #007F77, #0000aa);
	 background-image: -moz-linear-gradient(top, #007F77, #0000aa);
	 background-image: -ms-linear-gradient(top, #007F77, #0000aa);
	 background-image: linear-gradient(to bottom, #007F77,#0000aa);
	 background-color: #007F77;
	 filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FF007F77', endColorstr='#FF0000aa');*/
  zoom: 1;
}
.ym-button.ym-primary:focus,
.ym-form button.ym-primary:focus,
.ym-form input[type="button"].ym-primary:focus,
.ym-form input[type="reset"].ym-primary:focus,
.ym-form input[type="submit"].ym-primary:focus {
  outline: 0;
  /*background: #007FFF;*/
}

button[name="buttonBuyNow"].ym-button.ym-primary {
  -webkit-box-shadow: none;
  box-shadow: none;
  filter: unset;
  zoom: 1;
  border: 1px solid var(--button-final-color);
  background-color: var(--button-final-color);
  color: var(--button-final-color-opposite);
}
button[name="buttonBuyNow"]:hover,
button[name="buttonBuyNow"]:focus,
button[name="buttonBuyNow"]:active {
  background-color: var(--button-final-color-opposite);
  border: 1px solid var(--button-final-color-opposite);
  color: var(--button-final-color);
}

.ym-button.ym-danger,
.ym-form button.ym-danger,
.ym-form input[type="button"].ym-danger,
.ym-form input[type="reset"].ym-danger,
.ym-form input[type="submit"].ym-danger {
  -webkit-box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3) inset,
    0 1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: 0 0 1px 1px rgba(255, 255, 255, 0.3) inset,
    0 1px 0 rgba(0, 0, 0, 0.15);
  background: -webkit-gradient(
    linear,
    left top,
    left bottom,
    color-stop(0%, #bb6666),
    color-stop(100%, #994444)
  );
  background: -webkit-linear-gradient(top, #bb6666, #994444);
  background: -moz-linear-gradient(top, #bb6666, #994444);
  background: -ms-linear-gradient(top, #bb6666, #994444);
  background: linear-gradient("to bottom", #bb6666, #994444);
  filter: progid:DXImageTransform.Microsoft.Gradient(GradientType=0, startColorstr='#FFBB6666', endColorstr='#FF994444');
  zoom: 1;
  border: 1px solid #700;
  color: var(--theme-color-white) !important;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.8);
}

/**
   * @version 2020-11-20
   */

/** footer positioned at the bottom of pages **/
html,
body {
  height: 100%;
}

main {
  min-height: 50%;
}

main > div {
  /*overflow:auto;*/
  padding-bottom: 0px;
}

body.mm-wrapper_opening main > div {
  overflow-x: hidden;
}
/*
  nav.articles-groups.horizontal > .ym-wrapper,
  nav.articles-groups.horizontal > .ym-wrapper > .ym-wbox {
  }
  */

/** wide page teaser (slider + html)**/
.ym-wrapper.wide.page-wide-teaser,
.ym-wrapper.wide.page-wide-teaser > .ym-wbox,
.ym-wrapper.wide.page-teaser,
.ym-wrapper.wide.page-teaser > .ym-wbox {
  max-width: none;
  /* width over the whole window */
  padding: 0;
  background-size: auto;
  margin-top: 0;
}

/** action articles (slider) **/
.ym-wrapper.wide.slider-action-articles {
  background: #ddd;
}
.ym-wrapper.wide .free-title.ui-state-default {
  padding: 0.7em 0.7em 0em 0.7em;
}
.ym-wrapper.wide.slider-action-articles .free-title.ui-state-default {
  background: none;
  border: 0;
}

/* if .free-title has a grid with .title-left and .title-right */
/*
  .ym-wrapper.wide.slider-action-articles .free-title > div.ym-grid {
  }
  */
.ym-wrapper.wide.slider-action-articles .free-title > div.ym-grid > div {
  line-height: 1em;
}
/*
  .ym-wrapper.wide.slider-action-articles .free-title > div.ym-grid > .title-left {

  }
  */
.ym-wrapper.wide.slider-action-articles
  .free-title
  > div.ym-grid
  > .title-right {
  font-size: 0.8em;
  line-height: calc(1em / 0.8);
}

.ym-wrapper.wide.slider-action-articles
  .free-title
  > div.ym-grid
  > .title-right
  > a {
  display: inline-block;
}
.ym-wrapper.wide.slider-action-articles
  .free-title
  > div.ym-grid
  > .title-right
  > a:first-letter {
  text-transform: uppercase;
}

/** groups articles (slider) **/
.ym-wrapper.wide.slider-group-articles {
  background: #ccc;
}
.ym-wrapper.wide.slider-group-articles .free-title.ui-state-default {
  background: none;
  border: 0;
}

div.sliderTypeGroupsArticles > .arrow-buttons {
  display: block !important;
  background: none !important;
  top: 30px !important;
}
div.sliderTypeGroupsArticles > .arrow-buttons.left {
  left: -15px !important;
}
div.sliderTypeGroupsArticles > .arrow-buttons.right {
  right: -15px !important;
  left: auto !important;
}

section.groups-articles
  div.sliderTypeGroupsArticles
  ul.groups-articles-list
  > li
  > article {
  border: 0;
  background: none;
}

/* "rounded" cells */
section.groups-articles
  div.sliderTypeGroupsArticles
  article.article-group
  section.picture {
  max-width: 100%;
  width: 100px !important;
  height: 100px !important;
  margin: 0px auto 0px auto;
  border-radius: 50px !important;
  text-align: center;
  float: none;
  padding: 10px;
  overflow: hidden;
  background: var(--theme-color-white);
}

section.groups-articles
  div.sliderTypeGroupsArticles
  article.article-group
  section.text {
  --section-text-height: 70px;
  display: block;
  float: none;
  height: var(--section-text-height);
  margin-left: 0;
}

section.groups-articles
  div.sliderTypeGroupsArticles
  article.article-group
  section.text
  div.wrap {
  display: block;
  font-size: 1em;
  font-style: normal;
  height: var(--section-text-height);
  /*vertical-align: top;*/
  /* 18.10.2023 EXPERIMENTAL OFF because obsolete */
  text-align: center;
  width: 100%;
}

/** groups articles (slider) alternative simple view **/
.ym-wrapper.wide.slider-group-articles
  section.groups-articles.alternate.simple {
  padding: 5px 0 0px 0;
}

/* common .scroll-x settings */
html.no-touch-screen .ym-wrapper.wide section.alternate.simple > .scroll-x {
  overflow-x: hidden;
}
html.no-touch-screen
  .ym-wrapper.wide
  section.alternate.simple:hover
  > .scroll-x {
  overflow-x: auto;
}
.ym-wrapper.wide section.alternate.simple > .scroll-x {
  padding: 3px 1em 15px 1em;
  margin: 0 -1em;
  /* opposite margin to styles.r.2-tablet.css: .ym-wrapper > .ym-wbox */
}

.ym-wrapper.wide section.alternate.simple > .scroll-x > div {
  -webkit-overflow-scrolling: touch;
  /* 2021-03-24 has no visible effect. can be ignored? */
}

.ym-wrapper.wide section.alternate.simple > .scroll-x ul.ym-grid {
  white-space: nowrap;
  display: table;
}
/*
  .ym-column.type-3 .ym-cbox,
  .ym-column.type-3 .ym-gbox {

  }
  */

.ym-wrapper .ym-wbox .ym-cbox {
  border: 0px dotted #0a0;
  /*padding: 0; */
}

header {
  background: var(--theme-color-white);
  margin-bottom: 1.5em;
}

header > .ym-wrapper {
  text-align: center;
  height: inherit;
}

header > .ym-wrapper > .ym-wbox {
  display: flex;

  height: inherit;
}

header > .ym-wrapper > .ym-wbox > .layout-header {
  width: 100%;
  margin: auto 0;
}

header .ym-wbox {
  padding-bottom: 10px;
}

html.touch-screen-mode header {
  display: none;
}

/**** header ul.layout-header ****/
header ul.layout-header {
  list-style-type: none;

  position: relative;
  --layout-header-height: 72px;
  --li-logo-width: 19%;
  --li-languages-width: 0%;
  --li-languages-padding: 0;
  --li-search-width: 50%;
  --li-search-padding: 0 0 0 var(--layout-columns-gap);
  --li-navigation-width: 28%;
  --li-navigation-padding: 0 0 0 var(--layout-columns-gap);

  display: flex;
}

:root[data-font-size="big"] header ul.layout-header {
  --li-logo-width: 17%;
}

html.no-res-login header ul.layout-header {
  --li-search-width: 63%;
}

header ul.layout-header.has-languages {
  --li-languages-width: clamp(62px, 3.875rem, 70px);
  --li-languages-padding: 0 0px 0 var(--layout-columns-gap);
  --li-search-width: calc(50% - var(--li-languages-width));
}

:root[data-font-size="big"] header ul.layout-header.has-languages {
  --li-search-width: calc(47% - var(--li-languages-width));
}

html.no-res-login header ul.layout-header.has-languages {
  --li-search-width: calc(63% - var(--li-languages-width));
}

/* example how to customize if there is missing a <li/> */
/*html.logged-out header ul.layout-header.has-languages {
	  --li-search-width: calc(62% - var(--li-languages-width));
  }*/

header ul.layout-header {
  --li-navigation-width: calc(
    100% - var(--li-logo-width) - var(--li-languages-width) -
      var(--li-search-width)
  );
}

header ul.layout-header > li {
  height: var(--layout-header-height);
  line-height: var(--layout-header-height);

  margin-left: 0;
}

header ul.layout-header > li.logo {
  width: var(--li-logo-width);
  margin: 0;
}

header ul.layout-header > li.search {
  width: var(--li-search-width);
  padding: var(--li-search-padding);
  display: flex;
}

/* 15.05.2025 OFF because works buggy:
:root[data-font-size="big"] header ul.layout-header.has-languages:focus-within  {
	--li-search-width: calc(75% - var(--li-languages-width));
} */

header ul.layout-header > li.navigation {
  width: var(--li-navigation-width);
  padding: var(--li-navigation-padding);
  display: flex;
}

header ul.layout-header > li.navigation > nav.primary {
  container-name: containerNavigationPrimaryRight;
  container-type: inline-size;
}

@container containerNavigationPrimaryRight (width < 18.125em) {
  ul > li.profile {
    display: none;
  }
}

/* header logo */
header ul.layout-header > li.logo img {
  width: 100%;
  height: auto;
  max-height: var(--layout-header-height);
  max-width: 240px !important; /* The real proportional width of the logo. */
}

/* header languages selector */
header ul.layout-header > li.languages {
  text-transform: uppercase;
  text-align: left;
  display: flex;

  width: var(--li-languages-width);
  padding: var(--li-languages-padding);
  margin-left: 0;
}
header ul.layout-header > li.languages > section {
  height: var(--layout-header-height);
  line-height: var(--layout-header-height);
  margin: auto;
}
/*** language selector ***/
/*
  section.language-selector {
  }
  */
section.language-selector > div.indicators {
  border: 1px solid var(--theme-color-white);
  font-size: clamp(0.8125em, 14px, 15px);
  line-height: 1.15em;
  width: clamp(40px, 2.5rem, 50px);
}
section.language-selector > div.indicators.ui-state-hover {
  border: 1px solid var(--theme-color-white);
  background: none;
  color: var(--theme-color-dark);
  cursor: pointer;
}

section.language-selector.is-ready > div.indicators {
  border-bottom: 2px solid var(--theme-color-bright);
}

section.language-selector > div.indicators > div.status {
  padding-left: 4px;
}
section.language-selector > div.indicators > div.status > div {
  -moz-transition: transform 1s;
  -webkit-transition: transform 1s;
  transition: transform 1s;
}

section.language-selector > div.indicators > div.status.is-opening > div {
  -webkit-transform: rotate(-180deg);
  transform: rotate(-180deg);
}

section.language-selector > div.popup {
  /*border: 1px solid var(--theme-color-white);*/
  background: var(--theme-color-white);
  width: min-content;
  z-index: 1;
  padding: 0px 8px;
}

section.language-selector > div.popup a,
section.language-selector > div.popup.ui-state-hover a {
  color: #000;
  text-transform: none;
}

section.language-selector > div.popup.ui-state-hover {
  /*border: 1px solid var(--theme-color-white);*/
  background: var(--theme-color-white);
  cursor: pointer;
}

section.language-selector > div.popup > ul {
  display: block;
  width: min-content;
}

section.language-selector > div.popup > ul > li {
  float: none;
  width: auto;
  border: 1px solid var(--theme-color-white);
  padding: 4px 0px;
}

section.language-selector > div.popup {
  padding: 0px 0px;
  border: 1px solid var(--theme-color-bright);
  width: 100px;
  padding-left: 8px;
  padding-right: 10px;
}

section.language-selector > div.popup ul li a,
section.language-selector > div.popup.ui-state-hover ul li a {
  text-transform: uppercase;
}

/* header search form */
/*
  header ul.layout-header > li.search {
  }
  */

/** nav#menuPrimaryTouchScreen section.search-articles **/
/** header ul.layout-header section.search-articles **/
ul.ui-autocomplete.autocompleteDecorator,
section.search-articles {
  --search-articles-height: 35px;
  --padding-top: calc(var(--search-articles-height) / 2);
  --border-radius: calc(var(--search-articles-height) / 2);
  --prefix-width: calc(var(--search-articles-height) * 0.9 - 16px + 1rem);
  --icon-height: clamp(16px, 1rem, 24px);
}

section.search-articles {
  margin: 0;
  height: var(--search-articles-height);
}

section.search-articles ul.form-search.ui-corner-all {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
  overflow: hidden;
}

section.search-articles ul.form-search.ui-corner-top {
  border-top-left-radius: var(--border-radius);
  border-top-right-radius: var(--border-radius);
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: 0;
}

ul.ui-autocomplete.autocompleteDecorator.ui-corner-bottom {
  border-top: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

.ui-autocomplete li.last-item .ui-state-active {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: var(--border-radius);
  border-bottom-right-radius: var(--border-radius);
}

/* @package Accessibility */
:root[data-focus-outline="visible"]
  .ui-autocomplete
  .ui-menu-item-wrapper.ui-state-active
  > div.autocomplete-row {
  --accessibility-focus-width: var(--accessibility-focus-width-by-links);
  outline: var(--accessibility-focus-width) dashed var(--theme-color-focus);
  outline-offset: 1px;
}
:root[data-focus-outline="visible"]
  .ui-autocomplete
  li.last-item
  .ui-menu-item-wrapper.ui-state-active
  > div.autocomplete-row.no-suffix {
  outline: none;
}

/*.ui-autocomplete > li.focus > div {
    border: 1px dotted red !important;
  }*/

header ul.layout-header > li.search > section {
  position: relative;
  /*top: 50%;
	  transform: translateY(-50%);*/
  margin: auto;
}
/*** form search ***/
section.search-articles ul.form-search > li {
  padding: 0.4em 0.8em 0.5em;
}

/*** search form ***/
ul.form-search {
  margin: 0;
}
ul.form-search > li {
  padding: 0.2em 0.4em;
  width: auto;
}

ul.form-search > li input[type="number"],
ul.form-search > li input[type="text"] {
  border: 0;
  width: 100%;
}

/* header navigation primary */
header ul.layout-header > li.navigation > nav {
  position: relative;
  margin: auto 0 auto auto;
  float: right;
  width: 100%;
  max-width: 20rem;
}

/** nav.primary **/
nav.primary {
  background: none;
  padding: 0;
}

nav.primary ul {
  margin: 0;
}

nav.primary ul.menuPrimary > li {
  width: auto;
  margin: 0;
}

/* same spaces between li (flex) */
nav.primary ul.menuPrimary {
  list-style-type: none;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap-reverse;
  padding: 0;
}

nav.primary ul.menuPrimary > li {
  flex-basis: auto;
  margin: 0;
}

nav.primary ul li a {
  --a-height: 24px;
  text-transform: none;
  white-space: nowrap;
  display: flex;
  justify-content: space-evenly;
  line-height: var(--a-height);
}

nav.primary ul li.active a span,
html.touch-mode-off nav.primary ul li a:hover span {
  cursor: pointer;
}

nav.primary ul li a.shopcart span.braces {
  display: none;
}
nav.primary ul li a.shopcart span.braces:before {
  content: " (";
}

nav.primary ul li a.shopcart span.braces:after {
  content: ")";
}
nav.primary ul li a.shopcart [data-count] {
  position: relative;
  display: inline-block;
  /*width: 2em;*/
}
nav.primary ul li a.shopcart [data-count]::after {
  /* display: none; */
  position: absolute;
  right: -11px;
  top: -5px;
  content: attr(data-count);
  font-size: 10px;
  padding: 3px 5px 2px;
  border-radius: 999px;
  line-height: 12px;
  color: white;
  text-align: center;
  min-width: 1em;
  font-weight: 600;
  background: #f86d08;
  border-style: solid;
  border-width: 0px;
  line-height: 1em;
}

/*** header menu burger ***/
nav.primary ul li a.menu.burger:hover,
html.touch-mode-off nav.primary ul li a.menu.burger:hover span {
  text-decoration: none;
  /*cursor: wait;*/
  cursor: pointer;
}

/*
  html.development nav.primary ul li a.menu.burger:hover,
  html.development.touch-mode-off nav.primary ul li a.menu.burger:hover span {

  }
  */

nav.primary ul li a.menu.burger.is-opened:hover,
html.touch-mode-off nav.primary ul li a.menu.burger.is-opened:hover span,
html.development nav.primary ul li a.menu.burger.is-opened:hover,
html.development.touch-mode-off
  nav.primary
  ul
  li
  a.menu.burger.is-opened:hover
  span {
  /*text-decoration: underline;*/
  cursor: pointer;
}

html.touch-mode-off nav.primary ul li a.menu.burger.is-ready:hover span {
  text-decoration: underline;
}
nav.primary ul li a.menu.burger.is-ready:hover,
html.touch-mode-off nav.primary ul li a.menu.burger.is-ready:hover span {
  cursor: pointer;
}
nav.primary ul li a.menu.burger.ui-state-hover {
  background: none;
  border: 0;
}

/* header skin selector */
header ul.layout-header > li.skins {
  position: absolute;
  left: 105%;
}
.ui-selectmenu-menu.skinSelector-menu {
  z-index: 10000;
}

/*** nav#menuMobile ***/
nav#menuMobile li.mm-listitem > a {
  position: relative;
}
nav#menuMobile li.mm-listitem > a > span {
  position: absolute;
  left: 44px;
}

/*** footer ***/
footer {
  position: relative;
  margin-top: 2em;
  min-height: 180px;
}

footer .ym-wbox > .ym-grid {
  margin: 0px;
}

/** Footer **/
footer div.title {
  font-size: 1.125rem;
}
footer address {
  font-size: 0.875rem;
}
footer div.layout-footer.contact-accordion {
  display: grid;
  grid-template-areas: "contact accordion";
  grid-template-columns: 1fr 1fr;
}
footer div.layout-footer > div.company-contact {
  grid-area: contact;
  padding-bottom: 25px;
}

/*** footer accordion links ***/
footer div.layout-footer > div.accordion {
  grid-area: accordion;
  font-size: 0.875rem;
  padding-bottom: 40px;
}
footer div.layout-footer > div.accordion div.links {
  float: right;
  width: 100%;
  line-height: 2.8em;
  border-top: 1px solid var(--theme-color-dark);
}
footer div.layout-footer > div.accordion div.links a:hover,
footer div.layout-footer > div.accordion div.links a:focus {
  color: var(--theme-color-bright);
}
footer div.layout-footer > div.accordion div.links div.ym-grid {
  border-bottom: 1px solid var(--theme-color-dark);
}
footer div.layout-footer > div.accordion div.links div.ym-grid div.ym-gr {
  position: relative;
  top: 0.25rem;
}


div.footers div.layout-footer-suffix {
  margin-bottom: 40px;
}
div.footers div.layout-footer-suffix div.vat-info {
  font-size: 0.875rem;
  text-align: center;
}

/*** footer.additional ***/
footer.additional {
  --footer-additional-height: 50px;
  --company-logo-width: 150px;
  margin-top: 0;
  padding-top: 0.75rem;
  padding-bottom: 1rem;
  min-height: var(--footer-additional-height);
  background: var(--theme-color-dark-b1);
}
footer.additional div.layout-footer.additional {
  display: grid;
  grid-template-areas: "logo links";
  grid-template-columns: var(--company-logo-width) auto;
}
/*
footer.additional .ym-wrapper > .ym-wbox {
  padding: 3em 0em 3em 0em;
} */

footer.additional .layout-footer.additional ul {
  margin: 0;
}

footer.additional .layout-footer.additional > div {
  min-height: var(--footer-additional-height);
}
/*
  footer.additional .layout-footer.additional > div {

  }
  */

footer.additional .layout-footer.additional > div.company-logo {
  grid-area: logo;
}

footer.additional .layout-footer.additional > div.company-logo img {
  width: 100%;
  height: auto;
  max-width: var(--company-logo-width);
}

footer.additional .layout-footer.additional > div.site-links {
  grid-area: links;
  float: right;
  position: relative;
}

/*
  footer.additional .layout-footer.additional > div.site-links > ul {

  }
  */

footer.additional .layout-footer.additional > div.site-links > ul {
  width: auto;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

footer.additional .layout-footer.additional > div.site-links > ul > li {
  font-size: 0.75rem;

  width: auto;
  float: left;
}
/*
  footer.additional .layout-footer.additional > div.site-links > ul > li > a {

  }
  */

footer.additional .layout-footer.additional > div.site-links > ul > li > a {
  padding: 0 1em;
}

/*
  footer.additional .layout-footer.additional > div.site-links > ul > li:FIRST-CHILD > a {
	  border-left: 0;
  }
*/
footer.additional .layout-footer.additional > div.site-links > ul > li:before {
  content: "|";
}

footer.additional
  .layout-footer.additional
  > div.site-links
  > ul
  > li:first-child:before {
  content: "";
}

/* footer: shop creator logo and label */
footer.additional .layout-footer.shop-creator {
  --shop-creator-height: 31px;
  --shop-creator-width: 200px;
  margin-top: 15px;
  height: var(--shop-creator-height);
  width: var(--shop-creator-width);
}

footer.additional .layout-footer.shop-creator .logo-text > .ym-grid {
  position: relative;
  height: var(--shop-creator-height);
  width: var(--shop-creator-width);
}

footer.additional .layout-footer.shop-creator .logo-text > .ym-grid > .text {
  position: absolute;
  top: 50%;
  right: 0px;
  transform: translateY(-50%);
}

/**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */
button,
input,
optgroup,
select,
textarea {
  font-family: var(--font-family);
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
   * Show the overflow in IE.
   * 1. Show the overflow in Edge.
   */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */
input[type="date"],
input[type="email"],
input[type="number"],
input[type="text"],
input[type="password"] {
  /*-webkit-appearance: textfield;*/
  /* 1 */
  appearance: textfield;
  /* 1 */
  /* 18.10.2023 EXPERIMENTAL ON */
  outline-offset: -2px;
  /* 2 */
}

/** vertical align images within block **/
.helper-vertical-align {
  display: inline-block;
  height: 100%;
  vertical-align: middle;
}

/* border-color: #66afe9;
   box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(102, 175, 233, 0.6);
   outline: 0 none;*/
/*
  .ym-form .ym-fbox textarea:focus,
  .ym-form .ym-fbox input:focus {
  }
  */

.ym-form .ym-fbox-check input,
.ym-form input[type="radio"],
.ym-form input[type="checkbox"] {
  position: relative;
}

/*** DEFAULT CSS STYLING ***/
/** default navigation stiles **/

/** default layout columns types **/
main > .ym-wrapper > .ym-wbox > .ym-column > .ym-col1 > .ym-cbox {
  /*padding: 0px 10px 0px 0px;*/
  padding: 0px 0px 0px 0px;
}

main > .ym-wrapper > .ym-wbox > .ym-column.type-3 > .ym-col3 > .ym-cbox {
  padding: 10px 0px 0px 0px;
}

.type-3 .ym-col3 {
  margin: 0;
}

.type-1-3 .ym-col1,
.type-1-3-2 .ym-col1 {
  float: left;
  width: var(--layout-column-1-width);
}
.type-1-3 .ym-col3 {
  margin: 0 0 0 var(--layout-column-3-margin);
}

.type-3-1 .ym-col1 {
  float: right;
  width: var(--layout-column-1-width);
}
.type-3-1 .ym-col3 {
  margin: 0 var(--layout-column-3-margin) 0 0;
}

.type-1-3 .ym-col3 > .ym-cbox,
.type-3-1 .ym-col3 > .ym-cbox,
.type-1-3-2 .ym-col3 > .ym-cbox,
.type-1-3-2 .ym-col2 > .ym-cbox {
  padding: 0;
}

.type-1-3-2 .ym-col2 {
  width: 200px;
}
.type-1-3-2 .ym-col3 {
  margin: 0 220px 0 var(--layout-column-3-margin);
}
/*
  .type-1-3-2 {

  }
  */

.ym-form div.ym-error > div.ym-error {
  /*width: 70%; 2018-04-09 OFF */
  width: 100%;
}

.ym-form .ym-fbox-check div.ym-error p.ym-message {
  padding-left: 0;
}

/** will be setted by mouseout .hover-opacity **/

.hover-opacity-out-light {
  /* Good browsers */
  opacity: 0.9;
  cursor: pointer;
}

.hover-opacity-out {
  /* Good browsers */
  opacity: 0.8;
  cursor: pointer;
}

.hover-opacity-out-strong {
  /* Good browsers */
  opacity: 0.3;
  cursor: pointer;
}

/** will be setted by mouseover .hover-opacity */
.hover-opacity-over {
  /* Good browsers */
  opacity: 1;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=92)";
  /* IE 5-7 */
  filter: alpha(opacity=100);
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;

  cursor: pointer;
}

/* gray images */
.filter-grayscale {
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: grayscale(100%);
  filter: gray;
  /* IE 6-9 */
}

img.desaturate {
  filter: grayscale(100%);
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  -ms-filter: grayscale(100%);
  -o-filter: grayscale(100%);
  filter: url(desaturate.svg#greyscale);
  filter: gray;
  -webkit-filter: grayscale(1);
}

html.touch-mode-off img.desaturate:hover {
  filter: grayscale(0%);
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  -ms-filter: grayscale(0%);
  -o-filter: grayscale(0%);
  filter: url(desaturate.svg#greyscale);
  filter: none;
  -webkit-filter: grayscale(0);
}

.vertical-centered {
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

.help,
.cursor-help {
  cursor: help;
}

.cursor-pointer {
  cursor: pointer;
}

.cursor-zoom-in {
  cursor: -moz-zoom-in;
  cursor: -webkit-zoom-in;
  cursor: zoom-in;
}

.responsive.target {
  display: none;
}

.scroll-x {
  overflow-y: hidden;
  overflow-x: auto;
}

/** default css form styling **/

tbody th {
  border-top: 0;
}
tbody td {
  border-top: 0;
}
/* table tr.odd td {

  }*/
table tr.even td {
  background: var(--theme-color-black-1);
}

/** table.rows-hover **/
/*** ***/
div.layout-info {
  font-size: 0.9375rem;
  font-weight: 400;

  margin: 0;
  padding-bottom: 1em;
}

/** table.simple **/
table.simple {
  border: 0;
  margin: 0;
  padding: 0;
}

table.simple th,
table.simple td {
  border: 0;
  margin: 0;
  padding: 0;
  line-height: 1em;
}

table.simple img.flexible {
  margin-bottom: 0px;
}

/** div.demo-mode **/
div.demo-mode {
  border: 1px solid #a00;
  margin-bottom: 1em;
}
/** section.message-info **/
section.message-info {
  margin-top: 1em;
  margin-bottom: 1em;
}

div.demo-mode section.message-info {
  margin: 0;
  padding: 0.25em 0.5em;
}

/** table.narrow **/
table.narrow th {
  padding-top: 2px;
  padding-bottom: 2px;
}

/** rows "hoverable" tables **/
/* the rows of such table may by "hovered". Indended for not interactive tables */
html.touch-mode-off table.rows-hover tbody tr:hover td,
html.touch-mode-off table.rows-hover tbody tr:hover td a,
html.touch-mode-off table.rows-hover tbody tr:hover td i {
  background: var(--theme-color-dark-b1);
  color: var(--theme-color-dark-b1-opposite);
}

/** table.clickable-rows **/
/* the rows of such table may by "hovered" and clicked. Indended for interactive tables */
html.touch-mode-off table.clickable-rows tr:hover td {
  cursor: pointer;
  background: var(--theme-color-bright);
  color: var(--theme-color-bright-opposite);
}

/** table.clickable - clickable td-s **/
table.clickable-cols tr td,
/* "not clickable" may contains controls */
table.clickable-cols tr.even td,
/* "not clickable" may contains controls */
  table.clickable-cols tr td.clickable {
  cursor: pointer;
}

table.clickable-cols tr.odd td

/* "not clickable" may contains controls */ {
  background: var(--theme-color-dark-b3);
}

table.clickable-cols tr.even td

/* "not clickable" may contains controls */ {
  background: var(--theme-color-dark-b1);
}
html.touch-mode-off table.clickable-cols tr:hover td.clickable {
  background: var(--theme-color-dark-b1);
  color: #000;
}
table.clickable-cols tr.clicked td {
  background: var(--theme-color-dark-b2);
  color: var(--theme-color-dark-b2-opposite);
}
html.touch-mode-off table.clickable-cols tr.clicked:hover td.clickable {
  background: #d4e2f1;
  color: #000;
}

/** table.sortable-head **/
table.sortable-head th {
  vertical-align: middle;
}

table.sortable-head th a.sort {
  display: block;
  position: relative;
  width: 100%;
  text-align: left !important;
}

table.sortable-head th a.sort i {
  position: absolute;
  right: 0;
  top: 6px;
}

/** table.firma **/
table.firma {
  width: 50%;
  min-width: 300px;
  max-width: 400px;
}
table.firma td {
  padding: 0.25em 0.5em 0.25em 0em !important;
}

table.firma .col-1 {
  width: 25% !important;
}
table.firma .col-2 {
  width: 74%;
}

table.firma td.label::after {
  content: ":";
}

/*** CSS styled checkboxes and radios ***/
input[type="radio"].stand-alone:not(odd) {
  width: 2em;
  margin: 0;
  padding: 0;
  font-size: 1em;
  opacity: 0;
}

input[type="radio"].stand-alone:not(odd) + label {
  display: inline-block;
  margin-left: -2em;
  line-height: 1.5rem;
}

input[type="radio"],
label.stand-alone,
label.stand-alone i[class^="fa"] {
  cursor: pointer;
}

label.stand-alone > i[class^="fa"] {
  display: none;
  /* old browser compability */
}

input[type="radio"].stand-alone:not(odd) + label > i[class^="fa"].checked,
input[type="radio"].stand-alone:not(odd):checked
  + label
  > i[class^="fa"].unchecked {
  display: none;
}

input[type="radio"].stand-alone:not(odd) + label > i[class^="fa"].unchecked,
input[type="radio"].stand-alone:not(odd):checked
  + label
  > i[class^="fa"].checked {
  display: inline;
  display: inline-block;
  margin-right: 0.5em;
}

/** margins between buttons **/
ul.ym-grid.ym-fbox-wrap.field-cancel-submit {
  container-type: inline-size;

  display: flex;
  gap: 5px;

  margin: 0;
}

@container (width < 31.25rem) {
  ul.ym-grid.ym-fbox-wrap.field-cancel-submit {
    flex-direction: column-reverse;

    width: 100%;
  }
  ul.ym-grid.ym-fbox-wrap.field-cancel-submit button {
    width: 100%;
  }
}

/** ym-form **/

.ym-form div.ym-hideme {
  position: absolute;
}

.ym-form label.required:after {
  content: " *";
  white-space: nowrap;
}
.ym-form div.read-only.required_legend:before {
  content: "*";
}

.ym-form label.required:after,
.ym-form div.read-only.required_legend:before {
  /*color: red;*/
  color: var(--theme-color-bright);
}

span.read-only.regCaptcha-required_legend:before,
span.read-only.required_legend:before {
  content: "*";
}

/* Legend "*) required fields" */
/* div.required_legend {

  }
  */
/*
  .ym-form label:after {

  }
  */

.ym-form label.subform {
  width: 100%;
  font-size: 130%;
  margin-top: 1em;
  font-weight: 600;
}

.ym-form .ym-fbox {
  margin-top: 0.7em;
  /*what for a reason for 0.7em?..*/
  line-height: 1em;
}

.ym-form .ym-fbox.checkbox.dataprotection {
  margin-top: 1.5rem;
}

.ym-form .ym-fbox label.read-only,
.ym-form .ym-fbox div.read-only {
  line-height: 1em;
}

.ym-form .ym-fbox div.read-only {
  line-height: 1.5em;
  margin-top: 0.5em;
}

.ym-form.ym-columnar .ym-fbox label.read-only,
.ym-form.ym-columnar .ym-fbox div.read-only {
  line-height: 1em;
  margin-top: 0;
}
.ym-form.ym-columnar .ym-fbox div.read-only.message_prefix {
  margin-left: 30%;
  /* 2020-10-21 EXPERIMENTAL */
  line-height: 1.25em;
  /* 2020-10-21 EXPERIMENTAL */
}

.ym-form .ym-fbox div.read-only.dataprotection {
  line-height: 1.5em;
}

.ym-form.ym-columnar .ym-fbox-check.dataprotection input {
  margin-left: var(--accessibility-focus-width);
}

.ym-form.ym-columnar .ym-fbox-check.dataprotection label {
  padding-left: 4px;
  width: calc(95% - 4px - var(--accessibility-focus-width));
  height: auto;
}

.ym-form.ym-columnar .ym-fbox-check.dataprotection label ~ .ym-error {
  padding-left: 0;
  width: 100%;
}

.ym-form.ym-columnar
  .ym-fbox-check.dataprotection
  label
  ~ .ym-error
  .ym-message {
  margin-left: 0;
  padding-left: 0px;
  width: 100%;
}

.ym-form.data-preview .ym-fbox {
  font-weight: 600;
}
.ym-form.data-preview .ym-fbox label {
  font-weight: normal;
}

.ym-form.data-preview .ym-fbox label:after {
  content: ":";
}

.ym-form .subform-description {
  line-height: 1.5em;
}

.ym-form .ym-fbox div.ym-error {
  position: static;
}

.ym-form .ym-error .ym-message {
  color: #b00;
  /*padding-left: 0.5em; 2018-04-09 */
  padding-left: 0;
  padding-top: 0.1em;
  font-size: 0.9em;
  font-weight: 600;
  margin-bottom: 0px;
}

/* .ym-form.ym-columnar */
.ym-columnar .ym-fbox-check input {
  top: 3px;
  /* 26.05.2025 */
  top: 0.26rem;
}

:root[data-font-size="big"] .ym-columnar .ym-fbox-check input {
	top: 0.44rem;
}

.ym-columnar .ym-fbox-check.checkbox label,
.ym-columnar .ym-fbox-check.checkbox .ym-label {
  width: 65%;
}

/* .ym-columnar legend, */
.ym-columnar label.subform {
  font-size: 1.5rem;
  line-height: 1.1;
  margin: 1em 0 0.5em 0;
  font-weight: 600;
}

.ym-columnar fieldset legend {
  font-size: 1.5rem;
  padding-top: 1.5em;
}
.ym-columnar fieldset legend label.subform {
  margin-top: 0;
}

.ym-columnar p.hint {
  border: 0px solid;
  bottom: 0;
  display: block;
  margin: 0;
  position: absolute;
  right: 0;
  top: 28px;
  height: 1em;
}

/* @package Accessibility */
form fieldset.subform.formSubmitOnly {
  display: none;
}

/** field isFirmOnly **/
.ym-columnar .ym-fbox-check.isFirmOnly input {
  margin-left: var(--accessibility-focus-width);
}

.ym-columnar .ym-fbox-check.isFirmOnly label {
  width: 90%;
}

/** field captcha **/
.ym-form .ym-fbox.field-captcha img,
.ym-form .ym-fbox.field-captcha input[type="number"],
.ym-form .ym-fbox.field-captcha input[type="text"] {
  width: 12.5rem;
}
.ym-form .ym-fbox.field-captcha {
  display: grid;

  grid-template-areas:
    "label"
    "img"
    "input"
    "reload"
    "error";
  grid-template-columns: var(--ym-form-label-width);
}
.ym-form.ym-columnar .ym-fbox.field-captcha {
  grid-template-areas:
    "label img"
    "label input"
    "label reload"
    "label error";
  grid-template-columns: var(--ym-form-label-width) var(--ym-form-field-width);
}

.ym-form .ym-fbox.field-captcha label.required {
  grid-area: label;
  white-space: nowrap;
  /* because of ::after " *" */
}
.ym-form .ym-fbox.field-captcha img {
  grid-area: img;
  height: auto;
}
.tooltip-popup .ym-form .ym-fbox.field-captcha img {
  width: 100%;
}
.ym-form .ym-fbox.field-captcha input[type="number"],
.ym-form .ym-fbox.field-captcha input[type="text"] {
  grid-area: input;
}
.ym-form .ym-fbox.field-captcha div.reload {
  grid-area: reload;
  padding: 4px 0px 4px 4px;
}
.ym-form .ym-fbox.field-captcha div.reload > a {
  cursor: pointer;
  font-size: 0.75rem;
}
.ym-form .ym-fbox.field-captcha div.reload > a > span {
  padding-left: 0.25em;
}
.ym-form .ym-fbox.field-captcha.ym-error div.reload > a > span {
  text-decoration: underline;
}
.ym-form .ym-fbox.field-captcha div.ym-error {
  grid-area: error;
}

#registrationB2Cstep1.ym-columnar .ym-fbox.field-captcha p.ym-message,
.ym-form .ym-fbox.field-captcha div.ym-error > p {
  margin-left: 0;
  padding-left: 0;
}

/** headers and footers **/
#intro {
  position: fixed;
  z-index: 1;
  top: var(--intro-top);
  margin: 0;
  padding: 0;
  width: 100%;
  height: var(--design-color-bar-height);
  font-size: 10px;
  letter-spacing: 6px;
  text-align: center;
  text-transform: uppercase;
  word-spacing: 3px;
  background: var(--theme-color-white) none repeat scroll 0 0;
}

html.touch-screen-mode #intro {
  position: static;
}

#intro span.shop-name {
  color: #00f;
}

#intro span.company-name {
  color: #000;
}

/*** colors bar ***/
div.design-color-bar {
  display: flex;
  /*--theme-color-dark: var(--theme-color-dark);*/
  --theme-color-middle: var(--theme-color-dark);
  --theme-color-bright: var(--theme-color-dark);
}

div.design-color-bar > div {
  width: calc(var(--wrapper-max-width) / 3);
  height: var(--design-color-bar-height);
}

div.design-color-bar > div:first-child,
div.design-color-bar > div:last-child {
  width: calc((100% - var(--wrapper-max-width)) / 2);
}

html.touch-screen-mode div.design-color-bar > div {
  width: 33.3333%;
}

html.touch-screen-mode div.design-color-bar > div:first-child,
html.touch-screen-mode div.design-color-bar > div:last-child {
  width: 0;
  display: none;
}

nav.mm-menu div.design-color-bar > div {
  width: 33.3333%;
}
nav.mm-menu div.design-color-bar > div:first-child,
nav.mm-menu div.design-color-bar > div:last-child {
  display: none;
}

/** language selector at **/
ul.language-selector {
  list-style: none outside none;
  white-space: nowrap;
}

/*** header ***/
header {
  position: fixed;
  z-index: 101;
  /* because of ".fixed-by-scrolling" */
  top: var(--header-top);
  width: 100%;
  height: var(--header-height);
  /* padding-top: 16px;
  padding-bottom: 5px; */
  background: var(--theme-color-white);
}

main {
  padding-top: var(--main-top);
  /* because of fixed div#intro and <header/> */
}

/** language-selector **/
header ul.layout-header ul.search-line > li.col-2 {
  position: relative;
}
header ul.layout-header ul.search-line > li.col-2 section.language-selector {
  position: absolute;
  width: 130px;
}

header ul.layout-header ul.search-line > li.col-2 ul.language-selector {
  margin-top: 0.5em;
}
header ul.layout-header ul.search-line > li.col-2 ul.language-selector.count-6 {
  margin-top: -2px;
  width: 85px;
}

header ul.language-selector li {
  float: left;
  margin: 0 2px 1px 0;
  padding: 0;
}

header ul.language-selector li a,
header ul.language-selector li img {
  border: 1px solid transparent;
  opacity: 0.7;
}
ul.language-selector li.active a,
html.touch-mode-off ul.language-selector li a:hover,
ul.language-selector li.active img {
  /*border: 1px solid var(--theme-color-white);*/
  opacity: 1;
}
a.language {
  background-repeat: no-repeat;
  display: inline-block;
}
a.language.icon {
  width: 23px;
  height: 18px;
}
a.language.icon-caption {
  height: 18px;
  line-height: 18px;
  padding-left: 33px;
  background-position: 0px 1px;
}
/*
  a.language.caption {

  }
  */
a.language[lang="de"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkUCQs77TEMiAAABGFJREFUOMutlE1sVGUUhp/zfXdm7szcO50OMBRKpVBKlBrkt4hVG1ngH4EQQUg07liYaBqIQNSFIXFljNGFJhCMiYkLQ7pH0qAhYJHwE7DQEn5qf0hL6aTU6Uync+/9PhdVQjQuJJ7kbM7iyfu+OXkFkI6OjoVa6y1a69bGxkbfWlseGRm5Pjk5ebapqenC3r17f+cRRjo7O7cODw9/MTAw0DAzM6Pb2tqIooiuri76+/tLpVLp6uLFi490dnZ+KyLBf4GrRCKxdGJiorG7u1v39vYyMTGBtZZyuczw8HDq4sWLrcePHz/a0tJybvv27TsOHjxY82+wffv2qUOHDskDuIhIf38/fb29FArjVGZm0I6DdjRaa3Ecx5bLZa5du7aqq6vr+2PHjp1ob28/0NHR0WKtjT0EXjg6Ovrx4ODg03/dHKWUmZ6eZnJqimoYQRiQ0JqYdohEYUQeKCkWi6pYLLYODQ2t6+npef/EiRODGzduHBKRVF9fX/OuXbsWnTp1Kg50AziISEIpNrtpOvwcz8ZSxL0a1ufmczaX59jYOKfD+4ya6IH9IAikUChkC4VCFljp+z6tra0EQUBtbe1LdfX1H4zeuVNVYq16JeXznpdltXZIhyFxrXkskeB1z+e7eQv4MV/Ph36OeqUfPMLDWZdKJW7cuMGZM2dIeV7zmvXrlgMorbXJao21hmoUYoMAlIDWIIq4CMucOHt8n6/n1NHhZWlx4rgI6k+4MYa7Y2P8evkyK6zE9ixa8vxsLKCs4xABJjBQDsAIWAciBXYWEVohLrAj5fFG2mc0CrkeBtwMAsrWMD8WY0sl4pnxCW7WZDZse+vNI47SyloBUwXjR5gVVaQJrFUoESgJ8hsoC1ioWENaa1bHXV5002gRrFJILIaOJWD0Lpmk+9TLrpdxotBo3BjR1ojq2wFm1QwqBrJEEW0C3jGYnyPoNHAB7H2BaNaQUYp4LAaJOCSTkEphjZVUeappkRM2OI7jmOp6iKzBxiOoBIhYCNXs+oLdDDxusJcM5hKYKxpuOxC54Kawfgq8NJL2kflZkq+mvURg1jhhFCnrKqIpiwkN1s6qsroGMWls5KBCALGSQ6RdwWtxbCWJuZXB3vZgOgPZDHZFLaat1sbrspK7cHWLo7W2xgoWw72C5t798akgOjkShZVprcRLubn83FzgaZmShKuwFRetPKuW+MKGGmyiBhvWIroWnDkoO09ENTA3P7XBEREtork10GDP9zz5ZTWce9RL+0NB6AbTFc8NZrILMn7DWj89ubtu3thz9XXFpOt6Etd1VoVzBZ1FJAd2HkR5cBowJuT69bGkE4bVk6VyZv/toU3nDx/+9Ke/dVERuAdcAb7ZufvzZfX5yzublt7d9kRzsbm52avJ5lI6lsgjsoAoSFMa7416es7dOv1LfJ88Sk+3vfBVumX5haX5OeW1uaxe6fvJRkssIaJHlEp2FyYbfjiw/91h/o858ImVjz6z/xD6B9kI1wC5YZ6hAAAAAElFTkSuQmCC");
}

a.language[lang="en"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkUCRs1QEsz3gAABPJJREFUOMu91NtPk3cAxvHn9/Zt357oCcGWQzkWkE1ARQtqxYnDA0q2TJlOomPLQjYdumyJLpolTm/mxWKmS/RCt8tFh5k65oyyiajzMBTUQqVQwBaL0JbSc99D31144+XmxT5/wPfiuXjI2TNnavWJVHt+VnZaWGXALEth0uPHndtDCPh94ITgU2O29IK70tBzdsfuKP4DWsXIa/T24S3JU53IK7WAaW/B32QOwpf74RyawYTHj8a1Ja07rw7fte4/cPTzw60XCCkS/lWclstTzqxMUMuqoA2x0F27h9o3qjG5qhxPnF5wnIDJoMhUjLlXOBOyFe82H+/5bM+BowYD05Npks1W12g4l2OG6u2Nqcyx1LbnGvrWwcNf9wMAnWQ56mL3IK7fcKJ+ZQ12WixY+DyA5plnkGy14svjf+DZdIjw5ixROhUkNwYjNq1GsTw9XTms1TOPr3ROu+OcoFhZPa+i0VpoPT/iOALgRVwqpSEKAthIHI4BN7r73RBs85AvV+HtX6+CabHiq0uDSJgyydzZUUhpSgz4EyQYECwUSVrYlCjWLS/FjiRP9IV5iAy4GiDFfnDgKZ4XQMtoWPLS8VGNGVtLDCimePBmI2CrwobO33GovhBBvQ56gQVNEcILAgRCoNIp8V51LjkRchEDl8RvI0GoVYbStg92Fb/YnJESW74eW27dhHWQwLC4GKI5A+KwC6R3EHCMYt2YB1OrF2Oa45FTbEaRRIr6OWo0+iZR5rwHyadbcIwY0HWqS6xdapGr04w2AA5J67aWGs3tB2u8chUuli/CY4UBEbUKD9MMyPmwEYxaidTlvxB/OIAky2J1BoNtnhEs7e+HKTsTgcN7cNAexNEjF0DRFLFW5sNqVvmm1bFOWqQoct+Ug++v3IDK+QCbNutR0rQIc4dGwew9CnimENi8Fs8ytJD/8BOkt/vAJjgIm9Yh1LweHd1P4Osbx8drymGTp/Dm5DD6aF1VZcESDZ0SRWpsOoJYKIKszCw0NVbB7PcD9hF4Gmw4edeDc5f6YavV4AuTHvGWJognO5C674BmcgZtnim00TQojQp8aR568uaRTo+/MBxNZdGURCJAFCGKQPOa17Go7xHYqjJ0l5Th+MkuPOodRTQSx/i4D2DkGAkm0FdTh91jQwjXLcZljRGzgQiSchlcIRb+exMwpjM6hmYWUqlUSsILAlaueg0bvaMIMXLRrtTB6fJBzciQplGIEpqCLxBFQqWCcXYW5xw+fFtUAbnnOeq7e8AQEX0TIcTDcRSa9cgxG0EoZh1NCBHmmjNQF56CdyouHrs/IiRuPYonEywXiScZhZJnZDKKikZZKl5ogCESRbZRJ3bZvYRdMR/7KpRotQ/hHWsF7BlGhKUyUZuuIRkDrI0mEkqyIFMJb8cTdqhuQUeUc/5cUWm0K9OY2MTTiNb9NFZsyhGro2FhuYeRVhbMhnSWogLilTCYDcXF09wcsuGtBpQmoqhVpUTk6kmK55Fwj8lpCiLDSUS4lpVvZRqqzp9u2v7yKbkBPJ7w/3j+m0N3FdeTqcIRjXR9NOR6PxrjytQJGRFZHo44AcpKoVXSJBYLw91zfao/OdNG8ApE8RfJ3n1dS8ZHQxsTcekChTzNJFfIZDzPBXLN2pu5CwtOfNK8ffSV4i/r/LNdcudaUumdDJD5802J9l3fsfg//ANnUi6Dz9Ww2wAAAABJRU5ErkJggg==");
}

a.language[lang="es"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkUCRgi6LXl2gAABFZJREFUOMutlFuIlHUYxn/v//tm5zyz4zg7ru6qaKuoeaA8dFCL3KCDuiUFRVH3gUWaRgad6DKLwkOIIHkXhIQklZIhiSc8kMd0dcLjOuuaO7t+M+vM9/+/XYhdFF0kPTcPvBc/Hp4XHgFk7fIVIyfEogvbm2KzE21t6VvqqpWrV09f7u/f90uxcOiTFSsGuAvJt1u2LG7p7fu89UpP+/DQeclZM1Fnsbv3MHThQnB1cPDEiWJhw7ObN21GpPFf4CYWjY6LVAbGDhw85DW6u6FSwajiDw2R7iknOn7rnr1gz4GNR+YvOLDl5Vef+2zVu9l/g73+5nLz9kcfyl9wARk8f57q6XPYcgWG6iA+Yg2oLxhPY0O3KJ4tzejYs//ruTt+3v7ToiUr1721YgqqkTugN5YtG7kkqH48tqf8wJ2bL8a4+mAVL1bFLq6jnXVIGkh6SFRghwg1AQFXrZp4UJ1dvFKeOfFs6Z1H93de6H9q8UUfSYzqvdExvGtRm921qwnYC+CDiLtXCZ8OsQ830EIdPMPQDKi1hqRfCpHtDrYJch5w4JyVdH9/86jKQDPINLIZyDZDaBmZyz+BtKxCe+tGDYZJPi7psIEF20DrhsYpS/CNpTJksK9Z3BqLW+5wU4AQ0dAQine72GoVLf0Oew5TaM90rHuvcwKAb4xxVsFZxTkH2sDVm+ByhKqdTn9YxO/7CknXYK7i5oXYCx7uB+C4wA1BrYXwD7T9BNkluciYfYX5wHEfMEoEa8FZi2oDaQJvXBKOHMN8X6LxWAYzsYY4cApMUdyDjtCC9As0gFwNClcwTZcY3Zqe09X1ygbfGKPqwDnFiQWpI77idfgUXmyheuwUlWwTGVUQwAnaAK0DaYEMKN7t9zmHhFdpzkanP/l4LONb6zzxfFwvuK0KaYs3FeLHDPHyALliSKUScCtlwFhAAXPb1AA+Ik0oCUQS4FQSiWD8qDbb7vsR39VPC7pWUE/RzgZMVLTiI4d9TMnQXK/T1+rhTVXcPEWnA1EfTAwkjkocIQ0mDZEc8d50Kn6G+/wwtIZSBNcHruhQA06A5jRkkxD10UCQkqicMWK+M5hZMcwzUXgoAcPTGJMCyYLNwblhGj84TPKlUwt9z/NUDeAc13yP3ut9Nxs7d/aEtaGa75FK5LMthbCeSt4MpCniQSyG151Ub31KzLYMpiMLo5qRRA6VPOIVhHFt5MvBHF9EFDF0j26z+6dOXt8o5Dcm06mLjXi0UcumYvVcpjU7tv3+bP/AC6PLvfPGB7X4sGxKIsVWNflhIi4LQR4SeWhpgTHtuNByulyO+2ptXzC67UhpwSMffLl69da/bdEgcA04Cmzq+uLTe8YcPvr8pPK1rslBpWN8KpHNJFs9v1hAWkdgUwmCk6fsyf0Hzu2ORZbJ3ez0rPVrkjMO/TpuRBDcnzPetHQ8PlYjkajxvR6Jx/deb2/7ceXSpZf4P7RSVd5X/UfQPwGDGeOFmkBHXgAAAABJRU5ErkJggg==");
}

a.language[lang="fr"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkUCRcItJYwwwAABCtJREFUOMutlM9vVFUUx7/n3vvevHlv5s0wnZnOdGbKL4cJYqm2BmJU4kKSJhJIE01c8RfIQhITYCMJJsREoi78EUNiNG5cqI3GhYmBSDQIQgjYgjYBsT/oRGoL/TE/3nv3HhfTgmBcSDy7u/l8v+d77jkEgA6+/k6P17Nxl5utbCtlvKQO2436n7d/zbanfxy/8MP5146+sYAHKPr8i5Hdt6zs2/N2dwVel+wvJ6EZODsdYqgcLHeFf4xd/Hnsg+Hh4Y8BhP8FLmJObMOykesuTd2Wv80HWAwYALAYEQKZcNdvrG7buXPn8cuXL58dGRl5/tixY6l/g+07cEAcOnqUVt+KSNDU7CKuzdpY50cINSBtQAnCXJsJAHueR5s3b360VCp9WqvVzj22te+z0e9OfX34yJHxOaIQAF5+ZX/P4I36S5Pzt78CcHoFTqbRCtBoAkYbRMwQRFAE3GozABAzg4iQTCZFLpfb1pypP146eerg+888OxE8t3tSgt3uqZvVTXt2l789ecK+CwcIYDAbhFoj0IAkQElgvtWJiOhOp1BKgWMxaoRR2r8+kc4puTWWSsMfLCAWd9CTzQ6ht3wIE1OBAFgoIrAxMMZAG4DQiWUhWEXeFVFKwfGTpPI5hIIQESFsNLB09Rpu/XQe3ZlM9dXtT24CACGENKvOjTEIjYEQgEXAYsAINQMgMHcEpJSIuS6sXBYRMwwIJooQzM5iYWwUCSKrN5/fAQAd5wJgo6G1QaQBAkEJoBUxAoN7olFKwXYcOGt7EUURzIqoabfQnqkjnJpGr+9vH967VwlJggHuwI2+AxMERAZoRnzvYhDBtizE12+AZoYBQEpAWDYQRmjV63BD3f+E7fhCGy0VoROLNoiMAbgz0LZhLN+3NkQEJSXcUhHsxmEsBRH3oFI+pJ+EiTRZjeWNGa0rSillCAAbA200Qs1gABIAM/421JWOhIClFNzuPOxSCbSwBJVOwUp4UEkf1po07GQiESczILSOhCAGTMc5mEECSMYE4pbAUsj3fpmV3OOJBBKPbIFK+7ByOTiFIpxyCU6lwsm1a+ELuUtJIRnM0Mzgxhzqv5xbOnHdzLSCsNluicR4K5EvNPOJ7kKRXNddhbMTc8jf8jB4bh6xQgFOVwZ2VxesbJa8ShmFxvJ2RUQsiJBrTujK9KX37HpwXKa9yVgUhYVm0zk7GhTHv08NZjKZF2u12tMDAwPxYrFInhvndLVKrclpxAt5uLk87HwOTqUCjjSuzdTjSjPPdlvNC4Pq98NvvvXul/fdokUANwFcAvDh0NDQQ9Vq9YX+/v49m2q1qp9OpeSatBS5PFRPAex5mLlyRV88c+bqWEztpwe50319fd5TO3ZsyPn+oJy+sTVh2+vItmNCyhkZj58OK+Vv9u/bN4X/oz5ipk+Y/2H0L6rOuS5uJCGQAAAAAElFTkSuQmCC");
}

a.language[lang="tr"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkUCQ8WzIKV+QAABEZJREFUOMutlG1olWUYx3/X89znnJ3znLNznh03t7mjc3M6323q/JRQRFiMgiAoSIogKBgWhvYqZc7CREoqhAiCvkUIYQi9KIKGmjkL5zQ3p+79OJfb3M7mzjn3fffhzIzqS9L17f5w/67/9b/+XALIjpaWyoUq2JQKhRojqVRsCjt5Y2joYvf42MkjlRWtX218+iZ3UfL1/v2P+L/f2DsnfS1VNp13vbWrMUaTO/4T4wMDmc58vv3M3MpPN+1+/wtEcv8FrooCgRovfa06c/Jn8p6H1C3AjXqoiQnCV7ojZX39jXXtscb6i481X9r04s7BORU/7Hjl1bF/gz23bZsT8RN27+aXLYByRGS8p4eizk509XzIZREVhyWLwfeF7w/ZZP+ALB0ZWeV3dn05VlF2evEzz+5vX7Lo4M4tWztuT/PUO9srmwaHmjsmMt8AJwCUOI7JZiZxM5OYfB6mbsE9K+HBB+DoMTBazLeHkKFrhEZGnfKR0caay91rGtouvPbQ0eM9N57c2KuMidR29dalHt5QJSdOBP+EIyIW0IDJ57HBAJKqggMHYdce6O1DHAERELACTjYnFf2DiUUD6QSOs4J4HBpWgVKkEokNrFj6Omfbs4611sF1McZgcjlIJMBauNQFXqTwTsSRbLZgrC0EQbsOeaUKTTMZ7OWrcLqVyuJ43a6GtQsBHMd1DY6DsRZtDExPz6zaLXxctgR5602kcQ047p98a2/nTUBr5Pp1aDuPr3WgJlm6HsABHJSLxmKMgXQaay1UVQECY2OwfBls3oTjOHeggMXe6TKdxabTqL5+5ke8dfe/8LxyxHWttWAsBWtGbyLdPXDfekgmoesysr0F+eAj8BMF1RS8x9qCcldBMIDk8jCYZtZ0dmWTGyxWRmtXggHyt23RGq5cBc+DLS/Be7vh2HFkMgOuC/IX6a6CgIJgEMJhiERAa/EmJmpTOptSSimjEQxgjMbmsmAMHDoCfX1QPhuWLoa2c0guV7BKBAIBbKgIIjNQz4PiGFLi43le1JuSBpUz2kGpAlybmZEF6yeQ8xegrR1GRhBrLSKC60IoBOEwEo3OQIshUVxIVrLEFvm++B0Xm5RylZ0GjNYMKZfh4eEJffjwoJmamnLFRiOlJWWztI6GMxkJWgfCYZyoZyUaFYrjEC8GPwElPsxKYktLRVJVlN+aWqdExOI4dNTO063Ll+3LJUs+CydivflwKJcpjhZpP1bhz5uzOjE69sS8a8P3Vk9OhkuiMQlUlFtJlgiJOJQkoTSJnV2GzE2h83kupdNhZbQeHq2d/0tfPPL2Jy3vHvjbLRoHrgNngc+bPtyzoP7M2cfrh64/Wn9zrG6+F4nHIhWuml2KlJejPY/x87/pc6dOdf0YUpvlbu50w76PvXWtv9aUTU6t9h1nRSwcqTaBYEiUO0i46MSNVNV3W5ub+/g/6g1rpcXafwj9A7IIvl3x2om6AAAAAElFTkSuQmCC");
}

a.language[lang="ru"] {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABcAAAASCAYAAACw50UTAAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH3QkUCREaEXXmDQAABIVJREFUOMutlE1sXOUZhZ/3+747vvfOTMbx34xnbGdIYpu4KQ116oBIqaWqiAUQKQKpDZtWbEmidBGJSlUrQRcRgQVqfhRVoEpsCosEJKQ2bZBQUIIDiUP4zQ+Z2IlxHMfBnvF4PDP3fl8XgQi1bIp61q/OOe95Xx0BZN++ffmBgYFHent7R8IwTNfr9aWFhYXzU1NT7x0/fvz03r17y3wfHDly5LETJ06USqVSVKlUnLXWxXHsGo2GK5fLixcuXBg7fPjwU4D3v3Ib3/dXe55XLJfLZDIZAJRSiAjpdDpMp9MjuVxuZHx8/OlSqfSniYmJf+7atWvhu8h27NihgiBwe/bscQBKRKRSqbC0tEQcx8jXgyICIIDzfZ9sNruhv7//b5s3bz567Nix3fv37//Bt7fZuXNnfuvWrc8Vi8X77jgXEdto1GlJGJyzLEcWpQQBPK2+EcAB1loVBMFINpvdODg4+Mzo6Ojk/Pz8VWNMWCgU+js6OnriOE4AJ78hl0ZkeeuTm1z+yLFxcBX9nSGnJstoJQz3pBnuSeKJYJTCOYe1VtLpdGuhUGgF7vl2NPl8/mHgd0BDxdaqo5/f4vljJcYm5vmq1sRa+LLc4PWzMzz56ieMvnSa3//9MpPzyySMQisR5xxRFN0hdc4BkMt29b986ODAnVgWahHWxohzNGOLUpDQgmcUFrh0q8alyXn++s4iW9Z38OsH1jC8NsmdA32NemS5XFXe6YXgQeBjI4jytOCco2kdVaewSmGNR6QNVqnbsRuhXre89sE0b3xeZcPq69w/kOfu7jSB0dyoNhibKJPwFG2Z3Kbf/GrrIaOUcuIsFmitldk4c4n1XQX0jSu0zC1RbaSZ0AGIBhEwmrqNGZssM3Y9QmuDArRRJFs0Q7kkyTD8kS3et8LENtaBcmy7cpJnSrOs9x+A4i9YO32WR8+c4tmpOf4VFHi1a4j3wnZmEwFW3RZSIhij8I0QJDSphCa2SKWp14Q62WuMMfbBmxfxJ8bwu7tpxg4PhUu0IJ5Pa1Tn8WtnGL16hrOJJO+238XRvhHG80MshwF+QtPqCSnfkApbKLRYts1dTKmvLv7YxHGsQhfRRIisu/3PAmRWQDIJnodTGuLY5ZfL8sT0OZ66dZ6ZL1fxfnGYj3rXUWnrpENr7m1UeKh63eV85KyNHzFaa+dEwFpmjebG3M3F5ttvT0e15ZrRpML2TFdn1EglF6uSsJpG4GNTSTfoNWVj+WOYuoZbbkdWroS2VshnhVV9tNdqm4yIOERxsa8nHvvh0IFmZ/tfkunU1WbQ0qxlUn5j5YruTLF3ODNf/mXfzI2frqnWgrZ0SiTX7aL2NjGtGaStDTo7cNkupK8XG8Wcn5kJjIvjm9W+nvHLP//ZHw++8MKb/9FFFWAWOAe8suWlF9euOnPuiXUzs1uGFhf61yTDzIqwW5uuLqQ7R5wKqX76Wfzp2Kkv3vW938r3qemfHPhzcsPpD1fnqtXhlUrfkw6CovO8FmX0tATBybnenn/s3r79Gv8P7HZO/uDcfxn9N75u0qqkLcxbAAAAAElFTkSuQmCC");
}

a.language.caption[lang] {
  background-image: none;
}

/** skin-selector **/
header ul.layout-header ul.search-line > li.col-3 {
  float: right;
  line-height: 2em;
}
/*
  header ul.layout-header ul.search-line > li.col-3 > section {

  }

  header ul.layout-header ul.search-line > li.col-3 {

  }
  */
header ul.layout-header ul.search-line > li.col-3 > section.skin-selector {
  float: right;
  width: 98%;
}

/* TouchScreen version */
ul.ui-autocomplete.autocompleteDecorator.needleTouchScreen.ui-widget.ui-widget-content {
  border: 1px solid var(--theme-color-white);
}
ul.ui-autocomplete.autocompleteDecorator.needleTouchScreen.ui-corner-bottom {
  border-top: 0;
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

.ui-autocomplete li.last-item .ui-state-active {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}
/* */

section.search-articles ul.form-search {
  /*display: flex;*/
  /* 2024-01-23 EXPERIMENTAL */
  width: 100%;
  position: relative;
}

section.search-articles ul.form-search > li {
  position: relative;
  padding: 0;
  margin: 0;
  background: var(--theme-color-white);
}

section.search-articles ul.form-search input[type="number"],
section.search-articles ul.form-search input[type="text"] {
  width: calc(100% - var(--prefix-width) / 4);
}

section.search-articles form ul.form-search > li.input input[type="number"],
section.search-articles form ul.form-search > li.input input[type="text"] {
  margin: auto 0;
  font-size: clamp(15px, 0.9375rem, 22px);
}

/* search form: input default */
section.search-articles ul.form-search > li {
  height: var(--search-articles-height);
  border: 0;
  background: none;
}
section.search-articles ul.form-search > li img {
  width: 100%;
  height: auto;
}
section.search-articles ul.form-search > li.prefix {
  width: var(--prefix-width);
  display: flex;
  justify-content: space-evenly;
}
/* version with image icon */
section.search-articles ul.form-search > li.prefix img {
  width: 18px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-45%, -50%);
}
/* version with FA icon */
section.search-articles ul.form-search > li.prefix i[class^="fa"] {
  width: 1.125rem;
  margin: auto;
  padding-left: 0.3125rem;
}

section.search-articles ul.form-search > li.input {
  text-align: left;
  padding-top: 1px;
  padding-left: 0.3em;
  border: 0px solid red;
  width: calc(100% - var(--prefix-width));
  display: flex;
}
section.search-articles ul.form-search > li.running,
section.search-articles ul.form-search > li.cancel,
section.search-articles ul.form-search > li.submit {
  display: none;
  position: absolute;
}
section.search-articles ul.form-search > li.running,
section.search-articles ul.form-search > li.cancel {
  padding-top: 0px;
  right: 40px;
  padding-right: 0;
}
:root[data-font-size="big"] section.search-articles ul.form-search > li.running,
:root[data-font-size="big"] section.search-articles ul.form-search > li.cancel {
  padding-top: 0px;
}
section.search-articles
  form.no-liSubmit
  ul.form-search
  > :where(li.running, li.cancel) {
  right: 4px;
}
section.search-articles ul.form-search > :where(li.running, li.cancel) > div {
  position: relative;
  border-right: 1px solid var(--theme-color-dark-b2);
  padding-right: 0.5em;
  cursor: pointer;
  width: 1.625rem;
  /* top: calc(var(--padding-top) - (var(--icon-height) / 2));
  height: var(--icon-height); */ /* 2025-07-25 EXPERIMENTAL OFF */
  height: 100%; /* 2025-07-25 EXPERIMENTAL ON */
  padding: 0;
}

section.search-articles.touchscreen
  ul.form-search
  > :where(li.running, li.cancel)
  > div {
  border-right: 0;
}

/* Version with <img/> icon */
section.search-articles
  ul.form-search
  > :where(li.running, li.cancel, li.submit)
  > div
  img {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

/* Version with FA icon */
section.search-articles ul.form-search > li.cancel > div i[class^="fa"] {
  font-size: calc(var(--icon-height) + 4px);
  /* line-height: calc(var(--icon-height) - 2px); */ /* 2025-07-25 EXPERIMENTAL OFF */
  line-height: var(--search-articles-height); /* 2025-07-25 EXPERIMENTAL ON */
  padding-right: 8px;
}

section.search-articles ul.form-search > li.running > div > i[class^="fa"] {
  position: relative;
  /* line-height: 1em; */ /* 2025-07-25 EXPERIMENTAL OFF */
  line-height: var(--search-articles-height); /* 2025-07-25 EXPERIMENTAL ON */
  right: 6px;
}
section.search-articles ul.form-search > li.submit {
  right: 0;
  width: 40px;
  text-align: center;
}
section.search-articles ul.form-search > li.submit > div {
  width: 100%;
  height: 100%;
  text-align: center;
  display: flex;
  justify-content: space-evenly;
}
section.search-articles ul.form-search > li.submit > div img {
  width: 23px;
  left: 50%;
  transform: translate(-55%, -50%);
}

section.search-articles ul.form-search > li.submit > div i[class^="fa"] {
  margin: auto;
  font-size: 18px;
}

section.search-articles form.ui-state-focus {
  border: 0;
  background: none;
}

/* search form: input not empty */
/*  section.search-articles form.not-empty ul.form-search > li.input input[type="number"],
  section.search-articles form.not-empty ul.form-search > li.input input[type="text"] {
	  width: calc(100% - var(--prefix-width) * 2 - var(--icon-height));
  } */
section.search-articles
  form
  ul.form-search
  > li.input
  input[type="number"]:focus,
section.search-articles
  form
  ul.form-search
  > li.input
  input[type="text"]:focus {
  width: calc(100% - var(--prefix-width) * 2 - var(--icon-height));
}

:root[data-font-size="big"]
  section.search-articles
  form
  ul.form-search
  > li.input
  input[type="number"]:focus,
:root[data-font-size="big"]
  section.search-articles
  form
  ul.form-search
  > li.input
  input[type="text"]:focus {
  width: calc(100% - var(--prefix-width) * 2 - var(--icon-height) / 3);
}

/*** section.search-articles.touchscreen ***/
/*
  section.search-articles.touchscreen {

  }

  section.search-articles.touchscreen .search-forms {

  }
  */
section.search-articles.touchscreen .search-forms > div {
  height: 50px;
}

section.search-articles.touchscreen .search-forms.count-1 {
  padding-right: 5%;
}
section.search-articles.touchscreen .search-forms.count-1 > div {
  width: 100%;
}
/*
  section.search-articles.touchscreen .search-forms > div > div {
  }
  */
section.search-articles.touchscreen .search-forms.count-2 > div.search {
  width: 81%;
}

section.search-articles.touchscreen .search-forms > div.scanner {
  width: 18%;
  float: right;
}

/* Trying 'transform: translate' */
@supports (translate: 0) {
  section.search-articles.touchscreen .search-forms > div {
    position: relative;
  }
  section.search-articles.touchscreen .search-forms > div > div {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
  section.search-articles.touchscreen .search-forms > div.search > div {
    left: 1%;
    transform: translate(0%, -50%);
  }
}
/* Fallback: 'display: flex' */
@supports not (translate: 0) {
  section.search-articles.touchscreen .search-forms > div {
    display: flex;
    /* by using .ym-equalize it makes float: none; what is bad f.e. in the Chrome browser */
    float: left;
  }
  section.search-articles.touchscreen .search-forms > div > div {
    margin: auto;
  }
}

section.search-articles.touchscreen .search-forms > div.scanner > div i.fa {
  font-size: 36px;
  color: #fff;
}

/*** section.search-info-bar.touchscreen ***/
section.search-info-bar.touchscreen {
  background: var(--theme-color-white);
  min-height: 0;
  padding: 0 15px;
  text-align: left;
}

/** section.search-info-bar.touchscreen .visible-by-empty-results **/
/*
  section.search-info-bar.touchscreen .visible-by-empty-results {
  }
  */

/** section.search-info-bar.touchscreen .visible-by-results **/
section.search-info-bar.touchscreen .visible-by-results {
  display: none;
}

/** Breadcrumbs **/
nav#breadcrumbs {
  background: var(--theme-color-white);
  font-size: 0.75rem;
  height: var(--breadcrumbs-height);
  padding-top: calc(var(--breadcrumbs-height) / 4);
  padding-bottom: calc(var(--breadcrumbs-height) / 4);
  padding-left: 4px;
}
@media (max-width: 31.25rem) {
  body {
    --breadcrumbs-height: 3.125rem;
  }
  nav#breadcrumbs {
    margin-left: -0.125rem;
  }
}
/*
  nav#breadcrumbs div.breadcrumbs {

  }
  */
nav#breadcrumbs div.breadcrumbs a:empty {
  display: none;
}

nav#breadcrumbs div.breadcrumbs a:empty + span.delimiter {
  display: none;
}

/** Articles Groups **/
/*
  nav.articles-groups {

  }
  */

/** Article Groups horizontal navigation **/
/*
  nav.articles-groups.horizontal {

  }
  */

nav.articles-groups.horizontal > .ym-wrapper > .ym-wbox {
  padding-top: 0em;
  padding-bottom: 0px;
}

nav.articles-groups.horizontal ul.articlesGroups ul {
  display: none;
}

/** page wide teaser **/
div.page-wideTeaser > div.teaserText {
  padding: 0 1em 1em 1em;
}

/** page teaser **/
div.page-teaser {
  /* margin: 0; */
  margin: 0 auto; /* 22.05.2025 */
}
/* */
html.touch-screen-mode [id^="SliderJssor"] .bullet-buttons,
html.touch-screen-mode [id="sliderAction"] .bullet-buttons,
html.touch-screen-mode [id^="SliderJssor"] .arrow-buttons,
html.touch-screen-mode [id="sliderAction"] .arrow-buttons {
  display: none;
}

/*display: none;*/
/* use it inline! and you'll have no problem with the positioning of the navigation arrows */
/*
  #SliderJssor_teaser > div {
  }
  */

/** slider "introduction" **/
/*display: none; */
/* don't do "display: none;" here, otherwise you'll may become problems with the arrows */
/*
  div.ajax-container div.sliderTypeIntroduction {
  }
  */

/** action articles **/
/* standard (PC view) */
section.action-articles.standard {
  margin-bottom: 2em;
}

/* standard (PC view): flexible slide view */
section.action-articles.standard > div.flexible > div {
  display: none;
}
/* show only the 1.st slide */
section.action-articles.standard > div.flexible > div:first-child {
  display: block;
}

/** slider "manufactors" **/
/*display: none;*/
/* don't do "display: none;" here, otherwise you'll may become problems with the arrows */
/*
  div.ajax-container div.sliderTypeGroupsManufactors {
  }
  */



/* cookies-info */
section.cookies-info {
  background: var(--theme-color-black-1-opposite) none repeat scroll 0 0;
  border-radius: 0;
  color: var(--theme-color-black-1);
  font-weight: normal;
  font-size: 0.9em;
  margin: 0 0 1em 0;
  padding: 0.5em 2em;
  position: relative;
  border-left: 0;
  border-right: 0;
  border-top: 0;
  border-bottom: 0;
}

section.cookies-info * {
  margin: 0;
}

section.cookies-info > div.text {
  text-align: center;
}

section.cookies-info > div.text > a > span {
  border-bottom: 1px dotted;
}
html.touch-mode-off section.cookies-info > div.text > a:hover {
  border-bottom: 1px solid;
}

section.cookies-info > div.button {
  position: absolute;
  right: 7px;
  top: 6px;
}

section.cookies-info > div.button.type-button {
  display: none;
}

section.cookies-info > div.button.type-button button {
  padding: 4px 8px;
}

section.cookies-info > div.button img {
  cursor: pointer;
}

section.cookies-info > div.button i[class^="fa"] {
  cursor: pointer;
  font-size: 20px;
}

/* html.touch-screen-mode section.cookies-info */
section.cookies-info.detailed/* ,
html.touch-screen-mode section.cookies-info */ {
  position: fixed;
  width: 100%;
  margin: 0;
  padding: 1em 0.8em 2em 0.8em;
  bottom: 0;
  z-index: 2;
  border-top: 1px solid #000;
}

html.touch-screen-mode section.cookies-info > div.text > a {
  display: block;
  width: auto;
  margin: 1em auto 0 auto;
}
html.touch-mode-off section.cookies-info > div.text > a:hover {
  text-decoration: none !important;
  border-bottom: 0;
}

html.touch-screen-mode section.cookies-info > div.button.type-button {
  display: block;
  position: relative;
  margin: 0.5em auto 0 0;
  padding-left: 15px;
  /* for centering */
  text-align: center;
}

html.touch-screen-mode section.cookies-info > div.button.type-image {
  display: none;
}

/*** .cookies-info.detailed ***/
section.cookies-info.detailed {
  border: 1px solid #aaa;
  width: auto;
  margin: 0 auto;
  padding-top: 2em;
  bottom: -100em;
  left: 10%;
  max-width: 1000px;
  z-index: 100;

  display: none;
}

section.cookies-info.detailed.popup-cookies {
  width: 80%;
}

section.cookies-info.detailed > .label {
  text-align: left;
  margin-top: 1em;
}

section.cookies-info.detailed > .label:after {
  content: ":";
}

/** .cookies-info.detailed > .categories **/
section.cookies-info.detailed > .categories {
  margin-top: 1em;
  /*min-width: 350px;*/
}

section.cookies-info.detailed > .text,
section.cookies-info.detailed > .categories,
section.cookies-info.detailed > .label {
  width: 90%;
  max-width: 1000px;
  margin-left: auto;
  margin-right: auto;
}

section.cookies-info.detailed > .categories > .category > .checkbox-toolbar {
  margin: 1em 0 0.5em 0;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .checkbox-toolbar
  > .checkbox {
  text-align: left;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .checkbox-toolbar
  > .checkbox
  input[type="checkbox"] {
  cursor: pointer;
}

html.win10
  section.cookies-info.detailed
  > .categories
  > .category
  > .checkbox-toolbar
  > .checkbox
  input[type="checkbox"] {
  position: relative;
  top: 1px;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .checkbox-toolbar
  > .checkbox
  input[type="checkbox"][disabled] {
  outline: 1px solid #aaa;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .checkbox-toolbar
  > .checkbox
  label {
  cursor: pointer;
  padding-left: 4px;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .checkbox-toolbar
  > .toolbar {
  border: 0px solid red;
  text-align: right;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .checkbox-toolbar
  > .toolbar
  > a {
  cursor: pointer;
}

/* .cookies-list table */
section.cookies-info.detailed > .categories > .category > .cookies-list {
  display: none;
  overflow-y: auto;
  max-height: 200px;
  background: var(--theme-color-white);
}

section.cookies-info.detailed
  > .categories
  > .category
  > .cookies-list
  > table
  th {
  padding: 4px 8px 2px 8px;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .cookies-list
  > table
  td {
  padding: 2px 8px;
}

section.cookies-info.detailed
  > .categories
  > .category
  > .cookies-list
  > table
  .col-name {
  width: 38.2%;
  vertical-align: top;
}

/** .cookies-info.detailed > .buttons **/
section.cookies-info.detailed > .buttons {
  text-align: center;
  margin-top: 1em;
}

section.cookies-info.detailed > .buttons > .ym-grid {
  border: 0px solid green;
  margin: 1em auto 0;
  display: grid;
  grid-template-areas: "selected all";
  grid-template-columns: 1fr 1fr;
}

section.cookies-info.detailed > .buttons > .ym-grid > div {
  width: 100%;
}
section.cookies-info.detailed > .buttons > .ym-grid > .accept-selected {
  grid-area: selected;
  grid-column: 1;
  text-align: right;
  padding-right: 3%;
}

section.cookies-info.detailed > .buttons > .ym-grid > .accept-all {
  grid-area: all;
  /*grid-column: 2;*/
  text-align: left;
  padding-left: 3%;
}

section.cookies-info.detailed > .buttons button {
  text-shadow: none;
  white-space: nowrap;
}


@media (max-width: 850px) {
    /*** .cookies-info.detailed.popup-cookies ***/
    section.cookies-info.detailed.popup-cookies {
        /*border: 1px solid #aaa;*/
        width: 100%;
        bottom: 0em;
        left: 0;
        max-width: none;
    }
}


/*** cookies: minimized version of the popup ***/
section.cookies-info.detailed.popup-minimized {
    border-radius: 1.875rem;
    left: 1rem;
    padding: 0.75rem;
    width: auto;
}
section.cookies-info.detailed.popup-minimized > .buttons {
    margin-top: 0;
}
section.cookies-info.detailed.popup-minimized > .buttons i[class^="fa-"] {
    font-size: 2rem;
}

section.cookies-info.detailed.popup-minimized > .buttons a {
    display: block;
    max-width: 2rem;
}
section.cookies-info.detailed.popup-minimized > .buttons a > img {
    width: 100%;
    height: auto;
}

/** module inventory **/
html.touch-mode-off section.module-inventory > ul:hover,
html.touch-mode-off section.module-inventory > div:hover {
  background: #f0f0f0;
}
section.module-inventory {
  --font-size: 2rem;
  margin-top: 1em;
  --icon-width: 4.0625rem;
  --item-height: 2.5rem;
  --fa-font-size: calc(var(--font-size) - 0.125rem);
}
@media screen and (max-width: 28.125rem) {
  /* 450px */
  section.module-inventory {
    --font-size: 1.5em;
    --item-height: 30px;
  }
}
@media (max-width: 21.875rem) {
  /* 350px */
  section.module-inventory {
    --icon-width: 2.8125rem;
  }
}
.tooltip-popup > section.module-inventory {
  margin-top: 0.1875rem;
  --icon-width: 1.6875rem;
  --item-height: 1.875rem;
  --font-size: 1em;
  --fa-font-size: calc(var(--font-size) - 0px);
}
html.touch-mode-off .tooltip-popup > section.module-inventory > div:hover {
  background: none;
}

/** module inventory: Version <div/> **/
/* Items */
.tooltip-popup > section.module-inventory > div {
  padding: 0 0;
}
section.module-inventory > div {
  padding: 0.5em 0;
}
section.module-inventory > div > a {
  /*border: 1px solid blue;*/
  display: flex;
  height: var(--item-height);
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
/* icon */
section.module-inventory > div > a > .icon {
  width: var(--icon-width);
  height: var(--item-height);
  display: flex;
  justify-content: center;
  align-items: center;
}

.tooltip-popup > section.module-inventory > div > a > .icon {
  justify-content: flex-start;
}

section.module-inventory > div > a > .icon > i[class^="fa"] {
  font-size: var(--fa-font-size);
}
section.module-inventory > div > a > .icon > img {
  width: auto;
  height: auto;
  max-width: var(--icon-width);
  max-height: var(--item-height);
}
.tooltip-popup > section.module-inventory > div > a > .icon > img {
  max-width: var(--icon-width);
  max-height: 1.2em;
}
section.module-inventory > div > a > .label {
  font-size: var(--font-size);
  border-bottom: 1px dotted var(--theme-color-bright-opposite);
}
html.touch-mode-off section.module-inventory > div:hover > a > .label {
  border-bottom: 1px solid var(--theme-color-bright-opposite);
}

/** module inventory in the tooltip-popup **/
div.tooltip-popup.module-inventory {
  width: max-content;
  max-width: 600px;
}
div.tooltip-popup > section.module-inventory {
  margin-top: 0.1875rem;
}

/** message-info **/
section.message-info > table {
  border: 0;
  margin: 0px;
}

section.message-info > table td.icon {
  width: 70px;
  vertical-align: top;
}

section.message-info > table td.icon i[class^="fa"] {
  font-size: 45px;
  /*color: #FECE2F;*/
}

section.message-info > table td.message {
  vertical-align: middle;
  font-weight: 600;
}

/** Paginator **/
div.pages-bar > div.ym-gl {
  width: 50%;
}
div.pages-bar > div.ym-gr {
  width: 50%;
}
div.pages-bar > div.ym-gr > ul {
  width: auto;
  float: right;
}

/* pages-links */
div.pages-bar.top {
  margin-top: 1em;
}

/* 25.03.2024 EXPERIMENTAL OFF
  div.pages-bar .pages-links.prev-info-next {
	  max-width: 220px;
  }
  */

div.pages-bar .pages-links li.label {
  margin-right: 0.5em;
}

div.pages-bar .pages-links li.item {
  margin-right: 0.5em;
  margin-bottom: 0.4em;
}
div.pages-bar .pages-links li.item.disabled {
  color: gray;
}

div.pages-bar .items-per-page li.label {
  margin-bottom: 0.4em;
}
div.pages-bar .items-per-page li.item {
  margin-left: 0.5em;
}

/*div.pages-bar li.item a { */
/* 05.02.2024 EXPERIMENTAL OFF */
div.pages-bar li.item div {
  display: block;
  min-width: 20px;
  height: 20px;
  text-align: center;
  line-height: 18px;
  padding-left: 0.5em;
  padding-right: 0.5em;
}

div.pages-bar li.item {
  /* 05.02.2024 EXPERIMENTAL ON */
  display: flex;
}

div.pages-bar li.item > i[class^="fa"] {
  /* 05.02.2024 EXPERIMENTAL ON */
  margin: auto;
}

div.pages-bar li.item a {
  /* 05.02.2024 EXPERIMENTAL ON */
  display: flex;
}

div.pages-bar li.item a > i[class^="fa"] {
  /* 05.02.2024 EXPERIMENTAL ON */
  margin: auto;
}

/* bundle-bar */
div.pages-bar.bundle-bar > .ym-gl {
  width: 25%;
}
div.pages-bar.bundle-bar > .ym-gr {
  width: 70%;
}

/** ArticlesBundleList: ul-li rendering strategy **/
/* mode-cells */
/** article()->cell() **/
article.teaser,
div.pages-bar.bundle-bar > div > ul.elements > li.element,
ul.mode-cells > li.item {
  --item-width: 25%;
  --item-padding: 0% 0.8% 1.6% 0.8%;
}
div.pages-bar.bundle-bar > div > ul.elements > li.element {
  padding-left: 1em;
}
ul.mode-cells > li.item {
  --article-height: 290px;
  --section-description-height: 36px;
  --section-prices-bottom: 1px;
  --section-prices-price_value-height: 30px;
  --section-availability-height: 0px;
  --section-availability-bottom: 0px;
  --section-buttons-height: 0px;
  --section-buttons-bottom: 0px;
}
.ym-wrapper.wide ul.articles-bundle-list.mode-cells li.item {
  --item-width: 25%;
}

/* type-extra, type-hero */
.ym-wrapper.wide ul.articles-bundle-list.mode-cells li.item.type-extra,
.ym-wrapper.wide ul.articles-bundle-list.mode-cells li.item.type-hero {
  --item-width: 50%;
}
/* subgroups inventory */
article.teaser {
  --section-picture-width: var(--item-width);
  --section-picture-padding: var(--item-padding);
}
/* */
ul.mode-cells > li.item.res-availability {
  --article-height: 372px;
  --section-availability-height: 20px;
  --section-availability-bottom: 8px;
  --section-prices-bottom: calc(
    var(--section-availability-height) + var(--section-availability-bottom)
  );
}

ul.mode-cells > li.item.res-buttons {
  --article-height: 372px;
  --section-buttons-height: var(--button-normal-height);
  --section-buttons-bottom: 8px;
  --section-prices-bottom: calc(
    var(--section-buttons-height) + var(--section-buttons-bottom) + 2px
  );
}

ul.mode-cells > li.item.res-availability.res-buttons {
  --article-height: 372px;
  --section-availability-bottom: calc(
    var(--section-buttons-height) + var(--section-buttons-bottom)
  );
  --section-prices-bottom: calc(
    var(--section-availability-height) + var(--section-availability-bottom) +
      4px
  );
}

section.data-article-vote > div > div.article-info section.picture,
ul.mode-cells > li.item {
  --section-picture-height: 195px;
}

ul.mode-cells > li.item {
  --section-after-picture-height: calc(
    var(--article-height) - var(--section-picture-height)
  );

  width: var(--item-width);
  padding: var(--item-padding);
}

/*
  ul.mode-cells li.item article.variant {
  }
  */

ul.mode-cells > li {
  /*overflow: hidden; OFF because of the included div.stamp, which can have negative margins */
  position: relative;
  line-height: 1.2em;
}
/* .view-cell takes the whole height of the parent container with position: relative and overflow: hidden */
ul.mode-cells > li.item > div {
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}
ul.articles-bundle-list.mode-cells {
  margin-top: -1%;
  margin-left: -1%;
  margin-right: -1%;
  width: 102%;
}
ul.articles-bundle-list.mode-cells li.item {
  margin: 0;
  min-height: auto;
}

ul.articles-bundle-list.mode-cells li.item article {
  height: var(--article-height);
  /* Do not make 'overflow: hidden;' here because of cell stamp pictures */
}
.ym-wrapper.wide ul.articles-bundle-list.mode-cells li.item.type-extra article,
.ym-wrapper.wide ul.articles-bundle-list.mode-cells li.item.type-hero article {
  overflow: hidden;
}

ul.articles-bundle-list.mode-cells > li.item article {
  display: block;
  position: relative;
}

/** .picture **/
ul.articles-bundle-list.mode-cells > li.item .picture {
  height: var(--section-picture-height);
  padding: 0;
  display: block;
}

ul.articles-bundle-list.mode-cells > li.item .picture {
  padding: 8px 4px 8px 4px;
}
/*
  ul.articles-bundle-list.mode-cells > li.item .picture > a {

  }
  */

ul.articles-bundle-list.mode-cells
  > li.item
  .picture
  div.no-picture
  i[class^="fa"] {
  font-size: 140px;
}

/* pictures are centered horizontal */
ul.mode-cells > li.item .picture {
  margin: 0 auto;
  text-align: center;
  background-color: var(--theme-color-white);
}

ul.mode-rows > li.item .picture a,
ul.mode-rows > li.item .picture img,
ul.mode-cells > li.item .picture a,
ul.mode-cells > li.item .picture img {
  vertical-align: middle;
}

/* important for vertical centering of the "no-picture" div by Google Chrome browser */
ul.mode-cells > li.item .picture a.no-picture {
  display: block;
  height: inherit;
  width: 100%;
  max-width: 100% !important;
  max-height: 100% !important;
}
ul.mode-cells > li.item .picture a.container-center.no-picture {
  display: grid;
}

/** .after-picture */
ul.articles-bundle-list.mode-cells li.item article > .after-picture {
  /* border: 1px solid green; */
  position: absolute;
  width: 100%;
  bottom: 0;

  background-image: -webkit-linear-gradient(
    var(--theme-color-dark-b1),
    var(--theme-color-white)
  );
  background-image: -moz-linear-gradient(
    var(--theme-color-dark-b1),
    var(--theme-color-white)
  );
  background-image: linear-gradient(
    var(--theme-color-dark-b1),
    var(--theme-color-white)
  );
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=var(--theme-color-dark-b1), endColorstr=var(--theme-color-white));
}

ul.articles-bundle-list.mode-cells li.item article > .after-picture,
ul.articles-bundle-list.mode-cells li.item article > .after-picture > div {
  /*min-height: var(--section-after-picture-height);*/
  height: var(--section-after-picture-height);
  /* 04.04.2022 */
}

ul.articles-bundle-list.mode-cells li.item article > .after-picture > div {
  /*border: 1px solid red;*/
  position: relative;
  padding-top: 4px;
}
/* END new styling of ".picture" and ".after-picture"*/

.ym-column.type-1-3 ul.articles-bundle-list.mode-cells,
.ym-column.type-3-1 ul.articles-bundle-list.mode-cells {
  float: left;
}

/* mode-cells */
ul.articles-bundle-list.mode-cells {
  margin-top: -1%;
  margin-left: -1%;
  margin-right: -1%;
  width: 102%;
}
section.alternate.simple ul.articles-bundle-list.mode-cells {
  margin-top: 0%;
  margin-left: 0%;
  margin-right: 0%;
  width: 100%;
}

.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-extra
  > article
  > section.picture,
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-hero
  > article
  > section.picture {
  height: var(--article-height);
  padding: 0;
  overflow: hidden;
}

.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-extra
  > article
  > section.picture
  img,
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-hero
  > article
  > section.picture
  img {
  width: 100% !important;
  height: auto !important;
  padding: 0;
}

.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-extra
  > article
  > section.picture
  .container-center
  > img,
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-hero
  > article
  > section.picture
  .container-center
  > img {
  width: auto !important;
}

.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-extra
  article
  div.after-picture,
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-hero
  article
  div.after-picture {
  width: 50%;
  height: 150px;
  position: absolute;
  background: var(--theme-color-white);
  opacity: 0.9;
}
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-extra
  article
  div.after-picture {
  border: 1px solid var(--theme-color-white);
  bottom: 2%;
  right: 2%;
}
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-hero
  article
  div.after-picture {
  border: 1px solid var(--theme-color-white);
  top: 2%;
  left: 2%;
}
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-extra
  article
  div.after-picture
  > div,
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells
  li.item.type-hero
  article
  div.after-picture
  > div {
  position: relative;
  height: 100%;
}

/** availability states **/
span.availability.state-1 i[class^="fa"] {
  color: #0a0;
}
span.availability.state-1 i.fa-duotone {
  --fa-primary-color: #0a0;
  --fa-secondary-color: #0a0;
}

span.availability.state-2 i[class^="fa"] {
  color: #fece2f;
}
span.availability.state-2 i.fa-duotone {
  --fa-primary-color: #fece2f;
  --fa-secondary-color: #fece2f;
}

span.availability.state-3 i[class^="fa"] {
  color: #a00;
}
span.availability.state-3 i.fa-duotone {
  --fa-primary-color: #a00;
  --fa-secondary-color: #a00;
}

span.availability.state-discontinued i[class^="fa"] {
  color: #00a;
}
span.availability.state-discontinued i.fa-duotone {
  --fa-primary-color: #00a;
  --fa-secondary-color: #00a;
}

/* @package Accessibility : availability legend contrast scheme */
:root[data-theme="contrast"] span.availability.state-1 i[class^="fa"],
:root[data-theme="contrast"] span.availability.state-2 i[class^="fa"],
:root[data-theme="contrast"] span.availability.state-3 i[class^="fa"],
:root[data-theme="contrast"]
  span.availability.state-discontinued
  i[class^="fa"] {
  color: var(--theme-color-black);
}
:root[data-theme="contrast"] span.availability.state-1 i.fa-duotone,
:root[data-theme="contrast"] span.availability.state-2 i.fa-duotone,
:root[data-theme="contrast"] span.availability.state-3 i.fa-duotone,
:root[data-theme="contrast"] span.availability.state-discontinued i.fa-duotone {
  --fa-primary-color: var(--theme-color-black);
  --fa-secondary-color: var(--theme-color-black);
}

.icon-title .title > span.availability.state-discontinued {
  padding-left: 5px;
}

/** availability Legend Table **/
.availabilityLegendTable table .col-2 {
  padding-left: 8px;
}

.availabilityLegendTable table tr.state-discontinued {
  display: none;
}

.availabilityLegendTable.state-discontinued table tr.state-discontinued {
  display: table-row;
}

/** buy-price **/
ul.articles-bundle-list > li.item section.prices .buy-price {
  font-weight: 600;
}

/** article()->cell() **/
/* .view-cell takes the whole height of the parent container with position: relative and overflow: hidden */
ul.mode-cells > li.item > div {
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

/* description */
ul.articles-bundle-list.mode-cells > li.item section.description {
  line-height: 14px;
  font-size: 14px;
  font-weight: 400;

  height: var(--section-description-height);
  overflow: hidden;
}

/* redefine me */
/*
  ul.articles-bundle-list.mode-cells > li.item section.description a {
  }
  */

ul.articles-bundle-list.mode-cells > li.item .after-picture > div > section {
  padding: 0px 8px;
}

/* prices at the cells bottom */
ul.articles-bundle-list.mode-cells > li.item .prices {
  position: absolute;
  /*width: 100%;*/
  bottom: var(--section-prices-bottom);

  font-size: 12px;
  right: 0;
  left: auto;
  width: auto;

  display: grid;
  grid-template-columns: 1fr;
}

ul.articles-bundle-list.mode-cells > li.item .prices > div.price-block {
  justify-self: end;
  align-self: end;
}

ul.articles-bundle-list.mode-cells > li.item .prices div {
  font-size: 12px;
  line-height: 12px;
}

ul.articles-bundle-list.mode-cells > li.item .prices div.standard-price {
  font-size: 11px;
  line-height: 11px;
  text-align: right;
  text-decoration: line-through;
}
ul.articles-bundle-list.mode-cells
  > li.item
  .prices
  div.priceInfoMore
  > .priceInfoVat {
  font-size: 11px;
  line-height: 11px;
  text-align: right;
}

/*** variants ***/
ul.mode-cells > li > article .price-block > .price-value {
  height: var(--section-prices-price_value-height);
  padding-top: 6px;
  text-align: right;
  color: var(--theme-color-price-value);
}
ul.mode-cells > li > article .price-block.action-price > .price-value {
  color: var(--theme-color-action-price-value);
}

ul.mode-cells > li > article .price-block > .price-value > .value {
  font: normal normal normal 24px/20px var(--font-family);
  font-weight: 600;
}



/*** pictures stamps ***/
ul.articles-bundle-list.mode-rows > li.item .picture .stamp,
ul.articles-bundle-list.mode-cells > li.item .picture .stamp,
article.view-details .picture .stamp,
section.data-article-vote .picture .stamp {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

section.data-article-vote .picture .stamp {
  display: none;
  /* 07.04.2022 EXPERIMENTAL OFF: Hide the pictures stamp while user are reviewing an article */
}

ul.articles-bundle-list.mode-rows > li.item .picture .stamp > img,
ul.articles-bundle-list.mode-cells > li.item .picture .stamp > img,
article.view-details .picture .stamp > img {
  width: 100%;
}

.stamp.pos-top {
  top: 0;
}
.stamp.pos-middle {
  top: 50%;
  /*left: 50%;*/
  /*transform: translate(-50%, -50%);*/
  transform: translateY(-50%);
}
.stamp.pos-bottom {
  bottom: 0;
}

.stamp.pos-left {
  left: 0;
}
.stamp.pos-center {
  left: 50%;
  transform: translateX(-50%);
}
.stamp.pos-right {
  right: 0;
}

.stamp.pos-middle.pos-center {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* prices at the cells bottom */
ul.articles-bundle-list.mode-cells
  li.item.res-availability.res-buttons
  article.variant
  section.availability {
  display: none;
}

/*bottom: 20px;*/
/* prices may be moved down if there are no buttons */
/*
  ul.articles-bundle-list.mode-cells li.item.res-availability.res-buttons article.not-allowed-for-shopcart section.prices {
  }
  */

ul.articles-bundle-list.mode-cells li.item section.availability {
  position: absolute;
  width: 100%;
  height: var(--section-availability-height);
  bottom: var(--section-availability-bottom);

  font-size: 0.8em;
  border: 0px solid red;
}

ul.articles-bundle-list.mode-cells li.item section.availability div.icon-title {
  position: relative;
  border: 0px solid green;
}

ul.articles-bundle-list.mode-cells
  li.item
  section.availability
  div.icon-title
  > div.icon {
  float: left;
  margin-left: 2px;
  width: 1.2em;
}

ul.articles-bundle-list.mode-cells li.item section.buttons {
  position: absolute;
  height: var(--section-buttons-height);
  bottom: var(--section-buttons-bottom);
}

ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  > ul.ym-grid,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid {
  border: 0px solid red;
  margin: 0 0 0 0;
  padding: 0;
  width: 100%;
}

ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li {
  margin: 0;
}
ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li.ym-gr,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li.ym-gr {
  padding: 0 0px 0 3px;
}

ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li {
  width: 38%;
}

ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li.ym-gbox:first-child {
  width: 100%;
  margin-left: 0;
  padding: 0 0px 0 0px;
}

/*
  ul.articles-bundle-list.mode-cells li.item.res-buttons section.buttons > ul.ym-grid > li.ym-gbox:FIRST-CHILD {

  }
  */

ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid {
  margin: 0;
}
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid
  > li {
  width: 100%;
  padding: 0 0px;
}

/*ul.articles-bundle-list.mode-rows li.item.res-buttons section.buttons > ul.ym-grid > li button,*/
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li
  button {
  width: 100%;
}

ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-and-button-text,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-unit-button-text {
  border: 0px solid green;
  width: 100%;
  margin: 0;
  padding: 0;
}

ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-and-button-text
  > ul,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-unit-button-text
  > ul {
  border: 0px solid blue;
  width: 100%;
  margin: 0;
  padding: 0;
}

ul.mode-cells > li.item .prices div.article-number {
  white-space: nowrap;
  display: none;
}

ul.articles-bundle-list.mode-cells > li.item .prices.has-item-number {
  width: 100%;
  /* use it if div.article-number is visible */
  grid-template-columns: 1fr 1fr;
  /* use it if div.article-number is visible */
}
ul.mode-cells > li.item .prices.has-item-number div.article-number {
  display: block;
  white-space: normal;
}

/*
  ul.mode-cells > li.item .prices div.article-number > span.label {
  }
  */
ul.mode-cells > li.item .prices div.article-number > span.label:after {
  content: ": ";
}
/*
  ul.mode-cells > li.item .prices div.article-number > span.article-number {

  }
  */
ul.mode-cells > li.item .prices > .price-block > .visible-for-b2b,
ul.mode-cells > li.item .prices > .price-block > .price-with-unitPriceName {
  display: block;
  text-align: right;
  font-size: 12px;
  font-weight: 400;
  color: var(--theme-color-price-with-unit);
}
ul.mode-cells > li.item .prices > .price-block.action-price > .visible-for-b2b,
ul.mode-cells
  > li.item
  .prices
  > .price-block.action-price
  > .price-with-unitPriceName {
  color: var(--theme-color-action-price-with-unit);
}
/*
  ul.mode-cells > li.item .prices .net-price {

  }

  ul.mode-cells > li.item .prices .gross-price {

  }
  */

/* add to noted list icon */
ul.articles-bundle-list > li.item .noted-list i[class^="fa"] {
  color: #383838;
}

ul.articles-bundle-list > li.item .noted-list.delete i[class^="fa"] {
  color: #aaa;
}

ul.mode-cells > li.item .order-lists.is-waiting {
  display: block;
}

/* 19.06.2024 EXPERIMENTAL OFF
  html.touch-screen-mode ul.mode-cells > li.item .noted-list,
  html.touch-screen-mode ul.mode-cells > li.item div.order-lists {
	  display: block;
	  cursor: pointer;
  }
  html.touch-mode-off ul.mode-cells > li.item:hover .noted-list,
  html.touch-screen-detected ul.mode-cells > li.item .noted-list,
  html.touch-mode-off ul.mode-cells > li.item:hover div.order-lists,
  html.touch-screen-detected ul.mode-cells > li.item div.order-lists {
	  display: block;
	  cursor: pointer;
  }
  */
/* 19.06.2024 EXPERIMENTAL ON */
html.touch-mode-off
  ul.mode-cells
  > li.item:hover
  :where(.noted-list, div.order-lists) {
  display: block;
  cursor: pointer;
}

ul.mode-cells > li.item .noted-list i[class^="fa"] {
  font-size: 15px;
}

/* cell with spinner (ui) */
ul.mode-cells .input-and-button-text .ui-spinner,
ul.mode-cells .input-unit-button-text .ui-spinner {
  height: 28px;
  /*font-size: 1em;*/
  font-size: 14px;
  /*border: 1px solid #174292;*/
}

/** article()->rows()  **/
ul.mode-rows > li.item {
  font-size: 1rem;
  --item-width: 100%;
  --item-padding: 0;
  /* --article-height: 170px; */
  --article-height: 10.625em;
  --section-description-height: 36px;
  --section-prices-bottom: 1px;
  --section-prices-price_value-height: 30px;
  --section-availability-height: 0px;
  --section-availability-bottom: 0px;
  --section-buttons-height: 0px;
  --section-buttons-bottom: 0px;

  --section-picture-height: calc(var(--article-height) - 2px);
  /* minus border width */
  --section-picture-width: var(--section-picture-height);

  --section-after-picture-height: var(--article-height);

  width: var(--item-width);
  padding: var(--item-padding);
  position: relative;
  background: var(--theme-color-white);
  margin-bottom: 1.5em;
}
ul.mode-rows > li.item.res-availability {
  --section-availability-height: 20px;
  --section-availability-bottom: 8px;
  --section-prices-bottom: calc(
    var(--section-availability-height) + var(--section-availability-bottom)
  );
}

ul.mode-rows > li.item.res-buttons {
  --section-buttons-height: var(--button-normal-height);
  --section-buttons-bottom: 8px;
  --section-prices-bottom: calc(
    var(--section-buttons-height) + var(--section-buttons-bottom) + 2px
  );
}

ul.mode-rows > li.item.res-availability.res-buttons {
  --section-availability-bottom: calc(
    var(--section-buttons-height) + var(--section-buttons-bottom)
  );
  --section-prices-bottom: calc(
    var(--section-availability-height) + var(--section-availability-bottom) +
      4px
  );
}

ul.mode-rows > li.item {
  container-name: modeRowsLi;
  container-type: inline-size;
}

ul.mode-rows > li.item > article {
  display: grid;
  grid-template-areas: "order-lists picture after-picture";
  grid-template-columns: 0 var(--section-picture-width) calc(
      100% - var(--section-picture-width)
    );
  grid-template-rows: var(--section-picture-height);
  height: var(--article-height);
}

/*
  @media (max-width: 725px) {
    ul.mode-rows > li.item {
      --article-height: auto;
    }
  }*/

/*** picture ***/
ul.mode-rows > li.item > article > .picture {
  grid-area: picture;
}

/*** picture, no-picture ***/
ul.mode-rows > li.item > article > .picture div.no-picture {
  font-size: 1em;
  text-align: center;
}
ul.mode-rows > li.item > article > .picture div.no-picture > span {
  position: static;
  transform: none;
}
ul.mode-rows > li.item > article > .picture div.no-picture i[class^="fa"] {
  font-size: 140px;
}
ul.mode-rows > li.item > article > .picture div.no-picture .label {
  display: none;
  /* OFF the caption "No picture available". By customizings it may be switched on. */
}

/*** after-picture ***/
ul.mode-rows > li.item > article > .after-picture {
  grid-area: after-picture;
  justify-self: stretch;
}

/*** after-picture > div ***/
ul.mode-rows > li.item > article > .after-picture > div {
  display: flex;
  height: var(--article-height);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  --description-height: auto;
  --prices-height: auto;
  --buttons-height: var(--button-normal-height);
  --availability-height: var(--buttons-height);
  --distance: 10px;
  padding: var(--distance);
}

ul.mode-rows > li.item > article.res-buttons > .after-picture > div {
  justify-content: flex-end;
}

ul.mode-rows
  > li.item
  > article.res-buttons.res-availability
  > .after-picture
  > div {
  justify-content: space-between;
}

ul.mode-rows > li.item > article > .after-picture > div > .description {
  border: 0px solid black;
  width: 60%;
}

ul.mode-rows > li.item > article > .after-picture > div > .prices {
  width: 39%;
  text-align: right;
  display: flex;
  flex-direction: column;
}

@container modeRowsLi (width < 31.25rem) {
  ul.mode-rows > li.item > article {
    grid-template-areas:
      "order-lists picture"
      "after-picture after-picture";
    --section-picture-width: 100%;
    grid-template-columns: 0 100%;
    height: auto;
  }

  ul.mode-rows > li.item > article > .after-picture > div > .description {
    width: 100%;
  }

  ul.mode-rows > li.item > article > .after-picture > div > .prices {
    width: 100%;
  }
}

ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .lazy-loading {
  margin-top: var(--distance);
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .lazy-loading
  > div {
  text-align: right !important;
}

ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .article-number
  > .label {
  padding-right: 10px;
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .article-number
  > .label::after {
  content: ": ";
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .article-number
  > .article-number {
  font-weight: 600;
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block {
  padding-top: 10px;
  display: block;
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .price-with-unitPriceName {
  font-size: 0.75rem;
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .price-value {
  padding: 6px 0 0 0;
  color: var(--theme-color-price-value);
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .price-value
  > .value {
  font: normal normal normal 1.5rem/1.25rem var(--font-family);
  font-weight: 600;
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .priceInfoMore
  > .priceInfoVat {
  font-size: 0.6875rem;
  /*font-style: italic;*/
}

ul.mode-rows > li.item > article > .after-picture > div > .availability {
  border: 0px solid green;
  align-self: flex-end;
  /* width: 40%; */ /* 16.05.2025 EXPERIMENTAL OFF */
  height: var(--availability-height);
  line-height: var(--button-normal-height);
}
ul.mode-rows > li.item > article > .after-picture > div > .availability > * {
  width: auto;
}
ul.mode-rows
  > li.item
  > article
  > .after-picture
  > div
  > .availability
  > .icon-title
  > .title {
  padding-left: 10px;
}

ul.mode-rows > li.item > article > .after-picture > div > .buttons {
  border: 0px solid blue;
  align-self: flex-end;
  /* this block aligned to bottom */
  width: 60%;
  max-width: 280px;
  height: var(--buttons-height);
}
ul.mode-rows > li.item > article > .after-picture > div > .buttons .ym-grid {
  width: auto;
}

@media (max-width: 50rem) {
  /* 725px , 800px */
  ul.mode-rows > li.item > article.res-buttons {
    --article-height: 15.625rem; /* 250px */
  }

  ul.mode-rows > li.item > article > .after-picture > div > .availability {
    width: 100%;
  }

  ul.mode-rows > li.item > article > .after-picture > div > .buttons {
    width: 100%;
    max-width: none;
  }
}

/*** order-lists ***/
ul.mode-rows > li.item > article > .order-lists {
  grid-area: order-lists;
  position: absolute;
  top: 3px;
  left: 4px;
}
html.touch-mode-off ul.mode-rows > li.item:hover div.order-lists {
  display: block;
  cursor: pointer;
}

/**** END mode rows ****/

ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li {
  margin: 0px;
}

ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input,
ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.input {
  width: 33%;
}

ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button {
  width: 66.9%;
}

ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.unit {
  line-height: var(--section-buttons-height);
  height: var(--section-buttons-height);
  font-size: 14px;
  overflow: hidden;
  /*width: calc(100% - 33% - 42%);*/
}

ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.button {
  width: 41.9%;
  float: right;
}

ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input
  input,
ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.input
  input {
  width: 80%;
  text-align: center;
  position: relative;
  top: -1px;
  left: -2px;
}

ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input
  .ui-spinner.minus-plus
  input,
ul.articles-bundle-list
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.input
  .ui-spinner.minus-plus
  input {
  position: static;
  margin-left: 10%;
}

/*height: 300px;*/
/*
  ul.articles-bundle-list.mode-cells article.article.users-input {
  }
  */
/*
  ul.articles-bundle-list.mode-cells > li.item section.buttons div.input-and-button-text,
  ul.articles-bundle-list.mode-cells > li.item section.buttons div.input-unit-button-text {

  }
  */
/* the input "count" is not visible if it included in another ul.ym-grid > li */
ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  ul.ym-grid
  > li
  div.input-and-button-text
  > ul
  > li.input,
ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  ul.ym-grid
  > li
  div.input-unit-button-text
  > ul
  > li.input,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  ul.ym-grid
  > li
  div.input-and-button-text
  > ul
  > li.input,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  ul.ym-grid
  > li
  div.input-unit-button-text
  > ul
  > li.input {
  display: none;
}
/* the button is the only input control it included in another ul.ym-grid > li */
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  ul.ym-grid
  > li
  div.input-and-button-text
  > ul
  > li.button,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  ul.ym-grid
  > li
  div.input-unit-button-text
  > ul
  > li.button {
  width: 100%;
}

ul.articles-bundle-list.mode-cells > li.item section.buttons,
ul.articles-bundle-list.mode-cells > li.item section.buttons ul {
  width: 100%;
  margin: 0;
  padding: 0px;
}

ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li {
  margin: 0;
  padding: 0 3px;
}
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button {
  padding: 0 0px 0 0px;
}

ul.articles-bundle-list.mode-cells > li.item section.buttons input,
ul.articles-bundle-list.mode-cells > li.item section.buttons li button {
  margin: 0;
}
ul.articles-bundle-list.mode-rows > li.item section.buttons li button,
ul.articles-bundle-list.mode-cells > li.item section.buttons li button {
  width: 100%;
}
/*
  .ui-accordion ul.articles-bundle-list.mode-cells > li.item section.buttons li button {
  }
  */

html.touch-screen-mode
  .ui-accordion
  ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  li
  button {
  font-size: 12px;
}
ul.articles-bundle-list.mode-cells > li.item section.buttons input {
  font-size: 14px;
}

ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.button {
  text-align: right;
}

/** no picture **/
div.no-picture {
  position: relative;
  width: 100%;
}

div.no-picture i[class^="fa"] {
  /* Good browsers */
  opacity: 0.2;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=20)";
  /* IE 5-7 */
  filter: alpha(opacity=20);
  /* Netscape */
  -moz-opacity: 0.2;
  /* Safari 1.x */
  -khtml-opacity: 0.2;
}

section.mode-cells section.picture div.no-picture > span, /* 04.07.2025 EXPERIMENTAL ON */
section.picture div.no-picture > div.label {
  position: absolute;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #909090;
}

section.mode-cells section.picture div.no-picture, /* 04.07.2025 EXPERIMENTAL ON */
ul.mode-cells section.picture div.no-picture {
  font-size: 1em;
}

section.mode-cells section.picture div.no-picture > span {
  font-size: 5em;
}

/* section.mode-cells section.picture div.no-picture > span, */ /* 04.07.2025 EXPERIMENTAL ON */
ul.mode-cells section.picture div.no-picture > span {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, 1em);
}

ul.mode-cells section.picture .container-center > div.no-picture > span {
  position: static;
  transform: none;
}

ul.mode-cells.mini section.picture div.no-picture {
  top: 0px;
}

ul.mode-cells section.picture div.no-picture i[class^="fa"] {
  font-size: 110px;
}


ul.mode-cells section.picture div.no-picture > div.label {
  font-size: 1.2em;
  padding: 0 15%;
  display: none;
}

ul.mode-cells.micro > li.item .picture {
  width: 46px;
  height: 46px;
  padding: 0px;
}


/**** Subgroups inventory ****/
nav.subgroups-inventory {
  background: var(--theme-color-white);
  margin-left: 0;
}


/*** Subgroups inventory: rendering with 'section-div' ***/

section.subgroups-inventory.mode-cells {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;

  --grid-gap: var(--layout-columns-gap);
  grid-gap: var(--grid-gap);
	padding-bottom: var(--grid-gap);

  width: 100%;

  --item-height: 11.25rem;
  /* --item-section-picture-height: 86%; */
  --item-section-picture-height: var(--item-height); /* 2025-08-29 EXPERIMENTAL ON */
}


@container containerMainContent (width < 59.375rem) { /* ~ 950px */
  div.ym-column > div > div.ym-cbox section.subgroups-inventory.mode-cells {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@container containerMainContent (width < 46.875rem) { /* ~ 750px */
  div.ym-column > div > div.ym-cbox section.subgroups-inventory.mode-cells {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@container containerMainContent (width < 40.625rem) { /* ~ 650px */
  div.ym-column > div > div.ym-cbox section.subgroups-inventory.mode-cells {
    grid-template-columns: 1fr 1fr;
  }
}

@container containerMainContent (width < 28.125rem) { /* ~ 450px */
  div.ym-column > div > div.ym-cbox section.subgroups-inventory.mode-cells {
    grid-template-columns: 1fr;
  }
}

section.subgroups-inventory.mode-cells > div {
  margin: 0;
  border: 0;
}

section.subgroups-inventory.mode-cells > div > article {
  background: var(--theme-color-white);
  width: 100%;
  min-height: var(--item-height);
  position: relative;
}

section.subgroups-inventory.mode-cells > div > article {
  position: relative;
  height: var(--item-height);
  overflow: hidden;
}

section.subgroups-inventory.mode-cells > div > article > .text {
  background: var(--theme-color-white) none repeat scroll 0 0;
  bottom: 0;
  position: absolute;
  width: 100%;
  text-align: center;
/*
  padding: 2px 0 2px; */
}

/* all pictures placeholders have the same height -> article names on the same line */
section.subgroups-inventory.mode-cells > div > article > .picture {
  height: var(--item-section-picture-height);
  padding: 4px;
}

section.subgroups-inventory.mode-cells > div > article > .picture > a,
section.subgroups-inventory.mode-cells > div > article > .picture > a > img {
  max-width: 100%;
  max-height: var(--item-section-picture-height) !important;
}

section.subgroups-inventory.mode-cells > div > article > .picture > a > img {
  scale: var(--img-scale);
}

section.subgroups-inventory.mode-cells > div > article > .picture .no-picture {
  width: 100%;
}

section.subgroups-inventory.mode-cells > div > article > .picture .no-picture div.label {
  display: none;
}



/**** View Details ****/

article.view-details section.picture div.no-picture {
  text-align: center;
}

article.view-details section.picture div.no-picture i[class^="fa"] {
  font-size: 16.25rem;
}

article.view-details section.picture div.no-picture > div.label {
  font-size: clamp(33.6px, 2.1em, 45px);

  padding: 0 15%;
  top: 42%;
}

/** section.toolbar **/
section.toolbar {
  position: relative;
  --items-gap: 5px;

  width: 100%;
}
/* 30.06.2025 EXPERIMENTAL OFF
section.toolbar ul li {
  float: right;
  margin-left: 0;
} */

/* 2025-07-07 EXPERIMENTAL ON */
div.layout-title > div:last-child section.toolbar {
  display: flex;
  justify-content: flex-end;
}
div.layout-title > div:last-child section.toolbar > ul {
  width: auto;
}

/** buttons-template (f.e. prev <-> next buttons) **/
/** section.buttons-template **/
section.buttons-template {
  container-type: inline-size;

  margin-top: 3rem;
  margin-bottom: 0em;

  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

section.buttons-template > div {
  width: auto;
}

 @container (width < 35rem) {
  section.buttons-template {
    flex-direction: column-reverse;
  }

  section.buttons-template > div {
    width: 100%;
  }

  section.buttons-template > div button.ui-button {
    width: 100%;
 }
}

html.touch-screen-mode section.buttons-template.for-wizard.button-back {
  display: none;
}

.ym-grid.buttons-template > .ym-gr {
  text-align: right;
}

/** **/
section.buttons-template.for-wizard > div {
  margin: 0;
  padding: 0;
}
section.buttons-template.for-wizard section.toolbar.for-wizard ul {
  margin: 0;
  padding: 0;
}
section.buttons-template.for-wizard section.toolbar.for-wizard ul li.ym-gl {
  float: left;
  margin: 0;
  padding: 0;
}
/*** search forms ***/
/** form.text-submit **/
form.text-submit.li-value-div {
  --element-width: 250px;
  --element-height: 35px;
  --column-value-width: 38px;
  --column-label-width: calc(var(--element-width) - var(--column-value-width));
  /*--border-radius: calc(var(--element-height) / 2);*/
  --border-radius: 2px;
  --padding-left: ;
}
form.text-submit.li-value-div ul.table-2-cols > li {
  position: relative;
  height: var(--element-height);
  padding: 0;
}

form.text-submit.li-value-div ul.table-2-cols > li.label {
  width: var(--column-label-width);
  padding-left: var(--border-radius);
}
form.text-submit.li-value-div ul.table-2-cols > li.value {
  width: var(--column-value-width);
  /*padding-left:  calc(var(--border-radius) / 2);*/
  /*padding-right: calc(var(--border-radius) / 2);*/
}

form.text-submit.li-value-div ul.table-2-cols li.ui-corner-left {
  border-radius: var(--border-radius) 0 0 var(--border-radius);
}
form.text-submit.li-value-div ul.table-2-cols li.ui-corner-right {
  border-radius: 0 var(--border-radius) var(--border-radius) 0;
}

form.text-submit.li-value-div ul.table-2-cols li input[type="date"],
form.text-submit.li-value-div ul.table-2-cols li input[type="email"],
form.text-submit.li-value-div ul.table-2-cols li input[type="number"],
form.text-submit.li-value-div ul.table-2-cols li input[type="text"] {
  border: 0;
}

/* input[type="text"] */
form.text-submit.li-value-div ul.table-2-cols li.ui-corner-left input {
  padding: 0;
  position: absolute;
  top: 50%;
  left: calc(var(--border-radius) + 4px);
  transform: translateY(-52%);
}
/* icon */
form.text-submit.li-value-div ul.table-2-cols li.ui-corner-right div {
  padding: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

form.text-submit.li-value-div ul.table-2-cols li.label {
  padding-right: 0em;
  border-right: 0;
}

form.text-submit.li-value-button ul.table-2-cols li.value {
  padding-top: 0;
  padding-bottom: 0;
  padding-right: 0;
}

form.text-submit.li-value-button ul.table-2-cols li.value button {
  margin: 1px 0 0 0;
}

form.text-submit ul.table-2-cols > li.value > div {
  /* Good browsers */
  opacity: 0.8;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
  /* IE 5-7 */
  filter: alpha(opacity=80);
  /* Netscape */
  -moz-opacity: 0.8;
  /* Safari 1.x */
  -khtml-opacity: 0.8;
}

html.touch-mode-off form.text-submit ul.table-2-cols > li.value > div:hover,
section.input-focused form.text-submit ul.table-2-cols > li.value > div {
  /* Good browsers */
  opacity: 1;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  /* IE 5-7 */
  filter: alpha(opacity=100);
  /* Netscape */
  -moz-opacity: 1;
  /* Safari 1.x */
  -khtml-opacity: 1;
}

/** section.groups-articles ("recently searched groups") **/
section.groups-articles ul.groups-articles-list > li {
  overflow: hidden;
  background: none;
  border: 0px solid var(--theme-color-white);
}

section.groups-articles div.groups-articles-title:after {
  /*content: ':';*/
  content: "";
}
section.groups-articles ul.groups-articles-list > li > article {
  border: 0;
}
section.groups-articles article.article-group section.picture {
  max-width: 38%;
  height: 60px;
  text-align: center;
  float: left;
  padding: 0 0.7em 0 0.5em;
}

section.groups-articles article.article-group section.picture img {
  max-height: 60px;
  vertical-align: middle;
}

section.groups-articles article.article-group section.picture div.no-picture {
  display: none;
}

section.groups-articles article.article-group section.text {
  display: table;
  float: left;
  height: 58px;
  margin-left: 0;
  /*width: 59%;*/
}
section.groups-articles article.article-group section.text div.wrap {
  display: table-cell;
  font-size: 1.2em;
  font-style: italic;
  height: 58px;
  vertical-align: middle;
}

/** section.groups-manufactors ("manufactors") **/
section.groups-manufactors ul.groups-articles-list > li {
  border: 0;
  background: none;
}

section.groups-manufactors ul.groups-articles-list > li {
  overflow: hidden;
}

section.groups-manufactors ul.groups-articles-list > li > article {
  border: 0;
}

section.groups-manufactors div.groups-articles-title:after {
  content: ":";
}

section.groups-manufactors article.article-group section.picture {
  /*max-width: 38%;*/
  height: 60px;
  text-align: center;
  /*float: left;*/
  padding: 0;
}

section.groups-manufactors article.article-group section.picture img {
  max-height: 60px;
  vertical-align: middle;
}

/*
  section.groups-manufactors article.article-group section.picture div.no-picture {

  }
  */

section.groups-manufactors
  article.article-group
  section.picture
  div.no-picture
  i[class^="fa"] {
  font-size: 60px;
}

section.groups-manufactors
  article.article-group
  section.picture
  div.no-picture
  div.label {
  top: 32%;
}

section.groups-manufactors article.article-group section.text {
  display: none;
  /*display: table;
	float: left;
	height: 58px;
	margin-left: 0;*/
}
section.groups-manufactors article.article-group section.text div.wrap {
  height: 58px;
  display: table-cell;
  vertical-align: middle;
}

section.groups-manufactors article.article-group.noPicture section.picture {
  display: none;
}

section.groups-manufactors article.article-group.noPicture section.text {
  display: block;
  height: 58px;
  margin: 0;
}

section.groups-manufactors
  article.article-group.noPicture
  section.text
  div.wrap {
  height: 58px;
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  width: 230px;
}

/** section.alternate.preview **/
/*
  section.alternate.preview {

  }
  */
section.alternate.preview.page-teaser,
section.alternate.preview.page-introduction {
  margin-top: 1em;
}

/** section.agent-toolbar **/
/*
  section.agent-toolbar {

  }
  */

section.agent-toolbar ul.agent-info li {
  border: 0px solid;
  margin-left: 0;
}

section.agent-toolbar ul.agent-info li div.vertreter.not-assigned {
  color: #a00;
}

section.agent-toolbar .ym-wbox {
  padding: 1em 0;
}

section.agent-toolbar div.content > .col-2 {
  text-align: right;
}

/*** section.agent ***/
html.touch-screen-mode.agent {
  --agent-toolbar-height: 40px;
}
section.agent-toolbar {
  position: fixed;
  top: 0;
  width: 100%;
  /*height: 41px;*/
  height: var(--agent-toolbar-height);
  background: var(--theme-color-white);
  z-index: 2 !important;
}
html.touch-screen-mode section.agent-toolbar {
  z-index: 1 !important;
}
section.agent-toolbar .ym-wbox {
  padding: 11px 0 9px 0;
}
section.agent-toolbar ul.agent-info > li:last-child {
  display: none;
}
/*
  html.touch-screen-mode section.agent-toolbar {

  }
  */

section.agent-toolbar div.ym-grid.content > div > div {
  display: inline-block;
  padding: 0.25em 0.5em;
  white-space: nowrap;
}

section.agent-toolbar div.ym-grid.content > .col-2 > div {
  background: var(--theme-color-bright);
  color: var(--theme-color-bright-opposite);
}
section.agent-toolbar div.ym-grid.content > .col-2 > div > a {
  font-weight: 600;
  color: var(--theme-color-bright-opposite);
}
html.logged-out section.agent-toolbar div.ym-grid.content > .col-2 > div {
  background: var(--theme-color-white);
  color: var(--theme-color-dark);
  font-weight: 400;
}

section.alternate.preview button.free-title {
  width: 100%;
}

/** section.cross-articles **/
#accordionCrossArticles,
#crossArticles,
section.cross-articles {
  margin-top: 2em;
  float: left;
  width: 100%;
}

/** div.field-ajax-fields **/
div.field-ajax-fields div.process {
  display: none;
}

/** jumpTop **/
/*
  a[name="jumptop"].skip {

  }
  */
div.jump-top {
  bottom: 10px;
  height: 36px;
  cursor: pointer;
  display: none;
  position: fixed;
  right: 10px;
  z-index: 100;
}

/* invisible on touch screens because of Safari,
	 which forces doube-tip on it because it stay at the bottom of page and opens toolbar at the bottom of browser */
html.touch-screen-mode div.jump-top {
  z-index: 10000;
  border: 0px solid red;
  display: none;
}
div.jump-top a {
  background: var(--theme-color-white);
  color: #000;
  display: block;
  padding: 8px 12px;
  border: 0px solid red;
}
html.touch-mode-off div.jump-top a:hover {
  background: #eeeeee;
  color: #000;
}

/** layout footer **/
footer {
  text-shadow: none;
}

html.touch-mode-off footer a:hover {
  text-decoration: underline;
}

html.touch-mode-off footer a.dotted:hover {
  text-decoration: none;
}

footer ul.layout-footer > li {
  width: 25%;
}
footer ul.company-contact li,
footer ul.company-opening-hours li,
footer ul.site-links li {
  float: none;
  width: 100%;
}

footer ul.layout-footer li.company-info img {
  height: auto;
  position: relative;
  top: 4px;
  width: 95%;
}

/* footer.additional */
/* footer.additional shop-creator */
footer.additional ul.shop-creator {
  border: 0px solid;
}

footer.additional ul.shop-creator > li.logo-text > ul {
  margin-top: 20px;
  margin-bottom: 10px;
  width: 270px;
}

footer.additional ul.shop-creator > li.logo-text ul > li.text {
  padding-left: 10px;
  color: var(--theme-color-dark);
}

footer.additional ul.shop-creator > li.logo-text ul.y-w > li.text,
footer.additional ul.shop-creator > li.logo-text ul.w-w > li.text {
  color: var(--theme-color-white);
}

footer.additional ul.shop-creator > li.logo-text.align-right {
  position: relative;
  width: 100%;
}

footer.additional ul.shop-creator > li.logo-text.align-right > ul {
  position: absolute;
  right: 0;
  height: 50px;
}

/** Social sharing under ul.shop-creator in the additional footer **/
footer.additional ul.shop-creator > li.social-sharing {
  float: right;
  padding-top: 20px;
  width: auto;
}
ul.social-sharing,
ul.ym-grid.sharing {
  width: auto;
}

ul.ym-grid.social-sharing > li.ym-gl,
ul.ym-grid.sharing > li.ym-gl {
  padding-left: 0px;
  padding-right: 4px;
}
footer.additional ul.shop-creator ul.ym-grid.social-sharing > li.ym-gl,
footer.additional ul.shop-creator ul.ym-grid.sharing > li.ym-gl {
  padding-left: 4px;
  padding-right: 0px;
}

/** social sharing icons **/
div.icon.link > a,
div.icon.link > a > i[class^="fa"] {
  display: block;
  width: 36px;
  height: 36px;
  text-align: center;
  font-size: 36px;
}

div.icon.link > a > i[class^="fa"].normal {
  font-size: 32px;
  line-height: 40px;
}

.ui-dialog i.fa-facebook,
.ui-dialog i.fa-facebook-official,
div.icon.link > a > i.fa-facebook,
div.icon.link > a > i.fa-facebook-official {
  color: #3b5998;
}
div.icon.link > a:hover > i.fa-facebook,
div.icon.link > a:hover > i.fa-facebook-official {
  color: #4273c8;
}

.ui-dialog i.fa-twitter,
.ui-dialog i.fa-twitter-square,
div.icon.link > a > i.fa-twitter,
div.icon.link > a > i.fa-twitter-square {
  color: #1da1f2;
}

div.icon.link > a:hover > i.fa-twitter,
div.icon.link > a:hover > i.fa-twitter-square {
  color: #4ab4f5;
}

/* socal sharing plugin actionvation radio buttons (in ui-dialog) */
ul.activate-plugin-radios li {
  padding-top: 1em;
  float: none;
}

ul.activate-plugin-radios li label {
  cursor: pointer;
  width: 38%;
  min-width: 330px;
  text-align: left;
}

ul.activate-plugin-radios li .ui-checkboxradio-icon {
  top: -1px;
}

/** bbcode **/
.bbcode_bold {
  font-weight: 600;
}

.bbcode_uline {
  text-decoration: underline;
}

.bbcode_italics {
  font-style: italic;
}

/** special icons **/
i.fa-file-pdf-o {
  color: #a00;
}

i.fa-file-image-o {
  color: #0a0;
}

/** div.vote-stars **/
div.vote-stars {
  position: relative;
  top: -2px;
}

div.vote-stars span.star {
  padding-right: 2px;
  font-size: 1.2em;
}

div.vote-stars span.star img.star {
  width: 17px;
}

div.vote-stars span.star i[class^="fa"] {
  color: #0074c7;
}

div.tooltip-title i.fa-star,
div.vote-stars span.star i[class^="fa"] {
  color: var(--theme-color-vote-star);
}
div.vote-stars span.star i.fa-duotone[class^="fa"] {
  --fa-secondary-color: var(--theme-color-vote-star);
}

/*** section.overview.ui-widget ***/
section.overview.ui-widget {
  padding: 4px 4px;
  margin-bottom: 1em;
}

section.overview.ui-widget ul {
  margin: 0;
}

section.overview.ui-widget ul li.icon {
  height: 2em;
  padding-left: 2px;
  width: 45px;
}

section.overview.ui-widget ul li.icon i[class^="fa"] {
  font-size: 2em;
  line-height: 1.1em;
}

section.overview.ui-widget ul li.sub-header {
  width: calc(100% - 50px);
  font-size: 0.85em;
  height: 3em;
  line-height: 2.5em;
  font-weight: 600;
}

/** section.overview.ui-widget positions **/
section.overview.ui-widget ul li.positions,
section.overview.ui-widget ul li.positions table {
  width: 100%;
}

section.overview.ui-widget ul li.positions table {
  font-size: 0.85em;
  margin: 0.4em 0 0 0;
  border: 0;
}

section.overview.ui-widget ul li.positions table td {
  padding: 0;
}

section.overview.ui-widget ul li.positions table .col-1 {
  padding: 0.1em 0.3em;
  text-align: left;
}
section.overview.ui-widget ul li.positions table .col-2 {
  display: none;
}
section.overview.ui-widget ul li.positions table .col-3 {
  padding: 0.1em 0em 0.2em 0;
}

section.overview.ui-widget ul li.positions table .col-3 > a {
  border: 0;
  display: block;
  max-height: 22px;
  overflow: hidden;
}

section.overview.ui-widget ul li.positions table td.remove {
  width: 15px;
  text-align: right;
}

section.overview.ui-widget ul li.positions table td.remove a:hover {
  color: #c00;
}

/*** section.shopcart ***/
section.overview.ui-widget.shopcart ul li.positions table td.count {
  width: 45px;
}

/** section.overview.ui-widget.notedlist  **/
section.overview.ui-widget.notedlist ul li.positions table td {
  vertical-align: middle;
}
section.overview.ui-widget.notedlist ul li.positions table td.thumbnail {
  display: table-cell;
  text-align: center;
  width: 35px;
  height: 35px;
}
section.overview.ui-widget.notedlist ul li.positions table td.thumbnail > img {
  max-width: 32px;
  max-height: 32px;
  /*text-align: left;*/
  margin: 0 auto;
}
section.overview.ui-widget.notedlist ul li.positions table td.name {
  padding-left: 0px;
}
section.overview.ui-widget.notedlist ul li.positions table td.name a {
  border: 0;
  display: block;
  max-height: 22px;
  overflow: hidden;
  padding-left: 10px;
  font-size: 13px;
}
section.overview.ui-widget.notedlist ul li.positions table td.icon {
  padding-left: 15px;
  padding-right: 2px;
  text-align: center;
  font-size: 13px;
  width: 30px;
}

/* "show the all articles in the noted list" */
section.overview.ui-widget.notedlist ul li.more table {
  border: 0;
  margin: 0;
}

section.overview.ui-widget.notedlist ul li.more table td {
  font-style: italic;
  font-size: 12px;
}

/** section.shopcart.search-and-add **/
html.touch-screen-mode
  div.type-1-3
  > div.ym-col1
  div.shopcart.searchAndAdd.free-title,
html.touch-screen-mode
  div.type-1-3
  > div.ym-col1
  section.shopcart.search-and-add {
  display: none;
}

section.overview.ui-widget.search-and-add ul li.sub-header {
  line-height: 1.2em;
}

section.shopcart.search-and-add ul li.input.search {
  width: 62%;
}

section.shopcart.search-and-add ul li.input.count {
  width: 36%;
  float: right;
}

section.shopcart.search-and-add ul li.input input {
  width: 100%;
}

section.shopcart.search-and-add ul li.input.search input {
  padding: 4px 8px;
}

section.shopcart.search-and-add ul li.input.count input {
  padding: 2px 4px;
  text-align: center;
}

section.shopcart.search-and-add ul li.input.count .ui-spinner input {
  width: 60%;
}

section.shopcart.search-and-add ul li.input.count .ui-spinner.minus-plus input {
  width: 80%;
  margin-left: 10%;
}

section.shopcart.search-and-add ul li.input.search input,
section.shopcart.search-and-add ul li.input.count .ui-spinner {
  height: 27px;
}

section.shopcart.search-and-add ul li.button.submit {
  width: 100%;
  margin-top: 4px;
}

section.shopcart.search-and-add ul li.button.submit button {
  width: 100%;
  font-size: 1em;
}

/* article cell */
/* article cell: positions image */
.tooltip-positions-image div.positionsImage {
  height: auto;
  text-align: center;
  overflow: hidden;
}

.tooltip-positions-image div.positionsImage img {
  float: none;
  /*border: 1px solid green;*/
}

/* article cell: positions text */
/*
  .tooltip-positions-image div.positionsText {

  }
  */

/* article cell: article label and number */
.tooltip-positions-image div.article-number {
  font-size: 0.8em;
}

/* article cell: article number */
/*
  .tooltip-positions-image div.article-number span {

  }
  */

/* article cell: article name */
/*
  .tooltip-positions-image div.article-name {

  }
  */

/* article cell: price and more info */
.tooltip-positions-image div.price {
  margin-top: 0.5em;
  font-size: 0.8em;
}

/* article cell: price more info */
/*
  .tooltip-positions-image div.price div.priceInfoMore {

  }
  */

/* article cell: price more info - VAT */
/*
  .tooltip-positions-image div.price div.priceInfoMore div.priceInfoVat {

  }
  */

/* article cell: price more info - Shipping  */
/*
  .tooltip-positions-image div.price div.priceInfoMore div.priceInfoShipping {

  }
  */

/* article cell: price more info - Shipping a  */
/*
  .tooltip-positions-image div.price div.priceInfoMore div.priceInfoShipping a {

  }
  */

/* total info */
section.shopcart.overview ul li.total ul.total-info {
  margin-top: 0.5em;
  font-size: 0.8em;
}

section.shopcart.overview ul li.total ul.total-info li.label,
section.shopcart.overview ul li.total.vat-info > table td.col-label {
  text-align: left;
  padding: 0 0.2em;
  font-weight: normal;
}

section.shopcart.overview ul li.total ul.total-info li.value,
section.shopcart.overview ul li.total.vat-info > table td.col-value {
  text-align: right;
  padding: 0 0.2em;
}

section.shopcart.overview ul li.total ul.total-info li.price-total {
  font-weight: 600;
}

/* total info: VAT */
section.shopcart.overview ul li.total.vat-info {
  width: 100%;
}

section.shopcart.overview ul li.total.vat-info > table {
  border: 0px solid;
  width: 100%;
  margin: 0;
}
section.shopcart.overview ul li.total.vat-info > table td {
  padding: 0;
  font-size: 11px;
}
section.shopcart.overview ul li.total.vat-info > table tr.total-gross td {
  font-weight: 600;
}

/* total info: Shipping */
section.shopcart.overview ul li.total ul.total-info.shipping {
  margin-top: 0;
}

/* links ("To Shopcart", "To Order", "PayPal Express" */
section.shopcart.overview ul li.links {
  margin-top: 0.5em;
  font-size: 0.85em;
}

section.shopcart.overview ul li.links > ul li {
  width: 100%;
  padding: 0 0em 0 0.2em;
}

section.shopcart.overview ul li.links > ul li a {
  border: 0;
  display: block;
  width: 100%;
}
/*
  section.shopcart.overview ul li.links > ul li.to-shopcart {

  }

  section.shopcart.overview ul li.links > ul li.to-shopcart a {

  }
  */
section.shopcart.overview ul li.links > ul li.to-shopcart a:before {
  content: " \f291";
  right: 0;
}
/*
  html.touch-mode-off section.shopcart.overview ul li.links > ul li.to-shopcart a:hover::before {

  }

  section.shopcart.overview ul li.links > ul li.to-order {

  }
  */

section.shopcart.overview ul li.links > ul li.to-order a:before {
  content: "\f07a";
  right: 0.3em;
}

html.touch-screen-enabled
  section.shopcart.overview
  ul
  li.links
  > ul
  li.to-shopcart
  a:before,
html.touch-screen-enabled
  section.shopcart.overview
  ul
  li.links
  > ul
  li.to-order
  a:before {
  content: "";
}
/*
  section.shopcart.overview ul li.links > ul li.to-paypal-express {

  }
  */

/** section.login-info **/
section.login-info {
  margin: 0 0 1em 0;
}

section.login-info .public-name {
  font-size: 0.9em;
}

section.login-info .public-name.tooltip-title .name {
  cursor: help;
}

section.login-info .login-name {
  margin-top: 0.5em;
  font-size: 0.9em;
}

section.login-info .name {
  font-weight: 600;
}

/*** article metails views ***/
/** table td .article-metals.table-cell **/
table td .article-metals.table-cell {
  font-size: 0.9em;
}

table td .article-metals.table-cell > .title {
  /*text-align: left;*/
  /*font-style: italic;*/
  font-weight: 600;
}
table td .article-metals.table-cell > .title:after {
  content: ":";
}
/*
  table td .article-metals.table-cell .row-metal > .ym-gl {

  }
  */
table td .article-metals.table-cell .row-metal > .ym-gr {
  text-align: right;
}
table td .article-metals.table-cell .row-metal > .ym-gr > div {
  padding-right: 0;
}

table td .article-metals.table-cell > .row-metal .label:after {
  content: ":";
}

/*** password strength meter ***/
.ym-form div.password-meter {
  width: var(--ym-form-field-width);
}

div.password-meter .progress,
div.password-meter .progress-bar,
div.password-meter .verdict {
  height: 20px;
  line-height: 20px;
  outline: none;
}

div.password-meter .progress {
  outline: none;
  margin-top: 10px;
  margin-bottom: 10px;
  overflow: hidden;
  background-color: #f5f5f5;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
}

div.password-meter .progress-bar {
  float: left;
  width: 0;
  height: 100%;
  text-align: center;
  background-color: #428bca;
  -webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15);
  -webkit-transition: width 0.6s ease;
  -o-transition: width 0.6s ease;
  transition: width 0.6s ease;
}
div.password-meter .progress-bar-danger,
div.password-meter .progress-bar-weak {
  background-color: #d9534f;
}
div.password-meter .progress-bar-warning {
  background-color: #f0ad4e;
}
div.password-meter .progress-bar-success {
  background-color: #5cb85c;
}
div.password-meter .progress-bar,
div.password-meter .verdict {
  text-align: center;
  color: #333;
}
div.password-meter .progress-bar-success .verdict,
div.password-meter .progress-bar-weak .verdict {
  color: var(--theme-color-white);
}

div.password-meter .progress-bar-danger .verdict {
  display: none;
}

/*** Menu for Touch Screen mode ***/
nav#menuPrimaryTouchScreen {
  position: fixed;
  z-index: 1000;
  top: var(--header-top);
  height: auto;
  border: 1px solid var(--theme-color-dark-b2);
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  background: var(--theme-color-white);
}

body.mm-wrapper.mm-wrapper_background nav#menuPrimaryTouchScreen {
  z-index: 1;
}

/** li heights **/
nav#menuPrimaryTouchScreen ul > li {
  height: var(--header-height);
  display: flex;
  /* for vertical centering in combination with div {margin: auto} */
  border: 0px solid;
  margin: 0;
  padding: 10px 0 0 6%;
}

@media screen and (max-width: 18.75rem) {
  /* 300px */
  nav#menuPrimaryTouchScreen ul > li.filters {
    display: none;
  }
}

@media screen and (max-width: 16.875rem) {
  /* 270px */
  nav#menuPrimaryTouchScreen ul > li.search {
    display: none;
  }
}

@media screen and (max-width: 21.25rem) {
  /* 340px */
  nav#menuPrimaryTouchScreen ul > li {
    padding-left: 3%;
  }
}

nav#menuPrimaryTouchScreen ul > li:last-child {
  /* :LAST-CHILD because list items are 'float: right' */
  padding-left: 0;
}

nav#menuPrimaryTouchScreen ul > li > div {
  margin: auto;
  position: relative;
  height: 85%;
}

/** li **/
nav#menuPrimaryTouchScreen ul > li.logo {
  padding: 0px 0px;
  background: var(--theme-color-white);
}

/** logo **/
nav#menuPrimaryTouchScreen ul > li.logo > div {
  /*background: var(--theme-color-white);*/
  display: flex;
  margin: auto auto auto 0;
}
nav#menuPrimaryTouchScreen ul > li.logo > div > a {
  /*background: var(--theme-color-white);*/
  height: 31px;
  margin: auto;
}

/** buttons **/
nav#menuPrimaryTouchScreen ul > li > div {
  text-align: center;
  color: gray;
  /* not ready */
}

nav#menuPrimaryTouchScreen ul > li > div.is-ready,
nav#menuPrimaryTouchScreen ul > li > div.is-opened {
  color: #000;
  /* ready */
}

nav#menuPrimaryTouchScreen ul > li > div > div.icon {
  padding-top: 2px;
  height: 28px;
}

nav#menuPrimaryTouchScreen
  ul
  > li
  > div
  > div.icon.font-awesome
  i[class^="fa"] {
  font-size: 24px;
  line-height: 26px;
}

nav#menuPrimaryTouchScreen ul > li > div > div.label {
  font-size: 10px;
  text-align: center;
}

/*** button shopcart ***/
nav#menuPrimaryTouchScreen ul > li.shopcart > div > div.icon {
  position: relative;
  top: 1px;
}
/*
  html.development nav#menuPrimaryTouchScreen ul > li.shopcart div.icon.font-awesome i.fa {

  }
  */

nav#menuPrimaryTouchScreen ul > li.shopcart > div > div.label {
  position: relative;
  top: 0px;
}

/*** nav#menuPrimaryTouchScreen ***/
nav#menuPrimaryTouchScreen ul > li > div > div.icon {
  padding-top: 0px;
  height: 34px;
}

nav#menuPrimaryTouchScreen ul > li.logo > div > a {
  /* height: auto; */ /* 12.06.2025 EXPERIMENTAL OFF */
  display: flex; /* 12.06.2025 EXPERIMENTAL ON */
}

nav#menuPrimaryTouchScreen ul > li.logo img {
  height: auto;
  width: 100%;
  max-height: calc(var(--header-height) - 2em);
}

nav#menuPrimaryTouchScreen ul > li.menu img,
nav#menuPrimaryTouchScreen ul > li.search img,
nav#menuPrimaryTouchScreen ul > li.shopcart img {
  height: 32px;
}

/*** zoom feature ***/

.zoom-disabled {
  display: none;
}
.zoom-enabled {
  display: block;
}
html.touch-screen-detected .zoom-enabled,
html.touch-screen-mode .zoom-enabled {
  display: none;
}
html.touch-screen-detected .zoom-disabled,
html.touch-screen-mode .zoom-disabled {
  display: block;
}

/**** $.zoomImg() ****/
html.touch-mode-off .zoomImg.zoomCreated > img.full-picture {
  transition: 0.5s;
  /* "restore" with delay */
}

html.touch-mode-off .zoomImg.zoomCreated:hover > img.full-picture {
  opacity: 0;
  transition: 0s;
  /* "hide" by hover immedeatly */
}

/* !important - work around because of style="display: table" */

article.article-group.teaser section.picture > .zoom-disabled {
  display: none !important;
}
article.article-group.teaser section.picture > .zoom-enabled {
  display: table !important;
}

html.touch-screen-mode
  article.article-group.teaser
  section.picture
  > .zoom-disabled {
  display: table !important;
}
html.touch-screen-mode
  article.article-group.teaser
  section.picture
  > .zoom-enabled {
  display: none !important;
}

html.touch-screen-mode
  article.article-group.teaser
  section.picture
  > .zoom-instruction,
article.article-group.teaser section.picture > .zoom-enabled.zoom-instruction,
article.article-group.teaser section.picture > .zoom-disabled.zoom-instruction {
  display: none !important;
}

/*** ulScroller ***/
.ulScroller {
  position: relative;
  overflow: hidden;
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
}

.ulScroller.orientation-horizontal {
  height: 60px;
}

/*
  html.development .ulScroller.orientation-horizontal {

  }
  */

.ulScroller.orientation-horizontal.with-scroll-buttons {
  padding-left: 20px;
  padding-right: 20px;
}

html.touch-screen-mode .ulScroller.orientation-horizontal.with-scroll-buttons {
  padding-left: 30px;
  padding-right: 30px;
}

.ulScroller {
  --scroller-dimension: 60px;
  --scroller-width: var(--scroller-dimension);
  --scroller-height: var(--scroller-dimension);
  width: var(--scroller-width);
  height: var(--scroller-height);

  --nav-button-dimension: 22px;
  --nav-button-width: var(--nav-button-dimension);
  --nav-button-height: var(--nav-button-dimension);
}

.ulScroller-button {
  width: var(--nav-button-width);
  height: var(--nav-button-height);
}

.ulScroller.orientation-vertical {
  --scroller-width: var(--scroller-dimension);
  --scroller-height: auto;
  --nav-button-width: var(--scroller-width);
  --nav-button-height: var(--nav-button-dimension);
}

.ulScroller.orientation-horizontal {
  --scroller-height: var(--scroller-dimension);
  --scroller-width: 100%;
  --nav-button-width: var(--nav-button-dimension);
  --nav-button-height: var(--scroller-height);
  padding-top: 2px;
}

.ulScroller.orientation-horizontal .ulScroller-button {
  line-height: var(--nav-button-height);
}

html.development .ulScroller.orientation-vertical {
  max-height: 350px;
  /* test value only. remove it later */
}

.ulScroller.orientation-vertical {
  padding-top: 2px;
  padding-left: 2px;
  /* 11.07.2022 EXPERIMENTAL ON */
  padding-bottom: 2px;
}
.ulScroller.orientation-vertical.with-scroll-buttons {
  padding-top: calc(var(--nav-button-height) + 2px);
  padding-bottom: calc(var(--nav-button-height) + 2px);
}
/*
  .ulScroller.orientation-vertical.with-scroll-buttons > ul {

  }
  */

.ulScroller > .ulScroller-button {
  z-index: 2;
  position: absolute;
  text-align: center;
  border: 1px solid var(--theme-color-white);
  background: var(--theme-color-white);
  color: #000;
  cursor: pointer;
  display: none;
}

html.touch-mode-off .ulScroller > .ulScroller-button:hover {
  border: 1px solid #aaa;
}

.ulScroller > .ulScroller-button.disabled {
  color: #aaa;
}
html.touch-mode-off .ulScroller > .ulScroller-button.disabled:hover {
  border: 1px solid var(--theme-color-white);
}

.ulScroller.orientation-horizontal.with-scroll-buttons
  .ulScroller-button.horizontal {
  display: block;
}

.ulScroller.orientation-vertical.with-scroll-buttons
  .ulScroller-button.vertical {
  display: block;
}

.ulScroller.orientation-horizontal.with-scroll-buttons .ulScroller-button.prev {
  top: 0;
  left: 0;
}

.ulScroller.orientation-horizontal.with-scroll-buttons .ulScroller-button.next {
  top: 0;
  right: 0;
}

.ulScroller.orientation-vertical.with-scroll-buttons .ulScroller-button.prev {
  top: 0;
  left: 0;
}

.ulScroller.orientation-vertical.with-scroll-buttons .ulScroller-button.next {
  bottom: 0;
  left: 0;
}

.ulScroller > ul {
  z-index: 1;
  display: block;
  position: relative;
}
.ulScroller > ul > li {
  display: inline-block;
}

.ulScroller.orientation-horizontal.with-scroll-buttons > ul {
  width: 1000%;
}
/*
  .ulScroller.orientation-horizontal.with-scroll-buttons > ul.dragged {

  }
  */

/*** lazy-load ***/
img.lazy-load.img {
  display: none;
}

.lazy-loading > img.for-observer {
  position: absolute;
  height: 1px;
  width: 1px;
  opacity: 0.1;
}

div.autocomplete-row div.suffix a .lazy-load.datasource,
div.autocomplete-row div.suffix a .lazy-load.datasource div,
div.autocomplete-row div.suffix a .lazy-loading,
div.autocomplete-row div.suffix a .lazy-loading div {
  display: inline;
  padding-right: 2px;
}

.article-availability .lazy-load.datasource,
.article-availability .lazy-loading {
  max-width: 20px;
}

/** lazy-load > lazy-preview **/
/* lazy-load > lazy-preview.video */
.lazy-preview.video {
  position: relative;
  /*border: 1px solid red;*/
}

.lazy-preview.video img.placeholder {
  position: relative;
  border: 1px soild red;
}

.lazy-preview.iframe .button-play,
.lazy-preview.video .button-play {
  position: absolute;
  top: 40%;
  left: 40%;
  cursor: pointer;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.6);
  background: var(--theme-color-white);
}

.lazy-preview.iframe .button-play {
  top: calc(50% - 25px);
  left: calc(50% - 37px);
  height: 50px;
  width: 50px;
  border-radius: 50px;
  border: 1px solid #00e;
}

.lazy-preview.iframe.video.YouTube .button-play {
  top: calc(50% - 25px);
  left: calc(50% - 37px);
  height: 50px;
  width: 75px;
  border-radius: 8px;
  border: 1px solid red;
}

.lazy-preview.iframe.video.YouTube .button-play.play {
  background: red;
  padding-left: 5px;
}

html.touch-mode-off .lazy-preview.iframe.video.YouTube .button-play.play:hover {
  background: var(--theme-color-white);
}

.lazy-preview.iframe .button-play i[class^="fa"] {
  position: relative;
  line-height: 49px;
  padding-left: 4px;
}

.lazy-preview.iframe.video.YouTube .button-play i[class^="fa"] {
  line-height: 50px;
  padding-left: 0px;
}

.lazy-preview.iframe .button-play i.fa-play {
  font-size: 25px;
  color: #000;
}

.lazy-preview.iframe .button-play.play i.fa-play {
  font-size: 23px;
  color: #00e;
}

.lazy-preview.iframe.video.YouTube .button-play.play i.fa-play {
  font-size: 23px;
  color: var(--theme-color-white);
}

html.touch-mode-off
  .lazy-preview.iframe.video.YouTube
  .button-play.play:hover
  i.fa-play {
  color: red;
}

.lazy-preview.terms {
  margin-top: 1em;
  font-size: 0.9em;
}
.lazy-preview.terms a {
  text-decoration: underline;
  color: #00d;
}

/*** ***/

.fa-stack[data-count]::after {
  position: absolute;
  right: 5%;
  top: 5%;
  content: attr(data-count);
  font-size: 48%;
  padding: 3px 3px;
  border-radius: 999px;
  line-height: 12px;
  color: white;
  text-align: center;
  min-width: 2em;
  font-weight: 600;
  background: #f80808;
  border-style: solid;
  border-width: 0px;
}

/*** UI Widjet "custom.tooltipPopup"  ***/
.tooltip-popup {
  z-index: 900;
  position: absolute;
  padding: 10px 20px;
  max-width: 200px;
  /*box-shadow: 0 0 7px black;*/
}

/* UI Widjet "custom.tooltipPopup": arrow */
.tooltip-popup,
.arrow:after {
  background: var(--theme-color-white);
  border: 1px solid #d19405;
}
.arrow {
  width: 70px;
  height: 16px;
  overflow: hidden;
  position: absolute;
  left: 50%;
  margin-left: -35px;
  bottom: -16px;
}
.arrow.top {
  top: -16px;
  bottom: auto;
}
.arrow.left {
  left: 20%;
}

.arrow.right {
  left: 80%;
}

.arrow:after {
  content: "";
  position: absolute;
  left: 20px;
  top: -20px;
  width: 25px;
  height: 25px;
  box-shadow: 6px 5px 9px -9px black;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.arrow.top:after {
  bottom: -20px;
  top: auto;
}

/** .tooltip-popup form "login" with links **/
.tooltip-popup.form-login {
  max-width: 300px;
  padding: 5px 15px 15px 15px;
}
.tooltip-popup.form-login.menuMobileLoginForm {
  max-width: none;
}
.tooltip-popup.form-login > div.login-layout {
  padding-top: 0px;
}

.tooltip-popup.form-login > .login-layout > div {
  width: 100%;
  float: left;
  margin: 0;
  padding-right: 0;
}

.tooltip-popup.form-login .ym-form > .ym-fbox {
  margin-top: 20px;
}
.tooltip-popup.form-login .ym-form > .ym-fbox.user {
  margin-top: 0px;
}

.tooltip-popup.form-login > .login-layout > div .ym-fbox-wrap,
.tooltip-popup.form-login
  > .login-layout
  > div
  .ym-fbox-wrap
  :where(.ym-fbox-button, .ym-fbox-button button) {
  width: 100%;
  margin: 0;
}

.tooltip-popup.form-login
  > .login-layout
  > div
  .ym-fbox-wrap
  .ym-fbox-button
  button {
  margin-top: 8px;
}

.tooltip-popup.form-login
  > .login-layout
  > div
  .ym-fbox-wrap
  .ym-fbox-button
  button:focus {
  width: calc(100% - var(--accessibility-focus-input-width-delta));
  margin-left: var(--accessibility-focus-width);
}

.tooltip-popup.form-login
  > .login-layout
  :where(
    input[type="date"],
    input[type="email"],
    input[type="number"],
    input[type="text"],
    input[type="password"]
  ) {
  width: calc(100% - var(--accessibility-focus-input-width-delta));
}

div.login-layout input#user,
.tooltip-popup.form-login > .login-layout input[type="email"][name="user"],
.tooltip-popup.form-login > .login-layout input[type="text"][name="user"] {
  text-transform: lowercase;
}

.tooltip-popup.form-login .ym-form input[type="email"],
.tooltip-popup.form-login .ym-form input[type="text"],
.tooltip-popup.form-login .ym-form input[type="password"] {
  margin-top: var(--ym-form-text-label-top);
}

.tooltip-popup.form-login > .login-layout > div:first-child button.return-back {
  display: none;
}

.tooltip-popup.form-login > .login-layout > div.ym-gr {
  margin-top: 1em;
  padding-top: 0;
}

.tooltip-popup.form-login > .login-layout > div.ym-gr .link-new-customer {
  margin-bottom: 0px;
}
.tooltip-popup.form-login > .login-layout > div.ym-gr .link-forgot-password {
  margin-top: 8px;
  margin-bottom: 0px;
  padding-top: 0;
}

.tooltip-popup.form-login > .login-layout > div.ym-gr .link-new-customer,
.tooltip-popup.form-login > .login-layout > div.ym-gr .link-forgot-password {
  font-size: 12px;
}

.tooltip-popup.form-login > .login-layout > div.ym-gr a {
  text-decoration: none;
  color: #0078ae;
}

.tooltip-popup.form-login > .login-layout > div.ym-gr a:hover {
  text-decoration: underline;
}

.tooltip-popup.form-login > .login-layout > div > div {
  margin: 0;
  padding: 0;
}

/*** debug ***/
ul.info-responsive-design > li.css-mode {
  display: none;
  color: white;
  background: #888;
  text-align: center;
}

ul.info-responsive-design > li.css-mode.touch-screen-mode {
  background: #aaa;
  color: #55f;
}

/**
 * styles.qu.css
 */

a.dotted > span {
  border-bottom: 1px dotted var(--theme-color-dark);
}


:root[data-theme="contrast"] a {
  text-decoration: underline;
}

:root[data-theme="contrast"] a.dotted {
  text-decoration: none;
}

:root[data-theme="contrast"] a.dotted > span {
  border-bottom: 1px solid var(--theme-color-black);
}




/* html.touch-mode-off a.dotted:hover { */
html.touch-mode-off a.dotted:hover > span {
  border-bottom: 1px solid var(--theme-color-bright-opposite);
}

.ui-helper-hidden-accessible {
  border: 0 none !important;
  clip: rect(0px, 0px, 0px, 0px) !important;
  height: 1px !important;
  margin: -1px !important;
  overflow: hidden !important;
  padding: 0 !important;
  position: absolute !important;
  width: 1px !important;
}

.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
  text-align: right;
  display: flex;
}

/* .ui-dialog.success */
.ui-dialog.success {
  border: 1px solid #5f795c;
}
.ui-dialog.success .ui-widget-header {
  border: 1px solid #5f795c;
  background: #5f795c;
  color: var(--theme-color-white);
}

.ui-dialog.success .ui-dialog-buttonpane {
  border-color: #5f795c;
}

.ui-dialog.success,
.ui-dialog.success .ui-dialog-buttonpane {
  background: #f4faf4;
}

.ui-dialog.success .ui-button {
  background: #5f795c;
  border: 1px solid var(--theme-color-white);
  color: var(--theme-color-white);
}

.ui-dialog.success .ui-dialog-titlebar .ui-button {
  display: none;
}

.ui-dialog.success .ui-dialog-content > table {
  margin: 0;
}

.ui-dialog.success
  .ui-dialog-content
  table.icon-content
  td.icon
  i[class^="fa"] {
  color: #5f795c;
}

.ui-dialog.success section.layout-message {
  border: 0;
  padding: 0;
  margin: 0;
}

/*  */
.ui-buttonset .ui-button-text {
  font-weight: normal;
}

.ui-tabs .ui-tabs-nav li.ui-tabs-active {
  padding-bottom: 1px;
  /* Bug fix */
}

.ui-button i[class^="fa"] {
  color: inherit;
}

/*** .ui-spinner.minus-plus ***/
.ui-spinner.minus-plus {
  border: 1px solid var(--theme-color-bright);
}

.ui-spinner.minus-plus input[type="number"],
.ui-spinner.minus-plus input[type="text"] {
  text-align: center;
  width: 80%;
  border: 1px solid #eee;
  /*height: 100%;*/
  height: var(--button-small-height);
  margin: 0 auto;
  padding-left: 0;
  padding-right: 0;
  /*background: #efefef !important;*/
}
article.users-input
  .ui-spinner.minus-plus
  :where(input[type="number"], input[type="text"]) {
  /*height: var(--button-normal-height);*/
  height: calc(var(--button-normal-height) - 2px);
  /* 24.06.2024 EXPERIMENTAL ON */
}

.ui-spinner.minus-plus .ui-spinner-button {
  width: 25%;
  border: 0px solid;
}

.ui-spinner.minus-plus .ui-spinner-down {
  /*border: 1px solid red;*/
  height: 100%;
  left: 0;
  right: auto;
  /*border-right-style: none;*/
}

.ui-spinner.minus-plus .ui-spinner-up {
  /*border: 1px solid green;*/
  height: 100%;
  left: auto;
  right: 0;
  /*border-left-style: none;*/
}
/*
  .ui-spinner.minus-plus a.ui-spinner-button {

  }
  */

/** div.free-title **/
/* div.free-title.simple (by simple alternate sliders views) */
.free-title.simple.ui-state-default {
  margin-bottom: 0;
}

/* .ym-col1 .free-title */
.ym-col1 .free-title {
  background: none;
  border: medium none;
  font-size: 1.1em;
  margin-bottom: 0;
  padding: 0.5em 0;
}
/** ym-form elements **/
.ui-widget-content .ym-form input[type="date"],
.ui-widget-content .ym-form input[type="email"],
.ui-widget-content .ym-form input[type="number"],
.ui-widget-content .ym-form input[type="text"],
.ui-widget-content .ym-form input[type="password"],
.ui-widget-content .ym-form textarea {
  background: var(--theme-color-white);
}

.ym-form .ym-fbox-check.radio .ui-buttonset label {
  display: inline-block;
}

.ym-columnar .ym-fbox-check.radio label.ui-button {
  width: auto;
}

/** alternate sprite **/
.ui-icon.alternate-sprite {
  background-image: url("img/alternate-sprite.qu.png");
  width: 32px;
  height: 32px;
}

.ui-icon-upload {
  background-position: -320px -290px;
}

.ui-icon-help {
  background-position: -95px -290px;
}

/** typography in UI dialogs **/
.ui-dialog .info {
  background: none;
}

/* .ui-dialog.app-dialog-confirm */
.ui-dialog.app-dialog-confirm {
  min-width: 22.5rem;
}

.ui-dialog.app-dialog-confirm table {
  border: 0;
  /*margin-bottom: 0;*/
}

/* table "Articles List" [by search by GTIN by quick order] */
.ui-dialog.app-dialog-confirm div.articles-list {
  margin: 15px 0 -15px 0;
}

.ui-dialog.app-dialog-confirm div.articles-list > div.delimiter {
  height: 1px;
  padding-top: 15px;
  padding-bottom: 15px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}

.ui-dialog.app-dialog-confirm div.articles-list > div.delimiter > div {
  height: 1px;
  border-top: 1px dotted #000;
}

.ui-dialog.app-dialog-confirm div.articles-list > div {
  border-top: 0px dotted #000;
}

.ui-dialog.app-dialog-confirm div.articles-list div.picture {
  width: 20%;
  text-align: center;
}

.ui-dialog.app-dialog-confirm div.articles-list div.picture img {
  max-height: 100px;
}

.ui-dialog.app-dialog-confirm div.articles-list div.picture i[class^="fa"] {
  font-size: 70px;
  height: 90px;
  line-height: 90px;
}

.ui-dialog.app-dialog-confirm
  div.articles-list
  div.picture
  i[class^="fa"].fa-warning {
  color: #a00;
}

.ui-dialog.app-dialog-confirm div.articles-list div.info {
  padding-left: 5px;
  width: 78%;
}

.ui-dialog.app-dialog-confirm div.articles-list div.info .description {
  float: none;
  width: 100%;
}

.ui-dialog.app-dialog-confirm
  div.articles-list
  div.info
  .description
  span.label {
  font-weight: 600;
  font-size: 10px;
}
.ui-dialog.app-dialog-confirm
  div.articles-list
  div.info
  .description
  span.label:after {
  content: ":";
}

.ui-dialog.app-dialog-confirm
  div.articles-list
  div.info
  .description
  .search-by {
  color: #a00;
}

.ui-dialog.app-dialog-confirm
  div.articles-list
  div.info
  .description
  .search-by.article-number {
  color: #000;
}
/*
  .ui-dialog.app-dialog-confirm div.articles-list div.info .description .article-number {

  }

  .ui-dialog.app-dialog-confirm div.articles-list div.info .description .gtin {

  }
  */

.ui-dialog.app-dialog-confirm div.articles-list div.info .description .name {
  font-weight: 600;
}

.ui-dialog.app-dialog-confirm div.articles-list div.info ul.exceptions {
  color: #a00;
}

.ui-dialog.app-dialog-confirm div.articles-list div.info .button {
  padding-top: 5px;
  text-align: right;
}

/* #idShopcartSupplier_DialogArticlePreview */
.ui-dialog.app-dialog-confirm div.quantity {
  white-space: nowrap;
  width: 50%;
  min-width: 70px;
}

.ui-dialog.app-dialog-confirm div.quantity .ui-spinner {
  position: relative;
  top: -2px;
  left: 0px;
  background: var(--theme-color-white);
}

.ui-dialog.app-dialog-confirm div.quantity div.quantity-readonly {
  display: inline;
}

.ui-dialog.app-dialog-confirm div.quantity div.unit-price-name {
  display: inline;
  position: relative;
  top: 0px;
  left: 4px;
}

/* */

.ui-dialog.app-dialog-confirm .dialog-confirm-info a {
  border-bottom: 1px dotted;
}

.ui-dialog.app-dialog-confirm .dialog-confirm-info a:hover {
  border-bottom: 1px solid;
}

.ui-dialog.app-dialog-confirm .article-thumbnail > img {
  max-height: 200px;
}

/** .ui-button  **/
.ui-button.narrow {
  font-size: 0.9em;
}

.ui-button.narrow.ui-state-active {
  border-color: #000;
}
/*
.ui-button.with-prefix i[class^="fa"].prefix {
  margin-right: 0.5em;
}

.ui-button.with-prefix img.prefix {
  margin-right: 0.5em;
}
*/

/* 30.07.2024 EXPERIMENTAL OFF
  .ui-button.with-suffix span.caption {
  padding-right: 0.5em;
} */

/** ui-selectmenu **/
/*
  .ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
  }
  */

.ym-columnar .ui-selectmenu-button {
  float: left;
  margin-right: -3px;
}

.ui-selectmenu-open .ui-menu-item {
  white-space: nowrap;
  background-image: none;
  /*padding-top: 0.4em;
	  padding-bottom: 0.4em;*/
  /* no need from jquery UI 1.12.0 */
}

.ui-selectmenu-open > ul.overflow {
  max-height: 400px;
  /* max-width: 450px; */ /* 2025-08-18 EXPERIMENTAL OFF */
}

.ui-selectmenu-open .ui-menu-item.ui-state-focus {
  font-weight: normal;
  background-image: none;
  margin-top: 0px;
}

/** ui-datepicker-calendar **/
table.ui-datepicker-calendar {
  border: 0;
}

table.ui-datepicker-calendar td a,
table.ui-datepicker-calendar td span {
  text-align: center;
}

/* items with icons */
ul.iconselectmenu {
  margin-top: -2px;
}

ul.iconselectmenu li.ui-menu-item {
  border-top: 1px solid var(--theme-color-dark);
}
.ui-selectmenu-button.ui-button table.simple td {
  height: var(--ui-selectmenu-button-height);
  /* 18.10.2023 EXPERIMENTAL ON */
  /*border: 1px solid;*/
}
.ui-selectmenu-button table.simple td.col-icon {
  width: 40px;
  /*vertical-align: top;*/
  vertical-align: middle;
  /* 18.10.2023 EXPERIMENTAL ON */
  text-align: left;
}

.ui-selectmenu-button table.simple td.col-icon img {
  width: 100%;
  height: auto;
}

.ui-selectmenu-open table.simple td.col-icon,
.ui-selectmenu-open table.simple td.col-icon div {
  width: 60px;
  vertical-align: top;
  text-align: center;
}

/*.ui-selectmenu-button table.simple td.col-label:hover {*/
.ui-selectmenu-button:hover table.simple td.col-label {
  color: var(--theme-color-dark-opposite);
}

.ui-selectmenu-button table.simple td.col-label,
.ui-selectmenu-button table.simple td.col-button,
.ui-selectmenu-open table.simple td.col-text {
  vertical-align: middle;
  padding-left: 1em;
  /*max-width: 200px;*/
  white-space: normal;
  font-size: 1em;
}

.ui-selectmenu-open table.simple div.label {
  font-weight: 600;
}

.ui-selectmenu-open table.simple div.description {
  font-size: 0.8em;
  margin-top: 0.5em;
}

.ui-selectmenu-open .ui-state-active,
.ui-selectmenu-open .ui-widget-content .ui-state-active,
.ui-selectmenu-open .ui-widget-header .ui-state-active,
.ui-selectmenu-open a.ui-button:active,
.ui-selectmenu-open .ui-button:active,
.ui-selectmenu-open .ui-button.ui-state-active:hover {
  border-right: 0;
}

/** section.skin-selector **/
section.skin-selector .ui-selectmenu-button,
ul#skinSelector-menu {
  font-size: 0.8em;
  width: 100%;
}

/** ui-autocomplete, ui-menu **/
.ui-menu .ui-menu-item {
  padding-left: 0em;
  padding-right: 0em;
}

.ui-menu.iconselectmenu .ui-menu-item {
  /*padding: 0.5em 0.0em 0.5em 0.5em;*/
  /*border: 1px solid blue;*/
  padding-top: 0;
  margin: 0;
}
/*
  .ui-menu .ui-menu-item > table  {

  }
  */

.ui-menu .ui-menu-item > table td {
  padding: 0.5em;
}
/*
  .ui-menu .ui-menu-item > table td.col-1 {
  }
  */

/** ui-autocomplete **/
.ui-autocomplete {
  /* Good browsers */
  opacity: 0.95;
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=95)";
  /* IE 5-7 */
  filter: alpha(opacity=95);
  /* Netscape */
  -moz-opacity: 0.95;
  /* Safari 1.x */
  -khtml-opacity: 0.95;
  background: #fefefe;
}

.ui-autocomplete .ui-state-focus {
  font-weight: normal;
  background-image: none;
  border-top: 1px solid transparent;
  border-bottom: 1px solid transparent;
}

/* ui-autocomplete, jQuery UI 1.12.0 */
.ui-menu .ui-menu-item {
  padding-left: 0em;
  padding-right: 0em;
}
/*
  .ui-selectmenu-open .ui-state-active {

  }
  */
.ui-autocomplete .ui-state-active {
  margin-top: 0;
  /* 07.04.2022 fixing setted in jquery-ui.css margin-top: -1px; */
  background: var(--theme-color-white);
  color: var(--theme-color-white-opposite);
  background-image: none;
}

.ui-autocomplete .ui-state-active a,
.ui-autocomplete .ui-state-active a:link,
.ui-autocomplete .ui-state-active a:visited {
  color: var(--theme-color-white-opposite);
}

.ui-menu .ui-menu-item-wrapper {
  position: relative;
  padding: 0px 10px 0px 12px;
}
ul.ui-autocomplete.autocompleteDecorator.needleTouchScreen.ui-menu
  .ui-menu-item-wrapper {
  padding: 0px 10px 0px 12px;
}

html.touch-screen-mode .ui-menu .ui-menu-item-wrapper {
  white-space: normal;
}

/**  ui-autocomplete div.autocomplete-row <- "div" version **/
div.autocomplete-row {
  --suffix-width: 20%;
  --suffix-height: 1.375rem;
  --caption-width: calc(100% - var(--suffix-width));
  padding: 0;
  width: 100%;
  text-align: left;
  line-height: 1.4rem;
  position: relative;
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}

div.autocomplete-row div {
  vertical-align: baseline;
  padding: 0px;
}

div.autocomplete-row div.caption {
  flex-grow: 1;
  word-break: break-word;
  font-size: 0.75em;
  line-height: 1.2em;
  width: var(--caption-width);
  padding-bottom: 0.2em;
}
div.autocomplete-row.no-suffix div.caption {
  width: 100%;
}
ul.ui-autocomplete.menu-touch div.autocomplete-row div.caption {
  min-width: none;
}

/* special autcomplete item "show more search results" */
div.autocomplete-row div.caption span.special.show-more-search-results {
  font-weight: 600;
  color: #000;
}

div.autocomplete-row div.caption span.special.show-more-search-results:after {
  content: " ...";
}

div.autocomplete-row div.suffix {
  text-align: right;
  font-size: 0.8em;
  padding-left: 0px;
  padding-bottom: 0px;
  /*width: 20%;*/
  /* 05.06.2024 EXPERIMENTAL OFF, because flex now */
  align-self: flex-start;
}

ul.ui-autocomplete.menu-touch div.autocomplete-row a {
  padding: 0em 0;
}

div.autocomplete-row div.suffix,
div.autocomplete-row div.suffix a {
  color: var(--theme-color-dark);
  font-weight: 600;
}

/* Centering of price and img|i.fa using flex */
div.autocomplete-row div.suffix > a {
  display: flex;
  justify-content: flex-end;
  line-height: var(--suffix-height);
}

div.autocomplete-row div.suffix > a a {
  right: 0px;
  top: 0;
}
/*
  ul.ui-autocomplete.autocompleteDecorator.needleTouchScreen div.autocomplete-row div.suffix a {
	  position: absolute;
	  top: 10px;
  }
*/
div.autocomplete-row div.suffix img {
  width: auto;
  height: var(--suffix-height);
  margin-left: 0;
}

div.autocomplete-row div.suffix i[class^="fa"] {
  font-size: calc(var(--suffix-height) - 6px);
  line-height: var(--suffix-height);
  color: var(--theme-color-bright);
  margin-left: 2px;
}

div.autocomplete-row div.suffix .lazy-loading i[class^="fa"] {
  color: var(--theme-color-dark);
}

/* 2024-01-26 EXPERIMENTAL OFF
  div.autocomplete-row div.suffix a section.lazy-load,
  div.autocomplete-row div.suffix a section.lazy-load div {
	  display: inline;
	  padding-right: 2px;
  }
  */

div.autocomplete-row div.suffix a .lazy-load.datasource,
div.autocomplete-row div.suffix a .lazy-load.datasource div,
div.autocomplete-row div.suffix a .lazy-loading,
div.autocomplete-row div.suffix a .lazy-loading div {
  display: inline-block;
  padding-right: 2px;
}

div.autocomplete-row div.suffix > a > a > i.fa-shopping-basket {
  /* 2021-08-02 WORK AROUND: Double shopcart icons by lazy load prices */
  display: none;
}

div.autocomplete-row div.suffix a i.fa-shopping-basket {
  position: relative;
  top: -1px;
}

.ui-autocomplete span.soundex {
  font-style: italic;
}

/** ul.navigation.articlesGroups **/
nav.articles-groups {
  /* do not show not js-formated menu */
  display: none;
}

/** nav.articles-groups.horizontal **/
nav.articles-groups.horizontal {
  border: 0;
  height: 35px;
  margin-bottom: 35px;
  margin-bottom: 1em;
  padding: 0;
  /*background: #FECE2F;*/
}
/*
  nav.articles-groups.horizontal > .ym-wrapper {

  }
  */

nav.articles-groups.horizontal div.ui-tabs {
  border: 0px solid;
  margin: 0px;
  margin-top: -1px;
  padding-top: 0px;
  padding-bottom: 0px;
  padding: 0px;
  background: none;
}

nav.articles-groups.horizontal div.ui-tabs ul.navigation {
  background: none;
  border: 0px solid;
  width: auto;
}

nav.articles-groups.horizontal div.ui-tabs .ui-tabs-nav {
  padding: 0px;
}

nav.articles-groups.horizontal div.ui-tabs .ui-tabs-nav > li {
  margin: 0px;
  /* 2018-11-29 back to the jQuery UI Theme, background-image: none; */
  border-radius: 0;
  border: 1px solid var(--theme-color-white);
  border-left: 0;
  border-bottom: 0;
  /*border-top: 1px solid #FECE2F;*/
  /*border-bottom: 1px solid #FECE2F;*/
}

nav.articles-groups.horizontal div.ui-tabs .ui-tabs-nav > li > a {
  width: 100%;
  text-align: center;
}

nav.articles-groups.horizontal div.ui-tabs .ui-tabs-nav > li:first-child {
  border-left: 1px solid var(--theme-color-white);
}

nav.articles-groups.horizontal div.ui-tabs .ui-tabs-nav li.ui-state-active {
  background: var(--theme-color-dark-b1);
}

nav.articles-groups.horizontal div.ui-tabs .ui-tabs-nav li.ui-state-active * {
  color: var(--theme-color-dark);
}

/* tab "more" */
nav.articles-groups.horizontal div.ui-tabs .ui-tabs-nav > li.more a {
  font-size: 1.3em;
  line-height: 0.9em;
  padding-left: 0.5em;
  padding-right: 0.5em;
  text-align: center;
}

/* nav.articles-groups.horizontal div.ui-tabs-panel */
nav.articles-groups.horizontal div.ui-tabs-panel {
  background: #eee;
}

nav.articles-groups.horizontal div.ui-tabs-panel a {
  color: #000;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul {
  list-style-type: none;
  margin: 0;
  width: 100%;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part {
  width: 90%;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.splitter > li > ul > li {
  padding-left: 0;
  margin-left: 0.5em;
  margin-right: 0em;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.splitter > li {
  width: 100%;
  padding-left: 0;
  border-left: 0px solid #cecece;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.splitter > li:first-child {
  border-left: 0;
  padding-left: 0;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part ul li {
  font-size: 0.95em;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li li {
  margin: 0;
  padding: 0;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li li.more-items > a {
  font-weight: 600;
  font-style: italic;
}
nav.articles-groups.horizontal
  div.ui-tabs-panel
  ul.part
  li
  li.more-items
  > a:after {
  content: " ...";
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li a {
  display: block;
  border-top: 1px solid #cecece;
}

nav.articles-groups.horizontal
  div.ui-tabs-panel
  ul.part
  li
  a
  .fa-angle-double-right::before {
  padding-right: 0px;
  visibility: hidden;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li a {
  position: relative;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part > li:first-child > a {
  border-top: 0;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li a {
  padding: 0.4em 0.6em;
}
nav.articles-groups.horizontal div.ui-tabs-panel ul.part li li a {
  padding-left: 0.8em;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li li li a {
  padding-left: 1.2em;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li li li li a {
  padding-left: 2em;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part li li li li li a {
  padding-left: 3em;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part a i {
  font-size: 0.7em;
  /* position: relative;
	  top: -2px;*/

  /*padding-left: 1em;*/
  position: absolute;
  right: 1em;
  top: 1.1em;
}

nav.articles-groups.horizontal div.ui-tabs-panel.more ul.part a i {
  top: 0.7em;
}

nav.articles-groups.horizontal
  div.ui-tabs-panel
  ul.part
  a
  i[class^="fa"].fa-angle-right,
nav.articles-groups.horizontal
  div.ui-tabs-panel
  ul.part
  a
  i[class^="fa"].fa-map-marker {
  color: #0074c7;
}

nav.articles-groups.horizontal
  div.ui-tabs-panel
  ul.part
  li.active
  > a
  i.fa-check {
  right: 0.4em;
}

nav.articles-groups.horizontal div.ui-tabs-panel.more div.tab-content a {
  display: block;
  padding: 0.1em 0.2em;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part a:hover,
nav.articles-groups.horizontal div.ui-tabs-panel.more div.tab-content a:hover {
  background: #fafafa;
}

nav.articles-groups.horizontal div.ui-tabs-panel ul.part a:active,
nav.articles-groups.horizontal div.ui-tabs-panel.more div.tab-content a:active {
  background: #f5f5f5;
}
/*
  nav.articles-groups.horizontal div.ui-tabs-panel ul.part li.active > a i[class^="fa"] {

  }
  */

/** special tab panel "..." **/
nav.articles-groups.horizontal div.ui-tabs-panel.more div.tab-title a {
  display: block;
  padding: 0.2em 0.4em;
  font-weight: 600;
  position: relative;
}
nav.articles-groups.horizontal div.ui-tabs-panel div.tab-title a:hover {
  background: #fafafa;
}

nav.articles-groups.horizontal
  div.ui-tabs-panel.more
  div.tab-title
  a
  i[class^="fa"] {
  position: absolute;
  right: 0.5em;
}
/*
  html.develompent nav.articles-groups.horizontal div.ui-tabs-panel.more div.tab-content {

  }
  */

/* disable state */
nav.articles-groups.horizontal .ui-state-disabled,
nav.articles-groups.horizontal .ui-widget-content .ui-state-disabled,
nav.articles-groups.horizontal .ui-widget-header .ui-state-disabled {
  opacity: 1;
  filter: Alpha(Opacity=100);
  /* support: IE8 */
  background-image: none;
  cursor: wait;
  cursor: progress !important;
}

nav.articles-groups.horizontal .ui-state-disabled *,
nav.articles-groups.horizontal .ui-widget-content .ui-state-disabled *,
nav.articles-groups.horizontal .ui-widget-header .ui-state-disabled * {
  cursor: wait;
  cursor: progress;
}

/** Paginator **/
div.pages-bar .filter-select-label > .label,
div.pages-bar .sort-select-label > .label {
  margin-right: 0.5em;
}
div.pages-bar .filter-select-label > .selection,
div.pages-bar .sort-select-label > .selection {
  position: relative;
  margin-top: 0;
  /*padding-right: 1em; */
  /* 04.04.2022 EXPERIMENTAL ON */
}

/** bundle-bar **/
div.pages-bar.bundle-bar > div > ul.elements {
  width: auto;
}
div.pages-bar.bundle-bar > div > ul.elements > li.element > ul {
  width: auto;
}
div.pages-bar.bundle-bar .sort-select-label > .ym-gl.selection {
  padding-left: 0.5em;
}

div.pages-bar.bundle-bar .visible-range {
  font-size: 0.875em;
}
div.pages-bar.bundle-bar .visible-range .ym-gl {
  font-weight: 600;
  white-space: nowrap;
}

/** ArticlesBundleList **/
/* mode-cells */
/*
  ul.articles-bundle-list.mode-cells {

  }
  */

/** spinner **/
a.ui-spinner-button {
  cursor: pointer;
}

.ui-spinner input.ui-widget {
  border: 0;
}

/** process dialog **/
/* app-dialog-process */
div.app-dialog-process {
  border-width: 2px;
  z-index: 1000 !important;
}

div.app-dialog-process div.ui-dialog-titlebar {
  display: none;
}

div.app-dialog-process table.content {
  margin: 10px 5px;
  border: 0px solid;
}

div.app-dialog-process table.content td {
  border: 0px solid;
}

div.app-dialog-process table.content tr:hover th,
div.app-dialog-process table.content tr:hover td {
  background: none;
}

div.app-dialog-process table.content .col-1 {
  width: 65px;
  vertical-align: middle;
}
div.app-dialog-process table.content .col-2 {
  vertical-align: middle;
  font-weight: 600;
  text-align: left;
}
div.app-dialog-process #processLoggingIn table.content {
  margin-top: 1em;
  margin-bottom: 0em;
}
div.app-dialog-process #processLoggingIn table.content .col-2 {
  vertical-align: middle;
  font-weight: 600;
  text-align: left;
}
/* Helper_Process */
#processDialog {
  height: auto !important;
}

div.app-dialog-process #processDialog table.content .col-2 {
  vertical-align: middle;
  font-weight: 600;
  text-align: left;
}

/** tooltips **/
/* tooltip-title */
.ui-tooltip {
  background: var(--theme-color-white);
}

/*.ui-tooltip > .ui-tooltip-content {*/
/*max-width: 200px;*/
/* 05.02.2024 EXPERIMENTAL ON */
/*}*/

.ui-tooltip > .ui-tooltip-content > img {
  max-width: 16px;
  width: auto;
  height: auto;
}
.ui-tooltip.tooltip-title ul.tooltip-title {
  width: auto;
}
.ui-tooltip ul.table-2-cols.tooltip-title.ym-grid {
  width: max-content;
  /* 28.10.2024 EXPERIMENTAL ON */
}
.ui-tooltip {
  max-width: none;
  /* 28.10.2024 EXPERIMENTAL ON */
}

.tooltip-popup.max-width-none,
.tooltip-title.max-width-none {
  max-width: none;
}

ul.table-2-cols.tooltip-title > li.label {
  width: auto;
}

ul.table-2-cols.tooltip-title > li.label img {
  margin: 0 0px 0px 0;
  position: relative;
  top: 2px;
}

/*.ui-tooltip {
    max-width: ;
  }*/
.ui-tooltip ul.table-2-cols.tooltip-title > li.value {
  width: max-content;
  /* 28.10.2024 EXPERIMENTAL ON */
}

.tooltip-title.max-width-none ul.table-2-cols.tooltip-title {
  width: auto;
}

.tooltip-title.max-width-none ul.table-2-cols.tooltip-title > li.value {
  white-space: nowrap;
}

/* avaliability tooltips */
.availability-tooltip table {
  border: 0px;
  margin: 0px;
}

.availability-tooltip table th,
.availability-tooltip table td {
  border: 0px;
  margin: 0px;
  padding: 2px;
}

.availability-tooltip table .col-1 img {
  position: relative;
  top: 2px;
  padding-right: 4px;
}

/* positions images tooltip */
/*
  .tooltip-positions-image  {
  }
  */
.tooltip-positions-image img {
  max-height: 250px;
  float: left;
}

/** filter groups tooltip **/
.tooltip-group-filter div.label.selected::after {
  content: ": ";
}

.tooltip-group-filter div.label.selected {
  font-weight: 600;
  font-size: 0.9em;
}

.tooltip-group-filter div.text {
  color: #0074c7;
}

/**** $.tooltipInfo(): icon ****/
.tooltipInfo-icon {
  --gap: 0.5em;
  cursor: help;
}
i[class^="fa"].tooltipInfo-icon {
  color: var(--message-color-info-icon);
}
i[class^="fa"].tooltipInfo-icon.fa-duotone {
  --fa-primary-color: var(--theme-color-white);
  --fa-secondary-color: var(--message-color-info-icon);
  --fa-secondary-opacity: 1;
}
.tooltipInfo-icon.prepend {
  margin-right: var(--gap);
}
.tooltipInfo-icon.append {
  margin-left: var(--gap);
}

/*** $.tooltipInfo(): popup ***/
.tooltip-popup.tooltipInfo {
  padding: 1em;
}

/* @package Manufacturer */
.tooltip-popup.tooltipInfo.manufacturer > address {
  font-style: normal;
}

.tooltip-popup.tooltipInfo.manufacturer > address + div {
  padding-top: 1em;
}

.tooltip-popup.tooltipInfo.manufacturer > address + div + div {
  padding-top: 0.75em;
}

.tooltip-popup.tooltipInfo.manufacturer > div {
  display: flex;
  align-items: center;
}

.tooltip-popup.tooltipInfo.manufacturer > div > .icon {
  width: 2em;
  padding-top: 0px;
  display: none;
}

.tooltip-popup.tooltipInfo.manufacturer.has-homepage.has-email > div > .icon {
  display: inline-block;
}

.tooltip-popup.tooltipInfo.manufacturer > div a {
  text-decoration: underline;
  color: var(--message-color-info-icon);
}

/** font-awesome icons in confirmation dialogs **/
.ui-dialog .ui-dialog-content table.icon-content td.icon i[class^="fa"] {
  font-size: 34px;
}

.ui-dialog .ui-dialog-content table.icon-content td.icon i.fa-question {
  color: #a00;
  /*color: #FECE2F;*/
  /* PARITY yellow */
}

.ui-dialog .ui-dialog-content table.icon-content td.icon i.fa-upload {
  color: #00a;
}

.ui-dialog .ui-dialog-content table.icon-content td.icon i.fa-floppy-o {
  color: var(--message-color-info-icon);
}

.ui-dialog.ui-state-error {
  background-color: var(--theme-color-white);
  border-color: #a00;
}

.ui-dialog.ui-state-error .ui-dialog-titlebar {
  background-color: #a00;
}

.ui-dialog.ui-state-error .ui-dialog-titlebar .ui-button {
  background: var(--theme-color-white);
  border-color: #a00;
}

.ui-dialog.ui-state-error table.icon-content td.icon {
  color: #a00;
}

.ui-dialog.ui-state-error .ui-dialog-buttonpane button {
  background: #a00;
  color: var(--theme-color-white);
  border-color: #a00;
}

/** accordion, jQuery UI 1.12.0 **/
.ui-accordion .ui-accordion-header.ui-corner-top > .ui-accordion-header-icon {
  position: absolute;
  top: 0.875em;
}
.ui-accordion .ui-accordion-header.ui-corner-top > .ym-grid > .ym-gl {
  padding-left: 25px;
}

.ui-accordion .ui-accordion-header.ui-corner-top > .ym-grid > .ym-gr {
  text-align: right;
}

/* section.cross-articles inside of accordion */
.ui-accordion .ui-accordion-content section.cross-articles {
  border: 0px solid red;
  margin-top: 1em;
}
.ui-accordion
  .ui-accordion-content
  section.cross-articles
  ul.articles-bundle-list {
  /* margin: 0;*/
  margin-bottom: 0;
}

/** .ui-controlgroup (buttons with radio), jQuery UI 1.12.0 **/
.ym-fbox-check .ui-controlgroup label {
  padding: 0.4em 0.7em 0.4em 0.6em;
  width: auto;
  margin-right: 5px;
  margin-bottom: 4px;
}

.ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
.ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
  height: 16px;
  width: 16px;
}
/*
  span.ui-checkboxradio-icon.ui-icon-blank,
  .ui-checkboxradio-radio-label .ui-icon-background,
  span.ui-checkboxradio-icon.ui-state-hover {

  }
  */

.ui-widget-overlay {
  z-index: 1100;
}

/**** mmenu ****/
/* 2021-07-01: By some unknown cases there double contents visible  */
/* Here is the workaround: suppress all nav menu containers except the first */
body > nav.menuMobile.mm-menu:not(:first-child) {
  display: none;
}
/*** mmenu "desktop" ***/
html.touch-mode-off .mm-wrapper_opened header {
  z-index: 1000;
}
html.touch-mode-off .mm-wrapper_opened {
  overflow: scroll !important;
  /* do not hide the browsers scrollbar by opening menu */
}
/*** language selector ***/
div.mm-navbars_bottom ul.language-selector {
  margin: 0;
}
/*
  div.mm-navbars_bottom ul.language-selector > li {

  }
  */

div.mm-navbars_bottom ul.language-selector > li a {
  padding-left: 28px;
  text-transform: uppercase;
  color: #777;
}

div.mm-navbars_bottom ul.language-selector > li.active a {
  color: #000;
}

div.mm-navbars_bottom ul.language-selector > li.active a span {
  text-decoration: underline;
}

/*** mmenu "touchscreen" ***/
.touch-screen-mode .mm-navbar {
  background: #eee;
}
.touch-screen-mode .mm-panels {
  background: var(--theme-color-white);
}

/** menuSearchTouchScreen in mmenu **/
nav.mm-menu.menuFiltersTouchScreen > .mm-navbars_top .mm-navbar:last-child,
nav.mm-menu.menuSearchTouchScreen > .mm-navbars_top .mm-navbar:last-child {
  border-top: 1px solid #ddd;
  border-bottom: none;
  min-height: 37px;
}

/* mm-btn_close looks like mm-btn_prev */
nav.mm-menu.menuFiltersTouchScreen > .mm-navbars_top .mm-btn_close::before,
nav.mm-menu.menuSearchTouchScreen > .mm-navbars_top .mm-btn_close::before {
  content: "";
  border-bottom: none;
  border-right: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  width: 8px;
  height: 8px;
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
}

nav.mm-menu.menuFiltersTouchScreen > .mm-navbars_top .mm-btn_close::before,
nav.mm-menu.menuSearchTouchScreen > .mm-navbars_top .mm-btn_close::before {
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
  left: 23px;
  right: auto;
}

nav.mm-menu.menuFiltersTouchScreen > .mm-navbars_top .mm-btn_close::before {
  left: 28px;
}

/*nav.mm-menu.menuFiltersTouchScreen > .mm-navbars_top .mm-btn_close::after,*/
nav.mm-menu.menuSearchTouchScreen > .mm-navbars_top .mm-btn_close::after {
  content: unset;
  width: 0px;
  height: 0px;
}

/**** order lists ****/
/*** if logged-out: form login ***/
html.logged-out section.order-lists-popup {
  padding: 0;
}

html.logged-out section.order-lists-popup > div {
  border: 1px solid var(--theme-color-white);
  max-width: none;
  padding: 5px 15px 15px 15px;
  padding: var(--padding-y) var(--padding-x) var(--padding-x) var(--padding-x);
}

html.logged-out section.order-lists-popup > div.message-if-logged-out {
  padding-top: 10px;
  padding-bottom: 0;
  font-weight: 600;
}

/*** section.order-lists-popup .order-lists-manager ***/
section.order-lists-popup > .order-lists-manager > section {
  margin-top: 30px;
}

/** section.order-lists-popup .order-lists-manager section.order-list-creator **/
section.order-lists-popup > .order-lists-manager > .order-list-creator {
  margin-top: 20px;
  background: var(--theme-color-white);
}

section.order-lists-popup > .order-lists-manager > .order-list-creator > div.form {
  --button-width: 1.875rem;
  border-bottom: 1px solid;
}

section.order-lists-popup > .order-lists-manager > .order-list-creator > div.form > div {
  height: calc(var(--button-width) + var(--accessibility-focus-width));
  line-height: calc(var(--button-width) + var(--accessibility-focus-width));
  background: var(--theme-color-white);
}

section.order-lists-popup > .order-lists-manager > .order-list-creator > div.form > div.input input[type="number"],
section.order-lists-popup > .order-lists-manager > .order-list-creator > div.form > div.input input[type="text"] {
  height: calc(var(--button-width) - var(--accessibility-focus-input-width-delta));
  line-height: calc(var(--button-width) - var(--accessibility-focus-input-width-delta));
  background: var(--theme-color-white);
}

section.order-lists-popup > .order-lists-manager > .order-list-creator div.input {
  border: 1px solid var(--theme-color-white);
  width: calc(100% - var(--button-width));
  overflow: hidden;
  background: var(--theme-color-white);
}

section.order-lists-popup > .order-lists-manager > .order-list-creator div.button {
  text-align: center;
  width: var(--button-width);
  border: 1px solid var(--theme-color-white);
}

section.order-lists-popup > .order-lists-manager > .order-list-creator input[type="number"],
section.order-lists-popup > .order-lists-manager > .order-list-creator input[type="text"] {
  width: calc(100% - var(--accessibility-focus-input-width-delta));
  border: 1px solid var(--theme-color-white);
  border-radius: 0;
  /*-webkit-appearance: none; */
  /* Firefox */
  appearance: none;
  /* 18.10.2023 EXPERIMENTAL ON */
  background: var(--theme-color-white);
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}

section.order-lists-popup > .order-lists-manager > .order-list-creator > div.messages {
  margin-top: 0.5em;
  line-height: 1.5em;
}

/** section.order-lists-popup .order-lists-manager section.order-lists **/
section.order-lists-popup > .order-lists-manager > .order-lists > div > article,
section.order-lists-popup > .order-lists-manager > .order-lists > div > article > div,
section.order-lists-popup > .order-lists-manager > .order-lists > div > article > div > div {
  height: 2.5rem;
  line-height: 2.5rem;
  margin-bottom: var(--accessibility-focus-width);
}

section.order-lists-popup > .order-lists-manager > .order-lists > div > article {
  border-top: 1px solid #ddd;
}

section.order-lists-popup > .order-lists-manager > .order-lists > div > article:first-child {
  border-top: 0px solid var(--theme-color-white);
}
/*
  section.order-lists-popup > .order-lists-manager > .order-lists > div > article > .hidden-toolbar {
  }
  */

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .hidden-toolbar
  > div.prefix {
  width: auto;
}
section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .hidden-toolbar
  > div.delete {
  width: auto;
  color: var(--theme-color-white);
  background: #a00;
  padding: 0 10px;
  cursor: pointer;
}

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list {
  position: relative;
  background: var(--theme-color-white);
  cursor: pointer;
}
section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list.ui-draggable-dragging {
  cursor: move;
}

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list
  > .info {
  text-align: center;
  width: 30px;
  border: 1px solid var(--theme-color-white);
}

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list.not-checked
  > .info {
  width: 0;
  transition: width 1s;
}
section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list.not-checked
  > .info
  > * {
  display: none;
}

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list.is-checked
  > .info {
  width: 30px;
  margin-top: 0px;
}

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list
  > .label {
  border: 1px solid var(--theme-color-white);
  width: calc(100% - 60px);
  overflow: hidden;
}

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list.swiped.left
  > .label,
html.touch-screen-mode
  section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list
  > .label {
  width: calc(100% - 30px);
}

section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list
  > .trash {
  text-align: center;
  width: 30px;
  border: 1px solid var(--theme-color-white);
  color: #a00;
}

html.touch-screen-mode
  section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list
  > .trash {
  display: none;
}

/** section.order-lists-popup .order-lists-manager section.buttons **/
section.order-lists-popup > .order-lists-manager > .buttons {
  width: 100%;
}

section.order-lists-popup > .order-lists-manager > .buttons > button {
  width: 100%;
}

/*** Tiny Slider ***/
/** the 1.st slide is visible at first **/
.slider-tiny > div:first-child {
  display: inline-block;
}

/** slide content wrapper **/
.slider-tiny > div > div > div {
  position: relative;
}

/**
   * @version 2021-12-20
   *
   * Skin "mobile"
   */

/*** develompent and debug icons ***/
div.icon-development,
div.icon-debug {
  top: var(--icon-debug-top) !important;
}

/* UI Widjet "custom.tooltipPopup": arrow */
.tooltip-popup,
.arrow:after {
  border: 1px solid var(--theme-color-dark);
}

.ui-autocomplete {
  opacity: 1;
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
  filter: alpha(opacity=100);
  -moz-opacity: 1;
  -khtml-opacity: 1;
  background: #fefefe;
}

/*** popup "module inventory" f.e. "Kundenkonto" ***/
/*
  div.tooltip-popup.module-inventory {
  }
  */
div.tooltip-popup > section.module-inventory > ul.table-2-cols > li.label {
  width: auto;
  padding: 0 0 0 0;
  width: 30px;
  text-align: left;
  overflow: hidden;
  height: 21px;
}
div.tooltip-popup > section.module-inventory > ul.table-2-cols > li.label img {
  width: 100%;
  height: auto;
  max-width: 26px;
  max-height: 26px;
  position: relative;
  left: -6px;
  top: -3px;
  right: auto;
}

/**** <header/> ****/

/*** nav.primary ***/
/* Version with img icon */
header nav.primary ul li a img .OFF {
  width: 24px;
  position: relative;
  top: 5px;
}

header nav.primary ul li a > img {
  width: auto;
  height: var(--a-height);
}

header nav.primary ul li a > img ~ span {
  padding-left: 4px;
}

/* Version with FA icon */
header nav.primary ul li a > i[class^="fa"] {
  --local-fontsize: calc(var(--a-height) - 4px);
  font-size: clamp(var(--local-fontsize), 1rem, 24px);
}
header nav.primary ul li a > i.fa-bars {
  /* font-size: calc(var(--a-height) - 1px); */
  --local-fontsize: calc(var(--a-height) - 1px);
}

header nav.primary ul li a > i[class^="fa"] ~ span {
  padding-left: 0.4em;
}

header nav.primary ul li a.shopcart [data-count]::after {
  background: var(--theme-color-bright);
  color: var(--theme-color-bright-opposite);
  font-weight: 400;
}

/*** form search ***/
section.search-articles ul.form-search > li.cancel > div img {
  width: 19px;
  right: 8px;
}

.ui-autocomplete li.last-item .ui-state-active {
  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  border-bottom: 1px solid var(--theme-color-bright);

  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: 1px solid transparent;
}

ul.ui-autocomplete.autocompleteDecorator > li > div {
  padding-left: 38px;
  padding-right: 12px;
  border-top: 1px solid var(--theme-color-dark-b1);
}
ul.ui-autocomplete.autocompleteDecorator > li > div.ui-state-active {
  border-bottom: 1px solid var(--theme-color-dark-b1);
}
ul.ui-autocomplete.autocompleteDecorator > li > div > div {
  padding: 5px 0px;
}
:root[data-font-size="big"]
  ul.ui-autocomplete.autocompleteDecorator
  > li
  > div
  > div {
  padding: 0px 0px;
}
ul.ui-autocomplete.autocompleteDecorator.needleTouchScreen > li > div > div {
  padding: 10px 0px;
}

/*** header menu burger ***/
nav.primary ul li a.menu.burger:hover,
html.touch-mode-off nav.primary ul li a.menu.burger:hover span {
  text-decoration: none;
  /*cursor: wait;*/
  cursor: pointer;
}

nav.primary ul li a.menu.burger.is-opened:hover,
html.touch-mode-off nav.primary ul li a.menu.burger.is-opened:hover span,
html.development nav.primary ul li a.menu.burger.is-opened:hover,
html.development.touch-mode-off
  nav.primary
  ul
  li
  a.menu.burger.is-opened:hover
  span {
  cursor: pointer;
}

html.touch-mode-off nav.primary ul li a.menu.burger.is-opened:hover span {
  text-decoration: underline;
}

/*** primary navigation ***/
header ul.layout-header > li.navigation > nav a span,
header ul.layout-header > li.navigation > nav a:hover span {
  text-decoration: none;
}
html.touch-mode-off nav.primary ul li a.menu.burger.is-ready:hover span,
html.touch-mode-off nav.primary ul li a.menu.burger.is-opening:hover span,
html.touch-mode-off nav.primary ul li a.menu.burger.is-closing:hover span,
html.touch-mode-off nav.primary ul li a.menu.burger.is-opened:hover span {
  text-decoration: none;
  cursor: default;
}

html.touch-mode-off nav.primary ul li a.menu.burger.is-ready:hover span {
  cursor: pointer;
}

header
  ul.layout-header
  > li.navigation
  > nav
  :where(a:hover, a:focus, a:active)
  :where(i[class^="fa"], img) {
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-property: transform;
  transition-property: transform;

  -webkit-transform: scale(1.2);
  transform: scale(1.2);
}

/*** footer ***/
footer {
  background: var(--theme-color-white);
  font-size: 12px;
}

footer div.title {
  font-size: 1rem;
  font-weight: 600;
}

footer address {
  font-style: normal;
}

footer div.layout-footer > div.accordion {
  float: right;
  text-align: right;
}

footer div.layout-footer > div.accordion img.placeholder {
  width: 100%;
  height: auto;
  max-height: 221px;
  max-width: 469px;
}

/** footer .company-contact **/
footer div.company-contact address div.address {
  margin: 1em 0 2em 0;
  line-height: 1.5em;
}
footer div.company-contact address div.ym-grid > div {
  height: 2em;
}
footer div.company-contact address div.ym-grid > div.icon img {
  width: 20px;
}
footer div.company-contact address div.ym-grid > div.icon i[class^="fa"] {
  width: 14px;
  font-size: 16px;
  color: var(--theme-color-middle);
}
footer div.company-contact address div.ym-grid > div.content {
  padding-left: 1em;
}
footer div.company-contact address div.ym-grid > div.content span.short {
  width: 1.0625rem;
  display: inline-block;
}

/**** touch screen mode ****/
html.touch-screen-mode #intro,
html.touch-screen-mode header {
  position: fixed;
  padding: 0;
}

/**** mmenu ****/
.mm-menu_position-bottom,
.mm-menu_position-front,
.mm-menu_position-top {
  transition: none !important;
}
.mm-wrapper_opening .mm-menu_position-bottom,
.mm-wrapper_opening .mm-menu_position-front,
.mm-wrapper_opening .mm-menu_position-top {
  -webkit-transform: none !important;
  transform: none !important;
}
/*** mmenu "desktop" ***/
.mm-menu_dropdown {
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
  height: 80%;
}

html.touch-mode-off div.mm-slideout#intro,
html.touch-mode-off header.mm-slideout {
  /*z-index: 2000 !important;*/
  /* 31.03.2022 EXPERIMENTAL OFF */
  border-bottom: 2px solid var(--theme-color-dark-b1);
}

html.touch-mode-off body.mm-wrapper_opening header.mm-slideout {
  border-bottom: 2px solid var(--theme-color-dark-b1) !important;
}

.tooltip-popup,
.ui-autocomplete.ui-front {
  z-index: 2001 !important;
}

.ui-autocomplete.ui-front {
  border: 1px solid var(--theme-color-dark);
  padding: 1px 0px;
}

.ui-autocomplete.ui-front.ui-menu .ui-menu-item-wrapper {
  font-size: 1rem;
  padding: 0.4375em 0.625em;
}

html.touch-mode-off
  .mm-menu_columns-3
  .mm-panels
  > .mm-panel:not(.mm-panel_opened):not(.mm-panel_opened-parent) {
  -webkit-transform: translate3d(200%, 0%, 0);
  transform: translate3d(200%, 0%, 0);
}

html.touch-mode-off .mm-wrapper_opened {
  overflow: scroll !important;
  /* do not hide the browsers scrollbar by opening menu */
}
html.touch-mode-off nav.menuMobile {
  --top: calc(var(--design-color-bar-height) +  var(--header-height));

  inset: var(--top) auto auto 0px !important;
  left: 0 !important;
  /* for edge */
  top: var(--top) !important;
  /* for edge */
  max-width: 100%;
  width: 100%;
  position: relative;
  position: absolute;
  /* 2021-07-02 EXPERIMENTAL for the effect "menu over the body */
  padding-top: 10px;
}

html.agent.touch-mode-off nav.menuMobile {
  /* agent logged in */
  top: 167px !important;
  top: calc(
    var(--agent-toolbar-height) + var(--design-color-bar-height) +
      var(--header-height) - 1px
  ) !important;
}

/*
  html.touch-mode-off .mm-navbars_top {
  }
  */

html.touch-mode-off .mm-navbars_top,
html.touch-mode-off .mm-panels {
  width: 100%;
  max-width: 1170px;
  margin: 0 auto;
  background: var(--theme-color-white);
}
/*
  html.touch-mode-off .mm-panel {

  }
  */

html.touch-mode-off nav.menuMobile,
html.touch-mode-off .mm-navbar,
html.touch-mode-off .mm-panel {
  background: var(--theme-color-white) !important;
  border: 0 solid var(--theme-color-white) !important;
}

html.touch-mode-off .mm-listitem,
nav.menuMobileTouchScreen.mm-menu .mm-listitem {
  background: var(--theme-color-white) !important;
  border-top: 0px solid var(--theme-color-white) !important;
  border-bottom: 0px solid #eee !important;
  border-left: 0 solid var(--theme-color-white) !important;
  border-right: 0 solid var(--theme-color-white) !important;
}

nav.menuMobileTouchScreen.mm-menu .mm-listitem {
  height: 50px;
}

nav.menuMobileTouchScreen.mm-menu .mm-panels > .mm-panel {
  background: var(--theme-color-white) !important;
}

html.touch-mode-off nav.menuMobile {
  /*border-top: 2px solid var(--theme-color-middle) !important;*/
  padding-bottom: 20px;
}
html.touch-mode-off .mm-menu a,
html.touch-mode-off .mm-menu a:active,
html.touch-mode-off .mm-menu a:hover,
html.touch-mode-off .mm-menu a:link,
html.touch-mode-off .mm-menu a:visited {
  text-decoration: none;
  color: inherit;
  border: 0 solid var(--theme-color-white);
}

.mm-menu .mm-panels .mm-listitem .mm-btn .fa,
.mm-menu .mm-panels .mm-listitem a .fa {
  width: 16px;
  color: #000;
}
.mm-menu .mm-panels .mm-listitem img {
  width: 14px;
  margin-right: 2px;
  position: relative;
  top: 2px;
}
.mm-menu .mm-panels .mm-listitem i[class^="fa"] {
  width: 14px;
  font-size: 13px;
  margin-right: 6px;
}

html.touch-mode-off .mm-menu .mm-panels a,
nav.menuMobileTouchScreen.mm-menu .mm-panels a {
  color: #000;
}

nav.menuMobileTouchScreen.mm-menu .mm-panels a {
  line-height: 27px;
}

html.touch-mode-off .mm-menu .mm-btn_next::after,
nav.menuMobileTouchScreen.mm-menu .mm-btn_next::after {
  border-color: #000;
  border-width: 1px;
  width: 10px;
  height: 10px;
}

html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected-parent > a,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected > a,
nav.menuMobileTouchScreen.mm-menu .mm-listitem.mm-listitem_selected-parent > a,
nav.menuMobileTouchScreen.mm-menu .mm-listitem.mm-listitem_selected > a {
  color: var(--theme-color-middle);
}

/* arrows for sub menus */
html.touch-mode-off
  .mm-menu
  .mm-listitem.mm-listitem_selected-parent
  .mm-btn::before,
html.touch-mode-off
  .mm-menu
  .mm-listitem.mm-listitem_selected-parent
  .mm-btn::after,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected .mm-btn::before,
html.touch-mode-off .mm-menu .mm-listitem.mm-listitem_selected .mm-btn::after,
nav.menuMobileTouchScreen.mm-menu
  .mm-listitem.mm-listitem_selected-parent
  .mm-btn::before,
nav.menuMobileTouchScreen.mm-menu
  .mm-listitem.mm-listitem_selected-parent
  .mm-btn::after,
nav.menuMobileTouchScreen.mm-menu
  .mm-listitem.mm-listitem_selected
  .mm-btn::before,
nav.menuMobileTouchScreen.mm-menu
  .mm-listitem.mm-listitem_selected
  .mm-btn::after {
  border: 2px solid var(--theme-color-middle);
  border-bottom: none;
  border-right: none;
}

html.touch-mode-off
  .mm-wrapper_opening
  [class*="mm-menu_pagedim"].mm-menu_opened
  ~ .mm-wrapper__blocker {
  top: var(--main-top);
}

/*** mmenu "touch screen" ***/
/*
  nav.menuMobileTouchScreen.mm-menu {

  }
  */
nav.menuMobileTouchScreen.mm-menu > .mm-navbars_top,
nav.menuMobileTouchScreen.mm-menu > .mm-navbars_top > .mm-navbar,
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_top,
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_top > .mm-navbar,
nav.menuSearchTouchScreen.mm-menu > .mm-navbars_top,
nav.menuSearchTouchScreen.mm-menu > .mm-navbars_top > .mm-navbar {
  background: var(--theme-color-dark);
  color: var(--theme-color-white);
  height: 72px;
  align-items: center;
  /* flexbox vertical centering */
}

nav.menuMobileTouchScreen.mm-menu .mm-navbar__title > span,
nav.menuFiltersTouchScreen.mm-menu .mm-navbar__title > span,
nav.menuSearchTouchScreen.mm-menu .mm-navbar__title > span {
  font-weight: 600;
}

nav.menuMobileTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::after,
nav.menuMobileTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::before,
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::after,
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::before,
nav.menuSearchTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::after,
nav.menuSearchTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::before {
  border-color: var(--theme-color-white);
  border-width: 1px;
  width: 10px;
  height: 10px;
}

nav.menuMobileTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::before {
  right: 11px;
}

nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::before,
nav.menuSearchTouchScreen.mm-menu > .mm-navbars_top .mm-btn_close::before {
  right: 14px;
}

nav.menuMobileTouchScreen.mm-menu > .mm-navbars_top .mm-btn_prev::before,
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_top .mm-btn_prev::before,
nav.menuSearchTouchScreen.mm-menu > .mm-navbars_top .mm-btn_prev::before {
  border-color: var(--theme-color-white);
  border-width: 1px;
  width: 10px;
  height: 10px;
}

.mm-navbars_bottom .mm-navbar:first-child {
  border-top: 0 solid !important;
}

/**** Filtes by touch screen: Buttons at the bottom (Reset/Apply filter) ****/
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_bottom {
  --mm-navbar-size: 60px;
  /*--mm-line-height: calc(var(--mm-navbar-size) * .8);*/
}
/* buttons container */
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_bottom > .mm-navbar {
  background: var(--mm-color-background);
}
nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_bottom > .mm-navbar > div {
  align-content: stretch;
  justify-content: space-evenly;
}
/* buttons divs */
nav.menuFiltersTouchScreen.mm-menu
  > .mm-navbars_bottom
  > .mm-navbar
  > div
  > div {
  flex-shrink: 1;
  flex-grow: 0;
  flex-basis: 40%;
}

@media screen and (max-width: 23.75rem) {
  /* 380px */
  nav.menuFiltersTouchScreen.mm-menu
    > .mm-navbars_bottom
    > .mm-navbar
    > div
    > div {
    flex-basis: 46%;
  }
}

@media screen and (max-width: 20.3125rem) {
  /* 325px */
  nav.menuFiltersTouchScreen.mm-menu > .mm-navbars_bottom > .mm-navbar > div {
    flex-direction: column;
  }
  nav.menuFiltersTouchScreen.mm-menu
    > .mm-navbars_bottom
    > .mm-navbar
    > div
    > div {
    align-self: stretch;
    padding: 2px;
  }
}

/* buttons divs: state 'is-reseted' */
nav.menuFiltersTouchScreen.mm-menu
  > .mm-navbars_bottom
  > .mm-navbar
  > div.is-reseted
  > div.reset {
  display: none;
}
nav.menuFiltersTouchScreen.mm-menu
  > .mm-navbars_bottom
  > .mm-navbar
  > div.is-reseted
  > div.apply {
  flex-basis: 90%;
}

nav.menuFiltersTouchScreen.mm-menu
  > .mm-navbars_bottom
  > .mm-navbar
  > div
  > div
  > button {
  width: 100%;
}

/** search form **/
section.search-articles.touchscreen .search-forms.count-2 > div.search {
  width: 78%;
}

section.search-articles.touchscreen
  ul.form-search.ui-corner-all.autocomplete-opened {
  border-color: var(--theme-color-bright);
}

section.search-articles.touchscreen ul.form-search > li.prefix div.fa-search {
  font-size: 18px;
  line-height: 23px;
}

section.search-articles.touchscreen
  form.no-liSubmit
  ul.form-search
  > li.cancel
  .fa {
  font-size: 18px;
  line-height: 23px;
}

/** scanner button **/
section.search-articles.touchscreen .search-forms > div.scanner {
  width: 20%;
  float: right;
}
section.search-articles.touchscreen .search-forms > div.scanner > div {
  padding-top: 2px;
  width: 42px;
}
section.search-articles.touchscreen .search-forms > div.scanner img {
  width: 100%;
  height: auto;
}

/** section.search-info-bar.touchscreen **/
section.search-info-bar.touchscreen .visible-by-results {
  color: #aaa;
}

nav.mm-menu.menuFiltersTouchScreen
  > .mm-navbars_top
  .mm-navbar:last-child
  > section
  > div,
nav.mm-menu.menuSearchTouchScreen
  > .mm-navbars_top
  .mm-navbar:last-child
  > section
  > div {
  position: relative;
  top: 5px;
}

/*** language selector ***/
div.mm-navbars_bottom ul.language-selector {
  margin: 0;
}

div.mm-navbars_bottom ul.language-selector > li {
  margin: 0 1.5em;
}

div.mm-navbars_bottom ul.language-selector > li a {
  padding-left: 0px;
  text-transform: uppercase;
  color: #777;
}

div.mm-navbars_bottom ul.language-selector > li.active a {
  color: #000;
}

div.mm-navbars_bottom ul.language-selector > li.active a span {
  text-decoration: underline;
}

div.mm-navbars_bottom ul.language-selector > li a.language[lang] {
  background-image: none;
}

/* Mobiles Login */
.tooltip-popup.form-login {
  max-width: 19.6875rem;
  padding: 0px 0.9375rem 0.9375rem 0.9375rem;
}
.tooltip-popup.form-login > .login-layout > div.ym-gr .link-new-customer,
.tooltip-popup.form-login > .login-layout > div.ym-gr .link-forgot-password {
  font-size: 0.8125rem;
  text-align: center;
}

html.touch-screen-mode .ym-form input[type="date"],
html.touch-screen-mode .ym-form input[type="date"]:focus,
html.touch-screen-mode .ym-form input[type="email"],
html.touch-screen-mode .ym-form input[type="number"],
html.touch-screen-mode .ym-form input[type="text"],
html.touch-screen-mode .ym-form input[type="password"],
html.touch-screen-mode .ym-form textarea,
html.touch-screen-mode select:focus {
  color: var(--theme-color-dark);
}
.tooltip-popup.form-login > .login-layout > div.ym-gr a {
  text-decoration: underline;
  color: var(--theme-color-dark);
  font-weight: 600;
}

nav.menuMobileTouchScreen.mm-menu .mm-panels a {
  line-height: 20px;
}

html.touch-mode-off .mm-listitem,
nav.menuMobileTouchScreen.mm-menu .mm-listitem {
  background: var(--theme-color-white) !important;
  border-top: 0px solid var(--theme-color-white) !important;
  border-bottom: 0px solid var(--theme-color-white) !important;
  border-left: 0 solid var(--theme-color-white) !important;
  border-right: 0 solid var(--theme-color-white) !important;
}
li.mm-listitem.touch-screen-mode {
  display: none;
}
li.mm-listitem.touch-screen-off {
  display: block;
}
html.touch-screen-mode li.mm-listitem.touch-screen-mode {
  display: block;
}
html.touch-screen-mode li.mm-listitem.touch-mode-off {
  display: none;
}

.ym-form .ym-fbox.subform-description {
  margin-top: 0;
}

/* global setting for buttons */
section.groups-manufactors.alternate.simple
  button.ym-button.ui-button.ui-corner-all.ui-widget {
  font-size: 26px;
  font-weight: 600;
  color: #000;
  text-transform: unset;
}
section.action-articles.alternate.simple.debug-widget_sliderAlternateRender
  button.ui-state-default.ym-button.free-title.simple.ui-button.ui-corner-all.ui-widget {
  font-size: 26px;
  font-weight: 600;
  color: var(--theme-color-white);
  text-transform: unset;
}

.tooltip-popup.form-login > .login-layout > div .ym-fbox-wrap .ym-fbox-button button {
  font-size: 0.8125rem;
  margin-top: 0.5rem;
  --line-heihgt: 1.3em;

  border-radius: 4px;
  font-weight: 600;
  text-transform: uppercase;
  align-items: center;
  justify-content: center;
}

.tooltip-popup.form-login > .login-layout > div .ym-fbox-wrap .ym-fbox-button button span.caption {
  flex-grow: 0;
}
/*
  .tooltip-popup.form-login > .login-layout > div .ym-fbox-wrap .ym-fbox-button button:hover {

  }
  */

/** Navigation **/
nav.primary ul li a:hover {
  color: var(--theme-color-middle);
  text-transform: none;
  white-space: nowrap;
}
/*
  section.search-articles ul.form-search {

  }
  section.search-articles ul.form-search:hover,
  section.search-articles ul.form-search:focus,
  section.search-articles ul.form-search:active,
  section.search-articles ul.ym-grid.form-search.ui-widget-content.ui-corner-top.autocomplete-opened {

  }
  */

/** Main **/
.ym-wrapper.wide.von-ohle-for-professionals.top div.ym-wbox {
  height: 60px;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100 {
  background-color: #f0f0f0;
  margin: 50px 0;
  padding: 50px 0;
}
.ym-wrapper.wide.the-next-door-from-you.main100 {
  margin-top: -50px;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100.zitat {
  margin-top: -85px;
}
/*
  .ym-wrapper.wide.von-ohle-for-professionals.main50 {
  }
  */
.ym-wrapper.wide.von-ohle-for-professionals.main100
  div.ym-wbox
  div.ym-grid.html {
  width: 100%;
  text-align: center;
}
.ym-wrapper.wide.von-ohle-for-professionals.main50
  div.ym-wbox
  div.ym-grid.picture-html
  .ym-g50 {
  width: calc(50% - 40px);
}
.ym-wrapper.wide.von-ohle-for-professionals.main100
  div.ym-wbox
  div.ym-grid.html
  p,
.ym-wrapper.wide.von-ohle-for-professionals.main50
  div.ym-wbox
  div.ym-grid.picture-html
  .text,
.ym-wrapper.wide.von-ohle-for-professionals.main50
  div.ym-wbox
  div.ym-grid.picture-html
  .text
  p {
  font-size: 14px;
  color: #444;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100
  div.ym-wbox
  div.ym-grid.html
  h2,
.ym-wrapper.wide.von-ohle-for-professionals.main50
  div.ym-wbox
  div.ym-grid.picture-html
  .text
  h2 {
  font-size: 26px;
  font-weight: 600;
  color: var(--theme-color-dark);
}
.ym-wrapper.wide.von-ohle-for-professionals.main100
  div.ym-wbox
  div.ym-grid.html
  div.html
  div.custom-wissen
  ul
  li
  article
  div.not-picture
  h2 {
  font-size: 20px;
  font-weight: 600;
  color: #444;
  margin: 35px 20px 42px 20px;
}
/** Custom Wissen **/
div.custom-wissen > ul {
  width: 100%;
  max-width: var(--wrapper-max-width);
  margin: 30px auto 0 auto;
}
div.custom-wissen > ul > li:first-child {
  min-width: 0;
  width: calc(33% - 28px);
  margin: 0 14px;
}
div.custom-wissen > ul > li {
  min-width: 0;
  width: calc(33% - 28px);
  margin: 0 14px;
}
div.custom-wissen > ul > li:last-child {
  min-width: 0;
  width: calc(33% - 28px);
  margin: 0 14px;
}
div.custom-wissen > ul > li > article section.picture img {
  max-width: 100%;
  height: auto;
  width: auto;
}
/** Custom Marken & Service **/
div.custom-container ul.groups-custom-list {
  width: var(--wrapper-max-width);
  overflow: hidden;
}
div.custom-container ul.groups-custom-list > li {
  width: calc(12.5% - 8px);
  height: 157px;
  margin: 0 4px;
  padding: 0;
}
div.custom-container ul.groups-custom-list > li article {
  background: none;
  border: 0;
}
div.custom-container
  ul.groups-custom-list
  article.custom-group
  section.text
  div.wrap {
  font-size: 13px;
  font-style: normal;
  font-weight: 400;
  hyphens: auto;
}
div.custom-container
  ul.groups-custom-list
  article.custom-group
  section.picture {
  width: 101px !important;
  height: 101px !important;
  padding: 5px;
  margin: 0 auto 10px auto;
  border: 3px solid rgba(255, 255, 255, 0);
  overflow: hidden;
  border-radius: 50% !important;
  background: var(--theme-color-white);
}
div.custom-container
  ul.groups-custom-list
  article.custom-group
  section.picture:hover {
  border: 3px solid rgba(239, 124, 0, 0);
  opacity: 1;
}
div.custom-container
  ul.groups-custom-list
  article.custom-group
  section.picture
  img {
  position: relative;
  top: -58px;
}
/** Stammsitz **/
.ym-wrapper.wide.the-next-door-from-you.main100 div.content div.title-big {
  position: relative;
  top: -126px;
  left: 0;
  background: var(--theme-color-dark);
  padding: 5px 15px;
  font-weight: 100;
  color: var(--theme-color-white);
  width: auto;
  display: inline-block;
  font-size: 37px;
}
.ym-wrapper.wide.the-next-door-from-you.main100 div.content div.info {
  background: #f0f0f0;
  font-weight: 100;
  color: #444;
  font-size: 20px;
  padding: 40px;
  max-width: 830px;
  position: relative;
  top: -105px;
  left: 0;
  display: inline-block;
}
/*
  div.ym-wrapper.wide.von-ohle-for-professionals.top {
	  margin-top: -100px;
  }
  */
.ym-wrapper.wide.von-ohle-for-professionals.main100.zitat table {
  width: auto;
  margin: 0 auto;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100.zitat td {
  border: 0px solid #f00;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100.zitat td.quote.left {
  color: var(--theme-color-bright);
  font-size: 80px;
  font-weight: 600;
  font-style: italic;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  top: -71px;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100.zitat td.quote.right {
  color: var(--theme-color-bright);
  font-size: 80px;
  font-weight: 600;
  font-style: italic;
  vertical-align: middle;
  line-height: 0;
  position: relative;
  bottom: -62px;
  left: -80px;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100.zitat
  td.content
  div.content
  p {
  background: var(--theme-color-bright);
  color: var(--theme-color-white);
  font-size: 32px;
  font-weight: 600;
  font-style: italic;
  width: max-content;
  padding: 0 10px;
  margin: 0 0 5px 0;
}
.ym-wrapper.wide.von-ohle-for-professionals.main100.zitat td.content div.autor {
  font-size: 17px;
  padding: 20px 10px 0;
}
.ym-wrapper.wide.von-ohle-for-professionals.bottom {
  margin: 64px 0 -130px 0;
}
div.von-ohle-for-professionals.top div.prepend,
div.the-next-door-from-you.main100 div.prepend,
div.von-ohle-for-professionals.bottom div.prepend {
  text-align: center;
  overflow: hidden;
}
div.von-ohle-for-professionals.top div.prepend img,
div.von-ohle-for-professionals.main50 div.picture img,
div.the-next-door-from-you.main100 div.prepend img,
div.von-ohle-for-professionals.bottom div.prepend img {
  max-width: 100%;
  height: auto;
  width: auto;
}
div.von-ohle-for-professionals.top div.content {
  position: relative;
  top: -48px;
  left: 0;
  background: var(--theme-color-bright);
  padding: 25px;
  font-weight: 400;
  color: var(--theme-color-white);
  width: auto;
  display: inline-block;
  font-size: 150%;
}
div.von-ohle-for-professionals.top div.title-big {
  font-weight: 600;
  color: var(--theme-color-white);
  font-size: 32px;
  padding-left: 0;
}
h1.layout-title.default {
  font-weight: 400;
  color: #444;
  font-size: 22px;
  padding-left: 0;
}

/** Custom Service **/
div.custom-service > ul {
  width: 100%;
  max-width: var(--wrapper-max-width);
  margin: 30px auto 0 auto;
}
div.custom-service > ul > li:first-child {
  min-width: 0;
  width: calc(25% - 20px);
  margin: 0 13px 0 0;
}
div.custom-service > ul > li {
  min-width: 0;
  width: calc(25% - 19px);
  margin: 0 13px;
}
div.custom-service > ul > li:last-child {
  min-width: 0;
  width: calc(25% - 20px);
  margin: 0 0 0 13px;
}
div.custom-service > ul > li > article.ui-widget-content {
  width: 100%;
  border: 0px solid #999;
  border-radius: 4px;
  height: 410px;
}
div.custom-service ul > li > article section.picture img {
  width: 100%;
  height: auto;
  border-radius: 4px 4px 0 0;
}
div.custom-service ul > li > article section.icon div {
  width: 100%;
  text-align: center;
}
div.custom-service ul > li > article section.icon div i {
  width: auto;
  height: auto;
  margin: 10px 0;
  padding: 5px;
  border-radius: 50%;
  text-align: center;
  background: var(--theme-color-middle);
  color: var(--theme-color-white);
}
div.custom-service ul > li > article section.icon div img {
  width: 38px;
  height: 38px;
  margin: 16px 11px;
}
div.custom-service ul > li > article div.not-picture {
  color: #000;
  padding: 0 20px 10px 20px;
}
div.custom-service ul > li > article div.content-layer div.not-picture h2 {
  font-size: 16px !important;
  color: #444 !important;
  font-weight: 600 !important;
}
div.custom-service
  ul
  > li
  > article
  div.content-layer
  div.not-picture
  section.description {
  font-size: 13px;
  hyphens: auto;
  text-align: justify;
  margin: 15px 0 10px 0;
}

/** Custom Bottom **/
.ym-wrapper.wide.von-ohle-for-professionals.bottom div.content div.title-small {
  position: relative;
  top: -224px;
  left: 0;
  background: var(--theme-color-bright);
  padding: 5px 15px;
  font-weight: 600;
  color: var(--theme-color-white);
  width: auto;
  display: inline-block;
  font-size: 22px;
  text-transform: uppercase;
}
.ym-wrapper.wide.von-ohle-for-professionals.bottom
  div.content
  div.title-big
  div {
  position: relative;
  top: -200px;
  left: 0;
  background: var(--theme-color-dark);
  color: var(--theme-color-white);
  font-size: 37px;
  font-weight: 100;
  width: max-content;
  padding: 0 10px;
  margin: 0 0 5px 0;
  text-transform: uppercase;
}

.ym-wrapper.wide.von-ohle-for-professionals.bottom div.content div.info {
  background: var(--theme-color-bright);
  font-weight: 100;
  color: var(--theme-color-white);
  font-size: 20px;
  padding: 20px 30px;
  max-width: 830px;
  position: relative;
  top: -170px;
  left: 0;
  display: inline-block;
  margin-bottom: -20px;
}

/** Startseite - Wide Teaser **/
/*
  div.other main div.responsive.source.id-message {

  }
  */

.ui-selectmenu-menu.ui-selectmenu-open
  ul[id^="groupfilter_"]
  .ui-menu-item-wrapper {
  padding-left: 19px;
  padding-right: 18px;
}

/** ArticlesBundleList **/
/* mode-cells */
ul.articles-bundle-list.mode-cells {
  margin-top: 0;
}

/* ui-widget */
div.pages-bar li.item div,
div.pages-bar li.item a {
  line-height: 17px;
}

.ym-form fieldset#fieldset-firmData .ym-fbox,
.ym-form fieldset#fieldset-deliveryAddress .ym-fbox {
  margin-top: 8px;
}

/*** pages bar ***/
div.pages-bar.bundle-bar {
  font-size: 1rem;
  margin-bottom: 28px;
}
div.pages-bar .pages-links li.item {
  margin-right: 0em;
  margin-bottom: 0em;
}
div.pages-bar li.item div.ui-widget-content,
div.pages-bar .pages-links li.item.disabled,
div.pages-bar li.item a.ui-widget-content {
  width: var(--button-small-height);
  height: var(--button-small-height);
  line-height: var(--button-small-height);
  text-align: center;
}
div.pages-bar .pages-links li.label {
  height: var(--button-small-height);
  /*width: calc(100% - var(--button-small-height) * 2);*/
  /* 25.03.2024 EXPERIMENTAL OFF */
  line-height: var(--button-small-height);
  text-align: center;
  /* font-size: 14px; */
  font-weight: 600;
  margin-left: 0;
  margin-right: 0;
  padding-left: 17px;
  padding-right: 17px;
}
/*
  div.pages-bar li.item a.ui-widget-content {
  }
  */
div.pages-bar .pages-links li.item.disabled {
  border: 1px solid var(--theme-color-dark-b1);
  background: var(--theme-color-dark-b1);
  color: var(--theme-color-dark-b1-opposite);
}
div.pages-bar li.item.disabled i[class^="fa"],
div.pages-bar li.item a.ui-widget-content i[class^="fa"] {
  font-size: 1.1875rem;
}
div.pages-bar li.item div.ui-widget-content {
  border: 1px solid var(--theme-color-bright);
  color: var(--theme-color-white);
}

div.pages-bar ul.visible-range > li {
  height: var(--button-small-height);
  line-height: var(--button-small-height);
}

/* artikel */
ul.articles-bundle-list.mode-cells {
  margin-top: 0;
  margin-left: -0.8%;
  margin-right: -0.8%;
  width: 101.6%;
}

ul.mode-cells > li.item .noted-list {
  position: absolute;
  right: 3px;
  top: 2px;
  display: block;
}
ul.mode-cells > li.item .noted-list div.cursor-pointer img {
  width: 24px;
  margin: 2px 1px 0 0;
}
ul.mode-cells > li.item .noted-list div.cursor-pointer img:hover {
  width: 24px;
  margin: 2px 1px 0 0;
}
ul.articles-bundle-list.mode-cells > li.item.type-extra .picture,
ul.articles-bundle-list.mode-cells > li.item.type-hero .picture {
  padding: 0;
  margin: 0;
}

ul.articles-bundle-list.mode-cells li.item.res-buttons section.prices ul {
  width: auto;
}
ul.articles-bundle-list > li.item section.prices .buy-price {
  font-size: 23px;
  font-weight: 600;
  color: var(--theme-color-bright);
}
ul.mode-cells > li.item .prices .gross-price span {
  display: none;
}
section.prices .priceUVP {
  width: 100%;
  display: none;
}
ul.mode-cells > li.item .prices div.price-uvp .title,
ul.mode-cells > li.item .prices div.price-uvp .delimiter,
ul.mode-cells > li.item .prices div.price-uvp .save,
ul.mode-cells > li.item .prices div.price-uvp .percents {
  display: none;
}
ul.mode-cells > li.item .prices div.price-uvp .price {
  text-decoration: line-through;
  color: #000;
  font-size: 14px;
}
ul.mode-cells > li.item .prices .net-price {
  height: unset;
  font-size: 23px;
  font-weight: 600;
  color: var(--theme-color-bright);
}
ul.articles-bundle-list > li.item section.prices .buy-price {
  display: none;
}
ul.articles-bundle-list > li.item section.prices .buy-price span {
  display: none;
}
section.prices .gross {
  font-size: 23px;
  font-weight: 600;
  color: var(--theme-color-bright);
}
section.prices .units {
  font-size: 13px;
  font-weight: normal;
  color: var(--theme-color-bright);
  padding-top: 9px;
}
section.prices .netto {
  font-size: 11px;
  width: 100%;
  display: none;
}

section.prices .netto .info {
  background: unset;
}
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid {
  margin: 0;
  padding: 0;
}
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li {
  width: 50%;
}

ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li,
ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li {
  padding: 0;
}
ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.unit,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.unit {
  padding: 0 4px;
}
ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  .input-unit-button-text
  > ul.ym-grid
  > .button,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  .input-unit-button-text
  > ul.ym-grid
  > .button {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid
  > li,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid
  > li {
  width: 100%;
}

/** case: input + "Kg" + "in shopcart"  **/
:where(ul.articles-bundle-list.mode-cells, ul.articles-bundle-list.mode-rows) li.item.res-buttons section.buttons .input-unit-button-text > ul.ym-grid,
  /** case: input + "in shopcart"  **/
  :where(ul.articles-bundle-list.mode-cells, ul.articles-bundle-list.mode-rows) li.item.res-buttons section.buttons .input-and-button-text > ul.ym-grid,
  /* Case: button "In shopcart" and "Details"*/
  :where(ul.articles-bundle-list.mode-cells, ul.articles-bundle-list.mode-rows) li.item.res-buttons section.buttons > ul.ym-grid.count-2 {
  display: flex;
}

ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-shopcart,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-shopcart {
  flex-grow: 2;
  width: auto;
}

ul.articles-bundle-list.mode-rows > li.item section.buttons,
ul.articles-bundle-list.mode-cells > li.item section.buttons {
  width: 100%;
  container-name: sectionButtons;
  container-type: inline-size;
}

ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-details,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-details {
  flex-grow: 1;
  width: auto;
}

@container sectionButtons (width < 15.625rem) {
  /* 250px */
  ul.ym-grid.count-2 > .button-shopcart span {
    padding: 0;
    display: none !important;
  }

  ul.articles-bundle-list.mode-rows
    li.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-shopcart,
  ul.articles-bundle-list.mode-cells
    li.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-shopcart {
    flex-grow: 1;
  }

  ul.articles-bundle-list.mode-rows
    li.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-details,
  ul.articles-bundle-list.mode-cells
    li.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-details {
    flex-grow: 2;
    width: 100%;
  }

  ul.articles-bundle-list.mode-rows
    li.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    .input-and-button-text
    > ul,
  ul.articles-bundle-list.mode-cells
    li.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    .input-and-button-text
    > ul {
    width: auto;
  }
}

/** case: input + "in shopcart"  **/
ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .button,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .button {
  flex-grow: 2;
  width: auto;
}
ul.articles-bundle-list.mode-rows
  li.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .input,
ul.articles-bundle-list.mode-cells
  li.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .input {
  flex-grow: 1;
}

@container sectionButtons (width < 12.5rem) {
  /* 200px */
  .input-and-button-text.input-visible > ul.ym-grid > .button span {
    padding: 0;
    display: none !important;
  }
  ul.articles-bundle-list.mode-rows
    li.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .input,
  ul.articles-bundle-list.mode-cells
    li.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .input {
    flex-grow: 2;
    width: 100%;
  }
  ul.articles-bundle-list.mode-rows
    li.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .button,
  ul.articles-bundle-list.mode-cells
    li.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .button {
    flex-grow: 1;
  }
}

@container sectionButtons (width < 11.25rem) {
  /* 180px */
  .input-and-button-text.input-hidden > ul.ym-grid > .button button {
    display: flex;
    justify-content: center;
  }
  .input-and-button-text.input-hidden
    > ul.ym-grid
    > .button
    button
    > span.caption {
    padding: 0;
    display: none !important;
  }
}

/** case: input + "Kg" + "in shopcart"  **/
@container sectionButtons (width < 16.25rem) {
  /*  */
  .input-unit-button-text > ul.ym-grid > .button span.caption {
    padding: 0;
    display: none !important;
  }

  ul.articles-bundle-list.mode-rows
    li.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button,
  ul.articles-bundle-list.mode-cells
    li.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
  }
  ul.articles-bundle-list.mode-rows
    li.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button
    button,
  ul.articles-bundle-list.mode-cells
    li.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button
    button {
    justify-content: center;
    width: auto;
  }
}

.ui-spinner.minus-plus input[type="number"],
.ui-spinner.minus-plus input[type="text"] {
  border: 0px solid #eee;
}
.ui-spinner.minus-plus .ui-spinner-down,
.ui-spinner.minus-plus .ui-spinner-up {
  top: -1px;
}

/** table.bordertable **/
table.bordertable thead th {
  background: var(--theme-color-white);
  border-right: 0;
}

table tr.even td {
  background: unset;
}

/** table.sortable-head **/
table.sortable-head th {
  font-size: 0.75rem;

  vertical-align: middle;
}
/*
  table.sortable-head th a {
  }
  */

table.sortable-head th a.sort {
  display: block;
  position: relative;
  width: 100%;
  text-align: left !important;
}

table.sortable-head th a.sort i {
  position: absolute;
  right: 0;
  top: 0.1875em;
}

table.sortable-head th.data-type-numeric a.sort {
  text-align: right !important;
  padding-right: 1em;
}

/** table.clickable - clickable td-s **/
html.touch-mode-off table.clickable-cols tr:hover td.clickable {
  background: var(--theme-color-dark-b1);
  color: #000;
}
html.touch-mode-off table.clickable-cols tr.clicked:hover td.clickable {
  background: #d4e2f1;
  color: #000;
}

/*** Order Lists ***/
/* button in cell */
:where(ul.mode-cells, ul.mode-rows) > li.item .noted-list,
:where(ul.mode-cells, ul.mode-rows) > li.item div.order-lists {
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  display: block;
}
ul.mode-cells > li.item :where(.noted-list, div.order-lists) {
  position: absolute;
  right: 8px;
  top: 7px;
}

ul.mode-cells > li.item .noted-list,
ul.mode-cells > li.item div.order-lists img {
  width: 30px !important;
  height: 30px !important;
}

ul.mode-cells > li.item .noted-list {
  top: -2px;
}

ul.mode-cells > li.item .noted-list {
  font-size: 17px;
  top: 9px;
  position: relative;
}

/** section.order-lists-popup .order-lists-manager section.order-lists **/
section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .hidden-toolbar
  > div.delete {
  min-width: 40px;
  text-align: center;
  font-size: 20px;
}
section.order-lists-popup
  > .order-lists-manager
  > .order-lists
  > div
  > article
  > .visible-order-list
  > .trash {
  font-size: 1.2em;
  margin: 0 0px 0 0;
}
/*
  section.order-lists-popup > .order-lists-manager > .order-lists > div > article > .visible-order-list > .trash > i.fa {

  }
  */

/** Buttons "Add to shopcart" **/
/*
  button.add-to-shopcart:active,
  button.add-to-shopcart:focus,
  button.add-to-shopcart {
  }
  */
/*
  button.add-to-shopcart:hover {

  }
  */

/** Button Icons **/
input.quantity.ui-spinner-input {
  font-size: 24px;
}
ul.mode-cells .input-and-button-text .ui-spinner,
ul.mode-cells .input-unit-button-text .ui-spinner {
  position: relative;
  top: 0;
  left: 0;
  height: var(--button-normal-height) !important;
  border: 1px solid #444;
}
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  input.quantity.ui-spinner-input {
  font-size: 24px;
}
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button {
  padding: 0;
  width: 60%;
}
ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.number,
ul.articles-bundle-list.mode-rows
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.text,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.number,
ul.articles-bundle-list.mode-cells
  > li.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.text {
  padding: 0 10px 0 0;
  width: 40%;
}

div.ym-grid.layout-title.order-lists section.toolbar.orderlists {
  display: none;
}

/** Footer Prefix **/
.ym-wrapper.wide.layout-footer-prefix {
  margin: 2em 0 0 0;
  min-height: 550px;
  /* 2022-03-08 because of lazy load prefix.jpg */
  background: none;
  position: relative;
}

.ym-wrapper.wide.layout-footer-prefix > .ym-wbox {
  position: absolute;
  bottom: 40px;
  width: 100%;
  max-width: none;
}

.ym-wrapper.wide.layout-footer-prefix > .ym-wbox > .content {
  max-width: var(--wrapper-max-width);
  margin: 0 auto;
}

/* the wide picture container in the footer prefix */
.ym-wrapper.wide.layout-footer-prefix div.prepend {
  position: absolute;
  bottom: 0;
  text-align: center;
  max-width: 1920px;
  margin: 0 auto;
}

.ym-wrapper.wide.layout-footer-prefix div.prepend img {
  max-width: 100%;
  height: auto;
  width: 100%;
}

.ym-wrapper.wide.layout-footer-prefix div.content div.title-small {
  font-size: 1.375rem; /* 2025-09-11 EXPERIMENTAL rem */

  background: var(--theme-color-bright);
  color: var(--theme-color-bright-opposite);
  padding: 5px 15px;
  margin-bottom: 24px;
  font-weight: 600;
  width: auto;
  display: inline-block;

  text-transform: uppercase;
}

.ym-wrapper.wide.layout-footer-prefix div.content div.title-big div {
  font-size: 2.3125rem; /* 2025-09-11 EXPERIMENTAL rem */

  font-weight: 100;
  width: max-content;

  margin: 0 0 5px 0;
  text-transform: uppercase;
}
.ym-wrapper.wide.layout-footer-prefix div.content div.title-big div span {
  padding: 0 10px;
  background: var(--theme-color-dark);
  color: var(--theme-color-dark-opposite);
}

.ym-wrapper.wide.layout-footer-prefix div.content div.info {
  background: var(--theme-color-bright);
  font-weight: 100;
  color: var(--theme-color-white);
  font-size: 20px;
  padding: 20px 30px;
  max-width: 830px;
  display: inline-block;
  margin-bottom: -20px;
}

/*** tiny-slider ***/
.tns-nav > .tns-nav-active {
  background: #000 !important;
}

.pictures-additional .tns-nav > [aria-controls] {
  margin: 0 10px !important;
  background: #c1c1c1;
}

/**** CMS List 19.05.2025 Moved to cms_lists.css ****/

/**
	* article.cms-list-item
	*  + section.picture
	*  | + a
	*  |   - img
	*  + div.info
	*  | + div.icon
	*  | | + a
	*  | |   - img
	*  | + div.text
	*  |   + section.title
	*  |   + section.description
	* --------------------------
	*/
article.cms-list-item {
  /* dimensions */
  --list-item-height: var(--list-items-height);
  --list-item-width: var(--cms-list-item-preview-width);
  --picture-height: 180px;
  --info-height: calc(var(--list-item-height) - var(--picture-height));
  --icon-height: 40px;
  --icon-height: 0px;
  --text-height: calc(var(--info-height) - var(--icon-height));
  --title-height: 28px;
  --description-height: calc(var(--text-height) - var(--title-height));
  height: var(--list-item-height);
  width: var(--list-item-width);

  /* paddings */
  --info-padding: 10px 20px;

  /* colors */
  --info-background-color: var(--theme-color-dark);
  --list-item-border: 1px solid var(--info-background-color);
  --info-background: var(--info-background-color);
  --info-foreground-color: var(--theme-color-dark-opposite);
  border: var(--list-item-border);

  /* fonts */
  --title-font-size: 16px;
  --title-font-weight: 600;
  --description-font-size: 13px;
  --description-font-weight: 400;
}

/*** .cms-list-item > .picture ***/
article.cms-list-item > .picture {
  height: var(--picture-height);
}
/**  .cms-list-item > .picture > a **/
article.cms-list-item > .picture > :where(a, div.a) {
  width: 100%;
  height: var(--picture-height);

  overflow: hidden;
}
/* .cms-list-item > .picture > a > img */
article.cms-list-item > .picture > :where(a, div.a) > img {
  max-width: calc(var(--list-item-width) - 0px);
  max-height: calc(var(--picture-height) - 0px);
}

/*** .cms-list-item > .info ***/
article.cms-list-item > .info {
  display: grid;
  grid-template-areas:
    "icon"
    "text";

  height: var(--info-height);
  padding: var(--info-padding);
  background: var(--info-background);
  color: var(--info-foreground-color);
}
/*** .cms-list-item > .info a ***/
article.cms-list-item .info :where(a, div.a) {
  color: var(--info-foreground-color);
}
/** .cms-list-item > .info > .icon **/
article.cms-list-item > .info > .icon {
  grid-area: icon;
  display: none;
  /* 14.09.2022 Upload of icons is not realized, so hide it for a while */
  height: var(--icon-height);
  text-align: center;
}
article.cms-list-item > .info > .icon img {
  max-height: var(--icon-height);
  width: auto;
}
/* .cms-list-item > .info > .icon > a */
article.cms-list-item > .info > .icon > :where(a, div.a) {
  display: block;
  height: var(--icon-height);
}
/* .cms-list-item > .info > .icon > a > img */
/*
  article.cms-list-item > .info > .icon > a > img {

  }
  */

/** .cms-list-item > .info > .text **/
article.cms-list-item > .info > .text {
  grid-area: text;
  height: var(--text-height);
}

/* .cms-list-item > .info > .text > .title */
article.cms-list-item > .info > .text > .title {
  height: var(--title-height);
  font-size: var(--title-font-size);
  font-weight: var(--title-font-weight);
}
/* .cms-list-item > .info > .text > .description */
article.cms-list-item > .info > .text > .description {
  height: var(--description-height);
  font-size: var(--description-font-size);
  font-weight: var(--description-font-weight);
}

/**** no records ****/
/*
  div.noRecords {

  }
  */

/**** .lazyNextPages ****/
.lazyNextPages {
 /*  margin-top: 1em; */ /* 13.06.2025 Please adjust the gap with padding-bottom of the included containers. */
  width: 100%;
  display: grid;
  grid-template-areas:
    "content content"
    "button-all button-next";
  grid-template-columns: 1fr 1fr;
}



.lazyNextPages > .content {
  grid-area: content;
}

.lazyNextPages > button.next {
  grid-area: button-next;
  margin: 0 0 0 5px;
}

.lazyNextPages > button.all {
  grid-area: button-all;
  margin: 0 5px 0 0;
}

/* 2025-08-19 WORKAROUND until lazyNextPages JavaScript implemented for the button "Show all" */
:root[data-focus-outline="visible"] .lazyNextPages {
  grid-template-areas:
    "content content"
    "button-next button-next";
}

:root[data-focus-outline="visible"] .lazyNextPages > button.next {
  margin: 0;
}

:root[data-focus-outline="visible"] .lazyNextPages > button.all {
  display: none;
}
/* END: 2025-08-19 WORKAROUND until lazyNextPages JavaScript implemented for the button "Show all" */

@container containerMainContent (width < 34.375rem) {
  .lazyNextPages {
    grid-template-areas: "content" "button-all" "button-next";
    grid-template-columns: 100%;
  }
  .lazyNextPages > button.all {
    margin: 0em 0 0 0;
  }
  .lazyNextPages > button.next {
    grid-area: button-next;
    margin: 0.5em 0 0 0px;
  }
}

/**** .lazyNextPagesPrev ****/
.lazyNextPagesPrev {
  width: 100%;
  display: grid;
  grid-template-areas: "button-prev";
}

.lazyNextPagesPrev > button.prev {
  grid-area: button-prev;
  margin-bottom: 10px;
}

/**** .video-wrapper (for $.widgets.videoWrapper ***/
.video-wrapper {
  width: 100%;
}
.video-wrapper > video {
  width: 100%;
}
.video-wrapper > label {
  font-weight: 600;
}

/**** nav.menuFiltersTouchScreen .panel-note-wrapper ****/
nav.menuFiltersTouchScreen .ui-widget-content {
  border-width: 0;
}
nav.menuFiltersTouchScreen .ui-slider.ui-widget.ui-widget-content {
  border-width: 1px;
}
/*
  nav.menuFiltersTouchScreen .panel-note-wrapper {
  }
  */

nav.menuFiltersTouchScreen .panel-note-wrapper > .panel-note-bar {
  --panel-note-bar-height: 60px;
  border: 0;
  background: var(--mm-color-background);
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper.has-title-note
  > .panel-note-bar {
  --panel-note-bar-height: 60px;
}

nav.menuFiltersTouchScreen .panel-note-wrapper > .panel-note-bar > div {
  padding: 10px 20px;
  border-bottom: 1px solid var(--mm-color-border);
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper.has-title-note
  > .panel-note-bar
  > div {
  height: var(--panel-note-bar-height);
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper.has-title-note
  > .panel-note-bar
  > .panel-note-title {
  padding-top: calc(var(--panel-note-bar-height) / 2 - 20px);
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-title,
nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-title
  > .title-main {
  color: var(--mm-color-text);
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-title
  > .title-note {
  color: var(--mm-color-text-dimmed);
}

/* vote stars indicator in the title note */
nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-title
  > .title-note
  > .vote-stars {
  display: inline-block;
  top: 1px;
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-button {
  text-align: right;
  position: relative;
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper.has-title-note
  > .panel-note-bar
  > .panel-note-button {
  padding-top: calc(var(--panel-note-bar-height) / 2 - 10px);
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-button
  > i.fa {
  position: relative;
  right: 0;
}
nav.menuFiltersTouchScreen .panel-note-wrapper > .panel-note-bar > .panel-note-button > i.fa::after

/* nav.menuFiltersTouchScreen .panel-note-wrapper > .panel-note-bar > .panel-note-button > i.fa::before */ {
  border: 2px solid rgba(0, 0, 0, 0.3);
  border: 2px solid var(--mm-color-button);
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-button
  > i.fa::after,
nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-button
  > i.fa::before {
  content: "";
  border-bottom: none;
  border-right: none;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  display: block;
  width: 10px;
  height: 10px;
  margin: auto;
  position: absolute;
  top: -9px;
  bottom: 0;
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper.panel-note-visible.is-closing
  > .panel-note-bar
  > .panel-note-button
  > i.fa::after,
nav.menuFiltersTouchScreen
  .panel-note-wrapper
  > .panel-note-bar
  > .panel-note-button
  > i.fa::after {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  -webkit-transition: 1s;
  -ms-transition: 1s;
  transition: 1s;
  right: 5px;
  left: auto;
  top: -9px;

  border-color: var(--mm-color-text);
  border-width: 1px;
  width: 10px;
  height: 10px;
}

nav.menuFiltersTouchScreen
  .panel-note-wrapper.panel-note-hidden.is-opening
  > .panel-note-bar
  > .panel-note-button
  > i.fa::after,
nav.menuFiltersTouchScreen
  .panel-note-wrapper.panel-note-visible
  > .panel-note-bar
  > .panel-note-button
  > i.fa::after {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 1s;
  -ms-transition: 1s;
  transition: 1s;
  top: -2px;
}
/*
  nav.menuFiltersTouchScreen .panel-note-wrapper > .panel-note {
  }

  nav.menuFiltersTouchScreen .panel-note-wrapper > .panel-note > .title {
  }
  */

nav.menuFiltersTouchScreen .panel-note-wrapper > .panel-note > .content {
  padding: 10px 20px;
  background: var(--theme-color-white);
}

/**** Pseudo states****/
input:indeterminate {
  background-color: #019901;
  /* 2023-06-29 Has no effect */
}

.ym-form input[type="checkbox"]:invalid {
  animation-name: required_is_invalid;
  animation-duration: 250ms;
  animation-direction: alternate;
  animation-iteration-count: 1;
}

.ym-form select:invalid + .ui-selectmenu-button.ui-selectmenu-button-closed {
  border: 1px solid var(--theme-color-white);
}

.ym-form select:invalid + .ui-selectmenu-button.ui-selectmenu-button-closed,
.ym-form input[type="date"]:invalid,
.ym-form input[type="email"]:invalid,
.ym-form input[type="number"]:invalid,
.ym-form input[type="text"]:invalid,
.ym-form input[type="password"]:invalid {
  animation-name: required_is_invalid;
  animation-duration: 250ms;
  animation-direction: alternate;
  animation-iteration-count: 1;
  /*animation-play-state: paused;*/
  border-bottom-color: var(--theme-color-input-invalid);
}

@keyframes required_is_invalid {
  from {
    /*background-color: var(--theme-color-bright);*/
    background-color: var(--theme-color-input-invalid);
  }
  to {
    background-color: var(--theme-color-white);
  }
}

.ym-form
  :where(
    select:required:valid,
    input[type="checkbox"]:required:valid,
    input[type="date"]:required:valid,
    input[type="email"]:required:valid,
    input[type="number"]:required:valid,
    input[type="text"]:required:valid,
    input[type="password"]:required:valid
  )
  ~ .ym-error
  > :where(.ym-message.isEmpty, .ym-message.required, .ym-message.badCaptcha) {
  display: none;
}

/**** $.passwordEye() ****/
input[type="password"] ~ .passwordEye {
  background: var(--theme-color-white);
}

input[type="password"]:invalid ~ .passwordEye {
  color: var(--theme-color-input-invalid);
}

/**** icon-process ****/
section.icon-process {
  /*border: 1px solid red;*/
  display: flex;
  align-items: center;
}
section.icon-process.icon-text > div:first-child {
  padding-right: 5px;
}
section.icon-process.text-icon > div:first-child {
  padding-right: 10px;
}

/*** ui-dialog.dialog-icon-content ***/
.ui-dialog.dialog-icon-content .ui-dialog-content > section {
  --padding: 15px;
  display: flex;
}

.ui-dialog.dialog-icon-content .ui-dialog-content > section > .icon {
  padding: 0 var(--padding) 0 0;
}
.ui-dialog.dialog-icon-content
  .ui-dialog-content
  > section
  > .icon
  > i[class^="fa"] {
  font-size: 34px;
}

.ui-dialog.dialog-icon-content
  .ui-dialog-content
  > section
  > .content
  > form
  > div {
  padding: 0 0 1em 0;
}

/**** @package SiteUploads ****/
section.site-uploads {
  display: grid;
  grid-template-areas:
    "button info"
    "iframe iframe";
}

section.site-uploads > .button {
  grid-area: button;
}

section.site-uploads > .info {
  grid-area: info;
  align-self: center;
  justify-self: end;
}

section.site-uploads > .info > .icon-process {
  font-style: italic;
}

section.site-uploads > .info > .status > div {
  text-align: right;
}

section.site-uploads > .info > .status > div::after {
  content: ".";
}

section.site-uploads > .info > .status.state-block > .free {
  display: none;
}

section.site-uploads > .info > .status > .free > .value {
  /*color: var(--message-color-info-icon);*/
  color: #090;
  font-weight: 600;
}

section.site-uploads > .info > .status > .block > .value {
  color: #a00;
  font-weight: 600;
}

section.site-uploads > .iframe {
  grid-area: iframe;
  display: none;
}

section.site-uploads > .iframe > iframe {
  width: 100%;
}

@media (max-width: 37.5rem) {
  /* 600px */
  section.site-uploads {
    grid-template-areas:
      "iframe"
      "info"
      "button";
  }

  section.site-uploads > .info {
    padding: 10px 0;
  }

  section.site-uploads > .button button {
    width: 100%;
  }
}

/*** site-uploads iframe accordion headers ***/
#siteUploads.ui-accordion .ui-accordion-header > .media {
  display: grid;
  grid-template-areas: "micro fileName dimensions fileSize";
  grid-template-columns: clamp(50px, 3rem, 70px) auto 6.25rem 5rem;
}
@media (max-width: 31.25rem) {
  /* 500px */
  #siteUploads.ui-accordion .ui-accordion-header > .media {
    grid-template-areas: "micro fileName fileSize";
    grid-template-columns: clamp(50px, 3rem, 70px) 3fr 2fr;
  }
  #siteUploads.ui-accordion .ui-accordion-header > .media > .dimensions {
    display: none;
  }
}
/*
#siteUploads.ui-accordion .ui-accordion-header > div {

}
*/

#siteUploads.ui-accordion .ui-accordion-header > .media > :first-child {
  padding-left: 26px;
  /* because of the absolute position of the .ui-accordion-header-icon */
}

#siteUploads.ui-accordion .ui-accordion-header > .media > .micro {
  grid-area: micro;
  justify-self: start;
  --img-max-size: 0.875rem;
}
#siteUploads.ui-accordion .ui-accordion-header > .media > .micro > img {
  width: 100%;
  max-width: var(--img-max-size) !important;
  max-height: var(--img-max-size) !important;
}

#siteUploads.ui-accordion .ui-accordion-header > .media > .fileName {
  justify-self: start;
  /* handling overflow */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#siteUploads.ui-accordion .ui-accordion-header > .media > .dimensions {
  grid-area: dimensions;
  justify-self: end;

  padding-left: 1em;
  /* handling overflow */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#siteUploads.ui-accordion .ui-accordion-header > .media > .fileSize {
  grid-area: fileSize;
  justify-self: end;
  /* handling overflow */
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*** site-uploads iframe accordion panes ***/
#siteUploads.ui-accordion .ui-accordion-content {
  padding: 10px 10px 10px 10px;

  --picture-max-width: 9.375rem;
}

#siteUploads.ui-accordion .ui-accordion-content > article > .pane-grid {
  display: grid;
  grid-template-areas: "thumbnail info toolbar";
  grid-template-columns: var(--picture-max-width) auto 20px;
}

/** grid-area: thumbnail; **/
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .thumbnail {
  grid-area: thumbnail;
  /*max-width: 150px;*/
  align-items: start;
  /*justify-self: center;*/
}

/* thumbnail img */
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .thumbnail
  img {
  width: 100%;
  height: auto;
}

/* "no picture" */
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .thumbnail
  .no-picture {
  text-align: center;
}
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .thumbnail
  .no-picture
  > span
  i.fa {
  font-size: calc(var(--picture-max-width) * 0.7);
}
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .thumbnail
  .no-picture
  > .label {
  display: none;
}

/** grid-area: info; **/
#siteUploads.ui-accordion .ui-accordion-content > article > .pane-grid > .info {
  --padding: 10px;

  grid-area: info;
  justify-self: start;

  padding-left: calc(var(--padding) * 2);
}

#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .info
  > .file-info {
  padding-top: var(--padding);
  width: fit-content;
}
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .info
  > .file-info
  > div {
  display: grid;
  grid-template-columns: minmax(7.5rem, 25%) minmax(0px, 75%);
}
/*
#siteUploads.ui-accordion .ui-accordion-content > article > .pane-grid > .info > .file-info.one-row > div {
  grid-template-columns: auto auto;
}
*/
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .info
  > .file-info
  > div
  > label {
  font-weight: 600;
  padding-right: var(--padding);
}
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .info
  > .file-info
  > div
  > label::after {
  content: ":";
}

/* file-name */
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .info
  > .file-name {
  font-weight: 600;
  /* handling breaking line */
  word-break: break-all;
}

/* file-download */
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .info
  > .file-download {
  padding-top: var(--padding);
}

#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .info
  > .file-download
  > a
  > span {
  border-bottom-style: solid;
}

/** grid-area: toolbar; **/
#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .toolbar {
  grid-area: toolbar;
  justify-self: end;
}

#siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .toolbar
  i[class^="fa"].delete {
  cursor: pointer;
  color: var(--theme-color-dark);
  font-size: 1.3em;
}

html.touch-mode-off
  #siteUploads.ui-accordion
  .ui-accordion-content
  > article
  > .pane-grid
  > .toolbar
  i[class^="fa"].delete:hover {
  color: var(--theme-color-action-price);
}


@media (max-width: 40rem) {
  /* 640px = 40rem */
  #siteUploads.ui-accordion .ui-accordion-content  {
    --picture-max-width: 6.25rem;
    padding: 0.625rem;
  }
}

@media (max-width: 31.875rem) {
  /* 350px */
  #siteUploads.ui-accordion .ui-accordion-content > article > .pane-grid {
    display: grid;
    grid-template-areas:
      "thumbnail toolbar"
      "info info";
    grid-template-columns: auto 20px;
  }

  /* thumbnail img */
  #siteUploads.ui-accordion
    .ui-accordion-content
    > article
    > .pane-grid
    > .thumbnail
    img {
    width: auto;
    max-height: 10vh;
  }

  #siteUploads.ui-accordion
    .ui-accordion-content
    > article
    > .pane-grid
    > .info {
    padding: 0;
  }
}



/*** site-uploads ui-dialog ***/
/* label-span */
.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .content
  > form
  .label-span:first-letter {
  text-transform: uppercase;
}
.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .content
  > form
  .label-span
  > label::after {
  content: ": ";
}
.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .content
  > form
  .label-span
  > span {
  font-weight: 600;
}

.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .content
  > form
  .label-span
  > span::after {
  content: ".";
}

/** site-uploads ui-dialog upload **/
.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .icon
  > i[class^="fa"].upload {
  color: var(--message-color-info-icon);
}
.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .content
  > form
  > label.block {
  display: block;
  font-weight: 600;
  padding: 0 0 1em 0;
}
.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .content
  > form
  > label.block::after {
  content: ": ";
}
.ui-dialog.dialog-icon-content.siteUploads
  .ui-dialog-content
  > section
  > .content
  > form
  > div.input-file {
  text-align: center;
}

/*** ul.site-uploads : HTML version without interactive elements ***/
ul.site-uploads {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

ul.site-uploads > li {
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  --padding: 15px;
  --thumbnail-width: 40px;
  --thumbnail-height: var(--thumbnail-width);
  --info-width: calc(100% - var(--thumbnail-width));

  padding-top: var(--padding);
}

ul.site-uploads > li:first-child {
  padding-top: 0;
}
/*
ul.site-uploads > li > div {
}
*/

ul.site-uploads > li > .thumbnail {
  width: var(--thumbnail-width);
  height: var(--thumbnail-height);
  line-height: var(--thumbnail-height);
}
ul.site-uploads > li > .thumbnail img {
  width: auto;
  height: auto;
  max-width: var(--thumbnail-width);
  max-height: var(--thumbnail-height);
}

ul.site-uploads > li > .info {
  width: var(--info-width);
  padding-left: var(--padding);

  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
}
ul.site-uploads > li > .info > .filename {
  padding-right: var(--padding);
  flex-grow: 1;
  word-break: break-word;
}

ul.site-uploads > li > .info > .filesize {
  text-align: right;
  white-space: nowrap;
}

@media (max-width: 25rem) {
  /* 400px */
  ul.site-uploads > li > .info > .filesize {
    font-size: 0.9em;
  }
}
@media (max-width: 22.5rem) {
  /* 360px */
  ul.site-uploads > li > .info > .filesize {
    font-size: 0.8em;
    font-weight: 600;
  }
}

/*** Field "Upload" as an element of App_Form (not App_SubForm) ***/
.ym-fbox.field-site-uploads.uploads {
  display: flex;
}
.ym-fbox.field-site-uploads.uploads > div.label-info {
  width: var(--ym-form-label-width);
  display: flex;
  flex-direction: column;
}
.ym-fbox.field-site-uploads.uploads > div.label-info > div {
  padding-top: 0.5em;
}

.ym-fbox.field-site-uploads.uploads > section.site-uploads {
  width: calc(100% - var(--ym-form-label-width));
}
fieldset.subform .ym-fbox.field-site-uploads.uploads > section.site-uploads {
  width: 100%;
}

/** .ym-full version **/
.ym-full .ym-fbox.field-site-uploads.uploads {
  margin-top: var(--ym-form-text-label-top);
  flex-direction: column;
}
.ym-full .ym-fbox.field-site-uploads.uploads > div.label-info {
  width: 100%;
}
.ym-full .ym-fbox.field-site-uploads.uploads > section.site-uploads {
  margin-top: 1em;
  width: 100%;
}

/**** @package OCI ****/
/***  ***/
.ui-dialog.dialog-icon-content.ociShopcartExport
  .ui-dialog-content
  > section
  > .content
  .hook-url {
  font-weight: 600;
}

/**** table.paginable-articles-table ****/
table.paginable-articles-table {
  width: 100%;
  margin-bottom: 0;
}

table.paginable-articles-table .col-availability {
  width: 20px;
  /* 3.5088% */
  text-align: center;
}
table.paginable-articles-table .col-part-number {
  width: 8%;
  text-align: center;
  white-space: nowrap;
}
table.paginable-articles-table .col-article-number {
  width: 8.7719%;
  /* 50 */
  min-width: 120px;
}
table.paginable-articles-table.with-part-numbers .col-article-number {
  width: 14%;
}
/*
table.paginable-articles-table .col-article-name {

}
*/
table.paginable-articles-table .col-article-name div.availability-number,
table.paginable-articles-table .col-article-name div.part-number {
  display: none;
}
table.paginable-articles-table .col-price-item {
  width: 16.6667%;
  /* 95 */
  text-align: right;
}
table.paginable-articles-table .col-count-units {
  width: 7.7193%;
  /* 44 */
  width: 10%;
  text-align: center;
}
table.paginable-articles-table .col-count-items {
  width: 7.7193%;
  /* 44 */
  width: 10%;
  text-align: center;
}
table.paginable-articles-table .col-price-total {
  width: 13.1579%;
  /* 75 */
  text-align: right;
}
table.paginable-articles-table.with-variable-packing-units .col-price-total {
  width: 10%;
}
table.paginable-articles-table .col-put-in-shopcart {
  width: var(--button-normal-height);
  min-width: var(--button-normal-height);
  padding-left: 0;
  padding-right: 0;
  text-align: center;
}

table.paginable-articles-table .col-put-in-shopcart i[class^="fa"] {
  /*color: #001BE2;*/
  font-size: 1.2em;
}

table.paginable-articles-table .col-order-lists {
  width: calc(var(--button-normal-height) + 8px);
  padding-left: 8px;
  padding-right: 0;
  text-align: center;
}
table.paginable-articles-table .col-order-lists > div {
  cursor: pointer;
}

table.paginable-articles-table td input {
  width: 60%;
  text-align: center;
}

/* table.paginable-articles-table: button "add to shopcart" */

table.paginable-articles-table td.col-put-in-shopcart > div {
  container-name: containerPutInShopcart;
  container-type: inline-size;
}
table.paginable-articles-table
  td.col-put-in-shopcart
  > div
  > form
  > .input-and-button-text
  > ul
  > li.button,
table.paginable-articles-table
  td.col-put-in-shopcart
  > div
  > form
  > .input-and-button-text
  > ul
  > li.button
  button {
  width: 100%;
}
@container containerPutInShopcart (width < 150px) {
  button {
    justify-content: center;
  }
  button > .caption {
    display: none !important;
  }
}

html.touch-mode-off table.paginable-articles-table a:hover {
  text-decoration: underline;
}

table.paginable-articles-table + .bundle-bar {
  margin-top: 1em;
}

table.paginable-articles-table + .bundle-bar .filter-list {
  display: none;
  /* @see $_widgets.paginableArticlesTable too. */
}

/**** section.pricesHidden ****/
section.pricesHidden {
  display: inline-block;
  cursor: pointer;
}
section.pricesHidden > div {
  display: inline-block;
}
section.pricesHidden > div:first-child {
  padding: 0 0.5em;
}

/**** noRecords ****/
div.noRecords {
  padding: 1em 0;
}

/**** section.wizard-step ****/
section.wizard-step > .wizard-object > table.label-content th {
  padding-left: 0;
}

section.wizard-step > .wizard-object > table.label-content th::after {
  content: ":";
}

/**** @package Accessibility ****/
/*** input ***/

:root[data-focus-outline="visible"] span:focus-within {
  width: calc(100% - var(--accessibility-focus-input-width-delta));
  margin-left: var(--accessibility-focus-width);
}

/*** textarea ***/
:root[data-focus-outline="visible"] textarea:focus {
  width: calc(100% - var(--accessibility-focus-input-width-delta));
  margin-left: var(--accessibility-focus-width);
}

:root[data-focus-outline="visible"] .ym-form span:focus-within,
:root[data-focus-outline="visible"] .ym-form textarea:focus {
  width: calc(
    var(--ym-form-field-width) - var(--accessibility-focus-input-width-delta)
  );
  /* margin-left: 0;  */
}

/***  section.accessibilityToolbar ***/
section.accessibilityToolbar {
  --font-size: 1rem;
  font-size: var(--font-size);

  --button-width: calc(var(--font-size) * 1.5);
  --button-height: calc(var(--font-size) * 1.5);
  --button-icon-height: calc(var(--button-height) * 0.8);

  --cell-button-width: calc(var(--button-width) + var(--accessibility-focus-width));
  --cell-button-height: calc(var(--button-height) + var(--accessibility-focus-width));

  --cell-margin: calc(var(--design-color-bar-height) + (var(--header-height) - var(--cell-button-height)) / 2);

  position: fixed;

  --this-top: calc(var(--accessibility-toolbar-top) + var(--cell-margin));
  top: var(--this-top);

  left: min(var(--cell-margin), 60px);
  cursor: pointer;
  z-index: 2;

  background: #fff;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}

html.iframe-route section.accessibilityToolbar {
  display: none;
}

section.accessibilityToolbar[data-switcher="on"] {
  box-shadow: 2px 2px 15px;
  padding: 2px 8px 2px 4px;

  --cell-button-width: calc(var(--button-width) + 4px);
  --cell-button-height: calc(var(--button-height) + 4px);
}

@media (max-width: 81.25rem) {
  section.accessibilityToolbar {
    --font-size: 2rem;

    --accessibility-toolbar-top: var(--main-top);
    --cell-margin: calc((var(--main-line-height) - var(--cell-button-height)) / 2);

    left: auto;
    right: var(--cell-margin);
    flex-direction: row;
    gap: 4px;
  }

  section.accessibilityToolbar > section > div {
    display: none;
  }

  html.development section.accessibilityToolbar {
    flex-direction: row;
    left: auto;
    right: calc(var(--cell-margin) + 50px);
  }
}

section.accessibilityToolbar[data-switcher=""] > section {
  display: none;
}

section.accessibilityToolbar[data-switcher=""] > section.accessibilitySwitcher {
  display: flex;
}



section.accessibilityToolbar > section {
  width: var(--cell-button-width);
  width: max-content;
  height: var(--cell-button-height);
  display: flex;
  gap: 0.25em;
}
/* section.accessibilityToolbar > section > button:focus,
section.accessibilityToolbar > section > button:hover,
section.accessibilityToolbar > section > button:active, */
section.accessibilityToolbar > section > button {
  padding: 0;
  width: 100%;
  width: var(--button-width); /* 10.06.2025 EXPERIMENTAL ON */
  height: var(--button-height);

  margin: auto;

  background-color: transparent;
  border-color: transparent;

  cursor: pointer;
}

section.accessibilityToolbar > section > button:focus {
  margin-top: var(--accessibility-focus-width);
  margin-bottom: var(--accessibility-focus-width);
}

section.accessibilityToolbar > section > button > i[class^="fa-"] {
  font-size: var(--button-icon-height);

  color: var(
    --theme-color-dark
  ); /* 2025-06-13 because iOS shows the icons and borders with an inherit [blue] color. */
}

section.accessibilityToolbar[data-switcher="on"] > section > button:focus {
  margin-top: 2px;
}
/* 23.07.2025 OFF. Now the buttons looks like just icons.
section.accessibilityToolbar[data-switcher="on"] > section > button {
  border: 1px solid var(--theme-color-black-1);

  background: #ededed;
} */


.ui-tooltip i.fa-duotone.fa-text-size,
section.accessibilityToolbar > section > button[name="accessibilityFontSize"] > i.fa-duotone.fa-text-size {
  --fa-secondary-color: var(--theme-color-dark);
  --fa-primary-color: var(--theme-color-dark);
  font-size: calc(var(--button-icon-height) - 6px);
}

/* :root[data-font-size=""] section.accessibilityToolbar > section > button[name="accessibilityFontSize"] > i[class^="fa-"] {
  font-size: calc(var(--button-icon-height));
} */

section.accessibilityToolbar > section > button[name="accessibilityBarrierReport"] > i[class^="fa-"] {
  font-size: calc(var(--button-icon-height) - 6px);
}

section.accessibilityToolbar > section > button[name="accessibilityBarrierReport"] > .fa-stack {
  width: 88%;
  height: var(--button-icon-height);
  line-height: var(--button-icon-height);
}

section.accessibilityToolbar > section > button[name="accessibilityBarrierReport"] > .fa-stack > i.icon-1 {
  font-size: calc(var(--button-icon-height) * 0.7);
  left: 0;
  right: auto;
  text-align: left;
  /* --theme-color-dark: #000; */
  /* 23.12.2024 #333 looks here more lightly as #333 by the button "contrast" */
  --fa-primary-color: var(--fa-secondary-color);
}

section.accessibilityToolbar > section > button[name="accessibilityBarrierReport"] > .fa-stack > i.icon-2 {
  font-size: calc(var(--button-icon-height) * 0.5);
  width: auto;
  left: auto;
  right: 0;
  top: auto;
  bottom: -0.5em;
  text-align: right;
}

.ui-tooltip-content .fa-stack.barrier-report {
  width: 2em;
}
.ui-tooltip-content .fa-stack.barrier-report > i.icon-1 {
  --fa-primary-color: var(--fa-secondary-color);
}
.ui-tooltip-content .fa-stack.barrier-report > i.icon-2 {
  width: auto;
  left: auto;
  right: 0;
  top: auto;
  bottom: -0.2em;
  text-align: right;
}

/** section.accessibilityToolbar, caption (right of the button) **/
section.accessibilityToolbar > section > div {
  line-height: var(--button-height);
  line-height: var(--cell-button-height);
}
section.accessibilityToolbar[data-switcher="on"] > section > div {
  line-height: calc(var(--button-height) + 2px);
}




















/**** ArticlesBundleList: section-div rendering strategy ****/


/* mode-cells */
/** article()->cell() **/
section.articles-bundle-list.mode-cells {
  border: 0px solid blue;
  width: 100%;

  --grid-gap: var(--layout-columns-gap);

  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  grid-gap: var(--grid-gap);

  padding-bottom: var(--grid-gap);
}

@container containerMainContent (width < 59.375rem) { /* ~ 950px */
  div.ym-column > div > div.ym-cbox section.articles-bundle-list.mode-cells {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@container containerMainContent (width < 46.875rem) { /* ~ 750px */
  div.ym-column > div > div.ym-cbox section.articles-bundle-list.mode-cells {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@container containerMainContent (width < 40.625rem) { /* ~ 650px */
  div.ym-column > div > div.ym-cbox section.articles-bundle-list.mode-cells {
    grid-template-columns: 1fr 1fr;
  }
}

@container containerMainContent (width < 28.125rem) { /* ~ 450px */
  div.ym-column > div > div.ym-cbox section.articles-bundle-list.mode-cells {
    grid-template-columns: 1fr;
  }
}

section.articles-bundle-list.mode-cells > div.item {
  --article-height: 18.125rem; /* --article-height: 290px; */
  --section-description-height: 3.3em; /* if line-height: 1.1 => 3em + 0.1x3em = 3.3em */
  --section-prices-bottom: 0.0625rem; /* --section-prices-bottom: 1px; */
  --section-prices-price_value-height: 1.875rem; /* --section-prices-price_value-height: 30px; */
  --section-availability-height: 0px;
  --section-availability-bottom: 0px;
  --section-buttons-height: 0px;
  --section-buttons-bottom: 0px;

  width: 100%; /* by grid */

   padding: 0;
   margin: 0;
}

/* */
section.articles-bundle-list.mode-cells > div.item.res-availability {
  --article-height: 23.25rem; /* --article-height: 372px; */
  --section-availability-height: 1.25rem; /* --section-availability-height: 20px; */
  --section-availability-bottom: 0.5rem; /* --section-availability-bottom: 8px; */
  --section-prices-bottom: calc(var(--section-availability-height) + var(--section-availability-bottom));
}

section.articles-bundle-list.mode-cells > div.item.res-buttons {
  --article-height: 23.25rem; /* --article-height: 372px; */
  --section-buttons-height: var(--button-normal-height);
  --section-buttons-bottom: 0.5rem; /* --section-buttons-bottom: 8px;  */
  --section-prices-bottom: calc(var(--section-buttons-height) + var(--section-buttons-bottom) + 0.125rem);
}

section.articles-bundle-list.mode-cells > div.item.res-availability.res-buttons {
  --article-height: 23.25rem; /* --article-height: 372px; */
  --section-availability-bottom: calc(
    var(--section-buttons-height) + var(--section-buttons-bottom)
  );
  --section-prices-bottom: calc(var(--section-availability-height) + var(--section-availability-bottom) + 0.25rem);
}

section.articles-bundle-list.mode-cells > div.item {
  --section-picture-height: 12.1875rem; /* --section-picture-height: 195px; */
}

section.articles-bundle-list.mode-cells > div.item {
  --section-after-picture-height: calc(var(--article-height) - var(--section-picture-height));
}

section.articles-bundle-list.mode-cells > div {
  /*overflow: hidden; OFF because of the included div.stamp, which can have negative margins */
  position: relative;
  line-height: 1.2rem;
}
/* .view-cell takes the whole height of the parent container with position: relative and overflow: hidden */
section.articles-bundle-list.mode-cells > div.item > div {
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

section.articles-bundle-list.mode-cells > div.item {
  min-height: auto;
}

section.articles-bundle-list.mode-cells > div.item article {
  height: var(--article-height);
  /* Do not make 'overflow: hidden;' here because of cell stamp pictures */
}
.ym-wrapper.wide section.articles-bundle-list.mode-cells > div.item.type-extra article,
.ym-wrapper.wide section.articles-bundle-list.mode-cells > div.item.type-hero article {
  overflow: hidden;
}

section.articles-bundle-list.mode-cells > div.item article {
  display: block;
  position: relative;
}

/** .picture **/
section.articles-bundle-list.mode-cells > div.item .picture {
  height: var(--section-picture-height);
  padding: 0;
  display: block;
}

section.articles-bundle-list.mode-cells > div.item .picture {
  padding: 0.25rem 0.25rem;
}

section.articles-bundle-list.mode-cells > div.item .picture div.no-picture i[class^="fa"] {
  font-size: 8.75rem; /* font-size: 140px;  */
}

/* pictures are centered horizontal */
section.articles-bundle-list.mode-cells > div.item .picture {
  margin: 0 auto;
  text-align: center;
  background-color: var(--theme-color-white);
}

section.articles-bundle-list > div.item .picture img {
  scale: var(--img-scale);
}

/* important for vertical centering of the "no-picture" div by Google Chrome browser */
section.articles-bundle-list.mode-cells > div.item .picture a.no-picture {
  display: block;
  height: inherit;
  width: 100%;
  max-width: 100% !important;
  max-height: 100% !important;
}
section.articles-bundle-list.mode-cells > div.item .picture a.container-center.no-picture {
  display: grid;
}

/** .after-picture */
section.articles-bundle-list.mode-cells > div.item article > .after-picture {
  /* border: 1px solid green; */
  position: absolute;
  width: 100%;
  bottom: 0;

  background-image: -webkit-linear-gradient(
    var(--theme-color-dark-b1),
    var(--theme-color-white)
  );
  background-image: -moz-linear-gradient(
    var(--theme-color-dark-b1),
    var(--theme-color-white)
  );
  background-image: linear-gradient(
    var(--theme-color-dark-b1),
    var(--theme-color-white)
  );
  filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=var(--theme-color-dark-b1), endColorstr=var(--theme-color-white));
}

section.articles-bundle-list.mode-cells > div.item article > .after-picture,
section.articles-bundle-list.mode-cells > div.item article > .after-picture > div {
  /*min-height: var(--section-after-picture-height);*/
  height: var(--section-after-picture-height);
}

section.articles-bundle-list.mode-cells > div.item article > .after-picture > div {
  /*border: 1px solid red;*/
  position: relative;
  padding-top: 0.25rem; /* padding-top: 4px; */
}
/* END new styling of ".picture" and ".after-picture"*/

/* mode-cells */
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-extra
  > article
  > section.picture,
.ym-wrapper.wide
  ul.articles-bundle-list.mode-cells > div.item.type-hero
  > article
  > section.picture {
  height: var(--article-height);
  padding: 0;
  overflow: hidden;
}

.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-extra
  > article
  > section.picture
  img,
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-hero
  > article
  > section.picture
  img {
  width: 100% !important;
  height: auto !important;
  padding: 0;
}

.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-extra
  > article
  > section.picture
  .container-center
  > img,
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-hero
  > article
  > section.picture
  .container-center
  > img {
  width: auto !important;
}

.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-extra
  article
  div.after-picture,
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-hero
  article
  div.after-picture {
  width: 50%;
  height: 150px;
  position: absolute;
  background: var(--theme-color-white);
  opacity: 0.9;
}
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-extra
  article
  div.after-picture {
  border: 1px solid var(--theme-color-white);
  bottom: 2%;
  right: 2%;
}
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-hero
  article
  div.after-picture {
  border: 1px solid var(--theme-color-white);
  top: 2%;
  left: 2%;
}
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-extra
  article
  div.after-picture
  > div,
.ym-wrapper.wide
  section.articles-bundle-list.mode-cells > div.item.type-hero
  article
  div.after-picture
  > div {
  position: relative;
  height: 100%;
}

/** buy-price **/
section.articles-bundle-list > div.item section.prices .buy-price {
  font-weight: 600;
}

/** article()->cell() **/
/* .view-cell takes the whole height of the parent container with position: relative and overflow: hidden */
section.articles-bundle-list.mode-cells > div.item > div {
  height: 100%;
  width: 100%;
  position: absolute;
  right: 0;
  top: 0;
}

/* description */
section.articles-bundle-list.mode-cells > div.item section.description {
  font-size: 0.875rem; /* font-size: 14px; */
  line-height: 1.1em;
  font-weight: 400;

  height: var(--section-description-height);
  overflow: hidden;
}

section.articles-bundle-list.mode-cells > div.item .after-picture > div > section {
  padding: 0px 0.5rem;
}

/* prices at the cells bottom */
section.articles-bundle-list.mode-cells > div.item .prices {
  position: absolute;
  /*width: 100%;*/
  bottom: var(--section-prices-bottom);

  font-size: 0.75rem; /* font-size: 12px; */


  right: 0;
  left: auto;
  width: auto;

  display: grid;
  grid-template-columns: 1fr;
}

section.articles-bundle-list.mode-cells > div.item .prices > div.price-block {
  justify-self: end;
  align-self: end;
}

section.articles-bundle-list.mode-cells > div.item .prices div {
  font-size: 0.75rem; /* 12px */
  line-height: 1.1em;
}

section.articles-bundle-list.mode-cells > div.item .prices div.standard-price {
  font-size: 0.6875rem; /* 11px; */
  line-height: 1.1em;
  text-align: right;
  text-decoration: line-through;
}
section.articles-bundle-list.mode-cells > div.item .prices div.priceInfoMore > .priceInfoVat {
  font-size: 0.6875rem; /* 11px; */
  line-height: 1.1em;
  text-align: right;
}

/*** variants ***/
section.articles-bundle-list.mode-cells > div > article .price-block > .price-value {
  height: var(--section-prices-price_value-height);
  padding-top: 0.3rem; /* 6px; */
  text-align: right;
  color: var(--theme-color-price-value);
}
section.articles-bundle-list.mode-cells > div > article .price-block.action-price > .price-value {
  color: var(--theme-color-action-price-value);
}

section.articles-bundle-list.mode-cells > div > article .price-block > .price-value > .value {
  /* font: normal normal normal 24px/20px var(--font-family); */
  font: normal normal normal 1.5rem/1.25rem var(--font-family);
  font-weight: 600;
}

/* all pictures placeholders have the same height -> article names on the same line */
section.articles-bundle-list.mode-cells.micro > div.item .picture {
  width: 2.875rem; /* 46px; */
  height: 2.875rem; /* 46px; */
  padding: 0px;
}

/*** pictures stamps ***/
section.articles-bundle-list > div.item .picture .stamp {
  position: absolute;
  white-space: nowrap;
  z-index: 1;
}

section.data-article-vote .picture .stamp {
  display: none;
  /* 07.04.2022 EXPERIMENTAL OFF: Hide the pictures stamp while user are reviewing an article */
}

section.articles-bundle-list > div.item .picture .stamp > img {
  width: 100%;
}

/* prices at the cells bottom */
section.articles-bundle-list.mode-cells > div.item.res-availability.res-buttons
  article.variant
  section.availability {
  display: none;
}

section.articles-bundle-list.mode-cells > div.item section.availability {
  position: absolute;
  width: 100%;
  height: var(--section-availability-height);
  bottom: var(--section-availability-bottom);

  font-size: 0.8em;
  border: 0px solid red;
}

section.articles-bundle-list.mode-cells > div.item section.availability div.icon-title {
  position: relative;
  border: 0px solid green;
}

section.articles-bundle-list.mode-cells > div.item
  section.availability
  div.icon-title
  > div.icon {
  float: left;
  margin-left: 2px;
  width: 1.2em;
}

section.articles-bundle-list.mode-cells > div.item section.buttons {
  position: absolute;
  height: var(--section-buttons-height);
  bottom: var(--section-buttons-bottom);
}

section.articles-bundle-list > div.item.res-buttons section.buttons > ul.ym-grid {
  border: 0px solid red;
  margin: 0 0 0 0;
  padding: 0;
  width: 100%;
}

section.articles-bundle-list > div.item.res-buttons section.buttons > ul.ym-grid > li {
  margin: 0;
}

section.articles-bundle-list > div.item.res-buttons section.buttons > ul.ym-grid > li.ym-gr {
  padding: 0 0px 0 3px;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons section.buttons > ul.ym-grid > li {
  width: 38%;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li.ym-gbox:first-child {
  width: 100%;
  margin-left: 0;
  padding: 0 0px 0 0px;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid {
  margin: 0;
}
section.articles-bundle-list.mode-cells > div.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid
  > li {
  width: 100%;
  padding: 0 0px;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li
  button {
  width: 100%;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-and-button-text,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-unit-button-text {
  border: 0px solid green;
  width: 100%;
  margin: 0;
  padding: 0;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-and-button-text
  > ul,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid
  .input-unit-button-text
  > ul {
  border: 0px solid blue;
  width: 100%;
  margin: 0;
  padding: 0;
}

section.articles-bundle-list.mode-cells > div.item .prices div.article-number {
  white-space: nowrap;
  display: none;
}

section.articles-bundle-list.mode-cells > div.item .prices.has-item-number {
  width: 100%;
  /* use it if div.article-number is visible */
  grid-template-columns: 1fr 1fr;
  /* use it if div.article-number is visible */
}
section.articles-bundle-list.mode-cells > div.item .prices.has-item-number div.article-number {
  display: block;
  white-space: normal;
}

section.articles-bundle-list.mode-cells > div.item .prices div.article-number > span.label:after {
  content: ": ";
}

section.articles-bundle-list.mode-cells > div.item .prices > .price-block > .visible-for-b2b,
section.articles-bundle-list.mode-cells > div.item .prices > .price-block > .price-with-unitPriceName {
  font-size: 0.75rem; /* 12px; */
  line-height: 1.1em;

  display: block;
  text-align: right;
  font-weight: 400;
  color: var(--theme-color-price-with-unit);
}
section.articles-bundle-list.mode-cells > div.item .prices > .price-block.action-price > .visible-for-b2b,
section.articles-bundle-list.mode-cells > div.item .prices > .price-block.action-price > .price-with-unitPriceName {
  color: var(--theme-color-action-price-with-unit);
}

/* add to noted list icon */
section.articles-bundle-list > div.item .noted-list i[class^="fa"] {
  color: #383838;
}

section.articles-bundle-list > div.item .noted-list.delete i[class^="fa"] {
  color: #aaa;
}

section.articles-bundle-list.mode-cells > div.item .order-lists.is-waiting {
  display: block;
}

/* 19.06.2024 EXPERIMENTAL ON */
html.touch-mode-off
  section.articles-bundle-list.mode-cells > div.item:hover
  :where(.noted-list, div.order-lists) {
  display: block;
  cursor: pointer;
}

section.articles-bundle-list.mode-cells > div.item .noted-list i[class^="fa"] {
  font-size: 15px;
}

/* cell with spinner (ui) */
section.articles-bundle-list.mode-cells .input-and-button-text .ui-spinner,
section.articles-bundle-list.mode-cells .input-unit-button-text .ui-spinner {
  height: 28px;
  /*font-size: 1em;*/
  font-size: 14px;
  /*border: 1px solid #174292;*/
}

/** article()->rows()  **/
section.articles-bundle-list.mode-rows {
  border: 0px solid blue;
  width: 100%;

  --grid-gap: var(--layout-columns-gap);

  display: grid;
  grid-template-columns: 1fr;
  grid-gap: var(--grid-gap);

  padding-bottom: var(--grid-gap);
}

section.articles-bundle-list.mode-rows > div.item {
  font-size: 1rem;
  --item-width: 100%;
  --item-padding: 0;
  /* --article-height: 170px; */
  --article-height: 10.625em;
  --section-description-height: 2.25rem;
  --section-prices-bottom: 0.0625rem;
  --section-prices-price_value-height: 1.875rem;
  --section-availability-height: 0px;
  --section-availability-bottom: 0px;
  --section-buttons-height: 0px;
  --section-buttons-bottom: 0px;

  --section-picture-height: calc(var(--article-height) - 0.125rem);
  /* minus border width */
  --section-picture-width: var(--section-picture-height);

  --section-after-picture-height: var(--article-height);

  width: var(--item-width);
  padding: var(--item-padding);
  position: relative;
  background: var(--theme-color-white);
}
section.articles-bundle-list.mode-rows > div.item.res-availability {
  --section-availability-height: 1.25rem;
  --section-availability-bottom: 0.5rem;
  --section-prices-bottom: calc(
    var(--section-availability-height) + var(--section-availability-bottom)
  );
}

section.articles-bundle-list.mode-rows > div.item.res-buttons {
  --section-buttons-height: var(--button-normal-height);
  --section-buttons-bottom: 0.5rem;
  --section-prices-bottom: calc(var(--section-buttons-height) + var(--section-buttons-bottom) + 0.125rem);
}

section.articles-bundle-list.mode-rows > div.item.res-availability.res-buttons {
  --section-availability-bottom: calc(
    var(--section-buttons-height) + var(--section-buttons-bottom)
  );
  --section-prices-bottom: calc(var(--section-availability-height) + var(--section-availability-bottom) + 0.25rem);
}

section.articles-bundle-list.mode-rows > div.item {
  container-name: containerModeRowsDiv;
  container-type: inline-size;
}

section.articles-bundle-list.mode-rows > div.item > article {
  display: grid;
  grid-template-areas: "order-lists picture after-picture";
  grid-template-columns: 0 var(--section-picture-width) calc(
      100% - var(--section-picture-width)
    );
  grid-template-rows: var(--section-picture-height);
  height: var(--article-height);
}

/*** picture ***/
section.articles-bundle-list.mode-rows > div.item > article > .picture {
  grid-area: picture;
}

/*** picture, no-picture ***/
section.articles-bundle-list.mode-rows > div.item > article > .picture div.no-picture {
  font-size: 1em;
  text-align: center;
}
section.articles-bundle-list.mode-rows > div.item > article > .picture div.no-picture > span {
  position: static;
  transform: none;
}
section.articles-bundle-list.mode-rows > div.item > article > .picture div.no-picture i[class^="fa"] {
  font-size: 7rem;
}
section.articles-bundle-list.mode-rows > div.item > article > .picture div.no-picture .label {
  display: none;
  /* OFF the caption "No picture available". By customizings it may be switched on. */
}

/*** after-picture ***/
section.articles-bundle-list.mode-rows > div.item > article > .after-picture {
  grid-area: after-picture;
  justify-self: stretch;
}

/*** after-picture > div ***/
section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div {
  display: flex;
  height: var(--article-height);
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;

  --description-height: auto;
  --prices-height: auto;
  --buttons-height: var(--button-normal-height);
  --availability-height: var(--buttons-height);
  --distance: 0.625rem;
  padding: var(--distance);

  container-name: containerAfterPictureDiv;
  container-type: inline-size;
}


section.articles-bundle-list.mode-rows > div.item > article.res-buttons > .after-picture > div {
  justify-content: flex-end;
}

section.articles-bundle-list.mode-rows > div.item > article.res-buttons.res-availability > .after-picture > div {
  justify-content: space-between;
}

section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .description {
  border: 0px solid black;
  width: 60%;
}

section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .prices {
  width: 39%;
  text-align: right;
  display: flex;
  flex-direction: column;
}





section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .lazy-loading {
  margin-top: var(--distance);
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .lazy-loading
  > div {
  text-align: right !important;
}

section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .article-number
  > .label {
  padding-right: 10px;
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .article-number
  > .label::after {
  content: ": ";
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .article-number
  > .article-number {
  font-weight: 600;
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block {
  padding-top: 0.625rem;
  display: block;
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .price-with-unitPriceName {
  font-size: 0.75rem;
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .price-value {
  padding: 0.375rem 0 0 0;
  color: var(--theme-color-price-value);
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .price-value
  > .value {
  font: normal normal normal 1.5rem/1.25rem var(--font-family);
  font-weight: 600;
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .prices
  > .price-block
  > .priceInfoMore
  > .priceInfoVat {
  font-size: 0.6875rem;
  /*font-style: italic;*/
}

section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .availability {
  border: 0px solid green;
  align-self: flex-end;
  /* width: 40%; */ /* 16.05.2025 EXPERIMENTAL OFF */
  width: 40%; /* 19.08.2025 ON again, because variants groups have problems (they have not availability indicator */
  height: var(--availability-height);
  line-height: var(--button-normal-height);
}
section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .availability > * {
  width: auto;
}
section.articles-bundle-list.mode-rows > div.item
  > article
  > .after-picture
  > div
  > .availability
  > .icon-title
  > .title {
  padding-left: 10px;
}

section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .buttons {
  border: 0px solid blue;
  align-self: flex-end;

  display: flex;
  justify-content: flex-end;
  /* this block aligned to bottom */
  width: 60%;
  max-width: 17.5rem; /* 280px */
  height: var(--buttons-height);
}
section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .buttons .ym-grid {
  width: auto;
}

@container containerModeRowsDiv (width < 40rem) {
  section.articles-bundle-list.mode-rows > div.item > article {
    border: 1px solid red;
    --article-height: auto;
    grid-template-rows: auto;
  }
  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .availability {
    width: 100%;
  }
  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .buttons {
    width: 100%;
    justify-content: flex-start;
  }
}

@container containerModeRowsDiv (width < 31.25rem) {
  section.articles-bundle-list.mode-rows > div.item > article {
    grid-template-areas:
      "order-lists picture"
      "after-picture after-picture";
    --section-picture-width: 100%;
    grid-template-columns: 0 100%;
    height: auto;
  }

  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .description {
    width: 100%;
  }

  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .prices {
    width: 100%;
    text-align: right;
  }

  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .prices > .article-number {
    text-align: left;
  }

  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .buttons .ym-grid {
    width: 100%;
  }
}

/*
@media (max-width: 50rem) {
  section.articles-bundle-list.mode-rows > div.item > article.res-buttons {
    --article-height: 15.625rem;
  }

  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .availability {
    width: 100%;
  }

  section.articles-bundle-list.mode-rows > div.item > article > .after-picture > div > .buttons {
    width: 100%;
    max-width: none;
  }
} */

/*** order-lists ***/
section.articles-bundle-list.mode-rows > div.item > article > .order-lists {
  grid-area: order-lists;
  position: absolute;
  top: 3px;
  left: 4px;
}
html.touch-mode-off section.articles-bundle-list.mode-rows > div.item:hover div.order-lists {
  display: block;
  cursor: pointer;
}

/**** END mode rows ****/

section.articles-bundle-list > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
section.articles-bundle-list > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li {
  margin: 0px;
}

section.articles-bundle-list > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input,
section.articles-bundle-list > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.input {
  width: 33%;
}

section.articles-bundle-list > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button {
  width: 66.9%;
}

section.articles-bundle-list > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.unit {
  line-height: var(--section-buttons-height);
  height: var(--section-buttons-height);
  font-size: 14px;
  overflow: hidden;
  /*width: calc(100% - 33% - 42%);*/
}

section.articles-bundle-list > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.button {
  width: 41.9%;
  float: right;
}

section.articles-bundle-list > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input
  input,
section.articles-bundle-list > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.input
  input {
  width: 80%;
  text-align: center;
  position: relative;
  top: -1px;
  left: -2px;
}

section.articles-bundle-list > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input
  .ui-spinner.minus-plus
  input,
section.articles-bundle-list > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.input
  .ui-spinner.minus-plus
  input {
  position: static;
  margin-left: 10%;
}

/* the input "count" is not visible if it included in another ul.ym-grid > li */
section.articles-bundle-list.mode-rows > div.item
  section.buttons
  ul.ym-grid
  > li
  div.input-and-button-text
  > ul
  > li.input,
section.articles-bundle-list.mode-rows > div.item
  section.buttons
  ul.ym-grid
  > li
  div.input-unit-button-text
  > ul
  > li.input,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  ul.ym-grid
  > li
  div.input-and-button-text
  > ul
  > li.input,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  ul.ym-grid
  > li
  div.input-unit-button-text
  > ul
  > li.input {
  display: none;
}
/* the button is the only input control it included in another ul.ym-grid > li */
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  ul.ym-grid
  > li
  div.input-and-button-text
  > ul
  > li.button,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  ul.ym-grid
  > li
  div.input-unit-button-text
  > ul
  > li.button {
  width: 100%;
}

section.articles-bundle-list.mode-cells > div.item section.buttons,
section.articles-bundle-list.mode-cells > div.item section.buttons ul {
  width: 100%;
  margin: 0;
  padding: 0px;
}

section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li {
  margin: 0;
  padding: 0 3px;
}
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button {
  padding: 0 0px 0 0px;
}

section.articles-bundle-list.mode-cells > div.item section.buttons input,
section.articles-bundle-list.mode-cells > div.item section.buttons li button {
  margin: 0;
}
section.articles-bundle-list > div.item section.buttons li button {
  width: 100%;
}

html.touch-screen-mode
  .ui-accordion
  section.articles-bundle-list.mode-cells > div.item
  section.buttons
  li
  button {
  font-size: 12px;
}
section.articles-bundle-list.mode-cells > div.item section.buttons input {
  font-size: 14px;
}

section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.button {
  text-align: right;
}

/** no picture **/
section.articles-bundle-list.mode-cells section.picture div.no-picture {
  font-size: 1em;
}

section.articles-bundle-list.mode-cells section.picture div.no-picture > span {
  position: absolute;
  top: 50%;
  left: 50%;
  bottom: auto;
  right: auto;
  transform: translate(-50%, 1em);
}

section.articles-bundle-list.mode-cells section.picture .container-center > div.no-picture > span {
  position: static;
  transform: none;
}

section.articles-bundle-list.mode-cells.mini section.picture div.no-picture {
  top: 0px;
}

section.articles-bundle-list.mode-cells section.picture div.no-picture > div.label {
  font-size: 1.2em;
  padding: 0 15%;
  display: none;
}

/* artikel */
section.articles-bundle-list.mode-cells > div.item .noted-list {
  position: absolute;
  right: 3px;
  top: 2px;
  display: block;
}
section.articles-bundle-list.mode-cells > div.item .noted-list div.cursor-pointer img {
  width: 24px;
  margin: 2px 1px 0 0;
}
section.articles-bundle-list.mode-cells > div.item .noted-list div.cursor-pointer img:hover {
  width: 24px;
  margin: 2px 1px 0 0;
}
section.articles-bundle-list.mode-cells > div.item.type-extra .picture,
section.articles-bundle-list.mode-cells > div.item.type-hero .picture {
  padding: 0;
  margin: 0;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons section.prices ul {
  width: auto;
}
section.articles-bundle-list > div.item section.prices .buy-price {
  font-size: 23px;
  font-weight: 600;
  color: var(--theme-color-bright);
}
section.articles-bundle-list.mode-cells > div.item .prices .gross-price span {
  display: none;
}

section.articles-bundle-list.mode-cells > div.item .prices div.price-uvp .title,
section.articles-bundle-list.mode-cells > div.item .prices div.price-uvp .delimiter,
section.articles-bundle-list.mode-cells > div.item .prices div.price-uvp .save,
section.articles-bundle-list.mode-cells > div.item .prices div.price-uvp .percents {
  display: none;
}
section.articles-bundle-list.mode-cells > div.item .prices div.price-uvp .price {
  text-decoration: line-through;
  color: #000;
  font-size: 14px;
}
section.articles-bundle-list.mode-cells > div.item .prices .net-price {
  height: unset;
  font-size: 23px;
  font-weight: 600;
  color: var(--theme-color-bright);
}
section.articles-bundle-list > div.item section.prices .buy-price {
  display: none;
}
section.articles-bundle-list > div.item section.prices .buy-price span {
  display: none;
}

section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid {
  margin: 0;
  padding: 0;
}
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid
  > li {
  width: 50%;
}

section.articles-bundle-list.mode-rows > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li,
section.articles-bundle-list.mode-rows > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
section.articles-bundle-list.mode-rows > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li {
  padding: 0;
}
section.articles-bundle-list.mode-rows > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.unit,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-unit-button-text
  ul
  > li.unit {
  padding: 0 4px;
}
section.articles-bundle-list.mode-rows > div.item.res-buttons
  section.buttons
  .input-unit-button-text
  > ul.ym-grid
  > .button,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  .input-unit-button-text
  > ul.ym-grid
  > .button {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
}

section.articles-bundle-list.mode-rows > div.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid
  > li,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  article.variant
  section.buttons
  > ul.ym-grid
  > li {
  width: 100%;
}

/** case: input + "Kg" + "in shopcart"  **/
section.articles-bundle-list div.item.res-buttons section.buttons .input-unit-button-text > ul.ym-grid,
  /** case: input + "in shopcart"  **/
section.articles-bundle-list div.item.res-buttons section.buttons .input-and-button-text > ul.ym-grid,
  /* Case: button "In shopcart" and "Details"*/
section.articles-bundle-list div.item.res-buttons section.buttons > ul.ym-grid.count-2 {
  display: flex;
}

section.articles-bundle-list.mode-rows > div.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-shopcart,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-shopcart {
  flex-grow: 2;
  width: auto;
}

section.articles-bundle-list.mode-rows > div.item section.buttons,
section.articles-bundle-list.mode-cells > div.item section.buttons {
  width: 100%;
  container-name: sectionButtons;
  container-type: inline-size;
}

section.articles-bundle-list.mode-rows > div.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-details,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  > ul.ym-grid.count-2
  > .button-details {
  flex-grow: 1;
  width: auto;
}

@container sectionButtons (width < 15.625rem) {
  /* 250px */
  ul.ym-grid.count-2 > .button-shopcart span {
    padding: 0;
    display: none !important;
  }

  section.articles-bundle-list.mode-rows > div.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-shopcart,
  section.articles-bundle-list.mode-cells > div.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-shopcart {
    flex-grow: 1;
  }

  section.articles-bundle-list.mode-rows > div.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-details,
  section.articles-bundle-list.mode-cells > div.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    > .button-details {
    flex-grow: 2;
    width: 100%;
  }

  section.articles-bundle-list.mode-rows > div.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    .input-and-button-text
    > ul,
  section.articles-bundle-list.mode-cells > div.item.res-buttons
    section.buttons
    > ul.ym-grid.count-2
    .input-and-button-text
    > ul {
    width: auto;
  }
}

/** case: input + "in shopcart"  **/
section.articles-bundle-list.mode-rows > div.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .button,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .button {
  flex-grow: 2;
  width: auto;
}
section.articles-bundle-list.mode-rows > div.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .input,
section.articles-bundle-list.mode-cells > div.item.res-buttons
  section.buttons
  .input-and-button-text
  > ul.ym-grid
  > .input {
  flex-grow: 1;
}

@container sectionButtons (width < 12.5rem) {
  /* 200px */
  .input-and-button-text.input-visible > ul.ym-grid > .button span {
    padding: 0;
    display: none !important;
  }
  section.articles-bundle-list.mode-rows > div.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .input,
  section.articles-bundle-list.mode-cells > div.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .input {
    flex-grow: 2;
    width: 100%;
  }
  section.articles-bundle-list.mode-rows > div.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .button,
  section.articles-bundle-list.mode-cells > div.item.res-buttons
    section.buttons
    .input-and-button-text
    > ul.ym-grid
    > .button {
    flex-grow: 1;
  }
}

@container sectionButtons (width < 11.25rem) {
  /* 180px */
  .input-and-button-text.input-hidden > ul.ym-grid > .button button {
    display: flex;
    justify-content: center;
  }
  .input-and-button-text.input-hidden
    > ul.ym-grid
    > .button
    button
    > span.caption {
    padding: 0;
    display: none !important;
  }
}

/** case: input + "Kg" + "in shopcart"  **/
@container sectionButtons (width < 16.25rem) {
  /*  */
  .input-unit-button-text > ul.ym-grid > .button span.caption {
    padding: 0;
    display: none !important;
  }

  section.articles-bundle-list.mode-rows > div.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button,
  section.articles-bundle-list.mode-cells > div.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button {
    flex-grow: 1;
    display: flex;
    justify-content: flex-end;
  }
  section.articles-bundle-list.mode-rows > div.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button
    button,
  section.articles-bundle-list.mode-cells > div.item.res-buttons
    section.buttons
    .input-unit-button-text
    > ul.ym-grid
    > .button
    button {
    justify-content: center;
    width: auto;
  }
}

/*** Order Lists ***/
/* button in cell */
section.articles-bundle-list > div.item .noted-list,
section.articles-bundle-list > div.item div.order-lists {
  --icon-list-width: 2rem;  /* --icon-list-width: 32px; */
  width: var(--icon-list-width);
  height: var(--icon-list-width);
  line-height: var(--icon-list-width);
  text-align: center;
  display: block;
}
section.articles-bundle-list.mode-cells > div.item :where(.noted-list, div.order-lists) {
  position: absolute;
  top: calc(var(--icon-list-width) / 4 - 0.0625rem);
  right: calc(var(--icon-list-width) / 4 + 0.3rem);
}

section.articles-bundle-list.mode-cells > div.item .noted-list,
section.articles-bundle-list.mode-cells > div.item div.order-lists img {
  width: 30px !important;
  height: 30px !important;
}

section.articles-bundle-list.mode-cells > div.item .noted-list {
  top: -2px;
}

section.articles-bundle-list.mode-cells > div.item .noted-list {
  font-size: 17px;
  top: 9px;
  position: relative;
}


/** Button Icons **/
section.articles-bundle-list.mode-cells .input-and-button-text .ui-spinner,
section.articles-bundle-list.mode-cells .input-unit-button-text .ui-spinner {
  position: relative;
  top: 0;
  left: 0;
  height: var(--button-normal-height) !important;
  border: 1px solid #444;
}
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  input.quantity.ui-spinner-input {
  font-size: 24px;
}
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.button {
  padding: 0;
  width: 60%;
}
section.articles-bundle-list.mode-rows > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.number,
section.articles-bundle-list.mode-rows > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.text,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.number,
section.articles-bundle-list.mode-cells > div.item
  section.buttons
  div.input-and-button-text
  ul
  > li.input.text {
  padding: 0 10px 0 0;
  width: 40%;
}