body.dark {
  background: black
}
body.dark .dg.ac {
    filter: invert(1);
}
body.dark .dg .boolean [type=checkbox]:before {
  background: rgba(0,0,0,0.3);
}
body.dark .dg .boolean [type=checkbox]:checked:before {
  background: rgba(255,0,150,1);
}
  body .dg .boolean [type=checkbox]:checked:before {
    background: rgba(0,255,150,1);
  }
body.dark .dg .c .slider-fg:after {
  border: 1px solid rgba(0,0,0,1);
}
body.dark .dg .c .slider:before {
  border-bottom: 1px solid rgba(0,0,0,1);
}
body.dark .dg .c .slider {
  border-left: 1px solid rgba(0,0,0,1);
  border-right: 1px solid rgba(0,0,0,1); 
}
body.dark .dg .c select {
  border: 1px solid rgba(0,0,0,1);
}


.dg, .dg * {
  box-sizing: border-box;
  font-family: sans-serif;
  font-size: 1em;
  text-shadow: none !important;
  font-weight: 400  !important;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.dg li.folder {
  border-left: none !important;
  margin-bottom: 2em;
}

.dg.main.a {
  margin: 0 !important;
  padding: 0 !important;
  background: white;
  /* height: 100vh; */
}
.dg.main.a > ul {
  padding: 1rem 1rem !important;
}

.dg.main.a > *:first-child {
  position: absolute;
  top: 0; left: 0;
  width: 6px !important;
  height: 100%;
  pointer-events: none !important; 
  /* resize bar */
}

.dg,
.dg li:not(.folder),
.dg li.title {
  color: black !important;
  background: white !important;
  text-shadow: none;
}


.dg li:not(.folder) {
  cursor: auto;
  height: auto !important;
  line-height: 2em;
  padding: 0 !important;
  border-bottom: none !important;
  overflow: visible;
}

.dg li.string {
  height: auto !important;
}
.dg li.string .property-name{
  /* width: 100% !important; */
  float: none !important;
  /* margin-bottom: -0.3em; */
  display: block !important;
}

.dg li.title {
  cursor: pointer;
  margin-left: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,0.2) !important;
  height: 2em !important;
}

.dg .c {
  float: none !important;
  width: 100%  !important;
  height: 2em;
}

.dg .c input {
  background: white !important;
  color: black !important;
  line-height: 1;
}

.dg .c input[type=text] {
  text-align: right;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}


.dg .cr {
  border-left: none !important;
  overflow: visible !important;
  margin-bottom: 1em !important;
}
.dg .cr.color {
  overflow: visible !important;
}
.dg .cr.color input {

}
.dg .cr.number.has-slider {
  height: 3.5em !important;
}

.dg .c .slider,
.dg .c select {
  background: white !important;
  width: 100%  !important;
  margin-left: 0  !important;
  margin-right: 0;
  height: 2em  !important;
  margin-top: 0px  !important;  
}

.dg .property-name {
  position: relative;
  z-index:9;
  pointer-event: none;
  height: 2em  !important;
  line-height: 2em  !important;
  /* margin-bottom: .25em; */
}

.dg .function,
.dg .cr.function {
  cursor: pointer !important;
}

.dg .function:hover,
.dg .cr.function:hover {
  cursor: pointer !important;
  opacity: 0.5 !important;
}

.dg .function button {
  display: block;
  width: 100%;
  height: 100%;
  cursor: pointer !important;
}

.dg .boolean .c {
  text-align: right;
}

.dg .boolean [type=checkbox] {
  display: inline-block;
  height: 1em;
  width: 1em;
  margin: 0;
  position: relative;
  border: none;
  -webkit-appearance: none;
  transform: translateY(-20%);
  /* opacity: 0; */
}
.dg .boolean [type=checkbox]:before {
  content: '';
  display: inline-block;
  height: 1.5em;
  width: 3em;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.1);
  opacity: 1;
  z-index: 1;
  border-radius: 100px;
  transform: translate(10%, -15%);
  transition: .2s all;
}
.dg .boolean [type=checkbox]:checked:before {
  background: rgba(255,0,150,.3);
  /* border: .5px solid rgba(0,0,0,1); */
}

.dg .boolean [type=checkbox]:after {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  transform: translate(-125%, -5%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: white;
  border: 1px solid black;
  border-radius: 100%;
  opacity: 1;
  z-index: 9;
  pointer-events:none;
  transition: .2s all;
}
.dg .boolean [type=checkbox]:checked:after {
  content: '';
  display: inline-block;
  height: 1em;
  width: 1em;
  transform: translate(-5%, -5%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  /* background: black; */
  border: 1px solid black;
  border-radius: 100%;
  opacity: 1;
  z-index: 9;
  pointer-events:none;
  transition: .2s all;
}

.dg .c select,
.dg .color .c input {
  position: absolute;
  left: 0; top: 0;
  z-index: 0;
  text-align: left !important;
  padding: 0  !important;
}

.dg .c .slider-fg {
  background: transparent !important;
  position: relative;
}
.dg .c .slider {
  position: relative;
  width: 100%;
  border-left: 1px solid rgba(0,0,0,.5);
  border-right: 1px solid rgba(0,0,0,.5);
  opacity: 1;
  height: 15px !important;
}

.dg .c .slider:before {
  content: "";
  display: block;
  height: 0px;
  width: 100%;
  position: absolute;
  top:50%;
  left:0;
  right: 0;
  transform: translate(0%, -50%);
  border-bottom: 1px solid rgba(0,0,0,.5);
  z-index:0;
  opacity: 1;
}
.dg .c .slider-fg:after {
  content: "";
  display: block;
  height: 1em;
  width: 1em;
  position: absolute;
  top:50%;
  left:100%;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  border: 1px solid rgba(0,0,0,.5);
  background: white;
  z-index:99;
  opacity: 1;
}

.dg .c .slider:hover,
.dg .c .slider:hover .slider-fg:after,
.dg .c .slider:hover:before {
  opacity: 1
}

.dg.main {
  position: relative  !important;
}
.dg.main .close-button {
  background: rgba(0,0,0,0.01) !important;
  color: rgba(0,0,0,0.5) !important;
  position: absolute  !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  font-size: 1em;
  /* transform: translateY(-150%); */
  opacity: 0 !important;
  pointer-events: none !important;
}
.dg.main.a > ul {
  height: 100vh !important;
  padding: 1rem 1rem !important;
}
/* .dg.main.a > ul.closed {
  height: 0 !important;
  padding: 0 !important;
  overflow: hidden;
}
.dg.main.a > ul ~ .close-button{
  transform: translateY(-50%);
}
.dg.main.a > ul.closed ~ .close-button{
  transform: translateY(100%);
} */

@media screen and (max-width: 1024px) {
  .dg.main.a {
    float: none !important;
    width: 100% !important;
  }
  .dg.main.a > ul {
    padding: 3rem 1rem !important;
  }
  .dg.main.a > ul.closed {
    padding: 0 !important;
    height: 0 !important;
    overflow: hidden;
  }
  .dg.main.a > ul.closed ~ .close-button{
    transform: translateY(200%);
  }
  .dg.main .close-button {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    transform: translateY(0%) !important;
    padding: 1rem !important;
    height: 3rem !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}

.stats-dom {
  opacity: 0.1 !important;
}
.stats-dom:hover {
  opacity: 1 !important;
}

*:focus {
  outline: none;
}