:root {
    --faq-bg: #F5F7FA;
    --font: 'Titillium Web', Helvetica, Arial, Lucida, sans-serif;
    --text: #333333;
}

div#faq {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
}

.cmf_vraag {
    background-color: #f3f4f6;
    padding: 15px;
    position: relative;
}

.cmf_faq_titel {
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    font-family: var(--font);
    color: var(--text);
}

.cmf_faq_expand {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 30px;
    height: 30px;
    background-image: url('data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%0A%20%20%3Cpath%20fill%3D%22%23757575%22%20d%3D%22M15.0857864%2C12.5%20L6.79289322%2C20.7928932%20C6.40236893%2C21.1834175%206.40236893%2C21.8165825%206.79289322%2C22.2071068%20C7.18341751%2C22.5976311%207.81658249%2C22.5976311%208.20710678%2C22.2071068%20L17.2071068%2C13.2071068%20C17.5976311%2C12.8165825%2017.5976311%2C12.1834175%2017.2071068%2C11.7928932%20L8.20710678%2C2.79289322%20C7.81658249%2C2.40236893%207.18341751%2C2.40236893%206.79289322%2C2.79289322%20C6.40236893%2C3.18341751%206.40236893%2C3.81658249%206.79289322%2C4.20710678%20L15.0857864%2C12.5%20Z%22%20transform%3D%22rotate(90%2012%2012.5)%22%2F%3E%0A%3C%2Fsvg%3E%0A');
    background-size: 20px;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
}

.cmf_vraag.cmf_expanded>.cmf_faq_expand {
    transform: rotate(180DEG);
}

.cmf_expanded>.cmf_faq_titel {
    color: var(--primary);
}

.cmf_faq_content>*,
.cmf_faq_content>p>*,
.cmf_faq_content>p {
    font-family: var(--font);
    color: var(--text);
    margin-top: 10px;
}

.cmf_faq_content>p>a,
.cmf_faq_content>a {
    color: var(--accent);
    text-decoration: underline;
}

.vjpz_vue_filters {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    margin-top: 20px;
}

.vjpz_vue_filters span {
    font-weight: 500;
    margin-right: 7px;
    color: white;
    font-size: 15px;
}

.vjpz_vue_filters .vjpz_vue_filter {
    padding: 15px;
    background-color: #5B657D;
    color: var(--primary);
    font-weight: 600;
    font-family: var(--font);
    color: white !important;
    border-radius: 3px;
    font-size: 15px;
}

.vjpz_vue_filters .vjpz_vue_filter.vjpz_vue_filter_active {
    background-color: var(--secondary);
    color: white !important;
    font-family: var(--font);
}

.vjpz_vue_filters .vjpz_vue_filter:hover {
    background-color: var(--secondary);
    color: white !important;
    cursor: pointer;
}

@media (max-width: 768px) {
    .cmf_vraag {
        padding: 10px;
    }

    .cmf_faq_titel {
        font-size: 18px;
    }

    .cmf_faq_expand {
        width: 25px;
        height: 25px;
        background-size: 16px;
        right: 8px;
        top: 8px;
    }

    .vjpz_vue_filters {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
    }
}

.cmf_faq_filters {
    display: flex;
    flex-direction: row;
    gap: 10px;
    margin-bottom: 10px;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}

.cmf_faq_filters span {
    font-weight: 500;
    margin-right: 7px;
    color: var(--text);
    font-size: 15px;
}

.cmf_faq_filters .vjpz_vue_filter {
    padding: 10px 15px;
    background-color: #d1d5df;
    color: #002d58;
    font-weight: 600;
    font-family: var(--font);
    border-radius: 3px;
    font-size: 15px;
    cursor: pointer;
}

.cmf_faq_filters .vjpz_vue_filter.vjpz_vue_filter_active {
    background-color: var(--secondary);
    color: white;
}

.vjpz_vue_filter_select {
    display: none;
    padding: 10px 15px;
    background-color: #d1d5df;
    color: #002d58;
    font-weight: 600;
    font-family: var(--font);
    border-radius: 3px;
    font-size: 15px;
    border: none;
    cursor: pointer;
    min-width: 150px;
}

@media (max-width: 930px) {
    .cmf_faq_filters .vjpz_vue_filter {
        display: none;
    }
    
    .vjpz_vue_filter_select {
        display: block;
    }
}

@media (max-width: 768px) {
    .cmf_faq_filters {
        flex-direction: column;
        align-items: flex-start;
    }
}