/* Layout & Container */
.tab-layout {
  margin: 0 auto;
  padding: 0;
}

.tab-layout.background-white {
  background: var(--white);
}

.tab-layout.background-trillium {
  background: var(--trillium);
}

.tab-layout.background-cutler {
  background: var(--cutler);
}

.tabs-container {
  margin: auto;
  max-width: 1170px;
  padding: 80px 0;
}

div.layout:has(section.tabs-container) {
  width: 100%;
  padding: 60px 0;
}

.tabs-container .tabs {
  min-height: 53px;
  display: flex;
  margin: 0;
  overflow-x: auto;
  width: 100%;
  position: relative;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  scroll-padding-left: 60px;
  padding: 0 30px;
  scroll-padding-inline: 30px;
}

.tabs-container .tabs::-webkit-scrollbar {
  display: none;
}

.tabs-container .tab-content {
  width: 100%;
  background: var(--white);
}

.tabs-container .tab-content.content-text-editor>div.active {
  display: flow-root;
  min-width: fit-content;
  padding: 20px;
}

.tabs-container .tab-content.content-text-editor>div.active li {
  margin: 0;
}

.tabs-container .tab-content.content-text-editor>div:not(.active) {
  display: none;
}

/* Typography */
.tabs-container .tab-content div[id^="panel-"].active a.action:not(.button.green) {
  font-weight: 700;
  line-height: 100%;
  color: var(--black);
}

.tabs-container .tab-content div[id^="panel-"].active a.action:not(.button.green) :after {
  content: "\00a0\f105";
  font-family: var(--text-icon);
}

#ouws_content #middle .tabs-container .tab-content div[id^="panel-"].active a.button.white {
  border: 2px solid var(--cutler);
  color: var(--cutler);
}

#ouws_content #middle .tabs-container .tab-content div[id^="panel-"].active a.button.white:hover,
#ouws_content #middle .tabs-container .tab-content div[id^="panel-"].active a.button.white:focus {
  background: var(--cutler);
  color: var(--white) !important;
}

.tabs-container .tab-content div[id^="panel-"].active a:not(.button):hover,
.tabs-container .tab-content div[id^="panel-"].active a:not(.button):hover strong {
  text-decoration: none;
}

.tabs-container .tab-content :is(h1, h2, h3, h4, h5, h6) {
  color: var(--black);
  font-family: var(--text-display);
  font-weight: 700;
  line-height: 100%;
  letter-spacing: 0.03em;
  vertical-align: middle;
}

.tabs-container .tab-content>div.active :is(h1, h2, h3, h4, h5, h6):first-child {
  padding-top: 20px;
}

/* Buttons */
.tabs-container .tabs button {
  font-family: var(--text-display);
  font-weight: 700;
  font-size: 18px;
  line-height: 100%;
  vertical-align: middle;
  background: none;
  position: relative;
  cursor: pointer;
  scroll-snap-align: center;
  transition: var(--transition-default);
  min-width: fit-content;
  padding: 20px;
}

.tabs-container .tabs button>span {
  font: unset;
  cursor: unset;
  color: unset;
}

.tabs-container .tabs button:first-of-type {
  scroll-snap-align: start;
}

.tabs-container .tabs button:last-of-type {
  scroll-snap-align: end;
}

/* Active Button */
.tabs-container .tabs button.active {
  background: var(--white);
  z-index: 100;
}

.tabs-container .tabs button.active>.tab-label {
  display: inline-block;
  position: relative;
}

button.active span.tab-label::after {
  position: absolute;
  content: '';
  border-bottom: 3px solid var(--marigold);
  bottom: -18px;
  left: 0;
  width: 100%;
}

.tab-layout.background-white .tabs-container .tabs button {
  border: 3px solid var(--white);
  border-bottom: none;
}

.tab-layout.background-white .tabs-container .tabs button:not(:first-of-type) {
  margin-left: -3px;
}

.tab-layout.background-white .tabs-container .tabs button.active {
  border: 3px solid var(--light-gray);
  border-bottom: none;
}

/* Non-active Button */
.tabs-container .tabs button:not(.active) {
  color: var(--putnam);
}

.tabs-container .tabs button:not(.active):hover,
.tabs-container .tabs button:not(.active):focus {
  background-color: #EAEAEA;
}

.tab-layout.background-cutler .tabs button:not(.active) {
  color: var(--white);
}

.tab-layout.background-cutler .tabs button:not(.active):hover,
.tab-layout.background-cutler .tabs button:not(.active):focus {
  color: var(--putnam);
}

.tab-layout.background-white .tabs-container .tabs button:not(.active):hover,
.tab-layout.background-white .tabs-container .tabs button:not(.active):focus {
  background-color: #EAEAEA;
  border: 3px solid #EAEAEA;
  border-bottom: none;
}

/* Underline & Borders */
.tab-layout .tabs-container .tabs::after {
  content: '';
  border-bottom: 3px solid transparent;
  position: absolute;
  width: var(--tabs-width);
  left:0;
  bottom: 0;
  min-width: 100vw;
}

.tab-layout.background-white .tabs-container .tabs::after {
  content: '';
  border-bottom: 3px solid var(--light-gray);
}

.tab-layout.background-white .tab-content div.active {
  border: 3px solid var(--light-gray);
  border-top: none;
}

/* Media Queries */
@media only screen and (min-width: 768px) {

  .tab-layout {
    padding: 0 36px;
  }

  .tab-layout .tabs-container .tabs {
    margin: 0 ;
    padding: 0;
    scroll-padding-inline: 0;
  }

  div.layout:has(section.tabs-container) {
    width: unset;
    padding: 60px 30px;
  }

  .tabs-container .tabs::after {
    width: 100%;
  }

  .tabs-container .tabs button:first-of-type {
    margin-left: 0;
  }

  .tabs-container .tabs button:last-of-type {
    margin-right: 0;
  }

  .tabs-container .tab-content.content-text-editor>div.active {
    min-width: unset;
    padding: 40px;
  }
  .tabs-container .tabs button {
    min-width: unset;
    padding: 20px 40px;
  }
}