@import "esri-overrides.css";
@import "modal.css";

@import "header.css";
@import "side-panel.css";
@import "bottom-panel.css";
@import "modal.css";
@import "map.css";

.dark-mode {
  --background-color: #242424;
  --text-color: #d1d1d1;
  --abl-orange: #f57c00;
  --abl-grey: #424242;
}

.dark-mode .not-dark-mode {
  display: none;
}

.only-dark-mode {
  display: none;
}

.dark-mode .only-dark-mode {
  display: block;
}

.dark-mode a {
  color: var(--abl-orange);
}

html,
body {
  padding: 0;
  margin: 0;
  height: 100%;
  width: 100%;
  overflow: hidden;
  font-family: "Nunito Sans", sans-serif;
  letter-spacing: 1px;
  color: var(--text-color);
  background-color: var(--background-color);
}

.disableCaret {
  -webkit-user-select: none; /* Chrome all / Safari all */
  -moz-user-select: none; /* Firefox all */
  -ms-user-select: none; /* IE 10+ */
  user-select: none;
}

.not-supported {
  padding: 50px;
}

h1 {
  text-transform: uppercase;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hidden {
  display: none;
}

/* Scroll bars */
::-webkit-scrollbar {
  border-radius: 3px;
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-thumb {
  border-radius: 3px;
  opacity: 0.8;
  background: var(--abl-grey);
}

/* remove outline, mostly for esri components TODO: possibly make this esri specific */
:focus {
  outline: none;
}

:focus:after {
  outline: none !important;
}

.no-focus:focus {
  outline: none !important;
  box-shadow: none;
}