div.coloredbox, li.coloredbox {
	padding: calc(1*var(--form-element-spacing-vertical)) calc(1*var(--form-element-spacing-horizontal));
	border: var(--border-width) solid var(--form-element-border-color);
	border-radius: var(--border-radius);
	margin-bottom: var(--form-element-spacing-vertical);
}
/*@media (min-width: 300px) {
	.grid {
		grid-template-columns: repeat(auto-fit, minmax(0%, 1fr));
	}
}*/

.grid2 {
	display: grid;
	grid-column-gap: 10px;
}
@media (min-width: 640px) {
	.grid2 {
		grid-template-columns: repeat(2, 50%);
	}
	
	.grid.twoColumn {
		grid-template-columns: max-content auto; /*first column as narrow as possible, the second one taking the rest of the space*/
		align-items: center /*aligns items in the middle vertically*/
	}
}



input:required:placeholder-shown:not(:focus)[showError] {
	border: 1px solid red;
}

label.error, textarea.error {
	border-left: 5px solid red;
}

.ajaxIndicator {
	display: none;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}
	
h4 a {
	float: right;
	color: var(--h4-color);
}
h4, h5 {
    margin-block-start: 0.8em;
    margin-block-end: 0.8em;
   }
.stickyTop {
	opacity: 1;
	position: sticky;
   	top: 0;
   	/*background-color: #CCCCCC;*/
   	z-index: 1;
   	background-color: var(--background-color);
}
.stickyBottom {
	opacity: 1;
	position: sticky;
   	bottom: 0;
   	/*background-color: #CCCCCC;*/
   	z-index: 1;
   	background-color: var(--background-color);
}
input:not([type=checkbox], [type=radio], [type=range], [type=file])[type=number].search {
  -webkit-padding-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  padding-inline-start: calc(var(--form-element-spacing-horizontal) + 1.75rem);
  /*border-radius: 5rem;*/
  background-image: var(--icon-search);
  /*background-position: center left 1.125rem;*/
  background-position: center left 1rem;
  background-size: 1rem auto;
  background-repeat: no-repeat;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}
div.logo_image:before {
    content: url('/image/retailer/conmodo.jpg');
    margin-top: 1px;
    margin-bottom: 1px;
    display: inline-block;
}
.catIcon {
	width: 48px;
	height: 48px;
	margin-right: calc(var(--spacing) - 6px);
}
/* invert color of icons for dark mode: */
@media only screen and (prefers-color-scheme: dark) {
 	:root:not([data-theme="light"]) .catIcon {
		filter: invert(90%);
	}
}

.buttIcon {
	width: 32px;
	height: 32px;
	filter: invert(1);
}

.category summary {
	cursor: pointer;
}
.category summary span{
	color: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
	
	color: var(--muted-color);
}

.damageLink, .clickable, .selectable {
	cursor: pointer;
}
li.selectable {
	list-style: none;
}
.damageLink.selected {
	background-color: lightblue;
}
.selectable.selected {
	background-color: lightblue;
}
.feedbackPanel {
	color: red;
}
ul.feedbackPanel li {
	list-style: none;
}
input.error {
	border: 1px solid red;
}
button.selected {
	background-color: blue;
}
.colors span, .memories span {
	display: inline-block;
	margin-right: calc(var(--spacing) * .5);
	margin-bottom: calc(var(--spacing) * .5);
	background-color: var(--switch-background-color);
	color: var(--primary);
	padding: calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5);
   	border: var(--border-width) solid var(--border-color);
   	border-radius: var(--border-radius);
   	outline: 0;
   	white-space:nowrap;
}
.colors span.selected, .memories span.selected {
	background-color: var(--secondary);
}
.small input{
	width: auto;
}

/* Disallow selecting of text in checkboxes (won't work in Firefox for now) */
label:has( input[type="checkbox"] ), label:has( input[type="radio"] ) {
	user-select: none;
}


/* Menu */
/*.menu * {
	color: var(--primary-inverse);
}*/
.coolMenu div {
	display: none;
	position: absolute;
	z-index: 1000;
}

.coolMenu:hover div {
	display: block;
}


.menuParent {
	display: flex;
	justify-content: space-between;
	height: 58px;
}
.menuParent img, .menuParent svg {
	height: 48px;
	width: 48px;
}
.leftMenu {
	display: flex;
	overflow: hidden;
	align-content: space-between;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
	flex: 1 1 auto;
	row-gap: 48px;
}
.rightMenu {
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: right;
	flex-wrap: wrap-reverse;
	flex: 0 0 auto;
	row-gap: 48px;
}
.leftMenu a, .rightMenu a, .smallMenu {
	padding-left: 16px;
    padding-right: 10px;
    padding-bottom: 5px;
    padding-top: 5px;
}

.wizard a {
    --text-decoration: underline dashed #CCC 1px;
}
code, kbd, pre {
	--code-background-color: var(--background-color);
}

/* default colors and settings? */
@media only screen and (prefers-color-scheme:light) {
	:root:not([data-theme]), :host:not([data-theme]) {
		--primary: hsl(193, 30%, 21%); /*#253e45*/
	    --primary-inverse: #FFF;
	    --primary-hover: hsl(193, 35%, 16%);
	    --menu-background-color: var(--primary);
	    --menu-color: var(--primary-inverse);
		--heading-background-color: transparent;
		--heading-color: var(--primary);
		--heading-icon-background-color: var(--primary);
		--invert-color-filter: 0;
		--table-hover: #EEE;
		--message-background-color-service: #EEEEEE;
		--message-background-color-dealer: #a4d1de;
		--message-background-color-newMessage: #EEEEEE;
	}
}


@media only screen and (prefers-color-scheme:dark) {
	:root:not([data-theme]), :host:not([data-theme]) {
		/*--switch-color: #EEE;*/
		/*--primary: #FFF;
	    --primary-inverse: hsl(193, 30%, 21%);
	    --primary-hover: #EEE;*/
	    --primary: #F0F0F0;
	    --primary-inverse: hsl(193, 30%, 21%);
	    --primary-hover: #EEE;
	    --menu-background-color: hsl(193, 30%, 21%);
	    --menu-color: var(--primary);
		--heading-background-color: transparent;
		--heading-color: var(--primary);
		--heading-icon-background-color: #999;
		--invert-color-filter: 90%;
		--table-hover: var(--secondary-hover);
		--muted-color: hsl(205deg, 10%, 70%);
		--message-background-color-service: #393939;
		--message-background-color-dealer: transparent;
		--message-background-color-newMessage: var(--primary);
	}
	
	/* Set checkbox/radio background to same as general background (not --primary, as is default in pico) */
	[type="checkbox"]:checked, [type="checkbox"]:checked:active, [type="checkbox"]:checked:focus, [type="radio"]:checked, [type="radio"]:checked:active, [type="radio"]:checked:focus {
		--background-color: black;
	}
	
}


@media (min-width: 1000px) {
  	.container {
		max-width: 1200px;
		padding-right: var(--spacing);
		padding-left: var(--spacing);
	}
  	:root {
		--font-size: 16px;
	}
}

@media (max-width: 999px) {
	.container {
		/*max-width: 1200px;
	    padding-left: 5px;
	    padding-right: 5px;*/
		min-width: 320px;
		max-width: 999px;
		padding-right: var(--spacing);
		padding-left: var(--spacing);
	}

	/*:root {
		--font-size: 18px;
	}*/
}

input[type=submit]:not(.secondary), input[type=button]:not(.secondary), button:not(.secondary), button:not(.secondary) {
	background-color: var(--menu-background-color);
	border-color: var(--menu-background-color);
	color: var(--menu-color);
}

article {
	margin-top: 15px;
}

/* Fixup wicket modals: */
.wicket-modal {
	background: var(--card-background-color);
}
div.wicket-modal div.w_blue div.w_top,
div.wicket-modal div.w_blue div.w_bottom,
div.wicket-modal div.w_blue div.w_topLeft,
div.wicket-modal div.w_blue div.w_topRight,
div.wicket-modal div.w_blue div.w_bottomRight,
div.wicket-modal div.w_blue div.w_bottomLeft,
div.wicket-modal div.w_blue div.w_left,
div.wicket-modal div.w_blue div.w_right
/*,div.wicket-modal div.w_blue a.w_close*/
 {
	background-image: none;
}
div.wicket-modal h3.w_captionText {
	font-size: 18px;
}

form, table.ordersearch_wide {
	margin-bottom: 0;
}
td, th {
	padding: calc(var(--spacing)/ 2) calc(var(--spacing)/4);
}

.warning {
	color: red;
}