body
{
  display:flex;
  flex-direction:column;
  padding:0;
}

a[id^='sb-webchart-button-']
{
  border:1px solid white;
  color:white;
  font-size:17px;
  padding:1px 2px;
}

a[id^='sb-webchart-button-']:hover
{
  text-decoration:none;
}

a[id^='sb-webchart-button-'].sb-webchart-button-selected
{
  background-color:white;
  color:#004071;
}

#sb-webchart
{
  position:relative; /* Damit #sb-webchart als Anker für "Rechtliches" verwendet wird. */
}

#sb-webchart-title
{
  padding-top:5px;
  font-weight:bold;
}

div[id^='sb-webchart-scrollbox-']
{
  overflow-x:auto;
  font-size:0; /* remove gap after child div */
  flex:1;
}

div[id^='sb-webchart-points-']
{
  display:inline-flex;
  align-items:flex-end;
  border:5px solid transparent;
  border-right-width:0;
  height:100%;
  box-sizing:border-box;
}

.sb-webchart-point
{
  background-image:linear-gradient(to top, orange, orange); /* wird von JavaScript überschrieben werden */
  position:relative; /* Damit es als Anker für die Child-Items gilt. */
  text-align:center;
  font-size:15px;
  border:1px solid white;
  flex-shrink:0;
  width:42px;
  text-decoration:underline;
  margin-right:5px;
}

.sb-webchart-point-value
{
  position:absolute;
  top:0;
  right:0;
  left:0;
  padding-bottom:1px;
}

.sb-webchart-point-date
{
  position:absolute;
  background-color:rgba(255, 255, 255, 0.5);
  right:0;
  bottom:0;
  left:0;
  color:black;
}

.sb-webchart-point-today .sb-webchart-point-date, .sb-webchart-point-today .sb-webchart-point-value
{
  font-weight:bold;
}

#sb-menu
{
  display:none;
}

#sb-conditions
{
  float:right;
}

@media (min-width:545px)
{
  #sb-select
  {
    display:none;
  }
  #sb-menu
  {
    display:inline-block;
  }
}

#conditions
{
  display:revert;
}

#close
{
  display:none;
}

#no-js-hint
{
  color:red;
}