body { 
  font-family:"Montserrat", "Helvetica", "Arial", sans-serif !important; 
  font-size:11pt;
}
* { 
  font-family:"Montserrat", "Helvetica", "Arial", sans-serif !important; 
}

#search-container {
    background-image: url('https://files.helpdocs.io/85xtq08n01/articles/xzenvi1j0c/1680769269913/my-octopus-pmi-hero-image-2.jpg') !important;
    background-size: cover !important;
    background-position: 0 !important;
}

.create-ticket-btn-web-view #createTicket,
.create-ticket-btn-web-view #anonymousCreateTicket,
#mobile-create-btn,
#mobile_ticket_tab,
#ticket_tab,
#contact-support-container,
#login-button,
#mobile_login_tab,
#contact-support-mobileview
{
display: none !important;
}
#header_view .show {
display: block;
}
#mobile_view_header #mobile-create-btn.show {
display: block;
}
.ticket-list-container,
.create-ticket-container {
display: none;
}
/* Assuming 'My Profile' has a unique ID or class */
a[href*="profile"] {
  display: none !important;
}


/* Remove the Knowledge Base tab */
#kb_tab {
  display: none !important;
}


/* -------------------------
   Q&A Accordion – Modern CSS
   ------------------------- */
:root {
  --qa-font: "Montserrat", system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  --qa-text: #1f2937;              /* Gray 800 */
  --qa-muted: #6b7280;             /* Gray 500 */
  --qa-border: #d7d7d7;            /* Subtle border */
  --qa-accent: #2563eb;            /* Focus ring color */
  --qa-item-bg-1: #ffffff;         /* White */
  --qa-item-bg-2: #f5f5f5;         /* Light Grey */
  --qa-summary-hover: #134395;     /* Requested hover color */
  --qa-radius: 10px;
  --qa-shadow: 0 1px 2px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.08);
  --qa-space: 1rem;
  --qa-speed: 220ms;
}

@media (prefers-color-scheme: dark) {
  :root {
    --qa-text: #e5e7eb;            /* Gray 200 */
    --qa-muted: #9ca3af;           /* Gray 400 */
    --qa-border: #374151;          /* Gray 700 */
    --qa-item-bg-1: #111827;       /* Gray 900 */
    --qa-item-bg-2: #0b1220;       /* Slightly darker alt */
    --qa-summary-hover: #134395;   /* Keep same hover in dark mode */
    --qa-shadow: none;
    --qa-accent: #60a5fa;
  }
}

/* Full-width, left-aligned container */
.qa {
  font-family: var(--qa-font);
  color: var(--qa-text);
  width: 100%;
  max-width: none; /* edge-to-edge within parent */
  margin: 0;
  padding: 0;
  text-align: left;
}

.qa h4 {
  font-weight: 600;
  font-size: clamp(1rem, 0.9rem + 0.5vw, 1.125rem);
  margin: 2rem 0 0.75rem;
  color: var(--qa-muted);
  letter-spacing: .2px;
}

/* Each item as a neat "card" */
.qa-item {
  border: 1px solid var(--qa-border);
  border-radius: var(--qa-radius);
  background: var(--qa-item-bg-1);
  box-shadow: var(--qa-shadow);
  overflow: clip;
  margin: 0.75rem 0;
}

/* Alternate background for visual rhythm */
.qa-item:nth-of-type(even) {
  background: var(--qa-item-bg-2);
}

.qa-summary {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: calc(var(--qa-space) * .9) calc(var(--qa-space) * 1.1);
  cursor: pointer;
  font-weight: 600;
  line-height: 1.35;
  list-style: none; /* Normalize marker on Firefox */
}

/* Remove the default marker (Chrome/Safari) */
.qa-summary::-webkit-details-marker {
  display: none;
}

/* Hover: deep blue background + white text */
.qa-summary:hover {
  background: var(--qa-summary-hover);
  color: #ffffff;
}

/* Focus styles for keyboard users */
.qa-summary:focus-visible {
  outline: 3px solid var(--qa-accent);
  outline-offset: 2px;
  border-radius: calc(var(--qa-radius) - 2px);
}

/* Chevron indicator */
.chevron {
  margin-left: auto;
  width: .65em;
  height: .65em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(-45deg);
  transition: transform var(--qa-speed) ease;
  opacity: .9;
}

/* Chevron turns white on hover (inherits currentColor) */
.qa-summary:hover .chevron {
  border-color: currentColor;
}

.qa-item[open] .chevron {
  transform: rotate(135deg);
}

/* Smooth open/close using CSS grid trick */
.qa-content {
  display: grid;
  grid-template-rows: 0fr;           /* Collapsed */
  transition: grid-template-rows var(--qa-speed) ease;
  border-top: 1px solid var(--qa-border);
}

.qa-item[open] .qa-content {
  grid-template-rows: 1fr;           /* Expanded */
}

.qa-content > div {
  overflow: hidden;                   /* Required for grid trick */
  padding: calc(var(--qa-space) * .9) calc(var(--qa-space) * 1.1) var(--qa-space);
}

.qa-content p {
  margin: .25rem 0 0;
  line-height: 1.6;
}

/* Optional "Expand/Collapse all" controls */
.qa-controls {
  display: flex;
  gap: .5rem;
  margin-top: 1rem;
}

.qa-controls button {
  appearance: none;
  border: 1px solid var(--qa-border);
  background: var(--qa-item-bg-1);
  color: var(--qa-text);
  padding: .5rem .75rem;
  border-radius: .6rem;
  cursor: pointer;
  font: inherit;
}

.qa-controls button:hover {
  background: var(--qa-summary-hover);
  color: #ffffff;
}

.qa-controls button:focus-visible {
  outline: 3px solid var(--qa-accent);
  outline-offset: 2px;
}

/* Motion sensitivity */
@media (prefers-reduced-motion: reduce) {
  .chevron,
  .qa-content {
    transition: none !important;
  }
}

/* Optional: If parent container is fixed-width and you want true viewport edge-to-edge,
   add class 'qa--bleed' to the section to bleed horizontally */
.qa.qa--bleed {
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
</style>

<section class="qa">
  <h4>Accounts - SAP</h4>

  <!-- 1 -->
  <details class="qa-item">
    <summary class="qa-summary">
      <span class="qa-question">How do I map my inter division accounts?</span>
      <span class="chevron" aria-hidden="true"></span>
    </summary>
    <div class="qa-content">
      <div>
        <p>Under <strong>Inter Div. Mappings</strong> you can add the Divisions you wish to map.</p>
      </div>
    </div>
  </details>

  <!-- 2 -->
  <details class="qa-item">
    <summary class="qa-summary">
      <span class="qa-question">I have created a new VAT code but cannot select this on a Transaction?</span>
      <span class="chevron" aria-hidden="true"></span>
    </summary>
    <div class="qa-content">
      <div>
        <p>Ensure that it has been assigned to the Division for the transaction under <strong>VAT</strong> Maintenance.</p>
      </div>
    </div>
  </details>

  <!-- 3 -->
  <details class="qa-item">
    <summary class="qa-summary">
      <span class="qa-question">Why do I get the message "The calendar for 2024/01 has not been set up"?</span>
      <span class="chevron" aria-hidden="true"></span>
    </summary>
    <div class="qa-content">
      <div>
        <p>You will need to create the Calendar.</p>
      </div>
    </div>
  </details>

  <h4>Authorisation</h4>

  <!-- 4 -->
  <details class="qa-item">
    <summary class="qa-summary">
      <span class="qa-question">Can I direct all invoices for a specific supplier on a specific production to one user to authorise ?</span>
      <span class="chevron" aria-hidden="true"></span>
    </summary>
    <div class="qa-content">
      <div>
        <p>No, that functionality is not available.</p>
      </div>
    </div>
  </details>

  <!-- 5 -->
  <details class="qa-item">
    <summary class="qa-summary">
      <span class="qa-question">Can I stop a user from being able to authorise a Supplier ?</span>
      <span class="chevron" aria-hidden="true"></span>
    </summary>
    <div class="qa-content">
      <div>
        <p>Yes, you can add that Supplier to the Supplier tab on the Users Account. If they enter a Purchase Order for this Supplier they will be presented with the following message.</p>
      </div>
    </div>
  </details>

  <!-- Optional controls -->
  <div class="qa-controls" aria-label="Q&A controls">
    expandExpand all</button>
    collapseCollapse all</button>
  </div>
</section>

<!-- Optional: Tiny JS to support the "Expand all / Collapse all" buttons -->
<script>
  (() => {
    const container = document.currentScript.closest('.qa');
    if (!container) return;

    container.querySelectorAll('.qa-controls [data-action]').forEach(btn => {
      btn.addEventListener('click', () => {
        const expand = btn.dataset.action === 'expand';
        container.querySelectorAll('.qa-item').forEach(d => d.open = expand);
      });
    });
  })();
</script>