/******************************/
/***
/*** COLOURS
/***
/*** green 	#b0cb1f
/***
/******************************/


/******************************/
/* FONTS
/******************************/

@font-face {
	font-family: 'droidsans';
	src: url('/fonts/droidsans/webfont.woff2') format('woff2'),
		 url('/fonts/droidsans/webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'droidsans';
	src: url('/fonts/droidsansbold/webfont.woff2') format('woff2'),
		 url('/fonts/droidsansbold/webfont.woff') format('woff');
	font-weight: bold;
	font-style: normal;
}

@font-face {
	font-family: 'droidsansbold';
	src: url('/fonts/droidsansbold/webfont.woff2') format('woff2'),
		 url('/fonts/droidsansbold/webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

.rtl {
	direction: rtl;
	text-align: right;
}

.rtl p {
	direction: rtl;
	text-align: right;
}

/******************************/
/***
/*** ICONS
/***
/******************************/


.icon {
}
.icon::before {
	content: '';
	background-color: currentColor;
	mask-image: url(/images/icons.svg);
	mask-repeat: no-repeat;
	mask-size: auto 200%;
	-webkit-mask-image: url(/images/icons.svg);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: auto 200%;
	display: inline-block;
	font-size: 36px; font-size: 3.6rem;
	margin-right: 0.25em;
	width: 1em;
	height: 1em;
	vertical-align: -0.3em;
}

.icon_big::before { font-size: 45px; font-size: 4.5rem; }
.icon_negative::before { background-color: currentColor; }

.icon_account::before {  mask-position: 0 0; -webkit-mask-position: 0 0; }
.icon_file::before {  mask-position: -1em 0; -webkit-mask-position: -1em 0; }
.icon_contacts::before {  mask-position: -2em 0; -webkit-mask-position: -2em 0; }
.icon_hammer::before {  mask-position: -3em 0; -webkit-mask-position: -3em 0; }
.icon_label::before {  mask-position: -4em 0; -webkit-mask-position: -4em 0; }
.icon_clipboard::before {  mask-position: -5em 0; -webkit-mask-position: -5em 0; }
.icon_clock::before {  mask-position: -6em 0; -webkit-mask-position: -6em 0; }
.icon_sign::before {  mask-position: -7em 0; -webkit-mask-position: -7em 0; }
.icon_calendar::before {  mask-position: -8em 0; -webkit-mask-position: -8em 0; }
.icon_star::before {  mask-position: -9em 0; -webkit-mask-position: -9em 0; }
.icon_graph::before {  mask-position: -10em 0; -webkit-mask-position: -10em 0; }
.icon_search::before {  mask-position: -11em 0; -webkit-mask-position: -11em 0; }
.icon_account_2::before {  mask-position: -12em 0; -webkit-mask-position: -12em 0; }
.icon_help::before {  mask-position: -13em 0; -webkit-mask-position: -13em 0; }

.icon_download::before {
	mask-position: 0 0;
	-webkit-mask-position: 0 0;
	mask-image: url(/images/download-icon.svg);
	-webkit-mask-image: url(/images/download-icon.svg);
	width: 24px;
	height: 24px;
	-webkit-mask-size: auto;
	margin: 0 10px;
}

ul.pagination {
	display: inline-flex;
	font-size: xx-large;
}
ul.pagination > li {
	list-style-type: none;
	font-size: xx-large;
	padding: 5px;
}
/******************************/
/***
/*** GLOBAL STYLES
/***
/******************************/

	:root {
		--borderRadius: 1rem;
		--heading_color: var(--fontColor);
		--headingFontSize: 1.4rem;

		--fontLight: #ffffff;
		--fontDark: #272727;
		
		--colorSuccess: mediumspringgreen;
		--colorFancy: #5214fd;
		--colorWarning: #ead31e;
		--colorError: #e31e24;
		--colorEmpty: #bfbfbf;
		--colorNull: #585858;

		--colorPartsRequired: #ff3d8c;

		--colorAdmin: fuchsia;
		
		--colorTicketAdmin: #eeff00;
		--colorGymOperator: #00ffad;
		--colorGymStaff: #00b3ff;
		--colorCaretaker: #00b3ff;
		--colorContractor: #00b3ff;

		--colorManufacturer: #9215ff;
		--colorServiceProvider: #154fff;
		--colorTechnician: #00b3ff;

		--box_border: #5b747c;

		--contentPaddingX: 2rem;
		--contentPaddingY: 3.2rem;
		
		--default-theme-color: #e50a7f;
		--theme_color: var(--default-theme-color);
		--theme-color-info: #00afef;

		--sidebar-width: 30rem;
		--navHeight: 6rem;
		--bannerHeight: 4rem;
		--totalNavHeight: calc(var(--navHeight) + var(--bannerHeight));
		--contentOffsetTop: calc(var(--totalNavHeight) + var(--contentPaddingY));
	}

	@media (min-width: 1700px) {
		:root {
			--headingFontSize: 1.5rem;
		}
	}

	* {
		box-sizing: border-box;
	}

	html {
		font-size: 62.5%; /* rem font sizes are based on this */
		scroll-behavior: smooth;
		-webkit-font-smoothing: antialiased;
		background-color: var(--layer-1-bg);
		color: var(--fontColor);
	}

	body {
		min-height: 100vh; /* to force the body to be at least as tall as the browser window */
		position: relative;
	}

	::selection { background: rgba(0,175,239,0.3); }
	::-moz-selection { background: rgba(0,175,239,0.3); }

	.constraint {
		width: 96%;
		max-width: 1280px;
		margin: 0 auto;
	}

/******************************/
/***
/*** TYPOGRAPHY
/***
/******************************/

	div,
	p, li,
	th, td,
	h1, h2, h3, h4,
	input, option, textarea, select, button {
		color: var(--fontColor);
		font-family: 'droidsans', Arial, Helvetica, sans-serif;
	}

	p {
		font-size: 14px;
		font-size: 1.4rem;
		margin: 0 0 2.8rem 0;
		line-height: 1.6em;
	}

	li {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.6em;
	}

	th, td {
		font-size: 14px;
		font-size: 1.4rem;
		line-height: 1.6em;
	}

	h1 { color: #f4fcff; color: var(--fontColor); font-size: 20px; font-size: 2.0rem; font-weight: bold; line-height: 1.1em; margin: 0 0 0.75em 0; }
	h2 { color: #f4fcff; color: var(--fontColor); font-size: 26px; font-size: 2.6rem; font-weight: normal; line-height: 1.2em; margin: 0 0 0.5em 0; }
	h3 { color: #f4fcff; color: var(--fontColor); font-size: 22px; font-size: 2.2rem; font-weight: normal; line-height: 1.2em; margin: 0 0 0.5em 0; }
	h4 { color: #f4fcff; color: var(--fontColor); font-size: 18px; font-size: 1.8rem; font-weight: normal; line-height: 1.2em; margin: 0 0 0.5em 0; }

	a { color: inherit; }
	a:hover, a:active { color: inherit; text-decoration: underline; }


	.heading {
		font-size: 20px !important; font-size: 2.0rem !important;
		font-weight: bold;
		line-height: 1.1em;
		color: #f4fcff;
		color: var(--fontColor);
		display: flex;
		align-items: center;
	}

	.big { font-size: 25px !important; font-size: 2.5rem !important; font-weight: bold; }


	ol li { padding: 0.5em 0; }

	table { width: 100%; border-collapse: collapse; margin-bottom: 2.8rem; }
	table th { padding: 1.3em 1.2em; text-align: left; font-weight: bold; border: 1px solid #e9e9e9; }
	table td { padding: 0.75em 1.0em; text-align: left; font-weight: normal; border: 1px solid #e9e9e9; }

.table-assets-heading {
	font-size: 1.2rem;
}

.table-assets-heading--price {
	width: 7%;
}

.grid {
	align-items: flex-start;
	display: grid;
	gap: 2rem;
}

.grid--two {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid--three {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.grid--three-fluid {
	grid-template-columns: repeat(auto-fill, minmax(55rem, 1fr));
}

.grid--four {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.grid--four-fluid {
	grid-template-columns: repeat(auto-fill, minmax(33rem, 1fr));
}

/* .grid--four-fluid {
	grid-template-columns: repeat(auto-fill, minmax(55rem, 1fr));
} */

.grid--six {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid--stretch {
	align-items: stretch;
}

.grid--end {
	align-items: flex-end;
}

.grid--indent {
	padding-left: 3rem;
}

@media (max-width: 1099px) {
	.grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 2099px) {
	.grid--two .grid--two {
		grid-template-columns: 1fr;
	}
}

.tickets__details {
	font-size: 1.4rem;
	margin-bottom: 3rem;
}

.tickets__details-item {
	align-content: flex-start;
	display: grid;
	gap: 0.25rem;

	/* overriding weirdness */
	margin-bottom: 0 !important;
}

.tickets__details-item--wide {
	grid-column: 1 / 3;
}

.form__label {
	/* overriding explicitness */
	font-size: inherit !important;
	font-weight: bold;
	margin-bottom: 0 !important;
	text-transform: none !important;
}

.form__text {}

.form__text--short {
	/* TODO: tidy up existing element specific CSS. create easy to use css components with BEM. */
	/* overriding explicitness */
	height: 4rem !important;
}

.form__text--underline {
	border-radius: 0 !important;
	border: none !important;
	border-bottom: 1px solid white !important;
	height: 100% !important;
	padding: 0 0.5rem 0.25rem !important;
	text-align: right;
}

.form__text::placeholder {
	opacity: 0.4 !important;
}


input[type=text],
input[type=date],
input[type=password],
input[type=search],
select {
	background-color: var(--layer-3-bg);
	border: 1px solid var(--box_border, #5b747c);
	border-color: var(--box_border, #5b747c);
	color: #dfe8ec;
	color: var(--fontColor);
	border-radius: 5px;
}

/******************************/
/***
/*** NOTICE  STYLING
/***
/******************************/

.notice {
	background-color: #b92121;
}

	.notice p {
		color: #fff;
		font-weight: bold;
		margin: 0;
		text-align: center;
		padding: 1.0em 0;
	}

/******************************/
/***
/*** DOWN  STYLING
/***
/******************************/

	.down {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 100%;
	}

	.down h1 {
		margin-top: 30px;
		margin-bottom: 0;
		color: #fff;
		font-size: 60px;
		text-align: center;
		line-height: 1.6em;
	}

		.down p {
			margin-top: 30px;
			color: #fff;
			font-size: 26px;
			text-align: center;
			line-height: 1.6em;
		}

/******************************/
/***
/*** POP STYLE STYLING
/***
/******************************/

	.l-sidebar {
		--paddingY: 2rem;
		--paddingX: 1rem;
		background-color: var(--layer-2-bg);
		border-right: 1px solid var(--box_border, #383838);
		padding: var(--paddingY) var(--paddingX);
		height: 100%;
		z-index: 4;

		display: flex;
		gap: var(--paddingY);
		flex-direction: column;
		justify-content: space-between;
	}

	.l-sidebar__logo {
		display: grid;
		place-items: center;
	}

	.l-sidebar__logo-svg-wrapper svg, .l-sidebar__logo img {
		max-height: 6rem;
		max-width: 10rem;
	}

	@media (min-width: 900px) {
		.l-sidebar {
			--paddingY: 2.5rem;
			--paddingX: 1.4rem;

			position: fixed;
			width: var(--sidebar-width);
		}

		.l-sidebar__logo {
			margin-left: calc(var(--paddingX) + 1.75rem);
			margin-right: calc(var(--paddingX) + 1.75rem);
		}	
	}
	
	@media (min-width: 1700px) {		
		.l-sidebar__logo-svg-wrapper svg, .l-sidebar__logo img {
			max-height: 5rem;
			max-width: 13rem;
		}
	}

	.l-sidebar__logo img {
		max-width: 100%;
	}

	@media (max-width: 899px) {
		.l-sidebar__header {
			align-items: center;
			display: flex;
			justify-content: space-between;
			gap: 3rem;
		}

		.l-sidebar__menu-logo-wrapper {
			align-items: center;
			display: flex;
			gap: 3rem;
		}

		.l-sidebar__menu-icon {
			max-width: 3rem;
		}

		.l-sidebar__logo {
			max-width: 9rem;
		}
	}

	.l-sidebar__navigation {
		align-items: center;
		display: grid;
		overflow-y: auto;
		gap: var(--paddingY);
		z-index: 2;
	}

	.l-sidebar__navigation::-webkit-scrollbar {
		display: none;
	}

	.l-sidebar__footer {
		display: grid;
		gap: 2rem;
		flex-grow: 1;
		align-content: flex-end;
	}

	.c-nav {
		position: relative;
	}

	.c-nav .c-divider--spacer {
		margin-top: 1rem;
		margin-bottom: 1rem;
	}

	.c-nav-links {
		list-style: none;
		align-items: center;
		display: grid;
		gap: 0.5rem;
		margin: 0;
		padding-left: 0;
		position: relative;
	}

	.c-nav-link {
		align-items: center;
		display: flex;
		font-size: 1.5rem;
		line-height: 1;
		padding: 0.75rem var(--paddingY);
		gap: 1rem;
	}

	.c-nav__heading {
		font-size: 1.3rem;
		padding-left: var(--paddingX);
	}

	.c-nav-links__gradient {
		display: none;
	}

	@media (min-width: 1700px) {
		.c-nav-link {
			gap: 2rem;
			padding: 0.8rem var(--paddingY);
		}
 	}

	@media (min-width: 900px) {
		.c-nav-links__gradient {
			background: linear-gradient(0, var(--layer-2-bg), transparent);
			display: block;
			position: sticky;
			bottom: 0;
			height: 8rem;
			left: 0;
			width: 100%;
			pointer-events: none;
		}
	}

	.c-nav-link__icon {
		max-width: 2rem;
	}

	.l-app--minimized-sidebar .c-nav-link .c-dropdown,
	.l-app--minimized-sidebar .c-nav-link__text,
	.l-app--minimized-sidebar .c-experience-card,
	.l-app--minimized-sidebar form#switch-account,
	.l-app--minimized-sidebar .c-nav__heading {
		display: none;
	}

	.l-app--minimized-sidebar .l-sidebar__logo {
		max-width: 8rem;
		margin: 0 auto;
	}

	.l-app--minimized-sidebar .l-sidebar__toggle {
		transform: rotate(180deg) translateX(-50%);
	}

	.c-nav-links li {
		font-size: 1.5rem;
	}

	.c-dropdown-links__dropdown a,
	.c-nav-links a,
	.c-dropdown-links__dropdown a {
		color: currentColor;
		text-decoration: none;
	}

	.c-nav-links a:hover,
	.c-nav-links li.active,
	.c-dropdown-links li.active,
	.c-dropdown:hover .c-dropdown__dropdown-icon {
		background-color: var(--layer-3-bg);
		border-radius: 10px;
		color: var(--fontColor);
	}

	.c-nav-links li.active,
	.c-dropdown-links li.active {
		font-weight: bold;
	}

	.c-dropdown-links {
		list-style: none;
		position: relative;
	}

	.c-account__selfie-wrapper {
		position: relative;
	}

	.c-account__selfie {
		aspect-ratio: 1 / 1;
		border: 2px solid var(--account-color);
		border-radius: 100%;
		display: block;
		object-fit: cover;
		width: 4rem;
	}

	.c-account__initials {
		font-size: 1.2rem;
		font-weight: bold;
		padding-left: 0.2rem;
		line-height: 1;
	}

	.c-dropdown-links-mobile {
		display: grid;
		gap: 2rem;
		padding: 0;
		list-style: none;
	}

	@media (min-width: 1200px) {
		.c-dropdown-links-mobile {
			display: none;
		}
	}

	.c-dropdown-links__dropdown {
		background-color: var(--layer-3-bg);
		border-radius: var(--borderRadius) 0 6px 6px;
		cursor: auto;
		display: none;
		gap: 0.5rem;
		list-style: none;
		margin: 0;
		padding: 2rem;
		position: absolute;
		right: 0;
		opacity: 0;
		top: calc(100% + 1rem);
		text-align: right;
		width: max-content;
	}

	.c-dropdown--opens-upwards + .c-dropdown-links__dropdown {
		bottom: calc(100% + 1rem);
		top: auto;
	}

	.c-dropdown--opens-upwards .c-dropdown__dropdown-icon {
		transform: rotate(180deg);
	}

	.c-dropdown-links__dropdown.open {
		display: grid;
    	min-width: 20rem;
		opacity: 1;
		width: 100%;
		z-index: 9;
	}

	.l-grid__header {
		grid-column: 1 / -1;
	}

	.l-grid__nav .c-dropdown {
		gap: 0.5rem;
	}

	.l-grid__nav .c-account__selfie {
		height: 3.5rem;
		width: 3.5rem;
	}

	.c-account__wrapper {
		border-left: 1px solid var(--box_border, #5b747c);
		padding-left: 1.5rem;
		margin-left: 1rem;
		align-items: center;
		display: flex;
		gap: 1.5rem;
	}

	.c-account,
	.c-dropdown {
		appearance: none;
		background: transparent;
		cursor: pointer;
		outline: none;
		border: none;
		align-items: center;
		color: currentColor;
		display: flex;
		gap: 1rem;
		margin: 0;
		padding: 0;
		text-align: left;
		text-decoration: none;
		width: 100%;
	}

	@media (min-width: 900px) {
		.c-account,
		.c-dropdown {
			gap: 1.5rem;
		}
	}

	/* .c-account--small {
		gap: 0.5rem;
	} */

	.c-account-meta {
		border-bottom: 1px solid var(--box_border, #5b747c);
		display: grid;
		gap: 0.5rem;
		justify-items: flex-end;
		line-height: 1.3;
		margin-bottom: 0.5rem;
		padding-bottom: 2rem;
	}

	.c-account:hover {
		text-decoration: none;
	}

	.c-account__name {
		line-height: 1.1;
		font-size: 1.6rem;
		font-weight: bold;
	}

	.c-account__title {
		font-size: 1.5rem;
		line-height: 1;
		padding-left: 1.75rem;
		position: relative;
	}

	.c-account__title:before {
		background-color: var(--account-color);
		border-radius: 2px;
		content: '';
		height: 1rem;
		width: 1rem;
		position: absolute;
		left: 0;
		bottom: 0.2rem;
	}

	.c-dropdown__dropdown-icon {
		height: 2rem;
		width: 2rem;
	}

	.c-empty {
		align-items: center;
		display: flex;
		gap: 1rem;
		justify-content: center;
	}

	.c-empty__icon-wrapper {
		max-width: 3rem;
	}

	/* TODO: Large form button */
	.c-register .c-button {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.c-register {
		display: grid;
		gap: 4rem;
		text-align: center;
	}

	.c-login-block {
		background-color: var(--layer-2-bg);
		border-radius: var(--borderRadius);
		margin: 0 auto;
		padding: 3rem;
		width: 100%;
	}

	.c-login-block .l-form__actions {
		display: grid;
		justify-self: unset;
		grid-template-columns: 1fr;
	}

	.c-login-block .c-button {
		padding-top: 1.5rem;
		padding-bottom: 1.5rem;
	}

	.c-login-grid {
		display: grid;
		gap: 4rem;
		text-align: center;
		max-width: 65rem !important;
	}

	.c-login__header {
		padding-top: 4rem;
	}

	.c-login__footer {
		align-items: center;
		display: flex;
		gap: 2rem;
		justify-self: center;
	}

	.c-login__title {
		font-size: 3rem;
		margin-bottom: 0.5rem;
	}

	.c-lead {
		font-size: 1.6rem;
	}

	.c-login {
		display: flex;
		gap: 4rem;
	}

	.c-login__divider {
		background-color: #e6e6e6;
		height: 100%;
		width: 2px;
	}

	/* .l-sidebar img {
		display: inline-block;
		height: 100%;
		max-height: 65px;
		max-width: 240px;
		object-fit: contain;
		image-orientation: none;
		width: 100%;
	} */

	.l-sidebar__primary-logo {
    align-items: center;
		display: flex;
    justify-content: center;
		text-align: center;
	}

	.l-sidebar__primary-logo--absolute {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.l-sidebar__toggle {
		background-color: var(--layer-2-bg);
		border-radius: 100%;
		border: 1px solid var(--box_border, #383838);
		cursor: pointer;
		height: 3.5rem;
		outline: none;
		position: absolute;
		top: 5rem;
		transform: translateX(50%);
		right: 0;
		width: 3.5rem;
	}

	.l-sidebar__logout {
		color: var(--header_logout_text, #fff);
		justify-self: flex-end;
		font-size: 1.2rem;
		text-align: center;
		text-decoration: none;
		text-transform: uppercase;
		font-weight: bold;
	}

	@media (max-width: 900px) {
		.l-sidebar {
			grid-template-columns: auto 1fr;
		}

		.l-sidebar--isLoggedOut {
			grid-template-columns: 1fr;
			justify-items: center;
		}

		.l-sidebar__primary-logo {
			display: none !important;
		}
	}

	.pop_container {
		max-width: 1000px;
		margin: 0 auto calc(2vw + 1.0rem) auto;
		background-color: rgba(100,130,140,0.4);
		background-color: var(--page_panel_background, rgba(100,130,140,0.4));
		width: calc(100% - 4vw - 2.0rem);
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		border-radius: 10px;
		overflow: hidden;
	}

		.pop_container .heading { text-transform: uppercase; justify-content: center; }

		.pop_form {
			flex: 1 1 100%;
			padding: 0 calc(2vw + 1.0rem);
			margin: calc(2vw + 1.0rem) 0;
		}

		.pop_form + .pop_form { margin-top: 0; }

			.pop_form h2 { font-size: 2.0rem; }

			.pop_form .fieldset {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
			}

				.pop_form .fieldset p {
					flex: 0 0 100%;
				}

				.pop_form .fieldset p.half {
					flex: 0 0 48%;
				}

		/* 50% split section */
		.pop_split {
			flex: 1 0 0%;
			padding: calc(2vw + 1.0rem);
			overflow: hidden;
		}

		/* 100% section */
		.pop_full {
			flex: 1 1 100%;
			padding: calc(2vw + 1.0rem);
		}

		/* banner bar */
		.pop_bar {
			flex: 1 1 100%;
			padding: calc(2vw + 1.0rem);
			display: flex;
			justify-content: space-between;
			align-items: center;

			background-color: #283438;
			background-color: var(--inactive_section, #283438);
		}

			.pop_bar p { font-size: 14px; font-size: 1.4rem; margin: 0; }
			.pop_bar ol { margin-bottom: 0; }

			.pop_bar > div:nth-of-type(1) { flex: 0 0 auto; min-width: 170px; }
			.pop_bar > div:nth-of-type(2) { flex: 1 1 auto; margin-left: 5%; }
			.pop_bar > div:nth-of-type(3) { flex: 0 0 auto; text-align: right; margin-left: 5%; }


		.pop_bar_active {
			border-bottom: 5px solid rgba(0,0,0,0.3);
			background-color: #38778e;
			background-color: var(--active_section, #38778e);
		}

		.pop_bar_active:last-child {
			border-top: 5px solid rgba(255,255,255,0.3);
			border-bottom: 0;
		}

@media only screen and (max-width: 650px) {

		.pop_split { flex: 1 1 100%;  border: 0 !important; padding: calc(4vw + 2.0rem) calc(2vw + 1.0rem); }
		.pop_split + .pop_split { padding-top: 0; }
		.pop_full { padding: calc(4vw + 2.0rem) calc(2vw + 1.0rem); }

		.pop_bar { display: block; flex-direction: column; padding-top: calc(3vw + 1.5rem); padding-bottom: calc(3vw + 1.5rem); }
		.pop_bar > div:nth-of-type(1) { flex: 0 1 50%; }
		.pop_bar > div:nth-of-type(2) { flex: 0 1 50%; margin-left: 0; padding-top: calc(1.0vw + 0.5rem); max-width: 400px; margin: 0 auto;}
		.pop_bar > div:nth-of-type(3) { flex: 0 1 50%; margin-left: 0; padding-top: calc(1.0vw + 0.5rem); margin: 0 auto; }
		.pop_bar > div p { text-align: center; }
}


#newlotpopup {
	max-width: 400px;
	padding: 20px 0;
}

	#newlotpopup label input {
		margin-right: 0.5em;
		vertical-align: middle;
	}

	#newlotpopup button {
		border: 0;
		padding: 0;
		margin: 0;
		display: inline-block;
		font-size: 14px;
		font-size: 1.4rem;
		font-weight: bold;
		height: 5.0rem;
		line-height: 5.0rem;
		background-color: var(--theme_color, var(--default-theme-color));
		color: #fff;
		color: var(--theme_color_contrast, #fff);
		padding: 0 4.5rem;
		text-transform: uppercase;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
	}

	#newlotpopup button:disabled { opacity: 0.5; background-color: #ccc; }

	#newlotpopup p:last-child { margin-bottom: 0; }

/******************************/
/***
/*** LOGIN SCREEN
/***
/******************************/

	.login_pop .pop_split + .pop_split { border-left: 1px solid #e6e6e6; }

		.login_pop .pop_bar p { color: #fff; }
		.login_pop .pop_bar .button { background-color: #bcd700; color: #000; }

/******************************/
/***
/*** REGISTER SCREEN 1
/***
/******************************/

	.register_graphic {
		background-color: var(--theme_color, rgba(40,46,48,0.5));
		margin: calc(1vw + 1.0rem) auto;
		width: calc(6vw + 3.0rem);
		height: calc(6vw + 3.0rem);
		border: 3px solid var(--header_border, #91e1ff);
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
	}

		.register_graphic::before {
			font-size: 60px; font-size: 6.0rem;
			margin-right: 0;
			position: relative;
			background-color: #d9f5ff;
		}
		@media only screen and (max-width: 1100px) { .register_graphic::before { font-size: 5.0rem; } }
		@media only screen and (max-width: 900px) { .register_graphic::before { font-size: 4.0rem; } }
		@media only screen and (max-width: 500px) { .register_graphic { border-width: 2px; } .register_graphic::before { font-size: 3.0rem; } }

	.register_pop_1 .pop_split + .pop_split { border-left: 1px solid rgba(255,255,255,0.2); }
		.register_pop_1 .pop_split p { text-align: center; }
		.register_pop_1 .pop_split p:last-of-type { margin-bottom: 0; }
		.register_pop_1 .pop_split p.heading { color: var(--heading_color, var(--default-theme-color)); }


/******************************/
/***
/*** REGISTER SCREEN 2
/***
/******************************/

	.register_pop_2 .button { background-color: var(--theme_color, var(--default-theme-color)); }
	.register_pop_2 .pop_bar p {  }

@media only screen and (max-width: 650px) {
	.register_pop_2 .pop_split + .pop_split { padding-top: 0; }
}

/******************************/
/***
/*** NEW LOT SCREEN
/***
/******************************/

	.new_lot_pop .pop_bar { transition: all 0.5s linear; }

	.new_lot_pop .pop_bar:nth-of-type(1) { z-index: 3; }
	.new_lot_pop .pop_bar:nth-of-type(2) { z-index: 2; }
	.new_lot_pop .pop_bar:nth-of-type(3) { z-index: 1; }

	.new_lot_pop .pop_bar_active .openstep { visibility: hidden; }

	/* first bar and not active */
	.new_lot_pop .pop_bar:not(.pop_bar_active):not(:first-child) {
		border-top: 3px solid rgba(255,255,255,0.2);
	}

	/* second bar following active */
	.new_lot_pop .pop_bar_active + div + .pop_bar:nth-of-type(3):not(.pop_bar_active) .openstep { visibility: hidden; }
	/* third bar following non active */
	.new_lot_pop .pop_bar:nth-of-type(5):not(.pop_bar_active) .openstep { visibility: hidden; }


		/* the div directly after each bar, eg the content of each section */
		.new_lot_pop .pop_bar + div {
			flex: 1 1 100%;
			display: none;
			flex-wrap: wrap;
		}
		.new_lot_pop .pop_bar_active + div { display: flex; }

		/* the colour of the text in non active bars */
		.new_lot_pop .pop_bar:not(.pop_bar_active) p { color: #fff; color: var(--theme_color_contrast, #fff); }
		.new_lot_pop .pop_bar:not(.pop_bar_active) ol { color: #fff; color: var(--theme_color_contrast, #fff); }

		.new_lot_pop .button { background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color)); }

		.new_lot_pop .openstep {
			color: #fff;
		}

			.new_lot_pop .pop_bar_active .openstep { color: #666; color: var(--header_text, #666); transform: rotate(-180deg); }

		.upload_target {
			background-color: rgba(40,46,48,0.5); background-color: var(--layer-3-bg);
			border: 3px dashed var(--default-theme-color);
			border-color: var(--default-theme-color); border-color: var(--theme_color, var(--default-theme-color));
			padding: calc(2vw + 1.0rem);
			height: 300px;
			display: flex;
			flex-direction: column;
			justify-content: center;
			margin-bottom: calc(2vw + 1.0rem);
		}

			.upload_target.dragover { border-style: solid; }

			.upload_target p { text-align: center; color: #dfe8ec; color: var(--fontColor);}
			.upload_target p:nth-of-type(1) { font-size: 16px; font-size: 1.6rem; margin-bottom: 0.75em; }
			.upload_target p:nth-of-type(2) { font-size: 12px; font-size: 1.2rem; }

			.dz-image img {
				display: block;
				width: 100%;
				height: 100%;
				object-fit: cover;
			}

 .form_style p.equipment_input_type:nth-of-type(1n) {
		display: flex;
		align-items: stretch;
		justify-content: center;
		margin-bottom: 1.8rem;
	}

	 .form_style p.equipment_input_type input { display: none; }
	 .form_style p.equipment_input_type label {
			flex: 1;
			background-color: rgba(40,46,48,0.5);
			background-color: var(--box_background, rgba(40,46,48,0.5));
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
			text-align: center;
			font-size: 12px;
			color: #dfe8ec; color: var(--box_text, #dfe8ec);
			padding: 1.0em;
			margin: 0 1.0em;
			border-radius: 5px;
			font-weight: normal;
			text-transform: none;
		}
	 .form_style p.equipment_input_type label b { font-size: 14px; font-weight: bold; text-transform: uppercase; }

	 .form_style p.equipment_input_type label:first-of-type { margin-left: 0; }
	 .form_style p.equipment_input_type label:last-of-type { margin-right: 0; }
	 .form_style p.equipment_input_type input:checked + label {
			background-color: var(--default-theme-color);
			background-color: var(--theme_color, var(--default-theme-color));
			border: 1px solid var(--default-theme-color);
			border-color: var(--theme_color, var(--default-theme-color));
			color: #fff; color: var(--theme_color_contrast, #fff);
		}


		#equipment_type_text { margin-bottom: 1.8rem; }
		#equipment_type_document { margin-bottom: 1.8rem; }
		#equipment_type_itemised { margin-bottom: 1.8rem; }

		.itemisation_upload {
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
			padding: 2rem;
			display: flex;
			justify-content: flex-start;
			background-color: rgba(40,46,48,0.5);
			background-color: var(--layer-3-bg);
			margin-bottom: 2rem;
		}

			.itemisation_upload p { margin: 0 !important; }

			.itemisation_upload label {
				display: block;
				font-size: 14px;
				text-transform: uppercase;
				font-weight: bold;
				color: #dfe8ec;
				color: var(--fontColor);
			}

			.itemisation_upload input[type=file] {
				height: auto !important;
				border: 0 !important;
				padding: 0 !important;
				background-color: transparent !important;
			}

		.repeater_row {
			display: flex;
			align-items: flex-start;
			justify-content: flex-start;
			padding: 1.0rem 0 1.0rem 0;
			margin-bottom: 4.0rem;
		}

		.repeater_row .repeater_row { margin-bottom: 0; }

		.repeater_row.wrap {
			flex-wrap: wrap;
			padding: 2rem 1rem 2rem 2rem;
			background-color: rgba(40,46,48,0.5);
			background-color: var(--box_background, rgba(40,46,48,0.5));
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
			border-radius: 5px;
			background-clip: padding-box;
		}

		.repeater_row.admin { position: relative; padding-left: 50px; }

		.repeater_row.wrap *:disabled { opacity: 0.5; }

		.repeater_row select, .repeater_row input, .repeater_row button, .repeater_row a.button { height: 5rem !important; line-height: 5rem !important; }
		.repeater_row.wrap select, .repeater_row.wrap input, .repeater_row.wrap button, .repeater_row.wrap a.button { height: 4rem !important; line-height: 4rem !important; background-color: #4c5e64 !important; }

		.repeater_row.wrap .button.button_green { background-color: var(--default-theme-color) !important; background-color: var(--theme_color, var(--default-theme-color)) !important; }
		.repeater_row.wrap .button.button_red { background-color: #c1272d !important; }

  		.repeater_row.wrap button:disabled, .repeater_row.wrap button.disabled, .repeater_row.wrap .button:disabled, .repeater_row.wrap .button.disabled { pointer-events: none; background-color: #999 !important; color: #FFF !important; }

			.repeater_row p {
				flex: 1 1 0%;
				margin: 0 1.0rem 0 0 !important;
			}

			.repeater_row p.thumbnail {
				
			}
			.repeater_row p.thumbnail img { width: 4rem; height: 4rem; object-fit: cover; cursor: zoom-in; border-radius: 5px; }

			.repeater_row p:first-of-type { margin-left: 0 !important; }
			.repeater_row p:last-of-type { margin-right: 0 !important; }

			.repeater_row p.row_select { position: absolute; left: 20px; top: 50%; transform: translateY(-50%); }

			.repeater_row.wrap p {
				flex: 1 1 24%;
				margin: 0 1.0rem 1.0rem 0 !important;
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				align-self: stretch;
			}
			.repeater_row.wrap p:last-of-type { margin-left: auto !important; margin-right: 1.0rem !important; }

				.repeater_row p > label {
					display: block;
					font-size: 14px;
					text-transform: uppercase;
					font-weight: bold;
					color: #dfe8ec; color: var(--fontColor);
				}

				.repeater_row p > span {
					background-color: rgba(40,46,48,0.5);
					background-color: var(--box_background, rgba(40,46,48,0.5));
					border: 1px solid var(--box_border, #5b747c);
					border-color: var(--box_border, #5b747c);
					font-size: 12px;
					font-size: 1.2rem;
					font-weight: bold;
					width: 100%;
					padding: 0 1.5rem;
					height: 5.0rem;
					line-height: 5rem;
					color: #dfe8ec;
					color: var(--fontColor);
					border-radius: 5px;
					background-clip: padding-box;
					display: block;
				}

		.manual_contract_box {
			flex: 0 0 33%;
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
			padding: 2rem;
			background-color: rgba(40,46,48,0.5);
			background-color: var(--layer-3-bg);
			margin-bottom: 2rem;
			margin-right: 2rem;
		}


@media only screen and (max-width: 650px) {

		.new_lot_pop .pop_bar { position: relative; }
		.new_lot_pop .pop_bar > div:nth-of-type(3) { position: absolute; bottom: -2.0em; flex: 1 1 100%; left: 50%; transform: translateX(-50%); }
		.new_lot_pop .openstep { font-size: 16px; font-size: 1.6rem; }
		.new_lot_pop .pop_bar:nth-of-type(1):not(.pop_bar_active) .openstep {
			background-color: #4d4d4d; background-color: var(--inactive_section, #4d4d4d);
			border-color: #4d4d4d; border-color: var(--inactive_section, #4d4d4d);
			border-color: #fff; border-color: var(--theme_color_contrast, #fff);
		}
		.new_lot_pop .pop_bar_active + div + .pop_bar:nth-of-type(3):not(.pop_bar_active) .openstep { 
			background-color: #4d4d4d; background-color: var(--inactive_section, #4d4d4d);
			border-color: #4d4d4d; border-color: var(--inactive_section, #4d4d4d);
			border-color: #fff; border-color: var(--theme_color_contrast, #fff);
		}
		.new_lot_pop .pop_bar:not(.pop_bar_active) + div + .pop_bar:nth-of-type(3):not(.pop_bar_active) .openstep {
			background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color));
			border-color: var(--default-theme-color); border-color: var(--theme_color, var(--default-theme-color));
			border-color: #fff; border-color: var(--theme_color_contrast, #fff);
		}
		.new_lot_pop .pop_bar:nth-of-type(5):not(.pop_bar_active) .openstep {
			background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color));
			border-color: var(--default-theme-color); border-color: var(--theme_color, var(--default-theme-color));
			border-color: #fff; border-color: var(--theme_color_contrast, #fff);
		}
		.pop_bar_active .openstep { display: none; }

		.new_lot_pop input[type=submit] { position: relative; top: 2.0em; }
}

.upload_preview {
	border: 1px solid var(--box_border, #5b747c);
	border-color: var(--box_border, #5b747c);
	padding: 10px 10px 0 10px;
	margin-bottom: 20px;
}

.upload_preview:empty { display: none; }


/******************************/
/*** MAIN PAGE STYLE
/******************************/


	/******************************/
	/*** HEADER
	/******************************/

	.header_inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 0 auto;
		max-width: 1400px;
		padding: calc(2vw + 1rem) 0 calc(1vw + 1rem) 0;
		width: calc(100% - 4vw - 2rem);
		text-align: center;
	}

	/* NEEDED FOR CENTER -> RIGHT LAYOUT */
	.header_dummy {
		flex: 0 1 20%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.header_dummy img {
		max-width: 200px;
	}

	/* LOGO */
	.header_logo {
		flex: 0 1 60%;
		padding: 0 calc(2vw + 1.0rem);
	}

	.header_logo a {
		display: inline-block;
	}

	.header_logo img {
		display: inline-block;
		height: 100%;
		max-height: 120px;
		max-width: 250px;
		width: 100%;
		object-fit: contain;
		object-position: 50 50%;
	}

			/* ACCOUNT LINK */
			.header_links { flex: 0 1 20%; text-align: right; position: relative; display: flex; align-items: center; justify-content: flex-end; }

				.header_links a {
					color: #fff;
					color: var(--navigation_text, #fff);
					display: inline-block;
					font-size: 12px; font-size: 1.2rem;
					font-weight: bold;
					line-height: 1.2em;
					padding: 0 calc(2vw + 1.0rem);
					text-align: center;
					text-decoration: none;
					text-transform: uppercase;
					white-space: nowrap;
					width: auto;
				}

				.header_links a:hover { color: var(--default-theme-color); color: var(--navigation_highlight, var(--default-theme-color)); }

					span.icon_image {
						display: block;
						background-color: var(--default-theme-color);
						background-color: var(--header_logout_background, var(--default-theme-color));
						border-radius: 50%;
						margin: 0 auto 5px auto;
						width: 48px;
						height: 48px;
						position: relative;
					}
						span.icon_image::before {
							content: '';
							position: absolute;
							top: 0; left: 0;
							width: 100%; height: 100%;
							background-color: #fff;
							background-color: var(--header_logout_foreground, #fff);
							transform: scale(0.6);
							mask-image: url(/images/icons.svg);
							mask-repeat: no-repeat;
							mask-size: auto 200%;
							-webkit-mask-image: url(/images/icons.svg);
							-webkit-mask-repeat: no-repeat;
							-webkit-mask-size: auto 200%;
						}

						span.icon_image img {
							display: none;
							height: 80%;
							max-height: 50px;
							padding-bottom: 0;
							width: auto;
						}

					span.icon_text {
						display: block;
						color: #fff;
						color: var(--header_logout_text, #fff);
					}

@media only screen and (max-width: 1000px) {
	.header_dummy { display: none; }
	.header_logo { padding-left: 0; text-align: left; }
	.header_logo img {
		max-height: 80px;
		object-position: 0 50%;
	}
	.header_links { flex: 0 1 40%; }
	.header_links a { font-size: 11px; font-size: 1.1rem; padding-right: 0; }
}

@media only screen and (max-width: 450px) {
	.header_links a { font-size: 10px; font-size: 1.0rem; }
}

	/******************************/
	/*** TOP NAV
	/******************************/

	/* .top_nav {
		margin: 0 auto;
		max-width: 1400px;

		padding: 0 calc(2vw + 1.0rem);
		width: calc(100% - 4vw - 2.0rem);
	} */

		/* WELCOME BACK... */
		/* .top_nav p {
			color: var(--default-theme-color);
			color: var(--navigation_highlight, var(--default-theme-color));
			font-size: 24px; font-size: 2.4rem;
			line-height: 1.2em;
			font-weight: bold;
			margin: 0;
			padding: 1.6em 0 0 0;
			text-align: center;
		} */

			/* .top_nav p span { color: #fff; color: var(--navigation_text, #fff); white-space: nowrap; } */

		/* NAV */
		/* .top_nav ul {
			margin: 0;
			padding: 0;
			text-align: center;
		} */

			/* .top_nav ul li {
				color: #fff;
				color: var(--navigation_text, #fff);
				display: inline-block;
				font-size: 16px; font-size: 1.6rem;
				list-style: none;
				margin: 0 0 0 2.0em;
				padding: calc(2vw + 1.0rem) 0;
				position: relative;
			} */

			/* .top_nav ul li:first-of-type { margin-left: 0; } */

			/* .top_nav ul li.active {
				font-weight: bold;
				color: var(--default-theme-color);
				color: var(--navigation_highlight, var(--default-theme-color));
			} */

			/* .top_nav ul li a:hover {
				color: var(--default-theme-color);
				color: var(--navigation_highlight, var(--default-theme-color));
			} */

				/* ARROW */
				.top_nav ul li.active::after {
					content: '';
					border-left: 0.5em solid transparent;
					border-right: 0.5em solid transparent;
					border-bottom: 0.75em solid rgba(100,130,140,0.4);
					border-bottom-color: var(--page_panel_background, rgba(100,130,140,0.4));
					display: block;
						left: 50%; bottom: 0;
					height: 0;
					margin-left: -0.5em;
					position: absolute;
					width: 0;
				}

				/* LINK TEXT */
				.top_nav ul li a {
					color: currentColor;
					display: block;
					padding: 0;
					text-decoration: none;
				}

@media only screen and (max-width: 1000px) {
	.top_nav {
		display: block;
			flex-direction: column;
			align-items: stretch;
	}

		.top_nav p {
			flex: 1 1 100%;
			font-size: 20px; font-size: 2.0rem;
			padding: calc(2vw + 1.0rem) 0 0 0;
			text-align: center;
		}

		.top_nav ul {
			text-align: center;
			display: flex;
			justify-content: center;
			align-items: stretch;
		}

			.top_nav ul li {
				margin: 0 0.75em;
				padding: calc(2vw + 1.0rem) 0;
			}

			.top_nav ul li a {
				padding: 0;
			}
}

@media only screen and (max-width: 600px) {
	.top_nav p {
		font-size: 16px; font-size: 1.6rem;
	}

	.top_nav ul {
		flex: 0 0 auto;
		display: flex;
		justify-content: space-between;
		align-items: stretch;
	}

		.top_nav ul li {
			font-size: 14px; font-size: 1.4rem;
			margin: 0 0.5em;
			line-height: 1.2em;
			padding: calc(4vw + 2.0rem) 0;
			display: flex;
			align-items: center;
		}
}

@media only screen and (max-width: 450px) {
	.top_nav p {
		font-size: 16px; font-size: 1.6rem;
	}



	.top_nav ul li {
		font-size: 12px; font-size: 1.2rem;

	}
}

	/******************************/
	/*** CONTENT AREA (WHITE BLOCK)
	/******************************/

	/* 1. content area is page panel background & containing */
	/* 2. lot detail is all elements inside the page panel */

	.content_area {
		display: flex;
			justify-content: space-between;
			align-items: stretch;
		background-color: rgba(100,130,140,0.4);
		background-color: var(--page_panel_background,rgba(100,130,140,0.4));

		margin: 0 auto;
		max-width: 1400px;
		padding: calc(2vw + 1.0rem);
		width: calc(100% - 4vw - 2.0rem);
		margin-bottom: calc(2vw + 1.0rem);

		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
	}

		.main_panel {
			flex: 1 1 0%;
			margin-left: calc(2vw + 1.0rem);
			order: 2;
		}

		.main_panel__title {
			margin-bottom: 3rem;
		}

		.main_panel__divider {
			border-bottom: 0.5px solid rgba(255,255,255,0.3);
    	margin: 2rem 0;
		}

			.sortbox {
				float: right;
				width: 50%;
				max-width: 200px;

				font-size: 20px; font-size: 2.0rem;
				margin: 0;
				margin-top: -2.5em;
				line-height: 1.0em;
			}

				.sortbox select {
					background-color: rgba(40,46,48,0.5);
					background-color: var(--layer-3-bg);
					border: 1px solid var(--box_border, #5b747c);
					border-color: var(--box_border, #5b747c);
					color: #dfe8ec;
					color: var(--fontColor);
					font-size: 12px; font-size: 1.2rem;
					font-weight: normal;
					width: 100%;
					padding: 0 1.5rem;
					height: 4.0rem;

					

					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}

					.sortbox .select_arrow {
						font-size: 14px;
						font-size: 1.4rem;
						line-height: 4.0rem;
						height: 100%;
						width: 3.0em;
						top: 0px;
						right: 0px;
						border-radius: 0;
						border-top-right-radius: 5px;
						border-bottom-right-radius: 5px;
						background-color: var(--default-theme-color);
						background-color: var(--theme_color, var(--default-theme-color));
						color: #fff;
						color: var(--theme_color_contrast, #fff);
					}

			.sortbox select:focus {
				outline: none !important;
			}

			.list_orderer, 
			.list_filter {
				margin: 0 0 2.0em 0; padding: 0;
			}

			.list_orderer::before { content: 'Order By'; margin-right: 10px; }
			.list_filter::before { content: 'Filter By'; margin-right: 10px; }

			.list_orderer li,
			.list_filter li {
				list-style: none;
				margin: 0;
				padding: 0;
				display: inline-block;
				color: #fff;
			}

			.list_filter li::before {
				content: '';
				width: 1.0em; height: 1.0em;
				display: inline-block;
				background-color: currentColor;
				vertical-align: middle;
				border: 1px solid #eee;
			}

			.list_filter li:first-of-type::before { display: none; }

			.list_filter li a {
				display: inline-block;
				padding: 0.25em; color: var(--default-theme-color);
			}

			.list_orderer li .active,
			.list_filter li .active {
				font-weight: bold;
				text-decoration: none;
			}

			.list_orderer li::after, 
			.list_filter li::after { 
				content: '|'; 
				padding: 0 0.5em; 
				color: #999;
			}
			.list_orderer li:last-child::after, 
			.list_filter li:last-child::after { 
				display: none; 
			}


		.side_bar {
			border-right: 1px solid rgba(255,255,255,0.5);
			border-color: var(--sidebar_border, rgba(255,255,255,0.5));
			flex: 0 1 23%;
			order: 1;
		}


			.side_bar p.heading { margin-bottom: 1em; }
			.side_bar p.heading:not(:first-of-type) { margin-top: calc(2vw + 1.0rem); }
			.side_bar p.heading:first-of-type::before { vertical-align: top; }

				.side_bar p.heading small {
					color: var(--default-theme-color);
					color: var(--theme_color, var(--default-theme-color));
					font-size: 14px; font-size: 1.4rem;
				}

			p.sidebar_notification {
				border-bottom: 1px solid #5b747c;
				border-color: var(--box_border, #5b747c);
				color: #dfe8ec; color: var(--fontColor);
				font-weight: bold;
				margin: 0 calc(2vw + 1.0rem) 1em 0;
				overflow: auto;
				padding: 0 0 1em 0;
				line-height: 1.4em;

				display: flex;
				justify-content: flex-start;
				align-items: center;
			}


				p.sidebar_notification span:first-of-type {
					flex: 0 0 auto;
					background-color: #c1272d;
					width: 23px;
					height: 23px;
					margin-right: 1.0em;

					-webkit-border-radius: 50%;
					-moz-border-radius: 50%;
					border-radius: 50%;

					display: flex;
					justify-content: center;
					align-items: center;
					text-align: center;
					position: relative;
				}

					p.sidebar_notification span:first-of-type::before {
						content: attr(data-count);
						font-size: 14px;
						color: #fff;
						position: absolute;
						width: 100%; height: 100%;
						top: 0; left: 0.5px;
						text-align: center;
						line-height: 23px;

					}

				p.sidebar_notification em {
					color: #c1272d;
					font-style: normal;
				}

			.side_bar ul {
				clear: both;
				margin: 0;
				padding: 0;
			}

				.side_bar ul li {
					background-color: transparent;
					background-color: var(--sidebar_list_odd, transparent);
					list-style: none;
					margin: 0;
					font-size: 16px; font-size: 1.6rem;
					padding: 1.0em 1.0em 1.0em 0.5em;
				}

				.side_bar ul li:nth-of-type(even) { background-color: transparent; background-color: var(--sidebar_list_even, transparent); }

					.side_bar ul li a {
						color: #dfe8ec;
						color: var(--fontColor);
						display: inline-block;
						font-size: 16px; font-size: 1.6rem;
						padding: 0;
						text-decoration: none;
					}

					.side_bar ul li a:hover { color: #dfe8ec; color: (--text_color_medium, #dfe8ec); text-decoration: underline; }

					.side_bar ul li.active a { color: var(--default-theme-color); color: var(--theme_color, var(--default-theme-color)); font-weight: bold; }

					.side_bar ul li a.icon::before { font-size: 28px; font-size: 2.7rem; }

			.side_bar form {
				width: calc(100% - (1vw + 1.0rem));
				margin-bottom: calc(1vw + 1.0rem);
				overflow: auto;
			}

				.side_bar form input[type=text] {
					float: left;
					width: calc(100% - 5rem);
					font-size: 16px; font-size: 1.6rem;
					border: 1px solid var(--box_border, #5b747c);
					border-color: var(--box_border, #5b747c);
					background-color: rgba(40,46,48,0.5);
					background-color: var(--layer-3-bg);
					color: #dfe8ec;
					color: var(--fontColor);
					padding: 0.5em 1.0em;
					-webkit-appearance: none;
					border-radius: 0;
					border-top-left-radius: 5px;
					border-bottom-left-radius: 5px;
					display: inline-block;
				}

				.side_bar form input[type=text]::placeholder {
					color: #dfe8ec;
					color: var(--fontColor);
				}

				.side_bar form input[type=submit] {
					float: left;
					width: 5rem;
					font-size: 16px; font-size: 1.6rem;
					border: 1px solid var(--default-theme-color);
					border-color: var(--theme_color, var(--default-theme-color));
					background-color: var(--default-theme-color);
					background-color: var(--theme_color, var(--default-theme-color));
					color: #fff;
					color: var(--theme_color_contrast, #fff);
					padding: 0.5em 0;
					text-align: center;
					-webkit-appearance: none;
					border-radius: 0;
					border-top-right-radius: 5px;
					border-bottom-right-radius: 5px;
					display: inline-block;
				}

@media only screen and (max-width: 1000px) {

	.content_area {
		display: flex;
			flex-direction: column;
			align-items: stretch;
	}


		.main_panel {
			flex: 1 1 0%;
			margin-left: 0;
			order: 2;
		}

		.side_bar {
			border-right: 0;
			flex: 1 1 0%;
			order: 1;
			margin-bottom: calc(1vw + 1rem);
		}

		.side_bar .heading { display: none; }
		.side_bar ul { display: none; }

			p.sidebar_notification {
				background-color: #f4f4f4;
				border-bottom: 0;
				font-size: 12px; font-size: 1.2rem;
				margin: 0;
				padding: 1.0em;
			}
			p.sidebar_notification + p.sidebar_notification { padding-top: 0; }

				p.sidebar_notification span:first-of-type {
					width: 1.6em;
					height: 1.6em;
					margin-right: 1.0em;
				}
				p.sidebar_notification span:first-of-type::before { line-height: 20px; }

			.side_bar form {
				width: 100%;
				margin-top: calc(1vw + 1.0rem);
				margin-bottom: 0;
				overflow: auto;
			}


}

@media only screen and (max-width: 750px) {
	.sortbox { margin-top: calc(2vw + 1.0rem); float: none; width: 100%; text-align: right; max-width: 100%; }
}

@media only screen and (max-width: 450px) {
	.sortbox select { font-size: 16px !important; }
	.side_bar form input[type=text], .side_bar form input[type=submit] { font-size: 16px; }

}

/******************************/
/***
/*** BID LIST
/***
/******************************/

	.bid_list {}

		.bid_item {
			background-color: rgba(40,46,48,0.5);
			background-color: var(--box_background, rgba(40,46,48,0.5));
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
			color: #dfe8ec;
			color: var(--box_text, #dfe8ec);
			margin-top: calc(2vw + 1.0rem);
			transition: all 0.5s linear;

			-webkit-border-radius: var(--borderRadius);
			-moz-border-radius: var(--borderRadius);
			border-radius: var(--borderRadius);
		}


			.bid_item * { color: currentColor; }

			.bid_item_row {
				display: flex;
				justify-content: space-between;
				align-items: stretch;
				padding: calc(1.5vw + 1.0rem);
				position: relative;
				flex-wrap: wrap;
			}

				.bid_item_row h3 { font-weight: bold; margin-bottom: 0.5em; font-size: 18px; font-size: 1.8rem;  color: var(--default-theme-color); color: var(--theme_color, var(--default-theme-color)); }
				.bid_item_row p.heading { }

			.bid_item_bar {
				padding-top: 0;
				padding-bottom: 0;
				background-color: rgba(40,46,48,0.5);
				background-color: var(--box_background, rgba(40,46,48,0.5));
				filter: brightness(0.95);
				border-bottom: 1px solid #5b747c;
				border-color: var(--box_border, #5b747c);
				align-items: center;
			}

				.bid_item_bar p { margin: 0;  padding: 0.75em 0; font-size: 12px; font-size: 1.2rem; }

				.bid_item_bar p.bid_message { color: var(--default-theme-color) !important; color: var(--theme_color, var(--default-theme-color)) !important; text-transform: uppercase; font-size: 14px; font-size: 1.4rem; }

				.bid_item_bar a { text-decoration: none; }
				.bid_item_bar a.active, .bid_item_bar a:hover, .bid_item_bar a:active { color: var(--default-theme-color); color: var(--theme_color, var(--default-theme-color)); }

				.bid_item_row > div { padding: 0; flex: 1 1 0; }
				.bid_item_row > div + div { flex: 0 1 25%; border-left: 1px solid #5b747c; border-color: var(--box_border, #5b747c); padding-left: calc(1.5vw + 1.0rem); padding-right: 0; }
				
				.bid_item_row .decline_reason {
					flex: 0 0 100%;
					border-left: 0; padding-left: 0; padding-right: 0;
				}
				
				.bid_item_row > div.buttons { border: 0; flex: 0 1 30%; }

					.bid_item_row > div p { margin-bottom: 0.5em; }
					.bid_item_row > div p:last-of-type { margin-bottom: 0; }

					/* OPEN/CLOSE BUTTON */
					.bid_item_row .openstep.active { color: var(--default-theme-color); color: var(--theme_color, var(--default-theme-color));  }

					/* BUTTONS */
					.bid_item_row .buttons { margin-left: auto; text-align: right; padding-left: 0; }
						.bid_item_row .button { width: 8em; margin-bottom: 1.2em; padding: 0; height: 3.0em; line-height: 3.0em; }
						.bid_item_row .button:last-of-type { margin-bottom: 0; }

					/* WINNING BIDDERS */
					.winning_bidders {
						margin: 0;
						padding: 0;
					}

						.winning_bidders li {
							list-style: none;
							margin: 0;
							padding: 10px 0;
							position: relative;
							border-bottom: 1px solid #5b747c; border-color: var(--box_border, #5b747c);

							display: flex;
							align-items: center;
							justify-content: space-between;
						}

						.winning_bidders li:first-child { padding-top: 0 !important; }
						.winning_bidders li:last-child { border-bottom: 0; padding-bottom: 0 !important; }


			.bid_item_extra { display: none; border-top: 1px solid #5b747c; border-color: var(--box_border, #5b747c); }


			.invoice_value_field {
				font-size: 16px; font-size: 1.6rem;
				width: 4em;
				margin-bottom: 3px;
				border: 1px solid var(--box_border, #5b747c);
				border-color: var(--box_border, #5b747c);
				background-color: rgba(40,46,48,0.5);
				background-color: var(--layer-3-bg);
				line-height: 2.0em;
				padding: 0 0.5em;
			    -webkit-border-radius: 5px;
			    -moz-border-radius: 5px;
			    border-radius: 5px;
				color: #dfe8ec;
				color: var(--fontColor);
			}

@media only screen and (max-width: 750px) {

	.bid_titles { flex-wrap: wrap; }
		.bid_titles > div:nth-of-type(1) { order: 1; }
		.bid_titles > div:nth-of-type(2) { order: 3; flex: 0 1 100%; padding-top: 0; padding-left: 0; border-left: 0; }
			.bid_titles > div:nth-of-type(2) p { display: inline-block; }
			.bid_titles > div:nth-of-type(2) p.heading:after { content: ' - '; padding-right: 0.25em;  }
		.bid_titles > div:nth-of-type(3) { order: 2; }

	.bid_details { display: block; overflow: auto; }
		.bid_details > div:nth-of-type(1) { }
		.bid_details > div:nth-of-type(2) { padding-top: 0; padding-left: 0; border-left: 0; }
			.bid_details > div:nth-of-type(2) p { display: inline-block; }
			.bid_details > div:nth-of-type(2) p.heading:after { content: ' - '; padding-right: 0.25em; }
		.bid_details > div:nth-of-type(3) { padding-top: 1.0em; text-align: left; }
		.bid_details > div:nth-of-type(3) .button { margin: 0; }
		.bid_details > div:nth-of-type(3) .button:not(:first-of-type) { margin-left: 1.0em; }

	.bid_winners { display: block; overflow: auto; }
		.bid_winners > div:nth-of-type(1) { padding-right: 0; }
		.bid_winners > div:nth-of-type(2) { padding-top: 1.0em; text-align: left; }
		.bid_winners > div:nth-of-type(2) .button { margin: 0; }
		.bid_winners > div:nth-of-type(2) .button:not(:first-of-type) { margin-left: 1.0em; }
		.winning_bidders {
			-webkit-column-count: 1;
			-moz-column-count: 1;
			column-count: 1;
		}
}



@media only screen and (max-width: 450px) {
	.winning_bidders li { font-size: 12px; font-size: 1.2rem; }
}


/******************************/
/***
/*** LOT GRID
/***
/******************************/

	.lot_grid {
		display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
			align-items: stretch;
		margin-top: calc(2vw + 1.0rem);
	}

	.past_lot_filter {
		flex: 0 0 100%;
		font-size: 14px; font-size: 1.4rem;
		margin-bottom: 2em;
	}

		.past_lot_filter ul {
			margin: 0;
			padding: 0;
			display: inline-flex;
			border-radius: 3px;
			overflow: hidden;
		}

			.past_lot_filter ul li {
				margin: 0;
				padding: 0;
				display: inline-block;
				list-style: none;
				border-left: 1px solid rgba(0,0,0,0.05);
				background-color: #5b747c;
				background-color: var(--box_border, #5b747c);
			}
			.past_lot_filter ul li:first-child { border-left: 0; }

		.past_lot_filter a {
			display: block;
			padding: 0.25em 0.75em;
			color: #dfe8ec;
			color: var(--fontColor);
			text-decoration: none;
			margin-right: 0;
		}
		.past_lot_filter a:hover, .past_lot_filter a.active {
			background-color: var(--default-theme-color);
			background-color: var(--theme_color, var(--default-theme-color));
			color: #fff;
			color: var(--theme_color_contrast, #fff);
		}

		.lot_grid_item {
			display: block;
			background-color: rgba(40,46,48,0.5);
			background-color: var(--box_background, rgba(40,46,48,0.5));
			margin-left: 3%;
			margin-bottom: calc(2vw + 1.0rem);
			flex: 0 0 31.33%;
			overflow: hidden;
			position: relative;
			border-radius: var(--borderRadius);
			text-decoration: none;
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
		}

		.lot_grid_item:nth-of-type(3n+1) { margin-left: 0; }
		

			.lot_grid_item:hover { background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color)); text-decoration: none; }
			.lot_grid_item:hover p { color: #fff; color: var(--theme_color_contrast, #fff);  }



			.lot_grid_image {
				background-color: rgba(0,0,0,0.2);
				padding-bottom: 65%;
				position: relative;
			}

				.lot_grid_image_overlay {
					position: absolute;
					left: 2.0rem; right: 2.0rem;
					top: 1.0rem; bottom: 1.0rem;

					display: flex;
						justify-content: space-between;
						flex-direction: column;
						align-items: center;
				}

					.lot_grid_image_overlay p { margin: 0;}

					.lot_grid_image_overlay p.overlay_top_p {
						align-self: flex-start;
						color: #fff;
						font-size: 12px; font-size: 1.2rem;
						text-transform: uppercase;
						text-align: right;
					}

					.lot_grid_image_overlay p.view_lot_button {
						border: 2px solid #fff;
						color: #fff;
						display: inline-block;
						font-size: 16px; font-size: 1.6rem;
						font-weight: bold;
						padding: 0.75em 1.6em;
						opacity: 0;
						transition: opacity 0.25s linear;
					}
					.lot_grid_item:hover .lot_grid_image_overlay p.view_lot_button { opacity: 1; }

					.lot_grid_image_overlay p.overlay_bottom_p {
						color: #fff;
						font-size: 16px; font-size: 1.6rem;
						font-weight: bold;
					}

					p.overlay_top_p.icon::before { font-size: 2.7rem; }
					p.overlay_bottom_p.icon::before { font-size: 2.7rem; }

			.lot_grid_item > p { text-align: center; font-size: 12px; font-size: 1.2rem; padding: 0 2.0rem;
				color: #dfe8ec;
				color: var(--box_text, #dfe8ec);
				display: block;
			}

			.lot_grid_item p.heading {
				margin: 1.0em 0 0.75em 0;
				color: #dfe8ec;
				color: var(--box_text, #dfe8ec);
			}

@media only screen and (max-width: 750px) {
	.lot_grid_item {
		flex: 0 0 48.5%;
	}
	.lot_grid_item:nth-of-type(3n+1) { margin-left: 3%; }
	.lot_grid_item:nth-of-type(2n+1) { margin-left: 0; }
}

@media only screen and (max-width: 450px) {
	.lot_grid_item {
		flex: 0 0 100%;
		margin-left: 0 !important;
	}
}


/******************************/
/***
/*** LOT DETAIL
/***
/******************************/

	.lot_detail {
		display: block;
		overflow: auto;
	}

		.lot_detail_images {
			position: relative;
			display: block;
			width: 38%;
			float: left;
		}

			.lot_rotate_left {
				position: absolute;
				left: 0; top: 0;
				z-index: 999;
				background-color: rgba(0,0,0,0.7);
				-webkit-border-top-right-radius: var(--borderRadius);
				-moz-border-radius-topright: 6px;
				border-top-right-radius: var(--borderRadius);
				width: 4.5rem;
				height: 4.5rem;
				font-size: 3.0rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				transform: rotate(-90deg);
				cursor: pointer;
			}
			.lot_rotate_right {
				position: absolute;
				left: calc(4.5rem + 1px); top: 0;
				z-index: 999;
				background-color: rgba(0,0,0,0.7);
				-webkit-border-top-right-radius: var(--borderRadius);
				-moz-border-radius-topright: 6px;
				border-top-right-radius: var(--borderRadius);
				width: 4.5rem;
				height: 4.5rem;
				font-size: 3.0rem;
				display: flex;
				justify-content: center;
				align-items: center;
				color: #fff;
				transform: rotate(90deg);
				cursor: pointer;
			}

			.lot_detail_zoom {
				position: absolute;
				right: 0; top: 0;
				z-index: 999;
				background-color: rgba(0,0,0,0.7);
				-webkit-border-top-right-radius: var(--borderRadius);
				-webkit-border-bottom-left-radius: var(--borderRadius);
				-moz-border-radius-topright: 6px;
				-moz-border-radius-bottomleft: 6px;
				border-top-right-radius: var(--borderRadius);
				border-bottom-left-radius: var(--borderRadius);
			}

				.lot_detail_zoom::before {
					margin: 0.25em;
					font-size: 30px; font-size: 3.0rem;
				}

				div.featherlight .featherlight-content {
					overflow: visible;
					max-width: calc(100% - 40px);
					-webkit-border-radius: var(--borderRadius);
					-moz-border-radius: var(--borderRadius);
					border-radius: var(--borderRadius);
					border: 0;
					padding: 20px;

					background-color: #38778e;
					background-color: var(--popup_background, #38778e);
				}

				.featherlight-image {
					width: auto !important;
					height: auto !important;
					max-width: 100%;
					max-height: 90vh;
				}

				div.featherlight .featherlight-close-icon {
					color: #fff;
					color: var(--theme_colour_contrast, #fff);
					font-size: 4.0rem;
					width: 1.0em;
					height: 1em;
					line-height: 1.3em;
					overflow: hidden;
				}

				.featherlight-previous { background: transparent !important; top: 0; left: 0; }
				.featherlight-next { background: transparent !important; top: 0; right: 0; }

				.featherlight-previous span,
				.featherlight-next span {
					font-size: 0;
					line-height: 0;
					display: inline-block;
					width: auto;
					margin-top: 0;
					top: 0;
					height: 100%;
				}

				.featherlight-previous span { right: auto; left: 0; }
				.featherlight-next span { right: 0; left: auto; }

						.featherlight-previous span::before,
						.featherlight-next span::before {
							position: absolute;
							top: calc(50% - 1.5em);
							background-color: #f2f2f2;
							color: #333;
							display: block;
							height: 3.0em;
							line-height: 3.1em;
							padding: 0 0.5em;
							font-size: 25px; font-size: 2.5rem;
							-webkit-border-radius: var(--borderRadius);
							-moz-border-radius: var(--borderRadius);
							border-radius: var(--borderRadius);
						}

							.featherlight-previous span::before { content: '\25C0\FE0E'; left: calc(-1em + 10px); }
							.featherlight-next span::before { content: '\25B6\FE0E'; right: calc(-1em + 10px); }

			@media only screen and (max-width: 450px) {
				.featherlight .featherlight-content {
					padding: 2px;
					max-width: 100%;
					-webkit-border-radius: 0;
					-moz-border-radius: 0;
					border-radius: 0;
				}
				.featherlight .featherlight-close-icon { border-width: 2px; }
				.featherlight-previous span::before,
				.featherlight-next span::before {
					font-size: 1.5rem;
				}
				.featherlight-previous span::before { left: 5px; }
				.featherlight-next span::before { right: 5px; }
			}

			.lot_detail_image_carousel {
				width: 100%;
				margin-bottom: calc(1vw + 1.0rem);

			}

				.lot_detail_image_carousel ul {
					display: block;
					margin: 0;
					padding: 0;
					width: 100%;
					position: relative;
					max-height: 90vh;
				}

				/** neded to add round corners to the slick container **/
				.lot_detail_image_carousel ul > div {
					-webkit-border-radius: var(--borderRadius);
					-moz-border-radius: var(--borderRadius);
					border-radius: var(--borderRadius);
					overflow: hidden;
				}
				/** --- **/

					.lot_detail_image_carousel ul li {
						list-style: none;
						margin: 0;
						padding: 0;
						outline: 0;
						pointer-events: none;
						cursor: default;
						max-height: 90vh;
						}

						.lot_detail_image_carousel ul li img {
							width: 100%;
							height: auto;
						}

						.lot_detail_image_carousel .slick-arrow {
							position: absolute;
							top: 25%;
							height: 50%;
							z-index: 9;
							font-size: 0;
							border: 0;
							background: transparent;
							padding: 0;
							margin: 0;
							outline: 0;
						}

						.lot_detail_image_carousel .slick-arrow::before {
							background-color: #f2f2f2;
							color: #333;
							display: block;
							height: 3.0em;
							line-height: 3.1em;
							padding: 0 0.75em;
							font-size: 25px; font-size: 2.5rem;
							-webkit-border-radius: var(--borderRadius);
							-moz-border-radius: var(--borderRadius);
							border-radius: var(--borderRadius);
						}

						.lot_detail_image_carousel .slick-prev { left: -1.25rem; }
							.lot_detail_image_carousel .slick-prev::before { content: '\25C0\FE0E'; }
						.lot_detail_image_carousel .slick-next { right: -1.25rem; }
							.lot_detail_image_carousel .slick-next::before { content: '\25B6\FE0E'; }

						ul.slick-dots {
							display: none !important;
							position: absolute;
							bottom: 0;
							text-align: center;
						}

							ul.slick-dots li {
								display: inline-block;
							}

								ul.slick-dots li button {
									font-size: 0;
									border: 1px solid var(--default-theme-color);
									border-color: var(--theme_color, var(--default-theme-color));
									background-color: #fff;
									background-color: var(--theme_color_contrast, var(--default-theme-color));
									padding: 0;
									margin: 10px 5px;
									width: 10px;
									height: 10px;
									-webkit-border-radius: 50%;
									-moz-border-radius: 50%;
									border-radius: 50%;
								}

								ul.slick-dots li.slick-active button { background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color)); }

			.lot_detail_image_thumbnails {
				width: 100%;
				margin-bottom: calc(2vw + 1.0rem);
			}

				.lot_detail_image_thumbnails ul {
					margin: 0;
					padding: 0;
					width: 100%;
					position: relative;
					display: flex;
					justify-content: space-between;
					flex-wrap: wrap;
				}

					.lot_detail_image_thumbnails ul li {
						flex: 0 1 18%;
						list-style: none;
						margin-bottom: 2%;
						margin-right: 2%;
					}
					.lot_detail_image_thumbnails ul li:nth-of-type(5n) { margin-right: 0; }

						.lot_detail_image_thumbnails ul li img {
							width: 100%;
							height: auto;
							cursor: pointer;
							-webkit-border-radius: var(--borderRadius);
							-moz-border-radius: var(--borderRadius);
							border-radius: var(--borderRadius);
						}

		.admin_seller_details {
			width: 100%;
			margin-bottom: calc(2vw + 1.0rem);
			background-color: rgba(40,46,48,0.5);
			background-color: var(--active_section, rgba(40,46,48,0.5));
			padding: calc(1vw + 1rem);
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
			-webkit-border-radius: var(--borderRadius);
			-moz-border-radius: var(--borderRadius);
			border-radius: var(--borderRadius);
		}

			.admin_seller_details * { color: #dfe8ec; color: var(--box_text, #dfe8ec); }

			.admin_seller_details p { margin-bottom: 0.5em; }

			.admin_seller_details table th {
				border-color: var(--default-theme-color); border-color: var(--theme_color, var(--default-theme-color));
				background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color));
				color: #fff; color: var(--theme_color_contrast, #fff);
				padding: 8px 10px;
			}
			.admin_seller_details table td {
				background-color: rgba(40,46,48,0.5);
				background-color: var(--box_background, rgba(40,46,48,0.5));
				border-color: #5b747c;
				border-color: var(--box_border, #5b747c);
				padding: 8px 10px;
				font-size: 12px;
			}

			.toggler { }
			.toggler.rotate { transform: rotate(180deg); }

		.lot_detail_images ~ div {
			width: calc(100% - 38% - (1vw + 1rem));
			margin-left: calc(1vw + 1rem);
			margin-right: 0;
			float: left;
		}

		.lot_detail_head {
			border-bottom: 1px solid #5b747c;
			border-color: var(--box_border, #5b747c);
			display: flex;
			justify-content: space-between;
			padding-bottom: calc(1vw + 1rem);
		}

			.lot_detail_head > div { flex: 1 1 auto; }
				.lot_detail_head h1 { margin-top: 0.5em; margin-bottom: 0.5em; }
				.lot_detail_head h2 { margin-top: 0.5em; margin-bottom: 0.5em; font-weight: bold; }
				.lot_detail_head p { font-size: 12px; font-size: 1.2rem; color: var(--default-theme-color); color: var(--theme_color, var(--default-theme-color)); margin: 0; }
				.lot_detail_head p.msg { color: #dfe8ec; color: var(--text_color_mediim, #dfe8ec); }

			.lot_status {
				min-width: 350px;
				flex: 1 1 auto;
				margin: 0;
				padding: 0;
				display: flex;
				justify-content: flex-end;
			}

				.lot_status li {
					flex: 0 0 0%;
					list-style: none;
					margin: 0 0 0 1.5em;
					padding: 0;
					text-align: center;
					font-size: 11px; font-size: 1.1rem;
					color: #dfe8ec;
					color: var(--text_color_mediim, #dfe8ec);
					white-space: nowrap;
				}

				.lot_status li.highlight b { color: #c1272d; }
				.lot_status li.highlight span { background-color: #c1272d; }

					.lot_status li span {
						margin: 0 auto;
						color: #fff;
						color: var(--theme_color_contrast, #fff);
						background-color: var(--default-theme-color);
						background-color: var(--theme_color, var(--default-theme-color));
						width: 50px;
						height: 50px;
						-webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						border-radius: 50%;
						margin-bottom: 1.0em;

						display: flex;
						justify-content: center;
						align-items: center;
					}

						.lot_status li span::before {
							margin-right: 0;
						}

					.lot_status li b {
						color: #dfe8ec;
						color: var(--text_color_mediim, #dfe8ec);
						display: block;
						font-size: 16px; font-size: 1.6rem;
						text-align: center;
					}

		.lot_detail_bid {
			background-color: var(--default-theme-color);
			background-color: var(--theme_color, var(--default-theme-color));
			/* margin-bottom: 2rem; */
			padding: calc(1vw + 1.0rem);
			padding-top: 0;

			-webkit-border-radius: var(--borderRadius);
			-moz-border-radius: var(--borderRadius);
			border-radius: var(--borderRadius);

			width: 340px;
		}

			.lot_detail_bid_head {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin: 0 0 1.5em 0;
			}

				.lot_detail_bid_head > div:first-of-type::before { font-size: 80px; }
				.lot_detail_bid_head > div:last-of-type a { color: #fff; color: var(--theme_color_contrast, #fff); font-size: 12px; font-size: 1.2rem; }
				.lot_detail_bid_head > div:last-of-type a:hover { color: #333; color: var(--text_color, #333); }

			.lot_detail_bid p { color: #fff; color: var(--theme_color_contrast, #fff); margin-bottom: calc(1.0vw + 1.0rem); }
			.lot_detail_bid p.heading { text-transform: uppercase; margin-bottom: 0.5em; font-size: 20px; font-size: 2.0rem; }

			.lot_detail_bid form label {
				color: #fff;
				color: var(--theme_color_contrast, #fff);
				font-size: 12px; font-size: 1.2rem;
				display: block;
				line-height: 1.2em;
			}

			.lot_detail_bid form p {
				border-bottom: 1px solid #fff;
				border-color: var(--theme_color_contrast, #fff);
				color: #fff;
				color: var(--theme_color_contrast, #fff);
				font-size: 30px; font-size: 3.0em;
			}

			.lot_detail_bid form p.bid_line { font-size: 18px; font-size: 1.8rem; margin-bottom: 1em; padding-bottom: 0.5em; }
			.lot_detail_bid form p.bid_line label {
				font-size: 14px; font-size: 1.4rem;
			}

				.lot_detail_bid form p.bid_line	.bid_fields {
					display: flex;
					align-items: flex-start;
					justify-content: space-between;
				}

					.lot_detail_bid form p.bid_line	.bid_fields span {
						flex: 1 1 auto;
					}

						.lot_detail_bid form p.bid_line	.bid_fields span small { font-size: 11px; font-size: 1.1rem; }
						.lot_detail_bid form p.bid_line	.bid_fields span input {
							background-color: var(--theme_color_contrast, #fff);
							color: var(--theme_color, var(--default-theme-color));
							padding: 0.25em 0.5em;
						}

				.lot_detail_bid form p input {
					background-color: transparent;
					border: 0;
					color: #fff;
					color: var(--theme_color_contrast, #fff);
					display: inline-block;
					width: calc(100% - 2.0em);
					overflow: hidden;
					padding: 0;
					line-height: 1.0em;
					-moz-appearance: textfield;
				}
				.lot_detail_bid form p input::-webkit-outer-spin-button,
				.lot_detail_bid form p input::-webkit-inner-spin-button {
				    -webkit-appearance: none;
				    margin: 0;
				}

				.lot_detail_bid form p input:focus { outline: none !important; }

				.lot_detail_bid form p input::selection { background: rgba(0,0,0,0.5); }
				.lot_detail_bid form p input::-moz-selection { background: rgba(0,0,0,0.5); }

			#itemised_total {
				font-size: 24px;
				font-weight: 700;
				margin: 0.25em 0;
				color: #fff;
				color: var(--theme_color_contrast, #fff);
			}

			.lot_detail_bid .button {
				padding-left: 0;
				padding-right: 0;
				text-align: center;
				display: block;
				width: 100%;
				background-color: #fff;
				background-color: var(--theme_color_contrast, #fff);
				color: #333;
				color: var(--text_color, #333);
			}

		.lot_detail_description {
			margin-right: calc(2vw + 1.0rem);

			float: right;
			width: calc(100% - 340px - (2vw + 1.0rem));
		}

		.lot_detail_bid:empty { display: none; }
		.lot_detail_bid:empty + .lot_detail_description {
			clear: right;
			width: 100%;
			margin-right: 0;

		}

@media only screen and (max-width: 1180px) {


	.lot_detail_bid { width: calc(50% - (1vw + 0.5rem)); }
	.lot_detail_description,
	.lot_detail_bid:empty + .lot_detail_description { clear: both; width: 100%; margin-right: 0;}


}

@media only screen and (max-width: 800px) {

	.lot_detail_images { width: 100%; }
		.lot_detail_image_thumbnails { display: none; }
		ul.slick-dots { display: block !important; }
	.lot_detail_head { width: 100%; }
	.lot_detail_bid { width: 100%; }
	.lot_detail_description { }

	.lot_detail_images .slick-arrow::before { font-size: 2.0rem; }

}

@media only screen and (max-width: 450px) {
	.lot_detail_zoom { display: none; }
}



/******************************/
/***
/*** BASIC LISTING TABLE
/***
/******************************/


	table.listing {}

		table.listing th {
			border-color: #5b747c;
			background-color: #5b747c;;
			color: var(--fontColor);
			padding: 8px 10px !important;
		}

		table.listing td {
			background-color: rgba(40,46,48,0.5);
			background-color: var(--box_background, rgba(40,46,48,0.5));
			border-color: #5b747c;
			border-color: var(--box_border, #5b747c);
			padding: 8px 10px !important;
			font-size: 12px;
		}

		table.listing td:last-child { text-align: right; width: 1px; }

		table.lot_list th, table.lot_list td {
			font-size: 12px; font-size: 1.2rem;
		}


	table.listing.small th,
	table.listing.small td {
		font-size: 12px; font-size: 1.2rem;
	}

	table.listing.small .button {
		font-size: 11px; font-size: 1.1rem;
		height: 2.0em;
		line-height: 2.0em;
		padding-top: 0.1em;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100px;
	}

	table.listing .center{
		text-align: center;
	}

	table.listing .right{
		text-align: right;
	}

	table.listing .pale_green td {
		background-color: #c5ecc0;
    color: #000;
	}
	
	table.listing .pale_amber td {
		background-color: #f2dfc5;
		color: #000000;
	}

	table.listing .pale_red td {
		background-color: #e9a19e;
		color: #000000;
	}


	table.dataTable { border-collapse: initial; border-spacing: initial; margin-top: 1rem; float: left; }
	table.dataTable.no-footer { border-bottom: initial; }
	table.dataTable thead th { border-color: var(--default-theme-color); border-color: var(--theme_color, var(--default-theme-color)); font-weight: bold; }
	table.dataTable thead td { border-color: #5b747c; border-color: var(--box_border, #5b747c); }
	table.dataTable tbody tr { background-color: transparent; }

	.dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate {
		color: #dfe8ec !important;
		color: var(--text_color_medium, #dfe8ec) !important;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button {
		color: #dfe8ec !important;
		color: var(--text_color_medium, #dfe8ec) !important;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active {
		color: #dfe8ec !important;
		color: var(--text_color_medium, #dfe8ec) !important;
	}

		.button_positive {
			background-color: var(--default-theme-color) !important; background-color: var(--theme_color, var(--default-theme-color)) !important;
			color: #fff !important; color:var(--theme_color_contrast, #fff) !important;
		}
		.button_negative { background-color: #c1272d !important; }



		.openstep {
			background-color: transparent;
			font-size: 20px; font-size: 2.0rem;
			display: inline-block;
			width: 2.6em;
			height: 2.6em;
			line-height: 2.5em;
			text-align: center;
			color: #fff;
			border: 2px solid currentColor;
			-webkit-border-radius: 50%;
			-moz-border-radius: 50%;
			border-radius: 50%;
			transition: transform 0.5s linear;
			cursor: pointer;
		}

			.openstep.active { color: #fff; transform: rotate(-180deg); }

			.openstep::before {
				content: '\25BC\FE0E';
				color: currentColor;
				padding-left: 0;
				font-size: 2.1rem;
			}

@media only screen and (max-width: 450px) {
		.openstep { font-size: 16px; font-size: 1.6rem; }
}

.table--sticky-headers thead th {
	position: sticky; 
	top: 0;
}

/******************************/
/***
/*** FORM STYLES
/***
/******************************/

	.alert {
		flex: 0 0 100%;
		padding: calc(0.5vw + 0.5rem) calc(1vw + 1.0rem);
		background-color: #d55358;
		color: #fff;
		font-size: 16px; font-size: 1.6rem;
		margin-bottom: calc(1vw + 1.0rem);
	}

		.alert-error { background-color: #d55358; }
		.alert-warning { background-color: var(--colorWarning); }
		.alert-success { background-color: var(--default-theme-color); }


	.form_error {
		flex: 1 1 100%;
		padding: calc(1vw + 1.0rem) calc(2vw + 1.0rem);
		background-color: #d55358;
		color: #fff;
		font-size: 16px; font-size: 1.6rem;

	}

	.form_error:empty { display: none; }

	.form_error + p { margin-top: calc(1vw + 1.0rem); }

 	.form_style {}
	.form_style.flexed { display: flex; flex-wrap: wrap; column-gap: 40px; }

	 .form_style p { position: relative; margin-bottom: 1.8rem; }
	 .form_style.flexed p { flex: 0 0 100%; }
	 .form_style.flexed p.half { flex: 1 1 50%; flex-basis: calc(50% - 20px); }
	 .form_style p:last-of-type { margin-bottom: 0; }

		form.form_style p.inline label { display: inline-block; }
		form.form_style p.inline select { display: inline-block; width: auto; }

		 .form_style p label { font-weight: bold; display: block; font-size: 12px; font-size: 1.2rem; padding: 0; text-transform: uppercase; }
			
		 .form_style p label.field_error + .required,
		 .form_style p label.field_error + .required_email { border-color: #d55358 !important; }
		 .form_style p label.field_error + * .required,
		 .form_style p label.field_error + * .required_email { border-color: #d55358 !important; }
		 .form_style p label.field_error::before { border-color: #d55358 !important; }

		 .form_style p label small { font-size: 11px; font-size: 1.1rem; text-transform: none; font-weight: normal; padding-left: 0.5em; }

		 .form_style input[type=text],
		 .form_style input[type=file],
		 .form_style input[type=email],
		 .form_style input[type=number],
		 .form_style input[type=password],
		 .form_style input[type=date],
		 .form_style input[type=time],
		 .form_style input[type=search],
		 .form_style input[type=url],
		 .form_style textarea {
				background-color: rgba(40,46,48,0.5);
				background-color: var(--layer-3-bg);
				border: 1px solid var(--box_border, #5b747c);
				border-color: var(--box_border, #5b747c);
				font-size: 12px; font-size: 1.2rem;
				font-weight: bold;
				width: 100%;
				padding: 0 1.5rem;
				height: 6.0rem;
				color: #dfe8ec;
				color: var(--fontColor);

				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;

				background-clip: padding-box;
			}
		 .form_style textarea {
				height: auto;
				padding: 1.5rem;
				line-height: 1.8em;
			}

		 .form_style input.tickbox { position: absolute; left: 1.2rem; bottom: 0; opacity: 0; }
		 .form_style input.tickbox + label { font-size: 12px; font-size: 1.2rem; line-height: 1.1em; text-transform: none; font-weight: normal; display: inline; }
		 .form_style input.tickbox + label:before {
				background-color: rgba(40,46,48,0.5);
				background-color: var(--layer-3-bg);
				content: '';
				float: left;
				display: inline-block;
				border: 1px solid var(--box_border, #5b747c);
				border-color: var(--box_border, #5b747c);
				font-size: 26px; font-size: 2.6rem;
				width: 3.0rem;
				padding: 0.05em 0 0 0.05em;
				height: 3.0rem;
				line-height: 3.0rem;
				color: var(--default-theme-color);
				color: var(--theme_color, var(--default-theme-color));
				margin-right: 0.5em;
				margin-top: -0.2em;
				text-align: center;

				vertical-align: bottom;

				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;
			}

		 .form_style input.tickbox:checked + label:before { content: ' \2713'; }

		 .form_style input::-webkit-input-placeholder 	{ color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }
		 .form_style input::-moz-placeholder 			{ color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }
		 .form_style input::-ms-input-placeholder 		{ color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }
		 .form_style input::-moz-placeholder 			{ color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }

		 .form_style textarea::-webkit-input-placeholder { color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }
		 .form_style textarea::-moz-placeholder 			{ color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }
		 .form_style textarea::-ms-input-placeholder 	{ color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }
		 .form_style textarea::-moz-placeholder 			{ color: #dfe8ec; color: var(--fontColor); font-weight: bold; opacity: 1; }


		 .form_style input[type=text]:focus,
		 .form_style input[type=file]:focus,
		 .form_style input[type=email]:focus,
		 .form_style input[type=number]:focus,
		 .form_style input[type=password]:focus,
		 .form_style input[type=date]:focus,
		 .form_style input[type=time]:focus,
		 .form_style input[type=search]:focus,
		 .form_style input[type=url]:focus,
		 .form_style textarea:focus,
		 .form_style select:focus {
				outline: none !important;
				border-color: var(--default-theme-color);
				border-color: var(--theme_color, var(--default-theme-color));
			}


		 .form_style select {
				background-color: rgba(40,46,48,0.5);
				background-color: var(--layer-3-bg);
				border: 1px solid var(--box_border, #5b747c);
				border-color: var(--box_border, #5b747c);
				font-size: 12px; font-size: 1.2rem;
				font-weight: bold;
				width: 100%;
				padding: 0 1.5rem;
				height: 6.0rem;
				color: #dfe8ec;
				color: var(--fontColor);

				-webkit-border-radius: 5px;
				-moz-border-radius: 5px;
				border-radius: 5px;

			}

			/** STYLED SELECT BOX **/

			.select_wrapper { position: relative; display: inline-block; width: 100%; }

				.styled_select {
					-webkit-appearance: none;
					-moz-appearance: none;
				}

				.styled_select option { }

				.select_arrow {
					position: absolute;
					display: inline-block;
					border: 0;
					font-size: 16px;
					font-size: 1.6rem;
					padding: 0;
					line-height: calc(6.0rem - 2px);
					width: 3.0em;
					height: calc(100% - 2px);
					text-align: center;
					box-sizing: border-box;
					vertical-align: top;
					top: 1px;
					right: 1px;
					background-color: rgba(40,46,48,0.5);
					background-color: var(--layer-3-bg);
					pointer-events: none;
					color: #dfe8ec;
					color: var(--fontColor);

					-webkit-border-radius: 5px;
					-moz-border-radius: 5px;
					border-radius: 5px;
				}

			/** STYLED INPUT **/

			input.styled_input {
				background-color: var(--layer-3-bg);
				border: 1px solid var(--box_border, #5b747c);
				color: var(--fontColor);
				border-radius: 5px;
				padding: 0 1.5rem;
				color: var(--fontColor);
				font-size: 1.2rem;
    			font-weight: bold;
				height: 6rem;
			}

			/** STYLED CHECkBOX **/

			input.styled_checkbox {
				position: absolute;
				left: -10000px;
			}

				input.styled_checkbox + label {
					cursor: pointer;
					line-height: 1.4em;
					padding-right: 1.0em;
					padding-left: 2.0em;
					display: inline-block;
					break-inside: avoid;

				}

					input.styled_checkbox + label::before {
						content: '';
						display: block;
						float: left;
						width: 1.2em;
						height: 1.2em;
						background: rgba(40,46,48,0.5);
						background-color: var(--layer-3-bg);
						border: 1px solid var(--box_border, #5b747c);
						border-color: var(--box_border, #5b747c);
						vertical-align: top;

						margin-left: -2.0em;
						box-sizing: border-box;
						font-size: 1em;
					}

					input.styled_checkbox:checked + label::before { background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color)); }
					input.styled_checkbox:checked + label { color: var(--default-theme-color) !important; color: var(--theme_color, var(--default-theme-color)) !important; }

			/** STYLED RADIO **/

			input.styled_radio {
				position: absolute;
				left: -10000px;
			}

				input.styled_radio + label {
					cursor: pointer;
					line-height: 1.4em;
					padding-right: 1.0em;
					padding-left: 3.0rem;
					display: inline-block;
					break-inside: avoid;

				}

					input.styled_radio + label::before {
						content: '';
						display: block;
						float: left;
						width: 1.2em;
						height: 1.2em;
						background: rgba(40,46,48,0.5);
						background-color: var(--layer-3-bg);
						border: 1px solid var(--box_border, #5b747c);
						border-color: var(--box_border, #5b747c);
						vertical-align: top;
						
						margin-left: -2.0em;
						box-sizing: border-box;
						font-size: 1em;

						-webkit-border-radius: 50%;
						-moz-border-radius: 50%;
						border-radius: 50%;
					}

					input.styled_radio:checked + label::before { background-color: var(--default-theme-color); background-color: var(--theme_color, var(--default-theme-color)); }
					input.styled_radio:checked + label { color: var(--default-theme-color) !important; color: var(--theme_color, var(--default-theme-color)) !important; }

	.button, a.button {
		border: 0;
		padding: 0;
		margin: 0;
		display: inline-block;
		font-size: 16px; font-size: 1.6rem;
		font-weight: bold;
		height: 6.0rem;
		line-height: 6.0rem;
		background-color: var(--default-theme-color);
		background-color: var(--theme_color, var(--default-theme-color));
		color: #fff;
		color: var(--theme_color_contrast, #fff);
		padding: 0 4.5rem;
		text-transform: uppercase;
		-webkit-border-radius: 5px;
		-moz-border-radius: 5px;
		border-radius: 5px;
		text-decoration: none;
		white-space: nowrap;
		cursor: pointer;
		text-align: center;
	}
	.button:hover { text-decoration: none; }
	.button:focus { outline: none !important; }

	.button_green, a.button_green { background-color: var(--default-theme-color) !important; background-color: var(--theme_color, var(--default-theme-color)) !important; }
	.button_red, a.button_red { background-color: #c1272d !important; }
	.button_orange, a.button_orange { background-color: #eca63f !important; }
	.button_purple, a.button_purple { background-color: #a300ff !important; }

  	.button:disabled, .button.disabled, a.disabled{ pointer-events: none; background-color: #999 !important; color: #FFF !important; }

	.button_shadow, a.button_shadow {
		transition: all 0.075s linear;
		-webkit-box-shadow: 0px 5px 0px 0px rgba(0,0,0,0.15);
		-moz-box-shadow:    0px 5px 0px 0px rgba(0,0,0,0.15);
		box-shadow:         0px 5px 0px 0px rgba(0,0,0,0.15);
	}

	.button_shadow:hover, a.button_shadow:hover {
		margin-top: 5px;
		margin-bottom: -5px;
		-webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.15);
		-moz-box-shadow:    0px 0px 0px 0px rgba(0,0,0,0.15);
		box-shadow:         0px 0px 0px 0px rgba(0,0,0,0.15);
	}

	.button_medium, a.button_medium {
		font-size: 12rem;
		font-size: 1.2rem;
		height: 5rem;
		line-height: 5rem;
		padding: 0 2rem;
	}

	.button_small, a.button_small {
		font-size: 12px; font-size: 1.2rem;
		height: 3.0rem;
		line-height: 3.0rem;
		padding: 0 1.5rem;
	}

	p.total span{
		font-size: 24px;
    	color: var(--theme_color, var(--default-theme-color));
    }

@media only screen and (max-width: 750px) {
	.button, a.button {
		font-size: 14px; font-size: 1.4rem;
		height: 5.0rem;
		line-height: 5.0rem;
		padding: 0 3rem;
	}
}

@media only screen and (max-width: 450px) {
 .form_style input[type=text],
 .form_style input[type=file],
 .form_style input[type=email],
 .form_style input[type=number],
 .form_style input[type=password],
 .form_style input[type=date],
 .form_style input[type=time],
 .form_style input[type=search],
 .form_style input[type=url],
 .form_style select,
 .form_style textarea {
		font-size: 16px !important;
	}

	.button, a.button {
		font-size: 14px; font-size: 1.4rem;
		height: 5.0rem;
		line-height: 5.0rem;
		padding: 0 3rem;
	}

}



.agreement_choices {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

	.agreement_or {
		flex: 0 0 160px;
		text-align: center;
		font-size: 2.0rem;
		font-weight: bold;
		padding-top: 140px;
	}

	.agreement_choice {
		flex: 0 0 50%;
		flex-basis: calc(50% - 80px);
		padding: calc(1vw + 1rem) 0;
	}

		.agreement_choice p.heading {
			font-size: 1.8rem !important;
			font-weight: normal;
			color: #666;
			margin-bottom: 1.0em;
		}

		.agreement_choice .form_style label { text-transform: none; display: inline-block; font-weight: normal; padding-left: 0.5em; }

		.agreement_choice .form_style input[type=file] {
			line-height: 4.0rem;
			padding-top: 0.7rem;
		}

@media only screen and (max-width: 1000px) {
	.agreement_choices { display: block; }
	.agreement_or {
		padding: 40px 0;
	}
}


.seller_collection_invoice {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	flex-wrap: wrap;
}

	.seller_collection_invoice p {
		flex: 0 1 33.33%;
		flex-basis: calc(33.33% - 20px);
	}

	.seller_collection_invoice p:last-child { margin-left: auto; text-align: right; }

		.seller_collection_invoice input {

		}

			.seller_collection_invoice input::placeholder { }

		.form_style .seller_collection_invoice input[type=file] {
			line-height: 3.0rem;
			padding-top: 1.0rem;
		}

@media only screen and (max-width: 767px) {
	.seller_collection_invoice p {
		flex: 0 1 50%;
		flex-basis: calc(50% - 20px);
	}
}

@media only screen and (max-width: 550px) {
	.seller_collection_invoice p {
		flex: 0 1 100%;
		flex-basis: 100%;
	}
	.seller_collection_invoice p:nth-last-child(2) { flex-basis: calc(50% - 20px); }
	.seller_collection_invoice p:nth-last-child(1) { flex-basis: calc(50% - 20px); }
}

	.buyer_po { padding-bottom: 10px; overflow: hidden; }
		.buyer_po .form_style label { text-transform: none; display: inline-block; font-weight: normal; padding-left: 0.5em; }

		.buyer_po .form_style input[type=file] {
			max-width: 30em !important;
			line-height: 4.0rem;
			padding-top: 0.7rem;

		}









.process_details {
	overflow: auto;
}

.process_container {
	overflow: auto;
	width: 100%;
	margin-bottom: calc(2vw + 1.0rem);
	background-color: #38778e;
	background-color: var(--active_section, #38778e);
	padding: calc(0.75vw + 0.75em) calc(1vw + 1rem);
	border: 1px solid #e6e6e6;
	-webkit-border-radius: var(--borderRadius);
	-moz-border-radius: var(--borderRadius);
	border-radius: var(--borderRadius);
}

	.process_row {
		clear: both;
		overflow: auto;
		margin: calc(0.75vw + 0.75rem) 0;
	}

		.process_check {
			float: left;
			width: 2rem;
			height: 2rem;
			border-radius: 3px;
			margin-top: 0.4rem;
			margin-right: 1.0rem;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.process_check::before {
			content: '\2717';
			font-size: 2.0rem;
			color: #d55358;
		}

		.process_check.checked::before {
			content: '\2713';
			font-size: 2.0rem;
			color: var(--default-theme-color);
			color: var(--theme_color, var(--default-theme-color));
		}

		.process_content {
			float: left;
		}

			.process_content p {
				line-height: 3.0rem;
				font-size: 1.4rem;
				margin-bottom: 0;
			}

			.process_content form {
				margin-top: 1em;
				background-color: rgba(40,46,48,0.5);
				background-color: var(--layer-3-bg);
				border: 1px solid var(--box_border, #5b747c);
				border-color: var(--box_border, #5b747c);
				border-radius: 5px;
				padding: calc(0.75vw + 0.75rem);
				display: none;
			}

				.process_content form p:last-child { margin-bottom: 0; }

				.process_content form label { font-size: 1.5rem;  }

				.process_content form input:not([type='file']) {
					display: inline-block;
					padding: 0 0.75em;
					text-transform: uppercase;
					color: #dfe8ec;
					color: var(--fontColor);
					background-color: rgba(40,46,48,0.5);
					background-color: var(--layer-3-bg);
					border-radius: 3px;
					text-decoration: none;
					font-weight: normal;
					font-size: 1.5rem;
					height: 3rem;
					line-height: 3rem;
					border: 1px solid var(--box_border, #5b747c);
					border-color: var(--box_border, #5b747c);
				}

			.mini_button {
				display: inline-block;
				padding: 0 0.75em;
				text-transform: uppercase;
				color: #fff;
				color: var(--theme_color_contrast, #fff);
				background-color: var(--default-theme-color);
				background-color: var(--theme_color, var(--default-theme-color));
				border-radius: 3px;
				text-decoration: none;
				font-weight: bold;
				font-size: 1.5rem;
				height: 3rem;
				line-height: 3rem;
				margin-left: 0.5em;
				-webkit-appearance: none;
				border: 0;
				cursor: pointer;
				outline: none;
			}

			.mini_button:focus { outline: none; }


			.lead-price{
				background-color: #fff;
				border: 1px solid #d55358;
				text-align: center;
				display: block;
				padding: 5px 5px;
				line-height: 15px;
				overflow: hidden;
				color: #d55358;
				font-size: 12px;
				font-family: "Open Sans Bold", Arial, Helvetica, sans-serif;
				font-weight: bold;
			}

			.process_content .repeater { margin-left:  20px; }

			.process_content .repeater_row {
				margin-bottom: 10px;
				padding: 0;
			}

				.process_content .repeater_row p {
					display: flex;
					align-items: center;
				}
				.process_content .repeater_row label {
					font-size: 12px; font-size: 1.2rem;
					margin-right: 10px;
				}
				.process_content .repeater_row input {
					height: 3.4rem !important;
					line-height: 3.4rem !important;
					width: 30em;
					text-transform: none !important;
				}
				.process_content .repeater_row button {
					height: 3.4rem !important;
					line-height: 3.4rem !important;
				}

.itemised_product {
	font-size: 14px;
	padding: 1em 2em;
	margin-bottom: 1em;
	border: 1px solid var(--box_border, #5b747c);
	border-radius: 10px;
	border-color: var(--box_border, #5b747c);
	color: #dfe8ec;
	color: var(--box_text, #dfe8ec);
	background-color: rgba(40,46,48,0.5);
	background-color: var(--box_background, rgba(40,46,48,0.5));
}

.itemised_bid {
	font-size: 14px;
	padding: 1em 1em 1em 2em;
	margin-top: 1em;
	border: 1px solid var(--box_border, #5b747c);
	border-radius: 10px;
	border-color: var(--box_border, #5b747c);
	color: #dfe8ec;
	color: var(--box_text, #dfe8ec);
	background-color: rgba(40,46,48,0.5);
	background-color: var(--box_background, rgba(40,46,48,0.5));
	display: flex;
	align-items: center;
	justify-content: space-between;
}
	.itemised_bid span { }
	.itemised_bid input { font-size: 16px; padding: 0.5em; }

.personal_details {
	display: block;
	padding:20px;
	background-color: #38778e;
	background-color: var(--active_section, #38778e);
	border: 0;
	border-radius: 15px; 
	position: relative;
}

.deal {
	margin-bottom: 20px;
	padding: 20px;
	background-color: rgba(40,46,48,0.5);
	background-color: var(--box_background, rgba(40,46,48,0.5));
	border: 1px solid var(--box_border, #5b747c);
	border-color: var(--box_border, #5b747c);
	border-radius: 10px;
}

	.deal b {
		color: var(--default-theme-color);
		color: var(--theme_color, var(--default-theme-color));
	}

.progress {
	background: rgba(0,0,0,0.3);
	width:100%;
	height:20px;
	border-radius: 5px;
	margin-bottom: 20px;
	border: 0;
	overflow: hidden;
}

.progress-bar {
	color: #fff;
	display:flex;
	justify-content: center;
	align-items: center;
	background-color: var(--default-theme-color);
	background-color: var(--theme_color, var(--default-theme-color));
	height:20px;
	border-bottom-left-radius: 5px;
	border-top-left-radius: 5px;
}

.action {
	margin-top: 20px;
	padding: 20px;
	background-color: rgba(40,46,48,0.5);
	background-color: var(--box_background, rgba(40,46,48,0.5));
	border: 1px solid var(--box_border, #5b747c);
	border-color: var(--box_border, #5b747c);
	border-radius: 10px;
}

.footer { text-align: center; margin-bottom: 30px;}
.footer img { max-width: 150px; width: 20%; filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.2)); }


.tippy-box[data-theme~='fitness'] {
	background: none;
	background-color: transparent;
	padding: 0;
}

.tippy-box[data-theme~='weservice'] > .tippy-content {
	padding: 10px 20px;
	background: var(--layer-3-bg);
	border: 2px solid var(--box_border);
	color: var(--fontColor);
	font-size: 16px;
	border-radius: var(--borderRadius);
	text-align: left;
}

	.tippy-box[data-theme~='weservice'] > .tippy-content span {
		font-size: 12px;
		display: inline-block;
		padding: 0.25em 0.5em;
		background-color: #e31f24;
		color: #fff;
		font-weight: bold;
		border-radius: 4px;
		margin-top: 0.25em;
		cursor: pointer;
	}

	.tippy-box[data-theme~='weservice'] > .tippy-arrow {
		z-index: 2;
	}

	.tippy-box[data-theme~='weservice'][data-placement^='top'] > .tippy-arrow::before {
		border-top-color: var(--box_border, #5b747c); bottom: -8px; 
	}
	.tippy-box[data-theme~='weservice'][data-placement^='bottom'] > .tippy-arrow::before {
		border-bottom-color: var(--box_border, #5b747c);
	}
	.tippy-box[data-theme~='weservice'][data-placement^='left'] > .tippy-arrow::before {
		border-left-color: var(--box_border, #5b747c);
	}
	.tippy-box[data-theme~='weservice'][data-placement^='right'] > .tippy-arrow::before {
		border-right-color: var(--box_border, #5b747c); top: -8px;
	}

.autocomplete-suggestions {
	background-color: #1a1b1b;
	border: 1px solid var(--box_border, #5b747c);
	border-color: var(--box_border, #5b747c);
	top: calc(100% - 13px);
	font-size: 14px;
	max-height: 25em !important;
	min-width: 300px;
	overflow: auto;
}
.repeater_row .autocomplete-suggestions { top: 100%; }

.autocomplete-suggestion {
	padding: 1em 1em;
	color: #fff;
	cursor: pointer;
	font-size: 14px;
	line-height: 1.0em;
}
.autocomplete-selected {
	background-color: var(--default-theme-color);
	background-color: var(--theme_color, var(--default-theme-color));
}

.subheading { 
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 0rem 1rem;
	margin-bottom: 2rem;
}

.subheading__title {
	font-size: 2rem;
	margin-bottom: 0;
}

.subheading__description {
	flex-basis: 100%;
	margin-bottom: 0;
}

.subheading__aside {
	display: flex;
	gap: 1rem;
}

.ticket_stats {
	display: flex;
	align-items: stretch;
	justify-content: space-between;
	margin-bottom: 20px;
}

	.ticket_stats > div {
		flex: 1;
		background-color: rgba(40,46,48,0.5);
		background-color: var(--active_section, rgba(40,46,48,0.5));
		padding: calc(1vw + 1rem);
		border: 1px solid var(--box_border, #5b747c);
		border-color: var(--box_border, #5b747c);
		border-radius: var(--borderRadius);
		margin-left: 20px;
		display: flex;
		flex-direction: column;
	}
	.ticket_stats > div:first-child { margin-left: 0; }

	.ticket_stats h3 {
		font-size: 16px;
		font-size: 1.6rem;
		text-align: center;
		color: #fff;
	}

	.ticket_stats span {
		margin-top: auto;
		text-align: center;
		font-size: 34px;
		font-size: 3.4rem;
		color: var(--default-theme-color);
		color: var(--theme_color, var(--default-theme-color));
	}

.tickets {
	width: 100%;
	margin-bottom: 2rem;
	background-color: rgba(40,46,48,0.5);
	background-color: var(--active_section, rgba(40,46,48,0.5));
	padding: calc(1vw + 1rem);
	border: 1px solid var(--box_border, #5b747c);
	border-color: var(--box_border, #5b747c);
	border-radius: var(--borderRadius);
}

	.tickets h2 {
		color: var(--theme_color, var(--default-theme-color));
		font-size: 2.0rem;
		margin-bottom: 2rem;
	}

  .ticket-section {
    margin-bottom: 3rem;
  }

  .ticket-section table {
    margin-bottom: 0;
  }

	.tickets p {
		margin-bottom: 0.75em;
	}

	.ticket_table {
		background-color: var(--layer-2-bg);
	}
	.table th,
	.ticket_table th {
		font-size: 14px; font-size: 1.4rem;
		line-height: 1.4em;
		border: 1px solid var(--box_border, #5b747c);
		font-weight: bold;
		background-color: var(--layer-3-bg);
	}

	.ticket_table tr:nth-child(odd) {
		background: var(--layer-1-bg);
	}

	.table__header {
		/* overriding weirdness */
		font-size: 1.2rem !important;
	}

	.table__header-icon {
		appearance: none;
		border: none;
		background: none;
		color: currentColor;
		border-radius: 50%;
		cursor: pointer;
		display: flex;
		flex-shrink: 0;
		justify-content: center;
		padding: 0;
		position: relative;
		transition: transform 0.25s linear;
		height: 1.5rem;
		width: 1.5rem;
		
		-webkit-border-radius: 50%;
		-moz-border-radius: 50%;
	}

	.table__header--center {
		text-align: center;
	}

	.table__header--ticket-number {
		width: 15rem;
	}

	.table__header--traffic-light {
		text-align: center;
		width: 6rem; 
	}

	.table__header--action {
		width: 8rem;
	}

	.table__header--between {
		display: flex;
		justify-content: space-between;
		gap: 1rem;
	}

	.table__actions {
		display: flex;
		flex-direction: column;
		gap: 10px;
		width: 128px;
	}

	.table__actions a,
	.table__actions button {
		font-size: 14px;
	}

	.table td,
	.ticket_table td {
		font-size: 1.3rem;
		line-height: 1.4em;
		border: 1px solid var(--box_border, #5b747c);
	}

	.ticket_item {
		align-items: flex-start;
		display: flex;
		flex-wrap: wrap;
		font-size: 1.4rem;
		justify-content: space-between;
		line-height: 1.4em;
		margin-bottom: 2rem;
	}

		.ticket_item > div:last-child {  }

		.ticket_item > *:last-child { margin-bottom: 0; }
		.ticket_item ul { margin: 0; padding: 0; width: 100%; }
		.ticket_item ul li {
			list-style: none;
			margin: 0;
			margin-bottom: calc(0.5vw + 0.5rem);
			background-color: rgba(40,46,48,0.5);
			background-color: var(--active_section, rgba(40,46,48,0.5));
			padding: calc(0.5vw + 0.5rem);
			border: 1px solid var(--box_border, #5b747c);
			border-color: var(--box_border, #5b747c);
			border-radius: var(--borderRadius);
			position: relative;
			/* display: flex; */
		}
		.ticket_item ul li .images {
			width: 100px;
			margin-right: calc(0.6vw + 0.6rem);
		}
			.ticket_item ul li .images img {
				width: 100px;
				height: 90px;
				object-fit: cover;
				object-position: center;
				cursor: zoom-in;
				border-radius: 4px;
			}

		.ticket-details {
			display: block;
			margin-bottom: 1.5rem;
			width: 100%;
		}

		.ticket-details--align {
			align-items: baseline;
			display: flex;
			flex-wrap: wrap;
			gap: 1rem;
		}

		.ticket-details--align > b {
			flex: 0 0 15rem;
		}

		.ticket-details--long > b {
			flex: 0 0 24rem;
		}

		.ticket-details__attributes {
			display: grid;
			gap: 1rem;
		}
		
		.ticket-details:last-child {
			margin-bottom: 0;
		}

		.ticket-details__parts {
			display: grid;
			flex: 0 1 100%;
			gap: 1.5rem;
		}

		.ticket-details__engineers {
			align-items: flex-start;
			display: grid;
			gap: 2rem;
			grid-template-columns: 1fr auto 1fr;
		}

		.ticket-details__engineers--full {
			grid-template-columns: 1fr;
		}

		.ticket-details__or {
			padding-bottom: 1rem;
		}

		.c-engineer-selection {
			display: grid;
			gap: 1rem;
		}

		.ticket-details__engineer {
			display: grid;
			font-size: 1.4rem;
			gap: 0.5rem;
		}
		
		.ticket-details__engineer select,
		.ticket-details__engineer input {
			line-height: normal;
			padding: 1rem;
		}

		.ticket-details__engineer select {
			max-width: 25rem;
		}


		.ticket-details__engineer:has(*:disabled) {
			opacity: 0.4;
		}

		.ticket-details__engineer input::placeholder {
			color: grey;
		}

		.ticket-details__part {
			align-items: center;
			display: flex;
			gap: 1rem;
			flex-wrap: wrap;
		}

		.ticket-details__part textarea {
			flex-basis: 100%;
		}

		.ticket-details label {
			/* color: var(--theme_color, var(--default-theme-color)); */
			margin-right: 10px;
		}
		.ticket-details label:hover { filter: brightness(0.9); }
		.ticket-details label input { display: none; }
		.filechosen { font-size: 11px; color: #fff; display: none;}
		.asset_images { display: flex; flex-wrap: wrap; gap:10px;}
		.asset_images:not(:empty) { margin: 10px 0; }
		.asset_images img {
			width: 80px;
			height: 70px;
			object-fit: cover;
			object-position: center;
			cursor: zoom-in;
			border-radius: 4px;
		}

		.ticket_item ul li b:first-of-type, .ticket_item.service-history ul li b { color: var(--theme_color, var(--default-theme-color)); }
		.ticket_item ul li .tick {
			position: absolute;
			right: calc(0.5vw + 0.5rem);
			top: calc(0.5vw + 0.5rem);
			font-size: 30px; font-size: 3.0rem;
			color: lime;
		}

		.ticket_item > div b { display: block; margin-bottom: 0.25em; }

.hasDatepicker {
	background-image: url(/images/calendar.svg);
    background-position: right 0.75em center;
    background-size: auto 1.75em;
    background-repeat: no-repeat;
}

.ticket-number {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.ticket-description {
	max-width: 50rem;
}

.profile-company-logo {
	width: 32px;
	height: 32px;
	display: flex;
    align-items: center;
}

.profile-company-logo img {
	width: 100%;
}

.deletable-item__icon {
	font-size: 24px;
	cursor: pointer;
	width: 16px;
	justify-content: center;
	align-items: center;
	margin-left: 16px;
	display: inline-block;
}

/**
 * Picker
 */

.picker {
	position: relative;
	animation: fadeIn 1s ease forwards;
	width: 100%;
}

.picker__search-wrapper {
	position: relative;
}

.picker search-input {
	padding-right: 30px;
}

.picker .icon_search {
	display: block;
	position: absolute;
	color: var(--fontColor);
	top: 38px;
	right: 1px;
}

.picker .icon_search::before {
	font-size: 24px;
}

.picker__list {
	background-color: var(--form_background, rgba(43,60,67));
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	left: 0;
	list-style: none;
	margin-top: 0px;
	padding: 0;
	position: absolute;
	width: 100%;
	max-height: 500px;
	overflow: auto;
	z-index: 300;
}

.picker__list li {
	padding: 10px 16px;
	border-bottom: 1px solid #5b747c;
	cursor: pointer;
	text-align: left;
	color: #dfe8ec;
}

.picker__list li:first-child {
	border-radius: 4px 4px 0 0;
}

.picker__list li:last-child {
	border-radius: 0 0 4px 4px;
	border-bottom: 0;
}

.picker__list .active {
	background-color: var(--box_background, rgba(40,46,48,0.5));
}

.picker__selected {
	position: absolute;
	top: 15px;
	list-style: none;
	padding-left: 8px;
	z-index: 10;
}

.picker__selected li {
	display: flex;
	align-items: center;
	padding: 6px 10px;
	background-color: var(--form_border, #5b747c);
	color: var(--fontColor);
}

.picker__remove-selected {
	font-size: 24px;
	cursor: pointer;
	padding-left: 10px;
}


/** 
 * Seller Picker 
 */

.seller-picker {
    position: relative;
    animation: fadeIn 1s ease forwards;
	width: 100%;
}

.seller-picker__search-wrapper {
	position: relative;
}

.seller-picker search-input {
	padding-right: 30px;
}

.seller-picker .icon_search {
	display: block;
    color: #1668b9;
    position: absolute;
	color: var(--fontColor);
    top: 11px;
    right: 1px;
}

.seller-picker__list {
	background-color: var(--form_background, rgba(43,60,67));
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    left: 0;
    list-style: none;
    margin-top: 0px;
    padding: 0;
    position: absolute;
    width: 100%;
	max-height: 500px;
    overflow: auto;
    z-index: 300;
}

.seller-picker__list li {
    padding: 10px 16px;
    border-bottom: 1px solid #5b747c;
    cursor: pointer;
}

.seller-picker__list li:first-child {
    border-radius: 4px 4px 0 0;
}

.seller-picker__list li:last-child {
    border-radius: 0 0 4px 4px;
    border-bottom: 0;
}

.seller-picker__list .active {
	background-color: var(--box_background, rgba(40,46,48,0.5));
}

.seller-picker__selected {
	position: absolute;
    top: -3px;
    list-style: none;
    padding-left: 8px;
}

.seller-picker__selected li {
	display: flex;
	align-items: center;
	padding: 10px 10px;
	background-color: var(--box_border, #5b747c);
	color: var(--fontColor);
}

.seller-picker__remove-selected {
    font-size: 24px;
	cursor: pointer;
	padding-left: 10px;
}

/** 
 * Asset Picker 
 */

 .asset-picker {
    position: relative;
    animation: fadeIn 1s ease forwards;
	width: 100%;
}

.asset-picker__search-wrapper {
	position: relative;
}

.asset-picker search-input {
	padding-right: 30px;
}

.asset-picker__list {
	background-color: var(--form_background, rgba(43,60,67));
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    left: 0;
    list-style: none;
    margin-top: 0px;
    padding: 0;
    position: absolute;
    width: 100%;
	max-height: 500px;
    overflow: auto;
    z-index: 300;
}

.asset-picker__list li {
    padding: 10px 16px;
    border-bottom: 1px solid #5b747c;
    cursor: pointer;
}

.asset-picker__list li:first-child {
    border-radius: 4px 4px 0 0;
}

.asset-picker__list li:last-child {
    border-radius: 0 0 4px 4px;
    border-bottom: 0;
}

.asset-picker__list .active {
	background-color: var(--box_background, rgba(40,46,48,0.5));
}

.asset-picker__selected {
	position: absolute;
    top: -11px;
    list-style: none;
    padding-left: 8px;
}

.asset-picker__selected li {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 5px;
	color: var(--fontColor);
}

.asset-picker .asset-picker__remove-selected {
	font-size: 24px;
    cursor: pointer;
    width: 16px;
    height: 35px;
	padding: 16px;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-left: 16px;
}

/**
 * Ticket Picker
 */

.ticket-picker {
	position: relative;
	animation: fadeIn 1s ease forwards;
	width: 100%;
}

.ticket-picker__search-wrapper {
	position: relative;
}

.ticket-picker search-input {
	padding-right: 30px;
}

.ticket-picker__list {
	background-color: var(--form_background, rgba(43,60,67));
	border-radius: 4px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
	left: 0;
	list-style: none;
	margin-top: 0px;
	padding: 0;
	position: absolute;
	width: 100%;
	max-height: 500px;
	overflow: auto;
	z-index: 300;
}

.ticket-picker__list li {
	padding: 10px 16px;
	border-bottom: 1px solid #5b747c;
	cursor: pointer;
}

.ticket-picker__list li:first-child {
	border-radius: 4px 4px 0 0;
}

.ticket-picker__list li:last-child {
	border-radius: 0 0 4px 4px;
	border-bottom: 0;
}

.ticket-picker__list .active {
	background-color: var(--box_background, rgba(40,46,48,0.5));
}

.ticket-picker__selected {
	position: absolute;
	top: -8px;
	list-style: none;
	padding-left: 8px;
}

.ticket-picker__selected li {
	display: flex;
	width: 100%;
	align-items: center;
	padding: 5px;
	color: var(--fontColor);
}

.ticket-picker .ticket-picker__remove-selected {
	font-size: 24px;
	cursor: pointer;
	width: 16px;
	height: 35px;
	padding: 16px;
	line-height: normal;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: 16px;
}


/** 
 * Product Picker 
 */

 .product-picker {
    position: relative;
    animation: fadeIn 1s ease forwards;
	width: 100%;
}

.product-picker__search-wrapper {
	position: relative;
}

.product-picker search-input {
	padding-right: 30px;
}

.product-picker__list {
	background-color: var(--form_background, rgba(43,60,67));
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    left: 0;
    list-style: none;
    margin-top: 0px;
    padding: 0;
    position: absolute;
    width: 100%;
	max-height: 500px;
    overflow: auto;
    z-index: 300;
}

.product-picker__list li {
    padding: 10px 16px;
    border-bottom: 1px solid #5b747c;
    cursor: pointer;
}

.product-picker__list li:first-child {
    border-radius: 4px 4px 0 0;
}

.product-picker__list li:last-child {
    border-radius: 0 0 4px 4px;
    border-bottom: 0;
}

.product-picker__list .active {
	background-color: var(--box_background, rgba(40,46,48,0.5));
}

.product-picker__selected {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
    list-style: none;
    padding-left: 0;
}

.product-picker__selected li {
	display: inline-flex;
	width: auto;
	align-items: center;
	padding: 5px 10px;
	color: var(--fontColor);
	margin-bottom: 10px;
}

.product-picker .product-picker__remove-selected {
	font-size: 24px;
    cursor: pointer;
    width: 16px;
    height: 35px;
	padding: 16px;
    line-height: normal;
    display: flex;
    justify-content: center;
    align-items: center;
	margin-left: 16px;
}


.resources {
	display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: stretch;
    margin-top: 20px;
}

.resources__item {
	display: flex;
    background-color: var(--box_background, rgba(40,46,48,0.5));
    overflow: hidden;
    position: relative;
    border-radius: var(--borderRadius);
    text-decoration: none;
    border: 1px solid var(--box_border, #5b747c);
    border-color: var(--box_border, #5b747c);
    flex-direction: column;
    align-items: center;
    width: calc(33% - 20px);
    margin-bottom: 20px;
	padding: 20px;
}

.resources__image {
	width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
}

.resources__image img {
	max-width: 150px;
}

.resources__file {
	position: relative;
}

.resources__play {
    position: absolute;
    left: calc(50% - 32px);
    top: calc(50% - 32px);
    width: 64px;
    height: 64px;
}

.resources__play svg {
	color: var(--fontColor);
	animation: 1s ease all;
}

.resources__play svg:hover {
	color: var(--theme_color, var(--default-theme-color));
}

.resources__play svg path {
	box-shadow: 0px 10px 15px -3px rgba(0,0,0,0.1);
	-webkit-filter: drop-shadow( 12px 18px 24px rgba(0, 0, 0, .9));
	filter: drop-shadow( 12px 18px 24px rgba(0, 0, 0, .9));
}

/** 
 * Tabs
 */

.tabs {
	border-bottom: 1px solid var(--box_border, #5b747c);
    margin: 15px 0;
	padding-left: 0px;
    display: flex;
    list-style: none;
}

.tabs__item {
	margin-right: 4px;
}

.tabs__item a {
	color: var(--theme_color, var(--default-theme-color));
	background-color: var(--box_background, rgba(40,46,48,0.5));
	border-color: var(--box_border, #5b747c);
	text-decoration: none;
}

.tabs__item > a:hover,
.tabs__item.active a {
	color: var(--fontColor);
	background-color: var(--theme_color, var(--default-theme-color));
	border-color: var(--theme_color, #5b747c);
	text-decoration: none;
}

.tabs__item > a {
	margin-right: 2px;
	line-height: 1.6;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0;
	padding: 10px 15px;
	cursor: pointer;
	display: flex;
	margin-bottom: -1px;
	color: var(--navigation_text, #fff)
}

.maintenance-calendar__event .fc-daygrid-event-dot {
	border-color: #5b747c;
}

.maintenance-calendar__event--pending .fc-daygrid-event-dot {
	border-color: #5b747c;
}

.maintenance-calendar__event--overdue .fc-daygrid-event-dot {
	border-color: red;
}

.maintenance-calendar__event--completed .fc-daygrid-event-dot {
	border-color: green;
}

.l-container {
	margin: 0 auto;
	max-width: 250rem;
	padding-left: var(--contentPaddingX);
	padding-right: var(--contentPaddingX);
}

.l-container--thin, .l-grid--thin {
	max-width: 85rem;
}

.l-container--medium {
	max-width: 175rem
}

.l-grid--thin {
	margin: 0 auto;
}

.l-feedback {
	grid-column: 1 / -1;
}

.l-grid {
	align-items: flex-start;
	display: grid;
	gap: 1rem;
}

.l-grid__actions {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.l-grid__nav {
	background-color: var(--layer-2-bg);
	border-bottom: 1px solid var(--box_border, #383838);
    top: 0;
    left: var(--sidebar-width);
    right: 0;
	z-index: 4;
}

.rtl .l-grid__nav {
	left: 0;
	right: var(--sidebar-width);
}

@media (min-width: 900px) {
	.l-grid__nav {
		position: fixed;
	}
}

.l-grid__nav-banner {
	background-color: var(--layer-2-bg);
	border-bottom: 1px solid var(--box_border, #383838);
	height: var(--bannerHeight);
	overflow: hidden;
	padding: 1rem var(--contentPaddingX);
}

.l-grid__nav-marquee {
	--gap: 5rem;
	display: flex;
	gap: var(--gap);
}
  
.l-grid__nav-marquee ul {
	list-style: none;
	flex-shrink: 0;
	padding: 0;
	min-width: 100%;
	display: flex;
	margin: 0;
	align-items: center;
	gap: var(--gap);
  
	animation: scroll 25s linear infinite;
}

@media (max-width: 899px) {
	.l-grid__nav-banner {
		display: none;
	}
}
  
.l-grid__nav-marquee:hover ul {
	animation-play-state: paused;
}
  
@keyframes scroll {
	to {
	  transform: translateX(calc(-100% - var(--gap)));
	}
}

.l-grid__nav-marquee-item {
	display: flex;
	gap: 0.5rem;
}

.l-grid__nav-container {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding-bottom: 1rem;
	padding-top: 1rem;
	height: var(--navHeight);
}

.l-grid__title-icon {
	max-width: 5rem;
}

@media (min-width: 900px) {
	.l-grid {
		gap: 2rem;
	}
}

@media (min-width: 1500px) {
	.l-grid {
		grid-template-columns: 1fr 1.75fr;
		gap: 3rem;
	}

	.l-grid--full-width {
		grid-template-columns: 1fr;
	}
}

.l-grid__sidebar {
	height: 100%;
}

.l-grid__sidebar-inner, .l-grid__main {
	display: grid;
	gap: 2rem;
}

.l-grid__main--sticky {
	position: sticky;
    top: 0;
}

.l-grid__footer {
	grid-column: 1 / -1;
}

.l-grid__title {
	align-items: center;
	display: flex;
	gap: 2rem;
	font-size: 1.6rem;
	margin-bottom: 0;
}

@media (min-width: 1700px) {
	.l-grid__title {
		font-size: 1.8rem;
	}
	.l-grid__sidebar-inner {
		position: sticky;
		top: var(--contentOffsetTop);
	}
}

.l-grid__title-icon svg {
	display: block;
}

.l-grid__breadcrumb {
	align-items: center;
	color: var(--fontColor);
	display: flex;
	font-size: 1.6rem;
	gap: 1rem;

    font-weight: bold;
    text-decoration: none;
}

.l-grid__breadcrumb-icon {
	color: var(--theme_color, var(--default-theme-color));
	max-width: 2rem;
}

.l-grid__item--full-width {
	grid-column: 1 / -1;
}

.c-data-list {
	display: grid;
	gap: 0.5rem;
	list-style: none;
	font-size: 1.4rem;
	margin: 0;
	padding-left: 0;
}

@media (min-width: 1700px) {
	.c-data-list {
		font-size: 1.6rem;
	}
}

.c-data-list__title {
	font-size: inherit;
    font-weight: bold;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
}

.c-data-list__external-icon {
	height: 2rem;
	width: 2rem;
}

.c-data-list__item {	
    align-items: flex-start;
    display: flex;
	font-size: inherit;
    flex-wrap: wrap;
    column-gap: 0.5rem;
}

.c-data-list__key {
	align-items: center;
	display: flex;
}

.c-data-list__item--between {
	border-bottom: 1px solid var(--box_border, #5b747c);
	gap: 1rem;
	justify-content: space-between;
	padding-bottom: 0.5rem;
}

.c-data-list__item--between .c-data-list__key {
	max-width: 60%;
}

.c-data-list__item--between:first-of-type, .c-data-list__item--between:only-child {
	padding-top: 0.5rem;
}

.c-data-list__item--between:last-of-type {
	border-bottom: none;
}

.c-data-list__item--between:only-child {
	border-bottom: 1px solid var(--box_border, #5b747c);
	border-top: 1px solid var(--box_border, #5b747c);
}

.c-data-list__data {
    align-items: center;
	display: flex;
    gap: 0.5rem;
}

.c-data-list__data--bold {
	font-weight: bold;
}

.c-data-list__data--success {
	color: var(--colorSuccess);
}

.c-data-list__data--warning {
	color: var(--colorWarning);
}

.c-data-list__data--error {
	color: var(--colorError);
}

.lot_status--stacked {
	gap: 1rem;
	flex-direction: column;
	justify-content: flex-start;
	margin-bottom: 0;
}

.c-labelled-icon {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin: 0 !important;
	padding: 0 !important;
	text-align: left !important;
	/* temp imps until legacy specificity is sorted out */

}

.c-labelled-icon .icon {
	margin: 0;
}

.c-divider {
	border: 0;
	border-bottom: 1px solid var(--box_border, #5b747c);
	width: 100%;
}
.c-divider--spacer {
	margin-top: 1rem;
	margin-bottom: 1rem;
}

@media (min-width: 1700px) {
	.c-divider--spacer {
		margin-top: 2rem;
		margin-bottom: 2rem;
	}
}

.c-process {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: space-between;
	min-height: 5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.c-process:not(:last-child) {
	border-bottom: 1px solid var(--box_border, #5b747c);
}

.c-process .process_check {
	margin: 0;
}

.c-process__title {
	font-size: 1.6rem;
	margin: 0;
}

.c-process__status, .c-process__actions {
	align-items: center;
	display: flex;
	font-size: 1.4rem;
	gap: 1rem;
}

.c-process__upload-wrapper {
	/* default */
	display: none;
	flex: 100%;
}

.c-process__upload {
	display: grid;
	gap: 1rem;
    justify-content: flex-end;
}

.c-buttons {
	display: flex;
	gap: 1rem;
    grid-template-columns: 1fr 1fr;
    text-align: center;
}

.c-buttons--between {
	justify-content: space-between;
}

.c-buttons--end {
	justify-self: flex-end;	
	justify-content: flex-end;
}

.c-button {
    /* background-color: var(--theme_color, var(--default-theme-color)); */
	background-color: var(--theme_color, var(--default-theme-color));
	color: var(--theme_color_contrast, #fff);

	appearance: none;
    border-radius: 3px;
    border: 0;
    cursor: pointer;
    font-weight: bold;
    font-size: 1.5rem;
	display: inline-block;
    outline: none;
    padding: 0.5rem 1rem;
	text-align: center;
    text-transform: uppercase;
    text-decoration: none;
    -webkit-appearance: none;

	/* overriding specific ticket-details label */
	margin-right: 0 !important;
}

.c-button[disabled],
.c-button--disabled {
	opacity: 0.5;
	pointer-events: none;
}

.c-button__icon {
	max-width: 2rem;
}

.c-button--secondary {
	background-color: var(--navigation_highlight, #0b55ff);
	color: #fff;
}

.c-button--tertiary {
	background-color: var(--header_logout_background, #037000);
}

.c-button--full-width {
	width: 100%;
}

.c-button--ghost {
	background-color: transparent;
	color: currentColor;
}

.c-button--close {
	padding-right: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.c-button--icon {
	background-color: var(--layer-1-bg);
	border-radius: 100%;
	padding: 0.5rem;
}

.c-button--start {
	justify-self: flex-start;
}

.c-button--end {
	justify-self: flex-end;
}

.c-button--contrast {
	background-color: var(--form_background, rgba(40,46,48));
	color: var(--fontColor);
}

.c-expanding-box {
	--paddingX: 2rem;
	--paddingY: 1.3rem;

    background-color: var(--layer-2-bg);
	box-shadow: 0px 8px 12px 1px rgba(0, 0, 0, 0.03);
	border-radius: var(--borderRadius);
    color: var(--box_text, #dfe8ec);
	display: flex;
	flex-direction: column;
	min-width: 0;
    position: relative;

	scroll-padding-top: calc(var(--navHeight) * 3);
	scroll-margin-top: calc(var(--navHeight) * 3);
}

@media (min-width: 1700px) {
	.c-expanding-box {
		--paddingY: 1.6rem;
	}
}

.c-expanding-box--flat {
	--borderRadius: 0;
}

.c-expanding-box--flat .c-expanding-box__header {
	border-top: 0;
}


.c-expanding-box--flat:nth-of-type(2) .c-expanding-box__header {
	border-top: 1px solid var(--box_border, #5b747c);
}

.c-expanding-box--disabled {
	opacity: 0.75;
}

.c-expanding-box--success .c-expanding-box__header {
	border-color: var(--colorSuccess);
}

.c-expanding-box--warning .c-expanding-box__header {
	border-color: var(--colorWarning);
}

@media (min-width: 900px) {
	.c-expanding-box {
		--paddingX: 2rem;
	}

	.c-expanding-box .c-expanding-box {
		--paddingY: 1.2rem;
		--paddingX: 2rem;
	}

	.c-expanding-box .c-expanding-box .c-expanding-box__header {
		top: calc(var(--navHeight) + 5.3rem);
	}
}

@media (min-width: 1700px) {
	.c-expanding-box {
		--paddingX: 3rem;
	}

	.c-expanding-box .c-expanding-box {
		--headingFontSize: 1.5rem;
	}
}

.c-expanding-box__icon,
.c-alert__icon {
	height: 2rem;
	width: 2rem;
}

.c-expanding-box__header {
    align-items: center;
	background-color: var(--layer-3-bg);
	border: 1px solid var(--box_border, #5b747c);
	border-radius: var(--borderRadius);
	cursor: pointer;
	display: flex;
	gap: 2rem;
    justify-content: space-between;
	padding: var(--paddingY) var(--paddingX);
	position: sticky;
	top: calc(var(--navHeight) - 0.4rem);
	z-index: 2;
	
	border-top-left-radius: var(--borderRadius);
	border-top-right-radius: var(--borderRadius);
}

.c-expanding-box__header--dashed {
	border-style: dashed;
}

.c-expanding-box__header.open {
	border-bottom: 1px solid var(--box_border, #5b747c);
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

.c-expanding-box__header.open .c-expanding-box__action--expand { transform: rotate(-180deg); }

.c-expanding-box__actions {
	align-items: center;
	display: flex;
	flex-shrink: 0;
	gap: 1rem;
}

.c-expanding-box__action {
	appearance: none;
	border: none;
	background: none;
	color: currentColor;
	border-radius: 50%;
	cursor: pointer;
	display: flex;
	flex-shrink: 0;
	justify-content: center;
	padding: 0;
	position: relative;
	transition: transform 0.25s linear;
	height: 2.5rem;
	width: 2.5rem;
	
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
}

.c-expanding-box__action--expand {
	background-color: var(--theme_color, var(--default-theme-color));
	color: var(--theme_color_contrast, #fff);
}

.c-expanding-box__action[disabled] {
	cursor: not-allowed;
	opacity: 0.5;
}

.c-expanding-box__content {
	border-bottom: 1px solid var(--box_border, #5b747c);
	border-left: 1px solid var(--box_border, #5b747c);
	border-right: 1px solid var(--box_border, #5b747c);
	border-bottom-left-radius: var(--borderRadius);
	border-bottom-right-radius: var(--borderRadius);
	display: none;
	padding: var(--paddingY) var(--paddingX);
}

.c-expanding-box__content.open {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	height: 100%;
	justify-content: space-between;
}

.c-expanding-box__title {
	font-size: var(--headingFontSize);
    font-weight: bold;
    line-height: 1.1em;
    color: var(--fontColor);
    display: flex;
    align-items: center;
	column-gap: 1.5rem;
	row-gap: 1rem;
	flex-wrap: wrap;
	margin: 0;
	max-width: 60%;
}

@media (max-width: 1599px) {
	.l-grid--thin .c-expanding-box__title {
		display: grid;
	}

	.l-grid--thin .c-expanding-box__subtitle {
		/* max-width: 40rem; */
	}
}

@media (max-width: 899px) {
	.c-expanding-box__header, .c-expanding-box__title {
		align-items: flex-start;
		flex-direction: column;
	}

	.c-expanding-box__header--between-mobile {
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
	}

	.c-expanding-box__actions {
		justify-content: flex-end;
    	width: 100%;
	}
}

.c-expanding-box__subtitle {
	font-size: calc(var(--headingFontSize) - 0.25rem);
	line-height: 1.6;
	opacity: 0.8;
}

.l-grid__main .table--sticky-headers thead th {
	top: calc(var(--navHeight) - 0.1rem);
}
.c-expanding-box .table--sticky-headers thead th {
	top: calc(var(--navHeight) + 5.4rem);
	z-index: 1;
}

.c-heading {
	font-weight: 600;
	margin-bottom: 1.5rem;
}

.c-heading--3 {
	font-size: 1.9rem;
}

.c-heading--4 {
	font-size: 1.6rem;
}

.c-equipment {
	display: grid;
	gap: 1.5rem;
}

.l-box, .c-benefit-card {
	background-color: var(--layer-2-bg);
    border: 1px solid var(--box_border, #5b747c);
    border-color: var(--box_border, #5b747c);
    border-radius: var(--borderRadius);
    color: var(--box_text, #dfe8ec);
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
    padding: 2rem;
}

.l-box__top {
	display: grid;
}

.c-expanding-box .l-box {
	background-color: var(--layer-3-bg);
}

.l-box__header {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
}

.l-box__footer {
	margin-top: 2rem;
}

.l-box__heading {
	font-size: var(--headingFontSize);
	font-weight: bold;
	line-height: 1.1em;
	color: var(--fontColor);
	display: flex;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
}

.c-equipment__list {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
}

.c-equipment__list .c-data-list {
	margin: 0;
}

.c-ticket-stats {
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax(140px, 1fr) );
	gap: 1.5rem;
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.c-ticket-stat {
	border: 1px solid var(--box_border, #5b747c);
    border-color: var(--box_border, #5b747c);
    border-radius: var(--borderRadius);
	background-color: var(--layer-3-bg);
	display: flex;
	flex-direction: column;
	min-height: 13rem;
	justify-content: center;
	padding: 2rem 1rem;
	text-align: center;
}

.c-ticket-stat__title {
	font-weight: normal;
	font-size: 1.4rem;
	margin-bottom: 1.5rem;
}

.c-ticket-stat__unit {
	font-size: 3rem;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.c-paragraph--lead {
	font-size: 1.5rem;
}

.c-paragraph--narrow {
	max-width: 35rem;
}

.c-action {
	align-items: center;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.c-action__description {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.c-action__title {
	flex-shrink: 0;
	font-size: 1.6rem;
	margin: 0;
}

.c-action__icon {
	height: 2.5rem;
}

.form-header {
	align-items: center;
	display: flex;
	justify-content: space-between;
}

.form-header__filters {
	align-items: flex-end;
	display: flex;
	gap: 1rem;
	flex-wrap: wrap;
}

/* TODO: Temporary classes – mainly forms could do with simplifying */
.t-grid {
	display: grid;
}

.t-grid .c-button {
	margin-top: 1rem;
}

.t-mb {
	margin-bottom: 1.8rem;
}

[data-form-wrapper] {
	position: relative;
}

@media (max-width: 1900px) {
	.u-hide-sm-desktop {
		display: none;
	}
}

.u-color-faded {
	opacity: 0.75;
}

.u-color-error {
	color: var(--colorError);
}

.u-color-success {
	color: var(--colorSuccess);
}

.u-color-success-dark {
	color: green;
}

.u-mb-0 {
	margin-bottom: 0;
}

.u-ellipsis {
	overflow: hidden;
    max-width: 17rem;
    text-overflow: ellipsis;
	white-space: nowrap;
}

.u-flex {
	display: flex;
	gap: 0.5rem;
}

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

.u-font-bold {
	font-weight: bold;
}

.u-col-span-full {
	grid-column: 1 / -1;
	flex-basis: 100%;
}

.u-icon {
	color: var(--fontColor);
	display: flex;
	flex-shrink: 0;
	width: 2rem;
}

.u-icon--disabled {
	opacity: 0.25;
}

.u-icon--small {
	width: 1.5rem;
}

.u-icon svg {
	height: auto;
	max-width: 100%;
}

.u-opacity-90 {
	opacity: 0.9;
}

.u-small {
	font-size: 1.3rem !important;
}

.c-notes {
	display: grid;
	gap: 1.5rem;
	justify-items: flex-start;
	margin-bottom: 1rem;
}

.c-notes__footer {
	--radius: 3rem;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 1rem;
}

.c-notes__footer-reply {
	display: none;
}

.c-notes__footer-reply--active {
	background: var(--layer-3-bg);
	grid-column: 1 / -1;
	display: grid;
	gap: 0.5rem;
	padding: 1.5rem 2rem;
}

.c-notes__footer-reply-close {
	appearance: none;
	background-color: var(--layer-2-bg);
	border: none;
	outline: none;
	cursor: pointer;
	position: absolute;
	top: 1rem;
	right: 1rem;
	max-width: 3rem;
}

.c-notes__button {
    align-items: center;
	border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
    display: flex;
    gap: 1rem;
    padding: 0 1.5rem 0 2rem;
}

.c-notes__button svg {
	height: 2.5rem;
	width: 2.5rem;
}

.c-notes__textarea {
    background-color: var(--layer-3-bg);
    border: 1px solid var(--box_border, #5b747c);
    border-radius: var(--borderRadius) 0 0 var(--borderRadius);
    color: var(--fontColor);
    font-size: 1.5rem;
    padding: 1.5rem 2rem;
	resize: vertical;
    width: 100%;
}

.c-notes__textarea:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.c-notes__textarea::placeholder {
	color: var(--fontColor);
	opacity: 0.7;
}

.c-note-wrapper {
	--noteBorderWidth: 1px;
	display: grid;
	gap: 1.5rem;
    grid-template-columns: auto 1fr;
}

.c-note-wrapper--disabled {
	opacity: 0.4;
	pointer-events: none;
}

.c-note-wrapper--start .c-note {
	border-left: var(--noteBorderWidth) solid var(--account-color, rgba(40,46,48,0.5));
	border-top-right-radius: var(--radius);
	border-bottom-right-radius: var(--radius);
}

.c-note-wrapper--end {
	grid-template-columns: 1fr auto;
	justify-self: flex-end;
}

.c-note-wrapper--end .c-note__avatar-wrapper {
	grid-column: 2;
    grid-row: 1;
}

.c-note-wrapper--end .c-note__reply-wrapper {
	grid-column: 1;
}

.c-note-wrapper--end .c-note {
	border-right: var(--noteBorderWidth) solid var(--account-color, rgba(40,46,48,0.5));
	border-top-left-radius: var(--radius);
	border-bottom-left-radius: var(--radius);
}

.c-note-wrapper--center {
	border-left: var(--noteBorderWidth) solid var(--account-color);
	justify-self: center;
	max-width: 75%;
	position: relative;
	text-align: center;
}

.c-note-wrapper--center .c-note {
	padding: 0.5rem 1rem;
}

.c-note-wrapper--center + .c-note-wrapper--center {
	margin-top: 0;
}

.c-note-wrapper--center .c-note__message {
	font-size: 1.3rem;
	padding-right: 0;
	margin-bottom: 0 !important;
}

.c-note__avatar {
	border-radius: 100%;
	height: 4.5rem;
	object-fit: cover;
	margin-bottom: 0.5rem;
	width: 4.5rem;
}

.c-note__xp {
	align-items: center;
	display: flex;
	justify-content: center;
	gap: 0.25rem;
}

.c-note__xp svg {
	color: #FFF59A;
	max-width: 1rem;
}

.c-note__xp p {
	font-size: 1rem;
}

.c-note {
	--radius: var(--borderRadius);
	background-color: var(--layer-3-bg);
	display: grid;
	gap: 0.5rem;
	max-width: 60rem;
	min-width: 30rem;
	padding: 1rem 1.5rem;
	scroll-padding-top: 15rem;
	scroll-margin-top: 15rem;
}

.c-note__reply-wrapper {
	display: flex;
	align-items: center;
	gap: 1rem;
	grid-column: 2;
	justify-content: flex-end;
}

.c-note__reply-info {
	margin-bottom: 0;
	opacity: 0.4;
}

.c-note__reply-button {
	appearance: none;
	border: none;
	outline: none;
	font-size: 1.4rem;
	text-transform: uppercase;
	font-weight: bold;
	justify-self: flex-start;
	cursor: pointer;

	border-radius: 0.25rem;
	background: linear-gradient(90deg, #ff2252, #ff2285);
	display: grid;
	padding: 0.6rem 1.2rem;
	place-items: center;
}

.c-note-wrapper--success { border-color: #00c368; }
.c-note-wrapper--success .c-note { background: linear-gradient(90deg, #01362e, #0f3443); }
.c-note-wrapper--success .c-note__message { color: var(--fontLight); }

.c-note-wrapper--fancy { border-color: #fe50a8; }
.c-note-wrapper--fancy .c-note { background: linear-gradient(90deg, #230136, #430f3a); }
.c-note-wrapper--fancy .c-note__message { color: var(--fontLight); }

.c-note-wrapper--info { border-color: var(--theme-color-info); }
.c-note-wrapper--info .c-note { background: linear-gradient(90deg, #122547, #2a1941); }
.c-note-wrapper--info .c-note__message { color: var(--fontLight); }

.c-note-wrapper--warning { border-color: var(--colorWarning); }
.c-note-wrapper--warning .c-note { background: linear-gradient(90deg, #3b3615, #3a2b14); }
.c-note-wrapper--warning .c-note__message { color: var(--fontLight); }

.c-note__file {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
}

.c-note__icon-and-text {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.c-note__file-meta {
	text-align: left;
}

.c-note__file-header {
	align-items: center;
	display: flex;
	gap: 1rem;
	text-align: left;
	margin-bottom: 0.5rem;
}

.c-note__file-header hr {
	background-color: grey;
	border: none;
	height: 1px;
	width: 100%;
}

.c-note__file-header p {
	flex-shrink: 0;
	font-size: 1.3rem;
	font-weight: bold;
}

.c-note__icon {
	max-width: 5rem;
}

.c-note__icon svg {
	display: block;
}

.c-note__icon--download {
	color: var(--theme_color, var(--default-theme-color));
	margin-left: 1rem;
	height: 3rem;
	width: 3rem;
}

.c-note__header {
	align-items: center;
	display: flex;
	gap: 2rem;
	font-size: 1.3rem;
	font-weight: bold;
	justify-content: space-between;
	margin-bottom: 0 !important;
}

.c-note__name {
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 0 !important;
	max-width: 27rem;
}

.c-user-role {
	font-size: 1.1rem;
	font-weight: normal;
	margin-bottom: 0;
	position: relative;
}

.c-note__message {
	font-size: 1.5rem;
	padding-right: 3rem;
	margin-bottom: 2rem !important;
	max-width: 50rem;
	word-break: break-word;
}

.c-note__message-preview {
	background-color: var(--layer-2-bg);
	margin-bottom: 1rem;
	opacity: 0.5;
	padding: 1rem;
}

.c-note__mention {
	color: var(--colorWarning);
	font-weight: bold;
}

.c-note__footer {
	display: grid;
}

.c-note__footer--between {
	display: flex;
	justify-content: space-between;
}

.c-note__time {
	justify-self: flex-end;
	font-size: 1.2rem;
	margin-bottom: 0 !important;
}

.c-note__toggle-map {
	appearance: none;
	background: none;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: 1.2rem;
	text-decoration: underline;
	padding: 0;
	margin: 0;
}

.c-note__map {
	border: none;
	width: 100%;
	height: 10vw;
}

.l-equipment {
	--equipment-content: 50rem;

	align-items: flex-start;
	grid-template-columns: repeat(6, 1fr);
	gap: 2rem;
}

.l-equipment + .l-equipment {
	border-top: 1px solid var(--box_border, #5b747c);
	padding-top: 3rem;
	margin-top: 3rem;
}

.l-equipment__logo {
	border: 1px solid var(--box_border, #5b747c);
	background-color: var(--theme_color);
	border-radius: 100%;
	height: 4rem;
	width: 4rem;
	object-fit: cover;
	flex: 0 0 auto;
}

.l-equipment__header {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin-bottom: 2rem;
}

.l-equipment__meta {
	align-items: baseline;
	display: flex;
	gap: 0.5rem;
}

.l-equipment__description {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-bottom: 0.5rem;
}

.l-equipment__icon {
	align-items: center;
	font-size: 1.5rem;
	text-decoration: none;
	display: flex;
    gap: 0.75rem;
}

.l-equipment__icon svg {
	height: 3rem;
	width: 3rem;
}

.l-equipment__images {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
	gap: 1rem;
	margin-left: auto;
	margin-right: auto;
	max-width: 60rem;
}

@media (max-width: 899px) {
	.l-equipment__images > section:first-child {
		grid-column: 1 / -1;
	}
}

.l-equipment__image-wrapper {
	aspect-ratio: 1 / 1;
	cursor: pointer;
	position: relative;
}

.l-equipment__image-wrapper--audio,
.l-equipment__image-wrapper--video {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	border: 1px solid var(--box_border, #5b747c);
}

.l-equipment__image-wrapper--audio:after,
.l-equipment__image-wrapper--video:after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 20px 0 20px 30px;
	border-color: transparent transparent transparent var(--fontColor);
}

.c-upload {
	appearance: none;
	aspect-ratio: 1 / 1;
    align-items: center;
    border: 1px dashed var(--box_border, #5b747c);
    background-color: var(--layer-2-bg);
    color: var(--box_text);
	cursor: pointer;
    display: flex;
	gap: 0.5rem;
	font-size: 1.5rem;
    flex-direction: column;
    justify-content: center;
    min-height: 3rem;
    min-width: 3rem;
	padding: 4rem 1rem;
}

.c-upload--inline {
	aspect-ratio: auto;
	flex-direction: row;
	font-size: 1.6rem;
}

.c-upload--inline .u-icon {
	width: 2.5rem;
}

.c-upload--disabled {
	cursor: auto;
	opacity: 0.5;
}

.c-upload:hover, .c-upload--active {
	border: 1px solid var(--box_border, #5b747c);
	background-color: var(--activeColor);
}

.c-upload--active {
	/* opacity: 0.4; */
	pointer-events: none;
}

.c-upload:only-child {
	aspect-ratio: auto;
	grid-column: 1 / -1;
}

.c-upload__icon {
	height: 6rem;
	width: 6rem;
}

.l-equipment__image {
    object-fit: cover;
	height: 100%;
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
}

.l-equipment__image--enlarged {
	max-height: 77vh;
	max-width: 100%;
	position: static;
}

.l-equipment__footer {
	margin-top: 1.5rem;
}

.l-equipment__footer, .l-equipment__header {
	max-width: var(--equipment-content);
	margin-left: auto;
	margin-right: auto;
}

.l-equipment__age, .l-equipment__serial, .l-equipment__title {
	margin: 0 !important;
}

.l-equipment__title {
	font-weight: bold;
	font-size: 1.5rem;
}

.c-status {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.c-status--bold {
	font-weight: bold;
}

.c-status__icon {
	--account-color: lightgreen;
	background-color: var(--account-color);
	border-radius: 3px;
	height: 1rem;
	flex-shrink: 0;
	width: 1rem;
}

.c-status__icon--success {
	background-color: var(--colorSuccess);
}

.c-status__icon--fancy {
	background-color: #6024ff;
}

.c-status__icon--warning {
	background-color: var(--colorWarning);
}

.c-status__icon--empty {
	background-color: var(--colorEmpty);
}

.l-actions {
	display: grid;
	gap: 1rem;
}

@media (min-width: 900px) {
	.l-actions {
		grid-template-columns: repeat(3, 1fr);
	}
}

.c-modal__trigger {
	appearance: none;
	background: transparent;
	cursor: pointer;
	display: block;
	border: none;
	padding: 0;
	position: relative;
	margin: 0;
	width: 100%;
}

.c-modal__trigger[disabled] {
	opacity: 0.5;
	pointer-events: none;
}

.c-modal__trigger:hover .c-modal__icon--open,
.c-modal__trigger:focus .c-modal__icon--open {
	opacity: 1;
}

.c-modal__icon--open {
	color: var(--theme_color_contrast, #ffffff);
	position: absolute;
	pointer-events: none;
	left: 50%;
	bottom: 50%;
	height: 8rem;
	transform: translateX(-50%) translateY(50%);
	transition: opacity 0.2s ease-in-out;
	opacity: 0;
	z-index: 1;
}

.c-modal__trigger-overlay {
	background-color: var(--theme_color);
	opacity: 0;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	transition: opacity 0.2s ease-in-out;
}

.c-modal__trigger-overlay--circle {
	border-radius: 100%;
}

.c-modal__trigger:hover .c-modal__trigger-overlay,
.c-modal__trigger:focus .c-modal__trigger-overlay {
	opacity: 0.8;
}

.c-modal__modal {
	display: none;
	position: fixed;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 4;
	place-items: center;
}

.c-modal__overlay {
	background-color: black;
	position: absolute;
	bottom: 0;
	left: 0;
	height: 100%;
	width: 100%;
	opacity: 0.8;
}

.c-modal__content {
	--text_color_medium: var(--theme_color_contrast, rgba(40,46,48));
	border-radius: 0.5rem;
	background-color: var(--layer-2-bg);
	border: 1px solid var(--box_border, #5b747c);
	overflow-y: auto;
	padding: 2rem 3rem;
	position: relative;
	z-index: 3;
	max-width: 80vw;
	max-height: 90vh;
}

.c-modal__modal--open {
	display: grid;
}

.c-modal__header {
	align-items: center;
	display: flex;
	gap: 10rem;
	justify-content: space-between;
}

.c-modal__footer {
	margin-top: 2rem;
}

.c-modal__divider {
	margin-top: 1rem;
	margin-bottom: 2rem;
}

.c-modal__button {
	appearance: none;
	border: none;
	background: transparent;
	cursor: pointer;
}

.c-modal__icon {
	height: 3rem;
	width: 3rem;
}

.c-modal__title {
	margin: 0;
}

.c-tooltip {
	cursor: help;
	height: 3rem;
	width: 3rem;
}

.c-tooltip--small {
	height: 2rem;
	width: 2rem;
}

.c-notification-wrapper {
	position: relative;
}

.c-notification {
	border-radius: 0.25rem;
	display: grid;
	padding: 0.4rem 0;
	place-items: center;
}

.c-notification--absolute {
	background: linear-gradient(90deg, #ff2252, #ff2285);
    width: 1.6rem;
    position: absolute;
    top: -0.6rem;
    right: -0.7rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    padding: 0;
}

.c-notification--static {
	display: inline-flex;
	position: static;
	transform: translateY(-0.3rem);
}

.c-notification__inner {
	color: var(--colorWarning);
	font-weight: bold;
	font-size: 1.1rem;
	letter-spacing: 0.05rem;
    line-height: 1;
	margin: 0;
	text-transform: uppercase;
}

.l-form {
	--formSpacing: 2rem;
	--itemPadding: 1rem;

	display: grid;
	gap: var(--formSpacing);
	font-size: 1.6rem;
	position: relative;
}

.l-form--disabled::after {
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	backdrop-filter: blur(0.2rem);
	pointer-events: none;
	z-index: 8;
}

.l-form--inline {
	display: flex;
	flex-wrap: wrap;
}

.l-form__fieldset {
	border-color: var(--box_border, #5b747c);
	display: grid;
	gap: var(--formSpacing);
	padding: var(--formSpacing);
}

.l-form__fieldset.complete { border-color: var(--colorSuccess); }
.l-form__fieldset.incomplete { border-color: var(--colorWarning); }

.l-form__fieldset--inline {
	display: flex;
}

.l-form__fieldset--inline-grid {
	grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}

.l-form__actions {
	margin: 0;
	padding: 0;
	border: none;
	z-index: 1;
}

.l-form__actions-wrapper {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
}

.l-form__info {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.l-form__actions--sticky {
	border-top: 1px solid var(--box_border, #383838);
	border-left: 1px solid var(--box_border, #383838);
	background-color: var(--layer-3-bg);
	/* offset padding right slightly to accomodate hubspot widget */
	padding-right: var(--contentPaddingX);
	padding-bottom: 2rem;
	padding-top: 2rem;
	position: fixed;
	bottom: 0rem;
	left: calc(var(--sidebar-width) - 1px);
	right: 0;
	z-index: 3;
}

.l-form__actions--between {
	justify-content: space-between;
}

.l-form__actions[disabled], .l-form__fieldset[disabled] {
	opacity: 0.4;
	pointer-events: none;
}

.l-form__fieldset[disabled] .l-form__item--disabled {
	opacity: 1;
}

.l-form__legend {
	color: var(--fontColor);
	display: flex;
	font-weight: bold;
	gap: 0.75rem;
	padding-left: var(--itemPadding);
	padding-right: var(--itemPadding);
}

.l-form__item {
	display: grid;
	gap: 1rem;
	position: relative;
	z-index: 3;
}

.l-form__item--auto-z-index {
	z-index: auto;
}

.l-form__readonly-icon {
	height: 1.5rem;
    width: 1.5rem;
}

.l-form__item--inline {
	align-items: center;
	display: flex;
}

.l-form__item--end {
	justify-self: flex-end
}

.l-form__item--row-reverse {
	flex-direction: row-reverse;
}

.l-form__item--readonly {
	cursor: not-allowed;
	opacity: 0.8;
}

.l-form__item--readonly label {
	cursor: not-allowed;
}

.l-form__item-search-wrapper {
	display: flex;
	gap: 1rem;
}

.l-form__fieldset--inline .l-form__item {
	flex: 1 1 100%;
}

.l-form__item--disabled {
	opacity: 0.4;
}

.l-form__password-link {
	color: var(--fontColor);
	justify-self: flex-start;
}

.l-form__select {
	-webkit-appearance: none;
    -moz-appearance : none;
	padding: var(--itemPadding) calc(var(--itemPadding) * 4) var(--itemPadding) var(--itemPadding);
	width: 100%;
}

.l-form__select:invalid { color: var(--fontColor); }

.l-form__select[multiple] {
	max-height: 75rem;
}

.l-form__select[multiple] option {
	position: relative;
	padding-left: 2rem;
}

.l-form__select[multiple] option:checked {
	background: var(--theme_color);
	color: var(--theme_color_contrast);
}

.l-form__select[multiple] option:before {
	background: none;
	border: 1px solid var(--fontColor);
	position: absolute;
	content: '';
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.5rem;
	height: 1.5rem;
}

.l-form__select[multiple] option:checked:before {
	content: '\2714';
    font-size: 1.2rem;
    text-align: center;
}

.l-form__select-wrapper {
	position: relative;
}

.l-form__select-icon {
	position: absolute;
	right: calc(var(--itemPadding) / 2);
	height: 3rem;
	width: 3rem;
	top: 50%;
    transform: translateY(-50%);
	pointer-events: none;
}

.l-form__input {
	-webkit-appearance: none;
    -moz-appearance : none;
	appearance: none;
    background-color: var(--layer-3-bg);
    border: 1px solid var(--box_border, #5b747c);
    color: var(--fontColor);
    border-radius: 5px;
	padding: var(--itemPadding);
	width: 100%;
}

.l-form__input--textarea {
	resize: vertical;
}

.l-form__input[readonly] {
	cursor: not-allowed;
}

.l-form__input::placeholder {
	color: var(--fontColor);
	opacity: 0.5;
}

.l-form__input--date {
	-webkit-appearance: auto;
    -moz-appearance : auto;
	appearance: auto;
	width: 100%;
}

.l-form__input--color {
	aspect-ratio: 1 / 1;
    border: 0;
    height: 4rem;
    padding: 0;
    width: auto;
}

.l-form__input--date.datepicker {
	background-image: none;
}

.l-form__input-checkbox-wrapper {
	position: relative;
}

.l-form__input--checkbox {
	-webkit-appearance: none;
    -moz-appearance : none;
	appearance: none;
	cursor: pointer;
	display: block;
	height: 2.5rem;
	width: 2.5rem;
}

.l-form__input-checkmark {
	height: auto;
	display: none;
	pointer-events: none;
	position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}

.l-form__input--checkbox:checked ~ .l-form__input-checkmark {
	display: block;
}

.l-form__input--radio {
	-webkit-appearance: auto;
    -moz-appearance : auto;
	appearance: auto;
	height: 2.5rem;
	width: 2.5rem;
}

.l-form__input--radio .l-form__tooltip {
	height: 2rem;
	width: 2rem;
}

.l-form__label {
	display: flex;
	gap: 0.5rem;
	justify-content: space-between;
}

.l-form__tooltip {
	height: 1.5rem;
	width: 1.5rem;
}

.hide {
	display: none !important;
}

.c-alerts {
	display: grid;
	gap: 1rem;
}

.c-alert {
	border: 2px solid var(--theme-color-info);
	background-color: #00afef80;
	display: grid;
	gap: 1rem;
	padding: 2rem;
	text-align: left;
}

.c-alert a {
	color: var(--fontColor);
}

.c-alert--warning {
	background-color: #ca8c1580;
	border-color: var(--colorWarning);
}

.c-alert--placeholder {
	background-color: #bfbfbf80;
	border-color: var(--colorEmpty);
}

.c-alert--success {
	border-color: var(--colorSuccess);
	background-color: #00800080;
}

.c-alert--error {
	background-color: #e31e2480;
	border-color: var(--colorError);
}

.c-alert--fancy {
	background-color: #2e0d5880;
	border-color: var(--colorFancy);
}

.c-alert--small {
	padding: 1rem;
}

.c-alert__header {
	align-items: center;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.c-alert__header-text {
	align-items: center;
	display: flex;
	gap: 1rem;
}

.c-alert__heading {
	font-size: var(--headingFontSize);
	font-weight: bold;
	margin: 0;
}

.c-alert__link {
	display: block;
    max-width: 2.5rem;
}

.c-pill {
	border: 2px solid var(--theme-color-info);
	background-color: #00afef80;
	border-radius: 5px;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0.15rem 0.5rem;
	text-transform: uppercase;
}

.c-pill--fancy {
	border-color: #6024ff;
	background: linear-gradient(90deg, #111743, #211143);
	color: var(--fontLight);
}

.c-pill--loader {
	padding-left: 2.5rem;
	position: absolute;
    left: 50%;
    bottom: 10rem;
    transform: translateX(-50%);
	z-index: 9;
}

.c-pill--loader-half-viewport {
	position: fixed;
	top: 50%;
	bottom: unset;
}

/* center left from screen after sidebar width */
@media (min-width: 1700px) {
	.c-pill--loader-half-viewport {
		left: calc(50% + 165px);
	}
}

.c-pill--loader::before {
	content: '';
    position: absolute;
    left: 0.5rem;
    width: 1rem;
    height: 1rem;
    border-radius: 50px;
    border: 0.2rem solid grey;
    border-top-color: white;
    animation: loading 1s linear infinite;
}

@keyframes loading {
	0% {
	transform: rotate(0deg);
	}
	100% {
	transform: rotate(360deg);
	}
}

.c-pill--spacing {
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}

.c-pill--warning, .c-pill--amber {
	background-color: #ca8c1580;
	border-color: var(--colorWarning);
}

.c-pill--success, .c-pill--green {
	border-color: var(--colorSuccess);
	background-color: #00800080;
}

.c-pill--error, .c-pill--red {
	border-color: var(--colorError);
	background-color: #e31e2480;
}

.c-pill--empty {
	background-color: #bfbfbf80;
	border-color: var(--colorEmpty);
}

.c-pill--helper {
	cursor: help;
}

.api_logs {

}

.api_logs th,
.api_logs td,
.api_logs td {
	max-width: 100px;
}

.api_logs td,
.api_logs td pre {
	overflow: auto;
	max-height: 500px;
}

.api_logs td.api_logs__cell--json {
	max-width: 250px;
	max-height: 500px;
}

.c-table__time-taken {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: space-between;
}

.c-table__time-taken__sla {
	align-items: center;
	display: flex;
	gap: 0.5rem;
}

.c-table__time-taken-icon {
	cursor: help;
	max-width: 2rem;
}

.c-table__footer {
	display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.c-table-wrapper {
	display: grid;
	gap: 2rem;
}
.c-table__footer .c-button {
	margin-left: auto;
}

@media (max-width: 899px) {
	.hide-on-mobile {
		display: none;
	}
}

@media (min-width: 900px) {
	.mobile-only {
		display: none;
	}
}

.c-dropdown {
	font-size: 1.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	width: 100%;
}

@media (min-width: 1700px) {
	.c-dropdown {
		font-size: 1.6rem;
	}
}

.c-dropdown li {
	font-size: 1.6rem;
	width: 100%;
}

.c-dropdown a {
	display: block;
	padding-bottom: 0.2rem;
    padding-top: 0.2rem;
	width: 100%;
}

.c-dropdown-parent {
	align-items: center;
	display: flex;
	gap: 0.25rem;
}

/* App Layout */
.l-app {
	display: grid;
	grid-template-columns: 1fr;
}

@media (min-width: 900px) {
	:root {
		--contentPaddingX: 2rem;
		--contentPaddingY: 2rem;
	}
	.l-app {
		grid-template-columns: var(--sidebar-width) auto;
		min-height: 100vh;
	}

	.l-app--full {
		grid-template-columns: 1fr;
	}

	.l-app--minimized-sidebar {
		--sidebar-width: 10rem;
	}
}

@media (min-width: 1700px) {
	:root {
		--sidebar-width: 36rem;
		--contentPaddingX: 5rem;
		--contentPaddingY: 3.2rem;
	}
}

.l-app__content {
	position: relative;
	padding-bottom: var(--contentOffsetTop);
}

@media (min-width: 900px) {
	.l-app__content {
		grid-column: 2;
		padding-top: var(--contentOffsetTop);
	}
}

/* logged out */

.l-header {
	background-color: var(--layer-2-bg);
	border-bottom: 1px solid var(--box_border, #383838);
	margin-bottom: 5rem;
	position: relative;
}

.l-header__container {
	align-items: center;
	display: flex;
	gap: 4rem;
	height: 10rem;
	justify-content: space-between;
}

.l-header__logo {
	display: block;
	max-width: 14rem;
}

.l-header__logo img {
	max-width: 100%;
}

.l-header__navigation {
	align-items: center;
	display: flex;
	gap: 5rem;
}

.c-quick-links {
	display: flex;
	gap: 2rem;
}

.c-quick-links--stacked {
	display: grid;
}

.c-quick-links--stacked .c-quick-links__list {
	display: grid;
}

@media (max-width: 1199px) {
	.c-quick-links {
		display: none;
	}
}

.c-quick-links__list {
	align-items: center;
	display: flex;
	flex-wrap: wrap;
	gap: 1.5rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.c-quick-link {
	color: currentColor;
	display: flex;
	gap: 0.25rem;
	line-height: 1;
	font-size: 1.4rem;
	text-decoration: underline !important;
}

.c-quick-link__icon {
	max-width: 1.5rem;
}

.c-image-preview {
	align-items: flex-end;
	display: flex;
	gap: 2rem;
}

.c-image-preview__image {
	height: 100%;
	max-width: 14rem;
}

.c-image-preview__image--square {
	aspect-ratio: 1 / 1;
}

.c-image-preview__upload {
	flex: 1;
}

.c-contracts {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 5rem;
}

.c-contract {
	display: grid;
	gap: 1rem;
}

/* tidy up some day */
.c-contract a .c-upload:only-child {
	aspect-ratio: 1 / 1;
}

.c-contract__link {
	text-decoration: none;
}

.c-contract__uploads {
	align-items: flex-end;
	display: grid;
	gap: 2rem;
	grid-template-columns: repeat(3, 1fr);
}

@keyframes fadeInOut {
	0%, 100% {
	  opacity: 0;
	}
	50% {
	  opacity: 1;
	}
  }

.c-section-highlight {
	animation: fadeInOut 1s ease-in-out infinite;
	background-color: #ffff0080;
	position: absolute;
	left: 0;
	bottom: 0;
	height: 100%;
	width: 100%;
	z-index: 2;
}

.c-bidders {
	display: grid;
	gap: 2rem;
}

.c-bidder {
	display: grid;
    justify-content: space-between;
    gap: 2rem;
    grid-template-columns: 1fr 1fr;
}

.c-bidder:not(.c-bidder:first-child) {
	border-top: 1px solid var(--box_border, #5b747c);
	padding-top: 2rem;
}

.c-bidder__inputs {
	display: grid;
	gap: 2rem;
}

.c-pill-filters {
	align-items: center;
	display: flex;
	gap: 1rem;
	margin: 0;
	list-style: none;
	padding: 0;
}

.c-pill-filter {
	background-color: var(--layer-3-bg);
	border: 1px solid var(--box_border, #5b747c);
	border-radius: 5px;
	color: var(--fontColor);
	padding: 1rem;
}

.c-pill-filter.active {
	font-weight: bold;
}

.c-contact {
	align-items: center;
	display: flex;
	gap: 0.75rem;
}

.c-contact--reverse {
	flex-direction: row-reverse;
}

.c-contact__avatar {
	aspect-ratio: 1 / 1;
	border: 1px solid var(--account-color);
	border-radius: 100%;
	max-height: 2rem;
	max-width: 2rem;
	object-fit: cover;
}

.c-toggle-menu-icon {
	background: none;
	cursor: pointer;
	appearance: none;
	margin: 0;
	padding: 0;
	border: 0;
}

@media (max-width: 899px) {
	[data-navigation-menu] {
		display: none;
	}
}

@media (min-width: 900px) {
	[data-navigation-menu] {
		display: block;
	}
}

[data-navigation-menu].open {
	display: block;
}

.c-site-search {
	padding-left: var(--paddingY);
	padding-right: var(--paddingY);
}

.dashboard__item {
	align-items: center;
	justify-content: space-between;
	display: flex;
	flex-direction: column;
	min-height: 28rem;
	padding: 2rem;
	text-align: center;
}

.dashboard__unit {
	font-size: 3rem;
	font-weight: bold;
}

.dashboard__unit--small {
	font-size: 2rem;
}

.dashboard__icon {
	height: auto;
	max-width: 11rem
}

.dashboard__icon--red path {
	fill: #CC0000;
}

.dashboard__icon--amber path {
	fill: #C88923;
}

.dashboard__icon--green path {
	fill: #28A745;
}

.dashboard__unit--with-orb {
	align-items: center;
	/* The colors are defined as Sass variables in the original code.
       Replace them with actual color values, e.g., #FFFFFF */
	border-left-color: #E31F24;
	border-top-color: #B0CB1F;
	border-right-color: #E4087E;
	border-bottom-color: #00AFEF;
	border-radius: 50%;
	border-style: solid;
	border-width: 1rem;
	display: flex;
	justify-content: center;
	height: 20rem;
	margin-top: 1rem;
	margin-bottom: 2rem;
	width: 20rem;
}

.dashboard__unit--small-orb {
	height: 10rem;
	width: 10rem;
}

.dashboard__image {
	height: 100%;
	max-height: 6rem;
	max-width: 24rem;
	object-fit: contain;
	object-position: center;
}

.dashboard__list {
	display: grid;
	gap: 0.75rem;
	list-style: none;
	margin-top: 0;
	padding: 0;
}

.dashboard__list-item {
	align-items: flex-start;
	display: flex;
	font-size: 1.4rem;
	justify-content: space-between;
	padding-left: 3rem;
	position: relative;
	text-align: left;
}

.dashboard__list-item::before {
	background-color: var(--bg-color);
	border-radius: 100%;
	content: "";
	position: absolute;
	left: 0;
	top: 0.2rem;
	height: 2rem;
	width: 2rem;
}

.dashboard__list-item-status {
	height: auto;
	margin-left: 1rem;
	width: 2.5rem;
}

.gauge {
	margin: 0 auto 2rem;
	position: relative;
}

.gauge__gauge {
	height: auto;
	width: 100%;
}

.gauge__arrow {
	height: 3.2rem;
	position: absolute;
	bottom: -0.8rem;
	left: 50%;
	transform: translateX(-85%) rotate(var(--angle));
	transform-origin: 84% 48%;
	transition: transform 2s ease-in-out;
}

.c-filters-trigger {
	appearance: none;
	border: none;
	background: var(--box_background, rgba(40, 46, 48, 0.9));
	color: var(--theme_color_contrast, #fff);
	border-radius: 100%;
	cursor: pointer;
	display: flex;
	justify-content: center;
	padding: 0.1rem;
	position: relative;
	transition: transform 0.25s linear;
	height: 2.5rem;
	width: 2.5rem;

	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
}

.c-unordered-list {
	font-size: 1.4rem;
}

.c-unordered-list__title {
	font-size: 1.6rem;
}

.c-unordered-list__list {
    display: grid;
    gap: 2rem;
    list-style: none;
	margin-bottom: 2rem;
	padding: 0;
}

.c-unordered-list__item {
	font-size: 1.6rem;
}

.c-benefit-card {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	opacity: 0.7;
	transition: opacity 0.25s ease-in-out;
}

.c-benefit-card__icon {
	margin: 2rem auto 4rem;
    max-width: 10rem;
}

.c-benefit-card__header {
	justify-content: center;
}

.c-benefit-card:hover {
	opacity: 1;
}

.c-benefit-card__footer {
	margin-top: 2rem;
}

.c-benefit-card__footer .c-button {
	display: block;
}

/**
 * Fullcalendar overrides.
 */

.fc-day-today {
	background: #28A745 !important;
	border: none !important;
}

.fc-day:has(.last-service--red),
.last-service--red {
	background:  #CC0000 !important;
}

.fc-day:has(.last-service--amber),
.last-service--amber {
	background: #C88923 !important;
}

.fc .fc-multimonth {
	border: none !important;
}

.fc .fc-multimonth-daygrid {
	background: none !important;
}

table tr th.highlighted, table tr td.highlighted {
	animation: fadeInOut 1s ease-in-out;
	background-color: #ffff0080;
}

.chart-labels {
	display: grid;
	margin-top: 4rem;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.chart-label {
	display: flex;
	text-align: left;
	align-items: center;
	font-size: 12px;
}

.chart-color {
	width: 22px;
	height: 22px;
	margin-right: 10px;
	flex-shrink: 0;
	/* border: 1px solid #fff; */
	/* border-radius: 50%; */
}

/**
 * PHP Debug Bar overrides. DO NOT REMOVE!!!
 */
.phpdebugbar-panel,
td.phpdebugbar-widgets-name,
li.phpdebugbar-widgets-list-item,
li.phpdebugbar-widgets-table-list-item {
	color: #333;
}

.c-tabs {
	border-bottom: 1px solid var(--box_border, #5b747c);
	display: flex;
	gap: 2rem;
	list-style: none;
	padding: 0;
	margin: 0;
}

.c-tabs--sticky {
	position: sticky;
    top: calc(var(--bannerHeight) + var(--navHeight) + 1px);
    z-index: 4;
    background-color: var(--layer-1-bg);
}

.c-tabs__content {
	display: none;
}

.c-tabs__content.active {
	display: block;
}

.c-tab {
	/* appearance: none; */
}

.c-tab__unit {
	font-size: 1.2rem;
	font-weight: normal;
	pointer-events: none;
}

.c-tab__button {
	align-items: baseline;
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	display: flex;
	gap: 0.5rem;
	font-weight: bold;
	margin: 0;
	opacity: 0.7;
	padding: 1.5rem 0;
	position: relative;
}

a.c-tab__button {
	text-decoration: none;
}


.c-tab__button:hover {
	opacity: 1;
}

.c-tab__button.active {
	opacity: 1;
}

.c-tab__button.active::after {
	background-color: var(--theme_color, var(--default-theme-color));
	content: '';
	position: absolute;
	left: 0;
	bottom: -1px;
	height: 2px;
	width: 100%;
}

.c-files {
	display: grid;
	gap: 1rem;
}

.c-file {
	align-items: center;
	border: 1px solid var(--box_border, #5b747c);
	border-radius: var(--borderRadius);
	display: flex;
	gap: 1rem;
	padding: 1rem;
}

.c-file--upload {
	border-style: dashed;
	background-color: var(--layer-3-bg);
	text-decoration: none;
}

.c-file--uploading {
	border-color: var(--colorSuccess);
	pointer-events: none;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

.c-file--uploading .c-file__icon {
	animation: spin infinite 2s linear;
}

.c-file__meta {
	align-items: center;
	display: flex;
	flex: 100%;
	justify-content: space-between;
}

.c-file__title {
	font-size: 1.4rem;
	font-weight: bold;
	text-decoration: none;
	line-height: normal;
}

.c-file__subtitle {
	align-items: center;
	display: flex;
	gap: 2rem;
	font-size: 1.2rem;
}

.c-file__status {
	font-weight: normal;
	font-size: 1.2rem;
	position: relative;
}

.c-file__status::before {
	background-color: grey;
	border-radius: 100%;
	content: '';
	bottom: 50%;
	transform: translateY(50%);
	position: absolute;
	left: -1rem;
	height: 0.5rem;
	width: 0.5rem;
}

.c-file__status--active::before {
	background-color: var(--theme_color, var(--default-theme-color));
}

.c-file__icons {
	display: flex;
	gap: 1rem;
}

.c-file__icon {
	aspect-ratio: 1 / 1;
	appearance: none;
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	margin: 0;
	padding: 0;
	height: 4rem;
	width: 4rem;
}

.c-file__icon[disabled], .c-file__icon--disabled {
	cursor: not-allowed;
	opacity: 0.5;
}

.c-file__icon--uploading {
	cursor: progress !important;
}

.c-file__icon--with-text {
	aspect-ratio: auto;
	display: grid;
	height: auto;
	font-size: 1rem;
	letter-spacing: 0.05rem;
	place-items: center;
	text-decoration: none;
	text-transform: uppercase;
	width: auto;
}

.c-file__icon--with-text:not(.c-file__icon--with-text[disabled]) svg {
	color: var(--theme_color, var(--default-theme-color));
}

.c-file__icon--with-text svg {
	height: 3rem;
	width: 3rem;
}

.c-file__icon svg {
	display: block;
}

.c-resource__image {
	height: 30rem;
	width: 100%;
	object-fit: cover;
}

/* Pagination */

.pagination {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 100%;
	justify-content: flex-end;
}

.pagination .page-item {
	margin: 0 5px;
	padding: 0;
}

.pagination .page-link {
	display: block;
	padding: 5px 10px;
	background-color: var(--layer-2-bg);
	border: 1px solid var(--box_border, #383838);
	color: var(--fontColor); /* White text */
	text-decoration: none;
	transition: background-color 0.3s ease;
	border-radius: 5px;
	line-height: normal;
	font-size: 20px;
}

.pagination .page-link:hover, .pagination .page-item.active .page-link {
	background-color: var(--theme_color, var(--default-theme-color));
	color: var(--theme_color_contrast, #fff);
	border-color: var(--theme_color, var(--default-theme-color));
}

.pagination .page-item.disabled .page-link {
	opacity: 0.4;
}

/* Add a focus style for accessibility */
.pagination .page-link:focus {
	outline: none;
	box-shadow: 0 0 0 2px rgba(var(--theme_color), 0.5);
}

/* Responsive adjustments */
@media (max-width: 768px) {
	.pagination .page-link {
		padding: 8px 16px;
	}
}

pre.code {
	background-color: #e1e1e1;
	color: #333;
	padding: 10px;
	border-radius: 5px;
	border: 1px solid var(--box_border, #5b747c);
	text-align: start;
}

.c-supplier-logos { 
	align-items: center;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 1rem;
}

.c-supplier-logo {
	display: grid;
	place-items: center;
}

.c-supplier-logo img {
	max-width: 100%;
	height: auto;
	max-height: 8rem;
}

.c-chart__graphic {
	display:flex; 
	justify-content: center; 
	max-height: 350px
}

.c-chart--inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2rem;
}

.c-chart--inline .chart-labels {
	grid-template-columns: 1fr;
	margin-top: 0;
}

.c-chart--inline .chart-label {
	font-size: 14px;
}

.c-chart--small .c-chart__graphic {
	max-height: 250px
}

.col-span .c-expanding-box {
	height: 100%;
}

@media (min-width: 1900px) {
	.col-span--2 {
		grid-column: span 2;
	}
}

.c-card {
	align-items: center;
	background: var(--layer-3-bg);
	border-radius: var(--borderRadius);
	justify-content: space-between;
	display: flex;
	gap: 2rem;
	padding: 1rem 3rem 1rem 1rem;
	text-decoration: none;
}

.c-card:hover {
	text-decoration: none;
}

.c-card__content-wrapper {
	align-items: center;
	display: flex;
	gap: 2rem;
}

.c-card__icon {
	aspect-ratio: 1 / 1;
	background: var(--layer-2-bg);
	border-radius: calc(var(--borderRadius) / 2);
	display: flex;
	height: 100%;
    justify-content: center;
	width: 7rem;
}

.c-card__icon svg {
	max-width: 4rem;
}

.c-card__content {
	display: grid;
	gap: 0.5rem;
	padding-top: 1rem;
	padding-bottom: 1rem;
}

.c-card__title {
	opacity: 0.8;
	font-size: 1.6rem;
}

.c-card__unit {
	font-size: 2.6rem;
	font-weight: bold;
	line-height: 1;
}

.c-card__stat {
	color: var(--colorWarning);
	font-size: 1.6rem;
}

.c-card__stat--positive {
	color: var(--colorSuccess);
}

/* end of experience */

.ui-datepicker .ui-datepicker-prev span,
.ui-datepicker .ui-datepicker-next span {
	background-color: var(--layer-2-bg);
    color: var(--fontColor);
}

.ui-datepicker.ui-widget-content {
    border: 1px solid #5b747c;
    border-color: var(--box_border, #5b747c);
	background-color: var(--layer-2-bg);
    color: var(--box_text, #dfe8ec);
}

.ui-datepicker.ui-widget-content .ui-state-default {
	background-color: var(--layer-3-bg);
	color: var(--fontColor);
}

.ui-datepicker .ui-widget-header {
	background-color: var(--layer-1-bg);
	border-color: var(--theme_color, #00afef);
	color: var(--fontColor);
}

.ui-datepicker .ui-button.ui-state-disabled:active {
	border-color: var(--form_border, #5b747c);
	background-color: var(--layer-2-bg);
	color: var(--fontColor);
}

.c-mention-dropdown {
	background-color: var(--layer-2-bg);
	display: none;
	grid-column: 1 / -1;
	padding-left: 0;
	list-style: none;
}

.c-mention-dropdown--active {
	display: grid;
}

.c-mention-dropdown__person {
	align-items: center;
	display: flex;
	gap: 1rem;
	justify-content: space-between;
	padding: 1rem;
	width: 100%;
}

.c-mention-dropdown__button {
	align-items: center;
	appearance: none;
	border: none;
	border-bottom: 1px solid var(--box_border, #383838);
	background: none;
	color: var(--fontColor);
	cursor: pointer;
	display: none;
	gap: 0.5rem;
	padding: 1rem;
	outline: none;
	width: 100%;
	text-align: left;
}

.c-mention-dropdown__button:disabled {
	cursor: not-allowed;
	opacity: 0.6;
}

.c-mention-dropdown__button--active {
	display: flex;
}

.c-mention-dropdown__button:hover, .c-mention-dropdown__button:focus {
	background-color: var(--layer-3-bg);
}

.ui-datepicker .ui-datepicker-prev .ui-icon {
	background-image: url(/images/icons/arrow-left.svg) !important;
	background-position: center center !important;
}

.ui-datepicker .ui-datepicker-next .ui-icon {
	background-image: url(/images/icons/arrow-right.svg) !important;
	background-position: center center !important;
}