/*

New stylesheet
version 202502

Copyright Stratocore SAS
Installing and running the PPMS software requires a license, contact info@stratocore.com for details
The PPMS licensing agreement DOES NOT allow any modification of the software (including stylesheets and images), contact info@stratocore.com for feature requests
The PPMS licensing agreement DOES NOT allow re-distribution of the software

*/


/* --------------------------------------------------------------------------------------------------------------- */
/* -- GLOBAL STYLE -- */
/* ------------------ */


/* -- FONT FACE -- */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans'), local('OpenSans'), url('opensans.woff') format('woff');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 700;
	src: local('Open Sans Bold'), local('OpenSans-Bold'), url('opensans700.woff') format('woff');
}

/* -- BODY -- */
:root {
	--background-primary: #fcfcfc;
	--background-secondary: #fff;
	--background-tertiary: #424242;
	--heading: #141414;
	--sub-heading: #141414;
	--text-primary: #383838;
	--text-secondary: #555;
	--primary-color: #E64626 !important;
	--secondary-color: #424242 !important;
	--tertiary-color: #fcede2 !important;
	--border-light: #f1f1f1;
	--border-medium: #CCC;
	--border-high: #555;
	--link: #195b98;
	--link-hover: #144776;
	--hover: #E64626;
	--primary-accent: #E00000;
	--secondary-accent: #AF2B11;
	--table-border: #d3d3d3;
	--table-background: #f1f1f1;
	--white: #fff;
	--black: #000;

	font-family: 'Open Sans', Helvetica, Arial, sans-serif;

	--font-size-xs: .75rem;
	--font-size-sm: .875rem;
	--font-size-md: 1rem;
	--font-size-lg: 1.25rem;
	--font-size-xl: 1.5rem;
	--font-size-2xl: 2rem;
	--font-size-3xl: 4rem;

	--border-radius-sm: .25rem;
	--border-radius-md: .5rem;
	--border-radius-lg: 0.75rem;
	--border-radius-rounded: 10rem;

	--spacing-3xs: .125rem;
	/*2px*/
	--spacing-xxs: .25rem;
	/*4px*/
	--spacing-xs: .5rem;
	/*8px*/
	--spacing-sm: 1rem;
	/*16px*/
	--spacing-md: 1.5rem;
	/*24px*/
	--spacing-lg: 2rem;
	/*32px*/
	--spacing-xl: 3rem;
	/*48px*/
	--spacing-2xl: 4rem;
	/*64px*/
	--spacing-padding: 8rem;
	/*128px*/

	--transition-speed-slow: .3s;
	--transition-speed-medium: .4s;
	--transition-speed-fast: .7s;
	--transition-ease-in-out: 0.35s ease-in-out;

	--shadow-light: 0px 2px 10px rgba(0, 0, 0, 0.08);
	--shadow-hover: 0 2px 5px 0 rgba(0, 0, 0, 0.26);
	--shadow-popup: 10px 10px 50px #a5a5a5;
}

html {
	background-color: var(--background-secondary);
}

body {
	font-size: 1em;
	text-align: left;

	background-color: var(--background-secondary);
	color: var(--text-primary);

	margin: 0;
	padding: 0;
}

/* -- MAIN -- */
div#main {}


/* -- OTHERS -- */
strong {
	color: var(--text-primary);
	font-weight: 600;
}

label {
	color: var(--text-primary);
}

div#printing {
	display: none;
}

.invisible {
	display: none;
}

.unsupported {
	display: none;
}

.visible {
	display: inline;
}

a.mailto {
	font-weight: bold;
	font-size: 1.1em;
}


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

div#head {
	position: fixed;
	top: 0;
	left: 0;
	z-index: 101;
	width: 100%;
	background-color: var(--background-tertiary) !important;
	border-top: var(--border-radius-sm) solid #333333;

	transition: all var(--transition-all);
}

div#head.scroll {
	transition: all var(--transition-speed-slow);
}

div#head.scroll div#institution div#logo img {
	height: 0px;
	transition: all var(--transition-speed-slow);
}

div#head.scroll div#facility h1 {
	/*display: none;*/
	font-size: 0em;
	transition: all var(--transition-speed-slow);
}

div#head.scroll select#change-core {
	display: none;
}

/* -- INSTITUTION AND LOGO (for Customization) -- */
div#banner {
	margin: 0;
	padding: 0;
	width: 85%;
	max-width: 1024px;
	transition: all var(--transition-speed-slow);
	margin: auto;
}

div#institution {
	height: 0px;
	float: left;
	margin: 0;
	padding: 0;
}

div#logo {
	height: 65px;
	padding: var(--spacing-xs) 0;
	margin-top: var(--spacing-xs);
}

div#logo img {
	height: 65px;
	transition: all 0.5s;
}

/* -- FACILITY BANNER -- */
div#facility {
	transition: all var(--transition-speed-slow);
}

div#facility h1 span {
	text-align: inherit;
}
div#facility h1 {
	width: 75%;
	text-align: right;

	max-width: 1024px;

	margin-left: auto;
  	margin-right: 0; 

	padding: 0.75em;
	padding-top: 1.7em;
	padding-bottom: 1.7em;

	font-size: 1.25em;
	font-weight: 700;
	text-align: right;

	color: var(--white);
	transition: all var(--transition-speed-slow);
}

div#facility h1 a {
	color: var(--white) !important;
	text-decoration: none;
}

div#facility h1 a:hover {
	color: var(--white) !important;
	text-decoration: underline;
}

select#change-core {
	background: rgba(255, 255, 255, 0.05) !important;
	color: var(--white) !important;
	padding: var(--spacing-xxs);
}

img#slide-menu-button {
	display: none;
}


/* -- SLIDE MENU -- */
nav#slide-menu {
	display: none;
}

/* -- MENU BANNER -- */
div#menu {}


/* -- User Menu -- */
div#menu1 {
	width: 100%;
	margin: 0;
	padding: 0;
	height: 40px;
	background-color: var(--background-tertiary);
}

div#menu1 ul {
	margin: auto;
	padding: 0;
	list-style-type: none;
	font-size: 0px;
	width: 85%;
	max-width: 1024px;
	margin-top: 0px;
	height: 40px;
}

div#menu1 ul li,
div#menu2 ul li {
	margin: 0;
	padding: 0;
	display: inline;
	font-size: var(--font-size-md);
	height: 40px;
}

div#menu1 ul li a {
	color: var(--white);
	margin: 0;
	text-decoration: none;
	line-height: 40px;
	padding: var(--spacing-xs);
	transition: all var(--transition-ease-in-out);
}

div#menu1 ul li:last-child a {
	margin-right: 0em;
}

div#menu1 ul li a:hover {
	background-color: var(--primary-color);
	color: var(--white);
}

div#menu1 ul li:last-child a:hover {
	color: var(--primary-accent);
	cursor: default;
}

div#menu1 ul li.focus a,
div#menu2 ul li.focus a {
	color: var(--white);
	border-bottom: 3px solid var(--primary-color);
	transition: var(--transition-ease-in-out);

}

div#menu1 ul li.focus a:hover,
div#menu2 ul li.focus a:hover {
	border-bottom: 3px solid var(--white);
}

/* -- Admin Menu -- */
div#menu2 {
	width: 100%;
	margin: 0;
	padding: 0;
	height: 40px;
	background-color: var(--heading);
}

div#menu2 ul {
	margin: auto;
	padding: 0;
	list-style-type: none;
	font-size: 0px;
	width: 85%;
	max-width: 1024px;
}

div#menu2 ul li a {
	color: var(--white);
	margin: 0;
	line-height: 40px;
	text-decoration: none;
	padding: var(--spacing-xs);
	transition: all var(--transition-ease-in-out);
}

div#menu2 ul li a:hover {
	background-color: var(--primary-color);
	color: var(--white);
	transition: var(--transition-menu);
}

div#menu2 ul li.help-menu a:hover {
	color: var(--white);
	border: none;
	cursor: help;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* -- CONTENT -- */
/* ------------- */

/* -- GLOBAL -- */
div#content {
	width: 85%;
	max-width: 1024px;
	min-height: 400px;
	margin: auto;
	padding-top: 10em;
	padding-bottom: 4em;
}

div#content h2 {
	font-size: 1.5em;
	color: var(--heading);
	text-align: left;
	font-weight: 600;
	padding-bottom: var(--spacing-xs);
	border-bottom: 2px solid var(--primary-color);
}

div#content h2 small {
	font-size: 0.5em;
}

div#content h2 a {
	color: var(--secondary-color);
}

div#content h2 a:hover {
	color: var(--link-hover);
	text-decoration: none;
}

div#content h3 {
	margin-top: 1em;
	font-size: 1.1em;
	color: var(--text-primary);
	text-align: left;
	font-weight: 600;

	padding-top: 0.75em;
	border-bottom: 1px solid var(--primary-color);
}

div#content h3 small {
	font-size: 0.6em;
}

div#content h3 a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

div#content h4 {
	font-size: 0.9em;
	color: var(--sub-heading);
	text-align: left;
	font-weight: 600;
	/*border-bottom: 1px dotted;*/
}

div#content h4 small {
	font-size: 0.66em;
}

div#content a {
	color: var(--link);
	text-decoration: none;
}

div#content a:hover {
	color: var(--link-hover);
	text-decoration: underline;
}

div#content ul {
	list-style-image: url('Basic1.png');
}

div#content li {
	margin-bottom: 0.5em;
}

div#content p,
div#content li,
div#content td {
	font-size: 0.8em;
}

div#content dt {
	font-size: 0.9em;
	margin-left: 0em;
	font-weight: 700;
	color: var(--secondary-color);
}

div#content dd {
	font-size: 0.8em;
	margin-left: 0em;
}

#content4 p.filter-by-tags a,
.tagListContainer a,
span.filter-by-tags a,
.selected-tag {
	padding: 3px 10px;
	background-color: var(--primary-color);
	color: var(--white) !important;
	border-radius: 6px;
	margin-right: 3px;
	display: inline-block;
	margin-top: 15px;
}


#content4 p.filter-by-tags a:hover,
.selected-tag:hover {
	color: var(--white);
	text-decoration: underline;
}

/* -- FORM STYLES -- */
input[type="submit"],
input[type="button"],
button {
	background-color: var(--primary-color);
	color: var(--white);
	font-weight: bold;
	border: 1px solid var(--secondary-accent);
	padding: var(--spacing-xs) 0.75rem;
	cursor: pointer;
	transition: all var(--transition-ease-in-out);
}

#accountCompatibilities input[value="edit"],
#accountManagersContainer input[value="approve"],
#accountManagersContainer input[value="edit"]{
	background-color: var(--primary-color) !important;
}

input[type="submit"]:hover:not(:disabled),
input[type="button"]:hover:not(:disabled),
button:hover:not(:disabled) {
	background-color: var(--background-tertiary);
	border: 1px solid var(--background-tertiary);
}

input[type="submit"]:focus-visible,
input[type="button"]:focus-visible,
button:focus-visible {
	transition: none !important;
	outline: 2px solid black;
	outline-offset: 2px;
}

input[type="submit"].del,
input[type="button"].del,
button.del {
	color: var(--primary-accent);
	border: 1px solid var(--primary-accent) !important;
	background-color: var(--background-primary);
	padding: var(--spacing-xs) 0.75rem;
}

input[type="submit"].del:hover:not(:disabled),
input[type="button"].del:hover:not(:disabled),
button.del:hover:not(:disabled) {
	color: var(--background-tertiary) !important;
	border: 1px solid var(--background-tertiary) !important;
	background-color: transparent !important;
}

input[type="submit"].del:focus-visible,
input[type="button"].del:focus-visible,
button.del:focus-visible {
	transition: none !important;
	outline: 2px solid black;
	outline-offset: 2px;
}

input[type="submit"].reset,
input[type="button"].reset,
button.reset {
	background-color: transparent;
	color: var(--primary-color);
	font-weight: bold;
	border: 1px solid var(--primary-color) !important;
	padding: var(--spacing-xs) 0.75rem;
	cursor: pointer;
	transition: all var(--transition-ease-in-out);
}

input[type="submit"].reset:hover:not(:disabled),
input[type="button"].reset:hover:not(:disabled),
button.reset:hover:not(:disabled) {
	background-color: var(--tertiary-color) !important;
}

input[type="submit"].reset:focus-visible,
input[type="button"].reset:focus-visible,
button.reset:focus-visible {
	transition: none !important;
	outline: 2px solid black;
	outline-offset: 2px;
}

button.ui-datepicker-trigger {
	background-color: var(--background-primary);
	border: 1px solid var(--border-medium);
}

input[type="button"].revoke-admin {
	padding: 4px !important;
}

select {
	padding: var(--spacing-xxs) 0px;
	-webkit-appearance: menulist-button;
	height: 28px;
}

option {
	color: var(--sub-heading);
}

.select2-selection.select2-selection--single {
	border-radius: 0px !important;
}

input[type="text"],
input[type="number"] {
	padding: var(--spacing-xxs) 0px;
	margin-top: var(--spacing-xxs);
	border: 1px solid var(--border-medium);
	border-radius: 0px !important;
}

/* -- TABLE STYLES -- */
table.sheet {
	border-collapse: collapse;
	empty-cells: show;
	/*border: 1px solid var(--secondary-color);*/
}

table.sheet td {
	vertical-align: top;
	padding: 0.2em;
	border-right: 1px solid var(--table-border);
	border-left: 1px solid var(--table-border);
	border-bottom: 1px solid var(--table-border);
}

table.sheet th {
	vertical-align: top;
	padding: 0.2em;
	border: 1px solid var(--table-border);
	text-align: left;

	background-color: var(--table-background) !important;
	color: var(--text-primary);
	font-size: 0.8em;
}


/* -- POPUP -- */
div#popup {
	position: absolute;
	background-color: var(--background-primary);
	display: none;
	margin: 50px;
	padding: var(--spacing-xxs);
	line-height: 1.4em;
	border-radius: var(--border-radius-sm);
	-moz-border-radius: var(--border-radius-sm);
	-webkit-border-radius: var(--border-radius-sm);
	box-shadow: var(--shadow-popup);
	-webkit-box-shadow: var(--shadow-popup);
	-moz-box-shadow: var(--shadow-popup);
}

div#popup ul {
	margin: 0 0 0 0;
	padding: var(--spacing-xxs);

	display: block;
	list-style-type: none;

	background-color: var(--background-secondary);
	border-top: 1px solid var(--tertiary-color);
}

div#popup ul li {
	margin: 0;
	padding: 0;
	display: inline;
	font-size: 0.6em;
}

div#popup ul li a {
	margin: 0;
	padding: 0.5em 0.7em;
	text-decoration: none !important;

	background-color: var(--sub-heading);
	color: var(--white) !important;
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- LOGIN PAGE -- */
/* ---------------- */

input#user,
input#passwd {
	margin: 0;
	padding: var(--spacing-xxs) 0px;
}

#search-div {
	font-size: 1.5rem;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* -- HOME PAGE -- */
/* --------------- */

/* -- HOME SECTION -- */
p.new-features {
	background: var(--tertiary-color);
	padding: var(--spacing-xs);
	border-radius: var(--border-radius-sm);
}

p.new-features a {
	font-weight: normal !important;
	text-decoration: underline;
	color: var(--tertiary-color);
}

div.home-action {
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	border-radius: var(--border-radius-lg);
	box-shadow: var(--shadow-light);
}

#homediv>div.home-main.home-action {
	border: 1px solid var(--border-light) !important;
	background-color: var(--background-primary) !important;
}

div.home-action:hover {
	box-shadow: var(--shadow-light) !important;
}

div.home-action h3 {
	border: none !important;
}

div#home-notifications {
	background-color: var(--background-primary) !important;
	padding: 1.5em 0.5em !important;
	border: none !important;
	box-shadow: var(--shadow-light);
}

div#home-notifications:hover {
	box-shadow: var(--shadow-light) !important;
}

div#home-notifications a{
	font-weight: normal;
}

div#home-notifications a:hover{
	text-decoration: underline !important;
}

select.home-button {
	font-size: 1.2em;
	padding: var(--spacing-xs);
	width: 66%;
	height: 40px;
}

input[type="submit"].home-button {
	font-size: 1.3em;
	padding: var(--spacing-xs);
	width: 33%;
}


div.home-section {
	background-color: var(--background-primary) !important;
	border: 1px solid var(--border-light) !important;
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	box-shadow: var(--shadow-light);
	border-radius: var(--border-radius-lg) !important;
}

div.home-section:hover {
	box-shadow: var(--shadow-light) !important;
}

div.home-section h3 {
	padding-top: 0.5em !important;
	border: none !important;
}

div.home-section h3 button span:hover {
}

div.home-section h3 button {
	color: var(--text-primary);
	padding: 0 var(--spacing-xs);
	transition: all var(--transition-ease-in-out);
}

div.home-section h3 button:hover {
	background-color: transparent;
	border: none;
}

span.report-pub-msg {
	display: block;
	background: rgb(255, 229, 127);
	background: rgba(255, 229, 127, 0.7);
	margin-left: -4px;
	padding: var(--spacing-xxs);
	margin-top: var(--spacing-xxs);
	border-radius: var(--border-radius-sm);
}

div#report-inc select {
	width: 66%;
	padding: var(--spacing-xxs) 0px;
}

div#report-inc input[type="submit"] {
	width: 25%;
	padding: var(--spacing-xs);
}


div#home-reports p {
	font-size: 1em;
	font-weight: 700;
	margin-top: 2em;
}

div#home-reports div.dataTables_wrapper {
	overflow-x: auto;
}

#reportsTree .caret-open,
#reportsTree .caret,
#reportsTree .caret:focus {
	background-color: transparent !important;
	border: none !important;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* -- BOOK PAGE -- */
/* --------------- */

/* -- List of bookable systems -- */
table.listsys {
	border: 0;
	width: 100%;
	border-collapse: separate;
	border-spacing: var(--spacing-sm);
}

table.listsys td {
	background-color: var(--background-secondary);
	background-color: rgba(70%, 70%, 70%, 0.05);
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	border: 1px solid var(--border-light);
	border-color: rgba(60%, 60%, 60%, 0.3);
	border-radius: var(--border-radius-lg);

	transition: box-shadow var(--transition-speed-slow);
}

table.listsys td:hover {
	box-shadow: var(--shadow-hover);
}

table.listsys td h3 {
	border: none !important;
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- PLANNING PAGE -- */
/* ------------------- */

h3.planning-title {
	border-bottom: none !important;
}

div#content table.planning a {
	color: #970000;
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- ORDER PAGE -- */
/* ---------------- */

/* -- Order Select -- */
select.order-select {
	width: 25%;
	margin-top: var(--spacing-xxs);
}

/* -- Order Input -- */
td.order-input {
	text-align: right;
	padding: 2px;
	background-color: #E4F3B5;
}

td.order-input input[type="text"] {
	display: block;
	margin: 0;
	padding: var(--spacing-xxs);
	border-width: 0;
	text-align: right;
	background-color: #E4F3B5;
}

td.order-input input[type="text"]:focus {
	outline: none;
	background-color: #E4F3B5 !important;
}

/* --------------------------------------------------------------------------------------------------------------- */
/* -- STAT PAGE -- */
/* --------------- */

/* -- Stat Action -- */
div.stat-action {
	background-color: var(--background-secondary);
	background-color: rgba(70%, 70%, 70%, 0.05);
	margin: 2em 0 1em 0;
	padding: 0 1em 1.5em 1em;
	border: 1px solid var(--border-light);
	border-color: rgba(60%, 60%, 60%, 0.3);
	border-radius: var(--border-radius-lg);

	transition: box-shadow var(--transition-speed-slow);
}

div.stat-action:hover {
	box-shadow: var(--shadow-hover);
}

/* -- Stat Colors -- */
div#content .stat2 {
	background: var(--primary-color) !important;
	opacity: 0.8;
	color: var(--white);
}

div#content .stat1 {
	background: var(--background-tertiary) !important;
	color: var(--white);
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- REPORTS PAGE -- */
/* ------------------ */

/* -- Report Name -- */
h3.report-name {
	border-bottom: 1px solid;
}

/* -- Report Description -- */
p.report-descr {
	font-size: 1em !important;
	font-weight: bold;
	color: var(--heading);
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- INCIDENTS PAGE -- */
/* -------------------- */

div#incident-form {
	border: 1px solid var(--black);
}

div#incident-form table {
	width: 100%;
}



/* --------------------------------------------------------------------------------------------------------------- */
/* -- PROJECTS PAGE -- */
/* ------------------- */

form#search-proj {
	float: right;
	margin-top: -54px;
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- SETTINGS PAGE -- */
/* ------------------- */

p.questions-text {
	display: block;
	background: var(--tertiary-color) !important;
	margin-left: -4px;
	padding: var(--spacing-xxs);
	border-radius: var(--border-radius-sm);
	-moz-border-radius: var(--border-radius-sm);
	-webkit-border-radius: var(--border-radius-sm);
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- ADMINS PAGE -- */
/* ----------------- */

h3#createlink {
	border: none !important;
}


/* --------------------------------------------------------------------------------------------------------------- */
/* -- PRICE PAGE -- */
/* ---------------- */

p#price-info {
	color: var(--text-secondary);
	width: 360px;
	float: right;
	border: 1px solid var(--border-high);
	padding: var(--spacing-xs);
	margin: var(--spacing-xs);
	background-color: var(--white);
}

h3.price-title-short {
	width: 95% !important;
}



/* --------------------------------------------------------------------------------------------------------------- */
/* -- CREDIT PAGE -- */
/* ----------------- */

p.questions-text {
	display: block;
	background: rgb(255, 229, 127);
	background: rgba(255, 229, 127, 0.7);
	margin-left: -4px;
	padding: var(--spacing-xxs);
	border-radius: var(--border-radius-sm);
	-moz-border-radius: var(--border-radius-sm);
	-webkit-border-radius: var(--border-radius-sm);
}

p#credit-info {
	color: var(--text-secondary);
	width: 490px;
	float: right;
	border: 1px solid var(--border-high);
	padding: var(--spacing-xs);
	margin: var(--spacing-xs);
	background-color: var(--white);
}

/* --------------------------------------------------------------------------------------------------------------- */
/* -- FOOTER -- */
/* ------------ */

div#bottom {
	background-color: var(--background-secondary);
	padding-bottom: 1em;
	text-align: left;
	color: var(--text-secondary);
	font-size: 0.7em;
	border-top: 1px solid var(--border-light);
}

div#bottom4 {
	width: 85%;
	max-width: 1024px;
	margin: auto;
}

div#bottom4 p {
	margin: 0;
}

div#bottom4 a {
	text-decoration: none;
	color: var(--text-secondary);
}

div#bottom4 a:hover {
	color: var(--text-secondary);
}



/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 1150px; -- */
/* ------------------------ */

@media all and (min-width: 930px) and (max-width: 1150px) {

	div#menu1 ul li a,
	div#menu2 ul li a {
		padding: var(--spacing-xs) var(--spacing-3xs) !important;
	}
}

	

/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 930px; -- */
/* ----------------------- */

@media all and (max-width: 930px) {

	div#head.scroll div#facility h1,
	div#facility h1 {
		font-size: 1.2em;
	}

	div#facility {
		background-color: var(--background-tertiary) !important;
	}

	img#slide-menu-button {
		background-color: var(--background-tertiary) !important;
		display: inline !important;
		float: left;
		height: 35px;
		margin-top: var(--spacing-xs);
		margin-left: var(--spacing-xs);
		margin-right: var(--spacing-xs);
	}

	/* CODE FROM: http://callmenick.com/2014/03/26/slide-and-push-menus-with-css3-transitions/ */
	body.menu-open nav#slide-menu {
		left: 0;
	}

	body.menu-open div#main {
		left: 220px;
	}

	body.menu-open div#head {
		position: relative;
	}

	.mask {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 15;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.3);
	}

	div#main {
		position: relative;
		z-index: 10;
		top: 0;
		left: 0;
		-webkit-transition: all var(--transition-speed-slow);
		-moz-transition: all var(--transition-speed-slow);
		-ms-transition: all var(--transition-speed-slow);
		-o-transition: all var(--transition-speed-slow);
		transition: all var(--transition-speed-slow);
	}

	#side-menu-logo {
		content: url('./USydLogo.svg');
		max-width: 10em;
		padding: var(--spacing-sm);
		margin-left: auto;
		margin-right: auto;
	}

	#slide-menu ul li:first-child {
		display: none;
	}

	nav#slide-menu {
		display: block !important;
		position: fixed;
		z-index: 20;
		background-color: var(--background-tertiary) !important;
		overflow: auto;
		-webkit-transition: all 0.3s;
		-moz-transition: all 0.3s;
		-ms-transition: all 0.3s;
		-o-transition: all 0.3s;
		transition: all 0.3s;
		top: 0;
		left: -300px;
		width: 220px;
		height: 100%;
	}

	nav#slide-menu ul {
		list-style-type: none;
		margin: 0;
		padding: 0;
	}

	nav#slide-menu ul li {
		display: block;
		text-align: center;
		border-bottom: solid 1px var(--border-light);

		padding-top: var(--spacing-xxs);
		padding-bottom: var(--spacing-xxs);

		color: var(--white);
		font-size: 0.75em;
	}

	nav#slide-menu ul li#menu-logout {
		background-color: var(--primary-accent) !important;
	}

	nav#slide-menu ul li a {
		font-weight: 600;
		color: var(--white) !important;
		text-decoration: none;
		font-size: 1.25em;
	}

	/* END CODE */

	nav#slide-menu ul li.slide-menu1 {
		background-color: var(--background-tertiary) !important;
	}

	nav#slide-menu ul li.slide-menu2 {
		background-color: var(--heading) !important;
	}

	div#facility h1 {
		padding-bottom: 0px !important;
	}

	div#menu {
		display: none;
	}

	div#content {
		padding-top: var(--spacing-2xl) !important;
	}
}

/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 768px; -- */
/* ----------------------- */

@media (max-width: 768px) {
	.home-bottom a {
		display: inline-block;
		margin-bottom: var(--spacing-xs);
	}
}

/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 640px; -- */
/* ----------------------- */

@media all and (max-width: 640px) {

	div.home-left,
	div.home-right {
		float: none !important;
		width: 100% !important;
	}
}


/* ------------------------------------------------------------------------------------------------------------- */
/* -- MAX-WIDTH: 385px; -- */
/* ----------------------- */

@media all and (max-width: 385px) {

	div#head.scroll div#facility h1,
	div#facility h1 {
		font-size: 1em;
	}

	select.home-button {
		width: 60%;
	}
}


/* ------------------------------------------------------------------------------------------------------------- */
/* -- IE8 -- */
/* --------- */

.ie8 div#head {
	position: relative;
}

.ie8 div#content {
	padding-top: 0em;
}

.ie8 div#menu1 ul li a {
	padding-bottom: var(--spacing-xs);
}

.ie8 div#menu2 ul li a {
	padding-bottom: var(--spacing-xs);
}

/* -- Accent colors -- */
body .warn,
.orange {
	color: var(--secondary-accent) !important;
}

body .error,
.red {
	color: var(--primary-accent) !important;
}

#editObjExtraRefsLoader  input[type="button"].error
{
	color: var(--background-secondary) !important;
}

body .confirm .modalWindowHeader {
	background: var(--secondary-accent) !important;
}

body .error .modalWindowHeader {
	background: var(--primary-accent) !important;
}

#split-accounts-list-error {
	color: var(--primary-accent) !important;
	margin-top: 1em;
	font-size: 1.3em;
}

.popupNewAccountWarning {
	color: var(--primary-accent);
	font-weight: bold;
	margin-top: 2em;
	font-size: 1.3em;
}

.noAccountTypeWarning {
	color: var(--primary-accent);
	font-weight: bold;
	font-size: 1.3em;
}

#userRightsVueContainer .notable {
	color: var(--secondary-accent) !important;
}

#createTrainVueContainer .noAccountsForParticipant {
	color: var(--primary-accent);
}

.accountNotValid>a {
	color: var(--primary-accent) !important;
}

.customSelectInputNoResult {
	color: var(--primary-accent) !important;
}

#accountBcodeNotValid,
#newAccountBcodeNotValid {
	color: var(--primary-accent);
	font-weight: bold;
}

#globalErrorMsg {
	color: var(--primary-accent);
	font-weight: bold;
	font-size: 1.3em;
}

nav#slide-menu ul li#menu-logout {
	background-color: var(--primary-accent);
}

.alert {
	color: var(--primary-accent) !important;
}

.warning {
	color: var(--secondary-accent) !important;
}

div#content td.specialE {
	opacity: 1 !important;
	background-color: #348338 !important;
	color: var(--white);
}

div#content td.specialE2 {
	opacity: 1 !important;
}

div#content td.specialE a {
	color: var(--white);
}

button.ui-datepicker-trigger {
	min-width: 24px;
}

.mand {
	color: var(--primary-accent) !important;
}

#creatinc .isErroneousText {
	color: var(--primary-accent) !important;
}

.isErroneousText,
.selectLabel {
	color: var(--primary-accent) !important;
}

#order-chooser {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

.document-header {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-sm);
}

#account-popup-content dd {
	margin: 0;
}

.incidentPage .tabHeader {
	width: 100%;
	height: 2.5em;
	align-items: center;
	background-color: transparent !important;
}

a[role="button"] {
	cursor: pointer;
}

input[type="text"].filter {
	color: var(--primary-accent) !important;
}

h2.small-heading {
	font-size: 1.125rem !important;
}

.invalid-input-error-label {
	color: var(--primary-accent) !important;
}

.invalid-input {
	border: 1px solid var(--primary-accent) !important;
}

.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: var(--spacing-xs);
}

.checkbox-wrapper {
	display: flex;
	align-items: center;
	gap: var(--spacing-xs);
}

p.information-text a {
	color: var(--secondary-accent) !important;
}

.information-text,
span.report-pub-msg {
	background: var(--tertiary-color) !important;
}

.onoffswitch-checkbox {
	opacity: 0 !important;
}

.onoffswitch-checkbox:checked+.onoffswitch-label{
	background-color: var(--primary-color) !important;
}

.onoffswitch-checkbox:checked+.onoffswitch-label:before{
	background-color: var(--secondary-accent) !important;
}