/****** There is a combined widget for Accordions and Tab Lists, which is why the styles for both are included ******/
 .accordion-button {
    /*** set this value to the height of the template header + mega menu on your site ***/
     scroll-margin-top: 150px;
}
 .accordion-header .accordion-button:not(.collapsed) {
     color:var(--brand-color1);
     background-color: var(--brand-color7) !important;
}
 .sidebar .accordion-body {
     padding: 1rem 0 0 2.5rem;
     list-style: none;
}
 .sidebar .accordion-button:focus {
     z-index: 3;
     border-color: none;
     outline: 0;
     box-shadow: none;
}
 .sidebar .accordion-button:not(.collapsed) {
     color: var(--brand-color1)!important;
     background-color: var(--brand-color2)!important;
     box-shadow: none;
}
 .sidebar button.accordion-button.sidebar-title-top.collapsed {
     color: var(--brand-color4);
     background-color: var(--brand-color2);
}
 .sidebar .accordion-item:last-of-type .accordion-button.collapsed {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
}
 .sidebar .accordion-item:last-of-type {
     border-bottom-right-radius: 0;
     border-bottom-left-radius: 0;
     border: 0;
}
 .sidebar .accordion-item:first-of-type .accordion-button {
     border-top-left-radius: 0;
     border-top-right-radius: 0;
}
 .sidebar .accordion-button::after {
     display: none;
}
 .sidebar .accordion-button:not(.collapsed)::after {
     display: none;
}
 .nav-tabs {
     flex-direction: column;
     border:2px;
     gap:.5rem;
}
 .accordion-button::after {
     content: "+";
     background-image: none;
     transition: transform .2s ease-in-out;
     color: var(--brand-color2);
     scale: 2;
     text-align: center;
}
 .accordion-button:not(.collapsed)::after {
     content: "\2013";
     background-image: none;
     color: var(--brand-color2);
}
 .accordion-button:is(:hover,:focus){
     background: var(--brand-color7);
}
 .accordion-button:focus {
     z-index: 3;
     border-color: #86b7fe;
     outline: 0;
     box-shadow: 0 0 0 .25rem rgba(13, 110, 253, .25);
}
 .accordion-item {
     background-color: #fff;
     border-top: 1px solid rgba(0, 0, 0, .125);
     border-bottom: 1px solid rgba(0, 0, 0, .125);
}
 .accordion-collapse {
     border-color: #86b7fe;
     outline: 0;
     box-shadow: 0 0 0 .12.5rem rgba(13, 110, 253, .25);
}
/*FAQ*/
 .faq-button-container {
     width: 50%;
     padding: .625rem;
}
 .accordion.faq .accordion-header {
     position: relative;
}
 .accordion-item:first-of-type {
     border-top-right-radius: 0 !important;
     border-top-left-radius: 0 !important;
}
 .accordion-item:first-of-type .accordion-button {
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
}
 .accordion-item:last-of-type .accordion-button.collapsed {
     border-top-right-radius: 0 !important;
     border-top-left-radius: 0 !important;
}
 .accordion-item:last-of-type {
     border-bottom-right-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
}
 .accordion-item:last-of-type .accordion-collapse {
     border-bottom-right-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
}
 .accordion-item:last-of-type .accordion-button.collapsed {
     border-bottom-right-radius: 0 !important;
     border-bottom-left-radius: 0 !important;
}
 .accordion-header button span {
     font-weight: 700;
}
/**************************** Tabs *****************************************/
 .nav-tabs .nav-link {
     background: var(--bs-gray-100);
     border-top-left-radius: 0 !important;
     border-top-right-radius: 0 !important;
     color:var(--brand-color1);
     text-decoration: underline;
     border: 2px solid rgba(0, 0, 0, 0.125);
     z-index: 0;
     margin-bottom: .5rem;
}
 .nav-tabs .nav-link:is(:hover,:focus-visible) {
     border-color: inherit!important;
}
 .nav-tabs .nav-link.active {
     background-color: var(--brand-color7)!important;
     font-weight: 700 !important;
     color: var(--brand-color1) !important;
     text-decoration: unset;
     margin: 0;
     border: 2px solid rgba(0,0,0,0.125);
     border-bottom: 2px solid transparent;
     z-index: 2;
     position: relative;
}
 .tab-pane {
     border: 2px solid rgba(0, 0, 0, 0.125) !important;
}
 .tab-content:focus-within .tab-pane {
     z-index: 2;
}
 @media (max-width: 991px) {
     .accordion-button:is(:hover,:focus){
         background: var(--brand-color7);
    }
}
 @media (max-width: 768px) {
     .tab-content >.tab-pane {
         opacity: 1;
    }
     .nav-tabs button {
         min-width: 125px;
         max-width: 200px;
    }
     .nav-tabs .nav-link {
         margin-bottom:0;
         background: var(--bs-gray-100);
         border-top-left-radius: 0 !important;
         border-top-right-radius: 0 !important;
         color: var(--brand-color1);
         text-decoration: underline;
         border: 1px solid rgba(0, 0, 0, 0.125);
         z-index: 0;
    }
     .nav-tabs .nav-link.show.active {
         border: 2px 
    }
}
 @media (min-width: 768px) {
    /*Tabs To Accordions*/
     .nav-tabs {
         display: flex;
         gap: .5rem;
         flex-flow: row nowrap;
         overflow-x: scroll;
         width: 100%;
         overflow: auto;
         white-space: nowrap;
         scrollbar-width: thin;
         overflow-y: hidden;
         transform: translateY(2px);
         z-index: 2;
    }
     .tab-content .accordion {
         border: none;
    }
}