@charset "UTF-8";
html {
  scroll-behavior: smooth;
  height: 100%;
}

html.lb {
  scroll-behavior: auto;
}

html .emoji-picker {
  top: 230px !important;
}

html body {
  font-family: 'Raleway', sans-serif;
  height: 100%;
  border: 0;
  margin: 0;
}

html body .bodywrap {
  background-image: url("/img/sand1.jpg");
  background-attachment: fixed;
}

html body .bodywrap.fullheight {
  height: 100%;
}

html body .bodywrap.autoheight {
  height: auto;
}

html body .toprow {
  position: fixed;
  width: 100%;
  background-color: #e8dcc8;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(46%, #e8dcc8), to(#73a6d0));
  background: linear-gradient(180deg, #e8dcc8 46%, #73a6d0 100%);
  z-index: 100;
  -webkit-box-shadow: 0px 3px 6px #aaa;
          box-shadow: 0px 3px 6px #aaa;
  height: 55px;
  overflow: hidden;
}

html body .toprow #head-wave {
  position: absolute;
  width: 100%;
}

html body .toprow #head-wave img {
  width: 100%;
  margin-top: -20px;
}

html body .toprow .reg-header {
  position: absolute;
  z-index: 9;
  top: 10px;
  left: 50%;
  margin-left: -100px;
}

html body .toprow h3 {
  position: absolute;
  line-height: 58px;
  float: left;
  color: #fff;
  text-shadow: 1px 1px 3px #333;
  padding: 0;
  margin: 0;
}

html body .toprow #notification-top {
  position: absolute;
  right: 60px;
  margin-top: 10px;
}

html body .toprow #notification-top i.material-icons {
  font-size: 36px;
  font-weight: 100;
  color: #0070d2;
}

html body .toprow #notification-top .notify-count {
  position: absolute;
  top: 8px;
  right: 3px;
  color: #fff;
  text-align: center;
  width: 30px;
  font-size: 0.8em;
}

html body .toprow button {
  position: absolute;
  right: 15px;
  padding: 5px;
  margin: 7px;
  margin-top: 15px;
}

html body .toprow #menubutton {
  font-size: 22px;
  line-height: 22px;
  background-color: rgba(255, 255, 255, 0.3);
  border: none;
  border-radius: 3px;
  border: 1px solid #aaa;
  margin-top: 10px;
  margin-right: 0;
  width: 35px;
  height: 35px;
  cursor: pointer;
}

html body .toprow #avatar {
  text-align: center;
  display: block;
  float: left;
  margin-right: 7px;
  margin-left: 5px;
  margin-top: 9px;
  width: 40px;
  height: 40px;
  border-radius: 25px;
  -webkit-box-shadow: 2px 2px 4px #858585;
          box-shadow: 2px 2px 4px #858585;
  overflow: hidden;
}

html body .toprow #avatar img {
  width: 40px;
  height: 40px;
}

html body .redCross {
  color: transparent;
  text-shadow: 0 0 0 #dc1414;
}

html body .greenTick {
  color: transparent;
  text-shadow: 0 0 0 #46be14;
}

html body #intro .mainlogo {
  z-index: 1;
  position: absolute;
  width: 36%;
  height: 180px;
  left: 50%;
  margin-left: -18%;
  top: 15px;
  opacity: 1;
  top: 6%;
}

html body #intro .enter {
  width: 60%;
  position: absolute;
  left: 50%;
  margin-left: -30%;
  top: 33%;
  text-align: center;
}

html body #intro .enter p {
  text-align: center;
  font-size: 18px;
  text-shadow: 0px 0px 1px #69f;
}

html body #intro .join-button {
  left: 50%;
  margin-top: 30px;
}

html body #intro .join-button a {
  text-decoration: none;
  /* text-shadow: 0px 0px 1px #000; */
  color: #5e96c5;
  font-size: 20px;
  display: block;
  border: 2px solid #5e96c5;
  border-radius: 7px;
  padding: 10px;
  background: white;
  text-align: center;
  width: 70px;
  margin-left: -50px;
}

html body #loading {
  position: absolute;
  width: 100%;
  top: 240px;
  z-index: -1;
}

html body #menu {
  position: fixed;
  width: 180px;
  top: 60px;
  right: -350px;
  -webkit-transition: right 0.3s ease-in-out;
  transition: right 0.3s ease-in-out;
  z-index: 99999;
}

html body #menu.show {
  z-index: 1001;
  right: 0px;
}

html body #menu .menuwrap {
  background: rgba(0, 0, 0, 0.5);
  padding: 4px;
  border-radius: 5px 0px 0px 5px;
}

html body #menu .menuwrap button {
  width: 100%;
  height: 40px;
  text-align: left;
  font-size: 16px;
  background-color: rgba(250, 250, 250, 0.7);
  border: 1px solid #999;
}

html body #menu .menuwrap button i.material-icons {
  vertical-align: middle;
  padding-right: 5px;
  font-size: 28px;
  color: #1b619e;
}

html body .wrap {
  width: 100%;
  overflow: hidden;
  padding-top: 50px;
  background-image: url("/img/sand1.jpg");
  background-attachment: fixed;
}

@media only screen and (min-width: 768px) {
  html body .wrap {
    width: 800px;
    position: relative;
    left: 50%;
    margin-left: -400px;
  }
}

html body .wrap.loggedout {
  height: 100%;
}

html body .wrap select {
  padding: 5px;
}

html body .wrap div button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #aaa;
  font-size: 14px;
  vertical-align: middle;
}

html body .wrap div#addpost button {
  height: 46px;
}

html body .wrap div#addpost button.loading {
  font-size: 0.01px;
  width: 46px;
  background-image: url("/img/button-loader.gif");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

html body .wrap div#addpost input[type="file"] {
  position: relative;
  z-index: 1;
}

html body .wrap div#addpost input[type="file"]:before {
  content: '';
}

html body .wrap div#addpost input[type="file"]::-webkit-file-upload-button {
  border-radius: 5px;
  padding: 15px;
  border: 1px solid #aaa;
}

html body .wrap div#addpost #ul-button {
  display: none;
  padding: 15px;
  position: absolute;
  margin-top: 5px;
  background-color: #eee;
  border: 1px solid #aaa;
  border-radius: 5px;
  font-size: 14px;
  z-index: 0;
  font-family: Arial, Helvetica;
}

html body .wrap input[type="file"] {
  display: block;
  margin: 10px 0px;
}

html body .wrap input[type="file"]::-webkit-file-upload-button {
  border-radius: 5px;
  padding: 15px;
  border: 1px solid #aaa;
}

html body .wrap .file-upload {
  border: 1px solid #aaa;
  width: 44px;
  height: 44px;
  margin-bottom: 10px;
  border-radius: 5px;
  background-color: #eee;
  text-align: center;
  line-height: 44px;
}

html body .wrap #emoji-select {
  position: absolute;
  z-index: 9;
  top: 100px;
  background: #fff;
  width: 86%;
}

html body .wrap #emoji-select span {
  font-size: 22px;
  vertical-align: middle;
  text-align: center;
  width: 36px;
  height: 36px;
  display: inline-block;
}

html body .wrap #resetbox, html body .wrap #passwordsentbox {
  top: 100px;
}

html body .wrap #reset-password.loading {
  font-size: 0.01px;
  width: 46px;
  background-image: url("/img/button-loader.gif");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

html body .wrap #subscribe a {
  text-decoration: underline;
}

html body .wrap #profile-upload-filename {
  position: absolute;
  margin-left: 130px;
  font-size: 14px;
  margin-top: -56px;
  display: none;
}

html body .wrap #profile-upload-pic {
  position: relative;
  overflow: hidden;
  width: 300px;
  height: 300px;
  background-color: #efefef;
  text-align: center;
  /*
                background-image: url('/img/profile.png');
                background-size:cover;
                */
}

html body .wrap #profile-upload-pic #temp-profile {
  width: 100%;
  position: relative;
}

html body .wrap #profile-upload-pic #temp-profile.loading {
  margin-top: 140px;
}

html body .wrap .feed {
  padding-bottom: 10px;
  z-index: 0;
}

html body .wrap .feed.showhelp {
  margin-top: 115px;
}

html body .wrap .lowlight {
  z-index: -1;
  display: none;
}

html body .wrap .postbox {
  position: absolute;
  top: 100px;
  z-index: 1000;
  border: 1px solid #ccc;
  background-color: #fff;
  padding: 3%;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 4px #666;
  box-shadow: 2px 2px 4px #666;
  width: 90%;
  /* max-width: 450px; */
  left: 50%;
  margin-left: -48%;
}

html body .wrap .postbox input {
  padding: 5px;
  width: 250px;
  margin: 15px;
}

html body .wrap .postbox textarea {
  width: 90%;
}

html body .wrap .postbox button {
  margin-top: 15px;
  padding: 10px;
}

html body .wrap .postbox.tagbox input {
  margin: 0;
}

html body .wrap .postbox.lowlight {
  z-index: -1;
  display: none;
}

html body .wrap .postbox #reset-email {
  font-weight: bold;
}

html body .wrap .postbox .avatar {
  width: 40px;
  height: 40px;
  overflow: hidden;
  border-radius: 20px;
  position: absolute;
  top: 15px;
  z-index: 1;
  -webkit-box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.6);
  box-shadow: 0px 0px 5px rgba(100, 100, 100, 0.6);
}

html body .wrap .postbox .avatar a {
  display: block;
}

html body .wrap .postbox .avatar a img {
  width: 100%;
  height: 100%;
}

html body .wrap #userpostbox {
  position: fixed;
  padding-top: 1%;
  background: white;
  background: -webkit-gradient(linear, left bottom, left top, color-stop(86%, white), to(#bfd8ee));
  background: linear-gradient(0deg, white 86%, #bfd8ee 100%);
}

@media only screen and (min-width: 768px) {
  html body .wrap #userpostbox {
    max-width: 680px;
    margin-left: -378px;
  }
}

html body .wrap #userpostbox #singlepost {
  margin-top: 55px;
  background: #fff;
}

html body .wrap #userpostbox #singlepost .postcontent.gallery {
  max-height: 540px;
}

html body .wrap #userpostbox #singlepost .postcontent .gallery-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

html body .wrap #userpostbox #singlepost .postcontent .gallery-wrap img {
  scroll-snap-align: start;
  width: 100%;
  max-height: 520px;
  padding: 0px;
  padding-right: 5px;
}

@media only screen and (max-width: 479px) {
  html body .wrap #userpostbox #singlepost {
    height: 380px;
    overflow-y: scroll;
  }
  html body .wrap #userpostbox #singlepost .postcontent.text {
    margin-right: 15px;
  }
}

@media only screen and (min-width: 480px) {
  html body .wrap #userpostbox #singlepost {
    height: 500px;
    overflow-y: scroll;
  }
  html body .wrap #userpostbox #singlepost .postcontent.text {
    margin-right: 15px;
  }
}

html body .wrap #userpostbox #singlepost .date-time, html body .wrap #userpostbox #commentbox .date-time {
  padding-left: 0px;
}

html body .wrap #userpostbox #singlepost .comment-wrap, html body .wrap #userpostbox #commentbox .comment-wrap {
  border: 1px solid #4c88c540;
  padding: 7px;
  border-radius: 5px;
  margin-top: 10px;
  margin-right: 10px;
}

html body .wrap #userpostbox #singlepost .comment-wrap .commenter, html body .wrap #userpostbox #commentbox .comment-wrap .commenter {
  margin-top: 3px;
  margin-left: 60px;
  color: #156da0;
  font-weight: bold;
}

html body .wrap #userpostbox #singlepost .comment-wrap .commented, html body .wrap #userpostbox #commentbox .comment-wrap .commented {
  color: #000000a9;
  margin-left: 60px;
  min-height: 42px;
}

html body .wrap #userpostbox #singlepost .comment-wrap .commented a, html body .wrap #userpostbox #commentbox .comment-wrap .commented a {
  font-weight: bold;
  text-decoration: none;
  color: #375b70;
}

html body .wrap #userpostbox #singlepost .comment-wrap button, html body .wrap #userpostbox #commentbox .comment-wrap button {
  float: left;
  margin-top: 0;
}

html body .wrap #userpostbox #singlepost .comment-wrap button i, html body .wrap #userpostbox #commentbox .comment-wrap button i {
  color: #aaa;
}

html body .wrap #userpostbox #singlepost .comment-wrap .post-reply-box, html body .wrap #userpostbox #commentbox .comment-wrap .post-reply-box {
  margin-left: 60px;
}

html body .wrap #userpostbox #singlepost .comment-wrap .post-reply-box button, html body .wrap #userpostbox #commentbox .comment-wrap .post-reply-box button {
  float: none;
  margin-top: 3px;
  margin-right: 5px;
}

html body .wrap #userpostbox #singlepost .comment-wrap .post-reply-box span, html body .wrap #userpostbox #commentbox .comment-wrap .post-reply-box span {
  display: block;
  margin-top: 10px;
}

html body .wrap #userpostbox #singlepost .comment-wrap .post-reply-box textarea, html body .wrap #userpostbox #commentbox .comment-wrap .post-reply-box textarea {
  display: block;
  height: 60px;
}

html body .wrap #userpostbox .date-time {
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 2px;
  font-size: 0.9em;
  font-style: italic;
  line-height: 1em;
  color: #666;
}

html body .wrap #userpostbox .like_love {
  position: absolute;
  top: 15px;
  left: 75px;
}

html body .wrap #userpostbox .like_love .likes {
  font-size: 30px;
  margin-left: 10px;
  color: red;
  text-shadow: 2px 2px 2px rgba(100, 100, 100, 0.6);
}

html body .wrap #userpostbox .like_love .count {
  position: absolute;
  margin-left: 5px;
  margin-top: 9px;
}

html body .wrap #userpostbox .cancel {
  top: -5px;
}

html body .wrap #keycheck a {
  color: #666;
}

html body .wrap #keycheck .field_error {
  background-color: lightpink;
  border: 1px solid red;
}

html body .wrap #namecheck input {
  font-size: 18px;
  border-radius: 7px;
  border: 1px solid #999;
  padding: 5px;
}

html body .wrap #namecheck button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #999;
}

html body .wrap #namecheck #add-user span {
  color: transparent;
  font-size: 20px;
  /*
                        border: solid 1px #999;
                        border-radius: 30px;
                        width: 30px;
                        height: 30px;
                        display: inline-block;
                        text-align: center;
                        background: rgba(255,255,255,0.3);
                        */
}

html body .wrap #fail input[type="text"] {
  font-size: 18px;
  border-radius: 7px;
  border: 1px solid #999;
  padding: 5px;
}

html body .wrap #editbox button.cancel, html body .wrap #reportbox button.cancel, html body .wrap #tagbox button.cancel, html body .wrap #deletebox button.cancel, html body .wrap #privacybox button.cancel, html body .wrap #resetbox button.cancel, html body .wrap #passwordsentbox button.cancel {
  top: 0px;
}

html body .wrap #editbox textarea, html body .wrap #reportbox textarea, html body .wrap #tagbox textarea, html body .wrap #deletebox textarea, html body .wrap #privacybox textarea, html body .wrap #resetbox textarea, html body .wrap #passwordsentbox textarea {
  font: inherit;
  border-radius: 7px;
}

html body .wrap #deletebox button.cancel {
  top: auto;
  left: 0;
  margin-left: 130px;
}

html body .wrap #privacybox.postbox {
  padding-top: 50px;
}

html body .wrap #privacybox select {
  font-family: inherit;
  border-radius: 5px;
  height: 38px;
  margin-top: 5px;
}

html body .wrap #privacybox button {
  margin-top: -1px;
}

html body .wrap #privacybox button.cancel {
  margin-top: 15px;
}

html body .wrap #add-user select {
  padding: 3px;
}

html body .wrap #add-user label {
  width: 100%;
  display: block;
  margin-top: 10px;
  margin-bottom: 5px;
}

html body .wrap #add-user #show-password {
  padding: 7px;
}

html body .wrap #add-user #show-password.active i {
  color: red;
}

html body .wrap #add-user input {
  font-size: 18px;
  border-radius: 7px;
  border: 1px solid #999;
  padding: 5px;
}

html body .wrap #add-user input.pwshown:-internal-autofill-selected {
  -webkit-text-fill-color: #666;
}

html body .wrap #add-user input.field_error:-internal-autofill-selected {
  background-color: pink !important;
}

html body .wrap #add-user button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #999;
}

html body .wrap #add-detail input {
  padding: 5px;
  font-size: 18px;
  border-radius: 7px;
  border: 1px solid #999;
  margin-bottom: 3px;
}

html body .wrap #add-detail button {
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #999;
}

html body .wrap #addpost {
  background-color: rgba(210, 210, 210, 0.75);
}

html body .wrap #addpost #post-comment {
  margin-top: 5px;
}

html body .wrap #addpost p {
  width: 150px;
}

html body .wrap #addpost form {
  -webkit-margin-after: 0;
          margin-block-end: 0;
}

html body .wrap #addpost #add-post-emoticon {
  /* display: inline-block;    */
  display: none;
  margin-top: -36px;
  margin-left: 130px;
  border: none;
  padding: 0;
  height: auto;
  background: none;
}

html body .wrap #addpost select {
  font-family: inherit;
  border-radius: 5px;
  height: 38px;
  margin-top: 5px;
}

html body .wrap #hidebox .cancel {
  margin-top: 0;
}

html body .wrap #hidebox p {
  padding-top: 40px;
}

html body .wrap #commentbox {
  position: fixed;
  top: 60px;
}

html body .wrap #commentbox .cancel {
  top: 0px;
}

html body .wrap #comments {
  overflow-y: scroll;
  width: 95%;
  margin-left: 2.5%;
  height: 220px;
  margin-top: 30px;
  border-radius: 5px;
}

html body .wrap #comments .comment_wrap {
  overflow: hidden;
  margin: 5px 0px;
}

html body .wrap #comments .comment_wrap .comment_user {
  font-weight: bold;
  background-color: #f0c88075;
  padding: 7px;
  display: inline-block;
  line-height: 22px;
  border-top-left-radius: 10px;
  font-size: 0.9em;
}

html body .wrap #comments .comment_wrap .comment_user a {
  color: #000;
  text-decoration: none;
}

html body .wrap #comments .comment_wrap .comment_text {
  background-color: #eee;
  padding: 7px;
  display: inline-block;
  line-height: 22px;
  border-bottom-right-radius: 10px;
  font-size: 0.9em;
}

html body .wrap #reportbox input {
  width: 30px;
}

html body .wrap #userconnect a {
  color: #666;
}

html body .wrap #notifications {
  background-color: rgba(210, 210, 210, 0.75);
}

html body .wrap #notifications .notify {
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
  min-height: 45px;
}

html body .wrap #notifications .notify a {
  text-decoration: none;
  font-weight: bold;
  color: #2396bd;
}

html body .wrap #notifications .notify p {
  font-size: 0.9em;
  margin-left: 70px;
  margin-top: -38px;
  /* position:absolute; */
  width: 65%;
  margin-bottom: 5px;
}

html body .wrap #notifications .notify h3 a {
  text-decoration: none;
  color: #333;
}

html body .wrap #notifications .notify .avatar {
  overflow: hidden;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  border: 2px solid #999;
}

html body .wrap #notifications .notify .avatar img {
  width: 40px;
  height: 40px;
}

html body .wrap #notifications .notify .noteicon {
  width: 25px;
  position: absolute;
  text-align: center;
  font-size: 14px;
  margin-left: 45px;
  margin-top: -30px;
}

html body .wrap #notifications .issue-button {
  float: right;
  margin-top: -50px;
  color: red;
}

html body .wrap #search input {
  padding: 5px;
}

html body .wrap #help-profile {
  position: fixed;
  z-index: 999;
  top: 50px;
  width: 92%;
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#a7b6cf));
  background: linear-gradient(180deg, white 0%, #a7b6cf 100%);
}

html body .wrap #help-profile h3 i {
  vertical-align: middle;
  color: darkblue;
  padding-bottom: 5px;
}

html body .wrap #connections h3, html body .wrap #follow h3 {
  margin: 10px 0;
}

html body .wrap #connections .follow h3, html body .wrap #follow .follow h3 {
  margin: 0;
  padding: 0;
  margin-left: 55px;
  margin-top: -31px;
  float: left;
  font-size: 16px;
}

html body .wrap #connections .follow h3 a, html body .wrap #follow .follow h3 a {
  text-decoration: none;
  color: #333;
}

html body .wrap #connections .follow .buttons, html body .wrap #follow .follow .buttons {
  width: 160px;
  position: absolute;
  right: 15px;
  margin-top: -42px;
}

html body .wrap #connections .follow .buttons button, html body .wrap #follow .follow .buttons button {
  margin-left: 2px;
  margin-right: 3px;
  padding: 10px 2px;
}

html body .wrap #connections .follow .avatar, html body .wrap #follow .follow .avatar {
  overflow: hidden;
  border-radius: 30px;
  width: 40px;
  height: 40px;
  border: 2px solid #999;
}

html body .wrap #connections .follow .avatar img, html body .wrap #follow .follow .avatar img {
  width: 40px;
  height: 40px;
}

html body .wrap #connections h4 {
  line-height: 22px;
  margin: 0;
}

html body .wrap #connections .follow {
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
}

html body .wrap #follow .follow {
  background-color: #fff;
  padding: 5px;
  border-radius: 5px;
  margin-bottom: 10px;
}

html body .wrap #follow .follow h3 {
  margin: 0;
  padding: 0;
  margin-left: 55px;
  margin-top: -31px;
  float: left;
  font-size: 16px;
}

html body .wrap #follow .follow h3 a {
  text-decoration: none;
  color: #333;
}

html body .wrap #followbox {
  padding-top: 55px;
  top: 100px;
  position: fixed;
}

html body .wrap #issuebox.postbox .cancel {
  margin-top: 0px;
}

html body .wrap #issuebox.postbox p {
  margin-top: 20px;
}

html body .wrap #issuebox.postbox textarea {
  font-family: inherit;
  font-size: 16px;
  width: 100%;
  border-radius: 7px;
}

html body .wrap #profile {
  background: white;
  background: -webkit-gradient(linear, left top, left bottom, from(white), to(#a7b6cf));
  background: linear-gradient(180deg, white 0%, #a7b6cf 100%);
  overflow: hidden;
}

html body .wrap #profile .avatar {
  border-radius: 50px;
  width: 80px;
  height: 80px;
  -webkit-box-shadow: 0 0 5px #2396bd;
          box-shadow: 0 0 5px #2396bd;
  overflow: hidden;
}

html body .wrap #profile .avatar img {
  width: 80px;
  height: 80px;
}

html body .wrap #profile .bio {
  position: absolute;
  margin-left: 92px;
  margin-top: -45px;
  font-size: 14px;
  width: 67%;
}

html body .wrap #profile h3 {
  margin: 0;
  padding: 0;
  margin-left: 90px;
  margin-top: -75px;
  float: left;
  font-size: 22px;
}

html body .wrap #user-profile #lg_profile img {
  width: 100%;
}

html body .wrap #user-profile h3 {
  margin: 0;
  padding: 0;
  margin-left: 90px;
  margin-top: -75px;
  float: left;
  font-size: 22px;
}

html body .wrap #user-profile .bio {
  float: left;
  margin-left: 90px;
  margin-top: -50px;
  font-size: 14px;
}

html body .wrap #user-profile .profile-edit {
  position: absolute;
  margin: 5px;
}

html body .wrap #weather #data .row {
  background-color: #fff;
  font-size: 14px;
}

html body .wrap #weather #data .row div {
  padding: 5px;
  font-size: 14px;
}

html body .wrap #weather #data .row .current {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
}

html body .wrap #weather #data .row .current button {
  font-family: 'Nunito Sans', sans-serif;
  margin-top: 10px;
}

html body .wrap #weather #data .row .time {
  display: inline-block;
  width: 60px;
}

html body .wrap #weather #data .row .location {
  font-weight: bold;
  display: inline-block;
  width: 100px;
}

html body .wrap #weather #data .row .wind_direction {
  display: inline-block;
  width: 35px;
}

html body .wrap #weather #data .row .wind_speed {
  display: inline-block;
  width: 65px;
}

html body .wrap #weather #data .row .wind_speed::after {
  content: ' kts';
}

html body .wrap #weather #data .row .temperature {
  display: inline-block;
  width: 42px;
}

html body .wrap #weather #data .row .temperature::after {
  content: '°C';
}

html body .wrap #weather #data .row .history {
  -webkit-transform: scaleY(0);
          transform: scaleY(0);
  max-height: 0;
  margin-top: -5px;
  -webkit-transition: all ease-in-out 0.5s;
  transition: all ease-in-out 0.5s;
  background-color: #fff;
}

html body .wrap #weather #data .row .history.show {
  -webkit-transform: scaleY(1);
          transform: scaleY(1);
  max-height: 300px;
}

html body .wrap #weather #data .row .history .hrow {
  background-color: #cceafc;
  border-bottom: 1px solid #fff;
}

html body .wrap #weather #data .row .history .hrow .location {
  margin-left: -5px;
}

html body .wrap #weather #tides {
  width: 100%;
}

html body .wrap #weather #tides h3 {
  margin: 0;
  margin-top: 10px;
  padding: 10px;
  width: 190px;
  border-radius: 0px 5px 0px 0px;
  font-size: 16px;
  background-color: #fff;
}

html body .wrap #weather #tides .tide-location {
  width: 96%;
  padding: 0 2%;
  height: 130px;
  border: 1px solid #ddd7d7;
  background: #fff;
  border-radius: 3px;
  overflow-y: scroll;
}

html body .wrap #weather #tides .tide-location h2 {
  display: none;
  font-size: 16px;
  margin: 5px 0px;
  padding: 0;
}

html body .wrap #weather #tides .tide-location .tide-day {
  width: 100%;
}

html body .wrap #weather #tides .tide-location .tide-day h3 {
  font-size: 16px;
  color: dimgrey;
  line-height: 36px;
  margin: 0;
  padding: 0;
}

html body .wrap #weather #tides .tide-location .tide-day table {
  border: 1px solid #aaa;
  border-collapse: collapse;
  width: 240px;
}

html body .wrap #weather #tides .tide-location .tide-day table .low-tide {
  color: red;
  font-size: 14px;
}

html body .wrap #weather #tides .tide-location .tide-day table .high-tide {
  color: blue;
  font-size: 14px;
}

html body .wrap #weather #tides .tide-location .tide-day table tr td {
  padding: 3px;
}

html body .wrap #weather #tides .tide-location .tide-day th, html body .wrap #weather #tides .tide-location .tide-day td {
  border: 1px solid #aaa;
}

html body .wrap #weather #tides .tide-location .tide-day .moon-phase {
  display: none;
}

html body .wrap .post, html body .wrap .add, html body .wrap .details {
  border: 1px solid #c19e71;
  margin: 15px 5px;
  border-radius: 5px;
  background-color: rgba(210, 210, 210, 0.75);
}

html body .wrap .post {
  overflow: hidden;
  border-radius: 7px;
}

html body .wrap .post.lowlight {
  z-index: -1;
  display: none;
}

html body .wrap .post .avatar {
  width: 30px;
  height: 30px;
  overflow: hidden;
  position: absolute;
  border-radius: 20px;
  margin-top: 10px;
  margin-left: 12px;
  z-index: 1;
  -webkit-box-shadow: 0px 0px 5px #73b0ef;
          box-shadow: 0px 0px 5px #73b0ef;
}

html body .wrap .post .avatar img {
  width: 100%;
  height: 100%;
}

html body .wrap .post button {
  background-color: transparent;
  border: none;
  padding-bottom: 3px;
  padding-top: 0px;
  padding-right: 2px;
}

html body .wrap .post button i {
  color: #000;
}

html body .wrap .post .content-wrap {
  margin-top: 50px;
  background-color: #fff;
}

html body .wrap .post .content-wrap .postcontent {
  padding: 5px;
  position: relative;
  font-size: 1em;
}

html body .wrap .post .content-wrap .postcontent.gallery {
  max-height: 540px;
}

html body .wrap .post .content-wrap .postcontent .gallery-wrap {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-scroll-snap-type: x mandatory;
      scroll-snap-type: x mandatory;
  overflow-x: scroll;
}

html body .wrap .post .content-wrap .postcontent .gallery-wrap img {
  scroll-snap-align: start;
  width: 100%;
  max-height: 520px;
  padding: 0px;
  padding-right: 5px;
}

html body .wrap .post .content-wrap .postcontent.image {
  padding: 5px;
}

html body .wrap .post .content-wrap .postcontent img {
  width: 100%;
  position: relative;
}

html body .wrap .post .content-wrap .date-time {
  padding-left: 5px;
  padding-top: 3px;
  padding-bottom: 2px;
  font-size: 0.9em;
  font-style: italic;
  line-height: 1em;
  color: #666;
}

html body .wrap .post .content-wrap .like_love {
  display: none;
}

html body .wrap .post .options {
  background-color: #fff;
  position: absolute;
  width: 120px;
  padding: 5px;
  left: auto;
  right: 21px;
  margin-top: 7px;
  -webkit-box-shadow: 4px 4px 7px #333;
          box-shadow: 4px 4px 7px #333;
  border-radius: 5px;
  z-index: 999;
}

html body .wrap .post .options.hide {
  display: none;
}

html body .wrap .post .options.show {
  display: block;
  opacity: 0.8;
}

html body .wrap .post .options span {
  display: block;
  height: 35px;
  line-height: 35px;
  margin-bottom: 5px;
  border-bottom: 1px solid #999;
}

html body .wrap .post .optionmenu {
  padding: 4px 2px;
  text-align: left;
  width: 200px;
  background: none;
  height: 40px;
  float: left;
}

html body .wrap .post .optionmenu span {
  padding: 2px;
  width: 35px;
  height: 35px;
  border: 1px solid #ddd;
  color: #444;
  display: inline-block;
  margin: 0px 4px;
  border-radius: 5px;
  text-align: center;
  font-size: 22px;
  vertical-align: middle;
  line-height: 35px;
  background-color: white;
  background: -webkit-gradient(linear, left top, left bottom, color-stop(12%, rgba(255, 255, 255, 0.7)), to(#d6d6d6));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7) 12%, #d6d6d6 100%);
}

html body .wrap .post .optionmenu span.red {
  color: red;
}

html body .wrap .post .optionmenu span.public {
  text-shadow: 2px 2px 2px lime;
  background-color: cornflowerblue;
}

html body .wrap .post .reactions {
  display: block;
  float: right;
  margin-top: 12px;
  margin-right: 10px;
}

html body .wrap .post .reactions button.like {
  border: none;
  background: none;
  color: red;
}

html body .wrap .post .reactions button:focus {
  outline: none;
}

html body .wrap .post .reactions .post-comments, html body .wrap .post .reactions .post-likes {
  line-height: 25px;
  font-size: 15px;
  vertical-align: top;
}

html body .wrap .post .reactions .post-button.liked i {
  color: red;
}

html body .wrap .post .reactions .post-button.comment i {
  font-weight: bold;
}

html body .wrap .lazyspinner {
  width: 100%;
  text-align: center;
}

html body .wrap .lazyspinner span {
  font-weight: bold;
  color: #fff;
  text-shadow: 0px 0px 3px black;
}

html body .wrap .add {
  padding: 10px;
}

html body .wrap .add textarea {
  font-family: inherit;
  font-size: 16px;
  width: 100%;
  border-radius: 7px;
}

html body .wrap .add .greentext {
  color: #099b04;
}

html body .wrap .add .redtext {
  color: #fc3200e8;
}

html body .wrap .details {
  padding: 10px;
}

html body .wrap .details .field_error {
  background-color: lightpink;
  border: 1px solid red;
}

html body .wrap .post-button {
  padding-right: 2px;
}

html body .wrap button.cancel {
  position: absolute;
  top: 15px;
  right: 15px;
}

html body .wrap .biobox, html body .wrap .profilebox {
  position: absolute;
  z-index: 1000;
  border: 1px solid #ccc;
  background-color: #fff;
  margin: 15px 10px;
  border-radius: 5px;
  -webkit-box-shadow: 2px 2px 4px #666;
          box-shadow: 2px 2px 4px #666;
  width: 86%;
  padding: 15px;
  margin-top: 20px;
}

html body .wrap .biobox.lowlight, html body .wrap .profilebox.lowlight {
  z-index: -1;
  display: none;
}

html body .wrap .profilebox #image {
  margin: 10px;
}

html body .wrap .profilebox h3 {
  margin-top: 45px;
}

html body .wrap .profilebox #add-bio textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  width: 100%;
  border-radius: 7px;
}

html body .wrap .profilebox #add-bio input {
  padding: 7px;
  border-radius: 5px;
}

html body .wrap .profilebox #add-bio button {
  border-radius: 5px;
  border: 1px solid #aaa;
  padding: 15px;
  padding-bottom: 20px;
  height: 46px;
  font-size: 14px;
  width: 70px;
  position: absolute;
  margin: 5px;
  z-index: 9;
}

html body .wrap .profilebox #add-bio #post-bio.loading {
  font-size: 0.01px;
  background-image: url("/img/button-loader.gif");
  background-repeat: no-repeat;
  background-position: 50% 50%;
}

html body .hidden {
  display: none;
}

html body .unhidden {
  display: block;
}

html body .lightbox {
  position: fixed;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #000;
  opacity: 0.7;
  z-index: 1;
  display: none;
  overflow: auto;
}

html body .lightbox.active {
  z-index: 1;
  display: block;
}

@-webkit-keyframes redFadeOut {
  from {
    color: red;
    opacity: 1;
  }
  to {
    color: white;
    opacity: 0;
  }
}

@keyframes redFadeOut {
  from {
    color: red;
    opacity: 1;
  }
  to {
    color: white;
    opacity: 0;
  }
}

@-webkit-keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

html body .like-button-click {
  -webkit-animation: redFadeOut 0.75s;
          animation: redFadeOut 0.75s;
}

html body .fadeIn {
  -webkit-animation: fadeIn 0.5s;
          animation: fadeIn 0.5s;
}

html body .fadeOut {
  -webkit-animation: fadeOut 0.5s;
          animation: fadeOut 0.5s;
}
/*# sourceMappingURL=main.css.map */