/*------------------------------------*\
    
    FX Tabs/Accordion - Global styling for all tabs/accordions

    Add custom tabs/accordion styling to this file if it should be applied to all tabs/accordions on the site
    Otherwise, put your styles in individual block stylesheets

\*------------------------------------*/

.tab-accordion__panel:not(.is-active) .tab-accordion__panel__content {
    display: none;
}

.tab-accordion__tabs {
    display: flex;
    flex-wrap: wrap;
    top: 1px;
    position: relative;
    z-index: 2;
}

.tab-accordion__tab,
.tab-accordion__panel__toggle {
    position: relative;
    list-style-type: none !important;
    margin: 0;
    display: block;
    line-height: normal;
    background: #262B6C;
    padding: 15px 60px 15px 20px;
    text-decoration: none;
    border: none;
    border-radius: 0;
    width: 100%;
    color: var( --color-white );
    font-weight: 700;
    font-size: 21px;
    text-align: left;
    line-height: 1.238em;
}

.tab-accordion__panel {
    margin: 15px 0 0;
}

.tab-accordion__tab.is-active,
.tab-accordion__tab:hover,
.tab-accordion__tab:focus,
.tab-accordion__panel__toggle.is-active,
.tab-accordion__panel__toggle:hover,
.tab-accordion__panel__toggle:focus {
    color: var( --color-white );
    text-decoration: none;
}

.tab-accordion__tab:after,
.tab-accordion__panel__toggle:after {
    content: '\e926';
    font-family: 'gloveamerica';
    position: absolute;
    top: 50%;
    transform: translate(0, -50%);
    font-weight: normal;
    right: 20px;
    font-size: 22px;
}


.tab-accordion__panel__toggle.is-active:after {
    content: "\e91d";
}

.tab-accordion__panel__content {
    padding: 15px 21px 20px 20px;
    border: none;
    background: #262B6C;
    color: var( --color-white );
    position: relative;
}

.tab-accordion__panel__content a {
    color: var( --color-white );
    line-height: 1em;
    margin: -10px 0 0;
}

.tab-accordion__panel__content:after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    top: 0;
    width: calc(100% - 40px);
    height: 1px;
    background-color: var( --color-white );
    opacity: 0.2;
}

.tab-accordion__top-content {
    margin: 0 0 10px;
}

.tab-accordion {
    position: relative;
}

.tab-accordion + .tab-accordion-bg-color {
    padding-top: 60px;

    @media( min-width : 1200px ) {
        padding-top: 150px;
    }
}

.tab-accordion__panel__content .blog-listing__pagination [class*="col-"] {
    padding-left: 0;
}

.tab-content-wrap__image {
    margin: 15px 0 0;
}

.tab-content-wrap__image.no-image {
    display: none;
}

.tab-content-wrap__content p {
    margin: 0 0 14px;
}

.tab-content-wrap__content p:last-child {
    margin: 0;
}

.tab-accordion__wrapper--bg-red .tab-accordion__tab,
.tab-accordion__wrapper--bg-red .tab-accordion__panel__toggle,
.tab-accordion__wrapper--bg-red .tab-accordion__panel__content {
    background: #A22222;
}

.search-tab-accordion .tab-accordion__panel__content {
    background-color: var( --color-white );

    & h2 {
        color: var( --color-black-01 );
        font-size: 42px;
    }
}

.search-tab-accordion .tab-accordion__panel.is-active {
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
    background-color: var( --color-white );
}

.icons-cards.bg-gray + .tab-accordion-bg-color {
    padding-top: 0;
}


@media (min-width: 768px) {
    .tab-accordion__tab,
    .tab-accordion__panel__toggle {
        padding: 42px 105px 42px 35px;
        font-size: 28px;
        max-height: 119px;
        display: flex;
        align-items: center;
    }

    .tab-accordion__panel__content {
        padding: 32px 35px 32px 35px;
    }

    .tab-accordion__tab.is-active:after,
    .tab-accordion__panel__toggle:after {
        right: 35px;
        font-size: 55px;
    }

    .tab-accordion__panel__content:after {
        width: calc(100% - 70px);
    }

    .tab-accordion__panel {
        margin: 20px 0 0;
    }

    .tab-accordion__panel__content a {
        margin: 0;
    }

    .tab-content-wrap__image {
        margin: 20px 0 0;
    }
}

@media (min-width: 1200px) {
    .tab-accordion__panel__content {
        position: relative;
        width: 100%;
        padding: 50px 100px;

        & :where(h2, h3, h4, h5, h6) {
            color: var( --color-white );
        }
    }

    .tab-accordion__tab,
    .tab-accordion__panel__toggle {
        border-radius: 4px 4px 0 0;
        margin: 0;
        width: auto;
        padding: 10px 30px;
    }

    .search-tab-accordion :where( .tab-accordion__tab, .tab-accordion__panel__toggle) {
        border-radius: 0;
    }

    .tab-accordion__tab {
        padding: 25px 35px;
        font-size: 22px;
        letter-spacing: 0.05em;
        font-weight: 400;
        border-radius: 0;
    }

    .tab-content-wrap {
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        position: relative;
    }

    .tab-content-wrap__content {
        width: 50%;
        padding-right: 25px;
    }

    .tab-content-wrap__content.no-image {
        width: 100%;
    }

    .tab-content-wrap__image {
        width: calc(50% - 25px);
        position: absolute;
        right: 0;
        top: 0;
        height: calc(100% + 100px);
        margin: 0;
        box-shadow: 0 10px 30px rgba(32,33,52,0.15);
    }

    .tab-content-wrap__content h3 {
        font-size: 30px;
        color: var( --color-white );
    }

    .tab-accordion__panel {
        margin: 0;
    }

    .tab-accordion__wrapper {
        background-color: #262B6C;
        padding: 50px 0 0;
        margin: 0 0 50px;

        & blockquote {
            color: #5FA5D1;
        }

        & blockquote {
            color: #5FA5D1;
        }
    }

    .tab-scroll {
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 5px;

        &::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            background-color: #F5F5F5;
        }
        
        &::-webkit-scrollbar
        {
            width: 3px;
            background-color: #F5F5F5;
        }

        &::-webkit-scrollbar-thumb
        {
            background-color: var( --color-red );
        }
    }
    .tab-accordion__wrapper--bg-red .tab-scroll {
        &::-webkit-scrollbar-track
        {
            -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
            background-color: #F5F5F5;
        }
        
        &::-webkit-scrollbar
        {
            width: 3px;
            background-color: #F5F5F5;
        }

        &::-webkit-scrollbar-thumb
        {
            background-color: var( --color-blue );
        }
    }

    .tab-accordion__panel__content:after {
        display: none;
    }

    .tab-accordion__tabs {
        display: flex;
        width: max-content;
        margin: 0 auto;
        border: 1px solid #FFFFFF;
    }

    .search-tab-accordion .tab-accordion__tabs {
        margin: 0;
        gap: 0 10px;
    }

    .tab-accordion__tab:after,
    .tab-accordion__panel__toggle:after {
        display: none;
    }

    .tab-accordion__tab.is-active,
    .tab-accordion__tab:hover,
    .tab-accordion__tab:focus {
        background-color: rgba(255,255,255,0.2);
    }

    .search-tab-accordion :where( .tab-accordion__tab.is-active, .tab-accordion__tab:hover, .tab-accordion__tab:focus ) {
        background-color: var( --color-red )!important;
    }

    .tab-accordion__panel__content a:hover {
        color: var( --color-white );
        opacity: 0.8;
    }

    .tab-accordion__top-content {
        margin: 0 0 46px;
    }

    .tab-accordion-bg-color {
        background-color: #FAF7F7;
        /* padding-top: 0; */
    }

    .tab-accordion__wrapper--bg-red.tab-accordion__wrapper {
        background-color: #A22222;

        & :where( blockquote, h2, h3, h4, h5, h6 ) {
            color: var( --color-white );
        }
    }

}