тест сообщение обычное

[html]
<script>
const Family = {
    Redwald: { id: 'Redwald' },
    Korro: { id: 'Korro' },
    Menahen: { id: 'Menahen' },
    Nievall: { id: 'Nievall' },
    Oldwin: { id: 'Oldwin' },
    Eltaine: { id: 'Eltaine' },
    Marawin: { id: 'Marawin' },
    Evermire: { id: 'Evermire' },
    Argail: { id: 'Argail' },
    Tarren: { id: 'Tarren' },
    Sellia: { id: 'Sellia' },
    Geddir: { id: 'Geddir' },
    Oleger: { id: 'Oleger' },
    Bjorndalen: { id: 'Bjorndalen' },
    Emer: { id: 'Emer' },
    Kairhill: { id: 'Kairhill' },
};

const Country = {
    Valden: {
        id: 'ValdenCountry',
        name: 'Вальден',
        principals: {
            ValdenPrincipal: { id: 'ValdenPrincipal', name: 'Княжество Вальден' },
            Holden: { id: 'Holden', name: 'Княжество Холден' },
            Aedin: { id: 'Aedin', name: 'Княжество Эйдин' },
            Lindisfiall: { id: 'Lindisfiall', name: 'Княжество Линдисфьялль' },
            Danmore: { id: 'Danmore', name: 'Княжество Данмор' },
            Gilfor: { id: 'Gilfor', name: 'Княжество Гилфор' },
            Kineil: { id: 'Kineil', name: 'Княжество Кинейл' },
            Dunadd: { id: 'Dunadd', name: 'Княжество Дунадд' },
            Marcia: { id: 'Marcia', name: 'Княжество Марсия' }
        }
    },
    FiveRivers: {
        id: 'FiveRivers',
        name: 'Пятиречье',
        principals: {
            Aranvin: { id: 'Aranvin', name: 'Анарвин' },
            WhiteHarbor: { id: 'WhiteHarbor', name: 'Белая гавань' }
        },
    },
    Kaelim: { id: 'Kaelim', name: 'Кейлим' },
    Aravel: { id: 'Aravel', name: 'Аравель' },
    Rionna: {
        id: 'Rionna',
        name: 'Рионна',
        principals: {
            Ilos: { id: 'Ilos', name: 'Илос' },
            Ilaria: { id: 'Ilaria', name: 'Илария' },
            Tira: { id: 'Tira', name: 'Тира' }
        }
    },
    Voyager: { id: 'Voyager', name: 'Странники' },
    OtherCountry: { id: 'OtherCountry', name: 'Другое' }
};
const Activity = {
    Gods: {
        id: 'Gods',
        name: 'Служащие богов',
        principals: {
            Life: { id: 'Life', name: "Домен жизни" },
            Death: { id: 'Death', name: "Домен смерти" },
            Light: { id: 'Light', name: "Домен света" },
            Shadows: { id: 'Shadows', name: "Домен тени" },
            Mind: { id: 'Mind', name: "Домен разума" },
            Spirit: { id: 'Spirit', name: "Домен духа" },
            New: { id: 'New', name: "Новые боги" }
        }
    },
    Politics: { id: 'Politics', name: 'Политики' },
    Warrior: { id: 'Warrior', name: 'Воины' },
    Wizard: { id: 'Wizard', name: 'Маги' },
    Kale: { id: 'Kale', name: 'Кале' },
    Criminal: { id: 'Criminal', name: 'Преступники' }
};
const Race = {
    Human: { id: 'Human', name: 'Люди' },
    Vampire: { id: 'Vampire', name: 'Вампиры' },
    Soulless: { id: 'Soulless', name: 'Бездушники' },
    Aire: { id: 'Aire', name: 'Айре' },
    Werewolf: { id: 'Werewolf', name: 'Перевертыши' },
    Beastman: { id: 'Beastman', name: 'Зверолюди' },
};

const Groups = [
    {
        id: 'Valden',
        name: 'Объединенное королевство Вальден',
        descr: 'Королевский феод со столицей в Кайр Парале',
        imageUrl: 'https://upforme.ru/uploads/001c/03/d9/3/822504.png',
        includeTags: [Country.Valden.principals.ValdenPrincipal.id],
        groupLevel: 1,
        subgroups: [
            {
                id: 'Redwald',
                name: 'Королевская семья Вальдена [Дом Редвальдов]',
                includeTags: [Family.Redwald.id],
                groupLevel: 3,
                excludetags: []
            },
            {
                id: 'ValdenPolitics',
                name: 'Королевский двор Вальдена',
                includeTags: [Activity.Politics.id],
                groupLevel: 3,
                excludetags: [Family.Redwald.id, Family.Korro.id]
            },
            {
                id: 'Korro',
                name: 'Герцогство Корро [вассалы Редвальдов]',
                descr: 'Столица — Эленглинн',
                includeTags: [Family.Korro.id],
                groupLevel: 3,
                excludetags: []
            },
            {
                id: 'ValdenOther',
                name: 'Прочие',
                includeTags: [],
                groupLevel: 3,
                excludetags: [Activity.Politics.id, Family.Redwald.id, Family.Korro.id]
            },
        ],
    },
    {
        id: 'Holden',
        name: 'Княжество Холден',
        descr: 'Самое влиятельное княжество после королей',
        includeTags: [Country.Valden.principals.Holden.id],
        groupLevel: 2,
        subgroups: [
            {
                id: 'Menahem',
                name: 'Князья Холдена [Дом Менахем]',
                groupLevel: 3,
                includeTags: [Family.Menahen.id]
            },
            {
                id: 'Nievall',
                name: 'Герцогство Ниевалль [вассалы Менахемов]',
                groupLevel: 3,
                includeTags: [Family.Nievall.id]
            },
            {
                id: 'Oldwin',
                name: 'Герцогство Олдвин [вассалы Менахемов]',
                groupLevel: 3,
                includeTags: [Family.Oldwin.id]
            },
            {
                id: 'HoldenOther',
                name: 'Жители Кайр Андара (столицы Холдена)',
                groupLevel: 3,
                includeTags: [],
                excludetags: [Family.Menahen.id, Family.Nievall.id, Family.Oldwin.id]
            }
        ]
    },
    {
        id: 'Aedin',
        name: 'Княжество Эйдин',
        descr: 'Граничит с проклятыми землями, держит аванпосты от нежити и скверны',
        groupLevel: 2,
        includeTags: [Country.Valden.principals.Aedin.id],
        subgroups: [
            {
                id: 'Eltaine',
                name: 'Династия ан Эльтайнов [ранее — короли Эйдина]',
                groupLevel: 3,
                includeTags: [Family.Eltaine.id]
            },
            {
                id: 'Marawin',
                name: 'Князья Эйдина [Дом Маравин]',
                groupLevel: 3,
                includeTags: [Family.Marawin.id]
            },
            {
                id: 'Evermaire',
                name: 'Герцогство Эвермайр [вассалы Маравинов]',
                groupLevel: 3,
                includeTags: [Family.Evermire.id]
            },
            {
                id: 'KairTarn',
                name: 'Графство Кайр Тарн',
                groupLevel: 3,
                includeTags: [Family.Argail.id]
            },
            {
                id: 'Aefion',
                name: 'Маркграфство Эйфион [вассалы Маравинов]',
                groupLevel: 3,
                includeTags: [Family.Tarren.id]
            },
            {
                id: 'Sellia',
                name: 'Маркграфство Селлия [вассалы Маравинов]',
                groupLevel: 3,
                descr: 'Приграничная территория, на которой находится перевал с крепостями для защиты от скверны из Амадии',
                includeTags: [Family.Sellia.id]
            },
            {
                id: 'MierKaya',
                name: 'Баронство Миер-Кайя [вассалы Этарисов]',
                groupLevel: 3,
                includeTags: [Family.Geddir.id]
            },
            {
                id: 'Fael',
                name: 'Герцогство Фаэль [вассалы Маравинов]',
                groupLevel: 3,
                includeTags: [Family.Oleger.id]
            },
            {
                id: 'AedinOthers',
                name: 'Гильдии, вассалы и простолюдины',
                groupLevel: 3,
                includeTags: [],
                excludetags: [Family.Argail.id, Family.Tarren.id, Family.Sellia.id, Family.Geddir.id, Family.Oleger.id, Family.Marawin.id, Family.Eltaine.id, Family.Evermire.id]
            }
        ]
    },
    {
        id: 'Lindisfiall',
        name: 'Княжество Линдисфьялль',
        descr: 'Самое независимое от центра княжество',
        groupLevel: 2,
        includeTags: [Country.Valden.principals.Lindisfiall.id],
        subgroups: [
            {
                id: 'Bjorndalen',
                name: 'Князья Линдисфьялля [Дом Бьорндален]',
                groupLevel: 3,
                includeTags: [Family.Lindisfiall]
            },
            {
                id: 'LindisfiallOthers',
                name: 'Прочие',
                groupLevel: 3,
                includeTags: [],
                excludetags: [Family.Lindisfiall]
            }
        ]
    },
    {
        id: 'Danmore',
        name: 'Княжество Данмор',
        includeTags: [Country.Valden.principals.Danmore.id],
        groupLevel: 2,
        subgroups: [
            {
                id: 'Emer',
                name: 'Князья Данмора [Дом Эмер]',
                groupLevel: 3,
                includeTags: [Family.Emer.id]
            },
            {
                id: 'DanmoreOthers',
                name: 'Прочие',
                groupLevel: 3,
                includeTags: [],
                excludetags: [Family.Emer.id]
            }
        ]
    },
    {
        id: 'Gilford',
        name: 'Княжество Гилфор',
        groupLevel: 2,
        includeTags: [Country.Valden.principals.Gilfor.id]
    },
    {
        id: 'Kineil',
        name: 'Княжество Кинейл',
        groupLevel: 2,
        includeTags: [Country.Valden.principals.Kineil.id]
    },
    {
        id: 'Dunadd',
        name: 'Княжество Дунадд',
        groupLevel: 2,
        includeTags: [Country.Valden.principals.Dunadd.id]
    },
    {
        id: 'Marcia',
        name: 'Княжество Марсия',
        groupLevel: 2,
        includeTags: [Country.Valden.principals.Marcia.id]
    },
    {
        id: 'Aravel',
        name: 'АРАВЕЛЬ',
        groupLevel: 1,
        imageUrl: 'https://upforme.ru/uploads/001c/03/d9/3/384910.png',
        includeTags: [Country.Aravel.id],
        subgroups: [
            {
                id: 'Kairhill',
                name: 'Замок Кайрхилл',
                groupLevel: 3,
                descr: 'Некогда заброшенный замок, сейчас — резиденция правителя Аравеля и единственное место, где дозволено жить бездушникам',
                includeTags: [Family.Kairhill.id]
            },
            {
                id: 'Aire',
                name: 'Айре',
                groupLevel: 3,
                descr: 'Айре живут своими небольшими анклавами, отдельно от людей',
                includeTags: [Race.Aire.id]
            },
            {
                id: 'KairhillOthers',
                name: 'Местные жители',
                groupLevel: 3,
                includeTags: [],
                excludetags: [Family.Kairhill.id, Race.Aire.id]
            }
        ]
    },
    {
        id: 'Kaelim',
        name: 'КЕЙЛИМ',
        groupLevel: 1,
        imageUrl: 'https://upforme.ru/uploads/001c/03/d9/3/386484.png',
        includeTags: [Country.Kaelim.id]
    },
    {
        id: 'FiveRivers',
        name: 'ПЯТИРЕЧЬЕ',
        groupLevel: 1,
        imageUrl: 'https://upforme.ru/uploads/001c/03/d9/3/329096.png',
        includeTags: [Country.FiveRivers.id],
        subgroups: [
            {
                id: 'Aranvin',
                name: 'Аранвин',
                groupLevel: 3,
                includeTags: [Country.FiveRivers.principals.Aranvin.id]
            },
            {
                id: 'WhiteHarbor',
                name: 'Белая Гавань',
                groupLevel: 3,
                includeTags: [Country.FiveRivers.principals.WhiteHarbor.id]
            },
            {
                id: 'FiveRiversOther',
                name: 'Прочие',
                groupLevel: 3,
                includeTags: [],
                excludetags: [Country.FiveRivers.principals.Aranvin.id, Country.FiveRivers.principals.WhiteHarbor.id]
            }
        ]
    },
    {
        id: 'Rionna',
        name: 'РИОННА',
        imageUrl: 'https://upforme.ru/uploads/001c/03/d9/3/201164.png',
        includeTags: [Country.Rionna.id],
        groupLevel: 1,
        subgroups: [
            {
                id: 'Ilos',
                name: 'Илос',
                groupLevel: 2,
                includeTags: [Country.Rionna.principals.Ilos.id]
            },
            {
                id: 'Ilaria',
                name: 'Илария',
                groupLevel: 2,
                includeTags: [Country.Rionna.principals.Ilos.id]
            },
            {
                id: 'Tira',
                name: 'Тира',
                groupLevel: 2,
                includeTags: [Country.Rionna.principals.Tira.id]
            }
        ]
    },
    {
        id: 'Voyagers',
        name: 'СТРАННИКИ И ИСКАТЕЛИ ПРИКЛЮЧЕНИЙ',
        groupLevel: 1,
        imageUrl: 'https://upforme.ru/uploads/001c/03/d9/3/46837.png',
        includeTags: [Country.Voyager.id]
    }
];
let users = [];

const resultsContainer = document.querySelector('.resultsContainer');
const filters = {
    country: document.querySelector('.country.filter'),
    locationPrincipal: document.querySelector('.locationPrincipal.filter'),
    activity: document.querySelector('.activity.filter'),
    godDomain: document.querySelector('.godDomain.filter'),
    race: document.querySelector('.race.filter')
};
const dropdown = document.querySelector('.filterDropdown');

function updateFilters() {
    const selectedCountry = Object.values(Country).find(item => item.name === filters.country.textContent.trim());
    const selectedActivity = Object.values(Activity).find(item => item.name === filters.activity.textContent.trim());
    const selectedRace = Object.values(Race).find(item => item.name === filters.race.textContent.trim());

    const selectedCountryPrincipals = selectedCountry?.principals || {};
    const selectedActivityPrincipals = selectedActivity?.principals || {};

    const selectedCountryPrincipal = Object.values(selectedCountryPrincipals).find(item => item.name === filters.locationPrincipal.textContent.trim()) || null;
    const selectedActivityPrincipal = Object.values(selectedActivityPrincipals).find(item => item.name === filters.godDomain.textContent.trim()) || null;

    const filteredUsers = users.filter(user => {
        const matchesCountry = filters.country.textContent.trim() === 'Все' || user.tags.includes(selectedCountry?.id);
        const matchesActivity = filters.activity.textContent.trim() === 'Все' || user.tags.includes(selectedActivity?.id);
        const matchesRace = filters.race.textContent.trim() === 'Все' || user.tags.includes(selectedRace?.id);

        const matchesCountryPrincipal = filters.locationPrincipal.textContent.trim() === 'Все' || user.tags.includes(selectedCountryPrincipal?.id);
        const matchesActivityPrincipal = filters.godDomain.textContent.trim() === 'Все' || user.tags.includes(selectedActivityPrincipal?.id);

        return matchesCountry && matchesActivity && matchesRace && matchesCountryPrincipal && matchesActivityPrincipal;
    });

    filters.locationPrincipal.style.display = selectedCountryPrincipals.length === 0 || filters.country.textContent.trim() === 'Все' ? 'none' : 'block';
    filters.godDomain.style.display = selectedActivityPrincipals.length === 0 || filters.activity.textContent.trim() === 'Все' ? 'none' : 'block';

    displayResults(filteredUsers);
}
function matchesTags(userTags, includeTags, excludeTags) {
    if (includeTags.length > 0 && !includeTags.every(tag => userTags.includes(tag))) {
        return false;
    }
    if (excludeTags.length > 0 && excludeTags.some(tag => userTags.includes(tag))) {
        return false;
    }
    return true;
}
function propagateGroupTagsToSubgroups(group) {
    if (group.includeTags && group.subgroups) {
        group.subgroups = group.subgroups.map(subgroup => ({
            ...subgroup,
            includeTags: [...(subgroup.includeTags || []), ...group.includeTags]
        }));
    }
    return group;
}
function splitUsersByGroups(users, groups) {
    const result = groups.map(group => {
        const updatedGroup = propagateGroupTagsToSubgroups(group);
        if (updatedGroup.subgroups) {
            const subgroups = updatedGroup.subgroups.map(subgroup => {
                const subgroupUsers = users.filter(user => matchesTags(user.tags, subgroup.includeTags, subgroup.excludetags || []));
                return {
                    ...subgroup,
                    users: subgroupUsers
                };
            });
            return {
                ...updatedGroup,
                users: [],
                subgroups
            };
        } else {
            const groupUsers = users.filter(user => matchesTags(user.tags, updatedGroup.includeTags, updatedGroup.excludetags || []));
            return {
                ...updatedGroup,
                users: groupUsers,
                subgroups: undefined
            };
        }
    });
    return result;
}
function isGroupEmpty(group) {
    const hasUsersInGroup = group.users && group.users.length > 0;
    const hasUsersInSubgroups = group.subgroups && group.subgroups.some(subgroup => subgroup.users && subgroup.users.length > 0);
    return !hasUsersInGroup && !hasUsersInSubgroups;
}
function getGroupContent(group) {
    if (isGroupEmpty(group)) {
        return '';
    }
    let result = '';
    if (group.groupLevel == 1) {
        result += `<span class='groupSeparator'>••••••••••••</span>`;
    };
    result += `<span class='groupTitle${group.groupLevel}'>${group.name}</span>`;
    if (typeof group.descr !== "undefined") {
        result += `<span class='groupDescr'>${group.descr}</span>`;
    }
    if (typeof group.imageUrl !== "undefined") {
        result += `<img class='groupImg' src=${group.imageUrl}>`;
    }
    if (Array.isArray(group.users) && group.users.length > 0) {
        result += `<div class='groupContainer'>` +
            group.users.map(user => {
                const nameWithFlags = `${user.name}${user.isNpc ? ' <sup>(NPC)</sup>' : ''}${user.isQuery ? ' <sup>(заявка)</sup>' : ''}${user.isDied ? ' <sup>нет в живых</sup>' : ''}`;
                const displayName = user.url ? `<a href="${user.url}">${nameWithFlags}</a>` : nameWithFlags;
                return `<span class='user'><b>${user.isQuery ? '★ ' : ''}${displayName}</b> - ${user.descr}</span>`;
            }).join('') +
        `</div>`;
    }
    if (Array.isArray(group.subgroups) && group.subgroups.length > 0) {
        result += group.subgroups.map(subgroup => getGroupContent(subgroup)).join('');
    }
    return result;
}

function displayResults(users) {
    const groups = splitUsersByGroups(users, Groups);
    resultsContainer.innerHTML = groups.map(group => getGroupContent(group)).join('');
}

function addClicks() {
    const dropdownElems = document.querySelectorAll('.selectable');

    dropdownElems.forEach(elem => {
        elem.addEventListener('click', function(event) {
            const selectedId = event.target.classList[0];
            const category = event.target.classList[1];

            if (category === 'country') {
                filters.country.textContent = selectedId === 'all' ? 'Все' : Object.values(Country).find(item => item.id === selectedId).name;
            } else if (category === 'countryPrincipal') {
                filters.locationPrincipal.textContent = selectedId === 'all' ? 'Все' : Object.values(Object.values(Country).find(item => item.name === filters.country.textContent).principals).find(item => item.id === selectedId).name;
            } else if (category === 'activity') {
                filters.activity.textContent = selectedId === 'all' ? 'Все' : Object.values(Activity).find(item => item.id === selectedId).name;
            } else if (category === 'activityPrincipal') {
                filters.godDomain.textContent = selectedId === 'all' ? 'Все' : Object.values(Activity.find(item => item.name === filters.activity.textContent).principals).find(item => item.id === selectedId).name;
            } else if (category === 'race') {
                filters.race.textContent = selectedId === 'all' ? 'Все' : Object.values(Race).find(item => item.id === selectedId).name;
            }

            dropdown.style.display = 'none';
            updateFilters();
        });
    });
}

filters.country.addEventListener('click', function(event) {
    dropdown.innerHTML = `<div class="all country selectable">Все</div>` + Object.values(Country).map(country =>
        `<div class="${country.id} country selectable">${country.name}</div>`
    ).join('');
    dropdown.style.display = 'inline-block';
    addClicks();
});

filters.locationPrincipal.addEventListener('click', function(event) {
    const selectedCountry = Object.values(Country).find(item => item.name === filters.country.textContent);

    dropdown.innerHTML = `<div class="all countryPrincipal selectable">Все</div>` + Object.values(selectedCountry.principals).map(principal =>
        `<div class="${principal.id} countryPrincipal selectable">${principal.name}</div>`
    ).join('');
    dropdown.style.display = 'inline-block';
    addClicks();
});

filters.activity.addEventListener('click', function(event) {
    dropdown.innerHTML = `<div class="all activity selectable">Все</div>` + Object.values(Activity).map(activity =>
        `<div class="${activity.id} activity selectable">${activity.name}</div>`
    ).join('');
    dropdown.style.display = 'inline-block';
    addClicks();
});

filters.godDomain.addEventListener('click', function(event) {
    const selectedActivity = Object.values(Activity).find(item => item.name === filters.activity.textContent);

    dropdown.innerHTML = `<div class="all activityPrincipal selectable">Все</div>` + Object.values(selectedActivity.principals).map(activityPrincipal =>
        `<div class="${activityPrincipal.id} activityPrincipal selectable">${activityPrincipal.name}</div>`
    ).join('');
    dropdown.style.display = 'inline-block';
    addClicks();
});

filters.race.addEventListener('click', function(event) {
    dropdown.innerHTML = `<div class="all race selectable">Все</div>` + Object.values(Race).map(race =>
        `<div class="${race.id} race selectable">${race.name}</div>`
    ).join('');
    dropdown.style.display = 'inline-block';
    addClicks();
});

document.querySelectorAll('.filter').forEach(filter => {
    filter.addEventListener('mouseenter', function(event) {
        const filterRect = filter.getBoundingClientRect();

        dropdown.style.left = `${filterRect.left}px`;
        dropdown.style.top = `${filterRect.bottom + window.scrollY - 27}px`;
    });
});

dropdown.addEventListener('mouseleave', function(event) {
    dropdown.style.display = 'none';
});

window.addEventListener("message", (event) => {
    resultsContainer.innerHTML =  resultsContainer.innerHTML + "<br>event received " + event.origin;
    //if (!event.origin.match(/azzttest\.rusff\.me$/)) return;
    resultsContainer.innerHTML = resultsContainer.innerHTML + "<br>origin passed " + event.data;

    if (event.data.eventName != 'userList') return;
    resultsContainer.innerHTML = resultsContainer.innerHTML + "<br>passed" + event.data;
    users = event.data.users;
    updateFilters();
  });
</script>

<div>
    <div class="filters">
        <h3 class="rolesHeading">Фильтры</h3>
        <div class="location filterCategory">
            <span>Локация:</span>
            <div class="country filter">Все</div>
            <div class="locationPrincipal filter" style="display: none">Все</div>
        </div>

        <div class="activities filterCategory">
            <span>Род деятельности:</span>
            <div class="activity filter">Все</div>
            <div class="godDomain filter" style="display: none">Все</div>
        </div>

        <div class="races filterCategory">
            <span>Раса:</span>
            <div class="race filter">Все</div>
        </div>
    </div>

    <div class="filterDropdown" style="display: none"></div>

    <div class="results">
        <div class="resultsContainer"></div>
    </div>
</div>

<style>
    .rolesHeading {
        margin: 8px 0px 4px 0px;
        font-weight: bold !important;
        font-size: 1.2em !important;
    }
   
    .filters {
        border-radius: 4px;
        border: 1px solid var(--pinkBorder);
        background: var(--lightBG);
        padding: 0px 10px 10px 10px;
    }
   
    .results { margin-bottom: 100px; }
    .filters { margin-bottom: 10px; }
   
    .filters .filterCategory {
        display: flex;
        gap: 4px;
        margin-bottom: 4px;
        align-items: anchor-center;
    }
   
    .filters .filter {
        border-radius: 16px;
        border: 1px solid var(--pinkBorder);
        background: var(--lightBG);
        padding: 4px 8px;
        transition: ease-in-out 0.1s background, ease-in-out 0.1s color;
    }
   
    .filters .filter:hover {
        background: var(--pinkBorder);
        color: #fff;
    }
   
    .filterDropdown {
        border-radius: 4px;
        border: 1px solid var(--pinkBorder);
        background: var(--lightBG);
        padding: 10px 0px;
        position: fixed;
    }
   
    .selectable { padding: 3px 10px; }
    .selectable:hover {
        background: var(--pinkBorder);
        color: #fff;
    }
   
    .resultsContainer span.user {
        margin-bottom: 1px;
        line-height: 150% !important;
        color: #333333;
        font: normal 14px Roboto, verdana, arial, helvetica, sans-serif;
    }
    span.groupSeparator { font-size: 15px; }
   
    span.groupSeparator, span.groupTitle1, span.groupTitle2, span.groupTitle3, span.groupDescr { text-align: center; }
    .resultsContainer span, .resultsContainer img { display: block; }
   
    span.groupTitle1, span.groupTitle2, span.groupTitle3 {
        font-family: Palatino Linotype;
        font-weight: 700;
    }
   
    span.groupTitle1 { font-size: 20px; margin-top: 60px; }
    span.groupTitle2 { font-size: 18px; margin-top: 30px; }
    span.groupTitle3 { font-size: 14px; margin-top: 20px; }
   
    span.groupDescr {
        font-size: 11px;
        font-style: italic;
    }
   
    img.groupImg {
        margin-left: auto;
        margin-right: auto;
    }
   
    .groupContainer {
        margin: 10px 0 !important;
        padding: 14px 14px 12px 14px !important;
        border: 1px solid var(--pinkBorder);
        background: var(--qBG);
        border-radius: 4px;
    }
   
    span.groupSeparator:first-of-type { display: none; }
.selectable, .filter {
cursor: pointer;
}
</style>
[/html]