html,body{
margin: 0px;
height:100vh;
}


body{
    background-color: var(--projectbg) !important;
    font-family: helvetica, arial, sans-serif;
 }

body a{
text-decoration: none;
color: none;
}

/*::-webkit-scrollbar {
width: 5px;
}

::-webkit-scrollbar-thumb {
background:#fff;
border-radius: 10px;
}
*/

.main-head-bar{
background: var(--headbar);
height: 3.5em;
width: 100%;
}





.close-box{
color: #aaaaaa;
float: left;
font-size: 24px;
font-weight: bold;
}


.close-box:hover,
.close-box:focus {
color: red;
cursor: pointer;
}





/* The side navigation menu */
.sidenav {
height: 50%; 
width: 0; 
background: #fff;
overflow-x: hidden; 
text-align: left;
transition: 0.5s; 
position: absolute;
margin: 0;
list-style-type: none;
color: var(--linkscolor);
right: 0;
z-index: 9999;
}


.sidenav a {
text-decoration: none;
font-size: 20px;
text-align: left;
display: block;
padding-top: 15px;
color: var(--linkscolor);
margin-left: 10px;
transition: 0.3s;
}


.sidenav a { 
white-space: nowrap;
cursor: pointer;
}

/*.sidenav .closebtn {
float: right;
display: block;
background: #234;
font-size: 25px;
}*/





.mobile-card{
height: 88.5vh;
overflow-y: hidden;
width: 100%;
overflow: auto;
margin-top: 5px;
}




/*moblie stories Card found after the main head bar*/
.channel-panel{
	height: 30px;
	width: 100%;
	margin-top: 4px;
	background: #4a6;
}

.channel-panel span{
  height: 20px;
  width: 20%;
  margin-top: 5px;
  text-align: center;
  justify-content: center;
  font-size: 16px;
  padding: 0.9px;
  color: #fff;
  margin-left: 0.5em;
}








/*mobile main post and other resources like friends suggestion and ads div*/
.mobile-main-pad{
width: 100%;
height: 100%;
overflow-y: hidden;
overflow: auto;
}

/*posts*/
.postList{

}





/*fab button for creating new post*/
/*it use on home page and pages pages*/





.main-post-container  {
background-color:white;
width:100%;
border: 1px solid #ccc;
border-radius: 2px;
margin: auto;
margin-bottom:6px;
/*padding: 12px;*/ 
/*box-shadow: 0 0 5px rgba(0, 0, 0, .30);*/ /* Not original, just a test */
}




.header {
margin-bottom:17px;
}

.user-image {
float:left;
height: 50px;
width: 50px;
border-radius:50%;
font-weight: bold;
object-fit: cover;
}

.user-name{
font-family: Helvetica;
font-size:14px;
font-weight: bold;
line-height: 1.38;
margin-top: 12px;
color: #222;
text-decoration:none;
margin-bottom:2px;
}



.time {
font-family: Helvetica;
font-size:12px;
color: #90949c;
}

.time > a {
color: #90949c;
text-decoration:none;
}








.content {
clear:both;
font-family: Helvetica, sans-serif;
font-size:14px;
line-height: 1.38;
}



#reference {
width: 100%;
max-height: 400px;
}
#reference #reference-thumb {
   object-fit: contain;
   max-width: 100%;
   max-height: 400px;
   width: auto;
	margin:0px auto;
   display: block;
   justify-content: center;
}




.social {
margin-top:12px;
}
.social-buttons {
color: #7f7f7f;
font-family: Helvetica;
font-size: 12px;
font-weight:bold;
line-height:14px;
margin-left: 1%;
border-top:1px solid #e5e5e5;
padding-top:4px;

}

.social-buttons span {
font-size: 12px;
color: #222;
display:inline-block;
width: 30%;
text-align: center;
height: 30px;
padding:4px 4px 4px 0;
}

.social-buttons span i{
  margin-bottom: 5px;
}


.comment_content {
display: none;
padding : 5px;
}



.video-box{
width: 100%;
max-height: 70%;
}

.video-box .video-thumb{
  width: 100%;
  height: 100%;
}


.video-box .video-thumb .video_caption{
  width: 100%;
  height: 100%;
}

.video-box .video-thumb .video_caption video{
  width: 100%;
  height: 100%;
}