/* HIDDEN SCROLLBAR */
.hide-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.hide-scrollbar::-webkit-scrollbar {
  display: none;
}

/* FAKE TEXTAREAS */
/* text wrapping and breaking--wraps words over the line
length and puts new words on a new line if they don't fit
on this line */
[contenteditable] {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
  outline: none;
}

/* display placeholder text */
.ProseMirror p:first-child.is-empty::before {
  content: attr(data-placeholder);
  color: #003049; /* color: dark */
  opacity: 0.7;
  pointer-events: none; /* clicks go through placeholder text */
  display: block;
}

.ProseMirror p:first-child.is-empty .ProseMirror-trailingBreak {
  display: none;
}

/* GRID */
/* gridlines on map */
.gridlines {
  position: relative;
  z-index: 5; /* make sure it shows up over the image */
  
  /* hide the topmost and leftmost gridline */
  margin-top: -2px;
  margin-left: -2px;
  width: calc(100% + 2px);
  height: calc(100% + 2px); /* on mobile, parent height is set to auto */

  /* setup gridlines */
  background-image:
    linear-gradient(to right, black 1px, transparent 1px),
    linear-gradient(to bottom, black 1px, transparent 1px);
  background-size: 8.33% 11.11%; /* initially 12x9 because it looks nice with default img */
}

@media screen and (min-width: 768px) {
  .gridlines {
    height: calc(100% + 2px);
  }
}

/* remove the default styling (padding + grey outline) on input type=color */
input[type="color"] {
  -webkit-appearance: none;
  outline: none;
  background-color: transparent;
}
input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
  border: none;
}
input[type="color"]::-webkit-color-swatch {
  border: none;
}
input[type="color"]::-moz-color-swatch {
  border: none;
}

/* remove the default styling on input type="text" and input type="number" */
input[type="text"], input[type="number"]{
  appearance: textfield;
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
} 
input[type="text"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}
input[type="text"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}