@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;500;600;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
*::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}
*::-webkit-scrollbar-track {
  background: transparent;
  margin: 0.5em 0;
}

*::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 5px;
}
:root {
  --yomeco-blue: hsla(205, 90%, 48%, 1);
  --box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  --box-shadow-bottom: 0 1px 1px rgba(0, 0, 0, 0.2);
  --box-shadow-right: 1.5px 0 1.5px -1.5px rgba(0, 0, 0, 0.2);
}
body {
  font-family: "Nunito", sans-serif;
}
/* Optional: Headings */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Nunito', sans-serif;
  font-weight: 600; /* adjust as needed */
}
.navbar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: linear-gradient(to right, #0c8ce9, #0f5498, #102f63);
  height: 4rem;
  width: 100%;
  position: fixed;
  z-index: 9;
  top: 0;
}
.navbar-logo {
  flex: 4;
  padding-left: 4.5em;
}
.navbar-logo img {
  max-height: 35px;
}

.navbar-active-page {
  flex: 3;
  color: white;
  font-weight: 600;
  text-align: left;
  font-size: 18px;
  letter-spacing: 1px;
}
.navbar-search {
  flex: 8;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0em 0.5em;
  background-color: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  height: 2em;
}
.navbar-search input {
  width: 90%;
  background-color: transparent !important;
  outline: none;
  border: none;
  padding: 0em 0.9em;
  color: white;
}
.navbar-search input:focus {
  background-color: transparent !important;
}

.navbar-search input::placeholder {
  color: white;
  opacity: 0.6;
}
.navbar-search svg {
  width: 10%;
  fill-opacity: 0.6;
}
.navbar-search:focus-within {
  border: 1px solid hsla(227, 63%, 18%, 0.4);
}
.navbar-search:focus-within svg {
  fill-opacity: 1;
}

.navbar-icons {
  flex: 11;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 1.5em;
  padding-right: 4em;
  margin-right: 4em;
}
.message-top-sidebar-right {
  width: 4.5em;
  background-color: rgba(248, 249, 251, 1);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbar input:-webkit-autofill,
.navbar input:-webkit-autofill:hover,
.navbar input:-webkit-autofill:focus,
.navbar input:-webkit-autofill:active {
  -webkit-box-shadow: 0 0 0 1000px transparent inset !important;
  -webkit-text-fill-color: white !important;
}

.navbar input:-moz-autofill {
  box-shadow: 0 0 0 1000px transparent inset !important;
  -moz-text-fill-color: white !important;
}

.navbar input:focus,
.navbar input:active {
  background-color: transparent !important;
  color: white !important;
}
.navbar-icons .navbar-icon {
  background-color: rgba(255, 255, 255, 0.15);
  height: 1.8em;
  width: 1.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  transition: 1s;
}
.navbar-icons .navbar-icon:hover {
  border: solid 1.5px white;
  transform: scale(1.1);
  background-color: rgba(255, 255, 255, 0.3);
}
.navbar-icons .navbar-icon-image {
  width: 2.8em;
  height: 2.8em;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  border: 4px solid hsla(227, 63%, 18%, 0.3);
  transition: 1s;
}
.navbar-icons .navbar-icon-image:hover {
  transform: scale(1.1);
  border: 4px solid hsla(227, 63%, 18%, 0.5);
}
.navbar-icons .navbar-icon-image img {
  margin-top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mobile-navbar-menu-icon {
  display: none;
}
.main-section {
  display: flex;
  justify-content: space-between;
  padding-top: 4em;
}
.main-section .sidebar-left {
  background-color: rgba(248, 249, 251, 1);
  height: 100%;
  position: fixed;
  padding: 1.5em 1.5em;
  width: 13em;
}
.main-section .main-division {
  background-color: white;
}
.main-section .sidebar-right {
  background-color: rgba(248, 249, 251, 1);
  height: 100%;
  position: fixed;
  right: 0;
  width: 4.5em;
}

.sidebar-left ul {
  list-style: none;
}
.sidebar-left ul li,
.sidebar-left .settings-item {
  padding: 0.3em 0.5em;
  margin: 0.3em 0;
  display: flex;
  align-items: center;
  font-size: 16px;
  border-radius: 7px;
}
.sidebar-left ul li a,
.sidebar-left .settings-item a {
  text-decoration: none;
  /* padding-left: 0.9em; */
  color: black;
  width: 80%;
  text-wrap: nowrap;
  font-size: 15px;
}

.sidebar-left .link-active {
  background-color: rgba(12, 140, 233, 1);
  color: white;
}
.sidebar-left .link-active a {
  color: white;
}
.sidebar-left .sidebar-left-icon {
  width: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar-left .link-active svg {
  stroke: white;
}
.sidebar-left .for-you {
  margin-top: 0.5em;
}
.sidebar-left .for-you-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-weight: 600;
}
.overflow-scroll {
  overflow-x: hidden;
  overflow-y: scroll;
  height: 60vh;
  padding-bottom: 2em;
}
.float-bottom {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  /* height: 20vh; */
}

.sidebar-left .account-settings {
  position: absolute;
  bottom: 4.5em;
}
.sidebar-left-icon svg {
  stroke: black;
}

.hovered {
  border: solid 1px rgba(12, 140, 233, 1);
}
.hovered svg {
  stroke: rgba(12, 140, 233, 1);
}
.hovered a:hover {
  color: rgba(12, 140, 233, 1);
}
.sidebar-right ul li img {
  height: 20px;
}
.sidebar-right ul {
  list-style: none;
  display: flex;
  justify-content: center;
  flex-direction: column;
}

.sidebar-right .profile-image {
  width: 2.8em;
  height: 2.8em;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  margin: 0.5em;
  position: relative;
}
.sidebar-right .profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.offline-users-profile .status-check-dot {
  position: absolute;
  background-color: rgba(255, 255, 255, 1);
  border: 4px solid rgba(220, 220, 220, 1);
  border-radius: 50%;
  bottom: 0;
  right: 0;
  height: 1em;
  width: 1em;
}
.live-users-profile .status-check-dot {
  position: absolute;
  background-color: rgba(12, 140, 233, 1);
  border-radius: 50%;
  bottom: 0;
  right: 0;
  height: 1em;
  width: 1em;
}
.main-section .main-division {
  /* border-right: solid 2px rgba(248, 249, 251, 1);
  border-left: solid 2px rgba(248, 249, 251, 1); */
  padding: 3em 5em 3em 5em;
  margin: 0 0em 0 17em;
  width: 100%;
}
.sidebar-right .expand {
  position: absolute;
  right: 2em;
  bottom: 5em;
}
.main-division .user-create-post {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  background-color: white;
  border-radius: 15px;
  padding: 1em 0.5em;
  border: solid 1px rgba(231, 237, 242, 1);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
}
.main-division .user-profile-image {
  /* width: 2.8em;
  height: 2.8em; */
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  margin: 0.5em;
  position: relative;
}
.main-division .user-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.main-division .user-create-post-input-group {
  width: 80%;
}
.main-division .w-8 {
  width: 10em;
}
.main-division .user-create-post-input-group input {
  width: 100%;
  padding: 0.5em 1em;
  color: black;
  border-radius: 18px;
  border: 1px solid rgba(231, 237, 242, 1);
  transition: box-shadow 0.3s ease;
}
.main-division .user-create-post-input-group input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-color: rgba(231, 237, 242, 0.3);
}
.main-division .user-create-post-input-group input::placeholder {
  color: rgba(117, 117, 121, 1);
}
.main-division .post-filters {
  display: flex;
  align-items: center;
  justify-content: center;
  text-wrap: nowrap;
  font-size: small;
}
.main-division .post-filters div {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 1em 1em;
  padding: 0.7em;
  width: fit-content;
  border-radius: 18px;
  background: rgba(248, 247, 248, 1);
}
.post-filters svg {
  margin-right: 0.5em;
}
.main-division.yomeco-tv .post-filters .top-posts {
  background: hsla(227, 63%, 18%, 1);
}
.main-division .post-filters {
  z-index: 5;
  position: relative;
}
.main-division .post-filters .top-posts {
  background: linear-gradient(to right, #0c8ce9, #0f5498, #102f63);
  border-radius: 18px;
  color: white;
}

.post-container {
  padding: 0em 2em;
}
.main-section .post-title {
  display: flex;
  justify-content: space-between;
  align-items: start;
  padding: 0px 10px;
}

.post-profile-image {
  /* width: 2em;
  height: 2em; */

  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  position: relative;
  margin-right: 0.5em;
}
.post-profile-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.small-circle-image {
  width: 2.8em;
  height: 2.8em;

  display: flex;
  justify-content: center;
  align-items: center;
  transition: 1s;
  position: relative;
  margin-right: 0.5em;
}
.small-circle-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 50%;
}
.post-owner-info {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 0.5em 0.5em 0.5em 0;
}
.post-owner-info .post-author-information > div {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}
.post-owner-info .post-author-information .post-author-name {
  font-weight: 600;
  text-wrap: nowrap;
  font-size: 14px;
}
.post-author-information .post-author-username {
  font-weight: 400;
  font-size: 14px;
  text-wrap: nowrap;
}
.post-author-information .author-username-verified svg {
  margin-left: 0.3em;
}
.post-title .far-right-da-ex {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.post-title .far-right-da-ex .date {
  padding: 0.5em;
  margin-right: 1em;
  color: rgba(17, 29, 74, 0.3);
  font-size: 12px;
  text-wrap: nowrap;
}
.post-title .far-right-da-ex svg {
  rotate: -90deg;
}
.post-container .post-content {
  background: rgba(248, 247, 248, 1);
  padding: 1em 1.1em;
  border-radius: 7px;
  margin-bottom: 0.5em;
}
.post-container .post-content p {
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: justify;
  /* height: */
}
.post-content a {
  color: black;
  text-decoration-color: black;

  font-weight: 300;
}
.post-content a:hover {
  color: black;
  font-weight: 500;
  text-decoration-color: #0c8ce9;
}

.post-container .post-footer-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(17, 29, 74, 0.1);
  border-bottom: 1px solid rgba(17, 29, 74, 0.1);
  padding: 0px 10px;
}
.post-footer-action .reaction-group {
  display: flex;
  justify-content: center;
  align-items: center;
}
.post-footer-action div {
  padding: 0.5em 0em 0.5em 0;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.post-footer-action .reaction-group div svg:first-child {
  margin-right: 0.5em;
}
.reaction-group .likes span {
  color: rgba(12, 140, 233, 1);
}
.post-footer-action .post-footer-views {
  gap: 6px;
  color: rgba(17, 29, 74, 0.3);
}
.post-content .post-image {
  height: 12em;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  transition: 1s;
  position: relative;
  margin-bottom: 0.5em;
}
.post-content .post-image img {
  /* width: 100%; */
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 7px;
}
.footer .mobile-footer {
  display: none;
}
.mobile-lsh {
  display: none;
}
.sidebar-left .close {
  display: none;
}
.main-division.yomeco-tv {
  margin-right: 8em;
  padding: 2em 0em;
}
.main-division.yomeco-tv .yomeco-tv-container {
  display: flex;
  justify-content: center;
  align-items: center;
}

.main-division.yomeco-tv .video-switch {
  display: flex;
  align-items: center;
  justify-content: space-around;
  flex-direction: column;
}
.main-division.yomeco-tv .video-switch div {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 2em;
  width: 2em;
  background-color: hsla(0, 0%, 0%, 0.04);
  border-radius: 50%;
}
.main-division.yomeco-tv .video-switch {
  flex: 1;
}
.main-division.yomeco-tv .video-container {
  flex: 5;
  height:80vh;
  display: grid;
  place-items: center;
  background-color: black;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  box-shadow: -1px 0 1px -1px rgba(0, 0, 0, 0.1), 0 3px 1px rgba(0, 0, 0, 0.1),
    3px 0 1px -1px rgba(0, 0, 0, 0.1), 0 -1px 1px rgba(0, 0, 0, 0.1);
  background: center center / cover no-repeat;
  overflow: hidden;
  position: relative;
}

.video-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.9;
  background: center center / cover no-repeat;

  filter: blur(35px);
}
.video-container::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.main-division.yomeco-tv .video-container video {
  width: 100%;
  height: 100%;
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  z-index: 1;
}
.main-division.yomeco-tv .video-desc {
  flex: 5;
  height: 80vh;
  background-color: hsla(220, 27%, 98%, 1);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  padding: 1em 3vw;
  margin-right: 1em;
  box-shadow: 2px 0 2px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1),
    0 -2px 2px rgba(0, 0, 0, 0.1);
  /* overflow-y: auto; */
}

.main-division.yomeco-tv .video-switch div:first-child {
  margin-bottom: 1em;
}
.main-division.yomeco-tv .video-desc .post-title .far-right-da-ex svg {
  transform: rotate(90deg);
}
.main-division.yomeco-tv .video-category {
  font-size: x-small;
  color: #636363;
}
.main-division.yomeco-tv .vid-title {
  display: flex;
  justify-content: space-between;
}
.main-division.yomeco-tv .vid-desc-group {
  flex: 8;
  padding: 0.5em 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5em;
}
.main-division.yomeco-tv .views-count {
  color: #636363;
  display: flex;
  align-items: center;
  gap: 0.5em;
  font-size: 12px;
  width: 100%;
}
.main-division.yomeco-tv .views-count svg {
  stroke: hsla(0, 0%, 0%, 0.3);
}
.main-division.yomeco-tv .video-like {
  flex: 2;
  display: flex;
  padding-top: 0.2em;
  justify-content: space-evenly;
}
.main-division.yomeco-tv .video-like span {
  color: #0c8ce9;
}
.main-division.yomeco-tv .vid-title .title {
  font-weight: 600;
  color: black;
  font-size: 16px;
  width: 100%;
}
.main-division.yomeco-tv .vid-title .desc {
  font-size: 12px;
  width: 100%;
}
.main-division.yomeco-tv .comment-count {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 0;
  align-items: center;
}
.main-division.yomeco-tv .new-comment {
  flex: 8;
}
.main-division.yomeco-tv .new-comment input {
  padding: 0.5em 1em;
  width: 97%;
  background-color: hsla(0, 0%, 0%, 0.04);
  border-radius: 14px;
  border: none;
}
.main-division.yomeco-tv .new-comment input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-color: rgba(231, 237, 242, 0.3);
}
.main-division.yomeco-tv .new-comment input::placeholder {
  color: hsla(218, 4%, 51%, 1);
}
.main-division.yomeco-tv .count-svg {
  display: flex;
  /* justify-content: space-evenly;
  flex: 2; */
}
.main-division.yomeco-tv .comments-container {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 0.5em;
  color: hsla(0, 0%, 0%, 0.46);
  padding: 1.5em 0.5em;
}
.main-division.yomeco-tv .video-mobile-desc {
  display: none;
}
.main-division.yomeco-tv .video-mobile-desc .count-svg svg {
  stroke: black;
}
.main-division.yomeco-tv {
  padding: 1em 2em 1em 2em;
}
.main-search {
  flex: 8;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 0em 0.5em;
  background-color: hsla(0, 0%, 0%, 0.04);
  border-radius: 16px;
  height: 2em;
}
.main-division.profile .main-search {
  flex: unset;
  width: 50%;
}
.main-division.profile.shop-page .main-search {
  width: 100%;
  margin: 0 auto;
}
.main-division.profile .xx-show-flex.main-search {
  width: 100%;
  margin: 0.5em 0em;
}
.main-search input {
  width: 90%;
  background-color: transparent !important;
  outline: none;
  border: none;
  padding: 0em 0.9em;
}
.main-search input:focus {
  background-color: transparent !important;
}

.main-search input::placeholder {
  color: black;
  opacity: 0.6;
}
.main-search svg {
  width: 10%;
  fill-opacity: 0.6;
}
.main-search:focus-within {
  border: 1px solid hsla(0, 0%, 0%, 0.1);
}
.main-search:focus-within svg {
  fill-opacity: 1;
}

.main-division.yomeco-events,
.main-division.event-offer {
  display: flex;
  gap: 1em;
  padding: 3em 2em 3em 2em;
  margin: 0 0 0 16em;
  justify-content: space-evenly;
}
.main-division.yomeco-events .event-listings,
.main-division.event-offer .event-desc-ex {
  flex: 6;
  width: 100%;
  padding: 0.5em;
}
.main-division.profile .profile-tfgs {
  flex: 8;
  width: 20rem;
  padding: 0.5em;
  gap: 2em;
}
.main-division.yomeco-events .event-expound,
.main-division.event-offer .event-expound {
  flex: 4;
  min-width: 10em;
  max-width: 17em;
  padding: 1em;
}

/* Auto height on tablet and mobile */
@media (max-width: 991.98px) {
  .main-division.yomeco-events .event-expound,
  .main-division.event-offer .event-expound {
    max-width: none;
  }
}
.main-division .invite-links {
  flex: 3;
  width: 100%;
  padding: 1em;
  position: sticky;
  top: 6.2em;
}
.main-division.yomeco-events .yomeco-featured-event {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  margin-top: 0.3em;
  padding: 1.1em;
}
.main-division.yomeco-events .events-title {
  margin-bottom: 0.5em;
}
.main-division.yomeco-events .event-detail {
  background-color: hsla(0, 0%, 0%, 0.04);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5em 0;
  padding: 0.5em 1.2em;
}
.marketplace .event-detail {
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5em 0;
  padding: 0.5em 1.2em;
}
.market-place .otr-events {
  margin-top: 1em;
}
.market-place .event-detail:nth-child(2) {
  background-color: hsla(0, 0%, 0%, 0.04);
}
.event-right {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.event-right .event-title {
  font-size: 12px;
  font-weight: 500;
}
.event-right .event-desc {
  font-size: 10px;
  font-weight: 400;
  color: hsla(0, 0%, 0%, 0.2);
}
.main-division.yomeco-events .otr-events {
  padding: 1.1em;
}
.main-division .event-expound {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  margin-top: 0.3em;
  padding: 1.1em;
  height: fit-content;
}
.main-division .event-expound h3 {
  font-weight: 600;
  font-size: 20px;
}
.main-division.yomeco-events .yomeco-featured-event h4,
.main-division.event-offer .event-desc-ex h4 {
  font-weight: 600;
}
.main-division .event-expound .expound-desc,
.main-division .invite-links .invite-desc {
  font-weight: 400;
  font-size: 14px;
  color: hsla(0, 0%, 0%, 0.5);
  padding-right: 1em;
}
.main-division .create-event {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: hsla(205, 90%, 48%, 1);
  color: white;
  padding: 0.5em;
  border-radius: 15px;
  margin: 0.5em 0;
  margin-top: 1.2em;
  font-size: 14px;
}
.main-division .invite-link-group {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  padding: 0.5em;
  border-radius: 15px;
  margin: 0.5em 0;
  margin-top: 1.2em;
  font-size: 0.7em;
  text-wrap: nowrap;
}
.main-division .manage-event {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: black;
  padding: 0.5em;
  border-radius: 15px;
  font-size: 14px;
  margin: 1em 0;
  background-color: hsla(0, 0%, 85%, 0.32);
}
.main-division .manage-event svg,
.main-division .create-event svg,
.main-division .invite-link-group svg {
  flex: 2;
}
.main-division .manage-event p,
.main-division .create-event p,
.main-division .invite-link-group p {
  flex: 8;
}

.main-division.event-offer .event-desc-ex {
  display: flex;
  flex-direction: column;
  gap: 1em;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  padding: 1.4em 1.4em 3em 1.4em;
}
.main-division.event-offer .event-requirements {
  text-align: justify;
  font-size: 12px;
}
.main-division.event-offer .event-requirements p {
  margin-bottom: 2em;
}

.main-division.yomeco-jobs .ls-display-none,
.main-division.yomeco-events .ls-display-none {
  display: none;
}

.sm-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.5em;
}

.main-division.yomeco-jobs,
.main-division.job-offer {
  display: flex;
  gap: 1em;
  padding: 3em 2em 3em 2em;
  /* margin: 0 14em 0 17em; */
  justify-content: space-evenly;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .main-division.yomeco-jobs,
  .main-division.job-offer {
      display: flex;
      gap: 1em;
      padding: 2em 1em 1em 0em;
      justify-content: space-evenly;
  }
}

.main-division.yomeco-jobs .job-listings,
.main-division.job-offer .job-desc-ex {
  flex: 6;
  width: 100%;
  padding: 0.5em;
}
/* .main-division.yomeco-jobs .job-expound,
.main-division.job-offer .job-expound {
  flex: 4;
  min-width: 10em;
  max-width: 17em;
  padding: 1em;
} */
.main-division.yomeco-jobs .yomeco-featured-job {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  margin-top: 0.3em;
  padding: 1.1em;
}
.wishlist-wrapper {
  flex: 4;
  min-width: 10em;
  max-width: 17em;
}
.main-division.yomeco-jobs .jobs-title {
  margin-bottom: 0.5em;
}
.main-division.yomeco-jobs .job-detail {
  background-color: hsla(0, 0%, 0%, 0.04);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.5em 0;
  padding: 0.5em 1.2em;
}
.main-division.yomeco-jobs .job-right {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.main-division.yomeco-jobs .job-right .job-title {
  font-size: 12px;
  font-weight: 500;
}
.main-division.yomeco-jobs .job-right .job-desc {
  font-size: 10px;
  font-weight: 400;
  color: hsla(0, 0%, 0%, 0.2);
}
.main-division.yomeco-jobs .otr-jobs {
  padding: 1.1em;
}
.main-division .job-expound,
.invite-links {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  margin-top: 0.3em;
  padding: 1.1em;
  height: fit-content;
}
.wishlist-wrapper .myWishlist {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  margin-top: 2em;
  padding: 1em 0.7em;
  height: fit-content;
}
.main-division .job-expound h3 {
  font-weight: 600;
  font-size: 20px;
}
.main-division.yomeco-jobs .yomeco-featured-job h4,
.main-division.job-offer .job-desc-ex h4 {
  font-weight: 600;
}
.main-division .job-expound .expound-desc {
  font-weight: 400;
  font-size: 14px;
  color: hsla(0, 0%, 0%, 0.5);
  padding-right: 1em;
}
.myWishlist .expound-desc {
  font-weight: 400;
  font-size: 14px;
  color: hsla(0, 0%, 0%, 0.5);
  padding-right: 1em;
  margin-top: 0.4em;
}
.main-division .create-job {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: hsla(205, 90%, 48%, 1);
  color: white;
  padding: 0.5em;
  border-radius: 15px;
  margin: 0.5em 0;
  margin-top: 1.2em;
  font-size: 14px;
}
.main-division .sub-prem-in{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  background-color: hsla(223, 100%, 33%, 0.07);
  padding: 0.5em;
  border-radius: 15px;
  margin: 0.5em 0;
  margin-top: 0.1em;
  font-size: 14px;}
  .main-division .sub-prem-out{
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color:hsla(0, 0%, 0%, 0.04);
   
    padding: 0.5em;
    border-radius: 15px;
    margin: 0.5em 0;
    margin-top: 0.1em;
    font-size: 14px;}

.sub-prem-in .title, .sub-prem-out .title{
  color:transparent;
background:linear-gradient(90deg, #0C8CE9 0%, #074F83 100%);
background-clip:text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight:600;
font-size:14px;
}
.sub-prem-in .extr, .sub-prem-out .extr{
gap:0.5em;
}
.sub-prem-in .extr p,.sub-prem-out .extr p {
  font-weight:400;
  color: hsla(0, 0%, 0%, 0.66);
  font-size:9px;


}
.main-division .manage-job {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  color: black;
  padding: 0.5em;
  border-radius: 15px;
  font-size: 14px;
  margin: 1em 0;
  background-color: hsla(0, 0%, 85%, 0.32);
}
.main-division .manage-job svg,
.main-division .create-job svg {
  flex: 2;
}
.main-division .manage-job p,
.main-division .create-job p {
  flex: 8;
}

.main-division.job-offer .job-desc-ex {
  display: flex;
  flex-direction: column;
  gap: 1em;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  padding: 1.4em 1.4em 3em 1.4em;
}
.main-division.job-offer .job-requirements {
  text-align: justify;
  font-size: 12px;
}
.main-division.job-offer .job-requirements p {
  margin-bottom: 2em;
}

.main-division.profile .profile-container {
  display: flex;
  gap: 1em;
  justify-content: space-evenly;
}
.flex-column {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex-space-between {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cover-image {
  overflow: hidden;
}
.cover-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.shared-item .cover-image {
  width: 2em;
  height: 2em;
  border-radius: 50%;
}
.shared-item .cover-image:first-child {
  border: solid 1.5px hsla(229, 48%, 16%, 1);
  z-index: 2;
}
.shared-item .cover-image:nth-child(2) {
  position: absolute;
  right: 0;
  z-index: 1;
}
.img-w-wrapper {
  width: 3.5em;
  height: 2em;
  position: relative;
}
.main-division.profile .profile-image {
  height: 5.5em;
  width: 5.5em;
  border-radius: 50%;
  overflow: hidden;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.main-division.profile.profile-edit-main .profile-image,
.main-division.profile.settings-main .profile-image {
  top: 6.25em;
  transform: translate(-50%);
}
.main-division.profile .profile-info-detail {
  position: relative;
  /* flex: 8; */
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  border-radius: 15px;
  overflow: hidden;
}
.main-division.profile .profile-info-detail .profile-banner {
  width: 100%;
  height: 12em;
  position: relative;
}

.main-section .main-division.profile {
  padding: 2em 5em 2em 16.5em;
  margin: 0 0 0 3rem;
}
.main-section .main-division.profile.profile-edit-main {
  padding: 3em 5em 3em 5em;
  /* margin: 0 14em 0 17em; */
}
.main-division .invite-email {
  color: white;
  background-color: hsla(205, 90%, 48%, 1);
}
.main-division .invite-whatsapp {
  color: white;
  background-color: hsla(131, 68%, 48%, 1);
}
.main-division .invite-link {
  color: hsla(218, 4%, 51%, 1);
  background-color: hsla(0, 0%, 85%, 0.32);
}

.main-division.profile .profile-info-detail ul {
  list-style: none;
  gap: 1em;
}
.main-division.profile .disn {
  font-weight: 600;
  font-size: 1em;
  margin: 0.3em auto;
}
.main-division.profile .username {
  font-weight: 400;
  font-size: 0.8em;
  margin-bottom: 1.5em;
  color: hsla(240, 2%, 47%, 1);
}
.main-division.profile .profile-txt-detail {
  height: 7em;
  padding: 3em 1.3em 1.3em 1.3em;
  gap: unset;
  position: relative;
}

.main-division.profile.profile-edit-main .profile-txt-detail {
  height: auto;
  gap: 1em;
  margin-top: 2em;
}
.main-division.profile.settings-main .profile-txt-detail {
  height: auto;
  gap: 0.5em;
}
.main-division.profile .edit-profile-btn {
  position: absolute;
  top: 1em;
  right: 1em;
  /* background-color: hsla(0, 0%, 100%, 0.35); */
  border-radius: 9px;
  padding: 0.1em 0.3em;
}
.main-division.profile.profile-edit-main .edit-profile-btn {
  background-color: hsla(131, 68%, 48%, 0.25);
}
.main-division.profile .edit-profile-btn a {
  text-decoration: none;
  color: hsla(0, 0%, 0%, 0.7);
}
.main-division.profile .edit-profile-btn a span {
  font-size: 0.8em;
}

.main-division.profile .pm-unset {
  margin: 0;
  padding: 0;
}

.main-division.profile .tfgs {
  border-radius: 15px;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
  position: sticky;
  top: 0;
  transition: height 0.5s ease-in-out;
}
.btn-reset {
  border: none;
  margin: none;
  outline: none;
  background-color: transparent;
  transition: 0.2s;
}
.main-division.profile .tfgs .tfgs-switch {
  justify-content: flex-start;
  gap: 1em;
  padding: 1.1em 1.1em 0 1.1em;
  border-bottom: 1px solid hsla(0, 0%, 0%, 0.03);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  position: sticky;
  top: 3.5em;
  background-color: white;
  z-index: 2;
  border-radius: 15px;
  border-radius: 15px 15px 0 0;
}
.main-division.profile .tfgs .tfgs-switch .switch-btn {
  padding: 0.5em 0.5em 1.1em 0.5em;
  font-weight: 600;
  font-size: 0.9em;
}
.main-division.profile .tfgs-switch span {
  color: white;
  font-size: 0.6em;
}
.main-division.profile .tfgs-numeric {
  background-color: hsla(205, 90%, 48%, 1);
  height: 1em;
  width: 1em;
  margin-bottom: 0.7em;
  border-radius: 50%;
}

.container-hide {
  display: none;
}

.active {
  display: block !important;
}
.active-custom {
  display: block !important;
}
.lg-show {
  display: flex;
}
.page-active {
  border-bottom: 2px solid hsla(205, 90%, 48%, 1);
  color: hsla(205, 90%, 48%, 1);
}

.main-division.profile .post-content p span {
  font-weight: 500;
  color: hsla(205, 90%, 48%, 1);
}
.main-division.profile
  .post-author-information
  .post-author-name
  .mention-append {
  margin-right: 0.5em;
  font-size: 1em;
  font-weight: 400;
}
.mention-icon-ps {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 1.3em;
  width: 1.3em;
  background-color: hsla(205, 90%, 48%, 1);

  border-radius: 50%;
  padding: 1em;
  font-size: 0.7em;
  color: white;
}

.main-division.profile .container-header-gr {
  justify-content: flex-start;
  gap: 0.5em;
}
.main-division.profile .tfgs-big-numeric {
  background-color: hsla(205, 90%, 48%, 1);

  height: 1.1em;
  width: 1.1em;
  border-radius: 50%;
}
.main-division.profile .tfgs-big-numeric span {
  padding: 1em;
  color: white;
  font-size: 0.7em;
}

.main-division.profile .friends-container,
.main-division.profile .groups-container,
.main-division.profile .exchange-container {
  padding: 0.8em;
}
.main-division.profile .friend-request,
.main-division.profile .friend-listing {
  width: 47%;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  padding: 0.7em 0.8em;
  border-radius: 15px;
  margin: 0.5em 0;
}
.main-division.profile .friend-listing.shop {
  width: 100%;
}
.main-division.profile .friend-listing.shop .mutuals {
  font-size: 0.9em;
  width: 80%;
  text-wrap: wrap;
}
.main-division.profile .wishlist-wrapper .friend-listing.shop .mutuals {
  width: 100%;
  font-size: 0.6em;
}
/* .main-division .friend-listing.shop .user-profile-image {
  width: 3.2em;
  height: 3.2em;
} */
.main-division.profile .request-user-info .user-dis-request,
.friend-user-info .user-dis-friend {
  font-weight: 500;
  text-wrap: nowrap;
  font-size: 0.8em;
}
.main-division.profile .mutuals {
  font-weight: 400;
  font-size: 0.6em;
  color: hsla(0, 0%, 0%, 0.3);
}
.main-division .gr-friend {
  padding: 1em 0;
  gap: 6%;
  width: 100%;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.main-division.profile .accept {
  padding: 0.3em;
  margin-right: 0.4em;
  border-radius: 50%;
  background-color: hsla(205, 90%, 48%, 1);
}
.main-division.profile .friend-message {
  height: 1.5em;
  width: 1.5em;
  background-color: hsla(0, 0%, 0%, 1);
  margin-right: 0.4em;
  border-radius: 50%;
}
.main-division.profile .reject {
  background-color: hsla(0, 0%, 0%, 0.09);
  padding: 0.3em;
  border-radius: 50%;
}
.main-division.profile .friend-more {
  height: 1.5em;
  width: 1.5em;
  padding: 0;
  background-color: hsla(0, 0%, 0%, 0.09);
  border-radius: 50%;
}
.main-division.profile-edit-main .social-media-links {
  gap: 0.5em;
  width: 100%;
}
.main-division.profile-edit-main .social-media-links li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 65%;
  height: 3em;
  background-color: hsla(0, 0%, 95%, 1);
  border-radius: 10.52px;
  padding: 0.5em 1em;
  margin: 0 auto;
}
.main-division.profile-edit-main .social-media-links li button {
  font-size: small;
  padding: 0.4em;
  outline: none;
  border: none;
  border-radius: 10.52px;
  width: 7em;
}
.main-division.profile-edit-main .social-media-links li button.link {
  background-color: hsla(205, 90%, 48%, 1);
}
.main-division.profile-edit-main .social-media-links li button.unlink {
  background-color: hsla(0, 0%, 0%, 0.05);
}
.main-division.profile-edit-main .social-media-links li div {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 1em;
}
.main-division.profile-edit-main .profile-txt-detail label {
  font-size: 0.9em;
  font-weight: 600;
  color: hsla(0, 0%, 0%, 0.7);
  width: 40%;
  text-align: right;
}
.main-division.profile-edit-main .profile-txt-detail > div:not(:first-child) {
  gap: 1.5em;
  width: 70%;
  margin: 0 auto;
  position: relative;
  height: fit-content;
}

.main-division.profile-edit-main .profile-txt-detail input,
.username-update-gr {
  flex: 5;
}
.main-division.profile-edit-main .profile-txt-detail input {
  border-radius: 10.52px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  outline: none;
  padding: 0.5em 1em;
  border: none;
  width: 100%;
}
.main-division.profile-edit-main .profile-txt-detail .username-update-gr input {
  padding-left: 2em;
  width: 100%;
}
.main-division.profile-edit-main .profile-txt-detail input:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-color: rgba(231, 237, 242, 0.3);
}
.main-division.profile-edit-main .username-update-gr .username-initiate {
  position: absolute;
  top: 0.43em;
  left: 0.4em;
  color: hsla(0, 0%, 0%, 0.2);
  font-size: 0.8em;
}
.main-division.profile-edit-main .username-update-gr {
  position: relative;
}
.main-division.profile-edit-main .profile-info-detail .profile-txt-detail h4 {
  margin-top: 3em;
}
.main-division.profile-edit-main .profile-txt-detail ul {
  font-size: 0.9em;
}
.main-division.profile-edit-main .update-btn {
  border: none;
  width: fit-content;
  gap: 1em;
  margin: auto;
  margin-top: 1.3em;
  background-color: hsla(131, 68%, 48%, 0.8);
  border-radius: 10.8px;
  padding: 0.6em 1em;
  box-shadow: 0 0 5px hsla(131, 68%, 48%, 0.4);

  color: white;
}
.sm-text {
  font-size: xx-small;
  text-align: center;
}
.sm-text a {
  text-decoration-color: black;
  color: black;
}
.main-division.profile-edit-main .profile-banner-sz {
  position: absolute;
  left: 0.31em;
  bottom: 0.2em;
  font-size: xx-small;
  color: hsla(0, 0%, 0%, 0.3);
}
.main-division.profile.profile-edit-main .profile-pic-sz {
  position: absolute;
  left: calc(50% + 3.5em);
  bottom: 0.2em;
  font-size: xx-small;
  color: hsla(0, 0%, 0%, 0.3);
}
.main-division.profile.profile-edit-main .banner-ud {
  position: absolute;
  width: fit-content;
  gap: 0.5em;
  right: 0.2em;
  bottom: 0.2em;
}
.main-division.profile-edit-main .profile-pic-ud {
  position: absolute;
  width: fit-content;
  left: calc(50%);
  top: -1em;
  gap: 0.5em;
}
.main-division.profile-edit-main .pic-u {
  background-color: hsla(0, 0%, 95%, 1);
  font-size: 0.7em;
  border-radius: 9px;
  padding: 0.5em;
  gap: 0.5em;
}
.main-division.profile-edit-main .pic-d {
  background-color: hsla(0, 0%, 95%, 1);
  padding: 0.2em 0.5em;
  border-radius: 9px;
}
.xx-show,
.xx-show-flex {
  display: none;
}
.main-division.profile.settings-main .profile-txt-detail {
  gap: 0;
}
.main-division.settings-main .settings-opt {
  width: 75%;
  border-radius: 10.52px;
  background-color: hsla(0, 0%, 95%, 1);
  margin: auto;
  box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
  margin-bottom: 1.3em;
}
.main-division.settings-main .settings-opt .setting-gr {
  padding: 0.5em 1em;
  border-bottom: 1px solid hsla(0, 0%, 7%, 0.25);
}
.main-division.settings-main .settings-opt a {
  text-decoration: none;
  color: black;
}
.main-division.settings-main .settings-opt .setting-gr:last-child {
  border-bottom: none;
}
.main-division.settings-main .settings-opt .setting-gr div:first-child {
  gap: 1em;
}
.main-division.settings-main .profile-txt-detail h3 {
  margin-left: 20%;
  margin-top: 2em;
  margin-bottom: 0.5em;
}
.main-division.privacy.settings-main .profile-txt-detail h3 {
  margin-left: 10%;
}
.main-division .sm-settings {
  display: none;
}
.sm-settings .for-you-title {
  display: none;
}

.main-division.profile.settings-main {
  padding: 3em 5em 3em 5em;
  margin: 0 2em 0 14.5em;
}
.main-division.profile.settings-main.yomeco-jobs{
  padding: 3em 5em 3em 5em;
  margin: 0 2em 0 14.5em;
}
.main-division.privacy .privacy-opt {
  width: 70%;
  margin: auto;
}
.main-division.privacy .privacy-opt label {
  color: hsla(0, 0%, 0%, 0.7);
  font-weight: 600;
  font-size: 0.9em;
  text-align: right;
}
.main-division.privacy .privacy-opt .priv-item-fr span {
  font-weight: 400;
  font-size: 10px;
  color: hsla(240, 2%, 47%, 1);
}
.main-division.privacy .priv-item {
  gap: 1em;
  margin-bottom: 1em;
}
.main-division.privacy .priv-item .priv-item-fr {
  width: 30%;
  text-align: right;
}
.main-division.privacy .priv-item .priv-item-sc {
  width: 70%;
}
.main-division.privacy .privacy-opt .priv-disp {
  gap: 0.2em;
}
.main-division.privacy .privacy-opt .priv-item select {
  background-color: hsla(0, 0%, 100%, 1);
  box-shadow: var(--box-shadow);
  padding: 0.5em 1em;
  border: none;
  border-radius: 10.52px;
}

.main-division.privacy .data-mngt button {
  border: none;
  border-radius: 10.52px;
  padding: 0.5em 1em;
  margin-bottom: 1em;
  box-shadow: var(--box-shadow);
  transition: 0.8s ease-in-out;
}
.main-division.privacy .data-mngt button:first-child {
  border: 1px solid hsla(0, 100%, 43%, 0.7);
  color: hsla(0, 100%, 43%, 0.7);
  background-color: transparent;
}
.main-division.privacy .data-mngt button:first-child:hover {
  background-color: hsla(0, 100%, 43%, 0.7);
  color: white;
}
.main-division.privacy .data-mngt button:nth-child(2) {
  background-color: transparent;
  color: black;
}
.main-division.privacy .data-mngt button:nth-child(2):hover {
  background-color: hsla(0, 0%, 0%, 1);
  color: white;
}
.main-division.privacy .data-mngt button:nth-child(3) {
  border: 1px solid hsla(0, 100%, 43%, 0.7);
  color: hsla(0, 100%, 43%, 0.7);
  background-color: transparent;
}
.main-division.privacy .data-mngt button:nth-child(3):hover {
  background-color: hsla(0, 100%, 43%, 0.7);
  color: white;
}
.step-back {
  display: flex;
  gap: 1em;
  padding: 0.5em 1em;
  border-radius: 9px;
  background-color: hsla(0, 0%, 100%, 0.35);
  color: black;
  position: absolute;
  top: 1em;
  left: 0.7em;
  font-weight: 400;
  font-size: x-small;
  cursor: pointer;
}

.account-information .acc-info {
  text-wrap: nowrap;
}
.input-o-group,
.security-main {
  width: 70%;
  margin: 0.5em auto;
  gap: 1em;
}
.security-main form {
  gap: 1.5em;
}
.account-information .input-t-group {
  width: 70%;
  margin: 1.5em auto;
}
.input-o-group .input-group,
.security-main .input-group {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
}
.input-o-group .input-group label {
  flex: 4;
  text-align: right;
  gap: 1em;
  font-weight: 600;
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 0.9em;
  text-wrap: nowrap;
}
.security-main .input-group label {
  flex: 5;
  text-align: right;
  gap: 1em;
  font-weight: 600;
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 0.9em;
  text-wrap: nowrap;
}
.security-main .input-group input::placeholder,
.marketplace .market-place .input-group input::placeholder {
  font-size: 0.9em;
  font-weight: 400;
}
.account-information .input-t-group label {
  font-weight: 600;
  color: hsla(0, 0%, 0%, 0.7);
  font-size: 0.8em;
}
.input-o-group .input-group > input,
.input-o-group .input-overlay,
.input-o-group .dispName-input,
.input-o-group select,
.security-main .input-group .input-overlay {
  flex: 7;
  width: 100%;
  position: relative;
}
.input-o-group .input-group.dispName label {
  margin-top: -1.5em;
}
.input-o-group .input-group .input-overlay input,
.security-main .input-group input {
  width: 100%;
}
.input-o-group .input-overlay,
.input-o-group .dispName-input {
  display: flex;
}
.input-o-group .input-group .input-overlay span,
.input-group .input-overlay svg {
  position: absolute;
  left: 0.6em;
  top: 0.7em;
  color: hsla(0, 0%, 0%, 0.3);
  font-size: 0.7em;
}
.acc-info input,
.acc-info textarea,
.acc-info select,
.account-information select,
.security-main .input-group input,
.market-place input,
.market-place select {
  border-radius: 10.52px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
  outline: none;
  padding: 0.5em 1em 0.5em 1.8em;
  border: none;
  width: 100%;
}
textarea {
  resize: none;
}
.acc-info input:focus,
.acc-info textarea:focus,
.acc-info select:focus,
.security-main .input-group input:focus,
.market-place input:focus,
.market-place select:focus {
  outline: none;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  border-color: rgba(231, 237, 242, 0.3);
}
.gap-set {
  gap: 1em;
}
.input-group p {
  text-wrap: wrap;
  font-size: 9px;
  color: #757579;
}
.input-group p a {
  text-decoration-color: black;
  color: black;
}
.security-main .cp-submit {
  border: none;
  background-color: hsla(0, 0%, 0%, 1);
  color: white;
  border-radius: 9.2px;
  padding: 0.6em 1.7em;
  width: fit-content;
  margin: 0 0 1em auto;
  transition: 1s;
}
.security-main .cp-submit:hover {
  background-color: rgb(2, 2, 57);
  transform: scale(1.01);
}

.email-nots .switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.email-nots .switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.email-nots .slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgb(159, 8, 8);
  transition: 0.4s;
  border-radius: 20px;
}

.email-nots .slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 2px;
  bottom: 2px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

.email-nots input:checked + .slider {
  background-color: rgb(4, 125, 4);
}

.email-nots input:checked + .slider:before {
  transform: translateX(20px);
}

.email-nots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1em;
}
.email-nots p {
  font-weight: 600;
  font-size: 0.8em;
  color: hsla(0, 0%, 0%, 0.7);
}
.otr-events h4 {
  text-align: center;
  color: hsla(0, 0%, 0%, 0.7);
  font-weight: 600;
}
.exchange-container .friend-user-info p.price,
.shop .friend-user-info p.price{
  color: hsla(205, 90%, 48%, 1);
  font-weight: 500;
  font-size: 0.7em;
}
.exchange-container .friend-user-info p.date {
  color: hsla(205, 90%, 48%, 0.5);
  font-weight: 400;
  font-size: 0.7em;
}

.exchange-container .friend-listing .flex-center .friend-user-info,
.shop .friend-listing .flex-center .friend-user-info {
  flex: 3;
}
.shop.friend-listing .flex-center .friend-user-info {
  flex: 5;
}
.wishlist-wrapper .shop.friend-listing .flex-center .friend-user-info {
  flex: 3;
}
.exchange-container .friend-listing .flex-center .user-profile-image {
  border-radius: 9px;
  margin: 0;
  margin-right: 0.5em;
  flex: 1;
}
.friend-listing.shop .flex-center .user-profile-image {
  border-radius: 9px;
  margin: 0;
  margin-right: 0.5em;
  flex: 1;
}
.wishlist-wrapper .shop.friend-listing .flex-center .user-profile-image {
  border-radius: 9px;
  margin: 0;
  margin-right: 0.5em;
  flex: 1.5;
}
.exchange-container .friend-user-info {
  gap: 0.1em;
}
.exchange-container .friend-listing.flex-space-between > div:first-child,
.shop.flex-space-between > div:first-child {
  flex: 8;
}
.exchange-container .friend-listing.flex-space-between > div:nth-child(2),
.shop.flex-space-between > div:nth-child(2) {
  flex: 3;
}
.echange-container .friend-listing.flex-space-between,
.shop.flex-space-between {
  gap: 0.5em;
}

.svgp {
  padding: 0.42em 0.9em;
  background-color: black;
  color: white;
  border-radius: 14px;
  gap: 0.5em;
  font-size: 0.9em;
  cursor: pointer;
  width: fit-content;
}
.svgp:nth-child(1) {
  margin: 1em auto;
  padding: 0.5em 2.5em;
}
.flex-end {
  justify-content: right;
  gap: 0.5em;
}
.popup-container {
  position: fixed;
  max-width: 60%;
  min-width: auto;
  min-height: auto;
  max-height: 80%;
  top: 5em;
  margin: 0 auto;
  z-index: 5;
  background-color: white;
  border-radius: 15px;
  padding: 1.5em 4em;
  overflow: scroll;
}
#overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* filter:blur(35px); */
  background-color: hsla(0, 0%, 0%, 0.6);
  z-index: 4;
}
.no-scroll {
  overflow: hidden;
}
.border-bottom {
  padding-bottom: 1.5em;
  border-bottom: solid 1.5px hsla(0, 0%, 0%, 0.05);
}
.image-uc {
  height: fit-content;
  background-color: hsla(0, 0%, 77%, 0.1);
  border-radius: 9px;
  padding: 0.5em;
  justify-content: center;
  text-align: center;
}
.browse-image {
  border-radius: 12px;
  background-color: hsla(0, 0%, 0%, 1);
  width: fit-content;
  padding: 0.5em 1em;
  margin: 0 auto;
  color: white;
}
.browse-image p {
  color: white;
}
.image-uc-preview {
  display: flex;
  justify-content: center;
  gap: 0.5em;
}
.image-uc-preview img {
  max-width: 4em;
  max-height: 4em;
  width: auto;
  height: auto;
  border-radius: 5px;
}
.input-overlay.dragover {
  border-color: #000;
}
.new-ad {
  padding: 1em;
}
.chat {
  align-items: flex-start;
  gap: 1.5em;
}
.chat-cont {
  gap: 1.5em;
  align-items: flex-start;
}
.chat .msg-cont {
  background-color: white;
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  width: 80%;
  height: 80vh;
}
.main-division.chat.profile .invite-links {
  position: unset;
}
.cr-dot > div {
  border: 1.59px solid hsla(0, 0%, 0%, 0.15);
  border-radius: 50%;
  width: 2em;
  height: 2em;
}
.cr-dot {
  position: relative;
}
.cr-dot-b {
  border: 1.59px solid hsla(0, 0%, 0%, 0.12);
  border-radius: 50%;
  width: 3.5em;
  height: 3.5em;
  position: relative;
}
.cr-dot-c {
  border: 1.59px solid hsla(0, 0%, 0%, 0.09);
  border-radius: 50%;
  width: 5em;
  height: 5em;
  position: relative;
}
.cr-dot-c > .dot {
  border-radius: 50%;
  width: 0.3em;
  height: 0.3em;
  background-color: hsla(205, 90%, 48%, 1);
  position: absolute;
  left: 0.25em;
  top: 0.8em;
}
.cr-dot-d {
  border: 1.59px solid hsla(0, 0%, 0%, 0.06);
  border-radius: 50%;
  width: 6.5em;
  height: 6.5em;
  position: relative;
}
.cr-dot-e {
  border: 1.59px solid hsla(0, 0%, 0%, 0.03);
  border-radius: 50%;
  width: 8em;
  height: 8em;
  position: relative;
}
.cr-dot-e > .dot {
  border-radius: 50%;
  width: 0.3em;
  height: 0.3em;
  background-color: hsla(205, 90%, 48%, 1);
  position: absolute;
  right: 50%;
  bottom: -0.2em;
}
.cr-dot-d > .dot {
  border-radius: 50%;
  width: 0.3em;
  height: 0.3em;
  background-color: hsla(205, 90%, 48%, 1);
  position: absolute;
  right: 50%;
  top: -0.2em;
}
.cr-dot-b > .dot {
  border-radius: 50%;
  width: 0.3em;
  height: 0.3em;
  background-color: hsla(228, 27%, 25%, 1);
  position: absolute;
  right: 0.1em;
  top: 0.7em;
}
.cr-dot > .dot {
  border-radius: 50%;
  width: 0.3em;
  height: 0.3em;
  background-color: hsla(228, 27%, 25%, 1);
  position: absolute;
  bottom: 0.1em;
  left: 0.2em;
}
.mor {
  height: 1.5em;
  width: 1.5em;
  border-radius: 50%;
  background-color: hsla(0, 0%, 0%, 0.04);
}
.blue-circle {
  border-radius: 50%;
  background-color: hsla(205, 90%, 48%, 1);
  padding: 0.4em;
  height: 1.5em;
  width: 1.5em;
}
.msg-header {
  height: fit-content;
  background-color: white;
  height: 2em;
  align-items: top;
  box-shadow: var(--box-shadow-bottom);
  border-top-left-radius: 15px;
  border-top-right-radius: 15px;
  padding: 1.5em 2em;
  gap: 1.5em;
}
.msg-header .flex-gr:first-child {
  width: 30%;
}
.msg-header .flex-gr:nth-child(2) {
  width: 70%;
}
.chat-cont h3 {
  font-size: 1em;
}
.chat-cont .post-author-information {
  font-size: 0.8em;
}
.chat-cont .post-author-information .post-author-username {
  font-size: 0.8em;
  font-weight: 400;
  color: black;
}
.main-section .main-division.chat.profile {
  /* padding: 2em 3rem 2em 13rem; */
}
.chat-user {
  padding: 0 0.2em;
  width: 35%;
  height: 70vh;
  box-shadow: var(--box-shadow-right);
}
.chat-user:first-child {
  padding-top: 1em;
}
.chat-cont-inner {
  width: 65%;
  padding: 0;
  margin: 0;
  position: relative;
}
.chat-cont .post-owner-info {
  padding: 0.4em 1em;
}
.chat-cont .msg-selected {
  background-color: hsla(0, 0%, 85%, 0.3);
  border-radius: 12px;
}
.msg-content .msg-date {
  font-size: 0.9em;
  font-weight: 500;
  color: hsla(0, 0%, 0%, 0.15);
  text-align: center;
}
.msg-r {
  min-width: 65%;
  max-width: 20em;
  gap: 0.5em;
}
.msg-s {
  min-width: 65%;
  max-width: 20em;
  margin: 0.5em 0 0.5em auto;
}
.msg-r-cont {
  border-radius: 5px 15px 15px 15px;
  background-color: hsla(0, 0%, 85%, 0.3);
  width: 95%;
  padding: 0.7em 0.7em;
  font-size: 0.8em;
}
.msg-s-cont {
  border-radius: 15px 5px 15px 15px;
  background-color: hsla(205, 90%, 48%, 1);
  width: 95%;
  padding: 0.7em 0.7em;
  font-size: 0.8em;
  color: white;
}
.msg-drag {
  gap: 0.5em;
}
.msg-no-drag {
  gap: 0.5em;
}

.msg-content .date p {
  color: hsla(0, 0%, 0%, 0.15);
  font-size: 0.8em;
}
.msg-content {
  padding: 2em 1em 3em 0.4em;
  overflow: scroll;
  height: 70vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.has-svg {
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: hsla(0, 0%, 85%, 0.3);
}
.has-svg-bg {
  width: 2.1em;
  height: 2.1em;
  border-radius: 50%;

  background-color: hsla(0, 0%, 85%, 0.3);
}
.msg-in {
  margin-top: 3em;
  gap: 1em;
  min-width: 100%;
  max-width: 16em;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: white;
  height: 3em;
  width: 100%;
}
.msg-content > div:last-child {
  margin-bottom: 3em;
}

.main-division.profile .msg-in .main-search {
  width: 80%;
}
.has-svg-blue {
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: hsla(205, 90%, 48%, 1);
}
.has-svg-blue svg {
  transition: scale(2);
}
.data-transfer {
  background-color: hsla(0, 0%, 100%, 1);
  border-radius: 15px;
  box-shadow: var(--box-shadow);
  /* margin-top: 2em; */
  padding: 1em;
  width: 100%;
}
.data-transfer h3 {
  font-size: 1em;
  margin-bottom: 2em;
}
.xx-link-btn {
  margin-top: 1.5em;
}
.xx-link-btn button {
  border: none;
  min-width: 90%;
  max-width: 30em;
  padding: 0.75em;
  border-radius: 9.55px;
}
.xx-link-btn button:first-child {
  background-color: hsla(205, 90%, 48%, 1);
  color: white;
}
.xx-link-btn button:nth-child(2) {
  background-color: hsla(205, 90%, 48%, 0.2);
  color: hsla(205, 90%, 48%, 1);
}
.r-file {
  margin-top: 1.5em;
}
/* .r-file > p {
  color: hsla(0, 0%, 0%, 0.35);
  text-transform: uppercase;
  font-weight: 600;
} */
.shared-items {
  padding: 1.2em 0.5em;
}
.shared-item {
  background-color: hsla(0, 0%, 0%, 0.04);
  border-radius: 9.55px;
  width: 100%;
  padding: 1em;
  gap: 0.5em;
}
.r-file-desc {
  gap: 0.2em;
}
.r-file-desc p {
  font-size: 0.7em;
  font-weight: 400;
  text-wrap: nowrap;
}
.r-file-desc p a {
  color: hsla(205, 90%, 48%, 1);
  text-decoration: none;
  text-transform: capitalize;
}
.r-file-subtext {
  gap: 0.5em;
}
.r-file-subtext span {
  /* color: hsla(0, 0%, 0%, 0.2); */
  color: hsl(0deg 0% 0% / 79%);
  font-size: 0.6em;
}

.nor-bus-switch {
  gap: 0.5em;
  background-color: hsla(0, 0%, 0%, 0.05);
  font-size: xx-small;
  border-radius: 10px;
  padding: 0.5em 1em;
  margin-top: 0.5em;
  margin-right: 0.5em;
  right: 0.5em;
  position: absolute;
  z-index: 10;
  cursor: pointer;
  user-select: none;
}
.buss-info {
  display: none;
}
.prod-images{
  height:30em;
}
.prod-main-image img{
  object-fit:cover;
  border-radius:9px;
  width:100%;
  max-height:20em;
  height:auto;
}
.show-img-btn.flex-center{
  width:100%;
  height:7em;
  justify-content:space-around;

}
.show-img-btn img{
  width:30%;
  height:5em;
  border-radius:9px;
}
.prod-detail-cont .upper{
  gap:1.5em;
}
.prod-detail-cont .flex-center.upper{
align-items:flex-start;
}
.prod-images{
  flex:5;
}
.prod-info{
  flex:5;
  padding:1.4em;
  padding-top:0;
  float:top;
}
.prod-info h3{
  margin-bottom:0.5em;
}
.rt-group{
  width:80%;
  margin-bottom:0.5em;
}
.rt-group p{
  font-weight:400;
  font-size:12px;
  color: hsla(0, 0%, 0%, 0.35);

}
.prod-info p.price {
color: hsla(205, 90%, 48%, 1);
  font-weight: 500;
  font-size: 1.1em;
  margin-bottom:0.5em;
}
.prod-info .prod-detail{
  color: hsla(0, 0%, 0%, 0.6);
  font-size:1em;
  text-align:justify;

}
.prod-info .prod-detail ul{
  margin-left:1.5em;
}
.seller-info{
  text-align:center;
  margin-top:1em;
}
.seller-info a{
  color:hsla(0, 0%, 0%, 0.35);
  font-size:1em;
  text-decoration-color:hsla(0, 0%, 0%, 0.35);
}
.prod-desc{
  padding:2em;
}
.m-title{
  margin-top:1.2em;
  margin-bottom:0.4;
  font-size:0.8em;
  font-weight:600;
  color:hsla(0, 0%, 0%, 0.35);
  
}
.sub-prem-in svg:first-child, .sub-prem-out svg:first-child{
flex:2;
}
.sub-prem-in>div, .sub-prem-out>div{
  flex:6;
  }
  .sub-prem-in svg:last-child, .sub-prem-out svg:last-child{
    flex:1;
    }
    .sub-prem-in .flex-center.extr, .sub-prem-out .flex-center.extr{
      justify-content:flex-start;
    }


    /* Toast Container */
.toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  max-width: 400px;
  width: 90%;
}

/* Base Toast Style */
.toast {
  position: relative;
  padding: 18px 25px;
  margin-bottom: 15px;
  border-radius: 12px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  color: white;
  display: flex;
  align-items: flex-start;
  transform: translateX(150%);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.toast.show {
  transform: translateX(0);
  opacity: 1;
}

/* Toast Icon */
.toast-icon {
  font-size: 24px;
  margin-right: 15px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

/* Toast Content */
.toast-content {
  flex: 1;
}

.toast-title {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 5px;
  letter-spacing: 0.3px;
}

.toast-message {
  font-size: 14px;
  line-height: 1.5;
  opacity: 0.9;
}

/* Close Button */
.toast-close {
  background: none;
  border: none;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  margin-left: 15px;
  font-size: 20px;
  transition: all 0.2s;
  padding: 0;
  align-self: flex-start;
}

.toast-close:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Progress Bar */
.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: rgba(255, 255, 255, 0.2);
}

.toast-progress-bar {
  height: 100%;
  background: white;
  animation: progress linear forwards;
}

@keyframes progress {
  from { width: 100%; }
  to { width: 0%; }
}

/* Color Variants */
.toast-success {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.9), rgba(46, 125, 50, 0.95));
  border-left: 5px solid #1B5E20;
}

.toast-error {
  background: linear-gradient(135deg, rgba(244, 67, 54, 0.9), rgba(198, 40, 40, 0.95));
  border-left: 5px solid #B71C1C;
}

.toast-info {
  background: linear-gradient(135deg, rgba(33, 150, 243, 0.9), rgba(21, 101, 192, 0.95));
  border-left: 5px solid #0D47A1;
}

.toast-warning {
  background: linear-gradient(135deg, rgba(255, 193, 7, 0.9), rgba(255, 143, 0, 0.95));
  border-left: 5px solid #FF6F00;
  color: #333;
}

.toast-warning .toast-icon {
  color: #333;
}

/* Animation for multiple toasts */
.toast:nth-child(1) { transition-delay: 0.1s; }
.toast:nth-child(2) { transition-delay: 0.2s; }
.toast:nth-child(3) { transition-delay: 0.3s; }
.toast:nth-child(4) { transition-delay: 0.4s; }