/* base tab styles */

.tabs-container {
      width: 100%;
      padding-right: 1rem;
      padding-left: 1rem;
}

@media (min-width: 480px) {

      .tabs-container {
            max-width: 480px;
      }
}

@media (min-width: 600px) {

      .tabs-container {
            max-width: 600px;
            padding-right: 1rem;
            padding-left: 1rem;
      }
}

@media (min-width: 782px) {

      .tabs-container {
            max-width: 782px;
            padding-right: 2rem;
            padding-left: 2rem;
      }
}

@media (min-width: 960px) {

      .tabs-container {
            max-width: 960px;
      }
}

@media (min-width: 1280px) {

      .tabs-container {
            max-width: 1280px;
      }
}

@media (min-width: 1440px) {

      .tabs-container {
            max-width: 1440px;
      }
}

.tabs-container {
      margin-left: auto;
      margin-right: auto;
      margin-top: 100px;
      margin-bottom: 100px;
}

.tabs-container .tabs-header {
      display: flex;
      gap: 1rem;
}

.tabs-container .tabs-header .tabs-header-button {
      position: relative;
}

.tabs-container .tabs-content {
      padding-top: 1rem;
      padding-bottom: 1rem;
}

/* hide tab content */

.tabs-container .tabs-content > * {
      display: none;
   }

/* set vertical tabs */

.tabs-container.tabs-container--vertical {
      display: grid;
      grid-template-columns: 1fr 3fr;
      gap: 60px;
}

.tabs-container.tabs-container--vertical .tabs-header {
      flex-direction: column;
}

.tabs-container.tabs-container--vertical .tabs-header-button {
      padding-left: 1rem;
      padding-bottom: .5rem;
}

/* editor updates */

.tabs-editor-header {
      display: flex;
      gap: .5rem;
}

.tabs-container--vertical .tabs-editor-header {
      flex-direction: column;
}
/* variant tab styles */
/* header */
.tabs-container.tabs-style--Tab1 .tabs-header {
    border-radius: 0.5rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(228 228 228 / var(--tw-border-opacity, 1));
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem
}
@media (min-width: 600px) {
    .tabs-container.tabs-style--Tab1 .tabs-header {
        flex-direction: row
    }
}
.tabs-container.tabs-style--Tab1 .tabs-header-button {
    border-radius: 0.375rem;
    padding-left: 1rem;
    padding-right: 1rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500
}
@media (min-width: 782px) {
    .tabs-container.tabs-style--Tab1 .tabs-header-button {
        font-size: 1rem
    }
}
@media (min-width: 960px) {
    .tabs-container.tabs-style--Tab1 .tabs-header-button {
        padding-left: 1.5rem;
        padding-right: 1.5rem
    }
}
.tabs-container.tabs-style--Tab1 .tabs-header-button:hover,
         .tabs-container.tabs-style--Tab1 .tabs-header-button.is-active {
    --tw-bg-opacity: 1;
    background-color: rgb(0 79 196 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
/* variant tab styles */
/* header */
.tabs-container.tabs-style--Tab2 .tabs-header {
    gap: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
}
@media (min-width: 600px) {
    .tabs-container.tabs-style--Tab2 .tabs-header {
        flex-direction: row
    }
}
.tabs-container.tabs-style--Tab2 .tabs-header-button {
    border-bottom-width: 2px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500
}
@media (min-width: 782px) {
    .tabs-container.tabs-style--Tab2 .tabs-header-button {
        font-size: 1rem
    }
}
@media (min-width: 960px) {
    .tabs-container.tabs-style--Tab2 .tabs-header-button {
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }
}
.tabs-container.tabs-style--Tab2 .tabs-header-button:hover,
         .tabs-container.tabs-style--Tab2 .tabs-header-button.is-active {
    --tw-border-opacity: 1;
    border-color: rgb(0 79 196 / var(--tw-border-opacity, 1));
    background-color: rgb(0 79 196 / 0.1);
    --tw-text-opacity: 1;
    color: rgb(0 79 196 / var(--tw-text-opacity, 1))
}
/* variant tab styles */
/* header */
.tabs-container.tabs-style--Tab3 .tabs-header {
    gap: 0px;
    --tw-bg-opacity: 1;
    background-color: rgb(249 250 251 / var(--tw-bg-opacity, 1))
}
@media (min-width: 600px) {
    .tabs-container.tabs-style--Tab3 .tabs-header {
        flex-direction: row
    }
}
.tabs-container.tabs-style--Tab3 .tabs-header-button {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom-width: 2px;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-top: 1rem;
    padding-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500
}
@media (min-width: 782px) {
    .tabs-container.tabs-style--Tab3 .tabs-header-button {
        font-size: 1rem
    }
}
@media (min-width: 960px) {
    .tabs-container.tabs-style--Tab3 .tabs-header-button {
        padding-left: 3rem;
        padding-right: 3rem;
        padding-top: 1.25rem;
        padding-bottom: 1.25rem
    }
}
.tabs-container.tabs-style--Tab3 .tabs-header-button:hover,
         .tabs-container.tabs-style--Tab3 .tabs-header-button.is-active {
    --tw-border-opacity: 1;
    border-color: rgb(0 79 196 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(0 79 196 / var(--tw-text-opacity, 1))
}
/* variant tab styles */
/* header */
.tabs-container.tabs-style--Tab7 .tabs-header {
    border-radius: 10px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(223 228 234 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem
}
.tabs-container.tabs-style--Tab7 .tabs-header-button {
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(223 228 234 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(228 228 228 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 25 40 / var(--tw-text-opacity, 1))
}
.tabs-container.tabs-style--Tab7 .tabs-header-button:hover,
         .tabs-container.tabs-style--Tab7 .tabs-header-button.is-active {
    --tw-border-opacity: 1;
    border-color: rgb(0 79 196 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(0 79 196 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
/* variant tab styles */
/* header */
.tabs-container.tabs-style--Tab8 .tabs-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(223 228 234 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem
}
.tabs-container.tabs-style--Tab8 .tabs-header-button {
    border-radius: 0.25rem;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(223 228 234 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(228 228 228 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 25 40 / var(--tw-text-opacity, 1))
}
.tabs-container.tabs-style--Tab8 .tabs-header-button:hover,
         .tabs-container.tabs-style--Tab8 .tabs-header-button.is-active {
    --tw-border-opacity: 1;
    border-color: rgb(0 79 196 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(0 79 196 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
/* variant tab styles */
/* header */
.tabs-container.tabs-style--Tab9 .tabs-header {
    border-bottom-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(223 228 234 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    padding: 0.75rem;
    padding-bottom: 0px
}
.tabs-container.tabs-style--Tab9 .tabs-header-button {
    border-radius: 0.25rem;
    border-bottom-right-radius: 0px;
    border-bottom-left-radius: 0px;
    border-width: 1px;
    --tw-border-opacity: 1;
    border-color: rgb(223 228 234 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(228 228 228 / var(--tw-bg-opacity, 1));
    padding-left: 1.25rem;
    padding-right: 1.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    --tw-text-opacity: 1;
    color: rgb(17 25 40 / var(--tw-text-opacity, 1))
}
.tabs-container.tabs-style--Tab9 .tabs-header-button:hover,
         .tabs-container.tabs-style--Tab9 .tabs-header-button.is-active {
    --tw-border-opacity: 1;
    border-color: rgb(0 79 196 / var(--tw-border-opacity, 1));
    --tw-bg-opacity: 1;
    background-color: rgb(0 79 196 / var(--tw-bg-opacity, 1));
    --tw-text-opacity: 1;
    color: rgb(255 255 255 / var(--tw-text-opacity, 1))
}
/* variant tab styles */
.tabs-container.tabs-style--Faq {
         margin: 0px;
         width: 100%;
         max-width: none;
         padding: 0px;
}
.tabs-container.tabs-style--Faq.tabs-container--vertical {
         grid-template-columns: repeat(1, minmax(0, 1fr));
         gap: 1.5rem;
}
@media (min-width: 960px) {
         .tabs-container.tabs-style--Faq.tabs-container--vertical {
                  grid-template-columns: 279px 1fr;
                  gap: 2rem;
         }
}
/* header */
.tabs-container.tabs-style--Faq .tabs-header {
         flex-direction: column;
         gap: 0.5rem;
         align-self: flex-start;
         border-radius: 0.75rem;
         padding: 0.75rem;
         background-color: var(--color-white);
}
.tabs-container.tabs-style--Faq .tabs-header-button {
         display: flex;
         min-height: 44px;
         align-items: center;
         border-radius: 0.5rem;
         padding: 0.75rem;
         text-align: left;
         font-size: 0.875rem;
         font-weight: 500;
         --tw-text-opacity: 1;
         color: rgb(107 114 128 / var(--tw-text-opacity, 1));
         border: 2px solid transparent;
         font-family: var(--font-base);
         letter-spacing: -0.2px;
         line-height: 1.4286;
         transition: border-color .2s ease, color .2s ease;
}
.tabs-container.tabs-style--Faq .tabs-header-button:hover,
         .tabs-container.tabs-style--Faq .tabs-header-button:focus-visible,
         .tabs-container.tabs-style--Faq .tabs-header-button.is-active {
            border-color: var(--color-brand);
            color: var(--color-brand);
         }
.tabs-container.tabs-style--Faq .tabs-content {
         padding: 0px;
}