a {
	color: var(--primary-light);
}

	a:hover {
		color: var(--primary-base);
	}

	a.nav-link {
		color: var(--primary-base);
	}

		a.nav-link:not(.active) {
			color: var(--primary-light);
		}

			a.nav-link:not(.active):hover {
				color: var(--primary-base);
			}

		a.nav-link.active {
			font-weight: bolder;
			color: #444;
		}

/* Modal login */
.modal-login {
	width: 350px;
}

	.modal-login .modal-content {
		padding: 20px;
		border-radius: 5px;
		border: none;
	}

	.modal-login .modal-header {
		border-bottom: none;
		position: relative;
		justify-content: center;
	}

	.modal-login .close {
		position: absolute;
		top: -10px;
		right: -10px;
	}

	.modal-login h4 {
		color: #636363;
		text-align: center;
		font-size: 26px;
		margin-top: 0;
	}

	.modal-login .modal-content {
		color: #999;
		border-radius: 1px;
		margin-bottom: 15px;
		background: #fff;
		border: 1px solid #f3f3f3;
		box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3);
		padding: 25px;
	}

	.modal-login .form-group {
		margin-bottom: 20px;
	}

	.modal-login label {
		font-weight: normal;
		font-size: 13px;
	}

	.modal-login .form-control {
		min-height: 38px;
		padding-left: 5px;
		box-shadow: none !important;
		border-width: 0 0 1px 0;
		border-radius: 0;
	}

		.modal-login .form-control:focus {
			border-color: #ccc;
		}

	.modal-login .input-group-prepend {
		max-width: 42px;
		text-align: center;
		background: none;
		border-width: 0 0 1px 0;
		padding: 8px 8px 5px 5px;
		border-radius: 0;
	}

	.modal-login .btn {
		font-size: 16px;
		font-weight: bold;
		border-radius: 3px;
		border: none;
	}

		.modal-login .btn:hover, .modal-login .btn:focus {
			background: var(--primary-light);
		}

	.modal-login .hint-text {
		text-align: center;
		padding-top: 5px;
		font-size: 13px;
	}

	.modal-login .modal-footer {
		color: #999;
		border-color: #dee4e7;
		text-align: center;
		font-size: 13px;
		justify-content: center;
	}

	.modal-login a {
		color: #fff;
		text-decoration: underline;
	}

		.modal-login a:hover {
			text-decoration: none;
		}

	.modal-login a {
		color: var(--primary-base);
		text-decoration: none;
	}

		.modal-login a:hover {
			text-decoration: underline;
		}

	.modal-login .fa {
		font-size: 21px;
	}

	.modal-login .info-icon {
		font-size: 3em;
		color: rgba(0, 0, 0, 0.68);
		color: var(--primary-trans);
		display: table-cell;
		padding: 4px;
	}

	.modal-login .info-text {
		display: table-cell;
		vertical-align: top;
		padding: 4px;
	}

.modal-login-outer {
	text-align: center;
	width: 100%;
	display: table-cell;
	vertical-align: middle;
	overflow: hidden;
}

.modal-login-inner {
	background-color: rgba(53, 168, 53, 0.61);
	background-color: var(--primary-trans);
	padding: 10px;
	margin: auto auto;
	text-align: left;
	align-content: center;
	border-radius: 10px;
	display: inline-block;
}

#loginTabs li.nav-item {
	width: 50%;
	text-align: center;
}

#loginTabs .nav-item a:hover {
	text-decoration: none;
}

#loginTabs li.nav-item img.cal-logo {
	width: 24px;
	max-height: 24px;
}

.sso-button {
	cursor: pointer;
	display: flex;
	column-gap: 0.5rem;
}

	.sso-button img {
		position: relative;
	}

.webforms-checkbox {
	display: flex;
	flex-direction: row;
	column-gap: 0.5em;
}

	.webforms-checkbox input {
		height: 1.5em;
		width: 1em;
	}

	.webforms-checkbox label {
		font-size: 1em;
	}

.sso-button img.cal-logo {
	width: 32px;
	max-height: 32px;
}

.pin-code {
	padding: 0;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

	.pin-code input {
		border: none;
		text-align: center;
		width: 32px;
		height: 32px;
		font-size: 32px;
		background-color: #F3F3F3;
		margin-right: 5px;
	}

	.pin-code input {
		border: 1px solid var(--primary-light);
		border-radius: 0.2em;
	}

		.pin-code input.filled {
			border: 2px solid var(--success);
		}

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

img.qr-totp {
	max-width: 100%;
}

.screen-code {
	cursor: pointer;
	border: 1px solid var(--primary-dark);
	color: var(--primary-dark);
	border-radius: 0.2rem;
	text-align: center;
	min-width: 6rem;
}

	.screen-code:hover {
		border-color: var(--primary-light);
		color: var(--primary-light);
	}

.btn-language + .dropdown-menu {
	min-width: 0;
}
/* Fix overflow isssue */
.mdl-close-button > button {
	overflow: hidden;
}

/* Move down content because we have a fixed navbar that is 50px tall */
body {
	padding-bottom: 20px;
}

/* Wrapping element */
/* Set some basic padding to keep content from hitting the edges */
.body-content {
	padding-left: 15px;
	padding-right: 15px;
}

.badge-primary, .btn-primary, .btn-primary:not(:disabled):not(.disabled):hover, .btn-primary:visited {
	background-color: var(--primary-base);
	border-color: var(--primary-base);
}

	.btn-primary:hover, .btn-primary:not(:disabled):not(.disabled):active,
	.btn-primary:not(:disabled):not(.disabled).active,
	.show > .btn-primary.dropdown-toggle {
		background-color: var(--primary-dark);
		transition: background-color 0.5s ease;
	}

	.btn-primary.disabled, .btn-primary:disabled {
		color: #fff;
		background-color: var(--primary-light);
		border-color: var(--primary-light);
	}

.btn-outline-primary {
	color: var(--primary-base);
	border-color: var(--primary-base);
}

	.btn-outline-primary.active {
		color: white;
		opacity: 0.8;
		transition: background-color 0.5s ease;
	}

	.btn-outline-primary:hover {
		color: white;
		background-color: var(--primary-dark);
		transition: background-color 0.5s ease;
	}

	.btn-outline-primary:not(:disabled):not(.disabled):active, .btn-outline-primary:not(:disabled):not(.disabled).active, .show > .btn-outline-primary.dropdown-toggle {
		color: #fff;
		background-color: var(--primary-dark);
		border-color: var(--primary-dark);
	}

	.btn-outline-primary:disabled, .btn-outline-primary.disabled {
		color: var(--primary-light);
	}

.btn-primary.focus, .btn-primary:focus {
	color: #fff;
	background-color: var(--primary-light);
	border-color: var(--primary-light);
	box-shadow: 0 0 0 0.2rem rgba(38,143,255,.5);
}

.ui-widget-content {
	border: 1px solid #404040;
	background: #121212 url(images/ui-bg_gloss-wave_16_121212_500x100.png) 50% top repeat-x;
	color: #eeeeee;
}

.h3, h3 {
	font-size: 1.75rem;
}

.card-header h3 .badge {
	padding-bottom: 10px;
}

.embed-responsive-iframe {
	height: 95vh;
}

.modal-page .modal-content {
	height: calc(100vh - 5rem);
}

.modal-content .iframe-body {
	/*max-height: 85vh;*/
	/*overflow-x: auto;*/
	max-height: calc(95vh - 80px);
}

/* Responsive: Portrait tablets and up */
@media screen and (min-width: 768px) {
	.jumbotron {
		margin-top: 30px;
	}

	.body-content {
		padding: 0;
	}

	.popover {
		max-width: 480px;
	}

	.modal-std {
		max-width: 680px;
	}
}

.label {
	vertical-align: text-top;
	line-height: 30px;
	font-weight: bold;
}

/* For creating signs inside input fields */
.left-inner-addon {
	position: relative;
}

	.left-inner-addon input {
		padding-left: 22px;
	}

	.left-inner-addon span {
		position: absolute;
		padding: 7px 12px;
		pointer-events: none;
	}

.right-inner-addon {
	position: relative;
}

	.right-inner-addon input {
		padding-right: 20px;
	}

	.right-inner-addon span {
		position: absolute;
		right: 0px;
		padding: 7px 12px;
		pointer-events: none;
	}

option:disabled {
	background-color: #ddd;
}

.desc {
	color: #888;
	font-size: smaller;
}

	.desc b {
		color: #5a5a5a;
		font-weight: bolder;
	}

.main {
	float: left;
	padding: 10px;
}

.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-moz-user-select: none; /* Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}
/* Make SPAN act like anchor, for better control */
span.lnk {
	color: #095b06;
	text-decoration: none;
	cursor: pointer
}

	span.lnk:hover {
		color: #15b713;
		text-decoration: underline;
	}

/* No-padding or spacing table */
table.nopad {
	border-spacing: 0
}

	table.nopad td {
		border-collapse: collapse;
		border-spacing: 0;
		padding: 0;
	}
/* Better handling of TAB */
textarea, pre {
	-moz-tab-size: 4;
	-o-tab-size: 4;
	tab-size: 4;
	font-family: Courier New;
}

@media screen {
	.themelogo {
		background: var(--company-logo) no-repeat;
		background-repeat: no-repeat;
		background-size: contain;
		background-position: center top;
		height: 80px;
		width: 300px;
		position: relative;
	}


		.themelogo.nav {
			height: 55px;
			width: 200px;
		}

	.site-type {
		display: inline-block;
		position: absolute;
		right: 0;
		font-style: italic;
		font-weight: 600;
		color: var(--danger);
	}

	.demo-label {
		position: absolute;
		right: 0;
		bottom: -1.5rem;
		font-size: small;
	}

	.terms-label {
		display: inline;
	}

	.cookie-alert {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999;
		background-color: var(--alist-evenh);
		border-color: var(--primary-light);
		color: var(--primary-dark);
	}

	.dropdown-profiles {
		width: 100%;
		min-width: 250px;
	}

		.dropdown-profiles .dropdown-menu {
			width: auto;
		}

	.item-rsl {
		font-size: x-large;
		text-decoration: underline;
		color: var(--primary-light);
	}

		.item-rsl:before {
			content: "\f0e8";
			font-family: 'Font Awesome 5 Free';
			font-weight: 700;
			padding-right: 0.5em;
		}

	.item-org {
		padding-left: 2.5rem;
	}

		.item-org:before {
			content: "\f275";
			font-family: 'Font Awesome 5 Free';
			font-weight: 700;
			padding-right: 0.5em;
		}

		.item-org.demo:after {
			content: "\f004";
			font-family: 'Font Awesome 5 Free';
			color: red;
			font-weight: 700;
			position: absolute;
			left: 1em;
			text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
		}

		.item-org.demo-exp:after {
			content: "\f7a9";
			font-family: 'Font Awesome 5 Free';
			color: red;
			font-weight: 700;
			position: absolute;
			left: 1em;
			text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
		}

		.item-org.paused-inactive:after, .item-org.paused-longterm:after {
			content: "\f28b";
			font-family: 'Font Awesome 5 Free';
			color: #bb9500;
			font-weight: 500;
			position: absolute;
			left: 1em;
		}

		.item-org.standard:after {
			content: "\f005";
			font-family: 'Font Awesome 5 Free';
			font-size: 0.9em;
			color: sandybrown;
			position: absolute;
			left: 1em;
			text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
		}

		.item-org.pro:after {
			content: "\f005";
			font-family: 'Font Awesome 5 Free';
			font-size: 1.1em;
			font-weight: 700;
			color: silver;
			position: absolute;
			left: 0.7em;
			text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
		}

		.item-org.enterprise:after {
			content: "\f005";
			font-family: 'Font Awesome 5 Free';
			color: gold;
			font-weight: 700;
			font-size: 1.3em;
			position: absolute;
			left: 0.5em;
			top: 0.1em;
			text-shadow: 0px 0px 1px rgba(0, 0, 0, 1);
		}

	.dropdown-profiles:not(.show) .dropdown-toggle {
	}

	.dd-selected-container {
		display: inline-block;
		text-align: left;
		line-height: 1em;
		max-width: 250px;
		text-overflow: ellipsis;
		overflow: hidden;
		margin-top: -1px;
	}

	.dropdown-toggle.dbl-line .dd-selected-container {
		margin-bottom: -10px;
	}

	.dd-selected-container small {
		line-height: 0.5em;
		padding-bottom: 0;
	}

	.dd-inline-search {
		color: var(--primary-base);
		display: none;
	}

	.dropdown-toggle:not(.dbl-line) .dd-inline-search {
		margin: -3px 0;
	}

	.dropdown-profiles.show .dd-selected-container {
		display: none;
	}

	.dropdown-profiles.show .dd-inline-search {
		display: inline-block;
	}

	.dropdown-profiles .spin-wait {
		padding-left: 10px;
		display: none;
	}

	.dropdown-profiles .dropdown-toggle:disabled .spin-wait {
		display: inline-block;
	}

	.dropdown .page-selector {
		width: 100%;
		display: inline-block;
		padding: 0 15px 3px 15px;
	}

	.dropdown .profile-contents {
		padding-top: 2px;
	}

	.page-selector .left {
		float: left;
		width: 100px;
	}

	.page-selector .right {
		float: right;
		width: 100px;
	}

		.page-selector .right > button, .page-selector .left > button {
			padding: 0.1em;
			width: 100%;
		}

	.dropdown .page-selector .current {
		font-size: .875rem;
		line-height: 1.5;
		border-radius: .2rem;
		border: 1px solid #6c757d;
		color: #6c757d;
		margin: 0 auto;
		width: 100px;
		text-align: center;
		padding: 0.1em;
		margin-top: 0.1em;
	}

	.alist .badge {
		min-width: 22px;
		position: relative;
		margin-left: 5px;
		border-radius: 10rem;
		padding: 2px 4px;
		border: 1px solid black;
		transition: transform .2s ease-in-out;
		cursor: pointer;
		overflow-x: clip;
		text-overflow: ellipsis;
	}

	.clients.alist .badge {
		text-overflow: revert;
		font-size: 0.7em;
	}

	.alist .badge:hover {
		left: -1px;
		transform: scale(1.2);
	}

	.ext-tags {
		display: inline-table;
		flex-wrap: wrap;
	}

		.ext-tags .badge {
			margin: 2px 4px;
			flex: 0 0 auto;
		}

	i.fa-add:after {
		content: "\f067";
		font-family: Font Awesome\ 5 Free;
		font-weight: 700;
		font-size: 70%;
		position: relative;
		top: 0.5em;
	}

	.sync-btn-status {
		position: absolute;
	}

	.sync-success {
		color: white;
		background-color: var(--success);
	}

	.sync-warning {
		color: black;
		background-color: var(--warning);
	}

	.sync-danger {
		color: white;
		background-color: var(--danger);
	}

	.btn-sync-state {
		display: none;
		margin-left: 5px;
	}

		.btn-sync-state .dropdown-menu td, .btn-sync-state .dropdown-menu th {
			white-space: nowrap;
			padding: 2px 6px;
		}

			.btn-sync-state .dropdown-menu td:not(:first-child), .btn-sync-state .dropdown-menu th:not(:first-child) {
				text-align: center;
			}

			.btn-sync-state .dropdown-menu td:first-child {
				cursor: pointer;
				position: relative;
			}

				.btn-sync-state .dropdown-menu td:first-child i.fa-sync.fa-spin {
					position: absolute;
					left: 1.2rem;
					bottom: 0;
					font-size: 70%;
				}

			.btn-sync-state .dropdown-menu td:first-of-type:hover {
				text-decoration: underline;
				text-decoration-color: var(--primary-light);
			}

		.btn-sync-state > .btn-success.sync-main i.sync-btn-status:before {
			content: "\f00c";
		}

		.btn-sync-state > .btn-warning.sync-main i.sync-btn-status:before {
			content: "\f071";
		}

		.btn-sync-state > .btn-danger.sync-main i.sync-btn-status:before {
			content: "\f0e7";
		}

		.btn-sync-state > .btn.sync-main i.sync-btn-status:before {
			font-family: Font Awesome\ 5 Free;
			font-weight: 700;
			font-size: 70%;
			position: relative;
			top: 0.5em;
			left: -0.2em;
		}

	.sync-state-new {
		margin-left: 5px;
	}

		.sync-state-new > i:after {
			content: "\f067";
			font-family: Font Awesome\ 5 Free;
			font-weight: 700;
			font-size: 70%;
			position: relative;
			top: 0.5em;
			left: -0.2em;
		}

	img.cal-logo {
		max-height: 20px;
		padding-right: 5px;
	}

		img.cal-logo.disabled {
			filter: gray; /* IE6-9 */
			-webkit-filter: grayscale(1); /* Google Chrome, Safari 6+ & Opera 15+ */
			filter: grayscale(1); /* Microsoft Edge and Firefox 35+ */
			background: transparent;
		}

	/* * * * * * * * * * * * * *
Big auto-list
 * * * * * * * * * * * * * */

	.alist {
		border-bottom: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		border-collapse: collapse;
	}

		.alist tr.theader td, .alist tr.theader th {
			color: black;
			height: 24px;
			border: 0;
			padding: 2px;
			border-top: 1px solid black;
			border-bottom: 1px solid black;
			background-color: var(--alist-odd);
		}

		.alist td {
			padding: 3px !important;
			border-bottom: black 1px solid;
		}

		.alist div.dt, .log-table div.dt {
			font-size: x-small;
			font-family: Arial;
			position: absolute;
			line-height: 1.4em;
		}

		.alist div.tf, .log-table div.tf {
			float: right;
			font-family: Tahoma, Arial;
			color: #fff;
			padding: 1px 4px;
			display: inline-flex;
			border: 1px solid var(--primary-trans);
			background-color: var(--primary-trans);
			border-radius: 0.25rem;
		}

		/* Minimal accomodation for IE8 and below */
		.alist tr {
			background: #cae7cb;
		}
			/** RED ROWS **/
			/*  Define the background color for all the ODD background rows  */
			.alist tr.del:nth-child(odd) {
				background: #ee8f95;
				text-decoration-color: #827d7d;
				-moz-text-decoration-color: #827d7d;
				text-decoration: line-through;
			}

				.alist tr.del:nth-child(odd):hover {
					background: #f59e9e;
					text-decoration: none;
				}
			/* EVEN */
			.alist tr.del:nth-child(even) {
				background: #fc7a7a;
				text-decoration-color: #827d7d;
				-moz-text-decoration-color: #827d7d;
				text-decoration: line-through;
			}

				.alist tr.del:nth-child(even):hover {
					background: #fe8888;
					text-decoration: none;
				}

			/** STD ROWS **/
			/*  Define the background color for all the ODD background rows  */
			.alist tr:nth-child(odd) {
				background: var(--alist-odd);
			}

				.alist tr:nth-child(odd):hover {
					background: var(--alist-oddh);
				}
			/* EVEN */
			.alist tr:nth-child(even) {
				background: var(--alist-even);
			}

				.alist tr:nth-child(even):hover {
					background: var(--alist-evenh);
				}

			.alist tr.disabled td {
				color: #808080;
			}

			.alist tr.disabled:nth-child(odd) {
				background: #E4E4E4;
				text-decoration-color: #808080;
				-moz-text-decoration-color: #808080;
				text-decoration: line-through;
			}

				.alist tr.disabled:nth-child(odd):hover {
					background: #F6F6F6;
					text-decoration: none;
				}
			/* EVEN */
			.alist tr.disabled:nth-child(even) {
				background: #C2C2C2;
				text-decoration-color: #808080;
				-moz-text-decoration-color: #808080;
				text-decoration: line-through;
			}

				.alist tr.disabled:nth-child(even):hover {
					background: #D3D3D3;
					text-decoration: none;
				}

	.alistfoot {
		background: #cae7cb;
		padding: 7px;
		text-align: center;
		vertical-align: middle;
		min-height: 40px;
		font-style: italic;
		overflow: hidden;
		text-overflow: ellipsis;
		border-bottom: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
	}

		.alistfoot a {
			text-decoration: underline;
		}

	.form-control.list-search {
		float: left;
	}

	input[type="text"]::placeholder {
		font-family: 'Font Awesome 5 Free', sans-serif;
		font-weight: 600;
		font-style: italic;
		color: #999;
	}

	button.tbl-btn {
		background-color: transparent;
		border: 2px solid transparent;
		border-radius: 4px;
		padding: 0 4px 2px 4px;
		margin-top: 0;
		transition: background-color 0.5s ease;
		float: right;
		width: 30px;
	}

	button.tbl-btn-small {
		width: 30px;
	}

		button.tbl-btn-small img {
			width: 20px;
		}

	button.tbl-btn-medium {
		padding-top: 2px;
		width: 42px;
	}

		button.tbl-btn-medium img {
			width: 32px;
		}

	button.tbl-btn img {
		margin: 0;
	}

	button.tbl-btn:hover:enabled {
		border: 2px solid var(--primary-base);
		cursor: pointer;
	}

	button.tbl-btn:active:enabled {
		background-color: var(--primary-base);
	}


	/* When enabled */
	button.tbl-btn img {
		margin: auto;
	}

		button.tbl-btn img.bd {
			display: none;
		}

	button.tbl-btn span.bd {
		display: none;
		margin-left: -2px;
		padding-left: 0;
	}

	button.tbl-btn img.be {
		display: block;
		margin-top: 1px;
		margin-left: -1px;
	}

	table button.tbl-btn span.be {
		display: block;
		margin-left: -2px;
		padding-left: 0;
		height: 21px;
	}
	/* When disabled */
	button.tbl-btn:disabled img.bd
	button.tbl-btn:disabled span.bd {
		display: block;
	}

	button[disabled].tbl-btn img.bd,
	button[disabled].tbl-btn span.bd {
		display: block;
	}

	button.tbl-btn:disabled img.be,
	button.tbl-btn:disabled span.be {
		display: none
	}

	button[disabled].tbl-btn img.be,
	button[disabled].tbl-btn span.be {
		display: none
	}







	/* * * * * * * * * * * * * *
	Big list
 * * * * * * * * * * * * * */
	.list .content {
		padding-left: 20px;
		background-color: #b8edb9
	}

	.list {
		border-bottom: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		border-collapse: collapse;
	}

		.list tr.theader td {
			color: white;
			height: 24px;
			border: 0;
			border-top: 1px solid black;
			border-bottom: 1px solid black;
			padding: 2px;
		}

		.list td {
			padding: 3px;
			border-bottom: #4e95f4 1px solid;
		}

		.list img {
			height: 24px
		}
		/* ODD */
		.list tr.a {
			background: #b8d1f3;
		}

			.list tr.a:hover {
				background: #cfdef2;
			}
		/* EVEN */
		.list tr.b {
			background: #dae5f4;
		}

			.list tr.b:hover {
				background: #e7ecf3;
			}

	/* * * * * * * * * * * * * *
	Small auto-list
 * * * * * * * * * * * * * */
	.aslist {
		border-bottom: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		border-collapse: collapse;
	}

		.aslist tr.theader td {
			color: white;
			height: 16px;
			border: 0;
			padding: 2px;
			border-top: 1px solid black;
			border-bottom: 1px solid black;
		}

		.aslist td {
			padding: 1px 3px 1px 3px;
			border-bottom: #4e95f4 1px solid;
			font-size: smaller
		}

		.aslist img {
			height: 16px
		}
		/* Minimal accomodation for IE8 and below */
		.aslist tr {
			background: #b8d1f3;
		}
			/* ODD */
			.aslist tr:nth-child(odd) {
				background: #b8d1f3;
			}

				.aslist tr:nth-child(odd):hover {
					background: #cfdef2;
				}
			/* EVEN */
			.aslist tr:nth-child(even) {
				background: #dae5f4;
			}

				.aslist tr:nth-child(even):hover {
					background: #e7ecf3;
				}

	/* * * * * * * * * * * * * *
	Notes
 * * * * * * * * * * * * * */
	legend.note {
		padding: 0.2em 0.5em;
		border: 1px solid green;
		color: green;
		font-size: 90%;
		text-align: right;
	}

	fieldset.note {
		border: 1px solid green;
	}

	.note a {
		color: green;
		text-decoration: none;
	}

		.note a:hover {
			color: red;
			text-decoration: none;
		}

		.note a:link {
			color: green;
			text-decoration: underline;
		}

		.note a:visited {
			color: green;
			text-decoration: none;
		}


	/* * * * * * * * * * * * * *
	Image Buttons
 * * * * * * * * * * * * * */
	button.bb {
		text-align: center;
		cursor: default;
		padding: 0;
		margin: 0
	}

		button.bb td {
			font-size: 11px;
			font-family: Calibri;
			text-align: center
		}
		/* When enabled */
		button.bb img {
			margin: auto;
		}

			button.bb img.bd {
				display: none
			}

			button.bb img.be {
				display: block
			}
		/* When disabled */
		button.bb:disabled img.bd {
			display: block
		}

	button[disabled].bb img.bd {
		display: block
	}

	button.bb:disabled img.be {
		display: none
	}

	button[disabled].bb img.be {
		display: none
	}

	.ui-tooltip-content {
		font-family: Arial;
		font-size: 14px;
		font-weight: bold
	}

	div.image-selector {
		border: 1px solid black;
	}

		div.image-selector img {
			position: absolute;
			margin: auto;
			z-index: 0;
			object-fit: scale-down;
		}

		div.image-selector .discard {
			position: relative;
			top: 0;
			margin-right: 3px;
			margin-top: 3px;
			z-index: 10;
			background-color: rgba(0, 0, 0, 0.60);
			color: black;
			display: none;
			padding: 3px 7px;
			float: right;
		}

			div.image-selector .discard:after {
				content: "×";
			}

		div.image-selector:hover .discard.active {
			display: inline-block;
		}

	.inline-edit > .inline-label {
		display: inline-block;
		padding: 2.5px 4px;
		width: 88%;
	}





	.inline-edit .settings,
	.inline-edit .editname {
		display: none;
		border: 1px dotted transparent;
		vertical-align: middle;
		border-radius: .25rem;
		padding: 2px 5px;
		z-index: 99;
	}

	.inline-edit .editname {
		position: absolute;
		right: 0;
	}

	.inline-edit .settings {
		position: absolute;
		left: 100%;
	}

		.inline-edit .settings:before {
			font-family: Font Awesome\ 5 Free;
			font-weight: 700;
			content: "\f013";
		}

	.inline-edit .editname:before {
		font-family: Font Awesome\ 5 Free;
		font-weight: 700;
		content: "\f303";
	}


	.hover-show.inline-edit:not(.editing):hover .settings, .hover-show:hover .inline-edit:not(.editing) .settings,
	.hover-show.inline-edit:not(.editing):hover .editname, .hover-show:hover .inline-edit:not(.editing) .editname {
		display: inline-block;
		/*float:right;*/
		color: var(--primary-base);
		border-color: var(--primary-base);
		background-color: transparent;
		transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
	}

	.hover-show.inline-edit:hover .settings:hover, .hover-show:hover .inline-edit .settings:hover,
	.hover-show.inline-edit:hover .editname:hover, .hover-show:hover .inline-edit .editname:hover {
		cursor: pointer;
		background-color: var(--primary-base);
		color: white;
		transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
	}

		.hover-show.inline-edit:hover .settings:hover:active, .hover-show:hover .inline-edit .settings:hover:active,
		.hover-show.inline-edit:hover .editname:hover:active, .hover-show:hover .inline-edit .editname:hover:active {
			border-color: var(--primary-light);
			background-color: var(--primary-light);
		}



	/*

	.hover-show:hover .inline-label:after {
		font-family: 'Font Awesome 5 Free';
		content: "\f303";
		position: absolute;
		right: 15%;
		border: 1px dotted var(--primary-dark);
		background-color: white;
		margin: -3px;
		padding: 2px;
	}

	*/

	.hover-show:hover .inline-label {
		border: 1px solid var(--primary-dark);
		border-style: dotted;
		margin: -1px;
		background-color: transparent;
		border-color: var(--primary-base);
		transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
	}

	.hover-show:not(.editing):hover .inline-label:after:hover {
		cursor: pointer;
		background-color: var(--primary-base);
		color: white;
		transition: background-color 0.5s ease, border-color 0.5s ease, color 0.5s ease;
	}

	.hover-show .inline-label:after:hover:active {
		border-color: var(--primary-light);
		background-color: var(--primary-light);
	}

	.inline-edit > .input-direct {
		display: none;
		margin-top: -1em;
	}

	.inline-edit.editing > .inline-label {
		display: none;
	}

	.inline-edit.editing > .input-direct {
		display: inline-block;
		width: 90%;
	}

		.inline-edit.editing > .input-direct input {
			-webkit-box-shadow: 1px 1px 12px 3px rgba(0,0,0,0.72);
			-moz-box-shadow: 1px 1px 12px 3px rgba(0,0,0,0.72);
			box-shadow: 1px 1px 12px 3px rgba(0,0,0,0.72);
		}

	/* * * * * * * * * * * * * *
	Color selector
	* * * * * * * * * * * * * */
	/*
 * A colorselector for Twitter Bootstrap which lets you select a color from a predefined set of colors only.
 * https://github.com/flaute/bootstrap-colorselector
 *
 * Copyright (C) 2014 Flaute
 *
 * Licensed under the MIT license
 */
	/* colorselector dropdown */
	.dropdown-colorselector > .dropdown-menu {
		top: 80%;
		left: -7px;
		padding: 4px;
		min-width: 130px;
		max-width: 130px;
	}

		/*
.dropdown-colorselector>.dropdown-menu.pull-right {
  right: -7px;
  left: auto;
}
*/
		.dropdown-colorselector > .dropdown-menu > li {
			display: block;
			float: left;
			width: 20px;
			height: 20px;
			margin: 2px;
		}

			.dropdown-colorselector > .dropdown-menu > li > .color-btn {
				display: block;
				width: 20px;
				height: 20px;
				margin: 0;
				padding: 0;
				border-radius: 0;
				position: relative;
				-webkit-transition: all ease 0.1s;
				-o-transition: all ease 0.1s;
				-moz-transition: all ease 0.1s;
				transition: all ease 0.1s;
			}

				.dropdown-colorselector > .dropdown-menu > li > .color-btn:hover {
					text-decoration: none;
					opacity: 0.8;
					filter: alpha(opacity = 80);
					-webkit-transform: scale(1.08);
					-moz-transform: scale(1.08);
					-o-transform: scale(1.08);
					-ms-transform: scale(1.08);
					transform: scale(1.08);
				}

				.dropdown-colorselector > .dropdown-menu > li > .color-btn.selected:after {
					content: "\f00c";
					font-family: 'Font Awesome 5 Free';
					display: inline-block;
					font-size: 11px;
					font-weight: 900;
					color: #FFF;
					position: absolute;
					left: 0;
					right: 0;
					text-align: center;
					line-height: 20px;
				}

	.btn-colorselector {
		display: inline-block;
		width: 20px;
		height: 20px;
		background-color: #DDD;
		vertical-align: middle;
		border-radius: 0;
	}

	.dropdown-menu.dropdown-caret:before {
		border-bottom: 7px solid #aaa;
		border-bottom: 7px solid rgba(0, 0, 0, 0.2);
		border-left: 7px solid transparent;
		border-right: 7px solid transparent;
		content: "";
		display: inline-block;
		left: 9px;
		position: absolute;
		top: -7px;
	}

	.dropdown-menu.dropdown-caret:after {
		border-bottom: 6px solid #FFFFFF;
		border-left: 6px solid transparent;
		border-right: 6px solid transparent;
		content: "";
		display: inline-block;
		left: 10px;
		position: absolute;
		top: -6px;
	}

	.dropdown-menu img {
		height: 24px
	}

	.dropdown-item:hover {
		background-color: var(--primary-trans);
	}

	.alert-btn {
		display: table-cell;
		margin: 4px;
	}

	.exp-resource {
		font-family: Font Awesome\ 5 Free;
		font-weight: 700;
		padding: 0.25em 0.8em;
		border: 1px solid transparent;
		border-radius: 4px;
		margin-right: 0.2em;
		position: relative;
	}

		.exp-resource:hover {
			border: 1px solid #565656;
		}

		.exp-resource:before {
			position: absolute;
			top: 0.5em;
			left: 0.8em;
			color: #000;
			font-size: smaller;
			content: '\f548';
		}

		.exp-resource:after {
			position: absolute;
			left: 0.1em;
			top: 0em;
			color: #d9cf0c;
			content: '\f071';
			font-size: larger;
		}

	.warning-sign {
		font-family: Font Awesome\ 5 Free;
		font-weight: 700;
		font-style: normal;
		padding: 0.5em 0.8em;
		border: 1px solid transparent;
		border-radius: 4px;
		margin-right: 0.2em;
		position: relative;
		text-shadow: 0px 0px 6px rgba(0, 0, 0, 1);
	}

		.warning-sign:after {
			position: absolute;
			content: '\f071';
			color: var(--warning);
			font-size: larger;
			left: 0.1em;
			top: 0.1em;
		}


	/*
.dropdown-menu.pull-right.dropdown-caret:before {
  left: auto;
  right: 9px;
}

.dropdown-menu.pull-right.dropdown-caret:after {
  left: auto;
  right: 10px;
}
*/

	/* * * * * * * * * * * * */
	/* Active Column Switch  */
	/* * * * * * * * * * * * */
	.material-switch > input[type="checkbox"] {
		display: none !important;
	}

	/* LANE */
	.material-switch > label {
		cursor: pointer;
		height: 0;
		position: relative;
		width: 40px;
	}
		/* LANE */
		.material-switch > label::before {
			background: rgb(0, 0, 0);
			box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
			border-radius: 8px;
			content: '';
			height: 16px;
			margin-top: -2.5px;
			position: absolute;
			opacity: 0.3;
			transition: all 0.4s ease-in-out;
			width: 40px;
		}

		/* TOGGLER */
		.material-switch > label::after {
			background: rgb(255, 255, 255);
			border-radius: 16px;
			box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
			content: '';
			height: 23px;
			left: -4px;
			margin-top: -8px;
			position: absolute;
			top: 2px;
			transition: all 0.3s ease-in-out;
			width: 24px;
		}

	.material-switch > input[type="checkbox"]:checked + label::before {
		background: inherit;
		opacity: 0.5;
	}

	.material-switch > input[type="checkbox"]:checked:not(:disabled) + label::after {
		background: var(--primary-base);
		left: 20px;
	}

	.material-switch > input[type="checkbox"]:checked:not(:disabled) + label:hover {
		background: var(--primary-base);
	}

	.material-switch > input[type="checkbox"]:not(:checked):disabled + label::after {
		background: #ddd;
	}

	.material-switch > input[type="checkbox"]:checked:disabled + label::after {
		background: #888;
		left: 20px;
	}

	/* for use in tables */
	table.alist div.material-switch {
		padding: 6px 4px 0px 3px !important;
	}


	/* * * * * * * * * * * * */
	/* Active Column Switch 2*/
	/* * * * * * * * * * * * */


	.expander-switch {
		position: relative;
		background-color: #6c757d;
		border-color: #6c757d;
		color: #fff;
		border-radius: 0.8rem;
		display: inline-block;
	}

		.expander-switch:hover {
			color: #fff;
			background-color: #5a6268;
			border-color: #545b62;
		}

		.expander-switch input[type=checkbox] {
			display: none;
		}

			.expander-switch input[type=checkbox] + label {
				font-family: 'Font Awesome 5 Free';
				display: inline-block;
				text-align: center;
				padding: 0.2rem 0.5rem;
				margin: 0;
				transition: .3s transform ease-in-out;
				cursor: pointer;
			}


				/* to hide the checkbox itself */
				.expander-switch input[type=checkbox] + label:before {
					content: "\f106";
					vertical-align: top;
				}

			.expander-switch input[type=checkbox]:checked + label {
				-webkit-transform: rotate(-180deg);
				-moz-transform: rotate(-180deg);
				-ms-transform: rotate(-180deg);
				-o-transform: rotate(-180deg);
				transform: rotate(-180deg);
				transform-origin: center;
			}


	/* * * * * * * * * * * * * *
	Quill Editor
	* * * * * * * * * * * * * */

	.ql-editor {
		padding: 0;
		margin: 0;
		max-height: 1200px;
		width: 100%;
	}

	.ql-syntax {
		padding: 0;
		margin: 0;
		min-height: 300px !important;
		width: 100%;
		overflow-x: auto;
		overflow-y: auto;
	}

	.ql-container {
		height: auto !important;
	}

	.ql-editor {
		height: auto !important;
	}

	/* * * * * * * * * * * * * *
	Ace Editor
	* * * * * * * * * * * * * */

	.ace-terminal-theme .ace_marker-layer .ace_selected-word {
		background-color: #711a75;
	}

	.ace_editor {
		border-radius: 5px;
		border: 1px solid #ced4da;
		box-sizing: border-box;
		margin: 1px;
	}

		.ace_editor.ace_focus {
			margin: 1px;
			border-color: #80bdff;
			outline: 0;
			box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
		}

	/* * * * * * * * * * * * * * *
	Time schedule (Opening hours)
	 * * * * * * * * * * * * * * */
	.schedule th {
		width: 12.5%;
		border: 1px solid #cccccc;
		padding: 2px 12px;
		border-bottom: 0;
	}

	.schedule td {
		border: 1px solid #cccccc;
		padding: 6px 6px;
	}

	.schedule th.checked {
		background-color: #d0fec4;
	}

	.schedule td.checked {
		background-color: #d0fec4;
	}

	.schedule input.form-control:not([disabled])[readonly] {
		background-color: white !important;
		opacity: 1;
	}

	/* Customize the label (the container) */
	.chk_container {
		display: block;
		position: relative;
		padding-left: 30px;
		margin-top: 3px;
		margin-bottom: 2px;
		cursor: pointer;
		-webkit-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

		/* Hide the browser's default checkbox */
		.chk_container input {
			position: absolute;
			opacity: 0;
			cursor: pointer;
			height: 0;
			width: 0;
		}

	/* Create a custom checkbox */
	.cmrk {
		position: absolute;
		top: 0;
		left: 0;
		height: 1.4em;
		width: 1.4em;
		background-color: #eee;
	}

	/* On mouse-over, add a grey background color */
	.chk_container:hover input ~ .cmrk {
		background-color: #ccc;
	}

	/* When the checkbox is checked, add a blue background */
	.chk_container input:checked ~ .cmrk {
		background-color: #2196F3;
	}

		.chk_container input:checked ~ .cmrk:hover {
			background-color: #52aef7;
		}

	/* Create the checkmark/indicator (hidden when not checked) */
	.cmrk:after {
		content: "";
		position: absolute;
		display: none;
	}

	/* Show the checkmark when checked */
	.chk_container input:checked ~ .cmrk:after {
		display: block;
	}

	/* Style the checkmark/indicator */
	.chk_container .cmrk:after {
		left: 0.5em;
		top: 0.3em;
		width: 0.4em;
		height: 0.6em;
		border: solid white;
		border-width: 0 3px 3px 0;
		-webkit-transform: rotate(45deg);
		-moz-transform: rotate(45deg);
		-o-transform: rotate(45deg);
		-ms-transform: rotate(45deg);
		transform: rotate(45deg);
	}

	.fixed-top {
		z-index: 200;
	}

	/*
		GIVES THE EFFECT OF A BLUE Info BUTTON
	*/
	.pop-icon.fa-info-circle {
		color: #012ca4;
		font-weight: 900;
	}

	.popover .hint-text {
		margin-top: 0.5rem;
		background-color: var(--alist-odd);
		border-radius: 6px;
		border: 1px solid #888;
		padding: 4px 8px;
		font-size: small;
	}

	.modal-content .hint-text {
		display: none;
	}
	/*
		DUAL LIST BOX
	*/
	.duallistbox .box-item {
		z-index: 1000;
		cursor: move;
		display: none;
	}

		.duallistbox .box-item.selected {
			display: block;
		}

		.duallistbox .box-item .card-header {
			padding: 3px 12px;
		}

		.duallistbox .box-item .fa {
			transition: .3s transform ease-in-out;
		}

		.duallistbox .box-item .collapsed .fa {
			transform: rotate(90deg);
		}

	.duallistbox .ui-draggable-dragging {
		max-width: 300px !important;
	}

	.duallistbox .list-group-item {
		padding: 3px 12px;
		padding-left: 25px;
	}

		.duallistbox .list-group-item.srch-hide {
			display: none;
		}

	.duallistbox li.ui-draggable-dragging {
		display: block;
		z-index: 99999;
	}

	/* * * * * * * * * * * * */
	/*  Sticky edit-buttons  */
	/* * * * * * * * * * * * */
	.edit-buttons {
		display: inline-block;
		position: -webkit-sticky;
		position: sticky;
		padding: 20px 20px 0 20px;
		text-align: right;
		pointer-events: none;
		z-index: 15;
	}

		.edit-buttons button, .edit-buttons input, .edit-buttons select {
			pointer-events: visible;
		}
}
/* * * * * * * * * * * * * * * * */
/*  Sticky edit-buttons adjusted */
/* * * * * * * * * * * * * * * * */

@media only screen {
	.edit-buttons {
		top: 0px;
	}
}

@media only screen and (min-width: 768px) {
	main.py-5 .edit-buttons {
		top: 80px;
	}
}

@media only screen and (max-width: 767.98px) {
	main.py-5 .edit-buttons {
		top: 57px;
	}
}

.booking-label {
	float: right;
	background-color: rgba(0, 0, 0, 0.1);
	padding: 1px;
	border-color: var(--parimary-dark);
	margin-right: 0;
	width: auto !important;
	height: auto !important;
}

.line-deleted {
	background-color: #ffaeae !important;
}

.line-new {
	background-color: #c1fcad !important;
}

	.line-new:disabled {
		background-color: #c7e2be !important;
	}

.line-changed {
	background-color: #fffc7c !important;
}

	.line-changed:disabled {
		background-color: #e6e5a7 !important;
	}

.mat-3switch {
	background: rgb(255, 255, 255);
	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	border-radius: 8px;
	content: '';
	height: 1rem;
	margin-top: -2px;
	position: absolute;
	/*opacity: 0.3;*/
	transition: all 0.4s ease-in-out;
	width: 5rem;
	position: relative;
	border-radius: 0.5rem;
}

	.mat-3switch .toggle {
		background: rgb(255, 255, 255);
		box-shadow: 0 0 5px rgba(0, 0, 0, 0.7);
		border-radius: 16px;
		height: 24px;
		left: 29px;
		margin-top: -6px;
		position: absolute;
		top: 2px;
		transition: all 0.3s ease-in-out;
		width: 24px;
		transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	}

	.mat-3switch.disabled {
		box-shadow: none;
		background-color: #cacaca;
		box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
	}

		.mat-3switch.disabled .toggle {
			background-color: #bababa;
			box-shadow: none;
		}

	.mat-3switch label {
		cursor: pointer;
		width: 28px;
		height: 1rem;
		position: absolute;
		margin: 0;
		padding: 0;
		z-index: 1;
		display: inline-block;
		text-align: center;
		line-height: 1rem;
		text-transform: uppercase;
		font-family: 'Lato', sans-serif;
		font-size: 0.7rem;
		font-weight: bold;
		color: black;
		user-select: none;
		text-align: center;
	}

	.mat-3switch input {
		position: absolute;
		left: 0;
		margin: 0;
		padding: 0;
		opacity: 0;
	}

		/* YES RADIO - CHECKED */
		.mat-3switch input:last-of-type:checked {
			background: rgba(255, 108, 0, 0.6) !important;
		}
			/* YES RADIO - TOGGLE */
			.mat-3switch input:last-of-type:checked ~ .toggle {
				left: 58px;
			}

			.mat-3switch input:last-of-type:checked ~ .toggle {
				background: rgba(42, 176, 42, 0.9) !important;
			}

	.mat-3switch.disabled input:last-of-type:checked ~ .toggle {
		background: rgb(106, 136, 103, 0.9) !important;
	}

	/* NO RADIO - CHECKED */
	.mat-3switch input:first-of-type:checked {
		background: rgba(56, 173, 47, 0.6) !important;
	}
		/* NO RADIO - TOGGLE */
		.mat-3switch input:first-of-type:checked ~ .toggle {
			left: -4px;
		}

		.mat-3switch input:first-of-type:checked ~ .toggle {
			background: rgba(176, 42, 42, 0.9) !important;
		}

	.mat-3switch.disabled input:first-of-type:checked ~ .toggle {
		background: rgb(169, 97, 97, 0.9) !important;
	}

	.mat-3switch input:nth-of-type(2), .mat-3switch label:nth-of-type(2) {
		left: 33.33333%;
	}
	/* YES RADIO/LABEL */
	.mat-3switch input:last-of-type, .mat-3switch label:last-of-type {
		left: 66.66667%;
	}


	.mat-3switch label:nth-of-type(2) {
		-webkit-animation-delay: 2s;
		-o-animation-delay: 2s;
		-moz-animation-delay: 2s;
		animation-delay: 2s;
	}

	.mat-3switch label:last-of-type {
		-webkit-animation-delay: 4s;
		-o-animation-delay: 4s;
		-moz-animation-delay: 4s;
		animation-delay: 4s;
	}
	/*
	Doesn't work - yet
	Also see function workAround3state(swtch) in functions.js

	.mat-3switch:has(input:last-of-type:checked) {
		background: rgb(255, 200, 200);
		transition: all 0.4s ease-in-out;
	}
	.mat-3switch:has(input:first-of-type:checked) {
		background: rgb(200, 255, 200);
		transition: all 0.4s ease-in-out;
	}
*/
	.mat-3switch[value="1"]:hover {
		background: rgba(0, 255, 0, 0.3) !important;
		transition: all 0.4s ease-in-out;
	}

	.mat-3switch[value="0"]:hover {
		background: rgba(255, 0, 0, 0.3) !important;
		transition: all 0.4s ease-in-out;
	}

.selectpicker > option, simple-select > option {
	font-family: Arial, "Font Awesome 5 Free";
}

a:not([href]):not([tabindex]) {
	color: gray;
}

.btn.locker:after {
	content: "\f023";
	font-family: 'Font Awesome 5 Free';
	display: inline-block;
	font-weight: 900;
	line-height: 20px;
}

.btn.locker:hover:after {
	content: "\f3c1";
	font-family: 'Font Awesome 5 Free';
	display: inline-block;
	font-weight: 900;
	line-height: 20px;
}

.btn.locker.active:after {
	content: "\f3c1";
	font-family: 'Font Awesome 5 Free';
	display: inline-block;
	color: white;
	font-weight: 900;
	line-height: 20px;
}

.form-group input[type=checkbox] {
	display: inline-block;
	max-width: 40px;
}

.form-group label {
	vertical-align: text-bottom;
}

.checkbox-inline {
	display: inline-block;
	/*margin-top: 0.4em;*/
	line-height: 35px;
}

.filters {
	border-radius: 12px !important;
}

	.filters .btn-collapse button.btn.collapsed:before {
		font-family: 'Font Awesome 5 Free';
		content: "\f0fe";
		display: inline-block;
		vertical-align: text-bottom;
		font-weight: 900;
		width: 15px;
	}

	.filters .btn-collapse button.btn:before {
		font-family: 'Font Awesome 5 Free';
		content: "\f146";
		display: inline-block;
		vertical-align: text-bottom;
		font-weight: 900;
		width: 15px;
	}

	.filters .fa {
		transition: .3s transform ease-in-out;
	}

	.filters .d-block {
		vertical-align: baseline;
		width: 40px;
		text-align: center;
		font-size: 1.6em;
	}

	.filters .collapsed .fa {
		transform: rotate(90deg);
	}

.rowdivider {
	border-radius: 14px;
	border: dashed 3px var(--primary-dark);
	margin-bottom: 5px;
}

.bg-warn {
	background-color: #ffff9b;
}

.bg-error {
	background-color: #ff9b9b;
}

/*
	STATS TABLE - Start
*/
.stats-table {
	direction: rtl;
	overflow: auto;
}

	.stats-table .bars {
		direction: ltr;
		display: table-cell;
		position: relative;
		mix-blend-mode: normal;
		width: 100%;
		padding-left: 40px;
		margin-right: 20px;
	}

	.stats-table .ticks {
		position: absolute;
		top: 0;
		font-size: 10px;
		font-family: "fira-sans-2", Verdana, sans-serif;
		width: 100%;
		border-top: 1px dotted #C4C4C4;
		pointer-events: none;
	}

.ticks .tick {
	border-bottom: 1px dotted #C4C4C4;
	border-top: 1px dotted #fff;
	width: 100%;
	pointer-events: none;
}

	.ticks .tick p.p1 {
		position: relative;
		display: inline-block;
		right: 16px;
		top: -0.8em;
		margin: 0 0 0 0.5em;
		pointer-events: none;
	}

	.ticks .tick p.p2 {
		position: relative;
		display: none;
		right: 16px;
		top: -0.8em;
		margin: 0 0 0 0.5em;
		pointer-events: none;
	}

.ref-table {
	display: none;
}

.main-table {
}

.stats-table .stat-table-vert {
	border-collapse: collapse;
	border-right: 1px dotted #C4C4C4;
	position: relative;
	top: 0;
	left: 2.4em;
	margin-right: 2.4em;
}

	.stats-table .stat-table-vert td {
		width: 16px;
	}

.stat-table-vert tr:nth-of-type(1) td span {
	position: absolute;
	top: 15%;
	height: 45%;
	text-align: center;
	color: #fff;
	border-radius: 7px;
	white-space: nowrap;
	display: none;
}

.stat-table-vert tr:nth-of-type(1) td:hover span {
	background-color: var(--primary-trans) !important;
	display: inline-block;
}

.stat-table-vert td span {
	padding-top: 5px;
	font-size: 10px;
	line-height: 15px;
	writing-mode: vertical-rl;
}

.stat-table-vert tr:nth-of-type(2) td {
	padding: 0px;
	border-right: 1px dotted #ccc;
}

.stat-table-vert .bar {
	position: relative;
	background: var(--primary-base);
	pointer-events: none;
}

.ref-table .bar2 {
	position: relative;
	background: var(--primary-light);
	pointer-events: none;
}

.ref-label {
	display: none;
}

.stat-table-vert tr:first-of-type td {
	border-left: 1px solid var(--primary-trans);
	padding: 0;
	vertical-align: bottom;
}

/* STATS TABLE - End */
/* Log Table - Start */
.log-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
}

	.log-table tr.theader td, .log-table tr.theader th {
		color: black;
		height: 20px;
		border: 0;
		padding: 2px;
		border-top: 1px solid black;
		border-bottom: 1px solid black;
		background-color: var(--alist-odd);
	}

	.log-table th {
		padding: 2px 5px;
		font-size: 1.2vw;
	}

	.log-table tr.theader td:first-of-type, .log-table tr.theader th:first-of-type {
		border-left: 1px solid black;
		text-align: center;
	}

	.log-table tr.theader td:last-child, .log-table tr.theader th:last-child {
		border-right: 1px solid black;
	}

	.log-table tr.theader th.t-when {
		width: 12vw;
	}

	.log-table tr.theader th.t-left {
		max-width: 8vw;
	}

	.log-table td.t-left {
		text-align: right;
		padding-right: 3em;
	}

	/** STD ROWS **/
	/*  Define the background color for all the ODD background rows  */
	.log-table tr:nth-child(odd) {
		background: var(--alist-odd);
	}

		.log-table tr:nth-child(odd):hover {
			background: var(--alist-oddh);
		}
	/* EVEN */
	.log-table tr:nth-child(even) {
		background: var(--alist-even);
	}

		.log-table tr:nth-child(even):hover {
			background: var(--alist-evenh);
		}

	.log-table tr td {
		font-family: Courier New, Courier, monospace;
		font-size: 0.9vw;
	}

.log-table-topalign tr td {
	vertical-align: text-top;
}

.log-contents {
	white-space: pre-wrap;
	word-break: break-all;
}

.time-field .dt {
	font-family: Arial;
	position: absolute;
	margin-top: -0.1vh;
}

.time-field div.tf {
	float: right;
	font-family: Tahoma, Arial;
	color: #fff;
	padding: 1px 4px;
	display: inline-flex;
	border: 1px solid var(--primary-trans);
	background-color: var(--primary-trans);
	border-radius: 0.25rem;
	position: relative;
	top: 0.4vh;
}

/* Log Table - End */

/* Screens / Printers Live Status - Start */
/* The Spinner */
.ldr {
	position: absolute;
	/* This centers the element regardless of parent borders/padding */
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	border: 4px solid rgba(128, 128, 128, 0.5);
	border-radius: 50%;
	border-top: 4px solid black;
	padding-left: 0px;
	width: 26px;
	height: 26px;
	-webkit-animation: ldrspin 2s linear infinite;
	animation: ldrspin 1s linear infinite;
	box-sizing: border-box;
	pointer-events: none;
}

button.tbl-btn.tbl-btn-small.stats {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 30px;
	padding: 0;
	margin: 0;
	vertical-align: middle;
	box-sizing: border-box;
	/* REMOVED: border: 2px solid transparent; */
	/* ADDED: Use these instead to allow hover borders to work */
	background-color: transparent;
	background: transparent;
}

	/* The Icon */
	button.tbl-btn.tbl-btn-small.stats i {
		position: absolute;
		/* Centers the icon exactly inside the same space as the spinner */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		margin: auto;
		width: 16px;
		height: 16px;
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

@-webkit-keyframes ldrspin {
	0% {
		-webkit-transform: rotate(0deg);
	}

	100% {
		-webkit-transform: rotate(360deg);
	}
}

.tag-script:before {
	font-weight: 700;
	font-size: initial;
	vertical-align: text-top;
	content: "\f15c";
	font-family: 'Font Awesome 5 Free';
	position: relative;
	top: -2px;
}

.tag-script {
	position: relative;
	vertical-align: inherit;
	font-size: xx-small;
	top: 0;
}

.iptable {
	width: 100%;
}

	.iptable th, .iptable td:nth-child(2) {
		font-weight: bold;
	}

	.iptable td {
		padding: 1px 10px;
	}

.command .dropdown-item:hover {
	text-shadow: 1px 1px 2px var(--primary-dark);
}

.screen-capture {
	width: 100%
}
/* Screens / Printers Live Status - End */

/* Auto-complete Jquery.UI based - Start */
.ui-autocomplete {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 1000;
	display: none;
	float: left;
	min-width: 160px;
	padding: 5px 0;
	margin: 2px 0 0;
	list-style: none;
	font-size: 14px;
	text-align: left;
	background-color: #ffffff;
	border: 1px solid #cccccc;
	border: 1px solid rgba(0, 0, 0, 0.15);
	border-radius: 4px;
	-webkit-box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
	background-clip: padding-box;
}

	.ui-autocomplete > li > div {
		display: block;
		padding: 3px 20px;
		clear: both;
		font-weight: normal;
		line-height: 1.42857143;
		color: #333333;
		white-space: nowrap;
	}

.ui-state-hover,
.ui-state-active,
.ui-state-focus {
	text-decoration: none;
	color: #262626 !important;
	background-color: #f5f5f5 !important;
	background-image: none !important;
	cursor: pointer;
}

.ui-helper-hidden-accessible {
	border: 0;
	clip: rect(0 0 0 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}
/* Auto-complete Jquery.UI based - End */

/* Popover - Start */
span[data-toggle="popover"] {
	padding: 2px 5px;
	border: 2px solid transparent;
	border-radius: 5px;
}

	span[data-toggle="popover"]:hover {
		padding: 2px 5px;
		border: 2px solid var(--primary-light);
		border-radius: 5px;
	}
/* Popover - End */

.ui-tooltip {
}

.modal-dialog:focus {
	outline: none;
}

.modal-dialog .modal-content:focus {
	outline: -webkit-focus-ring-color auto 1px;
}

.modal-design-wiz {
	max-width: 90% !important;
	height: 90%;
}

	.modal-design-wiz iframe {
		height: 100%;
	}

.popover-error {
	background-color: var(--warning) !important;
}

	.popover-error .popover-header {
		background-color: rgba(0,0,0,0.1);
	}

		.popover-error .popover-header:before {
			font-family: 'Font Awesome 5 Free';
			content: '\f071';
			font-size: 1em;
			font-weight: 700;
		}

/* SiteMaster navigation menu - Start */
#navScreens .dropdown-menu a {
	position: relative;
	padding-right: 2em;
}

#navScreens .dropdown-menu .badge-pill {
	position: absolute;
	top: 0.6em;
	right: 0.5em;
}

.dropdown-submenu {
	position: relative;
}

#navMain .dropdown-item .sel-lang {
	width: 80%;
	display: inline-block;
	text-align: right;
}

#navMain .language-menu {
	text-transform: capitalize;
}

#navMain .dropdown-submenu > .dropdown-menu {
	top: 0;
	left: 100%;
	margin-top: -6px;
	margin-left: -1px;
	-webkit-border-radius: 0 6px 6px 6px;
	-moz-border-radius: 0 6px 6px;
	border-radius: 0 6px 6px 6px;
}


.dropdown-submenu:hover > .dropdown-menu {
	display: block;
}

.dropdown-submenu > a:after {
	display: block;
	content: " ";
	float: right;
	width: 0;
	height: 0;
	border-color: transparent;
	border-style: solid;
	border-width: 5px 0 5px 5px;
	border-left-color: #ccc;
	margin-top: 5px;
	margin-right: -10px;
}

.dropdown-submenu:hover > a:after {
	border-left-color: #fff;
}

.dropdown-submenu.pull-left {
	float: none;
}

#navMain .dropdown-submenu > .dropdown-menu {
	left: 60%;
	box-shadow: -4px 2px 20px 0px #827d7d;
}

.dropdown-submenu.drop-left {
	top: 0;
	left: -140%;
	margin-top: -6px;
}


#btnDesignWiz {
	white-space: nowrap;
}

#navMain .org-id {
	display: flex;
	font-weight: 900;
}

.org-id .org-lbl {
	display: flex;
	font-weight: 600;
	padding-right: 0.5em;
}


@media screen and (min-width: 768px) {
	#navMain .user-headline {
		font-size: 0.9vw;
	}

	#navMain .org-id {
		font-size: 0.7vw;
	}
}

@media only screen and (max-width: 767.98px) {
	#navMain .user-headline {
		font-size: 20px;
	}

	#navMain .org-id {
		font-size: 15px;
	}
}
/* SiteMaster navigation menu - End */

/* Used with Screens and designs */
.namecol {
	position: relative;
}

	.namecol .badge {
		float: right;
	}

.colorpicker-component {
	max-width: 300px;
}

	.colorpicker-component .color-sample {
		background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
	}

		.colorpicker-component .color-sample i {
			min-width: 40px;
			cursor: pointer;
		}

	.colorpicker-component .btn {
		max-width: 40px;
		display: none;
	}

fieldset.form-fieldset {
	margin-bottom: 8px;
	background-color: var(--alist-odd);
	border-radius: 6px;
	border: 1px solid #888;
}

.form-fieldset legend {
	display: inline-block;
	width: auto;
	background-color: white;
	border: 1px solid #888;
	border-radius: 6px;
	padding: 0 10px;
}

fieldset.error-details {
	display: none;
	padding: 0.5rem;
}

.dependency-tree h4 {
	text-decoration: underline;
}

.dependency-tree ul {
	list-style-type: none;
	padding-left: 1.4rem;
}

.dependency-tree .wg-label, .dependency-tree .item-hdr {
	text-decoration: underline;
	font-weight: bolder;
}

.dependency-tree ul ul li {
	font-size: smaller;
}


/* Calendar drop-down used in screens view and wizard */
.calendar-contents, .profile-contents > .inner {
	max-height: 300px;
	min-width: 25em;
	overflow-y: auto;
	padding: 8px;
}

	.calendar-contents .dropdown-item.active, .profile-contents .dropdown-item.active {
		background-color: var(--primary-base);
		box-shadow: 0 0 2pt 1pt var(--primary-dark);
		border-radius: 2px;
	}

	.calendar-contents .dropdown-item, .profile-contents .dropdown-item {
		cursor: default;
		position: relative;
	}

		.calendar-contents .dropdown-item:hover, .profile-contents .dropdown-item:hover {
			color: black;
			background-color: var(--alist-evenh);
			transition: background-color 0.5s ease;
			box-shadow: 0 0 3pt 2pt var(--primary-dark);
			border-radius: 3px;
		}

		.calendar-contents .dropdown-item.item-calendar {
			padding-left: 2.5rem;
		}

		.calendar-contents .dropdown-item.item-resource {
			padding-left: 3.5rem;
		}

		.calendar-contents .dropdown-item.disabled, .dropdown-item:disabled, .profile-contents .dropdown-item.disabled {
			color: #a2afba;
		}

.dropdown-calendar {
	width: 100%;
}

	.dropdown-calendar .dropdown-menu {
		width: auto;
	}

.screen-tags .sol-container {
	background-color: white;
}

.expand-caret {
	transform: scale(1.6);
	margin-left: 8px;
	margin-top: -4px;
	transition: transform 0.4s ease-in-out;
	-webkit-transition: -webkit-transform 0.4s ease-in-out;
	-ms-transition: -ms-transform 0.4s ease-in-out;
}

.details[aria-expanded='true'] > .expand-caret {
	transform: scale(1.6) rotate(90deg);
	transform-origin: center;
}

.sidebar {
	max-width: 350px;
	padding-left: 0;
	padding-right: 0;
	height: 100%;
	max-height: 700px;
	overflow-y: auto;
	overflow-x: hidden;
}

	.sidebar > .card-header {
		padding: 5px 5px 0 5px;
	}

div:fullscreen .sidebar {
	max-height: 100%;
}

/*
	RANGE BUTTON
*/

.range-wrap {
	position: relative;
	margin: 0 0;
	display: contents;
}

.range {
	width: 100%;
}

.bubble {
	background: var(--primary);
	color: white;
	padding: 4px 12px;
	position: absolute;
	border-radius: 4px;
	margin-top: 30px;
	left: 50%;
	transform: translateX(-50%);
}

	.bubble::after {
		content: "";
		position: absolute;
		width: 2px;
		height: 2px;
		background: var(--primary);
		top: -1px;
		left: 50%;
	}

input[type=range] {
	width: 100%;
	margin: 7.3px 0;
	background-color: transparent;
	-webkit-appearance: none;
}

	input[type=range]:focus {
		outline: none;
	}

	input[type=range]::-webkit-slider-runnable-track {
		background-color: var(--alist-evenh);
		border: 0.3px solid #010101;
		border-radius: 16.9px;
		width: 100%;
		height: 11.4px;
		cursor: pointer;
	}

	input[type=range]::-webkit-slider-thumb {
		margin-top: -7.6px;
		width: 26px;
		height: 26px;
		background-color: #ffffff;
		border: 1.8px solid #00001e;
		border-radius: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease-in;
		-webkit-appearance: none;
	}

	input[type=range]:focus::-webkit-slider-thumb {
		background-color: var(--primary-light);
	}

	input[type=range]:focus::-webkit-slider-runnable-track {
		background-color: var(--alist-even);
	}

	input[type=range]::-moz-range-track {
		background-color: var(--alist-evenh);
		border: 0.3px solid #010101;
		border-radius: 16.9px;
		width: 100%;
		height: 11.4px;
		cursor: pointer;
	}

	input[type=range]::-moz-range-thumb {
		width: 26px;
		height: 26px;
		background-color: #ffffff;
		border: 1.8px solid #00001e;
		border-radius: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease-in;
	}

	input[type=range]:focus::-moz-range-thumb {
		background-color: var(--primary-light);
	}

	input[type=range]::-ms-track {
		background: transparent;
		border-color: transparent;
		border-width: 8.2px 0;
		color: transparent;
		width: 100%;
		height: 11.4px;
		cursor: pointer;
	}

	input[type=range]::-ms-fill-lower {
		background-color: var(--primary-light);
		border: 0.3px solid #010101;
		border-radius: 33.8px;
	}

	input[type=range]::-ms-fill-upper {
		background-color: var(--alist-evenh);
		border: 0.3px solid #010101;
		border-radius: 33.8px;
	}

	input[type=range]::-ms-thumb {
		width: 26px;
		height: 26px;
		background-color: #ffffff;
		border: 1.8px solid #00001e;
		border-radius: 15px;
		cursor: pointer;
		transition: background-color 0.3s ease-in;
		margin-top: 0;
		/*Needed to keep the Edge thumb centred*/
	}

	input[type=range]:focus::-ms-thumb {
		background-color: var(--primary-light);
	}

	input[type=range]:focus::-ms-fill-lower {
		background-color: var(--primary-base);
	}

	input[type=range]:focus::-ms-fill-upper {
		background-color: var(--alist-evenh);
	}

div.product-badge {
	display: inline-block;
}

	div.product-badge h6 {
		color: var(--alist-even);
	}

.hover-expand {
	width: 50px;
	transition: width 0.7s;
	-webkit-transition: width 0.7s;
	position: relative;
	text-overflow: clip;
}

	.hover-expand:hover {
		width: 10rem;
		transition: width 0.7s;
	}

	.hover-expand i {
		opacity: 1;
		transition: opacity 0.5s
	}

	.hover-expand:hover i {
		opacity: 0;
		transition: opacity 0.5s
	}

	.hover-expand .expand-hide {
		opacity: 0;
		transition: opacity .5s;
		position: absolute;
		width: 100%;
		pointer-events: none;
		white-space: nowrap;
		left: 0;
	}

	.hover-expand:hover .expand-hide {
		opacity: 1;
		transition: opacity 0.5s
	}

.order-by-header {
	background-color: var(--primary-trans);
	border: 1px solid var(--primary-trans);
	border-top: 0;
}

	.order-by-header span.badge {
		padding: 6px 30px;
		font-size: larger;
	}

	.order-by-header a {
		color: var(--alist-odd);
	}

		.order-by-header a:hover {
			color: white;
			text-decoration: underline;
		}

.order-by-body {
	background-color: #eaeaea;
	border-top: 0;
	border: 1px solid var(--primary-trans);
}

/*TODO: Use one of the selectors from https://stackoverflow.com/a/20541859/7077589 and figure out
how to remove the virtical space around the range input in IE*/
@supports (-ms-ime-align:auto) {
	/* Pre-Chromium Edge only styles, selector taken from hhttps://stackoverflow.com/a/32202953/7077589 */
	input [type=range] {
		margin: 0;
		/*Edge starts the margin from the thumb, not the track as other browsers do*/
	}
}