<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();
});