body {
  background-color: #9ccdfb;
}

canvas {
  border: 2px solid #003300;
}

.pointRecordsSection {
  background-color: #e6e6e6;
  height: 80px;
  padding: 0.5rem;
  font-size: 0.8rem;
}

h1 {
  font-family: Noto Sans TC, Arial, Helvetica, sans-serif;
  font-weight: 700;
  display: inline-block;
}

.mouseCoords {
  /* display: inline-block; */
  font-size: 1.2rem;
}

.hint_sec {
  font-size: 1.2rem;
  font-weight: 700;
  border: 2px solid navy;
  width: 708px;
}

.roiPointsSec {
  background-color: #f5f5dc;
}

.roiNewPointsSec {
  background-color: #ffcc66;
}

.fontSmall {
  font-size: 0.9rem;
}

.stablePointsSec {
  background-color: #ccffff;
}

.stableNewPointsSec {
  background-color: lavender;
}

.backgroundNewPointsSec {
  background: honeydew;
}

.backgroundPointsSec {
  background-color: darkseagreen;
}

.point_sec {
  padding-top: 1rem;
}

.hint_animation {
  animation-name: hint_animation;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}

.dayNight_select {
  width: 150px;
}

.content_section {
  padding: 1rem;
  /*border: 1px solid #cccccc;*/
  box-shadow: 3px 3px 5px rgba(85, 85, 85, 0.5);
}

.label_adjust {
  line-height: 38px;
  margin-bottom: 0;
}

.canvas_input {
  max-width: 150px;
}

@keyframes hint_animation {
  0% {
    color: #ff0000;
  }

  50% {
    color: #ffa500;
  }

  100% {
    color: #ff0000;
  }
}