/* src/styles.scss */
:root {
  --primary-color: #0c2864;
  --secondary-color: #64748b;
  --primary-light: #1e3a8a;
  --primary-dark: #0a1f4a;
  --secondary-light: #94a3b8;
  --secondary-dark: #475569;
}
.btn-primary {
  background:
    linear-gradient(
      135deg,
      var(--primary-color) 0%,
      var(--primary-light) 100%);
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s;
  font-size: 14px;
}
.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
}
.btn-primary:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: none;
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.2s;
}
.btn-secondary:hover {
  background: #e5e7eb;
}
.btn-danger {
  background: #fef2f2;
  color: #dc2626;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
  font-size: 14px;
}
.btn-danger:hover {
  background: #fee2e2;
}
.btn-success {
  background: #f0fdf4;
  color: #16a34a;
  border: none;
  padding: 8px 12px;
  border-radius: 6px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background-color 0.2s;
  font-size: 14px;
}
.btn-success:hover {
  background: #dcfce7;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.form-label {
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}
.form-input {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
  width: 100%;
}
.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
}
.form-input.error {
  border-color: #ef4444;
}
.form-textarea {
  padding: 12px 16px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s;
  resize: vertical;
  min-height: 80px;
  width: 100%;
}
.form-textarea:focus {
  outline: none;
  border-color: var(--primary-color);
}
.error-message {
  color: #ef4444;
  font-size: 14px;
  margin-top: 4px;
}
.card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.card-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
  background: #f8fafc;
}
.card-body {
  padding: 24px;
}
.card-actions {
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
  display: flex;
  gap: 12px;
  justify-content: flex-end;
}
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}
.page-header h1 {
  font-size: 28px;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}
.page-content {
  background: #f8fafc;
  min-height: calc(100vh - 200px);
  padding: 30px 0;
}
.status-active {
  background: #dcfce7;
  color: #166534;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}
.status-inactive {
  background: #fef2f2;
  color: #991b1b;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}
.status-pending {
  background: #fef3c7;
  color: #92400e;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}
.grid {
  display: grid;
  gap: 20px;
}
.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.text-center {
  text-align: center;
}
.text-right {
  text-align: right;
}
.mb-0 {
  margin-bottom: 0;
}
.mb-1 {
  margin-bottom: 8px;
}
.mb-2 {
  margin-bottom: 16px;
}
.mb-3 {
  margin-bottom: 24px;
}
.mb-4 {
  margin-bottom: 32px;
}
.mt-0 {
  margin-top: 0;
}
.mt-1 {
  margin-top: 8px;
}
.mt-2 {
  margin-top: 16px;
}
.mt-3 {
  margin-top: 24px;
}
.mt-4 {
  margin-top: 32px;
}
.p-0 {
  padding: 0;
}
.p-1 {
  padding: 8px;
}
.p-2 {
  padding: 16px;
}
.p-3 {
  padding: 24px;
}
.p-4 {
  padding: 32px;
}
.spinner {
  width: 16px;
  height: 16px;
  border: 2px solid transparent;
  border-top: 2px solid currentColor;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@media (max-width: 768px) {
  .page-header {
    flex-direction: column;
    gap: 20px;
    align-items: stretch;
  }
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
  .card-actions {
    flex-direction: column;
  }
}
.btn-primary {
  background:
    linear-gradient(
      135deg,
      var(--primary-600),
      var(--primary-500)) !important;
  color: white !important;
  border: 2px solid var(--primary-600) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3) !important;
  transition: all var(--transition-base) !important;
}
.btn-primary:hover:not([disabled]) {
  background:
    linear-gradient(
      135deg,
      var(--primary-700),
      var(--primary-600)) !important;
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4) !important;
  transform: translateY(-2px);
}
.btn-primary:active:not([disabled]) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3) !important;
}
.btn-primary[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary {
  background: white !important;
  color: var(--gray-700) !important;
  border: 2px solid var(--gray-300) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  transition: all var(--transition-base) !important;
}
.btn-secondary:hover:not([disabled]) {
  background: var(--gray-50) !important;
  border-color: var(--gray-400) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}
.btn-secondary:active:not([disabled]) {
  transform: translateY(0);
  background: var(--gray-100) !important;
}
.btn-success {
  background:
    linear-gradient(
      135deg,
      var(--success-600),
      var(--success-500)) !important;
  color: white !important;
  border: 2px solid var(--success-600) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3) !important;
  transition: all var(--transition-base) !important;
}
.btn-success:hover:not([disabled]) {
  background:
    linear-gradient(
      135deg,
      var(--success-700),
      var(--success-600)) !important;
  box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4) !important;
  transform: translateY(-2px);
}
.btn-success:active:not([disabled]) {
  transform: translateY(0);
}
.btn-warning {
  background:
    linear-gradient(
      135deg,
      var(--warning-600),
      var(--warning-500)) !important;
  color: white !important;
  border: 2px solid var(--warning-600) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
  transition: all var(--transition-base) !important;
}
.btn-warning:hover:not([disabled]) {
  background:
    linear-gradient(
      135deg,
      var(--warning-700),
      var(--warning-600)) !important;
  box-shadow: 0 6px 16px rgba(217, 119, 6, 0.4) !important;
  transform: translateY(-2px);
}
.btn-warning:active:not([disabled]) {
  transform: translateY(0);
}
.btn-danger {
  background:
    linear-gradient(
      135deg,
      var(--danger-600),
      var(--danger-500)) !important;
  color: white !important;
  border: 2px solid var(--danger-600) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3) !important;
  transition: all var(--transition-base) !important;
}
.btn-danger:hover:not([disabled]) {
  background:
    linear-gradient(
      135deg,
      var(--danger-700),
      var(--danger-600)) !important;
  box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4) !important;
  transform: translateY(-2px);
}
.btn-danger:active:not([disabled]) {
  transform: translateY(0);
}
.btn-outline-primary {
  background: white !important;
  color: var(--primary-600) !important;
  border: 2px solid var(--primary-600) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all var(--transition-base) !important;
}
.btn-outline-primary:hover:not([disabled]) {
  background: var(--primary-50) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2) !important;
}
.btn-outline-secondary {
  background: white !important;
  color: var(--gray-700) !important;
  border: 2px solid var(--gray-400) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all var(--transition-base) !important;
}
.btn-outline-secondary:hover:not([disabled]) {
  background: var(--gray-50) !important;
  border-color: var(--gray-500) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}
.btn-outline-danger {
  background: white !important;
  color: var(--danger-600) !important;
  border: 2px solid var(--danger-600) !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: all var(--transition-base) !important;
}
.btn-outline-danger:hover:not([disabled]) {
  background: var(--danger-50) !important;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.2) !important;
}
.btn-icon-primary {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
  border: 1px solid var(--primary-200) !important;
  border-radius: 0 !important;
  transition: all var(--transition-base) !important;
}
.btn-icon-primary:hover:not([disabled]) {
  background: var(--primary-100) !important;
  border-color: var(--primary-600) !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25) !important;
  transform: translateY(-2px);
}
.btn-icon-success {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: var(--success-50) !important;
  color: var(--success-700) !important;
  border: 1px solid var(--success-200) !important;
  border-radius: 0 !important;
  transition: all var(--transition-base) !important;
}
.btn-icon-success:hover:not([disabled]) {
  background: var(--success-100) !important;
  border-color: var(--success-600) !important;
  box-shadow: 0 4px 12px rgba(5, 150, 105, 0.25) !important;
  transform: translateY(-2px);
}
.btn-icon-warning {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: var(--warning-50) !important;
  color: var(--warning-700) !important;
  border: 1px solid var(--warning-200) !important;
  border-radius: 0 !important;
  transition: all var(--transition-base) !important;
}
.btn-icon-warning:hover:not([disabled]) {
  background: var(--warning-100) !important;
  border-color: var(--warning-600) !important;
  box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25) !important;
  transform: translateY(-2px);
}
.btn-icon-danger {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: var(--danger-50) !important;
  color: var(--danger-600) !important;
  border: 1px solid var(--danger-200) !important;
  border-radius: 0 !important;
  transition: all var(--transition-base) !important;
}
.btn-icon-danger:hover:not([disabled]) {
  background: var(--danger-100) !important;
  border-color: var(--danger-600) !important;
  box-shadow: 0 4px 12px rgba(220, 38, 38, 0.25) !important;
  transform: translateY(-2px);
}
.btn-icon-info {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: #f0f9ff !important;
  color: #0284c7 !important;
  border: 1px solid #bae6fd !important;
  border-radius: 0 !important;
  transition: all var(--transition-base) !important;
}
.btn-icon-info:hover:not([disabled]) {
  background: #e0f2fe !important;
  border-color: #0284c7 !important;
  box-shadow: 0 4px 12px rgba(2, 132, 199, 0.25) !important;
  transform: translateY(-2px);
}
.btn-icon-purple {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  background: #f5f3ff !important;
  color: #6d28d9 !important;
  border: 1px solid #ddd6fe !important;
  border-radius: 0 !important;
  transition: all var(--transition-base) !important;
}
.btn-icon-purple:hover:not([disabled]) {
  background: #ede9fe !important;
  border-color: #6d28d9 !important;
  box-shadow: 0 4px 12px rgba(109, 40, 217, 0.25) !important;
  transform: translateY(-2px);
}
.btn-sm {
  height: 36px !important;
  padding: 0 16px !important;
  font-size: 13px !important;
  min-width: 80px !important;
}
.btn-md {
  height: 44px !important;
  padding: 0 24px !important;
  font-size: 14px !important;
  min-width: 100px !important;
}
.btn-lg {
  height: 56px !important;
  padding: 0 32px !important;
  font-size: 16px !important;
  min-width: 120px !important;
}
.btn-xl {
  height: 64px !important;
  padding: 0 40px !important;
  font-size: 18px !important;
  min-width: 140px !important;
}
.btn-with-icon {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.btn-with-icon mat-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.btn-with-icon span {
  display: inline-block !important;
}
.btn-full-width {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
}
.btn-group {
  display: flex;
  gap: 12px;
}
.btn-group.btn-group-compact {
  gap: 0;
}
.btn-group.btn-group-compact button {
  margin-left: -1px;
}
.btn-group.btn-group-compact button:first-child {
  margin-left: 0;
}
.btn-group.btn-group-compact button:hover {
  z-index: 1;
}
.btn-loading {
  position: relative;
  pointer-events: none;
  opacity: 0.8;
}
.btn-loading .mat-mdc-button-touch-target,
.btn-loading .mat-mdc-button-ripple {
  display: none;
}
.btn-ghost {
  background: transparent !important;
  color: var(--gray-700) !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  transition: all var(--transition-base) !important;
}
.btn-ghost:hover:not([disabled]) {
  background: var(--gray-100) !important;
  color: var(--gray-900) !important;
}
.btn-text {
  background: transparent !important;
  color: var(--primary-600) !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  padding: 8px 16px !important;
}
.btn-text:hover:not([disabled]) {
  background: var(--primary-50) !important;
  color: var(--primary-700) !important;
}
.btn-gradient-blue-purple {
  background:
    linear-gradient(
      135deg,
      #3b82f6,
      #8b5cf6) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4) !important;
}
.btn-gradient-blue-purple:hover:not([disabled]) {
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.5) !important;
  transform: translateY(-2px);
}
.btn-gradient-green-teal {
  background:
    linear-gradient(
      135deg,
      #10b981,
      #14b8a6) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.4) !important;
}
.btn-gradient-green-teal:hover:not([disabled]) {
  box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5) !important;
  transform: translateY(-2px);
}
.btn-gradient-orange-pink {
  background:
    linear-gradient(
      135deg,
      #f97316,
      #ec4899) !important;
  color: white !important;
  border: none !important;
  border-radius: 0 !important;
  font-weight: 600 !important;
  box-shadow: 0 4px 16px rgba(249, 115, 22, 0.4) !important;
}
.btn-gradient-orange-pink:hover:not([disabled]) {
  box-shadow: 0 6px 20px rgba(249, 115, 22, 0.5) !important;
  transform: translateY(-2px);
}
.btn-flat {
  box-shadow: none !important;
}
.btn-flat:hover:not([disabled]) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}
.btn-with-badge {
  position: relative;
}
.btn-with-badge .badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: var(--danger-600);
  color: white;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 6px;
  min-width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}
.btn-glow {
  animation: glow 2s ease-in-out infinite;
}
@keyframes glow {
  0%, 100% {
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  }
  50% {
    box-shadow: 0 4px 20px rgba(37, 99, 235, 0.6);
  }
}
.mat-mdc-button[disabled],
.mat-mdc-raised-button[disabled],
.mat-mdc-outlined-button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  transform: none !important;
}
html {
  --mat-sys-background: light-dark(#faf9fd, #121316);
  --mat-sys-error: light-dark(#ba1a1a, #ffb4ab);
  --mat-sys-error-container: light-dark(#ffdad6, #93000a);
  --mat-sys-inverse-on-surface: light-dark(#f2f0f4, #2f3033);
  --mat-sys-inverse-primary: light-dark(#abc7ff, #005cbb);
  --mat-sys-inverse-surface: light-dark(#2f3033, #e3e2e6);
  --mat-sys-on-background: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-error: light-dark(#ffffff, #690005);
  --mat-sys-on-error-container: light-dark(#93000a, #ffdad6);
  --mat-sys-on-primary: light-dark(#ffffff, #002f65);
  --mat-sys-on-primary-container: light-dark(#00458f, #d7e3ff);
  --mat-sys-on-primary-fixed: light-dark(#001b3f, #001b3f);
  --mat-sys-on-primary-fixed-variant: light-dark(#00458f, #00458f);
  --mat-sys-on-secondary: light-dark(#ffffff, #283041);
  --mat-sys-on-secondary-container: light-dark(#3e4759, #dae2f9);
  --mat-sys-on-secondary-fixed: light-dark(#131c2b, #131c2b);
  --mat-sys-on-secondary-fixed-variant: light-dark(#3e4759, #3e4759);
  --mat-sys-on-surface: light-dark(#1a1b1f, #e3e2e6);
  --mat-sys-on-surface-variant: light-dark(#44474e, #e0e2ec);
  --mat-sys-on-tertiary: light-dark(#ffffff, #0001ac);
  --mat-sys-on-tertiary-container: light-dark(#0000ef, #e0e0ff);
  --mat-sys-on-tertiary-fixed: light-dark(#00006e, #00006e);
  --mat-sys-on-tertiary-fixed-variant: light-dark(#0000ef, #0000ef);
  --mat-sys-outline: light-dark(#74777f, #8e9099);
  --mat-sys-outline-variant: light-dark(#c4c6d0, #44474e);
  --mat-sys-primary: light-dark(#005cbb, #abc7ff);
  --mat-sys-primary-container: light-dark(#d7e3ff, #00458f);
  --mat-sys-primary-fixed: light-dark(#d7e3ff, #d7e3ff);
  --mat-sys-primary-fixed-dim: light-dark(#abc7ff, #abc7ff);
  --mat-sys-scrim: light-dark(#000000, #000000);
  --mat-sys-secondary: light-dark(#565e71, #bec6dc);
  --mat-sys-secondary-container: light-dark(#dae2f9, #3e4759);
  --mat-sys-secondary-fixed: light-dark(#dae2f9, #dae2f9);
  --mat-sys-secondary-fixed-dim: light-dark(#bec6dc, #bec6dc);
  --mat-sys-shadow: light-dark(#000000, #000000);
  --mat-sys-surface: light-dark(#faf9fd, #121316);
  --mat-sys-surface-bright: light-dark(#faf9fd, #38393c);
  --mat-sys-surface-container: light-dark(#efedf0, #1f2022);
  --mat-sys-surface-container-high: light-dark(#e9e7eb, #292a2c);
  --mat-sys-surface-container-highest: light-dark(#e3e2e6, #343537);
  --mat-sys-surface-container-low: light-dark(#f4f3f6, #1a1b1f);
  --mat-sys-surface-container-lowest: light-dark(#ffffff, #0d0e11);
  --mat-sys-surface-dim: light-dark(#dbd9dd, #121316);
  --mat-sys-surface-tint: light-dark(#005cbb, #abc7ff);
  --mat-sys-surface-variant: light-dark(#e0e2ec, #44474e);
  --mat-sys-tertiary: light-dark(#343dff, #bec2ff);
  --mat-sys-tertiary-container: light-dark(#e0e0ff, #0000ef);
  --mat-sys-tertiary-fixed: light-dark(#e0e0ff, #e0e0ff);
  --mat-sys-tertiary-fixed-dim: light-dark(#bec2ff, #bec2ff);
  --mat-sys-neutral-variant20: #2d3038;
  --mat-sys-neutral10: #1a1b1f;
  --mat-sys-level0:
    0px 0px 0px 0px rgba(0, 0, 0, 0.2),
    0px 0px 0px 0px rgba(0, 0, 0, 0.14),
    0px 0px 0px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level1:
    0px 2px 1px -1px rgba(0, 0, 0, 0.2),
    0px 1px 1px 0px rgba(0, 0, 0, 0.14),
    0px 1px 3px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level2:
    0px 3px 3px -2px rgba(0, 0, 0, 0.2),
    0px 3px 4px 0px rgba(0, 0, 0, 0.14),
    0px 1px 8px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level3:
    0px 3px 5px -1px rgba(0, 0, 0, 0.2),
    0px 6px 10px 0px rgba(0, 0, 0, 0.14),
    0px 1px 18px 0px rgba(0, 0, 0, 0.12);
  --mat-sys-level4:
    0px 5px 5px -3px rgba(0, 0, 0, 0.2),
    0px 8px 10px 1px rgba(0, 0, 0, 0.14),
    0px 3px 14px 2px rgba(0, 0, 0, 0.12);
  --mat-sys-level5:
    0px 7px 8px -4px rgba(0, 0, 0, 0.2),
    0px 12px 17px 2px rgba(0, 0, 0, 0.14),
    0px 5px 22px 4px rgba(0, 0, 0, 0.12);
  --mat-sys-body-large: 400 1rem / 1.5rem Roboto;
  --mat-sys-body-large-font: Roboto;
  --mat-sys-body-large-line-height: 1.5rem;
  --mat-sys-body-large-size: 1rem;
  --mat-sys-body-large-tracking: 0.031rem;
  --mat-sys-body-large-weight: 400;
  --mat-sys-body-medium: 400 0.875rem / 1.25rem Roboto;
  --mat-sys-body-medium-font: Roboto;
  --mat-sys-body-medium-line-height: 1.25rem;
  --mat-sys-body-medium-size: 0.875rem;
  --mat-sys-body-medium-tracking: 0.016rem;
  --mat-sys-body-medium-weight: 400;
  --mat-sys-body-small: 400 0.75rem / 1rem Roboto;
  --mat-sys-body-small-font: Roboto;
  --mat-sys-body-small-line-height: 1rem;
  --mat-sys-body-small-size: 0.75rem;
  --mat-sys-body-small-tracking: 0.025rem;
  --mat-sys-body-small-weight: 400;
  --mat-sys-display-large: 400 3.562rem / 4rem Roboto;
  --mat-sys-display-large-font: Roboto;
  --mat-sys-display-large-line-height: 4rem;
  --mat-sys-display-large-size: 3.562rem;
  --mat-sys-display-large-tracking: -0.016rem;
  --mat-sys-display-large-weight: 400;
  --mat-sys-display-medium: 400 2.812rem / 3.25rem Roboto;
  --mat-sys-display-medium-font: Roboto;
  --mat-sys-display-medium-line-height: 3.25rem;
  --mat-sys-display-medium-size: 2.812rem;
  --mat-sys-display-medium-tracking: 0;
  --mat-sys-display-medium-weight: 400;
  --mat-sys-display-small: 400 2.25rem / 2.75rem Roboto;
  --mat-sys-display-small-font: Roboto;
  --mat-sys-display-small-line-height: 2.75rem;
  --mat-sys-display-small-size: 2.25rem;
  --mat-sys-display-small-tracking: 0;
  --mat-sys-display-small-weight: 400;
  --mat-sys-headline-large: 400 2rem / 2.5rem Roboto;
  --mat-sys-headline-large-font: Roboto;
  --mat-sys-headline-large-line-height: 2.5rem;
  --mat-sys-headline-large-size: 2rem;
  --mat-sys-headline-large-tracking: 0;
  --mat-sys-headline-large-weight: 400;
  --mat-sys-headline-medium: 400 1.75rem / 2.25rem Roboto;
  --mat-sys-headline-medium-font: Roboto;
  --mat-sys-headline-medium-line-height: 2.25rem;
  --mat-sys-headline-medium-size: 1.75rem;
  --mat-sys-headline-medium-tracking: 0;
  --mat-sys-headline-medium-weight: 400;
  --mat-sys-headline-small: 400 1.5rem / 2rem Roboto;
  --mat-sys-headline-small-font: Roboto;
  --mat-sys-headline-small-line-height: 2rem;
  --mat-sys-headline-small-size: 1.5rem;
  --mat-sys-headline-small-tracking: 0;
  --mat-sys-headline-small-weight: 400;
  --mat-sys-label-large: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-label-large-font: Roboto;
  --mat-sys-label-large-line-height: 1.25rem;
  --mat-sys-label-large-size: 0.875rem;
  --mat-sys-label-large-tracking: 0.006rem;
  --mat-sys-label-large-weight: 500;
  --mat-sys-label-large-weight-prominent: 700;
  --mat-sys-label-medium: 500 0.75rem / 1rem Roboto;
  --mat-sys-label-medium-font: Roboto;
  --mat-sys-label-medium-line-height: 1rem;
  --mat-sys-label-medium-size: 0.75rem;
  --mat-sys-label-medium-tracking: 0.031rem;
  --mat-sys-label-medium-weight: 500;
  --mat-sys-label-medium-weight-prominent: 700;
  --mat-sys-label-small: 500 0.688rem / 1rem Roboto;
  --mat-sys-label-small-font: Roboto;
  --mat-sys-label-small-line-height: 1rem;
  --mat-sys-label-small-size: 0.688rem;
  --mat-sys-label-small-tracking: 0.031rem;
  --mat-sys-label-small-weight: 500;
  --mat-sys-title-large: 400 1.375rem / 1.75rem Roboto;
  --mat-sys-title-large-font: Roboto;
  --mat-sys-title-large-line-height: 1.75rem;
  --mat-sys-title-large-size: 1.375rem;
  --mat-sys-title-large-tracking: 0;
  --mat-sys-title-large-weight: 400;
  --mat-sys-title-medium: 500 1rem / 1.5rem Roboto;
  --mat-sys-title-medium-font: Roboto;
  --mat-sys-title-medium-line-height: 1.5rem;
  --mat-sys-title-medium-size: 1rem;
  --mat-sys-title-medium-tracking: 0.009rem;
  --mat-sys-title-medium-weight: 500;
  --mat-sys-title-small: 500 0.875rem / 1.25rem Roboto;
  --mat-sys-title-small-font: Roboto;
  --mat-sys-title-small-line-height: 1.25rem;
  --mat-sys-title-small-size: 0.875rem;
  --mat-sys-title-small-tracking: 0.006rem;
  --mat-sys-title-small-weight: 500;
  --mat-sys-corner-extra-large: 28px;
  --mat-sys-corner-extra-large-top: 28px 28px 0 0;
  --mat-sys-corner-extra-small: 4px;
  --mat-sys-corner-extra-small-top: 4px 4px 0 0;
  --mat-sys-corner-full: 9999px;
  --mat-sys-corner-large: 16px;
  --mat-sys-corner-large-end: 0 16px 16px 0;
  --mat-sys-corner-large-start: 16px 0 0 16px;
  --mat-sys-corner-large-top: 16px 16px 0 0;
  --mat-sys-corner-medium: 12px;
  --mat-sys-corner-none: 0;
  --mat-sys-corner-small: 8px;
  --mat-sys-dragged-state-layer-opacity: 0.16;
  --mat-sys-focus-state-layer-opacity: 0.12;
  --mat-sys-hover-state-layer-opacity: 0.08;
  --mat-sys-pressed-state-layer-opacity: 0.12;
}
:root {
  --primary-50: #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #3b82f6;
  --primary-600: #2563eb;
  --primary-700: #1d4ed8;
  --primary-800: #1e40af;
  --primary-900: #1e3a8a;
  --secondary-50: #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1e293b;
  --secondary-900: #0f172a;
  --success-50: #ecfdf5;
  --success-100: #d1fae5;
  --success-500: #10b981;
  --success-600: #059669;
  --success-700: #047857;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}
body {
  color-scheme: light;
  background-color: var(--secondary-50);
  color: var(--gray-800);
  font-family:
    "Inter",
    "Roboto",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  font-size: 15px;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  height: 100%;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 600;
  line-height: 1.3;
  color: var(--gray-900);
  margin: 0;
}
h1 {
  font-size: 2rem;
  letter-spacing: -0.02em;
}
h2 {
  font-size: 1.5rem;
  letter-spacing: -0.01em;
}
h3 {
  font-size: 1.25rem;
}
h4 {
  font-size: 1.125rem;
}
h5,
h6 {
  font-size: 1rem;
}
.text-sm {
  font-size: 0.875rem;
}
.text-xs {
  font-size: 0.8125rem;
}
.mat-mdc-button,
.mat-mdc-raised-button,
.mat-mdc-outlined-button {
  border-radius: 0 !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  transition: all var(--transition-base) !important;
  padding: 0 24px !important;
}
.mat-mdc-button.btn-with-icon,
.mat-mdc-raised-button.btn-with-icon,
.mat-mdc-outlined-button.btn-with-icon {
  flex-direction: row !important;
  display: inline-flex !important;
}
.mat-mdc-button:hover:not([disabled]),
.mat-mdc-raised-button:hover:not([disabled]),
.mat-mdc-outlined-button:hover:not([disabled]) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md) !important;
}
.mat-mdc-button:active:not([disabled]),
.mat-mdc-raised-button:active:not([disabled]),
.mat-mdc-outlined-button:active:not([disabled]) {
  transform: translateY(0);
}
.mat-mdc-raised-button:not([disabled]) {
  box-shadow: var(--shadow-sm) !important;
}
.mat-mdc-fab,
.mat-mdc-mini-fab {
  border-radius: 0 !important;
}
.mat-mdc-icon-button {
  border-radius: 0 !important;
}
.cdk-overlay-container {
  z-index: 10000 !important;
}
.toast-container {
  z-index: 10001 !important;
}
.mat-mdc-form-field {
  width: 100%;
}
.mat-mdc-form-field .mat-mdc-text-field-wrapper {
  border-radius: 0 !important;
  transition: all var(--transition-base);
}
.mat-mdc-form-field .mat-mdc-form-field-focus-overlay {
  border-radius: 0 !important;
}
.mat-mdc-form-field.mat-form-field-appearance-outline .mat-mdc-notch-piece {
  border-radius: 0 !important;
}
.mat-mdc-form-field:not(.mat-form-field-disabled) .mdc-text-field__input:not(:disabled) {
  color: #1a1a1a !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #1a1a1a !important;
}
.tenant-dialog-container .edit-mode-form .mat-mdc-form-field:not(.mat-form-field-disabled) .mdc-text-field__input:not(:disabled),
.tenant-dialog-container .edit-mode-form .mat-mdc-form-field:not(.mat-form-field-disabled) input:not([disabled]),
.tenant-dialog-container .edit-mode-form .mat-mdc-form-field:not(.mat-form-field-disabled) textarea:not([disabled]) {
  color: #1a1a1a !important;
  opacity: 1 !important;
  -webkit-text-fill-color: #1a1a1a !important;
  caret-color: #1a1a1a !important;
  font-weight: 500 !important;
}
ngx-intl-tel-input {
  display: block;
  width: 100%;
}
ngx-intl-tel-input .iti {
  width: 100%;
}
ngx-intl-tel-input .iti .iti__flag-container {
  z-index: 2;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}
ngx-intl-tel-input .iti .iti__selected-flag {
  padding: 0 12px 0 12px;
  width: auto !important;
  overflow: visible !important;
}
ngx-intl-tel-input .iti .iti__selected-flag:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
ngx-intl-tel-input .iti .iti__flag-box {
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
}
ngx-intl-tel-input .iti .iti__country-list {
  z-index: 1000;
  box-shadow: var(--shadow-lg);
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}
ngx-intl-tel-input .iti .iti__search-box {
  padding: 12px 16px 12px 16px !important;
  padding-left: 16px !important;
  text-align: left !important;
  font-size: 16px !important;
  height: 56px !important;
  line-height: 32px !important;
  direction: ltr !important;
  unicode-bidi: embed !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}
ngx-intl-tel-input .iti .iti__search-box::placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
ngx-intl-tel-input .iti .iti__search-box::-webkit-input-placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
ngx-intl-tel-input .iti .iti__search-box::-moz-placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
ngx-intl-tel-input .iti .iti__search-box:-ms-input-placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
ngx-intl-tel-input input {
  width: 100% !important;
  padding-left: 80px !important;
  font-size: 16px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(26, 26, 26) !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}
ngx-intl-tel-input input:placeholder-shown {
  padding-left: 100px !important;
}
ngx-intl-tel-input input::placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
ngx-intl-tel-input input::-webkit-input-placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
ngx-intl-tel-input input::-moz-placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
ngx-intl-tel-input input:-ms-input-placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
ngx-intl-tel-input.iti--allow-dropdown input {
  padding-left: 80px !important;
  font-size: 16px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(26, 26, 26) !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}
ngx-intl-tel-input.iti--allow-dropdown input:placeholder-shown {
  padding-left: 100px !important;
}
ngx-intl-tel-input.iti--separate-dial-code input {
  padding-left: 90px !important;
  font-size: 16px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(26, 26, 26) !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}
ngx-intl-tel-input.iti--separate-dial-code input:placeholder-shown {
  padding-left: 110px !important;
}
ngx-intl-tel-input .iti__flag-container {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}
ngx-intl-tel-input .iti__selected-flag {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  width: auto !important;
  overflow: visible !important;
}
ngx-intl-tel-input .iti__selected-flag:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
ngx-intl-tel-input .iti__flag-box {
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
}
ngx-intl-tel-input .iti__selected-dial-code {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin-left: 4px !important;
}
ngx-intl-tel-input.iti--separate-dial-code .iti__selected-dial-code {
  display: inline-block !important;
  visibility: visible !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #374151 !important;
  margin-left: 4px !important;
}
.iti__country-list {
  max-height: 300px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  direction: ltr !important;
}
.iti__search-box-container,
.iti__search-box-wrapper {
  text-align: left !important;
  direction: ltr !important;
}
.iti__search-box-container label,
.iti__search-box-wrapper label {
  text-align: left !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.iti__search-box {
  padding: 12px 16px 12px 16px !important;
  padding-left: 16px !important;
  padding-right: 16px !important;
  text-align: left !important;
  font-size: 16px !important;
  height: 56px !important;
  line-height: 32px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  direction: ltr !important;
  unicode-bidi: embed !important;
  margin: 0 !important;
  float: left !important;
  text-indent: 0 !important;
}
.iti__search-box::placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
.iti__search-box::-webkit-input-placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
.iti__search-box::-moz-placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
.iti__search-box:-ms-input-placeholder {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
  text-indent: 0 !important;
}
.iti__search-box-container,
.iti__search-box-wrapper,
.iti__country-list > div:first-child {
  text-align: left !important;
  direction: ltr !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}
.iti input {
  padding-left: 80px !important;
  font-size: 16px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(26, 26, 26) !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}
.iti input:placeholder-shown {
  padding-left: 100px !important;
}
.iti input::placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
.iti input::-webkit-input-placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
.iti input::-moz-placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
.iti input:-ms-input-placeholder {
  color: #1a1a1a !important;
  opacity: 1 !important;
  font-family: "Roboto", sans-serif !important;
}
.iti--separate-dial-code input {
  padding-left: 90px !important;
  font-size: 16px !important;
  font-family: "Roboto", sans-serif !important;
  font-weight: 500 !important;
  color: rgb(26, 26, 26) !important;
  line-height: 1.5 !important;
  vertical-align: middle !important;
}
.iti--separate-dial-code input:placeholder-shown {
  padding-left: 110px !important;
}
.iti__flag-container {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  overflow: visible !important;
}
.iti__selected-flag {
  display: flex !important;
  align-items: center !important;
  width: auto !important;
  overflow: visible !important;
}
.iti__selected-flag:hover {
  background-color: rgba(0, 0, 0, 0.04) !important;
}
.iti__flag-box {
  display: block !important;
  visibility: visible !important;
  overflow: visible !important;
}
.tenant-dialog-container .textarea-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}
.tenant-dialog-container .textarea-field .mat-mdc-form-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
  position: relative !important;
}
.tenant-dialog-container .textarea-field .mat-mdc-form-field .mat-mdc-text-field-wrapper {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.tenant-dialog-container .textarea-field .mat-mdc-form-field .mdc-text-field {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  position: relative !important;
}
.tenant-dialog-container .textarea-field .mat-mdc-form-field textarea {
  padding-left: 52px !important;
  padding-top: 16px !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  line-height: 1.5 !important;
  vertical-align: top !important;
  font-size: 14px !important;
}
.tenant-dialog-container .textarea-field .mat-mdc-form-field .mat-mdc-form-field-icon-container {
  position: absolute !important;
  top: 17px !important;
  left: 16px !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 24px !important;
  width: 24px !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
.tenant-dialog-container .textarea-field .mat-mdc-form-field .mat-mdc-form-field-icon-prefix,
.tenant-dialog-container .textarea-field .mat-mdc-form-field .mat-mdc-form-field-icon-wrapper {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  height: 24px !important;
  width: 24px !important;
}
.tenant-dialog-container .textarea-field .mat-mdc-form-field mat-icon[matPrefix] {
  display: inline-flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  line-height: 1.5 !important;
  margin: 0 !important;
  padding: 0 !important;
  vertical-align: top !important;
}
.tenant-dialog-container .form-group.full-width {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.tenant-dialog-container .form-group.full-width .textarea-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}
.tenant-dialog-container .form-group.full-width mat-form-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  display: block !important;
}
.tenant-dialog-container {
  width: 900px;
  max-width: 95vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}
.tenant-dialog-container .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 28px 32px 20px 32px;
  background:
    linear-gradient(
      180deg,
      white 0%,
      var(--gray-50) 100%);
  border-bottom: 1px solid var(--gray-200);
}
.tenant-dialog-container .dialog-header .header-content {
  flex: 1;
  text-align: left !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  padding-left: 0 !important;
}
.tenant-dialog-container .dialog-header .header-content h2 {
  font-size: 24px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 6px 0;
  padding-left: 0 !important;
  padding-bottom: 0 !important;
  letter-spacing: -0.01em;
  text-align: left !important;
  align-self: flex-start !important;
  width: 100% !important;
}
.tenant-dialog-container .dialog-header .header-content .header-subtitle {
  font-size: 14px;
  color: var(--gray-600);
  margin: 0;
  text-align: left !important;
  align-self: flex-start !important;
  width: 100% !important;
}
.tenant-dialog-container .dialog-header .close-button {
  color: var(--gray-500);
  transition: all var(--transition-base);
  margin-top: -4px;
}
.tenant-dialog-container .dialog-header .close-button:hover {
  color: var(--gray-900);
  background: var(--gray-100);
}
.tenant-dialog-container .dialog-content {
  padding: 0 !important;
  overflow-y: auto;
  flex: 1;
}
.tenant-dialog-container .tenant-form {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.tenant-dialog-container .form-section {
  background: white;
  border: 1px solid var(--gray-200);
  padding: 24px;
}
.tenant-dialog-container .form-section .section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-200);
}
.tenant-dialog-container .form-section .section-header mat-icon {
  color: var(--primary-600);
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.tenant-dialog-container .form-section .section-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tenant-dialog-container .form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  width: 100%;
}
.tenant-dialog-container .form-row:not(:last-child) {
  margin-bottom: 20px;
}
.tenant-dialog-container .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  width: 100%;
}
.tenant-dialog-container .form-group.full-width {
  grid-column: 1/-1;
  width: 100% !important;
  max-width: 100% !important;
}
.tenant-dialog-container .form-group mat-form-field {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
}
.tenant-dialog-container .form-group mat-form-field .mat-mdc-text-field-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}
.tenant-dialog-container .form-group mat-form-field .mdc-text-field {
  width: 100% !important;
  max-width: 100% !important;
}
.tenant-dialog-container .form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-900);
}
.tenant-dialog-container .form-label .required {
  color: var(--danger-600);
}
.tenant-dialog-container .view-content {
  padding: 32px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.tenant-dialog-container .view-section {
  background: white;
  border: 1px solid var(--gray-200);
  padding: 24px;
}
.tenant-dialog-container .view-section .section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 2px solid var(--gray-200);
}
.tenant-dialog-container .view-section .section-header mat-icon {
  color: var(--primary-600);
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.tenant-dialog-container .view-section .section-header h3 {
  font-size: 16px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  flex: 1;
}
.tenant-dialog-container .view-section .section-header .header-action-btn {
  font-size: 13px;
  font-weight: 600;
}
.tenant-dialog-container .view-section .section-header .header-action-btn mat-icon {
  font-size: 18px;
  width: 18px;
  height: 18px;
  margin-right: 6px;
}
.tenant-dialog-container .view-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.tenant-dialog-container .view-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--gray-50);
  border-left: 3px solid var(--gray-300);
}
.tenant-dialog-container .view-item.full-width {
  grid-column: 1/-1;
}
.tenant-dialog-container .view-item .view-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tenant-dialog-container .view-item .view-label mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: var(--gray-600);
}
.tenant-dialog-container .view-item .view-value {
  font-size: 15px;
  font-weight: 600;
  color: #1a1a1a;
}
.tenant-dialog-container .view-item .view-value.slug-value {
  font-family: "Courier New", monospace;
  color: var(--primary-700);
  font-weight: 700;
}
.tenant-dialog-container .view-item .view-value a {
  color: var(--primary-600);
  text-decoration: none;
  font-weight: 600;
}
.tenant-dialog-container .view-item .view-value a:hover {
  text-decoration: underline;
}
.tenant-dialog-container .status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.tenant-dialog-container .status-badge mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
}
.tenant-dialog-container .status-badge.active {
  background: var(--success-50);
  color: var(--success-700);
  border: 1px solid var(--success-200);
}
.tenant-dialog-container .status-badge.active mat-icon {
  color: var(--success-600);
}
.tenant-dialog-container .status-badge.inactive {
  background: var(--danger-50);
  color: var(--danger-700);
  border: 1px solid var(--danger-200);
}
.tenant-dialog-container .status-badge.inactive mat-icon {
  color: var(--danger-600);
}
.tenant-dialog-container .checkbox-field {
  padding: 16px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}
.tenant-dialog-container .checkbox-field .checkbox-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tenant-dialog-container .checkbox-field .checkbox-label .label-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--gray-900);
}
.tenant-dialog-container .checkbox-field .checkbox-label .label-hint {
  font-size: 13px;
  color: var(--gray-600);
}
.tenant-dialog-container .modules-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.tenant-dialog-container .module-card {
  display: flex;
  gap: 16px;
  padding: 16px;
  background: white;
  border: 1px solid var(--gray-200);
  transition: all var(--transition-base);
}
.tenant-dialog-container .module-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-300);
}
.tenant-dialog-container .module-card.inactive {
  opacity: 0.7;
}
.tenant-dialog-container .module-card .module-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background:
    linear-gradient(
      135deg,
      var(--primary-600),
      var(--primary-400));
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tenant-dialog-container .module-card .module-icon mat-icon {
  color: white;
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.tenant-dialog-container .module-card .module-info {
  flex: 1;
  min-width: 0;
}
.tenant-dialog-container .module-card .module-info h4 {
  font-size: 15px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0 0 6px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tenant-dialog-container .module-card .module-info p {
  font-size: 13px;
  color: var(--gray-600);
  margin: 0 0 10px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tenant-dialog-container .module-card .module-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.tenant-dialog-container .module-card .type-badge {
  display: inline-block;
  padding: 4px 10px;
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
  font-size: 11px;
  font-weight: 600;
}
.tenant-dialog-container .empty-modules {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 32px;
  background: var(--gray-50);
  border: 2px dashed var(--gray-300);
  text-align: center;
}
.tenant-dialog-container .empty-modules mat-icon {
  font-size: 64px;
  width: 64px;
  height: 64px;
  color: var(--gray-400);
  margin-bottom: 16px;
}
.tenant-dialog-container .empty-modules p {
  font-size: 15px;
  color: var(--gray-600);
  margin: 0 0 24px 0;
}
.tenant-dialog-container .dialog-actions {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  padding: 20px 32px;
  border-top: 1px solid var(--gray-200);
  background: var(--gray-50);
  gap: 12px !important;
}
.tenant-dialog-container .dialog-actions button {
  min-width: 120px;
}
.tenant-dialog-container .dialog-actions button.btn-with-icon ::ng-deep .mdc-button__label {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
}
.tenant-dialog-container .dialog-actions button mat-spinner ::ng-deep circle {
  stroke: white;
}
@media (max-width: 768px) {
  .tenant-dialog-container {
    width: 100%;
  }
  .tenant-dialog-container .dialog-header {
    padding: 20px;
  }
  .tenant-dialog-container .tenant-form,
  .tenant-dialog-container .view-content {
    padding: 20px;
    gap: 24px;
  }
  .tenant-dialog-container .form-section,
  .tenant-dialog-container .view-section {
    padding: 16px;
  }
  .tenant-dialog-container .form-row,
  .tenant-dialog-container .view-grid {
    grid-template-columns: 1fr;
  }
  .tenant-dialog-container .modules-grid {
    grid-template-columns: 1fr;
  }
  .tenant-dialog-container .dialog-actions {
    padding: 16px 20px;
    flex-direction: column-reverse;
  }
  .tenant-dialog-container .dialog-actions button {
    width: 100%;
  }
}
.mat-mdc-select .mat-mdc-select-trigger {
  border-radius: 0 !important;
}
.mat-mdc-chip {
  border-radius: 0 !important;
}
.mat-mdc-card {
  border-radius: 0 !important;
  box-shadow: var(--shadow-md) !important;
  transition: all var(--transition-base) !important;
  border: 1px solid var(--gray-200) !important;
  border-top: 1px solid var(--gray-200) !important;
}
.mat-mdc-dialog-container {
  border-radius: 0 !important;
}
.mat-mdc-checkbox .mdc-checkbox__background,
.mat-mdc-checkbox .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-checkbox__background,
.mat-mdc-radio-button .mdc-radio__outer-circle {
  border-radius: 0 !important;
}
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--gray-100);
  border-radius: var(--radius-sm);
}
::-webkit-scrollbar-thumb {
  background: var(--secondary-400);
  border-radius: var(--radius-sm);
  border: 2px solid var(--gray-100);
}
::-webkit-scrollbar-thumb:hover {
  background: var(--secondary-500);
}
::-webkit-scrollbar-thumb:active {
  background: var(--secondary-600);
}
.transition-all {
  transition: all var(--transition-base);
}
.shadow-sm {
  box-shadow: var(--shadow-sm);
}
.shadow-md {
  box-shadow: var(--shadow-md);
}
.shadow-lg {
  box-shadow: var(--shadow-lg);
}
.shadow-xl {
  box-shadow: var(--shadow-xl);
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.animate-fadeIn {
  animation: fadeIn var(--transition-base) ease-out;
}
.animate-slideInUp {
  animation: slideInUp var(--transition-slow) ease-out;
}
.animate-slideInDown {
  animation: slideInDown var(--transition-slow) ease-out;
}
.animate-scaleIn {
  animation: scaleIn var(--transition-base) ease-out;
}

/* node_modules/intl-tel-input/build/css/intlTelInput.css */
.iti {
  position: relative;
  display: inline-block;
}
.iti * {
  box-sizing: border-box;
}
.iti__hide {
  display: none;
}
.iti__v-hide {
  visibility: hidden;
}
.iti input.iti__tel-input,
.iti input.iti__tel-input[type=text],
.iti input.iti__tel-input[type=tel] {
  position: relative;
  z-index: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-right: 36px;
  margin-right: 0;
}
.iti__flag-container {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  padding: 1px;
}
.iti__selected-flag {
  z-index: 1;
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 6px 0 8px;
}
.iti__arrow {
  margin-left: 6px;
  width: 0;
  height: 0;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 4px solid #555;
}
[dir=rtl] .iti__arrow {
  margin-right: 6px;
  margin-left: 0;
}
.iti__arrow--up {
  border-top: none;
  border-bottom: 4px solid #555;
}
.iti__dropdown-content {
  border-radius: 3px;
  background-color: white;
}
.iti--inline-dropdown .iti__dropdown-content {
  position: absolute;
  z-index: 2;
  margin-top: 3px;
  margin-left: -1px;
  border: 1px solid #ccc;
  box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
}
.iti__dropdown-content--dropup {
  bottom: 100%;
  margin-bottom: 3px;
}
.iti__search-input {
  width: 100%;
  border-width: 0;
  border-radius: 3px;
  padding: 9px 12px;
}
.iti__search-input + .iti__country-list {
  border-top: 1px solid #ccc;
}
.iti__country-list {
  list-style: none;
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}
.iti--inline-dropdown .iti__country-list {
  max-height: 185px;
}
.iti--flexible-dropdown-width .iti__country-list {
  white-space: nowrap;
}
@media (max-width: 500px) {
  .iti--flexible-dropdown-width .iti__country-list {
    white-space: normal;
  }
}
.iti__flag-box {
  display: inline-block;
  width: 20px;
}
.iti__divider {
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #ccc;
}
.iti__country {
  display: flex;
  align-items: center;
  padding: 8px 8px;
  outline: none;
}
.iti__dial-code {
  color: #999;
}
.iti__country.iti__highlight {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti__flag-box,
.iti__country-name {
  margin-right: 8px;
}
[dir=rtl] .iti__flag-box,
[dir=rtl] .iti__country-name {
  margin-right: 0;
  margin-left: 8px;
}
.iti--allow-dropdown input.iti__tel-input,
.iti--allow-dropdown input.iti__tel-input[type=text],
.iti--allow-dropdown input.iti__tel-input[type=tel],
.iti--show-selected-dial-code input.iti__tel-input,
.iti--show-selected-dial-code input.iti__tel-input[type=text],
.iti--show-selected-dial-code input.iti__tel-input[type=tel] {
  padding-right: 6px;
  padding-left: 52px;
  margin-left: 0;
}
[dir=rtl] .iti--allow-dropdown input.iti__tel-input,
[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=text],
[dir=rtl] .iti--allow-dropdown input.iti__tel-input[type=tel],
[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input,
[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=text],
[dir=rtl] .iti--show-selected-dial-code input.iti__tel-input[type=tel] {
  padding-right: 52px;
  padding-left: 6px;
  margin-right: 0;
}
.iti--allow-dropdown .iti__flag-container,
.iti--show-selected-dial-code .iti__flag-container {
  right: auto;
  left: 0;
}
[dir=rtl] .iti--allow-dropdown .iti__flag-container,
[dir=rtl] .iti--show-selected-dial-code .iti__flag-container {
  right: 0;
  left: auto;
}
.iti--allow-dropdown .iti__flag-container:hover {
  cursor: pointer;
}
.iti--allow-dropdown .iti__flag-container:hover .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover,
.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover {
  cursor: default;
}
.iti--allow-dropdown .iti__flag-container:has(+ input[disabled]):hover .iti__selected-flag,
.iti--allow-dropdown .iti__flag-container:has(+ input[readonly]):hover .iti__selected-flag {
  background-color: transparent;
}
.iti--show-selected-dial-code .iti__selected-flag {
  background-color: rgba(0, 0, 0, 0.05);
}
.iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 6px;
}
[dir=rtl] .iti--show-selected-dial-code.iti--show-flags .iti__selected-dial-code {
  margin-left: 0;
  margin-right: 6px;
}
.iti--container {
  position: fixed;
  top: -1000px;
  left: -1000px;
  z-index: 1060;
  padding: 1px;
}
.iti--container:hover {
  cursor: pointer;
}
.iti--fullscreen-popup.iti--container {
  background-color: rgba(0, 0, 0, 0.5);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  position: fixed;
  padding: 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.iti--fullscreen-popup.iti--container.iti--country-search {
  justify-content: flex-start;
}
.iti--fullscreen-popup .iti__dropdown-content {
  display: flex;
  flex-direction: column;
  max-height: 100%;
  position: relative;
}
.iti--fullscreen-popup .iti__country {
  padding: 10px 10px;
  line-height: 1.5em;
}
.iti__flag {
  width: 20px;
}
.iti__flag.iti__be {
  width: 18px;
}
.iti__flag.iti__ch {
  width: 15px;
}
.iti__flag.iti__mc {
  width: 19px;
}
.iti__flag.iti__ne {
  width: 18px;
}
.iti__flag.iti__np {
  width: 13px;
}
.iti__flag.iti__va {
  width: 15px;
}
@media (min-resolution: 2x) {
  .iti__flag {
    background-size: 5762px 15px;
  }
}
.iti__flag.iti__ac {
  height: 10px;
  background-position: 0px 0px;
}
.iti__flag.iti__ad {
  height: 14px;
  background-position: -22px 0px;
}
.iti__flag.iti__ae {
  height: 10px;
  background-position: -44px 0px;
}
.iti__flag.iti__af {
  height: 14px;
  background-position: -66px 0px;
}
.iti__flag.iti__ag {
  height: 14px;
  background-position: -88px 0px;
}
.iti__flag.iti__ai {
  height: 10px;
  background-position: -110px 0px;
}
.iti__flag.iti__al {
  height: 15px;
  background-position: -132px 0px;
}
.iti__flag.iti__am {
  height: 10px;
  background-position: -154px 0px;
}
.iti__flag.iti__ao {
  height: 14px;
  background-position: -176px 0px;
}
.iti__flag.iti__aq {
  height: 14px;
  background-position: -198px 0px;
}
.iti__flag.iti__ar {
  height: 13px;
  background-position: -220px 0px;
}
.iti__flag.iti__as {
  height: 10px;
  background-position: -242px 0px;
}
.iti__flag.iti__at {
  height: 14px;
  background-position: -264px 0px;
}
.iti__flag.iti__au {
  height: 10px;
  background-position: -286px 0px;
}
.iti__flag.iti__aw {
  height: 14px;
  background-position: -308px 0px;
}
.iti__flag.iti__ax {
  height: 13px;
  background-position: -330px 0px;
}
.iti__flag.iti__az {
  height: 10px;
  background-position: -352px 0px;
}
.iti__flag.iti__ba {
  height: 10px;
  background-position: -374px 0px;
}
.iti__flag.iti__bb {
  height: 14px;
  background-position: -396px 0px;
}
.iti__flag.iti__bd {
  height: 12px;
  background-position: -418px 0px;
}
.iti__flag.iti__be {
  height: 15px;
  background-position: -440px 0px;
}
.iti__flag.iti__bf {
  height: 14px;
  background-position: -460px 0px;
}
.iti__flag.iti__bg {
  height: 12px;
  background-position: -482px 0px;
}
.iti__flag.iti__bh {
  height: 12px;
  background-position: -504px 0px;
}
.iti__flag.iti__bi {
  height: 12px;
  background-position: -526px 0px;
}
.iti__flag.iti__bj {
  height: 14px;
  background-position: -548px 0px;
}
.iti__flag.iti__bl {
  height: 14px;
  background-position: -570px 0px;
}
.iti__flag.iti__bm {
  height: 10px;
  background-position: -592px 0px;
}
.iti__flag.iti__bn {
  height: 10px;
  background-position: -614px 0px;
}
.iti__flag.iti__bo {
  height: 14px;
  background-position: -636px 0px;
}
.iti__flag.iti__bq {
  height: 14px;
  background-position: -658px 0px;
}
.iti__flag.iti__br {
  height: 14px;
  background-position: -680px 0px;
}
.iti__flag.iti__bs {
  height: 10px;
  background-position: -702px 0px;
}
.iti__flag.iti__bt {
  height: 14px;
  background-position: -724px 0px;
}
.iti__flag.iti__bv {
  height: 15px;
  background-position: -746px 0px;
}
.iti__flag.iti__bw {
  height: 14px;
  background-position: -768px 0px;
}
.iti__flag.iti__by {
  height: 10px;
  background-position: -790px 0px;
}
.iti__flag.iti__bz {
  height: 12px;
  background-position: -812px 0px;
}
.iti__flag.iti__ca {
  height: 10px;
  background-position: -834px 0px;
}
.iti__flag.iti__cc {
  height: 10px;
  background-position: -856px 0px;
}
.iti__flag.iti__cd {
  height: 15px;
  background-position: -878px 0px;
}
.iti__flag.iti__cf {
  height: 14px;
  background-position: -900px 0px;
}
.iti__flag.iti__cg {
  height: 14px;
  background-position: -922px 0px;
}
.iti__flag.iti__ch {
  height: 15px;
  background-position: -944px 0px;
}
.iti__flag.iti__ci {
  height: 14px;
  background-position: -961px 0px;
}
.iti__flag.iti__ck {
  height: 10px;
  background-position: -983px 0px;
}
.iti__flag.iti__cl {
  height: 14px;
  background-position: -1005px 0px;
}
.iti__flag.iti__cm {
  height: 14px;
  background-position: -1027px 0px;
}
.iti__flag.iti__cn {
  height: 14px;
  background-position: -1049px 0px;
}
.iti__flag.iti__co {
  height: 14px;
  background-position: -1071px 0px;
}
.iti__flag.iti__cp {
  height: 14px;
  background-position: -1093px 0px;
}
.iti__flag.iti__cq {
  height: 12px;
  background-position: -1115px 0px;
}
.iti__flag.iti__cr {
  height: 12px;
  background-position: -1137px 0px;
}
.iti__flag.iti__cu {
  height: 10px;
  background-position: -1159px 0px;
}
.iti__flag.iti__cv {
  height: 12px;
  background-position: -1181px 0px;
}
.iti__flag.iti__cw {
  height: 14px;
  background-position: -1203px 0px;
}
.iti__flag.iti__cx {
  height: 10px;
  background-position: -1225px 0px;
}
.iti__flag.iti__cy {
  height: 14px;
  background-position: -1247px 0px;
}
.iti__flag.iti__cz {
  height: 14px;
  background-position: -1269px 0px;
}
.iti__flag.iti__de {
  height: 12px;
  background-position: -1291px 0px;
}
.iti__flag.iti__dg {
  height: 10px;
  background-position: -1313px 0px;
}
.iti__flag.iti__dj {
  height: 14px;
  background-position: -1335px 0px;
}
.iti__flag.iti__dk {
  height: 15px;
  background-position: -1357px 0px;
}
.iti__flag.iti__dm {
  height: 10px;
  background-position: -1379px 0px;
}
.iti__flag.iti__do {
  height: 14px;
  background-position: -1401px 0px;
}
.iti__flag.iti__dz {
  height: 14px;
  background-position: -1423px 0px;
}
.iti__flag.iti__ea {
  height: 14px;
  background-position: -1445px 0px;
}
.iti__flag.iti__ec {
  height: 14px;
  background-position: -1467px 0px;
}
.iti__flag.iti__ee {
  height: 13px;
  background-position: -1489px 0px;
}
.iti__flag.iti__eg {
  height: 14px;
  background-position: -1511px 0px;
}
.iti__flag.iti__eh {
  height: 10px;
  background-position: -1533px 0px;
}
.iti__flag.iti__er {
  height: 10px;
  background-position: -1555px 0px;
}
.iti__flag.iti__es {
  height: 14px;
  background-position: -1577px 0px;
}
.iti__flag.iti__et {
  height: 10px;
  background-position: -1599px 0px;
}
.iti__flag.iti__eu {
  height: 14px;
  background-position: -1621px 0px;
}
.iti__flag.iti__ez {
  height: 14px;
  background-position: -1643px 0px;
}
.iti__flag.iti__fi {
  height: 12px;
  background-position: -1665px 0px;
}
.iti__flag.iti__fj {
  height: 10px;
  background-position: -1687px 0px;
}
.iti__flag.iti__fk {
  height: 10px;
  background-position: -1709px 0px;
}
.iti__flag.iti__fm {
  height: 11px;
  background-position: -1731px 0px;
}
.iti__flag.iti__fo {
  height: 15px;
  background-position: -1753px 0px;
}
.iti__flag.iti__fr {
  height: 14px;
  background-position: -1775px 0px;
}
.iti__flag.iti__fx {
  height: 14px;
  background-position: -1797px 0px;
}
.iti__flag.iti__ga {
  height: 15px;
  background-position: -1819px 0px;
}
.iti__flag.iti__gb {
  height: 10px;
  background-position: -1841px 0px;
}
.iti__flag.iti__gd {
  height: 12px;
  background-position: -1863px 0px;
}
.iti__flag.iti__ge {
  height: 14px;
  background-position: -1885px 0px;
}
.iti__flag.iti__gf {
  height: 14px;
  background-position: -1907px 0px;
}
.iti__flag.iti__gg {
  height: 14px;
  background-position: -1929px 0px;
}
.iti__flag.iti__gh {
  height: 14px;
  background-position: -1951px 0px;
}
.iti__flag.iti__gi {
  height: 10px;
  background-position: -1973px 0px;
}
.iti__flag.iti__gl {
  height: 14px;
  background-position: -1995px 0px;
}
.iti__flag.iti__gm {
  height: 14px;
  background-position: -2017px 0px;
}
.iti__flag.iti__gn {
  height: 14px;
  background-position: -2039px 0px;
}
.iti__flag.iti__gp {
  height: 14px;
  background-position: -2061px 0px;
}
.iti__flag.iti__gq {
  height: 14px;
  background-position: -2083px 0px;
}
.iti__flag.iti__gr {
  height: 14px;
  background-position: -2105px 0px;
}
.iti__flag.iti__gs {
  height: 10px;
  background-position: -2127px 0px;
}
.iti__flag.iti__gt {
  height: 13px;
  background-position: -2149px 0px;
}
.iti__flag.iti__gu {
  height: 11px;
  background-position: -2171px 0px;
}
.iti__flag.iti__gw {
  height: 10px;
  background-position: -2193px 0px;
}
.iti__flag.iti__gy {
  height: 12px;
  background-position: -2215px 0px;
}
.iti__flag.iti__hk {
  height: 14px;
  background-position: -2237px 0px;
}
.iti__flag.iti__hm {
  height: 10px;
  background-position: -2259px 0px;
}
.iti__flag.iti__hn {
  height: 10px;
  background-position: -2281px 0px;
}
.iti__flag.iti__hr {
  height: 10px;
  background-position: -2303px 0px;
}
.iti__flag.iti__ht {
  height: 12px;
  background-position: -2325px 0px;
}
.iti__flag.iti__hu {
  height: 10px;
  background-position: -2347px 0px;
}
.iti__flag.iti__ic {
  height: 14px;
  background-position: -2369px 0px;
}
.iti__flag.iti__id {
  height: 14px;
  background-position: -2391px 0px;
}
.iti__flag.iti__ie {
  height: 10px;
  background-position: -2413px 0px;
}
.iti__flag.iti__il {
  height: 15px;
  background-position: -2435px 0px;
}
.iti__flag.iti__im {
  height: 10px;
  background-position: -2457px 0px;
}
.iti__flag.iti__in {
  height: 14px;
  background-position: -2479px 0px;
}
.iti__flag.iti__io {
  height: 10px;
  background-position: -2501px 0px;
}
.iti__flag.iti__iq {
  height: 14px;
  background-position: -2523px 0px;
}
.iti__flag.iti__ir {
  height: 12px;
  background-position: -2545px 0px;
}
.iti__flag.iti__is {
  height: 15px;
  background-position: -2567px 0px;
}
.iti__flag.iti__it {
  height: 14px;
  background-position: -2589px 0px;
}
.iti__flag.iti__je {
  height: 12px;
  background-position: -2611px 0px;
}
.iti__flag.iti__jm {
  height: 10px;
  background-position: -2633px 0px;
}
.iti__flag.iti__jo {
  height: 10px;
  background-position: -2655px 0px;
}
.iti__flag.iti__jp {
  height: 14px;
  background-position: -2677px 0px;
}
.iti__flag.iti__ke {
  height: 14px;
  background-position: -2699px 0px;
}
.iti__flag.iti__kg {
  height: 12px;
  background-position: -2721px 0px;
}
.iti__flag.iti__kh {
  height: 13px;
  background-position: -2743px 0px;
}
.iti__flag.iti__ki {
  height: 10px;
  background-position: -2765px 0px;
}
.iti__flag.iti__km {
  height: 12px;
  background-position: -2787px 0px;
}
.iti__flag.iti__kn {
  height: 14px;
  background-position: -2809px 0px;
}
.iti__flag.iti__kp {
  height: 10px;
  background-position: -2831px 0px;
}
.iti__flag.iti__kr {
  height: 14px;
  background-position: -2853px 0px;
}
.iti__flag.iti__kw {
  height: 10px;
  background-position: -2875px 0px;
}
.iti__flag.iti__ky {
  height: 10px;
  background-position: -2897px 0px;
}
.iti__flag.iti__kz {
  height: 10px;
  background-position: -2919px 0px;
}
.iti__flag.iti__la {
  height: 14px;
  background-position: -2941px 0px;
}
.iti__flag.iti__lb {
  height: 14px;
  background-position: -2963px 0px;
}
.iti__flag.iti__lc {
  height: 10px;
  background-position: -2985px 0px;
}
.iti__flag.iti__li {
  height: 12px;
  background-position: -3007px 0px;
}
.iti__flag.iti__lk {
  height: 10px;
  background-position: -3029px 0px;
}
.iti__flag.iti__lr {
  height: 11px;
  background-position: -3051px 0px;
}
.iti__flag.iti__ls {
  height: 14px;
  background-position: -3073px 0px;
}
.iti__flag.iti__lt {
  height: 12px;
  background-position: -3095px 0px;
}
.iti__flag.iti__lu {
  height: 12px;
  background-position: -3117px 0px;
}
.iti__flag.iti__lv {
  height: 10px;
  background-position: -3139px 0px;
}
.iti__flag.iti__ly {
  height: 10px;
  background-position: -3161px 0px;
}
.iti__flag.iti__ma {
  height: 14px;
  background-position: -3183px 0px;
}
.iti__flag.iti__mc {
  height: 15px;
  background-position: -3205px 0px;
}
.iti__flag.iti__md {
  height: 10px;
  background-position: -3226px 0px;
}
.iti__flag.iti__me {
  height: 10px;
  background-position: -3248px 0px;
}
.iti__flag.iti__mf {
  height: 14px;
  background-position: -3270px 0px;
}
.iti__flag.iti__mg {
  height: 14px;
  background-position: -3292px 0px;
}
.iti__flag.iti__mh {
  height: 11px;
  background-position: -3314px 0px;
}
.iti__flag.iti__mk {
  height: 10px;
  background-position: -3336px 0px;
}
.iti__flag.iti__ml {
  height: 14px;
  background-position: -3358px 0px;
}
.iti__flag.iti__mm {
  height: 14px;
  background-position: -3380px 0px;
}
.iti__flag.iti__mn {
  height: 10px;
  background-position: -3402px 0px;
}
.iti__flag.iti__mo {
  height: 14px;
  background-position: -3424px 0px;
}
.iti__flag.iti__mp {
  height: 10px;
  background-position: -3446px 0px;
}
.iti__flag.iti__mq {
  height: 14px;
  background-position: -3468px 0px;
}
.iti__flag.iti__mr {
  height: 14px;
  background-position: -3490px 0px;
}
.iti__flag.iti__ms {
  height: 10px;
  background-position: -3512px 0px;
}
.iti__flag.iti__mt {
  height: 14px;
  background-position: -3534px 0px;
}
.iti__flag.iti__mu {
  height: 14px;
  background-position: -3556px 0px;
}
.iti__flag.iti__mv {
  height: 14px;
  background-position: -3578px 0px;
}
.iti__flag.iti__mw {
  height: 14px;
  background-position: -3600px 0px;
}
.iti__flag.iti__mx {
  height: 12px;
  background-position: -3622px 0px;
}
.iti__flag.iti__my {
  height: 10px;
  background-position: -3644px 0px;
}
.iti__flag.iti__mz {
  height: 14px;
  background-position: -3666px 0px;
}
.iti__flag.iti__na {
  height: 14px;
  background-position: -3688px 0px;
}
.iti__flag.iti__nc {
  height: 10px;
  background-position: -3710px 0px;
}
.iti__flag.iti__ne {
  height: 15px;
  background-position: -3732px 0px;
}
.iti__flag.iti__nf {
  height: 10px;
  background-position: -3752px 0px;
}
.iti__flag.iti__ng {
  height: 10px;
  background-position: -3774px 0px;
}
.iti__flag.iti__ni {
  height: 12px;
  background-position: -3796px 0px;
}
.iti__flag.iti__nl {
  height: 14px;
  background-position: -3818px 0px;
}
.iti__flag.iti__no {
  height: 15px;
  background-position: -3840px 0px;
}
.iti__flag.iti__np {
  height: 15px;
  background-position: -3862px 0px;
}
.iti__flag.iti__nr {
  height: 10px;
  background-position: -3877px 0px;
}
.iti__flag.iti__nu {
  height: 10px;
  background-position: -3899px 0px;
}
.iti__flag.iti__nz {
  height: 10px;
  background-position: -3921px 0px;
}
.iti__flag.iti__om {
  height: 10px;
  background-position: -3943px 0px;
}
.iti__flag.iti__pa {
  height: 14px;
  background-position: -3965px 0px;
}
.iti__flag.iti__pe {
  height: 14px;
  background-position: -3987px 0px;
}
.iti__flag.iti__pf {
  height: 14px;
  background-position: -4009px 0px;
}
.iti__flag.iti__pg {
  height: 15px;
  background-position: -4031px 0px;
}
.iti__flag.iti__ph {
  height: 10px;
  background-position: -4053px 0px;
}
.iti__flag.iti__pk {
  height: 14px;
  background-position: -4075px 0px;
}
.iti__flag.iti__pl {
  height: 13px;
  background-position: -4097px 0px;
}
.iti__flag.iti__pm {
  height: 14px;
  background-position: -4119px 0px;
}
.iti__flag.iti__pn {
  height: 10px;
  background-position: -4141px 0px;
}
.iti__flag.iti__pr {
  height: 14px;
  background-position: -4163px 0px;
}
.iti__flag.iti__ps {
  height: 10px;
  background-position: -4185px 0px;
}
.iti__flag.iti__pt {
  height: 14px;
  background-position: -4207px 0px;
}
.iti__flag.iti__pw {
  height: 13px;
  background-position: -4229px 0px;
}
.iti__flag.iti__py {
  height: 11px;
  background-position: -4251px 0px;
}
.iti__flag.iti__qa {
  height: 8px;
  background-position: -4273px 0px;
}
.iti__flag.iti__re {
  height: 14px;
  background-position: -4295px 0px;
}
.iti__flag.iti__ro {
  height: 14px;
  background-position: -4317px 0px;
}
.iti__flag.iti__rs {
  height: 14px;
  background-position: -4339px 0px;
}
.iti__flag.iti__ru {
  height: 14px;
  background-position: -4361px 0px;
}
.iti__flag.iti__rw {
  height: 14px;
  background-position: -4383px 0px;
}
.iti__flag.iti__sa {
  height: 14px;
  background-position: -4405px 0px;
}
.iti__flag.iti__sb {
  height: 10px;
  background-position: -4427px 0px;
}
.iti__flag.iti__sc {
  height: 10px;
  background-position: -4449px 0px;
}
.iti__flag.iti__sd {
  height: 10px;
  background-position: -4471px 0px;
}
.iti__flag.iti__se {
  height: 13px;
  background-position: -4493px 0px;
}
.iti__flag.iti__sg {
  height: 14px;
  background-position: -4515px 0px;
}
.iti__flag.iti__sh {
  height: 10px;
  background-position: -4537px 0px;
}
.iti__flag.iti__si {
  height: 10px;
  background-position: -4559px 0px;
}
.iti__flag.iti__sj {
  height: 15px;
  background-position: -4581px 0px;
}
.iti__flag.iti__sk {
  height: 14px;
  background-position: -4603px 0px;
}
.iti__flag.iti__sl {
  height: 14px;
  background-position: -4625px 0px;
}
.iti__flag.iti__sm {
  height: 15px;
  background-position: -4647px 0px;
}
.iti__flag.iti__sn {
  height: 14px;
  background-position: -4669px 0px;
}
.iti__flag.iti__so {
  height: 14px;
  background-position: -4691px 0px;
}
.iti__flag.iti__sr {
  height: 14px;
  background-position: -4713px 0px;
}
.iti__flag.iti__ss {
  height: 10px;
  background-position: -4735px 0px;
}
.iti__flag.iti__st {
  height: 10px;
  background-position: -4757px 0px;
}
.iti__flag.iti__su {
  height: 10px;
  background-position: -4779px 0px;
}
.iti__flag.iti__sv {
  height: 12px;
  background-position: -4801px 0px;
}
.iti__flag.iti__sx {
  height: 14px;
  background-position: -4823px 0px;
}
.iti__flag.iti__sy {
  height: 14px;
  background-position: -4845px 0px;
}
.iti__flag.iti__sz {
  height: 14px;
  background-position: -4867px 0px;
}
.iti__flag.iti__ta {
  height: 10px;
  background-position: -4889px 0px;
}
.iti__flag.iti__tc {
  height: 10px;
  background-position: -4911px 0px;
}
.iti__flag.iti__td {
  height: 14px;
  background-position: -4933px 0px;
}
.iti__flag.iti__tf {
  height: 14px;
  background-position: -4955px 0px;
}
.iti__flag.iti__tg {
  height: 13px;
  background-position: -4977px 0px;
}
.iti__flag.iti__th {
  height: 14px;
  background-position: -4999px 0px;
}
.iti__flag.iti__tj {
  height: 10px;
  background-position: -5021px 0px;
}
.iti__flag.iti__tk {
  height: 10px;
  background-position: -5043px 0px;
}
.iti__flag.iti__tl {
  height: 10px;
  background-position: -5065px 0px;
}
.iti__flag.iti__tm {
  height: 14px;
  background-position: -5087px 0px;
}
.iti__flag.iti__tn {
  height: 14px;
  background-position: -5109px 0px;
}
.iti__flag.iti__to {
  height: 10px;
  background-position: -5131px 0px;
}
.iti__flag.iti__tr {
  height: 14px;
  background-position: -5153px 0px;
}
.iti__flag.iti__tt {
  height: 12px;
  background-position: -5175px 0px;
}
.iti__flag.iti__tv {
  height: 10px;
  background-position: -5197px 0px;
}
.iti__flag.iti__tw {
  height: 14px;
  background-position: -5219px 0px;
}
.iti__flag.iti__tz {
  height: 14px;
  background-position: -5241px 0px;
}
.iti__flag.iti__ua {
  height: 14px;
  background-position: -5263px 0px;
}
.iti__flag.iti__ug {
  height: 14px;
  background-position: -5285px 0px;
}
.iti__flag.iti__uk {
  height: 10px;
  background-position: -5307px 0px;
}
.iti__flag.iti__um {
  height: 11px;
  background-position: -5329px 0px;
}
.iti__flag.iti__un {
  height: 14px;
  background-position: -5351px 0px;
}
.iti__flag.iti__us {
  height: 11px;
  background-position: -5373px 0px;
}
.iti__flag.iti__uy {
  height: 14px;
  background-position: -5395px 0px;
}
.iti__flag.iti__uz {
  height: 10px;
  background-position: -5417px 0px;
}
.iti__flag.iti__va {
  height: 15px;
  background-position: -5439px 0px;
}
.iti__flag.iti__vc {
  height: 14px;
  background-position: -5456px 0px;
}
.iti__flag.iti__ve {
  height: 14px;
  background-position: -5478px 0px;
}
.iti__flag.iti__vg {
  height: 10px;
  background-position: -5500px 0px;
}
.iti__flag.iti__vi {
  height: 14px;
  background-position: -5522px 0px;
}
.iti__flag.iti__vn {
  height: 14px;
  background-position: -5544px 0px;
}
.iti__flag.iti__vu {
  height: 12px;
  background-position: -5566px 0px;
}
.iti__flag.iti__wf {
  height: 14px;
  background-position: -5588px 0px;
}
.iti__flag.iti__ws {
  height: 10px;
  background-position: -5610px 0px;
}
.iti__flag.iti__xk {
  height: 15px;
  background-position: -5632px 0px;
}
.iti__flag.iti__ye {
  height: 14px;
  background-position: -5654px 0px;
}
.iti__flag.iti__yt {
  height: 14px;
  background-position: -5676px 0px;
}
.iti__flag.iti__za {
  height: 14px;
  background-position: -5698px 0px;
}
.iti__flag.iti__zm {
  height: 14px;
  background-position: -5720px 0px;
}
.iti__flag.iti__zw {
  height: 10px;
  background-position: -5742px 0px;
}
.iti__flag {
  height: 15px;
  box-shadow: 0px 0px 1px 0px #888;
  background-image: url("./media/flags.png?1");
  background-repeat: no-repeat;
  background-position: 20px 0;
}
@media (min-resolution: 2x) {
  .iti__flag {
    background-image: url("./media/flags@2x.png?1");
  }
}
.iti__globe {
  background-image: url("./media/globe.png");
  background-size: contain;
  background-position: right;
  box-shadow: none;
  height: 19px;
}
@media (min-resolution: 2x) {
  .iti__globe {
    background-image: url("./media/globe@2x.png");
  }
}

/* angular:styles/global:styles */
/*# sourceMappingURL=styles.css.map */