
.tabs .tabMenu {
  display: inline-flex;
  width: 100%;
  position: relative;
}

.tabs .tabMenu .tabLink {
  background-color: #f7f8f9;
  color: #006fcf;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  flex-direction: column;
  padding: 1.25rem;
  position: relative;
  text-align: center;
  border-right: 1px solid #ecedee;
  transition: all 0.25S cubic-bezier(0.65, 0, 0.45, 1);
}

@media (prefers-reduced-motion) {  .tabs .tabMenu .tabLink {
    transition: all 0s;
  }
}

.tabs .tabMenu .tabLink * {
  width: 100%;
}

.tabs .tabMenu .tabLink:last-child {
  border-right: none;
}

.tabs .tabMenu .tabLink::after {
  transition: background-color 0.25S cubic-bezier(0.65, 0, 0.45, 1);
  content: "";
  height: 0.25rem;
  position: absolute;
  top: -0.0625rem;
  left: -0.0625rem;
  right: -0.0625rem;
}

.tabs .tabMenu .tabLink:hover, .tabs .tabMenu .tabLink:focus {
  background-color: #ecedee;
  color: #0065bd;
}

.tabs .tabMenu .tabLink:focus {
  z-index: 1;
  outline: dashed 1px #53565a !important;
  outline-offset: -3px;
}

.tabs .tabMenu .tabLink[aria-selected=true] {
  background: #fff;
  color: #00175a;
  pointer-events: auto;
}

.tabs .tabMenu .tabLink[aria-selected=true]::after {
  background-color: #00175a;
}

.tabs .tabMenu .tabLink[aria-selected=true]:hover, .tabs .tabMenu .tabLink[aria-selected=true]:focus {
  background-color: #fff;
}

.tabs .tabContent {
  background-color: #fff;
  display: block;
  width: 100%;
}

.tabs .tabContent [role=tabpanel]:focus {
  outline: dashed 1px #53565a;
  outline-offset: 3px;
}

@media (max-width: 767px) {  .tabs .tabMenu {
    flex-direction: column;
  }

  .tabs .tabMenu .tabLink {
    width: 100%;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    text-align: left;
    border-right: none;
    padding: 0.6875rem 1.25rem !important;
    border-bottom: 1px solid #ecedee;
  }

  .tabs .tabMenu .tabLink:last-child {
    border-bottom: none;
  }

  .tabs .tabMenu .tabLink span.icon {
    margin-bottom: 0 !important;
    margin-right: 0.625rem;
  }

  .tabs .tabMenu .tabLink span.icon::before {
    font-size: 1.375rem;
  }

  .tabs .tabMenu .tabLink * {
    width: auto;
  }

  .tabs .tabMenu .tabLink::after {
    width: 0.25rem;
    height: calc(100% + 0.125rem);
    top: -0.0625rem;
    left: -0.0625rem;
    bottom: -0.0625rem;
  }
}