:root {
  --theme-transparent-dark: rgba(20, 25, 35, 0.85) !important;
}

div[class*="Branding"] {
  display: none !important;
}

div[class*="SidePanelContainer"] {
  padding-top: 24px;
}

.tjs-mobile-header__ui > div {
  background-color: #1b2028;
}

.tjs-mobile-header__group-right {
  background: transparent !important;
}

button[class*="HamburgerButton"] {
  background: rgb(55 118 178) !important;
}

div[class*="BoxHelpfulHints"] {
  color: #cbd5e1;
  line-height: 1.6;
}

button[class*="SidePanel"][class*="StyledButton"] {
  background-color: rgb(55 118 178);
}

div[class*="SidePanel"]
  > div[class*="Box"]:first-child
  > div[class*="Box"]:first-child
  span[class*="TextSpan"] {
  color: #cbd5e1;
}

div[class*="SidePanel"]
  > div[class*="Box"]:first-child
  > div[class*="Box"]:first-child
  svg[class*="Icon"] {
  color: #cbd5e1;
  fill: #cbd5e1;
}

div[class*="WelcomeMessage"]div[class*="Box"] {
  color: #e2e8f0 !important;
}

/* .tjs-standard-user-interface__story-wrapper > div > div > div {
  background: rgb(64 79 92);
} */

.tjs-standard-user-interface__story-wrapper button {
  border-radius: 4px;
}

div[class*="BottomBar"] {
  background: rgba(20, 25, 35, 0.9);
  color: #e2e8f0;
  padding: 8px 0;
  padding-left: 18px;
  border-radius: 8px;
}

div[class*="BottomBar"] :is(a, span, label) {
  color: #cbd5e1;
}

div[class*="DistanceLegend"] {
  background: rgb(32, 31, 31);
}
/*
.tjs-_buttons__btn--map {
  color: rgb(96 95 104) !important;
  background-color: rgb(255 255 255 / 86%) !important;
}

div[class*="MapNavigationItem"] div {
  background: rgb(236, 225, 225);
  }

div[class*="ZoomControl"] {
  background: rgb(236, 225, 225);
  border-color: rgb(156, 163, 175);
}

div[class*="MapIconButton"] > button {
  background: rgb(236, 225, 225);
  border-color: rgb(156, 163, 175);
} */