#svgTextDetails, #svgTextN, .mathFont{font-family:STIXGeneral, 'DejaVu Serif', 'DejaVu Sans', Cambria, 'Cambria Math', Times, 'Lucida Sans Unicode', OpenSymbol, 'Standard Symbols L', serif}
#SvgOpt img, #COLOR img{vertical-align:middle}


#caps{
    position: absolute;
	top: 0px;
	z-index: -1;
}

#tileToolCap img{
    width: 16px;
}

#tileToolCap svg[id]{height:2rem}

@media screen and (max-width:800px){
	
	#tileToolCap:not(.Narrow) svg[id]{width:15%;}
	#Crop {display: none}
	#Caps{
		touch-action: none;
		overflow: hidden;
	}
}
@media screen and (min-width:800px){
	#tileToolCap svg[id]{width:2rem;}
}
#tileFontCenter{width:40px}

#strkDash{width:78px}
#font{width:100px}

#path_CapScr{width:55%}
#SvgOpt textarea{width:85%}



#svgToolOpt.Narrow{
	right: 4.39rem;
	position: absolute;
	top:0;
	z-index: 99999999;
}

.day #svgToolOpt{
    background: honeydew;
}

.night #svgToolOpt{
    background: darkslategray;
}

#svgTool2{
	background:silver;
}
#svgToolOpt > *, .tool[name=codeout]{
	padding:5px;
}

#Weib{margin:5px}
#fontCSS span, #CssFilter div{margin:10px}
#tileToolCap{margin:0 10px}
#svgShape, #svgCssTransform > div{margin:2px 0;border-radius: 5px;}

#fontCSS span:not(.toggle), #CssRotate input[type=radio]:not(:checked) ~ img, #CssRotate input[type=radio]:not(:checked) ~ #CssRotate6 img,  #CssRotate6 img:not(.toggle):not(:hover){filter:grayscale(1);opacity:.4}

#fontCSS span,#tileToolCap svg{cursor:pointer}
#tileTool{
	text-align:center;
	user-select: none;
	float: right;
}

#svgShape svg{
	border-radius:5px;
    vertical-align: middle;
    margin:1px;

}
#svgTog,#svgTool{

	background:lightslategray
}




#tileTool:not([for]):after{
	position: fixed;
	font-weight: bold;
	color: yellow;
	text-shadow:3px 3px 5px rgba(0, 0, 0, .5);

	content:attr(tip);
	top:0;
	right:12px;
	height:20px;
	z-index: 1;
}

#svgShape{
	overflow-y: auto;
	max-height: 30rem;
}

#Caps textarea:hover, #svgShapes{resize:auto;overflow:auto}
#Caps textarea{resize:none; overflow:hidden; background-color:transparent}

#tileToolCap textarea{
	width:98%
}
#capctxTXT div,#fxTXT div{
	max-height:100px;
	overflow-x: hidden;
	overflow-y: auto;
	text-align: left;
}

#fxTXT,#capctxTXT{
	background:#eee;
}

#tileBacks{
    text-align: left;
    padding-left: 20px;
}


#Tile > table td{padding:0}

#Tile table {
    border-spacing: 0;
}


#COLOR summary input[readonly] {
	margin: 4px;
    width: 1.5rem;
    height: 1.5rem;
	text-align: center;
}
#color1{background:skyblue}
#color2{background:pink}
#color3{background:black}
#color4{background:firebrick}

#CssRotate6 img {
    margin: 0 1rem;
}

.blur{filter:blur(1px)}
.bright{filter:brightness(50%)}
.contrast{filter: contrast(150%)}
.dropShadow{filter: drop-shadow(-2px -2px 2px rgba(0, 0, 0, 0.5))}
.grayscale{filter: grayscale(80%)}
.sepia{filter: sepia(100%)}
.invert{filter: invert(100%)}
.hueRotate{filter:hue-rotate(180deg)}
.saturate{filter: saturate(100%)}
.scale:not(.KeyBoard){transform: scale(1.2,1); padding-right:2px}
.skew{transform: skew(12deg)}
.clip{clip:rect(0,12px,12px,0)}

.flipy,#flipy{transform:rotateY(180deg)}
.flipx,#flipx{transform:rotateX(180deg)}
.rotate3,#rotate3{transform:rotate(-90deg)}
.rotate2,#rotate2{transform:rotate(180deg)}
.rotate1,#rotate1{transform:rotate(90deg)}

.small{transform:scale(.9)}