html {
            height: 100%;
        }

        body {
            height: 100%;
            margin: 0;
            padding: 0;
        }

        #map {
            padding: 0;
            margin: 0;
            height: 100%;
            font-family: Arial, Helvetica, sans-serif;
            font-size: 14px;
            color: #323232;
        }

        #features,#directions {
            display: none;
            position: absolute;
            width: 30%;
            max-height: 30%;
            left: 20px;
            top: 80px;
            overflow-y: auto;
            background: rgba(255, 255, 255, 0.8);
        }
                
/*         #directions {
            display: none;
            position: absolute;
            width: 30%;
            max-height: 50%;
            left: 20px;
            top: 80px;
            overflow-y: auto;
            background: white;
            font-family: Arial, Helvetica, Verdana;
            line-height: 1.5;
            font-size: 14px;
            padding: 10px;
        } */

        .mapblibregl-popup {
            max-width: 300px;
            font-family: Arial, Helvetica, Verdana;
            font-size: 14px;
        }
          /* Style for custom control */

        .btn {
            color: blue;
        }


    ul {
      list-style: none;   /* remove bullets */
      margin: 0;
      padding: 0;
    }

    li {
      padding: 8px;
      cursor: pointer;
    }
    li:hover {
      background-color: #f0f0f0; /* hover highlight */
    }
    /* style for selected item */
    .selected {
      background-color: #3399ff;
      color: #fff;
    }