@import '../../../skins/mobile/css/styles.css';

/**
 * @version 2025-08-28
 *
 * Skin "mobile"
 *
 * HDGBAVARIA_21
 */

: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; /* default font size for certainly areas */

	/* Layout settings */
	--wrapper-max-width: 1140px;
	--layout-column-1-width: 250px;
	--layout-columns-gap: 15px;
	--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-white-d1: #aaa;
	--theme-color-white: #fff;

	--theme-color-dark: #000000; /* PARITY grey: #333333*/
	--theme-color-dark-b1: #ededed;
	--theme-color-dark-b2: #d0d0d0;
	--theme-color-dark-b3: #f9f9f9;

	--theme-color-middle: rgb(178,200,176); /* Light green #b2c8b0 */

	--theme-color-bright: var(--theme-color-middle); /*PARITY yellow: #ffcd00 */
	--theme-color-bright-d1: var(--theme-color-middle); /*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:        #00a;
	--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: #ff2e17;
	--message-color-error-strong-opposite: #fff;

	--message-color-running-icon:     var(var(--theme-color-white-d1));
	--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: 39px; /* 39 for better vertical centering of the caption */
	--button-small-height: 30px;

	--button-final-color:          #326e27;
	--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: #326e27;
	--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);
}

 /**** jQuery UI ****/
 .ui-controlgroup-item.ui-state-active,
 .ui-accordion-header.ui-state-active,
 a.ui-button:active,
 .ui-button:active,
 .ui-button.ui-state-active:hover {
	border-color: #655e4e;
 }

 /*** UI radio ***/
 .ui-checkboxradio-label .ui-icon-background {
	box-shadow: none;
}

.ui-checkboxradio-radio-label .ui-icon-background {
	border: 1px solid #655e4e;
	background: var(--theme-color-white);
}

 .ui-checkboxradio-radio-label.ui-checkboxradio-checked .ui-icon,
 .ui-checkboxradio-radio-label.ui-checkboxradio-checked:hover .ui-icon {
	border-color: var(--theme-color-white);
	background: #000;
}
/** UI Spinners are now "+/-" Spinners, and they have not the jQuery UI styling, but the styling of Shop 3 **/
:where(
	.ui-spinner-button,
	.ui-dialog > .ui-dialog-titlebar
 ) > :where(
	.ui-button:focus .ui-icon,
	.ui-button:active .ui-icon,
	.ui-button:hover .ui-icon,
	.ui-button .ui-icon
)  { /* because of the customized arrow */
	background-image: url("../../../skins/mobile/css/images/ui-icons_000000_256x240.png") !important;
}


/* UI Selectmenu */
.ui-selectmenu-menu .ui-menu-item-wrapper {
	font-size: 16px;
}
.ui-selectmenu-open .ui-menu-item-wrapper.ui-state-active {
	border: 1px solid var(--theme-color-bright);
	background: var(--theme-color-bright);
	color: var(--theme-color-bright-opposite);
}

i[class^="fa"].tooltipInfo-icon {
	--message-color-info-icon: #0060df;
	cursor: help;
}


/**** form ****/
/*** form labels ***/
/**  labels required **/
.ym-form label.required,
.ym-form label.optional,
span.legend-required {
	--theme-color-after-required: var(--theme-color-dark-b2);
	--theme-color-after-required-or: var(--theme-color-after-required);
}
span.legend-required::after,
.ym-form label.required::after {
	content: ' *';
}
span.legend-required::after,
.ym-form label.required::after,
.ym-form label.optional::after {
	color: var(--theme-color-after-required);
}
/**  labels required "or" **/
span.legend-required.or::after,
.ym-form label.required.or::after,
.ym-form label.optional.or::after {
	/* color: red; */
	color: var(--theme-color-after-required-or);
	content: ' **';
}

.ym-form .ym-error > label.required.or::after,
.ym-form .ym-error > label.optional.or::after {
	--theme-color-after-required-or: var(--theme-color-dark);
}

ul.mode-cells > li.item {
	--section-description-height: 72px;
}

section.articles-bundle-list.mode-cells > div.item {
	--section-description-height: 4em;
}

input[type="text"]:disabled {
  border-bottom: 0;
}

header ul.layout-header > li.logo img {
	width: auto;
	height: auto;
	max-height: 80px;
}

/**** groups inventory ****/
section.subgroups-inventory.mode-cells {
	grid-template-columns: 1fr 1fr 1fr 1fr;
}


/*** article numbers in cell ***/
ul.articles-bundle-list.mode-cells > li.item .prices {
	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 div.article-number {
	display: block;
	white-space: normal;
}

ul.articles-bundle-list.mode-cells li.item.res-buttons section.prices {
	font-size: 12px;
	right: 0;
	left: auto;
	width: 100%;
}

ul.articles-bundle-list.mode-cells li.item.res-buttons section.prices > div.article-number {
	font-weight: 600;
}

ul.mode-cells > li.item .prices div.article-number > span.label {
	display: none;
}

/**** @package SiteUploads ****/
section.site-uploads > .info > .status > .free > .value {
	/*color: var(--message-color-info-icon);*/
	color: var(--button-final-color);
}