:root {
	--dark-primary: #3e4961;
	--on-dark-primary: #3e4961;
	--light-primary: #f5f5f5;
	--on-light-primary: #f5f5f5;
	--mid-primary: #5e6f90;
	--on-mid-primary: #5e6f90;
	--op50-mid-primary: hsla(220, 21%, 47%, 0.5); /* mid-primary #5e6f90 less 50% opacity */
	--op25-mid-primary: hsla(220, 21%, 47%, 0.25); /* mid-primary #5e6f90 less 75% opacity */
	--invalid: hsla(220, 21%, 47%, 0.25); /* mid-primary #5e6f90 less 75% opacity */
	--disabled-input: hsla(220, 21%, 47%, 0.10); /* mid-primary #5e6f90 less 75% opacity */
	--button-bg-hover: #3e4961;
	--button-fg-hover: #f5f5f5;
	--button-bg: #5e6f90;
	--button-fg: #f5f5f5;
	--button-bg-disable: #3e4961;
	--button-fg-disable: #f5f5f5;
	--table-bg: #f5f5f5;
	--on-table: #3e4961;
	--background: #f5f5f5;
	/* --image-background: #e9f2f7; */
	--item-radius: 10px;
	--page-radius: 25px;
	--btn-radius: 50px;
	--select-line-height-mobile: 2.5em;
	--input-font-mobile: 1.15em;
	--select-font-mobile: 1.05em;
}

body {
	background-color: var(--dark-primary);
	font-family: "Geist", sans-serif;
	font-optical-sizing: auto;
	font-weight: 500;
	font-style: normal;
	font-variation-settings: "wdth" 100;
}

input,
select,
option {
	font-family: "Geist", sans-serif;
}
h2 {
	color: var(--dark-primary);
	border-top: solid var(--mid-primary) 3px;
	border-bottom: solid var(--mid-primary) 3px;
}

h3 {
	color: var(--dark-primary);
	font-size: 1.5rem;
}

p {
	text-align: center;
}

.header-text {
	color: var(--light-primary);
}

.page-container {
	border-radius: var(--page-radius);
	background: var(--background);
	border: 1px solid var(--op25-mid-primary);
}

.order-header {
	border-bottom: solid var(--dark-primary) 2px;
	color: var(--light-primary);
	justify-items: top;
}

select {
	border: solid var(--op50-mid-primary) 1px;
}
input {
	border: solid var(--op50-mid-primary) 1px;
}

label {
	color: var(--mid-primary);
}

.required::after {
	content: " *";
	color: var(--mid-primary);
}

input,
select.select-styled {
	font-weight: 200;
	font-style: normal;
}

table,
table.style-table {
	background: var(--light-primary);
}

table caption {
	color: gray;
}

button {
	background: var(--button-bg);
	color: var(--button-fg);
	border-radius: var(--btn-radius);
	transition-property: background, color;
	transition-duration: 0.1s;
	border: 3px solid var(--dark-primary);
}

button:hover {
	background: var(--button-bg-hover);
	color: var(--button-fg-hover);
	border: 3px solid var(--mid-primary);
}

button:disabled {
	background: var(--button-bg-disable);
	color: var(--button-fg-disable);
	border-radius: var(--btn-radius);
	transition-property: background, color;
	transition-duration: 0.1s;
}

input:invalid {
	background: var(--invalid);
}

select:invalid {
	background: var(--invalid);
}

input:disabled {
	background: var(--disabled-input);
}

select:disabled {
	background: var(--disabled-input);
}

.customer-core-info {
	row-gap: 10px;
	column-gap: 5px;
	width: 100%;
}

.style-item .header-line {
	padding: 0px var(--item-radius) 0px var(--item-radius);
	border-radius: var(--item-radius) var(--item-radius) 0px 0px;
	background: var(--mid-primary);
	color: var(--light-primary);
}

.style-configuration {
	padding: var(--item-radius);
	background: var(--light-primary);
	color: var(--on-light-primary);
	border: solid 2px var(--mid-primary);
	border-radius: 0px 0px var(--item-radius) var(--item-radius);
}

.order-row {
	border-bottom: 2px solid var(--dark-primary);
	padding: 0.5rem 0;
}

.line-input {
	color: var(--dark-primary);
}

.light-note {
	color: var(--dark-primary);
	align-self: center;
}

.fraction-denominator {
	border-top: 2px solid var(--mid-primary);
}

.popup {
	background: var(--mid-primary);
	color: var(--light-primary);
	border-radius: var(--item-radius);
	width: 50%;
	z-index: 1;
	visibility: hidden;
}
.popup.show {
	visibility: visible;
	-webkit-animation: fadeIn 0.5s;
	animation: fadeIn 0.5s;
}

.image-panel {
	background: var(--op25-mid-primary);
}

@media (max-width: 580px) {
	.page-container {
		background: var(--background);
		border: none;
	}

	body {
		background: var(--background);
	}
}