/* #container {
	padding: 0;
}

#header {
	background-color: black;
	color: white;
	height: 140px;
	padding: 40px;
}

#homelink {
    display: block;
    float: none;
    order: -1;
    width: 335px;
    height: 80px;
    background-image: url(/media/imgs/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#site_title {
	display: none;
}

#subheader {
	display: none;
}

#boxes {
	display: flex;
    justify-content: center;
	gap: 60px;
} */

@charset "UTF-8";
/* CSS Document */

@import "fonts.css";

:root {
	/* Layout */
	--page-width: 100vw;
	--page-padding: 40px;
	--column-width: 288px;

	/* Colours */
	--black: 0, 0, 0;
	--white: 255, 255, 255;

	/* - Primary - */
	--orange-dark: 190, 91, 2;
	--orange-medium: 214, 103, 3;
	--orange: 238, 114, 3;
	--orange-light: 240, 128, 28;
	--orange-bright: 241, 142, 53;

	--blue-dark: 0, 40, 41;
	--blue-medium: 0, 80, 82;
	--blue: 0, 120, 122;
	--blue-light: 0, 149, 151;
	--blue-bright: 0, 201, 204;

	--red-dark: 132, 11, 23;
	--red-medium: 170, 14, 29;
	--red: 208, 17, 36;
	--red-light: 237, 27, 47;
	--red-bright: 240, 66, 84;

	--grey-dark: 82, 82, 82;
	--grey-medium: 102, 102, 102;
	--grey: 115, 115, 115;
	--grey-light: 143, 143, 143;
	--grey-bright: 163, 163, 163;

	/* - Secondary - */
	--lime-green-dark: 147, 171, 54;
	--lime-green: 170, 196, 66;
	--lime-green-light: 185, 206, 100;

	--turquoise-dark: 4, 159, 144;
	--turquoise: 5, 188, 171;
	--turquoise-light: 6, 239, 215;

	--magenta-dark: 224, 0, 112;
	--magenta: 225, 0, 126;
	--magenta-light: 255, 51, 153;

	--dark-grey-dark: 40, 40, 42;
	--dark-grey: 53, 54, 56;
	--dark-grey-light: 79, 81, 84;

	--page-background-colour: rgb(var(--white));
	--page-text-colour: rgb(var(--white));
	--content-background-colour: rgb(var(--white));
	--content-text-colour: rgb(var(--black));
	--content-alt-background-colour: rgb(var(--dark-grey));
	--content-alt-text-colour: rgb(var(--white));
	--footer-background-colour: rgb(var(--orange));
	--footer-text-colour: rgb(var(--white));

	--site-title-colour: rgb(var(--orange));
	--highlight-colour: rgb(var(--orange-medium));

	--box-background-colour: rgb(var(--white));
	--box-text-colour: rgb(var(--black));
	--box-border-colour: rgb(var(--orange));

	--button-background-colour: rgb(var(--orange));
	--button-text-colour: rgb(var(--white));
	--button-border-colour: rgb(var(--orange));
	--button-hover-background-colour: rgb(var(--orange-medium));
	--button-hover-text-colour: rgb(var(--white));
	--button-hover-border-colour: rgb(var(--orange-medium));
	--button-disabled-background-colour: rgb(var(--grey-dark));
	--button-disabled-text-colour: rgb(var(--white));
	--button-disabled-border-colour: rgb(var(--grey-dark));
	--button-alt-background-colour: rgb(var(--lime-green));
	--button-alt-text-colour: rgb(var(--white));
	--button-alt-border-colour: rgb(var(--lime-green));
	--button-alt-hover-background-colour: rgb(var(--lime-green-dark));
	--button-alt-hover-text-colour: rgb(var(--white));
	--button-alt-hover-border-colour: rgb(var(--lime-green-dark));
	--button-alt-disabled-background-colour: rgb(var(--dark-grey-dark));
	--button-alt-disabled-text-colour: rgb(var(--white));
	--button-alt-disabled-border-colour: rgb(var(--dark-grey-dark));

	--table-header-background-colour: rgb(var(--orange));
	--table-header-text-colour: rgb(var(--white));
	--table-cell-background-colour: rgb(var(--white));
	--table-cell-text-colour: rgb(var(--black));
	--table-cell-alt-background-colour: rgb(var(--grey-light));
	--table-cell-alt-text-colour: rgb(var(--white));

	--icon-fill-colour: rgb(var(--orange));
	--icon-background-colour: rgb(var(--grey-light));

	/* Fonts */
	--font-stack-default: 'Noto Sans', Arial, sans-serif;
	--font-stack-mclaren: 'McLaren Bespoke', 'Noto Sans', Arial, sans-serif;
}

* {
	box-sizing: border-box;
}

html,
body {
	min-height: 100%;
	font-family: var(--font-stack-default);
	font-size: 16px;
	background-color: var(--page-background-colour);
	color: var(--page-text-colour);
}

html,
body,
#maintable {
	width: 100%;
	min-width: 0;
	height: 100%;
	padding: 0;
	margin: 0;
}

body {
	min-width: var(--page-width);
}

body.error {
	font-weight: normal;
	font-size: 16px;
	color: var(--page-text-colour);
	text-align: unset;
	margin-bottom: 0;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
}

#maintable > tbody {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	height: 100%;
	width: var(--page-width);
	margin: 0 auto;
	overflow: auto;
	background-color: var(--content-background-colour);
	color: var(--content-text-colour);
}

#container {
	width: var(--page-width);
	padding: 0;
}

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

.button,
.button a,
.button input {
	width: auto;
	height: auto;
	float: none;
}

.button {
	display: inline-block;
}

.button a,
.button a:link,
.button a:visited,
.button input {
	display: block;
	padding: .75em;
	font-weight: 400;
	text-align: center;
	font-size: 18px;
	font-family: var(--font-stack-mclaren);
	line-height: 1 !important;
	text-transform: uppercase;

	background-color: var(--button-background-colour);
	color: var(--button-text-colour);
	border: 1px solid var(--button-border-colour) !important;

	transition: all .4s ease;
}

.button a:hover,
.button input:hover {
	text-decoration: none;
	background-color: var(--button-hover-background-colour);
	color: var(--button-hover-text-colour);
	border: 1px solid var(--button-hover-border-colour) !important;
}

.button.disabled a,
.button.disabled a:link,
.button.disabled a:visited,
.button.disabled input,
.button input[disabled] {
	background-color: var(--button-disabled-background-colour);
	color: var(--button-disabled-text-colour);
	border: 1px solid var(--button-disabled-border-colour) !important;
	pointer-events: none;
}

.button.disabled {
	cursor: not-allowed;
}

.button.back a,
.button.back a:link,
.button.back a:visited,
.button.back input {
	/* background-color: var(--button-alt-background-colour);
	color: var(--button-alt-text-colour);
	border: 1px solid var(--button-alt-border-colour) !important; */
}

.button.back a:hover,
.button.back input:hover {
	/* text-decoration: none;
	background-color: var(--button-alt-hover-background-colour);
	color: var(--button-alt-hover-text-colour);
	border: 1px solid var(--button-alt-hover-border-colour) !important; */
}

table td > .button:only-child {
	margin: 0;
}

table td > .button:first-child {
	margin-left: 0;
}

input,
select {
	font-family: var(--font-stack-default);
	font-size: 16px;
	background-color: rgb(var(--white));
}

input[type="button"],
input[type="submit"] {
	font-family: var(--font-stack-mclaren);
	font-size: 18px;
	text-transform: uppercase;
	font-weight: 400;
}

input:not([type="checkbox"],[type="radio"],[type="submit"],[type="button"]),
select {
	width: 100%;
	padding: .15em .1em;
}

input::placeholder,
select::placeholder {
	color: rgb(var(--grey-light));
}

table {
	width: 100%;
}

#content {
	display: flex;
	justify-content: center;
}

#column2 {
	max-width: 1400px;
}

#content table th,
#content table tbody td {
	vertical-align: text-top;
	padding: var(--page-padding);
}

#content table th {
	background-color: var(--table-header-background-colour);
	color: var(--table-header-text-colour);
	font-size: 16px;
	font-weight: bold;
}

#content table th a {
	color: var(--table-header-text-colour);
}

#content table td {
	font-size: 14px;
	font-weight: normal;
}

#content table tr:nth-child(2n+1) td {
	background-color: var(--table-cell-background-colour);
	color: var(--table-cell-text-colour);
}

#content table tr:nth-child(2n) td {
	background-color: var(--table-cell-alt-background-colour);
	color: var(--table-cell-alt-text-colour);
}

#edit_content {
	right: calc((2 * var(--page-padding)) + 50px);
	bottom: var(--page-padding);
}

#edit_content .button {
	margin: 0;
}

#edit_content .button a {
    background-blend-mode: multiply, color-dodge;
	background-color: var(--icon-background-colour);
    filter: brightness(1.1);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    background-size: contain;
    opacity: 1;
	border: none !important;
}

#edit_content .button a:hover {
	border: none !important;
}

body .recordset {
	margin-left: 0;
	margin-right: 0;
}

.recordset h1,
.recordset h2 {
	background-color: rgb(var(--orange));
	color: rgb(var(--white));
}


/* ------------ */
/* -- HEADER -- */
/* ------------ */

#header {
	width: 100%;
	max-width: var(--page-width);
	padding: var(--page-padding) var(--page-padding) calc(var(--page-padding) + 20px) var(--page-padding);
	/* margin: 0 auto; */
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	background: rgb(var(--black));
}

#login_header {
	width: 100%;
	max-width: var(--page-width);
	padding: var(--page-padding) var(--page-padding) calc(var(--page-padding) + 20px) var(--page-padding);
	margin: 0 auto;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	background: rgb(var(--black));
}

#homelink {
	display: block;
	float: none;
	order: -1;
    width: 335px;
    height: 80px;
	margin-right: 100px;
	background-image: url(/media/imgs/logo.png);
	background-size: contain;
	background-repeat: no-repeat;
}

#login_header #homelink {
    width: calc(300px + var(--page-padding));
}

@media screen and (max-width: 845px) {
	#header {
		flex-direction: column;
	}
	#homelink {
		width: calc(335px/1.5);
		height: calc(80px/1.5);
		margin-right: 0;
		background-image: url(/media/imgs/logo.png);
	}

	.nav {
		margin-top: 20px!important;
	}

	#login_header #homelink {
    	width: calc(150px + var(--page-padding));
	}
}

#site_title,
#header #logo,
#search {
	display: none;
}

.error {
	color: rgb(var(--red));
}

#subheader {
	display: none;
}

/* -- MESSAGES -- */

body#message {
	background-color: var(--page-background-colour);
}

body#message > div:nth-child(1) {
	display: flex;
    flex-direction: column;
	width: var(--page-width) !important;
	height: 100% !important;
    min-height: 100vh;
	margin: 0 auto !important;
    padding: var(--page-padding) !important;
    justify-content: center;
	background-color: var(--content-background-colour);
	color: var(--content-text-colour);
	text-align: center;
	background-image: url(../imgs/success.gif);
    background-repeat: no-repeat;
    background-position: top center;
}

body#message div.success {
	background-image: url(../imgs/success.gif);
    background-repeat: no-repeat;
    background-position: top center;
    padding-top: 240px !important;
	width: auto;
    margin: 0 auto;
}

body#message > #maintable {
	width: var(--page-width);
	height: auto;
    min-height: 100vh;
    margin: auto;
	background-color: var(--content-background-colour);
	color: var(--content-text-colour);
}

body#message #column2 > div {
	text-align: center;
}

/* NAV */

.nav {
	margin-top: -20px;
}

.nav a {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height: 1em;
	min-width: 52px;
	width: auto;
	cursor: pointer;
	color: var(--button-text-colour);
	font-weight: bold;
	height: 100%;
	text-decoration: none;
	padding: 0 8px;
	/* padding: var(--page-padding); */
}

.nav .menu li {
	text-transform: uppercase;
}

.nav ul {
	padding: 0;
}

#nav {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	flex-wrap: wrap-reverse;
}

#nav .menu {
	width: 100%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: var(--page-padding);
	flex-wrap: wrap-reverse;
	padding: 0 var(--page-padding);
}

#nav li {
	float: none;
	height: 100%;
	margin: 0;
}

#nav a {
	display: flex;
	justify-content: center;
	align-items: center;
	line-height:0.9em;
	min-width: 52px;
	width: auto;
	cursor: pointer;
	background-color: var(--button-background-colour);
	color: var(--button-text-colour);
	font-weight: bold;
	height: 100%;
	text-decoration: none;
	padding: var(--page-padding);
}

#nav a:hover {
	background-color: var(--button-hover-background-colour);
	color: var(--button-hover-text-colour);
}

#nav .active a {
	background-color: var(--button-alt-hover-background-colour);
	color: var(--button-alt-hover-text-colour);
}

#notificationsAlert svg {
	fill: var(--button-alt-text-colour);
}

#breadcrumb {
	background-image:url(../imgs/nav_header_backer.gif);
	background-repeat:repeat-x;
	background-position:left top;
	height:44px;
}

#breadcrumb ul {
	padding-top:0px;
	margin-top:0px;
}

#breadcrumb li {
	padding-top:10px;
}

#breadcrumb a, #breadcrumb li {
	color:#000;
}

/* LOGIN PAGE */

#loginpage #content {
	flex-direction: column;
	height: 75vh;
}

#loginpage .fieldset {

}

#dialog {
	width: calc(2 * var(--column-width));
	margin: 0 auto;
	text-align: center;
	margin-top: 18px;
	background-image:none;
	background-color: var(--page-background-colour);
	color: rgb(var(--black));
}

#dialog h1 {
	background-color: var(--page-background-colour);
	color: rgb(var(--black));
	padding: var(--page-padding);
	margin: 0;
	font-size: 1.5rem;
}

#dialog .content {
	padding:32px;
	padding-right:48px;
}

#dialog #login_ul {
	margin-left: 0;
}

#dialog #login_text {
	display: none;
}

#login_ul li {
	display: flex;
	justify-content: center;
}

#login_ul li label {
	display: none;
}

#login_ul li input {
	border-bottom: 2px solid black;
	width: 300px;
	margin-bottom: 20px;
}

#login_links {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 300px;
	margin: 10px auto;
}

#login_links div {
	width: 300px;
	height: 42px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-stack-mclaren);
	font-size: 16px;
	font-weight: 400;
	color: white;
	background-color: rgb(var(--orange));
}

#login_links div a {
	color: white!important;
	text-transform: uppercase;
	text-decoration: none;
	width: 100%;
}

#login #submit_button {
	display: inline-block;
    margin: 0 var(--page-padding);
}

#login #submit_button input {
	width: 300px;
}

.ok_button {
	display: none;
}

form#forgot {
	text-align: center;
}

form#forgot .button {
	float: none !important;
}

.highlight_field, .highlight {
	background-color: rgb(var(--lime-green));
}

.highlight a,
.highlight a:visited {
	color: inherit;
}

#forgot h3 {
	text-align: center;
}


/* #order_form .odd {
	background-color:#FFF;
}

#order_form .odd td, #order_form .even td, #order_form .rowhover td {
	border-bottom:1px solid #b2b2b2;
}

#content #order_form {
	border-bottom:none;
} */

/* BOXES */

#boxes_container {
	margin-top: calc(var(--page-padding) * 2);
}

#boxes {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: calc(var(--page-padding) * 1.5);
}

#boxes .box {
	width: 300px;
	height: 390px;
	/* display: flex;
    flex-direction: column-reverse;
	justify-content: space-between; */
	display: grid;
    gap: 15px 0px;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
	/* margin-bottom: 20px; */
}

#boxes .box span.border {
	display: none;
}

#boxes h3 {
	margin: 0;
	text-align: left;
	background-color: rgb(var(--white));
	color: rgb(var(--black));
	display: block;
	font-size: 24px;
}

#boxes h3::before {
	content: url('/media/imgs/arrow.svg');
	width: 12px;
	height: 20px;
    float: left;
}

#boxes .box > a {
	display: block;
	width: 302px;
    height: 302px;
    border: 1px solid rgb(var(--grey-bright));
	order: 1;
}

#boxes .box > h3 {
	order: 2;
}

#boxes .box h3 a {
	display: block;
	width: 100%;
	margin-left: 20px;
	text-transform: uppercase;
}

#boxes img {
	height: 300px;
    width: 300px;
	margin: 0;
	padding: 0;
	border: none;
}

#boxes .border {
	border:1px solid #A9AAAB;
	border-top:none;
	height:300px;
	width:300px;
	position:absolute;
	z-index:1;
	cursor:pointer;
}

#boxes #preview a#tag {
	display: block;
	height: 326px;
	width: 300px;
}

#boxes > .clear {
	flex:1
}

@media screen and (max-width: 715px) {
	#boxes > .clear {
		display: none;
	}
}

form#password_change .button,
form#my_details #register_button {
	display: block;
}

form#password_change .button input,
form#my_details #register_button input {
	margin: auto;
}

form#my_details .button,
form#my_details .button a,
form#my_details .button input {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
}

#page_mydetails #my_details > p,
#page_mydetails #company_details,
#page_mydetails #changes {
	display: none;
}

/* Footer */
#footer {
	display: none;
}

/* DATE PICKER */

body#calendar_page #calendar th {
	background-color: var(--table-header-background-colour);
	color: var(--table-header-text-colour);
}

body#calendar_page #calendar .calnav a {
	color: rgb(var(--orange));
}

body#calendar_page #calendar .highlight a {
	border: 1px solid rgb(var(--orange));
    background-color: rgb(var(--orange));
    color: rgb(var(--white));
}

body#calendar_page #calendar a:hover {
	border: 1px solid rgb(var(--lime-green));
    background-color: rgb(var(--lime-green));
    color: rgb(var(--white));
}

.no_records {
	color: rgb(var(--red));
}

h1 {
	display: flex;
	justify-content: center;
	text-align: center;
	text-transform: uppercase;
	font-family: var(--font-stack-mclaren);
	font-size: 40px;
	font-weight: 400;
}

.fieldset .recordset p {
	text-align: center;
}