@font-face {
	font-family: "Gotham";
	font-weight: 100;
	font-style: normal;
	src:
		local("Gotham-Light"),
		url("/Content/Gotham-Light.woff") format("woff");
}

/** 
 * Hide unparsed {{content}} until Vue renders it
 * https://v2.vuejs.org/v2/api/index.html#v-cloak
 */
[v-cloak] {
	display: none;
}

html {
	height: 100%;
}

body {
	overflow: hidden;
	font-family: var(--font);
	font-size: var(--theme-main-fontsize);
	color: black;
	background-color: white;
	margin: 0;
	height: 100%;
}

body#app-home {
	background-image: var(--brand-background);
	background-color: var(--theme-home);
}

body#app-home-login {
	background-image: var(--brand-background);
	background-color: var(--theme-home-inverse);
}

a:link {
	text-decoration: none;
}

a:visited {
	color: #1d60ff;
}

a:hover {
	color: #3d80ff;
	text-decoration: none;
}

a:active {
	color: #1d60ff;
}

p,
ul {
}

div {
	outline: 0;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 0.75em 0;
	padding: 0;
}

/* HEADINGS   
----------------------------------------------------------*/
h1,
h2 {
	color: white;
	text-align: center;
}

h1 {
	font-family: "Gotham", "wf_SegoeUI", "Segoe UI", "Segoe", "Segoe WP", "HelveticaNeue-Light", "Helvetica", "Arial",
		"sans-serif", "Verdana";
	font-weight: 100;
	font-size: 2.7em !important;
	line-height: 1em;
	margin: 0;
}

h1.spaced {
	margin-bottom: 50px;
}

h2 {
	font-family: "Gotham", "wf_SegoeUI", "Segoe UI", "Segoe", "Segoe WP", "HelveticaNeue-Light", "Helvetica", "Arial",
		"sans-serif", "Verdana";
	font-weight: 100;
	font-size: 2em !important;
	margin: 0 0 40px 0;
}

h3 {
	padding: 2px 0;
	margin: 0 0 3px 0;
	font-size: 1.2em;
	font-weight: normal;
}

h4 {
	padding: 0 0 0 5px;
	margin: 0 0 3px 0;
	font-weight: normal;
	font-size: 1.2em;
}

h5 {
	margin: 5px 0 2px 0;
	font-size: 1em;
	font-weight: bold;
	font-style: italic;
	color: #444;
}

/* PRIMARY LAYOUT ELEMENTS   
----------------------------------------------------------*/
#header {
	padding: 0 32px;
	height: 48px;
	color: var(--theme-main);
	background: var(--theme-main-background);
	border-bottom: var(--theme-main-border-light);
	font-size: 14px;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	margin-bottom: auto;
}

#header #logoMenu {
	display: block;
	padding-bottom: 3px;
}

#header .logo {
	padding: 0;
	vertical-align: middle;
	height: 30px;
	max-width: 150px;
}

#header .help-link {
	background: transparent url("/Content/Icons/feather/help-circle.svg") no-repeat center right;
	background-size: 16px;
	padding-right: 16px;
}

#header .help-link i {
	display: none;
}

#header .whats-new {
	background: transparent url("/Content/Icons/feather/zap.svg") no-repeat center right;
	background-size: 15px;
	padding-right: 20px;
}

#header .whats-new i {
	display: none;
}

#header .padded {
	padding: 17.5px 7px;
}

#header .selectable,
#header .active {
	cursor: pointer;
}

#header .selectable:not(.noChevron) {
	background-position: right 7px center;
	background-repeat: no-repeat;
	background-size: 15px;
	padding-right: 25px;
	background-image: url("/Content/Icons/feather/chevron-down.svg");
}

#header .active:not(.noChevron) {
	background-position: right 7px center;
	background-repeat: no-repeat;
	background-size: 15px;
	padding-right: 25px;
	background-image: url("/Content/Icons/feather/chevron-up.svg");
}

#header .spacer {
	background: none;
	padding: 0 6px;
}

#header div {
	flex-shrink: 0;
}

#header .headerGap {
	flex-grow: 1;
}

#header .centred {
	text-align: center;
}

#header .dropdown {
	display: block;
	position: absolute;
	margin-top: 16px;
	line-height: 1.5em;
	z-index: 1002;
	cursor: default;
	background-color: white;
	color: var(--theme-main);
	border: 1px solid var(--theme-main-border-light);
	border-top: none;
}

#header .dropdownPanel {
	padding: 0px;
	box-shadow: 0 2px 6px var(--shadow);
}

#header .dropdownMenu {
	display: block;
	padding: 10px 20px;
	cursor: pointer;
	color: var(--theme-main);
}

#header .dropdownMenu:hover {
	background-color: var(--theme-main-hover);
	border-radius: var(--theme-main-radius);
	color: var(--theme-main);
}

#header #menu {
	display: block;
	height: 32px;
	vertical-align: middle;
	padding: 5px;
}

#header .right {
	right: 7px;
}

.toplevel {
	padding: 0;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	justify-content: center;
	height: 100%;
}

.coreBody {
	padding: 0;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	flex-grow: 1;
	min-height: 50px;
}

.coreBody .coreContent {
	padding: 0;
	flex-grow: 1;
	overflow-y: auto;
	height: 100%;
}

#statusBar {
	font-size: 0.9em;
	background-color: var(--theme-main-background);
	border-bottom: var(--theme-main-border-light);
	color: var(--theme-main);
}

#statusBar input[type="button"] {
	background-color: #f04b22;
	color: white;
	padding: 2px 10px 5px 10px;
	margin-right: 10px;
	border: none;
	cursor: pointer;
}

.status {
	display: inline-block;
	padding: 10px;
	min-width: 161px;
}

.statusSmall {
	display: inline-block;
	padding: 0 5px;
	white-space: nowrap;
}

.statusGreen {
	border-left: 15px solid #a5cf4e;
}

.statusOrange {
	border-left: 15px solid #f5822b;
}

.statusRed {
	border-left: 15px solid #f04b22;
}

.statusGrey {
	border-left: 15px solid var(--greyscale-60);
}

.oldAlertsBanner {
	background: #f4f4f4;
	border: 1px solid #8d8d8d;
	padding: 10px;
	margin: 20px 20px 0;
}

#panelBase {
	align-content: center;
	text-align: center;
	text-shadow: none;
	height: 100%;
}

#panelBase h1 {
	text-shadow: none;
	font-weight: normal;
	color: var(--theme-home-h1);
}

#panelBase h2 {
	color: var(--theme-home-h2);
}

#overlay {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: black;
	opacity: 0.6;
	z-index: 1001;
}

#menuOverlay {
	display: none;
	position: fixed;
	top: 52px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
}

#waitOverlay {
	position: fixed;
	display: none;
	background-color: white;
	opacity: 0.7;
	top: 59px;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1002;
}

#waitProgress {
	display: none;
	top: 50%;
	left: 50%;
	position: fixed;
	z-index: 1003;
}

#waitProgressBox {
	top: -70px;
	left: -120px;
	width: 220px;
	height: 120px;
	border: 2px solid var(--theme-main);
	text-align: center;
	color: #444;
	position: relative;
	background-color: white;
	padding: 10px;
	z-index: 1003;
}

#waitProgressBox .spacer {
	height: 53px;
}

#waitProgressBox input[type="button"] {
	background-color: #f04b22;
	color: white;
	border: none;
	padding: 5px 10px 7px 10px;
	min-width: 100px;
	cursor: pointer;
}

#waitCentre {
	display: none;
	top: 50%;
	left: 50%;
	position: fixed;
	z-index: 1004;
}

#waitImg {
	top: -11px;
	left: -70px;
	width: 140px;
	z-index: 1004;
	position: relative;
}

#mapCentre {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 10;
}

#mapCentreImg {
	position: relative;
	left: -70px;
	top: -11px;
}

/* Login
----------------------------------------------------------*/
#login-logo {
	height: 80px;
}

.loginForm {
	height: 100%;
}

.passwordResetForm {
	height: 100%;
}

.passwordChangeForm {
	height: 100%;
}

.login {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
}

.loginContainer {
	display: flex;
	flex-direction: column;
	padding: 50px;
	border: var(--indigo-20) 1px solid;
	border-radius: 8px;
}

@media (max-width: 480px) {
	.loginContainer {
		border: none;
		padding: 50px 0px;
	}
}

#loginFields {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

#loginFieldsMisc {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}

#loginSubmit {
	width: 100%;
	padding-top: 10px;
}

.loginLabel {
	font-size: var(--theme-main-fontsize-smaller);
}

#loginContent {
	font-size: 1.1em;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-top: 20px;
	color: var(--theme-main);
}

#loginContent input {
	font-size: var(--theme-main-fontsize);
	border-radius: var(--theme-main-radius);
	width: 300px;
	border: none;
	padding: 5px;
	margin-top: 3px;
}

#loginContent input[type="checkbox"] {
	width: 24px;
	height: 24px;
	vertical-align: middle;
}

#loginContent input[type="submit"] {
	cursor: pointer;
	font-weight: bold;
	padding: 5px 10px;
}

#loginContent .forgotPassword {
	margin-top: 5px;
	font-size: 0.85em;
	cursor: pointer;
}

#loginContent input {
	border: var(--indigo-20) 1px solid;
	border-radius: var(--theme-main-radius);
}

#loginFields input[type="password"],
#loginFields input[type="email"],
#loginFields input[type="text"] {
	color: var(--navy-blue-80);
	font-size: var(--theme-main-fontsize);
	font-weight: normal;
	padding: 10px;
}

#loginFields input:-webkit-autofill:focus,
#loginFields input:-webkit-autofill {
	background-color: var(--indigo-10) !important;
	-webkit-box-shadow: 0 0 0 50px white inset;
	-webkit-text-fill-color: var(--navy-blue-80);
	font-size: var(--theme-main-fontsize) !important;
}

#loginSubmit input[type="submit"] {
	background: var(--theme-main);
	color: white;
	font-size: var(--theme-main-fontsize);
	padding: 10px;
	font-weight: normal;
}

#loginContent input[type="checkbox"] {
	accent-color: var(--theme-main);
	border: 1px solid var(--theme-main);
}

.startMessageControls {
	height: 40px;
	padding: 15px;
	text-align: center;
}

.startMessageControls input[type="checkbox"] {
	width: 24px;
	height: 24px;
	cursor: pointer;
	vertical-align: top;
}

.startMessageControls label {
	font-size: 0.9em;
	cursor: pointer;
	vertical-align: top;
}

.startMessageControls p {
	margin: 0;
}

/* Main Menu
----------------------------------------------------------*/

#panelMenu {
	margin: 0 auto;
	max-width: 800px;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
}

#panelMenu .homeMenuTile {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 210px;
	height: 120px;
	margin: 0 10px 20px 10px;
	border-radius: var(--theme-home-radius);
	text-shadow: none;
	box-shadow: none;
	background: var(--theme-home-inverse);
	padding: 10px 10px;
	font-size: 1.5em;
	font-family: "Gotham", "wf_SegoeUI", "Segoe UI", "Segoe", "Segoe WP", "HelveticaNeue-Light", "Helvetica", "Arial",
	"sans-serif", "Verdana";
	color: var(--theme-home);
	font-weight: normal;
}

#panelMenu .homeMenuTile:hover {
	color: var(--theme-main);
	text-shadow: none;
	box-shadow: none;
	background-color: var(--theme-main-hover);
}

.padded {
	padding: 20px;
}

#userMenu {
	position: relative;
	display: flex;
	padding: 15.5px 0;
}

/* Left Navigation
----------------------------------------------------------*/

.leftNav {
	background-color: var(--theme-main-background);
	font-size: 14px;
	vertical-align: top;
	border-right: var(--theme-main-border-light);
	width: 200px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	padding: 30px;
	font-weight: var(--theme-main-fontweight);
	color: var(--theme-main);
	flex-shrink: 0;
}

#nav {
	width: 260px;
}

.leftNav.collapsed {
	width: 35px;
}

.leftNav.collapsed li:not(.nav-collapse) {
	display: none;
}

.leftNav li.nav-collapse {
	display: none !important;
}

@media (max-width: 1000px) {
	.leftNav li.nav-collapse {
		display: block !important;
	}
}

.leftNav .title {
	color: white;
	background-color: var(--greyscale-60);
	font-size: 1.1em;
	padding: 10px 20px;
}

.leftNav .content {
	padding: 0;
}

#nav .content {
	background-color: var(--theme-main-background);
	font-size: 14px;
	vertical-align: top;
	border-right: var(--theme-main-border-light);
	overflow: auto;
	padding: 30px;
	font-weight: var(--theme-main-fontweight);
	color: var(--theme-main);
}

.leftNav .content .link {
	font-size: 0.85em;
	font-style: italic;
	text-align: right;
	padding: 4px 10px 6px 10px;
	color: #aaa;
	cursor: pointer;
}

.leftNav .content .link:hover {
	background-color: var(--greyscale-60);
	color: white;
}

.leftNav .content ul {
	padding: 0;
	margin: 0;
}

.leftNav .content li,
h4 {
	font-size: 1em;
	color: var(--theme-main);
	display: block;
	margin: 0;
	padding: 10px 0 10px 10px;
	list-style: none;
}

.leftNav .content a {
	font-size: 1em;
	color: #2d84b4;
	display: block;
	list-style: none;
	cursor: pointer;
}

.leftNav .content a:hover {
	text-decoration: none;
	background-color: transparent;
}

.leftNav .content .selected a {
	color: white;
}

.leftNav .content li.small {
	padding: 4px 5px 2px 5px;
}

.leftNav .content li:hover {
	text-decoration: none;
	background-color: var(--theme-main-hover);
	border-radius: var(--theme-main-radius);
}

.content a:hover {
	text-decoration: none;
	color: white;
	background-color: var(--greyscale-60);
}

.leftNav .content li > a {
	background-color: inherit;
	color: inherit;
	border-radius: var(--theme-main-radius);
}

.leftNav .content li:hover > a {
	text-decoration: none;
	color: inherit;
	background-color: inherit;
	border-radius: var(--theme-main-radius);
}

.leftNav .content a label {
	cursor: pointer;
}

.leftNav .content li.selected {
	background-color: var(--theme-main-selected);
	color: var(--theme-main);
	font-weight: var(--theme-main-selected-fontweight);
	background-image: url("/Content/Icons/feather/chevron-right.svg");
	background-size: 20px;
	background-position: right center;
	border-radius: var(--theme-main-radius);
	cursor: default;
	background-repeat: no-repeat;
}

.leftNav .content li.selected:has(div.subContent) {
	background-image: none;
}

.leftNav .content li.selected div.subContent div,
.leftNav .content li.selected div.subContent div > a {
	color: var(--theme-main);
	background-color: var(--theme-subnav-background);
}

.leftNav .content li.selected div.subContent div.selected {
	background-color: var(--theme-subnav-selected);
	color: var(--theme-main);
	font-weight: var(--theme-main-selected-fontweight);
	background-image: url("/Content/Icons/feather/chevron-right.svg");
	background-size: 18px;
	background-position: right center;
	background-repeat: no-repeat;
}

.leftNav .content #rangerInsightsNav li.selected div.subContent .insightsNavItem {
	background-color: white;
}

.leftNav .content #rangerInsightsNav li.selected div.subContent .insightsNavItem:hover {
	background-color: var(--theme-subnav-hover);
}


.leftNav .content #rangerInsightsNav li.selected div.subContent .insightsNavItem.selected {
	background-color: var(--theme-main-selected);
}

.leftNav .content #rangerInsightsNav li.selected div.subContent .insightsNavItem.selected a {
	background-color: var(--theme-subnav-selected);
	color: var(--theme-main);
	font-weight: var(--theme-main-selected-fontweight);
	background-image: url("/Content/Icons/feather/chevron-right.svg");
	background-size: 18px;
	background-position: right center;
	background-repeat: no-repeat;
}

.editing {
	margin-top: 6px;
}

#alerts {
	color: var(--theme-main);
}

.leftNav .content #rangerInsightsNav li.selected div.subContent .insightsNavItem a.navLink,
.leftNav .content #rangerInsightsNav li.selected div.subContent .insightsNavItem a.navLink:hover {
	background-color: inherit
}

#rangerInsightsNav li.selected> a {
	color: inherit;
}

.content a.selected,
h4.ui-state-active {
	cursor: default;
	color: white;
	background-color: var(--theme-main);
	background-image: url("/Content/right.png");
	background-position: right 5px top 13px;
	background-repeat: no-repeat;
	background-size: 8px;
}

.leftNav .content h4.ui-state-active {
	cursor: pointer;
}

.leftNav .content div.subContent {
	margin-top: 10px;
}

.leftNav .content div.subContent div {
	font-size: 0.9em;
	padding: 4px 10px 6px 10px;
}

.leftNav .content div.subContent div:hover,
.leftNav .content li.selected div.subContent div:hover,
.leftNav .content li.selected div.subContent div:hover > a {
	background-color: var(--theme-subnav-hover);
}

.leftNav .content div.subContent div.selected {
	color: var(--theme-main);
	background-color: white;
}

.leftNav .content div.subContent span {
	display: block;
	padding-bottom: 6px;
}

.leftNav .content div.subContentAccordion {
	margin-top: 5px;
}

.leftNav .content div.subContentAccordion div {
	font-size: 0.95em;
	line-height: 1.1em;
	padding: 2px 0 4px 10px;
}

.leftNav .content div.subContentAccordion div.groupHeader {
	cursor: pointer;
	padding: 4px 10px 6px 10px;
}

.leftNav .content div.subContentAccordion .ui-corner-all:hover {
	background-color: var(--greyscale-60);
	color: white;
}

.leftNav .content div.subContentAccordion div.ui-accordion-header-active,
div.ui-accordion-content-active {
	background-color: white;
	color: var(--theme-main);
}

.leftNav .content div.subContentAccordion div.pointer:hover,
.leftNav .content div.link:hover {
	background-color: var(--theme-main-hover);
	color: var(--theme-main);
}

.leftNav .content div.subContentAccordion div.pointer.selected {
	background-color: var(--theme-main-selected);
	color: var(--theme-main);
	background-image: url("/Content/Icons/feather/chevron-right.svg");
	background-size: 18px;
	background-position: right center;
	background-repeat: no-repeat;
}

.leftNav .content .sites {
	padding: 0 0 5px 10px;
	color: white;
	background-color: var(--theme-main);
}

.leftNav .content .sites .site {
	font-size: 0.9em;
	padding: 1px 5px 5px 10px;
	cursor: pointer;
}

.leftNav .content .sites .site:hover {
	background-color: var(--greyscale-60);
}

.leftNav .content .sites .site.selected {
	color: var(--theme-main);
	background-color: white;
}

/* Main Content
-----------------------------------------------------------*/
.controls {
	padding-bottom: 30px;
}

.controlsFlex {
	display: flex;
	gap: 15px;
	flex-wrap: wrap;
	align-items: center;
}

#mainContent {
	padding: 30px;
}

#mainContent .textControl {
	border-radius: var(--theme-main-radius);
	margin: 0px;
}

#mainContent .controlItem.changed,
.autoexport-multivalue-container.changed,
#mainContent .changed {
	background-color: var(--theme-main-changed);
	border: none;
	border-radius: var(--theme-main-radius);
}

#mainContent .controlItem {
	display: inline-block;
	min-height: 0px;
	vertical-align: middle;
	background-color: inherit;
	border: none;
	margin: 0px;
	padding: 5px;
}

#mainContent .controlItem div {
	margin-top: 0;
}

#mainContent .controlItem span {
	/*vertical-align: middle;*/
}

#mainContent .controlItem input[type="checkbox"] {
	width: 23px;
	height: 23px;
	margin: 5px 3px 10px 10px;
	vertical-align: middle;
	cursor: pointer;
}

#mainContent .controlItem td {
	vertical-align: baseline;
}

#mainContent .controlButton {
	margin: 0 10px 10px 0;
	color: white;
	cursor: pointer;
	vertical-align: middle;
	border-radius: var(--theme-main-radius);
	border: var(--theme-main-border-dark);
	padding: 6px 12px;
	font-size: 0.9em;
}

#mainContent #saveControls .submitButton {
	color: var(--theme-button-submit);
	background-color: var(--theme-button-submit-background);
	border: var(--theme-button-submit-border);
	border-radius: var(--theme-main-radius);
	margin: 5px;
}

#mainContent .controlButton.changed {
	background-color: #f5822b;
}

#mainContent input[type="image"] {
	width: 40px;
	height: 30px;
}

#mainContent .dateControl {
	padding: 6px 5px;
	width: 100px;
	cursor: pointer;
	background-color: var(--theme-main-background);
	border: var(--theme-main-border-light);
	color: var(--theme-main);
	font-size: 0.9em;
	border-radius: var(--theme-main-radius);
	margin: 0;
}

#mainContent .dateTimeControl {
	padding: 6px 5px;
	width: 160px;
	cursor: pointer;
	border: var(--theme-main-border-light);
	background-color: var(--theme-main-background);
	color: var(--theme-main);
	margin: 0;
}

#mainContent .disabledControl {
	background-color: var(--greyscale-60);
	color: white;
	border: none;
	padding: 6px 5px;
	width: 100px;
	margin: 0;
	cursor: pointer;
}

.controlsContainer {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 10px;
}

.controls .groupTitle {
	background-color: var(--theme-main);
	color: white;
	padding: 5px;
	margin-bottom: 10px;
}

.controls .licenseLegend {
	padding: 2px 8px 4px 8px;
	margin: 0 5px 10px 0;
	border: 1px solid #ccc;
	font-size: 0.85em;
	white-space: nowrap;
	display: inline-block;
}

.dropdownControl {
	padding: 5px;
	cursor: pointer;
	background-color: var(--theme-main-background);
	border: var(--theme-main-border-light);
	color: var(--theme-main);
	font-size: 0.9em;
	border-radius: var(--theme-main-radius);
	margin: 0;
}

.textControl {
	border: solid 1px #ccc;
	padding: 5px;
	margin: 0 0 5px 10px;
}

.buttonControl {
	background-color: var(--theme-main);
	color: white;
	border: none;
	padding: 5px 10px 7px 10px;
	margin: 0;
	min-width: 100px;
	cursor: pointer;
	vertical-align: middle;
}

.fakeControl {
	background-color: var(--greyscale-60);
	color: white;
	padding: 6px 10px;
	margin: 0 0 5px 10px;
	display: inline-block;
	vertical-align: middle;
	min-height: 20px;
}

#modal {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: #00000099;
	z-index: 1005;
}

#modal #modalPopup {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: #cccccc;
	border-radius: 5px;
	padding: 1em;
}

#modal #modalPopup #modalContent {
	white-space: pre-line;
}

.modalBtn {
	float: right;
	margin-top: 1em;
	margin-left: 0.5em;
	padding: 3px 8px;
}

#mainContent .green {
	color: var(--theme-button-submit);
	background-color: var(--theme-button-submit-background);
	border: var(--theme-button-submit-border);
	border-radius: var(--theme-main-radius);
	margin: 5px;
}

#mainContent .red {
	color: var(--theme-button-reset);
	background-color: var(--theme-button-reset-background);
	border: var(--theme-button-reset-border);
	border-radius: var(--theme-main-radius);
}

#mainContent .noLeftMargin {
	margin-left: 0;
}

#mainContent .headerTable {
	width: 100%;
	background-color: var(--indigo-10);
}

#mainContent .headerTable td {
	padding: 10px;
}

#backImg {
	width: 64px;
	vertical-align: middle;
	margin: 0 10px 5px 0;
	opacity: 0.3;
	cursor: pointer;
}

#backImg:hover {
	opacity: 1;
}

.aboutTable {
	font-size: 1.1em;
}

.aboutTable th {
	font-weight: normal;
	color: var(--greyscale-60);
	text-align: right;
	width: 10px;
	padding: 5px 10px;
	margin: 0;
	vertical-align: baseline;
	white-space: nowrap;
}

.aboutTable td {
	font-weight: normal;
	padding: 5px 10px;
	margin: 0;
	vertical-align: baseline;
}

/* Right panel
-----------------------------------------------------------*/
#rightPanel {
	width: 300px;
	background-color: var(--greyscale-10);
	border-left: none;
	flex-shrink: 0;
	overflow: auto;
}

#rightPanelContent {
	padding: 20px;
}

#rightPanel .titleTable {
}

#rightPanel .titleTable td {
	padding: 10px;
}

#rightPanel .titleTable .icon {
	padding: 10px;
	height: 40px;
}

#rightPanel .titleTable .labelCell {
	padding-left: 0;
}

#rightPanel .customerTable td {
	padding: 0;
}

#rightPanel .projectCustomerTable td {
	padding: 0;
}

#rightPanel .eulaTable {
}

#rightPanel .eulaTable th {
	font-size: 0.75em;
	font-weight: normal;
	color: var(--greyscale-60);
}

#rightPanel .eulaTable td {
	font-size: 0.9em;
	max-width: 200px;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

#rightPanel .detailRowTable {
	width: 100%;
}

#rightPanel .detailRowTable td,
#rightPanel .detailRowTable th {
	padding: 0 5px 2px 0;
}

#rightPanel .details > div {
	padding: 10px;
}

#rightPanel .title {
	padding: 10px 0;
	font-weight: bold;
}

#rightPanel .titleContainer {
	display: flex;
}

#rightPanel .subTitle {
	font-size: 0.9em;
}

#rightPanel div.label {
	word-wrap: break-word;
	font-size: 0.85em;
	color: var(--greyscale-60);
}

#rightPanel div.value {
	word-wrap: break-word;
	padding-bottom: 5px;
}

#rightPanel .buttons {
	display: none;
	font-size: 0.9em;
}

#rightPanel .buttons input[type="button"] {
	padding: 4px 6px 6px 6px;
	margin-bottom: 5px;
	color: white;
	border: none;
	cursor: pointer;
}
#rightPanel .rightPanelButton {
	padding: 4px 6px 6px 6px;
	margin-bottom: 5px;
	color: white;
	border: none;
	cursor: pointer;
	display: inline-block;
}
#rightPanel .vbuttons {
	display: none;
	font-size: 0.9em;
}

#rightPanel .vbuttons input[type="button"] {
	padding: 4px 6px 6px 6px;
	margin-bottom: 5px;
	color: white;
	border: none;
	cursor: pointer;
}
#rightPanel .vbuttons a {
	padding: 4px 6px 6px 6px;
	margin-bottom: 5px;
	color: white;
	border: none;
	cursor: pointer;
	display: inline-block;
}

#rightPanel .active {
	background-color: #a5cf4e;
}

#rightPanel img.delete {
	width: 16px;
	height: 16px;
	opacity: 0.3;
	float: right;
	cursor: pointer;
	display: block;
	visibility: hidden;
}

#rightPanel img.show {
	display: block;
	visibility: visible;
}

#rightPanel img.delete:hover {
	opacity: 1;
}

#monitoringLocationButtons > div,
#globalButtons > div,
#organisationButtons > div,
#projectButtons > div,
#instrumentButtons > div,
#leaseButtons > div,
#personButtons > div {
	padding: 10px;
}

/* Search Instrument
-----------------------------------------------------------*/

#instrumentDropdown {
	left: 40px;
}

#instrumentNav {
	color: black;
	background-color: #96c1d9;
}

#instrumentTable {
}

#instrumentTable td {
	padding: 0 10px 0 0;
}

#searchBox {
	width: 100%;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

#searchBoxPadded {
	padding: 10px;
	display: block;
}

#searchTable {
	width: 100%;
}

#searchTable td {
	vertical-align: top;
	padding: 5px;
}

#scopePanel {
	min-height: 10px;
	border-bottom: 1px solid white;
}

#searchOrgColumn {
	width: 240px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.searchSpan {
	display: inline-block;
	vertical-align: top;
	width: 100px;
	height: 100px;
}

#resultsTable {
	width: 239px;
}

#resultsTable td {
	vertical-align: middle;
	padding: 2px;
}

#resultsTable tr.selected {
	background-color: var(--theme-main);
	color: white;
}

#resultsTable tr.selected:hover {
	background-color: var(--theme-main);
	color: white;
}

#resultsTable tr.selectableRow:hover {
	background-color: #aaa;
	color: white;
}

#resultsTable td.iconCell {
	width: 1px;
	text-align: right;
}

#resultsTable td.fixedHeight {
	height: 45px;
}

#resultsTable td.arrow {
	width: 13px;
	background-image: url("/Content/right.png");
	background-position: right 5px center;
	background-repeat: no-repeat;
	background-size: 8px;
}

#resultsTable .label {
}

#resultsTable .remove {
	cursor: pointer;
	padding: 5px 10px;
}

#resultsTable .remove:hover {
	opacity: 1;
}

#resultsTable img {
	border: none;
	vertical-align: middle;
}

#resultsTable img.large {
	width: 56px;
}

#resultsTable img.small {
	width: 36px;
}

#resultsTable img.tiny {
	width: 18px;
}

#resultsTable .label1 {
	font-size: 1em;
	line-height: 1.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 180px;
}

#resultsTable .label2 {
	font-size: 0.8em;
	line-height: 1.3em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 180px;
}

#resultsTable #scopeOrganisationRow {
	display: none;
}

#resultsTable #scopeSiteRow {
	display: none;
}

/* Styles for basic forms
-----------------------------------------------------------*/
fieldset {
	border: 1px solid #ddd;
	padding: 0 1.4em 1.4em 1.4em;
	margin: 0 0 1.5em 0;
}

legend {
	font-size: 1.2em;
	font-weight: bold;
}

textarea {
	min-height: 75px;
}

.editor-label {
	width: 300px;
	font-size: 0.8em;
	text-align: left;
}

.editor-label .field-validation-error {
	display: inline-block;
}

.editor-field {
	margin: 0;
}

.editor-field input {
	font-weight: bold;
	width: 300px;
}

input,
select,
textarea {
	font-family: inherit;
	font-size: 1em;
	box-sizing: border-box;
}

section#filterSection {
	padding-bottom: 20px;
}

/* Styles for validation helpers
-----------------------------------------------------------*/
.field-validation-error {
	color: red;
}

.field-validation-valid {
	display: none;
}

.input-validation-error {
	border: 1px solid #fcc;
	background-color: #fee;
}

.validation-summary-errors {
	font-weight: normal;
	color: red;
	text-align: center;
}

.validation-summary-errors ul {
	padding-left: 0;
	list-style: none;
}

.validation-summary-valid {
	display: none;
}

/* DIALOG BOX
----------------------------------------------------------*/

#dialogBox {
	display: none;
	top: 50%;
	left: 50%;
	position: fixed;
	z-index: 1002;
}

#dialogBoxBackground {
	display: none;
	position: fixed;
	z-index: 1001;
	background-color: Black;
	filter: alpha(opacity=60);
	-moz-opacity: 0.6;
	opacity: 0.6;
	text-align: center;
	vertical-align: middle;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

#dialogBoxContent {
	position: absolute;
	font-size: 1.2em;
	background-color: White;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
	border: 12px solid rgb(64, 64, 64);
	border: 12px solid rgb(220, 220, 220, 0.3);
	-webkit-background-clip: padding-box; /* for Safari */
	background-clip: padding-box; /* for IE9+, Firefox 4+, Opera, Chrome */
}

#dialogBoxContent .validation-summary-errors {
	color: red;
	text-align: left;
}

#dialogBoxContent .validation-summary-errors ul {
	margin: 0 0 5px 0;
}

#dialogBoxContent .field-validation-error {
	color: red;
	display: inline-block;
	font-size: 0.9em;
}

.dialogTitle {
	background-color: var(--theme-main);
	color: white;
	padding: 5px 10px;
	font-size: 1.2em;
}

.dialogTitle span {
	vertical-align: middle;
	display: block;
	max-width: 450px;
}

.dialogTitle .spacer {
	padding: 0 5px;
	vertical-align: middle;
}

.dialogTitle .buttons {
	position: absolute;
	right: 5px;
	top: 5px;
}

.dialogTitle .buttons .saveButton {
	display: none;
}

.dialogTitle .buttons img {
	width: 28px;
	opacity: 1;
	cursor: pointer;
}

.dialogTitle .buttons img:hover {
	opacity: 0.5;
}

#dialogSearch {
	font-size: 0.85em;
	width: 500px;
	height: 350px;
	color: var(--theme-main);
}

.dialogPanel {
	padding: 20px;
	width: 500px;
}

.dialogPanel .label {
	margin-bottom: 5px;
}

.dialogPanel .header {
	padding-bottom: 5px;
	margin: 10px 0 5px 0;
	border-bottom: 1px solid #ccc;
}

.dialogPanel .column {
	display: inline-block;
	vertical-align: top;
}

.dialogPanel .w1 {
	width: 56px;
}

.dialogPanel .w2 {
	width: 120px;
}

.dialogPanel .w3 {
	width: 128px;
}

.dialogPanel .w4 {
	width: 200px;
}

.dialogPanel .w5 {
	width: 270px;
}

.dialogPanel .w6 {
	width: 400px;
}

.dialogPanel .wf {
	width: 484px;
}

.dialogPanel .leftMargin {
	margin-left: 10px;
}

.dialogPanel h2 {
	color: black;
	margin-bottom: 20px;
}

.dialogPanel table td {
	padding: 0;
}

.dialogPanel input {
	width: 100%;
	margin-bottom: 5px;
	height: 29px;
}

.dialogPanel input[type="checkbox"] {
	width: 24px;
	height: 24px;
	margin: 10px 5px 10px 0;
	text-align: left;
	vertical-align: middle;
}

.dialogPanel input[type="checkbox"].noTopMargin {
	margin: 3px 0 7px 0;
}

.dialogPanel input[type="button"] {
	padding-top: 5px;
	padding-bottom: 8px;
	height: auto;
	cursor: pointer;
}

.dialogPanel input[type="radio"] {
	width: 18px;
	height: 18px;
	margin: 10px 5px 10px 0;
	text-align: left;
	vertical-align: middle;
}

.dialogPanel select {
	width: 100%;
	margin-bottom: 5px;
	height: 29px;
	padding: 1px 0;
}

.dialogPanel .roleBox {
	font-size: 0.75em;
	padding: 5px 10px;
	margin-top: 5px;
	border: 1px solid #ccc;
}

.dialogPanel .roleBox input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0 5px 0 0;
	vertical-align: middle;
}

.dialogPanel .roleBox label {
	vertical-align: middle;
}

.dialogPanel .locationMapSearch {
	position: absolute;
	top: 50px;
	left: 20px;
	width: 760px;
	font-size: 0.85em;
}

.dialogPanel .locationMapSearch input[type="text"],
.dialogPanel .locationMapSearch select,
.dialogPanel input[type="text"],
.dialogPanel select {
	height: 38px;
	padding: 5px 10px;
	border: 1px solid #aaa;
	border-radius: 5px;
	background-color: rgb(255, 255, 255, 0.8);
}

.dialogPanel .popupPanel {
	position: absolute;
	top: 160px;
	left: 150px;
	width: 200px;
	height: 200px;
	background-color: white;
	border: 2px solid var(--theme-main);
	padding: 10px 20px;
	display: none;
}

.fixedSize {
	height: 420px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.fixedSizeSmall {
	height: 200px;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.fixedSizeMedium {
	width: 540px;
	height: 540px;
	padding: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

.fixedSizeLarge {
	width: 800px;
	height: 640px;
	padding: 0;
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#brandingForm > .dialogPanel {
	height: auto;
}

.licensesTable {
	width: 100%;
	font-size: 0.9em;
}

.licensesTable th {
	font-size: 0.9em;
}

.licensesTable td {
	white-space: nowrap;
}

.licensesTable input,
.licensesTable select {
	margin: 5px 0;
	height: 35px;
}

.licensesTable input[type="text"] {
	width: 110px;
}

#editUserForm .userEditErrorMessage{
	color: red;
	display: none;
}

/* Generic Table (column headings)
-----------------------------------------------------------*/
table {
	border-spacing: 0;
	border-collapse: collapse;
}

tr.highlightable:hover {
	background-color: var(--indigo-10);
}

tr.selectableRow:hover {
	background-color: var(--indigo-10);
	cursor: pointer;
}

th {
	text-align: left;
	vertical-align: bottom;
	line-height: 100%;
}

th.small {
	font-size: 0.8em;
}

th.centreAligned {
	text-align: center;
}

td {
	vertical-align: top;
}

td.small {
	font-size: 0.8em;
}

td.centreAligned {
	text-align: center;
}

/* List Table (row headings)
-----------------------------------------------------------*/
#listTable {
	border-spacing: 0;
	border-collapse: collapse;
}

#listTable th {
	text-align: right;
	padding: 2px 5px;
	padding-right: 10px;
	font-weight: normal;
}

#listTable td {
	padding: 2px 5px;
	vertical-align: top;
}

/* Data Table
----------------------------------------------------------*/

tr.zero {
	background-color: #bcfffd;
}

tr.spanPort1,
tr.o3Calibrator {
	background-color: #fffd99;
}

tr.spanPort2 {
	background-color: #ffe0bb;
}

tr.service {
	background-color: #d1ffd1;
}

#dataTable {
	width: 100%;
	font-size: var(--theme-table-fontsize);
}

#dataTable th {
	padding: 5px;
	background-color: var(--theme-main);
	font-weight: normal;
	color: white;
	position: sticky;
	top: 0px;
}

#dataTable th.underlined {
	border-bottom: 1px solid white;
}

#dataTable th a {
	color: white;
}

#dataTable th a:hover {
	color: lightblue;
}
#dataTable tr:nth-child(odd) {
	background-color: var(--indigo-10);
}
#dataTable td {
	padding: 2px 5px;
	vertical-align: top;
	line-height: var(--theme-table-lineheight);
}

#dataTable .hide {
	display: none;
}

#dataTable th.unhide {
	cursor: pointer;
}

#dataTable .paging {
	font-weight: bold;
	padding: 5px 0;
	vertical-align: middle;
}

#dataTable .paging img {
	border: none;
	padding-bottom: 4px;
	height: 16px;
	vertical-align: middle;
}

#dataTable .filler {
	width: 1px;
}

#dataTable .title {
	font-weight: bold;
}

#dataTable .clickable {
	cursor: pointer;
}

/* Diagnostics Table
----------------------------------------------------------*/

#diagTable {
	border: 1px solid #ccc;
}

#diagTable th {
	padding: 10px;
	background-color: var(--theme-main);
	font-weight: normal;
	color: white;
	text-align: center;
}

#diagTable td {
	padding: 2px 10px;
	vertical-align: top;
	text-align: center;
}

#diagTable tr {
	font-size: var(--theme-table-fontsize);
	line-height: var(--theme-table-lineheight);
}

#modulesTable {
	border: 1px solid #ccc;
}

#modulesTable h3 {
	text-align: left;
}

#modulesTable tr.highlight {
	background-color: var(--indigo-20);
}

#modulesTable th {
	padding: 10px 5px;
	background-color: var(--theme-main);
	font-weight: normal;
	color: white;
	text-align: center;
}

#modulesTable th.light {
	background-color: var(--greyscale-60);
	padding: 5px;
}

#modulesTable td {
	padding: 4px 3px;
	text-align: center;
}

#modulesTable td.changed {
	background-color: #f5822b;
}

#modulesTable input[type="text"] {
	width: 65px;
	text-align: center;
	border: none;
	cursor: pointer;
}

#modulesTable input.changed {
	background-color: #f5822b;
}

#modulesTable input.invalid {
	background-color: #f04b22 !important;
}

#modulesTable select {
	border: none;
	cursor: pointer;
}

#modulesTable select.changed {
	background-color: #f5822b;
}

#modulesTable .controls {
	margin-top: 5px;
}

#modulesTable.manualEntryTable tr th h3,
#modulesTable.manualEntryTable tr th.light {
	font-size: var(--theme-table-fontsize);
}
#modulesTable.manualEntryTable tr th.light div.small {
	font-size: inherit;
}

#modulesTable.manualEntryTable tr.dataRow td,
#modulesTable.manualEntryTable td.rightImportant,
#modulesTable.manualEntryTable input[data-parameter] {
	line-height: var(--theme-table-lineheight);
	font-size: var(--theme-table-fontsize);
	vertical-align: middle;
}

#modulesTable.manualEntryTable tr th {
	border-top: var(--theme-main-border-light);
}

#modulesTable.moduleDetailsTable {
	font-size: var(--theme-table-fontsize);
	line-height: var(--theme-table-lineheight);
}

#modulesTable.moduleSettingsTable {
	font-size: var(--theme-table-fontsize);
	line-height: var(--theme-table-lineheight);
}

#modulesTable.moduleSettingsTable input.gray {
	background-color: var(--theme-main-background);
	color: var(--theme-main-disabled);
}

#titleTable tr td {
	line-height: 1;
}

#modulesTable.manualEntryTable .light,
#modulesTable.manualEntryTable .gray {
	opacity: 1;
	background-color: var(--theme-main);
}

#titleTable {
	width: 100%;
}

#titleTable td {
	vertical-align: baseline;
	padding: 0;
}

#titleTable td.right {
	text-align: right;
}

#titleTable select {
	margin-left: 10px;
}

/* Date picker
----------------------------------------------------------*/
.ui-datepicker {
	width: 17em;
	padding: 15px;
	display: none;
	background: #ffffff;
	color: #222222;
	border: 1px solid var(--theme-main);
	font-size: 1.1em;
}

.ui-datepicker .ui-datepicker-current-day {
	border: 2px solid var(--light-blue-80);
}

.ui-datepicker .ui-datepicker-today {
	border: 1px solid var(--light-blue-40);
}

.ui-datepicker .ui-datepicker-header {
	position: relative;
	padding: 0.2em 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	text-align: center;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
	cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev {
	order: 1
}

.ui-datepicker .ui-datepicker-next {
	order: 3
}

.ui-datepicker .ui-datepicker-title {
	order: 2;
	width: 140px;
}

.ui-datepicker .ui-datepicker-title select {
	font-size: 1em;
	margin: 1px 0;
}

.ui-datepicker select.ui-datepicker-month-year {
	width: 100%;
}

.ui-datepicker select.ui-datepicker-month,
.ui-datepicker select.ui-datepicker-year {
	width: 49%;
}

.ui-datepicker table {
	width: 100%;
	font-size: 1em;
	border-collapse: collapse;
	margin: 0 0 0.4em;
}

.ui-datepicker th {
	padding: 0.7em 0.3em;
	text-align: center;
	font-weight: bold;
	border: 0;
}

.ui-datepicker td {
	border: 0;
	padding: 1px;
}

.ui-datepicker td span,
.ui-datepicker td a {
	display: block;
	padding: 0.2em;
	text-align: right;
	text-decoration: none;
}

.ui-datepicker td a {
	color: var(--theme-main);
}

.ui-datepicker .ui-state-highlight {
}

.ui-datepicker .ui-state-active {
	font-weight: bold;
	color: #f5822b;
}

.vdp-datepicker__calendar .cell.selected {
	background: var(--light-blue-40);
}
.vdp-datepicker__calendar .cell:hover {
	border: 1px solid var(--light-blue-60);
}
.vdp-datepicker__calendar .cell.selected:hover {
	background: var(--light-blue-60);
}

/* Time picker
----------------------------------------------------------*/
.ui-timepicker-div .ui-widget-header {
	margin-bottom: 8px;
}

.ui-timepicker-div dl {
	text-align: left;
	margin: 0;
}

.ui-timepicker-div dl dt {
	float: left;
	clear: left;
	padding: 0 0 0 5px;
}

.ui-timepicker-div dl dd {
	margin: 0 10px 10px 40%;
}

.ui-timepicker-div td {
	font-size: 90%;
}

.ui-tpicker-grid-label {
	background: none;
	border: none;
	margin: 0;
	padding: 0;
}

.ui-timepicker-div .ui_tpicker_unit_hide {
	display: none;
}

.ui-timepicker-rtl {
	direction: rtl;
}

.ui-timepicker-rtl dl {
	text-align: right;
	padding: 0 5px 0 0;
}

.ui-timepicker-rtl dl dt {
	float: right;
	clear: right;
}

.ui-timepicker-rtl dl dd {
	margin: 0 40% 10px 10px;
}

/* Shortened version style */
.ui-timepicker-div.ui-timepicker-oneLine {
	padding-right: 2px;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,
.ui-timepicker-div.ui-timepicker-oneLine dt {
	display: none;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label {
	display: block;
	padding-top: 2px;
}

.ui-timepicker-div.ui-timepicker-oneLine dl {
	text-align: right;
}

.ui-timepicker-div.ui-timepicker-oneLine dl dd,
.ui-timepicker-div.ui-timepicker-oneLine dl dd > div {
	display: inline-block;
	margin: 0;
}

.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before {
	content: ":";
	display: inline-block;
}

.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,
.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before {
	content: ".";
	display: inline-block;
}

.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,
.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before {
	display: none;
}

.ui-slider {
	position: relative;
	text-align: left;
}

.ui-slider .ui-slider-handle {
	position: absolute;
	z-index: 2;
	width: 1.1em;
	height: 1.4em;
	cursor: pointer;
	-ms-touch-action: none;
	touch-action: none;
	background-color: var(--greyscale-60);
}

.ui-slider .ui-slider-range {
	position: absolute;
	z-index: 1;
	font-size: 0.7em;
	display: block;
	border: 0;
	background-position: 0 0;
}

/* For IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
	filter: inherit;
}

.ui-slider-horizontal {
	height: 0.7em;
	border: 1px solid #ccc;
	top: 0.3em;
}

.ui-slider-horizontal .ui-slider-handle {
	top: -0.4em;
	margin-left: -0.6em;
}

.ui-slider-horizontal .ui-slider-range {
	top: 0;
	height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
	left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
	right: 0;
}

.ui-slider-vertical {
	width: 0.8em;
	height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
	left: -0.3em;
	margin-left: 0;
	margin-bottom: -0.6em;
}

.ui-slider-vertical .ui-slider-range {
	left: 0;
	width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
	bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
	top: 0;
}

.ui_tpicker_hour {
	padding-bottom: 0.5em;
}

/* Auto-complete
----------------------------------------------------------*/
.ui-autocomplete {
	list-style: none;
	padding: 1px;
}

.ui-menu-item {
	font-size: 0.8em;
	padding: 3px;
	cursor: pointer;
	background-color: rgb(255, 255, 255, 0.8);
}

.ui-state-focus {
	color: white;
	background-color: var(--theme-main);
}

.ui-helper-hidden-accessible {
	display: none;
}

/* Admin Instruments
----------------------------------------------------------*/
.configureContent {
}

.configureContent .group {
	display: inline-block;
	vertical-align: top;
	margin-right: 5px;
	margin-bottom: 10px;
	border: 1px solid #ccc;
}

.configureContent .groupTitle {
	background-color: var(--theme-main);
	color: white;
	padding: 5px;
}

.configureContent table {
}

.configureContent th {
	font-weight: normal;
}

.configureContent td {
	font-size: 1.1em;
	font-weight: bold;
	padding-bottom: 7px;
}

.configureContent input[type="password"] {
	width: 200px;
	font-weight: bold;
	padding: 0 2px;
}

.configureContent input[type="text"] {
	width: 200px;
	font-weight: bold;
	padding: 0 2px;
}

.configureContent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin-left: 0;
	cursor: pointer;
}

.configureContent select {
	width: 200px;
	font-weight: bold;
	cursor: pointer;
}

.configureContent .sensor {
	width: 80px;
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
	display: inline-block;
}

.configureContent .remove {
	width: 18px;
	vertical-align: middle;
	display: none;
	cursor: pointer;
	opacity: 0.5;
}

.configureContent .remove:hover {
	opacity: 1;
}

.configureItem {
	display: block;
	padding: 7px 5px;
	vertical-align: top;
}

.configureItem .title {
	font-size: 0.9em;
	padding-bottom: 2px;
	width: 200px;
	color: #666;
}

.configureItem .value,
.configureItem .value input,
.configureItem .value select {
	font-weight: var(--theme-main-fontweight);
	font-size: var(--theme-main-fontsize-larger);
}

.configureItem .sub {
	font-size: 0.9em;
	font-weight: normal;
	width: 200px;
	margin-bottom: 5px;
}

.configureItem.changed {
	background-color: #f5822b;
}

input#Sensors_Active_Sensors {
	display: none;
}

#deviceAccordion {
	padding: 0 10px;
	font-size: 1.2em;
}

#configGroup {
	margin: 0;
	padding: 4px 0 0 12px;
	outline: none;
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
}

#configGroup:hover {
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
}

#configGroup.ui-state-default {
	color: #444;
	background-image: url("/Content/expand.png");
	background-position: 0 12px;
	background-repeat: no-repeat;
	cursor: pointer;
}

#configGroup.ui-state-active {
	color: var(--theme-main);
	background-image: url("/Content/contract.png");
	background-position: 0 12px;
	background-repeat: no-repeat;
	opacity: 1;
	filter: alpha(opacity=100);
	-moz-opacity: 1;
	cursor: auto;
}

#configContent {
	padding-left: 22px;
}

#configContent #caption {
	font-size: 0.8em;
	color: var(--greyscale-60);
	line-height: 1em;
	padding-top: 3px;
}

#configContent #value {
	font-size: 1em;
	font-weight: bold;
	padding-bottom: 2px;
}

#configContent #value img {
	cursor: pointer;
	vertical-align: middle;
}

#configContent #value select {
	font-weight: bold;
	margin-top: 2px;
}

#configContent #value input {
	font-weight: bold;
	margin-top: 2px;
	width: 200px;
}

#configTable {
}

#configTable td img {
	vertical-align: middle;
	cursor: pointer;
}

#configTable td.remove {
	display: none;
	width: 1px;
}

#configTable td.bold {
	font-weight: bold;
}

#releaseNotesLink
{
	display: flex;
	align-items: center;
}

#releaseNotesLink .icon {
	margin-left: var(--spacing-02);
	fill: #1d60ff;
}

/* Sensor Graphs
----------------------------------------------------------*/

#graphTable {
	width: 100%;
	margin-top: 5px;
}

#graphTable td {
	vertical-align: top;
}

#graphTable td.sensorGraph {
	padding-bottom: 15px;
}

#graphTable td.sensorHeader {
	width: 1px;
	white-space: nowrap;
	vertical-align: bottom;
}

.sensorLegend {
	width: 100%;
	text-align: right;
	vertical-align: bottom;
	line-height: 1em;
}

.legendsContainer {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.graphLegend {
	display: inline-block;
	color: white;
	font-size: 0.75em;
	font-weight: normal;
	padding: 2px 5px 3px 5px;
	border-radius: 3px;
	margin: 0 0 5px 5px;
	white-space: nowrap;
}

.chartInfo {
	display: flex;
	justify-content: space-between;
}

.sensorInfo {
	display: flex;
	align-items: flex-end;
	flex-wrap: nowrap;
	gap: 2px;
	margin-right: 1rem;
}

.sensorItemTitle {
	color: white;
	background-color: var(--theme-main);
	font-weight: normal;
	padding: 1px 15px 4px 15px;
	display: inline-block;
}

.sensorItemUnits {
	color: #666;
	background-color: #ccc;
	padding: 1px 10px 4px 10px;
	display: inline-block;
}

.sensorItem {
	height: 160px;
	background-color: var(--white);
	border: 1px solid #ccc;
	text-align: center;
}

.sensorItemWait {
	margin-top: 70px;
}

.graphDialogUnits {
	color: #ccc;
	font-size: 0.85em;
}

.graphDialogPanel {
	padding: 0;
	overflow-y: auto;
	font-size: 0.85em;
	position: absolute;
	top: 40px;
	bottom: 0;
	width: 100%;
}

.graphDialogItem {
	margin: 15px 15px 0 15px;
}

.seriesTable {
	width: 100%;
	margin-bottom: 10px;
}

.seriesTable .colorCell {
	width: 15px;
	vertical-align: top;
	cursor: pointer;
}

.seriesTable .contentCell {
	padding-left: 10px;
}

.seriesTable .group {
	display: inline-block;
	margin-right: 10px;
}

.seriesTable .label {
	display: inline-block;
	margin-right: 10px;
}

.seriesTable select {
	width: auto;
	max-width: 330px;
}

.seriesTable input[type="text"] {
	width: 390px;
}

.seriesTable input[type="radio"] {
	width: 20px;
	cursor: pointer;
}

.seriesTable input[type="checkbox"] {
	margin: 0 5px;
	cursor: pointer;
}

.seriesTable label {
	cursor: pointer;
}

.seriesTable img {
	padding: 5px 10px;
	vertical-align: top;
	width: 24px;
	opacity: 0.5;
	cursor: pointer;
}

.seriesTable img:hover {
	opacity: 1;
}

.toolMenu {
	position: absolute;
	display: none;
	padding: 5px;
	border: 1px solid var(--theme-main);
	background-color: white;
}

.toolMenu .item {
	color: var(--theme-main);
	line-height: 1.5em;
	padding: 10px 20px;
	cursor: pointer;
	text-align: right;
}

.toolMenu .item:hover {
	color: white;
	background-color: var(--theme-main);
}

.toolMenu .separator {
	background-color: #ccc;
	height: 1px;
	margin: 5px;
}

#chartTooltip {
	position: absolute;
	display: none;
	padding: 3px;
	opacity: 0.8;
	color: white;
	line-height: 1.1em;
	text-align: center;
	font-size: 0.9em;
	border-radius: 3px;
	z-index: 1003;
}

.legend table td {
	vertical-align: bottom;
	padding: 0 0.5em;
	text-align: right;
}

.legend .legendTitle {
	text-align: left;
}

.chartButton {
	display: block;
	width: 24px;
	height: 24px;
	padding: 5px;
	opacity: 0.2;
	/*background-color: rgb(255, 255, 255, 0.8);*/
}

.chartButton.active {
	cursor: pointer;
	opacity: 0.4;
	/*opacity: 1;*/
}

.chartButton.active:hover {
	opacity: 1;
	/*padding: 3px;
	border: 2px solid #ccc;*/
}

.chartLegend {
	position: absolute;
	cursor: pointer;
	background-color: transparent;
}

.chartLegend.disabled {
	background-color: rgb(255, 255, 255, 0.7);
}

#newChartInstrumentSelect {
	resize: vertical;
	min-height: 38px;
	max-height: 200px;
}

.seriesColorPicker {
	display: none;
	width: 450px;
	border: 1px solid #ccc;
	overflow-y: auto;
}

.seriesColorPicker div {
	cursor: pointer;
	height: 20px;
	margin: 3px;
}

.seriesColorPicker div.selected {
	border: 3px solid black;
}

.annotateColorPicker div {
	text-align: center;
}

.annotateColorPicker div {
	display: inline-block;
	cursor: pointer;
	width: 50px;
	height: 50px;
	margin: 3px;
}

.annotateColorPicker div.selected {
	border: 3px solid black;
	margin: 0;
}

.annotateRemoveLink div {
	margin-top: 10px;
	cursor: pointer;
	color: #1d60ff;
	font-style: italic;
}

.actionLink {
	font-size: 0.9em;
	font-style: italic;
	color: var(--greyscale-60);
	cursor: pointer;
}

.newChartSettings {
	display: none;
}

.newChartSettingsTableContainer {
	max-height: 200px;
	overflow-y: auto;
	margin: 6px 0 4px 0;
}

.newChartSettingsTable {
	width: 100%;
}

.newChartSettings tr {
}

.newChartSettings th {
	font-weight: normal;
	padding: 0 0 5px 0;
}

.newChartSettings td {
	font-weight: bold;
	padding: 0 0 5px 0;
	border-top: 1px solid #ccc;
}

.roseTable {
	width: 100%;
	font-size: 0;
}

.roseTable .rose {
	font-size: 12pt;
	display: inline-block;
	vertical-align: top;
	padding: 0 10px 10px 0;
	height: 1000px;
}

.chartCanvasPlaceholder {
	display: table;
	width: 100%;
	min-height: 10px;
	min-width: 10px;
}
/* Journal
----------------------------------------------------------*/

#headingTable {
	width: 100%;
	background-color: var(--indigo-10);
	border: 1px solid #ccc;
}

#headingTable td {
	padding: 5px 7px 5px 10px;
}

#headingTable h3 {
	margin-bottom: 6px;
	margin-top: 2px;
}

#journalNav .content ul {
	padding: 0;
	margin: 0;
}

#journalDropdown {
	left: 40px;
}

#journalDropdown .journalPanel {
	color: black;
	box-shadow: 0 2px 6px var(--shadow);
}

#journalDropdown .entry {
	border: 1px solid #ccc;
	margin-bottom: 10px;
}

#journalDropdown .entry .buttonControl {
	margin-bottom: 0;
}

#journalDropdown .entry.highlightable:hover {
	border: 1px solid var(--theme-main);
}

#journalDropdown .entry.selected {
	border: 1px solid var(--theme-main);
}

#journalDropdown .tools {
	display: none;
	padding: 10px 10px 0 10px;
	vertical-align: top;
}

#journalDropdown .tools img {
	width: 20px;
	opacity: 0.5;
	cursor: pointer;
}

#journalDropdown .tools img:hover {
	opacity: 1;
}

#journalDropdown .edit,
.save {
	display: none;
}

#journalDropdown table {
	width: 100%;
	background-color: white;
}

#journalDropdown table th {
	font-size: 0.9em;
	font-weight: normal;
	color: var(--greyscale-60);
	background-color: var(--indigo-10);
	border-bottom: 1px solid #ccc;
	padding: 5px 7px 5px 10px;
	vertical-align: middle;
}

#journalDropdown table td {
	padding: 5px 10px;
	vertical-align: top;
}

#journalDropdown .editor {
	width: 100%;
	height: 120px;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	margin: 5px 0;
}

#journalDropdown #newEntry {
	display: none;
	border: 2px solid var(--theme-main);
	background-color: var(--indigo-10);
	margin-bottom: 10px;
}

#journalDropdown .journalLeft,
.journalRight {
	display: inline-block;
	vertical-align: top;
}

#journalDropdown .journalLeft {
	height: 100%;
	width: 150px;
	padding-top: 20px;
	padding-left: 20px;
}

#journalDropdown .journalRight {
	padding: 20px;
}

#journalDropdown .headerTable {
	margin-bottom: 10px;
	background: none;
	border: none;
}

#journalDropdown .headerTable td {
	padding: 10px 10px 5px 0;
}

#journalNav .content li,
h4 {
	font-size: 1em;
	color: var(--theme-main);
	display: block;
	margin: 0;
	padding: 10px 0 10px 10px;
	list-style: none;
	cursor: pointer;
}

#journalNav .content li {
	border-radius: var(--theme-main-radius);
}

#journalNav .content li.small {
	padding: 4px 5px 2px 5px;
}

#journalNav .content li:hover {
	text-decoration: none;
	background-color: var(--theme-main-hover);
	color: var(--theme-main);
}

#journalNav .content li.selected {
	cursor: default;
	background-repeat: no-repeat;
	background-color: var(--theme-main-selected);
	color: var(--theme-main);
	font-weight: var(--theme-main-selected-fontweight);
	background-image: url("/Content/Icons/feather/chevron-right.svg");
	background-size: 20px;
	background-position: right center;
}

h4.ui-state-active,
.content .dateRange label.selected {
	cursor: default;
	color: white;
	background-color: var(--theme-main);
	background-image: url("/Content/right.png");
	background-position: right 5px top 13px;
	background-repeat: no-repeat;
	background-size: 8px;
}

#journalDropdown #journalContent {
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}

#journalDropdown #entriesList .details {
	white-space: pre-line;
	word-break: break-all;
}

/* Administration
----------------------------------------------------------*/

#adminContent .entry {
	border: 1px solid #ccc;
	margin-top: 10px;
}

#adminContent .entry .buttonControl {
	margin-top: 2px;
	margin-bottom: 2px;
}

#adminContent .entry.highlightable:hover {
	border: 1px solid var(--theme-main);
}

#adminContent .entry.selected {
	border: 1px solid var(--theme-main);
}

#adminContent table {
	width: 100%;
}

#adminContent table th {
	font-size: 0.9em;
	font-weight: normal;
	color: var(--greyscale-60);
	background-color: var(--indigo-10);
	border-bottom: 1px solid #ccc;
	padding: 5px 7px 5px 10px;
	vertical-align: middle;
}

#adminContent table td {
	padding: 10px;
	vertical-align: top;
}

.adminItem {
	padding: 5px;
}

.adminItem img {
	width: 32px;
	vertical-align: middle;
}

.adminItem img,
span,
label {
	/*vertical-align: middle;*/
}

.adminItem .hidden1,
.hidden2,
.hidden3,
.hidden4,
.hidden5 {
	display: none;
}

.adminItem .floatright {
	float: right;
}

.adminItem.selected {
	background-color: var(--indigo-10);
}

.adminItem.selectableRow {
	cursor: pointer;
}

.adminItem.selectableRow:hover {
	background-color: var(--greyscale-60);
	color: white;
}

.instrumentsItem .selected {
	color: var(--theme-main);
}

.itemList {
	width: 50%;
	padding: 0;
}

.itemDetail {
	width: 50%;
	background-color: var(--indigo-10);
	padding: 10px;
}

.itemDetail div {
	padding-left: 10px;
}

.itemDetail div.label {
	font-size: 0.85em;
	color: var(--greyscale-60);
}

.itemDetail div.value {
	padding-bottom: 5px;
}

.adminList {
	margin-left: 10px;
	overflow-y: auto;
	flex: 1;
}

.adminTreePanel {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.treeSearch {
	background-color: var(--indigo-10);
	padding: 10px 20px;
	border-bottom: none;
	font-size: 0.8em;
	font-weight: var(--theme-main-fontweight);
	color: var(--theme-main);
	flex-shrink: 0;
}

.treeSearch input[type="search"] {
	border: solid 1px #ccc;
}

.treeSearch input[type="search"]::-ms-clear {
	display: none;
	width: 0;
	height: 0;
}

.treeSearch input[type="search"]::-ms-reveal {
	display: none;
	width: 0;
	height: 0;
}

.treeSearch input[type="search"]::-webkit-search-decoration,
.treeSearch input[type="search"]::-webkit-search-cancel-button,
.treeSearch input[type="search"]::-webkit-search-results-button,
.treeSearch input[type="search"]::-webkit-search-results-decoration {
	display: none;
}

.treeSearch img {
	width: 16px;
	height: 16px;
	vertical-align: bottom;
	cursor: pointer;
	opacity: 0.3;
	padding: 2px;
}

.treeSearch img:hover {
	opacity: 0.75;
}

.treeSearch input[type="checkbox"] {
	width: 16px;
	height: 16px;
	vertical-align: text-bottom;
}

.treeSearch tr {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
}

.treeChecks {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex-wrap: wrap;
}

.treeChecks span {
	display: flex;
	align-items: center;
}

.sensorListTable {
	font-size: 0.85em;
	border-collapse: collapse;
	box-sizing: border-box;
}

#sensorListTable .leftline {
	border-left: 2px solid white;
}

#sensorListTable .leftpadded {
	border-left: 2px solid transparent;
}

#sensorListTable .rightline {
	border-right: 2px solid white;
}

#sensorListTable .rightpadded {
	border-right: 2px solid transparent;
}

#sensorListTable .centred {
	text-align: center;
}

#sensorListTable .right {
	text-align: right;
}

#sensorListTable .bold {
	font-weight: bold;
}

#sensorListTable .remove {
	cursor: pointer;
	display: none;
}

#sensorListTable tr.highlighted {
	background-color: var(--indigo-10);
}

#sensorListTable th {
	background-color: var(--theme-main);
	font-size: 0.75em;
	font-weight: normal;
	color: white;
	text-align: left;
	vertical-align: bottom;
	padding: 3px 5px 5px 5px;
}

#sensorListTable th.highlighted {
	background-color: #0d6494;
}

#sensorListTable th.title {
	font-weight: bold;
}

#sensorListTable th.clickable {
	cursor: pointer;
}

#sensorListTable th.clickable:hover {
	background-color: #0d6494;
}

#sensorListTable td {
	padding: 0;
	height: 23px;
	min-height: 23px;
	min-width: 50px;
}

#sensorListTable td.padded {
	padding: 0 5px;
	vertical-align: middle;
	white-space: nowrap;
}

#sensorListTable td.highlighted {
	background-color: var(--indigo-10);
}

#sensorListTable td.modified {
	background-color: #f5822b;
}

#sensorListTable td.invalid {
	background-color: #f04b22 !important;
}

#sensorListTable td.greyed {
	color: #bbb;
}

#sensorListTable td.greyed input,
#sensorListTable td.greyed select {
	color: #bbb;
}

#sensorListTable td img {
	vertical-align: middle;
	width: 16px;
	height: 16px;
}

#sensorListTable input,
#sensorListTable select {
	vertical-align: middle;
	border-collapse: collapse;
	border: none;
	background-color: transparent;
	padding: 0 5px;
	max-height: 23px;
}

#sensorListTable input[type="checkbox"] {
	width: 16px;
	height: 16px;
}

#sensorListTable input:focus,
#sensorListTable select:focus {
	border: 1px solid var(--theme-main);
}

#sensorListTable .w1 {
	width: 50px;
	min-width: 50px;
}

#sensorListTable .w2 {
	width: 60px;
	min-width: 60px;
}

#sensorListTable .w3 {
	width: 80px;
	min-width: 80px;
}

#sensorListTable .w4 {
	width: 120px;
	min-width: 120px;
}

#sensorListTable .vertical {
	text-align: center;
	padding: 0;
	transform: rotate(-90deg);
}

/* Dashboards
----------------------------------------------------------*/

.dashboardsContent {
	padding: 20px;
}

.dashboardTable {
	width: 100%;
	font-size: 0.9em;
}

.dashboardTable tr {
	margin: 20px;
}

.dashboardTable tr:hover {
	background-color: var(--theme-main-hover);
}

.dashboardTable th {
	padding: 8px;
}

.dashboardTable td {
	vertical-align: top;
	padding: 8px;
}

.dashboardTable .status {
	padding: 0 5px;
	min-width: inherit;
	white-space: nowrap;
}

#mapSearchContainer {
	display: flex;
	flex-direction: row;
	width: 100%;
	height: 100%;
	color: black;
}

#mapSearchContainer .map {
	flex: 1;
}

#mapSearchContainer .list {
	display: table-cell;
	width: 310px;
	height: 100%;
	padding: 0;
}

#mapSearchContainer .leftBorder {
	border-left: solid 1px #ccc;
}

#mapSearchContainer .rightBorder {
	border-right: none;
}

#mapSearchContainer .searchContainer {
	padding: 20px;
	margin: 0px;
	border-bottom: var(--theme-main-border-light);
	background: var(--theme-main-background);
}

#mapSearchContainer .nav-search {
	margin-left: 0px;
}

#mapSearchContainer .filter-actions {
	margin-right: 0px;
}

#mapSearchContainer .filter-icons {
	border-radius: 0px;
	margin-left: -3px;
}

#mapSearchContainer .searchContainer .nav-search > div {
	padding: 5px 0px 0px 0px;
}

#mapSearchContainer .searchContainer .nav-search label {
	font-size: 0.8em;
	font-weight: var(--theme-main-fontweight);
	color: var(--theme-main);
}

#mapSearchContainer .searchContainer .nav-search .searchEdit {
	border-radius: 0px;
	margin: 0px;
	width: 100%;
	display: block;
}

#mapSearchContainer .searchContainer td {
	padding: 0;
}

#mapSearchContainer .searchContainer input[type="checkbox"] {
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

#mapSearchContainer .searchContainer label {
	font-size: 0.9em;
	vertical-align: middle;
	color: var(--greyscale-60);
}

#mapSearchContainer .searchEdit {
	width: 255px;
	padding: 5px;
	margin: 0 2px;
	border-radius: 5px;
	border: 1px solid #aaa;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	display: inline-block;
	vertical-align: middle;
}

#mapSearchContainer .button {
	width: 32px;
	height: 32px;
	display: inline-block;
	vertical-align: top;
	opacity: 0.1;
}

#mapSearchContainer .button.canClick {
	opacity: 0.5;
	cursor: pointer;
}

#mapSearchContainer .button.canClick:hover {
	opacity: 1;
}

#mapSearchContainer .resultsContainer {
	overflow-y: auto;
}

#mapSearchContainer .item {
	cursor: pointer;
	padding: 3px 0 3px 10px;
}

#mapSearchContainer .item:hover {
	background-color: var(--indigo-10);
}

#mapSearchContainer .disabled {
	color: var(--greyscale-60);
}

#mapSearchContainer .highlight {
	background-color: var(--indigo-10);
}

#mapSearchContainer .selected {
	color: var(--theme-main);
	background-color: var(--indigo-10);
	padding-left: 0;
	border-left: solid 10px var(--theme-main);
	font-weight: bold;
}

#mapSearchContainer .selected:hover {
	color: var(--theme-main);
}

#mapSearchContainer .smallIcon {
	display: inline-block;
	margin: 5px 5px 5px 0;
	width: 36px;
	height: 36px;
	vertical-align: middle;
}

#mapSearchContainer .itemInfo {
	display: inline-block;
	vertical-align: middle;
}

#mapSearchContainer .itemInfo div {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 222px;
}

#mapSearchContainer .itemInfo.lease {
	color: var(--greyscale-60);
}

#mapSearchContainer .label1 {
	line-height: 1.3em;
	font-size: 1em;
}

#mapSearchContainer .label2 {
	line-height: 1.5em;
	font-size: 0.8em;
}

#mapSearchContainer .selectContainer {
	background-color: var(--indigo-10);
	border-top: 1px solid #ccc;
	line-height: 1.2em;
	color: #aaa;
	width: 100%;
	font-size: 0.95em;
}

#mapSearchContainer .selectedItemsCount {
	font-size: 2.5em;
	padding: 1px 3px 5px 10px;
	width: 1px;
}

#mapSearchContainer .selectedItemsContainer {
	padding: 4px 5px 6px 10px;
	min-height: 38px;
}

#mapSearchContainer .selectedItemLabel1 {
	padding-left: 10px;
	font-size: 0.9em;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 254px;
}

.noItemLabel {
	padding-left: 10px;
}

#mapSearchContainer .selectLinks {
	font-size: 0.9em;
}

#mapSearchContainer .enabled {
	color: black;
}

#mapSearchContainer .link {
	color: var(--theme-main);
	padding: 0;
	cursor: pointer;
}

.leaflet-popup-content .itemLink {
	cursor: pointer;
	color: var(--theme-main);
}

.leaflet-popup-content .itemName,
.leaflet-popup-content .contribution-title {
	font-weight: bold;
	font-size: 1.2em;
	margin-bottom: 5px;
}

.leaflet-popup-content .itemStatus,
.itemStatusLoading {
	margin: 5px 0;
}

.leaflet-popup-content .itemStatus .status {
	padding: 0 5px;
	min-width: inherit;
	white-space: nowrap;
}

.leaflet-popup-content .itemStatusLoading {
	font-style: italic;
	color: #aaa;
}

#sliderBox {
	padding: 5px 50px;
	height: 33px;
	display: none;
}

#slider {
	background-color: var(--indigo-10);
}

#sliderHandle {
	width: 100px;
	height: 2em;
	top: 50%;
	margin-top: -1em;
	margin-left: -50px;
	text-align: center;
	line-height: 2em;
	background-color: var(--theme-main);
	color: white;
	border-radius: 3px;
	z-index: 1;
}

/* Miscellaneous
----------------------------------------------------------*/
#saveButtons input[type="submit"],
#uploadForm input[type="button"],
#mainContent .controlButton.blue,
#mainContent .controlButton.orange,
.bootstrap .btn-outline-primary {
	color: var(--theme-button-submit);
	background-color: var(--theme-button-submit-background);
	border: var(--theme-button-submit-border);
	border-radius: var(--theme-main-radius);
	margin: 5px;
}

#mainContent .controlItem .red,
#saveButtons input[type="reset"],
.bootstrap .btn-outline-warning {
	color: var(--theme-button-reset);
	background-color: var(--theme-button-reset-background);
	border: var(--theme-button-reset-border);
	border-radius: var(--theme-main-radius);
}

.business-metrics-container .row.top-container input[type="text"] {
	border-radius: 0px;
}

.customer-view-row {
	position: sticky;
	top: 0;
}

.hidden {
	display: none;
}

.blue {
	background-color: var(--theme-main);
}

.blueText {
	color: var(--theme-main);
}

.green {
	background-color: #a5cf4e;
}

.greenText {
	color: #a5cf4e;
}

.darkGreenText {
	font-weight: 500 !important;
	color: #3cb371;
}

.orange {
	background-color: #f5822b;
}

.orangeText {
	color: #f5822b;
}

.red {
	background-color: red;
}

.redText {
	color: red;
}

.grayBackground {
	background-color: #ccc;
}

.gray {
	opacity: 0.5;
	filter: alpha(opacity=50);
	-moz-opacity: 0.5;
}

.lightgray {
	opacity: 0.3;
	filter: alpha(opacity=30);
	-moz-opacity: 0.3;
}

.small {
	font-size: 0.8em;
}

.left {
	text-align: left;
}

.leftImportant {
	text-align: left !important;
}

.right {
	text-align: right;
}

.rightImportant {
	text-align: right !important;
}

.pointer {
	cursor: pointer;
}

.topB {
	border-top: solid 1px #ccc;
}

.leftB {
	border-left: solid 1px #ccc;
}

.rightB {
	border-right: solid 1px #ccc;
}

.bottomB {
	border-bottom: solid 1px #ccc;
}

.smallButtonControl {
	padding: 1px 8px 3px 8px;
	margin-right: 5px;
	color: white;
	border: none;
	cursor: pointer;
	vertical-align: text-bottom;
	font-size: 0.8em;
}

#poweredBy img {
	display: block;
	width: 230px;
	margin-left: auto;
	margin-right: auto;
}

.btn {
	color: white;
	border: none;
	padding: 0.5rem;
	margin: 10px 10px 10px 0px;
	min-width: 80px;
	cursor: pointer;
}
.btn.btn-primary {
	color: var(--theme-button-submit);
	background-color: var(--theme-button-submit-background);
	border: var(--theme-button-submit-border);
	border-radius: var(--theme-main-radius);
	margin: 5px;
}
.btn.btn-success {
	background-color: #28a745;
}
.btn.btn-warning {
	color: var(--theme-button-reset);
	background-color: var(--theme-button-reset-background);
	border: var(--theme-button-reset-border);
	border-radius: var(--theme-main-radius);
}
#alertLoading {
	position: absolute;
	left: 50%;
	top: 50%;
	z-index: 10;
}
.alertGroup {
	margin: 5px 5px 10px 5px;
	padding-left: 20px;
	padding-right: 20px;
	background: transparent;
	border: none;
}
.alertGroup.odd {
	background-color: var(--indigo-10);
}
.alertGroup .hints {
	width: 12px;
	height: 12px;
	position: relative;
	top: -10px;
}
.alertGroup:not(:last-child) {
	border-bottom: solid 1px var(--greyscale-20);
}
.alertItem {
	margin-bottom: 10px;
}
.set-point-exceeded-panel {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
}
.dialogPanel p {
	margin: 0px;
}
.dialogPanel p td {
	padding-right: 5px;
	padding-top: 5px;
	font-weight: 500;
}

.list-enter-active,
.list-leave-active {
	transition: all 0.5s;
}

.list-enter, .list-leave-to /* .list-leave-active below version 2.1.8 */ {
	opacity: 0;
	transform: translateY(-30px);
}

td.check-element input[type="checkbox"] {
	display: inline-block;
}
td.check-element span {
	display: inline-block;
	font-weight: normal;
	width: 390px;
	vertical-align: middle;
}

.configure-project .configureContent select,
.configure-project .configureContent input[type="text"],
.configure-project .controls {
	width: 310px;
}

.configure-project .controls input {
	float: right;
}

#mainContent.configure-project .controls input[type="submit"][disabled="disabled"].dateControl,
#mainContent.configure-project .controls input[type="reset"][disabled="disabled"].dateControl {
	background-color: grey;
}

#mainContent.configure-project .controls input[type="submit"].dateControl {
	background-color: #f5822b;
}

/* monitoring location itemStatus */
.itemStatus.monitoringLocation {
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
	padding-top: 0px;
	padding-bottom: 5px;
}

.itemStatus.monitoringLocation h3 {
	font-size: 12px;
	font-weight: bold;
}

.itemStatus.monitoringLocation ul {
	list-style: none;
	padding: 0px;
	margin: 0px;
	max-width: 300px;
	min-width: 150px;
	overflow: hidden;
}

.itemStatus.monitoringLocation ul li {
	font-weight: normal;
	margin-bottom: 5px;
}

.itemStatus.monitoringLocation ul li ul li {
	border-radius: 3px;
	border: solid 1px #ccc;
	background-color: #e0e0e0;
	color: #333;
	font-weight: normal;
	display: inline-block;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	margin-right: 5px;
	float: left;
}

/* projectIconContainer */
.projectIconContainer {
	border-top: solid 1px #ccc;
	padding-top: 5px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.projectIconContainer .icon {
	display: inline-block;
	position: relative;
	margin-top: 5px;
	width: 30px;
	height: 30px;
	background-color: #ccc;
	border-radius: 15px;
	text-align: center;
	vertical-align: middle;
	margin-right: 20px;
}

.projectIconContainer .icon img {
	width: 20px;
	height: 20px;
	vertical-align: middle;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -10px;
	margin-left: -10px;
}

.projectIconContainer .icon span {
	display: block;
	width: 14px;
	height: 14px;
	font-size: 9px;
	color: #fff;
	background-color: var(--theme-main);
	border-radius: 7px;
	line-height: 14px;
	text-align: center;
	position: absolute;
	top: 0px;
	left: 20px;
}

.container {
	background-color: rgb(255, 255, 255, 0.6);
	padding: 10px;
	border-radius: 20px;
}

.container .collapse-button {
	position: absolute;
}

.container .collapse-button a {
	position: relative;
	left: 670px;
	font-size: 11px;
}

.row.bold span {
	font-weight: bold;
}

.row.update {
	margin-bottom: 5px;
}

.row .col {
	display: inline-block;
	margin-right: 22px;
}

.row .col-1 {
	width: 100%;
}
.row .col-2 {
	width: 50%;
}
.row .col-3 {
	width: 33%;
}

.row .col-4 {
	width: 24.5%;
}

.row .col span {
	display: inline-block;
	min-width: 120px;
	margin-top: 5px;
	margin-bottom: 5px;
}

.row .col select,
.row .col input[type="text"] {
	width: 180px;
}

.orgPlanContainer {
	display: inline-block;
}

.hide {
	display: none;
}

#panelBase h1.lightTheme {
	margin-top: 2rem;
}

#panelBase h1.darkTheme {
	color: black;
	text-shadow: none;
	font-weight: bold;
	margin-top: 2rem;
}

/* -- quantity box -- */

.quantity {
	display: inline-block;
}

.quantity .input-text.qty {
	width: 35px;
	height: 38px;
	padding: 0 5px;
	text-align: center;
	background-color: #fff;
	border: 1px solid #efefef;
	-moz-appearance: textfield;
}

.quantity.buttons_added {
	text-align: left;
	position: relative;
	white-space: nowrap;
	background-color: #fff;
	max-height: 38px;
	border: solid 1px #aaa;
}

.quantity.buttons_added input {
	display: inline-block;
	margin: 0;
	/*vertical-align: top;*/
	box-shadow: none;
}

.quantity.buttons_added .minus,
.quantity.buttons_added .plus {
	padding: 7px 10px 8px;
	height: 38px;
	background-color: #ffffff;
	border: 1px solid #efefef;
	cursor: pointer;
	max-width: 28px;
	color: #000;
	border-radius: 0px !important;
}

.quantity.buttons_added .minus {
	border-right: 0;
}

.quantity.buttons_added .plus {
	border-left: 0;
}

.quantity.buttons_added .minus:hover,
.quantity.buttons_added .plus:hover {
	background: var(--indigo-10);
}

.quantity input::-webkit-outer-spin-button,
.quantity input::-webkit-inner-spin-button {
	-webkit-appearance: none;
	-moz-appearance: none;
	margin: 0;
}

.quantity.buttons_added .minus:focus,
.quantity.buttons_added .plus:focus {
	outline: none;
}

.multiple-value-container {
	padding: 0 5px 5px 5px;
	background: white;
	box-sizing: border-box;
	display: flex;
	flex: 1;
	border: 1px solid #ccc;
	float: left;
	position: relative;
	min-height: 1px;
	height: auto;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.multiple-value-container.disabled {
	background: none;
}

.multiple-value-container span.all-values {
	float: left;
	border: 1px solid #ccc;
	margin: 5px 5px 0 0;
	padding-left: 5px;
	padding-right: 5px;
	background: #f5f5f5;
	border-radius: 5px;
}

.multiple-value-container.disabled span.all-values {
	background: #c7c7c7;
}

.multiple-value-container span.all-values .value {
	background: #f5f5f5 !important;
	border: 0px;
	margin-bottom: 0px;
	height: auto;
	margin-top: 3px;
	display: block;
	float: left;
}

.multiple-value-container span.cancel-value {
	border: 1px solid #ccc;
	width: 18px;
	display: block;
	float: right;
	text-align: center;
	border-radius: 49%;
	height: 16px;
	line-height: 15px;
	cursor: pointer;
	margin: 4px 0 4px 5px;
	padding-bottom: 4px;
	float: right;
}

.multiple-value-container.disabled span.cancel-value {
	display: none;
}

.multiple-value-container .input {
	min-width: 80px;
	border: 0 !important;
	margin-top: 3px;
	border-color: white;
	word-break: break-all;
}

.multiple-value-container .dynamic-input {
	display: inline-block;
	margin: 0px;
}

.multiple-value-container .input.editing {
	height: auto;
	padding: 0px;
	white-space: nowrap;
	text-overflow: ellipsis;
	max-width: 350px;
	display: block;
	overflow: hidden;
}

.multiple-value-container .input.editing:focus {
	white-space: normal !important;
}

.multiple-value-container .input.emailAddress,
.multiple-value-container .input.smsNumber {
	flex: 1;
	margin: 10px 0 10px 5px;
	width: 409px;
}

.multiple-value-container .input.valueItem {
	flex: 1;
	margin: 10px 0 10px 5px;
}

.multiple-value-container.disabled .input.valueItem {
	cursor: default;
}

.multiple-value-container .input:focus {
	outline: none;
}

.autoexport-multivalue-container {
	display: inline-flex !important;
	align-items: center;
	gap: 10px;
	margin: 0 10px 10px 0;
	padding: 7px 7px 7px 10px;
	background-color: transparent;
	border: none;
}

.autoexport-multivalue-container .heading {
	width: 26%;
}

.font-icon-container {
	color: var(--theme-main) !important;
}

.help-link i {
	margin-top: 6px;
	margin-right: 6px;
	font-size: 18px;
}

.whats-new {
	margin: 6px 4px 0 4px;
}

.whats-new i {
	margin-top: 6px;
	font-size: 18px;
}

.version .revision-history,
.version .web,
.version .mobile {
	color: var(--theme-main) !important;
	text-decoration: underline;
}

#spnExpiryDate {
	transition: font-weight 0.4s ease-in-out;
}
#spnExpiryDate.be-bold {
	font-weight: 900;
}

.web {
	display: inline-block;
}

.mobile {
	display: none;
}

@media only screen and (max-device-width: 768px) {
	.web {
		display: none !important;
	}

	.mobile {
		display: inline-block !important;
	}
}

.notice {
	background-color: rgb(30, 30, 30, 0.7);
	padding: 20px;
	margin-top: 20px;
	color: white;
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
}

/*Organisation Plan Dialog */
#OrgPlanForm .busy,
#ProjectLicensingForm .busy {
	text-align: center;
}

.orgPlan table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 5px;
	table-layout: fixed;
}

.orgPlan table th,
.orgPlan table td {
	text-align: right;
}

.orgPlan table th.left,
.orgPlan table td.left {
	text-align: left;
}

.orgPlan table td.bold {
	font-weight: bold;
}

.orgPlan td:nth-child(1),
.orgPlan th:nth-child(1) {
	width: 105px;
}
.orgPlan td:nth-child(1) span {
	word-wrap: break-word;
}

.orgPlan td:nth-child(2),
.orgPlan th:nth-child(2) {
	width: 48px;
}

.orgPlan td:nth-child(3),
.orgPlan th:nth-child(3) {
	width: 171px;
}

.orgPlan td:nth-child(4),
.orgPlan th:nth-child(4) {
	width: 130px;
}

.orgPlan .row.buttons {
	text-align: right;
	margin-top: 15px;
}

.orgPlan input[type="button"] {
	padding: 4px 6px 6px 6px;
	margin-bottom: 5px;
	color: white;
	border: none;
	cursor: pointer;
	width: 180px;
	border-radius: 5px;
	opacity: 0.8;
}

.orgPlan input[type="button"]:hover {
	opacity: 1;
}

.orgPlan input[type="button"].secondary {
	background-color: #bababa;
}

.orgPlan input[type="button"].primary {
	background-color: var(--theme-main);
}

.orgPlan input[type="button"].primary.disabled {
	background-color: #aaa;
	cursor: default;
}

#OrgPlanForm,
#ProjectLicensingForm {
	font-size: 0.85em;
	margin: 20px;
	margin-bottom: 0px;
}

#OrgPlanForm .plan,
#ProjectLicensingForm .plan {
	width: 100%;
}

#OrgPlanForm .row .col,
#ProjectLicensingForm .row .col {
	margin-right: 10px;
	margin-bottom: 2px;
	display: block;
}

.orgPlan .row .col .label {
	margin-bottom: 0px;
	font-weight: 500;
}
.orgPlan .row .col.inline .label {
	min-width: 220px;
}
.orgPlan .row .col.inline .label,
.orgPlan .row .col.inline select {
	display: inline-block;
}

.orgPlan.readonly .col {
	margin-right: 15px;
}

.orgPlan.readonly .five-col-grid-row {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}

.orgPlan.readonly select {
	width: 120px;
}

#OrgPlanForm .error p,
#OrgPlanForm p.error,
#ProjectLicensingForm .error p,
#ProjectLicensingForm p.error,
p.error {
	color: red;
}

#OrgPlanForm .quote,
#ProjectLicensingForm .quote {
	min-width: 480px;
}

#OrgPlanForm .note,
#ProjectLicensingForm .note {
	display: block;
	font-size: 14px;
	color: #aaa;
	font-style: italic;
}

#OrgPlanForm .col .col,
#ProjectLicensingForm .col .col {
	display: inline-block;
}

.notice a {
	color: powderblue;
}

.noticeAdmin #noticeMessage {
	width: 100%;
	min-height: 200px;
	min-width: 100%;
	font-family: "Courier New";
	font-size: 14px;
	line-height: 1.4;
}

.noticeAdmin .label {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 1.1em;
	color: #737373;
}

.noticeAdmin .section {
	margin: 0 0 50px 0;
}

.noticeAdmin .previewContainer {
	padding: 40px;
	background: url("/Content/backgroundCloud.jpg") no-repeat 50% 60% local;
	border-radius: 9px;
	text-align: center;
}

.noticeAdmin .saveButton {
	margin-left: 0;
	font-size: 1em;
}

.inlinePanel
{
	--background-color: var(--notification-info-background-color);
	--accent-color: var(--support-info);
	--border-size: 1px;
	--left-border-size: 2px;
	width: 100%;
	margin: 5px;
	padding: .9375rem;
	min-height: var(--spacing-09);
	background: var(--background-color, var(--notification-info-background-color));
	color: var(--text-primary);
	box-sizing: border-box;
	border: var(--border-size) solid var(--accent-color, var(--support-info));
	border-left: var(--left-border-size) solid var(--accent-color, var(--support-info));
}

.inlinePanel.info
{
	--background-color: var(--notification-info-background-color);
	--accent-color: var(--support-info);
}

.inlinePanel.error
{
	--background-color: var(--notification-error-background-color);
	--accent-color: var(--support-error);
}

.inlinePanel.warning
{
	--background-color: var(--notification-warning-background-color);
	--accent-color: var(--support-warning);
}

.inlinePanel.success
{
	--background-color: var(--notification-success-background-color);
	--accent-color: var(--support-success);
}

.alertFinder .searchForm {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	margin: 32px 0 16px 0;
}

.alertFinder .searchForm .section:not(:first-child) {
	margin-left: 16px;
}

.alertFinder .searchForm .searchFiller {
	flex-grow: 1;
}

.alertFinder .label {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 1.1em;
	color: #737373;
}

.alertFinder .actionButton {
	margin-left: 0;
	font-size: 1em;
}

.alertFinder .delete {
	background-color: red;
}

.alertFinder th.type{
	width: 250px;
}

.alertFinder #noResults {
	text-align: center;
	color: #737373;
	padding-top: 10px;
	padding-bottom: 10px;
}

.alertFinder .actionList {
	display: flex;
	flex-direction: row;
	justify-content: flex-end;
	margin: 16px 0 32px 0;
}

.moduleSearch .searchForm {
	display: flex;
	flex-direction: row;
	gap: 10px;
	align-items: center;
	margin: 32px 0 16px 0;
}

.moduleSearch .searchForm .section:not(:first-child) {
	margin-left: 16px;
}

.moduleSearch .searchForm .searchFiller {
	flex-grow: 1;
}

.moduleSearch .label {
	margin-bottom: 10px;
	font-weight: bold;
	font-size: 1.1em;
	color: #737373;
}

.moduleSearch .actionButton {
	margin-left: 0;
	font-size: 1em;
}

.moduleSearch th.monitor{
	width: 250px;
}
.moduleSearch th.parentOrg{
	width: 250px;
}
.moduleSearch th.parentProj{
	width: 250px;
}
.moduleSearch th.name{
	width: 150px;
}

#OrgPlanForm .banner,
#ProjectLicensingForm .banner {
	border: solid 1px var(--theme-main);
	background-color: #ebf4fa;
	color: var(--theme-main);
	border-radius: 8px;
	padding: 10px;
	margin-bottom: 10px;
}

#OrgPlanForm .banner div,
#ProjectLicensingForm .banner div {
	display: inline-block;
	vertical-align: top;
}

#OrgPlanForm .banner div div,
#ProjectLicensingForm .banner div div {
	display: block;
	font-size: 14px;
}

#OrgPlanForm .banner div:first-child,
#ProjectLicensingForm .banner div:first-child {
	font-size: 16px;
	font-weight: bold;
}

#OrgPlanForm .banner div i,
#ProjectLicensingForm .banner div i {
	margin: 6px;
	font-size: 30px;
}

#OrgPlanForm .change-text,
#ProjectLicensingForm .change-text {
	color: green;
	margin-left: 15px;
	font-size: 15px;
}

#OrgPlanForm .change-text.negative,
#ProjectLicensingForm .change-text.negative {
	color: red;
}

#OrgPlanForm .orgPlan .col.current-license,
#ProjectLicensingForm .orgPlan .col.current-license {
	text-align: center;
	margin-left: 100px;
}

.notice {
	background-color: rgb(30, 30, 30, 0.7);
	padding: 20px;
	margin-top: 20px;
	color: white;
	max-width: 740px;
	margin-left: auto;
	margin-right: auto;
}

.warning {
	color: #8a6d3b;
	background-color: #fcf8e3;
	border: solid 1px #faebcc;
	border-radius: 7px;
	padding: 5px;
	padding-left: 10px;
	padding-right: 10px;
}

.new-monloc-no-instrument-message {
	color: var(--theme-main);
	padding: 15px;
	/* box-shadow: 0 1px 8px rgb(0 0 0 / 20%) !important;  TODO Check this, as it break the bundler*/
	align-items: center;
	margin: 0 auto;
	width: 350px;
	height: 100px;
	border-radius: 5px;
	margin-top: 50px;
}

.info-icon-container {
	text-align: center;
	margin-bottom: 5px;
}

.new-monloc-no-instrument-message .fa-info-circle {
	font-size: 30px;
}

.content .dateRange {
	border-top: solid 1px var(--theme-main);
	margin-top: 5px;
	padding-top: 5px;
}

.content .dateRange label,
.content .dateRange input {
	display: block;
	margin-bottom: 5px;
}

.content .dateRange label {
	line-height: 44px;
	padding-left: 10px;
	background-color: transparent;
	color: var(--theme-main);
}

.content .dateRange label.selected {
	background-color: var(--theme-main);
	color: #fff;
}

.content .dateRange input[type="text"] {
	font-size: 12px;
	width: 150px;
}

.exceeded-licence-count-alert {
	margin-bottom: 10px;
	padding-left: 10px;
	border: 1px solid red;
	color: red;
	font-weight: 500;
	font-size: 14px;
}

.exceeded-licence-count-alert.readonly {
	background: white;
}

#ddlUnlicensableMonitorStatus {
	margin-top: 5px;
}

#makeMonitorUnlicensable {
	width: 30%;
	margin-top: 10px;
	border: 0;
	color: white;
	cursor: pointer;
}

.contributionGraphContainerFlex {
	width: 50%;
	display: flex;
	flex-direction: column;
}
.contributionGraphContainerFlex .contributionGraphContainer {
	width: 100%;
	height: 352px;
}

.contributionMonitoringLocationGraphContainer {
	width: 50%;
}

.contributionTableContainer {
	width: 33%;
}

#contributionButtons {
	margin-top: 10px;
	margin-bottom: 10px;
}

.contributionFlex {
	padding-top: 5px;
	padding-bottom: 5px;
	display: flex;
}

.contributionTileContent {
	height: 300px;
	width: 100%;
}

.contributionBigUiContent {
	text-align: center;
	width: 90%;
	border-radius: 15px;
	border: 4px solid var(--theme-main);
	height: 120px;
	padding-top: 0.8em;
}
.contributionBigUiContent.contributionBigUiLeft {
	margin: 20px 0 0 24px;
}
.contributionBigUiContent.contributionBigUiRight {
	margin: 20px 0 0 0;
}
.contributionBigUiContent.contributionBigUiCentre {
	margin: 20px 12px 0 12px;
}

.contributionBigUiFlex {
	display: flex;
}

.contributionBigUiFlexColumn {
	width: 100%;
	height: 100%;
}

.contributionBigUiContentTitle {
	font-size: 1em;
}

.contributionBigUiContentMeasurement {
	font-size: 1.6em;
	font-weight: bold;
}

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

.mergeDataPopup.row {
	margin-bottom: 10px;
}

.mergeDataPopup.btn-container.row {
	text-align: center;
	margin-bottom: 0;
}

#btnConfirm_MergeData,
#btn_MergeData,
#btnDone_MergeData,
#btnOK {
	width: 25%;
	height: 35px;
	font-size: 15px;
	text-align: center;
	color: #fff;
	border: 0;
	cursor: pointer;
}

.fa-spinner {
	margin-left: 5px;
	font-size: 15px;
}

input[type="button"]:disabled,
button:disabled {
	cursor: not-allowed !important;
	opacity: 0.5 !important;
}

ul.contribution-nav {
	width: 100%;
	list-style: none;
	margin: 0.8em 0;
	font-size: 1.1em;
	padding: 0;
	background: var(--indigo-10);
}

.contribution-nav li {
	display: inline-block;
	height: 100%;
	margin: 0;
}

.contribution-nav li a {
	height: 100%;
	display: inline-block;
}

.contribution-nav li label {
	height: 100%;
	display: inline-block;
	color: var(--theme-main);
	padding: 0.75em 0.8em;
	margin: 0;
}

.contribution-nav li label:hover {
	color: white;
	background: var(--greyscale-60);
}

.contribution-nav li label.active {
	color: white;
	background: var(--greyscale-60);
}

.license-monitor-warning-content {
	text-align: center;
	width: 100%;
	color: white;
	background: rgb(0, 0, 0, 0.8);
	height: 50px;
	margin-top: -50px;
	display: flex;
	justify-content: center;
	align-items: center;
}

a.license-monitor-warning-redirect:link {
	color: var(--theme-main);
	margin-left: 4px;
	margin-right: 4px;
}

.device-capabilities-notice {
	text-align: center;
	width: 100%;
	color: white;
	background: rgb(30, 30, 30, 0.8);
}

.device-capabilities-checkbox {
	pointer-events: none;
}

.device-capabilities-dropdown {
	padding-bottom: 2px;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

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

.contribution-live-button {
	padding: 14px 20px;
	margin: 0 10px 10px 0;
	color: white;
	border: none;
	cursor: pointer;
	vertical-align: middle;
}

.contribution-live-button.changed {
	background-color: #f5822b;
}

.contributionGraphLegend {
	display: inline-block;
	color: #666;
	background-color: #ccc;
	padding: 1px 10px 4px 10px;
}

.contributionGraphLegend div {
	display: inline-block;
	width: 15px;
	height: 15px;
}

.contributionGraphLegend span {
	display: inline-block;
}

.contributionGraphLegend #initialAveragingLegend {
	background-color: rgb(184, 233, 250);
}

.contributionGraphLegend #rollingAvgLegend {
	background-color: rgb(225, 242, 206);
}

.contributionGraphLegend #recoveryRollingAvgLegend {
	background-color: rgb(254, 184, 184);
}

.contributionGraphLegend #stoppedLegend {
	background-color: rgb(254, 254, 254);
}

.contributionGraphLegend #windSpeedRawLegend {
	background-color: var(--theme-main80);
}

.contributionGraphLegend #windSpeedAverageLegend {
	background-color: rgb(49, 154, 99);
}

.min-w-9 {
	min-width: 9em;
}

.min-w-1px {
	min-width: 1px;
}

.width-100-perc {
	width: 100%;
}

.rangerInsightsFlex {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
}

#rangerInsightsGraph {
	min-width: 400px;
	flex: 1;
}

#rangerInsightsExposureSummary {
	/*This is not a joke, it's the actual margin needed*/
	margin-bottom: 69px;
}

/* Grid Template Columns where the first column fills up any remaining space*/
.grid-template-columns-grow-auto {
	grid-template-columns: 1fr auto;
}

/* Grid Template Columns where the last column fills up any remaining space*/
.grid-template-rows-auto-grow {
	grid-template-rows: auto 1fr;
}

.grid-c-1 {
	grid-column: 1;
}

.grid-r-1 {
	grid-row: 1;
}

.grid-c-1 {
	grid-column: 1;
}

.grid-c-2 {
	grid-column: 2;
}

#windDirection {
	left: 0;
	top: 0;
	position: absolute;
	z-index: 1000;
	opacity: 0.5;
	background: black;
	width: 80px;
	text-align: center;
	color: white;
	font-weight: bold;
	font-size: 30px;
}

#windDirection #windSourceSelect {
	font-size: 20px;
}

#windDirection .cardinal-direction-container {
	padding-top: 5px;
}

#windDirection .speed-container {
	margin: -14px -12px 0 -2px;
}

#windDirection .speed-container .direction {
	float: left;
	width: 20%;
}

#windDirection .speed-container .speed {
	text-align: left;
	width: 75%;
	float: right;
	margin-top: -5px;
}

.wind-speed {
	font-size: 12px;
	margin-left: 5px;
}

#windDirection .wind-direction-icon {
	width: 20px;
	height: 20px;
	-webkit-transform: rotate(0deg);
	-ms-transform: rotate(0deg);
	transform: rotate(0deg);
	color: white;
	margin: 0 2px !important;
}

#dataSetBarContainer {
	margin-top: 30px;
}

.ranger-slider-container {
	width: 100%;
	display: inline-flex;
	padding-right: 20px;
	margin-bottom: 35px;
}

.ranger-slider-container .set-name {
	text-align: center;
	border: 0px;
	width: 82px;
	padding-right: 12px;
	margin-top: -5px;
	outline-width: 0px !important;
}

.ranger-slider-container .ui-slider {
	width: 95%;
	height: 0.4em;
	background: #ccc;
	border-radius: 10px;
}

.ui-slider-handle.sliding {
	box-shadow: 0px 0px 0px 5px #d5e6f0;
}

.ranger-slider-container .ui-slider-handle {
	width: 1em !important;
	height: 1em !important;
}

.ranger-slider-container .ui-state-focus {
	outline-width: 0px !important;
}

.ranger-slider-container .ui-slider .ui-widget-header {
	background: #becef5;
	height: 100%;
	position: absolute;
}

.ranger-slider-container .start,
.ranger-slider-container .end {
	border-radius: 50%;
	background: #2d84b4;
	top: -0.4em;
}

.ranger-slider-container .bar-label {
	color: white;
	background: #2d84b4;
	margin-left: -55px;
	min-width: 134px !important;
	position: absolute;
	margin-top: -30px;
	border: 0px;
	border-radius: 5px;
	padding: 0 4px 2px 4px;
}

.ranger-slider-container .end .bar-label {
	margin-left: -110px !important;
}

.new-barset {
	margin-top: 10px;
}

.new-barset i {
	margin-left: 26px;
}

.statistics-date-container {
	height: 1px;
}

.statistics-date-container td {
	height: inherit;
}

.statistics-date-container td table {
	height: 100%;
}

.border-left-width-1 {
	border-left-width: 1px !important;
}

.border-width-0 {
	border: 0px !important;
}

#btnAddDataSetBar {
	border: 0px;
	background: transparent;
}

img.icon-hint {
	width: 12px;
	height: 12px;
}

.yearly-plan-container {
	padding-top: 15px;
}

.yearly-plan-container .section-line {
	width: 50%;
	margin: 0 auto;
	border-top: 1px solid black;
}

.yearly-plan-container .heading {
	margin: 15px 0 15px 0;
}

.monthly-plan-container {
	padding: 15px 0 10px 0;
}

.monthly-plan-container .section-line {
	width: 50%;
	margin: 0 auto;
	border-top: 1px solid black;
}

.monthly-plan-container .heading {
	margin: 15px 0 15px 0;
}

.monthly-plan-container .apply-monthly-sub-container {
	margin: 15px 0 10px 0;
	display: inline;
}

.plan-summary-section-line {
	width: 50%;
	margin: 0 auto;
	border-top: 1px solid black;
}

.contribution-notice {
	text-align: center;
	width: 100%;
	color: white;
	background: rgb(30, 30, 30, 0.8);
}

.dvRemoveScheduledChanges {
	border: 1px solid #eaeaea;
	padding: 8px;
	margin-top: 8px;
}

.scheduleChangesButtons button {
	widows: 70px;
}

.scheduleChangesButtons {
	padding-top: 8px;
}

.project-licensing-container .controls {
	max-height: 350px;
	overflow-y: auto;
	padding-left: 10px;
	border: 1px solid #eaeaea;
}

.project-licensing-container .controls .controlItem {
	min-width: 190px;
}

.project-licensing-container .project-dd-container {
	display: block;
	width: 100%;
}

#projectLicenseButtons {
	position: absolute;
	bottom: 0;
	right: 0;
	margin: 20px;
}

#sms-limit-errors {
	color: red;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
	h1 {
		font-size: 1.5em !important;
		line-height: 1em;
		margin-top: 20px;
	}

	h1.spaced {
		margin-bottom: 20px;
	}

	h2 {
		font-size: 1.2em !important;
		margin: 0 0 10px 0;
	}

	#header {
		padding: 0 5px;
		height: 48px;
	}

	#header .logo {
		height: 36px;
	}

	#header .wideOnly {
		display: none;
	}

	#header .dropdown {
		margin-top: 0;
	}

	#header #title {
		display: inline;
		vertical-align: top;
		font-size: 1.2em;
		padding-left: 10px;
	}

	#panelMenu .menuItem {
		width: 130px;
		font-size: 1.1em;
		padding: 5px;
		margin: 0 3px 3px 3px;
		border: solid 3px white;
	}

	#panelMenu .menuItem table td {
		height: 75px;
	}

	#panelMenu .arrows {
		width: 6px;
	}

	#panelMenu .selectItem {
		width: 114px;
		height: 55px;
		display: table-cell;
		vertical-align: middle;
	}

	#panelMenu .selectItem img {
		height: 20px;
	}

	#backImg {
		width: 36px;
	}

	#dialogBoxContent {
		font-size: 1em;
		overflow: scroll;
		-webkit-overflow-scrolling: touch;
		border: 10px solid rgb(64, 64, 64);
		border: 10px solid rgb(220, 220, 220, 0.3);
	}

	#searchBox {
		width: 250px;
	}

	.padded {
		padding: 10px;
	}

	.configureContent {
		min-width: 250px;
		min-height: 250px;
		padding: 10px;
	}

	.configureContent th {
		font-size: 0.8em;
	}

	.configureContent td {
		font-size: 1em;
		height: 30px;
	}

	.configureContent input[type="text"] {
		width: 241px;
	}

	.configureContent select {
		width: 247px;
	}

	.configureContent input[type="checkbox"] {
		width: 20px;
		height: 20px;
	}
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width: 320px) {
}