.onlymobile {
    display:none;
}

@media screen and (max-width:768px) {
    .nomobile {
        display:none;
    }
    .onlymobile {
        display:inherit;
    }

    /* main div: prevent double scroll */
    #structure>.row {
        overflow: hidden;
    }
    
    /* Header space has fixed width distribution */
    #header {
        display:block;
    }
    #header .titleBlock {
        flex:none;
        display:inline-block;
        width: calc( 100% - 3rem);
    }
    #header .menuPlaceholder {
        flex:none;
        display:inline-block;
        width: 3rem;       
    }
    
    /* Mobile menu */
    #mobileMenu {
        display:block;
        position:fixed;
        top:0;
        width:100%;
        height:100%;
        transform:translateX(100%);
        background-color:white;
        z-index:5;
        padding-top: 1rem;
        overflow:auto;
        overflow-x: hidden;
        overflow-y: auto;
    }
    #mobileMenu.slide-in {
        animation:slide-in 0.3s forwards;
    }
    #mobileMenu.slide-out {
        animation:slide-out 0.3s forwards;
    }
    @keyframes slide-in {
        100% { transform: translateX(0%); }
    }
    @keyframes slide-out {
        0% { transform: translateX(0%); }
        100% { transform: translateX(100%); }
    }
    #buttonAreaMobile {
        margin-bottom:1rem;
    }
    #mobileMenuButton {
        position:fixed;
        z-index:6;
        top:0;
        right:0;
        width:3.5rem;
        padding: 0.5rem;
        /* background-color:white; */
    }
    #mobileMenuButton img {
        width: 100%;
    }

    /* Filter panel */
    #filterAreaMobile fieldset {
        padding-bottom: 72px;
    }
    #filterAreaMobile .lazyButtons.bottom {
        position: sticky;
        display: block;
        bottom: 0;
        background-color: white;
        width: 100%;
        padding: 16px 0 32px 0;
        text-align: left;
    }


    /* less margin in the main data area */
    #dataArea {
        padding:0.75rem;
    }

    /* offset the title row*/
    #header.row {
        margin-left:0;
    }
    
    /* max 4 lines title and subtitle */
    #header .titleBlock h2, #header .titleBlock small {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
    }

    /* table headings capped */
    #dataArea th {
        overflow: hidden;
        white-space: nowrap;
        text-overflow:ellipsis;
    }

    /* pagination buttons are larger */
    .pagination li .page-link {
        font-size:1.2rem;
        padding: 0.25rem 1rem;
    }
}