.popup-menu-popup,
.popup-menu {
    --popup-menu-pointer-height: 10px;
    --popup-menu-shadow: 0.5px 0.87px 3px rgba(0, 0, 0, 0.7);
    --popup-menu-shadow-size: 4px;
}

.popup-menu-popup {
    visibility: hidden;
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: var(--layer-popup);
}
    .popup-menu-popup.popup-menu-open {
        visibility: visible;
    }
    .popup-menu-popup.popup-menu-with-background .popup-background {
        display: block;
    }

.popup-menu {
    display: inline-block;
    position: absolute;
    visibility: hidden;
    pointer-events: auto;
    overflow: hidden;
    font-family: var(--regular-font);
    font-size: var(--font-size-regular);
    font-weight: normal;
}
    .popup-menu .popup-menu-pointer-container {
        position: relative;
        display: block;
        line-height: 0;
        margin: 0px calc(var(--border-radius) + var(--popup-menu-shadow-size));
        height: var(--popup-menu-pointer-height);
    }
        .popup-menu .popup-menu-pointer {
            position: absolute;
            display: inline-block;
            width: 22px;
            height: 100%;
            background-image: url('../gfx-2020/style/popup-menu-pointer.svg');
            background-repeat: no-repeat;
            background-position: center top;
            background-size: 100% auto;
        }

    .popup-menu .popup-menu-content {
        font-size: var(--font-size-regular);
        color: var(--palette-background-text);
        background-color: var(--palette-background-paper);
        border-radius: var(--border-radius);
        padding-left: 7px;
        padding-right: 7px;
        padding-top: 13px;
        padding-bottom: 10px;
        box-sizing: border-box;
        text-align: left;
        overflow: hidden;
        height: auto;
        box-shadow: var(--popup-menu-shadow);
        margin-left: var(--popup-menu-shadow-size);
        margin-right: var(--popup-menu-shadow-size);
        margin-bottom: var(--popup-menu-shadow-size);
    }

        .popup-menu .popup-menu-content .popup-menu-item {
            padding-left: 13px;
            padding-right: 19px;
        }
            .popup-menu .popup-menu-content .popup-menu-item-section .popup-menu-item {
                padding-left: 23px;
                padding-right: 0px;
            }

.popup-menu.popup-menu-open {
    visibility: visible;
}
.popup-menu .sep {
    display: none;
}
.popup-menu .popup-menu-item {
    display: block;
    line-height: 0;
    padding-top: 5px;
    padding-bottom: 5px;
    white-space: nowrap;
}
    .popup-menu .popup-menu-item > a {
        position: relative;
        display: inline-block;
        min-height: 20px;
        padding-left: 27px;
        color: inherit;
        text-decoration: none;
        vertical-align: middle;
        line-height: 20px;
    }
        .popup-menu-content .popup-menu-item > a:hover {
            color: var(--palette-primary-dim);
        }
    .popup-menu .popup-menu-item > a:before {
        content: '';
        height: 20px;
        width: 20px;
        position: absolute;
        left: 0px;
        vertical-align: middle;
        display: inline-block;
        background-color: transparent;
        background-image: url('../gfx-2020/style/popup-menu-bullet.svg');
        background-size: 8px auto;
        background-repeat: no-repeat;
        background-position: center center;
    }

.popup-menu-content .popup-menu-item.with-section > a {
    padding-left: 0px;
    cursor: pointer;
}
    .popup-menu-content .popup-menu-item.with-section > a:before {
        display: none;
    }
    .popup-menu-content .popup-menu-item.with-section > a:hover {
        color: var(--palette-primary-dim);
    }
        .popup-menu-content .popup-menu-item.with-section > a .popup-menu-item-section-switch {
            margin-left: 6px;
        }
            .popup-menu-content .popup-menu-item.with-section > a .popup-menu-item-section-switch:before {
                content: '';
                display: inline-block;
                width: 12px;
                height: 8px;
                background-image: url('../gfx-2020/style/popup-menu-section-switch.svg');
                background-size: contain;
                transform: rotate(-90deg);
                vertical-align: middle;
            }
                .popup-menu-content .popup-menu-item.with-section.section-open > a .popup-menu-item-section-switch:before {
                    transform: rotate(0deg);
                }

    .popup-menu-content .popup-menu-item.with-section > .popup-menu-item-section {
        display: none;
        margin-top: 4px;
    }
        .popup-menu-content .popup-menu-item.with-section.section-open > .popup-menu-item-section {
            display: block;
        }

    .popup-menu-content .popup-menu-item.with-section > .popup-menu-item-section .sep {
        display: none;
    }