ssd-h.css

.header{
	height:55px;
	display:flex;
	flex-direction:row;
	justify-content:space-between;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:100;
	background-color:white;
	border-bottom-width:1px;
	border-bottom-style:solid;
	border-bottom-color:rgb(240,240,240);
}

.left-section{
	display:flex;
	align-items:center;
}

.hamburger-menu{
	top:5px;
	bottom:5px;
	height:24px;
	margin-left:8px;
	margin-right:17px;
	margin-top:9px;
	cursor:pointer;
}

.hamm{
	height:40px;
	width:40px;
	cursor:pointer;
	border-radius:20px;
	border:none;
	background-color:white;
	margin-left:16px;
	margin-right:24px;
}

.hamm:active{
	height:40px;
	width:40px;
	cursor:pointer;
	border-radius:20px;
	border:none;
	background-color:rgb(230, 230, 230);
	margin-left:16px;
	margin-right:24px;
}

.youtube-logo{
	height:20px;
	cursor:pointer;
}

.middle-section{
	flex:1;
	margin-right:35px;
	margin-left:70px;
	max-width:500px;
	display:flex;
	align-items:center;
}

.search-bar{
	flex: 1;
	height: 36px;
	padding-left: 10px;
	font-size: 16px;
	border: 0.5px solid rgb(192, 192, 192);
	border-radius: 2px;
	box-shadow: inset 1px 2px 3px rgba(0, 0, 0, 0.05);
	width: 0;
	outline:none;
}

.search-bar::placeholder{
	font-family:Roboto,Arial;
	font-size:16px;
}

.search{
	height:40px;
	width:66px;
	background-color:rgb(240,240,240);
	border-width:1px;
	border-style:solid;
	border-color:rgb(192,192,192);
	margin-left:-1px;
	margin-right:10px;
	position:relative;
	cursor:pointer;
}

.search:active{
	height:40px;
	width:66px;
	background-color:rgb(230, 230, 230);
	border-width:1px;
	border-style:solid;
	border-color:rgb(192,192,192);
	margin-left:-1px;
	margin-right:10px;
	position:relative;
	cursor:pointer;
}

.search,
.vsi,
.upload-container,
.appc,
.notifications-icon-container{
	display:flex;
	justify-content:center;
	align-items:center;
	position:relative;
}

.search .tooltip,
.vsi .tooltip,
.upload-container .tooltip,
.appc .tooltip,
.notifications-icon-container .tooltip{
	font-family:Roboto, Arial;
	position:absolute;
	background-color:gray;
	color:white;
	padding-top:4px;
	padding-bottom:4px;
	padding-left:8px;
	padding-right:8px;
	border-radius:2px;
	font-size:12px;
	bottom:-30px;
	opacity:0;
	transition:opacity 0.15s;
	pointer-events:none;
	white-space:nowrap;
}

.search:hover .tooltip,
.vsi:hover .tooltip,
.upload-container:hover .tooltip,
.appc:hover .tooltip,
.notifications-icon-container:hover .tooltip{
	opacity:1;
}

.s{
	height:25px;
}


.vsi{
	height:40px;
	width:40px;
	border-radius:20px;
	border:none;
	background-color:rgb(245,245,245);
	cursor:pointer;
}

.vsi:active{
	height:40px;
	width:40px;
	border-radius:20px;
	border:none;
	background-color:rgb(230, 230, 230);
	cursor:pointer;
}

.vs{
	height:24px;
	cursor:pointer;
}


.right-section{
	width:180px;
	margin-right:20px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	flex-shrink:0;
}

.upload{
	height:24px;
	cursor:pointer;
}

.upload-container{
	height:40px;
	width:40px;
	border-radius:20px;
	border:none;
	cursor:pointer;
}

.upload-container:active{
	height:40px;
	width:40px;
	border-radius:20px;
	border:none;
	background-color:rgb(230, 230, 230);
	cursor:pointer;
}

.app{
	height:24px;
	cursor:pointer;
}

.appc{
	height:40px;
	width:40px;
	border-radius:20px;
	border:none;
	cursor:pointer;
}

.appc:active{
	height:40px;
	width:40px;
	border-radius:20px;
	border:none;
	background-color:rgb(230, 230, 230);
	cursor:pointer;
}

.notif{
	height:24px;
	cursor:pointer;
}

.notifications-icon-container{
	position:relative;
	width:40px;
	border-radius:20px;
	border:none;
	cursor:pointer;
}

.notifications-icon-container:active{
	position:relative;
	height:40px;
	width:40px;
	border-radius:20px;
	border:none;
	background-color:rgb(230, 230, 230);
	cursor:pointer;
	.notifications-count{
		position:absolute;
		top:7px;
		right:5px;
		background-color:rgb(200,0,0);
		color:white;
		font-family:Roboto, Arial;
		font-size:9px;
		border-radius:10px;
		cursor:pointer;
	}
}

.notifications-count{
	position:absolute;
	top:-1px;
	right:5px;
	background-color:rgb(200,0,0);
	color:white;
	font-family:Roboto, Arial;
	font-size:9px;
	padding-left:5px;
	padding-bottom:2px;
	padding-right:5px;
	padding-top:2px;
	border-radius:10px;
	cursor:pointer;
}

.notifications-count:active{
	position:absolute;
	top:12px;
	right:15px;
	background-color:rgb(200,0,0);
	color:white;
	font-family:Roboto, Arial;
	font-size:9px;
	padding-left:5px;
	padding-bottom:2px;
	padding-right:5px;
	padding-top:2px;
	border-radius:10px;
	cursor:pointer;
}

.current{
	height:24px;
	border-radius:16px;
	cursor:pointer;
	border-width:5px;
	border-style:solid;
	border-color:white;
}

.current:active{
	height:24px;
	border-radius:16px;
	cursor:pointer;
	border-width:5px;
	border-style:solid;
	border-color:rgb(230, 230, 230);
	
}