button,
.button {
  background: transparent;
  border: none;
  cursor: pointer;
  user-select: none;
}
.grid {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  justify-content: flex-start;
}
@media only screen and (min-width: 990px) and (max-width: 1480px) {
  .grid {
    margin-bottom: 1em;
  }
}
@media only screen and (max-width: 989px) {
  .grid {
    margin-bottom: 1em;
  }
  .post .top {
	  grid-template-columns: 30% 60% 10% !important;
   }
   .post > .info {
	  grid-template-columns: 70% 30% !important;
	}
	.post > .info > .other > .color2-bg{
	 display:none !important;
	}

	.post > .info > .other > .btn:after{
		width: 30px !important;
	}
	.post > .info > .other .btn i{
	 width:30px !important;
	}
}
.post {
  display: grid;
  align-self: center;
  width: 100%;
  margin-bottom: 1em;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #eee;
  overflow: hidden;
}
.post:first-child {
  margin-top: 0;
}
.post > .infos {
  border-top: 1px solid #eee;
}
.post.reply > .info {
  border-bottom: 1px solid #eee;
}
.post .top {
  display: grid;
  grid-template-columns: 15% 75% 10%;
  padding: 1em;
}
.post .top .picture {
  display: block;
  width: 100px;
  user-select: none;
}
.post .top .picture img {
  height: 100%;
  width: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.post .top .name-time {
  display: grid;
  grid-template-rows: 40% 30%;
  align-content: center;
  text-align: left;
}
.post .top .name-time .name {
  font-weight: bold;
  font-size: 1.2rem;
}
.post .top .name-time .name a {
  color: #404660;
}
.post .top .name-time time {
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.8rem;
  cursor: default;
}
.post .top > .action {
  display: grid;
  justify-content: center;
  align-content: start;
  padding-top: 0.5em;
}
.post .top > .action button {
  font-size: 1.2rem;
  color: #006494;
}
.post .content {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
}
.post .content p {
  padding: 1em 1.5em;
  color: rgba(0, 0, 0, 0.7);
  line-height: 1.3em;
  text-align: left;
}
.post .content .video img {
  max-height: 400px;
  width: 100%;
  object-fit: cover;
}
.post .content img {
  max-height: 600px;
  width: 100%;
  object-fit: cover;
}
.post > .action {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  height: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-content: center;
}
.post > .action button {
  height: 40px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 0.9rem;
  border-right: 1px solid #eee;
  box-sizing: border-box;
  color: #247BA0;
  transition: .1s;
}
.post > .action button:hover {
  background: rgba(0, 0, 0, 0.02);
}
.post > .action button:last-child {
  border-right: none;
}
.post > .action button.like {
  font-weight: bold;
  vertical-align: middle;
  color: #1B98E0;
}
.post > .action button.like.liked {
  background: #1B98E0;
  color: #fff;
}
.post > .action button.like.liked:hover {
  background: #1679b2;
}
.post > .action button.like i,
.post > .action button.like svg {
  margin-right: 0.5em;
  vertical-align: middle;
}
.post > .infos {
  padding: 0.5em 1em;
  border-bottom: 1px solid #eee;
  user-select: none;
}
.post > .info > .likes {
  display: grid;
  align-items: center;
  grid-template-columns: 10% 90%;
}
.post > .info > .likes i,
.post > .info > .likes svg {
  color: #1B98E0;
  font-size: 0.9rem;
  vertical-align: middle;
}
.post > .info > .likes .likers {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
}
.post > .info > .likes .likers img {
  vertical-align: middle;
  height: 25px;
  width: 25px;
  border-radius: 50%;
  border: 2px solid #fff;
  margin-left: -7px;
  object-fit: cover;
}

.post > .info > .likes .likers img:first-child {
  margin: 0;
}
.post > .infos .other-likers {
  color: #404660;
  vertical-align: middle;
  line-height: 3em;
}
.post > .infos .other-likers i{
  font-size: 0.9rem;
}
.post > .info > .other {
  display: flex;
  justify-content: flex-end;
}
.post > .info > .other .likes{
  align-self: center;
}
.post > .info > .other > .btn{
 padding:0 50px 0 15px;
 height:34px;
 line-height:34px;
 margin-right:5px;
}
.post > .info > .other > .btn:after{
	width: 40px;
}

.post > .info > .other .btn i{
 width:40px;
 height:34px;
 line-height:34px;
}
.post > .comments {
  background: #fcfcfc;
  padding: 1em 0;
  text-align:left;
}
.post > .comments > .comment {
  display: grid;
  grid-template-columns: 10% 85% 5%;
  margin-top: 1em;

}
.post > .comments > .comment:hover .option button {
  opacity: 1;
}
.post > .comments > .comment:first-child {
  margin: 0;
}
.post > .comments > .comment.reply {
  margin-left: 15%;
  margin-top: 0.5em;
}
.post > .comments > .comment.reply .picture img {
  height: 35px;
  width: 35px;
}
.post > .comments > .comment.reply .content p {
  font-size: .8rem;
}
.post > .comments > .comment .picture {
  display: flex;
  justify-content: center;
  user-select: none;
}
.post > .comments > .comment .picture img {
  height: 50px;
  width: 50px;
  object-fit: cover;
  border-radius: 50%;
}
.post > .comments > .comment .content {
  border: 1px solid #eee;
}
.post > .comments > .comment .content p {
  font-size: .85rem;
  color: rgba(0, 0, 0, 0.8);
  margin: 0;
  padding: 10px;
  line-height: 1.1;
  width: 100%;
}
.post > .comments > .comment .content p .name {
  font-weight: bold;
  font-size: 0.9rem;
  margin-right: 0.25rem;
}
.post > .comments > .comment .content button {
  padding: 10px;
  margin: 0;
  margin-right: 0.5em;
  color: rgba(0, 0, 0, 0.7);
  font-weight: bold;
  user-select: none;
}
.post > .comments > .comment .content button.liked {
  color: #1B98E0;
}
.post > .comments > .comment .content .likes,
.post > .comments > .comment .content .replies {
  display: inline-block;
  font-size: 0.8rem;
  text-align: right;
  float: right;
  color: rgba(0, 0, 0, 0.5);
  margin-left: 0.5em;
  vertical-align: middle;
}
.post > .comments > .comment .option {
  display: grid;
  justify-content: content;
  align-content: start;
}
.post > .comments > .comment .option button {
  transition: .1s;
  opacity: 0;
}
.post > .comments > .comment .option button i,
.post > .comments > .comment .option button svg {
  transform: rotate(90deg);
  color: rgba(0, 0, 0, 0.5);
}

.wall-menu ul {
     margin: 10px 0 0 0;
     opacity: 0;
     visibility: hidden;
     position: absolute;
     max-width: 100px;
     top: 60px;
     right: 10px;
     z-index: 9999;
     padding: 10px 0;
     background: #fff;
     border-radius: 6px;
     border: 1px solid #eee;
     transition: all .2s ease-in-out;
}
.wall-menu ul.wall-menu-vis {
     opacity: 1;
     visibility: visible;
     top: 40px;
}
.wall-menu ul li {
     float:left;
     width:100%;
     padding:4px 0;
}
.wall-menu ul li a {
     color: #50596E;
     float: left;
     width: 100%;
     font-weight: 600;
     font-size:12px;
     text-align: left;
     padding: 6px 15px;
}