body{
  -webkit-user-select:none;
  -moz-user-select:none;
  -ie-user-select:none;
  margin:0;
  font-family:Roboto,Arial,sans-serif;
  transition:filter 500ms;
}

#playarea,#grid{
  display:block;
  position:fixed;
  z-index:-1;
}

#wrapperwrapper{
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  overflow-x:hidden;
  overflow-y:auto;
}

#selection{
  display:block;
  position:absolute;
  background-color:#050505;
  width:250px;
  height:calc(100% - 50px);
  font-size:15px;
  left:0;
  transition:left 500ms;
  z-index:10;
}

.tab{
  display:block;
  position:relative;
  width:100%;
  min-height:30px;
  color:#eee;
  overflow:hidden;
  padding-bottom:12px;
  background-color:#111;
}

.tabexpando{
  display:block;
  position:relative;
  width:100%;
  height:30px;
  background-color:#272727;
  line-height:30px;
  text-indent:7px;
  cursor:pointer;
  box-sizing:border-box;
  border-bottom:1px solid black;
}

.tabexpando:after{
  float:right;
  content:"▴";
  margin-right:10px;
  text-align:center;
}

.tab[expanded="false"] .tabexpando:after{
  content:"▾";
}

.tabexpando:hover{
  background-color:#333;
}

.tab[expanded="false"]{
  height:30px;
  padding-bottom:0;
}

.selectbox{
  display:block;
  position:relative;
  float:left;
  width:42.5%;
  min-height:80px;
  left:5%;
  top:12px;
  margin-right:5%;
  margin-bottom:12px;
  background-color:#333;
  cursor:pointer;
  /*transition:outline 300ms;*/
}

.selectbox:hover{
  background-color:#3a3a3a;
  /*z-index:100;
  outline:1000px solid rgba(0,0,0,0.5);*/
}

.desc{
  display:block;
  position:absolute;
  width:80%;
  left:10%;
  text-align:center;
  font-size:11px;
  top:57px;
}

.selitem{
  display:block;
  position:relative;
  float:left;
  top:5px;
  left:5px;
  width:50px;
  height:50px;
  background-color:#eee;
  margin-right:5px;
  cursor:pointer;
}

#gateoptions {
  display: block;
  position: relative;
  float: left;
  width: 90%;
  height: 20px;
  left: 5%;
  top: 10px;
  margin-bottom: 10px;
}

#gatestyle {
  display: block;
  position: relative;
  float: left;
  font-size: 13px;
  line-height: 20px;
}

#gatedropdown {
  float: right;
  margin-left: 10px;
  width: 140px;
  height: 100%;
  outline: none;
  background-color: #333;
  border: none;
  color: #eee;
  font-size: 12px;
  line-height: 20px;
}

#coords{
  display:block;
  position:absolute;
  z-index:100;
  bottom:0;
  left:100%;
  padding:3px;
  padding-left:5px;
  padding-right:5px;
  background-color:#333;
  color:#ccc;
  font-size:12px;
  pointer-events:none;
  opacity:0;
  transition:opacity 500ms;
}

#toolmenu{
  display:block;
  position:fixed;
  left:0;
  bottom:0;
  height:50px;
  width:100%;
  background-color:#222;
  z-index:3000;
}

.spacer{
  display:block;
  position:relative;
  float:left;
  width:1px;
  height:40px;
  top:5px;
  margin-left:10px;
  background-color:#444;
}

#infosquare{
  display:block;
  position:relative;
  float:left;
  top:10px;
  left:10px;
  width:230px;
  height:30px;
  background-color:#333;
  color:#bbb;
  text-align:center;
  line-height:30px;
  font-size:14px;
  cursor:default;
}

#erroricon{
  display:inline-block;
  position:relative;
  width:20px;
  height:20px;
  top:5px;
  margin-right:5px;
  background-color:#d00;
  border-radius:50%;
}

#erroricon:after{
  display:block;
  position:absolute;
  content:"!";
  width:100%;
  height:100%;
  font-size:15px;
  line-height:20px;
  font-family:Impact,Trebuchet MS,Arial,sans-serif;
  font-size:bold;
  color:#eee;
}

#errorinfo{
  display:none;
  position:absolute;
  background-color:#622;
  color:#ddd;
  top:0;
  width:100%;
  animation:errorin 500ms forwards 1/*,errorout 4s forwards 1*/;
  transition:opacity 500ms;
  transition-delay:500ms;
}

@keyframes errorin{
  from{background-color:#fbb;}
  to{background-color:#622;}
}

@keyframes errorout{
  90%{opacity:1;}
  100%{opacity:0;}
}

.actionbutton,.optionbutton{
  display:block;
  position:relative;
  float:left;
  width:40px;
  height:40px;
  background-color:#999;
  margin-top:5px;
  margin-right:5px;
  left:10px;
  border-radius:3px;
  cursor:pointer;
  background-image:url("https://picturelements.github.io/images/gIconsNormal.png");
  background-size:440px 40px;
}

.actionbutton:hover,.optionbutton:hover{
  background-color:#888;
}

.optionbutton{
  float:right;
  left:initial;
}

.actionbutton[selected=""],.actionbutton[sel="true"],.optionbutton[sel="true"]{
  background-color:#038;
  background-image:url("https://picturelements.github.io/images/gIconsHover.png");
}

.actionbutton[selected=""]:hover,.actionbutton[sel="true"]:hover,.optionbutton[sel="true"]:hover{
  background-color:#027;
}

div[label]:hover:after{
  display:block;
  position:absolute;
  content:attr(label);
  background-color:#027;
  margin-top:-20px;
  margin-left:-5px;
  text-align:center;
  width:50px;
  height:20px;
  line-height:20px;
  font-size:12px;
  color:white;
  border-radius:3px;
  opacity:0;
  animation:slidein 300ms forwards 1;
}

div[label]:hover:before{
  content:"";
  display:block;
  position:absolute;
  border:10px solid #027;
  border-left-color:transparent;
  border-right-color:transparent;
  border-bottom-color:transparent;
  margin-left:10px;
  margin-top:0;
  opacity:0;
  animation:slidein2 350ms forwards 1;
}

@keyframes slidein{
  to{margin-top:-35px; opacity:1;}
}

@keyframes slidein2{
  to{margin-top:-20px; opacity:1;}
}

#playpause{
  display:block;
  position:relative;
  float:left;
  cursor:pointer;
}

#ppicon{
  display:block;
  position:relative;
  float:left;
  width:40px;
  height:40px;
  margin-left:10px;
  margin-top:5px;
  background: #3cce29;
  box-shadow:inset 0 0 10px rgba(0,0,0,0.8);
  border-radius:50%;
  cursor:pointer;
  background-image:url("https://picturelements.github.io/images/playpause.png");
  background-size:40px 400px;
  background-position:2px 0;
  transition:200ms background-position steps(9,end);
}

#playpause:hover #ppicon{
  opacity:0.9;
}

/*#ppicon:before{
  display:block;
  text-align:center;
  content:"►";
  text-indent:4px;
  color:#040;
  font-size:25px;
  line-height:40px;
  border-radius:50%;
}*/

#playpause[state="on"] #ppicon{
  background-color: #ce3429;
  background-position:0 -360px;
}

/*#playpause[state="on"] #ppicon:before{
  content:"❚❚";
  text-indent:0;
  color:#400;
}*/

#statemsg{
  display:block;
  position:relative;
  top:11px;
  left:-22px;
  float:left;
  width:110px;
  height:28px;
  background-color:#444;
  border-radius:10px;
  padding-left:10px;
  z-index:-100;
  overflow:hidden;
}

#statemsg:after{
  display:block;
  position:absolute;
  width:90px;
  height:100%;
  left:25px;
  text-align:center;
  line-height:28px;
  content:"Start simulation Stop simulation";
  font-size:12px;
  color:#bbb;
  transition:margin-top 200ms;
}

#playpause[state="on"] #statemsg:after{
  margin-top:-28px;
}

#playpause:hover #statemsg{
  background-color:#3a3a3a;
}

#logowrapper{
  display:flex;
  position:relative;
  width:100%;
  height:50px;
  align-items:center;
  justify-content:center;
  background-color:#222;
  box-shadow:inset 0 0 50px black,inset 0 0 50px black;
}

#logo{
  display:flex;
  width:102px;
  height:30px;
  background-image:url("https://picturelements.github.io/images/boolflo.png");
  background-size:102px 30px;
}

#version{
  display: block;
  position: relative;
  float: left;
  margin-top: 12px;
  margin-left: 2px;
  color: #999;
  font-size: 12px;
}

#doctitle{
  display:block;
  position:relative;
  width:100%;
  height:30px;
  line-height:30px;
  text-align:center;
  background-color:#014;
  color:#ccc;
  cursor:default;
  border-top:1px solid #027;
  border-bottom:1px solid #027;
  text-shadow:2px 2px 3px rgba(0,0,0,0.5);
}

#credits{
  color:#777;
  text-align:center;
  margin-top:10px;
  font-size:13px;
  margin-bottom:10px;
  cursor:default;
}

#credits a{
  color:#777;
  text-decoration:none;
  font-weight:bold;
}

#maincontent{
  display:block;
  position:absolute;
  width:100%;
  height:100%;
}

.gate{
  display:block;
  position:fixed;
  width:60px;
  min-height:50px;
  margin-top:-25px;
  margin-left:-30px;
  background-color:#333;
  box-sizing:border-box;
  border:2px solid #666;
  cursor:pointer;
  font-family:Trebuchet MS,Arial,sans-serif;
  color:#eee;
}

.gate[svg_enabled="true"],.module[type*="mux"]{
  background:transparent;
  color:transparent;
  border-color:transparent;
  box-shadow:none !important;
}

.module[type*="mux"]{
  display:block;
  position:fixed;
  width:60px;
  height:60px;
  margin-left:-30px;
  margin-top:-30px;
  background:transparent;
}

.input[preview],.gate[preview],.module[preview],.label[preview]{
  position:absolute;
  top:30px;
  left:50%;
  transform:scale(0.7);
  pointer-events:none;
}

.gate svg,.module svg{
  display:block;
  position:absolute;
  top:-2px;
  left:-2px;
  z-index:-10;
  stroke:black;
  stroke-width:4;
  fill:white;
  pointer-events:none;
}

.module svg{
  top:0;
  left:0;
}

.gate[svg_enabled="false"] svg{
  display:none;
}

.input[preview],.module[preview]{
  transform:scale(0.75);
}

.module[preview][type="display"]{
  transform:scale(0.25);
  left:45%;
  top:25px;
}

.gate:hover,.module:hover,.input:hover{
  box-shadow:0 0 8px #09f;
}

.gate[selected="true"],.module[selected="true"],.input[selected="true"],.label[selected="true"],div[selected="true"] .label{
  box-shadow:-2px -2px 0px #07b,2px -2px 0px #07b,-2px 2px 0px #07b,2px 2px 0px #07b,0 0 18px #09f;
}

.label[selected="true"],div[selected="true"] .label{
  outline:none;
}

.gate[selected="true"] svg, .module[selected="true"] svg{
  stroke:#07b;
}

div[selected="true"] .gateinput, div[selected="true"] .gateoutput{
  background-color:#7af;
  border-color:#028;
}

.gateinput,.gateoutput{
  display:block;
  position:relative;
  top:8px;
  margin-bottom:10px;
  width:10px;
  height:10px;
  margin-left:-5px;
  border-radius:50%;
  background-color:#eee;
  box-sizing:border-box;
  border:1px solid black;
  cursor:crosshair;
}

.gateinput:hover,.gateoutput:hover{
  transform:scale(1.3);
}

#maincontent[simulation="true"] .gateinput, #maincontent[simulation="true"] .gateoutput{
  pointer-events:none;
}

.gatepointer,.gateoutpointer{
  display:block;
  position:absolute;
  width:0;
  height:0;
  left:2px;
  top:15px;
  border-left:5px solid transparent;
  border-top:5px solid transparent;
  border-right:5px solid #005;
  border-bottom:5px solid transparent;
  pointer-events:none;
}

.gateoutpointer{
  left:initial;
  right:2px;
  border-left:5px solid #005;
  border-right:5px solid transparent;
}

.gateinput[connected="true"],.gateoutput[connected="true"]{
  border:none;
  background-color:#777;
}

#maincontent[simulation="true"] .gateinput[state="0"],#maincontent[simulation="true"] .gateoutput[state="0"]{
  background:#f33;
}

#maincontent[simulation="true"] .gateinput[state="1"],#maincontent[simulation="true"] .gateoutput[state="1"]{
  background:#5d5;
}

.module[type*="mux"] .gateinput[pos="bottom"],.module[type*="mux"] .gateinput[pos="top"]{
  top:initial;
}

.module[type*="mux"] .gateinput[pos="left"]{
  top:50%;
}

.gateoutput{
  position:absolute;
  right:0;
  top:50%;
  margin-top:-5px;
  margin-right:-5px;
}

.module[type*="mux"] .gateinput{
  top:15px;
}

.module[type="demux"] .gateoutput{
  top: 20px;
  margin-bottom: 15px;
  position: relative;
  float: right;
  clear: right;
}

.gate[svg_enabled="true"] .gateinput{
  margin-left:-7px;
}

.gate[svg_enabled="true"] .gateoutput{
  margin-right:-7px;
}

.gate:before{
  display:flex;
  position:absolute;
  width:100%;
  height:100%;
  font-size:25px;
  align-items:center;
  justify-content:center;
}

.gate[type^="not "]:before{
  text-decoration:overline;
  margin-top:3px;
}

.gate[type="not"]:before{
  content:"1";
  text-decoration:none;
  margin-top:0;
}

.gate[type*="and"]:before{
  content:"&";
}

.gate[type*="or"]:before{
  content:"≥1";
}

.gate[type*="xor"]:before{
  content:"=1";
}

.module,.input{
  display:block;
  position:fixed;
  background-color:#222;
  border-radius:5px;
  cursor:pointer;
}

.module[type="display"]{
  min-width:10px;
  min-height:10px;
  margin-top:-73px;
  margin-left:-50px;
  padding-right:30px;
  padding-bottom:30px;
}

.digit{
  display:block;
  position:relative;
  float:left;
  top:15px;
  left:15px;
  width:80px;
  height:130px;
  background-color:white;
  background-image:url("https://picturelements.github.io/images/digits.png");
  background-size:1280px 130px;
  pointer-events:none;
}

/*It's easiest this way.*/
.digit[value="1"]{background-position-x:-80px;}
.digit[value="2"]{background-position-x:-160px;}
.digit[value="3"]{background-position-x:-240px;}
.digit[value="4"]{background-position-x:-320px;}
.digit[value="5"]{background-position-x:-400px;}
.digit[value="6"]{background-position-x:-480px;}
.digit[value="7"]{background-position-x:-560px;}
.digit[value="8"]{background-position-x:-640px;}
.digit[value="9"]{background-position-x:-720px;}
.digit[value="10"]{background-position-x:-800px;}
.digit[value="11"]{background-position-x:-880px;}
.digit[value="12"]{background-position-x:-960px;}
.digit[value="13"]{background-position-x:-1040px;}
.digit[value="14"]{background-position-x:-1120px;}
.digit[value="15"]{background-position-x:-1200px;}

.module[type*="led"],.input{
  width:40px;
  height:40px;
  margin-top:-20px;
  margin-left:-20px;
}

.ldiode{
  display:block;
  position:absolute;
  width:20px;
  height:20px;
  margin-top:10px;
  margin-left:10px;
  border-radius:50%;
  background-color:#b00;
  pointer-events:none;
}

.ldiode[state="on"], .module[type="bicolor led"] .ldiode[state="off"]{
  background-color:#f88;
  background: -moz-radial-gradient(center, ellipse cover, #ffffff 0%, #ffffff 16%, #d63131 100%);
  background: -webkit-radial-gradient(center, ellipse cover, #ffffff 0%,#ffffff 16%,#d63131 100%);
  background: radial-gradient(ellipse at center, #ffffff 0%,#ffffff 16%,#d63131 100%);
  box-shadow:0 0 20px #f44,0 0 20px #f44;
}

.module[type="bicolor led"] .ldiode[state="on"]{
    background: -moz-radial-gradient(center, ellipse cover, #ffffff 16%, #17ff00 100%);
    background: -webkit-radial-gradient(center, ellipse cover, #ffffff 16%, #17ff00 100%);
    background: radial-gradient(ellipse at center, #ffffff 16%, #17ff00 100%);
    box-shadow: 0 0 20px #39ff00,0 0 20px #08ff00;
}

.input[type*="boolean"] .inputstate{
  display:block;
  position:absolute;
  width:26px;
  height:26px;
  margin-top:7px;
  margin-left:7px;
  border-radius:50%;
  background-color:#d00;
  color:white;
  text-align:center;
  font-size:20px;
  line-height:26px;
  pointer-events:none;
}

.input[type="boolean toggle"] .inputstate{
  border-radius:10%; 
}

.input[type="boolean const0"]{
  background-color:#800;
}

.input[type="boolean const1"]{
  background-color:#070;
}

.input[type*="boolean"][value="0"] .inputstate{
  background-color:#f33;
}

.input[type*="boolean"][value="1"] .inputstate{
  background-color:#5d5;
}

.input[type*="boolean"] .inputstate:after{
  content:"0";
}

.input[type*="boolean"][value="1"] .inputstate:after{
  content:"1";
}

div[pos="right"]{
  position:absolute;
  top:50%;
  margin-top:-5px;
}

.gateinput[pos="right"]{
  right:-5px;
}

div[pos="left"]{
  position:absolute;
  top:50%; left:0;
  margin-top:-5px;
}

div[pos="top"]{
  position:absolute;
  top:0;
  left:50%;
  margin-left:-5px;
}

.gateinput[pos="top"]{
  top:-5px !important;
}

div[pos="bottom"]{
  position:absolute;
  top:initial;
  bottom:-15px;
  left:50%;
  margin-left:-5px;
}

.label{
  display:block;
  position:absolute;
  background-color:#333;
  outline:1px solid #666;
  min-width:40px;
  height:20px;
  margin-top:-10px;
  margin-left:-20px;
  font-size:15px;
  color:#eee;
  line-height:20px;
  text-align:center;
}

#context,.submenu{
  display:none;
  position:fixed;
  width:150px;
  min-height:30px;
  font-size:15px;
  line-height:30px;
  text-indent:10px;
  background:#eee;
  border:1px solid #aaa;
  /*box-shadow:0 0 1vw rgba(0,0,0,0.3);*/
  z-index:2000;
}

.contextitem,.submenuitem{
  display:block;
  position:relative;
  cursor:pointer;
}

.contextitem:hover,.submenuitem:hover{
  background:#ddd;
}

.submenuitem[selected]{
  background:#ddd;
}

.chevron{
  float:right;
  margin-right:10px;
  color:#888;
  font-size:10px;
}

#selectsquare{
  display:none;
  position:fixed;
  width:0;
  height:0;
  left:300px;
  background-color:rgba(100,175,255,0.3);
  outline:1px solid #39f;
  z-index:1000;
}

#selectsquare[style*="width:0"]{
  outline:none;
}

::-webkit-scrollbar {
  width: 10px;
  background-color:#444;
}

::-webkit-scrollbar-thumb {
  background: #777;
}

#shadow{
  display:none;
  position:fixed;
  background-color:rgba(0,0,0,0.8);
  width:100%;
  height:100%;
  z-index:10000;
  animation:fadein 700ms forwards 1;
  justify-content:center;
  align-items:center;
}

@keyframes fadein{
  from {background-color:transparent;}
}

.popup{
  display:none;
  position:absolute;
  width:60%;
  height:10vw;
  background-color:#111;
  z-index:10000;
  justify-content:center;
  animation:zoomin 300ms forwards 1;
  transform:scale(0);
  cursor:default;
}

@keyframes zoomin{
  to{
    transform:scale(1);
  }
}

.closebtn{
  display:block;
  position:absolute;
  width:2vw;
  height:2vw;
  background-color:#333;
  top:0.5vw;
  right:0.5vw;
  border-radius:10%;
  box-size:border-box;
  border:0.1vw solid #777;
  color:#777;
  cursor:pointer;
}

.closebtn:hover{
  border-color:#999;
  color:#999;
}

.closebtn:after{
  display:block;
  position:absolute;
  content:"✕";
  width:100%;
  height:100%;
  text-align:center;
  line-height:2.1vw;
  font-size:1.5vw;
}

.popuptitle{
  display:block;
  position:absolute;
  width:100%;
  height:3vw;
  text-align:center;
  line-height:3vw;
  font-size:1.3vw;
  color:#999;
  background-color:#191919;
}

#exportwrapper{
  display:block;
  position:absolute;
  width:95%;
  height:30%;
  left:2.5%;
  top:50%;
  overflow:hidden;
}

#exportfield{
  display:block;
  position:absolute;
  width:73%;
  height:100%;
  border:none;
  text-indent:2%;
  padding-right:2%;
  font-size:1.2vw;
  outline:none;
}

#exportfield::selection{
  background-color:rgba(0,0,0,0.2);
}

@keyframes succ{
  20%{background-color:#3f0;}
}

@keyframes fail{
  20%{background-color:#f30;}
}

#copybtn{
  display:block;
  position:absolute;
  right:0;
  width:22%;
  height:100%;
  border:none;
  cursor:pointer;
  background-color:#390;
  color:#ddd;
  font-size:1.2vw;
  box-sizing:border-box;
  border-bottom:0.25vw solid rgba(0,0,0,0.25);
  outline:none;
}

#copybtn:hover,.popupbtn:hover{
  background-color:#4a0;
}

#prompttext{
  display:block;
  position:absolute;
  top:4vw;
  color:#ccc;
  font-size:1.2vw;
}

#save{
  width:30%;
  height:9vw;
}

#saveas,#open{
  width:40%;
  height:24vw;
}

.popupbtn{
  display:flex;
  position:relative;
  height:2vw;
  line-height:2vw;
  flex-grow:1;
  flex-basis:10%;
  justify-content:center;
  margin:0.25vw;
  margin-bottom:0.5vw;
  background-color:#027;
  border:none;
  cursor:pointer;
  color:#ddd;
  background-color: #390;
  box-sizing: border-box;
  border-bottom: 0.25vw solid rgba(0,0,0,0.25);
  align-self:flex-end;
  font-size:1vw;
  outline:none;
}

.popupbtn:first-of-type{
  margin-left:0.5vw;
}

.popupbtn:last-of-type{
  margin-right:0.5vw;
}

.filewindow{
  display:block;
  position:absolute;
  width:39vw;
  height:14.5vw;
  left:0.5vw;
  top:3.5vw;
  background-color:#333;
  text-align:center;
  line-height:14.5vw;
  font-size:1.1vw;
  color:#888;
}

.searchfield{
  display:block;
  position:absolute;
  width:39vw;
  height:2.25vw;
  bottom:3vw;
  border:none;
  outline:none;
  background-color:#333;
  text-indent:0.5em;
  font-size:1.3vw;
  color:#eee;
}

.searchfield:focus{
  background-color:#444;
}

#maincontent[simulation="false"].select{cursor:default;} 
#maincontent[simulation="false"].draw{cursor:crosshair;}
#maincontent.move{cursor:move;}