/* dark gray for background: #073B4C; */
.dragscroll {
	overflow: auto;
	width: 3000px;
	height: 3000px;
	cursor: -webkit-grab;
	cursor: -moz-grab;
	cursor: -o-grab;
	cursor: grab;
	/*counter-reset: win;*/	
  counter-reset: line;
}

.dragscroll:active {
	cursor: -webkit-grabbing;
	cursor: -moz-grabbing;
	cursor: -o-grabbing;
	cursor: grabbing;
}

body{
	width: 3000px;
	height: 3000px;
    background-color:#172E35; /*#566573;*/
    padding:0px;
    margin:0px;
    font-family: Arial;
}





/* -------------------------------------------------------------------------- */
.win{
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	position:absolute;
	z-index:999;
	background-color:#0f0f13;
	border:1px solid #d3d3d3;
	color:#75beff;
	border-radius:9px 9px 1px 1px;
	opacity:.9;
}

.colapsed{
	overflow: hidden;
	position: absolute;
	border:none;
}
.colapsed>.body{ display: none; }
.colapsed>.header{ padding: 5px 20px 5px 20px; }



.body{
  padding: 5px;
	resize: both;
  overflow: auto;
  outline: none;
  overflow-y: auto;
  padding-left: 38px;
}

.body .ln {
  display: block;
  position: relative;
  white-space: pre-wrap;
}

.body .ln::before {
  content: counter(line);
  counter-increment: line;
  font-size: 12px;
  padding-top: 5px;
  position: absolute;
  right: calc(100% + 12px);
  color: grey;
}



.cursor {
	position: absolute;
	display: inline-block;
	width:2px;
	height: 1.2em;
	top:.15em;
	background-color: #28a745;
	text-decoration: blink;
	animation: blinker .8s linear infinite;
}

@keyframes blinker {  
	50% { opacity: 0.3; }
}










iframe{  border:none; 
	overflow: scroll;
	display:block; 
	width:100%; height:100%;
}

.ln{ min-height:24px;
	font-size: 1em;
	line-height:1.4; 
	padding-left: 5px;
	padding-right: 5px;
	cursor: text;
	white-space: nowrap;    /*height:22px;*/
	caret-color:yellow;
	caret-shape:block;
	border-left: medium #41414d solid; 
	color:#b9f2ff;
}
.ln:hover{ border-left: medium #21fd01 solid; }
.selected::before{
	  background: #21fd01;
	  width: 34px;
	  height:19px;
	  left:-39px;
	  border-radius: 5px;
	  top:0px;
}
.selected{
	border-bottom: thin dotted #1fccf4; /* light blue*/
	border-left: medium solid #1fccf4;
}

.kw{ color:#a569bd; } /* purple */
.cmt{ color:#6272a4; } /* gray */
.str{ color:#cdff5f; } /* yellow */
.obj{ color:#00b7ff; } /* neon blue */

			.idk{ color:#50fa7b; } /* green */
.num{ color:#f9a861; } /* orange */
.mbr{ color:tomato; } /* orange (darker) */
.pct{ color:lightgrey; } /* lightgrey */

.tag{ color:tomato; } /* tomato */

.blk{
	border-left: medium solid tomato;
	padding-left: 5px;
	margin-left: 20px;}

.fct{ background: #8ebaf2;
	border-radius: 5px;
	color:black;}
.args{
  color:goldenrod;
  background-color: #2c3e50;
  padding: 5px;
  border-bottom: thin solid #7e5109;
	cursor: text;
}

.box{
	position:relative;
	width:20px;
	height: 20px;
	display:inline-block;
}

.box>.bx{
	position:absolute;
	display:none;
	padding:5px;
  	border: thin solid green;	  
	border-radius: 5px;
	background:#333;
	/*top:-3px;*/
}
.box:hover>.bx{
	display:block;
}



.box::before{
	content:"📝";
}

[contenteditable="true"]:active, [contenteditable="true"]:focus{
	outline:none;
}

[contenteditable="true"]:active > .header, [contenteditable="true"]:focus > .header{
	background-color: #d4ac0d;
}

/* ---------------------------------SVG-------------------------------------- */
/*stroke="lightgrey" stroke-width="3"*/
.one>line{ stroke:#6f6d6d; stroke-width:1; }
.one>circle{ stroke:#6f6d6d; fill:#4648b4; stroke-width:1; }

.two>line{ stroke: #51cc64; stroke-width:2; }
.two>circle{ stroke:#51cc64; fill:#2305b3; stroke-width:2; }

.three>line{ stroke:#fb8d17; stroke-width:3; }
.three>circle{ stroke:#fb8d17; fill:#c3ff1e; stroke-width:3; }
/* ---------------------------------Window Types-------------------------------------- */
 .cons .header { background:#9D0808; 
	 background-image: linear-gradient(#f7f7f775, #fff0, #000000a3); } /* Wine */
 .css .header { background:#D02F56; 
	 background-image: linear-gradient(#f7f7f775, #fff0, #000000a3); } /*pink*/
 .html .header { background:#F27113; 
	 background-image: linear-gradient(#f7f7f775, #fff0, #000000a3); } /*orange*/
 .object .header { background:#06D6A0; 
	 background-image: linear-gradient(#f7f7f775, #fff0, #000000a3); } /*green*/
 .func .header , .Arrow .header { background:#00A0D5; 
	 background-image: linear-gradient(#f7f7f775, #fff0, #000000a3); } /*Blue*/
 .script .header { background:#005D7B; 
	 background-image: linear-gradient(#f7f7f775, #fff0, #000000a3); } /*Navy*/
.viewport .header { background:#00367B;
	 background-image: linear-gradient(#f7f7f775, #fff0, #000000a3); } /* dark blue */

/**/
.header {
  border-radius: 8px 8px 0px 0px;
  padding: 5px;
  padding-left: 20px;
  cursor: move;
  color: #fff;
  font-weight: bold;
  font-size:1.3em;
  line-height:1;
}
/*.dragscroll .win::before{
	  content: counter(win);
	  counter-increment: win;
	  position: absolute;
	  right: calc(100% + 12px);
	  opacity: 0.5;
}*/

.cons{border-bottom: thin dotted #7b7b7b; padding:0px; background:#0d0d0d; }
/* ----------------------------------------------------------------------- */


/* Some Nice Colors:
--blue: #007bff;
--indigo: #6610f2;
--purple: #6f42c1;
--pink: #e83e8c;
--red: #dc3545;
--orange: #fd7e14;
--yellow: #ffc107;
--green: #28a745;
--teal: #20c997;
--cyan: #17a2b8;
--white: #fff;
--gray: #6c757d;
--gray-dark: #343a40;
--primary: #007bff;
--secondary: #6c757d;
--success: #28a745;
--info: #17a2b8;
--warning: #ffc107;
--danger: #dc3545;
--light: #f8f9fa;
--dark: #343a40;
*/