tp-tabs-tab {
    display: none
}

tp-tabs-tab[open=yes] {
    display: block
}

:root {
    --tabs-header-offset: 60px
}

@media screen and (min-width: 576px) {
    :root {
        --tabs-header-offset: 90px
    }
}

.tabs {
    min-width: 0;
    display: block
}

@media screen and (min-width: 576px) {
    .tabs--align-center tp-tabs-nav {
        display: flex;
        justify-content: center
    }
}

.tabs--align-center .tabs__nav-item {
    width: calc(50% - 3px);
    flex: 1;
    min-width: 0
}

@media screen and (min-width: 576px) {
    .tabs--align-center .tabs__nav-item {
        width: auto;
        flex: initial
    }
}

.tabs--align-center .tabs__nav-link {
    padding: 9px 17px
}

@media screen and (min-width: 400px) {
    .tabs--align-center .tabs__nav-link {
        padding-left: 10px;
        padding-right: 10px
    }
}

@media screen and (min-width: 768px) {
    .tabs--align-center .tabs__nav-link {
        padding-left: 20px;
        padding-right: 20px
    }
}

.tabs__content {
    position: relative;
    transition-property: height;
    transition-duration: .4s;
    transition-timing-function: var(--transition-easing)
}

.tabs__nav-item {
    color: var(--color-white)
}

.tabs__nav-item[active] .tabs__nav-link {
    color: var(--color-white);
    background-color: var(--color-bunker-dark)
}

.tabs__nav-item[active] .tabs__nav-link::before {
    opacity: 1
}

.tabs__nav {
    display: flex;
    gap: 3px
}

.tabs__nav-item:last-child {
    flex-grow: 1
}

@media screen and (min-width: 576px) {
    .tabs__nav-item:last-child {
        flex-grow: initial
    }
}

.tabs__nav-link {
    position: relative;
    display: block;
    color: var(--color-white);
    background-color: var(--color-gray-600);
    padding: 9px 20px;
    letter-spacing: .7px;
    text-align: center;
    text-decoration: none;
    border-radius: var(--border-radius-small);
    transition-property: color;
    transition-duration: var(--transition-time);
    transition-timing-function: var(--transition-easing);
    transition-property: color, background-color
}

@media screen and (min-width: 400px) {
    .tabs__nav-link {
        min-width: 110px
    }
}

.tabs__nav-link::before {
    background-image: url("data:image/svg+xml,%3Csvg width='50' height='13' viewBox='0 0 50 13' fill='%2316191B' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M50 13C35 13 25 0 25 0S15 13 0 13h50z' fill='%2316191B'/%3E%3C/svg%3E%0A");
    background-size: contain;
    content: "";
    position: absolute;
    bottom: -7px;
    left: 0;
    right: 0;
    margin: auto;
    transform: rotate(180deg);
    opacity: 0;
    width: 27px;
    height: 7px
}

.tabs__nav-link:hover {
    color: var(--color-white);
    background-color: var(--color-bunker-dark)
}

.tabs__tab {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: auto;
    visibility: hidden;
    opacity: 0;
    padding-top: 15px;
    min-width: 0;
    display: block;
    min-height: 142px;
    transition-property: opacity;
    transition-duration: .4s;
    transition-timing-function: var(--transition-easing);
    transition-property: opacity, visibility
}

@media screen and (min-width: 1024px) {
    .tabs__tab {
        padding-top: 20px
    }
}

.tabs__tab[open=yes] {
    visibility: visible;
    opacity: 1
}