/*
 *
 * https://www.w3schools.com/graphics/tryit.asp?filename=trysvg_myfirst
 * https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/transform
 * https://stackoverflow.com/questions/46139273/specifying-values-for-d-attribute-of-path-tag-in-percentage
 * https://stackoverflow.com/questions/4767010/why-does-css-padding-increase-size-of-element 
 * resize:horizontal|vertical|both
 * https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_draggable
 */

 html, body {margin:0; width:100%; height:100%; overflow:hidden;}
 #a{
	display:block; 
	width:100%; height:100%;
	box-sizing:border-box; padding: 1%;
	background-color:lightblue;
	position:relative; overflow:hidden;
 }
 #me, #ex{
	display:block; width:99%; min-width:300px; margin:0 0 1% 0;
	height:auto; min-height:35px; overflow:hidden; padding:0.5% 1% 1% 1%;
	box-sizing:border-box; background-color:#f1f1f1;
	border:1px solid teal;
 }
 #me input[type="button"]{
	width:7%; min-width:60px; cursor:pointer;
	background-color:#f1f1f1; border:none; border-bottom:1px solid teal;
 }
 #ex input[type="button"]{
	width:4%; min-width:25px; cursor:pointer;
	background-color:#f1f1f1; border:none; border-bottom:1px solid teal;
 }
 #me input[type="button"].active, #ex input[type="button"].active{
	cursor:default; border-bottom:2px solid red;
 }
 #me input[type="button"]:hover, #ex input[type="button"]:hover{
	background-color:teal; color:white;
 }
 #me label, #ex label{
	cursor:pointer; margin:0 0 0 0; font-size:85%;
 }
 #me input[type="checkbox"]{
	width:16px; height:16px; cursor:pointer; box-shadow:inset 0px 0px 3px 1px teal;
 }
 #ed {
	display:inline-block; box-sizing:border-box; padding: 1%;
	background-color:#ffffff; border:1px solid teal; font-family:monospace;
	overflow:auto;
 }
 #ed:focus{background-color:lightyellow;color:teal;}
 
 #fr{
	display:inline-block; overflow:hidden;
	background-color:#ffffff; border:1px solid teal;
 }
 #ifr{width:100%; height:100%; overflow:auto;}




@media only screen and (min-width: 0px) {
	
 #ed, textarea#ed {
	width:99%; height:40%; margin:0 0 1% 0;
	resize:none;
	/* resize:vertical; min-height:30%; max-height:50%; */
 }
 
 #fr {width:99%; height:40%;padding:0; margin:0;}
 #ifr{padding:0; margin:0;}
 
 #ra, input[type="range"]{
	/* https://stackoverflow.com/questions/15935837/how-to-display-a-range-input-slider-vertically */
	background-color:transparent; accent-color:orange; height:1px; cursor:col-resize;
	z-index:1; opacity:0.5;
	margin:0 0 0 30.2%; position:relative; top:+0%; left:+0%; width:37%;
 }

}


@media only screen and (min-width: 500px) {

 #ed, textarea#ed{
	vertical-align:top; display:inline-block;
	width:49%; height:80%;  /* margin:0 1% 0 0; */
	resize:none;
	/* resize:horizontal; min-width:25%; max-width:70%; */
 }

 #fr{
	vertical-align:top; display:inline-block;
	width:49%; height:80%;
 } 
 #ra, input[type="range"]{
	background-color:transparent; accent-color:orange; height:1px; cursor:col-resize;
	z-index:1; opacity:0.5;
	margin:0 0 0 28.5%; position:relative; top:+0%; left:+0%; width:37%;
 }

}

 /*
 #split{
	position:absolute; z-index:10; left:50%; top:5%; vertical-align:top;
	display:inline-block;
	width:2%; height:20%; min-height:250px; cursor:col-resize;
	background-color:inherit; border:1px solid red;
	margin:0;
 }
 */

.br {
  overflow-wrap: break-word;
  word-wrap: break-word;
	-webkit-hyphens: auto;
			hyphens: auto;
}
.nobr {
  white-space:nowrap;
}
.d_ib {display:inline-block;}
.bs_bb {box-sizing:border-box;} /* paddings do not change the box size */
.rb{resize:both;}
.rh{resize:horizontal;}
.rv{resize:vertical;}
.f_left{float:left;}
.f_right{float:right;}
.fs_85{font-size:85%;}

/* svg classes */
.btn{width:100%;height:100%;}
.lin{stroke:black;stroke-width:7%;}
.ce{contenteditable:true;}
.test{border:1px solid red;}

svg text{text-anchor: middle; dominant-baseline: middle;}

/* example area */
.w{width:100px;height:100px;}
.v{width:200px;height:200px;}