:root {
  --container-width: 50vw;
}

* {
  box-sizing: border-box;
  scrollbar-width: auto;
  scrollbar-color: #383838 #000000;
}

  /* Chrome, Edge, and Safari */
  *::-webkit-scrollbar {
    width: 16px;
  }

  *::-webkit-scrollbar-track {
    background: #000000;
  }

  *::-webkit-scrollbar-thumb {
    background-color: #383838;
    border-radius: 10px;
    border: 3px solid #383838;
  }

body {
  background-color: #000;
  color: #fff;
  font-family: "Source Code Pro", Consolas;
  overflow: hidden;
}

.main {
  border: 0px solid white;
}

.container-treeview {
  width: 50vw;
  text-align: center;
  border: 0px solid orange;
  margin: 0 auto;
  padding: 20px 0 20px 0;
  overflow: scroll;
  height: 100vh;
}

.container-input {
  
  border: 0px solid yellow;
}

.container-buttons {
  margin: 20px auto;
  border: 0px solid purple;
}

button {
  margin: 10px auto;
  font-size: 18pt;
  padding: 20px;
  width: 25%;
}

.decode {
  background: #000;
  color: #fff;
  border: 2px solid #0f0;
}

div:has(>button) {
  padding-top: 20px;
}

.testbtn, .reset {
  background: #000;
  color: #fff;
  border: 2px solid #0ff;
}

.encode {
  background: #000;
  color: #fff;
  border: 2px solid #f00;
}

.decode:hover {
  background: #111;
  color: #fff;
  border: 2px solid #007f00;
  box-shadow: inset 0 0 50px 10px #007f00;
  text-shadow: 0 0 6px #fff;
}

.testbtn:hover, .reset:hover {
  background: #111;
  color: #fff;
  border: 2px solid #007f7f;
  box-shadow: inset 0 0 50px 10px #007f7f;
  text-shadow: 0 0 6px #fff;
}

.encode:hover {
  background: #111;
  color: #fff;
  border: 2px solid #7f0000;
  box-shadow: inset 0 0 50px 10px #7f0000;
  text-shadow: 0 0 6px #fff;
}

.input {
  width: 90%;
  height: 75vh;
  min-height: 25%;
  max-height: 90%;
}

.input, select {
  background: #111;
  color: #bbb;
  resize: none;
  border-radius: 5px;
}

.jsonView {
  margin: 0 5%;
  width: 80%;
  font-family: Consolas, "Lucida Console", Menlo, "dejavu sans mono", monospace;
  font-size: 20pt;
  line-height: 20pt;
  padding: 4px;
  cursor: default;
  color: rgb(66, 236, 166);
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  text-align: left;
}

.jsonView > div {
  display: inline-block;
}

.jsonView.hidden {
  display: none;
}

.jsonView > .children,
.jsonView.insert {
  display: block;
}

.jsonView > .name {
  color: rgb(236, 119, 45);
}

.jsonView > .separator:before {
  content: ":";
}

.jsonView > .separator {
  padding-right: 5px;
}

.jsonView > .spacing {
  display: inline-block;
  width: 15px;
}

.jsonView > .spacing::before {
  content: "1";
  visibility: hidden;
}

.jsonView > .value.null,
.jsonView > .value.undefined {
  color: rgb(128, 128, 128);
}

.jsonView > .value.boolean,
.jsonView > .value.number {
  color: rgb(228, 207, 0);
}

.jsonView > .value.string:not(.edit):before,
.jsonView > .value.string:not(.edit):after {
  content: '"';
}

.jsonView > .value.string {
  color: rgb(246, 226, 222);
}

.jsonView > .name:hover,
.jsonView > .value:hover {
  background-color: rgba(255, 21, 17, 0.51);
}

.jsonView > .jv-expand,
.jsonView > .jv-collapse {
  min-width: 20px;
  margin-left: -20px;
  cursor: pointer;
}

.jsonView > .jv-expand:hover::before,
.jsonView > .jv-collapse:hover::before {
  color: rgb(127,63,255);
}

.jsonView > .jv-expand:before {
  content: '\25B6';
}

.jsonView > .jv-collapse:before {
  content: '\25BC';
}

.jsonView > .edit {
  padding: 0px 5px 0px 5px;
  white-space: nowrap;
  overflow: hidden;
  background-color: transparent;
}

.jsonView > .edit br {
  display: none;
}

.jsonView > .edit * {
  display: inline;
  white-space: nowrap;
}

.jsonView > .value.edit {
  color: rgb(255, 255, 255);
}

.jsonView > .delete:before {
  content: "+";
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  display: inline-block;
}

.jsonView > .delete {
  opacity: 0;
  display: inline;
  padding: 3px;
  cursor: pointer;
  color: rgb(250, 150, 150);
}

.jsonView > .item:hover ~ .delete {
  opacity: 1;
  color: rgb(250, 150, 150);
}

.jsonView > .delete:hover {
  opacity: 1;
  color: rgb(255, 0, 0);
  background: rgba(220, 220, 220, 0.25);
}

.jsonView.readonly > .insert,
.jsonView.readonly > .delete {
  display: none !important;
}

.jsonView > .insert:before {
  content: "+";
}

.jsonView > .insert {
  display: none;
  color: rgb(0, 250, 0);
  cursor: pointer;
}

.jsonView.jv-expanded > .insert,
.jsonView.jv-expanded > .insert {
  display: inline-block;
  margin-left: 20px;
  padding: 3px;
}

.jsonView > .insert:hover {
  color: rgb(0, 255, 0);
  background: rgba(220, 220, 220, 0.25);
}