/*============= RESETS =============*/

/*-- iPhone X Remove Gutters --*/
html{
	padding: env(safe-area-inset);

}

.post_likes iframe {
    height: -webkit-fill-available !important;
    border: none  !important;
    width: 100%  !important;
    aspect-ratio: unset !important;
   
}

iframe {
    width: 100% !important; /* Forces full width */
    height: 100% !important; /* Auto height */
    aspect-ratio: 16 / 9 !important; /* Ensures correct video ratio */
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
}

iframe[src*="google.com/recaptcha/"] {
    display: none !important;
}

/*-- Prevent Horizontal Scrolling & Font Style --*/
html,body {
	
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1rem;
    line-height: 1.5;
    color: #212529;
    background-color: #fff;
    overflow: hidden;
    height: 100%;
    


}

.container {
    display: flex;
    min-height: 100vh;
}

.container {
    display: flex;
    min-height: 100vh;
    position: relative; /* Ensure container is the stacking context */
}

.left-sidebar {
    flex: 0 0 250px; /* Fixed width for left sidebar */
    background-color: #f4f4f4;;
    padding: 20px;
    overflow-y: auto; /* Enable scrolling if content overflows */
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 5; /* Lower than .main_column */
}

.right-sidebar {
    flex: 0 0 300px; /* Fixed width for right sidebar */
    background-color: #f4f4f4;
    padding: 20px;
    overflow-y: auto; /* Enable scrolling if content overflows */
    box-shadow: -2px 0 5px rgba(0, 0, 0, 0.1);
    z-index: 5; /* Lower than .main_column */
}



/*For input type = number ( Chrome, Safari, Edge and Opera) */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}




.text-nuno{
   color:	#1EBBA3;
}


.navbar-brand {
	font-family: cursive;
	text-transform: uppercase;
	font-weight: bold;
	font-size: small;
}


/* Hide the real file input */
        #fileToUpload {
            display: none;
        }

        /* Style the custom button */
        .custom-file-upload {
            display: inline-block;
            padding: 10px 20px;
            cursor: pointer;
            background-color: #2980b9;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            transition: background-color 0.3s ease;
        }

        /* Hover effect for the button */
        .custom-file-upload:hover {
            background-color:#343a40;
        }


.input-group.md-form.form-sm.form-2 input {
border: 1px solid #bdbdbd;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;

}
.input-group{
	width: 50%;
	padding-left: 70px;
}

.input-group1.md-form.form-sm.form-2{
    border: 1px solid #bdbdbd;
border-top-left-radius: 0.25rem;
border-bottom-left-radius: 0.25rem;
    
}

.input-group1{
    width: 50%;
}
    

 
 


.navbar{
	font-weight: 400;

}


.form-control{
	width: 100%;
	color:black;
}






[type="button"]:not(:disabled), [type="reset"]:not(:disabled), [type="submit"]:not(:disabled), button:not(:disabled) {
    cursor: pointer;
    margin-left: 0px;

    }



 .btn btn-outline-success, .btn btn-outline-success:hover, .btn btn-outline-success:active, .btn btn-outline-success:visited {
    background-color: red !important;
}
.btn-outline-success {
    color: 
#b7b7b7;
border-color:
    #fff;
}



/*-- Remove Button Outline --*/
button:focus, a:focus, a.btn:focus {
   outline: 0;
   -webkit-appearance: none;
   box-shadow: none;
   transition: all .6s ease;
}
button, a, a.btn,
.svg-inline--fa {
   transition: all .6s ease;
}


.wrapper{
	margin: 0 auto;
    top: 60px;
    position: relative;
    padding: 0 10px;
    width: 90%;
    min-width: 320px;
     max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    z-index: 1; /* Lower than .main_column */

}

nav a:hover{
	color: #fff;
}

.column{
	background-color: #eeeff0;
    padding: 10px;
    border: 1px solid #D3D3D3;
    box-shadow: 2px 2px 1px #D3D3D3;
    z-index: 12; /* Ensure it does not interfere with .main_column */
}


.user_details_left_right{

	width: 125px;
	display: inline-block;
	position: absolute;
	
} 


.user_details_left_right a{

	
	
	font-weight: bold;
	text-decoration: none;
	font-size:larger;
	
}

.user_details img {
    width: 100px;
    margin-right: 10px;
    border-radius: 50%;
    border: 2px solid #0056b3;
}


.user_details {
    position: static; /* Remove absolute positioning */
    width: 100%; /* Full width of parent */
    height:280px;
    background-color: white;
    padding: 20px; /* Add padding for spacing */
    margin-bottom: 20px; /* Add margin to separate from .main_column */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); /* Optional: Add shadow */
}

.main_column {
    position: relative;
    width: 100vw; /* Full viewport width */
    max-width: 100%; /* Ensure it doesn't shrink */
    height: calc(100vh - 70px); /* Adjust height if necessary */
    padding:20px 0px; /* Remove padding */
    margin: 0 auto; /* Center it if needed */
    overflow-y: auto; /* Enable scrolling */
    background-color: #eeeff0; /* Background */
    z-index: 10; /* Ensure it's above other elements */
}



/* Hide the body's overflow to prevent the document scroll */
body.no-scroll {
    overflow: hidden;
}

/* Customize the scrollbar */
.main_column::-webkit-scrollbar {
    width: 12px;  /* Width of the scrollbar */
}

/* Customize the track (background of the scrollbar) */
.main_column::-webkit-scrollbar-track {
    background: #f2f2f2;  /* Light grey background */
    border-radius: 6px;   /* Rounded corners */
}

/* Customize the thumb (scroll handle) */
.main_column::-webkit-scrollbar-thumb {
    background-color: #888;  /* Darker color for the thumb */
    border-radius: 6px;      /* Rounded corners for the thumb */
    border: 3px solid #f2f2f2; /* Space around the thumb */
}

/* Customize the corner (where two scrollbars meet) */
.main_column::-webkit-scrollbar-corner {
    background: #f2f2f2;
}

/*****************************************************************************/

/* Customize the scrollbar */
.loaded_messages::-webkit-scrollbar {
    width: 12px;  /* Width of the scrollbar */
}

/* Customize the track (background of the scrollbar) */
.loaded_messages::-webkit-scrollbar-track {
    background: #f2f2f2;  /* Light grey background */
    border-radius: 6px;   /* Rounded corners */
}

/* Customize the thumb (scroll handle) */
.loaded_messages::-webkit-scrollbar-thumb {
    background-color: #888;  /* Darker color for the thumb */
    border-radius: 6px;      /* Rounded corners for the thumb */
    border: 3px solid #f2f2f2; /* Space around the thumb */
}

/* Customize the corner (where two scrollbars meet) */
.loaded_messages::-webkit-scrollbar-corner {
    background: #f2f2f2;
}
/* Scrollable messages container */
.loaded_messages {
    height: calc(100% - 160px); /* Adjust based on the space required for message input */
    overflow-y: auto; /* This allows vertical scrolling */
    background-color: #f9f9f9;
    padding: 10px;
    display: flex;
    flex-direction: column-reverse; /* Start at the bottom */
}
.message_posts {
    position: relative;
    
    width: 100%;
    padding: 20px;
    background-color: #fff;
    box-shadow: 0px -2px 5px rgba(0,0,0,0.1);
}





.post_form{
    display: flex; /* Arrange items in a row */
    align-items: center; /* Align vertically */
    flex-wrap: wrap; /* Allow wrapping to the next line */
   
	width: 100%;
	border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    position: relative;
}
.post_form textarea{
    flex: 1; /* Take up available space */
    resize: none; /* Disable manual resizing */
    
	height: 60px;
	border-radius: 5px;
	margin-right: 5px;
	border: 1px  solid #D3D3D3;
	background-color:#eeeff0;
}

input [type = placeholder]{
	margin:4px;
}

.post_form input[type="submit"]{
	width: 100px;
	height: 60px;
	border: none;
	border-radius: 5px;
	background-color: #2980b9;
	font-weight:  bold;
	color: white;

	outline: 0;
	margin: 0;
	transition: background-color 0.3s ease; /* Smooth background color transition */

}

/* Hover effect for the button */
.post-form input[type="submit"]:hover {
    background-color: #1f5d8e; /* Darker shade on hover */
}

.photo_video_btn_wrapper {
    width: 100%; /* Make it full-width to ensure it goes to a new line */
    margin-top: 10px; /* Add some spacing above the button */
    text-align: left; /* Align the button to the left */
}

/* Responsive YouTube Embed */
/* Ensure the container maintains the correct aspect ratio */
.video-container {
    position: relative;
    width: 100% !important; /* Full width of the parent container */
    padding-bottom: 56.25%; /* Maintain 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    background: #000; /* Optional: black background */
}

/* Ensure the iframe stretches to fill the entire container */
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important; /* Override inline width */
    height: 100% !important; /* Override inline height */
    border: none;
}




/*styling register box*/

.registerbox{
	width: 380px;
	height: auto;
	/* Web browsers that does not support RGBa */
        background: rgb(0, 0, 0);
        /* IE9/FF/chrome/safari supported */
        background: rgba(0, 0, 0, 0.8);
        /* IE 8 supported */
        /* Here some time problem for Hover than you can use background color/image */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
        /* Below IE7 supported */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
	color: #fff;
	top: 50%;
	left:50%;
	position: absolute;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border-radius: 10px;

}
.alert-error{
	text-align: center;
	font-size: 15px;
	color: #FF0000;
	font-weight: bold;
	font-family: monospace;

}
h1{

	padding: 0 0 20px;
	text-align: center;
	font-size: 22px;
}
.registerbox p{
	font-weight: bold;
	padding-left: 10px;

}
.registerbox input{
	padding-left: 10px;
	padding-right: -90px;
	width: 95%;
	margin-bottom: 20px;

	

}
.registerbox input[type = "text"], input[type = "password"], input[type = "ConfirmPassword"], input[type = "email"]{

	border: none;
	padding-left: 10px;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline:none;
	height: 20px;
	color: #fff;
	font-size: 16px;

}
.registerbox input[type = "submit"] {
	
	border: none;
	outline: none;
	height: 40px;
	background: #1c8adb;
	color: #fff;
	font-size: 18px;
	align-content: center;
	border-radius: 20px;
}
.registerbox input[type = "submit"]:hover{
	cursor: pointer;
	background: rgb(28,233,4);
	color: #000;

}

/* Target the date input */
.registerbox input[type="date"] {
    border: none;
	padding-left: 10px;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline:none;
	height: 20px;
	color: #fff;
	font-size: 16px;
    transition: border-color 0.3s ease; /* Smooth border color transition */
}


/* Hide default calendar icon (WebKit/Blink) */
input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1); /* changes icon color */
  cursor: pointer;
}

/* Style on focus */
.registerbox input[type="date"]:focus {
    border-color: #007bff; /* Change border color when focused */
    background-color: rgba(240, 248, 255, 0.3); /* Very light blue with 30% opacity */
    border-radius: 4px;
}

/* Optional: Style placeholder text */
.registerbox input[type="date"]::placeholder {
    color: #999; /* Lighter color for placeholder text */
    font-style: italic; /* Italicize placeholder */
}

.registerform{
	padding-left: 10px;

}

/*login styling starts here*/

#myVideo {
  position: fixed;
  right: 0;
  bottom: 0;
  min-width: 100%;
  min-height: 100%;
}

.loginbox{
     
    
    
	width: 320px;
	height: 455px;
	 /* Web browsers that does not support RGBa */
        background: rgb(0, 0, 0);
        /* IE9/FF/chrome/safari supported */
        background: rgba(0, 0, 0, 0.8);
        /* IE 8 supported */
        /* Here some time problem for Hover than you can use background color/image */
        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000)";
        /* Below IE7 supported */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#88000000, endColorstr=#88000000);
 
	color: #fff;
	top: 50%;
	left:50%;
	position: absolute;
	transform: translate(-50%, -50%);
	box-sizing: border-box;
	border-radius: 10px;

}
.loginbox-heading{

	padding: 0 0 0px;
	text-align: center;
	font-size: 22px;
}
.loginbox p{
	font-weight: bold;
	padding-left: 10px;
}
.loginbox input{
	padding-left: 10px;
	padding-right: -30px;
	width: 94%;
	margin-bottom: 20px;

	

}
.loginbox input[type = "text"], input[type = "password"]{

	border: none;
	padding-left: 10px;
	border-bottom: 1px solid #fff;
	background: transparent;
	outline:none;
	height: 40px;
	color: #fff;
	font-size: 16px;

}
.loginbox input[type = "submit"]{
	
	border: none;
	outline: none;
	height: 40px;
	background: #1c8adb;
	color: #fff;
	font-size: 18px;
	align-content: center;
	border-radius: 20px;

}
.loginbox input[type = "submit"]:hover{
	cursor: pointer;
	background: rgb(28,233,4);
	color: #000;

}

.loginform{
	padding-left: 10px;

}
#comment_iframe{
	height: 300px;
	width: 100%;
	border-radius: 3px;
	border: 1px solid #e1e1e1;
	background-color: #D3D3D3;
	margin-top: 8px;
}
.post_profile_pic{
	float:left;
	margin-left: 15px;
	margin-right: 5px;
	border-radius: 50px;
}
.posted_by {
float: left;
margin-left: 15px;
font-size: 11px;

}
.posted_by a{
	font-size: 1rem;
	}

#post_body{
	display: -webkit-inline-box;
	


}
#post_body text{
	margin-left: 10px;


}
.comment_section{
    background-color: #f0f0f0; /* Light gray background */
	border-radius: 8px;
	
    max-width: 100%; /* Prevents it from exceeding the container width */
    
    padding: 8px;
}

.reply_section{
   margin-left: 30px;
    margin-bottom: 10px;
    padding: 10px;
    
}
.comment {
        background-color: #f9f9f9;
        border: 1px solid #e0e0e0;
        padding: 15px;
        margin-bottom: 10px;
        border-radius: 5px;
        }

/* The form textarea at the bottom */
.comment_form {
    
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 0px;
    position: sticky;
    bottom:2px;
    
}

#comment_form {
    
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 0px;
    position: sticky;
    bottom:2px;
    
}

.comment_form textarea{
	width:85%;
	height: 35px;
	border-radius: 5px;
	color: #616060;
	margin: 3px 3px 3px 3px;
	border: 1px solid #D3D3D3;
    background-color: #eeeff0;
}
.comment_form input[type = "submit"]{
	width: 100px;
    height: 35px;
    border: none;
    border-radius: 5px;
    background-color: #2980b9;
    font-weight: bold;
    color: white;
    outline: 0;
    margin: 3px 3px 3px 3px;
}



.mention {
    color: #4c2397;
    font-weight: bold;
    text-decoration: none;
}

.mention:hover {
    text-decoration: underline;
}

.view-replies-button {
    color: #065fd4; /* Light blue color */
    font-size: medium;
    font-weight: 500; /* Medium font weight */
    text-decoration: none; /* Remove underline */
    cursor: pointer; /* Show pointer cursor on hover */
    margin-left: 50px; /* Adjust margin to align with the comment */
    display: inline-block; /* Ensure it behaves like a button */
    padding: 5px 0; /* Add some padding for better clickability */
    margin-bottom: 5px;
}

.view-replies-button:hover {
    font-size: medium;
    background-color: #c9dae9;
    border-radius: 15px;
    padding: 5px;
    text-decoration: none;
}

.reply-form {
    margin-left: 30px;
    margin-top: 10px;
    margin-bottom:10px;
}

.reply {
    width: 100%;
    padding: 10px;
    border:none;
    border-bottom: 2px solid black;
    outline: none;
    resize: vertical;
    font-family: Arial, sans-serif;
    font-size: 14px;
    margin-bottom: 10px;
}

.reply-buttons {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    
}

.like-button{
    border: none;
    background: transparent;
}

.like-button:focus {
    outline: none; /* Remove the focus outline */
}

.reply-buttons .reply-button {
    border-radius: 50px;
    background-color: #2980b9;
    font-size: 14px;
    color: white;
    font-weight: 500;
    border: 2px #2980b9;
}

.reply-buttons .cancel-button {
    background-color: transparent;
    border: none;
    color: #065fd4;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 50px;
}

.reply-buttons .cancel-button:hover {
    text-decoration: none; /* Remove underline */
    will-change: opacity; /* Optimize for opacity changes */
    -webkit-tap-highlight-color: transparent; /* Disable tap highlight on mobile */
    opacity: 1.0; /* Example: Fade effect on hover */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    background-color: rgba(128, 128, 128, 0.2); /* Light grey with 20% opacity */
}

.reply-buttons input[type='submit'] {
    background-color: #065fd4;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.reply-buttons input[type='submit']:hover {
    background-color: #054fad;
}


.reply-actions {
    display: flex;
    align-items: center;
    gap: 10px; /* Spacing between buttons */
    font-size: 14px;
    color: #606060;
    margin-top: 4px;
    margin-left: 22px;
}

.reply-actions button {
    background: none;
    border: none;
    cursor: pointer;
    color: #606060;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px; /* Spacing between icon and number */
    padding: 5px;
}

.reply-actions button:hover {
    color: #000; /* Darker on hover */
}

.reply-actions button span {
    font-size: 14px;
    font-weight: 500;
}

/* Hide like/dislike count if it's zero */
.reply-actions .like-count,
.reply-actions .dislike-count {
    display: none;
}

.reply-actions .like-count[data-count]:not([data-count="0"]),
.reply-actions .dislike-count[data-count]:not([data-count="0"]) {
    display: inline; /* Only display if count > 0 */
}



/* Responsive handling for smaller screens */
@media only screen and (max-width: 600px) {
    #comment_form {
        position: relative;
        width: 100%;
    }
    #comment_form textarea {
        width: 80%;
    }
}
.newsfeedPostOptions{
	padding: 0px;
	text-decoration: none;
	color: #000;
	border:none;
	margin-left: 15px;
}

.newsfeedPostOptions iframe{
	border:0px;
	width:120px;
	height: 19px;
}

.newsfeedPostOptions form{
	position: absolute;
	top:0px;
	
}
.comment_like{
	background-color: white;
	border:none;
	padding: 0;

}

.like_value{

	display: inline;

}

.profile_left {
    width: 401px;
    background-color: #2980b9;
    color: white;
    height: calc(100vh - 70px);
    padding: 20px;
    position: absolute;
    flex-shrink: 0; /* Prevents sidebar from shrinking */
    top: 0; /* Remove top offset since wrapper already has it */
}

.profile_left img{
	
	min-width: 80px;
	width: 55%;
	margin: 20px 40px 40px 50px;
	border: 5px solid #a8dcf0;
	border-radius: 100px;



	

}
.profile_info{
	display: list-item;
	width: 100%;
	padding: 10px 0 10px 0;
	margin-left: 20px;
}

.danger{
	margin-left: 20px;
	background-color: #ef4455;
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
}

.warning{
	margin-left: 7px;
	color: black;
	background-color: red;
    border: 1px black;
    border-radius: 2px;
    height: 32px;
    margin: 7px;

}
.default{
	margin-left: 7px;
	color: black;
    border: 1px black;
    border-radius: 2px;
    height: 32px;
    margin: 7px;
}

.success{
	margin-left: 20px;
	border-radius: 5px;
	color: #fff;
	background-color: #28a745;
	
	padding: 5px 10px;
	border: none;
}

#accept_button{
	border-radius: 5px;
	color: #fff;
	background-color: #28a745;
	font-weight: bold;
	padding: 5px 10px;
	border: none;

}

#ignore_button{
	font-weight: bold;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
    border-radius: 2px;
    border: grey;
	

}
.alert{
	color: black;
	background-color: green;
    border: 1px black;
    border-radius: 2px;
    height: 32px;
    margin: 7px;

}

.deep_blue{
	color: black;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    
}



.delete_button{
	height: 22px;
	width: 22px;
	float: right;
	border-radius: 4px;
	position: relative;
	padding: 0;
	right:  -600px;
}

.loaded_messages input[type = "text"], input[type = "password"]{

	border: none;
	padding-left: 10px;
	border-bottom: 1px solid white;
	background: transparent;
	outline:none;
	height: 20px;
	color: #fff;
	font-size: 16px;

}
#message_textarea{
	width: 85%;
	height: 50px;
	border-radius: 5px;
	margin-right: 5px;
	border: 3px  solid #D3D3D3;

}
#message_submit{
	width: 15%;
    height: 50px;
    border: none;
    border-radius: 5px;
    background-color: #2980b9;
    font-weight: bold;
    color: white;
    position: absolute;
    outline: 0;
    
}
#blue{
    background: bisque;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    color:black;
    width:fit-content;
    margin-inline-start: auto;
}
#green{
	background-color: #2980b9;
    height: auto;
    padding: 10px;
    border-radius: 5px;
    color:#fff;
    width:fit-content;
}

.loaded_conversations{
	max-height: 400px;
	overflow: scroll;
}
.loaded_conversations a{
	text-decoration: none;
}
.user_found_messages{
	border-bottom: 1px solid #D3D3D3; 
	padding: 6px 6px 6px 6px;
	border-radius: 3px;
	display: flex;
    align-items: flex-start;
    

}
.user_found_messages:hover{
	background-color: #D3D3D3;
	text-decoration:none;

}

.user_found_messages img{
    width:auto;
	height: 35px;
	float: left;
	
}

/** new message css updates for messages.php**/


.message_container {
    display: flex;
    align-items:  center;;
    margin-bottom: 10px;
    
    border-radius: 10px;
    width: fit-content;
    padding: 5px;
    font-weight:bold;
    -webkit-user-modify: read-write-plaintext-only;
}

.message_sent {
    justify-content: flex-end; /* Aligns the sent messages to the right */
    background-color: #538ac5; /* Background for sent messages #0056b3*/
    margin-left: auto;
}

.message_received {
    justify-content: flex-start; /* Aligns the received messages to the left */
    background-color: #e1e1e1; /* Background for received messages */
    
}

.message_sent .message_content {
    background-color: #538ac5; /* Background for sent messages */
    color: black; /* Text color for sent messages */
}

.message_received .message_content {
    background-color: #e1e1e1; /* Background for received messages */
    color: black; /* Text color for received messages */
}

.message_date {
    font-size: 12px;
    color: gray;
    margin-top: 3px;
    background:none;
    padding-bottom: 10px;
    cursor:pointer;
}

.message_date: hover{
    font-size:14px;
    text-decoration:underline;
}



.profile_pic img {
    border-radius: 50%;
    width: 40px;
    height: 40px;
}

/* Messages sent by the logged-in user */
.sent_message {
    background-color: #DCF8C6; /* Light green */
    padding: 10px;
    border-radius: 10px;
    margin-left: 10px;
    word-wrap: break-word;
    max-width: 70%;
}

/* Messages received from the other user */
.received_message {
    background-color: #ECECEC; /* Light grey */
    padding: 10px;
    border-radius: 10px;
    margin-left: 10px;
    word-wrap: break-word;
    max-width: 70%;
}


#grey{
    color: #5E5E5E;
    text-decoration: none;
}

.resultDisplay{
padding:  5px 5px 0 5px;
height: 60px;
border-bottom: 1px solid #D3D3D3;
border-radius: 3px;
width: 360px;

}



.resultDisplay a{
float: none;
}

.resultDisplay:hover{

background-color: #a9a9a9;
text-decoration: none;
}



.liveSearchProfilePic img{
	height: 50px;
	border-radius: 50px;
	margin: 1px 12px 0 2px;
	float:left;
}
.liveSearchText p{
	margin-left: 20px;
	text-decoration: none;
	font-weight: bold;
}
.tab-content{
	margin-top: 10px;
}

.message_posts input[type = "text"]{

	border: none;
	padding-left: 10px;
	border-bottom: 1px solid black;
	background: transparent;
	outline:none;
	height: 20px;
	color: black;
	font-size: 16px;
	padding-bottom: 8px;

}

.fas fa-ellipsis-h-alt :hover{


}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;

  /* Position the tooltip */
  position: absolute;
  z-index: 1000;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
.dropdown_data_window{
	top: 60px;
	right: 10px;
	position: absolute;
	background-color: white;
	width: 379px;
	height: 500px; /* Set appropriate height */
    overflow-y: auto; /* Enable vertical scrolling */
    z-index:1000;
}

/* Scrollbar for Webkit Browsers */
/* Customize the scrollbar */
.dropdown_data_window::-webkit-scrollbar {
    width: 10px;  /* Width of the scrollbar */
}

/* Customize the track (background of the scrollbar) */
.dropdown_data_window::-webkit-scrollbar-track {
    background: #f2f2f2;  /* Light grey background */
    border-radius: 6px;   /* Rounded corners */
}

/* Customize the thumb (scroll handle) */
.dropdown_data_window::-webkit-scrollbar-thumb {
    background-color: #888;  /* Darker color for the thumb */
    border-radius: 6px;      /* Rounded corners for the thumb */
    border: 3px solid #f2f2f2; /* Space around the thumb */
}

/* Customize the corner (where two scrollbars meet) */
.dropdown_data_window::-webkit-scrollbar-corner {
    background: #f2f2f2;
}

.notification_badge{
	background-color: #f00;
    color: #fff;
    display: inline;
    padding-left: 6px;
    padding-right: 6px;
    text-align: center;
    border-radius: 50%;
    font-size: 12px;
    top: -10px;
    right: 10px;
    position: relative;
    line-height: 1;
}

.resultDisplayNotification{
	height: auto;
	color: #1485BD;
	display: flex;
	align-items: flex-start;
    padding: 10px;
    border-bottom: 1px solid #ddd;

}

.resultDisplayNotification img{
	height: 40px;
	border-radius: 5px;
	margin: 1px 12px 0px 2px;
	float: left;

}
.timestamp_smaller {
	font-size: 85%;
	margin: 0;
}

/* Styling for search form */
.search_results_footer {
    background-color: white;
    text-decoration: none;
    padding: 5px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none; /* Initially hidden */
}

/* Styling for the input field */
.search #search_text_input {
    border: 1px solid #538ac5;
    background: white;
    text-align: left;
    color: black;
    border-radius: 15px;
    height: 32px;
    font-size: 17px;
    margin: 4px 0 0 0;
    margin-left: 140px;
    width: 415px;
}

/* The search container */
.search {
    position: relative; /* Needed for the absolute positioning of results */
    font-size: 12px;
    width: 100%;
    max-width: 415px;
    margin: 0 auto; /* Center the search bar */
    box-sizing: border-box;
}

/* The search results container */
.search_results {
    background: white;
    position: absolute;
    top: 55px; /* Position it just below the input */
    left: 230px;
    width: 100%; /* Matches the width of the input */
    max-width: 415px;
    box-sizing: border-box;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: none; /* Initially hidden */
    z-index: 100; /* Ensure it stays above other elements */
}

/* Styling for each search result item */
.search_results .result_item {
    padding: 10px;
    border-bottom: 1px solid #ddd;
    text-align: left;
    display: flex;
    align-items: center;
}

.search_results .result_item:last-child {
    border-bottom: none;
}

/* Add hover effect */
.search_results .result_item:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}



.searchPageFriendButtons {
	padding: 2px;
	float: right;
    margin-top: 20px;
    font-size: 13.5px;
    margin-left: 0px;
    margin-top: 2px;

}

div.result_profile_pic{
	float:left;
	margin-right: 8px;

}




/* Style for each settings box */


.settings_option {
    background-color: #f9f9f9;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    text-align: center;
    transition: transform 0.3s ease;
    height: 315px; /* Fixed height for each box */
    width : 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.settings_option:hover {
    transform: translateY(-5px);
}

.settings_option img {
    width: 115px;
    border-radius: 50%;
    margin-bottom: 10px;
}

.settings_option h5 {
    font-size: 18px;
    color: #333;
    margin-bottom: 10px;
}

.settings_option p {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.settings_option input[type="text"],
.settings_option input[type="password"] {
    border: none;
	padding-left: 0px;
	border-bottom: 1px solid black;
	background: transparent;
	outline:none;
	color: black;
	font-size: 16px;
}

.settings_button {
    display: inline-block;
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    font-size: 14px;
    transition: background-color 0.3s ease;
}

.settings_button:hover {
    background-color: #343a40 ;
    text-decoration:none;
    color: white;
}

/* Style for each settings box */


.postedImage{
	
    width: 100%; /* Full width */
    height: auto; /* Desired height */
    overflow: hidden;
}

.postedImage img{
    
    top: 50%;
    left:50%;
    width: auto;
    height: 100%;
    
}

/** load profile post css file made 09/16/2024*/

.post_container {
    border: 1px solid #ddd;
    border-radius: 8px;
    background-color: #fff;
    padding: 15px;
    margin-bottom: 20px;
    width: 100%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.post_header {
    display: flex;
    align-items: center;
}

.post_profile_pic img {
    border-radius: 50%;
    width: 45px;
    height: 45px;
    margin-right: 10px;
}

.post_info a {
    font-weight: bold;
    font-size: 16px;
    color: #333;
    text-decoration: none;
}

.post_info span {
    font-size: 12px;
    color: #777;
}

.post_delete {
    margin-left: auto;
}

.post_body {
    margin-top: 10px;
    font-size: 15px;
    color: #333;
}

.postedImage img {
    width: auto;
    max-height: 500px;
    margin-top: 10px;
    border-radius: 5px;
}

.post_footer {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    height:40px;
}

.post_likes iframe {
    border: none;
    width:100%;
    height: -webkit-fill-available;
}

.post_comments {
    font-size: 14px;
    color: #888;
    cursor:pointer;
}

.post_comment_section {
    margin-top: 15px;
    height:400px;
  
}

.comment-icon {
    display: none; /* Hide the icon by default */
    margin-right: 5px; /* Space between the icon and the number */
}

.modal-dialog {
    position: relative;
    margin: 80px auto; /* Ensure some margin at the top */
}

.modal-backdrop{
    display: none;
}

/*************Likes modal styling start******/
.like-entry {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.like-profile-pic {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
}

.liked-user-link {
    color: #007bff;
    text-decoration: none;
    margin-right: 10px;
}

.liked-user-link:hover {
    text-decoration: underline;
    color: #0056b3;
}

.add-friend-btn {
    background-color: #28a745;
    color: #fff;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}

.add-friend-btn:hover {
    background-color: #218838;
}

.friend-status {
    color: #6c757d;
    font-style: italic;
}





/*************Likes modal styling end******/

/* BOOTSTRAP BREAK POINTS:*/

/*Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap*/

/* Media Modal for mobile view */

@media screen and (max-width: 820px) {
    .main_column {
        width: 100%;
        padding: 0 10px; /* Add some padding */
    }

    /* Hide user details or move them to a dropdown to save space */
    .user_details, .profile_left {
        display: none;
    }

    /* Adjust the modal to be more mobile-friendly */
    .modal-dialog {
        width: 90%; /* Make the modal fit nicely on mobile */
        margin: 0 auto;
    }

    /* Style for the textarea in the modal */
    #modal_post_text {
        width: 100%;
    }

    /* Adjustments to the drop area for media upload */
    #drop-area {
        padding: 10px;
    }
    
    .comment-text {
        display: none; /* Hide the text on smaller screens */
    }

    .comment-icon {
        display: inline; /* Show the icon on smaller screens */
    }
    
    .post_form {
        flex-direction: column; /* Stack vertically on small screens */
    }

    .post_form textarea {
        width: 100%; /* Full width on small screens */
        margin-bottom: 10px; /* Add space below the textarea */
    }

    .post_form input[type="submit"] {
        width: 100%; /* Button covers the entire width */
        height: 60px; /* Maintain the same height */
    }
    
    #comment_form input[type = "submit"]{
        width: 100%; /* Button covers the entire width */
        height: 35px; /* Maintain the same height */
    }
    
    #comment_form textarea{
        width: 100%; /* Full width on small screens */
        margin-bottom: 10px; /* Add space below the textarea */
    }
     .dropdown_data_window {
        top: 40px; /* Adjust if needed */
        right: auto; /* Reset right positioning */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Center the dropdown */
        width: 90%; /* Make the dropdown responsive in width */
        height: 300px; /* Adjust height if necessary */
        position:fixed;
        z-index:1030;
    }
    
    
}


@media only screen and (max-width: 768px) {
    .main_column {
      
        width: 100vw !important; /* Ensure full viewport width */
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 auto !important;
    }

    /* Hide user details or move them to a dropdown to save space */
    .user_details, .profile_left {
        display: none;
    }

    /* Adjust the modal to be more mobile-friendly */
    .modal-dialog {
        width: 90%; /* Make the modal fit nicely on mobile */
        margin: 0 auto;
    }

    /* Style for the textarea in the modal */
    #modal_post_text {
        width: 100%;
    }

    /* Adjustments to the drop area for media upload */
    #drop-area {
        padding: 10px;
    }
    
    .comment-text {
        display: none; /* Hide the text on smaller screens */
    }

    .comment-icon {
        display: inline; /* Show the icon on smaller screens */
    }
    
    .post_form {
        flex-direction: column; /* Stack vertically on small screens */
    }

    .post_form textarea {
        width: 100%; /* Full width on small screens */
        margin-bottom: 10px; /* Add space below the textarea */
    }

    .post_form input[type="submit"] {
        width: 100%; /* Button covers the entire width */
        height: 60px; /* Maintain the same height */
    }
    
    #comment_form input[type = "submit"]{
        width: 100%; /* Button covers the entire width */
        height: 35px; /* Maintain the same height */
    }
    
    #comment_form textarea{
        width: 100%; /* Full width on small screens */
        margin-bottom: 10px; /* Add space below the textarea */
    }
     .dropdown_data_window {
        top: 40px; /* Adjust if needed */
        right: auto; /* Reset right positioning */
        left: 50%; /* Center horizontally */
        transform: translateX(-50%); /* Center the dropdown */
        width: 90%; /* Make the dropdown responsive in width */
        height: 300px; /* Adjust height if necessary */
        position:fixed;
        z-index:1030;
    }
    
    .container {
    width: 100%;
    padding-right: 0px;
    padding-left: 0px;
    margin-right: 0px;
    margin-left: 0px;
    }
    
    .wrapper{
        margin: 0px;
        width: 100vw !important;
        max-width: 100%;
        padding: 0 !important;
    }
    
    .video-container iframe {
    width: -webkit-fill-available !important;
    height: -webkit-fill-available !important;
    max-width: 100% !important;
    max-height: 100% !important;
    display: block !important;
    


}



  .container{
      padding: 0 !important; /* Remove the desktop padding */
  }

  .reel-container {
    position: relative;
    padding: 0 !important; /* Remove the desktop padding */
    height: var(--vh, 100vh);
    margin-top: 0;
  }

  .reel-item {
    padding: 0 !important; /* Remove the desktop padding */
    height: var(--vh, 100vh);
  }

  .reel-item video {
    width: 100vw;
    height: 100vh;
    object-fit: cover;
  }    .reel-content-wrapper {
    height: 100vh;
    padding: 0;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
    padding-top: 0 !important;
  }
.reel-overlay,
  .reel-comment-panel,
  .commentPanel,
  .bottom-left-info {
    z-index: 10;
  }
  
  

  .left-sidebar {
    display: none;
  }

  .main_column {
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
  }


   
    .main_column,
  .reel-container {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  } 
  
  
  
  .reel-comment-panel {
    width: 100%;
    height: 60vh;
    top: auto;
    bottom: 0;
    right: 0;
    transform: translateY(100%);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
  }

  .reel-comment-panel.active {
    transform: translateY(0);
  }

  /* Shrink video when panel is active */
  .reel-comment-panel.active ~ .reel-content-wrapper .player-container {
    height: 40vh;
    transition: height 0.3s ease;
  }

  /* Adjust video container */
  .player-container {
    transition: height 0.3s ease;
  }
}

/* For even smaller screens */
@media screen and (max-width: 480px) {
    .posts_area {
        padding: 0 5px;
    }

    .post_form textarea {
        font-size: 14px; /* Adjust font size for smaller screens */
    }

    /* Ensure buttons stack properly */
    .btn {
        width: 100%; /* Make buttons take full width */
        margin-top: 5px;
    }

    /* Adjust preview image */
    #previewImage {
        max-width: 80%; /* Smaller preview on mobile */
    }
    
    
}




/* Responsive Adjustments */
@media only screen and (max-width: 992px) {
    .wrapper {
        flex-direction: column;
    }
    
    .user_details.column {
        width: 100%;
        height: auto;
        position: relative;
    }

    .main_column {
        margin-left: 0;
        width: 100%;
    }

    .post_form input[type="submit"] {
        width: 100%;
        margin-top: 10px;
    }
    
    .profile_left
    {
        display:none;
    }
    
}

/* Media Queries for Responsive Layout */

/* Medium Screens (Tablets) */
@media (max-width: 1024px) {
    .right-sidebar {
        display: none; /* Hide right sidebar on medium screens */
    }
    



    .left-sidebar {
        flex: 0 0 200px; /* Reduce width of left sidebar */
    }
}


  
/* Medium Screens (Ipads) */  
  
@media screen and (max-width: 1024px) {
  html, body {
    margin: 0;
    padding: 0;
    height: 100vh;
    overflow: hidden;
    background: #000;
  }

   .reel-container,
  .reel-item,
  .player-container {
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
    padding: 0 !important;
    margin: 0 !important;
    background: #000;
    overflow: hidden;
  }

  .reel-content-wrapper {
    padding-top: 0 !important;
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .player-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .left-sidebar,
  .profile_left {
    display: none !important;
  }

  .main_column {
    width: 100vw !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden;
  }
  
  
    .share-modal-content {
    width: 90% !important;
    max-width: 90vw;
    margin: 20px auto;
    padding: 15px;
    border-radius: 8px;
    padding-top:2px;
  }

  .share-icons-page {
    justify-content: center;
    gap: 10px;
  }

  .share-icon {
    width: 60px;
    font-size: 11px;
  }

  .share-icon img {
    width: 35px;
    height: 35px;
  }

  .share-link-box {
    flex-direction: column;
    gap: 10px;
  }

  .share-link-box input {
    width: 100%;
  }

  .share-link-box button {
    width: 100%;
  }

  .share-arrows {
    justify-content: center;
    gap: 20px;
  }

  .share-arrows button {
    padding: 6px 12px;
  }

  .share-modal {
    overflow-y: auto; /* Ensure scroll on smaller screens */
  }
  
}


/*small Screens (Mobile) */
@media (max-width: 768px) {
    .left-sidebar {
        display: none; /* Hide left sidebar on small screens */
    }

    .main_column {
        flex: 1; /* Main column takes full width */
        padding: 0px;
    }
}

/* Default: Hide text inside the span */
.recommended-badge {
    visibility: hidden; /* Hide the default text */
    position: relative;
}

/* Small screens: Show "Rec" */
@media screen and (max-width: 768px) {
    .recommended-badge::after {
        content: attr(data-short); /* Show "Rec" */
        visibility: visible;
        position: absolute;
        left: 0;
    }
}

/* Large screens: Show "Recommended" */
@media screen and (min-width: 769px) {
    .recommended-badge::after {
        content: attr(data-full); /* Show "Recommended" */
        visibility: visible;
        position: absolute;
        left: 0;
    }
}