/***********/
/* globals */
/***********/
:root {
	--gp-color: #66cc00;
	--marker-size: 40px;
}
html * {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
html, body {
	height: 100%;
	width: 100%;
}
*,*:focus,*:hover{
	outline:none;
}


/********************/
/* custom scrollbar */
/********************/
/* firefox */
.scroller {
	overflow-y: scroll;
	scrollbar-color: var(--gp-color) white;
	scrollbar-width: thin !important;
}
/* chrome*/
::-webkit-scrollbar {
	width: 6px;
}
::-webkit-scrollbar-track {
	background: white; 
}
::-webkit-scrollbar-thumb {
	background: var(--gp-color); 
}

#wrapper {
	height: 100%;
	width: 100%;
}


/*******************/
/* loading spinner */
/*******************/
#spinner_wrapper {
	position: absolute;
	height: 100%;
	width: 100%;
	z-index: 3000;
	background-color: rgba(255, 255, 255, 0.75);
}
.spinner {
	left: 50%;
	top: 50%;
	position: absolute;
	transform: translate(-50%, -50%);
}
.lds-ripple {
	display: inline-block;
	position: relative;
	width: 80px;
	height: 80px;
}
.lds-ripple div {
	position: absolute;
	border: 4px solid #66CC00;
	opacity: 1;
	border-radius: 50%;
	animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
	animation-delay: -0.5s;
}
@keyframes lds-ripple {
	0% {
		top: 36px;
		left: 36px;
		width: 0;
		height: 0;
		opacity: 1;
	}
	100% {
		top: 0px;
		left: 0px;
		width: 72px;
		height: 72px;
		opacity: 0;
	}
}


/**********/
/* legend */
/**********/
#legend {
	cursor: default;
	background-color: #ffffff;
	padding: 15px 10px 5px 10px;
	position: absolute;
	top: 10px;
	left: 50px;
	width: 300px;
	transition: all 0.5s ease-in-out;
	border-radius: 4px;
	box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
}
#legend_close {
	position: absolute;
	background-image: url(./images/close.svg);
	cursor: pointer;
	background-repeat: no-repeat;
	background-size: 15px;
	background-position: center;
	width: 15px;
	height: 15px;
	top: 10px;
	right: 10px;
}
.legend-content .row {
	display: flex;
	flex-direction: row;
	margin-bottom: 10px;
	align-items: center;
}

.row .icon {
	width: 20px;
	height: 20px;
	min-width: 20px;
	margin-right: 7px;
}
.row .icon.green { background-color: limegreen}
.row .icon.red { background-color: crimson}
.row .icon.blue { background-color: dodgerblue}
.row .icon.redblue {
	background: linear-gradient(90deg, crimson 0%, dodgerblue 100%);
	background: -moz-linear-gradient(90deg, crimson 0%, dodgerblue 100%);
	background: -webkit-linear-gradient(90deg, crimson 0%, dodgerblue 100%);
	background: linear-gradient(90deg, crimson 0%, dodgerblue 100%);
}


/***************/
/* map related */
/***************/
.legend-button {
	position: absolute;
	height: 30px;
	width: 30px;
	top: 110px;
	left: 10px;
	background: url(images/legend.svg) no-repeat;
	background-size: 28px;
	background-position: center;
	background-color: #ffffff;
	border-radius: 4px;
	box-shadow: 0 0 0 2px rgb(0 0 0 / 10%);
	cursor: pointer;
}
#map {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	width: 100%;
	height: 100%;
	outline: none;
	background-color: #d6d6d6;
}
.image_marker {
	background-color: gray;
	width: 32px;
	height: 32px;
	cursor: pointer;
	border-radius: 50%;
	border: 4px solid white;
	box-shadow: 1px 1px 5px 1px #00000021;
}

/* popup */
.mapboxgl-popup-content div {
	padding: 0 0 10px 0;
}
.mapboxgl-popup-content .title {
	font-weight: bold;
}
.mapboxgl-popup-content .description {

}
.mapboxgl-popup-content .address {

}
.mapboxgl-popup-content .contacts {

}


/* mapbox changes */
.mapboxgl-ctrl-attrib.mapboxgl-compact {
	padding: 2px 24px 22px 0;
}
.mapboxgl-ctrl.mapboxgl-ctrl-attrib {
	background-color: transparent;
}
.mapboxgl-ctrl-attrib a {
	color: black;
}

.mapboxgl-popup {
	max-width: 305px !important;
}
.mapboxgl-popup-close-button {
	font-size: 1.6rem;
	padding: 0 5px;
}
.mapboxgl-popup-content {
	word-break: break-word;
	max-height: 400px;
	overflow: auto;
}