.hidden {
  display: none !important;
}

body {
  margin: 0;
  padding: 0;
  display: flex;
  height: 100vh;
  font-family: Arial, sans-serif;
  background: #eee;
}

#float {
  position: absolute;
  right: 250px;
  bottom: 30px;
}

#dummy {
  height: 100%;
}

#separator {
  height: 30px;
}

#toolbar,
.v-panel {
  background-color: #333;
  padding: 10px;
  display: flex;
  flex-direction: column;
}

#canvas-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: auto;
  background: #eee;
}

#canvas {
  border: 1px solid #aaa;
  cursor: crosshair;
}

#settings-panel {
  min-width: 200px;
}

.xbutton {
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: 14px;
}

button.tool-button {
  padding: 8px;
  margin-bottom: 5px;
}

.tool-button:hover {
  background-color: #777;
}

.active {
  background-color: #56d;
  color: #fff;
}

.tool-settings {
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  background: #555;
  margin-left: 1px;
  margin-right: 1px;
  margin-top: 5px;
  margin-bottom: 15px;
  padding: 3px;
}

.settings-button {
  margin-top: 5px;
  width: 196px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.drawing-layer {
  position: absolute;
  top: 0;
  left: 0;
}

#top-canvas {
  border: solid #555;
  cursor: crosshair;
}

div.toolbar-caption {
  font-size: 150%;
  text-align: center;
  border-bottom: solid #ddd;
  margin-bottom: 15px;
  background-color: #666;
  max-width: 196px;
}

img.tool-icon {
  width: 32px;
  height: 32px;
}

img.small-icon {
  width: 24px;
  height: 24px;
}


div#loading-screen {
  position: absolute;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  background: rgba(255, 255, 255, .8);
}

span.legend-row {
  display: flex;
  margin-bottom: 5px;
  align-items: center;
}

div.color-sample {
  width: 30px;
  height: 20px;
  border: solid;
  margin-right: 10px
}

.legend {
  margin-top: 20px;
}

div#tiling-sample {
  background-color: #D2CDE7;
}

div#grass-sample {
  background-color: #A8D4AF;
}

div#flowers-sample {
  background-color: #FFED00;
}

div#threes-sample {
  background-color: #5B7674;
}

circle.draggable.ready2remove:hover{
  fill: red;
  cursor: pointer;
}

div#account-data {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.unselectable {
  user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

polygon.removable:hover, g.removable:hover path {
  stroke: #f00 !important;
}

polygon.selectable:hover{
  stroke: #ff0 !important;
}

polygon.selected, g.selected path{
  stroke: #7f0 !important;
}

polygon.spline-contour {
  fill: none;
  stroke: none;
}

g.selected polygon.spline-contour {
  stroke: black;
  stroke-dasharray: 5;
}

circle.draggable {
  fill: black;
  fill-opacity: 0.75;
  stroke: white;
  cursor: move;
}

circle.draggable.control-point {
  fill: gray;
  fill-opacity: 0.75;
  stroke: black;
}

circle.draggable:hover{
  stroke-width: 4;
  stroke: greenyellow;
}

button.action-button {
  padding: 1px;
}

button.xbutton.layer-vis-button {
  height: 12px;
  border: solid 1px #555;
  translate: 0px -11px;
  border-radius: 6px;
  width: 12px;
  padding: 0px;
}

button.xbutton.layer-vis-button.active {
  border: solid 1px #333;
}

button.xbutton.layer-vis-button:hover {
  border-color: #ececec;
}

div#shape-legend {
  overflow-wrap: break-word;
  max-width: 176px;
}

td.zone-pattern {
    background: white;
    width: 50px;
    height: 50px;
}

table#zones-toolbar {
  max-width: 196px;
}

div#toolbar::-webkit-scrollbar {
  display: none;
}

div#settings-panel::-webkit-scrollbar {
  display: none;
}

#toolbar, .v-panel {
  background-color: #333;
  padding: 10px;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: auto;
  box-sizing: border-box;
}

#goto-combinations {
  color: white;
}

img.x-small-icon {
  width: 16px;
  height: 16px;
}

div#backup-toolbar {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  cursor: pointer;
}

@keyframes scale-up-down {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.5);
  }
}

#backup-toolbar.animate img {
  animation: scale-up-down 1s ease-in-out 3;
}