/* CSS - Cascading Style Sheet */
/* Palette color codes */
/* Palette URL: http://paletton.com/#uid=13p0u0kex8W2uqu8af7lEqaulDE */

/* Feel free to copy&paste color codes to your application */

/* As hex codes */
.color-primary-0 { color: #19282C }	/* Main Primary color */
.color-primary-1 { color: #7A8184 }
.color-primary-2 { color: #39474B }
.color-primary-3 { color: #2D6D82 }
.color-primary-4 { color: #108FB9 }

/* As RGBa codes */
.rgba-primary-0 { color: rgba( 25, 40, 44,1) }	/* Main Primary color */
.rgba-primary-1 { color: rgba(122,129,132,1) }
.rgba-primary-2 { color: rgba( 57, 71, 75,1) }
.rgba-primary-3 { color: rgba( 45,109,130,1) }
.rgba-primary-4 { color: rgba( 16,143,185,1) }

/* Generated by Paletton.com © 2002-2014 */
/* http://paletton.com */




:root{
	
	--color-0: 			rgba(101,101,101, 0.9);
	--color-1: 			rgba(122,129,132, 0.9);
	--color-2: 			rgba( 57, 71, 75, 0.9);
	--color-3: 			rgba( 45,109,130, 0.9);
	--color-4: 			rgba( 16,143,185, 0.9);
	
	--bg-color:			var(--color-0);
	--bg-color-2:		rgb(101,101,101, 0.7);
	--bg-light-color:	rgba( 48, 61, 65, 0.9);
	--bg-dark-color:	rgba( 24, 31, 33, 0.9);
	--bg-hover-color:	var(--color-2);
	
	--font-color:		#000000;
	--font-color-2:		#FFFFFF;
	--font-color:		#000000;
	--border-color:		black;
	
	--measurement-detail-node-bg-light:		var(--color-1);
	--measurement-detail-node-bg-dark:		var(--color-2);
	--measurement-detail-area-bg-color:		#eee;

	
}

	/* Center the loader */
	.loader {
	  position: absolute;
	  top: 0;
	  bottom: 0;
	  left: 0;
	  right: 0;
	}

	.jimu-primary-loading:before,
	.jimu-primary-loading:after {
	  position: absolute;
	  top: 0;
	  content: '';
	}

	.jimu-primary-loading:before {
	  left: -19.992px;
	}

	.jimu-primary-loading:after {
	  left: 19.992px;
	  -webkit-animation-delay: 0.32s !important;
	  animation-delay: 0.32s !important;
	}

	.jimu-primary-loading:before,
	.jimu-primary-loading:after,
	.jimu-primary-loading {
	  background: #076fe5;
	  -webkit-animation: loading-keys-app-loading 0.8s infinite ease-in-out;
	  animation: loading-keys-app-loading 0.8s infinite ease-in-out;
	  width: 13.6px;
	  height: 32px;
	}

	.jimu-primary-loading {
	  text-indent: -9999em;
	  margin: auto;
	  position: absolute;
	  right: calc(50% - 6.8px);
	  top: calc(50% - 16px);
	  -webkit-animation-delay: 0.16s !important;
	  animation-delay: 0.16s !important;
	}

	@-webkit-keyframes loading-keys-app-loading {

	  0%,
	  80%,
	  100% {
		opacity: .75;
		box-shadow: 0 0 #076fe5;
		height: 32px;
	  }

	  40% {
		opacity: 1;
		box-shadow: 0 -8px #076fe5;
		height: 40px;
	  }
	}

	@keyframes loading-keys-app-loading {

	  0%,
	  80%,
	  100% {
		opacity: .75;
		box-shadow: 0 0 #076fe5;
		height: 32px;
	  }

	  40% {
		opacity: 1;
		box-shadow: 0 -8px #076fe5;
		height: 40px;
	  }
	}
	/* Add animation to "page content" */

	#myDiv {
	  display: none;
	  text-align: center;
	}

#potree_sidebar_container{
	font-size:	100%;
	position:	absolute;
	z-index:	3;
	top: 32px;
	bottom: 0px;
	width:		300px;
	left: -300px;
    background: #f9f9f9; 
    background: -moz-linear-gradient(top, #f9f9f9 0%, #c2c2c2 96%); 
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#c2c2c2 96%); 
    background: linear-gradient(to bottom, #f9f9f9 0%,#c2c2c2 96%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#c2c2c2',GradientType=0 ); 
	//scrollbar-color: var(--color-1) var(--bg-color);
	//scrollbar-width: thin;
	border-radius: 0em 0em 0em 0em;
	-webkit-transition: left .5s;
	transition: left .5s;
	overflow-y:	scroll;
	scrollbar-width: none;
}

#sidebar_root{
	color:				var(--font-color);
	font-family:		Arial,Helvetica,sans-serif;
	font-size:			1em;
}

.potree_failpage{
	width: 100%;
	height: 100%;
	background-color: black;
	position: absolute;
	margin: 15px;
}

.potree_failpage a{
	color: initial !important;
	text-decoration: underline !important;
}

.potree_info_text{
	color:		black;
	font-weight: bold;
	text-shadow:  1px  1px 1px black,
				  1px -1px 1px black,
				 -1px  1px 1px black,
				 -1px -1px 1px black;
}

.potree_message{
	width: 500px;
	background-color: var(--bg-color);
	padding: 5px;
	margin: 5px;
	border-radius: 4px;
	color: var(--font-color);
	font-family: Arial;
	opacity: 0.8;
	border: 1px solid black;
	display: flex;
	overflow: auto;
}

.potree_message_error{
	background-color: red;
}

#potree_description{
	position: absolute; 
	top: 10px; 
	left: 50%; 
	transform: translateX(-50%); 
	text-align: center;
	z-index:	1000;
}

.potree_sidebar_brand{
	margin:			1px 20px;
	line-height:	2em;
	font-size:		100%;
	font-weight:	bold;
	position:		relative;
	display:		flex; 
	flex-direction:	row;
}

#potree_sidebar_container a{
	color: 			black;
	z-index:	3;
}

#potree_quick_buttons{
	position: absolute;
	left: 4px;
	top: 4px; 
	width: 10px; 
	height: 10px; 
	z-index: 1000;
	float: left;
}

.potree_menu_toggle{
	position: fixed;
	float:			left;
	margin:			0;
	background:		none;
	width:			40px;
	height:			40px;
	z-index:		10;
	top:			-200px;
	left:			5px;
	cursor: 		pointer;
}
	.potree_menu_toggle:hover{
		filter:			drop-shadow(0px 0px 2px white);
		cursor: 		hover;
		-webkit-animation: spin 2s linear infinite;
		animation: spin 2s linear infinite;
	}

#potree_map_toggle{
	position: fixed;
	float:			left;
	margin:			0;
	background:		none;
	width:			70px;
	height:			70px;
	z-index:		100;
	top:			-100px;
	left:			40px;
	cursor: 		pointer;
}

#potree_render_area{
	position: 	absolute;
	background: transparent;
	top: 		32px;
	//bottom: 	27px;
	bottom: 	0px;
	left: 		0px;
	right: 		0px;
	overflow: 	hidden;
	z-index: 	3;
	-webkit-transition: bottom .4s, left .4s;
	transition: bottom .4s, left .4s;
}

#cesiumContainer{
	position: 	absolute;
	background: black;
	top: 		32px;
	bottom: 	0px;
	left: 		0px;
	right: 		0px;
	overflow: 	hidden;
	z-index: 	2;
	-webkit-transition: bottom .4s, left .5s;
	transition: bottom .4s, left .5s;
}


.potree-panel {
	border: 		1px solid black;
	border-radius: 	0.4em;
	padding: 		0px;
	background-color: var(--bg-light-color);
}

.potree-panel-heading{
	background-color: var(--bg-dark-color);
}

a:hover, a:visited, a:link, a:active{
	color: 				#ccccff;
	text-decoration: 	none;
}

.annotation{
	position:		absolute;
	padding:		10px;
	opacity:		0.5;
	transform:		translate(-50%, -30px);
	will-change:	left, top;
}

.annotation-titlebar{
	color:			black;
	background-color:	white;
	border-radius:	0.5em;
	border:			1px solid rgba(255, 255, 255, 0.7);
	font-size:		1em;
	opacity:		1;
	margin:			auto;
	display:		table;
	padding:		1px 8px;
	cursor: 		pointer;
}

.annotation-expand{
	color:			black;
	font-size:		0.6em;
	opacity:		1;
}

.annotation-action-icon{
	width:			20px;
	height:			20px;
	display:		inline-block;
	vertical-align:	middle;
	line-height:	1.5em;
	text-align:		center;
	font-family:	sans-serif;
	font-weight:	bold;
	cursor: 		pointer;
}

.annotation-action-icon:hover{
	filter:			drop-shadow(0px 0px 1px black);
	width:			24px;
	height:			24px;
	cursor: 		pointer;
	transform: scale(1.2);
}
.annotation-action-icon-hello:hover{
	width:			24px;
	height:			24px;
	cursor: 		pointer;
	transform: scale(1.1);
}

.annotation-item {
	color:			black;
	background-color: 	black;
	opacity:		0.5;
	border-radius:	0.5em;
	font-size:		1em;
	line-height:	1.5em;
	padding:		1px 8px 0px 8px;
	font-weight:	bold;
	display:		flex;
	cursor:			default;
}

.annotation-item:hover {
	opacity:		1.0;
	box-shadow:		0 0 5px #ffffff;
}

.annotation-main{
	display:		flex;
	flex-grow:		1;
}

.annotation-label{
	display:		inline-block;
	height:			100%;
	flex-grow:		1;
	user-select:	none;
	-moz-user-select: none;
	z-index:		100;
	vertical-align:	middle;
	line-height:	1.5em;
	font-family:	sans-serif;
	font-weight:	bold;
	cursor: 		pointer;
	white-space:	nowrap;
}

.annotation-description{
	position:		relative;
	color:			black;
	background-color:	white;
	padding:		10px;
	margin:			5px 0px 0px 0px;
	border-radius:	4px;
	display:		none;
	max-width:		500px;
	//width:			500px;
}

.annotation-description-close{
	//filter:			invert(100%);
	float:			right;
	opacity:		0.5;
	margin:			0px 0px 8px 8px;
}

	
.annotation-description-content{
	position: relative; 
	color:			black;
}

.annotation-icon{
	width:		20px;
	height:		20px;
	filter:		invert(100%);
	margin:		2px 2px;
	opacity:	0.5;
}
[contenteditable="true"] {
    background-color: white;
	min-width: 100%;
}

[contenteditable="false"] {
    background-color: none;
}


canvas { 
	width: 100%; 
	height: 100% 
}

body{ 
	margin: 	0; 
	padding: 	0;
	position:	absolute;
	width: 		100%;
	height: 	100%;
	overflow:	hidden;
}

.axis {
  font: 		10px sans-serif;
  color: 		var(--font-color);
}

.axis path{
	fill: 		rgba(255, 255, 255, 0.5);
	stroke: 		var(--font-color);
	shape-rendering: crispEdges;
	opacity: 		0.7;
}

.axis line {
	fill: 		rgba(255, 255, 255, 0.5);
	stroke: 		var(--font-color);
	shape-rendering: crispEdges;
	opacity: 		0.1;
}

.tick text{
	font-size: 12px;
}

.scene_header{
	display:flex;
	cursor: pointer;
	padding: 2px;
}

.scene_content{
	padding: 5px 0px 5px 0px;
	/*background-color: rgba(0, 0, 0, 0.4);*/
}

.measurement_content{
	padding: 5px 15px 5px 10px;
	/*background-color: rgba(0, 0, 0, 0.4);*/
}

.propertypanel_content{
	padding: 5px 15px 5px 10px;
	/*background-color: rgba(0, 0, 0, 0.4);*/
}

.measurement_value_table{
	width: 100%;
}

.coordinates_table_container table td {
	width: 33%;
	text-align: center;
}

#scene_object_properties{
	margin:		0px;
	overflow: auto;
}
.pv-menu-list{
	list-style-type:	none;
	padding:			0;
	margin:				15px 0px;
	overflow:			hidden;
}

.pv-menu-list > *{
	margin: 	4px 20px;
}
.pv-menu-list > li > .ui-slider{
	background-color: 	rgba(40,159,168,1) !important;
	background: 		none;
	border: 			0px solid black;
}

.pv-menu-list .ui-slider{
	background-color: 	rgba(40,159,168,1) !important;
	background: 		none;
	border: 			0px solid black !important;
}


.pv-panel-heading{
	padding: 	4px !important;
	display: 	flex; 
	flex-direction: row
}

.ui-slider {
	margin-top: 5px;
	margin-bottom: 10px;
	background-color: 	var(--color-1) !important;
	background: 		none;
	border: 			0px solid black;
}

.ui-selectmenu-button.ui-button{
	width: 		100% !important;
}


.ui-slider-handle{
	border: 			1px solid black !important;
}

.ui-widget{
	box-sizing:border-box
}

.panel-body > li > .ui-slider{
	background-color: 	rgba(40,159,168,1) !important;
	background: none;
	border: 0px solid black;
}

.panel-body > div > li > .ui-slider{
	background-color: var(--color-1) !important;
	background: none;
	border: 1px solid black;
}

.pv-select-label{
	margin: 1px;
	font-size: 90%;
	font-weight: 100;
}

.button-icon{

}
.button-icon:hover{
	/*background-color:	#09181C;*/
	filter:			drop-shadow(0px 0px 1px black);
	transform: scale(1.4);
}
.ui-widget-content{
	/*color: var(--font-color) !important;*/
}

.accordion > h3{
	background-color: rgba(255,255,255, 1) !important;
	//background: #f6f6f6 50% 50% repeat-x;
	border:		1px solid black;
	color:		rgba(0,0,0, 1);
	cursor:		pointer;
	margin:		0px 0 0 0;
	padding:	4px 10px 4px 30px;
	//box-shadow:	0px 3px 3px #111;
	//text-shadow:	1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size:	1em;
}

.accordion > h3:hover{
	filter: brightness(125%);
}

.accordion-content{
	padding: 0px 0px !important;
	border: none !important;
}

.icon-bar{
	height: 4px !important;
	border: 1px solid white;
	background-color: black;
	border-radius: 2px;
}

.canvas{
	-webkit-transition: top .35s, left .35s, bottom .35s, right .35s, width .35s;
	transition: top .35s, left .35s, bottom .35s, right .35s, width .35s;
}

#profile_window{
	background-color:	var(--bg-color);
}

#profile_titlebar{
	background-color:	var(--bg-color-2);
	color: var(--font-color-2);
	text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
	font-size: 1em;
	font-weight: bold;
}

#profile_window_title{
	position: absolute;
	margin: 5px;
}

.profile-container-button{
	cursor: pointer;
}

.profile-button:hover{
	background-color: #0000CC;
}

.unselectable{
	user-select: 			none;
}

.selectable{
	user-select: 			text;
}



.divider {
	display: 		block;
	text-align: 	center;
	overflow: 		hidden;
	white-space: 	nowrap; 
	font-weight:	bold;
	font-size:		90%;
	letter-spacing:	1px;
	margin-left:	0px;
	margin-right:	0px;
	margin-top: 	1px;
	margin-bottom: 	1px;
	padding:		1px !important;
}

.divider > span {
	position: 	relative;
	display: 	inline-block;
}

.divider > span:before,
.divider > span:after {
	content: 	"";
	position: 	absolute;
	top: 		50%;
	width: 		9999px;
	height: 	1px;
	background: #b2b2b2;
}

.divider > span:before {
	right: 100%;
	margin-right: 5px;
}

.divider > span:after {
	left: 100%;
	margin-left: 5px;
}











.ol-dragbox {
  background-color: rgba(255,255,255,0.4);
  border-color: rgba(100,150,0,1);
  border: 1px solid red;
}

.text-icon{
	opacity:	0.5;
	height:		24px;
}

.text-icon:hover{
	opacity:	1.0;
}

.input-grid-cell{
	flex-grow: 1; margin: 0px 3px 0px 3px;
}

.input-grid-label{
	flex-grow: 1; 
	margin: 0px 3px 0px 3px; 
	text-align:center; 
	font-weight: bold;
}

.input-grid-cell > input{
	width: 100%
}

.invalid_value{
	color: #e05e5e;
}


































/** 
 * OVERRIDES
 */


.ui-spinner-input{
	color: black;
}

.jstree-themeicon-custom{
	background-size: 16px !important;
}

.jstree-default .jstree-clicked{
	/*background-color: #ffffff !important;*/ghi chú
	background-color: #34494f !important;
}

.jstree-default .jstree-hovered{
	background-color: #34494f !important;
}

.jstree-anchor{
	width: 100% !important;
}

.ui-state-default{
	//background: rgba(0,155,144, 1) !important;
	//backdrop-filter: blur(2px);
	border: 0px solid black;
	color: black;
}

.ui-state-active{
	background: rgba(40,159,168,1) !important;
	//backdrop-filter: blur(2px);
	color: white !important;
}

.cesium-viewer .cesium-viewer-cesiumWidgetContainer{
	position: absolute;
	height: 100%;
	width: 100%;
}


::-webkit-scrollbar {
	width: 6px;
	background-color: var(--bg-color);
}

::-webkit-scrollbar-track {

}

::-webkit-scrollbar-thumb {
	background-color: var(--color-1);
}

.propertypanel_content .heading{
	font-weight: bold;
	padding-top: 0.6em;
	padding-bottom: 0.1em;
}
	body {
	  font-family: sans-serif;
	  font-size: 15px;
	}
	#menu ul {
	  //background: #267CB5;
	  width: 100%;
	  padding: 0;
	  list-style-type: none;
	  text-align: left;
	}
	#menu li {
	  width: 400px;
	  height: 0px;
	  line-height: 0px;
	  border-bottom: 0px solid #282828;
	  padding: 0 0em;
	}
	#menu li a {
	  text-decoration: none;
	  color: #267CB5;
	  font-weight: bold;
	  display: block;
	}
	#menu ul li {
	 //position: relative;
	}
	#menu .sub-menu {
	 position: absolute;
	 right: 0px;
	 top: 15px;
	 display: none;
	}
	#menu .sub-menu1 {
	 position: absolute;
	 right: 0px;
	 top: 0px;
	 display: none;
	}
	#menu li:hover .sub-menu {
	 display: block;
	}

	#menu li_1 {
	  width: 40px;
	  height: 0px;
	  line-height: 0px;
	  border-bottom: 0px solid #282828;
	  padding: 0 0em;
	}
	#menu li_1 a {
	  text-decoration: none;
	  color: #267CB5;
	  font-weight: bold;
	  display: block;
	}
	#menu ul li_1 {
	 //position: relative;
	}
	#menu li_1:hover .sub-menu {
	 display: block;
	}


	#company_logo{
		position: absolute; 
		z-index: 5; 
		right: 2px;
		bottom: 3px;
		display: flex;
		//flex-direction: column;
		//flex-wrap: wrap;
		//background: rgba(50,50,50, 0.8);
		//backdrop-filter: blur(5px);
		//border-radius: 1.5em 1.5em 1.5em 1.5em;
		padding: 0px 0px 0px 0px;
	}

	#info{
		position: fixed;
		white-space: nowrap;
		overflow: hidden;
		z-index: 5; 
		height: 32px;
		left: 0px; 
		width: 100%; 
		top: 0px;
		text-align: center;
		place-items: center;
		align-content: center;
		background: #f9f9f9;
		color: white;
		padding: 0em 0em;
		font-family: 10px serif;
		display: flex;
		z-index: 1;
	}
	.info{
		overflow: hidden;
		left: 0px; 
		right: 0px; 
		text-align: center;
		place-items: center;
		align-content: center;
		display: flex;
	}
	#potree_3d2d{
		position: fixed;
		white-space: nowrap;
		overflow: hidden;
		z-index: 5; 
		height: 32px;
		direction: rtl;
		top: 0px;
		right: 0px; 
		text-align: center;
		place-items: center;
		align-content: center;
		background: transparent;
		color: white;
		text-shadow: -1px -1px 0 rgba(48,48,48,0.5), 1px -1px 0 rgba(48,48,48,0.5), -1px 1px 0 rgba(48,48,48,0.5), 1px 1px 0 rgba(48,48,48,0.5);
		padding: 0em 0em;
		font-family: 10px serif;
		display: flex;
		z-index: 2;
		-webkit-transition: right .5s;
		transition: right .5s;
	}
	.potree_3d2d{
		overflow: hidden;
		left: 0px; 
		right: 0px; 
		text-align: center;
		place-items: center;
		align-content: center;
		display: flex;
	}
	#thanhcongcudo{
		position: absolute; 
		z-index: 5; 
		right: 5px;
		top: 28%;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		background: #565656; 
		background: -moz-linear-gradient(top, #565656  0%, #303030 96%); 
		background: -webkit-linear-gradient(top, #565656  0%,#303030 96%); 
		background: linear-gradient(to top, #565656  0%,#303030 96%); 
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#303030',GradientType=0 ); 
		border-radius: 1em 1em 1em 1em;
		padding: 5px 0px 5px 5px;
		-webkit-transition: top .5s;
		transition: top .5s;
	}
	.thanhcongcudo:hover{
		filter:			drop-shadow(0px 0px 2px white);
		cursor: 		hover;
		transform: scale(1.4);
	}
	.tooltiptext{
		font:10px Sans-serif;
	}
.thanhcongcudo .tooltiptext {
 visibility: hidden;
 width: 5em;
 background-color: black;
 color: white;
 text-align: center;
 border-radius: 1em;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 top: 25%;
 right: 110%;
}

.thanhcongcudo .tooltiptext::after {
 content: "";
 position: absolute;
 top: 50%;
 left: 97%;
 margin-top: -5px;
 border-width: 5px;
 border-style: solid;
 transform: rotate(180deg);
 border-color: transparent rgba(0, 0, 0, 1) transparent transparent;
}

.thanhcongcudo:hover .tooltiptext {
 visibility: visible;
}

.thanhdieuhuong .tooltiptext {
 visibility: hidden;
 width: 5em;
 background-color: white;
 color: black;
 text-align: center;
 border-radius: 1em;
 padding: 5px 0;
 position: absolute;
 z-index: 1;
 top: 25%;
 left: 110%;
}

.thanhdieuhuong .tooltiptext::after {
 content: "";
 position: absolute;
 top: 50%;
 right: 97%;
 margin-top: -5px;
 border-width: 5px;
 border-style: solid;
 border-color: transparent rgba(255, 255, 255, 1) transparent transparent;
}

.thanhdieuhuong:hover .tooltiptext {
 visibility: visible;
}
	#thanhdieuhuong{
		position: absolute; 
		z-index: 5; 
		left: 5px;
		top: 30%;
		display: flex;
		flex-direction: column;
		//flex-wrap: wrap;
    background: #f9f9f9; 
    background: -moz-linear-gradient(top, #f9f9f9 0%, #c2c2c2 96%); 
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#c2c2c2 96%); 
    background: linear-gradient(to bottom, #f9f9f9 0%,#c2c2c2 96%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#c2c2c2',GradientType=0 ); 
		border-radius: 0.5em 0.5em 0.5em 0.5em;
		padding: 2px 2px 2px 2px;
		text-align: center;
		place-items: center;
		align-content: center;
	}
	.thanhdieuhuong:hover{
		filter:			drop-shadow(0px 0px 1px white);
		cursor: 		hover;
		transform: scale(1.4);
	}
	#cesium_sidebar{
		color: black;
		font: 		9.5px sans-serif;
		position: absolute; 
		z-index: 5; 
		right: 5px;
		top: 20%;
		//bottom: 5px;
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
    background: #f9f9f9; 
    background: -moz-linear-gradient(top, #f9f9f9 0%, #c2c2c2 96%); 
    background: -webkit-linear-gradient(top, #f9f9f9 0%,#c2c2c2 96%); 
    background: linear-gradient(to bottom, #f9f9f9 0%,#c2c2c2 96%); 
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f9f9f9', endColorstr='#c2c2c2',GradientType=0 ); 
		border-radius: 1em 1em 1em 1em;
		padding: 2px 2px 2px 2px;
		-webkit-transition: right .5s;
		transition: right .5s;
	}
	#cesium_map{
		position: absolute;
		z-index: 5; 
		left: -2px;
		bottom:  115px;
		display: flex;
		//flex-direction: column;
		//flex-wrap: wrap;
		//background: rgba(50,50,50, 0.8);
		//backdrop-filter: blur(5px);
		//border-radius: 1.5em 1.5em 1.5em 1.5em;
		padding: 0px 0px 0px 0px;
	}
	/* Top right text */
	.hello_project-name {
		white-space: nowrap;
		overflow: hidden;
		//font-size:	200%;
		position: absolute;
		width: clamp(450px, 50%, 650px);
		left: 1100px;
		right: 10px;
		text-align: center;		
		top: 150px;
		display: flex;
		flex-direction: column;
	}
	.potree_toolbar_label{
		text-align: center;
		font-size: smaller;
		opacity: 0.9;
	}

	.potree_toolbar_separator{
		background: rgba(188,190,191, 1);
		padding: 0px;
		margin: 0px 10px;
		top: 40px;
		height: 50px;
		width: 3px;
	}
	.potree_toolbar_separator1{
		background: rgba(36,36,36, 1);
		padding: 0px;
		margin: 0px 10px;
		top: 0px;
		height: 40px;
		width: 3px;
	}
	.potree_toolbar_separator2{
		background: transparent;
		padding: 0px;
		margin: 0px 1px;
		top: 0px;
		height: 40px;
		width: 1px;
	}
	.potree_toolbar_separator3{
		background: transparent;
		padding: 0px;
		margin: 0px 1px;
		top: 0px;
		height: 40px;
		width: 10px;
	}
.checkbox-wrapper-8 .tgl {
  display: none;
}

.checkbox-wrapper-8 .tgl,
  .checkbox-wrapper-8 .tgl:after,
  .checkbox-wrapper-8 .tgl:before,
  .checkbox-wrapper-8 .tgl *,
  .checkbox-wrapper-8 .tgl *:after,
  .checkbox-wrapper-8 .tgl *:before,
  .checkbox-wrapper-8 .tgl + .tgl-btn {
  box-sizing: border-box;
}

.checkbox-wrapper-8 .tgl::-moz-selection,
  .checkbox-wrapper-8 .tgl:after::-moz-selection,
  .checkbox-wrapper-8 .tgl:before::-moz-selection,
  .checkbox-wrapper-8 .tgl *::-moz-selection,
  .checkbox-wrapper-8 .tgl *:after::-moz-selection,
  .checkbox-wrapper-8 .tgl *:before::-moz-selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::-moz-selection,
  .checkbox-wrapper-8 .tgl::selection,
  .checkbox-wrapper-8 .tgl:after::selection,
  .checkbox-wrapper-8 .tgl:before::selection,
  .checkbox-wrapper-8 .tgl *::selection,
  .checkbox-wrapper-8 .tgl *:after::selection,
  .checkbox-wrapper-8 .tgl *:before::selection,
  .checkbox-wrapper-8 .tgl + .tgl-btn::selection {
  background: none;
}

.checkbox-wrapper-8 .tgl + .tgl-btn {
  outline: 0;
  display: block;
  width: 4em;
  height: 2em;
  position: relative;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.checkbox-wrapper-8 .tgl + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl + .tgl-btn:before {
  position: relative;
  display: block;
  content: "";
  width: 50%;
  height: 100%;
}

.checkbox-wrapper-8 .tgl + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-8 .tgl + .tgl-btn:before {
  display: none;
}

.checkbox-wrapper-8 .tgl:checked + .tgl-btn:after {
  left: 50%;
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn {
  overflow: hidden;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  transition: all 0.2s ease;
  font-family: sans-serif;
  background: #888;
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after,
  .checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  display: inline-block;
  transition: all 0.2s ease;
  width: 100%;
  text-align: center;
  position: absolute;
  line-height: 2em;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.4);
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:after {
  left: 100%;
  content: attr(data-tg-on);
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:before {
  left: 0;
  content: attr(data-tg-off);
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active {
  background: #888;
}

.checkbox-wrapper-8 .tgl-skewed + .tgl-btn:active:before {
  left: -10%;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn {
  background: #289FA8;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:before {
  left: -100%;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:after {
  left: 0;
}

.checkbox-wrapper-8 .tgl-skewed:checked + .tgl-btn:active:after {
  left: 10%;
}
/* Minecraft switch made by: csozi | Website: english.csozi.hu*/

/* The switch - the box around the slider */
.switch {
  font-size: 17px;
  position: absolute;
  display: inline-block;
  left: -10px;
  bottom: 0px;
  width: 0px;
  height: 0px;
}

/* Hide default HTML checkbox */
.switch input {
  opacity: 1;
  width: 0;
  height: 0;
}

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: transparent;
  transition: .4s;
}

.off {
  position: absolute;
  content: "";
  height: 110px;
  width: 110px;
  background: transparent;
  transition: .4s;
  image-rendering: pixelated;
  opacity: 1;
}

.on {
  position: absolute;
  content: "";
  height: 110px;
  width: 110px;
  background: transparent;
  transition: .4s;
  image-rendering: pixelated;
  opacity: 0;
}
	.off:hover{
		filter:			drop-shadow(0px 0px 2px black);
		cursor: 		hover;
		transform: scale(1.2);
	}
	.on:hover{
		filter:			drop-shadow(0px 0px 2px black);
		cursor: 		hover;
		transform: scale(1.2);
	}

.switch input:checked + .slider {
  //background-color: #ccc;
}

.switch input:focus + .slider {
  box-shadow: 0 0 1px #ccc;
}

.switch input:checked ~ .off {
  transform: translateX(0em);
}

.switch input:checked ~ .on {
  transform: translateX(0em);
  opacity: 1;
}
.body {
  --radius: 8px;
  --border: 0px;
  --height: 30px;
  --speed: 0.25s;
  display: grid;
  place-items: center;
  align-content: center;
  font-family: "SF Pro Text", "SF Pro Icons", "AOS Icons", "Helvetica Neue",
    Helvetica, Arial, sans-serif, system-ui;
}

.tabs {
  height: var(--height);
  display: grid;
  grid-auto-flow: column;
  background: #484848;
  border-radius: var(--radius);
  grid-auto-columns: 1fr;
  position: relative;
  border: var(--border) solid #484848;
}

.tabs {
  --ease: linear(
    0,
    0.1641 3.52%,
    0.311 7.18%,
    0.4413 10.99%,
    0.5553 14.96%,
    0.6539 19.12%,
    0.738 23.5%,
    0.8086 28.15%,
    0.8662 33.12%,
    0.9078 37.92%,
    0.9405 43.12%,
    0.965 48.84%,
    0.9821 55.28%,
    0.992 61.97%,
    0.9976 70.09%,
    1
  );
}

.tabs > .input,
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

.tabs:has(:checked:nth-of-type(1)) {
  --active: 0;
}
.tabs:has(:checked:nth-of-type(2)) {
  --active: 1;
}
.tabs:has(:checked:nth-of-type(3)) {
  --active: 2;
}
.tabs:has(:checked:nth-of-type(4)) {
  --active: 3;
}

.tabs :checked + .label {
  --highlight: 1;
}

.tabs:has(.input:nth-of-type(2)) {
  --count: 2;
}
.tabs:has(.input:nth-of-type(3)) {
  --count: 3;
}
.tabs:has(.input:nth-of-type(4)) {
  --count: 4;
}

.tabs .label {
  padding: 0 clamp(5px, 5px + 5px, 10px);
  //font-weight:bold;
  cursor: pointer;
  text-align: center;
  height: 100%;
  display: grid;
  border-radius: calc(var(--radius) - var(--border));
  place-items: center;
  color: white;
  transition: background, color;
  transition-duration: 0.25s;
  transition-timing-function: var(--ease, ease);
}

.input:not(:checked) + .label:hover {
  --highlight: 0.35;
  background: hsl(0 0% 20%);
}

.tabs::after {
  pointer-events: none;
  content: "";
  width: calc(100% / var(--count));
  height: 100%;
  background: hsl(0 0% 100%);
  position: absolute;
  border-radius: calc(var(--radius) - var(--border));
  mix-blend-mode: difference;
  translate: calc(var(--active, 0) * 100%) 0;
  transition: translate, outline-color;
  transition-duration: var(--speed);
  transition-timing-function: var(--ease, ease);
  outline: 2px solid transparent;
}

.tabs:has(:focus-visible)::after {
  outline-color: red;
}
#left {    
 text-align: left;
 float: left; 
 }  
 #center {    
 text-align: center;  
 float: center; 
 }  
 #right{    
 text-align: right;
 float: right;   
 }
.radio-input input {
  display: none;
}

.radio-input {
  position: relative;
  display: flex;
  align-items: center;
  border-radius: 10px;
  background: transparent;
  backdrop-filter: blur(10px);
  width: var(--container_width);
  overflow: hidden;
  border: 0px solid rgba(53, 52, 52, 0.226);
}

.radio-input label {
  width: 100%;
  padding: 10px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1;
  letter-spacing: -1px;
  font-size: 14px;
}

.radio-input label:has(input:checked) {
  color: #fff;
  background-color: #289FA8;
  display: inline-block;
}
div.cesium-viewer-timelineContainer  {
	left:0px;
	width:100%;
	bottom:-50px;
	-webkit-transition: bottom .2s, visibility .3s, opacity .3s;
	transition: bottom .2s, visibility .3s, opacity .3s;
	visibility: visible;
	opacity: 1;
  
}
.top-row {position: absolute; top: 0px; left: 0; right: 0; height: 40px; background-color: white }
.top-row iframe {display: block; width: 100%; height: 100%; border: none;}