/*
*   MENU POPUP
 */
.popup-control {
    cursor: pointer;
}

.popup-container {
    max-height: 0;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background: var(--global-bgcolor-main);
    border: 0 solid rgb(161, 176, 181);
    list-style: none;
    position: absolute;
}

.popup-container.visible {
    max-height: 100vh;
    overflow: auto;
    border-width: 1px;
}

.popup-container.visible.from-right {
    right: 5px;
    top: 80%;
}

.popup-container > li {
    padding: 7px 10px;
}

/*
*   MENU SLIDE
 */

.slide-menu-control {
    cursor: pointer;
}

.slide-menu {
    position: absolute;
    list-style: none;
    padding: 0;
    margin: 0;
    top: 100%;
    height: calc(100vh - 55px);
    overflow: hidden;
    background: var(--global-bgcolor-main);
    border-left: 2px solid rgb(161, 176, 181);
    box-sizing: border-box;
    text-transform: uppercase;
    right:0;
    min-width:300px;
    display:none;
    overflow-y:auto;
}

.slide-menu div.element,
.slide-menu div.header{
    padding: 1em;
    box-sizing: border-box;
    border: 2px solid rgb(161, 176, 181);
    border-top: none;
    font-weight: bold;
    font-size:10px;
}

.slide-menu div.element:hover {
    background-color: rgb(161, 176, 181);
    cursor:pointer;
}

.slide-menu div.element a {
    justify-content: start;
    padding-left: 2em;
}

.slide-menu div.element a:before {
    content: '>';
    display: inline-block;
    margin-right: 1em;
    padding-bottom: .15em;
}

.slide-menu div.element:hover a {
    color: #f9f9f9;
}

.slide-menu div.element:first-of-type{
    border-top: 1px solid rgb(161, 176, 181);
}

body.public .slide-menu {
    background: var(--global-color-main);
    border-color: rgb(44, 51, 50);
}

body.public .slide-menu div.element:first-of-type{
    border-top-color: rgb(44, 51, 50);
}

body.public .slide-menu div.element, body.public .slide-menu div.header {
    border-color: #202020;
}