@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@700;900&family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");

div[data-theme="light"],
 :root {
  --base-unit: 16px;
  --border-base: 1px;
  --border-thick: 2px;
  --border-thicker: 4px;
  --border-thickest: 8px;
  --color-base-grey--100: hsl(0, 0%, 97%);
  --color-base-grey--200: hsl(0, 0%, 93%);
  --color-base-grey--300: hsl(0, 0%, 87%);
  --color-base-grey--400: hsl(0, 0%, 72%);
  --color-base-grey--500: hsl(0, 0%, 58%);
  --color-base-grey--600: hsl(0, 0%, 47%);
  --color-base-grey--700: hsl(0, 0%, 35%);
  --color-base-grey--800: hsl(0, 0%, 24%);
  --color-base-grey--900: hsl(0, 0%, 15%);
  --color-base-grey--1000: hsl(0, 0%, 11%);
  --color-base-taupe--100: hsl(45, 20%, 97%);
  --color-base-taupe--200: hsl(53, 21%, 93%);
  --color-base-taupe--300: hsl(51, 17%, 85%);
  --color-base-taupe--400: hsl(49, 7%, 70%);
  --color-base-taupe--500: hsl(47, 4%, 57%);
  --color-base-taupe--600: hsl(43, 3%, 46%);
  --color-base-taupe--700: hsl(48, 3%, 34%);
  --color-base-taupe--800: hsl(40, 3%, 23%);
  --color-base-taupe--900: hsl(30, 3%, 15%);
  --color-base-taupe--1000: hsl(30, 4%, 11%);
  --color-base-red--100: hsl(10, 60%, 98%);
  --color-base-red--200: hsl(7, 63%, 95%);
  --color-base-red--300: hsl(5, 65%, 90%);
  --color-base-red--400: hsl(6, 64%, 76%);
  --color-base-red--500: hsl(6, 64%, 65%);
  --color-base-red--600: hsl(6, 64%, 51%);
  --color-base-red--700: hsl(6, 100%, 35%);
  --color-base-red--800: hsl(6, 100%, 24%);
  --color-base-red--900: hsl(6, 100%, 16%);
  --color-base-red--1000: hsl(6, 100%, 12%);
  --color-base-green--100: hsl(108, 29%, 97%);
  --color-base-green--200: hsl(109, 28%, 92%);
  --color-base-green--300: hsl(106, 28%, 85%);
  --color-base-green--400: hsl(107, 29%, 65%);
  --color-base-green--500: hsl(107, 30%, 49%);
  --color-base-green--600: hsl(107, 58%, 33%);
  --color-base-green--700: hsl(107, 65%, 24%);
  --color-base-green--800: hsl(107, 64%, 16%);
  --color-base-green--900: hsl(108, 63%, 11%);
  --color-base-green--1000: hsl(108, 64%, 8%);
  --color-base-blue--100: hsl(210, 17%, 98%);
  --color-base-blue--200: hsl(195, 12%, 94%);
  --color-base-blue--300: hsl(200, 13%, 87%);
  --color-base-blue--400: hsl(196, 12%, 70%);
  --color-base-blue--500: hsl(198, 12%, 57%);
  --color-base-blue--600: hsl(197, 15%, 43%);
  --color-base-blue--700: hsl(198, 25%, 33%);
  --color-base-blue--800: hsl(198, 35%, 21%);
  --color-base-blue--900: hsl(197, 90%, 12%);
  --color-base-blue--1000: hsl(198, 96%, 9%);
  --color-base-yellow--100: hsl(49, 67%, 95%);
  --color-base-yellow--200: hsl(52, 64%, 89%);
  --color-base-yellow--300: hsl(51, 64%, 77%);
  --color-base-yellow--400: hsl(51, 64%, 49%);
  --color-base-yellow--500: hsl(51, 64%, 40%);
  --color-base-yellow--600: hsl(51, 64%, 32%);
  --color-base-yellow--700: hsl(51, 64%, 24%);
  --color-base-yellow--800: hsl(51, 64%, 16%);
  --color-base-yellow--900: hsl(51, 63%, 11%);
  --color-base-yellow--1000: hsl(50, 64%, 8%);
  --color-base-lime--100: hsl(80, 53%, 97%);
  --color-base-lime--200: hsl(79, 49%, 90%);
  --color-base-lime--300: hsl(79, 51%, 78%);
  --color-base-lime--400: hsl(79, 51%, 51%);
  --color-base-lime--500: hsl(79, 85%, 34%);
  --color-base-lime--600: hsl(79, 86%, 27%);
  --color-base-lime--700: hsl(79, 85%, 21%);
  --color-base-lime--800: hsl(79, 86%, 14%);
  --color-base-lime--900: hsl(78, 87%, 9%);
  --color-base-lime--1000: hsl(79, 82%, 7%);
  --color-base-lightBlue--100: hsl(205, 86%, 97%);
  --color-base-lightBlue--200: hsl(207, 87%, 94%);
  --color-base-lightBlue--300: hsl(206, 91%, 87%);
  --color-base-lightBlue--400: hsl(207, 89%, 71%);
  --color-base-lightBlue--500: hsl(207, 79%, 57%);
  --color-base-lightBlue--600: hsl(207, 61%, 45%);
  --color-base-lightBlue--700: hsl(207, 61%, 34%);
  --color-base-lightBlue--800: hsl(206, 61%, 23%);
  --color-base-lightBlue--900: hsl(207, 61%, 15%);
  --color-base-lightBlue--1000: hsl(207, 60%, 11%);
  --color-base-pink--100: hsl(345, 40%, 98%);
  --color-base-pink--200: hsl(347, 33%, 95%);
  --color-base-pink--300: hsl(348, 36%, 89%);
  --color-base-pink--400: hsl(349, 34%, 75%);
  --color-base-pink--500: hsl(349, 34%, 64%);
  --color-base-pink--600: hsl(348, 34%, 53%);
  --color-base-pink--700: hsl(348, 40%, 41%);
  --color-base-pink--800: hsl(348, 40%, 27%);
  --color-base-pink--900: hsl(347, 41%, 18%);
  --color-base-pink--1000: hsl(349, 40%, 13%);
  --color-base-orange--100: hsl(31, 71%, 97%);
  --color-base-orange--200: hsl(31, 74%, 93%);
  --color-base-orange--300: hsl(31, 72%, 85%);
  --color-base-orange--400: hsl(31, 83%, 64%);
  --color-base-orange--500: hsl(31, 80%, 48%);
  --color-base-orange--600: hsl(31, 90%, 37%);
  --color-base-orange--700: hsl(31, 100%, 27%);
  --color-base-orange--800: hsl(31, 100%, 18%);
  --color-base-orange--900: hsl(31, 90%, 12%);
  --color-base-orange--1000: hsl(31, 79%, 9%);
  --color-base-teal--100: hsl(190, 63%, 97%);
  --color-base-teal--200: hsl(190, 63%, 92%);
  --color-base-teal--300: hsl(190, 63%, 81%);
  --color-base-teal--400: hsl(190, 63%, 60%);
  --color-base-teal--500: hsl(190, 80%, 42%);
  --color-base-teal--600: hsl(190, 80%, 33%);
  --color-base-teal--700: hsl(190, 78%, 25%);
  --color-base-teal--800: hsl(190, 75%, 17%);
  --color-base-teal--900: hsl(190, 85%, 10%);
  --color-base-teal--1000: hsl(190, 50%, 9%);
  --color-base-purple--100: hsl(253, 50%, 97%);
  --color-base-purple--200: hsl(253, 50%, 94%);
  --color-base-purple--300: hsl(253, 50%, 90%);
  --color-base-purple--400: hsl(253, 50%, 79%);
  --color-base-purple--500: hsl(253, 52%, 69%);
  --color-base-purple--600: hsl(253, 50%, 59%);
  --color-base-purple--700: hsl(253, 50%, 50%);
  --color-base-purple--800: hsl(253, 50%, 34%);
  --color-base-purple--900: hsl(253, 50%, 23%);
  --color-base-purple--1000: hsl(253, 50%, 16%);
  --color-indigo: rgb(85, 106, 203);
  --color-indigo--light: rgb(136, 151, 219);
  --color-indigo--lighter: rgb(187, 195, 234);
  --color-indigo--lightest: rgb(230, 233, 247);
  --color-indigo--dark: rgb(55, 69, 132);
  --color-white--rgb: 255, 255, 255;
  --color-black--rgb: 0, 0, 0;
  --color-brand--highlight: hsl(86, 100%, 46%);
  --color-greyBlue--rgb: 101, 120, 132;
  --color-purple--light: var(--color-base-purple--400);
  --color-purple--lighter: var(--color-base-purple--300);
  --color-purple--lightest: var(--color-base-purple--100);
  --color-teal: var(--color-base-teal--500);
  --color-teal--light: var(--color-base-teal--400);
  --color-teal--lighter: var(--color-base-teal--300);
  --color-teal--lightest: var(--color-base-teal--200);
  --color-teal--dark: var(--color-base-teal--700);
  --color-blue: var(--color-base-blue--900);
  --color-blue--light: var(--color-base-blue--700);
  --color-blue--lighter: var(--color-base-blue--500);
  --color-blue--lightest: var(--color-base-blue--300);
  --color-blue--dark: var(--color-base-blue--1000);
  --color-taupe: var(--color-base-taupe--200);
  --color-taupe--light: var(--color-base-taupe--100);
  --color-taupe--dark: var(--color-base-taupe--300);
  --color-green: var(--color-base-green--600);
  --color-green--light: var(--color-base-green--500);
  --color-green--lighter: var(--color-base-green--400);
  --color-green--lightest: var(--color-base-green--200);
  --color-green--dark: var(--color-base-green--800);
  --color-lime: var(--color-base-lime--500);
  --color-lime--light: var(--color-base-lime--400);
  --color-lime--lighter: var(--color-base-lime--300);
  --color-lime--lightest: var(--color-base-lime--200);
  --color-lime--dark: var(--color-base-lime--700);
  --color-yellowGreen: var(--color-base-lime--500);
  --color-yellowGreen--light: var(--color-base-lime--400);
  --color-yellowGreen--lighter: var(--color-base-lime--300);
  --color-yellowGreen--lightest: var(--color-base-lime--200);
  --color-yellowGreen--dark: var(--color-base-lime--600);
  --color-yellow: var(--color-base-yellow--400);
  --color-yellow--light: var(--color-base-yellow--300);
  --color-yellow--lighter: var(--color-base-yellow--200);
  --color-yellow--lightest: var(--color-base-yellow--100);
  --color-yellow--dark: var(--color-base-yellow--600);
  --color-red: var(--color-base-red--600);
  --color-red--light: var(--color-base-red--400);
  --color-red--lighter: var(--color-base-red--300);
  --color-red--lightest: var(--color-base-red--200);
  --color-red--dark: var(--color-base-red--800);
  --color-grey: var(--color-base-grey--400);
  --color-grey--light: var(--color-base-grey--300);
  --color-grey--lighter: var(--color-base-grey--200);
  --color-grey--lightest: var(--color-base-grey--100);
  --color-grey--dark: var(--color-base-grey--600);
  --color-overlay: rgba(var(--color-black--rgb), 0.32);
  --color-overlay--dimmed: rgba(var(--color-white--rgb), 0.6);
  --color-white: rgba(var(--color-white--rgb), 1);
  --color-black: rgba(var(--color-black--rgb), 1);
  --color-greyBlue: var(--color-base-blue--600);
  --color-greyBlue--light: var(--color-base-blue--500);
  --color-greyBlue--lighter: var(--color-base-blue--400);
  --color-greyBlue--lightest: var(--color-base-blue--200);
  --color-greyBlue--dark: var(--color-base-blue--800);
  --color-lightBlue: var(--color-base-lightBlue--500);
  --color-lightBlue--light: var(--color-base-lightBlue--400);
  --color-lightBlue--lighter: var(--color-base-lightBlue--300);
  --color-lightBlue--lightest: var(--color-base-lightBlue--200);
  --color-lightBlue--dark: var(--color-base-lightBlue--600);
  --color-purple: var(--color-base-pink--800);
  --color-purple--dark: var(--color-base-pink--900);
  --color-pink: var(--color-base-pink--600);
  --color-pink--light: var(--color-base-pink--500);
  --color-pink--lighter: var(--color-base-pink--400);
  --color-pink--lightest: var(--color-base-pink--200);
  --color-pink--dark: var(--color-base-pink--800);
  --color-orange: var(--color-base-orange--500);
  --color-orange--light: var(--color-base-orange--400);
  --color-orange--lighter: var(--color-base-orange--300);
  --color-orange--lightest: var(--color-base-orange--200);
  --color-orange--dark: var(--color-base-orange--600);
  --color-brown: var(--color-base-orange--700);
  --color-brown--light: var(--color-base-orange--600);
  --color-brown--lighter: var(--color-base-taupe--300);
  --color-brown--lightest: var(--color-base-taupe--200);
  --color-brown--dark: var(--color-base-orange--800);
  --color-navy: var(--color-base-lightBlue--700);
  --color-navy--light: var(--color-base-lightBlue--600);
  --color-navy--lighter: var(--color-base-blue--300);
  --color-navy--lightest: var(--color-base-blue--200);
  --color-navy--dark: var(--color-base-lightBlue--800);
  --color-base-white: var(--color-white);
  --color-base-black: var(--color-black);
  --color-interactive: var(--color-base-green--600);
  --color-interactive--hover: var(--color-base-green--700);
  --color-interactive--subtle: var(--color-base-blue--800);
  --color-interactive--subtle--hover: var(--color-base-blue--900);
  --color-interactive--background: var(--color-base-taupe--300);
  --color-interactive--background--hover: var(--color-base-taupe--400);
  --color-destructive: var(--color-base-red--600);
  --color-destructive--hover: var(--color-base-red--700);
  --color-disabled: var(--color-base-grey--400);
  --color-disabled--secondary: var(--color-base-grey--200);
  --color-focus: var(--color-base-blue--500);
  --color-critical: var(--color-base-red--600);
  --color-critical--surface: var(--color-base-red--200);
  --color-critical--onSurface: var(--color-base-red--800);
  --color-warning: var(--color-base-yellow--400);
  --color-warning--surface: var(--color-base-yellow--200);
  --color-warning--onSurface: var(--color-base-yellow--700);
  --color-success: var(--color-base-green--600);
  --color-success--surface: var(--color-base-green--200);
  --color-success--onSurface: var(--color-base-green--800);
  --color-informative: var(--color-base-lightBlue--500);
  --color-informative--surface: var(--color-base-lightBlue--200);
  --color-informative--onSurface: var(--color-base-lightBlue--700);
  --color-inactive: var(--color-base-blue--700);
  --color-inactive--surface: var(--color-base-blue--200);
  --color-inactive--onSurface: var(--color-base-blue--900);
  --color-heading: var(--color-base-blue--900);
  --color-text: var(--color-base-blue--800);
  --color-text--secondary: var(--color-base-blue--600);
  --color-text--reverse: var(--color-white);
  --color-text--reverse--secondary: var(--color-base-blue--300);
  --color-icon: var(--color-base-blue--800);
  --color-surface: var(--color-white);
  --color-surface--hover: var(--color-base-taupe--200);
  --color-surface--reverse: var(--color-base-blue--900);
  --color-surface--active: var(--color-base-taupe--300);
  --color-surface--background: var(--color-base-taupe--200);
  --color-surface--background--hover: var(--color-base-taupe--300);
  --color-surface--background--subtle: var(--color-base-taupe--100);
  --color-surface--background--subtle--hover: var(--color-base-taupe--300);
  --color-border: var(--color-base-blue--300);
  --color-border--interactive: var(--color-base-blue--300);
  --color-border--section: var(--color-base-blue--900);
  --color-brand: var(--color-base-lime--500);
  --color-request: var(--color-base-orange--600);
  --color-request--surface: var(--color-base-orange--200);
  --color-request--onSurface: var(--color-base-orange--800);
  --color-quote: var(--color-base-pink--700);
  --color-quote--surface: var(--color-base-pink--200);
  --color-quote--onSurface: var(--color-base-pink--800);
  --color-job: var(--color-base-green--600);
  --color-job--surface: var(--color-base-green--200);
  --color-job--onSurface: var(--color-base-green--700);
  --color-task: var(--color-base-lightBlue--800);
  --color-task--surface: var(--color-base-blue--200);
  --color-task--onSurface: var(--color-base-blue--800);
  --color-invoice: var(--color-base-lightBlue--700);
  --color-invoice--surface: var(--color-base-lightBlue--200);
  --color-invoice--onSurface: var(--color-base-lightBlue--800);
  --color-visit: var(--color-job);
  --color-visit--surface: var(--color-job--surface);
  --color-visit--onSurface: var(--color-job--onSurface);
  --color-event: var(--color-base-yellow--400);
  --color-event--surface: var(--color-base-yellow--200);
  --color-event--onSurface: var(--color-base-yellow--700);
  --color-payments: var(--color-invoice);
  --color-payments--surface: var(--color-invoice--surface);
  --color-payments--onSurface: var(--color-invoice--onSurface);
  --color-client: var(--color-base-taupe--700);
  --color-client--surface: var(--color-base-taupe--200);
  --color-client--onSurface: var(--color-base-taupe--800);
  --radius-base: 8px;
  --radius-small: 4px;
  --radius-large: 16px;
  --radius-larger: 24px;
  --radius-circle: 100%;
  --space-minuscule: 1px;
  --space-smallest: 2px;
  --space-smaller: 4px;
  --space-small: 8px;
  --space-slim: 12px;
  --space-base: 16px;
  --space-large: 24px;
  --space-larger: 32px;
  --space-largest: 48px;
  --space-extravagant: 64px;
  --shadow-low: 0px var(--space-minuscule) var(--space-smallest) rgba(0, 0, 0, 0.25), 0px 0px var(--space-smallest) rgba(0, 0, 0, 0.1);
  --shadow-base: 0px var(--space-minuscule) var(--space-smaller) 0px rgba(0, 0, 0, 0.1), 0px var(--space-smaller) 12px 0px rgba(0, 0, 0, 0.05);
  --shadow-high: 0px var(--space-base) var(--space-base) 0px rgba(0, 0, 0, 0.075), 0px 0px var(--space-small) 0px rgba(0, 0, 0, 0.05);
  --shadow-focus: 0px 0px 0px var(--space-smallest) var(--color-surface), 0px 0px 0px var(--space-smaller) var(--color-focus);
  --timing-quick: 100ms;
  --timing-base: 200ms;
  --timing-slow: 300ms;
  --timing-slower: 400ms;
  --timing-slowest: 500ms;
  --timing-loading: 1000ms;
  --timing-loading--extended: 2000ms;
  --opacity-overlay: 0.8;
  --opacity-pressed: 0.6;
  --elevation-default: 0;
  --elevation-base: 1;
  --elevation-menu: 6;
  --elevation-datepicker: 6;
  --elevation-modal: 1001;
  --elevation-tooltip: 1002;
  --elevation-toast: 1003;
  --typography--letterSpacing-base: 0;
  --typography--letterSpacing-loose: 0.4;
  --typography--fontFamily-normal: Inter, Helvetica, Arial, sans-serif;
  --typography--fontFamily-display: Jobber Pro, Poppins, Helvetica, Arial, sans-serif;
  --typography--lineHeight-large: 1.34;
  --typography--lineHeight-larger: 1.5;
  --typography--lineHeight-largest: 1.75;
  --typography--lineHeight-jumbo: 2;
  --typography--lineHeight-extravagant: 4;
  --typography--lineHeight-base: 1.25;
  --typography--lineHeight-tight: 1.2;
  --typography--lineHeight-tighter: 1.143;
  --typography--lineHeight-tightest: 1.12;
  --typography--lineHeight-minuscule: 1.08;
  --typography--fontSize-extravagant: 48px;
  --typography--fontSize-jumbo: 36px;
  --typography--fontSize-largest: 24px;
  --typography--fontSize-larger: 20px;
  --typography--fontSize-large: 16px;
  --typography--fontSize-base: 14px;
  --typography--fontSize-small: 12px;
  --typography--fontSize-smaller: 10px;
}


/* Disable linter since we need to style body directly. */
/* stylelint-disable-next-line selector-max-type */
body {
  color: var(--color-text);
  font-family: var(--typography--fontFamily-normal);
  font-size: var(--typography--fontSize-base);
  line-height: var(--typography--lineHeight-larger, 1.5);
  background-color: var(--color-surface);
}

@keyframes spinning {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@custom-media --small-screens-and-below (max-width: 489px);
@custom-media --small-screens-and-up (min-width: 490px);
@custom-media --medium-screens-and-up (min-width: 768px);
@custom-media --large-screens-and-up (min-width: 1080px);
@custom-media --extra-large-screens-and-up (min-width: 1440px);

@media (max-width: 639px) {
  :root {
    --typography--fontSize-extravagant: calc(
      var(--typography--fontSize-large) * 2.5
    );
    /* 40 */
    --typography--fontSize-jumbo: calc(
      var(--typography--fontSize-large) * 1.75
    );
    /* 28 */
    --typography--fontSize-largest: calc(
      var(--typography--fontSize-large) * 1.375
    );
    /* 22 */
  }
}