:root {
    --heading-font-size: 24px;
    --color-white: #FFFFFF;
    --color-primary-enabled: #0F61FD;
    --color-primary-hover: #0353E9;
    --color-secondary-enabled: #383838;
    --color-secondary-hover: #4C4C4C;
    --color-red-title: #DA1E28;
    --color-title: #F1F1F1;
    --color-title-hover: #F7F7F7;
    --color-grey: #F5F5F5;
}

p[role="definition"] {
    font-size: 16px;
}
p[role="note"] {
    font-size: 12px;
}

section[role='main'] {
    display: flex;
    flex-direction: row;
    padding-top: 5%;
    padding-bottom: 5%;
    line-height: 1.6;
}

    section[role='main'] sup, sub {
        vertical-align: 0;
        position: relative;
    }
    
    section[role='main'] sup {
        bottom: 1ex;
    }

    section[role='main'] sub {
        top: 0.8ex;
    }
    
    section[role='main'] > section[role='search'] {
        padding-left: 2%;
        padding-right: 1%;
    }

    section[role='main'] h2[role='heading'] {
        font-size: var(--heading-font-size);
    }

    section[role='main'] > section[role='search'] > section[role='list'] {
        display: flex;
        flex-direction: column;
        flex: 3;
    }

        section[role='main'] > section[role='search'] > section[role='list'] label {
            margin-left: 0.8rem;
        }

    section[role='main'] > section[role='search'] section[role='listitem'] {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }

    section[role='main'] > section[role='search'] > section[role='button'] {
        display: flex;
        padding-top: 3%;
        justify-content: space-around;
    }

        section[role='main'] > section[role='search'] > section[role='button'] > input[title='Apply filter'] {
            background-color: var(--color-primary-enabled);
            color: var(--color-white);
            height: 47px;
            width: 45%;
            font-size: 16px;
            border: none;
        }

            section[role='main'] > section[role='search'] > section[role='button'] > input[title='Apply filter']:hover {
                background-color: var(--color-primary-hover);
            }

        section[role='main'] > section[role='search'] > section[role='button'] > input[title='Remove filter'] {
            background-color: var(--color-secondary-enabled);
            color: var(--color-white);
            height: 47px;
            width: 45%;
            font-size: 16px;
            border: none;
        }

            section[role='main'] > section[role='search'] > section[role='button'] > input[title='Remove filter']:hover {
                background-color: var(--color-secondary-hover);
            }

    section[role='main'] > section[role='definition'] {
        display: flex;
        flex-direction: column;
        padding-right: 5%;
        flex: 2;
    }

        section[role='main'] > section[role='definition'] > section[role='list'] {
            background-color: var(--color-white);
            padding: 1.5rem 1.5rem 2rem 1.5rem;
        }

        section[role='main'] > section[role='definition'] section[role='listitem'] {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            margin-top: 0.5rem;
            background-color: var(--color-grey);
        }

        section[role='main'] > section[role='definition'] section[role='listitem heading'] {
            display: flex;
            align-items: center;
        }

            section[role='main'] > section[role='definition'] section[role='listitem heading'] > p {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 99%;
                position: relative;
                font-weight: 700;
            }

        section[role='main'] > section[role='definition'] section[title^='red-'][role="listitem heading"] {
            padding: 1% 1% 1% 2%;
            margin-left: -1.5rem;
            margin-right: -1.5rem;
            background-color: var(--color-red-title);
            color: var(--color-white);
        }

        section[role='main'] > section[role='definition'] section[title^='impurity-'][role="listitem heading"] {
            padding: 1% 1% 1% 2%;
            margin-left: -1.5rem;
            margin-right: -1.5rem;
            background-color: var(--color-title);
        }

            section[role='main'] > section[role='definition'] section[title^='impurity-'][role="listitem heading"]:hover {
                background-color: var(--color-title-hover);
            }

article[title='Signpost'] > footer {
    display: flex;
    justify-content: center;
    align-items: center;
}

    article[title='Signpost'] > footer > img {
        width: 70%;
        height: auto;
    }

.accordion .accordion-content {
    display: none;
    overflow: hidden;
    transition: height 0.3s ease;
}

.accordion .accordion-title::after {
    display: block;
    content: "";
    width: 1rem;
    height: 1rem;
    margin-left: 1rem;
    background-image: url('./images/accordion.png');
    transition: transform 0.5s ease;
}

.accordion.active .accordion-title::after {
    transform: rotate(-180deg);
    transition: transform 0.5s ease;
}

.accordion.active .accordion-content {
    display: block;
    height: auto;
}

ul.accordion-content {
    padding-bottom: 0.8rem;
}