@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
:root {
/*accent*/
  --primary-color: #12dfed;
  --primary-color-dimmed:#00a5ff;
  --primary-color-brightened:#00d9ca;
  --primary-color-light:#d9f0ff;
  --button-color:#ffffff;
/*interface*/
  --dialog-background:#181824; /*windows boxes and dilog*/
  --panel-background:#272838;  /*inside windows and dialogs*/
  --title-color:#12dfed;
  --paragraph-color:#7d8aa5;
  --link-color:#00a5ff;
  --hover-grey:#252537;
/*interface inners and input*/
  --input-background:#272838;
  --input-text-color:#cccccc;
  --input-placeholder-color:#cccccc;
  --palette-background:#272838;
  --border-color:#35374d; /*light border*/
/*iconage color control*/
  --light-icon-lum:10;
  --dark-icon-lum:10;
  --color-icon-hue:-20deg;
  --white-icon-hue:10deg;
/*general astetics*/
  --corner-rounding:5px;
  --title-font:Roboto,Helvetica Neue, Helvetica, Arial, sans-serif;
  --paragraph-font:Roboto,Helvetica Neue, Helvetica, Arial, sans-serif;
}


:root {
/*accent*/
  --primary-color: #2eb4b2;/* 00bec3 2cc6e2 #00c4c4 cef4f*/;
  --primary-color-dimmed:#00a5ff;
  --primary-color-brightened:#00d9ca;
  --primary-color-light:#edf9ff;
  --button-color:#ffffff;
/*interface*/
  --dialog-background:#ffffff; /*windows boxes and dilog*/
  --panel-background:#ffffff;  /*inside windows and dialogs*/
  --title-color:#061e2c;
  --paragraph-color:#061e2c;
  --link-color:#00a5ff;
   --hover-grey:#d9f0ff;
/*interface inners and input*/
  --input-background:#d7f9fe;
  --input-text-color:#061e2c;
  --input-placeholder-color:#edf9ff;
  --palette-background:#d7f9fe;
  --border-color:#cef4f4;/* edf9ff*/
/*iconage color control*/
  --light-icon-lum:10;
  --dark-icon-lum:10;
  --color-icon-hue:310deg;
  --white-icon-hue:10deg;
/*general astetics*/
  --corner-rounding:5px;
  --title-font:Roboto,Helvetica Neue, Helvetica, Arial, sans-serif;
  --paragraph-font:Roboto,Helvetica Neue, Helvetica, Arial, sans-serif;
}






body{
	-webkit-user-select: none; /* Safari */
	-ms-user-select: none; /* IE 10 and IE 11 */
	user-select: none; /* Standard syntax */
    min-width:1200px;
	height:100%;
	width:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	background:#fbf9f;
	color:var(--paragraph-color,#c4c5d6);
	width:100%;
	min-height:100%;
	font-size:100%;
	cursor:default;
	font-family:var(--paragraph-font,Roboto,Helvetica Neue, Helvetica, Arial, sans-serif);
	font-size:12px;
}


img { image-rendering: -o-crisp-edges;  image-rendering: -webkit-optimize-contrast; image-rendering: optimize-contrast;}
canvas {image-rendering: optimizeQuality;}
input[type=text] {background-color:var(--input-background,#edf9ff); color: var(--input-text-color,#061e2c); padding:7px 5px;  border:0px; border-radius: 3px;  vertical-align:middle; }
input[type=text]::placeholder {color: var(--input-placeholder-color,#cccccc); opacity: 1;}
input[type=number] {background-color:var(--input-background,#edf9ff); color: var(--input-text-color); padding:5px;  border:0px; border-radius: 3px 3px 3px 3px; vertical-align:middle;  }
input[type=range]{cursor:pointer;background-color:var(--input-background,#edf9ff);}
textarea{font-family:var(--paragraph-font,Roboto,Helvetica Neue, Helvetica, Arial, sans-serif);border:1px solid var(--border-color, #d9f0ff); border-radius: var(--corner-rounding, 5px); background-color:var(--input-background,#edf9ff);}
button{ color:var(--button-color); border-radius: 2px; background-color:var(--primary-color);border:0px;cursor:pointer;}
p{font-size:12px;vertical-align:middle; color:var(--paragraph-color);}
h1{font-family:var(--paragraph-font,Roboto,Helvetica Neue, Helvetica, Arial, sans-serif);color:var(--title-color);}
h2{font-family:var(--paragraph-font,Roboto,Helvetica Neue, Helvetica, Arial, sans-serif);color:var(--title-color);}
a{text-decoration:none; color:var(--link-color);}
select{padding:5px; border-radius:var(--corner-rounding, 5px);   border:1px solid var(--border-color); background-color:var(--panel-background,#edf9ff);}
option{padding:5px; font-size:14px;}





/*class list adders -- easy add styles for adding to class lists in js*/
.primary-color{background-color:var(--primary-color, green);}
.primary-light{background-color:var(--primary-light, #d9f0ff);}/* a lightened version of primary*/
.primaryColor{background-color:var(--primary-color, #d9f0ff);}
.pointer{cursor:pointer;}
.hoverGrey{cursor:pointer;}
.hoverWhite{}
.hoverGrey:hover{background-color:var(--hover-grey,#d9f0ff);}
.hoverWhite:hover{background-color:#ffffff;}
.hoverPrimary:hover {background-color: var(--primary-color) !important;}
.hoverPink:hover{background-color:#fa1eff;}
.whiteBox{background:var(--dialog-background, #ffffff);border-radius:var(--corner-rounding,5px); padding:4px;cursor:default;}
.hoverLight:hover{background:#21b8ff;}
.absolute{position:absolute;}
.rounded{border-radius:var(--corner-rounding,5px);}
.round{border-radius:50%;}
.square{border-radius:0px;}
.border{border:1px solid var(--border-color);}
.hidden{display:none;}
.inlineBlock{display:inline-block;}
.alignTop{vertical-align:top;}
.alignMiddle{vertical-align:middle;}
.padded{padding:5px;}
.dialogSub{padding:10px; text-align:left;}
.dialogHolder{padding:5px 8px; text-align:left;}
.left{text-align:left;}
.center{text-align:center;}
.margin{margin:5px;}
.padding{padding:5px;}
.dropShadow{filter: drop-shadow(0px 3px 3px #000000);}
.dialog-background{background:var(--dialog-background, #ffffff);}
.panel-background{background:var(--panel-background, #ffffff);}
.palette-background{background:var(--palette-background, #ffffff);}
.borderTop{border-top:1px solid var(--border-color);}
.borderBottom{border-bottom:1px solid var(--border-color);}
.borderTopAndBottom{border-top:1px solid var(--border-color);border-bottom:1px solid var(--border-color);}
.whiteIcon{}
.colorIcon{}





div.headerBox {
  display: flex;
  justify-content: space-between; /* left on left, right on right */
  align-items: center;
  margin-bottom:20px;

}
div.headerBox .left {text-align: left;}
div.headerBox .right {text-align: right; padding-right:25px;}



/*cursos color primary*/
.exportTool{cursor: url('../your-custom-cursor.html'), auto;}
p.hide{display:inline-block;margin:30px 0px;background:#5ca7f2;padding:5px;border:1px solid #dddddd;border-radius:3px;cursor:pointer}
p.title{text-align:left;font-size:13px; padding:2px 4px; margin:3px 0px; vertical-align:middle; font-weight:500; }/*title for html elements*/
p.paragraph{font-size:12px;  margin:3px 0px; padding:2px 4px;  text-align:left; vertical-align:middle; line-height:1.8; }/*title for html elements*/
div.colorPickerOpener{width:98%; height:50px; background-color:#ff7ce6; cursor:pointer; margin:5px auto;border:2px solid #d9f0ff;cursor:pointer;border-radius:7px;}
div.colorDot{margin:0px 15px 2px 0px; width:28px; height:28px; border-radius:50%; vertical-align:middle; display:inline-block; border:2px solid #d9f0ff;cursor:pointer}
div:focus{outline:none !important;}

div.icon{height:25px;display:inline-block;opacity:1;padding:0px;margin:1px;background-color:transparent;border-radius:3px;user-drag: none;-webkit-user-drag: none;vertical-align:middle;
transition: filter 0.7s ease; filter:hue-rotate(var(--color-icon-hue,10deg));
 /*filter: invert(100%) sepia(100%) saturate(500%) hue-rotate(120deg) brightness(85%);*/
}
/*div.icon:hover {filter: hue-rotate(0deg) saturate(2);}*/
div.palette{width:95%; margin:0% 2%; border:1px solid #d9f0ff; min-height:200px; border-radius:8px 8px 8px 8px;  background-color:var(--input-background,#edf9ff) }
	
/*button color masterWrapper*/	

/*derecated* palette
input[type="image"].icon{
	height:25px;
	opacity:0.8;
	padding:1px;
	margin:1px;
	background-color:#ffffff;
	border-radius:5px;
	user-drag: none;
    -webkit-user-drag: none;
	vertical-align:middle;
}/
/*deprectaed

input[type="image"].icon:hover{
	opacity:1;
	background-color:#e3eef5;
	
}

input[type="image"].icon[title]:hover::after {
	font-weight:900;
}

*/




/*list items in dialogs*/
 div.li{width:94%; padding:4px 7px; font-size:12px; vertical-align:middle; clear:both;  align-items: center; text-align:left; display: flex;  align-items: center;}
 div.li .rightButton{float:right;padding:5px;width:90px;margin:0px;vertical-align:middle; justify-content: space-between;}
 div.li p{margin:5px 0px;}
 div.li img.icon{height:25px; margin-right:10px; vertical-align:middle;}
 
 input.smallNumberInput{font-size:11px; padding:4px; width:50px;vertical-align:middle;}
 button.smallButton{padding:4px;min-width:50px;vertical-align:middle;}
 div.catagoryBox{width:96%; padding:0.5% 2%;text-align:left;margin-top:0px ;border-top:1px solid #ffffee; cursor:default;}


div#descriptionDialog{}
div#descriptionDialog ul{line-height:1.em;text-align:left;}
div#descriptionDialog ul li{text-align:left;padding:1%;}













div#addElementDialog{position:absolute; z-index:1000; background:#ffffff; border-radius:3px 3px 3px 3px;top:20%; left:25%; width:50%;height:50%;}





/* dialog boxes are boxes that open above all*/
	.dialog{background-color:var(--dialog-background,#ffffff); position:absolute; top:70px; right:350px; z-index:200; border-radius:9px; width:350px; height:auto; max-height:85%; display:none; 
	 cursor:default; padding-bottom:15px;filter: min-width:150px; drop-shadow(0px 3px 3px #000000);}
	.dialog .content{height:90%;overflow-y:auto;margin-top:0px;padding-top:1%;}
	div.headerBar{width:99%;height:30px; background:transparent; border-bottom:0px solid #000000;padding:0px 0.5%;border-radius:5px 5px 0px 0px; vertical-align:bottom; color:transparent;text-align:right}
	.dialogCloser{height:18px; margin:1px 1px;}
	
/*dialog specific styles*/
	button.colorClassButton{color:white; padding:7px; margin:2px 0px; display:inline-block;opacity:.6; width:80%; text-align:center;}
	button.colorClassButton:hover{opacity:1;}
	div.colorClassIndicatorColor{border-radius:50%; display:inline-block; width:30px; height:30px; margin-right:0px; vertical-align:middle}






 
 
 


.catagory{width:96%; padding:2%;text-align:left;border-top:0px solid #cccccc;}

 
 div.scrollBar{
	 height:90%;
	 overflow-y:auto;
	 scroll-behavior: smooth;
}

 .scrollBar::-webkit-scrollbar {
width: 10px;
 height: 13px;
}
 

.scrollBar::-webkit-scrollbar {
 width: 10px;
 height: 13px;
}
.scrollBar::-webkit-scrollbar-thumb {
 background: var(--primary-color, #00a5ff);
 border-radius: 10px;
}
.scrollBar::-webkit-scrollbar-thumb:hover{
 background: var(--primary-color-brightened, #00a5ff);
}
.scrollBar::-webkit-scrollbar-track{
 background: var(--dialog-background,#ffffff);
 border-radius: 10px;
 width:10px;
 border:0px solid #dddddd;
}


		
/* The switch - the box around the slider */
.switch {
  position: relative;
  display: inline-block;
  width: 35px;
  height: 14px;
  vertical-align:middle;
}

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

/* The slider */
.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 3px;
  bottom: 1px;
  background-color: var(--input-background,#dddddd);
  -webkit-transition: .4s;
  transition: .4s;
  
}

.slider:before {
  position: absolute;
  content: "";
  height: 12px;
  width: 12px;
  left: 1px;
  bottom: 1px;
  background-color: var(--input-background,#dddddd);
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

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

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

/* Rounded sliders select*/
.slider.round {
  border-radius: 8px;
}

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

.rotated-slider {
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  width: 150px;
}

.vertical-slider-wrapper {
  transform: rotate(-90deg);
  transform-origin: center;
  overflow: visible;
}

input[type="range"].hueRangeInput{
  -webkit-appearance: none;
  appearance: none;
  height: 20px;
  width: 70%;
  border-radius: 5px;
  vertical-align:middle;
  margin:15px 0px;
 background: linear-gradient(to right, 
    hsl(0, 100%, 50%),     /* Red */
    hsl(30, 100%, 50%),    /* Orange */
    hsl(50, 100%, 50%),    /* Yellow */
    hsl(120, 100%, 50%),   /* Green */
    hsl(180, 100%, 50%),   /* Cyan */
    hsl(240, 100%, 50%),   /* Blue */
    hsl(270, 100%, 50%),   /* Indigo */
    hsl(300, 100%, 50%),   /* Purple */
    hsl(360, 100%, 50%)    /* Red */
);
}

/* Style the thumb as before inspector*/
input[type="range"].hueRangeInput::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background: #007bff;
  border: 1px solid #007bff;
  border-radius: 50%;
  cursor: pointer;
  margin:15px 0px;
}

input[type="range"].hueRangeInput::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: #007bff;
  border: 1px solid #007bff;
  border-radius: 50%;
  cursor: pointer;
  margin:15px 0px;
}





button.close{
	 border-radius: 5px;
	 background-color:var(--primary-color,#00a5ff);
	 border:0px;
	 cursor:pointer;
	 color:white;
	 margin-top:2px;
}
button.close:hover{background-color:#85d4ff;}


button.open{
	 border-radius: 5px;
	 background-color:#00a5ff;
	 border:0px;
	 cursor:pointer;
	 color:white;
	 margin-top:2px;
}
button.opn:hover{background-color:#85d4ff;}





/* canvas tool bar*/
	div#canvasBar{position:absolute; top:10px; width:auto; background:var(--dialog-background, #ffffff); right: 10px; padding:2px; drop-shadow(0px 3px 3px #474747); border-radius:5px;}

/* edge dialog edge selector */
	div#edgeDialogEdgeSelector{width:98%;padding:1px 1px;}
	/* #edgeDialogEdgeSelector img{opacity:0.5; width:97.5%; cursor:pointer}
	#edgeDialogEdgeSelector img:hover{opacity:1}*/
	#edgeDialogEdgeSelector div{display:inline-block; vertical-align:top; }
	#edgeDialogEdgeSelector .verticalHolder{width:37px; height:80px; padding:1px;}
	#edgeDialogEdgeSelector .horizontalHolder{width:149px; height:40px; padding:1px;}
	
/* gradient dialog artObjectHolder*/	
	div.gradientPreviewBox{border-radius:5px; width:100%; height:35px; cursor:pointer; display:inline-block; border:1px solid :#aaaaaa; margin:5px;vertical-align:middle;}
	div.gradientPreviewBox:hover{}
	
/* scene bar */
	div#sceneBar{position:absolute;  background:transparent; max-height:95%; text-align:right;}
	div#sceneBar div.sceneIconHolder{width:50px; height:50px; border-radius:5px 5px 5px 5px; cursor:pointer;background:#0078a5;margin-bottom:1px;
	background-image: url("../png/scene_icon.png"); background-repeat:no-repeat;background-position: center;background-size: 15px 15px;}
	div#sceneBar div.sceneIconHolder:hover{background:#00a5ff !important;}
	
/*scene palette*/
	div#scenePalette{border:0px solid var(--border, #d9f0ff);}
	div.paletteItem{width:98%; margin:2px 1%; border:0px solid #cccccc;cursor:pointer;clear:both;height:auto;padding-top:2px;postion:relative;height:30px;border-radius:7px 7px 7px 7px; }
	div.paletteItem:hover{background:#dce8ef  !important;}
	div.paletteName{color:#111111; font-size:10px;font-weight:500; display:block;}
	div.paletteThumb{float:left;border:1px solid var(--border, #d9f0ff); width:25px; height:25px;margin-right:2px;margin-left:2px;overflow:hidden;border-radius:5px;}
	div.paletteThumb img{width:100%; background:transparent;}
	div.paletteActionBar{width:auto;text-align:right;display:block;}
	div.paletteActionBar  input{width:15px;margin-left:4px; opacity:.7}
	div.paletteActionBar  input:hover{opacity:1}
/*long button*/
	button.actionButton{width:98%; padding:2.5% 0; display:block; margin:4px 0px;}
	button.actionButton:hover{background:#85d4ff}
/*color scanner*/
	div.colorBox{width:32px; height: 18px; margin:1px; display:inline-block; vertical-align:top; cursor:pointer; }
	div.categoryTab{writing-mode: vertical-rl;cursor:pointer; height:50px; text-orientation:mixed; width:40px; border-radius:0px 7px 7px 0px;font-size:12px;
	color:white;margin-bottom:1px; overflow-y:hidden}
	#descriptionDialog{min-width:600px;}
	#descriptionDialog p{font-size:15px; text-align:justify;}
	#descriptionDialog iframe{margin:20px 0px;}
	#descriptionDialog h1{text-align:left;font-size:20px;}
	/*table#transformTable{font-size:12px;}*/
	/*table#transformTabletd{} canvasContainer */
	
	div#inspector{text-align:left;}
	div.inspectorButton{ width:50px; height:50px;  cursor:pointer; display:block; margin:10px 5px; text-align:center;}
	div.inspectorButton:hover{ filter: grayscale(50%);}
	div.inspectorButton img{width:25px; height:25px; margin-top:12px;}
	div.inspectorDialog{max-height:85%; height:auto; width:290px; padding-bottom:30px;}
	div.inspectorDialog .ID_content{padding:5px;}
	
	
	
	
	div#LIBWIN{position:absolute; top:70px; height:88%; left:1%;  width:99%; display:block; border-radius:5px 5px 5px 5px; z-index:100; background:#ffffff; text-align:left}
	div#LIBWIN {}
	button.keyword{background-color:#ddf5fb; color:#3898b1; border-radius:5px;}
	div#libTitleContent{padding:0px 20px}
	div#libFilterContent{padding:0px 0px 0px 0px; margin:25px 25px;}
	div#libNavContent{padding:4px 15px 0px 3px;text-align:right}
	div#libpaginationContent{padding:30px 20px;}
	div#libPageContent div.thumbHolder{
						padding:20px;
						display: flex;
						flex-wrap: wrap;                    /* Allows wrapping onto new lines */
						justify-content: center;             /* Centers items in each row */
						gap: 1px;  
					}
	
	 /* ajaz windod thumbHolder 343549*/
	div.artObjectHolder{
		border-radius:15px;
		display:inline-block; 
		padding:4px; margin:15px 5px; 
		text-align:center; flex: 1 1 125px; 
			border:1px solid #eeeeee;
		}
	div.artObjectHolder img{height:50px;border-radius:11px;}
	div.artObjectHolder p{font-size:10px;}
	div.artObjectHolder button{width:27px; height:27px;}




	table.metadata {
    width: 100%;               /* Full width of the container */
    border-collapse: collapse; /* Collapsed borders */
    border: 1px solid; border-color:var(--border-color, #eeeeee); /* Cell borders */
    text-align: left;          /* Left-align text */
    table-layout: fixed;       /* Ensures equal column width */
}

table.metadata th,
table.metadata td {
    border: 1px solid;    border-color:var(--border-color, #eeeeee); /* Cell borders */
    padding: 2px;              /* Padding for better readability */
    text-align: left;                   /* Ensures all cells have the same width */
    word-wrap: break-word;     /* Prevents content overflow */
}

table.metadata tr:nth-child(even) {
    
}

table.metadata tr:hover {
   background-color: var(--input-background, ); /* Alternate row colors for readability */
}