.dg-json-view {
  background-color: #fafafa;

  .json-view {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    white-space: nowrap;
    padding-left: 20px;
    box-sizing: border-box;
  }
  .json-note {
    color: #909399;
  }
  .json-key {
    color: rgb(147, 98, 15);
  }
  .json-value {
    color: rgb(24, 186, 24);
  }
  .json-item {
    margin: 0;
    padding-left: 20px;
  }
  .first-line {
    padding: 0;
    margin: 0;
  }
  .json-body {
    position: relative;
    padding: 0;
    margin: 0;
  }

  .json-body .body-line {
    position: absolute;
    height: 100%;
    width: 0;
    border-left: dashed 1px #bbb;
    top: 0;
    left: 2px;
  }
  .last-line {
    padding: 0;
    margin: 0;
  }
  .angle {
    position: absolute;
    display: block;
    cursor: pointer;
    float: left;
    width: 20px;
    text-align: center;
    left: 0;
  }
  .angle::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    vertical-align: middle;
    border-top: solid 4px #333;
    border-left: solid 6px transparent;
    border-right: solid 6px transparent;
  }
  .angle.closed::after {
    border-left: solid 4px #333;
    border-top: solid 6px transparent;
    border-bottom: solid 6px transparent;
  }
}
