html {
  font-size: 14px;
}

[v-cloak] {
  display: none;
}

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

/* custom colors */
.bg-holiday {
  background-color: rgba(137, 228, 168, .30);
}

.bg-closed {
  background-color: rgba(255, 153, 51, .30);
}

/* bootstrap mod */
.list-group-item.active {
  background-color: var(--bs-primary-bg-subtle);
  border-color: var(--bs-primary-bg-subtle);
  color: var(--bs-primary-text-emphasis);
}

.text-muted {
  color: #989da1 !important;
}

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

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

.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;
}

a.disabled {
  pointer-events: none;
  cursor: default;
  color: var(--bs-gray) !important;
}

/* trim dropdown colors */
.dropdown-menu {
  --bs-dropdown-link-hover-bg: var(--bs-secondary-bg);
  --bs-dropdown-link-active-color: var(--bs-body-color);
  --bs-dropdown-link-active-bg: var(--bs-secondary-bg);
}

/* modal mod: lighter backdrop, draggable support */
.modal-backdrop {
  opacity: 0.15 !important;
}

.modal.draggable .modal-header {
  cursor: move;
}

.modal.draggable .modal-header .modal-title {
  cursor: auto;
}

.modal.fade .modal-dialog {
  transition: transform 0.15s ease-out; /* default is 0.3s */
}

/* fullcalendar: override time column width */
.fc-timegrid-axis-cushion {
  width:2.6em;
}

/* 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;
}

/* panel on lg+ resolution */
@media (min-width: 992px) {
  .panel {
    height: 28rem;
    max-height: 28rem;
  }

    .panel .card-body:not(.collapse:not(.show)) {
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }
}

/* 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;
}

  .clickcopy::after {
    content: " \f0c5";
    font-family: FontAwesome;
    font-size: .9em;
    opacity: .5;
  }

/* datagrid */
.datagrid {
  --datagrid-column-spacing: .25rem;
  --datagrid-icon-width: 1.38rem;

  display: flex;
  flex-direction: column;
  overflow: hidden;
  height: 100%;
}

.datagrid-header {
  flex: 0 0 auto;
}

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

    .datagrid-header .row > * {
      padding-left: 0;
      padding-right: var(--datagrid-column-spacing);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

      .datagrid-header .row > *:first-of-type {
        padding-left: var(--datagrid-column-spacing);
      }

.datagrid-body {
  flex: 1 1 auto;
  overflow: auto;
}

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

  .datagrid-body > .row {
    margin: 0;
    padding: .25rem 0;
  }

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

    .datagrid-body > .row > * {
      padding-left: 0;
      padding-right: var(--datagrid-column-spacing);
    }

      .datagrid-body > .row > *:first-of-type {
        padding-left: var(--datagrid-column-spacing);
      }

  /* columns sized to fit a fixed number of icons */
  .datagrid .col-icon-1 {
    width: calc(var(--datagrid-icon-width) + var(--datagrid-column-spacing));
    flex: 0 0 auto;
  }

  .datagrid .col-icon-2 {
    width: calc(var(--datagrid-icon-width) * 2 + var(--datagrid-column-spacing));
    flex: 0 0 auto;
  }

  .datagrid .col-icon-3 {
    width: calc(var(--datagrid-icon-width) * 3 + var(--datagrid-column-spacing));
    flex: 0 0 auto;
  }

  .datagrid .col-icon-4 {
    width: calc(var(--datagrid-icon-width) * 4 + var(--datagrid-column-spacing));
    flex: 0 0 auto;
  }