/**
* Copyright 2015 Google Inc. All Rights Reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
*      http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
html,
body {
  font-family: 'Roboto', 'Helvetica', sans-serif;
  margin: 0px;
  padding: 0px;
  background-color: #eee;
}

body > div > i {display: none !important;}

#cards .rating .material-icons {
  font-size: 16px;
}

#cards .details {
  color: #aaa;
  width: 100%;
  clear: both;
}

#cards .info {
  color: #666;
  display: inline-block;
  text-align: center;
}

#user-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    top    : 14px;
    width  : 100%;
    right  : 0;
    padding-left: 10px;
    justify-content: flex-end;
    padding-right: 10px;
}

#user-container #user-name {
    font-size: 16px;
    line-height: 36px;
    padding-right: 10px;
    padding-left: 20px;
    color: whitesmoke;
}
#user-container #sign-out {
    z-index: 10;
}
#user-container #sign-in {
    z-index: 10;
}

#user-container .mdc-button__label {
    color: whitesmoke;
}

aside .mdc-list-item {
  cursor: pointer;
  user-select: none;
}
.mdc-list-item__text {
  white-space: inherit;
}

aside .material-icons {
  color: #727272;
  font-size: 28px;
  position: relative;
  top: -2px;
  padding-right: 16px;
}

.mdc-dialog__body {padding-bottom: 7px;}

.back {float: left;}

#site-header, #filter {
  background-color: #3367D6;
  position: static;
}

#generic-header button {color: black;}

.location-card {
  cursor: pointer;
}
.location-card.mdc-card {
  width: 100%;
  margin-bottom: 20px;
}

.location-card .mdc-card__title {
  color: #fff;
  height: 176px;
  background-size: cover;
  background-position: center;
  padding: 0px;
}

.location-card .mdc-card__actions {text-align: right;}

.location-card .mdc-card__menu {color: #fff;}

.location-card h2 {
  /* float: left; */
  margin: 0px;
  text-align: center;
}

.location-card .price {
  float: right;
  position: relative;
  top: 17px;
  color: black;
}
.location-card .predict {
  background: lavender;
  padding-top    : 18px;
  padding-left   : 50px;
  padding-right  : 50px;
}
.location-card .collect {
  background: lightpink;
  padding-top    : 18px;
}
.location-card .collect .material-icons {
  font-size: 60px;
  font-weight: bolder;
  color: palevioletred;
}
.location-card .misstake {
  background: lightgray;
  padding-top    : 18px;
}
.location-card .misstake .material-icons {
  font-size: 60px;
  color: darkgray;
}

.location-card .mdc-card__supporting-text {
}

.location-card .rating {
  padding-bottom: 5px;
}

.location-card .comment {
  padding-bottom: 5px;
  font-size     : 0.8em;
  color         : palevioletred;
}
.location-card .presection {
  padding-bottom: 5px;
  font-size     : 0.8em;
}

header {display: flex !important;}

.mdc-layout__header--transparent {background: url('../assets/demos/transparent.jpg') center / cover;}

header .details {
  width: 100%;
  clear: both;
}

.content {padding: 10px;}

#review-card .content {padding: 10px;}

#filter {
  border-top-color: white;
  padding-top: 0px;
  padding-bottom: 10px;
  max-width: 1024px;
  margin: 0px auto;
}

.mdc-layout__header-row span {
  margin-left: 15px;
  margin-top: 17px;
}

.mdc-grid {
  max-width: 1024px;
  margin: auto;
}

.material-icons {
  position: relative;
  /*top: 8px;
  font-size: 36px;*/
}

.mdc-layout__header-row {
  padding: 0;
  margin: 0 auto;
}

.mdc-card__supporting-text {
  width: auto;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
}

#messages {
  overflow-y: auto;
  margin-bottom: 10px;
  height: calc(100% - 80px);
}

#message-filler {flex-grow: 1;}

.message-container:first-of-type {
  border-top-width: 0;
}

.message-container {
  /*display: block;
  margin-top: 10px;
  border-top: 1px solid #f3f3f3;
  padding-top: 10px;
  opacity: 0;
  transition: opacity 1s ease-in-out;*/
}

  .message-container.visible {
    opacity: 1;
  }

  .message-container .pic {
    background-image: url('/images/profile_placeholder.png');
    background-repeat: no-repeat;
    width: 30px;
    height: 30px;
    background-size: 30px;
    border-radius: 20px;
  }

  .message-container .spacing {
    display: table-cell;
    vertical-align: top;
  }

  .message-container .message {
    display: table-cell;
    width: calc(100% - 40px);
    padding: 5px 0 5px 10px;
  }

  .message-container .name {
    display: inline-block;
    width: 100%;
    padding-left: 40px;
    color: #bbb;
    font-style: italic;
    font-size: 12px;
    box-sizing: border-box;
  }

#message-form {
  display: flex;
  flex-direction: row;
  width: calc(100% - 48px);
  float: left;
}

#image-form {
  display: flex;
  flex-direction: row;
  width: 48px;
  float: right;
}

#message-form button,
#image-form button {
  width: 100px;
  margin: 15px 0 0 10px;
}

.mdc-card {min-height: 0;}

.mdc-card {
  background: linear-gradient(white, #f9f9f9);
  justify-content: space-between;
}

h3 {
  padding: 0px;
  margin: 0px;
}

#info {
  border-top-color: white;
}

  #info .content {}

header .mdc-button {
  float: right;
  /*background-color: white !important;*/
}

header .mdc-button .material-icons {
  font-size: 22px;
}

#show-filters {
  background-color: white;
  padding: 10px;
  border-radius: 3px;
  box-shadow: rgba(0, 0, 0, 0.4) 1px 1px 2px;
  cursor: pointer;
}

  #show-filters:hover {box-shadow: rgba(0, 0, 0, 0.4) 3px 3px 2px;}

#active-filters {
  color: #777;
  position: relative;
  top: -3px;
  left: 10px;
}

#active-filters .material-icons {
  font-size: 24px;
  position: relative;
  top: 5px;
  left: -4px;
}

main {
  max-width: 1024px;
  margin: 0px auto;
}

#rating .material-icons {
  color: #adadad;
}

#review-card .header {
  clear: both;
  width: 100%;
  height: 30px;
}

#review-card .author {
  float: left;
  font-size: 14px;
  color: #999;
}

#review-card .rating {
  float: right;
  position: relative;
  top: -10px;
}

#review-card #rating .material-icons {
  font-size: 20px;

}

#review-card .review {
  padding-bottom: 10px;
  border-bottom: 1px solid #ccc;
}

.mdc-textfield__label:after {background-color: #0288d1;}

.mdc-textfield--floating-label.is-focused .mdc-textfield__label {color: #0288d1;}

.mdc-button .material-icons {
  top: -1px;
  margin-right: 5px;
}

b.light {
  font-weight: normal;
  opacity: 0.5;
}

#dialog-add-review h4 {text-align: center;}

.star-input {
  text-align: center;
  margin-top: 16px;
  margin-bottom: 10px;
  user-select: none;
  cursor: pointer;
}

.mdc-dialog__actions {
  padding: 22px;
  display: inline-block;
  text-align: right;
}
.mdc-text-field__input {
    width: 100%; /*親要素いっぱい広げる*/
    padding: 10px 15px; /*ボックスを大きくする*/
    font-size: 16px;
    border-radius: 3px; /*ボックス角の丸み*/
    border: 2px solid #ddd; /*枠線*/
    box-sizing: border-box; /*横幅の解釈をpadding, borderまでとする*/
}

#site-header a {
  color: white;
  text-decoration: none;
}

#site-header .mdc-toolbar__icon--menu {
  font-size: 26px;
  margin-left: 10px;
  margin-right: 10px;
  padding-right: 0px;
  padding-left: 0px;
}

#site-header .mdc-toolbar__title {
  position: relative;
  top: -5px;
}

#site-header .mdc-toolbar__title {
  padding: 10px 0px 0px 0px;
  margin: 0px;
}

#site-header #title {
  padding-bottom: 0px;
  padding-top: 0px;
  max-width: 1024px;
}

#placeholder-config {
  padding: 20px;
  opacity: 0.8;
  font-size: 16px;
}

#placeholder-config .text {
  width: 100%;
  padding-bottom: 20px;
}

#placeholder-config .mdc-button__ripple-container {float: right;}

#guy-container {padding-top: 100px; text-align: center;}

#guy-container .mdc-button {background-color: #ccc;}

.guy {
  max-width: 200px;
  margin-bottom: 20px;
}

#no-results {
  margin-top: 170px;
}

#restaurant-header {
  padding-bottom: 30px;
}

#restaurant-header .content {
  padding-top: 246px;
}

#restaurant-header header {
  box-shadow: rgba(0, 0, 0, .2) 0px 2px 2px;
}

.material-icons#close {
  color: white;
  text-shadow: #000 1px 1px 2px;
  cursor: pointer;
  text-decoration: none;
  display: block;
  height: 50px;
  width: 100%;
}

#restaurant-header > header > .content {
  width: 100%;
  clear: both;
}

.fab-container {
  height: 0px;
}

.max_width_600 {
  max-width: 600px;
  margin: 0 auto;
  text-align: left;
}

#restaurant-header .info {
  height: 76px;
}

#restaurant-header .mdc-layout-grid {
  --mdc-layout-grid-margin-desktop: 0px 10px 0px 10px;
  --mdc-layout-grid-margin-tablet: 0px 10px 0px 10px;
  --mdc-layout-grid-margin-phone: 0px 10px 0px 10px;

  --mdc-layout-grid-gutter-desktop: 0px;
  --mdc-layout-grid-gutter-tablet: 0px;
  --mdc-layout-grid-gutter-phone: 0px;

  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+50,000000+99&0+50,1+100 */
  background: -moz-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.98) 99%,
    rgba(0, 0, 0, 1) 100%
  );
  /* FF3.6-15 */
  background: -webkit-linear-gradient(
    top,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.98) 99%,
    rgba(0, 0, 0, 1) 100%
  );
  /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 50%,
    rgba(0, 0, 0, 0.98) 99%,
    rgba(0, 0, 0, 1) 100%
  );
  /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#00ffffff', endColorstr='#000000', GradientType=0);
  /* IE6-9 */
}

.user_comment_list li {
  list-style-type : none;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #f3f3f3;
}

.fab .material-icons {
  position: relative;
  top: -11px;
  left: -11px;
}

aside textarea {
  width: 100%;
  box-sizing: border-box;
  height: 100px;
  resize: none;
  border-width: 1px 0px 1px 0px;
  padding: 10px;
}

aside textarea:focus {
  outline: none;
}