@import url("https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap");
.raleway-500 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}
.raleway-600 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}
.raleway-700 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
}
.raleway-800 {
  font-family: "Raleway", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  font-style: normal;
}

:root {
  --light-fw: 300;
  --regular-fw: 400;
  --medium-fw: 500;
  --semi-bold-fw: 600;
  --bold-fw: 700;
  --extra-bold-fw: 800;
  --black-fw: 900;

  /* New variables */
  --blue-clr1: #2972e2;
  --blue-clr2: #2a3d44;
  --blue-clr3: #9aabbc;
  --blue-clr4: #536e8a;
  --blue-clr5: #49627d;
  --blue-clr6: #4298f4;
  --blue-clr7: #aeb7db;
  --blue-clr8: #f5f7f9;
  --blue-clr9: #f4f7fa;
  --blue-clr10: #1b334d;
  --blue-clr11: #49627d;
  --blue-clr-12: #0f263d;

  --light-blue-bg1: #e9f3ff;
  --light-blue-bg2: #f4f7fa;
  --light-blue-bg3: #96a2cd;

  --gray-clr1: #4c5152;
  --gray-clr2: #2c2c2c;
  --gray-clr3: #abc1c9;
  --gray-clr4: #c4c4c4;
  --gray-clr5: #f5f5f5;
  --gray-clr6: #fafcfd;
  --gray-clr7: #f2f1f1;
  --gray-clr8: #f4f7fa;
  --gray-clr9: #eef5fb;
  --gray-clr10: #f5f7f9;

  --black-clr: #000;

  --gradient-btn-clr: linear-gradient(90deg, #ff7a00 0%, #ffb000 100%);

  --gradient-btn-clr1: linear-gradient(293deg, #fcaf17 10.19%, #d80b8c 93.51%);
  --gradient-hover-btn-clr1: linear-gradient(293deg, #d80b8c 10.19%, #fcaf17 93.51%);

  --blue-btn1: #2972e2;
  --gray-btn-outline: #4c5152;

  --google-btn: linear-gradient(90deg, #2e5ca2 0%, #133466 100%);

  --text-white: #fff;
  --text-white2: #f6faf3;
  --text-clr1: #0f263d;
  --text-clr2: #aeb7db;
  --text-clr3: #49627d;
  --text-clr4: #1c1f20;
  --text-clr3: #49627d;
  --text-clr6: #2c2c2c;
  --text-clr7: #1c1f20;
  --text-clr8: #747c85;
  --text-clr9: #536e8a;
  --text-clr10: #0f263d;
  --text-clr11: #8190c5;
  --text-clr12: #0f263d;
  --text-clr13: #2e5ca2;
  --black-clr: #000;

  --post-tag-clr: #2972e2;

  --input-border-clr: #d7e1f1;

  --placeholder-clr: #aeb7db;

  --pink-clr: #d80b8c;
  --white-clr: #fff;

  --modal-sub-para-clr: #8190c5;

  --footer-border: #f5f7f9;
}
.container-fluid.py-5 {
  position: relative;
  z-index: 1;
}
body {
  margin: 0;
  font-family: "Open Sans", sans-serif;
  font-weight: var(--regular-fw);
  background: #fafcfd;
}
.flex-1 {
  flex: 1;
}
.td-none {
  text-decoration: none;
}
.extra-padding {
  padding-bottom: 85px !important;
}
.alert {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
}
@font-face {
  font-family: "Museo Sans Rounded 100";
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/MuseoSansRounded-100.woff") format("woff");
}
@font-face {
  font-family: "Museo Sans Rounded 300";
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/MuseoSansRounded-300.woff") format("woff");
}
@font-face {
  font-family: "Museo Sans Rounded 400";
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/MuseoSansRounded-400.woff") format("woff");
}
@font-face {
  font-family: "Museo Sans Rounded 500";
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/MuseoSansRounded-500.woff") format("woff");
}
@font-face {
  font-family: "Museo Sans Rounded 700";
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/MuseoSansRounded-700.woff") format("woff");
}
@font-face {
  font-family: "Museo Sans Rounded 800";
  font-style: normal;
  font-weight: normal;
  src: url("../webfonts/MuseoSansRounded-800.woff") format("woff");
}

.light-blue-clr {
  color: var(--blue-btn1) !important;
}

.blue-clr {
  color: #536e8a;
}

.pink-clr {
  color: var(--pink-clr);
}

.black-clr {
  color: var(--black-clr);
}

.shaded-blue-clr {
  color: var(--text-clr3);
}

.mid-blue-clr {
  color: var(--text-clr4);
}

.mid-blue-clr2 {
  color: #747c85;
}

.mid-blue-clr3 {
  color: var(--text-clr10);
}

.mid-blue-clr4 {
  color: var(--text-clr3);
}

.mid-blue-clr5 {
  color: var(--text-clr3);
}

.gray-1 {
  color: var(--text-clr3);
}

.gray-2 {
  color: var(--text-clr9);
}
.gray-3 {
  color: var(--gray-clr3);
}
.gray-4 {
  color: var(--text-clr3);
}
.fs-10 {
  font-size: 0.625rem;
}
.fs-11 {
  font-size: 0.688rem;
}
.fs-12 {
  font-size: 0.75rem;
}

.fs-14 {
  font-size: 0.875rem;
}

.fs-15 {
  font-size: 0.9rem;
}

.fs-16 {
  font-size: 1rem;
}

.fs-18 {
  font-size: 1.125rem;
}

.fs-20 {
  font-size: 1.25rem;
}

.fs-22 {
  font-size: 1.375rem;
}

.fs-24 {
  font-size: 1.5rem;
}

.fs-26 {
  font-size: 1.625rem;
}

.fs-28 {
  font-size: 1.75rem;
}

.fs-30 {
  font-size: 1.875rem;
}

.fs-32 {
  font-size: 2rem;
}

.fs-34 {
  font-size: 2.125rem;
}

.fs-36 {
  font-size: 2.25rem;
}

.fs-38 {
  font-size: 2.375rem;
}

.fs-40 {
  font-size: 2.5rem;
}

.fs-42 {
  font-size: 2.625rem;
}

.fs-44 {
  font-size: 2.75rem;
}

.fs-46 {
  font-size: 2.875rem;
}

.fs-48 {
  font-size: 3rem;
}

.fs-50 {
  font-size: 3.125rem;
}

.fs-52 {
  font-size: 3.25rem;
}

.fs-54 {
  font-size: 3.375rem;
}

.fs-56 {
  font-size: 3.5rem;
}

.fs-58 {
  font-size: 3.625rem;
}

.fs-60 {
  font-size: 3.75rem;
}

/* Different Font Weights */
.thin-fw {
  font-weight: var(--thin-fw);
}

.extra-light-fw {
  font-weight: var(--extra-light-fw);
}

.light-fw {
  font-weight: var(--light-fw);
}

.regular-fw {
  font-weight: var(--regular-fw);
}

.medium-fw {
  font-weight: var(--medium-fw);
}

.semi-bold-fw {
  font-weight: var(--semi-bold-fw);
}

.bold-fw {
  font-weight: var(--bold-fw);
}

.extra-bold-fw {
  font-weight: var(--extra-bold-fw);
}

.black-fw {
  font-weight: var(--black-fw);
}

/*.btn:hover {
  color: currentColor;
  background-color: currentColor;
  border-color: currentColor;
}*/

.btn:focus,
.form-control:focus {
  box-shadow: none;
  border-color: #93b5c0;
}

.cursor-pointer {
  cursor: pointer;
}

.padding20 {
  padding: 20px 15px;
  margin-bottom: 150px;
}
.paddingTop5 {
  padding-top: 5px;
}

.margin-bottom-100 {
  margin-bottom: 100px;
}

.main {
  position: relative;
  max-width: 415px;
  margin: 0 auto;
  background-color: var(--gray-clr6);
  min-height: 100vh;
}
.main.mh {
  min-height: calc(100vh - 110px);
}

.props {
  min-height: 100vh;
  display: grid;
  place-items: center;
}

.onboard-section {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  z-index: 1;
}

.blue-light-btn {
  width: 100%;
  border-radius: 100px;
  background: var(--gradient-btn-clr1);
  padding: 12px 15px;
  color: var(--text-white2);
  border: none;
  box-shadow: none;
  outline: none;
  color: #fff !important;

  &.customize {
    background-color: var(--gradient-btn-clr1);
  }

  &:hover {
    background: var(--gradient-hover-btn-clr1);
  }
}
.blue-light-btn:hover,
.blue-light-btn:active,
.blue-light-btn:focus {
  background-color: #0966c9;
  color: var(--text-white);
}

.blue-outline-btn {
  width: 100%;
  border-radius: 100px;
  border: 2px solid var(--gray-btn-outline);
  padding: 12px 16px;
  color: var(--text-clr3);
}
.blue-outline-btn:hover,
.blue-outline-btn:active,
.blue-outline-btn:focus {
  background-color: var(--gray-btn-outline);
  color: var(--text-white);
}

.next-trip-btn {
  width: 100%;
  border-radius: 5px;
  border: 2px solid #536e8a;
  padding: 0.85rem 1rem;
  color: #536e8a;
  border-radius: 50px;
}
.next-trip-btn:hover,
.next-trip-btn:active,
.next-trip-btn:focus {
  background-color: #536e8a;
  color: var(--text-white);
  border-color: #536e8a;
}

.forgot-password-link-div {
  position: fixed;
  bottom: 50px;
  text-align: center;
  max-width: 415px;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
}
.forgot-password-link {
  font-size: 0.875rem;
  color: var(--text-clr3);
  text-decoration: none;
}
.forgot-password-link:hover {
  text-decoration: underline;
}

.top-pattern,
.bottom-pattern {
  position: absolute;
  width: 100%;
  user-select: none;
}

.top-pattern {
  top: 0;
}

.bottom-pattern {
  bottom: 0;
}
.socials {
  width: 100%;
  margin-bottom: 0.85rem;
}
.socials__btn {
  position: relative;
  width: 100%;
  padding: 0.65rem 1rem;
  text-align: center;
  color: var(--text-white2) !important;
  height: 100%;
  font-weight: var(--semi-bold-fw);
  font-size: 15px;
  letter-spacing: 1px;
  border-radius: 100px;
}
.socials__btn img {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.5rem;
  transition: all 0.15s ease-in-out;
}
.socials__btn:hover {
  color: rgba(255, 255, 255, 0.75);
}
.socials__btn:hover img {
  opacity: 0.85;
}
.socials__google__btn {
  background: var(--google-btn);
}

.top-cross-div {
  position: absolute;
  top: 1rem;
  right: 1.125rem;
  z-index: 2;
}
.form-control {
  min-height: 50px;
  border: 1px solid var(--input-border-clr);
  background-color: var(--white-clr);
  border-radius: 16px;
  color: var(--text-clr12);
  font-weight: 500;
  font-size: 1rem;
  padding-left: 1.5rem;
  padding-block: 0.85rem;
}
.form-control:read-only {
  border: 1px solid var(--input-border-clr);
  box-shadow: none !important;
}
.form-control::placeholder {
  color: var(--placeholder-clr);
  font-weight: 500;
}
/* .form-control:not(:placeholder-shown) {
  border-color: #93b5c0;
} */
.sign-up-agree {
  padding-inline: 1rem;
}

.sign-up-check-label {
  width: 20px;
  height: 20px;
  border: 2px solid #7382b8;
  margin-right: 8px;
  flex-shrink: 0;
}
.sign-up-check-label img {
  opacity: 0;
  transition: 0.5s ease-in;
  position: absolute;
  top: -6px;
  width: 22px;
  height: 22px;
  left: 3px;
}
.sign-up-check-label .sign-up-checkbox:checked ~ img {
  opacity: 1;
}

.agree-para a {
  text-decoration: none;
}

.show-pwd-label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
}

.steps-wrapper {
  padding-inline: 2rem;
}

.steps-nav {
  width: 100%;
  justify-content: space-between;
  margin-bottom: 2rem;
  position: relative;
}
.steps-nav::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  transform: translateY(-50%);
  height: 1px;
  background-color: rgb(152, 152, 152);
}
.steps-nav .nav-item {
  z-index: 1;
}
.steps-nav .nav-item .nav-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #7382b8;
  color: var(--text-white);
  display: flex;
  justify-content: center;
  align-items: center;
}
.steps-nav .nav-item.active .nav-link {
  background-color: #0f263d;
}
.steps-nav .nav-item.done .nav-link {
  background-color: var(--blue-clr-12);
  color: var(--text-white);
  border: 2px solid #0f263d;
}

.inputs__label {
  color: var(--text-clr3);
  font-size: 1rem;
}
.inputs__box .inputs__input {
  width: 100%;
  background: #fff !important;
  border: 1px solid var(--input-border-clr) !important;
  border-radius: 8px !important;
  border-bottom-right-radius: 8px;
  border-bottom-left-radius: 8px;
  height: auto;
  padding: 1rem !important;
  font-size: 1rem;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  --webkit-appearance: none;
  display: none;
}
.input__box textarea {
  border: 1px solid var(--input-border-clr);
  box-shadow: none;
  color: var(--text-clr3);
}
.input__box textarea::placeholder {
  color: var(--text-clr2);
  font-size: 1rem;
  font-weight: 400;
}
.mb-12 {
  margin-bottom: 0.75rem;
}

[data-placeholder]:empty::before {
  content: attr(data-placeholder);
  color: var(--gray-clr3);
  font-size: 1rem;
  font-weight: 400;
}

.inputs__user__img {
  width: 145px;
  height: 145px;
  border-radius: 50%;
  background-color: #e7f1f8;
  padding: 0 !important;
  border: 1px solid #eef5fb;
  overflow: hidden;
}
.inputs__user__img .build-pro-pic {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.builds {
  margin-top: 3.5rem;
  max-width: 400px;
}
.builds__card {
  display: flex;
  align-items: center;
  margin-bottom: 0.85rem;
}
.builds__card__img__div {
  margin-right: 1.25rem;
}
.builds__card__img__div a {
  display: block;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  overflow: hidden;
}
.builds__card__img__div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.builds__card__user__name {
  margin-bottom: 0.25rem;
  text-transform: capitalize;
  color: var(--text-clr4);
  font-family: "Museo Sans Rounded 500";
  font-size: 1.125rem;
}
.builds__card__user__place {
  color: var(--text-clr9);
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 0;
}
.builds__card__user__place a {
  color: unset;
}
.builds__card__details .address {
  font-size: 0.85rem;
  margin-bottom: 0;
}
.builds__card__btn {
  color: var(--text-clr9);
  border: 2px solid var(--text-clr9);
  font-size: 1rem;
  border-radius: 5px;
  margin-left: auto;
  padding: 0.3rem 1rem;
  font-size: 0.8125rem;
}

.builds__card__btn.following {
  padding: 5px 18px;
  border-radius: 8px;
  border: 1px solid var(--text-clr9);
  color: var(--text-clr9);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
}
.builds__card__btn.following:active {
  border: 1px solid var(--text-clr9);
  color: var(--text-clr9);
  background: transparent;
}
.builds__card__btn.following.active {
  padding: 5px 15px;
  border: 1px solid var(--blue-clr1);
  background: var(--blue-clr1);
  color: var(--text-white);
}
.builds__card .double-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: end;
  margin-left: auto;
}
.builds__card .double-btn button {
  position: relative;
  width: 100%;
  cursor: default;
}
.builds__card .double-btn button:hover {
  background-color: #9da1ac;
  border: 2px solid #9da1ac;
  color: var(--text-white);
}
.builds__card .double-btn button .unfollow-dropdown {
  position: absolute;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding: 8px;
  z-index: 999999;
  right: -2px;
  top: -2px;
  min-width: 182px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.builds__card .double-btn button .unfollow-dropdown .unfollow-inner-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: var(--gray-clr5);
  padding: 7px 10px;
  color: #2c2c2c;
  text-align: center;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.75rem;
}
.builds__card .double-btn button .unfollow-dropdown .unfollow-inner-dropdown .cross-btn {
  background: var(--pink-clr);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builds__card .double-btn button .unfollow-dropdown .unfollow-inner-dropdown .cross-btn:hover {
  background: #850456;
}
.builds__card .double-btn button:hover .unfollow-dropdown {
  opacity: 1;
  visibility: visible;
}
.builds__card .double-btn .message-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-btn-clr);
  color: white;
  border: none;
}
.builds__card .double-btn .message-btn:hover {
  background: linear-gradient(90deg, #ffb000 100%, #ff7a00 0%);
}
.builds__card .three-dot-btn {
  position: relative;
  margin-left: 18px;
  padding: 0;
  background: none;
  outline: none;
  border: none;
  box-shadow: none;
}
.builds__card .three-dot-btn .unfollow-dropdown-main-div {
  position: absolute;
  z-index: 999999;
  right: 0;
  bottom: 0;
  opacity: 0;
  padding-right: 10px;
  visibility: hidden;
}
.builds__card .three-dot-btn .unfollow-dropdown-main-div .unfollow-dropdown {
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding: 8px;
  min-width: 182px;
  width: 100%;
}
.builds__card .three-dot-btn .unfollow-dropdown-main-div .unfollow-dropdown .unfollow-inner-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: var(--gray-clr5);
  padding: 7px 10px;
  color: #2c2c2c;
  text-align: center;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.75rem;
}
.builds__card .three-dot-btn .unfollow-dropdown-main-div .unfollow-dropdown .unfollow-inner-dropdown .cross-btn {
  background: var(--pink-clr);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.builds__card .three-dot-btn .unfollow-dropdown-main-div .unfollow-dropdown .unfollow-inner-dropdown .cross-btn:hover {
  background: #850456;
}
.builds__card .three-dot-btn:hover .unfollow-dropdown-main-div {
  opacity: 1;
  visibility: visible;
}

.circle-steps {
  gap: 0.5rem;
  padding-block: 1rem;
  margin-bottom: 2rem;
}
.circle-steps .nav-item {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-clr9);
}
.circle-steps .nav-item.active {
  background-color: var(--text-clr4);
}

.common-hero-section {
  position: relative;
  background-image: url("../images/profile-header.png");
  background-position: center;
  background-size: cover;
  object-fit: cover;
  background-repeat: no-repeat;
  overflow: hidden;
  min-height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.common-hero-section .overlay {
  position: absolute;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
  width: 100%;
  height: 100%;
}
.common-hero-section .pattern-1 {
  position: absolute;
  left: -25px;
  bottom: -90px;
}
.common-hero-section .pattern-2 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -90px;
}
.common-hero-section .pattern-3 {
  position: absolute;
  right: -65px;
  bottom: -100px;
}
.common-hero-section .menu-btn {
  position: absolute;
  left: 20px;
  top: 30px;
  cursor: pointer;
  z-index: 2;
}
.common-hero-section .menu-btn .notification-count {
  position: absolute;
  width: 20px;
  height: 20px;
  background: var(--pink-clr);
  border-radius: 50%;
  color: var(--text-white);
  font-size: 0.625rem;
  font-weight: 400;
  display: none;
  align-items: center;
  justify-content: center;
  top: -7.5px;
  right: -7.5px;
}
.common-hero-section .menu-btn:hover svg rect:nth-child(2) {
  width: calc(100% - 10px);
  transition: all 0.25s ease-in-out;
}
.common-hero-section .back-btn {
  position: absolute;
  left: 15px;
  top: 15px;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  z-index: 12;
  box-shadow: none;
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    width: unset !important;
    height: unset !important;
  }
}

.edit-profile-back-btn {
  position: absolute;
  left: 15px;
  top: 15px;
  cursor: pointer;
  transition: all 0.5s ease-in-out;
  z-index: 12;
  box-shadow: none;
  outline: none;
  background: none;
  border: none;
  cursor: pointer;
}
.common-hero-section .back-btn:hover {
  margin-right: 5px;
}
.common-hero-section .hero-txt-div {
  position: relative;
  padding: 30px 20px;
  z-index: 1;
}
.common-hero-section .hero-txt-div h1 {
  color: var(--text-white);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 500;
  font-family: "Raleway", sans-serif;
  margin-bottom: 2px;
}
.common-hero-section .hero-txt-div p {
  color: var(--text-white);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 400;
  margin: 0;
}
.common-hero-section .hero-txt-div a.customize-feed-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  border: 1px solid orange;
  background: linear-gradient(110.01deg, #ff7a00 1.85%, #ffb000 99.65%);
  max-width: 148px;
  width: 100%;
  padding-block: 6px;
  text-decoration: none;
  color: var(--text-white);
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 20px auto 0 auto;
}
.common-hero-section .hero-txt-div a.customize-feed-btn:hover {
  background: linear-gradient(110.01deg, #ff7a00 2%, #ffb000 95.65%);
  border-color: var(--text-white);
}
.common-hero-section .hero-txt-div button.follow-region-btn {
  /* position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%); */
  margin-top: 15px;
  margin-inline: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  border: 1px solid #fff;
  border-radius: 16px;
  background: #fff;
  max-width: 136px;
  width: 100%;
  padding-block: 7px;
  text-decoration: none;
  color: var(--text-clr3);
  font-size: 0.9375rem;
  font-weight: 400;
}
.common-hero-section .hero-txt-div button.follow-region-btn:hover {
  background: transparent;
  border-color: var(--text-white);
  color: var(--text-white);
}
.my-profile-hero {
  user-select: none;
}

.my-profile-hero .common-hero-section {
  overflow: hidden;
  min-height: 150px;
  max-height: 150px;
  background-image: url("../images/profile-header.png");
  background-position: center;
  background-size: cover;
  object-fit: cover;
  background-repeat: no-repeat;
}
.my-profile-hero .common-hero-section img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-profile-hero .common-hero-section .overlay {
  position: absolute;
  background: rgba(0, 0, 0, 0.5);
  width: 100%;
  height: 100%;
}
.my-profile-hero .pattern-1 {
  position: absolute;
  left: -25px;
  bottom: -90px;
}
.my-profile-hero .pattern-2 {
  position: absolute;
  left: 50%;
  transform: translateX(calc(-50% - 50px));
  top: -130px;
}
.my-profile-hero .pattern-3 {
  position: absolute;
  right: -40px;
  bottom: -60px;
}
.my-profile-hero .hero-my-profile-image {
  position: relative;
  width: fit-content;
  height: fit-content;
  margin-inline: auto;

  &::before {
    content: "";
    position: absolute;
    right: 18px;
    bottom: 18px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: transparent;
    border: none;
  }

  &.online::before {
    background-color: #4dd966;
    border: 2px solid #fff;
  }
  &.away::before {
    background-color: #fcaf17;
    border: 2px solid #fff;
  }
  &.hidden::before {
    background-color: var(--blue-clr3);
    border: 2px solid #fff;
  }
}
.my-profile-hero .hero-my-profile-image label {
  width: 180px;
  height: 180px;
  border: 4px solid var(--gray-clr6);
  background-color: #d9d9d9;
  border-radius: 50%;
  overflow: hidden;
  margin-inline: auto;
  margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--text-white);
}
.my-profile-hero .hero-my-profile-image label.inner-img-label {
  display: block;
  overflow: hidden;
  background-color: var(--text-white);
}
.my-profile-hero .hero-my-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.my-profile-hero .profile-overlay {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.55);
}
.my-profile-hero .change-profile-label {
  position: absolute;
  left: 0;
  top: 0;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.33) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  color: var(--text-white);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 !important;
  white-space: nowrap;
  margin-inline: auto;
  text-align: center;
  cursor: pointer;
  z-index: 1;
}

.profile-details-main-div {
  margin-bottom: 10px;
}
.profile-details-main-div .name {
  font-family: "Raleway", sans-serif;
  color: var(--text-clr1);
  font-weight: 500;
  text-align: center;
  font-size: 1.5rem;
  margin: 0;
  margin-bottom: 2px;
}
.profile-details-main-div .address {
  color: var(--text-clr2);
  text-align: center;
  font-size: 1.1rem;
  font-weight: 400;
  margin-bottom: 15px;
}
.profile-details-main-div .address a {
  font-size: 1.1rem;
  text-decoration: none;
  color: var(--text-clr2);
}
.profile-details-main-div .follower-connection {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.profile-details-main-div .follower-connection a {
  color: var(--text-clr13);
  text-align: center;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 5px;
  background: var(--blue-clr9);
  padding: 5px 15px 5px 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.profile-details-main-div .bio {
  max-width: 332px;
  width: 100%;
  color: var(--text-clr3);
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  margin: 20px auto 15px auto;
}
.profile-details-main-div .other-pro-msg-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  width: 100%;
  height: 46px;
  border-radius: 100px;
  border: 1px solid var(--blue-clr11);
  background: transparent;
  color: var(--blue-clr11);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 700;
  margin-bottom: 10px;
}
.profile-details-main-div .other-pro-msg-btn:hover {
  background: var(--blue-clr11);
  color: var(--text-white);

  & svg path {
    fill: #fff;
  }
}
.profile-details-main-div .other-pro-follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 100px;
  border: 1px solid var(--blue-clr10);
  background: var(--blue-clr10);
  width: 100%;
  height: 46px;
  color: var(--text-white);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;

  &:hover svg path {
    fill: var(--blue-clr10);
  }
}
.profile-details-main-div .other-pro-follow-btn.active {
  background: var(--blue-clr10);
  &:hover svg path {
    fill: #fff;
  }
}
.profile-details-main-div .other-pro-follow-btn.active.show {
  border-radius: 8px 8px 0 0;
}
.profile-details-main-div .other-pro-follow-btn:hover {
  background: transparent;
  color: var(--blue-clr10);
}
.profile-details-main-div .other-pro-follow-btn.active:hover {
  background: var(--blue-clr10);
  color: var(--text-white);
}

.say-something-div {
  border-radius: 100px;
  background: #fff;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.15);
  padding: 5px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.say-something-div .input-div {
  width: 100%;
  color: #797979;
  font-size: 0.875rem;
  font-weight: 400;
  user-select: none;
}
.say-something-div .select-img-div {
  margin-right: 25px;
}
.say-something-div .user-img-with-status {
  position: relative;
  width: 32px;
  height: 32px;
}
.say-something-div .user-img-with-status .inner-div {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.say-something-div .user-img-with-status .inner-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.say-something-div .user-img-with-status label {
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  background: #72bf44;
  border-radius: 50%;
  bottom: 2px;
}

.all-post-main-div {
  margin: 15px 0;
}
.all-post-main-div .user-timeline-para {
  color: var(--text-clr2);
  font-size: 1rem;
  margin: 30px 0 5px 0;
  font-weight: 400;
}
.all-post-main-div .each-post-main-div {
  border-top: 1px solid var(--blue-clr8);
  background: #ffffff;
  padding: 15px 0 10px 0;
  margin-top: 1.1rem;
}
.all-post-main-div .each-post-main-div:first-child {
  margin-top: 10px !important;
}
.all-post-main-div .each-post-main-div .top-heading-div {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding-inline: 15px;
  margin-bottom: 12px;
}
.all-post-main-div .each-post-main-div .top-heading-div .left-div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.all-post-main-div .each-post-main-div .top-heading-div .left-div .img-div {
  position: relative;
  a {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
  }

  &::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: none;
  }

  &.online::before {
    background-color: #4dd966;
    border: 2px solid #fff;
  }
  &.away::before {
    background-color: #fcaf17;
    border: 2px solid #fff;
  }
  &.hidden::before {
    background-color: var(--blue-clr3);
    border: 2px solid #fff;
  }
}
.all-post-main-div .each-post-main-div .top-heading-div .left-div .img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.all-post-main-div .each-post-main-div .top-heading-div .left-div .name-address-div a {
  text-decoration: none;
}
.all-post-main-div .each-post-main-div .top-heading-div .left-div .name-address-div a .name {
  font-family: "Raleway", sans-serif;
  color: var(--text-clr1);
  font-size: 0.9375rem;
  font-weight: 500;
  margin: 0;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  text-transform: capitalize;
}

.all-post-main-div .each-post-main-div .top-heading-div .left-div .name-address-div a .name .time {
  position: relative;
  font-family: "Open Sans", sans-serif;
  color: var(--text-clr2);
  font-size: 0.8125rem;
  font-weight: 400;
  text-align: end;
  padding-left: 8px;
}
.all-post-main-div .each-post-main-div .top-heading-div .left-div .name-address-div a .name span.time::before {
  position: absolute;
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="%23D9D9D9"/></svg>');
  left: 1px;
  top: 0;
}
.all-post-main-div .each-post-main-div .top-heading-div .left-div .name-address-div .location {
  color: var(--text-clr2);
  font-size: 0.8125rem;
  font-weight: 400;
  margin-block: 2px 0;
}
.all-post-main-div .each-post-main-div .top-heading-div .right-div {
  display: flex;
  align-items: center;
  gap: 15px;
}
.all-post-main-div .each-post-main-div .top-heading-div .right-div span.time {
  font-family: "Open Sans", sans-serif;
  color: var(--text-clr9);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: end;
}

.all-post-main-div .each-post-main-div .top-heading-div .right-div span.three-dot {
  position: relative;
  cursor: pointer;
  z-index: 2;
  display: block;
  padding-inline: 0.175rem;
}
.all-post-main-div .each-post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div {
  position: absolute;
  top: 0;
  right: -8px;
  padding-right: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease-in-out;
}
.all-post-main-div .each-post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div {
  min-width: 210px;
  border-radius: 8px;
  border: 1px solid var(--gray-clr7);
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  padding: 8px;
  display: flex;
  flex-direction: column;
  margin-top: 25px;
}
.all-post-main-div .each-post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div a {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 8px 12px;
  color: var(--text-clr4);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 5px;
}
.all-post-main-div .each-post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div a:hover {
  background: var(--blue-clr8);
}
.all-post-main-div .each-post-main-div .top-heading-div .right-div span.three-dot:hover .dropdown-main-div {
  opacity: 1;
  visibility: visible;
  z-index: unset;
}
.all-post-main-div .each-post-main-div .post-image-text-div .post-img-outer-div {
  padding-inline: 15px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div .post-img-outer-div {
  padding-inline: 15px;
}
.all-post-main-div .each-post-main-div .post-image-text-div .img-div {
  position: relative;
  width: 100%;
  background: var(--gray-clr4);
  border-radius: 5px;
  overflow: hidden;
  padding-inline: 0;
  overflow: hidden;
  border-radius: 16px;
}
.all-post-main-div .each-post-main-div .post-image-text-div .img-div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  object-fit: contain;
  background-color: #333;
}
.large-img .img-div img {
  height: 100%;
}
.all-post-main-div .each-post-main-div .post-image-text-div div.post-text {
  color: var(--text-clr3);
  font-size: 0.9375rem;
  font-weight: 400;
  word-break: break-word;
  padding-inline: 15px;
  margin-bottom: 10px;
}

.all-post-main-div .each-post-main-div .post-image-text-div div.post-text span {
  background-color: transparent !important;
  color: var(--text-clr3) !important;
  font-size: 1rem !important;
}
.all-post-main-div .each-post-main-div .post-image-text-div div.post-text a,
.all-post-main-div .each-post-main-div .post-image-text-div a,
.each-echod-post .post-image-text-div div.post-text a {
  text-decoration: none;
  color: var(--post-tag-clr);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  border-radius: 16px;
}

.mention-user-name {
  color: var(--text-clr3) !important;
  font-size: 1rem !important;
}
.post-image-text-div ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  padding-left: 35px !important;
  padding-right: 15px !important;
}
.post-image-text-div li {
  margin-left: 35px !important;
  color: var(--text-clr3) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  word-break: break-all;
  padding-right: 15px !important;
}
.post-image-text-div ul li {
  margin-left: unset !important;
  color: var(--text-clr3) !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  word-break: break-all;
  padding-right: unset !important;
}
.all-post-main-div .each-post-main-div .post-image-text-div p.post-tags {
  color: var(--blue-clr1);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0;
}
.all-post-main-div .each-post-main-div .post-image-text-div .all-comments-btn {
  position: relative;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
  display: block;
  margin-left: auto;
  color: #2c2c2c;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0;
}
.all-post-main-div .each-post-main-div .post-image-text-div .all-comments-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #2c2c2c;
  left: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}
.all-post-main-div .each-post-main-div .post-image-text-div .all-comments-btn:hover::before {
  content: "";
  width: 20%;
}
.all-post-main-div .each-post-main-div .posts-all-btns-div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  padding-inline: 15px;
}
.all-post-main-div .post-btn-left {
  display: flex;
  align-items: center;
  gap: 0px;
  border: 1px solid var(--blue-clr8);
  border-radius: 50px;
  overflow: hidden;
}
.all-post-main-div .post-btn-right {
  display: flex;
  align-items: center;
  gap: 0px;
  border: 1px solid var(--blue-clr8);
  border-radius: 50px;
  overflow: hidden;
}
.all-post-main-div .each-post-main-div .posts-all-btns-div a {
  border-right: 1px solid var(--blue-clr8);
  text-align: center;
  padding: 7px 10px;
  color: var(--text-clr3);
  font-size: 0.9375rem;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 76px;

  &.love-react {
    gap: 1px;
  }

  &:last-child {
    border-right: none;
  }

  &.saved-btn {
    display: none;
  }
}

@media (max-width: 380px) {
  .all-post-main-div .each-post-main-div .posts-all-btns-div a {
    min-width: unset;
    padding-inline: 15px;
  }
}

.all-post-main-div .each-post-main-div .posts-all-btns-div a:hover {
  background: var(--gray-clr5);
  color: #747474;
}
.all-post-main-div .each-post-main-div .posts-all-btns-div a.love-react.active svg path {
  fill: var(--pink-clr);
}
.all-post-main-div .each-post-main-div .posts-all-btns-div a.echo-post.active svg path {
  fill: #3b5998;
}
.all-post-main-div .each-post-main-div .comments-each-div .comments-div {
  position: relative;
  padding: 8px 8px 8px 30px;
  border-radius: 5px;
  margin: 6px 0 0 18px;
  font-size: 0.875rem;
}
.all-post-main-div .each-post-main-div .comments-each-div .comments-div .commenter-img-div {
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;

  left: -15px;
  top: 8px;
}
.all-post-main-div .each-post-main-div .comments-each-div .comments-div .commenter-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.all-post-main-div .each-post-main-div .comments-each-div .comments-div .commenter-name {
  color: #2c2c2c;
  font-size: 0.9375rem;
  font-weight: 700;
  margin-bottom: 5px;
  line-height: 1;
}
.all-post-main-div .each-post-main-div .comments-each-div .comments-div .commenter-comment {
  color: #2c2c2c;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}
.comments-div p {
  margin-bottom: 4px;
}
.all-post-main-div .each-post-main-div .comments-each-div .react-reply-time-div {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 6px 0 0 18px;
}
.all-post-main-div .each-post-main-div .comments-each-div .react-reply-time-div .reply-btn {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #2c2c2c;
  font-size: 1rem;
  text-decoration: none;
}
.all-post-main-div .each-post-main-div .comments-each-div .react-reply-time-div .comment-like {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #2c2c2c;
  font-size: 1rem;
  cursor: pointer;
}
.all-post-main-div .each-post-main-div .comments-each-div .react-reply-time-div .comment-like.love-react.active {
  color: #2c2c2c;
}
.all-post-main-div .each-post-main-div .comments-each-div .react-reply-time-div .comment-like.love-react.active svg path {
  fill: var(--pink-clr);
}
.all-post-main-div .each-post-main-div .comments-each-div .react-reply-time-div .timming {
  color: #9da1ac;
  font-size: 1rem;
}
.all-post-main-div .each-post-main-div .private-profile-post-area {
  display: none;
}
.all-post-main-div .each-post-main-div.private-profile .top-heading-div,
.all-post-main-div .each-post-main-div.private-profile .post-image-text-div,
.all-post-main-div .each-post-main-div.private-profile .posts-all-btns-div,
.all-post-main-div .each-post-main-div.private-profile .comments-each-div,
.all-post-main-div .each-post-main-div.private-profile .see-all-comment-btn {
  display: none;
}
.all-post-main-div .each-post-main-div.private-profile .private-profile-post-area {
  display: block;
  padding: 50px 20px;
  text-align: center;
}
.all-post-main-div .each-post-main-div.private-profile .private-profile-post-area p.heading {
  color: var(--text-clr1);
  font-size: 1.5rem;
  font-weight: 400;
  margin: 25px 0 18px 0;
}
.all-post-main-div .each-post-main-div .private-profile-post-area p.heading {
  color: var(--text-clr1);
  font-size: 18px;
  font-weight: 600;
  margin: 25px 0 10px 0;
}
.all-post-main-div .each-post-main-div.private-profile .private-profile-post-area p.para {
  color: var(--text-clr11);
  font-size: 0.9375rem;
  font-weight: 300;
  margin: 0;
}
.private-my-post {
  color: var(--text-clr2) !important;
  text-align: center !important;
  font-family: "Museo Sans Rounded 400" !important;
  font-size: 0.9375rem !important;
  font-weight: 400 !important;
  text-transform: uppercase !important;
  text-align: left !important;
  padding: 0 15px !important;
}
.private-area-div {
  border-radius: 16px;
  border: 1px solid var(--gray-clr7);
  background: #f5f7f9;
  padding-block: 35px;
  padding-inline: 15px;
}
.private-area-div .heading {
  color: var(--text-clr1);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  margin-block: 0 10px;
}
.private-area-div .para {
  color: var(--text-clr11);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 400;
  max-width: 275px;
  width: 100%;
  margin-inline: auto;
  margin-block: 0;
}
.main:has(.private-profile-post-area) .other-pro-follow-btn,
.main:has(.private-profile-post-area) .other-pro-msg-btn {
  display: none;
}
.all-post-main-div .see-all-comment-btn {
  position: relative;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
  display: block;
  margin: 12px 0 0 18px;
  color: #9da1ac;
  font-size: 0.875rem;
  padding: 0;
}
.all-post-main-div .see-all-comment-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #9da1ac;
  left: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}
.all-post-main-div .see-all-comment-btn:hover::before {
  content: "";
  width: 20%;
}

.footer-main-setion {
  position: fixed;
  width: 100%;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  z-index: 1044;
}
@media screen and (min-width: 768px) {
  .footer-main-section {
    max-width: 415px;
  }
}

.footer-main-setion .footer-main-div {
  max-width: 415px;
  width: 100%;
  background: #fff;
  box-shadow: 0px 0px 35px 0px rgba(0, 0, 0, 0.08);
  overflow-x: auto;
  margin-inline: auto;
}
.footer-main-setion .footer-main-div .footer-all-tab {
  display: flex;
  justify-content: space-between;
}
.footer-main-setion .footer-main-div .footer-all-tab a {
  text-decoration: none;
  color: none;
  width: 100%;
  margin: 0;
  padding: 0;
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab {
  width: 100%;
  height: 100%;
  padding: 30px 5px 15px 5px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1.2px solid var(--footer-border);
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab p {
  color: var(--text-clr3);
  text-align: center;
  font-size: 0.75rem;
  font-weight: 500;
  margin: 5px 0 0 0;
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab svg {
  width: 36px;
  height: 36px;
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab.active p {
  color: var(--blue-clr1);
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab:hover p {
  color: var(--blue-clr1);
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab.active svg path {
  fill: var(--blue-clr1);
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab.active svg path.region-path {
  fill: #fff;
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab:hover svg path {
  fill: var(--blue-clr1);
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab:hover svg path.region-path {
  fill: #fff;
}
.footer-main-setion .footer-create-btn {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--gradient-btn-clr1);

  border: 2px solid #fff;
  border-radius: 50%;
  filter: drop-shadow(0px 0px 25px rgba(0, 0, 0, 0.25));
  left: 50%;
  top: -21px;
  transform: translateX(-50%);
  z-index: 99999;
  cursor: pointer;
}
.footer-main-setion .footer-create-btn:hover {
  background: linear-gradient(135deg, #fcaf17 0%, #d80b8c 100%);
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab .footer-noty-count {
  position: absolute;
  top: -5px;
  right: 18px;
  background-color: var(--pink-clr);
  color: #ffffff;
  padding: 1px 5px;
  border-radius: 10px;
  font-size: 0.6875rem;
  font-weight: 500;
  margin: 0;
  display: none;
}
.footer-main-setion .footer-main-div .footer-all-tab a .footer-each-tab .footer-noty-count.footer-message-count {
  right: 0;
}

.create-post-offcanvas {
  min-width: 100%;
  max-width: 100%;
  width: 100%;
}
.create-post-offcanvas .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border-bottom: 1px solid #ececec;
}
.create-post-offcanvas .header p {
  color: var(--text-clr1);
  font-family: "Museo Sans Rounded 400";
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.create-post-offcanvas .header svg {
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.create-post-offcanvas .header svg:hover {
  transform: rotate(90deg);
}
.create-post-offcanvas .user-details-main-div {
  padding: 15px 0px 15px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.create-post-offcanvas .user-details-main-div .left-div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.create-post-offcanvas .user-details-main-div .left-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.create-post-offcanvas .user-details-main-div .right-div .name {
  color: var(--text-clr1);
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
}
.create-post-offcanvas .user-details-main-div .right-div .address {
  color: var(--text-clr2);
  font-size: 0.8125rem;
  font-weight: 400;
  margin: 0;
}
.create-post-offcanvas .user-details-main-div .right-div .address a {
  color: var(--text-clr2);
  font-size: 0.8125rem;
  font-weight: 400;
  margin: 0;
  text-decoration: none;
}
.create-post-offcanvas .selected-img-div {
  padding: 0 20px;
}
.create-post-offcanvas .selected-img-div .each-selected-img {
  position: relative;
  margin-bottom: 8px;
  width: 100%;
  height: 100px;
}
.create-post-offcanvas .selected-img-div .each-selected-img .upload-progress {
  position: absolute;
  margin: 0;
  bottom: -15px;
  width: 100%;
  height: 6px;
  background: #e3e5e7;
  border-radius: 8px;
  overflow: hidden;

  span {
    display: block;
    background: var(--text-clr2);
    height: 100%;
  }
}
.create-post-offcanvas .selected-img-div .each-selected-img button {
  position: absolute;
  fill: #59544a;
  border: 1px solid #59544a;
  background: #59544a;
  width: 16px;
  height: 16px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  right: -3px;
  top: -3px;
  z-index: 1;
}
.create-post-offcanvas .selected-img-div .each-selected-img button img {
  pointer-events: all;
  cursor: pointer;
}
.create-post-offcanvas .selected-img-div .each-selected-img button:hover {
  border: 1px solid var(--pink-clr);
  background: var(--pink-clr);
}
.create-post-offcanvas .selected-img-div .each-selected-img .img-div {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  overflow: hidden;
}
.create-post-offcanvas .selected-img-div .each-selected-img .img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.create-post-offcanvas .selected-img-div .each-selected-img .img-div video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.create-post-offcanvas .selected-img-div .each-selected-img .img-div .video-controls-div {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  img {
    cursor: pointer;
    width: 24px !important;
    height: 24px !important;

    &:last-child {
      opacity: 0;
    }
  }
}
.create-post-offcanvas .selected-img-div .each-selected-img .img-div:hover .video-controls-div img:last-child {
  opacity: 1;
}

.create-post-offcanvas .selected-img-div .each-selected-img .post-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: none !important;
  border: none !important;
}

.create-post-offcanvas .selected-img-div .col-4 {
  padding: 5px;
}
.create-post-offcanvas .selected-img-div .view-all-selected-img {
  border-radius: 8px;
  border: 2px solid #c1c1c1;
  background: #fff;
  width: 100%;
  height: 37px;
  color: #c1c1c1;
  font-size: 0.875rem;
  font-weight: 600;
  margin-top: 10px;
}
.create-post-offcanvas .selected-img-div .view-all-selected-img:hover {
  border: 2px solid #2a3d44;
  color: var(--text-clr1);
}
.create-post-offcanvas .post-writing-div {
  position: relative;
  padding: 10px 5px;
  display: flex;
}
.create-post-offcanvas .post-writing-div .reply-input-area {
  padding: 8px 15px;
  flex: 1;
  word-break: break-word;
  box-shadow: none;
  outline: none;
  border: none;
  font-size: 1rem;
  color: var(--text-clr3);
}
.create-post-offcanvas .post-writing-div textarea {
  width: 100%;
  height: calc(100vh - 300px);
  border: none;
  box-shadow: none;
  outline: none;
  resize: none;
  color: var(--text-clr1);
  font-size: 1rem;
  font-weight: 300;
}
.create-post-offcanvas .post-writing-div textarea::placeholder {
  color: var(--text-clr1);
  font-size: 1rem;
  font-weight: 300;
}
.create-post-offcanvas .upload-send-btn {
  padding: 20px 15px;
  border-top: 1px solid #d3d3d3;
}
.create-post-offcanvas .upload-send-btn .upload-image-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 50px;
  border: 2px solid var(--text-clr2);
  background: var(--text-clr2);
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px;
  cursor: pointer;
  margin-bottom: 8px;
}
.create-post-offcanvas .upload-send-btn .upload-image-btn:hover {
  background: #fff;
  color: var(--text-clr2);
}
.create-post-offcanvas .upload-send-btn .upload-image-btn:hover svg path {
  fill: var(--text-clr2);
}
.create-post-offcanvas .upload-send-btn .reply-send-btn {
  border-radius: 8px;
  background: var(--gradient-btn-clr);
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  box-shadow: none;
  outline: none;
  border: none;
}
.create-post-offcanvas .upload-send-btn .reply-send-btn:hover {
  background: linear-gradient(90deg, #ffb000 100%, #ff7a00 0%);
}
.create-post-offcanvas .upload-send-btn .send-btn {
  border-radius: 50px;
  background: var(--gradient-btn-clr1);
  color: var(--text-white);
  border: none;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;

  &.disabled {
    opacity: 0.5;
    pointer-events: none;
  }
}
.create-post-offcanvas .upload-send-btn .send-btn:hover {
  background: var(--gradient-hover-btn-clr1);
}

.all-comments-offcanvas {
  min-width: 100%;
  max-width: 100%;
  width: 100%;

  .inner-echod-post .inner-post-echo-share-btn {
    display: none;
  }
}
.all-comments-offcanvas .header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 15px;
  border-bottom: 1px solid #ececec;
}
.all-comments-offcanvas .header p {
  color: var(--text-clr4);
  font-family: "Museo Sans Rounded 500";
  font-size: 1rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}
.all-comments-offcanvas .header svg {
  transition: all 0.25s ease-in-out;
  cursor: pointer;
}
.all-comments-offcanvas .header svg:hover {
  transform: rotate(90deg);
}
.all-comments-offcanvas .user-details-main-div {
  padding: 20px 15px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.all-comments-offcanvas .user-details-main-div .left-div {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
}
.all-comments-offcanvas .user-details-main-div .left-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.all-comments-offcanvas .user-details-main-div .right-div .name {
  color: var(--text-clr1);
  font-weight: 500;
  font-size: 1rem;
  margin: 0;
}
.all-comments-offcanvas .user-details-main-div .right-div .address {
  color: var(--text-clr9);
  font-size: 0.8125rem;
  font-weight: 400;
  margin: 0;
}
.all-comments-offcanvas .commented-post-main-div {
  margin: 10px 0;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div {
  border-radius: 5px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 15px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .left-div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .left-div .img-div {
  position: relative;
  a {
    display: block;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    overflow: hidden;
  }
  &::before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: transparent;
    border: none;
  }
  &.online::before {
    background-color: #4dd966;
    border: 2px solid #fff;
  }
  &.away::before {
    background-color: #fcaf17;
    border: 2px solid #fff;
  }
  &.hidden::before {
    background-color: var(--blue-clr3);
    border: 2px solid #fff;
  }
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .left-div .img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .left-div .name-address-div .name {
  color: var(--text-clr1);
  font-size: 1.125rem;
  font-weight: 500;
  margin: 0;
  line-height: normal;

  .comment-post-timming {
    position: relative;
    font-family: "Open Sans", sans-serif;
    color: var(--text-clr2);
    font-size: 0.75rem;
    font-weight: 400;
    text-align: end;
    padding-left: 8px;
  }

  .comment-post-timming::before {
    position: absolute;
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="%23D9D9D9"/></svg>');
    left: 0;
    top: 0;
  }
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .left-div .name-address-div .location {
  color: var(--text-clr9);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  text-decoration: none;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div {
  display: flex;
  align-items: center;
  gap: 15px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div span.time {
  font-family: "Open Sans", sans-serif;
  color: var(--text-clr9);
  font-size: 0.75rem;
  font-weight: 400;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div span.three-dot {
  position: relative;
  cursor: pointer;
  z-index: 9;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div {
  position: absolute;
  top: 0;
  right: 0;
  padding-right: 10px;
  opacity: 0;
  z-index: -1;
  visibility: hidden;
  transition: all 0.5s ease-in-out;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div {
  min-width: 210px;
  border-radius: 8px;
  border: 1px solid var(--gray-clr7);
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div a {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
  padding: 7px 12px;
  color: var(--text-clr4);
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 5px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div a:hover {
  background: var(--blue-clr8);
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .top-heading-div .right-div span.three-dot:hover .dropdown-main-div {
  visibility: visible;
  opacity: 1;
  z-index: unset;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div {
  margin-top: 10px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div .img-div {
  position: relative;
  width: 100%;
  background: var(--gray-clr4);
  border-radius: 5px;
  overflow: hidden;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div .img-div img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  object-fit: contain;
  background-color: #333;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div div.post-text {
  color: var(--text-clr1);
  font-size: 1rem;
  font-weight: 400;
  margin: 10px 0 8px;
  word-break: break-word;
  padding-inline: 15px;
}

.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div div.post-text ul {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  padding-left: 35px !important;
  padding-right: 15px !important;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div div.post-text li {
  margin-left: 35px !important;
  color: #4c5152 !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  word-break: break-all;
  padding-right: 15px !important;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div div.post-text ul li {
  margin-left: unset !important;
  color: #4c5152 !important;
  font-size: 0.875rem !important;
  font-weight: 400 !important;
  word-break: break-all;
  padding-right: unset !important;
}

.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div div.post-text.post-text-limit {
  overflow: visible;
  -webkit-line-clamp: unset;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div div.post-text span.post-tag {
  color: var(--blue-clr1);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
a.user-name {
  color: var(--blue-clr1);
  font-size: 0.875rem;
  font-weight: 500;
  margin: 0;
  text-decoration: none;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div .view-more-btn {
  color: var(--blue-clr1);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
  box-shadow: none;
  background: none;
  border: none;
  margin-top: 5px;
  margin-bottom: 20px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div .all-comments-btn {
  position: relative;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
  display: block;
  margin-left: auto;
  color: #2c2c2c;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div .all-comments-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #2c2c2c;
  left: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-post-image-text-div .all-comments-btn:hover::before {
  content: "";
  width: 20%;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  margin: 15px 0 0 0;
  padding-inline: 15px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .post-btn-left {
  display: flex;
  align-items: center;
  gap: 0px;
  border: 1px solid var(--blue-clr8);
  border-radius: 50px;
  overflow: hidden;

  &:last-child {
    border: none;
  }
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .post-btn-right {
  display: flex;
  align-items: center;
  gap: 0px;
  border: 1px solid var(--blue-clr8);
  border-radius: 50px;
  overflow: hidden;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .reply-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-left: 5px;
  color: #2c2c2c;
  font-size: 10.125rem;
  text-decoration: none;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .comment-like,
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .echo-post,
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .comment-count,
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .reply-btn,
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .share-btn {
  border-right: 1px solid var(--blue-clr8);
  width: fit-content;
  text-align: center;
  padding: 6px 10px;
  color: var(--text-clr1);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1px;
  white-space: nowrap;
  min-width: 76px;
  cursor: pointer !important;

  &:hover {
    background: var(--gray-clr5);
    color: #747474;
  }
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .saved-btn {
  display: none;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .comment-like.love-react.active svg path {
  fill: var(--pink-clr);
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .comment-like.echo-post.active svg path {
  fill: #1973d0;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-top-react-reply-time-div .timming {
  color: #9da1ac;
  font-size: 1rem;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .full-line {
  border-top: 1px solid #d3d3d3;
  margin: 20px 0 20px 0;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div {
  max-height: calc(100vh - 300px);
  overflow-y: auto;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div::-webkit-scrollbar {
  width: 0;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .hidden-style {
  position: absolute;
  overflow: hidden;
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div {
  padding-inline: 15px;
  margin: 20px 0 0 15px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .comments-div {
  position: relative;
  padding: 0px 8px 0px 30px;
  border-radius: 5px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .comments-div .commenter-img-div {
  position: absolute;
  width: 32px;
  height: 32px;
  overflow: hidden;
  border-radius: 50%;
  left: -15px;
  top: 0;
}
.commenter-img-div a {
  display: block;
  width: 100%;
  height: 100%;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .comments-div .commenter-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .comments-div .commenter-comment {
  color: #2c2c2c;
  font-size: 0.9375rem;
  font-weight: 400;
  margin: 0;
}
.commenter-comment a.user-name {
  color: #1973d0;
}
.comment-text {
  font-size: 1rem;
  margin-top: 4px;
  word-break: break-word;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .comments-div .commenter-comment .name {
  font-weight: 500;
  margin-right: 5px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .comments-div .commenter-comment .timming {
  position: relative;
  font-family: "Open Sans", sans-serif;
  color: var(--text-clr2);
  font-size: 0.75rem;
  font-weight: 400;
  text-align: end;
  padding-left: 5px;
}

.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .comments-div .commenter-comment .timming::before {
  position: absolute;
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="%23D9D9D9"/></svg>');
  left: -3px;
  top: -3px;
}

.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .canvas-react-reply-time-div {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 0;
  padding-inline: 0;
  margin-top: 15px;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .canvas-react-reply-time-div .reply-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #2c2c2c;
  font-size: 0.9375rem;
  text-decoration: none;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .canvas-react-reply-time-div .comment-like {
  display: flex;
  align-items: center;
  gap: 1px;
  color: #2c2c2c;
  font-size: 0.9375rem;
  cursor: pointer;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .canvas-react-reply-time-div .comment-like.love-react.active {
  color: var(--pink-clr);
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .canvas-react-reply-time-div .comment-like.love-react.active svg path {
  fill: var(--pink-clr);
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div .canvas-react-reply-time-div .timming {
  color: #9da1ac;
  font-size: 1rem;
}
.all-comments-offcanvas .commented-post-main-div .post-main-div .canvas-all-comment-div .comments-each-div:first-child {
  margin-top: 0;
}
.all-comments-offcanvas .commented-post-main-div .see-all-comment-btn {
  position: relative;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
  display: block;
  margin: 15px 0 0 68px;
  color: #9da1ac;
  font-size: 0.875rem;
  padding: 0;
}
.all-comments-offcanvas .commented-post-main-div .see-all-comment-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #9da1ac;
  left: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}
.all-comments-offcanvas .commented-post-main-div .see-all-comment-btn:hover::before {
  content: "";
  width: 20%;
}
.all-comments-offcanvas .offanvas-footer-div {
  background: #fff;
  border-top: 1px solid var(--blue-clr8);
  padding: 12px 12px;
}
.all-comments-offcanvas .offanvas-footer-div .leave-reply-btn {
  border-radius: 50px;
  border: none;
  background: var(--gradient-btn-clr1);
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 600;
  padding: 15px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  outline: none;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div {
  border-radius: 5px;
  background: #fff;
  border: 1px solid #ddd;
  padding: 12px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .img-div {
  position: relative;
  width: 32px;
  height: 32px;

  border-radius: 50%;
  overflow: hidden;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .img-div div {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .img-div div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .img-div label {
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  background: #72bf44;
  border-radius: 50%;
  bottom: 2px;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .reply-input-area {
  color: #797979;
  font-size: 0.875rem;
  font-weight: 400;
  width: 100%;
  max-height: 36px;
  overflow-y: auto;
  width: 100%;
  margin: 0;
  word-break: break-word;
  box-shadow: none;
  outline: none;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .reply-all-btns {
  display: flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  padding: 0;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .reply-all-btns .icon-camera-div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .reply-all-btns .icon-camera-div button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  outline: none;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .reply-all-btns .icon-camera-div button:hover {
  background: var(--gray-clr5);
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .reply-all-btns .icon-camera-div label {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.all-comments-offcanvas .offanvas-footer-div .offanvas-footer-inner-div .reply-all-btns .icon-camera-div label:hover {
  background: var(--gray-clr5);
}

.post-delete-modal .modal-content .modal-header {
  border: none;
  padding: 10px 20px;
}
.post-delete-modal .modal-content {
  border-radius: 16px;

  .modal-close-bnt svg path {
    fill: var(--text-clr2);
  }
}
.post-delete-modal .modal-content .modal-header .modal-close-bnt {
  margin-left: auto;
  outline: none;
  border: none;
  box-shadow: none;
  background: none;
  border-radius: 50%;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.post-delete-modal .modal-content .modal-header .modal-close-bnt:hover {
  background: var(--gray-clr5);
}
.post-delete-modal .modal-content .modal-body {
  padding: 0px 20px 20px 20px;
  background-image: url("../images/icons/delete-modal-bg.svg");
  background-size: 68px 68px;
  background-repeat: no-repeat;
  background-position: center top;
}
.post-delete-modal .modal-content .modal-body h5 {
  font-family: "Raleway", sans-serif;
  color: var(--text-clr1);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}
.post-delete-modal .modal-content .modal-body p {
  color: var(--modal-sub-para-clr);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 400;
  margin: 0;
  word-break: break-word;
}
.post-delete-modal .modal-content .modal-body p span {
  color: #000;
  font-weight: 600;
}

.modal-content .modal-body.no-bg-img {
  background-image: none;
}
.post-delete-modal .modal-content .modal-body input.modal-input {
  width: 100%;
  border-radius: 8px;
  border: 1px solid #d7e1f1;
  background: #fff;
  padding: 12px 30px;
  box-shadow: none;
  outline: none;
  color: #000;
  font-size: 0.9375rem;
  font-weight: 500;
}
.post-delete-modal .modal-content .modal-body input.modal-input::placeholder {
  color: #aeb7db;
  font-size: 0.9375rem;
  font-weight: 400;
}
.post-delete-modal .modal-content .delete-modal-btns {
  margin-top: 35px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.post-delete-modal .modal-content .delete-modal-btns .cancel-btn {
  width: 100%;
  border-radius: 50px;
  background: var(--blue-clr9);
  color: var(--text-clr3);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  box-shadow: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 9px 10px;
}
.post-delete-modal .modal-content .delete-modal-btns .delete-btn,
.post-delete-modal .modal-content .delete-modal-btns .yes-back-btn {
  width: 100%;
  border-radius: 50px;
  background: var(--gradient-btn-clr1);
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  box-shadow: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 9px 10px;
}
.common-noty-div {
  position: fixed;
  bottom: 150px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  visibility: hidden;
  max-width: calc(100% - 50px);
  width: 100%;
  z-index: 1;
  bottom: 150px;
}
.common-noty-div .common-noty-inner-div {
  max-width: 100%;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  background: #6d868f;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.25);
  padding: 8px 20px;
  color: var(--text-white);
  font-size: 0.875rem;
  font-weight: 400;
  margin-inline: auto;
}
.common-noty-div .common-noty-inner-div .one,
.common-noty-div .common-noty-inner-div .two {
  display: none;
}
.common-noty-div .common-noty-inner-div .one.active,
.common-noty-div .common-noty-inner-div .two.active {
  display: inline-block;
}
.common-noty-div.show {
  visibility: visible;
  animation-iteration-count: 1;
  animation:
    fadein 0.5s,
    fadeout 1s 5s;
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }
  to {
    bottom: 150px;
    opacity: 1;
  }
}
@keyframes fadeout {
  from {
    bottom: 150px;
    opacity: 1;
  }
  to {
    bottom: 0;
    opacity: 0;
  }
}

.common-chat-notification {
  position: fixed;
  right: 20px;
  bottom: 130px;
  width: 88px;
  height: 88px;
}
.common-chat-notification .img-div {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.common-chat-notification .img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.common-chat-notification .close-btn {
  position: absolute;
  background: #797979;
  width: 21px;
  height: 21px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 0;
  right: 0;
  top: 0;
  border: none;
}
.common-chat-notification .close-btn:hover {
  background: #474747;
}
.common-chat-notification .no-of-msg {
  position: absolute;
  background: var(--pink-clr);
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  left: 0;
  bottom: 0;
  margin: 0;
  color: var(--text-white);
  font-size: 0.75rem;
  font-weight: 400;
}

.search-input {
  border-radius: 5px;
  border: 1px solid var(--blue-clr8);
  background: #fff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
  padding-left: 40px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  flex: 1;
  font-size: 1.0625rem;
  border-right: 0;
}
.search-input.extra {
  border-right: 1px solid;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.search-input::placeholder {
  color: #9da1ac;
  font-family: "Museo Sans Rounded 400";
  font-size: 1rem;
}
.search-input-wrapper {
  position: relative;
  margin-bottom: 20px;
  display: flex;
}
.search-input-wrapper svg.search-icon {
  width: 20px;
  position: absolute;
  top: 50%;
  left: 0.85rem;
  transform: translateY(-50%);
  z-index: 15;
}
.search-go-btn {
  font-family: "Open Sans", sans-serif;
  font-weight: normal;
  font-size: 0.875rem;
  line-height: 18px;
  color: var(--text-white);
  background: linear-gradient(270deg, #e0871e 0%, #c53168 100%);
  border-color: transparent;
  padding: 14px 25px 14px 25px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  border-left: 0;
}
.regions-main-div .head-area {
  color: var(--text-clr1) !important;
  font-size: 1.125rem !important;
  font-weight: 600 !important;
  margin: 30px 0 15px 0;
  width: 100%;
}
.regions-main-div .head-area span {
  border-radius: 8px;
  color: var(--text-clr1);
  background-color: var(--blue-clr8);
  font-size: 0.75rem;
  font-weight: 400;
  padding: 1px 8px;
  margin-left: 8px;
}

.regions-main-div .all-selection-div {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.regions-main-div .all-selection-div button {
  position: relative;
  display: inline-flex;
  padding: 5px 10px 5px 20px;
  align-items: center;
  gap: 10px;
  border-radius: 8px;
  background: var(--light-blue-bg3);
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 400;
  border: none;
  box-shadow: none;
  outline: none;
  background-image: url("../images/icons/plus-icon-white.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.regions-main-div .all-selection-div button.dropdown-toggle::after {
  content: none;
}
.regions-main-div .all-selection-div button.clicked {
  background: var(--blue-clr1);
  color: var(--text-white);
  background-image: url("../images/icons/plus-icon-white.svg");
  background-repeat: no-repeat;
  background-position: 10px center;
}
.regions-main-div .all-selection-div .regions-dropdown {
  background: transparent;
  border: 0;
  left: 0 !important;
  top: 100% !important;
  transform: translateX(0) !important;
}
.regions-main-div .all-selection-div .regions-dropdown .regions-dropdown-inner {
  position: relative;
  max-width: 148px;
  width: 100%;
  border-radius: 5px;
  background: #fff;
  filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
}
.regions-main-div .all-selection-div .regions-dropdown .regions-dropdown-inner::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="22" viewBox="0 0 33 22" fill="none"><path d="M3.37512 21.0439L30.1353 20.7926C32.7055 20.7684 33.9628 17.4099 32.1288 15.4674L18.6385 1.17889C17.501 -0.0258523 15.6735 -0.0104011 14.5566 1.2134L1.2868 15.7532C-0.51576 17.7283 0.80251 21.068 3.37512 21.0439Z" fill="white"/></svg>');
  position: absolute;
  left: 8px;
  top: -10px;
}
.regions-main-div .all-selection-div .regions-dropdown .regions-dropdown-inner a {
  position: relative;
  display: block;
  font-size: 0.875rem;
  line-height: 18px;
  text-align: left;
  text-decoration: none;
  color: var(--text-clr3) !important;
  font-size: 0.8125rem;
  font-weight: 400;
  cursor: pointer;
  padding: 10px 10px;
  z-index: 1;
  overflow: hidden;
}
.regions-main-div .all-selection-div .regions-dropdown .regions-dropdown-inner a:hover {
  background-color: var(--blue-clr8);
}
.regions-main-div .all-selection-div .regions-dropdown .regions-dropdown-inner a:last-child {
  margin-bottom: 0;
}
.region-see-all-btn {
  padding: 6px 25px 6px 15px !important;
  border: 1px solid var(--light-blue-bg3) !important;
  background: transparent !important;
  width: fit-content;
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  color: var(--light-blue-bg3) !important;
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: 15px;
  background-color: transparent;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M3.89201 4.44732L3.89099 4.44623L0.544038 0.864904C0.515611 0.824342 0.498023 0.769797 0.500176 0.710147C0.502526 0.645057 0.52778 0.589251 0.562359 0.552251C0.596066 0.516184 0.634439 0.501475 0.667463 0.50011C0.697157 0.498883 0.730873 0.508049 0.762567 0.533176L3.63489 3.60306L4 3.99328L4.36511 3.60306L7.23743 0.533176C7.26913 0.508049 7.30284 0.498883 7.33254 0.50011C7.36556 0.501475 7.40393 0.516184 7.43764 0.552251C7.47222 0.589253 7.49747 0.645059 7.49982 0.710147C7.50198 0.769796 7.48439 0.824342 7.45596 0.864904L4.10901 4.44623L4.10799 4.44732C4.07343 4.48452 4.03395 4.49921 4 4.49997C3.96605 4.49921 3.92657 4.48452 3.89201 4.44732Z" fill="%239AABBC" stroke="%2396A2CD"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 10px) center !important;
  transition: all 0.25s ease-in-out;

  &.more-btn-active {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><g clip-path="url(%23clip0_12375_5)"><path d="M3.89201 0.552682L3.89099 0.553772L0.54404 4.1351C0.515613 4.17566 0.498025 4.23021 0.500178 4.28986C0.502528 4.35495 0.527782 4.41075 0.562361 4.44775C0.596068 4.48382 0.634441 4.49853 0.667465 4.49989C0.697159 4.50112 0.730875 4.49195 0.762569 4.46683L3.63489 1.39694L4 1.00672L4.36511 1.39694L7.23743 4.46683C7.26913 4.49195 7.30284 4.50112 7.33254 4.49989C7.36556 4.49853 7.40393 4.48382 7.43764 4.44775C7.47222 4.41075 7.49747 4.35494 7.49982 4.28986C7.50198 4.23021 7.48439 4.17566 7.45596 4.1351L4.10901 0.553772L4.10799 0.552682C4.07343 0.515482 4.03395 0.500792 4 0.500032C3.96605 0.500792 3.92657 0.515482 3.89201 0.552682Z" fill="%239AABBC" stroke="%2396A2CD"/></g><defs><clipPath id="clip0_12375_5"><rect width="8" height="5" fill="white" transform="matrix(1 0 0 -1 0 5)"/></clipPath></defs></svg>') !important;
  }
}
.edit-pro-top-radio-div {
  display: flex;
  align-items: center;
  justify-content: end;
  gap: 12px;
  margin-bottom: 1rem;
}
.edit-pro-top-radio-div .tooltip-btn {
  position: relative;
  border: 0;
  padding: 0;
}
.edit-pro-top-radio-div .tooltip-btn .tooltip-noty {
  display: block;
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(calc(-50% - 30px));
  width: 300px;
  border-radius: 8px;
  background: #fff;
  padding: 12px;
  box-shadow: 0px 6px 15px -2px rgba(27, 33, 44, 0.08);
  color: #000;
  text-align: center;
  font-size: 0.75rem;
  font-weight: 400;
  display: none;
}
.edit-pro-top-radio-div .tooltip-btn .tooltip-noty::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="8" viewBox="0 0 16 8" fill="none"><path d="M16 0H0L6.58579 6.58579C7.36684 7.36684 8.63317 7.36684 9.41421 6.58579L16 0Z" fill="white"/></svg>');
  position: absolute;
  bottom: -5px;
  left: 50%;
  transform: translateX(calc(-50% + 30px));
}
.edit-pro-top-radio-div .tooltip-btn:hover .tooltip-noty {
  display: block;
}
.edit-pro-top-radio-div p {
  color: var(--text-clr1);
  font-size: 0.8125rem;
  font-weight: 400;
  margin: 0;
}
.edit-pro-top-radio-div label.label {
  color: var(--text-clr3);
  font-size: 0.9375rem;
  font-weight: 400;
}
.edit-pro-top-radio-div .edit-profile-radio {
  display: flex;
  align-items: center;
}
.edit-pro-top-radio-div .edit-profile-radio input[type="checkbox"].switch {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 45px;
  height: 25px;
  background: #536e8a;
  border-radius: 3em;
  position: relative;
  cursor: pointer;
  outline: none;
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.edit-pro-top-radio-div .edit-profile-radio input[type="checkbox"].switch:checked {
  background: var(--blue-clr1);
}
.edit-pro-top-radio-div .edit-profile-radio input[type="checkbox"].switch:after {
  position: absolute;
  content: "";
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background-color: var(--text-white);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.16)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
  left: 3px;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transition: all 0.2s ease-in-out;
  transition: all 0.2s ease-in-out;
}
.edit-pro-top-radio-div .edit-profile-radio input[type="checkbox"].switch:checked:after {
  left: calc(100% - 22px);
  background-color: var(--text-white);
  border: 0.5px solid rgba(0, 0, 0, 0.1);
  filter: drop-shadow(0px 3px 1px rgba(0, 0, 0, 0.1)) drop-shadow(0px 1px 1px rgba(0, 0, 0, 0.16)) drop-shadow(0px 3px 8px rgba(0, 0, 0, 0.15));
}

.edit-profile-form .all-inputs-div .form-control:focus {
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
}

.all-inputs-div {
  margin-bottom: 16px;
}
.profile-heading {
  color: var(--text-clr2);
  font-size: 0.875rem;
  text-transform: uppercase;
  margin-bottom: 8px;
  font-family: "Museo Sans Rounded 500";
}
.all-inputs-div label.input-label {
  color: var(--text-clr1);
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  margin-bottom: 5px;
}
.all-inputs-div .each-inputs-div {
  position: relative;
}
.all-inputs-div .each-inputs-div input.form-control {
  padding-left: 1.5rem;
  padding-right: 4.5rem;
}
.all-inputs-div .each-inputs-div .tags-input-wrapper {
  min-height: 50px;
  border: 1px solid #1c1f20;
  border-radius: 5px;
  color: var(--text-clr4);
  font-size: 0.8125rem;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.all-inputs-div .each-inputs-div .tags-input-wrapper input {
  border: none;
  background: transparent;
  outline: none;
}
.all-inputs-div .each-inputs-div .tags-input-wrapper .tag {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: #6d868f;
  padding: 2px 12px;
  color: var(--text-white);
  font-size: 0.8125rem;
  font-weight: 400;
}
.all-inputs-div .each-inputs-div .tags-input-wrapper .tag a {
  display: inline-block;
  cursor: pointer;
  font-size: 1.25rem;
  opacity: 0.5;
}
.all-inputs-div .each-inputs-div .tags-input-wrapper .tag a:hover {
  opacity: 1;
}
.all-inputs-div .each-inputs-div textarea.form-control {
  border-radius: 8px;
  border: 1px solid #93b5c0;
  resize: none;
  width: 100%;
  height: 216px;
  padding-left: 1.5rem;
  padding-right: 4.5rem;
}
.all-inputs-div .each-inputs-div textarea.form-control ~ label {
  top: 16px;
  transform: none;
}
.all-inputs-div .each-inputs-div .form-control:disabled {
  background-color: transparent;
}
.all-inputs-div .each-inputs-div .non-editable:disabled {
  border-radius: 5px;
  background: var(--blue-clr8);
  color: var(--text-clr9);
  border-color: transparent;
  pointer-events: none;
}
.all-inputs-div .each-inputs-div .non-editable {
  border-radius: 5px;
  background: var(--blue-clr8);
  color: var(--text-clr9);
  border-color: transparent;
  pointer-events: none;
}
.all-inputs-div .each-inputs-div label {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--blue-clr11);
  font-size: 0.8125rem;
  font-weight: 400;
}
.all-inputs-div .each-inputs-div label.input-save-btn {
  border-radius: 5px;
  background: var(--lita-pink, #d80b8c);
  color: var(--text-white);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 2px 12px;
}

button.save-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  width: 100%;
  border-radius: 5px;
  background: linear-gradient(135deg, #ebaa28 0%, #c93279 47.4%, #c52680 100%);
  color: var(--text-white);
  padding: 10px;
  margin-top: 20px;
  border: none;
}
button.save-btn:hover {
  background: linear-gradient(235deg, #ebaa28 0%, #c93279 47.4%, #c52680 100%);
}

.noty_div__card {
  display: flex;
  align-items: center;
  margin-bottom: 0.85rem;
  padding: 8px 10px;
  border-radius: 5px;
}
.noty_div__card:hover {
  background-color: var(--gray-clr5);
}
.noty_div__card .img-div {
  margin-right: 12px;
}
.noty_div__card .img-div div {
  display: block;
  width: 60px;
  height: 60px;

  border-radius: 50%;
}
.noty_div__card .img-div div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.noty_div__card__details {
  margin-top: 0.5rem;
}
.noty_div__card__msg {
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom: 0.375rem;
}
.noty_div__card__user__place {
  color: var(--text-clr9);
  font-size: 0.875rem;
  line-height: 1;
  margin-bottom: 0;
}
.noty_div__card__btn {
  color: #9da1ac;
  border: 2px solid #9da1ac;
  font-size: 1rem;
  border-radius: 5px;
  margin-left: auto;
  padding: 0.3rem 1rem;
  font-size: 0.8125rem;
  font-family: "Museo Sans Rounded 400";
}
.noty_div__card__btn.following {
  background-color: #9da1ac;
  color: var(--text-white);
  font-family: "Museo Sans Rounded 500";
}
.noty_div__card__btn:hover,
.noty_div__card__btn:focus,
.noty_div__card__btn:active {
  color: var(--text-white);
  border: 2px solid #1c1f20;
  background-color: var(--text-clr4);
}
.noty_div__card .double-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  justify-content: end;
  margin-left: auto;
}
.noty_div__card .double-btn button {
  position: relative;
  width: 100%;
}
.noty_div__card .double-btn button .unfollow-dropdown {
  position: absolute;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding: 8px;
  z-index: 999999;
  right: -2px;
  top: -2px;
  min-width: 182px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.noty_div__card .double-btn button .unfollow-dropdown .unfollow-inner-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: var(--gray-clr5);
  padding: 7px 10px;
  color: #2c2c2c;
  text-align: center;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.75rem;
}
.noty_div__card .double-btn button .unfollow-dropdown .unfollow-inner-dropdown .cross-btn {
  background: var(--pink-clr);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.noty_div__card .double-btn button .unfollow-dropdown .unfollow-inner-dropdown .cross-btn:hover {
  background: #850456;
}
.noty_div__card .double-btn button:hover .unfollow-dropdown {
  opacity: 1;
  visibility: visible;
}
.noty_div__card .double-btn .message-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-btn-clr);
  color: white;
  border: none;
}
.noty_div__card .double-btn .message-btn:hover {
  background: linear-gradient(90deg, #ffb000 100%, #ff7a00 0%);
}
.noty_div .noty-details h3 {
  font-size: 0.875rem;
  margin-bottom: 0;
  line-height: 18px;
  color: #202020;
}
.noty_div .noty-details p {
  font-size: 0.75rem;
  font-weight: 400;
  color: #0f739a;
  margin: 0;
}
.noty_div .noty__btn {
  color: #000000;
  font-size: 0.875rem;
  font-weight: 400;
  background: none;
  border: none;
  padding: 0;
  margin: 0 10px;
}

.new-bg {
  border-radius: 5px;
  border: 1px solid #eef4f6;
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  padding: 5px;
}

.common-tabs {
  border: none;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 20px;
}
.common-tabs li {
  width: 100%;
  text-align: center;
}
.common-tabs li button {
  width: 100%;
  background: none;
  border: none !important;
  text-align: center;
  color: #93b5c1;
  text-align: center;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.875rem;
  border-bottom: 4px solid #93b5c1 !important;
  padding: 0.25rem 0.5rem;
}
.common-tabs li button.active {
  border-bottom: 4px solid #2a3d44 !important;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.875rem;
  color: #2a3d44 !important;
  background-color: transparent !important;
}
.common-tabs li button:hover {
  color: currentColor;
  opacity: 0.8;
}

.msg_div {
  margin-top: 3.5rem;
}
.msg_div__card {
  display: flex;
  align-items: center;
  margin-bottom: 0.85rem;
  padding: 10px;
  border-radius: 5px;
  background-color: var(--gray-clr5);
}
.msg_div__card:hover {
  background-color: #e4edf0;
}
.msg_div__card .img-div {
  position: relative;
  margin-right: 12px;
}
.msg_div__card .img-div .reply-icon {
  position: absolute;
  background: var(--blue-clr1);
  width: 14px;
  height: 14px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  right: 2px;
  bottom: 2px;
}
.msg_div__card .img-div div {
  display: block;
  width: 60px;
  height: 60px;

  border-radius: 50%;
  overflow: hidden;
}
.msg_div__card .img-div div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.msg_div__card__details {
  margin-top: 0.5rem;
}
.msg_div__card__msg {
  font-size: 1.125rem;
  line-height: 1;
  margin-bottom: 0.375rem;
}
.msg_div__card__user__place {
  color: var(--text-clr9);
  font-size: 0.875rem;
  line-height: 1;
  margin-bottom: 0;
}
.msg_div__card .messages-view-and-archive-btn {
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.msg_div__card .messages-view-and-archive-btn .msg__btn {
  display: block;
  color: #000000;
  font-size: 0.875rem;
  font-weight: 400;
  background: none;
  border: none;
  padding: 0;
  margin-left: 15px;
  background-color: none;
}
.msg_div__card .messages-view-and-archive-btn .msg__btn:hover,
.msg_div__card .messages-view-and-archive-btn .msg__btn:focus,
.msg_div__card .messages-view-and-archive-btn .msg__btn:active {
  background: none;
  outline: none;
  box-shadow: none;
}
.msg_div__card .messages-view-and-archive-btn span.three-dot {
  display: block;
  position: relative;
  cursor: pointer;
}
.msg_div__card .messages-view-and-archive-btn span.three-dot .unfollow-dropdown {
  position: absolute;
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding: 8px;
  z-index: 999999;
  right: 15px;
  top: -2px;
  min-width: 182px;
  width: 100%;
  opacity: 0;
  visibility: hidden;
}
.msg_div__card .messages-view-and-archive-btn span.three-dot .unfollow-dropdown .unfollow-inner-dropdown {
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  background: var(--gray-clr5);
  padding: 7px 10px;
  color: #2c2c2c;
  text-align: center;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.75rem;
}
.msg_div__card .messages-view-and-archive-btn span.three-dot .unfollow-dropdown .unfollow-inner-dropdown .cross-btn {
  background: var(--pink-clr);
  width: 16px;
  height: 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.msg_div__card .messages-view-and-archive-btn span.three-dot .unfollow-dropdown .unfollow-inner-dropdown .cross-btn:hover {
  background: #850456;
}
.msg_div__card .messages-view-and-archive-btn span.three-dot .unfollow-dropdown.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}
.msg_div__card .messages-view-and-archive-btn span.three-dot .unfollow-dropdown.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
.msg_div__card.archieved {
  opacity: 0.5;
}
.msg_div .msg-details h3.name-div {
  font-family: "Raleway", sans-serif;
  font-size: 0.875rem;
  margin-bottom: 0;
  line-height: 18px;
  color: #202020;
}
.msg_div .msg-details div.msg {
  color: #000;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
  display: -webkit-box;
  max-width: 100%;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg_div p.time {
  font-family: "Open Sans", sans-serif;
  font-size: 0.75rem;
  font-weight: 400;
  color: #0f739a;
  margin: 0;
}

.show-hide-archived-msg-btn {
  color: #9da1ac;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.875rem;
  font-weight: 400;
  border: none;
  border-bottom: 1px solid #9da1ac;
  box-shadow: none;
  outline: none;
  background: none;
  text-align: center;
  margin: 20px auto 0 auto;
  display: flex;
  justify-content: center;
  padding: 0;
  margin-bottom: 35px;
}

.no-message-div {
  text-align: center;
  padding-block: 50px;
}
.no-message-div .para1 {
  color: var(--text-clr4);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin: 30px 0 5px 0;
}
.no-message-div .para2 {
  color: var(--text-clr9);
  text-align: center;
  font-size: 0.875rem;
  font-weight: 400;
}
.no-message-div button {
  margin-top: 20px;
  border-radius: 5px;
  background: var(--gradient-btn-clr);
  border: none;
  padding-inline: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-inline: auto;
  color: var(--text-white);
  font-family: "Museo Sans Rounded 400";
  font-size: 0.8125rem;
}
.no-message-div button:hover {
  background: linear-gradient(90deg, #ffb000 0%, #ff7a00 100%);
}

.messages-main-div .no-message-div {
  display: none;
}
.messages-main-div.no-message .no-message-div {
  display: block;
}
.messages-main-div.no-message .common-tabs {
  display: none;
}
.messages-main-div.no-message .tab-content {
  display: none;
}

.tag-images-main-div .row .col-4 {
  margin-bottom: 10px;
  padding-inline: 4px;
}
.tag-images-main-div .tag-each-images-div {
  border-radius: 4px;
  border: 2px solid var(--white-ffffff, #fff);
  background: var(--gray-clr4);
  width: 100%;
  height: 120px;
  box-shadow: 0px 0px 7px 0px rgba(0, 0, 0, 0.25);
}
.tag-images-main-div .tag-each-images-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tag-images-main-div .tag-each-images-div .search-inner-video-box {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
  background-color: #222;
  overflow: hidden;
}
.tag-images-main-div .tag-each-images-div .search-inner-video-box::before {
  content: url('data:image/svg+xml,<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg"><g filter="url(%23filter0_b_5616_9)"><rect width="30" height="30" rx="15" fill="black" fill-opacity="0.5"/><g clip-path="url(%23clip0_5616_9)"><path fill-rule="evenodd" clip-rule="evenodd" d="M16.5571 5.11836C16.4181 5.0966 16.2762 5.10243 16.1394 5.13552C16.0027 5.16862 15.8738 5.22832 15.7601 5.31123C15.6464 5.39414 15.5502 5.49863 15.4769 5.61873C15.4035 5.73884 15.3546 5.8722 15.3329 6.01122C15.3111 6.15023 15.3169 6.29217 15.35 6.42893C15.3831 6.56569 15.4428 6.69459 15.5257 6.80828C15.6086 6.92196 15.7131 7.01821 15.8332 7.09151C15.9533 7.16481 16.0867 7.21374 16.2257 7.2355C18.1747 7.54933 19.9341 8.58503 21.1544 10.1367C22.3747 11.6884 22.9665 13.6424 22.8121 15.6104C22.6576 17.5784 21.7683 19.4163 20.3209 20.7586C18.8735 22.1009 16.974 22.8495 15 22.8555C13.4246 22.8558 11.8854 22.3826 10.5822 21.4974C9.27897 20.6122 8.27183 19.3558 7.69143 17.8912C7.64268 17.7563 7.56735 17.6326 7.46989 17.5274C7.37243 17.4221 7.25484 17.3375 7.12408 17.2786C6.99332 17.2196 6.85205 17.1876 6.70866 17.1842C6.56527 17.1809 6.42267 17.2064 6.28931 17.2592C6.15596 17.312 6.03456 17.391 5.93232 17.4916C5.83008 17.5922 5.74908 17.7123 5.69412 17.8448C5.63917 17.9773 5.61137 18.1195 5.61238 18.2629C5.61339 18.4063 5.64318 18.5481 5.7 18.6798C6.55824 20.8418 8.14316 22.6372 10.1821 23.7569C12.221 24.8767 14.5864 25.2508 16.8714 24.8149C19.1563 24.3791 21.218 23.1605 22.7015 21.3689C24.1851 19.5772 24.9979 17.3245 25 14.9984C24.9999 12.6159 24.1494 10.3117 22.6017 8.50047C21.0539 6.68924 18.9105 5.48992 16.5571 5.11836ZM13.8057 5.94265C13.8409 6.07904 13.8489 6.22103 13.8292 6.36051C13.8094 6.49998 13.7624 6.6342 13.6908 6.75547C13.6191 6.87675 13.5242 6.98271 13.4116 7.06728C13.299 7.15186 13.1707 7.21339 13.0343 7.24836C12.6764 7.34045 12.3255 7.45789 11.9843 7.59979C11.8544 7.65382 11.7151 7.68173 11.5744 7.68193C11.4337 7.68213 11.2943 7.65462 11.1643 7.60096C11.0342 7.5473 10.916 7.46855 10.8163 7.3692C10.7167 7.26985 10.6376 7.15185 10.5836 7.02193C10.5295 6.89202 10.5016 6.75273 10.5014 6.61203C10.5012 6.47133 10.5287 6.33197 10.5824 6.2019C10.6361 6.07183 10.7148 5.9536 10.8142 5.85397C10.9135 5.75434 11.0315 5.67525 11.1614 5.62122C11.5929 5.44122 12.04 5.29122 12.5014 5.17265C12.6377 5.13765 12.7796 5.12984 12.9189 5.14967C13.0582 5.1695 13.1922 5.21657 13.3134 5.28821C13.4345 5.35984 13.5403 5.45463 13.6248 5.56717C13.7093 5.6797 13.7707 5.80635 13.8057 5.94265ZM9.55 7.70408C9.74764 7.90798 9.85625 8.18201 9.85196 8.46595C9.84768 8.74989 9.73085 9.02051 9.52714 9.21836C8.99596 9.73608 8.53922 10.325 8.17 10.9684C8.10209 11.094 8.00974 11.2048 7.89838 11.2943C7.78701 11.3837 7.65889 11.45 7.52154 11.4892C7.3842 11.5284 7.24039 11.5398 7.09859 11.5226C6.95679 11.5054 6.81986 11.4601 6.69584 11.3892C6.57183 11.3183 6.46323 11.2234 6.37645 11.1099C6.28966 10.9965 6.22643 10.8668 6.19048 10.7286C6.15453 10.5904 6.14659 10.4463 6.16711 10.305C6.18764 10.1636 6.23622 10.0278 6.31 9.9055C6.77787 9.08667 7.35882 8.33788 8.03571 7.68122C8.23962 7.48358 8.51365 7.37497 8.79759 7.37925C9.08153 7.38354 9.35215 7.50037 9.55 7.70408ZM6.30857 12.5412C6.58986 12.5809 6.84389 12.7306 7.0148 12.9575C7.18571 13.1844 7.25952 13.4699 7.22 13.7512C7.16847 14.118 7.1427 14.488 7.14286 14.8584C7.14286 15.1425 7.02997 15.415 6.82904 15.616C6.62811 15.8169 6.35559 15.9298 6.07143 15.9298C5.78727 15.9298 5.51475 15.8169 5.31381 15.616C5.11288 15.415 5 15.1425 5 14.8584C5 14.3826 5.03286 13.9126 5.09857 13.4526C5.13823 13.1714 5.28797 12.9173 5.51487 12.7464C5.74178 12.5755 6.02726 12.5017 6.30857 12.5412ZM11.4286 17.6869V12.3098C11.4287 12.0664 11.491 11.827 11.6096 11.6145C11.7282 11.4019 11.8992 11.2232 12.1063 11.0952C12.3134 10.9673 12.5497 10.8944 12.7929 10.8834C13.036 10.8725 13.278 10.9238 13.4957 11.0326L18.8729 13.7212C19.1098 13.84 19.3091 14.0223 19.4483 14.2479C19.5876 14.4734 19.6613 14.7333 19.6613 14.9984C19.6613 15.2634 19.5876 15.5233 19.4483 15.7488C19.3091 15.9744 19.1098 16.1567 18.8729 16.2755L13.4957 18.9641C13.278 19.0729 13.036 19.1242 12.7929 19.1133C12.5497 19.1023 12.3134 19.0294 12.1063 18.9015C11.8992 18.7736 11.7282 18.5948 11.6096 18.3823C11.491 18.1697 11.4287 17.9303 11.4286 17.6869Z" fill="white"/></g></g><defs><filter id="filter0_b_5616_9" x="-4" y="-4" width="38" height="38" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feGaussianBlur in="BackgroundImageFix" stdDeviation="2"/><feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_5616_9"/><feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_5616_9" result="shape"/></filter><clipPath id="clip0_5616_9"><rect width="20" height="20" fill="white" transform="translate(5 5)"/></clipPath></defs></svg>');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tag-images-main-div .tag-each-images-div .search-inner-video-box .video-hi {
  width: 100%;
  object-fit: contain;
}
.all-chats-main-div {
  padding-inline: 10px;
  margin-bottom: 10px;
  height: 100%;
  overflow-y: auto;
}
.all-chats-main-div .others-messages {
  position: relative;
  display: flex;
  align-items: start;
  gap: 12px;
  margin-top: 8px;
}
.all-chats-main-div .others-messages .img-div {
  width: 36px;
  height: 36px;

  border-radius: 50%;
  overflow: hidden;
}
.all-chats-main-div .others-messages .img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.all-chats-main-div .others-messages .msg-div {
  border-radius: 20px;
  background: #f2f5f5;
  padding: 10px 20px;
  color: #2c2c2c;
  font-size: 0.875rem;
  font-weight: 400;
  max-width: calc(100% - 20px);
  width: fit-content;

  a {
    color: #002aff;
    text-decoration: underline !important;
  }
}
.all-chats-main-div .others-messages .text {
  padding: 0;
  margin: 0;
}
.all-chats-main-div .others-messages .time {
  font-family: "Open Sans", sans-serif;
  margin-block: 5px 20px;
  font-size: 0.625rem;
  color: #555;
  text-align: left;
}
.all-chats-main-div .own-messages {
  position: relative;
  display: flex;
  justify-content: end;
  margin-top: 8px;
}
.all-chats-main-div .own-messages .msg-div {
  border-radius: 20px;
  background: #e3f3fb;
  padding: 10px 20px;
  color: #2c2c2c;
  font-size: 0.875rem;
  font-weight: 400;
  max-width: calc(100% - 20px);
  width: fit-content;
  margin-left: auto;
  text-align: right;

  a {
    color: #fff;
    text-decoration: underline !important;
  }
}
.all-chats-main-div .own-messages .text {
  padding: 0;
  margin: 0;
  word-break: break-word;
}
.all-chats-main-div .own-messages .time {
  font-family: "Open Sans", sans-serif;
  margin-block: 5px 20px;
  font-size: 0.625rem;
  color: #555;
  margin-left: auto;
  text-align: right;
}

.chat-input-full-div {
  position: sticky;
  bottom: 108px;
  background: #f8fdff;
  padding: 10px 15px 30px 15px;
}
.chat-input-full-div .message-input-div {
  border-radius: 5px;
  border: 1px solid #dde5e9;
  background: #fff;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 15px;
}
.chat-input-full-div .message-input-div .left-div {
  border-radius: 5px;
  background: var(--gray-clr5);
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
.chat-input-full-div .message-input-div .left-div .user-img-with-status {
  position: relative;
  width: 32px;
  height: 32px;
}
.chat-input-full-div .message-input-div .left-div .user-img-with-status .inner-div {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
}
.chat-input-full-div .message-input-div .left-div .user-img-with-status .inner-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.chat-input-full-div .message-input-div .left-div .user-img-with-status label {
  position: absolute;
  display: block;
  width: 7px;
  height: 7px;
  background: #72bf44;
  border-radius: 50%;
  bottom: 2px;
}
.chat-input-full-div .message-input-div .left-div input {
  height: 100%;
  width: 100%;
  border: none;
  box-shadow: none;
  outline: none;
  background: none;
  color: #797979;
  font-size: 0.875rem;
  font-weight: 400;
}
.chat-input-full-div .message-input-div .left-div .icon-camera-div {
  display: flex;
  align-items: center;
  gap: 5px;
  /* margin-right: 20px; */
}
.chat-input-full-div .message-input-div .left-div .icon-camera-div button {
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  border: none;
}
.chat-input-full-div .message-input-div .left-div .icon-camera-div button:hover {
  background: var(--gray-clr5);
}
.chat-input-full-div .message-input-div .left-div .icon-camera-div label {
  display: flex;
  width: 24px;
  height: 24px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
}
.chat-input-full-div .message-input-div .left-div .icon-camera-div label:hover {
  background: var(--gray-clr5);
}
.chat-input-full-div .message-input-div .right-div button.msg-send-btn {
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--pink-clr);
  line-height: normal;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.875rem;
  cursor: pointer;
  padding: 2px 5px;
}
.chat-input-full-div .message-input-div .right-div button.msg-send-btn:hover {
  background: rgba(216, 11, 141, 0.1490196078);
}

.select-user-modal .modal-content .modal-header {
  position: relative;
  border-bottom: 1px solid #e1e1e1;
  padding: 10px 12px;
}
.select-user-modal .modal-content .modal-header p {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  color: #59544a;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}
.select-user-modal .modal-content .modal-header .modal-close-bnt {
  margin-left: auto;
  outline: none;
  border: none;
  box-shadow: none;
  background: none;
  border-radius: 50%;
  padding: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.select-user-modal .modal-content .modal-header .modal-close-bnt:hover {
  background: var(--gray-clr5);
}
.select-user-modal .modal-content .modal-body {
  padding: 0;
}
.select-user-modal .modal-content .modal-body .top-selected-users-main-div {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 12px 25px;
  border-bottom: 1px solid #e1e1e1;
}
.select-user-modal .modal-content .modal-body .top-selected-users-main-div P {
  color: #59544a;
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}
.select-user-modal .modal-content .modal-body .top-selected-users-main-div .all-tags-div {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 5px;
}
.select-user-modal .modal-content .modal-body .top-selected-users-main-div .all-tags-div span {
  border-radius: 4px;
  background: #e0e0e0;
  padding: 4px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.select-user-modal .modal-content .modal-body .top-selected-users-main-div .all-tags-div span img {
  cursor: pointer;
}
.select-user-modal .modal-content .modal-body .heading {
  padding: 15px 25px;
  color: #59544a;
  font-size: 0.75rem;
  font-weight: 700;
  margin: 0;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div {
  margin-top: 15px;
  max-height: 276px;
  overflow-y: auto;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 25px;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div:hover {
  background: #efefef;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .left-div {
  display: flex;
  align-items: center;
  gap: 15px;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div {
  width: 36px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.name {
  color: #2c2c2c;
  font-size: 1rem;
  margin: 0;
  font-weight: 500;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.address {
  color: #9da1ac;
  font-size: 0.8125rem;
  font-weight: 400;
  margin: 0;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background-color: #dcdcdc;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label .check {
  display: inline-block;
  transform: rotate(45deg);
  height: 15px;
  width: 9px;
  border-bottom: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  margin-bottom: 4px;
  border-radius: 0.2px;
}
.select-user-modal .modal-content .modal-body .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label input:checked ~ label {
  background: linear-gradient(270deg, #e0871e 0%, #c53168 100%);
}
.select-user-modal .modal-content .modal-body .send-msg-btn {
  padding: 15px;
  margin-top: 5px;
}
.select-user-modal .modal-content .modal-body .send-msg-btn button {
  border-radius: 8px;
  background: var(--gradient, linear-gradient(270deg, #e0871e 0%, #c53168 100%));
  height: 50px;
  border: none;
  box-shadow: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-white);
  font-family: "Museo Sans Rounded 400";
  font-size: 1rem;
  font-weight: 400;
}
.select-user-modal .modal-content .modal-body .send-msg-btn button:hover {
  background: linear-gradient(270deg, #c53168 0%, #e0871e 100%);
}
.heading {
  font-size: 1.125rem;
}

/* Semantic Dropdowns */
.ui.dropdown {
  width: 100%;
  background: #fff !important;
  border: 1px solid var(--input-border-clr) !important;
  border-radius: 15px !important;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 15px;
  height: auto;
  padding: 1rem !important;
}
.ui.selection.dropdown {
  min-height: calc(1.5em + 1.75rem + 2px) !important;
  line-height: 1.3rem !important;
}
.ui.selection.dropdown.filled {
  border: 1px solid #2a3d44;
}
.ui.dropdown.visible {
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
}
.ui.selection.dropdown.filled svg path {
  fill: #2a3d44;
}
.ui.floating.dropdown.filled svg path {
  fill: #2a3d44;
}
.ui.selection.dropdown .text {
  color: #93b5c1;
  margin: 0;
  margin-left: 0px;
  margin-left: 0.85rem;
  position: relative;
  top: 2px;
  cursor: pointer;
}

.ui.selection.dropdown .menu {
  margin-top: -2px !important;
  border-radius: 0 0 8px 8px !important;
  border: 1px solid var(--input-border-clr) !important;
  border-top: 1px solid #e4edf4 !important;
  box-shadow: none !important;
  overflow: hidden;
}
.ui.floating .menu {
  width: 100%;
}
.ui.floating.dropdown > .menu .search-div {
  display: flex;
  align-items: center;
  padding: 12px 15px;
}
.search-div input {
  height: 40px;
  border: 0;
  background-color: #f5f7f9;
  border-radius: 5px;
  padding-inline: 5%;
  outline: none;
  border: none;
}
.location-edit-btn {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 3px;
  background: #d7e1f1;
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--blue-clr11);
  font-size: 0.6875rem;
  font-weight: 400;
  padding: 2px 5px;
}
.location-dropdown.active .location-edit-btn {
  display: none;
}
.profile-loacation.disabled .location-edit-btn {
  display: none;
}
.ui.dropdown.dropdown .menu > .input {
  width: 100%;
  min-width: unset;
}
.ui.dropdown .scrolling.menu {
  border: none !important;
}
.ui.dropdown .scrolling.menu .item-head {
  padding: 0.625rem 1.14285714rem !important;
  color: var(--blue-clr7) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}

.ui.dropdown > .visible.menu .scrolling.menu {
  box-shadow: none !important;
  border: none !important;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.ui.dropdown > .visible.menu .scrolling.menu::-webkit-scrollbar {
  display: none;
  width: 0;
}
.ui.selection.dropdown.filled .text {
  color: var(--text-clr1);
  cursor: pointer;
}
/* Semantic Dropdowns Ends */

.mention-user-name {
  background: #e0f6ff;
  border-radius: 5px;
  padding: 2px 6px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: #2384a7;
  font-size: 1.125rem;
  font-weight: 600;
  cursor: default;
}
.anchor_comment_name {
  display: flex;
  align-items: center;
  padding: 0.5rem 3rem 0.5rem 1rem;
}
.anchor_comment_name img {
  margin-right: 8px;
}

.mention-hashtag {
  background: #e0f6ff;
  border-radius: 5px;
  padding: 1px 4px;
  display: inline-block;
  cursor: pointer;
  text-decoration: none;
  color: #0f739a;
  cursor: default;
}

.anchor_hashtag_name {
  display: flex;
  align-items: center;
  padding: 0.5rem 3rem 0.5rem 1rem;
}

.prev-next-div .btn {
  --bs-btn-color: var(--text-white);
  --bs-btn-bg: #9da1ac;
  --bs-btn-border-color: #9da1ac;
  --bs-btn-hover-color: var(--text-white);
  --bs-btn-hover-bg: #7d808b;
  --bs-btn-hover-border-color: #7d808b;
  --bs-btn-focus-shadow-rgb: 11, 172, 204;
  --bs-btn-active-color: var(--text-white);
  --bs-btn-active-bg: #3dd5f3;
  --bs-btn-active-border-color: #25cff2;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #000;
  --bs-btn-disabled-bg: #0dcaf0;
  --bs-btn-disabled-border-color: #0dcaf0;
  color: var(--bs-btn-color);
  background-color: var(--bs-btn-bg);
  border-color: var(--bs-btn-border-color);
  padding: 0.85rem 1.5rem;
  line-height: 1;
}
.prev-next-div .btn:hover {
  color: var(--bs-btn-hover-color);
  background-color: var(--bs-btn-hover-bg);
  border-color: var(--bs-btn-hover-border-color);
}
.prev-next-div .btn:active {
  color: var(--bs-btn-active-color);
  background-color: var(--bs-btn-active-bg);
  border-color: var(--bs-btn-active-border-color);
  box-shadow: var(--bs-btn-active-shadow);
}
.prev-next-div .btn.disabled,
.prev-next-div .btn:disabled,
.prev-next-div fieldset:disabled .btn {
  color: var(--text-white);
  pointer-events: none;
  background-color: #bbbec4;
  border-color: #bbbec4;
  opacity: var(--bs-btn-disabled-opacity);
}
.grey-border-btn {
  border: 1px solid #ccc !important;
  margin-left: 0.75rem !important;
  padding: 0.375rem 0.675rem !important;

  &:hover {
    background: #f3f3f3;
  }
}

.input-dropdown-user-list {
  z-index: 9999999999;
  background: transparent;
  height: fit-content;
  position: absolute !important;
  width: calc(100% - 30px);
  left: 50%;
  transform: translateX(-50%);
  bottom: 100px;
}
.names-dropdown {
  border-radius: 8px;
  background: #fff;
  box-shadow: 0px 0px 25px 0px rgba(0, 0, 0, 0.1);
  padding: 0.3rem 0.4rem;
  max-height: 168px;
  overflow-y: auto;
  display: none;
}
.names-dropdown.show {
  display: block;
}
.input-dropdown-user-list .dropdown-item {
  font-family: "Open Sans", san-serif;
  font-weight: normal;
  font-size: 0.875rem;
  color: var(--text-clr1);
  display: flex;
  align-items: center;
  padding: 0.2rem 0.4rem;
  border-radius: 5px;
}
.dropdown-item.no-name-found {
  text-align: center;
  font-size: 0.875rem;
  font-weight: 500;
  padding: 0.9375rem;
  white-space: unset;
  display: flex;
  align-items: center;
  justify-content: center;
}
.input-dropdown-user-list .dropdown-item img {
  width: 25px;
  height: 25px;
  object-fit: cover;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.no-post-area {
  margin-block: 1.5rem;
  text-align: center;
}

.no-post-area .para-1 {
  color: var(--text-clr1);
  font-size: 1.5rem;
  margin-bottom: 15px;
  margin-top: 0px;
  width: 90%;
  margin-inline: auto;
  font-weight: 600;
}

.no-post-area .para-2 {
  width: 80%;
  margin-inline: auto;
  color: var(--text-clr2);
  font-size: 1.125rem;
  font-weight: 400;
  margin-bottom: 30px;
}

.no-post-area .create-btn {
  background: none;
  background-color: var(--blue-clr1);
  padding: 0.85rem 2rem;
  border-radius: 100px;
  color: #fff !important;
  font-size: 0.875rem;
  min-width: 250px;
  font-weight: 600;
  border: none;
}
.no-post-area .create-btn:hover {
  background-color: var(--blue-clr1);
}
.password-div .eye-btn {
  position: absolute;
  top: 18px;
  right: 15px;
  cursor: pointer;
}
/* for subcomments inside comments modal  */
.subcomments-replies {
  margin: 20px 0 0 0 !important;
}
#ui-datepicker-div .ui-datepicker-next.ui-corner-all::before {
  content: url('data:image/svg+xml,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1516_1082)"><path d="M6 1L1 6L6 11" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1516_1082"><rect width="7" height="12" fill="white"/></clipPath></defs></svg>');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(180deg);
}
#ui-datepicker-div .ui-datepicker-prev.ui-corner-all::after {
  content: url('data:image/svg+xml,<svg width="7" height="12" viewBox="0 0 7 12" fill="none" xmlns="http://www.w3.org/2000/svg"><g clip-path="url(%23clip0_1516_1082)"><path d="M6 1L1 6L6 11" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></g><defs><clipPath id="clip0_1516_1082"><rect width="7" height="12" fill="white"/></clipPath></defs></svg>');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Auth CSS */
.auth-para {
  color: var(--text-clr11);
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}
.ui.floating.dropdown > .menu {
  margin-top: -2px !important;
  border-radius: 0 0 16px 15px !important;
  border: 1px solid var(--input-border-clr);
  border-top: 1px solid #e4edf4;
  left: -1px;
  width: calc(100% + 2.5px) !important;
  box-shadow: none !important;
  overflow: hidden;
}

.ui.fluid.dropdown.filled > .menu,
.ui.location-dropdown.filled > .menu {
  border: 1px solid #2a3d44;
  border-top: 1px solid #e4edf4;
}

.ui-datepicker-year {
  display: unset;
}
.loading-section {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
}
/* Navbar start */
nav {
  position: sticky;
  top: 0;
  padding: 10px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-bottom: 1px solid var(--blue-clr8);
  background: #fff;
  box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.05);
  transition: all 0.3s;
  z-index: 1045;
}
nav.nav-up {
  top: -72px;
}
nav .profile-btn-div {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
}

nav .profile-image-div {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 46px;
  height: 46px;
  background-color: #d9d9d9;
  border-radius: 50%;
  position: relative;
}

nav .profile-image-div {
  .user-status-drodown {
    position: absolute;
    right: -25px;
    top: 45px;
    display: none;
    width: unset !important;
    height: unset !important;
    overflow: unset !important;
    ul {
      width: 150px !important;
      height: auto;
      border-radius: 4px;
      border: 1px solid var(--gray-clr7);
      background: #fff;
      box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.1);
      padding: 0;
      margin-top: 10px;
      list-style: none;
      overflow: hidden;
    }
    li {
      position: relative;
      background-color: #fff;
      padding: 5px 15px;
      font-size: 0.9375rem;
      font-weight: 400;
      color: #1c1f20;
      cursor: pointer;

      &::after {
        content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='10' viewBox='0 0 15 10' fill='none'%3E%3Cpath d='M5.46824 9.93882C5.25997 9.93882 5.0517 9.86112 4.89238 9.70627L0.943892 5.85508C0.625799 5.54482 0.625799 5.04253 0.943892 4.73229C1.26198 4.42203 1.77754 4.42203 2.09505 4.73229L5.46827 8.02239L13.1549 0.525172C13.473 0.214917 13.988 0.214917 14.306 0.525172C14.6241 0.835427 14.6241 1.33772 14.306 1.64796L6.04358 9.70627C5.88482 9.86168 5.67651 9.93882 5.46824 9.93882Z' fill='%238F97A7'/%3E%3C/svg%3E");
        position: absolute;
        right: 15px;
        top: 6px;
        display: none;
      }

      &:hover {
        background-color: #f8f8f8;
      }
    }
  }

  &:hover .user-status-drodown {
    display: block;
  }
  .status {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    z-index: 2;
  }
  .status.online {
    background-color: #4dd966;
    border: 2px solid #fff;
    & ~ .user-status-drodown ul li.online {
      background-color: #f8f8f8;
    }
    & ~ .user-status-drodown ul li.online::after {
      display: block;
    }
  }
  .status.away {
    background-color: #fcaf17;
    border: 2px solid #fff;

    & ~ .user-status-drodown ul li.away {
      background-color: #f8f8f8;
    }

    & ~ .user-status-drodown ul li.away::after {
      display: block;
    }
  }
  .status.hidden {
    background-color: var(--light-blue-bg3);
    border: 2px solid #fff;

    & ~ .user-status-drodown ul li.hidden {
      background-color: #f8f8f8;
    }

    & ~ .user-status-drodown ul li.hidden::after {
      display: block;
    }
  }
}

nav .profile-btn-div .profile-image-div a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
nav .profile-btn-div .profile-image-div .profile-img,
nav .profile-btn-div .profile-image-div .user-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
nav .profile-btn-div button,
nav .profile-btn-div a.btn {
  border: none;
  box-shadow: none;
  outline: none;
}
nav .profile-btn-div button .nav-noty-count,
nav .profile-btn-div a.btn .nav-noty-count {
  position: absolute;
  top: 8px;
  right: 2px;
  padding: 0px 5px;
  border-radius: 10px;
  border: 1px solid var(--pink-clr);
  background-color: var(--pink-clr);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-white);
  font-size: 0.6875rem;
  font-weight: 400;
  display: none;
}
/* Navbar end */
span.pro-input-label {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 2px;
  border-radius: 50px;
  border: 1px solid #e4ebed;
  background: #fff;
  padding: 1px 12px;
  top: -12px;
  left: 12px;
  color: var(--text-clr3);
  font-size: 0.8125rem;
  font-weight: 600;
}
span.pro-input-label .required {
  color: var(--pink-clr);
}
.ui.dropdown.profile-loacation,
.inputs__box.profile-birthdate input,
.interests-div.profile-interest {
  position: relative;
  border-radius: 8px;
  border: 1px solid #93b5c0 !important;
  padding-left: 15px;
  min-height: 50px;
  padding-top: 1rem;
}
.profile-loacation .locked-location-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  color: var(--blue-clr11);
  font-size: 0.8125rem;
  font-weight: 400;
  display: none;
}

.profile-loacation.disabled .locked-location-icon {
  display: block;
}
.inputs__box.profile-birthdate input:focus {
  border: 1px solid #93b5c0 !important;
  box-shadow: none;
}
.ui.floating.dropdown.profile-loacation > .menu.dropdown-menu-div {
  border: 1px solid #93b5c0 !important;
  left: -1px;
  width: calc(100% + 1px) !important;
  z-index: 1045;
}
.ui.floating.dropdown.profile-loacation.filled {
  border: 1px solid #93b5c0 !important;
}
.ui.floating.dropdown.profile-loacation.disabled {
  background: var(--blue-clr8) !important;
  color: var(--text-clr2) !important;
  border: none !important;
  pointer-events: none;
  opacity: 1;
}
.ui.floating.dropdown.profile-loacation.disabled > .text {
  color: var(--text-clr9);
  font-weight: 600;
  font-size: 1rem;
}

.common-blue-clr-button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid var(--blue-clr1);
  background-color: var(--blue-clr1);
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  color: var(--text-white2);
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  padding: 15px;
  border-radius: 50px;
  max-width: calc(100% - 30px);
  left: 50%;
  transform: translateX(-50%);
}
.common-blue-clr-button:hover {
  background-color: transparent;
  color: var(--blue-clr1);
}
.delete-account-btn {
  text-decoration: none;
  width: 100%;
  border-radius: 8px;
  background: #f8f0f5;
  padding: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  color: #9d146a;
  font-size: 0.875rem;
  font-weight: 400;
  margin-top: 1rem;
}
.delete-account-btn:hover {
  background: #f9dfef;
}
.inpost-headings {
  font-family: "Raleway", sans-serif;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-clr1);
  font-size: 1.125rem;
  font-weight: 500;
  margin-block: 0 1rem;
}
/* Carefull noty start */
.carefull-noty-div {
  position: fixed;
  top: 0px;
  max-width: 415px;
  width: 100%;
  padding: 10px;
  z-index: 9999;
}
.carefull-noty-div > div {
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 15px;
  width: 100%;
  border-radius: 5px;
  background: #ffe5dd;
  padding: 10px;
  color: #db724e;
  font-size: 0.8125rem;
  font-weight: 600;
}
.carefull-noty-div.green-noty > div {
  background: #ddedd3;
  color: #72bf44;
}
.carefull-noty-div.green-noty > div svg path {
  fill: #72bf44;
}
.carefull-noty-div > div button.close-btn {
  border: none;
  box-shadow: none;
  outline: none;
  background-color: transparent;
  padding: 0;
  transition: all 0.25s ease-in-out;
}
.carefull-noty-div > div button.close-btn:hover {
  transform: rotate(-90deg);
}
/* Carefull noty end */

/* Find near you start */
.finding-people-div .loading-div-area {
  width: 20%;
  margin-inline: auto;
}
.finding-people-div .top-pattern {
  top: 0;
}
.finding-people-div .bottom-pattern {
  bottom: 0;
}
.finding-people-div .top-pattern,
.finding-people-div .bottom-pattern {
  position: absolute;
  width: 100%;
  user-select: none;
  z-index: 1;
}
.finding-people-div .find-others-div {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 100vh;
  padding: 20px 15px;
  text-align: center;
  z-index: 2;
}
.finding-people-div .find-others-div h1 {
  color: var(--text-clr4);
  font-size: 1.5rem;
  font-weight: 600;
  margin: 15px 20px;
}
.finding-people-div .find-others-div p {
  color: var(--text-clr11);
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  max-width: 260px;
  width: 100%;
  margin: 0 auto;
}
.build-following-heading {
  position: relative;
  z-index: 1;
  margin-top: 35px;
}
/* .build-following-heading::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="96" height="96" viewBox="0 0 96 96" fill="none"><g clip-path="url(%23clip0_6602_16872)"><path d="M47.8336 12.1987C48.8765 12.1987 49.7219 11.3533 49.7219 10.3104V1.88831C49.7219 0.845438 48.8765 0 47.8336 0C46.7907 0 45.9453 0.845438 45.9453 1.88831V10.3104C45.9455 11.3533 46.7909 12.1987 47.8336 12.1987Z" fill="%23E9EEF3"/><path d="M93.9903 64.8747L90.6545 61.5482C89.4678 60.3631 87.8863 59.7102 86.201 59.7102C85.1235 59.7102 84.089 59.9783 83.1723 60.4806L76.8862 54.202L77.1924 53.8962C79.7426 51.3409 79.7417 47.1887 77.1922 44.6421C76.2812 43.7294 75.1443 43.1207 73.9052 42.8646C74.0758 42.2757 74.1656 41.6588 74.1656 41.0275C74.1656 39.2734 73.4842 37.6287 72.2508 36.4004C71.3396 35.4876 70.203 34.879 68.9638 34.6229C69.1344 34.0339 69.2242 33.4172 69.2242 32.7857C69.2242 31.0315 68.5428 29.3869 67.3074 28.1567C66.3744 27.2249 65.2275 26.635 64.0232 26.3839C64.6674 24.1626 64.1169 21.6634 62.3694 19.9129C60.9148 18.4645 58.941 17.842 57.0388 18.0437L44.5822 15.6859C42.6825 15.3256 40.31 15.0872 38.8125 16.4532C38.718 16.5394 38.6216 16.6386 38.5267 16.7491C36.2047 15.9027 33.4965 16.4067 31.637 18.2641C30.4035 19.4961 29.724 21.1401 29.724 22.8932C29.724 23.5247 29.8134 24.1414 29.9838 24.7306C28.746 24.9865 27.6107 25.5944 26.7026 26.5041C25.4666 27.7351 24.785 29.3772 24.7837 31.1282C24.7832 31.7612 24.873 32.38 25.0443 32.9706C23.8059 33.226 22.6698 33.8327 21.759 34.7425C20.523 35.9772 19.8423 37.6221 19.8423 39.3743C19.8423 40.7164 20.243 41.995 20.9855 43.075C20.048 43.3928 19.1893 43.9217 18.4702 44.6401C15.9183 47.1887 15.9174 51.3411 18.4719 53.9001L18.777 54.2039L12.4901 60.4793C10.1537 59.3792 7.27497 59.7914 5.34691 61.717L2.00903 65.0455C0.821781 66.2312 0.168156 67.813 0.167969 69.4992C0.167969 71.1856 0.821781 72.7675 2.00903 73.9534L6.17472 78.1141C6.91253 78.8511 8.10822 78.8504 8.84509 78.1126C9.58216 77.3747 9.58141 76.1791 8.84359 75.4422L4.67791 71.2816C4.20503 70.8092 3.94459 70.1762 3.94459 69.4994C3.94459 68.8227 4.20503 68.1899 4.67678 67.7187L8.01484 64.39C8.84884 63.5569 10.1253 63.4328 11.0947 64.0124C11.163 64.1149 11.2419 64.2124 11.3323 64.303C11.4941 64.4652 11.6788 64.5895 11.8749 64.6804L31.0173 83.7947C31.1083 83.9929 31.2332 84.1795 31.3961 84.3426C31.5547 84.5014 31.7357 84.6242 31.9277 84.7146C32.3325 85.1723 32.5562 85.7569 32.5562 86.3806C32.5562 87.0574 32.2957 87.6902 31.8228 88.1626L28.4882 91.4933C27.5028 92.4743 25.9001 92.4741 24.9178 91.4963L20.7521 87.3302C20.0147 86.5928 18.8192 86.5928 18.0817 87.3302C17.3443 88.0677 17.3443 89.2632 18.0817 90.0006L22.2504 94.1697C23.4774 95.3916 25.0888 96.0023 26.7009 96.0023C28.3134 96.0023 29.9267 95.3907 31.1552 94.1676L34.4919 90.8348C35.6792 89.6489 36.333 88.0671 36.333 86.3806C36.333 85.177 35.9983 84.0276 35.376 83.0365L42.4515 75.9696C42.459 75.9619 42.4665 75.9542 42.4742 75.9466C43.2843 75.109 45.5405 75.2657 47.7225 75.4172C49.2727 75.5251 51.0011 75.6449 52.6897 75.4502L60.438 83.1893C59.936 84.1045 59.6681 85.1376 59.6681 86.2135C59.6681 87.8982 60.3219 89.479 61.5092 90.6649L64.8461 93.9977C66.0326 95.1829 67.6142 95.8358 69.2994 95.8358C70.9845 95.8358 72.566 95.1831 73.7527 93.9977L93.9917 73.7834C95.1789 72.5976 95.8327 71.0159 95.8327 69.3295C95.8325 67.6433 95.1787 66.0616 93.9903 64.8747ZM43.8791 19.3966L52.0704 20.947L47.1675 25.8481C46.409 25.4836 45.3695 24.8037 44.2292 23.7128C42.6682 22.2196 41.5517 20.4955 41.45 19.4202C41.4498 19.4196 41.4498 19.4191 41.4498 19.4185C41.4498 19.4183 41.4497 19.4181 41.4497 19.4179C41.4423 19.3407 41.4405 19.279 41.4414 19.2319C41.6883 19.1719 42.3442 19.1054 43.8791 19.3966ZM34.3057 20.9361C35.2623 19.9804 36.7485 19.8702 37.8294 20.6022C38.442 23.1706 40.6329 25.4984 41.6186 26.4415C42.3491 27.1405 44.693 29.2362 47.0589 29.8122C47.379 30.271 47.5532 30.8179 47.5532 31.3951C47.5532 32.1385 47.2672 32.8336 46.7462 33.3541C46.2266 33.8746 45.5304 34.1611 44.7857 34.1611C44.0407 34.1611 43.3445 33.8746 42.8225 33.3516L42.8223 33.3514L42.8214 33.3505L34.3055 24.85C33.7863 24.3316 33.5004 23.6365 33.5004 22.8932C33.5006 22.1498 33.7865 21.4547 34.3057 20.9361ZM29.3715 29.1762C29.891 28.6559 30.5865 28.3692 31.3301 28.3692C32.0747 28.3692 32.7723 28.6564 33.2953 29.1788L40.1525 36.0224C41.2323 37.1039 41.2323 38.8637 40.1563 39.9415C39.6339 40.4618 38.9353 40.7483 38.1892 40.7483C37.4432 40.7483 36.7445 40.4618 36.2244 39.9437L36.2242 39.9436L31.022 34.7425C31.014 34.7344 31.0052 34.7269 30.9969 34.7187L29.3694 33.0919C28.8472 32.5703 28.5598 31.8739 28.5603 31.1311C28.5611 30.3906 28.8476 29.6978 29.3715 29.1762ZM24.4278 37.4146C24.9478 36.8954 25.6447 36.6094 26.3906 36.6094C27.1303 36.6094 27.8212 36.8912 28.3389 37.4014L33.557 42.6171C34.0773 43.1354 34.364 43.8297 34.364 44.5722C34.364 45.3145 34.0773 46.0088 33.555 46.5291C33.0352 47.0481 32.339 47.3341 31.5945 47.3341C30.8488 47.3341 30.1503 47.0474 29.6298 46.5291L27.7382 44.6397C27.7378 44.6391 27.7372 44.6387 27.7368 44.6384L24.428 41.3335C23.9064 40.8124 23.6192 40.1164 23.6192 39.3739C23.6192 38.6316 23.9064 37.9354 24.4278 37.4146ZM21.1391 47.3119C21.6613 46.7903 22.3592 46.5031 23.1041 46.5031C23.8488 46.5031 24.5465 46.7901 25.0685 47.3114L26.9628 49.2034C27.4833 49.7217 27.7698 50.416 27.7698 51.1585C27.7698 51.901 27.4832 52.5951 26.9589 53.1175C26.4393 53.6378 25.7432 53.9245 24.9984 53.9245C24.2535 53.9245 23.5573 53.638 23.034 53.1137L22.7968 52.8775C22.7936 52.8743 22.7912 52.8709 22.7882 52.8679C22.7846 52.8646 22.7808 52.8616 22.7773 52.8582L21.141 51.2282C20.0612 50.1462 20.0602 48.3895 21.1391 47.3119ZM59.6205 68.7728C58.8834 68.0348 57.6877 68.0342 56.9501 68.7711L55.2701 70.4491C53.6737 72.0454 50.7812 71.8444 47.9838 71.6504C44.9462 71.4392 41.805 71.2214 39.7723 73.3082L32.817 80.2551L15.4239 62.8876L21.5792 56.7434C22.5965 57.367 23.7705 57.7013 24.9988 57.7013C26.7536 57.7013 28.3991 57.0211 29.6282 55.7897C30.8655 54.5575 31.547 52.9129 31.547 51.1587C31.547 51.1424 31.5459 51.1262 31.5459 51.1099C31.5622 51.1101 31.5785 51.1111 31.5948 51.1111C33.3472 51.1111 34.9914 50.4329 36.2222 49.2036C37.4595 47.9714 38.141 46.3266 38.141 44.5726C38.141 44.5562 38.1399 44.5401 38.1399 44.5238C38.1564 44.5238 38.1729 44.5249 38.1896 44.5249C39.9414 44.5249 41.5865 43.8475 42.8255 42.6136C44.1118 41.3252 44.748 39.6291 44.7358 37.9366C44.7527 37.9367 44.7695 37.9377 44.7864 37.9377C46.5412 37.9375 48.1865 37.2574 49.4175 36.0242C50.651 34.7922 51.3305 33.1482 51.3305 31.3951C51.3305 30.169 50.9972 28.9969 50.3756 27.9816L55.7705 22.5889C56.1725 22.1886 56.6683 21.9374 57.1878 21.8337C57.2441 21.8277 57.2996 21.8187 57.3545 21.8078C58.1882 21.6929 59.0636 21.9501 59.7011 22.585C60.7809 23.6667 60.7809 25.4266 59.705 26.5043L58.062 28.1406C58.0565 28.1461 58.0507 28.1509 58.0453 28.1564L56.1528 30.0456C55.4148 30.7825 55.4141 31.9782 56.1512 32.716C56.8884 33.454 58.0839 33.4546 58.8215 32.7177L60.4712 31.0703C60.4715 31.0699 60.4719 31.0696 60.4723 31.0692L60.7217 30.8207C61.8045 29.7479 63.5587 29.7501 64.6404 30.8303C65.1609 31.3486 65.4476 32.0429 65.4476 32.7854C65.4476 33.5277 65.1609 34.222 64.6363 34.7444L62.9838 36.4002C62.9837 36.4004 62.9835 36.4006 62.9833 36.4009L61.091 38.2855C60.3521 39.0214 60.3497 40.2171 61.0856 40.9559C61.8215 41.6948 63.017 41.6971 63.756 40.9613L65.6568 39.0681C66.1764 38.5476 66.8726 38.2611 67.6173 38.2611C68.3623 38.2611 69.0587 38.5476 69.582 39.0719C70.1025 39.5903 70.389 40.2846 70.389 41.0271C70.389 41.7694 70.1025 42.4637 69.579 42.985L66.2846 46.2807C65.5473 47.0183 65.5475 48.2138 66.285 48.9511C66.6538 49.3197 67.1368 49.5038 67.62 49.5038C68.1033 49.5038 68.5867 49.3193 68.9553 48.9505L70.5699 47.3354C70.5791 47.3266 70.589 47.3189 70.5982 47.3097C71.1178 46.7892 71.814 46.5027 72.5587 46.5027C73.3037 46.5027 73.9998 46.7892 74.5213 47.3116C75.6 48.3891 75.599 50.146 74.5213 51.2256L72.8797 52.8653C72.8792 52.8659 72.8784 52.8664 72.8778 52.867C72.8773 52.8676 72.8767 52.8683 72.8762 52.8689L70.2707 55.4712C69.5328 56.2082 69.5321 57.4039 70.269 58.1417C70.6378 58.5109 71.1215 58.6956 71.6051 58.6956C72.0879 58.6956 72.5709 58.5115 72.9395 58.1434L74.214 56.8705L80.3222 62.9716L62.9306 80.3419L56.6992 74.1181C57.1337 73.8387 57.5493 73.5102 57.9395 73.12L59.6186 71.443C60.3568 70.7063 60.3575 69.5106 59.6205 68.7728ZM91.3226 71.1113L71.0837 91.3257C70.6102 91.7986 69.9765 92.059 69.2992 92.059C68.622 92.059 67.9882 91.7986 67.5146 91.3255L64.1777 87.9927C63.7048 87.5206 63.4443 86.8887 63.4443 86.2135C63.4443 85.5385 63.7048 84.9066 64.1777 84.4343L84.4166 64.2199C84.8902 63.7469 85.5238 63.4864 86.2012 63.4864C86.8785 63.4864 87.5122 63.7469 87.987 64.2211L91.3228 67.5475C91.7957 68.0198 92.0561 68.6524 92.0561 69.3293C92.0559 70.0064 91.7955 70.6392 91.3226 71.1113Z" fill="%23E9EEF3"/><path d="M22.7595 10.6078C23.1281 10.9757 23.6107 11.1595 24.0934 11.1595C24.5771 11.1595 25.061 10.9746 25.4299 10.605C26.1665 9.86684 26.1654 8.67134 25.4272 7.93465L18.5464 1.06746C17.8084 0.330774 16.6127 0.331712 15.876 1.07009C15.1393 1.80827 15.1404 3.00377 15.8786 3.74046L22.7595 10.6078Z" fill="%23E9EEF3"/><path d="M71.5719 11.1594C72.0547 11.1594 72.5377 10.9753 72.9063 10.6072L79.7819 3.73983C80.5197 3.00295 80.5205 1.80727 79.7834 1.06945C79.0466 0.331641 77.851 0.330891 77.113 1.06795L70.2374 7.93533C69.4996 8.6722 69.4989 9.86789 70.2359 10.6057C70.6047 10.9749 71.0883 11.1594 71.5719 11.1594Z" fill="%23E9EEF3"/><path d="M11.78 81.2286C11.0489 81.9722 11.0591 83.1679 11.8029 83.899L11.8083 83.9042C12.1752 84.265 12.6517 84.4446 13.1279 84.4446C13.6167 84.4446 14.1056 84.2554 14.4759 83.8787C15.2069 83.1351 15.194 81.9368 14.4504 81.2057C13.7069 80.4746 12.5114 80.485 11.78 81.2286Z" fill="%23E9EEF3"/><path d="M64.2369 66.0514C64.5241 66.0514 64.8155 65.986 65.089 65.8482C66.0202 65.3785 66.3942 64.243 65.9247 63.3118C65.455 62.3807 64.3194 62.0065 63.3884 62.4762L63.3779 62.4814C62.4468 62.9511 62.078 64.084 62.5475 65.0151C62.879 65.6728 63.5457 66.0514 64.2369 66.0514Z" fill="%23E9EEF3"/></g><defs><clipPath id="clip0_6602_16872"><rect width="96" height="96" fill="white"/></clipPath></defs></svg>');
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
} */
.build-following-heading h1 {
  font-family: "Raleway", sans-serif;
  color: var(--text-clr1);
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}
.build-following-heading p {
  color: var(--text-clr11);
  text-align: center;
  font-size: 0.9375rem;
  font-weight: 400;
  margin-top: 10px;
  margin-bottom: 0;
  max-width: 330px;
  margin-inline: auto;

  span.count {
    color: var(--text-clr1);
    font-weight: 700;
  }

  span.text {
    color: var(--text-clr3);
  }
}
.search-input {
  position: sticky;
  top: 0;
  width: 100%;
  height: 50px;
  border: 1px solid var(--blue-clr8);
  color: var(--text-clr3);
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0 25px;
  border-radius: 8px;
  box-shadow: none;
  outline: none;
}
.search-input::placeholder {
  color: var(--text-clr9);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.5px;
}
.users-list-div {
  margin-top: 28px;
}
.users-list-div .user-list-card:last-child {
  margin-bottom: 100px !important;
}
.bottom-fixed-div {
  background: linear-gradient(180deg, rgba(250, 252, 253, 0) 0%, rgba(250, 252, 253, 0.65) 22.4%, rgba(250, 252, 253, 0.9) 68.5%, #fafcfd 100%);
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  max-width: 415px;
  width: 100%;
  padding: 50px 2.1875rem 20px 2.1875rem;
  margin-inline: auto;
  z-index: 1002;
}

.bottom-fixed-div .build-gradient-button {
  border: none;
  background: var(--gradient-btn-clr);
  color: var(--text-white);
}
.bottom-fixed-div .build-gradient-button:hover {
  border: none;
  background: linear-gradient(90deg, #ffb000 0%, #ff7a00 100%);
  color: var(--text-white);
}
.onboard-screen-div {
  background: linear-gradient(180deg, #c2d2f2 0%, #f8fdff 100%);
  overflow: hidden;
}
.onboard-screen-div .onboard-iphone {
  position: relative;
  width: calc(100% + 620px);
  left: -320px;
  margin-top: -139px;
  transform: rotate(0deg);
}
.onboad-content-div {
  position: relative;
  margin-top: -180px;
}
.onboard-head {
  font-family: "Raleway", sans-serif;
  color: var(--text-clr1);
  text-align: center;
  font-size: 24px;
  font-weight: 600;
  margin-bottom: 10px;
}
.onboard-para {
  color: var(--text-clr8);
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}
.onboard-edit-btn {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  border-radius: 50px;
  border: 2px solid var(--blue-clr5);
  padding: 15px 50px;
  color: var(--blue-clr5);
  text-align: center;
  font-size: 1rem;
  font-weight: 700;
  margin-inline: auto;
  margin-top: 35px;
}
.onboard-edit-btn:hover {
  background-color: #536e8a;
  color: var(--text-white);
}
.onboard-thankx-btn {
  display: block;
  text-decoration: none;
  text-align: center;
  color: var(--text-clr9);
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  margin-top: 30px;
  color: #536e8a;
}
/* Find near you end */
.edit-region-search-div {
  position: relative;
  .input-and-btn-div {
    display: flex;
    align-items: center;
    gap: 5px;
    border-radius: 16px;
    border: 1px solid var(--light-border-color-1, #f2f1f1);
    background: #fff;
    padding-right: 15px;

    input {
      border: none;
      outline: none;
      box-shadow: none;
      background: transparent;
      padding-left: 38px;
    }

    button {
      border-radius: 8px;
      background-color: var(--light-blue-bg2);
      padding: 4px 8px;
      color: #aeb7db;
      font-size: 0.75rem;
      font-weight: 400;
      white-space: nowrap;
      box-shadow: none;
      outline: none;
      border: none;

      &.region-btn-active {
        background-color: var(--blue-clr1);
        color: #fff;
      }
    }

    &::before {
      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_8042_623)"><path d="M15.4313 12.6085L12.7979 9.97506C13.2767 9.01746 13.5959 7.90025 13.5959 6.78304C13.5959 3.03242 10.5635 0 6.81283 0C3.06221 0 0.0297852 3.03242 0.0297852 6.78304C0.0297852 10.5337 3.06221 13.5661 6.81283 13.5661C7.93004 13.5661 9.04725 13.2469 10.0049 12.7681L12.6383 15.4015C13.4363 16.1995 14.6333 16.1995 15.4313 15.4015C16.1495 14.6035 16.1495 13.4065 15.4313 12.6085ZM6.81283 11.9701C3.94001 11.9701 1.6258 9.65586 1.6258 6.78304C1.6258 3.91022 3.94001 1.59601 6.81283 1.59601C9.68565 1.59601 11.9999 3.91022 11.9999 6.78304C11.9999 9.65586 9.68565 11.9701 6.81283 11.9701Z" fill="%239AABBC"/></g><defs><clipPath id="clip0_8042_623"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
      position: absolute;
      left: 15px;
      top: 15px;
    }
  }
}
.search-dropdown-lists {
  max-height: 275px;
  overflow-y: auto;
  display: none;
  width: 100%;
  border-radius: 16px;
  border: 1px solid var(--gray-clr7);
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);

  .region-seperator {
    font-family: "Raleway", sans-serif;
    color: #000;
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 5px 15px 10px 15px;
  }

  .eachLocationList {
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
  }
  .search-each-list {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 5px;
    padding: 6px 15px;

    &:hover {
      background-color: var(--light-blue-bg2);
    }

    .left {
      display: block;
      text-decoration: none;
      color: var(--text-clr1);
      font-size: 0.875rem;
      font-weight: 400;

      img {
        position: relative;
        top: -1px;
        margin-right: 5px;
      }

      span {
        color: var(--text-clr2) !important;
        font-size: 0.6875rem;
        font-weight: 400;
      }
    }
    .following-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 4px;
      border: 1px solid var(--blue-clr1);
      background: var(--blue-clr1);
      color: #fff;
      text-align: center;
      font-size: 0.625rem;
      font-weight: 500;
      max-width: 75px;
      width: 100%;
      height: 22.5px;
      padding: 3px 5px;
      white-space: nowrap;
    }
    .follow-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 5px;
      border-radius: 4px;
      border: var(--light-blue-bg3);
      background: var(--light-blue-bg3);
      color: #fff;
      text-align: center;
      font-size: 0.625rem;
      font-weight: 500;
      max-width: 75px;
      width: 100%;
      height: 22.5px;
      padding: 3px 5px;
      white-space: nowrap;
    }
  }

  #noResultsMessage {
    padding: 6px 15px;
    color: var(--blue-clr2);
    font-size: 0.875rem;
    font-weight: 500;
  }
}

.dropdown.show .search-dropdown-lists {
  display: block;
}

.dropdown-item {
  cursor: pointer;
}

/* New loader start */
.common-loading {
  align-items: center;
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 35px;
}

.common-loading span {
  animation: dot ease-in-out 1s infinite;
  background-color: #e1e9ec;
  display: inline-block;
  height: 8px;
  width: 8px;
  border-radius: 50%;
}

.common-loading span:nth-of-type(2) {
  animation-delay: 0.4s;
}

.common-loading span:nth-of-type(3) {
  animation-delay: 0.8s;
}

@keyframes dot {
  0% {
    background-color: #49627d;
  }

  50% {
    background-color: #96a2cd;
  }

  100% {
    background-color: #d7e1f1;
  }
}
/* New loader end */

/* Echo post modal start*/
.echopost-modal-head {
  width: 100%;
  color: #000000;
  font-size: 1.125rem;
  font-weight: 600;
  text-align: center;
}
.echo-post-modal-body .echo-post-div {
  border-radius: 8px;
  border: 1px solid var(--gray-clr7);
  background: #fff;
  padding: 10px;
  display: flex;
  gap: 15px;
}

.echo-post-modal-body .echo-post-div .left-part div {
  width: 90px;
  height: auto;
}
.echo-post-modal-body .echo-post-div .left-part img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.echo-post-modal-body .echo-post-div .right-part {
  width: 100%;
}
.echo-post-modal-body .echo-post-div .right-part div.post-text {
  color: var(--text-clr4);
  word-wrap: break-word;
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  margin: 0;
}
.echo-post-modal-body .echo-post-div .right-part div.post-text p {
  color: var(--text-clr4);
  font-size: 1rem;
  font-weight: 400;
  text-align: left;
  margin: 0;
}
.echo-post-modal-body .echo-post-div .right-part .post-by-details {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.echo-post-modal-body .echo-post-div .right-part .post-by-details .image-div div {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--gray-clr4);
  border: 1px solid #ddd;
  overflow: hidden;
}
.echo-post-modal-body .echo-post-div .right-part .post-by-details .image-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.echo-post-modal-body .echo-post-div .right-part .post-by-details .details-div .post-by {
  color: var(--text-clr2);
  font-size: 0.75rem;
  font-weight: 400;
}
.echo-post-modal-body .echo-post-div .right-part .post-by-details .details-div .post-by span {
  color: var(--text-clr4);
  font-weight: 400;
}
.echo-post-typing-area {
  min-height: 200px;
}
.echo-post-modal-body .echo-post-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  border-radius: 50px;
  background: var(--blue-clr7);
  color: var(--text-white2);
  text-align: center;
  color: var(--text-white2);
  font-size: 1rem;
  font-weight: 600;
  width: 100%;
  padding: 12px 15px;
  outline: none;
  box-shadow: none;
  border: none;
  pointer-events: none;
}
.echo-post-modal-body .echo-post-btn.active {
  background: var(--gradient-btn-clr1);
  pointer-events: all;
}
#backFromCreatePost {
  z-index: 1056; /* Higher than the default 1055 for modals */
}
#backFromCreatePost .modal-backdrop {
  z-index: 1055; /* Higher than the first modal's backdrop */
}
/* Echo post modal end*/
.flag-unflag-btn {
  width: 100%;
  border-radius: 50px;
  background: var(--gradient-btn-clr1);
  color: var(--text-white);
  font-size: 1rem;
  font-weight: 600;
  border: none;
  box-shadow: none;
  outline: none;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: 9px 10px;
}

/* Echod post start */
.each-echod-post {
  position: relative;
  border-top: 1px solid var(--blue-clr8);
  background: #ffffff;
  padding: 15px 0 10px 0;
  margin-top: 1.1rem;
}
.each-echod-post:first-child {
  margin-top: 10px !important;
}
.all-post-main-div .each-echod-post:first-child {
  margin-top: 25px !important;
}
.selected-location {
  text-decoration: none;
  background: var(--blue-clr9);
  border-radius: 24px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-clr3);
  padding: 5px 6px;
  line-height: 1.2;
  white-space: nowrap;
}
.each-echod-post .top-heading-div {
  display: flex;
  align-items: start;
  justify-content: space-between;
  padding-inline: 15px;
  margin-bottom: 10px;
}
.each-echod-post .top-heading-div .left-div {
  display: flex;
  align-items: center;
  gap: 10px;
}
.each-echod-post .top-heading-div .left-div .img-div {
  position: relative;
}
.each-echod-post .top-heading-div .left-div .img-div::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: transparent;
  border: none;
}
.each-echod-post .top-heading-div .left-div .img-div.online::before {
  background-color: #4dd966;
  border: 2px solid #fff;
}
.each-echod-post .top-heading-div .left-div .img-div.away::before {
  background-color: #fcaf17;
  border: 2px solid #fff;
}
.each-echod-post .top-heading-div .left-div .img-div.hidden::before {
  background-color: var(--blue-clr3);
  border: 2px solid #fff;
}
.each-echod-post .top-heading-div .left-div .img-div a {
  display: block;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}
.each-echod-post .top-heading-div .left-div .img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.each-echod-post .top-heading-div .left-div .name-address-div a {
  text-decoration: none;
}
.each-echod-post .top-heading-div .left-div .name-address-div a .name {
  color: var(--text-clr1);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0;
  line-height: 1;
  letter-spacing: 0.5px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  text-transform: capitalize;
}

.each-echod-post .top-heading-div .left-div .name-address-div a .name span.time {
  position: relative;
  font-family: "Open Sans", sans-serif;
  color: var(--text-clr2);
  font-size: 0.85rem;
  font-weight: 400;
  text-align: end;
  padding-left: 8px;
}
.each-echod-post .top-heading-div .left-div .name-address-div a .name span.time::before {
  position: absolute;
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="3" height="3" viewBox="0 0 3 3" fill="none"><circle cx="1.5" cy="1.5" r="1.5" fill="%23D9D9D9"/></svg>');
  left: 1px;
  top: 0;
}
.each-echod-post .top-heading-div .left-div .name-address-div .location {
  color: var(--text-clr2);
  font-size: 0.85rem;
  font-weight: 400;
  margin-block: 2px 0;
}
.each-echod-post .top-heading-div .right-div {
  display: flex;
  justify-content: right;
  align-items: center;
  column-gap: 8px;
  row-gap: 5px;
  flex-wrap: wrap-reverse;
  text-align: end;
}
.each-echod-post .top-heading-div .right-div span.time {
  font-family: "Open Sans", sans-serif;
  color: var(--text-clr2);
  font-size: 0.75rem;
  font-weight: 400;
}
.each-echod-post .top-heading-div .right-div span.three-dot {
  position: relative;
  cursor: pointer;
  z-index: 1;
  display: block;
  padding-inline: 0.175rem;
}
.each-echod-post .top-heading-div .right-div span.three-dot .dropdown-main-div {
  position: absolute;
  top: 30px;
  right: -8px;
  padding-right: 10px;
  opacity: 0;
  visibility: hidden;
  transition: all 0.15s ease-in-out;
}
.each-echod-post .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div {
  min-width: 210px;
  border-radius: 8px;
  border: 1px solid var(--gray-clr7);
  background: #fff;
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.each-echod-post .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  padding: 7px 12px;
  color: var(--text-clr4);
  font-size: 0.875rem;
  font-weight: 400;
  text-decoration: none;
  border-radius: 5px;

  &.saved-drop-option {
    color: #4285f4;
  }
}
.each-echod-post .top-heading-div .right-div span.three-dot .dropdown-main-div .dropdown-div a:hover {
  background: var(--blue-clr8);
}
.each-echod-post .top-heading-div .right-div span.three-dot:hover .dropdown-main-div {
  opacity: 1;
  visibility: visible;
  z-index: unset;
}
.each-echod-post .post-image-text-div a.post-text {
  color: var(--text-clr3);
  font-size: 0.875rem;
  font-weight: 400;
  word-break: break-word;
  padding-inline: 15px;
  margin-bottom: 10px;
}
.each-echod-post .post-image-text-div div.post-text {
  color: var(--text-clr3);
  font-size: 1rem;
  font-weight: 400;
  word-break: break-word;
  padding-inline: 15px;
  margin-bottom: 10px;
}
.each-echod-post .post-image-text-div div.post-text img {
  width: 14px;
  height: 14px;
}
.each-echod-post .post-image-text-div a.post-tags {
  color: var(--blue-clr1);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}

.each-echod-post .posts-all-btns-div {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 5px;
  margin-top: 12px;
  padding-inline: 15px;
}
.each-echod-post .posts-all-btns-div a {
  border-right: 1px solid var(--blue-clr8);
  width: fit-content;
  text-align: center;
  padding: 6px 10px;
  color: var(--text-clr1);
  font-size: 1rem;
  font-weight: 400;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  white-space: nowrap;
  min-width: 76px;

  &.love-react {
    gap: 1px;
  }

  &:last-child {
    border-right: none;
  }
  &.saved-btn {
    display: none;
  }
}
@media (max-width: 380px) {
  .each-echod-post .posts-all-btns-div a {
    min-width: unset;
    padding-inline: 15px;
  }
}
.each-echod-post .posts-all-btns-div a:hover {
  background: var(--gray-clr5);
  color: #747474;
}
.each-echod-post .posts-all-btns-div a.love-react.active svg path {
  fill: var(--pink-clr);
}
.each-echod-post .posts-all-btns-div a.echo-post.active {
  color: #1973d0;
}
.each-echod-post .posts-all-btns-div a.echo-post.active svg path {
  fill: #1973d0;
}
.each-echod-post .inner-echod-post {
  position: relative;
  border-radius: 16px;
  border: 1px solid var(--blue-clr8);
  background: #ffffff;
  padding: 20px 0 10px 0;
  margin-inline: 15px;
  margin-top: 27px;

  .post-img-outer-div {
    padding-inline: 15px;
  }
}
.each-echod-post .inner-echod-post:first-child {
  margin-top: 10px !important;
}
.each-echod-post .inner-echod-post .top-heading-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: 15px;
  margin-top: 12px;
  margin-bottom: 0;
}
.each-echod-post .inner-echod-post .top-heading-div .left-div {
  display: flex;
  align-items: center;
  gap: 5px;
}
.each-echod-post .inner-echod-post .top-heading-div .left-div .img-div {
  position: relative;
}
.each-echod-post .inner-echod-post .top-heading-div .left-div .img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.each-echod-post .inner-echod-post .top-heading-div .left-div .name-timing-div {
  color: var(--text-clr2);
  font-size: 0.8125rem;
  font-weight: 500;
  margin: 0;
}
.each-echod-post .inner-echod-post .top-heading-div .left-div .name-timing-div a {
  text-decoration: none;
  color: #0078d7;
  font-size: 0.8125rem;
  font-weight: 600;
  margin: 0;
  line-height: 1;
  text-transform: capitalize;

  svg {
    margin-inline: 1px;
  }
}

.each-echod-post .inner-echod-post .top-heading-div .left-div .name-timing-div .echo-post-timming {
  color: var(--text-clr2);
  font-size: 0.75rem;
  font-weight: 400;
}

.each-echod-post .inner-echod-post .post-image-text-div .img-div {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
}
.each-echod-post .inner-echod-post .post-image-text-div .img-div img {
  position: absolute;
  border-radius: 0px 0px 8px 8px;
  left: 0;
  top: 0;
  width: 100%;
  display: block;
  object-fit: contain;
  background-color: #333;
}
.each-echod-post .inner-echod-post .post-image-text-div div.post-text {
  color: var(--text-clr3);
  background-color: transparent !important;
  font-size: 1rem;
  font-weight: 400;
  word-break: break-word;
  padding-inline: 15px;
  margin-bottom: 20px;
}
.each-echod-post .inner-echod-post .post-image-text-div div.post-text * {
  background-color: transparent !important;
}
.each-echod-post .inner-echod-post .post-image-text-div div.post-text .mention-user-name {
  background-color: #e0f6ff !important;
}
.each-echod-post .inner-echod-post .post-image-text-div a.post-tags {
  color: var(--blue-clr1);
  font-size: 1rem;
  font-weight: 600;
  margin: 0;
}
.each-echod-post .inner-echod-post .post-image-text-div .all-comments-btn {
  position: relative;
  background: none;
  outline: none;
  box-shadow: none;
  border: none;
  display: block;
  margin-left: auto;
  color: #2c2c2c;
  font-size: 0.875rem;
  font-weight: 400;
  padding: 0;
}
.each-echod-post .inner-echod-post .post-image-text-div .all-comments-btn::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: #2c2c2c;
  left: 0;
  bottom: 0;
  transition: all 0.5s ease-in-out;
}
.each-echod-post .inner-echod-post .post-image-text-div .all-comments-btn:hover::before {
  content: "";
  width: 20%;
}

.each-echod-post .inner-echod-post.echoed-post::after {
  position: absolute;
  content: url("../images/icons/echo-white.svg");
  top: 0;
  transform: translateY(-50%);
  right: 25px;
  padding: 0.3rem 0.65rem;
  background: var(--blue-clr11);
  border: 1px solid var(--blue-clr11);
  border-radius: 50px;
  color: var(--text-white);
  font-size: 0.75rem;
  line-height: 14px;
  text-align: center;
  white-space: nowrap;
}

.echo-post-name-and-btns {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-inline: 15px;
  margin-block: 8px 0;
  .left-div {
    display: flex;
    align-items: center;
    gap: 5px;

    .img-div {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .name-timing-div {
      a {
        color: var(--text-clr3);
        font-size: 0.8125rem;
        font-weight: 500;
      }
      .echo-post-timming {
        color: var(--text-clr2);
        font-size: 0.8125rem;
        font-weight: 500;
      }
    }
  }

  .inner-post-echo-share-btn {
    .post-btn-right {
      border: none;
      padding: 0;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    a {
      text-decoration: none;
      border-radius: 100px;
      border: 1px solid var(--blue-clr8);
      width: 36px;
      height: 36px;
      display: flex;
      justify-content: center;
      align-items: center;

      &:hover {
        background-color: var(--gray-clr5);
        color: #747474;
      }

      span {
        display: none;
      }
    }
  }
}

/* Echod post start */

/* Notification toast start */

.notification-div {
  max-width: 90%;
  width: 100%;
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 100px;
  border: 1px solid #f0f0f0;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding-right: 25px;
  z-index: 1000;
  transition: bottom 0.5s ease-in-out;
}
@keyframes fadein {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 20px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    bottom: 20px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

.notification-div .noty-img-div {
  width: 36px;
  height: 36px;
  background: var(--blue-clr8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.notification-div .noty-img-div img {
  max-width: 100%;
}
.notification-div p {
  font-family: "Museo Sans Rounded 500";
  color: var(--text-clr6);
  font-size: 1rem;
  margin: 0;
}
.notification-div p span.noty-name {
  color: #0095d0;
  cursor: default;
}
.notification-div .noty-close-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--pink-clr);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  outline: none;
  right: -4px;
  top: -4px;
  cursor: pointer;
}
/* Notification toast end */
/* Button loader start */
button .common-loading {
  margin-block: 9px;
  padding: 0;
}
button .common-loading span {
  background-color: var(--text-white);
  animation: buttonDot ease-in-out 1s infinite;
}
@keyframes buttonDot {
  0% {
    background-color: #ffba79;
  }

  50% {
    background-color: var(--text-white);
  }

  100% {
    background-color: #ffa652;
  }
}
/* Button loader end */

/* Carousel button */
.carousel-control-next,
.carousel-control-prev {
  height: fit-content;
  top: 50%;
  transform: translateY(-50%);
  width: 30px;
  height: 30px;
  border-radius: 50%;
  box-shadow: 0px 0px 4px #00000050;
  background: #00000030;
  margin: 0.5rem;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
  width: 1.2rem;
  height: 1.2rem;
}

/* More menu start */
.more-menu-inner-div {
  padding: 20px 15px;
  margin-bottom: 100px;
}
.more-menu-inner-div .more-menu-header {
  margin-block: 5px 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.more-menu-inner-div .more-menu-header p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--text-clr1);
  font-size: 16px;
  font-weight: 600;
}
.more-menu-inner-div .more-menu-header .close-back-btn {
  border: none;
  transition: all 0.25s ease-in-out;
}
.more-menu-inner-div .more-menu-header .close-back-btn:hover {
  transform: scale(1.2);
}
.more-menu-inner-div .each-more-menu-div {
  text-decoration: none;
  border-radius: 16px;
  border: 1px solid var(--gray-clr8);
  background: #fff;
  box-shadow: 0px 0px 80px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  gap: 15px;
  color: var(--text-clr1);
  text-align: center;
  font-family: "Raleway", sans-serif;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  padding: 16px 25px;
  transition: all 0.25s ease-in-out;
  height: 100%;
}
.more-menu-inner-div .each-more-menu-div:hover {
  filter: grayscale();
}

.canvas-log-out-btn {
  position: absolute;
  bottom: 45px;
  left: 50%;
  transform: translateX(-50%);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: var(--gradient-btn-clr1);
  width: calc(100% - 30px);
  padding: 2px;
  border-radius: 100px;
  text-align: center;
  .inner-span {
    background: #fff;
    padding: 8px 10px;
    width: 100%;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    height: 36px;
    font-size: 1.125rem;
    font-weight: 600;
    color: #d80b8c;

    span {
      background: var(--gradient-btn-clr1);
      background-clip: text;
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      font-size: 1.125rem;
      font-weight: 600;
    }
  }
}
/* More menu end */

/* Auth notification on success or error start*/
.auth-noty-area {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-radius: 16px;
  padding: 9px 15px;
  padding-left: 50px;
  margin-bottom: 15px;
  text-align: left;
}
.auth-noty-area.fail {
  background: #ffe5dd;
}
.auth-noty-area.success {
  background: #e3f3d9;
}
.auth-noty-area.fail:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><g clip-path="url(%23clip0_7898_28336)"><path d="M13 0C5.8143 0 0 5.81481 0 13C0 20.1857 5.81481 26 13 26C20.1857 26 26 20.1852 26 13C26 5.8143 20.1852 0 13 0ZM13 23.9688C6.93707 23.9688 2.03125 19.0625 2.03125 13C2.03125 6.93707 6.93748 2.03125 13 2.03125C19.0629 2.03125 23.9688 6.93748 23.9688 13C23.9688 19.0629 19.0625 23.9688 13 23.9688Z" fill="%23DB724E"/><path d="M13 6.54443C12.4391 6.54443 11.9844 6.99913 11.9844 7.56006V14.1003C11.9844 14.6613 12.4391 15.1159 13 15.1159C13.5609 15.1159 14.0156 14.6613 14.0156 14.1003V7.56006C14.0156 6.99913 13.5609 6.54443 13 6.54443Z" fill="%23DB724E"/><path d="M13 19.1018C13.7572 19.1018 14.3711 18.4879 14.3711 17.7307C14.3711 16.9735 13.7572 16.3596 13 16.3596C12.2428 16.3596 11.6289 16.9735 11.6289 17.7307C11.6289 18.4879 12.2428 19.1018 13 19.1018Z" fill="%23FFAE92"/></g><defs><clipPath id="clip0_7898_28336"><rect width="26" height="26" fill="white"/></clipPath></defs></svg>');
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(calc(-50% + 4px));
}
.auth-noty-area.success:before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M13 0C5.82947 0 0 5.82947 0 13C0 20.1705 5.82947 26 13 26C20.1705 26 26 20.1705 26 13C26 5.82947 20.1705 0 13 0ZM13 23.7284C7.08842 23.7284 2.27158 18.9116 2.27158 13C2.27158 7.08842 7.08842 2.27158 13 2.27158C18.9116 2.27158 23.7284 7.08842 23.7284 13C23.7284 18.9116 18.9116 23.7284 13 23.7284Z" fill="%2372BF44"/><path d="M17.7896 9.19593C17.598 9.00435 17.2696 9.00435 17.0506 9.19593L11.4948 14.7517L8.94958 12.2065C8.758 12.0149 8.42958 12.0149 8.21064 12.2065L7.33485 13.0822C7.14327 13.2738 7.14327 13.6022 7.33485 13.8212L11.1117 17.598C11.3033 17.7896 11.6317 17.7896 11.8506 17.598L18.6654 10.8107C18.857 10.6191 18.857 10.2907 18.6654 10.0717L17.7896 9.19593Z" fill="%2372BF44"/></svg>');
  position: absolute;
  top: 50%;
  left: 15px;
  transform: translateY(calc(-50% + 4px));
}
.auth-noty-area span {
  font-size: 0.875rem;
  font-weight: 400;
}
.auth-noty-area.fail span {
  color: #db724e;
}

.auth-noty-area.success span {
  color: #72bf44;
}

.auth-noty-area .close-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  border: none;
  padding: 0;
  transition: all 0.25s ease-in-out;
}
.auth-noty-area.fail .close-btn svg path {
  fill: #ffae92;
}
.auth-noty-area.success .close-btn svg path {
  fill: #72bf44;
}
.auth-noty-area .close-btn:hover {
  transform: rotate(45deg);
}
/* Auth notification on success or error start*/

/* Profile edit start */
.edit-profile-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  background: var(--gradient-btn-clr1);
  text-decoration: none;
  white-space: nowrap;
  width: 100%;
  color: var(--text-white2);
  text-align: center;
  font-size: 1rem;
  font-weight: 500;
  padding: 15px;
  border-radius: 100px;
  max-width: calc(100% - 30px);
  left: 50%;
  transform: translateX(-50%);
}

.edit-interest-div .interests-input {
  min-height: 58px;
}
.edit-interest-div .interests-input .interest-placeholder {
  font-size: 1rem !important;
}

/* Profile edit end */

/* New interset  start*/
.interests-container {
  position: relative;
  width: 100%;
}

.interests-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  min-height: 50px;
  padding: 10px 20px;
  border: 1px solid var(--input-border-clr);
  border-radius: 16px;
  background-color: var(--text-white);
  cursor: pointer;
}

.interests-input.active {
  border-color: #93b5c0;
}

.interests-input .interest-placeholder {
  color: var(--text-clr2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.all-chips-div {
  display: flex;
  align-items: center;
  gap: 8px;
}

.interest-tag {
  background-color: var(--blue-clr1);
  color: #ffffff;
  padding: 4px 10px 4px 14px;
  border-radius: 100px;
  display: flex;
  align-items: center;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
}

#more-tags {
  background-color: transparent;
  color: var(--text-clr3);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 0;
  margin: 0;
  cursor: pointer;
  margin-left: auto;
}

.remove-tag {
  margin-left: 10px;
  cursor: pointer;
  display: inherit;
  font-size: 1.25rem;
  color: var(--text-white);
  line-height: 1;
}

.interests-dropdown {
  display: none;
  position: absolute;
  top: 0;
  width: 100%;
  padding: 15px 20px;
  border: 1px solid var(--input-border-clr);
  border-radius: 8px;
  background-color: var(--text-white);
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
  z-index: 1045;
  margin-bottom: 35px;
}

#dropdown-search {
  box-sizing: border-box;
  max-width: 100%;
  width: 100%;
  padding: 8px 20px;
  margin-block: 12px 14px;
  border-radius: 16px;
  border: 1px solid var(--gray-clr10);
  background: var(--gray-clr10);
  color: var(--text-clr9);
  font-size: 0.9375rem;
  font-weight: 500;
  outline: none;
}

#dropdown-search::placeholder {
  color: var(--text-clr2);
  font-size: 0.9375rem;
  font-weight: 500;
}

.interests-options-div {
  max-height: 265px;
  overflow-y: auto;
}
.interests-options-div::-webkit-scrollbar {
  display: none;
}
.interests-options-div::-moz-scrollbar {
  display: none;
}
.interests-options-div::-ms-scrollbar {
  display: none;
}
#no-search-result {
  font-size: 14px;
  color: var(--blue-clr3);
  font-weight: 600;
  margin-bottom: 0;
  width: 100%;
  text-align: center;
}
.category-heading {
  font-size: 12px;
  color: #000;
  font-weight: 600;
  margin-bottom: 0;
  width: 100%;
  padding-left: 10px;
}
.interest-category {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
  .interest-options {
    padding: 5px 20px;
    border-radius: 20px;
    background-color: var(--gray-clr9);
    color: var(--blue-clr-12);
    font-size: 0.9375rem;
    font-weight: 400;
    cursor: pointer;
  }
}

.interest-options.selected {
  background-color: var(--blue-clr1);
  color: var(--text-white);
}

#interest-done-btn {
  margin-top: 20px;
  padding: 10px 15px;
  border-radius: 100px;
  background: var(--gradient-btn-clr1);
  color: var(--text-white2);
  border: none;
  cursor: pointer;
  width: 100%;
  font-size: 1.125rem;
  font-weight: 700;
}

.interest-dropdown-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.interest-dropdown-header p {
  color: #000;
  font-size: 0.9375rem;
  font-weight: 600;
  margin: 0;
}

.interest-dropdown-header button {
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: none;
  cursor: pointer;
}

.hidden-chips {
  display: none;
}
.interest-dropdown-loader {
  display: none;
  background: linear-gradient(180deg, rgba(250, 252, 253, 0) 0%, rgba(250, 252, 253, 0.65) 22.4%, rgba(250, 252, 253, 0.9) 68.5%, #fafcfd 100%);
  position: absolute;
  bottom: 75px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 415px;
  width: 100%;
  padding: 50px 0.5rem 20px 0.5rem;
  margin-inline: auto;
  z-index: 2;
}
/* New interest end */

/* Other profile start */
.other-pro-following-dropdown .following-dropdown-btn {
  position: absolute;
  right: 15px;
  top: 50%;
  transform: translateY(-50%);
  transition: all 0.25s ease-in-out;
}

.other-pro-following-dropdown .other-pro-follow-btn.show .following-dropdown-btn {
  transform: translateY(-50%) rotate(-180deg);
}

.other-pro-following-dropdown .dropdown-menu {
  background: #fff;
  border-radius: 0px 0px 8px 8px;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08);
  width: 100%;
  transform: translate3d(0px, 42px, 0px) !important;
  padding: 0;
  overflow: hidden;
}

.other-pro-following-dropdown .dropdown-menu li .dropdown-item {
  display: flex;
  align-items: center;
  gap: 15px;
  color: #616161;
  font-size: 1.125rem;
  font-weight: 400;
  padding: 12px 20px;
  cursor: pointer;
}
.other-pro-following-dropdown .dropdown-menu li .dropdown-item:hover {
  background-color: var(--blue-clr8);
}
/* Other profile end */

/* Share dropdown start */

.post-share-modal .modal-content {
  border: 1px solid var(--gray-clr7);
}

.post-share-modal .modal-content .modal-header {
  border: none;
  padding: 20px 20px 0 20px;
  display: block;
}

.post-share-modal {
  & .modal-header p {
    color: var(--text-clr4);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
  }
  & .modal-close-bnt {
    position: absolute;
    right: 20px;
    top: 20px;
    margin-left: auto;
    outline: none;
    border: none;
    box-shadow: none;
    background: none;
    border-radius: 50%;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}
.post-share-modal .modal-content .modal-header .modal-close-bnt:hover {
  background: var(--gray-clr5);
}
.post-share-modal .modal-content .modal-body {
  padding: 20px;
}

.share-modal-search-div {
  width: 100%;
}
.share-modal-search-div input.share-search-input {
  width: 100%;
  height: 45px;
  border-radius: 8px;
  border: 1px solid var(--input-border-clr);
  background: #fff;
  color: var(--text-clr9);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0 15px 0 40px;
  box-shadow: none;
  outline: none;
}
.share-modal-search-div .input-wrap-div {
  position: relative;
}
.share-modal-search-div .input-wrap-div::before {
  content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none"><g clip-path="url(%23clip0_8042_623)"><path d="M15.4313 12.6085L12.7979 9.97506C13.2767 9.01746 13.5959 7.90025 13.5959 6.78304C13.5959 3.03242 10.5635 0 6.81283 0C3.06221 0 0.0297852 3.03242 0.0297852 6.78304C0.0297852 10.5337 3.06221 13.5661 6.81283 13.5661C7.93004 13.5661 9.04725 13.2469 10.0049 12.7681L12.6383 15.4015C13.4363 16.1995 14.6333 16.1995 15.4313 15.4015C16.1495 14.6035 16.1495 13.4065 15.4313 12.6085ZM6.81283 11.9701C3.94001 11.9701 1.6258 9.65586 1.6258 6.78304C1.6258 3.91022 3.94001 1.59601 6.81283 1.59601C9.68565 1.59601 11.9999 3.91022 11.9999 6.78304C11.9999 9.65586 9.68565 11.9701 6.81283 11.9701Z" fill="%239AABBC"/></g><defs><clipPath id="clip0_8042_623"><rect width="16" height="16" fill="white"/></clipPath></defs></svg>');
  position: absolute;
  left: 15px;
  top: 12px;
}
.share-modal-search-div input::placeholder {
  color: var(--gray-clr3);
  font-size: 0.9375rem;
  font-weight: 500;
}
.share-modal-search-div p.heading {
  color: var(--text-clr4);
  font-size: 0.875rem;
  font-weight: 600;
  margin-block: 20px 15px;
  padding-left: 20px;
}
.post-share-modal .users-checkboxes-main-div {
  margin-top: 15px;
  max-height: 215px;
  overflow-y: auto;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 25px;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div.hide {
  display: none;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div:hover {
  background: var(--light-blue-bg2);
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .left-div {
  display: flex;
  align-items: center;
  gap: 15px;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div {
  width: 36px;
  height: 35px;
  border-radius: 50%;
  overflow: hidden;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .left-div .user-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p {
  margin: 0;
  line-height: 1.2;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.name a {
  font-family: "Raleway", sans-serif;
  text-decoration: none;
  color: var(--text-clr4);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.25px;
  margin: 0;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .left-div .para-div p.address a {
  text-decoration: none;
  color: var(--text-clr2);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label {
  width: 31px;
  height: 31px;
  border-radius: 50%;
  background-color: #aeb7db;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label label .check {
  display: inline-block;
  transform: rotate(45deg);
  height: 15px;
  width: 9px;
  border-bottom: 2.5px solid #fff;
  border-right: 2.5px solid #fff;
  margin-bottom: 4px;
  border-radius: 0.2px;
}
.post-share-modal .users-checkboxes-main-div .each-users-checkboxes-div .right-div .check-box-label input:checked ~ label {
  background: var(--blue-clr10);
}
.post-share-modal .send-comment-btn {
  padding: 15px;
  margin-top: 5px;
}
.post-share-modal .send-comment-btn a.share-message-btn,
.post-share-modal .send-comment-btn button.share-message-btn {
  text-decoration: none;
  border-radius: 50px;
  background: var(--gradient-btn-clr1);
  height: 50px;
  border: none;
  box-shadow: none;
  outline: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--text-white) !important;
  font-size: 1rem;
  font-weight: 500;
}

.post-share-modal .no-search-result {
  padding: 15px;
  display: none;
}
.post-share-modal .no-search-result img {
  display: block;
  margin-inline: auto;
}
.post-share-modal .share-comment-area {
  border-radius: 8px;
  border: 1px solid #fafbff;
  background: #fafbff;
  width: 100%;
  min-height: 60px;
  outline: none;
  box-shadow: none;
  resize: none;
  padding: 10px 20px;
  margin-bottom: 10px;
}

.post-share-modal .share-comment-area::placeholder {
  color: var(--gray-clr3);
  font-size: 0.9375rem;
  font-weight: 400;
}
.share-seperator-line {
  position: relative;
  background: var(--blue-clr9);
  height: 1px;
  width: calc(100% + 40px);
  left: -20px;
  border: none;
  margin-block: 0 15px;
}
.post-share-modal .share-options {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.post-share-modal .share-options a {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  width: 100%;
  border-radius: 8px;
  border: 1px solid var(--blue-clr9);
  background: #fbfbfb;
  padding: 15px 20px;
  color: var(--text-clr3);
  font-size: 0.75rem;
  font-weight: 500;
}
.post-share-modal .share-options a:hover {
  background: #eeeeee;
}

/* Share dropdown end */

/* Copied share notification start */
.share-link-copied-noty-div {
  max-width: 415px;
  width: calc(100% - 50px);
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding-right: 25px;
  z-index: 1060;
  transition: bottom 0.5s ease-in-out;
}
.share-link-copied-noty-div.show {
  bottom: 0;
}

@keyframes open {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 20px;
    opacity: 1;
  }
}

@keyframes close {
  from {
    bottom: 20px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

.share-link-copied-noty-div .noty-img-div {
  width: 36px;
  height: 36px;
}
.share-link-copied-noty-div .noty-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.share-link-copied-noty-div p {
  font-family: "Museo Sans Rounded 400";
  color: #2c2c2c;
  font-size: 1rem;
  margin: 0;
}
.share-link-copied-noty-div p span.noty-name {
  color: #0095d0;
  cursor: default;
}
.share-link-copied-noty-div .noty-close-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--pink-clr);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  outline: none;
  right: -4px;
  top: -4px;
  cursor: pointer;
}
/* Copied share notification end */

/* Auth modal start */
.onpage-auth-modal .modal-content {
  border: 1px solid var(--gray-clr7);
}
.onpage-auth-modal .modal-content .modal-header {
  border: none;
}
.onpage-auth-modal {
  & .modal-close-bnt {
    position: absolute;
    right: 20px;
    top: 20px;
    margin-left: auto;
    outline: none;
    border: none;
    box-shadow: none;
    background: none;
    border-radius: 50%;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
}
.onpage-auth-modal .modal-content .modal-header .modal-close-bnt:hover {
  background: var(--gray-clr5);
}
.onpage-auth-modal .modal-body {
  padding: 20px 20px 45px 20px;
}

.onpage-auth-modal .modal-body .auth-modal-header {
  color: var(--text-clr4);
  text-align: center;
  font-size: 1.5rem;
  font-weight: 600;
  margin-block: 35px 2px;
}

.onpage-auth-modal .modal-body .auth-modal-para {
  color: var(--text-clr9);
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  margin: 0;
}

.onpage-auth-modal .modal-body .auth-modal-btn-div {
  margin-top: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 10px;
}
.onpage-auth-modal .modal-body .auth-modal-btn-div .login-btn {
  text-decoration: none;
  display: block;
  border-radius: 50px;
  border: 2px solid var(--blue-clr1);
  background: var(--blue-clr1);
  color: var(--text-white);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  width: 100%;
  padding: 7.5px 15px;
}
.onpage-auth-modal .modal-body .auth-modal-btn-div .login-btn:hover {
  background: transparent;
  color: var(--blue-clr1);
}
.onpage-auth-modal .modal-body .auth-modal-btn-div .signup-btn {
  text-decoration: none;
  display: block;
  border-radius: 50px;
  border: 2px solid #1c1f20;
  background: #fff;
  color: var(--text-clr4);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  width: 100%;
  padding: 8px 15px;
}

.onpage-auth-modal .modal-body .auth-modal-btn-div .signup-btn:hover {
  background: #1c1f20;
  color: var(--text-white);
  padding: 8px 15px;
}
/* Auth modal end */

/* On page auth start */
.onpage-auth-main-div {
  position: fixed;
  max-width: 415px;
  width: 100%;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  background: var(--blue-clr1);
  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  padding: 20px 15px;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="82" height="78" viewBox="0 0 82 78" fill="none"><path d="M77.126 41.3158H-8.01248C-9.43666 41.3158 -10.5918 40.1662 -10.5918 38.7453C-10.5918 37.3244 -9.43666 36.1748 -8.01248 36.1748H77.1276C78.5518 36.1748 79.7069 37.3244 79.7069 38.7453C79.7069 40.1662 78.5502 41.3158 77.126 41.3158Z" fill="%234298F4"/><path d="M24.3048 75.744C23.546 75.744 22.7936 75.4116 22.2845 74.7742C18.3841 69.8869 15.3634 64.4104 13.3028 58.4988C11.1601 52.3126 10.0742 45.6673 10.0742 38.7426C10.0742 31.7938 11.1601 25.15 13.3012 18.9944C15.4069 12.9527 18.5049 7.38309 22.5133 2.43801C23.409 1.3334 25.033 1.16322 26.1398 2.05429C27.2482 2.94537 27.4206 4.56376 26.5248 5.66837C22.8935 10.1511 20.0838 15.2005 18.1731 20.6802C16.2221 26.2916 15.2312 32.3686 15.2312 38.7426C15.2312 45.0957 16.2221 51.1759 18.1747 56.8162C20.0435 62.1739 22.7839 67.1414 26.3218 71.5744C27.2079 72.6854 27.0243 74.3022 25.9078 75.1852C25.4341 75.5609 24.8687 75.744 24.3048 75.744Z" fill="%234298F4"/><path d="M34.5559 77.492C33.1317 77.492 31.9766 76.3424 31.9766 74.9215V10.8459C31.9766 9.42656 33.1317 8.27539 34.5559 8.27539C35.9801 8.27539 37.1352 9.42496 37.1352 10.8459V74.9215C37.1336 76.3424 35.9785 77.492 34.5559 77.492Z" fill="%234298F4"/><path d="M44.1467 75.9472C43.5844 75.9472 43.0189 75.7658 42.5437 75.3901C41.4304 74.5071 41.2419 72.8903 42.1296 71.7792C45.7191 67.2757 48.5239 62.2102 50.4653 56.7224C52.5178 50.9537 53.565 44.904 53.5779 38.7387C53.5891 32.559 52.5645 26.5093 50.5329 20.7583C48.6013 15.285 45.8125 10.2451 42.2424 5.78013C41.3547 4.6707 41.5367 3.05392 42.6516 2.16766C43.7665 1.283 45.3888 1.46603 46.2765 2.57546C50.2059 7.49164 53.2766 13.034 55.3984 19.0516C57.6249 25.3549 58.7478 31.981 58.7349 38.7468C58.722 45.4965 57.5749 52.1193 55.3291 58.434C53.1993 64.4564 50.1157 70.0228 46.167 74.9743C45.6579 75.6149 44.9055 75.9472 44.1467 75.9472Z" fill="%234298F4"/><path d="M34.554 77.493C34.0449 77.493 33.5261 77.4785 32.9961 77.4448C30.0575 77.3019 26.9368 76.7143 23.7663 75.7028L24.3366 73.1853L23.5971 75.6482L22.9188 75.4154C20.6198 74.6335 18.2628 73.5931 15.951 72.3327H15.9461L15.3533 72.0052C11.97 70.1187 8.73499 67.7859 5.73357 65.0677L5.32919 64.708C4.28522 63.7431 3.30891 62.7717 2.40188 61.7988C1.52385 60.866 0.658706 59.8785 -0.158106 58.8735C-0.66237 58.2553 -1.1618 57.6179 -1.65157 56.9629C-5.57129 51.6887 -8.53727 45.8204 -10.4738 39.5154L-10.5946 39.1012C-10.8443 38.2679 -11.065 37.3993 -11.268 36.4601C-11.9672 33.1816 -12.167 29.8773 -11.8609 26.6357C-11.5194 23.1052 -10.5833 19.7239 -9.07859 16.5786C-8.60816 15.5992 -8.09906 14.668 -7.56097 13.8058C-7.45141 13.6244 -7.32253 13.4237 -7.19364 13.2311C-6.5331 12.1987 -5.75496 11.1487 -4.90915 10.1484C-4.76898 9.97501 -4.58049 9.76308 -4.39199 9.55115L-4.20994 9.34724C-3.30613 8.35662 -2.36044 7.44949 -1.36319 6.62264L-0.841201 6.18432C-0.119443 5.61756 0.615207 5.08292 1.36919 4.57717C2.29072 3.9783 3.19291 3.4549 4.08545 2.99732C5.25991 2.40005 6.46661 1.88788 7.6733 1.46884C10.1995 0.593814 12.7981 0.107337 15.3935 0.0206374C18.6237 -0.107806 21.841 0.375461 24.9359 1.46723C25.0922 1.517 25.3 1.59567 25.5062 1.68077C26.9384 2.2106 28.4351 2.93149 29.8706 3.78885C31.509 4.77787 33.0476 5.9178 34.4573 7.18618L34.4766 7.20224C34.504 7.22471 34.5298 7.24719 34.5572 7.26967C34.5894 7.24238 34.6216 7.21669 34.6539 7.191C36.1602 5.84555 37.6778 4.7297 39.2535 3.78885C40.5423 3.01498 41.9085 2.34225 43.3101 1.78834L43.4857 1.72091C43.7145 1.63421 43.9384 1.54911 44.1688 1.46723C47.2669 0.375461 50.4923 -0.109412 53.737 0.0206374C56.3082 0.113759 58.9037 0.605053 61.4379 1.48007C62.1693 1.73054 62.8927 2.01472 63.6112 2.33423C64.0993 2.55258 64.5794 2.77575 65.045 3.02622C69.5738 5.32214 73.4919 8.872 76.3241 13.2648C76.4272 13.4157 76.5593 13.6212 76.685 13.8267C77.2102 14.6857 77.7129 15.6073 78.1785 16.5674C81.0897 22.654 81.8453 29.5241 80.3744 36.4504C80.1875 37.3447 79.9651 38.2262 79.7154 39.0803V39.1542L79.5914 39.5138C78.9969 41.4212 78.3057 43.3109 77.5373 45.1348C75.7474 49.3542 73.4677 53.3311 70.7595 56.9629C70.2681 57.6195 69.7703 58.2569 69.2596 58.8799C68.4299 59.8994 67.5696 60.8868 66.7028 61.8068C65.7877 62.7894 64.8066 63.7624 63.7981 64.6872L63.3325 65.103C60.3923 67.7714 57.1524 70.1075 53.7547 72.0052L53.157 72.3344C50.8306 73.5995 48.4671 74.6431 46.1279 75.4363L45.324 75.7044C45.1919 75.7477 45.0227 75.8023 44.8632 75.8473C41.9391 76.7592 38.9618 77.3051 36.0764 77.4528C35.5673 77.4801 35.0534 77.493 34.554 77.493ZM17.6007 67.3668L18.0373 67.6076C20.2187 68.8246 22.4371 69.8201 24.6427 70.5683L25.2742 70.7834C28.0839 71.6825 30.7567 72.1883 33.2893 72.3119C34.2189 72.3713 34.9809 72.3617 35.8058 72.3183C38.261 72.1931 40.8081 71.7226 43.3794 70.9215L44.4669 70.5667C46.6515 69.8249 48.8731 68.8295 51.069 67.6092L51.4412 67.4021C54.4233 65.7163 57.2684 63.6516 59.9073 61.2577L60.2714 60.9334C61.2123 60.0696 62.0968 59.1914 62.9297 58.2971C63.7191 57.4574 64.5005 56.5647 65.2529 55.6367C65.7201 55.0651 66.1712 54.4871 66.6174 53.8915C69.0792 50.5905 71.1526 46.9716 72.7814 43.1343C73.4355 41.5834 74.03 39.973 74.5503 38.3466V38.3064L74.6728 37.9372C74.9225 37.1183 75.1416 36.2626 75.3253 35.3924V35.386C76.5626 29.5723 75.9391 23.8325 73.5257 18.7862C73.139 17.9883 72.7169 17.2144 72.2787 16.4951C72.1934 16.3571 72.1047 16.2174 72.0145 16.0841C69.6462 12.4122 66.4193 9.48693 62.651 7.57633C62.2402 7.35637 61.8712 7.18779 61.5007 7.02242C60.932 6.76874 60.3504 6.53915 59.7575 6.33685C57.7002 5.6272 55.609 5.23063 53.5388 5.15517C50.9289 5.05402 48.364 5.43774 45.8911 6.31116L45.1806 6.57928C44.0722 7.01599 42.9605 7.56509 41.9085 8.19607C40.531 9.01811 39.2583 9.96217 38.0194 11.0828L37.8808 11.2016C37.8244 11.245 37.7729 11.2996 37.7181 11.3494C37.2654 11.7668 36.8417 12.181 36.426 12.6177L34.5411 14.5958L32.6722 12.6033C32.3581 12.2693 32.0375 11.9482 31.7137 11.6432L31.0934 11.0828C29.9012 9.9991 28.593 9.02613 27.2107 8.19125C26.054 7.50087 24.8424 6.91805 23.618 6.46208C23.444 6.39144 23.3554 6.35772 23.2684 6.32882C20.7423 5.43774 18.171 5.04278 15.5852 5.15517C13.4876 5.22421 11.4029 5.61756 9.36814 6.3224C8.38217 6.66438 7.39458 7.08503 6.43599 7.57151C5.7094 7.94239 4.96187 8.3775 4.22239 8.85755C3.60696 9.27018 2.97703 9.73097 2.35516 10.2191L1.96367 10.5498C1.12914 11.2434 0.354212 11.9852 -0.361102 12.7703L-0.541541 12.9726C-0.673649 13.1203 -0.807367 13.268 -0.928197 13.4189C-1.66284 14.2875 -2.30405 15.1529 -2.86631 16.0327C-2.98392 16.2093 -3.07575 16.3538 -3.16436 16.4967C-3.62029 17.2289 -4.02789 17.9722 -4.41938 18.7911C-5.66313 21.3904 -6.43805 24.1937 -6.7216 27.1206C-6.97776 29.8356 -6.81021 32.6196 -6.21895 35.3844C-6.02239 36.2995 -5.8049 37.1312 -5.55841 37.9227L-5.43274 38.345C-3.66701 43.9628 -1.00231 49.1936 2.49371 53.8979C2.93514 54.4887 3.38785 55.0667 3.85023 55.6335C4.59293 56.5454 5.37269 57.4381 6.175 58.2891C7.00631 59.1801 7.89079 60.06 8.81393 60.9141L9.16031 61.2224C11.8315 63.6451 14.6573 65.6986 17.6007 67.3668ZM52.3289 69.5166L52.4916 69.7623L52.3289 69.4749V69.5166Z" fill="%234298F4"/><path d="M34.5543 26.9389C28.1696 26.9389 21.64 26.1698 15.149 24.6526C14.2709 24.4519 13.3913 24.2287 12.531 24.0008L12.1959 23.9141C5.93043 22.2443 -0.256068 19.9018 -6.19446 16.9508C-7.47043 16.3166 -7.98758 14.7737 -7.35282 13.5037C-6.71484 12.2337 -5.16177 11.7199 -3.89547 12.3509C1.66432 15.1141 7.44967 17.3137 13.3059 18.8903L13.5315 18.9481C14.4385 19.1889 15.3713 19.4298 16.3138 19.6449C28.4322 22.4787 40.3396 22.4996 52.3888 19.7429C53.3007 19.5422 54.1739 19.3302 55.0293 19.1006C61.1643 17.4951 67.2074 15.2265 73.0056 12.3493C74.2735 11.7183 75.8282 12.2337 76.463 13.5053C77.0994 14.7769 76.579 16.3182 75.303 16.9508C69.189 19.9837 62.814 22.3776 56.3552 24.0666C55.4434 24.3122 54.4912 24.5434 53.5198 24.757C47.1979 26.2036 40.8101 26.9389 34.5543 26.9389Z" fill="%234298F4"/><path d="M64.8164 62.6196C64.4475 62.6196 64.0737 62.5409 63.7177 62.3739C60.8532 61.0285 57.8808 59.8436 54.8858 58.853C54.0094 58.5656 53.1072 58.2862 52.1953 58.0293C40.2476 54.6095 28.4514 54.6464 16.4651 58.1658C15.5113 58.4387 14.5865 58.7406 13.6843 59.0408L13.2864 59.1741C10.5911 60.0941 7.94089 61.1682 5.39702 62.3723C4.11138 62.9776 2.57281 62.4349 1.96061 61.1521C1.35001 59.8693 1.89778 58.3376 3.18502 57.7275C6.03822 56.3788 9.01547 55.1811 12.0394 54.168L12.4487 54.0347C13.2929 53.7554 14.1548 53.4808 15.0248 53.232C27.9101 49.4461 40.7438 49.4043 53.6098 53.0875C54.5829 53.362 55.5544 53.6622 56.5065 53.9753C59.7013 55.0334 62.867 56.2937 65.9184 57.7259C67.2072 58.3312 67.7598 59.8629 67.1525 61.1457C66.7094 62.0753 65.7831 62.6196 64.8164 62.6196Z" fill="%234298F4"/></svg>');
  background-repeat: no-repeat;
  background-position: -5px center;
  & .onpage-auth-header {
    color: var(--text-white);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 2px;
  }
  & .onpage-auth-para {
    color: #97b6e5;
    text-align: center;
    font-size: 0.8125rem;
    font-weight: 400;
    margin: 0;
  }
  & .auth-btns-div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 1rem;

    & .login-btn {
      text-decoration: none;
      border-radius: 50px;
      border: 2px solid #fff;
      color: var(--text-white);
      text-align: center;
      font-size: 1.125rem;
      font-weight: 600;
      padding: 7.5px 30px;
      &:hover {
        background: #fff;
        color: var(--blue-clr1);
      }
    }

    & .signup-btn {
      text-decoration: none;
      border-radius: 50px;
      background: #fff;
      color: var(--blue-clr1);
      text-align: center;
      font-size: 1.125rem;
      font-weight: 600;
      padding: 7.5px 30px;
      border: 2px solid #fff;

      &:hover {
        background: transparent;
        color: var(--text-white);
      }
    }
  }
}
/* On page auth */

/* Download app start */
.download-app-main-div {
  position: relative;
  overflow: hidden;
  user-select: none;
  .right-design {
    position: absolute;
    right: 0;
    bottom: 0;
    z-index: 0;
  }
  .para1 {
    position: relative;
    color: var(--text-clr3);
    text-align: center;
    font-size: 1.75rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 15px;
    z-index: 1;
  }

  .para2 {
    position: relative;
    color: var(--text-clr9);
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 30px;
    z-index: 1;
  }

  .download-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    z-index: 1;
  }

  .para3 {
    position: relative;
    color: var(--gray-clr3);
    text-align: center;
    font-size: 1rem;
    font-weight: 400;
    margin-block: 15px 0;
    z-index: 1;
  }
}
/* Download app end */
/* New notification end */

/* Custom feed start */
.custom-feed-map {
  position: absolute;
  width: 100%;
  height: 100%;
}
.custom-feed-text-div {
  width: 100%;
  height: 100%;
  min-height: 150px;
  background: linear-gradient(179deg, rgba(23, 52, 82, 0.88) 5.38%, rgba(150, 162, 205, 0.88) 118.77%);
}

.custom-feed-hero-section {
  min-height: 150px;
}

/* Custom feed end */

/* New notification start */
.empty-or-hastag-error-noty-div {
  max-width: 415px;
  width: calc(100% - 30px);
  left: 50%;
  transform: translateX(-50%);
  position: fixed;
  bottom: -100px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 15px;
  border-radius: 20px;
  border: 1px solid #f0f0f0;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding-right: 25px;
  z-index: 1060;
  transition: bottom 0.5s ease-in-out;
}
.empty-or-hastag-error-noty-div.show {
  bottom: 0;
}

@keyframes open {
  from {
    bottom: 0;
    opacity: 0;
  }

  to {
    bottom: 20px;
    opacity: 1;
  }
}

@keyframes close {
  from {
    bottom: 20px;
    opacity: 1;
  }

  to {
    bottom: 0;
    opacity: 0;
  }
}

.empty-or-hastag-error-noty-div .noty-img-div {
  width: 36px;
  height: 36px;
  background: var(--blue-clr8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.empty-or-hastag-error-noty-div .noty-img-div img {
  max-width: 100%;
}
.empty-or-hastag-error-noty-div p {
  font-family: "Museo Sans Rounded 500";
  color: var(--text-clr6);
  font-size: 1rem;
  margin: 0;
}
.empty-or-hastag-error-noty-div p span.noty-name {
  color: #0095d0;
  cursor: default;
}
.empty-or-hastag-error-noty-div .noty-close-btn {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--pink-clr);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: none;
  box-shadow: none;
  outline: none;
  right: -4px;
  top: -4px;
  cursor: pointer;
}
/* New notification end */

/* Connection and follower modal start */
.connection-counts {
  color: var(--text-clr3);
  font-size: 0.9375rem;
  font-weight: 500;

  span {
    color: var(--blue-clr1);
    background: #e9f3ff;
    padding: 2px 5px;
  }
}

.connection-followers-modal .modal-content {
  border: 1px solid var(--gray-clr7);
}

.connection-followers-modal .modal-content .modal-header {
  border: none;
  padding: 20px 20px 20px 20px;
  display: block;
}

.connection-followers-modal {
  & .modal-header p {
    color: var(--text-clr4);
    text-align: center;
    font-size: 1.125rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin: 0;
  }
  & .modal-close-bnt {
    position: absolute;
    right: 20px;
    top: 20px;
    margin-left: auto;
    outline: none;
    border: none;
    box-shadow: none;
    background: none;
    border-radius: 50%;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .modal-body {
    padding-top: 0 !important;

    .all-data-div {
      max-height: calc(100vh - 285px);
      overflow-y: overlay;
    }
  }
}
.connection-followers-modal .modal-content .modal-header .modal-close-bnt:hover {
  background: var(--gray-clr5);
}
.connection-followers-modal .modal-content .modal-body {
  padding: 20px;
}

.connection-followers-modal .tab-and-search-area .tab-btns {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.connection-followers-modal .tab-and-search-area .tab-btns::-webkit-scrollbar {
  display: none;
}
.connection-followers-modal .tab-and-search-area .tab-btns button {
  position: relative;
  width: 100%;
  padding: 10px 10px;
  background-color: #8fb2d7;
  border-radius: 8px;
  border-color: transparent;
  color: var(--text-white);
  text-align: center;
  font-family: "Museo Sans Rounded 400";
  font-size: 0.875rem;
  font-weight: 400;
  box-shadow: none;
  outline: none;
  white-space: nowrap;
}
.connection-followers-modal .tab-and-search-area .tab-btns button .result-count {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 55px;
  background: var(--blue-clr7);
  padding: 1px 6px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.connection-followers-modal .tab-and-search-area .tab-btns button.active .result-count {
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 55px;
  background: #2e5ca2;
  padding: 1px 6px;
  font-size: 0.6875rem;
  font-weight: 600;
}
.connection-followers-modal .tab-and-search-area .tab-btns button.active {
  background-color: var(--blue-clr1);
}
.connection-followers-modal .tab-and-search-area .tab-btns.connection-tabs button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  font-weight: 400;
}

.connection-followers-modal .tab-and-search-area .tab-btns.connection-tabs button .result-count {
  position: relative;
  transform: none;
  top: unset;
  left: unset;
}

.connection-followers-modal .tab-and-search-area .tab-btns.notification-tabs button.notification-tab-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background-color: #f7f8fa;
  color: var(--text-clr3);
  font-size: 0.9375rem;
  font-weight: 600;
  font-family: "Open Sans", sans-serif;
}
.connection-followers-modal .tab-and-search-area .tab-btns.notification-tabs button.notification-tab-btn.active {
  background-color: #e7f1fc;
  color: #3b5998;
  font-size: 0.9375rem;
  font-weight: 600;
}
.connection-followers-modal .tab-and-search-area .tab-btns.notification-tabs button.notification-tab-btn .result-count {
  position: relative;
  transform: none;
  top: unset;
  left: unset;
  border-radius: 20px;
  background: var(--blue-clr1);
  color: var(--text-white);
  font-size: 0.75rem;
  font-weight: 400;
}
.connection-followers-modal .modal-search-div {
  width: 100%;
}
.connection-followers-modal .modal-search-div input {
  width: 100%;
  height: 50px;
  border: 1px solid var(--input-border-clr);
  color: var(--text-clr1);
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0 25px;
  border-radius: 8px;
  box-shadow: none;
  outline: none;
  display: none;
}
.connection-followers-modal .modal-search-div input.active {
  display: block;
}
.connection-followers-modal .modal-search-div input::placeholder {
  color: var(--text-clr9);
  font-size: 0.9375rem;
  font-weight: 500;
}

.each-modal-user-list-card {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.each-modal-user-list-card .left-part {
  display: flex;
  align-items: center;
  gap: 10px;
}
.each-modal-user-list-card .left-part .user-img-div {
  width: 42px;
  height: 42px;
  background-color: #d9d9d9;
  border-radius: 50%;
  overflow: hidden;
}

.each-modal-user-list-card .left-part .user-img-div.inbox-img {
  width: 36px;
  height: 36px;
}

.each-modal-user-list-card .left-part .user-img-div img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.each-modal-user-list-card .left-part .name {
  color: var(--text-clr4);
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  word-break: break-all;
  line-height: 1.2;
}
.each-modal-user-list-card .left-part .location {
  color: var(--text-clr2);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}
.each-modal-user-list-card .left-part .location a {
  text-decoration: none;
  color: var(--text-clr2);
}
.each-modal-user-list-card .right-part {
  display: flex;
  align-items: center;
  gap: 12px;
}
.each-modal-user-list-card.follow .right-part .button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.each-modal-user-list-card.follow .right-part .button.following {
  padding: 5px 18.5px;
  border: 1px solid var(--blue-clr1);
  background: var(--blue-clr1);
  color: var(--text-white);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.each-modal-user-list-card.follow .right-part .button.connected {
  padding: 5px 17px;
  border-radius: 8px;
  background: var(--text-clr9);
  border: 1px solid var(--text-clr9);
  color: var(--text-white);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}
.each-modal-user-list-card.follow .right-part .button.connected {
  background: #808e9c;
}
.each-modal-user-list-card.follow .right-part .button.follow {
  padding: 5px 25px;
  border: 1px solid var(--text-clr9);
  background: rgba(252, 175, 23, 0);
  color: var(--text-clr9);
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.each-modal-user-list-card.message .right-part .button {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--gradient-btn-clr);
  border: none;
  color: var(--text-white);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.each-modal-user-list-card.message .right-part .button.follow-unfollow-btn.following {
  padding: 5px 18.5px;
  border-radius: 8px;
  background: var(--blue-clr1);
  border: 1px solid var(--blue-clr1);
  color: var(--text-white);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

.each-modal-user-list-card.message .right-part .button.follow-unfollow-btn.following:hover {
  background: transparent;
  border: 1px solid var(--blue-clr1);
  color: var(--blue-clr1);
}

.each-modal-user-list-card.message .right-part .button.follow-unfollow-btn.follow {
  padding: 5px 24.5px;
  border-radius: 8px;
  background: transparent;
  border: 1px solid var(--text-clr9);
  color: var(--text-clr9);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}
.each-modal-user-list-card.message .right-part .button.follow-unfollow-btn.follow:hover {
  background-color: var(--text-clr9);
  color: var(--text-white);
}

.each-modal-user-list-card.message .right-part .button.connected.my-profile {
  padding: 5px 17px;
  border-radius: 8px;
  background: var(--text-clr9);
  border: 1px solid var(--text-clr9);
  color: var(--text-white);
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
}

.each-modal-user-list-card.message .right-part .button.connected.my-profile:hover {
  background: #808e9c;
}

.each-modal-user-list-card.follow .right-part .button.message-button {
  padding: 5px 12px;
  border-radius: 8px;
  background: var(--gradient-btn-clr);
  border: none;
  color: var(--text-white);
}

.each-modal-user-list-card.follow .right-part .view-profile-btn {
  text-decoration: none;
  color: var(--text-clr9);
  font-size: 0.9375rem;
  font-weight: 600;
}
.each-modal-user-list-card.follow .right-part .view-profile-btn:hover {
  color: #72808e;
}

.each-modal-user-list-card .right-part span.three-dot {
  position: relative;
  cursor: pointer;
}
.each-modal-user-list-card .right-part span.three-dot .dropdown-main-div {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  padding-right: 10px;
  opacity: 0;
  z-index: -1;
  transition: all 0.5s ease-in-out;
}
.each-modal-user-list-card .right-part span.three-dot .dropdown-main-div .dropdown-div {
  border-radius: 5px;
  background: #fff;
  box-shadow: 0px 4px 15px 0px rgba(0, 0, 0, 0.15);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.each-modal-user-list-card .right-part span.three-dot .dropdown-main-div .dropdown-div a {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  background: var(--gray-clr5);
  padding: 8px;
  color: #2c2c2c;
  font-size: 0.875rem;
  text-decoration: none;
  border-radius: 5px;
}
.each-modal-user-list-card .right-part span.three-dot .dropdown-main-div .dropdown-div a:hover {
  background: #efefef;
}
.each-modal-user-list-card .right-part span.three-dot:hover .dropdown-main-div {
  opacity: 1;
  z-index: unset;
}
/* Connection and follower modal end */

/* Comment bottom part start*/
.bottom-comment-input-div {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--blue-clr8);
  margin-bottom: 15px;
}
.bottom-comment-input-div .editablediv-and-img-div {
  display: flex;
  gap: 8px;
  flex: 1;
}
.bottom-comment-input-div .editablediv-and-img-div .small-img-div {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  overflow: hidden;
}
.bottom-comment-input-div .editablediv-and-img-div .small-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.bottom-comment-input-div .editablediv-and-img-div .onpage-comment-inp {
  padding: 5px 8px;
  flex: 1;
  word-break: break-word;
  box-shadow: none;
  outline: none;
  border: none;
  font-size: 1rem;
  font-weight: 400;
  color: var(--text-clr3);
  height: 92px;
  overflow-y: auto;
}
/* Comment bottom part start */

/* Single share start */
.each-reply-main-div {
  display: flex;
  gap: 15px;

  .comments-img-div {
    width: 36px;
    height: 36px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
  }

  .name-and-time {
    color: #2c2c2c;
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 5px;

    span {
      color: var(--text-clr9);
      font-size: 0.75rem;
      font-weight: 400;
    }
  }

  .comment-para {
    color: #2c2c2c;
    font-size: 1rem;
    font-weight: 400;
    margin-bottom: 15px;

    a.hastag {
      text-decoration: none;
      color: var(--blue-clr1);
      font-size: 0.75rem;
      font-weight: 600;
    }
  }
  .love-and-reply-btns {
    display: flex;
    align-items: center;
    gap: 25px;

    a {
      text-decoration: none;
      color: #2c2c2c;
      font-size: 1rem;
      font-weight: 400;
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .love-react.active svg path {
      fill: var(--pink-clr);
    }
  }
}
.all-post-main-div .each-reply-main-div:last-child {
  padding-bottom: 150px !important;
}
.shared-post-pro-img-div {
  width: 25px;
  height: 25px;
  border-radius: 50%;
  overflow: hidden;
}
.shared-post-pro-img-div img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Single share end */
/* Comment area and dropdown start */
.input-dropdown-user-list.comment-div {
  bottom: 215px !important;
}
.extra-disabled-div.not-clickable {
  pointer-events: none;
  user-select: none;
}

.profile-loacation > .text {
  color: var(--text-clr3);
  font-weight: 600;
  font-size: 1rem;
}

.profile-loacation .item:last-child {
  margin-bottom: 10px !important;
}
/* Comment area and dropdown End */

/* Confirm your email start */
.confirm-your-email-modal {
  h5 {
    color: var(--text-clr4);
    text-align: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 5px;
    text-align: center !important;
  }
  .modal-body {
    color: #555;
    text-align: center;
    font-size: 1.125rem;
    font-weight: 500;
    margin: 0;
    word-break: break-word;
    text-align: center;
    margin: 0;
  }

  p.alert-para {
    font-size: 1rem;
    font-weight: 500;
    color: #333 !important;
    margin: 0;
    span {
      color: #333 !important;
      a {
        color: var(--blue-clr1);
        text-decoration: none;
      }
    }
  }
  .btn-div {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 35px;
    .resend-email-btn {
      width: 100%;
      border-radius: 8px;
      background: var(--gradient-btn-clr);
      color: var(--text-white);
      font-size: 0.875rem;
      font-weight: 600;
      border: none;
      box-shadow: none;
      outline: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      padding: 14.5px 10px;
    }
    .cancel-btn {
      width: 100%;
      border-radius: 8px;
      background: var(--gray-clr7);
      color: var(--text-clr3);
      font-size: 0.875rem;
      font-weight: 600;
      border: none;
      box-shadow: none;
      outline: none;
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 5px;
      padding: 14.5px 10px;
    }
  }

  .close-btn {
    position: absolute;
    right: 10px;
    top: 0px;
    box-shadow: none;
    outline: none;
    background: none;
    border: none;
    font-size: 1.875rem;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.text-res-msg {
  width: fit-content;
  text-align: center;
  margin-inline: auto !important;
  font-size: 0.875rem !important;
  color: #555;
  padding: 3px 25px;
  border-radius: 2px;
  margin-top: 10px !important;
  border: none;
  background-color: #e7f4ee;
}
/* Confirm your email end */

/* Bootstrap date picker Start */
.datepicker.datepicker-dropdown {
  padding: 0.5rem 0.5rem;
  max-width: 250px;
  width: 100%;

  td,
  th {
    width: 35px;
    height: 30px;
    font-weight: 500 !important;
  }
  .prev {
    position: relative;
    color: transparent;
    background-color: #f1f1f1;
    &::before {
      content: "<";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #212529;
    }
  }
  .next {
    position: relative;
    color: transparent;
    background-color: #f1f1f1;
    &::before {
      content: ">";
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      color: #212529;
    }
  }
  .datepicker-switch {
    margin-inline: 5px;
  }
}
.datepicker-months,
.datepicker-years,
.datepicker-decades,
.datepicker-centuries {
  width: 100%;
  .table-condensed {
    width: 100%;
  }
  table tr td span {
    width: 50%;
    height: 50px;
  }
}
/* Bootstrap date picker End */
#post_text,
.post-text,
.post_text,
.comment-text {
  white-space: pre-line;
}
.alert.inputs__error__msg {
  background: #ffe5dd;
  border: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  padding: 9px 15px;
  padding-left: 50px;
  margin-bottom: 15px;
  text-align: left;
  .inputs__error__msg__text {
    font-size: 0.875rem;
    font-weight: 400;
    color: #db724e;
    margin: 0;
  }

  &::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><g clip-path="url(%23clip0_7898_28336)"><path d="M13 0C5.8143 0 0 5.81481 0 13C0 20.1857 5.81481 26 13 26C20.1857 26 26 20.1852 26 13C26 5.8143 20.1852 0 13 0ZM13 23.9688C6.93707 23.9688 2.03125 19.0625 2.03125 13C2.03125 6.93707 6.93748 2.03125 13 2.03125C19.0629 2.03125 23.9688 6.93748 23.9688 13C23.9688 19.0629 19.0625 23.9688 13 23.9688Z" fill="%23FFAE92"/><path d="M13 6.54443C12.4391 6.54443 11.9844 6.99913 11.9844 7.56006V14.1003C11.9844 14.6613 12.4391 15.1159 13 15.1159C13.5609 15.1159 14.0156 14.6613 14.0156 14.1003V7.56006C14.0156 6.99913 13.5609 6.54443 13 6.54443Z" fill="%23FFAE92"/><path d="M13 19.1018C13.7572 19.1018 14.3711 18.4879 14.3711 17.7307C14.3711 16.9735 13.7572 16.3596 13 16.3596C12.2428 16.3596 11.6289 16.9735 11.6289 17.7307C11.6289 18.4879 12.2428 19.1018 13 19.1018Z" fill="%23FFAE92"/></g><defs><clipPath id="clip0_7898_28336"><rect width="26" height="26" fill="white"/></clipPath></defs></svg>');
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
  }
}

.alert.inputs__success__msg {
  background: #e3f3d9;
  border: none;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border-radius: 5px;
  padding: 9px 15px;
  padding-left: 50px;
  margin-bottom: 15px;
  text-align: left;
  .msg__text {
    font-size: 0.875rem;
    font-weight: 400;
    color: #72bf44;
    margin: 0;
  }

  &::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="26" height="26" viewBox="0 0 26 26" fill="none"><path d="M13 0C5.82947 0 0 5.82947 0 13C0 20.1705 5.82947 26 13 26C20.1705 26 26 20.1705 26 13C26 5.82947 20.1705 0 13 0ZM13 23.7284C7.08842 23.7284 2.27158 18.9116 2.27158 13C2.27158 7.08842 7.08842 2.27158 13 2.27158C18.9116 2.27158 23.7284 7.08842 23.7284 13C23.7284 18.9116 18.9116 23.7284 13 23.7284Z" fill="%2372BF44"/><path d="M17.7896 9.19593C17.598 9.00435 17.2696 9.00435 17.0506 9.19593L11.4948 14.7517L8.94958 12.2065C8.758 12.0149 8.42958 12.0149 8.21064 12.2065L7.33485 13.0822C7.14327 13.2738 7.14327 13.6022 7.33485 13.8212L11.1117 17.598C11.3033 17.7896 11.6317 17.7896 11.8506 17.598L18.6654 10.8107C18.857 10.6191 18.857 10.2907 18.6654 10.0717L17.7896 9.19593Z" fill="%2372BF44"/></svg>');
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    height: 25px;
    width: 25px;
  }
}

.edit-location-div {
  display: flex;
  align-items: center;
  gap: 15px;
  background: #f2f4f5;
  padding: 8px 15px;
  color: var(--text-clr3);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
}
.create-post-location {
  margin: 0;
  margin-right: 15px;
}
.create-post-location .ui.dropdown {
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  min-height: unset;
}
.create-post-location .ui.floating.dropdown.profile-loacation > .menu.dropdown-menu-div {
  left: unset;
  right: 0;
  margin-top: 10px !important;
  border-radius: 8px !important;
  border: 1px solid #efefef !important;
  background: #fff !important;
  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.08) !important;
}

.create-post-location .ui.dropdown .scrolling.menu,
.ui.scrolling.dropdown .menu {
  max-height: 315px;
}
.create-post-location .search-div {
  display: flex;
  align-items: center;
  gap: 5px;
  height: 35px;
  border: 0;
  background-color: #f7f7f7;
  border-radius: 5px;
  padding-inline: 5%;
  outline: none;
  border: none;
  margin-inline: 5%;
  margin-top: 10px;

  input {
    padding: 0 !important;
    margin: 0;
  }
}
.create-post-location .ui.dropdown .scrolling.menu .item-head {
  color: var(--blue-clr7) !important;
  font-size: 0.75rem !important;
  font-weight: 500 !important;
}
.create-post-location .ui.dropdown .menu > .item {
  color: var(--text-clr3) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
}
.local-feed-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding-inline: 15px;

  p {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
  }

  a {
    border-radius: 5px;
    border: 1px solid var(--text-clr3);
    color: var(--text-clr3);
    font-size: 0.875rem;
    font-weight: 500;
    text-decoration: none;
    padding: 4px 15px;
  }
}

.private-follow-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  border-radius: 100px;
  border: 1px solid var(--blue-clr10);
  background: var(--blue-clr10);
  min-width: 262px;
  width: fit-content;
  height: 46px;
  padding-inline: 25px;
  color: var(--text-white);
  text-align: center;
  font-size: 1.125rem;
  font-weight: 600;
  margin-inline: auto;
  margin-top: 30px;
  & svg path {
    fill: var(--white-clr) !important;
  }

  &:hover,
  &:focus,
  &:active {
    border: 1px solid var(--blue-clr10) !important;
    background: transparent !important;
    color: var(--blue-clr10) !important;
  }
  &:hover svg path,
  &:focus svg path,
  &:active svg path {
    fill: var(--blue-clr10) !important;
  }
}

/* .customize-region-main ~ .notification-div .noty-close-btn {
  display: none;
} */

.account-verify-noty {
  padding: 10px 15px;
  .account-verify-noty-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: #ffeac0;
    padding: 15px;
    border-radius: 5px;

    .left-part {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 0.875rem;
      font-weight: 500;
      color: #59544a;
    }
    button {
      color: var(--blue-clr1);
      border: none;
      box-shadow: none;
      background-color: transparent;
      border-bottom: 2.5px solid var(--blue-clr1);
      padding-inline: 0;
      padding-block: 0 2px;
    }
  }
}

.share-modal-input-div {
  position: relative;
  display: flex;
  .share-comment-area {
    padding-right: 45px;
  }
  .icon-camera-div {
    position: absolute;
    right: 0;
    top: 0;

    button {
      border: none;
    }
  }
}

#sharePostSuggestions {
  display: none;
  position: absolute;
  background-color: #fff;
  border: 1px solid #ccc;
  max-height: 175px;
  width: fit-content;
  left: 15px;
  top: 100%;
  overflow-y: auto;
  max-width: calc(100% - 30px);
}

.if-post-deleted {
  display: flex;
  gap: 15px;
  padding-inline: 15px !important;
  padding-bottom: 20px !important;
  .left-part {
    .img-div {
      background: #f1f5f9;
      border: 1px solid var(--gray-clr7);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 120px;
      height: 100%;
    }
  }
  .right-part {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 15px;
    .text-para {
      color: var(--text-clr1);
      font-size: 0.9375rem;
      font-weight: 400;
      margin: 0;
    }
    .user-details {
      display: flex;
      align-items: center;
      gap: 5px;

      .user-img {
        position: relative;
        width: unset;
        height: unset;

        &::before {
          content: "";
          position: absolute;
          right: 0;
          bottom: 0;
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: transparent;
          border: none;
        }

        &.online::before {
          background-color: #4dd966;
          border: 2px solid #fff;
        }
        &.away::before {
          background-color: #fcaf17;
          border: 2px solid #fff;
        }
        &.hidden::before {
          background-color: var(--blue-clr3);
          border: 2px solid #fff;
        }

        div {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          overflow: hidden;
        }

        img {
          width: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      .name-time {
        color: var(--text-clr3);
        font-size: 0.8125rem;
        font-weight: 500;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 3px;

        span {
          color: var(--text-clr2);
        }
      }
    }
  }
}

.post-video-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.8);
  border: none;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 1;

  &:hover {
    background: rgba(0, 0, 0, 1);
  }
}

#videoModal {
  .video-controls {
    button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.8);
      border: none;
      border-radius: 50%;
      width: 42px;
      height: 42px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      z-index: 1;
      display: none;

      &:hover {
        background: rgba(0, 0, 0, 1);
      }
    }
  }
  .modal-video {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
  video::-webkit-media-controls-enclosure {
    overflow: hidden !important;
  }

  video::-webkit-media-controls-panel {
    display: flex !important;
    justify-content: flex-end !important;
  }

  video::-webkit-media-controls-fullscreen-button,
  video::-webkit-media-controls-overflow-menu-button {
    display: none !important;
  }
  .video-modal-close-btn {
    position: absolute;
    right: 15px;
    top: 15px;
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    outline: none;
    z-index: 1;
  }
}

.username-exits-error {
  color: #9d146a;
  font-size: 0.75rem;
  font-weight: 500;
}
.username-exits-success {
  color: #149d22;
  font-size: 0.75rem;
  font-weight: 500;
}

.username-update-btn {
  position: absolute;
  right: 1rem;
  top: 14px;
  display: flex;
  align-items: center;
  gap: 5px;
  border-radius: 8px;
  background: var(--gray-clr3);
  color: #fff;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 500;
  border: none;
  outline: none;
  box-shadow: none;
  padding: 2px 12px;
  display: none;
}
.restore-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-radius: 4px;
  background: var(--blue-clr8);
  padding: 3px 8px;
  color: var(--text-clr3);
  font-size: 0.75rem;
  font-weight: 400;
  border: none;
  box-shadow: none;
}
.username-edit-btn {
  position: absolute;
  right: 1rem;
  top: 16px;
  display: flex;
  align-items: center;
  gap: 3px;
  border-radius: 3px;
  background: #d7e1f1;
  border: none;
  box-shadow: none;
  outline: none;
  color: var(--blue-clr11);
  font-size: 0.6875rem;
  font-weight: 600;
  padding: 2px 5px;
}
.username-updated-para {
  color: var(--text-clr3);
  font-size: 0.75rem;
  font-weight: 500;
  text-align: right;
  margin-block: 5px 0;
}
.echo-post-share-btn {
  button,
  a {
    text-decoration: none;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--blue-clr8);
    background: transparent;

    &:hover {
      background: var(--gray-clr5);
      color: #747474;
    }
  }
}

.nearest-regions-main-div {
  & .head-area {
    color: var(--text-clr3);
    font-size: 0.8125rem;
    font-weight: 500;
    margin: 30px 0 15px 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 5px;
  }
  & .head-area span {
    border-radius: 8px;
    color: var(--gray-clr1);
    background-color: var(--blue-clr8);
    font-size: 0.75rem;
    font-weight: 400;
    padding: 1px 8px;
    margin-left: 8px;
  }

  & .all-selection-div {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
  }
  & .all-selection-div button {
    position: relative;
    display: inline-flex;
    padding: 5px 10px 5px 20px;
    align-items: center;
    gap: 10px;
    border-radius: 8px;
    background: var(--light-blue-bg3);
    color: #fff;
    font-size: 0.8125rem;
    font-weight: 400;
    border: none;
    box-shadow: none;
    outline: none;
    background-image: url("../images/icons/plus-icon-white.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
  }
  & .all-selection-div button.dropdown-toggle::after {
    content: none;
  }
  & .all-selection-div button.clicked {
    background: var(--blue-clr1);
    color: var(--text-white);
    background-image: url("../images/icons/plus-icon-white.svg");
    background-repeat: no-repeat;
    background-position: 10px center;
  }
  & .all-selection-div .regions-dropdown {
    background: transparent;
    border: 0;
    left: 0 !important;
    top: 100% !important;
    transform: translateX(0) !important;
  }
  & .all-selection-div .regions-dropdown .regions-dropdown-inner {
    position: relative;
    max-width: 148px;
    width: 100%;
    border-radius: 5px;
    background: #fff;
    filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.1));
  }
  & .all-selection-div .regions-dropdown .regions-dropdown-inner::before {
    content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="33" height="22" viewBox="0 0 33 22" fill="none"><path d="M3.37512 21.0439L30.1353 20.7926C32.7055 20.7684 33.9628 17.4099 32.1288 15.4674L18.6385 1.17889C17.501 -0.0258523 15.6735 -0.0104011 14.5566 1.2134L1.2868 15.7532C-0.51576 17.7283 0.80251 21.068 3.37512 21.0439Z" fill="white"/></svg>');
    position: absolute;
    left: 8px;
    top: -10px;
  }
  & .all-selection-div .regions-dropdown .regions-dropdown-inner a {
    position: relative;
    display: block;
    font-size: 0.875rem;
    line-height: 18px;
    text-align: left;
    text-decoration: none;
    color: var(--text-clr3) !important;
    font-size: 0.8125rem;
    font-weight: 400;
    cursor: pointer;
    padding: 10px 10px;
    z-index: 1;
    overflow: hidden;
  }
  & .all-selection-div .regions-dropdown .regions-dropdown-inner a:hover {
    background-color: var(--blue-clr8);
  }
  & .all-selection-div .regions-dropdown .regions-dropdown-inner a:last-child {
    margin-bottom: 0;
  }
  .region-see-all-btn {
    padding: 3px 25px 3px 15px !important;
    border: 1px solid var(--gray-clr3) !important;
    background: transparent !important;
    width: fit-content;
    border-radius: 8px;
    outline: none;
    box-shadow: none;
    color: var(--gray-clr3) !important;
    font-size: 0.875rem;
    font-weight: 400;
    margin-top: 14px;
    background-color: transparent;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="8" height="5" viewBox="0 0 8 5" fill="none"><path d="M3.89201 4.44732L3.89099 4.44623L0.544038 0.864904C0.515611 0.824342 0.498023 0.769797 0.500176 0.710147C0.502526 0.645057 0.52778 0.589251 0.562359 0.552251C0.596066 0.516184 0.634439 0.501475 0.667463 0.50011C0.697157 0.498883 0.730873 0.508049 0.762567 0.533176L3.63489 3.60306L4 3.99328L4.36511 3.60306L7.23743 0.533176C7.26913 0.508049 7.30284 0.498883 7.33254 0.50011C7.36556 0.501475 7.40393 0.516184 7.43764 0.552251C7.47222 0.589253 7.49747 0.645059 7.49982 0.710147C7.50198 0.769796 7.48439 0.824342 7.45596 0.864904L4.10901 4.44623L4.10799 4.44732C4.07343 4.48452 4.03395 4.49921 4 4.49997C3.96605 4.49921 3.92657 4.48452 3.89201 4.44732Z" fill="%239AABBC" stroke="%2396A2CD"/></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 10px) center !important;
  }
  .region-see-all-btn:hover {
    background-color: var(--gray-clr3);
    color: var(--text-white);
  }
}

.customize-region.search-result {
  color: #000;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 5px 15px 10px 15px;
}

.profile-tabs-div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  flex-wrap: nowrap;
  padding-inline: 15px;
  gap: 5px;

  .nav-link {
    color: var(--text-clr3);
    font-size: 13px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    padding: 10px 5px;

    @media (max-width: 350px) {
      font-size: 12px;
    }

    .counts-span {
      border-radius: 8px;
      background: linear-gradient(270deg, #db9200 0%, #d80b8c 100%);
      padding: 3px 5px;
      color: #fff;
      text-align: center;
      font-size: 10px;
      font-weight: 600;
      min-width: 22px;
      line-height: 1;

      @media (max-width: 350px) {
        font-size: 9px;
        min-width: 18px;
      }
    }
    svg {
      @media (max-width: 350px) {
        width: 14px;
      }
    }

    svg path {
      fill: var(--text-clr3);
    }

    &.active {
      background: #f4f7fa;
      color: var(--text-clr3);
    }
  }
}

.tab-image-div {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 5px;
  display: block;

  img.tab-post-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .img-overlay-div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    transition: all 0.25s ease-in-out;
    z-index: 1;
    opacity: 0;
    cursor: pointer;

    label {
      display: flex;
      align-items: center;
      gap: 3px;
      font-size: 12px;
      font-weight: 500;

      img {
        position: relative;
        top: 0.8px;
      }
    }

    .overlay-play-btn {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }

  &:hover .img-overlay-div {
    opacity: 1;
    transition: all 0.25s ease-in-out;
  }
}

.side-tagged-post-row {
  --gapping: 4px;
  width: 100%;
  margin-left: -calc(var(--gapping));
  margin-right: -calc(var(--gapping));
  padding-inline: 15px;

  .col-6 {
    padding-left: var(--gapping);
    padding-right: var(--gapping);
    margin-bottom: 4px;
    aspect-ratio: 1 / 1;
  }
}

.dropdown-see-more-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3px 15px 3px 5px !important;
  border: 1px solid var(--light-blue-bg3) !important;
  background: transparent !important;
  width: fit-content;
  border-radius: 4px;
  outline: none;
  box-shadow: none;
  color: var(--light-blue-bg3) !important;
  font-size: 0.625rem;
  font-weight: 400;
  margin-block: 5px 10px;
  margin-left: 15px;
  background-color: transparent;
  background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="4" viewBox="0 0 8 5" fill="none"><path d="M3.89201 4.44732L3.89099 4.44623L0.544038 0.864904C0.515611 0.824342 0.498023 0.769797 0.500176 0.710147C0.502526 0.645057 0.52778 0.589251 0.562359 0.552251C0.596066 0.516184 0.634439 0.501475 0.667463 0.50011C0.697157 0.498883 0.730873 0.508049 0.762567 0.533176L3.63489 3.60306L4 3.99328L4.36511 3.60306L7.23743 0.533176C7.26913 0.508049 7.30284 0.498883 7.33254 0.50011C7.36556 0.501475 7.40393 0.516184 7.43764 0.552251C7.47222 0.589253 7.49747 0.645059 7.49982 0.710147C7.50198 0.769796 7.48439 0.824342 7.45596 0.864904L4.10901 4.44623L4.10799 4.44732C4.07343 4.48452 4.03395 4.49921 4 4.49997C3.96605 4.49921 3.92657 4.48452 3.89201 4.44732Z" fill="%239AABBC" stroke="%2396A2CD"/></svg>') !important;
  background-repeat: no-repeat !important;
  background-position: calc(100% - 5px) center !important;

  &::after {
    content: "Show More";
  }

  &.less {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="7" height="4" viewBox="0 0 8 5" fill="none"><path d="M7.33301 4.5C7.36593 4.49852 7.40395 4.48316 7.4375 4.44727C7.47196 4.4103 7.49761 4.35494 7.5 4.29004C7.50216 4.23008 7.48377 4.17539 7.45508 4.13477L4.10938 0.553711L4.1084 0.552734C4.07385 0.515544 4.03394 0.501749 4 0.500977C3.98341 0.501354 3.96528 0.503687 3.94727 0.511719L3.8916 0.552734L3.89062 0.553711L0.543945 4.13477C0.515445 4.17535 0.497844 4.2303 0.5 4.29004C0.502385 4.35494 0.528043 4.4103 0.5625 4.44727C0.596049 4.48316 0.634073 4.49852 0.666992 4.5C0.698531 4.5013 0.734207 4.48976 0.767578 4.46094L3.63477 1.39648L4 1.00684L4.36523 1.39648L7.23145 4.46094C7.26497 4.49013 7.30129 4.50131 7.33301 4.5Z" fill="%2396A2CD" stroke="%2396A2CD"/></svg>') !important;

    &::after {
      content: "Show Less";
    }
  }
}

.auth-name {
  color: var(--text-clr7);
  text-align: center;
  font-family: "Raleway", sans-serif;
  font-size: 28px;
  font-weight: 600;
  margin-block: 20px;
}

.recent-post-error {
  margin-top: 25px;
  margin-bottom: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  font-size: 18px;
  font-weight: 500;
  color: var(--text-clr11);

  span {
    font-size: 14px;
    color: var(--blue-btn1);
    font-weight: 400;
    border: 1px solid var(--blue-btn1);
    padding: 5px 15px;
    border-radius: 5px;
    cursor: pointer;

    &:hover {
      color: var(--blue-btn1);
      border: 1px solid var(--blue-btn1);
    }
  }
}

.verify-otp-heading {
  font-family: "Raleway", sans-serif;
  color: var(--text-clr1);
  text-align: center;
  font-size: 28px;
  font-weight: 600;
  margin-bottom: 20px;
  max-width: 255px;
  margin-inline: auto;
}
.opt-timer-para {
  color: var(--text-clr3);
  text-align: center;
  font-size: 14px;
  font-weight: 600;

  .otp-timer {
    border-radius: 50px;
    background: var(--gray-clr9);
    display: inline-block;
    padding: 0.5rem 1rem;
    margin-left: 8px;
  }
}

.otp-inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  max-width: 315px;
  margin-inline: auto;

  input {
    border-radius: 16px;
    border: 1px solid var(--input-border-clr);
    background: #fff;
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.05);
    padding: 15px 5px;
  }
}

.verify-otp-page {
  min-height: 100vh;

  .create-account-btn {
    font-family: "Raleway", sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: var(--gradient-btn-clr1);
    color: #fff !important;
    text-align: center;
    font-size: 18px;
    font-weight: 600;
    width: 100%;
    padding: 10px 35px;
  }

  .success-otp-heading {
    text-align: center;
    font-size: 28px;
    font-weight: 600;
  }

  .resend-code-btn {
    width: fit-content;
    margin-inline: auto;
    color: var(--text-clr11);
    text-align: center;
    font-size: 15px;
    font-weight: 700;
    margin-block: 20px 0;
    cursor: pointer;
  }

  .bottom-part {
    position: fixed;
    bottom: 50px;
    left: 50%;
    transform: translateX(-50%);
    max-width: 420px;
    width: 100%;
    padding-inline: 15px;
    z-index: 1;
  }
}

.verified-notification-page {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 20px;
}
.no-post-msg-div {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;

  .para-1 {
    font-family: "Raleway", sans-serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text-clr1);
    margin-bottom: 0;
    max-width: 232px;
    margin-inline: auto;
    line-height: 1.2;
  }
  .para-2 {
    font-size: 0.9375rem;
    font-weight: 400;
    color: var(--text-clr3);
    margin-bottom: 0;
  }
}

.load-showing-div {
  height: 17px;
  width: 100%;
  background-color: #f6f7f9;
  border-radius: 50px;
  margin-bottom: 6px;
}

.love-react {
  .likeButton {
    position: relative;
  }
  .likeButton #heart {
    fill: rgba(125, 125, 125, 0.5);
    position: absolute;
  }

  .likeButton #circle {
    fill: none;
    position: absolute;
  }

  .likeButton #particle {
    fill: none;
    position: absolute;
    opacity: 0;
  }

  &.active .likeButton.active #heart {
    transform-origin: 50% 50%;
    animation: heartAnimation 700ms linear;
    fill: var(--pink-clr);
  }

  &.active .likeButton.active #circle {
    transform-origin: 50% 50%;
    animation: circleAnimation 800ms linear;
  }

  &.active .likeButton.active #particle {
    transform-origin: 50% 50%;
    animation: particleAnimation 1000ms linear;
  }
}

.canvas-top-react-reply-time-div {
  .likeButton {
    position: relative;
  }
  .likeButton #heart {
    fill: rgba(125, 125, 125, 0.5);
    position: absolute;
  }

  .likeButton #circle {
    fill: none;
    position: absolute;
  }

  .likeButton #particle {
    fill: none;
    position: absolute;
    opacity: 0;
  }

  .love-react.active .likeButton #heart {
    transform-origin: 50% 50%;
    animation: heartAnimation 700ms linear;
    fill: var(--pink-clr);
  }

  .love-react.active .likeButton #circle {
    transform-origin: 50% 50%;
    animation: circleAnimation 800ms linear;
  }

  .love-react.active .likeButton #particle {
    transform-origin: 50% 50%;
    animation: particleAnimation 1000ms linear;
  }
}

@keyframes heartAnimation {
  0% {
    transform: scale(0);
    stroke-width: 0;
  }

  15% {
    stroke-width: 100;
  }

  30% {
    stroke-width: 200;
  }

  50% {
    transform: scale(1.2);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes circleAnimation {
  0% {
    fill: rgba(255, 20, 147, 0);
    transform: scale(0);
  }

  20% {
    fill: rgba(255, 20, 147, 0.2);
    transform: scale(0.5);
  }

  50% {
    fill: rgba(255, 20, 147, 0.3);
  }

  100% {
    fill: rgba(255, 20, 147, 0);
    transform: scale(1.2);
  }
}

@keyframes particleAnimation {
  0% {
    fill: rgba(255, 20, 147, 0);
    transform: scale(0);
    opacity: 0.5;
  }

  20% {
    opacity: 1;
    fill: rgba(255, 20, 147, 0.2);
    transform: scale(0.2);
  }

  50% {
    opacity: 1;

    fill: rgba(255, 20, 147, 0.4);
    transform: scale(0.6);
  }

  80% {
    opacity: 1;

    fill: rgba(255, 20, 147, 0.6);
    transform: scale(1.2);
  }

  100% {
    fill: rgba(255, 20, 147, 0);
    transform: scale(0);
    opacity: 0.5;
  }
}

.hamburger .line {
  width: 27px;
  height: 3px;
  border-radius: 100px;
  background-color: #231f20;
  display: block;
  margin: 6px auto;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.hamburger:hover {
  cursor: pointer;
}
.hamburger.is-active {
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hamburger.is-active .line:nth-child(2) {
  width: 0px;
}

.hamburger.is-active .line:nth-child(1),
.hamburger.is-active .line:nth-child(3) {
  -webkit-transition-delay: 0.6s;
  -o-transition-delay: 0.6s;
  transition-delay: 0.6s;
}

.hamburger.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px);
  -ms-transform: translateY(13px);
  -o-transform: translateY(13px);
  transform: translateY(13px);
}

.hamburger.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-6px) rotate(90deg);
  -ms-transform: translateY(-6px) rotate(90deg);
  -o-transform: translateY(-6px) rotate(90deg);
  transform: translateY(-6px) rotate(90deg);
}

/* offcanvas-hamberger */

.hambuger-canvas .line {
  width: 27px;
  height: 3px;
  border-radius: 100px;
  background-color: #231f20;
  display: block;
  margin: 6px auto;
  -webkit-transition: all 0.6s ease-in-out;
  -o-transition: all 0.6s ease-in-out;
  transition: all 0.6s ease-in-out;
}

.hambuger-canvas:hover {
  cursor: pointer;
}
.hambuger-canvas.is-active {
  -webkit-transition: all 0.45s ease-in-out;
  -o-transition: all 0.45s ease-in-out;
  transition: all 0.45s ease-in-out;
  -webkit-transition-delay: 0.45s;
  -o-transition-delay: 0.45s;
  transition-delay: 0.45s;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.hambuger-canvas.is-active .line:nth-child(2) {
  width: 0px;
}

.hambuger-canvas.is-active .line:nth-child(1),
.hambuger-canvas.is-active .line:nth-child(3) {
  -webkit-transition-delay: 0.1s;
  -o-transition-delay: 0.1s;
  transition-delay: 0.1s;
}

.hambuger-canvas.is-active .line:nth-child(1) {
  -webkit-transform: translateY(13px);
  -ms-transform: translateY(13px);
  -o-transform: translateY(13px);
  transform: translateY(13px);
}

.hambuger-canvas.is-active .line:nth-child(3) {
  -webkit-transform: translateY(-6px) rotate(90deg);
  -ms-transform: translateY(-6px) rotate(90deg);
  -o-transform: translateY(-6px) rotate(90deg);
  transform: translateY(-6px) rotate(90deg);
}

/* Copy link start */
.copy-link-popup {
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  background: var(--blue-clr-12);
  max-width: 415px;
  margin-inline: auto;
  z-index: 9999;
  padding: 10px 15px;
  border-radius: 10px 10px 0 0;
  transition: all 0.3s ease-in-out;
  overflow: hidden;

  &.active {
    bottom: 0;

  }

  .popup-btn{
    width: 100%;
    background: transparent;
    box-shadow: none;
    outline: none;
    border: none;
    text-align: start;
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px;
    
    

    &:hover , &:focus , &:active {
      background: #133658;
      color: #fff;
    }
  }
}

/* Copy link end */