/*******************
  Tabs
********************/

.block-tabs {
display: flex;
flex-basis: 100%;
background-color: var(--body-bg);
}

.block-tabs-inner:empty {
padding: 2rem;
}

.block-tabs-inner li::marker {
content:'' !important;
}

.block-tabs-inner:after {
content: '';
display: block;
z-index: 1;
position: absolute;
bottom: 0rem;
left: 50%;
right: 0rem;
height: 1px;
border-bottom: 1px solid var(--black-40);
width: 100%;
transform: translateX(-50%);
}

.block-tabs.alignfull .block-tabs-inner:after {
width: 100vw;
}

.block-tabs.alignwide .block-tabs-inner:after {
width: 80vw;
}

.block-tabs-background-white,
.block-tabs-background-white .block-tabs li {
background-color: var(--body-bg);
}

.block-tabs-background-lightgray,
.block-tabs-background-lightgray .block-tabs li {
background-color: var(--gray-lightest);
}

.block-tabs-background-gold,
.block-tabs-background-gold .block-tabs li {
background-color: var(--steadfast-gold);
}

[class*="-background-blue"]
[class*="-background-black"] .block-tabs {
color: var(--body-bg);
}

.block-tabs ul {
display: flex;
gap: 0.5rem;
list-style-type: none;
list-style-position: inside;
white-space: nowrap;
width: 100%;
}

@media (max-width: 960px) {
  .block-tabs ul {
    overflow-y: visible;
    overflow-x: scroll;
    padding: 0rem 1rem;
	}
}

.block-tabs li {
z-index: 2;
margin: 0rem !important;
}

.block-tabs li::marker {
content: "";
}

.block-tabs li .cta {
display: inline-block;
cursor: pointer;
padding: 0.75rem 1.5rem;
margin: 0rem !important;
font-family: var(--body-font) !important;
font-size: 1rem;
font-weight: 600;
border-radius: .325rem .325rem 0rem 0rem;
background: linear-gradient(0deg, var(--black-5) 0%, var(--body-bg) 12%);
box-shadow: 0rem 0.025rem 0rem 0rem var(--body-bg), 0rem 0.125rem 1.5rem var(--black-10);
user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
}

.block-tabs li.active .cta {
font-weight: 500;
color: var(--body-font-color);
border: 1px solid var(--black-40);
border-bottom: none;
background: var(--body-bg);
box-shadow: inset 0rem 0rem 0rem 0.125rem var(--body-bg), 0rem 0.025rem 0rem 0rem var(--body-bg);
}

.block-tabs li.active .cta:before {
content: '';
position: absolute;
top: 0.125rem;
left: 0.125rem;
right: 0.125rem;
display: block;
width: auto;
height: 0.25rem;
background-color: var(--steadfast-gold);
border-radius: 0.25rem 0.25rem 0rem 0rem;
}

.block-tabs li .cta:hover,
.block-tabs li.active .cta:hover {
color: var(--body-font-color);
}

/** Content **/

.block-tabs-content {
background: linear-gradient(0deg, var(--black-10) 0%, var(--body-bg) 4%);
}

.block-section-inner .block-tabs-content {
display: none;
}

.block-section-inner .block-tabs-content[rel="1"] {
display: flex;
}

.block-section-inner .block-tabs-content {
background: none;
}

.block-tabs-content-inner {
display: flex;
width: 100%;
padding: 1.5rem 0rem;
}

.block-tabs-content-inner .block-editor-inner-blocks {
display: flex;
width: 100%;
justify-content: center;
}


.block-tabs-content-inner .block-editor-inner-blocks :where(.wp-block){
width: 100%;
max-width: 100% !important;
}

.block-tabs-content-inner  .block-editor-block-list__layout {
position: relative;
width: 100%;
max-width: 100% !important;
}

.block-tabs-content-inner .wp-block-group:not(:first-child) {
  display: none;
}


/* ------------------------- SCROLLBARS -------------------------- */

@media (min-width: 767px){


  .block-tabs ul.block-tabs-inner::-webkit-scrollbar {
    height: .5rem;              /* height of horizontal scrollbar ← You're missing this */
    width: .5rem;               /* width of vertical scrollbar */
    /*border: .125rem solid var(--black-10);*/
  }

  /*.block-tabs ul.block-tabs-inner::-webkit-scrollbar-button,
  .block-decades-and-events::-webkit-scrollbar-button {
    border-radius: .75rem;
    background-color: var(--black-20);
  }*/

  .block-tabs ul.block-tabs-inner::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 .325rem var(--black-20);
    border-radius: .75rem;
  }

  .block-tabs ul.block-tabs-inner::-webkit-scrollbar-thumbc{
    border-radius: .75rem;
    height: .5rem;              /* height of horizontal scrollbar ← You're missing this */
    width: .5rem;
    background-color: var(--black-20);
  }

}