body ul {
			list-style-type:none;
		}

		body {
			display:flex;
			background-color:white;
		}

		.page {
			background-color:white;
		}

		.sidenav_button_open span {
			color:#383e8c;
		}

		.right_side {
			display:flex;
		}

		.user_directory {
			display:flex;
			overflow: scroll;
			height:75%;
			font-family: "sans serif", "Verdana";
			border-left: 10px #28898f solid;  
		}

		.conversations {
			height:100%;
			width:100%;
		}

		.convo {
			height: 22%;
			width: 89%;
			border-left: 5px #383e8c solid;
			border-top: 5px #e3e2e1 solid;
			border-right:5px #cccbca solid;
			border-bottom:5px #cccbca solid;
			border-radius: 5px;
			overflow-y:scroll;
			margin-right:1%;
		}

		.convo:hover {
			border-left: 3px #e3e2e1 solid;
			border-top: 3px #e3e2e1 solid;
			border-right:3px #cccbca solid;
			border-bottom:3px #cccbca solid;
		}

		.convo h4 {
			font-family: "sans serif", "Verdana";
			font-size: 14px;
			padding-left:20px;
			padding-right:20px;
			color: #383e8c;
		}

		.convo h3 {
			font-family: "sans serif", "Verdana";
			padding-left:20px;
			padding-right:20px;
		}

		.convo h6 {
			padding-left:20px;
			padding-right:20px;
			font-family: "sans serif", "Verdana";
			color: #6464ed;
		}


		.panel1 h2 {
			padding-left:40px;
		}

		.username_scroll_bar {
			font-family: "sans serif", "Verdana";
		}

		.username_scroll_bar a {
			text-decoration:none;
			color: black;
		}

		.username_scroll_bar a:hover {
			color:#e0af26;
		}

		.username_list {
			margin-right:15%;
		}

		.username_list a {
			text-decoration:none;
			color:black;
		}

		.username_list li:hover {
			text-decoration:underline;
		}

		.panel1 {
			border-right: 5px #e3e2e1 solid;
			width: 26%;
			height:100%;
			position: fixed;
			overflow:scroll;
			padding-top:2%;
		}

		.dir_encap {
			border-left: 3px #e3e2e1 solid;
			border-top: 3px #e3e2e1 solid;
			border-right:3px #cccbca solid;
			border-bottom:3px #cccbca solid;

			border-radius: 5px;
			

			height: 50%;
			width: 89%;
		}

		.dir_encap h2 {
			font-family: "sans serif", "Verdana";
			color: #28898f;
		}

		.panel2 {
			margin-left:42%;
		}

		@media only screen and (max-width: 1220px) {

			.panel1 {
				border-right:none;
				width:80%;
				padding-right:10%;
			}

			.panel2 {
				display:none;
			}

		}


		@media only screen and (max-width: 1083px) {

			
			.panel1 {
				border-right:none;
				width:80%;
				padding-right:0%;
			}

			.panel2 {
				display:none;
			}

			.user_directory {
				height:60%;
			}
	
			.username_scroll_bar {
				display:none;
			}

			.convo h6 {
				color: #28898f;
			}

		}