/* GENERAL */
body {
	background: #fff;
	margin: 0 auto;
	overflow-x: hidden;
}

form {
	font-family: Jost;
	font-size: 0.9em;
	color: #444;
	margin: 0 auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	padding: 0px;
	width: 100%;
	line-height: 1.4em;
	overflow: hidden;
}

h1 {
	font-size: 2.0em;
	letter-spacing: 0.01em;
	color: #444;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 30px;
	text-transform: none;
	line-height: 1.3em;
}

h2 {
	font-size: 1.6em;
	letter-spacing: 0.01em;
	color: #444;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 20px;
	text-transform: none;
	line-height: 1.3em;
}

h3 {
	font-size: 1.3em;
	color: #666;
	font-weight: normal;
	margin-top: 0px;
	margin-bottom: 16px;
	line-height: 1.4em;
}

h4 {
	font-size: 1.2em;
	margin-bottom: 10px;
	color: #444;
	font-weight: 400;
}

table + h4 {
	margin-top: 50px;
}

.light {
	color: #888;
	font-size: 0.9em;
}

/* BUTTONS */
input {
	font-family: Jost;
	font-size: 1.0em;
	padding: 4px 5px 6px 5px;
	border: solid 1px #ccc;
	border-radius: 3px;
}

	input::placeholder {
		color: #aaa;
	}

	input[type="text"]:read-only {
		background: #f8f8f8;
	}

	input[type="checkbox"] {
		width: 1.3em;
		height: 1.3em;
		vertical-align: middle;
	}

		input[type="checkbox"] + label {
			vertical-align: middle;
			padding-left: 3px;
			padding-right: 20px;
		}

	input:focus {
		outline: none;
		background: #f8f8f8;
	}

.input {
	font-family: Jost;
	font-size: 1.0em;
	padding: 4px 5px 6px 5px;
	border: solid 1px #ccc;
	border-radius: 3px;
}

.textinput {
	font-family: Jost;
	font-size: 1.0em;
	padding: 5px 5px 7px 5px;
	border: solid 1px #ccc;
	border-radius: 3px;
}

.warning, .box .textinput.warning, .box .input.warning {
	border: solid 1px #ffa500;
	background: #FFF2DD;
	color: #444;
	padding: 5px 5px 7px 5px;
	font-size: 1.0em;
	display:inline-block;
	margin-bottom:20px;
}

.button {
	padding: 4px 15px 6px 15px;
	border: solid 1px #ccc;
	background: #f8f8f8;
	color: #222;
	transition: 0.25s;
}

	.button.large {
		font-size: 1.2em;
		padding: 7px 25px;
		border-radius: 5px;
	}

	.button:hover {
		background: #444;
		border: solid 1px #444;
		color: #fff;
		cursor: pointer;
	}

	.button:disabled {
		opacity: 0.25;
	}

		.button:disabled:hover {
			color: #222;
			border: solid 1px #ccc;
			background: #f8f8f8;
			cursor: default;
		}

input.image-button {
	border: none;
	padding: 0px;
}

.image-button:disabled {
	filter: grayscale(1);
	opacity: 0.5;
}

.checkboxlist {
	text-align: left;
	margin-bottom: 0px;
}

	.checkboxlist td {
		min-width: 100px;
		padding-right: 30px;
		text-align: left;
	}

	.checkboxlist input[type="checkbox"], .checkboxlist input[type="radio"] {
		width: 1.4em;
		height: 1.4em;
		vertical-align: middle;
	}

	.checkboxlist label {
		padding-left: 5px;
		vertical-align: middle;
	}

/* LOGIN */
.login {
	position: absolute;
	left: 50%;
	margin-left: -170px;
	top: 240px;
	border: solid 1px #ddd;
	padding: 10px;
	padding-bottom: 60px;
	width: 340px;
	border-radius: 2px;
}

	.login h1 {
		background: #145CAB;
		color: #fff;
		text-decoration: none;
		font-size: 1.2em;
		padding: 10px;
		margin-left: -10px;
		margin-top: -10px;
		width: 100%;
		text-align: center;
		margin-bottom: 20px;
		border-top-left-radius: 2px;
		border-top-right-radius: 2px;
	}

	.login .title {
		display: inline-block;
		width: 70px;
		margin-right: 10px;
		vertical-align: middle;
	}

	.login .value {
		display: inline-block;
		max-width: calc(100% - 80px);
		vertical-align: middle;
	}

	.login .clear {
		clear: both;
		height: 10px;
	}

	.login .loginbutton {
		position: absolute;
		bottom: 15px;
		right: 15px;
	}

	.login .forgottenpassword {
		position: absolute;
		bottom: 20px;
		left: 15px;
	}

	.login .warning {
		background: #cc0000;
		padding: 8px 10px;
		color: #fff;
		margin-top: 10px;
		margin-left: -10px;
		width: 100%;
		text-align: center;
		font-size: 1.0em;
	}

.caption { 
	margin:20px 0px;
	background: #f8f8f8;
	width: 760px;
	max-width:calc(100% - 40px);
	padding:20px 20px 0px 20px;
	border-radius:5px;
	border: solid 1px #ccc;
	box-shadow: 2px 2px 8px #ddd;
}

/* BREADCRUMB */
.breadcrumb {
	position: absolute;
	top: 125px;
	right: 20px;
	font-size: 0.85em;
}

	.breadcrumb .breadcrumbitem {
		display: inline-block;
		vertical-align: middle;
		font-size: 1.2em;
	}

		.breadcrumb .breadcrumbitem .separator {
			padding: 0px 6px;
			margin: 0px;
			border: none;
		}

	.breadcrumb a:link, .breadcrumb a:active, .breadcrumb a:visited {
		text-decoration: underline;
		color: #2C95CE;
	}

		.breadcrumb a:link:hover, .breadcrumb a:active:hover, .breadcrumb a:visited:hover {
			text-decoration: underline;
			color: #38B9FF;
		}

	.breadcrumb .help {
		display: inline-block;
		margin-right: 10px;
		vertical-align: middle;
		height: 40px;
		opacity: 0.5;
		transition: 0.25s;
	}

		.breadcrumb .help:hover {
			cursor: pointer;
			opacity: 1;
		}

		.breadcrumb .help img {
			height: 100%;
		}

/* MAIN */
.main {
	min-height: 940px;
	background: #fff;
	display: inline-block;
	vertical-align: top;
	width: calc(100% - 290px);
	padding: 20px 30px 50px 30px;
	position: relative;
	flex: 1;
}

.mobileheader {
	display: none;
}

/* TOP MENU */
.topmenu {
	position: relative;
	height: 118px;
	overflow-y: hidden;
	width: calc(100% + 60px);
	background: #f8f8f8;
	margin-left: -30px;
	margin-top: -20px;
	margin-bottom: 30px;
}

	.topmenu .menuitem {
		display: inline-block;
		margin-top: 9px;
		width: 100px;
		height: 100px;
		background: none;
		position: relative;
		transition: 0.25s;
		filter: grayscale(1);
	}

	.topmenu .menuitemselected {
		display: inline-block;
		width: 100px;
		height: 100px;
		background: none;
		position: relative;
		filter: grayscale(0);
	}

	.topmenu .menuitemselected {
		opacity: 1;
	}

	.topmenu .menuitem:hover {
		cursor: pointer;
		transition: 0.25s;
		filter: grayscale(0);
	}

	.topmenu .menuitem:hover {
		background: #eee;
	}

	.topmenu .pic {
		top: 10px;
		left: 20px;
		position: absolute;
		width: 60px;
		height: 60px;
		transition: 0.25s;
		opacity: 0.25;
	}

	.topmenu .menuitemselected .pic {
		filter: grayscale(0);
		top: 10px;
		left: 20px;
		position: absolute;
		width: 60px;
		height: 60px;
		transition: 0.25s;
		opacity: 1;
	}

	.topmenu .menuitem:hover .pic {
		transform: scale(1.08);
		filter: grayscale(0);
		opacity: 1;
	}

	.topmenu .pic img {
		width: 100%;
		height: 100%;
	}

	.topmenu .label {
		position: absolute;
		bottom: 3px;
		text-align: center;
		width: 100%;
		opacity: 1;
		line-height: 1.1em;
		font-size: 0.9em;
		height: 16px;
		overflow: hidden;
	}

	.topmenu .menuitem .label {
		opacity: 0.6;
	}

	.topmenu .menuitem:hover .label {
		opacity: 0.9;
	}

.controlpanel {
	display: flex;
}

/* LEFT MENU*/
.leftmenu {
	display: inline-block;
	width: 220px;
	max-width: 220px;
	border-right: solid 1px #ddd;
	min-height: 1000px;
	background: #f8f8f8;
	flex: 1;
}

	.leftmenu .logo {
		width: 220px;
		padding: 0px;
		background: #fff;
		opacity: 1;
	}

	.leftmenu .logo-overlay {
		padding: 10px 10px 12px 10px;
		text-align: left;
		font-size: 1.2em;
		width: calc(100% - 20px);
		background: #222;
		color: #fff;
	}

		.leftmenu .logo img {
			width: 100%;
		}

	.leftmenu .username {
		width: calc(100% - 66px);
		padding: 10px 10px 12px 56px;
		font-size: 1.2em;
		background-color: #f8f8f8;
		background-image: url(/images/base/user.png);
		background-repeat: no-repeat;
		background-size: 30px 40px;
		background-position: 6px 12px;
		border-bottom: solid 1px #ccc;
		border-top: solid 1px #ccc;
		filter: grayscale(1);
	}

	.leftmenu .country .input {
		width: 100%;
		font-size: 1.2em;
		font-weight: 600;
		background: #FEFFE0;
		border: none;
		padding: 14px 10px;
	}

	.leftmenu .contry .input:focus {
		outline: none;
	}

	.leftmenu .provider {
	}

		.leftmenu .provider .input {
			width: 100%;
			padding: 10px 10px;
			font-size: 1.2em;
			border: solid 1px #ddd;
			background: #fffbce;
		}

	.leftmenu .property .input {
		width: 100%;
		padding: 10px 10px;
		font-size: 1.2em;
		border: solid 1px #ddd;
		background: #e0ffff;
	}

	.leftmenu .menuitem {
		background: #f8f8f8;
		transition: 0.25s;
		width: calc(100% - 20px);
		padding: 8px 10px;
		font-size: 1.2em;
		border-bottom: solid 1px #ccc;
		position: relative;
		filter: grayscale(0);
	}

		.leftmenu .menuitem:hover {
			background: #eee;
			cursor: pointer;
		}

		.leftmenu .menuitem .pic {
			display: inline-block;
			width: 45px;
			vertical-align: middle;
			transition: 0.25s;
		}

		.leftmenu .menuitem:hover .pic {
			filter: brightness(0.9);
		}

		.leftmenu .menuitem .pic img {
			width: 30px;
			filter: grayscale(0);
		}

		.leftmenu .menuitem .label {
			display: inline-block;
			vertical-align: middle;
			width: calc(100% - 55px);
			margin: 0px;
			line-height: 1.4em;
		}

			.leftmenu .menuitem .label .light {
				color: #888;
				font-size: 0.85em;
			}

		.leftmenu .menuitem .toggle {
			position: absolute;
			right: 20px;
			top: 50%;
			margin-top: -12px;
			transition: 0.25s;
			display: none;
			opacity: 0.25;
		}

			.leftmenu .menuitem .toggle:hover {
				opacity: 0.75;
			}

	.leftmenu .menuitemselected {
		background: #2E9BD7;
		color: #fff;
		transition: 0.25s;
		width: calc(100% - 20px);
		padding: 8px 10px;
		font-size: 1.2em;
		border-bottom: solid 1px #ccc;
		position: relative;
		filter: brightness(0.96);
	}

		.leftmenu .menuitemselected .pic {
			display: inline-block;
			width: 45px;
			vertical-align: middle;
			transition: 0.25s;
			filter: brightness(10) grayscale(1);
		}

			.leftmenu .menuitemselected .pic img {
				width: 30px;
				filter: grayscale(0);
			}

		.leftmenu .menuitemselected .label {
			display: inline-block;
			vertical-align: middle;
			width: calc(100% - 55px);
			line-height: 1.4em;
		}

			.leftmenu .menuitemselected .label .light {
				color: #888;
				font-size: 0.85em;
			}

		.leftmenu .menuitemselected .toggle {
			position: absolute;
			right: 20px;
			top: 50%;
			margin-top: -12px;
			transition: 0.25s;
			display: none;
			opacity: 0.25;
		}

			.leftmenu .menuitemselected .toggle:hover {
				opacity: 0.75;
			}

/* FILTERS */
.filters {
	background: #f8f8f8;
	padding: 10px;
	display: inline-block;
	border: solid 0px #fff;
	border-radius: 5px;
}

	.filters.extra-padding {
		padding: 20px;
	}

	.filters h4 {
		margin-top: 0px;
	}

	.filters .filterblock {
		display: inline-block;
		background: #eee;
		color: #888;
		border-right: solid 1px #fff;
		padding: 4px 6px 6px 6px;
		min-width: 30px;
		text-align: center;
		transition: 0.25s;
		text-transform: uppercase;
	}

		.filters .filterblock:hover {
			cursor: pointer;
			filter: brightness(0.95);
		}

		.filters .filterblock.selected {
			background: #444;
			color: #fff;
		}

	.filters .box .button, .filters .boxgap .button {
		padding: 5px 20px 6px 20px;
	}

.section {
	display: inline-block;
	vertical-align: top;
	width: 1200px;
	margin-right: 50px;
	max-width: 100%;
}

.label {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 10px 5px 0px;
}

.box {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 10px 5px 0px;
}

	.box.top {
		vertical-align: top;
		margin-right: 50px;
		margin-bottom: 50px;
	}

	.box.align-top {
		vertical-align: top !important;
	}

	.box.bottom {
		margin-bottom: 0px;
		vertical-align: bottom;
	}

	.box .info {
		color: #444;
		font-size: 0.9em;
		margin-bottom: 3px;
		padding: 0px;
		background: none;
	}

	.box h4, .boxgap h4 {
		margin-top: 0px;
		margin-left: 5px;
		margin-bottom: 5px;
		font-size: 1.0em;
		color: #444;
	}

	.box h5 {
		font-weight: 400;
		margin-top: 0px;
		margin-bottom: 5px;
		font-size: 0.95em;
	}

	.box .warning {
		padding: 4px 10px 6px 10px;
		background: #ffa500;
		color: #fff;
		font-weight: 400;
		font-size: 1.2em;
	}

.box5 {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 5px 5px 0px;
}

.boxgap {
	display: inline-block;
	vertical-align: middle;
	margin: 5px 40px 5px 0px;
}

.gap {
	display: inline-block;
	margin-right: 30px;
}

.box input[type="text"] {
	border: solid 1px #ddd;
	border-radius: 3px;
	padding: 5px 5px 7px 5px;
}

	.box input[type="text"]:read-only {
		background: #FFFB9E;
	}

.box input[type="submit"], .boxgap input[type="submit"] {
	border: solid 1px #aaa;
	border-radius: 3px;
	padding: 5px 20px 7px 20px;
	transition: 0.25s;
	background: #f4f4f4;
	color: #444;
}

	.box input[type="submit"]:hover, .boxgap input[type="submit"]:hover {
		border: solid 1px #444;
		background: #444;
		color: #fff;
		cursor: pointer;
	}

	.box input[type="submit"]:disabled {
		opacity: 0.5;
	}

		.box input[type="submit"]:disabled:hover {
			opacity: 0.5;
			background: #f4f4f4;
			border: solid 1px #aaa;
			cursor: default;
			color: #444;
		}

.clear {
	clear: both;
	height: 30px;
}

	.clear.deep {
		height: 50px;
	}

.clear10 {
	clear: both;
	height: 10px;
}

.clear20 {
	clear: both;
	height: 20px;
}

/* ITEMS */
.column {
	display: inline-block;
	margin-right: 50px;
	padding-right: 50px;
	border-right: solid 1px #ddd;
	min-height: 1000px;
	vertical-align: top;
	max-width: 300px
}

	.column.right {
		margin-right: 0px;
		padding-right: 0px;
		border-right: none;
		max-width: 2000px;
		width: calc(100% - 410px);
	}

.foldericon {
	margin-right: 0px;
	width: 24px;
	height: 24px;
	padding-bottom: 4px;
	background-image: url(/images/base/folder.png);
	background-size: 24px 24px;
	background-repeat: no-repeat;
	display: inline-block;
	vertical-align: middle;
}

	.foldericon.blue {
		background-image: url(/images/base/folder-blue.png);
	}

.folderlabel {
	display: inline-block;
	vertical-align: middle;
	padding-left: 5px;
	transition: 0.25s;
}

	.folderlabel:hover {
		text-decoration: underline;
		cursor: pointer;
	}

.tabs {
	padding-bottom: 0px;
	border-bottom: solid 1px #ddd;
	margin-bottom: 30px;
}

	.tabs .tab {
		display: inline-block;
		border: solid 1px #ccc;
		border-bottom: none;
		border-radius: 3px;
		padding: 10px 15px;
		font-size: 1.1em;
		transition: 0.25s;
	}

		.tabs .tab:hover {
			background: #f8f8f8;
			cursor: pointer;
		}

		.tabs .tab.selected {
			background: #EAF2FF;
		}

			.tabs .tab.selected:hover {
				background: #D3E3FD;
			}

.item {
	border: solid 1px #ddd;
	border-radius: 5px;
	padding: 10px 30px 10px 15px;
	width: 270px;
	display: inline-block;
	margin-right: 20px;
	margin-bottom: 20px;
	vertical-align: top;
	transition: 0.25s;
	height: 110px;
	font-size: 1.0em;
	position: relative;
	line-height: 1.3em;
	box-shadow: 1px 1px 9px #ddd;
	background: #fff;
}

	.item.yellow {
		background: #FFF493;
	}

		.item.yellow.light {
			background: #FFFBD1;
		}

		.item.yellow.verylight {
			background: #FFFDF2;
		}

	.item.blue {
		background: #EFF9FF;
	}

	.item.fade .bottomleft {
		background: #ffa500;
	}

.additem {
	margin-top: 40px;
}

	.additem .box select,
	.additem .box .multi-select-options,
	.additem .box .multi-select-container {
		vertical-align: top;
	}

.item.disabled {
	opacity: 0.5;
}

.item.small {
	width: auto;
	max-width: 200px;
	height: auto;
	text-align: center;
	padding: 10px 20px;
	cursor: move;
	user-select: none;
}

	.item.small.margin {
		margin-top: 20px;
	}

.item:hover {
	filter: brightness(0.97);
	cursor: pointer;
}

.item h2 {
	font-size: 1.8em;
	margin-bottom: 10px;
	font-weight: 600;
}

.item h3 {
	color: #444;
	margin-bottom: 2px;
	font-weight: 600;
	line-height: 1.2em;
	height: 24px;
	overflow-y: hidden;
}

.item .clickable {
	position: absolute;
	left: 0px;
	top: 0px;
	height: 100%;
	width: calc(100% - 45px);
}

.item .bottomright {
	position: absolute;
	right: 10px;
	bottom: 10px;
	height: 32px;
	filter: grayscale(1);
	opacity: 0.5;
	transition: 0.25s;
}

	.item .bottomright:hover {
		cursor: pointer;
		filter: grayscale(0);
		opacity: 1;
	}

	.item .bottomright img {
		height: 100%;
	}

.bottomleft {
	position: absolute;
	left: 0px;
	bottom: 0px;
	padding: 5px 12px 6px 12px;
	background: #444;
	border: solid 0px #fff;
	border-bottom-left-radius: 5px;
	color: #fff;
}

.item .col {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 12px;
	height: 12px;
	border-radius: 6px;
	border: solid 0px #fff;
}

.line-item {
	margin-bottom: 20px;
}

	.line-item table {
		padding: 10px;
		background: #f8f8f8;
		width: auto;
	}

.line-item-title {
	font-weight: 400;
	margin-bottom: 6px;
	color: #666;
}

.line-item-value {
	font-weight: 500;
}

.response-table td {
	min-width: 140px;
}

.title {
	display: inline-block;
	vertical-align: middle;
	width: 150px;
	margin-right: 10px;
	color: #666;
}

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

	.title.toptext {
		vertical-align: top;
		padding-top: 0px;
	}

.value {
	display: inline-block;
	vertical-align: middle;
}

	.value input {
		margin-right: 10px;
	}

	.value .info {
		padding: 6px 10px 8px 40px;
		background-image: url(/images/base/information.png);
		background-repeat: no-repeat;
		background-size: contain;
		background-position: 10px 0px;
		background-color: #f8f8f8;
		font-size: 0.9em;
		margin: 2px 0px;
	}

.placemap {
	height: 450px;
	width: 600px;
	border: 1px solid #ccc;
}

.clearline {
	clear: both;
	height: 0px;
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: solid 1px #ddd;
}

.buttons {
	margin-top: 50px;
	margin-bottom: 20px;
	font-size: 1.2em;
	min-height: 90px;
}

	.buttons .button {
		margin-right: 20px;
	}

	.buttons .info-label {
		background: #2C95CE;
		padding: 10px 20px;
		border-radius: 5px;
		color: #fff;
	}

/* POPUPS */
.popupbg {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: url(/images/base/bg.png);
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 1000;
}

	.popupbg .popup {
		width: 400px;
		max-width: 100%;
		height: 600px;
		background: #fff;
		padding: 20px;
		border-radius: 3px;
		position: relative;
		box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
	}

.popup.addbooking {
	width: 500px;
	height: 960px;
}

.popup.takepayment {
	width: 360px;
	height: 320px;
}

.popup.email-preview {
	width: 840px;
	height: 780px;
}

.popup .buttons {
	position: absolute;
	bottom: 20px;
	right: 20px;
	margin-bottom: 20px;
	min-height: 50px;
}

.popup h2 {
	margin-left: -20px;
	margin-top: -20px;
	margin-bottom: 30px;
	padding: 15px 20px;
	width: 100%;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	color: #fff;
	font-size: 1.5em;
	background: #145CAB;
}

.popup .title {
	width: 90px;
	margin-right: 10px;
	display: inline-block;
	vertical-align: middle;
}

.popup .value {
	width: calc(100% - 110px);
	display: inline-block;
	vertical-align: middle;
}

	.popup .value .input {
		max-width: 100%;
	}

.popup .clear {
	clear: both;
	height: 12px;
}

	.popup .clear.deep {
		height: 30px;
	}

.popup .buttons {
	position: absolute;
	bottom: -10px;
	right: 0px;
}

.popup .button {
	padding: 7px 20px 8px 20px;
}

	.popup .button.reduced {
		padding: 5px 20px 6px 20px;
	}

.button.close {
	opacity: 0.5;
	margin-right: 10px;
}

/* RESULTS */
.scrollable-table {
	width: 100%;
	overflow-x: auto;
}

	.scrollable-table table {
		min-width: 1200px;
	}

.results {
	margin-bottom: 20px;
	line-height: 1.5em;
}

	.results .pagenumber {
		display: inline-block;
		vertical-align: middle;
		padding: 2px 5px;
		background: #f8f8f8;
		transition: 0.25s;
		margin: 0px 3px;
		text-align: center;
		width: 12px;
	}

		.results .pagenumber:hover {
			cursor: pointer;
			background: #ddd;
		}

	.results .pagenumberselected {
		display: inline-block;
		vertical-align: middle;
		padding: 2px 5px;
		background: #444;
		color: #fff;
		margin: 0px 3px;
		text-align: center;
		width: 12px;
	}

/* TABLES */
.rowheader {
	background: #444;
	color: #fff;
}

	.rowheader.small {
		font-size: 0.85em;
		line-height: 1.5em;
	}

.rowtotal {
	background: #eee;
	color: #222;
	height: 50px;
}


.rowheader .light {
	color: #ccc;
}

	.rowheader .light.white {
		color: #fff;
	}

.rowheader td, .rowtotal td {
	padding: 8px 10px 12px 10px;
	font-size: 1.2em;
}

td a:link, td a:active, td a:visited {
	text-decoration: underline;
	color: #305f31;
	transition: 0.25s;
}

	td a:link:hover, td a:active:hover, td a:visited:hover {
		text-decoration: underline;
		color: #1b2b1c;
	}

.rowlight, .rowdark {
	background: #fff;
	color: #222;
	transition: 0.25s;
	line-height: 1.25em;
}

	.rowlight img, .rowdark img {
		mix-blend-mode: multiply;
	}

	.rowlight.selected, .rowdark.selected {
		background: #EAF2FF;
	}

	.rowlight .button, .rowdark .button {
		margin: 3px;
	}

	.rowlight.fade, .rowdark.fade {
		opacity: 0.75;
	}

	.rowlight td, .rowdark td {
		height: 36px;
	}

.rowsubrow {
	background: #f8f8f8;
	color: #444;
	transition: 0.25s;
	line-height: 1.25em;
}

.rowhighlight {
	background: #FFFBCE;
	color: #444;
	transition: 0.25s;
	line-height: 1.25em;
}

.rowlight.highlight, .rowdark.highlight {
	background: #FFFBCE;
	color: #444;
}

.rowlight:hover, .rowdark:hover, .rowhighlight:hover, .rowsubrow:hover {
	filter: brightness(0.95);
	color: #444;
}

.rowlight.nohover:hover, .rowdark.nohover:hover {
	filter: brightness(1);
	cursor: default;
}

.rowlight td, .rowdark td, .rowhighlight td, .rowsubrow td {
	padding: 10px;
	border-bottom: solid 1px #ddd;
}

	.rowlight td .extra, .rowdark td .extra, .rowhighlight td .extra {
		display: inline-block;
		vertical-align: middle;
		height: 28px;
		margin: 3px;
	}

.extra img {
	height: 100%;
}

.rowlight .controls, .rowdark .controls, rowhighlight .controls {
	background: #f8f8f8;
}

/* COLOUR PICKER */
.colourpicker .colourbutton {
	width: 20px;
	height: 20px;
	margin: 5px;
	display: inline-block;
	padding: 0px;
	border-radius: 50%;
	border: solid 0px #fff;
	transition: 0.25s;
}

	.colourpicker .colourbutton:hover {
		opacity: 0.8;
		cursor: pointer;
		width: 22px;
		height: 22px;
		margin: 4px;
	}

/* Colours */
.green {
	background: #35CC3F;
	color: #fff;
}

.red {
	background: #dd0000;
	color: #fff;
}

.amber {
	background: #ffa500;
	color: #fff;
}

.grey {
	background: #888;
	color: #fff;
}

	.green.light, .red.light, .amber.light, .grey.light {
		color: #222;
		font-size: 1.0em;
	}

.green.light {
	background: #EDFFEE;
}

.red.light {
	background: #FFEDED;
}

.amber.light {
	background: #FFF2DD
}

.grey.light {
	background: #f8f8f8;
}

.coloured-label {
	padding: 7px 15px;
	border-radius: 5px;
	font-size: 1.1em;
}

.status {
	padding: 7px 20px;
	border-radius: 3px;
	color: #fff;
	text-transform: capitalize;
	font-size: 1.0em;
}

.results {
	margin-bottom: 20px;
	line-height: 1.5em;
}

	.results .pagenumber {
		display: inline-block;
		vertical-align: middle;
		padding: 2px 5px;
		background: #f8f8f8;
		transition: 0.25s;
		margin: 0px 3px;
		text-align: center;
		width: 12px;
	}

		.results .pagenumber:hover {
			cursor: pointer;
			background: #ddd;
		}

		.results .pagenumber.selected {
			background: #444;
			color: #fff;
		}

.event-count {
	display: inline-block;
	overflow: hidden;
	padding: 9px 10px;
	border: solid 1px #222;
	margin-left: -1px;
	margin-top: -1px;
	width: 16px;
	text-align: center;
	margin-bottom: -4px;
	transition: 0.25s;
}

	.event-count:hover {
		filter: brightness(0.95);
		cursor: pointer;
	}

/* PHOTOS */
.photos .photo {
	display: inline-block;
	vertical-align: top;
	margin-right: 20px;
	margin-bottom: 20px;
	overflow-x: hidden;
	position: relative;
}

.photos .phototitle {
	position: absolute;
	bottom: 5px;
	padding: 5px 10px;
	width: calc(100% - 20px);
	background: url(/images/base/bg.png);
	color: #fff;
	font-size: 0.85em;
	max-height: 30px;
	line-height: 1.3em;
}

.photos .remove {
	position: absolute;
	top: 5px;
	left: 5px;
	width: 24px;
	height: 24px;
	transition: 0.25s;
	opacity: 0.5;
}

	.photos .remove:hover {
		cursor: pointer;
		opacity: 1;
	}

.photos .photo img {
	height: 150px;
}

.photo-size {
	margin-top: 10px;
	padding: 5px 12px;
	background: #45A545;
	color: #fff;
	font-size: 1.0em;
	border-radius: 3px;
	display: inline-block;
}

.photo-clear {
	clear: both;
	height: 0px;
}

.photo-warning {
	margin: 10px 0px;
	padding: 5px 12px;
	background: #444;
	color: #fff;
	font-size: 1.0em;
	border-radius: 3px;
	display: inline-block;
}

.dashboard-warning {
	padding-left: 24px;
	margin-bottom: 10px;
	background-image: url(/images/base/amber_flag.png);
	background-repeat: no-repeat;
	background-size: contain;
}

	.dashboard-warning a, .dashboard-warning a:link, .dashboard-warning a:active, .dashboard-warning a:visited {
		text-decoration: underline;
		color: #222;
		transition: 0.25s;
	}

		.dashboard-warning a:hover, .dashboard-warning a:link:hover, .dashboard-warning a:active:hover, .dashboard-warning a:visited:hover {
			color: #ffa500;
			cursor: pointer;
		}

.dashboard-event {
	padding: 10px;
	border: solid 1px #ccc;
	border-radius: 5px;
	background: #fafafa;
	margin-bottom: 15px;
	width: calc(100% - 20px);
	max-width: 400px;
	line-height: 1.7em;
	transition: 0.25s;
	display: inline-block;
	margin-right: 15px;
	vertical-align: top;
	box-shadow: 1px 1px 9px #ddd;
}

	.dashboard-event:hover {
		background: #eee;
		cursor: pointer;
	}

.dashboard-event-name {
	font-weight: 600;
	padding-left: 30px;
	background-image: url(/images/base/participant.png);
	background-repeat: no-repeat;
	background-size: contain;
	margin: 3px 0px;
}

.dashboard-event-activity {
	padding-left: 30px;
	background-image: url(/images/base/activity.png);
	background-repeat: no-repeat;
	background-size: contain;
	margin: 3px 0px;
}

.dashboard-event-venue {
	padding-left: 30px;
	background-image: url(/images/base/location.png);
	background-repeat: no-repeat;
	background-size: contain;
	margin: 3px 0px;
}

.dashboard-event-date {
	padding-left: 30px;
	background-image: url(/images/base/date.png);
	background-repeat: no-repeat;
	background-size: 20px 20px;
	margin: 3px 0px;
}

/* FOOTER */
.footer {
	width: 100%;
	background: #145CAB;
	height: 20px;
	padding: 12px 0px 16px 0px;
	text-align: center;
	color: #fff;
}

.cke_mergefield {
	background-color: #fff3cd;
	border: 1px dashed #f0ad4e;
	padding: 2px 4px;
	border-radius: 3px;
	font-weight: bold;
	color: #8a6d3b;
}

/* Style the autocomplete list */
.ui-autocomplete {
	font-family: inherit; /* inherit from your page, or set explicitly */
	font-size: 0.9em; /* smaller text */
	background-color: #fff;
	border: 1px solid #ccc;
	list-style-type: none;
	padding: 0;
	margin: 0;
	max-height: 200px;
	overflow-y: auto;
	z-index: 10000;
}

/* Style each item */
.ui-menu-item {
	font-family: inherit; /* match your textbox font */
	font-size: inherit;
	padding: 5px 10px;
	cursor: pointer;
}

/* Highlighted item */
.ui-menu-item-wrapper.ui-state-active {
	background-color: #007b5e;
	color: #fff;
	font-weight: normal;
}

.event-question {
	margin-bottom: 15px;
	padding-bottom: 15px;
	border-bottom: solid 1px #ddd;
}

.event-question-title {
	margin-bottom: 6px;
}

.event-question.optional {
	position: relative;
	border: solid 1px #ccc;
	background: #f8f8f8;
	padding: 22px 15px 15px 15px;
	border-radius: 5px;
	margin-bottom: 30px;
}

.event-question.mandatory {
	position: relative;
	border: solid 1px #A7CEB9;
	background: #EAFFF4;
	padding: 26px 15px 15px 15px;
	border-radius: 5px;
	margin-bottom: 30px;
}

.event-question.incomplete {
	position: relative;
	border: solid 1px #ffa500;
	background: #FFF2DD;
	padding: 26px 15px 15px 15px;
	border-radius: 5px;
	margin-bottom: 30px;
}

	.event-question.optional::before, .event-question.mandatory::before, .event-question.incomplete::before {
		content: "Optional";
		position: absolute;
		top: -12px;
		left: 15px;
		background: #fff;
		padding: 2px 8px 3px 8px;
		font-size: 0.85em;
		background: #888;
		border-radius: 3px;
		color: #fff;
	}

.event-question.mandatory::before {
	content: "Mandatory";
	background: #61B788;
}

.event-question.incomplete::before {
	content: "Mandatory - please complete";
	background: #ffa500;
}

.tags h3 {
	margin-top: 20px;
	margin-bottom: 0px;
	border-bottom: solid 1px #ddd;
	padding-bottom: 2px;
}

.event-question .checkbox-flow {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 2px 14px; /* row-gap, column-gap */
	margin-top: 16px;
}

	.event-question .checkbox-flow tr, .event-question .checkbox-flow tbody {
		display: contents !important;
	}

	.event-question .checkbox-flow td {
		display: flex !important;
		align-items: center;
	}

.event .dates {
	margin-top: -10px;
}

	.event .dates td {
		width: 380px;
		border: solid 1px #8ED7FF;
		border-radius: 5px;
		padding: 10px;
		transition: 0.25s;
	}

		.event .dates td:has(input[disabled]) {
			background: #eee;
			border: solid 1px #ccc;
			opacity: 0.7;
			cursor: not-allowed;
		}

		.event .dates td:has([data-booked="1"]) {
			background: #EAFFEA !important;
			border: 1px solid #8bc48b !important;
			opacity: 1;
		}

		.event .dates td:has([data-restricted="1"]) {
			background: #FFEDD1 !important;
			border: 1px solid #ffa500 !important;
			opacity: 1;
		}


		.event .dates td:hover {
			background: #f8f8f8;
		}

	.event .dates table {
		border-collapse: separate;
		border-spacing: 0 10px;
	}

	.event .dates .fully-booked, .event .dates .limited-spaces, .event .dates .already-booked, .event .dates .age-restricted {
		background: #444;
		color: #fff;
		text-transform: uppercase;
		padding: 3px 10px 4px 10px;
		border-radius: 3px;
		font-size: 0.9em;
	}

	.event .dates .limited-spaces {
		background: #145CAB;
	}

	.event .dates .already-booked {
		background: #338700;
	}

	.event .dates .age-restricted {
		background: #BC7700;
	}

	.event .dates input[type="checkbox"] {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		border: 2px solid #2C95CE;
		background: #fff;
		vertical-align: top;
		margin-top: 2px;
		cursor: pointer;
		margin-right: 10px;
		position: relative;
	}

		.event .dates input[type="checkbox"]:disabled {
			border: 2px solid #bbb;
			background: #eee;
		}

		.event .dates input[type="checkbox"]:checked {
			background-color: #2C95CE;
		}

	.event .dates td label {
		vertical-align: middle;
		cursor: pointer;
		display: inline-block;
		margin-left: 8px;
		vertical-align: top;
		max-width: 90%; /* Prevent overflow if needed */
		line-height: 1.8;
	}

	.event .dates td.highlighted {
		background: #CEEEFF;
	}

/* CALENDAR */
/* Container that holds multiple facilities */
.cal-facility {
	display: inline-block;
	vertical-align: top;
	width: 260px; /* adjust */
	margin-right: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
}

.cal-facility-header {
	padding: 10px 12px;
	font-weight: 600;
	background: #2f2f2f;
	color: #fff;
}

.cal-facility-body {
	position: relative;
	height: 720px; /* 12 hours x 60px/hr = 720 */
}

/* 15-min grid: 12 hours => 48 slots; each slot 15px gives 720px total */
.cal-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: repeat(48, 1fr);
}

.cal-slot {
	border-bottom: 1px solid #f0f0f0;
	background: #fff;
	transition: 0.25s;
	pointer-events: auto;
}

	.cal-slot:hover {
		background: #f8f8f8;
		cursor: pointer;
	}

	/* Optional: make hour lines darker */
	.cal-slot:nth-child(4n) {
		border-bottom: 1px solid #dcdcdc;
	}

.cal-items {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
}

/* =========================
   Calendar Day View Layout
   ========================= */

/* Wrapper: time column + facility columns */
.cal-wrapper {
	display: flex;
	flex-direction: row; /* ← important */
	align-items: flex-start;
	gap: 12px;
	width: 100%;
}

/* Container holding all facility columns (can scroll horizontally if needed) */
.cal-facilities {
	display: flex;
	gap: 12px;
	overflow-x: auto;
	padding-bottom: 6px; /* gives room for scrollbar */
}

/* =========================
   Time Ruler (left column)
   ========================= */

.cal-time {
	width: 50px;
	flex: 0 0 50px;
	color: #666;
	user-select: none;
}

.cal-time-header {
	height: 44px; /* MUST match facility header height */
}

.cal-time-body {
	position: relative;
	height: 840px; /* MUST match facility body height */
	border-right: 1px solid #e0e0e0;
}

/* One label per hour */
.cal-time-label {
	height: 30px; /* 1 hour = 60px in this scale */
	font-size: 0.9em;
	line-height: 1.0em;
	padding-top: 0px;
	margin: 0;
	box-sizing: border-box;
	position: relative;
	transform: translateY(-5px);
}

	/* Small tick line into the grid */
	.cal-time-label::after {
		content: "";
		position: absolute;
		right: -1px;
		top: 0;
		width: 10px;
		border-top: 1px solid #bbb;
		transform: translateY(5px);
	}


/* =========================
   Facility Columns
   ========================= */

.cal-facility {
	width: 260px; /* adjust as needed */
	flex: 0 0 260px;
	border: 1px solid #ddd;
	border-radius: 6px;
	overflow: hidden;
	background: #fff;
	box-sizing: border-box;
}

.cal-facility-header {
	height: 44px; /* MUST match .cal-time-header */
	padding: 10px 12px;
	box-sizing: border-box;
	font-weight: 600;
	background: #2f2f2f;
	color: #fff;
	display: flex;
	align-items: center;
}

.cal-facility-body {
	position: relative;
	height: 840px; /* MUST match .cal-time-body */
	background: #fff;
}


/* =========================
   15-min Grid Background
   ========================= */

.cal-grid {
	position: absolute;
	inset: 0;
	display: grid;
	grid-template-rows: repeat(56, 1fr); /* 14 hours * 4 = 56 slots */
	z-index: 1;
}

/* Each 15-min slot line */
.cal-slot {
	border-bottom: 1px solid #f0f0f0;
	box-sizing: border-box;
}

	/* Every hour (every 4 slots) draw darker line */
	.cal-slot:nth-child(4n) {
		border-bottom: 1px solid #dcdcdc;
	}

	/* Optional: hover highlight for selecting a start time */
	.cal-slot:hover {
		background: rgba(0,0,0,0.03);
	}


/* =========================
   Items Overlay Layer
   ========================= */

.cal-items {
	position: absolute;
	inset: 0;
	z-index: 2;
	/* Leave as none until items exist; when you add draggable blocks,
     set pointer-events: auto on the blocks themselves */
}


/* =========================
   Future: Booking/Session Block Styling
   ========================= */

/* Example event block (you'll add these inside .cal-items later) */
.cal-item {
	position: absolute;
	left: 6px;
	right: auto;
	width: calc(100% - 12px);
	border-radius: 6px;
	padding: 6px 8px;
	box-sizing: border-box;
	background: rgba(0,0,0,0.08);
	border: 1px solid rgba(0,0,0,0.15);
	font-size: 1.0em;
	font-family: Jost;
	line-height: 1.2;
	pointer-events: auto; /* important for drag/drop later */
	cursor: move;
}

.cal-activity-label {
	position: absolute;
	bottom: 0px;
	right: 0px;
	white-space: nowrap;
	max-width: 60%;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 3px 10px;
	border-radius: 5px;
	pointer-events: none; /* important: don't interfere with dragging */
	opacity: 0.9;
	background: #222;
	color: #fff;
}

.cal-item:hover {
	filter: brightness(0.75);
}

.cal-item .cal-item-title {
	font-weight: 600;
	margin-bottom: 3px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cal-item .cal-item-meta {
	font-size: 0.9em;
	opacity: 0.8;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: #222;
}

/* Optional: show a subtle resize handle for later */
.cal-item .cal-item-resize {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 6px;
	cursor: ns-resize;
	opacity: 0.4;
}

.cal-item.dragging {
	opacity: 0.85;
	box-shadow: 0 6px 14px rgba(0,0,0,0.18);
}

.cal-item.cal-conflict {
	outline: solid 1px #ff0000;
	background: rgba(255, 0, 0, 0.25) !important;
}

.cal-drop-hover {
	background: rgba(0,0,0,0.03);
}

/* Original item while its clone is being dragged */
.cal-item.cal-drag-origin {
	opacity: 0.35;
	filter: grayscale(60%);
}

.cal-item-resize {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 8px;
	cursor: ns-resize;
	opacity: 0.35;
}

	/* A little grip line */
	.cal-item-resize::before {
		content: "";
		position: absolute;
		left: 40%;
		right: 40%;
		top: 3px;
		border-top: 2px solid rgba(0,0,0,0.35);
		border-radius: 2px;
	}

.cal-lock {
	position: absolute;
	top: 6px;
	right: 6px;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: pointer;
	z-index: 5;
}

	.cal-lock img {
		width: 22px;
		height: 22px;
		display: block;
		transition: 0.25s;
	}

	.cal-lock.unlocked img {
		opacity: 0.25; /* faded */
		filter: grayscale(90%);
	}

	.cal-lock.locked img {
		opacity: 1; /* full colour */
		filter: none;
	}

	/* Optional: hover affordance */
	.cal-lock:hover img {
		opacity: 1;
		filter: none;
	}

.cal-conflict {
	background-color: rgba(255, 0, 0, 0.15);
}


/* =========================
   Activity Colour Key
   ========================= */

.activity-key {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin: 0px 0 24px 0;
	font-size: 0.95em;
}

.activity-key-item {
	display: flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.activity-key-swatch {
	width: 14px;
	height: 14px;
	border-radius: 3px;
	border: 1px solid rgba(0,0,0,0.25);
	box-sizing: border-box;
}

.activity-key-label {
	color: #333;
}

.success-message {
	display: inline-block;
	margin-top: 40px;
	color: #145CAB;
	font-weight: 400;
	opacity: 1;
	transition: opacity 1s ease;
}

	.success-message.fade-out {
		opacity: 0;
	}


@media (max-width: 960px) {
	form {
	}

	.leftmenu {
		display: none;
	}

	.topmenu {
		height: auto;
		padding-left: 10px;
	}

		.topmenu .menuitem, .topmenu .menuitemselected {
			width: 90px;
			height: 90px;
		}

			.topmenu .menuitem .pic, .topmenu .menuitemselected .pic {
				width: 50px;
				height: 50px;
			}

	.breadcrumb {
		display: none;
	}

	.main {
		padding: 20px;
	}

	.mobileheader {
		display: block;
		height: 105px;
		background: #f8f8f8;
		padding: 10px 20px 20px 20px;
		margin-left: -30px;
		width: calc(100% + 20px);
		margin-top: 0px;
		margin-bottom: 0px;
	}

		.mobileheader .logo {
			height: 60px;
			margin-top: 10px;
		}

			.mobileheader .logo img {
				height: 100%;
			}

		.mobileheader .loggedin {
			margin-top: 15px;
		}


	.breadcrumb {
		top: 110px;
	}

	.title {
		display: block;
		margin-right: 0px;
		margin-bottom: 3px;
	}

	.value {
		display: block;
		width: 100%;
		margin-bottom: 10px;
	}

	.cal-facility {
		width: 220px;
		flex: 0 0 220px;
	}

	.cal-time {
		width: 60px;
		flex: 0 0 60px;
	}
}