/* DO SOMETHING ABOUT THESE COLORS */
/* Misc */
li.autocomplete-result-client a {
	color: #0000ff; /*blue;*/
}

li.autocomplete-result-building a {
	color: #1e90ff; /*dodgerblue;*/
}

li.autocomplete-result-inspector a {
	color: #00008B; /*darkblue;*/
}

/* ++
    Common classes
-- */

/* FONTS */
:root {
	--nice-font: 'Roboto Condensed', Arial;
	--font-family: 'Roboto Condensed', Arial;
}

/* BASE COLORS  */
/* See also: UserInterface.js for graph colors */
:root {
	--dark: #404040;
	--medium: #7f7f7f;
	--light: #a0aec1;
	--very-light: #dfe4ea;
	--text: #000000;
	--accent: #EF6732;
	--accent-light: #fef5f2;
	--body: #ffffff;
	--inverse: #ffffff;
	--disabled: #c0c0c0;
	--readonly-background: #f0f0f0;
	--border: #c0c0c0;
	--readonly-border: #c0c0c0;
	--readonly-text: #808080;
	--inactive-text: var(--readonly-text);
	--error-dark: #990000;
	--error-medium: #c00000;
	--error-light: #ffd0d0;
	--mandatory: #c00000;
	--validation-error-border: 1px solid var(--error-medium);
	--validation-error-background: var(--error-light);
	--alert-danger: #f44336;
	--alert-success: #4CAF50;
	--alert-info: #2196F3;
	--alert-warning: #ff9800;
	--alert-default: #f44336;
	--compliant-entity: rgb(0, 176, 80);
	--non-compliant-entity: rgb(192, 0, 0);
	--defect: #ff0000;
	--open-issue: #cd0328;
	--compliance-issue: rgb(255,153,102);
	--registered-user: #00c000;
}


/* ELEMENTS */
:root {
    /* BANNER begin */
    --banner-color: var(--dark);
    --hello-color: var(--inverse);
    /* BANNER end */
    /* BUTTON begin */
    --button-background-color: var(--inverse);
    --button-text-color: var(--dark);
    --button-border-color: var(--dark);
    --button-hover-background-color: var(--dark);
    --button-hover-text-color: var(--inverse);
    --button-hover-border-color: var(--dark);
    --button-disabled-background-color: var(--inverse);
    --button-disabled-border-color: var(--disabled);
    --button-disabled-text-color: var(--disabled);
    /* BUTTON end */
    /* SCROLLVIEW begin */
    --scrollview-header-background-color: var(--medium);
    --scrollview-header-foreground-color: var(--inverse);
    --scrollview-item-hover-color: var(--light);
    --scrollview-border-color: var(--light);
    /* SCROLLVIEW end */
    /* TABLE begin */
    --table-header-background-color: var(--medium) --table-header-foreground-color: var(--inverse);
    /* TABLE end */
    /* DIALOG begin */
    --dialog-header-color: var(--medium);
    --dialog-background-color: var(--inverse);
    --dialog-title-text: var(--inverse);
    --dialog-error: var(--error-dark);
    --prompt-title-text-color: var(--medium);
    --prompt-body-text-color: var(--dark);
    /* DIALOG end */
    /* MENU begin */
    --menu-background-color: var(--medium);
    --menu-selected-color: var(--dark);
    /* MENU end */
    /* TOGGLESWITCH begin */
    --switch-selected: var(--dark);
    --switch-readonly: var(--disabled);
    /* TOGGLESWITCH end*/
    --input-border-color: var(--light);
    /* DASHBOARD begin */
    --dashboard-background: var(--very-light);
    --dashboard-widget-background: var(--inverse);
    --dashboard-widget-foreground: var(--medium);
    --dashboard-text-hover: var(--accent);
    --dashboard-text-color: var(--text);
    --dashboard-legend-border-color: var(--dark);
    --dashboard-nodata-color: var(--medium);
    /* DASHBOARD end */
    /* TASK STATUS begin */
    --task-color-current: #4A82BD;
    --task-color-current-white: #ffffff; /* Not sure why we need two current colors - consider dropping the blue one */
    --task-color-follow-up: #ff6a00;
    --task-color-overdue: #F00;
    --task-color-overdue-lt14: #F00;
    --task-color-overdue-gt14: #f00;
    --task-color-scheduled: #00cc00;
    --task-color-approaching: rgb(143,170,220);
    /* TASK STATUS end */
    --action-color: var(--accent);
    --action-link-color: var(--dark);
    --action-color-hover: var(--dark);
    --info-section-background-color: var(--accent);
    --info-section-border-color: var(--accent);
    --info-section-font-color: var(--text);
    --timeline-dark: var(--text);
    --timline-accent: #ff0000;
    --timeline-medium: var(--very-light);
    --general-success: var(--alert-success);
    --general-warning: var(--alert-warning);
    --general-error: var(--alert-danger);
    --annual-report-valid: var(--alert-success);
    --annual-report-expired: var(--task-color-overdue);
}

* {
    font-size: 10pt;
    font-family: Arial;
}

i.no-select, span.no-select {
	-webkit-touch-callout: none;
	-webkit-user-select: none;
	-khtml-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-tap-highlight-color: transparent;
}

@media all and (max-aspect-ratio: 13/9) {
	.landscape-mode {
		display: none;
	}
}

@media all and (min-aspect-ratio: 13/9) {
	.portrait-mode {
		display: none;
	}
}

div.portrait-heading {
	line-height: 30px;
	margin-bottom: 3px;
}

	div.portrait-heading * {
		font-size: 140%;
		vertical-align: middle;
	}

	div.portrait-heading i {
		font-size: 140%;
		margin-right: 8px;
		margin-bottom: 2px;
	}

table.mobile-details {
	border-collapse: collapse;
	border: 1px solid var(--medium);
	table-layout: fixed;
	width: 100%;
}

	table.mobile-details th, table.mobile-details td {
		border: 1px solid var(--medium);
		margin: 0px;
		padding: 5px;
	}

	table.mobile-details td {
		word-wrap: break-word;
	}

	table.mobile-details th {
		text-align: left;
		background-color: var(--medium);
		color: var(--inverse);
		width: 30%;
	}

div.tab-subheading {
	line-height:45px;
}

	div.tab-subheading span {
		font-family: 'roboto', Arial;
		font-size: 180%;
	}

	div.tab-subheading i {
		font-size:180%;
		margin-right:8px;
	}

div.tab-subheading * {
	vertical-align:middle;
}

legend {
	padding: 1px 5px 1px 5px;
	border: 1px solid var(--light);
	color: var(--text);
	margin-left: -10px;
}

fieldset {
	padding: 10px 25px 12px 25px;
	border: 1px solid var(--light);
}

img.icon {
	cursor: pointer;
}

/* Focus */
textarea:focus, input:focus, select:focus {
	outline: none;
}

button:focus, a:focus {
	outline: none;
}
option {
	outline:none;
	border:none;
}


/* Validation */
.validation-error {
    border: var(--validation-error-border);
    background-color: var(--validation-error-background);
}


/* Inputs */
.field-input {
	padding: 6px;
	border: 1px solid var(--input-border-color);
	margin-bottom: 4px;
	margin-left: 0px;
	resize: none;
}

input.clickable, td.clickable {
	cursor:pointer;
}

textarea {
	resize: none;
	margin-bottom: 4px;
}

span.field-checkbox {
	display: inline-block;
	margin-top: 5px;
	margin-bottom: 10px;
	margin-left: -4px;
}

span.field-checkbox input {
	margin-left: 5px;
	transform: scale(1.3);
	border-radius: 0;
}

.field-checkbox-list {
	border: 1px solid var(--input-border-color);
	padding-left: 5px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

.field-list-box {
	border: 1px solid var(--input-border-color);
	padding-left: 5px;
	padding-top: 5px;
	padding-right: 20px;
	padding-bottom: 5px;
	margin-bottom: 5px;
}

input.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

.field-date {
	padding: 7px;
	border: 1px solid var(--input-border-color);
	margin-bottom: 4px;
	margin-left: 0px;
	width: 100px;
}

input.datepicker2-readonly {
	padding: 6px;
	border: 1px solid var(--input-border-color);
	margin-bottom: 4px;
	margin-left: 0px;
	width: 120px;
}

input[type="date"] {
	padding-left: 3px;
	padding-top:5px;
	padding-bottom:5px;
	margin-bottom: 4px;
}


.field-select {
	padding: 5px;
	margin-bottom: 3px;
	margin-left: 0px;
	border: 1px solid var(--input-border-color);
}

.field-html {
	border: 1px solid var(--input-border-color);
	margin-left: 150px;
	padding: 5px;
	margin-top: 2px;
	background-color: var(--inverse);
}

.field-image {
	border: 1px solid var(--input-border-color);
}

.read-only {
	background-color: var(--readonly-background);
	border: 1px solid var(--readonly-border);
}

a.chosen-single {
	margin-bottom: 0px;
}

div.chosen-container {
	margin-top: -2px;
}

/* Labels */
.field-label, .field-label-75, .field-label-100, .field-label-125, .field-label-150, .field-label-175, .field-label-200, .field-label-inline-50, .field-label-inline-75, .field-label-inline-100 {
	margin-top: 7px;
	text-align: left;
}

.field-label {
	display: block;
	float: left;
}

.field-label-75 {
	width: 75px;
	display: block;
	float: left;
}

.field-label-100 {
	width: 100px;
	display: block;
	float: left;
}

.field-label-125 {
	width: 125px;
	display: block;
	float: left;
}

.field-label-150 {
	width: 150px;
	display: block;
	float: left;
}

.field-label-175 {
	width: 175px;
	display: block;
	float: left;
}

.field-label-200 {
	width: 200px;
	display: block;
	float: left;
}

.field-label-inline {
	margin-left: 20px;
	display: inline-block;
}

.field-label-inline-50 {
	width: 50px;
	margin-left: 20px;
	display: inline-block;
}

.field-label-inline-75 {
	width: 75px;
	margin-left: 20px;
	display: inline-block;
}

.field-label-inline-100 {
	width: 100px;
	margin-left: 20px;
	display: inline-block;
}


/* Buttons */
button.action-button, input.action-button, button.html5-qrcode-element {
	border: 1px solid var(--button-border-color);
	border-radius: 4px;
	background-color: var(--button-background-color);
	color: var(--button-text-color);
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 12px;
	padding-right: 12px;
	cursor: pointer;
	text-transform: uppercase;
	font-family: 'Roboto Condensed', Arial;
	font-size: 110%;
	font-weight: bold;
}

	button.action-button:enabled:hover, input.action-button:enabled:hover {
		background-color: var(--button-hover-background-color);
		color: var(--button-hover-text-color);
	}

	button.action-button:disabled {
		background-color: var(--button-disabled-background-color);
		color: var(--button-disabled-text-color);
		cursor: default;
		border: 1px solid var(--button-disabled-border-color);
	}


button.inline-button {
	border: 1px solid var(--action-color);
	border-radius: 3px;
	background-color: var(--action-color);
	color: var(--inverse);
	padding-top: 4px;
	padding-bottom: 4px;
	padding-left: 6px;
	padding-right: 6px;
	cursor: pointer;
	font-family: 'Roboto Condensed', Arial;
	font-size: 110%;
}


a.icon-button {
	background: var(--light);
	box-shadow: inset 0 -1px 1px rgba(0,0,0,0.5);
	display: inline-block;
	padding-left: 7px;
	padding-right: 7px;
	padding-top: 2px;
	padding-bottom: 2px;
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 5px;
}

	a.icon-button:hover {
	}

	a.icon-button:active {
		background: var(--light);
		box-shadow: 0 -1px 1px rgba(0,0,0,0.5);
	}



button.icon-button {
	background: var(--button-background-color);
	color: var(--button-text-color);
	padding-top: 7px;
	padding-bottom: 7px;
	padding-left: 10px;
	padding-right: 10px;
	border: 1px solid var(--button-border-color);
	border-radius:3px;
	vertical-align: middle;
	margin-right: 5px;
	margin-bottom: 5px;
	cursor: pointer;
}

button.icon-button:hover {
	background: var(--button-hover-background-color);
	color: var(--button-hover-text-color);
	border: 1px solid var(--button-hover-border-color);
}


div.button-row a {
	margin-right: 5px;
}

button.grid-button {
	background-color: var(--action-color);
	color: var(--inverse);
	border: none;
	padding: 7px;
	cursor: pointer;
}

	button.grid-button:hover {
		background-color: var(--action-color-hover);
	}


/* Drop Panel */
div.collapsible-panels h2 {
	width: 290px;
	margin: 0;
	padding: 5px 0;
}

div.collapsible-panels i {
	font-size: 140%;
	margin-left:10px;
}

div.collapsible-panels h2 * {
	vertical-align:middle;
}

	div.collapsible-panels h2.active a, div.collapsible-panels h2 a {
		background-color: var(--scrollview-header-background-color);
		padding-top: 8px;
		padding-bottom: 9px;
		padding-right: 50px;
		padding-left: 5px;
		text-decoration: none;
		font-size: 120%;
		font-weight: normal;
		border-top: 1px solid var(--light);
		border-left: 1px solid var(--light);
		border-right: 1px solid var(--light);
		border-bottom:none;
		color: var(--scrollview-header-foreground-color);
	}

	div.collapsible-panels h2.active a::after {
		content: "";
	}

		div.collapsible-panels h2 a::after {
			content: "";
		}

div.collapsible-panels div.container {
	width: 650px;
	position: absolute;
	background-color: var(--inverse);
	border:1px solid var(--light);
	z-index: 9;
	padding: 10px;
}


/* Prompts */
@media all and (max-aspect-ratio: 13/9) {
	/* Portrait */
	img.question-mark {
		width: 64px;
	}
}

/* Info Section */
div.info-section {
	display: table;
	border-radius: 5px;
	border: 1px solid var(--info-section-border-color);
}

	div.info-section div.row {
		display: table-row;
		background-color: var(--info-section-background-color);
		color: var(--inverse);
	}

		div.info-section div.row div.icon {
			display: table-cell;
			vertical-align: middle;
			padding: 10px;
		}

			div.info-section div.row div.icon i {
				font-size: 240%;
			}

		div.info-section div.row div.message {
			display: table-cell;
			vertical-align: middle;
			font-weight: normal;
			padding-right: 10px;
		}

/* Toggle Switches */
label.switch, label.switch-read-only {
	position: relative;
	display: inline-block;
	width: calc(60px * 3 / 4);
	height: calc(34px * 3 / 4);
	margin-bottom: 5px;
	margin-top: 1px;
}


	label.switch input, label.switch-read-only input {
		opacity: 0;
		width: 0;
		height: 0;
	}

	label.switch span.slider, label.switch-read-only span.slider {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: var(--light);
		-webkit-transition: .4s;
		transition: .4s;
	}

	label.switch span.slider {
		cursor: pointer;
	}

		label.switch span.slider:before, label.switch-read-only span.slider:before {
			position: absolute;
			content: "";
			height: calc(26px * 3 / 4);
			width: calc(26px * 3 / 4);
			left: calc(4px * 3 / 4);
			bottom: calc(4px * 3 / 4);
			background-color: var(--inverse);
			-webkit-transition: .4s;
			transition: .4s;
		}


	label.switch input:checked + .slider {
		background-color: var(--switch-selected);
	}

	label.switch-read-only input:checked + .slider {
		background-color: var(--switch-readonly);
	}

/*	label.switch input:focus + .slider {
		box-shadow: 0 0 1px var(--action-color);
	}*/

	label.switch input:checked + .slider:before, label.switch-read-only input:checked + .slider:before {
		-webkit-transform: translateX(calc(26px * 3 / 4));
		-ms-transform: translateX(calc(26px * 3 / 4));
		transform: translateX(calc(26px * 3 / 4));
	}

	label.switch span.slider.round, label.switch-read-only span.slider.round {
		border-radius: calc(34px * 3 / 4);
	}


		label.switch span.slider.round:before, label.switch-read-only span.slider.round:before {
			border-radius: 50%;
		}

		}


/* Search bar */
div.search-bar2 *, div.search-bar1 {
	box-sizing: border-box;
}

	div.search-bar2 input[type=text], div.search-bar1 input[type=text] {
		padding: 10px;
		border: 1px solid var(--input-border-color);
		float: left;
	}

	div.search-bar1 input[type=text] {
		width: calc(100% - 70px);
	}

div.search-bar2 input[type=text] {
	width: calc(100% - 90px);
}

div.search-bar2 button i {
	font-size: 100%;
}

div.search-bar2 button, div.search-bar1 button {
	float: left;
	width: 45px;
	padding: 10px;
	background: var(--button-background);
	color: var(--button-color);
	border: 1px solid var(--button-border-color);
	border-left: none; /* Prevent double borders */
	cursor: pointer;
}

	div.search-bar2 button:hover, div.search-bar1 button:hover {
		background: var(--button-hover-background);
		color: var(--button-hover-color);
		border: 1px solid var(--button-border-color);
	}

/* Clear floats */
div.search-bar2::after, div.search-bar1::after {
	content: "";
	clear: both;
	display: table;
}


/* Alerts */
@media all and (min-aspect-ratio: 13/9) {
	div.alert span {
		font-size: 140%;
	}
}

div.alert {
	padding: 20px;
	color: var(--inverse);
	margin-bottom: 15px;
	position: fixed;
	top: 0px;
	width: 100%;
	animation: fadein-alert 0.5s;
	z-index: 10000;
}

	/* The close button */
	div.alert .closebtn {
		margin-left: 15px;
		color: var(--inverse);
		font-weight: bold;
		font-size: 22px;
		line-height: 20px;
		cursor: pointer;
		transition: 0.3s;
		position: absolute;
		left: 100%;
		margin-left: -70px;
	}

		/* When moving the mouse over the close button */
		div.alert .closebtn:hover {
			color: var(--dark);
		}

@-webkit-keyframes fadein-alert {
	from {
		top: -30px;
	}

	to {
		top: 0px;
		opacity: 1;
	}
}

@keyframes fadein-alert {
	from {
		top: -30px;
	}

	to {
		top: 0px;
		opacity: 1;
	}
}

/* Radio toolbars */
div.radio-toolbar input[type="radio"] {
	display: none;
}

div.radio-toolbar label {
	display: inline-block;
	background-color: var(--light);
	font-family: Arial;
	border: 1px solid var(--medium);
	border-radius: 4px;
	margin-right: 2px;
}



div.radio-toolbar input[type="radio"]:checked + label {
	background-color: var(--action-color);
	border-color: var(--action-color-hover);
	color: var(--inverse);
}

div.radio-toolbar label:hover {
	background-color: var(--action-color);
	cursor: pointer;
}



/* Photo Album */
div.photo-album {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

	div.photo-album div.placeholder {
		border: 1px solid var(--medium);
		text-align: center;
		cursor: pointer;
		padding-top: 10px;
		padding-bottom: 10px;
		padding-left: 10px;
		padding-right: 10px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

		div.photo-album div.placeholder.dropover[is-empty="1"] {
			background-color:#c0c0c0;
			border:1px solid var(--action-color);
		}


		div.photo-album div.placeholder i {
			font-size: 30pt;
			color: var(--medium);
		}

/* Document List */
div.document-list table.documents {
	border-collapse: collapse;
	border: 1px solid var(--border);
	width: 99%;
}

	div.document-list table.documents td {
		border: 1px solid var(--border);
		padding-left: 5px;
		padding-right: 5px;
	}

	div.document-list table.documents tr td:nth-child(1) {
		width: 30px;
		font-size: 120%;
		text-align: center;
	}

	div.document-list table.documents tr td:nth-child(3) {
		width: 100px;
		text-align: center;
	}


div.document-list div.placeholder {
	border: 1px solid var(--border);
	text-align: center;
	cursor: pointer;
	padding-top: 10px;
	padding-bottom: 10px;
	margin-right: 5px;
	margin-bottom: 5px;
	width: 85px;
}

	div.document-list div.placeholder i {
		font-size: 30pt;
		color: var(--medium);
	}

	div.document-list div.placeholder.dropover {
		background-color: var(--light);
	}


/* Extended List Box */
div.extended-listbox {
	border: 1px solid var(--medium);
	cursor: default;
	user-select: none;
	padding:3px;
}

	div.extended-listbox.read-only {
		background-color: var(--readonly-background );
		color: var(--readonly-text );
	}

	div.extended-listbox div {
		margin-bottom: 0px;
		margin-top: 0px;
		padding-top: 1px;
		padding-bottom: 1px;
	}

		div.extended-listbox:not(.read-only) div.selected {
			background: var(--dark);
			color: var(--inverse);
		}

	div.extended-listbox.read-only div.selected {
		background: var(--readonly-text );
		color: var(--readonly-background );
	}



/* Recovery Codes */
table.recovery-codes {
	border: 1px solid var(--text);
	border-radius:4px;
}

table.recovery-codes td {
	font-family: Consolas, Arial;
	padding-left: 8px;
	padding-right: 8px;
	padding-top: 2px;
	padding-bottom: 2px;
}

/* Phone */
@media all and (max-width: 1023px) {
	table.recovery-codes td {
		font-size: 120%;
	}
}
@media all and (min-width: 1024px) {
	table.recovery-codes td {
		font-size: 140%;
	}
}

/* Misc */

.inactive-entity {
	color:var(--light);
}