html,
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
  font-size: 0.9rem;
  max-width: 100vw;
  max-height: 100dvh;
  overflow: hidden;
}

body {
  --bx-shdw: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 2px 4px 0 rgba(0, 0, 0, 0.16);
  --t-bkg: #ffffffbb;
  --text-color: #222;
  --text-color-grad1: #444;
  --text-color-grad2: #666;
  --bkg-color: rgb(255, 255, 255);
  --bkg-color-grad1: #ddd;
  --bkg-color-grad2: #bbb;
  --lnk: #0000ff;
  --lnk-visited: #800080;
  --lnk-hover: #0099ff;
  --lnk-active: #ff0000;
  --tst: #ff0000;
  --error-color: #bb0000;
  --svg-filter: none;
  --warning-color: #ffa500;
}

girafe-theme-select {
  position: fixed;
  bottom: 10rem;
  left: 1rem;
  z-index: 9;
}

girafe-oauth {
  width: 4rem;
  height: 4rem;
}

.bottom-button-container-mobile {
  position: absolute;
  width: calc(100vw - 2rem);
  bottom: calc(env(safe-area-inset-bottom) + 3rem);
  z-index: 1;
  left: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  grid-column-gap: 5px;
  grid-row-gap: 5px;
  justify-items: center;
  align-items: center;
  pointer-events: none;
}

.bottom-button-container-mobile > * {
  pointer-events: auto;
}

girafe-search {
  position: fixed;
  top: max(2.5em, calc(env(safe-area-inset-top) + 0.5rem));
  left: 1rem;
  right: 1rem;
  z-index: 20;
}

#content {
  position: absolute;
  display: flex;
  flex-direction: column;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

girafe-map {
  position: relative;
  width: 100%;
  height: 100%;
}