.JSON_viewer {
  --color: #999;
  --string-color: #7a3e9d;
  --number-color: #f53232;
  --boolean-color: #448c27;
  --null-color: #9c5d27;
  --property-color: #000;
  --preview-color: #0e71b9;
  --highlight-color: #7b0000;
  --more-color: #999;
  --border-left-color: #e8e8e8;
  --border-left-hover-color: #b9b9b9;
}

[data-theme="dark"] .JSON_viewer {
  --color: #999;
  --string-color: #a3eea0;
  --number-color: #d19a66;
  --boolean-color: #4ba7ef;
  --null-color: #df9cf3;
  --property-color: #6fb3d2;
  --font-family: monaco, Consolas, "Lucida Console", monospace;
  --preview-color: rgba(222, 175, 143, 0.9);
  --highlight-color: #7b0000;
  --more-color: #999;
  --border-left-color: #333;
  --border-left-hover-color: #666;
}

.JSON_viewer {
  display: block;
  color: var(--color);
  padding: 0.5rem;
  font-family: monaco, Consolas, "Lucida Console", monospace;
  font-size: 1rem;
}

.JSON_viewer .key {
    color: var(--property-color);
    display: inline-block;
  }

.JSON_viewer .value.null {
      color: var(--null-color);
    }

.JSON_viewer .value.string {
      color: var(--string-color);
    }

.JSON_viewer .value.number {
      color: var(--number-color);
    }

.JSON_viewer .value.boolean {
      color: var(--boolean-color);
    }

.JSON_viewer .value.object {
      display: inline;
    }

.JSON_viewer ul,
  .JSON_viewer li {
    position: relative;
    list-style: none;
  }

.JSON_viewer ul {
    padding: 0;
    clear: both;
    margin: 0;
  }

.JSON_viewer ul:before {
      content: "";
      border-left: 1px solid var(--border-left-color);
      position: absolute;
      left: 0.5rem;
      top: 0.5rem;
      bottom: 0.5rem;
    }

.JSON_viewer ul:hover:before {
        border-left: 1px solid var(--border-left-hover-color);
      }

.JSON_viewer ul > li {
      position: relative;
      padding-top: 0.25rem;
      margin-left: 2rem;
      padding-left: 0px;
    }

.JSON_viewer ul > li:not(.switch) > .key {
      }

.JSON_viewer ul > li.switch > .key {
          cursor: pointer;
        }

.JSON_viewer ul > li.switch > .key:before {
            color: var(--color);
            display: inline-block;
            padding-right: 5px;
            padding-left: 5px;
            font-size: 0.7rem;
            content: "▶";
            transition: transform 195ms ease-in;
            margin-left: -1rem;
          }

.JSON_viewer ul > li.switch.expanded > .key:before {
              transform: rotate(90deg);
            }

.JSON_viewer ul > li > .hide {
        display: none !important;
      }

.JSON_viewer ul > li > .preview .more {
        color: var(--more-color);
        white-space: nowrap;
      }

#root {
  --background-color: #fff;
  --corner-fill-color: #242424;
}
  #root[data-theme="dark"] {
    --corner-fill-color: #fff;
    --background-color: #242424;
  }
  #root {
  background-color: var(--background-color);
  min-height: 100%;
}

.view-button-group {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.header {
  padding: 5px;
}

.github-corner:hover .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }

.github-corner svg {
    fill: var(--corner-fill-color);
    color: var(--background-color);
    position: absolute;
    top: 0;
    border: 0;
    right: 0;
  }

@keyframes octocat-wave {
  0%,
  100% {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(-25deg);
  }

  40%,
  80% {
    transform: rotate(10deg);
  }
}

@media (max-width: 500px) {
  .github-corner:hover .octo-arm {
    animation: none;
  }

  .github-corner .octo-arm {
    animation: octocat-wave 560ms ease-in-out;
  }
}

.view-button:not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

.view-button + .view-button {
    margin-left: 1px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

.view-button.checked {
    background-color: rgba(78, 187, 255, 0.3);
    cursor: default;
  }

.view-button {
  display: inline-block;
  position: relative;
  padding: 3px 12px;
  background: rgba(200, 200, 200, 0.2);
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  text-decoration: none;
  color: inherit;
}