[data-controller=autocomplete] {

  .list-group {
    margin: 0;
    margin-bottom: 1px;
    padding: 0;
    max-height: 11rem; overflow-y: scroll;
  }

  .list-group-item {
    position: relative;
    display: block;
    padding: 0.75rem 1.25rem;
    background-color: #fff;
    border: 1px solid rgba(0,0,0,.125);
    border-top: none;

    &:hover {
      z-index: 2;
      color: #fff;
      background-color: #007bff;
      border-color: #007bff;
    }
  }

  .list-group-item.active {
    z-index: 2;
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
  }

  .list-group-item:first-child {
    border-top: 1px solid rgba(0,0,0,.125);
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }
}
/* Global HTML styles */

html {
  font-family: sans-serif;
  color: #373737;
}
body {
  margin: 1em;
}
hr {
  clear: both;
}
@font-face {
  font-family: pbc;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/pbc-1ec466f062f19b9dc89203a86818af2008852ac1d52cd1e1d34bca54a179d091.otf);
}
/* prevent iphone zooming on form elements*/
@media screen and (-webkit-min-device-pixel-ratio:0) { 
  input[type="color"],
  input[type="date"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="email"],
  input[type="month"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="text"],
  input[type="time"],
  input[type="url"],
  input[type="week"],
  select,
  select:focus,
  textarea,
  button {
    font-size: 16px;
  }
}
input, select {
  padding: 5px;
}
.button, input[type=button], input[type=submit], input[type=reset], button {
  min-width: 100px;
  border: none;
  font-size: 100%;
  cursor: pointer;
}

/* GLOBAL classes */

.strong {
  font-weight: bold;
}
.error, .red {
  color: red !important;
}
.shield {
  color: #0096FF;
}
.green {
  color: #68BC36;
}
.center {
  text-align: center;
}
.left {
  float: left;
}
.right {
  float: right;
}
.clear {
  clear: both;
}
.field_with_errors {
  display: inline;
  color: red;
}
.material-icons {
  vertical-align: bottom;
}
.disclosure {
  cursor: pointer;
}
.hidden {
  display: none;
}
.cancel {
  background: gray;
}
.highlight {
  font-weight: bold;
  font-style: italic;
}
ul.benefits {
  
}
ul.benefits li {
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.instructions {
  color: #666666;
  font-size: 0.9em;
}

/* LAYOUT */

.header_container {
  width: 100%;
  display: flex;
}
.header {
  background: #EBEBEB;
  display: flex;
  padding: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.logo, .home_logo {
  color: black;
}
.home_logo, .home_logo a {
  text-align: center;  
}
.logo i, .home_logo i {
  padding-right: 5px;
}
.logo a, .home_logo a {
  text-decoration: none;
  color: black;
}
.wordmark {
  display: inline-block;
  font-size: 2em;
  font-family: pbc;
}
.menu_container{
  flex: 1;
}
.user_menu {
  text-align: right;
  color: #666666;
}
.username {
  font-weight: bold;
  padding-bottom: 0.5em;
}
.usertype {
  font-style: italic;
  font-size: 0.9em;
}
ul.menu, ul.home_menu {
   list-style-type: none;
   padding: 0;
}
ul.home_menu {
  text-align: center;
}
ul.menu li, ul.home_menu li {
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.8em;
  text-align: center;
  padding-left: 5px;
  padding-right: 5px;
}
ul.menu a, ul.home_menu a {
  color: black;
  text-decoration: none;
}
.title {
  font-size: 1.5em;
  flex: 1;
}
.headline {
  display: block;
  text-align: right;
  font-size: 1em;
  align-content: center;
}
.content {
  margin: 1em;
}

/* HOME */

body.home {
  margin: 0;
}
a.home_button, a.footer_button, .button {
  text-decoration: none;
  color: white;
}
.home_container {
  background-image: url(/assets/pbc-f878c67ed5370037e768bb9db741fe4e2af4f432764f0bc60a9f0ad319d06e52.jpg);
  background-size: cover;
  padding-top: 2em;
  padding-bottom: 2em;
}
.left_buttons, .right_buttons {
  vertical-align: middle;
  display: inline-block;
  min-width: 300px;
}
.home_button, .footer_button, .button, input[type=button], input[type=submit], input[type=reset], button {
  color: white;
  background: linear-gradient(90deg,#3A8EED,#0096FF);
  padding: 10px;
  display: inline-block;
  text-align: center;
  border-radius: 10px;
}
.home_headline, .home h1 {
  font-size:1.7em;
  font-weight: 400;
  padding-top: 0.5em;
  margin: 0;
}
.home_subheadline, .home h2 {
  font-size: 1em;
  font-style: italic;
  padding-top: 1em;
  margin: 0;
}
.home h2 {
  padding-bottom: 0.5em;
}
.home_button {
  min-width: 50%;
  margin-top: 2em;
  margin-bottom: 2em;
  padding: 20px;
}
.footer_button {
  min-width: 25%;
  padding: 20px;
  margin-top: 2em;
  margin-bottom: 2em;
}
.home_heading {
  color: white;
  background-color: #666666;
  text-align: center;
  padding-bottom: 1em;
}
.home_text {
  width:70%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 2em;
  margin-bottom: 2em;
}
.callout {
  color: #666666;
  background-color: #DADADA;
  border-radius: 20px;
  padding: 20px;
}
.collapsable {
  background: #EBEBEB;
  border-radius: 20px;
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.collapsable h3 {
  margin: 0;
  cursor: pointer;
}
.disclosure {
  float: right;
}
.destructive {
  background: red !important;
}
.pagination {
  clear: both;
  padding-top: 2em;
  text-align: center;
}

/* POST form */

#post_headline, #post_message, #post_zip_str {
  width: 100%;
}
.categories {
  padding: 0;
  list-style: none;
}
.category {
  border: 1px solid lightgray;
  padding: 1em;
  margin-top: 1em;
  margin-bottom: 1em;
}
.category li a {
  width: 100%;
}
.category a {
  cursor: pointer;
}
.features {
  padding: 0;
  list-style: none;
}
.features li {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* POST & PROFILE */

#keywords {
  width: Calc(100% - 1em);
}
.expired {
  background: #FFFFBF !important;
}
.post_actions, .profile_actions {
  min-width: 25%;
  float: right;
  margin-top: 0.5em;
  text-align: right;
}
.post_actions .button, .profile_actions .button {
  margin-bottom: 1em;
}
.post_actions .instructions {
  margin-top: 0;
}
.post_item, .profile_item {
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  display: inline-block;
  width: 49%;
}
.post_label, .profile_label {
  font-weight: bold;
  width: 50px;
  display: inline-block;
}
.post_value, .profile_value {
  display: inline;
}
.post_message, .profile_message {
  margin-top: 1em;
  margin-bottom: 1em;
}
.post_headline, .profile_headline {
  font-size: 1.5em;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}
.post_summary {
  margin-top: 0.5em;
  margin-bottom: 1em;
}
.reply.button {
  margin-bottom: 0;
}
.quick_reply {
  z-index: 2;
  background: linear-gradient(180deg,white,#DADADA);;
  padding: 2em;
  position: absolute;
  right: 2em;
  left: 10%;
  border: 1px solid black;
}
.quick_reply .new_message textarea {
  min-height: 100px;
}
.quick_reply .new_message input[type="submit"] {
  margin-top: 1em;
  margin-bottom: 0;
}

/* PROFILE form */

.new_profile input[type="text"], .edit_profile input[type="text"] {
  width: Calc(100% - 1em);
}
.new_profile #profile_user_attributes_username, #profile_user_attributes_password, #profile_user_attributes_password_confirmation {
  width: inherit !important;
}
.profile_social input[type="text"] {
  width: Calc(100% - 4em);
}
.new_profile textarea, .edit_profile textarea {
  width: Calc(100% - 1em);
}
.social {
  width: 28px;
  height: 28px;
  vertical-align: middle;
  padding-right: 5px;
}

/* PROFILE view */

.profile_label {
  width: 100px;
}
.profile_headline {
  display: inline-block;
}
.profile_headline i {
  vertical-align: middle;
}
.profile_business {
  display: inline-block;
}
.profile_location {
  display: inline-block;
}

/* FAQ */

.faq_q {
  font-size: 1.1em;
  font-weight: 200;
  cursor: pointer;
}
.faq_a {
  font-size: 0.9em;
  padding-top: 1em;
  background: none;
  line-height: 1.5;
}
.faq .collapsable {
  background: none;
  border: 1px solid grey;
}

/* ABOUT */

.about p, .home p {
  line-height: 1.5;
  font-size: 0.9em;
}
.about li {
  line-height: 1.5;
  font-size: 0.9em;
}

/* DASHBOARD */

.dashboard_menu {
  padding: 0;
  padding-top: 1em;
  padding-bottom: 2em;
  text-align: center;
}
.dashboard_menu li {
  display: inline-flex;
  background: none;
  border: 1px solid lightgray;
}
.dashboard_menu li a {
  padding: 10px;
  padding-left: 20px;
  padding-right: 20px;
}
.dashboard_menu li:first-child {
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
  border-right: none;
}
.dashboard_menu li:last-child {
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  border-left: none;
}
.dashboard_menu li.active {
  background: linear-gradient(90deg,#3A8EED,#0096FF);
}
.dashboard_menu li.active a {
  color: white
}
.dashboard_menu li a {
  color: black;
  text-decoration: none;
}
.dashboard_menu_messages {
  position: relative;
}
.notifications {
  position:absolute;
  color: white;
  top: -10px;
  left: auto;
  right: -10px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  padding: 2px;
  line-height: 20px;
  text-align: center;
  font-size: 100%;
  background-color: red;
  border-radius: 50%;
}
.edit_user input[type="text"] {
  width: Calc(100% - 2em);
}
.edit_user textarea, .search_posts textarea, .search_profiles textarea {
  width: Calc(100% - 1em);
}
#user_username, #user_password, #user_password_confirmation {
  width: auto !important;
}

/* CONVERSATIONS */

.conversation_sender, .message_sender {
  clear: left;
  float: left;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  font-weight: bold;
}
.conversation_profile {
  font-weight: normal !important;
}
.conversation_time, .message_time {
  clear: right;
  float: right;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
}
.conversation_message, .message_body {
  clear: left;
  float: left;
  padding-top: 0.8em;
  padding-bottom: 0.8em;
}
.conversation_unread {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: blue;
  border-radius: 45px;
  margin-right: 5px;
}
.conversation_delete {
  clear: right;
  float: right;
  background: red;
  color: white;
  text-transform: uppercase;
  font-size: 0.7em;
  font-weight: bold;
  padding: 0.3em;
  text-decoration: none;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
.new_message textarea {
  width: 100%;
}
.new_message input[type="submit"] {
  margin-top: 1em;
  margin-bottom: 1.5em;
}
.message_sender {
  font-weight: bold;
  font-size: 0.9em;
}
.message_time {
  font-size: 0.9em;
}
.message_post {
  clear: left;
  float: left;
  font-size: 0.9em;
}

/* LOGIN & SIGNUP */

.heading, .benefits_heading {
  font-size: 1.6em;
}
.benefits_heading {
  text-decoration: underline;
}
.validation i {
  padding: 5px;
}

/* CONTACT */

.new_contact input[type="text"], .new_contact textarea {
  width: Calc(100% - 1em);
}

/* MOBILE styles */

@media only screen and (max-width: 767px) {
  .header_container {
    display: block;
  }
  .user_menu {
    width: 100%;
    display: flex;
  }
  .user_menu .usertype {
    padding-top: 0.1em;
    padding-left: 1em;
  }
  .headline {
    display: none;
  }
  a.right {
    margin-top: 1em;
    float: none;
  }
  #size_min, #size_max, #price_min, #price_max, #post_size_min, #post_size_max, #post_price_min, #post_price_max {
    width: 30%;
  }
  .post_headline {
    display: inline-block;
  }
  .post_item, .profile_item {
    width: 100%;
  }
}
/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *




 */
/*
 * CSS File of Material icons.
 * CSS code based on:
 * https://github.com/google/material-design-icons
 */




/* Use the font */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(/assets/material-icons-regular-d7f083631d2357fe2c2c75d353cb1d6deaceb0249e07d00a59f9cdffbbccf35a.woff2) format('woff2'),
       url(/assets/material-icons-regular-a9f2f380dd4aab1414f47620e68d9bf7d45cece149be7fec8a94e532e1660cb1.woff) format('woff');
}

/* Base class */
.material-icons,
.mi {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}
/* Rules for sizing the icon. */
.material-icons.md-18, .mi.md-18 { font-size: 18px; }
.material-icons.md-24, .mi.md-24 { font-size: 24px; }
.material-icons.md-36, .mi.md-36 { font-size: 36px; }
.material-icons.md-48, .mi.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark, .mi.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive, .mi.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light, .mi.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive, .mi.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Rules to rotate items */
.material-icons.r90, .mi.r90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.material-icons.r180, .mi.r180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.material-icons.r270, .mi.r270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}
.material-icons.flip-horizontal, .mi.flip-horizontal {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
  -webkit-transform: scale(-1, 1);
  -ms-transform: scale(-1, 1);
  transform: scale(-1, 1);
}
.material-icons.flip-vertical, .mi.flip-vertical {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
  -webkit-transform: scale(1, -1);
  -ms-transform: scale(1, -1);
  transform: scale(1, -1);
}