body {
	margin: 0;
	padding: 0;
	font-family:  Arial, sans-serif;
}

p {
	line-height: 1.1rem;
}

/* - - - - header - - - -*/

header {
	height: 40px;
	background-color:  #62636D;
	color:  white;
	line-height: 40px;
	padding:  0 1rem 0 0;
	display:  flex;
	justify-content: space-between;
	z-index: 1;
	position: fixed;
	width: calc(100% - 1rem);
}

header a {
	color:  white;
	text-decoration: none;
}

#logo_line {
	display: flex;
}

#logo {
	padding-left: 1rem;	
	background-color: white;
	width: 100px;
	padding: 5px 0.5rem 0 1rem;
}

#title_line {
	padding: 0 0.5rem;
}

#logo:nth-child(2){
	background-color: #62636d;
}

#logo img {
	width: 100px;
	height: auto;
}

/* - - - - filter - - - -*/

#filter_box {
	position: fixed;
	display: flex;
	justify-content: space-between;
	top:  40px;
	height: 40px;
	width: calc(100% - 1.5rem);
	background-color: #ededed;
	line-height: 40px;
	padding:  0 1rem 0 1rem;
	z-index: 0;
	border-bottom: 1px solid #cdc9c9;
}

#filter_box div {
	width: 100%;
}

#filter_box div:nth-child(1){
	border-right:  1px solid #cdc9c9;
}

#filter_box div:nth-child(1) select{
	width: 95%;
}

#filter_box div:nth-child(2) select{
	width: 95%;
	float: right;
}

.filter {
	height:  40px;
	border-color:  transparent;
	width:  90%;
	background-color: transparent;
}

/* - - - - info-bar - - - -*/

#info_bar {
	position: absolute;
	bottom:  0!important;
	width: 100%;
}

#info {
	background-color: #fff;
	border-top: 1px solid #cdc9c9;
	height: 240px;
	grid-row-gap:  1rem;
	display: none;
}

#close_info_bar {
	background-color: #efefef;
	border-top: 1px solid #cdc9c9;
	border-left: 1px solid #cdc9c9;
	position: relative;
	left: calc(100% - 50px);
	width: 50px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	cursor: pointer;
	display: none;
}

#close_info_bar:hover {
	background-color: white;
}

#info_bar a, #info_bar a:visited {
	color:  black;
}

#b_name {
	line-height: 1.5rem;
	font-weight: bold;
	border-bottom:1px solid #cdc9c9;
	background-color: #efefef;
	padding: 0.6rem 1rem;
	display: flex;
	justify-content: space-between;
}

#linked:hover {
	background-color: red;
}	

#b_name p:first-child {
	margin-bottom: 0px;
	margin-top: 0px;
}

#info_bar a {
	text-decoration: none;
}

#info_bar a span:nth-child(1):hover {
	text-decoration: underline;
}

#b_text {
	width: 60%;
	padding: 0.8rem 1rem;
}

.label {
	font-size: 0.7em;
	font-weight: normal;
	margin: 0rem 0 0.2rem 0;
}

.value {
	margin:  0 0 0.7rem;
}

.not_selected {
		color:  gray;
}

/* arrow */
.arrow {
  border: solid black;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 3px;
}

.close {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.open {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

/* The icon animation */
@keyframes arrow_move {
  0%	{left: 0px;}
  25% {left: 20px;}
  100% {left: 0px;}
}

/* The element to apply the animation to */
#to_the_link {
	position: relative;
	margin-left: 20px;
  animation-name: arrow_move;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@media only screen and (max-width: 750px) {
  #info {
    width: auto;
  }
}


/* - - - - map - - - -*/

.leaflet-control-attribution {
	position: relative;
	right:  50px;
}

#my_map {
	width:  100%;
	height: calc(100vh - 80px);
	position: absolute;
	top: 80px;
	z-index: -1;
	overflow: hidden;
}

#my_map .help {
	color:  gray;
	position:  relative;
	margin-top:  1rem;
} 

.tooltip {
	font-weight: bold;
}

.leaflet-tooltip-pane div {
	font-family:  Arial, sans-serif;
    display: flex;
    word-wrap: break-word;
}

.popup_close {
	display: none;
}

.invisible{
	display: none;
}