:root {
  --scale: 1;
  /*--touch-target: clamp(40px, 3.2rem, 56px);
  --icon: calc(var(--touch-target)*0.6);
  --radius: 12px;
  --gap: calc(8px * var(--scale));*/
}

html { font-size: 16px; }
/*
@media (min-width: 1921px) {
  html { font-size: clamp(16px, 0.82vw, 20px); }
}
*/
@media (any-hover: hover) and (any-pointer: fine) {
	.leaflet-bar a:hover, .leaflet-bar a:focus {
		background-color: #00bba6e8;
	}
	.option-parameter:hover {
		border-bottom-color: #00ffe3d4;
		color: #00ffe3;
	}
	.btn-hide:hover {
		color: #befcff;
		background: #0a9f8f;
		border: solid;
		border-width: 2px;
		border-color: #14c3b0;
	}
	.btn-reset:hover {
		color: #ffbebe;
		background: #8b2323;
		border: solid;
		border-width: 2px;
		border-color: #b51717;
	}
	.collected:hover .indicator-container {
		background: #00ffe7ad;
		border-color: #007368a3;
	}
	.icon-item .indicator-container:hover {
		background: #00ffe7ad;
		border-color: #007368a3;
	}
	.region:hover .indicator-container {
		background: #00ffe7ad;
		border-color: #007368a3;
	}
	.btn-met:hover {
		background: #08897b;
		border-color: #12d7c2;
	}

	.btn-met.disabled:hover {
		background: #04433c;
		color: #bfbfbf;
		border-color: #065f55;
	}

	.btn-login:hover {
		display: block;
		border-color: #01bb7f;
		border-width: 0.125rem;
		border-radius: 0.5rem;
		background-color: #059182;
		height: 2em;
		color: #e5e5e5;
	}
	
	.auth-img:hover {
		width: 2.75rem;
		height: 2.75rem;
		border-color: #14c3b0;
		background: #0a9f8f;
		transform: scale(1);
	}
}
/*
@media (max-width: 400px) {
	.leaflet-control-zoom {
		display: none !important;
	}
	.header-hopt-container {
		background: none !important;
	}
	:root { --scale: 0.75; }
	.header-container {
		background: #0B0B0B !important;
	}
	.auth-hfilter-container {
		background: none !important;
		width: 5.4em !important;
	}
	.options-container {
		transform-origin: left !important;
		margin-left: 0 !important;
		border-bottom-left-radius: 0rem !important;
		border-top-width: 0.25rem !important;
        border-right-width: 0.25rem !important;
        border-bottom-width: 0.25rem !important;
        border-left-width: 0 !important;
	}
	.options-container.hide.close {
		transform: translateY(calc(-4em - (calc(2.5em + (2rem * 6))) - 5px)) scaleX(calc(11.25 / 14.0625)) translateX(-105%) !important;
	}
	.optionheader {
		transform-origin: left !important;
		margin-left: -2.3125rem !important;
		border-bottom-left-radius: 0rem !important;
        width: 4em !important;
        height: 4em !important;
        position: fixed;
		padding-bottom: 0 !important;
		justify-content: center !important;
		transform: translateX(-3.625em) !important
	}
    .optionheader.hide {
        transform: translateY(calc(4em + (calc(2.5em + (2rem * 6))) + 5px)) scaleX(calc(14.0625 / 11.25)) translateX(-2.9375rem) !important;
    }
	.optheader {
		display: none !important;
	}
	.optparam {
		margin-top: calc(4em + 0.25rem) !important;
	}
	.filheader.hide {
		display: none !important;
	}
	.filter-container {
		border-bottom-right-radius: 0rem !important;
		margin-right: 0 !important;
		transform-origin: right !important;
		border-top-width: 0.25rem !important;
        border-right-width: 0 !important;
        border-bottom-width: 0.25rem !important;
        border-left-width: 0.25rem !important;
	}
	.filter-container.hide {
		transform: translateY(calc(-4em - calc(100vh - 4rem - 2.9rem - 0.75rem) - 5px)) scaleX(calc(12.875 / 18.75)) !important;
	}
	.filter-container.hide.close {
		transform: translateY(calc(-4em - calc(100vh - 4rem - 2.9rem - 0.75rem) - 5px)) scaleX(calc(12.875 / 18.75)) translateX(105%) !important;
	}
    .filterheader {
        margin-right: calc(-1 * (18.25rem - (12.5625rem + 1.5625rem + 1.875rem)));
        border-bottom-right-radius: 0rem !important;
    }
	.filterheader.hide {
		transform: translateY(calc(4em + calc(100vh - 4rem - 2.9rem - 0.75rem) + 5px)) scaleX(calc(18.75 / 12.875)) translateX(4.25rem) !important;
		padding-left: 0rem;
		padding-right: calc(1.3125rem + 0.625rem);
		margin-right: 0 !important;
		width: 2.5em !important;
		
	}
	.auth {
		width: 3rem !important;
		margin-right: calc((1.9em * ((100vw - 300px) / (100px))) + 0.5em) !important;		
	}
	.btn-login {
		display: none !important;
	}
    .btn-hide {
        height: 3.75em !important;
        width: 3.75em !important;
        margin-right: 0 !important;
    }
    .auth-img {

    }
	.username {
		display: none !important;
	}
	
	.header {
		margin-left: 0.8em !important; 
		margin-right: 0.8em !important;
	}
}
*/

@media (max-width: 400px) {
	.header-container {
		background: #0B0B0B !important;
	}
	.header-hopt-container {
		background: none !important;
	}
	.auth-hfilter-container {
		background: none !important;
		width: 5.4em !important;
	}
	.leaflet-control-zoom {
		display: none !important;
	}
	
	.auth {
		width: 3rem !important;
		margin-right: calc((1.9em * ((100vw - 300px) / (100px))) + 0.5em) !important;		
	}
	.btn-login {
		display: none !important;
	}
    .auth-img {

    }
	.username {
		display: none !important;
	}
	.header {
		margin-left: 0.8em !important; 
		margin-right: 0.8em !important;
		width: max-content;
	}
	
	.transition {
		opacity: 1 !important; 
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.4, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}

	.ftransition {
		opacity: 1 !important;
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.4, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
	}
	
	:root { --scale: 0.75; } 
	
	.options-container {
		transform-origin: left !important;
		margin-left: 0 !important;
		border-bottom-left-radius: 0rem !important;
		border-top-width: 0.25rem !important;
        border-right-width: 0.25rem !important;
        border-bottom-width: 0.25rem !important;
        border-left-width: 0 !important;
	}
	.options-container.hide {
		transform: translateY(calc(-4em - (calc(2.5em + (2rem * 6))) - 5px)) scaleX(calc(11.25 / 14.0625)) !important;
	}
	.options-container.hide.close {
		transform: translateY(calc(-4em - (calc(2.5em + (2rem * 6))) - 5px)) scaleX(calc(11.25 / 14.0625)) translateX(-105%) !important;
	}
	
	
	.optionheader {
		transform-origin: left !important;
		margin-left: -2.3125rem !important;
		border-bottom-left-radius: 0rem !important;
	}
    .optionheader.hide {
        width: 4em;
        height: 4em;
        padding-bottom: 0;
        margin-left: -9.625em !important;
    }
	
	.optheader {
	}
	.optheader.hide {
        transform: scaleX(0) !important;
        font-size: 0 !important;
	}
	
	.option-hide {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.option-hide.hide {
        margin-left: -36px;
        width: 4em;
        height: 4em;
	}
	.option-hide-text {
		position: fixed;
	}
	.option-hide-text.open {
	}
    .option-hide-img {
        transition: transform 0.6s cubic-bezier(0.4, 0, 0.4, 1) !important;
		transform: scale(0);
		position: fixed;
		display: block !important;
    }
	.option-hide-img.open {
		transform: scale(1) !important;
	}
	.optparam {
	}
	.optparam.hide {
	}
	
	
	
	.filter-container {
		border-bottom-right-radius: 0rem !important;
		margin-right: 0 !important;
		transform-origin: right !important;
		border-top-width: 0.25rem !important;
        border-right-width: 0 !important;
        border-bottom-width: 0.25rem !important;
        border-left-width: 0.25rem !important;
	}
	.filter-container.hide {
		transform: translateY(calc(-4em - calc(100vh - 4rem - 2.9rem - 0.75rem) - 5px)) scaleX(calc(12.875 / 18.75)) !important;
	}
	.filter-container.hide.close {
		transform: translateY(calc(-4em - calc(100vh - 4rem - 2.9rem - 0.75rem) - 5px)) scaleX(calc(12.875 / 18.75)) translateX(105%) !important;
	}
	
	
    .filterheader {
        margin-right: calc(-1 * (18.5rem - (12.5625rem + 1.5625rem + 1.875rem)));
        border-bottom-right-radius: 0rem !important;
    }
	.filterheader.hide {
        width: 4em;
        height: 4em;
        padding-bottom: 0;
        padding-right: 0 !important;
        transform: translateY(calc(4em + calc(100vh - 4rem - 2.9rem - 0.75rem) + 5px)) scaleX(calc(18.25 / 12.875));
        padding-left: 0rem;
        padding-right: calc(1.3125rem + 0.625rem);
        margin-right: -12.5em !important;
	}
	
	.filheader {
	}
	.filheader.hide {
        transform: scaleX(0) !important;
        font-size: 0 !important;
	}
	
	
	.filter-hide {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.filter-hide.hide {
		width: 4em;
        height: 4em;
        margin-left: -8.95em !important;
        transform: translateX(0.25em) !important;
	}
	.filter-hide-text {
		position: fixed;
	}
	.filter-hide-text.open {
	}
	.filter-hide-img {
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.4, 1) !important;
		transform: scale(0);
		position: fixed;
		display: block !important;
	}
	.filter-hide-img.open {
		transform: scale(1) !important;
	}
	
	.btn-reset {
	}
	.btn-reset.hide {
	}
	
	
	.filter-sections {
	}
	.filter-sections.hide {
	}
}

@media (min-width: 401px) and (max-width: 768px) {
	.header-container {
		background: #0B0B0B !important;
	}
	.header-hopt-container {
		background: none !important;
	}
	.auth-hfilter-container {
		background: none !important;
		width: 5.4em !important;
	}
	.leaflet-control-zoom {
		display: none !important;
	}
	
	.auth {
		width: 3rem !important;
	}
	.btn-login {
		display: none !important;
	}
    .auth-img {

    }
	.username {
		display: none !important;
	}
	
	:root { --scale: 0.75; } 
	
	.options-container {
		transform-origin: left !important;
		margin-left: 0 !important;
		border-bottom-left-radius: 0rem !important;
		border-top-width: 0.25rem !important;
        border-right-width: 0.25rem !important;
        border-bottom-width: 0.25rem !important;
        border-left-width: 0 !important;
	}
	.options-container.hide {
		transform: translateY(calc(-4em - (calc(2.5em + (2rem * 6))) - 5px)) scaleX(calc(11.25 / 14.0625)) !important;
	}
	.options-container.hide.close {
		transform: translateY(calc(-4em - (calc(2.5em + (2rem * 6))) - 5px)) scaleX(calc(11.25 / 14.0625)) translateX(-105%) !important;
	}
	
	
	.optionheader {
		transform-origin: left !important;
		margin-left: -2.3125rem !important;
		border-bottom-left-radius: 0rem !important;
	}
	.optionheader.hide {
	}
	
	.optheader {
	}
	.optheader.hide {
	}
	
	.option-hide {
	}
	.option-hide.hide {
	}
	
	
	.optparam {
	}
	.optparam.hide {
	}
	
	
	
	.filter-container {
		border-bottom-right-radius: 0rem !important;
		margin-right: 0 !important;
		transform-origin: right !important;
		border-top-width: 0.25rem !important;
        border-right-width: 0 !important;
        border-bottom-width: 0.25rem !important;
        border-left-width: 0.25rem !important;
	}
	.filter-container.hide {
		transform: translateY(calc(-4em - calc(100vh - 4rem - 2.9rem - 0.75rem) - 5px)) scaleX(calc(12.875 / 18.75)) !important;
	}
	.filter-container.hide.close {
		transform: translateY(calc(-4em - calc(100vh - 4rem - 2.9rem - 0.75rem) - 5px)) scaleX(calc(12.875 / 18.75)) translateX(105%) !important;
	}
	
	
    .filterheader {
        margin-right: calc(-1 * (18.25rem - (12.5625rem + 1.5625rem + 1.875rem)));
        border-bottom-right-radius: 0rem !important;
    }
	.filterheader.hide {
		transform: translateY(calc(4em + calc(100vh - 4rem - 2.9rem - 0.75rem) + 5px)) scaleX(calc(18.25 / 12.875));
		padding-left: 0rem;
		padding-right: calc(1.3125rem + 0.625rem);
		margin-right: 0 !important;
	}
	
	.filheader {
	}
	.filheader.hide {
	}
	
	.filter-hide {
	}
	.filter-hide.hide {
	}
	
	.btn-reset {
	}
	.btn-reset.hide {
	}
	
	
	.filter-sections {
	}
	.filter-sections.hide {
	}
}



/*
@media (max-width: 1000px) {
	.options-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 13.5625rem;
		background: #002d2887;
		border-bottom-right-radius: 1rem;
		border-bottom-left-radius: 1rem;
		margin-left: 3.375rem;
		height: calc(4.75em + (2rem * 6));
		pointer-events: auto;
		border: solid;
		border-color: #00100fd4;
		border-width: 0.25rem;
		position: relative;
		transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
		transform: translateY(0px);
	}

	.options-container.hide {
		transform: translateY(calc(-4em - (calc(2.5em + (2rem * 6))) - 5px)) scaleX(calc(11.25 / 14.0625));
	}

}
*/

@media (min-width: 1920px) { :root { --scale: 1.25; } }
@media (min-width: 2560px) { :root { --scale: 1.5; } }
@media (min-width: 3200px) { :root { --scale: 1.75; } }


body {
  margin: 0;
  font-family: sans-serif;
  background: #0B0B0B;
  color: white;
  text-align: center;
  position: relative;
}
#map {
  background: #153843;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.custom-cursor-on * {
  cursor: none;
}

body.custom-cursor-on {
  cursor: none;
}

html.custom-cursor-on {
  cursor: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  display: none;
}


/* cursors */
/* START */
.custom-cursor-on .leaflet-interactive {
	cursor: none;
	}
.custom-cursor-on .leaflet-grab {
	cursor: none;
	}
.custom-cursor-on .leaflet-crosshair,
.custom-cursor-on .leaflet-crosshair .leaflet-interactive {
	cursor: none;
	}
.custom-cursor-on .leaflet-popup-pane,
.custom-cursor-on .leaflet-control {
	cursor: none;
	}
.custom-cursor-on .leaflet-dragging .leaflet-grab,
.custom-cursor-on .leaflet-dragging .leaflet-grab .leaflet-interactive,
.custom-cursor-on .leaflet-dragging .leaflet-marker-draggable {
	cursor: none;
	cursor: none;
	cursor: none;
	cursor: none;
	}
	
.leaflet-tooltip.leaflet-interactive {
	cursor: none;
	}

.leaflet-bar a {
    background-color: #008778e8;
    border-bottom: 1px solid #00ffe3a6;
    color: #00ffe7cf;
}

.leaflet-bar a:active, .leaflet-bar a:focus {
    background-color: #00bba6e8;
}

.leaflet-bar a.leaflet-disabled {
    cursor: none;
	background-color: #005b51e8;
    color: #00ffe7b0;
}



.leaflet-top .leaflet-control {
	margin-top: calc(5em + 10px);
	border: 2px solid #0B0B0B;
}

/* END */
/* cursors */

.confirm-modal-style {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}
.confirm-modal-style.confirm-hidden {
  display: none;
}
.confirm-modal-content {
  background: #061d25e5;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}
.confirm-modal-text {
  color: #e5e5e5;
  background: none;
}

.exit-modal-style {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}
.exit-modal-content {
  background: #061d25e5;
  padding: 20px;
  border-radius: 6px;
  text-align: center;
}
.modal-text, .modal-loader-text {
  color: #e5e5e5;
  background: none;
}
.exit-hidden {
  display: none;
}

/*#e5e5e5*/
/*background: #061d25e5*/

.svg-icon {
  width: 32px;
  height: 32px;
  color: #fff;
}
.svg-icon svg {
  width: 100%;
  height: 100%;
}


/*UPDATE*/

.transition {
	opacity: 1 !important; 
	transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.ftransition {
    opacity: 1 !important;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), width 0.6s cubic-bezier(0.4, 0, 0.2, 1), padding 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.map-container {
    position: relative;
	z-index: 0;
	height: calc(100vh - 2.9em);
}

.controls {
    position: absolute;
    z-index: 2;
    width: 100vw;
    margin-top: calc(4em - 5px);
    user-select: none;
    pointer-events: none;
}

.options-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 13.5625rem;
    background: #002d2887;
    border-bottom-right-radius: 1rem;
    border-bottom-left-radius: 1rem;
    margin-left: 3.375rem;
    height: calc(4.75em + (2rem * 6));
    pointer-events: auto;
    border: solid;
    border-color: #00100fd4;
    border-width: 0.25rem;
    position: fixed;
	left: 0;
    transform: translateY(0px);
	opacity: 0;
}

.options-container.hide {
    transform: translateY(calc(-4em - (calc(2.5em + (2rem * 6))) - 5px)) scaleX(calc(11.25 / 14.0625));
}

.optionheader {
    display: flex;
    align-items: center;
    height: 2.5rem;
    width: 11.25rem;
    padding-bottom: 0.25rem;
    background: #0b0b0b;
    border-bottom-left-radius: 0.5rem;
    border-bottom-right-radius: 0.5rem;
    z-index: 1;
	opacity: 0;
    transform: translateY(0px);
    justify-content: flex-start;
}

.optionheader.hide {
    transform: translateY(calc(4em + (calc(2.5em + (2rem * 6))) + 5px))  scaleX(calc(14.0625 / 11.25));;
}

.optparam {
    display: flex;
    flex-direction: column;
    line-height: 2rem;
    width: 10rem;
    margin-top: calc(2.5em + 0.25rem);
    position: absolute;
    z-index: 0;
	opacity: 0;
    transform: translateY(0px);
    align-items: flex-start;
}

.optparam.hide {
    transform: translateY(calc(-2.5em - 100% - 4em - 5px));
}

.optheader {
    margin: 0.9375rem 1.25rem 0.9375rem 1.25rem;
	transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


.option-parameter {
    border-bottom: solid;
    border-bottom-color: #00ffe3a6;
    border-width: 1px;
    width: 10rem;
    display: flex;
    justify-content: flex-start;
}
.option-parameter:active {
    border-bottom-color: #00ffe3d4;
    color: #00ffe3;
}
.toggle-text {
    margin-left: 0.25rem;
}



.imgicon {
    width: auto;
    height: 30px;
	color: #fff;
}

@property --p {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 0%;
}

@property --w {
  syntax: '<percentage>';
  inherits: false;
  initial-value: 5%;
}

.filter-container {
    display: flex;
    flex-direction: column;
    width: 18.25rem;
    height: calc(100vh - 4rem - 2.9rem - 0.75rem);
    background: #002d2887;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    border: solid;
    border-color: #00100fd4;
    border-width: 0.25rem;
    margin-right: 1.25rem;
    pointer-events: auto;
	opacity: 0;
    transform: translateY(0px);
    position: fixed;
	right: 0;
    align-items: center;
}

.filter-container.hide {
    transform: translateY(calc(-4em - calc(100vh - 4rem - 2.9rem - 0.75rem) - 5px)) scaleX(calc(12.875 / 18.75)) translateX(calc(3.5em / 2));
}

.filterheader {
    display: flex;
    background: #0B0B0B;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
    width: 12.5625rem;
    height: 2.5rem;
    padding-bottom: 0.25rem;
    padding-left: 1.5625rem;
    padding-right: 1.875rem;
    position: relative;
    z-index: 1;
    align-items: center;
    justify-content: space-evenly;
	opacity: 0;
    transform: translateY(0px);
}

.filterheader.hide {
	transform: translateY(calc(4em + calc(100vh - 4rem - 2.9rem - 0.75rem) + 5px)) scaleX(calc(18.75 / 12.875));
    padding-left: 0rem;
    padding-right: 0.3125rem;
	border-bottom-left-radius: 0.5rem;
	border-bottom-right-radius: 0.5rem;
}

.filterheader.debouncing {
  animation: filter-scan var(--debounce-ms, 1500ms) linear both;
  background: linear-gradient(
    90deg,
    #0B0B0B 0%,
    #0B0B0B calc(clamp(0%, calc(var(--p) - var(--w)), 100%)),
    #00a98a var(--p),
    #0B0B0B calc(clamp(0%, calc(var(--p) + var(--w)), 100%)),
    #0B0B0B 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

@keyframes filter-scan {
  from { --p: 0%; }
  to   { --p: 100%; }
}

.filheader {
    margin: 0.9375rem 0px 0.9375rem 0px;
	padding-right: 0.75rem;
	opacity: 0;
    transform: translateX(0px);
	transition: font-size 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.filheader.hide {
    transform: translateX(1.5625rem);
	margin: 0.9375rem 0px 0.9375rem -0.25em;
}

.btn-hide {
    height: 1.8em;
    width: 3.5em;
    border-radius: 0.5rem;
    background: #066b60;
    color: white;
    font-size: 14px;
    border-width: 0px;
}

.filter-hide {
	opacity: 0;
    transform: translateX(0.25em);
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.filter-hide.hide {
    transform: translateX(-1.5625rem);
	margin-right: -1em;
}

.option-hide {
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-hide:active {
    color: #befcff;
    background: #0a9f8f;
    border: solid;
    border-width: 2px;
    border-color: #14c3b0;
}

.btn-reset {
    height: 1.8em;
    width: 3.5em;
    border-radius: 0.5rem;
    background: #612828;
    color: white;
    font-size: 14px;
    border-width: 0px;
	opacity: 0;
    transform: scaleX(1);
}

.btn-reset.hide {
    transform: scaleX(0);
}

.btn-reset:active {
    color: #ffbebe;
    background: #8b2323;
    border: solid;
    border-width: 2px;
    border-color: #b51717;
}



.filter-sections {
    overflow-y: scroll;
    height: calc(100vh - 4rem - 2.9rem - 3.25rem);
    width: 18.25rem;
    position: relative;
    z-index: 0;
}

.filter-sections::-webkit-scrollbar {
    display: none;
}

.filter-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: -1rem;
    padding-top: 1rem;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}





.footer-container {
    height: 2.9em;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.footer-text {
    margin-left: 1.25rem;
}

.header-container {
    height: 4em;
    width: 100vw;
    position: absolute;
    z-index: 1;
}

.header-pos-container {
    display: flex;
    width: 100vw;
    position: relative;
    height: 4em;
    justify-content: space-between;
}

.header-hopt-container {
    background: #0B0B0B;
    border-bottom-right-radius: 1rem;
    height: 4em;
    /*width: 22em;*/
	width: 18.4em;
    position: relative;
    z-index: 1;
	user-select: none;
}

.auth-hfilter-container {
    background: #0B0B0B;
    border-bottom-left-radius: 16px;
    height: 4em;
    width: 18.2em;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    position: relative;
    z-index: 1;
	transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.auth-hfilter-container.open {
	width: 21em;
}

.header {
    margin-top: 0.75em;
    margin-bottom: 0.75em;
    margin-left: 1.6em;
    margin-right: 1.6em;
    background: linear-gradient(135deg, #00e5ff, #00ffde, #00d3d3, #3effcb, #00bfa6, #00f3ff, #2ee581);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

.auth {
    display: flex;
    margin-right: 2.4em;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: 8rem;
    align-items: center;
}

.auth-img {
    width: 2.75rem;
    height: 2.75rem;
    z-index: 3;
    border-style: solid;
    border-color: #0a9f8f;
	background: #066b60;
    border-width: 0.125rem;
    border-radius: 3.5rem;
	transform-origin: center;
	transform: scale(0.9);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), border 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin 0.6s cubic-bezier(0.4, 0, 0.2, 1), background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}


.auth-img.authorized {
	pointer-events: none;
}

.auth-img:active {
    width: 2.75rem;
    height: 2.75rem;
    border-color: #14c3b0;
	background: #0a9f8f;
	transform: scale(1);
}


.leaflet-control-attribution.leaflet-control {
    display: none;
}

.region-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 32px;
    margin-bottom: 3rem;
}

.icons-grid {
    width: 15em;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.iconcheckbox {
    display: none;
}

.iconsheader {
    margin-block-end: 0.5em;
    margin-block-start: 0.5em;
}

.icon-item {
    margin-top: 8px;
    margin-left: 4px;
    margin-right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.important-icons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    justify-content: center;
}

.guardians-icons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    justify-content: center;
}

.natural-icons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    justify-content: center;
}

.structures-icons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    justify-content: center;
}

.collectible-icons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    justify-content: center;
}

.other-icons {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 5px;
    justify-content: center;
}

.paramheader {
    background: #00100fd4;
    padding-top: 0.5em;
    padding-right: 3em;
    padding-bottom: 0.5em;
    padding-left: 3em;
    margin-top: 0.83em;
    margin-bottom: 0.83em;
    border-radius: 16px;
    border: solid;
    border-color: #12ffe54f;
}

.important-icons-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 13.775em;
    margin-bottom: 12px;
    margin-top: 6px;
}

.guardians-icons-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 16.575em;
    margin-bottom: 12px;
}

.natural-icons-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 11em;
    margin-bottom: 12px;
}

.structures-icons-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 13.8em;
    margin-bottom: 12px;
}

.collectible-icons-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 8.25em;
    margin-bottom: 12px;
}

.other-icons-external {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 5.55em;
    margin-bottom: 12px;
}

.iconsheader {
    margin-block-end: 0.2em;
    margin-block-start: 0.2em;
    padding-top: 0.3em;
    padding-bottom: 0.3em;
    width: calc(100% - 2em);
    border: solid;
    border-color: #12ffe585;
    border-radius: 10px;
    border-width: 2px;
    background: #00100fa6;
}

.category-list input[type="checkbox"] {
    display: none;
}

.category-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 32px;
}

.region-list input[type="checkbox"] {
    display: none;
}

.collected input[type="checkbox"] {
    display: none;
}

.collected-switch {
    margin-bottom: 8px;
    background: #00d1ba4a;
    border: solid;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    border-color: #0B0B0B;
}

.collected {
    display: flex;
    align-items: flex-end;
    padding-top: 6px;
    padding-bottom: 8px;
    padding-left: 8px;
    padding-right: 8px;
}

.collected .indicator-container {
    display: flex;
    width: 1em;
    height: 1em;
    background: #00ffe73b;
    margin-right: 4px;
    border-radius: 6px;
    border: solid;
    border-width: 0.125em;
    border-color: #00ffe76e;
    justify-content: center;
    align-items: center;
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.collected:active .indicator-container {
    background: #00ffe7ad;
    border-color: #007368a3;
}

.icon-item .indicator-container {
    display: flex;
    width: 32px;
    height: 32px;
    background: #00ffe73b;
    border-radius: 6px;
    border: solid;
    border-width: 0.125em;
    border-color: #00ffe76e;
    justify-content: center;
    align-items: center;
    position: relative;
    z-index: 1;
    transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.icon-item .indicator-container:active {
    background: #00ffe7ad;
    border-color: #007368a3;
}

.icon-item .imgicon {
    width: auto;
    height: 28px;
    color: #fff;
    position: absolute;
    z-index: 2;
	pointer-events: none;
	opacity: 0.5;
}

.filter-collected .indicator {
	width: 14px;
    height: auto;
	opacity: 0.8;
}

.filter-icon .indicator {
    width: 32px;
    height: auto;
	opacity: 0.8;
}

.indicator-contatiner {
	background: #fff;
}

.imgbackicon {
    width: auto;
    height: 30px;
	color: #fff;
}

.icon-item .imgbackicon {
    width: auto;
    height: 28px;
    color: #fff;
    position: absolute;
    z-index: 0;
	pointer-events: none;
}


.region-list .indicator-container {
    display: flex;
    width: 1em;
    height: 1em;
    background: #00ffe73b;
    margin-right: 8px;
    border-radius: 6px;
    border: solid;
    border-width: 0.125em;
    border-color: #00ffe76e;
    justify-content: center;
    align-items: center;
	transition: background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.region {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 4px;
    background: #00d1ba4a;
    padding-left: 8px;
    padding-right: 12px;
    border-radius: 8px;
    border: solid;
    border-color: #0B0B0B;
    width: 7.5em;
}

.region:active .indicator-container {
    background: #00ffe7ad;
    border-color: #007368a3;
}

.btn-login {
    display: block;
    border-style: solid;
    border-color: #01a36f;
    border-width: 0.125rem;
    border-radius: 0.5rem;
    background-color: #067F72;
    height: 2em;
    width: 5em;
    color: #e5e5e5;
    transition: border 0.2s cubic-bezier(0.4, 0, 0.2, 1), background 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-radius 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}


.btn-login:active {
    display: block;
    border-color: #03d390;
    border-width: 0.25rem;
    border-radius: 1rem;
    background-color: #07b19f;
    height: 2em;
    color: #e5e5e5;
}

.btn-login.hide {
    display: none;
}

.btn-start {
    display: none;
}
.btn-start.open {
    display: block;
}

.btn-exit {
    display: none;
}
.btn-exit.open {
    display: block;
}

.btn-add {
    display: none;
}
.btn-add.open {
    display: block;
}


.btn-save {
    display: none;
}
.btn-save.open {
    display: block;
}

.met {
	display: none;
    /*background: #0B0B0B;*/
    position: absolute;
    z-index: 1;
    transform: translateX(calc(50vw - 50%)) translateY(calc(0px));
}

.met.open {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.met .optheader {
    background: #0B0B0B;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    margin: 0;
    padding-top: 18px;
    padding-right: 40px;
    padding-bottom: 18px;
    padding-left: 40px;
}

.met-controls-container {
    display: flex;
    flex-direction: column;
    align-items: center;
	user-select: none;
}

.met-button-container {
    background: #002d2887;
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    border: solid;
    border-color: #00100fd4;
    border-width: 4px;
    width: 120px;
    padding-bottom: 24px;
    padding-right: 20px;
    padding-left: 20px;
    margin-top: -4px;
	pointer-events: none;
}

.btn-met {
    margin-top: 10px;
    height: calc(1.8em);
    width: calc(7.8em);
    border-radius: 8px;
    background: #044f47;
    color: white;
    font-size: 14px;
    border: solid;
    border-width: 2px;
    border-color: #0ca796;
	pointer-events: auto;
}
.btn-met.disabled {
    background: #04433c;
    color: #bfbfbf;
    border-color: #065f55;
}
.btn-met:active {
    background: #08897b;
    border-color: #12d7c2;
}

.btn-met.disabled:active {
    background: #04433c;
	color: #bfbfbf;
    border-color: #065f55;
}

.btn-met.btnAddMode{	
	background: #067F72;
}

.option-hide-img {
	display: none;
	transform: scale(0);
}

.filter-hide-img {
	display: none;
	transform: scale(0);
}

.filter-sections-footer {
    background: linear-gradient(180deg, #0b0b0b8c 0%, transparent 75%, transparent 100%), linear-gradient(225deg, #0b0b0b94 0%, transparent 75%, transparent 100%), linear-gradient(135deg, #0b0b0b94 0%, transparent 75%, transparent 100%);
    height: calc(20vh - 4rem - 2.9rem - 1rem - 2.5rem + 1rem);
    width: calc(100% + 0.5em);
    position: fixed;
    bottom: 0;
    border-bottom-left-radius: 1rem;
    border-bottom-right-radius: 1rem;
}

    /*margin: 10px;*/
    /* padding-top: 0px; */
    /* padding-right: 0px; */
    /* padding-bottom: 0px; */
    /* padding-left: 0px;
	
.options-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 200px;
    background: #002d2887;
    border-bottom-right-radius: 16px;
    border-bottom-left-radius: 16px;
    margin-left: 54px;
    padding-bottom: 36px;
    padding-right: 20px;
    height: 200px;
    pointer-events: auto;
    border: solid;
    border-color: #00100fd4;
    border-width: 4px;
    position: relative;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateY(0px);
}*/

.leaflet-pane .leaflet-marker-icon.is-hidden {
  display: none !important;
}
/*
@media (max-width: 1100px) {
	.header-pos-container {
    display: flex;
    width: 100vw;
    position: relative;
    height: 4em;
    justify-content: space-between;
    background: #0B0B0B;
	}
}
*/