@-webkit-viewport {
  width: device-width;
}

@-moz-viewport {
  width: device-width;
}

@-ms-viewport {
  width: device-width;
}

@-o-viewport {
  width: device-width;
}

@viewport {
  width: device-width;
}

body {
  margin-bottom: 0;
}

#footer {
  position: static;
  width: 100%;
}

.jumbotron a {
  color: #FFF;
}

#selectionTab {
  margin-left: 0;
  margin-right: 0;
  list-style: none;
  padding: 0;
}

  #selectionTab li {
    list-style: none;
    margin: 0;
    padding: 0;
  }

    #selectionTab li a {
      display: block;
      text-align: center;
      color: #000;
      padding: 10px 0;
      border: solid 1px #ccc;
      margin-right: 1px;
    }

      #selectionTab li.active a, #selectionTab li a:hover {
        background: #000;
        color: #fff;
      }

/*************************************** Basic seach and Advanced search ***************************************/

.search {
  margin: 20px 15px;
}

  .search .nav-tabs li a {
    background: #000;
    color: #FFF;
    border: none;
    border-right: solid 1px #FFF;
    margin-right: 0;
    border-radius: 0;
    font-weight: normal;
    font-size: 12pt;
  }

  .search .nav-tabs li.active a {
    background: #f7f7ff;
    color: #000;
    border: none;
  }

  .search .tab-content {
    margin: 0;
  }

  .search label {
    font-weight: normal;
    margin: 0;
  }

  .search .sc-checkboxes {
    overflow: visible;
  }

.checkbox-inline label {
  font-weight: normal;
}

.bootstrap-select:not([class*="span"]):not([class*="col-"]):not([class*="form-control"]):not(.input-group-btn) {
  width: 100%;
}

.form-horizontal .form-group {
  margin: 10px 0 0 0;
}

.col-buttons {
  margin: 0;
  padding: 0;
}

.search .btn-group .btn {
  background: #000;
  color: #FFF;
}

.search .btn-group .btn-primary {
  background: #f7f7ff;
  color: #000;
  border: solid 1px #f7f7ff;
}

.search .search-form {
  background: #f7f7ff;
  padding: 15px;
}

  .search .search-form span.input-group-addon {
    background: none;
  }

  .search .search-form form .btn-group .btn-primary {
    background: #2984bd;
    color: #FFF;
  }

  .search .search-form .bootstrap-select {
    width: 160px !important;
  }

    .search .search-form .bootstrap-select .btn {
      background: #FFF;
      border: solid 1px #CCC;
      color: #000;
    }

  .search .search-form .buttonPanel {
    padding: 5px;
    margin: 0;
    text-align: center;
  }

.search .left-panel {
  padding-right: 0;
  height: 600px;
}

.search .right-panel {
  padding-left: 0;
  height: 600px;
}

  .search .left-panel .header, .search .right-panel .header {
    background: #2984bd;
    height: 30px;
  }

.search #map {
  width: 100%;
  height: 600px;
  background: #F00;
}

.search .results {
  width: 100%;
  height: 600px;
  background: #e5e5e5;
  overflow-y: scroll;
}

.searchBoxWrapper {
  padding: 0;
}

#selectionTab,
#selectionDropDown,
#searchBtnWrapper {
  margin-top: 20px;
}

#searchBtnWrapper,
#selectionDropDown {
  margin-bottom: 20px;
}

/* override radius to make buttons appear "flat" */
.nav-pills > li > a,
.btn,
.dropdown-menu,
input {
  border-radius: 0px !important;
}

/* override nav pills button color to match home page b/w theme */
.nav-pills > li.active > a,
.nav-pills > li.active > a:hover,
.nav-pills > li.active > a:focus {
  color: #fff;
  background-color: #000;
}

.nav-pills > li > a {
  border: 1px solid #ddd;
  margin-left: 1px;
  margin-right: 1px;
  color: #000;
}

  .nav-pills > li > a:hover,
  .nav-pills > li > a:focus {
    color: #fff;
    background-color: #000;
    text-decoration: underline;
  }

/* remove padding so it's the same width as the text well above */
.tabWrapper,
#searchBtnWrapper {
  padding-left: 0px;
  padding-right: 0px;
}

/* FOUC handle*/
select.selectpicker {
  display: none;
}

/* remove padding so it's the same width as the text well above */
.tabWrapper,
#searchBtnWrapper {
  padding-left: 0px;
  padding-right: 0px;
}

/* FOUC handle*/
select.selectpicker {
  display: none;
}

/* pointer to the link ! */
li > a {
  cursor: pointer;
}

/* Button panel at the end */
#buttonPanel {
  margin-top: 30px;
  margin-bottom: 25px;
}

.margin-bottom {
  margin-top: 0 !important;
  margin-bottom: 20px !important;
}

/* styling typeahead*/
.twitter-typeahead {
  width: 100%;
}

.input-group-btn {
  padding-bottom: 5px;
}

.tt-dropdown-menu {
  background-color: #ebebeb;
  border: 2px solid #428bca;
  border-top-color: transparent;
  padding: 5px;
  left: 30px !important;
}

/* do this so the suggest text is inline with typing text */
.tt-hint,
#formInput {
  padding-left: 10px;
}

.tt-cursor {
  box-shadow: 0 0 4px 1px #428bca;
}

.typeaheadCaption {
  font-size: 12pt;
  text-decoration: underline;
  margin-bottom: 2px;
}

/* help panel */
#btnHelp {
  float: right;
  display: none;
}

.highlight {
  padding: 10px;
  border-left: 3px solid #5bc0de;
}

  .highlight p {
    margin: 5px 0;
    padding: 0;
  }

.badge {
  background: #000;
}

.glyphicon {
  padding-bottom: 5px;
}

/*************************************** Details and Results ***************************************/

.breadcrumb {
  margin-top: 10px;
}

  .breadcrumb li {
    margin-right: 1px;
  }

.help-page {
  margin-top: 20px;
  padding: 0 15px;
}

  .help-page h4 {
    margin-top: 20px;
    border-bottom: solid 1px #CCC;
  }

/*************************************** Leaflet ***************************************/

.leaflet-left .leaflet-control {
  margin-left: 3px;
}

.leaflet-top .leaflet-control {
  margin-top: 3px;
}

.leaflet-marker-pane .leaflet-label {
  font-size: 9px;
  border-width: 1px;
}

.legend i {
  width: 10px;
  height: 10px;
  float: left;
  margin: 0px 8px;
  opacity: 1;
}

div.mapIcon > i.fa,
div.mapCatchment > i {
  padding-top: 5px;
}

div.mapColor > i.glyphicon {
  padding-top: 2px;
}

div.mapIcon > i.fa,
div.mapCatchment > i, 
div.mapColor > i.glyphicon {
  padding-left: 2px;
}

/* Leaflet legends */
.legend {
  line-height: 20px;
  color: white;
  background-color: transparent;
  min-width: 40px;
  min-height: 40px;
}

.legendIcon {
  font-size: 30px;
  color: #2C3E50;
}

  .legendIcon :hover {
    cursor: pointer;
  }

.mapIcon,
.mapColor,
.mapCatchment {
  display: none;
}

  .mapCatchment i {
    border-radius: 4px;
    width: 16px;
    height: 16px;
  }

  .mapCatchment .primary {
    border: solid 1px #FF5B00;
    background: #FF8B4D;
  }

  .mapCatchment .junior {
    border: solid 1px #30AF40;
    background: #5BD26B;
  }

  .mapCatchment .senior {
    border: solid 1px #4AC0F2;
    background: #79D0F6;
  }

/* Leaflet popups*/
.leaflet-popup-content-wrapper {
  overflow: hidden;
  text-overflow: ellipsis;
}

  .leaflet-popup-content-wrapper > div > div > div > div > a > span,
  #feature-info > div > div > div > a > span {
    color: #FFFFFF !important;
    padding-top: 2px;
  }

  .leaflet-popup-content-wrapper > div > div > div > div,
  #feature-info > div > div > div {
    padding: 4px 0px;
  }

#feature-info > div:nth-child(n+1):nth-child(-n+5) > div:nth-child(1) {
  font-weight: bold;
}

#feature-info > div:nth-child(n+1):nth-child(-n+5) {
  padding: 10px;
}

.nav-pills-left {
  border: solid 1px #CCC;
  padding: 5px;
}

#content-page h1 {
  padding-left: 0;
}

#toolbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background: #333;
  height: 40px;
  padding: 5px;
}

  #toolbar a {
    font-size: 24px;
    color: #FFF;
    margin: 0 8px;
  }




.media-description {
  text-align: left;
}

  .media-description h4 {
    cursor: pointer;
  }

  .media-description p {
    font-size: 12px;
  }

@media (max-width: 767px) {
  #selectionTab li a {
    padding: 5px;
    height: 50px;
  }
}

@media (min-width: 0) and (max-width: 767px) {
  #content-page {
    min-height: initial;
  }

    #content-page h1 {
      font-size: 14px;
    }

  /*dropdown menu*/
  .open > .dropdown-menu {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 70px;
  }
}

@media (min-width: 768px) {
  #content-page {
    min-height: 45px;
  }

    #content-page h1 {
      font-size: 28px;
    }

  /*dropdown menu*/
  .open > .dropdown-menu {
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 120px;
  }

  .extend-left {
    padding-left: 3px;
  }
    .extend-right {
    padding-right: 3px;
  }
}

/* fix the issue when screen resize drop scrollbar overlapse/overflow hidden viewport*/
.multiselect-container > li > a { white-space: normal; }

/* button overflow for when multiselect */
.btn-group > button {
  -ms-overflow-x: hidden;
  overflow-x: hidden;
}