:root {
   background-color: transparent !important;

   /* Dynamic viewport height with safe fallback.
      `100dvh` excludes the iOS Safari address bar from the viewport math,
      so full-screen sheets stay rock-stable as the bar collapses on scroll.
      Older Safari (iOS < 15.4) doesn't understand `100dvh`, so this token
      defaults to `100vh` and the `@supports` block below upgrades it on
      capable browsers. Consumers use `var(--m-mobile-vh)` in `height` /
      `min-height` / `max-height` instead of writing `100dvh` directly. */
   --m-mobile-vh: 100vh;

   /* Mobile design-system tokens (light palette — the defaults). Every
      hex/rgba consumed via `mobileTokens.*` in src/styles/mobile.ts resolves
      to one of these variables. Dark mode overrides below swap them on
      [data-mobile-theme="dark"]. Tokens live at the document root so the
      cascade works through fixed/portal elements (modals, drawers). */
   --m-color-prove-main: #814dfa;
   --m-color-prove-light: #b47cff;
   --m-color-prove-dark: #6936d9;
   --m-color-prove-hover-dark: #6f3fe0;
   --m-color-prove-hover-light: #9f66f0;

   --m-color-success-dark: #047857;
   --m-color-success-soft: rgba(16, 185, 129, 0.1);
   --m-color-danger-dark: #b91c1c;
   --m-color-danger-soft: rgba(239, 68, 68, 0.1);
   --m-color-sandbox-dark: #6936d9;
   --m-color-sandbox-soft: rgba(129, 77, 250, 0.1);

   --m-color-page-background: #fafafb;
   --m-color-surface-card: #ffffff;
   --m-color-surface-field: #f9fafb;
   --m-color-surface-field-hover: #f4f5f7;
   --m-color-text-primary: #101828;
   --m-color-text-secondary: #4b5563;
   --m-color-text-muted: #6b7280;
   --m-color-text-on-dark: rgba(255, 255, 255, 0.88);

   --m-color-hairline: rgba(16, 24, 40, 0.06);
   --m-color-hairline-strong: rgba(16, 24, 40, 0.08);

   --m-color-bottom-nav-inactive: rgba(16, 24, 40, 0.7);
   --m-color-bottom-nav-disabled: rgba(16, 24, 40, 0.32);
   --m-color-bottom-nav-bg: rgba(255, 255, 255, 0.96);

   --m-color-icon-tint: rgba(129, 77, 250, 0.08);
   --m-color-icon-tint-hover: rgba(129, 77, 250, 0.12);

   /* Brand-purple text token that swaps by mode for legibility:
      - light mode: deep purple (#6936D9) for high contrast on white surfaces
      - dark mode: lighter lavender (#B47CFF) so titles pop against charcoal
      Use this for project names, section accents, link emphasis — anything
      that needs to read as "brand purple text" rather than a fixed shade. */
   --m-color-accent-text: #6936d9;

   --m-shadow-card: 0 1px 3px rgba(16, 24, 40, 0.04), 0 4px 12px rgba(16, 24, 40, 0.05);
   --m-shadow-card-selected: 0 4px 14px rgba(129, 77, 250, 0.18), 0 2px 4px rgba(129, 77, 250, 0.1);
   --m-shadow-card-hero: 0 12px 28px rgba(129, 77, 250, 0.32), 0 4px 10px rgba(105, 54, 217, 0.22);
   --m-shadow-button: 0 4px 14px rgba(129, 77, 250, 0.32), 0 2px 4px rgba(129, 77, 250, 0.18);
   --m-shadow-menu: 0 4px 12px rgba(16, 24, 40, 0.08), 0 16px 32px rgba(16, 24, 40, 0.1);
   --m-shadow-auth-card: 0 4px 12px rgba(16, 24, 40, 0.06), 0 16px 32px rgba(16, 24, 40, 0.08);
   --m-shadow-bar-bottom: 0 2px 16px rgba(16, 24, 40, 0.04);
   --m-shadow-bar-top: 0 -2px 16px rgba(16, 24, 40, 0.06);

   --m-gradient-prove-brand: linear-gradient(135deg, #814dfa 0%, #b47cff 100%);
   --m-gradient-prove-brand-hover: linear-gradient(135deg, #6f3fe0 0%, #9f66f0 100%);
   --m-gradient-prove-brand-disabled: linear-gradient(
      135deg,
      rgba(129, 77, 250, 0.4) 0%,
      rgba(180, 124, 255, 0.4) 100%
   );
   --m-gradient-prove-hero: radial-gradient(120% 100% at 0% 0%, #9b6fff 0%, #814dfa 45%, #6936d9 100%);
   --m-gradient-active-pill: linear-gradient(90deg, #814dfa 0%, #b47cff 100%);
   --m-gradient-auth-backdrop: radial-gradient(
      120% 60% at 50% 0%,
      rgba(129, 77, 250, 0.1) 0%,
      rgba(180, 124, 255, 0.04) 35%,
      rgba(255, 255, 255, 1) 70%
   );
}

/* Dark palette — applied when the mobile theme toggle (or system preference)
   flips the root data attribute. Brand-purple values are intentionally
   unchanged so the product identity stays consistent across modes. Surfaces,
   text, hairlines, and surface-relative shadows swap; brand-glow shadows
   (cardSelected, cardHero, button) stay because they are tinted with the
   brand purple and remain legible on dark backgrounds. */
[data-mobile-theme="dark"] {
   /* Charcoal palette tuned for a sophisticated, low-glare dark mode —
      lighter than pure ink so the brand-purple accents and white text
      have room to breathe. Surfaces are progressively lighter than the
      page (page → card → field) so depth is communicated by step, not
      by heavy borders. */
   --m-color-page-background: #181a21;
   --m-color-surface-card: #232730;
   --m-color-surface-field: #2c313b;
   --m-color-surface-field-hover: #353a46;
   --m-color-text-primary: #f4f6fa;
   --m-color-text-secondary: #c6cad4;
   --m-color-text-muted: #8c93a1;

   --m-color-hairline: rgba(255, 255, 255, 0.08);
   --m-color-hairline-strong: rgba(255, 255, 255, 0.14);

   --m-color-success-dark: #34d399;
   --m-color-success-soft: rgba(52, 211, 153, 0.14);
   --m-color-danger-dark: #f87171;
   --m-color-danger-soft: rgba(248, 113, 113, 0.14);
   --m-color-sandbox-dark: #b47cff;
   --m-color-sandbox-soft: rgba(180, 124, 255, 0.16);

   --m-color-bottom-nav-inactive: rgba(255, 255, 255, 0.7);
   --m-color-bottom-nav-disabled: rgba(255, 255, 255, 0.3);
   --m-color-bottom-nav-bg: rgba(30, 33, 41, 0.88);

   --m-color-icon-tint: rgba(129, 77, 250, 0.18);
   --m-color-icon-tint-hover: rgba(129, 77, 250, 0.26);

   --m-color-accent-text: #b47cff;

   --m-shadow-card: 0 1px 3px rgba(0, 0, 0, 0.5), 0 4px 12px rgba(0, 0, 0, 0.45);
   --m-shadow-menu: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 32px rgba(0, 0, 0, 0.6);
   --m-shadow-auth-card: 0 4px 12px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.5);
   --m-shadow-bar-bottom: 0 2px 16px rgba(0, 0, 0, 0.5);
   --m-shadow-bar-top: 0 -2px 16px rgba(0, 0, 0, 0.55);

   --m-gradient-auth-backdrop: radial-gradient(
      120% 60% at 50% 0%,
      rgba(129, 77, 250, 0.22) 0%,
      rgba(180, 124, 255, 0.08) 35%,
      rgba(24, 26, 33, 1) 70%
   );
}

/* Paint the mobile page background and text color when dark mode is active.
   These are scoped to the mobile viewport so the desktop layout (md+) keeps
   its existing white surface and dark text regardless of the toggle. */
@media (max-width: 600px) {
   [data-mobile-theme="dark"] body {
      background-color: var(--m-color-page-background);
      color: var(--m-color-text-primary);
   }

   /* MUI form controls — global dark-mode overrides for OutlinedInput,
      InputLabel, Select, DatePicker, Autocomplete. MUI ships a light-only
      theme in this project, so we paint these surfaces ourselves on mobile
      dark mode instead of swapping the entire MUI theme. The `html` prefix
      raises specificity to (0,2,1) so we tie-break against emotion classes
      injected by `@prove/ui-kit`'s `InputField` at runtime. */
   html[data-mobile-theme="dark"] .MuiOutlinedInput-root {
      background-color: var(--m-color-surface-field);
      color: var(--m-color-text-primary);
   }
   [data-mobile-theme="dark"] .MuiOutlinedInput-root .MuiOutlinedInput-notchedOutline {
      border-color: var(--m-color-hairline-strong);
   }
   [data-mobile-theme="dark"] .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
      border-color: var(--m-color-text-muted);
   }
   [data-mobile-theme="dark"] .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
      border-color: var(--m-color-prove-main);
   }
   [data-mobile-theme="dark"] .MuiOutlinedInput-input,
   [data-mobile-theme="dark"] .MuiInputBase-input {
      color: var(--m-color-text-primary);
   }
   [data-mobile-theme="dark"] .MuiOutlinedInput-input::placeholder,
   [data-mobile-theme="dark"] .MuiInputBase-input::placeholder {
      color: var(--m-color-text-muted);
      opacity: 1;
   }
   [data-mobile-theme="dark"] .MuiInputLabel-root,
   [data-mobile-theme="dark"] .MuiFormLabel-root {
      color: var(--m-color-text-muted);
   }
   [data-mobile-theme="dark"] .MuiInputLabel-root.Mui-focused {
      color: var(--m-color-prove-light);
   }
   [data-mobile-theme="dark"] .MuiFormHelperText-root {
      color: var(--m-color-text-muted);
   }
   [data-mobile-theme="dark"] .MuiSelect-icon,
   [data-mobile-theme="dark"] .MuiSvgIcon-root {
      color: inherit;
   }

   /* Floating menus, dropdowns, autocompletes — Popper places these in a
      portal outside the page tree, but they still inherit our root data
      attribute via the document element. */
   [data-mobile-theme="dark"] .MuiPaper-root {
      background-color: var(--m-color-surface-card);
      color: var(--m-color-text-primary);
   }
   [data-mobile-theme="dark"] .MuiMenuItem-root,
   [data-mobile-theme="dark"] .MuiAutocomplete-option {
      color: var(--m-color-text-primary);
   }
   [data-mobile-theme="dark"] .MuiMenuItem-root:hover,
   [data-mobile-theme="dark"] .MuiAutocomplete-option:hover,
   [data-mobile-theme="dark"] .MuiAutocomplete-option[aria-selected="true"] {
      background-color: var(--m-color-surface-field-hover);
   }
   [data-mobile-theme="dark"] .MuiDivider-root {
      border-color: var(--m-color-hairline);
   }

   /* MUI Table — used by audit-trail and team-members. The TableContainer's
      paper background needs to follow the card surface, and per-cell text
      should pick up the themed color. */
   [data-mobile-theme="dark"] .MuiTableCell-root {
      color: var(--m-color-text-primary);
      border-bottom-color: var(--m-color-hairline);
   }
   [data-mobile-theme="dark"] .MuiTableCell-head {
      color: var(--m-color-text-secondary);
   }

   /* MUI Tabs — keep the indicator brand purple, theme inactive labels. */
   [data-mobile-theme="dark"] .MuiTab-root {
      color: var(--m-color-text-secondary);
   }
   [data-mobile-theme="dark"] .MuiTab-root.Mui-selected {
      color: var(--m-color-prove-light);
   }
   [data-mobile-theme="dark"] .MuiTab-root.Mui-disabled {
      color: var(--m-color-text-muted);
   }

   /* MUI Alert (toasts / snackbars / inline alerts) keeps semantic color
      hues but the background needs to lift to a soft surface on dark. */
   [data-mobile-theme="dark"] .MuiAlert-outlined {
      background-color: var(--m-color-surface-card);
   }

   /* Brand-logo whitening — the source PNG is dark ink optimized for
      light backgrounds. In mobile dark mode every consumer that opts in
      via `data-prove-logo` (mobile header, onboarding header, etc.) gets
      filtered to white so the logo stays legible against the charcoal
      surface. Scoped via the attribute so partner logos and marketing
      imagery elsewhere are not touched. */
   [data-mobile-theme="dark"] [data-prove-logo],
   [data-mobile-theme="dark"] [data-testid="mobile-header-logo"] img {
      filter: brightness(0) invert(1);
      opacity: 0.92;
   }
}

/* Dynamic viewport height upgrade — capable browsers swap the token from
   `100vh` (which includes the iOS address bar height and causes jitter as
   the bar collapses) to `100dvh` (the *visible* viewport, always stable).
   Wrapping the override in `@supports` makes older iOS Safari (<15.4) keep
   the `100vh` value and avoid an invalid declaration. */
@supports (height: 100dvh) {
   :root {
      --m-mobile-vh: 100dvh;
   }
}

/* Root container width fix.
   The Vite-template `index.css` declares `body { display: flex; place-items:
   center; }` — that makes `#root` a flex item, which sizes to its content's
   intrinsic width. On desktop the sidebar + main duo gives the layout enough
   intrinsic width to fill the viewport, but on mobile (sidebar removed) the
   content collapses and `<main>` ends up narrower than the viewport. Pinning
   `#root` to `width: 100%` makes it fill its parent regardless of the body's
   flex context, so the mobile chrome (header, bottom nav, page content) all
   anchor to the visual viewport. */
#root {
   width: 100%;
   max-width: 100vw;
}

/* Mobile-only safety nets:
   - `overflow-x: hidden` (fallback) / `overflow-x: clip` (modern) clamp any
     rebellious wide descendant.
   - `max-width: 100vw` on the document caps the layout viewport so fixed
     children (mobile bottom nav) cannot drift off-screen.
   - `min-width: 0` overrides the 320px floor from index.css for ultra-narrow
     viewports (tiny phones, foldables in cover mode).

   We declare `hidden` as the base value (universally supported) and let the
   `@supports (overflow: clip)` block below upgrade modern browsers to `clip`.
   On iOS Safari <16, `hidden` is used; its side effect — turning the element
   into a scroll container and breaking `position: sticky` in descendants —
   is an accepted regression for a small audience. On iOS Safari 16+,
   `clip` clamps overflow without that scroll-container coercion, so sticky
   keeps working. */
@media (max-width: 600px) {
   html,
   body {
      margin: 0;
      padding: 0;
      overflow-x: hidden;
      max-width: 100vw;
      min-width: 0;
   }
   #root {
      overflow-x: hidden;
   }
}

@supports (overflow: clip) {
   @media (max-width: 600px) {
      html,
      body {
         overflow-x: clip;
      }
      #root {
         overflow-x: clip;
      }
   }
}

.logo {
   height: 6em;
   padding: 1.5em;
   will-change: filter;
   transition: filter 300ms;
}
[aria-label="Copy Code"] {
   display: none !important;
}

.logo:hover {
   filter: drop-shadow(0 0 2em #646cffaa);
}

.logo.react:hover {
   filter: drop-shadow(0 0 2em #61dafbaa);
}

.auth-form-background {
   background: radial-gradient(circle at center, #2a206a, transparent), #0f1127;
   padding-top: 80px;
   padding-bottom: 80px;
}

/* Phone input — defers all surface/text color to the wrapper around it
   (see `<PhoneInputWithCountry>` wrappers in signup-form.tsx etc.). The
   wrapper drives backgroundColor + color responsively, so this rule only
   handles typography and border reset. No `!important` needed: the
   library's default `.PhoneInputInput` styles don't override these
   properties at higher specificity. */
.PhoneInputInput {
   background: transparent;
   border: none;
   height: 80%;
   color: inherit;
   font-weight: normal;
   font-size: 1rem;
   font-family: "Inter", sans-serif;
}

input:-webkit-autofill,
input:-webkit-autofill:focus {
   transition:
      background-color 0s 600000s,
      color 0s 600000s !important;
}

/* Mobile dark-mode autofill — WebKit/Blink paint the autofilled input a
   bright yellow (or system white) regardless of CSS `background-color`.
   The standard workaround is the giant inset `box-shadow` that paints
   over the autofill chrome with our themed surface. `text-fill-color`
   is the only way to override autofill text color since `color` is
   ignored by the autofill style. */
html[data-mobile-theme="dark"] input:-webkit-autofill,
html[data-mobile-theme="dark"] input:-webkit-autofill:hover,
html[data-mobile-theme="dark"] input:-webkit-autofill:focus,
html[data-mobile-theme="dark"] input:-webkit-autofill:active {
   -webkit-box-shadow: 0 0 0 1000px var(--m-color-surface-field) inset !important;
   -webkit-text-fill-color: var(--m-color-text-primary) !important;
   caret-color: var(--m-color-text-primary);
}

@keyframes logo-spin {
   from {
      transform: rotate(0deg);
   }
   to {
      transform: rotate(360deg);
   }
}

@media (prefers-reduced-motion: no-preference) {
   a:nth-of-type(2) .logo {
      animation: logo-spin infinite 20s linear;
   }
}

.card {
   padding: 2em;
}

.read-the-docs {
   color: #888;
}

.reactour__popover {
   min-width: 460px;
}
/* CSS variables. */
:root {
	--PhoneInput-color--focus: #03b2cb;
	--PhoneInputInternationalIconPhone-opacity: 0.8;
	--PhoneInputInternationalIconGlobe-opacity: 0.65;
	--PhoneInputCountrySelect-marginRight: 0.35em;
	--PhoneInputCountrySelectArrow-width: 0.3em;
	--PhoneInputCountrySelectArrow-marginLeft: var(--PhoneInputCountrySelect-marginRight);
	--PhoneInputCountrySelectArrow-borderWidth: 1px;
	--PhoneInputCountrySelectArrow-opacity: 0.45;
	--PhoneInputCountrySelectArrow-color: currentColor;
	--PhoneInputCountrySelectArrow-color--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountrySelectArrow-transform: rotate(45deg);
	--PhoneInputCountryFlag-aspectRatio: 1.5;
	--PhoneInputCountryFlag-height: 1em;
	--PhoneInputCountryFlag-borderWidth: 1px;
	--PhoneInputCountryFlag-borderColor: rgba(0,0,0,0.5);
	--PhoneInputCountryFlag-borderColor--focus: var(--PhoneInput-color--focus);
	--PhoneInputCountryFlag-backgroundColor--loading: rgba(0,0,0,0.1);
}

.PhoneInput {
	/* This is done to stretch the contents of this component. */
	display: flex;
	align-items: center;
}

.PhoneInputInput {
	/* The phone number input stretches to fill all empty space */
	flex: 1;
	/* The phone number input should shrink
	   to make room for the extension input */
	min-width: 0;
}

.PhoneInputCountryIcon {
	width: calc(var(--PhoneInputCountryFlag-height) * var(--PhoneInputCountryFlag-aspectRatio));
	height: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--square {
	width: var(--PhoneInputCountryFlag-height);
}

.PhoneInputCountryIcon--border {
	/* Removed `background-color` because when an `<img/>` was still loading
	   it would show a dark gray rectangle. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom. */
	background-color: var(--PhoneInputCountryFlag-backgroundColor--loading);
	/* Border is added via `box-shadow` because `border` interferes with `width`/`height`. */
	/* For some reason the `<img/>` is not stretched to 100% width and height
	   and sometime there can be seen white pixels of the background at top and bottom,
	   so an additional "inset" border is added. */
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor);
}

.PhoneInputCountryIconImg {
	/* Fixes weird vertical space above the flag icon. */
	/* https://gitlab.com/catamphetamine/react-phone-number-input/-/issues/7#note_348586559 */
	display: block;
	/* 3rd party <SVG/> flag icons won't stretch if they have `width` and `height`.
	   Also, if an <SVG/> icon's aspect ratio was different, it wouldn't fit too. */
	width: 100%;
	height: 100%;
}

.PhoneInputInternationalIconPhone {
	opacity: var(--PhoneInputInternationalIconPhone-opacity);
}

.PhoneInputInternationalIconGlobe {
	opacity: var(--PhoneInputInternationalIconGlobe-opacity);
}

/* Styling native country `<select/>`. */

.PhoneInputCountry {
	position: relative;
	align-self: stretch;
	display: flex;
	align-items: center;
	margin-right: var(--PhoneInputCountrySelect-marginRight);
}

.PhoneInputCountrySelect {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	z-index: 1;
	border: 0;
	opacity: 0;
	cursor: pointer;
}

.PhoneInputCountrySelect[disabled],
.PhoneInputCountrySelect[readonly] {
	cursor: default;
}

.PhoneInputCountrySelectArrow {
	display: block;
	content: '';
	width: var(--PhoneInputCountrySelectArrow-width);
	height: var(--PhoneInputCountrySelectArrow-width);
	margin-left: var(--PhoneInputCountrySelectArrow-marginLeft);
	border-style: solid;
	border-color: var(--PhoneInputCountrySelectArrow-color);
	border-top-width: 0;
	border-bottom-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	border-left-width: 0;
	border-right-width: var(--PhoneInputCountrySelectArrow-borderWidth);
	transform: var(--PhoneInputCountrySelectArrow-transform);
	opacity: var(--PhoneInputCountrySelectArrow-opacity);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon + .PhoneInputCountrySelectArrow {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon--border {
	box-shadow: 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus),
		inset 0 0 0 var(--PhoneInputCountryFlag-borderWidth) var(--PhoneInputCountryFlag-borderColor--focus);
}

.PhoneInputCountrySelect:focus + .PhoneInputCountryIcon .PhoneInputInternationalIconGlobe {
	opacity: 1;
	color: var(--PhoneInputCountrySelectArrow-color--focus);
}/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-annotation-layer: 1;
  --annotation-unfocused-field-background: url("data:image/svg+xml;charset=UTF-8,<svg width='1px' height='1px' xmlns='http://www.w3.org/2000/svg'><rect width='100%' height='100%' style='fill:rgba(0, 54, 255, 0.13);'/></svg>");
  --input-focus-border-color: Highlight;
  --input-focus-outline: 1px solid Canvas;
  --input-unfocused-border-color: transparent;
  --input-disabled-border-color: transparent;
  --input-hover-border-color: black;
  --link-outline: none;
}

@media screen and (forced-colors: active) {
  :root {
    --input-focus-border-color: CanvasText;
    --input-unfocused-border-color: ActiveText;
    --input-disabled-border-color: GrayText;
    --input-hover-border-color: Highlight;
    --link-outline: 1.5px solid LinkText;
  }
  .annotationLayer .textWidgetAnnotation :is(input, textarea):required,
  .annotationLayer .choiceWidgetAnnotation select:required,
  .annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
    outline: 1.5px solid selectedItem;
  }

  .annotationLayer .linkAnnotation:hover {
    backdrop-filter: invert(100%);
  }
}

.annotationLayer {
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
  transform-origin: 0 0;
  z-index: 3;
}

.annotationLayer[data-main-rotation='90'] .norotate {
  transform: rotate(270deg) translateX(-100%);
}
.annotationLayer[data-main-rotation='180'] .norotate {
  transform: rotate(180deg) translate(-100%, -100%);
}
.annotationLayer[data-main-rotation='270'] .norotate {
  transform: rotate(90deg) translateY(-100%);
}

.annotationLayer canvas {
  position: absolute;
  width: 100%;
  height: 100%;
}

.annotationLayer section {
  position: absolute;
  text-align: initial;
  pointer-events: auto;
  box-sizing: border-box;
  margin: 0;
  transform-origin: 0 0;
}

.annotationLayer .linkAnnotation {
  outline: var(--link-outline);
}

.textLayer.selecting ~ .annotationLayer section {
  pointer-events: none;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a {
  position: absolute;
  font-size: 1em;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.annotationLayer :is(.linkAnnotation, .buttonWidgetAnnotation.pushButton) > a:hover {
  opacity: 0.2;
  background: rgba(255, 255, 0, 1);
  box-shadow: 0 2px 10px rgba(255, 255, 0, 1);
}

.annotationLayer .textAnnotation img {
  position: absolute;
  cursor: pointer;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea),
.annotationLayer .choiceWidgetAnnotation select,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  background-image: var(--annotation-unfocused-field-background);
  border: 2px solid var(--input-unfocused-border-color);
  box-sizing: border-box;
  font: calc(9px * var(--total-scale-factor)) sans-serif;
  height: 100%;
  margin: 0;
  vertical-align: top;
  width: 100%;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):required,
.annotationLayer .choiceWidgetAnnotation select:required,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:required {
  outline: 1.5px solid red;
}

.annotationLayer .choiceWidgetAnnotation select option {
  padding: 0;
}

.annotationLayer .buttonWidgetAnnotation.radioButton input {
  border-radius: 50%;
}

.annotationLayer .textWidgetAnnotation textarea {
  resize: none;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea)[disabled],
.annotationLayer .choiceWidgetAnnotation select[disabled],
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input[disabled] {
  background: none;
  border: 2px solid var(--input-disabled-border-color);
  cursor: not-allowed;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input:hover {
  border: 2px solid var(--input-hover-border-color);
}
.annotationLayer .textWidgetAnnotation :is(input, textarea):hover,
.annotationLayer .choiceWidgetAnnotation select:hover,
.annotationLayer .buttonWidgetAnnotation.checkBox input:hover {
  border-radius: 2px;
}

.annotationLayer .textWidgetAnnotation :is(input, textarea):focus,
.annotationLayer .choiceWidgetAnnotation select:focus {
  background: none;
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) :focus {
  background-image: none;
  background-color: transparent;
}

.annotationLayer .buttonWidgetAnnotation.checkBox :focus {
  border: 2px solid var(--input-focus-border-color);
  border-radius: 2px;
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.radioButton :focus {
  border: 2px solid var(--input-focus-border-color);
  outline: var(--input-focus-outline);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after,
.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  background-color: CanvasText;
  content: '';
  display: block;
  position: absolute;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before,
.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  height: 80%;
  left: 45%;
  width: 1px;
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::before {
  transform: rotate(45deg);
}

.annotationLayer .buttonWidgetAnnotation.checkBox input:checked::after {
  transform: rotate(-45deg);
}

.annotationLayer .buttonWidgetAnnotation.radioButton input:checked::before {
  border-radius: 50%;
  height: 50%;
  left: 30%;
  top: 20%;
  width: 50%;
}

.annotationLayer .textWidgetAnnotation input.comb {
  font-family: monospace;
  padding-left: 2px;
  padding-right: 0;
}

.annotationLayer .textWidgetAnnotation input.comb:focus {
  /*
   * Letter spacing is placed on the right side of each character. Hence, the
   * letter spacing of the last character may be placed outside the visible
   * area, causing horizontal scrolling. We avoid this by extending the width
   * when the element has focus and revert this when it loses focus.
   */
  width: 103%;
}

.annotationLayer .buttonWidgetAnnotation:is(.checkBox, .radioButton) input {
  appearance: none;
}

.annotationLayer .popupTriggerArea {
  height: 100%;
  width: 100%;
}

.annotationLayer .fileAttachmentAnnotation .popupTriggerArea {
  position: absolute;
}

.annotationLayer .popupWrapper {
  position: absolute;
  font-size: calc(9px * var(--total-scale-factor));
  width: 100%;
  min-width: calc(180px * var(--total-scale-factor));
  pointer-events: none;
}

.annotationLayer .popup {
  position: absolute;
  max-width: calc(180px * var(--total-scale-factor));
  background-color: rgba(255, 255, 153, 1);
  box-shadow: 0 calc(2px * var(--total-scale-factor)) calc(5px * var(--total-scale-factor))
    rgba(136, 136, 136, 1);
  border-radius: calc(2px * var(--total-scale-factor));
  padding: calc(6px * var(--total-scale-factor));
  margin-left: calc(5px * var(--total-scale-factor));
  cursor: pointer;
  font: message-box;
  white-space: normal;
  word-wrap: break-word;
  pointer-events: auto;
}

.annotationLayer .popup > * {
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .popup h1 {
  display: inline-block;
}

.annotationLayer .popupDate {
  display: inline-block;
  margin-left: calc(5px * var(--total-scale-factor));
}

.annotationLayer .popupContent {
  border-top: 1px solid rgba(51, 51, 51, 1);
  margin-top: calc(2px * var(--total-scale-factor));
  padding-top: calc(2px * var(--total-scale-factor));
}

.annotationLayer .richText > * {
  white-space: pre-wrap;
  font-size: calc(9px * var(--total-scale-factor));
}

.annotationLayer .highlightAnnotation,
.annotationLayer .underlineAnnotation,
.annotationLayer .squigglyAnnotation,
.annotationLayer .strikeoutAnnotation,
.annotationLayer .freeTextAnnotation,
.annotationLayer .lineAnnotation svg line,
.annotationLayer .squareAnnotation svg rect,
.annotationLayer .circleAnnotation svg ellipse,
.annotationLayer .polylineAnnotation svg polyline,
.annotationLayer .polygonAnnotation svg polygon,
.annotationLayer .caretAnnotation,
.annotationLayer .inkAnnotation svg polyline,
.annotationLayer .stampAnnotation,
.annotationLayer .fileAttachmentAnnotation {
  cursor: pointer;
}

.annotationLayer section svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.annotationLayer .annotationTextContent {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  color: transparent;
  user-select: none;
  pointer-events: none;
}

.annotationLayer .annotationTextContent span {
  width: 100%;
  display: inline-block;
}
/* Copyright 2014 Mozilla Foundation
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

:root {
  --react-pdf-text-layer: 1;
  --highlight-bg-color: rgba(180, 0, 170, 1);
  --highlight-selected-bg-color: rgba(0, 100, 0, 1);
}

@media screen and (forced-colors: active) {
  :root {
    --highlight-bg-color: Highlight;
    --highlight-selected-bg-color: ButtonText;
  }
}

[data-main-rotation='90'] {
  transform: rotate(90deg) translateY(-100%);
}
[data-main-rotation='180'] {
  transform: rotate(180deg) translate(-100%, -100%);
}
[data-main-rotation='270'] {
  transform: rotate(270deg) translateX(-100%);
}

.textLayer {
  position: absolute;
  text-align: initial;
  inset: 0;
  overflow: hidden;
  line-height: 1;
  text-size-adjust: none;
  forced-color-adjust: none;
  transform-origin: 0 0;
  z-index: 2;
}

.textLayer :is(span, br) {
  color: transparent;
  position: absolute;
  white-space: pre;
  cursor: text;
  margin: 0;
  transform-origin: 0 0;
}

/* Only necessary in Google Chrome, see issue 14205, and most unfortunately
 * the problem doesn't show up in "text" reference tests. */
.textLayer span.markedContent {
  top: 0;
  height: 0;
}

.textLayer .highlight {
  margin: -1px;
  padding: 1px;
  background-color: var(--highlight-bg-color);
  border-radius: 4px;
}

.textLayer .highlight.appended {
  position: initial;
}

.textLayer .highlight.begin {
  border-radius: 4px 0 0 4px;
}

.textLayer .highlight.end {
  border-radius: 0 4px 4px 0;
}

.textLayer .highlight.middle {
  border-radius: 0;
}

.textLayer .highlight.selected {
  background-color: var(--highlight-selected-bg-color);
}

/* Avoids https://github.com/mozilla/pdf.js/issues/13840 in Chrome */
.textLayer br::selection {
  background: transparent;
}

.textLayer .endOfContent {
  display: block;
  position: absolute;
  inset: 100% 0 0;
  z-index: -1;
  cursor: default;
  user-select: none;
}

.textLayer.selecting .endOfContent {
  top: 0;
}

.hiddenCanvasElement {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  display: none;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100;
  font-display: swap;
  src: url("/assets/Inter-Thin-DzN99i8q.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 100;
  font-display: swap;
  src: url("/assets/Inter-ThinItalic-DxehbPeK.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 200;
  font-display: swap;
  src: url("/assets/Inter-ExtraLight-7kXoOaX_.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 200;
  font-display: swap;
  src: url("/assets/Inter-ExtraLightItalic-Ox17i_b0.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/Inter-Light-14LG-y7V.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 300;
  font-display: swap;
  src: url("/assets/Inter-LightItalic-iBr7p6CH.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Inter-Regular-COLGFB3M.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("/assets/Inter-Italic-Bm_w1qmz.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/Inter-Medium-CDhBSFyE.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 500;
  font-display: swap;
  src: url("/assets/Inter-MediumItalic-BqDObnQN.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/Inter-SemiBold-BAEEcJ4E.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 600;
  font-display: swap;
  src: url("/assets/Inter-SemiBoldItalic-B7KOJJiL.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/Inter-Bold-BOs3KVhN.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 700;
  font-display: swap;
  src: url("/assets/Inter-BoldItalic-Cabj1n7x.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/Inter-ExtraBold-BUaDDWMS.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 800;
  font-display: swap;
  src: url("/assets/Inter-ExtraBoldItalic-efVpd_pq.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/Inter-Black-BJbWHna9.woff2?v=4.0") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: italic;
  font-weight: 900;
  font-display: swap;
  src: url("/assets/Inter-BlackItalic-D3PIgx41.woff2?v=4.0") format("woff2");
}
:root {
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;

   color-scheme: light dark;
   color: rgba(255, 255, 255, 0.87);
   background-color: #242424;

   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

a {
   font-weight: 500;
   color: #646cff;
   text-decoration: inherit;
}
a:hover {
   color: #535bf2;
}

body {
   margin: 0;
   display: flex;
   place-items: center;
   min-width: 320px;
   min-height: 100vh;
}

h1 {
   font-size: 3.2em;
   line-height: 1.1;
}

button {
   border-radius: 8px;
   border: 1px solid transparent;
   font-size: 1em;
   font-weight: 500;
   font-family: inherit;
   background-color: transparent;
   cursor: pointer;
   transition: border-color 0.25s;
}

@media (prefers-color-scheme: light) {
   :root {
      color: #213547;
      background-color: #ffffff;
   }
   a:hover {
      color: #747bff;
   }
}

.custom-phone-input .PhoneInputInput {
   border: none !important;
   outline: none !important;
   background: none !important;
   padding-left: 8px;
   font-size: 1rem;
}
.custom-phone-input .PhoneInputInput:focus {
   border: none !important;
   outline: none !important;
   box-shadow: none !important;
}