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

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

html, body {
	margin: 0;
	padding: 0;
	height: 100%;
}

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

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

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

h4 {
	font-family: Jost;
	font-size: 1.2em;
	color: #222;
	font-weight: 400;
	margin-top: 0px;
	margin: 20px 0px;
	line-height: 1.4em;
}

.input, .textinput, .button { 
	font-family:Jost;
	font-size:1.0em;
	padding:5px;
	border: solid 1px #ccc;
	border-radius:4px;
	transition:0.25s;
}

.input.warning, .textinput.warning {
	border: solid 1px #ffa500;
	background: #FFF2DD;
}

.button { 
	padding:6px 15px;
}

.button.small { 
	padding:5px 15px;
	margin-left:5px;
}

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

.textinput { 
	padding:6px 5px;
}

		.event {
			margin-top:20px;
		}

	.event .desc { 
	}

	.event .photos { 
		margin-top:20px;
	}

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

	.event .clear { 
		clear:both;
		height:0px;
	}

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

	.event .deep { 
		height:20px;
	}

	.event .dates td {
		width: 360px;
		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:hover { 
		background: #f8f8f8;
	}

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

	.event .dates .fully-booked, .event .dates .limited-spaces { 
		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 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;
	}

	.event h3 { 
		color: #222;
		margin-bottom:10px;
	}
	
	.event .photo { 
		display:inline-block;
		vertical-align:top;
		margin-right:20px;
		margin-bottom:20px;
		height:200px;
	}

	.event .photo img { 
		height:100%;
	}

	.event .line {
		padding: 3px 0px 3px 30px;
		background-image: url(/images/base/date.png);
		background-size: 18px auto;
		background-position: 0px 2px;
		margin-bottom:3px;
		background-repeat: no-repeat;
	}

		.event .line.provider {
			background-image: url(/images/base/provider.png);
			background-position: 0px 5px;
		}

		.event .line.venue {
			background-image: url(/images/base/location.png);
		}

		.event .line.cost {
			background-image: url(/images/base/cost.png);
		}

		.event .line.funding {
			background: #35CC3F;
			padding: 10px 20px;
			color: #fff;
			border-radius: 5px;
			font-size: 1.2em;
			display: inline-block;
			margin-top: 10px;
		}

		.event .book-event {
			display:inline-block;
			padding: 20px;
			margin-top:10px;
			border-radius:5px;
			background: #f8f8f8;
		}

		.event .original-price { 
			text-decoration:line-through;
			color: #888;
			font-size:0.9em;
			padding-right:5px;
		}

		.event .intro { 
			margin-bottom:10px;
		}

		.event .column { 
			max-width:400px;
			display:inline-block;
			vertical-align:top;
			margin-right:50px;
		}

		.event .column.end { 
			margin-right:0px;
			width:800px;
			max-width:calc(100% - 460px);
		}

		.event .column-info { 
			padding:10px 15px;
			background: #444;
			color: #fff;
			display:inline-block;
			margin:10px 0px;
			border-radius:5px;
		}

		.event .total-cost, .event .amount-payable { 
			font-weight:400;
			margin-top:5px;
			font-size:1.0em;
		}

		.event .amount-payable { 
			font-weight:600;
		}

		.event .signed-in { 
			margin-bottom:10px;
		}

		.event .login-error { 
			margin-top:10px;
			color: #aa0000;
		}

		.event .customer-item { 
			display:inline-block;
			vertical-align:middle;
			margin-right:5px;
			margin-bottom:10px;
		}

			.event .customer-info {
				padding: 10px;
				margin-bottom: 10px;
				background: #E8FFE8;
				border-radius:5px;
			}

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

			.event .customer-item .input:read-only:focus {
				outline:none;
			}

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

			.event label { 
				vertical-align:middle;
				padding-left:3px;
			}

			.event .terms-conditions { 
				margin:20px 0px;
				min-height:50px;
				max-height:100px;
				overflow-y:auto;
				padding:10px;
				border: solid 1px #ccc;
				background: #fff;
				font-size:0.9em;
				line-height:1.3em;
			}

			.event .book-button {
				font-size: 1.2em;
			}

			.event .book-button .button {
				width: 100%;
			}

				.event .book-button .button:disabled {
					background: none;
					color: #ccc;
					border: solid 1px #ccc;
					background: #f4f4f4;
				}

				.event .book-button .button:disabled:hover { 
					background: none;
					color: #ccc;
					border: solid 1px #ccc;
					background: #f4f4f4;
				}

		.event .button.left { 
			margin-right:10px;
		}

		.event-question {
			margin-bottom: 20px;
		}

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

		.event-question td {
			display: block; /* each <td> becomes a full-width block */
			margin-bottom: 0.1em;
		}

			.event-question td input[type="checkbox"] {
				width: 1.2em;
				height: 1.2em;
				vertical-align: bottom;
				margin-right: 0.4em;
			}

				.event-question td label { 
					padding-left:3px;
				}

				#marker-caption {
					opacity: 0;
					transition: opacity 0.3s ease;
					pointer-events: none; /* Optional: prevents interaction when hidden */
				}

	#marker-caption.visible {
		opacity: 1;
		pointer-events: auto;
	}

.marker-caption { 
	position: absolute;
	bottom:20px;
	left:50%;
	margin-left:-200px;
	width:560px;
	height:150px;
	z-index:200;
}

.marker-caption-contents { 
	width:100%;
	height:100%;
	background: #fff;
	border-radius:5px;
	box-shadow: #888 2px 2px 10px;
	color: #fff;
	font-size:1.4em;
	position: relative;
}

.marker-caption-pic { 
	width:150px;
	overflow:hidden;
	height:150px;
	display:inline-block;
	vertical-align:top;
	border-top-left-radius:5px;
	border-bottom-left-radius:5px;
}

	.marker-caption-pic img {
		height:100%;
	}

	.marker-caption-details {
		width: calc(100% - 200px);
		padding: 10px 20px;
		display: inline-block;
		vertical-align: top;
		color: #444;
		font-size:0.7em;
	}

	.marker-caption-details h4 {
		margin-top:0px;
		margin-bottom:5px;
		font-size:1.2em;
		font-weight:600;
	}
	
	.marker-caption-close { 
		position: absolute;
		top:5px;
		right:5px;
		padding:2px 9px 4px 9px;
		border: solid 1px #ccc;
		border-radius:4px;
		transition:0.5s;
		font-weight:300;
		background:#fff;
		color: #444;
	}

		.marker-caption-close:hover { 
			cursor:pointer;
			background: #f8f8f8;
		}

	.confirm .intro {
		margin-top: 0px;
		display:inline-block;
		padding:20px;
		background: #f8f8f8;
		line-height:1.5em;
		margin-bottom:20px;
	}

	.confirm .text { 
		margin-bottom:20px;
	}

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

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

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

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

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

.confirm .clear { 
	height:50px;
}

.confirm .status { 
	padding:8px 16px;
	background: #f8f8f8;
	border-radius:3px;
	color: #444;
	text-transform:uppercase;
	font-size:1.2em;
}

	.confirm .status.unconfirmed { 
		background: #ffa500;
		color: #fff;
	}

	.confirm .status.confirmed, .confirm .status.paid, .confirm .status.completed {
		background: #53C672;
		color: #fff;
	}

	.confirm .status.cancelled {
		background: #666;
		color: #fff;
	}

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

.row { 
	font-weight:400;
	border-top: solid 1px #ccc;
	border-bottom: solid 1px #ccc;
}

	.row.header {
		background: #f8f8f8;
		font-size: 1.1em;
	}

.row td { 
	padding:10px 5px;
}

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

.filters{ 
	background: #f8f8f8;
	margin-bottom:0px;
	padding:20px;
	display:inline-block;
}

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

.filters .box.gap { 
	margin-right:20px;
}

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