body{
  background:#ccf;
  margin:0;
  overflow:hidden;
  font-family:Open Sans,Arial,sans-serif;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
}

#paint{
  display:flex;
  flex-direction:column;
  position:absolute;
  width:100%;
  height:100vh;
  max-height:100vh;
}

#paint > div{
  flex-shrink:0;
}

#topbar{
  height:25px;
  line-height:25px;
  background:white;
  border-bottom:1px solid #ddd;
}

.topbar-btn{
  position:relative;
  float:left;
  font-size:80%;
  padding:0 1em;
  border-right:1px solid #ddd;
  cursor:pointer;
}

.topbar-btn.selected{
  background:whitesmoke;
  padding-bottom:1px;
}

.hotkey-tip{
  float:right;
  color:#bbb;
}

#filebtn{
  background:#6666ff;
  color:white;
}

.tooltab {
  display:flex;
  align-items:center;
  width:100%;
  height:100px;
  background:whitesmoke;
  border-bottom:1px solid #ccc;
}

#righttools{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  float: left;
  margin: 0.2em 0 0 0.2em;
  height: 4.8em;
}

#imgmbox .tool:not(.bigbox){
  clear:both;
}

#toolbar > div{
  position:relative;
  float:left;
  flex-shrink:0;
}

#seldisplay {
  position:relative;
  width: 100%;
  height: 60%;
  pointer-events:none;
}

#selsvg * {
  fill: #eef;
  stroke: blue;
}

.selected #selsvg * {
  fill: #ddf;
}

#selselect {
  width: 100%;
  height: 40%;
  box-sizing: border-box;
  border-top: 1px solid #bbf;
  text-align: center;
  font-size: 75%;
  line-height: 1.75em;
}

#selselect span {
  border: 0.3em solid transparent;
  border-top-color: black;
  vertical-align: text-top;
}

#selselect:hover{
  background:#eef;
}

#imgmbox div:not(.standardtool) > svg {
  position: absolute;
  width: 72%;
  height: 90%;
  top: 5%;
  left: 14%;
  stroke-dasharray: 0.6,0.6;
  stroke: blue;
  fill: #eef;
  stroke-width: 0.2;
}

.standardtool svg {
  position: absolute;
  width: 90%;
  height: 90%;
  left: 5%;
  top: 5%;
  stroke-dasharray: none;
  stroke-width: 0.5;
  fill: none;
  stroke: #55f;
}

.spacer {
  height: 80%;
  background: #ddd;
  width: 1px;
  margin:0 0.6em;
}

#toolbox{
  width:4.5em;
}

.tool{
  position:relative;
  float:left;
  width:1.5em;
  height:1.5em;
  line-height:1.5em;
  text-align:center;
  box-sizing:border-box;
  border:1px solid transparent;
  cursor:default;
}

.tool:not(.pevents) > *{
  pointer-events:none;
}

.tool.selected{
  border-color: #55f;
  background:#ccf;
}

.tool:not(.selected):hover{
  background:#ddf;
  border-color:#bbf;
}

.tool:not(.standardtool) path, .tool circle {
  stroke: #55f;
  fill: #bbf;
}

.bigbox, .linesetting {
  width: 3.5em;
  position: relative;
  float: left;
  height: 4.8em;
  margin: 0.2em;
  border: 0.05em solid #ccc;
  background:white;
  cursor:pointer;
}

.bigbox.selected, .linesetting.selected {
  border-color: #99f;
  background: #eef;
}

.bigbox:not(.pevents) > *{
  pointer-events:none;
}

.bigbox:not(.selected):hover, .linesetting:hover{
  background:#fcfcff;
}

.colwrapper {
  position:relative;
  width: 3em;
  height: 3em;
  margin: 0.25em;
}

.colwrapper > div{
  position:absolute;
  width:100%;
  height:100%;
}

#switchbox {
  position: relative;
  float: left;
  width: 1.6em;
  height: 1em;
  margin: -0.8em;
  margin-top: 0.5em;
  z-index: 10;
  cursor: pointer;
}

#switchbox svg {
  fill: #eef;
  stroke: #99f;
  stroke-width: 0.7;
}

#switchbox:hover svg {
  fill: #ccf;
  stroke: #77f;
}

#maincol, #secondcol, #rainbowwrapper {
  background:black;
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,0.3);
}

.innerbox svg {
  fill: #66f;
}

#rainbowwrapper{
  background:transparent;
}

#rainbow{
  background:black;
  width:100%;
  height:100%;
}

#secondcol{
  background:transparent;
}

.coldesc {
  font-size: 75%;
  width: 100%;
  text-align: center;
  color: #555;
}

#shapebox .tool:nth-of-type(5n) + .tool{
  clear:both;
}

#boxwrapper{
  position: relative;
  float: left;
  width:17em;
  overflow: hidden;
  margin-right:10px;
}

.colorbox{
  position:relative;
  float:left;
  width:1.5em;
  height:1.5em;
  box-sizing:border-box;
  border:0.05em solid #ccc;
  margin:0.2em 0 0 0.2em;
  background:#eee;
  pointer-events:none;
}

.colorbox > div{
  pointer-events:none;
}

.colorbox[data-color]{
  background:white;
  pointer-events:auto;
}

.colorbox[data-color]:hover{
  background:#ccf;
}

.colorbox > div {
  width: 80%;
  height: 80%;
  margin: 10%;
  position: absolute;
  display:none;
}

.innercol{
  box-sizing:border-box;
  border:1px solid rgba(0,0,0,0.3);
  pointer-events:none;
}

.colorbox[data-color] > div{
  display:block;
}



#maincontent {
  position: relative;
  flex-grow: 1;
  flex-shrink: 1 !important;
  overflow: hidden;
}

#hor-ruler {
  width: 100%;
  height: 20px;
  border-bottom: 1px solid #ccc;
}

#vert-ruler {
  width: 20px;
  height: 100%;
  border-right: 1px solid #ccc;
}

.rulerbox{
  display:none;
}

body.rulers .rulerbox{
  display:block !important;
}

body.rulers .ruler{
  display:block !important;
  z-index: 1000;
  background: whitesmoke;
  box-sizing: border-box;
}

#rulernub{
  display: none;
  position: absolute;
  background: whitesmoke;
  width: 20px;
  height: 20px;
  z-index: 1100;
}

#ruler-line-hor{
  position:absolute;
  width:1px;
  height:19px;
  background:#ff9090;
  left:30px;
  z-index:1000;
}

#ruler-line-vert{
  position:absolute;
  width:19px;
  height:1px;
  background:#ff9090;
  top:30px;
  z-index:1000;
}

body.rulers #canvaswrapperwrapper{
  top:20px;
  left:20px;
}

body.rulers #rulernub {
  display:block;
}

canvas{
  position:absolute;
  width:100%;
  height:100%;
}

canvas:not(.ruler){
  image-rendering: -moz-crisp-edges;
  image-rendering: pixelated;
}

#maincanvas {
  box-shadow: 0.25rem 0.25rem 0.5rem rgba(0,0,0,0.1);
}

#canvaswrapperwrapper {
  height: 100%;
  width: 100%;
  position: absolute;
  overflow: auto;
}

#canvaswrapper{
  margin:10px;
  position:relative;
  width:600px;
  height:400px;
  cursor:default;
}

.moverect{
  position:absolute;
  width:20px;
  height:20px;
  margin:-10px;
  cursor:n-resize;
}

.moverect:after{
  content:"";
  display:block;
  position:absolute;
  width:4px;
  height:4px;
  left:50%;
  top:50%;
  margin:-3px;
  border:1px solid #55f;
  background:white;
  pointer-events:none;
}

.freemove {
  z-index: 100;
  cursor: move;
}

.moving .moverect, .unbounded .moverect{
  display:none;
}

.moverect[data-pos="1"]{left:50%;}
.moverect[data-pos="2"]{left:100%;}
.moverect[data-pos="3"]{left:100%; top:50%;}
.moverect[data-pos="4"]{left:100%; top:100%;}
.moverect[data-pos="5"]{left:50%; top:100%;}
.moverect[data-pos="6"]{top:100%;}
.moverect[data-pos="7"]{top:50%;}

.moverect[data-pos="0"],.moverect[data-pos="4"]{cursor:nwse-resize;}
.moverect[data-pos="2"],.moverect[data-pos="6"]{cursor:nesw-resize;}
.moverect[data-pos="3"],.moverect[data-pos="7"]{cursor:e-resize;}

.raster{
  background-position: 0 0, 6px 6px;
  background-size: 12px 12px;
  background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee 100%),linear-gradient(45deg, #eee 25%, white 25%, white 75%, #eee 75%, #eee 100%);
}

#resizemain{
  position:absolute;
  width:100%;
  height:100%;
  z-index:100;
  box-sizing:border-box;
  min-width:50px;
  min-height:50px;
}

#resizemain.resizing{
  border:1px dashed black;
}

.resizebox.decorated {
  position: absolute;
  z-index: 1000;
  min-width: 10px;
  min-height: 10px;
  cursor: move;
}

.resizebox.decorated.unbounded{
  min-width:0;
  min-height:0;
  cursor:default;
}

.resizebox.decorated:before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid white;
  margin: -1px;
  z-index: -10;
}

.resizebox.decorated:after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px dashed blue;
  margin: -1px;
  z-index: -5;
}

.tawrapper{
  position:absolute;
  width:100%;
  height:100%;
  overflow:hidden;
}

.resizebox textarea {
  position: absolute;
  width: 100%;
  height: 5000%;
  border: none;
  padding: 0;
  outline: none;
  background: transparent;
  resize: none;
  overflow: hidden;
  line-height:100%;
  color:inherit;
  font:inherit;
}

.selcanvas{
  position:absolute;
  width:100%;
  height:100%;
  pointer-events:none;
}

#infobar{
  display:flex;
  align-items:center;
  width:100%;
  height:1.7em;
  background:whitesmoke;
  border-top:1px solid #ccc;
}

.infoitem{
  display:flex;
  align-items:center;
  flex-grow:1;
  flex-basis:0;
  height:70%;
  font-size:80%;
  border-left:1px solid #ccc;
  padding-left:0.5em;
}

.infoitem:first-of-type{
  border:none;
}

.infoicon{
  width:1.3em;
  height:1.3em;
  stroke:#55f;
  stroke-width:0.7;
  fill:#ddf;
  margin-right:0.2em;
}

.extra.hidden{
  display:none;
}

.extra.hidden + .spacer{
  display:none;
}

#drawcursor {
  display:none;
  position: absolute;
  width: 20px;
  height: 20px;
  margin:-10px;
  border: 1px solid black;
  box-shadow:inset -1px 0 white, inset 1px 0 white, inset 0 -1px white, inset 0 1px white;
  pointer-events: none;
  opacity:0.6;
}

.extra select {
  display: block;
  position: relative;
  float: left;
  border-color: #ccc;
  box-sizing: border-box;
  margin: 0.15em;
  outline:none;
}

#fontsel {
  max-width: 12em;
  width: 12em;
}

#fontsize {
  width: 3.7em;
  clear: left;
}

#fontstyle {
  width: 8em;
}

/*--------------POPUPS--------------*/

#popupwrapper{
  display:none;
  position:fixed;
  width:100%;
  height:100%;
  z-index:10000;
}

.popup{
  display:none;
  position:absolute;
  background:whitesmoke;
  overflow:hidden;
  border-radius:5px;
  box-shadow: 0.25em 0.25em 0.5em rgba(0,0,0,0.2);
}

.popup.open{
  animation:zoomIn 200ms forwards 1;
  animation-delay:1ms;
  opacity:0;
}

.popup.close{
  animation:zoomIn 200ms forwards reverse 1;
  animation-delay:1ms;
  opacity:1;
}

.popupheader{
  position:relative;
  height:25px;
  width:100%;
  background:#444;
}

.popuptitle{
  height:100%;
  margin-right:25px;
  text-align:center;
  font-size:80%;
  color:white;
  line-height:25px;
  pointer-events:none;
}

.closebtn{
  position:absolute;
  top:0;
  right:0;
  width:25px;
  height:100%;
  background:#d00;
  cursor:pointer;
}

.closebtn svg{
  stroke:white;
  pointer-events:none;
}

.popupcontent{
  width:100%;
  min-width:100px;
  min-height:100px;
  overflow:hidden;
  padding: 10px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-top: none;
}

#shadewrapper {
  position: relative;
  float:left;
  border: 1px solid #ccc;
  width: 256px;
  height: 256px;
  overflow:hidden;
}

#shadebox{
  width:100%;
  height:100%;
  background:red;
}

#hue, #transparency{
  position: relative;
  float:left;
  border: 1px solid #ccc;
  width: 25px;
  height: 256px;
  margin-left:10px;
}

#shadebox > *, #hue > *, #transparency > *{
  pointer-events:none;
}

#shadecursor{
  position: absolute;
  width: 20px;
  height: 20px;
  margin: -10px;
  fill: none;
  stroke: white;
  stroke-width: 0.75;
  pointer-events: none;
}

.gradient{
  position:absolute;
  width:100%;
  height:100%;
}

#transp{
  background: -moz-linear-gradient(top, transparent 0%, black 100%);
  background: -webkit-linear-gradient(top, transparent 0%, black 100%);
  background: linear-gradient(to bottom, transparent 0%, black 100%);
}

#multicol{
  background: linear-gradient(to bottom, red 0%, yellow 16.66%, lime 33.33%, aqua 50%, blue 66.66%, fuchsia 83.33%, red 100%);
}

.shade{
  width: 100%;
  height: 100%;
  background:linear-gradient(to bottom, transparent 0%, black 100%),linear-gradient(to left, transparent 0%, white 100%);
}

.slidecursor{
  position: absolute;
  height: 1px;
  width: 100%;
  margin: -4px;
  border: 4px solid transparent;
  border-left-color: #999;
  border-right-color: #999;
}

#colright{
  position: relative;
  float: left;
  margin-left: 10px;
  height:258px;
  width:70px;
}

#resultbox {
  position:relative;
  width: 100%;
  height: 50px;
  border: 1px solid #ccc;
}

#colresult{
  width:100%;
  height:100%;
}

.rgbaval {
  position: relative;
  float: left;
  clear: both;
  margin-top: 5px;
  width: 100%;
  border: 1px solid #ccc;
  text-indent: 0.25em;
  padding: 2px 0;
  outline: none;
}

.rgbaval:focus, .popupbtn:focus {
  border-color: #aaa;
}

#bottombox{
  position:absolute;
  bottom:0;
  width:100%;
}

.popupbtn {
  position: relative;
  float:left;
  clear:both;
  margin-top:5px;
  width: 100%;
  background: #ddd;
  border: 1px solid #ccc;
  color: #555;
  font-size: 75%;
  padding: 5px;
  cursor: pointer;
  outline:none;
}

.popupbtn:hover{
  background:#e5e5e5;
}

.linesetting {
  width: 200px;
  padding: 10px;
  cursor: pointer;
  margin: 0 0 5px 0;
  height: auto;
  clear: both;
}

.linesetting.selected {
  background: #ddf;
}

.linesetting:last-of-type {
  margin: 0;
}

.line{
  background:#66f;
  pointer-events:none;
}

#tolerance .coldesc{
  font-size: 60%;
  margin-top: -0.2em;
  line-height:1em;
}

.popupcontent p {
  margin: 0 0 0.5em 0;
  font-size: 70%;
}

#tolerancebox {
  position: relative;
  width: 100%;
  height: 2em;
  background: #66f;
  margin: 0.5em 0 0.2em 0;
}

#tolright {
  position: absolute;
  width: 50%;
  height: 100%;
  background: rgb(152,152,255);
  right: 0;
}

#tolslider{
  width:100%;
  outline:none;
  margin:0;
}

#tolout {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  text-align: center;
  z-index: 1000;
  color: white;
  font-weight: bold;
  line-height: 2em;
}

.inputrow {
  display: flex;
  align-items: center;
  font-size: 70%;
}

.inputrow.spaced {
  justify-content: space-between;
  margin-top: 0.5em;
}

.spaced input {
  width: 4.5em;
}

#sizesettings .inputrow:last-of-type {
  margin-top: 0.5em;
}

#sizesettings .inputrow:first-of-type {
  margin-bottom: 0.7em;
}

#sizesettings input[type="checkbox"]{
  margin-left:0;
}

.popupcontent label {
  vertical-align: middle;
  line-height: 16px;
  padding-right:1em;
}

input + label{
  padding-left:0.3em;
}

.popupcontent input[type="radio"] {
  margin: 0;
}

.inputrow *:last-child {
  padding-right: 0;
}

.filewindow {
  width: 27.5em;
  height: 15em;
  background: white;
  border: 1px solid #ccc;
  padding: 0.25em;
  overflow:auto;
}

.inputwrapper {
  display: flex;
  margin-top: 0.5em;
}

.nameinput {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #ccc;
  padding: 0.25em;
  margin-right: 0.5em;
}

.inputwrapper .popupbtn {
  width: initial;
  margin: 0;
  padding: 0 1em;
}

#filewrapper {
  width: 100%;
  height: 100%;
}

.nofiles {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
  font-size: 80%;
  color: #999;
}

.file {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  float: left;
  width: 5em;
  height: 6em;
  background: #fafafa;
  margin: 0.25em;
  cursor: pointer;
}

.filethumb {
  position: relative;
  display: flex;
  width: 4.5em;
  height: 4.5em;
  margin: 0.25em 0;
  align-items: center;
  justify-content: center;
}

.title {
  display: block;
  position: relative;
  width: 80%;
  text-align: center;
  font-size: 70%;
  height: 1.5em;
  margin-top: -0.25em;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@keyframes zoomIn{
  from{
    -webkit-transform:scale(0.5);
    -moz-transform:scale(0.5);
    transform:scale(0.5);
  }
  to{
    -webkit-transform:scale(1);
    -moz-transform:scale(1);
    transform:scale(1);
    opacity:1;
  }
}

/*-------------------DROPDOWNS-------------------*/

.dropdown {
  position: fixed;
  top: 100px;
  width: auto;
  white-space: nowrap;
  z-index: 10000;
  background: white;
  border: 1px solid #ccc;
  font-size: 75%;
  cursor:default;
}

.dropdown.hidden{
  display:none;
}

#filedropdown{
  width:200px;
}

.dropdowntitle {
  background: #eee;
  font-weight: bold;
  padding: 0.1em 0.5em;
  border-bottom: 1px solid #ddd;
  padding-right: 3em;
}

.dropdownitem {
  height: 1.75em;
  line-height: 1.75em;
  padding-right: 0.5em;
}

#filedropdown .dropdownitem {
  height: 2em;
  line-height: 2em;
}

.dropdownitem.border {
  border-top:1px solid #eee;
}

.dropdownitem:hover {
  background: whitesmoke;
}

.dropdownicon {
  position: relative;
  width: 1.75em;
  height: 100%;
  float: left;
  margin-right: 0.5em;
  padding-right: 0.5em;
  border-right: 1px solid #ddd;
}

#rotdrop svg {
  stroke: none;
  fill: #ccc;
}

.blue {
  stroke: none;
  fill: #55f;
}

#cursors{
  position:fixed;
  pointer-events:none;
  width:100%;
  height:100%;
  font-size:1rem;
  z-index:10000;
}

#cursors > *{
  display:none;
}

#cur_dropper {
  position: absolute;
  width: 6em;
  height: 6em;
  margin:-3em;
  stroke-width:2;
  stroke:black;
  fill:none;
}

.crosshair{
  stroke:rgba(0,0,0,0.5);
  stroke-width:0.2;
  stroke-dasharray:0.2;
}

.crosshair + .crosshair{
  stroke-dashoffset:0.2;
  stroke:rgba(255,255,255,0.5);
}

#cur_free, #cur_erase{
  position:absolute;
  fill:none;
}

.dotted{
  stroke:black;
  stroke-dasharray:3.333%;
}

.dotted + .dotted{
  stroke-dashoffset:3.333%;
  stroke:white;
}

#zoom button {
  display: block;
  height: 1.4em;
  width: 1.4em;
  padding: 0;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  border: 1px solid #888;
  background: white;
  margin: 0 0.2em;
  box-sizing: content-box;
  flex-grow: 0;
}

#zoom button:hover{
  border-color:#aaa;
}

#zoom button:active{
  border-color:#bbb;
  background:whitesmoke;
}

#zoom {
  display: flex;
  align-items: center;
}

#zoomperc{
  width:3em;
  text-align:right;
  margin-right:0.25em;
}

input,button{
  outline:none;
}