/* CSS VARIABLES */

:root {/* THEME 0 (LIGHT) */
	--primary: #0099cc;
	--bg-page: #f1f4f9;
	--bg-page-inv: #282828;
	--bg-input: #ffffff;
	--bg-input-accent: rgba(0,0,0,0.1);
	--bg-overlay: rgba(0,0,0,0.75);
	--bg-circle: rgba(0,0,0,0.25);
	--bg-stripe: rgba(0,0,0,0.05);
	--bg-success: rgba(0,128,0,0.25);
	--bg-sticky-add: #c43c35;
	--text-default: #282828;
	--text-inv: #ffffff;
	--text-header: #ffffff;
	--text-link: #0099cc;
	--text-success: rgba(0,128,0,0.5);
	--border-notepad: #282828;
	--radius: 10px;
	--btn-color-text: #ffffff;
	--btn-red: #c43c35;
	--btn-green: #57a957;
	--btn-blue: #3c35c4;
	--btn-cyan: #269ce9;
	--btn-magenta: #c435bd;
	--btn-yellow: #bdc435;
	--btn-orange: #c48335;
	--dis-bg-mix: white;
	--dis-bg-pct: 30%;
	--dis-text-mix: white;
	--dis-text-pct: 12%;
}

body[data-theme="1"] {/* THEME 1 (DARK) */
	--primary: #004d66;
	--bg-page: #282828;
	--bg-page-inv: #eeeeee;
	--bg-input: #000000;
	--bg-input-accent: rgba(255,255,255,0.1);
	--bg-overlay: rgba(255,255,255,0.75);
	--bg-circle: rgba(255,255,255,0.5);
	--bg-stripe: rgba(255,255,255,0.08);
	--bg-success: rgba(0,128,0,0.5);
	--bg-sticky-add: #c43c35;
	--text-default: #ffffff;
	--text-inv: #282828;
	--text-header: #ffffff;
	--text-link: #0099cc;
	--text-success: rgba(0,128,0,0.75);
	--border-notepad: #ffffff;
	--radius: 10px;
	--btn-color-text: #ffffff;
	--btn-red: #c43c35;
	--btn-green: #57a957;
	--btn-blue: #3c35c4;
	--btn-cyan: #269ce9;
	--btn-magenta: #c435bd;
	--btn-yellow: #bdc435;
	--btn-orange: #c48335;
	--dis-bg-mix: black;
	--dis-bg-pct: 40%;
	--dis-text-mix: #808080;
	--dis-text-pct: 50%;
}

body[data-theme="2"] {/* THEME 2 (DESERT SUNSET) */
	--primary: #9e3d10;
	--bg-page: #d4b48c;
	--bg-page-inv: #1e0e04;
	--bg-input: #eedcb8;
	--bg-input-accent: rgba(0,0,0,0.1);
	--bg-overlay: rgba(0,0,0,0.75);
	--bg-circle: rgba(0,0,0,0.25);
	--bg-stripe: rgba(0,0,0,0.06);
	--bg-success: rgba(0,128,0,0.25);
	--bg-sticky-add: #c43c35;
	--text-default: #1e0e04;
	--text-inv: #f0e4c8;
	--text-header: #ffffff;
	--text-link: #9e3d10;
	--text-success: rgba(0,128,0,0.5);
	--border-notepad: #1e0e04;
	--radius: 10px;
	--btn-color-text: #ffffff;
	--btn-red: #c43c35;
	--btn-green: #57a957;
	--btn-blue: #3c35c4;
	--btn-cyan: #269ce9;
	--btn-magenta: #c435bd;
	--btn-yellow: #bdc435;
	--btn-orange: #c48335;
	--dis-bg-mix: white;
	--dis-bg-pct: 40%;
	--dis-text-mix: white;
	--dis-text-pct: 20%;
}

body[data-theme="2"] {/* Desert Sunset specific mod, to create a sunset body background */
	background: linear-gradient(
		to bottom,
		var(--color-5)  0%,
		var(--color-6)  10%,
		var(--color-7)  40%,
		var(--color-8)  70%,
		var(--color-2)  100%
	) fixed;
}

/* FOUNDATION STYLES */

html {
	position: relative;
	min-height: 100%;
	-webkit-text-size-adjust: 100%;
}

* {
	font-family: "Atkinson Hyperlegible Next", sans-serif;
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	background: var(--bg-page);
	color: var(--text-default);
	font-size: 1em;
	width: 100%;
	overflow-x: hidden;
	overflow-y: scroll;
	overscroll-behavior: contain;
	padding: 0;
	margin: 0 0 60px 0;/* Must correspond to footer height */
}

body.noscroll {
	position: fixed;
	height: 100%;
}

#container {
	margin: 100px 0;
}

@media screen and (max-width: 767px) {
	#container {
		padding: 0 10px;
	}
}

@media screen and (min-width: 768px) {
	#container {
		max-width: 80%;
		padding: 0 10%;
	}
	#app #container {
		max-width: none;
		padding: 0 20px;
	}
}

#footer {
	height: 60px;/* Must correspond to body margin-bottom */
}

a:link,
a:visited,
a:hover,
a:active {
	text-decoration: none;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
	margin-top: 0;
	clear: both;
}

h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4 {
	font-weight: 700;
}

h5, .h5 {
	font-style: italic;
}

h1, .h1 { font-size: 2em; }
h2, .h2 { font-size: 1.75em; }
h3, .h3 { font-size: 1.5em; }
h4, .h4 { font-size: 1.25em; }
h5, .h5 { font-size: 1em; }
h6, .h6 { font-size: 0.75em; }

.bold {
	font-weight: 700;
}

.ital {
	font-style: italic;
}

.center {
	text-align: center;
}

.smaller {
	font-size: 80%;
}

.uppercase {
	text-transform: uppercase;
}

.larger {
	font-size: 120%;
}

.hidden {
	display: none;
}

img {
	max-width: 100%;
	height: auto;
	image-rendering: auto;
}

figure {
	max-width: 100%;
	height: auto;
	margin: 0;
	padding: 0;
}

img.img-circle {
	border: 5px solid rgba(0,0,0,0.15);
	border-radius: 50%;
}

img.img-left,
figure.img-left {
	float: left;
	margin-right: 40px;
	margin-bottom: 40px;
}

img.img-right,
figure.img-right {
	float: right;
	margin-left: 40px;
	margin-bottom: 40px;
}

@media screen and (max-width: 480px) {
	img.img-left,
	img.img-right,
	figure.img-left,
	figure.img-right {
		float: none;
		display: block;
		margin: 0 auto;
	}
}

figure figcaption {
	text-align: center;
	font-style: italic;
}

input,
textarea {
	max-width: 100%;
	border: none;
	outline: none;
	background-color: var(--bg-input);
	color: var(--text-default);
	border-radius: var(--radius);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

input::placeholder,
textarea::placeholder {
	color: color-mix(in srgb, var(--text-default) 35%, transparent);
}

.float-left {
	float: left;
}

.float-right {
	float: right;
}

.row {
	width: 100%;
	clear: both;
}

.break-word {
	-webkit-word-break: break-word;
			word-break: break-word;
	-webkit-word-wrap: break-word;
			word-wrap: break-word;
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	   -moz-hyphens: auto;
			hyphens: auto;
}

.no-bullet {
	list-style-type: none;
	list-style-position: inside;
	padding: 0;
	margin: 0;
}

@media screen and (max-width: 480px) {
	.visible-sm {
		display: inherit;
	}
}

@media screen and (min-width: 481px) {
	.visible-sm {
		display: none;
	}
}

/* MENU */

#menu {
	position: fixed;
	z-index: 10000;
	width: 100%;
	height: 0;
	top: 0;
	left: 0;
	background: rgba(0,0,0,0.92);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	transition: all 0.5s ease-out;
}

#menu.display {
	opacity: 1;
	height: 100%;
	visibility: visible;
}

#menu-options {
	position: absolute;
	top: 50%;
	left: 50%;
	text-align: center;
	width: 300px;
	margin-left: -150px;
	margin-right: 0;
	margin-bottom: 0;
}

#menu a {
	font-weight: 700;
	margin: 0;
	padding: 0;
	-webkit-transition: font-size 0.3s ease-in-out;
	-moz-transition: font-size 0.3s ease-in-out;
	-o-transition: font-size 0.3s ease-in-out;
	transition: font-size 0.3s ease-in-out;
}

#menu a:link,
#menu a:visited {
	color: var(--text-link);
	font-size: 36px;
}

.no-touchevents #menu a:hover,
#menu a:active {
	color: var(--text-link);
	font-size: 40px;
	opacity: 0.5;
}

@media screen and (max-height: 360px) {
	#menu-options {
		height: 240px;
		margin-top: -120px;
	}
	#menu-options ul li {
		height: 60px;
	}
	#menu a {
		line-height: 60px;
	}
}

@media screen and (min-height: 361px) {
	#menu-options {
		height: 320px;
		margin-top: -160px;
	}
	#menu-options ul li {
		height: 80px;
	}
	#menu a {
		line-height: 80px;
	}
}

/* HEADER */

#header {
	position: fixed;
	top: 0;
	width: 100%;
	height: 60px;
	color: #ffffff;
	background-color: var(--primary);
	z-index: 9000;
	-webkit-box-shadow: 0 5px 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
		-moz-box-shadow: 0 5px 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
				  box-shadow: 0 5px 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
}

#header:before {
	content: '';
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}

body.noscroll #header {
	transform: translate3d(0,0,0);/*without this, the header will flicker on iOS when the modal displays*/
}

#header #logo-header {
	display: inline-block;
	position: fixed;
	top: 9px;
	left: 10px;
	width: 190px;
	height: 50px;
	background-size: 190px 50px;
}

#header #logo-header .logo-header-path,
#header a:link #logo-header .logo-header-path,
#header a:visited #logo-header .logo-header-path,
#header a:active #logo-header .logo-header-path {
	fill: var(--text-header);
}

.no-touchevents #header a:hover #logo-header .logo-header-path {
	fill: color-mix(in srgb, var(--text-header) 50%, transparent);
}

#header #app-header-wrapper {
	display: none;
}

#menu-button {
	position: fixed;
	top: 6px;
	right: 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	background: none;
	border: none;
	padding: 0;
	font-size: 40px;
	width: 40px;
	height: 40px;
	color: var(--text-header);
	cursor: pointer;
	z-index: 10001;
}

.no-touchevents #menu-button:hover {
	color: color-mix(in srgb, var(--text-header) 50%, transparent);
}

body.noscroll #menu-button {
	transform: translate3d(0,0,0);/*without this, this button will not initially appear when the menu displays on iOS*/
}

/* FOOTER */

#footer {
	position: absolute;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--text-header);
	background-color: var(--primary);
	bottom: 0;
	width: 100%;
	-webkit-box-shadow: 0 -5px 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
		-moz-box-shadow: 0 -5px 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
				  box-shadow: 0 -5px 0 0 color-mix(in srgb, var(--primary) 50%, transparent);
}

#copyright {
	font-size: 18px;
	font-weight: 500;
	color: inherit;
	margin: 5px 0;
}

#copyright a:link,
#copyright a:visited {
	color: inherit;
}

.no-touchevents #copyright a:hover,
#copyright a:active {
	color: color-mix(in srgb, var(--text-header) 50%, transparent);
}

/* ARTICLE */

.article p,
.article ul {
	line-height: 200%;
	margin-bottom: 1.2em;
}

@media screen and (max-width: 480px) {
	.article p,
	.article ul {
		font-size: 1.15em;
	}
}

@media screen and (min-width: 481px) {
	.article p,
	.article ul {
		font-size: 1.25em;
	}
}

.article p a:link,
.article p a:visited,
.no-touchevents .article p a:hover,
.article p a:active,
.article ul a:link,
.article ul a:visited,
.no-touchevents .article ul a:hover,
.article ul a:active {
	color: var(--text-default);
	text-decoration: none;
}

.article p a,
.article ul a {
	-webkit-box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--text-link) 50%, transparent);
	-moz-box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--text-link) 50%, transparent);
	box-shadow: inset 0 -4px 0 color-mix(in srgb, var(--text-link) 50%, transparent);
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	-o-transition: all 0.3s linear;
	transition: all 0.3s linear;
}

.no-touchevents .article p a:hover,
.no-touchevents .article ul a:hover {
	background-color: color-mix(in srgb, var(--text-link) 50%, transparent);
	-webkit-box-shadow: inset 0 0 0 color-mix(in srgb, var(--text-link) 50%, transparent);
	   -moz-box-shadow: inset 0 0 0 color-mix(in srgb, var(--text-link) 50%, transparent);
			box-shadow: inset 0 0 0 color-mix(in srgb, var(--text-link) 50%, transparent);
}

.article ul {
	list-style-type: square;
}

.article li {
	margin: 1em 0;
}

.article h1, .article .h1,
.article h2, .article .h2,
.article h3, .article .h3,
.article h4, .article .h4,
.article h5, .article .h5,
.article h6, .article .h6 {
	margin: 1em 0;
	text-align: center;
}

.article h2 .fa-stack {
	font-size: 18px;
}

/* 404 */

#full-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
}

#full-container #broken-pencil {
	position: relative;
	top: 50%;
	left: 50%;
}

#full-container #broken-pencil .broken-pencil-path {
	fill: #000;
}

#full-container #broken-pencil .homebtn {
	position: absolute;
	display: flex;
	justify-content: center;
	align-items: center;
}

#full-container #broken-pencil .homebtn .fa-home {
	margin-bottom: 10%;
}

@media screen and (max-width: 480px) {
	#full-container #broken-pencil {
		width: 200px;
		height: 69px;
		background-size: 200px 69px;
		margin: -35px 0 0 -100px;
	}
	#full-container #broken-pencil .homebtn {
		width: 40px;
		height: 40px;
		font-size: 1.5em;
		top: 5px;
		left: 80px;
	}
}

@media screen and (min-width: 481px) {
	#full-container #broken-pencil {
		width: 400px;
		height: 138px;
		background-size: 400px 138px;
		margin: -69px 0 0 -200px;
	}
	#full-container #broken-pencil .homebtn {
		width: 80px;
		height: 80px;
		font-size: 3em;
		top: 10px;
		left: 160px;
	}
}

/* CONTACT */

#contact-form,
.form-body,
.form-body .row {
	width: 100%;
}

.form-body .row {
	margin-bottom: 20px;
}

.form-body label {
	font-weight: 700;
	display: block;
	padding-bottom: 8px;
}

.two-col {
	display: flex;
}

.field-input input,
.field-input textarea {
	width: 100%;
	padding: 5px 10px;
	-webkit-box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
	-moz-box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
	box-shadow: 5px 5px 0 rgba(0,0,0,0.15);
}

.field-input textarea {
	min-width: 100%;
	min-height: 35vh;
	resize: vertical;
}

.field-honeypot {
	display: none;
}

#contact-status {
	display: inline-block;
	margin-left: 15px;
	font-style: italic;
}

.contact-status-success { color: var(--btn-green); }
.contact-status-error   { color: var(--btn-red); }

@media screen and (max-width: 767px) {
	.two-col {
		flex-direction: column;
	}
	.two-col .item {
		width: 100%;
	}
	.two-col .item:first-child {
		margin-bottom: 20px;
	}
	.field-input input,
	.field-input textarea {
		font-size: 22px;
	}
}

@media screen and (min-width: 768px) {
	.two-col {
		flex-direction: row;
	}
	.two-col .item {
		width: 50%;
	}
	.two-col .item:first-child {
		padding-right: 20px;
	}
	.two-col .item:last-child {
		padding-left: 20px;
	}
	.field-input input,
	.field-input textarea {
		font-size: 28px;
	}
}

.required {
	font-weight: 700;
	color: #cc0000;
}

/* VIDEO */

.video-wrap {
	max-width: 560px;
	margin: auto;
}

.video-wrap .video-container {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video-wrap .video-container iframe,
.video-wrap .video-container object,
.video-wrap .video-container embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* SPACERS */

.spacer0 { height: 0; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer5 { height: 5px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer10 { height: 10px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer15 { height: 15px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer20 { height: 20px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer25 { height: 25px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer30 { height: 30px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer35 { height: 35px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer40 { height: 40px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer45 { height: 45px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer50 { height: 50px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer100 { height: 100px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }
.spacer200 { height: 200px; width: 100%; font-size: 0; margin: 0; padding: 0; border: 0; display: block; clear: both; }

/* BUTTONS */

.button::-moz-focus-inner {
	border: 0;
	padding: 0;
}

.button {
	display: inline-block;
	zoom: 1;	
	padding: 8px 12px;
	margin: 0;
	cursor: pointer;
	overflow: visible;
	font: bold 14px arial, helvetica, sans-serif;
	border: none;
	border-radius: var(--radius);
	text-decoration: none;
	white-space: nowrap;
	color: var(--text-inv);
	background-color: var(--text-default);
	outline: none;
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	user-select: none;
}

.no-touchevents .button:hover {
	background-color: color-mix(in srgb, var(--text-default) 85%, transparent);
	
}

.button:active {
	position: relative;
	top: 1px;
}

.button.disabled,
.no-touchevents .button.disabled:hover,
.button.disabled:active,
.button[disabled],
.no-touchevents .button[disabled]:hover,
.button[disabled]:active {
	background: color-mix(in oklch, var(--text-default) 25%, var(--bg-page));
	cursor: default;
	position: static;
	color: color-mix(in oklch, var(--text-default) 50%, var(--bg-page));
	pointer-events: none;
}

/* Smaller button styles */

.button.small {
	padding: 4px 12px;
}

/* Larger button styles */

.button.large {
	padding: 16px 30px;
	font-size: 16px;
}

.button.large:active {
	top: 2px;
}

/* Full width button styles */

.button.full-width {
	width: 100%;
	padding: 20px;
}

/* Larger responsive label button styles */

.button.responsive {
	padding: 16px 30px;
	font-size: 16px;
}

.button.responsive:active {
	top: 2px;
}

@media screen and (max-width: 767px) {
	.button.responsive {
		width: 50px;
		height: 50px;
		padding: 0;
		font-size: 24px;
	}
	.button.responsive span {
		display: none;
	}
}

/* Circle sized button styles */

.button.circle {
	padding: 0;
	border-radius: 50%;
}

/* Textless square button styles */

.button.square {
	width: 50px;
	height: 50px;
	padding: 0;
	font-size: 24px;
}

/* Transparent background color styles */

.button.transparent,
.button.transparent:active,
.no-touchevents .button.transparent:hover {
	background-color: transparent;
}

/* Empty, no background, no padding */

.button.empty,
.button.empty:active,
.no-touchevents .button.empty:hover {
	background-color: transparent !important;
	padding: 0 !important;
}

/* White colored button */

.button.white {
	color: var(--text-default);
}

.button.white,
.button.white:active {
	background-color: var(--bg-input);
}

.button.white.empty,
.button.white.empty:active {
	color: var(--bg-input);
}

.no-touchevents .button.white:hover {
	background-color: color-mix(in srgb, var(--bg-input) 75%, var(--text-default));
	color: var(--text-default);
}

.no-touchevents .button.white.empty:hover {
	color: color-mix(in srgb, var(--bg-input) 75%, var(--text-default));
}

/* Black colored button */

.button.black {
	color: var(--text-inv);
}

.button.black,
.button.black:active {
	background-color: var(--text-default);
}

.button.black.empty,
.button.black.empty:active {
	color: var(--text-default);
}

.no-touchevents .button.black:hover {
	background-color: color-mix(in srgb, var(--text-default) 75%, transparent);
}

.no-touchevents .button.black.empty:hover {
	color: color-mix(in srgb, var(--text-default) 75%, transparent);
}

/* Colored buttons styles */

.button.color {
	color: var(--btn-color-text);
}

/* */

.button.red,
.button.red:active {
	background-color: var(--btn-red);
}

.button.red.empty,
.button.red.empty:active {
	color: var(--btn-red);
}

.no-touchevents .button.red:hover {
	background-color: oklch(from var(--btn-red) calc(l + 0.12) c h);
}

.no-touchevents .button.red.empty:hover {
	color: oklch(from var(--btn-red) calc(l + 0.12) c h);
}

/* */

.button.green,
.button.green:active {
	background-color: var(--btn-green);
}

.button.green.empty,
.button.green.empty:active {
	color: var(--btn-green);
}

.no-touchevents .button.green:hover {
	background-color: oklch(from var(--btn-green) calc(l + 0.12) c h);
}

.no-touchevents .button.green.empty:hover {
	color: oklch(from var(--btn-green) calc(l + 0.12) c h);
}

/* */

.button.blue,
.button.blue:active {
	background-color: var(--btn-blue);
}

.button.blue.empty,
.button.blue.empty:active {
	color: var(--btn-blue);
}

.no-touchevents .button.blue:hover {
	background-color: oklch(from var(--btn-blue) calc(l + 0.12) c h);
}

.no-touchevents .button.blue.empty:hover {
	color: oklch(from var(--btn-blue) calc(l + 0.12) c h);
}

/* */

.button.cyan,
.button.cyan:active {
	background-color: var(--btn-cyan);
}

.button.cyan.empty,
.button.cyan.empty:active {
	color: var(--btn-cyan);
}

.no-touchevents .button.cyan:hover {
	background-color: oklch(from var(--btn-cyan) calc(l + 0.12) c h);
}

.no-touchevents .button.cyan.empty:hover {
	color: oklch(from var(--btn-cyan) calc(l + 0.12) c h);
}

/* */

.button.magenta,
.button.magenta:active {
	background-color: var(--btn-magenta);
}

.button.magenta.empty,
.button.magenta.empty:active {
	color: var(--btn-magenta);
}

.no-touchevents .button.magenta:hover {
	background-color: oklch(from var(--btn-magenta) calc(l + 0.12) c h);
}

.no-touchevents .button.magenta.empty:hover {
	color: oklch(from var(--btn-magenta) calc(l + 0.12) c h);
}

/* */

.button.yellow,
.button.yellow:active {
	background-color: var(--btn-yellow);
}

.button.yellow.empty,
.button.yellow.empty:active {
	color: var(--btn-yellow);
}

.no-touchevents .button.yellow:hover {
	background-color: oklch(from var(--btn-yellow) calc(l + 0.12) c h);
}

.no-touchevents .button.yellow.empty:hover {
	color: oklch(from var(--btn-yellow) calc(l + 0.12) c h);
}

/* */

.button.orange,
.button.orange:active {
	background-color: var(--btn-orange);
}

.button.orange.empty,
.button.orange.empty:active {
	color: var(--btn-orange);
}

.no-touchevents .button.orange:hover {
	background-color: oklch(from var(--btn-orange) calc(l + 0.12) c h);
}

.no-touchevents .button.orange.empty:hover {
	color: oklch(from var(--btn-orange) calc(l + 0.12) c h);
}

/* Colored buttons disabled states */

.red.disabled,
.no-touchevents .red.disabled:hover,
.red.disabled:active,
.red[disabled],
.no-touchevents .red[disabled]:hover,
.red[disabled]:active {
	background: color-mix(in oklch, var(--btn-red) var(--dis-bg-pct), var(--dis-bg-mix));
	color: color-mix(in oklch, var(--btn-red) var(--dis-text-pct), var(--dis-text-mix));
	pointer-events: none;
}

.green.disabled,
.no-touchevents .green.disabled:hover,
.green.disabled:active,
.green[disabled],
.no-touchevents .green[disabled]:hover,
.green[disabled]:active {
	background: color-mix(in oklch, var(--btn-green) var(--dis-bg-pct), var(--dis-bg-mix));
	color: color-mix(in oklch, var(--btn-green) var(--dis-text-pct), var(--dis-text-mix));
	pointer-events: none;
}

.blue.disabled,
.no-touchevents .blue.disabled:hover,
.blue.disabled:active,
.blue[disabled],
.no-touchevents .blue[disabled]:hover,
.blue[disabled]:active {
	background: color-mix(in oklch, var(--btn-blue) var(--dis-bg-pct), var(--dis-bg-mix));
	color: color-mix(in oklch, var(--btn-blue) var(--dis-text-pct), var(--dis-text-mix));
	pointer-events: none;
}

.cyan.disabled,
.no-touchevents .cyan.disabled:hover,
.cyan.disabled:active,
.cyan[disabled],
.no-touchevents .cyan[disabled]:hover,
.cyan[disabled]:active {
	background: color-mix(in oklch, var(--btn-cyan) var(--dis-bg-pct), var(--dis-bg-mix));
	color: color-mix(in oklch, var(--btn-cyan) var(--dis-text-pct), var(--dis-text-mix));
	pointer-events: none;
}

.magenta.disabled,
.no-touchevents .magenta.disabled:hover,
.magenta.disabled:active,
.magenta[disabled],
.no-touchevents .magenta[disabled]:hover,
.magenta[disabled]:active {
	background: color-mix(in oklch, var(--btn-magenta) var(--dis-bg-pct), var(--dis-bg-mix));
	color: color-mix(in oklch, var(--btn-magenta) var(--dis-text-pct), var(--dis-text-mix));
	pointer-events: none;
}

.yellow.disabled,
.no-touchevents .yellow.disabled:hover,
.yellow.disabled:active,
.yellow[disabled],
.no-touchevents .yellow[disabled]:hover,
.yellow[disabled]:active {
	background: color-mix(in oklch, var(--btn-yellow) var(--dis-bg-pct), var(--dis-bg-mix));
	color: color-mix(in oklch, var(--btn-yellow) var(--dis-text-pct), var(--dis-text-mix));
	pointer-events: none;
}

.orange.disabled,
.no-touchevents .orange.disabled:hover,
.orange.disabled:active,
.orange[disabled],
.no-touchevents .orange[disabled]:hover,
.orange[disabled]:active {
	background: color-mix(in oklch, var(--btn-orange) var(--dis-bg-pct), var(--dis-bg-mix));
	color: color-mix(in oklch, var(--btn-orange) var(--dis-text-pct), var(--dis-text-mix));
	pointer-events: none;
}