body {
font-size: 18px;
}

.r-topbar-page .r-body {
    padding: 5px;    
}

.r-small-page {
    padding: 5px;
}

.navbar {
    height: 0px;
    z-index: 0;
    display: none;
}

.r-topbar-page .r-body .r-content .r-left:not( [data-hidden] ) + .r-data-block {
    max-width: calc(100vw - 300px - 18px - 18px);
    margin-top: 34px
}

/*----------------------Right popup Menu-----------------------------------------------*/
#menuButton, #menuButtonClose{
    padding-bottom: 0px;
    text-align: center;
    font-size: 20px;
    margin: 0px;
    width: 160px;
    height: 34px;
    border: 1px solid #4D4AE8;
    background-color: #4D4AE8;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    border-radius: 0 0 1rem 1rem;
    box-shadow: rgba(255, 255, 255, 0.15) 0 1px 0 inset,rgba(46, 54, 80, 0.075) 0 1px 1px;
    box-sizing: border-box;
    color: #FFFFFF;
    transform-origin: right top;
    position: fixed;
    right: 46%;
    top: 0px;
    border-top: 0px;
}

#menuButton {
    z-index: 99;
}

#menuButtonClose {
    z-index: 101;
}

#menuButton p, #menuButtonClose p {
    color: #fff;
    line-height: 20px;
    margin: 0px;
    position: absolute;
    bottom: 10px;
    width: 100%;
}

#menuButton:hover, #menuButtonClose:hover {
    cursor: pointer;
}

#slideout {
    background: #DBE2E9;
    color: #333;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100vw;
    height: 100vh;
    overflow-y: auto; /*scrool if need */
    transform: translate3d(0, -100vh, 0);
    /*transform: translate3d(100vw, 0, 0); right to left*/	
    /*transition: transform .3s cubic-bezier(0, .52, 0, 1);*/
    transition: transform 0.3s ease;
}

#slideout.on {
    transform: translate3d(0, 0vh, 0);
    /*transform: translate3d(0vw, 0, 0); right to left*/
}

/*-----------------------------------End Menu--------------------*/