/* portrait cut-off */
@media screen and (max-width: 567px) {
    :root {
        --portrait: true;
    }

    body {
        display: grid;
        grid-template-rows: 10% 7% 1fr;
        grid-template-areas: 
            "ads"
            "header"
            "viewport";
        overflow: hidden;
    }

    .ts-header {
        position: relative;
        top: 0;
        left: 0;
        grid-area: header;
        width: 100% !important;
        height: 100% !important;
    }

    #viewport {
        position: relative;
        top: 0;
        left: 0;
        grid-area: viewport;
        width: 100% !important;
        height: 100% !important;
        overflow: hidden;
    }

    .TSAdsSidebar {
        box-sizing: border-box;
        position: relative;
        top: 0;
        left: 0;
        grid-area: ads;
        width: 100% !important;
        height: 100% !important;
    }

    .TSNoDisplayInPortrait {
        display: none;
    }

    .TSDisplayInPortraitOnly {
        display: block;
    }


    .container-heading {
        display: block;
        margin: 4px 1em;
    }
 

    /* 
    .mdl-card__supporting-text {
        width: auto;
        height: auto;
    }

    .tscard {
        width: 100% !important;
        min-width: 70vw;
        overflow: visible !important;
    }
    
  

    #recents-filter .mdl-card {
        width: 80vw !important;
    }

    #examples-filter .mdl-card {
        width: 80vw !important;
    }

    */

   

    #main {
        height: 100% !important;
        width: 100% !important;
        overflow: auto;
    }

    #card-container {
        height: 95% !important;
        min-width: 600px !important;
        overflow: visible !important;
        flex-flow: row;
        align-items: flex-start;
    }

    /*
    .TSDocsOutermostContainer {
        overflow: hidden !important;
    }
    
    .TSDocsOuterContainer {
        overflow: visible !important;
    }
    
    .TSDocsContainer {
        overflow: auto !important;
    }
    */

    .TSTileTitle {
        font-size: medium;
    }

  
    .ts-tile-button {
        font-size: smaller;
    }
}