:root {
  --color-success: #155724;
  --color-warning: #721c24;
  --color-dark: (50, 50, 50, 0.82);
  --color-selected: #F2f2f2;
  font-family: "Roboto";
}

#page-content-wrapper {
  min-width: 100vw;
}

#sidebar-wrapper {
  position: fixed;
  z-index: 1002;
  overflow: hidden;
  background-color: #FDFDFD;
  
}#sidebar-wrapper .list-group {
  width: 100%;
}

#sidebar-heading {
  position: fixed;
  z-index: 1003;
  padding: .5rem;
  background-color: ghostwhite;
  -webkit-box-shadow: 0px 1px 3px 0px rgba(68,68,68,0.7);
  -moz-box-shadow: 0px 1px 3px 0px rgba(68,68,68,0.7);
  box-shadow: 0px 1px 3px 0px rgba(68,68,68,0.7);
}

#map-list-wrapper {
  height: 100%;
}

.result-count-container, .zero-results {
  font-size: 0.9rem;
  font-weight: 500;
}

.filter-badge {
  margin-left: 4px; 
  margin-right: 4px;
}

.remove-badge {
  font-size: 1rem;
  vertical-align: middle;
  margin-left: 4px;
  font-weight: bold;
} .remove-badge:hover {
  color: var(--color-warning);
  cursor: pointer;
}

.hidden {
  display: none;
}

.legend {
  line-height: 18px;
  color: #555;
  background-color: rgba(255,255,255,.8);
  border: 1px solid whitesmoke;
  padding: 3px;
  border-radius: 8px;
}

.margin-transition {
  -webkit-transition: margin .25s ease-out;
  -moz-transition: margin .25s ease-out;
  -o-transition: margin .25s ease-out;
  transition: margin .25s ease-out;
}

.filter-card {
  padding-bottom: 0;
  overflow-x: hidden;
}

.header-dark {
  color: var(--color-dark);
  margin-bottom: 16px;
  font-size: 2em;
  font-weight: 400;
}

.main-content {
  padding: 24px 12px;
}

.main-card {
  box-shadow: 0px 0px 2px 0px rgba(100,100,100,0.75);
}


/* Text colors */
.color-success {
  color: var(--color-success);
}

.color-warning {
  color: var(--color-warning);
}

.color-dark {
  color: var(--color-dark);
}


/* nav styles */
.nav-link, .nav-item {
  transition: .2s ease-in-out;
}
.nav-item:hover {
  line-height: inherit !important;
  font-size: inherit !important;
  letter-spacing: 0.5px;
}


.no-results-container {
  margin-top: 3rem;
  width: 100%;
  text-align: center;
  color: var(--color-dark);
}
.no-results-message {
  font-size: 1.75rem;
}
.no-result-icon {
  font-size: 84px !important;
}

.select-default {
  padding: .375rem .75rem;
  border-radius: 4px;
  background-position-x: 94%;
}

.menu-button {
  background: none;
  padding: 4px 12px;
  margin-bottom: 0;
}
.toggle-icon {
  font-size: 32px !important;
  color: #ffab0f;
}
.toggle-label {
  display: block; 
  margin-top: -8px; 
  color: #f4e7d7;
  font-size: 12px;
  font-weight: bold;
}

/*  */
.top-label {
  justify-content: start;
  font-weight: 500;
  color: rgba(0,0,0,0.82);
}
@media (min-width: 576px) {
  .form-inline label { 
    justify-content: start;
  }
}

/* Mobile styles */
@media (max-width: 768px) {
  #alert-bar {
    position: fixed;
    z-index: 10000;
  }
  .navbar-header {
    font-size: 1.1rem !important;
    max-width: 35vw;
  }

  .result-row-icon {
    padding-left: 0!important;
    text-align: center;
  } 

  #zip-search-button-container {
    text-align: center;
  }
  #zip-search {
    margin-top: 12px;
    text-align: center;
  }
  
  .header-dark {
    font-size: 1.15em;
    margin-bottom: 0;
  }
  .main-content {
    padding: 0;
  }

  .filter-card {
    padding: .5rem;
    z-index: 1000;
    -webkit-box-shadow: 0px 1px 3px 0px rgba(68,68,68,0.7);
    -moz-box-shadow: 0px 1px 3px 0px rgba(68,68,68,0.7);
    box-shadow: 0px 1px 3px 0px rgba(68,68,68,0.7);
  }
  
  .main-card {
    border: none;
    box-shadow: none;
  }

  #main-map { 
    min-height: 85vh;
    height: 100%;
    width: 100%;
    margin: 0 auto;
  }

  #sidebar-wrapper {
    height: calc(100vh - 64px);
  }
  .sidebar-toggleable {
    max-width: 100vw;
    min-width: 100vw;
    margin-left: 0;
  }

  .sidebar-toggleable.toggled {
    margin-left: -100vw!important;
  }
}


#filters-mobile {
  -webkit-box-shadow: 0px -1px 3px 0px rgba(68,68,68,0.7);
  -moz-box-shadow: 0px -1px 3px 0px rgba(68,68,68,0.7);
  box-shadow: 0px -1px 3px 0px rgba(68,68,68,0.7);
}

/* Non-mobile only styles */
@media (min-width: 768px) {
  .custom-select {
    min-width: 70%!important;
  }
  .filter-card {
    padding-left: 2.25rem;
  }

  #filters-toggle, #filters-mobile {
    display: none;
  }

  #page-content-wrapper {
    min-width: 0;
    max-width: 100vw;
    width: 100%;
  }

  #sidebar-wrapper {
    height: 100vh;
  }
  .sidebar-toggleable  {
    min-width: 35vw;
    max-width: 35vw;
  }
  .sidebar-toggleable.toggled {
    margin-left: -35vw;
  }

  #main-map { 
    min-height: 70vh;
    height: 100%;
    width: 95%;
    margin: 0 auto;
    margin-bottom: 16px;
  }

  .main-content {
    margin-top: 54px;
  }
}

#map-results-list {
  overflow-y: scroll;
  overflow-x: hidden;
  max-height: 100%;
}

#map-results-list .result-list-item-container {
  border-bottom: 1px solid lightgray;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
}
#map-results-list .result-list-item-row {
  width: 100%;
  margin-bottom: 4px;
}

#map-results-list .result-list-item-container:hover {
  cursor: pointer;
  background-color: var(--color-selected);
}

.result-row-icon {
  padding-left: 24px;
}

.background-selected {
  background-color: var(--color-selected);
}

/* navbar */
#nav-desktop, #nav-mobile {
  z-index: 1010;
  position: fixed;
  width:100%;
}

#nav-mobile {
  bottom: 0;
}


/* filters */
#filters-toggle {
  margin-bottom: 0;
}
.filters-applied {
  position: absolute;
  width: 100%;
  border-radius: 1px solid lightgray;
}
#filters-mobile {
  position: fixed;
  background-color: white;
  width: 100%;
  padding: 8px 8px 48px 8px;
  bottom: 48px;
  z-index: 1005;
  transition: .3s ease-in-out;
}

#filters-mobile.toggled {
  bottom: -500px;
}

a[href^="tel:"]:before {
  content: "\260e";
  margin-right: 0.5em;
}


/* leaflet overrides */
.leaflet-bottom {
  z-index: 998 !important;
}

.leaflet-marker-icon {
  width: 24px !important;
  height: 24px !important;
}