.menu-filter {
    position: relative;
    color: #FFFFFF;
    left: 22px;
    background-color: transparent;
}

.menu-filter:hover {
    background-color: transparent;
}

.menu-filter:focus {
    color: var(--theme_secondary_color);
}

.filterSidebar {
    position: fixed;
    z-index: 7;
    width: 100%;
    height: 100%;
    top: 0px;
    background-color: rgb(60, 60, 60, 0.2);
    display: none;
    opacity: 1;
    -webkit-transition: opacity 0.2s;
    -moz-transition: opacity 0.2s;
    -o-transition: opacity 0.2s;
    transition: opacity 0.2s;
}

.filterSideground {
    position: fixed;
    z-index: 8;
    width: 100%;
    height: 100%;
    transform: translate(20%, 0);
}

.filtergemple {
    width: 400px;
    position: fixed;
    height: inherit;
    z-index: 20;
    background-color: grey;
    left: -240px;
    transform: translate(-300px, 0);
    border-color: transparent;
    /*    background-image: var(--theme_sidebar_background_gradient);*/
    background-color: #FBFBFB;
    /*    background-color: var(--theme_secondary_color);*/
}

.translator {
    transform: translate(300px, 0);
    transition: transform 0.5s;
}

.translatorback {
    transform: translate(-300px, 0);
    transition: transform 0.5s;
}