.accordion {
    width: 100%;
    margin-top: 1rem;
    margin-bottom: 2rem;
}

.accordion-item > a:hover {
    text-decoration: none;
}

.accordion-item > div {
    padding-bottom: 2rem;
}

button:focus:not(:focus-visible) {
    outline: none;
}

/* for the flippy arrow */

.accordion .accordion-item svg {
    transition: transform 200ms ease-out;
    transform: rotateX(180deg);
    margin: 0 1rem;
    min-width: 14px;
    fill: var(--brand-red);
}

.accordion .accordion-item a.collapsed svg {
    transition: transform 200ms ease-out;
    transform: rotateX(0deg);
    margin: 0 1rem;
    fill: var(--text-body);
}



@keyframes down {
    from {
        transform: rotateX(180deg);
    }
    to {
        transform: rotateX(0deg);
    }
}

@keyframes up {
    from {
        transform: rotateX(0deg);
    }
    to {
        transform: rotateX(180deg);
    }
}

@keyframes stay-up {
    to {
        transform: rotateX(180deg);
    }
}

@keyframes down-black {
    from {
        transform: none;
        color: black;
    }
    to {
        transform: rotateX(180deg);
        color: black;
    }
}
/* end of flippy thing */

/* FOR DEFAULT ACCORDION */
.default-accordion.accordion-item.h5.text-sans-light {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 150% */
    margin-bottom: 0;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}



.default-accordion.accordion-item:hover a.collapsed div.default-accordion.accordion-item{
    color: var(--brand-red);
}

.default-accordion.accordion-item:hover a svg {
    /*filter: brightness(0) saturate(100%) invert(26%) sepia(56%) saturate(6238%) hue-rotate(331deg) brightness(68%) contrast(112%);*/
    fill: var(--brand-red);
}

/*.default-accordion.accordion-item:has(:not(a.collapsed)) {*/
/*    color: black;*/
/*}*/

/*.default-accordion.accordion-item:hover  a div.default-accordion.accordion-item{*/
/*    font-weight: 500;*/
/*}*/

.default-accordion.accordion-item.h5.text-sans-light {
    color: #343A40;
}

.default-accordion.accordion-item.h5.text-sans-light {
    border: none;
}

.default-accordion.accordion-item:first-child {
    border-top: solid #CED4DA 1px;
}

.default-accordion.accordion-item {
    border-bottom: solid #CED4DA 1px;
}

/* END DEFAULT ACCORDION */

/* START CARD 1 ACCORDION */

.card-1.accordion-item.h5.text-sans-light {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 150% */
    margin-bottom: 0;

    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.card-1.accordion-item.h5.text-sans-light {
    color: #343A40;
    background: none;
}

.card-1.accordion-item:hover a svg {
    /*filter: invert(26%) sepia(56%) saturate(6238%) hue-rotate(331deg) brightness(68%) contrast(112%);*/
    fill: var(--brand-red);
}

.card-1.accordion-item.h5.text-sans-light {
    border: none;
}

.card-1.accordion-item > div {
    padding: 1rem 1.5rem 2rem 1.5rem;
    border-radius: 0 0 0.25rem 0.25rem;
    background-color: white;
}


/* selected = beige. default = gray */
.card-1.accordion-item {
    border-radius: 0.25rem;
    background-color: var(--gray-200);
    outline: none;
}

.card-1.accordion-item:has(a.collapsed) {
    background-color: var(--gray-200);
    outline: none;
}

.card-1.accordion-item:has(a.collapsed):hover {
    background-color: var(--secondary-light-beige);
    outline: none;
}

.card-1.accordion-item:has(a) {
    background-color: var(--secondary-light-beige);
    outline: solid var(--primary-link-red) 1px;
    padding: 1px;
}

.card-1.accordion-item:first-child {
    margin-top: 0;
}

.card-1.accordion-item {
    margin-top: 0.31rem;
}

/* END CARD 1 ACCORDION */


/* START CARD 2 ACCORDION */

.card-2.accordion-item.h5.text-sans-light {
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: 1.875rem; /* 150% */
    margin-bottom: 0;

    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.card-2.accordion-item.h5.text-sans-light {
    color: #343A40;
    background: none;
}

.card-2.accordion-item.h5.text-sans-light {
    border: none;
}

/* card 2's panel */
.card-2.accordion-item > div {
    padding: 1rem 1.5rem 2rem 1.5rem;
    border-radius: 0 0 0.25rem 0.25rem;
    background: white;
}

.card-2.accordion-item {
    outline: none;
    border-radius: 0.25rem;
    background-color: var(--light-gray-bg);
}

.card-2.accordion-item:has(a.collapsed) {
    background-color: white;
    outline: none;
}

/* on hover */
.card-2.accordion-item:has(a.collapsed):hover {
    background-color: var(--secondary-beige);
}

.card-2.accordion-item:hover a.collapsed div.card-2.accordion-item{
    color: var(--brand-red);
    outline: none;
}

.card-2.accordion-item:hover a svg {
    /*filter: invert(26%) sepia(56%) saturate(6238%) hue-rotate(331deg) brightness(68%) contrast(112%);*/
    fill: var(--brand-red);
}

.card-2.accordion-item:has(a) {
    background-color: var(--secondary-light-beige);
    outline: solid var(--primary-link-red) 1px;
    padding: 1px;
}

.card-2.accordion-item:first-child {
    margin-top: 0;
}

.card-2.accordion-item {
    margin-top: 0.31rem;
}

/* END CARD 2 ACCORDION */


.accordion-item > a {
    padding: 0;
    margin: 0;
    opacity: 1;
    text-decoration: none;
}

.accordion-item > a:hover, a:focus {
    padding: 0;
    margin: 0;
    opacity: 1;
    text-decoration: none;
}


.expand_button {
    color: var(--brand-red);
    font-size: 1rem;
    line-height: 1.875;
    margin-top: 2rem;
    padding-left: 0;
    padding-right: 0;
    background: rgba(0, 0, 0, 0);
    border-radius: 0;
    border: 0;
    display: inline-block;
}

:root {
    --brand-red: #B30738;
    --gray-border: #DEE2E6;
    --secondary-light-beige: #F4F2F0;
    --light-gray-bg: #F8F9FA;
    --secondary-beige: #DFDBD3;
    --gray-200: #E9ECEF;
    --primary-link-red: #9E1B32;
    --text-body: #343A40;
}

.accordion-item>[data-toggle=collapse][aria-expanded=false] {
    opacity: 1;
}