:root {
  --admin-primary: var(--brand-primary, #e31d6b);
  --admin-primary-dark: var(--brand-primary-dark, #8b0e3f);
  --admin-primary-soft: var(--brand-primary-1, #fde6f0);
  --admin-ink: #20313d;
  --admin-muted: #6c7c86;
  --admin-line: #dfe7eb;
  --admin-canvas: #f4f7f9;
  --admin-surface: #fff;
  --admin-success: #16805b;
  --admin-danger: #c74454;
  --admin-radius: 14px;
  --admin-shadow: 0 10px 30px rgba(31, 52, 65, .07);
}

body {
  background: var(--admin-canvas);
  color: var(--admin-ink);
}

.page-wrapper {
  background: var(--admin-canvas);
}

.page-wrapper > .container-fluid {
  padding: 0 26px 36px;
}

.topbar {
  box-shadow: 0 4px 18px rgba(64, 17, 39, .16);
}

.topbar .top-navbar,
.topbar .top-navbar .navbar-header {
  min-height: 66px;
}

.topbar .top-navbar .navbar-header {
  align-items: center;
  display: flex;
}

.topbar .navbar-brand {
  align-items: center;
  display: flex;
  height: 66px;
}

.topbar .light-logo {
  height: 35px !important;
  max-width: 185px;
  object-fit: contain;
  padding-left: 17px !important;
}

.backend-product-name {
  border-left: 1px solid rgba(255, 255, 255, .3);
  color: rgba(255, 255, 255, .78);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  margin-left: 16px;
  padding-left: 16px;
  text-transform: uppercase;
}

.left-sidebar {
  background: #fff;
  box-shadow: 5px 0 24px rgba(30, 52, 66, .06);
  padding-top: 66px;
  width: 242px;
}

.scroll-sidebar {
  padding: 20px 14px 40px;
}

.sidebar-nav {
  background: transparent;
  padding: 0;
}

.sidebar-nav .nav-small-cap {
  color: #9aa8b0 !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  letter-spacing: .14em;
  padding: 12px 12px 7px !important;
  text-transform: uppercase;
}

.sidebar-nav ul li.nav-devider {
  background: #edf1f3;
  margin: 12px 4px;
}

.sidebar-nav > ul > li {
  margin-bottom: 5px;
}

.sidebar-nav ul li a {
  align-items: center;
  border-radius: 9px;
  color: #657680;
  display: flex;
  font-size: 13px;
  font-weight: 400;
  min-height: 42px;
  padding: 9px 12px;
  transition: background-color .15s ease, color .15s ease, transform .15s ease;
}

.sidebar-nav > ul > li > a i {
  align-items: center;
  color: #91a0a9;
  display: inline-flex;
  font-size: 17px;
  height: 24px;
  justify-content: center;
  line-height: 24px;
  margin-right: 8px;
  width: 24px;
}

.sidebar-nav ul li a:hover {
  background: #f7f9fa;
  color: var(--admin-primary);
  transform: translateX(2px);
}

.sidebar-nav > ul > li.active > a,
.sidebar-nav > ul > li.active:hover > a {
  background: var(--admin-primary) !important;
  box-shadow: 0 7px 17px rgba(227, 29, 107, .2);
  color: #fff !important;
  font-weight: 600;
}

.sidebar-nav > ul > li.active > a i,
.sidebar-nav > ul > li.active:hover > a i {
  color: #fff !important;
}

.sidebar-nav li > ul.collapse {
  margin: 4px 0 8px 16px;
  padding: 3px 0 3px 12px;
  position: relative;
}

.sidebar-nav li > ul.collapse::before {
  background: #e7ecef;
  bottom: 4px;
  content: "";
  left: 0;
  position: absolute;
  top: 4px;
  width: 1px;
}

.sidebar-nav ul li ul li a {
  border-radius: 7px;
  font-size: 12px;
  min-height: 37px;
  padding: 7px 10px;
}

.sidebar-nav ul li ul li a i {
  color: #a0adb4;
  font-size: 13px;
  margin-right: 9px;
  text-align: center;
  width: 17px;
}

.sidebar-nav ul li ul li a.active {
  background: var(--admin-primary-soft);
  color: var(--admin-primary-dark);
  font-weight: 600;
}

.sidebar-nav .has-arrow::after {
  border-color: #8da0aa;
  height: .48em;
  right: 14px;
  width: .48em;
}

.page-wrapper {
  margin-left: 242px;
}

.page-titles {
  align-items: center;
  background: transparent;
  margin: 0 -10px 12px !important;
  min-height: 54px;
  padding: 13px 10px !important;
}

.page-titles .breadcrumb {
  background: transparent;
  font-size: 11px;
  margin: 0;
  padding: 0;
}

.page-titles .breadcrumb-item,
.page-titles .breadcrumb-item a {
  color: #81919a;
}

.page-titles .breadcrumb-item.active {
  color: #495e69;
  font-weight: 600;
}

.backend-page {
  padding-bottom: 24px;
}

.backend-page-header {
  align-items: center;
  background: linear-gradient(115deg, #fff 0%, #fbfcfd 58%, var(--admin-primary-soft) 145%);
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius);
  display: flex;
  gap: 14px;
  margin-bottom: 17px;
  padding: 20px 22px;
}

.backend-page-header__icon {
  align-items: center;
  background: var(--admin-primary-soft);
  border-radius: 11px;
  color: var(--admin-primary-dark);
  display: flex;
  flex: 0 0 44px;
  font-size: 18px;
  height: 44px;
  justify-content: center;
}

.backend-page-header__eyebrow {
  color: var(--admin-primary);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .14em;
  margin: 0 0 2px;
  text-transform: uppercase;
}

.backend-page-header h1 {
  color: var(--admin-ink);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
  margin: 0;
}

.backend-page-header__subtitle {
  color: var(--admin-muted);
  font-size: 11px;
  margin: 4px 0 0;
}

.backend-page-header__actions {
  align-items: center;
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.backend-page-header__badge {
  background: var(--admin-primary-soft);
  border-radius: 999px;
  color: var(--admin-primary-dark);
  font-size: 10px;
  font-weight: 600;
  padding: 6px 10px;
}

.backend-page-header > .backend-page-header__badge {
  margin-left: auto;
}

.backend-panel.card {
  border: 1px solid var(--admin-line);
  border-radius: var(--admin-radius);
  box-shadow: var(--admin-shadow);
  overflow: hidden;
}

.backend-panel > .card-body,
.backend-panel .card-body {
  padding: 21px;
}

.backend-panel__header {
  align-items: flex-start;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  margin-bottom: 18px;
}

.backend-panel__header h2,
.backend-panel__header h3 {
  color: var(--admin-ink);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
}

.backend-panel__header p {
  color: var(--admin-muted);
  font-size: 10px;
  margin: 4px 0 0;
}

.backend-page .btn {
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  padding: 8px 12px;
}

.backend-page .btn-primary {
  background: var(--admin-primary);
  border-color: var(--admin-primary);
}

.backend-page .btn-primary:hover,
.backend-page .btn-primary:focus {
  background: var(--admin-primary-dark);
  border-color: var(--admin-primary-dark);
}

.backend-page .btn-outline-secondary {
  background: #fff;
  border-color: #ccd8de;
  color: #596e79;
}

.backend-page .form-group {
  margin-bottom: 17px;
}

.backend-page label {
  color: #4d626e;
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 6px;
}

.backend-page .form-control,
.backend-page .custom-select {
  background-color: #fff;
  border: 1px solid #ccd8de;
  border-radius: 8px;
  color: var(--admin-ink);
  font-size: 12px;
  min-height: 38px;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.backend-page .form-control:focus,
.backend-page .custom-select:focus {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(227, 29, 107, .09);
}

.backend-page .form-text,
.backend-page .help-block {
  color: #84939b !important;
  font-size: 9px;
}

.backend-search-panel {
  background: #f7f9fa;
  border: 1px solid var(--admin-line);
  border-radius: 11px;
  margin-bottom: 18px;
  padding: 16px 17px 3px;
}

.backend-search-panel__title {
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 13px;
}

.backend-applied-filters {
  align-items: center;
  border-top: 1px solid var(--admin-line);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 3px;
  padding: 11px 0 9px;
}

.backend-applied-filters__label {
  color: var(--admin-muted);
  font-size: 9px;
  font-weight: 600;
  margin-right: 3px;
}

.backend-filter-tag {
  background: #fff;
  border: 1px solid #d7e1e5;
  border-radius: 999px;
  color: #526873;
  font-size: 9px;
  padding: 4px 8px;
}

.backend-table-shell {
  border: 1px solid var(--admin-line);
  border-radius: 11px;
  overflow: auto;
}

.backend-table-shell .dataTables_wrapper {
  min-width: 620px;
  padding: 14px;
}

.backend-page table.dataTable,
.backend-data-table {
  border: 0 !important;
  margin: 0 !important;
}

.backend-page table.dataTable thead th,
.backend-data-table thead th {
  background: #eef3f5;
  border: 0 !important;
  border-bottom: 1px solid #d6e0e4 !important;
  color: #536a76;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .07em;
  padding: 11px 10px !important;
  text-transform: uppercase;
}

.backend-page table.dataTable tbody td,
.backend-data-table tbody td {
  background: #fff;
  border: 0 !important;
  border-bottom: 1px solid #e8edef !important;
  color: #526671;
  font-size: 11px;
  padding: 11px 10px !important;
  vertical-align: middle;
}

.backend-page table.dataTable tbody tr:hover td,
.backend-data-table tbody tr:hover td {
  background: #f9fbfc;
}

.backend-page table.dataTable a {
  color: var(--admin-primary-dark);
  font-weight: 600;
}

.backend-page .dataTables_wrapper .dt-buttons {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
}

.backend-page .dataTables_wrapper .dt-button {
  background: #fff;
  border: 1px solid #d2dde2;
  border-radius: 7px;
  color: #667a84;
  font-size: 9px;
  font-weight: 600;
  padding: 6px 9px;
}

.backend-page .dataTables_filter {
  margin-bottom: 12px;
}

.backend-page .dataTables_filter label {
  align-items: center;
  display: flex;
  gap: 7px;
}

.backend-page .dataTables_filter input {
  border: 1px solid #ccd8de;
  border-radius: 8px;
  margin-left: 0 !important;
  min-height: 33px;
  padding: 5px 9px;
}

.backend-page .dataTables_info,
.backend-page .dataTables_paginate {
  color: var(--admin-muted) !important;
  font-size: 10px;
  padding-top: 12px !important;
}

.backend-page .dataTables_paginate .paginate_button {
  border: 0 !important;
  border-radius: 6px !important;
  font-size: 10px;
  margin-left: 3px;
  min-width: 30px;
  padding: 5px 8px !important;
}

.backend-page .dataTables_paginate .paginate_button.current,
.backend-page .dataTables_paginate .paginate_button.current:hover {
  background: var(--admin-primary) !important;
  color: #fff !important;
}

.backend-icon-action {
  align-items: center;
  background: #f4f7f8;
  border: 1px solid #e0e7ea;
  border-radius: 7px;
  color: #657985 !important;
  display: inline-flex;
  height: 30px;
  justify-content: center;
  margin: 0 2px;
  transition: all .15s ease;
  width: 30px;
}

.backend-icon-action i {
  margin: 0 !important;
}

.backend-icon-action:hover {
  background: var(--admin-primary-soft);
  border-color: var(--admin-primary-soft);
  color: var(--admin-primary-dark) !important;
}

.backend-icon-action--danger:hover {
  background: #fdecef;
  border-color: #fdecef;
  color: var(--admin-danger) !important;
}

.backend-tabs {
  border-bottom: 1px solid var(--admin-line);
  gap: 3px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 4px;
  white-space: nowrap;
}

.backend-tabs .nav-link {
  border: 0;
  border-bottom: 2px solid transparent;
  color: #73858f;
  font-size: 10px;
  font-weight: 600;
  padding: 10px 12px;
}

.backend-tabs .nav-link.active {
  background: transparent;
  border-bottom-color: var(--admin-primary);
  color: var(--admin-primary);
}

.backend-tab-content {
  padding: 4px 3px 0;
}

.backend-tab-content > .tab-pane {
  padding-top: 1rem;
}

.backend-page .color-swatch {
  border: 1px solid #d5dfe3;
  border-radius: 7px;
  display: inline-block;
  height: 30px;
  vertical-align: middle;
  width: 44px;
}

.backend-page .logo-preview {
  background: #f4f7f8;
  border: 1px solid var(--admin-line);
  border-radius: 8px;
  max-height: 64px;
  padding: 5px;
}

.backend-page .note-editor {
  border: 1px solid #d8e1e5;
  border-radius: 9px;
  overflow: hidden;
}

.backend-page .note-editor .note-toolbar {
  background: #f5f7f8;
  border-bottom: 1px solid #dfe6e9;
}

.backend-page .note-editor .note-editable {
  height: 400px !important;
}

.backend-form-actions {
  align-items: center;
  border-top: 1px solid var(--admin-line);
  display: flex;
  gap: 8px;
  margin-top: 8px;
  padding-top: 17px;
}

.backend-page .alert {
  border: 0;
  border-radius: 9px;
  font-size: 11px;
  padding: 10px 13px;
}

.featured-grid {
  margin-left: -7px;
  margin-right: -7px;
}

.featured-grid > [class*="col-"] {
  padding: 0 7px 14px;
}

.featured-card {
  background: #fff;
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 14px;
  transition: box-shadow .2s ease, transform .2s ease;
}

.featured-card:hover {
  box-shadow: 0 10px 24px rgba(31, 53, 66, .09);
  transform: translateY(-2px);
}

.featured-card__number {
  align-items: center;
  background: var(--admin-primary-soft);
  border-radius: 7px;
  color: var(--admin-primary-dark);
  display: flex;
  font-size: 10px;
  font-weight: 700;
  height: 25px;
  justify-content: center;
  margin-bottom: 10px;
  width: 25px;
}

.featured-card .form-group {
  margin-bottom: 11px;
}

.featured-card .image-preview,
.featured-card__preview {
  align-items: center;
  background: #f1f4f6;
  border: 1px dashed #cad7dd;
  border-radius: 9px;
  display: flex;
  height: 165px;
  justify-content: center;
  margin: 4px 0 13px;
  overflow: hidden;
  width: 100%;
}

.featured-card__preview img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.featured-card__empty {
  color: #94a2a9;
  font-size: 10px;
  text-align: center;
}

.featured-card__empty i {
  display: block;
  font-size: 24px;
  margin-bottom: 7px;
}

.featured-card .delete-check {
  background: #fff6f7;
  border-radius: 7px;
  margin-top: 9px;
  padding: 7px 9px;
}

.featured-card .delete-check label {
  color: var(--admin-danger);
  margin: 0;
}

.accommodation-setting {
  align-items: center;
  display: inline-flex;
  gap: 5px;
}

.accommodation-setting input[type="number"] {
  border: 1px solid #ccd8de;
  border-radius: 7px;
  min-height: 31px;
  padding: 4px 7px;
  width: 68px !important;
}

.accommodation-save {
  align-items: center;
  background: var(--admin-primary-soft);
  border-radius: 6px;
  color: var(--admin-primary-dark);
  display: inline-flex;
  height: 29px;
  justify-content: center;
  width: 29px;
}

.accommodation-save.is-saving {
  opacity: .55;
  pointer-events: none;
}

.accommodation-save.is-saved {
  background: #e3f6ee;
  color: var(--admin-success);
}

.accommodation-save.is-error {
  background: #fdecef;
  color: var(--admin-danger);
}

.backend-page .btn-edit-outstanding {
  accent-color: var(--admin-primary);
  cursor: pointer;
  height: 18px;
  margin: 0;
  position: static;
  width: 18px;
}

.accommodation-id {
  background: #edf3f5;
  border-radius: 6px;
  color: #48616e;
  font-size: 10px;
  font-weight: 700;
  padding: 5px 7px;
}

/* Account profile and user actions */
.backend-user-menu {
  align-items: center;
  display: flex;
  margin-right: 12px;
}

.backend-user-menu__trigger {
  align-items: center;
  color: #fff !important;
  display: flex !important;
  gap: 9px;
  min-height: 66px;
  padding: 8px 10px !important;
}

.backend-user-menu__trigger::after {
  display: none;
}

.backend-user-menu__avatar,
.account-avatar {
  align-items: center;
  background: linear-gradient(135deg, #fff 0%, var(--admin-primary-soft) 100%);
  border: 2px solid rgba(255, 255, 255, .7);
  border-radius: 50%;
  color: var(--admin-primary-dark);
  display: inline-flex;
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 800;
  height: 36px;
  justify-content: center;
  letter-spacing: .02em;
  width: 36px;
}

.backend-user-menu__avatar--image,
.account-avatar--image {
  object-fit: cover;
  overflow: hidden;
  padding: 0;
}

.account-avatar img {
  height: 100%;
  object-fit: cover;
  width: 100%;
}

.backend-user-menu__identity {
  line-height: 1.15;
  max-width: 160px;
}

.backend-user-menu__identity strong,
.backend-user-menu__identity small {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backend-user-menu__identity strong {
  color: #fff;
  font-size: 11px;
  font-weight: 600;
}

.backend-user-menu__identity small {
  color: rgba(255, 255, 255, .68);
  font-size: 9px;
  margin-top: 3px;
}

.backend-user-menu__chevron {
  color: rgba(255, 255, 255, .66);
  font-size: 8px;
  transition: transform .18s ease;
}

.backend-user-menu.show .backend-user-menu__chevron {
  transform: rotate(180deg);
}

.backend-user-dropdown {
  border: 1px solid var(--admin-line);
  border-radius: 12px;
  box-shadow: 0 14px 34px rgba(26, 47, 59, .16);
  margin-top: 7px;
  min-width: 292px;
  overflow: hidden;
  padding: 8px;
}

.backend-user-dropdown__header {
  align-items: center;
  display: flex;
  gap: 11px;
  padding: 10px 9px 11px;
}

.backend-user-menu__avatar--large {
  background: var(--admin-primary-soft);
  border-color: #f7cadc;
  height: 44px;
  width: 44px;
}

.backend-user-dropdown__header > div {
  min-width: 0;
}

.backend-user-dropdown__header strong,
.backend-user-dropdown__header span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.backend-user-dropdown__header strong {
  color: var(--admin-ink);
  font-size: 12px;
}

.backend-user-dropdown__header span {
  color: var(--admin-muted);
  font-size: 10px;
  margin-top: 3px;
}

.backend-user-dropdown .dropdown-divider {
  border-color: #edf1f3;
  margin: 5px 2px;
}

.backend-user-dropdown .dropdown-item {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 8px;
  color: var(--admin-ink);
  display: flex;
  gap: 10px;
  padding: 9px;
  text-align: left;
  width: 100%;
}

.backend-user-dropdown .dropdown-item:hover,
.backend-user-dropdown .dropdown-item:focus {
  background: #f5f8f9;
  color: var(--admin-primary-dark);
}

.backend-user-dropdown__item-icon {
  align-items: center;
  background: #eff3f5;
  border-radius: 7px;
  color: #6b7f8a;
  display: inline-flex;
  flex: 0 0 32px;
  height: 32px;
  justify-content: center;
}

.backend-user-dropdown .dropdown-item > span:last-child,
.backend-user-dropdown .dropdown-item strong,
.backend-user-dropdown .dropdown-item small {
  display: block;
}

.backend-user-dropdown .dropdown-item strong {
  font-size: 11px;
  font-weight: 600;
}

.backend-user-dropdown .dropdown-item small {
  color: #8a9aa3;
  font-size: 9px;
  margin-top: 2px;
}

.backend-user-dropdown__logout,
.backend-user-dropdown__logout .backend-user-dropdown__item-icon {
  color: var(--admin-danger) !important;
}

.backend-user-dropdown__logout .backend-user-dropdown__item-icon {
  background: #fdecef;
}

.account-profile__summary {
  height: calc(100% - 1rem);
  text-align: center;
}

.account-profile__summary .card-body {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 28px 22px;
}

.account-avatar {
  background: linear-gradient(135deg, var(--admin-primary) 0%, var(--admin-primary-dark) 100%);
  border: 6px solid var(--admin-primary-soft);
  box-shadow: 0 8px 22px rgba(139, 14, 63, .18);
  color: #fff;
  font-size: 22px;
  height: 82px;
  margin-bottom: 15px;
  width: 82px;
}

.account-profile__summary h2 {
  color: var(--admin-ink);
  font-size: 17px;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
}

.account-profile__email {
  color: var(--admin-muted);
  font-size: 10px;
  margin: 5px 0 12px;
  overflow-wrap: anywhere;
}

.account-status {
  align-items: center;
  background: #f0f3f5;
  border-radius: 999px;
  color: #687b85;
  display: inline-flex;
  font-size: 9px;
  font-weight: 700;
  gap: 6px;
  padding: 6px 9px;
  text-transform: uppercase;
}

.account-status__dot {
  background: currentColor;
  border-radius: 50%;
  height: 6px;
  width: 6px;
}

.account-status--active {
  background: #e7f7f0;
  color: var(--admin-success);
}

.account-status--inactive {
  background: #fdecef;
  color: var(--admin-danger);
}

.account-profile__roles {
  border-top: 1px solid var(--admin-line);
  margin-top: 22px;
  padding-top: 18px;
  text-align: left;
  width: 100%;
}

.account-profile__label {
  color: #82929b;
  display: block;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .08em;
  margin-bottom: 9px;
  text-transform: uppercase;
}

.account-role-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.account-role {
  background: var(--admin-primary-soft);
  border-radius: 6px;
  color: var(--admin-primary-dark);
  font-size: 9px;
  font-weight: 600;
  padding: 6px 8px;
}

.account-role--muted {
  background: #f0f3f5;
  color: var(--admin-muted);
}

.account-section-header {
  align-items: center;
  border-bottom: 1px solid var(--admin-line);
  gap: 10px;
  margin-bottom: 4px;
  padding-bottom: 15px;
}

.account-section-header__icon {
  align-items: center;
  background: var(--admin-primary-soft);
  border-radius: 8px;
  color: var(--admin-primary-dark);
  display: inline-flex;
  flex: 0 0 34px;
  height: 34px;
  justify-content: center;
}

.account-details {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
}

.account-details--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.account-detail {
  border-bottom: 1px solid #edf1f3;
  min-width: 0;
  padding: 15px 12px 14px 0;
}

.account-detail:nth-last-child(-n+2) {
  border-bottom: 0;
}

.account-details--three .account-detail {
  border-bottom: 0;
}

.account-detail dt {
  color: #87969f;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.account-detail dd {
  color: var(--admin-ink);
  font-size: 12px;
  font-weight: 500;
  margin: 0;
  overflow-wrap: anywhere;
}

.account-detail dd a {
  color: var(--admin-primary-dark);
}

.account-security-card .card-body,
.account-security-card__content {
  align-items: center;
  display: flex;
}

.account-security-card .card-body {
  gap: 16px;
  justify-content: space-between;
}

.account-security-card__content {
  gap: 12px;
}

.account-security-card__icon,
.account-password-modal__icon {
  align-items: center;
  background: #e7f7f0;
  border-radius: 10px;
  color: var(--admin-success);
  display: inline-flex;
  flex: 0 0 42px;
  height: 42px;
  justify-content: center;
}

.account-security-card h2 {
  color: var(--admin-ink);
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 4px;
}

.account-security-card p {
  color: var(--admin-muted);
  font-size: 10px;
  margin: 0;
}

.account-password-modal .modal-content {
  border: 0;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(25, 43, 54, .2);
  overflow: hidden;
}

.account-password-modal .modal-header {
  align-items: flex-start;
  border-bottom: 1px solid var(--admin-line);
  padding: 18px 20px;
}

.account-password-modal__heading {
  align-items: center;
  display: flex;
  gap: 11px;
}

.account-password-modal__icon {
  background: var(--admin-primary-soft);
  color: var(--admin-primary-dark);
}

.account-password-modal .modal-title {
  color: var(--admin-ink);
  font-size: 15px;
  font-weight: 700;
}

.account-password-modal__heading p {
  color: var(--admin-muted);
  font-size: 10px;
  margin: 3px 0 0;
}

.account-password-modal .modal-body {
  padding: 20px;
}

.account-password-modal .modal-footer {
  background: #fafbfc;
  border-top: 1px solid var(--admin-line);
  padding: 12px 20px;
}

.account-password-field {
  position: relative;
}

.account-password-field .form-control {
  padding-right: 42px;
}

.account-password-toggle {
  align-items: center;
  background: transparent;
  border: 0;
  color: #80919a;
  cursor: pointer;
  display: flex;
  height: 100%;
  justify-content: center;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 40px;
}

.account-password-toggle:hover,
.account-password-toggle:focus {
  color: var(--admin-primary);
  outline: 0;
}

.account-password-error {
  color: var(--admin-danger);
  display: block;
  font-size: 10px;
  min-height: 16px;
  padding-top: 5px;
}

.account-edit-summary {
  position: sticky;
  top: 82px;
}

.account-edit-summary .card-body {
  align-items: center;
  display: flex;
  flex-direction: column;
  padding: 25px 21px 20px;
  text-align: center;
}

.account-edit-summary .account-avatar {
  height: 72px;
  width: 72px;
}

.account-avatar-editor {
  overflow: hidden;
}

.account-avatar-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
  width: 100%;
}

.account-avatar-input {
  height: 1px;
  opacity: 0;
  overflow: hidden;
  position: absolute;
  width: 1px;
}

.account-avatar-input:focus + input + .account-avatar-upload {
  box-shadow: 0 0 0 3px rgba(227, 29, 107, .18);
}

.account-avatar-actions .btn {
  align-items: center;
  cursor: pointer;
  display: inline-flex;
  font-size: 9px;
  justify-content: center;
  margin: 0;
  min-height: 32px;
  padding: 6px 9px;
}

.account-avatar-actions > small {
  color: #8a9aa3;
  flex: 0 0 100%;
  font-size: 8px;
  margin-top: 2px;
}

.account-avatar-error {
  color: var(--admin-danger);
  flex: 0 0 100%;
  font-size: 9px;
  min-height: 13px;
}

.account-edit-summary h2 {
  color: var(--admin-ink);
  font-size: 15px;
  font-weight: 700;
  margin: 0;
  overflow-wrap: anywhere;
}

.account-edit-summary > .card-body > p {
  color: var(--admin-muted);
  font-size: 10px;
  margin: 5px 0 11px;
  overflow-wrap: anywhere;
}

.account-edit-nav {
  border-top: 1px solid var(--admin-line);
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 21px;
  padding-top: 14px;
  text-align: left;
  width: 100%;
}

.account-edit-nav a {
  align-items: center;
  border-radius: 7px;
  color: #647883;
  display: flex;
  font-size: 10px;
  font-weight: 600;
  gap: 9px;
  padding: 8px 9px;
  transition: background-color .15s ease, color .15s ease;
}

.account-edit-nav a i {
  color: #91a1aa;
  text-align: center;
  width: 15px;
}

.account-edit-nav a:hover,
.account-edit-nav a:focus {
  background: var(--admin-primary-soft);
  color: var(--admin-primary-dark);
}

.account-edit-nav a:hover i,
.account-edit-nav a:focus i {
  color: var(--admin-primary);
}

.account-edit-summary__note {
  align-items: flex-start;
  background: #f5f8f9;
  border-radius: 8px;
  color: var(--admin-muted);
  display: flex;
  font-size: 9px;
  gap: 7px;
  line-height: 1.45;
  margin-top: 14px;
  padding: 9px;
  text-align: left;
  width: 100%;
}

.account-edit-summary__note i {
  color: var(--admin-primary);
  margin-top: 2px;
}

.account-edit-section {
  scroll-margin-top: 82px;
}

.account-form-grid {
  margin-top: 17px;
}

.account-edit-page .form-group label {
  color: #465c68;
  font-size: 10px;
  font-weight: 700;
  margin-bottom: 7px;
}

.account-edit-page .form-group label span {
  color: var(--admin-danger);
}

.account-input-wrap {
  position: relative;
}

.account-input-wrap > i {
  color: #92a1a9;
  font-size: 12px;
  left: 12px;
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
}

.account-edit-page .account-input-wrap .form-control {
  padding-left: 35px;
}

.account-edit-page .account-input-wrap--password .form-control {
  padding-right: 42px;
}

.account-edit-page .form-control {
  background-color: #fbfcfd;
}

.account-edit-page .form-control:hover {
  border-color: #b9c8cf;
}

.account-edit-page .form-control:focus {
  background-color: #fff;
}

.account-edit-page .select2-container--default .select2-selection--multiple {
  background: #fbfcfd;
  border: 1px solid #ccd8de;
  border-radius: 8px;
  min-height: 38px;
  padding: 2px 5px;
}

.account-edit-page .select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--admin-primary);
  box-shadow: 0 0 0 3px rgba(227, 29, 107, .08);
}

.account-edit-page .select2-container--default .select2-selection--multiple .select2-selection__choice {
  background: var(--admin-primary-soft);
  border: 0;
  border-radius: 5px;
  color: var(--admin-primary-dark);
  font-size: 9px;
  font-weight: 600;
  margin-top: 4px;
  padding: 4px 7px;
}

.account-readonly-roles {
  align-items: center;
  background: #f5f7f8;
  border: 1px solid #dce4e8;
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 38px;
  padding: 6px 8px;
}

.account-form-alert {
  align-items: flex-start;
  display: flex;
  gap: 9px;
}

.account-form-alert > i {
  margin-top: 2px;
}

.account-form-alert ul {
  margin: 4px 0 0;
  padding-left: 17px;
}

.account-edit-actions {
  justify-content: flex-end;
  margin-bottom: 4px;
  margin-top: 17px;
}

.account-edit-actions__status {
  align-items: center;
  color: #81919a;
  display: flex;
  font-size: 9px;
  gap: 6px;
  margin-right: auto;
}

.account-edit-actions__status i {
  color: var(--admin-success);
}

.account-edit-actions__status.is-pending {
  color: #8a6721;
}

.account-edit-actions__status.is-pending i {
  color: #d39a2d;
  font-size: 6px;
}

@media (min-width: 768px) {
  .mini-sidebar .page-wrapper { margin-left: 66px; }
  .mini-sidebar .left-sidebar { width: 66px; }
  .mini-sidebar .sidebar-nav { padding: 0; }
  .mini-sidebar .sidebar-nav #sidebarnav > li > a { justify-content: center; padding: 9px; width: 46px; }
  .mini-sidebar .sidebar-nav #sidebarnav > li > a i { margin-right: 0; }
}

@media (max-width: 991px) {
  .backend-page-header { align-items: flex-start; }
  .backend-page-header__actions { align-items: flex-end; flex-direction: column; }
}

@media (max-width: 767px) {
  .page-wrapper { margin-left: 0; }
  .page-wrapper > .container-fluid { padding: 0 14px 28px; }
  .backend-product-name { display: none; }
  .backend-page-header { align-items: flex-start; padding: 16px; }
  .backend-page-header__icon { flex-basis: 40px; height: 40px; width: 40px; }
  .backend-page-header h1 { font-size: 18px; }
  .backend-page-header__actions { flex-direction: column; }
  .backend-page-header__actions .btn { width: 100%; }
  .backend-panel > .card-body,
  .backend-panel .card-body { padding: 15px; }
  .backend-panel__header { flex-direction: column; }
  .backend-search-panel { padding: 13px 13px 2px; }
  .backend-form-actions { align-items: stretch; flex-direction: column; }
  .backend-form-actions .btn { width: 100%; }
  .backend-user-menu { margin-right: 4px; }
  .backend-user-menu__trigger { gap: 5px; padding: 7px !important; }
  .backend-user-menu__chevron { display: none; }
  .backend-user-dropdown { min-width: 276px; }
  .account-details,
  .account-details--three { grid-template-columns: 1fr; }
  .account-detail,
  .account-detail:nth-last-child(-n+2),
  .account-details--three .account-detail { border-bottom: 1px solid #edf1f3; }
  .account-detail:last-child { border-bottom: 0; }
  .account-security-card .card-body { align-items: stretch; flex-direction: column; }
  .account-security-card .btn { width: 100%; }
  .account-edit-summary { position: static; }
  .account-edit-nav { display: none; }
  .account-edit-actions__status { margin: 0 0 4px; }
}