:root {

    --active-bg:#7d95df;
	--active-bg-text: #ffffff;
    --active-text:#7d95df;
    --rounded:6px;
    --main-bg:#11111d;
	--secondary-bg: rgb(30, 29, 51);
    --text-color: rgba(255,255,255,0.76);
    --hr:rgba(255,255,255,0.1);
	--range-height: 12px;
  }
  

  html,
  body{
	margin:0;
	padding:0;
	overflow:hidden;
	width:100%;
	height:100%;
	background-color: var(--main-bg);
	color: var(--text-color);
	font-family: "Inter", "Segoe UI", Roboto, sans-serif;
  }
  

img.icon{
	filter: invert(1) brightness(0.7);
}
  

 
 hr{
	border-top:1px solid var(--hr);
	border-bottom:none;
 }
 

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


#historyZone{
  background-color:var(--secondary-bg);
      border-top-right-radius:  var(--rounded);
    border-top-left-radius: var(--rounded);
	}
	
#pos0,
#rot0,
#sc0,
#sz0{
	background-color: rgba(94, 66, 66, 0.4);
}
#pos1,
#rot1,
#sc1,
#sz1{
	background-color:rgba(52, 87, 52, 0.4);
}

#pos2,
#rot2,
#sc2,
#sz2{
	background-color:rgba(58, 58, 94, 0.4);
}


#objtree b{
    background-color: rgba(0, 0, 0, .1);
}

#objtree b:hover {
    background-color: rgba(0, 0, 0, .2);
}

#objtree .active1{
	
    background-color: rgba(0, 100, 45, 0.5);
		color: var(--active-bg-text);
}

#objtree del {

}

#objtree del:hover {
    background-color: rgba(179, 0, 45, 0.5);
		color: var(--active-bg-text);
}


#objtree li>span {
    background-color: var(--secondary-bg);
    border-radius:var(--rounded);
}
 
#objtree li>span:hover {
filter: brightness(96%);
}

#objtree li>span:before {
    //background-color: rgba(0, 255, 255, .14);

}

#objtree .active>span,
#objtree .active:hover>span {
    background-color:  var(--active-bg);
	color: var(--active-bg-text);
}


#objtree .dragMove>span {
    background-color: rgba(255, 255, 255, .3);
}



button,
.button {
	background: none;
	border: none;
	padding: 8px;
	text-decoration: none;
	border-radius:  var(--rounded);
	line-height:100%;
	color:var(--text-color);
}

.button-sm{
	
	padding: 3px 8px;
}


#uvmenu button,
#uvmenu .button,
.tabContent button,
.tabContent .button {
	padding: 4px 8px;
}

#uvmenu button:hover,
#uvmenu .button:hover,
 .tabContent button:hover,
.tabContent .button:hover {
background-color: var(--secondary-bg);
}

#uvmenu button:hover img,
#uvmenu .button:hover img,
 .tabContent button:hover img,
.tabContent .button:hover img{
	filter: brightness(1) invert(0);
}

#uvmenu .activeBg:hover img{
	filter: brightness(0) invert(1);
}


#Tabs>.tabChangeButton {
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
}



.subMenu {
	background-color: var(--main-bg);
    padding: 12px 0;
    margin: 12px 0;
border-radius:  var(--rounded);
box-shadow: 2px 2px 10px rgba(0,0,0,.7);
}

.subMenu>button,
.subMenu>.button,
.subMenu>label {
    padding: 5%;
    margin: 0;
    border-radius:0;
}

.subMenu>label:hover,
button:hover,
.button:hover{
	    background-color: var(--active-bg);
	color: var(--active-bg-text);
}

button:hover.secondaryBg,
.button:hover.secondaryBg{
	    background-color: var(--active-bg) !important;
}

.assembliesContainer button:hover{
color:var(--active-text);
}


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



#TopMenu button:focus,
#TopMenu button:focus:hover {
    background-color:  var(--active-bg) !important;
		color: var(--active-bg-text);
} 

input[type=text] {
    border: 0;
    background-color: var(--secondary-bg);
    padding: 4px;
    margin: 4px 0;
    border-radius:var(--rounded);
	color:var(--text-color);
}


.ColorPicker{
	border: 1px solid var(--hr) !important;
    border-radius:var(--rounded);
	margin-top: 7px !important;
}


#geomtexlabel{

    border-radius:var(--rounded);
}

#textureCanvas{
    border-radius:var(--rounded);
	}
/*
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;
}
*/
.tabContent {
    padding: 4px 24px;
    border-top: 1px solid var(--hr);
	height:42px;
}


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

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


button:hover img,
.button:hover img,
.activeBg img,
.activeBg:hover img{
	filter: brightness(0) invert(1);
}


button:hover.activeBg,
.button:hover.activeBg{
	filter: brightness(0.92);
}

.badge-active{
    border-radius: 12px;
    background-color:  var(--active-bg);
	color: var(--active-bg-text);
}

.badge-warning{
  border-radius: 12px;
  background-color: rgb(255, 0, 64);
  color: white;
}

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

#dropZone {
    background-color: rgba(0, 0, 0, .4);
}

#bottomzone {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}


.floatpanel{
    background-color:  var(--main-bg);

box-shadow: 2px 2px 10px rgba(0,0,0,.7);
  text-align:left;
  font-family:arial;
  border-radius:  var(--rounded);
  outline:1px solid rgba(255,255,255,.06);
}

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

.floatpanelbar{
font-weight:bold;
    background-color:  var(--secondary-bg);
}

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



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

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



.floatpanelclose{
}

.floatpanelclose:hover{
background-color: var(--active-bg);
    filter: brightness(1.2);

}





  input[type=range] {
      -webkit-appearance: none;
      margin:2px 0 0 0;
      position:relative;
      z-index:2;
      padding:0;
      -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;
    height:var(--range-height);
    line-height:var(--range-height);
    outline:none;
    display:inline-block;
    vertical-align:middle;
    }
  
  input[type=range]:focus { 
    outline: none;
    }
  
  input[type=range]::-webkit-slider-runnable-track {
  
      cursor: pointer;
      padding:0;
      outline:none;
      background-color:var(--secondary-bg);
      border:none;
      border-radius:var(--rounded);
      border:0;
      height:var(--range-height);
      /*margin-top:9px;*/
  }
  
  
  input[type=range]::-moz-range-track {
  
      cursor: pointer;
      padding:0;
      outline:none;
      background-color:var(--secondary-bg);
      border:none;
      border-radius:var(--rounded);
      border:0;
      height:var(--range-height);
      }
  
  input[type=range]::-ms-track {
  
      cursor: pointer;
      padding:0;
      outline:none;
      background-color:var(--secondary-bg);
      border:none;
      border-radius:var(--rounded);
      border:0;
      height:var(--range-height);
      /*margin-top:0px;*/
  }
  
  
  input[type=range]::-webkit-slider-thumb {
      height: var(--range-height);
      width:35px;
      border: 0;
      padding:0;
      cursor: pointer;
      -webkit-appearance: none;
      background-color:var(--active-bg);
      z-index:3;
      border-radius:var(--rounded);
      background-position:50% 50%;
      background-repeat:no-repeat;
      background-size:70% 70%;
      border:0;
      margin-top:0;
      }
  
  input[type=range]::-moz-range-thumb {
      height: var(--range-height);
      width:35px;
      border: 0;
      padding:0;
      cursor: pointer;
      background-color:var(--active-bg);
      z-index:3;
      border-radius:var(--rounded);
      background-position:50% 50%;
      background-repeat:no-repeat;
      background-size:70% 70%;
      border:0;
  }
  
  input[type=range]::-ms-thumb {
      height: var(--range-height);
      width:35px;
      border: 0;
      padding:0;
      cursor: pointer;
      background-color:var(--active-bg);
      z-index:3;
      border-radius:var(--rounded);
      background-position:50% 50%;
      background-repeat:no-repeat;
      background-size:70% 70%;
      border:0;
      margin-top:0px;
  }
  
  
  input[type=range]:focus::-webkit-slider-thumb {
	  	filter: brightness(0.92);
  }
  
  input[type=range]:focus::-moz-range-thumb {
	  	filter: brightness(0.92);
  }
  
  input[type=range]:focus::-ms-thumb{
	  	filter: brightness(0.92);
  }