#search-bar {
  display: flex;
  padding: 11px 0px;
  border-bottom: 1px solid #ddd;
  left: 0;
  right: 0;
  position: fixed;
  z-index: 1;
  background: #fff;
  top: 0;
}
    #search-bar .logo-dc {
      position: relative;
      margin: 0 12px;
    }
      #search-bar .logo-dc img {
        height: 49px;
        vertical-align: bottom;
      }
      #search-bar .logo-dc .beta {
        position: absolute;
        bottom: -2px;
        text-align: center;
        width: 100%;
        font-size: .7em;
        color: #335;
        font-family: "Courier New", courier;
      }
    #search-bar .query-input {
      position: relative;
      width: 55%;
      min-width: 25em;
      white-space: nowrap;
      border: 1px solid #ddd;
      border-radius: 3px;
      box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.3);
    }
      #search-bar .query-input input {
        width: calc(100% - 3em);
        font-size: 17px;
        /*color: #333;*/
        padding: 0.8em 2em 0.8em 1.1em;
        border: none;
        background: #ffffff00;
      }
        #search-bar .query-input input:focus {
          outline: none;
        }
        #location-bar input::-webkit-input-placeholder,
        #categories input::-webkit-input-placeholder,
        #search-bar input::-webkit-input-placeholder {
          color: #aaa;
          font-size: 0.8em;
        }
        #location-bar input::-moz-placeholder,
        #categories input::-moz-placeholder,
        #search-bar input::-moz-placeholder {
          color: #aaa;
          font-size: 0.8em;
          line-height: 0.8em;
        }
        #location-bar input::-ms-input-placeholder,
        #categories input::-ms-input-placeholder,
        #search-bar input::-ms-input-placeholder {
          color: #aaa;
          font-size: 0.8em;
          line-height: 0.8em;
        }
        #location-bar input::-moz-placeholder,
        #categories input::-moz-placeholder,
        #search-bar input::-moz-placeholder {
          color: #aaa;
          font-size: 0.8em;
          line-height: 0.8em;
        }
    #search-bar .clear-all {
      margin-left: -1.1em;
      cursor: pointer;
      font-size: 1.5em;
      line-height: 1.1em;
      color: darkgrey;
      display: inline-block;
      margin-bottom: 9px;
      vertical-align: bottom;
    }
    #search-bar .query-input .tokens {
      position: absolute;
      right: 3em;
      bottom: 0;
      height: calc(20px + 1.6em + 2px);
      font-size: 14px;
      display: flex;
      align-items: center;
    }
    #search-bar .tokens {
      bottom: 0;
      height: 53px;
      font-size: 14px;
      display: flex;
      align-items: center;
    }
      #search-bar .tokens .suggested-tokens, #search-bar .tokens .used-tokens {
        display: flex;
        overflow-x: hidden;
        justify-content: flex-end;
        margin-left: 1em;
      }
      #search-bar .tokens .token {
        position: relative;
        background: #ff1148;
        color: white;
        line-height: 14px;
        padding: 4px 16px 4px 6px;
        margin-left: 0.5em;
        border-radius: 3px;
        cursor: pointer;
      }
        #search-bar .tokens .city.token:before {
          background: url(images/map-marker.png) no-repeat;
          background-size: 12px 12px;
          background-position: 0px 0px;
          display: inline-block;
          width: 15px;
          height: 12px;
          content: '';
        }
        #search-bar .tokens .tag.token:before {
          content: '#';
        }
        #search-bar .tokens .token:after {
          position: absolute;
          right: 5px;
        }
        #search-bar .tokens .suggested-tokens .token {
          /*background: #ff8f03;*/
          /*background: #0396ff;*/
          background: #ff114899;
        }
        #search-bar .tokens .suggested-tokens .token:after {
          content: '?';
          color: white;
        }
        #search-bar .tokens .used-tokens .token:after {
          content: '⨯';
          color: white;
          font-size: 16px;
          line-height: 10px;
        }

    #search-bar #query-suggestions {
      position: absolute;
      border: 1px solid #ddd;
      border-top: 1px solid #eee;
      width: 100%;
      height: 10em;
      background: #fff;
      color: #777;
      box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.3);
      margin-left: -1px;
      margin-right: -1px;
      transition: all 200ms ease;
      display: flex;
      flex-flow: row wrap;
      overflow-x: hidden;
      overflow-y: scroll;
    }
      #search-bar #query-suggestions.folded, #location-bar #location-suggestions.folded, #categories #categories-suggestions.folded {
        height: 0px;
        visibility: hidden;
        opacity: 0;
      }
      #search-bar #query-suggestions .section {
        margin: 0.8em 2em 1em 1.1em;
        padding-bottom: 1em;
        border-right: 1px solid #f0f0f0;
        height: calc(100% - 1.8em);
        display: flex;
        flex-flow: column;
        width: 40%;
      }
      #search-bar #query-suggestions .section:last-of-type {
        border-right: none;
      }
      #search-bar #query-suggestions .section-title {
        margin: 0 0 5px 0;
        font-size: 1em;
        color: #666;
      }
      #search-bar #query-suggestions .section-locations .city, #search-bar #query-suggestions .section-tags .tag {
        cursor: pointer;
        min-width: 6em;
        margin-right: 1em;
      }
        #search-bar #query-suggestions .section-locations .city:before, #search-bar #query-suggestions .section-tags .tag:before {
          background-size: 12px 12px;
          background-position: 0px 0px;
          content: '';
        }
        #search-bar #query-suggestions .section-locations .city:before {
          background-image: url(images/map-marker.png);
          background-repeat: no-repeat;
          padding-left: 15px;
          display: inline-block;
          filter: brightness(30%);
          height: 12px;
        }
        #search-bar #query-suggestions .section-tags .tag:before {
          content: '#';
        }
      #search-bar #query-suggestions .section .content {
        display: flex;
        flex-flow: column wrap;
        font-size: 0.9em;
        align-content: flex-start;
      }



  .filter-buttons {
    position: fixed;
    z-index: 1;
    padding: 1em 2.5em;
    background: white;
    display: flex;
    flex-direction: row;
    width: calc(100% - 5em);
    justify-content: left;
    border-bottom: 1px solid #ddd;
  }
    .has-results .filter-buttons {
      display: flex;
    }
    #container.no-result .filter-buttons {
      display: none;
    }

    #location-bar {
      /*margin-left: 1em;*/
      /*min-width: 7em;*/
      width: 20%;
      max-width: 10em;
      min-width: 6em;
      /*position: absolute;*/
      /*right: 50%;*/
    }
      #location-bar .location-input {
        position: relative;
        white-space: nowrap;
        border: 1px solid #ddd;
        border-radius: 5px;
        /*box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.3);*/
        background: white;
      }
        #location-bar .location-input input {
          position: fixed;
          font-size: 17px;
          /* color: #333; */
          /*padding: 0.5em 2em 0.5em 2.2em;*/
          border: none;
          border-bottom: 1px solid #ddd;
          margin-bottom: 0.75em;
          /*background: #ffffff00;*/
          /*left: calc(-2.5em + 2px);*/
          background: url(images/map-marker.svg) no-repeat;
          background-size: 1.2em 1.2em;
          background-position: 0px 0px;
          padding-left: 1.5em;
        }
          #location-bar .location-input input:focus {
            outline: none;
          }
      /*#location-bar .location-input:before {
        display: inline-block;
        width: 2em;
        height: 1.5em;
        content: '';
        vertical-align: middle;
        margin-left: 0.6em;
      }*/
      #location-bar #location-suggestions {
      }



    #categories {
      margin-left: 1em;
      /*min-width: 7em;*/
      width: 20%;
      max-width: 10em;
      min-width: 6em;
      /*position: absolute;*/
      /*left: 50%;*/
    }
      #categories .categories-input {
        position: relative;
        white-space: nowrap;
        border: 1px solid #ddd;
        border-radius: 5px;
        /*box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.3);*/
        background: white;
      }
        #categories .categories-input input {
          position: fixed;
          font-size: 17px;
          /* color: #333; */
          /*padding: 0.5em 2em 0.5em 2.2em;*/
          border: none;
          border-bottom: 1px solid #ddd;
          margin-bottom: 0.75em;
          /*background: #ffffff00;*/
          /*left: calc(-2.5em + 2px);*/
          padding-left: 1.5em;
        }
          #categories .categories-input input:focus {
            outline: none;
          }
      #categories .categories-input input:before {
        background-position: 0px 0px;
        display: inline-block;
        width: 1em;
        height: 1.5em;
        content: '#';
        font-size: 1.5em;
        vertical-align: middle;
        margin-left: 0.6em;
      }
        #location-bar #location-suggestions .section .content .location.selected,
        #categories #categories-suggestions .section .content .category.selected {
          font-weight: bold;
          color: #00c07f;
        }
        #categories #categories-suggestions {
        }
    #categories .submit-categories {
      cursor: pointer;
      display: block;
      margin-bottom: 9px;
      vertical-align: bottom;

      position: absolute;
      bottom: .5em;
      right: 1.1em;

      border-radius: 3px;
      border: 1px solid #00c07f;
      color: #00c07f;
      /*background: #1180ffaa;*/
      padding: 0px 8px;
    }




      /*** ***/
      #location-bar #location-suggestions, #categories #categories-suggestions {
        transition: all 400ms ease;
        position: absolute;
        border: 1px solid #ddd;
        border-radius: 3px;
        width: 180%;
        min-width: 12em;
        height: 20em;
        background: #fff;
        color: #777;
        box-shadow: 0px 2px 8px -3px rgba(0,0,0,0.3);
        margin-left: -1em;
        padding: 1em 2em;
        display: flex;
        flex-flow: column nowrap;
        overflow-x: hidden;
        overflow-y: scroll;
        top: 3.3em;
      }
        #location-bar #location-suggestions .logo-dc, #categories #categories-suggestions .logo-dc {
          width: 50px;
          opacity: 0.5;
          position: relative;
          top: calc(50% - 25px);
          left: calc(50% - 25px);
        }
          #location-bar #location-suggestions .logo-dc .logo, #categories #categories-suggestions .logo-dc .logo {
            width: inherit;
          }
        #location-bar .location-input, #categories .categories-input {
          padding: 2px 2em 2px 1em;
        }
          #location-bar .location-input > span.text, #categories .categories-input > span.text {
            display: block;
            overflow-x: hidden;
            text-overflow: ellipsis;
          }
          #location-bar .location-input > span, #categories .categories-input > span {
            pointer-events: none;
          }
        #location-bar #location-suggestions .section {
          padding-top: 2em;
        }
        #location-bar #location-suggestions .section, #categories #categories-suggestions .section {
          height: 100%;
          overflow-y: hidden;
        }
          #location-bar #location-suggestions .section .content, #categories #categories-suggestions .section .content {
            height: 100%;
            overflow-y: scroll;
          }
            #location-bar #location-suggestions .section .content .location, #categories #categories-suggestions .section .content .category {
              cursor: pointer;
            }

      #location-bar.unfolded .location-input, #location-bar.folded.used .location-input, #categories.unfolded .categories-input, #categories.folded.used .categories-input {
        transition: all 200ms ease;
        background: #00c07f;
        color: white;
      }
    #location-bar .clear-location,
    #categories .clear-categories {
      margin-right: 1.1em;
      cursor: pointer;
      font-size: 1.5em;
      line-height: 1.1em;
      color: darkgrey;
      display: inline-block;
      margin-bottom: 9px;
      vertical-align: bottom;
      right: 0;
      position: absolute;
      color: #00c07f;
    }


.down-arrow {
  transition: all 200ms ease;
  position: absolute;
  top: calc(50% - 5px);
  right: 0.75em;
  content: '';
  width: 10px;
  height: 10px;
  margin: -2px 0 0 -5px;
  border-left: 2px solid #aaa;
  border-bottom: 2px solid #aaa;
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
  box-sizing: border-box;
}
  .unfolded .down-arrow, .folded.used .down-arrow {
    border-left-color: white;
    border-bottom-color: white;
  }