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

/* login-popup start */

.input-group {
  position: relative;
}

.form_control {
  background-color: var(--white);
  position: relative;
}
.form_control + label {
  position: absolute;
  top: 0.6vw;
  left: 1vw;
  font-size: 1.66vw;
  color: var(--grey);
  transition: 0.1s ease-in-out;
}
.form_control:focus {
  outline: none;
  transition: all 0.1s ease-in-out;
}
.form_control:focus + label,
.form_control.has_class + label {
  top: -1.3vw;
  color: var(--close-button);
  font-size: 1.66vw;
}

.input-group:not(.has-validation) > .dropdown-toggle:nth-last-child(n + 3),
.input-group:not(.has-validation)
  > :not(:last-child):not(.dropdown-toggle):not(.dropdown-menu) {
  border-radius: 0.3vw;
}

.login-popup {
  margin: 0vw 30vw;
  padding: 8vw 0;
}

.login-popup-container {
  position: relative;
  background-color: var(--grey);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw 4vw;
  border-radius: 0.3vw;
  text-align: center;
  transition: 0.3s ease-in-out;
}

.login-popup-container button.login-close-modal {
  background-color: var(--close-button);
}

button.close-button-modal {
  position: absolute;
  background-color: #757571;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3vw;
  height: 3vw;
  top: 1vw;
  right: 1vw;
}

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

.login-popup-container .pexit-logo img {
  width: 10vw;
}

.login-popup-container .login-container h1.header {
  margin: 1vw 0;
}

.login-popup-container .login-container h1.login-header {
  margin-bottom: 3vw;
}

.login-content-fields {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.login-content-fields form,
.social-buttons-content {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.login-content-fields form input,
.creategroup-modal .creategroup-content form textarea,
.creategroup-modal .creategroup-content form select {
  margin-bottom: 1vw;
  padding: 0.6vw 1vw;
  border-radius: 0.3vw;
  width: 100%;
  font-size: 1.66vw;
  color: var(--black);
  position: relative;
  transition: 0.1s ease-out;
}

.social-buttons-content .social-button button,
.login-content-fields form button.login-button {
  padding: 0.8vw 5vw;
  margin-bottom: 1vw;
  width: 100%;
  transition: all 0.3s ease-in-out;
}

.social-buttons-content .social-button button:hover,
 .login-content-fields form button.login-button:hover{
  background-color: var(--medium-grey);
  color: var(--white);
}

.login-content-fields form button.login-button {
  margin-bottom: 0;
}

.login-content-fields form button.login-button {
  background-color: var(--medium-grey);
}

.social-buttons-content .social-button button h1,
.login-content-fields form button.login-button {
  font-weight: bold;
}

.login-content-fields form input::placeholder,
.social-buttons-content .social-button button,
.creategroup-modal .creategroup-content form textarea::placeholder,
.creategroup-modal .creategroup-content form select {
  color: var(--grey);
}

.login-content-fields form button.login-button {
  color: var(--white);
}

.login-content-fields form button.login-button{
  transition: all 0.3s ease-in-out;
}

.login-content-fields form button.login-button:hover {
  background-color: var(--white);
  color: var(--grey);
}

.login-popup-container .login-container .seperator {
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-popup-container .login-container .seperator .seperator-text {
  margin: 0 3vw;
}

.login-popup-container .login-container .seperator .line {
  background-color: var(--black);
  height: 0.1vw;
  width: 11vw;
}

/* login-popup end */

/* joinnow-popup start */
.login-popup-container .joinnow-container h1.header {
  margin: 0 0 2vw;
}

.joinnow-popup {
  margin: 0vw 15vw;
}

.login-container.joinnow-container {
  display: flex;
  justify-content: space-between;
  width: 100%;
  gap: 1%;
}

.joinnow-social-buttons {
  width: 64%;
}

.login-popup-container .joinnow-content-fields form {
  width: 80%;
}

.login-popup-container .joinnow-content-fields form h1.joinnow-text {
  margin: 1vw 1vw 2vw;
}

.joinnow-content-fields form .mobile-number {
  display: flex;
  gap: 5%;
}

.joinnow-content-fields form .mobile-number .country-code {
  width: 25%;
}
/* joinnow-popup end */

/* creategroup-popup start */
.creategroup-modal-container.open::-webkit-scrollbar,
.create-post-modal.open::-webkit-scrollbar,
.chat-message-modal.open::-webkit-scrollbar,
.search-modal-container.open::-webkit-scrollbar,
.sendmessage-modal-container.open::-webkit-scrollbar,
.sending-modal.open::-webkit-scrollbar,
.group-modal-container::-webkit-scrollbar {
  display: none;
  scrollbar-width: none; /* for Firefox */
}

.creategroup-modal-container,
.create-post-modal,
.chat-message-modal,
.search-modal-container,
.sendmessage-modal-container,
.sending-modal,
.group-modal-container {
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.51) 0%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(5px);
}

.creategroup-modal-container,
.create-post-modal,
.chat-message-modal,
.search-modal-container,
.sendmessage-modal-container,
.sending-modal,
.group-modal-container {
  /* margin: 8vw 26vw 8vw 24vw; */
  margin: 0;
  /* padding: 8vw 0; */
  opacity: 0;
  visibility: hidden;
  transition: 0.3s ease-in-out;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  width: 102%;
  height: 100vh;
  justify-content: center;
  align-items: center;
  z-index: 99;
}

.creategroup-modal-container.open,
.create-post-modal.open,
.chat-message-modal.open,
.search-modal-container.open,
.sendmessage-modal-container.open,
.sending-modal.open,
.group-modal-container.open {
  opacity: 1;
  visibility: visible;
  padding-top: 14vw;
  padding-bottom: 5vw;
  /* padding-bottom: 0vw; */
  overflow-y: scroll;
}

.creategroup-modal {
  position: relative;
  background-color: var(--medium-grey);
  border-radius: 0.3vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2vw 4vw;
  text-align: center;
}

button.close-button-modal {
  background-color: var(--grey);
  transition: all 0.3s ease-in-out;
}

button.close-button-modal:hover{
  background-color: var(--white);
  color: var(--grey);
}

.creategroup-modal .creategroup-header {
  border-bottom: 0.1vw solid var(--white);
  width: 96%;
}

.creategroup-modal .creategroup-header h1 {
  font-weight: bold;
  color: var(--white);
  margin-bottom: 1vw;
}

.creategroup-modal .creategroup-content {
  margin: 2vw 0;
  width: 66%;
}

.creategroup-modal .creategroup-content form textarea {
  border: none;
}

.creategroup-modal .creategroup-content form textarea:focus {
  outline: none;
}

.creategroup-modal .creategroup-content form input,
.creategroup-modal .creategroup-content form textarea,
.creategroup-modal .creategroup-content form input::placeholder,
.creategroup-modal .creategroup-content form textarea::placeholder,
.creategroup-modal .creategroup-content form select,
.creategroup-modal .creategroup-content form button.creategroup-button {
  font-size: 1.24vw;
  padding: 1vw;
}

.creategroup-modal .creategroup-content form button.creategroup-button {
  color: var(--close-button);
  background-color: var(--white);
  transition: all 0.3s ease-in-out;
}

.creategroup-modal .creategroup-content form button.creategroup-button:hover{
  background-color: var(--close-button);
  color: var(--white);
}

.creategroup-modal .creategroup-content form button.creategroup-button h2,
.creategroup-modal .creategroup-content form h2.header-text {
  font-weight: bold;
}

.creategroup-modal .creategroup-content form h2.header-text {
  color: var(--white);
  margin: 0.5vw 0 1.5vw;
  width: 155%;
  position: relative;
  left: -6.8vw;
}

.creategroup-modal .creategroup-content form select {
  border: none;
  background-image: unset;
}

.creategroup-modal .creategroup-content form .public-select {
  position: relative;
}

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

.creategroup-modal .creategroup-content form .public-select i {
  font-size: 1.66vw;
  color: var(--medium-grey);
}

/* creategroup-popup end */
/* sendmessage-popup start */
.send-message-modal {
  width: 45%;
  margin-bottom: 14vw;
}

.send-message-modal .sendmessage-content {
  width: 100%;
  justify-content: flex-start;
  align-items: flex-start;
  margin-top: 3vw;
}

.sendmessage-content .send-message-profile {
  display: flex;
  justify-content: space-between;
  width: 25%;
  align-items: center;
}

.sendmessage-content .send-message-profile .profile {
  border-radius: 50%;
  overflow: hidden;
  width: 4vw;
  height: 4vw;
}

.sendmessage-content .send-message-profile .profile img {
  width: 4vw;
}

.sendmessage-content .send-message-profile .profile-name h1 {
  color: var(--white);
  font-weight: bold;
}

.sendmessage-content form.sendmessage-form {
  position: relative;
  margin-top: 2vw;
}

.sendmessage-content form.sendmessage-form button.search {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  bottom: 1vw;
  top: 0;
  right: 0;
}

.sendmessage-content form.sendmessage-form button.search i {
  font-size: 2vw;
}

.sendmessage-content form.send-message-type {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.send-message-modal .sendmessage-content form input::placeholder {
  color: var(--medium-grey);
}

.sendmessage-content form input.sendmessage {
  width: 70%;
  margin-bottom: 0;
}

.sendmessage-content form button.send {
  width: 25%;
  font-size: 1.66vw;
  margin: 0.3vw 0;
  background-color: var(--post-background);
  color: var(--close-button);
  transition: all 0.3s ease-in-out;
}

.sendmessage-content form button.send:hover{
  background-color: var(--close-button);
  color: var(--post-background);
}

.sendmessage-content form button.send h1 {
  font-weight: bold;
}
/* sendmessage-popup end */

/* contactsupplier-popup start */
.contactsuuplier-modal {
  width: 45%;
}
/* contactsupplier-popup end */
/* downloadcaepipe-popup start */
.creategroup-modal .creategroup-content form button.caepipe-program {
  margin-top: 3vw;
}
/* downloadcaepipe-popup end */

/* createpost-popup start */
.creategroup-modal .creategroup-content {
  margin: 2vw 0 0;
}

.postcreate-modal {
  width: 52%;
}

.create-post-content {
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  width: 100%;
}

.sendmessage-content .create-post-profile {
  width: 100%;
  gap: 3%;
  justify-content: flex-start;
}

.sendmessage-content .create-post-profile .post-profile {
  width: 5vw;
  height: 5vw;
}

.sendmessage-content .create-post-profile .post-profile img {
  width: 5vw;
}

.sendmessage-content .create-post-profile .post-name {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
}

.sendmessage-content .create-post-profile .post-name h2 {
  color: var(--white);
  font-weight: bold;
  margin-bottom: 1vw;
}

.sendmessage-content .create-post-profile .post-name .my-group,
.sendmessage-content .createpost-form textarea {
  background-color: var(--post-background);
  border-radius: 0.3vw;
}

.sendmessage-content .createpost-form textarea::placeholder {
  color: var(--close-button) !important;
  font-weight: bold;
}

.sendmessage-content .create-post-profile .post-name .my-group img.post-globe {
  width: 2vw;
  height: 2vw;
  padding: 0.2vw;
  top: 0.3vw;
  position: relative;
}

.sendmessage-content
  .create-post-profile
  .post-name
  .my-group
  select.selectpicker {
  border: none;
  padding: 0.5vw 2.8vw 0.5vw 0.5vw;
  background-color: transparent;
  border-left: 1px solid var(--light-grey);
  border-radius: 0;
  color: var(--close-button);
  font-size: 0.97vw;
  font-weight: bold;
}

.sendmessage-content .create-post-profile .post-name .my-group span {
  border-left: 1px solid var(--light-grey);
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  right: 0;
}

.sendmessage-content .create-post-profile .post-name .my-group span i {
  font-size: 1.5vw;
  color: var(--close-button);
}

.form-control:focus {
  border-color: none;
  box-shadow: unset;
}

.create-post-content .show-user {
  position: relative;
  width: 100%;
  margin-bottom: 0.8vw;
}

.show-user .createpost-colorbox {
  top: -0.34vw;
  right: -0.3vw;
  width: 2.2vw;
  height: 2.2vw;
}

.show-user .show-user-post-group {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  position: relative;
  top: 0;
  right: 0;
}

.show-user .show-user-post-group label.post-user-text {
  font-size: 0.97vw;
  color: var(--white);
}

.show-user-form-group input[type="checkbox"]:checked + label:after {
  top: 0.2vw;
}

.postmodal-pannel {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 1vw;
}

.postmodal-pannel .postmodal-content {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.postmodal-pannel .postmodal-content-image {
  background-color: var(--post-background);
  border-radius: 0.3vw;
  padding: 1vw 0.7vw;
}

.postmodal-pannel .postmodal-content-image img {
  width: 3vw;
  height: 3vw;
}

.postmodal-pannel .postmodal-content h2 {
  color: var(--white);
  margin-top: 0.5vw;
}

.postmodal-pannel .postmodal-content h2,
.postmodal-pannel .postmodal-content button h1 {
  font-weight: bold;
}

.postmodal-pannel .postmodal-content button {
  background-color: var(--post-background);
  color: var(--close-button);
  padding: 0.6vw 2.5vw;
  transition: all 0.3s ease-in-out;
}

.postmodal-pannel .postmodal-content button:hover{
  background-color: var(--close-button);
  color: var(--post-background);
}
/* createpost-popup end */

/* chatmessage-popup start */
#chat-modal {
  cursor: pointer;
}
.chat-send-message-modal {
  padding: 1.5vw 2vw 1vw;
  width: 40%;
}

.creategroup-modal .chat-group-box {
  border-bottom: 0.1vw solid var(--white);
  width: 100%;
}

.creategroup-modal .chat-group-box h1 {
  margin-bottom: 2vw;
}

.chat-message-container {
  background-color: var(--post-background);
  border-radius: 0.3vw;
  padding: 1vw 2vw;
  margin: 2vw 0 1vw;
  width: 100%;
}

.chat-message-container .chat-message-profile {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 4%;
}

.chat-message-profile .profile-content {
  border-radius: 50%;
  overflow: hidden;
  width: 5vw;
  height: 5vw;
}

.chat-message-profile .profile-content img {
  width: 5vw;
}

.chat-message-profile .profile-info h2,
.chat-message-container .chat-message-content h3 {
  font-weight: bold;
}

.chat-message-container .chat-message-content {
  margin: 1vw 0;
}

.chat-message-content .chat-date {
  text-align: center;
  margin-bottom: 2vw;
}

.chat-message-content .message-box-one,
.chat-message-content .message-box-two {
  position: relative;
  margin-bottom: 2vw;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-direction: column;
}

.chat-message-content .message-box-two {
  justify-content: flex-end;
  align-items: flex-end;
}

.chat-message-content .message-box-one .message-content-one,
.chat-message-content .message-box-two .message-content-two {
  background-color: var(--white);
  border-radius: 0.3vw;
  border: 1px solid var(--light-grey);
  padding: 1vw 2vw;
  width: 50%;
  text-align: left;
  /* margin-top: 1vw; */
}

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

.chat-message-content .message-box-one .message-content-one h3,
.chat-message-content .message-box-one .time-content-one h3,
.chat-message-content .message-box-two .message-content-two h3,
.chat-message-content .message-box-two .time-content-two h3 {
  color: var(--close-button);
}

.chat-message-content .message-box-one .time-content-one,
.chat-message-content .message-box-two .time-content-two {
  position: relative;
  top: 0.5vw;
  left: 2vw;
}

.chat-message-content .message-box-two .time-content-two {
  left: -10.5vw;
}

.chat-message-form {
  margin: 1vw 0;
  position: relative;
  width: 100%;
}

.chat-message-form input,
.chat-message-form input::placeholder {
  font-size: 1.24vw;
  color: var(--medium-grey);
}

.chat-message-form input {
  border-radius: 0.3vw;
  padding: 1vw 1.5vw;
  color: var(--black);
  width: 100%;
}

.chat-message-form button {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  right: 1vw;
}

.chat-message-form button i {
  font-size: 1.5vw;
}
/* chatmessage-popup end */

/* search-popup start */
.search-field-container {
  margin-top: 2vw;
}

.navbar-action-search .search-form-popup {
  margin-left: 0vw;
}

.search-radiobutton {
  margin: 2vw 3vw 0vw;
}

.search-radiobutton input[type="radio"]:checked,
[type="radio"]:not(:checked) {
  position: absolute;
  left: -9999px;
}
.search-radiobutton input[type="radio"]:checked + label,
.search-radiobutton input[type="radio"]:not(:checked) + label {
  position: relative;
  padding-left: 6vw;
  cursor: pointer;
  line-height: 2;
  display: inline-block;
  color: #fff;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-weight: bold;
  margin: 1vw 0;
}
.search-radiobutton input[type="radio"]:checked + label:before,
.search-radiobutton input[type="radio"]:not(:checked) + label:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5vw;
  height: 2.5vw;
  border: 1px solid #ddd;
  border-radius: 100%;
  background-color: var(--light-grey);
}
.search-radiobutton input[type="radio"]:checked + label:after,
.search-radiobutton input[type="radio"]:not(:checked) + label:after {
  content: "";
  width: 1.5vw;
  height: 1.5vw;
  background-color: var(--close-button);
  position: absolute;
  top: 0.5vw;
  left: 0.5vw;
  border-radius: 100%;
  -webkit-transition: all 0.2s ease;
  transition: all 0.2s ease;
}
.search-radiobutton input[type="radio"]:not(:checked) + label:after {
  opacity: 0;
  -webkit-transform: scale(0);
  transform: scale(0);
}
.search-radiobutton input[type="radio"]:checked + label:after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}
/* search-popup end */

@media screen and (max-width: 768px) {
  /* login-popup start */
  .login-content-fields form input,
  .login-content-fields form input::placeholder {
    font-size: 2vw;
  }
  /* login-popup end */
  /* joinnow-popup start */
  .joinnow-popup {
    margin: 0vw 11vw;
  }
  /* joinnow-popup end */
}