html,
body {
  height: 100vh;
  margin: 0;
  overflow-x: hidden;
}

.standardButton, .blueStandardButton, #listView, .standardButtonBreweryInfo {
  border-radius: 2px;
  border: 0.1px rgba(0, 0, 0, 0.493) solid;
  background-color: #f5f5f5;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
}

.blueStandardButton {
  width: 80%;
  font-weight: 400;
  background-color: #5fabed;
  color: white;
}

.standardShadow, .standardButton, .blueStandardButton, #listView, .standardButtonBreweryInfo, .filterChoice, #pinInfoContainer, #breweryPic, .filters:not(.active), .filters.active, .socialButtonMakePost, .cardFrame, .breweryCardFrame, .breweryProfilePod, .socialCardFrame, .dropdown-menu, .popupTemplateContainer {
  -webkit-box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.466);
          box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.466);
}

#searchbox {
  width: calc(100% - 12px);
  margin-left: 6px;
  margin-right: 6px;
}

.searchBar {
  margin-top: 6px;
  padding-bottom: 6px;
}

#listView {
  margin-right: 6px;
}

select {
  width: calc(100%);
}

.Filters select {
  text-align-last: center;
  padding-right: 10px;
  border-radius: 8px;
  margin-left: 0px;
  margin-right: 0px;
  border: transparent;
  background: url(http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/br_down.png) no-repeat right transparent;
  -webkit-appearance: none;
  background-position: right;
  font-weight: 600;
  font-size: .95rem;
}

@media only screen and (max-width: 500px) {
  .Filters select {
    font-size: .8rem;
  }
}

@media only screen and (max-width: 350px) {
  .Filters select {
    font-size: .70rem;
  }
}

option {
  padding-left: 30px;
}

select:focus-visible {
  outline: transparent;
}

.mainWindow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-flow: column;
          flex-flow: column;
  height: 100%;
  background-color: red;
}

.quenchedHeader {
  background-color: #e6e6e6;
  border-bottom: 0.5px solid rgba(0, 0, 0, 0.295);
  height: 40px;
  font-size: 1.5rem;
  font-weight: 700;
  padding-top: 1px;
}

.topOptionMenu {
  font-weight: 300;
  color: #5fabed;
}

#googleMap {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #f5f5f5;
  width: 100%;
}

.mapBreweryBlocks {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow: auto;
}

#mapListView, #searchListView {
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative;
  -ms-flex: 1;
      flex: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  background-color: #f5f5f5;
  width: 100%;
}

#searchListView {
  margin-top: 2px;
  margin-bottom: 2px;
}

.activeFrag {
  background-color: #f5f5f5;
  width: 100%;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 60px;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

.fragment {
  display: none;
}

.filterToggle {
  justify-items: center;
}

#filterToggle {
  margin-top: 3px;
}

.filterRow {
  margin-top: 4px;
}

.filterRow.first {
  margin-top: 0px !important;
}

.filterBar {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.filterChoice {
  font-size: .95rem;
  margin-left: 4px;
  margin-right: 4px;
  background-color: #51a2e5;
  padding: 2px;
  border: 3px #3b425c;
  border-style: outset;
  border-radius: 16px;
  text-align: center;
  color: white;
  font-weight: 600;
}

#filterSearchLoc {
  display: block;
  font-size: .7rem;
  padding-top: 2px;
  padding-bottom: 2px;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
}

.selectedNavBar {
  width: 100%;
  height: 3px;
  position: absolute;
  bottom: calc(60px - 3px);
  z-index: 10;
}

.selectedNavBar .Tab {
  background-color: transparent;
  vertical-align: middle;
}

.selectedNavBar .activeTab {
  background-color: #51a2e5;
  border-radius: 8px;
}

.BottomNavBar {
  position: absolute;
  width: 100%;
  height: 60px;
  bottom: 0;
  background-color: #e6e6e6;
}

.BottomNavBar .Navi {
  color: gray;
  line-height: 5px;
  vertical-align: middle;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.BottomNavBar .activeNav {
  color: #5fabed;
}

.banner {
  font-family: 'Pacifico', cursive;
  height: 400px;
  background-image: url("lemonade.jpg");
  border-top: 4px solid black;
  border-bottom: 4px solid black;
}

.banner .slogan {
  position: absolute;
  border: 4px solid black;
  top: 200px;
  left: 25%;
  width: 50%;
  height: 200px;
  background-color: #51a2e5;
}

.banner .slogan span {
  position: absolute;
  text-align: center;
  line-height: 200px;
}

.container {
  text-align: center;
  font-family: 'Pacifico', cursive;
}

.container .icon {
  display: inline-block;
  margin: 2%;
  border: 4px solid black;
  font-size: 32px;
  width: 300px;
  height: 300px;
}

/*--- PIN INFO POPUP -----------*/
#pinInfoContainer {
  position: absolute;
  display: none;
  float: left;
  bottom: 0;
  background-color: white;
  width: calc(100% - (2 * 6px));
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  z-index: 50;
  margin-left: 6px;
  margin-bottom: 6px;
  margin-right: 6px;
  border-radius: 16px;
}

#closePopupButton {
  position: absolute;
  right: 0px;
  top: 8px;
  border-radius: 20px;
  height: 30px;
  width: 30px;
  font-weight: 500;
  z-index: 1;
}

.standardButtonBreweryInfo {
  margin: 2px;
  margin-left: 0px;
  background-color: #e6e6e6;
  width: calc(100% - 4px);
}

#closeInfoContainer {
  position: absolute;
  z-index: 300;
  font-size: 35px !important;
  right: 3;
  top: 3;
  color: black;
}

#Brewery {
  display: inline-block;
  width: calc(100%);
  white-space: nowrap;
  line-height: 1.4rem;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
}

#breweryPic {
  max-height: calc(100% - 8px);
  max-width: calc(100% - 4px);
  border-radius: 16px;
  margin-top: 4px;
  margin-right: 4px;
  margin-bottom: 4px;
  -o-object-fit: cover;
     object-fit: cover;
}

@media only screen and (min-width: 992px) {
  #breweryPic {
    max-width: calc(100%);
    width: 100%;
    height: 350px;
    border-bottom-left-radius: 0px;
    border-bottom-right-radius: 0px;
  }
}

#Address {
  display: inline-block;
  width: calc(100%);
  font-size: .8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#AddressExtra, #Website {
  font-size: .8rem;
  display: none;
}

.pinInfoCol {
  margin-top: 6px;
  margin-left: 6px;
}

.pinfInfoFilters {
  margin-top: 2px;
  padding-right: 4px;
  margin-bottom: 4px;
  width: 100%;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: nowrap;
  flex-wrap: wrap;
}

.pinfInfoFilters .filterChoice {
  -webkit-box-shadow: none;
          box-shadow: none;
  border: 1px solid black;
  line-height: 1rem;
  margin-left: 0px;
  padding: 0px;
  padding-left: 2px;
  padding-right: 2px;
  margin: 1px;
  font-size: .7rem;
  display: inline-block;
}

/*---  QUENCHED dropdown menu ----------------*/
.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #d5f0ff;
  width: calc(100% - 6px - 6px);
  margin-left: 6px;
  margin-right: 6px;
  overflow: auto;
  -webkit-box-shadow: 0px 8px 30px 0px #040000;
          box-shadow: 0px 8px 30px 0px #040000;
  z-index: 1;
}

.dropdown-content a {
  color: red;
  background-color: lightpink;
  font-weight: 500;
  height: 35px;
  border-style: groove;
  border-color: #d5f0ff;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  padding: 0px;
  border-width: 2px;
}

.dropdown-content a:hover {
  cursor: pointer;
  font-weight: 500;
  border-width: 6px;
}

.dropdown-content button {
  font-size: small;
  color: black;
  background-color: #d5f0ff;
  padding: 6px 6px;
  text-decoration: none;
  display: block;
  border-width: 6px;
  border: 6px solid #d5f0ff;
}

.dropdown button:hover {
  background-color: #4fbbfa;
  color: white;
  border-color: #d5f0ff;
  border-style: groove;
  border-width: 6px;
}

.show {
  display: block;
}

/*---- FILTER BUTTONS ------*/
.filterChoice {
  font-size: .95rem;
  margin-left: 4px;
  margin-right: 4px;
  background-color: #51a2e5;
  padding: 2px;
  border: 2px #3b425c;
  border-style: outset;
  border-radius: 16px;
  text-align: center;
  color: white;
  font-weight: 600;
}

@media only screen and (max-width: 500px) {
  .filterChoice {
    font-size: .8rem;
  }
}

@media only screen and (max-width: 350px) {
  .filterChoice {
    font-size: .75rem;
  }
}

.filters:not(.active) {
  background-color: #f5f5f5;
  border: 2px #3b425c;
  border-style: outset;
  color: black;
  white-space: nowrap;
  padding: 1px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 2px;
  text-align: center;
  font-size: .95rem;
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 16px;
  font-weight: 600;
}

@media only screen and (max-width: 500px) {
  .filters:not(.active) {
    font-size: .8rem;
    margin-left: 2px;
    margin-right: 2px;
  }
}

@media only screen and (max-width: 350px) {
  .filters:not(.active) {
    font-size: .70rem;
  }
}

.filters.active {
  background-color: #5fabed;
  color: white;
  border: 2px #3b425c;
  border-style: inset;
  white-space: nowrap;
  padding: 1px;
  padding-left: 4px;
  padding-right: 4px;
  padding-bottom: 2px;
  text-align: center;
  font-size: .95rem;
  margin-left: 4px;
  margin-right: 4px;
  border-radius: 16px;
  font-weight: 600;
}

@media only screen and (max-width: 500px) {
  .filters.active {
    font-size: .8rem;
    margin-left: 2px;
    margin-right: 2px;
  }
}

@media only screen and (max-width: 350px) {
  .filters.active {
    font-size: .70rem;
  }
}

/****
SOCIAL PAGE
*******/
#socialPostsContainer {
  overflow: hidden;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative;
}

#socialPosts {
  position: absolute;
  margin-top: 4px;
  padding-top: 2px;
  padding-left: 6px;
  padding-right: 6px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 2px;
  overflow: auto;
}

.socialTitle {
  margin: 6px;
  font-size: 24px;
  font-weight: 600;
}

.socialButtonHolder {
  margin-left: 6px;
  margin-right: 6px;
  border: 1px solid black;
  padding-right: 8px;
  width: 100%;
  border-radius: 8px;
}

.socialSortButton {
  white-space: nowrap;
  overflow: hidden;
  margin-left: 6px;
  margin-right: 6px;
}

@media only screen and (max-width: 460px) {
  .socialSortButton {
    font-size: .85rem;
    line-height: 1.5rem;
  }
}

@media only screen and (max-width: 380px) {
  .socialSortButton {
    font-size: .7rem;
    line-height: 1.5rem;
  }
}

.socialButtonMakePost {
  margin-left: 6px;
  margin-right: 6px;
  border: 1px solid black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 8px;
}

.activeSort {
  font-weight: 500;
  color: #5fabed;
}

/*****************************
SOCIAL CARDS
***************************/
.cardFrame {
  margin: 6px;
  margin-top: 0px;
  margin-left: 0px;
  margin-right: 0px;
  background-color: white;
  border-radius: 8px;
}

.cardImage {
  height: 340px;
  overflow-x: hidden;
}

.cardImage > img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 500px) {
  .cardImage {
    height: -webkit-fit-content;
    height: -moz-fit-content;
    height: fit-content;
  }
  .cardImage > img {
    -o-object-fit: contain;
       object-fit: contain;
    height: initial;
  }
}

.cardHeader {
  padding: 2px;
  padding-left: 6px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1;
          flex: 0 1;
  font-weight: 400;
}

.cardFooter {
  padding: 4px;
  padding-left: 6px;
  -webkit-box-flex: 0;
      -ms-flex: 0 1;
          flex: 0 1;
  font-weight: 500;
}

.socialBreweryName {
  padding-left: 4px;
  line-height: 1.1rem;
}

.socialBreweryLocation {
  padding-left: 4px;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1rem;
}

.socialBreweryDistance {
  font-size: .75rem;
  font-weight: 400;
  line-height: .6rem;
  padding-bottom: 2px;
  padding-right: 2px;
}

/*****************************
BREWERY CARDS
***************************/
.mapBreweryBlocks {
  padding-left: 6px;
}

.breweryCardFrame {
  overflow: hidden;
  margin-top: 0px;
  height: calc(100% - 8px);
  margin: 6px;
  margin-left: 0px;
  background-color: white;
  border-radius: 8px;
}

.breweryCardImage {
  height: 160px;
  overflow: hidden;
}

.breweryCardImage > img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 500px) {
  .breweryCardImage {
    height: 320px;
  }
}

.breweryCardFooter {
  padding: 4px;
  padding-left: 6px;
  height: 20%;
  font-weight: 500;
}

.breweryBreweryName {
  display: inline-block;
  width: calc(100%);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 4px;
  padding-right: 4px;
  line-height: 1.1rem;
}

.breweryBreweryLocation {
  padding-left: 4px;
  padding-right: 4px;
  font-size: .75rem;
  font-weight: 400;
  line-height: 1rem;
}

/***********************
SEARCH FRAGMENT
***********************/
.searchNavBar {
  width: 100%;
  height: 30px;
  line-height: 30px;
  background-color: #f5f5f5;
  font-weight: 400;
}

.searchNavBar .searchNavi {
  color: gray;
  vertical-align: middle;
  text-align: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.searchNavBar .activeSearchNav {
  color: black;
}

.breweryProfilePanel {
  width: 100%;
}

.searchNavSelected {
  width: 100%;
  height: 3px;
  margin-bottom: 8px;
}

.searchNavSelected .activeSearchOption {
  border-radius: 8px;
}

.searchNavSelected .activeSearchOption.active {
  background-color: #5fabed;
}

.searchFilterBar {
  -webkit-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

.favoritesTitle {
  line-height: 1rem;
  font-weight: 500;
}

#searchByNameTab {
  padding: 19px;
  padding-left: 0px;
  padding-right: 0px;
}

#searchByNameTab > input {
  background-color: #ffffff;
  padding: 2px;
  padding-left: 8px;
  padding-right: 8px;
  width: 80%;
}

#searchWithFilterTab {
  display: none;
}

/**********************************
  B R E W E R Y - P R O F I L E
*********************************/
#BreweryProfile {
  position: absolute;
  left: 0;
  height: calc(100%);
  width: 100%;
  background-color: #f5f5f5;
  z-index: 9999;
}

#profileBrewery {
  display: inline-block;
  font-weight: 700;
  font-size: 1.0rem;
  white-space: nowrap;
  width: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (min-width: 500px) {
  #profileBrewery {
    font-size: 1.2rem;
  }
}

@media only screen and (min-width: 800px) {
  #profileBrewery {
    font-size: 1.4rem;
  }
}

#profileAD {
  background-color: white;
  height: 80px;
  text-align: center;
}

.breweryProfileScrollableContainer {
  height: 100%;
  overflow-y: scroll;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  position: relative;
}

#openBreweryFragment {
  overflow-y: unset;
}

.breweryProfileScrollable {
  padding-top: 2px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin-bottom: 2px;
  overflow: auto;
}

.breweryProfilePod {
  margin: 6px;
  border-radius: 8px;
  padding: 2px 8px;
  background-color: white;
}

#socialImagesWrapper {
  overflow: hidden;
  position: relative;
}

#socialImagesScroller {
  margin-right: -6px;
}

.socialCardFrame {
  overflow: hidden;
  margin-top: 0px;
  margin: 6px;
  margin-left: 0px;
  margin-bottom: 0px;
  background-color: white;
  border-radius: 8px;
}

.socialCardImage {
  height: 140px;
  overflow: hidden;
}

.socialCardImage > img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 800px) {
  .socialCardImage {
    height: 250px !important;
  }
}

.myhr {
  background-color: rgba(0, 0, 0, 0.433);
  height: 1px;
}

.image-slider-wrapper {
  position: relative;
  width: 100%;
}

.sliderLeft {
  top: 40%;
  padding: 7px 0px;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  left: 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 0px 8px 8px 0px;
}

.sliderRight {
  top: 40%;
  padding: 7px 0px;
  color: rgba(255, 255, 255, 0.7);
  position: absolute;
  right: 0;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 8px 0px 0px 8px;
}

#image_slider {
  height: 200px;
  overflow: hidden;
}

#image_slider > img {
  display: none;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  height: 100%;
}

@media only screen and (min-width: 500px) {
  #image_slider {
    height: 500px;
    width: 100%;
  }
  #image_slider > img {
    -o-object-fit: contain;
       object-fit: contain;
  }
}

#image_slider .activeSlide {
  display: block !important;
}

@media only screen and (min-width: 650px) {
  .profileFilters {
    font-size: .9rem !important;
    padding-bottom: 2px !important;
    width: 20%;
  }
}

@media only screen and (min-width: 500px) {
  .breweryProfileButtons > img {
    margin-top: 2px;
    margin-left: 5px;
    height: 30px;
  }
}

@media only screen and (min-width: 700px) {
  .breweryProfileButtons > img {
    margin-top: 4px;
    margin-left: 12px;
    height: 40px;
  }
}

.backpageButton {
  line-height: 40px !important;
  position: relative !important;
  font-weight: 900 !important;
  font-size: 45px !important;
  left: -7;
}

.lyftButton {
  background-color: purple;
  color: white;
  padding: 5px 10px !important;
  margin-top: 5px;
  margin-left: 5px;
  border-radius: 10px;
  border: unset;
}

.uberButton {
  margin-top: 5px;
  background-color: black;
  color: white;
  padding: 5px 10px !important;
  border-radius: 10px;
  border: unset;
}

/***********************************
S E A R C H  R E S U L T S
***********************************/
#seachResultsHolder {
  padding-left: 6px;
}

/***********************************
IMAGE PANEL
***********************************/
#imageClick {
  display: block;
  position: absolute;
  background: #1f1f1f;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#imageClick img {
  width: 100vw;
  height: 100vh;
  padding: 0;
  display: block;
  margin: 0 auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/***********************************
LOGIN PANEL
***********************************/
#loginPanel {
  display: block;
  position: absolute;
  background: white;
  border: 3px black ridge;
  z-index: 9999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 0px;
  font-size: 1rem;
  font-weight: 500;
}

#loginPanel input {
  width: 100%;
}

#loginPanel .ten {
  min-height: 10%;
}

#loginPanel .five {
  min-height: 5%;
}

#loginPanel #startExploring {
  position: absolute;
  bottom: 60;
  width: 80%;
  margin-left: 10%;
  margin-right: 10%;
}

.profileLoggedInPic {
  height: 100%;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.errorText {
  font-size: .75rem;
  color: red;
}

.fragmentPopup {
  z-index: 9000;
}

.popopActive {
  background-color: #f5f5f5;
  width: 100%;
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
  margin-bottom: 0;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  overflow-y: scroll;
  height: 100%;
}

.vertical-scrollable > .row {
  position: absolute;
  top: 120px;
  bottom: 100px;
  left: 180px;
  width: 50%;
  overflow-y: scroll;
}

.popupTemplateContainer {
  border-radius: 8px;
  border: 1px solid black;
  padding: 10px;
  z-index: 99999;
  position: absolute;
  top: 10%;
  bottom: 10%;
  left: 10%;
  right: 10%;
  background-color: #f5f5f5;
}

@media only screen and (min-width: 600px) {
  .popupTemplateContainer {
    top: 20%;
    bottom: 20%;
    left: 20%;
    right: 20%;
  }
}

@media only screen and (min-width: 1000px) {
  .popupTemplateContainer {
    top: 20%;
    bottom: 20%;
    left: 30%;
    right: 30%;
  }
}

@media only screen and (min-width: 1200px) {
  .popupTemplateContainer {
    top: 20%;
    bottom: 20%;
    left: 35%;
    right: 35%;
  }
}

.popupTitle {
  font-size: 1.5rem;
  padding-bottom: 15px;
  margin-bottom: 10px;
  color: #5fabed;
  font-weight: 700;
  border-bottom: 1px solid black;
  line-height: 1.4rem;
}

.popupLabel {
  text-align: right;
}

.popupInput {
  text-align: center;
}

.popupCancel {
  margin-left: 10px;
  margin-bottom: 10px;
  margin-right: 10px;
  font-weight: 500;
}

.popupConfirm {
  margin-left: 10px;
  margin-right: 10px;
  margin-bottom: 10px;
  font-weight: 500;
}

.popupButtons {
  width: 100%;
  position: absolute;
  bottom: 0;
}

.helpText {
  font-size: .95rem;
  line-height: 1.2rem;
}

.blogPostNotes {
  font-size: .8rem;
  line-height: 1rem;
}

.blogPostFilter {
  margin-left: -15px;
  margin-right: -15px;
}

.blogPostFilter .filters {
  font-size: .7rem !important;
  margin-left: 1px;
  margin-right: 1px;
}

/*the container must be positioned relative:*/
.autocomplete {
  position: relative;
  display: inline-block;
}

.autocompleteSearch {
  position: relative;
  display: inline-block;
  width: 100%;
}

#myInputSearch {
  width: 100%;
}

.searchPanelNameHolder {
  width: 80%;
  color: #5fabed;
  font-weight: 400;
}

.autocomplete-items {
  position: absolute;
  border: 1px solid #d4d4d4;
  border-bottom: none;
  border-top: none;
  z-index: 99;
  /*position the autocomplete items to be the same width as the container:*/
  top: 100%;
  left: 0;
  right: 0;
}

#makeBlogPostImage {
  max-height: 200px;
  -o-object-fit: scale-down;
     object-fit: scale-down;
}

.autocomplete-items div {
  font-size: 1rem;
  font-weight: 400;
  padding: 5px;
  cursor: pointer;
  background-color: #fff;
  border-bottom: 1px solid #d4d4d4;
}

/*when hovering an item:*/
.autocomplete-items div:hover {
  background-color: #e9e9e9;
}

/*when navigating through the items using the arrow keys:*/
.autocomplete-active {
  background-color: DodgerBlue !important;
  color: #ffffff;
}
/*# sourceMappingURL=main.css.map */