:root {
	--font-size-default: var(--font-size);
	--font-size-1: 0.9em;
	--font-size-2: 1.2em;
	--font-size-3: 1.5em;
	--font-size-4: 2em;

	--font-weight-semibold: 600;
	--font-weight-bold: 700;

	--line-height-default: 1;
	--line-height-large: 2;

	--spacing-2: 2px;
	--spacing-4: 4px;
	--spacing-8: 8px;
	--spacing-12: 12px;
	--spacing-20: 20px;
	--spacing-24: 24px;
	--spacing-36: 36px;
	--spacing-40: 40px;
	--spacing-50: 50px;

	--border-radius-tiny: var(--spacing-4);
	--border-radius-small: var(--spacing-8);
	--border-radius-default: var(--spacing-12);
	--border-radius-large: var(--spacing-20);

	--border-size-default: var(--spacing-2);

	--logo-max-height: 60px;

	--icon-size-default: var(--spacing-20);
	--icon-size-small: 15px;

	--input-height-default: var(--spacing-40);
	--input-height-checkbox: var(--spacing-20);
	--input-height-textarea: 200px;
	--input-width-textbox-default: 300px;
	--input-padding-default: var(--spacing-8) var(--spacing-12);

	--transition-properties: color, background-color, border-color, text-decoration-color;
	--transition-default: 0.5s;
	--transition-fast: 0.1s;

	--colour-success: #1db968;
	--colour-danger: #fd2700;
	--colour-accent-70: color-mix(in srgb, var(--colour-default), transparent 30%);
	--colour-default-70: color-mix(in srgb, var(--colour-default), transparent 30%);
	--colour-outline-50: color-mix(in srgb, var(--colour-outline), transparent 50%);
	--colour-outline-70: color-mix(in srgb, var(--colour-outline), transparent 30%);
	--colour-surface-70: color-mix(in srgb, var(--colour-surface), transparent 30%);
	--colour-black-50: color-mix(in srgb, #000, transparent 50%);
	--colour-black-70: color-mix(in srgb, #000, transparent 70%);
}

*,
::before,
::after {
	box-sizing: border-box;
}

html, body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	background-color: var(--colour-background);
	color: var(--colour-default);
	font-family: var(--font-family);
	font-size: var(--font-size-default);
	line-height: var(--line-height-default);
}

p {
	margin: 0;
	line-height: var(--line-height-large);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin: 0;
}

h1,
h2 {
	font-weight: bold;
	font-size: var(--font-size-4);
}

a {
	color: inherit;
	text-decoration: none;
	cursor: pointer;
	transition-property: var(--transition-properties);
	transition-duration: var(--transition-default);

	&[href]:not(.k-button, .k-link, .k-grid-filter) {
		color: var(--colour-accent);
		font-weight: var(--font-weight-bold);
		text-decoration: underline;
		text-decoration-color: transparent;

		&:hover {
			text-decoration-color: var(--colour-accent);
		}
	}
}

hr {
	border-color: var(--colour-outline);
	width: 100%;
}

ol,
ul {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);

	li {
		padding: 0;
		margin: 0;

		&:empty {
			display: none;
		}
	}
}

img {
	max-width: 100%;
}

table {
	width: 100% !important;
	text-align: left;
	border-collapse: collapse;

	th,
	td {
		white-space: nowrap;
		vertical-align: middle;
		padding: var(--spacing-4);

		&:not(.k-grid &) {
			&:first-child {
				padding-left: 0;
			}

			&:last-child {
				padding-right: 0;
			}
		}


		>* {
			vertical-align: middle;
		}
	}

	thead {
		border-bottom: 2px solid var(--colour-accent);

		th {
			&.k-filterable {
				.k-grid-filter {
					margin-right: var(--spacing-8);
				}
			}

			span.k-link {
				&:hover {
					color: var(--colour-default);
				}
			}
		}
	}

	tbody {
		tr {
			&.k-alt {
				background-color: var(--colour-surface-70);
			}

			&.failure-text {
				color: var(--colour-default-70);
			}
		}
	}
}

.k-filter-menu {
	background-color: var(--colour-background);
	border-radius: var(--border-radius-default);
	padding: var(--spacing-24);

	.k-filter-help-text {
		white-space: nowrap;
	}

	>div {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-12);

		>div:last-child {
			display: flex;
			gap: var(--spacing-4);
		}
	}
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
	-webkit-box-shadow: 0 0 0px 1000px var(--colour-surface) inset !important;
	box-shadow: 0 0 0px 1000px var(--colour-surface) inset !important;
	-webkit-text-fill-color: var(--colour-default) !important;
	caret-color: var(--colour-default) !important;
	transition: background-color 5000s ease-in-out 0s;
}

input,
button:not(.k-button-icon-only),
.k-button:not(.k-button-icon-only),
input::file-selector-button,
.k-textbox,
.k-dropdown,
iframe.k-content {
	margin: 0;
	padding: 0;
	font-family: inherit;
	font-size: 100%;
	outline: none;
	color: var(--colour-default);
	background-color: var(--colour-surface);
	border: var(--border-size-default) solid var(--colour-outline);
	border-radius: var(--border-radius-small);
	transition-property: var(--transition-properties);
	transition-duration: var(--transition-default);
	&:hover, &:focus {
		border-color: var(--colour-accent);
	}
}

*:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	justify-content: start;

	label:not(:first-child) {
		margin-left: var(--spacing-8);
		margin-bottom: 0;
		cursor: pointer;
	}

	input[type="checkbox"] {
		appearance: none;
		position: relative;
		height: var(--input-height-checkbox);
		aspect-ratio: 1/1;
		border-radius: var(--border-radius-tiny);

		&:checked {
			border-color: var(--colour-accent);

			&:before {
				content: ' ';
				background-color: var(--colour-accent);
				mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/></svg>");
				width: 100%;
				height: 100%;
				display: block;
			}
		}
	}

}


label {
	display: block;
	font-size: var(--font-size-1);
	font-weight: var(--font-weight-semibold);
	margin-bottom: var(--spacing-8);
	white-space: nowrap;
}

form,
fieldset {
	border: 0;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: start;
	gap: var(--spacing-24);

	legend {
		display: none;
	}
}

section {
	padding: var(--spacing-36);

	h2 {
		margin-bottom: var(--spacing-36);
	}
}

.validation-summary ul {
	list-style: disc;
	padding-left: var(--spacing-20);
}

.k-link,
.k-grid-filter,
.k-button-icon-only {
	display: inline-flex;
	align-items: center;
	gap: var(--spacing-2);
	transition-property: var(--transition-properties);
	transition-duration: var(--transition-default);
	background: none;

	&:hover {
		color: var(--colour-accent);
	}
}

.k-button:not(.k-button-icon-only),
input::file-selector-button,
.k-textbox,
input.k-input,
.k-dropdown {
	height: var(--input-height-default);
	line-height: var(--input-height-default);
	padding: var(--input-padding-default);
}

.k-button:not(.k-button-icon-only),
input::file-selector-button {
	cursor: pointer;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--spacing-4);
	font-weight: var(--font-weight-semibold);

	&:hover {
		background-color: var(--colour-accent);
	}

	span:not(.k-icon):empty {
		display: none;
	}

	&[type="submit"] {
		border-color: var(--colour-accent);
		background-color: var(--colour-accent);
		color: var(--colour-default);

		&:hover {
			background-color: var(--colour-background);
		}
	}
}

input::file-selector-button {
	height: var(--spacing-24) !important;
	line-height: var(--spacing-24) !important;
	border-radius: 0 !important;
	font-weight: normal !important;
	margin-right: var(--spacing-12);
}

.k-textbox,
input.k-input {
	width: var(--input-width-textbox-default) !important;

	&.input-w2 {
		width: 100% !important;
	}

	&:is(textarea) {
		width: 100% !important;
		height: var(--input-height-textarea);
		line-height: auto;
	}
}

.k-dropdown {
	display: inline-flex;
	align-items: center;
	cursor: pointer;

	.k-dropdown-wrap {
		display: flex;
		align-items: center;
		gap: var(--spacing-8);
		width: 100%;
		justify-content: space-between;

		.k-select {
			display: flex;
			align-items: center;
		}
	}
}

div:has(> .k-colorpicker) {
	display: flex;
	gap: var(--spacing-12);

	.k-picker-wrap {
		display: flex;
		gap: var(--spacing-4);
		align-items: center;
		cursor: pointer;

		.k-selected-color {
			border: 1px solid var(--colour-default);
			border-radius: 100%;
			width: var(--spacing-36);
			aspect-ratio: 1/1;
			flex-grow: 0;
			flex-shrink: 0;
			display: block;
		}

		.k-select {
			display: none;
		}
	}
}

.k-flatcolorpicker {
	font-size: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	font-family: inherit !important;
	width: 250px !important;
	background-color: var(--colour-background);
	border-radius: var(--border-radius-small);
	border: 2px solid var(--colour-outline);
	padding: var(--spacing-12);
	position: relative;

	.k-draghandle {
		cursor: pointer;
		position: absolute;
		z-index: 10;
		font-size: 0;
		overflow: hidden;
		text-decoration: none;
		outline: 0;
		border: 3px solid var(--colour-outline);
		height: 16px;
		aspect-ratio: 1/1;
		border-radius: 100%;

		&:hover {
			border-color: var(--colour-accent);
		}
	}

	.k-selected-color {
		border: 1px solid var(--colour-outline);

		.k-selected-color-display {
			display: flex;
			justify-content: end;

			input.k-color-value {
				padding: .75em .3em .65em 1em;
				width: 70%;
				border-radius: 0;
				border: 0;
				border-left: 1px solid var(--colour-outline);
			}
		}
	}

	.k-hsv-rectangle {
		position: relative;

		&.k-dragging,
		&.k-dragging * {
			cursor: none
		}

		.k-hsv-gradient {
			background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0, #000 100%), linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%);
			height: 180px;
			margin-bottom: 5px
		}

		.k-draghandle {
			margin-left: -6px;
			margin-top: -6px;
		}
	}

	.k-hue-slider {

		.k-slider-wrap {
			width: 100%;
			height: 100%;

			.k-slider-track {
				position: relative;
				height: 10px;
				background: linear-gradient(to right, red 0, #ff0 16%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 84%, #ff0004 100%);

				.k-draghandle {
					margin-left: -3px;
					margin-top: -3px;
				}
			}
		}
	}

	.k-controls {
		margin-top: var(--spacing-12);
	}
}


.k-list-container {
	background-color: var(--colour-background);
	overflow: hidden;
	border: 2px solid var(--colour-outline);
	border-radius: var(--border-radius-small);
	font-size: inherit !important;
	font-style: inherit !important;
	line-height: inherit !important;
	font-family: inherit !important;
	width: auto !important;


	.searchHeader {
		padding: var(--spacing-12);
		display: flex;
		align-items: center;
		width: 100%;
		flex-wrap: wrap;
		gap: var(--spacing-12);
		justify-content: center;

		a {
			font-weight: normal;
			text-decoration: none;
			color: var(--colour-default);

			&:hover {
				color: var(--colour-accent);
			}
		}

		hr {
			flex-basis: 100%;
			margin: 0;
		}
	}

	.k-list {
		scrollbar-width: thin;
		scrollbar-color: var(--colour-accent) transparent;
		padding: var(--spacing-12);
		gap: var(--spacing-12);
		height: 100% !important;

		li {
			white-space: nowrap;

			&:hover {
				cursor: pointer;
				color: var(--colour-accent);
			}
		}
	}
}

.k-numeric-wrap {
	position: relative;
	display: block;

	.k-select {
		position: absolute;
		top: 0;
		right: 5px;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.k-datepicker {
	position: relative;

	.k-select {
		position: absolute;
		top: 0;
		height: 100%;
		right: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

.k-calendar {
	background-color: var(--colour-background);
	padding: var(--spacing-12);
	overflow: hidden;

	.k-header,
	.k-footer {
		display: flex;
		align-items: center;
		clear: both;
	}

	.k-header {
		justify-content: space-between;
	}

	.k-footer {
		justify-content: center;
	}

	table {
		margin: var(--spacing-12) 0;
		float: left;

		td,
		th {
			text-align: center;
			height: auto;
			white-space: unset;

			&.k-other-month {
				columns: var(--colour-outline);
			}
		}
	}
}

.k-editable-area {
	.k-content {
		width: 100%;
		padding: var(--spacing-12);
	}
}

.k-tooltip {
	padding: var(--spacing-12);
	background-color: var(--colour-background);
	border-radius: var(--border-radius-small);
	border: 2px solid var(--colour-outline);
	line-height: 1.5;
}

.k-icon {
	--icon-size: var(--icon-size-default);
	display: inline-block;
	font-size: 0;
	mask-size: 100%;
	background-color: currentColor;
	width: var(--icon-size);
	height: var(--icon-size);
	aspect-ratio: 1/1;

	&.k-i-close,
	&.k-i-cancel,
	&.k-cancel {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708'/></svg>");
	}

	&.k-update {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11 2H9v3h2z'/><path d='M1.5 0h11.586a1.5 1.5 0 0 1 1.06.44l1.415 1.414A1.5 1.5 0 0 1 16 2.914V14.5a1.5 1.5 0 0 1-1.5 1.5h-13A1.5 1.5 0 0 1 0 14.5v-13A1.5 1.5 0 0 1 1.5 0M1 1.5v13a.5.5 0 0 0 .5.5H2v-4.5A1.5 1.5 0 0 1 3.5 9h9a1.5 1.5 0 0 1 1.5 1.5V15h.5a.5.5 0 0 0 .5-.5V2.914a.5.5 0 0 0-.146-.353l-1.415-1.415A.5.5 0 0 0 13.086 1H13v4.5A1.5 1.5 0 0 1 11.5 7h-7A1.5 1.5 0 0 1 3 5.5V1H1.5a.5.5 0 0 0-.5.5m3 4a.5.5 0 0 0 .5.5h7a.5.5 0 0 0 .5-.5V1H4zM3 15h10v-4.5a.5.5 0 0 0-.5-.5h-9a.5.5 0 0 0-.5.5z'/></svg>");
	}

	&.k-image {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6.002 5.5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0'/><path d='M2.002 1a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V3a2 2 0 0 0-2-2zm12 1a1 1 0 0 1 1 1v6.5l-3.777-1.947a.5.5 0 0 0-.577.093l-3.71 3.71-2.66-1.772a.5.5 0 0 0-.63.062L1.002 12V3a1 1 0 0 1 1-1z'/></svg>");
	}

	&.k-delete {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z'/><path d='M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z'/></svg>");
	}

	&.k-i-arrow-s,
	&.k-i-arrowhead-s {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708'/></svg>");
	}

	&.k-i-question {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16'/><path d='M5.255 5.786a.237.237 0 0 0 .241.247h.825c.138 0 .248-.113.266-.25.09-.656.54-1.134 1.342-1.134.686 0 1.314.343 1.314 1.168 0 .635-.374.927-.965 1.371-.673.489-1.206 1.06-1.168 1.987l.003.217a.25.25 0 0 0 .25.246h.811a.25.25 0 0 0 .25-.25v-.105c0-.718.273-.927 1.01-1.486.609-.463 1.244-.977 1.244-2.056 0-1.511-1.276-2.241-2.673-2.241-1.267 0-2.655.59-2.75 2.286m1.557 5.763c0 .533.425.927 1.01.927.609 0 1.028-.394 1.028-.927 0-.552-.42-.94-1.029-.94-.584 0-1.009.388-1.009.94'/></svg>");
	}

	&.k-i-arrow-n,
	&.k-i-arrowhead-n {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M7.646 4.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1-.708.708L8 5.707l-5.646 5.647a.5.5 0 0 1-.708-.708z'/></svg>");
	}

	&.k-i-custom {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 4.754a3.246 3.246 0 1 0 0 6.492 3.246 3.246 0 0 0 0-6.492M5.754 8a2.246 2.246 0 1 1 4.492 0 2.246 2.246 0 0 1-4.492 0'/><path d='M9.796 1.343c-.527-1.79-3.065-1.79-3.592 0l-.094.319a.873.873 0 0 1-1.255.52l-.292-.16c-1.64-.892-3.433.902-2.54 2.541l.159.292a.873.873 0 0 1-.52 1.255l-.319.094c-1.79.527-1.79 3.065 0 3.592l.319.094a.873.873 0 0 1 .52 1.255l-.16.292c-.892 1.64.901 3.434 2.541 2.54l.292-.159a.873.873 0 0 1 1.255.52l.094.319c.527 1.79 3.065 1.79 3.592 0l.094-.319a.873.873 0 0 1 1.255-.52l.292.16c1.64.893 3.434-.902 2.54-2.541l-.159-.292a.873.873 0 0 1 .52-1.255l.319-.094c1.79-.527 1.79-3.065 0-3.592l-.319-.094a.873.873 0 0 1-.52-1.255l.16-.292c.893-1.64-.902-3.433-2.541-2.54l-.292.159a.873.873 0 0 1-1.255-.52zm-2.633.283c.246-.835 1.428-.835 1.674 0l.094.319a1.873 1.873 0 0 0 2.693 1.115l.291-.16c.764-.415 1.6.42 1.184 1.185l-.159.292a1.873 1.873 0 0 0 1.116 2.692l.318.094c.835.246.835 1.428 0 1.674l-.319.094a1.873 1.873 0 0 0-1.115 2.693l.16.291c.415.764-.42 1.6-1.185 1.184l-.291-.159a1.873 1.873 0 0 0-2.693 1.116l-.094.318c-.246.835-1.428.835-1.674 0l-.094-.319a1.873 1.873 0 0 0-2.692-1.115l-.292.16c-.764.415-1.6-.42-1.184-1.185l.159-.291A1.873 1.873 0 0 0 1.945 8.93l-.319-.094c-.835-.246-.835-1.428 0-1.674l.319-.094A1.873 1.873 0 0 0 3.06 4.377l-.16-.292c-.415-.764.42-1.6 1.185-1.184l.292.159a1.873 1.873 0 0 0 2.692-1.115z'/></svg>");
	}

	&.k-i-tick {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M10.97 4.97a.75.75 0 0 1 1.07 1.05l-3.99 4.99a.75.75 0 0 1-1.08.02L4.324 8.384a.75.75 0 1 1 1.06-1.06l2.094 2.093 3.473-4.425z'/></svg>");
	}

	&.k-i-plus,
	&.k-plus,
	&.k-add {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4'/></svg>");
	}

	&.k-minus {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M4 8a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7A.5.5 0 0 1 4 8'/></svg>");
	}

	&.k-i-paint-bucket {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M8 5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3m4 3a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3M5.5 7a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m.5 6a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3'/><path d='M16 8c0 3.15-1.866 2.585-3.567 2.07C11.42 9.763 10.465 9.473 10 10c-.603.683-.475 1.819-.351 2.92C9.826 14.495 9.996 16 8 16a8 8 0 1 1 8-8m-8 7c.611 0 .654-.171.655-.176.078-.146.124-.464.07-1.119-.014-.168-.037-.37-.061-.591-.052-.464-.112-1.005-.118-1.462-.01-.707.083-1.61.704-2.314.369-.417.845-.578 1.272-.618.404-.038.812.026 1.16.104.343.077.702.186 1.025.284l.028.008c.346.105.658.199.953.266.653.148.904.083.991.024C14.717 9.38 15 9.161 15 8a7 7 0 1 0-7 7'/></svg>");
	}

	&.k-i-megaphone {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M13 2.5a1.5 1.5 0 0 1 3 0v11a1.5 1.5 0 0 1-3 0v-.214c-2.162-1.241-4.49-1.843-6.912-2.083l.405 2.712A1 1 0 0 1 5.51 15.1h-.548a1 1 0 0 1-.916-.599l-1.85-3.49-.202-.003A2.014 2.014 0 0 1 0 9V7a2.02 2.02 0 0 1 1.992-2.013 75 75 0 0 0 2.483-.075c3.043-.154 6.148-.849 8.525-2.199zm1 0v11a.5.5 0 0 0 1 0v-11a.5.5 0 0 0-1 0m-1 1.35c-2.344 1.205-5.209 1.842-8 2.033v4.233q.27.015.537.036c2.568.189 5.093.744 7.463 1.993zm-9 6.215v-4.13a95 95 0 0 1-1.992.052A1.02 1.02 0 0 0 1 7v2c0 .55.448 1.002 1.006 1.009A61 61 0 0 1 4 10.065m-.657.975 1.609 3.037.01.024h.548l-.002-.014-.443-2.966a68 68 0 0 0-1.722-.082z'/></svg>");
	}

	&.k-i-tag {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M5.854 4.854a.5.5 0 1 0-.708-.708l-3.5 3.5a.5.5 0 0 0 0 .708l3.5 3.5a.5.5 0 0 0 .708-.708L2.707 8zm4.292 0a.5.5 0 0 1 .708-.708l3.5 3.5a.5.5 0 0 1 0 .708l-3.5 3.5a.5.5 0 0 1-.708-.708L13.293 8z'/></svg>");
	}

	&.k-i-search {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001q.044.06.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1 1 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0'/></svg>");
	}

	&.k-i-arrow-w,
	&.k-i-arrowhead-w {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0' /></svg>");
	}

	&.k-i-arrow-e,
	&.k-i-arrowhead-e {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708'/></svg>");
	}

	&.k-i-seek-w {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M11.854 3.646a.5.5 0 0 1 0 .708L8.207 8l3.647 3.646a.5.5 0 0 1-.708.708l-4-4a.5.5 0 0 1 0-.708l4-4a.5.5 0 0 1 .708 0M4.5 1a.5.5 0 0 0-.5.5v13a.5.5 0 0 0 1 0v-13a.5.5 0 0 0-.5-.5' /></svg>");
	}

	&.k-i-seek-e {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M4.146 3.646a.5.5 0 0 0 0 .708L7.793 8l-3.647 3.646a.5.5 0 0 0 .708.708l4-4a.5.5 0 0 0 0-.708l-4-4a.5.5 0 0 0-.708 0M11.5 1a.5.5 0 0 1 .5.5v13a.5.5 0 0 1-1 0v-13a.5.5 0 0 1 .5-.5'/></svg>");
	}

	&.k-filter {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M1.5 1.5A.5.5 0 0 1 2 1h12a.5.5 0 0 1 .5.5v2a.5.5 0 0 1-.128.334L10 8.692V13.5a.5.5 0 0 1-.342.474l-3 1A.5.5 0 0 1 6 14.5V8.692L1.628 3.834A.5.5 0 0 1 1.5 3.5zm1 .5v1.308l4.372 4.858A.5.5 0 0 1 7 8.5v5.306l2-.666V8.5a.5.5 0 0 1 .128-.334L13.5 3.308V2z'/></svg>");
	}

	&.k-i-pencil,
	&.k-edit {
		--icon-size: var(--icon-size-small);
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325'/></svg>");
	}

	&.k-i-calendar {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5M1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4z'/></svg>");
	}

	&.k-i-refresh {
		mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill-rule='evenodd' d='M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2z'/><path d='M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466'/></svg>");
	}
}

.k-overlay {
	background-color: var(--colour-black-50);
	position: fixed;
	inset: 0;
	opacity: 1 !important;
}

.k-window {
	position: absolute;
	background-color: var(--colour-surface);
	border-radius: var(--border-radius-default);
	padding: 0 !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;
	display: flex;
	flex-direction: column;

	.k-window-titlebar {
		margin: 0 !important;
		padding: 0.5em;
		display: flex;
		align-items: center;
		font-size: var(--font-size-3);
		font-weight: var(--font-weight-semibold);
		border-bottom: 1px solid var(--colour-outline);

		.k-window-title {
			width: 100%;
		}

		.k-window-actions {
			a {
				display: flex;

				.k-i-close {
					width: 32px;
					height: 32px;
				}
			}
		}
	}

	.k-window-content {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-24);
		outline: none;
		padding: 1em;
		min-width: 600px;

		fieldset {
			ol {
				width: 100%;

				li {
					display: flex;
					align-items: center;
					justify-content: start;
					gap: var(--spacing-8);
					flex-wrap: wrap;

					label {
						margin: 0;
						flex-basis: 100%;
					}

					.label-desc {
						td {
							padding: 0;
							height: 40px;

							&:last-child {
								text-align: right;
							}
						}
					}

					&:has(input[type="checkbox"]) {
						flex-wrap: nowrap;
						flex-direction: row-reverse;
					}
				}
			}
		}

		.validation-confirm-content {
			line-height: var(--line-height-large);
		}
	}

	&:has(.win-hlp, #pageDesigner) {
		max-height: 80dvh !important;
		max-width: 80dvw !important;

		.k-window-content {
			height: calc(100% - 60px);
			overflow-y: auto;
			overflow-x: hidden;
			scrollbar-width: thin;
			scrollbar-color: var(--colour-accent) transparent;
		}
	}
}

.k-menu {
	display: flex;
	flex-direction: row;
	gap: var(--spacing-12);

	>.k-item {
		display: flex;
		position: relative;
		padding: var(--spacing-8);

		>span {
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			gap: var(--spacing-4);
		}

		.k-group {
			display: none;
		}

		&:hover {
			.k-group {
				position: absolute;
				top: 40px;
				z-index: 200;
				display: flex;
				gap: 0;
				flex-direction: column;
				justify-content: center;
				background-color: var(--colour-surface);
				border-radius: var(--border-radius-small);
				padding: var(--spacing-12) var(--spacing-20);
				white-space: nowrap;

				li {
					line-height: var(--line-height-large);
					color: var(--colour-default);

					a {
						display: block;
					}
				}
			}

		}
	}

	>.k-item:last-child > .k-link > .k-icon {
		display: none;
	}
}

.k-loading-mask,
.k-loading {
	display: none;
}

.k-grid {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-12);

	table {

		th {
			height: var(--spacing-40);
		}

		td {
			height: var(--spacing-50);
			padding: var(--spacing-4);

			&:first-of-type {
				border-radius: var(--border-radius-default) 0 0 var(--border-radius-default);
				padding-left: var(--spacing-20);
			}

			&.k-hierarchy-cell {
				padding-right: var(--spacing-20);
			}

			&:last-of-type {
				border-radius: 0 var(--border-radius-default)var(--border-radius-default) 0;
				padding-right: var(--spacing-20);
			}
		}

		.k-button-icon-only {
			border: 1px solid var(--colour-outline);
			border-radius: var(--border-radius-small);
			height: var(--spacing-36);
			aspect-ratio: 1/1;
			background-color: var(--colour-surface);
			display: inline-flex;
			justify-content: center;
			align-items: center;

			&:hover {
				border: 1px solid var(--colour-accent);
			}
		}
	}

	.grid-empty {
		margin: var(--spacing-12) 0;
	}
}

.k-grid-toolbar {
	background-color: var(--colour-surface-70);
	padding: var(--spacing-8) var(--spacing-20);
	border-radius: var(--border-radius-default);
} .k-pager-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--spacing-12);
	width: 100%;
	background-color: var(--colour-surface-70);
	padding: var(--spacing-8) var(--spacing-20);
	border-radius: var(--border-radius-default);
	.k-pager-numbers {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: var(--spacing-12);
		flex-direction: row;
		border-radius: var(--border-radius-small);

		li {

			a,
			span {
				width: var(--spacing-40);
				aspect-ratio: 1/1;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			span {
				color: var(--colour-background);
				background-color: var(--colour-accent);
			}

			.k-state-selected {
				border-radius: var(--border-radius-large);
			}
		}
	}

	.k-pager-info {
		margin-left: auto;
	}
} .k-tabstrip {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-24);

	.k-tabstrip-items {
		display: flex;
		flex-direction: row;
		gap: var(--spacing-4);

		li {
			padding: var(--spacing-12) var(--spacing-50);
			display: flex;
			justify-content: center;
			align-items: center;
			border-bottom: 4px solid var(--colour-outline);

			&.k-state-active {
				border-bottom: 4px solid var(--colour-accent);
			}

			a {
				font-size: var(--font-size-2);
				font-weight: 600;
			}
		}
	}

	.k-content {
		display: none;
		margin-top: var(--spacing-12);

		&.k-state-active {
			display: flex !important;
			flex-direction: column;
			gap: var(--spacing-24);

			>div:empty {
				display: none;
			}
		}
	}
}

.k-toolbar {
	display: flex;
	align-items: center;
	gap: var(--spacing-12);

	.k-button:not(.k-button-icon-only) {
		border: 1px solid var(--colour-outline);
		background-color: transparent;
		padding: 0 var(--spacing-24);

		&:hover {
			border: 1px solid var(--colour-accent);
			background-color: var(--colour-accent);
		}
	}
}
	
.wrapper {
	width: var(--container);
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: var(--spacing-36);
	min-height: 100%;
}

.header {
	display: flex;
	align-items: center;

	.header-content {
		flex-grow: 1;
		padding: var(--spacing-24) 0;

		.content-wrapper {
			display: flex;
			align-items: center;
			justify-content: space-between;

			.header-logo {
				img {
					max-height: var(--logo-max-height);
				}
			}

			.login {
				a {
					font-size: var(--font-size-1);
				}
			}
		}
	}
} .site-body {
	flex: 1;
} #body {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-36);

	>div:empty {
		display: none;
	}

	.section {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-36);
	}

	.section-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--spacing-24);
	}

	.section-form {
		color: var(--colour-default);
		background: linear-gradient(145deg, var(--colour-surface), color-mix(in srgb, var(--colour-surface) 70%, transparent 70%));
		border-radius: var(--border-radius-large);
		p	{
			margin-bottom: var(--spacing-24);
		}
	}
}
	
.footer {
	font-size: var(--font-size-1);
	font-weight: var(--font-weight-semibold);
	text-align: center;
	padding: var(--spacing-12);
}

#storeDesigner {
	.k-content {
		margin-bottom: 64px;
	}

	.win-buttonset {
    position: absolute;
		left: 0;
    bottom: 0;
		padding: 16px;
		width: calc(100% - 16px);
		background-color: var(--colour-surface);
		border-radius: var(--border-radius-default);
	}
}

#pageDesigner {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-8);
	border: var(--border-size-default) solid var(--colour-outline);
	border-radius: var(--border-radius-default);

	h3 {
		margin-bottom: var(--spacing-12);
		font-size: var(--font-size);
	}

	.page-component {
		background-color: var(--colour-outline);
		padding: var(--spacing-24);
		width: 90%;
		margin: 0 auto;

		&.logo {
			width: 100%;
			background-color: var(--colour-outline);
		}

		.fields {
			display: flex;
			justify-content: space-between;
			align-items: center;
			gap: var(--spacing-24);

			&.width {
				margin-top: var(--spacing-12);
				justify-content: center;

				.k-input {
					width: 100px !important;
				}
			}

			label {
				margin-bottom: 0;
			}

			.file {
				display: flex;
				align-items: center;
				gap: var(--spacing-12);

				label {
					cursor: pointer;
					width: 100px;
					height: 100px;
					aspect-ratio: 1/1;
					display: flex;
					justify-content: center;
					align-items: center;
					border-radius: var(--border-radius-default);
					border: 1px solid var(--colour-default);

					input[type="file"] {
						display: none;
					}

					.k-icon {
						--icon-size: var(--spacing-50);
						display: none;

						.not-set & {
							display: block;
						}
					}

					img {
						width: 100%;
						height: 100%;
						object-fit: cover;
						border-radius: var(--border-radius-default);

						.logo & {
							object-fit: contain;
						}

						.not-set & {
							display: none;
						}
					}


				}

				.remove {
					cursor: pointer;
					border: none;
				}
			}

			.k-textbox {
				width: auto !important;

				.logo & {
					margin-right: 75px;
				}
			}
		}
	}

	.page-footer {
		width: 80%;
		margin: 0 auto;
		text-align: center;
		margin-bottom: var(--spacing-12);

		.name {
			font-weight: var(--font-weight-semibold);
		}
	}
} #page-home {
	background-image: url("/Content/hero-bg.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;

	label {
		color: #ffffff;
	}
} #page-account {
	background-image: url("/Content/hero-bg.jpg");
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	min-height: 100vh;
	color: #fff;

	#body {
		gap: var(--spacing-12);
	}

	.section-form {
		margin-top: var(--spacing-36);

		fieldset {
			gap: var(--spacing-24);
		}

		&.account-left
		{
			.my-link-button
			{
				display: inline-flex;
				align-items: center;
				text-decoration: none;
				border-radius: var(--border-radius-small);
				color: var(--colour-default);
				transition-property: var(--transition-properties);
				transition-duration: var(--transition-fast);
				width: 100%;

				&:hover {
					color: var(--colour-accent);
				}
			}

			.my-link-icon {
				margin-right: var(--spacing-24);
				display: flex;
				align-items: center;
				border: 3px solid white;
				border-radius: var(--border-radius-default);
				padding: var(--spacing-8);
				opacity: 0.3;
			}

			.my-link-icon img {
				width: 40px;
				height: 40px;
				object-fit: contain;
			}

			.my-link-text {
				line-height: 1.4;
			}

			.my-link-title {
				font-weight: bold;
				font-size: var(--font-size-2);
			}

			.my-link-desc {
				font-weight: normal;
				font-size: var(--font-size-default);
			}
		}

		&.account-right {
			padding: var(--spacing-36);

			fieldset {
				height: auto !important;

				ol {
					li {
						&:first-of-type {
							font-weight: bold;
							font-size: var(--font-size-3);
						}
					}
				}
			}
		}
	}
} #page-storemanager {
	#storeProducts {
		.store-product-item-image {
			width: 80px;
			height: 80px;
			padding: 5px;
			background-size: contain;
			border-radius: var(--border-radius-tiny);
		}
	}

	.search-item {
		display: grid;
		grid-template-columns: 55px auto;

		.search-item-image {
			width: var(--spacing-50);
			aspect-ratio: 1/1;
			margin-right: 5px;
			grid-row: span 2;
		}

		.product-name {
			font-weight: bold;
		}
	}

	#storeManagerStrip-1 {
		border: 1px solid var(--colour-surface-70);
		border-radius: var(--border-radius-default);
		
		.k-toolbar {
			border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;
		}

		.k-grid {
			padding: 0 var(--spacing-12);
		}

		.k-pager-wrap {
			border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
		}
	}

	#storeGalleries {
		display: flex;
		flex-direction: column;
		gap: var(--spacing-36);

		.gallery-wrapper {
			background-color: var(--colour-background);
			border: 1px solid var(--colour-surface-70);
			border-radius: var(--border-radius-large);
			display: flex;
			flex-direction: column;
			gap: var(--spacing-24);

			.k-toolbar {
				border-radius: var(--border-radius-default) var(--border-radius-default) 0 0;

				form {
					width: 100%;
				}
			}

			.k-pager-wrap {
				border-radius: 0 0 var(--border-radius-default) var(--border-radius-default);
			}

			.gallery-header-text {
				width: 100%;
				font-weight: bold;
				font-size: var(--font-size-2);
			}

			.gallery-header-controls {
				display: flex;
				align-items: center;
				gap: var(--spacing-8);

				.k-button-icon-only {
					border: 1px solid var(--colour-outline);
					border-radius: var(--border-radius-small);
					height: var(--spacing-36);
					aspect-ratio: 1/1;
					background-color: var(--colour-surface);
					display: inline-flex;
					justify-content: center;
					align-items: center;

					&:hover {
						border: 1px solid var(--colour-accent);
					}
				}
			}

			.gallery {
				display: grid;
				gap: var(--spacing-12);
				grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
				padding: 0 var(--spacing-12);

				&:has(.gallery-empty) {
					display: block;
				}

				.gallery-product-item {
					position: relative;
					white-space: nowrap;
					overflow: hidden;

					.gallery-product-item-image {
						width: 100%;
						aspect-ratio: 1/1;
						padding: 5px;
						background-size: cover;
					}

					.product-name {
						font-weight: bold;
						margin-top: var(--spacing-12);
					}

					.gallery-product-item-overlay {
						position: absolute;
						top: 0;
						left: 0;
						width: 100%;
						padding: var(--spacing-4);
						aspect-ratio: 1/1;

						table {
							text-align: right;
							height: 100%;

							td {
								padding: 0;
								height: auto;
								vertical-align: top;
							}

							tr:last-child {
								td {
									vertical-align: bottom;
								}
							}
						}

					}
				}
			}
		}
	}
} #page-statistics {
	.statistics-header {
		display: flex;
		gap: 8px;
		align-items: center;
		white-space: nowrap;
	}

	h3 {
		margin-bottom: var(--spacing-24);
	}

	.k-chart {
		height: 400px;
	}

	.k-map {
		height: 600px;

		.km-scroll-wrapper,
		.km-scroll-container {
			position: absolute;
			width: 100%;
			height: 100%
		}

		.k-layer {
			position: absolute;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%
		}

		.km-touch-scrollbar {
			display: none
		}

		.k-marker {
			position: absolute;
			width: 28px;
			height: 40px;
			margin: -40px 0 0 -14px;
			cursor: pointer;
			background-image: url("Uniform/markers.png");
			background-position: 0 0
		}

		.k-map-controls {
			position: absolute;

			&.k-pos-top {
				top: var(--spacing-12);
				left: var(--spacing-12);
			}

			&.k-pos-bottom {
				bottom: var(--spacing-12);
				right: var(--spacing-12);
			}


			.k-navigator,
			.k-zoom-control {
				display: grid;
				grid-template-columns: 1fr 1fr;
				gap: var(--spacing-4);
				margin-bottom: var(--spacing-8);

				.k-button {
					border-radius: 0;
					font-weight: normal;
					font-size: var(--font-size-3);

					&.k-zoom-in {
						order: 1;
					}

					.k-icon {
						--icon-size: var(--icon-size-small);
					}
				}
			}

			.k-attribution {
				font-weight: normal;
				color: black;
			}
		}
	}
} #page-gettingstarted {
	h3 {
		font-size: var(--font-size-3);
	}

	h4 {
		font-size: var(--font-size-2);
	}

	p:empty {
		display: none;
	}

	ul {
		list-style: disc;
		list-style-position: inside;
	}
} #page-acceptuserinvitation {
	#body {
		gap: var(--spacing-12);
	}
}