@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap";
@import "https://fonts.googleapis.com/icon?family=Material+Icons";

/* node_modules/@angular/material/prebuilt-themes/azure-blue.css */
html {
  --mat-sys-background: #faf9fd;
  --mat-sys-error: #ba1a1a;
  --mat-sys-error-container: #ffdad6;
  --mat-sys-inverse-on-surface: #f2f0f4;
  --mat-sys-inverse-primary: #abc7ff;
  --mat-sys-inverse-surface: #2f3033;
  --mat-sys-on-background: #1a1b1f;
  --mat-sys-on-error: #ffffff;
  --mat-sys-on-error-container: #93000a;
  --mat-sys-on-primary: #ffffff;
  --mat-sys-on-primary-container: #00458f;
  --mat-sys-on-primary-fixed: #001b3f;
  --mat-sys-on-primary-fixed-variant: #00458f;
  --mat-sys-on-secondary: #ffffff;
  --mat-sys-on-secondary-container: #3e4759;
  --mat-sys-on-secondary-fixed: #131c2b;
  --mat-sys-on-secondary-fixed-variant: #3e4759;
  --mat-sys-on-surface: #1a1b1f;
  --mat-sys-on-surface-variant: #44474e;
  --mat-sys-on-tertiary: #ffffff;
  --mat-sys-on-tertiary-container: #0000ef;
  --mat-sys-on-tertiary-fixed: #00006e;
  --mat-sys-on-tertiary-fixed-variant: #0000ef;
  --mat-sys-outline: #74777f;
  --mat-sys-outline-variant: #c4c6d0;
  --mat-sys-primary: #005cbb;
  --mat-sys-primary-container: #d7e3ff;
  --mat-sys-primary-fixed: #d7e3ff;
  --mat-sys-primary-fixed-dim: #abc7ff;
  --mat-sys-scrim: #000000;
  --mat-sys-secondary: #565e71;
  --mat-sys-secondary-container: #dae2f9;
  --mat-sys-secondary-fixed: #dae2f9;
  --mat-sys-secondary-fixed-dim: #bec6dc;
  --mat-sys-shadow: #000000;
  --mat-sys-surface: #faf9fd;
  --mat-sys-surface-bright: #faf9fd;
  --mat-sys-surface-container: #efedf0;
  --mat-sys-surface-container-high: #e9e7eb;
  --mat-sys-surface-container-highest: #e3e2e6;
  --mat-sys-surface-container-low: #f4f3f6;
  --mat-sys-surface-container-lowest: #ffffff;
  --mat-sys-surface-dim: #dbd9dd;
  --mat-sys-surface-tint: #005cbb;
  --mat-sys-surface-variant: #e0e2ec;
  --mat-sys-tertiary: #343dff;
  --mat-sys-tertiary-container: #e0e0ff;
  --mat-sys-tertiary-fixed: #e0e0ff;
  --mat-sys-tertiary-fixed-dim: #bec2ff;
  --mat-sys-neutral-variant20: #2d3038;
  --mat-sys-neutral10: #1a1b1f;
}
html {
  --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);
}
html {
  --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);
}
html {
  --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);
}
html {
  --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);
}
html {
  --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);
}
html {
  --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);
}
html {
  --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;
}
html {
  --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;
}
html {
  --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;
}

/* node_modules/swiper/swiper-bundle.css */
:root {
  --swiper-theme-color: #007aff;
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: "";
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image:
      linear-gradient(
        to left,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image:
      linear-gradient(
        to right,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image:
      linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image:
      linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.5),
        rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.swiper-virtual .swiper-slide {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
}
.swiper-virtual.swiper-css-mode {
  .swiper-wrapper::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    pointer-events: none;
  }
}
.swiper-virtual.swiper-css-mode.swiper-horizontal {
  .swiper-wrapper::after {
    height: 1px;
    width: var(--swiper-virtual-size);
  }
}
.swiper-virtual.swiper-css-mode.swiper-vertical {
  .swiper-wrapper::after {
    width: 1px;
    height: var(--swiper-virtual-size);
  }
}
:root {
  --swiper-navigation-size: 44px;
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;
  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}
.swiper-button-lock {
  display: none;
}
.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}
:root {
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }
  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}
.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition: 200ms transform, 200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition: 200ms transform, 200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition: 200ms transform, 200ms right;
}
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}
:root {
}
.swiper-scrollbar {
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  position: relative;
  touch-action: none;
  background: var(--swiper-scrollbar-bg-color, rgba(0, 0, 0, 0.1));
  .swiper-scrollbar-disabled > &,
  &.swiper-scrollbar-disabled {
    display: none !important;
  }
  .swiper-horizontal > &,
  &.swiper-scrollbar-horizontal {
    position: absolute;
    left: var(--swiper-scrollbar-sides-offset, 1%);
    bottom: var(--swiper-scrollbar-bottom, 4px);
    top: var(--swiper-scrollbar-top, auto);
    z-index: 50;
    height: var(--swiper-scrollbar-size, 4px);
    width: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
  .swiper-vertical > &,
  &.swiper-scrollbar-vertical {
    position: absolute;
    left: var(--swiper-scrollbar-left, auto);
    right: var(--swiper-scrollbar-right, 4px);
    top: var(--swiper-scrollbar-sides-offset, 1%);
    z-index: 50;
    width: var(--swiper-scrollbar-size, 4px);
    height: calc(100% - 2 * var(--swiper-scrollbar-sides-offset, 1%));
  }
}
.swiper-scrollbar-drag {
  height: 100%;
  width: 100%;
  position: relative;
  background: var(--swiper-scrollbar-drag-bg-color, rgba(0, 0, 0, 0.5));
  border-radius: var(--swiper-scrollbar-border-radius, 10px);
  left: 0;
  top: 0;
}
.swiper-scrollbar-cursor-drag {
  cursor: move;
}
.swiper-scrollbar-lock {
  display: none;
}
.swiper-zoom-container {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  > img,
  > svg,
  > canvas {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}
.swiper-slide-zoomed {
  cursor: move;
  touch-action: none;
}
.swiper .swiper-notification {
  position: absolute;
  left: 0;
  top: 0;
  pointer-events: none;
  opacity: 0;
  z-index: -1000;
}
.swiper-thumbs {
  .swiper-slide-thumb-active {
  }
}
.swiper-free-mode > .swiper-wrapper {
  transition-timing-function: ease-out;
  margin: 0 auto;
}
.swiper-grid > .swiper-wrapper {
  flex-wrap: wrap;
}
.swiper-grid-column > .swiper-wrapper {
  flex-wrap: wrap;
  flex-direction: column;
}
.swiper-fade {
  &.swiper-free-mode {
    .swiper-slide {
      transition-timing-function: ease-out;
    }
  }
  .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    pointer-events: auto;
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}
.swiper.swiper-cube {
  overflow: visible;
}
.swiper-cube {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    visibility: hidden;
    transform-origin: 0 0;
    width: 100%;
    height: 100%;
    .swiper-slide {
      pointer-events: none;
    }
  }
  &.swiper-rtl .swiper-slide {
    transform-origin: 100% 0;
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
  .swiper-slide-active,
  .swiper-slide-next,
  .swiper-slide-prev {
    pointer-events: auto;
    visibility: visible;
  }
  .swiper-cube-shadow {
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    height: 100%;
    opacity: 0.6;
    z-index: 0;
    &:before {
      content: "";
      background: #000;
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      right: 0;
      filter: blur(50px);
    }
  }
}
.swiper-cube {
  .swiper-slide-next + .swiper-slide {
    pointer-events: auto;
    visibility: visible;
  }
}
.swiper-cube {
  .swiper-slide-shadow-cube.swiper-slide-shadow-top,
  .swiper-slide-shadow-cube.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-cube.swiper-slide-shadow-left,
  .swiper-slide-shadow-cube.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}
.swiper.swiper-flip {
  overflow: visible;
}
.swiper-flip {
  .swiper-slide {
    pointer-events: none;
    backface-visibility: hidden;
    z-index: 1;
    .swiper-slide {
      pointer-events: none;
    }
  }
  .swiper-slide-active {
    &,
    & .swiper-slide-active {
      pointer-events: auto;
    }
  }
}
.swiper-flip {
  .swiper-slide-shadow-flip.swiper-slide-shadow-top,
  .swiper-slide-shadow-flip.swiper-slide-shadow-bottom,
  .swiper-slide-shadow-flip.swiper-slide-shadow-left,
  .swiper-slide-shadow-flip.swiper-slide-shadow-right {
    z-index: 0;
    backface-visibility: hidden;
  }
}
.swiper-coverflow {
}
.swiper-creative {
  .swiper-slide {
    backface-visibility: hidden;
    overflow: hidden;
    transition-property:
      transform,
      opacity,
      height;
  }
}
.swiper.swiper-cards {
  overflow: visible;
}
.swiper-cards {
  .swiper-slide {
    transform-origin: center bottom;
    backface-visibility: hidden;
    overflow: hidden;
  }
}

/* src/styles.scss */
.primary-button {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%);
  border: 1px solid transparent;
  border-radius: 6px;
  color: #ffffff;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 19.5px;
  padding: 12px 29px;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
  width: 100%;
  min-width: max-content !important;
}
.primary-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
}
.outline-button {
  border: 1px solid transparent;
  border-radius: 6px;
  color: #80298F;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 19.5px;
  padding: 12px 16.78px;
  text-align: center;
  transition: all 0.3s ease;
  min-height: 44px;
  min-width: max-content !important;
  white-space: nowrap;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(
      45deg,
      #354491,
      #7C338C);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.outline-button:hover {
  background: transparent !important;
}
.outline-button:disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
  background-image: none;
}
.go-back {
  margin-left: -10px;
  cursor: pointer;
}
.cursor-pointer {
  cursor: pointer;
}
.login-container {
  display: flex;
  position: relative;
  width: 100%;
  min-width: 320px;
  min-height: 100vh;
  background: #ffffff;
  overflow: auto;
  align-items: stretch;
}
.login-left-section {
  position: relative;
  width: 60%;
  min-height: 100vh;
  background: url("./media/login-bg-hr.svg");
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
.login-left-inner {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  width: 642.646px;
  display: flex;
  flex-direction: column;
  gap: 43px;
  align-items: center;
  z-index: 2;
}
.for-employees .ms-login-text {
  font-size: 15px;
  font-weight: 400;
  color: #555555;
  text-align: center;
  display: block;
  margin-bottom: 10px;
}
.left-overlay-mask {
  position: absolute;
  inset: 0;
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}
.login-logo {
  position: absolute;
  top: 122px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}
.login-logo img {
  width: 318.041px;
  height: 86px;
  object-fit: contain;
}
.gradient-overlay {
  position: absolute;
  top: -170px;
  right: -85px;
  width: 586px;
  height: 586px;
  background:
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(255, 255, 255, 0.05) 40%,
      transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
}
.login-swiper {
  position: relative;
  width: 100%;
  max-width: 642.646px;
  height: auto;
  z-index: 4;
}
.login-swiper .swiper-wrapper {
  align-items: center;
}
.login-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
}
.login-swiper .slide-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
}
.login-swiper .illustration-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 642.646px;
}
.login-swiper .illustration-wrapper .illustration-image {
  width: 100%;
  height: auto;
  max-height: 514.117px;
  object-fit: contain;
}
.login-swiper .slide-text {
  text-align: center;
  max-width: 514px;
}
.login-swiper .slide-text h2 {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #ffffff;
  margin-bottom: 12px;
  letter-spacing: 0;
}
.login-swiper .slide-text p {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #bdbdbd;
  margin: 0 auto;
  max-width: 386.013px;
  letter-spacing: 0;
}
.login-swiper .swiper-pagination {
  position: sticky;
  margin-top: 55px;
  bottom: auto;
  display: flex;
  justify-content: center;
  gap: 8px;
  width: auto;
  z-index: 5;
  pointer-events: auto;
}
.login-swiper .swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  opacity: 1;
  transition: all 0.3s ease;
  cursor: pointer;
  margin: 0 !important;
}
.login-swiper .swiper-pagination-bullet-active {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.12);
}
.login-right-section {
  position: relative;
  width: 40%;
  min-height: 100vh;
  background:
    radial-gradient(
      circle at 50% 0%,
      #ffffff 0%,
      #f6f4f9 65%,
      #f3f1f7 100%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: visible;
}
.login-right-inner {
  position: relative;
  width: 100%;
}
.login-logo-right {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  width: 318.041px;
  height: 86px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-logo-right img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.show-password {
  display: flex !important;
  justify-content: center;
  align-items: center;
}
.login-form-container {
  position: relative;
  margin: 11rem auto 2rem;
  width: 360px;
  max-width: 100%;
}
.login-form-container .login-title {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 48px;
  color: #000000;
  margin: 0 0 16px 0;
  text-align: center;
  letter-spacing: 0;
}
.login-form-container .form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 44px;
}
.login-form-container .button-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}
.login-form-container .button-container .request-access {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  background:
    linear-gradient(
      121deg,
      #3D4B93 18.62%,
      #614595 49.85%,
      #6E3E91 81.38%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  cursor: pointer;
  transition: opacity 0.3s ease;
  text-decoration: none;
}
.login-form-container .button-container .request-access:hover {
  opacity: 0.8;
}
.login-form-container .or-divider {
  display: flex;
  align-items: center;
  width: 100%;
  max-width: 360px;
  gap: 11px;
  margin: 0;
}
.login-form-container .or-divider .divider-line {
  width: 160.496px;
  height: 1px;
  background: #D8D8D8;
  border: none;
  margin: 0;
}
.login-form-container .or-divider .or-text {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 18px;
  color: #868686;
  text-align: center;
  white-space: nowrap;
  width: 17px;
  flex-shrink: 0;
}
.login-form-container .ms-login-button {
  width: 360px;
  height: 44px;
}
.login-form-container .ms-login-button .ms-logo {
  width: 23px;
  height: 23px;
  object-fit: contain;
  flex-shrink: 0;
}
.login-form-container .ms-login-button span {
  font-family: "Poppins", sans-serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 19.5px;
  background:
    linear-gradient(
      90deg,
      #354491 0%,
      #7B328C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-align: center;
  white-space: nowrap;
}
.otp-form-container {
  position: relative;
  margin: 15rem auto 2rem;
  width: 360px;
  max-width: 100%;
}
.otp-form-container .otp-title {
  font-family: "Poppins", sans-serif;
  font-size: 32px;
  font-weight: 600;
  line-height: 48px;
  color: #000000;
  margin: 0 0 16px 0;
  text-align: center;
  letter-spacing: 0;
}
.otp-form-container .otp-instruction {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #000000;
  margin: 0 0 12px 0;
  text-align: left;
}
.otp-inputs-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14.4px;
  margin-bottom: 20px;
  width: 100%;
}
.otp-input {
  width: 48px;
  height: 48px;
  border: 2px solid #b0c8e2;
  border-radius: 8px;
  background: #ffffff;
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  text-align: center;
  color: #000000;
  outline: none;
  transition: all 0.3s ease;
  padding: 0;
  caret-color: #6366f1;
}
.otp-input:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
.otp-input:hover {
  border-color: #8b91c7;
}
.otp-input::placeholder {
  color: transparent;
}
.otp-button-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  width: 100%;
}
.otp-button-container .verify-otp-button {
  width: 100%;
  min-height: 48px;
}
.otp-button-container .resend-otp-link {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  text-align: center;
  background:
    linear-gradient(
      135deg,
      #6366f1 0%,
      #8b5cf6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-decoration: underline;
  text-decoration-color: transparent;
  background-image:
    linear-gradient(
      135deg,
      #6366f1 0%,
      #8b5cf6 100%);
  text-underline-offset: 2px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.otp-button-container .resend-otp-link:hover {
  opacity: 0.8;
}
.form-field-wrapper {
  width: 100%;
  margin-bottom: 0;
}
.form-field-wrapper label {
  display: block;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #000000;
}
.form-field-wrapper .mat-mdc-form-field {
  width: 100%;
}
.form-field-wrapper .mat-mdc-text-field-wrapper {
  background: #ffffff;
  border-radius: 8px;
}
.form-field-wrapper input {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  padding: 14px 16px;
}
.form-field-wrapper input::placeholder {
  color: #031931;
  opacity: 0.5;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
}
.remember-me-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}
.remember-me-wrapper .mat-mdc-checkbox-label {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #000000;
}
.gradient-link {
  background:
    linear-gradient(
      121deg,
      #3D4B93 18.62%,
      #614595 49.85%,
      #6E3E91 81.38%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 16px;
  cursor: pointer;
  text-decoration: none;
  transition: opacity 0.3s ease;
}
.gradient-link:hover {
  opacity: 0.8;
}
.gradient-link.disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}
.create-password-form-container {
  position: relative;
  margin: 15rem auto 2rem;
  width: 360px;
  max-width: 100%;
  display: flex;
  flex-direction: column;
}
.create-password-title {
  font-family: "Poppins", sans-serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 48px;
  color: #000000;
  margin: 0 0 16px 0;
  display: flex;
  align-items: center;
  gap: 12px;
}
.create-password-title .back-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
}
@media (max-width: 1024px) {
  .create-password-form-container {
    position: static;
    transform: none;
    margin: 0 auto 60px;
  }
}
@media (max-width: 768px) {
  .create-password-form-container {
    width: 100%;
    max-width: 360px;
  }
  .create-password-title {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 40px;
  }
}
@media (max-width: 480px) {
  .create-password-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 32px;
  }
}
@media (max-width: 1440px) {
  .login-container {
    min-width: 100%;
    height: auto;
  }
  .login-left-section {
    width: 50%;
    height: auto;
  }
  .login-right-section {
    width: 50%;
    height: auto;
  }
  .login-form-container {
    position: static;
    transform: none;
    margin-top: 120px;
  }
  .login-form-container .ms-login-button {
    width: 100%;
    max-width: 360px;
  }
  .otp-form-container {
    position: static;
    transform: none;
    margin-top: 120px;
  }
  .login-logo-right {
    position: static;
    transform: none;
    margin: 60px auto 40px;
  }
}
@media (max-width: 1199px) {
  .login-left-section {
    width: 50%;
  }
  .login-right-section {
    width: 50%;
  }
  .login-logo-right {
    width: 250px;
    height: auto;
  }
  .login-left-inner {
    top: 150px;
  }
  .login-form-container .login-title {
    font-size: 28px;
    line-height: 40px;
  }
  .otp-form-container .otp-title {
    font-size: 28px;
    line-height: 40px;
  }
}
@media (max-width: 1024px) {
  .login-container {
    flex-direction: column;
  }
  .login-left-section {
    width: 100%;
    height: auto;
    min-height: 400px;
  }
  .login-right-section {
    width: 100%;
    height: auto;
    padding: 30px 20px;
  }
  .login-left-inner {
    position: static;
    width: 100%;
    padding: 60px 30px 0;
  }
  .login-swiper {
    max-width: 100%;
  }
  .login-logo-right {
    margin: 40px auto 20px;
    position: static;
  }
  .login-form-container {
    position: static;
    transform: none;
    margin: 0 auto 60px;
  }
  .otp-form-container {
    position: static;
    transform: none;
    margin: 0 auto 60px;
  }
}
@media (max-width: 768px) {
  .login-left-section {
    display: none;
  }
  .login-right-section {
    height: auto;
    padding: 20px;
  }
  .login-logo-right {
    margin: 40px auto 24px;
  }
  .login-form-container {
    width: 100%;
    max-width: 360px;
    position: static;
    transform: none;
  }
  .login-form-container .ms-login-button {
    width: 100%;
    max-width: 100%;
  }
  .otp-form-container {
    width: 100%;
    max-width: 360px;
    position: static;
    transform: none;
  }
  .login-form-container .login-title {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 40px;
  }
  .otp-form-container .otp-title {
    font-size: 28px;
    line-height: 36px;
    margin-bottom: 40px;
  }
  .otp-inputs-wrapper {
    gap: 8px;
  }
  .otp-input {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}
@media (max-width: 480px) {
  .login-form-container .login-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 32px;
  }
  .otp-form-container .otp-title {
    font-size: 24px;
    line-height: 32px;
    margin-bottom: 32px;
  }
  .login-form-container .form-row {
    margin-bottom: 32px;
  }
  .login-form-container .button-container {
    gap: 24px;
  }
  .otp-button-container {
    gap: 20px;
  }
  .otp-inputs-wrapper {
    gap: 6px;
    margin-bottom: 48px;
  }
  .otp-input {
    width: 40px;
    height: 40px;
    font-size: 16px;
  }
  .otp-instruction {
    font-size: 13px;
    margin-bottom: 24px;
  }
}
.corporate-list-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;
}
.member-list-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;
}
.member-details-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;
}
.invoices-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;
}
.main-content-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 294px;
  position: relative;
  transition: margin-left 0.3s ease;
}
.main-content-wrapper.sidebar-collapsed {
  margin-left: 80px;
}
body.sidebar-collapsed .main-content-wrapper {
  margin-left: 80px;
}
body.sidebar-collapsed .top-header {
  width: calc(100% - 80px);
}
body.sidebar-collapsed .page-content {
  max-width: calc(100vw - 80px - 32px);
}
.page-content {
  padding: 88px 16px 16px 16px;
  max-width: calc(100vw - 294px - 32px);
  width: 100%;
  margin: 0 auto;
  transition: max-width 0.3s ease;
}
.sidebar-collapsed .page-content {
  max-width: calc(100vw - 80px - 32px);
}
.stats-card-container {
  margin-bottom: 16px;
}
.stats-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 265.6px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.stats-icon-wrapper {
  position: relative;
  width: 67px;
  height: 67px;
}
.stats-icon-circle {
  position: relative;
  width: 67px;
  height: 67px;
  border-radius: 50%;
  background:
    linear-gradient(
      135deg,
      #0497ea 0%,
      #03a9f4 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}
.stats-icon-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 67px;
  height: 67px;
}
.stats-icon {
  color: #ffffff;
  font-size: 32px;
  width: 32px;
  height: 32px;
}
.stats-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-number {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 1.3;
  color: #000000;
  margin: 0;
}
.stats-label {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #90a6b9;
  margin: 0;
}
.table-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.corporate-table {
  width: 100%;
  background: #ffffff;
}
.corporate-table .mat-mdc-header-row {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
}
.corporate-table .mat-mdc-row {
  border-bottom: none;
}
.corporate-table .mat-mdc-row:hover {
  background-color: rgba(128, 41, 143, 0.04) !important;
}
.corporate-table .mat-mdc-header-cell {
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #7e807e;
  line-height: 1.3;
}
.corporate-table .mat-mdc-header-cell:first-child {
  padding-left: 22px;
}
.corporate-table .mat-mdc-cell {
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #272525;
  line-height: 1.3;
  border-bottom: none;
}
.corporate-table .mat-mdc-cell:first-child {
  padding-left: 22px;
}
.corporate-table .even-row {
  background-color: #ffffff !important;
}
.corporate-table .odd-row {
  background-color: #f9f9ff !important;
}
.corporate-table .table-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}
.corporate-table .sort-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  vertical-align: middle;
  margin-left: 6px;
  color: #7e807e;
}
.corporate-table .sort-icon-img {
  width: 16px;
  height: 16px;
  vertical-align: middle;
}
.corporate-table .corporate-name-cell {
  padding-left: 22px;
}
.corporate-table .corporate-name-link {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 700;
  color: #0497ea;
  line-height: 1.3;
  text-decoration: underline;
  text-underline-position: from-font;
  cursor: pointer;
  transition: color 0.3s ease;
}
.corporate-table .corporate-name-link:hover {
  color: #0276b8;
}
.corporate-table .table-cell-center {
  text-align: center;
}
.corporate-table .action-cell {
  text-align: center;
  width: 135px;
}
.corporate-table .action-button {
  width: 24px;
  height: 24px;
  line-height: 24px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.corporate-table .action-button .action-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #272525;
  transition: color 0.3s ease;
}
.corporate-table .action-button .action-icon-img {
  width: 24px;
  height: 24px;
}
.corporate-table .action-button:hover .action-icon {
  color: #80298f;
}
.pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-top: 1px solid #e0e0e0;
  margin-top: 0;
}
.pagination-info {
  display: flex;
  align-items: center;
  gap: 20px;
  padding-left: 0;
}
.rows-per-page-label {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #272525;
  line-height: 1.3;
}
.page-size-selector-wrapper {
  position: relative;
  width: 84px;
}
.page-size-selector {
  width: 84px;
  border: 1px solid #9EB6C7;
  border-radius: 8px;
  display: flex;
  align-items: center;
  height: 32px;
  position: relative;
}
.page-size-selector .page-size-select {
  background: transparent;
  border: none;
  outline: none;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 28px;
  cursor: pointer;
  padding-left: 6px;
}
.page-size-selector .dropdown-arrow {
  position: absolute;
  right: 10px;
  width: 10px;
  height: 5px;
  pointer-events: none;
}
.page-size-selector .mat-mdc-form-field-wrapper {
  padding-bottom: 0;
}
.page-size-selector .mat-mdc-text-field-wrapper {
  padding: 0;
}
.page-size-selector .mat-mdc-form-field-infix {
  padding: 4px 8px;
  min-height: 32px;
  border: 1px solid #9eb6c7;
  border-radius: 8px;
}
.page-size-selector .mat-mdc-select-value {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #000000;
}
.page-size-selector .mat-mdc-select-arrow-wrapper {
  display: none;
}
.dropdown-icon {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 5px;
  pointer-events: none;
}
.showing-results {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #272525;
  line-height: 1.3;
}
::ng-deep .mat-mdc-paginator-range-label {
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background:
    linear-gradient(
      135deg,
      #80298f 0%,
      #9b44b3 100%);
  border-radius: 20.5px;
  padding: 10px;
  min-width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}
@media (max-width: 1024px) {
  .main-content-wrapper,
  .main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  .corporate-list-container {
    flex-direction: column;
  }
  .page-content {
    padding: 88px 16px 16px 16px !important;
    max-width: 100% !important;
  }
  .pagination-container {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
  .stats-card {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .corporate-table .mat-mdc-header-cell,
  .corporate-table .mat-mdc-cell {
    padding: 12px 8px;
    font-size: 14px;
  }
  .corporate-table .mat-mdc-header-cell:first-child,
  .corporate-table .mat-mdc-cell:first-child {
    padding-left: 12px;
  }
  .stats-card {
    padding: 12px;
  }
  .stats-number {
    font-size: 32px;
  }
  .stats-label {
    font-size: 14px;
  }
  .pagination-info {
    flex-wrap: wrap;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .table-card {
    overflow-x: auto;
  }
  .corporate-table {
    min-width: 800px;
  }
  .page-content {
    padding: 120px 12px 12px;
  }
}
.mobile-sidebarclose {
  display: none;
}
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  width: 294px;
  height: 100vh;
  background:
    linear-gradient(
      270deg,
      #3648AC -14.2%,
      #800080 108.54%);
  transition: width 0.3s ease;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
}
.sidebar.collapsed {
  width: 80px;
}
.sidebar.collapsed .menu-label {
  opacity: 0;
  width: 0;
}
.sidebar.collapsed .sidebar-logo {
  width: 50px;
}
.sidebar-header {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: none;
  padding: 16px;
  background: transparent;
}
.logo-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sidebar-logo {
  width: 147.93px;
  height: 40px;
  object-fit: contain;
  transition: width 0.3s ease;
}
.sidebar-nav {
  flex: 1;
  padding-top: 0;
  overflow-y: auto;
}
.menu-items {
  display: flex;
  flex-direction: column;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 16px;
  color: #ffffff;
  text-decoration: none;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  transition: background-color 0.3s ease;
  cursor: pointer;
  position: relative;
  background: transparent;
  border: none;
  justify-content: center;
}
.menu-item:hover {
  background: rgba(255, 255, 255, 0.1);
}
.menu-item.active {
  background: rgba(255, 255, 255, 0.2);
  font-weight: 600;
}
.menu-item.active::before {
  display: none;
}
.menu-item.hidden {
  display: none !important;
}
.menu-icon {
  width: 20px;
  height: 20px;
  font-size: 20px;
  color: #ffffff;
  flex-shrink: 0;
}
.menu-icon-img {
  width: 20px;
  height: 20px;
  object-fit: contain;
  flex-shrink: 0;
}
.menu-label {
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.3s ease, width 0.3s ease;
  flex: 1;
}
.toggle-btn {
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #80298f;
  border: 2px solid #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 10;
}
.toggle-btn mat-icon {
  color: #ffffff;
  font-size: 20px;
  width: 20px;
  height: 20px;
}
.toggle-btn:hover {
  background: #9b44b3;
  transform: translateY(-50%) scale(1.1);
}
.top-header {
  position: fixed;
  top: 0;
  right: 0;
  width: calc(100% - 294px);
  height: 72px;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 19px 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 999;
  transition: width 0.3s ease;
}
.top-header.sidebar-collapsed {
  width: calc(100% - 80px);
}
.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.page-title-main {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #80298F;
  line-height: 1.3;
}
.menu-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.menu-icon-wrapper:hover {
  opacity: 0.7;
}
.menu-toggle {
  width: 24px;
  height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.menu-toggle mat-icon {
  color: #80298f;
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.page-title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #344391;
  margin: 0;
  line-height: 1.3;
  padding-top: 5px;
}
.header-right {
  display: flex;
  align-items: center;
}
.user-info {
  display: flex;
  align-items: center;
  gap: 12px;
}
.user-details {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
}
.user-name {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #161616;
  line-height: 1.3;
}
.user-role {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #8e8e8e;
  line-height: 1.3;
}
.user-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.user-icon {
  width: 24px;
  height: 24px;
}
.user-menu-btn {
  width: 24px;
  height: 24px;
  padding: 0;
}
.user-menu-btn mat-icon {
  color: #80298f;
  font-size: 24px;
  width: 24px;
  height: 24px;
}
@media (max-width: 1024px) {
  .top-header {
    width: 100%;
  }
  .menu-toggle {
    display: flex;
  }
  .sidebar {
    transform: translateX(-100%);
  }
  .sidebar.show {
    transform: translateX(0);
  }
}
@media (max-width: 768px) {
  .top-header {
    padding: 12px;
  }
  .page-title {
    font-size: 18px;
  }
  .user-details {
    display: none;
  }
}
.stats-section {
  display: flex;
  justify-content: stretch;
  gap: 16px;
  margin-bottom: 16px;
}
.stat-card {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  min-height: 112px;
  max-width: 24%;
}
.stat-icon {
  width: 67px;
  height: 67px;
  flex-shrink: 0;
}
.stat-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stat-number {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 40px;
  line-height: 52px;
  color: #000000;
  margin: 0;
}
.stat-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #90A6B9;
  margin: 0;
}
.table-container {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 12px 0;
}
.table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 16px 12px 16px;
}
.toolbar-left {
  display: flex;
  gap: 16px;
}
.toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.search-box {
  position: relative;
  height: 44px;
}
.search-input {
  width: 100%;
  height: 100%;
  padding: 10px 16px 10px 13px;
  border: 2px solid #EEF4FA;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  color: #000000;
  outline: none;
}
.search-input::placeholder {
  color: #B3C8DE;
}
.search-input:focus {
  border-color: #80298F;
}
.search-icon {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.export-icon {
  width: 48px;
  height: 44px;
}
.table-wrapper {
  position: relative;
}
.member-table {
  width: 100%;
  border-collapse: collapse;
}
.member-table th,
.member-table td {
  text-align: left;
  border-bottom: 1px solid #E5E5E5;
}
.member-table .table-header {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18.2px;
  color: #7E807E;
  padding: 16px;
  background: #FFFFFF !important;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
}
.member-table .table-cell {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  color: #272525;
  padding: 6px 20px;
}
.member-table .row-even {
  background: #F9F9FF;
}
.member-table .row-odd {
  background: #FFFFFF;
}
.member-table .actions-cell {
  display: flex;
  gap: 8px;
  align-items: center;
  border-left: 1px solid #D1D1D1;
}
.member-table .sort-icon {
  width: 16px;
  height: 16px;
  margin-left: 6px;
  cursor: pointer;
  vertical-align: middle;
}
.member-table .status-chip-active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 16px;
  background-color: #E2FFD3 !important;
  border-radius: 16px !important;
}
.member-table .status-chip-active span {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #318D56 !important;
}
.member-table .status-chip-inactive {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 4px 16px;
  background-color: #FFEBF0 !important;
  border-radius: 16px !important;
}
.member-table .status-chip-inactive span {
  font-family: "Poppins", sans-serif !important;
  font-weight: 400 !important;
  font-size: 16px !important;
  line-height: 24px !important;
  color: #D21246 !important;
}
.member-table .progress-bar {
  width: 195.02px;
  height: 8px;
  background: #B3B2B2;
  border-radius: 5px;
  margin: 0 auto;
}
.member-table .pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  padding: 16px;
}
.member-table .pagination-info {
  display: flex;
  align-items: center;
  gap: 24px;
}
.member-table .pagination-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  color: #272525;
}
.member-table .page-size-selector {
  position: relative;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 4px 8px;
  border: 1px solid #9EB6C7;
  border-radius: 8px;
  width: 84px;
}
.member-table .page-size-select {
  border: none;
  outline: none;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #000000;
  background: transparent;
  cursor: pointer;
  appearance: none;
}
.member-table .dropdown-arrow {
  width: 10px;
  height: 5px;
  pointer-events: none;
}
.member-table .results-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  color: #272525;
}
.member-table .custom-paginator ::ng-deep .mat-mdc-paginator-container {
  justify-content: flex-end;
  padding: 0;
}
.member-table .custom-paginator ::ng-deep .mat-mdc-paginator-page-size {
  display: none;
}
.member-table .custom-paginator ::ng-deep .mat-mdc-icon-button {
  width: 32px;
  height: 32px;
  border: 1px solid #D4D4E5;
  border-radius: 32px;
  background: transparent;
  margin: 0 2.5px;
}
.member-table .custom-paginator ::ng-deep .mat-mdc-icon-button:hover {
  background: rgba(128, 41, 143, 0.05);
}
.member-table .custom-paginator ::ng-deep .mat-mdc-icon-button.mat-mdc-paginator-navigation-first .mat-mdc-button-touch-target,
.member-table .custom-paginator ::ng-deep .mat-mdc-icon-button.mat-mdc-paginator-navigation-last .mat-mdc-button-touch-target,
.member-table .custom-paginator ::ng-deep .mat-mdc-icon-button.mat-mdc-paginator-navigation-previous .mat-mdc-button-touch-target,
.member-table .custom-paginator ::ng-deep .mat-mdc-icon-button.mat-mdc-paginator-navigation-next .mat-mdc-button-touch-target {
  display: none;
}
.member-table .custom-paginator ::ng-deep .mat-mdc-paginator-range-label {
  display: none;
}
@media (max-width: 1200px) {
  .member-table .stats-section {
    flex-wrap: wrap;
  }
  .member-table .stat-card {
    flex: 1 1 calc(50% - 8px);
  }
}
@media (max-width: 768px) {
  .member-table .stats-section {
    flex-direction: column;
  }
  .member-table .stat-card {
    flex: 1 1 100%;
  }
  .member-table .table-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .member-table .toolbar-left,
  .member-table .toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .member-table .search-box {
    width: 100%;
  }
  .member-table .pagination-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .member-table .pagination-info {
    flex-wrap: wrap;
  }
}
.actions-column {
  border-right: 1px solid #D1D1D1;
}
.page-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}
.page-header .mat-mdc-icon-button {
  display: flex !important;
  align-items: center;
  justify-self: center;
}
.back-button {
  width: 24px;
  height: 24px;
  padding: 0;
  margin-right: 0;
}
.back-button mat-icon {
  color: #80298f;
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.back-button:hover {
  background: transparent;
}
.back-button:hover mat-icon {
  color: #6b2179;
}
.page-title-text {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #344391;
  margin: 0;
  letter-spacing: 0;
}
.member-details-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.member-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  border-bottom: 1px solid #e0e0e0;
  gap: 20px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  margin-bottom: 20px;
}
.member-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-name-status {
  display: flex;
  align-items: center;
  gap: 16px;
}
.member-name {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.status-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  border-radius: 16px;
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 500;
  line-height: 20px;
  letter-spacing: 0;
  text-transform: capitalize;
}
.status-chip.active {
  background: #e2ffd3;
  color: #008800;
}
.status-chip.inactive {
  background: #ffebee;
  color: #c62828;
}
.primary-btn {
  border-radius: 6px !important;
  background:
    linear-gradient(
      133deg,
      #344391 24.2%,
      #7B328C 75.8%) !important;
  color: #fff !important;
}
.outline-btn {
  border-radius: 6px !important;
  border: 1px solid #FF0004 !important;
  color: #FF0004 !important;
}
.member-meta {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #6b6b6b;
  margin: 0;
  letter-spacing: 0;
}
.member-header-actions {
  display: flex;
  align-items: center;
  gap: 22px;
}
.delete-button {
  min-width: 143px;
  height: 44px;
  padding: 12.5px 20.5px;
  border: 1.5px solid #d32f2f;
  border-radius: 8px;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #d32f2f;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.delete-button mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #d32f2f;
}
.delete-button:hover {
  background: rgba(211, 47, 47, 0.04);
  border-color: #b71c1c;
}
.delete-button:hover mat-icon {
  color: #b71c1c;
}
.delete-button:active {
  background: rgba(211, 47, 47, 0.08);
}
.edit-button {
  min-width: 148px;
  height: 44px;
  padding: 12.5px 33px;
  border-radius: 8px;
  background: #80298f;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}
.edit-button mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #ffffff;
}
.edit-button:hover {
  background: #6b2179;
  box-shadow: 0 4px 12px rgba(128, 41, 143, 0.3);
}
.edit-button:active {
  background: #561a63;
}
.member-details-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.details-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.section-title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #80298f;
  margin: 0;
  letter-spacing: 0;
}
.details-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  row-gap: 16px;
}
.detail-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.detail-item.full-width {
  grid-column: 1/-1;
}
.detail-label {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6b6b6b;
  letter-spacing: 0;
}
.detail-value {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  letter-spacing: 0;
  word-break: break-word;
}
.employment-row {
  grid-template-columns: repeat(3, 1fr);
}
.contact-row {
  grid-template-columns: 1fr 1fr;
}
.contact-email {
  grid-column: 1;
}
.contact-phone {
  grid-column: 2;
}
@media (max-width: 1440px) {
  .member-details-card {
    margin: 0 auto;
  }
}
@media (max-width: 1199px) {
  .details-row {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media (max-width: 1024px) {
  .member-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .member-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .details-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .employment-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .contact-row {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .page-header {
    margin-bottom: 16px;
  }
  .page-title-text {
    font-size: 20px;
    line-height: 26px;
  }
  .member-name {
    font-size: 16px;
    line-height: 20px;
  }
  .member-meta {
    font-size: 12px;
    line-height: 16px;
  }
  .section-title {
    font-size: 16px;
    line-height: 20px;
  }
  .details-row,
  .employment-row,
  .contact-row {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .member-header-actions {
    flex-direction: column-reverse;
    gap: 12px;
    width: 100%;
  }
  .member-header-actions .delete-button,
  .member-header-actions .edit-button {
    width: 100%;
    min-width: unset;
  }
  .member-details-content {
    padding: 12px;
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .member-name-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .detail-value {
    font-size: 14px;
    line-height: 20px;
  }
  .detail-label {
    font-size: 11px;
    line-height: 14px;
  }
}
.invoice-page-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}
.invoice-page-header .mat-mdc-icon-button {
  display: flex !important;
  align-items: center;
  justify-self: center;
}
.invoice-page-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #344391;
  margin: 0;
  letter-spacing: 0;
}
.invoice-info-section {
  margin-bottom: 20px;
}
.invoice-file-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invoice-file-name {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.invoice-upload-date {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #6b6b6b;
  margin: 0;
  letter-spacing: 0;
}
.invoice-content-grid {
  display: flex;
  gap: 16px;
  width: 100%;
}
.invoice-preview-panel {
  width: 70%;
}
.invoice-preview-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #ffffff;
}
.preview-title {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.download-button {
  min-width: 144px;
  height: 44px;
  padding: 12.5px 24px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(
      133deg,
      #344391 24.2%,
      #7B328C 75.8%) !important;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #ffffff !important;
  border: none;
}
.download-button:hover {
  background:
    linear-gradient(
      133deg,
      #2d3a7f 24.2%,
      #6b2a7a 75.8%) !important;
  box-shadow: 0 4px 12px rgba(123, 50, 140, 0.3);
}
.preview-content {
  display: flex;
  padding: 16px;
  gap: 22px;
}
.page-thumbnails {
  display: flex;
  flex-direction: column;
  gap: 20px;
  flex-shrink: 0;
}
.page-thumbnail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  background: transparent;
  border: none;
  padding: 0;
  text-align: center;
}
.page-thumbnail.active .thumbnail-wrapper {
  border-color: #80298f;
  box-shadow: 0 2px 8px rgba(128, 41, 143, 0.3);
}
.page-thumbnail.active .page-label {
  color: #80298f;
  font-weight: 600;
}
.page-thumbnail:hover .thumbnail-wrapper {
  border-color: #80298f;
}
.thumbnail-wrapper {
  width: 174px;
  height: 210.4px;
  border-radius: 8px;
  border: 2px solid #e0e0e0;
  overflow: hidden;
  background: #f9f9f9;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.thumbnail-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-label {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #000000;
  margin: 0;
  text-align: center;
  transition: all 0.3s ease;
}
.main-preview {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 8px;
  min-height: 542px;
}
.preview-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}
.hr-remarks-panel {
  width: 30%;
}
.hr-remarks-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: 100%;
}
.remarks-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #ffffff;
}
.remarks-title {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.report-button {
  min-width: 177.86px;
  height: 44px;
  padding: 12.5px 24px !important;
  border-radius: 6px !important;
  border: 1px solid #80298F !important;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #fff !important;
}
.report-button:hover {
  background: rgba(128, 41, 143, 0.04) !important;
}
.remarks-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.remark-item {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 0;
  background: #f9f9ff;
  border-radius: 8px;
}
.remark-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.remark-author {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 21px;
  color: #000000;
  letter-spacing: 0;
}
.remark-date {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  color: #6b6b6b;
  letter-spacing: 0;
}
.remark-message {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
@media (max-width: 1440px) {
  .invoice-content-grid {
    max-width: 100%;
  }
}
@media (max-width: 1199px) {
  .invoice-content-grid {
    gap: 20px;
  }
  .hr-remarks-panel {
    order: 2;
  }
  .invoice-preview-panel {
    order: 1;
  }
}
@media (max-width: 1024px) {
  .preview-content {
    flex-direction: column;
    gap: 16px;
  }
  .page-thumbnails {
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
  }
  .thumbnail-wrapper {
    width: 140px;
    height: 168px;
  }
  .main-preview {
    min-height: 400px;
  }
}
@media (max-width: 768px) {
  .invoice-page-header {
    margin-bottom: 16px;
  }
  .invoice-page-title {
    font-size: 20px;
    line-height: 26px;
  }
  .invoice-file-name {
    font-size: 16px;
    line-height: 20px;
  }
  .invoice-upload-date {
    font-size: 12px;
    line-height: 16px;
  }
  .preview-header,
  .remarks-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .download-button,
  .report-button {
    width: 100%;
    min-width: unset !important;
  }
  .thumbnail-wrapper {
    width: 120px;
    height: 144px;
  }
  .main-preview {
    min-height: 300px;
  }
  .remark-header-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}
@media (max-width: 480px) {
  .page-content {
    padding: 120px 12px 12px;
  }
  .invoice-info-section {
    margin-bottom: 16px;
  }
  .preview-content {
    padding: 12px;
  }
  .remarks-content {
    padding: 12px;
  }
  .remark-item {
    padding: 12px;
  }
  .thumbnail-wrapper {
    width: 100px;
    height: 120px;
  }
  .page-label {
    font-size: 12px;
  }
}
.invoices-page .page-wrapper {
  padding: 24px;
}
.invoices-page .top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.invoices-page .top-bar .page-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #344391;
  margin: 0;
}
.invoices-page .top-bar .actions {
  display: flex;
  gap: 12px;
}
.invoices-page .table-card {
  padding: 12px;
  background: #fff;
  border-radius: 8px;
}
.invoices-page .table-wrapper {
  overflow-x: auto;
}
.invoices-page .payment-popup {
  padding: 24px;
}
.invoices-page .payment-popup .popup-title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  color: #161616;
  margin: 0 0 8px 0;
}
.invoices-page .payment-popup .payment-options {
  margin: 12px 0;
}
.invoices-page .payment-popup .popup-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 16px;
}
.bulk-upload-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;
}
.bulk-upload-container .form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px;
  background: transparent;
}
.page-title-bulk {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #344391;
  margin: 0;
  letter-spacing: 0;
}
.bulk-upload-form {
  width: 100%;
}
.form-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.form-content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 856px;
}
.form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.step-title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #344391;
  margin: 0;
  letter-spacing: 0;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-label {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #7E807E;
  letter-spacing: 0;
}
.upload-type-select {
  width: 100%;
}
.upload-type-select ::ng-deep .mat-mdc-text-field-wrapper {
  background: #ffffff;
}
.upload-type-select ::ng-deep .mat-mdc-form-field-flex {
  background: #ffffff;
}
.upload-type-select ::ng-deep .mat-mdc-select {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #000000;
}
.upload-type-select ::ng-deep .mat-mdc-form-field-infix {
  min-height: 48px;
  padding: 14px 16px;
}
.upload-type-select ::ng-deep .mdc-notched-outline__leading,
.upload-type-select ::ng-deep .mdc-notched-outline__notch,
.upload-type-select ::ng-deep .mdc-notched-outline__trailing {
  border-color: #e0e0e0;
}
.upload-type-select ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
.upload-type-select ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
.upload-type-select ::ng-deep .mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
  border-color: #80298f;
}
.upload-type-select ::ng-deep .mat-mdc-select-arrow {
  color: #000000;
}
.download-template-section {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px;
  background: #ffffff;
  border-radius: 8px;
  border: 1px solid #EEE;
}
.template-info {
  display: flex;
  align-items: center;
  gap: 16px;
}
.template-icon-wrapper {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.template-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}
.template-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.template-title {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.template-description {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  color: #6b6b6b;
  margin: 0;
  letter-spacing: 0;
}
.download-template-btn {
  min-width: 207px;
  height: 44px;
  padding: 10px 16px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(
      133deg,
      #344391 24.2%,
      #7B328C 75.8%) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  color: #ffffff !important;
  border: none;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  transition: all 0.3s ease;
}
.download-template-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
}
.download-template-btn .download-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #ffffff;
}
.upload-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.file-upload-area {
  width: 100%;
  min-height: 172px;
  border: 2px dashed #D2E1F0;
  border-radius: 8px;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}
.file-upload-area:hover {
  border-color: #9EBEDF;
  background: rgba(158, 190, 223, 0.02);
}
.file-upload-area.dragging {
  border-color: #9EBEDF;
  background: rgba(158, 190, 223, 0.02);
}
.upload-icon-wrapper {
  margin-bottom: 16px;
}
.upload-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(158, 190, 223, 0.2196078431);
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #80298f;
}
.upload-text {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #9EBEDF;
  margin: 0;
  text-align: center;
  letter-spacing: 0;
}
.file-input-hidden {
  display: none;
}
.uploaded-file-name {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 21px;
  color: #000000;
  margin: 8px 0 0 0;
  text-align: center;
  letter-spacing: 0;
}
.file-requirements {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.requirement-text {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
  color: #6b6b6b;
  margin: 0;
  letter-spacing: 0;
}
.form-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 16px;
  border-top: 1px solid #e0e0e0;
  background: #ffffff;
}
.cancel-btn {
  min-width: 143px;
  height: 44px;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  border: 1px solid #80298f !important;
  background: transparent !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  color: #80298f !important;
  transition: all 0.3s ease;
}
.cancel-btn:hover {
  background: rgba(128, 41, 143, 0.04) !important;
  border-color: #6b2179 !important;
  color: #6b2179 !important;
}
.cancel-btn:active {
  background: rgba(128, 41, 143, 0.08) !important;
}
.submit-btn {
  min-width: 148px;
  height: 44px;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(
      133deg,
      #344391 24.2%,
      #7B328C 75.8%) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}
.submit-btn:hover:not(:disabled) {
  background:
    linear-gradient(
      133deg,
      #2d3a7f 24.2%,
      #6b2a7a 75.8%) !important;
  box-shadow: 0 4px 12px rgba(123, 50, 140, 0.3);
}
.submit-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
}
.mat-mdc-raised-button .mdc-button__label,
.mat-mdc-select {
  font-family: "Poppins", sans-serif !important;
}
.mdc-button .mdc-button__label {
  display: flex;
  align-items: center;
  gap: 7px;
}
@media (max-width: 1024px) {
  .bulk-upload-form {
    max-width: 100%;
  }
  .download-template-section {
    flex-direction: column;
    align-items: flex-start;
  }
  .download-template-btn {
    width: 100%;
    min-width: unset;
  }
}
@media (max-width: 768px) {
  .page-title-bulk {
    font-size: 20px;
    line-height: 26px;
  }
  .form-content {
    padding: 12px;
    gap: 24px;
  }
  .step-title {
    font-size: 16px;
    line-height: 20px;
  }
  .template-info {
    flex-direction: column;
    align-items: flex-start;
  }
  .file-upload-area {
    min-height: 150px;
    padding: 24px 12px;
  }
  .form-actions {
    flex-direction: column-reverse;
    gap: 12px;
    padding: 12px;
  }
  .cancel-btn,
  .submit-btn {
    width: 100%;
    min-width: unset !important;
  }
}
@media (max-width: 480px) {
  .form-section {
    gap: 12px;
  }
  .template-title {
    font-size: 14px;
    line-height: 20px;
  }
  .template-description {
    font-size: 11px;
    line-height: 14px;
  }
  .upload-text {
    font-size: 13px;
    line-height: 19px;
  }
  .requirement-text {
    font-size: 12px;
    line-height: 18px;
  }
}
.filter-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1000;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  animation: fadeIn 0.3s ease-in-out;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.filter-panel {
  width: 448px;
  height: 100vh;
  background: #FFFFFF;
  box-shadow: -4px 0 16px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  animation: slideInRight 0.3s ease-in-out;
  position: relative;
  z-index: 1001;
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
.filter-header {
  padding: 24px;
  border-bottom: 1px solid #E5E5E5;
}
.filter-title {
  font-family: "Poppins", sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 26px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.close-filter-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
}
.close-filter-btn mat-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #000000;
}
.close-filter-btn:hover {
  background: #F5F5F5;
  border-color: #D1D1D1;
}
.filter-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.filter-label {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 18px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.filter-form-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-flex .mat-mdc-form-field-infix .mat-datepicker-input {
  padding: 0% !important;
}
.filter-form-field .mat-mdc-form-field-subscript-wrapper {
  display: none !important;
}
.header-text {
  display: flex;
  justify-content: space-between;
  align-items: anchor-center;
}
.header-text img {
  height: fit-content;
}
.filter-form {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  overflow-y: auto;
}
.filter-form ::ng-deep .mat-mdc-form-field {
  width: 100%;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper {
  background: #FFFFFF;
  border: 1px solid #D1D1D1;
  border-radius: 6px;
  padding: 0 !important;
  height: 48px;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-text-field-wrapper:hover {
  border-color: #80298F;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-flex {
  padding: 0 16px !important;
  align-items: center;
  height: 48px;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-infix {
  padding: 0 !important;
  border: none;
  min-height: auto;
  height: auto;
  display: flex;
  align-items: center;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-input-element {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 48px;
  color: #B5B5B5;
  padding: 0 !important;
  height: 48px;
  text-align: left;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-input-element::placeholder {
  color: #B5B5B5;
  opacity: 1;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-select-value-text {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #B5B5B5;
  line-height: 48px;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper {
  display: none;
}
.filter-form ::ng-deep .mat-mdc-form-field .mdc-notched-outline {
  display: none;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-datepicker-toggle {
  margin-left: auto;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button {
  width: 24px;
  height: 24px;
  padding: 0;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-datepicker-toggle .mat-mdc-icon-button mat-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #000000;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow-wrapper {
  height: 20px;
  transform: none;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000000;
  margin: 0;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-select-value {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 48px;
  color: #B5B5B5;
}
.filter-form ::ng-deep .mat-mdc-form-field .mat-mdc-select-placeholder {
  color: #B5B5B5;
}
.filter-form ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-text-field-wrapper {
  border-color: #80298F;
}
.filter-form ::ng-deep .mat-mdc-form-field.mat-form-field-invalid .mat-mdc-text-field-wrapper {
  border-color: #D32F2F;
}
.apply-filter-btn {
  width: 100%;
  height: 44px;
  padding: 12px 24px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%) !important;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #FFFFFF !important;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  text-transform: none;
  letter-spacing: 0;
  margin-top: auto;
}
.apply-filter-btn:hover {
  background:
    linear-gradient(
      90deg,
      #2d3a7f 0%,
      #6b2a7a 100%) !important;
  box-shadow: 0 4px 12px rgba(123, 50, 140, 0.3);
}
.apply-filter-btn:disabled {
  cursor: not-allowed !important;
  box-shadow: none;
}
.filter-footer {
  padding: 24px;
  border-top: 1px solid #E5E5E5;
  background: #FFFFFF;
}
@media (max-width: 768px) {
  .filter-panel {
    width: 100%;
    max-width: 400px;
  }
}
@media (max-width: 480px) {
  .filter-panel {
    max-width: 100%;
  }
  .filter-header {
    padding: 16px;
  }
  .filter-form {
    padding: 16px;
  }
  .filter-footer {
    padding: 16px;
  }
}
.pagination-section {
  display: flex;
  justify-content: space-between;
  margin-top: 24px;
}
.pagination-section .mat-mdc-paginator {
  background-color: transparent !important;
}
.pagination-section .mat-mdc-paginator .mat-mdc-paginator-outer-container {
  align-items: center;
}
.custom-pagination-wrapper {
  display: flex;
  gap: 5px;
  align-items: center;
}
.pagination-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 10px;
  border: 1px solid #D4D4E5;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15.85px;
  color: #333333;
}
.pagination-btn:hover:not(:disabled):not(.active) {
  background: rgba(128, 41, 143, 0.05);
  border-color: #80298F;
}
.pagination-btn.active {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%);
  border: none;
  color: #FFFFFF;
}
.pagination-btn.more {
  border-radius: 8px;
  cursor: default;
}
.pagination-btn.more:hover {
  background: transparent;
  border-color: #D4D4E5;
}
.pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.pagination-btn img {
  width: 16px;
  height: 16px;
}
.custom-paginator {
  background: transparent !important;
}
.custom-paginator .mat-mdc-paginator-container {
  justify-content: flex-end;
  padding: 0;
  min-height: auto;
}
.custom-paginator .mat-mdc-paginator-page-size {
  display: none !important;
}
.custom-paginator .mat-mdc-paginator-range-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}
.custom-paginator .mat-mdc-icon-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 10px;
  border: 1px solid #D4D4E5;
  border-radius: 50%;
  background: transparent;
  transition: all 0.3s ease;
}
.custom-paginator .mat-mdc-icon-button:hover:not([disabled]) {
  background: rgba(128, 41, 143, 0.05);
  border-color: #80298F;
}
.custom-paginator .mat-mdc-icon-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.custom-paginator .mat-mdc-icon-button .mat-mdc-button-touch-target {
  display: none;
}
.custom-paginator .mat-mdc-icon-button .mat-mdc-paginator-icon {
  width: 16px;
  height: 16px;
  fill: #3D3D3D;
}
.custom-paginator .mat-mdc-paginator-range-label {
  display: none;
}
.pagination-numbers {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 0 5px;
}
.page-number {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid #D4D4E5;
  border-radius: 50%;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15.85px;
  color: #333333;
}
.page-number:hover:not(.active) {
  background: rgba(128, 41, 143, 0.05);
  border-color: #80298F;
}
.page-number.active {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%);
  border: none;
  color: #FFFFFF;
}
.page-ellipsis {
  width: 32px;
  height: 32px;
  min-width: 32px;
  min-height: 32px;
  padding: 0;
  border: 1px solid #D4D4E5;
  border-radius: 8px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15.85px;
  color: #333333;
  cursor: default;
}
.mat-mdc-text-field-wrapper {
  background: #ffffff !important;
  border-radius: 8px;
  border: 2px solid #EEF4FA;
  height: 58px;
}
.mdc-text-field--filled:not(.mdc-text-field--disabled) .mdc-line-ripple::before {
  display: none !important;
}
.mdc-text-field--no-label:not(.mdc-text-field--textarea) .mat-mdc-form-field-input-control.mdc-text-field__input,
.mat-mdc-text-field-wrapper .mat-mdc-form-field-input-control {
  height: 0px !important;
  font-family: "Poppins", sans-serif;
}
.action-memo-details-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;
}
.requirement-page-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}
.requirement-page-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #80298f;
  margin: 0;
  letter-spacing: 0;
}
.document-info-section {
  margin-bottom: 20px;
}
.document-file-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.document-file-name {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.document-upload-date {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 19px;
  color: #6b6b6b;
  margin: 0;
  letter-spacing: 0;
}
.document-content-card {
  width: 100%;
}
.document-preview-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
@media (max-width: 1440px) {
  .document-content-card {
    max-width: 100%;
  }
}
@media (max-width: 1024px) {
  .preview-content {
    flex-direction: column;
    gap: 16px;
  }
  .page-thumbnails {
    flex-direction: row;
    overflow-x: auto;
    gap: 12px;
  }
  .thumbnail-wrapper {
    width: 140px;
    height: 168px;
  }
  .main-preview {
    min-height: 400px;
  }
}
@media (max-width: 768px) {
  .requirement-page-header {
    margin-bottom: 16px;
  }
  .requirement-page-title {
    font-size: 20px;
    line-height: 26px;
  }
  .document-file-name {
    font-size: 16px;
    line-height: 20px;
  }
  .document-upload-date {
    font-size: 12px;
    line-height: 16px;
  }
  .preview-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .download-button {
    width: 100%;
    min-width: unset !important;
  }
  .thumbnail-wrapper {
    width: 120px;
    height: 144px;
  }
  .main-preview {
    min-height: 300px;
  }
}
@media (max-width: 480px) {
  .page-content {
    padding: 120px 12px 12px;
  }
  .document-info-section {
    margin-bottom: 16px;
  }
  .preview-content {
    padding: 12px;
  }
  .thumbnail-wrapper {
    width: 100px;
    height: 120px;
  }
  .page-label {
    font-size: 12px;
  }
}
.edit-member-details-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #f5f5f5;
  position: relative;
}
.edit-page-header {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 20px;
}
.edit-page-header .back-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
}
.edit-page-title {
  font-family: "Poppins", sans-serif;
  font-size: 24px;
  font-weight: 600;
  line-height: 30px;
  color: #344391;
  margin: 0;
  letter-spacing: 0;
}
.edit-member-form {
  width: 100%;
}
.edit-form-card {
  background: #ffffff;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border-radius: 12px;
}
.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 16px;
  background: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  min-height: 60px;
  border-radius: 12px;
  margin-bottom: 20px;
}
.member-header-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.member-name-title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  color: #000000;
  margin: 0;
  letter-spacing: 0;
}
.form-header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.save-btn {
  min-width: 148px !important;
  height: 44px;
  padding: 12px 16px !important;
  border-radius: 6px !important;
  background:
    linear-gradient(
      133deg,
      #344391 24.2%,
      #7B328C 75.8%) !important;
  font-family: "Poppins", sans-serif !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  line-height: 19px !important;
  color: #ffffff !important;
  border: none;
  transition: all 0.3s ease;
}
.save-btn:hover:not(:disabled) {
  background:
    linear-gradient(
      133deg,
      #2d3a7f 24.2%,
      #6b2a7a 75.8%) !important;
  box-shadow: 0 4px 12px rgba(123, 50, 140, 0.3);
}
.save-btn:disabled {
  cursor: not-allowed !important;
  opacity: 0.6;
}
.form-content-wrapper {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  row-gap: 16px;
}
.form-row.two-columns {
  grid-template-columns: repeat(2, 1fr);
}
.form-field {
  width: 100%;
}
.form-field.full-width {
  width: 100%;
}
.form-field ::ng-deep .mat-mdc-text-field-wrapper {
  background: #ffffff;
  border-radius: 8px;
  padding: 0;
}
.form-field ::ng-deep .mdc-text-field--filled {
  background: transparent;
}
.form-field ::ng-deep .mdc-text-field--filled:not(.mdc-text-field--disabled) {
  background: #ffffff;
}
.form-field ::ng-deep .mdc-text-field--filled .mdc-line-ripple::before {
  border-bottom: 1px solid #D1D1D1;
}
.form-field ::ng-deep .mdc-text-field--filled .mdc-line-ripple::after {
  border-bottom: 2px solid #80298f;
}
.form-field ::ng-deep .mat-mdc-form-field-flex {
  background: #ffffff;
  border: 1px solid #D1D1D1;
  border-radius: 8px;
  align-items: center;
  padding: 0;
}
.form-field ::ng-deep .mat-mdc-form-field-infix {
  min-height: 48px;
  padding: 14px 16px;
  border: none;
}
.form-field ::ng-deep .mat-mdc-input-element,
.form-field ::ng-deep .mat-mdc-select {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #000000;
  caret-color: #80298f;
}
.form-field ::ng-deep .mat-mdc-input-element::placeholder {
  color: #9E9E9E;
  opacity: 1;
}
.form-field ::ng-deep textarea.mat-mdc-input-element {
  min-height: 80px;
  resize: vertical;
  line-height: 21px;
}
.form-field ::ng-deep .mat-mdc-form-field.mat-focused .mat-mdc-form-field-flex {
  border-color: #80298f;
  border-width: 2px;
}
.form-field ::ng-deep .mat-mdc-form-field.mat-form-field-invalid .mat-mdc-form-field-flex {
  border-color: #d32f2f;
}
.form-field ::ng-deep .mat-mdc-form-field-error {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: #d32f2f;
  margin-top: 4px;
}
.form-field ::ng-deep .mat-mdc-form-field-label {
  display: none;
}
.form-field ::ng-deep .mdc-line-ripple {
  display: none;
}
.form-field ::ng-deep .mat-datepicker-toggle .mat-mdc-icon-button {
  width: 24px;
  height: 24px;
  padding: 0;
}
.form-field ::ng-deep .mat-datepicker-toggle .mat-mdc-icon-button mat-icon {
  font-size: 20px;
  width: 20px;
  height: 20px;
  color: #000000;
}
.form-field ::ng-deep .mat-mdc-select-arrow-wrapper {
  height: 20px;
  transform: none;
}
.form-field ::ng-deep .mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #000000;
  margin: 0;
}
.form-field ::ng-deep .mat-mdc-select-trigger {
  height: 100%;
  display: flex;
  align-items: center;
}
.radio-group-horizontal {
  display: flex;
  align-items: center;
  gap: 35px;
  margin-top: 8px;
}
.radio-group-horizontal ::ng-deep .mat-mdc-radio-button .mdc-radio {
  padding: 0;
}
.radio-group-horizontal ::ng-deep .mat-mdc-radio-button .mdc-form-field {
  gap: 16px;
}
.radio-group-horizontal ::ng-deep .mat-mdc-radio-button .mdc-label {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 16px;
  color: #000000;
  padding-left: 0;
}
.radio-group-horizontal ::ng-deep .mat-mdc-radio-button .mdc-radio__outer-circle,
.radio-group-horizontal ::ng-deep .mat-mdc-radio-button .mdc-radio__inner-circle {
  border-color: #80298f;
}
.radio-group-horizontal ::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__outer-circle {
  border-color: #80298f;
}
.radio-group-horizontal ::ng-deep .mat-mdc-radio-button.mat-mdc-radio-checked .mdc-radio__inner-circle {
  border-color: #80298f;
  background-color: #80298f;
}
.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field.mat-mdc-form-field .mdc-notched-outline__notch {
  border-left: none !important;
}
.mat-mdc-form-field-focus-overlay {
  background-color: transparent !important;
}
.home-address-field .mat-mdc-text-field-wrapper {
  height: 160px !important;
  padding: 10px;
}
@media (max-width: 1440px) {
  .edit-form-card {
    max-width: 100%;
  }
}
@media (max-width: 1199px) {
  .form-row {
    grid-template-columns: repeat(3, 1fr);
  }
  .form-row.two-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 1024px) {
  .form-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }
  .form-header-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .form-row {
    grid-template-columns: repeat(2, 1fr);
  }
  .form-row.two-columns {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .edit-page-header {
    margin-bottom: 16px;
  }
  .edit-page-title {
    font-size: 20px;
    line-height: 26px;
  }
  .member-name-title {
    font-size: 16px;
    line-height: 20px;
  }
  .section-title {
    font-size: 16px;
    line-height: 20px;
  }
  .form-row {
    grid-template-columns: 1fr;
  }
  .form-row.two-columns {
    grid-template-columns: 1fr;
  }
  .form-header-actions {
    flex-direction: column-reverse;
    gap: 12px;
    width: 100%;
  }
  .form-header-actions .cancel-btn,
  .form-header-actions .save-btn {
    width: 100%;
    min-width: unset !important;
  }
  .form-content-wrapper {
    padding: 12px;
    gap: 24px;
  }
}
@media (max-width: 480px) {
  .member-name-status {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .form-section {
    gap: 12px;
  }
  .radio-group-horizontal {
    gap: 20px;
  }
}
.report-discrepancy-container {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  width: 880px;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.report-discrepancy-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.report-discrepancy-content .action-buttons {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  width: 100%;
}
.report-discrepancy-content .action-buttons button {
  max-width: 150px;
}
.report-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.report-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #344391;
  margin: 0;
  white-space: nowrap;
}
.close-button {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
.close-button:hover {
  opacity: 0.7;
}
.close-icon {
  width: 24px;
  height: 24px;
  display: block;
}
.textarea-section {
  width: 100%;
}
.textarea-wrapper {
  position: relative;
  width: 100%;
  height: 197px;
  border: 2px solid #eef4fa;
  border-radius: 8px;
  background: #ffffff;
  box-sizing: border-box;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
}
.remark-textarea {
  flex: 1;
  width: 100%;
  border: none;
  outline: none;
  resize: none;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  background: transparent;
  box-sizing: border-box;
  padding: 0;
}
.remark-textarea::placeholder {
  color: #031931;
  opacity: 0.5;
}
.remark-textarea:focus {
  outline: none;
}
.character-count {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  opacity: 0.5;
  text-align: right;
  margin-top: auto;
}
.action-buttons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  width: 100%;
}
@media (max-width: 1024px) {
  .report-discrepancy-container {
    width: 100%;
    max-width: 880px;
  }
}
@media (max-width: 768px) {
  .report-discrepancy-container {
    padding: 12px;
    gap: 24px;
  }
  .report-title {
    font-size: 16px;
    line-height: 20px;
  }
  .textarea-wrapper {
    height: 160px;
  }
  .action-buttons {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .cancel-btn,
  .submit-btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .report-discrepancy-container {
    gap: 20px;
  }
  .report-title {
    font-size: 14px;
    line-height: 18px;
  }
  .textarea-wrapper {
    height: 140px;
  }
}
.report-discrepancy-dialog .mat-mdc-dialog-container {
  padding: 0 !important;
  overflow: visible !important;
}
.report-discrepancy-dialog .mdc-dialog__surface {
  border-radius: 12px !important;
  overflow: visible !important;
}
.report-discrepancy-dialog .mat-mdc-dialog-surface {
  border-radius: 12px !important;
  overflow: visible !important;
}
code-input {
  --item-spacing: 14px !important;
  --item-height: 48px !important;
}
code-input span:first-child {
  padding-left: 0 !important;
}
code-input span input {
  width: 48px !important;
  height: 48px !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
  border: 2px solid #B0C8E2 !important;
}
.upload-requirement-dialog {
  width: 100%;
  max-width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 16px 16px 24px 16px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.uploaded-files-list {
  max-height: 170px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: #c1c1c1 #f1f1f1;
}
.uploaded-files-list::-webkit-scrollbar {
  width: 8px;
}
.uploaded-files-list::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}
.uploaded-files-list::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 4px;
}
.uploaded-files-list::-webkit-scrollbar-thumb:hover {
  background: #a1a1a1;
}
.urd-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  width: 100%;
}
.urd-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #344391;
  margin: 0;
}
.urd-close-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
.urd-close-btn:hover {
  opacity: 0.7;
}
.urd-close-btn img {
  width: 24px;
  height: 24px;
}
.urd-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.urd-label {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  margin: 0;
}
.urd-note {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #90a6b9;
  margin: 0;
}
.file-drop-zone {
  position: relative;
  width: 100%;
  height: 180px;
  border: 2px dashed #d1dae4;
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      #f9fafc 0%,
      #ffffff 100%);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: border-color 0.25s ease, background-color 0.25s ease;
}
.file-drop-zone.drag-active {
  border-color: #80298f;
  background: #f5effa;
}
.file-drop-zone:focus {
  outline: none;
  border-color: #344391;
}
.drop-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.drop-icon {
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #eef4fa;
  border-radius: 50%;
}
.drop-icon img {
  width: 24px;
  height: 24px;
}
.drop-text {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  color: #90a6b9;
  text-align: center;
  margin: 0;
}
.urd-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.meta-line {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  color: #031931;
  opacity: 0.7;
}
.meta-line span {
  font-weight: 600;
}
.uploaded-file-card {
  display: flex;
  width: 49%;
  align-items: center;
  gap: 12px;
  background: #ffffff;
  border: 1px solid #d1dae4;
  border-radius: 8px;
  padding: 12px 16px;
  min-height: 72px;
  margin-top: 10px;
  box-sizing: border-box;
  position: relative;
}
.file-icon {
  width: 48px;
  height: 48px;
  background: #FFE5F9;
  border-radius: 0px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-icon img {
  width: 24px;
  height: 24px;
}
.file-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  width: 70%;
}
.file-name {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #031931;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.file-size {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #90a6b9;
}
.file-remove {
  margin-left: auto;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.file-remove img {
  width: 20px;
  height: 20px;
}
.urd-error {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  color: #d21246;
}
.urd-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
}
.urd-actions .outline-button {
  width: 143px;
  height: 44px;
}
.urd-actions .primary-button {
  width: 148px;
  height: 44px;
}
.upload-requirement-dialog-panel .mat-mdc-dialog-container {
  padding: 0 !important;
}
@media (max-width: 768px) {
  .upload-requirement-dialog {
    width: 100%;
    padding: 12px;
  }
  .uploaded-file-card {
    width: 49%;
  }
  .urd-actions {
    flex-direction: column-reverse;
  }
  .urd-actions .outline-button,
  .urd-actions .primary-button {
    width: 100%;
  }
}
@media (min-width: 769px) {
  .uploaded-files-list {
    flex-direction: row;
  }
  .uploaded-file-card {
    width: 49%;
  }
}
button.primary-button.mat-button,
.urd-actions button.primary-button,
button.primary-button.mat-mdc-button {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%);
  border: 1px solid transparent;
  border-radius: 6px;
  color: #FFFFFF;
  cursor: pointer;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  padding: 12px 29px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
button.outline-button.mat-button,
.urd-actions button.outline-button,
button.outline-button.mat-mdc-button {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 12px 16.78px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  color: #80298F;
  cursor: pointer;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(
      45deg,
      #354491,
      #7C338C);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}
button.outline-button.mat-button:hover,
.urd-actions button.outline-button:hover,
button.outline-button.mat-mdc-button:hover {
  background: transparent !important;
  background-image:
    linear-gradient(#ffffff, #ffffff),
    linear-gradient(
      45deg,
      #354491,
      #7C338C) !important;
  background-origin: border-box !important;
  background-clip: padding-box, border-box !important;
}
.upload-requirement-dialog button.primary-button,
.upload-requirement-dialog button.primary-button.mat-mdc-button,
.upload-requirement-dialog button.primary-button.mat-button,
.upload-requirement-dialog .primary-button {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%) !important;
  border: 1px solid transparent !important;
  color: #FFFFFF !important;
  border-radius: 6px !important;
  padding: 12px 29px !important;
  min-height: 44px !important;
  box-shadow: none !important;
}
.upload-requirement-dialog button.outline-button,
.upload-requirement-dialog button.outline-button.mat-mdc-button,
.upload-requirement-dialog button.outline-button.mat-button,
.upload-requirement-dialog .outline-button {
  background: transparent !important;
  border: 1px solid #354491 !important;
  color: #80298F !important;
  border-radius: 6px !important;
  padding: 12px 16.78px !important;
  min-height: 44px !important;
  box-shadow: none !important;
}
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.primary-button,
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.mat-mdc-button-filled.primary-button,
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.mat-mdc-button-unelevated.primary-button,
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.primary-button .mat-mdc-button-persistent-ripple {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%) !important;
  color: #ffffff !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
}
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.outline-button,
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.mat-mdc-button-outlined.outline-button,
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.outline-button .mat-mdc-button-persistent-ripple {
  background: transparent !important;
  border: 1px solid #354491 !important;
  color: #80298F !important;
  box-shadow: none !important;
}
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.primary-button .mdc-button__label,
.upload-requirement-dialog ::ng-deep button.mat-mdc-button.outline-button .mdc-button__label {
  color: inherit !important;
}
.mat-tab-group .custom-tab {
  border-radius: 12px 12px 0 0;
  background: #F6F6F6;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
}
.custom-tab {
  margin-bottom: 20px;
}
.custom-tab .mdc-tab {
  max-width: 20%;
}
.custom-tab .mdc-tab.mat-mdc-tab.mat-focus-indicator.mdc-tab--active.mdc-tab-indicator--active {
  border-radius: 12px 12px 0 0;
  background: #FFF;
  box-shadow: 2px 11px 20px rgba(0, 0, 0, 0);
  width: fit-content;
  min-width: min-content;
}
.custom-tab .mdc-tab.mat-mdc-tab.mat-focus-indicator {
  border-radius: 12px 12px 0 0;
  background: #F6F6F6;
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05);
  min-width: min-content;
}
.batch-table-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.batch-table-wrapper {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.batch-table {
  display: flex;
  width: 100%;
  position: relative;
}
.batch-column {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.batch-column-1 {
  padding-right: 0;
}
.batch-column-2,
.batch-column-3,
.batch-column-4 {
  padding-left: 0;
}
.batch-column-5 {
  flex: 0 0 148px;
  width: 148px;
  padding-left: 0;
}
.batch-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.3;
  color: #7e807e;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 50px;
}
.batch-column-1 .batch-header {
  padding-left: 12px;
  padding-right: 12px;
}
.batch-column-5 .batch-header {
  padding-left: 8px;
}
.batch-row {
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #272525;
  background: #ffffff;
  display: flex;
  align-items: center;
  min-height: 53px;
  gap: 10px;
}
.batch-row.even {
  background: #f9f9ff;
}
.batch-column-1 .batch-row {
  padding-left: 12px;
  padding-right: 12px;
}
.batch-column-5 .batch-row {
  padding-left: 8px;
  justify-content: flex-start;
}
.batch-cell-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.3;
  color: #272525;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.batch-cell-text.batch-count {
  opacity: 0.56;
}
.batch-header .sort-icon {
  width: 16px;
  height: 16px;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}
.batch-header .sort-icon:hover {
  transform: scale(1.1);
}
.batch-row .action-icon {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: opacity 0.2s ease;
  object-fit: contain;
  display: block;
}
.batch-row .action-icon:hover {
  opacity: 0.7;
}
.batch-row button {
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: auto;
  width: 20px;
  height: 20px;
  line-height: 1;
}
.batch-row button:hover {
  background: transparent;
}
.batch-row button .mat-mdc-button-touch-target {
  display: none;
}
.batch-pagination {
  padding: 0;
  margin-top: 0;
}
@media (max-width: 1200px) {
  .batch-table {
    overflow-x: auto;
  }
  .batch-column {
    min-width: 150px;
  }
  .batch-column-5 {
    min-width: 100px;
  }
}
.batch-details-container {
  display: flex;
  min-height: 100vh;
  background-color: #f5f5f5;
}
.batch-details-container .main-content {
  flex: 1;
  margin-left: 240px;
  transition: margin-left 0.3s ease;
}
.batch-details-container .main-content.sidebar-collapsed {
  margin-left: 67px;
}
.batch-details-container .page-header {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
}
.batch-details-container .page-header .back-button {
  width: 24px;
  height: 24px;
  padding: 0;
  margin-right: 0;
}
.batch-details-container .page-header .back-button mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  color: #344391;
}
.batch-details-container .page-header .page-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #344391;
  margin: 0;
  line-height: 30px;
}
.batch-details-container .batch-info-card {
  background: #ffffff;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.batch-details-container .batch-info-card .batch-info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.batch-details-container .batch-info-card .batch-info-content .batch-number {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #000000;
  margin: 0;
  line-height: 22px;
}
.batch-details-container .batch-info-card .batch-info-content .batch-meta {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #646464;
  margin: 0;
  line-height: 1.3;
}
.batch-details-container .table-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 12px 0;
  margin-bottom: 16px;
}
.batch-details-container .table-wrapper {
  display: flex;
  width: 100%;
}
.batch-details-container .table-scroll {
  display: flex;
  overflow-x: auto;
  flex: 1;
  width: calc(100% - 123px);
}
.batch-details-container .table-column {
  display: flex;
  flex-direction: column;
  min-width: 128.875px;
  flex-shrink: 0;
}
.batch-details-container .table-column.table-column-wide {
  min-width: 169px;
}
.batch-details-container .actions-column {
  display: flex;
  flex-direction: column;
  width: 123px;
  border-left: 1px solid #d1d1d1;
  flex-shrink: 0;
}
.batch-details-container .actions-column .table-header {
  padding: 16px;
}
.batch-details-container .actions-column .table-row {
  padding: 16px;
  gap: 10px;
}
.batch-details-container .table-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 20px;
  align-items: start;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #7e807e;
  line-height: 1.3;
  box-sizing: border-box;
}
.batch-details-container .table-row {
  padding: 16px 20px;
  height: 53px;
  display: flex;
  align-items: center;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #272525;
  line-height: 1.3;
  background: #ffffff;
  box-sizing: border-box;
}
.batch-details-container .table-row.even {
  background: #f9f9ff;
}
.batch-details-container .action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  line-height: 1;
}
.batch-details-container .action-btn .action-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
  display: block;
}
.batch-details-container .action-btn ::ng-deep .mat-mdc-button-touch-target {
  display: none;
}
.batch-details-container .pagination-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 16px;
}
.batch-details-container .pagination-info {
  display: flex;
  align-items: center;
  gap: 13px;
}
.batch-details-container .pagination-info .rows-per-page-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #272525;
  line-height: 1.3;
}
.batch-details-container .pagination-info .page-size-select {
  border: 1px solid #9eb6c7;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #000000;
  width: 84px;
  height: 32px;
  background: #ffffff;
  cursor: pointer;
  line-height: 24px;
}
.batch-details-container .pagination-info .pagination-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #272525;
  line-height: 1.3;
}
.batch-details-container .pagination-controls {
  display: flex;
  gap: 5px;
  align-items: center;
}
.batch-details-container .pagination-btn {
  width: 32px;
  height: 32px;
  border: 1px solid #d4d4e5;
  border-radius: 32px;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  color: #333333;
  padding: 0;
  transition: all 0.2s ease;
}
.batch-details-container .pagination-btn mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  color: #3d3d3d;
}
.batch-details-container .pagination-btn.page-number.active {
  background:
    linear-gradient(
      135deg,
      #80298f 0%,
      #5a1a66 100%);
  border-color: #80298f;
  color: #ffffff;
}
.batch-details-container .pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.batch-details-container .pagination-btn:hover:not(:disabled):not(.active) {
  background: #f5f5f5;
}
.batch-details-container .pagination-btn.first-page,
.batch-details-container .pagination-btn.last-page,
.batch-details-container .pagination-btn.prev-page,
.batch-details-container .pagination-btn.next-page {
  border-radius: 32px;
}
.batch-info-card .batch-info-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.batch-info-card .batch-info-content .batch-number {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: #000000;
  margin: 0;
  padding: 8px 0;
  line-height: 22px;
}
.batch-info-card .batch-info-content .batch-meta {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 15px;
  color: #646464;
  margin: 0;
  line-height: 1.3;
}
.table-scroll-section {
  display: flex;
  overflow-x: auto;
  flex: 1;
}
.table-scroll-section::-webkit-scrollbar {
  height: 8px;
}
.table-scroll-section::-webkit-scrollbar-track {
  background: #f5f5f5;
  border-radius: 4px;
}
.table-scroll-section::-webkit-scrollbar-thumb {
  background: #d1d1d1;
  border-radius: 4px;
}
.table-scroll-section::-webkit-scrollbar-thumb:hover {
  background: #b1b1b1;
}
.table-column {
  display: flex;
  flex-direction: column;
  min-width: 128.875px;
  flex-shrink: 0;
}
.table-column.type-column {
  min-width: 128.875px;
}
.table-column.type-dependent-column {
  min-width: 169px;
}
.table-column .table-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #7e807e;
  line-height: 1.3;
  white-space: nowrap;
}
.table-column .table-header:first-child {
  padding-left: 20px;
}
.table-column .table-cell {
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #272525;
  line-height: 1.3;
  text-align: center;
  white-space: nowrap;
  background: #ffffff;
}
.table-column .table-cell.even-row {
  background: #f9f9ff;
}
.table-column .table-cell:first-child {
  padding-left: 20px;
  text-align: left;
}
.actions-column-fixed {
  display: flex;
  flex-direction: column;
  min-width: 123px;
  flex-shrink: 0;
  border-left: 1px solid #d1d1d1;
}
.actions-column-fixed .table-header {
  background: #ffffff;
  border-bottom: 1px solid #e5e5e5;
  padding: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  color: #7e807e;
  line-height: 1.3;
}
.actions-column-fixed .table-cell {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: #ffffff;
}
.actions-column-fixed .table-cell.even-row {
  background: #f9f9ff;
}
.actions-column-fixed .table-cell.action-cell {
  justify-content: flex-start;
}
.actions-column-fixed .action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: auto;
  line-height: 1;
}
.actions-column-fixed .action-btn mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #757575;
}
.actions-column-fixed .action-btn mat-icon:hover {
  color: #80298f;
}
.pagination-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  width: 100%;
  margin-top: 16px;
}
.pagination-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.pagination-left .rows-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #272525;
  line-height: 1.3;
}
.pagination-left .page-size-select {
  border: 1px solid #9eb6c7;
  border-radius: 8px;
  padding: 4px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #000000;
  line-height: 24px;
  letter-spacing: -0.14px;
  background: #ffffff;
  cursor: pointer;
  outline: none;
  width: 84px;
}
.pagination-left .page-size-select:focus {
  border-color: #80298f;
}
.pagination-left .pagination-info-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  color: #272525;
  line-height: 1.3;
}
.pagination-controls {
  display: flex;
  gap: 5px;
  align-items: center;
}
.user-management-container {
  display: flex;
  min-height: 100vh;
  width: 100%;
  background: #F5F5F5;
  position: relative;
}
.user-management-content {
  padding: 24px;
  width: 100%;
}
.user-table-card {
  background: #FFFFFF;
  border-radius: 8px;
  padding: 12px 0px;
  overflow: hidden;
}
.user-table-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.user-search-container {
  display: flex;
  align-items: center;
}
.user-search-box {
  position: relative;
  width: 233.81px;
  height: 44px;
  background: #FFFFFF;
  border: 2px solid #EEF4FA;
  border-radius: 8px;
  display: flex;
  align-items: center;
  padding: 0 13px;
  gap: 16px;
  transition: all 0.3s ease;
}
.user-search-box:hover {
  border-color: #80298F;
}
.user-search-box:focus-within {
  border-color: #80298F;
}
.user-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  color: #000000;
  background: transparent;
}
.user-search-input::placeholder {
  color: #B3C8DE;
}
.user-search-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  color: #E3EDF7;
  flex-shrink: 0;
}
.user-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-export-btn {
  min-width: 143px;
  height: 44px;
  padding: 12px 16.78px;
}
.user-add-btn {
  min-width: 148px;
  height: 44px;
  padding: 12px 40px;
}
.user-table-section {
  width: 100%;
}
.user-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.user-management-table {
  width: 100%;
  border-collapse: collapse;
}
.user-management-table th,
.user-management-table td {
  text-align: left;
}
.user-management-table .user-table-header {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 18.2px;
  color: #7E807E;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  position: relative;
}
.user-management-table .user-name-header {
  padding: 16px 20px;
  text-align: left;
}
.user-management-table .user-role-header {
  padding: 16px 8px;
  text-align: left;
}
.user-management-table .user-accounts-header {
  padding: 16px 8px;
  text-align: left;
}
.user-management-table .user-date-header {
  padding: 16px 8px;
  text-align: left;
}
.user-management-table .user-actions-header {
  padding: 16px 8px;
  width: 132px;
  text-align: left;
}
.user-management-table .user-table-cell {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  color: #272525;
  border: none;
}
.user-management-table .user-name-cell {
  padding: 16px 20px;
  text-align: left;
}
.user-management-table .user-role-cell {
  padding: 16px 8px;
  text-align: left;
}
.user-management-table .user-accounts-cell {
  padding: 16px 8px;
  text-align: left;
}
.user-management-table .user-date-cell {
  padding: 16px 8px;
  text-align: left;
}
.user-management-table .user-actions-cell {
  padding: 16px 8px;
  text-align: left;
}
.user-management-table .user-row-even {
  background: #F9F9FF;
}
.user-management-table .user-row-odd {
  background: #FFFFFF;
}
.user-view-btn {
  width: 24px;
  height: 24px;
  padding: 0;
}
.user-view-btn mat-icon {
  color: #666666;
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.user-view-btn:hover mat-icon {
  color: #80298F;
}
.user-pagination-section {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 249px;
  padding: 16px;
  margin-top: 12px;
}
.user-pagination-info {
  display: flex;
  align-items: center;
  gap: 24px;
}
.user-pagination-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  color: #272525;
}
.user-page-size-selector {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 13px;
  padding: 4px 8px;
  border: 1px solid #9EB6C7;
  border-radius: 8px;
  width: 84px;
  height: auto;
}
.user-page-size-select {
  border: none;
  outline: none;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: #000000;
  background: transparent;
  cursor: pointer;
  appearance: none;
  flex: 1;
}
.user-dropdown-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #8D26A2;
  flex-shrink: 0;
  pointer-events: none;
}
.user-results-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 20.8px;
  color: #272525;
}
.user-pagination-controls {
  display: flex;
  align-items: center;
  gap: 5px;
}
.user-pagination-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid #D4D4E5;
  border-radius: 32px;
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15.85px;
  color: #333333;
  cursor: pointer;
  transition: all 0.3s ease;
}
.user-pagination-btn mat-icon {
  font-size: 16px;
  width: 16px;
  height: 16px;
  color: #3D3D3D;
}
.user-pagination-btn .pagination-icon {
  width: 16px;
  height: 16px;
  display: block;
}
.user-pagination-btn:hover:not(:disabled):not(.user-page-active) {
  background: rgba(128, 41, 143, 0.05);
  border-color: #80298F;
}
.user-pagination-btn.user-page-active {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%);
  border: none;
  color: #FFFFFF;
}
.user-pagination-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed !important;
}
.user-pagination-btn:disabled .pagination-icon {
  opacity: 0.5;
}
.user-pagination-dots {
  font-family: "Montserrat", sans-serif;
  font-weight: 600;
  font-size: 13px;
  line-height: 15.85px;
  color: #333333;
  padding: 0 4px;
}
@media (max-width: 1440px) {
  .user-table-toolbar {
    gap: 500px;
  }
  .user-pagination-section {
    gap: 100px;
  }
}
@media (max-width: 1199px) {
  .user-table-toolbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .user-search-container {
    width: 100%;
  }
  .user-search-box {
    width: 100%;
  }
  .user-toolbar-actions {
    width: 100%;
    justify-content: flex-end;
  }
  .user-pagination-section {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .user-pagination-info {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .user-management-content {
    padding: 16px;
  }
  .user-table-toolbar {
    padding: 0 12px;
  }
  .user-toolbar-actions {
    flex-direction: column-reverse;
    gap: 12px;
  }
  .user-export-btn,
  .user-add-btn {
    width: 100%;
    min-width: unset;
  }
  .user-table-wrapper {
    overflow-x: scroll;
  }
  .user-pagination-section {
    padding: 12px;
  }
  .user-pagination-controls {
    flex-wrap: wrap;
    justify-content: center;
  }
}
@media (max-width: 480px) {
  .user-pagination-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .user-pagination-controls {
    width: 100%;
  }
}
.add-user-top-menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 19px 16px;
  background: #FFFFFF;
  border-bottom: 1px solid #F5F5F5;
  position: fixed;
  top: 0;
  left: 67px;
  right: 0;
  z-index: 1000;
}
.top-menu-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.add-user-top-menu .menu-icon-wrapper {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.add-user-top-menu .icon-background {
  width: 24px;
  height: 24px;
  background: #FFFFFF;
  border-radius: 4px;
  position: absolute;
}
.add-user-top-menu .menu-icon {
  width: 20px;
  height: 16px;
  position: relative;
  z-index: 1;
}
.menu-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: #80298F;
}
.top-menu-right {
  display: flex;
  align-items: center;
}
.user-profile {
  display: flex;
  align-items: center;
  gap: 44px;
}
.logout-icon {
  width: 24px;
  height: 24px;
  color: #80298F;
}
.add-user-header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 16px;
  background: #F5F5F5;
  margin-top: 72px;
}
.add-user-header button {
  display: flex;
  align-items: center;
}
.back-arrow {
  width: 24px;
  height: 24px;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.back-arrow:hover {
  opacity: 0.7;
}
.add-user-page-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: #344391;
  margin: 0;
}
.add-user-content {
  padding: 0 16px;
  background: #F5F5F5;
}
.add-user-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.add-user-form .form-section {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 16px;
  background: #FFFFFF;
  border-radius: 12px;
}
.add-user-form .section-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #344391;
  margin: 0;
}
.user-type-options {
  display: flex;
  align-items: center;
  gap: 58px;
}
.radio-option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 0;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.custom-radio {
  width: 24px;
  height: 24px;
  border: 1.5px solid #A4A4A4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.2s ease;
  flex-shrink: 0;
}
.custom-radio.selected {
  border-color: #80298F;
}
.radio-inner {
  width: 14px;
  height: 14px;
  background: #80298F;
  border-radius: 50%;
}
.radio-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 16px;
  color: #031931;
}
.radio-label.selected {
  font-weight: 500;
}
.add-user-form .form-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
.add-user-form .form-row-four {
  display: flex;
  gap: 16px;
}
.add-user-form .form-row-four .form-group {
  flex: 1;
  min-width: 0;
}
.add-user-form .form-row-two {
  display: flex;
  gap: 16px;
}
.add-user-form .form-row-two .form-group {
  flex: 1;
}
.add-user-form .form-row-single {
  display: flex;
  gap: 16px;
}
.add-user-form .form-row-single .form-group {
  width: 310.75px;
}
.add-user-form .form-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.medicard-grid {
  display: grid;
  grid-template-columns: 310.75px 1fr 310.75px;
  column-gap: 16px;
  row-gap: 16px;
  align-items: start;
}
.medicard-grid .grid-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.medicard-grid .grid-item.email,
.medicard-grid .grid-item.role {
  width: 310.75px;
}
.medicard-grid .grid-item.accounts {
  grid-column: 1/-1;
}
@media (max-width: 1024px) {
  .medicard-grid {
    grid-template-columns: 1fr;
  }
  .medicard-grid .grid-item.email,
  .medicard-grid .grid-item.role {
    width: 100%;
  }
}
.medicard-top-grid {
  display: grid;
  grid-template-columns: 310.75px 16px 310.75px;
  column-gap: 16px;
  align-items: start;
  margin-bottom: 8px;
}
.medicard-top-grid .grid-item.email,
.medicard-top-grid .grid-item.role {
  width: 310.75px;
}
.medicard-accounts-row {
  display: block;
  grid-column: 1/-1;
  margin-top: 0;
}
@media (max-width: 1024px) {
  .medicard-top-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .medicard-top-grid .grid-item.email,
  .medicard-top-grid .grid-item.role {
    width: 100%;
  }
  .medicard-accounts-row {
    margin-top: 8px;
  }
}
.corporate-accounts-group {
  flex: 1;
}
.add-user-form .form-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #000000;
}
.add-user-form .form-input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid #EEF4FA;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  background: #FFFFFF;
  outline: none;
  transition: border-color 0.2s ease;
}
.add-user-form .form-input::placeholder {
  color: rgba(3, 25, 49, 0.5);
}
.add-user-form .form-input:focus {
  border-color: #80298F;
}
.add-user-form .form-input.error {
  border-color: #DC3545;
}
.add-user-form .error-message {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #DC3545;
  margin-top: 4px;
}
.add-user-form .role-select,
.add-user-form .accounts-select {
  width: 100%;
}
.add-user-form .role-select ::ng-deep .mat-mdc-form-field-flex,
.add-user-form .accounts-select ::ng-deep .mat-mdc-form-field-flex {
  padding: 14px 16px;
  border: 2px solid #EEF4FA;
  border-radius: 8px;
  background: #FFFFFF;
}
.add-user-form .role-select ::ng-deep .mat-mdc-form-field-infix,
.add-user-form .accounts-select ::ng-deep .mat-mdc-form-field-infix {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  padding: 0;
  border: none;
}
.add-user-form .role-select ::ng-deep .mat-mdc-text-field-wrapper,
.add-user-form .accounts-select ::ng-deep .mat-mdc-text-field-wrapper {
  padding: 0;
}
.add-user-form .role-select ::ng-deep .mat-mdc-form-field-subscript-wrapper,
.add-user-form .accounts-select ::ng-deep .mat-mdc-form-field-subscript-wrapper {
  display: none;
}
.add-user-form .role-select ::ng-deep .mdc-notched-outline,
.add-user-form .accounts-select ::ng-deep .mdc-notched-outline {
  display: none;
}
.add-user-form .role-select ::ng-deep .mat-mdc-select-arrow,
.add-user-form .accounts-select ::ng-deep .mat-mdc-select-arrow {
  display: none;
}
.add-user-form .role-select ::ng-deep .mat-mdc-select-value,
.add-user-form .accounts-select ::ng-deep .mat-mdc-select-value {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
}
.add-user-form .role-select ::ng-deep .mat-mdc-select-placeholder,
.add-user-form .accounts-select ::ng-deep .mat-mdc-select-placeholder {
  color: rgba(3, 25, 49, 0.5);
}
.custom-select-wrapper {
  position: relative;
  width: 100%;
}
.custom-select-wrapper.accounts-wrapper {
  position: relative;
}
.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
  z-index: 1;
}
.accounts-wrapper .select-arrow {
  top: 20px;
  transform: none;
}
.accounts-display {
  position: relative;
  width: 100%;
}
.accounts-field-content {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  position: relative;
  padding: 10px 0;
}
.accounts-field-content .selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
}
.accounts-field-content .mat-mdc-select {
  flex: 1;
  min-width: 150px;
}
.selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  position: relative;
  z-index: 2;
}
.selected-chips .chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: #EBEBEB;
  border-radius: 16px;
}
.selected-chips .chip-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  text-align: center;
  color: #031931;
}
.selected-chips .chip-close-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.2s ease;
}
.selected-chips .chip-close-btn:hover {
  opacity: 0.7;
}
.selected-chips .chip-close-icon {
  width: 12px;
  height: 12px;
}
.add-user-form .form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 16px;
  margin-top: 16px;
}
.add-user-form .cancel-btn {
  width: 143px;
  height: 44px;
  min-height: 44px;
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%);
  border: 1px solid transparent;
  border-image:
    linear-gradient(
      180deg,
      #354491 0%,
      #7C338C 100%) 1;
  border-radius: 6px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
  -webkit-background-clip: text;
  background-clip: text;
  padding: 12px 16px;
}
.add-user-form .cancel-btn:hover {
  opacity: 0.9;
}
.add-user-form .create-btn {
  width: 148px;
  height: 44px;
  min-height: 44px;
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%);
  border: none;
  border-radius: 6px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  text-align: center;
  color: #FFFFFF;
  cursor: pointer;
  transition: opacity 0.2s ease;
  padding: 10px;
}
.add-user-form .create-btn:hover {
  opacity: 0.9;
}
.add-user-form .create-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.details-card {
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  padding: 16px 16px 8px 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.details-card .section-title {
  font-family: "Poppins", sans-serif;
  font-size: 18px;
  font-weight: 600;
  line-height: 22px;
  margin: 0;
  color: #344391;
  padding-top: 18px;
}
.details-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
}
@media (max-width: 1024px) {
  .add-user-form .form-row {
    flex-direction: column;
  }
  .add-user-form .form-group {
    width: 100%;
  }
}
@media (max-width: 768px) {
  .add-user-content {
    padding: 12px;
  }
  .add-user-form .form-section {
    padding: 12px;
  }
  .user-type-options {
    gap: 24px;
  }
  .add-user-form .form-actions {
    flex-direction: column-reverse;
  }
  .add-user-form .cancel-btn,
  .add-user-form .create-btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .user-type-options {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }
  .add-user-header {
    padding: 16px 12px;
  }
  .add-user-header .page-title {
    font-size: 18px;
  }
}
.back-arrow-btn,
.radio-option,
.filter-icon-btn,
.sort-icon-btn {
  background: transparent !important;
  border: none !important;
}
.role-select .mdc-text-field,
.accounts-select .mdc-text-field {
  height: auto !important;
  align-items: anchor-center !important;
}
@media (max-width: 1024px) {
  .details-grid {
    gap: 24px;
  }
  .detail-item {
    width: calc(50% - 12px);
  }
}
@media (max-width: 600px) {
  .details-grid {
    flex-direction: column;
  }
  .detail-item {
    width: 100%;
  }
  .accounts-table th,
  .accounts-table td {
    padding: 12px 12px;
  }
}
.invoices-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.invoice-stats-section {
  display: flex;
  gap: 16px;
}
.invoice-stat-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 22.5px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  width: 265.6px;
  height: 112px;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.invoice-stat-icon-wrapper {
  width: 67px;
  height: 67px;
  flex-shrink: 0;
}
.invoice-stat-icon-circle {
  width: 67px;
  height: 67px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.invoice-stat-icon-blue {
  background: rgb(232, 246, 253);
}
.invoice-stat-icon-purple {
  background: rgb(248, 232, 253);
}
.invoice-stat-icon {
  width: 32px;
  height: 32px;
  color: #FFFFFF;
}
.invoice-stat-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.invoice-stat-number {
  font-family: "Poppins", sans-serif;
  font-size: 40px;
  font-weight: 600;
  line-height: 52px;
  color: #000000;
  margin: 0;
}
.invoice-stat-label {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 21px;
  color: #90A6B9;
  margin: 0;
}
.invoice-table-card {
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px 0;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.invoice-actions-toolbar {
  display: flex;
  justify-content: end;
  align-items: center;
  padding: 16px 16px;
  gap: 16px;
  border-bottom: none;
}
.invoice-actions-right {
  display: flex;
  gap: 16px;
  align-items: center;
}
.invoice-bulk-download-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding-left: 16px;
  padding-right: 16px;
}
.invoice-download-all-btn {
  background: transparent;
  border: 1px solid #354491;
  border-radius: 6px;
  padding: 12px 36.78px !important;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  color: #80298F;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.3s ease;
}
.invoice-upload-btn {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%) !important;
  border: 1px solid !important;
  border-image-source:
    linear-gradient(
      180deg,
      #354491 0%,
      #7C338C 100%) !important;
  border-radius: 6px !important;
  padding: 12px 0 !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 19.5px !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.3s ease !important;
  width: 175px !important;
}
.action-btn-icon {
  width: 20px;
  height: 20px;
}
.invoice-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.invoice-table {
  width: 100%;
  background: #FFFFFF;
  border-collapse: separate;
  border-spacing: 0;
}
.invoice-table .mat-mdc-header-row {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  height: 50px;
}
.invoice-table .mat-mdc-row {
  border-bottom: none;
  height: 53px;
}
.invoice-table .mat-mdc-row:hover {
  background-color: rgba(128, 41, 143, 0.04);
}
.invoice-table .mat-mdc-row:not(:last-child) {
  border-bottom: 1px solid #E5E5E5;
}
.invoice-table .invoice-table-header {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #7E807E;
  line-height: 18.2px;
  height: 50px;
  vertical-align: middle;
}
.invoice-table .invoice-table-header:first-child {
  padding-left: 20px;
}
.invoice-table .invoice-table-cell {
  padding: 16px 8px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #272525;
  line-height: 20.8px;
  border-bottom: 1px solid #E5E5E5;
  height: 53px;
  vertical-align: middle;
}
.invoice-table .invoice-table-cell:first-child {
  padding-left: 20px;
}
.invoice-table .even-row {
  background-color: #FFFFFF !important;
}
.invoice-table .even-row .invoice-table-cell {
  background-color: #FFFFFF;
}
.invoice-table .odd-row {
  background-color: #F9F9FF !important;
}
.invoice-table .odd-row .invoice-table-cell {
  background-color: #F9F9FF;
}
.invoice-table .invoice-header-content {
  display: flex;
  align-items: center;
  gap: 6px;
}
.invoice-table .invoice-sort-icon {
  width: 16px;
  height: 16px;
}
.invoice-table .invoice-file-name {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #0497EA;
  line-height: 20.8px;
}
.invoice-table .invoice-action-header {
  text-align: left;
}
.invoice-table .invoice-action-cell {
  display: flex;
  gap: 8px;
  align-items: center;
  border-left: none;
}
.invoice-table .invoice-action-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: 24px;
  line-height: 24px;
}
.invoice-table .invoice-action-btn .mat-mdc-button-persistent-ripple {
  border-radius: 50%;
}
.invoice-table .invoice-action-icon {
  width: 24px;
  height: 24px;
}
.invoice-pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px 0;
  border-top: 1px solid #E5E5E5;
  margin-top: 16px;
}
.invoice-pagination-left {
  display: flex;
  align-items: center;
  gap: 13px;
}
.invoice-pagination-right {
  display: flex;
  align-items: center;
  gap: 5px;
}
.invoice-rows-per-page {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #272525;
  line-height: 21px;
}
.invoice-page-size-select {
  width: 84px;
  height: 32px;
}
.invoice-page-size-select .mat-mdc-form-field-wrapper {
  padding-bottom: 0;
}
.invoice-page-size-select .mat-mdc-text-field-wrapper {
  padding: 0;
  height: 32px;
}
.invoice-page-size-select .mat-mdc-form-field-infix {
  padding: 4px 8px;
  min-height: 32px;
  border: 1px solid #9EB6C7;
  border-radius: 8px;
  display: flex;
  align-items: center;
}
.invoice-page-size-select .mat-mdc-select {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #000000;
}
.invoice-page-size-select .mat-mdc-select-value {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  color: #000000;
}
.invoice-page-size-select .mat-mdc-select-arrow-wrapper {
  height: 16px;
}
.invoice-page-size-select .mat-mdc-select-arrow {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #3D3D3D;
}
.invoice-page-size-select .mdc-notched-outline {
  display: none;
}
.invoice-pagination-label {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  color: #272525;
  line-height: 21px;
}
.invoice-custom-paginator {
  background: transparent;
}
.invoice-custom-paginator .mat-mdc-paginator-container {
  padding: 0;
  min-height: 32px;
  justify-content: flex-end;
}
.invoice-custom-paginator .mat-mdc-paginator-page-size {
  display: none;
}
.invoice-custom-paginator .mat-mdc-paginator-range-label {
  display: none;
}
.invoice-custom-paginator .mat-mdc-paginator-range-actions {
  gap: 5px;
  margin-left: 0;
}
.invoice-custom-paginator .mat-mdc-icon-button {
  width: 32px;
  height: 32px;
  padding: 4px;
  border: 1px solid #D4D4E5;
  border-radius: 50%;
  background: transparent;
}
.invoice-custom-paginator .mat-mdc-icon-button:hover {
  background: rgba(128, 41, 143, 0.04);
}
.invoice-custom-paginator .mat-mdc-icon-button[disabled] {
  opacity: 0.5;
}
.invoice-custom-paginator .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
  border-radius: 50%;
}
.invoice-custom-paginator .mat-mdc-paginator-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: #3D3D3D;
}
.invoice-page-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid #D4D4E5;
  border-radius: 50%;
  background: transparent;
  line-height: 32px;
}
.invoice-page-btn:hover:not([disabled]) {
  background: rgba(128, 41, 143, 0.04);
}
.invoice-page-btn[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.invoice-page-btn mat-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: #3D3D3D;
  line-height: 16px;
}
.invoice-page-numbers {
  display: flex;
  gap: 5px;
  align-items: center;
  margin: 0;
}
.invoice-page-number-btn {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 0;
  border: 1px solid #D4D4E5;
  border-radius: 50%;
  background: transparent;
  font-family: "Montserrat", sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #333333;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.invoice-page-number-btn:hover:not(.active):not(.ellipsis) {
  background: rgba(128, 41, 143, 0.04);
}
.invoice-page-number-btn.active {
  background:
    linear-gradient(
      135deg,
      #80298F 0%,
      #9B44B3 100%);
  color: #FFFFFF;
  border-color: transparent;
}
.invoice-page-number-btn.ellipsis {
  border: none;
  cursor: default;
  pointer-events: none;
}
@media (max-width: 1440px) {
  .invoice-stats-section {
    flex-wrap: wrap;
  }
  .invoice-stat-card {
    flex: 1;
    min-width: 250px;
  }
}
@media (max-width: 1024px) {
  .invoice-actions-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .invoice-actions-right {
    width: 100%;
    justify-content: space-between;
  }
  .invoice-bulk-download-btn,
  .invoice-download-all-btn,
  .invoice-upload-btn {
    flex: 1;
  }
  .invoice-pagination-container {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .invoice-stat-card {
    width: 100%;
  }
  .invoice-stats-section {
    flex-direction: column;
  }
  .invoice-table .invoice-table-header,
  .invoice-table .invoice-table-cell {
    padding: 12px 8px;
    font-size: 14px;
  }
  .invoice-table .invoice-table-header:first-child,
  .invoice-table .invoice-table-cell:first-child {
    padding-left: 12px;
  }
  .invoice-pagination-left {
    flex-wrap: wrap;
    gap: 12px;
  }
}
@media (max-width: 480px) {
  .invoice-table-wrapper {
    overflow-x: auto;
  }
  .invoice-table {
    min-width: 800px;
  }
  .invoice-actions-right {
    flex-direction: column;
  }
}
.action-memos-card {
  background: #FFFFFF;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.action-memos-toolbar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 16px 24px;
  background: #FFFFFF;
}
.upload-action-memo-btn {
  background:
    linear-gradient(
      90deg,
      #344391 0%,
      #7B328C 100%) !important;
  border: 1px solid !important;
  border-image-source:
    linear-gradient(
      180deg,
      #354491 0%,
      #7C338C 100%) !important;
  border-radius: 6px !important;
  padding: 12px 16px !important;
  font-family: "Poppins", sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  line-height: 19.5px !important;
  color: #FFFFFF !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  transition: all 0.3s ease !important;
  width: auto;
}
.upload-action-memo-btn:hover {
  background: #6B2279 !important;
}
.action-memos-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.action-memos-table .mat-mdc-header-row {
  background: #FFFFFF;
}
.action-memos-table th.mat-mdc-header-cell {
  font-family: "Poppins", sans-serif;
  font-size: 13px;
  font-weight: 400;
  color: #7E807E;
  padding: 12px 20px;
  line-height: 18px;
  border-bottom: 1px solid #E5E5E5;
}
.action-memos-table td.mat-mdc-cell {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #272525;
  padding: 14px 20px;
  line-height: 20px;
  border-bottom: none;
}
.action-memos-table tr.memo-row:nth-child(even) td {
  background: #F9F9FF;
}
.action-memos-table tr.memo-row:nth-child(odd) td {
  background: #FFFFFF;
}
.memo-link {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: #0497EA;
  text-decoration: underline;
  cursor: pointer;
}
.action-memos-table .invoice-action-header {
  text-align: right;
  padding-right: 38px !important;
}
.action-memos-table .invoice-action-cell {
  display: flex;
  gap: 0px;
  align-items: center;
  justify-content: flex-end;
  padding-right: 20px;
}
.action-memos-table .invoice-action-btn {
  width: 20px;
  height: 20px;
  padding: 0;
  min-width: 20px;
  line-height: 20px;
  background: transparent;
  border: none;
}
.action-memos-table .invoice-action-btn .mat-mdc-button-persistent-ripple {
  display: none;
}
.action-memos-table .invoice-action-icon {
  width: 24px;
  height: 24px;
  display: block;
  cursor: pointer;
  opacity: 0.7;
}
.action-memos-table .invoice-action-icon:hover {
  opacity: 1;
}
.action-memos-card .mat-mdc-paginator {
  border-top: 1px solid #E5E5E5;
  padding: 8px 16px;
  background: #FFFFFF;
}
.action-memos-card .mat-mdc-paginator-container {
  min-height: 32px;
}
.action-memos-card .mat-mdc-paginator-page-size {
  display: none;
}
.action-memos-card .mat-mdc-paginator-range-label {
  display: none;
}
.action-memos-card .mat-mdc-icon-button {
  width: 40px;
  height: 40px;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.action-memos-card .mat-mdc-icon-button:hover {
  background: rgba(128, 41, 143, 0.04);
}
.action-memos-card .mat-mdc-paginator-icon {
  font-size: 16px;
  color: #3D3D3D;
}
.custom-tab.mat-mdc-tab-group {
  margin-bottom: 0;
}
.custom-tab .mat-mdc-tab {
  min-width: 140px;
}
.custom-tab .mat-mdc-tab:not(.mdc-tab--active) {
  background: #F5F5F5;
  border: 1px solid #E5E5E5;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.custom-tab .mdc-tab--active {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
}
.custom-tab .mat-mdc-tab-labels {
  gap: 0;
  border-bottom: 1px solid #C2C2C2;
  margin-bottom: 12px;
}
.custom-tab .mdc-tab__text-label {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  color: #727272 !important;
}
.admin-batch-list-wrapper {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.filter-icon {
  cursor: pointer;
}
.admin-batchlist-action {
  justify-content: flex-start !important;
}
.mat-mdc-tab-label-container {
  border: none !important;
}
.batch-list-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 0 8px;
}
.batch-list-toolbar .toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}
.batch-list-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
}
.search-box-wrapper {
  position: relative;
  width: 233.81px;
  height: 44px;
}
.batch-search-input {
  width: 100%;
  height: 100%;
  padding: 10px 40px 10px 13px;
  border: 2px solid #EEF4FA;
  border-radius: 8px;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  color: #000000;
  outline: none;
  background: #FFFFFF;
  transition: border-color 0.3s ease;
}
.batch-search-input::placeholder {
  color: #B3C8DE;
  font-weight: 500;
}
.batch-search-input:focus {
  border-color: #80298F;
}
.search-icon-img {
  position: absolute;
  right: 13px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  pointer-events: none;
}
.export-excel-btn,
.export-btn {
  height: 44px;
  min-width: 143px;
  padding: 12px 16.78px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}
.admin-batch-list-wrapper .batch-table-container {
  background: #FFFFFF;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
}
.batch-list-table {
  width: 100%;
  border-collapse: collapse;
}
.batch-list-table .mat-mdc-header-row {
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
}
.batch-list-table .mat-mdc-row {
  border-bottom: none;
  transition: background-color 0.2s ease;
}
.batch-list-table .mat-mdc-row:hover {
  background-color: rgba(128, 41, 143, 0.04) !important;
}
.batch-list-table .table-header-cell {
  padding: 16px 12px;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 18.2px;
  color: #7E807E;
  border-bottom: 1px solid #E5E5E5;
  background: #FFFFFF;
}
.batch-list-table .table-header-cell:first-child {
  padding-left: 12px;
}
.batch-list-table .table-body-cell {
  padding: 16px 12px;
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  color: #272525;
  border-bottom: none;
}
.batch-list-table .table-body-cell:first-child {
  padding-left: 12px;
}
.batch-list-table .even-row {
  background-color: #FFFFFF !important;
}
.batch-list-table .odd-row {
  background-color: #F9F9FF !important;
}
.batch-list-table .header-with-sort {
  display: flex;
  align-items: center;
  gap: 6px;
}
.batch-list-table .sort-icon-img {
  width: 16px;
  height: 16px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.batch-list-table .sort-icon-img:hover {
  opacity: 0.7;
}
.batch-list-table .action-header {
  text-align: left;
}
.batch-list-table .action-cell {
  text-align: left;
}
.batch-list-table .action-buttons {
  display: flex;
  gap: 10px;
  align-items: center;
}
.batch-list-table .action-icon-btn {
  width: 24px;
  height: 24px;
  min-width: 24px;
  padding: 0;
  line-height: 24px;
  background: transparent;
  border: none;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.batch-list-table .action-icon-btn:hover {
  opacity: 0.7;
  background: transparent;
}
.batch-list-table .action-icon-btn .mat-mdc-button-persistent-ripple {
  display: none;
}
.batch-list-table .action-icon-img {
  width: 24px;
  height: 24px;
  display: block;
}
.batch-pagination-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #FFFFFF;
  border-top: 1px solid #E5E5E5;
  margin-top: 0;
}
.pagination-right {
  display: flex;
  align-items: center;
}
.rows-per-page-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  color: #272525;
}
.page-size-dropdown {
  position: relative;
  width: 84px;
  height: 32px;
  border: 1px solid #9EB6C7;
  border-radius: 8px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  padding: 0 8px;
}
.page-size-select {
  width: 100%;
  height: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #000000;
  cursor: pointer;
  appearance: none;
  padding-right: 20px;
}
.dropdown-arrow-img {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 10px;
  height: 5px;
  pointer-events: none;
}
.showing-results-text {
  font-family: "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 20.8px;
  color: #272525;
}
.custom-batch-paginator {
  background: transparent;
}
.custom-batch-paginator .mat-mdc-paginator-container {
  padding: 0;
  min-height: 32px;
  justify-content: flex-end;
}
.custom-batch-paginator .mat-mdc-paginator-page-size {
  display: none;
}
.custom-batch-paginator .mat-mdc-paginator-range-label {
  display: none;
}
.custom-batch-paginator .mat-mdc-paginator-range-actions {
  gap: 5px;
  margin-left: 0;
}
.custom-batch-paginator .mat-mdc-icon-button {
  width: 32px;
  height: 32px;
  min-width: 32px;
  padding: 4px;
  border: 1px solid #D4D4E5;
  border-radius: 50%;
  background: transparent;
  transition: background-color 0.3s ease;
}
.custom-batch-paginator .mat-mdc-icon-button:hover:not([disabled]) {
  background: rgba(128, 41, 143, 0.04);
}
.custom-batch-paginator .mat-mdc-icon-button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.custom-batch-paginator .mat-mdc-icon-button .mat-mdc-button-persistent-ripple {
  border-radius: 50%;
}
.custom-batch-paginator .mat-mdc-paginator-icon {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: #3D3D3D;
}
@media (max-width: 1024px) {
  .batch-list-toolbar {
    flex-direction: column;
    align-items: stretch;
  }
  .toolbar-left,
  .toolbar-right {
    width: 100%;
    justify-content: space-between;
  }
  .search-box-wrapper {
    width: 100%;
  }
  .export-excel-btn,
  .export-btn {
    flex: 1;
  }
  .batch-pagination-container {
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
  }
}
@media (max-width: 768px) {
  .batch-list-table .table-header-cell,
  .batch-list-table .table-body-cell {
    padding: 12px 8px;
    font-size: 14px;
  }
  .batch-list-table .table-header-cell:first-child,
  .batch-list-table .table-body-cell:first-child {
    padding-left: 8px;
  }
  .pagination-left {
    flex-wrap: wrap;
    gap: 12px;
  }
  .toolbar-right {
    flex-direction: column;
  }
  .export-excel-btn,
  .export-btn {
    width: 100%;
  }
}
@media (max-width: 480px) {
  .batch-table-container {
    overflow-x: auto;
  }
  .batch-list-table {
    min-width: 800px;
  }
  .admin-batch-list-wrapper {
    margin-top: 12px;
    gap: 12px;
  }
  .batch-pagination-container {
    padding: 12px;
  }
}
.approve-login-dialog .mat-mdc-form-field-subscript-wrapper {
  display: none;
}
.approve-login-dialog .dialog-container {
  width: 880px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.approve-login-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.approve-login-dialog .dialog-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #344391;
  margin: 0;
}
.approve-login-dialog .close-button {
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: 24px;
}
.approve-login-dialog .close-button .close-icon {
  color: #FF2828;
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.approve-login-dialog .dialog-description {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 21px;
  color: #272525;
  margin: 0;
}
.approve-login-dialog .approval-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.approve-login-dialog .form-field-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.approve-login-dialog .field-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #000000;
  margin-bottom: 2px;
}
.approve-login-dialog .corporate-accounts-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 8px;
}
.approve-login-dialog .selected-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 32px;
}
.approve-login-dialog .account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EBEBEB;
  border-radius: 16px;
  padding: 8px 12px;
}
.approve-login-dialog .chip-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  text-align: center;
}
.approve-login-dialog .chip-remove-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.approve-login-dialog .chip-close-icon {
  color: #757575;
  font-size: 18px;
  line-height: 13px;
  font-weight: 400;
}
.approve-login-dialog .dropdown-field {
  width: 100%;
}
.approve-login-dialog .dropdown-field .mat-mdc-form-field {
  width: 100%;
}
.approve-login-dialog .dropdown-field .mat-mdc-text-field-wrapper {
  background: #FFFFFF;
  border: 2px solid #EEF4FA;
  border-radius: 8px;
  padding: 14px 16px;
}
.approve-login-dialog .dropdown-field .mat-mdc-form-field-infix {
  padding: 0;
  min-height: 24px;
}
.approve-login-dialog .dropdown-field .mat-mdc-select {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
}
.approve-login-dialog .two-column-row {
  display: flex;
  gap: 16px;
}
.approve-login-dialog .two-column-row .form-field-group {
  flex: 1;
}
.approve-login-dialog .error-message {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
  color: #D32F2F;
  margin-top: 4px;
}
.approve-login-dialog .dialog-actions {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
.approve-login-dialog .cancel-btn {
  width: 143px;
  height: 44px;
  padding: 12px 16.78px;
}
.approve-login-dialog .confirm-button {
  width: 200px;
  height: 44px;
  background: #008800 !important;
  border: none;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
.approve-login-dialog .confirm-button:hover {
  background: #007700;
}
.approve-login-dialog .confirm-button:active {
  background: #006600;
}
.approve-login-dialog .confirm-button:disabled {
  background: #CCCCCC;
  cursor: not-allowed;
}
.approve-login-dialog-overlay.mat-mdc-dialog-panel {
  max-width: 100% !important;
}
.approve-login-dialog-overlay .mat-mdc-dialog-container {
  padding: 0;
  border-radius: 12px;
  box-shadow:
    0 11px 15px -7px rgba(0, 0, 0, 0.2),
    0 24px 38px 3px rgba(0, 0, 0, 0.14),
    0 9px 46px 8px rgba(0, 0, 0, 0.12);
}
.approve-login-dialog-overlay .mat-mdc-dialog-surface {
  border-radius: 12px;
}
.reject-login-dialog .dialog-container {
  width: 498px;
  max-height: 90vh;
  overflow-y: auto;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}
.reject-login-dialog .dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.reject-login-dialog .dialog-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #344391;
  margin: 0;
}
.reject-login-dialog .close-button {
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: 24px;
}
.reject-login-dialog .close-button .close-icon {
  color: #FF2828;
  font-size: 24px;
  width: 24px;
  height: 24px;
}
.reject-login-dialog .dialog-description {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  color: #222529;
  margin: 0;
}
.reject-login-dialog .dialog-description p {
  margin: 0;
}
.reject-login-dialog .dialog-actions {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: flex-end;
}
.reject-login-dialog .cancel-btn {
  width: 143px;
  height: 44px;
  padding: 12px 16.78px;
}
.reject-login-dialog .reject-button {
  width: 170px;
  height: 44px;
  background: #FF2828 !important;
  border: none;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  padding: 10px 16px;
}
.reject-login-dialog .reject-button:hover {
  background: #E02020;
}
.reject-login-dialog .reject-button:active {
  background: #CC1C1C;
}
.reject-login-dialog .reject-button:disabled {
  background: #CCCCCC;
  cursor: not-allowed;
}
.reject-login-dialog-overlay.mat-mdc-dialog-panel {
  max-width: 100% !important;
}
.reject-login-dialog-overlay .mat-mdc-dialog-container {
  padding: 0;
  border-radius: 12px;
  box-shadow:
    0 11px 15px -7px rgba(0, 0, 0, 0.2),
    0 24px 38px 3px rgba(0, 0, 0, 0.14),
    0 9px 46px 8px rgba(0, 0, 0, 0.12);
}
.reject-login-dialog-overlay .mat-mdc-dialog-surface {
  border-radius: 12px;
}
.user-details-wrapper {
  background: #F5F5F5;
}
.user-details-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px;
  height: 100vh;
}
.user-details-back-header {
  display: flex;
  align-items: center;
  gap: 0px;
}
.user-details-back-header .back-arrow-icon {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  cursor: pointer;
}
.user-details-page-title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: 20px;
  line-height: 30px;
  color: #344391;
  margin: 0;
}
.user-info-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 8px 16px;
  gap: 231px;
}
.user-info-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.user-name-status {
  display: flex;
  align-items: center;
  gap: 16px;
}
.user-name-title {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-size: 18px;
  line-height: 22px;
  color: #000000;
  margin: 0;
  padding: 8px 0;
}
.status-pending {
  background: #F7E388;
  color: #453900;
  padding: 5px 9px;
  border-radius: 16px;
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
}
.user-action-buttons {
  display: flex;
  gap: 16px;
  align-items: center;
}
.confirm-rejection-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 201px;
  height: 44px;
  background: #FF2828;
  border: none;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  cursor: pointer;
  padding: 10px 16px;
  transition: all 0.3s ease;
}
.confirm-rejection-btn .btn-icon {
  width: 24px;
  height: 24px;
}
.confirm-rejection-btn:hover {
  background: #E02020;
}
.confirm-rejection-btn:active {
  background: #CC1C1C;
}
.confirm-approval-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 200px;
  height: 44px;
  background: #008800;
  border: none;
  border-radius: 6px;
  color: #FFFFFF;
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 15px;
  line-height: 19.5px;
  cursor: pointer;
  padding: 10px 16px;
  transition: all 0.3s ease;
}
.confirm-approval-btn .btn-icon {
  width: 22px;
  height: 22px;
}
.confirm-approval-btn:hover {
  background: #007700;
}
.confirm-approval-btn:active {
  background: #006600;
}
.user-details-card {
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: #FFFFFF;
  border-radius: 12px;
  padding: 16px;
}
.card-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.basic-details-row {
  display: flex;
  gap: 91.33px;
  height: 43px;
}
.assignment-section {
  display: flex;
  flex-direction: row;
  gap: 16px;
}
.assignment-section .form-field-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}
.field-label {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  color: #000000;
}
.corporate-accounts-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.account-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  background: #EBEBEB;
  border-radius: 16px;
  padding: 8px 12px;
}
.chip-text {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  text-align: center;
}
.chip-remove-btn {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}
.chip-close-icon {
  color: #757575;
  font-size: 18px;
  line-height: 1;
  font-weight: 400;
}
.dropdown-field {
  width: 100%;
}
.dropdown-field .mat-mdc-form-field {
  width: 100%;
}
.dropdown-field .mat-mdc-text-field-wrapper {
  background: #FFFFFF;
  border: 2px solid #EEF4FA;
  border-radius: 8px;
  padding: 14px 16px;
}
.dropdown-field .mat-mdc-form-field-infix {
  padding: 0;
  min-height: 24px;
}
.dropdown-field .mat-mdc-select {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
}
.corporate-dropdown .mat-mdc-form-field-flex {
  align-items: center;
  gap: 8px;
}
.two-column-row {
  display: flex;
  gap: 16px;
}
.two-column-row .form-field-group {
  flex: 1;
}
.attached-documents-section {
  width: 637px;
}
.documents-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.document-item {
  display: flex;
  align-items: center;
  gap: 16px;
  background: #FFFFFF;
  border: 1px solid #E6E6E6;
  border-radius: 12px;
  padding: 16px;
}
.document-icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: #FFE5F9;
  border-radius: 8px;
  padding: 10px;
}
.document-icon {
  width: 20px;
  height: 20px;
}
.document-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.document-name {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #272525;
}
.document-size {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-size: 12px;
  line-height: 16px;
  color: #9D9D9D;
}
.document-download-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  min-width: 24px;
}
.document-download-btn img {
  width: 24px;
  height: 24px;
}
@media (max-width: 1024px) {
  .user-info-header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .user-action-buttons {
    width: 100%;
    flex-wrap: wrap;
  }
  .basic-details-row {
    flex-direction: column;
    height: auto;
    gap: 16px;
  }
  .assignment-section {
    flex-direction: column;
  }
  .attached-documents-section {
    width: 100%;
  }
  .mobile-sidebarclose {
    display: block;
  }
  .top-header.sidebar-collapsed {
    width: 100% !important;
    z-index: 1;
  }
  .sidebar.collapsed {
    transform: translateX(0%) !important;
  }
  .stats-section {
    flex-wrap: wrap;
  }
}
@media (max-width: 768px) {
  .two-column-row {
    flex-direction: column;
  }
  .confirm-rejection-btn,
  .confirm-approval-btn {
    width: 100%;
  }
  .dropdown-field .mat-mdc-text-field-wrapper .mat-mdc-form-field-infix {
    min-height: 24px !important;
  }
}
.mat-mdc-tab .mdc-tab-indicator__content--underline {
  border-color: #1C3F93 !important;
  border-top-width: 1px !important;
}
.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {
  color: #000000 !important;
}
.mat-tooltip {
  font-family: "Poppins", sans-serif !important;
}
.admin-user-detail-page {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-family: "Poppins", sans-serif;
}
.aud-page-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 4px;
}
.aud-back-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  padding: 0;
  display: flex !important;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.aud-back-btn:hover {
  opacity: 0.7;
}
.aud-page-title {
  font-size: 20px;
  font-weight: 600;
  line-height: 21px;
  color: #344391;
  margin: 0;
}
.aud-user-header-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.aud-user-left {
  display: flex;
  align-items: center;
}
.aud-user-name {
  font-size: 16px;
  font-weight: 700;
  line-height: 21px;
  margin: 0 12px 0 0;
}
.status-active {
  background: #D9F8C9;
  color: #2E7D32;
}
.status-inactive {
  background: #F4F4F4;
  color: #555555;
}
.aud-details-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.aud-section-title {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #344391;
  margin: 0 0 16px 0;
}
.aud-basic-grid {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 24px 56px;
}
.aud-detail-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.aud-detail-label {
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: #7e807e;
}
.aud-detail-value {
  font-size: 14px;
  font-weight: 600;
  line-height: 18px;
  color: #161616;
}
.aud-table-wrapper {
  width: 100%;
  overflow-x: auto;
}
.aud-assigned-table {
  width: 100%;
  border-spacing: 0;
}
.aud-assigned-table .mat-mdc-header-row {
  background: #ffffff;
}
.aud-assigned-table .mat-mdc-header-cell {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #7e807e;
  padding: 12px 8px;
}
.aud-assigned-table .mat-mdc-cell {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #272525;
  padding: 12px 8px;
  border-bottom: none;
}
.aud-assigned-table .mat-mdc-row:nth-child(odd) {
  background: #ffffff;
}
.aud-assigned-table .mat-mdc-row:nth-child(even) {
  background: #F9F9FF;
}
.aud-corporate-link {
  font-weight: 700;
  font-size: 14px;
  color: #007bff;
  text-decoration: underline;
  cursor: pointer;
}
.aud-action-cell {
  text-align: center;
}
.aud-action-cell button {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.aud-action-cell mat-icon {
  color: #272525;
}
.aud-action-cell button:hover mat-icon {
  color: #80298f;
}
@media (max-width: 768px) {
  .aud-basic-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 16px 24px;
  }
  .aud-details-card {
    padding: 20px;
  }
}
@media (max-width: 480px) {
  .aud-user-header-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .aud-basic-grid {
    grid-template-columns: 1fr;
  }
}
div.mat-mdc-select-panel {
  background-color: #FFF !important;
  padding: 0px 0 !important;
}
.mat-mdc-option.mdc-list-item {
  font-family: "Poppins", sans-serif !important;
}
.mat-mdc-select-arrow-wrapper {
  background: url("./media/arrow-down.svg") no-repeat center right !important;
  width: 24px !important;
  height: 24px !important;
}
.mat-mdc-select-arrow-wrapper .mat-mdc-select-arrow {
  display: none !important;
}
.astrick-red {
  color: #FF0000;
}
.loaderPopup {
  background: rgba(0, 0, 0, 0.32);
  max-width: 100vw !important;
}
.loaderPopup .mat-mdc-dialog-surface {
  background: transparent !important;
  box-shadow: none !important;
}
.mat-mdc-progress-spinner circle {
  stroke: #7B328C !important;
}
@media (max-height: 700px) {
  .login-left-inner,
  .login-form-container,
  .otp-form-container,
  .create-password-form-container,
  .login-logo-right {
    position: static !important;
    transform: none !important;
    margin: 2.5rem auto 0;
  }
  .login-left-section,
  .login-right-section {
    min-height: auto !important;
  }
}
.export {
  width: -webkit-fill-available !important;
}
.export-new {
  padding: 12px 36px !important;
}
.sort-icon {
  cursor: pointer;
}
.mat-mdc-tab:hover .mdc-tab__ripple::before {
  opacity: 0 !important;
}
.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header .mat-mdc-tab {
  border-radius: 12px 12px 0 0 !important;
  box-shadow: 2px 11px 20px rgba(0, 0, 0, 0) !important;
}
.no-records-message {
  text-align: center;
  padding: 60px 20px;
  font-size: 16px;
  color: #6B7280;
  font-weight: 500;
}
.ml-8 {
  margin-left: 8px !important;
}
.m-0 {
  margin: 0 !important;
}
.corporate-dtls-tabs {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-bottom: 24px !important;
}
.admin-member-list-btns {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
}
.d-block {
  display: block !important;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}
html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}
body {
  font-family: "Poppins", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: #F5F5F5;
}
.mat-mdc-form-field {
  width: 100%;
}
.mat-mdc-form-field .mat-mdc-text-field-wrapper {
  background: #ffffff;
  border-radius: 8px;
}
.mat-mdc-form-field .mdc-notched-outline__leading,
.mat-mdc-form-field .mdc-notched-outline__notch,
.mat-mdc-form-field .mdc-notched-outline__trailing {
  border-color: #b0c8e2 !important;
  border-width: 2px !important;
}
.mat-mdc-form-field.mat-focused .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-focused .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-focused .mdc-notched-outline__trailing {
  border-color: #6366f1 !important;
  border-width: 2px !important;
}
.mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__leading,
.mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__notch,
.mat-mdc-form-field.mat-form-field-invalid .mdc-notched-outline__trailing {
  border-color: #f44336 !important;
}
.mat-mdc-form-field .mat-mdc-form-field-subscript-wrapper {
  margin-top: 0;
  display: flex;
}
.mat-mdc-form-field .mat-mdc-form-field-error {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  color: #f44336;
}
.mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__leading {
  border-radius: 8px 0 0 8px;
}
.mat-mdc-form-field .mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__trailing {
  border-radius: 0 8px 8px 0;
}
.mat-mdc-form-field input.mat-mdc-input-element {
  font-family: "Poppins", sans-serif;
  font-size: 14px;
  line-height: 16px;
  color: #031931;
  padding: 14px 0;
  height: 20px;
}
.mat-mdc-form-field input.mat-mdc-input-element::placeholder {
  color: #031931;
  opacity: 0.5;
}
.mat-mdc-form-field .mat-mdc-form-field-infix {
  min-height: 48px;
  padding: 14px 0;
}
.toast-container-outer {
  color: white;
  padding: 16px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.toast-container-outer .mat-mdc-snackbar-surface {
  background-color: #f7fafc !important;
  border-radius: 7px !important;
  color: #020817 !important;
  width: 340px !important;
  padding: 5px 0 !important;
}
.toast-container-outer .mat-mdc-snackbar-surface .mat-mdc-snack-bar-label {
  font-size: 14px !important;
  font-family: "Segoe UI", sans-serif !important;
}
.toast-container-outer .toast-close {
  display: none !important;
}
.toast-container-outer:hover .toast-close {
  display: block !important;
}
.toast-container-outer.snack-error .toast-message span,
.toast-container-outer.snack-error .toast-message b {
  color: #ef4444 !important;
}
.toast-container-outer.snack-success .toast-message span,
.toast-container-outer.snack-success .toast-message b {
  color: #10b92f !important;
}
.toast-container-outer.snack-success .toast-close,
.toast-container-outer.snack-error .toast-close {
  color: #fff !important;
}
.mat-mdc-checkbox .mdc-checkbox {
  padding: 0;
  width: 20px;
  height: 20px;
}
.mat-mdc-checkbox .mdc-checkbox__background {
  width: 20px;
  height: 20px;
  border: 2px solid #b0c8e2;
  border-radius: 4px;
  background-color: transparent;
  top: 0;
  left: 0;
}
.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__background {
  background:
    linear-gradient(
      135deg,
      #6366f1 0%,
      #8b5cf6 100%);
  border-color: transparent;
}
.mat-mdc-checkbox.mat-mdc-checkbox-checked .mdc-checkbox__checkmark {
  color: #ffffff;
}
.mat-mdc-checkbox .mdc-checkbox__ripple {
  display: none;
}
.mat-mdc-checkbox .mdc-label {
  font-family: "Poppins", sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  line-height: normal;
  padding-left: 8px;
}
.mat-mdc-icon-button {
  width: 40px;
  height: 40px;
  padding: 8px;
}
.mat-mdc-icon-button .mat-icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
  line-height: 24px;
}
.mat-mdc-form-field-error-wrapper {
  padding: 0 !important;
  position: relative !important;
}
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: #555;
}
.text-center {
  text-align: center;
}
.text-left {
  text-align: left;
}
.text-right {
  text-align: right;
}
.flex {
  display: flex;
}
.flex-column {
  flex-direction: column;
}
.justify-center {
  justify-content: center;
}
.align-center {
  align-items: center;
}
.gap-8 {
  gap: 8px;
}
.gap-16 {
  gap: 16px;
}
.gap-24 {
  gap: 24px;
}
.gap-32 {
  gap: 32px;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
.fade-in {
  animation: fadeIn 0.3s ease-in;
}
@keyframes slideInRight {
  from {
    transform: translateX(100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.slide-in-right {
  animation: slideInRight 0.4s ease-out;
}
@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.slide-in-left {
  animation: slideInLeft 0.4s ease-out;
}
.mdc-text-field--outlined .mat-mdc-form-field-infix,
.mdc-text-field--no-label .mat-mdc-form-field-infix {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex;
  align-items: center;
}
.mat-mdc-form-field-hint-wrapper,
.mat-mdc-form-field-error-wrapper {
  padding-left: 0 !important;
}
.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__outer-circle,
.mat-mdc-radio-button .mdc-radio__native-control:enabled:checked + .mdc-radio__background > .mdc-radio__inner-circle {
  border-color: #80298F !important;
}
.mat-mdc-radio-button .mdc-radio__background::before {
  background-color: rgba(128, 41, 143, 0.12) !important;
}
.cdk-overlay-container {
  z-index: 4500;
}
.high-priority-overlay .cdk-overlay-container {
  z-index: 99999 !important;
}
::ng-deep .cdk-overlay-pane {
  z-index: 4500 !important;
}
.mdc-tooltip * {
  font-family: "Poppins", sans-serif !important;
}
.search-box {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: fit-content;
}
.search-input {
  min-width: 300px;
  width: 360px;
  padding: 10px 40px 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(3, 25, 49, 0.06);
  background: #ffffff;
  font-size: 14px;
  color: #031931;
  outline: none;
  transition: border-color 0.2s ease;
}
.search-input::placeholder {
  color: rgba(3, 25, 49, 0.5);
}
.search-input:focus {
  border-color: rgba(3, 25, 49, 0.15);
}
.search-box .search-icon {
  position: absolute;
  right: 12px;
  width: 20px;
  height: 20px;
  opacity: 0.6;
  pointer-events: none;
}
.search-box .search-clear {
  position: absolute;
  right: 8px;
  background: transparent;
  border: none;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: opacity 0.2s ease;
}
.search-box .search-clear:hover {
  opacity: 0.7;
}
.search-box .search-clear img {
  width: 20px;
  height: 20px;
}
@media (max-width: 768px) {
  .search-input {
    min-width: 250px;
    width: 300px;
  }
}
@media (max-width: 480px) {
  .search-input {
    min-width: 200px;
    width: 100%;
    max-width: 280px;
  }
}

/* angular:styles/global:styles */