/***   FAQs component   ***/
body.single-faq:has(.faqs-list-div.pj) #national-assessement-banner.faqs,
    body.single-faq:has(.faqs-list-div.pj-fr) #national-assessement-banner.faqs {
    background-color: var(--grades-6-lime-green) !important;
}
body.single-faq:has(.faqs-list-div.grade-9-math) #national-assessement-banner.faqs,
    body.single-faq:has(.faqs-list-div.grade-9-math-fr) #national-assessement-banner.faqs {
    background-color: var(--grades-9-light-purple) !important;
}
body.single-faq:has(.faqs-list-div.osslt) #national-assessement-banner.faqs,
    body.single-faq:has(.faqs-list-div.tpcl) #national-assessement-banner.faqs {
    background-color: var(--grades-10-light-blue) !important;
}

.faqs-div {
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    gap: 20px !important;
    align-self: stretch !important;
}
.faqs-inner-div {
    box-sizing: border-box !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    align-self: stretch !important;
}
.faqs-query-loop {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 0 !important;
}
.faqs-list-div {
    box-sizing: border-box !important;
    /* width: 88% */
    /* max-width: 92vw !important;
    width: 92vw; */
    width: var(--content-max-width) !important;
    max-width: var(--content-max-width) !important;
}

@media screen and (min-width:1281px) {
    .faqs-list-div {
        /* max-width: 80vw !important;
        width:80vw; */
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

details.faq-detail {
    min-height: 40px !important;
    padding: 0 0 0 var(--spacing-20-40) !important;
}
details.faq-detail summary {
    list-style: none;
}
details.faq-detail summary::-webkit-details-marker {
    display: none;
}
.faq-detail summary:focus {
    outline: none !important;
}
details.faq-detail summary {
    display: flex;
    align-items: center;
    justify-content: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0 0 0 0 !important;
    position: relative;
}
details.faq-detail summary .faq-question-text {
    flex: 1 1 auto;
    min-width: 0;
    padding: 1.25rem 0.3125rem 1.25rem 0;

}
details.faq-detail summary sup,
details.faq-detail summary sub {
    font-size: 0.72em;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
details.faq-detail summary sup {
    top: -0.45em;
}
details.faq-detail summary sub {
    bottom: -0.2em;
}
details.faq-detail summary::after {
    content: "";
    width: 80px;
    min-height: 80px;
    height: stretch;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M0.650024 10.6499H20.65' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M10.65 0.649902L10.65 20.6499' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 22px 22px;
}
details.faq-detail[open] summary::after {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M0.650024 10.6499H20.65' stroke='black' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
details.faq-detail summary:hover::after {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M0.650024 10.6499H20.65' stroke='white' stroke-width='1.3' stroke-linecap='round'/%3E%3Cpath d='M10.65 0.649902L10.65 20.6499' stroke='white' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}
details.faq-detail[open] summary:hover::after {
    background-color: #000;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cpath d='M0.650024 10.6499H20.65' stroke='white' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E");
}

.entry-content.entry-content.faq-answer {
    padding: 0 var(--spacing-20-40) var(--spacing-20-40) 0px !important;
    box-sizing: border-box !important;
    margin: 0 !important;
    ul {
        list-style: disc !important;
        li {
            font-family: var(--li-font-family);
            font-size: var(--li-font-size);
            font-style: normal;
            font-weight: var(--li-font-weight);
            line-height: var(--li-line-height);
            ul {
                list-style: circle !important;
            }
        }
    }
    a {
        overflow-wrap: anywhere;
        word-break: break-word;
    }
}
@media screen and (max-width:1024px){
    .faqs-div.has-global-padding, ul.faqs-post-template.has-global-padding, .faqs-inner-div.has-global-padding {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}
li.type-faq, li.faq {
    list-style-type: none !important;
    width: 100%;
}



ul.faqs-list {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100% !important;
    padding-inline-start: 0px !important;
}
li.faq {
    box-sizing: border-box !important;
    width: 100% !important;
}
.faqs-list li.faq {
    border: 1px none !important;
}
.faqs-list li.faq:first-child {
    border-top: 1px solid var(--black, #000) !important;
}

#grade-3-page h3.heading-faqs {
    color: var(--grades-3-orange-1) !important;
}
#grade-6-page h3, #grade-6-page-test h3 {
    color: var(--grades-6-green-1) !important;
}
#grade9 h3 {
    color: var(--grades-9-purple-4) !important;
}
.grade-assess.osslt h3 {
    color: var(--grades-10-blue-5) !important;
}

.faqs-div .btns-div {
    margin-top: 0px !important;
}

/***   FAQs component   ***/