:root {
	--pageMaxWidh: 85vw;
	--uiBottomLength: 35px;
	--interactionFontSize: 14px;
	--interactionFont: "Montserrat", "Helvetica", Sans-serif;
	--highlightColor: #F07D00;
	--inputBackground: rgba(0, 0, 0, 0.02);
	--privateColor: #8CC63F;
	--sightColor: #F07D00;
	--institutionColor: #C41F0C;
	--wwfFont: 'WWF Font', Helvetica, Arial, Lucida, sans-serif;
	--basicFont: 'Open Sans', Helvetica, Arial, Lucida, sans-serif;
}


.leaflet-map {
	margin: 0 auto;
	max-height: 80vh;
	max-width: var(--pageMaxWidh);
	max-width: var(--pageMaxWidh);
	overflow: hidden;
}

#main-content .entry-content .et_builder_inner_content .et_pb_text_inner .leaflet-map a {
	text-decoration: none !important;
}


/*----- LOADER -----*/
#loader-bg {
	align-items: center;
	background-color: rgba(0, 0, 0, .9);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0px;
	pointer-events: all;
	position: absolute;
	top: 0px;
	width: 100%;
	z-index: 99999;
}

#loader, #loader-form {
	animation: spin 2s linear infinite;
	border: 16px solid #f3f3f3;
	border-radius: 50%;
	/* Light grey */
	border-top: 16px solid var(--highlightColor);
	bottom: 150px;
	bottom: calc(50% - 45px);
	height: 90px;
	left: calc(50% - 45px);
	width: 90px;
	z-index: 9999;
	z-index: 1000;
}

#loader-form {
	border-color: #343a40;
	border-top-color: var(--highlightColor);
}

#loader-form-bg {
	align-items: center;
	backdrop-filter: blur(45px);
	-webkit-backdrop-filter: blur(45px);
	background: rgba(255, 255, 255, 0.6);
	display: flex;
	height: 100%;
	justify-content: center;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: 99999;
}


@keyframes spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

/*----- UI WRAPPER -----*/
#uiWrapper {
	background-color: #fff;
	bottom: 2%;
	height: 90%;
	max-height: 390px;
	position: absolute;
	right: 15px;
	/*background-color: rgba(255, 255, 255, .9);*/
	width: 388px;
	z-index: 1000;
}

.sidebar-toggled {
	cursor: pointer;
	height: 88px !important;
	overflow: hidden;
	transition: all .5s ease-in;
}

.sidebar-toggled:hover {
	height: 125px !important;
}

.sidebar-toggled .ui-sidebar {
	overflow: hidden;
}

.ui-sidebar {
	height: 100%;
	overflow-x: hidden;
	overflow-y: auto;
	padding: 18px;
	width: 100%;
}

#mobileFormContainer {
	box-shadow: 0px -1px 16px rgba(0, 0, 0, .16);
	margin: 0 auto;
	max-width: var(--pageMaxWidh);
	padding: 15px;
}

@media (max-width: 950px) {
	.ui-sidebar {
		padding: 20px 15px;
	}

	#mobileFormContainer {
		padding: 0;
	}
}




/*----- UI WRAPPER PARAGRAPHS -----*/

#uiWrapper p, #mobileFormContainer p {
	color: #11171D;
	font-family: var(--basicFont);
	font-size: 16px;
}

#uiWrapper .headingOrange, #mobileFormContainer .headingOrange {
	color: var(--highlightColor);
	font-family: var(--wwfFont);
	font-size: 18px;
	font-weight: 700;
	padding: 0;
}

#uiWrapper h2, #mobileFormContainer h2 {
	font-family: var(--wwfFont);
	font-size: 24px;
	font-weight: bold;
	line-height: 32px;
}

#uiWrapper p.rememberHint, #mobileFormContainer p.rememberHint {
	font-family: var(--wwfFont);
	font-size: 20px;
	font-weight: bold;
	margin: 14px 0 12px;
}

/*-----TOGGLE MENU BTN-----*/
#toggleMenuBtn {
	background-color: #fff;
	border: none;
	border-radius: 8px 8px 0 0;
	cursor: pointer;
	height: 25px;
	position: absolute;
	right: 20px;
	top: -25px;
	width: 50px;
	z-index: 1000;
}

#toggleMenuBtn::after {
	background-color: #6c757d;
	border-radius: 1px;
	content: '';
	display: block;
	height: 4px;
	margin: auto 7px;
	transition: all .2s ease-in;
	width: 60%;
}

#toggleMenuBtn:hover::after {
	background-color: #343a40;
	transform: translateY(2px);
}

#toggleMenuBtn.toggledDown {
	border-radius: 50%;
	box-shadow: 0px -1px 16px rgba(0, 0, 0, .16);
	height: 50px;
	top: -70px;
	transition: all .3s ease-in;
}

@media(max-width: 950px) {
	#toggleMenuBtn.toggledDown {
		right: 5px;
	}
}

#toggleMenuBtn.toggledDown::after {
	background-color: transparent;
	content: "\f1de";
	font-family: FontAwesome;
	font-size: 2em;
	height: 100%;
	line-height: 1.8em;
	width: 50%;
}

#toggleMenuBtn.toggledDown:hover::after {
	transform: translateY(0px);
}

/*----- FORM -----*/
.required {
	border-bottom: 3px solid var(--highlightColor) !important;
}

.requiredStar {
	color: var(--highlightColor);
	font-size: 20px;
	font-weight: bold;
}

.labelRequired {
	color: var(--highlightColor);
}

.submitError {
	color: var(--highlightColor) !important;
	display: none;
	font-weight: bold;
	margin-top: 6px;
	padding-bottom: 0 !important;
}

#earthHourForm {
	margin-top: 12px;
}

#earthHourForm .input-field {
	height: 45px;
	line-height: 45px;
	margin-top: 8px;
	position: relative;
	width: 100%;
}

#earthHourForm .input-field label {
	color: #495057;
	cursor: text;
	font-family: var(--basicFont);
	font-size: 13px;
	left: 0;
	padding-left: 10px;
	pointer-events: none;
	position: absolute;
	top: 0;
	transition: all .2s ease-in;
	-webkit-user-select: none;
	width: 100%;
}

#earthHourForm input {
	background-color: var(--inputBackground);
	border: 0;
	border-bottom: 2px solid #1D252D;
	border-radius: 0px;
	box-shadow: none;
	color: #11171D;
	font-family: var(--basicFont);
	font-size: 16px;
	outline: none;
	padding: 15px 0 5px 10px;
	width: 100%;
}

#earthHourForm input:focus {
	background-color: rgba(230, 110, 0, .1);
}

.labelBold, .bold {
	font-weight: bold;
}



#earthHourForm input:valid {
	outline: none;
}

#earthHourForm input:focus,
#earthHourForm input:valid {
	border-color: #7E7E7E;
	padding: 18px 0 2px 10px;
}

#earthHourForm input:focus~label,
#earthHourForm input:valid~label {
	color: #999999;
	font-size: 13px;
	top: -12px;
}

.checkboxes {
	margin-top: 12px;
}

.checkBoxWrapper {
	display: flex;
	flex-wrap: wrap;
}

.checkBoxWrapper:first-of-type {
	margin-top: 10px;
}

.checkBoxWrapper input {
	cursor: pointer;
	margin-right: 15px;
}

label.checkBoxWrapper {
	font-size: 14px !important;
}

.dataInfoP {
	line-height: 22px !important;
}


#eartHourFormSumbit {
	background-color: var(--highlightColor);
	border: none;
	box-shadow: 0px 10px 20px rgba(255, 0, 0, .2);
	color: #fff;
	cursor: pointer;
	font-family: var(--basicFont);
	font-weight: bold;
	margin: 15px 0 0;
	outline: none;
	padding: 8px 25px;
	transition: all .3s ease-in;
}

#eartHourFormSumbit.disabled {
	background-color: #999999;
	cursor: not-allowed;
}

#eartHourFormSumbit.disabled:hover {
	background-color: #6c757d;
	color: #fff;
	cursor: not-allowed;
}

#eartHourFormSumbit:hover, #eartHourFormSumbit:focus {
	background-color: #242424;
	color: var(--highlightColor);
}

/*----- ERROR MESSAGE -----*/
#errorWrapper {
	background-color: #e9ecef;
	border-radius: 12px;
	bottom: 150px;
	bottom: calc(50% - 75px);
	box-shadow: 0px -1px 16px rgba(0, 0, 0, .16);
	left: calc(50% - 125px);
	max-width: 320px;
	padding: 25px;
	position: absolute;
	z-index: 1010;
}

#errorWrapper h2, #errorWrapper p {
	color: #282828;
	font-family: var(--interactionFont);
}

#errorWrapper h2 {
	font-size: 20px;
	line-height: 32px;
}

#errorWrapper p {
	font-size: 14px;
	line-height: 21px;
}

#errorRefresh {
	color: #44812f;
	cursor: pointer;
	text-decoration: underline;
}

/*Form error*/
.form-error-wrapper {
	background-color: #fff;
	border-radius: 12px;
	box-shadow: 0px -1px 16px rgba(0, 0, 0, .16);
	padding: 15px;
	width: 90%;
}

.form-error-wrapper h2 {
	color: var(--highlightColor);
}

/*Captcha error*/
.captcha-wrapper {
	color: var(--highlightColor);
	font-size: 16px;
	font-weight: 700;
}

/*----- SETTINGS -----*/
.leaflet-top.leaflet-left {
	display: flex;
	flex-direction: column;
}

.leaflet-bar {
	border: none !important;
}

#lightMode, #filterParent {
	background-color: #fff;
	border-radius: 0px;
	height: var(--uiBottomLength) !important;
	margin-bottom: 5px;
	margin-left: 10px;
	width: var(--uiBottomLength) !important;
}

#lightMode:hover, #lightMode:focus,
#filterParent:hover, #filterParent:focus,
.leaflet-control-zoom-in:hover, .leaflet-control-zoom-in:focus,
.leaflet-control-zoom-out:hover, .leaflet-control-zoom-out:focus,
.leaflet-control-fullscreen-button:hover, .leaflet-control-fullscreen-button:focus {
	border-bottom: 2px solid #343a40 !important;
}

.leaflet-control-fullscreen-button {
	border-radius: 0px !important;
}


/*--- Zoom ---*/
.leaflet-control-container .leaflet-top .leaflet-control-zoom .leaflet-control-zoom-in, .leaflet-control-container .leaflet-top .leaflet-control-zoom .leaflet-control-zoom-out {
	border-radius: 0px;
	font-family: "Oswald", sans-serif;
	font-size: 25px;
	font-weight: bold;
	height: var(--uiBottomLength);
	margin-bottom: 5px;
	text-decoration: none;
	width: var(--uiBottomLength);
}



/*--- Light toggle ---*/
#lightMode {
	align-items: center;
	background-color: transparent;
	background-color: #fff;
	border: none;
	cursor: pointer;
	display: block;
	display: flex;
	height: var(--uiBottomLength);
	justify-content: center;
	pointer-events: all;
	width: var(--uiBottomLength);
}


#socket {
	fill: #343a40;
}

#lightMode:hover #bulb, #lightMode:hover #socket, #lightMode:focus #bulb, #lightMode:focus #socket {}

.bulbOn {
	fill: #ffc300 !important;
}

.socketOn {}


/*----- Filters -----*/
#filterParent {
	background: #fff url("images/settings-filter.svg") no-repeat center;
	background-size: 20px 20px;
	border: none;
	border-bottom: 2px solid #343a40;
	border-radius: 0px;
	cursor: pointer;
	height: var(--uiBottomLength);
	pointer-events: all;
	position: relative;
	width: var(--uiBottomLength);
}

.eh-filterWrapper {
	pointer-events: all;
	position: relative;
}

.filter-buttons {
	align-items: flex-start;
	background-color: #fff;
	border-bottom: 2px solid #343a40;
	border-radius: 0px;
	bottom: 5px;
	box-sizing: border-box;
	flex-direction: column;
	justify-content: flex-start;
	left: 50px;
	padding: 3px 16px 3px 12px;
	position: absolute;
}

.filter-buttons input {
	cursor: pointer;
}

.filter-buttons label {
	cursor: pointer;
	font-family: var(--basicFont);
	font-size: 14px;
}

.filter-svg-wrapper svg {
	height: 25px;
	width: 25px;
}

.filter-svg-wrapper {
	align-items: center;
	display: flex;
	padding-right: 8px;
}

.check-color-filter {
	align-items: center;
	box-sizing: border-box;
	display: flex !important;
	margin: 8px 0 !important;
	max-height: 25px;
}

.reduced-lineheight {
	line-height: 15px;
}




/*--- custom checkboxes ---*/
.checkWrapper {
	cursor: pointer;
	display: block;
	font-size: 22px;
	margin: 5px 0;
	padding-left: 32px;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

.checkWrapper:last-of-type {
	margin-bottom: 3px;
}


/* Hide the browser's default checkbox */
.checkWrapper input {
	cursor: pointer;
	height: 0;
	opacity: 0;
	position: absolute;
	width: 0;
}

/* Create a custom checkbox */
.checkmark {
	background-color: var(--inputBackground);
	border: 2px solid;
	box-sizing: border-box;
	height: 25px;
	left: 0;
	position: absolute;
	top: 0;
	width: 25px;
}


/* On mouse-over, add a grey background color */
.checkWrapper:hover input~.checkmark {
	background-color: var(--inputBackground);
}

/* When the checkbox is checked */


/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
	content: "";
	display: none;
	position: absolute;
}

/* Show the checkmark when checked */
.checkWrapper input:checked~.checkmark:after {
	display: block;
}

/* Style the checkmark/indicator */
.checkWrapper .checkmark:after {
	border: solid var(--highlightColor);
	border-width: 0 3px 3px 0;
	height: 10px;
	left: 8px;
	top: 4px;
	-webkit-transform: rotate(45deg);
	-ms-transform: rotate(45deg);
	transform: rotate(45deg);
	width: 5px;
}

.checkBoxWrapper .checkmark::after {
	border-color: var(--highlightColor);
}

/* Move the slider if the checkbox is clicked */
.checkWrapper input[type=checkbox]:checked+label {
	left: 27px;
}


/*--AUTOCOMPLETE--*/
.ui-autocomplete {
	max-height: 100px;
	overflow-x: hidden;
	overflow-y: auto;
}

/*----- POPUPS -----*/
.leaflet-popup-content-wrapper {
	border-radius: 0px !important;

}

.leaflet-popup-content {
	margin: 0 !important;
	padding: 25px 20px 20px;
}

@media (max-width: 950px) {
	.leaflet-map-pane>.leaflet-popup-pane>.leaflet-popup {
		max-width: 65vw;
	}

	.leaflet-popup-content {
		padding: 20px 15px 15px;
	}
}

.leaflet-map-pane>.leaflet-popup-pane>.leaflet-popup>.leaflet-popup-close-button {
	align-items: center;
	background-color: var(--privateColor);
	border-radius: 50%;
	color: white;
	display: flex;
	height: 31px;
	justify-content: center;
	padding: 0;
	position: absolute;
	right: -12px;
	text-decoration: none;
	top: -12px;
	width: 31px;
}

.popup-type-private .popup-name {
	color: var(--privateColor) !important;
}

.popup-type-institution .leaflet-popup-close-button {
	background-color: var(--institutionColor) !important;
}

#main-content .entry-content .et_builder_inner_content .et_pb_text_inner .leaflet-map .leaflet-popup-close-button {
	color: #fff !important;
}

#main-content .entry-content .et_builder_inner_content .et_pb_text_inner .leaflet-map .leaflet-popup-close-button:hover {
	color: #fff !important;
}

.popup-type-institution .popup-name {
	color: var(--institutionColor) !important;
}

.popup-type-sight .leaflet-popup-close-button {
	background-color: var(--sightColor) !important;
}

.popup-type-sight .popup-name {
	color: var(--sightColor) !important;
}

.popup-link {
	position: relative;
}

#main-content a.popup-link:hover, a.leaflet-popup-close-button:hover {
	text-decoration: none !important;
}

#main-content .popup-type-institution .popup-link {
	color: var(--institutionColor) !important;
}

#main-content .entry-content .et_builder_inner_content .et_pb_text_inner .leaflet-map .popup-type-institution .popup-link:hover {
	color: var(--institutionColor) !important;
}

#main-content .popup-type-institution .popup-link::after {
	background-color: var(--institutionColor) !important;
}

#main-content .popup-type-sight .popup-link {
	color: var(--sightColor) !important;
}

#main-content .popup-type-sight .popup-link:hover {
	color: var(--sightColor) !important;
}

#main-content .popup-type-sight .popup-link::after {
	background-color: var(--sightColor) !important;
}

#main-content .popup-link::after {
	bottom: 0px;
	content: '';
	display: block;
	height: 1px;
	position: absolute;
	transition: all .2s ease-in;
	width: 0;
}

#main-content .popup-link:hover::after {
	width: 100%;
}

.mun_private {
	font-weight: bold;
}

.empty {
	display: none !important;
}

.popup-categoryTitle, .popup-name {
	font-family: var(--wwfFont);
}

.popup-categoryTitle {
	font-size: 18px;
	font-weight: 400;
	margin: 0 !important;
	padding: 0 0 4px 0 !important;
}

.popup-name {
	font-size: 26px;
	font-weight: 700;
}

#main-content .et_builder_inner_content .leaflet-map .leaflet-popup .leaflet-popup-content h3.popup-heading {
	font-family: var(--basicFont) !important;
	font-size: 15px !important;
	font-weight: 700;
	padding: 8px 0 0;
}

.popup-text {
	font-family: var(--basicFont);
	font-size: 15px;
	margin: 0 !important;
}

/*----- MARKER -----*/
.leaflet-marker-icon svg path {
	/*
	stroke: #343a40;
	stroke-width: 2px;*/
}

.dark path {
	fill: #343a40 !important;
}

/*----- ERROR MESSAGE -----*/
#errorWrapper {
	background-color: #e9ecef;
	border-radius: 12px;
	bottom: 150px;
	bottom: calc(50% - 75px);
	box-shadow: 0px -1px 16px rgba(0, 0, 0, .16);
	left: calc(50% - 125px);
	max-width: 320px;
	padding: 25px;
	position: absolute;
	z-index: 9999;
}

#errorWrapper h2, #errorWrapper p {
	color: #282828;
	font-family: var(--interactionFont);
}

#errorWrapper h2 {
	font-size: 26px;
	line-height: 32px;
}

#errorWrapper p {
	font-size: 14px;
	line-height: 21px;
}

#errorRefresh {
	color: #44812f;
	cursor: pointer;
	text-decoration: underline;
}

/*after submit button*/
#resetEHForm {
	background-color: transparent;
	border: none;
	color: #999999;
	cursor: pointer;
	font-family: var(--basicFont);
	font-size: 16px;
	margin: 15px 0 0;
	padding: 0;
	text-decoration: underline;
}

#resetEHForm:hover, #resetEHForm:focus {
	color: #333;
}

.after-submit-link {
	color: var(--highlightColor) !important;
	line-height: 22px !important;
	text-decoration: underline !important;
}

.aftersubmit-heading {
	padding-bottom: 5px;
}

/*loading indicator*/
.hidden {
	display: none;
}

.lds-ellipsis {
	display: inline-block;
	height: 8px;
	position: relative;
	width: 45px;
}

.lds-ellipsis div {
	animation-timing-function: cubic-bezier(0, 1, 1, 0);
	background: var(--highlightColor);
	border-radius: 50%;
	height: 8px;
	position: absolute;
	top: 0;
	width: 8px;
}

.lds-ellipsis div:nth-child(1) {
	animation: lds-ellipsis1 0.6s infinite;
	left: 8px;
}

.lds-ellipsis div:nth-child(2) {
	animation: lds-ellipsis2 0.6s infinite;
	left: 8px;
}

.lds-ellipsis div:nth-child(3) {
	animation: lds-ellipsis2 0.6s infinite;
	left: 22px;
}

.lds-ellipsis div:nth-child(4) {
	animation: lds-ellipsis3 0.6s infinite;
	left: 46px;
}

@keyframes lds-ellipsis1 {
	0% {
		transform: scale(0);
	}

	100% {
		transform: scale(1);
	}
}

@keyframes lds-ellipsis3 {
	0% {
		transform: scale(1);
	}

	100% {
		transform: scale(0);
	}
}

@keyframes lds-ellipsis2 {
	0% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(24px, 0);
	}
}

/*optinwrapper*/
#optin-infoWrapper {
	color: #666666;
	margin-left: 28px;
}

#optin-info-toggle {
	background-color: transparent;
	border: none;
	color: var(--highlightColor);
	cursor: pointer;
	font-size: 14px;
	outline: none;
	text-decoration: underline;
}

#optin-info {
	color: #666666 !important;
	font-size: 14px !important;
	margin-left: 4px;
}

.doubleOptinMsg {
	font-size: 16px !important;
	font-weight: 400 !important;
	line-height: 22px !important;
}

.doubleOptinMsg p {
	padding-bottom: 5px !important;
}

.ui-sidebar a {
	color: var(--highlightColor);
}