.browserupgrade
{
	margin-bottom: 0;
	border: none;
}
.navbar
{
	z-index: 2;
}
.navbar-light
{
	font-weight: bold;
	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
{
	color: #f44336;
	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: #f44336;
}
.navbar-light .navbar-nav .active.nav-item
{
	background-color: #e7e7e7;
}

.bg-medium
{
	background-color: #343a40;
}
/* Improve contrast ratio */
.bg-medium a,
.bg-medium a:hover
{
	color: #b3d7ff;
}
.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-medium .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 .rounded
{
	color: white;
	background: rgba(34,34,34,0.75);
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
body#homepage .rounded a
{
	box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}

body#homepage .footpath
{
	text-shadow: 0 0 10px red, 0 0 10px 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 .navbar-light
{
	background-color: #b2e1eb!important;
}
body#homepage .section-1
{
	background-color: #f7f7f7;
}
body#homepage .section-2
{
	background-color: #edf1f4;
	color: #515969;
}
body#homepage .section-3
{
	background-color: #e3eff7;
	color: #515969;
}
body#homepage .section-4
{
	background-color: #304559;
	color: white;
}

body#homepage .rounded-number
{
	background-color: #b2e1eb;
	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-min-width
{
	min-width: 350px;
}
/* show on top of other elements */
html#map .popover-map-click-favourite-update-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 .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;
}
/* DeviceOrientation error feedback */
html#map .toast
{
	position: absolute;
	margin-left: auto;
	margin-right: auto;
	left: 0;
	right: 0;
	bottom: 5px;
	z-index: 10;
}

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
{
	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 .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 .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;
}



/* 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: #f44336;
	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#help .grecaptcha-badge
{
	z-index: 1;
}

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: #e91e63;
}
body#account-premium .basemap
{

	min-height: 200px;
	background-color: #ecf0f1;
}
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,rgba(236,240,241,1) 10px);
	}
	body#account-premium .layer .lg-margin-left
	{
		background: linear-gradient(to right, rgba(0,0,0,0) 0px,rgba(233,30,99,0.75) 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,rgba(236,240,241,1) 10px);
		border-left: thin solid #e1e5e8;
	}
	body#account-premium .layer .lg-margin-right
	{
		background: linear-gradient(to left, rgba(0,0,0,0) 0px,rgba(233,30,99,0.75) 10px);
	}

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

@media (max-width: 767px)
{
	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 .thickness.thin
{
	border-bottom: 1px solid black;
}
body#account-detail .thickness.medium
{
	border-bottom: 2px solid black;
}
body#account-detail .thickness.thick
{
	border-bottom: 3px solid black;
}
body#account-detail .active .thickness
{
	border-color: white;
}
body#account-detail .premium-overlay *
{
	pointer-events: none;
}
body#account-detail .premium-overlay:hover .position-absolute
{
	z-index: 1111;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(2px);
}
body#account-detail .scale-bar
{
	display: inline-block;
	height: 10px;
	background: linear-gradient(90deg, white 0%, white 50%, #f44336 50%);
}

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;
}