/*pages head navigation used in post,members,settings*/

.headerbar {
  width: 100%;
  height: 8%;
  margin-top: -10px;
  background-color: var(--headbar);
}

.title-nav {
  width: 100%;
  height: 50%;
  display: flex;
  align-items: center;
  color: #fff;
  justify-content: space-between;
  padding: 0 1rem;
}

.active {
  position: relative;
  transition: all 300ms ease-in-out;
}

.hide {
  display: none;
}

.active::before {
  content: "";
  position: absolute;
  bottom: -30%;
  left: -20%;
  width: 140%;
  height: 30%;
  border-radius: 200px;
}


.title-nav h1,
.title-nav i {
  padding: 4px;
  color: #fff;
}

.title-nav i{
  font-size: 1.4rem;
}

.tab-nav {
  width: 100%;
  height: 50%;
}

.tab-nav ul {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: space-evenly;
  padding-bottom: 1rem;
}

.tab-nav ul li {
  list-style: none;
}

.tab-nav ul li span {
  color: #fff;
  text-decoration: none;
}

.tab-nav ul li span i {
  font-size: 1.4rem;
}


#parent-loader {
  width: 100vw;
  height: 90%;
}













/*Main navigation*/
.main__status-update {
display: flex;
justify-content: space-between;
align-items: center;
background-color: var(--headbar);
margin-top: -30px;
padding: 10px;
border-top: 1px solid #cbcace;
border-bottom: 1px solid #cbcace;
}

.main__status-column {
display: flex;
justify-content: start;
align-items: center;
}

.main__myStatus-text {
display: flex;
justify-content: center;
align-items: start;
color: #FFF;
margin-top: 20px;
padding: 10px;
flex-direction: column;
}



 a{
text-decoration: none;
color: #222;
cursor: pointer;
}





/*pages on the main page horizontal scroll*/

/* use on page.php */
.page-flex-container {
height: 230px;
width: 100%;
overflow: auto;
overflow-x: hidden;
display: flex;
}
.page-card-box {
width: 240px;
margin: 10px;
border-radius: 4px;
height: 220px;
font-size: 15px;
font-weight: 500;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
background: #fff;
}
.page-card-img {
width: 200px;
height: 140px;
justify-content: center;
object-fit: cover;
margin: 0px auto;
background: #fff;
}


.main-g-card{
height: 60px;
width: 200px;
display: block;
margin: 0px auto;
text-align: center;
background: #fff;
}


.opts{
padding: 0.4em;
font-size: 12px;
margin-top: 2px;
}




.scroll {
position: relative;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
width: 100%;
height: 100%;
background: #fff;
cursor: default;
overflow: scroll hidden;
scroll-snap-type: x mandatory;
scroll-padding: 0px 1.25rem;
scrollbar-width: none;
}


.scroll::-webkit-scrollbar {
display: none;
}







/*it use on  page/post.php */
.fab-btn {
  position: absolute;
  bottom: 12px;
  right: 15px;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  transition: box-shadow 0.4s ease;
  background: #EEE;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
  font-size: 1.7rem;
  font-weight: bold;
  cursor: pointer;
}

.fab-btn span {
  display: flex;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  transition: transform 0.5s ease;
}







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





.moblie-page-post-container ::-webkit-scrollbar {
width: 5px;
}

::-webkit-scrollbar-thumb {
background:#fff;
border-radius: 5px;
}


.header {
margin-bottom:17px;
background: #fff;
}

.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 {
width: 100%;
max-height: 400px;
margin: auto;
display: block;
object-fit:contain;
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;
}



.fas, .far {
font-size: 24;
}
.fa-thumbs-down, .fa-thumbs-o-down {
transform:rotateY(180deg);
}

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

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









.page-video-box{
width: 100%;
max-height: 100%;
background: pink;
}

.video-box .page-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%;
}




#post-list{
  height: 100%;
overflow-y:hidden;
overflow-y: auto;
}

























































/*creating new page on the main */



.create-mainpad{
width: 100vw;
height: 100vh;
margin: 0px;
padding: 0px;
}



.creat-head{
height: 50px;
width: 100%;
background: #000;
justify-content: center;
}

.creat-head .por{
text-align: center;
font-family: Helvetica;
font-size:18px;
font-weight: bold;
color: #fff;
padding: 10px;
line-height: 1;
}


.page-icon-select{
width: 80%;
height: 30%;
margin: 0px auto;
}
.icon{
height: 120px;
width: 120px;
margin: 0px auto;
top: 10px;
border: 1px solid #fff;
}

.info-col{
width: 96%;
border-radius: 4px;
padding: 2px;
display: block;
border: 1.5px solid #ccc;
background: #fff;
margin-top: 10px;
}



.info-col input{
border: none;
outline: none;
width: 70%;
padding: 4px;
display: flex;
height: 30px;
margin: 0px auto;
background: #eee;
text-align: center;
margin-top: 10px;
margin-left: 8px;
}


.info-col span{
display: flex;
margin: 4px 2%;
font-size: 14px;
width: 96%;
}

.info-col div{
display: block;
margin: 4px 2%;
font-size: 14px;
width: 96%;

}



.info-col span input{
width: 15px;
height: 15px;
border: none;
background: #67a;
outline: none;
}


.info-col span  .lable{
  margin: 10px 15px;
}


.select-title{
  padding: 0.2em;
  width: 100px;
}






select {
   -webkit-appearance:none;
   -moz-appearance:none;
   -ms-appearance:none;
   appearance:none;
   outline:0;
   box-shadow:none;
   border:0!important;
   background-image: none;
   flex: 1;
   height: 30px;
   padding: 0 1.5em;
   color:#000;
   cursor:pointer;
   font-size: 1em;
   font-family: 'Open Sans', sans-serif;
}
select::-ms-expand {
   display: none;
}
.select {
   position: relative;
   display: flex;
   width: 20em;
   height: 3em;
   line-height: 3;
   background: #ffff;
   overflow: hidden;
   border-radius: .25em;
}
.select::after {
   content: '\25BC';
   position: absolute;
   top: 0;
   right: 0;
   padding: 0 1em;
   background: #ffff;
   cursor:pointer;
   pointer-events:none;
   transition:.25s all ease;
}
.select:hover::after {
   color: #23b499;
}










.new-page-icon{
margin: 0px auto;
width: 200px;
text-align: center;
margin-top: 10px;
}

.new-page-info{
width: 300px;
margin: 0px auto;
}

.new-page-info input{
border: 0.8px solid #ccc;
margin:10px 10px;
width: 80%; 
padding: 0.8rem;
outline: none;
display: block;
text-align: center;
background: #fff;
}