/* General classes */
*{
	margin:0;
	padding:0;
}
body{
	background-color:whitesmoke;
	font-size:2.5vh;
}
a:link,
a:visited{
	text-decoration:none;
	color:inherit;
}
.white{
	background-color:white;
}
.grey{
	color:grey;
}
.bold{
	font-weight:bold;
}
.small{
	font-size:2.3vh;
}
.font{
	font-size:4.6vh;
}
.font:hover{
	color:black;
}
.pointer{
	cursor:pointer;
}
.blue{
	color:#0096FF;
}
.hover:hover{
	background-color:whitesmoke;
}
.underline:hover{
	text-decoration:underline;
}
.space-between{
	display:flex;
	justify-content:space-between;
}
.space-around{
	display:flex;
	justify-content:space-around;
}
.name{
	margin:1% 0 1% 0;
}

/* Navigation bar - Desktop */
nav{
	position:fixed;
	width:100%;
	z-index:20;
}
.profile-pic{
	height:25px;
	border-radius:50%;
	border:1px solid grey;
}
.searchbar{
	padding:max(0.7%, 5px) 15%;
	border-radius:20px;
}
table{
	width:100%;
	text-align:center;
}
.tr{
	display:flex;
	justify-content:space-evenly;
}
.selected{
	border-bottom:2px solid black; 
	padding:0 10px;
}
#me{
	border-right:1px solid grey;
	padding-right:10px;
	position:relative;
}

.me-dropdown{
	display:none;
	width:230px;
	background-color:white;
	padding:8px;
	position:fixed;
	top:60px;
	right:23%;
	color:black;
	text-align:left;
	font-size:16px;
	border-radius:8px;
	border:1px solid grey;
	z-index:7;
}
#me:hover .me-dropdown{
	display:block;	
}
.verify{
	background-color:#0096FF;
	border-radius:30px;
	padding:7px 15px;
	color:white;
	margin:5px 0;
}
.verify:hover{
	background-color:#007AD1;
}
.view-profile{
	color:#0096FF;
	border:1px solid #0096FF;
	border-radius:30px;
	padding:7px 15px;
	margin:5px 0;
}
.view-profile:hover{
	color:#007AD1;
	border:1px solid #007AD1;
	background-color:azure;
}
.blueshine:hover{
	color:#0096FF;
}

.business-dropdown{
	display:none;
	width:45%;
	height:340px;
	overflow-y:scroll;
	background-color:white;
	z-index:3;
	border-radius:8px;
	color:black;
	font-size:16px;
	text-align:left;
	padding:3% 3% 50px 3%;
	position:fixed;
	right:10%;
	top:60px;
	border:1px solid grey;
}
#business:hover .business-dropdown{
	display:flex;
}
.apps{
	border-right:1px solid grey;
	padding-right:5%;
}
.apps div{
	margin:25px 10px;
}

.business p{
	margin:25px 23px;
}
.business{
	padding-left:5%;
}

.premium-dropdown{
	background-color:white;
	width:450px;
	position:relative;
	z-index:12;
	border-radius:8px;
	min-height:550px;
	font-size:16px;
	margin:auto;
	padding:1%;
	color:black;
	top:2px;
}
#dropdown-premium:hover .bg-premium{
	display:block;
}
.bg-premium{
	background-color:rgba(0,0,0,0.5); 
	width:100%;
	display:none;
	z-index:5;
	position:fixed;
	top:0;
	right:0;
	text-align:left;
}
.premium-hover{
	background-color:#FFDB58;
	padding:7px 30px;
	width:fit-content;
	border-radius:30px;
	margin:65% 2% 2% 2%;
	
}
.premium-hover:hover{
	background-color:#DBAE0B;
}
/* Top Navigation bar for mobile or tablet */

.top-nav{
	display:none;
}

/* Bottom Navigation Bar for mobile or tablet */

.bottom-nav{
	display:none;
}

/* main section*/
main{
	padding:80px 3vw 50px 3vw;
}

/* main notification section */
.main{
	width:50%;
	margin:1% auto;
}
.filters{
	display:flex;
}
.filters .selectable{
	padding:1.5% 3%;
	border:1.5px solid lightgrey;
	color:darkgrey;
	font-weight:bold;
	margin:0 3px;
	background-color:white;
	border-radius:30px;
}
.filters .selectable:focus{
	background-color:green;
	border:1.5px solid green;
	color:white;
	outline:none;
}
.filters .selectable:hover{
	background-color:lightgrey;
	border:1.5px solid darkgrey;
	color:black;
}
.selected-filter{
	color:white !important;
	padding:10px 25px !important;
	margin-right:7px!important;
	background-color:green !important;
	border:1.5px solid green!important;
}
.table td{
	padding:10px;
	font-size:2.5vh;
}
.tr-hover{
	border-bottom:0.1px solid lightgrey;
}
.tr-hover:hover{
	background-color:whitesmoke;
}
.blue-hover{
	background-color:#E6F4FF;
}
.blue-hover:hover{
	background-color:#B8E1FF;
}
/* about me - left section of main page */
.left{
	margin:1%;
	width:20%;
	border-radius:5px;
	position:fixed;
	left:3%;
}
.me{
	border:1px solid grey;
	border-radius:5px;
	margin:3%;
	background-color:#fff;
}
.bg{
	width:100%;
	height:100px;
}
.pfp{
	border-radius:50%;
	width:25%;
	border:2px solid grey;
	z-index:3;
	margin:-15% 0 0% 5%;
}
.about{
	padding:0 5% 3% 5%;
}
.name{
	margin:1% 0 1% 0;
}
.pic{
	border:1px solid black;
	width:25px;
	height:25px;
	margin:5% 5% 5% 5%;
}
.abt{
	display:flex;
}

.aside{
	width:25%;
}
.bg-img{
	height:50px;
	position:relative;
	width:100%;
	top:0;
}
.company-logo{
	border-radius:5px;
	position:relative;
	top:-30px;
	z-index:3;
	left:20px;
}
.messaging-section{
	width:60%;
	padding:3%;
	border:1px solid grey;
	background-color:#FFF;
}
.ad-section{
	background-color:white;
	border:1px solid grey;
	border-radius:8px;
	padding:0% 4% 2% 4%;
}

.connect{
	background-color:inherit;
	display:inline-block;
	border:1.5px solid #0096FF;
	border-radius:30px;
	padding:8px 20px;
	font-weight:700;
	color:#0096FF;
	margin:10px;
}
.connect:hover{
	background-color:azure;
	border:1.5px solid #0047AB;
	color:#0047AB;
}
.connect2{
	background-color:inherit;
	display:inline-block;
	border:1.5px solid #0096FF;
	border-radius:30px;
	padding:8px 20px;
	font-weight:700;
	color:#0096FF;
	margin:10px;
}
.connect2:hover{
	background-color:#8ACEFF;
	border:1.5px solid #;
	color:#0047AB;
}
.notifications{
	margin-top:1%;
}

/* footer */

.footer{
	margin-top:10%;
	text-align:center;
}
.li{
	display:flex;
	justify-content:space-around;
	padding:0;
	margin:10px 0;
}
.sign{
	height:15px;
	padding:4px 6px 0 0;
}
.underline:hover{
	text-decoration:underline;
	cursor:pointer;
}
.aside2{
	padding:10px;
	width:20%;
	position:fixed;
	right:2%;
	top:90px;
}
.aside-{
	padding:10px;
	margin-top:10px;
	border-radius:50%;
}
.aside-:hover{
	background-color:#9FBBCF;
}

/* Messaging drawer */

aside{
	z-index:4;
	position:fixed;
	bottom:0;
	right:3%;
	width:30%;
	border:1px solid grey;
	border-radius:5px 5px 0 0;
	background-color:white;
}

.flex{
	display:flex;
	justify-content:space-evenly;
}

.span{
	display:flex;
	justify-content:space-between;
}
.hidden{
	display:none;
}
#message:checked ~ .visible{
	display:block;
}
.msg{
	margin:2% 4% 1% 3%;
}
.msg-pfp{
	width:40px;
	height:40px;
	border:1px solid grey;
	border-radius:50%;
	margin:5% 3% 0 1%; 
}
.header{
	border-bottom:1px solid grey;
}
.header:hover{
	background-color:#E5E4E2;
}
.aside{
	padding:10px;
	margin-top:10px;
	border-radius:50%;
}
.aside:hover{
	background-color:lightgrey;
}
.visible{
	height:70vh;
	text-align:center;
	display:none;
}
.input{
	width:80%;
	padding:2% 3%;
	color:darkgrey;
	margin: 2% auto;
	background-color:#E6F1F7;
	border:1px solid #E6F1F7;
}
.input:hover{
	border:1px solid black;
}
.nothing{
	width:40%;
	margin:5% auto;
}
.no{
	font-size:1.3rem;
}
.send{
	padding:2% 4%;
	margin:2% auto;
	width:50%;
	border:2px solid grey;
	border-radius:40px;
}
.send:hover{
	border:2px solid black;
	background-color:whitesmoke;
	font-weight:bold;
}
.type1{
	color:green;
	border-bottom:2px solid green;
	width:30%;
	margin:0;
	text-align:center;
	padding:4%;
}
.type{
	width:30%;
	margin:0;
	text-align:center;
	padding:4%;
}
.type:hover,
.type1:hover{
	background-color:lightgrey;
	padding:4%;
}
.hide-this-section{
	display:none;
}

@media (max-width:930px){
	.top-nav{
		display:block;
		position:fixed;
		top:0;
		background-color:white;
		display:flex;
		justify-content:space-evenly;
		padding:1vh 2vw;
	}
	.searchbar{
		padding:max(5px,1%) 2%;
		width:max(150px,45vw);;
	}
	.nav{
		display:none;
	}
	.small{
		font-size:0.7rem;
	}
	.bottom-nav{
		display:block;
		position:fixed;
		width:100%;
		height:60px;
		left:0;
		bottom:0;
		z-index:3;
		padding:0;
		text-align:center;
		background-color:white;
		display:flex;
		justify-content:space-evenly;
		box-sizing:border-box;
	}
	.box{
		border:2px solid black;
		color:black;
		padding:0 3%;
		margin-left:-15px;
	}
	/* main section */
	main{
		padding:60px 0.2vw 70px 0.2vw;
	}
	.main{
		width:100%;
		margin:0;
	}
	.hide-section{
		display:none;
	}
	.notifications{
		margin:0;
	}
	/* messaging  drawer*/
	aside{
		display:none;
	}
	.hidden{
		display:none;
	}
}
@media(max-width:480px){
	body{
		font-size:1.2vh;
	}
	.small{
		font-size:1.6vh;
	}
	.font{
		font-size:3.5vh;
	}
	.bottom-nav{
		height:fit-content;
	}
}