body {
    --contentWidth: 600px;
    --webApp_borderradius: 8px;
    --webApp_bkgColor: #f7f7f7;
    --webApp_contentPadding: calc(50% - (var(--contentWidth)/2));

}
@media screen and (max-width:980px){
    body {
        --contentWidth: calc(100vw - var(--menuWidth) - 118px);
        --webApp_contentPadding: calc(50% - (var(--contentWidth)/2));
    }
}

.mobileSideMenu.shown ~ .appContent{
    transform:inherit;
}
body div.jumbotron.appContent{
    width:  calc(100% - var(--menuWidth));
    height: calc(100% - var(--menuBarHeight) - var(--menuTopBorder));
    padding-top: 0 !important;
    top: calc(var(--menuBarHeight) + var(--menuTopBorder));
    position: absolute;
    right: 0;
    z-index: 2;
}
.appContent > .workspace {
    padding: 30px var(--webApp_contentPadding) !important;
    position: relative;
}

/* -- views -- */
.navigateView {
    float: left;
    width: 100%;
}

div.navigateView.shown {
    left: var(--webApp_contentPadding);
    width: var(--contentWidth) !important;
    height: auto;
    top: 10px;
}
.navigateview:not(.main){
    background-color: #ededef !important;
}
div.navigateView.shown + .navigateView:not(.shown){
    display:none;
}

.backButton.web_only{
    position:fixed;
    height: 40px;
    width: 40px;
    margin-top: 2px;
    padding: 9px;
    top: calc(var(--menuBarHeight) + 15px);
    left: calc(((100% - var(--menuWidth)) - var(--contentWidth))/2 + var(--menuWidth) - 50px);
    cursor: pointer;
    z-index: 100;
    background-color: #ddd;
    border-radius: 50%;
}

/* -- maincontent parts -- */
.scrollingContent,
.web_contentBox{
    border-radius:var(--webApp_borderradius);
    margin-bottom:15px;
    background-color: var(--webApp_bkgColor);
}

/* -- scrolling contents -- */
div.scrollingContent{
    position:relative;
}
body .scrollingContent .imageCol{
    width: 75px !important;
}

/* ------------------------ */
#filterBlock{
    border-top:0;
    height: auto;
    width: 100%;
    float: left;
    padding: 0;
    margin-top: -20px;
    margin-bottom: 15px;
    background-color: transparent;
    border-radius: var(--webApp_borderradius);
}

#filterBlock + div.scrollingContent{
    top: 0;
    float: left;
    width: 100%;
}
#filterBlock select,
#filterBlock input {
    height: calc(var(--menuBarHeight) - 10px);
    background-color: rgba(0,0,0,0.3);
    border-radius: var(--webApp_borderradius);
    margin: 0;
}
#filterBlock input {
    background-position-x: 11px;
    padding-left: 40px;
}

.not_web{
    display:none !important;
}

.buttonHolder.full .button{
    border-radius: var(--webApp_borderradius);
}

/* -- photoswipe -- */
body .pswp {
    left: var(--menuWidth);
    width: calc(100% - var(--menuWidth));
}
/* -- documenten -- */
body .documentenEditField{
    display: block;
    position: relative;
    background: transparent;
}
body .profielEditField{
    display: block;
    position: relative !important;
    /* background: transparent; */
}

/* ---------------- */

a.switchBeheer {
    float: right;
    font-size: 25px;
    padding: 7px 8px;
    margin-right: 10px;
    color: white;
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.popup_holder .popup {
    left: calc(var(--menuWidth) + 20px);
    width: calc(100% - var(--menuWidth) - 40px);
}
.popup_holder .popup .buttonHolder{
    max-width: 300px;
    margin: auto;
}