body{
  width: 100%;
  height: 100%;
  margin: 0px;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
  font-size: 15px;
  font-weight: 300;
}

.my-material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  line-height: 1;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

#header{
  position: absolute;
  top: 0px;
  height: 30px;
  left: 0px;
  right: 0px;
  background-color: #F39800;
  font-size: 20px;
  color: white;
  padding: 10px 0 10px 0;
}

.mainTitle{
  margin-left: 16px;
  line-height: 30px;
}

.niceButton{
  background:0 0;
  border:none;
  border-radius:2px;
  color:#fff;
  position:relative;
  height:36px;
  margin:0;
  min-width:64px;
  padding:0 16px;
  display:inline-block;
  font-size:14px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0;
  overflow:hidden;
  will-change:box-shadow;
  transition:
  box-shadow .2s cubic-bezier(.4,0,1,1),
  background-color .2s cubic-bezier(.4,0,.2,1),
  color .2s cubic-bezier(.4,0,.2,1);
  outline:none;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
  line-height:36px;
  vertical-align:middle
}

.niceButton:hover{
  background-color:rgba(158,158,158,.2)
}

.niceButton:active{
  background-color:rgba(158,158,158,.4)
}

.niceButtonRaised{
  color: #000;
  background:rgba(158,158,158,.2);
  box-shadow:0 2px 2px 0 rgba(0,0,0,.14),
  0 3px 1px -2px rgba(0,0,0,.2),
  0 1px 5px 0 rgba(0,0,0,.12)
}

.niceButtonRaised:active{
  box-shadow:0 4px 5px 0 rgba(0,0,0,.14),
  0 1px 10px 0 rgba(0,0,0,.12),
  0 2px 4px -1px rgba(0,0,0,.2);
  background-color:rgba(158,158,158,.4)
}
.moreButton{
  display: block;
  color: #000;
}

.locButton{
  margin-left: 12px;
  margin-top: 5px;
  background: #fff;
  padding: 0px;
  font-size: 18px;
  line-height: 0px;
  text-align: center;
}
.locButton:hover{
  background:#e3e3e3;
}

.buttonList{
  display: block;
  background: #fff;
  margin-bottom: 16px;
}

.headerButton{
  float: right;
  height: 30px;
  line-height: 30px;
}

.headerIcon{
  float: right;
  line-height: 30px;
  cursor: pointer;
  margin-right: 16px;
}
.headerIcon:hover{
  background-color:rgba(158,158,158,.2);
}
.headerMenuIcon{
  float: right;
  line-height: 30px;
  cursor: pointer;
  margin-right: 16px;
}
.headerMenuIcon:hover{
  background-color:rgba(158,158,158,.2);
}
.errorButton{
  float: right;
  height: 40px;
  line-height: 40px;
}
#map {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
#map_loading {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
#map_loading_label {
  text-align: center;
  margin-bottom: 50px;
  font-family: sans-serif,"Helvetica","Arial";
  font-size: 15px;
  font-weight: 300;
}


#searchWrap{
  padding: 16px;
  background-color: white;
  height: auto;
}

.searchInput{
  display: block;
  background-color: #fff;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  height: 32px;
  width: auto;
  min-width: 50%;
  margin: auto;
  outline: none;
  border: none;
  border-bottom: 1px solid #e3e3e3;
}

#searchBarClose{
  float: left;
  line-height: 32px;
}

.markerPopup{
  padding: 8px;
}

.overlay{
  position: absolute;
  top: 50px;
  bottom: 0px;
  right: 0px;
  background: white;
  width: 200px;
  padding: 16px;
  overflow:auto;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.overlay p{
  margin: 0px;
  margin-top: 4px;
  margin-bottom: 8px;
}

#rightOverlayWarning{
  background: red;
  color: white;
  width: 100%;
  padding: 16px;
  margin-left: -16px;
  margin-top: -16px;
  margin-bottom: 8px;
}

.closeButton{
  cursor:pointer;
  float: right;
  color: #707070;
}

.rd_toolbar_item{
  cursor: pointer;
  margin-top: 4px;
}

.nextToIcon{
  position: absolute;
  line-height: 24px;
  margin-left: 8px;
}

.nextToSmallIcon{
  line-height: 18px;
  vertical-align: top;
  display: inline;
}

.kofolour{
  color: #F39800;
}

#bottomWrap{
  width: 100%;
  bottom: 0px;
  margin-top: 16px;
  margin-left: -16px;
}
.addedBy{
  color: #707070;
  font-size: 12px;
}
#rightDrawer_info{
  margin-top: 8px;
}
#rightDrawer_info ul{
  margin-top: 8px;
}
.report{
  float: left;
  color: #707070;
  font-size: 12px;
  margin-left: 16px;
  cursor: pointer;
  line-height: 18px;
}

#smallIcon{
  font-size: 18px;
}

#errorMessage{
  width: 100%;
  height: auto;
  position: fixed;
  left: 0px;
  bottom: 0px;
  animation-name: errorMessageAnimation;
  animation-duration: 0.5s;
  background: black;
  color: #F39800;
}

@keyframes errorMessageAnimation {
    from {bottom: -40px;}
    to {bottom: 0px;}
}

#errorMessage_text{
  display: inline-block;
  float: left;
  margin: 0px;
  margin-left: 16px;
  line-height: 40px;
  text-align: center;
}

#fab{
  position: absolute;
  bottom: 50px;
  right: 50px;

  border:none;
  font-size:1.5em;
  color:white;
  background-color: #F39800;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  margin: auto;
  cursor:pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.fabHint{
  position: absolute;
  bottom: 50px;
  right: 130px;

  width: 198px;
  height: 18px;
  padding: 16px;
  background: #FFFFFF;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
.fabHintAfter{
  content: '';
  position: absolute;
  border-style: solid;
  border-width: 10px 0 10px 10px;
  border-color: transparent #F39800;
  display: block;
  width: 0;
  right: -10px;
  top: 15px;
}
#fabHintClose{
  float: left;
  font-size: 18px;
  margin-right: 8px;
}
.fullscreen{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0px;
  left: 0px;
}
#createPopup{
  display: none;
}
#createPopup_loading{
  display: none;
  width: 100%;
  height: 100px;
}
#createPopup_loading_label{
  text-align: center;
  margin-bottom: 50px;
}

.sk-circle {
  margin: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  width: 40px;
  height: 40px;
  position: relative;
}
.sk-circle .sk-child {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.sk-circle .sk-child:before {
  content: '';
  display: block;
  margin: 0 auto;
  width: 15%;
  height: 15%;
  background-color: #333;
  border-radius: 100%;
  -webkit-animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
          animation: sk-circleBounceDelay 1.2s infinite ease-in-out both;
}
.sk-circle .sk-circle2 {
  -webkit-transform: rotate(30deg);
      -ms-transform: rotate(30deg);
          transform: rotate(30deg); }
.sk-circle .sk-circle3 {
  -webkit-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
          transform: rotate(60deg); }
.sk-circle .sk-circle4 {
  -webkit-transform: rotate(90deg);
      -ms-transform: rotate(90deg);
          transform: rotate(90deg); }
.sk-circle .sk-circle5 {
  -webkit-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
          transform: rotate(120deg); }
.sk-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg); }
.sk-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg); }
.sk-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg); }
.sk-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg); }
.sk-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg); }
.sk-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); }
.sk-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); }
.sk-circle .sk-circle2:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; }
.sk-circle .sk-circle3:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; }
.sk-circle .sk-circle4:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; }
.sk-circle .sk-circle5:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; }
.sk-circle .sk-circle6:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; }
.sk-circle .sk-circle7:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; }
.sk-circle .sk-circle8:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s; }
.sk-circle .sk-circle9:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s; }
.sk-circle .sk-circle10:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s; }
.sk-circle .sk-circle11:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s; }
.sk-circle .sk-circle12:before {
  -webkit-animation-delay: -0.1s;
          animation-delay: -0.1s; }

@-webkit-keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sk-circleBounceDelay {
  0%, 80%, 100% {
    -webkit-transform: scale(0);
            transform: scale(0);
  } 40% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

.placeHelp{
  font-size: 10px;
  color: black;
  display: inline-block;
}

.popup{
  background: white;
  max-width: 500px;
  height: auto;
  padding: 16px;
  margin: auto;
  margin-top: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.buttonAddWrap{
  height: 36px;
}

.floatRight{
  float: right;
}

.smallPopup{
  float: right;
  background: white;
  max-width: 500px;
  height: auto;
  padding: 16px;
  margin: 16px;
  margin-top: 50px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hoverCard{
  position: absolute;
  top: 0px;
  left: 0px;
  background: white;
  max-width: 500px;
  height: auto;
  padding: 16px;
  margin: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.hidden{
  display: none;
}

.loginBtn{
  background-color: white;
  font-size: 14px;
  height: 40px;
}
.loginImg{
  width: 24px;
  height: 24px;
  margin: 8px;
}
.loginTxt{
  position: relative;
  top: -16px;
  font-family: "Roboto","Helvetica","Arial",sans-serif;
}

#placeScore{
  font-size: 20px;
}

#recommendWrap{
  margin-top: 16px;
}
#recommendWrap span{
  font-size: 12px;
}
#recommendWrap div{
  margin-top: 8px;
}

#recommendPlace_no{
  margin-left: 8px;
  background: white;
}
#recommendPlace_yes{
  background: white;
}

#createPopup_input {
  background-color: #fff;
  padding: 0 11px 0 13px;
  text-overflow: ellipsis;
  width: 100%;
}

.controls {
  margin-top: 10px;
  border: 1px solid transparent;
  border-radius: 2px 0 0 2px;
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  height: 32px;
  outline: none;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}
#proximityResultWrap{
  padding-top: 16px;
}
.selectPlaceItem{
  cursor: pointer;
}
.primaryColorButton{
  color: #FFF;
  background-color: #F39800;
}

#add_map{
  overflow: hidden;
  position: relative;
  height: 100px;
  margin: -16px;
  margin-top: 16px;
  margin-bottom: 8px;
}
.userLink{
  text-decoration: underline;
  color: #000;
}

/* ACCOUNT POPUP */
.main_profileInfoHolder{
  padding-bottom: 8px;
}
.main_imageHolder{
  display: inline-block;
  width:70px;
}

.main_nameHolder{
  display: inline-block;
  vertical-align: top;
  padding-left: 8px;
  padding-right: 8px;
}
.main_nameHolder p{
  margin: 0px;
  margin-top: 4px;
}
.main_nameHolder h2{
  margin: 0px;
}

.main_profileButton{
  margin-right: 8px;
  height:25px;
  font-size:10px;
  padding:0 10px;
  line-height:25px;

}
/* SHARING DIALOG*/
#sharing_dialog_rest_name{
  margin-bottom: 2em;
}
.fb{
  background-color: #3B5998;
  color: white;
  height: 40px;
}
.fb:hover{
  background-color: #6D84B4;
}
.fb i{
  margin-right: 4px;
  margin-left: -4px;
  margin-top: 8px;
}
.fb p{
  display: inline-block;
  line-height: 40px;
  vertical-align: middle;
  margin: 0px;
  margin-top: -16px;
}
.tw{
  background-color: #00ACED;
  color: white;
  height: 40px;
}
.tw:hover{
  background-color: #1dcaff;
}
.tw i{
  margin-right: 4px;
  margin-left: -4px;
  margin-top: 8px;
}
.tw p{
  display: inline-block;
  line-height: 40px;
  vertical-align: middle;
  margin: 0px;
  margin-top: -16px;
}
.gp{
  background-color: #d34836;
  color: white;
  height: 40px;
}
.gp:hover{
  background-color: #E67A6D;
}
.gp i{
  margin-right: 4px;
  margin-left: -4px;
  margin-top: 8px;
}
.gp p{
  display: inline-block;
  line-height: 40px;
  vertical-align: middle;
  margin: 0px;
  margin-top: -16px;
}
.lk{
  background-color: white;
  height: 40px;
}
.lk:hover{
  background-color: #e3e3e3;
}
.lk i{
  margin-right: 4px;
  margin-left: -4px;
  margin-top: 8px;
}

.lk p{
  display: inline-block;
  line-height: 40px;
  vertical-align: middle;
  margin: 0px;
  margin-top: -16px;
}

/* MEDIA */
@media (orientation: portrait) {
 .headerButton{
   display: none;
 }
 .headerIcon{
   display: inline-block;
 }
}

@media (orientation: landscape) {
 .headerIcon{
   display: none;
 }
 .headerButton{
   display: block;
 }
}


/* PROFILE PAGE */
.profileBody{
  background-color: #e3e3e3;
}

.belowHeader{
  position: absolute;
  top: 50px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.warningBar{
  position: relative;
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  top: 0px;
  background: #4837B4;
}
.warningBar p{
  display: inline-block;
  margin: 0px;
  line-height: 36px;
  color: #fff;
  font-style: bold;
}
.warningBar button{
  display: inline-block;
  float: right;
  background: #fff;
}

#loginWrap{
  box-sizing: border-box;
  display: block;
  color: black;
  max-width: 500px;
  margin: auto;
  padding: 16px;
}
.profileInfoHolder{
  padding-top: 16px;
}
.imageHolder{
  display: inline-block;
  width:100px;
}

.nameHolder{
  display: inline-block;
  vertical-align: top;
  padding-left: 16px;
  padding-right: 16px;
}
.nameHolder p{
  margin: 0px;
  margin-top: 4px;
}
.nameHolder h1{
  margin-bottom: 0px;
  margin-top: 10px;
}

#userToolbar{
  line-height: 30px;
  padding-top: 16px;
}

.profileButton{
  margin-right: 8px;
  height:25px;
  font-size:10px;
  padding:0 10px;
  line-height:25px;

}

.deleteUser{
  color: black;
}
.card{
  background-color: #FFF;
  padding: 16px;
  padding-top: 1px;
  margin-bottom: 16px;
  margin-top: 16px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);

}
.restaurantLink{
  display: block;
  padding: 8px;
  text-decoration: underline;
  color: #000;
}

.statsLine{
  display: inline-block;
  width: 100%;
  height: auto;
}
#statsLine2{
  padding-bottom: 16px;
}
.statsLine_left{
  display: inline-block;
  margin:0px;
  float: left;
}
.statsLine_right{
  display: inline-block;
  margin:0px;
  float: right;
}

#progressBar{
  width: 100%;
  height: 15px;

  background-color: #e3e3e3;
}
#progressBar_progress{
  width:0px;
  height: 15px;
  background-color: #F39800;
}
.progressBarLabels{
  display: inline-block;
  width: 100%;
  height: auto;
}
.progressBarLabelLeft{
  display: inline-block;
  float: left;
  margin: 0px;
}
.progressBarLabelRight{
  display: inline-block;
  float: right;
  margin: 0px;
}

.grey{
  color: #707070;
  font-size: 13px;
}


/* 404 PAGE */

#eWrap{
  display: block;
  color: black;
  width: 500px;
  margin: auto;
  text-align: center;
}