:root {
	--UI-text-color: black;
	--UI-background-color: #d3d3d3;
	--UI-border-color: #505050;
	--UI-dropdown-text-color: black;
	--UI-dropdown-background-color: #808080; 
	--UI-extension-background-color: rgba(0,0,0,0.5); 
	--UI-extension-text-color: white; 
	--UI-character-background-color:  #333333;
	--logo-color1: #ff4f75;
	--logo-color2: #3d0066;
	--logo-color3: #a3314a;
}

#UIcontainer{
	z-index:2; 
	display:inline-block; 
	border-color:var(--UI-border-color);
	border-style:solid;
	border-width: 2px 2px 2px 2px;
	font-family: Sans-Serif;
	-webkit-transition: width 0.25s, height 0.25s, clip-path 0.25s;
	transition: width 0.25s, height 0.25s, clip-path 0.25s; 
	user-select: none;
	visibility: hidden;
}
.UIStateContainer{
	-webkit-transition: width 0.25s, height 0.25s, clip-path 0.25s;
	transition: width 0.25s, height 0.25s, clip-path 0.25s; 
	overflow: hidden;
}

#colormap_container{
	-webkit-transition: clip-path 0.25s;
	transition: clip-path 0.25s; 
}
#colormap_outer_container{
	-webkit-transition: margin 0.25s;
	transition: margin 0.25s; 	
}
.UIdiv{
	color:var(--UI-text-color);
	background-color:var(--UI-background-color);
	opacity: 0.7;
	padding: 2px;
}
.UImover{
	-webkit-transition: transform 0.25s, clip-path 0.25s;
	transition: transform 0.25s, clip-path 0.25s; 
}
#UItopbar{
	height: 30px;
	transition: opacity: 0.15s;
	cursor: grab;
	position: absolute;
	top: 0px;
}
#UItopbar:hover {
	opacity: 1;
}
.fullOpacity{
	opacity: 1;
}
.bar1, .bar2, .bar3 {
	width: 20px;
	height: 3px;
	background-color: var(--UI-character-background-color);
	margin: 4px 0;
	transition: 0.4s;
}

.change .bar1 {
	-webkit-transform: rotate(-45deg) translate(-6px, 4px) ;
	transform: rotate(-45deg) translate(-6px, 4px) ;
}

.change .bar2 {opacity: 0;}

.change .bar3 {
	-webkit-transform: rotate(45deg) translate(-6px, -4px) ;
	transform: rotate(45deg) translate(-6px, -4px) ;
}

.button-div {
	z-index:2;
	height:30px;
	width:290px;
	padding: 0px;
	margin:5px;
	margin-bottom:0px;
	cursor: pointer;
	font-size:15px;
	text-align: left;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	border: none;
	opacity: 0.7;
	background-color: var(--logo-color1);
	transition: opacity: 0.15s;
}
.button-div:hover {
	opacity: 1;
}


.button {
	z-index:2;
	height:30px;
	width:290px;
	padding: 5px;
	margin:5px;
	margin-bottom:0px;
	cursor: pointer;
	font-size:15px;
	text-align: left;
	text-decoration: none;
	outline: none;
	overflow: hidden;
	border: none;
	border-radius: 0px;
	opacity: 0.7;
	background-color: var(--logo-color1);
	transition: opacity: 0.15s;

}
.centerButton{
	margin-left:0px;
	width:88px; 
	height:24px; 
	padding:2px; 
	border:1px solid black;
}
.button:hover {
	opacity: 1;
}
.button span {
	cursor: pointer;
	display: inline-block;
	position: relative;
	transition: 0.15s;
}

/*.button span:after {
	content: '\00bb';
	position: absolute;
	opacity: 0;
	top: 0;
	right: -20px;
	transition: 0.15s;
}
*/
.button:active span {
	padding-left: 10px;
}

.button:active span:after {
	opacity: 1;
	right: -10px;
}


/* particle UI */
.particleDiv {
	position: relative;
	z-index:2;
	background-color:var(--UI-background-color);
	color: var(--UI-text-color);
	width:280px;
	padding:5px;
	margin:2px 0px 0px 2px;
	height:22px;
	opacity: 0.8;
	-webkit-transition: width 0.25s, opacity 0.15s, margin 0.25s;
	transition: width 0.25s, opacity .15s, margin 0.25s;
}
.particleDiv:hover {
	opacity: 1;
}
.pLabelDiv {
	display: inline-block;
	text-align: left;
	vertical-align:top;
	line-height: normal;
	width:50px;
	padding:2px;
}
.pLabelDivCHECK {
	display: inline-block;
	text-align: left;
	vertical-align:top;
	line-height: normal;
	padding:2px;
}
.pTextInput{
	display: inline-block;
	text-align: left;
	vertical-align:top;
	line-height: normal;
	width:30px;
}


/* onoff slider */
.switch {
	position: relative;
	display: inline-block;
	width: 30px;
	height: 25px;
}

.switch input {display:none;}

.slideroo {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding:0;
	margin:0;
	background-color: #ffffff;
	transition: transform .2s;
}

.slideroo:before {
	position: absolute;
	content: "";
	height: 17px;
	width: 12px;
	left: 4px;
	bottom: 4px;
	background-color: var(--UI-background-color);
	transition: transform .2s;
}

input:checked + .slideroo {
	background-color: #000000;
}

input:focus + .slideroo {
	box-shadow: 0 0 1px #000000;
}

input:checked + .slideroo:before {
	-webkit-transform: translateX(8px);
	-ms-transform: translateX(8px);
	transform: translateX(8px);
}

/* Rounded sliders */
.slideroo.round {
	border-radius: 34px;
}

.slideroo.round:before {
	border-radius: 50%;
}

/* color picker = spectrum */
.sp-replacer{
	border:0px;
	z-index:2;
	position:absolute;
	left:240px;
	top: 4px;
	margin:0;
	margin-left: 3px;
	padding:0;
	height:25px;
	width:27px;
	background:var(--UI-background-color);
}
.sp-replacer:hover, .sp-replacer.sp-active  {
	border:0;
}
.sp-picker-container{
	border:0;
}
.sp-preview{
	border: 0;
	height: 25px;
	width: 25px;
}
/* dropdown menu */
.dropbtn {
	display:block;
	position:relative;
	left: 260px;
	top: -23px;
	/*height: 30px; */
	background-color: transparent;
	color: var(--UI-text-color);
	padding: 2px;
	padding-left:5px;
	font-size: 16px;
	cursor: pointer;
	border:0;
	color:white;
    transition: transform 0.25s;

}
.dropbtn:hover{
	color: var(--UI-text-color);
}
.dropbtn-open{
	transform: translate(3px,-1px)rotate(180deg);
}
.dropdown {
	display: inline-block;
}
.dropdown-content {
	/*display: none;*/
	position: relative;
	background-color:var(--UI-dropdown-background-color);
	color:var(--UI-dropdown-text-color);
	padding:0;
	overflow: hidden;
	z-index: 2;
	left:0;
	/*border-radius: 0px 0px 6px 6px;*/
	-webkit-transition: margin 0.25s, clip-path 0.25s, height 0.25s, transform 0.25s;
	transition: margin 0.25s, clip-path 0.25s, height 0.25s, transform 0.25s;
}

.dropdown-content div {
	color: black;
	text-decoration: none;
	display: block;
}
/*.show {display:block;}*/

.FilterClass{
	position:absolute;
	margin-top:5px;
	left:55px;
	width:180px;
	height:20px;
}
.FilterClassLabel{
	position:absolute; 
	left:-100px;
	top:0px;
}
.FilterMinTClass{
	position:absolute;
	top:0px;
	left:-52px;
	width:40px;
	height:25px;
	padding:2px;
	margin-top:-1px;
	color: var(--UI-text-color);
}
.FilterMaxTClass{
	position:absolute;
	top:0px;
	left:182px;
	width:40px;
	height:25px;
	padding:2px;
	margin-top:-1px;
	color: var(--UI-text-color);
}

.CMapClass{
	position:absolute;
	margin-top:5px;
	left:55px;
	width:180px;
	height:20px;
}
.CMapClassLabel{
	position:absolute; 
	left:-100px;
	top:0px;
}
.CMapMinTClass{
	position:absolute;
	top:0px;
	left:-52px;
	width:40px;
	height:22px;
	padding:2px;
	color:black;
}
.CMapMaxTClass{
	position:absolute;
	top:2px;
	left:182px;
	width:40px;
	height:22px;
	padding:2px;
}

.NSliderClass{
	position:absolute;
	left:55px;
	width:180px;
	height:20px;
	margin-top: -25px;
}
.NMaxTClass{
	position:absolute;
	margin-top:0px;
	left:237px;
	width:40px;
	height:25px;
	padding:2px;
	margin-top:-2px;
	color: var(--UI-text-color);
}

.PSliderClass{
	position:absolute;
	left:100px;
	top: 4px;
	width:95px;
	height:25px;
}
.PMaxTClass{
	position:absolute;
	left:210px;
	top: 4px;
	width:40px;
	height:25px;
	padding:2px;
	color: var(--UI-text-color);
}

.noUi-base{
	top:0px;
	border-radius:0px;
}
.noUi-target{
	cursor: pointer;
	border-radius: 0px;
}
.noUi-connect{
	background:black;
	border-radius:0px;/* 20px 20px 0px;*/
}
.noUi-handle{
	cursor: pointer;
	background:black;
	box-shadow:none;
	border-radius:0px 6px 6px 0px;
	border:0px;
}


.noUi-horizontal {
	height:25px;
	border:0px;
	border-radius:6px;/*0px 6px 6px 0px;*/
}
.noUi-horizontal .noUi-handle {
	width:10px;
	left:0px;
	height:25px;
	top:0px;
}
.noUi-handle:before,
.noUi-handle:after {
	height: 0px;
	width: 0px;
}


.NdDiv{
	padding:5px; 
	height:20px; 
	display:inline-block; 
	width:280px;
  /*background-color:#a3a3a3;*/
}

.select{
	margin-left:10px;
}

select{
	font:inherit;
	font-size:12px;
	padding:2px;
}

.selectVelType{
	position:absolute;
	left:185px;
	width:100px;
}

.selectCMap{
	position:absolute;
}

.selectFilter{
	position:absolute;
	left:55px;
	width:230px;
}

.extension{
	background-color: var(--UI-extension-background-color);
}

.noTransition{
	-webkit-transition: all 0s;
	transition: all 0s; 
}

/*for the scrollbar */
/* width */
::-webkit-scrollbar {
	width: 3px;
}

/* Track */
::-webkit-scrollbar-track {
	background: var(--UI-text-color); 
}
 
/* Handle */
::-webkit-scrollbar-thumb {
	background: var(--logo-color3); 
	border-radius: 3px;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
	background: var(--logo-color3); 
	cursor:pointer;
}