/* App */

html, body
{
	width: 100%;
	height: 100%;
	padding: 0px;
	margin: 0px;
	overflow: hidden;
}

/* Common */

.clickable
{
	cursor: pointer !important;
}

.clip-text
{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.text-block
{
	text-align: justify;
	/*text-justify: inter-character;*/
	line-height: 1.75em;
}

.black-shade
{
	background: rgba( 0, 0, 0, 0.5 );
}

.hover-black-shade:hover
{
	background: rgba( 0, 0, 0, 0.5 ) !important;
}

.no-events
{
	pointer-events: none !important;
}

.collapse + div
{
	display: none;
}

.collapse.show + div
{
	display: initial;
}

/* Map */

#map
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 0px;
	bottom: 0px;
	background-color: #f2efe9;
	cursor: grab;
	overflow: hidden;
}

/* Mini Map */

#minimap
{
	position: absolute;
	left: 30%;
	top: 10%;
	width: 10cm;
	height: 10cm;
}

#minimap-map
{
	width: 100%;
	height: 100%;
	/*background-color: #f2efe9;*/
	border-width: 1mm !important;
	overflow: hidden !important;
	cursor: move;
	pointer-events: auto;
}

#minimap button
{
	position: absolute;
	right: 0.75cm;
	top: 0.75cm;
	pointer-events: auto;
	width: 1.5cm;
	height: 1.5cm;
	border-width: 1mm !important;
	text-align: center !important;
}

/* Controls */

#menu-controls
{
	position: fixed;
	top: 0.5cm;
	left: 0.5cm;
}

#menu-controls button
{
	width: 1.5cm;
	height: 1.5cm;
	border-width: 1mm !important;
	text-align: center !important;
	margin-bottom: 0.25cm !important;
}

.tool-wrapper
{
	position: relative;
	padding: 0px !important;
}

.tool-wrapper .tool-tip
{
	position: absolute;
	top: 0px;
	left: 1.5cm;
	height: 1.5cm;
	line-height: 1.5cm;
	/*min-width: 5cm;*/
	display: none;
	pointer-events: none !important;
}

.tool-wrapper:hover .tool-tip
{
	display: block;
}

.tool-tip .content
{
	position: relative;	
	left: 0.7cm;
	padding: 0px !important;
	overflow: hidden;
	pointer-events: none !important;
	white-space: nowrap;
	padding-left: 0.5cm !important;
	padding-right: 0.5cm !important;
}

.tool-tip .arrow
{
	width: 0.5cm;
	height: 0.00cm;
	position: absolute;
	bottom: 50%;
	left: 0px;
	pointer-events: none !important;
}

.tool-tip .arrow:after, .tool-wrapper .arrow:before
{
	border: solid transparent;
	border-right-color: white;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none !important;
}
.tool-tip .arrow:after
{
	border-width: 0.4cm;
	margin-top: -0.4cm;
}

.tool-tip .arrow:before
{
	border-width: 0.4cm;
	margin-top: -0.4cm;
}

#map-controls
{
	/*position: fixed;
	bottom: 0.5cm;
	right: 0.0cm;*/
	position: fixed;
	bottom: 1.0cm;
	right: 0.5cm;
}

#map-controls > button
{
	width: 1.0cm;
	height: 1.0cm;
	border-width: 1mm !important;
	text-align: center !important;
	margin-bottom: 0.25cm !important;
	/*width: 1.5cm;
	height: 1.5cm;
	text-align: center !important;*/
	/*margin-bottom: 0.25cm !important;*/
	/*color: #154889;
	background-color: rgba( 0, 0, 0, 0.0 );
	text-shadow:	-1px 1px 0px white,
					-1px -1px 0px white,
					1px 1px 0px white,
					1px -1px 0px white,
					0px 2px 5px rgba( 0, 0, 0, 0.26 ),
					0px 2px 10px rgba( 0, 0, 0, 0.22 );*/
}

#map-controls > button:hover
{
	/*color: #154889 !important;
	background-color: rgba( 0, 0, 0, 0.0 ) !important;*/
}

#title-modal header > .w3-right
{
	padding-right: 6px;
}

#title-button
{
	position: absolute;
	top: 0.5cm;
	right: 0.5cm;
	text-shadow:	-1px 1px 0px white,
					-1px -1px 0px white,
					1px 1px 0px white,
					1px -1px 0px white,
					0px 2px 5px rgba( 0, 0, 0, 0.26 ),
					0px 2px 10px rgba( 0, 0, 0, 0.22 );
}

#title-button:hover
{
	background-color: rgba( 0, 0, 0, 0.0 ) !important;
}

#attrib
{
	position: absolute;
	bottom: 0px;
	right: 0px;
	opacity: 0.5;
	padding: 1mm;
	max-width: 100%;
}

/* Popup */

.ol-overlay-container, .ol-overlaycontainer, .ol-overlaycontainer-stopevent, .ol-overlay-container *, .ol-overlaycontainer *, .ol-overlaycontainer-stopevent *
{
	pointer-events: none !important;
}

#popup
{
	width: 8cm;
	pointer-events: none !important;
	opacity: 0.0;
	transition: opacity 0.35s linear;
}

#popup.show
{
	opacity: 1.0;
}

#popup-loader
{
	
}

#popup .container
{	
	width: 7cm;
	height: 2cm;
	position: relative;
	margin: 0.4cm;
	margin-bottom: 0px;
	
	bottom: 0.5cm;
	padding: 0px !important;
	overflow: hidden;
	pointer-events: none !important;
}

#popup .container .icon
{
	width: 2cm;
	height: 2cm;
	/*background-color: #f2efe9;*/
	background-size: cover;
}

#popup .container .text
{
	vertical-align: middle;
	text-align: center;
}

#popup-content.no-icon .icon
{
	display: none;
}

.animated-gradient
{
	background: repeating-linear-gradient( to right, white 0%, #f2efe9 50%, white 100% );
	/*width: 100%;*/
	background-size: 200% auto;
	background-position: 0 100%;
	animation: gradient 1s infinite;
	animation-fill-mode: forwards;
	animation-timing-function: linear;
}

@keyframes gradient
{ 
	0%   { background-position: 0 0; }
	100% { background-position: -200% 0; }
}

#popup-arrow
{
	width: 0.0cm;
	height: 0.5cm;
	position: absolute;
	bottom: 0cm;
	left: 50%;
	pointer-events: none !important;
}

#popup-arrow:after, #popup-arrow:before
{
	border: solid transparent;
	border-top-color: white;
	content: " ";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none !important;
}
#popup-arrow:after
{
	border-width: 0.4cm;
	margin-left: -0.4cm;
}

#popup-arrow:before
{
	border-width: 0.4cm;
	margin-left: -0.4cm;
}

/* Menu */

.menu
{
	position: fixed;
	width: 12cm;
	max-width: 100%;
	
	top: 0px;
	bottom: 0px;
	z-index: 0;
	
	/*left: -100%;
	transition: left 300ms linear;*/
	
	-webkit-transform: translateX( -110% );
	transform: translateX( -110% );
	transition: transform 150ms linear;
	will-change: transform;
}

.menu.show
{
	z-index: 1000;
	
	/*left: 0px;*/
	
	-webkit-transform: none;
	transform: none;
	transition: transform 150ms linear;
}

.menu > header > .w3-right
{
	padding-right: 6px;
}

.menu .content
{
	overflow-y: auto;
	position: absolute;
	left: 0px;
	right: 0px;
	top: 65.3px; /* header height */
	bottom: 0px;
}

.menu .list-wrapper
{
	position: absolute;
	width: 100%;
	min-height: 100%;
}

.menu .list-wrapper tr
{
	height: 3cm;
}

.menu .list-wrapper td.w3-center
{
	vertical-align: middle;
}

.timeline
{
	border-right-style: dotted !important;
	position: absolute;
	left: 47px;
	top: 0px;
	bottom: 0px;
	z-index: -10;
}

.loader
{
	position: absolute;
	left: 0px;
	right: 0px;
	top: 66px;
	bottom: 0px;
	opacity: 0.0;
	pointer-events: none;
	transition: opacity 300ms linear;
	z-index: 9999;
}

.loader.show
{
	opacity: 1.0;
}

.spinner
{
	width: 3cm;
	height: 3cm;
	position: absolute;
	top: 0px;
	bottom: 0px;
	left: 0px;
	right: 0px;
	margin: auto;
	background-image: url( "../assets/CircleSpinner.png" );
	background-size: cover;
}

.big-icon
{
	vertical-align: middle !important;
	padding: 10mm;
}

.big-icon > *
{
	width: 1.8cm;
	height: 1.8cm;
	line-height: 1.8cm;
}

.small-icon
{
	vertical-align: middle !important;
}

.small-icon > *
{
	width: 1.0cm;
	height: 1.0cm;
	line-height: 1.0cm;
}

.icon-arrow
{
	background-image: url( "../assets/IconArrow.png" );
	background-size: cover;
}

.slider-wrapper
{
	padding: 0.5cm;
	text-align: center;
}

.slider
{
	-webkit-appearance: none;
	appearance: none;
	width: 100%;
	height: 1mm;
	background: #f1f1f1;
	outline: none;
	cursor: pointer;
	/*opacity: 0.7;
	-webkit-transition: 0.2s;
	transition: opacity 0.2s;*/
}

.slider:hover
{
	/*opacity: 1.0;*/
}

.slider::-webkit-slider-thumb
{
	-webkit-appearance: none;
	appearance: none;
	width: 0.5cm;
	height: 0.5cm;
	border-radius: 0.5cm;
	background: #154889;
	cursor: pointer;
	border: 1mm solid white;
	box-shadow: 0px 1px 2px 2px rgba( 0, 0, 0, 0.2 );
}

.slider::-moz-range-thumb
{
	width: 0.5cm;
	height: 0.5cm;
	border-radius: 0.5cm;
	background: #154889;
	cursor: pointer;
	border: 1mm solid white;
	box-shadow: 0px 1px 2px 2px rgba( 0, 0, 0, 0.2 );
}

.scroll-up
{
	position: fixed;
	right: 1cm;
	bottom: 0px;
	color: #154889 !important;
	background: none !important;
}

/* Title Modal */

#title-modal
{
	z-index: 8888;
}

#title-text .align_center
{
	margin: 0px auto;
	display:block;
}