body{
	background-color: #202123;
  margin: 0px;
}
#container {
  display: grid;
  grid-template-columns: 125px 1fr;
  grid-template-rows: auto;
}
#topP1{
  height: 7vh;
  display: grid;
  grid-template-columns:auto auto auto auto auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto;
  margin-bottom: 0%;
  margin-left:10px;
}
#topP2{
  height: 3vh;
  display: grid;
  grid-template-columns: 5% 5% 7% 9% 13% auto auto auto auto auto auto auto auto auto;
  grid-template-rows: auto;
  margin-bottom: 0%;
  margin-top: 0%;
  align-content:center;
}
#nav_top{
  height: 5vh;
  display: grid;
	grid-template-columns: 5fr 1fr;
  align-content:center;
}
#nav_bottom{
  height: 75vh;
  display: grid;
  background: #24282F;
  grid-template-columns: 9fr 1fr 1fr;
  grid-template-rows: 5% 5% auto;
}
#body{
  height: 80vh;
  display: grid;
  grid-template-columns: auto;
  overflow-x: hidden;
  overflow-y: scroll;
  grid-template-rows: 257px 257px 257px 257px;
}
#userInfo{
  background: #393939;
  display: grid;
  grid-template-columns:auto auto;
  grid-template-rows:auto;
  margin-top: 7.5px;
  margin-right: 5px;
  height: 25px;
  align-content: center;
}
#userIcon{
  background: #ffffff;
  margin-top: 7.5px;
  height: 25px;
  width: 25px;
}
#body_top{
  display: grid;
  background: radial-gradient(50% 50% at 50% 50%, #313D53 0%, #1A1F26 100%);
  grid-template-columns: 99px 1fr;
  grid-template-rows: 40px auto;
}
#body_UpMid{
  background: #2C323B;
  display: grid;
  grid-template-columns: 45px 1fr;
  grid-template-rows: 40px auto;
}
#body_LowMid{
  background: #2C323B;
  display: grid;
  grid-template-columns: 45px 1fr 1fr;
  grid-template-rows: 40px auto;
}
#body_Bottom{
  background: #2C323B;
  display: grid;
  grid-template-columns: 45px 1fr 1fr;
  grid-template-rows: 40px auto;
}
#foot{
  height: 10vh;
  display: grid;
  background-color: #2A2E33;
  grid-template-columns:auto auto auto;
  grid-template-rows: auto;
}
.topText{
  font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.5);
  padding:0%;
  margin-top: 20px;
  line-height: 0px;
}
#fullscreen{
  margin-top: 7.5px;
}
.maximize{
  margin-top: 7.5px;
}
#mail{
  display: grid;
  background: #393939;
  margin-top: 7.5px;
	height: 25px;
  width: 25px;
  align-content:center;
  justify-content:center;
}
#alert{
  display: grid;
  background: #448EFD;
  margin-left: 70%;
  margin-top: 7.5px;
	height: 25px;
  width: 40px;
  align-content:center;
  justify-content:center;
}
.last{
  margin-right: 70%;
}
.main{
  font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
	color: #FFFFFF;
  margin-top: 0%;
  line-height: 0px;
}
.arrow{
  margin : 0px;
}
.bt{
  font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
  margin: 10px 3px 10px 10px;
  padding-top: 3px;
  padding-left: 3px;
  background-color: #434343;
	border-radius: 2px;
	color: #FFFFFF;
  height: 15px;
}
.box{
  display: grid;
  margin-top: 10px;
  margin-right: 5px;
  background-color: #303030;
	border-radius: 2px;
	color: #FFFFFF;
  height: 18px;
  width:18px;
  align-content: center;
  justify-content:center;
}
.NBG{
  background: transparent;
}
.in{
  background-color: #303030;
}
.r2{
	grid-column-start:1;
  grid-column-end:3;
  margin-right: 0px;
}
.filler1{
  height: 97.8%;
  width: 95%;
  padding: 0px 3px;
  font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
}
#left{
  display: grid;
  margin-top: 20px;
  margin-left: 5px;
  justify-content: left;
  grid-template-columns:auto auto;
}
#left .box{
  margin-top: 10px;
}
.text{
  font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 12px;
  color: rgba(255, 255, 255, 0.5);
  margin: 13px 5px;
}
#center{
  display: grid;
  justify-content: center;
}
#right{
  display: grid;
  margin-top: 20px;
  margin-right: 5px;
  justify-content: right;
  grid-template-columns:auto auto;
}
.val{
  display: grid;
  justify-content: right;
}
.body_text{
  font-family: Roboto;
	font-style: normal;
	font-weight: normal;
	font-size: 14px;
  color: rgba(255, 255, 255, 0.5);
  margin: 12px 0px 0px 10px;
}
.body_icons{
  margin: 8px 0px;
}
.info{
  grid-column-start:1;
  grid-column-end:4;
}
.info .body_text{
  margin-top: 0px;
}

#left_scroll{
  grid-column-start:1;
  grid-column-end:4;
  display: grid;
  overflow-x: hidden;
  overflow-y: scroll;
  margin-top:15px;
}

@media (max-width: 720px){
  .body_text{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
  	color: rgba(255, 255, 255, 0.5);
  	margin: 12px 0px 0px 0px;
	}
  .text{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 10px;
  	color: rgba(255, 255, 255, 0.5);
  	margin: 13px 5px;
	}
  .filler1{
  	grid-column-start:1;
  	grid-column-end:4;
  	height: 97.8%;
  	width: 95%;
  	padding: 0px 3px;
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
  	color: rgba(255, 255, 255, 0.5);
	}
  .bt{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
  	margin: 10px 3px 10px 10px;
  	padding-top: 3px;
  	padding-left: 3px;
  	background-color: #434343;
		border-radius: 2px;
		color: #FFFFFF;
  	height: 15px;
	}
  .main{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 10px;
		color: #FFFFFF;
  	margin-top: 0%;
  	line-height: 0px;
	}
  .topText{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 10px;
		color: rgba(255, 255, 255, 0.5);
  	padding:0%;
  	margin-top: 20px;
  	line-height: 0px;
	}
  #body_top{
  	display: grid;
  	background: radial-gradient(50% 50% at 50% 50%, #313D53 0%, #1A1F26 100%);
  	grid-template-columns: 75px 1fr;
  	grid-template-rows: 40px auto;
	}
}

@media (max-width: 500px){
  .body_text{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 8px;
  	color: rgba(255, 255, 255, 0.5);
  	margin: 12px 0px 0px 0px;
	}
  .text{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 10px;
  	color: rgba(255, 255, 255, 0.5);
  	margin: 13px 5px;
	}
  .filler1{
  	grid-column-start:1;
  	grid-column-end:4;
  	height: 97.8%;
  	width: 95%;
  	padding: 0px 3px;
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
  	color: rgba(255, 255, 255, 0.5);
	}
  .bt{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 12px;
  	margin: 10px 3px 10px 10px;
  	padding-top: 3px;
  	padding-left: 3px;
  	background-color: #434343;
		border-radius: 2px;
		color: #FFFFFF;
  	height: 15px;
	}
  .main{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 7px;
		color: #FFFFFF;
  	margin-top: 0%;
  	line-height: 0px;
	}
  .topText{
  	font-family: Roboto;
		font-style: normal;
		font-weight: normal;
		font-size: 10px;
		color: rgba(255, 255, 255, 0.5);
  	padding:0%;
  	margin-top: 20px;
  	line-height: 0px;
	}
  #body_top{
  	display: grid;
  	background: radial-gradient(50% 50% at 50% 50%, #313D53 0%, #1A1F26 100%);
  	grid-template-columns: 75px 1fr;
  	grid-template-rows: 40px auto;
	}
}

::-webkit-scrollbar {
  width: 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; 
}