:root
{
	--colour-aqua-island: #aad3df;
	--colour-pop-blue: #0083b0;
	--colour-pop-blue-hover: #00688c;
	--colour-pop-blue-active: #005d7e;
	--colour-coral: #ff6b6b;
	--colour-coral-hover: #e05353;
	--colour-coral-active: #c23b3b;
	--colour-red: #f44336;
	--colour-dark-teal: #0f4c61;
	--colour-dark-teal-hover: #0a3342;
	--colour-page-background: #f7f7f7;
	--colour-page-background-hover: #dbe3e6;
}

.list-group
{
	--bs-list-group-active-bg: var(--colour-dark-teal);
}

.btn-primary
{
	--bs-btn-bg: var(--colour-pop-blue);
	--bs-btn-border-color: var(--colour-pop-blue);
	--bs-btn-hover-bg: var(--colour-pop-blue-hover);
	--bs-btn-active-bg: var(--colour-pop-blue-active);
}

.bg-wave-svg
{
	background-image: /* Layer 1: Muted Ice Blue Mid-Wave */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23aad3df' fill-opacity='0.4' d='M0,192L48,197.3C96,203,192,213,288,192C384,171,480,117,576,112C672,107,768,149,864,165.3C960,181,1056,171,1152,149.3C1248,128,1344,96,1392,80L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E"),
		/* Layer 2: Solid Ice Blue Top Wave */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320' preserveAspectRatio='none'%3E%3Cpath fill='%23b2e1eb' fill-opacity='1' d='M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,122.7C672,117,768,139,864,154.7C960,171,1056,181,1152,165.3C1248,149,1344,107,1392,85.3L1440,64L1440,0L1392,0C1344,0,1248,0,1152,0C1056,0,960,0,864,0C768,0,672,0,576,0C480,0,384,0,288,0C192,0,96,0,48,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
	background-position: top center;
	background-repeat: no-repeat;
	background-size: 100vw 250px;
}
.bg-aqua-island
{
	background-color: var(--colour-aqua-island);
}
.text-aqua-island
{
	color: var(--colour-aqua-island);
}
.browserupgrade
{
	margin-bottom: 0;
	border: none;
}

.navbar
{
	z-index: 2;
}

.navbar
{

	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

.navbar-light .navbar-nav .nav-link
{

	--bs-nav-link-color: var(--colour-coral);
	font-family: 'Lato', sans-serif;
	font-size: 20px;
}

.navbar-light .navbar-brand
{
	font-family: 'Lato', sans-serif;
	font-size: 40px;
	font-weight: 400;
	color: #777;
}

.navbar-light .navbar-brand strong
{
	font-weight: 900;
	color: var(--colour-red);
}

.navbar-light .navbar-nav .active.nav-item
{
	background-color: var(--colour-page-background-hover);
}

.bg-dark-teal
{
	background-color: var(--colour-dark-teal);
}
.text-dark-teal
{
	color: var(--colour-dark-teal);
}
.bg-dark-teal .invalid-feedback
{
	color: var(--colour-coral);
}

.bg-page-background
{
	background-color: var(--colour-page-background);
}


.bg-glass
{
	background-color: rgba(255, 255, 255, .15);
	backdrop-filter: blur(5px);
}

.card-raised
{
	border: none;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.form-icon
{
	background-color: #343a40;
	padding: 10px;
	border-radius: 100px;
	color: white;
}

.bg-dark-teal .form-icon
{
	background-color: white;
	color: #495057;
}

.text-wrap
{
	white-space: normal;
}

body#account-sign-in .panel-signup
{
	background-image: url(/img/general/account/field.svg);
	background-position-y: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #b3d7ff;
}

body#account-sign-in .panel-signup a,
body#account-sign-in .panel-signup a:hover
{
	color: #343a40;
}

body#homepage .footpath
{
	text-shadow: 0 0 10px var(--colour-red), 0 0 10px var(--colour-red);
}

body#homepage .bridleway
{
	text-shadow: 0 0 10px magenta, 0 0 10px magenta;
}

body#homepage .byway
{
	text-shadow: 0 0 10px blue, 0 0 10px blue;
}

body#homepage .section-2
{
	background-color: #edf1f4;
	color: #515969;
}


body#homepage .section-4
{
	background-color: #304559;
	color: white;
}

body#homepage .rounded-number
{
	border-radius: 100px;
	height: 200px;
	width: 200px;
}

body#homepage .rounded-number .lead
{
	color: #304559;
	text-shadow: 0 0 5px #304559;
	font-size: 50px;
}

body#homepage sup
{
	font-size: 60%;
}

/* fix to stop Chrome Android hiding address bar on modal scroll (which then leaves page too high when close) */
html#map.modal-open
{
	overflow-y: scroll;
	height: 100vh !important;
}

html#map .btn-outline-secondary:not(:disabled):not(.disabled).active,
html#map .btn-outline-secondary:not(:disabled):not(.disabled):active,
html#map .show > .btn-outline-secondary.dropdown-toggle
{
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}

html#map .popover-map-click
{
	bottom: 5px;
	top: initial;
	left: -13px;
}

html#map .popover-map-click-max-width
{
	width: 380px;
	max-width: calc(100vw - 2rem);
}

html#map .map-click-popover
{
	overflow: hidden;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-lg);
	box-shadow: 0 .4rem 1.25rem rgba(0, 0, 0, .22);
	font-size: .875rem;
}

html#map .map-click-popover-item
{
	padding: .875rem;
}

html#map .map-click-popover-item + .map-click-popover-item
{
	border-top: var(--bs-border-width) solid var(--bs-border-color);
}

html#map .map-click-popover-item > :last-child
{
	margin-bottom: 0;
}

html#map .hill-popover
{
	font-weight: 400;
}

html#map .hill-popover-header
{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: .75rem;
	margin-bottom: .75rem;
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

html#map .hill-popover-header-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	color: white;
	background-color: var(--colour-dark-teal);
	border-radius: 50%;
}

html#map .hill-popover-header-icon-dark-text
{
	color: #081d58;
}

html#map .hill-popover-heading
{
	min-width: 0;
}

html#map .hill-popover-eyebrow
{
	display: block;
	margin-bottom: .1rem;
	color: var(--bs-secondary-color);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

html#map .hill-popover-title
{
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}

html#map .hill-popover-metrics
{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .5rem;
	margin: 0;
}

html#map .hill-popover-metric
{
	padding: .625rem .75rem;
	background-color: var(--bs-tertiary-bg);
	border-radius: var(--bs-border-radius);
}

html#map .hill-popover-metric dt
{
	margin-bottom: .15rem;
	color: var(--bs-secondary-color);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

html#map .hill-popover-metric dd
{
	display: flex;
	align-items: baseline;
	gap: .2rem;
	margin: 0;
}

html#map .hill-popover-metric strong
{
	font-size: 1.3rem;
	line-height: 1;
}

html#map .hill-popover-metric dd span
{
	color: var(--bs-secondary-color);
	font-size: .75rem;
	font-weight: 600;
}

html#map .hill-popover-categories
{
	margin-top: .75rem;
}

html#map .hill-popover-categories h4
{
	margin: 0 0 .4rem;
	color: var(--bs-secondary-color);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

html#map .hill-popover-category-list
{
	display: flex;
	flex-wrap: wrap;
	gap: .3rem;
}

html#map .hill-popover-category-list span
{
	padding: .25rem .5rem;
	color: var(--colour-dark-teal);
	background-color: rgba(15, 76, 97, .1);
	border: 1px solid rgba(15, 76, 97, .18);
	border-radius: 999px;
	font-size: .72rem;
	font-weight: 600;
}

html#map .poi-popover
{
	font-weight: 400;
}

html#map .poi-popover-header
{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: .75rem;
	margin-bottom: .75rem;
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

html#map .poi-popover-header-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.75rem;
	width: 2.75rem;
	height: 2.75rem;
	background-color: var(--bs-tertiary-bg);
	border-radius: 50%;
}

html#map .poi-popover-header-icon img
{
	width: 30px;
	height: 30px;
}

html#map .poi-popover-heading
{
	min-width: 0;
}

html#map .poi-popover-eyebrow
{
	display: block;
	margin-bottom: .1rem;
	color: var(--bs-secondary-color);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

html#map .poi-popover-title
{
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}

html#map .poi-popover-description
{
	margin: 0;
	color: var(--bs-secondary-color);
	font-size: .82rem;
	font-weight: 400;
	line-height: 1.45;
}

html#map .poi-popover-link
{
	display: block;
	width: 100%;
	margin-top: .75rem;
}

html#map .national-trail-popover
{
	font-weight: 400;
}

html#map .national-trail-popover-header
{
	display: flex;
	align-items: center;
	gap: .75rem;
}

html#map .national-trail-popover-header-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	color: white;
	background-color: var(--colour-dark-teal);
	border-radius: 50%;
}

html#map .national-trail-popover-heading
{
	min-width: 0;
}

html#map .national-trail-popover-eyebrow
{
	display: block;
	margin-bottom: .1rem;
	color: var(--bs-secondary-color);
	font-size: .68rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

html#map .national-trail-popover-title
{
	margin: 0;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.2;
}

/* show on top of other elements */
html#map .popover-map-click-favourite-update-container,
html#map .popover-map-click-national-trail-container,
html#map .popover-map-click-point-of-interest-container
{
	z-index: 11;
}

/* IE11 fix */
html#map .popover.show .popover-body
{
	background-color: white;
}

html#map .ol-zoom
{
	bottom: 5px;
	top: auto;
	left: auto;
	right: 5px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	background-color: white;
}

html#map .ol-zoom .ol-zoom-in
{
	border-bottom: thin solid #dfdfdf;
}

html#map .base-map-style-option
{
	cursor: pointer;
	line-height: 1.25;
}

html#map .base-map-style-option:focus-within
{
	position: relative;
	z-index: 1;
	box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}

html#map .ordnance-survey-label-short
{
	display: none;
}

@media (max-width: 575.98px)
{
	html#map [data-fpm-on-click="ordnance-survey"].active .ordnance-survey-label-full
	{
		display: none;
	}

	html#map [data-fpm-on-click="ordnance-survey"].active .ordnance-survey-label-short
	{
		display: inline;
	}
}

html#map .ol-control
{
	background: white;
}

html#map .ol-control button
{
	color: #747474;
	background-color: transparent;
}

html#map .ol-control button:hover
{
	color: black;
}

html#map .ol-attribution
{
	font-size: 0.75em;
	background-color: rgba(255, 255, 255, 0.5);
	bottom: 5px;
	left: 5px;
	right: inherit;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
	/* above ol-scale-bar */
	z-index: 2;
}

html#map .ol-scale-bar
{
	left: 40px;
	/* below ol-attribution */
	z-index: 1;
	bottom: -10px;
}

/* change from bottom text to top text, have to !important due to inline styles from OL */
html#map .ol-scale-bar .ol-scale-step-marker
{
	top: -15px !important;
}

html#map .ol-scale-bar .ol-scale-step-text
{
	bottom: 28px;
}

/* change colour to match style */
.ol-scale-bar .ol-scale-bar-inner > div > div:nth-of-type(odd) .ol-scale-singlebar
{
	background-color: #f44336 !important;
}

html#map .ol-geo-location-center
{
	background-color: #4285f4;
	right: 5px;
	bottom: 65px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
}

html#map .ol-geo-location-center button,
html#map .ol-geo-location-center button:hover
{
	color: white;
}

/* on touch device font size increased to 1.5em */
html#map .ol-touch .ol-attribution button
{
	font-size: 1em;
}

html#map .ol-touch .ol-geo-location-center
{
	bottom: 85px;
}

/* allow error modal to overlay edit overlay */
html#map .modal.modal-on-top
{
	z-index: 1052 !important;
}

/* as nth-of-type applies to type rather than selection set have to add this with JS */
html#map .modal-backdrop.show-behind
{
	z-index: 1051 !important;
}

html#map .widget-pane
{
	width: 50%;
	max-width: 400px;
	min-width: 250px;
	position: absolute;
	top: 0;
	z-index: 9;
	opacity: 0;
	left: 0;
	transform: translateY(-3000px);
	transition: 0.2s all;
	transition-timing-function: cubic-bezier(0.0, 0.0, 0.2, 1);
}

html#map .widget-pane-visible
{
	transform: translateY(0px);
	opacity: 1;
	height: 100%;
	box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
	background: #f5f5f5;
}

html#map .user-select-none
{
	user-select: none;
	/* iOS pre 13.2 */
	-webkit-user-select: none;
}

/* iOS workaround for disabled meta user-scalable=no */
html#map .ios-tap-zoom-none
{
	touch-action: none;
}

/* iOS fix for broken 100% height */
html#map .ol-viewport-main
{
	flex-grow: 1 !important;
	height: initial !important;
}

/* bearing control */
html#map .triangle-outer,
html#map .triangle-inner
{
	position: absolute;
	display: inline-block;
	width: 0;
	height: 0;
	border-style: solid;
}

html#map .triangle-outer
{
	border-width: 0 9px 16px 9px;
	border-color: transparent transparent white transparent;
}

html#map .triangle-inner
{
	left: -5px;
	top: 4px;
	border-width: 0 5px 10px 5px;
	border-color: transparent transparent #6980fe transparent;
}

html#map .navbar
{
	width: calc(50% - 16px);
	max-width: calc(400px - 16px);
	min-width: calc(250px - 16px);

	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;

	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.02);
	margin: 8px 0 8px 8px;
	line-height: 1.25;
}

html#map .toast-w-400 {
	--bs-toast-max-width: 400px;
}

html#map .brand-lg
{
	display: none;
}

html#map .widget-pane .navbar-spacer
{
	height: 70px;
}

html#map .widget-pane .list-group
{
	border-radius: 2px;
}

html#map .widget-pane .list-group .list-group-item
{
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

html#map .widget-pane .list-group .list-group-item-action:focus
{
	outline: none;
}

html#map .widget-pane .list-group .list-group-item-action:hover:not(.active)
{
	color: #fff;
	background-color: #6c757d;
}

html#map [data-fpm-on-hold="route-folder-visibility"]
{
	position: relative;
	overflow: hidden;
	touch-action: pan-y;
	user-select: none;
	-webkit-touch-callout: none;
}

html#map [data-fpm-on-hold="route-folder-visibility"]::before
{
	position: absolute;
	z-index: 0;
	inset: 0;
	background-color: rgba(15, 76, 97, .75);
	content: '';
	pointer-events: none;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 150ms ease-out;
}

html#map [data-fpm-on-hold="route-folder-visibility"].active::before
{
	background-color: rgba(255, 255, 255, .75);
}

html#map [data-fpm-on-hold="route-folder-visibility"].route-folder-hold-active::before
{
	transform: scaleX(1);
	transition-delay: var(--fpm-route-folder-hold-delay, 150ms);
	transition-duration: var(--fpm-route-folder-hold-duration, 800ms);
	transition-timing-function: linear;
}

html#map [data-fpm-on-hold="route-folder-visibility"].route-folder-hold-complete::before
{
	opacity: 0;
	transform: scaleX(0);
	transition: none;
}

html#map [data-fpm-on-hold="route-folder-visibility"] > *
{
	position: relative;
	z-index: 1;
}

html#map [data-fpm-on-hold="route-folder-visibility"].route-folder-hold-loading
{
	cursor: wait;
}

html#map .widget-pane .widget-pane-hide
{
	box-shadow: 0 -2px 4px rgba(0, 0, 0, .2);
}

html#map .widget-pane-show
{
	width: calc(50% - 16px);
	max-width: calc(400px - 16px);
	min-width: calc(250px - 16px);

	position: absolute;
	left: 0;
	top: 60px;
	z-index: 8;

	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.02);
	margin: 8px 0 8px 8px;

	background-color: rgba(248, 249, 250, 0.75);
	font-weight: bold;
}

html#map .widget-pane-show:disabled
{
	background-color: rgba(248, 249, 250, 0.75);
	opacity: 1;
}

html#map .widget-pane-show:hover
{
	color: black;
}

html#map select.font-awesome
{
	font-family: 'Font Awesome 5 Free', 'sans-serif';
}

html#map .premium-offer
{
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2), 0 -1px 0 rgba(0, 0, 0, 0.02);
	z-index: 1;
}

html#map .btn-group-toggle input
{
	position: absolute;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
}

html#map .btn-group-toggle input:checked + span
{
	color: #fff;
	background-color: #007bff;
	border-color: #007bff;
}

html#map .logo
{
	height: 20px;
}

html#map #map-key .modal-body
{
	background-color: var(--bs-tertiary-bg);
}

html#map #map-key .map-key-section
{
	padding: 1rem;
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-lg);
	box-shadow: var(--bs-box-shadow-sm);
}

html#map #map-key .map-key-section + .map-key-section
{
	margin-top: 1rem;
}

html#map #map-key .map-key-section-heading
{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: .875rem;
	margin-bottom: 1rem;
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

html#map #map-key .map-key-section-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--colour-dark-teal);
	background-color: rgba(15, 76, 97, .12);
	border-radius: 50%;
}

html#map #map-key .map-key-group-title
{
	margin: 0 0 .5rem;
	color: var(--bs-secondary-color);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

html#map #map-key .list-group
{
	gap: .5rem;
}

html#map #map-key .list-group-item
{
	padding: .625rem .75rem;
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	border-radius: var(--bs-border-radius) !important;
}

html#map #map-key .list-group-item > .row
{
	align-items: center;
	flex-wrap: nowrap;
	min-height: 3.25rem;
	--bs-gutter-x: .75rem;
}

html#map #map-key .list-group-item > .row > div:first-child
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 7rem;
	width: 7rem;
	min-height: 2.75rem;
	padding: .375rem .5rem;
	background-color: var(--bs-tertiary-bg);
	border-radius: var(--bs-border-radius-sm);
}

html#map #map-key .list-group-item > .row > div:first-child > div
{
	width: 100%;
}

html#map #map-key .list-group-item > .row > div:last-child
{
	flex: 1 1 auto;
	width: auto;
	font-size: .925rem;
	font-weight: 600;
}

html#map #map-key .list-group-item .logo
{
	height: 22px;
}

html#map #map-key .list-group-item .logo + .logo
{
	margin-left: 2px;
}

html#map #map-key .map-key-poi-icon-set
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 2px;
}

html#map #map-key .map-key-poi-icon-set .logo
{
	flex: 0 0 auto;
	margin-left: 0;
}

html#map #map-key .map-key-poi-price-arrow
{
	color: var(--bs-secondary-color);
	font-size: .75rem;
}

html#map #map-key .map-key-hill-marker
{
	position: relative;
	display: block;
	width: 22px;
	height: 20px;
	background-color: black;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

html#map #map-key .map-key-hill-marker::after
{
	position: absolute;
	top: 3px;
	left: 3px;
	display: block;
	width: 16px;
	height: 15px;
	content: '';
	background-color: #41b6c4;
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
}

html#map #map-key .map-key-location-position
{
	display: block;
	width: 14px;
	height: 14px;
	background-color: rgb(66, 133, 244);
	border: 2px solid white;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

html#map #map-key .map-key-location-accuracy
{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	background-color: rgba(66, 133, 244, .25);
	border-radius: 50%;
}

html#map #map-key .map-key-location-heading
{
	position: relative;
	display: block;
	width: 25px;
	height: 30px;
}

html#map #map-key .map-key-location-heading svg
{
	position: absolute;
	top: 0;
	left: 0;
	fill: rgba(66, 133, 244, .32);
}

html#map #map-key .map-key-location-heading .map-key-location-position
{
	position: absolute;
	top: 15px;
	left: 5.5px;
}

html#map #map-key .map-key-location-bearing
{
	position: relative;
	display: block;
	width: 18px;
	height: 16px;
	filter: drop-shadow(0 0 1px rgba(0, 0, 0, .25));
}

html#map #map-key .map-key-location-bearing::before,
html#map #map-key .map-key-location-bearing::after
{
	position: absolute;
	display: block;
	width: 0;
	height: 0;
	content: '';
	border-style: solid;
}

html#map #map-key .map-key-location-bearing::before
{
	border-width: 0 9px 16px;
	border-color: transparent transparent white;
}

html#map #map-key .map-key-location-bearing::after
{
	top: 4px;
	left: 4px;
	border-width: 0 5px 10px;
	border-color: transparent transparent #6980fe;
}

html#map #map-key .accordion-button
{
	font-weight: 600;
}

@media (min-width: 1200px)
{
	html#map #map-key .map-key-premium-overlay-list,
	html#map #map-key .map-key-poi-list
	{
		display: grid;
	}

	html#map #map-key .map-key-premium-overlay-list
	{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	html#map #map-key .map-key-poi-list
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px)
{
	html#map #map-key .map-key-section > .row > .col-sm-6
	{
		flex: 0 0 auto;
		width: 100%;
	}
}

@media (max-width: 575.98px)
{
	html#map #map-key .map-key-section
	{
		padding: .875rem;
	}

	html#map #map-key .list-group-item > .row > div:first-child
	{
		flex-basis: 5.5rem;
		width: 5.5rem;
	}

	html#map #map-key .list-group-item .logo
	{
		height: 18px;
	}
}

html#map .hill-settings-modal .modal-body
{
	background-color: var(--bs-tertiary-bg);
}

html#map .hill-settings-tip
{
	display: flex;
	align-items: center;
	gap: .875rem;
	padding: .875rem 1rem;
	margin-top: 1rem;
	color: var(--bs-body-color);
	background-color: rgba(15, 76, 97, .08);
	border: var(--bs-border-width) solid rgba(15, 76, 97, .2);
	border-radius: var(--bs-border-radius-lg);
}

html#map .hill-settings-tip strong,
html#map .hill-settings-tip span
{
	display: block;
}

html#map .hill-settings-tip span:not(.hill-settings-tip-icon)
{
	margin-top: .125rem;
	font-size: .875rem;
}

html#map .hill-settings-tip-icon,
html#map .hill-settings-section-icon
{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 2.5rem;
	width: 2.5rem;
	height: 2.5rem;
	color: var(--colour-dark-teal);
	background-color: rgba(15, 76, 97, .12);
	border-radius: 50%;
}

html#map .hill-settings-section
{
	padding: 1rem;
	background-color: var(--bs-body-bg);
	border: var(--bs-border-width) solid var(--bs-border-color);
	border-radius: var(--bs-border-radius-lg);
	box-shadow: var(--bs-box-shadow-sm);
}

html#map .hill-settings-section + .hill-settings-section
{
	margin-top: 1rem;
}

html#map .hill-settings-section-heading
{
	display: flex;
	align-items: center;
	gap: .75rem;
	padding-bottom: .875rem;
	margin-bottom: 1rem;
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

html#map .hill-height-scale
{
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: .375rem;
}

html#map .hill-height-band
{
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: .375rem;
	min-height: 3.25rem;
	padding: .5rem .375rem;
	color: var(--bs-body-color);
	background-color: var(--bs-tertiary-bg);
	border: 1px solid rgba(0, 0, 0, .12);
	border-radius: var(--bs-border-radius-sm);
	font-size: .8rem;
	font-weight: 700;
	text-align: center;
}

html#map .hill-height-band::before
{
	display: block;
	width: 18px;
	height: 16px;
	content: '';
	background-color: var(--hill-colour);
	clip-path: polygon(50% 0, 100% 100%, 0 100%);
	filter: drop-shadow(0 0 1px black);
}

html#map .hill-settings-filter-header
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-bottom: 1rem;
	border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

html#map .hill-filter-group
{
	margin-top: 1.25rem;
}

html#map .hill-filter-group-title
{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 .625rem;
	color: var(--bs-secondary-color);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
}

html#map .hill-filter-group-title span
{
	padding: .2rem .5rem;
	background-color: var(--bs-tertiary-bg);
	border-radius: 999px;
	font-size: .7rem;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

html#map .hill-filter-list
{
	display: grid;
	gap: .5rem;
}

html#map .hill-filter-item
{
	padding: .875rem;
	border: var(--bs-border-width) solid var(--bs-border-color) !important;
	border-radius: var(--bs-border-radius) !important;
	cursor: pointer;
}

html#map .hill-filter-item:hover
{
	background-color: var(--bs-tertiary-bg);
	border-color: var(--bs-secondary-border-subtle) !important;
}

html#map .hill-filter-item:focus-within
{
	outline: 2px solid var(--bs-primary);
	outline-offset: 1px;
}

html#map .hill-filter-item-layout
{
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	gap: .625rem;
}

html#map .hill-filter-switch
{
	padding-top: .125rem;
}

html#map .hill-filter-switch .form-check
{
	min-height: 0;
	margin: 0;
}

html#map .hill-filter-content,
html#map .hill-filter-description
{
	display: block;
}

html#map .hill-filter-title-row
{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: .75rem;
}

html#map .hill-filter-name
{
	font-size: 1rem;
	font-weight: 700;
}

html#map .hill-filter-flags
{
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	gap: .2rem;
}

html#map .hill-filter-flags img
{
	width: 20px;
	height: 14px;
	object-fit: cover;
	border: 1px solid rgba(0, 0, 0, .12);
}

html#map .hill-filter-description
{
	margin-top: .25rem;
	color: var(--bs-secondary-color);
	font-size: .8rem;
	line-height: 1.35;
}

html#map .hill-filter-meta
{
	display: flex;
	flex-wrap: wrap;
	gap: .25rem;
	margin-top: .5rem;
}

@media (min-width: 1200px)
{
	html#map .hill-height-scale
	{
		grid-template-columns: repeat(9, minmax(0, 1fr));
	}

	html#map .hill-filter-list
	{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 575.98px)
{
	html#map .hill-settings-section
	{
		padding: .875rem;
	}

	html#map .hill-settings-filter-header
	{
		align-items: stretch;
		flex-direction: column;
	}

	html#map .hill-settings-filter-header .btn-group
	{
		align-self: stretch;
	}

	html#map .hill-settings-modal .modal-footer .text-muted
	{
		width: 100%;
	}
}


/* checkbox style hills buttons */
html#map :checked + span
{
	color: #fff;
	background-color: #6c757d;
	border-color: #6c757d;
}

body#county .header
{
	position: relative;
}

body#county .header img.full-width
{
	display: block;
	width: 100%;
	height: calc(100vh / 3);
	object-fit: cover;
}

body#county .header img.county-outline
{
	position: absolute;
	bottom: -10px;
	left: 5%;
	filter: drop-shadow(5px 5px 5px white);
	z-index: 1;
	height: 70%;
	max-width: 50%;
}

body#county .cover
{
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85));
	bottom: 0;
	height: 120px;
	position: absolute;
	width: 100%;
}

body#county .header h1
{
	position: absolute;
	right: 20px;
	bottom: 0;
	color: var(--colour-red);
	font-family: 'Lato', sans-serif;
	font-weight: 900;
	font-size: 6vw;
	z-index: 2;
}

body#county .card-county-walk
{
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
	color: #212529;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
}

body#county .card-county-walk:hover
{
	color: #212529;
	text-decoration: none;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

body#county .card-county-walk .badge
{
	position: absolute;
	bottom: 10px;
	right: 10px;
}

body#county .card-county-walk .text-relative-center
{
	text-align: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background: rgba(96, 125, 139, 0.7);
	color: white;
	border-radius: 5px;
}

body#account-premium .hills
{
	background-image: url(/img/general/account/field.svg);
	background-position-y: bottom;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #b3d7ff;
}

body#account-premium .tool
{
	background-color: #ecf0f1;
}

body#account-premium .layer
{

	min-height: 200px;
	background-color: var(--colour-coral);
}

body#account-premium .basemap
{
	min-height: 200px;
}

body#account-premium .lg-margin-left,
body#account-premium .lg-margin-right
{
	z-index: 2;
}

@media (min-width: 768px)
{
	body#account-premium .lg-margin-left
	{
		margin-left: -25px;
	}

	body#account-premium .basemap .lg-margin-left,
	body#account-premium .tool .lg-margin-left
	{
		background: linear-gradient(to right, rgba(0,0,0,0) 0px,var(--colour-page-background-hover) 10px);
	}

	body#account-premium .layer .lg-margin-left
	{
		background: linear-gradient(to right, rgba(0, 0, 0, 0) 0px, var(--colour-coral) 10px);
	}

	body#account-premium .lg-margin-right
	{
		margin-right: -25px;
	}

	body#account-premium .basemap .lg-margin-right,
	body#account-premium .tool .lg-margin-right
	{
		background: linear-gradient(to left, rgba(0, 0, 0, 0) 0px, var(--colour-page-background-hover) 10px);
		border-left: thin solid #e1e5e8;
	}

	body#account-premium .layer .lg-margin-right
	{
		background: linear-gradient(to left, rgba(0, 0, 0, 0) 0px, var(--colour-coral) 10px);
	}

	body#account-premium .layer .lg-border-start
	{
		border-left: thin solid #dee2e6;
	}
}

@media (max-width: 767.98px)
{
	body#account-premium .margin-up
	{
		margin-top: -25px;

	}

	body#account-premium .basemap .margin-up
	{
		background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0px, rgba(236, 240, 241, 0.75) 10px);
	}

	body#account-premium .margin-down
	{
		margin-bottom: -25px;
	}

	body#account-premium .basemap .margin-down,
	body#account-premium .tool .margin-down
	{
		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(236, 240, 241, 0.75) 10px);
	}

	body#account-premium .layer .margin-down
	{
		background: linear-gradient(to top, rgba(0, 0, 0, 0) 0px, rgba(233, 30, 99, 0.75) 10px);
	}
}

body#account-detail .premium-overlay *
{
	pointer-events: none;
}

body#account-detail .premium-overlay
{
	transition: filter 0.5s ease;
}

body#account-detail .premium-overlay:hover
{
	filter: blur(3px);
}

body#account-detail .btn input[type="radio"]
{
	position: absolute;
	clip: rect(0, 0, 0, 0);
	pointer-events: none;
}

body#account-detail .btn:has(input[type="radio"]:checked)
{
	color: #fff;
	background-color: var(--colour-dark-teal);
	border-color: var(--colour-dark-teal-hover);
}

body#error-404 section.container-fluid
{
	background-image: url(/img/general/error/404.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
}

body#error-500 section.container-fluid
{
	background-image: url(/img/general/error/500.svg);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center bottom;
}


html#map .btn-check-label {
	height: calc(
		var(--bs-btn-line-height) * 1em +
		(var(--bs-btn-padding-y) * 2) +
		(var(--bs-btn-border-width) * 2)
	);
	--bs-btn-hover-bg: var(--bs-btn-bg);
	--bs-btn-active-bg: var(--bs-btn-bg);
	--bs-btn-hover-border-color: var(--bs-btn-border-color);
	--bs-btn-active-border-color: var(--bs-btn-border-color);
}

html#map .aspect-square {
	aspect-ratio: 1;
}

html#map .btn-check-label .badge{
	font-size: .65rem;
	min-width: 1.25rem;
}

html#map .btn-check:checked + .btn-check-label {
	box-shadow:
		0 0 0 .25rem var(--bs-primary-bg-subtle),
		0 0 0 .4rem var(--bs-primary);
}

html#map .btn-check:checked + .btn-check-label .fa-check {
	display: inline-block !important;
}

html#map .btn-subtle {
	--bs-btn-color: var(--bs-secondary-color);
	--bs-btn-bg: var(--bs-tertiary-bg);
	--bs-btn-border-color: var(--bs-border-color);

	--bs-btn-hover-color: var(--bs-emphasis-color);
	--bs-btn-hover-bg: var(--bs-secondary-bg);
	--bs-btn-hover-border-color: var(--bs-border-color);

	--bs-btn-active-color: var(--bs-emphasis-color);
	--bs-btn-active-bg: var(--bs-secondary-bg);
	--bs-btn-active-border-color: var(--bs-border-color);

	--bs-btn-focus-shadow-rgb: var(--bs-secondary-rgb);
}

html#map .gap-15px
{
	gap: 15px;
}

html#map [data-fpm-modal="customise-map"] .scale-bar
{
	display: inline-block;
	width: 120px;
	height: 10px;
	background: linear-gradient(90deg, white 0%, white 50%, #f44336 50%);
}

html#map [data-fpm-modal="customise-map"] .customise-map-setting-dirty
{
	background-color: rgba(var(--bs-warning-rgb), .1);
}

html#map [data-fpm-default-location="map"]
{
	transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

html#map [data-fpm-default-location="map"]:focus
{
	outline: 0;
	border-color: var(--bs-primary) !important;
	box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
	cursor: crosshair;
}

html#map .btn-check-label-colour-picker {
	--custom-colour: white;

	border: 2px solid transparent;

	background:
		linear-gradient(var(--custom-colour), var(--custom-colour)) padding-box,
		conic-gradient(
			#f44336,
			#ff9800,
			#ffeb3b,
			#4caf50,
			#00bcd4,
			#2196f3,
			#9c27b0,
			#e91e63,
			#f44336
		) border-box;
}

html#map .btn-check-label-colour-picker i {
	width: 1.4rem;
	height: 1.4rem;
	display: flex;
	align-items: center;
	justify-content: center;

	border-radius: 50%;
	background: rgba(255,255,255,.8);
	backdrop-filter: blur(2px);

	color: #333;
	font-size: .75rem;
}

.fpm-turnstile-container,
.fpm-turnstile-placeholder
{
	min-height: 71px;
}

.fpm-turnstile-container.fpm-turnstile-invalid
{
	border-radius: var(--bs-border-radius);
	box-shadow: 0 0 0 2px var(--bs-danger);
}

.fpm-turnstile-popover
{
	--bs-popover-bg: var(--bs-danger);
	--bs-popover-border-color: var(--bs-danger);
	--bs-popover-body-color: var(--bs-white);
	--bs-popover-arrow-border: var(--bs-danger);
}

@media (min-height: 751px)
{
	html#map [data-fpm-modal="route-browse"] [data-fpm-element="browse-route-filter-form"]
	{
		position: sticky;
		top: 0;
		/* Above Bootstrap's focused input-group controls, which use z-index 5. */
		z-index: 6;
	}

	html#map [data-fpm-modal="route-browse"] [data-fpm-element="browse-route-filter-form"].opacity-50
	{
		background-color: var(--bs-body-bg);
		opacity: 1 !important;
	}

	html#map [data-fpm-modal="route-browse"] [data-fpm-element="browse-route-filter-form"].opacity-50 > *
	{
		opacity: .5;
	}
}