* {
  font-family: "Noto Sans", "Noto Sans JP", sans-serif;
}

html,
body {
  height: 100%;
}

/* header */

header {
  height: 84px;
  background-color: #dbffff;
}

.search-box {
  width: calc(100% - 88px);
}

.search-tool {
  background-color: #dbffff;
  z-index: 10;
}

.active-view {
  width: 110px;
  color: #ffffff !important;
  background: #000000 !important;
  border-color: #000000 !important;
}

.inactive-view {
  width: 110px;
  color: #000000 !important;
  background: #ffffff !important;
  border-color: #ffffff !important;
}

/* main */

main {
  height: calc(100% - 84px - 64px);
}

@media screen and (max-width: 992px) {
  main {
    height: calc(100% - 100px - 64px);
  }
  header {
    height: 100px;
  }
}

@media screen and (max-width: 768px) {
  main {
    height: calc(100% - 150px - 64px);
  }
  header {
    height: 150px;
  }
}

/* left pain */

.label {
  height: 40px;
}

.docs {
  height: calc(100% - 40px);
}

/* grid and cluster views */

button:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* grid view */

.field-select {
  height: 40px;
}

#gridSvg {
  height: calc(100% - 80px);
}

h3.popover-header {
  background-color: #191c1f;
  color: white;
}

/* cluster view */

input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  outline: none;
  height: 14px;
  width: 100%;
  background: #eafaed;
  border-radius: 10px;
  border: solid 3px #eafaed;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  background: #00008b;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.15);
}

input[type="range"]:active::-webkit-slider-thumb {
  background: #eafaed;
  box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.3);
}

.cluster-num {
  height: 40px;
}

.cluster-name {
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.5));
}

#clusterSvg {
  height: calc(100% - 40px);
  padding-bottom: 16px;
}

/* frequency view */

canvas {
  padding: 30px;
}

/* footer */

footer {
  height: 64px;
  background-color: #dbffff;
}