:root {
  --font-size: 16;
  --line-height: 20;
  --accent-color: #01a7df;
  --accent-color-dark1: #0079bb;
  --accent-color-dark2: #004c97;
  --accent-color-light: #e6f9ff;
  --accent-contrast-color: #fff;
  --danger-color: #df4000;
  --danger-color-dark1: #bb3000;
  --danger-color-dark2: #972000;
  --draw-border-color: #fff;
  --draw-background-color: #e4e4e4;
  --draw-background-icon-color: #fff;
  --draw-background-shadow-color: #0002;
  --toolbar-button-back-color: #fff;
  --toolbar-button-icon-color: #fff;
  --toolbar-button-inactive-color: #888;
  --cursor-back-color: #fff;
  --cursor-erase-color1: #888;
  --cursor-erase-color2: #444;
  --guide-color: #fff;
  --shadow-color: #0004;
  --shadow-color-dark: #0008;
  --background-color: #fff;

  --transition-duration-short: 0.125s;
  --transition-duration-medium: 0.25s;
  --transition-duration-long: 0.5s;

  height: 100%;
  font-family: Arial, Helvetica, sans-serif;
  font-size: calc(1px * var(--font-size));
  line-height: calc(var(--line-height) / var(--font-size));
}
:root,
body {
  overscroll-behavior: none;
  touch-action: none;
}
body {
  height: 100%;
  border: 0;
  padding: 0;
  margin: 0;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-flow: column nowrap;
  background-color: var(--background-color);
}

/* Debug */
.debug {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  pointer-events: none;
}
.debug>* {
  pointer-events: all;
}

/* Icons */
.icon {
  --icon-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-mode: alpha;
  -webkit-mask-size: var(--icon-size);
  -webkit-mask-image: none;
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-mode: alpha;
  mask-size: var(--icon-size);
  mask-image: none;
}
.icon[data-icon=brush-size-large] {
  -webkit-mask-image: url(../images/icons/brush-size-large.svg);
  mask-image: url(../images/icons/brush-size-large.svg);
}
.icon[data-icon=brush-size-medium] {
  -webkit-mask-image: url(../images/icons/brush-size-medium.svg);
  mask-image: url(../images/icons/brush-size-medium.svg);
}
.icon[data-icon=brush-size-small] {
  -webkit-mask-image: url(../images/icons/brush-size-small.svg);
  mask-image: url(../images/icons/brush-size-small.svg);
}
.icon[data-icon=eraser] {
  -webkit-mask-image: url(../images/icons/eraser.svg);
  mask-image: url(../images/icons/eraser.svg);
}
.icon[data-icon=paint-brush] {
  -webkit-mask-image: url(../images/icons/paint-brush.svg);
  mask-image: url(../images/icons/paint-brush.svg);
}
.icon[data-icon=trash-can] {
  -webkit-mask-image: url(../images/icons/trash-can.svg);
  mask-image: url(../images/icons/trash-can.svg);
}
.icon[data-icon=reset] {
  -webkit-mask-image: url(../images/icons/reset.svg);
  mask-image: url(../images/icons/reset.svg);
}
.icon[data-icon=open-folder] {
  -webkit-mask-image: url(../images/icons/open-folder.svg);
  mask-image: url(../images/icons/open-folder.svg);
}
.icon[data-icon=magnifying-glass] {
  -webkit-mask-image: url(../images/icons/magnifying-glass.svg);
  mask-image: url(../images/icons/magnifying-glass.svg);
}
.icon[data-icon=mouse-left] {
  -webkit-mask-image: url(../images/icons/mouse-left.svg);
  mask-image: url(../images/icons/mouse-left.svg);
}
.icon[data-icon=mouse-middle] {
  -webkit-mask-image: url(../images/icons/mouse-middle.svg);
  mask-image: url(../images/icons/mouse-middle.svg);
}
.icon[data-icon=mouse-right] {
  -webkit-mask-image: url(../images/icons/mouse-right.svg);
  mask-image: url(../images/icons/mouse-right.svg);
}
.icon[data-icon=move] {
  -webkit-mask-image: url(../images/icons/move.svg);
  mask-image: url(../images/icons/move.svg);
}
.icon[data-icon=right-arrow] {
  -webkit-mask-image: url(../images/icons/right-arrow.svg);
  mask-image: url(../images/icons/right-arrow.svg);
}
.icon[data-icon=rotate] {
  -webkit-mask-image: url(../images/icons/rotate.svg);
  mask-image: url(../images/icons/rotate.svg);
}
.icon[data-icon=save] {
  -webkit-mask-image: url(../images/icons/save.svg);
  mask-image: url(../images/icons/save.svg);
}
.icon[data-icon=cross] {
  -webkit-mask-image: url(../images/icons/cross.svg);
  mask-image: url(../images/icons/cross.svg);
}
.icon[data-icon=ellipsis] {
  -webkit-mask-image: url(../images/icons/ellipsis.svg);
  mask-image: url(../images/icons/ellipsis.svg);
}
.icon[data-icon=checkmark] {
  -webkit-mask-image: url(../images/icons/checkmark.svg);
  mask-image: url(../images/icons/checkmark.svg);
}

/* General Layout */
.canvas {
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  user-select: none;
  outline: none;
  left: 0;
  top: 0;
  pointer-events: all;
}
.contents {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  justify-content: stretch;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}
.contents-left,
.contents-right {
  flex: 1 1 0;
  overflow: hidden;
  position: relative;
}

/* Tool bar */
.tool-bar {
  position: absolute;
  width: 100%;
  display: flex;
  flex-flow: row nowrap;
  pointer-events: none;
  box-sizing: border-box;
  padding: 1em;
}
.tool-bar-group {
  display: flex;
  flex-flow: row wrap;
  flex: 0 1 auto;
}
.tool-bar-space-small {
  flex: 0 1 auto;
  width: 3em;
}
.tool-bar-space-full {
  flex: 1 1 auto;
  width: 3em;
}
.tool-bar-button {
  --margin: 0.25em;

  flex: 0 0 auto;
  display: block;
  cursor: pointer;
  pointer-events: all;
  width: 2.5em;
  height: 2.5em;
  margin: var(--margin);
  border: none;
  border-radius: 0.5em;
  padding: 0;
  box-sizing: border-box;
  font-size: 1em;
  font-family: inherit;
  position: relative;
}
.tool-bar-button[hidden] {
  display: none;
}
.tool-bar-button-inner {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  border-radius: 0.5em;
  border: 2px solid var(--toolbar-button-inactive-color);
  outline: 2px solid var(--toolbar-button-back-color);
  background-color: var(--toolbar-button-inactive-color);
  width: 100%;
  height: 100%;
  box-sizing: border-box;
}
.tool-bar-button::before {
  content: '';
  display: block;
  position: absolute;
  left: calc(-1 * var(--margin));
  top: calc(-1 * var(--margin));
  right: calc(-1 * var(--margin));
  bottom: calc(-1 * var(--margin));
}
.tool-bar-button[data-selected]>.tool-bar-button-inner,
.tool-bar-button:not([data-group])>.tool-bar-button-inner {
  background-color: var(--toolbar-button-back-color);
  border-color: var(--accent-color);
}
.tool-bar-button-icon {
  display: block;
  width: 2em;
  height: 2em;
  background-color: var(--toolbar-button-icon-color);
}
.tool-bar-button[data-selected] .tool-bar-button-icon,
.tool-bar-button:not([data-group]) .tool-bar-button-icon {
  background-color: var(--accent-color);
}

/* Appearance Preview */
.appearance-preview {
  display: block;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 2px solid var(--toolbar-button-back-color);
  border-radius: 0.375em;
  background-color: transparent;
  background-repeat: repeat;
  background-size: 500% 500%;
  background-position: center center;
  position: relative;
}
.appearance-preview-icon {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: url(../images/icons/color/checkmark.svg) transparent no-repeat center center;
  background-size: contain;
}
.tool-bar-button:not([data-selected]) .appearance-preview-icon {
  display: none;
}

/* Cursor */
.draw-cursor {
  --size: 0;
  --border-size: 3px;

  display: block;
  width: 0;
  height: 0;
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  transform: none;
}
.draw-cursor-inner {
  position: relative;
  width: var(--size);
  height: var(--size);
  box-sizing: border-box;
  transform: translate(-50%, -50%);
  transition:
    width var(--transition-duration-medium) ease-in-out,
    height var(--transition-duration-medium) ease-in-out;
}
.draw-cursor:not([data-in-focus])>.draw-cursor-inner {
  width: calc(var(--border-size) * 3);
  height: calc(var(--border-size) * 3);
}
.draw-cursor[hidden]>.draw-cursor-inner {
  width: 0;
  height: 0;
}
.draw-cursor[hidden]:not(.hidden-animating) {
  display: none;
}
.draw-cursor-inner>* {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  border-radius: 50%;
}
.draw-cursor-background {
  opacity: 0;
  background-image: repeating-linear-gradient(45deg, var(--cursor-erase-color1), var(--cursor-erase-color1) 10px, var(--cursor-erase-color2) 10px, var(--cursor-erase-color2) 20px);
  transition: opacity var(--transition-duration-medium) linear;
}
.draw-cursor-border1 {
  box-shadow: inset 0 0 0 calc(2 * var(--border-size)) var(--cursor-back-color);
  outline: var(--border-size) solid var(--cursor-back-color);
}
.draw-cursor-border2 {
  box-shadow: inset 0 0 0 var(--border-size) var(--accent-color);
}
.draw-cursor[data-erase] .draw-cursor-background {
  opacity: 0.25;
}
:root:not([data-show-cursor]) .draw-cursor {
  display: none;
}
:root[data-show-cursor] #draw-canvas {
  cursor: none;
}

/* Viewer UI */
.model-viewer-bottom-overlay {
  position: absolute;
  left: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  text-align: center;
  justify-content: flex-end;
  align-items: center;
  pointer-events: none;
  margin-bottom: 2em;
}
.model-viewer-submit {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
  background-color: var(--accent-color);
  color: var(--accent-contrast-color);
  border: 4px solid var(--toolbar-button-back-color);
  border-radius: 0.5em;
  padding: 0.5em 0.5em;
  pointer-events: all;
  cursor: pointer;
  text-transform: uppercase;
  box-shadow: 0 4px 4px var(--shadow-color);
  transition: background-color var(--transition-duration-short) linear;
}
.model-viewer-submit:hover {
  background-color: var(--accent-color-dark1);
}
.model-viewer-submit:active {
  background-color: var(--accent-color-dark2);
}
.model-viewer-submit-icon-container {
  display: block;
  width: 4em;
  height: 4em;
  position: relative;
}
.model-viewer-submit-icon {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--accent-contrast-color);
  opacity: 0;
  transition: opacity var(--transition-duration-medium) ease-in-out;
}
:root:not([data-submit-state=submitting]):not([data-submit-state=submitted]) .model-viewer-submit-icon:not([data-submit-state=submitting]):not([data-submit-state=submitted]),
:root[data-submit-state=submitting] .model-viewer-submit-icon[data-submit-state=submitting],
:root[data-submit-state=submitted] .model-viewer-submit-icon[data-submit-state=submitted] {
  opacity: 1;
}
.model-viewer-guide {
  position: absolute;
  right: 0;
  top: 0;
  margin: 1em;
  pointer-events: none;
  filter: drop-shadow(0 2px 1px var(--shadow-color-dark));
}
.model-viewer-guide-row {
  display: flex;
  flex-flow: row nowrap;
}
.model-viewer-guide-row+.model-viewer-guide-row {
  margin-top: 1em;
}
.model-viewer-guide-icon {
  display: block;
  width: 2em;
  height: 2em;
  background-color: var(--guide-color);
}
.model-viewer-guide-icon+.model-viewer-guide-icon {
  margin-left: 1em;
}

/* Loading Overlay */
.loading-overlay {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: var(--background-color);
  opacity: 1;
  transition: opacity 1s linear;
}
.loading-overlay[hidden] {
  opacity: 0;
  pointer-events: none;
}
.loading-overlay[hidden]:not(.hidden-animating) {
  display: none;
}
.loading-overlay-graphic {
  --duration: 2s;

  width: 4em;
  height: 4em;
  transform: none;
  opacity: 1;
  transition:
    transform 0.5s ease-in,
    opacity 0.5s linear;
}
.loading-overlay[hidden] .loading-overlay-graphic {
  transform: scale(1.5);
  opacity: 0;
}
.loading-overlay-graphic g {
  transform: translate(32px, 32px);
  animation: loading-overlay-graphic-group-animation calc(var(--duration) * 2) linear infinite;
}
.loading-overlay-graphic circle {
  --index: 0;
  --angle: calc(var(--index) * 45deg);

  transform: rotate(var(--angle)) translate(20px);
  fill: var(--accent-color);
  animation: loading-overlay-graphic-dot-animation var(--duration) linear infinite;
  animation-delay: calc(var(--index) * 0.125 * var(--duration));
}
.loading-overlay-graphic circle:nth-child(2) { --index: 1; }
.loading-overlay-graphic circle:nth-child(3) { --index: 2; }
.loading-overlay-graphic circle:nth-child(4) { --index: 3; }
.loading-overlay-graphic circle:nth-child(5) { --index: 4; }
.loading-overlay-graphic circle:nth-child(6) { --index: 5; }
.loading-overlay-graphic circle:nth-child(7) { --index: 6; }
.loading-overlay-graphic circle:nth-child(8) { --index: 7; }

@keyframes loading-overlay-graphic-group-animation {
  0% {
    transform: translate(32px, 32px) rotate(0deg);
  }
  100% {
    transform: translate(32px, 32px) rotate(-360deg);
  }
}
@keyframes loading-overlay-graphic-dot-animation {
  0% {
    transform: rotate(var(--angle)) translate(20px);
  }
  12.5% {
    transform: rotate(var(--angle)) translate(28px);
  }
  25% {
    transform: rotate(var(--angle)) translate(20px);
  }
}

/* Browser Guard Styles */
#browser-guard-panel {
  display: flex;
  flex-grow: 1;
  justify-content: center;
  align-items: center;
}
#browser-guard-panel>.alert {
  text-align: center;
  background-color: var(--accent-color-light);
  padding: 1rem;
  margin: 1rem;
  border: 2px solid var(--accent-color);
  border-radius: 0.5rem;
}
/*
 * This is needed to ensure that these components are actually hidden, to override their respective `display` styles.
 */
#browser-guard-panel[hidden], #shape-creator[hidden] {
  display: none;
}

/* Notifications */
.notification {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: flex-start;
  padding: 0 1em 4em;
  box-sizing: border-box;
  pointer-events: none;
}
.notification[hidden]:not(.hidden-animating) {
  display: none;
}
.notification-inner {
  display: flex;
  flex-flow: row nowrap;
  align-items: stretch;
  max-width: 40em;
  box-shadow: 0 4px 4px var(--shadow-color);
  background-color: var(--accent-color);
  border-radius: 0.5em;
  overflow: hidden;
  pointer-events: all;
  transform: none;
  transition:
    opacity var(--transition-duration-medium) ease-out,
    transform var(--transition-duration-medium) ease-out;
}
.notification[hidden]>.notification-inner {
  opacity: 0;
  transition:
    opacity var(--transition-duration-medium) ease-in,
    transform var(--transition-duration-medium) ease-in;
}
.notification[hidden].hidden-changing>.notification-inner {
  transform: translateY(2em);
}
.notification-body {
  flex: 1 1 auto;
  color: var(--accent-contrast-color);
  padding: 1em;
}
.notification-close-button {
  flex: 0 0 auto;
  display: block;
  cursor: pointer;
  pointer-events: all;
  border: none;
  padding: 0;
  box-sizing: border-box;
  font-size: 1em;
  font-family: inherit;
  position: relative;
  background-color: transparent;
  transition: background-color var(--transition-duration-short) linear;
}
.notification-close-button:hover {
  background-color: var(--accent-color-dark1);
}
.notification-close-button:active {
  background-color: var(--accent-color-dark2);
}
.notification-close-button-icon {
  display: block;
  width: 2em;
  height: 2em;
  margin: 0.5em;
  background-color: var(--accent-contrast-color);
}
.notification[data-error] .notification-inner {
  background-color: var(--danger-color);
}
.notification[data-error] .notification-close-button:hover {
  background-color: var(--danger-color-dark1);
}
.notification[data-error] .notification-close-button:active {
  background-color: var(--danger-color-dark2);
}

/* Draw Region */
.draw-background {
  pointer-events: none;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: var(--draw-background-color);
}
.draw-icon-container {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 50%;
  transform: translate(-50%, -50%);
  filter: drop-shadow(0 1vh 2vh var(--draw-background-shadow-color));
  transition: opacity var(--transition-duration-long) linear;
  opacity: 1;
}
.draw-icon-container[hidden] {
  opacity: 0;
}
.draw-icon {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--draw-background-icon-color);
}
.draw-border {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border: 1vh solid var(--draw-border-color);
  box-shadow: inset 0 0 2vh 0 var(--draw-background-shadow-color);
}
.draw-ruler-container {
  position: absolute;
  left: 10vh;
  right: 10vh;
  bottom: 9vh;
  padding: 1vh 0;
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--transition-duration-long) linear;

  --mask-image: linear-gradient(90deg, #fff0 0%, #ffff 10%, #ffff 90%, #fff0 100%);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center center;
  -webkit-mask-mode: alpha;
  -webkit-mask-size: cover;
  -webkit-mask-image: var(--mask-image);
  mask-repeat: no-repeat;
  mask-position: center center;
  mask-mode: alpha;
  mask-size: cover;
  mask-image: var(--mask-image);
}
.draw-ruler-container[hidden] {
  opacity: 0;
}
.draw-ruler {
  display: block;
  overflow: visible;
  opacity: 0.25;
}
.ruler-segment,
.ruler-separator {
  fill: none;
  stroke: #000;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 0.25vh;
  vector-effect: non-scaling-stroke;
}

/* Media Modifications */
@media (max-aspect-ratio: 1/1) {
  .contents {
    flex-direction: column;
  }
}