<link href="https://fonts.googleapis.com/css?family=DM+Sans:400,500,700&display=swap" rel="stylesheet">
<div class="app-wrapper">
  <div class="left-area hide-on-mobile">
    <div class="app-header">Video.
      <span class="inner-text">ply</span>
      <button class="close-menu">
        <svg width="24" height="24" fill="none" stroke="#51a380" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-x">
          <defs />
          <path d="M18 6L6 18M6 6l12 12" />
        </svg>
      </button>
    </div>
    <div class="left-area-content">
      <div class="profile">
        <img src="https://images.unsplash.com/photo-1496340672773-0b29c9b17ed2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="">
        <div class="profile-info">
          <span class="profile-name">Michealla Cruz</span>
          <span class="country">Country</span>
        </div>
      </div>
      <div class="page-link-list">
        <a href="#" class="item-link active" id="pageLink">
          <svg class="link-icon" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-home" viewBox="0 0 24 24">
            <defs />
            <path d="M3 9l9-7 9 7v11a2 2 0 01-2 2H5a2 2 0 01-2-2z" />
            <path d="M9 22V12h6v10" /></svg>
          Home</a>
        <a href="#" class="item-link" id="pageLink">
          <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-heart">
            <path d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z" />
          </svg>
          Favourites</a>
        <a href="#" class="item-link" id="pageLink">
          <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-play">
            <path d="M5 3l14 9-14 9V3z" />
          </svg>
          My Contents</a>
        <a href="#" class="item-link" id="pageLink">
          <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-list">
            <path d="M8 6h13M8 12h13M8 18h13M3 6h.01M3 12h.01M3 18h.01" />
          </svg>
          Playlist</a>
        <a href="#" class="item-link" id="pageLink">
          <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-clock">
            <circle cx="12" cy="12" r="10" />
            <polyline points="12 6 12 12 16 14" /></svg>
          History</a>
      </div>
      <div class="list-header">
        <span class="">Private</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
          <circle cx="12" cy="12" r="10" />
          <line x1="12" y1="8" x2="12" y2="16" />
          <line x1="8" y1="12" x2="16" y2="12" /></svg>
      </div>
      <a href="#" class="item-link" id="pageLink">
        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock">
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
          <path d="M7 11V7a5 5 0 0110 0v4" />
        </svg>
        Studio Records</a>
      <a href="#" class="item-link" id="pageLink">
        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-lock">
          <rect x="3" y="11" width="18" height="11" rx="2" ry="2" />
          <path d="M7 11V7a5 5 0 0110 0v4" />
        </svg>
        Personal</a>
      <div class="list-header">
        <span class="">Public</span>
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-plus-circle">
          <circle cx="12" cy="12" r="10" />
          <line x1="12" y1="8" x2="12" y2="16" />
          <line x1="8" y1="12" x2="16" y2="12" /></svg>
      </div>
      <a href="#" class="item-link" id="pageLink">
        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" /></svg>
        Vlogs</a>
      <a href="#" class="item-link" id="pageLink">
        <svg class="link-icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-folder">
          <path d="M22 19a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h5l2 3h9a2 2 0 0 1 2 2z" /></svg>
        Dance</a>
    </div>
    <button class="btn-invite">Invite Team</button>
  </div>
  <div class="right-area">
    <div class="right-area-upper">
      <button class="menu-button">
        <svg width="24" height="24" fill="none" stroke="#51a380" stroke-linecap="round" stroke-linejoin="round" stroke-width="2">
          <defs />
          <path d="M3 12h18M3 6h18M3 18h18" />
        </svg>
      </button>
      <div class="search-part-wrapper">
        <input class="search-input" type="text" placeholder="Search videos...">
        <a class="menu-links" href="#">Explore</a>
        <a class="menu-links" href="#">Events</a>
        <button class="more-button">
          <svg width="24" height="24" fill="none" stroke="#51a380" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" class="feather feather-more-vertical">
            <defs />
            <circle cx="12" cy="12" r="1" />
            <circle cx="12" cy="5" r="1" />
            <circle cx="12" cy="19" r="1" />
          </svg>
        </button>
        <ul class="more-menu-list hide">
          <li><a href="#">Explore</a></li>
          <li><a href="#">Events</a></li>
          <li> <button class="action-buttons btn-record">Record</button></li>
          <li><button class="action-buttons btn-upload">Upload</button></li>
        </ul>
      </div>
      <button class="btn-notification">
        <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="#232428" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-bell">
          <path d="M18 8A6 6 0 006 8c0 7-3 9-3 9h18s-3-2-3-9M13.73 21a2 2 0 01-3.46 0" />
        </svg>
        <span>3</span>
      </button>
      <div class="action-buttons-wrapper">
        <button class="action-buttons btn-record">Record</button>
        <button class="action-buttons btn-upload">Upload</button>
      </div>
    </div>
    <div class="page-right-content">
      <div class="content-line content-line-hero">
        <div class="line-header">
          <span class="header-text">New Uploads</span>
        </div>
        <div class="slider-wrapper owl-carousel owl-theme" id="owl-slider-1">
          <div class="item hero-img-wrapper img-1">
            <div class="upload-text-wrapper">
              <p class="upload-text-header">The </p>
              <p class="upload-text-info">By Pravin <span> 20 minutes ago</span></p>
            </div>
            <img src="https://images.unsplash.com/photo-1485846234645-a62644f84728?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2240&q=80" alt="SlideShow">
          </div>
          <div class="item hero-img-wrapper img-2">
            <div class="upload-text-wrapper">
              <p class="upload-text-header">History of Art</p>
              <p class="upload-text-info">By Pravin <span> 10 minutes ago</span></p>
            </div>
            <img src="https://images.unsplash.com/photo-1485518994577-6cd6324ade8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2144&q=80" alt="SlideShow">
          </div>
          <div class="item hero-img-wrapper img-3">
            <div class="upload-text-wrapper">
              <p class="upload-text-header">Van Life</p>
              <p class="upload-text-info">By Tess <span> 3 days ago</span></p>
            </div>
            <img src="https://images.unsplash.com/photo-1469854523086-cc02fe5d8800?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2208&q=80" alt="SlideShow">
          </div>
        </div>
      </div>
      <div class="content-line content-line-list">
        <div class="line-header">
          <span class="header-text">Trending</span>
        </div>
        <div id="owl-slider-2" class="slider-wrapper owl-carousel">
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1532673492-1b3cdb05d51b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Minimal Photography</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1531736275454-adc48d079ce9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Puppet Theatre</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1562832275-4b5d7650c888?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Road Trip</p>
              <p class="video-description-subheader">By Wallace</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1523554888454-84137e72c3ce?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Young Folks</p>
              <p class="video-description-subheader">By Peter</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1502691876148-a84978e59af8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Minimal Photography</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1518272417499-b6ebd5fab96a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2181&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Puppet Theatre</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1555298472-8c43a95ddb8f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Road Trip</p>
              <p class="video-description-subheader">By Wallace</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1459664018906-085c36f472af?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Young Folks</p>
              <p class="video-description-subheader">By Peter</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>

        </div>
      </div>
      <div class="content-line content-line-list">
        <div class="line-header">
          <span class="header-text">Public</span>
        </div>
        <div id="owl-slider-3" class="slider-wrapper owl-carousel">
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1494252713559-f26b4bf0b174?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Minimal Photography</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1524678714210-9917a6c619c2?ixlib=rb-1.2.1&auto=format&fit=crop&w=2249&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Puppet Theatre</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1523049673857-eb18f1d7b578?ixlib=rb-1.2.1&auto=format&fit=crop&w=2168&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Road Trip</p>
              <p class="video-description-subheader">By Wallace</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1502136969935-8d8eef54d77b?ixlib=rb-1.2.1&auto=format&fit=crop&w=2249&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Young Folks</p>
              <p class="video-description-subheader">By Peter</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1490535004195-099bc723fa1f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=3280&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Minimal Photography</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1522410818928-5522dacd5066?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Puppet Theatre</p>
              <p class="video-description-subheader">By July</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1544509099-047faa4b96ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2167&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Road Trip</p>
              <p class="video-description-subheader">By Wallace</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
          <div class="item video-box-wrapper">
            <div class="img-preview">
              <img src="https://images.unsplash.com/photo-1533157461-59f499ba82e1?ixlib=rb-1.2.1&auto=format&fit=crop&w=2251&q=80" alt="video">
            </div>
            <div class="video-description-wrapper">
              <p class="video-description-header">Young Folks</p>
              <p class="video-description-subheader">By Peter</p>
              <p class="video-description-info">116K views <span>1 hour ago</span></p>
              <button class="btn-play"></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

* {
  box-sizing: border-box;
  outline: none;
}

%flex {
  display: flex;
  align-items: center;
}

$primary-font-color: #232428;
$secondary-font-color: #adadad;
$active-color: #499d77;

$green-dark: #51a380;
$green-light: #e6f1ed;

/*ICONS*/
@mixin playIcon($color) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23#{$color}' stroke='%23#{$color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpolygon points='5 3 19 12 5 21 5 3'/%3E%3C/svg%3E");
}

body {
  margin: 0;
  @extend %flex;
  justify-content: center;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  height: 100vh;
  padding: 20px;
  font-family: 'DM Sans', sans-serif;;
  font-size: 12px;
  background: linear-gradient(to top, #be93c5, #7bc6cc);
  
  @media screen and (max-width: 900px) {
    & { padding: 0; }
  }
}

button {
  border: none;
  cursor: pointer;
  background-color: transparent;
  transition: all .2s ease-in;
}

a {
  text-decoration: none;  
}

input[type=text] {
  border: none;
}

::-webkit-scrollbar {
  width: 6px;
  border-radius:10px;
}
::-webkit-scrollbar-track{
  background:none;
}
::-webkit-scrollbar-thumb {
  background: rgba(216, 216, 216,0.5);
  border-radius: 10px;
}

.app-wrapper {
  width: 100%;
  max-width: 1500px;
  height: 100vh;
  background-color: #fff;
  border-radius: 4px;
  box-shadow:
  0 0.3px 2.2px rgba(0, 0, 0, 0.011),
  0 0.7px 5.3px rgba(0, 0, 0, 0.016),
  0 1.3px 10px rgba(0, 0, 0, 0.02),
  0 2.2px 17.9px rgba(0, 0, 0, 0.024),
  0 4.2px 33.4px rgba(0, 0, 0, 0.029),
  0 10px 80px rgba(0, 0, 0, 0.04);
  overflow: hidden;
  display: flex;
  
  @media screen and (max-width: 900px) {
    & { border-radius: none; }
  }
}

.left-area {
  max-width: 190px;
  transition: all .6s linear;
  border-right: 1px solid #ddd;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding-bottom: 20px;
  
  &.hide-on-mobile {
    transition: all .6s linear;
    
    @media screen and (max-width: 900px) {
      & {
        left: -100%;
        opacity: 0;
      }
    }
  }
  
  @media screen and (max-width: 900px) {
    & {
      position: absolute;
      background-color: #fff;
      z-index: 2;
      left: 0;
      opacity: 1;
      box-shadow: 4px 0px 4px 0px rgba(222,222,222,0.3);
      border-right: none;
    }
  }
}

.app-header {
  font-size: 20px;
  font-weight: 500;
  color: $primary-font-color;
  background-repeat: no-repeat;
  background-size: 24px;
  background-position: center left 20px;
  padding: 20px 20px 20px 44px;
  @include playIcon('499d77');
  border-bottom: 1px solid #ddd;
  position: relative;
  
  .close-menu {
    display: none;
    position: absolute;
    top: 8px;
    right: 0;
    
    @media screen and (max-width: 900px) {
      & {
        display: block;
      }
    }
  }
}

.inner-text {
  color: $secondary-font-color;
}

.profile {
  display: flex;
  align-items: flex-start;
  cursor: pointer;
  padding: 20px;
  
  img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 6px;
    margin-right: 12px;
  }
  
  span {
    display: block;
    line-height: 20px;
  }
  
  .profile-name {
    color: $primary-font-color;
    font-weight: 500;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23bebebe' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-down'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E%0A");
    padding-right: 16px;
    background-position: center right;
    background-repeat: no-repeat;
    background-size: 16px;
  }
  
  .country {
    color: $secondary-font-color;
    font-weight: 500;
  }
}

.item-link {
  display: block;
  padding: 12px 20px;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  color: $secondary-font-color;
  transition: all .2s ease-in;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;

  &:not(:first-of-type) {
    margin-top: 10px;
  }

  &.active {
    color: $active-color;
    background-color: lighten($active-color,46%);
  }
  
  &:not(.active):hover {
    color: lighten($active-color,30%);
    background-color: lighten($active-color,52%);
  }
  
  .link-icon {
    width: 16px;
    display: inline-block;
    vertical-align: sub;
    margin-right: 4px;
  }
}

.list-header {
  font-size: 12px;
  color: $secondary-font-color;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding:  10px 20px;
  margin: 10px 0;
  transition: all .2s ease-in;
  cursor: pointer;
  background-color: lighten($secondary-font-color,30%);
  
  svg { transition: all .2s ease-in; }
  
  span {
    display: block;
    font-weight: 500;
  }
  
  &:hover svg {
    transition: all .2s ease-in; 
    fill: $secondary-font-color;
    line { stroke: #fff; }
  }
}

.btn-invite {
  background-color: $active-color;
  border: none;
  color: #fff;
  border-radius: 4px;
  padding: 10px;
  font-size: 14px;
  line-height: 20px;
  width: 100%;
  max-width: 160px;
  margin: 0 auto;
  display: block;
  margin-top: auto;
  
  &:hover {
    background-color: darken($active-color,4%);
  }
}

.left-area-content {
  flex: 1;
  overflow: auto;
}

.right-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: calc(100% - 190px);
  
  @media screen and (max-width: 900px) {
    & {
      max-width: 100%;
    }
  }
}

.right-area-upper {
  width: 100%;
  border-bottom: 1px solid #ddd;
  display: flex;
  max-height: 64px;
  padding: 0 20px;
  
  .menu-button {
    display: none;
  }
  
  @media screen and (max-width: 900px) {
    & {
      .menu-button {
        display: block;
      }
    }
  }
  
  @media screen and (max-width: 520px) {
    & { padding: 0 10px; }
  }
}

.search-input {
  flex: 1;
  width: 100%;
  font-size: 14px;
  line-height: 20px;
  color: #adadad;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23adadad' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-search'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='M21 21l-4.35-4.35'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center left 0px;
  padding: 10px 10px 10px 24px;
}

.search-part-wrapper {
  position: relative;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  flex: 1;
  
  a {
    color: $primary-font-color;
    font-size: 14px;
    font-weight: 500;
    
    + a { margin-left: 10px; }
  }
}

.more-menu-list {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff;
  z-index: 1;
  border-radius: 4px;
  box-shadow: 0px 2px 4px 2px rgba(209, 209, 209, 0.4);
  padding: 10px 0;
  transform-origin: center;
  
  &.hide { display: none; }
  
  &:before {
    content: '';
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #fff;
    transform: rotate(45deg);
    border-radius: 2px;
    top: -6px;
    right: 32px;
    box-shadow: 0px 0px 4px 0px rgba(209, 209, 209, 0.4);
  }
  
  li {
    padding: 8px 20px;
    list-style-type: none;
    cursor: pointer;
    
    &:hover {
      background-color: lighten(#e6f1ed,4%);
    }
  }
}

.btn-notification {
  position: relative;
  display: block;
  border: 1px solid #ddd;
  border-top: 0;
  border-bottom: 0;
  padding: 0 20px;
  
  span {
    position: absolute;
    background-color: red;
    color: #fff;
    border-radius: 50%;
    padding: 2px;
    width: 14px;
    height: 14px;
    right: 18px;
    top: 18px;
    font-size: 10px;
  }
}

.action-buttons {
  border-radius: 2px;
  padding: 10px 24px 10px 40px;
  font-size: 12px;
  color: $green-dark;
  background-size: 16px;
  background-repeat: no-repeat;
  background-position: center left 16px;
  max-height: 36px;
}

.btn-record {
  color: $green-dark;
  background-color: $green-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2351a380' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-video'%3E%3Cpath d='M23 7l-7 5 7 5V7z'/%3E%3Crect x='1' y='5' width='15' height='14' rx='2' ry='2'/%3E%3C/svg%3E ");
  margin-right: 20px;
  
  &:hover {
    background-color: darken($green-light,6%);
  }
}

.btn-upload {
  color: $green-light;
  background-color: $green-dark;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23e6f1ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-upload-cloud'%3E%3Cpath d='M16 16l-4-4-4 4M12 12v9'/%3E%3Cpath d='M20.39 18.39A5 5 0 0018 9h-1.26A8 8 0 103 16.3'/%3E%3Cpath d='M16 16l-4-4-4 4'/%3E%3C/svg%3E ");
  
  &:hover {
    background-color: lighten($green-dark,6%);
  }
}

.action-buttons-wrapper {
  padding: 0 20px;
  align-items: center;
  display: flex;
}

.page-right-content {
  flex: 1;
  padding: 20px;
  overflow: auto;
}

.content-line {
  width: 100%;
  position: relative;
  
  + .content-line { margin-top: 24px;  transition: .2s;}
  
  .header-text {
    display: block;
    line-height: 24px;
    font-weight: 500;
    font-size: 16px;
    color: $primary-font-color;
  }
}

.line-header {
  position: absolute;
  padding: 0 10px;
}

.content-line-hero .owl-dots {
  position: absolute;
  z-index: 12;
  left: 50%;
  transform: translatex(-50%);
  bottom: 24px;
  
  .owl-dot {
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 50%;
    margin: 0 2px;
    opacity: 0.5;
    padding: 0;
    
    &.active { opacity: 1; }
  }
}

.owl-nav {
  position: absolute;
  top: 0;
  right: 10px;
}

.owl-nav button {
  background-color: $green-dark;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  background-position: center;
  background-repeat: no-repeat;
  transition: all .2s ease-in;
  
  span { display: none; }
  
  &:hover {
    background-color: lighten($green-dark,6%);
  }
}

.owl-prev {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6f1ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-left'%3E%3Cpolyline points='15 18 9 12 15 6'/%3E%3C/svg%3E ");
  margin-right: 6px;
  
  &:hover {
    background-position: center left 2px;
  }
}

.owl-next {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23e6f1ed' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-chevron-right'%3E%3Cpath d='M9 18l6-6-6-6'/%3E%3C/svg%3E ");
  
  &:hover {
    background-position: center right 2px;
  }
}

.owl-carousel {
  position: relative;
  overflow: hidden;
}

.owl-item {
  padding: 6px 10px;
}

.owl-stage-outer { width: 100%; }

.hero-img-wrapper {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  flex-shrink: 0;
  border-radius: 4px;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.owl-carousel {
  position: relative;
  width: 100%;
  height: 280px;
  display: flex;
  align-items: center;
  padding-top: 32px;
  padding-bottom: 8px;
}

.upload-text {
  &-wrapper {
    position: absolute;
    top: 24px;
    left: 24px;
  }
  
  &-header {
    font-size: 16px;
    line-height: 24px;
    font-weight: 700;
    color: #fff;
    margin: 0;
  }
  
  &-info {
    font-size: 12px;
    font-weight: 400;
    color: #fff;
    margin: 0;
    opacity: .8;
    
    span {
      border-left: 1px solid #fff;
      padding-left: 4px;
    }
  }
}

.img-preview {
  flex: 1;
}

.video-box-wrapper {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0px 2px 4px 0px rgba(209,209,209,.4);
  margin-right: 10px;
  
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.video-description {
  &-wrapper {
    background-color: #fff;
    padding: 8px;
    position: relative;
    
    p {
      width: 100%;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  
  &-header {
    font-weight: 500;
    margin: 16px 0 4px  0;
    font-size: 14px;
  }
  
  &-subheader {
    color: #bebfbf;
    margin: 0;
    font-size: 12px;
  }
  
  &-info {
    font-size: 12px;
    margin: 4px 0;
    
    span {
      border-left: 1px solid #cdcdcd;
      padding-left: 4px;
    }
  }
}

.btn-play {
  position: absolute;
  top: -16px;
  right: 8px;
  background-color: #fff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  background-size: 14px;
  background-repeat: no-repeat;
  background-position: center;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2311a074' stroke='%2311a074' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='feather feather-play'%3E%3Cpath d='M5 3l14 9-14 9V3z' /%3E%3C/svg%3E");
  box-shadow: 0px 2px 4px 2px rgba(209,209,209,.4);
}

.more-button { display: none; }

@media screen and (max-width: 768px) {
  .menu-links {
    display: none;
  }
  
  .more-button {
    display: block;
  }
  
  .action-buttons-wrapper {
    display: none;
  }
}

#owl-slider-1 .hero-img-wrapper img{
    display: block;
    width: 100%;
}

.owl-stage {
  height: 250px;
  display: flex;
}

$(document).ready(function () {
  $("a#pageLink").click(function () {
    $("a#pageLink").removeClass("active");
    $(this).addClass("active");
  });

  $(".menu-button").click(function () {
    $(".left-area").removeClass("hide-on-mobile");
  });

  $(".close-menu").click(function () {
    $(".left-area").addClass("hide-on-mobile");
  });

  $(".more-button").click(function () {
    $(".more-menu-list").toggle("hide");
  });

  var owl = $("#owl-slider-1");
  $("#owl-slider-1").owlCarousel({
    navigation: true,
    slideSpeed: 400,
    paginationSpeed: 400,
    items: 1,
    itemsDesktop: false,
    itemsDesktopSmall: false,
    itemsTablet: false,
    itemsMobile: false,
    autoplay: true,
    autoPlaySpeed: 200,
    autoPlayTimeout: 100,
    autoplayHoverPause: true
  });
  // Custom Navigation Events
  $(".owl-next").click(function () {
    owl.trigger("owl.next");
  });
  $(".owl-prev").click(function () {});

  $(".play").click(function () {
    owl.trigger("owl.play", 100);
  });
  $(".stop").click(function () {
    owl.trigger("owl.stop");
  });

  var owl = $("#owl-slider-2");
  owl.owlCarousel({
    navigation: true,
    slideSpeed: 400,
    paginationSpeed: 400,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 4
      }
    }
  });

  var owl = $("#owl-slider-3");
  owl.owlCarousel({
    navigation: true,
    slideSpeed: 400,
    paginationSpeed: 400,
    responsive: {
      0: {
        items: 1
      },
      600: {
        items: 2
      },
      1000: {
        items: 4
      }
    }
  });
});