/*
Template Name: HMedia - a Social Help Media.
    Template URI: https://hmedia.com
    Description: This is HMedia custom style sheet.
    Author : Md. Enamul Hoque
	CEO of GetUpWork.Com
    Version: 1.0

*/

/* Responsive starts */
body{ background-color:#F0F2F5; }

/*Backend custom design*/
#adminleftsidebar{
	max-height:500px;
 overflow-y: auto;
}
.admincontent{
	max-height:500px;
 overflow-y: auto;
}
 /* .firstcolumn{
	 max-height:800px;
  overflow-y: auto;
 } */
 .row {
            display: flex;
        }
				.scroll-column{
				            max-height: 500px;   /* Set a max height for each column */
				            overflow-y: auto;    /* Allow vertical scrolling when content overflows */
				            padding: 15px;
				            border: 1px solid #ddd;  /* Optional: Border to separate columns visually */
				            margin-right: 10px;  /* Optional: Space between columns */
				        }

 /* .scroll-column {
 					 height: 500px;
 					 overflow-y: auto;
 					 border: 1px solid #ddd;
 			 } */
  .content {
 		 height: 600px;
  }


/*Frontend custom design*/
.link-hover:hover{
	 background-color:#E4E6E9;
	 color:white;

}
.chat-indivisual{
	cursor:pointer;
}
.post-title:hover{

	 color:red;
	 /*text-decoration:overline;*/
	 border-bottom:2px solid green;

}
.align-vertical{
	display: flex;
      align-items: center;
      height: 100%;
}
.row-border{
	/*border:1px solid #CED0D4;*/
	border-radius:5%;
	background-color: white;
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}
.post-area{
	margin:2px; padding-top:5px; padding-left:5px;
}
.posts{
	/* box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); */
}
.content-header-area{
	margin-top:1px; padding-top:10px;
}
.content-area{
	margin:1px; padding:5px;
}
.post-likebar{
	margin:3px;
	padding:3px;
	border-top:1px solid #CED0D4;

}
.post-likebar-item:hover{
	 background-color:#F2F2F2;
	 color:white;
}

textarea {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 1px;
    resize: none;
    margin-top: 1px;
}
 /* Disable textarea resizing */
    .no-resize {
      resize: none;
	  /* background-color:; */
    }
	.no-scrollbar{
		overflow:hidden;
	}
	.no-horizontal-border{
		border: none;
	}
	 .no-horizontal-border:focus {
     outline: none;

    }
	.author-textarea{
		padding:5px;
		 /* background-color:; */
	}
	  .author-photo {
		  padding:10px;
      width: 70px;
      height: 70px;
      border-radius: 50%;
      margin-right: 10px;
      float: left;

    }

.pos-upload-media{
	padding-left:10px;
	background-color:#EDF2F6;
}
.upload-sec{
	width:48%;
	float:left;
}
.upload-sec a{
	float:left;
	padding:2%;
}
.post-sec{
	width:48%;
	float:right;
}
.post-sec li {
	float:left;
	padding:2%;
}
.btn-border{
	border: 1px solid #d8dbe6;
	color: #515365 !important;
	background: transparent !important;
}
.commenter-row{
	padding:2px;
}
.replier-row{
	 margin-left:30px;
	 padding:5px;
}


/*3rd column*/
.thirdcoldata{

	background-color: #FFFFFF !important;
}
.pro-block h5{
	font-size: 16px;
	font-weight: 600;
	text-align: center;
	margin: 10px 0 5px;
	color: #008000;
}
.pro-block p{
	font-size: 14px;
	font-weight: 400;
	color: #888da8;
	margin:5px 0;
	float: left;
	text-align: center;
}
.pro-block p i{
	color: #008000;
	margin-right: 5px;
}
.pro-block p:last-child{
	float: right;
}
/*Friends suggestion*/
.suggest-friends{
	margin-top:30px;
}
.friends-show{
	border-bottom: 1px solid #d8dbe6;
	margin-bottom:5px;
	padding-bottom:7px;
}
.friend-image{
	margin-top:30px;
}
.add-friends{
	float:left;
}
button.add-friend:hover{
	color: white;
	background-color: green;
}

/*Chatting css*/
.chat-popup {
  display: none;
  position: fixed;
  bottom: 0;
  right: 70px;
  border: 1px solid #ccc;
  background-color: white;
  width: 350px;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1000; /* Ensure chatbox is on top of other elements */
}


.chat-area {
  height: 300px;
  overflow-y: auto;
}
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #f44336;
  color: white;
  border: none;
  border-radius: 50%;
  width: 25px;
  height: 25px;
  text-align: center;
  line-height: 25px;
  cursor: pointer;
}

.close-btn:hover {
  background: #d32f2f;
}

.btn a {
  display: inline-block;
  padding: 0px;
   /* background-color: #4CAF50;  */
  color: white;
  text-decoration: none;
  border-radius: 0px;
  margin-top: 0px;
}

.btn a:hover {
 /* background-color: #45a049;   */
}

/* Chatroom  */
 /* .chatroom-users{
	 background-color:white;
	 height:200px;
	 overflow-y: auto;
 } */
 .chatroom-item{
	  padding:10px;
 }
 .chatroom-item:hover{
	 background-color:#F0F2F5;
	 padding:10px;
	  border-radius:20px 0 0 20px;
	 cursor:pointer;
 }
 .chatroom-userbar:hover{
	 background-color:#F0F2F5;
	 cursor:pointer;
 }
 .chat-text-replier p{
	padding:10px;
	background-color:#F0F0F0;
	border-radius: 20px;
 }
 .chat-text-me p{
	 background-color:#0084FF;
	border-radius: 20px 0 0 20px;
		padding: 5px;
 }
 #user-list {
    max-height: 400px;
    overflow-y: auto;   /*vertical scrolling */
    padding-right: 10px;
}

.chatroom-message-area {
		margin:5px;
		padding:10px;
    max-height: 400px;
    overflow-y: auto;   /* vertical scrolling */
		 overflow-x: hidden;
    padding-right: 10px;
}

.message-input {
    margin-top: 1px;
}




 /*Attached images / videos preview on create post*/
 .custom-file-upload {
            border: 1px solid #ccc;
            display: inline-block;
            padding: 6px 12px;
            cursor: pointer;
            background-color: #7431F9;
            color: #FFFFFF;
            font-size: 16px;
            border-radius: 4px;
        }
#post-image {
	display: none;
}
#post-video {
	display: none;
}

/* Edit post update, Attached images / videos preview */
.preview-container {
					position: relative;
					display: inline-block;
					margin: 5px;
			}
			.preview-container img,
			.preview-container video {
					max-width: 100%;
					max-height: 100px;
			}
			.close-preview {
					position: absolute;
					top: 5px;
					right: 5px;
					cursor: pointer;
					background-color: rgba(0,0,0,0.5);
					color: #fff;
					border-radius: 50%;
					padding: 3px;
					font-size: 14px;
					line-height: 1;
					text-align: center;
					width: 20px;
					height: 20px;
			}
			.new-media-container {
					border: 1px dashed #ddd;
					padding: 10px;
			}
			#newMedia-image {
				display: none;
			}
			#newMedia-video {
				display: none;
			}




			/* Modal display issues fix */
			/* .modal {
			    display: none;
			    position: fixed;
			    top: 50%;
			    left: 50%;
			    transform: translate(-50%, -50%);
			    background: white;
			    border: 1px solid #ccc;
			    padding: 20px;
			    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
			    z-index: 1000;
			}
			.modal.open {
			    display: block;
			} */

			/* Specific z-index for each modal */
			/* #posteditnowModal {
			    z-index: 1002;
			}
			#postdeletenowModal {
			    z-index: 1003;
			}
			#viewfullpostnowModal {
			    z-index: 1004;
			}
			#postsharenowModal {
			    z-index: 1005;
			}
			#postgiftnowModal {
			    z-index: 1006;
			}


			.modal .close-btn {
			    cursor: pointer;
			    position: absolute;
			    top: 10px;
			    right: 10px;
			} */