.tab-container {
  overflow: hidden;
  background: #fff;
}

.tab-container [role=tablist] {
  display: flex;
  margin: 0;
  padding: 0;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
}

.tab-container [role=tab] {
  position: relative;
  list-style: none;
  text-align: center;
  cursor: pointer;
  padding: 14px;
  flex-grow: 1;
  color: #444;
}

.tab-container [role=tab]:hover {
  background: #eee;
}

.tab-container [role=tab][aria-selected=true] {
  color: #000;
}

.tab-container [role=tab][aria-selected=true]::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 4px;
  background: #f44336;
  left: 0;
  bottom: 0;
}

.tab-container main {
  padding: 0 1em;
  position: relative;
}

.tab-container main [role=tabpanel] {
  display: none;
}

.tab-container main [role=tabpanel][aria-expanded=true] {
  display: block;
}

@media only screen and (min-width: 899px) {
  #calculator.tab-container {
    overflow: auto;
    background: none;
  }

  #calculator.tab-container [role=tablist] {
    display: none
  }

  #calculator.tab-container main {
    padding: 0;
    position: static;
  }

  #calculator.tab-container main [role=tabpanel] {
    display: block;
  }
}