:root {
  --main-2-color: #fafafb;
  --main-3-color: white;
  --main-1-color: #f2f2ed;
  --main-color: #08083f;
  --main-line: #eeeee6;
  --int-line-color: #e6e6e6;
  --grid-color: #e6e6e6;
  --sub-menu-color: #f6f6f6;
  --map-color: #ffffff;
  --credit: #70707e;
  --sha-color: rgba(0, 0, 0, 0.12);
  --small-l-color: #727171;
  --side-menu-hover: #ffffff;
  --section-1-color: #FFD00D;
  --section-1-sub-color: #FFE060;
  --section-1-s-sub-color: #f8f4e4;
  --section-2-color: #FF762E;
  --section-2-sub-color: #FF935A;
  --section-2-s-sub-color: #f8eee8;
  --section-3-color: #e1dfd4;
  --section-3-sub-color: #ebe9de;
  --section-3-s-sub-color: #f5f4ec;
  --section-4-color: #42e4f9;
  --section-4-sub-color: #64ADFF;
  --section-4-s-sub-color: #e6eef7;
  --section-5-color: #32e886;
  --section-5-sub-color: #71fbb1;
  --section-5-s-sub-color: #e5f7ed;
  --tag-color: #596c7d;
  --tag-b-color: aliceblue;
  --grid-size: 10px;
  --glyph-size: 64px;
  --grid-pixel: #f0f8ff;
  --grid-ota: #b7dbe8;
  --grid-center: #0495a8;
  --pad: #d6fdfd;
  --elem: #e8f5f5;
  --elem-h: #86c6c6;
  --elem-s: #105c5c;
  --stroke-w: 4;
}
body {
  background-color: var(--main-2-color);
}
h2 {
  text-transform: uppercase;
  font-size: 14px;
  margin-top: 10px;
  margin-bottom: 5px;
}
.zone-group {
  background-color: #ffffff;
  padding: 5px;
  border-radius: 15px;
  margin-bottom: 5px;
}
.zone {
  width: 20px;
  height: 20px;
  border-radius: 10px;
  background-color: #6ecdcd;
  color: white;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.zone.float {
  position: absolute;
  left: 4px;
  top: 4px;
}
.container {
  width: 100vw;
  height: 100vh;
  padding: 40px;
  display: flex;
  gap: 40px;
}
.container .maker {
  width: fit-content;
  height: fit-content;
  background-color: white;
  border-radius: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  display: flex;
  position: relative;
}
.container .maker .maker-info {
  margin-left: 10px;
}
.container .menu,
.container .maker-info {
  width: 300px;
  min-width: 300px;
  height: 100%;
  border-radius: 10px;
}
.container .menu h1,
.container .maker-info h1 {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 20px;
}
.container .menu h1 span,
.container .maker-info h1 span {
  font-size: 12px;
  font-weight: 100;
}
.container .menu .btn-c,
.container .maker-info .btn-c {
  display: flex;
  gap: 3px;
  flex-wrap: wrap;
}
.container .menu .btn-c button:disabled div,
.container .maker-info .btn-c button:disabled div {
  opacity: 0.5;
}
.container .menu .option-tool,
.container .maker-info .option-tool {
  display: none;
  margin-top: 3px;
}
.container .menu .option-tool.actived,
.container .maker-info .option-tool.actived {
  display: block;
}
.container .menu button,
.container .maker-info button {
  border: 1px solid grey;
  border-radius: 10px;
  cursor: pointer;
  padding: 3px;
  height: 40px;
  font-size: 10px;
  letter-spacing: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: 0.12s ease-in;
}
.container .menu button.actived,
.container .maker-info button.actived,
.container .menu button:hover.actived,
.container .maker-info button:hover.actived {
  background-color: var(--grid-center);
  color: white;
}
.container .menu button.actived div,
.container .maker-info button.actived div,
.container .menu button:hover.actived div,
.container .maker-info button:hover.actived div {
  background-color: white;
}
.container .menu button.s50,
.container .maker-info button.s50 {
  width: 40px;
}
.container .menu button.s100,
.container .maker-info button.s100 {
  width: 50px;
}
.container .menu button .shape,
.container .maker-info button .shape {
  width: 100%;
  height: 100%;
  background-color: black;
  mask-repeat: no-repeat;
  mask-position: left;
}
.container .menu button .shape.ss,
.container .maker-info button .shape.ss {
  min-width: 200%;
  min-height: 200%;
}
.container .menu button .shape.ss.s1,
.container .maker-info button .shape.ss.s1 {
  transform: rotate(90deg);
}
.container .menu button .shape.ss.s2,
.container .maker-info button .shape.ss.s2 {
  transform: rotate(180deg);
}
.container .menu button .shape.ss.s3,
.container .maker-info button .shape.ss.s3 {
  transform: rotate(270deg);
}
.container .menu button .shape.none,
.container .maker-info button .shape.none {
  mask-image: url(/assets/none.svg);
}
.container .menu button .shape.s1,
.container .maker-info button .shape.s1 {
  mask-image: url(/assets/1.svg);
}
.container .menu button .shape.s2,
.container .maker-info button .shape.s2 {
  mask-image: url(/assets/2.svg);
}
.container .menu button .shape.s3,
.container .maker-info button .shape.s3 {
  mask-image: url(/assets/3.svg);
}
.container .menu button .shape.s4,
.container .maker-info button .shape.s4 {
  mask-image: url(/assets/4.svg);
}
.container .menu button .shape.s5,
.container .maker-info button .shape.s5 {
  mask-image: url(/assets/5.svg);
}
.container .menu button .shape.s6,
.container .maker-info button .shape.s6 {
  mask-image: url(/assets/6.svg);
}
.container .menu button .shape.s7,
.container .maker-info button .shape.s7 {
  mask-image: url(/assets/7.svg);
}
.container .menu button .shape.s8,
.container .maker-info button .shape.s8 {
  mask-image: url(/assets/8.svg);
}
.container .menu button .shape.s9,
.container .maker-info button .shape.s9 {
  mask-image: url(/assets/9.svg);
}
.container .menu button .shape.s10,
.container .maker-info button .shape.s10 {
  mask-image: url(/assets/10.svg);
}
.container .menu button .shape.s11,
.container .maker-info button .shape.s11 {
  mask-image: url(/assets/11.svg);
}
.container .menu button .shape.sd1,
.container .maker-info button .shape.sd1 {
  mask-image: url(/assets/d1.svg);
}
.container .menu button .shape.sd2,
.container .maker-info button .shape.sd2 {
  mask-image: url(/assets/d2.svg);
}
.container .menu button .shape.sd3,
.container .maker-info button .shape.sd3 {
  mask-image: url(/assets/d3.svg);
}
.container .menu button .shape.sd4,
.container .maker-info button .shape.sd4 {
  mask-image: url(/assets/d4.svg);
}
.container .menu button .shape.sd5,
.container .maker-info button .shape.sd5 {
  mask-image: url(/assets/d5.svg);
}
.container .menu button .shape.sd6,
.container .maker-info button .shape.sd6 {
  mask-image: url(/assets/d6.svg);
}
.container .menu button .shape.sd7,
.container .maker-info button .shape.sd7 {
  mask-image: url(/assets/d7.svg);
}
.container .menu button:hover,
.container .maker-info button:hover {
  background-color: white;
}
.container .menu .export .export-group,
.container .maker-info .export .export-group {
  display: flex;
  justify-content: space-between;
  gap: 5px;
}
.container .menu .export .export-group #fileName,
.container .maker-info .export .export-group #fileName {
  min-width: 110px;
  width: 100%;
  padding-left: 10px;
  font-weight: 100;
  background-color: transparent;
  border: 1px solid var(--int-line-color);
  border-radius: 10px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
  height: 36px;
}
.container .menu .export .export-group button,
.container .maker-info .export .export-group button {
  height: 40px;
  min-width: 144px;
  width: 100%;
  background-color: black;
  border-color: black;
  color: white;
}
.container .menu .export .export-group button div,
.container .maker-info .export .export-group button div {
  height: 100%;
  width: 34px;
  background-color: white;
  mask-repeat: no-repeat;
  mask-image: url(/assets/download.svg);
  transition: 0.12s ease-in;
}
.container .menu .export .export-group button:hover,
.container .maker-info .export .export-group button:hover {
  background-color: var(--grid-center);
  border-color: var(--grid-center);
}
.container .menu .export .export-group button:hover div,
.container .maker-info .export .export-group button:hover div {
  transform: translateY(2px);
}
.container .menu .export .export-group button:active,
.container .maker-info .export .export-group button:active {
  background-color: var(--pad);
  border-color: var(--pad);
  color: var(--grid-center);
  transform: translateY(2px);
}
.container .menu .export .export-group button:active div,
.container .maker-info .export .export-group button:active div {
  background-color: var(--grid-center);
}
.container .legend-x {
  pointer-events: none;
  display: flex;
  position: absolute;
  left: 0;
  top: -20px;
}
.container .legend-x div {
  font-size: 8px;
  padding-left: 3px;
  height: 17px;
  border-left: 1px solid var(--grid-ota);
  color: var(--grid-center);
  width: calc(var(--grid-size) * 2);
}
.container .legend-x div span {
  margin-right: 1px;
  text-transform: uppercase;
  font-size: 6px;
}
.container .legend-y {
  pointer-events: none;
  left: -20px;
  top: 0px;
  display: flex;
  flex-direction: column;
  position: absolute;
}
.container .legend-y div {
  border-top: 1px solid var(--grid-ota);
  padding-top: 3px;
  text-transform: uppercase;
  font-size: 8px;
  text-align: center;
  color: var(--grid-center);
  height: calc(var(--grid-size) * 2);
}
.container .legend-y div span {
  margin-right: 1px;
  text-transform: uppercase;
  font-size: 6px;
}
.container .arbo-container {
  width: 100%;
  border: 1px solid var(--grid-center);
  padding: 5px;
  margin-top: 5px;
  max-height: 551px;
  overflow-y: scroll;
}
.container .arbo-container .element-group {
  margin-bottom: 1px;
  background-color: var(--elem);
  border-radius: 3px;
  display: flex;
  align-items: center;
  position: relative;
  transition: 0.1s linear;
  height: 30px;
}
.container .arbo-container .element-group:hover {
  background-color: var(--elem-h);
  cursor: pointer;
}
.container .arbo-container .element-group:hover .name {
  color: white;
}
.container .arbo-container .element-group.actived {
  background-color: var(--elem-s);
}
.container .arbo-container .element-group.actived .name {
  color: white;
}
.container .arbo-container .element-group .picto {
  width: 20px;
  height: 20px;
}
.container .arbo-container .element-group .picto.s1 {
  mask-image: url(/assets/1.svg);
}
.container .arbo-container .element-group .picto.s2 {
  mask-image: url(/assets/2.svg);
}
.container .arbo-container .element-group .picto.s3 {
  mask-image: url(/assets/3.svg);
}
.container .arbo-container .element-group .picto.s4 {
  mask-image: url(/assets/4.svg);
}
.container .arbo-container .element-group .picto.s5 {
  mask-image: url(/assets/5.svg);
}
.container .arbo-container .element-group .picto.s6 {
  mask-image: url(/assets/6.svg);
}
.container .arbo-container .element-group .picto.s7 {
  mask-image: url(/assets/7.svg);
}
.container .arbo-container .element-group .picto.s8 {
  mask-image: url(/assets/8.svg);
}
.container .arbo-container .element-group .picto.s9 {
  mask-image: url(/assets/9.svg);
}
.container .arbo-container .element-group .picto.s10 {
  mask-image: url(/assets/10.svg);
}
.container .arbo-container .element-group .picto.s11 {
  mask-image: url(/assets/11.svg);
}
.container .arbo-container .element-group .picto.t1 {
  mask-image: url(/assets/d1.svg);
}
.container .arbo-container .element-group .picto.t2 {
  mask-image: url(/assets/d2.svg);
}
.container .arbo-container .element-group .picto.t3 {
  mask-image: url(/assets/d3.svg);
}
.container .arbo-container .element-group .picto.t4 {
  mask-image: url(/assets/d4.svg);
}
.container .arbo-container .element-group .picto.t5 {
  mask-image: url(/assets/d5.svg);
}
.container .arbo-container .element-group .picto.t6 {
  mask-image: url(/assets/d6.svg);
}
.container .arbo-container .element-group .picto.t7 {
  mask-image: url(/assets/d7.svg);
}
.container .arbo-container .element-group .picto div {
  width: 100%;
  height: 100%;
  background-color: black;
  mask-repeat: no-repeat;
  mask-position: left;
}
.container .arbo-container .element-group .name {
  margin-left: 10px;
  font-size: 12px;
  user-select: none;
}
.container .arbo-container .element-group button {
  position: absolute;
  border: 0px;
  border-radius: 0px;
  right: 0px;
  font-size: 10px;
  text-transform: uppercase;
  padding-right: 6px;
  padding-left: 6px;
  height: 100%;
  border-left: 1px solid white;
  transition: 0.1s linear;
  cursor: pointer;
}
.container .arbo-container .element-group button:hover {
  background-color: orangered;
  color: white;
}
.container .svg-container {
  width: 300px;
  border: 1px solid var(--grid-center);
  margin-top: 10px;
  margin-left: 10px;
  min-height: 100px;
  font-size: 10px;
  padding: 10px;
  display: none;
}
.container .simulator-container {
  display: flex;
  column-gap: 10px;
  margin-top: 10px;
}
.container .simulator-container .sim {
  border: 1px solid var(--grid-center);
  position: relative;
  margin-top: 20px;
}
.container .simulator-container .sim:before {
  position: absolute;
  top: -12px;
  font-size: 8px;
}
.container .simulator-container .sim.size-1 {
  width: calc(var(--glyph-size) / 4);
  height: calc(var(--glyph-size) / 4);
}
.container .simulator-container .sim.size-1:before {
  content: "16px";
}
.container .simulator-container .sim.size-2 {
  width: calc(var(--glyph-size) / 3);
  height: calc(var(--glyph-size) / 3);
}
.container .simulator-container .sim.size-2:before {
  content: "21px";
}
.container .simulator-container .sim.size-3 {
  width: calc(var(--glyph-size) / 2);
  height: calc(var(--glyph-size) / 2);
}
.container .simulator-container .sim.size-3:before {
  content: "32px";
}
.container .simulator-container .sim.size-4 {
  width: calc(var(--glyph-size) / 1);
  height: calc(var(--glyph-size) / 1);
}
.container .simulator-container .sim.size-4:before {
  content: "64px";
}
.container .grid-container {
  margin-left: 30px;
  top: 30px;
  margin-bottom: 30px;
  position: relative;
  width: fit-content;
  height: fit-content;
}
.container .grid-container:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: calc(100% - 2px);
  height: calc(100% - 2px);
  border: 1px solid var(--grid-center);
  z-index: 20;
}
.container .grid-container svg {
  z-index: 20;
  position: absolute;
  pointer-events: none;
}
.container .grid-container svg polygon.ctodelete,
.container .grid-container svg circle.dot.ctodelete {
  fill: orangered;
  stroke: transparent;
}
.container .grid-container svg rect.ctodelete,
.container .grid-container svg circle.ctodelete,
.container .grid-container svg path.ctodelete,
.container .grid-container svg polyline.ctodelete,
.container .grid-container svg line.ctodelete {
  stroke: orangered;
}
.container .grid-container svg.o50 rect,
.container .grid-container svg.o50 circle,
.container .grid-container svg.o50 path,
.container .grid-container svg.o50 polygon,
.container .grid-container svg.o50 polyline,
.container .grid-container svg.o50 line {
  opacity: 0.5;
}
.container .grid-container .grid-selector {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 40;
  padding-left: calc(var(--grid-size) - 0px);
  padding-top: calc(var(--grid-size) - 1px);
}
.container .grid-container .grid-selector.on .selector:after {
  display: none;
}
.container .grid-container .grid-selector.t1 .selector:after,
.container .grid-container .grid-selector.t2 .selector:after,
.container .grid-container .grid-selector.t5 .selector:after,
.container .grid-container .grid-selector.t6 .selector:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: calc((var(--grid-size) * var(--stroke-w) / -2) + var(--grid-size) + 1px);
  left: calc(((var(--grid-size) * var(--stroke-w)) / -2) + var(--grid-size));
  width: calc((var(--grid-size) * var(--stroke-w)) + 0px);
  height: calc((var(--grid-size) * var(--stroke-w)) + 0px);
  border-radius: 50%;
  background-color: var(--grid-center);
  opacity: 0;
  z-index: 1;
}
.container .grid-container .grid-selector.t62 .detect:after {
  pointer-events: none;
  content: "";
  position: absolute;
  top: calc((var(--grid-size) * var(--stroke-w) / -2) + var(--grid-size) + 1px);
  left: calc(((var(--grid-size) * var(--stroke-w)) / -2) + var(--grid-size));
  width: calc((var(--grid-size) * var(--stroke-w)) + 0px);
  height: calc((var(--grid-size) * var(--stroke-w)) + 0px);
  border-radius: 50%;
  background-color: var(--grid-center);
  opacity: 0;
  z-index: 1;
}
.container .grid-container .grid-selector.t3 .selector:after {
  pointer-events: none;
  content: "";
  position: absolute;
  mask-repeat: no-repeat;
  mask-position: left;
  mask-image: url(/assets/dd3.svg);
  background-color: var(--grid-center);
  opacity: 0;
  z-index: 1;
  width: 80px;
  left: -70px;
  top: -49px;
  height: 120px;
}
.container .grid-container .grid-selector.t3.t0 .selector:after {
  transform: rotate(0deg);
}
.container .grid-container .grid-selector.t3.t90 .selector:after {
  transform: rotate(90deg);
  transform-origin: right;
}
.container .grid-container .grid-selector.t3.t180 .selector:after {
  transform: rotate(180deg);
  transform-origin: right;
}
.container .grid-container .grid-selector.t3.t270 .selector:after {
  transform: rotate(270deg);
  transform-origin: right;
}
.container .grid-container .grid-selector.t4.s1 .selector:after {
  mask-image: url(/assets/dd4-1.svg);
}
.container .grid-container .grid-selector.t4.s2 .selector:after {
  mask-image: url(/assets/dd4-2.svg);
}
.container .grid-container .grid-selector.t4.s3 .selector:after {
  mask-image: url(/assets/dd4-3.svg);
}
.container .grid-container .grid-selector.t4.s4 .selector:after {
  mask-image: url(/assets/dd4-4.svg);
}
.container .grid-container .grid-selector.t4.s5 .selector:after {
  mask-image: url(/assets/dd4-5.svg);
  z-index: 1;
  width: 110px;
  left: -75px;
  top: -74px;
  height: 170px;
}
.container .grid-container .grid-selector.t4.s5.r90 .selector:after {
  left: -99px;
  top: -50px;
}
.container .grid-container .grid-selector.t4.s5.r180 .selector:after {
  left: -125px;
}
.container .grid-container .grid-selector.t4.s5.r270 .selector:after {
  left: -99px;
  top: -99px;
}
.container .grid-container .grid-selector.t4 .selector:after {
  pointer-events: none;
  content: "";
  position: absolute;
  mask-repeat: no-repeat;
  mask-position: left;
  background-color: var(--grid-center);
  opacity: 0;
  z-index: 1;
  width: 100px;
  left: -70px;
  top: -69px;
  height: 160px;
}
.container .grid-container .grid-selector.t4.r0 .selector:after {
  transform: rotate(0deg);
}
.container .grid-container .grid-selector.t4.r90 .selector:after {
  transform: rotate(90deg);
  transform-origin: right;
  left: -90px;
  top: -50px;
}
.container .grid-container .grid-selector.t4.r180 .selector:after {
  transform: rotate(180deg);
  transform-origin: right;
  left: -110px;
}
.container .grid-container .grid-selector.t4.r270 .selector:after {
  transform: rotate(270deg);
  transform-origin: right;
  left: -90px;
  top: -89px;
}
.container .grid-container .grid-selector .selector {
  width: calc(var(--grid-size) * 2);
  height: calc(var(--grid-size) * 2);
  cursor: pointer;
  position: relative;
}
.container .grid-container .grid-selector .selector.detect:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: calc(var(--grid-size) / 2);
  left: calc((var(--grid-size) + 0.5px) / 2);
  width: calc(var(--grid-size) + 1px);
  height: calc(var(--grid-size) + 1px);
  border-radius: 50%;
  background-color: var(--grid-center);
  opacity: 0.7;
  z-index: 2;
}
.container .grid-container .grid-selector .selector.detect:hover:before {
  opacity: 1;
  background-color: black;
}
.container .grid-container .grid-selector .selector .value {
  position: absolute;
  left: 20px;
  top: 15px;
  width: 50px;
  padding: 4px;
  border-radius: 3px;
  background-color: var(--grid-center);
  opacity: 0;
  z-index: 100;
  pointer-events: none;
  font-size: 10px;
  color: white;
}
.container .grid-container .grid-selector .selector:before {
  pointer-events: none;
  content: "";
  position: absolute;
  top: calc(var(--grid-size) / 2);
  left: calc((var(--grid-size) + 0.5px) / 2);
  width: calc(var(--grid-size) + 1px);
  height: calc(var(--grid-size) + 1px);
  border-radius: 50%;
  background-color: black;
  opacity: 0;
  z-index: 2;
}
.container .grid-container .grid-selector .selector:hover:before {
  opacity: 1;
}
.container .grid-container .grid-selector .selector:hover:after {
  opacity: 0.7;
}
.container .grid-container .grid-selector .selector:hover .value {
  opacity: 1;
}
.container .grid-container .grid-guide {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  border: 1px solid var(--grid-center);
  z-index: 3;
}
.container .grid-container .grid-guide:before {
  content: "";
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  border-bottom: 1px solid var(--grid-center);
  z-index: 2;
}
.container .grid-container .grid-guide:after {
  content: "";
  position: absolute;
  left: calc(50%);
  height: 100%;
  top: 0;
  border-right: 1px solid var(--grid-center);
  z-index: 2;
}
.container .grid-container .grid-guide .gridota {
  z-index: 1;
  position: relative;
  width: fit-content;
  height: fit-content;
  margin-left: -1px;
  margin-top: -1px;
}
.container .grid-container .grid-guide .cellota {
  position: relative;
  z-index: 1;
  width: calc(var(--grid-size) * 4);
  height: calc(var(--grid-size) * 4);
  border-left: 1px solid var(--grid-ota);
  border-bottom: 1px solid var(--grid-ota);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.container .grid-container .grid-guide .cellota:before {
  content: "";
  position: absolute;
  transform: rotate(45deg);
  width: 200%;
  border-bottom: 1px solid var(--grid-ota);
  z-index: 2;
}
.container .grid-container .grid-guide .cellota:after {
  content: "";
  position: absolute;
  transform: rotate(-45deg);
  width: 200%;
  border-bottom: 1px solid var(--grid-ota);
  z-index: 2;
}
.container .grid-container .grid {
  pointer-events: none;
  position: relative;
  z-index: 1;
}
.container .grid-container .row {
  position: relative;
  display: flex;
}
.container .grid-container .row .cell {
  border-left: 1px solid var(--grid-color);
  border-bottom: 1px solid var(--grid-color);
  width: var(--grid-size);
  height: var(--grid-size);
}
.container .grid-container .row .cell.pad {
  background-color: var(--pad);
}