@import url("/assets/css/flatpickr.min.css?v=20260629-1508");

.avatar {
  border-radius: 50%;
  background-position: center;
  background-size: cover;
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400;
  src:
    local("Montserrat"),
    local("Montserrat Regular"),
    url("/assets/fonts/montserrat/Montserrat-Regular.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 500;
  src:
    local("Montserrat Medium"),
    url("/assets/fonts/montserrat/Montserrat-Medium.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 600;
  src:
    local("Montserrat SemiBold"),
    url("/assets/fonts/montserrat/Montserrat-SemiBold.ttf") format("truetype");
}

@font-face {
  font-display: swap;
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 700;
  src:
    local("Montserrat Bold"),
    url("/assets/fonts/montserrat/Montserrat-Bold.ttf") format("truetype");
}

:root {
  --tblr-font-sans-serif: "Montserrat", -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif;
  --tblr-body-font-size: 0.8rem;
  --tblr-body-font-weight: 400;
  --tblr-btn-font-size: 0.8rem;
  --app-button-padding-y: 0.4rem;
  --app-button-padding-x: 1.8rem;
  --app-button-border-radius: 2rem;
  --app-button-icon-gap: 0.1rem;
  --tblr-btn-padding-y: var(--app-button-padding-y);
  --tblr-btn-padding-x: var(--app-button-padding-x);
  --tblr-btn-border-radius: var(--app-button-border-radius);
  --tblr-dropdown-font-size: 0.8rem;
  --tblr-pagination-font-size: 0.8rem;
  --tblr-nav-link-font-size: var(--tblr-body-font-size);
  --tblr-font-size-h2: 1.25rem;
  --tblr-font-size-h3: 0.875rem;
  --tblr-font-size-h4: 0.75rem;
  --tblr-font-size-h5: 0.75rem;
  --app-font-size-control: var(--tblr-body-font-size);
  --app-font-size-small: var(--tblr-font-size-h5);
  --app-font-size-table-heading: var(--tblr-font-size-h5);
  --app-font-size-card-title: var(--tblr-font-size-h3);
  --app-font-size-header-dropdown: var(--tblr-dropdown-font-size);
  --app-font-size-form-title: var(--tblr-font-size-h2);
  --app-font-size-button: var(--tblr-btn-font-size);
  --app-font-size-profile-name: var(--tblr-font-size-h3);
  --app-font-size-audit-json: var(--tblr-body-font-size);
  --app-font-size-audit-calendar: var(--app-font-size-control);
  --app-font-size-report-title: var(--tblr-font-size-h2);
  --app-font-size-report-section-title: var(--tblr-font-size-h3);
  --app-font-size-report-metric: var(--tblr-font-size-h1, 1.5rem);
  --app-offcanvas-transition-duration: 0.5s;
  --app-offcanvas-transition-timing: cubic-bezier(0.22, 1, 0.36, 1);
  --app-checkbox-scale: 0.92;
  --app-checkbox-size: 0.92rem;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --app-offcanvas-transition-duration: 0.2ms;
  }
}

html,
body,
button,
input,
optgroup,
select,
textarea {
  font-family: var(--tblr-font-sans-serif);
  font-weight: var(--tblr-body-font-weight);
}

.badge,
.btn,
.card,
.dropdown-item,
.form-label,
.form-check-label,
.form-control,
.form-text,
.form-select,
.input-group-text,
.modal-title,
.nav-link,
.offcanvas-title,
.page-title,
.table {
  font-family: inherit;
  font-weight: inherit;
}

.btn {
  --tblr-btn-padding-y: var(--app-button-padding-y);
  --tblr-btn-padding-x: var(--app-button-padding-x);
  --tblr-btn-border-radius: var(--app-button-border-radius);
  align-items: center;
  display: inline-flex;
  gap: var(--app-button-icon-gap);
  justify-content: center;
}

.form-label,
.form-control,
.form-select,
.input-group-text {
  font-size: var(--app-font-size-control);
}

.form-text,
.text-secondary.small,
small,
.small {
  font-size: var(--app-font-size-small);
}

input::placeholder,
textarea::placeholder {
  font-family: inherit;
  font-weight: inherit;
}

.form-check:not(.form-switch) .form-check-input[type="checkbox"] {
  border-radius: 0.35rem;
  transform: scale(var(--app-checkbox-scale));
  transform-origin: center;
}

.form-selectgroup-check {
  border-radius: 0.35rem;
  height: var(--app-checkbox-size);
  width: var(--app-checkbox-size);
}

.app-role-permission-checkbox {
  position: relative;
  top: -2px;
}

.app-brand-shell {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0;
  min-width: 0;
  position: static;
}

.app-brand-shell > a {
  display: flex;
  align-items: center;
}

.app-brand-shell .navbar-brand-image {
  width: 85px !important;
  height: 23px !important;
}

header.navbar > .container-fluid {
  position: static;
}

@media (min-width: 1200.02px) {
  html[data-app-content-width="1200"] .page > header.navbar > .container-fluid,
  html[data-app-content-width="1200"] .page > .navbar-expand-md > .collapse > .navbar > .container-fluid,
  html[data-app-content-width="1200"] .page > .page-wrapper > .page-body > .container-fluid,
  html[data-app-content-width="1200"] .page > .page-wrapper > .app-footer-shell > .container-fluid {
    margin-inline: auto;
    max-width: 1200px;
  }

  html[data-app-content-width="1600"] .page > header.navbar > .container-fluid,
  html[data-app-content-width="1600"] .page > .navbar-expand-md > .collapse > .navbar > .container-fluid,
  html[data-app-content-width="1600"] .page > .page-wrapper > .page-body > .container-fluid,
  html[data-app-content-width="1600"] .page > .page-wrapper > .app-footer-shell > .container-fluid {
    margin-inline: auto;
    max-width: 1600px;
  }
}

#entityFormOffcanvas {
  --tblr-offcanvas-width: clamp(45vw, calc(822.86px - 12.143vw), 95vw);
  transform: translateX(calc(100% + 1.5rem));
  transition: transform var(--app-offcanvas-transition-duration) var(--app-offcanvas-transition-timing);
  will-change: transform;
}

.offcanvas-backdrop {
  transition: opacity var(--app-offcanvas-transition-duration) ease;
}

#entityFormOffcanvas.show,
#entityFormOffcanvas.showing {
  transform: translateX(0);
}

#entityFormOffcanvas.hiding,
#entityFormOffcanvas:not(.show):not(.showing) {
  transform: translateX(calc(100% + 1.5rem));
}

.app-alert-slot {
  left: 50%;
  max-width: min(calc(100vw - 2rem), 40rem);
  pointer-events: none;
  position: fixed;
  top: max(1rem, env(safe-area-inset-top, 0px));
  transform: translateX(-50%);
  width: fit-content;
  z-index: 1090;
}

.app-top-banner {
  background-color: var(--tblr-bg-surface, #ffffff);
  border-color: var(--tblr-border-color);
  box-shadow: 0 1rem 2.5rem rgba(15, 23, 42, 0.14);
  display: inline-flex;
  align-items: center;
  margin: 0;
  max-width: min(calc(100vw - 2rem), 40rem);
  opacity: 0;
  pointer-events: auto;
  transform: translateY(-1rem);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.app-top-banner-confirm {
  max-width: min(calc(100vw - 2rem), 44rem);
}

.app-top-banner-confirm__body {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
  width: 100%;
}

.app-top-banner-confirm__message {
  flex: 1 1 16rem;
  min-width: 12rem;
  font-weight: 500;
}

.app-top-banner-confirm__actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 0.75rem;
}

.app-top-banner-confirm__actions .btn {
  min-width: 8rem;
}

.app-top-banner.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.app-top-banner.is-hiding {
  opacity: 0;
  transform: translateY(-1rem);
}

[data-bs-theme="dark"] .app-top-banner {
  background-color: var(--tblr-dark, #1f2937);
  border-color: color-mix(in srgb, var(--tblr-dark, #1f2937) 78%, #ffffff 22%);
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.35);
}

@media (max-width: 576px) {
  .app-top-banner,
  .app-top-banner-confirm {
    max-width: calc(100vw - 1rem);
  }

  .app-top-banner-confirm__body {
    align-items: stretch;
  }

  .app-top-banner-confirm__actions {
    width: 100%;
  }

  .app-top-banner-confirm__actions .btn {
    flex: 1 1 0;
  }
}

.app-header-link,
.app-header-dropdown-item,
.app-header-icon-button,
.app-user-trigger {
  align-items: center;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-secondary);
  display: flex;
  font-size: var(--app-font-size-header-dropdown);
  gap: 0.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-user-menu,
.app-user-menu .dropdown-item,
.app-header-dropdown-item span {
  font-size: var(--app-font-size-header-dropdown);
}

.app-header-menu {
  justify-content: flex-start;
  margin-inline: 0;
  width: 100%;
}

@media (max-width: 767.98px) {
  header.navbar > .container-fluid {
    position: relative;
  }

  .app-brand-shell {
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
  }
}

.app-header-link,
.app-header-dropdown-item {
  min-height: 2.5rem;
}

.app-header-link {
  font-weight: 500;
  gap: 0.1rem;
  background-color: #ffffff;
  border: 1px solid #bfc1c6;
  padding: 0.6rem 1.8rem;
  margin: 0 1rem 0 0;
}

.app-header-menu > .nav-item > .app-header-link {
  border-radius: 2rem;
}

.app-header-icon-button {
  justify-content: center;
  min-height: 2.5rem;
  min-width: 2.5rem;
}

.app-user-trigger {
  padding: 0.375rem 0.5rem;
  text-decoration: none;
}

.app-header-link:hover,
.app-header-link:focus,
.app-header-icon-button:hover,
.app-header-icon-button:focus,
.app-user-trigger:hover,
.app-user-trigger:focus,
.nav-item.dropdown.show > .app-user-trigger,
.app-header-menu .nav-item.show > .app-header-link,
.app-header-dropdown-item:hover,
.app-header-dropdown-item:focus,
.app-user-menu .dropdown-item:hover,
.app-user-menu .dropdown-item:focus {
  /* background-color: var(--tblr-gray-100); */
  border-color: #066fd1;
  color: #066fd1;
}

.app-header-link:hover,
.app-header-link:focus,
.app-header-menu .nav-item.show > .app-header-link {
  background-color: #ffffff;
  border-color: #066fd1;
}

[data-bs-theme="dark"] .app-header-link {
  background-color: transparent;
}

[data-bs-theme="dark"] .app-header-link:hover,
[data-bs-theme="dark"] .app-header-link:focus,
[data-bs-theme="dark"] .app-header-icon-button:hover,
[data-bs-theme="dark"] .app-header-icon-button:focus,
[data-bs-theme="dark"] .app-user-trigger:hover,
[data-bs-theme="dark"] .app-user-trigger:focus,
[data-bs-theme="dark"] .nav-item.dropdown.show > .app-user-trigger,
[data-bs-theme="dark"] .app-header-menu .nav-item.show > .app-header-link,
[data-bs-theme="dark"] .app-header-dropdown-item:hover,
[data-bs-theme="dark"] .app-header-dropdown-item:focus,
[data-bs-theme="dark"] .app-user-menu .dropdown-item:hover,
[data-bs-theme="dark"] .app-user-menu .dropdown-item:focus {
  background-color: var(--tblr-dark-lt);
}

[data-bs-theme="dark"] .app-header-menu .nav-item.active > .app-header-link {
  background-color: color-mix(in srgb, var(--tblr-bg-surface) 88%, var(--tblr-primary) 12%);
}

.app-header-link:hover,
.app-header-link:focus,
.app-header-icon-button:hover,
.app-header-icon-button:focus,
.app-user-trigger:hover,
.app-user-trigger:focus,
.nav-item.dropdown.show > .app-user-trigger,
.app-header-menu .nav-item.show > .app-header-link,
.app-header-dropdown-item:hover,
.app-header-dropdown-item:focus,
.app-user-menu .dropdown-item:hover,
.app-user-menu .dropdown-item:focus {
  /* color: var(--tblr-body-color); */
  text-decoration: none;
  color: #066fd1;
}

.app-header-menu > .nav-item.active {
  /* !!! HEADER_ACTIVE_BLOCK_UNDERLINE_DISABLED !!! box-shadow: inset 0 -2px 0 var(--tblr-border-color-active); */
  border-bottom: 0 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.app-header-menu .nav-item.active > .app-header-link {
  /* color: var(--tblr-body-color); */
  color: #066fd1;
  background-color: #f1f5f9;
  /* border-bottom: 0 !important; */
  background-image: none !important;
  box-shadow: none !important;
  border: 1px solid #066fd1;
}

.app-header-menu > .nav-item.active::before,
.app-header-menu > .nav-item.active::after,
.app-header-menu .nav-item.active > .app-header-link::before,
.app-header-menu .nav-item.active > .app-header-link::after {
  content: none !important;
  border: 0 !important;
  background: none !important;
  box-shadow: none !important;
}

.app-header-menu .nav-item.active > .app-header-link .nav-link-icon,
.app-header-menu .nav-item.active > .app-header-link .icon {
  color: #066fd1;
}

.app-header-menu .nav-link-icon,
.app-header-dropdown-item .icon {
  flex: 0 0 auto;
}

.app-header-link .icon,
.app-header-dropdown-item .icon,
.app-header-icon-button .icon,
.app-user-trigger .icon {
  color: inherit;
  height: 1.25rem;
  stroke-width: 1.75;
  width: 1.25rem;
}

.app-header-link .nav-link-title,
.app-header-dropdown-item span {
  line-height: 1.25rem;
}

.app-user-menu .app-header-dropdown-item span {
  line-height: 1.5;
}

.app-user-menu .dropdown-divider {
  margin: 0;
}

.app-user-trigger #appUserName {
  color: inherit;
  font-size: var(--app-font-size-profile-name);
  font-weight: var(--tblr-font-weight-medium);
}

.app-user-trigger:hover #appUserMeta,
.app-user-trigger:focus #appUserMeta,
.nav-item.dropdown.show > .app-user-trigger #appUserMeta {
  color: inherit !important;
}

.app-theme-toggle {
  align-items: center;
  background-color: transparent;
  border: 0;
  cursor: pointer;
  line-height: 1;
  padding: 0.5rem;
}

.app-theme-toggle span {
  display: inline-flex;
}

@media (max-width: 575.98px) {
  .app-alert-slot {
    max-width: calc(100vw - 1rem);
    top: max(0.75rem, env(safe-area-inset-top, 0px));
  }

  .app-top-banner {
    max-width: calc(100vw - 1rem);
  }
}

.app-footer-shell {
  border-top: 1px solid var(--tblr-border-color);
  margin-top: auto;
  padding-block: 1rem;
}

.app-footer-brand {
  align-items: flex-start;
  display: flex;
  gap: 0.875rem;
}

.app-footer-logo-wrap {
  align-items: center;
  background-color: var(--tblr-primary-lt);
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-primary);
  display: inline-flex;
  flex: 0 0 auto;
  height: 2.25rem;
  justify-content: center;
  width: 2.25rem;
}

.app-footer-logo {
  display: block;
}

.app-footer-title {
  color: var(--tblr-body-color);
  font-weight: var(--tblr-font-weight-semibold);
  line-height: 1.25rem;
  margin-bottom: 0.125rem;
}

.app-footer-meta {
  color: var(--tblr-secondary);
  font-size: var(--app-font-size-control);
  line-height: 1.4;
}

.app-footer-links {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.app-footer-link {
  color: var(--tblr-secondary);
  font-size: var(--app-font-size-control);
  font-weight: var(--tblr-font-weight-medium);
  text-decoration: none;
  transition: color 0.2s ease;
}

.app-footer-link:hover,
.app-footer-link:focus {
  color: var(--tblr-primary);
  text-decoration: none;
}

.app-table-toolbar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  width: 100%;
}

.app-table-toolbar--title-only {
  justify-content: flex-start;
}

.card-title,
.app-table-toolbar .card-title {
  font-size: var(--app-font-size-card-title);
  margin-bottom: 0;
}

.app-table-card-header,
.app-table-pagination-header {
  padding: 1rem 1.25rem;
}

.app-table-card-header {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.app-table-card-footer {
  padding: 1.125rem 1.25rem;
}

.app-table-pagination-header {
  border-top: 0;
}

.app-table-pagination-slot {
  width: 100%;
}

.app-table-pagination-bar {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: space-between;
  width: 100%;
}

.app-table-pagination-pages:empty {
  display: none;
}

.app-table-pagination-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.app-table-pagination-bar-top {
  justify-content: space-between;
}

.app-table-pagination-actions-top {
  justify-content: flex-start;
}

.app-table-pagination-bar-bottom {
  justify-content: space-between;
}

.app-table-pagination-bar-bottom .app-table-pagination-summary {
  flex: 1 1 0;
}

.app-table-pagination-bar-bottom .app-table-pagination-pages {
  display: flex;
  flex: 1 1 0;
  justify-content: flex-end;
}

.app-table-pagination-summary {
  font-size: var(--app-font-size-control);
  white-space: nowrap;
}

.app-table-pagination-bulk-actions {
  display: flex;
  flex: 0 1 20rem;
  justify-content: center;
  min-width: 0;
}

.app-table-bulk-actions {
  max-width: 20rem;
  width: 100%;
}

.app-table-pagination-pages .page-link,
.app-table-limit-control .form-select,
.app-table-bulk-actions .form-select,
.app-table-create-button,
.app-table-actions-cell .dropdown-menu,
.app-table-actions-cell .dropdown-menu .dropdown-item {
  font-size: var(--app-font-size-control);
}

.app-table-limit-control {
  display: inline-flex;
  margin: 0;
}

.ts-wrapper {
  height: 36px;
  width: 100%;
}

.ts-wrapper .ts-control {
  align-items: center;
  display: flex;
  height: 36px;
  min-height: 36px;
}

.ts-wrapper.disabled .ts-control {
  background-color: var(--tblr-bg-surface-secondary, var(--tblr-gray-100));
  color: var(--tblr-secondary, var(--tblr-gray-600));
  opacity: 1;
}

.ts-wrapper.disabled .ts-control .item {
  color: inherit;
}

.ts-dropdown {
  background-color: var(--tblr-bg-surface, var(--bs-body-bg, #fff));
  color: var(--tblr-body-color, var(--bs-body-color, #182433));
}

.ts-dropdown .ts-dropdown-content {
  max-height: calc(2rem * 8 + 0.625rem);
}

.ts-dropdown .option {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  min-height: 2rem;
}

.profile-page-card {
  overflow: hidden;
}

#profileSidebarNav .list-group-item,
#profileSidebarNav .list-group-item:hover,
#profileSidebarNav .list-group-item:focus,
#profileSidebarNav .list-group-item.active,
#profileSidebarNav .list-group-item.active:hover,
#profileSidebarNav .list-group-item.active:focus {
  align-items: center;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  gap: 0.75rem;
  line-height: 1.5;
  margin: 0;
  min-height: 3.5rem;
  padding-inline: 1rem;
}

#profileSidebarNav .list-group-item:hover,
#profileSidebarNav .list-group-item:focus {
  background-color: #f0f1f1;
  color: var(--tblr-body-color);
}

#profileSidebarNav .list-group-item.active,
#profileSidebarNav .list-group-item.active:hover,
#profileSidebarNav .list-group-item.active:focus {
  background-color: #f1f7fc;
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] #profileSidebarNav .list-group-item:hover,
[data-bs-theme="dark"] #profileSidebarNav .list-group-item:focus {
  background-color: var(--tblr-dark-lt);
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] #profileSidebarNav .list-group-item.active,
[data-bs-theme="dark"] #profileSidebarNav .list-group-item.active:hover,
[data-bs-theme="dark"] #profileSidebarNav .list-group-item.active:focus {
  background-color: color-mix(in srgb, var(--tblr-bg-surface) 88%, var(--tblr-primary) 12%);
  color: var(--tblr-body-color);
}

.profile-sidebar-nav-icon {
  align-items: center;
  color: inherit;
  display: inline-flex;
  flex: 0 0 auto;
}

.profile-sidebar-nav-icon .icon {
  color: inherit;
  height: 1.125rem;
  width: 1.125rem;
}

.profile-sidebar-nav-label {
  min-width: 0;
}

.profile-page-body {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.5rem;
}

.profile-page-section {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.profile-page-avatar-row {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.profile-page-avatar {
  --app-fallback-avatar-font-size: 1.36rem;
  flex: 0 0 auto;
  height: 4rem;
  width: 4rem;
}

#appUserAvatar {
  --app-fallback-avatar-font-size: 0.51rem;
}

.profile-page-avatar-meta {
  display: flex;
  flex: 1 1 18rem;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

.profile-page-avatar-hint {
  max-width: 36rem;
}

#profileFullName {
  font-size: var(--app-font-size-profile-name) !important;
}

#profileAvatarButton,
#profileAvatarDeleteButton,
#profileResetButton,
#profileEditButton,
#profilePasswordButton,
#profileLogoutAllButton,
#profileInterfaceResetButton,
#profileInterfaceSaveButton,
#notificationsMarkAllButton,
#entityFormOffcanvas .btn,
#entityFormModal .btn,
#auditFilterForm .btn,
#profileFormModeText {
  font-size: var(--app-font-size-button);
}

#auditFilterForm .audit-filter-datetime-col {
  flex: 0 0 auto;
  width: auto;
}

.audit-filter-form-row {
  row-gap: 0.75rem;
}

.audit-filter-user-col {
  min-width: 0;
}

.audit-filter-datetime-input {
  width: min(100%, 15rem);
}

.audit-filter-separator-col {
  display: flex;
  align-items: center;
  align-self: center;
  justify-content: center;
  flex: 0 0 auto;
  width: auto;
}

.audit-filter-separator {
  display: inline-flex;
  align-items: center;
  min-height: var(--tblr-form-control-height);
  color: var(--tblr-secondary);
  font-size: 1.125rem;
  line-height: 1;
}

.audit-filter-actions-col {
  display: flex;
  align-items: flex-end;
  margin-left: auto;
  min-width: max-content;
}

.audit-filter-actions-col .btn-list {
  width: 100%;
  margin-top: 0;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

@media (max-width: 767.98px) {
  .audit-filter-actions-col {
    margin-left: 0;
    min-width: 0;
  }

  .audit-filter-actions-col .btn-list {
    justify-content: flex-start;
  }
}

.audit-filter-datetime-input .input-icon-addon {
  pointer-events: none;
}

.audit-filter-datetime-input .icon {
  color: var(--tblr-secondary);
}

.audit-filter-datetime-input .form-control,
.audit-filter-datetime-input .audit-filter-datetime-control {
  min-width: 0;
}

.audit-filter-datetime-control[readonly] {
  background-color: var(--tblr-bg-surface);
  cursor: pointer;
}

.flatpickr-calendar {
  background: var(--tblr-bg-surface);
  border: 1px solid var(--tblr-border-color);
  border-radius: calc(var(--tblr-border-radius) * 1.5);
  box-shadow: 0 1rem 2rem rgba(15, 23, 42, 0.16);
  color: var(--tblr-body-color);
  font-family: inherit;
  font-size: var(--app-font-size-audit-calendar);
}

.flatpickr-calendar.arrowTop::before {
  border-bottom-color: var(--tblr-border-color);
}

.flatpickr-calendar.arrowTop::after {
  border-bottom-color: var(--tblr-bg-surface);
}

.flatpickr-calendar.arrowBottom::before {
  border-top-color: var(--tblr-border-color);
}

.flatpickr-calendar.arrowBottom::after {
  border-top-color: var(--tblr-bg-surface);
}

.flatpickr-months .flatpickr-month,
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month,
.flatpickr-current-month input.cur-year,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-weekday,
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--tblr-body-color);
  fill: currentColor;
  font-family: inherit;
}

.flatpickr-current-month span.cur-month:hover,
.flatpickr-current-month .flatpickr-monthDropdown-months:hover {
  background: transparent;
  color: var(--tblr-body-color);
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--tblr-gray-400);
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  background: transparent;
  color: var(--tblr-gray-400);
}

.flatpickr-months {
  align-items: center;
  min-height: 3rem;
  padding: 0.25rem 0.5rem 0;
  position: relative;
}

.flatpickr-months .flatpickr-month {
  align-items: center;
  display: flex;
  height: 3rem;
  justify-content: center;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  align-items: center;
  display: flex;
  height: 2.5rem;
  justify-content: center;
  padding: 0;
  top: calc(0.25rem + 1.5rem);
  transform: translateY(-50%);
  width: 2.5rem;
}

.flatpickr-current-month {
  align-items: center;
  display: flex;
  font-size: 116.5%;
  gap: 0;
  height: 100%;
  justify-content: center;
  left: 0;
  padding: 0 2.75rem;
  position: static;
  transform: none;
  width: 100%;
}

.flatpickr-current-month span.cur-month,
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  align-self: center;
  line-height: 1.2;
  margin: 0;
  vertical-align: middle;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  font-weight: 700;
  padding: 0;
}

.flatpickr-current-month .numInputWrapper {
  align-items: stretch;
  display: inline-flex;
  height: 2rem;
  margin-left: 0;
  min-width: 5.75rem;
  width: 5.75rem;
}

.flatpickr-current-month input.cur-year {
  font-weight: 600;
  padding: 0 calc(1.75rem + 1em) 0 0.35rem;
  text-align: center;
  width: 100%;
}

.flatpickr-current-month .numInputWrapper span {
  align-items: center;
  display: flex;
  height: 50%;
  justify-content: center;
  opacity: 1;
  padding: 0;
  width: 1.75rem;
}

.flatpickr-weekday,
.flatpickr-weekwrapper .flatpickr-weekday {
  color: var(--tblr-secondary);
  font-weight: 600;
}

.flatpickr-day {
  border-radius: var(--tblr-border-radius-pill, 999px);
  color: var(--tblr-body-color);
  height: 29.25px;
  line-height: 29.25px;
  margin: 4.875px;
  max-width: 29.25px;
}

.flatpickr-day:hover,
.flatpickr-day:focus,
.flatpickr-day.inRange,
.flatpickr-day.prevMonthDay.inRange,
.flatpickr-day.nextMonthDay.inRange {
  background: var(--tblr-primary-lt);
  border-color: var(--tblr-primary-lt);
  color: var(--tblr-primary);
}

.flatpickr-day.today {
  border-color: var(--tblr-primary);
  color: var(--tblr-primary);
}

.flatpickr-day.today:hover,
.flatpickr-day.today:focus,
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange {
  background: var(--tblr-primary);
  border-color: var(--tblr-primary);
  color: var(--tblr-primary-fg, #fff);
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay,
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--tblr-secondary);
  opacity: 0.45;
}

.flatpickr-time,
.flatpickr-calendar.hasTime .flatpickr-time {
  border-top-color: var(--tblr-border-color);
  height: 3.5rem;
  line-height: 3.5rem;
  max-height: 3.5rem;
  padding-inline: 0.25rem;
}

.flatpickr-time .numInputWrapper {
  height: 3rem;
  margin: 0.25rem 0;
  width: 46%;
}

.flatpickr-time.time24hr .numInputWrapper {
  width: 46%;
}

.flatpickr-time .flatpickr-time-separator {
  font-size: 1.125rem;
  width: 8%;
}

.flatpickr-time input {
  font-size: 1rem;
  font-weight: 600;
  padding-right: 1.9rem;
}

.numInputWrapper span {
  border-color: var(--tblr-border-color);
  opacity: 1;
  padding: 0;
  right: 0;
  width: 1.75rem;
}

.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown {
  align-items: center;
  display: flex;
  justify-content: center;
}

.numInputWrapper span.arrowUp {
  height: 50%;
}

.numInputWrapper span.arrowDown {
  height: 50%;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:hover,
.flatpickr-time .flatpickr-am-pm:focus,
.numInputWrapper:hover {
  background: var(--tblr-bg-surface-secondary, var(--tblr-gray-100));
}

.numInputWrapper span.arrowUp::after {
  border-bottom-color: var(--tblr-secondary);
  top: auto;
}

.numInputWrapper span.arrowDown::after {
  border-top-color: var(--tblr-secondary);
  top: auto;
}

[data-bs-theme="dark"] .flatpickr-calendar {
  box-shadow: 0 1rem 2.5rem rgba(0, 0, 0, 0.45);
}

#entityFormOffcanvasTitle,
#entityFormModalTitle {
  font-size: var(--app-font-size-form-title);
}

.profile-page-nav-placeholder {
  color: var(--tblr-secondary);
  cursor: default;
}

.profile-page-nav-placeholder:hover,
.profile-page-nav-placeholder:focus {
  background-color: transparent;
  color: var(--tblr-secondary);
}

.profile-page-static-field {
  border: 0;
  border-radius: 0;
  margin: 0;
  min-height: 2.5rem;
  padding: 0.625rem 0;
}

.profile-page-action-row {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  padding: 0;
}

.profile-page-action-control {
  flex: 0 0 min(100%, 18rem);
  width: min(100%, 18rem);
}

.profile-page-footer {
  align-items: center;
  border-top: 1px solid var(--tblr-border-color);
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding-top: 1.5rem;
}

@media (max-width: 767.98px) {
  .profile-page-body {
    padding: 1.25rem;
  }

  .profile-page-action-row,
  .profile-page-footer {
    align-items: flex-start;
    flex-direction: column;
  }

  .profile-page-action-control {
    flex-basis: auto;
    width: 100%;
  }
}

.app-table-limit-control .form-select {
  min-width: 4.1rem;
  width: 4.1rem;
}

.app-table-pagination-pages .pagination {
  gap: 0.25rem;
}

.app-table-pagination-pages .page-link {
  align-items: center;
  border-radius: 1rem;
  border-color: transparent;
  color: #000000;
  display: inline-flex;
  height: 1.7rem;
  justify-content: center;
  min-width: 1.2rem;
  padding: 0 0.6375rem;
}

.app-table-pagination-pages .page-link:hover,
.app-table-pagination-pages .page-link:focus {
  border-color: transparent;
  color: #000000;
}

.app-table-pagination-pages .page-item.active .page-link {
  background-color: #ececec;
  border-color: #cbcbcb;
  color: #343434;
}

.app-table-pagination-pages .page-item.disabled .page-link {
  border-color: transparent;
  color: #000000;
  opacity: 0.45;
}

.app-table-pagination-pages .page-link .icon {
  height: 1rem;
  width: 1rem;
}

.app-table-message {
  padding-block: 1rem;
}

.app-table {
  margin-bottom: 0;
}

.app-table-card,
.app-table-responsive,
.app-table-actions-cell,
.app-table-actions-cell .dropdown {
  overflow: visible;
  position: relative;
}

.app-table > :not(caption) > * > * {
  border-bottom-color: var(--tblr-border-color);
}

.app-table > thead th {
  background: color-mix(in srgb, var(--tblr-bg-surface) 96%, var(--tblr-primary) 4%);
  color: var(--tblr-secondary-color);
  font-size: var(--app-font-size-table-heading);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-table tbody td {
  padding-block: 0.5rem;
  vertical-align: middle;
}

.app-table tbody tr:last-child td {
  border-bottom: 0;
}

.app-table-cell-title {
  font-weight: var(--tblr-font-weight-medium);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-table-cell-single-line {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-table-cell-content {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-table .badge {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  white-space: nowrap;
}

.app-role-list {
  color: inherit;
  display: inline-block;
  line-height: 1.5;
  max-width: 100%;
  vertical-align: top;
  white-space: normal;
}

.app-role-list__item {
  display: inline;
  overflow-wrap: anywhere;
}

.app-user-role-options {
  gap: 0;
}

.app-user-role-option {
  line-height: 1.5;
  margin-bottom: 0;
}

.app-user-role-option .form-check-label {
  line-height: 1.5;
}

.app-form-switch-row {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.app-status-indicator {
  align-items: center;
  color: inherit;
  display: inline-flex;
  gap: 0.625rem;
  max-width: 100%;
  vertical-align: middle;
}

.app-status-indicator__dot {
  background-color: var(--tblr-secondary);
  border-radius: 50%;
  display: inline-block;
  flex: 0 0 auto;
  height: 0.6rem;
  width: 0.6rem;
}

.app-status-indicator__dot--success {
  background-color: var(--tblr-green);
}

.app-status-indicator__dot--green {
  background-color: var(--tblr-green);
}

.app-status-indicator__dot--danger,
.app-status-indicator__dot--red {
  background-color: var(--tblr-red);
}

.app-status-indicator__dot--secondary {
  background-color: var(--tblr-secondary);
}

.app-status-indicator__label {
  display: inline-block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-table-select-column,
.app-table-select-cell {
  padding-inline: 0.5rem !important;
  text-align: center;
  vertical-align: middle !important;
  text-align: center;
  white-space: nowrap;
  width: 1%;
}

.app-table-select-all-wrap,
.app-table-select-row-wrap {
  align-items: center;
  display: inline-flex;
  justify-content: center;
  min-height: 1.5rem;
  position: relative;
  top: 2px;
}

.app-table-select-all-wrap .form-check-input:checked,
.app-table-select-row-wrap .form-check-input:checked {
  background-color: #1f78d1;
  border-color: #1f78d1;
}

.app-table-create-button {
  align-items: center;
  background-color: #1f78d1;
  border-color: #1f78d1;
  display: inline-flex;
  gap: var(--app-button-icon-gap);
  padding: var(--app-button-padding-y) var(--app-button-padding-x);
  border-radius: var(--app-button-border-radius);
}

.app-table-create-button:hover,
.app-table-create-button:focus,
.app-table-create-button:active {
  background-color: #1769ba;
  border-color: #1769ba;
}

.app-table-create-button .icon {
  height: 1rem;
  stroke-width: 2;
  width: 1rem;
}

.app-table-actions-cell {
  text-align: right;
  width: 1%;
}

.app-table-actions-cell .dropdown {
  display: inline-flex;
}

.app-table-actions-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #a7a7a7;
  display: inline-flex;
  justify-content: center;
  line-height: 1;
  min-height: auto;
  min-width: auto;
  padding: 0;
}

.app-table-actions-toggle:hover,
.app-table-actions-toggle:focus,
.app-table-actions-toggle:focus-visible,
.app-table-actions-toggle:active {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #000000;
  outline: none;
}

.app-table-actions-toggle .icon {
  height: 1.275rem;
  width: 1.275rem;
}

.app-table-actions-cell .dropdown-menu {
  z-index: 1080;
}

.app-table-dropdown-item {
  align-items: center;
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-secondary);
  display: flex;
  gap: 0.5rem;
  min-height: 2.5rem;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.app-table-dropdown-item:hover,
.app-table-dropdown-item:focus {
  background-color: var(--tblr-gray-100);
  color: var(--tblr-body-color);
  text-decoration: none;
}

[data-bs-theme="dark"] .app-table-dropdown-item:hover,
[data-bs-theme="dark"] .app-table-dropdown-item:focus {
  background-color: var(--tblr-dark-lt);
}

.app-table-dropdown-item .icon {
  color: inherit;
  flex: 0 0 auto;
  height: 1.25rem;
  stroke-width: 1.75;
  width: 1.25rem;
}

.app-table-dropdown-item span {
  line-height: 1.5;
}

.app-table-dropdown-item.text-danger,
.app-table-dropdown-item.text-danger:hover,
.app-table-dropdown-item.text-danger:focus {
  color: var(--tblr-danger);
}

.app-table-id-cell {
  white-space: nowrap;
  width: 1%;
}

.app-audit-event-badge {
  max-width: 100%;
  white-space: normal;
}

.app-json-view {
  background: var(--tblr-bg-surface-secondary);
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
  color: var(--tblr-body-color);
  font-size: var(--app-font-size-audit-json);
  line-height: 1.55;
  margin: 0;
  max-height: min(70vh, 900px);
  overflow: auto;
  padding: 1rem;
  white-space: pre-wrap;
  word-break: break-word;
}

.app-report-document {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.app-report-header {
  border-bottom: 1px solid var(--tblr-border-color);
  padding-bottom: 1rem;
}

.app-report-title {
  font-size: var(--app-font-size-report-title);
  margin: 0 0 0.25rem;
}

.app-report-section {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.app-report-section-title {
  font-size: var(--app-font-size-report-section-title);
  margin: 0;
}

.app-report-metric-card {
  height: 100%;
}

.security-center-filter-form {
  align-items: flex-end;
}

.security-center-filter-actions {
  display: flex;
  justify-content: flex-end;
}

.security-summary-card {
  height: 100%;
}

.security-summary-card__value {
  font-size: var(--app-font-size-report-metric);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.375rem;
}

.app-security-cell-stack {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.app-system-status-card {
  height: 100%;
}

.app-system-status-card__facts {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  margin-top: 1rem;
}

.app-system-status-card__fact {
  background: var(--tblr-bg-surface-secondary, var(--tblr-gray-100));
  border: 1px solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius-lg);
  padding: 0.75rem;
}

.app-system-status-card__fact-label {
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  line-height: 1.2;
  margin-bottom: 0.375rem;
  text-transform: uppercase;
}

.app-system-status-card__fact-value {
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.app-system-status-card__list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1rem;
}

.app-system-status-card__list-item {
  align-items: flex-start;
  border-top: 1px solid var(--tblr-border-color);
  display: flex;
  gap: 0.75rem;
  padding-top: 0.5rem;
}

.app-system-status-card__list-item:first-child {
  border-top: 0;
  padding-top: 0;
}

.app-system-status-card__list-body {
  min-width: 0;
}

.app-system-status-card__list-title {
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.35;
}

.app-system-status-card__list-meta {
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  line-height: 1.35;
  margin-top: 0.125rem;
}

.app-system-status-summary-card {
  height: 100%;
}

.app-security-user-link {
  color: inherit;
  font-weight: 500;
  text-decoration: none;
}

.app-security-user-link:hover,
.app-security-user-link:focus {
  color: var(--tblr-primary);
  text-decoration: underline;
}

.app-report-metric-value {
  font-size: var(--app-font-size-report-metric);
  font-weight: 700;
  line-height: 1.1;
  margin-top: 0.375rem;
}

.app-report-definition-list {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  margin: 0;
}

.app-report-definition-row {
  display: grid;
  gap: 0.35rem;
  grid-template-columns: minmax(180px, 240px) minmax(0, 1fr);
}

.app-report-definition-row dt {
  color: var(--tblr-secondary);
  font-weight: 600;
  margin: 0;
}

.app-report-definition-row dd {
  margin: 0;
}

.app-report-table td,
.app-report-table th {
  font-size: var(--app-font-size-control);
  vertical-align: top;
}

.app-report-table th,
.app-report-table thead th {
  font-size: var(--app-font-size-table-heading);
}

.mobile-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  .app-table-toolbar,
  .app-table-pagination-bar,
  .app-table-pagination-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .app-table-pagination-bar-top,
  .app-table-pagination-bar-bottom,
  .app-table-pagination-actions-top {
    justify-content: flex-start;
  }

  .app-table-limit-control .form-select {
    width: 100%;
  }

  .app-report-definition-row {
    grid-template-columns: 1fr;
  }

  .app-table-responsive .table thead {
    border: 0;
    clip: rect(0, 0, 0, 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
  }

  .app-table-responsive .table tbody,
  .app-table-responsive .table tr,
  .app-table-responsive .table td {
    display: block;
    width: 100%;
  }

  .app-table-responsive .table tbody tr {
    background: var(--tblr-bg-surface, #ffffff);
    border: 1px solid var(--tblr-border-color);
    border-radius: var(--tblr-border-radius, 4px);
    margin-bottom: 0.75rem;
    overflow: hidden;
  }

  .app-table-responsive .table tbody tr:last-child {
    margin-bottom: 0;
  }

  .app-table-responsive .table tbody td {
    border: 0;
    border-bottom: 1px solid var(--tblr-border-color);
    min-width: 0;
    overflow-wrap: anywhere;
    padding: 0.75rem;
    text-align: left;
    word-break: break-word;
  }

  .app-table-responsive .table tbody td::before {
    color: var(--tblr-secondary);
    content: attr(data-label);
    font-size: var(--app-font-size-table-heading);
    font-weight: var(--tblr-font-weight-semibold);
    letter-spacing: 0.02em;
    margin-bottom: 0.25rem;
    display: block;
    text-transform: uppercase;
  }

  .app-table-responsive .table tbody td:not([data-label])::before,
  .app-table-responsive .table tbody td[data-label=""]::before {
    content: none;
  }

  .app-table-responsive .table tbody td > *:last-child {
    min-width: 0;
  }

  .app-table-responsive .table tbody td:last-child {
    border-bottom: 0;
  }

  .app-table-responsive .table tbody td[colspan] {
    display: table-cell;
    padding: 1rem;
  }

  .app-table-responsive .table tbody td[colspan]::before {
    content: none;
  }

  .app-table-actions-cell {
    text-align: left;
  }

  .app-table-actions-cell .dropdown {
    display: flex;
  }

  .app-form-switch-row {
    align-items: flex-start;
    flex-direction: column;
  }

}

.app-messages-page,
.app-messages-layout,
.app-messages-sidebar-card,
.app-messages-thread-card,
.app-messages-sidebar-body,
.app-messages-thread-body,
.app-messages-history-panel {
  min-height: 0;
  min-width: 0;
}

.app-messages-page {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  height: 100%;
}

.app-messages-layout {
  display: grid;
  gap: 1rem;
  grid-template-columns: clamp(320px, 34vw, 440px) minmax(0, 1fr);
  height: 100%;
}

.app-messages-sidebar-card,
.app-messages-thread-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.app-messages-sidebar-header,
.app-messages-thread-header,
.app-messages-composer {
  flex: 0 0 auto;
}

.app-messages-sidebar-header,
.app-messages-thread-header {
  background: var(--tblr-bg-surface, #fff);
  position: sticky;
  top: 0;
  z-index: 2;
}

.app-messages-sidebar-header {
  padding: 0.75rem 1rem;
}

.app-messages-sidebar-topbar,
.app-messages-thread-topbar {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.app-messages-sidebar-topbar {
  width: 100%;
  justify-content: flex-end;
}

.app-messages-sidebar-title {
  color: var(--tblr-body-color);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.25;
  margin-right: auto;
}

.app-messages-icon-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  color: var(--tblr-body-color);
  display: inline-flex;
  height: 2.5rem;
  justify-content: center;
  padding: 0.5rem;
  width: 2.5rem;
}

.app-messages-icon-button:hover,
.app-messages-icon-button:focus-visible,
.app-messages-icon-button.is-active {
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
}

.app-messages-attachment-button {
  align-self: end;
  height: 1.95rem;
  line-height: 1;
  min-height: 1.95rem;
  min-width: 1.95rem;
  padding: 0;
  width: 1.95rem;
}

.app-messages-attachment-button:hover,
.app-messages-attachment-button:focus-visible,
.app-messages-attachment-button.is-active {
  background: transparent;
  outline: 0;
}

.app-messages-attachment-button__icon {
  background-color: #adb5bd;
  display: block;
  height: 1.35375rem;
  mask: url("/plus-circle-svgrepo-com.svg") center / contain no-repeat;
  transition: background-color 0.2s ease;
  width: 1.35375rem;
  -webkit-mask: url("/plus-circle-svgrepo-com.svg") center / contain no-repeat;
}

.app-messages-attachment-button:not(:disabled):hover .app-messages-attachment-button__icon,
.app-messages-attachment-button:focus-visible .app-messages-attachment-button__icon,
.app-messages-attachment-button.is-active .app-messages-attachment-button__icon {
  background-color: #2bb3b1;
}

.app-messages-attachment-button:disabled {
  cursor: not-allowed;
  filter: grayscale(1) opacity(0.35);
}

.app-messages-icon {
  display: block;
  height: 1.25rem;
  width: 1.25rem;
}

.app-messages-conversation-search,
.app-messages-recipient-search {
  min-width: 0;
}

.app-messages-filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

.app-messages-filter-bar .btn {
  flex: 1 1 auto;
}

.app-messages-sidebar-body,
.app-messages-thread-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  overflow: hidden;
  padding: 0;
}

.app-messages-sidebar-scroll,
.app-messages-history {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

.app-messages-sidebar-scroll {
  padding: 0;
}

.app-messages-conversation-list {
  padding: 0;
}

.app-messages-conversation-item {
  border: 0;
  border-radius: 0;
  padding: 0.875rem 1rem;
  text-align: left;
}

.app-messages-conversation-item + .app-messages-conversation-item {
  border-top: 1px solid var(--tblr-border-color);
}

.app-messages-conversation-item:hover,
.app-messages-conversation-item:focus,
.app-messages-conversation-item.active,
.app-messages-conversation-item[aria-current="page"] {
  background: color-mix(in srgb, var(--tblr-bg-surface) 88%, var(--tblr-primary) 12%);
  color: inherit;
}

.app-messages-conversation-item__layout {
  align-items: center;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.app-messages-conversation-item__content {
  min-width: 0;
}

.app-messages-conversation-item__heading,
.app-messages-conversation-item__preview-row {
  align-items: center;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  min-width: 0;
}

.app-messages-conversation-item__heading {
  margin-bottom: 0.25rem;
}

.app-messages-conversation-item__title,
.app-messages-conversation-item__preview,
.app-messages-conversation-item__time {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-messages-conversation-item__title {
  font-size: var(--tblr-body-font-size);
  font-weight: 600;
}

.app-messages-conversation-item__preview-row {
  align-items: flex-start;
}

.app-messages-conversation-item__preview {
  flex: 1 1 auto;
}

.app-messages-conversation-item__meta {
  align-items: flex-end;
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 0.375rem;
}

.app-messages-avatar {
  --app-fallback-avatar-font-size: 0.94rem;
  align-items: center;
  background: color-mix(in srgb, var(--tblr-primary) 14%, var(--tblr-bg-surface-secondary, #f3f4f6));
  border-radius: 999px;
  color: var(--tblr-primary);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 0.8125rem;
  font-weight: 700;
  height: 2.75rem;
  justify-content: center;
  line-height: 1;
  width: 2.75rem;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.app-messages-avatar__image {
  border-radius: inherit;
  display: block;
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.app-fallback-avatar {
  align-items: center;
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  border: 1px solid var(--tblr-border-color);
  border-radius: 50%;
  box-shadow: none;
  color: var(--tblr-secondary);
  display: inline-flex;
  font-family: inherit;
  font-size: var(--app-fallback-avatar-font-size, 0.75rem);
  font-weight: 500;
  justify-content: center;
  line-height: 1;
  text-align: center;
}

.app-messages-thread-topbar {
  align-items: flex-start;
  width: 100%;
}

.app-messages-thread-identity {
  align-items: center;
  display: flex;
  flex: 1 1 auto;
  gap: 0.875rem;
  min-width: 0;
}

.app-messages-thread-avatar {
  --app-fallback-avatar-font-size: 1.02rem;
  height: 3rem;
  width: 3rem;
}

#messagesThreadTitle {
  font-size: var(--tblr-body-font-size);
}

.app-messages-thread-actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.25rem;
  justify-content: flex-end;
  margin-left: auto;
}

.app-messages-thread-search {
  flex: 0 0 auto;
  padding: 1rem 1rem 0;
  width: 100%;
}

.app-messages-thread-search .input-group {
  width: 100%;
}

.app-messages-history-panel {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 0.75rem;
  overflow: hidden;
  padding: 1rem;
  position: relative;
}

.app-messages-history {
  display: flex;
  flex-direction: column;
  gap: 0;
  overscroll-behavior: contain;
  padding-inline: 0.25rem;
}

.app-messages-scroll-bottom-button {
  align-items: center;
  background: var(--tblr-bg-surface, #fff);
  border: 1px solid var(--tblr-border-color, #dce1e7);
  border-radius: 0.375rem;
  bottom: 1.25rem;
  box-shadow: 0 0.125rem 0.375rem rgba(0, 0, 0, 0.16);
  display: inline-flex;
  height: 2.25rem;
  justify-content: center;
  padding: 0.375rem;
  position: absolute;
  right: 1.25rem;
  width: 2.25rem;
  z-index: 2;
}

.app-messages-scroll-bottom-button:hover,
.app-messages-scroll-bottom-button:focus-visible {
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  outline: 0;
}

.app-messages-scroll-bottom-button img {
  display: block;
  height: 1.25rem;
  opacity: 0.7;
  width: 1.25rem;
}

.app-messages-date-divider {
  align-self: center;
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  border: 1px solid var(--tblr-border-color);
  border-radius: 999px;
  color: var(--tblr-secondary);
  font-size: 0.75rem;
  line-height: 1.2;
  padding: 0.375rem 0.75rem;
  position: sticky;
  top: 0;
  z-index: 1;
}

.app-messages-message-group {
  display: flex;
  flex-direction: column;
  gap: 0;
  width: 100%;
}

.app-messages-message-group--incoming {
  align-items: flex-start;
}

.app-messages-message-group--outgoing {
  align-items: flex-start;
}

.app-messages-bubble {
  border-radius: 0.375rem;
  color: var(--tblr-body-color);
  display: grid;
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 1.5em 2em;
  transition: background-color 0.2s ease;
  width: 100%;
}

.app-messages-bubble:hover {
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
}

.app-messages-search-match {
  background: #fff3cd;
  color: inherit;
  padding: 0;
}

.app-messages-bubble--processing {
  border: 1px dashed #2bb3b1;
}

.app-messages-bubble__content {
  column-gap: 0.5rem;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  min-width: 0;
}

.app-messages-bubble__body {
  font-size: var(--tblr-body-font-size);
  grid-column: 2;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
  word-break: break-word;
}

.app-messages-bubble__quote {
  background: transparent;
  border-bottom: 0;
  border-right: 0;
  border-top: 0;
  border-left: 0.1875rem solid #74b9ff;
  color: var(--tblr-secondary, #667382);
  cursor: pointer;
  text-align: left;
  font-size: 0.8125rem;
  grid-column: 2;
  margin-bottom: 0.75rem;
  min-width: 0;
  padding-left: 0.625rem;
}

.app-messages-bubble__quote:hover,
.app-messages-bubble__quote:focus-visible {
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  outline: 0;
}

.app-messages-bubble--quoted-target {
  background: rgba(116, 185, 255, 0.16);
}

.app-messages-bubble__quote-sender,
.app-messages-reply-preview__sender {
  color: #74b9ff;
  font-weight: 700;
}

.app-messages-bubble__quote-body,
.app-messages-reply-preview__body {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-messages-bubble__attachments {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  grid-column: 2;
  margin-top: 1.2em;
}

.app-messages-bubble__attachment {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0;
  display: grid;
  gap: 0.875rem;
  grid-template-columns: auto minmax(0, 1fr);
  max-width: 100%;
  min-height: 0;
  overflow-wrap: anywhere;
  padding: 0;
}

.app-messages-bubble__attachment-icon-link,
.app-messages-bubble__attachment-icon-button,
.app-messages-bubble__attachment-title,
.app-messages-bubble__attachment-title-button,
.app-messages-bubble__attachment-action {
  text-decoration: none;
}

.app-messages-bubble__attachment-icon-link,
.app-messages-bubble__attachment-icon-button {
  align-self: start;
  background: transparent;
  border: 0;
  display: inline-flex;
  height: 2rem;
  justify-self: start;
  padding: 0;
  width: 2rem;
}

.app-messages-bubble__attachment-icon-link:focus-visible,
.app-messages-bubble__attachment-icon-button:focus-visible,
.app-messages-bubble__attachment-title:focus-visible,
.app-messages-bubble__attachment-title-button:focus-visible,
.app-messages-bubble__attachment-action:focus-visible {
  outline: 0;
}

.app-messages-bubble__attachment-icon-static {
  cursor: default;
}

.app-messages-bubble__attachment-icon {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  height: 2rem;
  justify-content: center;
  width: 2rem;
}

.app-messages-bubble__attachment-icon--document,
.app-messages-bubble__attachment-icon--image {
  background-color: #adb5bd;
}

.app-messages-bubble__attachment-icon--document {
  mask: url("/document-text-svgrepo-com.svg") center / contain no-repeat;
  -webkit-mask: url("/document-text-svgrepo-com.svg") center / contain no-repeat;
}

.app-messages-bubble__attachment-icon--image {
  mask: url("/photo-svgrepo-com.svg") center / contain no-repeat;
  -webkit-mask: url("/photo-svgrepo-com.svg") center / contain no-repeat;
}

.app-messages-bubble__attachment-icon-page {
  border: 0.125rem solid currentColor;
  border-radius: 0.3rem;
  display: block;
  height: 1.5rem;
  opacity: 0.72;
  position: relative;
  width: 1.15rem;
}

.app-messages-bubble__attachment-icon-page::after {
  background: currentColor;
  clip-path: polygon(0 0, 100% 0, 100% 100%);
  content: "";
  height: 0.45rem;
  opacity: 0.72;
  position: absolute;
  right: -0.125rem;
  top: -0.125rem;
  width: 0.45rem;
}

.app-messages-bubble__attachment-text {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

.app-messages-bubble__attachment-title {
  align-self: flex-start;
  color: #adb5bd;
  display: inline-block;
  font-size: var(--tblr-body-font-size);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.app-messages-bubble__attachment-title-button {
  align-self: flex-start;
  background: transparent;
  border: 0;
  color: #adb5bd;
  display: inline-block;
  font-size: var(--tblr-body-font-size);
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: anywhere;
  padding: 0;
  text-align: left;
}

.app-messages-bubble__attachment-icon-link:focus-visible + .app-messages-bubble__attachment-text .app-messages-bubble__attachment-title,
.app-messages-bubble__attachment-icon-button:focus-visible + .app-messages-bubble__attachment-text .app-messages-bubble__attachment-title-button,
.app-messages-bubble__attachment-title:focus-visible,
.app-messages-bubble__attachment-title-button:focus-visible,
.app-messages-bubble__attachment-action:hover,
.app-messages-bubble__attachment-action:focus-visible {
  color: #000;
  text-decoration: none;
}

.app-messages-bubble__attachment-meta {
  color: var(--tblr-secondary, #aeb6c2);
  display: block;
  font-size: var(--tblr-body-font-size);
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.app-messages-bubble__attachment-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.375rem;
}

.app-messages-bubble__attachment-action {
  background: transparent;
  border: 0;
  color: #74b9ff;
  cursor: pointer;
  font-size: var(--tblr-body-font-size);
  font-weight: 600;
  padding: 0;
}

.app-messages-bubble__attachment--previewable {
  align-items: flex-start;
}

.app-messages-bubble__attachment-status {
  color: var(--tblr-secondary, #aeb6c2);
  font-size: var(--tblr-body-font-size);
  grid-column: 2;
}

@media (hover: hover) and (pointer: fine) {
  .app-messages-bubble__attachment--previewable .app-messages-bubble__attachment-actions {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-0.125rem);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .app-messages-bubble__attachment--previewable:hover .app-messages-bubble__attachment-actions,
  .app-messages-bubble__attachment--previewable:focus-within .app-messages-bubble__attachment-actions {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}

.app-messages-image-preview-modal {
  background: rgba(5, 7, 10, 0.88);
}

.app-messages-image-preview-modal__dialog {
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100vw - 2rem);
  width: fit-content;
}

.app-messages-image-preview-modal__close {
  position: fixed;
  right: 1rem;
  top: 1rem;
  z-index: 1065;
}

.app-messages-image-preview-modal .modal-content,
.app-messages-image-preview-modal__content {
  --app-messages-image-preview-radius: clamp(0.625rem, 1vw, 0.9375rem);
  --app-messages-image-preview-radius-bottom: clamp(0.78125rem, 1.25vw, 1.171875rem);
  background: transparent;
  border: 0;
  box-shadow: 0 1.5rem 3.5rem rgba(0, 0, 0, 0.5);
  margin-left: auto;
  margin-right: auto;
  max-width: calc(100vw - 2rem);
  overflow: hidden;
  width: fit-content;
}

.app-messages-image-preview-modal__body {
  align-items: center;
  background: transparent;
  display: flex;
  justify-content: center;
  max-height: calc(100vh - 6rem);
  max-width: calc(100vw - 2rem);
  overflow: auto;
  padding: 0;
}

.app-messages-image-preview-modal__loader {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 8rem;
  min-width: 8rem;
}

.app-messages-image-preview-modal__image {
  border-radius: var(--app-messages-image-preview-radius) var(--app-messages-image-preview-radius) 0 0;
  display: block;
  height: auto;
  max-height: calc(100vh - 8rem);
  max-width: calc(100vw - 4rem);
  object-fit: contain;
  width: auto;
}

.app-messages-image-preview-modal__actions {
  align-items: center;
  background: #1b1d22;
  border-radius: 0 0 var(--app-messages-image-preview-radius-bottom) var(--app-messages-image-preview-radius-bottom);
  display: flex;
  height: clamp(3.5rem, 5vw, 4rem);
  justify-content: flex-end;
  padding: 0 clamp(1.171875rem, 2vw, 1.5625rem);
}

.app-messages-image-preview-modal__download {
  align-items: flex-end;
  color: #d1d5db;
  display: inline-flex;
  font-size: var(--tblr-body-font-size);
  font-weight: 600;
  gap: 0.5rem;
  line-height: 1;
  text-decoration: none;
}

.app-messages-image-preview-modal__download-icon {
  display: block;
  flex: 0 0 auto;
  filter: none;
  height: 1.25em;
  width: 1.25em;
}

.app-messages-image-preview-modal__download:hover,
.app-messages-image-preview-modal__download:focus-visible {
  color: #fff;
  text-decoration: none;
}

.app-messages-image-preview-modal__download:hover .app-messages-image-preview-modal__download-icon,
.app-messages-image-preview-modal__download:focus-visible .app-messages-image-preview-modal__download-icon {
  filter: brightness(0) invert(1);
}

.app-messages-bubble__body--emoji-only {
  font-size: 3em;
  line-height: 1.2;
}

.app-messages-bubble__header {
  display: contents;
}

.app-messages-message-avatar {
  --app-fallback-avatar-font-size: 0.75rem;
  flex: 0 0 auto;
  grid-column: 1;
  grid-row: 1 / span 2;
  height: 2.2rem;
  width: 2.2rem;
}

.app-messages-bubble__sender {
  font-size: inherit;
  font-weight: 700;
  grid-column: 2;
  margin-bottom: 0.5em;
}

.app-messages-bubble__footer {
  align-self: start;
  align-items: center;
  color: var(--tblr-secondary);
  display: flex;
  font-size: 0.75rem;
  gap: 0.375rem;
  line-height: 1.2;
  text-align: right;
}

.app-messages-reply-button {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  display: inline-flex;
  height: 1.25rem;
  justify-content: center;
  opacity: 0;
  padding: 0.125rem;
  transition: background-color 0.2s ease, opacity 0.2s ease;
  width: 1.25rem;
}

.app-messages-bubble:hover .app-messages-reply-button,
.app-messages-reply-button:focus-visible {
  opacity: 1;
}

.app-messages-reply-button:hover,
.app-messages-reply-button:focus-visible {
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  outline: 0;
}

.app-messages-reply-button__icon {
  display: block;
  height: 0.875rem;
  opacity: 0.65;
  width: 0.875rem;
}

.app-messages-bubble__processing-loader {
  animation: app-messages-bubble-processing-spin 0.8s linear infinite;
  border: 0.125rem solid #2bb3b1;
  border-right-color: transparent;
  border-radius: 50%;
  display: inline-block;
  height: 0.875rem;
  width: 0.875rem;
}

@keyframes app-messages-bubble-processing-spin {
  to {
    transform: rotate(360deg);
  }
}

.app-messages-composer {
  background: var(--tblr-bg-surface, #fff);
  border-top: 0;
  bottom: 0;
  padding: 1rem;
  position: sticky;
  z-index: 2;
}

.app-messages-compose-form {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.app-messages-reply-preview {
  align-items: center;
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 0.1875rem minmax(0, 1fr) auto;
  min-width: 0;
  padding: 0.5rem 0.625rem;
}

.app-messages-edit-preview {
  align-items: center;
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  display: grid;
  gap: 0.625rem;
  grid-template-columns: 0.1875rem minmax(0, 1fr) auto;
  min-width: 0;
  padding: 0.5rem 0.625rem;
}

.app-messages-edit-preview__accent {
  align-self: stretch;
  background: #74b9ff;
}

.app-messages-edit-preview__content {
  min-width: 0;
}

.app-messages-edit-preview__title {
  color: #74b9ff;
  display: flex;
  font-weight: 700;
  gap: 0.25rem;
}

.app-messages-edit-preview__attachment {
  display: grid;
  gap: 0.25rem;
  margin-top: 0.25rem;
}

.app-messages-edit-preview__attachment-item {
  align-items: baseline;
  display: flex;
  gap: 0.25rem;
  min-width: 0;
}

.app-messages-edit-preview__attachment-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-messages-edit-preview__delete {
  background: transparent;
  border: 0;
  color: inherit;
  flex: 0 0 auto;
  padding: 0;
  text-decoration: underline;
}

.app-messages-edit-preview__delete:hover,
.app-messages-edit-preview__delete:focus-visible {
  color: #dc3545;
  outline: 0;
}

.app-messages-reply-preview__accent {
  align-self: stretch;
  background: #74b9ff;
}

.app-messages-reply-preview__content {
  min-width: 0;
}

.app-messages-reply-preview__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.25rem;
  display: inline-flex;
  height: 1.5rem;
  justify-content: center;
  padding: 0.25rem;
  width: 1.5rem;
}

.app-messages-reply-preview__close:hover,
.app-messages-reply-preview__close:focus-visible {
  background: var(--tblr-bg-surface, #fff);
  outline: 0;
}

.app-messages-reply-preview__close .app-messages-icon {
  display: block;
  height: 0.875rem;
  opacity: 0.65;
  width: 0.875rem;
}

.app-messages-compose-controls {
  align-items: end;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
}

.app-messages-compose-input {
  line-height: 1.5;
  max-height: 14rem;
  min-height: 2.75rem;
  overflow-y: auto;
  resize: none;
}

.app-messages-compose-input:focus {
  box-shadow: none;
  outline: 0;
}

.app-messages-send-button {
  align-items: center;
  align-self: end;
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  color: #000;
  cursor: pointer;
  display: inline-flex;
  height: 2.0625rem;
  justify-content: center;
  min-height: 2.0625rem;
  min-width: 2.0625rem;
  padding: 0;
  transition: background-color 0.2s ease, filter 0.2s ease;
  width: 2.0625rem;
}

.app-messages-send-button:not(:disabled):hover,
.app-messages-send-button:focus {
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
}

.app-messages-send-button:disabled {
  cursor: not-allowed;
  filter: grayscale(1);
}

.app-messages-send-button .icon {
  display: block;
  height: 2.0625rem;
  width: 2.0625rem;
}

.app-messages-send-button:not(:disabled) .icon {
  filter: none;
}

.app-messages-emoji-picker {
  align-self: end;
}

.app-messages-compose-attachments {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.app-messages-draft-attachment {
  align-items: center;
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  border: 1px solid var(--tblr-border-color, #dce1e7);
  border-radius: 0.75rem;
  display: flex;
  gap: 0.75rem;
  justify-content: space-between;
  padding: 0.625rem 0.75rem;
}

.app-messages-draft-attachment__content {
  min-width: 0;
}

.app-messages-draft-attachment__title {
  font-weight: 600;
  overflow-wrap: anywhere;
}

.app-messages-draft-attachment__meta {
  color: var(--tblr-secondary, #667382);
  font-size: 0.8125rem;
  overflow-wrap: anywhere;
}

.app-messages-emoji-picker__toggle,
.app-messages-emoji-picker__item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
  display: inline-flex;
  justify-content: center;
}

.app-messages-emoji-picker__toggle {
  height: 2.165625rem;
  line-height: 1;
  min-height: 2.165625rem;
  min-width: 2.165625rem;
  padding: 0;
  width: 2.165625rem;
}

.app-messages-emoji-picker__icon {
  background-color: #adb5bd;
  display: block;
  height: 1.575rem;
  mask: url("/smile-circle-svgrepo-com.svg") center / contain no-repeat;
  transition: background-color 0.2s ease;
  width: 1.575rem;
  -webkit-mask: url("/smile-circle-svgrepo-com.svg") center / contain no-repeat;
}

.app-messages-emoji-picker__toggle:not(:disabled):hover,
.app-messages-emoji-picker__toggle:focus {
  outline: 0;
}

.app-messages-emoji-picker__toggle:not(:disabled):hover .app-messages-emoji-picker__icon,
.app-messages-emoji-picker__toggle:focus .app-messages-emoji-picker__icon {
  background-color: #17a2b8;
}

.app-messages-emoji-picker__toggle:disabled {
  cursor: not-allowed;
  filter: grayscale(1) opacity(0.35);
}

.app-messages-emoji-picker__menu {
  max-height: 11rem;
  min-width: 12rem;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 0.375rem;
}

.app-messages-emoji-picker__grid {
  display: grid;
  gap: 0.125rem;
  grid-template-columns: repeat(6, 1fr);
}

.app-messages-emoji-picker__item {
  aspect-ratio: 1;
  font-size: 1.25rem;
  line-height: 1;
  padding: 0.25rem;
}

.app-messages-emoji-picker__item:hover,
.app-messages-emoji-picker__item:focus {
  background: var(--tblr-bg-surface-secondary, #f3f4f6);
  outline: 0;
}

.app-messages-send-button:disabled .icon {
  filter: grayscale(1) opacity(0.35);
}

.app-messages-compose-meta {
  align-items: center;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
}

.app-messages-compose-meta > :first-child {
  flex: 1 1 auto;
  min-width: 0;
}

.app-messages-state {
  align-items: center;
  display: flex;
  justify-content: center;
  min-height: 12rem;
  padding: 1.5rem;
}

.app-messages-loader {
  border-radius: 50%;
  height: 2.8rem;
  perspective: 50rem;
  position: relative;
  width: 2.8rem;
}

.app-messages-history-loader {
  align-self: center;
  flex: 0 0 auto;
}

.app-messages-loader--compact {
  height: 1.5rem;
  width: 1.5rem;
}

.app-messages-loader__ring {
  border-radius: 50%;
  box-sizing: border-box;
  height: 100%;
  position: absolute;
  width: 100%;
}

.app-messages-loader__ring--one {
  animation: app-messages-loader-rotate-one 1s linear infinite;
  border-bottom: 3px solid var(--tblr-primary, #206bc4);
}

.app-messages-loader__ring--two {
  animation: app-messages-loader-rotate-two 1s linear infinite;
  border-right: 3px solid var(--tblr-primary, #206bc4);
}

.app-messages-loader__ring--three {
  animation: app-messages-loader-rotate-three 1s linear infinite;
  border-top: 3px solid var(--tblr-primary, #206bc4);
}

.app-messages-thread-body > #messagesThreadLoadingState {
  flex: 1 1 auto;
}

.app-messages-recipient-list {
  gap: 0.5rem;
}

.app-messages-recipient-item {
  align-items: center;
  display: grid;
  gap: 0.75rem;
  grid-template-columns: auto minmax(0, 1fr);
}

.app-messages-recipient-item__avatar {
  --app-fallback-avatar-font-size: 0.85rem;
  height: 2.5rem;
  width: 2.5rem;
}

@keyframes app-messages-loader-rotate-one {
  0% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(-45deg) rotateZ(360deg);
  }
}

@keyframes app-messages-loader-rotate-two {
  0% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(50deg) rotateY(10deg) rotateZ(360deg);
  }
}

@keyframes app-messages-loader-rotate-three {
  0% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(0deg);
  }

  100% {
    transform: rotateX(35deg) rotateY(55deg) rotateZ(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .app-messages-loader__ring,
  .app-messages-send-button {
    animation: none;
    transition: none;
  }
}

@media (max-width: 991.98px) {
  .app-messages-layout {
    grid-template-columns: clamp(300px, 38vw, 380px) minmax(0, 1fr);
  }

  .app-messages-thread-topbar {
    align-items: flex-start;
    flex-wrap: wrap;
  }

}

@media (max-width: 767.98px) {
  .app-messages-page {
    height: min(100%, 100dvh);
  }

  .app-messages-layout {
    gap: 0;
    grid-template-columns: minmax(0, 1fr);
  }

  .app-messages-sidebar-card,
  .app-messages-thread-card {
    border-radius: 0;
  }

  .app-messages-sidebar-header,
  .app-messages-thread-header,
  .app-messages-composer {
    padding-inline: 1rem;
  }

  .app-messages-page--mobile-thread-view .app-messages-sidebar-card {
    display: none;
  }

  .app-messages-page:not(.app-messages-page--mobile-thread-view) .app-messages-thread-card {
    display: none;
  }

  .app-messages-thread-header {
    padding-top: max(1rem, env(safe-area-inset-top, 0px));
  }

  .app-messages-composer {
    padding-bottom: max(1rem, env(safe-area-inset-bottom, 0px));
  }

  .app-messages-history-panel {
    padding-inline: 0.75rem;
  }

  .app-messages-compose-controls {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .app-messages-compose-meta {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 575.98px) {
  .app-messages-sidebar-topbar,
  .app-messages-thread-topbar {
    align-items: center;
    flex-direction: row;
    gap: 0.5rem;
  }

  .app-messages-thread-identity {
    min-width: 0;
  }

  .app-messages-compose-controls {
    gap: 0.5rem;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
  }

  .app-messages-bubble {
    max-width: 100%;
    min-width: 0;
  }

  .app-messages-draft-attachment {
    align-items: flex-start;
    flex-direction: column;
  }
}