EN TR
<header class="header">
	<div class="container">

		<a href="#" class="logo">
			<img src="img/logo.svg" alt="">
		</a>

		<div class="search">
			<i class="icon-search"></i>
			<input type="text" placeholder="Search...">
		</div>

		<nav class="menu">
			<ul>
				<li class="active">
					<a href="#">
						<i class="icon-home"></i>
						<span>Home</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon-users"></i>
						<span>Users</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon-briefcase"></i>
						<span>Jobs</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon-message"></i>
						<span>Messages</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon-notification"></i>
						<span>Notifications</span>
					</a>
				</li>
				<li>
					<a href="#">
						<i class="icon-grid"></i>
						<span>Applications</span>
					</a>
				</li>
			</ul>
		</nav>

		<div class="user-menu">
			<a href="#">
				<span class="detail">
					<span class="name">Cameron Williamson</span>
					<span class="status online">Online</span>
				</span>
				<img src="img/avatar.png" alt="">
				<i class="icon-down-open"></i>
			</a>
		</div>

	</div>
</header>

<main>
	<div class="container">
		<div class="sidebar">
			<div class="widget widget-stats">
				<div class="stat-user">
					<div class="cover"></div>
					<div class="avatar">
						<img src="img/avatar.png" alt="">
					</div>
					<div class="name">Cameron Williamson</div>
					<div class="job-title">Business Analyst</div>
				</div>
				<ul>
					<li>
						<span class="key">Who viewed your profile</span>
						<span class="value">90</span>
					</li>
					<li>
						<span class="key">Views of your post</span>
						<span class="value">627</span>
					</li>
				</ul>
			</div>
			<div class="widget widget-newest">
				<h6>NEWEST</h6>
				<ul>
					<li>
						<a href="#">
							<i class="icon-hash"></i>
							money
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-hash"></i>
							economy
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-hash"></i>
							markets
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-hash"></i>
							futurism
						</a>
					</li>
				</ul>
				<h6>
					GROUP
					<div class="dropdown">
						<a href="#">
							Active <i class="icon-down-open"></i>
						</a>
					</div>
				</h6>
				<ul>
					<li>
						<a href="#">
							<i class="icon-users"></i>
							Android Developers Group
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-users"></i>
							User Interface
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-users"></i>
							Prototurk Group
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-users"></i>
							Design Thinking
						</a>
					</li>
				</ul>
			</div>
			<a href="#" class="widget widget-btn">
				Add Event
				<i class="icon-plus"></i>
			</a>
			<a href="#" class="widget widget-btn more">
				Find More
			</a>
		</div>
		<div class="content">
		
			<div class="create-post">
				<textarea name="" placeholder="Create post.." id="" cols="30" rows="10"></textarea>
				<ul class="actions">
					<li>
						<label>
							<input type="file" accept="image/*">
							<i class="icon-camera"></i>
							Photo
						</label>
					</li>
					<li>
						<label>
							<input type="file">
							<i class="icon-video"></i>
							Video
						</label>
					</li>
					<li>
						<a href="#">
							<i class="icon-calendar"></i>
							Event
						</a>
					</li>
					<li>
						<a href="#">
							<i class="icon-edit"></i>
							Write Articles
						</a>
					</li>
				</ul>
			</div>

			<div class="filter-box">
				<h6>Filter post by :</h6>
				<label class="selectbox">
					<select name="" id="">
						<option value="">Popular</option>
						<option value="">Popular</option>
						<option value="">Popular</option>
					</select>
					<i class="icon-down-open"></i>
				</label>
			</div>

			<div class="post">
				<div class="post-header">
					<a href="#" class="post-author">
						<img src="img/avatar.png" alt="">
						<div class="detail">
							<div class="name">Brooklyn Simmons</div>
							<div class="job-title">UI/UX Designer at Freelance</div>
							<div class="date">7 hour ago</div>
						</div>
					</a>
					<a href="#" class="more">
						<i class="icon-dot-3"></i>
					</a>
				</div>
				<div class="post-content">
					<p>
						He said, Design is not just what it looks and feels like. Design is how it work
					</p>
					<p>
						<a href="#">#stevejobs</a> <a href="#">#design</a> <a href="#">#apple</a>
					</p>
					<p>
						<img src="img/stevejobs.png" alt="">
					</p>
				</div>
				<div class="post-alt-detail">
					<div class="likes">
						<i class="icon-heart"></i>
						<i class="icon-thumbs-up"></i>
						172
					</div>
					<div class="comments">
						10 Comment
					</div>
				</div>
				<div class="post-actions">
					<a href="#">
						<i class="icon-thumbs-up"></i> Like
					</a>
					<a href="#">
						<i class="icon-message"></i> Comment
					</a>
					<a href="#">
						<i class="icon-share"></i> Share
					</a>
					<a href="#">
						<i class="icon-send"></i> Send
					</a>
				</div>
				<div class="post-comment-form">
					<img src="img/avatar.png" alt="">
					<div class="textarea">
						<textarea name="" placeholder="Write comment" id="" cols="30" rows="10"></textarea>
						<label>
							<input type="file" accept="image/*">
							<i class="icon-camera"></i>
						</label>
					</div>
				</div>
			</div>

			<div class="post">
				<div class="post-header">
					<a href="#" class="post-author">
						<img src="img/avatar.png" alt="">
						<div class="detail">
							<div class="name">Brooklyn Simmons</div>
							<div class="job-title">UI/UX Designer at Freelance</div>
							<div class="date">7 hour ago</div>
						</div>
					</a>
					<a href="#" class="more">
						<i class="icon-dot-3"></i>
					</a>
				</div>
				<div class="post-content">
					<p>
						He said, Design is not just what it looks and feels like. Design is how it work
					</p>
					<p>
						<a href="#">#stevejobs</a> <a href="#">#design</a> <a href="#">#apple</a>
					</p>
					<p>
						<img src="img/stevejobs.png" alt="">
					</p>
				</div>
				<div class="post-alt-detail">
					<div class="likes">
						<i class="icon-heart"></i>
						<i class="icon-thumbs-up"></i>
						172
					</div>
					<div class="comments">
						10 Comment
					</div>
				</div>
				<div class="post-actions">
					<a href="#">
						<i class="icon-thumbs-up"></i> Like
					</a>
					<a href="#">
						<i class="icon-message"></i> Comment
					</a>
					<a href="#">
						<i class="icon-share"></i> Share
					</a>
					<a href="#">
						<i class="icon-send"></i> Send
					</a>
				</div>
				<div class="post-comment-form">
					<img src="img/avatar.png" alt="">
					<div class="textarea">
						<textarea name="" placeholder="Write comment" id="" cols="30" rows="10"></textarea>
						<label>
							<input type="file" accept="image/*">
							<i class="icon-camera"></i>
						</label>
					</div>
				</div>
			</div>

			<div class="post">
				<div class="post-header">
					<a href="#" class="post-author">
						<img src="img/avatar.png" alt="">
						<div class="detail">
							<div class="name">Brooklyn Simmons</div>
							<div class="job-title">UI/UX Designer at Freelance</div>
							<div class="date">7 hour ago</div>
						</div>
					</a>
					<a href="#" class="more">
						<i class="icon-dot-3"></i>
					</a>
				</div>
				<div class="post-content">
					<p>
						He said, Design is not just what it looks and feels like. Design is how it work
					</p>
					<p>
						<a href="#">#stevejobs</a> <a href="#">#design</a> <a href="#">#apple</a>
					</p>
					<p>
						<img src="img/stevejobs.png" alt="">
					</p>
				</div>
				<div class="post-alt-detail">
					<div class="likes">
						<i class="icon-heart"></i>
						<i class="icon-thumbs-up"></i>
						172
					</div>
					<div class="comments">
						10 Comment
					</div>
				</div>
				<div class="post-actions">
					<a href="#">
						<i class="icon-thumbs-up"></i> Like
					</a>
					<a href="#">
						<i class="icon-message"></i> Comment
					</a>
					<a href="#">
						<i class="icon-share"></i> Share
					</a>
					<a href="#">
						<i class="icon-send"></i> Send
					</a>
				</div>
				<div class="post-comment-form">
					<img src="img/avatar.png" alt="">
					<div class="textarea">
						<textarea name="" placeholder="Write comment" id="" cols="30" rows="10"></textarea>
						<label>
							<input type="file" accept="image/*">
							<i class="icon-camera"></i>
						</label>
					</div>
				</div>
			</div>

			<div class="post">
				<div class="post-header">
					<a href="#" class="post-author">
						<img src="img/avatar.png" alt="">
						<div class="detail">
							<div class="name">Brooklyn Simmons</div>
							<div class="job-title">UI/UX Designer at Freelance</div>
							<div class="date">7 hour ago</div>
						</div>
					</a>
					<a href="#" class="more">
						<i class="icon-dot-3"></i>
					</a>
				</div>
				<div class="post-content">
					<p>
						He said, Design is not just what it looks and feels like. Design is how it work
					</p>
					<p>
						<a href="#">#stevejobs</a> <a href="#">#design</a> <a href="#">#apple</a>
					</p>
					<p>
						<img src="img/stevejobs.png" alt="">
					</p>
				</div>
				<div class="post-alt-detail">
					<div class="likes">
						<i class="icon-heart"></i>
						<i class="icon-thumbs-up"></i>
						172
					</div>
					<div class="comments">
						10 Comment
					</div>
				</div>
				<div class="post-actions">
					<a href="#">
						<i class="icon-thumbs-up"></i> Like
					</a>
					<a href="#">
						<i class="icon-message"></i> Comment
					</a>
					<a href="#">
						<i class="icon-share"></i> Share
					</a>
					<a href="#">
						<i class="icon-send"></i> Send
					</a>
				</div>
				<div class="post-comment-form">
					<img src="img/avatar.png" alt="">
					<div class="textarea">
						<textarea name="" placeholder="Write comment" id="" cols="30" rows="10"></textarea>
						<label>
							<input type="file" accept="image/*">
							<i class="icon-camera"></i>
						</label>
					</div>
				</div>
			</div>

		</div>
		<div class="sidebar">
			<div class="widget widget-recommendation">
				<h6>Add to Your Feeds</h6>
				<ul>
					<li>
						<a href="#">
							<span class="image">
								<img src="img/brand1.png" alt="">
							</span>
							<span class="detail">
								<span class="name">Techin Asia Indonesia</span>
								<span class="alt-name">Corporate - Online Media</span>
							</span>
						</a>
						<a href="#">
							<i class="icon-plus"></i>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="image">
								<img src="img/brand2.png" alt="">
							</span>
							<span class="detail">
								<span class="name">Techin Asia Indonesia</span>
								<span class="alt-name">Corporate - Online Media</span>
							</span>
						</a>
						<a href="#">
							<i class="icon-plus"></i>
						</a>
					</li>
					<li>
						<a href="#">
							<span class="image">
								<img src="img/brand3.png" alt="">
							</span>
							<span class="detail">
								<span class="name">Techin Asia Indonesia</span>
								<span class="alt-name">Corporate - Online Media</span>
							</span>
						</a>
						<a href="#">
							<i class="icon-plus"></i>
						</a>
					</li>
				</ul>
				<a href="#" class="widget-button">
					See All Recomendation
				</a>
			</div>
			<div class="widget widget-marketing">
				<h6>
					<div>
						Advertisement
						<span class="description">
							Get the latest news and job vacancies
						</span>
					</div>
					<a href="#" class="more-btn">
						<i class="icon-dot-3"></i>
					</a>
				</h6>
				<div class="get-updates">
					<div class="avatars">
						<a href="#">
							<img src="img/avatar.png" alt="">
						</a>
						<a href="#">
							<img src="img/brand4.png" alt="">
						</a>
					</div>
					<p>
						Cameron, Get update from <span>Interaction Design Foundations</span>
					</p>
				</div>
				<a href="#" class="widget-button">
					Visit Now
				</a>
			</div>
			<footer class="footer">
				<nav>
					<a href="#">
						About
					</a>
					<a href="#">
						Help Center
					</a>
					<a href="#">
						Accessibility 
					</a>
					<a href="#">
						Privacy & Terms 
					</a>
					<a href="#">
						Ad Choices
					</a>
					<a href="#">
						Advertising 
					</a>
					<a href="#">
						Business Services 
					</a>
					<a href="#">
						Get the LinkedIn app
					</a>
					<a href="#">
						More
					</a>
				</nav>
				<div class="copyright">
					<p>
						LinkedIn Corporation © 2020
					</p>
					<a href="#">
						<img src="img/logo.svg" alt="">
					</a>
				</div>
			</footer>
		</div>
	</div>
</main>

<div class="message-box">
	<div class="message-header">
		<div class="img">
			<img src="img/avatar.png" alt="">
		</div>
		Messaging
		<div class="actions">
			<a href="#">
				<i class="icon-edit"></i>
			</a>
			<a href="#">
				<i class="icon-dot-3"></i>
			</a>
			<a href="#">
				<i class="icon-up-open"></i>
			</a>
		</div>
	</div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Roboto:[email protected];500&display=swap');

@import "icon-font";

:root {
  --color: #006699;
}

* {
  padding: 0;
  margin: 0;
  list-style: none;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
  font-family: 'Roboto', sans-serif;

  &:focus {
    outline: 0;
  }
}

body {
  background-color: #F5F6F8;
}

.container {
  width: 1140px;
  margin: 0 auto;
}

.header {
  background-color: #fff;
  margin-bottom: 16px;
  position: sticky;
  top: 0;
  z-index: 10;

  .container {
    height: 56px;
    display: flex;
    align-items: center;

    .search {
      margin-left: 18px;
      position: relative;

      i {
        position: absolute;
        top: 0;
        left: 0;
        height: 32px;
        width: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #aaa;
      }

      input {
        height: 32px;
        width: 100%;
        border-radius: 4px;
        background-color: rgba(#DEDEDE, .32);
        font-size: 14px;
        padding: 0 15px 0 44px;

        &::placeholder {
          color: #AAAAAA;
        }
      }
    }

    .menu {
      margin: 0 auto;

      ul {
        display: flex;

        li {
          a {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 13px;
            color: #aaa;

            i {
              font-size: 20px;
            }

            span {
              display: none;
            }

            &:hover {
              color: var(--color);
            }
          }

          &.active {
            a {
              color: var(--color);

              i {
                margin-right: 5px;
              }

              span {
                display: block;
              }
            }
          }
        }
      }
    }

    .user-menu {
      > a {
        display: flex;
        align-items: center;

        .detail {
          display: flex;
          flex-direction: column;
          text-align: right;
          margin-right: 6px;

          .name {
            font-size: 12px;
            color: #17272F;
          }

          .status {
            font-size: 10px;

            &.online {
              color: #31B057;
            }

            &.offline {
              color: #b03131;
            }
          }
        }

        img {
          width: 24px;
          height: 24px;
          min-width: 24px;
          border-radius: 50%;
          object-fit: cover;
        }

        i {
          color: #A7B4CC;
          font-size: 12px;
          margin-left: 5px;
        }
      }
    }
  }
}

main {
  .container {
    display: flex;

    .sidebar {
      min-width: 270px;
      width: 270px;

      .widget {
        margin-bottom: 16px;
        background-color: #fff;
        border-radius: 6px;
        padding: 15px;
        
        .widget-button {
          display: flex;
          height: 40px;
          align-items: center;
          justify-content: center;
          text-align: center;
          border-radius: 6px;
          font-size: 14px;
          font-weight: 500;
          color: var(--color);
          transition: 300ms background-color, 300ms color;
          &:hover {
            background: var(--color);
            color: #fff;
          }
        }

        h6 {
          font-size: 14px;
          font-weight: 500;
          color: #17272F;
          padding-bottom: 8px;
          border-bottom: 1px solid #EDF0F5;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .description {
            display: block;
            font-size: 10px;
            color: #aaa;
            font-weight: normal;
            margin-top: 4px;
          }

          .more-btn {
            color: #aaa;
            font-size: 16px;
            align-self: flex-start;
            &:hover {
              color: var(--color);
            }
          }

          .dropdown {
            a {
              display: flex;
              align-items: center;
              font-size: 14px;
              color: #31B057;
              font-weight: normal;

              i {
                font-size: 10px;
                color: #aaa;
                margin-left: 5px;
              }
            }
          }
        }
      }

      .widget-stats {
        padding: 8px;

        .stat-user {
          text-align: center;
          padding-bottom: 16px;
          margin-bottom: 16px;
          border-bottom: 1px solid #EDF0F5;

          .cover {
            height: 43px;
            background: url(../img/cover-bg.png) no-repeat center center;
            background-size: cover;
            border-radius: 4px;
          }

          .avatar {
            text-align: center;
            margin-top: -26px;
            margin-bottom: 10px;

            img {
              width: 52px;
              height: 52px;
              border-radius: 50%;
              display: block;
              margin: 0 auto;
              border: 2px solid #fff;
            }
          }

          .name {
            font-size: 16px;
            font-weight: 500;
            color: #17272F;
          }

          .job-title {
            font-size: 14px;
            color: #aaa;
            margin-top: 4px;
          }
        }

        ul {
          padding: 0 7px 11px;

          li {
            display: flex;
            justify-content: space-between;
            font-size: 14px;

            .key {
              color: #17272F;
            }

            .value {
              color: var(--color);
              font-weight: 500;
            }

            &:not(:last-child) {
              margin-bottom: 16px;
            }
          }
        }
      }

      .widget-newest {

        ul {
          padding-bottom: 30px;

          &:last-child {
            padding-bottom: 0;
          }

          li {
            a {
              display: flex;
              align-items: center;
              font-size: 12px;
              color: var(--color);
              padding: 4px 0;

              &:hover {
                color: #222;
              }

              i {
                width: 21px;
                font-size: 11px;

                &.icon-hash {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }

      .widget-btn {
        height: 50px;
        padding: 0 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #17272F;
        font-size:

        i {
          color: var(--color);
        }

        &.more {
          height: 56px;
          justify-content: center;
          font-weight: 500;
          font-size: 14px;
          color: var(--color);
          transition: 300ms background-color, 300ms color;

          &:hover {
            background: var(--color);
            color: #ffffff;
          }
        }
      }

      .widget-recommendation {
        ul {
          li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 16px;

            a:first-child {
              display: flex;
              align-items: center;

              .image {
                min-width: 24px;
                margin-right: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                img {
                  max-width: 100%;
                }
              }
              .detail {
                display: flex;
                flex-direction: column;
                .name {
                  font-size: 14px;
                  color: #17272F;
                  font-weight: 500;
                }
                .alt-name {
                  font-size: 12px;
                  color: #AAAAAA;
                  padding-top: 3px;
                }
              }
            }
            a:last-child {
              min-width: 24px;
              width: 24px;
              height: 24px;
              border: 1px solid var(--color);
              color: var(--color);
              border-radius: 4px;
              font-size: 13px;
              display: grid;
              place-items: center;
              transition: 300ms background-color, 300ms color;
              &:hover {
                background: var(--color);
                color: #fff;
              }
            }
          }
        }
      }

      .widget-marketing {
        padding: 20px 16px 10px;
        .get-updates {
          .avatars {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 14px 30px 0;
            a {
              img {
                border-radius: 50%;
                width: 72px;
                height: 72px;
              }
            }
          }
          p{
            margin-top: 18px;
            font-size: 14px;
            color: #17272F;
            line-height: 20px;
            margin-bottom: 10px;
            span {
              font-weight: 500;
            }
          }
        }
      }

      .footer {
        padding-top: 38px;
        position: sticky;
        top: 50px;
        nav {
          display: flex;
          flex-wrap: wrap;
          border-bottom: 1px solid #DEDEDE;
          margin-bottom: 12px;
          a {
            font-size: 10px;
            color: #aaa;
            margin-right: 15px;
            margin-bottom: 16px;
          }
        }
        .copyright {
          display: flex;
          align-items: center;
          font-size: 10px;
          color: #aaa;
          justify-content: space-between;
          img {
            height: 12px;
          }
        }
      }

    }

    .content {
      flex: 1;
      margin: 0 30px;

      .create-post {
        background-color: #fff;
        padding: 16px 16px 10px;
        border-radius: 6px;
        margin-bottom: 20px;
        textarea {
          width: 100%;
          resize: none;
          height: 60px;
          font-size: 14px;
          &::placeholder {
            color: #aaa;
          }
        }
        .actions {
          border-top: 1px solid #EDF0F5;
          display: flex;
          padding-top: 8px;
          li {
            flex: auto;
            label {
              cursor: pointer;
              input {
                display: none;
              }
            }
            label, a {
              display: flex;
              align-items: center;
              justify-content: center;
              color: #17272F;
              font-size: 14px;
              padding: 7px 0;
              border-radius: 4px;
              &:hover {
                background: #f7f7f7;
              }
              i {
                margin-right: 8px;
                font-size: 16px;
                &.icon-camera {
                  color: #31B057;
                }
                &.icon-video {
                  color: #388BF2;
                  font-size: 13px;
                  margin-right: 12px;
                }
                &.icon-calendar {
                  color: #FC8338;
                }
                &.icon-edit {
                  color: #E52A34;
                }
              }
            }
          }
        }
      }

      .filter-box {
        margin-bottom: 14px;
        height: 42px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: rgba(#DEDEDE, .24);
        border-radius: 6px;
        padding: 0 20px;
        color: #17272F;
        h6{
          font-size: 14px;
          font-weight: normal;
        }
        .selectbox {
          position: relative;
          select {
            appearance: none;
            background: transparent;
            font-size: 14px;
            font-weight: 500;
            color: #17272F;
            padding-right: 30px;
            position: relative;
            top: -2px;
          }
          i {
            position: absolute;
            right: 0;
            font-size: 12px;
            color: #aaa;
            pointer-events: none;
          }
        }
      }

      .post {
        background-color: #fff;
        border-radius: 6px;
        padding: 13px 16px 20px;
        margin-bottom: 20px;
        .post-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-bottom: 9px;
          border-bottom: 1px solid #EDF0F5;
          .post-author {
            display: flex;
            align-items: center;
            img {
              width: 36px;
              height: 36px;
              border-radius: 50%;
              margin-right: 12px;
            }
            .name {
              font-size: 14px;
              font-weight: 500;
              color: #17272F;
            }
            .date,
            .job-title {
              font-size: 10px;
              color: #aaa;
            }
            .job-title {
              padding: 2px 0;
            }
          }
          .more {
            color: #aaa;
            font-size: 18px;
            &:hover {
              color: var(--color);
            }
          }
        }
        .post-content {
          padding: 20px 0;
          p {
            font-size: 14px;
            margin-bottom: 12px;
            img {
              max-width: 100%;
            }
            &:last-child {
              margin-bottom: 0;
            }
            a {
              font-weight: 500;
              color: var(--color);
              &:hover {
                text-decoration: underline;
              }
            }
          }
        }
        .post-actions {
          display: flex;
          padding-bottom: 20px;
          a {
            font-size: 16px;
            color: #aaa;
            margin-right: 15px;
            display: flex;
            align-items: center;
            i {
              font-size: 20px;
              margin-right: 5px;
            }
            &:hover {
              color: var(--color);
            }
          }
        }
        .post-alt-detail {
          display: flex;
          font-size: 10px;
          color: #17272F;
          align-items: center;
          padding-bottom: 14px;
          border-bottom: 1px solid #EDF0F5;
          margin-bottom: 14px;
          .likes {
            display: flex;
            margin-right: 10px;
            padding-right: 10px;
            align-items: center;
            position: relative;
            &::before {
              content: '';
              width: 2px;
              height: 2px;
              border-radius: 50%;
              background: #17272F;
              position: absolute;
              top: 50%;
              right: -1px;
              margin-top: -1px;
            }
          }
          i {
            font-size: 14px;
            margin-right: 10px;
            position: relative;
            z-index: 1;
            &::after {
              content: '';
              width: 11px;
              height: 11px;
              border-radius: 50%;
              position: absolute;
              top: 2px;
              left: 2px;
              z-index: -1;
            }
            &.icon-heart {
              color: #E52A34;
              &::after {
                background: rgba(#E52A34, .32);
              }
            }
            &.icon-thumbs-up {
              color: #388BF2;
              &::after {
                background: rgba(#388BF2, .32);
              }
            }
          }
        }
        .post-comment-form {
          display: flex;
          align-items: center;
          img {
            min-width: 32px;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            margin-right: 12px;
          }
          .textarea {
            flex: 1;
            border: 1px solid #EDF0F5;
            border-radius: 6px;
            display: flex;
            align-items: center;
            padding: 8px;
            textarea {
              background: transparent;
              width: 100%;
              flex: 1;
              padding: 8px;
              resize: none;
              height: 36px;
              font-size: 14px;
              &::placeholder {
                color: #DEDEDE;
              }
            }
            label {
              cursor: pointer;
              border-left: 1px solid #EDF0F5;
              padding-left: 16px;
              font-size: 18px;
              color: #A7B4CC;
              padding-right: 5px;
              &:hover {
                color: var(--color);
              }
              input {
                display: none;
              }
            }
          }
        }
      }

    }
  }
}

.message-box {
  position: fixed;
  bottom: 0;
  right: 50px;
  z-index: 10;
  .message-header {
    width: 270px;
    height: 56px;
    display: flex;
    align-items: center;
    background: linear-gradient(289.57deg, #006699 20.9%, #009099 111.3%);
    border-radius: 6px 6px 0 0;
    padding: 0 10px;
    font-size: 14px;
    color: #fff;
    .img {
      position: relative;
      &::before {
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: red;
        position: absolute;
        bottom: -6px;
        left: 50%;
        margin-left: -8px;
        border: 1px solid #fff;
      }
      &.online::before {
        background: #31B057;
      }
      img {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        display: block;
        border: 1px solid #fff;
        margin-right: 7px;
      }
    }
    .actions {
      display: flex;
      margin-left: auto;
      a {
        width: 34px;
        height: 34px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        font-size: 15px;
        margin-left: 5px;
        border-radius: 50%;
        &:hover {
          background: rgba(#fff,.1);
        }
      }
    }
  }
}