@import url("gobal-css.css");

.scroll4::-webkit-scrollbar {
  width: 0.8vw;
}

.scroll4::-webkit-scrollbar-thumb {
  background: var(--close-button);
  border-radius: 0.5vw;
}

.scroll4::-webkit-scrollbar-track {
  background: #ddd;
  border-radius: 0.5vw;
}

.main {
  /* height: 100vh; */
}
/* navbar start */
.navbar,
.footer {
  background-color: var(--grey);
  padding: 0.5vw 2vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.navbar {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 9;
  width: 100%;
}

.navbar .navbar-logo {
  cursor: pointer;
}

.navbar .navbar-logo img {
  width: 9vw;
}

.navbar .navbar-action-buttons {
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbar .navbar-action-buttons .login-button {
  margin-right: 0.8vw;
}

.navbar .navbar-action-buttons .login-button button:hover,
.navbar .navbar-action-buttons .join-button button:hover,
.navbar .navbar-action-buttons .login-button button.login.active,
.navbar .navbar-action-buttons .join-button button.join-now.active {
  background-color: var(--grey);
}
/* navbar end */

/* header-section start */
.header-section {
  padding: 6vw 2vw 6vw 2vw;
}

.header-section .header-section-content h1 {
  margin-bottom: 0;
}

.header-section .header-section-image {
  background-image: url(../assets/landing-page.png);
  background-position: left center;
  background-repeat: no-repeat;
  background-size: 98% auto;
  height: 44vw;
  /* padding: 22vw; */
}
/* header-section end */

/* about-us section start */
.about-section {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 6vw 17vw;
}

.about-section .about-section-header h1 {
  font-size: 2.22vw;
  font-weight: bold;
  color: var(--blue);
  margin-bottom: 2vw;
}

.about-section .about-section-content p {
  font-size: 1.5vw;
  margin-bottom: 2vw;
}

.about-section .about-section-content p.para {
  margin-bottom: 0;
}

.about-section .about-section-content p span {
  color: var(--red);
  font-weight: bold;
}

.about-section .about-section-buttons {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  margin-bottom: 2vw;
}

.about-section .about-section-buttons button .button-image img {
  width: 11vw;
}

.about-section .about-section-buttons .google-button button {
  padding-left: 0;
}

.click-here,
.pdf,
.video {
  color: #0d6efd;
  text-decoration: underline;
  transition: all 0.3s ease-in-out;
}
/* about-us section end */

/* login-header page start */
.navbar-action-search .form {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-left: 3vw;
}

.navbar-action-search .form .caret {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 1vw;
  left: 4vw;
  cursor: pointer;
}

.navbar-action-search .form .caret i,
.navbar-action-search .form .search-button i {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 2vw;
}

.navbar-action-search .form input {
  border: none;
  width: 86%;
  padding: 0.5vw 6vw;
  border-radius: 0.3vw;
  font-size: 2vw;
}

.navbar-action-search .form input:focus {
  outline: none;
}

.navbar-action-search .form input::placeholder {
  color: var(--grey);
}

.navbar-action-search .form .search-button {
  display: flex;
  position: absolute;
  bottom: 0;
  justify-content: flex-start;
  align-items: stretch;
  right: 2.7vw;
  padding: 0.49vw;
  top: 0vw;
}

.notification-action {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.notification-action > div {
  padding: 0.5vw;
  cursor: pointer;
}

.notification-action .add-button button.add {
  background-color: var(--light-grey-one);
  border: 1px solid var(--close-button);
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  width: 3vw;
  height: 3vw;
}

.notification-action .add-button button.add i {
  font-size: 2vw;
  color: var(--close-button);
}

.notification-action img {
  width: 3vw;
}

.notification-action .profile-display {
  overflow: hidden;
  width: 5vw;
  height: 5vw;
  padding: 0.5vw;
  border-radius: 50%;
}

.notification-action .profile-display img.user-image {
  max-width: 100%;
  width: 5vw;
}

.toolbar {
  position: fixed;
  top: 6vw;
  left: 25vw;
  z-index: 9;
}

.toolbar .toolbar-container {
  background-color: var(--light-grey);
  border: 1px solid var(--white);
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 47vw;
  padding: 0.8vw 2.5vw;
  border-radius: 0.3vw;
}

.toolbar .toolbar-container .toolbar-content > img {
  width: 3vw;
}

.toolbar .toolbar-container .toolbar-content > p {
  margin-bottom: 0;
}

.toolbar .toolbar-container .toolbar-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.toolbar-content-a {
  margin-top: 0.3vw;
}
/* login-header page end */

/* user-page start */
.user-profile-section {
  position: relative;
  height: 100%;
  margin: 0 auto 0 auto;
}

.sidenav {
  height: 100%;
  width: 23%;
  position: fixed;
  z-index: 1;
  top: 12vw;
  left: 0;
  bottom: 0;
  padding: 1vw 1.5vw;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  border-right: 1px solid var(--light-grey);
}

.sidenav .sidenav-container {
  position: relative;
  margin-top: 4vw;
}

.sidenav .chat-arrow {
  position: absolute;
  top: 1vw;
  right: 2vw;
}

.sidenav .chat-arrow img {
  width: 2vw;
}

.sidenav .sidenav-container .sidenav-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5%;
  padding: 0.9vw 1.5vw;
  cursor: pointer;
}

.sidenav .sidenav-container .sidenav-content.active {
  border: 0.15vw solid #757171;
  border-radius: 0.3vw;
}

.sidenav .sidenav-container .sidenav-content img {
  width: 2vw;
}

.sidenav .sidenav-container .sidenav-content h2 {
  margin-bottom: 0;
  color: var(--black);
  font-weight: bold;
}

.sidenav .sidenav-container .sidenav-content h2.inactive-block {
  color: var(--medium-grey);
}

.user-profile-container {
  height: 100%;
  /* overflow: scroll; */
  margin-left: 26vw;
  margin-right: 12vw;
  top: 19vw;
  position: relative;
}

.user-profile-container .user-profile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 20vw);
  grid-auto-flow: row;
  gap: 5%;
  padding-bottom: 25vw;
}

.user-profile-container .user-profiles {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 0.3vw;
  padding: 1vw 0;
  box-shadow: inset 0px 0px 10px 0px #ababab, -50px -50px 0px -100px #dddddd;
  -webkit-box-shadow: inset 0px 0px 10px 0px #ababab,
    -50px -50px 0px -100px #dddddd;
  -moz-box-shadow: inset 0px 0px 10px 0px #ababab,
    -50px -50px 0px -100px #dddddd;
  -o-box-shadow: inset 0px 0px 10px 0px #ababab, -50px -50px 0px -100px #dddddd;
}

.user-profile-container .user-profiles .user-profile-image {
  position: relative;

  border-radius: 50%;
  overflow: hidden;
  width: 6vw;
  height: 6vw;
}

.user-profile-container .user-profiles .user-profile-image.blue {
  background-color: var(--blue);
}

.user-profile-container .user-profiles .user-profile-image.purple {
  background-color: var(--purple);
}

.user-profile-container .user-profiles .user-profile-image.golden {
  background-color: var(--golden);
}

.user-profile-container .user-profiles .user-profile-image h2 {
  position: absolute;
  top: 2.6vw;
  left: 2.6vw;
  color: var(--white);
  font-weight: bold;
  margin-bottom: 0;
}

.user-profile-container .user-profiles .user-profile-info {
  text-align: center;
}

.user-profile-container .user-profiles .user-profile-info h2 {
  font-weight: bold;
  margin: 1vw 0;
}

.user-profile-container .user-profiles .user-profile-info h3 {
  color: var(--close-button);
  font-weight: bold;
  margin-bottom: 1vw;
}

.user-profile-container .user-profiles .user-profile-connect button {
  background-color: var(--black);
  color: var(--white);
  font-weight: bold;
  width: 11vw;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.user-profile-container .user-profiles .user-profile-connect button:hover {
  background-color: rgba(0, 0, 0, 0.4);
  color: var(--black);
}

.user-profile-container .show-user {
  position: relative;
}

.show-user .show-user-form-group {
  position: absolute;
  top: -5vw;
  right: -8vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.show-user .color-box {
  position: absolute;
  display: flex;
  background-color: var(--grey);
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  width: 2.5vw;
  height: 2.5vw;
  top: -5.15vw;
  right: -8.45vw;
}

.show-user .show-user-form-group label.show-user-text {
  font-size: 1.5vw;
  font-weight: bold;
  color: var(--close-button);
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

.show-user .show-user-form-group input[type="checkbox"] {
  display: none;
  cursor: pointer;
}

.show-user-form-group input[type="checkbox"] + label:before {
  content: "";
  -webkit-appearance: none;
  background-color: var(--close-button);
  border: 1px solid var(--close-button);
  border-radius: 0.3vw;
  padding: 0.5vw;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 0vw;
  margin-left: 1.5vw;
  width: 1.5vw;
  height: 1.5vw;
  z-index: 2;
}

.show-user-form-group input[type="checkbox"]:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.5vw;
  right: 0.5vw;
  width: 0.4vw;
  height: 1vw;
  border: 1px solid #fff;
  border-width: 0 0.22vw 0.22vw 0;
  transform: rotate(45deg);
  z-index: 2;
}
/* user-page end */

/* group-page start */
.user-profile-container .seperator {
  position: relative;
  background-color: var(--light-grey);
  margin-top: 5%;
  height: 0.15vw;
  width: 105%;
  left: 0vw;
}

.show-user .show-user-form-group.show-group {
  position: absolute;
  top: 2vw;
  right: -5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.show-group input[type="checkbox"] + label:before {
  content: "";
  -webkit-appearance: none;
  background-color: var(--grey);
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  padding: 0.5vw;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 0vw;
  margin-left: 1vw;
  width: 2vw;
  height: 2vw;
  z-index: 2;
}

.show-group input[type="checkbox"]:checked + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.4vw;
  right: 0.7vw;
  width: 0.5vw;
  height: 1.1vw;
  border: 1px solid #fff;
  border-width: 0 0.22vw 0.22vw 0;
  transform: rotate(45deg);
  z-index: 2;
}

.user-profile-container .group-profile {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(1, 20vw);
  grid-auto-flow: row;
  gap: 5%;
  padding-bottom: 25vw;
  margin-top: 10%;
}

.group-profile-container {
  top: 0vw;
  margin-top: 20%;
  height: unset;
}

.user-profile-container .view-profile {
  padding-bottom: 0vw;
}

.view-post-container {
  position: relative;
  height: unset;
  top: 0;
  margin-left: 0;
  margin-right: 0;
}

.view-post-container .view-post-profiles .user-profile-image.green {
  background-color: var(--green);
}

.view-post-container .view-post-profiles .user-profile-image.red {
  background-color: var(--red);
}

.view-post-profiles {
  position: relative;
}

.view-post-profiles .edit-image {
  position: absolute;
  top: 1vw;
  right: 1.7vw;
}

.view-post-profiles .edit-image img {
  width: 2.2vw;
}

.view-post-profiles .exit-icon {
  cursor: pointer;
}

.view-post-profiles .exit-icon img {
  width: 3vw;
}

.view-post-profiles .view-info h3.view-text {
  color: var(--black);
}

.view-post-container .new-group {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: -5vw;
  right: -5vw;
}

.view-post-container .new-group .new-group-content h2 {
  color: var(--close-button);
  font-weight: bold;
}

.view-post-container .new-group .new-group-button button img {
  width: 3vw;
}

/* group page end */

/* about-us-login start */
.about-login-section {
  padding: 15vw 17vw;
}
/* about-us-login end */

/* feed-page start */
.left-sidebar::-webkit-scrollbar,
.right-sidebar::-webkit-scrollbar {
  display: none;
  scrollbar-width: none; /* for Firefox */
}

.feed-section .left-sidebar {
  height: 100%;
  width: 23%;
  position: fixed;
  /* position: absolute; */
  z-index: 1;
  top: 10vw;
  left: 0;
  bottom: 0;
  padding: 3vw 0vw 18vw 3vw;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}

.feed-section .left-sidebar .chat-arrow {
  position: absolute;
  top: 0vw;
  right: 2vw;
}

.feed-section .left-sidebar .chat-arrow img {
  width: 2vw;
}

.edit-profile-content .edit-profile {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2vw;
  cursor: pointer;
}

.edit-profile-content .edit-profile .profile-content {
  border-radius: 50%;
  overflow: hidden;
  width: 5vw;
  height: 5vw;
  border: 1px solid var(--grey);
}

.edit-profile-content .edit-profile .profile-content img {
  /* width: 100%; */
  width: 5vw;
  height: 5vw;
}

.edit-profile-content .edit-profile .profile-name h1 {
  margin-bottom: 0;
}

.edit-profile-content .edit-profile .profile-name .name-edit {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 12%;
  margin-bottom: 0.4vw;
}

.edit-profile-content .edit-profile .profile-name .name-edit h1 {
  margin-bottom: 0;
  font-weight: 600;
}

.edit-profile-content .edit-profile .profile-name .name-edit img {
  width: 1.9vw;
}

.edit-profile-content .profile-contacts {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4%;
  margin-bottom: 1.5vw;
  cursor: pointer;
}

.edit-profile-content .profile-contacts .profile-contact-icon img {
  width: 3vw;
}

.edit-profile-content .profile-contacts h2 {
  margin-bottom: 0;
  font-weight: bold;
  color: var(--medium-grey);
}

.edit-profile-content .profile-contacts .profile-contact-number {
  position: relative;
  left: 2vw;
}

.edit-profile-content .profile-contacts .profile-number {
  left: 4vw;
}

.your-posts-container {
  margin-top: 5vw;
}

.your-posts-container .your-post-accordion,
.your-posts-container .pannel-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 5%;
}

.your-posts-container .your-post-accordion .view-icon img,
.your-posts-container .pannel-content .pannel-icon img {
  width: 3vw;
}

.view-accordion-content form input {
  position: relative;
  width: 100%;
  padding: 0.5vw 0.8vw;
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  font-size: 1.2vw;
}

.view-accordion-content form input::placeholder {
  color: var(--close-button);
}

.view-accordion-content form input:focus {
  outline: none;
}

.view-accordion-content form .form-button {
  position: relative;
}

.view-accordion-content form .form-button button {
  position: absolute;
  top: -2.8vw;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 0;
  background-color: transparent;
}

.view-accordion-content form .form-button button i {
  font-size: 1vw;
}

/* accordion start */
.view-accordion {
  margin-top: 1vw;
}

.accordion-item {
  border: 0;
}

.accordion-body {
  padding: 0;
}

.accordion-button {
  padding: 0;
  font-size: 1.5vw;
  color: var(--black);
  font-weight: bold;
  align-items: flex-start;
  justify-content: flex-start;
}

.accordion-button:not(.collapsed) {
  color: var(--black);
  background-color: unset;
  box-shadow: none;
}

.accordion-button:not(.collapsed)::after {
  background-image: unset;
  transform: rotate(-180deg);
}

.accordion-button:focus {
  z-index: unset;
  border-color: none;
  outline: 0;
  box-shadow: none;
}

.accordion-button::after {
  flex-shrink: 0;
  content: "\f078";
  font-family: "Font Awesome 5 Free";
  width: unset;
  height: unset;
  margin-left: 2.19vw;
  transition: transform 0.2s ease-in-out;
  background-image: unset;
}
/* accordion end */

/* select bootstrap start */
.custom-select {
  background-color: #fff;
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 1.5vw 0;
  padding: 0;
  position: relative;
  width: 100%;
  z-index: 1;
}

.custom-select:hover {
  border-color: #999;
}

.custom-select::before {
  position: absolute;
  top: 0;
  right: 0;
  display: none;
}

.custom-select select {
  background-color: transparent;
  border: 0 none;
  box-shadow: none;
  color: var(--close-button);
  display: block;
  font-size: 1.2vw;
  line-height: normal;
  margin: 0;
  padding: 0.5vw 0.8vw;
  width: 100%;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select select::-ms-expand {
  display: none; /* to ie 10 */
}

.custom-select select:focus {
  outline: none;
}

.custom-select .select-caret {
  position: absolute;
  top: 0;
  right: 1vw;
  bottom: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.custom-select .select-caret i {
  font-size: 1vw;
  color: var(--close-button);
}
/* select bootstrap end */

.view-accordion-content .show-post {
  position: relative;
  margin-top: 1.5vw;
}

.view-accordion-content .show-post .view-color-box {
  position: absolute;
  display: flex;
  background-color: var(--grey);
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  width: 2.2vw;
  height: 2.2vw;
  top: -0.2vw;
  left: 1.9vw;
}

.view-accordion-content .show-post .post-form-group {
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-accordion-content .show-post .post-form-group .post-check {
  justify-content: flex-start;
}

.view-accordion-content .show-post .post-form-group input[type="checkbox"] {
  display: none;
  cursor: pointer;
}

.view-accordion-content .show-post .post-form-group label.info-text {
  font-size: 1.2vw;
  font-weight: bold;
  color: var(--close-button);
  display: flex;
  justify-content: center;
  align-items: center;
}

.view-accordion-content .show-post .post-form-group label.label-text {
  position: relative;
  left: -3vw;
}

.view-accordion-content .show-post .post-form-group label.label-text-one {
  left: -3.2vw;
}

.view-accordion-content
  .show-post
  .post-form-group
  input[type="checkbox"]:checked
  + .label-text:after {
  top: 0.3vw;
  left: 0.6vw;
}

.view-accordion-content
  .show-post
  .post-form-group
  input[type="checkbox"]:checked
  + .label-text-one:after {
  top: 0.5vw;
  left: 1vw;
}

.view-accordion-content .show-post .post-form-group label.text-gvr {
  text-transform: uppercase;
}

.view-accordion-content
  .show-post
  .post-form-group
  input[type="checkbox"]
  + label:before {
  content: "";
  -webkit-appearance: none;
  background-color: var(--close-button);
  border: 1px solid var(--close-button);
  border-radius: 0.3vw;
  padding: 0.5vw;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 1vw;
  margin-left: 0vw;
  width: 1.5vw;
  height: 1.5vw;
  z-index: 2;
}

.view-accordion-content
  .show-post
  .post-form-group
  input[type="checkbox"]:checked
  + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.3vw;
  left: 2.9vw;
  width: 0.4vw;
  height: 1vw;
  border: 1px solid #fff;
  border-width: 0 0.22vw 0.22vw 0;
  transform: rotate(45deg);
  z-index: 2;
}

.view-accordion-content
  .show-post
  .post-check
  input[type="checkbox"]
  + label:before {
  background-color: var(--grey);
  border: 1px solid var(--grey);
  margin-right: 1vw;
  margin-left: 0vw;
  width: 2.2vw;
  height: 2.2vw;
}

.your-posts-container .pannel-container {
  margin-top: 2vw;
}

.your-posts-container .pannel-content {
  align-items: center;
  margin-bottom: 1.5vw;
}

.your-posts-container .pannel-content .pannel-name h2 {
  margin-bottom: 0;
  font-weight: bold;
  color: var(--black);
}

.feed-section .right-sidebar {
  height: 100%;
  width: 23%;
  position: fixed;
  /* position: absolute; */
  z-index: 1;
  top: 9vw;
  right: 0;
  bottom: 0;
  padding: 3vw 3vw 18vw 0vw;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}

.right-sidebar .components-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 1.5vw;
  gap: 8%;
  cursor: pointer;
}

.right-sidebar .components-content .component-image img {
  width: 2.5vw;
}

.right-sidebar .components-content .component-info h2 {
  margin-bottom: 0;
  font-weight: bold;
  transition: all 0.3s ease-in-out;
}

.right-sidebar .components-content .component-info h2.black-header {
  color: var(--black);
}

.right-sidebar .components-content .component-info h2.grey-header {
  color: var(--medium-grey);
}

.right-sidebar .components-content .component-info h2.grey-header:hover {
  color: var(--black);
}

.right-sidebar .active-users {
  margin-top: 5vw;
}

.right-sidebar .active-users .active-users-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 8%;
  margin-bottom: 1.5vw;
}

.right-sidebar .active-users .active-users-content .user-image {
  border-radius: 50%;
  overflow: hidden;
  width: 5vw;
  height: 5vw;
}

.right-sidebar .active-users .active-users-content .user-image img {
  width: 5vw;
}

.right-sidebar .active-users .active-users-content .user-content h2,
.right-sidebar .active-users h2 {
  font-weight: bold;
  margin-bottom: 0;
}

.right-sidebar .active-users h2 {
  margin-bottom: 2vw;
}

.right-sidebar .active-users .active-users-content .user-content h2 span {
  text-transform: uppercase;
}

/* post-section start */
.post-section {
  margin: 13.5vw 25vw 0;
}

.post-section-container a {
  color: unset;
  text-decoration: none;
}

.post-section-container .new-post {
  background-color: var(--post-background);
  border-radius: 0.3vw;
  padding: 1.8vw;
  width: 47vw;
}

.post-section-container .new-post .post-field,
.post-section-container .new-post .post-pannel,
.post-section-container .new-post .post-pannel .post-pannel-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0.5vw;
}

.post-section-container .new-post .post-field {
  gap: 2%;
}

.post-section-container .new-post .post-field .field-profile,
.posting-content .profile-content .post-info .post-profile,
.comment-box .comment-giving-box .user-comment .comment-profile,
.comment-box .comment-giving-box .user-comment .reply-profile,
.posting-content .add-comment-msg .msg-profile {
  border-radius: 50%;
  overflow: hidden;
  width: 4vw;
  height: 4vw;
  border: 1px solid var(--grey);
}

.post-section-container .new-post .post-field .field-profile img,
.posting-content .profile-content .post-info .post-profile img,
.comment-box .comment-giving-box .user-comment .comment-profile img,
.comment-box .comment-giving-box .user-comment .reply-profile img,
.posting-content .add-comment-msg .msg-profile img {
  max-width: 100%;
  width: 4vw;
}

.post-section-container .new-post .post-field .form-field input,
.posting-content .add-comment-msg .msg-field input {
  padding: 0.8vw 1.5vw;
  border-radius: 0.3vw;
  font-size: 1.2vw;
  width: 37vw;
}

.post-section-container .new-post .post-field .form-field input::placeholder,
.posting-content .add-comment-msg .msg-field input::placeholder {
  color: var(--close-button);
  font-size: 1.2vw;
}

.post-section-container .new-post .post-pannel {
  justify-content: space-around;
  padding: 0 0 0 3.2vw;
  margin-bottom: 0;
}

.post-section-container .new-post .post-pannel .post-pannel-content {
  margin-bottom: 0;
}

.post-pannel .post-pannel-content .pannel-icon img {
  width: 2.1vw;
}

.post-pannel .post-pannel-content .pannel-icon img.img-big {
  width: 2.6vw;
}

.post-pannel .post-pannel-content .pannel-content p {
  margin-left: 0.3vw;
  color: var(--close-button);
}

.posting-container {
  width: 47vw;
  margin-top: 1.5vw;
  padding-bottom: 4vw;
}

.posting-content {
  padding: 1.8vw;
  background-color: var(--post-background);
  border-radius: 0.3vw;
  margin: 1.5vw 0;
}

.posting-content .profile-content,
.posting-content .profile-content .post-info {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.posting-content .profile-content .post-info {
  justify-content: flex-start;
  align-items: center;
  gap: 3%;
  width: 100%;
}

.posting-content .profile-content .post-info .post-profile {
  width: 5vw;
  height: 5vw;
  border: none;
}

.posting-content .profile-content .post-info .post-profile img {
  width: 5vw;
}

.posting-content .profile-content .post-info .post-content .post-header h2 {
  font-weight: bold;
}

.posting-content .profile-content .post-info .post-content .post-header h2,
.posting-content .profile-content .post-info .post-content .posted h3 {
  margin-bottom: 0.2vw;
}

.posting-content .profile-content .post-info .post-content .posted {
  color: var(--close-button);
}

.posting-content .profile-content .menu-dots img {
  width: 0.5vw;
  cursor: pointer;
}

.posting-content .profile-text {
  margin: 1vw -1vw 1vw 0;
}

.posting-content .profile-text .profile-subtext h2.stack-header {
  margin-bottom: 2vw;
}

.posting-content .profile-text .profile-subtext h2.bold-header {
  font-weight: bold;
  margin-bottom: 0.8vw;
}

.posting-content .profile-text .profile-subtext h2.truncate span {
  color: var(--red);
}

.posting-content .feeds-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-gap: 1vw;
  width: 100%;
  margin-top: 2vw;
  margin-bottom: 1.5vw;
}

.posting-content .feeds-container .feeds-content img {
  width: 21vw;
  cursor: pointer;
}

.posting-content .feeds-container .feeds-second {
  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-template-rows: repeat(2, 14vw);
  grid-gap: 1.2vw;
}

.posting-content .feeds-container .feeds-second .feeds-content img {
  width: 21.2vw;
  cursor: pointer;
}

.posting-content .like-pannel {
  border-top: 0.15vw solid var(--light-grey);
  border-bottom: 0.15vw solid var(--light-grey);
  padding: 1vw 0;
}

.posting-content .like-pannel.next-post-pannel {
  border-bottom: 0;
}

.posting-content .like-pannel .like-pannel-container,
.posting-content .like-pannel .like-pannel-container .like-pannel-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.posting-content .like-pannel .like-pannel-container .like-pannel-content {
  justify-content: flex-start;
  gap: 8%;
  width: 100%;
}

.posting-content .like-pannel .like-pannel-container .like-contents {
  width: 75%;
}

.posting-content .like-pannel .like-pannel-container .comment-pannel-content {
  width: 115%;
}

.like-pannel-container .like-pannel-content .like-icon img,
.email-icon-button button img {
  width: 2.2vw;
}

.like-pannel-container .like-pannel-content .icon-content h2,
.email-icon-button .email-text h3,
.posting-content .comments-section .comments-text h2 {
  margin-bottom: 0;
  color: var(--close-button);
}

.email-icon-button {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.email-icon-button button {
  background-color: transparent;
  padding: 0;
}

.posting-content .comments-section .comments-text {
  padding: 1vw 0;
  border-bottom: 0.15vw solid var(--light-grey);
}

.comment-box {
  padding: 1.5vw 0;
}

.comment-box .comment-giving-box,
.comment-box .comment-giving-box .user-comment,
.posting-content .add-comment-msg {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.comment-box .comment-giving-box .user-comment,
.posting-content .add-comment-msg {
  gap: 3%;
  width: 100%;
}

.comment-box .comment-giving-box .user-comment .comment-profile {
  border: none;
  width: 5vw;
  height: 5vw;
}

.comment-box .comment-giving-box .user-comment .comment-profile img {
  width: 5vw;
}

.comment-box .comment-giving-box .user-comment .comment-giving {
  background-color: var(--white);
  border-radius: 0.3vw;
  padding: 0.7vw 1.5vw;
  width: 78%;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.user-comment .comment-giving .user .user-name h3,
.user-comment .comment-giving .user .user-reply h3,
.user-comment .comment-giving .reply-timing p {
  margin-bottom: 0;
}

.user-comment .comment-giving .user .user-name h3 {
  font-weight: bold;
  margin-bottom: 0.5vw;
}

.comment-box .display-reply p {
  margin: 0.5vw 0 0 0;
  position: relative;
  left: 6.5vw;
}

.comment-box .comment-giving-box .user-comment .reply-profile {
  border: none;
  width: 3vw;
  height: 3vw;
}

.comment-box .comment-giving-box .user-comment .reply-profile img {
  width: 3vw;
}

.comment-box ul.give-reply-box {
  list-style-type: none;
  padding-left: 6vw;
  margin-top: 1vw;
}

.comment-box .comment-giving-box .user-comment .reply-giving {
  width: 80%;
}

.posting-content .add-comment-msg .msg-profile {
  border: none;
  width: 5vw;
  height: 5vw;
}

.posting-content .add-comment-msg .msg-profile img {
  width: 5vw;
}

.posting-content .add-comment-msg .msg-field input {
  padding: 1vw 1.5vw;
}

.posting-content .pexit-feeds {
  grid-template-columns: repeat(1, 1fr);
}

.posting-content .pexit-feeds .pexit-content img {
  width: 43.4vw;
  cursor: pointer;
}

/* post-section end */

/* feed-page end */

/* chat-page start */
.chat-page-section .left-sidebar {
  height: 100%;
  width: 23%;
  position: fixed;
  /* position: absolute; */
  z-index: 1;
  top: 10vw;
  left: 0;
  bottom: 0;
  padding: 7vw 0vw 18vw 1vw;
  margin-right: 1vw;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
}

.chat-page-section .left-sidebar .chat-page-arrow {
  position: absolute;
  top: 2vw;
  right: 0vw;
}

.chat-page-section .left-sidebar .chat-page-arrow img {
  width: 2vw;
}

.messenger-container {
  border: 1px solid var(--light-grey);
}

.messenger-container .messenger-content {
  padding: 1vw 1vw 1vw 2vw;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  border-bottom: 1px solid var(--light-grey);
  cursor: pointer;
}

.messenger-container .messenger-content:nth-child(6) {
  border-bottom: none;
}

.messenger-container .messenger-content.active-messenger-content {
  background-color: var(--post-background);
}

.messenger-container .messenger-content .user-profile,
.display-user .user-info-container .user-profile {
  border-radius: 50%;
  overflow: hidden;
  width: 5vw;
  height: 5vw;
}

.messenger-container .messenger-content .user-profile img,
.display-user .user-info-container .user-profile img {
  width: 5vw;
}

.messenger-container .messenger-content .user-content {
  margin: 1vw 0 0 0vw;
  width: 49%;
}

.messenger-container .messenger-content .user-content.users {
  margin-right: -1vw;
}

.messenger-container .messenger-content .user-content h3,
.messenger-container .messenger-content .active-time h3,
.display-user .user-info-container .user-name h2,
.display-user .new-message h2 {
  font-weight: bold;
  margin-bottom: 1vw;
}

.messenger-container .messenger-content .user-content h3.grey-header,
.display-user .new-message h2.grey-header {
  color: var(--close-button);
}

.messenger-container .messenger-content .user-content h3 span,
.display-user .user-info-container .user-name h2 span {
  text-transform: uppercase;
}

.messenger-container .messenger-content .active-time {
  margin-top: 1vw;
}

.chat-page-section .chat-box-display {
  padding: 0 0vw 0 3vw;
  border-left: 1px solid var(--light-grey);
  margin: 14vw 4vw 10vw 24vw;
}

.chat-box-display .display-user,
.display-user .user-info-container,
.display-user .new-message {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.display-user .user-info-container {
  justify-content: flex-start;
  gap: 2%;
  width: 100%;
}

.display-user .new-message {
  position: absolute;
  right: 4vw;
}

.display-user .user-info-container .user-name h2,
.display-user .new-message h2 {
  margin-bottom: 0;
}

.display-user .new-message .new-message-button button {
  background-color: transparent;
}

.display-user .new-message .new-message-button button img {
  width: 3vw;
}

.popup-chatbox {
  position: relative;
  background-color: var(--post-background);
  border: 1px solid var(--light-grey);
  border-radius: 0.3vw;
  margin: 1vw 0 0 0;
  padding: 2vw 4vw 0vw;
}

.popup-chatbox .menu-dots {
  position: absolute;
  right: 2.4vw;
  top: 2.4vw;
}

.popup-chatbox .menu-dots img {
  width: 0.5vw;
}

.popup-chatbox .chat-date {
  text-align: center;
  margin-bottom: 1vw;
}

.popup-chatbox .chat-date h1 {
  font-weight: bold;
}

.popup-chatbox .chat-user-one,
.popup-chatbox .chat-user-two {
  position: relative;
  margin-bottom: 7vw;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.popup-chatbox .chat-user-two {
  position: relative;
  margin-bottom: 7vw;
  justify-content: flex-end;
  align-items: flex-end;
}

.popup-chatbox .chat-user-one .chat-content-one,
.popup-chatbox .chat-user-two .chat-content-two {
  background-color: var(--white);
  border-radius: 0.3vw;
  border: 1px solid var(--light-grey);
  padding: 1.5vw;
  width: 50%;
  margin-top: 1vw;
}

.popup-chatbox .chat-user-two .chat-content-two {
  background-color: transparent;
  border: 1px solid var(--medium-grey);
}

.popup-chatbox .chat-user-one h1,
.popup-chatbox .chat-user-two h1 {
  font-weight: bold;
  color: var(--close-button);
}

.popup-chatbox .chat-user-one .chat-time-one,
.popup-chatbox .chat-user-two .chat-time-two {
  position: relative;
  top: 0.5vw;
  left: 2vw;
}

.popup-chatbox .chat-user-two .chat-time-two {
  left: -22vw;
}

.chat-box-display .type-message {
  margin-top: 1vw;
  padding-bottom: 7vw;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.chat-box-display .type-message form input.type-input {
  background-color: transparent;
  border: 1px solid var(--light-grey);
  border-radius: 0.3vw;
  padding: 1.5vw 2vw;
  font-size: 1.2vw;
  width: 56vw;
}

.chat-box-display .type-message form input::placeholder {
  color: var(--close-button);
  font-size: 1.2vw;
}

.chat-box-display .type-message .send-button button {
  background-color: var(--post-background);
  border-radius: 0.3vw;
  color: var(--close-button);
  padding: 1vw 1.5vw;
  font-weight: bold;
  width: 10vw;
  margin-right: 1vw;
}
/* chat-page end */

/* product-page start */
.product-section .left-sidebar {
  height: 100%;
  width: 23%;
  position: fixed;
  z-index: 1;
  top: 13vw;
  left: 0;
  bottom: 0;
  padding: 3vw 4vw 18vw 2vw;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: scroll;
  text-align: left;
}

.product-section .left-sidebar .chat-arrow {
  position: absolute;
  top: 0vw;
  right: 4vw;
}

.product-section .left-sidebar .chat-arrow img {
  width: 2vw;
}

.sidebar-container .header-content h2,
.content-container .sidebar-content .header-content h3 {
  font-weight: bold;
}

.sidebar-container .content-container {
  margin-top: 3vw;
}

.content-container .sidebar-content {
  margin-bottom: 2.5vw;
}

.content-container .sidebar-content input {
  border: 1px solid var(--grey);
  padding: 0.5vw 1.5vw;
  font-size: 1.2vw;
  margin-top: 1vw;
  border-radius: 0.3vw;
  width: 17vw;
}

.content-container .sidebar-content input::placeholder {
  font-size: 1.2vw;
}

.content-container .sidebar-content input::placeholder,
.content-container .sidebar-content .header-content h3 {
  color: var(--close-button);
}

.content-container .sidebar-content .caret-content {
  position: relative;
  margin-top: 1vw;
}

.content-container .sidebar-content .caret-content .select-caret {
  position: absolute;
  right: 1vw;
  top: 0vw;
  bottom: 0vw;
  display: flex;
  justify-content: center;
  align-items: center;
  color: var(--close-button);
}

.content-container .sidebar-content .caret-content .select-caret i,
.content-container .sidebar-content .caret-content .form-select {
  font-size: 1.2vw;
  color: var(--close-button);
}

.content-container .sidebar-content .caret-content .form-select {
  background-image: none;
  padding: 0.5vw 1.5vw;
  border-radius: 0.3vw;
}

.content-container .sidebar-button {
  /* float: right; */
  text-align: right;
  margin-right: 1.5vw;
}

.content-container .sidebar-button button {
  background-color: var(--post-background);
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  color: var(--close-button);
  font-size: 0.97vw;
  width: 7vw;
}

.product-container {
  position: relative;
  margin: 15vw 14vw 15vw 25vw;
  /* padding-bottom: 1vw; */
  padding-bottom: 5vw;
}

.product-container .product-suppliers {
  position: absolute;
  right: -10vw;
}

.product-container .product-suppliers label {
  color: var(--close-button);
  font-weight: bold;
  font-size: 1.24vw;
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: center;
}

.product-container .product-suppliers input[type="checkbox"] {
  display: none;
  cursor: pointer;
}

.product-container .product-suppliers input[type="checkbox"] + label:before {
  content: "";
  -webkit-appearance: none;
  background-color: var(--grey);
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  padding: 0.5vw;
  display: inline-block;
  position: relative;
  cursor: pointer;
  margin-right: 0vw;
  margin-left: 1.5vw;
  width: 2vw;
  height: 2vw;
  z-index: 2;
}

.product-container
  .product-suppliers
  input[type="checkbox"]:checked
  + label:after {
  content: "";
  display: block;
  position: absolute;
  top: 0.4vw;
  right: 0.7vw;
  width: 0.5vw;
  height: 1.1vw;
  border: 1px solid #fff;
  border-width: 0 0.22vw 0.22vw 0;
  transform: rotate(45deg);
  z-index: 2;
}

.product-container .product-box-container {
  border-left: 1px solid var(--grey);
  margin-left: -2vw;
}

.product-container .product-box-container .product-boxes {
  /* padding: 3vw 0vw 4vw 2vw; */
  padding: 3vw 0vw 6vw 2vw;
}

.product-container .product-box-container .product-header h1 {
  font-weight: bold;
}

.product-boxes .boxes-container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(5, 23.6vw);
  /* grid-template-rows: repeat(5, 23vw); */
  grid-gap: 2vw;
  margin-top: 2vw;
  width: 101%;
}

.product-boxes-content {
  position: relative;
  border-radius: 0.3vw;
  border: 1px solid var(--white);
  box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
    rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

.product-boxes-content .product-email,
.supplier-box-container .product-email {
  position: absolute;
  right: 0vw;
  top: 0vw;
}

.product-boxes-content .product-email button,
.supplier-box-container .product-email button {
  background-color: transparent;
}

.product-boxes-content .product-email img,
.supplier-box-container .product-email img {
  width: 4vw;
}

.product-boxes-content .product-image img {
  width: 19vw;
}

.product-boxes-content .product-info {
  padding: 1vw;
}

.product-boxes-content .product-info h2,
.supplier-box-container .supplier-info h1,
.supplier-box-container .supplier-info h2,
.supplier-box-container .supplier-boxes-content h2 {
  font-weight: bold;
  margin-bottom: 1vw;
}

.product-boxes-content .product-info h2.grey-header,
.supplier-box-container .supplier-info h2.grey-header {
  color: var(--close-button);
}
/* product-page end */

/* supplier-page start */
.product-container .product-box-container .supplier-boxes {
  padding: 0vw 0vw 4vw 2vw;
}

.supplier-box-container {
  position: relative;
  background-color: var(--post-background);
  border-radius: 0.3vw;
  padding: 2vw;
  margin: 3vw 0;
}

.supplier-box-container .product-email {
  top: 1vw;
}

.supplier-box-container .supplier-info h1 {
  margin-bottom: 1.5vw;
}

.supplier-box-container .supplier-info h2.header-text {
  margin-bottom: 0.5vw;
}

.supplier-box-container .supplier-boxes-content h2 {
  margin-top: 1vw;
}

.supplier-box-container .supplier-boxes-content .supplier-content {
  display: grid;
  grid-template-columns: repeat(3, 0fr);
  grid-template-rows: repeat(1, 19vw);
  grid-gap: 2vw;
}

.suppliers-boxes-content {
  background-color: var(--white);
}

.suppliers-boxes-content .supplier-image img {
  width: 17.2vw;
}

.product-boxes-content .supplier-info-name {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
}
/* supplier-page end */

/* software-page start */
.softwares-container .softwares-check {
  position: absolute;
  right: 3vw;
}

.softwares-container {
  margin: 15vw 9vw 15vw 9.2vw;
}

.softwares-container .software-box-container {
  border-left: none;
  margin-left: 0vw;
}

.softwares-container .software-box-container .software-boxes {
  /* padding: 0vw 0vw 4vw 0vw; */
  padding: 0vw 0vw 6vw 0vw;
}

.software-boxes .software-container {
  display: grid;
  grid-template-columns: repeat(4, 0fr);
  grid-template-rows: repeat(4, 23.2vw);
}

.software-boxes-content .software-info .software-content h2 span {
  color: var(--red);
}

.software-boxes-content .software-image img {
  width: 18vw;
}

.software-boxes-content .software-info {
  padding: 1vw 0vw 1vw 1vw;
}

.software-boxes-content .software-info .software-content {
  padding-right: 1vw;
}
/* software-page end */

/* detailed-software page start */
.detailed-software {
  margin: 7vw 12vw 15vw 12vw;
  padding-bottom: 8vw;
  /* height: 100vh; */
}

.detailed-software .detailed-container {
  position: relative;
}

.detailed-container .download-button {
  position: absolute;
  right: 2vw;
  top: -1vw;
}

.detailed-container .download-button button {
  background-color: transparent;
}

.detailed-container .download-button button img {
  width: 5vw;
}

.detailed-container .detail-header h1,
.content-container .caepipe-location .location-icon .icon-content h1,
.caepipe-info .evalution-content h1,
.caepipe-info .evalution-content h2,
.content-container .caepipe-location .location-icon h1,
.content-container .caepipe-location .location-icon h2,
.content-container .caepipe-location h1,
.detailed-container .caepipe-forum h2,
.related-software-container .container-header h1,
.detailed-container .service-description .service-description-content h1 {
  font-weight: bold;
}

.content-container .caepipe-location .location-icon h2.grey-header,
.content-container .caepipe-location h1.grey-header,
.caepipe-info .evalution-content .evalution-para h2.grey-header,
.detailed-container .caepipe-forum h2,
.detailed-container
  .service-description
  .service-description-content
  h1.grey-header {
  color: var(--close-button);
}

.detailed-container .content-container {
  display: flex;
  justify-content: flex-start;
  /* justify-content: center; */
  align-items: stretch;
  gap: 7%;
  margin: 3vw 9vw 5vw 2vw;
}

.detailed-container .content-container .caepipe-image {
  display: flex;
}

.detailed-container .content-container .caepipe-image img {
  width: 23vw;
}

.detailed-container .content-container .caepipe-location {
  display: flex;
  justify-content: flex-start;
  gap: 16%;
}

.content-container .caepipe-location .location-icon .icon-content {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.content-container .caepipe-location .location-icon .icon-content button {
  margin-left: 1vw;
}

.content-container .caepipe-location .location-icon .icon-content button img {
  width: 1.2vw;
}

.caepipe-info .evalution-content {
  margin-top: 4vw;
}

.caepipe-info .evalution-content h1,
.caepipe-info .evalution-content h2,
.detailed-container .caepipe-forum h2 {
  margin-bottom: 1.5vw;
}

.detailed-container .caepipe-forum {
  margin: 2vw 3vw 2vw 2vw;
}

.related-software-container .container-header {
  border-bottom: 1px solid var(--light-grey);
}

.related-software-container .container-header h1 {
  margin-bottom: 2vw;
}

.related-software-container .related-content {
  display: grid;
  grid-template-columns: repeat(3, 0fr);
  grid-template-rows: repeat(1, 23.5vw);
  grid-gap: 2vw;
  margin: 2vw;
}

.software-boxes-content .related-image img {
  width: 18vw;
}
/* detailed-software page end */

/* detailed-service page start */
.detailed-container .content-container-part {
  margin: 3vw 9vw 2vw 2vw;
}

.location-icon .service-icon-content button {
  margin-left: 3vw;
}

.detailed-container .content-container .service-location {
  margin-bottom: 2vw;
}

.detailed-container .content-container .service-location-two {
  margin-bottom: 3vw;
}

.detailed-container .content-container .service-location h2.grey-headers {
  margin-top: 0.5vw;
}

.detailed-container .service-description .service-description-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detailed-container .service-description {
  margin: 1vw 3vw 2vw 2vw;
}

.detailed-container .caepipe-forum-part {
  margin: 1vw 5vw 0vw 0vw;
}

.detailed-container .caepipe-forum-part h2 span {
  color: var(--red);
}

.software-boxes-content .related-jobs-image img {
  width: 19vw;
}

.software-boxes-content .software-info .related-jobs-content {
  padding-right: 0;
}
/* detailed-service page end */

/* detailed-job page start */

/* detailed-job page end */

/* detailed-product page start */
.detailed-container .caepipe-forum h2.black-header {
  color: var(--black);
}

.related-description .image-gallery-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 3%;
  width: 106%;
  padding: 2vw 2vw 0vw 2vw;
}

.image-gallery-container .image-gallery-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.image-gallery-container .image-gallery-content .gallery-image img {
  width: 15vw;
}

.image-gallery-container .image-gallery-content .gallery-content h2 {
  font-weight: bold;
  margin-top: 1vw;
}
/* detailed-product page end */

/* product-categories page start */
.detailed-container .content-container .categories-button {
  margin-bottom: 0vw;
}

.company-profile-button button.company-profile {
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0px 0px 4px 2px var(--light-grey);
  padding: 1vw;
}

.company-profile-button button .icon-button {
  margin-left: 2vw;
}

.company-profile-button button .icon-button img {
  width: 1.2vw;
}

.responsive-map {
  /* background-image: url(../assets/navrathan-map.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% auto; */
  overflow: hidden;
  padding: 14vw;
  position: relative;
  height: 0;
  box-shadow: 0px 0px 4px 2px var(--light-grey);
  border-radius: 0.3vw;
  margin: 3vw 2vw 3vw 2vw;
}

.responsive-map iframe {
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  position: absolute;
}

/* product-categories-tabs start */
/* Style the tab */
.tab-product-categories {
  float: left;
}

/* Style the buttons inside the tab */
.tab-product-categories button {
  display: block;
  background-color: inherit;
  color: black;
  width: 100%;
  border: none;
  outline: none;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  padding: 1vw 5vw 1vw 1vw;
  font-size: 1.24vw;
  font-weight: bold;
  background: transparent;
  box-shadow: 0 0 0.4vw rgb(0 0 0 / 50%);
  border-radius: 0.3vw;
}

/* Change background color of buttons on hover */
.tab-product-categories button:hover {
  background-color: #ddd;
}

/* Create an active/current "tab button" class */
.tab-product-categories button.active {
  background-color: #757171;
  color: #fff;
}

/* Style the tab content */
.tabcontent-categories {
  float: left;
  padding: 0px 1vw 14vw;
  /* border: 1px solid #ccc; */
  width: 80%;
  border-left: none;
  /* height: 300px; */
  margin-left: 1vw;
}

.related-product-categories {
  /* height: 100vh; */
}

.related-software-container .product-categories-filter {
  margin-top: 3vw;
}

.product-boxes .categories-box-container {
  margin-top: 0;
  grid-template-rows: auto;
  grid-template-columns: repeat(3, 0fr);
}

.product-boxes-content .categories-image img {
  /* width: 18vw; */
	width: 100%;
}
/* product-categories-tabs end */

/* product-categories page end */

/* hover effect start */
.post-pannel .post-pannel-content .pannel-content p,
.right-sidebar .components-content .component-info h2,
.edit-profile-content .profile-contacts h2 {
  transition: all 0.3s ease-in-out;
}

.post-pannel .post-pannel-content .pannel-content p:hover,
.right-sidebar .components-content .component-info h2:hover,
.edit-profile-content .profile-contacts h2:hover {
  color: var(--black);
}
/* hover effect end */

/* footer start */
.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  left: 0;
  z-index: 9;
  width: 100%;
}

.footer .footer-content p {
  margin-bottom: 0;
  font-size: 1vw;
}

.footer .footer-list ul {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0;
  margin: 0;
  list-style-type: none;
}

.footer .footer-list ul li {
  padding: 0.5vw 2.5vw;
  position: relative;
}

.footer .footer-list ul li a {
  color: var(--black);
  text-decoration: none;
  font-size: 1vw;
  transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.footer .footer-list ul li a:hover {
  color: var(--white);
}

.footer .footer-list ul li:nth-child(6) {
  padding-right: 0;
  padding-left: 0;
}

.footer .footer-list ul li select {
  background-color: transparent;
  /* background-image: unset; */
  border: 0;
  font-family: inherit;
  font-size: 1vw;
  cursor: pointer;
  padding: 0.5vw 2.5vw 0.5vw 2.5vw;
  width: 100%;
  height: 100%;
  color: var(--black);
}

.footer-chevron-icon {
  position: absolute;
  top: 0vw;
  right: 1vw;
  bottom: 0;
  z-index: -1;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-chevron-icon i {
  font-size: 1vw;
}

.footer .footer-list ul li .chevron-icon {
  position: absolute;
  top: 1vw;
  right: 3vw;
  cursor: pointer;
}

.footer .footer-list ul li .chevron-icon i {
  font-size: 1vw;
  font-weight: bold;
}

.footer .footer-list ul li select:focus {
  outline: none;
}

.chat-button {
  position: fixed;
  bottom: 10vw;
  right: 5vw;
  cursor: pointer;
  z-index: 9;
}

.chat-button .chat-button-content img {
  width: 5vw;
}
/* footer end */

@media screen and (max-width: 768px) {
  /* navbar start */
  .navbar .navbar-logo img {
    width: 10vw;
  }
  /* navbar end */

  /* header section start */
  .header-section {
    padding: 7vw 2vw 7vw 2vw;
  }
  .header-section .header-section-image {
    height: 46vw;
  }
  /* header section end */

  /* toolbar start */
  .toolbar .toolbar-container .toolbar-content > img {
    width: 3.5vw;
  }
  /* toolbar end */

  /* user-page start */
  .sidenav .chat-arrow img,
  .sidenav .sidenav-container .sidenav-content img {
    width: 2.5vw;
  }
  .sidenav .sidenav-container .sidenav-content {
    gap: 7%;
  }
  .user-profile-container .user-profile {
    grid-template-rows: repeat(3, 24vw);
    gap: 4%;
  }
  .user-profile-container .user-profiles .user-profile-image {
    width: 7vw;
    height: 7vw;
  }
  .user-profile-container .user-profiles .user-profile-image h2 {
    top: 3vw;
    left: 3vw;
  }
  /* user-page end */

  /* group-page start */
  .user-profile-container .group-profile {
    grid-template-rows: repeat(1, 24vw);
  }
  /* group-page end */

  /* post-page start */
  .custom-select select,
  .view-accordion-content form input {
    font-size: 1.5vw;
  }

  .view-accordion-content .show-post .view-color-box {
    width: 2.4vw;
    height: 2.4vw;
    top: -0.35vw;
    left: 1.9vw;
  }

  .view-accordion-content
    .show-post
    .post-form-group
    input[type="checkbox"]
    + label:before {
    width: 1.6vw;
    height: 1.6vw;
  }

  .view-accordion-content
    .show-post
    .post-form-group
    input[type="checkbox"]:checked
    + label:after {
    top: 0.2vw;
    left: 2.9vw;
    width: 0.4vw;
    height: 1vw;
  }

  .view-accordion-content
    .show-post
    .post-form-group
    input[type="checkbox"]:checked
    + .label-text:after {
    top: 0.2vw;
    left: 0.6vw;
  }

  .view-accordion-content
    .show-post
    .post-check
    input[type="checkbox"]
    + label:before {
    width: 2.4vw;
    height: 2.4vw;
  }

  .view-accordion-content
    .show-post
    .post-form-group
    input[type="checkbox"]:checked
    + .label-text-one:after {
    top: 0.6vw;
    left: 1vw;
  }

  .view-accordion-content form .form-button button {
    top: -3.4vw;
  }

  .edit-profile-content .edit-profile .profile-name h1 {
    font-size: 1.7vw;
  }

  .post-section {
    margin: 15vw 25vw 0;
  }

  .posting-content .like-pannel .like-pannel-container .like-pannel-content {
    gap: 4%;
  }

  .post-section-container .new-post .post-field .form-field input,
  .posting-content .add-comment-msg .msg-field input {
    font-size: 1.5vw;
  }

  .chat-box-display .type-message form input.type-input,
  .chat-box-display .type-message form input::placeholder {
    font-size: 1.6vw;
  }

  .chat-box-display .type-message .send-button button {
    padding: 1.2vw 1.5vw;
  }

  .posting-container {
    padding-bottom: 5vw;
  }

  /* post-page end */

  /* chat-page start */
  .messenger-container .messenger-content .user-content {
    width: 36%;
  }
  /* chat-page end */

  /* product-page start */
  .product-container {
    padding-bottom: 4vw;
  }

  .content-container .sidebar-content input,
  .content-container .sidebar-content input::placeholder,
  .content-container .sidebar-content .caret-content .select-caret i,
  .content-container .sidebar-content .caret-content .form-select,
  .content-container .sidebar-button button {
    font-size: 1.5vw;
  }

  .product-boxes .boxes-container {
    grid-template-rows: repeat(5, 29vw);
    width: 112%;
  }

  .boxes-container .product-boxes-content .product-email img {
    width: 5vw;
  }

  .boxes-container .product-boxes-content .product-image img {
    width: 21.1vw;
  }

  .boxes-container .product-boxes-content .product-info h2 {
    margin-bottom: 2vw;
  }
  /* product-end */

  /* supplier-page start */
  .supplier-box-container .supplier-boxes-content .supplier-content {
    grid-template-rows: repeat(1, 20vw);
  }
  /* supplier-page end */

  /* software-page start */
  .softwares-container {
    margin: 15vw 0vw 15vw 4vw;
  }

  .softwares-container .softwares-check {
    right: 5vw;
  }

  .software-boxes .software-container {
    grid-template-columns: repeat(4, 0fr);
    grid-template-rows: repeat(4, 28vw);
    width: 100%;
  }
  /* software-page end */

  /* detailed-software page start */
  .detailed-software {
    margin: 20vw 12vw 15vw 12vw;
  }

  .detailed-container .content-container {
    margin: 3vw 6vw 5vw 2vw;
  }

  .related-software-container .related-content {
    grid-template-rows: repeat(1, 27vw);
  }
  /* detailed-software page end */

  /* product-categories page start */
  .tab-product-categories button {
    font-size: 1.5vw;
  }

  .tabcontent-categories {
    padding: 0px 1vw 14vw;
    width: 75%;
  }

  .product-boxes .categories-box-container {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 0fr);
    width: 100%;
  }
  /* product-categories page end */

  /* chat-button start */
  .chat-button {
    bottom: 10vw;
    right: 4vw;
  }
  .chat-button .chat-button-content img {
    width: 6vw;
  }
  /* chat-button end */

  /* footer start */
  .footer .footer-content p,
  .footer .footer-list ul li a,
  .footer .footer-list ul li select {
    font-size: 1.3vw;
  }
  /* footer end */
}

@media screen and (max-width: 425px) {
  .footer .footer-content p,
  .footer .footer-list ul li a,
  .footer .footer-list ul li select {
    font-size: 1.5vw;
  }
  /* .footer .footer-list ul li select {
    padding: 1.3vw 5vw 0px 0;
    background-position: right 1vw bottom;
    background-size: 24% 68%;
    margin-top: 0.4vw;
  } */
  .footer .footer-content p {
    margin-top: 2vw;
  }
  .toolbar {
    top: 7.9vw;
  }
  .notification-action .profile-display,
  .posting-content .profile-content .post-info .post-profile,
  .comment-box .comment-giving-box .user-comment .comment-profile,
  .edit-profile-content .edit-profile .profile-content,
  .edit-profile-content .edit-profile .profile-content img,
  .right-sidebar .active-users .active-users-content .user-image,
  .right-sidebar .active-users .active-users-content .user-image img,
  .posting-content .profile-content .post-info .post-profile img,
  .comment-box .comment-giving-box .user-comment .comment-profile img {
    width: 7vw;
    height: 7vw;
  }
  .view-post-container .new-group .new-group-button button img,
  .right-sidebar .components-content .component-image img {
    width: 4vw;
  }
  .post-section-container .new-post .post-field .field-profile {
    width: 6vw;
    height: 6vw;
  }
  .comment-box .comment-giving-box .user-comment .reply-profile,
  .post-section-container .new-post .post-field .field-profile img {
    width: 3vw;
    height: 5vw;
  }
  .chat-page-section .chat-box-display {
    margin: 17vw 4vw 10vw 24vw;
  }
  .messenger-container .messenger-content .user-profile,
  .display-user .user-info-container .user-profile,
  .messenger-container .messenger-content .user-profile img,
  .display-user .user-info-container .user-profile img {
    border-radius: 50%;
    overflow: hidden;
    width: 6vw;
    height: 6vw;
  }
  .about-section {
    padding: 10vw 17vw;
  }
  .about-login-section {
    padding: 19vw 17vw;
  }
  .supplier-box-container {
    width: 110%;
  }
  .product-container {
    margin: 20vw 14vw 15vw 25vw;
  }
  .product-container .product-box-container .product-boxes {
    padding: 3vw 0vw 6vw 2vw;
  }
  .product-boxes .boxes-container {
    grid-template-rows: repeat(5, 31vw);
  }
  .softwares-container .software-box-container .software-boxes {
    padding: 0vw 0vw 4vw 0vw;
  }
  .softwares-container {
    margin: 15vw 0vw 15vw 4vw;
  }
  .product-boxes .categories-box-container {
    grid-template-rows: auto;
    grid-template-columns: repeat(3, 0fr);
  }
  .related-product-categories {
    /* height: 55vh; */
  }
}

@media screen and (max-width: 375px) {
  .toolbar {
    top: 8.6vw;
  }
  .sidenav .sidenav-container {
    margin-top: 6vw;
  }
}

@media screen and (max-width: 320px) {
  .toolbar {
    top: 9.5vw;
  }
}


/* added by on 04 jan 2022 */

.dropdown-content {
  display: none;
  position: absolute;
  background-color: var(--grey);
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  font-size: 1.24vw;
}

.add-button:hover .dropdown-content{
  display: block;
}

.add-button a:hover, .add-button a:focus, .add-button a:active{
  background-color: #e9ecef;
}

.free-offer-heading-div {
  background-color: #fde9da;
  text-align: center;
  padding: 12px;
}

.free-offer-heading-text {
  font-weight: 600;
}

.heading-sub-text {
  text-align: center;
  font-weight: 600;
}

.free-service-heading-table{
  font-weight: 600;
  margin-top: 10px;
}

.free-service-tableDiv, .paid-service-tableDiv{
  margin-top: 5px;
  margin-bottom: 100px;
}

.paid-service-heading-table{
  margin-top: 40px;
  font-weight: 600;
}

.content-container .sidebar-content .fieldwidth{
  width: 16vw !important;  
}

.content-container .sidebar-content .input-field {
  border: 1px solid var(--grey);
  padding: 0.5vw 1.5vw;
  font-size: 1vw;
  margin-top: 1vw;
  border-radius: 0.3vw;
  width: 17vw;
}

.sidebar-or-text {
  text-align:center;
  font-weight: 600;
}

.clickHere{ 
  color: #0d6efd;
  text-decoration: underline;
}

.clickDiv {
  margin-top: 2vw;
}

.software-btns{
  display: flex;
}

.product-edit {
  top: unset;
  bottom: 0;
  right: 0;
  position: absolute;
}

.requiredField{
  color: red;
}

.tox-statusbar__branding, .tox-statusbar__path{
  display: none;
}

.attachText {
  float: left;
}

.attachIconsDiv {
  display: flex;
}

.attachIcons {
  margin: 0 4px;
}

/* tooltip START*/

.tooltip {
  position: relative;
  display: inline-block;
  opacity: 1;
}

.tooltip .tooltiptext {
  visibility: hidden;
  width: 70px;
  background-color: #fff;
  color: #000;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 130%;
  margin-left: -60px;
}

.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
  border: 1px solid black;
}

/* tooltip END */

.content-container .sidebar-content .radiobtn{
  width: auto;
  position: unset;
  left: unset;
}

.content-container .sidebar-content .checkboxbtn {
  width: auto;
}

.slider-box-bg{
  background-color: unset;
  padding: unset;
  margin-top: 2.5vw ;
}

.sky-mg{
  margin: unset;
}

#cuntry, #stats, #cmpny {
  height: auto;
  width: 100%;
}

.mg-top{
  margin-bottom: 1vw;
}

.content-container .sidebar-content #layout1,
.content-container .sidebar-content #layout2,
.content-container .sidebar-content #layout3 {
  position: unset; 
  left: unset;
}

.centerImg {
  text-align: center;
}

.inlineBtn{
  display: flex;
}

.sky-tabs > ul > .tabover{
  overflow: unset;
}

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  padding: 1vw;
} 

.txtUnderline{
  text-decoration: underline;
}

.free-service-tableHeading{
  text-align: center;
  background-color: #d6eef3;
}

.free-offer-container{
  margin: 15vw 2vw;
  padding-bottom: 5vw;
}

.transactionHist{
  font-weight: 600;
  margin-bottom: 1vw;
}

.transTable{
  margin-bottom: 10px;
}

.transDiv {
  display: flex;
  justify-content: space-between;
}

.profile-container{
  margin: 15vw 20vw;
  padding-bottom: 5vw;
}

.image-content{
  margin-top: 1.5vw;
  display: inline-block;
  width: 100%;
}

.userImage{
  float: left;
}

.userImage h3{
  margin-top: 10px;
  text-align: center;
}
.userImage a{
  color: #0d6efd;
}
.userdetails{
  float: left;
  margin-top: 60px;
  width: 77%;
  padding-left: 30px;
}

.mini-Head{
  margin-top: 10px;
}

.editIcon{
  margin-left: 10px;
  cursor: pointer;
}

.prsnlDetails{
  margin-top: 20px;
}

.prsnlDetails ul {
  list-style-type: none;
}

.prsnlDetails ul label {
  float: left;
  width: 155px;
  font-size: 16px;
  margin: 0;
  color: var(--close-button);
  font-weight: 600;
}

.prsnlDetails li {
  line-height: 40px;
  margin-top: 10px;
}

.paraFont {
  font-size: 14px;
}

.gear{
  width: 70%;
  display: inline-block;
}

.datainfo{
  width: auto;
  max-width: 90%;
  text-align: justify;
  float: left;
  line-height: 20px;
  /* margin: 10px 0; */
  display: flex;
  gap: 1%;
}

.iconContent{
  margin-top: 40px;
}

.iconSpace{
  margin-bottom: 40px;
}

.attachIconsprofile{
  margin:0 15px;
  z-index: 0;
}

.exp_head{
  width: 100%;
  display: inline-block;
  margin-top: 20px;
}


.exp_head > h2 {
  color: #a9b3bd;
  float: left;
  margin: 5px 26px;
  text-transform: none;
  width: 60%;
  font-size: 28px;
  font-weight: normal;
}
.addposi{
  background-color:var(--post-background);
  cursor: pointer;
}

.exp_head > p {
  background:var(--post-background);
  float: left;
  margin-left: 5px;
  padding: 2px 10px;
  /* width: 96px; */
  font-weight: bold;
}

.exp_head span {
  padding: 0 5px;
}

.expContentDiv, .honorContent{
  margin: 0 26px;
}

.expContentDiv{
  margin-top: 40px;
}

.expDetails{
  margin-top: 20px;
}

.expDetails h2 {
  color: var(--close-button);
  font-weight: 600;
}

.expBtn .exp-button .addBtn{
  margin: 10px 26px;
  text-align: center;
  background:var(--post-background);
  width: 94%;
}

/* .exp-button{
  width: 96.4%;
} */

.profile-container .sidebar-content .input-field {
  border: 1px solid var(--grey);
  padding: 0.5vw 1.5vw;
  font-size: 1vw;
  margin-top: 1vw;
  border-radius: 0.3vw;
  width: 17vw;
}
.profile-container .sidebar-content .ProfileTitleInput {
  width: 100%;
}

.sidebar-space{
  margin-bottom: 2.5vw;
}

.selectSpace{
  margin-top: 1vw;
  width: 220px;
  display: inline-block;
}

.last-space{
  margin-bottom: 0.5vw;
}

.btns{
  display: flex;
}

#cancelbtn, #expcancelbtn, #educancelbtn{
  margin-left: 1vw !important;
}

.expBtn .expi-button #savebtn, .expBtn .expi-button #cancelbtn, .expBtn .expi-button #expcancelbtn, .expBtn .expi-button #expsavebtn, .expBtn .expi-button #edusavebtn, .expi-button #educancelbtn{
  background-color: var(--post-background);
  border: 1px solid var(--grey);
  border-radius: 0.3vw;
  color: var(--close-button);
  font-size: 0.97vw;
  width: 7vw;
  margin: 10px 0px;
  text-align: center;
}

.honDiv{
  margin-bottom: 5vw;
}

.divBorder, .expDiv{
  border: 1px solid var(--grey);
}

.divBorder{
  padding: 1vw;
}

.expDiv{
  margin-top: 2vw;
}

.displayInput{
  display: none;
}

.inpfield{
  border: unset;
  border-bottom: 1px solid var(--grey) !important;
  font-size: 1vw;
  border-radius: 0.3vw;
  width: 17vw;
  display: block;
  margin-top: 0.5vw;
  padding:0.1rem 0.5rem 0.1rem 0.5rem;
}

.saveCancelBtn{
  border: 1px solid var(--grey);
}

.SelectMonth {
  display: flex;
  width: 50%;
  gap: 2%;
  align-items: center;
}

.selectYear{
  width:100%
}

.fieldWidth{
  width: 100%;
}

.checkClass{
  width: unset;
  display: inline-block;
  margin-right: 0.5vw;
}

.borBotm{
  border-bottom: 1px solid var(--grey);
}

/* accordion start*/

.accord {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.activ, .accord:hover {
  background-color: #ccc; 
}

.pan {
  padding: 20px 5px;
  display: none;
  background-color: white;
  overflow: hidden;
}

/* accordion end */

.prsnlLabel{
  display: unset;
}

#user-ttext:after{
  top: unset;
}

button.close-button-modal i {
  font-size: 1.5vw;
}

.truncate p {
  color: var(--black);
  font-size: 1.2vw;
}

@media screen and (max-width: 900px){
  button.close-button-modal i {
      font-size: 2vw;
  }
}