.em {

	// counter settings (bubble showing applied advanced appearing next to trigger and headings)
	--counter-background : #F36752;
	--counter-color : #fff;
	--counter-background-tentative : #ddd;
	--counter-color-tentative : #888;


	div.em-loading, div#em-loading {
		position:absolute;
		width:100%;
		height:100%;
		background:#FFFFFF url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' style='margin: auto%3B background: none%3B display: block%3B shape-rendering: auto%3B' viewBox='0 0 100 100' preserveAspectRatio='xMidYMid'%3E%3Cg transform='rotate(0 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.9166666666666666s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(30 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.8333333333333334s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(60 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.75s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(90 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.6666666666666666s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(120 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.5833333333333334s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(150 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.5s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(180 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.4166666666666667s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(210 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.3333333333333333s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(240 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.25s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(270 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.16666666666666666s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(300 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='-0.08333333333333333s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3Cg transform='rotate(330 50 50)'%3E%3Crect x='46.5' y='7.5' rx='0' ry='0' width='7' height='21' fill='%2385a2b6'%3E%3Canimate attributeName='opacity' values='1%3B0' keyTimes='0%3B1' dur='1s' begin='0s' repeatCount='indefinite'%3E%3C/animate%3E%3C/rect%3E%3C/g%3E%3C!-- %5Bldio%5D generated by https://loading.io/ --%3E%3C/svg%3E") 50% 50% no-repeat;
		left:0px;
		top:0px;
		opacity:0.8;
		filter:alpha(opacity=80);
		z-index:99998;
		background-size:100px;
	}

	/** The Triggers - Search and other parts triggering search **/
	button.em-clickable {
		cursor: pointer !important;
		justify-self: start !important;
		background-color: transparent;
		margin: 0 !important;
		padding: 0 !important;
		border: 0 !important;
		outline: none;
		&:focus {
			outline: none;
		}
	}
	.hidden {
		display:none !important;
		visibility: hidden !important;
	}

	/* General Styles */
	.em-datepicker {
		fieldset {
			margin-bottom: 0 !important;
		}
		.em-datepicker-data.hidden {
			position:absolute !important;
			left:-10000px !important;
			top:auto !important;
			width:1px !important;
			height:1px !important;
			overflow:hidden !important;
			visibility : visible;
			display: inherit;
		}
		.em-date-input.button.button-secondary {
			width: max-content !important;
			min-height: 30px !important;

			input[type="text"], input[type="date"] {
				opacity: 0 !important;
				width: 1px !important;
				height: 30px !important;
				min-height: 30px !important;
				overflow: hidden !important;
				padding: 0 !important;
				margin: 0 !important;
				display: inline !important;
			}
			+ button.clear-all {
				min-height: 30px !important;
			}
		}
		&.em-datepicker-multiple {
			.em-datepicker-dates {
				margin: 10px 0;
				max-width: 800px;
				line-height: 1;
				&:not(.has-value) {
					display: none;
					visibility: hidden;
				}
				.item {
					background: #dff4fd;
					border: 1px solid #97dbf9;
					color: #0095c3;
					padding-left: 8px;
					border-radius: calc(0.375rem - 1px);
					cursor: pointer;
					margin: 0 3px 3px 0;
					display: inline-flex;
					align-items: center;
					padding-right: 0 !important;

					a.remove {
						color: inherit;
						text-decoration: none;
						vertical-align: middle;
						display: inline-block;
						padding: 1px 5px;
						border-left: 1px solid #dee2e6;
						border-radius: 0 2px 2px 0;
						box-sizing: border-box;
						margin-left: 5px;
					}

					span {
						line-height: 1.5;
					}

					&.clear-all {
						background: #efefef;
						border: 1px solid #cdcdcd;
						color: #777;
						border-left: 1px solid #cdcdcd;
					}

				}
				&.disabled {
					opacity: 0.7;
					pointer-events: none;
				}
			}
		}
		&:not(.has-value) .clear-all {
			visibility: hidden;
			display: none;
		}
	}

	/* Search Results & Event Views */
	&.em-view-container {
		position: relative;
	}

	.em-location-map-container{
		aspect-ratio: 2/1;
		width: 100%;
		.em-loading-maps, .em-location-map-404 {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			height: 100%;
			width: 100%;
			border: 1px dashed #d0d0d0;
			background-color: #fafafa;
			color: #888;
			font-size: 18px;
			padding: 20px;
			text-align: center;
			svg {
				width: 100px;
				max-height: 100px;
			}
			span {
				display:block;
				margin-bottom:20px;
				font-size:20px;
				color: #aaa;
			}
		}
		.em-loading {
			background-position : 50% 10%;
		}
		.em-locations-map, .em-location-map, .em-location-map-content {
			width: 100%;
			height: 100%;
		}
	}

	/*
	Maps - if the info balloons don't look right on your site, chances are it's a CSS issue.
	Google is VERY sensitive to CSS rules for the infowindows, making it hard to accommodate every theme in WP.
	Please edit your theme's CSS to override this
	*/
	.em-location-map, .em-locations-map, #em-map {
		.em-map-balloon-title {
			font-size: 14px;
			font-weight: bold !important;
		}
		.em-map-balloon-content {
			margin:0px 0px 0px 0px !important;
			padding:0px 0px 10px 0px !important;
			font-size:13px !important;
			line-height:18px !important;
			color:#000000  !important;
			width:auto !important;
			max-width:none !important;
			height:auto !important;
			max-height:none !important;
		}
		img {
			max-width:none !important;
			background:none !important;
			border:none !important;
			margin:0 !important;
			padding:0 !important;
			height:auto;
			width:auto;
		}
	}

	/* Warnings */
	.em-warning {
		margin: 10px 0 15px;
		padding: 15px;
		color: #333;
		border-radius: 3px;
		display: block !important;

		p {
			&:last-child {
				margin-bottom: 0 !important;
			}
			margin: 0 0 10px !important;
			padding: 0;
			color: #333
		}

		&.em-warning-errors, &.error {
			background-color: #FFEBE8;
			border: 1px solid #C00;
		}

		&.em-warning-confirms, &.confirm {
			background-color: #f1fff0;
			border: 1px solid #a8d144;
		}
	}

	a.em-button {
		padding: 5px 10px;
		margin: 5px;
		background: #EEE;
		color: #333;
		border: 1px solid #CCC;
		border-radius: 3px;
		display: inline-block;
		text-decoration: none;
	}

	a.em-button:hover {
		text-decoration: none;
	}

	// General Styling
	--font-size: 16px;
	--line-height: 20px;
	--default-color : #666666;
	--default-border: #4b86b4;
	/* #2a4d69 • #4b86b4 • #adcbe3 • #e7eff6 • #63ace5 */
	--palette-1-bg : #03396c; /* for things like table headings or borders of tables */
	--palette-1-color : #FFFFFF;
	--meta-color : #787878;
	--meta-bg : transparent;
	--main-bg : #F5F5F5; // bookings
	--main-h3-color : #777777; // bookings
	--main-border-color : #cdcdcd; // bookings

	.em-notice {
		// Note that this is a span, allowing something like a DIV to enjoy JS functionality without the styling like in AJAXify
		padding: 15px !important;
		margin-bottom: 20px !important;
		margin-top: 20px !important;
		border: 1px solid #b6d4fe !important;
		border-radius: 2.5px !important;
		display: block !important;
		color: #084298 !important;
		background-color: #cfe2ff !important;

		p { margin:10px 0 !important; padding:0; }

		&.em-notice-error {
			color: #842029 !important;
			background-color: #f8d7da !important;
			border-color: #f5c2c7 !important;
		}

		&.em-notice-success {
			color: #0f5132 !important;
			background-color: #d1e7dd !important;
			border-color: #badbcc !important;
		}
		&.em-notice-warning {
			color: #664d03;
			background: #fff3cd;
			border-color: #ffecb5;
		}
		&.em-notice-icon {
			display:grid !important;
			grid-template-columns : 25px auto;
			grid-gap: 10px;

			.em-icon {
				align-self: center;
			}
		}
		&.em-notice-thin {
			padding: 10px 15px !important;
		}
	}

	.em-inline-error {
		color: red;
		display: block;
		width: 100%;
		margin: 8px 0 0;

		.em-icon {
			background-color: red;
			-webkit-mask-image: var(--icon-cross-circle);
			mask-image: var(--icon-cross-circle);
		}
	}

	.skeleton {
		box-sizing: border-box;
		position : relative;
		overflow: hidden;

		.item {
			display: block;
			width: 100%;
			height: 38px;
			margin-bottom: 15px;
			border : 1px solid var(--background-color-skeleton-softer);
			border-radius: 4px;
			background-color: var(--background-color-skeleton);
			box-shadow: none;
			overflow: hidden;
			position: relative;

			&::after {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				transform: translateX(-100%);
				background-image: linear-gradient(
								90deg,
								rgba(#fff, 0) 0,
								rgba(#fff, 0.2) 80%,
								rgba(#fff, 0.5) 20%,
								rgba(#fff, 0)
				);
				animation: shimmer 1.5s infinite;
				content: '';
			}

			&.label {
				width: 33%;
				height: 14px;
				margin-bottom: 8px;
				border-radius: 0;
			}

			&.text {
				height: 26px;
				border-radius: 0;
			}

			&.title {
				margin-bottom: 15px;
				border-radius: 0;
			}
		}

		@keyframes shimmer {
			100% {
				transform: translateX(110%);
			}
		}
	}
}

// could be on same element as em class or in child
.em-working {
	opacity : 0.5;
	div.em-loading, div#em-loading {
		background-color: transparent !important;
	}
}

/* Fix z-index issues for some 3rd party stuff */
body .pac-container, .em .flatpickr-calendar {
	z-index : 100000 !important;
}