header { min-height: 30px; display: grid; grid-auto-rows: 30px; grid-template-columns: max-content auto max-content; grid-column-gap: 2px; flex: 0 0 auto; font-size: 14px;
         background: rgb(var(--rgb-dark)); color: rgb(var(--rgb-light)); white-space: nowrap; padding-left: 2px; margin: 0 -1px; }
header a, header .element a, header a.element, header a[href] { color: rgb(var(--rgb-light)); }
header a.button { background: rgb(var(--rgb-dark)); border: 1px solid rgba(var(--rgb-light),0.5); color: rgb(var(--rgb-light)); }
header a.button[href]:hover { border-color: transparent; background: rgba(var(--rgb-light),0.2); }
header label { color: rgb(var(--rgb-light)); }
header .icon { height: 24px; width: 24px; margin: 0; display: block; }
header>div { display: flex; justify-self: stretch; align-items: center; }
header>div:first-child { grid-area: 1 / 1 / 2 / 2; justify-content: start; }
header>div:not(:first-child):not(:last-child) { grid-area: 1 / 2 / 2 / 3; justify-content: center; overflow: hidden; }
header>div:last-child { grid-area: 1 / 3 / 2 / 4; justify-content: end; }

@media (max-width: 576px){
  header { grid-column-gap: 0; grid-row-gap: 2px; }
  header>div:not(:first-child):not(:last-child) { grid-area: 2 / 1 / 3 / 4; }
  header .wideonly { display: none; }
}

header .select { height: 30px; margin-left: 0; }
header .select>div:first-child { padding: 0 6px; cursor: pointer; display: flex; align-items: center; height: 100%; user-select: none; transition: background linear 0.1s; }
header .select>div:first-child:hover { background: rgba(var(--rgb-light),0.2); }
header .select.open>div:first-child { background: rgba(var(--rgb-light),0.2); }
header .select>div:first-child>i { margin-left: 4px; opacity: 0.7; font-size: 10px; }
header .select>div:first-child>* { line-height: 30px; }
header .select>div:last-child>div { position: absolute; z-index: 100; display: none; flex-direction: column; background: rgb(var(--rgb-white)); box-shadow: 1px 4px 4px rgb(var(--rgb-black)); }
header .select.open>div:last-child>div { display: flex; min-width: 210px; max-height: 300px; overflow-y: auto; }
header .select>div:last-child>div>div { flex: 0 0 auto; display: flex; transition: all linear 0.1s; }
header .select>div:last-child>div>div:not(:last-child) { border-bottom: 1px solid lightgray; }
header .select>div:last-child>div>div:hover { background: rgb(var(--rgb-light)); box-shadow: 0 0 0 1px rgb(var(--rgb-dark)) inset; }
header .select>div:last-child>div>div>a { display: flex; color: rgb(var(--rgb-black)); line-height: 28px; }
header .select>div:last-child>div>div>a>div { margin-right: 6px; outline: none; }
header .select>div:last-child>div>div>a:not(:first-of-type) { font-size: 12px; padding-right: 4px; }
header .select>div:last-child>div>div>a:first-child { flex: 1 0 auto; padding-right: 24px; text-decoration: none; }
header .select>div:last-child>div>div:not(:hover)>a:not(:first-of-type) { visibility: hidden; }
header .select i { width: 10px; height: 10px; padding: 0; }