.tooltip {
    --bs-tooltip-bg: #090909F5;
    --bs-tooltip-color: white;
    --bs-tooltip-max-width: 360px;
}
body {
  margin: 0 auto;
  max-width: 1400px
}

div.submenu:not(:target) {
  display:none;
}

div.submenu:has(:target) {
    display: initial;
}
form.settings {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(20em, 1fr));
  justify-content: space-around;
  gap: 0.5em;
}
form.settings:has(textarea) {
    grid-template-columns: repeat(auto-fill, minmax(40em, 1fr));
}
.template > * {
    width: 100%;
}

@media (min-width: 768px) {
    .template > *:not(:has(.template)) {
        width: calc(50% - 1em);
    }
}

#theme-switch {
  margin-right: 2em
}

#logout-btn {
  & .blockquote {
    font-size: 1em
  }

  & .blockquote-footer {
    font-size: .75em; 
    margin-bottom: 0;
  }
}

.list-group-input {
  & label {
    flex: 1 1 auto;
  }

  & .input-group > * {
    border-radius: inherit;
  }

  & > * {
    &:first-child, &:only-child {
      border-top-left-radius: 0.25rem;
      border-top-right-radius: 0.25rem;
    }

    &:last-child, &:only-child {
      border-bottom-left-radius: 0.25rem;
      border-bottom-right-radius: 0.25rem;
    }

    & > *:not(:last-child) {
      border-right: none;
    }

    & > *:not(:first-child) {
      border-left: none;
    }

    & > *:last-child {
      border-bottom-left-radius: inherit;
      border-bottom-right-radius: inherit;
    }
  }

  & div[is="input-array"] > .input-group > * {
    border-top-width: 0;
  }

  & .array-input-button {
    cursor: pointer;
    user-select: none;
  }
}

.pending:not(.form-check-label):before, .pending.form-check-label:after {
  content: '◉';
  padding-right: 0.5em;
  color: orange;
}

.nav-link .badge {
  margin-left: 0.5em;
}

#resetBtn {
  margin-left: 0.5em;
}

.card-list li {
  flex: 1 1 274px;

  & a {
    text-decoration: none;
  }

  & .card {
    border-radius: 4px;
  }
}

.template-card {
  border-color: rgb(var(--template-color));  

  & > div:first-child {
    width: 88px;
    height: 100px; 
  }

  &:hover {
    background-color: rgba(var(--template-color), .25);
  }

  &:active {
    background-color: rgba(var(--template-color), .6);
  }

  /**
  * https://stackoverflow.com/a/980948
  * While ::after and ::before are normally ignored for <img> tags,
  * many browsers will display when the src is broken. This does not
  * work in Firefox and possibly others.
  **/
  & img:before {
    content: ' ';
    display: block;
    position: absolute;
    height: 100%;
    width: 88px;
    top: 0;
    background-image: url(/resources/question-mark.svg);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
  }
}

.section-card {
  &:hover {
    background-color: rgba(255, 255, 255, .05)
  }

  &:active {
    background-color: rgba(255, 255, 255, .15)
  }
}

.disabled-badge {
  display: block;
  bottom: .5em;
  right: .5em;
  text-align: right;
  line-height: 1em;
  position: absolute;
  font-size: .75em;
  color: rgb(139, 139, 139)
}
#buttonNav .nav-item, #reactNav .nav-item {
  min-width: 8em;
  text-align: center;
}
.form-control::placeholder {
    opacity: .5;
}

.object-navigation .object-navigation, .object-navigation fieldset {
    padding-left: 3em;
}

.array-edit > .input-group button {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.array-edit > .input-group button {
    border-top-right-radius: 0;
}

.array-edit > .input-group:not(:last-child) button {
    border-bottom-right-radius: 0;
}

.array-container-label {
    padding-top: 12px;
    margin-top: -6px;
    box-sizing: content-box;
    cursor: pointer;
}
.array-preview .badge {
    color: black;
}

input:invalid {
    border-color: red;
}

a.disabled-submenu {
    color: var(--bs-nav-link-disabled-color);
}
[for=date-after], [for=date-before] {
    width: 4em;
}