/* Style tab links */
.tablink {
  color: white;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 0 15px;
  font-size: 17px;
  height: 70px;
  flex: 0 1 auto;
}
/* Arrow indicator on hover, to show interactivity */
.tablink:hover + .tab-indicator {
  visibility: visible;
}
.tab-container {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
}
.category-tab {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tab-indicator {
  display: block;
  visibility: hidden;
  flex: 0 1 auto;
}
.tab-indicator-active {
  display: block;
  visibility: visible;
}
@media (max-width: 768px) {
  .tablink {
    width: 100%;
    display: inline-block;
  }
}
/* Stack tabs in mobile/tablet view */
@media (max-width: 1080px) {
  .tab-container {
    display: flex;
    flex-direction: column;
  }
  /* Use a smaller arrow to indicate the active tab */
  /* TODO: Switch to an SVG of a triangle, like we're doing with the full-width tab */
  .tablink-active:after {
    content: '▼';
  }
  .tab-indicator-active {
    display: none;
  }
  .tab-indicator {
    display: none;
  }
}
@media (max-width: 576px) {
  .totop {
    display: block;
    float: right;
    margin: 25px;
    color: white !important;
  }
  .totop:hover {
    background-color: #F4b223;
    color: black;
  }
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
  color: black;
  display: none;
  padding: 25px 0;
  height: 100%;
  width: 100%;
}
.shsi h1,
.shsi h2,
.shsi h3,
.shsi h4,
.shsi h5,
.shsi h6 {
  font-family: bely-display;
}
.shsi p:not(.badge) {
  font-weight: 400;
  margin-bottom: 0;
}
#toTop {
  display: none;
}
.totop {
  position: fixed;
  bottom: 20px;
  right: 30px;
  z-index: 99;
  font-size: 18px;
  border: none;
  outline: none;
  background-color: #AC441E;
  cursor: pointer;
  padding: 15px;
  border-radius: 1px;
  text-decoration: none !important;
  float: right;
  margin: 25px;
  color: white !important;
}
/*
Section tab colors

Each tab must have a respective selector here,
along with the subsequent indicator-<color> path
selector for the arrow SVG that appears when you select
a category.
*/
.midnight-blue {
  background-color: #001028;
}
.indicator-midnight-blue path {
  fill: #001028;
  stroke: #001028;
}
.navy {
  background-color: #011E41;
}
.indicator-navy path {
  fill: #011E41;
  stroke: #011E41;
}
.orange {
  background-color: #E65300;
}
.indicator-orange path {
  fill: #E65300;
  stroke: #E65300;
}
.gold {
  background-color: #BD8B21;
}
.indicator-gold path {
  fill: #BD8B21;
  stroke: #BD8B21;
}
.brick {
  background-color: #AC441E;
}
.indicator-brick path {
  fill: #AC441E;
  stroke: #AC441E;
}