html,
body,
#viewDiv {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
}

/** Setting custom core Calcite theme variables for light (default) and dark modes */
body {
  --calcite-ui-brand: #3fa659;
  --calcite-ui-foreground-1: #f6fcf8;
  --calcite-ui-foreground-2: #e7f2ea;
  --calcite-ui-foreground-3: #ddeee2;
  --calcite-ui-border-3: #d2dfd5;
}

body.calcite-mode-dark {
  --calcite-ui-brand: #3fa659;
  --calcite-ui-foreground-1: #1e2520;
  --calcite-ui-foreground-2: #28312a;
  --calcite-ui-foreground-3: #1b231e;
  --calcite-ui-border-3: #334036;
}

/** Setting component-specific css variables for light (default) and dark modes **/
calcite-modal {
  --calcite-modal-scrim-background: rgba(30, 88, 48, 0.9);
}

body.calcite-mode-dark calcite-modal {
  --calcite-modal-scrim-background: rgba(51, 64, 54, 0.9);
}

/** Setting component-specific custom core Calcite theme variables */
#chip-type-national {
  --calcite-ui-icon-color: #c66a4a;
  --calcite-ui-brand: #c66a4a;
}

#chip-type-national[selected] {
  --calcite-ui-foreground-2: rgba(198, 106, 74, 0.3);
}

#chip-type-regional {
  --calcite-ui-icon-color: #3cccb4;
  --calcite-ui-brand: #3cccb4;
}

#chip-type-regional[selected] {
  --calcite-ui-foreground-2: rgba(60, 204, 180, 0.3);
}

#chip-type-state {
  --calcite-ui-icon-color: #7a81ff;
  --calcite-ui-brand: #7a81ff;
}

#chip-type-state[selected] {
  --calcite-ui-foreground-2: rgba(122, 129, 255, 0.3);
}

#chip-type-county {
  --calcite-ui-icon-color: #0096ff;
  --calcite-ui-brand: #0096ff;
}

#chip-type-county[selected] {
  --calcite-ui-foreground-2: rgba(0, 150, 255, 0.3);
}

#chip-type-local {
  --calcite-ui-icon-color: #f260a1;
  --calcite-ui-brand: #f260a1;
}

#chip-type-local[selected] {
  --calcite-ui-foreground-2: rgba(242, 95, 161, 0.3);
}

/** supporting styles */
calcite-action-pad {
  margin-inline-end: 0.5rem;
}

#chips {
  margin-inline-end: auto;
  margin-inline-start: 0.5rem;
}

#modal hr {
  margin: 1rem 0;
  border: 0;
  border-bottom: 1px solid var(--calcite-ui-border-3);
}

#modal ul li {
  margin-bottom: 0.5rem;
}

#modal calcite-notice {
  margin-bottom: 1.25rem;
}