html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: #505050;
  user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  -moz-user-select: none;
}

#tablet-api {
  position: absolute;
  top: -1000px;
}

#tools {
  width: 100%;
  display: flex;
  color: #ddd;
  background-color: #404040;
  overflow: auto;
}

#tools>* {
  padding-left: 7px;
  padding-right: 7px;
  border-right: 1px solid #353535;
  background-color: #606060;
  cursor: pointer;
  font-size: 14px;
  font-family: 'Nanum Gothic', sans-serif;
}

#tools>*:hover {
  background-color: #707070;
}

#brush-image-shelf {
  width: 150px;
  overflow: auto;
  z-index: 999;
}

#tool-box {
  width: 100px;
  display: flex;
  flex-direction: column;
  overflow: auto;
  z-index: 999;
}

#canvas-right-area {
  display: flex;
  height: 85dvh;
}

#canvas-area-container {
  display: inline-block;
  position: relative;
  width: 100dvw;
  overflow: auto;
  box-shadow: inset 0px 0px 20px #222;
}

#canvas-area {
  display: inline-block;
  cursor: crosshair;
}

#canvas-area>div {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jPHPmzH8GIoCxsTERqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl7NmzxOWUUQNxhtNoGOLOKYM+2QAAP85ny3vosXMAAAAASUVORK5CYII=");
  background-size: 10px 10px;
}

.croquis-layer-canvas {
  box-shadow: 5px 5px 5px #0001;
}

.croquis-dirty-rect-display {
  touch-action: pinch-zoom;
  background-image:
    linear-gradient(to right, #fff2 0.15px, transparent 0.2px),
    linear-gradient(to bottom, #fff2 0.15px, transparent 0.2px);
  background-size: 1px 1px;
}

#right-side {
  display: inline-block;
  vertical-align: top;
  width: 350px;
  overflow: auto;
}

#undo-redo {
  display: flex;
}

#undo-redo>* {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 50px;
  color: #ccc;
  border: 1px solid #35353550;
}

#undo-redo>*:active {
  background: #353535;
}

#undo {
  width: 100px;
  height: 100px;
}

#redo {
  width: 100px;
  height: 100px;
}

#color-picker {
  width: 200px;
  height: 200px;
  overflow: auto;
}

#color-picker-container {
  display: flex;
  flex-direction: row;
}

#color-picker:active {
  cursor: default;
}

#color-picker-sb {
  width: 150px;
  height: 150px;
  overflow: hidden;
  touch-action: none;
  position: relative;
}

#color-picker-white {
  width: 150px;
  height: 150px;
  background-color: #fff;
}

#color-picker-thumb {
  position: relative;
  margin-top: -7.5px;
  margin-left: -7.5px;
  width: 11px;
  height: 11px;
  border-radius: 7.5px;
  border-color: #fff;
  border-style: solid;
  border-width: 2px;
}

#color-picker-checker {
  width: 150px;
  height: 20px;
  display: inline-block;
  text-shadow: -1px 1px 1px #aaa;
  text-align: center;
}

#color-picker-color {
  margin: 0;
  height: 20px;
  color: #555;
  font-family: 'Nanum Gothic', sans-serif;
}

#color-picker-hue-slider {
  margin: 0;
  margin-left: 2px;
  width: 20px;
  height: 150px;
  writing-mode: vertical-lr;
  -webkit-appearance: none;
  background: linear-gradient(red, #f10, #f20, #f30, #f40, #f50, #f60, #f70, #f80, #f90, #fa0, #fb0, #fc0, #fd0, #fe0, #ff0, #ef0, #df0, #cf0, #bf0, #af0, #9f0, #8f0, #7f0, #6f0, #5f0, #4f0, #3f0, #2f0, #1f0, #0f0, #0f1, #0f2, #0f3, #0f4, #0f5, #0f6, #0f7, #0f8, #0f9, #0fa, #0fb, #0fc, #0fd, #0fe, #0ff, #0ef, #0df, #0cf, #0bf, #0af, #09f, #08f, #07f, #06f, #05f, #04f, #03f, #02f, #01f, #00f, #10f, #20f, #30f, #40f, #50f, #60f, #70f, #80f, #90f, #a0f, #b0f, #c0f, #d0f, #e0f, #f0f, #f0e, #f0d, #f0c, #f0b, #f0a, #f09, #f08, #f07, #f06, #f05, #f04, #f03, #f02, #f01);
  /* background: conic-gradient(red,#f10,#f20,#f30,#f40,#f50,#f60,#f70,#f80,#f90,#fa0,#fb0,#fc0,#fd0,#fe0,#ff0,#ef0,#df0,#cf0,#bf0,#af0,#9f0,#8f0,#7f0,#6f0,#5f0,#4f0,#3f0,#2f0,#1f0,#0f0,#0f1,#0f2,#0f3,#0f4,#0f5,#0f6,#0f7,#0f8,#0f9,#0fa,#0fb,#0fc,#0fd,#0fe,#0ff,#0ef,#0df,#0cf,#0bf,#0af,#09f,#08f,#07f,#06f,#05f,#04f,#03f,#02f,#01f,#00f,#10f,#20f,#30f,#40f,#50f,#60f,#70f,#80f,#90f,#a0f,#b0f,#c0f,#d0f,#e0f,#f0f,#f0e,#f0d,#f0c,#f0b,#f0a,#f09,#f08,#f07,#f06,#f05,#f04,#f03,#f02,#f01); */
}

#color-picker-hue-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 10px;
  border: 1px solid #0007;
  border-radius: 3px;
  background-color: #fff5;
  overflow: visible;
  cursor: pointer;
}

#brush-opacity-slider {
  writing-mode: vertical-lr;
  rotate: 180deg;
  -webkit-appearance: none;
  height: 150px;
  margin: 0;
  border-radius: 3px;
}

#brush-opacity-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 20px;
  height: 10px;
  border: 1px solid #0007;
  border-radius: 3px;
  background-color: #fff5;
  cursor: pointer;
}

#brush-opacity-slider-checker {
  margin-left: 2px;
  border-radius: 3px;
  width: 20px;
  height: 150px;
}

#circle-brush {
  background-image: url("../img/brush/circle.png");
  background-size: 80%;
  background-repeat: no-repeat;
  background-position: center;
  width: 30px;
  height: 30px;
  display: inline-block;
}

.brush-pointer {
  position: absolute;
  font-size: 0;
  pointer-events: none;
  z-index: 9999;
}

.brush-image {
  height: 30px;
  width: auto;
  filter: invert(100%) grayscale(100%);
  border: .5px solid #ccc;
  border-bottom: 1px solid #777;
  cursor: pointer;
  padding: 5px;
  margin: 2px;
}

.brush-image.on {
  border-bottom: 1px solid #000;
}

#add-brush-button {
  margin-left: 5px;
  margin-bottom: 2px;
  border: .5px solid #777;
  border-bottom: 1px solid #333;
  background-color: transparent;
  color: #fff;
}

#add-brush-button:active {
  border-bottom: 1px solid #fff;
}

input[type="checkbox"]#select-brush-checkbox::after {
  content: '🖌';
  transform: rotate(-10deg);
  margin-top: 1px;
}

input[type="checkbox"]#select-brush-checkbox:checked::after {
  text-shadow: 1px 1px 2px #ffffff;
}

input[type="checkbox"]#select-eraser-checkbox::after {
  content: '◧';
  font-size: 12px;
  transform: rotate(-45deg) scale(1.5, 1);
  margin-top: 6px;
  margin-left: -1px;
}

input[type="checkbox"]#select-eraser-checkbox:checked::after {
  text-shadow: 1px 1px 2px #ffffff;
}

input[type="checkbox"]#select-flood-fill-checkbox::after {
  content: '🛢';
  margin-top: -2px;
  margin-left: -2px;
  font-size: 20px;
  transform: rotate(-45deg) scale(1, 0.8);
}

input[type="checkbox"]#select-flood-fill-checkbox:checked::after {
  text-shadow: 1px 1px 2px #ffffff;
}

input[type="checkbox"]#select-bounding-box-checkbox::after {
  content: '⿴';
  margin-top: 2px;
  margin-left: -1px;
  font-size: 20px;
}

input[type="checkbox"]#select-bounding-box-checkbox:checked:after {
  text-shadow: 1px 1px 2px #ffffff;
}

#select-layers-board {
  display: flex;
  flex-direction: column;
}

#select-layers-board>* {
  background: #eeeeee;
  width: 200px;
  height: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
}

#select-layers-board>.on {
  background: #6b6b6b;
}

#small-layer {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAAXNSR0IArs4c6QAAAEBJREFUOE9jPHPmzH8GIoCxsTERqhgYGEcNxBlOo2GIM2iGQLL5//8/UTnl7NmzxOWUUQNxhtNoGOLOKYM+2QAAP85ny3vosXMAAAAASUVORK5CYII=");
  background-size: 5px 5px;
}

#select-layers-board>button:not(:last-child) {
  display: flex;
  justify-content: start;
}

#select-layers-board>button>p {
  order: 1;
  margin-left: 10%;
}

#select-layers-board>button>img {
  order: 0;
}

#bottom-layer-tools {
  background: #606060;
  display: flex;
  justify-content: start;
}

#bottom-layer-tools>button {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 1px 1px 2px #353535;
  border: 0;
  margin: 2px;
  border-radius: 5px;
}

#bottom-layer-tools>button:active {
  box-shadow: inset 1px 1px 2px #353535;
}

span {
  font-size: 12pt;
  font-family: 'Nanum Gothic', sans-serif;
}

.comment {
  font-size: 9pt;
  font-family: 'Nanum Gothic', sans-serif;
}

#bounding-rect {
  /* border: 1px dashed #ff5c5c; */
  background: linear-gradient(90deg, #ff5c5c 50%, transparent 50%), linear-gradient(90deg, #ff5c5c 50%, transparent 50%), linear-gradient(0deg, #ff5c5c 50%, transparent 50%), linear-gradient(0deg, #ff5c5c 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 5px 1px, 5px 1px, 1px 5px, 1px 5px;
  animation: border-dance 20s infinite linear;
}

@keyframes border-dance {
  0% {
    background-position: 0 0, 100% 100%, 0 100%, 100% 0;
  }

  100% {
    background-position: 100% 0, 0 100%, 0 0, 100% 100%;
  }
}

#bounding-rect:active {
  background: linear-gradient(90deg, #ff5c5c70 50%, transparent 50%), linear-gradient(90deg, #ff5c5c70 50%, transparent 50%), linear-gradient(0deg, #ff5c5c70 50%, transparent 50%), linear-gradient(0deg, #ff5c5c70 50%, transparent 50%);
  background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
  background-size: 5px 1px, 5px 1px, 1px 5px, 1px 5px;
  animation: border-dance 20s infinite linear;
}

.svg-option-base {
  position: fixed;
  left: 0;
  top: 0;
  background: #505050;
  width: 100dvw;
  height: 100dvh;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.preview-svg {
  width: 50dvw;
  height: 300px;
  overflow: auto;
  background-color: #353535;
  padding: 10px;
}

.svg-input-scale {
  width: 100%;
}