.vue-dd {
  max-height: var(--vue-dd-maxHeight);
  max-width: var(--vue-dd-maxWidth);
}


.vue-dd, .vue-dd pre {
  font-family: var(--vue-dd-fontFamily);
  font-size: var(--vue-dd-fontSize);
  line-height: var(--vue-dd-lineHeight);
}

.vue-dd {
  position: relative;
  text-align: left;
  color: #4e5e6b;
  padding: 2px 5px 2px 3px;
  transition: 0.2s;
  margin-bottom: 2px;
  background: #f9ffff;
  border-radius: 3px;
  border: 1px solid #d2dbe8;
  overflow-y: auto;
  overflow-x: auto;
  scroll-behavior: smooth;
  /* firefox scrollbar */
  scrollbar-color: rgba(0, 0, 0, 0.1) #f9ffff;
  scrollbar-width: thin;
}

.vue-dd div {
  /**
   * this is important for auto-scroll saveFocus positioning
   * some css frameworks set * { position: relative } and
   * vue 3 default main.css does as well,
   * position:relative on all (*) elements will break auto scroll in vue-dd
   * because the only relative element should be the root .vue-dd {}
   */
  position: static !important;
}

.vue-dd-no-arrow {
  padding-left: 5px;
}

.vue-dd-body {
  transition: 0.1s;
}

.vue-dd-open {
}

.vue-dd-open.vue-dd-inline {
  display: block;
}

.vue-dd-inline:not(.vue-dd-open) {
  display: inline-block;
  margin-right: 3px;
}

.vue-dd.vue-dd-dark {
  background: #000;
  border: 1px solid #000;
  /* firefox scrollbar */
  scrollbar-color: #111 #000;
  scrollbar-width: thin;
}

.vue-dd::-webkit-scrollbar {
  width: 4px;
  height: 4px;
  background: rgba(0, 0, 0, 0.05);
}

.vue-dd::-webkit-scrollbar-corner {
  background: rgba(0, 0, 0, 0.05);
}

.vue-dd::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background: rgba(0, 0, 0, 0.1);
}

.vue-dd.vue-dd-dark::-webkit-scrollbar {
  background: rgba(255, 255, 255, 0.05);
}

.vue-dd.vue-dd-dark::-webkit-scrollbar-corner {
  background: rgba(255, 255, 255, 0.05);
}

.vue-dd.vue-dd-dark::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
}

.vue-dd-box {
  display: block;
  overflow: visible;
}

.vue-dd-box > div {
  /*float: left;*/
  display: block;
  overflow: visible;
}

.vue-dd-box > div > div {
  display: block;
  padding-left: var(--vue-dd-paddingLeft);
}

.vue-dd-box-closed, .vue-dd-box-closed div, .vue-dd-box-closed div div {
  display: inline-block;
  cursor: default;
  white-space: nowrap;
}

div.vue-dd-start {
  display: inline-block;
}

/** focus **/

@font-face {
  font-family: 'vue-dd-icons';
  src: url('../assets/fonts/vue-dd-icons.eot?w48gck');
  src: url('../assets/fonts/vue-dd-icons.eot?w48gck#iefix') format('embedded-opentype'),
  url('../assets/fonts/vue-dd-icons.ttf?w48gck') format('truetype'),
  url('../assets/fonts/vue-dd-icons.woff?w48gck') format('woff'),
  url('../assets/fonts/vue-dd-icons.svg?w48gck#vue-dd-icons') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="vue-dd-icon-"], [class*=" vue-dd-icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'vue-dd-icons' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  font-size: 80%;
  line-height: 80%;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.vue-dd-focus.vue-dd-icon-eye:before {
  content: "\e900";
}

.vue-dd-focus.vue-dd-focus-selected.vue-dd-icon-eye:before {
  content: "\e901";
  background: -webkit-linear-gradient(60deg, #00ff95, #116dea 90%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.vue-dd-focus {
  color: #afafaf;
  margin: 0 2px 0 0;
  display: inline-block;
  font-size: 150%;
  vertical-align: middle;
  cursor: default;
  transition: 0.1s
}

.vue-dd-focus-hover {
  color: #555;
}

.vue-dd-focus-selected {
  color: #116dea;
}

/** dark focus **/

.vue-dd-dark .vue-dd-focus {
  color: #333;
}

.vue-dd-dark .vue-dd-focus-hover {
  color: #777;
}

.vue-dd-dark .vue-dd-focus-selected {
  color: #116dea;
}

span.vue-dd-expand {
  vertical-align: middle;
  background: none;
  border: 0;
  border-radius: 5px;

  padding: 3px 3px;
  font-size: 70%;
  line-height: 10px;
  cursor: default;
  color: grey;
  -webkit-user-select: none;
  user-select: none;
  letter-spacing: -0px;
}

span.vue-dd-expand:hover {
  background: rgba(0, 0, 0, 0.05);
  color: #21BA45;
}

.vue-dd-dark span.vue-dd-expand {
  /*background: rgba(19, 19, 19, 0.97);*/
}

.vue-dd-dark span.vue-dd-expand:hover {
  background: rgba(255, 255, 255, 0.05);
}

.vue-dd-box-closed .vue-dd-expand {
  /*font-style: italic;*/
}
/*.vue-dd-expand-more {*/
/*}*/

.vue-dd-size:has(+ .vue-dd-expand) {
  margin: 0;
}

span.vue-dd-expand:active {
  padding-top: 4px;
  padding-bottom: 2px !important;
}

.vue-dd-ref {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  color: grey;
  font-family: Georgia, 'Courier', serif;
  font-size: 90%;
  font-style: italic;
  letter-spacing: -0.5px;
  display: inline-block;
  padding: 0 3px 0 0;
}

.vue-dd-r {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  color: grey;
  font-family: Georgia, 'Courier', serif;
  font-size: 90%;
  font-style: italic;
  letter-spacing: -0.5px;
  display: inline-block;
  padding: 0 2px 0 0;
}

.vue-dd-getter {
  color: grey;
  font-style: italic;
  padding: 0 2px 0 0;
  cursor: pointer;
  border-radius: 3px;
}

.vue-dd-getter:hover {
  background: rgba(200,200,200,0.2)
}

.vue-dd-name + .vue-dd-r {
  padding-left: 2px;
}


.vue-dd-f {
  -webkit-user-select: none;
  user-select: none;
  cursor: default;
  color: grey;
  font-style: italic;
  font-family: Georgia, serif;
  font-size: 90%;
  letter-spacing: -1px;
  display: inline-block;
  padding: 0 5px 0 3px;
}

.vue-dd-f-inline {
  color: #4e5e6b;
  font-style: italic;
}

.vue-dd-f-start {
  display: inline;
  color: #55606a;
}

.vue-dd-dark pre.vue-dd-f-start {
  padding: 0;
  margin: 0;
  color: #cbeaff;
}

.vue-dd-dark pre.vue-dd-f-start .hljs-property {
  color: #6ec3ff;
}

.vue-dd-f-content {
  padding: 0;
}

.vue-dd-f-content pre {
  padding: 0;
  margin: 0;
  color: #333;
}

.vue-dd-dark .vue-dd-f-content pre .hljs-property {
  color: #6ec3ff;
}

.vue-dd-dark .vue-dd-f-content pre {
  padding: 0;
  margin: 0;
  color: #cbeaff;
}

span.vue-dd-arrow {
  border: none;
  display: inline-block;
  background: none;
  color: #8c9dad;
  cursor: default;
  -webkit-user-select: none;
  user-select: none;
  font-size: 80%;
  padding: 0 2px 0 2px;
  transition: 0.2s;
  vertical-align: middle;
}

span.vue-dd-arrow:hover {
  color: slategray;
}

span.vue-dd-arrow-collapsed {
  padding: 0 2px 0 2px;
  transform: rotate(-90deg);
}

.vue-dd-name {
  padding-right: 0px;
  cursor: default;
  color: #1b7ccf;
}

.vue-dd-dark .vue-dd-name {
  cursor: default;
  color: #09BAFF;
}

.vue-dd-name.vue-dd-f-name {
  color: #d114d1;
  font-weight: normal;
}

.vue-dd-instance {
  user-select: none;
  padding-left: 3px;
  font-style: italic;
  color: #21BA45;
  -webkit-user-select: none;
}

.vue-dd-dark .vue-dd-instance {

}

.vue-dd-instance + .vue-dd-size {
  margin-left: 2px;
}

.vue-dd-size {
  user-select: none;
  margin: 0 2px 0 0;
  padding: 3px;
  /*border-radius: 30px;*/
  /*background: #eee;*/
  color: #999;
  font-style: italic;
  font-size: 80%;
  line-height: 100%;
}

.vue-dd-dark .vue-dd-size {
  /*background: #131313;*/
  color: #555;
}

.vue-dd-size-bracket {
  display: none;
  color: #4e5e6b;
}

.vue-dd-promise-prototype {
  padding-right: 5px;
  padding-left: 0;
}

.vue-dd-promise-content {
  -webkit-user-select: none;
  user-select: none;
  padding: 0 4px;
  font-style: italic;
}

.vue-dd-highlight {
  animation: vue-dd-highlight 1s;
}

.vue-dd-dark .vue-dd-highlight {
  animation: vue-dd-highlight-on-dark 1s;
}

@keyframes vue-dd-highlight-on-dark {
  from {
    background-color: #0f99cb;
    border-radius: 5px;
  }
}

@keyframes vue-dd-highlight {
  from {
    background-color: #83cb0f;
    border-radius: 5px;
  }
}

.vue-dd-null, .vue-dd-undefined {
  color: slategrey;
}

.vue-dd-boolean {
  font-weight: bold;
  color: green;
}

.vue-dd-number {
  color: #3863be;
}

.vue-dd-dark .vue-dd-number {
  color: #4067b2;
}

.vue-dd-bigint {
  color: #5a38be;
}

.vue-dd-dark .vue-dd-bigint {
  color: #7046e8;
}

.vue-dd-false {
  color: #f34747;
}

.vue-dd-dark .vue-dd-false {
  color: #f34747;
}

.vue-dd-unknown {
  color: #f34747;
}

.vue-dd-dark .vue-dd-unknown {
  color: #f34747;
}

.vue-dd-string {
  color: #d77702;
  word-break: break-word;
}

.vue-dd-dark .vue-dd-string {
  color: #ffcc00;
}

.vue-dd-symbol {
  color: #188379;
}

.vue-dd-dark .vue-dd-symbol {
  color: #00f7ff;
  word-break: break-word;
}

.vue-dd-key {
  color: #384e61;
  padding-left: 1px;
  padding-right: 0;
  font-weight: normal;
}

.vue-dd-dark .vue-dd-key {
  color: #c7e5fe;
}

.vue-dd-key-of-array {
  user-select: none;
  color: #ddd;
}

.vue-dd-dark .vue-dd-key-of-array {
  color: #333;
}

.vue-dd-colon {
  color: #555;
}

.vue-dd-dark .vue-dd-colon {
  color: #ccc;
}

.vue-dd-key-of-array .vue-dd-colon {
  user-select: none;
  color: #ccc;
}

.vue-dd-dark .vue-dd-key-of-array .vue-dd-colon {
  color: #333;
}

.vue-dd-box > div > div > div > span > .vue-dd-key {
  /*you can set extra padding for primitive keys here*/
  /*padding-left: 0px;*/
}

.vue-dd-forget {
  margin-left: 10px;
  cursor: pointer;
  font-size: 80%;
  margin-right: 10px;
  background: rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 2px 5px;
  border-radius: 10px;
  transition: 0.2;
  opacity: 0.8;
}

.vue-dd-forget:hover {
  opacity: 1;
}

.vue-dd-dark .vue-dd-forget {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vue-dd .vue-dd-forget-q-ask {
  border: 0;
  background: none;
  padding: 2px 0;
  cursor: default;
}

.vue-dd .vue-dd-forget-yes {
  margin-left: 0;
}

.vue-dd .vue-dd-forget-no {
  margin-left: 0;
  background: none;
}

.vue-dd-forget-cleared {
  font-size: 80%;
  margin-right: 10px;
  padding: 2px 5px;
}

.vue-dd-comma {
  color: #999;
  padding-right: 1px;
}

.vue-dd-dark .vue-dd-comma {
  color: #333;
}

.vue-dd-colon + .vue-dd-obj-char {
  padding: 0 2px;
}

.vue-dd-obj-char {
  color: #7490ab;
  padding: 0 0px;
}

.vue-dd-dark .vue-dd-obj-char {
  color: #555;
}

.vue-dd-name + .vue-dd-obj-char {
  padding-left: 2px;
}

.vue-dd-arr-char {
  color: #7490ab;
  padding: 0 1px;
}

.vue-dd-dark .vue-dd-arr-char {
  color: #555;
}


.vue-dd-obj-char-start {
  padding: 0 1px;
}