<div class="searchbox">
    <button class="btn-menu">
        <img src="https://img.icons8.com/cute-clipart/24/000000/top-menu.png">
    </button>
    <input id="search" type="text" placeholder="Search..." name="search" class="search">
  <button  class="btn-search">
      <img src="https://img.icons8.com/cotton/24/000000/search--v2.png">
    </button>
</div>


<div id="Modal" class="search-modal">
    <div class="search-modal-header">
        <h3>Search</h3>
        <span id="close"><img  src="https://img.icons8.com/cotton/24/000000/cancel--v2.png"></span>
    </div>
    <div class="search-modal-body">
      <div class="message">
          <div class="message-avatar">
              <img src="https://randomuser.me/api/portraits/women/57.jpg" alt="">
          </div>
        <div class="message-body">
            <p>New notification from kate morrison.</p>
          <small>20s ago</small>
        </div>
      </div>
      <div class="message">
          <div class="message-avatar">
              <img src="https://images.unsplash.com/photo-1488426862026-3ee34a7d66df?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=d5849d81af587a09dbcf3f11f6fa122f" alt="">
          </div>
        <div class="message-body">
            <p>New notification from Dianna Smiley.</p>
          <small>20s ago</small>
        </div>
      </div>
      <div class="message">
          <div class="message-avatar">
              <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6" alt="">
          </div>
        <div class="message-body">
            <p>New notification from Miyah Myles.</p>
          <small>20s ago</small>
        </div>
      </div>
      <div class="message">
          <div class="message-avatar">
              <img src="https://randomuser.me/api/portraits/women/57.jpg" alt="">
          </div>
        <div class="message-body">
            <p>New notification from kate morrison.</p>
          <small>20s ago</small>
        </div>
      </div>
      <div class="message">
          <div class="message-avatar">
              <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=200&fit=max&s=707b9c33066bf8808c934c8ab394dff6" alt="">
          </div>
        <div class="message-body">
            <p>New notification from Miyah Myles.</p>
          <small>20s ago</small>
        </div>
      </div>
    </div>
    
</div>

@import url('https://fonts.googleapis.com/css?family=Lexend+Deca|Dosis&display=swap');

body{
  margin: 0;
  padding: 16px;
  flex: 1;
  background: #2F94D8;
  justify-content: center;
  align-items: center;
  font-family: 'Lexend Deca', sans-serif;
  overflow-Y: none !important;
}

button {
  & img {
    transition: transform .25s;
  }
  &:hover{
    & > img {
        transform:scale(1.2);
    }
  }
  &:focus {
    outline: none;
  }
}

input {
  font-family: 'Lexend Deca', sans-serif;;
  &::placeholder{
    font-family: 'Lexend Deca', sans-serif;
  }
  &:focus{
    outline: none;
  }
}

.searchbox{
    height: 60px;
    width: 450px;
    max-width: 100%;
    background: white;
    border-radius: 10px;
    position: relative;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50px;
    display: flex;
  
  & > .btn-menu {
    padding: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
  }
  
  & > .search{
    border: none;
    width: 100%;
  }
  
  & > .btn-search {
    padding: 16px;
    background: transparent;
    border: none;
    cursor: pointer;
  }
}


// Modal Css Starts Here

.search-modal{
    
    height: 400px;
    width: 450px;
    max-width: 100%;
    background: white;
    border-radius: 10px;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 160px;
    animation: slideInUp .5s;
    display: none;
  &-header{
    display: flex;
    padding: 10px;
    border-bottom: 1px solid #00000017;
    & h3{
      font-size: 16px;
      text-transform: uppercase;
      font-weight: 500;
      float: left;
    }
    
    & span {
      & img{
            float: right;
            position: absolute;
            right: 16px;
            top: 25px;
            margin: 0 auto;
            cursor: pointer;
          transition: .5s all;
        &:hover{
          transform: scale(1.1);
        }
      }
    }
  }
  &-body{
    padding: 20px;
    height: 285px;
    overflow-y:scroll;
    
    & .message{
    display: flex;
    cursor: pointer;
    padding: 10px 15px;
    border-radius: 10px;
      &-avatar{
        margin-right: 16px;
        margin-top: 10px;
        & img{
          height: 60px;
          width: 60px;
          border-radius: 30px;
          object-fit: cover;
          box-shadow: 0 4px 8px rgba(0,0,0,.45);
        }
      }
      &-body{
        margin-left: 0;
        margin-top: 8px;
        & p{
          margin-bottom:0;
          font-size: 14px;
          font-weight: 500;
          color: #444;
        }
        & small{
          font-weight: 400;
          font-family: Dosis;
          color: #777;
        }
      }
      
      &:hover{
        background-color: #2F94D817;
      }
    }
    
    &::-webkit-scrollbar {
      width: 5px;
    }


    &::-webkit-scrollbar-track {
      background: transparent;
    }

    &::-webkit-scrollbar-thumb {
      background: #2F94D8;
      border-bottom-left-radius: 10px;
      border-bottom-right-radius: 10px;
      box-shadow: -1px 0 5px rgba(0,0,0,.15);
    }

    
    &::-webkit-scrollbar-thumb:hover {
    background: #555;
    }
  }
}

@keyframes slideInUp {
  from {
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
    visibility: visible;
  }

  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

$("#search").focusin(function(){
  $("#Modal").show();
});

$("#close").click(function() {
   $('#Modal').hide();
});