*
{
	font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace !important;
	color:#F0F0F0;
	margin:0;
	padding:0;
	font-size:12px;
	box-sizing:border-box;
	image-rendering: optimizeSpeed;             
    image-rendering: -moz-crisp-edges;          
    image-rendering: -o-crisp-edges;            
    image-rendering: -webkit-optimize-contrast; 
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
}

a
{
	text-decoration:none;
}

input:focus
{
	outline:none;
}

#perso_ports
{
	position:absolute;
	bottom:0px;
	margin:auto;
}

.device
{
	position:absolute;
	top:0px;
	left:24px;
	margin:0px;
	padding:0px;
	/* height:600px; */
	/* width:400px; */
	min-height:32px;
	/* border:solid 1px rgba(255, 255, 255, 1); */
	background-color:rgba(32, 32, 32, 0.5);
}

.handle
{
	position:absolute;
	top:0px;
	/* left:-24px; */
	right:100%;
	margin:0px;
	padding:0px;
	width:24px;
	height:100%;
	background-color:rgba(32, 32, 32, 0.75);
	cursor:grab;
	overflow:hidden;
}

.title
{
	position:absolute;
	/* top:0px; */
	/* left:-100%; */
	transform:rotate(-90deg) translate(-100%);
	transform-origin:0% 0%;
}

.item_handle > .title 
{
	color:#000000;
	position:absolute;
	bottom:0px;
	right:0px;
	transform:translate(0);
	transform-origin:0;
}

.device.grabbed > .handle
{
	cursor:grabbing;
}

.console_container
{
	position:relative;
	padding:2px;
	height:300px;
	width:100%;
	overflow:hidden;
	/* left:32px; */
}

.console
{
	/* margin:2px; */
	width:100%;
	position:absolute;
	bottom:0;
	left:0;
	word-break:break-all;
	/* border-bottom:solid 1px rgba(255, 255, 255, 1); */
	line-height:12px;
}

.console a
{
	padding:0px;
	padding-top:2px;
	padding-bottom:2px;
	height:18px;
	color:#F0F0F0;
}

.prompt
{
	/* margin:2px; */
	height:18px;
	width:100%;
	/* border-bottom:solid 1px rgba(255, 255, 255, 1); */
	/* position:absolute; */
	/* bottom:0; */
	/* left:32px; */
	/* position:relative; */
}

.console_close
{
	position:absolute;
	background-color:rgba(96, 96, 96, 0.75);
	mask-image:url(/pics/resize.png);
	cursor:pointer;
	padding:0px;
	margin:0px;
	width:24px;
	height:24px;
	left:0px;
	bottom:0px;
}

.console_close:hover
{
	background-color:rgba(128, 128, 128, 0.75);
}

.ports
{
	/* margin:2px; */
	padding:2px;
	/* height:600px; */
	/* width:100%; */
	width:32px;
	/* position:relative; */
	/* top:0; */
	/* left:0; */
}

/*
.device
{
	margin:0;
	padding:2px;
	height:600px;
	width:400px;
}*/

.port, .vport
{
	/* display:inline-block; */
	margin:0;
	padding:0;
	height:32px;
	width:32px;
	background-color:rgba(255, 0, 0, 1);
	mask-image:url(/pics/port_o.png);
	mask-mode:alpha;
	mask-size:100%;
	mask-repeat:no-repeat;
	mask-position:center;
	/* background-image:url(/pics/port_up_o.png); */
	/* background-repeat:no-repeat; */
	/* background-size:100%; */
}

.port.open, .vport.open
{
	background-color:rgba(64, 64, 64, 1);
	mask-image:url(/pics/port_o.png);
}

.port.connected
{
	background-color:rgba(0, 255, 0, 1);
	mask-image:url(/pics/port_c.png);
}

.port.error, .vport.error
{
	background-color:rgba(255, 0, 0, 1);
	mask-image:url(/pics/port_d.png);
}

.vport.connected
{
	background-color:rgba(0, 128, 255, 1);
	mask-image:url(/pics/port_v.png);
}

.program_container
{
	position:absolute;
	top:0px;
	left:100%;
	padding:0px;
	margin:0px;
}

.program
{
	position:relative;
	padding:0px;
	margin:0px;
	width:100px;
	height:100px;
}

.program_handle
{
	/* background-color:rgba(0, 255, 0, 0.75); */
	background-color:rgba(32, 32, 32, 0.75);
	padding:0px;
	margin:0px;
	float:left;
	width:24px;
	height:100%;
}

.program_close
{
	position:absolute;
	background-color:rgba(255, 0, 0, 0.75);
	mask-image:url(/pics/close.png);
	cursor:pointer;
	padding:0px;
	margin:0px;
	width:24px;
	height:24px;
	left:0px;
	bottom:0px;
}

.program_close:hover
{
	background-color:rgba(255, 64, 64, 0.75);
}

.program_frame
{
	/* background-color:rgba(0, 255, 0, 0.5); */
	background-color:rgba(32, 32, 32, 0.5);
	padding:0px;
	margin:0px;
	float:right;
	width:calc(100% - 24px);
	height:100%;
}

.note
{
	position:absolute;
	background-color:rgba(0, 0, 0, 0.75);
	/* background:linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 5%, rgba(0,0,0,0.75) 95%, rgba(0,0,0,0) 100%); */
	top:0;
	left:0;
	padding:6px 8px 6px 8px;
	margin:0px;
	font-style:italic;
	text-align:justify;
	text-justify:auto;
	z-index:5;
}
.note.clickable
{
	cursor:pointer;
}
.note.clickable::after
{
	content:" (next)";
	color:#808080;
}

.item
{
	position:absolute;
	/* background-color:rgba(0, 0, 0, 0.75); */
	top:0;
	left:0;
	padding:0px;
	margin:0px;
}

.item_handle
{
	/* background-color:rgba(0, 255, 0, 0.75); */
	color:#000000;
	background-color:rgba(255, 255, 255, 0.75);
	padding:0px;
	margin:0px;
	height:24px;
	width:100%;
}

.item_frame
{
	/* background-color:rgba(0, 255, 0, 0.75); */
	color:#000000;
	background-color:rgba(255, 255, 255, 0.5);
	padding:0px;
	margin:0px;
	height:calc(100% - 24px);
	width:100%;
}

#main, #fs, #canvas, #c
{
	position:absolute;
	top:0px;
	left:0px;
	width:100%;
	height:100%;
	background-color:rgba(0, 0, 0, 0);
	/* background-image:url("/pics/araapng.png"); */
	/* background-repeat:no-repeat; */
	/* background-position:center; */
	overflow:hidden;
}

#main.destroyed, #fs.destroyed
{
	background-color:#A00000;
	background-image:none;
}

.draggable
{
	cursor:grab;
}

.item_handle.grabbed
{
	cursor:grabbing;
}

body
{
	background-color:#000000;
	/*
	background-image:url("/pics/araapng.png");
	background-repeat:no-repeat;
	background-position:center;*/
	width:100vw;
	height:100vh;
	overflow:hidden;
}

body.destroyed
{
	background-color:#A00000;
	/*
	background-image:none;*/
}

#screen
{
	position:fixed;
	width:100vw;
	height:100vh;
}

#screen.destroyed
{	position:fixed;	top:0;
	background-color:rgba(0, 0, 0, 0);
	background-image:url("/pics/brokenscreen.svg");
	background-position:top;		background-repeat: no-repeat;
	background-size:cover;	mix-blend-mode: difference;
}

#consoletext
{
	position:absolute;
	width:500px;
	left:calc(-250px + 50%);
	bottom:calc(-12px + 50%);
	text-align:center;
}

#consoletext.destroyed
{
	transform-origin:bottom;
	transform:rotate(-14deg) scale(141%);
	bottom:0;
	left:calc(-350px + 70%);
}

#consoletext a
{
	height:24px;
}

.prompt input
{
	height:18px;
	margin:0;
	padding:2px;
	width:50%;
	border:none;
	background:none;
}

.blinking
{
	background-color:rgba(192, 255, 128, 0.5) !important;
}

.c_old { opacity:0.5 !important; }
.c_em { color:rgb(96, 255, 64) !important; }
.c_white { color:#F0F0F0 !important; }
.c_grey { color:#808080 !important; }
.c_red { color:#FF0000 !important; }
.c_orange { color:#FF8000 !important; }
.c_green { color:#00FF00 !important; }
.c_blue { color:#0000FF !important; }
.c_violet {	color:#FF00FF !important; }
.c_cyan { color:#80FFFF !important; }
.c_transparent { color:rgba(0, 0, 0, 0) !important; }