:root {
  font-family: 'Inter', sans-serif;

  /* Base */
  --black: 0 0 0;
  --white: 255 255 255;

  /* Apple */
  --apple-50: rgb(254 245 242);
  --apple-100: rgb(253 236 231);
  --apple-200: rgb(252 223 214);
  --apple-300: rgb(250 204 189);
  --apple-400: rgb(249 170 143);
  --apple-500: rgb(250 90 49);
  --apple-600: rgb(223 50 16);
  --apple-700: rgb(204 2 2);
  --apple-800: rgb(145 1 1);
  --apple-900: rgb(115 0 0);
  --apple-1000: rgb(89 0 0);
  --apple-1100: rgb(54 0 0);

  /* Bunker */
  --bunker-50: rgb(247 248 249);
  --bunker-100: rgb(238 240 242);
  --bunker-200: rgb(229 232 235);
  --bunker-300: rgb(211 216 222);
  --bunker-400: rgb(181 190 202);
  --bunker-500: rgb(135 148 166);
  --bunker-600: rgb(106 119 139);
  --bunker-700: rgb(88 101 119);
  --bunker-800: rgb(60 70 86);
  --bunker-900: rgb(48 56 71);
  --bunker-1000: rgb(34 41 53);
  --bunker-1100: rgb(13 20 32);

  /* Dodger Blue */
  --dodger-blue-50: rgb(244 247 250);
  --dodger-blue-100: rgb(232 240 248);
  --dodger-blue-200: rgb(223 236 245);
  --dodger-blue-300: rgb(186 221 247);
  --dodger-blue-400: rgb(126 196 247);
  --dodger-blue-500: rgb(45 154 224);
  --dodger-blue-600: rgb(16 122 194);
  --dodger-blue-700: rgb(11 105 168);
  --dodger-blue-800: rgb(5 73 118);
  --dodger-blue-900: rgb(3 56 92);
  --dodger-blue-1000: rgb(3 42 71);
  --dodger-blue-1100: rgb(1 23 42);

  /* Magenta */
  --magenta-50: rgb(255 245 246);
  --magenta-100: rgb(254 235 238);
  --magenta-200: rgb(253 222 227);
  --magenta-300: rgb(251 203 212);
  --magenta-400: rgb(246 167 187);
  --magenta-500: rgb(246 92 147);
  --magenta-600: rgb(225 25 121);
  --magenta-700: rgb(197 20 104);
  --magenta-800: rgb(136 11 71);
  --magenta-900: rgb(112 7 58);
  --magenta-1000: rgb(84 3 42);
  --magenta-1100: rgb(51 1 23);

  /* Patina */
  --patina-50: rgb(231 253 240);
  --patina-100: rgb(197 251 218);
  --patina-200: rgb(159 250 189);
  --patina-300: rgb(142 235 183);
  --patina-400: rgb(97 209 157);
  --patina-500: rgb(87 162 132);
  --patina-600: rgb(53 132 100);
  --patina-700: rgb(63 122 99);
  --patina-800: rgb(40 77 62);
  --patina-900: rgb(35 61 49);
  --patina-1000: rgb(23 43 34);
  --patina-1100: rgb(10 21 15);

  /* Pollen */
  --pollen-50: rgb(255 248 223);
  --pollen-100: rgb(255 238 184);
  --pollen-200: rgb(255 228 133);
  --pollen-300: rgb(251 213 60);
  --pollen-400: rgb(251 174 14);
  --pollen-500: rgb(237 110 12);
  --pollen-600: rgb(201 80 11);
  --pollen-700: rgb(175 68 6);
  --pollen-800: rgb(122 46 2);
  --pollen-900: rgb(95 34 0);
  --pollen-1000: rgb(71 23 0);
  --pollen-1100: rgb(45 12 0);

  /* Violet */
  --violet-50: rgb(247 247 250);
  --violet-100: rgb(237 239 247);
  --violet-200: rgb(227 230 245);
  --violet-300: rgb(208 213 237);
  --violet-400: rgb(182 189 231);
  --violet-500: rgb(131 144 220);
  --violet-600: rgb(105 106 206);
  --violet-700: rgb(81 81 198);
  --violet-800: rgb(68 50 146);
  --violet-900: rgb(50 36 111);
  --violet-1000: rgb(37 26 85);
  --violet-1100: rgb(20 13 52);

  /* Neutral */
  --bunker: 65 71 72;
  --outerspace: #414748;

  /* Other variables */

  --tertiary-vista: #808ddb;
  --tertiary-orange: #e36015;
  --tertiary-orange-rgb: 227, 96, 21;

  --location-data-level: #dfecf5;
  --servicelandscape-data-level: #e5e8f7;
  --networkplan-data-level: #dce6e2;
  --location-data-level-more-sat: hsl(204, 82%, 82%);
  --servicelandscape-data-level-more-sat: hsl(233, 75%, 85%);
  --networkplan-data-level-more-sat: hsl(155, 45%, 70%);

  --text-color-400: white;
  --text-color-300: #bfbfbf;
  --text-color-200: #879192;

  --font-size-sm: 12px;
  --font-size-md: 14px;
  --font-size-lg: 20px;
  --font-size-xl: 28px;
}

body {
  overflow: hidden;
}

.maplibregl-popup-content {
  max-height: 520px;
  width: 450px;
  overflow: auto;
  overflow-x: hidden;
  padding: 0;

  .maplibregl-popup-close-button {
    color: white;
    scale: 2;
    top: 8px;
    right: 8px;
  }

  .popup-header {
    background-color: #3f7a63;
    color: white;
    padding: 12px 16px;
    font-size: 20px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
  }
}

#popupScaling {
  width: 100%;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
}

table {
  border-collapse: collapse;
  min-width: 95%;
  margin: 5px;
}

tr {
  border: solid thin;
}

td {
  border: solid thin;
  padding-left: 4px;
  padding-top: 4px;
}

html,
body {
  height: 100%;
  margin: 0;
}

#map {
  min-height: 100%;
  z-index: 1;
}

.maplibregl-ctrl-top-left {
  display: none;
}

.dot {
  height: 15px;
  width: 15px;
  margin-top: 3px;
  border: 1px solid black;

  border-radius: 50%;
  display: inline-block;
}

.parcel {
  height: 15px;
  width: 15px;
  margin-top: 3px;
  border: 2px solid red;
  display: inline-block;
}

.footprint {
  height: 15px;
  width: 15px;
  margin-top: 3px;
  border: 2px solid #e28743;
  display: inline-block;
  background-color: rgb(225, 135, 65, 0.5);
}

#information {
  position: absolute;
  right: 0;
  top: 75px;
  width: 300px;
  z-index: 1000;
  border-radius: 6px;
  border: 1px solid black;
  padding: 5px;
  margin: 10px;
  background-color: #cccccc;
  opacity: 85%;
  font-family: Arial, Verdana, Tahoma;
  font-size: 20px;
  font-weight: normal;
  color: #000000;
}

cqmt-side-menu {
  .custom-side-menu-icon {
    height: 100%;
    width: 100%;
  }
}

cqmt-toolbar {
  color: var(--outerspace);

  button,
  select {
    font-family: 'Inter', sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.125rem;
    letter-spacing: 1.5%;
    color: var(--outerspace);
  }

  select {
    background-color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    box-sizing: border-box;
    cursor: pointer;
    margin-right: 1rem;
  }

  #logoutButton {
    width: 100%;
  }

  #countyDataLevelDisplay {
    display: none;
    align-content: center;
    padding: 6px 14px;
    background: white;
    border-radius: 20px;
    font-size: 16px;
    height: fit-content;
    margin-top: 4px;
  }
}

.app-loading-overlay {
  position: fixed;
  inset: 0;
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  color: white;
  z-index: 2000;
  transition:
    opacity 240ms ease,
    visibility 240ms ease;
}

.app-loading-overlay-background-image {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url('https://verrav-public-assets.s3.us-east-1.amazonaws.com/verrav-static-background.webp')
    center/cover;
}

.app-loading-overlay-background-image.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loading-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.app-loading-panel {
  position: relative;
  z-index: 1;
  width: min(460px, 90vw);
  padding: 28px 32px;
  border-radius: 18px;
  background: rgba(6, 20, 26, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(10px);
  text-align: center;
}

.app-loading-spinner {
  width: 64px;
  height: 64px;
  margin: 0 auto 18px auto;
  border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.85);
  animation: app-loading-spin 900ms linear infinite;
}

.app-loading-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.4px;
  margin-bottom: 6px;
}

.app-loading-message {
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.82);
}

@keyframes app-loading-spin {
  to {
    transform: rotate(360deg);
  }
}

/* Tooltip styles */
.tippy-box[data-theme~='cqmt'] {
  font-family: 'Inter', sans-serif;
  background-color: white;
  color: var(--bunker-800);
  border-radius: 2px;
  box-shadow:
    1px 0 2px 0 rgba(13, 20, 32, 0.1),
    -1px 1px 2px 0 rgba(13, 20, 32, 0.05);
}

.tippy-box[data-theme~='cqmt'][data-placement^='top'] > .tippy-arrow::before {
  border-top-color: white;
}
.tippy-box[data-theme~='cqmt'][data-placement^='bottom']
  > .tippy-arrow::before {
  border-bottom-color: white;
}
.tippy-box[data-theme~='cqmt'][data-placement^='left'] > .tippy-arrow::before {
  border-left-color: white;
}
.tippy-box[data-theme~='cqmt'][data-placement^='right'] > .tippy-arrow::before {
  border-right-color: white;
}