.newpost{
	width:100%;
	float:left;
	border-radius:10px;
	background:#f5f6f7;

	background:#fff;
	border-radius:8px;
	margin-top:0px;
	padding:8px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.28);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
.body_mobi .newpost{
	width:96%;
	margin-left:2%;
}
.newpost .postlink{
	width:100%;
	cursor: pointer;
	overflow: hidden;
	border-radius:8px;
}
.newpost .postlink:hover{
	background:#f1f1f1;
}
.newpost .icon{
	width:50px;
	height:50px;
	border-radius:50px;
	position: absolute;
	margin-top:7px;
	margin-left:5px;
}
.body_mobi .newpost .icon{
	margin-top:10px;
}
.newpost .title{
	height:33px;
	color:#000;
	line-height:33px;
	font-size:18px;
  font-weight: bold;
	padding-left:70px;
	margin-top:5px;
}

.newpost .subtitle{
	padding-left:70px;
	line-height:15px;
	font-size:15px;
	color:gray;
	margin-bottom:10px;

}




.newpost33{
	width:100%;
	display: flex;
  justify-content: space-between;
  gap: 15px;

}
.body_mobi .newpost33{
	width:96%;
	margin-left:2%;
}
.newpost3{
	width:100%;
	float:left;
	border-radius:10px;
	background:#f5f6f7;
	margin-top:10px;
	background:#fff;
	border-radius:8px;

	padding:8px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.28);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.newpost3 .postlink{
	width:100%;
	cursor: pointer;
	overflow: hidden;
	border-radius:8px;
}
.newpost3 .postlink:hover{
	background:#f1f1f1;
}
.newpost3 .icon{
	width:25px;
	height:25px;
	border-radius:25px;
	position: absolute;
	margin-top:0px;
	margin-left:5px;
}
.newpost3 .title{
	height:25px;
	color:#000;
	line-height:25px;
	font-size:18px;
  font-weight: bold;
	padding-left:40px;
}






.box_screen{
	background: white;
  width:550px;
  position: fixed;
	padding:15px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.28);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;


}
.body_desktop .box_screen{
	border-radius:8px;

	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	max-height: calc(100vh - 100px); /* Ensure it respects top and bottom spacing */
	overflow: auto; /* Allows scrolling if content overflows */
	z-index: 13;
}

.body_mobi .box_screen{
  width:100%;
  height:100%;
  top:0px;
  left:0px;
  z-index: 13;
}



/*=== inside box_screen === */
.newpost2{
	width:100%;
	height:100%;
	box-sizing: border-box;
	display: flex;
  flex-direction: column;
}
.newpost2 .title{
  width:100%;
  display:inline-block;
	margin-top:15px;
}
.newpost2 .title textarea{
	width:100%;
	height:60px;
	line-height:20px;
	box-sizing: border-box;
	padding:10px;
	font-size:14px;
  border:1px solid #dadada;
  border-radius:10px;
	display: inline-block;
}
.newpost2 .preview{
	width:100%;
	display: inline-block;
	margin-top:15px;
	margin-bottom:15px;
	overflow-y: scroll;
	min-height:200px;
	background: #fafafa;
	border-radius:5px;
}
.body_desktop .newpost2 .preview{
	max-height:50vh;
}
.newpost2 .preview img, .newpost2 .preview video{
	width:100%;
	height:auto;
}
.newpost2 .btn{
	width:100%;
	border-radius:8px;
	font-size:18px;
	height:40px;
	line-height:40px;
	cursor: pointer;
	background: var(--site-color-dark-1);
	color:white;
}
.newpost2 .btn:disabled{
	color:gray;
	background:#dadada;
}
.body_mobi .newpost2 .btn{
	margin-top: auto;
	margin-bottom:5px;
}



.feed{
	width:100%;
	margin-top:20px;
	float:left;
	padding-bottom:20px;
	overflow: visible;
}


.feed .upost{
	width:100%;
	display: inline-block;
	background:#fff;
	border-radius:8px;
	margin-top:25px;
	padding-bottom:15px;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.28);
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.feed .upost .head, .newpost2 .head{
	display: flex;
	gap: 10px;
	width:100%;
	float:left;

}
.feed .upost .head{
	margin-top:15px;
	padding-left:15px;
	padding-right:15px;

	-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.feed .upost .head .pic, .newpost2 .head .pic{
	width:40px;
	height:40px;
	border-radius:40px;
	overflow:hidden;
	background:gray;
}
.feed .upost .head .name_holder, .newpost2 .head .name_holder{
	flex:1; //remaining
}
.feed .upost .head .name, .newpost2 .head .name{
	width:100%;
	font-size:16px;
	font-weight:bold;
	font-family:Helvetica, Arial, sans-serif;
}
.feed .upost .head .date, .newpost2 .head .date{
	float:left;
	width:100%;
	font-size:14px;
	color:gray;
	margin-top:5px;
}


.feed .upost .title{
	padding-left:15px;
	padding-right:15px;
	-moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
	width:100%;
	float:left;
	margin-top:15px;
	margin-bottom:15px;
}


.feed .upost .image{
	width:100%;
	margin-top:10px;

	position: relative;
  width: 100%; /* Or a specific width */
  /*max-width: 500px;*/ /* Example max width */
  aspect-ratio: auto; /* Default keeps the original aspect ratio */
  overflow: hidden;
}


/* Crop images when height is greater than 4:5 (0.8) */

.feed .upost .image.cropheight {
    aspect-ratio: 4/5;
  }


/* Crop images when width is greater than 2:1 (2.0) */

.feed .upost .image.cropwidth {
    aspect-ratio: 2/1;
  }



.feed .upost .image video, .feed .upost .image img{
	width: 100%;
  height: 100%;
  object-fit: cover; /* Ensures the image covers the area */
}