@charset "UTF-8";

/* projects/jsx-web-app/src/styles/styles.scss */
:root {
  --jsx-primary-50: #ffe5ea;
  --jsx-primary-100: #fbb8c3;
  --jsx-primary-200: #f58a9b;
  --jsx-primary-300: #ef5c73;
  --jsx-primary-400: #ea3a55;
  --jsx-primary-500: #e4002b;
  --jsx-primary-600: #cc0026;
  --jsx-primary-700: #b30021;
  --jsx-primary-800: #99001c;
  --jsx-primary-900: #800017;
  --jsx-primary-950: #660012;
  --jsx-neutral-0: #ffffff;
  --jsx-neutral-50: #fafafa;
  --jsx-neutral-100: #f4f4f5;
  --jsx-neutral-200: #e4e4e7;
  --jsx-neutral-300: #d4d4d8;
  --jsx-neutral-400: #a1a1aa;
  --jsx-neutral-500: #71717a;
  --jsx-neutral-600: #52525b;
  --jsx-neutral-700: #3f3f46;
  --jsx-neutral-800: #2c2c2c;
  --jsx-neutral-900: #242424;
  --jsx-neutral-950: #1c1c1c;
  --jsx-neutral-1000: #000000;
  --jsx-success-500: #01e17b;
  --jsx-warn-500: #ffd21e;
  --jsx-info-500: #1e78ff;
  --jsx-danger-400: #ef4444;
  --jsx-danger-500: #dc2626;
  --jsx-danger-700: #991b1b;
  --jsx-space-0: 0;
  --jsx-space-1: 0.25rem;
  --jsx-space-2: 0.5rem;
  --jsx-space-3: 1rem;
  --jsx-space-4: 1.5rem;
  --jsx-space-5: 2rem;
  --jsx-radius-sm: 6px;
  --jsx-radius-md: 8px;
  --jsx-radius-lg: 12px;
  --jsx-radius-full: 9999px;
  --jsx-font-family: var(--font-family, "Manrope");
  --jsx-font-size-xs: 12px;
  --jsx-font-size-sm: 14px;
  --jsx-font-size-md: 16px;
  --jsx-font-size-lg: 20px;
  --jsx-font-size-xl: 24px;
  --jsx-fw-light: 300;
  --jsx-fw-medium: 400;
  --jsx-fw-semi-bold: 500;
  --jsx-fw-bold: 600;
  --jsx-shadow-1: 0 1px 2px var(--ui-shadow-color, rgb(0 0 0 / 0.1));
  --jsx-shadow-2: 0 2px 10px var(--ui-shadow-color, rgb(0 0 0 / 0.1));
  --jsx-shadow-3: 0 8px 24px var(--ui-shadow-color, rgb(0 0 0 / 0.1));
  --jsx-control-h-sm: 32px;
  --jsx-control-h-md: 40px;
  --jsx-control-h-lg: 48px;
  --jsx-control-px-sm: 10px;
  --jsx-control-px-md: 14px;
  --jsx-control-px-lg: 18px;
  --jsx-control-fs-sm: var(--jsx-font-size-sm);
  --jsx-control-fs-md: var(--jsx-font-size-md);
  --jsx-control-fs-lg: var(--jsx-font-size-md);
  --jsx-motion-fast: 120ms;
  --jsx-motion-base: 200ms;
  --jsx-motion-slow: 320ms;
  --jsx-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --jsx-z-overlay: 1000;
  --jsx-z-modal: 1100;
  --jsx-z-toast: 1200;
}
:root {
  --ui-button-bg: var(--ui-primary);
  --ui-button-fg: var(--ui-on-primary, #fff);
  --ui-button-hover-bg: var(--ui-primary-hover);
  --ui-button-active-bg: var(--ui-primary-active);
  --ui-button-radius: var(--jsx-radius-md);
  --ui-button-border: transparent;
  --ui-button-fw: var(--jsx-fw-semi-bold);
  --ui-button-disabled-op: 0.5;
  --ui-button-secondary-bg: transparent;
  --ui-button-secondary-fg: var(--ui-text);
  --ui-button-secondary-border: var(--ui-border);
  --ui-button-danger-bg: var(--ui-danger);
  --ui-button-danger-hover-bg: var(--ui-danger-hover);
  --ui-button-icon-size: 42px;
  --ui-control-height: var(--jsx-control-h-md);
  --ui-control-padding-x: var(--jsx-control-px-md);
  --ui-control-font-size: var(--jsx-control-fs-md);
  --ui-control-radius: var(--jsx-radius-sm);
  --ui-control-bg: var(--ui-surface-raised);
  --ui-control-text: var(--ui-text);
  --ui-control-border: var(--ui-border);
  --ui-control-border-focus: var(--ui-primary);
  --ui-control-border-invalid: var(--ui-error);
  --ui-control-disabled-bg: var(--ui-surface-sunken);
  --ui-control-placeholder: var(--ui-text-muted);
  --ui-label-color: var(--ui-text);
  --ui-hint-color: var(--ui-text-muted);
  --ui-error-color: var(--ui-error);
  --ui-overlay-bg: var(--ui-surface-raised);
  --ui-overlay-border: var(--ui-border);
  --ui-overlay-radius: var(--jsx-radius-md);
  --ui-overlay-shadow: var(--jsx-shadow-3);
  --ui-overlay-z: var(--jsx-z-overlay);
  --ui-dialog-z: var(--jsx-z-modal);
  --ui-toast-z: var(--jsx-z-toast);
  --ui-icon-size: var(--jsx-control-fs-md);
  --ui-table-bg: var(--background-200);
  --ui-table-header-bg: var(--background-300);
  --ui-table-stripe-bg: var(--background-300);
  --ui-table-hover-bg: var(--background-100);
  --ui-table-border: var(--ui-border);
  --ui-table-header-fw: var(--jsx-fw-semi-bold);
  --ui-table-cell-px: var(--jsx-space-3);
  --ui-table-row-h-sm: 36px;
  --ui-table-row-h-md: 44px;
  --ui-table-row-h-lg: 52px;
  --ui-table-cell-py-sm: 0.375rem;
  --ui-table-cell-py-md: 0.75rem;
  --ui-table-cell-py-lg: 1.125rem;
}
:root {
  --background-100: #eaebef;
  --background-200: #f1f6fb;
  --background-300: #ffffff;
  --primary: #e4002b;
  --text: #000000;
  --toast-background: #ffffff;
  --toast-title: #000000;
  --toast-message: #4d4d4d;
  --input-border: hsla(0, 0%, 0%, 0.2);
  --link-color: hsla(0, 0%, 0%, 0.6);
  --scrollbar-track: #e6e9ef;
  --scrollbar-thumb: #cfd6e0;
  --ui-surface: var(--background-300);
  --ui-surface-sunken: var(--background-200);
  --ui-surface-app: var(--background-100);
  --ui-surface-raised: var(--background-300);
  --ui-text: var(--text);
  --ui-text-muted: var(--link-color);
  --ui-border: var(--input-border);
  --ui-primary: var(--primary);
  --ui-primary-hover: var(--jsx-primary-300);
  --ui-primary-active: var(--jsx-primary-200);
  --ui-on-primary: var(--jsx-neutral-0);
  --ui-focus-ring: color-mix(in srgb, var(--ui-primary) 45%, transparent);
  --ui-focus-ring-width: 2px;
  --ui-focus-ring-offset: 2px;
  --ui-error: #94001a;
  --ui-danger: var(--jsx-danger-500);
  --ui-danger-hover: var(--jsx-danger-700);
  --ui-danger-bg: #fdecea;
  --ui-success: var(--jsx-success-500);
  --ui-warn: var(--jsx-warn-500);
  --ui-info: var(--jsx-info-500);
  --ui-shadow-color: rgb(0 0 0 / 0.1);
  --ui-scrollbar-track: var(--scrollbar-track);
  --ui-scrollbar-thumb: var(--scrollbar-thumb);
}
.dialog {
  position: relative;
  max-height: 72vh;
  overflow-x: hidden;
}
.dialog__content {
  overflow-y: auto;
  overflow-x: hidden;
}
.dialog__content .form__fields {
  padding: 24px;
  border-radius: 16px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  background-color: var(--background-300);
}
.dialog__footer {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--background-200);
  z-index: 10;
  margin-top: auto;
}
.dialog__footer-btn {
  width: 120px;
  border-radius: 8px;
}
.dialog__footer-btn-cancel {
  color: var(--text) !important;
  background-color: var(--background-300);
}
:root {
  --font-family: "Manrope";
  --fs-xs: 14px;
  --fs-sm: 14px;
  --fs-regular: 16px;
  --fs-md: 16px;
  --fs-lg: 20px;
  --fs-xl: 24px;
  --fw-light: 300;
  --fw-medium: 400;
  --fw-semi-bold: 500;
  --fw-bold: 600;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-weight: 200 800;
  src: url(/fonts/Manrope/Manrope-Variable.woff2) format("woff2-variations"), url(/fonts/Manrope/Manrope-Variable.woff2) format("woff2");
  font-display: swap;
}
@keyframes fromDownToUp {
  from {
    box-shadow: none;
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fromUpToDown {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
@keyframes fromLeftToRight {
  from {
    transform: translateX(-50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
@keyframes fromRightToLeft {
  from {
    transform: translateX(50px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}
.fromDownToUp {
  animation: fromDownToUp 0.4s ease-in-out;
}
.no-select {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  -webkit-user-select: none;
  user-select: none;
}
.no-select:focus {
  outline: none;
  box-shadow: none;
  border: none;
}
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: 10px;
  cursor: pointer;
  background-clip: content-box;
}
::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
}
::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--jsx-space-3);
}
.col-1 {
  grid-column: span 1;
}
.col-2 {
  grid-column: span 2;
}
.col-3 {
  grid-column: span 3;
}
.col-4 {
  grid-column: span 4;
}
.col-5 {
  grid-column: span 5;
}
.col-6 {
  grid-column: span 6;
}
.col-7 {
  grid-column: span 7;
}
.col-8 {
  grid-column: span 8;
}
.col-9 {
  grid-column: span 9;
}
.col-10 {
  grid-column: span 10;
}
.col-11 {
  grid-column: span 11;
}
.col-12 {
  grid-column: span 12;
}
@media (min-width: 768px) {
  .md\:col-1 {
    grid-column: span 1;
  }
  .md\:col-2 {
    grid-column: span 2;
  }
  .md\:col-3 {
    grid-column: span 3;
  }
  .md\:col-4 {
    grid-column: span 4;
  }
  .md\:col-5 {
    grid-column: span 5;
  }
  .md\:col-6 {
    grid-column: span 6;
  }
  .md\:col-7 {
    grid-column: span 7;
  }
  .md\:col-8 {
    grid-column: span 8;
  }
  .md\:col-9 {
    grid-column: span 9;
  }
  .md\:col-10 {
    grid-column: span 10;
  }
  .md\:col-11 {
    grid-column: span 11;
  }
  .md\:col-12 {
    grid-column: span 12;
  }
}
.flex {
  display: flex;
}
.block {
  display: block;
}
.relative {
  position: relative;
}
.absolute {
  position: absolute;
}
.flex-column {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.align-items-center {
  align-items: center;
}
.justify-content-center {
  justify-content: center;
}
.justify-content-between {
  justify-content: space-between;
}
.w-full {
  width: 100%;
}
.h-full {
  height: 100%;
}
.h-auto {
  height: auto;
}
.min-h-screen {
  min-height: 100vh;
}
.max-w-full {
  max-width: 100%;
}
.max-w-30rem {
  max-width: 30rem;
}
.text-center {
  text-align: center;
}
.text-lg {
  font-size: var(--jsx-font-size-lg);
}
.text-xl {
  font-size: var(--jsx-font-size-xl);
}
.border-circle {
  border-radius: var(--jsx-radius-full);
}
.cursor-pointer {
  cursor: pointer;
}
.gap-0 {
  gap: var(--jsx-space-0);
}
.p-0 {
  padding: var(--jsx-space-0);
}
.ml-0 {
  margin-left: var(--jsx-space-0);
}
.gap-1 {
  gap: var(--jsx-space-1);
}
.p-1 {
  padding: var(--jsx-space-1);
}
.ml-1 {
  margin-left: var(--jsx-space-1);
}
.gap-2 {
  gap: var(--jsx-space-2);
}
.p-2 {
  padding: var(--jsx-space-2);
}
.ml-2 {
  margin-left: var(--jsx-space-2);
}
.gap-3 {
  gap: var(--jsx-space-3);
}
.p-3 {
  padding: var(--jsx-space-3);
}
.ml-3 {
  margin-left: var(--jsx-space-3);
}
.gap-4 {
  gap: var(--jsx-space-4);
}
.p-4 {
  padding: var(--jsx-space-4);
}
.ml-4 {
  margin-left: var(--jsx-space-4);
}
.gap-5 {
  gap: var(--jsx-space-5);
}
.p-5 {
  padding: var(--jsx-space-5);
}
.ml-5 {
  margin-left: var(--jsx-space-5);
}
@media (min-width: 768px) {
  .md\:flex-row {
    flex-direction: row;
  }
  .md\:w-6 {
    width: 50%;
  }
  .md\:p-5 {
    padding: var(--jsx-space-5);
  }
}
.ui-ripple-host {
  position: relative;
  overflow: hidden;
}
.ui-ripple-effect {
  position: absolute;
  border-radius: var(--jsx-radius-full);
  background: color-mix(in srgb, currentColor 30%, transparent);
  transform: scale(0);
  pointer-events: none;
  animation: ui-ripple-expand var(--jsx-motion-slow) var(--jsx-ease);
}
@keyframes ui-ripple-expand {
  to {
    transform: scale(2.5);
    opacity: 0;
  }
}
.ui-tooltip {
  max-inline-size: 16rem;
  padding: 0.25rem 0.5rem;
  color: var(--ui-surface-raised);
  background: var(--ui-text);
  border-radius: var(--jsx-radius-sm);
  font-size: var(--jsx-font-size-xs);
  line-height: 1.4;
  pointer-events: none;
  overflow-wrap: break-word;
  box-shadow: var(--jsx-shadow-2);
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
  scroll-behavior: smooth;
  font-size: var(--fs-regular);
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
}
body {
  min-height: 100dvh;
  padding: 0;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  touch-action: manipulation;
  zoom: 1;
  font-family:
    var(--font-family),
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
  font-weight: var(--fw-medium);
  text-wrap: balance;
  color: var(--text);
  background: var(--background-300);
  transition: background 0.2s;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
span,
a,
strong,
em,
small,
legend,
button,
label,
input,
select,
textarea,
option,
optgroup {
  font-family:
    var(--font-family),
    -apple-system,
    BlinkMacSystemFont,
    sans-serif;
}
button {
  all: unset;
}
a {
  text-decoration: none;
}
img {
  display: block;
  max-width: 100%;
  height: auto;
}

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