/* ------------ General Stuff ------------*/

html {
    font-family: sans-serif;
}

.btn {
  font-weight: lighter;
}

.lineChartContainer {
    margin-top: 10px;
    margin-left: 0px;
    margin-right: 20px;
    margin-bottom: 10px;
}

.blurry {
  filter: blur(5px);
}

.unableToLoadData {
  display: none;
}

.oldData {
  display: none;
}

.newData {
  display: none;
}

.bb-tooltip {
  color:black
}

/* ------------ Accordion Stuff ------------*/

.accordion {
  --bs-accordion-btn-focus-box-shadow: none;
  --bs-accordion-btn-focus-border-color: none;
  --bs-accordion-active-color: white;
  --bs-accordion-active-bg: #212529;
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

/* .accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
}

.accordion-button.collapsed::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e") !important;
} */

.accordion-item {
  border-bottom-width: 0px;
}

.accordion-button:not(.collapsed)::after,
.accordion-button::after {
  background-image: unset !important;
}

/* ------------ Chart Stuff ------------*/

.bb-chart-arcs-background {
  display: none;
}

.bb-chart-arc path {
  stroke: #212529;
  stroke-width: 10;
}

.bb-chart-arcs text {
  fill: white;
  font-family: var(--bs-body-font-family);
  font-weight: 200;
  dominant-baseline: auto; /* <--- ignore this warning from vscode*/
}

/* ------------ Navbar Stuff ------------*/

.refresh-button {
  width: 7.5ch
}

.fw-lighter img {
  border-radius: 5px;
  margin-right: 5px;
}

.spinner-grow {
  animation-duration: 2s;
  margin-bottom: 3px;
  width: 8px; 
  height: 8px;
}

.error-dot {
  height: 8px;
  width: 8px;
  background-color: #ff0000;
  border-radius: 50%;
  margin-bottom: 1px;
  display: inline-block;
}

#areaListDropdown {
  width: 160px; 
  margin-right: 10px;
}

/* ------------ Settings Stuff ------------*/

.form-check-input:checked {
  background-color: green;
  border-color: green;
}

[data-bs-theme=dark] .form-switch .form-check-input:not(:checked):not(:focus) {
  --bs-form-switch-bg:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='rgba%28255, 255, 255, 1%29'/%3e%3c/svg%3e");
}

.form-check-input {
  border:var(--bs-border-width) solid #fff;
}

.navbar-brand {
  margin-right: 0px;
}

#defaultAreaButton {
  margin-bottom: 16px;
}

/* ------------ Map Stuff ------------*/

.leaflet-container a { /* colors attribution text */
  color: black;
}

.offcanvas.offcanvas-start {
  border-right: 0;
  border-left: 0;
  width: 100%;
}

.offcanvas.offcanvas-end {
  border-right: 0;
  border-left: 0;
  width: 100%;
}

.offcanvas-map {
  padding-top: 0px;
  padding-bottom: 0px;
  padding-right: 0px;
  padding-left: 0px;
  display: flex;
  flex-direction: column;
}

#map { 
  flex-grow: 1; /* fills space left */
  box-sizing: border-box;
  margin-right: 12px;
  margin-left: 12px;
  margin-bottom: 0px;
  border-radius: 5px;
}

.leaflet-tile-container { /* adds grayscale effect to map */
  filter: grayscale(1);
  -webkit-filter: grayscale(1);
}

.leaflet-popup-content-wrapper, .leaflet-popup-tip {
  background: #212529; /* makes popup dark */
}

.leaflet-popup-content {
  margin-right: 5px;
  margin-left: 5px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.leaflet-popup-close-button {
  display:none;
}
/* ------------ Bottom Buttons ------------*/

.sticky-bottom {
  z-index: 1050;
}

#bottomHomeButton {
  margin-right: 12px;
  margin-left: 12px;
}

 body { /* forces buttons to stay on bottom */
  height: 100vh;
}

.bottomButtons {
  --bs-btn-hover-border-color: darkgray;
  border-style: solid;
  border: darkgray;
  border-top-width: 1px;
  border-top-style: solid;
  border-left-width: 1px;
  border-left-style: solid;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-right-width: 1px;
  border-right-style: solid;
}

.fakeButtons { /* styling for disabled buttons used as status */
  border-style: none;
}

#statusText {
  border-left: none;
}

#bottomButtonBar {
  padding-bottom: 24px;
  z-index:1500;
}

#versionNo {
  padding-bottom: 48px;
}

@media (width <= 405px) { /* hides "Cascada" on smaller screens */
  #cascadaHomeWord {
    display: none;
  }
}

.alertAreaNav {
  position: sticky;
  z-index: 1044;
  top: 0;
}

#alertArea {
  margin-left: 12px;
  margin-right: 12px;
}

#loadingSpinner {
  margin-left: 12px;
  margin-right: 12px;
}

.scrollingAreaMain{
  display: flex;
  flex-direction: column;
  margin-top: 0px;
  position: fixed;
  overflow: scroll;
  bottom: 70px;
  top: 58px;
  left:0px;
  right:0px
}

#helpButton {
  margin-top: 100px;
}

.firebase-emulator-warning{
  display: none;
}

#enableNotificationButton {
  margin-left: 18px;
  margin-right: 18px;
  margin-bottom: 16px;
}

#defaultAreaButton {
  width: 10em;
  margin-left: 18px;
  margin-right: 12px;
  float:left;
}

.alert-orange {
  color: #ff9b6a;
  background-color: #331d01;
  /* border: 1px solid #994a04; */
}

.alert {
  border: 0px solid #994a04;
}