/*! 

	(c) 2025 Alexander McIlwraith 

*/
/* latin */
html {
	font-size: 12pt;
}

body {
	margin: 0;
	padding: 0;
}

* {
	box-sizing: border-box;
}

:root {
	--color-blue: #2e51a1;
	--color-blue-l: #5c7abf;
	--color-blue-xl: #b2c3ec;
	--color-blue-d: #133176;
	--color-blue-xd: #031235;
	--color-oj: #f0b031;
	--color-oj-l: #ffcc67;
	--color-oj-xl: #ffe4ad;
	--color-oj-d: #cb8906;
	--color-oj-xd: #9d6900;
	--color-raspberry: #da2c5b;
	--color-raspberry-l: #ed5e85;
	--color-raspberry-xl: #f9a4bb;
	--color-raspberry-d: #9f0c34;
	--color-raspberry-xd: #400011;
	--color-lime: #cde92f;
	--color-lime-l: #e2f963;
	--color-lime-xl: #effca6;
	--color-lime-d: #9bb40b;
	--color-lime-xd: #607100;
	--color-grey: #7f7f7f;
	--color-grey-l: #b2b2b2;
	--color-grey-xl: #d8d8d8;
	--color-grey-xxl: #f0f0f0;
	--color-white: #fff;
	--color-page: #fff;
	--color-light: #fff;
	--color-grey-d: #4c4c4c;
	--color-grey-xd: #4c4c4c;
	--color-black: #000;
	--color-dark: #000;
}

main {
	display: grid;
	grid-template-columns: 1rem repeat(2, 1fr) 1rem;
	overflow-x: clip;
}
@media (min-width: 768px) {
	main {
		grid-template-columns: auto repeat(2, calc(384px - 2rem)) auto;
	}
}
main section {
	grid-column: 2/4;
	grid-template-columns: subgrid;
	min-height: 100vh;
	padding: 1rem;
}
main section.full-width {
	background-color: #5c7abf;
	color: white;
	display: grid;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
	padding: 0;
}
main section.full-width > * {
	grid-column: 2/4;
	padding: 1rem;
}

header {
	display: grid;
	grid-template-columns: 1rem repeat(2, 1fr) 1rem;
	overflow-x: clip;
}
@media (min-width: 768px) {
	header {
		grid-template-columns: auto repeat(2, calc(384px - 2rem)) auto;
	}
}
header div {
	display: grid;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
}
header div h1 {
	align-items: center;
	display: inline-grid;
	grid-column: 2/4;
	grid-gap: 1rem;
	grid-template-columns: max-content auto;
	margin: 0 0 1rem 0;
}
header div h1::before {
	background: url("//assets.gamv.ca/img/monogram-white-blue.svg") no-repeat;
	content: " ";
	display: inline-block;
	height: 4rem;
	width: 4rem;
}
header div h1 a, header div h1 a:hover, header div h1 a:visited {
	border-bottom: none !important;
	color: var(--color-blue);
	font-family: var(--font-heading);
	font-weight: normal !important;
	text-align: left !important;
	text-decoration: none;
}

.front-page header > div h1 {
	display: block;
	font-size: 4rem;
	text-align: center;
}
.front-page header > div h1 a {
	text-align: center !important;
}
.front-page header > div h1::before {
	background-image: none;
	display: none;
	height: 0;
	width: 0;
}
.front-page header > div > div {
	display: grid;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
	grid-template-rows: 4.5rem;
	height: 14rem;
	justify-items: center;
}
.front-page header > div > div > div:first-of-type {
	background-size: 100%;
	background: url("//assets.gamv.ca/img/monogram-white-blue.svg") no-repeat;
	border-radius: 50%;
	display: inline-block;
	height: 9rem;
	margin-top: -1rem;
	width: 9rem;
	z-index: 2;
}
.front-page header > div > div > div:last-of-type {
	background-color: #eee;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	z-index: 1;
}

@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptug8zYS_SKggPNyC0IT4ttDfA.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: "Raleway";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptug8zYS_SKggPNyCMIT4ttDfCmxA.woff2) format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
	font-family: "Raleway";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptsg8zYS_SKggPNyCg4TYFqL_KWxQ.woff2) format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
	font-family: "Raleway";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url(https://fonts.gstatic.com/s/raleway/v34/1Ptsg8zYS_SKggPNyCg4Q4FqL_KWxWMT.woff2) format("woff2");
	unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
	--font-heading: Raleway, Helvetica, Verdana, sans-serif;
	--font-body: Raleway, Helvetica, Verdana, sans-serif;
}

h1 {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 2.5rem;
	margin: 0 0 1rem 0;
}

h2 {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1.75rem;
	margin: 2rem 0 0.5rem 0;
}

h3 {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1.25rem;
	margin: 1.75rem 0 0.5rem 0;
}

h4 {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1.1rem;
	margin: 1.25rem 0 0.5rem 0;
}

p {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	margin: 0 0 1rem 0;
}

ul, ol {
	padding: 0 1.125rem;
}
ul li, ol li {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	margin: 0 0 0.5rem 0;
}
ul li:last-of-type, ol li:last-of-type {
	margin: 0 0 1rem 0;
}
ul li ul, ul li ol, ol li ul, ol li ol {
	margin-top: 0.5rem;
}

.icon-system-home::before {
	mask-position: 0rem 0rem;
}

.icon-system-close::before {
	mask-position: -2.5rem 0rem;
}

.icon-system-delete::before {
	mask-position: -5rem 0rem;
}

.icon-system-show-password::before {
	mask-position: -7.5rem 0rem;
}

.icon-system-hide-password::before {
	mask-position: -10rem 0rem;
}

.icon-system-settings::before {
	mask-position: -12.5rem 0rem;
}

.icon-system-search::before {
	mask-position: -15rem 0rem;
}

.icon-system-info::before {
	mask-position: -17.5rem 0rem;
}

.icon-system-warning::before {
	mask-position: -20rem 0rem;
}

.icon-system-error::before {
	mask-position: -22.5rem 0rem;
}

.icon-system-start::before {
	mask-position: 0rem -2.5rem;
}

.icon-system-restart::before {
	mask-position: -2.5rem -2.5rem;
}

.icon-system-pause::before {
	mask-position: -5rem -2.5rem;
}

.icon-system-stop::before {
	mask-position: -7.5rem -2.5rem;
}

.icon-system-sort::before {
	mask-position: -10rem -2.5rem;
}

.icon-system-edit::before {
	mask-position: -12.5rem -2.5rem;
}

[class*=icon-system]::before {
	background-color: var(--color-blue);
	mask-image: url("icons-system.svg");
	mask-size: 25rem 25rem;
	content: " ";
	display: inline-block;
	height: 2.5rem;
	width: 2.5rem;
}

.icon-system-sm-home::before {
	mask-position: 0rem 0rem;
}

.icon-system-sm-close::before {
	mask-position: -1.5rem 0rem;
}

.icon-system-sm-delete::before {
	mask-position: -3rem 0rem;
}

.icon-system-sm-show-password::before {
	mask-position: -4.5rem 0rem;
}

.icon-system-sm-hide-password::before {
	mask-position: -6rem 0rem;
}

.icon-system-sm-settings::before {
	mask-position: -7.5rem 0rem;
}

.icon-system-sm-search::before {
	mask-position: -9rem 0rem;
}

.icon-system-sm-info::before {
	mask-position: -10.5rem 0rem;
}

.icon-system-sm-warning::before {
	mask-position: -12rem 0rem;
}

.icon-system-sm-error::before {
	mask-position: -13.5rem 0rem;
}

.icon-system-sm-start::before {
	mask-position: 0rem -1.5rem;
}

.icon-system-sm-restart::before {
	mask-position: -1.5rem -1.5rem;
}

.icon-system-sm-pause::before {
	mask-position: -3rem -1.5rem;
}

.icon-system-sm-stop::before {
	mask-position: -4.5rem -1.5rem;
}

.icon-system-sm-sort::before {
	mask-position: -6rem -1.5rem;
}

.icon-system-sm-edit::before {
	mask-position: -7.5rem -1.5rem;
}

[class*=icon-system-sm]::before {
	background-color: var(--color-blue);
	mask-image: url("icons-system.svg");
	mask-size: 15rem 15rem;
	content: " ";
	display: inline-block;
	height: 1.5rem;
	width: 1.5rem;
}

.form-grid, .form-grid-vertical {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 2rem;
}
@media (max-width: 576px) {
	.form-grid, .form-grid-vertical {
		display: block;
	}
}

.form-grid-vertical {
	grid-auto-flow: column;
}
.form-grid-vertical:has(> *:last-child:nth-child(1)) {
	grid-template-rows: repeat(1, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(2)) {
	grid-template-rows: repeat(1, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(3)) {
	grid-template-rows: repeat(2, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(4)) {
	grid-template-rows: repeat(2, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(5)) {
	grid-template-rows: repeat(3, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(6)) {
	grid-template-rows: repeat(3, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(7)) {
	grid-template-rows: repeat(4, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(8)) {
	grid-template-rows: repeat(4, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(9)) {
	grid-template-rows: repeat(5, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(10)) {
	grid-template-rows: repeat(5, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(11)) {
	grid-template-rows: repeat(6, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(12)) {
	grid-template-rows: repeat(6, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(13)) {
	grid-template-rows: repeat(7, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(14)) {
	grid-template-rows: repeat(7, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(15)) {
	grid-template-rows: repeat(8, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(16)) {
	grid-template-rows: repeat(8, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(17)) {
	grid-template-rows: repeat(9, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(18)) {
	grid-template-rows: repeat(9, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(19)) {
	grid-template-rows: repeat(10, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(20)) {
	grid-template-rows: repeat(10, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(21)) {
	grid-template-rows: repeat(11, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(22)) {
	grid-template-rows: repeat(11, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(23)) {
	grid-template-rows: repeat(12, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(24)) {
	grid-template-rows: repeat(12, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(25)) {
	grid-template-rows: repeat(13, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(26)) {
	grid-template-rows: repeat(13, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(27)) {
	grid-template-rows: repeat(14, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(28)) {
	grid-template-rows: repeat(14, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(29)) {
	grid-template-rows: repeat(15, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(30)) {
	grid-template-rows: repeat(15, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(31)) {
	grid-template-rows: repeat(16, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(32)) {
	grid-template-rows: repeat(16, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(33)) {
	grid-template-rows: repeat(17, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(34)) {
	grid-template-rows: repeat(17, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(35)) {
	grid-template-rows: repeat(18, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(36)) {
	grid-template-rows: repeat(18, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(37)) {
	grid-template-rows: repeat(19, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(38)) {
	grid-template-rows: repeat(19, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(39)) {
	grid-template-rows: repeat(20, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(40)) {
	grid-template-rows: repeat(20, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(41)) {
	grid-template-rows: repeat(21, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(42)) {
	grid-template-rows: repeat(21, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(43)) {
	grid-template-rows: repeat(22, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(44)) {
	grid-template-rows: repeat(22, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(45)) {
	grid-template-rows: repeat(23, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(46)) {
	grid-template-rows: repeat(23, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(47)) {
	grid-template-rows: repeat(24, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(48)) {
	grid-template-rows: repeat(24, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(49)) {
	grid-template-rows: repeat(25, max-content);
}
.form-grid-vertical:has(> *:last-child:nth-child(50)) {
	grid-template-rows: repeat(25, max-content);
}

input[type=text] {
	border: 1px solid var(--color-blue);
	border-radius: 0.25rem;
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	padding: 0.5rem;
	width: 100%;
}
input[type=text]:disabled {
	border: 1px solid var(--color-grey);
	background-color: var(--color-grey-xxl);
	color: var(--color-grey-xd);
}
input[type=text]:focus {
	background-color: var(--color-white);
}
input[type=text] option {
	padding: 0.5rem;
	margin: 2rem;
}

:has(> input[type=text]) {
	margin: 0 0 1rem 0;
}
:has(> input[type=text]) label {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
}

:has(> input[type=text]:disabled) label {
	padding: 0 1rem 0 0;
	position: relative;
}
:has(> input[type=text]:disabled) label::after {
	color: red;
	content: "*";
	font-size: 2rem;
	padding: 0 0.15rem;
	position: absolute;
	top: -0.5rem;
}

:has(> autosuggest-items) {
	position: relative;
}

autosuggest-items {
	border: 1px solid var(--color-blue-xl);
	box-sizing: border-box;
	display: block;
	left: 0;
	position: absolute;
	right: 0;
	z-index: 99;
}
autosuggest-items autosuggest-item {
	background-color: var(--color-white);
	border-bottom: 1px solid var(--color-blue-xl);
	cursor: pointer;
	display: block;
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	padding: 10px;
}
autosuggest-items autosuggest-item:last-of-type {
	border-bottom: none;
}
autosuggest-items autosuggest-item:hover {
	background-color: var(--color-blue-xl);
}
autosuggest-items autosuggest-item.autosuggest-active {
	background-color: var(--color-blue);
	color: var(--color-white);
}

section:has(> nav) {
	background-color: var(--color-blue-xd);
	display: grid !important;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
	gap: 0 !important;
}
@media (max-width: 768px) {
	section:has(> nav) {
		z-index: 5;
	}
}
section:has(> nav) button {
	display: none;
}
@media (max-width: 768px) {
	section:has(> nav) button {
		background-color: var(--color-blue-xd);
		border: none;
		display: initial;
		left: -1.5em;
		position: fixed;
		top: calc(50vh - 3rem);
		transform: rotate(90deg);
		width: 6rem;
		z-index: 5;
	}
}
section:has(> nav) button span {
	left: -9999px;
	position: absolute;
}
section:has(> nav) nav {
	grid-column: 2/4;
}
@media (max-width: 768px) {
	section:has(> nav) nav {
		grid-column: 1/-1;
	}
}
section:has(> nav) nav ul {
	align-items: center;
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	margin: 0;
	padding: 0;
}
@media (max-width: 768px) {
	section:has(> nav) nav ul {
		grid-auto-flow: row;
	}
}
section:has(> nav) nav ul li {
	text-align: center;
	list-style-type: none;
	padding: 1rem 2rem;
	place-items: stretch;
	margin: 0;
}
section:has(> nav) nav ul li:last-of-type {
	margin: 0;
}
section:has(> nav) nav ul li a, section:has(> nav) nav ul li a:visited {
	color: var(--color-light) !important;
	border-bottom: none !important;
}
section:has(> nav) nav ul li.active {
	background-color: var(--color-oj-d);
	color: var(--color-blue-xd) !important;
	place-self: stretch;
	place-content: center;
}
section:has(> nav) nav ul li.active a, section:has(> nav) nav ul li.active a:visited {
	color: var(--color-blue-xd) !important;
}

input[type=date], input[type=time], input[type=datetime-local] {
	-moz-appearance: none;
	-webkit-appearance: none;
	background-color: var(--color-white);
	border-radius: 0.25rem;
	border: 1px solid var(--color-blue);
	color: var(--color-black);
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	min-height: 2.5rem;
	padding: 0.5rem;
	width: 100%;
}
input[type=date]:disabled, input[type=time]:disabled, input[type=datetime-local]:disabled {
	border: 1px solid var(--color-grey);
	background-color: var(--color-grey-xxl);
	color: var(--color-grey-xd);
}
input[type=date]:focus, input[type=time]:focus, input[type=datetime-local]:focus {
	background-color: var(--color-white);
}
input[type=date] option, input[type=time] option, input[type=datetime-local] option {
	padding: 0.5rem;
	margin: 2rem;
}

:has(> input[type=date]), :has(> input[type=time]), :has(> input[type=datetime-local]) {
	margin: 0 0 1rem 0;
}
:has(> input[type=date]) label, :has(> input[type=time]) label, :has(> input[type=datetime-local]) label {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
}

:has(> input[type=date]:disabled) label, :has(> input[type=time]:disabled) label, :has(> input[type=datetime-local]:disabled) label {
	padding: 0 1rem 0 0;
	position: relative;
}
:has(> input[type=date]:disabled) label::after, :has(> input[type=time]:disabled) label::after, :has(> input[type=datetime-local]:disabled) label::after {
	color: red;
	content: "*";
	font-size: 2rem;
	padding: 0 0.15rem;
	position: absolute;
	top: -0.5rem;
}

:has(> div > .password-revealer), :has(> div > [type=password]) {
	margin: 0 0 1rem 0;
}
:has(> div > .password-revealer) div, :has(> div > [type=password]) div {
	display: grid;
	grid-template-columns: auto 3rem;
	column-gap: 0.5rem;
}
:has(> div > .password-revealer) input, :has(> div > [type=password]) input {
	border: 1px solid var(--color-blue);
	border-radius: 0.25rem;
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	padding: 0.5rem;
	width: 100%;
	grid-column: 1/-1;
	grid-row: 1;
	padding: 0.5rem 3.5rem 0.5rem 0.5rem;
}
:has(> div > .password-revealer) .password-revealer, :has(> div > [type=password]) .password-revealer {
	grid-column: 2;
	grid-row: 1;
	display: grid;
	grid-template-columns: 100%;
	place-items: center;
	overflow: hidden;
	margin-right: 0.5rem;
}
:has(> div > .password-revealer) .password-revealer:before, :has(> div > [type=password]) .password-revealer:before {
	grid-row: 1;
	grid-column: 1;
	display: block;
	background-color: var(--color-blue-d);
}
:has(> div > .password-revealer) label, :has(> div > [type=password]) label {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
}

:has(> input[type=password]:disabled) label {
	padding: 0 1rem 0 0;
	position: relative;
}
:has(> input[type=password]:disabled) label::after {
	color: red;
	content: "*";
	font-size: 2rem;
	padding: 0 0.15rem;
	position: absolute;
	top: -0.5rem;
}

button, input[type=button], input[type=submit], input[type=reset] {
	background-color: var(--color-white);
	border: 2px solid;
	border-color: currentcolor;
	border-radius: 0.25rem;
	color: var(--color-blue);
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 1rem;
	font-weight: bold;
	min-width: 160px;
	padding: 0.5rem 2rem;
}
button:hover, button:active, button:focus, input[type=button]:hover, input[type=button]:active, input[type=button]:focus, input[type=submit]:hover, input[type=submit]:active, input[type=submit]:focus, input[type=reset]:hover, input[type=reset]:active, input[type=reset]:focus {
	background-color: var(--color-blue-xl);
}
button.btn-primary, input[type=button].btn-primary, input[type=submit].btn-primary, input[type=reset].btn-primary {
	background-color: var(--color-blue);
	border-color: var(--color-blue);
	color: var(--color-white);
}
button.btn-primary:hover, button.btn-primary:active, button.btn-primary:focus, input[type=button].btn-primary:hover, input[type=button].btn-primary:active, input[type=button].btn-primary:focus, input[type=submit].btn-primary:hover, input[type=submit].btn-primary:active, input[type=submit].btn-primary:focus, input[type=reset].btn-primary:hover, input[type=reset].btn-primary:active, input[type=reset].btn-primary:focus {
	background-color: var(--color-blue-xl);
	color: var(--color-blue);
}
button:disabled, button:disabled:hover, input[type=button]:disabled, input[type=button]:disabled:hover, input[type=submit]:disabled, input[type=submit]:disabled:hover, input[type=reset]:disabled, input[type=reset]:disabled:hover {
	background-color: var(--color-grey-xxl);
	border-color: var(--color-grey);
	color: var(--color-grey);
}

:has(> button:not(.password-revealer)),
:has(> input[type=button]) :has(> input[type=submit]),
:has(> input[type=reset]) {
	display: flex;
	flex-direction: row-reverse;
	gap: 1rem;
}
:has(> button:not(.password-revealer)) button, :has(> button:not(.password-revealer)) input[type=button], :has(> button:not(.password-revealer)) input[type=submit], :has(> button:not(.password-revealer)) input[type=reset],
:has(> input[type=button]) :has(> input[type=submit]) button,
:has(> input[type=button]) :has(> input[type=submit]) input[type=button],
:has(> input[type=button]) :has(> input[type=submit]) input[type=submit],
:has(> input[type=button]) :has(> input[type=submit]) input[type=reset],
:has(> input[type=reset]) button,
:has(> input[type=reset]) input[type=button],
:has(> input[type=reset]) input[type=submit],
:has(> input[type=reset]) input[type=reset] {
	grid-row: 1;
}
:has(> button:not(.password-revealer)) .btn-primary,
:has(> input[type=button]) :has(> input[type=submit]) .btn-primary,
:has(> input[type=reset]) .btn-primary {
	grid-column: -1;
}

fieldset {
	margin: 0 0 1rem 0;
	padding: 0 1rem;
	border: 1px solid var(--color-blue-xl);
}
fieldset:has(legend:empty) {
	border: none;
	margin: 0;
	padding: 0;
}
fieldset:has(legend:empty) legend {
	display: none;
}
fieldset legend {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	margin: 0 0 0.5rem 0;
	padding: 0 2rem 0 -2rem;
	position: relative;
	top: -0.25rem;
}
fieldset legend:empty {
	display: none;
}

fieldset {
	margin: 0 0 1rem 0;
	padding: 0 1rem;
	border: 1px solid var(--color-blue-xl);
}
fieldset:has(legend:empty) {
	border: none;
	margin: 0;
	padding: 0;
}
fieldset:has(legend:empty) legend {
	display: none;
}
fieldset legend {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	margin: 0 0 0.5rem 0;
	padding: 0 2rem 0 -2rem;
	position: relative;
	top: -0.25rem;
}
fieldset legend:empty {
	display: none;
}

table:not([role=presentation]) {
	border-collapse: collapse;
	border-top: 2px solid var(--color-blue);
	margin: 0 0 1rem 0;
}
table:not([role=presentation]) caption {
	font-family: var(--font-body);
	font-size: 1.25rem;
}
table:not([role=presentation]) thead tr td, table:not([role=presentation]) thead tr th {
	border-bottom: 1px solid var(--color-blue);
	border-right: 1px solid var(--color-white);
	background-color: var(--color-grey-xxl);
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-weight: bold;
	padding: 0.25rem 0.5rem;
}
table:not([role=presentation]) thead tr td:last-of-type, table:not([role=presentation]) thead tr th:last-of-type {
	border-right: none;
}
table:not([role=presentation]) tbody tr td {
	border-bottom: 1px solid var(--color-grey-xl);
	border-right: 1px solid var(--color-grey-xl);
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	padding: 0.25rem 0.5rem;
}
table:not([role=presentation]) tbody tr td:last-of-type {
	border-right: none;
}
table:not([role=presentation]) tbody tr:last-child td {
	border-bottom: 1px solid var(--color-blue);
}
table:not([role=presentation]) tbody + caption {
	font-family: Raleway, Helvetica, Verdana, sans-serif;
	font-size: 0.9rem;
	caption-side: bottom;
}

dialog {
	padding: 0;
	position: absolute;
	top: 0;
	left: 0;
	translate: 0% 50%;
	border: 0.125rem solid var(--color-blue);
}
dialog h1 {
	margin: 0 0 1rem 0;
	padding: 1rem 1rem 0.5rem 1rem;
	color: var(--color-white);
	background-color: var(--color-blue);
}
dialog div {
	margin: 1rem;
}

main section {
	min-height: auto;
	margin: 0;
	padding: 0;
}

nav {
	display: grid;
	grid-template-columns: 1rem repeat(2, 1fr) 1rem;
	overflow-x: clip;
}
@media (min-width: 768px) {
	nav {
		grid-template-columns: auto repeat(2, calc(384px - 2rem)) auto;
	}
}
nav ul {
	display: grid;
	grid-column: 2/4;
	grid-template-columns: repeat(4, 1fr);
	list-style-type: none;
}
nav ul li {
	text-align: center;
}

#data {
	column-gap: 1rem;
	display: grid;
	grid-template-columns: max-content auto repeat(2, 1fr) repeat(4, max-content);
}
@media (max-width: 768px) {
	#data {
		grid-template-columns: repeat(3, 1fr);
	}
}
#data row {
	display: grid;
	font-family: var(--font-body);
	padding: 0.5rem;
	grid-column: 1/-1;
	grid-template-columns: subgrid;
}
#data row:nth-of-type(odd) {
	background-color: var(--color-grey-xxl);
}
@media (max-width: 768px) {
	#data row {
		row-gap: 0.5rem;
	}
}
@media (max-width: 768px) {
	#data row > button-icon {
		grid-column: 3;
		grid-row: 3;
		justify-self: end;
	}
}
#data row div:has(> button-icon) {
	display: grid;
	grid-template-columns: repeat(2, 2.5rem);
	gap: 0.5rem;
}
@media (max-width: 768px) {
	#data row div:has(> button-icon) {
		grid-row: 3;
		margin-right: 3rem;
		grid-column: 1/-1;
		justify-self: end;
	}
}
#data row-date {
	background-color: var(--color-blue-xl);
	font-family: var(--font-body);
	font-weight: bold;
	grid-column: 1/-1;
	padding: 0.5rem 0.25rem;
}

button-icon {
	height: 2.5rem;
	overflow: hidden;
	width: 2.5rem;
	display: inline-block;
}

:has(> #add-new) {
	display: grid;
	grid-template-columns: max-content auto;
	margin-bottom: 1rem;
}
:has(> #add-new):after {
	clear: both;
	content: " ";
	display: block;
}
:has(> #add-new) a {
	display: grid;
	grid-template-columns: repeat(2, max-content);
	place-items: center;
	font-family: var(--font-body);
}
:has(> #add-new) a#add-new {
	background-color: var(--color-white);
	border-color: currentcolor;
	border-radius: 0.25rem;
	border: 2px solid;
	color: var(--color-blue);
	font-size: 1rem;
	font-weight: bold;
	min-width: 160px;
	padding: 0.5rem 2rem;
	text-align: center;
	text-decoration: none;
}
:has(> #add-new) a#add-new:hover {
	background-color: var(--color-blue-xl);
}
:has(> #add-new) a.sort-activities {
	align-self: center;
	color: currentColor;
	justify-self: end;
	text-decoration: none;
}

.total td {
	font-weight: bold;
}