@media screen and (max-width: 700px) {
   #flex-container {
      flex-direction: column-reverse;
      height: calc(94%);
   }
   #side-nav{
      width:100%;
      height: 45%;
   }
   #map-div{
      height:55%;
   }
   .esri-view-width-xsmall .esri-expand--auto .esri-expand__mask--expanded {
      display: none;
   }
   .esri-view-width-xsmall .esri-expand--auto .esri-expand__container--expanded {
      top: 60px;
      height: 45%;
   }
   #header{
      height: 40px;
   }
   .appTitle {
      font-size: 14px;
   }
   #toggle-plugin-container {
      display: none;
   }
   .cntrlWrap {
      width:100%;
   }
   #map-toggle{
      height: 30px;
      width: 100%;
      writing-mode: unset;
      text-orientation: unset;
      padding-top: 4px;
      font-size: 14px;
   }
   .portrait-toggle{
      display: block;
   }
   .landscape-toggle{
      display: none;
   }
}