html {
  font-size: 14px;
}

[v-cloak] {
  display: none;
}

.text-preserve {
  white-space: pre;
}

/* bootstrap tuning */
.text-muted {
  color: #989da1 !important;
}

.navbar {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

.form-label {
  margin-bottom: .3rem;
}

.alert-container {
  position: fixed;
  left: 0;
  top: 0.75rem;
  right: 0;
  margin-left: .75rem;
  margin-right: .75rem;
  z-index: 9999;
}

.alert-fixed {
  width: max-content;
  min-width: 30%;
  max-width: 100%;
  margin-right: auto;
  margin-left: auto;
}

.tooltip-inner {
  max-width:20rem;
  text-align: left;
}

.w-0 {
  width:0px;
}

.h-60 {
  height: 60%!important;
}

.border-start-4 {
  border-left-width: 4px !important;
}

/* make selected menu item more contrast */
.dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
}

/* scrollbars on firefox */
* {
  scrollbar-color: gray whitesmoke;
  scrollbar-width: thin;
}

/* scrollbars on webkit */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
  background-color: whitesmoke;
}

::-webkit-scrollbar-thumb {
  background-color: gray;
  border-radius: 3px;
}

/* elements */
#sidebar {
  width:14em;
}

/* components */
.region-type {
  display: inline-block;
  padding: 0 .2rem;
  font-size:.75rem;
  border-radius:.15rem;
  text-align: center;
}

.ticket-comment {
  background-color: #fcfae1;
}

.ticket-reply {
  background-color: #fce7e1;
}

[data-bs-theme=dark] .ticket-comment {
  background-color: #4f4a00;
}

[data-bs-theme=dark] .ticket-reply {
  background-color: #521200;
}

/* copy element text to clipboard */
.clickcopy {
  cursor:copy;
}

/* datagrid */
.datagrid {
}

.datagrid-header {
  margin-left: .75rem;
  margin-right: .75rem;
}

  .datagrid-header .row {
    font-weight: lighter;
    padding-top: .25rem;
    padding-bottom: .25rem;
    border-bottom: 1px solid var(--bs-border-color);
  }

  .datagrid-header .row > * {
    padding-left: .25rem;
    padding-right: .25rem;
  }

.datagrid-body {
  margin-left: .75rem;
  margin-right: .75rem;
}

  .datagrid-body > .row:last-of-type {
    border-bottom: 1px solid var(--bs-border-color);
  }

.datagrid-body > .row {
  padding-top: .25rem;
  padding-bottom: .25rem;
}

  .datagrid-body > .row:nth-child(odd) {
    background-color: rgba(150,150,150,.1);
  }

  .datagrid-body > .row > * {
    padding-left: .25rem;
    padding-right: .25rem;
  }