@import "/core/styles/form.css";
@import "/core/styles/tiny.css";
@import "/core/styles/bms.1.css";
@import "/extranet/dispatch/photos.css";
@import "/core/styles/orbit.tables.css";
/*
Cellecta yellow #fcee4f
Cellecta red #d23b2b
Cellecta grey #5b5b5b
Cellecta green #006600
*/
:root {
	--body-background-colour: #5b5b5b;
	--padding-fieldset: 20px;
	--margin-fieldset: 20px;
	--label-padding: 10px;
	--form-element-padding: 8px;
	--form-border-colour: rgb(183, 181, 181);
	--form-border-dark-colour: rgb(115, 115, 115);
	--form-background-colour: white;
	--form-submit-background-colour: linear-gradient(to bottom,  rgba(210,59,43,1) 0%,rgba(183,40,38,1) 100%);
	--form-submit-background-hover-colour: linear-gradient(to bottom,  rgba(109, 21, 20, 1) 0%,rgba(198, 53, 38, 1) 100%);
	--form-submit-border-colour: #B62725;
	--form-border-radius: 3px;
	--header_background-colour: linear-gradient(to bottom,  rgba(226,219,0,1) 0%,rgba(252,238,79,1) 100%);
}

html, body {
	font-family: "arial", sans-serif;
	font-size: 13px;
	background-color: var(--body-background-colour);
	margin: 0 0 30px 20px;
	font-weight: 400;
	color: #473d3d;
	height: 100%;
}
* { 	box-sizing: border-box; }


fieldset {
	border: 1px solid rgba(0, 0, 0, 0.2);
	border-right-color: rgba(0, 0, 0, 0.7);
	border-bottom-color: rgba(0, 0, 0, 0.7);
	padding: var(--padding-fieldset);
	background: linear-gradient(to bottom,  rgba(219,219,219,1) 0%,rgba(239,239,239,1) 100%);
	margin: 0 0 var(--margin-fieldset) 0;
}
fieldset h2:first-of-type {
	margin-top: 0;
	text-transform: uppercase
}
x-label {
	display: inline-block;
	padding: 0 var(--label-padding) var(--label-padding) var(--label-padding);
	box-sizing: border-box;
	position: relative
}
.form_1 x-label {
	width: 100%;
	padding-left: 0;
	padding-right: 0
}
.form_2 x-label { width: calc(100%/2) }
.form_2 x-label:nth-child(2n+1) { padding-left: 0 }
.form_2 x-label:nth-child(2n+2) { padding-right: 0 }
.form_3 x-label { width: calc(100%/3) }
.form_3 x-label:nth-child(3n+1) { padding-left: 0 }
.form_3 x-label:nth-child(3n+3) { padding-right: 0 }
.form_4 x-label { width: calc(100%/4) }
.form_4 x-label:nth-child(4n+1) { padding-left: 0 }
.form_4 x-label:nth-child(4n+4) { padding-right: 0 }
.form_5 x-label { width: calc(100%/5) }
.form_5 x-label:nth-child(5n+1) { padding-left: 0 }
.form_5 x-label:nth-child(5n+5) { padding-right: 0 }
.form_6 x-label { width: calc(100%/6) }
.form_6 x-label:nth-child(6n+1) { padding-left: 0 }
.form_6 x-label:nth-child(6n+6) { padding-right: 0 }
input[type=file],
input[type=text],
input[type=password],
input[type=submit],
input[type=color],
select,
textarea {
	outline: none;
	appearance: none;
	box-sizing: border-box;
	padding: var(--form-element-padding);
	font-size: inherit;
	font-family: inherit;
	border: 1px solid var(--form-border-colour);
	border-left-color: var(--form-border-dark-colour);
	border-top-color: var(--form-border-dark-colour);
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	resize: none;
	background-color: var(--form-background-colour);
	margin: 2px 0 2px 0;
	border-radius: var(--form-border-radius)
}
textarea {
	height: 100%;
	box-sizing: border-box;
	field-sizing: content;
}
input[type=submit] {
	background: var(--form-submit-background-colour);
	border-color: var(--form-submit-border-colour);
	color: #f2f2f2;
	text-transform: uppercase;
	margin-top: 10px;
	transition: .5s;
}
input[type=submit]:hover {
	background: var(--form-submit-background-hover-colour);
}
.paging {
	margin: 0
}
.paginate .table {
	margin: 0 0 20px 0
}
.button,
.button:active,
.button:visited,
.paging a,
.paging a:active ,
.paging a:visited {
	display: inline-block;
	padding: var(--form-element-padding);
	color: #f2f2f2;
	margin: 0;
	background: var(--form-submit-background-colour);
	border-color: var(--form-submit-border-colour);
	text-transform: uppercase;
	transition: .5s;
	vertical-align: middle;
	margin: 0;
	border-radius: var(--form-border-radius);
	text-decoration: none;
	font-size: inherit
}
.paging a {
	margin-right: 5px
}
.paging a:hover,
.button:hover {
	background: var(--form-submit-background-hover-colour);
	color: white;
}
select {
	background-image: url("data:image/svg+xml;utf8,<svg fill='grey' height='35' viewBox='0 0 24 24' width='35' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
	background-repeat: no-repeat;
	background-position-x: 100%;
	background-position-y: -1px;
	margin-right: 2rem;
	padding-right: 2rem;
}
input[type=text]:required,
input[type=password]:required,
select:required,
textarea:required {
	background-color: rgb(253, 242, 241) !important;
}
.colour_picker {
	cursor: pointer
}
.load_colours {
	position: absolute;
	left: var(--label-padding);
	right: 0;
	top: 50px;
	z-index: 20;
	display: none
}
.ui-datepicker-month,
.ui-datepicker-year {
	padding: 4px;
	font-size: 14px !important;
	vertical-align: middle;
	padding-right: .25em;
}
.ui-datepicker-month {
	margin-right: 5px !important;
}
.ui-datepicker-year {
	margin-left: 5px !important;
}
.ui-datepicker {
	-moz-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
	-webkit-box-shadow: 0 4px 8px rgba(0,0,0,0.5);
	box-shadow: 0 4px 8px rgba(0,0,0,0.5);
}
.table {
	display: table;
}
.row {
	display: table-row
}
.cell {
	display: table-cell;
	vertical-align: middle;
}
header {
	background: var(--header_background-colour);
}
header .cell {
	padding: 5px var(--padding-fieldset) 5px var(--padding-fieldset);
}
header .logo {
	height: 40px;
	width: auto
}
header .button {
	margin-left: 5px
}
.do_search {
	display: inline-block;
	background: var(--form-background-colour);
	padding: 1px 5px 1px 5px;
	margin-top: -3px;
	border: 1px solid var(--form-border-colour);
	width: 170px;
	text-align: left;
	vertical-align: text-bottom;
	outline: none;
	opacity: .8;
	border-radius: var(--form-border-radius);
}
.head_padding {
	padding: var(--padding-fieldset);
	padding-left: 5px !important;
	padding-right: 0 !important
}
.head_padding_last {
	padding: var(--padding-fieldset);
	padding-left: 5px !important;
}
.development {
	position: relative;
	padding: 10px;
	background: var(--form-submit-background-hover-colour);
	color: white;
	text-align: center;
	text-transform: uppercase;
	z-index: 10
}
.nav {
	display: block;
	position: fixed;
	top: 0;
	left: -200px;
	width: 250px;
	background: #727272;
	z-index: 100;
	transition: .5s;
	height: 100%
}
.nav_open {
	left: 0;
}
.section_dull {
	opacity: .3;
	filter: blur(10px);
	pointer-events: none
}
.debug {
	word-wrap:break-word;
	background-color: rgba(0, 0, 0, 0.7);
	font-family: monospace;
	color: #cccccc;
	padding: 40px
}
.debug ul {
	list-style: none;
	padding: 0;
	margin: 0
}
.debug strong {
	color: salmon;
	text-transform: uppercase
}
.update_notice {
	display: none;
	padding: var(--form-element-padding);
	background-color: black;
	color: white;
	text-align: center
}
.status_keys * {
	box-sizing: border-box
}
.status_keys {
	width: 100%;
	border: 1px solid #cccccc;
	background-color: #f2f2f2;
	padding: 10px;
	border-radius: var(--padding-fieldset);
	margin-bottom: var(--padding-fieldset)
}
.status_keys .status_key_cell {
	display: inline-block;
	width: calc(100%/5);
}
.status_keys .status_key_cell div {
	display: inline-block;
	white-space: nowrap;
	padding: 5px
}
.status_keys .status_key_cell div:nth-child(2) {
	width: 90%
}

/*
.status_keys {
	overflow: auto;
	font-size: 85% !important
}
.status_keys_cell {
	display: inline-block;
	width: calc(100%/4);
}
.status_keys_cell div {
	display: inline-block;
	padding: 5px;
	border: 1px solid grey
}
*/
.is_nbs {
	background-color: #592d5e!important;
	color: white !important;
}
.is_nbs a,
.is_nbs a:visited {
	color: yellow;
}
.is_nbs a:hover {
	color: white;
	text-decoration: underline
}
.paging {
	margin-bottom: 20px
}
.leave_allocation .trowgroup .tcell {
	font-size: 200% !important
}
.leave_allocation .trowgroup .tcell:nth-child(1) { color: green }
.leave_allocation .trowgroup .tcell:nth-child(2) { color: orange }
.leave_allocation .trowgroup .tcell:nth-child(3) { color: red }
@media only screen and (max-width: 1023px) { // 1023px
	input {
		width: 100%;
		box-sizing: border-box
	}
	x-label {
		padding: 0 0 var(--padding-small) 0;
		width: 100% !important
	}
	.tcell img {
		width: 100% !important;
		height: auto
	}
	.debug {
		display: none
	}
	.status_key_cell {
		display: inline-block;
		width: calc(100%/2);
	}
	.leave_allocation .trowgroup .tcell {
		font-size: 120% !important
	}
	.status_keys .status_key_cell {
		width: calc(100%/3);
	}
}
@media screen and (orientation: portrait) {}
@media print {
	html, body {
		margin: 0 !important;
		background-color: transparent !important;
	}
	header, footer, .nav, .development, .debug, .print_hide {
		display: none !important
	}
	section {
		padding: 0;
	}
}