/**
 * RTL (Right-to-Left) Custom Styles
 * Additional styles for Arabic language support
 */

/* Arabic Font - Tajawal */
[lang='ar'],
[dir='rtl'] {
  font-family: 'Tajawal', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif !important;
}

/* Apply Tajawal to all elements when Arabic is active */
[lang='ar'] *,
[dir='rtl'] * {
  font-family: 'Tajawal', 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial,
    sans-serif !important;
}

/* RTL Direction */
[dir='rtl'] {
  text-align: right;
}

/* Reverse flex directions for RTL (opt-in utility to avoid breaking layouts) */
[dir='rtl'] .rtl-row-reverse {
  flex-direction: row-reverse !important;
}

/* Menu adjustments for RTL */
[dir='rtl'] .menu-icon {
  margin-left: 0.75rem;
  margin-right: 0;
}

[dir='rtl'] .menu-toggle-icon {
  transform: scaleX(-1);
}

[dir='rtl'] .layout-menu-toggle {
  left: auto;
  right: 0;
}

/* Badge positioning for RTL */
[dir='rtl'] .badge.ms-auto {
  margin-left: 0 !important;
  margin-right: auto !important;
}

[dir='rtl'] .ms-2 {
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

[dir='rtl'] .ms-3 {
  margin-left: 0 !important;
  margin-right: 1rem !important;
}

[dir='rtl'] .ms-4 {
  margin-left: 0 !important;
  margin-right: 1.5rem !important;
}

[dir='rtl'] .me-2 {
  margin-right: 0 !important;
  margin-left: 0.5rem !important;
}

[dir='rtl'] .me-3 {
  margin-right: 0 !important;
  margin-left: 1rem !important;
}

[dir='rtl'] .me-4 {
  margin-right: 0 !important;
  margin-left: 1.5rem !important;
}

/* Dropdown menu RTL — let Bootstrap/Popper handle positioning */
/* dropdown-menu-end already resolves correctly via logical properties in RTL */

/* Date range dropdown fine-tuning */
[dir='rtl'] .dropdown .form-check-label {
  margin-right: 0.25rem;
}
[dir='rtl'] .dropdown .form-check-input {
  float: right;
  margin-left: 0.5rem;
}

/* Date range calendar RTL fixes */
[dir='rtl'] .dr-calendar-header {
  flex-direction: row-reverse !important;
}
[dir='rtl'] .dr-calendar-grid {
  direction: rtl;
}
[dir='rtl'] .dr-weekday {
  text-align: center;
}
[dir='rtl'] .dr-day {
  direction: ltr;
}
[dir='rtl'] .dr-picker-item {
  direction: ltr;
}

/* Radio button spacing in date range dropdown */
[dir='rtl'] .dropdown .form-check {
  margin-bottom: 0.75rem;
}
[dir='ltr'] .dropdown .form-check {
  margin-bottom: 0.75rem;
}

/* Text alignment */
[dir='rtl'] .text-end {
  text-align: left !important;
}

[dir='rtl'] .text-start {
  text-align: right !important;
}

/* Ensure card title and dropdown are properly spaced in RTL */
[dir='rtl'] .card-header .card-title {
  text-align: right;
}

/* Card header dropdown — let Bootstrap/Popper handle positioning in RTL */

/* Timeline icon positioning for RTL */
[dir='rtl'] .timeline-point::before {
  right: auto;
  left: -0.3125rem;
}

/* Default: do NOT reorder the last tab in RTL (keep buttons grouped) */
[dir='rtl'] ul.nav-tabs.widget-nav-tabs li.nav-item:last-child {
  order: 0 !important;
  margin-right: 0;
  margin-left: 0 !important;
}

/* In RTL, align the tab list to the right/start */
[dir='rtl'] ul.nav-tabs.widget-nav-tabs {
  flex-direction: row !important; /* avoid global row-reverse override */
  justify-content: flex-start !important; /* start from right in RTL */
}

/* Optional: if a specific tabs list needs the last item floated to the start in RTL,
   add class .has-floating-last to the <ul> */
[dir='rtl'] ul.nav-tabs.widget-nav-tabs.has-floating-last li.nav-item:last-child {
  order: -999 !important;
  margin-right: auto;
  margin-left: 0 !important;
}

/* Progress bar direction */
[dir='rtl'] .progress {
  direction: ltr;
}

/* Avatar group RTL */
[dir='rtl'] .avatar-group .avatar {
  margin-left: -0.8rem;
  margin-right: 0;
}

[dir='rtl'] .avatar-group .avatar:first-child {
  margin-left: 0;
}

/* Notification badge RTL */
[dir='rtl'] .badge-notifications {
  left: 0;
  right: auto;
}

/* Footer RTL */
[dir='rtl'] .footer-container {
  flex-direction: row-reverse;
}

/* Smooth transition for direction change */
html[dir='rtl'],
html[dir='ltr'] {
  transition: direction 0.3s ease;
}

/* Navbar RTL adjustments */
[dir='rtl'] .navbar-nav {
  flex-direction: row-reverse;
}

/* Keep navbar-nav-right in normal flex-direction */
[dir='rtl'] .navbar-nav-right.d-flex {
  flex-direction: row !important;
}

/* Language switcher animation */
.lang-switcher {
  transition: all 0.2s ease;
}

.lang-switcher.active {
  background-color: rgba(var(--bs-primary-rgb), 0.1);
  color: var(--bs-primary);
  font-weight: 600;
}

.lang-switcher:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Reports Page Styles */
.cursor-pointer {
  cursor: pointer;
}

.report-type-card,
.report-subtype-card,
.report-option-card {
  transition: all 0.3s ease;
  border: 1px solid transparent;
  overflow: hidden;
  width: 100%;
}

.report-type-card .card-body,
.report-subtype-card .card-body,
.report-option-card .card-body {
  overflow: hidden;
}

.report-type-card:hover,
.report-subtype-card:hover,
.report-option-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 0.5rem 1.5rem rgba(0, 0, 0, 0.1);
  border-color: rgba(var(--bs-primary-rgb), 0.2);
}

.report-type-card:active,
.report-subtype-card:active,
.report-option-card:active {
  transform: translateY(-2px);
}

/* Ensure report card content doesn't overflow */
.report-type-card .card-title,
.report-subtype-card .card-title,
.report-option-card .card-title {
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
}

.report-type-card .card-subtitle,
.report-subtype-card .card-subtitle,
.report-option-card .card-subtitle {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* RTL Breadcrumb adjustments */
[dir='rtl'] .breadcrumb-item + .breadcrumb-item::before {
  float: right;
  padding-left: 0.5rem;
  padding-right: 0;
  transform: rotate(180deg);
}

[dir='rtl'] .breadcrumb {
  text-align: right;
}

/* Report page specific spacing - Responsive */
.report-type-card .avatar-initial {
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.report-subtype-card .avatar-initial,
.report-option-card .avatar-initial {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Responsive adjustments for small screens */
@media (max-width: 575.98px) {
  .report-type-card .card-body,
  .report-subtype-card .card-body,
  .report-option-card .card-body {
    padding: 1rem !important;
  }

  .report-type-card .avatar-initial {
    width: 48px;
    height: 48px;
  }

  .report-type-card .avatar-initial i {
    font-size: 1.5rem !important;
  }

.report-subtype-card .avatar-initial,
.report-option-card .avatar-initial {
    width: 40px;
    height: 40px;
  }

  .report-subtype-card .avatar-initial i,
  .report-option-card .avatar-initial i {
    font-size: 1.25rem !important;
  }

  .report-type-card .card-title {
    font-size: 0.95rem;
  }

  .report-type-card .card-subtitle {
    font-size: 0.75rem;
  }
}

/* Settings Preference tab styling */
.preference-section-card {
  border: none !important;
  padding-bottom: 1.5rem !important;
  margin-bottom: 1.5rem;
  position: relative;
}

/* ============================================
   Custom Fields tab (scoped) - compact headers
   ============================================ */
#custom-fields-root .preference-section-card {
  padding-bottom: 1rem !important;
  margin-bottom: 1rem;
}

#custom-fields-root .preference-section-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 8px;
}

#custom-fields-root .preference-section-icon i {
  font-size: 1.15rem;
}

#custom-fields-root .preference-section-card h6 {
  font-size: 0.95rem;
}

#custom-fields-root .preference-section-card small {
  font-size: 0.78rem;
}

.preference-section-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(var(--bs-primary-rgb), 0.2),
    transparent
  );
}

.preference-section-card:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0 !important;
}

.preference-section-card:last-of-type::after {
  display: none !important;
}

.preference-section-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  box-shadow: none;
}

.preference-section-icon i {
  font-size: 1.5rem;
}

.preference-option-list {
  gap: 0.75rem !important;
}

.preference-option-row {
  padding: 0.75rem 1rem;
  border-radius: var(--bs-border-radius-lg);
  background-color: #fff;
  transition: background-color 0.2s ease, transform 0.2s ease;
}

.preference-option-row:nth-child(even) {
  background-color: rgba(var(--bs-primary-rgb), 0.04);
}

.preference-option-row:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  transform: translateY(-2px);
}

/* Settings Tab Header Separator */
.settings-tab-header {
  position: relative;
  padding: 0.75rem 1rem;
  background: rgba(var(--bs-primary-rgb), 0.05);
  border-radius: var(--bs-border-radius);
  margin-bottom: 1.5rem;
}

/* Branches list styling */
.branch-item:last-child {
  border-bottom: none !important;
}

/* Mobile: reduce card padding in settings branches tab */
@media (max-width: 768px) {
  .preference-section-card {
    padding: 1rem !important;
    padding-bottom: 1.25rem !important;
    margin-bottom: 1rem;
  }

  .preference-section-card .d-flex.align-items-center.mb-4 {
    margin-bottom: 0.75rem !important;
  }

  .settings-tab-header {
    margin-bottom: 1rem;
  }

  .settings-tab-header h5 {
    font-size: 1.05rem;
  }

  .settings-tab-header p {
    font-size: 0.8125rem;
  }
}

/* ============================================
   Mobile Bottom Navigation Integration
   ============================================ */

/* Hide hamburger menu on mobile (replaced by bottom nav home button) */
.menu-mobile-toggler {
  display: none !important;
}

/* Hide navbar hamburger on mobile as well */
@media (max-width: 1199.98px) {
  .layout-navbar .layout-menu-toggle {
    display: none !important;
  }
}

/* ============================================
   Layout Menu Glass/Blur Effect
   ============================================ */

/* Apply transparent background with blur effect to layout menu */
.layout-menu {
  /* Blurred glass effect with white background */
  backdrop-filter: saturate(200%) blur(30px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 44%, rgba(255, 255, 255, 0.75) 73%, rgba(255, 255, 255, 0.70)) !important;
  border-right: 1px solid rgba(var(--bs-border-color-rgb), 0.3);
  /* box-shadow: 2px 0 10px rgba(0, 0, 0, 0.08); */
}

/* RTL: Border on left side instead of right */
[dir="rtl"] .layout-menu {
  border-right: none;
  border-left: 1px solid rgba(var(--bs-border-color-rgb), 0.3);
  /* box-shadow: -2px 0 10px rgba(0, 0, 0, 0.08); */
}

/* Dark mode support for glass effect - keep original design with blur */
[data-bs-theme="dark"] .layout-menu {
  backdrop-filter: none;
  background: var(--bs-surface-1, #242428) !important;
  border-right-color: rgba(var(--bs-border-color-rgb), 0.2);
  /* box-shadow: 2px 0 10px rgba(0, 0, 0, 0.3); */
}

[data-bs-theme="dark"][dir="rtl"] .layout-menu {
  border-right: none;
  border-left-color: rgba(var(--bs-border-color-rgb), 0.2);
  /* box-shadow: -2px 0 10px rgba(0, 0, 0, 0.3); */
}

/* Make sidebar navigation full-screen on mobile when expanded */
@media (max-width: 1199.98px) {
  /* Override menu width variable for mobile - 85vw for better visual balance */
  :root {
    --bs-menu-width: 85vw;
    --bs-menu-width: 85dvw;
    --bs-menu-width: 85svw;
  }

  .layout-menu-expanded .layout-menu {
    width: 100vw !important;
    width: 100dvw !important;
    width: 100svw !important;
    max-width: 100vw !important;
    max-width: 100dvw !important;
    max-width: 100svw !important;
  }

  /* Make menu items responsive to width */
  .layout-menu {
    width: 85vw !important;
    width: 85dvw !important;
    width: 85svw !important;
    max-width: 85vw !important;
    max-width: 85dvw !important;
    max-width: 85svw !important;
    inline-size: 85vw !important;
    inline-size: 85dvw !important;
    inline-size: 85svw !important;
  }

  /* Menu vertical override for mobile - 85vw width */
  .menu-vertical,
  .menu-vertical .menu-block,
  .menu-vertical .menu-inner > .menu-item,
  .menu-vertical .menu-inner > .menu-header {
    inline-size: 85vw !important;
    inline-size: 85dvw !important;
    inline-size: 85svw !important;
  }

  /* Well-organized padding and spacing for menu items */
  .layout-menu .menu-inner {
    width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.25rem;
    max-width: 100%;
  }

  .layout-menu .menu-item {
    width: 100%;
    margin-bottom: 2px;
    max-width: 100%;
  }

  .layout-menu .menu-link {
    width: 100%;
    padding: 0.625rem 0.875rem;
    border-radius: 0.625rem;
    font-size: 0.9375rem;
    font-weight: 500;
    max-width: 100%;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-height: 44px;
  }

  /* Menu icons — fixed size, consistent alignment */
  .layout-menu .menu-icon {
    width: 24px !important;
    max-width: 24px !important;
    min-width: 24px !important;
    height: 24px !important;
    inline-size: 24px !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    margin: 0 !important;
    font-size: 1.25rem;
  }

  /* Prevent menu link text from causing horizontal overflow */
  .layout-menu .menu-link > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
  }

  /* Menu header spacing */
  .layout-menu .menu-header {
    padding: 0.75rem 1rem 0.375rem;
    margin-top: 0.375rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--bs-secondary-color);
    max-width: 100%;
  }

  /* App brand full width with proper padding */
  .layout-menu .app-brand {
    width: 100%;
    padding: 1.5rem 1.5rem 1rem;
    margin-bottom: 0.5rem;
  }

  /* Menu toggle button in sidebar */
  .layout-menu .layout-menu-toggle {
    padding: 0.5rem;
  }

  /* Ensure overlay covers entire screen */
  .layout-menu-expanded .layout-overlay {
    display: block;
  }

  /* Add padding to bottom of menu to account for bottom nav */
  /* Note: Additional padding-bottom is set on .sidebar-scrollable class */
  .layout-menu .menu-inner {
    padding-bottom: 90px;
  }

  /* Badge in sidebar menu — compact pill, centered text */
  .layout-menu .menu-link .badge {
    flex: 0 0 auto !important;
    margin-left: auto;
    font-size: 0.6875rem;
    font-weight: 600;
    text-align: center;
    min-width: 1.375rem !important;
    height: 1.375rem !important;
    width: auto !important;
    max-width: fit-content !important;
    padding: 0 0.35rem !important;
    line-height: 1.375rem;
    border-radius: 50rem !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  [dir="rtl"] .layout-menu .menu-link .badge {
    margin-left: 0;
    margin-right: auto;
  }
}

/* Adjust content padding for mobile bottom nav */
@media (max-width: 1199.98px) {
  .content-wrapper {
    padding-bottom: 80px; /* Space for bottom navigation */
  }
}

/* Position close button at the opposite end of the sidebar */
.app-brand.demo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  width: 100%;
}

.layout-menu .layout-menu-toggle {
  justify-self: end;
}

[dir='rtl'] .layout-menu .layout-menu-toggle {
  justify-self: start;
}

/* Back button icon RTL - reverse the arrow direction */
[dir='rtl'] #bottom-back-btn i.tabler-arrow-left {
  transform: scaleX(-1);
}

/* Back button icon RTL - reverse the arrow direction (general back button) */
[dir='rtl'] #back-btn i.tabler-arrow-left {
  transform: scaleX(-1);
}

/* ============================================
   Glass/Blur Effect for All Cards
   ============================================ */

/* Apply blurred glass effect to all cards */
.card {
  backdrop-filter: saturate(200%) blur(25px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 44%, rgba(255, 255, 255, 0.75) 73%, rgba(255, 255, 255, 0.70)) !important;
  border: 1px solid rgba(var(--bs-border-color-rgb), 0.3) !important;
}

/* Apply shadow only for default skin */
[data-skin="default"] .card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Bordered skin - no shadow, enhanced border */
[data-skin="bordered"] .card {
  border-width: 2px !important;
}

/* Card header with glass effect */
.card-header {
  backdrop-filter: saturate(200%) blur(25px);
  background: rgba(255, 255, 255, 0.65) !important;
  border-bottom: 1px solid rgba(var(--bs-border-color-rgb), 0.2) !important;
}

/* Card body maintains parent transparency */
.card-body {
  background: transparent !important;
}

/* Card footer with glass effect */
.card-footer {
  backdrop-filter: saturate(200%) blur(25px);
  background: rgba(255, 255, 255, 0.65) !important;
  border-top: 1px solid rgba(var(--bs-border-color-rgb), 0.2) !important;
}

/* Dark mode support for glass effect cards */
[data-bs-theme="dark"] .card {
  backdrop-filter: saturate(200%) blur(25px);
  background: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.80) 44%, rgba(var(--bs-body-bg-rgb), 0.75) 73%, rgba(var(--bs-body-bg-rgb), 0.70)) !important;
  border-color: rgba(var(--bs-border-color-rgb), 0.2) !important;
}

/* Apply shadow only for default skin in dark mode */
[data-bs-theme="dark"][data-skin="default"] .card {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

/* Bordered skin in dark mode - no shadow, enhanced border */
[data-bs-theme="dark"][data-skin="bordered"] .card {
  border-width: 2px !important;
}

[data-bs-theme="dark"] .card-header {
  backdrop-filter: saturate(200%) blur(25px);
  background: rgba(var(--bs-body-bg-rgb), 0.65) !important;
  border-bottom-color: rgba(var(--bs-border-color-rgb), 0.15) !important;
}

[data-bs-theme="dark"] .card-footer {
  backdrop-filter: saturate(200%) blur(25px);
  background: rgba(var(--bs-body-bg-rgb), 0.65) !important;
  border-top-color: rgba(var(--bs-border-color-rgb), 0.15) !important;
}

/* Ensure card text is readable over glass background */
.card {
  color: var(--bs-body-color);
}

/* ============================================
   GLOBAL KEYBOARD PRESS EFFECT
   Reusable effect for buttons and clickable elements
   Creates a "bottom press down" feeling like keyboard keys
   ============================================ */

/* Reusable utility class for keyboard press effect */
.keyboard-press-effect:active {
  transform: scale(0.97);
  transform-origin: center center;
}

/* Apply to all buttons globally */
button:active,
button:not(:disabled):active,
.btn:active,
.btn:not(:disabled):active,
.btn-check:checked + .btn,
.btn.active:not(:disabled),
.btn.show:not(:disabled) {
  transform: scale(0.97);
  transform-origin: center center;
}

/* Apply to clickable elements with cursor pointer */
[role="button"]:active,
a[role="button"]:active,
.cursor-pointer:active,
[style*="cursor: pointer"]:active,
[style*="cursor:pointer"]:active {
  transform: scale(0.97);
  transform-origin: center center;
}

/* Ensure smooth transition */
button,
.btn,
[role="button"],
a[role="button"],
.cursor-pointer,
[style*="cursor: pointer"],
[style*="cursor:pointer"] {
  transition: transform 0.1s ease;
}

/* Exclude disabled elements */
button:disabled:active,
.btn:disabled:active,
.btn.disabled:active {
  transform: none;
}

/* Update chatbot toggle to use consistent effect */
.chatbot-toggle:active {
  transform: scale(0.97);
  transform-origin: center center;
}

/* Nested cards - slightly different opacity */
.card .card {
  backdrop-filter: saturate(200%) blur(20px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.75) 44%, rgba(255, 255, 255, 0.70) 73%, rgba(255, 255, 255, 0.65)) !important;
}

[data-bs-theme="dark"] .card .card {
  backdrop-filter: saturate(200%) blur(20px);
  background: linear-gradient(180deg, rgba(var(--bs-body-bg-rgb), 0.75) 44%, rgba(var(--bs-body-bg-rgb), 0.70) 73%, rgba(var(--bs-body-bg-rgb), 0.65)) !important;
}

/* Special card types maintain glass effect */
.card.bg-primary,
.card.bg-secondary,
.card.bg-success,
.card.bg-danger,
.card.bg-warning,
.card.bg-info {
  backdrop-filter: saturate(200%) blur(25px);
}

/* Transparent backdrop for better glass effect visibility */
.card-img-overlay {
  backdrop-filter: saturate(180%) blur(20px);
  background: rgba(255, 255, 255, 0.4) !important;
}

[data-bs-theme="dark"] .card-img-overlay {
  background: rgba(0, 0, 0, 0.4) !important;
}
/* ============================================
   MOBILE NOTIFICATION (NOTYF) POLISH
   Fix icon/close symbol positioning on mobile, especially in RTL
   ============================================ */
@media (max-width: 768px) {
  .notyf {
    padding: 0.75rem !important;
  }

  .notyf__toast {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0.75rem !important;
    overflow: hidden;
  }

  .notyf__toast .notyf__wrapper {
    min-height: 56px;
    padding-block: 0.85rem;
    padding-inline: 0.9rem 3rem !important;
    border-radius: 0.75rem;
    align-items: center;
  }

  .notyf__toast .notyf__icon {
    margin-inline: 0 0.7rem !important;
    flex: 0 0 22px;
  }

  .notyf__toast .notyf__dismiss {
    width: 42px !important;
    margin-right: 0 !important;
    margin-inline-end: 0 !important;
  }

  .notyf__toast .notyf__dismiss-btn {
    background-color: rgba(0, 0, 0, 0.14);
  }
}

/* RTL fix: place success icon on the right and close button on the left */
@media (max-width: 768px) {
  html[dir="rtl"] .notyf__toast .notyf__wrapper,
  :root:dir(rtl) .notyf__toast .notyf__wrapper {
    direction: rtl;
    padding-inline: 3rem 0.9rem !important;
  }

  html[dir="rtl"] .notyf__toast .notyf__dismiss,
  :root:dir(rtl) .notyf__toast .notyf__dismiss {
    left: 0;
    right: auto;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  html[dir="rtl"] .notyf__toast .notyf__message,
  :root:dir(rtl) .notyf__toast .notyf__message {
    direction: rtl;
    text-align: right;
  }
}