body {
  background-color:#BABABA; 
}

/* css for the search button at the top page */
#search-icon {
  z-index: 2; /* Higher z-index to appear on top */
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* Box shadow for the "lifted" effect */
            border-radius: 10px;
            border: 5px solid white;
           
           
}

/* class for times new roman font */
.times-roman-font {
  font-family: 'Times New Roman', Times, serif;
}

#search-button {
  border: none;
}



/* css for suqsphere logo on top page */
#index-suqlogo {
  border-radius: 50%;
  width: 50px; 
 
}

.top-page {
  top: 0;
  background-color: white;
  color: black;
  position: fixed;
  z-index: 1000;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.5);
  border-radius: 20px;
}



.general-border {
  margin-top: -140px; 
  z-index: 2000; 
  position: absolute; 
  margin-left: 15%;
  height: 1000px;
  width: 45.5%;
}


.search-form {
  margin-bottom: 20px;
}

.search-form input[type="text"] {
  padding: 1px;
  width: 200px;
}

.search-form button {
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}




.like-button {
  background: none;
  border: none;
  padding: 0;
}


/* index page post margin styling */
.post-card {
  background-color: #f0f8ff;
  border-radius: 20px;
  width: 55%;
  margin-left: 250px;
  z-index: 500;
 /* box-shadow: 0 10px 20px black; */
  
}
/* profile page post margin styling */
.profile-posts-margin {
  background-color: #f0f8ff;
  border-radius: 20px;
  width: 55%;
  margin-left: 400px;
}
.center {
  margin: auto;
  width: 82%;
  background-color: #f0f8ff;
  padding: 10px;
  text-align: center;
  position: relative; /* Important for z-index to work */
}

.center > div {
  display: inline-block;
  text-align: left;
}

.image-profile {
  position: absolute;
  top: -120px; /* Adjust the value based on your design */
  left: 15%;
  transform: translateX(-50%);
  z-index: 1; /* Ensure it appears above other elements */
}

.user-details {
  margin-left: 300px; /* Adjust the margin as needed */
}

#editBioBtn{
  margin-left: 700px;
  margin-top: -100px;
}

.post-cards {
  margin-top: -20px;
   background-color: #f0f8ff;
   border-top-left-radius: 0; /* adjust the value as needed */
  border-top-right-radius: 0; /* adjust the value as needed */
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
   width: 65%;
   z-index: 500;

 }
/* css for create post border and margin */
.createpost-margin {
  border-radius: 20px;
  margin-top: 90px;
  z-index: 500;
 /* box-shadow: 0 10px 20px black; */
  flex: 1;
 background-color: #f0f8ff;
  padding: 10px;
  box-sizing: border-box;
  width: 600px;
}

.profile-createpost-margin {
  border-radius: 20px;
  margin-top: 90px;
  z-index: 500;
 /* box-shadow: 0 10px 20px black; */
 background-color: #f0f8ff;
  padding: 10px;
  box-sizing: border-box;
  width: 600px;
  margin-left: 400px;
}

/* Add styles for the sidebar container */
.sidebar-container {
  position: relative;
  top: -125px; /* Adjust the value as needed */
}


.card-text {
  margin-top: -30px;
}

/* design for user profile cover */
.user-profile-cover{

}
/* Slider with left and right motion */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 20px;
  margin-left: 10px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: white;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 15px;
  width: 15px;
  left: 4px;
  bottom: 4px;
  background-color: #2196F3;
  transition: 0.4s;
  border-radius: 50%;
}



input:checked + .slider {
  background-color: black;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Optional: Add styles for when the switch is in its "off" state */
/* input[type="checkbox"]:not(:checked) + .slider:before {
  transform: translateX(0);
} */



/* Styles for desktop screens (min-width: 769px) */
@media screen and (min-width: 769px) {
  .index-container {
    margin: 0 /*270px*/;
  }
}


.card-body {
  white-space: normal; /* Allow text to wrap within the container */

}


.card-title {
 
  font-weight: bold;
  font-size: small;
}

.mb-0 {
  font-size: smaller;
}
/* followers and follow count */
.text-black{
  margin-top: 20px;
}

/* removes styling from media button */
.media-button {
  border: none; /* Remove the border */
        padding: 0; /* Remove padding */
        background-color: transparent; /* Make the background transparent */
        cursor: pointer;
  border: none; margin-left: 400px;
}

#media-icon {
  width: 30px; /* Adjust the width as needed */
        height: auto;
  margin-top: -40px;
}

/* CSS for Reaction Buttons */
.react-button {
  background: none; border: none;
}


.reaction-columns {
  display: flex;
}

.reaction-column {
  flex: 1;
  text-align: center;
}

.reaction-column button {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
}



.reaction-column div {
  display: none;
  margin-top: 10px;
}

/* Media queries for mobile and desktop */

/* Hide p tags with class "desktop-only" on mobile devices */
@media (max-width: 767px) {
  .desktop-only {
    display: none;
  }
}


/* Modal for creating posts */
/* Hide the modal by default */
.modal {
  display: none; /* Hide the modal */
  position: fixed;
  z-index: 2000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  max-width: 90%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


/* Hide the modal by default */
.reaction-modal {
  display: none; /* Hide the modal */
  position: fixed;
  z-index: 10000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  max-width: 90%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}


.image-container {
  display: flex;
  flex-wrap: wrap;
  gap: 4px; /* Adjust the gap between images as needed */
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.desktop-image {
  width: 100%;
  height: auto;
  max-width: 400px; /* Adjust this value to your desired phone size */
  max-height: 400px; /* Adjust this value to your desired phone size */
  object-fit: contain;
}


/* Base style for reaction buttons */
.reaction-button {
  display: flex;
  flex-wrap: nowrap; /* Prevent buttons from wrapping to new lines */
  gap: 0; /* No gap between buttons */
}

/* Styling for the container of reaction buttons within sub-elements */
.reaction-buttons-sub {
  display: flex;
  gap: 0; /* No gap between buttons */
}











.post-image-container {
  max-width: 100%;
  height: auto;
  margin-bottom: 1rem;
}


 .btn-like {
    background-color: #dc3545;
    border-color: #dc3545;
    color: white;
    padding: 5px 10px;
    font-size: 12px;
    border-radius: 4px;
  }
  .btn-like:hover {
    background-color: #c82333;
    border-color: #c82333;
  }

.profile-pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center;
}

.create-post-container {
  width: 100%;
  background-color: #f2f2f2;
  padding: 10px;
  color: #FFCF70;
  font-weight: 500;
  border-radius: 5px;
}

.input-group {
  background-color: #00308F;
  display: flex;
  justify-content: center;
  gap: 10px;
}

#library-border {
  margin-top: -140px;
   margin-left: 200px;
    z-index: 2000;
     position: absolute; background-color: white;
} 

.topic-card {
  background-color: white;
  color: black;
  border-color: black;
  border-radius: 30px;
  width: 100%;
}

#category-border {
  margin-top: -140px;
   margin-left: 200px;
    z-index: 2000;
     position: absolute; background-color: white;
}

.create-post-text {
  width: 100%;
  min-height: 100px;
  padding: 10px;
  border: none;
  border-radius: 5px;
  resize: none;
}

.create-post-options {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.create-post-button {
  background-color: #4267b2;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.facebook-post {
    background-color: #f2f2f2;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 10px;
  }

  .facebook-post .date {
    font-size: 12px;
    color: #999;
  }







.horizontal-container {
  display: flex;
  align-items: center; /* Align items vertically in the center */
  gap: 10px;
  background-color: white;
}


/* CSS for cropping the image from the right */
  .crop-image-from-right {
    overflow: hidden;
    width: 70px; /* Width of the cropped image */
    height: 50px; /* Height of the cropped image */
  }

  .crop-image-from-right img {
    object-fit: cover;
    object-position: right; /* Crop from the right side */
    width: 100%;
    height: 100%;
  }

  .library-upload {
    display: flex;
    justify-content: center;
    gap: 10px;
    
  }
/* CSS to style the category list */
.category-list {
  display: flex;
  flex-wrap: wrap;
  gap: 30px; /* Add spacing between items */
  list-style-type: none; /* Remove bullet points */
}

/* CSS to style each category item */
.category-item {
  display: flex;
  align-items: center; /* Vertically center-align items */
  flex: 0 0 calc(50% - 20px); /* Limit item width to fit two items per line with spacing */
}

/* Additional styling for the category image */
.category-item img {
  display: block; /* Remove extra spacing around images */
  margin-right: 10px; /* Add spacing between image and name */
  max-width: 70px; /* Limit the width of the image */
}

/* CSS to style the category name */
.category-item a {
  text-align: left; /* Align the name to the left of the image */
  font-weight: bold; /* Make the name bold */
  font-size: small;
}

.cat-text {
  margin-top: -20px;
}

  
  @media screen and (max-width: 767px) {
    .library-upload {
      display: block;
      text-align: center;
  }

  .library-upload p,
  .library-upload form {
      margin-bottom: 10px;
  }

  .library-upload form {
      display: inline-block;
  }

  video {
    height: 240px;
    width: 250px;
  }



.video-border {
    border: 0px solid #ccc;
    border-radius: 0px;
    padding: 0px;
    margin-bottom: 00px;
}
  }

  .document-border {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

.video-border {
    border: 1px solid #ccc;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 10px;
}

/* Add this CSS to your stylesheet */
.carousel-item img {
  max-width: 100%;
  max-height: 80vh; /* Limit the maximum height of carousel images to 80% of viewport height */
  width: auto; /* Maintain the aspect ratio of the images */
  height: auto;
  margin: 0 auto; /* Center the images horizontally */
  object-fit: contain; /* Maintain the aspect ratio and fit the image within the container */
}
.carousel-counter {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
}

/* styling for auctions, market and intellectual hub by the side */

.rotated-text {
  transform: rotate(270deg);
  background-color: white;
    color: #333;
    position: fixed;
    width: 10%;
    display: flex;
    color: white;
    font-family:Arial, Helvetica, sans-serif;
    cursor: pointer;
    font-size: larger;
    z-index: 4000;
    justify-content: center;
    border-radius: 10px;
    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    
    
}

#market-side-card {
  top: 71%;
  left: 68%; /* Adjust as needed */
  background-color: red;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 5000;
}

#intellectual-hub-side-card {
  left: 67%; /* Adjust as needed */
  top: 48%;
  width: 12%;
  background-color: #486006;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

#auctions-side-card {
  left: 68%; /* Adjust as needed */
  top: 25%;
  background-color: green;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}




/* Adjust the image size for larger screens if needed */
@media (min-width: 992px) {
  .carousel-item img {
    max-width: 70%; /* Limit the maximum width to 70% on larger screens */
    margin: 0 auto; /* Center the images horizontally */
  }
}

.intro-container {
  display: flex;
  align-items: center;
  margin-top: 100px;
}

.circle-container {
  width: 300px;
  height: 300px;
  border: 0.5px solid #0805c1;
  border-radius: 50%;
  margin-left: 200px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

/* beginning of index contaier */

.index-container {
  position: fixed;
  display: flex;
  z-index: 1000;
  margin-top: 30px;
  align-items: center;
  margin-left: 400px; /* Adjust as needed */
  
}


#open-sidebar {
  position: relative;
  margin-top: 295%;
  background-color: #4B9CD3;
  border: 0.5px solid #0805c1;
  cursor: pointer;
  color: red;
  border-radius: 5px;
  padding: 1px 50px; /* Adjust padding to control space between text and button width */
  font-size: 14px; /* Adjust font size as needed */
  font-family: Arial, sans-serif; 
  margin-left: -80px;
}

#head-shot {
  z-index: 1000;
  background-color: white;
  position: fixed;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 40%;
}

.profile-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-left: -300px;
}

/* styling for profile page friend sidebar image */
.friend-image {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .friend-image a {
    flex: 0 0 calc(30% - 10px); /* Three images per row with spacing */
    margin-bottom: 10px; /* Adjust as needed */
    box-sizing: border-box;
  }
  
  .friend-image img {
    width: 120%;
    height: 80%;
    border-radius: 10px;
  }
  

.button-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20px;
}

.chatlogo-container {
  margin-top: -50px;
  margin-left: 30px; /* Adjust as needed */
}

.index-circle-image {
  width: 200px;
  height: 200px;
  border: 0.5px solid #0805c1;
  border-radius: 50%;
  overflow: hidden;
}

.friend-profile {
  flex-grow: 1;
  flex-basis: calc(33.33% - 20px);
  margin-right: 10px;
  margin-bottom: 20px;
  text-align: center;
}

.friend-profile img {
  width: 100%;
  height: 80%;
  border-radius: 20px;
}



.profile-button {
  background-color: #4B9CD3;
  border: 0.5px solid #0805c1;
  border-radius: 5px;
  padding: 1px 50px;
  color: white;
  font-size: 14px; 
  font-family: Arial, sans-serif;
}

.share-thought {
  display: flex;
  align-items: center;
  margin-top: 10px;
  position: relative; /* Add relative positioning to the container */
}


.index-post-circle-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  margin-top: 10px;
  padding: 0; /* Remove padding */
  margin-left: 20px; /* Adjust margin to overlap the input field */
  position: relative; /* Add relative positioning to the circle */
 
}

.s {
  margin-left: 30%;
    
  background-color: #E2EFFF;
  border-radius: 20px;
  width: 43%;
  /* Additional styling as needed */
}

#create-post-field {
  background-color: white;
  border: 0.5px solid black;
  border-radius: 20px;
  padding: 2px 150px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  margin: 0; /* Remove margin */
  position: relative; /* Add relative positioning to the input field */
  z-index: 1; /* Ensure the input field is below the circle */
}

#create-post-field::placeholder {
  color: bla; /* Set the color to white or any other desired color */
}

.feed-button::placeholder {
  color: white; /* Set the color to white or any other desired color */
}


.feed-button,
.thought-button {
  background-color: #4B9CD3;
  border: 0.5px solid #0805c1;
  cursor: pointer;
  color: white;
  border-radius: 5px;
  padding: 4px 50px; /* Adjust padding to control space between text and button width */
  margin-left: 20px;
  font-size: 14px; /* Adjust font size as needed */
  font-family: Arial, sans-serif; /* Add your desired font family */
}

.feed-and-search-button {
  display: flex;
  /* Vertically align items */
}

.feed-buttons {
  flex: 6; /* Allow buttons to grow and fill available space */
}



/* end of sidebar.html */

.circle-image {
  width: 80%;
  height: auto;
}

.intro-text-container {
  margin-left: 200px;
}


.signup-button,
.login-button {
  display: block;
  width: 400px;
  margin-top: 10px;
  padding: 1px;
  background-color: #4B9CD3;
  color: white;
  border: 0.5px solid #0805c1;
  border-radius: 5px;
  text-align: center;
  cursor: pointer;
  text-decoration: none; 
}

a {
  color: inherit; /* Inherit the color from the parent element */
  text-decoration: none; /* Remove underline */
}

/* Set a specific color for visited links (optional) */
a:visited {
  color: inherit; /* Inherit the color from the parent element */
}

/* Set a specific color for hover effect (optional) */
a:hover {
  color: #db3434; /* Change the color on hover */
}

.login-text-space {
  margin-top: 50px;
}

/* Style for the footer container */
footer {
  
  text-align: center;
}

/* Style for the footer buttons container */
.intro-footer-buttons {
  display: flex;
  flex-direction: row;
  align-items: center;
  
}

/* Style for individual footer buttons */
.intro-footer-button {
  padding: 1px 20px;
  margin: 0 20px;
  margin-left: 50px;
  margin-top: 150px;
  background-color: #4B9CD3;
  color: white;
  border: 0.5px solid #0805c1;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
}

/* Hover effect for footer buttons */
.intro-footer-button:hover {
  background-color: #4B9CD3;
  color: #fff;
}

/* Mobile styles */
@media (max-width: 768px) {
  .intro-container {
    flex-direction: column;
    margin-top: 50px;
  }

  .circle-container {
    width: 200px;
    height: 200px;
    margin-left: 0;
    margin-bottom: 20px;
    align-self: center;
  }

  .intro-text-container {
    margin-left: 0;
    text-align: center;
  }

  .signup-button,
  .login-button {
    width: 100%;
    margin-top: 10px;
  }

  .login-text-space {
    margin-top: 20px;
  }

  .intro-footer-buttons {
    margin-top: 80px;
    justify-content: center;
    display: flex;
  flex-direction: row;
  align-items:center
  
    
  }

  .intro-footer-button {
    padding: 1px 1px;
  margin: 0 5px;
  margin-left: 1px;
  margin-top: 20px;
  background-color: #4B9CD3;
  color: white;
  border: 0.5px solid #0805c1;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s, color 0.3s;
  }

  footer {
  
    text-align: center;
  }
}

/* post and sidebar css */

.container {
  display: flex;
}

#announcement-button{
  margin-top: -120px; z-index: 2000; position: fixed;margin-left: 150px;
}

#group-button{
  margin-top: -120px; z-index: 2000; position: fixed;margin-left: 130px;
}

/* design for post border */
.post-border-position {

}

.rounded-circle {
  margin-top: -20px;
}

.post {
  
  padding: 10px;
  margin-bottom: 20px;
 
  
}


/* css for left sidebar */
.left-sidebar-items {
  margin-top: 80px;
  position: fixed;
  top: 0;
  left: 40px; 
  width: 300px;
  height: calc(100vh - 80px); /* Adjusted height to include margin-top */
  border: 0.5px solid #0805c1;
  border: none;
  overflow-y: auto; /* Allow vertical scrolling */
  transition: left 0.3s ease;
  font-family: Arial, Helvetica, sans-serif;
  scrollbar-width: thin; /* "thin" for a subtle scrollbar, "none" to completely hide it */
  scrollbar-color: transparent transparent;
}

.left-sidebar-items::-webkit-scrollbar {
  width: 6px; /* Set the width of the scrollbar */
}

.left-sidebar-items::-webkit-scrollbar-thumb {
  background-color: transparent; /* Make the scrollbar thumb transparent */
}






.navbar-nav {
  padding: 10px;
}


.menu-link {
  cursor: pointer;
  margin-top: 280px;
  background-color: #4B9CD3;
  border: 0.5px solid #0805c1;
  cursor: pointer;
  color: white;
  border-radius: 5px;
  padding: 4px 50px; /* Adjust padding to control space between text and button width */
  margin-left: -95px;
  font-size: 14px; /* Adjust font size as needed */
  font-family: Arial, sans-serif;
}

/* Remove border and background from dropdown items */
.dropdown-item {
  border: none;
  background-color: transparent;
}

/* end of sidebar and post css */

/* External CSS file (e.g., styles.css) */
.create-group-form {
  width: 50%; /* Adjust the width as needed */
  margin: 10% auto; /* Center the form vertically and horizontally */
  padding: 20px;
  background-color: #f2f2f2;
  border: 1px solid #ccc;
  border-radius: 5px;
  color:black
}

/* Style the form elements (input fields, labels, etc.) */
.create-group-form input[type="text"],
.create-group-form textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/* Style the submit button */
.create-group-button {
  background-color: #4B9CD3;
  color: white;
  border: none;
  border-radius: 5px;
  padding: 10px 20px;
  cursor: pointer;
  font-size: 16px;
}

.create-group-button:hover {
  background-color: #357ABD; /* Change color on hover */
}


@media (max-width: 920px) {

  .index-container {
    position: fixed;
    display: flex;
    z-index: 1000;
    margin-top: 0px;
    align-items: center;
    margin-left: -25px; /* Adjust as needed */
    
  }
  
  
  #open-sidebar {
    position: relative;
    margin-top: 295%;
    background-color: #4B9CD3;
    border: 0.5px solid #0805c1;
    cursor: pointer;
    color: red;
    border-radius: 5px;
    padding: 1px 50px; /* Adjust padding to control space between text and button width */
    font-size: 14px; /* Adjust font size as needed */
    font-family: Arial, sans-serif; 
    margin-left: 0px;
  }
  
  #head-shot {
    z-index: 1000;
    background-color: white;
    position: fixed;
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 15%;
  }
  
  .profile-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-left: 20px;
    margin-top: -50px;
  }
  
  .button-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 100px;
  }
  
  .chatlogo-container {
    
    margin-left: -500px; /* Adjust as needed */
  }
  
  .index-circle-image {
    width: 80px;
    height: 80px;
    border: 0.5px solid #0805c1;
    border-radius: 50%;
    overflow: hidden;
  }
  
  
  
  .profile-button {
    display: none;
  }
  
  .share-thought {
    display: flex;
    z-index: 4000px;
    align-items: center;
    margin-top: -57px;
    position: absolute;
    margin-left: -575px;
     /* Add relative positioning to the container */
  }
  
  
  
  .index-post-circle-image {
    visibility: hidden; /* Ensure the circle is above the input field */
  }
  
  #create-post-field {
    background-color: #4B9CD3;
    border: 0.5px solid #0805c1;
    border-radius: 10px;
    ;
    font-size: 12px;
    font-family: Arial, sans-serif;
    margin: 0; /* Remove margin */
    position: relative; /* Add relative positioning to the input field */
    z-index: 1; /* Ensure the input field is below the circle */
  }
  
  #create-post-field::placeholder {
    color: white; /* Set the color to white or any other desired color */
  }
  
  .feed-button::placeholder {
    color: white; /* Set the color to white or any other desired color */
  }
  
  
  .feed-button,
  .search-button {
    visibility: hidden;
  }
  .thought-button {
    background-color: #a60626;
    border: 0.5px solid #0805c1;
    cursor: pointer;
    color: white;
    border-radius: 5px;
    padding: 4px 50px; /* Adjust padding to control space between text and button width */
    margin-left: 20px;
    font-size: 14px; /* Adjust font size as needed */
    font-family: Arial, sans-serif; /* Add your desired font family */
  }
  
  .feed-and-search-button {
    display: flex;
    /* Vertically align items */
  }
  
  .feed-buttons {
    flex: 6; /* Allow buttons to grow and fill available space */
  }
  
  .search-form {
    flex: 2; /* Allow search input to grow and fill more space */
    
  }

  .container {
    display: flex;
  }
  
  
  .content {
    flex: 1;
    
    padding: 10px;
    box-sizing: border-box;
    margin-left: 0px;
    width: 100%;
  }
  
  .post {
    
    padding: 0px;
    margin-bottom: 0px;
   
    
  }
  
  /* New styles for sliding sidebar */

#category-border {
  margin-top: 1px;
   margin-right: 80px;
   margin-left: 0;
    z-index: 2000;
     position: absolute; background-color: white;
}
  
#library-border {
  margin-top: 1px;
   margin-right: 80px;
   margin-left: 0;
    z-index: 2000;
     position: absolute; background-color: white;
} 

 #announcement-button {
  margin-top: -10px; z-index: 2000; position: fixed;margin-left: 50px;
 }

 #group-button {
  margin-top: -20px; z-index: 2000; position: fixed;margin-left: 50px;
 }

 #shareGroup {
  margin-top: 20px;
 }

  .menu-link {
    display: none;
  }
  
  /* Remove border and background from dropdown items */
  .dropdown-item {
    border: none;
    background-color: transparent;
  }
  
  /* end of sidebar and post css */
  
  /* External CSS file (e.g., styles.css) */
  .create-group-form {
    width: 80%; /* Adjust the width as needed */
    margin: 10% auto; /* Center the form vertically and horizontally */
    padding: 20px;
    background-color: #f2f2f2;
    border: 1px solid #ccc;
    border-radius: 5px;
    color:black
  }
  
  /* Style the form elements (input fields, labels, etc.) */
  .create-group-form input[type="text"],
  .create-group-form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
  }
  
  /* Style the submit button */
  .create-group-button {
    background-color: #4B9CD3;
    color: white;
    border: none;
    border-radius: 5px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 16px;
  }
  
  .create-group-button:hover {
    background-color: #357ABD; /* Change color on hover */
  }
  
  .profile-info {
    background-color: red;
  }
  
  .general-border {
    margin-top: 10px; 
    z-index: 2000; 
    position: absolute; 
    margin-left: -4%;
    height: 180%;
    width: 90%;
  }

  .rotated-text {
    transform: rotate(270deg);
    background-color: white;
      color: #333;
      position: fixed;
      top: 50%;
      right: -40px;
      background-color:black;
      color: white;
      font-family:Arial, Helvetica, sans-serif;
      cursor: pointer;
      font-size: larger;
      z-index: 10000;
      
  }

  .rounded-circle {
    margin-top: -30px;
  }

  .card-text {
    margin-top: -50px;
  }

  .cat-text {
    margin-top: -20px;
  }
  
}


/* ========================= */
/*   MOBILE RESPONSIVE FIXES */
/* ========================= */

/* General reset for mobile */
@media screen and (max-width: 768px) {

  body {
    padding: 0 10px;
  }

  /* Top page bar */
  .top-page {
    width: 100%;
    border-radius: 0;
  }

  #index-suqlogo {
    width: 35px;
  }

  /* Posts should take full width */
  .post-card,
  .profile-posts-margin,
  .createpost-margin,
  .profile-createpost-margin,
  .post-cards {
    width: 100% !important;
    margin: 10px auto !important;
  }

  /* General containers */
  .general-border,
  #library-border,
  #category-border {
    margin: 0 !important;
    width: 100% !important;
    position: relative;
    top: auto;
    left: auto;
    height: auto;
  }

  /* Profile & user details */
  .image-profile {
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
  }

  .user-details {
    margin-left: 0;
    text-align: center;
  }

  #editBioBtn {
    margin: 10px auto;
    display: block;
  }

  /* Sidebar containers */
  .sidebar-container {
    display: none; /* hide sidebars for mobile, or make collapsible later */
  }

  /* Search form */
  .search-form input[type="text"] {
    width: 100%;
  }

  /* Media upload adjustments */
  .library-upload {
    flex-direction: column;
    text-align: center;
  }

  video {
    width: 100% !important;
    height: auto !important;
  }

  /* Footer buttons */
  .intro-footer-buttons {
    flex-direction: column;
    gap: 10px;
  }

  .intro-footer-button {
    width: 100%;
    margin: 10px 0;
  }

  /* Sidebar styles */
.sidebar-container {
  position: fixed;
  top: 0;
  bottom: 0;
  width: 250px;
  background: #fff;
  z-index: 1050;
  overflow-y: auto;
  transition: transform 0.3s ease;
}

/* Left sidebar */
#leftSidebar {
  left: 0;
  transform: translateX(-100%);
}
#leftSidebar.open {
  transform: translateX(0);
}

/* Right sidebar */
#rightSidebar {
  right: 0;
  transform: translateX(100%);
}
#rightSidebar.open {
  transform: translateX(0);
}

/* Hide sidebars on desktop */
@media (min-width: 768px) {
  #leftSidebar,
  #rightSidebar {
    position: static;
    transform: none !important;
    width: auto;
  }
}


  /* Side rotated texts (auctions, market, hub) */
  .rotated-text {
    display: none; /* hide on mobile for clean layout */
  }
}