body {
  margin:0px;
}
.container{
	display: grid;
  grid-template-columns: 75px 200px auto 250px; 
  grid-template-rows: 50px auto 50px;
  height:100vh;
  width:100%;
}
.left_nav_bar{
  background:#111111;
  grid-row-start:1;
  grid-row-end:4;
  grid-column-start:1;
  grid-column-end:1;
  display: grid;
  grid-template-columns: auto; 
  grid-template-rows:auto auto auto auto;
  justify-content:center;
  align-content:flex-start;
}
.orb{
  display: grid;
  background: #333333;
  height: 50px;
  width:50px;
  border-radius:100px;
  margin-top:10px;
  color: #008C3D;
  justify-content:center;
  align-content:center;
}
.search{
  background: #282828;
  grid-column-start:2;
  grid-column-end:3;
  grid-row-start:1;
  grid-row-end:1;
}
.left_contacts{
  background: #282828;
  grid-row-start:2;
  grid-row-end:3;
  grid-column-start:2;
  grid-column-end:3;
  color: #777777;
  padding-left:10px;
  display: grid;
  grid-template-rows: 30px 30px auto;
}
.left_contacts div:not(.direct_msg){
  margin-left:37.50px;
}
.direct_msg{
  font-size:12px;
  font-weight:900;
  display: grid;
  grid-template-columns: auto auto; 
  
}
.direct_msg p{
  margin-top:20px;
  margin-right:60px;
}
hr{
  margin-top: 0px;
  height: 1px;
	background-color: #111111;
  border: none;
}
.user{
  background-color: #202020;
  grid-row-start:3;
  grid-row-end:4;
  grid-column-start:2;
  grid-column-end:3;
  display: grid;
  grid-template-columns: auto auto auto auto auto; 
  grid-template-rows: auto auto;
}
.user_ID{
  grid-row-start:2;
  grid-row-end:2;
  grid-column-start:2;
  grid-column-end:2;
}
.user svg{
  grid-row-start:1;
  grid-row-end:3;
  margin-top:12px;
}

.user p{
  margin:0px;
  color:#aaaaaa;
  font-size:12px;
}
#user_name{
  margin-top:3px;
  color:#ffffff;
  font-size:14px;
}


.top_contacts{
  padding-top:5px;
  padding-left:3px;
  background-color: #444444;
  grid-row-start:1;
  grid-row-end:1;
  grid-column-start:3;
  grid-column-end:5;
  display: grid;
  grid-template-columns: 76px 40px 25px 45px 45px auto 35px 35px 35px ;
  grid-template-rows: 45px 10px;
}
.top_contacts hr{
  height: 1px;
	background-color: #111111;
  position:absolute;
  border: none;
}

.friends_top{
  display: grid;
  grid-template-columns: auto auto;
}
.top_contacts svg{
  margin: 10px 0px 0px 10px;
}

#add{
  background: #00DF62;
  height: 20px;
  width: 60px;
  color: white;
  margin-top: 8px;
  border-radius:3px;
  display: grid;
  align-content:center;
  justify-content:center;
}

.main{
  background-color: #444444;
  grid-row-start:2;
  grid-row-end:4;
  grid-column-start:3;
  grid-column-end:4;
}
.active{
  background-color: #282828;
  grid-row-start:2;
  grid-row-end:4;
  grid-column-start:4;
  grid-column-end:5;
}
.box{
  display: grid;
  margin: 10px;
  margin-bottom: 9px;
  height: 30px;
  border-radius: 5px;
  background: #111111;
  justify-content:left;
  padding-left:10px;
  align-content:center;
  font-size:12px;
  color:#444444;
}
.top_contacts div{
  margin:0px;
  padding:0px;
  color:#888888;
  font-size:12px;
}

.left_contacts svg{
  position: absolute;
  left:90px;
  top: 65px;
}
.nitro svg{
  top:95px;
}

.act_ext{
  font-size: 12px;
  font-weight:900;
  color: #aaaaaa;
  margin-left:20px
}
.actTopText{
  font-size: 12px;
  font-weight:900;
  color: #ffffff;
}
.actBotText{
  font-size: 12px;
  font-weight:900;
  color: #aaaaaa;
}
.act_int{
  display: flex;
  flex-direction: column;
	text-align:center;
  height:100px;
  background:#444444;
  margin:0px 20px;
  padding: 0px 10px;
  border-radius:5px
}
.icon{
  height:40px;
  width:40px;
  margin:5px;
  grid-row-start:1;
  grid-row-end:3;
  grid-column-start:1;
  grid-column-end:1;
}


::-webkit-scrollbar {
  width: 5px;
  height:5px;
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px grey; 
  border-radius: 100px;
}
::-webkit-scrollbar-thumb {
  background: #666666; 
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #999999; 
}

@media (max-width: 1200px){
  .container{
		display: grid;
	  grid-template-columns: 75px 200px auto 1px; 
  	grid-template-rows: 50px auto 50px;
  	height:100vh;
  	width:100%;
	}
  
.act_ext{
  font-size: 0px;
  font-weight:0;
  color: #aaaaaa;
  margin-left:0px
}
.actTopText{
  font-size: 0px;
  font-weight:0;
  color: #ffffff;
}
	.actBotText{
 		font-size: 0px;
  	font-weight:0;
  	color: #aaaaaa;
	}
	.act_int{
 		 display: flex;
  	flex-direction: column;
		text-align:center;
  	height:0px;
  	background: none;
  	margin:0px 20px;
  	padding: 0px 10px;
  	border-radius:0px
	}
}