/* ============================================================================ */
/* ============================================================================ */
/* Variables */
/* ============================================================================ */
/* ============================================================================ */

:root {
    --col-grey-light: #EFEFEF;
    --col-grey: #E3E5E4;
    --col-grey-medium: #646363;
    --col-grey-dark: #646363;
    
    --col-green-light-super: #cbe1d9;
    --col-green-light: #66a491;
    --col-green: #006847;      /* Taken from https://www.oesterreichwein.at */
    --col-green-dark: #003524; /* Taken from https://www.oesterreichwein.at */

    --col-red: #6e2349;
    --col-red-dark: #46162e;

    --col-red-error: #a94442;  /* Taken from invalid form inputs at https://www.oesterreichwein.at */

    /* Size */
    --app-header-height: 60px;
    --dropdown-inner-width: 90%;
    --button-size: 28px;

    /* Spacing */
    --app-header-padding-sides: 15px;
    --app-dropdown-margin-top: 2px;
    --app-content-group-summary-padding-top: 8px;
    
    --app-shadow: 0 0 10px rgba(0, 0, 0, 0.25);
    --app-transition: 0.35s ease;

    --row-height-hierarchy: 45px;
    --row-height-area: 35px;

    /* Map (CAUTION: THES VARIABLES ARE NOT USED INSIDE MVC !!!) */
    --map-edge-spacing: 10px;
    --map-ctr-size: 28px;

    /* Result table: Column width */
    --col-width-hierarchy: 35%;
    --col-width-ha: 52px;
    --col-width-per: 52px;
    --col-width-arrow: 52px; /* width must be 52px to align with the edge spacing! */
    --col-width-more: 52px;
    --col-width-map: 52px;

    /* Result table: Row spacing */
    --col-padding-vertical: 4px;
    --col-padding-horizontal: 9px;
}

@media (min-width: 850px) {

    :root {
        --col-width-hierarchy: 50%;
        --col-padding-vertical: 14px;
    }
}

@media (min-width: 950px) {

    :root {
        --col-width-more: 228px;
        --col-width-map: 235px;
    }
}

.hidden {
    display: none !important;
}

/* ============================================================================ */
/* ============================================================================ */
/* Clear or overwrite default styling of tags */
/* ============================================================================ */
/* ============================================================================ */

/* <button> */
.rk-button {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background: none;
    box-shadow: none;
    outline: 0;
    border: 0;
    cursor: pointer;

    transition: color var(--app-transition);

    pointer-events: all;
}

.rk-button * {
    /* Ensure, that only the button itself is an event trigger */
    pointer-events: none;
}

/* <a> */
.rk-link {
    cursor: pointer;
}

/* <dialog> */
.rk-dialog {
    border: 0;
    z-index: 500;
}

/* DETAILS */

/* <summary> */
.rk-summary {
    display: block; /* this removes the ::marker icon, as it is a list-item by default */
    cursor: pointer;
}

/* marker icon of <summary> */
.rk-summary::marker {
    display: none;
}

/* DETAILS TOGGLE ICON */

.rk-summary-toggle {
    pointer-events: none;
}

/* Icon when CLOSED */
.rk-summary-toggle * {
    color: var(--col-green);
    transform: rotateZ(-270deg);

    transition: var(--app-transition);
}

/* Icon ON HOVER */
.rk-summary-toggle:hover * {
    color: var(--col-green-dark);
}

/* Icon when OPEN */
[open=""] > summary > .rk-summary-toggle *,
[open="open"] > summary > .rk-summary-toggle * {
    transform: rotateZ(-90deg);
}

/* FORM ELEMENTS */

/* <input type="text"> */
.rk-input-text {
    outline: 0;
}

/* <select> */
.rk-select {
    max-width: 100%;
    cursor: pointer;
}

/* ============================================================================ */
/* ============================================================================ */
/* Form inputs */
/* ============================================================================ */
/* ============================================================================ */

.rk-input-text {
    background-color: #FFFFFF;
    border-radius: 0;
    border: 0;
    border-bottom: 2px solid var(--col-green);
    color: var(--col-grey-medium);
}

.rk-select {
    background-color: transparent;
    border: 2px solid var(--col-green);
    font-size: inherit;
    color: var(--col-grey-medium);

    /* Size */
    width: 100%;
    height: var(--button-size);
    padding: 0 5px;
    flex-grow: 1;

    transition: border-color var(--app-transition);
}

.rk-select:hover {
    border-color: var(--col-green-dark);
}

.deactivated .rk-select {
    border-color: var(--col-green-light);
}

.deactivated .rk-select:hover {
    border-color: var(--col-green);
}

/* ============================================================================ */
/* ============================================================================ */
/* Buttons */
/* ============================================================================ */
/* ============================================================================ */

/* All .outline and .fill buttons */
.rk-button:is(.outline, .fill) {
    /* Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* OUTLINED */

.rk-button.outline {
    border: 2px solid currentColor;
}

/* OUTLINED + GREEN */

.rk-button.outline.green {
    border-color: var(--col-green);
}

.rk-button.outline.green:hover {
    border-color: var(--col-green-dark);
}

/* OUTLINED + RED */

.rk-button.outline.red {
    border-color: var(--col-red);
    color: var(--col-red);
}

.rk-button.outline.red:hover {
    border-color: var(--col-red-dark);
    color: var(--col-red-dark);
}

/* FILLED */

.rk-button.fill {
    background-color: currentColor;
    color: #FFFFFF;
}

/* FILLED + GREEN */

.rk-button.fill.green {
    background-color: var(--col-green);
}

.rk-button.fill.green:hover {
    background-color: var(--col-green-dark);
}

/* DEACTIVATED */

.deactivated.rk-button.fill.green {
    background-color: var(--col-green-light);
}

.deactivated.rk-button.fill.green:hover {
    background-color: var(--col-green-light);
}

/* FILLED + RED */

.rk-button.fill.red {
    background-color: var(--col-red);
}

.rk-button.fill.red:hover {
    background-color: var(--col-red-dark);
}

/* LINK BUTTONS */

.rk-button.link {
    font-style: italic;

    /* Size */
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}

.rk-button.link.green {
    color: var(--col-green);
}

.rk-button.link.green:hover {
    color: var(--col-green-light);
}

.rk-button.link.grey {
    color: var(--col-grey-dark);
}

.rk-button.link.grey:hover {
    color: var(--col-grey-medium);
}

/* ============================================================================ */
/* ============================================================================ */
/* Page */
/* ============================================================================ */
/* ============================================================================ */

html,
body,
header,
header *,
dialog,
dialog * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;

    /* Default font styling */
    font-weight: 400;
    color: var(--col-grey-dark);
    text-align: left;
    font-family: Merriweather, Times, serif;
    font-size: 14px;
}

body {
    /* Size */
    width: 100%;
    height: 100%;
    max-height: 100%;
    overflow: hidden;

    /* Flexbox */
    display: flex;
    flex-direction: column;
}

/* ============================================================================ */
/* ============================================================================ */
/* App Header */
/* ============================================================================ */
/* ============================================================================ */

/* HEADER */

.rk-header {
    /*dev banner: #94c2ea  */
    background-color: #ffffff; 
    /* background-color: #ead294;*/
    box-shadow: var(--app-shadow);

    /* Size */
	height: var(--app-header-height);
	width: 100%;

    /* Flexbox */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    z-index: 600; /* move on top so the shadow is visible */
}

    /* MOBILE MENU TOGGLE */

    [data-name="nav-menu"] {
        /* Size */
        height: 100%;
        padding: 0 var(--app-header-padding-sides);

        transition: color var(--app-transition);
    }

    [data-name="nav-menu"]:hover {
        color: var(--col-green);
    }

    @media (min-width: 850px) {

        [data-name="nav-menu"] {
            display: none;
        }
    }

    /* LOGOS */

    .rk-logo-wrap {
        /* Size */
        height: 100%;

        /* Flexbox */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        padding-top: 9px; /* visual adjustment */
    }

    @media (min-width: 850px) {

        .rk-logo-wrap {
            /* Spacing */
            margin-left: var(--app-header-padding-sides);
        }
    }

        /* <a> wrapping the images */
        .rk-logo-wrap .rk-link {
            max-width: 100%;
        }

            /* Logo + Logo slogan */
            .rk-logo-img,
            .rk-logo-slogan-img {
                /* Size */
                max-width: 100%;
                height: 21px;

                /* Hover animation */
                transition: transform var(--app-transition);
            }

            /* Logo + Logo slogan ON HOVER */
            .rk-logo-img:hover,
            .rk-logo-slogan-img:hover {
                /* Hover animation */
                transform: scale(1.05);
            }

    /* NAVIGATION */

    .rk-header-nav {
        /* Size */
        height: 100%;

        /* Flexbox */
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
    }

        @media (min-width: 850px) {

            .rk-header-nav > .rk-nav-label {
                /* Size */
                height: 100%;

                /* Spacing */
                padding: 0 var(--app-header-padding-sides);
            } 
        }

            @media (min-width: 850px) {

                /* Small arrow which is only visible on desktop when the dropdown is open */
                .rk-nav-open-arrow {
                    color: var(--col-green);
                    transform: rotateZ(90deg);
                    visibility: hidden;

                    /* Position */
                    position: absolute;
                    bottom: 0;
                    right: calc(50% - var(--app-header-padding-sides) / 2);
                }

                .rk-header-nav > .rk-nav-label.open .rk-nav-open-arrow {
                    visibility: visible;
                }
            }

            /* SEARCH */

                [data-name="nav-search"] {
                    /* Size */
                    height: 100%;
                    padding: 0 var(--app-header-padding-sides);

                    transition:
                        color var(--app-transition),
                        background-color var(--app-transition);
                }

                /* When active search & filter results */
                [data-name="nav-search"][data-active-results="true"] {
                    background-color: var(--col-green);
                }

                /* When active search & filter results */
                [data-name="nav-search"][data-active-results="true"],
                [data-name="nav-search"][data-active-results="true"] * {
                    color: #ffffff !important;
                }

                /* Label + Arrow */
                [data-name="nav-search"] span,
                [data-name="nav-search"] .rk-nav-open-arrow {
                    display: none;
                }

                @media (min-width: 850px) {

                    [data-name="nav-search"] span,
                    [data-name="nav-search"] .rk-nav-open-arrow {
                        display: inline;
                    }
                }

/* ============================================================================ */
/* ============================================================================ */
/* Dropdowns */
/* ============================================================================ */
/* ============================================================================ */

/* DROPDOWN (<dialog>) */

.rk-dropdown {
    /* Position */
    top: var(--app-header-height);

    /* Size */
    width: 100%;
    max-height: calc(100% - var(--app-header-height));

    /* Scroll */
    overflow-y: scroll;
    overflow-x: hidden;
}

@media (min-width: 850px) {

    .rk-dropdown {
        /* Position */
        margin: var(--app-dropdown-margin-top) auto 0 auto;

        /* Size */
        width: 90%;
        max-height: calc(90% - var(--app-header-height) - var(--app-dropdown-margin-top));
    }
}

    /* DROPDOWN CLOSE BUTTON */

    .rk-dropdown-close {
        color: var(--col-green);

        /* Hide on mobile */
        display: none;

        /* Position */
        position: fixed;
        top: calc( var(--app-header-height) + var(--app-dropdown-margin-top) ); /* 60px + 2px */
        right: calc( (100% - var(--dropdown-inner-width)) / 2 ); /* (100% - 90%) / 2 */

        /* Size */
        padding: 10px 10px 0 0;

        transition: var(--app-transition);
    }

    .rk-dropdown-close:hover {
        color: var(--col-green-dark); 
    }

    @media (min-width: 850px) {

        .rk-dropdown-close {
            display: block;
        }
    }

    /* DROPDOWN INNER */

    .rk-dropdown-inner {
        background-color: var(--col-grey);
        box-shadow: var(--app-shadow);

        /* Spacing */
        padding: 10px 0;

        /* Flexbox */
        display: flex;
        flex-direction: column;

        /* Position to ensure being on top of the background */
        position: relative;
        z-index: 1;
    }

    /* Only the search dropdown if results accordion is open. */
    .rk-dropdown-inner:has([data-name="dropdown-accordion-results"][open]) {
        padding-bottom: 0;
    }

    @media (min-width: 850px) {

        /* .rk-dropdown-inner inside the menu dropdown only */
        .rk-dropdown-inner {
            padding: 40px 20px;
        }
    }

        /* All immediate child elements */
        .rk-dropdown-inner > * {
            padding-left: 20px;
            padding-right: 20px;
        }

    /* DROPDOWN BACKGROUND */

    .rk-dropdown-bg {
        filter: brightness(0.5);
    }
     
/* ============================================================================ */
/* ============================================================================ */
/* Dropdown Accordions */
/* ============================================================================ */
/* ============================================================================ */

.rk-dropdown-accordion {
    transition: background-color var(--app-transition);
}

.rk-dropdown-accordion[open]:not(:last-child) {
    margin-bottom: 50px; /* push elements after open dropdown accordion slightly down */
}

    .rk-dropdown-accordion > summary {
        /* Size */
        width: 100%;

        /* Flexbox */
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 5px;
    }

    @media (min-width: 850px) {

        .rk-dropdown-accordion > summary {
            display: none;
        }
    }

        /* Arrow icon CLOSED */
        .rk-dropdown-accordion .rk-nav-label .material-icons {
            transition: var(--app-transition);
        }

        /* Arrow icon OPEN */
        .rk-dropdown-accordion:open .rk-nav-label .material-icons {
            transform: rotateZ(90deg);
        }

        /* DROPDOWN ACCORDION INNER */

        .rk-dropdown-accordion-inner {
            /* Flexbox */
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            gap: 20px;
        }

        /* Accordion inner of wine-growing regions & infos on large screens */

        @media (min-width: 850px) {

            [data-name="dropdown-regions"] .rk-dropdown-inner,
            [data-name="dropdown-infos"] .rk-dropdown-inner {
                padding-bottom: 20px;
            }

            [data-name="dropdown-regions"] .rk-dropdown-accordion-inner,
            [data-name="dropdown-infos"] .rk-dropdown-accordion-inner {
                display: block; /* needed for float to work */
                padding-right: 0;
            }

            [data-name="dropdown-regions"] .rk-dropdown-accordion-inner .rk-group-nav,
            [data-name="dropdown-infos"] .rk-dropdown-accordion-inner .rk-group-nav {
                /* Size */
                width: calc(50% - 20px);;

                /* Position */
                float: left;

                /* Spacing */
                margin-right: 20px;
                margin-bottom: 20px;
            }

            [data-name="dropdown-regions"] .rk-dropdown-accordion-inner .rk-group-nav:last-child {
                /* Position */
                float: right;
            }
        }

        @media (min-width: 1100px) {

            [data-name="dropdown-regions"] .rk-dropdown-accordion-inner .rk-group-nav,
            [data-name="dropdown-infos"] .rk-dropdown-accordion-inner .rk-group-nav {
                /* Size */
                width: calc(100% / 3 - 20px);
            }
        }

/* ============================================================================ */
/* ============================================================================ */
/* Navigation Groups */
/* ============================================================================ */
/* ============================================================================ */

.rk-group-nav {
    background-color: #ffffff;

    /* Spacing */
    padding: 3px 10px;

    /* Flexbox */
    display: flex;
    flex-direction: column;
}

@media (min-width: 850px) {

    .rk-group-nav {
        /* Spacing */
        padding: 2px 14px;
    }
}

/* ============================================================================ */
/* ============================================================================ */
/* Content Groups */
/* ============================================================================ */
/* ============================================================================ */

.rk-group-content {
    background-color: #ffffff;

    /* Spacing */
    padding: 10px;

    /* Flexbox */
    display: flex;
    flex-direction: column;
}

/* DEACTIVATED */
.rk-group-content.deactivated {
    background-color: transparent;
}

/* CONTENT GROUPS THAT ARE COLLAPSABLE ======================================== */

.rk-group-content:has(> summary) {
    background-color: transparent;

    /* Size */
    min-height: -moz-fit-content;
    min-height: -webkit-fit-content;
    min-height: fit-content;

    /* Spacing is removed from here as it will be applied in .rk-group-inner
       due to the summary needing to reach the group edge. */
    padding: 0;
}

/* When OPEN + DEACTIVATED */
.rk-group-content:has(> summary).deactivated[open] {
    background-color: transparent;
}

/* When OPEN */
.rk-group-content:has(> summary)[open] {
    background-color: #ffffff;
}

    /* SUMMARY */

    .rk-group-content > summary {
        background-color: #ffffff;

        /* Flexbox */
        display: flex;
        justify-content: space-between; /* pushes toggle to the right */
        align-items: center;
    }

    .rk-group-content.deactivated > summary {
        background-color: transparent;
    }

        /* GROUP TITLE */

        .rk-group-content .rk-group-title {
            border: 2px solid #FFFFFF;
            border-right: 0;

            /* Font */
            text-transform: uppercase;
            font-weight: 700;

            /* Size */
            height: 34px;
            flex-grow: 1;

            /* Spacing */
            padding-left: 10px;

            /* Flexbox */
            display: flex;
            align-items: center;
        }

        /* Group title when DEACTIVATED + OPEN */
        .rk-group-content.deactivated[open] .rk-group-title {
            border-bottom: 2px solid transparent;
        }

        /* COLLAPSE TOGGLE */

        .rk-group-content .rk-summary-toggle {
            border: 2px solid #FFFFFF;
            border-left: 2px solid var(--col-grey);

            /* Size */
            width: 34px;
            height: 34px;

            /* Flexbox */
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Group collapse button DEACTIVATED */
        .rk-group-content.deactivated .rk-summary-toggle {
            border-left: 2px solid #FFFFFF;
        }

        /* Group collapse button DEACTIVATED + OPEN */
        .rk-group-content.deactivated[open] .rk-summary-toggle {
            border-left: 2px solid #FFFFFF;
            border-bottom: 2px solid #FFFFFF;
        }

        /* Group collapse button OPEN */
        .rk-group-content[open] .rk-summary-toggle {
            border-bottom: 2px solid var(--col-grey);
        }

    /* GROUP INNER */

    .rk-group-content:has(> summary) .rk-group-inner {
        /* Spacing */
        padding: 10px;

        /* Flexbox */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 10px;
    }

    /* When DEACTIVATED + OPEN */
    .rk-group-content:has(> summary).deactivated[open] .rk-group-inner {
        border: 2px solid #FFFFFF;
        border-top: 0;
    }

/* ============================================================================ */
/* ============================================================================ */
/* Navigation Labels */
/* ============================================================================ */
/* ============================================================================ */

/* GENERALLY ALL NAVIGATION ENTRIES */

/* This class is used for consistent styling of navigation entries as well as 
   dropdown accordion labels. There is no layout styling attached to them and they 
   are used for several different element types. */

.rk-nav-label {
    /* Size */
    width: -moz-fit-content;
    width: -webkit-fit-content;
    width: fit-content;
    height: 40px;

    /* Flexbox */
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px; /* e.g. between label and icon */

    transition: color var(--app-transition);
}

.rk-nav-label[data-name="nav-language"] * {
    pointer-events: none;
}

.rk-nav-label.open,
.rk-nav-label.open * {
    color: var(--col-green);
}

.rk-nav-label,
.rk-nav-label *:not(i) {
    /* Font */
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 700;
    color: var(--col-grey-dark);
    text-decoration: none;

    transition: color var(--app-transition);
}

.rk-nav-label:hover * {
    color: var(--col-green);
}

/* INSIDE SUMMARY */

.rk-summary:has(.rk-nav-label) * {
    pointer-events: none;
}

.rk-summary:has(.rk-nav-label):hover * {
    color: var(--col-green);
}

.rk-dropdown-accordion > summary > i {
    transition: var(--app-transition);
}

.rk-dropdown-accordion[open] > summary > i {
    transform: rotateZ(90deg);
}

/* NAVIGATION LIST (e.g. for wine-growing regions) */

.rk-nav-list {
    /* List */
    list-style-type: none;

    /* Flexbox */
    display: flex;
    flex-direction: column;
}

/* Navigation lists right after a navigation title (e.g. Niederösterreich, Burgenland) */
.rk-nav-group-title ~ .rk-nav-list {
    margin-left: 40px; /* left indent */
}

/* INSIDE HEADER NAVIGATION */

.rk-header-nav .rk-nav-label {
    position: relative; /* necessary for positioning the arrow when open */

    /* Size */
    height: 100%;
}

    .rk-header-nav > .rk-nav-label * {
        pointer-events: none;
    }

/* ============================================================================ */
/* ============================================================================ */
/* App Map */
/* ============================================================================ */
/* ============================================================================ */

/* MAIN */

.rk-map-wrap {
    background: var(--col-grey);

    /* Size */
    width: 100%;
    height: calc(100% - var(--app-header-height));

    /* Position */
    margin-top: var(--app-header-height);
}

    /* SEARCH & FILTER BADGES */

    /* Badge wrap */

    .rk-badge-wrap {
        /* background-color: rgba(0, 0, 0, 0.35); */

        /* Size */
        max-width: calc(100% - var(--map-ctr-size) - var(--map-edge-spacing) * 3 );

        /* Position */
        position: absolute;
        top: var(--map-edge-spacing);
        right: calc(var(--map-edge-spacing) + var(--map-ctr-size) + var(--map-edge-spacing));
        z-index: 410;

        /* Flexbox */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-end;
        align-items: center;
        gap: var(--map-edge-spacing);
    }

        /* Badges */

        .rk-badge {
            /* Size */
            max-width: 100%;
            min-height: var(--map-ctr-size);

            /* Flexbox */
            display: none;
            flex-direction: row;
            flex-wrap: wrap;
            align-items: center;
            justify-content: flex-end;
        }

        .rk-badge,
        .rk-badge *:not(.material-icons) {
            /* Font */
            color: #ffffff;
            font-family: inherit;
            font-size: 14px;
        }

        [data-badge-active="false"] {
            display: none;
        }

        [data-badge-active="true"] {
            display: flex;
        }

            .rk-badge > * {
                border-right: 1px solid #ffffff52;
                border-bottom: 1px solid #ffffff52;
            }

            .rk-badge.green > * {
                background: var(--col-green);
            }

            .rk-badge.red > * {
                background: var(--col-red);
            }

            /* Badge label */

            .rk-badge-label {
                /* Size */
                box-sizing: border-box;
                min-height: var(--button-size);
                height: -webkit-fit-content;
                height: -moz-fit-content;
                height: fit-content;

                /* Spacing */
                padding: 5px 8px 3px 8px;
            }

            .rk-badge-label:empty {
                display: none;
            }

            /* Badge close button */

            .rk-badge-btn {
                /* Font */
                color: #ffffff;

                /* Size */
                min-height: var(--button-size);
                height: var(--button-size);

                transition: background var(--app-transition);
            }

            .rk-badge.green .rk-badge-btn:hover {
                background: var(--col-green-dark);
            }

            .rk-badge.red .rk-badge-btn:hover {
                background: var(--col-red-dark);
            }

            /* BADGE ELEMENTS FOR "CURRENT DEPICTION BADGE" */

            /* Hierarchy */
            [data-name="badge-clear-current"] [data-name="label-hierarchy"] {

            }

            /* Keyword */
            [data-name="badge-clear-current"] [data-name="label-keyword"] {

            }

            /* Primary filter */
            [data-name="badge-clear-current"] [data-name="label-primary"] {

            }

            /* Secondary filter */
            [data-name="badge-clear-current"] [data-name="label-secondary"] {

            }

            /* Count */
            [data-name="badge-clear-current"] [data-name="label-count"] {

            }

    /* EU LOGO */

    .rk-eu-logo {
        /* Position */
        position: fixed; /* keep it at the bottom edge on new iPads */
        bottom: 0;
        left: 0;

        /* Size */
        width: 230px; /* default size if there is enough space */

        display: flex;
        opacity: 0.85;

        z-index: 410;
    }

        .rk-eu-logo img {
            width: 100%;
            height: uto;
        }

/* ============================================================================ */
/* ============================================================================ */
/* Dropdown: Search & Filters
/* ============================================================================ */
/* ============================================================================ */

.rk-dropdown[data-name="dropdown-search"] {
    scroll-behavior: smooth;
}

/* DROPDOWN INNER */

.rk-dropdown[data-name="dropdown-search"] .rk-dropdown-inner {
    padding-left: 0;
    padding-right: 0;

    position: relative;
}

    /* FLOATING BUTTON SCROLL TO TOP */

    .rk-scroll-to-top {
        background-color: var(--col-green);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.25);

        /* Size */
        width: var(--col-width-arrow);
        height: var(--col-width-arrow);

        /* Position */
        position: sticky;
        bottom: 0;
        margin-left: auto;
        transform: translateX(-53px) translateY(-25px);
        z-index: 9999;

        /* Flexbox */
        display: flex;
        justify-content: center;
        align-items: center;

        /* Spacing */
        padding: 0;

        scroll-behavior: smooth;
        transition: background-color var(--app-transition);
    }

    .rk-scroll-to-top:hover {
        background-color: var(--col-green-dark);
    }

    .rk-scroll-to-top,
    .rk-scroll-to-top * {
        color: #ffffff;
    }

        .rk-scroll-to-top i {
            padding: 0;

            /* Size */
            width: 24px;
            height: 24px;
        }

/* DROPDOWN ACCORDION INNER */

@media (min-width: 850px) {

    .rk-dropdown-accordion[data-name="dropdown-accordion-filters"] {
        padding-left: 40px;
        padding-right: 40px;
    }

    .rk-dropdown-accordion[data-name="dropdown-accordion-filters"]:not(:last-child) {
        margin-bottom: 40px;
    }

    /* Flex wrap for content groups inside filter options accordion */
    .rk-dropdown-accordion[data-name="dropdown-accordion-filters"] .rk-dropdown-accordion-inner {
        /* Flexbox */
        flex-direction: row;
        flex-wrap: wrap;
    }

    /* Collapsable groups */
    .rk-group-content:has(> summary) {
        /* Size */
        width: calc(100% / 3 - 48px);
        flex-grow: 1;
    }
}

/* TEXT SEARCH GROUP */

.rk-group-content[data-name="text-search-group"] {
    border: 2px solid #ffffff;

    /* Size */
    width: 100%;

    /* Flexbox */
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 5px;
    -moz-column-gap: 10px;
         column-gap: 10px;
}

@media (min-width: 850px) {

    .rk-group-content[data-name="text-search-group"] {
        width: 100%; /* strech text search over whole dropdown width */
    }
}

    /* Text input */
    .rk-group-content[data-name="text-search-group"] .rk-input-text {
        background: none;

        /* Size */
        max-width: calc(100% - 10px - var(--button-size));
        height: var(--button-size);
        flex-grow: 1;

        /* Spacing */
        padding: 3px 10px 3px 10px;

        transition: border-color;
    }

    /* Text input ON HOVER */
    .rk-group-content[data-name="text-search-group"] .rk-input-text:hover {
        border-color: var(--col-green-dark);
    }

    /* Text input INVALID */
    .rk-group-content[data-name="text-search-group"] .rk-input-text.invalid {
        border-color: var(--col-red-error);
    }

    /* Text input DEACTIVATED */
    .rk-group-content[data-name="text-search-group"].deactivated .rk-input-text {
        border-color: var(--col-green-light);
    }

    /* Text input DEACTIVATED + HOVER */
    .rk-group-content[data-name="text-search-group"].deactivated .rk-input-text:hover {
        border-color: var(--col-green);
    }

    /* Search trigger button */
    .rk-group-content[data-name="text-search-group"] .rk-button {
        /* Size */
        height: var(--button-size);
        min-width: var(--button-size);
        width: var(--button-size);
    }

/* FILTER GROUPS */

/* Color red wines options red */
.rk-dropdown-accordion[data-name="dropdown-accordion-filters"] [data-grape-color="R"] {
    color: var(--col-red);
}

/* Color red wines options red ON HOVER */
.rk-dropdown-accordion[data-name="dropdown-accordion-filters"] [data-grape-color="R"]:hover {
    color: var(--col-red-dark);
}

/* Color white wines options green */
.rk-dropdown-accordion[data-name="dropdown-accordion-filters"] [data-grape-color="W"] {
    color: var(--col-green);
}

/* Color white wines options green ON HOVER */
.rk-dropdown-accordion[data-name="dropdown-accordion-filters"] [data-grape-color="W"]:hover {
    color: var(--col-green-dark);
}

/* Second child inside .rk-group-inner = dropdown select for filter amounts */
.rk-dropdown-accordion[data-name="dropdown-accordion-filters"] .rk-group-inner > :nth-child(2) {
    width: 80%; /* to be in one row with the search button */
}

/* Filter trigger buttons */
.rk-dropdown-accordion[data-name="dropdown-accordion-filters"] .rk-group-inner button {
    /* Size */
    height: var(--button-size);
    min-width: var(--button-size);
    width: var(--button-size);
}

/* NOTICES */

.rk-keyword-too-short-notice {
    /* Font */
    color: var(--col-red-error);
    font-size: 12px;
    font-style: italic;

    /* Size */
    min-width: 100%;
}

/* ============================================================================ */
/* ============================================================================ */
/* Search & filter results */
/* ============================================================================ */
/* ============================================================================ */

/* DROPDOWN ACCORDION RESULTS */

.rk-dropdown-accordion[data-name="dropdown-accordion-results"]:has(.rk-dropdown-accordion-inner[data-result-status="none"]) {
    display: none;
}

.rk-dropdown-accordion[data-name="dropdown-accordion-results"][open] {
    background-color: #ffffff;
    padding: 0 0 20px 0;
}

    .rk-dropdown-accordion[data-name="dropdown-accordion-results"][open] > summary {
        margin-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
    }

@media (min-width: 850px) {

    .rk-dropdown-accordion[data-name="dropdown-accordion-results"][open] {
        padding-top: 20px;
    }
}

.rk-dropdown-accordion[data-name="dropdown-accordion-results"] > .rk-dropdown-accordion-inner {
    gap: 10px;
}

@media (min-width: 850px) {

    .rk-dropdown-accordion[data-name="dropdown-accordion-results"] > .rk-dropdown-accordion-inner {
        gap: 20px;
    }
}

/* NO RESULT NOTICE */

.rk-no-results-wrap {
    /* Spacing */
    margin: 10px 20px 0 20px;

    /* Flexbox */
    display: flex;
    align-items: center;
    gap: 10px;
}

.rk-no-results-wrap > * {
    /* Size */
    /* width: ; */
}

    .rk-no-results-wrap .rk-no-results-notice {
        /* Font */
        font-weight: bold;
        text-transform: uppercase;
    }

    .rk-no-results-wrap [data-name="clear-results"] {
        /* Size */
        height: var(--button-size);
    }

/* INFO SECTION */

.rk-info-section {
    /* Spacing */
    padding: 0 20px;

    /* Flexbox */
    display: flex;
    flex-direction: column;
    gap: 20px;
}

@media (min-width: 850px) {

    .rk-info-section {
        /* Spacing */
        padding: 0 40px;

        /* Flexbox */
        flex-direction: row;
        justify-content: space-between;
    }
}

    /* META WRAP */

    .rk-info-meta {
        /* Flexbox */
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        gap: 10px;
    }

    .rk-info-meta > * {
        /* Size */
        min-width: fit-content;
        height: var(--button-size);
        flex-grow: 1;

        padding: 0 10px;
    }

    @media (min-width: 570px) {

        .rk-info-meta > * {
            /* Size */
            width: fit-content;
            flex-grow: unset;
        }

            [data-name="toggle-hierarchy-accordions"] {
                margin-left: auto;
            }
    }
    
        /* Result count */

        .rk-result-count {
            background: var(--col-grey-light);
            font-style: italic;

            /* Flexbox */
            display: flex;
            justify-content: center;
            align-items: center; 
        }

        /* Clear results button */

        [data-name=clear-results] {
            padding: 0 7px;
        }

        /* Toggle hierarchy levels */

        [data-name="toggle-hierarchy-accordions"] {
            max-width: fit-content;
        }

/* RESULT SECTION */

.rk-result-section {
}

    /* HIERARCHY ACCORDION */

    .rk-hierarchy-accordion {
    }

    .rk-hierarchy-accordion:not([open]) {
        border-bottom: 4px solid #ffffff;
    }

        /* HIERARCHY ACCORDION SUMMARY (WRAP FOR GREEN & GREY COLUMN HEADERS) */

        .rk-hierarchy-accordion > summary {
            /* Size */
            min-height: var(--row-height-hierarchy);

            /* Ensures, that header items strech the full height */
            display: flex;
            flex-direction: column;

            /* Sticky hierarchy headers when scrolling */
            position: -webkit-sticky;
            position: sticky;
            top: 0;
            z-index: 510;

            /* Prevent triggering the details toggle */
            pointer-events: none;
        }

            /* GREEN BAR (header) */

            .rk-hierarchy-header {
                /* Size */
                min-width: 100%;
                width: 100%;
                max-width: 100%;
                
                /* Flexbox */
                display: flex;
            }

                /* GREEN BAR (header) ITEM */

                .rk-hierarchy-header-item {
                    background-color: var(--col-green-light-super);

                    /* Size */
                    min-width: 30px;

                    /* Spacing */
                    padding-top: var(--col-padding-horizontal);
                    padding-bottom: var(--col-padding-horizontal);

                    /* Flexbox */
                    display: flex;
                    justify-content: center;
                    align-items: center;
                }

                .rk-hierarchy-header-item,
                .rk-hierarchy-header-item *:not(i) {
                    font-weight: bold;
                }

                .rk-hierarchy-header-item:not(:last-child) {
                    border-right: 2px solid #ffffff ;
                }

                /* Hierarchy name */

                .rk-hierarchy-header .rk-hierarchy-name {
                    /* Size */
                    flex-grow: 1;

                    /* Force line break long words */
                    word-break: break-word;

                    /* Spacing */
                    padding-left: 20px;
                    padding-right: var(--col-padding-vertical);

                    /* Flexbox */
                    justify-content: flex-start;

                    pointer-events: none;
                }

                @media (min-width: 850px) {

                    .rk-hierarchy-header .rk-hierarchy-name {
                        padding-left: 40px;
                    }
                }

                .rk-hierarchy-header .rk-hierarchy-name,
                .rk-hierarchy-header .rk-hierarchy-name * {
                    /* Font */
                    text-transform: uppercase;
                }

                /* Hierarchy more */

                .rk-hierarchy-header .rk-hierarchy-more {
                    /* Size */
                    width: var(--col-width-more);
                    min-width: var(--col-width-more);

                    /* Spacing */
                    padding-left: var(--col-padding-vertical);
                    padding-right: var(--col-padding-vertical);

                    /* Flexbox */
                    gap: 5px;
                }

                .rk-hierarchy-header .rk-hierarchy-more,
                .rk-hierarchy-header .rk-hierarchy-more * {
                    transition: var(--app-transition);
                }

                .rk-hierarchy-header .rk-hierarchy-more:hover,
                .rk-hierarchy-header .rk-hierarchy-more:hover * {
                    color: var(--col-grey-medium);
                }

                    .rk-hierarchy-header .rk-hierarchy-more span {
                        /* Hide text label on small screens */
                        display: none;
                    }

                    @media (min-width: 950px) {

                        .rk-hierarchy-header .rk-hierarchy-more span {
                            display: initial;
                        }
                    }

                /* Hierarchy map */

                .rk-hierarchy-header .rk-hierarchy-map {
                    /* Size */
                    width: var(--col-width-map);
                    min-width: var(--col-width-map);

                    /* Spacing */
                    padding-left: var(--col-padding-vertical);
                    padding-right: var(--col-padding-vertical);

                    pointer-events: all;
                }

                .rk-hierarchy-header .rk-hierarchy-map,
                .rk-hierarchy-header .rk-hierarchy-map * {
                    color: var(--col-green);
                    transition: var(--app-transition);
                }

                .rk-hierarchy-header .rk-hierarchy-map:hover,
                .rk-hierarchy-header .rk-hierarchy-map:hover * {
                    color: var(--col-green-light);
                }

                @media (min-width: 850px) {

                    .rk-hierarchy-header .rk-hierarchy-map {
                        width: -webkit-fit-content;
                        width: -moz-fit-content;
                        width: fit-content;
                    }
                }

                    .rk-hierarchy-header .rk-hierarchy-map span {
                        /* Hide text label on small screens */
                        display: none;
                    }

                    @media (min-width: 950px) {

                        .rk-hierarchy-header .rk-hierarchy-map span {
                            display: initial;
                        }
                    }

                /* Hierarchy toggle (expand/collapse complete hierarchy sections) */

                .rk-hierarchy-header [data-name="toggle-hierarchy-row"] {
                    width: var(--col-width-arrow);
                    min-width: var(--col-width-arrow);

                    /* Flexbox */
                    display: flex;
                }

                .rk-hierarchy-header [data-name="toggle-hierarchy-row"],
                .rk-hierarchy-header [data-name="toggle-hierarchy-row"] * {
                    transition: var(--app-transition);
                }

                .rk-hierarchy-header [data-name="toggle-hierarchy-row"]:hover,
                .rk-hierarchy-header [data-name="toggle-hierarchy-row"]:hover * {
                    color: var(--col-green);
                }
                
                    .rk-hierarchy-header [data-name="toggle-hierarchy-row"] i {
                        /* closed */
                        transform: rotateZ(90deg);

                        transition: transform var(--app-transition);
                    }

                    .rk-hierarchy-accordion[open] .rk-hierarchy-header [data-name="toggle-hierarchy-row"] i {
                        /* open */
                        transform: rotateZ(-90deg);
                    }

        /* ============================================================================ */
        /* ============================================================================ */
        /* Results: Hierarchy accordion inner */
        /* ============================================================================ */
        /* ============================================================================ */

        .rk-hierarchy-accordion-inner {
            /* Flexbox */
            display: flex;
            flex-direction: column;
        }

            /* -------------------- */
            /* GREY BAR (subheader) */
            /* -------------------- */

            .rk-hierarchy-subheader {
                background-color: var(--col-grey-light);
                border-top: 2px solid #ffffff;

                /* Flexbox */
                display: flex;
                align-items: center;
            }

                /* GREY BAR (subheader) ITEM */

                .rk-hierarchy-subheader-item {
                    /* For whatever reason this is needed to fill the full available height */
                    height: 25px;

                    /* Flexbox */
                    display: flex;
                    align-items: center;

                    transition: color var(--app-transition);
                }

                .rk-hierarchy-subheader-item,
                .rk-hierarchy-subheader-item * {
                    color: var(--col-grey-dark);
                }

                .rk-hierarchy-subheader-item:hover,
                .rk-hierarchy-subheader-item:hover * {
                    color: var(--col-green);
                }

                .rk-hierarchy-subheader-item:not(:last-child) {
                    border-right: 2px solid #ffffff ;
                }

                /* Arrow icon (sorting indication) */

                .rk-hierarchy-subheader [data-sorting-status="none"] .rk-sort-arrow {
                    /* Hide initially, as there is no initial sorting (for now) */
                    display: none;
                }

                .rk-hierarchy-subheader [data-sorting-status="asc"] .rk-sort-arrow {
                    /* Show when sorted ascending */
                    display: initial;
                }

                .rk-hierarchy-subheader [data-sorting-status="desc"] .rk-sort-arrow {
                    /* Show when sorted descending */
                    display: initial;
                    transform: rotateX(180deg);
                }

                /* Column header: Area name */

                .rk-hierarchy-subheader .rk-col-area-name {
                    /* Size */
                    flex-grow: 1;

                    /* Force line break long words */
                    word-break: break-word;

                    /* Spacing */
                    padding-left: 20px;
                    padding-right: var(--col-padding-vertical);

                    /* Flexbox */
                    justify-content: flex-start;

                    transition: color var(--app-transition);
                }

                @media (min-width: 850px) {

                    .rk-hierarchy-subheader .rk-col-area-name {
                        padding-left: 40px;
                    }
                }

                /* Column header: Area hierarchy */

                .rk-hierarchy-subheader .rk-col-area-hierarchy {
                    /* Hide on small screens */
                    display: none;

                    /* Size */
                    width: var(--col-width-hierarchy);
                    min-width: var(--col-width-hierarchy);

                    /* Spacing */
                    padding-right: var(--col-padding-vertical);
                    padding-left: var(--col-padding-vertical);
                }

                @media (min-width: 850px) {

                    .rk-hierarchy-subheader .rk-col-area-hierarchy {
                        /* Show on large screens */
                        display: flex;

                        justify-content: flex-start;
                    }
                }

                /* Column header: Hectar */

                .rk-hierarchy-subheader .rk-col-area-hectar {
                    /* Size */
                    width: var(--col-width-ha);
                    min-width: var(--col-width-ha);

                    /* Spacing */
                    padding-right: var(--col-padding-vertical);
                    padding-left: var(--col-padding-vertical);

                    justify-content: flex-end;
                }

                /* Column header: Percent */

                .rk-hierarchy-subheader .rk-col-area-percent {
                    /* Size */
                    width: var(--col-width-per);
                    min-width: var(--col-width-per);

                    /* Spacing */
                    padding-right: var(--col-padding-vertical);
                    padding-left: var(--col-padding-vertical);

                    justify-content: flex-end;
                }

                /* Column header: Show above hierarchy toggle */

                .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"] {
                    /* Size */
                    width: var(--col-width-arrow);
                    min-width: var(--col-width-arrow);

                    /* Flexbox */
                    justify-content: center;
                }

                @media (min-width: 850px) {

                    .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"] {
                        /* hide on large screens, as above hierarchies are in their own column */
                        display: none;
                    }
                }

                .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"],
                .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"] * {
                    transition: var(--app-transition);
                }

                .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"]:hover,
                .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"]:hover * {
                    color: var(--col-green);
                }

                    .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"] i {
                        /* icon closed */
                        transform: rotateZ(90deg);

                        transition: transform var(--app-transition);
                    }

                    .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"][data-toggle-state=""] i,
                    .rk-hierarchy-subheader [data-name="toggle-above-hierarchies"][data-toggle-state="open"] i {
                        /* icon open */
                        transform: rotateZ(0);
                    }

            /* ------------------ */
            /* AREA ROW ACCORDION */
            /* ------------------ */

            .rk-area-row-accordion {
                /* Size */
                min-height: 30px;
            }

            .rk-area-row-accordion {
                border-bottom: 1px solid var(--col-grey);
            }

                /* AREA ROW ACCORDION SUMMARY (RESULT ROW) */

                .rk-area-row-accordion > summary {
                    /* Size */
                    min-height: var(--row-height-area);

                    /* Flexbox */
                    display: flex;
                    flex-direction: row;
                }

                @media (min-width: 850px) {

                    .rk-area-row-accordion > summary {
                        /* Ensure the <details> element can't be opend,
                           since on large screens there is a column
                           for the above hierarchy. */
                        pointer-events: none;
                    }
                }

                    .rk-area-row-accordion > summary > * {
                        /* Flexbox */
                        display: flex;
                        flex-direction: row;
                        align-items: center;

                        /* Spacing */
                        padding-top: var(--col-padding-horizontal);
                        padding-bottom: var(--col-padding-horizontal);
                    }

                    .rk-area-row-accordion > summary > *:not(:last-child) {
                        /* border-right: 2px solid red; */
                        border-right: 2px solid #ffffff;
                    }

                    /* Result row column: Area name */

                    .rk-area-row-accordion > summary .rk-col-area-name {
                        color: var(--col-green);
                        text-decoration: none;
                        white-space: break-spaces;

                        /* Force line break long words */
                        word-break: break-word;

                        /* Size */
                        padding-left: 20px;
                        flex-grow: 1;

                        /* Flexbox */
                        justify-content: flex-start;

                        transition: color var(--app-transition);

                        /* Ensure the "show in map" event works */
                        pointer-events: all;
                    }

                    .rk-area-row-accordion > summary .rk-col-area-name:hover {
                        color: var(--col-green-light);
                    }

                    @media (min-width: 850px) {

                        .rk-area-row-accordion > summary .rk-col-area-name {
                            /* Spacing */
                            padding-left: 40px;
                        }
                    }

                    /* Result row column: Above hierarchy */

                    .rk-area-row-accordion > summary .rk-col-area-hierarchy {
                        /* Hide on small screens */
                        display: none;

                        /* Size */
                        width: var(--col-width-hierarchy);
                        min-width: var(--col-width-hierarchy);

                        /* Spacing */
                        padding-right: var(--col-padding-vertical);
                        padding-left: var(--col-padding-vertical);
                    }

                    @media (min-width: 850px) {

                        .rk-area-row-accordion > summary .rk-col-area-hierarchy {
                            /* Show on large screens */
                            display: flex;
                        }

                        [data-result-status="text"] .rk-area-row-accordion > summary .rk-col-area-hierarchy {
                            /* Adjust spacing only for text results,
                               because the hierarchy column is on the edge then. */
                            padding-right: 40px;
                        }
                    }

                    /* Result row column: Hectar */

                    .rk-area-row-accordion > summary .rk-col-area-hectar {
                        /* Size */
                        width: var(--col-width-ha);
                        min-width: var(--col-width-ha);

                        /* Spacing */
                        padding-right: var(--col-padding-vertical);
                        padding-left: var(--col-padding-vertical);

                        /* Text align */
                        justify-content: flex-end;
                    }

                    /* Result row column: Percent */

                    .rk-area-row-accordion > summary .rk-col-area-percent {
                        /* Size */
                        width: var(--col-width-per);
                        min-width: var(--col-width-per);

                        /* Spacing */
                        padding-right: var(--col-padding-vertical);
                        padding-left: var(--col-padding-vertical);

                        /* Text align */
                        justify-content: flex-end;
                    }

                    /* Result row column: Show above hierarchy toggle */

                    .rk-area-row-accordion > summary [data-name="toggle-above-hierarchy"] {
                        /* Size */
                        width: var(--col-width-arrow);
                        min-width: var(--col-width-arrow);
                        max-width: var(--col-width-arrow);

                        justify-content: center;
                    }

                    @media (min-width: 850px) {

                        .rk-area-row-accordion > summary [data-name="toggle-above-hierarchy"] {
                            /* hide on large screens, as above hierarchies are in their own column */
                            display: none;
                        }
                    }

                    .rk-area-row-accordion > summary [data-name="toggle-above-hierarchy"],
                    .rk-area-row-accordion > summary [data-name="toggle-above-hierarchy"] * {
                        transition: var(--app-transition);
                    }

                    .rk-area-row-accordion > summary [data-name="toggle-above-hierarchy"]:hover,
                    .rk-area-row-accordion > summary [data-name="toggle-above-hierarchy"]:hover * {
                        color: var(--col-green);
                    }

                        .rk-area-row-accordion [data-name="toggle-above-hierarchy"] i {
                            /* icon closed */
                            transform: rotateZ(90deg);
                        }

                        .rk-area-row-accordion[open] [data-name="toggle-above-hierarchy"] i {
                            /* icon open */
                            transform: rotateZ(0);
                        }

                /* AREA ROW ACCORDION INNER (above hierarchy on mobile) */

                .rk-area-row-accordion-inner {
                    padding: 8px 20px;
                }

/* ============================================================================ */
/* ============================================================================ */
/* Loading illustration */
/* ============================================================================ */
/* ============================================================================ */

.rk-loading-illustration-wrap {
    /* Spacing */
    margin: 0 20px;

    /* Flexbox */
    display: flex;
    justify-content: center;
    align-items: center;
}

.rk-loading-illustration {
    background: var(--col-green);
    border-radius: 50%;

    /* Size */
    width: 35px;  /* circle width */
    height: 35px; /* circle height */
    padding: 8px; /* circle border weight */
    
    /* Mask */
    --mask: 
        conic-gradient(#0000 10%,#000),
        linear-gradient(#000 0 0) content-box;
    
    -webkit-mask: var(--mask);
            mask: var(--mask);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: spinner 1s infinite linear;
}

@keyframes spinner { to { transform: rotate(1turn); } }

/* ============================================================================ */
/* ============================================================================ */
/* Text search keyword result highlighting */
/* ============================================================================ */
/* ============================================================================ */

.rk-highlighted {
    background-color: var(--col-grey);
    color: inherit;
}

/* ============================================================================ */
/* ============================================================================ */
/* Class for blocking map interaction */
/* ============================================================================ */
/* ============================================================================ */

.rk-block-map-interaction,
.rk-block-map-interaction * {
    pointer-events: none !important;
}

/* ============================================================================ */
/* ============================================================================ */
/* Loding indication via cursor.
/* This is used when sorting search result columns.
/* ============================================================================ */
/* ============================================================================ */

body.rk-cursor-loading,
body.rk-cursor-loading * {
    cursor: wait;
}

body.rk-cursor-loading a,
body.rk-cursor-loading button {
    pointer-events: none;
}