/* src/styles.scss */
:root {
  --primary-25: #F3F5FA;
  --primary-50: #E8ECF7;
  --primary-100: #D1D9EF;
  --primary-200: #A3B3DF;
  --primary-300: #758DCF;
  --primary-400: #4767BF;
  --primary-500: #1C398E;
  --primary-600: #152D73;
  --primary-700: #0F2158;
  --primary-800: #0A163D;
  --primary-900: #050B22;
  --primary-rgb:
    28,
    57,
    142;
  --success-50: #dcfce7;
  --success-100: #bbf7d0;
  --success-200: #86efac;
  --success-300: #4ade80;
  --success-400: #22c55e;
  --success-500: #16a34a;
  --success-600: #15803d;
  --success-700: #166534;
  --success-800: #14532d;
  --success-900: #164a2d;
  --error-50: #fee2e2;
  --error-100: #fecaca;
  --error-200: #fca5a5;
  --error-300: #f87171;
  --error-400: #ef4444;
  --error-500: #dc2626;
  --error-600: #b91c1c;
  --error-700: #991b1b;
  --error-800: #7f1d1d;
  --error-900: #691a1a;
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;
  --accent-color: #F59E0B;
  --success-color: #04b34f;
  --error-color: #a6192e;
  --error-50: #fee2e2;
  --warning-color: #F59E0B;
  --info-color: #0057b8;
  --background-color: #F9FAFB;
  --background-alt: #F3F4F6;
  --surface-color: #FFFFFF;
  --surface-hover: #F9FAFB;
  --surface-elevated: #FFFFFF;
  --white: #FFFFFF;
  --black: #000000;
  --text-primary: #111827;
  --text-secondary: #374151;
  --text-tertiary: #6B7280;
  --text-disabled: #9CA3AF;
  --text-on-primary: #FFFFFF;
  --text-on-dark: #FFFFFF;
  --border-color: #E5E7EB;
  --border-light: #F3F4F6;
  --border-dark: #D1D5DB;
  --input-border: #D1D5DB;
  --input-border-focus: #1C398E;
  --shadow-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  --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);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-primary: 0 4px 12px rgba(28, 57, 142, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --font-heading:
    "Outfit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-body:
    "Outfit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --font-mono:
    "Outfit",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;
  --text-xs: 12px;
  --text-sm: 14px;
  --text-base: 16px;
  --text-lg: 18px;
  --text-xl: 20px;
  --text-2xl: 24px;
  --text-3xl: 30px;
  --text-4xl: 36px;
  --text-5xl: 48px;
  --font-light: 300;
  --font-normal: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;
  --leading-none: 1;
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;
  --leading-loose: 2;
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 14px;
  --space-5: 16px;
  --space-6: 20px;
  --space-7: 24px;
  --space-8: 32px;
  --space-9: 40px;
  --space-10: 48px;
  --space-11: 64px;
  --space-12: 80px;
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-base: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-3xl: 32px;
  --radius-full: 9999px;
  --container-xs: 480px;
  --container-sm: 640px;
  --container-md: 768px;
  --container-lg: 1024px;
  --container-xl: 1280px;
  --container-2xl: 1536px;
  --container-width: 1200px;
  --z-dropdown: 1000;
  --z-sticky: 1020;
  --z-fixed: 1030;
  --z-modal-backdrop: 1040;
  --z-modal: 1050;
  --z-popover: 1060;
  --z-tooltip: 1070;
  --z-snackbar: 1080;
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;
  --transition-slower: 500ms ease;
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
}
.role-admin {
  --primary-25: #F0FDF4;
  --primary-50: #DCFCE7;
  --primary-100: #BBF7D0;
  --primary-200: #86EFAC;
  --primary-300: #4ADE80;
  --primary-400: #22C55E;
  --primary-500: #16A34A;
  --primary-600: #15803D;
  --primary-700: #166534;
  --primary-800: #14532D;
  --primary-900: #052E16;
  --primary-rgb:
    22,
    163,
    74;
  --input-border-focus: #16A34A;
  --shadow-primary: 0 4px 12px rgba(22, 163, 74, 0.25);
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: var(--font-body);
  background-color: var(--background-color);
  background-image:
    radial-gradient(
      circle,
      rgba(209, 213, 219, 0.4078431373) 1px,
      transparent 1px);
  background-size: 16px 14px;
  color: var(--text-main);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-heading);
  color: var(--text-main);
  line-height: 1.2;
  margin-bottom: 0.5em;
  font-weight: 600;
}
a {
  color: var(--primary-color);
  text-decoration: none;
  transition: color 0.2s ease;
}
a:hover {
  color: var(--primary-hover);
}
button {
  font-family: var(--font-body);
  cursor: pointer;
  border: none;
  background: none;
}
.page-container {
  display: flex;
  flex-direction: column;
  row-gap: 12px;
  min-height: 100%;
}
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.page-header .header-info .header-title {
  font-size: 24px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
  line-height: 1.2;
}
.page-header .header-info .header-description {
  color: var(--text-tertiary);
  margin: 6px 0 0;
  font-size: 15px;
}
.page-header .header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
}
.page-header .header-left {
  display: flex;
  gap: 12px;
  align-items: center;
  flex: 1;
}
.page-header .header-right {
  display: flex;
  gap: 12px;
  align-items: center;
}
@media (max-width: 1024px) {
  .page-container {
    height: auto;
    min-height: auto;
  }
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .page-header .header-actions {
    width: 100%;
  }
  .page-header .header-actions button {
    flex: 1;
  }
  .page-header .header-left,
  .page-header .header-right {
    width: 100%;
  }
  .page-header .header-left {
    flex-wrap: wrap;
  }
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  font-weight: 500;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  border-radius: 8px;
  text-decoration: none;
  outline: none;
}
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.6;
}
.btn hugeicons-icon {
  transition: transform 0.2s ease;
}
.btn-sm {
  padding: 4px 8px;
  font-size: 12px;
  gap: 6px;
}
.btn-sm hugeicons-icon {
  font-size: 14px;
}
.btn-md,
.btn-icon:not(.btn-sm):not(.btn-lg) {
  padding: 6px 16px;
  font-size: 14px;
  gap: 8px;
}
.btn-md hugeicons-icon,
.btn-icon:not(.btn-sm):not(.btn-lg) hugeicons-icon {
  font-size: 16px;
}
.btn-lg {
  padding: 16px 32px;
  font-size: 16px;
  gap: 10px;
}
.btn-lg hugeicons-icon {
  font-size: 22px;
}
.btn-primary {
  background: var(--primary-500);
  color: var(--white);
}
.btn-primary:hover:not(:disabled) {
  background: var(--primary-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}
.btn-primary-outline {
  background: transparent;
  border-color: var(--primary-500);
  color: var(--primary-500);
}
.btn-primary-outline:hover:not(:disabled) {
  background: var(--primary-lighter);
}
.btn-danger {
  background: var(--error-color);
  color: var(--white);
}
.btn-danger:hover:not(:disabled) {
  background: #B91C1C;
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-danger-outline {
  background: transparent;
  border-color: var(--error-color);
  color: var(--error-color);
}
.btn-danger-outline:hover:not(:disabled) {
  background: var(--error-50);
}
.btn-success {
  background: var(--success-color);
  color: var(--white);
}
.btn-success:hover:not(:disabled) {
  background: var(--success-700);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn-success-outline {
  background: transparent;
  border-color: var(--success-color);
  color: var(--success-color);
}
.btn-success-outline:hover:not(:disabled) {
  background: var(--success-50);
}
.btn-default {
  background: var(--white);
  color: var(--text-primary);
  border: 1px solid var(--border-dark);
}
.btn-default:hover:not(:disabled) {
  background: var(--background-alt);
  border-color: var(--text-tertiary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-default-outline,
.btn-outline {
  background: transparent;
  border-color: var(--border-color);
  color: var(--text-secondary);
}
.btn-default-outline:hover:not(:disabled),
.btn-outline:hover:not(:disabled) {
  background: var(--background-alt);
  border-color: var(--text-tertiary);
  color: var(--text-primary);
}
.btn-ghost {
  background: transparent;
  color: var(--text-secondary);
}
.btn-ghost:hover:not(:disabled) {
  background: var(--background-alt);
  color: var(--text-primary);
}
.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--text-tertiary);
  cursor: pointer;
  transition: all 0.2s ease;
}
.btn-icon:hover:not(:disabled) {
  background: var(--background-alt);
  color: var(--primary-500);
}
.btn-icon.delete:hover:not(:disabled) {
  background: var(--error-50, #fee2e2);
  color: var(--error-color);
}
.btn-icon.btn-sm {
  width: 30px;
  height: 30px;
}
.btn-icon.btn-sm hugeicons-icon {
  font-size: 16px;
}
.btn-icon.btn-md,
.btn-icon:not(.btn-sm):not(.btn-lg) {
  width: 38px;
  height: 38px;
}
.btn-icon.btn-md hugeicons-icon,
.btn-icon:not(.btn-sm):not(.btn-lg) hugeicons-icon {
  font-size: 20px;
}
.btn-icon.btn-lg {
  width: 46px;
  height: 46px;
}
.btn-icon.btn-lg hugeicons-icon {
  font-size: 24px;
}
.btn-icon:not(.btn-sm):not(.btn-lg) {
  width: 38px;
  height: 38px;
}
.card {
  background: var(--surface-color);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card.hoverable:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--primary-500);
}
.input-wrapper,
.input-wrapper-lg,
.input-wrapper-sm,
.search-input {
  display: flex;
  align-items: center;
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 10px 14px;
  transition: all 0.2s ease;
  width: 100%;
  min-height: 42px;
}
.input-wrapper:focus-within,
.input-wrapper-lg:focus-within,
.input-wrapper-sm:focus-within,
.search-input:focus-within {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.input-wrapper.error,
.error.input-wrapper-lg,
.error.input-wrapper-sm,
.error.search-input {
  border-color: var(--error-color);
}
.input-wrapper.error:focus-within,
.error.input-wrapper-lg:focus-within,
.error.input-wrapper-sm:focus-within,
.error.search-input:focus-within {
  box-shadow: 0 0 0 3px var(--error-50);
}
.input-wrapper.disabled,
.disabled.input-wrapper-lg,
.disabled.input-wrapper-sm,
.disabled.search-input {
  background: var(--background-alt);
  cursor: not-allowed;
  opacity: 0.6;
}
.input-wrapper .input-icon,
.input-wrapper-lg .input-icon,
.input-wrapper-sm .input-icon,
.search-input .input-icon {
  color: var(--text-tertiary);
  margin-right: 10px;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.input-wrapper input,
.input-wrapper-lg input,
.input-wrapper-sm input,
.search-input input,
.input-wrapper textarea,
.input-wrapper-lg textarea,
.input-wrapper-sm textarea,
.search-input textarea {
  border: none;
  outline: none;
  background: transparent;
  font-size: 14px;
  width: 100%;
  color: var(--text-primary);
  font-family: inherit;
}
.input-wrapper input::placeholder,
.input-wrapper-lg input::placeholder,
.input-wrapper-sm input::placeholder,
.search-input input::placeholder,
.input-wrapper textarea::placeholder,
.input-wrapper-lg textarea::placeholder,
.input-wrapper-sm textarea::placeholder,
.search-input textarea::placeholder {
  color: var(--text-tertiary);
}
.input-wrapper input:disabled,
.input-wrapper-lg input:disabled,
.input-wrapper-sm input:disabled,
.search-input input:disabled,
.input-wrapper textarea:disabled,
.input-wrapper-lg textarea:disabled,
.input-wrapper-sm textarea:disabled,
.search-input textarea:disabled {
  cursor: not-allowed;
}
.input-wrapper textarea,
.input-wrapper-lg textarea,
.input-wrapper-sm textarea,
.search-input textarea {
  resize: vertical;
  min-height: 80px;
}
.search-input {
  width: 280px;
}
.search-input .search-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  margin-right: 4px;
}
.input-wrapper-sm {
  padding: 6px 12px;
  border-radius: 6px;
}
.input-wrapper-sm input,
.input-wrapper-sm textarea {
  font-size: 13px;
}
.input-wrapper-sm .input-icon {
  margin-right: 8px;
}
.input-wrapper-lg {
  padding: 14px 18px;
  border-radius: 10px;
}
.input-wrapper-lg input,
.input-wrapper-lg textarea {
  font-size: 16px;
}
.input-wrapper-lg .input-icon {
  margin-right: 12px;
}
.form-input,
.form-input-lg,
.form-input-sm {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  background: var(--white);
  color: var(--text-primary);
  font-size: 14px;
  font-family: inherit;
  transition: all 0.2s ease;
  outline: none;
}
.form-input::placeholder,
.form-input-lg::placeholder,
.form-input-sm::placeholder {
  color: var(--text-tertiary);
}
.form-input:focus,
.form-input-lg:focus,
.form-input-sm:focus {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.form-input:disabled,
.form-input-lg:disabled,
.form-input-sm:disabled {
  background: var(--background-alt);
  cursor: not-allowed;
  opacity: 0.6;
}
.form-input.error,
.error.form-input-lg,
.error.form-input-sm {
  border-color: var(--error-color);
}
.form-input.error:focus,
.error.form-input-lg:focus,
.error.form-input-sm:focus {
  box-shadow: 0 0 0 3px var(--error-50);
}
.form-input-sm {
  padding: 6px 12px;
  font-size: 13px;
  border-radius: 6px;
}
.form-input-lg {
  padding: 14px 18px;
  font-size: 16px;
  border-radius: 10px;
}
.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  justify-content: space-between;
}
.date-filter {
  width: 200px;
}
@media (max-width: 1024px) {
  .header-actions {
    flex-wrap: wrap;
  }
  .search-input {
    width: 100%;
    flex: 1;
    min-width: 0;
  }
  .date-filter {
    width: auto;
    flex: 1;
    min-width: 150px;
  }
}
@media (max-width: 640px) {
  .header-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .header-actions .btn {
    width: 100%;
    justify-content: center;
  }
  .search-input {
    width: 100%;
  }
  .date-filter {
    width: 100%;
  }
}
.badge-outline {
  padding: 4px 12px;
  border-radius: var(--radius-full);
  border: 1px solid var(--primary-200);
  color: var(--primary-500);
  font-size: 12px;
  font-weight: 600;
  background: var(--primary-lighter);
}
.status-banner {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: capitalize;
  line-height: 1;
}
.status-banner.New,
.status-banner.new {
  background-color: #EFF6FF;
  color: #1D4ED8;
  border: 1px solid #BFDBFE;
}
.status-banner.Accepted,
.status-banner.accepted,
.status-banner.accept,
.status-banner.Accept {
  background-color: #F0FDF4;
  color: #15803D;
  border: 1px solid #BBF7D0;
}
.status-banner.Rejected,
.status-banner.rejected,
.status-banner.reject,
.status-banner.Reject {
  background-color: #FEF2F2;
  color: #B91C1C;
  border: 1px solid #FECACA;
}
.status-banner.In\ Progress,
.status-banner.in-progress,
.status-banner.In-Progress,
.status-banner.Processing,
.status-banner.processing {
  background-color: #FFF7ED;
  color: #C2410C;
  border: 1px solid #FED7AA;
}
.status-banner.Complete,
.status-banner.complete,
.status-banner.Completed,
.status-banner.completed {
  background-color: #F5F3FF;
  color: #6D28D9;
  border: 1px solid #DDD6FE;
}
.status-banner.info {
  background-color: var(--info-color);
  color: var(--white);
  border: none;
}
.status-banner.warning {
  background-color: var(--warning-color);
  color: var(--white);
  border: none;
}
.status-banner.error {
  background-color: var(--error-color);
  color: var(--white);
  border: none;
}
.status-banner.success,
.status-banner.settled {
  background-color: var(--success-color);
  color: var(--white);
  border: none;
}
.status-tag {
  display: inline-block;
  font-size: 13px;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: 10px;
}
.status-tag.new {
  background: var(--primary-50);
  color: var(--primary-600);
}
.status-tag.processing {
  background: var(--success-50);
  color: var(--success-600);
}
.status-tag.rejected {
  background: var(--error-50);
  color: var(--error-600);
}
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--background-alt);
  color: var(--text-secondary);
}
.status-badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
}
.status-badge.pending {
  background: var(--warning-color);
  color: var(--white);
}
.status-badge.accepted {
  background: var(--success-color);
  color: var(--white);
}
.status-badge.rejected {
  background: var(--error-color);
  color: var(--white);
}
.status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}
.status-dot.new {
  background: var(--primary-500);
}
.status-dot.processing {
  background: var(--success-color);
}
.status-dot.rejected {
  background: var(--error-color);
}
.status-dot.submission {
  background: var(--info-color);
}
.status-dot.offer {
  background: var(--warning-color);
}
.status-dot.close {
  background: var(--success-color);
}
.stage-badge {
  font-size: 10px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.stage-badge.submission {
  background: var(--primary-50);
  color: var(--primary-500);
}
.stage-badge.offer {
  background: var(--warning-100);
  color: var(--warning-700);
}
.stage-badge.close {
  background: var(--success-50);
  color: var(--success-600);
}
.app-form {
  padding: 8px 0;
}
.form-grid {
  display: grid;
  row-gap: 12px;
  column-gap: 24px;
  grid-template-columns: repeat(2, 1fr);
}
.form-grid.cols-1 {
  grid-template-columns: 1fr;
}
.form-grid.cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.form-grid.cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.form-grid.cols-4 {
  grid-template-columns: repeat(4, 1fr);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-group.full-width {
  grid-column: span 2;
}
.form-group label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}
.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 10px 12px;
  min-height: 44px;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  background: var(--white);
  font-family: "Outfit", sans-serif;
  font-size: 14px;
  color: var(--text-primary);
  transition: all 0.2s ease;
}
.form-group input::placeholder,
.form-group select::placeholder,
.form-group textarea::placeholder {
  color: var(--text-disabled);
}
.form-group input:hover,
.form-group select:hover,
.form-group textarea:hover {
  border-color: var(--primary-400);
}
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px var(--primary-50);
}
.form-group input:disabled,
.form-group select:disabled,
.form-group textarea:disabled {
  background: var(--background-alt);
  cursor: not-allowed;
}
.form-group textarea {
  resize: vertical;
  min-height: 120px;
}
.form-group.has-icon hugeicons-icon {
  position: absolute;
  left: 12px;
  font-size: 18px;
  color: var(--text-tertiary);
  pointer-events: none;
}
.form-group.has-icon input,
.form-group.has-icon select,
.form-group.has-icon textarea {
  padding-left: 40px;
}
.form-group .error-msg {
  font-size: 12px;
  color: var(--error-color);
  font-weight: 500;
  margin-top: 2px;
}
.form-actions {
  display: flex;
  gap: 24px;
  width: 100%;
  justify-content: flex-end;
  margin-top: 24px;
}
.form-actions.align-left {
  justify-content: flex-start;
}
.form-actions.align-center {
  justify-content: center;
}
.form-actions.align-right {
  justify-content: flex-end;
}
.board-container {
  display: grid;
  gap: 24px;
  overflow: hidden;
  height: 100%;
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1024px) {
  .board-container {
    grid-template-columns: 1fr;
    overflow: auto;
    height: auto;
    gap: 16px;
  }
}
.board-column {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  min-height: 0;
  transition: all 0.3s ease;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.column-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  padding: 12px 24px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: none;
  background: var(--white);
  position: relative;
}
@media (max-width: 1024px) {
  .column-title {
    padding: 12px 16px;
    font-size: 14px;
  }
}
.column-title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5px;
  background: var(--primary-500);
  border-radius: 0 4px 4px 0;
}
.column-title.new::before {
  background: var(--primary-500);
}
.column-title.processing::before {
  background: var(--success-color);
}
.column-title.rejected::before {
  background: var(--error-color);
}
.column-title.submission::before {
  background: var(--primary-500);
}
.column-title.offer::before {
  background: #F59E0B;
}
.column-title.close::before {
  background: var(--success-color);
}
.column-content {
  padding: 16px;
  overflow-y: auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: #FAFBFC;
}
.column-content::-webkit-scrollbar {
  width: 6px;
}
.column-content::-webkit-scrollbar-track {
  background: transparent;
}
.column-content::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
  border-radius: 10px;
}
.column-content::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.15);
}
@media (max-width: 1024px) {
  .column-content {
    padding: 12px;
    max-height: 400px;
  }
}
.board-card {
  background: var(--white);
  padding: 18px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-color);
  transition: all 0.2s ease;
  cursor: pointer;
  display: flex;
  gap: 14px;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
@media (max-width: 1024px) {
  .board-card {
    padding: 14px;
    gap: 10px;
  }
}
.board-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: var(--primary-200);
}
.board-card:active {
  transform: translateY(0);
}
.board-card .card-header {
  display: flex;
  justify-content: space-between;
  flex-direction: column;
  align-items: flex-start;
}
.board-card .card-header .card-tag {
  font-size: 10px;
  font-weight: 700;
  color: var(--primary-color);
  text-transform: uppercase;
}
.board-card .card-header .card-id {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  text-transform: uppercase;
  background: var(--white);
  border: 1px solid var(--border-color);
  padding: 2px 6px;
  border-radius: 4px;
}
.board-card .card-header .card-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  text-transform: capitalize;
}
.board-card .card-details {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 8px;
}
.board-card .card-details .detail {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-secondary);
}
.board-card .card-details .detail hugeicons-icon {
  font-size: 16px;
  color: var(--text-tertiary);
}
.board-card .card-details .progress-section .progress-header {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 6px;
}
.board-card .card-details .progress-section .progress-bar {
  height: 6px;
  background: var(--primary-50);
  border-radius: 10px;
  overflow: hidden;
}
.board-card .card-details .progress-section .progress-bar .progress-fill {
  height: 100%;
  background: var(--primary-500);
  border-radius: 10px;
}
.board-card .case-btn-action {
  font-weight: 600;
  font-size: 12px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border: 1px solid var(--border-color);
  padding: 8px 16px;
  border-radius: var(--radius-md);
  background: var(--white);
}
.board-card .case-btn-action hugeicons-icon {
  font-size: 16px;
  color: var(--text-tertiary);
}
.board-card .case-btn-action:hover {
  background: var(--primary-50);
  color: var(--primary-color);
}
.board-card .case-btn-action:hover hugeicons-icon {
  color: var(--primary-color);
}
.details-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 20px;
  padding-right: 0;
  min-width: 0;
}
.details-grid .main-content {
  min-width: 0;
}
.content-card {
  background: var(--white);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 14px;
  margin-bottom: 16px;
}
.content-card:last-child {
  margin-bottom: 0;
}
.content-card .card-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-color);
}
.content-card .card-title-row .info-icon {
  color: var(--primary-color);
  background: var(--primary-50);
  padding: 8px;
  border-radius: 10px;
}
.content-card .card-title-row .header-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0;
}
.info-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}
.info-grid .info-item label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
}
.info-grid .info-item .value {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}
.doc-list {
  display: flex;
  flex-direction: column;
}
.doc-list .doc-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0px;
  background: var(--white);
  border-bottom: 1px solid var(--border-color);
  transition: all 0.2s;
}
.doc-list .doc-item:last-child {
  border-bottom: none;
}
.doc-list .doc-item .doc-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.doc-list .doc-item .doc-info .file-icon {
  font-size: 32px;
  color: var(--primary-500);
}
.doc-list .doc-item .doc-info .doc-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
}
.doc-list .doc-item .doc-info .doc-meta {
  font-size: 11px;
  color: var(--text-tertiary);
}
.doc-list .doc-item .doc-action-btn {
  background: var(--white);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--text-secondary);
  transition: all 0.2s;
}
.doc-list .doc-item .doc-action-btn:hover {
  background: var(--primary-50);
  color: var(--primary-500);
  border-color: var(--primary-500);
}
.doc-list .doc-item .doc-action-btn hugeicons-icon {
  font-size: 18px;
}
.metric-card {
  background: var(--background-alt);
  padding: 16px;
  border-radius: 8px;
  text-align: left;
  border: 1px solid var(--border-color);
}
.metric-card label {
  display: block;
  font-size: 12px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.metric-card .amount {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}
.metric-card .amount.highlight {
  color: var(--primary-600);
}
.action-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.action-section .input-group label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  margin-bottom: 8px;
}
.action-section .input-group .form-control {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border-color);
  border-radius: 6px;
  font-size: 14px;
  color: var(--text-primary);
  resize: vertical;
  min-height: 80px;
}
.action-section .input-group .form-control:focus {
  outline: none;
  border-color: var(--primary-500);
  box-shadow: 0 0 0 3px var(--primary-100);
}
.action-section .action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}
.action-section .action-buttons .btn {
  min-width: 120px;
}
.action-section .action-buttons .btn-danger-outline {
  background: transparent;
  border: 1px solid var(--error-color);
  color: var(--error-color);
}
.action-section .action-buttons .btn-danger-outline:hover {
  background: var(--error-50);
}
.form-section-wrapper {
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 30px;
}
.form-section-wrapper .form-section-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.form-section-wrapper .form-section-title .section-description {
  font-size: 13px;
  font-weight: 400;
  color: var(--text-tertiary);
}
.form-section-wrapper .form-section-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
@media (max-width: 1024px) {
  .details-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-right: 0;
  }
  .form-section-wrapper {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}
@media (max-width: 640px) {
  .info-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .content-card {
    padding: 14px;
    margin-bottom: 16px;
  }
}
.tabs-container {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.tab-pill {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 32px;
  border: none;
  border-radius: 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  background: var(--background-alt);
  color: var(--text-secondary);
  white-space: nowrap;
  flex: 1;
  min-width: 200px;
}
.tab-pill:hover {
  opacity: 0.9;
}
.tab-pill .tab-pill-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 8px;
  background: var(--success-500);
  color: var(--white);
  border-radius: 8px;
  font-size: 14px;
  font-weight: 700;
  transition: all 0.2s ease;
}
.tab-pill.tab-new,
.tab-pill.tab-green,
.tab-pill.tab-primary {
  background: rgba(var(--primary-rgb, 34, 197, 94), 0.15);
  color: var(--primary-700);
  border: 1px solid var(--primary-500);
}
.tab-pill.tab-new:hover,
.tab-pill.tab-green:hover,
.tab-pill.tab-primary:hover {
  background: rgba(var(--primary-rgb, 34, 197, 94), 0.2);
}
.tab-pill.tab-new .tab-pill-count,
.tab-pill.tab-green .tab-pill-count,
.tab-pill.tab-primary .tab-pill-count {
  background: var(--primary-500);
  color: var(--white);
}
.tab-pill.tab-processing,
.tab-pill.tab-white {
  background: var(--white);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.tab-pill.tab-processing:hover,
.tab-pill.tab-white:hover {
  background: var(--background-alt);
}
.tab-pill.tab-processing .tab-pill-count,
.tab-pill.tab-white .tab-pill-count {
  background: var(--primary-500);
  color: var(--white);
}
.tab-pill.tab-rejected,
.tab-pill.tab-red {
  background: rgba(239, 68, 68, 0.15);
  color: #991b1b;
}
.tab-pill.tab-rejected:hover,
.tab-pill.tab-red:hover {
  background: rgba(239, 68, 68, 0.2);
}
.tab-pill.tab-rejected .tab-pill-count,
.tab-pill.tab-red .tab-pill-count {
  background: var(--error-color);
  color: var(--white);
}
.tab-pill.tab-blue {
  background: rgba(59, 130, 246, 0.15);
  color: #1e40af;
}
.tab-pill.tab-blue:hover {
  background: rgba(59, 130, 246, 0.2);
}
.tab-pill.tab-blue .tab-pill-count {
  background: var(--primary-500);
  color: var(--white);
}
.tab-pill.tab-warning,
.tab-pill.tab-yellow {
  background: rgba(245, 158, 11, 0.15);
  color: #92400e;
}
.tab-pill.tab-warning:hover,
.tab-pill.tab-yellow:hover {
  background: rgba(245, 158, 11, 0.2);
}
.tab-pill.tab-warning .tab-pill-count,
.tab-pill.tab-yellow .tab-pill-count {
  background: var(--warning-500);
  color: var(--white);
}
.tab-pill.tab-purple {
  background: rgba(168, 85, 247, 0.15);
  color: #6b21a8;
}
.tab-pill.tab-purple:hover {
  background: rgba(168, 85, 247, 0.2);
}
.tab-pill.tab-purple .tab-pill-count {
  background: #a855f7;
  color: var(--white);
}
.tab-pill.tab-add {
  background: var(--background-alt);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  gap: 8px;
}
.tab-pill.tab-add:hover {
  background: var(--primary-50);
  color: var(--primary-700);
  border-color: var(--primary-300);
}
.tab-pill.tab-inactive {
  background: var(--background-alt);
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
}
.tab-pill.tab-inactive:hover {
  background: var(--white);
  color: var(--text-primary);
}
.tab-pill.tab-inactive .tab-pill-count {
  background: var(--text-tertiary);
  color: var(--white);
}
.tab-pill:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.tab-pill:disabled:hover {
  opacity: 0.5;
}
@media (max-width: 768px) {
  .tabs-container {
    gap: 8px;
  }
  .tab-pill {
    padding: 12px 20px;
    font-size: 14px;
    min-width: 150px;
  }
  .tab-pill .tab-pill-count {
    min-width: 24px;
    height: 24px;
    font-size: 12px;
  }
}
.m-0 {
  margin: 0px;
}
.mx-0 {
  margin-left: 0px;
  margin-right: 0px;
}
.my-0 {
  margin-top: 0px;
  margin-bottom: 0px;
}
.mt-0 {
  margin-top: 0px;
}
.mr-0 {
  margin-right: 0px;
}
.mb-0 {
  margin-bottom: 0px;
}
.ml-0 {
  margin-left: 0px;
}
.m-2 {
  margin: 2px;
}
.mx-2 {
  margin-left: 2px;
  margin-right: 2px;
}
.my-2 {
  margin-top: 2px;
  margin-bottom: 2px;
}
.mt-2 {
  margin-top: 2px;
}
.mr-2 {
  margin-right: 2px;
}
.mb-2 {
  margin-bottom: 2px;
}
.ml-2 {
  margin-left: 2px;
}
.m-4 {
  margin: 4px;
}
.mx-4 {
  margin-left: 4px;
  margin-right: 4px;
}
.my-4 {
  margin-top: 4px;
  margin-bottom: 4px;
}
.mt-4 {
  margin-top: 4px;
}
.mr-4 {
  margin-right: 4px;
}
.mb-4 {
  margin-bottom: 4px;
}
.ml-4 {
  margin-left: 4px;
}
.m-6 {
  margin: 6px;
}
.mx-6 {
  margin-left: 6px;
  margin-right: 6px;
}
.my-6 {
  margin-top: 6px;
  margin-bottom: 6px;
}
.mt-6 {
  margin-top: 6px;
}
.mr-6 {
  margin-right: 6px;
}
.mb-6 {
  margin-bottom: 6px;
}
.ml-6 {
  margin-left: 6px;
}
.m-8 {
  margin: 8px;
}
.mx-8 {
  margin-left: 8px;
  margin-right: 8px;
}
.my-8 {
  margin-top: 8px;
  margin-bottom: 8px;
}
.mt-8 {
  margin-top: 8px;
}
.mr-8 {
  margin-right: 8px;
}
.mb-8 {
  margin-bottom: 8px;
}
.ml-8 {
  margin-left: 8px;
}
.m-10 {
  margin: 10px;
}
.mx-10 {
  margin-left: 10px;
  margin-right: 10px;
}
.my-10 {
  margin-top: 10px;
  margin-bottom: 10px;
}
.mt-10 {
  margin-top: 10px;
}
.mr-10 {
  margin-right: 10px;
}
.mb-10 {
  margin-bottom: 10px;
}
.ml-10 {
  margin-left: 10px;
}
.m-12 {
  margin: 12px;
}
.mx-12 {
  margin-left: 12px;
  margin-right: 12px;
}
.my-12 {
  margin-top: 12px;
  margin-bottom: 12px;
}
.mt-12 {
  margin-top: 12px;
}
.mr-12 {
  margin-right: 12px;
}
.mb-12 {
  margin-bottom: 12px;
}
.ml-12 {
  margin-left: 12px;
}
.m-16 {
  margin: 16px;
}
.mx-16 {
  margin-left: 16px;
  margin-right: 16px;
}
.my-16 {
  margin-top: 16px;
  margin-bottom: 16px;
}
.mt-16 {
  margin-top: 16px;
}
.mr-16 {
  margin-right: 16px;
}
.mb-16 {
  margin-bottom: 16px;
}
.ml-16 {
  margin-left: 16px;
}
.m-20 {
  margin: 20px;
}
.mx-20 {
  margin-left: 20px;
  margin-right: 20px;
}
.my-20 {
  margin-top: 20px;
  margin-bottom: 20px;
}
.mt-20 {
  margin-top: 20px;
}
.mr-20 {
  margin-right: 20px;
}
.mb-20 {
  margin-bottom: 20px;
}
.ml-20 {
  margin-left: 20px;
}
.m-24 {
  margin: 24px;
}
.mx-24 {
  margin-left: 24px;
  margin-right: 24px;
}
.my-24 {
  margin-top: 24px;
  margin-bottom: 24px;
}
.mt-24 {
  margin-top: 24px;
}
.mr-24 {
  margin-right: 24px;
}
.mb-24 {
  margin-bottom: 24px;
}
.ml-24 {
  margin-left: 24px;
}
.m-32 {
  margin: 32px;
}
.mx-32 {
  margin-left: 32px;
  margin-right: 32px;
}
.my-32 {
  margin-top: 32px;
  margin-bottom: 32px;
}
.mt-32 {
  margin-top: 32px;
}
.mr-32 {
  margin-right: 32px;
}
.mb-32 {
  margin-bottom: 32px;
}
.ml-32 {
  margin-left: 32px;
}
.m-40 {
  margin: 40px;
}
.mx-40 {
  margin-left: 40px;
  margin-right: 40px;
}
.my-40 {
  margin-top: 40px;
  margin-bottom: 40px;
}
.mt-40 {
  margin-top: 40px;
}
.mr-40 {
  margin-right: 40px;
}
.mb-40 {
  margin-bottom: 40px;
}
.ml-40 {
  margin-left: 40px;
}
.m-48 {
  margin: 48px;
}
.mx-48 {
  margin-left: 48px;
  margin-right: 48px;
}
.my-48 {
  margin-top: 48px;
  margin-bottom: 48px;
}
.mt-48 {
  margin-top: 48px;
}
.mr-48 {
  margin-right: 48px;
}
.mb-48 {
  margin-bottom: 48px;
}
.ml-48 {
  margin-left: 48px;
}
.p-0 {
  padding: 0px;
}
.px-0 {
  padding-left: 0px;
  padding-right: 0px;
}
.py-0 {
  padding-top: 0px;
  padding-bottom: 0px;
}
.pt-0 {
  padding-top: 0px;
}
.pr-0 {
  padding-right: 0px;
}
.pb-0 {
  padding-bottom: 0px;
}
.pl-0 {
  padding-left: 0px;
}
.p-2 {
  padding: 2px;
}
.px-2 {
  padding-left: 2px;
  padding-right: 2px;
}
.py-2 {
  padding-top: 2px;
  padding-bottom: 2px;
}
.pt-2 {
  padding-top: 2px;
}
.pr-2 {
  padding-right: 2px;
}
.pb-2 {
  padding-bottom: 2px;
}
.pl-2 {
  padding-left: 2px;
}
.p-4 {
  padding: 4px;
}
.px-4 {
  padding-left: 4px;
  padding-right: 4px;
}
.py-4 {
  padding-top: 4px;
  padding-bottom: 4px;
}
.pt-4 {
  padding-top: 4px;
}
.pr-4 {
  padding-right: 4px;
}
.pb-4 {
  padding-bottom: 4px;
}
.pl-4 {
  padding-left: 4px;
}
.p-6 {
  padding: 6px;
}
.px-6 {
  padding-left: 6px;
  padding-right: 6px;
}
.py-6 {
  padding-top: 6px;
  padding-bottom: 6px;
}
.pt-6 {
  padding-top: 6px;
}
.pr-6 {
  padding-right: 6px;
}
.pb-6 {
  padding-bottom: 6px;
}
.pl-6 {
  padding-left: 6px;
}
.p-8 {
  padding: 8px;
}
.px-8 {
  padding-left: 8px;
  padding-right: 8px;
}
.py-8 {
  padding-top: 8px;
  padding-bottom: 8px;
}
.pt-8 {
  padding-top: 8px;
}
.pr-8 {
  padding-right: 8px;
}
.pb-8 {
  padding-bottom: 8px;
}
.pl-8 {
  padding-left: 8px;
}
.p-10 {
  padding: 10px;
}
.px-10 {
  padding-left: 10px;
  padding-right: 10px;
}
.py-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}
.pt-10 {
  padding-top: 10px;
}
.pr-10 {
  padding-right: 10px;
}
.pb-10 {
  padding-bottom: 10px;
}
.pl-10 {
  padding-left: 10px;
}
.p-12 {
  padding: 12px;
}
.px-12 {
  padding-left: 12px;
  padding-right: 12px;
}
.py-12 {
  padding-top: 12px;
  padding-bottom: 12px;
}
.pt-12 {
  padding-top: 12px;
}
.pr-12 {
  padding-right: 12px;
}
.pb-12 {
  padding-bottom: 12px;
}
.pl-12 {
  padding-left: 12px;
}
.p-16 {
  padding: 16px;
}
.px-16 {
  padding-left: 16px;
  padding-right: 16px;
}
.py-16 {
  padding-top: 16px;
  padding-bottom: 16px;
}
.pt-16 {
  padding-top: 16px;
}
.pr-16 {
  padding-right: 16px;
}
.pb-16 {
  padding-bottom: 16px;
}
.pl-16 {
  padding-left: 16px;
}
.p-20 {
  padding: 20px;
}
.px-20 {
  padding-left: 20px;
  padding-right: 20px;
}
.py-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}
.pt-20 {
  padding-top: 20px;
}
.pr-20 {
  padding-right: 20px;
}
.pb-20 {
  padding-bottom: 20px;
}
.pl-20 {
  padding-left: 20px;
}
.p-24 {
  padding: 24px;
}
.px-24 {
  padding-left: 24px;
  padding-right: 24px;
}
.py-24 {
  padding-top: 24px;
  padding-bottom: 24px;
}
.pt-24 {
  padding-top: 24px;
}
.pr-24 {
  padding-right: 24px;
}
.pb-24 {
  padding-bottom: 24px;
}
.pl-24 {
  padding-left: 24px;
}
.p-32 {
  padding: 32px;
}
.px-32 {
  padding-left: 32px;
  padding-right: 32px;
}
.py-32 {
  padding-top: 32px;
  padding-bottom: 32px;
}
.pt-32 {
  padding-top: 32px;
}
.pr-32 {
  padding-right: 32px;
}
.pb-32 {
  padding-bottom: 32px;
}
.pl-32 {
  padding-left: 32px;
}
.p-40 {
  padding: 40px;
}
.px-40 {
  padding-left: 40px;
  padding-right: 40px;
}
.py-40 {
  padding-top: 40px;
  padding-bottom: 40px;
}
.pt-40 {
  padding-top: 40px;
}
.pr-40 {
  padding-right: 40px;
}
.pb-40 {
  padding-bottom: 40px;
}
.pl-40 {
  padding-left: 40px;
}
.p-48 {
  padding: 48px;
}
.px-48 {
  padding-left: 48px;
  padding-right: 48px;
}
.py-48 {
  padding-top: 48px;
  padding-bottom: 48px;
}
.pt-48 {
  padding-top: 48px;
}
.pr-48 {
  padding-right: 48px;
}
.pb-48 {
  padding-bottom: 48px;
}
.pl-48 {
  padding-left: 48px;
}
.gap-0 {
  gap: 0px;
}
.row-gap-0 {
  row-gap: 0px;
}
.col-gap-0 {
  column-gap: 0px;
}
.gap-2 {
  gap: 2px;
}
.row-gap-2 {
  row-gap: 2px;
}
.col-gap-2 {
  column-gap: 2px;
}
.gap-4 {
  gap: 4px;
}
.row-gap-4 {
  row-gap: 4px;
}
.col-gap-4 {
  column-gap: 4px;
}
.gap-6 {
  gap: 6px;
}
.row-gap-6 {
  row-gap: 6px;
}
.col-gap-6 {
  column-gap: 6px;
}
.gap-8 {
  gap: 8px;
}
.row-gap-8 {
  row-gap: 8px;
}
.col-gap-8 {
  column-gap: 8px;
}
.gap-10 {
  gap: 10px;
}
.row-gap-10 {
  row-gap: 10px;
}
.col-gap-10 {
  column-gap: 10px;
}
.gap-12 {
  gap: 12px;
}
.row-gap-12 {
  row-gap: 12px;
}
.col-gap-12 {
  column-gap: 12px;
}
.gap-16 {
  gap: 16px;
}
.row-gap-16 {
  row-gap: 16px;
}
.col-gap-16 {
  column-gap: 16px;
}
.gap-20 {
  gap: 20px;
}
.row-gap-20 {
  row-gap: 20px;
}
.col-gap-20 {
  column-gap: 20px;
}
.gap-24 {
  gap: 24px;
}
.row-gap-24 {
  row-gap: 24px;
}
.col-gap-24 {
  column-gap: 24px;
}
.gap-32 {
  gap: 32px;
}
.row-gap-32 {
  row-gap: 32px;
}
.col-gap-32 {
  column-gap: 32px;
}
.gap-40 {
  gap: 40px;
}
.row-gap-40 {
  row-gap: 40px;
}
.col-gap-40 {
  column-gap: 40px;
}
.gap-48 {
  gap: 48px;
}
.row-gap-48 {
  row-gap: 48px;
}
.col-gap-48 {
  column-gap: 48px;
}
.mx-auto {
  margin-left: auto;
  margin-right: auto;
}
.ml-auto {
  margin-left: auto;
}
.mr-auto {
  margin-right: auto;
}
hugeicons-icon svg path {
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

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