/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS 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/SCSS
 * 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.
 *
 *= require_tree .
 *= require_self
 */


 ::-webkit-scrollbar {
     width: 12px;
 }

 ::-webkit-scrollbar-track {
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
     border-radius: 10px;
 }

 ::-webkit-scrollbar-thumb {
     border-radius: 10px;
     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
 }

  body {
    font-family: 'Abel', sans-serif;
  }

 .content {
   height: 100%;
 }

 .map {
   width: 500px;
   height: 500px;
   float: left;
   position: relative;
 }

 .reviews {
   float: left;
 }

 .review-form {
   float: left;
 }

 .bench-index-item {
   border: 1px solid black;
   width: 100%;
   margin-bottom: 5px;
   box-sizing: border-box;
   display: flex;
   justify-content: space-between;
 }

 .bench-index-item img {
   height: 200px;
   max-width: 130px;
 }

 .user-pane {
   display: flex;
   justify-content: center;
 }

 .right-half {
   width: 400px;
   margin-left: 50px;
   margin-top: 40px;
   height: 480px;
   overflow-y: scroll;
   padding: 0 20px 20px 20px;
 }

 .right-half.bench-details {
   display: flex;
   flex-direction: column;
   margin-top: 20px;
 }

 .index-item-info {
   margin: 10px 10px 10px 10px;
   display: flex;
   flex-direction: column;
   justify-content: center;
 }

 .index-item-category {
   font-weight: bold;
 }

 .index-item-copy {
   margin-left: 15px;
 }

 header {
   margin-left: 5%;
 }

 h1, h5 {
   margin-bottom: 0px;
 }

 .single-bench-show {
   display: flex;
   justify-content: center;
   margin-top: 20px;
 }

 .single-bench-map {
   display: flex;
   flex-direction: column;
 }

 .bench-list {
   padding-left: 0;
   list-style-position: inside;
   margin-top: 0;
 }

 .index-image {
   max-height: 200px;
   max-width: 100px;
 }

 .review-button, .review-form {
   width: 100px;
   margin-top: 20px;
 }

 .review-button {
   /* padding-top: 1px; */
 }

 .header-name {
   margin: 7px 0 0 0;

 }

 .header-favorites {
   margin: 4px 0 4px 0;
   font-size: 14px;
 }

 .new-bench-container {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin-top: 50px;
 }

 .new-bench-form {
   display: flex;
   flex-direction: column;
   width: 300px;
   outline: black 1px solid;
   padding: 5px 30px 10px 30px;
 }

 .new-bench-title {
   text-align: center;
 }

 .new-bench-button {
   margin: 5px;
 }

 input.bench-field {
   margin: 10px;
   padding: 2px;
 }

 label.bench-field {
   width: 125px;
   display: inline-block;
 }

 .button-holder {
   display: flex;
   align-items: center;
   flex-direction: column;
 }

 input.new-bench-button {
   width: 160px;
   margin-top: 10px;
 }

 button.new-bench-button {
   width: 160px;
 }

 .login-form-container {
   display: flex;
   justify-content: center;
   margin-top: 100px;
 }

 .login-form {
   display: flex;
   justify-content: center;
   flex-direction: column;
 }

 .login-input {
   margin-left: 20px;
 }

 .login-form-box {
   outline: 1px solid black;
   padding: 20px;
 }

 .filter {
   font-weight: bold;
 }

 .header-link {
   text-decoration: none;
   color: black;
 }

 hr {
   border-bottom: 1px solid grey;
 }

 .session-submit {
   text-transform: capitalize;
 }
