#map {
        height: 100%;
    }

    html,body, #container {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
        overflow:hidden;
    } 

    /* map container styling */
     div.details { 
   
        width:100%;
        display: block;
        top: 72px;
        left: 0;
        bottom: 0;
        position: absolute;
        color: black;
        z-index:1;
    }

    /* alert popup styling*/
    .alert-details {
        top: 28px; 
        z-index:9999;
        text-align: center;
    }

    .navbar {
        min-height: 72px;
        padding:0 8px;
      }


      .navbar-brand {
        padding: 0;
        height: 72px;
        line-height: 72px;
      }
      
      

      .navbar-collapse {
        margin-bottom: 8px;
      }
      
      

    .text-bold {
        font-weight: 600;
        font-size: 1.1em;
    }



    /* color the hamburger */
    .custom-toggler.navbar-toggler {
        border-color: #17a2b8;
        border-width:2px;
    }

    .custom-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(23, 162, 184, 0.8)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
    } 

    /* restaurant popup layout */
    .i-win-name{
        font-size:1.2em;
        font-weight: bold;
        padding-left:4px;
    }

    .i-win-status{
        color:darkred;
        font-weight: bold;
        font-size:1.0em;
        padding-left:4px;
    }

    .i-win-info{
        font-weight: 400;
        line-height:1.2em;
        font-size:1.2em;
        padding-top:8px;
        
    }

    .grid-parent{
        display:grid;
        grid-template-columns: 40px 140px;
        grid-template-rows: 80px 10px 140px;
        grid-auto-flow: row;
        align-items: center;
        max-width:230px;
    }

    .grid-item-1{ /*fork*/
        grid-column: 1 / 2;
        grid-row: 1 / 2;
    }

    .grid-item-2{  /*name*/
        grid-column: 2 /3;
        grid-row: 1 / 2;
    }

    .grid-item-3{ /*hr*/
        grid-column: 1 / 3;
        grid-row: 2 / 3;
    }

    .grid-item-4{ /*info*/
        grid-column: 1 / 3;
        grid-row: 3 / 4;
    }

    /* align fa font over buttons */
   .cb4 {
        display: flex;
        flex-wrap: wrap;
        align-content: center;
        justify-content: center; 
    } 
  
    .flex-end-center {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }