/*
 * The Translate bar makes the absolutely-positioned header taller. Push the page
 * down by exactly the bar's height (--translate-bar-height, set by _navbar.twig)
 * so the header offsets in custom.css give the same layout below the header as
 * with Translate off. The padding also stops the first section's margin-top from
 * collapsing through <body>, which would drag the header down with it.
 */
body:has(.header_area .div-google-translate) {
  padding-top: var(--translate-bar-height, 52px);
}

/* Reserve the widget's height so the page doesn't shift when Google fills it in. */
#google_translate_element {
  min-height: 36px;
}
.google-translate {
  display: flex;
  justify-content: flex-end;
  padding: 4px 8px;
  z-index: 40;
}

.google-translate * {
  color: white !important;
}

select.goog-te-combo, 
select.goog-te-combo option {
  color: #555 !important;
}

.div-google-translate{
  background-color: black;
}