:root {
  --main-bg: #222233;
  --secondary-bg: #31314a;
  --canvas-bg: #111116;
  --active-bg: #6445b5;
  /*--active-bg: #393444;*/
  --primary-bg:rgb(114, 114, 123);
  --default-bg: #0e0e11;
  --special-bg: #20d9c9;
  --active-bg-text: #000;
  --active-text:  #938fff; 

  --primary-text: rgba(255,255,255,0.8);
  --secondary-text: rgba(235, 237, 255, 0.57);
  --border:rgba(200,200,255,0.13);

  
  --warning-text: rgb(255, 79, 128);

  --warning-bg: rgb(200, 50, 92);


  --x-input: rgb(53, 138, 102); 
  --y-input: rgb(151, 99, 174); 
  --z-input: rgb(115, 94, 44); 

    --rounded: 6px;
  --pill: 56px;  
  --range-height: 12px;
  --font-size: 12px;
  --font-size-sm: 11px;
  
  
} 

*{
	font-family: "Inter", "Segoe UI", Roboto, sans-serif;
}

html,
body{
	background-color: var(--canvas-bg);
	color: var(--primary-text);
	font-size: var(--font-size);
	scrollbar-width: thin;          /* "auto" or "thin" */
    scrollbar-color:var(--secondary-bg) var(--main-bg) ;   /* scroll thumb and track */ 
  }

  /* scrollbar */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 10px;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 10px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.3);
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.5);
}

::-webkit-scrollbar-thumb:window-inactive {
  background: rgba(255, 255, 255, 0.3);
}





progress {
  height: 6px;
  background-color: #000;
  border:0;
  border-radius:var(--rounded);
}
progress::-webkit-progress-bar {
background-color: var(--active-bg);
}

progress::-moz-progress-bar {
background-color: var(--active-bg);
}

progress::-webkit-progress-value {
  background-color: blue;
  color: #fff;
  border-radius:var(--rounded);
}

.sceneDataSize{
	color:rgba(240,235,255,0.7);
	line-height:24px;
}
.sceneDataSize b{
	
	color:rgba(255,255,255,1);
}
.circle-bg {
  stroke: var(--canvas-bg);
}

#roundedProgress { 
  stroke: var(--active-bg);
}
 
#scenePercentage {
	fill:rgba(240,235,255,0.7);
  font-weight:bold;
}


  
  a:hover{
	 color: var(--active-text);
  }
 a:hover img{
	 filter: invert(1) brightness(60%)  sepia(100%) hue-rotate(170deg) ;
 }
 
 
.warningText{
	 color: var(--warning-text);
 }



.eye:after {
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffffff' viewBox='0 0 16 16'><path d='M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z'/><path d='M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829'/><path d='M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z'/></svg>");
		background-repeat:no-repeat;
		background-size:100% auto;
		background-position:0 50%;
		width: 13px !important;
		height:13px !important;
		border: none !important;
		-webkit-transform: rotate(0) !important;
		-ms-transform: rotate(0) !important;
		transform: rotate(0) !important;
		top: 4px !important;
		left: 4px !important; 
}



.eye:checked:after {
		 background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='16' fill='%23ffffff' viewBox='0 0 16 16'><path d='M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z'/><path d='M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0'/></svg>");	
}

.eye:checked:before {
         background: none !important;
		 
}



.eye:checked:hover:before {
           background-color: var(--canvas-bg) !important;
		 outline: 1px solid rgba(255,255,255,0.1);
		 
}
 


 
 
 input[type=radio],
input[type=checkbox] {
         position: relative;
	       cursor: pointer;
		   -moz-appearance:initial;
		   -webkit-appearance: initial;
		   width:22px;
		   height:22px;
		   
  flex-shrink:0;
		   padding:0;
		   display:inline-block;
		 	border-radius: 4px;
			vertical-align:middle;
			margin:0;
    }
	
	
 input[type=radio]:before,
    input[type=checkbox]:before {
         content: "";
         display: block;
         position: absolute;
         width: 22px;
         height: 22px;
         top: 0;
         left: 0;
		 z-index:1;
		 	border-radius: 4px;
}




    	input[type=radio]:after ,
	input[type=checkbox]:after {
         content: "";
         display: block;
         width: 4px;
         height: 9px;
         border: solid rgba(255,255,255,0.4);
         border-width: 0 1.2px 1.2px 0;
         -webkit-transform: rotate(45deg);
         -ms-transform: rotate(45deg);
         transform: rotate(45deg);
         position: absolute;
		 z-index:2;
         top: 5px; 
         left: 8px;
}



input[type=radio]:hover:before,
input[type=checkbox]:hover:before{
         background-color: var(--canvas-bg);
		 outline: 1px solid rgba(255,255,255,0.1);
}

input[type=radio]:checked:before,
input[type=checkbox]:checked:before {
        /* background-color: var(--active-bg); */
		 
}

input[type=radio]:checked:after,
input[type=checkbox]:checked:after {
	
         border: solid #fff;
         border-width: 0 1.2px 1.2px 0;
}

input[type=radio]:checked:hover:before,
input[type=checkbox]:checked:hover:before {
     	filter: brightness(1.3);
		 
}



/* Scrollbar */

::-webkit-scrollbar {
  width: 8px;
  padding:4px;
		border-radius: var(--pill);
}


::-webkit-scrollbar-track {
background-color:var(--main-bg);
		 	border-radius: var(--pill);
			margin:4px;
}

 
::-webkit-scrollbar-thumb {
background-color:var(--primary-bg);
		 	border-radius: var(--pill);
}


::-webkit-scrollbar-thumb:hover {
background-color:var(--active-bg); 
}


.staticPanel{
	/*border-radius:var(--rounded);*/
	background-color:var(--main-bg);
	/* border: 1px solid var(--border);*/
}

.staticPanelTop{
	text-transform:uppercase;	
	 font-size:var(--font-size-sm);
	 font-weight:bold;
}

.staticPanelTop span{
	color:rgba(255,255,255,0.4);
}



.activeIcon{
	filter: invert(1) brightness(1) !important;
}


  .Logo {
  font-size: 15px;
  font-weight:bold
}


   .floatpanelclose{
	border-radius:12px;
}

img.icon{
	filter: invert(1);
}
 
 hr{
	border-top:1px solid var(--border);
	border-bottom:none;
	border-left:none;
	border-right:none;
	width:100%;
 }
  
  #TopEdit{
	background-color: var(--main-bg);
	/*border-radius: var(--rounded);*/
}

#centerzone{
	border-radius: var(--rounded);}

  
  
  
compo-3d{
	background-color: var(--canvas-bg);
}

#modelingContainer {
	/*background-color: var(--main-bg);*/
	background-color: var(--secondary-bg);
	
	background-color: var(--canvas-bg);
}

#mainModelcontent{
	background-color: var(--canvas-bg);
	border-radius: var(--rounded);
}

#envsContainer{
	border-radius: var(--rounded);
	/*background-color: var(--canvas-bg);*/
}

#envsContainer img{
	border-radius: var(--pill);
	outline:1px solid rgba(255,255,255,0.4);
}


#envsContainer img:hover, 
#envsContainer .active{
	outline:3px solid var(--active-text);
}


#viewportSettings img{
	border-radius: var(--rounded);
	background-color: var(--main-bg);
	padding:2px;
}

#viewportSettings img:hover{

	filter: brightness(1.3);
}

#viewportSettings input[type=checkbox]:checked + img{
	/*outline:1px solid var(--active-bg);*/
	background-color:var(--secondary-bg);
}

  

#historyZone{
  background-color:var(--main-bg);
      border-radius:  var(--rounded);
	}
	
#historyZone .pannelTitle{
	color:var(--primary-text);
	text-transform:uppercase;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: var(--font-size-sm);
}

#historyZone .pannelTitle img{
		  filter: invert(1);
}


#leftzonegrip,
#rightzonegrip{
	background-color: var(--main-bg);
}

#leftzonegrip:hover,
#rightzonegrip:hover{
background-color:  var(--active-bg);}


  #leftzonegrip{
 
border-top-left-radius: 0;
border-bottom-left-radius: 0;
  }  
  
  #rightzonegrip{
border-top-right-radius: 0;
border-bottom-right-radius: 0;
  } 

#historyContainer li{
    border-radius:  var(--rounded);
	
}
	
	#historyContainer li:hover{
	    background-color:  var(--secondary-bg);
	} 
	
#bottomzone{
	color:rgba(255,255,255,0.38);
  background-color: var(--main-bg);
}

#bottomzone strong{
	color: var(--active-text);
}

#pos0,
#rot0,
#sc0,
#sz0{
	/*background-color: var(--x-input);
		outline: 1px solid rgba(255,0,0,0.2);*/
		color: var(--x-input);

}



#pos1,
#rot1,
#sc1,
#sz1{
	/*background-color: var(--y-input);
	outline: 1px solid rgba(0,255,0,0.1);*/
			color: var(--y-input);
}
 
#pos2,
#rot2,
#sc2,
#sz2{
	/*background-color: var(--z-input);
	outline: 1px solid rgba(0,0,255,0.1);*/
			color: var(--z-input);
}



#objtree li>span {
   border-radius:var(--rounded);
	background-color: var(--main-bg);
} 
 


 #objtree .clone.active>span,
 #objtree .active>span {
	outline:1px solid var(--active-bg);
	background-color:rgba(106, 90, 240, 0.2);
}

#objtree li>span:hover{
	/*filter: brightness(1.3);*/
}
#objtree .clone.active>span:hover,
#objtree .active>span:hover {
	filter: brightness(1.3);
}

 #objtree .clone>span{
	background-color: rgb(20,40,30);
 }
 
 
#objtree .clone>span:hover{
	background-color: rgb(20,40,30);
	filter: brightness(1.3);
	
}
 


#objtree li>span>b{
	color: #fff;
}

#objtree li>span>b:hover {
	color: var(--active-text);
}

#objtree li>span>.activecolapse{
	color: #00b5a5;
}

#objtree li>span>span{
	opacity:0.8;
}


#objtree li>span>del{
		border-radius: 4px !important;
}
#objtree li>span>del:hover {
	outline: 1px solid rgba(255,255,255,0.1);
	background-color:var(--canvas-bg);
}


#objtree .dragElem:after {
  outline-color:rgba(255, 255, 255, .3);
   border-radius:var(--rounded);
}

button, 
.button { 
	background: none;
	border: none;
	text-decoration: none;
	border-radius: var(--rounded);
	color:var(--primary-text);
	opacity:1;
	/*text-transform:uppercase;
	
	font-weight: bold;
	letter-spacing: 1px;
	*/
	font-size: var(--font-size-sm);
}

 
.button-sm{
	border-radius: var(--rounded);
}
/*
.createBar{
	border: 1px solid var(--border);
border-radius:var(--rounded);
}
*/
.createBar span{
	font-size:var(--font-size-sm);
	opacity:0.8;
}
	/*
.createBar button:hover{

	 background-color: var(--secondary-bg) !important;
	
}

.createBar button:hover img{
filter: brightness(70%) contrast(200%);
	filter: sepia(100%) hue-rotate(200deg) brightness(70%) contrast(140%);
	
}*/ 

#tophelpbtn{
	opacity:0.8;
}

#uvmenu button,
#uvmenu .button{
	
}
#tab1 button,
#tab2 button,
#tab3 button,
#tab4 button{
	/*border:1px solid rgba(255,255,255,.1);
	outline:8px solid var(--canvas-bg);*/
	background-color: var(--main-bg);
}

#uvmenu button img,
#uvmenu .button img,
#tab1 button img,
#tab2 button img,
#tab3 button img,
#tab4 button img{
	filter: invert(1);
} 

#uvmenu button:hover,
#uvmenu .button:hover{
	
}
#tab1 button:hover,
#tab2 button:hover,
#tab3 button:hover,
#tab4 button:hover{
	filter: brightness(1.3);
} 

/*
#uvmenu .button:hover img,
#tab1 button:hover img,
#tab2 button:hover img,
#tab3 button:hover img,
#tab4 button:hover img{
	filter: brightness(1.4) invert(0);

}
*/
 
.usericon{
	border-radius:var(--pill);
	background-color:var(--canvas-bg);
}
.usericon:hover{
	outline: 3px solid var(--active-bg);
}

.usericon:before{
	content:"";
	display:block;
	width:6px;
	height:6px;
	background-color: #0fd;
	border-radius:var(--pill);
	position:absolute;
	z-index: 2;
	bottom:8px;
	right:8px;
}

.uvmenusection{
	border-radius:var(--rounded);
	background-color:var(--main-bg);
	display:inline-flex;
	align-items:center;
	padding:0px 4px 0 8px;
	margin:0 2px;
}

#unwraprange{
	margin-left:4px;
}


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

#navZone .importbtn span{
	background-color:#8B5CF6;
background: linear-gradient(222deg, rgba(139, 92, 246, 1) 0%, rgba(238, 92, 246, 1) 100%);
	display:block;
	text-align:center;
	padding:0 6px;
	line-height:14px;
	height:16px;
	border-radius:12px;
	margin-top:4px;}
	
}

#navZone #savescenebtn span{
	display:block;
} 


#navZone #savescenebtn span:after{
	content:" GLTF";
	color:#C278FF;
	font-weight:bold;
	font-size:9px;
}

#navZone button,
#navZone .button{
	color:rgba(255,255,255,0.7);
}

#navZone button img,
#navZone .button img{
	filter:invert(1) brightness(0.7);
}

#navZone button:hover,
#navZone .button:hover{
	background:none;
	color:rgba(255,255,255,1);
	
}

#navZone button:hover img,
#navZone .button:hover img,
#navZone .activeBg img{
	/*background-color:var(--secondary-bg); */
	background:none;
	filter:invert(1) brightness(1);
}


#navZone button.activeBg,
#navZone .button.activeBg{
	outline: 1px solid var(--active-bg);
	background-color:rgba(106, 90, 240, 0.2);
	color:#fff;
}


#navZone #cameraPButton,
#navZone #cameraFButton,
#navZone #cameraSButton,
#navZone #cameraTButton{
	border:none;
  border-radius:  var(--rounded);
	/*outline:1px solid rgba(255,255,255,0.1);
	background-color:rgba(0,0,0,0.2);*/
	background: none;
	
}

#navZone #cameraPButton.activeBg,
#navZone #cameraFButton.activeBg,
#navZone #cameraSButton.activeBg,
#navZone #cameraTButton.activeBg{
	//outline:1px solid rgba(255,255,255,0.2);
	 background-color: var(--canvas-bg);
}


#navZone #cameraPButton img,
#navZone #cameraFButton img,
#navZone #cameraSButton img,
#navZone #cameraTButton img{
	filter:invert(0);
	}
	
	/*
	#exportbtn{
		background-color:#eee;
		color: #000;

		font-size:12px;
	}
*/
/*
#publishBtn,
.importbtn,
#exportbtn, 
#savescenebtn,
#savescenebtn2,
#uvpanelbtn,
#exportButton, 
#addMaterial{
    outline:1px solid var(--border); 
}
*/



#savescenebtn2,
#uvpanelbtn{ 
background-color: var(--secondary-bg);
	}




.assembliesContainer button:hover{

color:var(--active-text);
}


.iconactivepath{
fill: var(--active-text);
}


/*

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none;

}
*/


input[type=text],
select{
    border-radius:var(--rounded);
    background-color:var(--canvas-bg);
	color: var(--secondary-text);
	font-size: var(--font-size);
	border:none;
}


input[type=number]{
    border-radius:var(--rounded);
	color: #000;
	border:none;
	filter:invert(1);
}



textarea{
    border: 0;
    background-color: var(--secondary-bg);
    border-radius:var(--rounded);
	color: var(--secondary-text);
	font-size: var(--font-size);
}


input[type=text]:focus,
select:focus,
textarea:focus{
	color: var(--primary-text);
	outline:1px solid var(--active-bg);
}


input[type=number]:focus{
	outline:1px solid #959838;
	} 



.materialBox{
	/*border-bottom: 1px solid rgba(255,255,255, 0.07);*/
	border-radius:var(--rounded);
	
	
}

.materialBox button{
		border-radius: 4px !important;
	border:3px solid transparent;
}


.materialBox button:hover{
	border:3px solid var(--canvas-bg);
	outline: 1px solid rgba(255,255,255,0.1);
	background-color:#000;
}

.materialBox:hover,
.materialBox.active{
	outline:1px solid var(--active-bg);
	background-color:rgba(106, 90, 240, 0.2);

}

.materialBoxName{
	opacity:0.8;
}
.materialBox:hover{
	filter: brightness(1.3);
}

#matPreview{
box-shadow: 0 4px 14px rgba(0,0,0,0.9);
}


#textureVisibility,
#roughtextureVisibility,
#normaltextureVisibility,
#downloadtexture,
#downloadroughtexture,
#downloadnormaltexture,
#cleartexture,
#clearroughtexture,
#clearnormaltexture{
border-radius: 4px;
}

#textureVisibility:hover,
#roughtextureVisibility:hover,
#normaltextureVisibility:hover,
#downloadtexture:hover,
#downloadroughtexture:hover,
#downloadnormaltexture:hover,
#cleartexture:hover,
#clearroughtexture:hover,
#clearnormaltexture:hover{
color: #fff;

           background-color: var(--canvas-bg);
		   
		 outline: 1px solid rgba(255,255,255,0.1);
		 
}

#textureVisibility:hover img,
#roughtextureVisibility:hover img,
#normaltextureVisibility:hover img,
#downloadtexture:hover img,
#downloadroughtexture:hover img,
#downloadnormaltexture:hover img,
#cleartexture:hover img,
#clearroughtexture:hover img,
#clearnormaltexture:hover img{
 filter: invert(1);
}


label{
	opacity:0.8;
}
.materialPropTop>div:nth-child(1){
background: #1d1d30;
background: linear-gradient(0deg,rgba(29, 29, 48, 1) 0%, rgba(15, 15, 28, 1) 100%);
outline: 1px solid var(--border);
border-radius: var(--rounded);
}
 
.texturelabel{
    border-radius:var(--rounded);
	opacity:1;
	}

.materialBoxPreview{
box-shadow: 10px 10px 48px rgba(0,0,15,1);
}


.radiogroup{
    border-radius:var(--rounded);
	/*overflow:hidden;
		outline:1px solid var(--active-bg);
	background-color:rgba(106, 90, 240, 0.2);
	border: 1px solid var(--border);*/
	background-color:var(--canvas-bg);
}

.radiogroup input[type=radio]{
display:none;
}

.radiogroup label{
    border-radius:var(--rounded);
	cursor:pointer;
	opacity:1;
	background-color:  var(--main-bg);
	background-color:var(--canvas-bg);
	border:1px solid rgba(0,0,0,0);
	margin:2px;
}

.radiogroup label img{
 filter: invert(1);
}


.radiogroup input[type=radio]:checked + label{
	background-color:  rgba(106, 90, 240, 0.2);
	border:1px solid var(--active-bg);
}

.radiogroup label:hover{
	background-color:  rgba(106, 90, 240, 0.2);
	filter: brightness(1.3);
	border:1px solid rgba(0,0,0,0);
}

.radiogroup input[type=radio]:checked + label:hover{
	
	filter: brightness(1);
}


/*
.materialBoxPreview:hover,
.materialBox.active .materialBoxPreview{
	outline:3px solid var(--active-bg);
}
*/




.ColorPicker{
	margin-top: 6px !important;
	height:20px !important;
	width:20px !important;
	margin-left: 2px !important;

	border: none !important;
	border-radius: calc(var(--rounded) - 1px); 
}
 

.geomtexlabel{
    border-radius:var(--rounded);
}

.geomtexlabel:hover{
	outline:3px solid var(--active-bg);
}

.border,
.outline{
	outline:1px solid var(--border);
}



/*
button:disabled,
button:disabled:hover,
.button:disabled,
.button:disabled:hover {
    color: rgba(255, 255, 255, .3);
}


.activeBg:disabled,
.activeBg:disabled:hover,
.tabsDisabled>.activeBg,
.tabsDisabled>.activeBg:hover {
    background-color: #2d2d3b !important;
   color: rgba(255, 255, 255, .4) !important;
}
*/

.disabled,
button:disabled,
.tabsDisabled button,
.tabsDisabled input,
.tabsDisabled label,
.tabsDisabled #tab1 button,
.tabsDisabled #tab2 button,
.tabsDisabled #tab3 button,
.tabsDisabled #tab4 button{
     opacity:0.5;
}


#gInteractions.disabled{
     opacity:1;
	
}

#gInteractions.disabled button,
#gInteractions.disabled .button{
     opacity:0.5;
}

#gInteractions.disabled input{
     opacity:0.5;
}

#gInteractions .flexrow img{
	opacity:0.4;
}

#gInteractions #gInteractionsBar button img{
	filter:invert(1);
	opacity:1;
}


.tabsDisabled #uvpanelbtn{
  cursor: pointer;
  pointer-events: auto;
     opacity:1;
	
}


.activeBg{
    background-color:  var(--active-bg);
	color: var(--active-bg-text);
}

.activeText,
.activeText:hover {
    color: var(--active-text);
}



.activeBg:hover{
	filter: brightness(1.3);
}

.secondaryBg {
    background-color:  var(--secondary-bg);
}

.specialBg {
    background-color: var(--special-bg) !important;
	color:#000;
}

.specialBg:hover{

    background-color: var(--special-bg) !important;
	filter: brightness(1.3);
}


#TopMenu{
   /* border-bottom:2px solid var(--border); */
  background-color: var(--main-bg);
}

#TopMenu .buttonContainer button:focus,
#TopMenu .buttonContainer button:focus:hover {
    background-color:  var(--active-bg) ;		
} 



#TopMenu input[type=checkbox]{
	margin:-2px 4px auto 0;
}


#MainMenu,
.subMenu { 
	padding:12px 8px;
background-color:#1b1b26;
border-radius:  var(--rounded);

box-shadow: 2px 2px 10px var(--shadow);

}

.subMenu {top:-12px;}

.subMenu>button,
.subMenu>.button,
.subMenu>label {
	text-transform: none;
	letter-spacing:0;
	font-size: var(--font-size);
	border-radius:   var(--rounded);
	opacity: 1;
	cursor: pointer;
}


#menuhelpbtn{
	outline:1px solid var(--border);
}


button:hover.secondaryBg,
.button:hover.secondaryBg,
.subMenu>label:hover,
button:hover,
.button:hover{
	    background-color: var(--secondary-bg);
			filter: brightness(1.3);
			opacity:1 !important;
	/*color: #000;*/ 
}

#TopMenu #TopEditCenter{
	/*background-color: var(--canvas-bg);*/
	border-radius:calc( var(--rounded) + 2px); 
}


#TopMenu #TopEditCenter>button{
	/*background-color: var(--canvas-bg);*/
	
	background:none;
	text-transform: uppercase;
	font-weight:bold;
	letter-spacing:1px;
	position:relative;
	color:#fff;
}

#TopMenu #TopEditCenter>button>b{
	font-weight:bold;
	opacity: 0.5; 
}
#TopMenu #TopEditCenter>button.activeBg:before,
#TopMenu #TopEditCenter>button:hover:before{
	content:"";
width:4px;
height:4px;
margin-right:8px;
margin-left:-12px;
border-radius:8px;
}
#TopMenu #TopEditCenter>button.activeBg,
#TopMenu #TopEditCenter>button:hover{
		background-color: var(--canvas-bg);

}

/*
#TopMenu #TopEditCenter #editverticesbtn.activeBg{
	border-radius:0;
}

#TopMenu #TopEditCenter #editmeshbtn{
	border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
}

#TopMenu #TopEditCenter #editverticesbtn{
	border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
	 
}
*/


#TopMenu #TopEditCenter>#editmeshbtn:hover:before,
#TopMenu #TopEditCenter>#editmeshbtn.activeBg:before{


/*box-shadow: 0px 3px 5px #20d994;*/
background-color:#20d994;
}
#TopMenu #TopEditCenter>#editfacesbtn:hover:before,
#TopMenu #TopEditCenter>#editfacesbtn.activeBg:before{
	/*box-shadow: 0px 3px 5px #c297e6;*/
background-color:#c297e6;
}
#TopMenu #TopEditCenter>#editedgesbtn:hover:before,
#TopMenu #TopEditCenter>#editedgesbtn.activeBg:before{
	/*box-shadow: 0px 3px 5px #20b6d9;*/
background-color:#20b6d9;
}
#TopMenu #TopEditCenter>#editverticesbtn:hover:before,
#TopMenu #TopEditCenter>#editverticesbtn.activeBg:before{
	/*box-shadow: 0px 3px 5px #20d98b;*/
background-color:#20d98b;
}
/**/

/*
button:hover img,
.button:hover img,
#TopMenu .activeBg img,
#TopMenu .activeBg:hover img,
#navZone button:hover img,
#navZone .button:hover img,
#navZone .activeBg img,
#navZone .activeBg:hover img{
	filter: invert(0);
}
*/
 


.badge,
.badge-active,
.badge-warning{
  border-radius: var(--rounded);
}


.badge{
    /*background-color:  var(--secondary-bg);*/
	color:#fff; 
}

.badge-active{
    background-color:  var(--active-bg);
	color: var(--active-bg-text);
}

.badge-warning{
  background-color: var(--warning-bg);
  color: var(--active-bg-text);
}

 
#dropZone {
    background-color: rgb(30, 29, 34, 0.7);
		text-transform:uppercase;
	font-weight: bold;
	letter-spacing: 1px;
}

.floatpanel{
	 background-color: var(--canvas-bg);
/*
box-shadow: 2px 2px 48px rgba(0,0,0,0.2);
*/
border:1px solid var(--secondary-bg);
  text-align:left;
  font-family:arial;
  border-radius:  calc(var(--rounded) + 2px);
}

.floatpanelactive{
box-shadow: 10px 10px 48px rgba(0,0,0,0.4);
}

.floatpanelbar{
	 background-color: var(--main-bg);
font-weight:bold;
  border-radius:  var(--rounded);
}

.floatpanelbar:hover{
	filter: brightness(1.3);
}

#publishPanel .floatpanelbar:hover{
	background-color:var(--secondary-bg);
}





.floatpanelclose:hover{
background-color: var(--canvas-bg);
outline: 1px solid rgba(255,255, 255, 0.1);
}
 
#publishPanel{
	background-color: var(--main-bg);
}

#scenesettingspanel .floatpanelcontent{
	background-color: var(--main-bg);
  top: 48px;
  left: 4px;
  bottom: 4px;
  right: 4px;
  padding: 24px;
border-radius: var(--rounded);
}


.floatpanelcorner{
border-top:15px solid rgba(0,0,0,0);
border-left:15px solid rgba(0,0,0,0);
border-bottom:15px solid var(--main-bg);
border-right:15px solid var(--main-bg);
border-bottom-right-radius:  var(--rounded);
}


#scenesettingspanel .floatpanelcorner,
#publishPanel .floatpanelcorner{
	border-bottom:15px solid var(--secondary-bg);
border-right:15px solid var(--secondary-bg);
}

#scenesettingspanel .floatpanelcorner:hover,
#publishPanel .floatpanelcorner:hover,
.floatpanelcorner:hover{ 
border-bottom:15px solid  var(--active-bg);
border-right:15px solid  var(--active-bg);
}

.secondary-bg{ 
	background-color:  var(--secondary-bg);
}

.active-bg{ 
	background-color:  var(--active-bg);
}

  input[type=range] {
	  user-select: none;
      -webkit-appearance: none;
      -webkit-touch-callout: none; /* iOS Safari */
      -webkit-user-select: none; /* Safari */
      -khtml-user-select: none; /* Konqueror HTML */
      -moz-user-select: none; /* Firefox */
      -ms-user-select: none; /* Internet Explorer/Edge */
      user-select: none; /* Non-prefixed version, currently
      supported by Chrome and Opera */
    background:none;
    outline:none;
    }
  
  input[type=range]:focus {
    outline: none;
    } 
  
  input[type=range]::-webkit-slider-runnable-track {
      cursor: pointer;
      background-color:var(--border);
      border-radius:var(--rounded);
      height:4px;
  }
  
  
  input[type=range]::-moz-range-track {
      cursor: pointer;
      background-color:var(--border);
      border-radius:var(--rounded);
      height:4px;
      }
  
  input[type=range]::-ms-track {
      cursor: pointer;
      background-color:var(--border);
      border-radius:var(--rounded);
      height:4px;
  }
  
  

  
  input[type=range]::-moz-range-thumb {
	 height:12px;
      width:12px;
      border: 0;
      cursor: pointer;
      background-color:var(--primary-bg);
      border-radius:var(--pill);
  }

    input[type=range]::-webkit-slider-thumb {
	 height:12px;
      width:12px;
      border: 0;
      cursor: pointer;
      background-color:var(--primary-bg);
      border-radius:var(--pill);

      }
	  
	
  input[type=range]::-ms-thumb {
	 height:12px;
      width:12px;
      border: 0;
      cursor: pointer;
      background-color:var(--primary-bg);
      border-radius:var(--pill);
  }  
  
  
  input[type=range]:focus::-webkit-slider-thumb {
      background-color:#ccc;
  }
  
  input[type=range]:focus::-moz-range-thumb {
      background-color:#ccc;
  }
   
  input[type=range]:focus::-ms-thumb{
      background-color:#ccc;
  }
  
  input[type=range]:hover::-webkit-slider-thumb {
      background-color:#ccc;
  }
  
  input[type=range]:hover::-moz-range-thumb {
      background-color:#ccc;
  }
  
  input[type=range]:hover::-ms-thumb{
      background-color:#ccc;
  }
  


#tooltip p{
padding:8px 0;}