html {
  font-size: 62.5%;
}

body {
  height: 100vh;
  background: var(--white);
}

button {
  cursor: pointer;
}

* {
  margin: 0rem;
  padding: 0rem;
}

:focus-visible {
  outline: none;
}

textarea,
input {
  box-shadow: inherit;
  border: none;

}

a {
  text-decoration: none !important;
  cursor: inherit;
}

/*scroll-bar*/

/* Firefox */
::-webkit-scrollbar {
  width: 0.4rem;
  cursor: pointer;
}

::-webkit-scrollbar-track {
  box-shadow: inset 0 0 0.4rem transparent;
  border-radius: 0.3rem;

}

::-webkit-scrollbar-thumb {
  background: var(--dark-gray);
  border-radius: 0.3rem;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--dark-gray);
}

::-moz-scrollbar {
  scrollbar-width: thin;
}

::-moz-scrollbar-track {
  box-shadow: inset 0 0 0.4rem transparent;
  border-radius: 0.3rem;

}

::-moz-scrollbar-thumb {
  background: var(--dark-gray);
  border-radius: 0.3rem;
}

::-moz-scrollbar-thumb:hover {
  background: var(--dark-gray);
}

input:focus {
  outline: none !important;
  box-shadow: inherit !important;
}
.disableClick {
  pointer-events: none;
}
.tour-title span {
  font-size: var(--font-size-15) !important;
}
.form-control:focus {
  /* border: none; */
  box-sizing: inherit;
}

textarea:focus {
  outline: none;
}

.marginBottom {
  margin-bottom: 0.4rem;
}

.padding-left-0,
.padding-right-0 {
  padding: 0rem;
}

.coloErrorMsg {
  font-size: var(--font-size-11);
  color: var(--red) !important;

  display: inline-block;
}

.testCapitalize {

}

.pageScroll {
  height: calc(100vh - 17rem) !important;
  overflow: auto !important;
  max-height: inherit !important;
}

.customRow {
  margin-right: 0rem;
  margin-left: 0rem;
  display: -webkit-box;
  display: -ms-flexbox;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  margin-right: 0rem;
  margin-left: 0rem;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -moz-flex;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: nowrap;
  flex-wrap: nowrap;
}

/*call-request-notification-start-here*/

.call-request-notification {
  position: absolute;
  top: 7.5rem;
  right: 1.6rem;
  z-index: 99;
}

.file-access-request-popup {
  width: 34rem;
  min-height: 13.2rem;
  display: flex;
  gap: 0.5rem;
  position: relative;
  padding: 1.6rem;
  margin-top: 1rem;
  border: 0.1rem solid var(--gray);
  border-radius: 0.4rem;
  background: var(--white);
  box-shadow: 0 0.6rem 1.8rem rgb(from var(--color-text-primary) r g b / 18%);
}

.file-access-popup-close {
  width: 2.6rem;
  height: 2.6rem;
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}

.file-access-popup-close img {
  width: 1.1rem;
  height: 1.1rem;
}

.file-access-popup-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  border-radius: 0.5rem;
}

.file-access-popup-icon img {
  width: 2rem;
  height: 2rem;
}

.file-access-popup-body {
  min-width: 0;
  padding-right: 1.8rem;
  flex: 1;
}

.file-access-popup-title {
  margin-bottom: 0.4rem;
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 700;
}

.file-access-popup-name {
  margin-bottom: 0.3rem;
  color: var(--dark-gray);
  font-size: var(--font-size-15);
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.file-access-popup-message {
  max-height: 3.6rem;
  margin-bottom: 1rem;
  color: var(--brown);
  font-size: var(--font-size-15);
  line-height: 1.5;
  overflow: hidden;
}

.file-access-request-popup .file-access-actions {
  display: flex;
  gap: 0.8rem;
  justify-content: flex-end;
}

.file-access-request-popup .file-access-action-btn {
  min-width: 8rem;
  height: 3.2rem;
  padding: 0 1.2rem;
  border-radius: 0.4rem;
  font-size: var(--font-size-15);
  font-weight: 700;
  cursor: pointer;
}

.file-access-request-popup .file-access-action-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.file-access-request-popup .file-access-approve {
  color: var(--white);
  border: 0.1rem solid var(--red);
  background: var(--red);
}

.file-access-request-popup .file-access-decline {
  color: var(--dark-gray);
  border: 0.1rem solid var(--gray);
  background: var(--white);
}

.file-access-request-popup .file-access-status {
  display: inline-flex;
  align-items: center;
  min-height: 3.2rem;
  color: var(--dark-gray);
  font-size: var(--font-size-13);
  font-weight: 700;
}

@keyframes fileAccessPopupDismiss {
  from {
    opacity: 1;
    transform: translateX(0);
    max-height: 20rem;
  }
  to {
    opacity: 0;
    transform: translateX(110%);
    max-height: 0;
    margin-top: 0;
    padding: 0;
  }
}
.file-access-popup-dismissing {
  animation: fileAccessPopupDismiss 0.4s ease-in forwards;
  overflow: hidden;
  pointer-events: none;
}

.user-icon-section-p img {
  width: 4.8rem;
  height: 4.8rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
}

.close-decline img {
  width: 1.1rem;
  height: 1.1rem;
}

.user-icon-section-p span.invite-short-name {
  background: none;
  color: var(--brown);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 88%;

  padding: 1rem 0 0 0;
  font-size: var(--font-size-15);
  font-weight: 600;
}

.dropdown-backdrop {
  position: unset !important;
}

.decline-admit-section {
  position: absolute;
  top: 7.7rem;
  right: 3rem;
}

.decline-admit-popup {
  width: 24rem;
  padding: 1.6rem 2rem 1.6rem 2.1rem;
  border-radius: 0.1rem;
  box-shadow: 0 0.5rem 1.3rem 0 rgb(from var(--color-text-primary) r g b / 54%);
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-slate-gray);

}

.user-icon-p {
  border: 0.1rem solid var(--red);
  border-radius: 0.3rem;
  padding: 0.2rem;
  height: 4.2rem;
  width: 4.2rem;
}

.user-icon-section-p {
  text-align: center;
}

.close-decline {
  position: absolute;
  right: 1.5rem;
  cursor: pointer;
}

.participant-name {
  margin-top: 1.6rem;
}

.label-common-name-p {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.58;
  text-align: center;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-w-subtitle {
  font-size: var(--font-size-11);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.55;
  text-align: center;
  color: var(--slate-gray);
  margin-top: 0.6rem;
}

.admit-dcline-btn {
  text-align: center;
}

.decline {
  width: 7.5rem;
  height: 3rem;
  padding: 0.8rem 0;
  border-radius: 0.2rem;
  box-shadow: 0 0.5rem 0.8rem 0 var(--color-border);
  border: solid 0.1rem var(--red);
  background-color: var(--white);

  font-size: var(--font-size-11);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  text-align: center;
  color: var(--red);

}

.admit {
  width: 7.5rem;
  height: 3rem;
  margin: 1.4rem 0.1rem 0 0.8rem;
  padding: 0.8rem 0;
  border-radius: 0.2rem;
  box-shadow: 0 0.5rem 0.8rem 0 var(--color-border);
  border: solid 0.1rem var(--red);
  background-color: var(--red);

  font-size: var(--font-size-11);
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  text-align: center;
  color: var(--white);

}

.invite-short-name {
  padding: 1rem;
  border-radius: 0.1rem;
  background-color: var(--brown);
  display: inline-block;
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: var(--white);

}

/*call-request-notification-End-here*/

.InvitepageScroll {
  overflow: scroll;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  grid-auto-flow: row dense;
  grid-gap: 1vw;
  grid-auto-rows: max-content;
  list-style: none;
}

.common-icons-size {
  height: 4.3rem;
  width: 4.3rem;
  border-radius: 0.5rem;
  padding: 0.1rem;
  margin: 0rem !important;
}

.common-image-border {
  height: 2.4rem;
  width: 2.4rem;
  object-fit: cover;
}

.common-popup-model {
  background: var(--white);
  position: absolute;
  margin: auto;
  top: 50%;
  left: 50%;
  width: 50rem;
  border-radius: 0.5rem;
  transform: translate(-50%, -50%);
  padding: 1rem 2rem;
}

.saveUpdateCancel {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-top: 4rem;
  padding-bottom: 1rem;
}

.fileSecBtn .rightUploadBtn {
  display: flex;
}

.saveUpdateCancel .canclebtn-Profile-page {
  padding: 1rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--dark-gray);
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  color: var(--dark-gray);
  margin-right: 1rem;
  background-color: var(--white);
  cursor: pointer;
}

.saveUpdateCancel .saveBtn-profile-page {
  padding: 1rem 2rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  color: var(--white);
  background-color: var(--red);
  cursor: pointer;
  display: inline-block;
  width: 100%;
  max-width: max-content;
}

/* dashboard screen*/

.dasboardTitle {
  padding-left: 1rem;
  padding-bottom: 0.5%;
}

.welcome-name {
  font-size: var(--font-size-25);
  font-weight: 500;
  color: var(--black);
  margin: 0rem;
  padding-bottom: 1rem;
}

.welcome-subtitle {
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 2.68rem;
  color: var(--brown);
  padding-left: 0.5rem;
}

.first-section {
  padding: 2.2rem;
}

.section {
  float: left;
}

.grey-border {
  border: 0.1rem solid var(--gray);
  width: 100%;
  background: var(--white);
  padding: 2% 2% 2% 2%;
}

.flexHeight {
  display: table;
}

.last_Colum {
  padding-bottom: 1.5% !important;
}

.last_Colum .remove-border-top {
  padding-bottom: 0% !important;
}

.header {
  width: 100%;
  border-bottom: solid 0.1rem var(--gray);
  padding: 1.4rem 1.6rem;
  background-color: var(--dark-white);
  position: relative;
}

.header-inner {
  left: 0.2rem;
  position: relative;
  top: 0rem;
}

.header-content {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: var(--black);
  margin-left: 1rem;
  vertical-align: middle;
}

.header-inner img {
  width: 1.9rem;
  position: relative;
}

.header-inner:nth-child(1) img {
  width: auto;
}
.header-icon img {
  width: 100%;
  max-width: 2rem;
  max-height: 2rem;
}
.header-inner:nth-child(3) img {
  width: auto;
}

.header-inner:nth-child(4) img {
  width: auto;
}

.image-section {
  text-align: center;
  padding: 1.4% 0% 1% 0%;
}

.image-section img {
  width: 100%;
  max-width: 100%;
}

.button-style {
  padding: 2% 2%;
  border-radius: 0.1rem;
  border: solid 0.1rem var(--red);
  background-color: var(--red);
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.46;
  text-align: center;
  color: var(--white);
}

.button-section {
  padding: 0.5% 2.2% 1.7% 0;
  margin-bottom: 2%;
  margin-top: 2%;
}

.connect-calendar-section {
  border-top: 0.1rem solid var(--gray);
  padding: 1.5% 1% 1.7% 1%;
  display: flex;
  flex-direction: column;
}

.remove-border-top {
  border-top: unset;
}

.connect-calendar-section h1 {
  padding-left: 0;
  padding-top: 0;
  font-size: var(--font-size-15);
  font-weight: 600;
  line-height: 1.46;
  color: var(--black);
  text-transform: inherit;
}

.email-invite-section input {
  border-radius: 0.1rem;
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-white);
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.8rem;
  color: var(--brown);
  padding: 1.3rem 1.6rem;
  width: 100%;
}

.common-color-btn {
  padding: 0.8rem 0.8rem;
  border-radius: 0.1rem;
  border: solid 0.1rem var(--red);
  background-color: var(--red);

  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  text-align: center;
  color: var(--white);
  cursor: pointer;
}

.more-input-section {
  display: flex;
  justify-content: space-between;
  padding: 2rem 0.5rem 0.5rem;
  align-items: center;
}

.addmore-email {
  float: left;
}

.label-add {
  display: inline-block;

  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.8rem;
  color: var(--black);
  margin-left: 1rem;
}

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

.field_second_wrapper .email-invite-section {
  width: 100%;
}

.connect-calendar-section h2 {
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.69;
  color: var(--brown);
  padding: 0;
  margin-bottom: 0rem;
}

.connect-button {
  padding-left: 0;
  display: inline-block;
  margin-top: 3%;
  margin-bottom: 3%;
}

.connect-button .connectBtn {
  padding: 0.9rem 0.5rem 0.7rem 0.5rem;
  border-radius: 0.1rem;
  box-shadow: 0 0.3rem 0.8rem 0 var(--color-border);
  border: solid 0.1rem var(--gray);
  background-color: var(--white);
  cursor: pointer;
  display: inline-block;
  margin-top: 3%;
  margin-bottom: 3%;
  float: left;

}

.micosoftIcon {
  width: 2rem;
  height: 2rem;
}

.connect-button .text {
  display: inline-block;
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--black);
  vertical-align: middle;
}

.officeBtn {
  display: inherit !important;
  float: right;
  margin-left: 2%;
}

.calendar-link-section {
  margin-top: 1.5rem;
}

.calendar-link-outer {
  border-radius: 0.2rem;
  border: dashed 0.1rem var(--dark-gray);
  background-color: var(--dark-white);
  cursor: pointer;
  padding: 1.2rem 1.6rem;
  width: 100%;
  display: inline-block;
  position: relative;
}

.calendar-link {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 93%;
}

.clipboard {
  display: inline-flex;
  position: absolute;
  right: 1.4rem;
  top: 1.7rem;
}

.clipboard img {
  width: 100%;
  max-width: 2rem;
  max-height: 2rem;
}
.button-without-top-padding {
  padding: 0 2.2rem 2.2rem 2.2rem;
}

.button-with-top-padding {
  padding: 2.2rem 2.2rem 0 2.2rem !important;
}

.invite-input {
  width: 100%;
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-white);
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.8rem;
  color: var(--brown);
  padding: 1.3rem 1.6rem;
}

input[type="email"]:focus {
  border: solid 0.1rem var(--gray);
}

.empty-section {
  padding: 9.5rem;
}

.coworker-label {
  font-weight: 500 !important;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  color: var(--black);
  border-radius: 0.2rem;
  border: 1px solid var(--dark-gray);
  display: inline-block;
  padding: 0.1rem 0.3rem;
  margin-left: 0.5rem;
  font-size: var(--font-size-11) !important;
  margin-top: 0rem !important;
  top: 0rem !important;
  /* line-height: 1.3rem; */
  /* padding-top: 0.2rem; */
}

.networkMiddle .common-user-list {
  width: 82%;
}

.network-label {
  font-weight: 500 !important;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  color: var(--black);
  border-radius: 0.2rem;
  border: 1px solid var(--dark-gray);
  display: inline-block;
  padding: 0.1rem 0.3rem;
  margin-left: 0.5rem;
  font-size: var(--font-size-11) !important;
  margin-top: 0rem !important;
  top: 0rem !important;
  /* line-height: 1; */
  /* padding-top: 0.2rem; */
  border: solid 0.1rem var(--red);
}
.bot-label {
  font-weight: 500 !important;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  color: var(--black);
  border-radius: 0.2rem;
  border: 1px solid var(--dark-gray);
  display: inline-block;
  padding: 0.1rem 0.3rem;
  margin-left: 0.5rem;
  font-size: var(--font-size-11) !important;
  margin-top: 0rem !important;
  top: 0rem !important;
  line-height: 1.3rem;
  padding-top: 0.2rem;
  border: solid 0.1rem var(--red);
}

/* common-listing css start here */
/* common-listing css start here */

.ul-padd-m-none {
  list-style-type: none;
  padding: 0rem;
  margin: 0rem;
}

.scrol-listing {
  height: calc(100vh - 16.9rem);
  overflow: auto;
  overflow-x: hidden;
}

.list-section {
  list-style: none;
  position: relative;
  padding-right: 0.5rem;
}

.list-section:focus {
  border: none;
}

.teams-list-spacing .group-list-key img,
.group-list-cell-spacing .group-list-key img,
.callList .group-list-key img {
  position: absolute;
  top: 0;
  right: 0;
  width: 1.4rem;
}

.group-list-key img {
  position: absolute;
  top: -2.6rem;
  right: -4.8rem;
  width: 1.4rem;
}

.common-postion {
  padding: 1.1rem 0rem 0.9rem;
  border-bottom: solid 0.1rem var(--gray);
  cursor: pointer;
  position: relative;
  padding-left: 0rem;
}

.commom-chat-listing .common-postion {
  padding-left: 6.3%;
}

.UserTitle {
  display: flex;
  align-items: center;
}
.titleMargin {
  margin-bottom: 0.4rem;
}

.userProfile {
	/* margin-bottom: 0.4rem; */
}

.nomissedcall,
.ismissedcall {
  padding-top: 1.6rem;
  padding-bottom: 1.6rem;
}

.nomissedcall .common-d-list,
.ismissedcall .common-d-list {
  align-items: center;
}

/*top-serach-drop-down-start*/

.scrol-listing-search li {
  margin: 0rem;
  width: auto;
  text-align: left;
  height: inherit;
}

.scrol-listing-search .common-postion {
  padding: 0.88rem;
}

.scrol-listing-search .user-team-label {
  margin-bottom: 0rem;
}

.scrol-listing-search .user-label {
  margin-bottom: 0rem;
}

.scrol-listing-search .common-icons-size {
  width: 4.8rem;
  height: 4.8rem;
}

/*top-serach-drop-down-end*/

.common-d-list {
  width: 100%;
  display: flex;
  align-items: center;
}

.temaItemsPop {
  align-items: flex-start;
}

.common-user-icon {
  margin-right: 1rem;
  cursor: default;
  position: relative;
}

.common-user-list {
  width: 100%;
}

.vertical-m {
  margin: 2rem 0rem;
}

.user-label {
	font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	/* line-height: 1.9; */
	font-size: var(--font-size-15);
	cursor: pointer;
}

.topicName {
  min-width: 57% !important;
  width: 57% !important;
}

.allListCommonWrap {
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  min-width: 60%;
  max-width: 36.55%;
  width: 60% !important;
}

.allListCommonWrapUser {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 58% !important;
}

.allListCommonWraptopic {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 51.55% !important;
  width: 100% !important;
}

.allListCommonWrapUserContact {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 60%;
  width: auto;
  line-height: 1.5;
}

.displayInherit {
  display: block !important;
}

.maxWidth83 {
  min-width: 83% !important;
  max-width: 80% !important;
}

.receivedUl .common-user-list {
  width: 90%;
  overflow: hidden;
}

.receivedUl .allListCommonWrap {
  max-width: 100% !important;
  min-width: 100% !important;
  padding-right: 5%;
}

.receivedUl .allListCommonWrapUserContact {
  width: 100%;
  max-width: 100%;
  padding-right: 5%;
}

.topicName {
  margin-bottom: 0;
}
.dateAndTime {
  display: flex;
}
.timeOnly {
  margin-top: 0.2rem;
}
.meetingListSpace {
  margin-bottom: 0.4rem;
}

.teamName {
  vertical-align: top;
  max-width: 15rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
}

.user-name {
  padding-left: 0rem;
  font-size: var(--font-size-15);
  font-weight: 400;
  display: inline-block;
  vertical-align: top;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-team {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6rem;
  color: var(--brown);
  font-size: var(--font-size-13);
}

.callList {
  align-items: center;
}

.callTopList {
  align-items: center;
}

.user-team-label {
  font-size: var(--font-size-13);
  font-weight: 400;
}

.user-name-label {
  font-size: var(--font-size-15);
  font-weight: 400;
  line-height: 0.186rem;
  line-height: 1.9rem;
  padding-left: 0.03rem;
  min-width: 14.5rem;
  max-width: 19%;
  width: 100% !important;
}

.topic-name-trancate {
  display: inline-block;
  vertical-align: top;
  width: 20.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* call section csss start here */

.vertical-m-call {
  margin: 0.8rem 0rem;
}

.vertical-m-cal {
  margin: 0.8rem 0rem;
}
.callUl .allListCommonWrap {
  min-width: inherit !important;
  max-width: 48% !important;
  width: inherit !important;
}
.call-common-icon {
  position: absolute;
  top: 25%;
  right: 3%;
}
.call-common-icon img {
  width: 100%;
  height: 1.5rem;
  max-width: 1.5rem;
}
.vertical-msg {
  margin: 0.7rem 0rem;
}

.empty-text-area {
  text-align: center;
  margin-top: 1.3rem;
  width: 100%;
}

.textempty-h {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  text-align: center;
  color: var(--black);
  margin-bottom: 0rem;
  width: 100%;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  padding: 0px 2.5rem;
}

.middleInnerCRM .textempty-h {
  font-weight: 700 !important;
}
.wordBreak {
  text-overflow: unset !important;
  white-space: unset !important;
}
.textempty-p {
  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  text-align: center;
  color: var(--brown);
  margin-bottom: 0rem;
}

#rightEmptyState .textRed {
  word-wrap: break-word;
}

.no-result-conext {
  list-style: none;
  text-wrap: auto;
}

.no-result-found {
  text-align: center;
  font-size: var(--font-size-15);
  height: 4rem;
  color: var(--color-text-secondary);
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
  cursor: default;
}

.textRed {
  color: var(--red);
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  display: inline-block;
  padding-right: 7%;
  padding-left: 7%;
  text-align: center;
}

.start-msg {
  margin-top: 1rem;

  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.53;
  text-align: center;
  color: var(--brown);
}

.common-activebtn {
  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  color: var(--white);
  background-color: var(--red);
  cursor: pointer;
}

.header_Active {
  padding: 15%;
}

.m-t-25px {
  margin-top: 2.5rem;
}

.showCls {
  display: block !important;
}

.hideCls {
  display: none !important;
}

.msgNotiHideCls {
  display: none;
}

section#dashboard-template {
  background: var(--dark-slate-gray);
}

.selectedCommonIcons.disabled-action {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.user-search-input.disabled-input {
  opacity: 0.3;
  cursor: not-allowed;
  background-color: var(--light-slate-brown-v3);
  transition: opacity 0.3s ease;
}

.processing-state .selectedCommonIcons {
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.box-container {
  width: 100%;
  padding-top: 1.5rem;
  padding: 0rem 0.5%;
  overflow-y: scroll;
  overflow-x: hidden;
  display: block;
  height: 100%;
}

.meeting_room_btn {
  padding: 0rem;
  margin-top: 1.5rem;
}

.border-none {
  border: inherit;
}

#alertPopup {
  z-index: 99999;
}

/*pop-start-here*/

.teamPopup-common {
  position: fixed;
  margin-top: 0rem;
  left: 0;
  top: 0rem;
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: 0.2rem;
  background-color: rgb(from var(--black) r g b / 80%);
  z-index: 999;
}

/* deleteRecurrenceBody start here */

.deleteRecurrenceBody {
  position: absolute;
  top: 38%;
  left: 1%;
  padding: 3rem;
  background: var(--white);
  border: 1px solid var(--gray);
  box-shadow: 0px 5px 13px rgb(from var(--color-text-primary) r g b / 54.1931%);
  width: 100%;
  margin: 0px auto;
  max-width: 39.2rem;
  bottom: 0;
  right: 0;
  height: max-content;

}

.deleteRecurrenceTitle {
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-15);
  line-height: 1.9rem;
  /* or 127% */
  display: flex;
  align-items: center;
  color: var(--black);
  padding-bottom: 2.4rem;
}

.instance {
  font-style: normal;
  font-weight: 600;
  font-size: var(--font-size-15);
  line-height: 1.8rem;
  color: var(--brown);
}

.deleteFirstInstance,
#previewShareFile,
#previewDownloadFile,
#previewForwardFile,
#previewReplyFile {
  cursor: pointer;
}

.deleteFirstInstance {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.3rem;
}

.unCheckInstance {
  display: inline-block;
  background: url(../../images/icons/radio-button-unactive.svg) no-repeat left
    top 0.1rem;
  background-size: 1.8rem 1.8rem;
  height: 2rem;
  width: 1.8rem;
  min-width: 1.8rem;
  flex-shrink: 0;
}

.activeInstance {
  display: inline-block;
  background: url(../../images/icons/radio-button-active.svg) no-repeat left top
    0.1rem;
  background-size: 1.8rem 1.8rem;
  height: 2rem;
  width: 1.8rem;
  min-width: 1.8rem;
  flex-shrink: 0;
}

/* deleteRecurrenceBody end here */

#updateRecurring {
  z-index: 9999;
}

#updateRecurring .deleteRecurrenceBody {
  left: 0;
  top: 0;
  transform: translate(-4rem, 38rem);
}

.removeBg {
  background-color: unset !important;
}

.teamPopup-common .uploaded-icon {
  position: inherit;
}

.phoneNumerVerification,
.verification_code {
  z-index: 9999;
}

.create-team-main-section {
  border-radius: 0.3rem;
  border: solid 0.1rem var(--color-border-light);
  background-color: var(--white);
  padding: 1rem 0rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 50%;
  min-width: 50%;
}

.new-teamSection {
  position: relative;
}

.create-team-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  color: var(--black);
  margin-top: 1.4rem;
}

.create-team-inner-section {
  display: -webkit-box;
  display: -webkit-box;
}

.edit-close-section {
  position: absolute;
  right: 3rem;
  top: 0.2rem;
}

.team-details-main-section-edit {
  width: 100%;
  padding: 0rem 3rem 0rem 0.3rem;
  margin-top: 3rem;
}

.team-details-icon-left {
  float: left;
  width: 27%;
}

.create-team-icon {
  position: relative;
  width: 15.2rem;
  height: 15.2rem;
  margin: 0rem auto 0rem;
  border-radius: 0.4rem;
  overflow: hidden;
}

.UploadteamImageIcon {
  position: relative;
}

.UploadteamImageIcon img {
  width: 3rem;
  height: 3rem;
  float: right;
  position: absolute;
  bottom: 0;
  right: 0;
}

.createTeam-size-edit {
  width: 15rem;
  height: 15rem;
}

.edit-team {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2rem;
  text-align: right;
  color: var(--brown);
  cursor: pointer;
  display: inline-block;
  margin-right: 2rem;
  text-decoration: unset;
  vertical-align: middle;
}

.close-team {
  cursor: pointer;
  display: inline-block;
}

.team-details-textbox-right {
  float: left;
  width: 73%;
}

.team-edit-label-name {
  position: relative;
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-white);
  padding: 1.2rem 1.2rem 0.5rem 1.2rem;
  text-align: left;
}

.team-edit-label-name-input {
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-white);
  padding: 1.2rem;
  text-align: left;
}

.team-sub-name {
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--black);
}

.team-sub-title {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--brown);
  margin-top: 0.5rem;
  display: inline-block;
  width: 100%;
  position: relative;
  outline: none;
  word-break: break-all;
}

.team-edit-label-dscription {
  position: relative;
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-white);
  padding: 1.2rem;
  max-height: 9rem;
  text-align: left;
  overflow: scroll;
  outline: none;
  overflow-x: hidden;
  height: 100vh;
  width: 100%;
}

#teamPopupdetails #teamOrGroupDesc {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  width: 100%;
}

.team-member {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: var(--black);
  /* padding: 0rem 2.8rem; */
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.team-list-section {
  margin: 1rem 3rem;
}

.teamlist-item-section li {
  border-bottom: 0.1rem solid var(--gray);
  padding-bottom: 1rem;
  padding-top: 1.6rem;
  display: -webkit-box;
  cursor: default;
}

.user-details-main {
  width: 100%;
  padding-left: 0rem;
}

.contact-position {
  position: relative;
  display: flex;
  padding-left: 0.2rem;
}

.teamDetails .contact-position {
  align-items: center;
}

.forView .contact-position {
  padding-left: 0;
}

.creatGroupPoP {
  margin: 1rem 0rem;
}

.creatGroupPoP .user-details-main {
  align-items: center;
}

#teamOrGroupParticipants.forView .new-team-width {
  width: 7%;
  margin-top: 1rem;
  float: left;
}

#teamOrGroupParticipants .usercontacts .common-user-details {
  float: left;
  width: 70%;
}

.common-user-details {
  padding-left: 1.5rem;
}

.common-user-main {
  position: relative;
  cursor: default;
  width: 100%;
}

.common-username-admin-team {
	font-size: var(--font-size-15);
	font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	line-height: 1.6;
	color: var(--black);
}

.coworker-title {
  font-weight: 600 !important;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2rem;
  text-align: center;
  color: var(--black) !important;
  border-radius: 0.1rem;
  border: solid 0.1rem var(--slate-gray) !important;
  background-color: var(--light-slate-gray) !important;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  vertical-align: top;
  margin-left: 0.5rem;
  font-size: var(--font-size-11) !important;
}

.common-color.newteam-padding-none,
.createnew-team-padding,
.common-color {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--brown);
  text-transform: unset;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

}

.ext-from-group-button {
  border-radius: 0.2rem;
  background-color: var(--red);
  font-size: var(--font-size-15);
  font-weight: bold;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
  color: var(--white);
  border: none;
  box-shadow: none;

  padding: 0.6rem 1rem;
  position: absolute;
  right: 0.7rem;
  top: 2rem;

}

.create-team-scroll {
  padding-right: 1.5rem;
  padding-left: 0;
  margin-bottom: 0;
}

.key-position {
  position: absolute;
  top: 0.9rem;
  left: 2.9rem;
  width: 1.4rem;
}

.common-user-img {
  height: 4.3rem;
  width: 4.3rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
  padding: 0.1rem;
  text-align: center;
}

.creatGroupPoP .common-user-img {
  width: auto;
  height: auto;
  border: none;
}

.create-team-scroll {
  max-height: 28.2rem;
  overflow: scroll;
  height: 100%;
  margin-bottom: 1rem;
  overflow-x: hidden;
}

.addMemberSec {
  /* padding: 0 2.8rem; */
}

.add-Members-section {
  margin-top: 2rem;
}

.topic-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: var(--black);
  display: inline-block;
  padding-right: 0.4rem;
}

.topic-start {
  color: var(--red);
  font-size: var(--font-size-15);
  font-weight: 500;
}

.add-Members-main {
  padding: 0rem 2.8rem;
  margin-bottom: 1.8rem;
}

.add-newteam-input {
  height: 4rem;
  background-color: var(--dark-white);
  width: 100%;
  border: none;
  padding: 0.5rem 1rem;
  font-size: var(--font-size-15);
}

.add-newteam-input:focus {
  outline: none;
}

.contact-list-admin-area {
  top: 1.2rem;
  position: absolute;
  right: 0;
  cursor: pointer;
  width: 2.8rem;
}

.addmember-admin-dropdown {
  display: inline-block;
  margin-right: 0.5rem;
}

.common-team-admin-icons {
  width: 2rem;
  height: 2rem;
  cursor: pointer;
}

.common-team-c-icons {
  width: 1.6rem;
  height: 1.6rem;
  cursor: pointer;
}

.contact-list-admin-area-common {
  display: inline-block;
}

.cancle-save-btn {
  text-align: right;
  display: flex;
  margin-right: 3rem;
  gap: 1rem;
}

.save-topic {
  cursor: pointer;
  width: 9rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
  background-color: var(--red);
  color: var(--white);

  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  padding: 1rem 0 1rem 0;
}

.pop_file {
  height: 15rem;
  width: 15rem;
  border: 0.1rem solid;
  opacity: 0;
}

/*create-group-pop-section-start-here*/

.group-padding-popup {
  margin-bottom: 0rem !important;
  padding-bottom: 0rem !important;
  width: 100%;
}

.topic-inner-section {
  padding: 0rem 2.8rem;
  margin-top: 3rem;
}

.upload-main-section {
  width: 100%;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin-bottom: 2%;
}

.icon-upload-section {
  margin-right: 2%;
  overflow: hidden;
}

.create-team-icon-details {
  width: 100%;
  height: 75%;
  margin: 0rem 0rem 0rem;
  border-radius: 0.4rem;
}

.camera-icon {
  height: 2rem;
}

.group-icons-show {
  width: 97%;
  height: 97%;
  border-radius: 0.3rem;
  background-color: var(--dark-white);
  position: relative;
  padding: 4% !important;
  margin: 3px auto;
  text-align: center;
  border-radius: 0.75rem;
}

.group-icon-uploaded {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.group-icons-show img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.upload-name {
  font-size: var(--font-size-15);
  font-weight: normal;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--slate-gray);
  border-radius: 0.3rem;
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-slate-gray);
  width: 15.3rem;
  padding: 0.4rem;
  margin-top: 0.5rem;
  cursor: pointer;
  position: relative;
  height: 3.5rem;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.5rem;
  justify-content: center;
}

.upload-icon-name {
  font-size: var(--font-size-15);
  font-weight: 500;
  color: var(--brown);
  float: left;
  line-height: 2.8rem;
}
.word-break-upload-label {
  width: 11rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

.input-create-section {
  margin-top: 0rem;
  flex: 3;
}

.topic-name-section {
  padding-bottom: 0rem;
}
.bottomInherit {
  padding-bottom: 0 !important;
}
.topic-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  color: var(--black);
  display: inline-block;
  padding-right: 0.4rem;
}

.topic-start {
  color: var(--red);
  font-size: var(--font-size-15);
  font-weight: 500;
}

.topic-input-section {
  position: relative;
}

.group-input {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--black);
  background-color: var(--dark-slate-gray);
  width: 100%;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--gray);
  height: 4.4rem;
  padding: 0.5rem 1rem;
}

.group-input {
  outline: none;
}

.teamOrGroupDescCount {
  color: var(--brown);
  bottom: 1rem;
  right: 2rem;
  text-align: right;
  width: auto;
}

.description-details {
  margin-top: 1.6rem;
}

.description-area {
  position: relative;
}

#groupdesc {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--brown);
  height: 9rem;
}

#groupdesc:focus {
  outline: none;
}

.teamOrGroupDescIncCount {
  font-size: var(--font-size-13);
}

.limitcharacter {
  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--brown);
}

.group-area {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem !important;
  color: var(--black) !important;
  background-color: var(--dark-slate-gray) !important;
  width: 100% !important;
  padding: 1.6rem 1rem 2.3rem !important;
  border-radius: 0.3rem !important;
  border: solid 0.1rem var(--gray);
  resize: inherit;
  height: 100%;
  min-height: 11.5rem;
}

.cancel-topic {
  cursor: pointer;
  width: 8rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
  color: var(--red);
  margin-right: 1rem;
  background-color: var(--white);

  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  padding: 1rem 0 1rem 0;
}

#editTeam .upload-file-area {
  height: 100vh;
  position: absolute;
  bottom: 0;
  opacity: 0;
  cursor: pointer;
  max-height: 200px;
  border: 1px solid var(--red);
  z-index: 999;
  left: 0;
}

.upload-file-area {
  height: 40px;
  position: absolute;
  bottom: 0;
  right: 0;
  opacity: 0;
  cursor: pointer;
  width: 15.3rem;
}

.add-team-popup img {
  height: 2.5rem;
  cursor: pointer;
}

span.add-team-popup {
  float: right;
  text-align: center;
  padding: 0.8rem;
}

.form_custom_width {
  width: 94.2%;
}

.border-details {
  width: 100%;
  height: 1px;
  background-color: var(--gray);
  margin-top: 0.5rem;
}

.add_group {
  margin-right: 0rem;
}

.zIndex999 {
  z-index: 99999 !important;
}

/*selected-members-pop-section-start-here*/

.selected-member-list {
  position: fixed;
  right: 0rem;
  top: 0rem;
  bottom: 0;
  box-shadow: -0.3rem 0 0.4rem 0 rgb(from var(--color-text-primary) r g b / 50%);
  border: solid 0.1rem var(--gray);
  background-color: var(--white);
  z-index: 99;
  min-width: 36rem;
  max-width: 25%;
  width: 100%;

}

.selected-members-list-header {
  border-bottom: 0.1rem solid var(--color-border-light);
  border-top: 0.1rem solid var(--color-border-light);
  max-height: 6rem;
}

.selected-members-list-header .search-section .search-icon {
  text-align: right;
}

.selected-member-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--black);
  padding: 5.5% 1% 5.5% 4.3%;
}

.selected-head-title .add_group {
  padding: 0rem 2rem;
}

.member-select-scroll-section {
  height: calc(100vh - 25.6rem);
  overflow: auto;
}

.member-scroll-height {
  height: calc(100vh - 19.9rem);
}

.member-select-scroll-section ul {
  list-style-type: none;
  padding-left: 0;
  margin-top: 0rem;
}

.member-select-scroll-section ul li {
  border-bottom: 0.1rem solid var(--gray);
  padding: 1rem 0rem;
  display: -webkit-box;
  position: relative;
}

.main-section-member-list {
  width: 100%;
}

.select-member-icon {
  float: left;
  width: 12%;
  margin-top: 0.5rem;
}

.member-select-img {
  border-radius: 0.5rem;
  padding: 0.2rem;
  height: 4.8rem;
  width: 4.8rem;
}

.select-member-details {
  float: left;
  width: 68%;
  padding-left: 1.6rem;
  margin-top: 0rem;
}

.select-member-details .member-name {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.27;
  color: var(--black);
  width: 24.4rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.select-member-details .member-designation {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--brown);
}

.user-profession {

}

.select-member-details .member-address {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--brown);
}

.cityname {

}

.check-box-icon {
  position: absolute;
  right: 0rem;
  top: 40%;
}

.commom-chat-listing .check-box-icon {
  right: 2.2rem !important;
}

.contact-check-default {
  background-image: url(../../images/filetypeicon/uncheckbox.svg);
  background-repeat: no-repeat;
  width: 2rem;
  background-position: 50%;
  height: 2rem;
  cursor: pointer;
  background-size: 100%;
}

.contact-check-active {
  background-image: url(../../images/filetypeicon/checkbox.svg);
  background-repeat: no-repeat;
  width: 2rem;
  background-position: 50%;
  height: 2rem;
  cursor: pointer;
  background-size: 100%;
}
.list-section.network.isblock .contact-check-default {
  display: none !important;
  pointer-events: none;
  cursor: not-allowed;
}
.contact-cross-default {
  background-image: url(../../images/cancel-request.svg);
  background-repeat: no-repeat;
  background-repeat: no-repeat;
  width: 2rem;
  background-position: 50%;
  height: 2rem;
  cursor: pointer;
}

.selected-members-list-header .search-section {
  position: absolute;
  right: 0rem;
}

.selected-head-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 7.5rem;
}

/*serach-bar*/

.search-invite-section {
  height: 4.7rem;
  border: solid 0.1rem var(--gray);
  background-color: var(--dark-white);
  display: flex;
  justify-content: space-between;
}

.input-search-invite {
  width: 100%;
}

.input-search-invite input {
  width: 100%;
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--slate-gray);
  border: none;
  padding: 1.2rem 2rem;
  background-color: var(--dark-white);
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
}

.btn-search-invite {
  text-align: center;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  flex: 0 0 2em;
  align-items: center;
  margin-right: 1rem;
  border-left: solid 0.1rem var(--gray);
  padding-left: 1rem;
}

/*single-selected-call-start*/

.selectedCalls {
  width: 100%;
  border-top: solid 0.1rem var(--gray);
  border-bottom: solid 0.1rem var(--gray);
  display: flex;
  flex-direction: row;
}

.selectedCommonIcons {
  float: left;
  width: 16.6%;
  cursor: pointer;
  border-right: 0.1rem solid var(--gray);
  text-align: center;
  height: 7.3rem;
  padding: 3.3rem 0rem;
}
.iconsGroups .display-default-icon {
  width: 100%;
  max-width: 1.5rem;
  max-height: 1.5rem;
}
.createTemDefalut {
  min-width: 2.5rem;
}
.selectedMemberCommonBg {
  background: var(--dark-white);
}

.rotate.down {
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
}

/*single-selected-call-end*/

/*serach-bar*/

/*selected-members-pop-section-end-here
/*add-member-drop-down-start*/

#addmember-Width .add-invitees-popup-main {
  width: 100%;
}

.team-member-picker {
  position: relative;
}

#addmember-Width.team-member-picker .add-invitees-popup-main {
  top: 100%;
  left: 0;
  box-sizing: border-box;
  margin-top: 0.8rem;
  max-height: 22rem;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  z-index: var(--z-popup);
}

.add-invitees-popup-main {
  position: absolute;
  padding-left: 1rem;
  padding-right: 1rem;
  max-height: 22rem;
  overflow: auto;
  margin-top: 1rem;
  border-radius: 0.4rem;
  box-shadow: 0 0.4rem 1rem 0 rgb(from var(--color-text-primary) r g b / 50%);
  background-color: var(--white);
  width: 50%;
  padding-bottom: 2rem;
  padding-top: 0;
  z-index: 99;
  display: none;
  overflow-x: hidden !important;
  left: 3rem;

}
#add-invitees-popup-main {
  padding-bottom: 0px !important;
}
.add-invitees-popup-main .sidebar-single-user {
  width: 100%;
  padding-top: 2rem;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.sidebar-single-user {
  padding: 1rem;
  border-bottom: 0.1rem solid var(--gray);
}

.newTeam-user-detail {
  padding-left: 2rem;
}

.common-username-team {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.92rem;
  color: var(--black);
  display: inline-block;

  font-size: var(--font-size-15);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.coworker-title {
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.2rem;
  text-align: center;
  color: var(--black);
  border-radius: 0.1rem;
  border: solid 0.1rem var(--slate-gray);
  background-color: var(--light-slate-gray);
  display: inline-block;
  padding: 0.1rem 0.3rem;
  vertical-align: top;
  margin-left: 0.5rem;
  font-size: var(--font-size-11);
}

.newTeam-user-designation {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--brown);
  font-size: var(--font-size-15);

}

.newTeam-user-position {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--brown);
  font-size: var(--font-size-15);

}

/*create-group-pop-section-end-here*/

/*pop-end-here*/

/* Call Section Starts Here */

.call-frame {
  z-index: 99;
  position: absolute;
}

#callFrameheader {
  position: absolute;
  padding: 1rem;
  width: 100%;
  cursor: move;
  background-color: var(--color-info);
  color: var(--white);
  text-align: center;
  font-size: var(--font-size-11);
  height: 7%;
}

.full-screen {
  width: 100%;
  height: 92.5%;
}

.small-screen {
  width: 25%;
  height: 45%;
}

.call-loading-section {
  position: fixed;
  top: 35%;
  left: 50%;
}

.loading-lable-section {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.9rem;
  padding: 1rem 0;
}

/* Call Section Ends Here */

/* Global FCM Notification Starts Here */

.msg-notification-parent {
  position: absolute;
  bottom: 20rem;
  top: 9%;
  padding: 0;
  width: 40rem;
  z-index: 99;
  box-shadow: none;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  height: max-content;
  max-height: 100%;
  border-radius: 4px;
  background: transparent;
  overflow: hidden;
  min-width: 30rem;
  max-width: 40rem;
  transform: translateX(calc(100% + 30px));
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
  opacity: 0;
  animation: slideInRight 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35) forwards;
  display: flex;
  flex-direction: column;
  gap: 1rem;

}

.notification_tray-close {
  right: 1rem !important;
}

.notification_tray-open {
  right: 44rem !important;
}

.msgCloseBtn {
  position: absolute;
  right: 1.8rem;
  top: 1.5rem;
}

.msgCloseBtn img {
  width: 100%;
  height: 100%;
  max-width: 1rem;
  cursor: pointer;
}

.msg-notification-cell {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  background: var(--white) !important;
  border-radius: 0.3rem !important;
  box-shadow: 0 0.3rem 0.6rem 0 rgb(from var(--brown) r g b / 24%);
  width: 100%;
  margin-top: 0.5rem;
  padding: 1.7rem 1.3rem 1.3rem 1.3rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border: solid 0.1rem var(--gray);
  display: inline-block;

}

.message-notification {
  max-width: 75% !important;
}

.notification-count {
  position: absolute !important;
  top: 3.5rem !important;
  right: 2rem !important;
  color: var(--red) !important;
}

.notification-topic-name {
  width: 90% !important;
}

.notification-cross {
  top: 1rem !important;
}

.notification-team-name {
  width: 90% !important;
  line-height: 1.5rem;
}

.msg-notification-cell .userMesssage .notification-count {
  right: 1.8rem !important;
}

.msg-notification-cell .userMesssage .user-name {
  display: block !important;
}

.userMesssage .message-notification {
  max-width: 88% !important;
  width: 100% !important;
}

span.msg-sender-name {
  color: var(--color-text-primary);
  margin-bottom: 0.3rem;
  display: inline-block;
  float: left;
  margin-right: 1rem;
  clear: both;
}

.parentMsg {
  color: var(--dark-gray);
  float: left;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Global FCM Notification Ends Here  */

/*responsive-strat*/

@media (max-width: 1800px) {
  .topic-name-trancate {
    width: 28.5rem;
  }
}

@media (max-width: 1700px) {
  .topic-name-trancate {
    width: 27rem;
  }
}

@media (max-width: 1600px) {
  .topic-name-trancate {
    width: 27rem;
  }
}

@media (max-width: 1500px) {
  .topic-name-trancate {
    width: 22.2rem;
  }
}

@media (max-width: 1400px) {
  .topic-name-trancate {
    width: 19.8rem;
  }
}

@media (max-width: 1300px) {
  .topic-name-trancate {
    width: 19.8rem;
  }
}

@media (max-width: 1200px) {
  .topic-name-trancate {
    width: 17.8rem;
  }
}

/* common listing css end here */

@media (max-width: 991px) {
  .empty-section {
    padding: 0;
  }
}

/*my-network-invite-contact-css-start-here*/

.myNetworkRow {
  display: flex;
  width: 100%;
  flex-direction: row;
  max-width: 100%;
  flex-wrap: unset;
  margin-bottom: 2rem;
  /* padding: 0.7rem 2rem 0.7rem 1rem; */
}

.myNetworkFullColum {
  border-bottom: 0.1rem solid var(--gray);
  background-color: var(--white);
  padding: unset;
  display: flex;
  width: 100%;
  margin-top: 0;
}

.mySuggestionStrip {
  background: var(--white);
  border-bottom: 0.1rem solid var(--gray) !important;
  padding: 0rem 0rem 0.7rem 0rem;
}

.networkPanel .myNetworkRow.mySuggestionStrip {
  background: none;
  border-bottom: none !important;
}

.networkPanel .tabbable-line > .nav-tabs > li a.active {
  border-bottom: 0.2rem solid var(--red);
  position: relative;
}

.networkPanel .tabbable-line > .nav-tabs > li.open,
.tabbable-line > .nav-tabs > li:hover {
  border-bottom: none !important;
}

.myInviTab {
  order: 1;
  flex-grow: 1;
}

.myInviTab .tabbable-line > .nav-tabs {
  border: none;
  margin: 0px;
  border-bottom: none !important;
  justify-content: space-around;
  margin: 0;
  padding: 0 !important;
  list-style: none;
  display: flex;
}

.myInviTab .tabbable-line > .nav-tabs > li > a {
  color: var(--dark-gray);
  font-size: var(--font-size-15) !important;
}

.inviteSecondaryCta {
	border-radius: 0.3rem;
	border: solid 0.1rem var(--gray);
	background-color: var(--white);
	padding: 0.7rem 1rem;
	font-size: var(--font-size-15);
	font-weight: 600;
	color: var(--black);
	margin-right: 0.8rem;
}

.inviteSearchSec {
  order: 3;
  flex-grow: 3;
  display: flex;
}

.inviteSearchSec input {
  width: 100%;
  height: 5.1rem;
  background-color: var(--dark-white);
  border-top: unset !important;
  border-left: 0.1rem solid var(--gray) !important;
  border-bottom: 0.2rem solid var(--red);
  border-right: 0.1rem solid var(--gray);
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.27;
  color: var(--slate-gray);
  padding: 0.5rem 1rem;
}

.invite-seach-box {
  height: 5.1rem;
  background-color: var(--dark-white) !important;
  border-bottom: 0.2rem solid var(--red);
  text-align: center;
  vertical-align: top;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.search-icons-invites {
  width: 1.6rem;
  height: 1.6rem;
}

.inviteSearchDiv {
  width: 15%;
}

.myImortFullColum {
  display: flex;
  padding: 0.7rem 1.5rem 0.7rem 2rem;
  width: 100%;
  border: 0.1rem solid var(--gray) !important;
}

.networkPanel .myNetworkRow {
  margin: 0rem;
}

.networkPanel div#suggestionsdirectorydata {
  padding-top: 0;
}

.contactDirectoryListing .contact-directory-div-button {
  margin: 0rem;
}

.myImportTopStrip {
  display: flex;
  background: var(--white);
  width: 100%;
  border: 0.1rem solid var(--gray);
  padding: 1.6rem;
}

.myImortColum {
  order: 1;
  flex-grow: 10;
  position: relative;
}

.myImortColum:before {
  content: "";
  border-left: 0.1rem solid var(--gray);
  position: absolute;
  top: 0;
  right: 2%;
  height: 7.6rem;
}

.myShareColum {
  order: 2;
  flex-grow: 9;
  margin-right: 3rem;
  margin-bottom: 0.1rem;
  position: relative;
  padding-left: 0.5rem;
}

.myShareColum:before {
  content: "";
  position: absolute;
  right: -2%;
  border-left: 0.1rem solid var(--gray);
  height: 7.8rem;
}

.myUploadColum {
  order: 3;
  flex-grow: 3;
}

.myImortColumHeading {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.2rem;
  color: var(--black);
  font-size: var(--font-size-15);
  display: inline-block;
  margin-bottom: 0.5rem;
  clear: both;
  float: left;
  clear: both;
  width: 100%;
}

.invite-social {
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  font-size: var(--font-size-15);
  color: var(--slate-gray);
  padding: 0.8rem;
  width: auto;
  margin-left: 0;
  height: 4.3rem;
  background: var(--white);
  border-radius: 0.3rem;
  border: solid 0.1rem var(--color-border-light);
  margin-right: 0.5rem;
}

.google-invite-text {
  padding-left: 1rem;
}

.upload-div {
  background-color: var(--gray);
  border-radius: 0.3rem;
  height: auto;
  cursor: pointer;
  min-width: max-content;
  padding: 0.8rem;
  display: flex;
  align-items: center;
}

#uploadTextData {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  text-align: center;
  color: var(--black);

  font-size: var(--font-size-11);
  padding-right: 0.5rem;
}

.uploadText {
  line-height: 2.2rem !important;
}

.upload-div img {
  width: 1.5rem;
  position: relative;
  transform: rotate(270deg);
  height: 1.5rem;
}

button.invite-social.inviteed-icon {
  width: 4.3rem;
}

.office-icon {
  padding: 0px;
}

.myNetworkTabs .tab-content {
  width: 100%;
}

div#suggestionsdirectorydata,
.suggestionDirectoryDiv {
    padding-top: 1rem;
    /* overflow   : auto; */
    width: 100%;
    /* padding-bottom: 10rem; */
    /* overflow: scroll; */
}

.suggestionsdirectorydatapageScroll {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    grid-auto-flow: row dense;
    grid-gap: 1vw;
    width: 100%;
    padding: 0;
    list-style: none;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    /* height               : calc(100vh - 28rem) !important;
	overflow             : auto !important;
	max-height           : inherit !important;
	overflow-x           : hidden !important; */
    grid-auto-rows: max-content;
    overflow-y: scroll;
    height: calc(100vh - 28rem);
    overflow-x: hidden;
}

.contactDirectoryListing {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
    grid-auto-flow: row dense;
    grid-gap: 1vw;
    width: 100%;
    padding: 0;
    list-style: none;
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    height: calc(100vh - 28rem) !important;
    overflow: auto !important;
    max-height: inherit !important;
    overflow-x: hidden !important;
    grid-auto-rows: max-content;
}

.suggestionDirectoryDiv ul .suggestion {
	/* height: auto; */
	border-radius: 0.4rem;
	border: solid 0.1rem var(--gray);
	background-color: var(--white);
	padding: 1.7rem;
}

.fileManager #suggestionsdirectorydata ul .suggestion {
  background-color: var(--black);
}

.fileManager .documentHeader {
  justify-content: space-between;
}

.fileManager .fileHeaderName {
  padding-left: 5.4rem;
}

.fileManager .calendar-info {
  padding-left: 0;
}

.fileManager .documentFiles {
  justify-content: space-between;
}

.suggestionDirectoryDiv ul .suggestion .contact-directory-div-image {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 1rem;
}

.suggestionDirectoryDiv ul .suggestion .contact-directory-div-image img {
  border-radius: 0.5rem;
  padding: 0.2rem;
  margin-top: 0.5rem;
  width: 4.8rem;
  height: 4.8rem;
}

.fileMangerRight input[type="text"]:active{
  background-color: var(--dark-white);
  border: solid 0.1rem var(--gray);
}

.fileMangerRight input[type="text"]:active {
  border: none;
}

input#teamName:focus {
  border: solid 0.1rem var(--gray);
}

.team-member-picker input#searchUser.add-newteam-input:focus {
  border: solid 0.1rem var(--gray);
}

input#callrejmsgval:focus {
  background-color: inherit !important;
}

.fileMangerRight .headersearchbar {
  padding: 2.44rem 1rem 2.22rem 1.4rem;
}

.suggestionDirectoryDiv
  ul
  .suggestion
  .contact-directory-div-image
  .contact-directory-div-data {
  padding-left: 1rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 24rem;
}

.contact-directory-icon img {
  border-radius: inherit !important;
  padding: 0.2rem !important;
  margin-top: 0rem !important;
  width: 2rem !important;
  height: 2rem !important;
}

.contact-directory-icon .invite-social {
  border: inherit !important;
}

.fullname-contact-suggestion {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--black);

  white-space: nowrap;
  width: 20rem;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

.phone-contact-suggestion {
  padding: 0;
  font-size: var(--font-size-15);
  font-stretch: normal;
  font-style: normal;
  line-height: 1.8rem;
  color: var(--brown);
  font-weight: 400;
  text-align: left;
  margin-bottom: 0.3rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
  margin-top: -0.7rem;
}

.company-invite {
  margin-bottom: 1rem;
}

.profession-heading-text {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--black);
  margin-bottom: 0.6rem;
  display: inline-block;
}

.suggestionSkills {
  padding-bottom: 0rem !important;
}

.profession-heading.skill-class {
  border-radius: 0.4rem;
  padding: 0.5rem 1rem;
  background-color: var(--dark-white);
  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;

  color: var(--slate-gray);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 0.4rem;
  max-width: 25rem;
  display: inline-block;

}

.suggestionSkills span.single-skills-span {
  white-space: nowrap;
  width: auto;
  margin-bottom: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 24rem;
}

.suggestionSkills {
  max-width: inherit !important;
}

.dept-invite {
  margin-bottom: 1rem;
}

.networkPanel .contact-directory-div-button {
  margin-top: 2.5rem;
}

.email-contact-suggestion {
  padding: 0;

  font-size: var(--font-size-15);
  font-stretch: normal;
  font-style: normal;
  line-height: 1.8rem;
  color: var(--black);
  font-weight: 400;
  color: var(--brown);
  text-align: left;
  margin-bottom: 0.3rem;

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  display: inline-block;
}

/*fisrt-tabs*/

.allcontactempty {
    position: fixed;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    text-align: center;
    margin-left: 4.3rem;
}

.new-empty-state-title {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.13;
  text-align: center;
  color: var(--black);
  margin-top: 1.6rem;
}

.new-empty-state-subtitle {
  font-size: var(--font-size-15);

  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.73;
  text-align: center;
  color: var(--brown);
}

.new-empty-state-btn {
  margin-top: 3.1rem;
}

.google-import {
  display: inline-block;
  border-radius: 0.1rem;
  border: solid 0.1rem var(--gray);
  background-color: var(--white);
  width: 20.5rem;
  padding: 1.1rem 0rem;
  margin-right: 1rem;
  cursor: pointer;
}

.google-import-label {
  font-size: var(--font-size-15);

  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--black);
}

.office-import {
  display: inline-block;
  cursor: pointer;
}

.contactDirectory ul .suggestion {
  display: flex;
  padding: 1.6rem 0.8rem !important;
}

.contactDirectory .contact-directory-div-button button {
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
  font-weight: bold !important;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  text-align: center;
  color: var(--red);
  font-size: var(--font-size-15);
  padding: 0.5rem 1.5rem !important;
  background: none;
}

.google-invite-texts {
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  font-size: var(--font-size-15);
  color: var(--slate-gray);
  padding: 0.8rem 0 0.8rem 0.8rem;
  width: auto;
  margin-left: 0;
}
.invite-social img {
  width: 100%;
  max-width: 1.4rem;
  max-height: 1.4rem;
}
.inviteCard {
	display: flex;
	flex-direction: column;
	gap: 1.2rem;
	/* box-shadow: 0 0.8rem 1.8rem rgba(15, 23, 42, 0.08); */
	cursor: pointer;
}

.inviteCardSelected {
	border: 0.2rem solid var(--black) !important;
	box-shadow: 0 1.2rem 2.4rem rgb(from var(--color-brand) r g b / 18%);
}

.inviteCardSelect {
	position: absolute;
	top: 1.2rem;
	right: 1.2rem;
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 0.6rem;
	background: var(--white);
	border: 0.1rem solid var(--gray);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 1;
	transition: transform 0.2s ease;
	cursor: pointer;
	z-index: 2;
}

.inviteCard:hover .inviteCardSelect,
.inviteCardSelected .inviteCardSelect {
	transform: scale(1.02);
}

.inviteCardCheck {
	width: 2.2rem;
	height: 2.2rem;
	border-radius: 0.3rem;
	border: 0.2rem solid var(--black);
	display: inline-block;
	position: relative;
	box-sizing: border-box;
}

.inviteCardSelected .inviteCardCheck {
	background: var(--black);
}


.inviteCardSelected .inviteCardCheck::after {
	content: "";
	position: absolute;
	top: 0.3rem;
	left: 0.6rem;
	width: 0.5rem;
	height: 0.9rem;
	border-right: 0.3rem solid var(--white);
	border-bottom: 0.3rem solid var(--white);
	transform: rotate(45deg);
}

.inviteCardHeader {
	display: flex;
	gap: 1.2rem;
	align-items: center;
    flex-direction: column;
}

.inviteAvatarWrap {
	position: relative;
	width: 8rem;
	height: 8rem;
}

.inviteAvatar {
	width: 8rem;
	height: 8rem;
	border-radius: 8px;
	background: var(--dark-white);
	border: 0.1rem solid var(--gray);
	padding: 0.2rem;
}

.inviteStatusDot {
	position: absolute;
	right: 0.3rem;
	bottom: 0.3rem;
	width: 1rem;
	height: 1rem;
	border-radius: 50%;
	background: var(--color-success);
	border: 0.2rem solid var(--white);
}

.inviteCardInfo {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
    align-items: center;
}

.inviteCardNameRow {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	flex-wrap: wrap;
	min-width: 0;
}

.inviteCardName {
	font-size: var(--font-size-17);
	font-weight: 600;
	color: var(--black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 20rem;
}

.inviteCardBadge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.2rem 0.8rem;
	border-radius: 1.2rem;
	font-size: var(--font-size-13);
	font-weight: 600;
}

.inviteCardBadgeInternal {
	background: var(--color-info-light);
	color: var(--color-info);
}

.inviteCardBadgeExternal {
	background: var(--color-success-light);
	color: var(--color-success);
}

.inviteCardRole {
	font-size: var(--font-size-13);
	color: var(--brown);
	margin-top: 0.2rem;
	justify-content: center;
	display: flex;
	align-items: center;
	text-align: center;
}

.inviteCardLocation {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: var(--font-size-13);
	color: var(--slate-gray);
	margin-top: 0.4rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    max-width: 24rem;
}

.inviteCardLocation img {
	width: 1.2rem;
	height: 1.2rem;
}

.inviteCardMeta {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	flex-wrap: nowrap;
}

.inviteMetaChip {
	background: var(--color-error-light);
	color: var(--red);
	border-radius: 0.5rem;
	padding: 0.3rem 0.6rem;
	font-size: var(--font-size-13);
	font-weight: 600;
}

.inviteCardMetaLabel {
	font-size: var(--font-size-13);
	color: var(--slate-gray);
	font-weight: 600;
}

.inviteCardDivider {
	height: 0.1rem;
	background: var(--color-surface-alt);
	width: 100%;
}

.inviteCardSectionTitle {
	font-size: var(--font-size-13);
	color: var(--brown);
	font-weight: 600;
}

.inviteCardDepartment {
	font-size: var(--font-size-13);
	color: var(--black);
	font-weight: 600;
}

.inviteCardCompany {
	font-size: var(--font-size-13);
	color: var(--black);
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.inviteCardChips {
	display: flex;
	gap: 0.6rem;
	flex-wrap: nowrap;
	overflow: hidden;
	white-space: nowrap;
}

.inviteChip {
	background: var(--dark-white);
	border: 0.1rem solid var(--gray);
	border-radius: 2rem;
	padding: 0.4rem 0.9rem;
	font-size: var(--font-size-13);
	color: var(--black);
	white-space: nowrap;
}

.inviteChipOverflow {
	background: var(--white);
	color: var(--red);
	border-color: var(--red);
}

.inviteCardActions {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    margin-top: auto;
    justify-content: center;
}

.inviteCardActions .invitePrimaryCta {
    flex: 1 1 auto;
    min-width: 0;
}

.inviteProfileBtn {
    height: 3.3rem;
    flex: 0 0 50%;
    border-radius: 0.6rem;
    border: 0.1rem solid var(--gray);
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0 0.8rem;
    cursor: pointer;
    font-weight: 600;
    font-size: var(--font-size-15);
    color: var(--black);
}

.inviteProfileBtn img {
    width: 1.8rem;
    height: 1.8rem;
}

.peopleYouMayKnowTitle {
	font-size: var(--font-size-16);
	font-weight: 600;
	color: var(--black);
	margin: 0.8rem 0 1.2rem;
}

.inviteHeaderRow {
    padding: 1.4rem 2rem 0.4rem;
}

.inviteHeaderInner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    border: 0.1rem solid var(--gray);
    border-radius: 0.6rem;
    padding: 1.2rem 1.6rem;
    box-shadow: 0 0.6rem 1.8rem rgb(from var(--color-text-primary) r g b / 5%);
}

.inviteHeaderTitle {
    font-size: var(--font-size-16);
    font-weight: 600;
    color: var(--black);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.inviteHeaderDivider {
    color: var(--brown);
    font-weight: 400;
}

.inviteHeaderCrumbStrong {
    color: var(--red);
    font-size: var(--font-size-13);
}

.inviteHeaderMeta {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: var(--font-size-13);
    color: var(--brown);
}

.inviteHeaderResultsCount {
    font-size: var(--font-size-18);
    font-weight: 600;
    color: var(--black);
}

.inviteFilterRow {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 0;
}

/* .inviteLayoutRow {
    padding: 0 2rem 2rem 2rem;
} */

.inviteLayout {
    display: flex;
    width: 100%;
    /* gap: 2rem; */
    align-items: flex-start;
}

/* .myNetworkRow.myNetworkTabs {
    padding-right: 7px !important;
} */

.inviteFilterColumn {
    flex: 0 0 32rem;
    padding: 1.2rem 0;
    max-width: 32rem;
    order: 2;
    transition: transform 0.28s ease, opacity 0.28s ease, visibility 0.28s ease;
}

.inviteLayoutMain {
    flex: 1 1 auto;
    min-width: 0;
    order: 1;
    overflow: auto;
}

.inviteLayoutCollapsed .inviteFilterColumn {
    opacity: 0;
    visibility: hidden;
    transform: translateX(1.6rem);
    pointer-events: none;
    flex: 0 0 0;
    max-width: 0;
    padding: 0;
    margin: 0;
}

.inviteLayoutCollapsed .inviteLayoutMain {
    width: 100%;
}

.inviteLayoutOpen .inviteFilterColumn {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    pointer-events: auto;
}

.inviteFilterPanel {
    background: var(--color-surface);
    border: 0.1rem solid var(--color-border-light);
    border-radius: 0.4rem;
    padding: 1.6rem 1.8rem;
    display: flex;
    flex-wrap: wrap;
    /* justify-content: space-between;
    gap: 1.4rem; */
    box-shadow: 0 0.6rem 1.8rem rgb(from var(--color-text-primary) r g b / 6%);
}

.inviteFilterPanelHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.8rem;
    border-bottom: 0.1rem solid var(--color-border-light);
}

.inviteFilterPanelTitle {
    font-size: var(--font-size-15);
    font-weight: 700;
    color: var(--color-text-primary);
}

.inviteFilterClose {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--color-text-muted);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.inviteFilterClose img {
    width: 1.6rem;
    height: 1.6rem;
    display: block;
}

.inviteFilterPanelLeft {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 1.5rem;
    height: calc(100vh - 20rem);
    overflow: auto;
}

.inviteFilterInputs {
    display: flex;
    flex-wrap: wrap;
    gap: 1.4rem;
    flex: 1 1 auto;
}

.inviteFilterField {
    display: flex;
    flex-direction: column;
    min-width: 16rem;
    /* flex: 1 1 16rem; */
}

.inviteFilterFieldStack {
    position: relative;
    width: 100%;
    min-width: 0;
}

.inviteFilterField label {
    font-size: var(--font-size-15);
    color: var(--color-text-primary);
    /* margin-bottom: 0.7rem; */
    font-weight: 500;
}

.inviteFilterField input,
.inviteFilterField select {
    background: var(--color-surface);
    border: 0.1rem solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.9rem 1.2rem;
    font-size: var(--font-size-15);
    color: var(--color-text-primary);
    outline: none;
}

.inviteFilterFieldStack input {
    width: 100%;
}

.inviteFilterField input:focus,
.inviteFilterField select:focus {
    border-color: var(--color-focus-ring);

    background: var(--color-surface);
    box-shadow: 0 0 0 0.25rem rgb(from var(--color-brand) r g b / 12%);
}

.inviteFilterActions {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    margin-left: auto;
}

.inviteFilterPanelLeft .inviteFilterActions {
    margin-left: 0;
    align-items: center;
    justify-content: space-between;
}

.inviteFilterSection {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.inviteFilterSectionHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: none;
    background: transparent;
    padding: 0;
    font-size: var(--font-size-15);
    color: var(--color-text-secondary);
    font-weight: 600;
    cursor: pointer;
}

.inviteFilterSectionHeaderInline {
    margin-bottom: 0.6rem;
}

.inviteFilterSectionToggle {
    display: inline-flex;
    transform: rotate(-90deg);
    transition: transform 0.2s ease;
    font-size: var(--font-size-15);
    color: var(--color-text-muted);
}

.inviteFilterSectionToggle img {
    width: 1.2rem;
    height: 1.2rem;
    display: block;
}

.inviteFilterSection.is-collapsed .inviteFilterSectionToggle {
    transform: rotate(0deg);
}

.inviteFilterSection.is-collapsed .inviteServicesListWrap,
.inviteFilterSection.is-collapsed .inviteServicesSearch,
.inviteFilterSection.is-collapsed .inviteFilterOptionList,
.inviteFilterSection.is-collapsed .inviteFilterFieldStack input,
.inviteFilterSection.is-collapsed .inviteFilterDropdown {
    display: none;
}

.inviteServicesListWrap {
    max-height: 27rem;
    /* overflow-y: auto; */
    /* border: 0.1rem solid #e2e6ef; */
    /* border-radius: 0.8rem; */
    /* padding: 0.8rem; */
    display: flex;
    /* justify-content: center; */
    flex-direction: column;
    gap: 1rem;
    background: var(--dark-white);
    padding: 1rem;
    border-radius: 0.6rem;
    /* background: #fff; */
}

.inviteServicesSearch {
    margin-top: 0.2rem;
}

.inviteServicesSearchInput {
    width: 100%;
    background: var(--color-surface);
    border: 0.1rem solid var(--color-border);
    border-radius: 0.5rem;
    padding: 0.8rem 1.2rem;
    font-size: var(--font-size-15);
    color: var(--color-text-primary);
    outline: none;
}

.inviteServicesSearchInput:focus {
    border-color: var(--color-brand);

    background: var(--color-surface);
    box-shadow: 0 0 0 0.25rem rgb(from var(--color-brand) r g b / 12%);
}

.inviteServiceLabel{
    font-size: var(--font-size-15);
    font-weight: 500;
}

.inviteServicesList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    gap: 0.6rem;
    scrollbar-color: var(--color-text-muted) var(--dark-white);
}

.inviteServiceGroupLabel {
    font-size: var(--font-size-13);
    font-weight: 700;
    color: var(--color-text-secondary);
    margin-top: 0.4rem;
}

.inviteServiceItem {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.6rem;
    color: var(--color-text-primary);
    cursor: pointer;
}

.inviteServiceItem.is-selected {
    background: var(--color-background);
}

.inviteServiceCheckbox {
    accent-color: var(--color-brand);
    cursor: pointer;
}

.inviteFilterOptionList {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    background-color: var(--dark-white);
    padding: 1rem;
}

.inviteFilterOptionItem {
       display: flex;
    align-items: center;
    /* justify-content: space-between; */
    gap: 0.8rem;
    padding: 0.3rem 0.8rem;
    /* background: #f8f9fb; */
    /* border: 0.1rem solid #e2e6ef; */
    border-radius: 0.6rem;
    font-size: var(--font-size-15);
    color: var(--color-text-primary);
}

.inviteFilterOptionLabel {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 500;
}

.inviteFilterOptionCheckbox,
.inviteFilterUserType {
    accent-color: var(--color-brand);
    cursor: pointer;
}

.inviteFilterOptionRemove {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: var(--font-size-15);
    cursor: pointer;
}

.inviteFilterOptionListStatic {
    gap: 0.8rem;
}

.inviteFilterOptionStatic {
    cursor: pointer;
}

.inviteFilterSortList {
    gap: 0.6rem;
}

.inviteFilterDropdown {
    position: absolute;
    top: 6.5rem;
    left: 0;
    right: 0;
    background: var(--color-surface);
    border: 0.1rem solid var(--color-border-light);
    border-radius: 0.8rem;
    box-shadow: 0 0.8rem 1.6rem rgb(from var(--color-text-primary) r g b / 8%);
    max-height: 18rem;
    overflow: auto;
    z-index: 5;

}

.inviteFilterDropdown ul {
    list-style: none;
    padding: 0.6rem;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.inviteFilterDropdownItem {
    padding: 0.6rem 0.8rem;
    border-radius: 0.6rem;
    cursor: pointer;
    font-size: var(--font-size-15);
    color: var(--color-text-primary);
}

.inviteFilterDropdownItem:hover {
    background: var(--color-background);
}

.inviteFilterApply,
.inviteFilterClear {
    border-radius: 0.5rem;
    padding: 0.9rem 1.8rem;
    font-size: var(--font-size-15);
    font-weight: 700;
    border: 0.1rem solid var(--color-brand);
    cursor: pointer;
}

.inviteFilterApply:disabled,
.inviteFilterClear:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    border-color: var(--color-border);
}

.inviteFilterApply {
    background: var(--color-brand);
    color: var(--color-text-inverse);
}

.inviteFilterClear {
    background: var(--color-surface);
    color: var(--color-brand);
    border-color: var(--color-border);
}

.inviteFilterChips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    padding: 1.6rem;

    align-items: center;
}

/* .inviteFilterChipsRow {
    padding: 0 0.6rem 0.6rem;
} */

.inviteFilterToggleBtn {
    background: var(--white);
    border: 0.1rem solid var(--gray);
    color: var(--black);
}

.inviteCtaBtn {
    display: inline-flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.8rem 1.4rem;
}

.inviteChipCta {
    border: 0.1rem solid var(--gray);
    background-color: var(--white);
    color: var(--black);
    border-radius: 5px;
    padding: 0.6rem 1.4rem;
    font-size: var(--font-size-15);
    font-weight: 600;
    line-height: 1.6rem;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.inviteChipCta:hover {
    border-color: var(--black);
}

.inviteChipCta:focus-visible {
    outline: 0.2rem solid var(--red);
    outline-offset: 0.2rem;
}

.inviteCtaIcon {
    width: 1.6rem;
    height: 1.6rem;
}

.inviteCtaOutline {
    background: var(--white);
    border: 0.1rem solid var(--red);
    color: var(--red);
}

.inviteCtaOutline .inviteCtaIcon {
    filter: invert(24%) sepia(84%) saturate(4312%) hue-rotate(348deg) brightness(95%) contrast(93%);
}

.inviteCtaBtn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.inviteCtaBtn:disabled .inviteCtaIcon {
    filter: grayscale(100%);
}

.inviteFilterChip {
    background: var(--color-background);
    border: 0.1rem solid var(--color-border-light);
    border-radius: 0.6rem;
    padding: 0.6rem 1.2rem;
    font-size: var(--font-size-13);
    color: var(--color-text-primary);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-weight: 600;
}

.inviteFilterChipRemove {
    font-weight: 700;
    cursor: pointer;
    color: var(--color-brand);
}

.inviteFilterClearChips {
    background: transparent;
    border: none;
    color: var(--color-brand);
    font-weight: 700;
    cursor: pointer;
    font-size: var(--font-size-13);
}

.inviteFiltersDisabled {
    opacity: 0.4;
    pointer-events: none;
}

.inviteEmptyState {
    text-align: center;
    padding: 3.4rem 1rem;
    position: fixed;
    left: 50%;
    top: 62%;
    transform: translate(-50%, -50%);
    text-align: center;
    margin-left: 4.3rem;
}

.inviteEmptyIcon {
    width: 11.6rem;
    margin-bottom: 1.2rem;
    opacity: 0.75;
}

.inviteEmptyTitle {
    font-size: var(--font-size-19);
    font-weight: 600;
    color: var(--black);
}

.inviteEmptySubtitle {
    font-size: var(--font-size-16);
    color: var(--brown);
    margin-top: 0.6rem;
}

.inviteSkeleton {
    position: absolute;
    inset: 0;
    background: rgb(from var(--color-surface) r g b / 90%);
    z-index: 2;
    padding: 1rem 0;
}

.inviteSkeletonGrid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    grid-gap: 1vw;
    list-style: none;
    padding: 0;
    margin: 0;
}

.inviteLayoutOpen .inviteSkeletonGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.inviteSkeletonCard {
    height: 27rem;
    border-radius: 0.8rem;
    background: var(--color-surface);
    background-size: 200% 100%;
    /* animation: inviteSkeletonShimmer 1.4s ease infinite; */
    border: 0.1rem solid var(--gray);
    box-shadow: 0 0.8rem 1.8rem rgb(from var(--color-text-primary) r g b / 8%);
    padding: 1.4rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;

}

.inviteSkeletonHeader {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.inviteSkeletonAvatar {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 1.2rem;
    background: var(--color-background);
}

.inviteSkeletonHeadText {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    flex: 1;
}

.inviteSkeletonLine {
    height: 1rem;
    border-radius: 0.6rem;
    background: var(--color-background);
}

.inviteSkeletonLineXs { width: 40%; }
.inviteSkeletonLineSm { width: 55%; }
.inviteSkeletonLineMd { width: 70%; }
.inviteSkeletonLineLg { width: 85%; }

.inviteSkeletonDivider {
    height: 0.1rem;
    background: var(--color-surface-alt);
    border-radius: 0.2rem;
}

.inviteSkeletonMeta {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.inviteSkeletonChip {
    width: 50%;
    height: 1.4rem;
    border-radius: 0.6rem;
    background: var(--color-background);
}

.inviteSkeletonSection {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.inviteSkeletonActions {
    margin-top: auto;
    display: flex;
    gap: 0.8rem;
}

.inviteSkeletonBtn {
    flex: 0 0 45%;
    height: 3.2rem;
    border-radius: 0.6rem;
    background: var(--color-background);
}

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

.inviteSelectionBar {
    position: fixed;
    left: 50%;
    bottom: 2rem;
    transform: translateX(-50%);
    background: var(--white);
    border: 0.1rem solid var(--gray);
    box-shadow: 0 1.2rem 2.4rem rgb(from var(--color-text-primary) r g b / 12%);
    border-radius: 8px;
    padding: 1.2rem;
    display: flex;
    align-items: center;
    gap: 24.6rem;
    z-index: 9;

}

.inviteSelectionInfo {
    font-size: var(--font-size-15);
    font-weight: 600;
    color: var(--black);
}

.inviteSelectionActions {
    display: flex;
    gap: 0.8rem;
}

.inviteSelectionClear,
.inviteSelectionInvite {
    border-radius: 2rem;
    padding: 0.6rem 1.6rem;
    font-size: var(--font-size-15);
    font-weight: 600;
    border: 0.1rem solid var(--red);
    cursor: pointer;
}

.inviteSelectionClear {
    background: var(--white);
    color: var(--red);
}

.inviteSelectionInvite {
    background: var(--red);
    color: var(--white);
}

@media (max-width: 960px) {
    .inviteLayout {
        flex-direction: column;
    }

    .inviteFilterColumn {
        width: 100%;
        max-width: 100%;
    }

    .inviteHeaderInner {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.8rem;
    }

    .inviteFilterPanel {
        flex-direction: column;
    }

    .inviteSelectionBar {
        width: calc(100% - 3rem);
        justify-content: space-between;
        border-radius: 1.6rem;
    }

    .suggestionsdirectorydatapageScroll,
    .contactDirectoryListing {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .suggestionsdirectorydatapageScroll,
    .contactDirectoryListing {
        grid-template-columns: 1fr;
    }
}

.importShareContainer {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 1.6rem 0.6rem 3rem;
}

.importShareSection {
    background: var(--white);
    border: 0.1rem solid var(--gray);
    border-radius: 0.8rem;
    padding: 1.8rem;
    box-shadow: 0 0.8rem 1.6rem rgb(from var(--color-text-primary) r g b / 6%);
}

.importShareHeader {
    margin-bottom: 1.4rem;
}

.importShareTitle {
    font-size: var(--font-size-15);
    font-weight: 600;
    color: var(--black);
}

.importShareSubtitle {
    font-size: var(--font-size-13);
    color: var(--brown);
    margin-top: 0.4rem;
}

.importShareCards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(22rem, 1fr));
    gap: 1.2rem;
}

.importShareCard {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    padding: 2rem 1.4rem;
    border-radius: 0.8rem;
    border: 0.2rem solid var(--gray);
    background: var(--white);
    cursor: pointer;
    transition: border 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    height: 20rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.importShareCard:hover {
    box-shadow: 0 1rem 2rem rgb(from var(--color-text-primary) r g b / 8%);
    border-color: var(--color-info);
    transform: translateY(-0.2rem);

}

.importShareIcon {
    width: 5.4rem;
    height: 5.4rem;
    background: var(--white);
    border-radius: 0.8rem;
    border: 0.1rem solid var(--gray);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0.6rem 1.2rem rgb(from var(--color-text-primary) r g b / 8%);
}

.importShareCard:hover .importShareIcon {    box-shadow: 0 0.8rem 1.6rem rgb(from var(--color-text-primary) r g b / 14%);
}

.importShareIcon img {
    width: 3rem;
    height: 3rem;
}

.importShareCardText {
    text-align: center;
}

.importShareCardTitle {
    font-size: var(--font-size-17);
    font-weight: 600;
    color: var(--black);
}

.importShareCardDesc {
    font-size: var(--font-size-15);
    color: var(--brown);
    font-weight: 500;
    margin-top: 0.3rem;
}

.shareGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: 1rem;
}

.shareCard {
    border-radius: 0.8rem;
    border: 0.2rem solid var(--gray);
    background: var(--white);
    padding: 2rem 1.2rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    font-size: var(--font-size-15);
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border 0.2s ease;
    height: 10rem;
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.shareCard img {
    width: 2rem;
    height: 2rem;
}

.shareCard:hover {
    transform: translateY(-0.2rem);
    box-shadow: 0 0.8rem 1.6rem rgb(from var(--color-text-primary) r g b / 8%);
    border-color: currentColor;

}

.shareFacebook {
    color: var(--color-info);
}

.shareLinkedIn {
    color: var(--color-info);
}

.shareX {
    color: var(--color-text-primary);
}

.shareLink {
    color: var(--color-brand);
}

.bulkInviteGrid {
    gap: 1.6rem;
    display: flex;
    width: 100%;
}

.bulkInviteDrop {
    border: 0.2rem dashed var(--color-border);
    border-radius: 0.8rem;
    padding: 1.6rem;
    text-align: center;
    background: var(--color-background);
    cursor: pointer;
    transition: border 0.2s ease, box-shadow 0.2s ease;
    width: 50%;
}

.bulkInviteDrop:hover {
    border-color: var(--color-brand);
    box-shadow: 0 1rem 2rem rgb(from var(--color-text-primary) r g b / 8%);
}

.bulkInviteDropInner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.bulkInviteIcon {
    width: 6rem;
    height: 6rem;
    border-radius: 50%;
    background: var(--color-error-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulkInviteIcon img {
    width: 2.6rem;
    height: 2.6rem;
}

.bulkInviteTitle {
    font-size: var(--font-size-17);
    font-weight: 600;
    color: var(--black);
    margin-top: 0.8rem;
}

.bulkInviteHint {
    font-size: var(--font-size-15);
    color: var(--brown);
    margin-top: 0.4rem;
    font-weight: 500;
}

.bulkInviteBtn {
    margin-top: 1rem;
    border: 0.1rem solid var(--red);
    background: var(--red);
    color: var(--white);
    padding: 0.6rem 1.2rem;
    border-radius: 0.6rem;
    font-size: var(--font-size-15);
    font-weight: 600;
    cursor: pointer;
}

.bulkInviteBtn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.bulkInviteFileName {
    font-size: var(--font-size-13);
    color: var(--black);
    font-weight: 500;
    margin-top: 0.4rem;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bulkInviteFileInput {
    display: none;
}

.bulkInviteInfo {
    border: 0.1rem solid var(--color-info-light);
    border-radius: 0.8rem;
    padding: 1.6rem;
    width: 50%;
    background: var(--color-info-bg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.bulkInviteInfoHeader {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1rem;
}

.bulkInviteInfoIcon {
    width: 4.2rem;
    height: 4.2rem;
    border-radius: 0.8rem;
    background: var(--color-info-bg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.bulkInviteInfoIcon img {
    width: 2rem;
    height: 2rem;
}

.bulkInviteInfoTitle {
    font-size: var(--font-size-17);
    font-weight: 600;
    color: var(--black);
    margin-bottom: 0.6rem;
}

.bulkInviteInfo p {
    font-size: var(--font-size-15);
    color: var(--brown);
    margin-bottom: 0.6rem;
}

.bulkInviteDownload {
    margin-top: 0.6rem;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    font-size: var(--font-size-15);
    color: var(--color-info);
    font-weight: 600;
    cursor: pointer;
    background: var(--white);
    border: 0.1rem solid var(--color-info-light);
    padding: 0.6rem 1rem;
    border-radius: 0.6rem;
}

.bulkInviteDownload img {
    width: 1.6rem;
    height: 1.6rem;
}

.bulkInviteDrop.is-dragover {
    border-color: var(--color-brand);
    background: var(--color-error-bg);
}

@media (max-width: 960px) {
    .bulkInviteGrid {
        grid-template-columns: 1fr;
    }
}

/*my-network-invite-contact-css-end-here*/

/*my-filemanager-css-start-here*/

.fileMangerRight .form-group {
  position: absolute;
  right: 11rem;
  top: 0;
}

.headersearchbar {
	border: none;
	background-color: var(--dark-white);
	/* width           : 100%; */
	padding: 2.4rem 1rem;
	color: var(--slate-gray);
	font-size: var(--font-size-15);
	line-height: 1.2;
	transition-duration: 0.1s;
	box-shadow: none;

	font-weight: 500;
	/* display         : none; */

}

.fileMangerRight .form-group #keywordsheader {
  height: 6.5rem;
}

.fileManagerTopStrip {
  width: 100%;
  background-color: var(--white);
  padding-left: 0.5rem;
  border-bottom: 0.1rem solid var(--gray);
  float: left;
  padding-left: 2%;
}

.fileManager .myNetworkRow {
  margin-bottom: 0rem !important;
  padding-bottom: 0;
  padding-top: 1.4rem;
  padding-left: 1.5%;
}

.fileManager .myNetworkRow .tab-content {
  margin: 0rem 0.313rem;
}

.fileManager .inviteSearchSec ul {
  display: flex;
  align-items: center;
  margin: 0rem;
}

.fileMangerRight {
  float: right;
  position: relative;
  width: 11.5rem;
}

.fileMangerRight ul {
  margin: 0rem;
}

.fileManager .fileMangerRight ul li {
  width: 5.5rem;
  height: 6.55rem;
  cursor: pointer;
  float: left;
}

.fileSearch:hover .imagePreview,
.fileSearch:hover .videoPreview {
  opacity: 0.3;
}

.opacityEffect {
  opacity: 0.6;
}

.fileManager .fileMangerRight ul li.fileSearchIcon {
  display: block;
  background-image: url(../../images/icons/search-icons.svg);
  text-decoration: none;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 35%;
}

.fileSearchIcon:hover {
  background: url(../../images/icons/search-active-icon.svg) no-repeat center
    center var(--dark-white) !important;
  background-position: center center;
  background-size: 35% !important;
}

.fileForward:hover {
  background: url(../../images/icons/icons_forwords-hover.svg) no-repeat center
    center var(--dark-white) !important;
  background-size: 40% !important;
  background-position: center center;
}

.fileSearchIcon.navActive,
.fileSearchIcon.navActive:hover {
  background: url(../../images/closeIcon.svg) no-repeat center right 1.3rem
    var(--dark-white) !important;
  background-size: 25% !important;
}

.fileManager .fileMangerRight ul li.fileForward {
  display: block;
  background: url(../../images/icons/icons_forwords.svg) no-repeat center center;
  text-decoration: none;
  background-size: 40%;
  background-position: center center;
}

.fileManager ul .suggestion {
  padding: 0rem !important;
}

.fileManager figure {
  width: 100%;
  height: 21rem;
  object-fit: cover;
  margin-bottom: 0;
}

.thumbnail {
  position: relative;
  width: 100%;
  height: 100%;
  margin-bottom: 1rem;
  overflow: hidden;
}

.thumbnail > img {
  max-width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  width: 100%;
  object-fit: cover;
  cursor: pointer;
  padding: 0;
  border: navajowhite;
  border-radius: inherit;
}

.thumbnail .contentHover {
  position: absolute;
  background-color: var(--color-surface-alt);
  padding: 1rem 1.2rem 1rem 1.2rem;
  color: var(--white);
  width: 100%;
  opacity: 0;
  transition: all 0.3s ease;
  font-size: var(--font-size-31);
  z-index: 2;
  bottom: 0;
}

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

.hoveremail {
	font-size: var(--font-size-15);
	font-weight: 600;
	font-stretch: normal;
	font-style: normal;
	line-height: 2.1rem;
	color: var(--black);
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.hoverdate {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2rem;
  color: var(--brown);
}

.hoversize {
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.1rem;
  color: var(--brown);

  padding-left: 0.5rem;
}
.imageVideoFile {
  padding-left: 0rem;
}
.thumbnail:hover > img {
  transform: scale(1.3);
}

.thumbnail:hover > .contentHover {
  opacity: 1;
}

.fileCheckIcon {
  display: block;
  background: url(../../images/filetypeicon/checkbox.svg) no-repeat right center;
  text-decoration: none;
  background-size: 100%;
  position: absolute;
  z-index: 9;
  width: 2rem;
  height: 2rem;
  top: 0.4rem;
  right: 1rem;
  cursor: pointer;
}

.fileUnCheckIcon {
  background-image: url(../../images/filetypeicon/uncheckbox.svg);
  text-decoration: none;
  width: 2rem;
  height: 2rem;
  top: 0.4rem;
  right: 1rem;
  cursor: pointer;
  visibility: hidden;
  background-repeat: no-repeat;
  background-size: 90%;
  background-position: 0;
  position: absolute;
  z-index: 99;
}

.fileSearch:hover .fileUnCheckIcon {
  visibility: visible;
}
.permissionCheckbox {
  visibility: visible !important;
  margin-right: 3rem;
}
.filemangerTab {
  float: left;
  padding-left: 1.75rem;
}

.filemangerTab li {
  float: left;
}

.filemangerTab li {
  cursor: pointer;
}

.filemangerTab li span {
  padding: 2.3rem 0 1.9rem;
  float: left;

  font-size: var(--font-size-15);
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 2.1rem;
  display: block;
  margin-right: 1.5rem;
  margin-left: 1.5rem;
  cursor: pointer;
}

.fileManager .tabbable-line > li {
  margin-right: 1.5rem !important;
  margin-left: 1.5rem !important;
}

.filemangerTab li span.active {
  border-bottom: 0.2rem solid var(--red);
  position: relative;
  color: var(--red) !important;
}

.fileManager .tabbable-line > .nav-tabs > li.open,
.tabbable-line > li:hover {
  border-bottom: none !important;
}

.playIcon {
  position: absolute;
  z-index: 8;
  width: 4.4rem;
  height: 4.4rem;
  top: 50%;
  left: 50%;
  background-image: url(../../images/play-icon.svg);
  margin: 0rem auto;
  transform: translate(-50%, -50%);
  border-radius: 100%;
  background-size: 100%;
  cursor: pointer;
  background-color: var(--color-text-secondary);
  background-repeat: no-repeat;
  background-position: center;
}

.fileHeaderName {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.9rem;
  width: 27%;
  float: left;
  padding-left: 5rem;
}

.fileHeaderShare {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.9rem;
  width: 16%;
  float: left;
}
.downloadIcon {
  width: 100%;
  max-width: 2rem;
  max-height: 2rem;
  height: 100%;
}
.fileHeaderSize {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.9rem;
  width: 15%;
  float: left;
}

.fileHeaderDate {
  color: var(--black);
  font-size: var(--font-size-15);
  font-weight: 500;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.9rem;
  width: 18%;
  float: left;
}

.documentHeader {
  display: flex;
  background: var(--white);
  height: 5rem;
  align-items: center;
  margin-bottom: 1.5rem;
  border-radius: 0.2rem;
}

.documentFiles {
  display: flex;
  background: var(--white);
  height: 6.5rem;
  align-items: center;
  border-radius: 0.2rem;
  margin-bottom: 1rem;
  padding-left: 2rem;
}

.calendar-info {
  width: 35.3%;
  float: left;
  padding: 0 2rem 0 1rem;
  max-width: 25.5%;
}

.document-name a {
	margin-left: 0;
	font-size: var(--font-size-15);
	font-weight: 500;
	font-stretch: normal;
	font-style: normal;
	line-height: normal;
	color: var(--black);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: inline-block;
	/* width       : 255px; */
	vertical-align: top;
	text-decoration: none;
	cursor: pointer;
}

.document-name span {
  margin-left: 0;
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.6rem;
  color: var(--black);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: top;
  text-decoration: none;
  cursor: pointer;
  padding-left: 0.5rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 65%;
  float: left;
}

.calendar-name {
  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 19px;
  color: var(--brown);
  width: 18%;
  float: left;
}

.calendar-size {
  padding-right: 0.5rem;

  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--brown);
  width: 15%;
  float: left;
}

.calendar-date {
  padding-right: 0rem;

  font-size: var(--font-size-15);
  font-weight: 400;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--brown);
  width: 18%;
  float: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.calendar-size span {
  white-space: nowrap;
  overflow: hidden;
  display: inline-block;
  text-overflow: ellipsis;
  width: 19rem;
  overflow: hidden;
}

span.document-download.downloadFileLoad {
  display: flex;
  float: right;
  cursor: pointer;
}

span.document-download.audioFileLoad {
  padding-right: 1rem;
  float: right;
  cursor: pointer;
}

.documentFiles:hover {
  background: var(--dark-white);
}

.documentBackground {
  background: var(--dark-white);
}

#audioTab span.document-name img {
  width: 1.7rem;
}

.downloadPercentage {
  display: block;

  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.46;
  color: var(--brown);
}

span.document-name img {
  height: 100%;
  width: 100% !important;
  max-width: 2rem;
  max-height: 2rem;
  margin-top: 0.2rem;
}

.linkName {
	font-size: var(--font-size-15);
	font-weight: 500 !important;
	font-stretch: normal;
	font-style: normal;
	line-height: 2.2rem !important;
	color: var(--black) !important;
	display: inline-block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 80%;
	vertical-align: bottom;
}

.filemangerLinkName {
  width: 15.5rem !important;
  font-weight: normal !important;
}

.checkBoxNormal {
  background: url(../../images/icons/check-contact.svg) no-repeat center top 0px;
  background-size: cover;
  padding: 0rem 0.8rem !important;
  width: 1.7rem;
  height: 1.7rem;
  float: left;
}

/*my-filemanager-image-zoom-start-here*/

.zoomIn img {
  width: 100%;
  max-height: 65rem;
  object-fit: scale-down;
  max-width: 100%;
}

video#videoPlayer {
  width: 100%;
  height: 75vh;
  max-width: 100%;
}

.fileImagePreview {
  background-color: rgb(from var(--black) r g b / 80%);
}

.fileImageBody {
  width: 70%;
  border-radius: 0.5rem;
  border: 0.1rem solid var(--color-text-secondary);
  background-color: var(--dark-white);
  padding: 1.5rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
  margin: 0rem;
  max-width: inherit;
  margin: 0px auto;
  text-align: center;
}

.fileImageBody .modal-content {
  border: none;
  background: none;
}

.fileImageBody .modal-header .close {
  padding: 0;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: inherit;
  float: none;
}

.fileImageBody .modal-header .close:focus {
  border: none;
  box-shadow: inherit;
  outline: none;

}

.fileImageBody .modal-header h2 {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: normal;
  text-align: left;
  color: var(--color-text-primary);
  margin-bottom: 0rem;
  margin-right: auto;
}

.fileImageBody .modal-footer {
  position: absolute;
  width: 100%;
  top: 46%;
  border: none;
}

.modal-footer .float-left {
  position: absolute;
  left: -8rem;
  top: 50%;
  background: none;
  border: none;
  display: inline-block;
}

.modal-footer .float-right {
  position: absolute;
  right: -8rem;
  background: none;
  border: none;
  top: 1rem;
}

.nextBtn:hover .default-search-icons {
  display: none;
}

.hover-search {
  display: none;
}

.default-search-icons {
  display: inline-block;
}

.nextBtn:hover .hover-search {
  display: inline-block;
}

.fileImageBody .modal-header {
  padding: 0;
  border-bottom: none;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  gap: 2.4rem;
  padding: 0rem 0rem 1.8rem 0;
}

.fileImageBody .modal-header #previewShareFile,
.fileImageBody .modal-header #previewReplyFile,
.fileImageBody .modal-header #previewForwardFile,
.fileImageBody .modal-header #previewDownloadFile,
.fileImageBody .modal-header .close {
  flex: 0 0 auto;
}

.fileImageBody .modal-body {
  align-items: center;
  padding: 0px;
  background: var(--dark-black);
  border-radius: 0.5rem;
  justify-content: center;
  align-items: center;
}

.upload-img-single-show {
  max-width: 100%;
  max-height: 39.8rem;
  width: 100%;
  object-fit: cover;
}

.fileImageBody .col-md-12 {
  padding: 0rem;
}

/* .modal-footer .btn-secondary:not(:disabled):not(.disabled).active,
.btn-secondary:not(:disabled):not(.disabled):active,
.show > .btn-secondary.dropdown-toggle {
  background: none;
  border: none;
  box-shadow: inherit;
} */





img.close-img-w {
  width: 100%;
  max-width: 1.5rem;
  height: 100%;
  padding-top: 0;
  max-height: 1.5rem;
}

.fileManager #suggestionsdirectorydata ul .suggestion {
  border: none;
}

/*share pop start here*/

.filePreviewTittle {
  flex: auto;
}

.filePreviewTittle h2 {
  text-align: center;
  font-size: var(--font-size-15);
  font-weight: 600;
  font-style: normal;
  font-stretch: normal;
  line-height: 1.9rem;
  text-align: center;
  color: var(--black);
}

.fleMediaPreview .common-postion {
  border: none;
  padding: 0;
  width: 100%;
}

/*share pop start end*/

/*my-filemanager-image-zoom-end-here*/

/*my-filemanager-css-end-here*/

.photo-gallery {
  color: var(--light-brown);
  background-color: var(--white);
}

.photo-gallery p {
  color: var(--color-text-secondary);
}

.photo-gallery h2 {
  font-weight: bold;
  margin-bottom: 4rem;
  padding-top: 4rem;
  color: inherit;
}

.fileMangerMain {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(28rem, 1fr));
  grid-auto-flow: row dense;
  grid-gap: 1vw;
  width: 100%;
  padding: 0;
  list-style: none;
  padding-bottom: 2rem;
  margin-bottom: 2rem;
  height: calc(100vh - 18rem) !important;
  grid-auto-rows: max-content;
  padding-bottom: 5rem;
  overflow-y: scroll;
}

.documentRowScroll {
  height: calc(100vh - 21rem) !important;
  overflow: auto;
}

@media (max-width: 767px) {
  .photo-gallery h2 {
    margin-bottom: 2.5rem;
    padding-top: 2.5rem;
    font-size: var(--font-size-25);
  }
  .attendLeft {
    display: none;
  }
}

.photo-gallery .intro {
  font-size: var(--font-size-17);
  max-width: 50rem;
  margin: 0 auto 4rem;
}

.photo-gallery .intro p {
  margin-bottom: 0;
}

.photo-gallery .photos {
  padding-bottom: 2rem;
}

.photo-gallery .item {
  padding-bottom: 3rem;
}

#image-gallery-image {
  z-index: 99;
  max-height: 76vh;
  object-fit: contain;
  display: flex;
}

/*videoconferenccall-start-here*/

.videoconferenccall {
  min-width: 35rem;
  color: var(--white);
  padding: 1.6rem;
  position: fixed;
  z-index: 9999;
  right: 1.8%;
  top: 6.5rem;
  border-radius: 0.3rem;
}

.videoconferenccall .call-all-packets {
  width: 34rem;
  padding: 3rem 0 2rem !important;
  background: var(--popup);
  border-radius: 0.3rem;
  margin-bottom: 0rem;
}

.videoconferenccall .hey_its_call {
  border-radius: 0.3rem;
  padding-top: 1rem;
  padding-bottom: 0rem;
  text-align: center;
}

.videoconferenccall .incomingaudioconfe.calltitle {
  color: var(--white);

  font-size: var(--font-size-17);
  font-weight: normal;
  font-style: normal;
  font-stretch: normal;
  line-height: normal;
}

.videoconferenccall .expandcallicon-css {
  margin-right: 3.4rem;
  float: right;
  display: none;
}

.videoconferenccall .userprofile {
  margin-top: 1.5rem;
  position: relative;
  margin-left: 0;
}

.videoconferenccall .userprofile .userpic {
  display: block;
  border-radius: 0;
  padding: 0.2rem;
  margin: 0 auto;
}

.videoconferenccall .userprofile .userpic .userpicimg,
.videoconferenccall .userprofile .userpic {
  max-height: 4.9rem;
  max-width: 4.9rem;
  min-height: 1rem;
  margin: 0 0 0rem 0;
  display: inline-block;
  background-color: transparent;
}

.videoconferenccall .incomingaudioconfe.calltitle {
  display: inline-block;
  font-size: var(--font-size-15) !important;
  font-weight: 500 !important;
  font-stretch: normal !important;
  font-style: normal !important;
}

.videoconferenccall .userprofile .user-details-on-call-popup {
  display: block;
  margin-left: 0;
  position: relative;
  vertical-align: top;
  text-align: center;
  margin-bottom: 0rem;
}

.videoconferenccall
  .userprofile
  .user-details-on-call-popup
  .subtitle.usernamecall {
  margin-top: 1.5rem;
  color: var(--white);
  font-weight: normal;

  max-width: 100%;
  margin-bottom: 1rem;
  font-size: var(--font-size-15);

}

.videoconferenccall
  .userprofile
  .user-details-on-call-popup
  .username.usernamecall {
  color: var(--dark-gray);
  display: inline-block;
  font-size: var(--font-size-15);
  margin-bottom: 2rem;
}

.videoconferenccall .call-popup-call-action-buttons {
  margin: 0 !important;
  display: block;
  width: 100%;
  text-align: center;
}

.videoconferenccall .call-popup-call-action-buttons {
  margin: 0 !important;
  display: block;
  width: 100%;
  text-align: center;
}

.videoconferenccall .call-all-packets .rejectmessages {
  width: 100%;
  padding-top: 4rem;
  margin-top: 1rem !important;
  list-style: none;
  display: block;
}

.videoconferenccall .call-all-packets .rejectmessages ul {
  padding: 0;
  text-align: left;
  padding-left: 6rem;
  margin-bottom: 2rem;
  list-style: none;
}

.btncreate {
  margin-top: 1.5rem;
  width: 100%;
}

.radio-inline,
.checkbox-inline {
    display: inline-block;
    padding-left: 0;
    margin-bottom: 0;
    vertical-align: top;
    font-weight: 400;
    cursor: pointer;
    font-size: var(--font-size-15);
    /* line-height: normal; */
}

.radio-inline input {
  margin: 0.4rem 1rem 0 0rem;
  position: relative;
  top: 0.1rem;
}

.recentInput {
  background: var(--popup);
  color: var(--white);
  border: none;
  border-bottom: 0.1rem solid var(--white);
  font-size: var(--font-size-15);
}

.videoconferenccall .userprofile .userpic .userpicimg {
  width: 6.4rem !important;
  height: 6.4rem !important;
  border: 0.1rem solid var(--red);
  border-radius: 0.3rem;
  padding: 0.2rem;
}

/*videoconferenccall-start-end*/

/*invited-btn-start*/

.invited {
  width: 100%;
  border-radius: 0.3rem;

  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  outline: none;
  font-size: var(--font-size-15);
  padding: 0.8rem 1.5rem;
  background-color: var(--white) !important;
  border: solid 0.1rem var(--dark-gray) !important;
  color: var(--dark-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.remind {
  width: 100%;
  border-radius: 0.3rem;

  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  text-align: center;
  outline: none;
  font-size: var(--font-size-15);
  padding: 0.8rem 1.5rem;
  background-color: var(--white) !important;
  border: solid 0.1rem var(--dark-gray) !important;
  color: var(--dark-gray) !important;
  cursor: not-allowed;
  pointer-events: none;
}

.invited:hover {
  background-color: var(--white) !important;
  border: solid 0.1rem var(--dark-gray) !important;
  color: var(--dark-gray) !important;
}

.invited:focus {
  border: solid 0.1rem var(--gray);
}

.inviteDashboard {
  width: inherit !important;
}

.activeCallsBtn {
  padding: 0.6rem 1.4rem !important;
}

.smallBtn {
  padding: 0.5rem 1.1rem !important;
}

.invite,
.sendBtn {
  width: 100%;
  border: solid 0.1rem var(--dark-gray);
  outline: none;
  background: var(--dark-gray);

  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.1rem;
  text-align: center;
  color: var(--white);
  cursor: pointer;
  height: 3.3rem;
}
.invite{
	line-height: 1.1rem !important;
}
.inviteBtn {
  border: none;
  width: auto;
  padding: 0px;
}
.connectedbtn {
  font-weight: 500 !important;
  font-stretch: normal;
  font-style: normal;
  text-align: center;
  border-radius: 0.2rem;
  display: inline-block;
  padding: 0.1rem 0.3rem;
  margin-left: 0.5rem;
  font-size: var(--font-size-11) !important;
  margin-top: 0rem !important;
  top: 0rem !important;
  line-height: 1.3rem;
  padding-top: 0.2rem;
  border: solid 0.1rem var(--red);
}
.invite:focus {
  border: solid 0.1rem var(--dark-gray);
}

.invite:hover {
  background: var(--red);
  border: solid 0.1rem var(--red);
}
.cursorNotAllowed:hover {
  background: var(--dark-gray);
  border: solid 0.1rem var(--dark-gray);
}
/*invited-btn-ned*/

.display-default-cancle {
  width: 100%;
  cursor: pointer;
  max-width: 1.3rem;
  max-height: 1.3rem;
}

.no-hover {
  border: none !important;
}

/*successfully msg start here*/
.successfullySection {
  width: 50rem;
  margin: 0 auto;
  border-radius: 0.3rem;
  border-left: 0.5rem solid var(--light-red);
  background-color: var(--white);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 0.4rem 1rem 0 rgb(from var(--color-text-primary) r g b / 54%);
  padding: 2rem 1.7rem 2rem 1.7rem;

}

.succesfullyHeading {
	font-size: var(--font-size-15);
	padding-bottom: 2rem;
	color: var(--black);
	/*  */
	font-weight: 500;
}
.succesfullyFooter {
  text-align: right;
}
.successfullyBtn {
  border: 0.1rem solid var(--red);
  color: var(--white);

  font-weight: 600;
  font-size: var(--font-size-15);
  padding: 0.8rem 3.3rem;
  background: var(--red) !important;
  color: var(--white);
  border-radius: 0.3rem !important;
}

/*successfully msg end here*/

/* dashboard invite error icon */

.common-info-icons {
  width: 1.5rem;
  height: 1.5rem;
}

.notificationPanel .my-netork-icon {
  display: flex;
  flex-direction: row;
  margin-top: 0;
  position: absolute;
  right: 0;
}

.my-netork-icon {
  display: flex;
  flex-direction: row;
}

.network-archived {
  width: 3.9rem;
  cursor: pointer;
}

.network-accept {
  width: 3.9rem;
  cursor: pointer;
}

.network-cancle {
  cursor: pointer;
}

.notificationPanel li.list-section {
  background: var(--white);
}

.unreadbold {
  font-weight: 500 !important;
  color: var(--black) !important;
}

.empty-state-center {
  position: relative;
  height: 100vh;
}

.empty-state-center-crm {
  position: relative;
  height: 74vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.middleInnerCRM {
  height: 50vh !important;
}

.incall-chat-input-label:focus {
  border: unset;
  outline: unset;
  box-shadow: inherit;
}

/*team loader start*/

#recentloadersection #loading-bar-spinner.spinner,
#trayLoader #loading-bar-spinner.spinner {
  top: 40%;
}

#loading-bar-spinner.spinner {
  left: 50%;
  margin-left: -2rem;
  top: 50%;
  margin-top: -2rem;
  position: absolute;
  z-index: 19 !important;
}

#loading-bar-spinner.spinner .spinner-icon {
  width: 4rem;
  height: 4rem;
  border: solid 4px transparent;
  border-top-color: var(--red) !important;
  border-left-color: var(--red) !important;
  border-radius: 50%;
}

#body-spinner-bar.spinner .body-spinner-icon {
  width: 13rem;
  height: 13rem;
  border: solid 0.8rem transparent;
  border-top-color: var(--red) !important;
  border-left-color: var(--red) !important;
  border-radius: 50%;
}

.fullPageloader {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 99;
  width: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.fullPageloader .body-spinner-icon {
  width: 5rem !important;
  height: 5rem !important;
}

.fullPageloader span {
  display: block;
  text-align: center;
  font-size: var(--font-size-15);
  position: relative;
  top: 3rem !important;
  color: var(--black);
}

@keyframes body-spinner-bar {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

.peopleYouMayKnowEmpty {
  position: absolute;
  list-style-type: none;
  left: 35%;
  top: 45%;
  font-size: var(--font-size-15);
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 40%;
}

#contactDirectoryEmpty.peopleYouMayKnowEmpty {
  left: 30% !important;
  text-align: center;
}

#contactDirectoryEmpty .matchStr {
  padding-left: 0.7rem;
}

.matchStr {
  color: var(--red);
}

.avoid-clicks {
  pointer-events: none;
  cursor: not-allowed;
}

@keyframes loading-bar-spinner {
  0% {
    transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

/*team loader end*/

.currentOpenRecentMeeting {
  background-color: var(--white);
  width: 46rem;
}

.list-section.currentOpenRecentMeeting {
  width: auto;
}

#meetingLoader .spinner {
  left: 60% !important;
  top: 40% !important;
}

.connection-meet {
  justify-content: space-between;
  display: flex;
  align-items: center;
}

.dot-new-notification {
  width: 0.6rem;
  height: 0.6rem;
  background-color: var(--red);
  border-radius: 50%;
  position: absolute;
  display: none;
}

li.list-group-item.active .dot-new-notification {
  background-color: var(--white);
}

@media screen and (max-width: 1200px) {
  .screen-resolution {
    display: block !important;
  }
  .fileUnCheckIcon {
    display: block !important;
  }
}

@media screen and (min-width: 1201px) {
  .screen-resolution.hideCls {
    display: block !important;
  }
}

@media screen and (max-width: 1920px) {
  .panel-scroll-chat {
    height: inherit;
    max-height: 72.5rem;
  }
}

@media only screen and (min-device-width: 768px) and (max-device-width: 1900px) {
  .panel-scroll-chat {
    height: 67.3rem !important;
  }
}

@media (min-width: 1920px) and (max-width: 2560px) {
  #monthviewAllMeetings .days-bg .base,
  #monthviewAllMeetings .days-bg .base2 {
    min-height: 12.999rem;
  }
  .middle-section {
    max-width: 30%;
  }
  .right-section {
    min-width: 74%;
  }
}

@media (min-width: 768px) and (max-width: 1600px) {
  .input-search-invite {
    border-right: solid 0.1rem var(--gray);
  }
  .input-search-invite .user-search-input {
    border-right: solid 0.1rem var(--gray);
    font-size: var(--font-size-15);
  }
  .list-group-item img {
    width: 1.5rem;
  }
  .Active-call-popup .activeConferencepopupBody {
    width: 47rem;
  }
  .navbar-left {
    max-width: 8.5rem;
  }
}

/* Landscape*/

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: landscape) {
  .reciever-ul {
    height: calc(100vh - 23.5rem);
  }

  .connect-button .connectBtn {
    padding: 0.3rem 0.5rem 0.7rem 0.3rem;
  }

  .connect-button .text {
    font-size: var(--font-size-15);
  }

  .calendar-link-outer {
    font-size: var(--font-size-15);
  }
}

/*1024-1366-device*/

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .reciever-ul {
    max-height: 100rem;
  }
}

@media screen and (max-width: 768px) {
  .middle-section .opacity {
    position: absolute;
    content: "";
    height: 100vh;
    background: var(--dark-black);
    width: 100%;
    left: 100%;
    z-index: -1;
    display: block;
    opacity: 0.3;
  }
  .screen-resolution {
    display: none !important;
  }
  .right-section {
    float: right;
    width: 100% !important;
  }
  .remove-invite {
    width: 3.5rem;
  }
  .emailWrap {
    max-width: 47.3% !important;
    margin-bottom: 0.5rem;
  }
  .invite-full-name {
    margin-bottom: 0px !important;
  }
  .inviteMainWrap {
    max-width: 47.3% !important;
  }
}

/*768-1200-device*/

@media only screen and (min-width: 768px) and (max-height: 1200px) and (-webkit-min-device-pixel-ratio: 1.5) {

  .common-contact-section {
    padding-bottom: 0.2rem;
  }
  .navbar-nav {
    flex-direction: row;
  }
  .customRow {
    flex-wrap: nowrap;
  }
  .list-group-item {
    padding: 1.3rem 0 1.3rem 0;
  }
  .menu-style {
    font-size: var(--font-size-11);
  }
}

/* Large Devices, Wide Screens */

@media only screen and (min-width: 1200px) {
  .middle-section {
    position: relative !important;
  }
  .middle-section .opacity {
    display: none;
  }
  .userRightOpacity {
    display: none;
  }
}

/*1024-1366-device*/

@media only screen and (min-device-width: 1024px) and (max-device-width: 1366px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait) {
  .box-container {
    overflow: scroll;
    overflow-x: hidden;
  }
  .middle-section {
    position: absolute !important;
    z-index: 9;
    width: 40rem !important;
  }
  .userGroupList ul li {
    max-width: auto;
  }
  .opacity:before {
    position: absolute;
    content: "";
    height: 100%;
    background: var(--dark-black);
    width: 100rem;
    left: 0;
    right: 0;
    z-index: -1;
    display: block;
    min-width: 1200px;
    opacity: 0.3;
  }
  .reciever-ul {
    max-height: calc(100vh - 24rem);
  }
  .common-contact-section {
    padding-bottom: 0.2rem;
  }
  .chatHeaderWrap {
    width: 15.5rem !important;
    min-width: 50% !important;
    max-width: 100% !important;
  }
  .cretae-team-box {
    width: 80% !important;
  }
  .navbar-nav {
    flex-direction: row;
  }
  .customRow {
    flex-wrap: nowrap;
  }
  .list-group-item {
    padding: 2.5rem 0 2.6rem 0;
  }
  .menu-style {
    font-size: var(--font-size-11);
  }
}

@media only screen and (min-width: 1024px) and (orientation: portrait) {
    .accountSetting {
        top: 35% !important;
    }
    .editProfile {
        top: 35% !important;
    }
    .accountdropdownstatus li {
        padding: 0.7rem 1.6rem 0.7rem 2rem !important;
    }
    .editProfile {
        overflow: hidden;
    }
    .editProfile .myInfoContainer {
        overflow: hidden;
    }
    .selectDropDown ul li {
        padding: 0.5rem 0rem 0.5rem 0rem !important;
    }
    .countryDropdown .contry-code-num {
        font-size: var(--font-size-15);
    }
}

/* i-pad-Landscape */

@media all and (width: 1024px) and (height: 768px) and (orientation: landscape) {
  .emojionearea .emojionearea-button > div,
  .emojionearea .emojionearea-picker .emojionearea-wrapper:after {
    background-size: 3.5rem;
  }
  .gouopScroll {
    max-height: calc(100vh - 21rem);
  }
  .accordionWrapper {
    max-height: calc(100vh - 23.11rem);
  }
  .editProfile .myInfoContainer {
    overflow: hidden;
  }
  .selectDropDown ul li {
    padding: 0.5rem 0rem 0.5rem 0rem !important;
  }
  .editProfile .myInfoContainer {
    overflow: hidden;
  }
  .selectDropDown ul li {
    padding: 0.5rem 0rem 0.5rem 0rem !important;
  }
  .accountdropdownstatus li {
    padding: 0.7rem 1.6rem 0.7rem 2rem !important;
  }
  /*dashboard*/
  .box-container {
    overflow: scroll;
    max-height: 100%;
    overflow-x: hidden;
  }
}

@media all and (max-width: 768px) and (min-height: 768px) and (orientation: portrait) {
  .box-container {
    max-height: 100%;
  }
}

/* i-pad-portrait */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  body {
    overflow: hidden;
  }
  .main-wrapper {
    /*  */
    width: 100%;
  }

  /*sidebar-header*/
  .sideBarHeadrer {
    padding: 0rem;
  }

  /* .middle-data-list, .middle-data-list> * {
		height: calc(100vh - 30rem) !important;} */

  .filter-list-item li {
    max-width: 100% !important;
  }

  .editProfile .myInfoContainer {
    overflow: hidden;
  }

  .selectDropDown ul li {
    padding: 0.5rem 0rem 0.5rem 0rem !important;
  }

  .accountSetting {
    top: 45% !important;
  }

  .accountdropdownstatus li {
    padding: 0.7rem 1.6rem 0.7rem 2rem !important;
  }

  /*dashboard*/

  .dasboardTitle {
    padding-left: 1.2rem;
  }

  .welcome-name {
    font-size: var(--font-size-17);
  }

  #goToBottom {
    bottom: 1rem !important;
    display: none !important;
  }
  section#dashboard-template {
    margin-top: 0;
    margin-left: 0rem;
    padding-top: 1.5rem;
  }
  .filemangerTab {
    padding-left: 0 !important;
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: portrait) {
  .reciever-ul {
    max-height: calc(100vh - 26rem);
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation: landscape) {
  .accordionWrapper {
    max-height: calc(100vh - 22.88rem);
  }
}

@media only screen and (min-device-width: 481px) and (max-device-width: 991px) and (orientation: landscape) {
  .accordionWrapper {
    max-height: calc(100vh - 22.88rem);
  }

  .middle-section .opacity {
    position: absolute;
    content: "";
    height: 100vh;
    background: var(--dark-black);
    width: 100%;
    left: 100%;
    z-index: -1;
    display: block;
    opacity: 0.3;
  }
}

/*  ipad portrait */

@media all and (device-width: 768px) and (device-height: 1024px) and (orientation: portrait) {
  .calendarTopStrip {
    padding: 1.3rem 0rem !important;
    margin-bottom: 0.5rem !important;
  }

  .form_custom_width {
    width: 94.2%;
  }

  .inviteBtnSec .inviteBtn {
    width: 8rem;
    font-size: var(--font-size-11);
  }

  .chatHeaderWrap {
    min-width: auto !important;
  }

  .successfullySection {
    max-width: 50%;
  }

  /*account-setting*/
  .accountSetting {
    max-width: 45rem;
    top: 45% !important;
  }

  .editProfile {
    max-width: 45rem;
    top: 45% !important;
  }

  .myInfoContainer {
    overflow: hidden;
  }

  .accountdropdownstatus li {
    padding: 0.5rem 1.6rem 0.5rem 2rem !important;
  }

  /*account-setting-end*/
  .navbarHeader {
    left: 11% !important;
  }

  /*INVITE-pop-start*/
  .invitation-popup-body {
    min-width: 75%;
  }

  .invite-input-common {
    min-width: 95%;
  }

  .margin-l-r-common {
    margin: 0rem !important;
  }

  .invitePopBtn {
    padding-right: 0% !important;
  }

  .margin-common-row {
    overflow-y: inherit !important;
  }

  /*INVITE-pop-end*/
  .create-team-main-section {
    max-width: 75%;
  }
}

/*  ipad landscape */

@media all and (device-width: 1024px) and (device-height: 768px) and (orientation: landscape) {
  .successfullySection {
    max-width: 40% !important;
  }
  /*account-setting*/
  .accountSetting {
    max-width: 45rem;
    top: 50% !important;
  }
  .editProfile {
    max-width: 45rem;
    top: 50% !important;
  }
  .myInfoContainer {
    overflow: hidden;
  }
  .accountdropdownstatus li {
    padding: 0.5rem 1.6rem 5rem 2rem !important;
  }
  /*account-setting-end*/
}

@media only screen and (device-width: 1024px) and (device-height: 1366px) and (orientation: portrait) and (-webkit-min-device-pixel-ratio: 1.5) {
  .successfullySection {
    max-width: 35%;
    top: 35% !important;
  }
  /*account-setting*/
  .accountSetting {
    max-width: 45rem;
    top: 35% !important;
  }
  .editProfile {
    max-width: 45rem;
    top: 35% !important;
  }
  .myInfoContainer {
    overflow: hidden;
  }
  .accountdropdownstatus li {
    padding: 0.5rem 1.6rem 0.5rem 2rem !important;
  }
  /*account-setting-end*/
}

@media only screen and (device-width: 1366px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-min-device-pixel-ratio: 1.5) {
  .successfullySection {
    max-width: 30% !important;
  }
  .teamGroupScroll,
  .teamGroupScroll > * {
    max-height: calc(100vh - 37.5rem);
  }
}

@media (min-width: 320px) and (max-width: 767px) and (orientation: portrait) {
  .page-wrapper {
    overflow-y: scroll;
    overflow-x: hidden;
  }
  .page-content {
    flex-grow: 1;
  }
  .chat-input-area {
    max-width: 70% !important;
  }
}

.page-wrapper {
  min-height: 100vh;
  transition:
    margin 0.1s ease,
    width 0.1s ease;
  width: 100%;
  height: 100%;
  flex-wrap: wrap;
}

/*top_haeder*/

.navbarHeader {
  border-bottom: 0.1rem solid var(--gray);
  transition: all 0.1s ease-out;
  background: var(--white);
  margin-left: 8.1rem;
  height: 100vh;
  max-height: 7rem;
  width: 100%;
}

.page-content {
  left: 9rem;
  padding: 0;
  right: 0;
  transition:
    width 0.1s ease,
    left 0.1s ease;
}

@media (min-width: 768px) and (max-width: 1200px) and (orientation: landscape) {

  .page-wrapper {
    height: 100%;
  }
  .main-wrapper {
    width: 100%;
    height: 100 !important;
    position: fixed;
  }
  .chat-input-section .emojionearea-button {
    top: 7%;
  }
  .righSectionInner {
    flex-direction: column !important;
  }
  .box-container {
    max-height: 100%;
  }
  .welcome-name {
    font-size: var(--font-size-17);
  }
  .dasboardTitle {
    padding-left: 1.2rem;
  }
  .navbar-content {
    padding-left: 1.2rem;
  }
  section#dashboard-template {
    margin-left: 0rem !important;
  }
  #yearviewAllMeetings .tp {
    max-height: calc(100vh - 22rem) !important;
  }
  /*INVITE-pop-start*/
  .invitation-popup-body {
    min-width: 60%;
  }
  .invite-input-common {
    min-width: 95%;
  }
  .margin-l-r-common {
    margin: 0px !important;
  }
  .invitePopBtn {
    padding-right: 0% !important;
  }
  .margin-common-row {
    overflow-y: inherit !important;
  }
  /*INVITE-pop-end*/
  .create-team-main-section {
    min-width: 60%;
  }
}

@media screen and (min-device-width: 1024px) and (max-device-width: 1600px) and (-webkit-min-device-pixel-ratio: 1) {
  #monthviewAllMeetings .days-bg .days {
    padding-bottom: 0.5rem !important;
  }
}

.accordionWrapper {
  overflow-y: scroll;
}

.contact-scroll-listing .common-ul-section {
  clear: both;
  height: calc(100vh - 14rem);
  overflow-x: hidden;
}

#InviteLoader #loading-bar-spinner.spinner {
  top: inherit;
  bottom: 35%;
}

#fileManagerLoader #loading-bar-spinner.spinner {
  top: 40%;
}

.main-wrapper {
  position: fixed;
  width: 100vw;
  height: 100vh;
}
@media screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) {
  .main-wrapper {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
  }
  .userRightOpacity {
    content: "";
    width: 100%;
    background: rgb(from var(--light-slate-black-v2) r g b / 72%);
    height: 100vh;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    display: block;
  }
  .monthLeft {
    flex-basis: calc(31% - 9rem) !important;
  }
  .monthLeft .monthView-leftContainer {
    padding-left: 0px !important;
    padding-right: 0px !important;
  }
  .monthNameDate {
    display: flex;
    align-items: center;
  }
  .monthLeft .leftViewDate,
  #dateContainer {
    padding-bottom: 0px !important;
  }
  .monthLeft .newevent-calendar-popup-right {
    margin-bottom: 1rem;
  }
  .monthLeftIcon,
  .monthRightIcon {
    border: none !important;
  }
}

.width100 {
  width: 100%;
}

/*callUl-start-here*/

.callUl .common-user-list {
  width: 90%;
}

.callUl .user-label {
  min-width: 82%;
  max-width: 82%;
}

/*callUl-end-here*/

/*messageUl-start-here*/

.messageUl .common-user-list {
  width: 90%;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.messageUl .user-label {
  width: inherit !important;
  min-width: inherit !important;
  max-width: 68%;
}

.messageUl .userMesssage {
  width: 91%;
}

/*topicUl-end-here*/

.topicUl .user-label {
  width: 100% !important;
  max-width: 64%;
}

.topicUl .user-name-label {
  width: inherit !important;
  max-width: inherit !important;
  min-width: inherit !important;
}

.topicUl .user-team-label {
  width: inherit !important;
  max-width: inherit !important;
  min-width: inherit !important;
}

.topicUl .user-name {
  overflow: initial !important;
}

.topicUl .topicList {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  max-width: 75%;
  align-items: baseline;
}

.topicUl .common-user-list {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/*topicUl-end-here*/

/*groupUl-start-here*/

.groupUl .topicName {
  width: 88% !important;
  min-width: inherit !important;
  max-width: inherit !important;
}

.groupLi .common-d-list {
  min-width: 0;
}

.groupLi .common-user-list {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.groupLi:has(.recentJoinBtn .recentMeetingJoin) .common-d-list {
  padding-right: 7.5rem;
}

.groupLi .topicName.allListCommonWrap {
  display: flex;
  align-items: center;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 75% !important;
  overflow: hidden;
}

.groupSender {
  max-width: 75%;
  display: flex;
  align-items: center;
  overflow: hidden;
  text-overflow: ellipsis;
}

.groupSender .user-name-label {
  width: inherit !important;
  max-width: inherit !important;
  min-width: inherit !important;
  padding-right: 2rem;
}

.groupSender .user-name {
  width: inherit !important;
  max-width: inherit !important;
  min-width: inherit !important;
  overflow: initial !important;
}

.groupUl .common-user-list {
  width: 59% !important;
}

.groupUl .groupLi .common-user-list {
  width: auto !important;
}

/*groupUl-end-here*/

/*meetingUl-start-here*/

.meetingUl .common-user-list {
  width: 100% !important;
}

.meetingUl .user-label {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 100% !important;
  padding-right: 1rem;
}

.meetingUl .user-team-label {
  padding-right: 4rem;
  vertical-align: bottom;
}

.meetingUl span.recentMeetingJoin {
  top: 30%;
}

/*meetingUl-end-here*/

/*contactallUl-start-here*/

.contactallUl .user-team-label {
  width: 100% !important;

}

.userProfile .user-team-label {

}

.contactallUl .common-user-list {
  width: 97%;
  padding-right: 1rem;
}

/*contactallUl-end-here*/

.team-accordian .location-section {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}

.team-accordian .team-accordion-width {
  width: 78%;
  margin-left: 3.5rem;
}

/*networkallUl-end-here*/

.networkallUl .common-user-list {
  width: 97%;
  padding-right: 1rem;
}

.networkallUl .userProfile {
  width: 91%;
  overflow: hidden;
}

.networkallUl .useraddress {
  width: 91%;
  overflow: hidden;
}

.networkallUl .user-team-label {
  width: 100% !important;
  max-width: 93% !important;
}

.connectedTime {
  font-weight: 600;
}

/* Personal note attached to a received connection request. Clamped to two
   lines — the full text is on the title attribute. */
.invitationNote {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-top: 0.4rem;
  max-width: 93%;
}

.invitationNote__icon {
  margin-top: 0.1rem;
}

.invitationNote__text {
  font-style: italic;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.receviedScroll {
  height: calc(100vh - 18rem);
}

.forwardDataSection .common-d-list {
  align-items: center;
}

.forwardDataSection .check-box-icon {
  top: 2rem;
  position: inherit;
}

.forwardDataSection .common-user-icon {
  margin-top: 0.2rem;
}

/* "No results" empty state for the forward popup topics/groups search —
   fills the full list height and centers, without the per-item grey card look */
.forwardDataSection .forwardSearchEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  margin: 0;
  padding: 2rem;
  border: 0;
  background-color: transparent;
  list-style-type: none;
}

.forwardDataSection .forwardSearchEmptyText {
  text-align: center;
  font-size: var(--font-size-15);
  font-weight: 500;
  line-height: 1.8;
  color: var(--dark-gray);
  white-space: normal;
}

.forwardDataSection .forwardSearchEmptyText .textRed {
  display: inline;
  width: auto;
  max-width: none;
  white-space: normal;
  padding: 0 0 0 0.4rem;
  text-align: left;
}

.countNotification {
  color: var(--red);
  float: left;
  font-size: var(--font-size-15);
}

.w-74 {
  width: 74% !important;
}

.w-77 {
  width: 77%;
}

.globalSearchEmptyMessage {
  font-size: var(--font-size-15);
  font-weight: 600;
}

a#image-gallery-image-link {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.easyzoom img {
  vertical-align: middle;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100vw;
  height: 100vh;
  object-fit: contain;
}

.delete-meeting {
  -webkit-text-decoration-line: line-through;
  /* Safari */
  text-decoration-line: line-through;
}

/* delete account verify popup start */

div#deleteVerifyPopup,
div#verificationCodePopup {
  position: fixed;
  z-index: 1;
  margin-top: 0rem;
  left: 0;
  top: 0rem;
  width: 100%;
  height: 100%;
  overflow: auto;
  border-radius: 0.2rem;
  background-color: rgb(from var(--black) r g b / 80%);
  z-index: 999;
}

#deleteVerifyPopup .headings,
#verificationCodePopup .headings {
  font-size: var(--font-size-15) !important;
  padding-bottom: 1rem;
  font-weight: 600;
}

#deleteVerifyPopup .verif-label,
#verificationCodePopup .verif-label {
  font-size: var(--font-size-15);
  padding-bottom: 0.5rem;
  color: var(--black);
}

#deleteVerifyPopup .verif-sublabel,
#verificationCodePopup .verif-sublabel {
  font-size: var(--font-size-15);
  padding-bottom: 0.5rem;
  color: var(--black);
  font-weight: 500;
  margin-top: 0;
}

#deleteVerifyPopup .guestEmailAddress,
#verificationCodePopup .guestEmailAddress {
  font-weight: 600;
}

#deleteVerifyPopup input:first-of-type,
#verificationCodePopup input:first-of-type {
  margin-left: inherit;
}

#deleteVerifyPopup .verifyCodeTimer,
#verificationCodePopup .verifyCodeTimer {
  color: var(--red);
}

#deleteVerifyPopup .verifyModal-actions {
  margin-top: 1.7rem;
}

#verificationCodePopup .verifyModal-actions {
  margin-top: 5rem;
}

#deleteVerifyPopup .temp-inner-sections,
#verificationCodePopup .temp-inner-sections {
  padding-bottom: 0;
}

.submit-cancel-btns {
  display: flex;
  justify-content: end;
  gap: 1rem;
  margin-top: 2rem;
}

.logOutCheck {
  float: left;
  margin-top: 1rem;
  margin-left: 4rem;
}

.logoutClick {
  width: auto;
  text-align: left;
}

/* notifcation for smooth interaction  */

.noInternetBody {
  width: min-content;
  position: fixed;
  top: 1rem;
  right: 3rem;
  background: var(--white);
  border: 1px solid var(--dark-gray);
  box-shadow: 1px 4px 25px rgb(from var(--color-text-primary) r g b / 25%);
  border-radius: 5px;
  z-index: 9999;
  min-width: 36rem;
  margin-left: 8rem;
  padding: 1.5rem;

}
#callFrame .noInternetBody {
  top: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin-left: unset;
}
.notifcationBody {
  width: min-content;
  position: fixed;
  bottom: 2rem;
  left: 3rem;
  background: var(--white);
  border: 1px solid var(--dark-gray);
  box-shadow: 1px 4px 25px rgb(from var(--color-text-primary) r g b / 25%);
  border-radius: 5px;
  z-index: 9999;
  min-width: 36rem;
  margin-left: 8rem;
  padding: 1.5rem;

}

.notificationContent {
  display: flex;
  width: 100%;
  align-items: flex-start;
}

.notifyBellPermission {
  width: 100%;
  max-width: 5.5%;
  margin-top: 0.5rem;
}

.notifyClosePermisssion {
  width: 100%;
  max-width: 3.3%;
  cursor: pointer;
  position: absolute;
  right: 1.5rem;
}

.notificationContent h2 {
  margin: 0 0rem 0.7rem 1rem;

  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--black);
}

.okArea {
  float: right;
}

.okArea button {
  background-color: var(--red);
  border: 0.1rem solid var(--red);
  color: var(--white);

  font-weight: 700;
  font-size: var(--font-size-15);
  padding: 0.4rem 1rem;
  border-radius: 0.2rem !important;
}

.dragBorder {
  border: 4px dashed var(--color-border) !important;
}

.fileMangerMain li svg {
  width: 100%;
  height: 100%;
}

.cancelButtonGlobal {
  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--dark-gray);
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1;
  text-align: center;
  color: var(--dark-gray);
  /* margin-right: 1rem; */
  background-color: var(--white);
  cursor: pointer;
  height: 3.7rem;
}

.submitButtonGlobal {
  padding: 0rem 1.5rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--red);
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  text-align: center;
  color: var(--white);
  background-color: var(--red);
  cursor: pointer;
  height: 3.4rem;
}

.getStartedButton {
  padding: 0rem 1.5rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--gray);
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.6;
  text-align: center;
  color: var(--white);
  background-color: var(--gray);
  cursor: not-allowed;
  height: 3.4rem;
}

button.inActiveBtn {
  cursor: not-allowed !important;
  background-color: var(--dark-gray) !important;
  border: solid 0.1rem var(--dark-gray) !important;
}
.dashboardBtn {
  display: flex;
  align-items: center;
  line-height: inherit !important;
  height: inherit !important;
}
.invite.activeConference {
  height: 3.7rem;
  line-height: 2.1rem !important;
  width: unset;
}

@keyframes blink {
  50% {
    color: transparent;
  }
}

.loader__dot {
  animation: 1s blink infinite;
  font-weight: 900;
}

.loader__dot:nth-child(2) {
  animation-delay: 250ms;
}

.loader__dot:nth-child(3) {
  animation-delay: 500ms;
}

.threeDotLoader {
  display: none;
}

.activeConference.active {
  background-color: var(--red) !important;
  border: solid 0.1rem var(--red) !important;
}

.activeConference.active .threeDotLoader {
  display: inline-block !important;
}

.marginRightInherit {
  margin-right: inherit !important;
}

#emailChatBtn .material-symbols-outlined.icon-spin {
  float: left;
  line-height: 1.9rem;
  margin-right: 0.3rem;
}

.inviteBtnWidth {
    width: auto;
}

button#emailChatBtn {
  display: inline-flex;
}

#emailChatBtn .material-symbols-outlined.icon-spin {
  float: left;
  line-height: 1.9rem;
}

.popover-content {
  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  line-height: 19px;
  color: var(--brown);
}

.popover-title {
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-15);
  line-height: 22px;
  color: var(--brown);
}

.popover-next-button {
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  padding: 1px 10px !important;
}

.popover-content {
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-15);
  line-height: 19px;
  color: var(--brown);
}

.popover-title {
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-15);
  line-height: 22px;
  color: var(--brown);
}

.popover-next-button {
  background: var(--red);
  border: 1px solid var(--red);
  border-radius: 2px;
  padding: 1px 10px !important;
}

.link {

  display: inline-block;
}

.link::first-letter,
.owner-name {

}
.owner-image {
  border-radius: 50%;
  width: 2.5rem;
  height: 2.5rem;
}

/* archivedUl start here */

/* location start here */

.locationUl .common-user-list,
.archivedUl .common-user-list {
  width: 100%;
  overflow: hidden;
}

.archivedUl .allListCommonWrapUserContact {
  max-width: 100%;
}

.archivedUl .allListCommonWrap {
  min-width: 100%;
  max-width: 100%;
  padding-right: 0.5rem;
}

/* archivedUl end here */

.locationUl .allListCommonWrapUserContact {
  max-width: 70%;
}

.locationUl .allListCommonWrap {
  min-width: 100%;
  max-width: 100%;
  padding-right: 4rem;
}

.locationUl .check-box-icon {
  right: 1.2rem;
  top: 40%;
}

/* location end here */

/*departmentUl start here  */

.departmentUl .common-user-list {
  width: 100%;
  overflow: hidden;
}

.departmentUl .allListCommonWrapUserContact {
  max-width: 70%;
}

.departmentUl .allListCommonWrap {
  min-width: 100%;
  max-width: 100%;
  padding-right: 4rem;
}

.departmentUl .check-box-icon {
  right: 1.2rem;
  top: 40%;
}

/*departmentUl end here  */

/*titleUl start here  */

.titleUl .common-user-list {
  width: 100%;
  overflow: hidden;
}

.titleUl .allListCommonWrapUserContact {
  max-width: 70%;
}
.myImortColumBtn {
  clear: both;
}
.myImortColumBtn {
  clear: both;
  display: inline-block;
}

.titleUl .allListCommonWrap {
  min-width: 100%;
  max-width: 100%;
  padding-right: 4rem;
}

.titleUl .check-box-icon {
  right: 1.2rem;
  top: 40%;
}

/*titleUl end here  */

/*contactallUl start here  */

.contactallUl .common-user-list {
  width: 100%;
  overflow: hidden;
}

.contactallUl .allListCommonWrapUserContact {
  max-width: 70%;
}

.contactallUl .allListCommonWrap {
  min-width: 100%;
  max-width: 100%;
  padding-right: 4rem;
}

.contactallUl .check-box-icon {
  right: 1.2rem;
  top: 40%;
}

/*contactallUl end here  */

/* scroll listion start here */

.scrol-listing .common-user-list {
  width: 100%;
  overflow: hidden;
}

.scrol-listing .allListCommonWrapUserContact {
  max-width: 70%;
}
.document-name {
  padding-left: 1.5rem;
}
.scrol-listing .allListCommonWrap {
  min-width: 100%;
  max-width: 100%;
  padding-right: 4rem;
}

.scrol-listing .check-box-icon {
  right: 1.2rem;
  top: 40%;
}

/* scroll listion end here */

/* global start here */

.globaListMsg .allListCommonWrap {
  min-width: 88%;
  max-width: 88%;
}

/* global end here */

.userLocation {
  font-size: var(--font-size-13) !important;
}

.langDetectOnCall {
  background-color: var(--red) !important;
}

/* new loader start here */

@keyframes ldio-dpbvxcmmyw {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.5, 1.5);
  }
  100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

.ldio-dpbvxcmmyw div > div {
  position: absolute;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 50%;
  background: var(--color-brand);
  animation: ldio-dpbvxcmmyw 1s linear infinite;
}

.ldio-dpbvxcmmyw div:nth-child(1) > div {
  left: 74px;
  top: 44px;
  animation-delay: -0.875s;
}

.ldio-dpbvxcmmyw > div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 80px 50px;
}

.ldio-dpbvxcmmyw div:nth-child(2) > div {
  left: 65px;
  top: 65px;
  animation-delay: -0.75s;
}

.ldio-dpbvxcmmyw > div:nth-child(2) {
  transform: rotate(45deg);
  transform-origin: 71px 71px;
}

.ldio-dpbvxcmmyw div:nth-child(3) > div {
  left: 44px;
  top: 74px;
  animation-delay: -0.625s;
}

.ldio-dpbvxcmmyw > div:nth-child(3) {
  transform: rotate(90deg);
  transform-origin: 50px 80px;
}

.ldio-dpbvxcmmyw div:nth-child(4) > div {
  left: 23px;
  top: 65px;
  animation-delay: -0.5s;
}

.ldio-dpbvxcmmyw > div:nth-child(4) {
  transform: rotate(135deg);
  transform-origin: 29px 71px;
}

.ldio-dpbvxcmmyw div:nth-child(5) > div {
  left: 14px;
  top: 44px;
  animation-delay: -0.375s;
}

.ldio-dpbvxcmmyw > div:nth-child(5) {
  transform: rotate(180deg);
  transform-origin: 20px 50px;
}

.ldio-dpbvxcmmyw div:nth-child(6) > div {
  left: 23px;
  top: 23px;
  animation-delay: -0.25s;
}

.ldio-dpbvxcmmyw > div:nth-child(6) {
  transform: rotate(225deg);
  transform-origin: 29px 29px;
}

.ldio-dpbvxcmmyw div:nth-child(7) > div {
  left: 44px;
  top: 14px;
  animation-delay: -0.125s;
}

.ldio-dpbvxcmmyw > div:nth-child(7) {
  transform: rotate(270deg);
  transform-origin: 50px 20px;
}

.ldio-dpbvxcmmyw div:nth-child(8) > div {
  left: 65px;
  top: 23px;
  animation-delay: 0s;
}

.ldio-dpbvxcmmyw > div:nth-child(8) {
  transform: rotate(315deg);
  transform-origin: 71px 29px;
}

.ldio-dpbvxcmmyw {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.58);
  backface-visibility: hidden;
  transform-origin: 0 0;
  /* see note above */
}

.loadingio-spinner-spin-ethrqhs3zzm {
  width: 4rem;
  height: 4rem;
  display: inline-block;
}

.calenderLeftloader {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.4);
  backface-visibility: hidden;
  transform-origin: 0 0;
  /* see note above */
}
#dateContainer {
  min-height: 20.5rem;
}

.ldio-dpbvxcmmyw div {
  box-sizing: content-box;
}

/* new loader end here */

/*gif popup  */

.gifPopup h2 {
  font-size: var(--font-size-15);
  text-align: right;
  padding-right: 1.5rem;
  color: var(--brown);
}

.view-terms-giphy {
  color: var(--red);
}

.gifPopupPanel {
  position: absolute;
  left: 26rem;
  background: var(--white);
  padding: 1.5rem;
  width: 100%;
  max-width: 34rem;
  z-index: 999;
  bottom: 12rem;
  box-shadow: 0 0.5rem 1.3rem 0 rgb(from var(--color-text-primary) r g b / 12%);
  border-radius: 0.3rem;

}
.gifpopChat {
  min-width: 34rem;
}
.gifPopupPanel p {
  font-size: var(--font-size-15);
  text-align: left;
  color: var(--brown);
  margin-bottom: 0;
  line-height: 2.2rem;
}

.giphyPolicy {
  color: var(--red);
}

.giphyPolicy:hover {
  color: var(--red);
}

.commonMeetingSpace {
  margin-right: 0.5rem;
  vertical-align: text-top;
  width: 1.5rem;
  max-height: 1.5rem;
}

/*gif popup  */

/* team edit and reomove */

.editTeamIcon {
  display: block;
  background: url(../../images/icons/more-options.svg) no-repeat;
  text-decoration: none;
  background-size: 100% 100%;
  padding: 0.85rem 0.8rem;
  background-position: center;
}

.teamEditDropDown {
  position: absolute;
  top: 0;
  width: 20rem;
  right: 1.5rem;
  box-shadow: 0 0.4rem 0.9rem 0.1rem rgb(from var(--color-text-primary) r g b / 34%);
  z-index: 999;
  border-radius: 0.3rem;
  background: var(--white) !important;
  border: 1px solid var(--gray);

}

.teamEditDropDownItem {
  display: block;
  width: 100%;
  list-style: none;
}

.teamEditDropDownItem li {
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem;
  color: var(--black);
  font-size: var(--font-size-15);
  cursor: pointer;
  padding: 1.3rem 0rem 1.3rem 1.3rem !important;
}

.teamEditDropDownItem li span {
  line-height: 1.2rem;
  margin-top: 0.2rem;
}

.teamEditDropDownItem li:hover {
  background-color: var(--dark-slate-gray);
}

.editremoveIcon {
  width: 3rem;
  float: left;
  text-align: left;
}

.editremoveIcon img {
  vertical-align: text-top;
  width: 100%;
  max-width: 1.5rem;
  max-height: 1.5rem;
}
.editRemove {
  position: relative;
}

/* team edit and reomove */

@keyframes ldio-0iipvzwq519n {
  0% {
    opacity: 1;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1.5, 1.5);
  }
  100% {
    opacity: 0;
    backface-visibility: hidden;
    transform: translateZ(0) scale(1, 1);
  }
}

.ldio-0iipvzwq519n div > div {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--color-brand);
  animation: ldio-0iipvzwq519n 1s linear infinite;
}

.ldio-0iipvzwq519n div:nth-child(1) > div {
  left: 74px;
  top: 44px;
  animation-delay: -0.875s;
}

.ldio-0iipvzwq519n > div:nth-child(1) {
  transform: rotate(0deg);
  transform-origin: 80px 50px;
}

.ldio-0iipvzwq519n div:nth-child(2) > div {
  left: 65px;
  top: 65px;
  animation-delay: -0.75s;
}

.ldio-0iipvzwq519n > div:nth-child(2) {
  transform: rotate(45deg);
  transform-origin: 71px 71px;
}

.ldio-0iipvzwq519n div:nth-child(3) > div {
  left: 44px;
  top: 74px;
  animation-delay: -0.625s;
}

.ldio-0iipvzwq519n > div:nth-child(3) {
  transform: rotate(90deg);
  transform-origin: 50px 80px;
}

.ldio-0iipvzwq519n div:nth-child(4) > div {
  left: 23px;
  top: 65px;
  animation-delay: -0.5s;
}

.ldio-0iipvzwq519n > div:nth-child(4) {
  transform: rotate(135deg);
  transform-origin: 29px 71px;
}

.ldio-0iipvzwq519n div:nth-child(5) > div {
  left: 14px;
  top: 44px;
  animation-delay: -0.375s;
}

.ldio-0iipvzwq519n > div:nth-child(5) {
  transform: rotate(180deg);
  transform-origin: 20px 50px;
}

.ldio-0iipvzwq519n div:nth-child(6) > div {
  left: 23px;
  top: 23px;
  animation-delay: -0.25s;
}

.ldio-0iipvzwq519n > div:nth-child(6) {
  transform: rotate(225deg);
  transform-origin: 29px 29px;
}

.ldio-0iipvzwq519n div:nth-child(7) > div {
  left: 44px;
  top: 14px;
  animation-delay: -0.125s;
}

.ldio-0iipvzwq519n > div:nth-child(7) {
  transform: rotate(270deg);
  transform-origin: 50px 20px;
}

.ldio-0iipvzwq519n div:nth-child(8) > div {
  left: 65px;
  top: 23px;
  animation-delay: 0s;
}

.ldio-0iipvzwq519n > div:nth-child(8) {
  transform: rotate(315deg);
  transform-origin: 71px 29px;
}

.loadingio-spinner-spin-pjazkec4jh9 {
  width: 44px;
  height: 44px;
  display: inline-block;
  overflow: hidden;
}

.ldio-0iipvzwq519n {
  width: 100%;
  height: 100%;
  position: relative;
  transform: translateZ(0) scale(0.44);
  backface-visibility: hidden;
  transform-origin: 0 0;
  /* see note above */
}

.ldio-0iipvzwq519n div {
  box-sizing: content-box;
}

/* generated by https://loading.io/ */

@media (max-width: 1024px) {
  .ldio-dpbvxcmmyw {
    transform: translateZ(0) scale(0.38);
  }
}

.darkModeImages {
  position: absolute !important;
  right: -4rem;
  top: 1rem;
  cursor: pointer;
  width: 100%;
  max-width: 2rem;
  max-height: 2rem;
}
.email-description {
  font-size: var(--font-size-15);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.9rem !important;
  color: var(--color-text-primary) !important;
  background-color: var(--dark-slate-gray) !important;
  width: 100% !important;
  padding: 1.6rem 1rem 2.3rem !important;
  border-radius: 0.3rem !important;
  border: solid 0.1rem var(--color-border-light);
  resize: inherit;
  height: 80%;
  min-height: 10rem;
}

/* tour guide */
.socialButtonsWrapper.tour-step-backdrop {
  background: transparent !important;
}
.invitePopupBottomBody.spotlight {
  background: no-repeat;
}

/* button interaction on click event */

/* Keep the default Bootstrap backdrop so the modal stacks above other content. */

.fileImagePreview {
  z-index: 9999;
}

.fileImagePreview .fileImageBody {
  z-index: 10001;
}

.modal-backdrop {
  display: none !important;
  pointer-events: none !important;
}

.fileMangerIcon {
  width: 4rem;
  height: 4rem;
}

#import-from-google,
.connect-button .invite-social {
  min-width: 9.5rem;
}
/* Disable select content */
.navSideBar,
.navbarHeader,
.middle-section,
.chat-header-section,
.chat-input-section,
#calender-view,
#model_content,
.myNetworkContainer,
.fileManager,
.callBody,
#dashboard-template {
  -webkit-user-select: none; /* Safari */
  -ms-user-select: none; /* IE 10 and IE 11 */
  user-select: none; /* Standard syntax */
}
/* Enable select content for particular area */
.callBody .reciever-ul,
.meetingpopup-modal-content {
  user-select: text;
}
.network-accept img {
  width: 100%;
  max-width: 4.3rem;
  max-height: 2.3rem;
}
.createTeamIconSize {
  max-width: 2.5rem !important;
}

.googelDriveIcon {
  width: 10rem;
  height: 10rem;
}

.integrationMain {
  cursor: pointer;
  max-width: 2.5rem !important;
}
.joinsmall {
  height: auto !important;
}

.tour-step-background {
  border-radius: 0.3rem !important;
  background: inherit !important;
}
.popover.left > .arrow {
  margin-left: 1.3rem !important;
}
button.btn.btn-danger.btn-sm.btn-style.popover-next-button {
  border-radius: 0.3rem;
}
#file-manager-tour {
  background: var(--color-surface);
}

.darkmode #file-manager-tour {
  background: var(--light-black-v2) !important;
}
.tourBtn {
  opacity: 0.4 !important;
}

button.submitButtonGlobal.m-t-25px.middleEmtyCta.spotlight.tour-contact-empty-tour-element {
  border: none !important;
}
.middleEmtyCta
  .submitButtonGlobal.m-t-25px.spotlight.tour-contact-empty-tour-element.tour-contact-empty-tour-0-element.tour-step-element-reflex {
  background-color: var(--red) !important;
  border-radius: 0.3rem !important;
}
.middleEmtyCta
  .submitButtonGlobal.m-t-25px.spotlight.tour-create-group-tour-element.tour-create-group-tour-1-element.tour-step-element-reflex {
  background-color: var(--red) !important;
  border-radius: 0.3rem !important;
}

.middleEmtyCta{
  display: flex;
  justify-content: center;
}

#group-discussion .display-default-icon {
  max-width: 1.9rem;
  max-height: 1.9rem;
}
.driveDropDownFile {
  position: relative;
}
.driveDropDownFile .calendar-name {
  width: 100% !important;
}
.driveDropDownFile .uploadViewDropDown ul {
  width: auto;
  list-style: none;
  min-width: 10rem;
  top: 2.5rem;
  left: 0;
}

.driveDropDownFile .checkUploadIcons {
  margin-right: 0.5rem;
  width: 1.5rem !important;
  height: 1.5rem !important;
  float: left;
}
.driveDropDownFile .uploadView span img {
  width: inherit;
}
.driveDropDownFile .uploadView span {
  font-size: inherit;
  color: inherit !important;
  font-weight: inherit;
  cursor: pointer;
}
.uploadView {
  position: relative;
}

.uploadViewDropDown li {
  font-size: var(--font-size-15) !important;
  color: var(--brown);
}

.uploadViewDropDown ul {
  height: inherit;
  padding: 0px;
  margin-right: 0px;
  margin-top: 0;
  position: absolute;
  top: 5.4rem;
  right: -0.3rem;
  max-width: 10.5rem;
  text-align: left;
  box-shadow: 0 0.4rem 0.9rem 0.1rem rgb(from var(--color-text-primary) r g b / 34%);
  z-index: 99999;
  background: no-repeat;
  width: 100%;

}

.uploadViewDropDown ul li {
  background: var(--white);
  font-weight: 500;
  font-size: var(--font-size-15);
  cursor: pointer;
  padding: 1rem 1rem !important;
  text-align: right;
}
.uploadViewDropDown ul li:hover {
  background-color: var(--dark-slate-gray) !important;
}
.singleEmoji {
  font-size: var(--font-size-15) !important;
  line-height: unset !important;
  text-align: center;
}
.emoji {
  font-size: var(--font-size-21) !important;
}
.teamList {
  display: flex;
  align-items: baseline;
}
.teamList .senderName {
  margin-right: 0.5rem;
}
.iconsGroups .display-default-cancle {
  width: 100%;
  max-width: 1.3rem;
  max-height: 1.3rem;
}
.commonJoinBtn {
  width: 100%;
  background: var(--color-brand) !important;
  font-weight: bold;
  text-align: center !important;
  color: var(--white) !important;
  border-radius: 0.2rem !important;
  padding: 0.5rem 1.5rem !important;
  font-size: var(--font-size-15) !important;
  font-stretch: normal !important;
  font-style: normal !important;
  line-height: normal !important;
  border: none !important;
  max-width: max-content;
  min-height: 2.8rem;
  height: auto !important;
  border-radius: 0.4rem !important;
}
.commonJoinBtn:active {
  transform: inherit !important;
}
button.myMeetingJoinBtn:active {
  transform: inherit !important;
}
.topPosition {
  bottom: 2.6rem !important;
}
.notAllowed {
  cursor: not-allowed;
  opacity: 0.3;
}
.clickAttrNone {
  pointer-events: none;
}
[contenteditable] {
  -webkit-user-select: text;
  user-select: text;
}
.network-cancle img {
  width: 100%;
  width: 3rem !important;
  max-width: 2.2rem !important;
}
.iconGroupsCalender {
  max-width: 2rem !important;
  max-height: 2rem !important;
}
.attachmentScroll {
  height: 23rem;
  overflow-y: auto;
}

.message-tabe .gifPopupPanel {
  left: 35rem !important;
  bottom: 10rem;
}

span#darkModeIcon img {
  width: 100%;
}
.previewDowlaodColum .previewDownloadFile img {
  width: 1.5rem;
  height: 100%;
  max-height: 1.6rem;
  margin-right: 1.4rem;
  position: relative;
  top: -0.1rem;
}
.call-status-wrap {
  overflow-y: auto;
  max-height: 20rem;
  margin-bottom: 1rem;
  padding-top: 2%;
}

.cl-li {
  display: flex;
  padding: 1.1rem 0rem 0.9rem;
  padding-left: 1.5rem;
  flex-wrap: nowrap;
  border-bottom: solid 0.1rem var(--gray);
}

.cl-li-name {
  width: 100%;
}

.cl-liImg {
  height: 4.3rem;
  width: 4.3rem;
  border-radius: 0.5rem;
  padding: 0.1rem;
  margin: 0rem !important;
}
.widthUnset {
  width: unset !important;
}
.create-dynamic-user-icon {
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--color-info);
  color: var(--color-text-inverse);
  font-size: var(--font-size-15);
  text-align: center;
  border-radius: 50%;
  display: inline-block;
}
#googleDriveTab .fileHeaderName,
#googleDriveTab .calendar-info,
#oneDriveTab .fileHeaderName,
#oneDriveTab .calendar-info {
  width: inherit;
}
#googleDriveTab .fileHeaderShare,
#googleDriveTab .calendar-name,
#oneDriveTab .fileHeaderShare,
#oneDriveTab .calendar-name {
  width: 5%;
}
#googleDriveTab .form-check-input,
#oneDriveTab .form-check-input {
  width: 2rem;
  height: 2rem;
}
#documentTab .fileUnCheckIcon,
#documentTab .fileCheckIcon,
#audioTab .fileUnCheckIcon,
#audioTab .fileCheckIcon,
#linkTab .fileUnCheckIcon,
#linkTab .fileCheckIcon,
#googleDriveTab .fileUnCheckIcon,
#googleDriveTab .fileCheckIcon,
#oneDriveTab .fileUnCheckIcon,
#oneDriveTab .fileCheckIcon {
  position: inherit;
  float: left;
  position: inherit;
}

/* googlee drive css */
.googleDriveName {
  font-weight: 500;
  font-size: var(--font-size-15);
  padding-right: 3rem;
  display: inline-block;
  padding-bottom: 1.3rem;
}
.googleDrivePermission {
  font-weight: 500;
  font-size: var(--font-size-15);
  padding-right: 3rem;
  display: inline-block;
  padding-bottom: 1.3rem;
}

/* googlee drive css */
.gooleDriveListingPopup {
  overflow: scroll;
  height: 32rem;
  padding-right: 2rem;
  padding-top: 2rem;
}

.googleDriveColum1 {
  width: 24% !important;
  max-width: 21.8%;
}

.googleDriveColum2 {
  width: 13.5% !important;
  max-width: 9.5%;
}

.googleDriveColum3 {
  width: 15.5% !important;
  max-width: 9.5%;
}

.googleDriveColum4 {
  width: 15.5% !important;
  max-width: 14%;
}

.googleDriveColum5 {
  width: 12.5% !important;
}

.googleDriveColum6 {
  width: 13.5% !important;
  max-width: 14%;
}

.googleDriveColum7 {
  width: 23.5% !important;
  max-width: 19%;
}

.calendar-info.googleItem1 {
  width: 23% !important;
  max-width: 21%;
}

.calendar-date.googleItem2 {
  width: 10.5% !important;
  max-width: 9.5%;
}

.calendar-date.googleItem3 {
  width: 13.5% !important;
  max-width: 10%;
}

.calendar-date.googleItem4 {
  width: 22.2% !important;
  max-width: 14%;
}

.calendar-date.googleItem5 {
  width: 13.5% !important;
  max-width: 13%;
}

.driveDropDownFile.googleItem6 {
  width: 13.5% !important;
}

.calendar-size.googleItem7 {
  width: 2.3% !important;
}

.calendar-date.widthUnset.googleItem8 {
  width: 13.5% !important;
}

.googleItem1 .document-name {
  display: flex;
}
.hyperlink {
  justify-content: inherit !important;
}
.googleDriveColum7CustomWidth {
  max-width: 20%;
}

.googleDriveColum1 {
  width: 24% !important;
  max-width: 21.8%;
}

.googleDriveColum2 {
  width: 13.5% !important;
  max-width: 9.5%;
}

.googleDriveColum3 {
  width: 15.5% !important;
  max-width: 9.5%;
}

.googleDriveColum4 {
  width: 15.5% !important;
  max-width: 14%;
}

.googleDriveColum5 {
  width: 12.5% !important;
}

.googleDriveColum6 {
  width: 13.5% !important;
  max-width: 14%;
}

.googleDriveColum7 {
  width: 23.5% !important;
  max-width: 19%;
}

.calendar-info.googleItem1 {
  width: 23% !important;
  max-width: 21%;
}

.calendar-date.googleItem2 {
  width: 10.5% !important;
  max-width: 9.5%;
}

.calendar-date.googleItem3 {
  width: 13.5% !important;
  max-width: 9.9%;
}

.calendar-date.googleItem4 {
  width: 22.2% !important;
  max-width: 14.3%;
}

.calendar-date.googleItem5 {
  width: 13.5% !important;
  max-width: 12%;
}

.driveDropDownFile.googleItem6 {
  width: 13.5% !important;
}

.calendar-size.googleItem7 {
  width: 2.3% !important;
}

.calendar-date.widthUnset.googleItem8 {
  width: 13.5% !important;
}

.googleItem1 .document-name {
  display: flex;
}
.hyperlink {
  justify-content: inherit !important;
}
.googleDriveColum7CustomWidth {
  max-width: 20%;
}

.googleDriveFirstItem {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}

.crmAdditionalContent p {
  font-size: var(--font-size-15);
  color: var(--black);
  font-weight: 500;
  line-height: 2.3rem;
}

.crmAdditionalContent span {
  font-size: var(--font-size-15);
  font-weight: 500;
  /* padding-top: 1.8rem;
    padding-bottom: 1.8rem; */
}

.googleDriveSecondItem {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
}

.googledrivepopuName {
  width: 50%;
  font-weight: 600;
}

.googleDriveItemPermission {
  width: 100%;
  max-width: 61%;
  font-weight: 600;
}
.peopleWithAcces {
  font-size: var(--font-size-19);
  padding-bottom: 3rem;
  padding-top: 1rem;
}

.googleDriveItemRole {
  padding-left: 4.3rem;
  font-size: var(--font-size-15);
  color: var(--brown);
}

.googleDriveDispalyName {
  font-weight: 600;
  font-size: var(--font-size-15);
  color: var(--black);
  padding-left: 1.5rem;
  display: inline-block;
}

.gooleDrivePopup {
  margin-bottom: 2.5rem;
  display: flex;
  flex-wrap: wrap;
  padding-right: 0.5rem;
}
.ownnerPopupImg {
  width: 3.2rem !important;
  height: 3.2rem;
}
span.fileExtensionDocument {
  float: inherit;
}
.sharedToName {
  width: 20%;
  max-width: 14%;
  padding-left: 0.3%;
}

.sharedtoFile {
  width: 21%;
  max-width: 13%;
  padding-left: 2%;
}

.sharedtoSize {
  width: 30%;
  max-width: 19%;
  padding-left: 4.5%;
}
.linksToName {
  width: 30%;
  max-width: 18.5%;
}

.linksToInfo {
  width: 30%;
  max-width: 28.3%;
}

.linksToSize {
  width: 30%;
  max-width: 20%;
  padding-left: 0.2%;
}

.linksToSizeColum {
  padding-left: 0.5%;
}
input[type="search"]::-webkit-search-suggestions {
  display: none;
}
.add_group .display-default-cancle {
  max-width: 2rem !important;
  min-height: 2rem;
  width: 100%;
}
.snackBarBtn {
  background: var(--popup) !important;
  padding: 1.8rem !important;
  border: none !important;
  word-wrap: break-word;
  width: 100%;

  font-size: var(--font-size-15) !important;
  font-weight: 500 !important;
}

.sanckBarAdd {
  width: 3.5rem;
  display: inline-block;
  text-align: center;
  margin-right: 1rem;
}

.sanckBarAdd img {
  width: 100%;
  max-width: 2rem;
}

.snackBarViewBtn {
  cursor: pointer;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-inverse);
  background: rgb(from var(--color-surface) r g b / 20%);
  border-radius: 0.4rem;
  padding: 0.3rem 1rem;
  margin-left: 1rem;
  white-space: nowrap;
}

.section-snack-bar {
  position: absolute;
  left: 1.3%;
  z-index: 999;
  bottom: 4%;
}

.snackBarButtonSection {
  padding: 0 !important;
  margin: 0 !important;
}

.teamEditDropDownForTeam,
.teamEditDropDownForGroup {
  width: 21rem;
}

.teamEditDropDownForTeam li,
.teamEditDropDownForGroup li {
  display: flex;
  align-items: center;
  white-space: normal;
  word-break: break-word;
}

.teamEditDropDownForTeam li .editremoveIcon,
.teamEditDropDownForGroup li .editremoveIcon {
  flex-shrink: 0;
}

/* crm */

/* Shared timezone search field: the icon is an inline SVG, not a background image. */
.timezone-search-field {
  display: flex;
  align-items: center;
  width: 100%;
  color: var(--color-text-secondary);
  background: var(--white);
}

.timezone-search-icon {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  margin-left: 14px;
}

.timezone-search-field > input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Shared hover/focus tooltip component. */
.info-tooltip-trigger { position: relative; }

.info-tooltip-content {
  position: absolute;
  z-index: 9999;
  bottom: calc(100% + 0.8rem);
  left: 50%;
  width: 21rem;
  padding: 1.2rem;
  border-radius: 0.8rem;
  box-shadow: 0 1em 2em -0.5em rgb(from var(--color-text-primary) r g b / 0%);
  background: var(--light-slate-brown-v1);
  color: var(--color-text-inverse);
  font-size: var(--font-size-13);
  font-weight: 400;
  line-height: 1.5rem;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, 0.4rem);
  transition: opacity 0.15s ease, transform 0.15s ease;

}

.info-tooltip-content::after {
  position: absolute;
  z-index: 9998;
  bottom: -0.5rem;
  left: 50%;
  width: 1rem;
  height: 1rem;
  background: var(--light-slate-brown-v1);
  content: "";
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) rotate(45deg);
  transition: opacity 0.15s ease;
}

.info-tooltip-trigger:hover > .info-tooltip-content,
.info-tooltip-trigger:focus-visible > .info-tooltip-content,
.info-tooltip-trigger:hover > .info-tooltip-content::after,
.info-tooltip-trigger:focus-visible > .info-tooltip-content::after { opacity: 1; }

.info-tooltip-trigger:hover > .info-tooltip-content,
.info-tooltip-trigger:focus-visible > .info-tooltip-content { transform: translate(-50%, 0); }

.info-tooltip-title,
.info-tooltip-description { display: block; }
.info-tooltip-title { margin-bottom: 0.4rem; font-size: var(--font-size-15); font-weight: 600; line-height: 1.8rem; }
.info-tooltip-description { font-size: var(--font-size-13); font-weight: 400; line-height: 1.8rem; }

.info-tooltip-content[flow="down"] {
  top: calc(100% + 0.8rem);
  bottom: auto;
}

.info-tooltip-content[flow="down"]::after {
  top: -0.5rem;
  bottom: auto;
  transform: translateX(-50%) rotate(225deg);
}

.crmIntergationContainer {
  padding: 2rem 5rem;
}

.crmIntergationNavTop ul {
  list-style: none;
  display: inline-flex;
  margin-bottom: 0;
}

.crmIntergationNavTop ul li span {
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  opacity: 0.4;
  display: inline-block;
  line-height: 5rem;
}

.crmIntergationNavTop ul li {
  padding: 0 4rem 0 0rem;
  cursor: pointer;
  margin-left: 2rem;
}

.crmIntergationNavTop {
  border-bottom: 0.1rem solid var(--color-border-light);
}

.creIntergationApps {
  display: flex;
  flex-wrap: wrap;
  padding-top: 4rem;
  gap: 4rem;
}

.crmIntergationAppsColumTop {
  display: flex;
  align-items: center;
  padding: 1.3rem;
}

.crmIntergationAppsColum {
  border-radius: 0.8rem;
  border: 0.1rem solid var(--color-border-light);
  flex-basis: 34rem;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.crmIntergationAppsColum:hover,
.crmIntergationAppsColum:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 1px var(--color-brand);
}

.crmIntergationAllAppsContent {
  display: flex;
  flex-wrap: wrap;
}

.crmTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 1.9rem;
}

.crmConnect {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.2rem;
  /* 169.231% */
}

.crmIntergationAllAppsIcon {
  width: 100%;
  height: 100%;
  max-width: 7rem;
  height: 7rem;
  background: var(--dark-slate-gray);
  border-radius: 1rem;
  display: inline-block;
  margin-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crmIntergationAllAppsBottomSec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0.1rem solid var(--color-border-light);
}

.crmmoreInfo {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 2.2rem;
  padding: 1.5rem 2.5rem;
}

.crmmoreInfo img {
  margin-right: 0.5rem;
  vertical-align: sub;
  width: 100%;
  height: 100%;
  max-width: 1.8rem;
}

.crmIntergationAllAppsIcon span {
  padding: 0.5rem;
}

.crmIntergationAllAppsIcon span img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.crmchevron-right-arrow img {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}
.intergationActive {
  opacity: inherit !important;
  border-radius: 999.9rem 999.9rem 0rem 0rem;
  border-bottom: 0.2rem solid var(--color-brand);
  color: var(--color-brand) !important;
}

/* From Uiverse.io by Yaya12085 */
.switchCheckBox {
  position: relative;
  height: 1.5rem;
  width: 3rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background-color: rgb(from var(--slate-gray) r g b / 37.7%);
  transition: all 0.3s ease;
}

.switchCheckBox:checked {
  background-color: var(--color-brand);
}

.switchCheckBox::before {
  position: absolute;
  content: "";
  left: calc(1.5rem - 1.6rem);
  top: calc(1.5rem - 1.6rem);
  display: block;
  height: 1.6rem;
  width: 1.6rem;
  cursor: pointer;
  border: 1px solid rgb(from var(--color-border) r g b / 52.7%);
  border-radius: 9999px;
  background-color: var(--color-surface);
  box-shadow: 0 3px 10px rgb(from var(--color-text-primary) r g b / 32.7%);
  transition: all 0.3s ease;

}





.switchCheckBox:checked:before {
  transform: translateX(100%);
  border-color: var(--color-brand);
}

.crmmoreToggle {
  padding: 1rem 1.5rem;
  margin-top: 1.1rem;
}

.crmTicketWrap {
  display: flex;
}

.crmTicketLeftPanel {
  flex-basis: 36rem;
  border-right: 0.1rem solid var(--color-border-light);
  height: 100vh;
  padding-left: 2.8rem;
  padding-top: 2rem;
  padding-right: 2.8rem;
}

.hubSpotContentPart {
  border: 0.1rem solid var(--color-border-light);
  border-radius: 0.8rem;
  padding: 1rem;
  display: flex;
  align-items: center;
}

.hubSpotBackArrow {
  margin-bottom: 2rem;
  cursor: pointer;
}

.HubSpotTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 1.9rem;
  display: block;
  padding-bottom: 0.5rem;
}

.HubSpotPara {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.2rem;
}

.hubSpotContentImg {
  width: 100%;
  background: var(--dark-slate-gray);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  margin-right: 1.6rem;
  padding: 1.2rem 1.1rem;
  max-width: 6rem;
  max-height: 6rem;
}

.SalesforceLogo {
  padding: 0 !important;
}

.SalesforceLogo img {
  width: 100% !important;
}

.hubSpotContentImg img {
  height: 4.8rem;
  width: 4.8rem;
  max-width: 100%;
  max-height: 100%;
}

.detailBorderLine {
  border-bottom: solid 2px var(--dark-white);
  margin-top: 5rem;
}

.hubspotMenu ul {
  list-style: none;
  padding-top: 2rem;
}

.hubspotMenu {
  position: relative;
}

.hubspotSumMenu ul {
  left: 0 !important;
  right: 0 !important;
  box-shadow: inherit !important;
  padding-top: 0 !important;

}

.hubspotSumMenu ul li {
  padding-left: 0;
}

.hubspotSumMenu ul li {
  padding-left: 0 !important;
  padding: 0px !important;
}

.hubspotMenu ul li span {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 400;
  line-height: 4.976rem;
  padding-left: 2rem;
  padding-right: 2rem;

}

.teamEditDropDownForTeam li,
.teamEditDropDownForGroup li {
  display: flex;
  align-items: center;
  white-space: normal;
  word-break: break-word;
}

.teamEditDropDownForTeam li .editremoveIcon,
.teamEditDropDownForGroup li .editremoveIcon {
  flex-shrink: 0;
}

@media (max-width: 575.98px) {
  .succesfullyHeading {
    font-size: var(--font-size-25);
  }

  .submitButtonGlobal {
    font-size: var(--font-size-25);
    height: fit-content;
  }
}

.translation-new {
  background-color: var(--dark-gray);
  height: 3.4rem;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.3rem 1rem;
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-inverse);
  line-height: 2rem;
  gap: 1rem;
  border-radius: 0.3rem;
  cursor: pointer;
}

/* .translation-new:hover {
	background-color: #EE4136;
} */

.translation-new span {
  padding-top: 0.1rem;
}

.translation-icon {
  width: 2rem;
  height: 2rem;
}

/* ====== SVG ICONS (for buttons and list items) ====== */

/* Hide the hover SVG initially for all elements */
.nav-item .hover-svg,
li .hover-svg {
  display: none;
}

/* Show the hover SVG on hover for all elements */
.nav-item:hover .normal-svg,
li:hover .normal-svg {
  display: none;
}

.nav-item:hover .hover-svg,
li:hover .hover-svg {
  display: block;
}

/* ACTIVE STATE: Keep showing the hover SVG when active/clicked */
.nav-item.active .normal-svg,
li.active .normal-svg {
  display: none;
}

.nav-item.active .hover-svg,
li.active .hover-svg {
  display: block;
}

/* Make sure SVGs take the same space */
.topbar-icon {
  width: 2.4rem;
  height: 2.4rem;
}

/* Cursor pointer for clickable elements */

/* crm */

.crmIntergationContainer {
  padding: 2rem 5rem;
}

.crmIntergationContainer:has(#crmIntegrationIframeSection:not(.hideCls)) {
  padding: 0;
}

#userPageContent:has(#crmIntegrationIframeSection:not(.hideCls)),
#userPageContent:has(#crmIntegrationIframeSection:not(.hideCls))
  .dashboard_wrap,
#userPageContent:has(#crmIntegrationIframeSection:not(.hideCls))
  #loadable_content {
  padding: 0;
  margin: 0;
  overflow: hidden;
}

.crmIntergationNavTop ul {
  list-style: none;
  display: inline-flex;
  margin-bottom: 0;
}

.crmIntergationNavTop ul li span {
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  opacity: 0.4;
  display: inline-block;
  line-height: 5rem;
}

.crmIntergationNavTop ul li {
  padding: 0 4rem 0 0rem;
  cursor: pointer;
  margin-left: 2rem;
}

.crmIntergationNavTop {
  border-bottom: 0.1rem solid var(--color-border-light);
}

.creIntergationApps {
  display: flex;
  flex-wrap: wrap;
  padding-top: 4rem;
  gap: 4rem;
}

.crmIntergationAppsColumTop {
  display: flex;
  align-items: center;
  padding: 1.3rem;
}

.crmIntergationAppsColum {
  border-radius: 0.8rem;
  border: 0.1rem solid var(--color-border-light);
  flex-basis: 34rem;
  position: relative;
}

.crmIntergationAllAppsContent {
  display: flex;
  flex-wrap: wrap;
}

.crmTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 1.9rem;
}

.crmConnect {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.2rem;
  /* 169.231% */
}

.crmIntergationAllAppsIcon {
  width: 100%;
  height: 100%;
  max-width: 7rem;
  height: 7rem;
  background: var(--dark-slate-gray);
  border-radius: 1rem;
  display: inline-block;
  margin-right: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.crmIntergationAllAppsBottomSec {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 0.1rem solid var(--color-border-light);
}

.crmmoreInfo {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 2.2rem;
  padding: 1.5rem 2.5rem;
}

.crmmoreInfo img {
  margin-right: 0.5rem;
  vertical-align: sub;
  width: 100%;
  height: 100%;
  max-width: 1.8rem;
}

.crmchevron-right-arrow img {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}
.intergationActive {
  opacity: inherit !important;
  border-radius: 999.9rem 999.9rem 0rem 0rem;
  border-bottom: 0.2rem solid var(--color-brand);
  color: var(--color-brand) !important;
}

/* From Uiverse.io by Yaya12085 */
.switchCheckBox {
  position: relative;
  height: 1.5rem;
  width: 3rem;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  border-radius: 9999px;
  background-color: rgb(from var(--slate-gray) r g b / 37.7%);
  transition: all 0.3s ease;
}

.switchCheckBox:checked {
  background-color: var(--color-brand);
}

.switchCheckBox::before {
  position: absolute;
  content: "";
  left: calc(1.5rem - 1.6rem);
  top: calc(1.5rem - 1.6rem);
  display: block;
  height: 1.6rem;
  width: 1.6rem;
  cursor: pointer;
  border: 1px solid rgb(from var(--color-border) r g b / 52.7%);
  border-radius: 9999px;
  background-color: var(--color-surface);
  box-shadow: 0 3px 10px rgb(from var(--color-text-primary) r g b / 32.7%);
  transition: all 0.3s ease;

}





.switchCheckBox:checked:before {
  transform: translateX(100%);
  border-color: var(--color-brand);
}

.crmmoreToggle {
  padding: 1rem 1.5rem;
  margin-top: 1.1rem;
}

.crmTicketWrap {
  display: flex;
}

.hubSpotContentPart {
  border: 0.1rem solid var(--color-border-light);
  border-radius: 0.8rem;
  padding: 1rem;
  display: flex;
  align-items: center;
}

.hubSpotBackArrow {
  margin-bottom: 2rem;
  cursor: pointer;
}

.HubSpotTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 1.9rem;
  display: block;
  padding-bottom: 0.5rem;
}

.HubSpotPara {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.2rem;
}

.hubSpotContentImg {
  width: 100%;
  background: var(--dark-slate-gray);
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.5rem;
  margin-right: 1.6rem;
  padding: 1.2rem 1.1rem;
  max-width: 6rem;
  max-height: 6rem;
}

.hubspotMenu ul {
  list-style: none;
  padding-top: 2rem;
}

.hubspotMenu {
  position: relative;
}

.hubspotSumMenu ul {
  left: 0 !important;
  right: 0 !important;
  box-shadow: inherit !important;
  padding-top: 0 !important;

}

.hubspotSumMenu ul li {
  padding-left: 0;
}

.hubspotSumMenu ul li {
  padding-left: 0 !important;
  padding: 0px !important;
}

.hubspotMenu ul li span {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 400;
  line-height: 4.976rem;
  padding-left: 2rem;
  padding-right: 2rem;

}

.outerMenuSublist > ul > li:hover {
  background-color: var(--color-background);
}

.asanaProjectListParent ul li:hover {
  background-color: var(--color-background);
}

.hubSpotActive {
  background: var(--color-background);
}

.hubSpotActiveParent {
  background: var(--color-background);
}

.hubspotMenu ul li {
  cursor: pointer;
  margin-bottom: 0.5rem;
  margin-top: 0.5rem;
}

.hubSpotActive > span:first-child {
  font-weight: 600 !important;
}

.project-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.crmticketingHeader_container {
  display: flex;
  flex-direction: column;
  padding: 3rem 0;
  gap: 2.6rem;
}

.crmTicketHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 3rem;
}

.crmTicketHeaderLeft {
  color: var(--color-text-primary);
  text-align: center;
  font-size: var(--font-size-23);
  font-style: normal;
  font-weight: 500;
  line-height: 2rem;
  padding-left: 2rem;
  position: relative;
}

.crmTicketList {
  height: calc(100vh - 7.7rem);
  flex: 1;
}

.crmTicketListingHeader {
  display: flex;
  padding-top: 4rem !important;
  flex-wrap: nowrap;
  padding: 1.6rem 0;
  padding-left: 4rem !important;
}

/* When scrollbar appears, both header and content should compensate */

.has-scrollbar > .salesForceSelectedPanelHeader {
  padding-right: 7px;
}

.ticketName {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;

  width: calc(100% / 3);
}

.ticketId {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;

  width: calc(100% / 3);
}

.ticketPriority {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;

  width: 100%;
  max-width: 35rem;
}

.ticketCreatedDate {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;

  width: calc(100% / 3);
}

.crmTicketListingWrap {
  display: flex;
  flex-wrap: wrap;
  padding: 1.6rem 0;
  border-bottom: 0.1rem solid var(--color-border-light);
  padding-left: 4rem;
}

.crmTicketListingWrap:hover {
  background-color: var(--color-background);
  cursor: pointer;
}

.ticketNameListing {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  width: calc(100% / 3);

  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-right: 8rem;
}

.ticketIdListing {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  width: calc(100% / 3);
}

.ticketCreatedDateListing {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  width: calc(100% / 3);
}

.ticketCreatedMoreListing {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
}

.crmTicketListingItems {
  height: 100%;
  max-height: calc(100vh - 24rem);
  overflow: auto;
}

.CrmInSearchBar {
  height: 4.2rem;
  border-radius: 0.4rem;
  position: relative;
  z-index: 9;
  transform: translate(-50%);
  left: 50%;
  display: flex;
  flex-wrap: wrap;
  max-width: 100%;
}

.CrmInSearchBarInput {
  line-height: 4.2rem;

  font-style: normal;
  font-weight: 500;
  font-size: var(--font-size-15);
  color: var(--color-text-primary);
  height: 4.2rem;
  position: relative;
  padding-left: 4rem;
  min-width: 95%;
  white-space: nowrap;
  display: inline-block;
  text-overflow: ellipsis;
  padding-right: 8%;
  background: var(--color-background) !important;
  border-radius: 0.5rem;
  overflow: hidden;
  width: 30rem;
}

.CrmInsearchIcon {
  display: block;
  background: url(../../images/icons/search-icon.svg) no-repeat center center;
  text-decoration: none;
  background-size: auto;
  position: absolute;
  top: -0.2rem;
  left: 0rem;
  width: 4rem;
  height: 4.7rem;
  z-index: 9999;
  cursor: pointer;
  background-size: 1.3rem;
}

.crmTicketListingWrap:first-child {
  border-top: 0.1rem solid var(--color-border-light);
}
.taskComplatedCta {
  border-radius: 0.4rem;
  background: var(--color-success);
  display: inline-flex;
  height: 2.8rem;
  padding: 0.5rem 0.8rem;
  align-items: center;
  gap: 0.8rem;
  flex-shrink: 0;
  color: var(--white);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  margin-left: 1rem;
}
.corporationTitleHead {
  color: var(--color-brand);
  cursor: pointer;
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 1.8rem;
}

.corporationDetails {
  display: inline-flex;
  padding: 1rem 2.9rem;
  line-height: 5rem;
  flex-wrap: wrap;
  width: 100%;
}

.corporationDetailsLeft {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 2.1rem;
  clear: both;
  flex-basis: 50%;
}

.corporationDetailsRight {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 2.1rem;
  flex-basis: 49%;

}

.corporationTitle {
  padding: 2.2rem 2.9rem;
  cursor: pointer;
}

.corporationTitle span {

}

.corporationTitleHead img {
  width: 100%;
  max-width: 2rem;
  height: 100%;
  max-height: 2rem;
}

.crmBoxClickable {
  cursor: pointer;
}

.crmMoreOption {
  display: inline-flex;
  justify-content: end;
  width: 100%;
  cursor: pointer;
  position: absolute;
  right: 2rem;
  top: 1rem;
}

.crmchevron-right-arrow {
  position: absolute;
  right: 1rem;
  border-radius: 0.6rem;
  background: var(--dark-slate-gray);
  width: 3.6rem;
  height: 3.6rem;
  text-align: center;
  line-height: 3.6rem;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.crmMoreOptionDropDown ul {
  list-style: none;
  border-radius: 0.4rem;
  background: var(--color-surface);
  box-shadow: 2px 4px 22px 0px rgb(from var(--color-text-primary) r g b / 10%);
  padding: 1rem;
  position: absolute;
  width: 100%;
  z-index: 99;
  top: 2rem;
  max-width: 25rem;
  right: -21rem;
  display: flex;
  flex-direction: column;
  gap: 6px;

}

.crmMoreOptionDropDown ul li {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 3.9rem;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

.crmMoreOptionDropDown ul li :hover{
  background-color: var(--color-surface-alt);
}

.crmMoreOptionDropDown ul li span {
  margin-right: 1rem;
}

.removeAndMore img {
  width: 100%;
  max-width: 2rem;
  height: 100%;
  max-height: 2rem;
}

.crmMoreOptionImg {
  display: none;
}

.crmIntergationAppsColum:hover .crmMoreOptionImg {
  display: block;
}

.crmTicketLeftDropDown ul {
  list-style: none;
  box-shadow: 2px 4px 22px 0px rgb(from var(--color-text-primary) r g b / 10%);
  position: absolute;
  z-index: 999;
  background: var(--white);
  right: -20rem;
  left: 90%;

}

.crmTicketDropImg img {
  width: 100%;
  max-width: 2.4rem;
  border-radius: 100%;
}

.crmTicketDropContent {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.9rem;
}

.crmTicketLeftDropDown ul li {
  padding: 1.1rem 1.2rem;
  text-align: left;
  cursor: pointer;
}

.crmTicketActiveClass {
  background: var(--dark-white);
}

.expandMoreOption img {
  width: 100%;
  cursor: pointer;
  max-width: 2.3rem;
  max-height: 2.3rem;
}

.selectWorkPlace {
  position: fixed;
  top: 0;
  bottom: 0;
  background: rgb(from var(--light-slate-brown) r g b / 61%);
  width: 100%;
  z-index: 9999;
}

span.selectWorkProfile img {
  width: 4.4rem;
  border-radius: 100%;
  height: 4.3rem;
}

.selectWorkWrap {
  background: var(--color-surface);
  width: 48rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  top: 50%;
  left: 50%;
  right: 50%;
  padding: 2.4rem;
  border-radius: 1rem;
  transform: translate(-50%, -50%);
}

.selectWrapTopHeaderTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-17);
  font-style: normal;
  font-weight: 600;
  line-height: 2.8rem;
  margin-bottom: 1rem;
}

.selectWrapTopHeaderContent {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 400;
  line-height: 2rem;
}

.selectWorkListing ul {
  list-style: none;
  padding-top: 1rem;
}

.selectWorkListing ul li {
  padding: 1rem 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.selectWorkListingContent {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.selectWorkProfile {
  display: inline-block;
  padding-right: 1rem;
}
.asanaDetail {
  width: 65rem !important;
}
.taskDetilFeatureStrip {
  padding-top: 1.3rem;
}
.taskDetilFeatureStrip ul {
  list-style: none;
  padding-left: 2rem;
}
.taskDetailHead {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-right: 4rem;
  width: 100%;
  display: inline-block;
  max-width: 15rem;
  line-height: 4rem;
}

.taskDetailSubHead {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 4rem;
  text-align: left;
  display: inline-block;
  max-width: 45rem;
  width: 100%;
}

.taskDetilFeatureStripListing ul {
  list-style: none;
  padding-left: 2rem;
}
.taskDetaildeccriptionSubTitle ul li {
  padding-left: 0;

}

.taskDetaildeccriptionSubTitle ul {
  padding-left: 0;
}

.taskDetilFeatureStripListing ul li {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.taskDetailPhaseCta {
  border-radius: 0.4rem;
  background: var(--light-slate-brown-v3);
  border: none;
  padding: 1.3rem 1.5rem;
  margin-bottom: 0.5rem;
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}
.developGreenColor {
  border-radius: 0.4rem;
  background: var(--color-success);
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  top: 0.3rem;
  margin-right: 0.5rem;
}

.developRedColor {
  border-radius: 0.4rem;
  background: var(--color-brand);
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  top: 0.3rem;
  margin-right: 0.5rem;
}

.developBlueColor {
  background: var(--color-info);
  border-radius: 0.4rem;
  display: inline-block;
  width: 1.6rem;
  height: 1.6rem;
  position: relative;
  top: 0.3rem;
  margin-right: 0.5rem;
}

.two-column-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-17);
  text-align: left;
  border: 0.1rem solid var(--color-border-light);
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.taskDetaildeccriptionSubTitle li {
  line-height: 3.8rem;
}

.taskDetaildeccriptionSubTitle ol li {
  list-style: circle;
}

.taskDetaildeccriptionSubTitle ol {
  padding-left: 2.1rem;
}

.two-column-table thead {
  background-color: var(--light-slate-gray);
}

.two-column-table th,
.two-column-table td {
  padding: 0.5rem 1rem;
  border: 0.1rem solid var(--brown);
  width: 50%;
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.8rem;

}

.two-column-table tbody tr:nth-child(even) {
  background-color: var(--color-background);
}

.two-column-table tbody tr:hover {
  background-color: var(--light-white);
}

/* Responsive Design */
@media (max-width: 600px) {
  .two-column-table thead {
    display: none;
  }
  .two-column-table tr {
    display: block;
    margin-bottom: 15px;
  }
  .two-column-table td {
    display: block;
    text-align: right;
    position: relative;
    padding-left: 50%;
  }
  .two-column-table td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 50%;
    padding-left: 15px;
    font-weight: bold;
    text-align: left;
  }
}

.taskDetaildeccription {
  display: flex;
  flex-direction: column;
  padding-left: 2rem;
}

.taskDetaildeccriptionTitle {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: inline-block;
  padding-bottom: 1.3rem;
}

.taskDetaildeccriptionSubTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.6rem;
  margin-bottom: 1.3rem;
}
.taskDetailDownloadattachment {
  display: flex;
  flex-wrap: wrap;
}

.taskDetailAttachment {
  padding-left: 2rem;
  padding-top: 1rem;
}
.asanaDetail {
  padding-right: 1rem;
  height: calc(100vh - 7rem) !important;
  overflow: auto;
}

.taskDetailAttachmentTitle {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  display: inline-block;
  padding-bottom: 2.3rem;
}
.taskDetailDownloadCta {
  border-radius: 0.4rem;
  background: var(--light-slate-brown-v3);
  border: none;
  padding: 1.3rem 1.5rem;
  margin-bottom: 1rem;
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  border: 0.05rem solid var(--color-border);
  margin-right: 1rem;
}
.taskDetailDownloadCta span img {
  width: 100%;
  max-width: 2rem;
  margin-right: 0.3rem;
}
.taskDetailActivityProfile img {
  width: 100%;
  max-width: 3rem;
  height: 100%;
  max-height: 3rem;
  border-radius: 100%;
}

.taskActivityDetails {
  padding-left: 2rem;
  padding-top: 2rem;
}

.taskActivityDetails ul {
  list-style: none;
}

.taskDetailBold {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 600;
  line-height: 3.3rem;
  padding-right: 0.1%;
  width: 100%;
}

.taskDetailLight {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 3rem;
  vertical-align: top;
  text-overflow: ellipsis;
  padding-left: 0.5%;
  word-break: break-word;
}

.taskDetailActivityProfile {
  display: inline-block;
  padding-right: 1rem;
}
.taskDetilProfile {
  float: left;
}
.taskActivityList {
  display: grid;
  flex-wrap: wrap;
}
.taskActivityDetails ul li {
  margin-bottom: 1rem;
}

.redesigningTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-21);
  font-style: normal;
  font-weight: 600;
  line-height: 1.976rem; /* 85.913% */

}

.crmProjectModule {
  display: flex;
  flex-direction: column;
}

.crmModuleTitel {
  color: var(--color-text-primary);

  font-size: var(--font-size-19);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 1.6rem;
}

.crmModuleDecription {
  color: var(--color-text-primary);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 400;
  line-height: 3rem; /* 200% */
}

.crmProjectRoles ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.crmProjectRoles ul li {
  display: flex;
  flex-wrap: wrap;
  width: 23%;
}

.crmProjectDetailile {
  display: inline-block;
  margin-right: 1.4rem;
}

.crmProjectDetailile img {
  width: 100%;
  max-width: 5rem;
  height: 100%;
  max-height: 5rem;
  border-radius: 100%;
  margin-right: 1rem;
}

.crmProjectActivityDetailsTitles {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.crmProjectRoles {
  display: flex;
  flex-direction: column;
  padding-top: 2rem;
}
.crmProjectActivityDetailsProfile {
  color: var(--color-text-primary);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 2.8rem;
}

.crmProjectProfileDecription {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
}

.crmTicketingListingMaterial ul {
  list-style: none;
}

.crmTicketingListingMaterial ul li {
  display: inline-flex;
  padding-right: 4rem;
}

.crmTicketingListingMaterial ul li span {
  color: var(--brown);

  font-size: var(--font-size-17);
  font-style: normal;
  font-weight: 500;
  line-height: 1.976rem; /* 116.235% */
  cursor: pointer;
}

.crmticketingHeader {
  padding-left: 5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 1rem;
}

.crmTicketingListingMaterial {
  padding-left: 5rem;
}

.crmTicketActiveNabs {
  color: var(--color-brand) !important;
  border-bottom: 0.2rem solid var(--color-brand);
}
.projectRolesTitle {
  color: var(--color-text-primary);

  font-size: var(--font-size-19);
  font-style: normal;
  font-weight: 600;
  line-height: normal;
  padding-bottom: 2rem;
}
.projectStatus {
  padding-top: 3rem;
  height: 100%;
}
.crmDetailStatus {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  padding-top: 3rem;
}
.productDetailType span {
  color: var(--color-text-primary);

  font-size: var(--font-size-17);
  font-style: normal;
  font-weight: 600;
  line-height: 1.8rem;
  cursor: pointer;
}
.productNameListing {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  width: 100%;
  max-width: 33.3%;

  padding-left: 3rem;
}

.productTicketListing {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  width: calc(100% / 3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  position: relative;
}

.productDateListing {
  color: var(--brown);

  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 500;
  line-height: 1.8rem;
  width: 100%;
  max-width: 33.3%;
}

.productTicketListingWrap {
  display: flex;
  flex-wrap: wrap;
  padding: 1.5rem 0;
  border-bottom: 0.1rem solid var(--color-border-light);
  cursor: pointer;
  padding-left: 5rem;
}
.productDetailType {
  padding-bottom: 1.6rem;
  padding-left: 5rem;
  padding-top: 1.6rem;
}
.productTicketName {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;

  width: 100%;
  max-width: 33.3%;
}

.productticketId {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;

  width: 100%;
  max-width: 33.3%;
}

.productticketCreatedDate {
  color: var(--brown);
  font-size: var(--font-size-15);
  font-style: normal;
  font-weight: 700;
  line-height: 1.7rem;

  width: 100%;
  max-width: 35rem;
}
.productTicketContainer {
  margin-bottom: 1rem;
}
.productDetailListingHeader {
  padding-top: 2rem !important;
  padding-bottom: 3.2rem !important;
  padding-left: 5rem;
}
.productTicketListingWrapItem:first-child {
  border-top: 0.1rem solid var(--color-border-light);
}
.hubPreviousBack {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}
.myataskExpand {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}
.plainingCaret img {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}
.projectNameHide {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hubPreviousBack {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}
.myataskExpand {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}
.plainingCaret img {
  width: 100%;
  max-width: 2.3rem;
  height: 100%;
  max-height: 2.3rem;
}

.additionContentCRM {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.additionContentCRM span {
  margin-top: 2rem;
  display: inline-block;
  padding-top: 0;
  line-height: 2.3rem;
}
.expandMoreOptiomImg {
  width: 100%;
  max-width: 2.3rem;
  max-height: 2.3rem;
}

.expandMoreOptiomImgRotated {
  transform: rotate(180deg);
}
.productNameListingItems {
  position: relative;
  display: inline-flex;
}

.productNameListingItems .plainingCaret {
  margin-left: -3rem;
}
.crmBulletsIcon {
  padding-right: 0.5rem;
}
.detailItemWrap {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  max-width: 33rem;
  line-height: 2.3rem;
}
.projectDetailScroll {
  height: 100%;
  overflow: auto;
  max-height: calc(100vh - 30rem);
}
.projectOverView {
  padding: 0 5rem;
  max-height: calc(100vh - 24rem);
  overflow: auto;
}

.crmProjectActivityDetails {
  display: flex;
  flex-wrap: nowrap;
}

.initials {
  display: inline-block;
  width: 36px;
  height: 36px;
  background-color: var(--color-surface-alt);
  color: var(--color-text-inverse);
  font-size: var(--font-size-15);
  text-align: center;
  line-height: 36px;
  border-radius: 50%;
  margin-right: 0.5rem;
}
.taskDetailActivity {
  display: flex;
  align-items: center;
  width: 100%;
  justify-content: start;
}
.taskDetailTime {
  text-align: right;

  font-size: var(--font-size-11);
  font-weight: 500;
  font-stretch: normal;
  font-style: normal;
  line-height: 2.82rem;
  color: var(--black);
  float: right;
}
.productTicketListingWrapItem:hover {
  background: var(--color-background);
}
.projectStatusAsana ul li a {
  color: var(--color-text-primary);
  font-weight: 500;
}

.expanded .crmTicketHeader {
  padding-right: 10px;
  margin-bottom: 10px;
}
.sharecalander {
  padding: 0.8rem 1.5rem;
  border-radius: 0.3rem;
  border: solid 0.1rem var(--dark-gray);
  outline: none;
  font-size: var(--font-size-15);
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  text-align: center;
  color: var(--white);
  margin-right: 1rem;
  background: var(--dark-gray);
  cursor: pointer;
  height: 3.7rem;
}
.sharecalander.disabled {
  background: var(--dark-gray);
  border: solid 0.1rem var(--dark-gray);
  cursor: not-allowed;
  opacity: 0.6;
}

.sharecalander.enabled {
  background: var(--red);
  border: solid 0.1rem var(--red);
  cursor: pointer;
  opacity: 1;
}
input[type="checkbox"] {
  accent-color: var(--red);
}

.crmModuleDecription.descriptionProjectOverview {
  display: block;
}

.crmModuleDecription.descriptionProjectOverview.truncated {
  overflow: hidden;
  position: relative;
  display: block;
}

.read-more-link,
.read-less-link {
  color: var(--red);
  cursor: pointer;
  text-decoration: underline;
  font-weight: 500;
}

.read-more-link {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--color-surface);
  padding-left: 10px;
}

.read-more-link:hover,
.read-less-link:hover {
  color: var(--red);
  text-decoration: none;
}

.crmModuleDecription.projectStatusAsana {
  display: block;
}

.crmModuleDecription.projectStatusAsana.truncated {
  overflow: hidden;
  position: relative;
  display: block;
}

.projectStatusAsana .read-more-link,
.projectStatusAsana .read-less-link {
  color: var(--red);
  cursor: pointer;
  text-decoration: underline;
  font-weight: 500;
}

.projectStatusAsana .read-more-link:hover,
.projectStatusAsana .read-less-link:hover {
  color: var(--red);
  text-decoration: none;
}

/* Hide members beyond 2 rows by default */
.member-hidden {
  display: none;
}

/* Expand/Collapse button styling */
.member-expand-control {
  margin-top: 10px;
  text-align: center;
  list-style: none;
}

.expand-members-btn {
  background: none;
  border: 1px solid var(--color-border-light);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: var(--font-size-15);
  color: var(--light-slate-brown-v1);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.3s ease;
}

.expand-members-btn:hover {
  background-color: var(--light-slate-brown-v3);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

.expand-icon {
  transition: transform 0.3s ease;
  font-size: var(--font-size-15);
}

/* If you have 2 members per row and want to show exactly 2 rows */
.crmProjectRoles ul {
  overflow: hidden;
}

.crmProjectRoles ul.collapsed {
  max-height: calc(
    2 * var(--member-row-height, 60px)
  ); /* Adjust based on your row height */
}

.crmProjectRoles ul.expanded {
  max-height: none;
}

.expand-text,
.collapse-text {
  font-size: var(--font-size-15);
}

.workspaceListItems {
  min-width: 25.6rem;
}

.workspaceListItems li {
  display: flex;
  align-items: center;
  padding: 0 0.5rem;
  cursor: pointer;
  gap: 0.5rem;
}

.workspaceListItems li span:first-child {
  display: block;
}

.workspaceListItems li span:last-child {
  flex: 1;
}

.crmProjectActivityDetailsProfile {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: block;
  max-width: 100%; /* or set a specific width if needed */
}

.crmProjectActivityDetails {
  flex: 1; /* if using flexbox layout */
  min-width: 0; /* allows flex item to shrink below content size */
  overflow: hidden;
}

.crmProjectActivityDetailsTitles {
  display: block;
  overflow: hidden;
  justify-content: center;
}

.blackTextColor {
  color: var(--color-text-primary) !important;
}

#salesForceCRMLoader #loading-bar-spinner.spinner {
  left: 60% !important;
}

i#mystatusIcon {
  display: flex;
}

.setting-event {
  cursor: pointer;
}

/* Notification Component - BEM Convention */

.notification {
  padding: 2rem !important;
  position: relative;
  border-radius: 4px;
  background: var(--color-surface);
  box-shadow: 0 6px 20px -5px rgb(from var(--color-text-primary) r g b / 10%) !important;
  overflow: hidden;
  transform: translateX(calc(100% + 30px));
  opacity: 0;
  transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);

}

.notification--active {
  transform: translateX(0%);
  opacity: 1;
  animation: slideInRight 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35) forwards;
}

.notification__team-name {
  font-size: var(--font-size-15);
  margin: 0;
}

.notification--hiding {
  animation: slideOutRight 0.3s ease-in forwards;
}

.notification__content {
  display: flex;
  align-items: center;
  width: 100%;
}

.notification__message {
  display: flex;
  flex-direction: column;
  width: 100%;
  flex: 1;
  gap: 0.6rem;
}

.notification__sender-container {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.notification__sender,
.notification__topic {
  font-size: var(--font-size-15);
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1.2;
  max-width: calc(100% - 7.5rem);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0 !important;
}

.new-toast-styling {
  font-size: var(--font-size-15) !important;
  font-weight: 600 !important;
  color: var(--color-text-primary) !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}

.new-toast-truncate {
  max-width: 100% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notification__topic-sender {
  font-size: var(--font-size-15);
  display: flex;
  align-items: center;
}

.notification__count {
  border-radius: 2px;
  background-color: var(--red);
  text-align: center;
  color: var(--white);
  padding: 1px 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: var(--font-size-13);
  font-weight: 500;
  line-height: normal;
}

.notification__bodyone {
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--light-slate-brown-v1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.notification__body {
  font-size: var(--font-size-15);
  font-weight: 400;
  color: var(--light-slate-brown-v1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-left: 0.5rem;
}

.team-group_body {
  max-width: 22rem;
  display: inline-block;
  background-color: var(--color-brand);
}

.notification__close {
  position: absolute !important;
  top: 1rem;
  right: 1.5rem;
  padding: 0.5rem;
  cursor: pointer;
  opacity: 0.7;
  background: none;
  border: none;
  font-size: var(--font-size-15);
  color: var(--color-text-secondary);
  transition: opacity 0.2s ease;
}

.notification__close:hover {
  opacity: 1;
}

.notification__progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: transparent;
}

/* Pseudo-element for progress bar fill */
.notification__progress::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  height: 100%;
  width: 100%;
  background-color: var(--color-brand);
  transition: right 0.1s linear;
}

.notification__progress--active::before {
  animation: notification-progress 3s linear forwards;
}

/* Animation for progress bar */
@keyframes notification-progress {
  100% {
    right: 100%;
  }
}

.notification:hover .notification__progress--active::before {
  animation-play-state: paused;
}

/* Responsive design for smaller screens */
@media (max-width: 768px) {
  .notification {
    top: 15px;
    right: 15px;
    left: 15px;
    max-width: none;
    min-width: auto;
    padding: 15px 30px 15px 20px;
  }

  .notification__sender {
    font-size: var(--font-size-15);
  }

  .notification__body {
    font-size: var(--font-size-15);
  }
}

.notification--error {
  border-left: 4px solid var(--color-error);
}

.notification--error .notification__progress::before {
  background-color: var(--color-error);
}

.notification--success {
  border-left: 4px solid var(--color-success);
}

.notification--success .notification__progress::before {
  background-color: var(--color-success);
}

.notification--warning {
  border-left: 4px solid var(--color-warning);
}

.notification--warning .notification__progress::before {
  background-color: var(--color-warning);
}

.notification--info {
  border-left: 4px solid var(--color-info);
}

.notification--info .notification__progress::before {
  background-color: var(--color-info);
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .notification {
    border: 2px solid var(--light-brown);
  }

  .notification__sender {
    color: var(--color-text-primary);
  }

  .notification__body {
    color: var(--color-text-primary);
  }

  .notification__close {
    color: var(--color-text-primary);
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .notification {
    transition: none;
    animation: none;
  }

  .notification__progress--active::before {
    animation: none;
    right: 0;
  }
}

/* Toast entrance and exit animations */
@keyframes slideInRight {
  0% {
    transform: translateX(calc(100% + 30px));
    opacity: 0;
  }
  100% {
    transform: translateX(0%);
    opacity: 1;
  }
}

@keyframes slideOutRight {
  0% {
    transform: translateX(0%);
    opacity: 1;
  }
  100% {
    transform: translateX(calc(100% + 30px));
    opacity: 0;
  }
}

/* Vendor prefixes for broader compatibility */
@-webkit-keyframes slideInRight {
  0% {
    -webkit-transform: translateX(calc(100% + 30px));
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
}

@-webkit-keyframes slideOutRight {
  0% {
    -webkit-transform: translateX(0%);
    opacity: 1;
  }
  100% {
    -webkit-transform: translateX(calc(100% + 30px));
    opacity: 0;
  }
}

.countMentionSpan {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0.4rem;
}

.modal {
  background: rgb(from var(--dark-black) r g b / 80%);
}

/* ── Empty state CTA: "Add" ── */
.cm-add-groups-cta {
  display: inline-block;
  margin-top: 1.2rem;
  padding: 0.7rem 1.8rem;
  background: var(--dark-gray);
  color: var(--color-text-inverse);
  border: 1.5px solid var(--dark-gray);
  border-radius: 2px;
  font-size: var(--font-size-15);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
  pointer-events: auto;
}

.cm-add-groups-cta:hover {
  background: var(--color-brand);
  border-color: var(--color-brand);
  color: var(--color-text-inverse);
}

#shareInviteLink{
    margin-right: 1rem;
    /* border: 0.2rem solid var(--black); */
}

.user-profile-card_container {
    position: relative;
    display: inline-block;
}

.user-profile-card {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background-color: #fff;
    box-shadow: 0 1.2rem 3.2rem -0.4rem rgba(0, 0, 0, 0.25),
                0 0.4rem 1rem -0.2rem rgba(0, 0, 0, 0.15);
    border-radius: 0.6rem;
    border: 1px solid #e5e5e5;
    width: 35rem;
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
    transition: height 0.22s ease-out,
                opacity 0.2s ease-out,
                visibility 0s linear 0.22s;
}

.user-profile-card_container.is-open .user-profile-card {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition: height 0.22s ease-out,
                opacity 0.2s ease-out,
                visibility 0s linear 0s;
}

.user-profile-card_header {
    display: flex;
    justify-content: start;
    align-items: start;
    gap:1.2rem;
    padding: 2rem;
}

.user-profile-card_profile {
    width: 8rem;
    height: 8rem;
    border-radius: 0.4rem;
}

.user-profile-card_info {
    width: 100%;
}

.user-profile-card_info p {
    margin: 0 !important;
}

.user-profile-card_name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
}

.user-profile-card_job-title, .user-profile-card_company {
    font-size: 1.3rem;
}

.user-profile-card_quick-actions {
    display: flex;
    gap: 2rem;
    justify-content: center;
    align-items: center;
    padding: 1rem 2rem;
    border-bottom: 1px solid #ddd;
}

.user-profile-card_quick-actions-icons {
    width: fit-content;
}

.user-profile-card_quick-actions-icons svg {
    width: 2.4rem;
    height: 2.4rem;
    cursor: pointer;
}

.user-profile-card_body {
    padding: 2rem 0;
}

.user-profile-card_quick-message {
    display: flex;
    gap: 1rem;
    padding: 0 2rem;
}

.user-profile-card_quick-message input {
    width: 100%;
    padding: 0 0.5rem;
    font-size: 1.3rem;
    background-color: #f2f2f2;
    border: 1px solid #ddd;
    border-radius: 0.4rem;
    outline: none;
}

.user-profile-card_quick-message input:focus,
.user-profile-card_quick-message input:focus-visible,
.user-profile-card_quick-message input:hover,
.user-profile-card_quick-message input:active {
    background-color: #f2f2f2 !important;
    outline: none;
    box-shadow: none;
}

.user-profile-card_quick-message button {
    padding: 0.5rem 1rem;
    background-color: var(--red);
    border-radius: 0.4rem;
    border: none;
    color: var(--white);
    font-size: 1.3rem;
    font-weight: 500;
}

.user-profile-card_activity-status {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 2rem;
    border-bottom: 1px solid #ddd;
}

.activity_status {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.activity_status-dot {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
    background-color: #b0b0b0;
    display: inline-block;
}

.activity_status-dot.is-online      { background-color: #27ae60; }
.activity_status-dot.is-busy        { background-color: #e74c3c; }
.activity_status-dot.is-in-meeting  { background-color: #f39c12; }
.activity_status-dot.is-offline     { background-color: #b0b0b0; }

.activity_status-text {
    font-size: 1.3rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0px !important;
}

.work-hours-text {
    font-size: 1.3rem;
    color: #333;
    font-weight: 500;
    margin-bottom: 0px !important;
}

.work-hours {
    font-weight: 600;
}

.user-profile-card_network-container {
    padding: 0 2rem 2rem 2rem;
}

.user-profile-card_network-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-profile-card_network-text {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 !important;
}

.user-profile-card_network-body {
    padding: 1rem 0rem;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.user-profile-card_network-body p {
    font-size: 1.3rem;
    color: #333;
    font-weight: 500;
    margin: 0 !important;
}

.user-profile-card_network-images {
    position: relative;
    width: 6rem;
    min-width: 6rem;
    height: 6rem;
}

.user-profile-card_network-images img {
    width: 5rem;
    height: 100%;
    height: 5rem;
    border-radius: 0.4rem;
    border: 0.4rem solid #fff;
}

.user-profile-card_network-image-top {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 2rem;
    width: 2rem;
}

.user-profile-card_network-image-bottom {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 1;
    height: 2rem;
    width: 2rem;
}

.user-profile-card_network-suggestion {
    font-size: 1.3rem;
}