/* src/styles.css */
html,
body {
  width: 100vw;
  height: 100vh;
  margin: 0;
  overflow-x: hidden;
  font-family:
    "Gill Sans",
    "Gill Sans MT",
    Calibri,
    "Trebuchet MS",
    sans-serif;
}
button {
  border: 1px solid rgb(161, 149, 21);
  cursor: pointer;
  background-image:
    linear-gradient(
      to right,
      #202020,
      #505050);
  color: white;
  border-radius: 3px;
  padding: 5px;
}
button:hover {
  border-color: red;
}
select {
  background-color: #303030;
  color: white;
}
td {
  border: 2px groove gray;
  padding: 3px;
  border-radius: 3px;
}
td > canvas {
  background-color: black;
  height: 50px;
  width: 100%;
}
td > span > button {
  font-size: 8px;
  float: right;
}
spectrometer-node {
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 30% min-content 1fr;
  grid-template-areas: "picker picker picker capture capture capture" "controls controls controls controls controls controls" "compare compare compare compare captured captured";
  background: rgb(25, 25, 25);
}
#pickerDiv {
  grid-area: picker;
}
#pickerDiv img {
}
#captureDiv {
  grid-area: capture;
  position: relative;
  border-left: 1px solid gray;
}
#menu {
  background-color: rgb(0, 0, 0);
  background:
    linear-gradient(
      90deg,
      rgba(10, 0, 20, .05) 0%,
      rgba(31, 0, 61, .05) 4%,
      rgba(8, 8, 107, .05) 16%,
      rgba(0, 209, 251, .05) 32%,
      rgba(9, 182, 5, .05) 45%,
      rgba(232, 229, 2, .05) 67%,
      rgba(232, 2, 2, .05) 87%,
      rgba(32, 0, 0, .05) 100%);
  grid-area: controls;
  position: relative;
  transition: 0.5s;
  padding: 15px 25px;
  border-top: 1px solid gray;
  border-bottom: 1px solid gray;
}
#compare {
  color: white;
  grid-area: compare;
  padding: 25px;
}
#captured {
  color: white;
  grid-area: captured;
  padding: 25px;
  border-left: 3px dotted gray;
}
#saved {
  color: white;
  grid-area: saved;
  padding: 25px;
  border-left: 2px double gray;
}
::-webkit-scrollbar {
  width: 10px;
}
::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.0);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25);
  border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 1);
}