:root {
	--cellecta-yellow: #fcee4f;
	--cellecta-red: #d23b2b;
	--cellecta-grey: #5b5b5b;
	--cellecta-green: #006600;
	--table-header: #006600;
	--table-even: #f2f2f2;
	--table-caption: #5b5b5b;
	--table-odd: #dcdcdc;
	--table-cell-padding: 10px
}
html, body {
	margin: 0 !important;
	font-family: 'Helvetica', sans-serif !important;
	font-size: 14px !important;
	background: var(--cellecta-grey) !important;
	max-width: 100%;
	overflow-x: hidden;
}
h1, h2, h3 { color: var(--cellecta-red); font-size: 130% !important; text-transform: uppercase; margin: 20px 0 20px 0 !important }
.wrapper { background: #f2f2f2; padding: 0 0 0 50px }
.content { max-width: 1500px; margin: auto; background: white }
/*
HACKS!
These will need changing in the new canvas CSS!!
*/
header .cell:nth-child(1) { padding-left: 60px }
fieldset .calendar { 	margin: 0 !important }
/*
END of hacks +++++++++++++++++++++++++++++++++++
*/
fieldset { padding: 10px; background-color: #f2f2f2; border: 1px solid #b2b2b2; margin-bottom: 10px }
label { display: inline-block; box-sizing: border-box; padding: 0 10px 10px 10px; vertical-align: bottom }
label input[type=text],
label input[type=time],
label textarea,
label select { margin: 5px 0 0 0; width: 100%; box-sizing: border-box }
.form_1 label { width: 100%; padding-left: 0; padding-right: 0 }
.form_2 label { width: calc(100%/2) }
.form_2 label:nth-child(2n+1) { padding-left: 0 }
.form_2 label:nth-child(2n+2) { padding-right: 0 }
.form_3 label { width: calc(100%/3) }
.form_3 label:nth-child(3n+1) { padding-left: 0 }
.form_3 label:nth-child(3n+3) { padding-right: 0 }
.form_4 label { width: calc(100%/4) }
.form_4 label:nth-child(4n+1) { padding-left: 0 }
.form_4 label:nth-child(4n+4) { padding-right: 0 }
.form_5 label { width: calc(100%/5) }
.form_5 label:nth-child(5n+1) { padding-left: 0 }
.form_5 label:nth-child(5n+5) { padding-right: 0 }
.form_6 label { width: calc(100%/6) }
.form_6 label:nth-child(6n+1) { padding-left: 0 }
.form_6 label:nth-child(6n+6) { padding-right: 0 }
// Responsive tables
.responsive_table table, .responsive_table caption, .responsive_table tbody, .responsive_table tfoot, .responsive_table thead, .responsive_table tr, .responsive_table th, .responsive_table td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	border-collapse: collapse;
}
.responsive_table {
	padding-bottom: 20px !important
}
.responsive_table table {
	width: 100% !important;
	margin: 0;
}
.responsive_table table tfoot tr th,
.responsive_table table thead tr th {
	background: var(--cellecta-grey);
	color: white;
	font-weight: normal;
	text-align: left;
}
.responsive_table table caption {
	padding: var(--table-cell-padding);
	background: var(--table-caption);
	color: white;
	font-weight: normal;
	text-align: left;
	border: none;
	margin-bottom: 1px
}
.responsive_table table th {
	background-color: var(--cellecta-grey);
	color: white;
	font-weight: normal;
	text-align: left
}
.responsive_table table td,
.responsive_table table th {
	border: 1px solid var(--cellecta-grey);
	vertical-align: middle;
	padding: var(--table-cell-padding) !important
}
.responsive_table table tr:nth-child(odd) td {
	background: var(--table-odd)
}
.responsive_table table tr:nth-child(even) td {
	background: var(--table-even)
}
.responsive_table table tr:hover td {
	background: rgba(249, 127, 114, 0.169)
}
.responsive_table {
	overflow-x: auto;
	box-sizing: border-box;
	background-origin: content-box;
	padding: 0
}
/*
Form elements
*/
.button,
.button:visited,
.paging a,
.paging a:visited,
input[type=file],
input[type=text],
input[type=password],
input[type=submit],
input[type=time],
input[type=number],
select,
textarea {
	outline: none;
	appearance: none;
	box-sizing: border-box;
	padding: 10px;
	font-size: inherit;
	font-family: inherit;
	border: 1px solid #b2b2b2;
	-webkit-border-radius: 0;
	border-radius: 0;
	-webkit-box-shadow: none;
	box-shadow: none;
	resize: none;
	background-color: white;
}
textarea {
	height: 100%;
	box-sizing: border-box;
	field-sizing: content;
}
input[type=submit],
.button,
.paging a {
	background: var(--cellecta-red);
	border-color: var(--cellecta-red);
	color: white;
	text-transform: uppercase;
	transition: .25s;
	margin-top: 10px;
}
input[type=submit]:hover,
.button:hover,
.paging a:hover {
	background-color: maroon !important;
	border-color: maroon !important;
	cursor: pointer;
}
.button,
.button:visited {
	background: var(--cellecta-red) !important;
	color: white !important;
	border-color: var(--cellecta-red) !important
}
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; }
label input[type=time] { padding: 8px }
.submit_green { background: var(--cellecta-green) !important; border-color: var(--cellecta-green) !important }
.is_nbs td {
	background: #592d5e !important;
	color: white !important
}
.is_nbs a,
.is_nbs a:visited {
	color: yellow;
	text-decoration: none;
}
.target_table tr:nth-child(2) td { background-color: rgb(137, 137, 137) !important }
.target_table tr:nth-child(1) td { background-color: rgb(57, 57, 57) !important }
/* Flex-wrap rather than inline-block, so a long row of buttons breaks into tidy rows with even
   spacing instead of wrapping raggedly with uneven gaps. My Account carries eight of them.
   Both places that build a .top_menu - top_menu() and core/api/library/library.php - put nothing
   but .button anchors inside it, so making it a flex container is safe across all 185 screens
   that use it. (Job 10901 / Task 11573) */
.top_menu {
	padding: 20px 0 20px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
/* Sizing deliberately left as the shared .button default, so these match every other button in
   Orbit - the "Show project key" submit on the home page is the reference. In particular
   text-transform:uppercase must stay: labels are written in mixed and lower case in the code
   ("cpd manager", "Show project key") and rely on the transform to render correctly.
   Only the spacing is changed here - the flex gap replaces the right margin, and the top margin
   goes because the gap handles the space between wrapped rows. (Job 10901 / Task 11573) */
.top_menu .button {
	margin-right: 0;
	margin-top: 0;
	/* Vertical padding only - font size, horizontal padding and the uppercase transform all stay
	   as the shared .button default so these still match "Show project key" and friends. */
	padding-top: 3px;
	padding-bottom: 3px;
}
/* Filter bars: a flex row that keeps labels, inputs and checkboxes on a common baseline instead
   of a table with mismatched cell alignment. */
.filter_row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: flex-end;
	margin: 0 0 20px 0;
}
/* The global `label` rule above gives EVERY label `padding: 0 10px 10px 10px`. Inside a row that
   aligns on its bottom edge that 10px is invisible but real: a label's contents sit 10px above its
   own bottom, while a submit button - which is not a label - sits flush on it, so the button landed
   10px lower than the dropdown beside it. Zero the padding here so every item in the row measures
   the same way. (Gary, 7 Oct) */
.filter_row label { padding: 0 }
.filter_row label.field { display: block }
.filter_row .field_label {
	display: block;
	margin: 0 0 4px 0;
}
/* Matches the rendered height of a select/submit in this row, so the checkbox and its text sit on
   the same centre line as the dropdown beside it rather than floating above or below it. */
.filter_row .check {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 42px;
	margin: 0;
}
.filter_row .check input[type=checkbox] {
	width: 18px;
	height: 18px;
	margin: 0;
	flex: 0 0 auto;
}
.filter_row input[type=submit] { height: 42px; margin: 0 }
.filter_row select { margin: 0 }
.filter_hint {
	color: #777;
	margin: 6px 0 20px 0;
}
/* Shows what an upload field currently references: thumbnail on the left, filename and actions in
   a column beside it. Previously the action button dropped underneath the thumbnail and touched it.
   (Job 10901 / Task 11585) */
.current_image {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	margin: 8px 0 10px 0;
}
.current_image img {
	max-height: 60px;
	width: auto;
	border: 1px solid #ccc;
	flex: 0 0 auto;
}
.current_image .meta { font-size: 0.9em }
.current_image .meta p { margin: 0 0 8px 0 }
.current_image .meta .button { margin-top: 0 }
/* A plain wrapping row of buttons for use inside page content, so panels stop relying on floats
   and inline margins to line their buttons up. */
.button_row {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin: 15px 0 0 0;
}
.button_row .button { margin-top: 0 }
.button_row img { height: 50px; width: auto; margin-left: auto }
@media only screen and (max-width: 1023px) {
	.button_row img { margin-left: 0 }
}
.paging { display: block; padding: 30px 0 10px 0 }
.button { line-height: 2em !important }
.applications_layers .button { line-height: 4em !important }
.application_selected { background: green !important }
@media only screen and (max-width: 1023px) {
	label { width: 100% !important; padding-left: 0; padding-right: 0 }
	/* Was one full-width button per row, which on My Account stacked eight of them and pushed the
	   actual page content off the bottom of a phone. Now they share the row and wrap, fitting as
	   many as will sit at 200px - so two across on a phone, more on a tablet. */
	.top_menu .button {
		flex: 1 1 200px;
		margin: 0 !important;
		text-align: center
	}
	/* The associate screen pins its Salesforce and company logos to the top right with
	   position:absolute, so they sit OUTSIDE normal flow and nothing below knows they are there -
	   the button row ran straight underneath them. Put them back in the flow on a narrow screen so
	   they take their own space. Desktop keeps the pinned layout. (Job 10901 / Task 11573) */
	.ass_logo_container {
		position: static;
		right: auto;
		top: auto;
		margin: 0 0 10px 0
	}
	.ass_logo_container .ass_logo {
		margin: 0 10px 0 0
	}
}