.force-line-height * {
  line-height: 1.5 !important;
}
/* Wrapper keeps arrow + ad aligned */
.atmospire-ad-wrapper {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 11;
  display: flex;
  flex-direction: column;
  align-items: center;
  pointer-events: auto;
}



/* Ad image */
.atmospire-bottom-ad {
  width: 80vw;
  max-width: 300px;
  height: auto;
  border-radius: 6px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Hidden state */
.atmospire-ad-hidden .atmospire-bottom-ad {
  transform: translateY(120%);
  opacity: 0;
  pointer-events: none;
}

/* Keep arrow visible when hidden */
.atmospire-ad-hidden {
  bottom: 6px;
}

.atmospire-ad-toggle {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 62px; /* default position (above ad) */

  width: 32px;
  height: 26px;
  border-radius: 10%;
  border: none;
  background: white;
  color: black;
  font-size: 18px;
  cursor: pointer;
  z-index: 12;
  padding:5px;
  transition: bottom 0.35s ease;
}

/* When ad is hidden → slide arrow DOWN */
.atmospire-ad-toggle.atmospire-arrow-down {
  bottom: 5px;
}


#reportResultModal .post-options-message p {
  font-size: 1.1rem;
  padding: 20px;
  text-align: center;
}
#atmospire-ad-wrapper {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 900;

  display: flex;
  flex-direction: column;
  align-items: center;

  background: transparent;
}


body {
  overflow-x: hidden;
}

.jodit-align-left {
  text-align: left !important;
}

.image-wrapper {
  width: 100%;
  /* or a fixed width like 300px */
  position: relative;
}

.post_container .container {
  position: relative;
  text-align: center;
  width: 100%;
  margin: 0 0;
  padding: 0;
  max-width: 100%;
}

#column2 .footer {
  bottom: 4px;
}

#column1 .footer {
  bottom: 1px;
}

.image-placeholder {
  width: 100%;
  aspect-ratio: 3 / 1.7;
  /* height = 2/3 of width */
  background: linear-gradient(100deg,
      gray 30%,
      #d3d3d3 40%,
      gray 50%);
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
  border-radius: 6px;
  /* optional: rounded corners */
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }

  100% {
    background-position: 200% 0;
  }
}

#column2 .container {
  padding-bottom: 8px;
}

.desk-close {
  font-size: 40px;
  position: absolute;
  right: 6px;
  cursor: pointer;
  top: 6px;
}

.mob-close {
  font-size: 40px;
  position: absolute;
  right: -6px;
  cursor: pointer;
  top: -5px;
}


.textarea-container {
  display: flex;
  /* Flexbox to align items horizontally */
  align-items: center;
  /* Vertically center the textarea and the image */
  justify-content: center;
  /* Horizontally center the image relative to the textarea */
  position: relative;
  /* Needed for positioning the image */
}

.maintablink.active-tab {
  border-bottom: solid medium #3DDC84;
}

#textInput {
  width: 92%;
  margin: 3px;
  resize: none;
  /* Disable the resize handle */
  overflow: hidden;
  /* Hide the scrollbar */
  padding: 5px 10px;
  /* Add padding */
  font-size: 16px;
  /* Increase the font size */
  line-height: 1.5;
  /* Optional: Adjust line spacing for readability */
  border-radius: 5px;
  /* Optional: rounded corners */
  box-sizing: border-box;
  /* Ensure padding is included in width */
  font-family: "Chakra Petch", sans-serif;
}

#nav {
  position: sticky;
  top: -1px;
  z-index: 100;
  background-color: rgba(255, 255, 255, 0.5);
  transition: top 0.3s ease-in-out;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* Fade-out state */
.hide {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* Modal overlay */
.duplicate-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 888;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Modal overlay */
.justPosted-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 444;
  display: flex;
  align-items: center;
  justify-content: center;
}



/* Modal content */
.duplicate-modal-content {
  background: #fff;
  max-width: 555px;
  width: 100%;
  padding: 5px 0 0 0;
  border-radius: 8px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
  position: relative;
}

/* Optional: Close button */
.duplicate-modal-close {
  position: absolute;
  top: 0px;
  right: 4px;
  font-size: 30px;
  font-weight: bold;
  color: #444;
  cursor: pointer;
  background: none;
  border: none;
}

#column1 {
  z-index: 10;
}

/* Waves container styling */
.waves {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 15vh;
  z-index: 0;
}

.wave-container {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  /* depends on your wave size */
  z-index: -1;
  background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
}


/* Parallax effect for the waves */
.parallax>use {
  animation: move-forever 25s cubic-bezier(.55, .5, .45, .5) infinite;
  will-change: transform;
}

.parallax>use:nth-child(1) {
  animation-delay: -2s;
  animation-duration: 7s;
}

.parallax>use:nth-child(2) {
  animation-delay: -3s;
  animation-duration: 10s;
}

.parallax>use:nth-child(3) {
  animation-delay: -4s;
  animation-duration: 13s;
}

.parallax>use:nth-child(4) {
  animation-delay: -5s;
  animation-duration: 20s;
}

@keyframes move-forever {
  0% {
    transform: translate3d(-90px, 0, 0);
  }

  100% {
    transform: translate3d(85px, 0, 0);
  }
}

#column2 .bottom-left,
#column2 .bottom-right {
  bottom: 13px;
}


/* Style for the active tab */
.tablink.active {
  border-bottom: 3px solid #3DDC84;

}

.maintablink.active {
  border-bottom: 3px solid #3DDC84;

}

.edit-icon {
  background-color: green;
  /* Green background */
  color: white;
  /* Emoji color */
  padding: 5px;
  /* Padding around the emoji */
  display: inline-block;
  /* Make it inline-block */
  transition: background-color 0.3s, transform 0.3s;
  /* Smooth transition for background and scale */
}

/* Apply transition to all relevant elements */
.link,
.bottom-left,
.bottom-right,
#options {
  display: inline-block;
  /* Ensures proper scaling */
  transition: transform 0.3s ease, background-color 0.3s ease;
  transform-origin: center;
  /* Make sure the scaling happens from the center */
}

/* Hover effects for each of the elements */
.bottom-left:hover,
.bottom-right:hover,
#options:hover {
  transform: scale(1.1);
  /* Apply scaling */
}

/* Hover effects for each of the elements */
.link:hover {
  background-color: lightgreen;
}

button {
  transition: opacity 0.3s ease;
}

button:hover {
  opacity: 0.7;
  /* Adjust opacity level */
}

#logo {
  transition: filter 0.3s ease, transform 0.3s ease;
}

#logo:hover {
  transform: scale(1.1);
}

#messages,
#notifications-icon {
  transition: filter 0.3s ease, transform 0.3s ease;
}

#messages:hover,
#notifications-icon:hover {
  filter: drop-shadow(0 0 8px green);
  transform: scale(1.2);
}

#login-icon {
  transition: filter 0.3s ease, transform 0.3s ease;
}

#login-icon:hover {
  filter: drop-shadow(0 0 8px green);
  transform: scale(1.1);
  filter: brightness(1.2);
}

#followers,
#following {
  background-color: transparent;
  margin: 0;
  color: white;
}

#followers:hover,
#following:hover {
  text-decoration: underline;
  cursor: pointer;
}

.footer span {
  display: inline-block;
  /* needed for transform */
  transition: transform 0.2s ease-in-out;
}

.footer span:hover {
  transform: scale(1.08);
}

.abvri {
  display: block;
  width: max-content;
  transition: all 0.3s ease;
  margin: 0 auto 22px auto;
}

.abvri:hover {
  transform: scale(1.05);
  /* Slightly increase size */
}

/* save sutra */
.custom-menu {
  display: none;
  position: absolute;
  background-color: white;
  border: 1px solid #ccc;
  box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.2);
  z-index: 1000;
}

.custom-menu button {
  padding: 8px 12px;
  display: block;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  cursor: pointer;
}

.custom-menu button:hover {
  background-color: #f0f0f0;
}

.unread-conversation {
  background-color: lightgreen !important;
}

.read-conversation {
  background-color: #f9f9f9 !important;
}

.has-unread {
  background-color: gray;
}

.transparent-bg {
  background-color: transparent;
}


#explore {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 10px;
}

.explore {
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 5px;
  margin: 0 5px;
}

.contexts {
  display: flex;
  color: #4CAF50;
  font-weight: bold;
  cursor: pointer;
  /* Make the context clickable */
}

/* Desktop styles */
@media (min-width: 601px) {
  .dropdown-container {
    display: flex;
    gap: 10px;
  }
}

#minus-blur,
#add-blur {
  position: absolute;
  top: 45%;
  transform: translateY(-50%);
  background-color: gray;
  color: white;
  border-radius: 15px;
  opacity: 70%;
  font-size: 18px;
  cursor: pointer;
  /* Ensure this is not overridden */
  z-index: 633;
}

.error {
  color: red;
}

#minus-blur:hover,
#add-blur:hover {
  opacity: 90%;
}

h2 {
  font-size: 15px;
}

#minus-blur {
  left: 4px;
}

#add-blur {
  right: 4px;
}

.contact-form {
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  text-align: left;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea,
.contact-form button {
  width: 100%;
  margin: 5px 0 10px 0;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
  font-family: "Chakra Petch", sans-serif;
}

.contact-form textarea {
  height: 150px;
}

.contact-form button {
  background-color: #4CAF50;
  color: #fff;
  cursor: pointer;
  font-size: 18px;
  border: none;
}

.contact-form button:hover {
  background-color: #45a049;
}

#TwoFA_modal {
  z-index: 800;
}

.recovery_popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  text-align: center;
  width: 96%;
  max-width: 400px;
}

.notice {
  margin: 10px auto 0 auto;
}


#duplicateMessage {
  font-size: 16px;
  /* Set a readable font size */
  color: #333;
  /* Dark grey color for readability */
  padding: 10px;
  /* Add padding for spacing inside the element */
  margin: 10;
  /* Remove default margin */
  border: 1px solid #ddd;
  /* Light grey border for a subtle separation */
  border-radius: 8px;
  /* Rounded corners for a softer look */
  background-color: #f9f9f9;
  /* Light background color for contrast */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  /* Subtle shadow for depth */
  text-align: center;
  /* Center-align text */
  line-height: 1.5;
  /* Improve readability with line height */
}

.output {
  width: 15%;
  float: left;
  text-align: center;
  padding: 0;
  margin-top: 5px;
}

#stopWords {
  width: 40%;
  float: left;
  padding: 0;
}

#include_abvri {
  width: calc(30% - 6px);
  float: left;
  padding: 0;
}

.text-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 10px auto 0;
  /* Adjust margins to your needs */
}

.output-container {
  padding-left: 6px;
}

#charCount {
  font-size: 14px;
  color: #666;
}

.tick-mark {
  margin-top: 20px;
  color: green;
  /* Change color as needed */
  font-size: 18px;
  /* Adjust size as needed */
}

#change_cover {
  padding: 4px 10px;
}

/* The Modal (background) */
#showPostOptions {
  position: fixed;
  z-index: 700;
  padding-top: 200px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  /* Full height */
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.postOptionsButton {
  margin: 3px auto;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  color: white;
  font-size: 16px;
  cursor: pointer;
  text-align: center;
  width: 180px;
  box-sizing: border-box;
  background-color: #3DDC84;
}

.post-options-content {
  background-color: #fefefe;
  margin: auto;
  padding: 5px;
  border: 1px solid #888;
  max-width: 200px;
  position: relative;
}

.post-options-content {
  background-color: #fefefe;
  margin: auto;
  padding: 5px;
  border: 1px solid #888;
  max-width: 200px;
  position: relative;
}

.closePostOptions,
.closeDP {
  color: #aaa;
  font-size: 40px;
  font-weight: bold;
  display: inline;
  position: absolute;
  padding: 3px;
  top: -10px;
  right: -10px;
  background: none;
  border: none;
  cursor: pointer;
  color: red;
  background-color: white;
  border-radius: 25%;
  z-index: 710;
  margin: 0;
}

.btn-primary {
  background-color: #007bff;
  color: white;
}

.btn-primary:hover {
  background-color: #0056b3;
}

.btn-default {
  background-color: #6c757d;
  color: white;
}

.btn-default:hover {
  background-color: #5a6268;
}

.btn-danger {
  background-color: #dc3545;
  color: white;
}

.btn-danger:hover {
  background-color: #bd2130;
}


#no-results {
  max-width: 300px;
  display: block;
  font-size: 1.5em;
  /* Slightly larger text for emphasis */
  color: #888;
  /* Soft gray color for a subtle appearance */
  text-align: center;
  /* Center-align the text */
  margin: 40px auto;
  /* Space above and below the message */
  padding: 20px;
  /* Add padding for better spacing */
  background-color: #f9f9f9;
  /* Light background to make the text stand out */
  border: 1px solid #ddd;
  /* Light border for a subtle outline */
  border-radius: 8px;
  /* Rounded corners for a smooth look */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Soft shadow for depth */
}



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

#button-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* Ensure buttons stretch to full width */
  gap: 10px;
  /* Adjust the space between buttons */
}


.button-report {
  background-color: #FF5733;
  /* Reddish color */
}

.savebutton- {
  background-color: #3DDC84;
  /* Greenish color */
}

.button-feature {
  background-color: #3357FF;
  /* Bluish color */
}

#memberStatus {
  position: relative;
  padding: 11px;
  margin: auto 5px auto 0px;
  color: white;
  max-width: 100%;
  border-radius: 4px;
  font-weight: bold;
  overflow: hidden;
  /* to contain the pseudo-elements */
  text-align: center;
}

.btn-arrow-right,
.btn-arrow-left {
  position: relative;
  padding-left: 18px;
  padding-right: 18px;
}

.btn-arrow-right {
  padding-left: 36px;
}

.btn-arrow-left {
  padding-right: 36px;
}

.btn-arrow-right:before,
.btn-arrow-right:after,
.btn-arrow-left:before,
.btn-arrow-left:after {
  /* make two squares (before and after), looking similar to the button */
  content: "";
  position: absolute;
  top: 0;
  width: 40px;
  height: 40px;
  background: inherit;
  /* use parent background */
  border: inherit;
  /* use parent border */
  border-left-color: transparent;
  /* hide left border */
  border-bottom-color: transparent;
  /* hide bottom border */
  border-radius: 0px 4px 0px 0px;
  /* round arrow corner, the shorthand property doesn't accept "inherit" so it is set to 4px */
  -webkit-border-radius: 0px 4px 0px 0px;
  -moz-border-radius: 0px 4px 0px 0px;
}

.btn-arrow-right:before,
.btn-arrow-right:after {
  transform: rotate(45deg);
  /* rotate right arrow squares 45 deg to point right */
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
}

.btn-arrow-left:before,
.btn-arrow-left:after {
  transform: rotate(225deg);
  /* rotate left arrow squares 225 deg to point left */
  -webkit-transform: rotate(225deg);
  -moz-transform: rotate(225deg);
  -o-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
}

.btn-arrow-right:before,
.btn-arrow-left:before {
  /* align the "before" square to the left */
  left: -11px;
}

.btn-arrow-right:after,
.btn-arrow-left:after {
  /* align the "after" square to the right */
  right: -11px;
}

.btn-arrow-right:after,
.btn-arrow-left:before {
  /* bring arrow pointers to front */
  z-index: 10;
}

.btn-arrow-right:before,
.btn-arrow-left:after {
  /* hide arrow tails background */
  background-color: white;
}




.profile_icon {
  border-radius: 25px;
}






#profile_defaultOpen {
  border-bottom: medium solid rgb(61, 220, 132);
}

.row {
  width: 100%;
}

.collapsible {
  background-color: #04AA6D;
  color: white;
  cursor: pointer;
  padding: 13px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.collapsible:hover {
  background-color: #349932;
  opacity: 1;
}

.collapsible::after {
  content: 'Show Profile';
  color: white;
  font-weight: bold;
  float: right;
}

.collapsible.active::after {
  content: 'Hide Profile';
  /* Unicode minus sign */
}


.content {
  padding: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

#customFileLabel {
  display: inline-block;
  padding: 8px 15px;
  background-color: darkgreen;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  margin: 10px auto;
}

#customFileLabel:hover {
  background-color: lightgreen;
}


/* --- Shake Animation --- */
@keyframes shake {
  0% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-10px);
  }

  40% {
    transform: translateX(10px);
  }

  60% {
    transform: translateX(-10px);
  }

  80% {
    transform: translateX(10px);
  }

  100% {
    transform: translateX(0);
  }
}

.shake {
  animation: shake 0.5s;
  /* Adjust duration as needed */
}

#username_availability {
  margin: auto;
}

/* The Close Button */
.closeLink {
  color: #aaaaaa;
  float: right;
  font-size: 40px;
  font-weight: bold;
}

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

.showLinkModal {
  min-width: 333px;
  max-width: 95%;
  overflow: hidden;
  position: fixed;
  z-index: 888;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: lightskyblue;
}

.post_modal {
  /* Hidden by default */
  position: fixed;
  /* Stay in place */
  z-index: 622;
  padding-top: 33.33vh;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: rgb(0, 0, 0);
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}

.post_container {
  background-color: #ffffff;
  margin: 5px auto;
  width: 98%;
  max-width: 600px;
  border: 2px solid #4a90e2;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  font-family: "Arial", sans-serif;
  position: relative;
}

#likes-modal .comments-content {
  max-width: 444px;
}

/* Basic reset for anchor elements */
#showLink a {
  text-decoration: none;
  /* Remove underline */
  color: inherit;
  /* Inherit text color */
}


/* Styled anchor to look like a button */
.openLink {
  display: inline-block;
  /* Display as inline block to allow padding */
  padding: 8px 8px;
  /* Add padding to make it look like a button */
  margin: 20px;
  font-size: 16px;
  /* Adjust font size */
  font-weight: bold;
  /* Make text bold */
  color: #fff;
  /* Button text color */
  background-color: #007BFF;
  /* Button background color */
  border: 1px solid #007BFF;
  /* Border color matching the background */
  border-radius: 5px;
  /* Rounded corners */
  text-align: center;
  /* Center text */
  cursor: pointer;
  /* Pointer cursor on hover */
  transition: background-color 0.3s ease, border-color 0.3s ease;
  /* Smooth transition on hover */
}

/* Hover effect */
#openLink:hover {
  background-color: #0056b3;
  /* Darker background on hover */
  border-color: #0056b3;
  /* Darker border on hover */
}

#linkInput {
  width: 94%;
}

.full_textbox {
  margin: 10px;
  font-size: 16px;
  padding: 10px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  font-family: "Chakra Petch", sans-serif;
  overflow-y: hidden;
  /* Hide vertical scrollbar */
}

.fullTextbox {
  margin: 5px;
  font-size: 16px;
  padding: 8px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  font-family: "Chakra Petch", sans-serif;
  overflow-y: hidden;
  width: 96%;
}

#add_link {
  display: block;
  position: fixed;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 790;
  text-align: center;
  min-width: 375px;
  max-width: 400px;
}


.modal {
  position: fixed;
  /* Stay in place */
  z-index: 780;
  left: 0;
  top: 0px;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0, 0, 0);
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
}



#profile_menu {
  z-index: 210;
}

/* Modal Content */
.modal-content {
  background-color: #fefefe;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 585px;
  border: 1px solid #888;
  position: relative;
}

/* Modal Content */
.modal-content-500 {
  background-color: #fefefe;
  margin: 10px auto;
  max-width: 500px;
  border: 1px solid #888;
  padding-top: 10px;
}

/* Modal Content */
.modal-content-400 {
  background-color: #fefefe;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 400px;
  border: 1px solid #888;
  position: relative;
  z-index: 811;
}


/* The Close Button */
.close {
  right: 8px;
  font-size: 35px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  z-index: 10;
  top: 5px;
}

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

#inputImage {
  width: 90px;
  margin: 5px auto;
  padding: 4px;
  font-size: 16px;
  cursor: pointer;
}

.save {
  background-color: #3DDC84;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  border-radius: 6px;
  margin-top: 10px;
}

.cropButton {
  background-color: #3DDC84;
  padding: 10px;
  margin-bottom: 10px;
  font-size: 16px;
  font-weight: bold;
  color: white;
  cursor: pointer;
  border-radius: 6px;
}

.thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Ensures the image covers the container */
  margin: auto;
  border-radius: 15px;
  box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.4);
  transition: box-shadow 0.3s ease;
}

.thumbnail:hover {
  box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.5);
}

/* notification slider */
.notification_nav {
  height: 94vh;
  width: 380px;
  position: fixed;
  z-index: 600;
  top: 0;
  right: 0;
  background-image: radial-gradient(circle farthest-corner at 3.7% 49.8%, rgba(143, 232, 255, 1) 21.9%, rgba(209, 243, 251, 1) 52.9%);

  background-size: cover;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
}

.notification_nav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;

}

.notification_nav a:hover {
  color: red;
}

.notification_nav .closebtn {
  position: absolute;
  top: 10px;
  left: -40px;
  font-size: 36px;
  margin-left: 50px;
  cursor: pointer;
}

.notification_label {
  position: absolute;
  top: 20px;
  right: 120px;
  font-size: 22px;
  margin-left: 50px;
  color: #3DDC84;
}

#notificationsContainer {
  display: flex;
  justify-content: space-between;
  /* Distribute space between items */
  flex-wrap: wrap;
  /* Allow items to wrap if needed */
  gap: 5px;
  /* Space between items */
  width: 100%;
  /* Ensure it takes the full width */
  box-sizing: border-box;
  /* Include padding and border in width */
}

#likes-notifications,
#comments-notifications,
#follows-notifications {
  flex: 1 1 28%;
  /* Flex-grow, flex-shrink, flex-basis */
  max-width: 30%;
  /* Ensure width does not exceed container */
  cursor: pointer;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  /* Optional padding */
  border: 1px solid #ddd;
  /* Optional border for visibility */
}


.notification {
  display: flex;
  align-items: center;
  margin: 5px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  cursor: pointer;
}



.notification-content {
  font-size: 16px;
  text-align: left;
  color: #3DDC84;
}

.notification:hover,
.conversation:hover {
  background-color: lightblue !important;
}

.notification-link {
  text-decoration: none;
  color: #000;
}

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


.explore_label {
  position: absolute;
  top: 10px;
  left: 60px;
  font-size: 22px;
  margin-left: 50px;
  color: #3DDC84;
}

.explore_nav {
  height: 100%;
  width: 300px;
  position: fixed;
  z-index: 650;
  top: 0;
  left: 0;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 60px;
  padding-bottom: 60px;

  background-image: radial-gradient(circle farthest-corner at 3.7% 49.8%, rgba(143, 232, 255, 1) 21.9%, rgba(209, 243, 251, 1) 52.9%);

  background-size: cover;
}



.explore_nav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.5s;
}

.explore_nav a:hover {
  color: #f1f1f1;
}

.explore_nav .closebtn {
  position: absolute;
  top: 0;
  right: 7px;
  font-size: 36px;
  margin-left: 50px;
  cursor: pointer;
}

@media screen and (max-height: 450px) {

  .messages_nav,
  .notification_nav {
    padding-top: 15px;
  }

  .messages_nav,
  .notification_nav a {
    font-size: 18px;
  }

}


#login-icon,
#notifications-icon {
  position: absolute;
  /* Removes it from the normal document flow */
  display: block;
  /* Hides the element initially */
  right: 15px;
  /* Position it to the right edge of the container */
  top: 15px;
  /* Position it below the top edge of the container */
  padding: 5px;
  cursor: pointer;
  float: right;
}

.notification-count {
  position: absolute;
  top: 10px;
  right: 10px;
  background-color: red;
  color: white;
  border-radius: 50%;
  padding: 1px 2px;
  font-size: 10px;
  min-width: 20px;
  text-align: center;
  height: 20px;
  line-height: 20px;
  cursor: pointer;
}

#notification img {
  margin: auto;
}

#messages {
  width: 32px;
  height: 32px;
  vertical-align: middle;
  float: left;
  margin: 15px 10px;
  background-color: transparent;
  cursor: pointer;
}

#scrollKey {
  position: absolute;
  top: -150px;
}


/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

#bio-container {
  text-align: center;
  margin: 10px auto;
}

#bio {
  display: inline-block;
  padding: 5px;
  cursor: pointer;
}

#thoughts-container {
  position: relative;
  display: block;
  background-color: gray;
  margin-bottom: 10px;
  min-height: 200px;
}

#thoughts {
  padding: 10px;

}

.edit-icon {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  /* Adjust the size as needed */
  color: white;
  /* Adjust the color as needed */
  transform: scaleX(-1);
  /* Flip the icon horizontally */
}


#thoughts p {
  vertical-align: middle;
  text-align: justify;
  margin: 10px;

}

#about-container {
  position: relative;
  background-color: gray;
  min-height: 200px;
  margin-bottom: 10px;
}

#about {
  display: block;
  text-align: center;
  padding: 10px;
  margin: 8px;
}


#mobile_thoughts,
#mobile_about {
  display: none;
}

/*collapsible */
#cProfile {
  display: none;
  margin-bottom: 5px;
}

#draft_centered {
  width: 98%;
  display: block;
}


.category_popup {
  position: fixed;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #fff;
  padding: 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  z-index: 635;
  text-align: center;
  width: 96%;
  max-width: 400px;
}

.popup ul {
  list-style: none;
  padding: 0;

}

.popup ul li {
  margin: 10px 0;
}


.confirm,
.centered-buttons {
  text-align: center;
  justify-content: space-between;
  height: auto;
  background-color: white;
}

.centered-buttons li {
  width: 33%;
  font-size: 16px;
  cursor: pointer;
  float: left;
  text-decoration: none;
}

.confirm,
.centered-buttons button {
  width: 46.8%;
  max-width: 48%;
  margin: 8px auto;
  padding: 8px;
  font-size: 16px;
  background-color: red;
  color: white;
  cursor: pointer;
}

.theme-buttons {
  text-align: center;
}

.theme-buttons button {
  width: 290px;
  max-width: 48%;
  margin: 8px auto;
  padding: 6px;
  font-size: 16px;
  background-color: #3DDC84;
  color: white;
  border-radius: 15px;
  cursor: pointer;
}

#close-popup,
#closeDuplicatePopUP {
  background-color: red;
  padding: 8px;
  margin: 8px auto 4px;
  font-size: 15px;
  color: white;
  border-radius: 25%;
  border: none;
  /* Ensures no border is displayed */
  cursor: pointer;
  /* Changes the cursor to a pointer to indicate it's clickable */
  transition: background-color 0.3s;
  /* Smooth transition for background color */
}

#close-popup:hover,
#closeDuplicatePopUP:hover {
  background-color: darkred;
  /* Darker red on hover for visual feedback */
}

#overlay1 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 260;
  background: rgba(0, 0, 0, 0.5);
}

#overlay2 {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 265;
  background: rgba(0, 0, 0, 0.5);
}

#signUp_modal,
#login_modal {
  margin: 0 auto;
  background-color: #fff;
  padding: 0;
  max-width: 600px;

}

#login_modal {
  max-width: 400px;
}


.w3-animate-bottom {
  position: relative;
  animation: animatebottom 0.4s
}

@keyframes animatebottom {
  from {
    bottom: -300px;
    opacity: 0
  }

  to {
    bottom: 0;
    opacity: 1
  }
}

.w3-modal,
#create_post_modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  overflow: hidden;
}

.w3-modal {
  z-index: 222;
}

.w3-modal-content {
  max-width: 555px;
  margin: auto;
  background-color: white;
}

.update-title {
  max-width: 400px;
  margin: auto;
  background-color: white;
}

.update-title .fullTextbox {
  font-size: 14px;
}

@media (max-width: 768px) {

  #create_post_modal.keyboard-visible {
    position: fixed;
    top: auto;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 100vw;
    max-height: 100dvh;
    /* dynamic viewport height handles keyboard better */
  }

  #create_post_modal.move-to-top {
    position: fixed;
    top: 0;
    /* Moves the modal to the top */
    bottom: auto;
    /* Removes the bottom position */
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: 100vw;
    max-height: 100vh;
    /* Full height when the color picker is active */
  }

  .isMobile {
    position: relative;
    margin: 0 auto;
    width: 100vw;
    height: 100dvh;
    max-height: 777px;
    display: flex;
    flex-direction: column;
    background-color: #fefefe;
    overflow: hidden;
    /* dynamic viewport height handles keyboard better */
  }
}

#create_post_modal textarea {
  border-color: blue;
}

#create_post_modal,
#UpdateUI {
  z-index: 500;
}

.w3-teal,
.w3-hover-teal:hover {
  text-align: center;
  color: #fff !important;
  background-color: #3DDC84 !important;
  padding: 6px;
}

.w3-container,
.w3-panel {
  z-index: 10;
  ;
  background-color: white;
}

.w3-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.w3-display-topright {
  position: absolute;
  right: 0;
  top: 0
}

.w3-button {
  border: none;
  display: inline-block;
  padding: 8px 16px;
  vertical-align: middle;
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  background-color: inherit;
  text-align: center;
  cursor: pointer;
  white-space: nowrap
}

.w3-button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none
}

.w3-button:disabled {
  cursor: not-allowed;
  opacity: 0.3
}

.w3-disabled *,
:disabled * {
  pointer-events: none
}

.imageContainer {
  position: relative;
  text-align: center;
  color: white;
  width: 100%;
}

.imageContainer img {
  width: 100%;
  max-width: 600px;
  opacity: 55%;
}

/*Text Input*/
inputTextContainer {
  max-width: 600px;
}

.inputTextContainer input[type=text] {
  width: 90%;
  float: center;
  margin: 5px 0px 5px 5px;
  font-size: 16px;
  padding: 11px 11px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}

.logInTextContainer input[type=email],
.logInTextContainer input[type=text],
.logInTextContainer input[type=password] {
  width: 96%;
  float: left;
  margin: 10px;
  font-size: 16px;
  padding: 11px 11px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;

}

.logInTextContainer input[type=password] {
  width: 80%;
}

.signUpTextContainer input[type=text],
.signUpTextContainer input[type=password],
.signUpTextContainer input[type=email] {
  width: 46%;
  float: center;
  margin: 10px;
  font-size: 16px;
  padding: 11px 11px;
  box-sizing: border-box;
  border: 3px solid #ccc;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
}



#text-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Full viewport width */
}

.textArea {
  width: 95%;
  height: 250px;
  box-sizing: border-box;
  resize: none;
  padding: 10px;
  border: 1px solid #ccc;
  /* Optional: Border for the textarea */
  border-radius: 5px;
  /* Optional: Rounded corners */
  font-size: 16px;
  /* Optional: Font size for the textarea */
}

#suggestions {
  max-width: 46%;
  float: right;
  text-align: left;
  font-size: 16px;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  outline: none;
  width: calc(100% - 22px);
  cursor: pointer;
  overflow: hidden;
  /* Hide overflow content */

}

.logInTextContainer div {
  width: 96%;
  display: inline-flex;
}


.login-button:hover {
  background-color: green;
  /* Change to green on hover */
}

.switch-icon {
  font-size: 20px;
  /* Adjust icon size */
}

.on {
  color: limegreen;
}

.off {
  color: red;
}


.full_textbox,
.inputTextContainer input[type=text]:focus,
.signUpTextContainer input[type=text]:focus {
  border: 3px solid #555;
  padding: 10px;
}

.logInTextContainer input[type=email]:focus {
  border: 3px solid #555;
}

.logInTextContainer input[type=password]:focus {
  border: 3px solid #555;
}

.logInTextContainer input[type=text]:focus {
  border: 3px solid #555;
}

.signUpTextContainer input[type=text]:focus {
  border: 3px solid #555;
}

.label {
  margin: 0px;
  padding: 0px;
}



/*search */
form .button {
  display: inline-block;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  text-align: center;
  color: black;
  text-decoration: none;
  cursor: pointer;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

form .button:hover {
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  background-color: #f8f8ff;
}


/* Styles for the magnifying glass */
.mglass {
  display: inline-block;
  pointer-events: none;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transition: transform 0.3s ease;
}


.searchbutton {
  font-size: 33px;
  width: 65%;
  margin: 0;
  padding: 0;
}

.search-container {
  position: relative;
  display: inline-block;
  height: 50px;
  width: 50px;
  vertical-align: bottom;
}

.search:focus+.searchbutton {
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  background-color: white;
  color: black;
  display: none;
}


/* Initially hide the search results container */
#categories {
  display: block !important;
  /* Ensure it's visible */
}


.search {
  position: absolute;
  left: 45px;
  margin-top: 6px;
  /* Button width-1px (Not 50px/100% because that will sometimes show a 1px line between the search box and button) */
  background-color: white;
  outline: none;
  border: none;
  border-radius: 25px;
  padding: 0;
  width: 0;
  height: 80%;
  z-index: 30;
  transition-duration: 0.4s;
  -moz-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  font-size: 15px;
}

.expandright:focus {
  width: 300px;
  padding: 0 0 0 16px;
}


.expandright {
  left: -250px;
}


/* structure */
body {
  font: 95% / 140% helvetica, verdana, arial, sans-serif;
  margin: auto;
  height: 100%;
  min-width: 350px;
  text-align: center;
  background-color: white;
  justify-content: center;
  font-family: "Chakra Petch", sans-serif;
  font-weight: 400;
  font-style: normal;
  overflow-y: scroll;
}

#cornerButton {
  position: fixed;
  right: 10px;
  bottom: 15px;
  background-color: #3DDC84;
  padding: 7px;
  border-radius: 5px 5px 25px 5px;
  z-index: 110;
}

#id02 {
  z-index: 1001;
}

#menu {
  /* --- Original Styles --- */
  width: 94%;
  margin: auto;
  text-align: center;
  white-space: nowrap;
  position: -webkit-sticky;
  /* For older Safari */
  position: sticky;
  top: 0;
  z-index: 120;
  overflow: auto;
  margin-bottom: 4px;
  border-radius: 50px 50px 0 0;

  -webkit-backdrop-filter: blur(12px);
  /* Blur effect for Safari */
  backdrop-filter: blur(12px);
  /* The main blur effect */
  border: 1px solid rgba(255, 255, 255, 0.18);
  /* Adds a subtle edge to the "glass" */
}

div.scrollmenu button {
  display: inline-block;
  color: #3DDC84;
  text-align: center;
  padding: 10px;
  text-decoration: none;
  font-size: 0.82em;
  vertical-align: middle;
  background-color: transparent;

}

div.scrollmenu button:hover {
  background-color: #f8f8ff;
}

.scrollmenu>*:first-child {
  margin-left: 10px;
}

.column button {
  padding: 10px;
}

button {
  border: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.scrollmenu::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.scrollmenu {
  -ms-overflow-style: none;
  scrollbar-width: none;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/*posts Menu */
div.postsMenu {
  background-color: gray;
  overflow: auto;
  white-space: nowrap;
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  width: 100%;
}

#profile .postsMenu {
  margin-bottom: 4px;
}

div.postsMenu button {
  display: inline-block;
  background-color: gray;
  color: #3DDC84;
  text-align: center;
  padding: 13px 7px;
  text-decoration: none;
  font-size: 0.82em;
  vertical-align: middle;

}

div.postsMenu button:hover {
  background-color: #f8f8ff;
}

.column button {
  padding: 10px;
}

button {
  border: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.postsMenu::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.postsMenu {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

/*Profile Menu*/
/*posts Menu */
div.profileMenu {
  background-color: gray;
  overflow: auto;
  white-space: nowrap;
  /*position: -webkit-sticky;*/
  /*position: sticky; */
  /*top:3.5px;*/
  z-index: 25;

}

div.profileMenu button {
  display: inline-block;
  background-color: gray;
  color: #3DDC84;
  text-align: center;
  padding: 14.5px 8px;
  text-decoration: none;
  font-size: 0.82em;
  vertical-align: middle;

}

div.profileMenu button:hover {
  background-color: #f8f8ff;
}

.column button {
  padding: 10px;
}

button {
  border: none;
}

/* Hide scrollbar for Chrome, Safari and Opera */
.profileMenu::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
.profileMenu {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}





#header-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  /* Ensure iframe is behind the nav */
  pointer-events: none;
  /* Allow clicks to pass through the iframe */
}

#waves-iframe {
  position: fixed;
  /* Stay in place */
  top: 0;
  left: 0;
  width: 100vw;
  /* Full width */
  height: 100vh;
  /* Full height */
  z-index: -1;
  /* Behind everything */
  border: none;
  /* Remove any borders */
  pointer-events: none;
  /* Prevent interaction */
}


/* Parent container for the posts */
.tabcontent {
  display: flex;
  flex-wrap: wrap;
  column-gap: 8px;
  /* Gap between columns */
  margin: 0;
  /* Remove any default margin */
  padding: 0;
  /* Remove any default padding */
}



/* content */

#fullForm {
  padding: 1px 3px;
  line-height: 1.3;

}


#draft_fullForm,
#new_fullForm {
  padding: 0px 3px;
  line-height: 1.3;
}

.abvri12 {
  font-size: 2.5em;
}

.abvri10,
.abvri11 {
  font-size: 2.8em;
}

/* Styles for .abvri classes */
.abvri8,
.abvri9 {
  font-size: 3em;
}

.abvri7 {
  font-size: 3.5em;
}

.abvri6,
.abvri5 {
  font-size: 4em;
}

.abvri4,
.abvri3,
.abvri2 {
  font-size: 4.5em;
}

.fullForm9 {
  font-size: 1em;
}

.fullForm7,
.fullForm8 {
  font-size: 1.1em;
}

/* Styles for .fullForm classes */
.fullForm6,
.fullForm5 {
  font-size: 1.2em;
}

.fullForm4 {
  font-size: 1.5em;
}

.fullForm3 {
  font-size: 1.6em;
  max-width: 99%;
  line-height: 1.2;
}

.fullForm2 {
  max-width: 99%;
  font-size: 1.5em;
  white-space: nowrap;
}

.fullForm {
  padding: 0px 5px;
}

/* Styles for .abvri classes inside .message-content */
.message-content .abvri8,
.message-content .abvri9,
.message-content .abvri10 {
  font-size: 2.5em;
}

.message-content .abvri7 {
  font-size: 3em;
}

.message-content .abvri6,
.message-content .abvri5 {
  font-size: 3.5em;
}

.message-content .abvri4,
.message-content .abvri3,
.message-content .abvri2 {
  font-size: 4em;
}

.message-content .abvri3,
.message-content .abvri2 {
  padding-bottom: 5px;
  /* Common margin for .abvri3 and .abvri2 */
}

/* Styles for .fullForm classes inside .message-content */
.message-content .fullForm8,
.message-content .fullForm9,
.message-content .fullForm7,
.message-content .fullForm6,
.message-content .fullForm5 {
  font-size: 1em;
}

.message-content .fullForm4 {
  font-size: 1.5em;
}

.message-content .fullForm3 {
  font-size: 1.6em;
  max-width: 99%;
  line-height: 1.2;
}

.message-content .fullForm2 {
  max-width: 99%;
  font-size: 1.7em;
  white-space: nowrap;
}


.draftContainer {
  min-width: 98.5%;
}

#more-info {
  display: block;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-51%, -50%);
  z-index: 660;
  width: 90%;
  max-width: 500px;
  height: 90%;
  max-height: 700px;
  background-color: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  overflow: auto;
  /* Enables scrolling */
  -ms-overflow-style: none;
  /* Hide scrollbar in IE and Edge */
  scrollbar-width: none;
}

#more-info::-webkit-scrollbar {
  display: none;
  /* Hide scrollbar in WebKit browsers */
}


#logo {
  margin: auto;
  padding: 7px 35px 7px 0;
  display: inline-block;
}

@media only screen and (max-width: 813px) {


  .draftContainer .centered_without_abvri {
    top: 50%;
  }

  #memberStatus {
    margin: auto 5px auto 5px;

  }

  .container,
  .cover {
    position: relative;
    text-align: center;
    width: calc(100% - 10px);
    margin: 3px 4px;
    padding: 0;
    /* Remove any default padding */
  }

  #column1,
  #column2 {
    width: 100%;
  }

  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }

  .ppcontainer {
    position: relative;
    text-align: center;
    color: red;
    max-width: 99%;
    margin: 5px;

  }

  #column2 .container {
    position: relative;
    text-align: center;
    max-width: calc(100% - 10px);
    margin: 0 5px;
  }

  .draftContainer {
    position: relative;
    text-align: center;
    color: red;
    max-width: 100%;
  }

  #mobile_thoughts {
    display: block;
    justify-content: space-between;
    background-color: gray;
    margin-bottom: 10px;

  }

  #mobile_thoughts p {
    vertical-align: middle;
    text-align: justify;
    padding: 10px;

  }

  #mobile_about {
    display: block;
    height: 200px;
    background-color: gray;
    text-align: center;
    padding: 10px;
  }

  #mobile_about p {
    margin: 10px;
  }

  #cProfile {
    display: block;
  }

  /*posts Menu */
  div.postsMenu {
    background-color: gray;
    overflow: auto;
    white-space: nowrap;
    position: -webkit-sticky;
    position: sticky;
    top: 52px;
    z-index: 25;
    width: 100%;
  }

}

@media only screen and (max-width: 812px) and (orientation: landscape) {




  .abvri7 .abvri8,
  .abvri9 {
    font-size: 2.5em;
  }

  .abvri6 {
    font-size: 2.5em;
  }

  .abvri5 {
    font-size: 3em;
  }

  .abvri4 {
    font-size: 3.5em;
  }

  .abvri3 {
    font-size: 4em;
  }

  .abvri2 {
    font-size: 4em;
    padding-bottom: 5px;
  }


  /* Individual post container */
  .container {
    position: relative;
    text-align: center;
    margin: 4px;
    padding: 0;
  }


  /* Create two equal columns that floats next to each other */

  #column2 {
    float: left;
    width: 50%;
  }

  #thoughts,
  #about {
    display: block;
  }

  #mobile_thoughts,
  #mobile_about {
    display: none;
  }

  #cProfile {
    display: none;
  }

  .content {
    max-height: 100%;
  }

  .draftContainer {
    text-align: center;
    color: red;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    width: 99%;
  }

  #column2 .container {
    position: relative;
    text-align: center;
    margin-top: 2px;
    margin-left: 2px;
    margin-right: 2px;
    width: 100%;
    float: left;
  }

  .footer {
    font-size: 1em;
  }

}

#options {
  pointer-events: auto;
}


@media only screen and (min-width: 814px) {



  #root {
    max-width: 1200px;
    margin: auto;
    margin-bottom: 100px;
    padding: 0px 5px;
  }

  .row {
    display: flex;
    width: 100%;
  }

  #column1,
  #column2 {
    flex: 1;
    margin: 0;
  }

  #column1 {
    position: sticky;
    top: 120px;
    height: 800px;
  }

  .profile_posts {
    margin: 0;
    padding: 0;
  }


  .draftContainer {
    position: relative;
    text-align: center;
    color: red;
    max-width: 100%;
  }

  .cover {
    position: relative;
    text-align: center;
    width: calc(100% - 10px);
    margin-top: 4px;
    margin-right: 4px;
  }

  /* General tabcontent styles */
  .tabcontent {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(calc(50% - 10px), 1fr));
    margin: 0;
  }

  /* Specific styles for tabcontent with id profile */
  .tabcontent#profile {
    display: grid;
    column-gap: 0;
    /* Gap between items */
    grid-template-columns: unset;
    /* Reset the specific property */
  }

  .container {
    position: relative;
    text-align: center;
    margin: 4px 0px;
    /* Remove any default margin */
    padding: 0;
    /* Remove any default padding */
  }


  .content {
    max-height: 100%;
  }

  .ppcontainer {
    position: relative;
    text-align: center;
    color: red;
    width: 99%;
    margin-top: 5px;
    margin-left: 3px;
    margin-right: 3px;
    float: left;
  }

  #column2 .container {
    position: relative;
    text-align: center;
    width: calc(100% - 8px);
    margin: 0 0 0 4px;
    row-gap: 8px;
    float: right;
  }

  .footer {
    font-size: 1em;
  }

  /*posts Menu */
  div.postsMenu {
    background-color: gray;
    overflow: auto;
    white-space: nowrap;
    position: -webkit-sticky;
    position: sticky;
    top: 50px;
    width: 100%;
  }

}

.bottom-left {
  /* --- Original Positioning & Font Styles --- */
  position: absolute;
  bottom: 5px;
  left: 3px;
  color: white;
  padding: 3px 8px 3px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  /* Note: 'opacity' was removed to keep the text sharp */

  /* --- "Fiberglass" / Glassmorphism Effect --- */
  background-color: rgba(0, 100, 0, 0.4);
  /* Semi-transparent dark green */
  -webkit-backdrop-filter: blur(10px);
  /* Blur effect for Safari */
  backdrop-filter: blur(10px);
  /* The main blur effect */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Subtle light border for contrast */
}



#like,
#draft-like {
  display: inline-block;
}

.bottom-left:after,
#draft_bottom_left:after {
  background-color: lightgreen;
  box-shadow: none;
  transform: translateX(5px);

}

.top-left,
.draft_top_left {
  position: absolute;
  top: 4px;
  left: 4px;
}

.top-right,
.draft_top_right {
  position: absolute;
  top: 4px;
  right: 4px;
}

#post-options {
  align-items: left;
}

#stopWordsLabel {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  /* Space between the label and the output container */
}

#stopWordsLabel input[type="checkbox"] {
  margin-right: 5px;
  /* Space between the checkbox and the text */
}

#noOfPosts {
  background-color: darkgreen;
  position: absolute;
  right: 20px;
  top: 2px;
  opacity: 70%;
  padding: 0px 3px;
  min-width: 90px;
  color: white;
  font-size: 13px;
}

#date {

  padding: 1px 5px;
  color: white;
  text-wrap: nowrap;
  border-radius: 10px;
  font-size: 13px;
  /* Note: 'opacity' was removed to keep the text sharp */

  /* --- "Fiberglass" / Glassmorphism Effect --- */
  background-color: rgba(0, 100, 0, 0.45);
  /* Semi-transparent dark green */
  -webkit-backdrop-filter: blur(8px);
  /* Blur effect for Safari */
  backdrop-filter: blur(8px);
  /* The main blur effect */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Subtle light border for contrast */
}

.theme_button {
  background-color: darkgreen;
  position: absolute;
  right: 33px;
  top: 1px;
  opacity: 80%;
  padding: 4px 10px;
  color: white;
  border-radius: 25px;
  cursor: pointer;
}

.theme_button:hover {
  background-color: lightgreen;
}

#draft_date {
  background-color: red;
  position: absolute;
  right: 20px;
  top: 1px;
  opacity: 80%;
  padding: 1px 4px;
  color: white;
  border-radius: 10px;

}

#options,
#draft_options {
  background-color: darkgreen;
  padding: 2px;
  opacity: 50%;
  height: 22px;
  border-radius: 10px;

}

.flippable {
  cursor: pointer;
  transition: transform 0.5s;
}

.flipped {
  transform: scaleX(-1);
}

#options:hover,
#draft-options:hover {
  opacity: 100%;
}

.bottom-right {
  position: absolute;
  bottom: 5px;
  right: 3px;
  color: white;
  padding: 3px 8px 3px 10px;
  border-radius: 15px;
  cursor: pointer;
  font-size: 14px;
  background-color: rgba(0, 100, 0, 0.4);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);

  /* --- "Fiberglass" / Glassmorphism Effect --- */
  background-color: rgba(0, 100, 0, 0.4);
  /* Semi-transparent dark green */
  -webkit-backdrop-filter: blur(10px);
  /* Blur effect for Safari */
  backdrop-filter: blur(10px);
  /* The main blur effect */
  border: 1px solid rgba(255, 255, 255, 0.2);
  /* Subtle light border for contrast */

}

.draftContainer .bottom-right,
.draftContainer .bottom-left {
  bottom: 10px;
}

.draftContainer .centered_without_abvri {
  top: 42%;
}



.bottom-right.disapprovePost {
  position: absolute;
  bottom: 10px;
  right: 3px;
  background-color: red;
  background-color: red;
  color: white;
  border-radius: 15px;
  opacity: 70%;
  cursor: pointer;
  opacity: 70%;
  color: white;
  padding: 4px 10px;
}

.centered,
.draft-centered {
  position: absolute;
  min-width: 98%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto; 
}

.centered_without_abvri {
  position: absolute;
  min-width: 98%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}




#uploadImg {
  position: absolute;
  bottom: -2%;
  left: 48.5%;
  transform: translate(-50%, -50%);
  padding: 5px;
  margin: 5px;
  cursor: pointer;
  font-size: 15px;
  background-color: #3DDC84;
  color: white;
  border-radius: 10px 0px 10px 0px;
}

.footer,
#draft_footer {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 6px 12px;

  /* Darker fiberglass / frosted-glass effect */
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  color: white;
  font-size: 0.9em;
  text-wrap: nowrap;

  /* Keep text readable */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8);
  border-radius: 6px;
}


.showNotice {
  max-height: 380px;
  min-width: 350px;
  max-width: 85%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
}

.escalate {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 5px;
  cursor: pointer;
  font-size: 15px;
  background-color: red;
  color: white;
  border-radius: 10px 0px 10px 0px;
  opacity: 88%;
}

#draft_footer {
  display: none;
}

.more_info:hover {
  filter: hue-rotate(90deg) brightness(1.2);
  /* greenish tint */
  transition: filter 0.3s ease;
  cursor: pointer;
}

.link a,
.link {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 4px;
  font-size: 18px;
  cursor: pointer;
  background-color: darkgreen;
  border-radius: 10px 0px 10px 0px;
  text-decoration: none;
}

.context-container {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 80%;
}

.context {
  /* --- Original Styles --- */
  padding: 4px 5px 2px 5px;
  font-size: 14px;
  cursor: pointer;
  color: white;
  white-space: nowrap;

  /* --- "Fiberglass" / Glassmorphism Effect --- */
  background-color: rgba(255, 0, 0, 0.45);
  /* Semi-transparent red */
  -webkit-backdrop-filter: blur(10px);
  /* Blur effect for Safari */
  backdrop-filter: blur(10px);
  /* The main blur effect */
}

.context-container:hover {
  opacity: 1;
  /* Full opacity */
  transition: opacity 0.3s ease-in-out;
  /* Smooth transition */
}

.header {
  position: absolute;
  top: 19px;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1px;
  color: blue;
  border-style: double;
  opacity: 20%;
  font-size: 0.7em;
}

.dp {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  /* Make it round */
  cursor: pointer;
}

#username,
#draft_username,
#new_username_display {
  position: absolute;
  left: 35px;
  top: 5px;
  color: #3DDC84;

}

#comments,
#draft_comments {
  color: white;

}

#s,
#c {
  opacity: 80%;
}

#s:hover,
#c:hover {
  opacity: 100%;
}

#column1 .bottom-left,
#column1 .bottom-right {
  bottom: 10px;
}

@media only screen and (max-width: 600px) {
  .abvri {
    margin-bottom: 3.5vw;
  }

  .context {
    padding: 3px 4px 2px 5px;
    font-size: 11px;
  }

  .link a,
  .link {
    padding: 3px;
    font-size: 15px;
  }

  .closePostOptions {
    padding: 3px 5px 8px 6px;
    top: -15px;
    right: -15px;
  }

  .searchbutton {
    margin-top: 3px;
  }

  .search:focus {
    width: 218px;
    /* Bar width+1px */
    padding: 0 16px 0 0;
  }

  .expandright {
    left: -218px;
  }

  .expandright:focus {
    padding: 0 0 0 10px;
  }


  div.scrollmenu button {
    padding: 6px
  }

  .message-content .fullForm8,
  .message-content .fullForm9,
  .message-content .fullForm7,
  .message-content .fullForm6,
  .message-content .fullForm5 {
    font-size: 0.9em;
  }

  .dropdown-container {
    display: block;
    margin-bottom: 10px;
  }

  #messages {
    margin: 15px 10px;
  }

  .abvri10,
  .abvri11 {
    font-size: 2.4em;
  }

  .abvri9 {
    font-size: 2.6em;
  }

  .abvri8 {
    font-size: 2.7em;
  }

  .abvri6,
  .abvri7 {
    font-size: 2.8em;
  }


  .abvri4,
  .abvri5 {
    font-size: 3em;
  }

  .abvri3 {
    font-size: 4em;
  }

  .abvri2 {
    font-size: 4.2em;
    margin-bottom: 15px;
  }

  .fullForm9 {
    font-size: 1em;
  }

  .fullForm8 {
    font-size: 1.1em;
  }

  .fullForm7 {
    font-size: 1.2em;
  }

  .fullForm6 {
    font-size: 1.3em;
  }

  .fullForm5 {
    font-size: 1.2em;
  }

  .fullForm4 {
    font-size: 1.5em;
  }

  .fullForm3 {
    font-size: 1.6em;
    max-width: 99%;
    line-height: 1.2;
  }

  .fullForm2 {
    max-width: 99%;
    font-size: 1.6em;
    white-space: nowrap;

  }

  #duplicatePopup {
    width: 100%;
    /* Make the popup width 90% of the viewport width */
    max-width: 100%;
    /* Ensure it doesn't exceed viewport width */
    padding: 5px 0px;
    /* Slightly smaller padding for mobile */
  }

  .input-container {
    width: 100%;
    /* Full width on mobile */
  }

  div.scrollmenu {
    margin-bottom: 5px;
  }

  div.postsMenu {
    margin-bottom: 5px;
    white-space: nowrap;
  }

  #cProfile {
    margin-bottom: 5px;
  }

  #id03 {
    padding-top: 5px;
  }

  .signUpTextContainer input[type=text],
  .signUpTextContainer input[type=password],
  .signUpTextContainer input[type=Email] {
    margin: 10px;
    font-size: 16px;
    padding: 11px 11px;
    box-sizing: border-box;
    border: 3px solid #ccc;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    width: calc(100% - 22px);
    /* Adjusted width to account for padding and border */
  }

  #mobile_thoughts {
    display: block;
    justify-content: space-between;
    background-color: gray;
    margin: 10px 0;
  }

  #suggestions {
    max-width: 100%;
    text-align: left;
    margin: 0px 10px 10px 5px;
    font-size: 16px;
    -webkit-transition: 0.5s;
    transition: 0.5s;
    outline: none;
    width: calc(100% - 22px);
    cursor: pointer;
  }

  #mobile_thoughts p {
    vertical-align: middle;
    text-align: justify;
    padding: 10px;

  }

  #mobile_about {
    display: block;
    height: 200px;
    background-color: gray;
    text-align: center;
    padding: 10px;
    margin: 10px 0;
  }

  #mobile_about p {
    margin: 10px;
  }

  /*collapsible */
  #cProfile {
    display: block;
  }


  .container {
    position: relative;
    text-align: center;
    max-width: calc(100% - 10px);
    margin: 4px 3px;
  }

  .draftContainer {
    position: relative;
    text-align: center;
    max-width: 100%;
  }

  .ppcontainer,
  .cover {
    position: relative;
    text-align: center;
    max-width: 100%;
  }

  #column2 .container {
    position: relative;
    text-align: center;
    max-width: 99%;
    margin: 5px;
  }

  .inputTextContainer input[type=text] {
    max-width: 600px;
  }

  .logInTextContainer input[type=email],
  .logInTextContainer input[type=password],
  .logInTextContainer input[type=text] {
    border: 3px solid #555;
    width: 96%;
    max-width: 600px;
  }

  #fullForm {
    margin-bottom: 10px;
    padding: 0px 3px;
  }

  .footer {
    font-size: 0.8em;
  }

  .comment-icon .container {
    width: calc(100% - 10px);
    margin: 3px 4px;
    padding: 0;
  }

}