/* BASIC STYLES HERE */
body {
  background-color: var(--bs-dark);
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow-y: hidden;
}

nav {
  height: 72px;
}

.link-active {
  color: var(--bs-blue-light);
  background-color: rgba(var(--bs-blue-rgb), .25);
}

button.disabled {
  cursor: not-allowed;
  pointer-events: events;
}


main {
  flex-grow: 1;
  display: grid;
  grid-template-columns: 50px 1fr 1fr;
  place-content: center;
  align-items: center;
}

@media (min-width: 768px) {
  main {
    grid-template-columns: 250px 2fr 2fr;
  }
}

@media (min-width: 1200px) {
  main {
    grid-template-columns: 1fr 2fr 2fr;
  }
}

main>section {
  height: calc(100dvh - 74px);
  overflow-y: auto;
  overflow-x: hidden;
}

main>section>* {
  max-width: 100ch;
  margin: 0 auto;
}

/* list */
main>section:first-child {
  background-color: var(--bs-black);
  color: var(--bs-light);
}

main>section:first-child>* {
  max-width: 280px;
  margin-right: 0 !important;
}

/* Middle view */
main>section {
  background-color: var(--bs-dark);
  color: var(--bs-light)
}

/* Test section */
main>section:last-child {
  background-color: var(--bs-dark-bg-subtle);
}

main>section:last-child>* {
  background-color: var(--bs-dark-bg-subtle);
  margin-left: 0;
}

table {
  font-family: 'Courier New', Courier, monospace;
}


.property-comment {}

.property-comment kbd {
  background-color: var(--bs-black);
  color: rgba(var(--bs-light-rgb), .8);
}

[data-bs-toggle="popover"] {
  cursor: help;
}

.custom-popover {
  background-color: rgba(var(--bs-black-rgb), .5);
  backdrop-filter: blur(10px);
  color: var(--bs-secondary);
}

.mdi.mdi-information {
  color: rgba(var(--bs-light-rgb), .35);
  font-size: 14px;
}

#home-view {
  grid-column: span 2;
}

#home-view>* {
  max-width: 85ch;
  margin-inline: auto;
}

p {
  color: var(--bs-secondary);
}

kbd {
  background-color: var(--bs-black);
  color: var(--bs-secondary);
}

#test-response {
  font-size: 14px;
  font-family: 'Courier New', Courier, monospace;
}

#test-response>pre {
  background-color: unset;
  padding: 0;
  max-height: 500px;
  overflow: auto;
}

#test-response>pre:has(.error-json) {
  background-color: rgba(var(--bs-red-rgb), .2);
  padding: 0;
  max-height: 500px;
  overflow: auto;
}

.input-group>.input-group-text {
  min-width: 15ch;
}

section::-webkit-scrollbar {
  width: .35em;
}

section::-webkit-scrollbar-track {
  box-shadow: transparent;
}

section::-webkit-scrollbar-thumb {
  background-color: rgba(var(--bs-light-rgb), .42);
}

pre::-webkit-scrollbar {
  width: .35em;
  height: .35em;
}

pre::-webkit-scrollbar-track {
  box-shadow: rgba(var(--bs-indigo-rgb), .5);
}

pre::-webkit-scrollbar-thumb {
  background-color: rgba(var(--bs-indigo-light-rgb), .95);
}