@font-face {
  font-family: Lato-Black;
  src: url(./static_assets/fonts/Lato-Black.ttf);
}

@font-face {
  font-family: Lato-BlackItalic;
  src: url(./static_assets/fonts/Lato-BlackItalic.ttf);
}

@font-face {
  font-family: Lato-Bold;
  src: url(./static_assets/fonts/Lato-Bold.ttf);
}

@font-face {
  font-family: Lato-BoldItalic;
  src: url(./static_assets/fonts/Lato-BoldItalic.ttf);
}

@font-face {
  font-family: Lato-Italic;
  src: url(./static_assets/fonts/Lato-Italic.ttf);
}

@font-face {
  font-family: Lato-Light;
  src: url(./static_assets/fonts/Lato-Light.ttf);
}

@font-face {
  font-family: Lato-LightItalic;
  src: url(./static_assets/fonts/Lato-LightItalic.ttf);
}

@font-face {
  font-family: Lato-Regular;
  src: url(./static_assets/fonts/Lato-Regular.ttf);
}

@font-face {
  font-family: Lato-Thin;
  src: url(./static_assets/fonts/Lato-Thin.ttf);
}

@font-face {
  font-family: Lato-ThinItalic;
  src: url(./static_assets/fonts/Lato-ThinItalic.ttf);
}

body {
	margin: 0;
}

#container {
	position: fixed;
	bottom: 0;
	right: 0;
	margin: 0;
	padding: 0;
}

#logo_galabau {
	background: url('./static_assets/ui/Logo_Galabau.svg') top left/cover no-repeat;
	position: fixed;
	border: none;
	top: 30;
	right: 30;
	height: 100px;
	width: 75px;
}

/* Tutorial */

#tutorial {
	visibility: hidden;
	font-family: Lato-Regular;
	color: white;
	background-color: rgba(0,0,0,0.9);
	position: absolute;
	margin: auto;
	padding-bottom: 40px;
	left: 30%;
	top: 10%;
	width: 40%;
	max-height: 80%;
	z-index: 99;
}

#tutorial_close_icon {
	opacity: 1;
	background: url('./static_assets/menu/close_button.svg') top left/cover no-repeat;
	position: absolute;
	top: 30;
	right: 30;
	height: 20px;
	width: 20px;
	cursor: pointer;
}

#tutorial_title {
	font-size: xx-large;
	width: 70%;
	margin: 0 auto;
	margin-top: 70px;
}

#tutorial_subtitle {
	font-size: x-large;
	width: 70%;
	margin: 0 auto;
	margin-top: 30px;
}

#tutorial_text {
	font-size: medium;
	width: 70%;
	margin: 0 auto;
	margin-top: 30px;
}

.tutorial_minititle {
	font-size: medium;
	width: 70%;
	margin: 0 auto;
	margin-top: 30px;
}

#tutorial_elements {
	width: 70%;
	height: 40%;
	margin: 0 auto;
	margin-top: 10px;
	margin-bottom: 10px;
	padding-bottom: 40px;
	padding: 20px;
}

#tutorial_navigation {
	width: 70%;
	height: 40%;
	margin: 0 auto;
	margin-top: 10px;
	padding-bottom: 40px;
	margin-bottom: 30px;
	padding: 20px;
}

.tutorial_element {
	vertical-align: middle;
	top: 50%;
	font-size: medium;
}

.tut_elem {
	width: 50%;
	margin-bottom: 20px;
	display: flex;
	align-items: center;
}

#tut_element1 {
	float: left;
}

#tut_element2 {
	float: right;
}

#tut_element3 {
	float: left;
}

#tut_element4 {
	float: right;
}

#tut_element5 {
	width: 100%;
	float: left;
}

.tutorial_icon {
	height: 40px;
	width: 40px;
	float: left;
	margin-right: 20px;
}

#tut_icon1 {
	background: url('./static_assets/menu/interface_infobox_ubersicht_icon.svg') top left/cover no-repeat;
}

#tut_icon2 {
	background: url('./static_assets/menu/interface_infobox_standort_icon.svg') top left/cover no-repeat;
}

#tut_icon3 {
	background: url('./static_assets/menu/interface_infobox_info_icon.svg') top left/cover no-repeat;
}

#tut_icon4 {
	background: url('./static_assets/menu/interface_infobox_play_icon.svg') top left/cover no-repeat;
}

#tut_icon5 {
	background: url('./static_assets/menu/maximize.svg') top left/cover no-repeat;
	height: 30px;
	width: 30px;
	float: left;
	margin-left: 5px;
	margin-right: 25px;
}

/* Media queries for the tutorial box in small screens or smartphones */

@media screen and (max-width: 1200px) {

	#tutorial {
		left: 10%;
		width: 80%;
		top: 2%;
		max-height: 95%;
		padding-bottom: 10px;
	}
	
	#tutorial_title {
		width: 80%;
		font-size: x-large;
		margin-top: 25px;
	}

	#tutorial_subtitle {
		width: 80%;
		font-size: large;
		margin-top: 20px;
	}
	
	#tutorial_text {
		width: 80%;
		font-size: small;
		margin-top: 20px;
	}
	
	.tutorial_minititle {
		width: 80%;
		font-size: small;
		margin-top: 20px;
		margin-bottom: 10px;
	}

	#tutorial_elements {
		width: 80%;
		padding: 0;
	}
	
	#tutorial_navigation {
		width: 80%;
		padding: 0;
	}
	
	.tutorial_element {
		font-size: small;
	}
	
	.tut_elem {
		max-width: 25%;
		font-size: small;
	}
	
	.tutorial_icon {
		height: 20px;
		width: 20px;
		margin-right: 10px;
	}
	
	#tut_icon5 {
		height: 15px;
		width: 15px;
		margin-left: 2.5px;
		margin-right: 12.5px;
	}

}

/* Menu */

#menu_closed {
	visibility: visible;
	background-color: rgba(120,190,32,0.6);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 50px;
	cursor: pointer;
}

#menu_info_icon {
	opacity: 1;
	background: url('./static_assets/menu/icon_info.svg') top left/cover no-repeat;
	position: fixed;
	top: 20;
	left: 15;
	height: 20px;
	width: 20px;
	cursor: pointer;
	z-index: 3;
}

#navi_tooltip_info {
	font-family: Lato-Regular;
	color: white;
	background-color: #3b734e;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 20px;
	border: 3px solid white;
	position: fixed;
	top: 20;
	left: 65;
	z-index: 3;
	visibility: hidden;
}

#navi_full_icon {
	opacity: 1;
	background: url('./static_assets/menu/maximize.svg') top left/cover no-repeat;
	position: fixed;
	top: 55;
	left: 15;
	height: 20px;
	width: 20px;
	cursor: pointer;
	z-index: 3;
}

#navi_tooltip_full {
	font-family: Lato-Regular;
	color: white;
	background-color: #3b734e;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 20px;
	border: 3px solid white;
	position: fixed;
	top: 55;
	left: 65;
	z-index: 3;
	visibility: hidden;
}

#menu_arrow_icon {
	visibility: visible;
	opacity: 1;
	background: url('./static_assets/menu/arrow_side_menu.svg') top left/cover no-repeat;
	position: absolute;
	top: 50%;
	left: 17;
	height: 25px;
	width: 15px;
	cursor: pointer;
}

#navi_tooltip_arrow {
	font-family: Lato-Regular;
	color: white;
	background-color: #3b734e;
	padding-left: 10px;
	padding-right: 10px;
	border-radius: 20px;
	border: 3px solid white;
	position: absolute;
	top: 50%;
	left: 65;
	z-index: 3;
	visibility: hidden;
}

#menu_open {
	visibility: hidden;
	background-color: rgba(120,190,32,0.9);
	position: fixed;
	top: 0;
	left: 0;
	height: 100%;
	width: 250px;
	overflow: auto;
	scrollbar-color: rgba(120,190,32,0.9) rgba(120,190,32,0.9);
	scrollbar-width: 0.1rem;
}

#menu_open::-webkit-scrollbar {
  width: 0.5em;
}

#menu_close_icon {
	opacity: 1;
	background: url('./static_assets/menu/close_button.svg') top left/cover no-repeat;
	position: fixed;
	top: 20;
	left: 200;
	height: 20px;
	width: 20px;
	cursor: pointer;
}

#menu_header {
	font-size: large;
	font-family: Lato-Regular;
	color: white;
	margin: 90px 10px 10px 15px;
}

#menu_subheader {
	font-size: smaller;
	font-family: Lato-Regular;
	color: white;
	margin: 10px 10px 10px 15px;
}

.menu_sphere {
	border: 2px solid white;
	height: 130px;
	width: 200px;
	margin: 10px 15px 0px 15px;
	cursor: pointer;
}

.info_title {
	float: left;
	background: url('./static_assets/menu/Thumbnail_info_icon.svg') top left/cover no-repeat;
	height: 20px;
	width: 20px;
	margin: 10px 10px 10px 15px;
}

.menu_title {
	font-family: Lato-Regular;
	font-size: smaller;
	color: white;
	margin: 10px 10px 0px 30px;
}

.menu_subtitle {
	opacity: 0.8;
	font-family: Lato-Regular;
	font-size: small;
	color: white;
	margin: 0px 15px 30px 15px;
}

#menu_s1 {
	margin-top: 30px;
}

#menu_s1 {
	background: url('./static_assets/menu/menu_sphere1.jpg') top left/cover no-repeat;
}

#menu_s2 {
	background: url('./static_assets/menu/menu_sphere2.jpg') top left/cover no-repeat;
}

#menu_s3 {
	background: url('./static_assets/menu/menu_sphere3.jpg') top left/cover no-repeat;
}

#menu_s4 {
	background: url('./static_assets/menu/menu_sphere4.jpg') top left/cover no-repeat;
}

#menu_s5 {
	background: url('./static_assets/menu/menu_sphere5.jpg') top left/cover no-repeat;
}

/* Minimap */

#map_background {
	background: url('./static_assets/ui/maps_bg_grey.svg') top left/cover no-repeat;
	opacity: 0.2;
	position: fixed;
	border: none;
	bottom: 0;
	right: 0;
	height: 220px;
	width: 220px;
}

#map_green {
	background: url('./static_assets/ui/maps_map_green.svg') top left/cover no-repeat;
	opacity: 0.6;
	position: fixed;
	border: none;
	bottom: 0;
	right: 0;
	height: 220px;
	width: 220px;
}

.map_drone {
	background: url('./static_assets/icons/icon_drohne_1.svg') top left/cover no-repeat;
	opacity: 0.6;
	position: fixed;
	height: 50px;
	width: 50px;
}

.map_drone:hover {
	background: url('./static_assets/icons/icon_drohne_aktiv_1.svg') top left/cover no-repeat !important;
	opacity: 1 !important;
	cursor: pointer;
}

.map_drone:hover + .tooltip {
	visibility: visible !important;
}

#DroneA_Start {
	bottom: 105;
	right: 115;
}

#DroneB {
	bottom: 65;
	right: 65;
}

.map_sphere {
	background: url('./static_assets/icons/icon_hotspot_1.svg') top left/cover no-repeat;
	opacity: 0.6;
	position: fixed;
	height: 30;
	width: 30;
}

.map_sphere:hover {
	background: url('./static_assets/icons/icon_hotspot_aktiv_1.svg') top left/cover no-repeat !important;
	opacity: 1 !important;
	cursor: pointer;
}

.map_sphere:hover + .tooltip {
	visibility: visible !important;
}

#Sphere1 {
	bottom: 143;
	right: 155;
}

#Sphere2 {
	bottom: 65;
	right: 110;
}

#Sphere3 {
	bottom: 145;
	right: 100;
}

#Sphere4 {
	bottom: 117;
	right: 68;
}

#Sphere5 {
	bottom: 45;
	right: 45;
}

.tooltip {
	font-family: Lato-Regular;
	color: white;
	background-color: #3b734e;
	padding-left: 10px;
	padding-right: 10px;
	position: fixed;
	border-radius: 20px;
	border: 3px solid white;
	visibility: hidden;
	cursor: default;
	z-index: 3;
}

#tooltip_d1 {
	bottom: 127;
	right: 170;
}

#tooltip_d2 {
	bottom: 87;
	right: 120;
}

#tooltip_s1 {
	bottom: 148;
	right: 196;
}

#tooltip_s2 {
	bottom: 70;
	right: 150;
}

#tooltip_s3 {
	bottom: 150;
	right: 140;
}

#tooltip_s4 {
	bottom: 122;
	right: 107;
}

#tooltip_s5 {
	bottom: 50;
	right: 85;
}