:root {
  font-family: "Gotham", Helvetica, sans-serif;

  color-scheme: light dark;

  --modal-width-small: 800px;
  --modal-width-medium: 1120px;

  --tooltip-bg: #1c1d22;

  /* Light */
  --blue-100-light: #eff4ff;
  --blue-300-light: #92b1f5;
  --blue-500-light: #2563eb;
  --blue-700-light: #164bbf;
  --blue-800-light: #1543aa;
  --blue-900-light: #0c358e;
  --green-100-light: #e8fff3;
  --green-300-light: #a7e6c4;
  --green-500-light: #50cd89;
  --green-600-light: #47be7d;
  --green-700-light: #309c61;
  --green-800-light: #21814c;
  --green-900-light: #167340;
  --red-100-light: #fff5f6;
  --red-300-light: #fba0ab;
  --red-500-light: #f1414c;
  --red-700-light: #c9111c;
  --red-800-light: #aa0812;
  --red-900-light: #800211;
  --yellow-100-light: #fefceb;
  --yellow-300-light: #ffe380;
  --yellow-500-light: #ffc700;
  --yellow-700-light: #cc9f00;
  --yellow-800-light: #806300;
  --yellow-900-light: #4d3c00;
  --purple-100-light: #f4effd;
  --purple-300-light: #b89cf4;
  --purple-500-light: #7239ea;
  --purple-700-light: #4313aa;
  --purple-800-light: #391784;
  --purple-900-light: #331474;
  /* Dark */
  --blue-100-dark: #172331;
  --blue-300-dark: #0d6ad7;
  --blue-500-dark: #1b84ff;
  --blue-700-dark: #8dc1ff;
  --blue-800-dark: #d1e6ff;
  --blue-900-dark: #e9f3ff;
  --green-100-dark: #163022;
  --green-300-dark: #309c61;
  --green-500-dark: #50cd89;
  --green-600-dark: #85dcac;
  --green-700-dark: #a7e6c4;
  --green-800-dark: #dcf5e7;
  --green-900-dark: #e8fff3;
  --red-100-dark: #302024;
  --red-300-dark: #c9113e;
  --red-500-dark: #f1416c;
  --red-700-dark: #f8a0b5;
  --red-800-dark: #fcd9e2;
  --red-900-dark: #fff5f8;
  --yellow-100-dark: #4d3c00;
  --yellow-300-dark: #cc9f00;
  --yellow-500-dark: #ffc700;
  --yellow-700-dark: #ffe380;
  --yellow-800-dark: #fff4cc;
  --yellow-900-dark: #fefce8;
  --purple-100-dark: #272134;
  --purple-300-dark: #4313aa;
  --purple-500-dark: #7239ea;
  --purple-700-dark: #b89cf4;
  --purple-800-dark: #e3d7fb;
  --purple-900-dark: #f4effd;

  --color-primary-500: light-dark(var(--blue-500-light), var(--blue-500-dark));

  --color-primary-1: light-dark(var(--blue-100-light), var(--blue-100-dark));
  --color-primary-2: light-dark(var(--blue-300-light), var(--blue-300-dark));
  --color-primary-3: light-dark(var(--blue-300-dark), var(--blue-500-dark));
  --color-primary-4: light-dark(var(--blue-700-light), var(--blue-700-dark));
  --color-primary-5: light-dark(var(--blue-900-light), var(--blue-900-dark));

  --color-success-1: light-dark(var(--green-100-light), var(--green-100-dark));
  --color-success-2: light-dark(var(--green-300-light), var(--green-300-dark));
  --color-success-3: light-dark(var(--green-500-light), var(--green-500-dark));
  --color-success-4: light-dark(var(--green-700-light), var(--green-700-dark));
  --color-success-5: light-dark(var(--green-900-light), var(--green-900-dark));

  --color-danger-1: light-dark(var(--red-100-light), var(--red-100-dark));
  --color-danger-2: light-dark(var(--red-300-light), var(--red-300-dark));
  --color-danger-3: light-dark(var(--red-500-light), var(--red-500-dark));
  --color-danger-4: light-dark(var(--red-700-light), var(--red-700-dark));
  --color-danger-5: light-dark(var(--red-900-light), var(--red-900-dark));

  --color-warning-1: light-dark(
    var(--yellow-100-light),
    var(--yellow-100-dark)
  );
  --color-warning-2: light-dark(
    var(--yellow-300-light),
    var(--yellow-300-dark)
  );
  --color-warning-3: light-dark(
    var(--yellow-500-light),
    var(--yellow-500-dark)
  );
  --color-warning-4: light-dark(
    var(--yellow-700-light),
    var(--yellow-700-dark)
  );
  --color-warning-5: light-dark(
    var(--yellow-900-light),
    var(--yellow-900-dark)
  );

  --color-info-1: light-dark(var(--purple-100-light), var(--purple-100-dark));
  --color-info-2: light-dark(var(--purple-300-light), var(--purple-300-dark));
  --color-info-3: light-dark(var(--purple-500-light), var(--purple-500-dark));
  --color-info-4: light-dark(var(--purple-700-light), var(--purple-700-dark));
  --color-info-5: light-dark(var(--purple-900-light), var(--purple-900-dark));

  --size-large-heading-1: 30px;
  --size-large-heading-2: 24px;
  --size-heading-1: 20px;
  --size-heading-2: 18px;
  --size-text-xl: 16px;
  --size-text-base: 14px;
  --size-text-small: 12px;
  --size-text-xs: 10px;

  --lh-large-heading-1: 36px;
  --lh-large-heading-2: 32px;
  --lh-heading-1: 28px;
  --lh-heading-2: 26px;
  --lh-text-xl: 24px;
  --lh-text-base: 22px;
  --lh-text-small: 18px;
  --lh-text-xs: 14px;

  font-size: var(--size-text-base);
  font-weight: 400;
  line-height: var(--lh-text-base);

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

html {
  box-sizing: border-box;
  @media screen and (max-width: 1023px) {
    height: 100%;
  }
}

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

a:hover {
  color: #535bf2;
}

body {
  margin: 0;
  display: flex;
  overflow: hidden;
  background-color: #000000b2;
  letter-spacing: 0.2px;

  @media screen and (max-width: 1023px) {
    height: 100%;
  }
}

textarea,
select,
input {
  font-family: "Gotham", Helvetcia, sans-serif;
}

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

  a:hover {
    color: #747bff;
  }

  button {
    background-color: #f9f9f9;
  }
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-Light-Cgxgpa9O.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-LightItalic-jv624GFW.otf") format("opentype");
  font-weight: 300;
  font-style: italic;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-Book-Ddnc0mP5.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-BookItalic-DQndlvBf.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-Medium-DFe0jN_2.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-MediumItalic-DFxIRa4O.otf")
    format("opentype");
  font-weight: 500;
  font-style: italic;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-Bold-BntXFd9F.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: "Gotham";
  src: url("/assets/Gotham-BoldItalic-DFFGNxTU.otf") format("opentype");
  font-weight: 700;
  font-style: italic;
}

@font-face {
  font-family: "PlusJakartaSans";
  src: url("/assets/PlusJakartaSans-Light-BEUrv5cv.otf")
    format("opentype");
  font-weight: 300;
  font-style: normal;
}

@font-face {
  font-family: "PlusJakartaSans";
  src: url("/assets/PlusJakartaSans-Medium-CfVGJ24J.otf")
    format("opentype");
  font-weight: 500;
  font-style: normal;
}

@font-face {
  font-family: "PlusJakartaSans";
  src: url("/assets/PlusJakartaSans-Bold-CIwQFmLF.otf")
    format("opentype");
  font-weight: 700;
  font-style: normal;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2em;
  height: 2em;
  animation-fill-mode: both;
  animation: bblFadInOut 1.8s infinite ease-in-out;
}

.loader {
  font-size: 7px;
  position: relative;
  text-indent: -9999em;
  transform: translateZ(0);
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: "";
  position: absolute;
  top: 0;
}

.loader:before {
  left: -2.5em;
  animation-delay: -0.32s;
}

.loader:after {
  left: 2.5em;
}

@keyframes bblFadInOut {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* Google Places Autocomplete Styling */
.pac-container {
  background-color: light-dark(white, var(--tooltip-bg));
  border: 1px solid var(--color-primary-1);
  border-radius: 8px;
  box-shadow:
    0 4px 6px -1px rgba(0, 0, 0, 0.1),
    0 2px 4px -1px rgba(0, 0, 0, 0.06);
  font-family: inherit;
  z-index: 9999;
}

.pac-container .pac-item {
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--color-primary-1);
  color: var(--color-primary-4);
  cursor: pointer;
  font-size: var(--size-text-base);
  line-height: var(--lh-text-base);
  padding: 8px 12px;
}

.pac-container .pac-icon {
  margin-top: 2px;
  flex-shrink: 0;
  align-self: flex-start;
}

.pac-container .pac-item:first-child {
  border-top: none;
}

.pac-container .pac-item:hover,
.pac-container .pac-item-selected {
  background-color: var(--color-primary-1);
}

.pac-container .pac-item-query {
  display: inline;
  margin-right: 8px;
  color: var(--color-primary-5);
  font-weight: 500;
}

/* Hide Google Places container when modal is closing or closed */
.modal-closing .pac-container,
.modal-closed .pac-container {
  display: none !important;
}

/* App styles (from App.css) */
#root {
  width: 100%;
  margin: 0;
  padding: 0;
}

.modal {
  box-sizing: content-box;
}