/* V2 Accordion */

/* 
  // Control (Expand/Collapse)
  --control-border-radius
  --control-border-color
  --control-background-color
  --control-background-color-hover
  --control-color
  --control-color-hover

  // Header General
  --header-background-color
  --header-border-color
  --header-border-radius
  --header-color
  --header-font-family
  
  // Header Title (H3)
  --title-color
  --accordion-title-font-size
  --mobile-accordion-title-font-size

  // Data
  --data-color
  --data-color-hover
  --header-span-font-family

  // Meta
  --meta-border-color
  --meta-border-radius
  --meta-background-color
  --meta-color

  // Highlight
  --highlight-color

  // Section
  --section-border-radius

  // In addition, there's 2 themes: primary, secondary
*/

.accordion {
  margin: 0px;
}

.accordion .control {
    border-radius: var(--control-border-radius, 6px);
    border-color: var(--control-border-color, var(--primary-700, #2471cb));
    background-color: var(--control-background-color, #fff);
    color: var(--control-color, var(--primary-700, #2471cb));
  }

.accordion .control:hover,
    .accordion .control:focus {
      background-color: var(--control-background-color-hover, var(--primary-700, #2471cb));
      color: var(--control-color-hover, #fff);
    }

.accordion__items {
    margin-top: 0px;
  }

.accordion__items.is-active .header .collapse {
          display: none;
        }

.accordion__items.is-active .header .expand {
          display: block;
        }

.accordion__items.is-active .content {
        display: block;
      }

.accordion__items .header {
      border-bottom-width: 1px;
      border-color: var(--header-border-color, var(--body-border-color, var(--gray-200, #cfcfcf)));
      color: var(--header-color, var(--heading-color, var(--gray-700, #3f3f46)));
      font-family: var(--header-font-family, var(--heading-font-family, serif));
    }

.accordion__items .header .title {
        margin-top: 0px;
        margin-bottom: 0px;
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
        padding-left: 1.75rem;
        padding-right: 2rem;
        color: var(--title-color, var(--primary-700, #2471cb));
        font-size: var(--mobile-accordion-title-font-size, 1.25rem);
      }

@media (min-width: 768px) {

.accordion__items .header .title {
          font-size: var(--accordion-title-font-size, 1.5rem)
      }
        }

.accordion__items .header .title:first-child {
          padding-left: 1.75rem;
        }

.accordion__items .header .data {
        color: var(--data-color, var(--body-700, var(--gray-700, #3f3f46)));
        font-family: var(--header-span-font-family, var(--body-font-family, sans-serif));
      }

.accordion__items .content {
      font-size: 1rem;
      line-height: 1.5rem;
      padding-left: 1.75rem;
      display: none;
    }

.accordion__items .content p {
        margin-top: 0px;
      }

.accordion__items .content ul > li {
        margin-top: 0px;
      }

@media (min-width: 768px) {
        .accordion__items .content .sonic-btn {
          display: inline;
        }
      }

.accordion__items .meta {
      border-radius: var(--meta-border-radius, 4px);
      background-color: var(--meta-background-color, var(--gray-100, #f6f9fd));
      color: var(--meta-color, var(--body-color, var(--gray-700, #3f3f46)));
    }

.accordion__items .meta > span {
        border-bottom-width: 1px;
        margin-bottom: 0.75rem;
        padding-bottom: 0.75rem;
        border-color: var(--meta-border-color, var(--body-border-color, var(--gray-200, #d4d4d4)));
      }

.accordion__items .meta > span:last-of-type {
          border-bottom-width: 0px;
          margin-bottom: 0px;
          padding-bottom: 0px;
        }

.accordion__items .highlight {
      color: var(--hightlight-color, var(--primary-700, #2471cb));
    }

.accordion:not(.accordion__show-all) div.accordion__items:nth-of-type(1n+11) {
      display: none;
    }

.accordion.theme .accordion__items {
      margin-top: 1.25rem;
      border-radius: var(--section-border-radius, var(--component-border-radius, 6px));
      box-shadow: var(--component-box-shadow, 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06));
    }

.accordion.theme .accordion__items.is-active {
        box-shadow: var(--component-box-shadow-active, 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04));
      }

.accordion.theme .header {
      border-bottom-width: 0px;
      border-radius: var(--header-border-radius, var(--component-border-radius, 6px));
      background-color: var(--header-background-color, #fff);
    }

.accordion.theme .header .order-icon {
        color: var(--secondary-700, #D0021B);
      }

.accordion.theme .is-active .header {
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      border-bottom-width: 1px;
      --tw-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
      box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
    }

.accordion.theme .content {
      --tw-bg-opacity: 1;
      background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
      border-bottom-right-radius: var(--content-border-radius, var(--component-border-radius, 6px));
      border-bottom-left-radius: var(--content-border-radius, var(--component-border-radius, 6px));
    }

.accordion.theme .content .button {
        border-radius: 0.375rem;
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
        text-decoration: none;
      }

.accordion.theme.primary .header {
        background-color: var(--primary-50, #E9F1FA);
        color: var(--primary-700, #2471CB);
      }

.accordion.theme.primary .header .title {
          padding-left: 1.75rem;
        }

.accordion.theme.primary .header .order-icon {
          background-color: var(--primary-900, #16447A);
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.primary .is-active .header {
        background-color: var(--primary-900, #16447A);
        border-bottom-width: 0px;
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.primary .is-active .header .title {
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.primary .is-active .header .order-icon {
          background-color: var(--primary-700, #2471CB);
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.primary .is-active .header .data {
          color: var(--data-color-hover, #fff);
        }

.accordion.theme.primary .button {
        background-color: var(--secondary-700, #D0021B);
      }

.accordion.theme.primary .button:hover {
        background-color: var(--secondary-800, #A60216);
      }

.accordion.theme.primary .button:focus {
        background-color: var(--secondary-800, #A60216);
      }

.accordion.theme.primary .button {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.primary .button:hover {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.primary .button:focus {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.primary .control:hover {
        background-color: var(--primary-700, #2471CB);
      }

.accordion.theme.primary .control:focus {
        background-color: var(--primary-700, #2471CB);
      }

.accordion.theme.primary .control {
        border-color: var(--primary-700, #2471CB);
        color: var(--primary-700, #2471CB);
      }

.accordion.theme.primary .control:hover {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.primary .control:focus {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.primary .more {
        background-color: var(--primary-700, #2471CB);
      }

.accordion.theme.primary .more:hover {
        background-color: var(--primary-800, #1D5AA2);
      }

.accordion.theme.primary .more:focus {
        background-color: var(--primary-800, #1D5AA2);
      }

.accordion.theme.primary .highlight {
        color: var(--primary-700, #2471CB);
      }

.accordion.theme.secondary .header {
        background-color: var(--secondary-50, #FAE6E8);
        color: var(--secondary-700, #D0021B);
      }

.accordion.theme.secondary .header .title {
          padding-left: 1.75rem;
          color: var(--secondary-900, #7D0110);
        }

.accordion.theme.secondary .header .order-icon {
          background-color: var(--secondary-900, #7D0110);
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.secondary .is-active .header {
        background-color: var(--secondary-900, #7D0110);
        border-bottom-width: 0px;
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.secondary .is-active .header .title {
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.secondary .is-active .header .order-icon {
          background-color: var(--secondary-700, #D0021B);
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.secondary .is-active .header .data {
          color: var(--data-color-hover, #fff);
        }

.accordion.theme.secondary .button {
        background-color: var(--primary-700, #2471CB);
      }

.accordion.theme.secondary .button:hover {
        background-color: var(--primary-800, #1D5AA2);
      }

.accordion.theme.secondary .button:focus {
        background-color: var(--primary-800, #1D5AA2);
      }

.accordion.theme.secondary .button {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.secondary .button:hover {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.secondary .button:focus {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.secondary .control:hover {
        background-color: var(--secondary-700, #D0021B);
      }

.accordion.theme.secondary .control:focus {
        background-color: var(--secondary-700, #D0021B);
      }

.accordion.theme.secondary .control {
        border-color: var(--secondary-700, #D0021B);
        color: var(--secondary-700, #D0021B);
      }

.accordion.theme.secondary .control:hover {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.secondary .control:focus {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.secondary .more {
        background-color: var(--secondary-700, #D0021B);
      }

.accordion.theme.secondary .more:hover {
        background-color: var(--secondary-800, #A60216);
      }

.accordion.theme.secondary .more:focus {
        background-color: var(--secondary-800, #A60216);
      }

.accordion.theme.secondary .highlight {
        color: var(--secondary-700, #D0021B);
      }

.accordion.theme.tertiary .header {
        background-color: var(--tertiary-50, #FDF1E6);
        color: var(--tertiary-700, #EA7002);
      }

.accordion.theme.tertiary .header .title {
          padding-left: 1.75rem;
          color: var(--tertiary-900, #BB5A02);
        }

.accordion.theme.tertiary .header .order-icon {
          background-color: var(--tertiary-900, #BB5A02);
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.tertiary .is-active .header {
        background-color: var(--tertiary-900, #BB5A02);
        border-bottom-width: 0px;
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.tertiary .is-active .header .title {
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.tertiary .is-active .header .order-icon {
          background-color: var(--tertiary-700, #EA7002);
          --tw-text-opacity: 1;
          color: rgba(255, 255, 255, var(--tw-text-opacity));
        }

.accordion.theme.tertiary .is-active .header .data {
          color: var(--data-color-hover, #fff);
        }

.accordion.theme.tertiary .button {
        background-color: var(--primary-700, #2471CB);
      }

.accordion.theme.tertiary .button:hover {
        background-color: var(--primary-800, #1D5AA2);
      }

.accordion.theme.tertiary .button:focus {
        background-color: var(--primary-800, #1D5AA2);
      }

.accordion.theme.tertiary .button {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.tertiary .button:hover {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.tertiary .button:focus {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.tertiary .control:hover {
        background-color: var(--tertiary-700, #EA7002);
      }

.accordion.theme.tertiary .control:focus {
        background-color: var(--tertiary-700, #EA7002);
      }

.accordion.theme.tertiary .control {
        border-color: var(--tertiary-700, #EA7002);
        color: var(--tertiary-700, #EA7002);
      }

.accordion.theme.tertiary .control:hover {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.tertiary .control:focus {
        --tw-text-opacity: 1;
        color: rgba(255, 255, 255, var(--tw-text-opacity));
      }

.accordion.theme.tertiary .more {
        background-color: var(--tertiary-700, #EA7002);
      }

.accordion.theme.tertiary .more:hover {
        background-color: var(--tertiary-800, #D36502);
      }

.accordion.theme.tertiary .more:focus {
        background-color: var(--tertiary-800, #D36502);
      }

.accordion.theme.tertiary .highlight {
        color: var(--tertiary-700, #EA7002);
      }

.content .accordion ul {
  margin-top: 0px;
  margin-bottom: 0px;
}