.accordion {
    --color-header-text: #014c8b;
    --color-subline-text: #222;
    --color-content-bg: #f9f9f9;
    --color-content-text: #505253;
    --color-border: #cfdde9
}

.accordion__summary {
    border-bottom: 0.0625rem solid var(--color-border);
    cursor: pointer;
    list-style: none;
    padding: 0.75rem;
    position: relative
}

    .accordion__summary:first-of-type {
        border-top: 0.0625rem solid var(--color-border)
    }

@media print,screen and (min-width: 48em) {
    .accordion__summary {
        padding: 1rem 1.5rem
    }
}

.accordion__summary--red-alert {
    --color-header-text: #d00000;
    --color-subline-text: #911414;
    --color-content-bg: #fff2f5;
    --color-border: #d00000;
    --color-content-text: #911414
}

.accordion__details--red-alert {
    background-color: #fff2f5;
    border: 0.0625rem solid #d00000;
    border-radius: 0.5rem;
    margin-bottom: 0.5rem
}

.accordion__summary-wrapper {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    width: 100%
}

.accordion details[open] .accordion__summary {
    border-bottom: 0
}

    .accordion details[open] .accordion__summary::after {
        transform: rotate(0deg)
    }

.accordion__content {
    background-color: var(--color-content-bg);
    padding: 1.875rem
}

    .accordion__content p:last-of-type {
        margin-bottom: 0;
        padding-bottom: 0
    }

.accordion__content--red-alert {
    background-color: #fff2f5
}

.accordion__heading {
    font-weight: 400;
    margin-bottom: 2rem
}

.accordion__subtitle {
    color: var(--color-subline-text)
}

.accordion__summary-heading {
    color: var(--color-header-text)
}

.accordion__summary-heading--red-alert::before {
    background-image: url("../images/red-warning.svg");
    background-position: center;
    background-size: contain;
    content: "";
    display: inline-block;
    height: 1.5rem;
    margin-right: 0.5rem;
    vertical-align: middle;
    width: 1.5rem
}

.accordion__view-button {
    align-items: center;
    color: var(--color-header-text);
    display: flex;
    position: relative
}

    .accordion__view-button::after {
        background-color: var(--color-header-text);
        content: "";
        display: inline-block;
        height: 1.5625rem;
        margin-left: 0.5rem;
        -webkit-mask: url("data:image/svg+xml,%3Csvg width=%2224%22 height=%2225%22 viewBox=%220 0 24 25%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12 7.5V17.5M7 12.5H17%22 stroke=%22%23014C8B%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center/contain no-repeat;
        mask: url("data:image/svg+xml,%3Csvg width=%2224%22 height=%2225%22 viewBox=%220 0 24 25%22 fill=%22none%22 xmlns=%22http://www.w3.org/2000/svg%22%3E%3Cpath d=%22M12 7.5V17.5M7 12.5H17%22 stroke=%22%23014C8B%22 stroke-width=%221.5%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22/%3E%3C/svg%3E") center/contain no-repeat;
        vertical-align: middle;
        width: 1.5rem
    }

.expanded .accordion__view-button::after {
    -webkit-mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25"%3E%3Cpath stroke="%23014C8B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M7 12.5h10"/%3E%3C/svg%3E') center/contain no-repeat;
    mask: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25"%3E%3Cpath stroke="%23014C8B" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" d="M7 12.5h10"/%3E%3C/svg%3E') center/contain no-repeat
}