/*///////////////////////////////////////////////
// Reset styles
///////////////////////////////////////////////*/

html {
	box-sizing: border-box;
	/*font-size: 62.5%;*/
	font-size: 14px;
	height: 100%;
	scroll-behavior: smooth;
	-webkit-tap-highlight-color: transparent;
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
body {
	background: #fff;
	color: #333;
	font-family: Arimo, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	/*font-size: 1.6rem;*/
	font-size: 16px;
	line-height: 1.6;
	margin: 0;
	min-height: 100%;
	min-width: 280px;
	padding: 0;
	position: relative;
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: none;
	text-size-adjust: 100%;
	transition: all 0.3s ease;
}
*, *::before, *::after {
	box-sizing: inherit;
}
*:focus {
	outline: none;
}
a {
	color: inherit;
	outline: none;
	text-decoration: underline;
	transition: color 0.3s ease;
}
a:active,
a:focus,
a:hover {
	text-decoration: underline;
	background-color: transparent;
}
h1,
h2,
h3,
h4 {
	font-family: Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-weight: 700;
	letter-spacing: 0.04rem;
	margin: 0;
	padding: 0;
	text-transform: uppercase;
}
h1 {
	font-size: 2.1rem;
	line-height: 2.1rem;
	margin: 0.8rem 0;
}
h2 {
	border: none;
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 1.8rem;
	margin: 0 0 15px;
}
h3 {
	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.7rem;
	margin: 0 0 0.8rem;
}
h3 a {
	color: #10a1cc;
}
h3 a:hover {
	color: #333;
}
h4 {
	font-size: 1rem;
}
p {
	margin: 0 0 1.2rem;
}
ul, ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
li {
	margin: 0;
	padding: 0;
}
svg {
	/*pointer-events: none;*/
}
img {
	border: 0 none;
	height: auto;
	max-width: 100%;
	vertical-align: middle;
}
figure.image img {
	height: auto !important;
	width: 100% !important;
}
video {
	height: auto !important;
	width: 100% !important;
}
figure.video {
	height: 0;
	padding-bottom: 56.25%; /* 16:9 */
	position: relative;
}
figure.video iframe {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
blockquote {
	margin: 1rem 12%;
}
hr {
	background: #ddd;
	border: 0;
	clear: both;
	height: 1px;
	margin: 0 0 1.5rem 0;
	width: 100%;
}
sup,
sub {
	position: relative;
	top: -0.4rem;
	vertical-align: baseline;
}
sub {
	top: 0.4rem;
}
dt {
	float: left;
	/*margin: 0 0 0.4rem 0;*/ 
	width: 10rem;
}
dd {
	margin: 0 0 0.4rem 0; 
	padding-left: 10rem;
}

table {
	border-top: 1px solid #ddd;
	margin-bottom: 1em;
	overflow-x: auto;
	print-color-adjust: exact;
	-webkit-print-color-adjust: exact;
	width: 100%;
}
caption {
	display: none;
}
thead, tfoot, 
thead tr, tfoot tr {
	background: #ebebeb;
}
thead, tbody, tfoot {
	border-bottom: 1px solid #ddd;
}
tbody tr:nth-of-type(odd) {
	background: #fefefe;
}
tbody tr:nth-of-type(even) {
	background: #f8f8f8;
}
table table,
table thead, 
table tbody, 
table tfoot {
	border: none;
}
td,
th {
	border: none;
	padding: 0.5rem 1.0rem;
	print-color-adjust: exact;
}

table tbody tr.paid {
	background-color: #9f9;
}
table tbody tr.error {
	background-color: #fc9;
	cursor: not-allowed;
}
table tbody tr.cancelled,
table tbody tr.cancelled td {
	background: #edd;
	/*background: rgba(234, 208, 208, 0.5);*/
	color: #999 !important;
}
table tbody tr.empty {
	background-color: #ff675b;
	background-color: rgba(255, 103, 91, 0.1);
	color: #eb9a0a;
}
table tbody tr.current {
	background-color: #fdf9df;
	background-color: rgba(253, 249, 223, 0.25);
	color: #eb9a0a;
}
table .th-data {
	display: none;
}

/* Scrollable tables */
.table-scroll {
	overflow-x: auto;
	width: 100%;
}
.table-scroll th:first-child {
	background-color: inherit;
	left: 0;
	position: sticky;
	text-align: left;
	z-index: 1;	
}

/* Responsive tables */
@media only screen and (max-width: 768px) {
	table.responsive thead {
		display: none;
	}
	table.responsive,
	table.responsive tbody,
	table.responsive tbody tr,
	table.responsive caption {
		display: grid;
		width: 100%;
		word-break: break-all;
	}
	table.responsive {
		background-color: transparent;
		border: none;
	}
	table.responsive tr {
		margin-bottom: 1rem;
		border: 1px solid #ddd;
		padding-bottom: 0.75rem;
	}
	table.responsive th,
	table.responsive td {
		padding: 0.75rem 1rem 0;
	}
	table.responsive tr .th-data {
		display: inline-block;
		font-size: 1rem !important;
		font-weight: bold !important;
	}
	table.responsive tr .th-data::after {
		content: ':';
		display: inline-block;
		margin-right: 0.3rem;
	}
}

form {
	margin: 0 auto;
	max-width: 800px;
}
fieldset {
	border: medium none;
	margin: 0 0 1rem;
	padding: 0;
}
label {
	font-weight: normal;
}
input,
textarea,
select {
	/*-webkit-appearance: none;
	-moz-appearance: none;
	-moz-user-focus: none;
	appearance: none;*/
	background: #f5fafa;
	border: 1px solid #f0f0f0;
	border-radius: 0.1rem;
	box-shadow: none;
	color: #333;
	font-family: Arimo, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	/*font-size: 1rem;*/
	font-size: initial;
	line-height: 1.5;
	height: 4rem;
	margin: 0 0 0.8rem;
	max-width: 100%;
	padding: 0.3rem 1rem;
	vertical-align: middle;
	width: 100%;
}
select[multiple] {
	padding: 0;
}
input:not([readonly]):hover,
input:not([readonly]):focus,
input:not([readonly]):active,
select:not([readonly]):hover,
select:not([readonly]):focus,
select:not([readonly]):active,
textarea:not([readonly]):hover,
textarea:not([readonly]):focus,
textarea:not([readonly]):active {
	border-color: #8cc919;
}
input[readonly],
select[readonly],
textarea[readonly] {
	cursor: copy !important;
}
input.error, 
select.error,
textarea.error {
	border-color: #df5f5f !important;
	color: #df5f5f !important;
}
/* 
input.error, 
input:invalid,
select.error,
select:invalid,
textarea.error,
textarea:invalid {
	border-color: #df5f5f !important;
	color: #df5f5f !important;
}
input + span {
	padding-right: 30px;
}
input:invalid + span::after {
	color: #8b0000;
	content: "✖";
	padding-left: 5px;
	position: absolute;
}
input:valid + span::after {
	color: #009000;
	content: "✓";
	padding-left: 5px;
	position: absolute;
}
input:valid {
	border-color: #8cc919;
}
input:invalid {
	border-color: #df5f5f !important;
} */
input[type=radio] {
	-webkit-appearance: radio;
	-moz-appearance: radio;
	-moz-user-focus: radio;
	appearance: normal;
	height: auto;
	margin: 0 0.5rem 0 0;
	width: auto;
}
input[type=checkbox] {
	-webkit-appearance: checkbox;
	-moz-appearance: checkbox;
	-moz-user-focus: checkbox;
	appearance: normal;
	height: auto;
	margin: 0 0.5rem 0 0;
	width: auto;
}
input[type=submit]:hover {
	cursor: pointer;
}
input[type=text],
input[type=email],
input[type=password] {}::-webkit-input-placeholder {
	color: #888;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	opacity: 1;
}
::-moz-placeholder {
	color: #888;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	opacity: 1;
}
:-ms-input-placeholder {
	color: #888;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	opacity: 1;
}
input:-moz-placeholder {
	color: #888;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	opacity: 1;
}
select:-moz-focusring {
	color: transparent;
	text-shadow: 0 0 0 #000;
}
select::-ms-expand {
	display: none;
}
select:required:invalid,
select option[value=''][disabled] {
	color: #888;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	opacity: 1;
}

select option {
	color: #333;
	font-family: 'Poppins', serif;
	font-style: normal;
	opacity: 1;
	padding: 0.3rem 1rem;
}
select.numbers option {
	text-align: center;
}
select option.inactive {
	background: #eee;
	color: #666;
}

/*select option[value=''][disabled] {
	display: none;
}
select option:checked {
	background-color: #8cc919;
	box-shadow: 0 0 10px 100px #8cc919 inset;
	color: #fff;
	text-shadow: 0 0 0 #fff;
}
select option:hover,
select option:focus,
select option:active {
	background-color: #8cc919;
	box-shadow: 0 0 10px 100px #8cc919 inset;
	color: #fff;
	text-shadow: 0 0 0 #fff;
}*/
textarea {
	height: auto;
}
@media only screen and (min-width: 540px) {
	/*tbody td + td,
	tbody th + td {
		border-left: 1px solid #ddd;
	}*/
	input,
	textarea,
	select,
	button {
		/*height: 35px;
		min-height: 35px;*/
		width: auto;
	}
	textarea {
		height: auto;
	}

	@supports (display: grid) {
		form > p,
		form fieldset > p {
			display: grid;
			grid-template-columns: 14rem 1fr;
			grid-gap: 0.5rem;
			position: relative;
		}

		form > p.col1,
		form fieldset > p.col1 {
			display: block;
		}
		form > p.col3,
		form fieldset > p.col3 {
			grid-template-columns: 14rem 1fr auto;
		}
		form > p > label,
		form fieldset > p > label {
			padding: 1rem 0;
		}
		form > p > input,
		form > p > textarea,
		form > p > select,
		form fieldset > p > input,
		form fieldset > p > select,
		form fieldset > p > textarea {
			margin: 0;
			width: 100%;
		}
		form > button {
			margin-left: 14.5rem;
		}
		form p > .help {
			grid-column: 2;
		}
	}
}

/* Inline forms */
form.inline {
	margin: 0 0 0.2rem;
	max-width: none;
}
form.inline > p,
form.inline > button {
	display: inline-block;
	margin: 0 0.5rem 1rem;
}
form.inline > button {
	margin-right: 0;
}
form.inline input, 
form.inline select,
form.inline textarea {
	height: 2.7rem;
	width: auto;
}

/* Prevent iOS high-jacking the zoom when user types in inputs */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
	input,
	select,
	textarea,
	input:focus,
	select:focus,
	textarea:focus {
		font-size: 16px !important;
	}
}
@media print {
	@page {
		size: portrait;
	}
}

/*///////////////////////////////////////////////
// Accessibility
///////////////////////////////////////////////*/

.visuallyhidden {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px !important;
	margin: -1px !important;
	min-height: 0;
	overflow: hidden !important;
	padding: 0;
	position: absolute;
	text-transform: none;
	width: 1px !important;
}
.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
	clip: auto;
	height: auto;
	margin: 0;
	overflow: visible;
	position: static;
	width: auto;
}
.ir {
	color: transparent;
	display: block;
	float: none;
	font: 0px/0 a;
	margin: 0 auto;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
/* Fallback for IE9 and 10 */
*[hidden] { 
	display: none;
}

/* Back to top button */
#back-to-top {
	border-radius: 50%;
	bottom: 0.5rem;
	display: none;
	height: 44px;
	opacity: 0.7;
	padding: 3px;
	position: fixed;
	right: 0.5rem;
	width: 44px;
	z-index: 49;
}
#back-to-top svg {
	height: 34px;
	transform: rotate(180deg);
	width: 34px;
}
@media all and (min-width: 768px) {
	#back-to-top {
		display: none !important;
	}
}

/* Environment indicator */
body.staging #container,
body.development #container {
	border-bottom: 50px solid #f0f;
	height: 100%;
	overflow-x: hidden;
	position: fixed;
}
body.staging #container {
	border-bottom: 50px solid #0ff;
}
body #container::after {
	color: #999;
	content: '';
	display: none;
	font-size: 8vw;
	font-weight: bold;
	left: 0;
	opacity: 0.2;
	pointer-events: none;
	position: absolute;
	top: 40%;
	transform: rotate(330deg);
}
body.development #container::after {
	color: #909;
	content: 'DEVELOPMENT';
	display: block;
	left: calc(50% - 32vw);
}
body.staging #container::after {
	color: #099;
	content: 'STAGING';
	display: block;
	left: calc(50% - 16vw);
}
/* User type indicators */
body 			{ border-top: 5px solid #555; }
body.member 	{ border-top-color: #8cc919; }
body.hubster 	{ border-top-color: #f89920; }
body.courier 	{ border-top-color: #31dea1; }
body.supplier 	{ border-top-color: #48b2de; }
body.staff 		{ border-top-color: #b739eb; }
body.admin 		{ border-top-color: #f4524d; }




.center { 
	text-align: center !important; 
}

/*.thead, .tfoot {
	background: #ccc;
}
th, td {
	border-bottom: 1px solid #ebebeb;
	padding: 5px;
	text-align: left;
}*/
tbody th, tfoot th {
	text-align: left;
}
tr > .qty {
	text-align: center;
}
tr > .price {
	text-align: right;
}
tr > .saving {
	color: #6fa222;
}
.row-total {
	background: #ddd;
	border-bottom: 1px solid #ccc;
	border-top: 1px solid #ccc;
	text-transform: uppercase;
}
.nospace {
	white-space: nowrap;
}

.button,
button {
	align-content: center;
	align-self: stretch;
	background-color: #8cc919;
	border-radius: 0.2rem;
	border: 1px solid transparent;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.5;
	min-height: 1em;
	outline: 0;
	padding: 0.5rem 1rem;
	position: relative;
	text-align: center;
	text-decoration: none;
	text-shadow: none;
	text-transform: uppercase;
	touch-action: manipulation;
	transition: all 0.2s ease-in;
	vertical-align: baseline;
	-webkit-user-select: none;
	user-select: none;
	will-change: '';
	-webkit-tap-highlight-color: transparent;
}
.button.void,
button.void {
	background-color: #f4524d;
}
button.transparent {
	background-color: transparent;
	color: unset;
	font-weight: unset;
	text-transform: unset;
}
button.dark,
.button.dark,
.loading button {
	background-color: #888;
}
.button:hover,
.button:focus,
button:hover,
button:focus,
button.void:hover,
button.void:focus,
.loading button {
	background-color: #333;
	color: #fff;
	text-decoration: none;
}
.button[disabled],
button[disabled],
a.disabled {
	background-color: #ebebeb !important;
	color: #999;
	cursor: not-allowed;
}

button.success {
	background-color: #eee !important;
	color: #8cc919 !important;
	cursor: not-allowed;
}

button.right,
.button.right {
	float: right;
	margin-left: 1rem;
}

button.small,
.button.small {
	height: auto;
	line-height: 1;
	padding: 0.3rem 0.5rem;
}

.button.download {
	background-color: #eb9a0a;
	clear: left;
	float: right;
	margin: 0 0 0 1rem;
	padding-left: 2.2rem;
}
.hubster-only {
	background-color: #888;
	font-size: 0.9rem;
	font-weight: normal;
	line-height: 1;
	margin-bottom: 0.4rem;
	padding: 0.3rem 0.6rem;
	text-transform: none;
}

button.member 	{ background: #8cc919; }
button.hubster 	{ background: #f89920; }
button.courier 	{ background: #31dea1; }
button.supplier { background: #48b2de; }
button.staff 	{ background: #b739eb; }
button.admin 	{ background: #f4524d; }

.partial 	{ background: #eb9a0a; }
.missing 	{ background: #eb0a0a; }
.type-partial 	{ color: #eb9a0a; }
.type-missing 	{ color: #eb0a0a; }

/*///////////////////////////////////////////////
// TinyMCE
///////////////////////////////////////////////*/

.tox-tinymce {
	border: 1px solid #f0f0f0;
}
.highlight {
	background: #f7ddad;
}

/*///////////////////////////////////////////////
// jQueryUI
///////////////////////////////////////////////*/

.ui-widget input, 
.ui-widget select, 
.ui-widget textarea, 
.ui-widget button {
	font-family: Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
}
.ui-tabs .ui-tabs-panel {
	font-size: 1rem;
}

.ui-accordion > li + li {
	border-top: 1px solid #ccc;
}
.ui-accordion .ui-accordion-header {
	padding: 0.6rem 2.6rem 0.6rem 0;
}
.ui-accordion .ui-accordion-header-icon {
	border: 0.35rem solid transparent;
	border-bottom: none;
	border-top-color: inherit;
	position: absolute;
	right: 1rem;
	top: 50%;
	transition: transform 0.4s;
	width: 0;
}
.ui-accordion li:only-child .ui-accordion-header-icon {
	display: none;
}
.ui-accordion .ui-accordion-header-active .ui-accordion-header-icon {
	transform: rotate(180deg);
}
.ui-accordion .ui-accordion-content {
	padding: 1rem 0;
}

.ui-datepicker {
	background: #fff;
	border: 1px solid #8cc919;
	font-size: 0.9rem;
	text-align: center;
}
.ui-datepicker td span, 
.ui-datepicker td a {
	text-align: center;
}
.ui-datepicker button {
	background: #888;
	font-size: 0.8rem;
	height: auto;
}
.ui-datepicker select {
	font-size: 0.9rem !important;
	height: auto;
	line-height: 1;
	padding: 0.1rem 0.3rem;
}
.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	top: 4px;
}
.ui-datepicker-prev .ui-icon {
	background: url(/styles/ui-boxdivvy/images/ui-icons_777777_256x240.png) no-repeat -143px -192px;
	width: 16px;
	height: 16px;
}
.ui-datepicker-next .ui-icon {
	background: url(/styles/ui-boxdivvy/images/ui-icons_777777_256x240.png) no-repeat -112px -192px;
	width: 16px;
	height: 16px;
}
.ui-datepicker-today {
	color: #8cc919;
	font-weight: bold;
}
.ui-datepicker-current-day {
	background: #8cc919;
	color: #222;
	font-weight: bold;
}
.disabled,
.ui-datepicker-unselectable {
	color: #ccc;
	cursor: not-allowed;
}
button.ui-datepicker-trigger {
	background: transparent;
	border: none;
	left: -2rem;
	margin: 0;
	padding: 0;
	position: relative;
	top: -0.1rem;
	width: 1.2rem;
}
.field-date + button.ui-datepicker-trigger {
	left: unset;
	position: absolute;
	right: 1.2rem;
	top: 1.2rem;
}

/*///////////////////////////////////////////////
// Loading ellipsis
///////////////////////////////////////////////*/

.loading:after {
	overflow: hidden;
	display: inline-block;
	vertical-align: bottom;
	-webkit-animation: ellipsis steps(4,end) 2000ms infinite;      
	animation: ellipsis steps(4,end) 2000ms infinite;
	content: "\2026"; /* ascii code for the ellipsis character */
	width: 0px;
}
@-webkit-keyframes ellipsis {
	to { width: 1.25em; }
}
@keyframes ellipsis {
	to { width: 1.25em; }
}

/*///////////////////////////////////////////////
// SVG Icons
///////////////////////////////////////////////*/

.icon {
	display: inline-block;
	fill: currentColor;
	height: 1rem;
	stroke-width: 0;
	stroke: currentColor;
	width: 1rem;
}
button.has-icon,
.button.has-icon {
	padding-left: 3.6rem;
}
button.has-icon .icon,
.button.has-icon .icon {
	/*background: rgba(0,0,0,.05);*/
	border-right: 1px solid rgba(255,255,255,0.2);
	height: 100%;
	left: 0;
	line-height: 1;
	padding: 0.4rem 0.6rem;
	position: absolute;
	text-align: center;
	top: 0;
	width: 2.8rem;
}

.nav-button {
	background: transparent;
	border: none;
	color: #fff;
	height: 72px;
	left: 0;
	padding: 1rem;
	position: absolute;
	top: 0;
	width: 4.2rem;
	z-index: 600;
}
.nav-button:hover {
	background: transparent;
	color: rgba(255,255,255,0.8);
}
#site-nav .toggle-nav,
#noticeboard .nav-button,
#masthead .toggle-noticeboard {
	left: auto;
	right: 0;
}
body.guest .toggle-noticeboard {
	display: none;
}
body .nav-button svg {
	height: 1.4rem;
	width: 1.4rem;
}

@keyframes anim-rotate { 
	0% { transform: rotate(0); } 
	100% { transform: rotate(360deg); }
}
.icon-spinner2 {
	animation: anim-rotate 1s infinite linear;
	color: rgba(0,0,0,0.5);
	fill: #fff;
	font-size: 1.5rem;
	height: 1rem;
	line-height: 1;
	margin: 0 0 -0.17rem 0.3rem;
	text-shadow: 0 0 .25rem rgba(255,255,255,0.3);
}
.icon-spinner--steps {
	animation: anim-rotate 0.5s infinite steps(8);
}
.icon-spinner--steps2 {
	animation: anim-rotate 0.5s infinite steps(12);
}

/*///////////////////////////////////////////////
// Pagination
///////////////////////////////////////////////*/

.pagination {
	padding: 1rem 0;
	text-align: center;
}
.pagination li {
	display: inline-block;
}
.pagination li a,
.pagination li span {
	background-color: #fff;
	border-radius: 2px;
	color: #433c4b;
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: 700;
	margin: 0 0.2rem;
	padding: 0.5rem 0;
	text-align: center;
	transition: all 0.2s;
	vertical-align: middle;
	text-decoration: none;
	width: 2.6rem;
}
.pagination li a:hover {
	background-color: #8cc919;
	color: #fff;
}
.pagination li.no-link {
	visibility: hidden;
}
.pagination li.jump a {
	background-color: #433c4b;
	color: #fff;
	font-size: 1.4rem;
	font-weight: normal;
	padding: 0.1rem 1rem;
}
.pagination li.jump a:hover {
	background-color: #141414;
	color: #fff;
}
.pagination li.current span {
	color: #8cc919;
	cursor: default;
}
.pagination .ellipsis {
	display: none;
}

/*///////////////////////////////////////////////
// Master layout
///////////////////////////////////////////////*/

#container {
	display: grid;
	grid-template-rows: auto 1fr auto;
	grid-template-columns: 100%;
	min-height: 100vh;
	overflow: auto;
	text-align: center;
	width: 100%;
}
.wrap {
	margin: 0 auto;
	/*max-width: 1140px;*/
	padding: 0 1.5rem;
	position: relative;
	text-align: left;
}
#main {
	text-align: center;
}
#main > article {
	overflow: auto;
	padding: 1.5rem;
	text-align: left;
}
.mobile 		{ display: block; }
.desktop 		{ display: none; }
.printonly 		{ display: none; }
/*.screenonly 	{ display: block; }*/

@media all and (min-width: 768px) {
	.mobile 	{ display: none; }
	.desktop 	{ display: block; }

	body .wrap,
	body.full-width footer > .wrap {
		max-width: 1170px;
	}
	body.full-width .wrap {
		max-width: none;
	}
}

/*///////////////////////////////////////////////
// Header / masthead
///////////////////////////////////////////////*/

#masthead {
	background: #141414;
	color: #fff;
	height: 72px;
	overflow: hidden;
	position: relative;
}
#masthead a.title {
	display: block;
	padding: 0.8rem 4.5rem;
	text-align: center;
}

/* Fake logo */
/*#masthead a.title {
	color: rgba(255,255,255,1);
	font-size: 2.2rem;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 1.9rem;
	margin: 0;
	padding: 1.6rem 0;
	position: relative;
	text-align: center;
	text-decoration: none !important;
	text-shadow: 2px 2px 0px #000, 3px 3px 0px #8cc919;
	text-transform: uppercase;
	z-index: 500;
}
#masthead a.title img {
	display: none;
}
@media all and (min-width: 400px) {
	#masthead a.title {
		font-size: 2.8rem;
		line-height: 1.6rem;
	}
}
@media all and (min-width: 1140px) {
	#masthead a.title {
		display: inline-block;
		padding: 0.8rem 1.5rem 0.8rem 0;
		text-align: left;
	}
}*/

/* Image logo */
#masthead a.title {
	padding: 1.1rem 0;
}
#masthead a.title img {
	margin: 0 auto;
	max-width: 200px;
}
@media all and (min-width: 768px) {
	#masthead a.title {
		display: inline-block;
		padding: 0.8rem 0;
		position: relative;
		text-align: left;
		top: 0.4rem;
		z-index: 999;
	}
	#masthead a.title img {
		width: 190px;
	}
}
@media all and (min-width: 1140px) {
	#masthead a.title {
		display: inline-block;
		padding: 0.8rem 1.5rem 0.8rem 0;
		text-align: left;
	}
}

@media all and (min-width: 768px) {
	#masthead a.title {
		float: left;
	}
}

/*///////////////////////////////////////////////
// Site Navigation
///////////////////////////////////////////////*/

.c-offcanvas-content-wrap {
	position: relative;
}
.c-offcanvas-content-wrap.is-open {
	position: fixed;
}
.c-offcanvas {
	display: block !important;
	padding: 0;
	max-width: 480px;
	top: 5px;
	transform: translate3d(-100%, 0, 0);
	width: 100%;
	z-index: 50;
}
.c-offcanvas--right {
	z-index: 60;
}
.c-offcanvas-bg.is-animating,
.c-offcanvas-bg.is-open {
	display: none !important; /* Hide the overlay completely */
	background-color: rgba(0,0,0,0.8);
}

#site-nav {
	background: #141414;
	color: #fff;
	display: none;
	font-family: Poppins, sans-serif;
	font-size: 1rem;
}
#site-nav .wrap {
	padding: 0;
}
#site-nav .wrap > ul {
	display: -ms-grid;
	display: grid;
}
#site-nav .wrap > ul > li {
	border-bottom: 1px solid rgba(255,255,255,0.3);
	order: 2;
}
#site-nav #nav-home {
	display: none;
}
#site-nav #nav-profile {
	order: 1;
}
#site-nav a {
	color: #fff;
	display: block;
	padding: 1rem 1.5rem;
	text-decoration: none;
	transition: color 0s;
}
#site-nav a:hover {
	background: rgba(0,0,0,0.5);
	color: #8cc919;
	text-decoration: none;
}
#site-nav svg {
	margin: 0 0.8rem -0.15rem 0;
}
#site-nav li li {
	border-top: 1px solid rgba(255,255,255,0.1);
}
#site-nav li li a {
	background: #222;
	color: rgba(255,255,255,0.8);
	padding: 0.5rem 1.5rem;
	text-transform: none;
}
#nav-profile > a {
	font-size: 1.2rem;
	height: 72px;
	line-height: 2rem;
	padding: 0.8rem 1.5rem 0;
}
#nav-profile > a > span {
	color: rgba(255,255,255,0.6);
	display: block;
	font-size: 0.9rem;
	line-height: 1rem;
	text-transform: none;
}
#site-nav .avatar,
#nav-profile > a > svg {
	float: left;
	height: 2.8rem;
	margin: 0.2rem 0.7rem 0 0;
	width: 2.8rem;
}
#site-nav .avatar {
	border: 0.15rem solid #fff;
	margin: 0.2rem 0.7rem 0 0;
}

/* Unread messages */
#nav-message {
	position: relative;
}
#nav-message svg {
    width: 1.2rem;
    height: 1.2rem;
}
span.unread-messages {
	border-radius: 50%;
	bottom: 15px;
	font-size: 10px;
	height: 19px;
	line-height: 13px;
	padding: 1px 0;
	position: absolute;
	right: 9px;
	text-align: center;
	width: 19px;
	left: 20px;
	color: #8cc919;
	font-weight: bold;
}
#site-nav a:hover span.unread-messages {
	color: #000;
}
#masthead span.unread-messages {
	top: 1.8rem;
}

/* Desktop */
@media all and (min-width: 768px) {
	#site-nav .nav-button,
	#masthead .nav-button {
		display: none;	
	}
	#site-nav {
		background: transparent;
		display: block;
		position: absolute;
		right: 0;
		top: 0;
		width: 100%;
	}
	#site-nav .wrap {
		padding: 0 1.5rem;
	}
	#site-nav .wrap > ul {
		display: block;
		text-align: right;
	}
	#site-nav .wrap > ul > li {
		border: none;
		display: inline-block;
		text-align: left;
	}
	#site-nav .wrap > ul > li > a {
		color: #fff;
		display: block;
		height: 72px;
		line-height: 72px;
		padding: 0 0.5rem;
		position: relative;
		text-transform: none;
		transition: none;
	}
	#site-nav .wrap > ul > li:hover > a {
		color: #999;
	}
	#site-nav .wrap > ul > li:hover > a:hover {
		background: none;
		color: #8cc919;
	}
	#site-nav .wrap > ul > li > ul a:hover {
		background: rgba(0,0,0,0.2);
		color: #fff;
	}
	#site-nav li > ul {
		display: none;
		position: absolute;
		min-width: 180px;
		padding: 0;
		z-index: 1000;
	}
	#site-nav li:hover > ul {
		background: #8cc919;
		display: block;
	}
	#site-nav li li {
		border-top: none;
		display: block;
	}
	#site-nav li li a {
		border-top: 1px solid rgba(255,255,255,0.1);
		padding: 0.5rem 1rem;
	}
	#site-nav li li a:hover {
		background: rgba(0,0,0,0.2);
	}
	#site-nav .icon {
		font-size: 2rem;
		margin-right: 0.6rem;
	}
	#site-nav .avatar, 
	#nav-profile > a > svg {
		height: 1.8rem;
		margin: 1.8rem 5px 0 0;
		width: 1.8rem;
	}
	#site-nav li:hover .avatar,
	#site-nav a:hover .avatar {
		border-color: #c84a23;
	}
	#site-nav #nav-profile > a {
		background: inherit;
		font-size: inherit;
		line-height: 72px;
		padding: 0 1rem;
		overflow: initial;
	}
	#site-nav #nav-profile > a > span {
		display: none;
	}
	span.unread-messages {
		font-size: 9px;
		left: 7px;
		top: 27px;
	}
}
@media all and (min-width: 860px) {
	#site-nav .wrap > ul > li {
		margin: 0 0 0 1rem;
	}
	#site-nav .wrap > ul > li > a {
		padding: 0 1rem;
	}
	span.unread-messages {
		left: 13px;
	}
}
@media all and (min-width: 980px) {
	#site-nav #nav-home {
		display: inline-block;
	}
}

/*///////////////////////////////////////////////
// Footer
///////////////////////////////////////////////*/

footer {
	background:	#222;
	clear: both;
	color: rgba(255,255,255,1);
	font-size: 1rem;
}
footer > .wrap {
	overflow: auto;
	padding-bottom: 1.5rem;
}
footer a.logo {
	display: block;
	padding: 1.5rem 0;
	text-align: center;
}
footer a.logo img {
	margin: 0 auto;
	width: 150px;
}

/* Fake logo */
/*footer a.logo {
	color: rgba(255,255,255,1);
	display: block;
	font-size: 2rem;
	font-weight: 500;
	letter-spacing: 1.4px;
	line-height: 2.2rem;
	margin: 0;
	padding: 1.5rem 0;
	text-align: center;
	text-decoration: none !important;
	text-shadow: 2px 2px 0px #222, 3px 3px 0px #8cc919;
	text-transform: uppercase;
}*/

/* Image logo */
footer a.logo img {
	/*display: none;*/
}

footer section {
	border-top: 1px solid rgba(255,255,255,0.1);
	padding: 0.5rem 0.5rem 0.5rem 0;
}
footer h2 {
	cursor: s-resize;
	font-size: 1rem;
	font-weight: normal;
	margin: 0;
}
footer h2 svg {
	float: right;
	margin-top: 0.3rem;
	transition: transform 0.2s linear;
}
footer h2.active {
	cursor: n-resize;
}
footer h2.active svg {
	transform: rotate(180deg);
}
footer section ul {
	margin-top: 0.2rem;
}
footer a {
	color: #ccc;
	text-decoration: none;
}
footer a:hover {
	color: #fff;
}
footer .contact li {
	padding-left: 3.5rem;
}
footer .contact span:not(.email) {
	display: inline-block;
	margin-left: -3.5rem;
	width: 3.5rem;
}

footer .social {
	clear: both;
	display: block;
	text-align: center;
	padding: 1.5rem 0 0;
}
footer .social li {
	display: inline-block;
}
footer .social svg {
	height: 2rem;
	margin: 0.3rem;
	width: 2rem;
}
footer .social a:hover svg.icon-facebook-square 	{ fill: #3b5998; }
footer .social a:hover svg.icon-youtube-square 		{ fill: #ff0000; }
footer .social a:hover svg.icon-twitter-square 		{ fill: #1da1f2; }
footer .social a:hover svg.icon-linkedin-square 	{ fill: #0077b5; }
footer .social a:hover svg.icon-instagram 			{ fill: #e1306c; }

.facebook 	{ color: #3b5998; }
.youtube 	{ color: #ff0000; }
.twitter 	{ color: #1da1f2; }
.linkedin 	{ color: #0077b5; }
.instagram 	{ color: #e1306c; }

/* Animation for social media channel icons */
footer .social a:hover svg {
	-webkit-animation-duration: 0.4s;
	animation-duration: 0.4s;
}
footer .social a:hover svg.icon-facebook-square {
	-webkit-animation-name: social-facebook;
	animation-name: social-facebook;
}
footer .social a:hover svg.icon-youtube-square {
	-webkit-animation-name: social-youtube;
	animation-name: social-youtube;
}
footer .social a:hover svg.icon-twitter-square {
	-webkit-animation-name: social-twitter;
	animation-name: social-twitter;
}
footer .social a:hover svg.icon-linkedin-square {
	-webkit-animation-name: social-linkedin;
	animation-name: social-linkedin;
}
footer .social a:hover svg.icon-instagram {
	-webkit-animation-name: social-instagram;
	animation-name: social-instagram;
}
@-webkit-keyframes social-facebook 		{ from {fill: #8cc919;} to {fill: #3b5998;} }
@-webkit-keyframes social-youtube 		{ from {fill: #8cc919;} to {fill: #ff0000;} }
@-webkit-keyframes social-twitter 		{ from {fill: #8cc919;} to {fill: #1da1f2;} }
@-webkit-keyframes social-linkedin 		{ from {fill: #8cc919;} to {fill: #0077b5;} }
@-webkit-keyframes social-instagram 	{ from {fill: #8cc919;} to {fill: #e1306c;} }
@keyframes social-facebook 				{ from {fill: #8cc919;} to {fill: #3b5998;} }
@keyframes social-youtube 				{ from {fill: #8cc919;} to {fill: #ff0000;} }
@keyframes social-twitter 				{ from {fill: #8cc919;} to {fill: #1da1f2;} }
@keyframes social-linkedin 				{ from {fill: #8cc919;} to {fill: #0077b5;} }
@keyframes social-instagram 			{ from {fill: #8cc919;} to {fill: #e1306c;} }

footer .copyright {
	background: #141414;
	border-top: 1px solid rgba(255,255,255,0.1);
	clear: both;
	color: #999;
	font-size: 0.86rem;
	margin: 0;
	padding: 1rem 1.5rem;
	text-align: center;
}
footer .copyright p {
	margin-bottom: 0;
	text-align: center;
}
footer .copyright br {
	display: none;
}
footer .copyright a {
	color: rgba(255,255,255,0.8);
}

footer #eWAYBlock {
	padding-bottom: 1rem;
}

@media all and (min-width: 768px) {
	footer a.logo {
		text-align: left;
	}
	footer section.col {
		float: left;
		width: 18%;
	}
	footer section.col.contact {
		float: left;
		width: 28%;
	}
	footer section:hover {
		background: inherit;
	}
	footer h2 {
		cursor: default;
	}
	footer h2 svg.icon {
		display: none;
	}
	footer section ul {
		display: block !important;
	}
	footer .social {
		display: block;
		font-size: 0.9rem;
		padding-right: 1.5rem;
		position: absolute;
		right: 0;
		top: 0;
		width: auto;
	}
	footer .social li {
		float: left;
	}
	footer .social svg {
		height: 1.5rem;
		margin: 0 0 0 0.3rem;
		width: 1.5rem;
	}
}
@media all and (min-width: 900px) {
	footer section.col {
		border: none;
		padding: 0.5rem 1.5rem 1rem 0;
		width: 19%;
	}
	footer section.col.contact {
		padding-right: 0;
		width: 24%;
	}
}
@media all and (min-width: 1028px) {
	footer .copyright br {
		display: block;
	}
}

/*///////////////////////////////////////////////
// Alerts and UI helpers
///////////////////////////////////////////////*/

small.note {
	color: #df5f5f;
	font-weight: normal;
}
p.note {
	color: #9b2823;
	font-weight: bold;
}
.alert {
	background-color: #ebebeb;
	clear: both;
	display: block;
	padding: 10px;
}
.alert.error {
	background-color: #ffecec;
	color: #df5f5f;
}
.alert.warning {
	background-color: #fdf9df;
	color: #eb9a0a;
}
.alert.success {
	background-color: #e0f2d9;
	color: #58a739;
}
.alert.info {
	background-color: #ecf1f9;
	color: #3d6dbf;
}

.error-text 	{ color: #b70d0d; }
.warning-text 	{ color: #eb9a0a; }
.success-text 	{ color: #58a739; }
.info-text 		{ color: #3d6dbf; }

.footinfo {
	color: #3d6dbf;
	margin-left: 0.15rem;	
}

#hint {
	color: #df5f5f;
}
#hint .suggestion {
	font-weight: bold;
	text-decoration: underline;
}
#hint .suggestion .domain {
	color: #9b2823;
}

abbr.required {
	border: none;
	color: #df5f5f;
	cursor: help;
	display: inline-block;
	font-weight: bold;
	margin-left: 0.2rem;
	text-decoration: none;
}
.password-toggle {
	padding-left: 0.5rem;
}

/* Site-wide alert and Missing payment banners */
#site-wide-alert, 
#missing-payment {
	background: none repeat scroll 0 0 #9b2823;
	border-bottom: 1px solid #141414;
	color: #fff;
	font-size: 95%;
	line-height: 1.2;
	margin: 0;
	padding: 0.5rem 3rem;
	position: relative;
	text-align: center;
	z-index: 50;
}

#site-wide-alert.cookie-based {
	display: none;
}
/*#site-wide-alert strong {
	display: block;
	font-size: 2rem;
	line-height: 1;
	padding-bottom: 0.4rem;
}*/
#site-wide-alert a {
	color: inherit;
	position: relative;
	text-decoration: none;
	z-index: 1;
}
#site-wide-alert button,
#missing-payment .button {
	background: #00000066;
	border: 1px solid #ffffff66;
	box-shadow: 0 0 5px #ffffff66;
	display: block;
	margin:	0 auto;
}
#site-wide-alert button:hover {
	background: #8cc919;
}
#site-wide-alert small {
	display: block;
	font-size: 0.8rem;
	margin-top: 1rem;
	text-shadow: 0 0 5px #00000066;
}
#site-wide-alert button#close-alert {
	background: none;
	border: none;
	box-shadow: none;
	height: 2.4rem;
	padding: 0.3rem 0 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 2.4rem;
}
#site-wide-alert button#close-alert:hover {
	background: none;
}

@media all and (min-width: 768px) {
	#site-wide-alert {
		font-size: 1.2rem;
		line-height: 1.6;
		padding: 0.7em 5em;
	}
	#site-wide-alert button,
	#missing-payment .button {
		display: inline-block;
		margin: 0 0 0 1rem;
	}
	#site-wide-alert button.far-right {
		position: absolute;
		right: 1rem;
		top: calc(50% - 0.8rem);
	}
	#site-wide-alert small {
		margin-top: 0.1rem;
	}
	#site-wide-alert button#close-alert {
		right: 1rem;
		top: calc(50% - 1.2rem);
	}
	#site-wide-alert button#close-alert:hover {
		background: #00000044;
	}
}

/* Time left */
.timeleft {
	font-size: 1rem;
	height: 35px;
	line-height: 35px;
	position: absolute;
	text-align: center;
	top: -35px;
	width: 100%;
	z-index: 100;
}
.timeleft em {
	display: none;
}
@media all and (min-width: 768px) {
	.timeleft em {
		display: inline-block;
	}
}

.avatar {
	background-color: #433c4b;
	-webkit-background-clip: padding-box; 
	background-clip: padding-box;
	border-radius: 50%;
	color: #fff;
	font-size: 1.1rem;
	height: 2.4rem;
	line-height: 2.05;
	text-align: center;
	width: 2.4rem;
}

/*///////////////////////////////////////////////
// Overlay and modals
///////////////////////////////////////////////*/

body.modal {
	overflow: hidden;
}

/* Modal (background) */
#modal {
	align-items: center;
	background-color: rgba(0,0,0,0.7);
	display: none;
	height: 100%;
	justify-content: center;
	left: 0;
	overflow: hidden;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}
body.modal #modal {
	display: flex;
}
/* Modal content */
#modal #modal-box {
	background-color: #fefefe;
	border: 1px solid #888;
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
	margin: auto;
	max-height: 80vh;
	max-width: 800px;
	overflow-y: scroll;
	padding: 20px;
	position: relative;
	width: 80vw;
}
/* Modal close button */
#modal .toggle-modal {
	background: transparent;
	color: #aaaaaa;
	height: 32px;
	padding: 0.5rem 0;
	position: absolute;
	right: 0;
	top: 0;
	width: 32px;
	z-index: 999;
}
#modal .toggle-modal:hover,
#modal .toggle-modal:focus {
	background: #fff;
	color: #000;
	cursor: pointer;
	text-decoration: none;
}
#modal #modal-content > *:last-child {
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
}

/* Special modal: Cancel Hub */
#cancel-hub {
	background-color: #9b2823;
	color: #fff;
	padding: 1rem;
}
#cancel-hub form {
	border-top: 1px solid #f99;
	padding: 1rem 0;
}
#cancel-hub button {
	background-color: #f99;
	color: #fff;
	margin: 0;
	padding: 1rem; 
}

/*///////////////////////////////////////////////
// Help articles
///////////////////////////////////////////////*/

#install-web-app ol {
	list-style: decimal;
	padding: 0 0 1rem 3.5rem;
}

.webapp-installation {
	display: grid;
	grid-gap: 1.5rem;
	grid-template-columns: 100%;
	padding: 0 0 1.5rem;
	text-align: center;
}
.webapp-installation img {
	margin: 0 auto;
}
@media all and (min-width: 540px) {
	.webapp-installation {
		grid-template-columns: 1fr 1fr 1fr;
	}
}

/*///////////////////////////////////////////////
// Login and social
///////////////////////////////////////////////*/

.or-separator {
	border-bottom: 1px solid #ddd;
	display: block;
	height: 0;
	margin: 1.5rem auto 3rem;
	text-align: center;
}
.or-separator span {
	background-color: #fff;
	color: #999;
	display: inline-block;
	font-size: 1rem;
	font-style: italic;
	padding: 0.5rem 0.75rem;
	position: relative;
	text-transform: uppercase;
	top: -1.25rem;
}
#login-form {
	display: grid;
}
#login-form > div:last-child {
	order: 3; /* 1 */
}
#login-form > span {
	order: 2;
}
#login-form > div:first-child {
	order: 1; /* 3 */
}

#login-form fieldset button {
	text-align: center;
}
.social-auth button,
#login-form button {
	height: 3rem;
	margin: 0 0 1.5rem;
	text-align: left;
	width: 100%;
}
.social-auth button svg {
	height: 1.1rem;
	margin: 0 1rem -0.15rem 0;
	width: 1.1rem;
}
#login-form fieldset > a {
	display: block;
	font-size: 1rem;
	text-align: center;
}

#login-form .icon-eye-slash {
	display: none;
}
.password-toggle .icon-eye,
.password-toggle .icon-eye-slash {
	margin: 0 0.2rem -0.1rem 0 !important;
}

@supports (display: grid) {
	@media all and (min-width: 420px) {
		#login-form fieldset > a {
			float: right;
			padding-top: 0.8rem;
			width: 12rem;
		}
		#login-form button {
			width: auto;
		}
		.social-auth {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-gap: 0 1.5rem;
			margin: 0 0 1.5rem;
			overflow: auto;
		}
		.social-auth button {
			width: 100%;
		}
	}
	/*@media all and (min-width: 520px) {
		#login-form .social-auth {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr;
		}
	}*/
	@media all and (min-width: 768px) {
		#login-form {
			display: grid;
			grid-template-areas: 'left center right';
			grid-template-columns: 2fr auto 1fr;
			grid-gap: 0 5rem;
			margin-bottom: 1.5rem;
		}
		#login-form fieldset {
			margin: 0;
		}
		#login-form .or-separator {
			border: none;
			border-left: 1px solid #ddd;
			grid-area: center;
			height: 100%;
			margin: 0;
			width: 0;
		}
		#login-form .or-separator span {
			left: -1.6rem;
			top: 50%;
			margin-top: -1.25rem;
		}
		#login-form .social-auth {
			display: block;
			grid-area: right;
			position: relative;
		}
		#login-form .social-auth button {
			height: 3.8rem;
			width: 100%;
		}
		#login-form .social-auth button:last-child {
			margin: 0;
		}
		#login-form fieldset > a {
			float: none;
			padding: 0;
			text-align: left;
		}
	}
}

/*///////////////////////////////////////////////
// General content
///////////////////////////////////////////////*/

ul.content {
	list-style: disc;
	margin: -0.7rem 0 0.7rem 2rem;
}
#security-policy ol {
	counter-reset: item;
	list-style: decimal;
	padding: 0 0 1rem 3.5rem;
}
#security-policy article > ol {
	padding-left: 2.2rem;
}
#security-policy ol > li {
	display: block;
	color: #666666;
}
#security-policy ol > li::before {
	content: counters(item,".") ". ";
	counter-increment: item;
	float: left;
	font-weight: 700;
	margin-left: -3.5rem;
	padding-right: 0.5rem;
	text-align: right;
	width: 3.5rem;
}
#security-policy article > ol > li::before {
	font-family: Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-size: 1.8rem;
	line-height: 1;
}

.bullets {
	list-style: disc;
	margin: -0.7rem 0 0.7rem 4rem;	
}
.decimal {
	list-style: decimal;
	margin: -0.7rem 0 0.7rem 4rem;	
}
.content-image {
	float: right;
	margin: 0 0 1rem 1rem;
}
.pci-dss {
	width: 30%;
}


/*///////////////////////////////////////////////
// Hub selection
///////////////////////////////////////////////*/

#hub-selection {
	padding: 0;
}
#hub-selection label {
	display: none;
}
#hub-change {
	background: #222;
	border: none;
	border-radius: 0;
	border-top: 1px solid rgba(255,255,255,0.1);
	color: #fff;
	height: 3rem;
	margin: 0;
	width: 100%;
}
@media all and (min-width: 768px) {
	#hub-change {
		background: transparent;
		border: none;
		clear: right;
		float: right;
		height: 3.5rem;
		margin: 0 1.5rem 0;
		padding: 0 0.5rem 0 0;
		position: relative;
		width: 300px;
		z-index: 1;
	}
}

/*///////////////////////////////////////////////
// Breadcrumbs
///////////////////////////////////////////////*/

#breadcrumbs {
	background-color: #8cc919;
	color: #fff;
	display: none;
	font-family: 'Playfair Display', serif;
	font-size: 1rem;
	font-style: italic;
	padding: 1rem 0;
}
#breadcrumbs.has-choice {
	padding-right: 330px;
}
#breadcrumbs li {
	display: inline-block;
}
#breadcrumbs li + li:before {
	/*content: '\bb';*/
	/*content: '\203a';*/
	/*content: '-';*/
	content: '›';
	display: inline-block;
	padding: 0 0.2rem;
}
#breadcrumbs li:last-child a {
	text-decoration: none;
}
@media all and (min-width: 768px) {
	#breadcrumbs {
		display: block;
	}
}

/*///////////////////////////////////////////////
// Marketplace layout
///////////////////////////////////////////////*/

#market #main article {
	padding: 0;
}
#market #main h2 {
	display: none;
}

/*///////////////////////////////////////////////
// Categories
///////////////////////////////////////////////*/

#aisles {
	border: none;
	float: left;
	font-family: Poppins, sans-serif;
}
#aisles .toggle-aisles {
	display: none;
}
#aisles ul.list {
	cursor: default;
}
#aisles li {
	padding: 0.3rem 0 0.3rem 2rem;
	position: relative;
}
#aisles a {
	transition: none;
	text-decoration: none;
}
#aisles > ul > li > a {
	font-size: 1.2rem;
	text-transform: uppercase;
}
#aisles ul ul {
	display: none;
}
#aisles ul ul ul {
	border-top: 1px solid #ebebeb;
    margin-left: -1.2rem;
}
#aisles ul ul ul li {
	border-bottom: 1px solid #ebebeb;
	font-family: 'Playfair Display', serif;
	font-size: 1rem;
	font-style: italic;
	padding: 0.2rem 0 0.2rem 1.2rem;
}

#aisles a:hover,
#aisles a.active,
#aisles button:hover,
#aisles a.active + span + button.close {
	color: #8cc919;
}
#aisles .product-count {
	color: #888;
	display: inline-block;
	font-family: 'Playfair Display', serif;
	font-size: 0.9rem;
	font-style: italic;
	padding: 0 0.5rem;
}

/* Button toggles */
#aisles button.open {
	background: none;
	border: none;
	color: inherit;
	cursor: copy;
	font-size: 0;
	left: 0.2rem;
	padding: 0.1rem 0.6rem;
	position: absolute;
	top: 0.3rem;
	transition: none;
}
#aisles button.open:hover {
	background: #e5eaea;
}
#aisles button.open:before {
	content: '+';
	font-size: 1rem;
	font-weight: bold;
}
#aisles button.open.close:before {
	content: '-';
}

/* Autocomplete search box */
#search-products {
	width: 100%;
}
.ui-autocomplete.ui-menu {
	background: #fff;
	border: 1px solid #8cc919;
	border-top: none;
	max-height: 300px;
	max-width: calc(100% - 2rem);
	overflow-x: hidden;
	overflow-y: auto;
}
.ui-autocomplete.ui-menu .no-results,
.ui-autocomplete.ui-menu .search-results {
	align-items: center;
	background: none;
	border-bottom: 1px solid #ebebeb;
	display: flex;
	font-size: 1rem;
	font-family: Poppins, sans-serif;
	min-height: 3.6rem;
	justify-content: left;
	line-height: 1.3;
	margin: 0 !important;
	overflow: hidden;
	padding: 0.2rem;
	padding-left: 1rem;
	position: relative;
}
.ui-autocomplete.ui-menu .search-results:has(img.thumbnail),
#market .ui-autocomplete.ui-menu .search-results,
#shopping-lists .ui-autocomplete.ui-menu .search-results {
	padding-left: 5rem;
}
.ui-autocomplete.ui-menu .search-results .inactive {
	color: #999;
	font-weight: normal;
}
.ui-autocomplete.ui-menu .search-results:hover {
	color: #8cc919;
}
.ui-autocomplete.ui-menu .search-results .thumbnail {
	background: transparent no-repeat 50% 0;
	background-size: auto 100%;
	display: block;
	height: 100%;
	left: 0;
	object-fit: cover;
	position: absolute;
	top: 0;
	width: 4.2rem;
}
.ui-autocomplete.ui-menu .no-results {
	color: #eb9a0a;
	padding-left: 1rem;
}
.ui-autocomplete.ui-menu li:last-child .search-results {
	border: none;
}
@media all and (max-width: 768px) {
	#aisles #aisles-search {
		display: block !important;
	}
}
@media all and (min-width: 768px) {
	#market .ui-autocomplete.ui-menu {
		max-width: 230px;
	}
	#aisles {
		max-width: 230px;
		min-width: 2.6rem;
		overflow: hidden;
		position: relative;
		/*width: 230px;*/
	}
	#aisles .toggle-aisles {
		background: #fff;
		color: #433c4b;
		cursor: pointer;
		display: block;
		height: 2.6rem;
		left: 0;
		margin-top: -0.4rem;
		padding: 0.5rem;
		position: absolute;
		width: 2.6rem;
		z-index: 1;
	}
	#aisles .toggle-aisles:hover {
		color: #8cc919;
	}
	#aisles .toggle-aisles svg {
		width: 1.3rem;
		height: 1.3rem;
	}
	#aisles #aisles-search {
		display: none;
		/*margin-left: -230px;
		position: relative;
		transition: all 0.2s linear;*/
	}
	#aisles #aisles-search h3 {
		padding-left: 2.6rem;
	}

	/* Show the categories on desktop */
	#aisles.active .toggle-aisles {
		/*left: -50px;*/
	}
	#aisles.active #aisles-search {
		display: block;
		margin-left: 0px;
	}
	#aisles #search-products {
		max-width: 230px;
	}
}

/*///////////////////////////////////////////////
// Main marketplace
///////////////////////////////////////////////*/

.main-column {
	border: none;
	padding: 1rem;
}
.main-column .close {
	float: right;
	margin: 0 0 0.8rem;
}
.main-column img {
	height: auto;
	max-height: 100px;
	width: 100%;
}
#product-detail {
	background: #fff;
	bottom: 0;
	height: 100%;
	left: 0;
	overflow-y: scroll;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 998;
}
#product-detail > button {
	position: fixed;
	right: 1rem;
	top: 1rem;
	width: 5.5rem;
	z-index: 999;
}
#product-detail h3 {
	padding-right: 6rem;
}
#product-detail img {
	margin-bottom: 1rem;
	max-height: 300px;
	object-fit: cover;
}
.normal {
	font-family: Arimo,'Helvetica Neue',Arial,Helvetica,sans-serif;
	font-size: 0.95rem;
	font-weight: normal;
}
.main-column .callout {
	display: block;
	background: #ebebeb;
	padding: 0.5rem 1rem;
	margin-bottom: 1rem;
}
#product-detail .unit {
	float: left;
	font-weight: bold;
	width: 50%;
}
#product-detail .price-per {
	float: right;
	font-size: 1rem;
	text-align: right;
	width: 50%;
}
#product-detail .ws-unit {
	clear: both;
	display: block;
}
#product-detail .price {
	margin-bottom: 1rem;
}
#product-detail .price .help {
	text-align: left;
}

@media all and (min-width: 768px) {
	#market #main article {
		overflow: hidden;
		padding: 1.5rem;
	}
	#product-detail {
		overflow-y: auto;
		position: revert;
	}
	#product-detail > button {
		position: revert;
		right: unset;
		top: unset;
		width: auto;
		z-index: 999;
	}
	#product-detail h3 {
		padding-right: 0;
	}
	#product-detail img {
		max-height: 440px;
	}
	#product-detail .unit {
		float: none;
		font-weight: bold;
		margin-right: 1rem;
		width: auto;
	}
	#product-detail .price-per {
		float: none;
		font-size: 1rem;
		text-align: left;
		width: auto;
	}
	#product-detail .price-per:before {
		content: '(';
	}
	#product-detail .price-per:after {
		content: ')';
	}
	.main-column {
		float: left;
		padding: 0 2rem;
		width: calc(100% - 530px);
	}
	#order-column {
		float: left;
		width: 300px;
	}
	@supports (display: grid) {
		#market #main article {
			display: grid;
			grid-template-columns: auto 1fr 300px;
			grid-gap: 2rem;
			overflow: auto;
		}
		.main-column,
		#order-column {
			float: none;
			padding: 0;
			width: auto;
		}
	}
}

/* Set supplier for Hubster only */
.set-supplier {
	display: none;
	margin-top: 1.5rem;
}
body.hubster .set-supplier {
	display: block;
}

/*///////////////////////////////////////////////
// Product listing
///////////////////////////////////////////////*/

#product-list > li {
	background: #fff top center no-repeat; /* f8f8f8 once the images have transparent backgrounds */
	background-size: auto 150px;
	border-top: 5px solid #ebebeb;
	float: left;
	height: 350px;
	margin: 0 1.5rem 1.5rem 0;
	padding: 150px 0 0;
	position: relative;
	transition: background-color 0.2s linear;
	vertical-align: top;
	width: calc(25% - 1.5rem);
}
#product-list > li.ordered {
	border-color: #8cc919;
}
#product-list > li.suggested {
	border-color: #f89920;
}
#products[data-status="Delivered"] #product-list > li {
	border-color: #ebebeb;
}
@supports (display: grid) {
	#product-list {
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: repeat(auto-fill, minmax(159px, 1fr));
	}
	#product-list > li {
		display: grid;
		grid-template-columns: 100%;
		grid-template-rows: 1fr 44px; /*260px 40px*/
		height: auto;
		margin: 0;
		/*min-height: 100%;*/
		width: auto;
	}
	@media all and (min-width: 1540px) {
		#product-list {
			grid-gap: 2rem;
			grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
		}
	}
}
#product-list .product-info {
	background: #fff;
	font-size: 0.9rem;
	height: 100%;
	padding: 0;
}
.category {
	color: #8cc919;
	display: block;
	font-family: 'Playfair Display', serif;
	font-size: 0.95rem;
	font-style: italic;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.3;
	padding: 0.5rem 0;
	position: relative;
}
#product-list > li.ordered .category 	{ color: #8cc919; }
#product-list > li.suggested .category 	{ color: #f89920; }
#product-list h4 a {
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1.4;
	padding-bottom: 0.8rem;
	text-decoration: none;
}
#product-list .unit {
	color: #333;
	font-family: 'Poppins', sans-serif;
	font-size: 1.07rem;
	font-weight: 600;
	letter-spacing: 0;
	padding-bottom: 0.5rem;
}
#product-list .product-info > span {
	display: block;
}
#product-list .quantity,
#product-list .quantity-member {
	float: left;
	padding: 0.8rem 0.8rem 0.8rem 0;
}
#product-list .quantity-member {
	font-size: 1rem;
	font-weight: bold;
	padding-top: 0.2rem;
}
#product-list .product-info .price > .count,
#products[data-status="Delivered"] #product-list .quantity,
#products[data-status="Delivered"] #product-list .quantity-member {
	display: none;
}

/* Adjust products */
.quantity button {
	background-color: #8cc919;
	line-height: 0;
	padding: 0.5rem 0.6rem;
}
.quantity button:hover {
	background-color: #141414;
}
.quantity button.adjust {
	background-color: #433c4b;
}
.quantity button.adjust:hover {
	background-color: #8cc919;
}
.quantity button.adjust.checking {
	background-color: #8cc919 !important;
	cursor: default;
}
.quantity.disabled {
	visibility: hidden;
}
.quantity .number {
	cursor: default;
	display: inline-block;
	font-family: 'Poppins', sans-serif;
	font-size: 1.2rem;
	font-weight: bold;
	line-height: 1;
	padding: 0.4rem;
	text-align: center;
	width: 2.2rem;
}
.quantity.removing .decrease,
.quantity.removing .number {
	/*display: none;*/
}
select.quantity-selection {
	border-radius: 0.2rem;
	height: 2.2rem;
	margin: 0 0.4rem 0 0;
	padding: 0rem 0.5rem;
	vertical-align: top;
	width: 4rem;
}
select.quantity-selection.not-empty {
	background-color: #8cc919;
	border-color: #8cc919;
	color: #fff;
}
select.quantity-selection.not-empty option {
	background-color: #f5fafa;
	border-color: #f0f0f0;
	color: #333;
}
.quantity .adjust {
	display: none;
}
#product-list button {
	margin-bottom: 1rem;
}
.button-holder button,
button.already-split,
button.suggest-split {
	display: none;
	cursor: pointer;
	line-height: 1;
	width: 100%;
}
body.not-suspended button.already-split { display: inline-block; background-color: #aaa; }
body.not-suspended button.suggest-split { display: inline-block; background-color: #c77700; }

@media all and (min-width: 768px) and (pointer: fine) and (hover: hover) {
	#product-detail button.already-split,
	#product-detail button.suggest-split {
		width: auto;
	}
	#product-list button.already-split,
	#product-list button.suggest-split {
		opacity: 0;
	}
	#product-list li:hover button.already-split,
	#product-list li:hover button.suggest-split {
		transition: none;
		opacity: 1;
	}
}

/*///////////////////////////////////////////////
// Product icons (value, showcased, etc)
///////////////////////////////////////////////*/

.product-icons {
	position: absolute;
	top: 3px;
	right: 3px;
	width: 100%;
	z-index: 20;
}
.order-list .product-icons,
.split-list .product-icons {
	position: absolute;
	top: 3px;
	left: 0;
	width: 4.6rem;
	z-index: 20;
}
.product-icons svg {
	border: 2px solid #333;
	border-radius: 50%;
	color: #333;
	float: right;
	height: 26px;
	margin-left: 3px;
	padding: 3px;
	width: 26px;
}
.order-list .product-icons SVG,
.split-list .product-icons svg {
	border-width: 1px;
	height: 21px;
	margin-left: 1px;
	padding: 2.5px;
	width: 21px;
}
/* My Favourites */
.product-icons svg.icon-heart {
	background: #ffecec;
	border: 2px solid #f4524d;
	color: #f4524d;
	cursor: pointer;
	fill: #f4524d;
	float: left;
	/*opacity: 0.5;*/
}
.product-icons .list-toggle.active svg.icon-heart {
	background: #f4524d;
	border-color: #000;
	color: #000;
	fill: #000;/*
	background: #f6ecff;
	border-color: #a94df4;
	color: #a94df4;
	fill: #a94df4;*/
}
/* Showcased */
.product-icons svg.icon-star {
	background: #ffcc00;
}
/* Value indicator */
.product-icons svg.icon-dollar {
	background: #8cc919;
}
/* Chilled product */
.product-icons svg.icon-snowflake-o {
	background: #8df8ff;
}
/* New products */
.product-icons .new-product img {
    float: right;
    width: 2.1rem;
    margin: -2px 0 0 2px;
}
/*.product-icons div.new-product {
	float: left;
	left: 3px;
	position: relative;
	top: -3px;
	width: 2.6rem;
}*/
.category .product-icons div.new-product img {
	float: right;
	margin-top: -1.5rem;
	width: 4rem;
}

/*///////////////////////////////////////////////
// Order column/tabs
///////////////////////////////////////////////*/

#order-tabs {
	padding: 0;
}
#order-tabs .tab-list {
	color: #fff;
	padding: 0;
}
#order-tabs .tab-list li,
#order-tabs .tab-list li.ui-tabs-active {
	background-color: #8cc919;
	margin: 0;
	padding: 0;
	text-align: center;
	width: 20%;
}
#order-tabs .tab-list.past-cutoff li {
	width: 33.3333%;
}
@supports (display: grid) {
	#order-column #order-tabs .tab-list {
		display: grid;
	}
	#order-column #order-tabs .tab-list li {
		grid-row: 1;
		width: auto;
	}
}
#order-tabs .tab-list a {
	display: block;
	float: none;
	font-family: 'Poppins', sans-serif;
	font-size: 0;
	line-height: 1;
	padding: 1rem;
	text-decoration: none;
	transition: none;
}
#order-tabs .tab-list a:hover {
	background-color: #433c4b;
	transition: background-color 0.3s ease;
}
#order-tabs .tab-list li.ui-tabs-active a {
	background: rgba(0,0,0,0.2);
	cursor: default;
}
#order-tabs .tab-list svg {
	display: inline-block;
	height: 1.2rem;
	vertical-align: bottom;
	width: 1.2rem;
}

#order-tabs .order-panel,
#order-tabs #split-panel {
	float: none;
	overflow: auto;
	padding: 1rem;
	width: auto;
}

@media all and (min-width: 540px) {
	#order-column #order-tabs .tab-list.past-cutoff {
		display: none;
	}
	#order-tabs .tab-list a {
		font-size: 1rem;
	}
	#order-tabs .tab-list svg {
		margin-right: 0.4rem;
	}
}
@media all and (min-width: 768px) {
	#order-tabs .tab-list li,
	#order-tabs .tab-list li.ui-tabs-active {
		background-color: #ebebeb;
		border-bottom: 5px solid #8cc919;
		color: #333;
		padding: 0;
		width: 33.3333%;
	}
	#order-tabs .tab-list li a:hover {
		background: #ddd;
		color: #333;
	}
	#order-tabs .tab-list li.ui-tabs-active a {
		background: #8cc919;
		color: #fff;
	}
	#order-tabs .tab-list a {
		font-size: 14px;
		padding: 0.7rem 0;
	}
	#order-tabs .tab-list svg {
		display: none;
	}

	#order-tabs .order-panel {
		padding: 1rem 0;
	}
	#order-tabs .order-list {
		max-height: 400px;
		overflow-y: scroll;
	}
}

/*///////////////////////////////////////////////
// Hubster order control
///////////////////////////////////////////////*/

.empty-order {
	float: right;
}

/* Minimums and delete products/splits */
.minimum-not-reached,
#deleted-products,
#deleted-splits {
	border-bottom: 1px solid #fff;
	clear: both;
	color: #fff;
	font-size: 0.9rem;
	display: block;
	padding: 0.6rem 0.9rem;
}
#deleted-products,
#deleted-splits {
	background: #433c4b;
}
#deleted-products strong,
#deleted-splits strong {
	display: none;
}
#deleted-products em,
#deleted-splits em {
	color: #ff675b;
	font-weight: bold;
}
#deleted-splits em {
	color: #f89920;
}

/* Supplier minimum order totals */
.minimum-not-reached {
	background: #9b2823;
}
.supplier-mark {
	background: #9b2823;
	border-radius: 50%;
	color: transparent;
	cursor: help;
	display: block;
	height: 16px;
	right: 0;
	overflow: hidden;
	position: absolute;
	top: 0.8rem;
	width: 16px;
}
.supplier-11 	{ background: #690; }
.supplier-13 	{ background: #960; }
.supplier-14 	{ background: #069; }
.supplier-126 	{ background: #906; }

/* Chilled delivery minimums */
.chilled-delivery-warning {
	background: #eb9a0a;
	color: #fff;
	display: block;
	line-height: 1.3;
	margin-bottom: 1rem;
	padding: 0.6rem 0.8rem;
}

/*///////////////////////////////////////////////
// Order column products
///////////////////////////////////////////////*/

.order-list {
	clear: both;
}
.order-list li {
	background: no-repeat 0 0.8rem;
	background-size: 4rem;
	display: block;
	margin: 0;
	overflow: auto;
	padding-left: 4rem;
	position: relative;
}
.order-list li + li {
	border-top: 1px solid #ececec;
}
.order-list .holder {
	overflow: auto;
	padding: 0.8rem 0 0.8rem 0.8rem;
}
@media all and (min-width: 768px) {
	.order-list .holder {
		padding: 0.8rem;
	}
}
.order-list h4 {
	line-height: 1.3;
	padding-bottom: 0.4rem;
}
.order-list h4 a {
	text-decoration: none;
}
.order-list .price,
.order-list .unit {
	float: left;
	font-size: 0.9rem;
	width: 50%;
}
.order-list .price {
	text-align: right;
	clear: right;
}
#hubster-order .split .price {
	font-weight: bold;
}
/*#order-column button[disabled] {
	background-color: #ebebeb;
	color: #999;
	cursor: default;
}*/

/* Hubster order */
#hubster-order .price-per,
#hubster-order .ws-unit,
#hubster-order .quantity-member,
#hubster-order .total-member,
#hubster-order .exemption {
	display: none;
}
#hubster-order .quantity,
#hubster-order .total {
	float: left;
	padding-top: 0.4rem;
	width: 50%;
}
#hubster-order .total {
	font-size: 1.8rem;
	line-height: 1.2;
	text-align: right;
}

/* Not enough units ordered */
.not-enough {
	background: #ff675b;
	clear: both;
	color: #fff;
	float: left;
	font-size: 0.8rem;
	margin-top: 0.8rem;
	padding: 0.3rem 0.6rem;
	width: 100%;
}
.not-enough header {
	cursor: ns-resize;
}
.not-enough p {
	display: none;
	margin: 0;
	padding-top: 0.3rem;
}

/* Member order */
.member #products .quantity,
#member-order .price,
#member-order .price-per,
#member-order .ws-unit,
#member-order .quantity,
#member-order .total {
	display: none;
}
#member-order .order-list li {
	background-position: 0 center;
}
#member-order .order-list h4 {
	padding: 0;
}
#member-order .unit,
#member-order .quantity-member,
#member-order .total-member {
	float: left;
	font-size: 1rem;
	padding-top: 0.4rem;
	width: 33.333%;
}
#member-order .quantity-member { 
	text-align: center;
}
#member-order .total-member {
	font-weight: bold;
	text-align: right;
}
/*.order-list li.split {
	background-color: #f9eee0;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #f89920;
}*/
.split-origin {
	color: #f89920;
	font-size: 0.9rem;
}

#member-order .order-list li.split {
	padding: 0.8rem 0.8rem 0.8rem 4.8rem;
}

/* Exemptions */
#member-order li.exempt,
#member-order li.exempt a {
	background-color: #ddd;
	color: #999;
	transition: all 0.4s easing;
}
#member-order li.exempt img {
	opacity: 0.5;
}

#member-order .exemption {
	background-color: #ff675b;
	color: #fff;
	cursor: pointer;
	display: block;
	font-size: 3rem;
	font-weight: bold;
	line-height: 1.5;
	text-align: center;
}
#member-order .exemption:hover {
	background-color: #ff3323;
}
#member-order .exemption.active {
	background-color: #8cc919;
}
#member-order .exemption.active:hover {
	background-color: #6fa222;
}
#member-order.used-exemptions .exemption:not(.active) {
	background-color: #999 !important;
	cursor: not-allowed;
}

#member-order .exclude-count {
	margin: 1rem 0;
}
#member-order.used-exemptions .exclude-count {
	font-weight: bold;
}
@supports (display: grid) {
	#member-order ol {
		overflow-x: hidden;
	}
	#member-order ol li:not(.split) {
		display: block;
		display: grid;
		grid-template-columns: auto 4.4rem;
		left: 0;
		transition: left 0.4s;
		width: calc(100% + 4.4rem);
	}
	#member-order ol li:not(.split).hovering {
		left: -4.4rem;
	}
	#member-order ol li .holder {
		align-self: stretch;
		overflow: auto;
		padding: 0.8rem;
		position: relative;
	}
	#member-order .exemption {
		align-items: center;
		display: grid;
	}
	#member-order .exemption span {
		display: grid;
		justify-self: center;
	}
}

/*///////////////////////////////////////////////
// Splits product list
///////////////////////////////////////////////*/

#split-panel .intro-toggle {
	color: #008ccf;
	cursor: pointer;
	float: right;
	height: 1.7rem;
	padding: 0.2rem 0.5rem;
}
#split-panel .intro-toggle:hover {
	color: #f89920
}
#split-panel .intro {
	display: none;
}

#split-categories {
	display: grid;
	grid-gap: 0.5rem;
	grid-template-columns: auto auto auto auto;
	padding-bottom: 1.2rem;
}
#split-categories button {
	background: #888;
	font-size: 0.9rem;
	padding: 0.3rem 0.5rem;
}
#split-categories button.active {
	background: #6fa222;
}
#split-categories button .icon-check {
	background: #8cc919;
	border-radius: 0.7rem;
	border: 2px solid #6fa222;
	bottom: -1rem;
	box-shadow: 0 0 1px 2px #fff;
	display: none;
	height: 1.3rem;
	padding: 0.2rem;
	position: absolute;
	right: 0.4rem;
	width: 1.3rem;
	z-index: 999;
}
#split-categories button.active .icon-check {
	display: block;
}
@media all and (min-width: 768px) {
	#split-categories button .icon-check {
		bottom: -0.7rem;
	}
}

#filter-split {
	margin-bottom: 1.2rem;
	width: 100%;
}

.split-note {
	color: #008ccf;
	display: none;
	font-size: 0.9rem;
	padding-left: 2rem;
}
.split-note svg {
	display: block;
	float: left;
	margin-left: -1.5rem;
	margin-top: 0.15rem;
}

.split-list li {
	background-color: #f9eee0;
	border-bottom: 1px solid #fff;
	border-top: 1px solid #f89920;
	overflow: auto;
	padding: 0.8rem 0.8rem 0.8rem 4.8rem;
	position: relative;
}
/*.split-list .suggested.active {
	border-right: 5px solid #f89920;
}
.split-list .suggested.active::before {
	border-left: 4rem solid #f89920;
	content: '';
	display: block;
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	z-index: 999;
}*/
.split-list li.filtered,
.split-list li.camouflage {
	border: none;
	height: 0;
	overflow: hidden;
	padding: 0;
}
.split-list img {
	left: 0;
	position: absolute;
	top: 0.8rem;
	width: 4rem;
}
.split-list .price,
.split-list .quantity-member,
.split-list .total-member {
	display: none;
}
.split-list h4 {
	line-height: 1.3;
}
.split-list a {
	text-decoration: none;
}
.split-list .unit,
.split-list .price-per {
	float: left;
	font-size: 0.9rem;
	padding-top: 0.4rem;
	width: 50%;
}
.split-list .price-per {
	text-align: right;
}
.split-list .ws-unit {
	clear: both;
	display: block;
	font-size: 0.9rem;
	padding: 0.2rem 0 0.6rem;
}

.split-list .percentage {
	clear: both;
	font-size: 0.86rem;
	margin: 0 0 0.8rem;
}
.split-list .percentage .progress {
	background-color: #c77700;
	border: 1px solid #c77700;
	border-radius: 0.15rem;
	height: 9px;
	margin: 0;
}
.split-list .percentage .progress div {
	background-color: #f89920;
	margin: 0;
}
.split-list .percentage span {
	display: block;
	padding: 0.2rem 0 0;
}

.split-list button.toggle {
	background-color: #888;
	float: right;
	font-size: 0.9rem;
	font-weight: normal;
	line-height: 1;
	padding: 0.4rem 0.6rem;
	text-transform: none;
}
.split-list button.toggle.interested {
	background-color: #c77700;
}
.split-list button.toggle:hover {
	background-color: #141414;
}

/* Active/completed splits */
.split-list li.suggested.active {
	background-color: #fff;
	color: #c77700;
}
.split-list li.suggested.active .percentage .progress {
	background-color: #6fa222;
	border: 1px solid #6fa222;
}
.split-list li.suggested.active .percentage .progress div {
	background-color: #8cc919;
}
.split-list li.suggested.active .percentage span {
	color: #6fa222;
}

/* Mini split form */
.split-acceptance {
	clear: both;
	display: none;
	line-height: 1.2;
	padding-top: 1rem;
}
.split-acceptance label {
	float: left;
	font-size: 0.9rem;
	width: 49%;
}
.split-acceptance label + label {
	margin-left: 1rem;
}
.split-acceptance input,
.split-acceptance select {
	font-size: 1rem;
	height: 2.7rem;
	margin: 0.4rem 0 0 0;
}
form.split-acceptance button {
	float: right;
	margin: 1.55rem 0 0 0.8rem;
	padding: 0.5rem 0.8rem;
	width: auto; /* 100% */
}
.help.error.extreme {
	font-weight: bold;
}
.split-acceptance .error,
.split-acceptance .help,
#split-suggestion-form .error,
#split-suggestion-form .help {
	clear: left;
	color: #df5f5f;
	display: block;
	margin: 0.6rem 0;
	text-align: left;
}
.split-acceptance .help[hidden],
#split-suggestion-form .help[hidden] {
	display: none;
}
.split-acceptance.loading svg {
	float: none;
}

/* Split overlay */
#split-suggestion-form {
	background-color: #f9eee0;
	padding: 1rem;
}
#split-suggestion-form input,
#split-suggestion-form select {
	height: 3rem;
	margin: 0 0 0 1rem;
	width: 6rem;
}
#split-suggestion-form label {
	display: inline-block;
	margin: 0 1rem 0 0;
}
#split-suggestion-form label[for="split-message"] {
	clear: both;
	display: block;
}
#split-suggestion-form button {
	margin: 0;
}


@media all and (max-width: 584px) {
	#split-suggestion-form button {
		margin-top: 1rem;
		width: 100%;
	}
}
@media all and (min-width: 420px) and (max-width: 768px) {
	.split-list .unit,
	.split-list .price-per,
	.split-list .ws-unit {
		clear: none;
		float: left;
		padding: 0.4rem 0 0.6rem;
		width: 30%;
	}
	.split-list .price-per {
		text-align: center;
	}
	.split-list .ws-unit {
		text-align: right;
		width: 40%;
	}

	.split-acceptance label,
	.split-acceptance label + label {
		float: left;
		margin: 0 1rem 0 0;
		width: calc(33% - 1rem);
	}
	.split-acceptance input {
		height: 2.7rem;
		margin-top: 0.4rem;
	}
	.split-acceptance button {
		margin: 1.5rem 0 0 0;
		width: 34%;
	}
}
@media all and (min-width: 540px) {
	.split-list .percentage {
		cursor: help;
		float: left;
		width: calc(100% - 8rem);
	}
	.split-list button.toggle {
		width: 7rem;
	}
}
@media all and (min-width: 768px) {
	#order-tabs #split-panel {
		padding: 1rem 0;
	}
	.split-list .percentage {
		float: none;
		width: auto;
	}
	.split-list .percentage span {
		display: block;
		max-height: 0px;
		opacity: 0;
		overflow: hidden;
		transition: all 0.2s ease-out;
		transition-delay: 0.5s;
	}
	.split-list .percentage.hover {
		cursor: default;
	}
	.split-list .percentage.hover span {
		transition: none;
	}
	.split-list .percentage.hover span,
	.split-list .percentage:hover span {
		max-height: 6rem;
		opacity: 1;
	}
	.split-list button.toggle {
		width: auto;
	}

	form.split-acceptance input {
		height: 2.7rem;
	}
}

/*///////////////////////////////////////////////
// Order totals
///////////////////////////////////////////////*/

.order-totals ul {
	background-color: #fdfdfd;
	border: 5px solid #f5f5f5;
	font-family: 'Poppins', sans-serif;
	font-size: 0.9rem;
	font-weight: bold;
	margin: 1rem 0;
	padding: 0 1rem;
	text-transform: uppercase;
}
.order-totals ul > li {
	padding: 1rem 0;
	overflow: auto;
}
.order-totals ul > li + li {
	border-top: 1px solid #ebe9eb;
}
.order-totals li.passed-splits {
	color: #f89920;
}
.order-totals li.credit-note {
	color: #6fa222;
}
.order-totals li.includes-gst {
	color: #999;
	font-size: 90%;
}
.order-totals li.total-cost {
	font-size: 1.1rem;
}
.order-totals li.pending {
	font-weight: normal;
	text-transform: none;
}
.order-totals abbr {
	color: #ff675b;
	display: inline-block;
	font-weight: bold;
	padding-left: 0.2rem;
}
.order-totals span {
	float: right;
	text-align: right;
}
.order-totals strong {
	color: #ff675b;
	display: block;
	font-family: 'Poppins', sans-serif;
	font-weight: bold;
	margin-bottom: 1rem;
	text-align: center;
	text-transform: uppercase;
}
.order-totals .alert.error {
	font-size: 0.9rem;
}

/*///////////////////////////////////////////////
// Order detail
///////////////////////////////////////////////*/

.invoice-thanks {
	display: none;
}
.tax-invoice {
	margin: 0 0 1em;
	overflow: auto;
	text-align: right;
}
.tax-invoice h1,
.tax-invoice p {
	display: none;
}
.tax-invoice h2 {
	color: #9b2823;
	float: left;
	margin: 0 0 0.4rem 0;
	text-align: left;
	width: auto;
}
.tax-invoice p {
	clear: left;
	float: left;
	font-size: 0.9rem;
	text-align: left;
	width: auto;
}
.tax-invoice .button {
	width: 8rem;
}
.tax-invoice .button.pay {
	background: #9b2823;
	clear: both;
	float: right;
	margin: 0 0 1rem 1rem;
}
button.pay svg,
.button.pay svg {
	height: 90% !important;
	top: 0.1rem !important;
}

.order-summary dt {
	clear: left;
	float: left;
	font-weight: bold;
	width: 8rem;
}
.order-summary dt::after {
	content: ":";
}
.order-summary dd {
	margin: 0 0 0 8rem;
	padding: 0 0 0.5em 0;
}

.credited {
	color: #9b2823 !important;
}

@media all and (min-width: 480px) {
	.tax-invoice {
		float: right;
		margin: 1em 0;
		width: 14rem;
	}
	.tax-invoice h2 {
		float: none;
		margin: 0 0 0.8rem 0;
		text-align: right;
	}
	.tax-invoice p {
		float: none;
		text-align: right;
	}
}

/*///////////////////////////////////////////////
// Shopping lists (standing orders)
///////////////////////////////////////////////*/

#members-lists > li h2 {
	font-size: 100%;
}
#members-lists > li h2 span {
	color: #999;
	font-size: 80%;
	margin-left: 1rem;
}
.list-settings .list-name, 
.list-settings .frequency {
	height: auto;
	margin: 0.3rem 0 0.5rem;
	max-width: 80%;
	min-width: 3.5rem;
	padding: 0.2rem 0.4rem;
	width: auto;
}
.list-settings .list-name {
	min-width: 6rem;
}
.list-settings .default-list {
	background: #f8f8f8;
	border-radius: 0.1rem;
	border: 1px solid #f0f0f0;
	float: right;
	padding: 0.4rem 0.8rem;
}
.list-settings .default-list:hover {
	border-color: #8cc919;
}
#form-row {
	display: none;
}
.list-products {
	border-bottom: 1px solid #eee;
	border-top: 1px solid #eee;
	margin: 1rem 0;
	padding: 1rem 0;
}
.new-row {
	display: grid;
	grid-template-columns: 1fr auto auto auto auto;
	grid-gap: 1rem;
	margin: 0 0 1rem;
}
.list-name,
.frequency,
.new-row .search, 
.new-row .quantity,
.new-row .unit-price, 
.new-row .total-price {
	display: inline-block;
	height: 3rem;
	margin: 0 0.5rem 0 0;
}
.new-row .search {
	width: 100%;
}
.new-row .search.found {
	background: no-repeat center left;
	background-size: 4.5rem auto;
	padding-left: 5rem;
}
#shopping-lists .ui-autocomplete.ui-menu .search-results {
	padding-left: 5rem;
}
.new-row .unit-price, 
.new-row .total-price,
.list-total {
	padding: 0.9rem 0 0;
	text-align: right;
	width: 5.7rem;
}
.list-total {
	float: right;
	font-weight: bold;
	height: 2.6rem;
	line-height: 2.6rem;
	margin-right: 4.6rem;
	padding: 0;
	width: 12rem;
}
.new-row .unit-price::before,
.new-row .total-price::before,
.list-total::before {
	content: '$';
	display: inline-block;
	/*float: left;*/
	height: 3rem;
	padding-right: 0.1rem;
}
.list-total::before {
	content: 'Total: ' ' $';
	white-space: pre;
}
.unit-price::after {
	content: ' ea';
	display: inline-block;
	font-size: 90%;
	white-space: pre;
}
.new-row .unit-price.empty, 
.new-row .total-price.empty {
	opacity: 0.2;
}
.new-row button.remove {
	height: 3rem;
}
.delete-list span {
	display: inline;
}
button.save {
	background-color: #eb9a0a;
}

.add-row {
	margin: 0 0.5rem 0 0;
}
.add-row.has-icon svg {
	margin-left: 0.15rem;
	width: 2.4rem;
}
.add-row svg, .delete-list svg {
	bottom: -0.1rem;
	left: -0.3rem;
	position: relative;
}
@media all and (max-width: 540px) {
	#shopping-lists .delete .visuallyhidden, 
	#shopping-lists .edit .visuallyhidden {
		clip: auto;
		height: auto;
		margin: 0;
		margin-left: 0.5rem !important;
		overflow: visible;
		position: static;
		text-wrap: nowrap;
		width: auto;
	}

	.list-settings .default-list:not([hidden]) {
		display: block;
		float: none;
	}
	.new-row {
		grid-gap: 0.4rem;
	}
	.list-products {
		border: none;
		padding: 0;
	}
	.new-row div, 
	.new-row input.search, 
	.new-row input.search.found, 
	.new-row select.quantity {
		font-size: 93%;
		margin: 0;
		padding: 0.2rem 0.4rem;
	}
	/*.new-row label:first-child {
		grid-column: span 5;
	}*/
	#shopping-lists .new-row .search.found {
		background: none !important;
	}
	.new-row select.quantity {
		width: 4rem;
	}
	.new-row .unit-price {
		display: none;
	}
	#shopping-lists .new-row .total-price {
		margin-right: 0;
		width: 4rem;
	}
	.list-total {
		margin-right: 0;
	}
	.delete-list span {
		display: none;
	}
	.new-row button.remove {
		padding: 0.3rem 0.5rem;
	}
}

/* Marketplace shopping list selection */
label[for="shopping-list"] {
	display: block;
	padding: 0 0 0.4rem 0;
}
select#shopping-list {
	width: 100%;
}

/*///////////////////////////////////////////////
// Dashboard
///////////////////////////////////////////////*/

.join-additional {
	float: right;
	margin-bottom: 1rem;
}
.join-additional + h2 {
	height: 2.6rem;
	line-height: 1;
	padding-top: 0.4rem;
}

#hublist h3 .address {
	color: #999;
	display: block;
	font-size: 0.8rem;
	text-transform: none;
}
#hublist > li span.active,
#hub-profile div.operational .status {
	color: #58a739;
}
#hublist > li span.inactive,
#hublist > li:not(.operational) .status,
#hub-profile .status {
	color: #df5f5f;
	font-weight: bold;
}
.detail {
	display: block;
	font-size: 85%;
}
.detail.desktop {
	display: none;
}

/* Hub member list */
.memberlist {
	padding-top: 1rem;
}
.memberlist h5 {
	font-size: 1.1rem;
	margin: 0;
}
body.member .memberlist h5 {
	line-height: 2.4rem;
}
.memberlist .avatar {
	left: 0;
	position: absolute;
}
.memberlist > ul {
	padding-top: 1rem;
}
.memberlist > ul > li {
	min-height: 5.5rem;
	overflow: auto;
	padding: 0 0 1rem 3rem;
	position: relative;
}
.member .memberlist > ul > li {
	min-height: 3.5rem;
}
.memberlist .actions {
	display: block;
	float: right;
	padding-top: 0.5rem;
}
.memberlist .actions li {
	background-color: #f89920;
	border-radius: 50%;
	float: left;
	height: 2rem;
	line-height: 2rem;
	margin: 0 0 0.5rem 0.5rem;
	padding: 0;
	text-align: center;
	width: 2rem; 
}
.memberlist .actions li.inactive {
	background-color: #ccc;
}
.memberlist .actions a {
	display: block;
	height: 2rem;
	width: 2rem;
}
.memberlist .icon {
	height: 1rem;
	margin-top: 0.5rem;
	width: 1rem; 
}

.hub-stats {
	font-size: 1.1rem;
	margin: 0 0 1rem;
	overflow: auto;
}
.hub-stats li strong {
	display: inline-block;
	/*width: 10rem;*/
}
body.member .balance {
	display: none;
}
.balance {
	color: #090;
}
.not-paid .balance {
	color: #9b2823;
}

/* RecycleSmart program */
.recycle-smart {
	cursor: help;
	float: right;
	font-weight: bold;
}
.recycle-smart svg {
	height: 1.5rem;
	vertical-align: sub;
	width: 1.5rem;
}
/*.recycle-smart:not(.inactive)::before {
	background: #090;
	content: '';
	display: inline-block;
	height: 1rem;
	margin: 0 0.2rem -0.07rem 0;
	width: 1rem;
}*/

.action-buttons {
	display: grid;
	grid-gap: 0.7rem;
	margin-bottom: 1.5rem;
}
.action-buttons li a,
.action-buttons li button,
.admin-buttons a.button {
	align-items: center;
	display: flex;
	height: 100%;
	justify-content: center;
	width: 100%;
}
.action-buttons li:last-child a {
	background: #eb9a0a;
}
.columns > ul {
	margin-bottom: 1.5rem;
}

@media all and (min-width: 480px) {
	.hub-stats li strong {
		width: auto;
	}
	.action-buttons {
		grid-template-columns: 1fr 1fr;
	}
}
@media all and (min-width: 540px) {
	.hub-stats li {
		float: left;
		width: 50%;
		padding-bottom: 1rem;
	}
	@supports (display: grid) {
		.hub-stats {
			display: grid;
			grid-template-columns: 1fr 1fr;
		}
		.hub-stats li {
			float: none;
			padding: 0;
			width: auto;
		}
	}

	.memberlist > ul > li {
		min-height: unset;
		padding: 0 15.2rem 1rem 3rem;
	}
	.memberlist .detail.desktop {
		display: block;
	}
	.memberlist .actions {
		padding-top: 1.4rem;
		position: absolute;
		right: 0;
		top: 0;
		width: 15rem;
	}
}
@media all and (min-width: 768px) {
	.hub-stats li {
		float: left;
		width: 25%;
	}
	.columns > ul {
		float: left;
		width: 25%;
	}
	.action-buttons {
		grid-template-columns: repeat(4, auto) 1fr;
	}
	body#dashboard.hubster .action-buttons {
		grid-template-columns: repeat(6, auto) 1fr;
	}
	.admin-buttons a.button,
	.action-buttons a.button,
	.action-buttons button {
		float: right;
		width: auto;
	}
	body#dashboard.hubster .action-buttons li a,
	body#dashboard.hubster .action-buttons li button {
		float: none;
		width: 100%;
	}

	@supports (display: grid) {
		.hub-stats {
			grid-gap: 0.7rem;
			grid-template-columns: 1fr 1fr 1fr 1fr;
		}
		.hub-stats li {
			float: none;
			width: auto;
		}
	}
}
@media all and (min-width: 960px) {
	@supports (display: grid) {
		.memberlist > ul {
			display: grid;
			grid-template-columns: 1fr 1fr;
			grid-column-gap: 5rem;
			column-gap: 5rem;
		}
	}
}

/*///////////////////////////////////////////////
// Hubster benefits 
///////////////////////////////////////////////*/

.print-pdf {
	float: right;
}
.fin-year {
	color: #eb9a0a;
}
.grand-total {
	color: #6fa222;
}

.divvydends em {
	padding-right: 2px;
}

/*///////////////////////////////////////////////
// Progress bar
///////////////////////////////////////////////*/

#progress-css {
	background-color: #999;
	display: block;
	height: 5px;
	width: 100%;
}
#progress-css #progress-value {
	background-color: #222;
	height: 5px;
	transition: background-color 2s linear;
	width: 0%;
}
#progress-css #progress-value.starting {
	background-color: #990099;
	transition: none;
}
progress#progress-bar {
	-webkit-appearance: none;
	display: block;
	height: 5px;
	width: 100%;
}
progress#progress-bar::-webkit-progress-bar {
	background-color: #999;
}
progress#progress-bar::-webkit-progress-value {
	background-color: #222; /*#f89920*/
	transition: background-color 1s ease;
}
progress#progress-bar.starting::-webkit-progress-value {
	background-color: #990099;
	transition: none;
}

/*///////////////////////////////////////////////
// Supplier selection
///////////////////////////////////////////////*/

.supplier-listing {
	border-top: 1px solid #eee;
	max-width: none;
}
.supplier-listing li {
	border-bottom: 1px solid #eee;
	margin: 1.5rem 0;
	padding-bottom: 1rem;
}
.supplier-listing li.backyard-grower h3 {
	color: #690;
}
.supplier-listing li.backyard-grower h3::after {
	color: #8cc919;
	content: '[Backyard grower!]';
	display: inline-block;
	font-size: 0.9rem;
	margin-left: 0.5rem;
	text-transform: uppercase;
}
.supplier-listing .grower {
	cursor: help;
	display: inline-block;
	margin-right: 0.5rem;
}
.supplier-listing label {
	color: #8cc919;
	cursor: pointer;
	display: block;
	padding: 0 0 0.2rem;
}

.supplier-listing label {
	align-items: center;
	background-color: #8cc919;
	border-radius: 0.2rem;
	color: #fff;
	cursor: pointer;
	display: flex;
	height: 44px;
	margin-bottom: 0.5rem;
	padding: 0.2rem 0.6rem;
}
.supplier-listing label.disabled {
	background: #999;
	color: #fff !important;
	cursor: not-allowed;
}

.supplier-listing input {
	margin-bottom: 0.18rem;
}
.supplier-listing h3 {
	margin-bottom: 0.15rem;
}
.supplier-listing p {
	margin-bottom: 0.6rem;
}
.supplier-listing p.location {
	color: #999;
	font-size: 0.9rem;
	font-style: italic;
}
.supplier-listing button {
	margin-left: calc(50% - 3rem);
	width: 6rem;
}

.cat-list li,
.single-cat {
	background-color: rgba(248, 153, 32, 0.1);
	border-radius: 0.2rem;
	border: none;
	box-shadow: 1px 1px 1px #eee;
	color: #f89920;
	display: inline-block;
	font-size: 0.9rem;
	line-height: 1.6;
	margin: 0 0.4rem 0.3rem 0;
	padding: 0.2rem 0.6rem;
}
.single-cat {
	font-size: 1.0rem;
	position: relative;
	top: -0.1rem;
}

@media all and (min-width: 768px) {
	.supplier-listing label {
		display: block;
		float: right;
		height: auto;
		margin: 0;
	}
	.supplier-listing label:hover {
		color: #555;
	}
}

.next-delivery {
	color: #df5f5f;
	display: inline-block;
	font-size: 0.9rem;
	font-weight: normal;
	text-transform: none;
}

.supplier-listing .next-delivery {
	background-color: #ffecec;
	border-radius: 0.2rem;
	padding: 0.2rem 0.5rem;
}
.supplier-listing .location span {
	display: inline-block;
	margin-right: 0.5rem;
}

#products h3 .next-delivery {
	display: block;
	font-size: 0.8rem;
	line-height: 1.3;
	padding: 0.2rem 0;
}
#products h3 .next-delivery svg {
	margin-bottom: -0.15rem;
}

@media all and (min-width: 1366px) {
	#products h3 .next-delivery {
		display: inline-block;
		padding-left: 0.5rem;
	}
}

#product-list .next-delivery {
	background-color: #ffecec;
	border-bottom: 1px solid #df5f5f;/*
	border-radius: 0 0 0.25rem 0.25rem;
	box-shadow: 0px 2px 0px 0px #df5f5f;*/
	font-size: 100%;
	font-weight: bold;
	left: 0;
	margin: 0;
	padding: 0.35rem 0.5rem;
	position: absolute;
	text-align: left;
	top: 0;
	width: 100%;
	z-index: 10;/*
	border-top: 1px solid #df5f5f;
	left: -4rem;
	padding: 0.2rem 2rem;
	text-align: center;
	transform: rotate(-45deg);*/
}
/*#product-list .next-delivery {
	border-width: 2px;
	-webkit-animation: sexyBorder 2s infinite;
	animation: sexyBorder 2s infinite;
}
@-webkit-keyframes sexyBorder {
	0% 		{ border-color: #df5f5f; }
	50% 	{ border-color: #ff8f00; }
	100% 	{ border-color: #df5f5f; }
}
@keyframes sexyBorder {
	0% 		{ border-color: #df5f5f; }
	50% 	{ border-color: #ff8f00; }
	100% 	{ border-color: #df5f5f; }
}
*/
#product-list .next-delivery svg {
	height: 1.4rem;
	margin-bottom: -0.3rem;
	width: 1.4rem;/*
	display: block;
	margin: 0 auto;*/
}
#product-list .next-delivery span {
	cursor: default;
	display: inline-block;
	line-height: 1;
	padding: 0 0 0 0.25rem;
}

#product-list .next-delivery.badge {
	padding: 0.2rem 0.5rem;
	text-align: center;
	width: 3rem;
}
#product-list .next-delivery.badge svg {
	height: 1.8rem;
	margin-bottom: -0.2rem;
	width: 1.8rem;
}
#product-list .next-delivery.badge span {
	display: block;
	padding: 0 0 0.1rem;
	text-transform: uppercase;
}
#product-list .next-delivery.badge span:nth-child(2) { font-size: 1.6rem; }
#product-list .next-delivery.badge span:nth-child(3) { font-size: 0.9rem; }
#product-list .next-delivery.badge span:nth-child(4) { font-size: 0.85rem; }

/*///////////////////////////////////////////////
// Generate splits email
///////////////////////////////////////////////*/

#supplier-select ul {
	border-bottom: 1px solid #999;
	border-top: 1px solid #999;
	margin: 1rem 0;
	padding-bottom: 1rem;
}
#supplier-select li {
	display: grid;
	padding-top: 1rem;
}

#email-products th.subheading {
	border-bottom: 1px solid #999;
	border-top: 1px solid #999;
	padding: 0.5rem 1rem;
}
#email-products th.subheading label,
#email-products .filter {
	color: #8cc919;
	cursor: pointer;
	font-weight: bold;
	padding: 0 1rem;
}
#email-products .filter {
	column-gap: 1rem;
	display: grid;
	font-size: 15px;
	font-weight: normal;
	grid-template-columns: 1fr 5rem auto;
	margin: 0 0 1.5rem;
	max-width: 400px;
	padding: 0;
}
#email-products .filter span {
	grid-column: span 3;
}
#email-products .filter select,
#email-products .filter input,
#email-products .filter button {
	font-size: 15px !important;
	height: 2.5rem;
	margin: 0;
	padding: 0.1rem 0.5rem;
}
#email-products .filter input#filter-number {
    width: 5rem !important;
}
#email-products label {
	cursor: pointer;
}
#email-products input {
	margin-right: 1rem;
}
#email-products button {
	float: right;
}
#email-products .company,
#email-products .company label {
	color: #f89920;
}

@media all and (min-width: 768px) {
	#email-products .filter {
		column-gap: 0.5rem;
		float: right;
		grid-template-columns: auto auto 5rem auto;
		margin: 0;
		max-width: unset;
	}
	#email-products .filter span {
		grid-column: auto;
	}
	#email-products .filter select,
	#email-products .filter input,
	#email-products .filter button {
		height: 1.9rem;
		margin: 0 0 0 0.3rem;
	}
}

/*///////////////////////////////////////////////
// Suspended weeks
///////////////////////////////////////////////*/

#skip-weeks button.skip-cancel {
	background-color: #e13c26;
	float: right;
	margin: 0 0 0.8rem 1.5rem;
}
#skip-weeks button.skip-cancel:hover {
	background-color: #333;
}

#skip-weeks li.current {
	background-color: #fdf9df;
	background-color: rgba(253, 249, 223, 0.25);
	color: #eb9a0a;
}
#skip-weeks li.current strong {
	display: inline-block;
	font-size: 90%;
	padding-left: 1rem;
	text-transform: capitalize;
}

#suspended {
	display: grid;
	grid-gap: 1.5rem;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	margin-bottom: 1.5rem;
	max-width: none;
}
#suspended > p:first-child {
	display: block;
}
#suspended .suspension-month {
	border: 1px solid #ccc;
	display: block;
}
#suspended .suspension-month > strong {
	background-color: #ebebeb;
	border-bottom: 1px solid #ccc;
	display: block;
	padding: 0.5rem 1rem;
	text-align: left;
}
#suspended li {
	display: block;
	padding: 0;
}
#suspended label {
	cursor: pointer;
	display: block;
	padding: 0.5rem 1rem;
}
#suspended li input {
	height: 1rem;
	margin: 0 0.8rem 0 0;
}
#suspended li svg {
	margin-top: 0.4rem;
}
#suspended li:empty {
	display: none;
}
#suspended li.suspended {
	color: #fff;
	background-color: #ff675b;
}
#suspended li.removed {
	color: #fff;
	background-color: #8cc919;
}
#suspended li.christmas {
	color: #fff;
	background-color: #e13c26;
	background: #e13c26 url('/images/site/mistletoe.png') no-repeat 98% 50%;
	background-size: 2.5rem;
}
#suspended li.cutoff {
	color: #999;
}
#suspended li.cutoff label {
	cursor: default;
}
#suspended li.cutoff span {
	display: block;
	font-size: 0.9rem;
	font-weight: bold;
	padding-left: 1.4rem;
	text-transform: uppercase;
}

/*///////////////////////////////////////////////
// Wishlist and showcased products
///////////////////////////////////////////////*/

#showcase-products #container {
	overflow: unset;
}
#my-wishlist {
	position: relative;
}
#max-count {
	font-weight: bold;
}
#wish-panel {
	margin: 0 0 15px 0;
}

@media all and (min-width: 600px) {
	/*#wish-panel {
		float: left;
		width: 170px;
	}*/
	#available {
		float: right;
		margin: 0 15px 15px 0;
		padding-left: 1rem;
		width: calc(100% - 190px);
	}

	#showcase-products #main {
		display: flex;
		flex-wrap: wrap;
	}
	#showcase-products .article {
		flex-basis: 0;
		flex-grow: 999;
		min-width: 40%;
	}
	#showcase-products #wish-panel {
		flex-grow: 1;
		flex-basis: 170px;
		align-self: start;
		position: sticky;
		top: 1rem;
		width: 170px;
	}
}
@media all and (min-width: 768px) {
	#showcase-products #wish-panel {
		flex-basis: 320px;
		width: 320px;
	}
	/*#wish-panel {
		position: fixed;
		width: 320px;
	}*/
	#available {
		width: calc(100% - 340px);
	}
	#available .ui-accordion-content:last-child {
		padding-bottom: 0;
	}
}

#available h2 {
	font-size: 1.5rem;
	padding-bottom: 0.8rem;
	padding-top: 0.8rem;
	position: relative;
}
#available h2:not(:first-child)::before {
	border-top: 1px solid #eee;
	content: '';
	display: block;
	height: 1px;
	position: absolute;
	top: 0;
	width: 100%;
}
#available h3 {
	background: #ebebeb;
	font-size: 1.2rem;
	margin: 0 0 10px;
	padding: 10px;
}
#showcase-products article li {
	background: #f8f8f8;
}
#showcase-products article li p {
	line-height: 1;
	margin: 0;
	padding: 0.5rem;
}
#showcase-products article li p span {
	color: #555;
	float: right;
	font-size: 0.85rem;
}
#showcase-products article strong {
	display: block;
	margin: 0 0 0.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#showcase-products article ul {
	list-style-type: none;
	margin: 0;
	overflow: auto;
	padding: 0;
}
#showcase-products article li {
	border: none; /*1px solid #f8f8f8;*/
	cursor: url('/images/site/icon-tick.png'), pointer; 
	float: left;
	font-size: 0.9rem;
	margin: 0 1.5rem 1.5rem 0;
	padding: 0;
	position: relative;
	width: 135px;
}
#showcase-products article li.loading {
	cursor: url('/images/site/icon-loading.gif'), pointer; 
}

#showcase-products article li span.image {
	background-position: center center;
	background-size: cover;
	display: block;
	height: 80px;
	position: relative;
}
#showcase-products article li:hover {
	border-color: #0c0;
	background: #ccffcc;
}
#showcase-products article li:hover strong {
	background: none;
}
#showcase-products article li:hover span.image {
	opacity: 0.3;
}

#available.done li {
	cursor: default; 
}
#available.done li:hover {
	background: transparent;
	border-color: #ccc;
}
#available.done li:hover span.image {
	opacity: 1;
}

#wish-panel {
	background-color: #fed;
	overflow: auto;
	padding: 0.7rem 1.5rem 1.5rem;
	/*position: fixed;
	top: 20px;
	right: 20px;
	bottom: 20px;*/
}
#wish-panel h3 {
	font-size: 1.2rem;
	margin: 0 0 0.7rem;
}
#wish-panel li {
	cursor: url('/images/site/icon-cross.png'), pointer; 
}
#wish-panel li:hover {
	border-color: #c00;
	background: #ffcccc;
}
#wish-panel li:nth-child(even) {
	margin-right: 0;
}
#wish-panel form > p {
	display: block;
	font-size: 1rem;
	line-height: 1.4;
}
#wish-panel button {
	margin: 0;
}
#wish-panel.done {
	background-color: #8cc919;
}
#wish-panel.done .instructions {
	display: none;
}
#wish-panel.done button {
	background-color: #fff;
	color: #8cc919;
	display: block;
}

@supports (display: grid) {
	#showcase-products article ul {
		display: grid;
		grid-gap: 1.5rem;
		grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
	}
	#showcase-products article li {
		float: none;
		margin: 0;
		width: 100%;
	}
	#showcase-products article ul {
		grid-template-columns: repeat(auto-fill, minmax(120px,1fr));
	}
	@media all and (min-width: 600px) and (max-width: 768px) {
		#wish-panel ul {
			grid-template-columns: 100%;
		}
	}
}

#wishlist-results button[disabled].success {
	background-color: #333 !important;
	color: #8cc919;
}
#wishlist-results button[disabled].success svg {
	margin: 0 0.6rem 0.2rem 0;
	vertical-align: middle;
}

/*///////////////////////////////////////////////
// Email template administration
///////////////////////////////////////////////*/

span.merge-tags {
	background: #f5fafa;
	border: 1px solid #f0f0f0;
	display: grid;
	grid-gap: 0.5rem;
	grid-template-columns: 1fr 1fr;
	padding: 0.8rem 1rem;
}
span.merge-tags strong {
	color: #666;
	cursor: copy;
	font-weight: normal;
}
span.merge-tags strong:hover {
	color: #eb9a0a;
}

/*///////////////////////////////////////////////
// Checkbox list
///////////////////////////////////////////////*/

.checkboxlist .checkboxes {
	padding: 1rem 0 0;
}
.checkboxlist .checkboxes label {
	display: block;
	font-size: 1.1rem;
}
.checkboxlist .checkboxes label.new-group {
	border-top: 1px solid #ddd;
	margin-top: 0.5rem;
	padding-top: 0.5rem;
}

.checkboxlist.paragraphs .checkbox {
	display: inline-block;
	padding-right: 2rem;
}
p.checkbox label {
	/* grid-column: 1 / -1; // Span all columns */
	grid-column: 2;
}

.toggle-check {
	background: #444;
	color: #f89920;
	display: block;
	font-size: 0.8rem;
	font-weight: bold;
	margin: 0.5rem 0;
	padding: 0.1rem 0.6rem;
	text-transform: none;
}
.toggle-check.checked {
	background: #f89920;
	color: #fff;
}

@media all and (min-width: 768px) {
	.checkboxlist .checkboxes {
		column-count: 3;
		column-gap: 1rem;
	}
}

/*///////////////////////////////////////////////
// Page access permissions
///////////////////////////////////////////////*/

.defaults {
	display: block;
	padding: 1rem 0;
}
.defaults .toggle-check {
	display: unset;
	font-size: 1rem;
	margin: 0;
	text-transform: uppercase;
}

/*///////////////////////////////////////////////
// Credit request
///////////////////////////////////////////////*/

.request-credit {
	color: #6fa222;
}
.credit {
	color: #6fa222;
	float: right;
	position: relative;
}
.view-order svg,
.credit-request svg.icon-rotate-left {
	height: 1.7rem;
	width: 1.7rem;
}
.credit-request svg.icon-dollar {
	height: 0.8rem;
	left: 0.5rem;
	position: absolute;
	top: 0.4rem;
	width: 0.8rem;
}
#credit-request-form #quantity {
	width: 7rem;
}
#credit-request .evidence {
	display: none;
}
#credit-request .accounted-for {
	color: #f89920;
	font-weight: bold;
}
#credit-request .accounted-for.error {
	color: #df5f5f;
}

#credit-request-form .whole-credit {
	clear: right;
	float: right; 
	margin: 0 0 0.5rem 0;
}

.credit-quantities {
	align-items: center;
	display: grid;
	font-size: 1.1rem;
	padding-top: 1rem;
	width: 100%;
}
.credit-quantities label {
	padding: 0.3rem 0;
}
.credit-quantities label span {
	color: #666;
	display: inline-block;
	font-weight: bold;
	padding-left: 0.2rem;
	padding: 0;
	width: 3rem;
}
.credit-quantities input {
	-webkit-appearance: none;
	appearance: none;
	color: #666;
	font-size: 1.1rem !important;
	height: auto;
	line-height: 1;
	margin: 0;
	padding: 0.2rem 0.3rem;
	text-align: center;
	width: 2.4rem;
}
.credit-quantities input::-webkit-inner-spin-button, 
.credit-quantities input::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	appearance: none;
}

.credit-quantities input.invalid,
.credit-quantities input:invalid {
	background-color: #ffecec;
	border-color: #df5f5f;
	color: #9b2823;
}
.credit-quantities input.full {
	background-color: #e0f2d9;
	border-color: #58a739;
	color: #090;
}
.credit-quantities input.partial {
	background-color: #fff5e9;
	border-color: #f89920;
	color: #f70;
}

.credit-quantities input.invalid + span,
.credit-quantities input:invalid + span { color: #9b2823; }
.credit-quantities input.full + span 	{ color: #090; }
.credit-quantities input.partial + span { color: #f70; }

@media all and (min-width: 540px) {
	#credit-request-form .whole-credit {
		float: none;
		margin: 0.5rem 0;
	}
}
@media all and (min-width: 768px) {
	.credit-quantities {
		grid-template-columns: 1fr 1fr;
		padding-top: 0;
	}
}

/*///////////////////////////////////////////////
// Credit management
///////////////////////////////////////////////*/
#credit-management button#approve-all {
	background-color: #8cc919;
	float: right;
	margin: 1rem 0;
}
#credit-management button#reject-all {
	background-color: #f4524d;
	float: left;
	margin: 1rem 0;
}
#credit-management .admintable input[type="checkbox"] {
	margin: 0;
}

#credit-management tr.warehouse {
	background-color: #fed;
}
#credit-management p.alert {
	margin-top: 1.2rem;
}
#credit-management dd.pending {
	color: #f89920;
	font-weight: bold;
}
#credit-management dd.approved {
	color: #8cc919;
	font-weight: bold;
}
#credit-management dd.rejected,
#credit-management .previously-credited {
	color: #f4524d;
	font-weight: bold;
}
#credit-management a.button {
	margin-bottom: 1rem;
	width: 100%;
}
#credit-management a.button.approve {
	background-color: #8cc919;
}
#credit-management a.button.reject {
	background-color: #f4524d;
}
#credit-management q {
	font-style: italic;
}
#credit-management q:before,
#credit-management q:after {
	content: '"';
}
#credit-management .email-message {
	margin-bottom: 1.5rem;
	overflow: auto;
}
#credit-management .evidence {
	display: block;
	margin: 1rem auto 0;
	/*max-width: 720px;*/
	width: 100%;
}

@media all and (min-width: 540px) {
	#credit-management a.button {
		width: auto;
	}
	#credit-management a.button.approve,
	#credit-management a.button.reject {
		float: right;
		margin-left: 0.5rem;
	}
}

#summary-control {
	margin: 1rem 0;
	text-align: right;
}
#credit-management #summary-control {
	float: right;
	margin-top: 0;
	width: fit-content;
}
#toggle-arrows {
	cursor: pointer;
	display: block;
}

/*///////////////////////////////////////////////
// Packing manifests for packers
///////////////////////////////////////////////*/

#run-selection {
	/*display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	gap: 1.5rem;
	justify-content: center;*/
	align-items: stretch;
	display: grid;
	gap: 1.5rem;
	grid-template-columns: repeat(auto-fit, minmax(265px, 1fr));
	justify-items: stretch;
}
#run-selection a.button {
	display: block;
	width: 100%;
	overflow: auto;
}
#run-selection strong {
	float: left;
	text-align: left;
}
#run-selection.pantry strong {
	border-bottom: 1px solid #ffffff55;
	display: block;
	margin-bottom: 0.35rem;
	padding-bottom: 0.5rem;
	width: 100%;
}
#run-selection span {
	float: right;
	font-size: 0.9rem;
	font-weight: normal;
	text-transform: none;
}
#run-selection span.orderID {
	float: left;
}

@media all and (min-width: 440px) {
	#run-selection a.button {
		height: 100%;
		padding: 1rem 1.5rem;
		min-width: 10rem;
		width: auto;
	}
	#run-selection.pantry a.button {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr auto;
	}
	#run-selection strong {
		font-size: 1.2rem;
		grid-column: 1 / span 2;
		text-align: center;
	}
	#run-selection.pantry span {
		text-align: right;
	}
	#run-selection.pantry span.orderID {
		text-align: left;
	}
	#run-selection.chilled strong,
	#run-selection.chilled span {
		display: block;
		float: none;
		text-align: center;		
	}
}

#chilled-packers-manifests .runID {
	background: #888;
	border-radius: 3px;
	color: #fff;
	display: inline-block;
	font-size: 130%;
	padding: 0 0.5rem;
	vertical-align: middle;
}

#manifest-check h3 {
	align-content: center;
	color: #999;
	height: 4rem;
	line-height: 1.3;
	position: relative;
	top: 0;
}
#manifest-check h3:hover,
#manifest-check h3.started,
#manifest-check h3.active,
#manifest-check h3.ui-state-active {
	color: #333;
}
#manifest-check h3 strong {
	display: inline-block;
	margin: 0;
	width: 2rem;
}
#manifest-check h3 span.userID {
	display: inline-block;
	font-weight: normal;
	margin: 0 0 0 0.5rem;
}

#manifest-check div h3 {
	border-bottom: 1px solid #ccc;
	font-size: 100%;
	padding-left: 1.5rem;
}
#manifest-check li {
	padding: 1.5rem 0;
	text-align: center;
}
#manifest-check h4 {
	align-self: center;
	font-size: 1.8rem;
}
#manifest-check span.userID {
	display: block;
	font-size: 0.9rem;
	margin-top: 0.4rem;
	text-transform: none;
}
#manifest-check img {
	/*height: 100%;
	object-fit: cover;*/
	margin: 0 auto;
	max-height: 200px;
	max-height: -webkit-fill-available;
}
#manifest-check small {
	display: block;
    margin-top: 1.5rem;
}
#manifest-check strong {
	display: block;
	margin: 1rem 0;
}
#manifest-check input {
	font-size: 1.4rem !important;
	font-weight: bold;
	margin: 0 0 0.4rem;
	text-align: center;
	width: 9rem;
}
#manifest-check .buttons {
	display: grid;
	grid-gap: 1.5rem;
	grid-template-columns: 1fr 1fr 1fr;
	padding-bottom: 1.5rem;
}
#manifest-check svg {
	display: block;
	margin: 0 auto 0.4rem;
}

#manifest-check h3.packed {
	color: #8cc919;
}
#manifest-check li.packed {
	color: #bbb !important;
}
#manifest-check li.packed img {
	opacity: 0.3;
}
#manifest-check li.packed .button:not(.selected) {
	background: #bbb !important;
}

#manifest-check li.summary {
	grid-template-rows: 0 1fr auto auto 1fr;
}
#manifest-check .summary strong {
	display: inline-block;
	margin: 0;
}
.summary .button {
	display: block;
	margin: 1rem auto;
	width: 10rem;
}

#manifest-check .review {
	margin: 1rem auto 2rem;
	max-height: 22.2rem;
	overflow-x: auto;
	padding-right: 1rem;
	text-align: left;
}
#manifest-check .review dt {
	font-weight: bold;
	width: 2rem;
}
#manifest-check .review dd {
	padding-left: 4rem;
}
#manifest-check .review dd::before {
	content: 'x';
	display: block;
	float: left;
	margin-left: -2rem;
	width: 2rem;
}

/*#manifest-check ul { scrollbar-color: #333 #ccc; scrollbar-width: thin; }*/
#manifest-check ul::-webkit-scrollbar { width: 5px; }
#manifest-check ul::-webkit-scrollbar-track { background: #ccc; }
#manifest-check ul::-webkit-scrollbar-thumb { background: #333; border-radius: 0.3rem; }
#manifest-check ul::-webkit-scrollbar-thumb:hover { background: #888; }

/* Carousel */
#manifest-check > div {
	background: #fff;
	bottom: 0;
	display: none;
	height: 100%;
	left: 0;
	padding: 0;
	position: fixed;
	right: 0;
	top: 0;
	width: 100%;
	z-index: 9999;
}
#manifest-check ul {
	display: grid;
	grid-auto-columns: 100%;
	grid-auto-flow: column;
	grid-gap: 0;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0;
	scroll-behavior: smooth;
	scroll-snap-type: x mandatory;
}
#manifest-check li {
	display: grid;
	grid-template-rows: 0 1fr 1fr auto 1fr auto;
	overflow-y: auto;
	padding: 1.5rem;
	scroll-snap-align: center;
	width: 100%;
}
#manifest-check li:last-child {
	position: relative;
}
#manifest-check li:last-child::after {
	content: '';
	height: 100%;
	position: absolute;
	top: 0;
	width: 20px;
}

#manifest-check li.user-card {
	align-self: center;
	grid-template-rows: auto 1fr 1fr;
}
#manifest-check li.user-card .button {
	display: inline-block;
	margin: 5rem auto 0;
	max-width: 12rem;
	width: 100%;
}

/* Pantry version - minor adjustments required */
#manifest-check.pantry ul {
	margin: 0 -1.5rem;
}
#manifest-check.pantry li {
	grid-template-rows: 0 15vh 200px auto 1fr auto;
	height: calc(100vh - 1rem);
}
#manifest-check.pantry dl {
	align-self: center;
	display: grid;
	grid-gap: 0.5rem;
	grid-template-columns: auto 1fr;
	max-height: -webkit-fill-available;
	overflow-y: scroll;
}
#manifest-check.pantry dt, 
#manifest-check.pantry dd {
	align-content: center;
	margin: 0;
	padding: 0;
	text-align: left;
}
#manifest-check.pantry .review dt, 
#manifest-check.pantry .review dd {
	align-content: start;
}
#manifest-check.pantry dt {
	text-align: center;
	width: 5rem;
}
#manifest-check.pantry input {
	height: 3rem;
	margin: 0;
	width: 4rem;
}
#manifest-check.pantry li.summary {
	grid-template-rows: 0 auto auto 1fr auto;
}

@media all and (min-width: 424px) {
	#manifest-check svg {
		display: inline-block;
		margin: 0 0.2rem -0.1rem 0;
	}
}
@media all and (min-width: 768px) {
	#manifest-check h3 {
		width: 40%;
	}
	#manifest-check h3 span.userID {
		display: block;
		font-weight: normal;
		margin: 0 0 0 2rem;
	}
	#manifest-check > div {
		left: 40%;
		width: 60%;
	}
	#manifest-check > div > h3 {
		display: none;
	}
}

/*///////////////////////////////////////////////
// Packing guide for Hubster
///////////////////////////////////////////////*/

#packing-guide #container {
	height: 100%;
	position: fixed;
}
#packing-container div,
#packing-container table.packing-printable {
	display: none;
}

.packing-data,
#packing-form,
#packing-form select {
	font-size: 13px !important;
}
.packing-data {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0 0 1.5rem;
}
.packing-data dt {
	margin: 0;
	padding-right: 3rem;
	width: unset;
}
.packing-data dd {
	margin: 0;
	padding: 0;
}
.packing-data dt:nth-child(-n+4),
.packing-data dd:nth-child(-n+4) {
	display: none;
}

#packing-form {
	float: right;
	text-align: right;
}
.js #packing-form button {
	/*display: none;*/
}
.js #packing-form button[disabled] {
	background: #999;
}

#packing-form .download {
	display: none;
}
#packing-form .download:hover {
	background-color: #333;
}
#packing-form .download svg {
	height: 1.2rem;
	left: 0.6rem;
	position: absolute;
	top: 0.6rem;
	width: 1.2rem;
}

.toggle-up-down {
	cursor: ns-resize;
}

/* Hubster's note for UNaid and Home Delivery users */
.packing-data .delivery-count {
	color: #9b0097;
	font-weight: bold;
}
#guide-container th:has(small.button) {
	white-space: nowrap;
}
#guide-container small.button {
	display: inline-block;
	font-weight: bold;
	margin-right: 0.5rem;
	position: relative;
	text-transform: uppercase;

	overflow: hidden;
	width: 1.5rem;
	height: 1.5rem !important;
	padding: 0.1rem !important;
	font-size: 0;
	top: 0.1rem;
}
#guide-container small.button.unpaid {
	background-color: #9b2823 !important;
}
#guide-container small.button.delivery {
	background-color: #9b0097 !important;
}
@media all and (min-width: 540px) {
	#guide-container small.button {
		font-size: 1rem;
		height: auto !important;
		overflow: unset;
		padding: 0.3rem 0.5rem !important;
		top: 0;
		width: auto;
	}
	#packing-guide-member small.button {
		top: -0.3rem;
	}
	#guide-container .small.button svg {
		margin: 0 0.3rem -0.11rem 0;
	}
}

#guide-container .counter {
	color: #999;
	display: block;
	font-size: 1rem;
	font-weight: normal;
	line-height: 1.2;
	text-transform: none;
}
#guide-container section h2 {
	line-height: 2rem;
	padding-right: 2rem;
	position: relative;
}
#guide-container section h2 em {
	color: #666;
	display: block;
	font-size: 1rem;
	font-style: normal;
	font-weight: normal;
	line-height: 1.3;
	text-transform: none;
}
#guide-container section h2 svg.icon-angle-down,
#guide-container section h2 svg.icon-angle-up {
	background: #ddddddcc;
	border-radius: 50%;
	border: 1px solid #ddd;
	cursor: ns-resize;
	height: 2rem;
	padding: 0.3rem;
	position: absolute;
	right: 0;
	top: -0.2rem;
	width: 2rem;
	z-index: 99;
}

#packing-container {
	max-height: 500px;
	overflow: auto;
	width: 100%;
}
#packing-container table {
	margin-bottom: 0;
	overflow-x: unset;
}

/* Sticky headings */
#packing-container table thead th {
	background-color: #f9f9f9;
	border-bottom: 1px solid #ddd;
	position: sticky;
	top: -1px;
	z-index: 999;
}
#packing-container table thead th.suspended {
	background-color: #f2d49f;
}
#packing-container table tbody tr:not(.header-row) th {
	background-color: inherit;
	position: sticky;
	left: -1px;
	z-index: 1000;
}
#packing-container table thead th.product-header {
	left: -1px;
	z-index: 1001;
}

#access-guide {
	display: none;
}
#access-guide.hide-guide {
	display: block;
}
#guide-container.hide-guide,
#packing-container.hide-guide {
	opacity: 0.1;
}

#guide-container table {
	border-bottom: 1px solid #ebebeb;
}
#packing-container table th,
#packing-container table td,
#guide-container table th,
#guide-container table td { 
	height: 55px;
}
#packing-container table thead th {
	padding: 0.7rem;
	text-align: left;
}
#packing-container table thead th:not(.product-header) span {
	height: 150px;
	line-height: 1.15rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#packing-container table em.split-counter {
	color: #666;
	display: block;
	font-size: 0.9rem;
	font-style: normal;
	font-weight: bold;
	text-align: center;
}
#packing-container table tbody tr {
	cursor: url('/images/site/icon-tick.png'), pointer;
}
#packing-container table tr 						{ background-color: #f9f9f9; }
#packing-container table tr:nth-child(even) 		{ background-color: #f0f0f0; }
#packing-container table tr.splits 					{ background-color: #ffffcc; }
#packing-container table tr.splits:nth-child(even) 	{ background-color: #f9f9c3; }

#packing-container table tr.completed th,
#packing-container table tr.completed td,
#guide-container table tr.completed th,
#guide-container table tr.completed td { 
	background-color: #ccffcc !important; 
	color: #090 !important; 
	cursor: url('/images/site/icon-cross.png'), default;
}
#packing-container table tr.completed:nth-child(even) th,
#packing-container table tr.completed:nth-child(even) td,
#guide-container table tr.completed:nth-child(even) th,
#guide-container table tr.completed:nth-child(even) td { 
	background-color: #c3f9c3 !important;
	color: #090 !important;
}
#packing-container table tbody th,
#packing-container table tbody td.oum { 
	text-align: left;
}
#packing-container table tbody th {
	max-width: 17.5rem;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#packing-container table tbody td {
	border-left: 1px solid #f8f8f8;
	text-align: center;
}
#packing-container table tbody td.empty {
	background: #edd;
	background: rgba(234, 208, 208, 0.5);
	color: #999;
}
#packing-container table tbody td.empty.missed-out {
	background: #edd;
	background: rgba(234, 208, 208, 0.5);
	color: #9b2823;
	font-weight: bold;
}

#packing-container table tr.header-row {
	background: #ccc;
	/*background: #7B4C1E;
	color: #fff;*/
}
#packing-container table .oum { 
	white-space: nowrap;
}

table.product-distribution.archived {
	color: #999;
}

/* Split allocation (uses the same styles as Packing Guide) */
.successful-splits {
	color: #6fa110;
	font-weight: bold;
}
#packing-container table.allocation-splits tr th {
	cursor: default;
}
#packing-container table.allocation-splits tr.active th {
	color: #6fa110;
}
#packing-container table.allocation-splits td {
	/*background: #e0f2d9;
	background: rgba(224, 242, 217, 0.5);*/
	background: rgba(140, 201, 25, 0.25);
	cursor: help;
}
#packing-container table.allocation-splits td.oum { 
	background: transparent;
}
#packing-container table.allocation-splits.archived {
	color: #666;
}
#packing-container table.allocation-splits .suggested-by {
	/*border: 1px solid #6fa110;
	border: 1px solid rgba(111, 161, 16, 0.5);
	box-sizing: border-box;*/
	box-shadow: inset 0 0 0.4rem rgba(111, 161, 16, 0.75);
	color: #6fa110;
	font-weight: bolder;
}
#packing-container table.allocation-splits .empty {
	background: transparent;
	color: #ddd;
	cursor: default;
}
#packing-container table.allocation-splits .excessive {
	color: #9b2823;
	font-weight: bold;
}

/* Packing Guide for Products only */
#guide-container {
	clear: both;
}
#guide-container caption {
	caption-side: top;
	color: #f4524d;
	display: table-caption;
	font-size: 1rem;
	padding-bottom: 0.5rem;
	text-align: left;
}
#guide-container caption span {
	cursor: pointer;
	font-style: italic;
	text-decoration: underline;
}
#guide-container thead tr {
	border-bottom: 1px solid #ddd;
}
#guide-container table th,
#guide-container table td {
	text-align: left !important;
	width: 60%;
	min-width: min-content;
}
#guide-container table td {
	width: 40%;
}
#guide-container section {
	padding-top: 1rem;
}

@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) { 
	#packing-guide article.wrap {
		padding-top: 0.3rem;
	}
}
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2)
and (orientation: landscape) { 
	#packing-guide h1 {
		float: left;
		width: 40%;
	}
	.packing-data {
		margin: 1.5rem 0 0;
	}
}
@media all and (max-width: 660px) {
	#packing-form {
		width: 100%;
	}
	#packing-form p {
		align-items: center;
		display: grid;
		grid-template-columns: 6rem 1fr;
		margin: 0 0 0.5rem;
		text-align: left;
	}
	#packing-form select {
		margin: 0;
	}
}
@media all and (min-width: 768px) {
	#packing-guide article.wrap {
		padding-top: 1.5rem;
	}
	#packing-guide h1 {
		float: none;
		width: auto;
	}
	.packing-data {
		float: left;
	}
	.packing-data dt,
	.packing-data dd {
		display: block !important;
	}
	#packing-form {
		width: 56%;
	}
	#packing-container table thead th:not(.product-header) span {
		height: 100px;
		line-height: 2rem;
	}
	#packing-container table th,
	#packing-container table td,
	#guide-container table th,
	#guide-container table td { 
		height: unset;
	}
}
@media all and (min-width: 900px) {
	.packing-data .current {
		color: #6fa110;
	}
}
@media all and (min-width: 1025px) {
	.packing-data,
	#packing-form,
	#packing-form select {
		font-size: inherit !important;
	}
	.packing-data {
		float: left;
		width: 44%;
	}
	#packing-form .download {
		display: block;
	}
	#guide-container .counter {
		float: right;
		min-width: 9rem;
		padding: 0.3rem 1rem 0 1rem;
		text-align: right;
	}
	#packing-container table thead th:not(.product-header) span {
		height: 150px;
		line-height: 1.8rem;
	}
}

/* Warehouse SMS */
#warehouse-sms {
	display: grid;
	grid-gap: 1rem;
	margin-bottom: 1.5rem;
}
#warehouse-sms div {
	position: relative;
}
#warehouse-sms div.hide-margin {
	margin-bottom: -1rem;
}
#warehouse-sms label {
	background: #7a7a7a;
	width: 100%;
}
#warehouse-sms label svg {
	display: inline-block;
	height: 1.3rem;
	margin: 0 0.4rem -0.35rem 0;
	/*opacity: 0;
	position: absolute;
	right: 0.8rem;
	top: 0.6rem;*/
	transition: 200ms ease-in;
	width: 1.3rem;
	z-index: 120;
}
#warehouse-sms label svg.icon-check-square-o {
	margin: 0 0.34rem -0.35rem 0.1rem;
}
#warehouse-sms .quantity-detail {
	background: #f4524d33;
	border-radius: 0 0 0.2rem 0.2rem;
	display: none;
	padding: 0.5rem 0;
	text-align: center;
}
#warehouse-sms .quantity-detail label {
	background: unset;
	font-size: 1.1rem;
}
#warehouse-sms .quantity-detail input {
	background: #ffffff;
	border-color: #f4524d;
	font-size: 1.1rem !important;
	height: auto;
	line-height: 1;
	margin: 0;
	padding: 0.4rem 0 0.5rem;
	text-align: center;
	width: 4rem;
}
#warehouse-sms button.disabled {
	background: #333 !important;
}

.checkButton {
	/*appearance: none !important;
	background-color: transparent;
	background-image: url(images/site/icon-tick.png);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	border: none;
	height: 1.8rem !important;
	opacity: 0;
	position: absolute;
	right: 0;
	top: 0.4rem;
	transition: 200ms ease-in;
	width: 1.8rem !important;
	z-index: 100;*/
	appearance: none !important;
	border: none;
	height: 0 !important;
	position: absolute;
	right: 0;
	top: 0;
	width: 0 !important;
}
.checkButton:active + label {
	background-color: #ddd;
}
.checkButton:checked + label {
	background: #f4524d !important;
}
/*.checkButton:checked + label svg {
	opacity: 1 !important;
}*/

@media all and (min-width: 768px) {
	#warehouse-sms {
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 1fr 1fr 1fr;
		max-width: 600px;
	}
	#warehouse-sms div.hide-margin {
		margin-bottom: 0;
	}
	#warehouse-sms .quantity-detail {
		border-radius: 0.2rem 0.2rem;
		grid-column: 1 / span 3;
		margin: 0;
	}
	#warehouse-sms > button {
		grid-column: 1 / span 3;
		margin: 0;
		width: 100%;
	}
}

/* Extras calculation */
#guide-container table th.extras-calc {
	/*min-width: 8.5rem !important;*/
	padding-left: 0;
	text-align: right !important;
	white-space: nowrap;
}
.extras-calc button {
	display: inline-block;
	height: 2rem;
	padding: 0.3rem;
}
.extras-calc input::-webkit-outer-spin-button,
.extras-calc input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	margin: 0;
}
.extras-calc input {
	border: 1px solid #8cc919;
	display: none;
	font-size: 1.1rem !important;
	height: 2rem;
	line-height: 1;
	margin: -0.1rem 0 0 0;
	padding: 0.3rem 0.5rem;
	width: 2.5rem;
}
.extras-calc.active input {
	display: inline-block;
}
#guide-container table td.extra-items {
	text-align: right !important;
	white-space: nowrap;
}

/*///////////////////////////////////////////////
// Run driver list and start time
///////////////////////////////////////////////*/

.driver-list,
.depart-time {
	background-color: #8cc919;
	border-color: #8cc919;
	border-radius: 0.2rem;
	color: #fff;
	font-family: 'Poppins',serif;
	font-size: 1rem !important;
	height: 1.8rem;
	margin: 0;
	padding: 0rem 0.5rem;
	vertical-align: top;
	width: 7rem;
}
.driver-list option,
.depart-time option {
	background-color: #f5fafa;
	border-color: #f0f0f0;
	color: #333;
	font-family: 'Poppins',serif;
	font-size: 1rem;
	font-style: normal;
	opacity: 1;
	padding: 0.3rem 1rem;
	text-transform: none;
}
.driver-list option[disabled] {
	color: #ccc;
	font-style: italic;
}

/*///////////////////////////////////////////////
// Hub runs
///////////////////////////////////////////////*/

#hub-run-mapping form {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: 1fr auto;
	line-height: 2.5;
}
#hub-run-mapping form svg {
	display: none;
}
#hub-run-mapping label {
	display: grid;
	grid-gap: 1rem;
	grid-template-columns: auto 1fr;
}
#hub-run-mapping select {
	width: 100%;
}
#hub-run-mapping button {
	float: right;
}

#hub-run-map {
	background: #eee;
	display: none;
	height: calc(100vh - 270px);
}
#hub-run-map .marker-label {
	background: #444444;
	border-radius: 50%;
	border: 2px solid #ffffff;
	box-sizing: border-box;
	color: #fff;
	font-size: 14px;
	font-weight: bold;
	height: 32px;
	line-height: 30px;
	text-align: center;
	width: 32px;
}

#hub-run-listing {
	overflow: auto;
}
#hub-run-listing #add-new-run {
	display: none;
}
#hub-run-listing .remove-run {
	background: #555;
	float: none;
	margin: 1rem 0 0;
}
#hub-run-listing section {
	background: #f8f8f8;
	border-left: 0.6rem solid #e8e8e8;
	display: none;
	margin-bottom: 1.0rem;
	padding: 0 1rem 0 2rem;
	position: relative;
}
#hub-run-listing section.unassigned {
	background: #fdf9df;
	border-color: #eb9a0a;
	display: block;
}
#hub-run-listing section > div {
	padding-bottom: 1rem;
}
#hub-run-listing h4 {
	cursor: ns-resize;
	margin: 0 0 0 -2rem;
	padding: 0.8rem 10rem 0.8rem 2rem;
}
#hub-run-listing section.unassigned h4 {
	cursor: default;
}
#hub-run-listing h4 strong {
	color: #eb9a0a;
}
#hub-run-listing h4 div {
	font-size: 0.9rem;
	font-weight: normal;
	position: absolute;
	right: 3rem;
	text-transform: none;
	top: 1rem;
}
#hub-run-listing h4 .hub-weight {
	display: inline-block;
	text-align: right;
	width: 1.8rem;
}
#hub-run-listing h4 > svg {
	position: absolute;
	right: 1.2rem;
	top: 1.2rem;
}
#hub-run-listing h4 svg.icon-truck {
	margin: 0 0.2rem -0.2rem 1rem;
}
#hub-run-listing .run-controls {
	display: grid;
	grid-gap: 0.5rem 1rem;
	grid-template-columns: 1fr minmax(auto, 30%);
	padding: 0 0 1rem;
}
#hub-run-listing .expected-run {
	font-size: 0.9rem;
	font-style: italic;
	grid-column: span 2;
	margin: 0;
}
#hub-run-listing .expected-run span {
	font-family: Poppins, 'Helvetica Neue', Arial, Helvetica, sans-serif;
	font-style: normal;
}
/*#hub-run-listing .driver-list,
#hub-run-listing .depart-time {
	background-color: #ddd;
	border-color: #ddd;
	color: #222;
}*/
#hub-run-listing ul {
	background: transparent;
	counter-reset: loadOrder;
	min-height: 2.5rem;
}
#hub-run-listing ul.empty {
	background: #eee;
}
#hub-run-listing li {
	background: #fff;
	border: 1px solid #ccc;
	counter-increment: loadOrder;
	cursor: move;
	line-height: 1.3rem;
	list-style-type: none;
	min-height: 2.5rem;
	padding: 0.6rem 2.4rem 0.3rem 0.6rem;
	position: relative;
}
#hub-run-listing li + li {
	margin-top: 0.3rem;
}
#hub-run-listing li:hover {
	background: #eee;
	font-weight: bold;
}
#hub-run-listing li::before {
	content: counter(loadOrder, upper-alpha) '.';
	font-size: 1.1rem;
	left: -2rem;
	padding-left: 0.1rem;
	position: absolute;
	text-align: center;
	width: 2rem;
	z-index: 5;
}
#hub-run-listing section.unassigned li::before {
	content: counter(loadOrder, decimal) '.';
}
#hub-run-listing li .arrival::after {
	color: #ccc;
	content: '≡';
	display: block;
	font-size: 1.2rem;
	font-weight: bold;
	padding: 0.2rem 0 0.4rem;
	position: absolute;
	right: 0.8rem;
	top: 0.38rem;
}
#hub-run-listing li:hover::after {
	color: #333;
}

#hub-run-listing li.before-lunch {
	margin-bottom: 2.9rem;
}
#hub-run-listing li.before-lunch::after {
	background: #fdf9df;
	border: 1px solid #eb9a0a;
	color: #eb9a0a !important;
	content: 'Lunch Break';
	display: block;
	font-weight: normal;
	left: -1px;
	margin: 0;
	padding: 0.5rem 0.6rem 0.3rem;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 2.75rem;
	width: calc(100% + 2px);
}
#hub-run-listing li.ui-sortable-helper {
	background: #eed19f;
	border-color: #eb9a0a;
}
#hub-run-listing li.ui-state-placeholder {
	background: #ddd;
	cursor: default;
}
#hub-run-listing li.run-pickup {
	background-color: #e4f9ff;
	color: #106279;
}
#hub-run-listing li.wrong-day {
	background-color: #ffecec;
	color: #df5f5f;
}
#hub-run-listing li.wrong-day span {
	font-weight: bold;
}

@media all and (min-width: 768px) {
	#hub-run-mapping form {
		grid-template-columns: 500px 1fr;
	}
	#run-map-list {
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 500px 1fr;
	}
	#hub-run-map {
		display: block;
		/*float: right;*/
	}
	#hub-run-listing {
		height: calc(100vh - 270px);
		overflow-x: hidden;
		overflow-y: scroll;
		padding-right: 1rem;
	}
}

/* Hub Management */
.near-full 			{ color: #f89920; font-weight: bold; }
.at-capacity 		{ color: #f4524d; font-weight: bold; }
#jump-to .jump1 	{ background: #444444; }
#jump-to .jump2 	{ background: #f1c30e; }
#jump-to .jump3 	{ background: #f89920; }
#jump-to .jump4 	{ background: #f4524d; }
#jump-to .jump5 	{ background: #31aee2; }
#jump-to a.hidden 	{ background: #bdbcbc !important; }

/*///////////////////////////////////////////////
// Hub deliveries
///////////////////////////////////////////////*/

#hub-run-manifest tbody th {
	white-space: nowrap;
}
#hub-run-manifest tr.run-row {
	background: #666;
	color: #fff;
	padding: 0;
}
/* Only show member details when not disabled */
#hub-run-manifest tr.disabled td:nth-child(4),
#hub-run-manifest tr.disabled td:nth-child(5), /*.map-buttons a*/
#hub-run-manifest tr.disabled td:nth-child(6) {
	cursor: default;
	opacity: 0.2;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}
#hub-run-manifest .map-buttons {
	min-width: 6.6rem;
	width: 6.6rem;
}
#hub-run-manifest .map-buttons a {
	background: transparent;
	border: none;
	display: inline-block;
	line-height: 0;
	padding: 0;
}
#hub-run-manifest .map-buttons a:last-child {
	float: right;
}
#hub-run-manifest .map-buttons a span {
	display: none;
}
#hub-run-manifest .map-buttons svg {
	height: 1.8rem;
	width: 1.8rem;
}
#hub-run-manifest td[data-eta] {
	text-align: right;
}
#hub-run-manifest .unassigned {
	color: #eb9a0a;
}
#hub-run-manifest button.completed {
	background: transparent !important;
	color: #222;
	font-weight: normal;
	text-transform: none;
}
#hub-run-manifest .run-row button.completed {
	color: #fff;
}

@media all and (max-width: 768px) {
	#hub-run-manifest tr {
		grid-template-columns: 50% 50%;
		padding-bottom: 1rem;
		position: relative;
	}
	#hub-run-manifest tr th, 
	#hub-run-manifest tr td {
		grid-column: span 2;
	}
	#hub-run-manifest tr .rth-0 {
		padding-bottom: 0.75rem;
	}
	#hub-run-manifest tr:not(.run-row) .rth-0 {
		border-bottom: 1px solid #ddd;
	}
	#hub-run-manifest .rth-0 .th-data,
	#hub-run-manifest .rth-1 .th-data,
	#hub-run-manifest .rth-4 .th-data {
		display: none;
	}
	#hub-run-manifest .rth-1 {
		overflow: hidden;
		height: 0;
		padding: 0;
	}
	#hub-run-manifest .rth-1 a.small.button {
		background: #555;
		position: absolute;
		right: 1rem;
		top: 0.75rem;
	}
	#hub-run-manifest .map-buttons {
		align-content: center;
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		width: unset;
	}
	#hub-run-manifest .map-buttons a {
		align-items: center;
		background: #8cc919;
		display: grid;
		grid-gap: 0.3rem;
		grid-template-columns: auto 1fr;
		justify-content: start;
		line-height: unset;
		padding: 0.3rem;
		text-align: left;
	}
	#hub-run-manifest .map-buttons a span {
		display: block;
	}
	#hub-run-manifest td[data-eta] {
		text-align: left;
	}
	#hub-run-manifest button.log-depart:not(.completed) {
		height: auto;
		line-height: 1.5;
		padding: 0.5rem 1rem;
		width: 100%;
	}
}

/*///////////////////////////////////////////////
// Member's chilled deliveries
///////////////////////////////////////////////*/

body#chilled-packers-manifests #back-to-top,
body#pantry-packers-manifests #back-to-top,
body#delivery-chilled #back-to-top,
body#courier-run #back-to-top {
	display: none !important;
}
.map-wrapper {
	display: none;
	margin-top: -1rem;
	position: relative;
}
#my-chilled-map {
	background: #eee;
	font-size: 1rem;
	height: calc(100vh - 3rem);
	padding: 1.5rem;
}

/* Truck position infoWindow */
#delivery-chilled .gm-style .gm-style-iw {
	background-color: #222;
	height: 40px;
	min-height: 40px;
	padding: 5px;
	width: 100px;
}
#delivery-chilled .gm-style .gm-style-iw-d {
	color: #fff;
	line-height: 1.2;
	overflow: hidden !important;
	text-align: center;
	width: 90px;
}
#delivery-chilled .gm-style .gm-style-iw button {
	display: none !important;
}
#delivery-chilled .gm-style-iw-tc::after {
	background-color: #222;
	height: 7px;
	left: 4px;
	width: 14px;
}

.last-updated {
	min-height: 1.5rem;
}
.google-eta {
	appearance: none;
	background: #222;
	border-radius: 2px;
	border: 0px;
	box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 4px -1px;
	color: #fff; /* rgb(86, 86, 86); */
	cursor: default;
	display: none;
	font-family: Roboto, Arial, sans-serif;
	font-size: 18px;
	font-weight: normal;
	height: 40px;
	left: 10px;
	line-height: 40px;
	min-width: 69px;
	overflow: hidden;
	padding: 0 1rem;
	position: absolute;
	text-align: center;
	text-transform: none;
	top: 33px;
	-webkit-user-select: none;
	user-select: none;
	vertical-align: middle;
	z-index: 20;
}

.focus-change {
	animation: highlight 4s;
}
@keyframes highlight {
	from { color: #990099; }
}
.focus-change.google-eta {
	animation: highlightBG 4s;
}
@keyframes highlightBG {
	from { background: #990099; }
}

@media all and (min-width: 768px) {
	#my-chilled-map {
		height: 600px;
	}
	.google-eta {
		left: unset;
		right: 10px;
	}
}

/*///////////////////////////////////////////////
// Hubster replacement form
///////////////////////////////////////////////*/

#hubster-replacement .checkboxlist .checkboxes label {
	padding: 0.2rem 0.4rem;
}
#hubster-replacement .checkboxlist .checkboxes label.urgent {
	/*
	background: #ff675b;
	border-bottom: 1px solid #fff;
	color: #fff;
	cursor: not-allowed;
	*/
	background: #fff1f0;
	border-bottom: 1px solid #fff;
	color: #9b2823;
}

/*///////////////////////////////////////////////
// Home deliveries
///////////////////////////////////////////////*/

#set-run {
	background: #eb9a0a;
	display: none;
	float: right;
	margin-top: -0.2rem;
	padding: 0.2rem 1rem;
}
#set-run.disabled {
	background: #999;
	cursor: not-allowed;
}
#set-run svg {
	fill: #666;
	margin: 0.2rem 0 0 0.3rem;
}

#chilled-map {
	float: left;
	height: 600px;
	margin-bottom: 1.5rem;
	width: calc(100% - 30%);
}
#chilled-map svg {
	fill: #990099;
}
#chilled-map .RIFJN-maps-pin-view-border {
	stroke: #444444;
	stroke-width: 2;
}

#run-list {
	float: right;
	height: 600px;
	margin-top: -1px;
	padding: 0 0 0 15px;
	width: 30%;
}
#run-list .temp {
	padding: 0.5rem;
}
#run-list form {
	background: #ddd;
	height: 100%;
	overflow: auto;
}
#run-list fieldset {
	background: #999999;
	margin: 0;
	overflow: hidden;
}
#run-list h4 {
	border-top: 1px solid #fff;
	color: #fff;
	font-size: 1.1rem;
	font-weight: bold;
	margin: 0;
	overflow: auto;
	padding: 0.5rem 2rem 0.5rem 0.5rem;
	width: 100%;
}
#run-list section {
	background: #ffffffdd;
	padding: 0;
}
#run-list header {
	background: #00000011;
	display: grid;
	display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: stretch;
	padding: 0.5rem;
}
#run-list .estimate {
	font-size: 1rem;
	font-weight: normal;
	flex: 1 0 100%;
	margin: 0;
	text-transform: none;
}
#run-list .estimate .result {
	font-weight: bold;
}
#run-list .estimate .result svg {
	float: none;
	margin: 0 0 -0.1rem 0.2rem;
}
#run-list .timing {
	cursor: pointer;
}
#run-list .timing.disabled {
	background: #999;
	cursor: not-allowed;
}
#run-list .button {
	display: none;
	float: left;
	height: 1.8rem;
	padding: 0.1rem 0.6rem;
}
#run-list > .driver-list,
#run-list > .depart-time {
	display: none !important;
}
#run-list .driver-list,
#run-list .depart-time {
	display: none;
}
#run-list .driver-list {
	flex: 1;
}
#run-list ol.used {
	border-top: 1px solid #e5e5e5;
	clear: both;
	font-size: 0.9rem;
	overflow: auto;
	padding: 0.5rem;
	width: 100%;
}
#run-list ol strong {
	display: block;
}
#run-list li {
	border-bottom: 1px solid #e5e5e5;
	padding: 0.3rem 0;
	position: relative;
}
#run-list li.before-lunch {
	margin-bottom: 2.2rem;
}
#run-list li.before-lunch::after {
	background: #fdf9df;
	border: 1px solid #eb9a0a;
	color: #eb9a0a !important;
	content: 'Lunch Break';
	display: block;
	font-weight: normal;
	left: -1px;
	margin: 0;
	padding: 0.4rem 0.6rem 0.2rem;
	position: absolute;
	text-align: center;
	text-transform: uppercase;
	top: 3rem;
	width: calc(100% + 2px);
}

tr.lunch-break th {
	background: #fdf9df;
	border-bottom: 1px solid #eb9a0a;
	border-top: 1px solid #eb9a0a;
	color: #eb9a0a;
	padding: 1rem;
	text-align: center;
	text-transform: uppercase;
}

#delivery-map {
	height: 500px;
	margin-bottom: 1.5rem;
}
#home-delivery thead {
	display: none;
} 
#home-delivery svg {
	cursor: ns-resize;
	float: right;
	margin-top: 0.3rem;
}
#home-delivery svg.active {
	fill: #090;
}
#home-delivery span.counter::after {
	content: '.';
	padding-right: 0.4rem;
}
#home-delivery th, 
#home-delivery td {
	padding: 0.5rem;
	display: block;
	vertical-align: top;
}
#home-delivery tr:not(.steps) {
	border-top: 1px solid #ddd;
}
#home-delivery tr:not(.steps) td {
	padding: 0.1rem 0 0.1rem 1rem;
}

.delivery-note {
	color: #ff3c00;
	display: block;
	font-size: 0.9rem;
	margin: 0;
}

.steps {
	font-size: 90%;
	padding: 0;
}
#home-delivery .steps td:nth-child(3) {
	white-space: nowrap;
}
#home-delivery .steps td:nth-child(4) {
	display: none;
}
.steps table {
	margin: 0;
}
#home-delivery .steps table td {
	display: table-cell;
	border: none;
	padding: 0.4rem;
}
.steps table td:first-child {
	text-align: center;
}
.step {
	background-image: url(/images/site/maneuvers.png);
	background-size: 19px 630px;
	height: 16px;
	left: 0;
	overflow: hidden;
	position: relative;
	top: 0;
	width: 16px;
}
.step.step-ferry 			{ background-position: 0 -614px; }
.step.step-ferry-train 		{ background-position: 0 -566px; }
.step.step-merge 			{ background-position: 0 -143px; }
.step.step-straight 		{ background-position: 0 -534px; }
.step.step-fork-left 		{ background-position: 0 -550px; }
.step.step-ramp-left 		{ background-position: 0 -598px; }
.step.step-roundabout-left 	{ background-position: 0 -197px; }
.step.step-turn-left,
.step.step-keep-left 		{ background-position: 0 -413px; }
.step.step-turn-sharp-left 	{ background-position: 0 0; }
.step.step-turn-slight-left { background-position: 0 -378px; }
.step.step-uturn-left 		{ background-position: 0 -305px; }
.step.step-fork-right 		{ background-position: 0 -499px; }
.step.step-ramp-right 		{ background-position: 0 -429px; }
.step.step-roundabout-right { background-position: 0 -232px; }
.step.step-turn-right,
.step.step-keep-right 		{ background-position: 0 -483px; }
.step.step-turn-sharp-right { background-position: 0 -582px; }
.step.step-turn-slight-right{ background-position: 0 -51px; }
.step.step-uturn-right 		{ background-position: 0 -35px; }

@media all and (min-width: 540px) {
	#home-delivery thead {
		display: table-row-group;
	} 
	#home-delivery th, 
	#home-delivery td,
	#home-delivery .steps td:nth-child(4) {
		display: table-cell;
		white-space: nowrap;
	}
	#home-delivery table th, 
	#home-delivery table td {
		padding: 0.5rem 1.0rem;
	}
	#home-delivery td.location {
		white-space: normal !important;
	}
}

/*///////////////////////////////////////////////
// Member order history
///////////////////////////////////////////////*/

#hub-spending-table .delete-user {
	background: #f4524d;
}
@media all and (max-width: 992px) {
	.table-container #hub-spending-table {
		overflow-x: auto;
		width: 100%;
	}
	#hub-spending-table {
		width: auto;
		border-collapse: collapse;
	}
	#hub-spending-table th, 
	#hub-spending-table td {
		white-space: nowrap;
	}
	#hub-spending-table th:first-child,
	#hub-spending-table td:first-child {
		background: inherit !important;
		left: -1.5rem;
		position: sticky;
		z-index: 2;
	}
	#hub-spending-table thead th:first-child {
		background: #ebebeb !important;
	}
}

/*///////////////////////////////////////////////
// Report: Reasons for leaving
///////////////////////////////////////////////*/

.reason-leaving .toggle-legend {
	display: none; /* block */
	margin: 0.5rem auto;
	text-align: center;
}
.reason-leaving.chart-container {
	padding-bottom: 1.5rem;
}
.reason-leaving.chart-container p {
	margin: 0;
}
.reason-leaving.chart-container dl {
	font-size: 1rem;
	line-height: 1.2;
	margin: 2rem 0 0 2.5rem;
}
.reason-leaving.chart-container dt.enforce {
	color: #f4524d;
}
.reason-leaving .note {
	display: block;
	font-style: italic;
	margin-top: 1rem;
	text-align: right;
}
.reason-leaving .chart-holder {
	overflow-x: scroll;
}
.reason-leaving .chart-parent {
	min-width: 1128px;
}
.reason-leaving .table-scroll {
	padding-top: 1.5rem;
}
.reason-leaving th,
.reason-leaving td {
	font-size: 1rem;
}
.reason-leaving th,
.reason-leaving td {
	text-align: center;
}

@media only screen and (min-width: 900px) {
	.reason-leaving .chart-holder {
		overflow-x: auto;
	}
}

/*///////////////////////////////////////////////
// Report: Sales by product
///////////////////////////////////////////////*/
.chart-holder {
	overflow-x: scroll;
}
#report-product-sales .chart-parent {
	min-height: 700px;
	min-width: 900px;
}
@media only screen and (min-width: 900px) {
	.chart-holder {
		overflow-x: auto;
	}
}

/*///////////////////////////////////////////////
// Credit cards
///////////////////////////////////////////////*/

#credit-card article #eWAYBlock {
	margin: 0 auto 1.5rem;
	text-align: center;
}
@media all and (min-width: 400px) {
	#credit-card article #eWAYBlock {
		float: right;
		margin: 0 0 1.5rem 1.5rem;
		text-align: right;
	}
}

#card-wrapper {
	margin-bottom: 1.5rem;
}
#card-wrapper .jp-card-name {
	font-size: 15px;
}
#card-wrapper .jp-card .jp-card-front, 
#card-wrapper .jp-card .jp-card-back {
	background: #999;
}
#card-wrapper .jp-card .jp-card-front .jp-card-display, 
#card-wrapper .jp-card .jp-card-back .jp-card-display {
	opacity: 0.8;
}
/*#card-wrapper .jp-card-focused {
	color: #222;
	text-shadow: 1px 1px 0 #fff;
}*/

.expiry-holder {
	display: block;
	text-align: center;
}
.expiry-holder span {
	display: inline-block;
	text-align: center;
	width: 4%;
}
#cc-expiry-month, #cc-expiry-year {
	margin: 0;
	width: auto;
}
@supports (display: grid) {
	.expiry-holder {
		display: grid;
		grid-template-columns: 1fr 10% 1fr;
		align-items: center;
	}
	.expiry-holder span {
		width: 100%;
	}
}

@media all and (min-width: 900px) {
	#credit-card #card-wrapper,
	#credit-card #manage-card {
		float: right;
		width: 50%;
	}
}

/*///////////////////////////////////////////////
// Hub order projections
///////////////////////////////////////////////*/

#projected-weeks {
	display: flex;
	margin: 0.5rem 0 1.2rem;
	text-align: right;
}
#projected-weeks label {
	flex: 1;
}
#projected-weeks input {
	height: 2.7rem;
	margin: 0 1rem;
	width: 6rem;
}
#projected-weeks button {
	margin: 0;
}

#admin-order-estimates thead td {
	font-size: 1rem;
	line-height: 1.2rem;
	padding: 0 0.8rem 0.4rem;
}
#admin-order-estimates th,
#admin-order-estimates td {
	text-align: center;
}
#admin-order-estimates thead th:nth-child(n + 4),
#admin-order-estimates thead td:nth-child(3n + 1),
#admin-order-estimates tbody td:nth-child(3n + 1) {
	border-left: 1px solid #ddd;
}
#admin-order-estimates tbody th:nth-child(2) {
	max-width: 270px;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#admin-order-estimates .listed {
	color: #999;
	font-weight: normal;
}
#admin-order-estimates .decrease {
	color: #df5f5f;
	font-weight: bold;
}
#admin-order-estimates .total,
#report-buying-projection .total {
	font-weight: bold;
}
#report-config {
	padding-top: 0.8rem;
}
#report-config fieldset {
	margin: 0 0.5rem 1rem;
}
#report-config label {
	display: inline-block;
	padding-right: 1rem;
	padding-top: 0;
}
#report-config .download {
	float: none;
	padding: 0.5rem 1rem;
}
#report-splits-analysis .percentage {
	font-size: 0.9rem;
}
#report-hub-order #supplierID {
	height: 6.6rem;
	width: 16rem;
}
form input.datepicker {
	width: 11rem;
}

@media all and (min-width: 720px) {
	#hub-order-projection h1 {
		float: left;
	}
	#projected-weeks {
		float: right;
		width: 22rem;
	}
}

/*///////////////////////////////////////////////
// Hub Health Report
///////////////////////////////////////////////*/

#report-hub-health-admin #container {
	overflow: unset;
}
#hub-health-table {
	border-top: none;
	font-size: 1rem;
}

#hub-health-table thead,
#hub-health-table tfoot {
	position: sticky;
	top: 0;
}
#hub-health-table thead {
	inset-block-start: 0;
}
#hub-health-table tfoot {
	inset-block-end: 0;
}

#hub-health-table tbody td {
	padding: 0.5rem;
	text-align: right;
}
#hub-health-table th {
	padding: 0.5rem;
	text-align: center;
}
#hub-health-table thead tr {
	border-bottom: 1px solid #ddd;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}
#hub-health-table thead tr:first-child {
	background: #666;
	border-bottom: none;
	color: #fff;
}
#hub-health-table thead th {
	cursor: pointer;
	position: relative;
}
#hub-health-table thead th.dir-d::after,
#hub-health-table thead th.dir-u::after {
	background-image: 
		linear-gradient(to top right, transparent 50%, #99999922 0),
		linear-gradient(to bottom right, #99999922 50%, transparent 0);
	background-position: left, right;
	background-repeat: no-repeat;
	background-size: 50% 100%;
	content: '';
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}
#hub-health-table thead th.dir-u::after {
	background-image: 
		linear-gradient(to bottom right, transparent 50%, #99999922 0),
		linear-gradient(to top right, #99999922 50%, transparent 0);
}

#hub-health-table thead td + td,
#hub-health-table thead th:nth-child(4n + 3),
#hub-health-table tbody td:nth-child(4n + 3) {
	border-left: 1px solid #ddd;
}
#hub-health-table tbody th, 
#hub-health-table .hubster {
	max-width: 200px;
	overflow: hidden;
	text-align: left;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#hub-health-table tbody th {
	pointer-events: none;
}
#hub-health-table td.hubster {
	max-width: 130px;
}
#hub-health-table td.hubster span {
	display: none;
}
#hub-health-table .recent {
	font-weight: bold;
}
#hub-health-table .empty {
	background: repeating-linear-gradient(
		90deg,
		#eeeeee,
		#eeeeee 5px,
		#e6e6e6 5px,
		#e6e6e6 10px
	);
}
#hub-health-table .up {
	background: #cfc;
	color: #090;
}
#hub-health-table .down {
	background: #edd;
	color: #9b2823;
}
#hub-health-table .none {
	color: #ccc;
}

#hub-spending-table .total {
	border-left: 1px solid #ddd;
	border-right: 1px solid #ddd;
}
#hub-spending-table .pass {
	/*background-color: #e0f2d9;*/
	color: #58a739;
}
#hub-spending-table .zero {
	/*background-color: #ffecec;*/
	color: #df5f5f;
}
#hub-spending-table .under-min {
	/*background-color: #fdf9df;*/
	color: #eb9a0a;
}
#hub-spending-table .order-number {
	text-align: center;
}
#hub-spending-table .order-number span {
	display: block;
	font-size: 0.9rem;
}
#hub-spending-table .courtesy-email[disabled] {
	width: 7.7rem;
}
#report-member-low-spending #hub-spending-table .courtesy-email[disabled] {
	width: 100%;
}

tr.hub-row {
	background: #666 !important;
	color: #fff;
}

/*///////////////////////////////////////////////
// Suspended order projection
///////////////////////////////////////////////*/

.suspended-members thead th:not(.col) {
	font-size: 1rem;
	min-width: 2.5rem;
	text-align: center;
	white-space: nowrap;
}
.suspended-members thead th span.member-count {
	cursor: help;
	display: block;
	font-size: 0.9rem;
    font-weight: normal;
    padding-top: 0.2rem;
}
.suspended-members thead th .week-count {
	color: #9b2823;
	cursor: help;
	display: block;
	font-size: 0.9rem;
    padding-top: 0.2rem;
}
.suspended-members tbody th {
	text-align: left;
	white-space: nowrap;
}
.suspended-members td {
	border: 1px solid #f8f8f8;
	text-align: center;
}
.suspended-members td.active {
	background: #cfc;
	color: #090;
}
.suspended-members td.suspended {
	background: #edd;
	color: #9b2823;
}

.terms dt {
	clear: left;
	float: left;
	margin: 0 0 0.7rem;
	width: 12rem;
}
.terms dd {
	margin: 0 0 0.7rem 12rem;
}



.hubmap {
	height: 240px;
	margin-bottom: 1.5rem;
}



#find-hubs article > h1 {
	float: left;
}
#suburb-search {
	clear: both;
	margin: 0;
	max-width: none;
}
#suburb-search label {
	display: none;
}
.pac-item,
.pac-item-query {
	font-family: Arimo,'Helvetica Neue',Arial,Helvetica,sans-serif;
    font-size: 1.0rem;
    line-height: 2.2;
}
.pac-icon-marker {
	background: url('/images/site/marker-home.png') no-repeat 0 0;
	background-size: 18px;
	filter: grayscale(20%);
	opacity: 0.5;
	width: 18px;
}
.pac-item:hover .pac-icon-marker {
	filter: grayscale(0%);
	opacity: 0.8;
}
#find-hubs .intro {
	clear: both;
}
#find-hubs .intro img {
	margin-right: 0.2rem;
	vertical-align: text-bottom;
	width: 18px;
}
#findhub-map {
	clear: both;
	height: 500px;
	width: 100%;
}
#findhub-map h5 {
	font-size: 1rem;
	margin: 0;
	text-transform: uppercase;
}

#findhub-map .marker-icon {
	height: 32px;
	position: relative;
	top: 16px;
	width: 32px;
}
#findhub-map .details {
	background: #ffffff;
	border-radius: 0.3rem;
	bottom: 28px;
	box-sizing: border-box;
	box-shadow: 0 0 10px #00000066;
	display: none;
	font-size: 1rem;
	left: calc(-320px / 2 + 16px);
	padding: 10px;
	position: absolute;
	width: 320px;
}
#findhub-map .infowindow.highlighted .details::after {
	border: 10px solid transparent;
	border-top: 10px solid #ffffff;
	bottom: -20px;
	content: '';
	display: block;
	height: 0;
	left: calc(50% - 10px);
	position: absolute;
	width: 0;
}
#findhub-map .infowindow.highlighted .details {
	display: block;
}
#findhub-map .details h4 {
	display: grid;
	grid-template-columns: 1fr auto;
}
#findhub-map .details span > img {
	margin: -3px 3px 0 0;
	width: 12px;
}
#findhub-map .details p.delivers {
	color: #9b0097;
	font-style: italic;
	font-weight: bold;
}
#findhub-map .details p.delivers svg {
	margin: 0 0 -1px 5px;
}
#findhub-map .details h4 button {
	background: none;
	color: #666;
	height: 20px;
	padding: 0;
	width: 20px;
}
#findhub-map .details .icon-close {
	height: 20px;
	top: 0;
	width: 20px;
}
.details h4 button:hover {
    color: #000;
}

#findhub-map .infowindow ul {
	margin: 0 0 1rem;
}
#findhub-map br {
	display: none;
}
#find-hubs .infowindow h5 a {
	font-size: 1.1rem;
	text-decoration: none;
	width: 100%;
}
#find-hubs .intro .operational,
#find-hubs .operational span,
#find-hubs .operational h5 a:hover,
#find-hubs-postcode .operational .status { 
	color: #f59e19; 
	font-weight: bold;
}
#find-hubs .intro .in-progress,
#find-hubs .in-progress span,
#find-hubs .in-progress h5 a:hover,
#find-hubs-postcode .in-progress .status  { 
	color: #91b83e; 
	font-weight: bold;
}
#find-hubs .intro .full-capacity,
#find-hubs .full-capacity span,
#find-hubs .full-capacity h5 a:hover { 
	color: #e13c26;
	font-weight: bold;
}
#find-hubs .intro .operational,
#find-hubs .intro .in-progress,
#find-hubs .intro .full-capacity {
	font-weight: normal;
}
#find-hubs h5 .button {
	text-transform: none;
}
#find-hubs .operational h5 .button { background: #f59e19; }
#find-hubs .in-progress h5 .button { background: #91b83e; }
#find-hubs .full-capacity h5 .button { background: #e13c26; }
#find-hubs .operational h5 .button:hover { background: #333; color: #f59e19; }
#find-hubs .in-progress h5 .button:hover { background: #333; color: #91b83e; }
#find-hubs .full-capacity h5 .button:hover { background: #333; color: #e13c26; }

#find-hubs h5 .find-another {
	color: #888;
	display: block;
	text-transform: none;
}

#find-hubs .warning {
	color: #981200;
	font-size: 0.85rem;
	margin: 0.8rem 0 0;
}


#find-hubs #icons {
	margin: 0 auto 1rem;
	text-align: center;
}
#find-hubs #icons button {
	margin: 0 0.5rem 0.8rem;
}
#find-hubs #icons button#tab-delivery.active {
	background: #9b0097;
}
#find-hubs #icons button#tab-recycle.active {
	background: #00afaa;
}
#find-hubs #icons svg {
	margin: 0 0.3rem -0.15rem 0;
}
#find-hubs #hub-listing {
	border-right: 1px solid #fff;
	display: none;
	height: 500px;
	overflow: hidden;
	overflow-y: scroll;
}
#find-hubs #hub-listing h2 {
	display: none;
}
#find-hubs #findhub-map {
	clear: both;
	width: 100%;
}
#find-hubs #hub-listing p {
	display: none;
	line-height: 1.4;
	padding: 0.6rem;
}
#find-hubs #hub-listing p span {
	cursor: pointer;
	text-decoration: underline;
}
#find-hubs #hub-listing ul {
	display: none;
}
#find-hubs #hub-listing li {
	background-size: 1.8rem;
	background-position: 0.4rem 0.4rem;
	background-repeat: no-repeat;
	border-bottom: 1px solid #fff;
	cursor: pointer;
	line-height: 1.2;
	padding: 0.6rem 0.4rem 0.6rem 2.6rem;
	position: relative;
}
#find-hubs li.current-hub 	{ background: #00759b33 url('/images/site/marker-current-hub.png'); }
#find-hubs li.operational 	{ background: #f59e1933 url('/images/site/marker-operational.png'); }
#find-hubs li.in-progress 	{ background: #91b83e33 url('/images/site/marker-in-progress.png'); }
#find-hubs li.full-capacity { background: #e13c2633 url('/images/site/marker-full-capacity.png'); }

#hub-listing li:hover, #hub-listing li.highlighted { color: #fff; }
#hub-listing li.current-hub:hover, #hub-listing li.current-hub.highlighted 		{ background-color: #00759b; }
#hub-listing li.operational:hover, #hub-listing li.operational.highlighted 		{ background-color: #f59e19; }
#hub-listing li.in-progress:hover, #hub-listing li.in-progress.highlighted 		{ background-color: #91b83e; }
#hub-listing li.full-capacity:hover, #hub-listing li.full-capacity.highlighted 	{ background-color: #e13c26; }

#hub-listing li > svg {
	color: #9b0097;
	left: 1.5rem;
	position: absolute;
	top: 1.3rem;
	transform: scale(-1, 1);
}
#hub-listing li > svg.icon-recycle {
	color: #00afaa;
	left: 0;
}

@media all and (min-width: 480px) {
	#findhub-map strong {
		display: inline-block;
		width: 6.5rem;
	}
}
@media all and (min-width: 540px) {
	#suburb-search {
		clear: none;
		float: right;
	}
	#suburb-search label {
		display: inline;
	}
	#map-search {
		margin-left: 1.2rem;
		width: 300px;
	}
	#findhub-map br {
		display: block;
	}
}
@media all and (min-width: 800px) {
	#find-hubs #hub-listing {
		background: #eee;
		clear: left;
		display: block;
		float: left;
		margin-bottom: 1.5rem;
		width: 40%;
	}
	#find-hubs #findhub-map {
		clear: right;
		float: right;
		margin-bottom: 1.5rem;
		width: 60%;
	}
}
@media all and (min-width: 960px) {
	#find-hubs #hub-listing {
		width: 30%;
	}
	#find-hubs #findhub-map {
		width: 70%;
	}
}

#hubster-replacement-admin tr.week th {
	background-color: #f2d49f;
	font-weight: normal;
}

span.clearable {
	position: relative;
}
span.clearable svg {
color: #ccc;
	background: #fcfcfc;
	border-radius: 50%;
	border: 1px solid #f0f0f0;
	cursor: pointer;
	display: block;
	height: 1.2rem;
	padding: 0.1rem;
	position: absolute;
	right: 0.5rem;
	top: -0.3rem;
	width: 1.2rem;
}
span.clearable svg:hover {
	color: #888;
}
span.clearable input {
	padding-right: 1.5rem;
	box-sizing: border-box;
}



.email-message {
	background: #f5fafa;
	border: 1px solid #8cc919;
	padding: 1.5rem;
}
.result-success {
	color: #58A739;
	font-weight: bold;
}
.result-fail {
	color: #df5f5f;
	font-weight: bold;
}

/*///////////////////////////////////////////////
// Credit summary
///////////////////////////////////////////////*/

#credit-container {
	max-width: 100%;
	overflow-x: scroll;
	position: relative;
}
#credit-container table {
	border-collapse: collapse;
	position: relative;
	white-space: nowrap;
}
#credit-container tr {
	border-bottom: 1px solid #eee;
}
#credit-container tr:last-child {
	background: #fff;
	border-bottom: 1px solid #000;
}
#credit-container td,
#credit-container th {
	padding: 0.3em 0.8rem;
	text-align: right;
}
#credit-container thead th {
	background: #000;
	color: #FFF;
	position: -webkit-sticky; /* for Safari */
	position: sticky;
	top: 0;
}
#credit-container thead th:first-child {
	left: 0;
	text-align: left;
	z-index: 1;
}
#credit-container thead th span {
	display: block;
	font-size: 0.9rem;
	font-weight: normal;
}
#credit-container tbody th {
	background: inherit;
	left: 0;
	padding-right: 1.5rem;
	position: -webkit-sticky; /* for Safari */
	position: sticky;
	text-align: left;
	z-index: 1;
}
#credit-container .header {
	border-bottom: 1px solid #000;
	border-top: 1px solid #000;
	font-weight: bold;
}
#credit-container tbody tr:nth-child(1),
#credit-container tbody tr:nth-child(2),
#credit-container tbody tr:nth-child(3) {
	background-color: #ffd;
}
#credit-container tbody tr:nth-child(4) {
	background-color: #ffb;
}
#credit-container tbody tr:nth-child(5),
#credit-container tbody tr:nth-child(6),
#credit-container tbody tr:nth-child(7) {
	background-color: #dff;
}
#credit-container tbody tr:nth-child(8) {
	background-color: #bff;
}

/*///////////////////////////////////////////////
// Product categories for suppliers' use
///////////////////////////////////////////////*/

.supplier-categories ul {
	margin: 1.0rem 0 1.5rem;
}
.supplier-categories ul li p {
	background: #f89920;
	color: #fff;
	font-weight: bold;
	line-height: 1.1;
	margin-bottom: 0.6rem;
	overflow: auto;
	padding: 0.6rem;
}
.supplier-categories ul li span {
	bottom: 0;
	display: none;
	position: absolute;
	right: 0;
}
.supplier-categories ul ul p {
	background: none;
	border-bottom: 1px solid #f89920;
	color: #333;
	padding: 0;
}
.supplier-categories ul ul ul {
	margin-left: 2rem;
}
.supplier-categories ul ul ul p {
	border-bottom: 1px solid #ddd;
	font-weight: normal;
	padding-right: 2.2rem;
	position: relative;
}
.supplier-categories ul ul ul p:active {
	color: #8cc919;
	cursor: copy;
	font-weight: bold;
}
@media (hover: hover) and (pointer: fine) {
	.supplier-categories ul ul ul p:hover {
		color: #8cc919;
		cursor: copy;
		font-weight: bold;
	}
}
.supplier-categories ul ul ul span {
	display: block;
}

@media all and (min-width: 680px) {
	.supplier-categories ul ul ul {
		column-count: 2;
		column-gap: 2rem;
		margin-left: 0;
	}
	.supplier-categories ul ul ul ul {
		column-count: 1;
		margin-left: 0;
	}
}
@media all and (min-width: 960px) {
	.supplier-categories ul ul ul {
		column-gap: 4rem;
	}
}

/*///////////////////////////////////////////////
// Temporary tooltip/alert
///////////////////////////////////////////////*/

#temp-tooltip {
	background: #000000dd;
	border-radius: 2rem;
	color: #fff;
	height: 3rem;
	left: calc(50% - 8rem);
	line-height: 3rem;
	position: fixed;
	text-align: center;
	top: calc(50% - 1.5rem);
	width: 16rem;
	z-index: 20;
}
#temp-tooltip em {
	color: #8cc919;
}

/*///////////////////////////////////////////////
// Chilled deliveries
///////////////////////////////////////////////*/

table#courier-runs .button.small {
	margin: 0 0.3rem 0.3rem;
}

/* Courier's delivery table */
.delivery-chilled-date,
.delivery-chilled-date label {
	display: none;
}
#chilled-details tr {
	border-bottom: 1px solid #ddd;
}
#chilled-details .member span {
	font-size: 1.05rem;
	font-weight: normal;
}
#chilled-details .map-buttons {
	min-width: 6.6rem;
	width: 6.6rem;
}
#chilled-details .map-buttons a {
	background: transparent;
	border: none;
	display: inline-block;
	line-height: 0;
	padding: 0;
}
#chilled-details .map-buttons a:last-child {
	float: right;
}
#chilled-details .map-buttons a span {
	display: none;
}
#chilled-details .map-buttons svg {
	height: 1.8rem;
	width: 1.8rem;
}
#chilled-details .products p {
	display: grid;
	font-size: 1.05rem;
	grid-template-columns: 2.2rem 1fr;
	margin: 0;
}
#chilled-details .missed-sms {
	background: #ff3c00;
}
#chilled-details .sms-sent {
	color: #df5f5f;
	display: block;
	font-family: 'Poppins',sans-serif;
	font-size: 1rem;
	font-weight: bold;
	text-align: center;
	text-transform: uppercase;
}
@media all and (max-width: 768px) {
	#youre-next {
		min-height: 75px;
		position: relative;
		z-index: 50;
	}

	body#courier-run article > a.button.right {
		width: calc(50% - 0.5rem);
		float: right;
		margin: 0 0 1rem;
	}
	body#courier-run article > a + a {
		margin-right: 1rem !important;
	}

	#courier-run tr {
		grid-template-columns: 50% 50%;
		padding-bottom: 1rem;
		position: relative;
	}
	#chilled-details tr th, 
	#chilled-details tr td {
		grid-column: span 2;
	}
	#chilled-details tr td.rth-5,
	#chilled-details tr td.rth-6 {
		grid-column: span 1;
	}
	#courier-run .rth-0 .th-data,
	#courier-run .rth-2 .th-data,
	#courier-run .rth-3 .th-data {
		display: none;
	}
	#courier-run .rth-0 {
		border-bottom: 1px solid #eee;
		padding-bottom: 0.75rem;
	}
	#courier-run .rth-1 {
		overflow: hidden;
		height: 0;
		padding: 0;
	}
	#courier-run .rth-1 a.small.button {
		background: #555;
		position: absolute;
		right: 1rem;
		top: 0.75rem;
	}
	#courier-run .map-buttons {
		align-content: center;
		display: grid;
		grid-gap: 1rem;
		grid-template-columns: 1fr 1fr;
		justify-content: center;
		width: unset;
	}
	#courier-run .map-buttons a {
		align-items: center;
		background: #8cc919;
		display: grid;
		grid-gap: 0.3rem;
		grid-template-columns: auto 1fr;
		justify-content: start;
		line-height: unset;
		padding: 0.3rem;
		text-align: left;
	}
	#courier-run .map-buttons a span {
		display: block;
	}
	#chilled-details tr td.rth-5 span, 
	#chilled-details tr td.rth-6 span {
		display: block;
		text-align: left;
	}
	#chilled-details .log-delivery, 
	#chilled-details tr:not(.disabled) .missed-sms:not([disabled]), 
	#chilled-details tr.disabled .missed-sms {
		display: block;
		line-height: 1.5;
		padding: 0.5rem 1rem;
		width: 100%;
	}
	#courier-run .sms-sent {
		display: inline-block;
	}
}

/* Only show member details when not disabled */
.courier-run-list tr.disabled td:nth-child(2),
.courier-run-list tr.disabled td:nth-child(3),
.courier-run-list tr.disabled .map-buttons a {
	cursor: default;
	opacity: 0.2;
	pointer-events: none;
	-webkit-user-select: none;
	user-select: none;
}


span.arrival {
	float: right;
	font-size: 0.8rem;
}

.start-run svg {
	margin: 0.2rem 0 0 0.2rem;
}


#hub-chilled-orders .products {
	font-size: 1.05rem;
}
#hub-chilled-orders h3 {
	color: #f89920;
}
#hub-chilled-orders h3.future {
	color: #8cc919;
}
#hub-chilled-orders h3 .hubname {
	color: #999;
	display: inline-block;
	font-size: 0.9rem;
	padding-left: 1rem;
}

/*///////////////////////////////////////////////
// Delete profile
///////////////////////////////////////////////*/

.delete-button {
	color: #f4524d;
	display: inline-block;
	float: right;
	font-size: 0.9rem;
	margin: 3rem 0 1.5rem;
	padding: 0.5rem 0;
}
.confirm-delete {
	background: #9b2823 !important;
	border: 2px solid #9b2823 !important;
	color: #edd !important;
}

/*///////////////////////////////////////////////
// Hub reminder messages
///////////////////////////////////////////////*/

#reminder-form label {
	padding-top: 0;
}
.useful {
	color: #f89920;
	display: block;
	font-size: 1.1rem;
}
form .help {
	display: block;
	text-align: right;
}
.copy-clip {
	transition: background-color 0.5s ease;
}
.copy-clip.copied {
	transition: background-color 0.2s ease;
	background-color: #f89920;
}



/* Admin table sort arrows */
/*.admintable thead th {
	text-align: center;
}
.admintable thead th a.sort {
	display: inline-block;
	height: 0.6rem;
	overflow: hidden;
	position: relative;
	top: -0.4rem;
}
.admintable thead th a:last-child {
	left: -1.43rem;
	top: 0.2rem;
}
.admintable thead th a.sort svg {
	height: 1.1rem;
	position: relative;
	top: -0.1rem;
	width: 1.1rem;
}
.admintable thead th a.sort:last-child svg {
	top: -0.7rem;
}
.admintable thead th a:hover,
.admintable thead th a.sort:hover svg {
	color: #8cc919;
	fill: #8cc919;
}
.admintable thead th a.sort.active svg {
	color: #6fa110;
	fill: #6fa110;
}*/
.admintable thead th {
	padding: 0.5rem 0.8rem;
	text-align: center;
	white-space: nowrap;
}
.admintable thead th a.sort {
	border: 0.35rem solid transparent;
	content: '';
	display: inline-block;
	height: 0;
	position: relative;
	width: 0;
}
.admintable thead th a.sort.up {
	border-bottom: 0.35rem solid #666;
	top: -0.42rem;
}
.admintable thead th a.sort.down {
	border-top: 0.35rem solid #666;
	left: -0.9rem;
	top: 0.32rem;
}
.admintable thead th a.sort.up:hover 	{ border-bottom-color: #8cc919; }
.admintable thead th a.sort.up.active 	{ border-bottom-color: #6fa110; }
.admintable thead th a.sort.down:hover 	{ border-top-color: #8cc919; }
.admintable thead th a.sort.down.active { border-top-color: #6fa110; }

/* Highlight row */
.admintable tbody tr:hover th, 
.admintable tbody tr:hover td {
	background-color: #ffc; 
	background-color: rgba(255, 255, 204, 0.6); 
}
/* Highlight column */
.admintable .column-highlight {
	background-color: rgba(255, 255, 204, 0.3); 
}
/* Highlight cell */
.admintable tbody tr th:hover, 
.admintable tbody tr td:hover {
	background-color: rgba(255, 255, 204, 1);
}

.admintable .button.small {
	background-color: #690;
}
.admintable .button.small.delete {
	background-color: #f4524d;
}

.admintable span.check {
	cursor: pointer;
	display: block;
}

#orders th,
#orders td {
	text-align: center;
}
#supplier-payments tbody tr:not(.supplier-orders):not(.single) {
	display: none;
}
#supplier-payments tbody tr.supplier-orders th {
	cursor: pointer;
}
#supplier-payments tbody th {
	text-align: left;
}
td.action {
	min-width: 100px;
	text-align: center;
	white-space: nowrap;
}
td.action button[type="submit"] {
	margin: 0 0.5rem;
}
td.price {
	text-align: right;
}
td.saving {
	color: #6fa222;
}
td.small {
	font-size: 1rem;
}
td.total {
	font-weight: bold;
}

#order-table thead th {
	vertical-align: top;
}
span.average {
	display: block;
	font-size: 0.9rem;
}


table tbody tr.in-progress-hub,
table tbody tr.suspended-hub,
table tbody tr.inactive-hub,
table tbody tr.run-pickup-hub {
	color: #777;
}
table tbody tr.in-progress-hub 	{ background: #ffc; }
table tbody tr.suspended-hub 	{ background: #ffe8d0; }
table tbody tr.inactive-hub 	{ background: #ffe9e9; }
table tbody tr.run-pickup-hub 	{ background: #e4f9ff; }

table tbody tr.yellow 			{ background: #ffc; }
table tbody tr.orange 			{ background: #ffe8d0; }
table tbody tr.red 				{ background: #ffe9e9; }
table tbody tr.green 			{ background: #e4ffe7; }
table tbody tr.blue 			{ background: #e4f9ff; }


.col-2 {
	column-count: 1;
}
@media all and (min-width: 768px) {
	.col-2 {
		column-count: 2;
		column-gap: 1.5rem;
	}
}


#assume-hubster .order-cycle {
	color: #666;
	font-size: 0.9rem;
	margin-left: 0.5rem;
	white-space: nowrap;
}
#assume-hubster .order-cycle.open {
	color: #580;
}
#assume-hubster .order-cycle.closed {
	color: #9b2823;
}

#hubster-payments .no-subnav {
	display: none;
}
#hubster-payments .balance,
#regional-revenue .balance {
	cursor: alias;
}
#hubster-payments .suggested,
#hubster-payments #total-payments {
	height: auto;
	line-height: 1.2;
	margin: 0 0 0 0.2rem;
	padding: 0.4rem;
	text-align: right;
	width: 8rem;
}
#hubster-payments #total-payments {
	border-color: #8cc919;
	font-weight: bold;
}
#hubster-payments .reconcile {
	float: right;
	font-weight: bold;
	margin: 0 0 1.5rem 0;
	padding: 0.2rem 0;
	text-transform: uppercase;
}
#hubster-payments .reconcile span {
	background: #eb9a0a;
	border: 1px solid #eb9a0a;
	border-radius: 0.2rem;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-size: 1rem;
	font-weight: bold;
	margin-left: 1rem;
	padding: 0.3rem 0.8rem;
	text-align: center;
}

/* Regional revenue bulk  payments */
#report-regional-revenue #bulk-payment {
	float: right;
	margin: 0 0 1.5rem 0;
}
#report-regional-revenue #bulk-reconcile {
	margin-left: 1rem;
}
#regional-revenue thead th {
	vertical-align: top;
}
#regional-revenue .total-input {
	display: block;
	position: relative;
}
#regional-revenue .total-input input {
	height: auto;
	line-height: 1;
	margin: 0 auto;
	padding: 0.2rem 0.4rem;
	text-align: right;
	width: 100%;
}
#regional-revenue .total-input::before {
	color: #999;
	content: '$';
	font-size: 90%;
	font-weight: normal;
	left: 0.5rem;
	pointer-events: none;
	position: absolute;
	top: 0.2rem;
	z-index: 1;
}


#outstanding-payments td.action {
	display: flex;
	flex-flow: wrap;
	gap: 0.5rem;
	justify-content: center;
	max-width: 275px;
}
#outstanding-payments .expired, 
#outstanding-payments .manual-eway {
	min-width: 6.2rem;
}


#activate-hub #human-date {
	color: #df5f5f;
	font-style: italic;
}


/* Find a Hub */
#register span.status {
	background-color: #ebebeb;
	border-radius: 0.3rem;
	border: 1px solid #999;
	padding: 0.3rem 0.5rem;
}
#register tr.operational span.status {
	background-color: #e0f2d9;
	border: 1px solid #58a739;
	color: #58a739;
}
#register tr.in-progress span.status {
	background-color: #fdf9df;
	border: 1px solid #eb9a0a;
	color: #eb9a0a;
}
#register a.button.join {
	padding: 0.2rem 0.5rem;
}

/* Register your details */
#register article #eWAYBlock {
	clear: right;
	float: right;
	padding: 0.1rem 0 1.5rem 1.5rem;
}

#register-form {
	max-width: 40rem;
}
.profile-form #title,
.profile-form #household,
.profile-form #zipcode,
.profile-form #billZipcode,
.profile-form .custom-upload,
#supplier-products .custom-upload,
#cc-cvn {
	display: block;
	width: 14rem;
}
#register-form .confirm label {
	display: block;
	padding: 0 0 1.2rem 1.5rem;
	position: relative;
}
#register-form .confirm input {
	left: 0;
	margin-right: 0.5rem;
	position: absolute;
	top: 0.5rem;
}

.password-toggle {
	color: #666;
	cursor: pointer;
	float: right;
	height: 1.1rem;
	pointer-events: all;/*
	margin-right: 0.3rem;
	width: 1.1rem;*/
}
.password-toggle:hover {
	color: #f89920;
}
.password-toggle[aria-checked='true']:hover {
	color: #6fa222;
}
.password-toggle .icon-eye:hover {
	fill: #f89920;
	stroke: #ff675b;
}
.password-toggle .icon-eye-slash {
	fill: #6fa222;
	stroke: #6fa222;
}

.custom-upload input {
	display: none;
}
/*.avatar-original {
	background: #eee;
	border: 1px solid #ccc;
	max-width: 100%;
	padding: 0.5rem;
}*/
.avatar-holder {
	position: relative;
}
.avatar-holder:has(> img)::before {
	background: #f9f9f9;
	border: 1px solid #ddd;
	content: '';
	display: block;
	height: calc(100% - 1.6rem);
	margin: 1.6rem 0 0;
	position: absolute;
	width: 100%;
	z-index: -1;
}
.avatar-original {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	padding: 0.5rem;
}


@media all and (min-width: 540px) {
	.profile-form #use-billing {
		float: right;
	}
}


.freshmonths {
	align-content: space-between;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: flex-start;
}
.freshmonths input {
	cursor: pointer;
	height: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}
.checkboxlist.paragraphs .freshmonths .checkbox {
	padding: 0;
}
.freshmonths .checkmark {
	background: #8cc919;
	border-radius: 0.2rem;
	cursor: pointer;
	display: block;
	font-weight: bold;
	height: 2rem;
	line-height: 2rem;
	overflow: hidden;
	text-align: center;
	width: 2rem;
}
.freshmonths input:checked ~ .checkmark {
	background: #333;
}

.first-letter-only {
	color: transparent;
	font-size: 0;
}
.first-letter-only::first-letter {
	color: #fff;
	font-size: 1.2rem !important;
}



form p > button[type="submit"] {
	float: right;
	justify-self: right;
	padding: 0.5rem 2rem;
}
form p > .button.cancel {
	background-color: #999;
	width: fit-content;
}

#register-form .button.cancel + button {
	float: right;
	margin: 0;
}

/* Get user's geocoded address position */
#user-map-container {
	margin-bottom: 1.5rem;
	position: relative;
}
#user-map-container #map {
	height: 600px;
	width: 100%;
}
#user-map-container #floating-panel {
	background: #fff;
	border-radius: 0.2rem;
	box-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.1);
	left: 10px !important;
	padding: 0.3rem;
	position: absolute !important;
	top: 10px !important;
	z-index: 20;
}
#user-map-container #address {
	border-radius: 0.2rem;
	height: 2.65rem;
	margin: 0;
	padding: 0.42rem 1rem;
	width: 30rem;
}

#user-map-container #infowindow-content {
	display: none;
}
#user-map-container .infowindow-styler {
	font-size: 1rem;
}
#user-map-container .infowindow-styler strong {
	display: inline-block;
	width: 5rem;
}
#user-map-container #save-user-position {
	padding-top: 0.5rem;
}


table.zebra thead tr th 	{ background: #000; color: #fff; font-weight: bold; }
table.zebra tbody tr:nth-child(even) { background: #e9e9e9; }

tbody tr.row-zebra 			{ background: #f8f8f8; }
tbody tr.row-highlight 		{ background: #ffc; }
tbody tr.inactive 			{ background: #fcc; }
tbody tr.included 			{ background: #cfc; }

tbody tr.status-open 		{ background: #ffc; }
tbody tr.status-joined 		{ background: #cfc; }
tbody tr.status-cancelled 	{ background: #fcc; }


span.help {
	color: #999;
	cursor: help;
	display: inline-block;
	font-size: 90%;
}


select option.active-n 	{ color: #999; }
select option.member 	{ background: #e2edcb; }
select option.hubster 	{ background: #eddecb; }
select option.courier 	{ background: #cbede1; }
select option.supplier 	{ background: #bedfed; }
select option.staff 	{ background: #e3cbed; }
select option.admin 	{ background: #edcccb; }

/* Product categories */
select option.type-0 	{ background: #e2edcb; }
select option.type-1 	{ background: #eddecb; }
select option.type-2 	{ background: #bedfed; }
select option.type-3 	{ background: #e2edcb; }
select option.type-4 	{ background: #e3cbed; }
select option.type-5 	{ background: #edcccb; }
select option.type-11 	{ background: #cbede1; }


.skipped { background: #f3e6f899; }



/* Bank details form */
#bank-detail-form .branching input {
	letter-spacing: 0.2rem;
	margin: 0;
	width: 4.6rem;
}
#bank-detail-form .branching span {
	padding: 0 0.3rem;
}
#bank-detail-form #account {
	letter-spacing: 0.2rem;
}
#bank-detail-form #bank-address {
	color: #888;
	display: block;
	font-size: 1.1rem;
	font-style: italic;
	padding: 0.5rem 0 0;
}
#bank-detail-form #bank-address.error {
	color: #df5f5f;
}
@media all and (min-width: 720px) {
	#bank-detail-form #bank-address {
		display: inline-block;
		padding: 0 0.3rem;
	}
}

/* Bank accounts */
span.abn {
	color: #666;
	display: block;
	font-size: 1rem;
}

.has-abn 	{ color: #8cc919; }
.no-abn 	{ color: #f4524d; }

/* Weekly summary */
.weekly-summary thead th:not(:first-child),
.weekly-summary tbody td {
	padding-right: 1.4rem;
	position: relative;
	text-align: right;
	vertical-align: top;
}
.weekly-summary thead th {
	min-width: 6.2rem;
}
.weekly-summary thead th span,
#hub-spending-table thead th span {
	display: block;
	font-size: 0.9rem;
}
.weekly-summary tbody th {
	white-space: nowrap;
}
.weekly-summary .supplier {
	background: #ddd;
	border-bottom: 1px solid #bbb;
	border-top: 2px solid #999;
	font-weight: bold;
	text-transform: none;
	vertical-align: top;
}
.weekly-summary .all-suppliers {
	background: #effdd5;
	font-weight: bold;
}
.weekly-summary .all-suppliers.supplier {
	background: #b5da70;
}
.weekly-summary .row-total {
	border-bottom: 3px double #999;
	font-weight: bold;
	text-transform: none;
	vertical-align: top;
}
.weekly-summary .row-margin {
	background: #fff;
	border: none;
}
.weekly-summary .row-margin th,
.weekly-summary .row-margin td {
	font-size: 0.9rem;
	padding-top: 0.3rem;
	padding-bottom: 0.3rem;
}
.row-margin {
	background: #eee;
}
/*.weekly-summary .decrease {
	color: #df5f5f;
}
.weekly-summary .increase {
	color: #58a739;
}*/
.weekly-summary tbody td span {
	position: relative;
}
.weekly-summary.with-arrows td::before {
	border: 0.3rem solid transparent;
	content: '';
	display: block;
	height: 0.3rem;
	overflow: hidden;
	position: absolute;
	right: 0.4rem;
	top: 0.5rem;
	width: 0.3rem;
}
.weekly-summary.with-arrows .decrease::before {
	border-top: 0.3rem solid #df5f5f;
	top: 1.1rem;
}
.weekly-summary.with-arrows .increase::before {
	border-bottom: 0.3rem solid #58a739;
	top: 0.9rem;
}
.weekly-summary .this-week {
	background-color: #fdf9df;
	background-color: rgba(253, 249, 223, 0.25);
	color: #eb9a0a;
	cursor: progress;
}
.weekly-summary .percentage {
	display: block;
	font-size: 0.85rem;
	text-align: right;
}
.weekly-summary .percentage::before,
.weekly-summary .percentage::after {
	content: '(';
	display: inline;
	opacity: 0.75;
}
.weekly-summary .percentage::after {
	content: ')';
}
.weekly-summary .advanced {
	display: none;
}
.weekly-summary .n-a {
	color: #999;
	font-size: 0.9rem;
}



td .percentage img {
	display: block;
	margin: -2px 0 0 -2px;
}
tr.separator {
	border-top: 1px solid #ccc;
}


#from-hub span {
	display: inline-block;
	text-align: right;
	width: 3rem;
}

.clear-line {
	clear: both;
	margin: 0;
}

li[data-productid="2093"] {
	display: none !important;
}


/*///////////////////////////////////////////////
// Order details
///////////////////////////////////////////////*/
#failed-splits .margin {
	margin-right: 0.6rem;
}
#failed-splits .percentage {
	background-color: #8cc919;
	background-image: linear-gradient(to right, #ee0000, #ff8800, #aaff00);
	border: 1px solid #333;
	border-radius: 3px;
	display: inline-block;
	font-size: 8px;
	height: 12px;
	padding: 2px;
	width: 120px;
}
#failed-splits .percentage img {
	background: #000;
	border-radius: 1px;
	height: 10px;
}
#failed-splits .measure {
	background: #ffffff;
	border-radius: 1px;
	color: #333333;
	display: inline;
	font-size: 8px;
	height: 10px;
	line-height: 1;
	padding: 1px 2px;
}

/*///////////////////////////////////////////////
// Supermarket prices
///////////////////////////////////////////////*/

#supermarket-prices #jump-to td {
	cursor: pointer;
	text-align: right;
}
.price-point {
	float: right;
	font-size: 1rem;
	font-weight: normal;
	text-align: right;
}
button.set-store-productID {
	float: right;
}
#assign-storeID {
	display: none;
}
#assign-storeID .search {
	min-width: 30rem;
}

/*///////////////////////////////////////////////
// vCard instructions
///////////////////////////////////////////////*/

.grid3 {
	display: grid;
	grid-gap: 1.5rem;
	grid-template-columns: 33% 33% 33%;
	margin: 0 0 1.5rem;
	max-width: unset;
	text-align: left;
}
.grid3 img {
	border: 1px solid #999;
	box-shadow: 0 0 10px #00000033;
	clear: both;
	display: block;
	margin: 1rem auto 1.5rem;
	order: 2;
	padding: 3px;
}
@media all and (max-width: 768px) {
	#vcard a.button.right {
		float: none;
		margin: 1.5rem auto;
		text-align: center;
		display: block;
		max-width: max-content;
	}
	.grid3 {
		display: block;
		margin: 0 auto 1.5rem;
		max-width: 400px;
		text-align: center;
	}
	.grid3 li {
		display: grid;
	}
	.grid3 li + li {
		border-top: 1px solid #ddd;
		padding-top: 1rem;
	}
}

/*///////////////////////////////////////////////
// iOS versus Android
///////////////////////////////////////////////*/

@media all and (max-width: 768px) {
	@supports (-webkit-overflow-scrolling: touch) {
		/* CSS specific to iOS devices */
		.iphone 	{ display: block; }
		.android 	{ display: none; }
	}
	@supports not (-webkit-overflow-scrolling: touch) {
		/* CSS for other than iOS devices */
		.iphone 	{ display: none; }
		.android 	{ display: block; }
	}
}

/*///////////////////////////////////////////////
// A2HS: Add to Home Screen
///////////////////////////////////////////////*/

.a2hs-prompt {
	background: #222;
	border-radius: 2px;
	border: 2px solid #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	color: #fff;
	display: block;
	font-size: 1.1rem;
	opacity: 0;
	padding: 1rem;
	position: absolute;
	right: 1rem;
	top: -15rem;
	transition: top 1000ms ease-in-out, opacity 1000ms ease-in-out;;
	width: 20rem;
	z-index: 100;
}
.a2hs-prompt::before, 
.a2hs-prompt::after {
	border-left: 0.8rem solid transparent;
	border-right: 0.8rem solid transparent;
	border-bottom: 0.8rem solid #222;
	content: "";
	left: 50%;
	margin-left: -0.4rem;
	position: absolute;
	top: -0.6rem;
	z-index: 2;
}
.a2hs-prompt::before {
}
.a2hs-prompt::after {
	border-bottom: 10px solid #fff;
	margin-top: -3px;
	z-index: 1;
}
.a2hs-prompt span {
	color: #8cc919;
	cursor: pointer;
	float: left;
	font-size: 0.9rem;
	padding-top: 0.5rem;
	text-decoration: underline;
}
#install-app {
	float: right;
	font-size: 0.85rem;
	line-height: 1.4;
	margin: 0;
	padding: 0.4rem 0.6rem;
}
@media all and (min-width: 780px) {
	.a2hs-prompt.show {
		opacity: 1;
		top: 1rem;
	}
}

.ios-prompt {
	background: #222;
	border: 2px solid #f9f8f0;
	bottom: -20rem;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
	color: #f9f8f0;
	display: block;
	line-height: 1.8;
	margin: 15px 30px;
	opacity: 0;
	padding: 30px;
	position: fixed;
	transition: bottom 500ms ease-in-out, opacity 1000ms ease-in-out;;
	z-index: 999;
}
.ios-prompt.show {
	opacity: 1;
	bottom: 0rem;
}
.ios-prompt::before,
.ios-prompt::after {
	border-left: 10px solid transparent;
	border-right: 10px solid transparent;
	border-top: 10px solid #222;
	bottom: -9px;
	content: '';
	display: block;
	left: calc(50% - 15px);
	height: 0;
	position: absolute;
	width: 0;
	z-index: 999;
}
.ios-prompt::after {
	border-top-color: #f9f8f0;
	bottom: -12px;
	filter: drop-shadow(0 0 5px rgba(0, 0, 0, 0.3));
	z-index: 998;
}
.ios-prompt #cancel-app {
	background: #222;
	height: 44px;
	position: absolute;
	right: 0;
	top: 0;
	width: 44px;
	z-index: 999;
}
.ios-prompt h3 {
	padding: 0 15px 0.5rem 0;
}
.ios-prompt p {
	font-size: 0.95rem;
	line-height: 1.9;
	margin-bottom: 0.5rem;
}
.ios-prompt p strong {
	color: #8cc919;
	white-space: nowrap;
}
.ios-prompt svg.icon-ios-share {
	fill: #8cc919;
	height: 1.3rem;
	margin-bottom: -0.2rem;
	stroke-width: 0.02rem;
	width: 1.3rem;
}
.ios-prompt svg.icon-plus-square-o {
	fill: #8cc919;
	height: 1.1rem;
	margin-bottom: -0.25rem;
	stroke-width: 0.06rem;
	width: 1.1rem;
}

/*///////////////////////////////////////////////
// Print styles
///////////////////////////////////////////////*/

@media print {
	@page {
		margin: 2cm;
	}

	@page {
		size: A4 portrait;
	}

	body, th, td {
		background-color: #fff;
		color: #000;
		font-family: Verdana, sans-serif;
		font-size: 9pt;
		padding: 4px;
		position: relative;
	}
	body {
		border: none;
	}
	.screenonly,
	#masthead,
	#site-nav,
	#breadcrumbs,
	#packing-form,
	footer,
	button {
		display: none !important;
	}
	.printonly,
	#container {
		display: block;
	}
	table {
		display: table;
	}

	body#packing-guide #container,
	body.development #container {
		border-bottom: none;
		height: auto;
		position: relative;
    }

	#main > article {
		padding: 0;
	}

	.tax-invoice h1,
	.tax-invoice p {
		display: block;
	}

	#order-details,
	#order-details .row-total {
		border-top: 1pt solid #000;
	}
	#order-details,
	#order-details thead, 
	#order-details tbody, 
	#order-details tfoot,
	#order-details .row-total {
		border-bottom: 1pt solid #000;
	}
	#order-details th,
	#order-details td {
		float: none;
		font-size: 7.5pt;
	}

	#packing-guide article {
		max-width: none;
		padding: 0;
	}
	#packing-guide article > h1,
	#packing-guide article > .packing-data {
		display: none;
	}
	/*.packing-data {
		column-count: 2;
		width: 100%;
	}
	.packing-data dt {
		width: 10%;
	}
	.packing-data dd {
		float: left;
		padding: 0;
		width: 40%;
	}*/
	.packing-data {
		width: 100%;
	}
	.packing-data dt {
		font-weight: bold;
		width: auto;
	}
	.packing-data dt::after {
		font-weight: bold;
		content: ": ";
		padding-right: 0.3rem;
	}
	.packing-data dd {
		float: left;
		padding: 0 5rem 0 0;
		width: auto;
	}

	#packing-container {
		max-height: none !important;
		max-width: 25.7cm;
		overflow: hidden;
	}
	#packing-container {
		font-size: 9pt !important;
	}
	#packing-container div {
		display: block;
	}
	#packing-container table {
		border-top: none;
		display: none;
		/*table-layout: fixed;*/
		width: 100%;
	}
	#packing-container table th, 
	#packing-container table td, 
	#guide-container table th, 
	#guide-container table td {
		height: auto;
	}
	#packing-container table.packing-printable {
		display: block;
	}
	#packing-container table thead {
		border-top: 1px solid #ddd;
	}
	#packing-container table thead tr,
	#packing-container table thead th {
		background-color: #fff;
		height: 140px;
		overflow: hidden;
		padding: 4px;
	}
	#packing-container table thead th:not(.product-header) span {
		height: 120px;
		line-height: 28px;
	}
	#packing-container table .product-header,
	#packing-container table .header-row th {
		text-transform: uppercase;
	}
	#packing-container table thead tr,
	#packing-container table tbody tr {
		border-bottom: 2px solid #ddd;
	}
	#packing-container table tbody tr.header-row th,
	#packing-container table tbody tr:last-child {
		border-top: 1px solid #ddd;
		border-bottom: 1px solid #ddd;
	}
	#packing-container table tbody th {
		background-color: #fff !important;
		max-width: 6cm;
		overflow: hidden;
		position: relative !important;
		text-overflow: ellipsis;
		white-space: nowrap;
		width: 228px;
	}
	#packing-container table tbody td {
		border-right: 1px solid #ddd;
		width: 36px;
	}
	#packing-container table tbody td.oum {
		width: 84px;
	}
	#packing-container table tbody td.empty {
		color: #ebebeb;
	}

	/* Packing Guide for products only */
	#guide-container section {
		margin-bottom: 1.5rem;
		page-break-inside: avoid;
	}
	#guide-container h2 {
		border-bottom: 1px solid #ddd;
		display: block;
		font-size: 1.3rem;
		line-height: 1;
		margin-bottom: 0.2rem;
		padding: 0.3rem 0;
		page-break-after: avoid;
	}
	#guide-container h2 svg {
		display: none !important;
	}
	#guide-container table {
		border: none;
		container-type: inline-size;
		display: block !important;
		margin:  0;
		overflow: inherit;
		page-break-inside: avoid;
	}
	#guide-container thead {
		display: none;
	}
	#guide-container section tbody {
		/*grid-template-columns: 1fr 1fr;
		display: grid;
		grid-gap: 0 0.7cm;
		height: auto;*/
		columns: 2 0.7rem;
		column-fill: balance;
		display: block;
		height: auto;
		page-break-inside: avoid;
	}
	#guide-container section.count-1 tbody {
		min-height: 2rem;
	}
	#guide-container section.count-2 tbody {
		min-height: 4rem;
	}
	#guide-container section.count-3 tbody {
		min-height: 6rem;
	}
	#guide-container tr {
		display: block;
		background: none;
	}
	#guide-container table th, 
	#guide-container table td {
		display: inline-block;
		padding: 4px 0;
		vertical-align: top;
	}
	#guide-container table td.extra-items {
		display: none !important;
	}
	#guide-container .counter {
		float: right;
		padding: 0.55rem 0 0 0;
		text-align: right;
		width: 7rem;
	}

	/* Packing Guide for members */
	#packing-guide-member #guide-container table th {
		vertical-align: top;
		width: 70%;
	}
	#packing-guide-member #guide-container table td {
		vertical-align: top;
		width: 30%;
	}

	/* Chilled delivery manifest */
	#courier-run-manifest {
		color-adjust: exact;
		print-color-adjust: exact;
		-webkit-print-color-adjust: exact;
	}
	#chilled-details thead th {
		background: #222;
		color: #fff;
	}
	#chilled-details .member,
	#chilled-details .products p {
		white-space: nowrap;
	}
	#chilled-details .member span,
	#chilled-details .delivery-note,
	#chilled-details .products p {
		font-size: inherit;
	}
}