.modal {
  z-index: 10002 !important;
}

/* Standardized header styles - only two types allowed */
/* Headers h1-h4: 16px, regular font-style, 500 font-weight */
h1, h2, h3, h4 {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* Headers h5-h6: 14px, regular font-style, 500 font-weight */
h5, h6 {
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* Room members user name - styled as h5 */
.p_user_name {
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
}


/* Room/group name edit input - default (orange) */
.edit-input {
  width: 100%;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #E0E0E0;
  border-radius: 8px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.3s ease;
  box-sizing: border-box;
}

.edit-input:hover,
.edit-input:focus {
  border: 1px solid #f08438 !important;
  outline: none;
}

/* Room/group name edit input - internal (green) */
.chat_user_info-internal .edit-input:hover,
.chat_user_info-internal .edit-input:focus {
  border: 1px solid #288f6c !important;
  outline: none;
}

/* Modal backdrop with white background and blur effect */
.modal-backdrop {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.modal-backdrop.show {
  opacity: 1 !important;
}

/* Material-UI Dialog backdrop with white background and blur effect */
.MuiBackdrop-root {
  background-color: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.main_mark_div {
font-weight: 500 !important;
font-style: normal !important;
}

span.main_mark_div {
font-weight: 500 !important;
font-style: normal !important;
}

.h3-bold-markdown {
font-weight: 500 !important;
font-style: normal !important;
}

/* Custom focus style for form controls */
.form-control:focus {
  border-color: #f7931e !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(247, 147, 30, 0.25) !important;
}

/* Force 500 weight for markdown h3 elements */
.chat_text .h3-bold-markdown,
.chat_box_main_div .h3-bold-markdown {
font-weight: 500 !important;
font-style: normal !important;
}

/* Override any conflicting styles for markdown h3 */
.h3-bold-markdown,
span.h3-bold-markdown,
.chat_text span.h3-bold-markdown,
.chat_box_main_div span.h3-bold-markdown {
font-weight: 500 !important;
font-style: normal !important;
}

/* Target markdown component specifically */
.chat_text .markdown h3,
.chat_box_main_div .markdown h3,
.chat_text .h3-bold-markdown,
.chat_box_main_div .h3-bold-markdown {
font-weight: 500 !important;
font-style: normal !important;
}

/* Target both span and div elements */
.h3-bold-markdown,
span.h3-bold-markdown,
div.h3-bold-markdown,
.chat_text .h3-bold-markdown,
.chat_box_main_div .h3-bold-markdown {
font-weight: 500 !important;
font-style: normal !important;
}

/* Markdown header components - h1-h4 */
.markdown-header-h1-h4,
.h3-bold-markdown.markdown-header-h1-h4,
div.h3-bold-markdown.markdown-header-h1-h4,
span.markdown-header-h1-h4 {
  font-size: 16px !important;
  font-style: normal !important;
  font-weight: 500 !important;
  display: inline;
}

/* Markdown header components - h5-h6 */
.markdown-header-h5-h6,
.h3-bold-markdown.markdown-header-h5-h6,
div.h3-bold-markdown.markdown-header-h5-h6,
span.markdown-header-h5-h6 {
  font-size: 14px !important;
  font-style: normal !important;
  font-weight: 500 !important;
}

/* Markdown header with color */
.markdown-header-colored {
  color: #f08438 !important;
}

/* Header with text overflow ellipsis */
.header-ellipsis {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Header that always shows the full name (no truncation, wraps freely) */
.header-full-name {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: unset !important;
  overflow: visible !important;
  text-overflow: unset !important;
  white-space: normal !important;
  word-break: break-word !important;
}

/* Header with margin and color */
.header-margin-gray {
  margin: 0 0 10px 0 !important;
  color: #737373 !important;
}

/* Markdown ul elements */
.markdown-ul {
  font-size: 13px !important;
  margin-left: -30px !important;
}

.markdown-ul-small {
  font-size: 12px !important;
  margin-left: -30px !important;
}

.markdown-ul-medium {
  font-size: 13.5px !important;
  margin-left: -30px !important;
}

/* Header with margin bottom */
.header-margin-bottom {
  margin-bottom: 5px !important;
}

/* Header with text overflow (same as header-ellipsis but for different elements) */
.header-text-overflow {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Header with dynamic colors */
.header-color-internal {
  color: #288f6c !important;
}

.header-color-base {
  color: #f08438 !important;
}

/* Header with white space pre-wrap */
.header-pre-wrap {
  white-space: pre-wrap !important;
}

/* Header with background */
.header-bg-gray {
  background: #f7f7f7 !important;
}

/* Header with font weight and color */
.header-bold-black {
  font-weight: 500 !important;
  color: #000 !important;
}


.myImDiv .myImIm:hover {
  border: 5px solid #667681;
}

.circle_x {
  /* background-color: #f08438; */
}

.ct_d {
  border-color: #288f6c;
}

.abs_div {
  justify-content: flex-end;
}

.img_div {
  display: inline-block;
  display: inline;
  width: 50%;
  padding-right: 20px;
}

body {
  font-family: 'Work Sans', sans-serif;
  overflow: hidden !important;
  color: #737373 !important;
}

a:hover {
  text-decoration: none !important;
}

.main_nav {
  width: 65px;
  background-color: aliceblue;
  flex: 0 0 65px;
  z-index: 10;
}

.main_nav .side_nav {
  list-style: none;
  padding: 0;
  margin: 0;
}

.App {
  min-height: 100vh;
  background-size: cover;
  background-attachment: fixed;
  display: flex;
}

.innerBg {
  background-image: url('../img/main-bg.jpg');
}

.main_nav .side_nav li span img {
  height: 35px;
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 35px;
}

.main_nav .side_nav li span {
  display: block;
  text-align: center;
  position: relative;
  /*min-height: 35px;*/
}

.main_nav .side_nav li {
  display: block;
  text-align: center;
  padding: 10px 0px;
  cursor: pointer;
}

.main_nav .side_nav li span .img_active {
  display: none;
}

.main_nav .side_nav li.active_nav img.img_gray {
  display: none;
}

.main_nav .side_nav li.active_nav img.img_active {
  display: block;
}

.main-div {
  padding: 55px 10px 10px;
  display: flex;
  max-width: 420px;
  flex-wrap: wrap;
  position: relative;
  z-index: 9;
}

.w-300 {
  width: 400px;
  background-color: transparent;
  overflow: hidden;
  display: block;
  position: relative;
  z-index: 9;
}

.media-desc .media img.mr-3 {
  border-radius: 4px;
}

.media-desc .media .media-body h5 {
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 4px;
  margin-top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  /* max-width: 300px; */
  cursor: pointer;
}

.media-desc .media .media-body h6 span {
  font-style: italic;
  font-weight: 400;
}

.media-desc .media .media-body h6 {
  margin-bottom: 7px;
}

.media-desc .media .media-body h5 span,
.media-desc .media .media-body h6 span {
  color: #737373;
}

.media-desc p {
  font-size: 13px;
  line-height: 18px;
  margin-top: 10px;
}

.follow-img img {
  width: 14px;
  height: 14px;
  border-radius: 50%;
}

.date-follow p,
.date-follow span {
  font-size: 13px;
  margin: 0;
  color: #737373;
}

.date-follow span {
  padding-left: 6px;
}

.date-follow {
  margin: 5px 0px;
  padding-bottom: 3px;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
}

.no-border {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 10px;
}

.no-border-internal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: none;
  margin-bottom: 0;
  padding-bottom: 0;
  margin-top: 10px;
}


.no-border a {
  color: #737373;
  display: flex;
  align-items: center;
  font-style: italic;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.no-border a:hover {
  background-color: rgba(240, 132, 56, 0.1);
}

.no-border a:hover span {
  color: #f08438 !important;
}

.no-border-internal a {
  color: #737373;
  display: flex;
  align-items: center;
  font-style: italic;
  font-size: 13px;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.no-border-internal a:hover {
  background-color: rgba(40, 143, 108, 0.1);
}

.no-border-internal a:hover span {
  color: #288f6c !important;
}

/* Disable hover effect for user's own posts */
.no-hover-effect a:hover {
  background-color: transparent !important;
}

.no-hover-effect a:hover span {
  color: inherit !important;
}

/* Deactivated Like/Follow icons - no hover effects */
.no-hover-effect a,
.no-hover-effect a span {
  cursor: default !important;
  pointer-events: none;
}

.no-hover-effect a .material-symbols-outlined,
.no-hover-effect a:hover .material-symbols-outlined {
  color: #e0e0e0 !important;
  cursor: default !important;
}

.like_folo.no-hover-effect a:hover,
.like_folo.no-hover-effect a:hover span,
.like_folo.no-hover-effect a:hover .material-symbols-outlined {
  color: #e0e0e0 !important;
  background-color: transparent !important;
  cursor: default !important;
}

.date-follow.no-hover-effect a:hover,
.date-follow.no-hover-effect a:hover span {
  color: #e0e0e0 !important;
  background-color: transparent !important;
}

.no-border a img {
  margin-right: 5px;
}

.no-border-internal a img {
  margin-right: 5px;
}

.news-section {
  position: relative;
  padding: 0;
  background-color: #F8F8F8;
  /* background: url(../img/texture-bg.png) !important; */
  background-size: contain !important;
  background-repeat: no-repeat;
}

.news-section-border-orange {
  border-color: #f08438;
  border-top-width: 2px;
}

.news-sectionx {
  position: relative;
  padding: 0;
  background-size: contain !important;
  background-repeat: no-repeat;
}

.media-desc {
  background-color: #fff;
  padding: 10px;
  margin-bottom: 10px;
}

/*Add company*/
.map a {
  display: block;
  color: #737373;
  font-weight: 500;
  font-size: 14px;
}

.map img {
  display: block;
  width: auto;
  margin: 0 auto;
  margin-bottom: 3px;
}

.or {
  position: relative;
  padding: 10px 0px;
  margin: 10px -10px;
}

.or:before {
  content: "";
  width: 100%;
  height: 1px;
  background-color: #ddd;
  top: 10px;
  left: 0;
  position: absolute;
}

.or span {
  color: #737373;
  padding: 0px 8px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  background-color: #fff;
  max-width: fit-content;
  margin: 0 auto;
  font-size: 13px;
}

.details {
  text-align: center;
  font-size: 16px;
  color: #737373;
}

.add_company {
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-gutter: stable;
  height: 100vh;
  max-height: 100vh;
  box-sizing: border-box;
  direction: ltr;
}

/* Set max-width for edit profile page content */
.add_company .form-bottom {
  max-width: 600px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding-left: 20px;
  padding-right: 20px;
}

.add_company_from .btn.request-btn {
  margin-top: 20px;
}

.form-bottom {
  overflow-y: visible;
  overflow-x: hidden;
  box-sizing: border-box;
}

.add_company_from .form-control {
  font-style: italic;
  background: #fff !important;
  border: none;
  color: #737373;
  font-size: 14px;
  height: 38px;
}

.add_company_from .custom-select {
  font-style: italic;
  background: #f7f7f7;
  border: none;
  color: #737373;
  font-size: 14px;
  height: 38px;
}

.add_company_from select.form-control option:hover {
  box-shadow: 0 0 10px 100px #f08438 inset;
  background-color: #000;
}

.add_company_from select.form-control:focus option:hover {
  background: #f00 !important;
}

/* Button styles now standardized in globalButtonStyles.css */
/* Custom margin overrides for specific contexts */

/* Standardize all button heights to match input fields */
.btn,
button.btn,
.request-btn,
.request-btnx,
.theme-btn,
button {
  height: 38px !important;
  box-sizing: border-box;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.add_company_from .form-group {
  margin-bottom: 10px;
}

/* Vertical alignment for all buttons in add_company_from forms */
.add_company_from button,
.add_company_from .btn,
.add_company_from button.btn,
.add_company_from .request-btnx,
.add_company_from .request-btn {
  vertical-align: middle;
  display: inline-flex;
  align-items: center;
}

.request-btnx.btn-primary {
  margin: 0;
  display: inline-flex;
  /* width: fit-content; - removed to allow inline style width adjustments */
  /* Inline styles have highest specificity and will override CSS */
}

/* Allow inline width styles to override - inline styles have highest specificity */
/* If width is set via inline style, it will naturally override the CSS above */

.internal .request-btnx.btn-primary,
body:has(.main_heading-internal) .request-btnx.btn-primary,
.edit-company-container.internal .request-btnx.btn-primary,
.add_company.internal .request-btnx.btn-primary,
.internal .add_company_from .request-btnx.btn-primary {
  background-color: transparent !important;
  border: 1.5px solid #288f6c !important;
  color: #288f6c !important;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 24px !important;
  box-shadow: none !important;
  vertical-align: middle;
}

.internal .request-btnx.btn-primary:hover,
body:has(.main_heading-internal) .request-btnx.btn-primary:hover,
.edit-company-container.internal .request-btnx.btn-primary:hover,
.add_company.internal .request-btnx.btn-primary:hover,
.internal .add_company_from .request-btnx.btn-primary:hover {
  background-color: #288f6c !important;
  border-color: #288f6c !important;
  color: #fff !important;
  box-shadow: none !important;
}

.add_company_from button.request-btn.btn-primary,
.add_company_from .request-btn.btn-primary {
  background-color: transparent !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 24px !important;
  transition: all 0.3s ease;
  vertical-align: middle;
}

.add_company_from button.request-btn.btn-primary:hover,
.add_company_from .request-btn.btn-primary:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
}

.add_company_from button.request-btn.btn-primary:active,
.add_company_from .request-btn.btn-primary:active {
  background-color: #d66b20 !important;
  border-color: #d66b20 !important;
  color: #fff !important;
}

.theme-btn.btn-primary,
.theme-btn.btn.btn-primary,
button.theme-btn.btn-primary {
  background-color: #fff !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px;
  font-weight: 500;
  padding: 8px 20px !important;
  transition: all 0.3s ease;
  font-size: 13px;
}

.theme-btn.btn-primary:hover,
.theme-btn.btn.btn-primary:hover,
button.theme-btn.btn-primary:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
}

.theme-btn.btn-primary:active,
.theme-btn.btn.btn-primary:active,
button.theme-btn.btn-primary:active {
  background-color: #d66b20 !important;
  border-color: #d66b20 !important;
  color: #fff !important;
}

/* Internal project input - green outline for internal sections */
.add_company_from .internal-project-input.form-control,
.internal-project-input.form-control {
  border: 1px solid #f0efed !important;
  transition: all 0.3s ease;
}

.add_company_from .internal-project-input.form-control:hover,
.internal-project-input.form-control:hover {
  border: 1px solid #288f6c !important;
}

.add_company_from .internal-project-input.form-control:focus,
.internal-project-input.form-control:focus {
  border: 1px solid #288f6c !important;
  box-shadow: none !important;
  outline: none !important;
}

.itemdiv:hover {
  background-color: #f08438;
  color: white;
}

/*profile*/
.user_profile {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user_seeting_icon.btn-primary,
.user_seeting_icon.btn-primary:hover,
.show>.user_seeting_icon.btn-primary.dropdown-toggle,
.user_seeting_icon.btn-primary:focus {
  background: transparent;
  border: none;
  padding: 0;
  outline: none;
  box-shadow: none;
}

.user_seeting_icon.btn-primary:after {
  display: none;
}

.follow_item h3 {
  color: #f08438;
  margin-bottom: 0;
}

.follow_item_internal h3 {
  color: #288f6c;
  margin-bottom: 0;
}

.follow_item p {
  margin-bottom: 0;
  font-size: 13px;
  font-style: italic;
  color: #737373;
  line-height: 12px;
}

.follow_item_internal p {
  margin-bottom: 0;
  font-size: 13px;
  font-style: italic;
  color: #737373;
  line-height: 12px;
}

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

.follow_item {
  flex: 0 0 50%;
  max-width: 50%;
  margin-bottom: 6px;
}

.follow_item_internal {
  flex: 0 0 50%;
  max-width: 50%;
  margin-bottom: 6px;
}

.profile_name h5 {
  margin-bottom: 5px;
  font-weight: 500 !important;
}

.profile_name p {
  margin-bottom: 0;
  font-size: 13px;
  color: #737373 !important;
  font-weight: normal !important;
  font-style: normal !important;
}

.profile_name h3 {
  font-weight: normal !important;
}

.profile-flied {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

.icon_right a {
  display: block;
}

.font-orange h5 {
  color: #737373;
  font-size: 14px;
  font-weight: 500;
}

.article {
  background-color: #f0efed;
  padding: 10px 0px;
}

.article .profile-flied {
  margin-top: 0;
}


.article-slider .media-desc {
  border-bottom: none;
  margin-bottom: 0;
  padding-bottom: 0;
}

.article-slider .media-desc .media .media-body h5 {
  line-height: 18px;
  flex: 0 0 76%;
  margin-bottom: 3px;
  margin-top: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
}

.article-slider .carousel-indicators {
  display: none;
}

.company_services {
  background-color: #fff;
  margin-left: -10px;
  margin-right: -10px;
  margin-top: 20px;
  margin-bottom: 20px;
}

.company_services.kjuup-pilot-container {
  padding-left: 20px !important;
  padding-right: 20px !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 0 !important;
  margin-right: 0 !important;
  background-color: #f0efed !important;
  border: none !important;
  border-radius: 0 !important;
}

.company_services.kjuup-pilot-container .MuiSvgIcon-root {
  background: transparent !important;
  backdrop-filter: none !important;
}

.company_services.leave_company,
.company_services.leave_company-internal {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 10px;
  padding-bottom: 10px;
  padding-left: 20px;
  padding-right: 20px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.company_services h5 {
  color: #737373;
  margin-bottom: 15px;
}

.company_services p {
  color: #737373;
  /* border-bottom: 0.3px solid #e0e0e0; */
  font-size: 13px;
  line-height: 16px;
  margin-bottom: 0px;
  padding-right: 10px;
  /* padding-bottom: 10px; */
  padding-top: 0px;
  /* margin-left: -10px;
  margin-right: -10px; */
}

.website {
  display: flex;
  flex-wrap: wrap;
}

.website .details-company {
  margin-left: 15px;
  width: calc(100% - 45px);
}

.website .details-company h5 {
  margin-bottom: 0;
  margin-right: -10px;
  padding-bottom: 3px;
  border-bottom: 1px solid #e0e0e0;
}

.website .details-company p {
  border: none;
  margin-left: 0;
}

.website .website_img {
  flex: 0 0 28px;
  position: relative;
}

/* Hide scrollbar for details-company */
.details-company {
  overflow-y: auto;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
  background: transparent !important;
}

.details-company::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.heading {
  margin-bottom: 0px;
  background: #f0efed;
  border-bottom: 1px solid #ddd;
  position: relative;
}

/* Remove grey background and borders from heading in add_company context */
.add_company > .heading {
  background: #fff;
  border: none;
}

.heading.bg_white {
  background: #f0efed;
}

.heading h2 {
  margin-bottom: 0;
  color: #737373;
  padding: 20px 0px 20px 30px;
  background-color: #fff;
}

/* Clean reusable page header */
.page-header {
  display: flex;
  align-items: center;
  padding: 15px 20px;
  background-color: #fff;
  /* border-bottom: 1px solid #ddd; */
  gap: 15px;
}

.page-header .page-header-back {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.page-header .page-header-back img {
  width: 10px;
  height: auto;
}

.page-header .page-header-title {
  flex: 1;
  margin: 0;
  color: #737373;
  font-size: 18px;
  font-weight: 500;
}

.page-header .page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* Style Edit Company Details header to match Company Settings header structure */
.edit-company-container .heading.heading-white-bg {
  padding: 10px !important;
  margin-bottom: 4px !important;
  box-shadow: none !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  margin: 0 -10px !important;
}

/* Style back-link-plain to look like main_heading */
.edit-company-container .heading.heading-white-bg .back-link-plain {
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  line-height: 60px !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  border: none !important;
}

.edit-company-container .heading.heading-white-bg .back-link-plain img {
  margin: -5px 10px 0 !important;
  width: 16px !important;
  height: 16px !important;
}

/* Position h2 text next to the image */
.edit-company-container .heading.heading-white-bg h2 {
  font-size: 16px !important;
  color: #000 !important;
  font-weight: 500 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 60px !important;
  display: inline !important;
  margin-left: 0 !important;
}

.heading a {
  position: absolute;
  top: 18px;
  max-width: 15px;
  left: 10px;
}

/* .add_company {
  border-radius: 15px;
} */

.user_img a {
  width: 10px;
  display: inline-block;
  margin-right: 8px;
}

/* .company_section {
  border-radius: 15px;
} */

.company_section {
  border-left: 1px solid #e0e0e0;
}

.company_section .follow {
  display: flex;
  justify-content: center;
}

.company_section .follow .follow_item {
  flex: 0 0 100%;
  max-width: 100%;
}

.bg-purple {
  background: #fff;
  /* margin: -10px -10px 0px -10px; */
  padding: 10px;
}

.company_section.company-page-fade-in {
  margin-left: 5px;
  background-color: #f0efed;
}

.company_section .bg-purple.company-content-fade-in {
  margin: 5px;
  border-radius: 10px;
}

/* Hide scrollbar on company page scroll area */
.company-page-scroll {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.company-page-scroll::-webkit-scrollbar {
  display: none;
}

.company_section .company-page-content.company-content-fade-in {
  margin: 5px;
  border-radius: 10px;
  overflow-x: hidden;
  max-width: 100%;
  box-sizing: border-box;
}

/* Prevent tabs / main_heading from overlapping company-page-content */
.company_section .company-page-content .main_heading {
  margin-left: 0;
  margin-right: 0;
  max-width: 100%;
}

.company_section .company-page-content .company-details-tabs,
.company_section .company-page-content .company-details-tabs.MuiTabs-root {
  max-width: 100%;
  box-sizing: border-box;
}

.bg-normal {
  background: #f0efed;
}

.bg-green {
  background: #fff;
  /* margin: -10px -10px 0px -10px; */
  padding: 10px;
}

.company_section .profile_name p {
  font-style: normal;
}

.company_section .profile_name p span {
  color: #f08438;
}

.icon_right.icon-left a {
  display: inline-block;
  margin-right: 15px;
  width: 22px;
}

.middle-title {
  font-size: 14px;
  margin-bottom: 0;
  color: #737373;
  font-weight: 500;
  text-decoration: none;
}

a.middle-title:hover,
a.middle-title:focus,
a.middle-title:active {
  color: #737373;
  text-decoration: none;
}

.middle-title span {
  display: inline-block;
  max-width: 33px;
  margin-right: 20px;
  width: 100%;
}

.company_section .article {
  background-color: #f0efed;
  margin-top: 10px;
}

.profile_section .profile_name p {
  color: #000;
  font-style: normal;
}

.slider-icon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
}

.slider-icon a {
  max-width: 25px;
  display: block;
}

.slider-icon p {
  margin-bottom: 0;
  font-size: 14px;
  font-weight: 500;
}

.article-slider {
  margin-top: 10px;
}

.article-slider .media-desc .media .media-body {
  display: flex;
  justify-content: space-between;
}

.side_icon a {
  width: 18px;
  display: inline-block;
}

.article-img {
  /* margin-left: -10px;
  margin-right: -10px; */
}

.company_services p:nth-child(4) {
  border: none;
}

.company_centact .details-company div h6 {
  color: #737373;
  font-weight: 500;
  margin-bottom: 5px;
}

/* Gap between email/company divs in details-company */
.details-company > div + div {
  margin-top: 5px;
}

.media-desc .media .media-body {
  flex-wrap: wrap;
  display: flex;
  justify-content: space-between;
  align-items: self-start;
}

.side_icon {
  flex: 0 0 45px;
  text-align: right;
}

.authore_name {
  flex: 0 0 76%;
}

.article-slider .media-desc {
  padding: 0px;
}

.company_download small {
  font-size: 13px;
  line-height: 17px;
  display: block;
}

.company_download h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.upload {
  margin: 20px 0px;
}

.services_delete a {
  color: #737373;
  display: block;
  padding-top: 30px;
}

.services_delete a:hover {
  color: #f08438;
}

.services_delete a img {
  float: right;
  margin-top: 5px;
}

.radio_btn {
  text-align: right;
}

.radio_btn input {
  width: 18px;
  height: 18px;
}

.mandatory {
  color: #737373;
  font-size: 12px;
}

/*my project user*/
.bg-white-user {
  background-color: #fff;
  padding: 10px;
  border-radius: 10px;
}

.my_project_user {
  background-color: #f7f7f7;
  padding: 0;
  border: none !important;
}

.my_project_user .user_profile .user_img p {
  margin-bottom: 0;
  display: inline-block;
  margin-left: 10px;
  font-weight: 500;
  font-size: 17px;
  padding-top: 7px;
}

.details-item p {
  margin-bottom: 0;
  line-height: 16px;
  font-size: 12px;
  color: #737373;
}

.details_inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0px 3px 3px -3px #535353;
  position: relative;
  z-index: 1;
}

.details-item p span {
  font-weight: 500;
  color: #f08438;
}

.select_icon {
  margin-top: 0px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  margin-bottom: 10px;
}

.chats_user h5 {
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: #737373;
}

.chats_user {
  margin-bottom: 10px;
}

.main_nav.middle_bar {
  left: 405px;
  height: 100%;
}

.main_nav .side_nav li span span.badge {
  display: inline-block;
  min-width: 22px;
  height: 22px;
  padding: 0 6px; /* extra space for double-digit numbers */
  background: #f08438;
  color: #fff;
  position: absolute;
  right: -10px;  top: -5px;
  line-height: 22px;
  text-align: center;
  border-radius: 11px; /* half of height for pill shape */
  font-size: 12px;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px #fff;
}

.main_heading {
  font-size: 16px;
  font-weight: 500;
  margin: 0 -10px;
  line-height: 60px;
}

h3.main_heading {
  font-weight: 500;
}

.main_heading img {
  margin: -5px 10px 0;
}

/* Cancel and Continue buttons in heading - align text next to arrows */
.heading_icon .main_heading {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1 !important;
  padding-top: 20px;
}

.heading_icon .main_heading img {
  margin: 0 !important;
}

.heading_icon .main_heading span {
  line-height: 1 !important;
}

.heading_icon .main_heading .material-symbols-outlined {
  margin: 0 !important;
  vertical-align: middle !important;
  display: inline-block !important;
  cursor: pointer !important;
}

.heading_icon .main_heading.main_heading-internal {
  display: inline-flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 10px !important;
  line-height: 1 !important;
}

.heading_icon .main_heading.main_heading-internal .material-symbols-outlined {
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
}

.project_info {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  margin: 0;
  border-bottom: 1px solid #eee;
}

.project_info .project_action a {
  margin-left: 15px;
}

.Project_name {
  display: flex;
  align-items: center;
  color: #737373;
  font-size: 16px;
  font-weight: 500;
  position: relative;
}

.Project_name .message-badge {
  left: inherit;
  right: 5px;
  top: -5px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.message-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  min-width: 18px;
  height: 18px;
  padding: 0 4px; /* extra space for double-digit numbers */
  background: #f08438;
  color: #fff;
  position: absolute;
  right: -8px;  
  top: 0px;
  border-radius: 9px; /* half of height for pill shape */
  font-size: 11px;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px #fff;
}

.Project_name span {
  display: block;
  font-size: 12px;
  font-weight: 400;
}

.project_icon {
  width: 35px;
  height: 35px;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  letter-spacing: 1px;
  font-size: 16px;
  margin-right: 10px;
}

.p_name {
  line-height: 18px;
  cursor: pointer;
}

.project_action {
  display: flex;
  align-items: center;
}

.h45vh {
  height: 45vh;
}

.search {
  position: relative;
  margin: 15px 0px;
}

.search .form-group input {
  height: 35px;
  border: 1px solid #e0e0e0;
  background-color: #f0efed !important;
  font-size: 12px;
  /*padding-left: 20px;*/
}

.search .form-group input:hover {
  border: 1px solid #fff !important;
  box-shadow: none !important;
}

.search svg {
  position: absolute;
  top: 13px;
  left: 14px;
}

.search img {
  position: absolute;
  top: 13px;
  left: 14px;
  width: 16px;
}

.chat_services {
  margin-top: 0;
  background-color: #fff;
}

.chat_services .company_centact .website_img {
  flex: 0 0 40px;
  position: relative;
}

.chat_services .website .details-company {
  width: calc(100% - 65px);
  border-bottom: 1px solid #ccc;
}

.chat_services .website .details-company h5 {
  padding-right: 10px;
  margin-right: 0px;
  border-bottom: none;
  color: #737373;
  font-size: 12px;
  font-weight: 500;
}

.chat_services .website .details-company p {
  /* width: 230px; */
  color: #737373;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  line-height: 1.4;
}

.chat_services .website_img,
.chat_services .details-company {
  padding: 0;
}

/*.chat_services .company_centact:nth-of-type(odd){background-color:#fce6d7;}*/

/*filter*/
.filter .top-filter {
  background-color: #fff;
  margin-bottom: 10px;
  padding: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.filter-inner a {
  position: relative;
  display: block;
}

.filter-inner a img.filter_active {
  position: absolute;
  left: 0;
  top: 3px;
  display: none;
}

/*chat*/

.chat {
  padding: 0;
}

.chat .chats_user h5 {
  box-shadow: 0px 3px 3px -3px #535353;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  color: #000;
}

.chat .chat_services .website .details-company h5 {
  border-bottom: none;
  color: #737373;
  font-size: 12px;
  font-weight: 500;
  box-shadow: none;
  padding-bottom: 5px;
}

.chat .search {
  position: relative;
  margin: 5px 0px;
  border-bottom: 1px solid #ddd;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
}

.chat .search .form-group {
  margin-bottom: 5px;
}

.chat .search img {
  left: 25px;
}

.date {
  color: #737373;
  font-weight: normal;
  font-size: 12px;
}

.website_img {
  position: relative;
  margin-right: 0;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Ringing Join Call Button */
.ringing-join-call-button {
  background-color: #28a745; /* Green background */
  color: white; /* Text color */
  font-size: 14px; /* Button text size */
  font-weight: 500; /* Bold text */
  padding: 8px 16px; /* Padding for the button */
  border: none; /* No border */
  border-radius: 50px; /* Fully rounded button */
  cursor: pointer; /* Pointer cursor */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  position: relative; /* Needed for animation */
  animation: ringing 1.5s infinite; /* Infinite ringing animation */
  transition: background-color 0.3s ease;
}

/* Button Hover State */
.ringing-join-call-button:hover {
  background-color: #218838; /* Darker green on hover */
}

/* Ringing Animation */
@keyframes ringing {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-15deg); }
  30% { transform: rotate(15deg); }
  45% { transform: rotate(-10deg); }
  60% { transform: rotate(10deg); }
  75% { transform: rotate(-5deg); }
  100% { transform: rotate(0deg); }
}


.website_img .badge {
  display: inline-block;
  min-width: 18px;
  height: 18px;
  padding: 0 4px; /* extra space for double-digit numbers */
  background: #f08438;
  color: #fff;
  position: absolute;
  right: -8px;
  top: 0px;
  line-height: 18px;
  text-align: center;
  border-radius: 9px; /* half of height for pill shape */
  font-size: 11px;
  box-sizing: border-box;
  box-shadow: 0 0 0 1px #fff;
}

.chat_text {
  position: relative;
  padding: 0;
  /* background: url(../img/texture-bg.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat; */
}

.chat_textx {
  position: relative;
  padding: 0;
  /* background: url(../img/texture-bg.png) !important;
  background-size: contain !important;
  background-repeat: no-repeat; */
  margin-left: 20px;
  opacity: 0.7;
}

.chat_header {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  padding: 10px;
  /* box-shadow: 0px 3px 3px -3px #535353; */
  background-color: #fff;
  z-index: 10000;
  height: 60px;
}

.client_name {
  display: flex;
  align-items: center;
}

.clinet_name_text h5 {
  font-weight: 500;
  color: #737373;
  margin-bottom: 0;
}

.clinet_name_text p {
  font-size: 13px;
  color: #f08438;
  margin-bottom: 0;
}

.back_number span.badge {
  border-radius: 50%;
  display: inline-block;
  min-height: initial;
  background: #f08438;
  color: #fff;
  line-height: 15px;
  margin-left: 7px;
  margin-right: 15px;
}

.row {
  margin-right: -10px !important;
}

.chat_desc {
  height: 100vh;
  padding-top: 80px;
}

.chat_input {
  align-items: center;
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  padding: 10px;
  background: #fff;
  z-index: 100;
}

.chat_input .input_text_msg {
  margin: 0px 10px 0px;
  width: auto;
  flex: 1;
  min-width: 0;
}

.chat_input .input_text_msg .form-group {
  margin-bottom: 0;
}

.chat_input .input_text_msg .form-group input {
  height: 30px;
  border: none;
  background-color: #fff;
  font-size: 13px;
}

.customInputBox::-webkit-scrollbar {
  -moz-appearance: none !important;
  width: 0.5em;
  height: 1em;
}

.customInputBox::-webkit-scrollbar-button {
  -moz-appearance: none !important;
  background: transparent;
  scrollbar-base-color: #0f6674;
}

.customInputBox::-webkit-scrollbar-track-piece {
  -moz-appearance: none !important;
  background: transparent;
}

.customInputBox::-webkit-scrollbar-thumb {
  -moz-appearance: none !important;
  background: #f08438;
  border-radius: 10px;
}

.tab-header {
  background: #fff;
}

.tab-header .nav-tabs {
  border-bottom: 1px solid transparent;
}

.tab-header .nav-tabs .nav-item.show .nav-link,
.tab-header .nav-tabs .nav-link.active {
  position: relative;
  border-color: transparent;
}

.tab-header .nav-tabs .nav-link:focus,
.tab-header .nav-tabs .nav-link:hover {
  border-color: transparent;
}

.tab-header .nav-tabs .nav-link img.filter_active {
  display: none;
  position: absolute;
  left: 10px;
  right: 0;
  top: 10px;
}

.tab-header .nav-tabs .nav-link.active img {
  display: none;
}

.tab-header .nav-tabs .nav-link.active img.filter_active {
  display: inline-block;
}

.tab-header .nav-tabs .nav-item {
  flex: 0 0 33.333%;
  text-align: left;
}

.tab-header .nav-tabs .nav-link {
  padding: 10px;
}

.tab-header .nav-tabs .nav-item.show .nav-link.secound_tab,
.tab-header .nav-tabs .nav-link.secound_tab {
  text-align: center;
}

.tab-header .nav-tabs .nav-item.show .nav-link.third_tab,
.tab-header .nav-tabs .nav-link.third_tab {
  text-align: right;
}

.tab-header .nav-tabs .nav-link.secound_tab img.filter_active {
  width: max-content;
  margin: 0 auto;
  left: 0px;
}

.tab-header .nav-tabs .nav-link.third_tab img.filter_active {
  right: 10px;
  left: auto;
}

.bg-gray {
  background-color: #f7f7f7;
  padding: 10px;
}

.tab_news {
  margin-bottom: 0px;
}

.jjss {
  flex: 1;
  text-align: center;
}

.ntr {
  margin-top: 10;
}

.icons_filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex: 0 0 100%;
}

.search_div .search .form-group input {
  height: 35px;
}

.search_div_internal .search .form-group input {
  height: 35px;
}

.search_div .search .form-group {
  margin-bottom: 0;
}

.article_search,
.form-control :focus {
  background: #fff !important;
  border: 1px solid #f08438 !important;
}

.article_search_internal,
.form-control :focus {
  background: #fff !important;
  border: 1px solid #288f6c !important;
}

.bg-gray {
  display: flex;
  align-items: center;
  height: 45px;
}

.search_div .search {
  margin: 0px 0px;
}

.search_div .search svg {
  position: absolute;
  top: 8px;
  left: 10px;
}

.icons_div {
  /* flex: 0 0 40%; */
  display: flex;
  justify-content: space-between;
  margin-left: 10px;
}

.slide-enter,
.slide-exit {
  transition: transform 800ms cubic-bezier(0.39, 0.58, 0.57, 1);
}

.slide-enter {
  transform: translateX(-100%);
}

.slide-enter.slide-enter-active {
  transform: translateX(0%);
  z-index: 99;
  position: relative;
}

/* .slide-exit {position: absolute;top: 0; left: 0; width: 100%; transform: translateX(0%);}
.slide-exit-active {transform: translateX(-100%);}  */
.slide-exit {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
}

.slide-exit-active {
  opacity: 1;
  z-index: 98;
}

/*right-side*/
.animate_sec {
  display: inline-block;
}

.right_side_bar {
  position: relative;
  /* width: calc(100% - 486px); */
  display: flex;
  flex-wrap: wrap;
  /* max-width: calc(100% - 486px); */
}

/* External section: right sidebar background (no opacity) */
body:not(:has(.main_heading-internal)) .right_side_bar,
body:not(:has(.main_heading-internal)) .right_side_bar_main_div,
body:not(:has(.main_heading-internal)) .user_chat_history_main_div {
  background-color: #fdf2eb;
}

.main_nav.middle_bar {
  left: 0;
  height: 100%;
  position: static;
  flex: 0 0 65px;
}

.right_side_bar .middle_bar .side_nav li:nth-child(4) {
  margin-top: calc(50vh - 142px);
}

.right_content .main-div {
  padding-left: 20px;
}

.right_content {
  flex: 0 0 calc(100% - 65px);
  padding: 55px 0 0 0;
  overflow: hidden;
  position: relative;
}

.right_content .main-div {
  display: flex;
}

.right_content .main-div .w-300 {
  margin-right: 10px;
}

.profile-gray p {
  color: #737373 !important;
}

.profile-flied.profile-gray {
  margin-top: 0;
  padding: 10px 0;
}

.heading_icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 -10px;
}

.heading_icon .icons_heading a {
  margin-left: 15px;
}

.icons_heading {
  margin-right: 10px;
}

.my_project .search .form-group input {
  height: 35px;
}

.my_project .search .form-group .search img {
  top: 10px;
}

.regiter a {
  font-size: 18px;
  font-weight: 500;
  color: #f08438;
  display: block;
  text-align: center;
}

.regiter a img {
  margin-left: 15px;
}

.regiter a:hover {
  color: #737373;
}

/*company list*/

.company_list {
  background-color: #f0efed;
  padding: 0px;
  border-left: 1px solid #e0e0e0;
}

.company_header {
  /* box-shadow: 0px 3px 3px -3px #535353; */
  padding: 10px;
  margin-bottom: 4px;
}

.company_header .search {
  margin: 0;
}

.company_header .search .form-group {
  margin-bottom: 0;
}

.company_header .heading_icon {
  /*background-color: #f0efed;*/
}

.company_list_ver .bg-purple {
  margin: 0;
  border-top: none;
  border-bottom: 5px solid #fff;
}

.company_list_ver .bg-purple a {
  margin-bottom: 10px;
  display: block;
}

.company_list_ver .profile-flied {
  margin-top: 5px;
}

.company_list_ver .profile-flied .profile_name {
  margin-top: 5px;
}

.company_list_ver .profile-flied .profile_name h3,
.bg-purple .profile-flied .profile_name h3 {
  font-weight: normal !important;
}

.company_list_ver .profile-flied .profile_name p,
.bg-purple .profile-flied .profile_name p {
  font-weight: normal !important;
  font-style: normal !important;
}

/* .company_list_ver .profile-flied .profile_name p{color: #000;} */
.company_header .search input {
  padding-left: 16px;
  font-style: italic;
  height: 35px;
  background-color: #fff;
}

.company_list_ver .profile-flied .profile_name h3 a {
  margin-bottom: 0;
  color: #000;
}

/*Notification*/
.notification {
  padding: 0;
  background: #f7f7f7;
}

.notification_header {
  padding: 10px;
}

.immos-log {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.user_noti {
  border-radius: 6px;
  overflow: hidden;
  width: 40px;
}

.news_heading {
  background-color: #fff;
  box-shadow: 0px 3px 3px -3px #535353;
  font-size: 18px;
  font-weight: 500;
  padding: 6px 10px;
}

/* Scheduled publication info box */
.scheduled-publication-info {
  background-color: rgba(40, 143, 108, 0.10);
  padding: 12px;
  border-radius: 8px;
  margin-top: 15px;
  margin-bottom: 10px;
  border: 1px solid rgba(40, 143, 108, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

.earlier {
  text-align: center;
  padding: 8px;
  font-weight: 500;
  border-bottom: 1px solid #ddd;
  margin-bottom: 10px;
}

.my_post .media .media-body .authore_name h5 {
  font-weight: 500;
}

.my_post .media .media-body .authore_name h5 span {
  color: #f08438;
}

.my_post {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-bottom: none;
}

.my_post .media {
  flex: 0 0 80%;
}

.my_post .right_notification {
  flex: 0 0 20%;
}

.right_notification .dropdown button {
  color: #737373;
  text-align: right;
  display: block;
  margin-right: 0;
  width: 100%;
}

.right_notification .dropdown button span {
  display: block;
  line-height: 0;
  font-size: 12px;
  color: #737373;
}

.my_project .main_heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  font-size: 16px;
  font-weight: 500;
}

.my_project .main_heading img {
  margin: 3px 10px 0 0;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  max-width: 600px;
  margin: auto;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  font-family: 'Work Sans', sans-serif;
}

.chat-messages {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background-color: #f9f9f9;
}

.message-bubble {
  padding: 10px 15px;
  border-radius: 20px;
  margin-bottom: 10px;
  max-width: 70%;
  word-wrap: break-word;
}

.user-bubble {
  background-color: #007bff;
  color: white;
  align-self: flex-end;
}

.bot-bubble {
  background-color: #e9e9e9;
  color: black;
  align-self: flex-start;
}

.chat-input {
  display: flex;
  padding: 10px;
  border-top: 1px solid #ddd;
  background-color: #fff;
}

.chat-input input {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  margin-right: 10px;
  outline: none;
}

.chat-input button {
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 10px 15px;
  cursor: pointer;
}

.chat-input button:disabled {
  background-color: #ddd;
  cursor: not-allowed;
}

.typing-indicator {
  display: flex;
  align-items: center;
  margin-bottom: 30px;
  margin-left: 10px;
  /* margin: 10px 0; */
}

.typing-text {
  font-size: 14px;
  color: #555;
  margin-right: 10px;
}

.dot {
  width: 10px;
  height: 10px;
  background-color: #f08438;
  border-radius: 50%;
  margin: 0 2px;
  animation: bounce 1.5s infinite;
}

.dot:nth-child(2) {
  animation-delay: 0.2s;
}

.dot:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes bounce {
  0%, 80%, 100% {
    transform: scale(0);
  }
  40% {
    transform: scale(1);
  }
}


.Project_name:hover {
  color: #f08438;
  text-decoration: none;
}

.hidesmlinfo {
  height: 0;
  padding: 0;
  overflow: hidden;
  transition: all ease 0.5s;
}

.showsmlinfo {
  min-height: 108px;
  overflow: hidden;
  transition: all ease 0.5s;
}

.user_seeting img {
  cursor: pointer;
  height: 100%;
}

.register_link a {
  display: block;
  text-align: center;
  margin: 40px 0px;
  font-size: 18px;
  color: #f08438;
  font-weight: 500;
}

.term_use {
  text-align: center;
  font-size: 12px;
  line-height: 16px;
  margin: 40px 0px;
}

.styleOfDownload {
  height: 20;
  width: 20;
  background-color: #000;
}

.term_use a {
  font-weight: 500;
  color: #737373;
}

.map a:hover {
  color: #f08438;
  text-decoration: none;
}

.add_company_from .form-control {
  border: none !important;
  color: #737373 !important;
}

.add_company_from .form-control::placeholder,
.add_company_from .form-control::-webkit-input-placeholder,
.add_company_from .form-control::-moz-placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

.add_company_from .form-control:focus::placeholder,
.add_company_from .form-control:focus::-webkit-input-placeholder,
.add_company_from .form-control:focus::-moz-placeholder {
  color: #999999 !important;
  opacity: 1 !important;
}

.add_company_from .form-control:focus {
  outline: none !important;
  box-shadow: none !important;
}

h2.MuiTypography-root.MuiTypography-h6 {
  color: #737373;
}

.add_company_from .form-control:hover {
  border: none !important;
}

/* Disabled inputs should not show hover effects */
.add_company_from .form-control:disabled,
.add_company_from .form-control:disabled:hover,
.add_company_from .form-control:disabled:focus {
  border: 1px solid #ddd !important;
  background-color: #e9ecef !important;
  cursor: not-allowed !important;
  outline: none !important;
  box-shadow: none !important;
}

/* Blocked/disabled register_role field styling */
.add_company_from .select_coustom:has(.register_role[style*="background"]):hover,
.add_company_from .form-group:has(.form-control:disabled):hover {
  border-color: #ddd !important;
  outline: none !important;
  box-shadow: none !important;
}

.add_company_from .register_role[style*="background"]:hover {
  cursor: not-allowed !important;
  border-color: #ddd !important;
  outline: none !important;
}

.add_company_from .form-control:focus,
.chat_input .input_text_msg .form-group input:focus,
.search .form-group input:focus {
  outline: none !important;
  box-shadow: none !important;
  background: #fff;
  border: 1px solid #fff !important;
}

.setting_accrd {
  margin: 0 0px;
  scrollbar-gutter: stable;
}

/* Fallback: Reserve space for scrollbar to prevent layout shift */
@supports not (scrollbar-gutter: stable) {
  .setting_profile .setting_accrd {
    padding-right: 17px;
  }
  
  .setting_profile .setting_accrd:not(:hover) {
    padding-right: 17px;
  }
}

.setting_accrd .card-header {
  padding: 22px !important;
  padding-top: 22px !important;
  padding-right: 22px !important;
  padding-bottom: 22px !important;
  padding-left: 22px !important;
  margin-bottom: 0;
  background-color: #f0efed;
  border-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 14px;
  font-weight: 500;
  box-sizing: border-box !important;
  cursor: pointer !important;
}

.setting_accrd .card-header:hover,
.setting_accrd .card-header[role="button"]:hover {
  cursor: pointer !important;
}

/* Settings option cards - consistent styling */
.setting_accrd .settings-option-card {
  margin-bottom: 0 !important;
}

.setting_accrd .settings-option-card .card-header {
  padding: 16px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #737373 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #f0efed !important;
  border-bottom: 1px solid #e8e8e8 !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
}

.setting_accrd .settings-option-card .card-header span {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #737373 !important;
}

.setting_accrd .settings-option-card .card-header a img {
  position: relative !important;
  top: auto !important;
  bottom: auto !important;
  vertical-align: middle !important;
}

.setting_accrd .settings-option-card .card-body {
  padding: 16px 22px !important;
  background-color: #f0efed !important;
  border-bottom: 1px solid #e8e8e8 !important;
}

/* Remove admin rights button consistent styling */
.setting_accrd .settings-option-card .remove-admin-rights-button {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
}

.setting_accrd .settings-option-card .remove-admin-rights-button h5 {
  margin: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #737373 !important;
}

.setting_accrd .settings-option-card .remove-admin-rights-button .material-symbols-outlined {
  font-size: 20px !important;
  color: #737373 !important;
}

.setting_accrd .card-header .arrow-icon,
.setting_accrd .card-header img[src*="arrow"] {
  cursor: pointer !important;
}

.setting_accrd .card-header .arrow-icon:hover,
.setting_accrd .card-header img[src*="arrow"]:hover {
  cursor: pointer !important;
}

.setting_accrd .custom-control.custom-switch,
.setting_accrd .custom-control-input,
.setting_accrd .custom-control-label {
  cursor: pointer !important;
}

.setting_accrd .custom-control.custom-switch:hover,
.setting_accrd .custom-control-label:hover {
  cursor: pointer !important;
}

.setting_accrd .card-body {
  padding-right: 22px !important;
  padding-bottom: 22px !important;
  padding-left: 22px !important;
  background-color: #f0efed !important;
  box-sizing: border-box !important;
}

/* Remove top padding from Add/Update Email card body */
.setting_accrd .card-body:has(.add_company_from #formBasicEmail),
.setting_accrd .card-body:has(.add_company_from input[placeholder*="email address"]),
.setting_accrd .card-body:has(.add_company_from input[placeholder*="E-Mail-Adresse"]) {
  padding-top: 0 !important;
  padding: 0 22px 22px 22px !important;
}

/* Remove top padding from Language card body */
.setting_accrd .card.langu .card-body,
.setting_accrd .card-body:has(select.form-control option[value="EN"]),
.setting_accrd .card-body:has(select.form-control option[value="DE"]) {
  padding-top: 0 !important;
  padding: 0 22px 22px 22px !important;
}

/* Remove top padding from Notification Settings card body */
.setting_accrd .card-body:has(.notification-settings) {
  padding-top: 0 !important;
  padding: 0 22px 22px 22px !important;
}

/* Remove top padding from Reset PIN card body */
.setting_accrd .reset-pin-card .card-body,
.setting_accrd .reset-pin-card .card-body > div[style*="padding"] {
  padding-top: 0 !important;
}

.setting_accrd .reset-pin-card .card-body {
  padding-top: 0 !important;
  padding: 0 22px 22px 22px !important;
}

.setting_accrd .reset-pin-card .card-body > div[style*="padding"] {
  padding-top: 0 !important;
  padding: 0 22px 22px 22px !important;
}

/* Remove right and bottom padding from Leave room card body */
.setting_accrd .accordion > .leave-room-card,
.setting_accrd .leave-room-card {
  margin-right: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
}

.setting_accrd .accordion > .leave-room-card .card-body,
.setting_accrd .leave-room-card .card-body {
  padding-right: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 22px !important;
  padding-top: 0 !important;
}

/* OTP/PIN input fields - orange outline on focus */
.setting_accrd input[type="tel"][maxlength="1"],
.setting_accrd input[type="tel"][maxlength="1"]:focus,
.setting_accrd input[aria-label*="verification code"],
.setting_accrd input[aria-label*="Digit"] {
  outline: none !important;
  border: 1px solid #ddd !important;
  transition: border-color 0.2s ease !important;
}

.setting_accrd input[type="tel"][maxlength="1"]:focus,
.setting_accrd input[aria-label*="verification code"]:focus,
.setting_accrd input[aria-label*="Digit"]:focus {
  border: 1px solid #f08438 !important;
  outline: 1px solid #f08438 !important;
  outline-offset: 0 !important;
  box-shadow: none !important;
}

/* Remove box-shadow from select dropdowns in settings */
.setting_accrd select.form-control:focus,
.langu select.form-control:focus,
.setting_accrd .form-control:focus,
.card.langu .form-control:focus {
  box-shadow: none !important;
  border-color: #ddd !important;
  outline: none !important;
  -webkit-box-shadow: none !important;
}

/* Reset PIN card background */
.reset-pin-card .card-header {
  background-color: #f0efed !important;
}

.hide_accrd .acr_up {
  display: none;
}

.hide_accrd .acr_down {
  display: inline-block;
}

.active_accrdian .acr_down {
  display: none;
}

.active_accrdian .acr_up {
  display: inline-block;
}

.setting_accrd .add_company_from {
  margin-top: 0;
}

/* Settings accordion button margin override */
.setting_accrd .request-btn.btn-primary {
  margin: 15px auto;
}

.setting_accrd .close_icon {
  font-size: 24px;
  width: 24px;
  height: 24px;
}

.dashboard_short_info {
  display: flex;
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-collapse: collapse;
  color: #f78733;
  font-weight: 500;
  justify-content: space-around;
  font-size: 20px;
  align-items: flex-start;
}

.dashboard_short_info span {
  color: #000;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  padding-left: 7px;
}

.dashboard_short_info div {
  display: flex;
  border-left: 1px solid #e3e3e3;
  flex: 0 0 33.3%;
  padding: 7px;
  line-height: 18px;
  font-style: 15px;
}

.dashboard_short_info div:first-child {
  border-left: 0;
}








.dashboard_short_info-internal {
  display: flex;
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-collapse: collapse;
  color: #288f6c;
  font-weight: 500;
  justify-content: space-around;
  font-size: 20px;
  align-items: flex-start;
}

.dashboard_short_info-internal span {
  color: #000;
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  line-height: 18px;
  padding-left: 7px;
}

.dashboard_short_info-internal div {
  display: flex;
  border-left: 1px solid #e3e3e3;
  flex: 0 0 33.3%;
  padding: 7px;
  line-height: 18px;
  font-style: 15px;
}

.dashboard_short_info-internal div:first-child {
  border-left: 0;
}

.w-300.immoanimation-enter {
  display: block;
}

.w-300.immoanimation-enter-active {
  display: block;
}

.w-300.immoanimation-enter-done {
  display: block;
}

.w-300.immoanimation-exit {
  display: done;
}

.w-300.immoanimation-exit-active {
  display: block;
}

.w-300.immoanimation-exit-done {
  display: none;
}

.immoanimation-enter {
  transition: all 800ms ease;
  position: absolute;
  left: -100%;
}

.immoanimation-enter.immoanimation-enter-active {
  left: 0;
  z-index: 99;
  position: absolute;
  top: 50px;
}

.immoanimation-exit {
  transition: all 800ms ease;
  position: relative;
  top: 0;
  left: 0;
  transform: translateX(0);
}

.immoanimation-exit-active {
  z-index: 98;
}

.self_close-enter {
  left: 0;
  transition: all 800ms ease;
  top: 0;
  width: 320px;
}

.self_close-exit {
  transition: all 800ms ease;
  top: 0;
  left: 0;
  width: 0;
}

.self_close-enter.self_close-enter-active {
  z-index: 98;
  width: 0;
  z-index: 99;
}

.self_close-enter-done {
  z-index: 98;
  top: 0;
  width: 320px;
  z-index: 99;
}

.self_close-enter.self_close-enter-active .w-300 {
  position: absolute;
  right: 10px;
}

.company_profile .heading_icon .main_heading {
  line-height: 20px;
}

.company_profile .heading_icon .main_heading span {
  line-height: 20px;
  display: block;
  padding-left: 29px;
}

.company_profile .heading_icon {
  padding: 3px 0px;
}

.company_profile .main_heading img {
  margin: 2px 10px 0;
}

.company_profile .company_header .main_heading,
.company_profile .company_header .main_heading-internal {
  display: flex;
  align-items: center;
  height: 60px;
  line-height: 60px;
}

.company_profile .company_header .main_heading img,
.company_profile .company_header .main_heading-internal img {
  margin: 0 10px 0 0;
  vertical-align: middle;
}

.company_profile .dashboard_short_info {
  background: #f7f7f7;
}

.company_profile .accordion .card .collapse {
  background: #f7f7f7;
}

.company_profile .accordion .card .collapse .card-body .dashboard_short_info {
  background: #f0efed;
}

.admin-contact {
  padding: 10px;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.admin-contact:hover {
  background-color: rgba(0, 0, 0, 0.04);
}

.admin-content {
  margin-top: 10px;
}


.admin-control h4 span,
.admin-control h5 span {
  line-height: 21px;
  display: block;
  font-size: 13px;
  font-weight: 400;
  font-style: normal;
  color: #737373;
}

/* Make h4 inside admin-control look like h5 */
.admin-control h4 {
  font-size: 13px !important;
  font-weight: 500 !important;
  font-style: normal !important;
}

.admin-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-width: 0; /* Allow flex item to shrink below content size */
  flex: 1; /* Take available space */
}

.admin-control img {
  margin-right: 12px;
  border-radius: 50% !important;
  flex-shrink: 0; /* Prevent image from shrinking */
}

/* Ensure h4 with company names respects container width */
.admin-control h4.has-company-names {
  min-width: 0; /* Allow flex item to shrink */
  max-width: 100%; /* Don't exceed container */
  overflow: hidden; /* Hide overflow */
}

/* Company names styling with ellipsis */
.admin-control .company-names {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
  cursor: help; /* Show help cursor on hover to indicate tooltip */
}

.admin-contact .row {
  align-items: center;
  pointer-events: none;
}

.admin-contact .custom_checkbox {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

.admin-content h5 {
  padding-left: 10px;
}

/* The container */
.container_checkbox {
  display: inline-flex;
  position: relative;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  padding: 0;
}

/* Hide the browser's default checkbox */
.container_checkbox input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
  margin: 0;
  padding: 0;
}

/* Modern checkbox container */
.checkmark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 22px;
  width: 22px;
  background-color: #fff;
  border: 2px solid #d1d5db;
  border-radius: 6px;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  flex-shrink: 0;
}

/* Hover state - subtle elevation and border color change (default orange) */
.container_checkbox:hover input~.checkmark {
  border-color: #f08438;
  box-shadow: 0 2px 4px rgba(240, 132, 56, 0.15);
  transform: translateY(-1px);
}

/* Checked state - orange variant (default) */
.container_checkbox input:checked~.checkmark {
  background-color: #f08438;
  border-color: #f08438;
  box-shadow: 0 2px 6px rgba(240, 132, 56, 0.3);
  transform: scale(1.05);
}

/* Internal chat - Direct class approach (most reliable) */
.checkbox-internal input:checked~.checkmark,
.container_checkbox.checkbox-internal input:checked~.checkmark,
label.checkbox-internal input:checked~.checkmark {
  background-color: #288f6c !important;
  border-color: #288f6c !important;
  box-shadow: 0 2px 6px rgba(40, 143, 108, 0.3) !important;
}

.checkbox-internal:hover input~.checkmark,
.container_checkbox.checkbox-internal:hover input~.checkmark,
label.checkbox-internal:hover input~.checkmark {
  border-color: #288f6c !important;
  box-shadow: 0 2px 4px rgba(40, 143, 108, 0.15) !important;
}

.checkbox-internal:hover input:not(:checked)~.checkmark,
.container_checkbox.checkbox-internal:hover input:not(:checked)~.checkmark,
label.checkbox-internal:hover input:not(:checked)~.checkmark {
  border-color: #288f6c !important;
  background-color: #f0fdf4 !important;
}

/* Project Details - Internal checkboxes (green) */
.common_box_user_list .checkbox-internal input:checked~.checkmark,
.project-details .checkbox-internal input:checked~.checkmark,
.w-300 .checkbox-internal input:checked~.checkmark,
.common_box_user_list .container_checkbox.checkbox-internal input:checked~.checkmark,
.project-details .container_checkbox.checkbox-internal input:checked~.checkmark,
.w-300 .container_checkbox.checkbox-internal input:checked~.checkmark {
  background-color: #288f6c !important;
  border-color: #288f6c !important;
  box-shadow: 0 2px 6px rgba(40, 143, 108, 0.3) !important;
}

.common_box_user_list .checkbox-internal:hover input~.checkmark,
.project-details .checkbox-internal:hover input~.checkmark,
.w-300 .checkbox-internal:hover input~.checkmark,
.common_box_user_list .container_checkbox.checkbox-internal:hover input~.checkmark,
.project-details .container_checkbox.checkbox-internal:hover input~.checkmark,
.w-300 .container_checkbox.checkbox-internal:hover input~.checkmark {
  border-color: #288f6c !important;
  box-shadow: 0 2px 4px rgba(40, 143, 108, 0.15) !important;
}

.common_box_user_list .checkbox-internal:hover input:not(:checked)~.checkmark,
.project-details .checkbox-internal:hover input:not(:checked)~.checkmark,
.w-300 .checkbox-internal:hover input:not(:checked)~.checkmark,
.common_box_user_list .container_checkbox.checkbox-internal:hover input:not(:checked)~.checkmark,
.project-details .container_checkbox.checkbox-internal:hover input:not(:checked)~.checkmark,
.w-300 .container_checkbox.checkbox-internal:hover input:not(:checked)~.checkmark {
  border-color: #288f6c !important;
  background-color: #f0fdf4 !important;
}

/* Internal chat - Override orange with green (must come after default) */
/* Using multiple selectors to ensure we catch all contexts */
body:has(.main_heading-internal) .container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) label.container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) .checkbox-div .container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) .checkbox-div label.container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) .forward-msg .container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) .forward-checkbox .container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) .forword-chat .container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) .forword-chat label.container_checkbox input:checked~.checkmark,
body:has(.main_heading-internal) .chat-message-item .container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) label.container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .checkbox-div .container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .checkbox-div label.container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .forward-msg .container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .forward-checkbox .container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .forword-chat .container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .forword-chat label.container_checkbox input:checked~.checkmark,
.pages-project:has(.chat-input-container-internal) .chat-message-item .container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) label.container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .checkbox-div .container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .checkbox-div label.container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .forward-msg .container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .forward-checkbox .container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .forword-chat .container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .forword-chat label.container_checkbox input:checked~.checkmark,
body:has(.chat-input-container-internal) .chat-message-item .container_checkbox input:checked~.checkmark,
.chat-input-container-internal ~ * .container_checkbox input:checked~.checkmark,
.chat-input-container-internal ~ * label.container_checkbox input:checked~.checkmark,
.chat-input-container-internal ~ * .checkbox-div .container_checkbox input:checked~.checkmark {
  background-color: #288f6c !important;
  border-color: #288f6c !important;
  box-shadow: 0 2px 6px rgba(40, 143, 108, 0.3) !important;
}

/* Checkmark icon - modern design */
.checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Show and animate checkmark when checked */
.container_checkbox input:checked~.checkmark:after {
  display: block;
  transform: rotate(45deg) scale(1);
}


body:has(.main_heading-internal) .container_checkbox:hover input~.checkmark,
.pages-project:has(.chat-input-container-internal) .container_checkbox:hover input~.checkmark,
body:has(.chat-input-container-internal) .container_checkbox:hover input~.checkmark,
body:has(.main_heading-internal) .checkbox-div .container_checkbox:hover input~.checkmark,
.pages-project:has(.chat-input-container-internal) .checkbox-div .container_checkbox:hover input~.checkmark,
body:has(.chat-input-container-internal) .checkbox-div .container_checkbox:hover input~.checkmark,
body:has(.main_heading-internal) .forward-msg .container_checkbox:hover input~.checkmark,
.pages-project:has(.chat-input-container-internal) .forward-msg .container_checkbox:hover input~.checkmark,
body:has(.chat-input-container-internal) .forward-msg .container_checkbox:hover input~.checkmark {
  border-color: #288f6c !important;
  box-shadow: 0 2px 4px rgba(40, 143, 108, 0.15) !important;
}

/* Internal chat - unchecked hover state with green accent */
body:has(.main_heading-internal) .container_checkbox:hover input:not(:checked)~.checkmark,
.pages-project:has(.chat-input-container-internal) .container_checkbox:hover input:not(:checked)~.checkmark,
body:has(.chat-input-container-internal) .container_checkbox:hover input:not(:checked)~.checkmark,
body:has(.main_heading-internal) .checkbox-div .container_checkbox:hover input:not(:checked)~.checkmark,
.pages-project:has(.chat-input-container-internal) .checkbox-div .container_checkbox:hover input:not(:checked)~.checkmark,
body:has(.chat-input-container-internal) .checkbox-div .container_checkbox:hover input:not(:checked)~.checkmark,
body:has(.main_heading-internal) .forward-msg .container_checkbox:hover input:not(:checked)~.checkmark,
.pages-project:has(.chat-input-container-internal) .forward-msg .container_checkbox:hover input:not(:checked)~.checkmark,
body:has(.chat-input-container-internal) .forward-msg .container_checkbox:hover input:not(:checked)~.checkmark {
  border-color: #288f6c !important;
  background-color: #f0fdf4 !important;
}

.chats_user .search svg {
  left: 24px;
}

.company_list .company_header .form-group input:focus {
  background: #fff !important;
}

.content-capi {
  background: #f7f7f7;
  padding: 10px;
  margin-bottom: 10px;
}

.capacities_content-page h5 {
  min-height: 40px;
  display: flex;
  align-items: center;
  box-shadow: 0px 3px 3px -3px #535353;
  margin-left: -10px;
  margin-right: -10px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 15px;
  color: #000;
}

.capacities_content-page h5 img {
  margin-right: 8px;
}

.capacities_content {
  display: flex;
  align-items: flex-start;
}

.capacities_content img {
  border-radius: 4px;
  margin-right: 10px;
}

.right_capacities h4 {
  margin: 0;
  color: #f08438;
  margin-bottom: 5px;
}

.right_capacities p,
.timeframe-content p {
  color: #737373;
  margin-bottom: 0;
  font-size: 14px;
  line-height: 18px;
}

.timeframe {
  margin-top: 15px;
}

.frame-icon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 0px 0px 20px;
}

.follow a:hover p {
  color: #f08438;
}

.follow-internal a:hover p {
  color: #288f6c;
}

.following {
  padding: 0;
}

.following .main_heading {
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 0;
  display: flex !important;
  align-items: center !important;
  line-height: 1 !important;
}

.following .main_heading .material-symbols-outlined {
  vertical-align: middle !important;
  margin-right: 10px;
}

.following .my_post .media img {
  border-radius: 4px;
}

.following .my_post .media {
  flex: 0 0 100%;
}

.following .my_post {
  border-bottom: none;
}

.following .my_post .media-body .authore_name h5 {
  font-size: 13px;
  font-weight: 500;
  color: #737373;
  margin-bottom: 0;
}

.following .my_post .media-body .authore_name p {
  font-size: 13px;
  color: #737373;
  margin-bottom: 0;
  font-style: italic;
}

.follower .my_post {
  background: #fff;
}

.tab-header .nav-tabs .nav-item a {
  display: flex;
  align-items: center;
}

.tab-header .nav-tabs .nav-item a.secound_tab {
  display: block;
  text-align: center;
  padding: 8px;
}

.tab-header .nav-tabs .nav-item a.secound_tab .filter_active {
  display: none;
}

.tab-header .nav-tabs .nav-item a.third_tab {
  justify-content: flex-end;
}

.articles .post_notification .my_post a {
  display: flex;
  align-items: center;
  color: #000;
  font-weight: 500;
  font-size: 14px;
}

.articles .post_notification .my_post a img {
  margin-right: 15px;
}

.articles .post_notification .my_post a:hover {
  color: #f08438;
}

.articles .post_notification .my_post {
  padding: 15px 10px;
}

.add_article .main_heading {
  display: flex;
  align-items: center;
  background-color: #f7f7f7;
}

.add_article .main_heading img {
  margin: 0px 10px 0;
}

.article_form .form-bottom {
  padding: 0px 10px;
}

.article_form .form-bottom .form-group .text-muted {
  font-size: 13px;
  display: block;
  text-align: right;
  color: #737373 !important;
}

.article_form .add_company_from textarea.form-control {
  height: 60px;
}

/* Resizable editor container */
.resizable-editor-container {
  position: relative;
}

/* Override fixed height for resizable editor */
.resizable-editor-container .rdw-editor-wrapper {
  position: relative;
}

.resizable-editor-container .demo-editor {
  position: relative !important;
  padding-bottom: 8px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Height is controlled by inline style from React state */
}

/* Show scrollbar when content overflows */
.resizable-editor-container .demo-editor::-webkit-scrollbar {
  width: 6px !important;
  display: block !important;
}

.resizable-editor-container .demo-editor::-webkit-scrollbar-track {
  background: transparent !important;
}

.resizable-editor-container .demo-editor::-webkit-scrollbar-thumb {
  background: #ccc !important;
  border-radius: 3px !important;
}

.resizable-editor-container .demo-editor::-webkit-scrollbar-thumb:hover {
  background: #999 !important;
}

.resizable-editor-container .demo-editor {
  -ms-overflow-style: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: #ccc transparent !important;
}

/* Internal article modal footer - primary button style is handled in globalButtonStyles.css */

/* Editor resize handle - positioned at bottom of editor content area only */
.resizable-editor-container .editor-resize-handle {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  background-color: transparent;
  z-index: 1000 !important;
  transition: background-color 0.2s ease;
  pointer-events: auto !important;
  user-select: none;
  -webkit-user-select: none;
}

.editor-resize-handle:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.editor-resize-handle::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 4px;
  background-color: #ccc;
  border-radius: 2px;
  opacity: 0.5;
}

.editor-resize-handle:hover::after {
  opacity: 1;
  background-color: #999;
}

/* Hide scrollbar for article form containers when content doesn't overflow */
.article-form-scroll-container {
  scrollbar-width: thin; /* Firefox - thin scrollbar when needed */
  scrollbar-color: transparent transparent; /* Firefox - hide scrollbar track */
}

.article-form-scroll-container::-webkit-scrollbar {
  width: 8px; /* Chrome/Safari - thin scrollbar when needed */
}

.article-form-scroll-container::-webkit-scrollbar-track {
  background: transparent; /* Chrome/Safari - hide scrollbar track */
}

.article-form-scroll-container::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2); /* Chrome/Safari - subtle scrollbar thumb */
  border-radius: 4px;
}

.article-form-scroll-container::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3); /* Chrome/Safari - slightly darker on hover */
}

/* Hide scrollbar completely when content doesn't overflow (using :not(:hover) to detect) */
.article-form-scroll-container:not(:hover)::-webkit-scrollbar-thumb {
  background-color: transparent;
}

.form-icons {
  margin-bottom: 10px;
}

.form-icons a {
  margin-right: 10px;
}

.title_icon h4 {
  margin-top: 20px;
}

.button-group-3 {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Button group styles - margins only (base styles in globalButtonStyles.css) */
.button-group-3 .request-btn.btn-primary {
  margin: 20px auto 20px;
}

.add_article_personal .main_heading {
  background-color: #fff;
}

.contact_page h5 {
  margin-bottom: 3px;
  min-height: 40px;
  padding-bottom: 0;
}

.contact_page .content-capi {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.contact_page .content-capi a {
  display: flex;
  color: #737373;
  font-size: 14px;
}

.contact_page .content-capi a:hover {
  color: #f08438;
}

.contact_page .content-capi a img {
  margin-right: 10px;
}

.contact_page .search {
  position: relative;
  margin: 10px 0px;
  padding: 0px 10px;
}

.contact_page .search svg {
  left: 24px;
  position: absolute;
  top: 14px;
}

.connect_link {
  position: relative;
  text-align: center;
  padding: 10px 10px 0px;
}

.connect_link h4 {
  color: #000;
  margin-bottom: 0;
}

.connect_link p {
  color: #737373;
  font-size: 14px;
  font-style: italic;
}

.connect_link img {
  border-radius: 4px;
  margin-bottom: 10px;
}

.connection {
  text-align: left;
}

.connection a {
  font-size: 12px;
  color: #737373;
  display: flex;
  align-items: center;
  margin-bottom: 7px;
}

.connect_link .connection a img {
  border-radius: 0;
  margin: 0;
  margin-right: 10px;
}

.suggestion_p {
  background-color: #017cff;
  border-width: 2;
}

.suggestion_l {
  background-color: #000;
  border-width: 2;
}

/* Connect link button margin override */
.connect_link .request-btn.btn-primary {
  margin: 20px auto;
}

.suggestion {
  border-bottom: 1px solid #ddd;
}

.border-right {
  border-right: 1px solid #ddd;
}

.heading_suggestion {
  text-align: center;
  background: #f7f7f7;
  font-size: 16px;
  color: #000;
  padding: 15px 0px;
  border-bottom: 1px solid #ddd;
  margin-bottom: 0;
}

.connection a:hover {
  color: #f08438;
}

.cancel {
  position: absolute;
  top: 0;
  right: 8px;
  color: #737373;
  font-size: 14px;
}

.my_project_user .search svg {
  left: 14px;
}

.post_notification .my_post .media img {
  border-radius: 4px;
}

.follow a:hover p {
  color: #f08438;
}

.setting_profile {
  background-color: #f0efed !important;
  border-left: 1px solid #e0e0e0;
}

.setting_profile .company_header {
  padding: 0 10px 0;
}

.setting_accrd .accordion>.card {
  border: none;
  border-bottom: 5px solid #f0efed !important;
}

.setting_profile .heading_icon {
  margin: 0 -10px 0px;
}

.setting_profile .company_header {
  padding: 0 10px 0;
}

.setting_profile {
  background-color: #fff;
}

/* Version footer styling */
.version-footer {
  flex-shrink: 0;
  padding: 10px;
  border-top: 1px solid #e0e0e0;
}

.version-footer p {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #f08438;
}

.version-footer .version-label {
  color: grey;
}

/* .setting_accrd .accordion>.card .custom-control-input:checked~.custom-control-label::before {
  border-color: #f08438;
  background-color: #f08438;
} */

.project-checkbox .custom-control-input:checked~.custom-control-label::before {
  border-color: #f08438;
  background-color: #f08438;
}

/* Email notification toggle switch - orange when checked */
.setting_profile #custom-switchx-setting-user.custom-control-input:checked,
.setting_profile .email-notification-switch .custom-control-input:checked {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
}

.setting_profile #custom-switchx-setting-user.custom-control-input:checked ~ .custom-control-label::before,
.setting_profile .email-notification-switch .custom-control-input:checked ~ .custom-control-label::before {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
}

.setting_profile #custom-switchx-setting-user.custom-control-input:focus ~ .custom-control-label::before,
.setting_profile .email-notification-switch .custom-control-input:focus ~ .custom-control-label::before {
  border-color: #f08438 !important;
  box-shadow: 0 0 0 0.25rem rgba(240, 132, 56, 0.25) !important;
}

.setting_profile #custom-switchx-setting-user.custom-control-input:not(:checked) ~ .custom-control-label::before,
.setting_profile .email-notification-switch .custom-control-input:not(:checked) ~ .custom-control-label::before {
  background-color: #ccc !important;
  border-color: #ccc !important;
}

.project-checkbox-internal .custom-control-input:checked~.custom-control-label::before {
  border-color: #288f6c;
  background-color: #288f6c;
}

.leave_company {
  cursor: pointer;
}

.leave_company h5 {
  color: #737373;
  margin: 0;
  font-size: 16px;
  cursor: pointer;
  flex: 1;
}


.leave_company-internal {
  cursor: pointer;
}

.leave_company-internal h5 {
  color: #737373;
  margin: 0;
  cursor: pointer;
  flex: 1;
}

.leave_company svg,
.leave_company-internal svg {
  cursor: pointer;
}

.remove-admin-rights-button {
  height: 40px;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  padding-left: 20px;
  padding-right: 10px;
  background-color: #f0efed;
  gap: 10px;
}

.remove-admin-rights-button h5 {
  margin: 0;
}

.remove-admin-rights-button .material-symbols-outlined {
  cursor: pointer;
  font-size: 24px;
  width: 24px;
  height: 24px;
}

/* Location icon in project-action-btn */
.project-action-btn .material-symbols-outlined.location-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  width: 24px !important;
  height: 24px !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  vertical-align: middle !important;
}

/* Location icon hover - orange for external rooms (default) */
.project-action-btn .material-symbols-outlined.location-icon:hover {
  color: #f08438 !important;
}

/* Location icon hover - green for internal rooms */
.project-internal .project-action-btn .material-symbols-outlined.location-icon:hover {
  color: #288f6c !important;
}

/* Add circle icon in project-action-btn */
.project-action-btn .material-symbols-outlined.add-circle-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased;
  color: #737373 !important;
  width: 24px !important;
  height: 24px !important;
  transition: color 0.2s ease;
  vertical-align: middle !important;
}

/* Add circle icon hover - orange for external rooms (default) */
.project-action-btn .material-symbols-outlined.add-circle-icon:hover {
  color: #f08438 !important;
}

/* Add circle icon hover - green for internal rooms */
.project-internal .project-action-btn .material-symbols-outlined.add-circle-icon:hover {
  color: #288f6c !important;
}

.conversation_top,
.conversation_bottom {
  /* height: calc(50vh - 40px); */
  position: relative;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
}

.conversation_top .immoanimation-enter.immoanimation-enter-active,
.conversation_bottom .immoanimation-enter.immoanimation-enter-active {
  top: 0;
}

.right_side_bar .w-300 {
  border-radius: 0 0 15px 15px;
  border-top: 2px solid #f08438;
}

.w-300.right_btm_ani-enter,
.w-300.right_btm_ani-enter-active,
.w-300.right_btm_ani-enter-done {
  display: block;
  margin-left: 40px;
}

.right_btm_ani-enter {
  transition: all 800ms ease;
  position: absolute;
  left: -100%;
}

.right_btm_ani-enter.right_btm_ani-enter-active {
  left: 310px;
  z-index: 99;
  position: absolute;
  top: 0px;
}

.custom_select a {
  justify-content: space-between;
  display: flex !important;
  align-items: center;
  padding-right: 5px !important;
  font-style: italic;
  background: #f7f7f7;
  border: none;
  color: #737373;
  font-size: 14px;
  height: 38px;
  padding-left: 10px;
}

.custom_select a:hover {
  color: #f08438;
}

.custom_select .custom_option {
  width: 100%;
}

.custom_select .custom_option a:hover {
  color: #ffffff;
  background: #f08438;
}

.search img.news_t_ser {
  top: 9px;
}

.fronpanel {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  flex-direction: column;
}

.fronpanel .w-300 {
  display: block;
}

.bdr_top {
  border-top: 2px solid #f08438;
}

.custom_select {
  margin-bottom: 10px;
}

.accordion>.card.langu {
  overflow: visible;
}

.custom-control-input:focus~.custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgb(255 207 173) !important;
}

.mini_heading {
  line-height: 18px;
  font-size: 13px;
  margin-bottom: 0;
  margin-top: 10px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  max-width: 160px;
}

.services_det {
  color: #f08438;
  font-size: 13px;
  padding: 15px 0 0;
  margin: 0;
}

.user_image {
  text-align: left !important;
  padding-top: 0 !important;
  border-top: none !important;
  margin-top: 0 !important;
  display: block !important;
}


.user_image img {
  border-radius: 50%;
  width: 55px !important;
  height: 55px !important;
  object-fit: cover;
  display: block;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Company placeholder also left-aligned */
.user_image .company_img_placeholder {
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Edit Company: Left-align heading and edit icon */
.edit-company-container .heading {
  text-align: left !important;
  background: #fff !important;
  border: none !important;
  margin-bottom: 0 !important;
  position: relative !important;
}

.edit-company-container .heading a.h_edit,
.edit-company-container .heading a.c_edit {
  position: static !important;
  display: inline-block !important;
  left: auto !important;
  right: auto !important;
}

/* Ensure edit icon aligns with form content */
.edit-company-container .user_image {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
  margin: 0 auto !important;
}

/* Set max-width for edit company content */
.edit-company-content {
  max-width: 600px !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
}

.heading a.h_edit {
  left: inherit;
  right: 10px;
}

/* Edit profile icon hover effect */
.edit-profile-icon:hover .material-symbols-outlined {
  color: #f08438 !important;
}

.custom_option .form-control:focus {
  color: #495057;
  background-color: #fff;
  border-color: #f08438;
  outline: 0;
  box-shadow: 0 0 0 0.2rem rgba(240, 132, 56, 0.25);
}

.custom-control-input:focus:not(:checked)~.custom-control-label::before {
  border-color: rgb(255 207 173);
}

.news_profile {
  cursor: pointer;
}

.contact_page .search img {
  top: 17px;
  left: 23px;
}

.svg_icon svg {
  fill: none;
  stroke: #737373;
  stroke-miterlimit: 10;
  stroke-width: 0.9px;
}

.like_folo .svg_icon svg {
  stroke: #e0e0e0;
}

.hscroll {
  padding-bottom: 0px;
}

.right_content .w-300.immoanimation-enter-done,
.right_content .w-300.right_btm_ani-enter,
.right_content .w-300.right_btm_ani-enter-active,
.right_content .w-300.right_btm_ani-enter-done {
  display: inline-block;
  vertical-align: top;
}

.user_close_info {
  position: absolute;
  left: -30px;
  top: -2px;
  width: 30px;
}

.side_u_name {
  color: #fff;
  font-size: 13px;
  font-weight: 500;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_close_info span {
  width: 100%;
  height: 30px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.user_close_info .svg_icon svg {
  stroke: #ffffff;
}

.r_cont {
  position: relative;
  overflow: visible;
}

.main_nav .side_nav li .svg_icon .cls-2 {
  fill: #747474;
}

.main_nav .side_nav li .svg_icon svg {
  stroke-width: 0.7px;
}

.main_nav .side_nav li span.company_menu svg {
  stroke-width: 0.4px;
}

.main_nav .side_nav li span.hover-orange svg:hover {
  color: #f08438 !important;
}

.main_nav .side_nav li a.active svg {
  stroke: #f08438;
}

/* .wscroll{max-height: calc(100vh - 160px);} */
/*.wscroll>div{height: calc(100vh - 150px) !important;}*/
.main_nav .side_nav li .svg_icon.home_svg svg {
  stroke-width: 2.5px;
}

.cls-color {
  fill: #737373;
}

.cls-color-2 {
  fill: #f08438;
}

.user_profile .user_img .profile_user {
  border-radius: 100px;
}

.login_singup .heading {
  background: #f0efed;
  border: none;
  margin-bottom: 10px;
}

.login_singup .heading h2 {
  padding: 15px 0px;
  text-align: center;
}

.sub_heading {
  text-align: center;
  border-bottom: 1px solid #f0efed;
  /*box-shadow: 0px 3px 3px -3px #535353;*/
  margin-left: -10px;
  margin-right: -10px;
}

.sub_heading h3 {
  margin-bottom: 0;
  padding-bottom: 10px;
}

.login_singup .form-bottom .small a {
  color: #f08438;
  font-weight: 500;
}

.login_singup .register_link {
  text-align: center;
}

.login_singup .register_link p {
  margin-bottom: 0;
  font-size: 16px;
}

.login_singup .register_link a {
  font-size: 16px;
  margin: 0px 0px;
}

.login_singup .register_link {
  padding: 20px 0px 30px;
}

.login_singup .form-bottom .form-group {
  position: relative;
}

.login_singup .form-bottom .form-group svg {
  position: absolute;
  top: 13px;
  right: 10px;
  font-size: 14px;
}

.mandatory {
  margin: 10px 0px;
}

.login_singup .register_link a:hover {
  color: #737373;
}

.register_role_XX {
  font-style: normal;
  background: #fff;
  color: #737373;
  font-size: 13px;
  padding: 6px 12px;
  display: flex;
  align-items: center;
  border-radius: 4px;
  flex-wrap: wrap;
  min-height: 38px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 600px;
  box-sizing: border-box;
}

.register_role_XX span {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
  max-width: 100%;
  display: inline-block;
}

.register_role {
  font-style: normal;
  background: #fff;
  color: #737373;
  font-size: 13px;
  padding: 5px 20px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  flex-wrap: wrap;
  min-height: 38px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #e0e0e0 !important;
}

.register_role span {
  white-space: normal;
  word-wrap: break-word;
  overflow-wrap: break-word;
  line-height: 1.4;
  max-width: 100%;
  display: inline-block;
}

/* Role Search Container Styles */
.role-search-container {
  width: 100%;
  position: relative;
}

.role-search-form-group {
  border: none !important;
  overflow: visible !important;
}

.add_company .form-bottom,
.add_company_from,
.add_company_from .select_coustom,
.add_company_from .role-search-form-group {
  overflow: visible !important;
}

.role-search-input-wrapper {
  width: 100%;
}

.role-search-input {
  width: 100%;
  border: 1px solid #f0efed !important;
  border-radius: 4px;
  padding: 8px 12px;
  font-size: 13px;
  color: #737373;
  background: #fff;
  min-height: 38px;
}

.role-search-input:hover {
  border-color: #f08438 !important;
}

.role-search-input:focus {
  border-color: #f08438 !important;
  outline: none;
  box-shadow: none;
}

.role-search-input::placeholder {
  color: #737373;
}

/* Role Tags */
.role-tags-container {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.role-tag {
  display: inline-flex;
  align-items: center;
  background-color: #f08438;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  gap: 6px;
}

.role-tag-internal {
  background-color: #288f6c;
}

.role-tag-remove {
  background: none;
  border: none;
  color: #fff;
  font-size: 16px;
  line-height: 1;
  padding: 0;
  cursor: pointer;
  opacity: 0.8;
}

.role-tag-remove:hover {
  opacity: 1;
}

/* Role Search Results Dropdown */
.role-search-results {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  z-index: 9999;
  border: 1px solid #ddd;
  border-radius: 4px;
  max-height: 250px;
  overflow-y: auto;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  margin-top: 4px;
}

.role-search-item {
  display: flex;
  align-items: center;
  padding: 10px 12px;
  cursor: pointer;
  border-bottom: 1px solid #f0efed;
  transition: background-color 0.15s ease;
}

.role-search-item:last-child {
  border-bottom: none;
}

.role-search-item:hover {
  background-color: #fff5ef;
}

.role-search-item-internal:hover {
  background-color: #f0fdf4;
}

.role-search-item-selected {
  background-color: #fff5ef;
}

.role-search-item-internal.role-search-item-selected {
  background-color: #f0fdf4;
}

.role-search-item-name {
  flex: 1;
  font-size: 13px;
  color: #333;
}

.role-search-item-category {
  font-size: 11px;
  color: #999;
  margin-left: 8px;
}

.role-search-item-check {
  color: #f08438;
  font-weight: bold;
  margin-left: 8px;
}

.role-search-item-check-internal {
  color: #288f6c;
  font-weight: bold;
  margin-left: 8px;
}

.role-search-no-results {
  padding: 12px;
  text-align: center;
  color: #999;
  font-size: 13px;
}

/* Add Company role field - full width */
.add-company-role-field {
  width: 100%;
  max-width: 100%;
  border: 1px solid #ddd;
  border-radius: 0.475rem;
}

/* Remove inner border when parent has theme-border (selected state) */
.theme-border .add-company-role-field {
  border: none;
}

/* Prevent dropdown popup from overlapping parent's border corners */
.select_coustom.theme-border {
  padding: 2px;
  overflow: hidden;
}

/* Company Settings Select Inputs - Style like register_role_XX */
.setting_accrd select.form-control,
.company_setting select.form-control,
.setting_accrd .form-control[type="select"],
.company_setting .form-control[type="select"] {
  font-style: normal;
  background: #fff;
  color: #737373;
  font-size: 13px;
  padding: 5px 20px;
  border-radius: 4px;
  min-height: 38px;
  border: 1px solid #ddd;
  box-sizing: border-box;
}

/* Kjuup (Orange) - Default */
.setting_accrd select.form-control:focus,
.company_setting select.form-control:focus,
.setting_accrd .form-control[type="select"]:focus,
.company_setting .form-control[type="select"]:focus {
  border-color: #f08438;
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(240, 132, 56, 0.25);
}

/* Kjuup+ (Green) - When company is Kjuup+ */
body:has(.main_heading-internal) .setting_accrd select.form-control,
body:has(.main_heading-internal) .company_setting select.form-control {
  border-color: #288f6c;
}

body:has(.main_heading-internal) .setting_accrd select.form-control:focus,
body:has(.main_heading-internal) .company_setting select.form-control:focus {
  border-color: #288f6c;
  box-shadow: 0 0 0 0.2rem rgba(40, 143, 108, 0.25);
}

body:has(.main_heading-internal) .theme-border,
body:has(.main_heading-internal) .select_coustom.theme-border,
.internal .theme-border,
.internal .select_coustom.theme-border,
.edit-company-container.internal .theme-border,
.edit-company-container.internal .select_coustom.theme-border {
  border: 1px solid #288f6c !important;
}

.register_role:hover {
  color: #737373;
}

.select_coustom svg {
  pointer-events: none;
  fill: #737373 !important;
  color: #737373 !important;
}

.register_role_option .company_header .heading_icon {
  text-align: center;
  width: 100%;
  display: block;
  margin: 0;
}

.register_role_option .company_header .heading_icon .main_heading {
  line-height: 45px;
}

.register_role_option .company_header {
  box-shadow: none;
  margin-bottom: 0px;
}

.register_role_option .search {
  margin: 0px 10px;
  display: flex;
  justify-content: flex-start;
}

.register_role_option .search input {
  height: 35px;
  margin: 0;
}

.register_role_option .setting_accrd .accordion>.card {
  border: none !important;
  border-bottom: none !important;
}

.register_role_option .setting_accrd .accordion>.card:last-child {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.register_role_option .max-h-position.accordion {
  margin-bottom: 0 !important;
  max-height: fit-content !important;
  height: auto !important;
  overflow: visible !important;
}

.register_role_option .card-body {
  padding-top: 0 !important;
}

.register_role_option .setting_accrd .accordion .card-header {
  font-size: 14px;
  color: #000;
  font-weight: 500;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

.register_role_option .role-label,
.register_role_option .role-label i {
  font-size: 13px !important;
}

.register_role_option .setting_accrd .accordion .card-header svg,
.register_role_option .setting_accrd .accordion .card-header img[src*="arrow-right-modern.svg"],
.register_role_option .setting_accrd .accordion .card-header img[src*="arrow-down-modern.svg"],
.register_role_option .setting_accrd .accordion .card-header img.arrow-icon {
  fill: #737373 !important;
  color: #737373 !important;
  filter: brightness(0) saturate(100%) invert(48%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(92%) contrast(81%) !important;
}


/* External checkbox */

.role-label {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 13px !important;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  border-bottom: 1px solid #ececec;
  padding: 8px 10px;
  min-height: 36px;
}

.role-label:last-child {
  border: none;
}

/* Hide the browser's default checkbox */
.role-label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.role-label .checkmark-label {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  border: 1px solid #f08438;
}

/* On mouse-over, add a grey background color */
.role-label:hover input~.checkmark-label {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.role-label input:checked~.checkmark-label {
  background-color: #f08438;
  border-color: #f08438;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-label:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.role-label input:checked~.checkmark-label:after {
  display: block;
}

.role-label:hover input~.checkmark-label {
  background-color: #f08438;
}

/* Style the checkmark/indicator */
.role-label .checkmark-label:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}







/* Internal checkbox */

.role-label-internal {
  display: flex;
  align-items: center;
  position: relative;
  cursor: pointer;
  font-size: 13px;
  font-style: normal;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  margin: 0;
  border-bottom: none;
  padding: 8px 10px;
  color: #737373;
}

.role-label-internal span {
  color: #737373;
}

.role-label-internal i {
  font-style: normal;
  font-size: 13px;
}

.role-label-internal:last-child {
  border: none;
}

/* Hide the browser's default checkbox */
.role-label-internal input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Create a custom checkbox */
.role-label-internal .checkmark-label-internal {
  position: absolute;
  top: 50% !important;
  right: 10px;
  transform: translateY(-50%) !important;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  border: 1px solid #cecece;
}

/* On mouse-over, add a grey background color */
.role-label-internal:hover input~.checkmark-label-internal {
  background-color: #ccc;
}

/* When the checkbox is checked, add a blue background */
.role-label-internal input:checked~.checkmark-label-internal {
  background-color: #288f6c;
  border-color: #288f6c;
}

/* Create the checkmark/indicator (hidden when not checked) */
.checkmark-label-internal:after {
  content: "";
  position: absolute;
  display: none;
}

/* Show the checkmark when checked */
.role-label-internal input:checked~.checkmark-label-internal:after {
  display: block;
}

.role-label-internal:hover input~.checkmark-label-internal {
  background-color: #288f6c;
}

/* Style the checkmark/indicator */
.role-label-internal .checkmark-label-internal:after {
  left: 7px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}




.role-options {
  margin: 0px -10px;
}

.role-label i {
  font-style: normal;
  font-size: 13px !important;
}



.register_role_option {
  position: relative;
  background-color: #fff !important;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.register_role_option .max-h-position {
  scrollbar-gutter: stable;
  max-height: fit-content !important;
  height: auto !important;
  overflow: visible !important;
}

.bottom-button {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  background-color: #fff;
  padding: 10px 0px;
  position: relative;
  width: 100%;
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.bottom-button a {
  background-color: #fff !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 24px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: auto;
}

.bottom-button a:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
}

.bottom-button-internal {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background-color: #fff;
  padding: 10px 0px;
  position: relative;
  width: 100%;
  border-top: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.profile-edit-roles .bottom-button-internal,
.profile-edit-roles .bottom-button {
  position: relative !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

.bottom-button-internal a {
  background-color: #fff !important;
  border: 1.5px solid #288f6c !important;
  color: #288f6c !important;
  border-radius: 8px;
  font-weight: 500;
  font-size: 13px;
  padding: 10px 24px !important;
  padding-left: 20px !important;
  padding-right: 20px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  text-decoration: none;
  min-width: auto;
}

.bottom-button-internal a:hover {
  background-color: #288f6c !important;
  border-color: #288f6c !important;
  color: #fff !important;
}

.register_role_option {
  position: relative;
  background-color: #fff !important;
  scrollbar-gutter: stable;
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.register_role_option .setting_accrd {
  padding-bottom: 0;
  max-height: none;
  overflow-y: visible;
  scrollbar-gutter: stable;
  flex: 1;
  min-height: 0;
}

.register_role_option .max-h-position {
  scrollbar-gutter: stable;
  max-height: fit-content !important;
  height: auto !important;
  overflow: visible !important;
}

.add-company-role-popup {
  display: flex;
  flex-direction: column;
  max-height: none !important;
  overflow: visible;
}

.add-company-role-popup .setting_accrd {
  flex: none !important;
  min-height: auto !important;
  overflow-y: visible;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  margin-top: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex;
  flex-direction: column;
}

.add-company-role-popup .max-h-position {
  max-height: fit-content !important;
  height: auto !important;
  overflow: visible !important;
  flex: none !important;
  min-height: auto !important;
}

.add-company-role-popup .max-h-position.accordion {
  max-height: fit-content !important;
  height: auto !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.add-company-role-popup .accordion .card {
  flex-shrink: 0;
}

.add-company-role-popup .accordion .card {
  border: none !important;
  border-bottom: none !important;
}

.add-company-role-popup .accordion .card:last-child {
  margin-bottom: 0 !important;
  border-bottom: none !important;
}

.add-company-role-popup .accordion .card .card-header {
  flex-shrink: 0;
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Card body white background */
.register_role_option .accordion .card .card-body,
.add-company-role-popup .accordion .card .card-body,
.profile-edit-roles .register_role_option .accordion .card .card-body,
.profile-edit-roles .add-company-role-popup .accordion .card .card-body {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

.profile-edit-roles {
  margin: 0 !important;
  padding: 0 !important;
  max-width: 600px !important;
  width: 100% !important;
}

.profile-edit-roles .register_role_option,
.profile-edit-roles .add-company-role-popup {
  margin: 0 !important;
  padding: 0 !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  max-width: 600px !important;
  width: 100% !important;
}

/* Hide the dropdown arrow button next to register_role_XX */
.select_coustom .register_role_XX + svg,
.select_coustom:has(.register_role_XX) > svg {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

/* Set max-width for select_coustom container that contains profile-edit-roles */
.select_coustom:has(.profile-edit-roles),
.select_coustom:has(.register_role_XX) {
  max-width: 600px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}


.profile_image .modal-header {
  border: none;
  padding: 0;
}

.profile_image .modal-header button {
  position: absolute;
  right: 10px;
  z-index: 9;
  color: #f08438;
  opacity: 1;
  text-shadow: none;
}

.profile_image .modal-body {
  padding: 0;
}

/*.profile_pic_profile{border: 2px solid #f08438;}*/

@media (min-width: 576px) {
  .profile_image .modal-dialog {
    max-width: fit-content;
    margin: 1.75rem auto;
  }
}

.profile_pic_profile {
  max-width: 1000px;
}

.profile_pic_profile img,
.profile_pic_profile .profile_user {
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/*11-03-2021*/

.profile_section {
  padding-left: 20px;
  padding-right: 20px;
  padding-bottom: 0;
  height: 100vh;
  background-color: #fff;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  border-left: 1px solid #e0e0e0;
}

.profile_section.loaded {
  opacity: 1;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile_section .profile-header {
  display: flex;
  justify-content: space-between;
  padding-top: 20px;
}

.profile_section .profile-header-left {
  display: flex;
}

.profile_section .profile-header-icons {
  padding-top: 10px;
}

.profile_section .profile-header-icons.edit-icon-wrapper {
  margin-left: 30px;
}

.profile_section .profile-stats-container {
  display: flex;
  align-items: center;
}

.profile_section .profile-stats-grid {
  display: grid;
  grid-template-columns: auto auto;
  gap: 15px;
  text-align: center;
  justify-content: center;
  align-items: center;
}

.profile_section .profile-stats-grid a,
.profile_section .profile-stats-grid > div {
  text-decoration: none;
}

.profile_section .profile-stat-value {
  color: #F08438;
  font-size: 16px;
  font-weight: 500;
}

.profile_section .profile-stat-label {
  color: #666;
  font-size: 12px;
}

.profile_section .profile-add-company-section {
  margin-top: 20px;
}

.profile_section .profile-add-company-section > div {
  display: flex;
}

.profile_section .profile-data {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.profile_section .profile_name {
  margin-top: 20px;
}

.profile_section .profile_user {
  border-radius: 100px;
  object-fit: cover;
}

.main_nav .side_nav li a.active img {
  border: 2px solid #f08438;
}

.profile_image .modal-content {
  border-radius: 0;
  overflow: hidden;
  border: 2px solid #ffffff;
}

/* Profile contact button - show icon */
.profile-contact-btn svg {
  display: inline-block !important;
  flex-shrink: 0;
}

/* Profile contact button - hover effect */
.btn.request-btn.btn-primary.profile-contact-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover,
button.btn.request-btn.btn-primary.profile-contact-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(240, 132, 56, 0.2) !important;
}

/* Profile contact button - icon color on hover */
.btn.request-btn.btn-primary.profile-contact-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover svg,
button.btn.request-btn.btn-primary.profile-contact-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover svg {
  stroke: #fff !important;
  fill: #fff !important;
}

/* Profile add company button - no background */
.btn.request-btn.btn-primary.profile-add-company-btn,
button.btn.request-btn.btn-primary.profile-add-company-btn {
  background-color: transparent !important;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px !important;
}

/* Profile add company button - hover effect */
.btn.request-btn.btn-primary.profile-add-company-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover,
button.btn.request-btn.btn-primary.profile-add-company-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 2px 8px rgba(240, 132, 56, 0.2) !important;
}

/* Profile add company button - show icon */
.profile-add-company-btn svg {
  display: inline-block !important;
  flex-shrink: 0;
}

/* Profile add company button - icon color on hover */
.btn.request-btn.btn-primary.profile-add-company-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover svg,
button.btn.request-btn.btn-primary.profile-add-company-btn:not(.disable-btn):not(.disable-btn-internal):not(:disabled):hover svg {
  stroke: #fff !important;
  fill: #fff !important;
}

.edit_form .main_heading {
  font-weight: 400;
}

.sing_in_with-img {
  width: auto;
  max-width: none;
  align-items: center;
}


/* Now hide the entire action container */
.MuiSnackbarContent-action .MuiButtonBase-root .MuiButton-label:empty {
  display: none !important; /* Hide the entire action container when the label is empty */
}


.sign_in_transprent {
  padding: 40px 0;
  background-color: transparent;
}

.app_icon {
  text-align: center;
  padding-top: 30px;
}

.app_icon h2 {
  color: #000;
  font-weight: 500;
  margin-bottom: 20px;
}

.side_img img {
  max-width: 470px;
  margin-right: 40px;
}

.max-h-position {
  max-height: calc(100vh - 434px);
  overflow: auto;
  scrollbar-gutter: stable;
}

.articalRoleScroll {
  max-height: 300px;
  overflow: auto;
}

.app_img img {
  max-height: 40px;
  margin: 0 10px;
}

.svg_icon.news_profile svg {
  stroke: #747474;
}

.svg_icon.news_profile svg path {
  fill: #747474;
}

.prf1 {
  fill: #747474;
}

.prf2 {
  fill: none;
  stroke: #747474;
  stroke-miterlimit: 10;
  stroke-width: 3px;
}

.like_folo {
  font-size: 13px;
}

.main-div {
  width: 100%;
}

.user_seeting a img:hover,
.user_seeting a img:focus {
  filter: invert(27%) sepia(51%) saturate(2878%) hue-rotate(346deg) brightness(104%) contrast(97%);
}

.edit_form {
  overflow: hidden;
  border: 1px solid #f0efed;
  border-radius: 0.25rem;
  transition: border-color 0.2s ease;
}

.edit_form:hover {
  border-color: #f08438 !important;
}

/* Kjuup+ (Green) - register_role_XX hover styling */
body:has(.main_heading-internal) .register_role_XX:hover,
.internal .register_role_XX:hover,
.edit-company-container.internal .register_role_XX:hover,
body:has(.main_heading-internal) .select_coustom.edit_form:hover .register_role_XX,
.internal .select_coustom.edit_form:hover .register_role_XX,
.edit-company-container.internal .select_coustom.edit_form:hover .register_role_XX {
  outline: 2px solid #288f6c !important;
  outline-offset: 2px !important;
}

body:has(.main_heading-internal) .select_coustom.edit_form:hover,
.internal .select_coustom.edit_form:hover,
.edit-company-container.internal .select_coustom.edit_form:hover {
  border-color: #288f6c !important;
}

/* Select outline color on edit personal profile page - hover and focus */
.edit_form select:hover,
.edit_form select:focus,
.select_coustom.edit_form select:hover,
.select_coustom.edit_form select:focus,
.edit-company-content select:hover,
.edit-company-content select:focus,
.edit-company-content .select_coustom:hover,
.edit-company-content .select_coustom:focus {
  outline: none !important;
  border-color: #f08438 !important;
}

.select_coustom.edit_form:hover,
.select_coustom.edit_form:focus-within {
  border-color: #f08438 !important;
  outline: none !important;
}

.custom_select {
  position: relative;
}

.custom_select select {
  -webkit-appearance: none;
  -moz-appearance: none;
}

.custom_select img {
  position: absolute;
  top: 12px;
  right: 10px;
  pointer-events: none;
}

.main-div.sing_in_with-img {
  width: auto;
}

/*.select_coustom.form-group{border: 1px solid #ddd;}*/
.login_singup {
  border: 1px solid #e0e0e0;
}

/* .article-img .react-multi-carousel-list .react-multi-carousel-track{height: 270px;background: #f5f5f5;} */
.article-img .react-multi-carousel-list button {
  display: none;
}

.article-img .react-multi-carousel-list:hover button {
  display: block;
}

.article-img .react-multi-carousel-dot-list {
  bottom: 15px !important;
}

.company_list_ver .bg-purple:last-child {
  border-bottom: none;
}

.main_nav .side_nav li.home_icon a.active svg {
  stroke: transparent;
}

.main_nav .side_nav li:last-child {
  margin-top: 30px;
}

.company_icon svg {
  fill: none;
  stroke: #545454;
  stroke-width: 0.9px;
}

.company_icon:hover svg {
  stroke: #f08438;
}

.company_icon:active svg {
  fill: #f08438;
  stroke: #f08438;
}

.user_seeting {
  margin-right: 45px;
}

/* .article-img .react-multi-carousel-list .react-multi-carousel-track li img{max-width:100%;width: auto !important; } */
.main_nav .side_nav li span.logout_icon svg {
  stroke-width: 6px !important;
}

.article_like .post_notification {
  background-color: #fff;
}

.bottom-bar>div:nth-child(2) {
  display: none;
}

.overFlow-x {
  overflow-x: hidden;
}

.newBar{
  justify-content: center;
  display: flex;
  align-items: center;
}

.profile_height {
  height: calc(100vh - 192px);
  margin-left: -10px;
  margin-right: -10px;
}

.profile_height .profile-flied,
.slider-icon,
.article-slider {
  padding: 0px 10px;
}

.profile_height .company_services {
  margin-left: 0px;
  margin-right: 0px;
}

.profile_section .company_services {
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.min_height {
  height: calc(100vh - 141px);
  margin-left: -10px;
  margin-right: -10px;
}

.min_height_followers_following {
  height: calc(100vh - 180px);
}

.min_height.contact_height {
  height: calc(100vh - 114px);
}

.min_height.capacities_height {
  height: calc(100vh - 119px);
}

.min_height.company_details_scroll {
  height: calc(100vh - 300px);
}

.min_height.company_details_scroll .bg-purple,
.min_height.company_details_scroll .article,
.min_height.company_details_scroll .company_services {
  margin: 10px 0px 0px 0px;
}

.min_height.company_details_scroll .slider-icon {
  padding: 0px 0px;
}

.c_edit {
  top: 0px !important;
}

.bottom-bar .media-desc:last-child {
  margin-bottom: 0;
}

.company_img {
  border-radius: 4px;
}

.middle-title:hover {
  /*color: #000;*/
}

.invite .admin-content {
  /*background: #fff;*/
}

.invite .container_checkbox {
  margin-bottom: -10px;
}

.invite .search {
  margin: 10px 0px;
}

.invite .search .form-group input {
  background-color: #fff;
}

.company_header.company_border {
  margin-bottom: 2px;
}

.b-4 img {
  border-radius: 4px;
}

.map-pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.cls-1map {
  fill: #ed3136;
  stroke: #ed3136;
  stroke-miterlimit: 10;
  stroke-width: 0.9px;
}

.cls-2map {
  fill: #fff;
}

.cls-3map {
  fill: #737373;
}

.cls-4map {
  fill: #f08438;
}

.blue_pin .cls-1map {
  fill: #017cff;
  stroke: #017cff;
  stroke-miterlimit: 10;
  stroke-width: 0.9px;
}

.blue_pin .cls-2map {
  fill: #fff;
}

.blue_pin .cls-3map {
  fill: #737373;
}

.blue_pin .cls-4map {
  fill: #f08438;
}

.share_pin .cls-1map {
  fill: #3b3d3b;
  stroke: #3b3d3b;
  stroke-miterlimit: 10;
  stroke-width: 0.9px;
}

.share_pin .cls-2map {
  fill: #fff;
}

.share_pin .cls-3map {
  fill: #737373;
}

.share_pin .cls-4map {
  fill: #f08438;
}

.loader {
  border: 6px solid #f3f3f3;
  border-radius: 50%;
  border-top: 6px solid #f18638;
  border-bottom: 6px solid #f18638;
  width: 60px;
  height: 60px;
  -webkit-animation: spin 2s linear infinite;
  animation: spin 2s linear infinite;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -42%);
  left: 42%;
}

/* Hide loader for internal chats - they should load smoothly without spinner */
body:has(.main_heading-internal) .website_loader {
  display: none !important;
}

.website_loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: rgb(0 0 0 / 50%);
  z-index: 2;
}

.article-transition-screen {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.article-transition-card {
  width: min(460px, 88vw);
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.article-transition-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #8c8c8c;
  font-size: 14px;
  font-weight: 500;
}

.article-transition-step-active {
  background: #f7f7f7;
  color: #4a4a4a;
}

.article-transition-step-icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.article-transition-step-number {
  width: 24px;
  height: 24px;
  border: 2px solid #c8c8c8;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  color: #9a9a9a;
  transition: all 0.3s ease;
}

.article-transition-step-number-active {
  border-color: #737373;
  color: #555;
  animation: articleStagePulse 1s ease-in-out infinite;
}

.article-transition-check {
  font-size: 20px;
  color: #737373;
}

@keyframes articleStagePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }

  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.role_data {
  min-height: 300px;
  overflow-y: auto;
  max-height: 300px;
  margin-bottom: 40px;
  /* Hide scrollbar when content doesn't overflow - Firefox */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

/* Hide scrollbar for role_data when content doesn't overflow - Webkit browsers */
.role_data::-webkit-scrollbar {
  width: 8px;
}

.role_data::-webkit-scrollbar-track {
  background: transparent;
}

.role_data::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}

.role_data::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.3);
}

/* Remove scrollbar from role_data inside department/location modal - parent handles scrolling */
.dept-loc-modal-scroll .role_data {
  overflow-y: visible !important;
  overflow-x: visible !important;
  min-height: auto !important;
  max-height: none !important;
  margin-bottom: 0 !important;
}

/* Department/Location Modal Item Styles */
.dept-loc-item:hover {
  background-color: #f8f9fa !important;
}

.dept-loc-modal-container .container_checkbox {
  pointer-events: none;
}

.dept-loc-modal-container .dept-loc-item {
  border-radius: 0 !important;
}

/* Disabled button - no hover effect */
.dept-loc-btn-disabled {
  padding: 10px 24px;
  background-color: #fff;
  color: #e0e0e0;
  border: 1.5px solid #e0e0e0;
  border-radius: 6px;
  cursor: not-allowed;
  font-weight: 500;
  font-size: 14px;
  box-shadow: none;
  transition: none;
}

.dept-loc-btn-disabled:hover,
.dept-loc-btn-disabled:focus,
.dept-loc-btn-disabled:active {
  background-color: #fff;
  color: #e0e0e0;
  border: 1.5px solid #e0e0e0;
  box-shadow: none;
  transform: none;
  outline: none;
}

/* Active button hover effect */
.dept-loc-btn-active:hover,
.create-article-btn-active:hover {
  opacity: 0.9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Schedule modal cancel button hover */
.schedule-cancel-btn:hover {
  background-color: #f5f5f5 !important;
  border-color: #999 !important;
  color: #555 !important;
}

/* Schedule Note Card Styles */
.schedule-note-card {
  padding: 10px;
  border-radius: 12px;
  margin-top: 16px;
  margin-bottom: 12px;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: all 0.2s ease;
  border: none;
}

.schedule-note-card-external {
  background-color: rgba(240, 132, 56, 0.1);
}

.schedule-note-card-internal {
  background-color: rgba(40, 143, 108, 0.1);
}

.schedule-note-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.schedule-note-icon-wrapper {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.schedule-note-icon-wrapper-external {
}

.schedule-note-icon-wrapper-internal {
}

.schedule-note-icon {
  font-size: 24px;
}

.schedule-note-icon-external {
  color: #f08438;
}

.schedule-note-icon-internal {
  color: #288f6c;
}

.schedule-note-content {
  flex: 1;
}

.schedule-note-label {
  font-size: 12px;
  color: #999;
  margin: 0;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

.schedule-note-datetime {
  font-size: 13px;
  font-weight: 600;
  color: #737373;
  margin: 0;
}

.role_popup {
  position: absolute;
  top: 58%;
  transform: translateY(-50%);
  background-color: #fff;
  width: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  z-index: 22;
  max-width: 600px;
}

.role_popup.shadow-sm {
  border-radius: 12px;
  border: 1px solid #e0e0e0;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Confirm Modal Styling */
.confirm-modal-dialog {
  max-width: 400px !important;
  margin: 1.75rem auto !important;
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem);
  z-index: 1050 !important;
}

.confirm-modal-dialog .modal-content {
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1050 !important;
}

/* Dark backdrop for confirm modal */
body.modal-open:has(.confirm-modal) .modal-backdrop,
body.modal-open .confirm-modal.show ~ .modal-backdrop,
.confirm-modal.show ~ .modal-backdrop {
  background-color: rgba(0, 0, 0, 0.65) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  z-index: 1040 !important;
}

/* Ensure confirm modal is above backdrop and popup */
.confirm-modal {
  z-index: 10001 !important;
}

.confirm-modal.show {
  z-index: 10001 !important;
}

.confirm-modal-dialog {
  z-index: 10001 !important;
}

/* Material-UI confirm dialogs (react-material-crud $crud.confirm) – email-feature button styling */
.MuiDialog-root .MuiDialogActions-root .MuiButton-textPrimary {
  border-radius: 10px !important;
  min-width: 88px;
}

.MuiDialog-root .MuiDialogActions-root .MuiButton-textPrimary:first-child {
  color: var(--confirm-btn-color) !important;
  border: 1.5px solid var(--confirm-btn-color) !important;
  background-color: #fff !important;
}

.MuiDialog-root .MuiDialogActions-root .MuiButton-textPrimary:first-child:hover {
  background-color: var(--confirm-btn-color) !important;
  border-color: var(--confirm-btn-color) !important;
  color: #fff !important;
}

.MuiDialog-root .MuiDialogActions-root .MuiButton-textPrimary:first-child:hover .MuiButton-label,
.MuiDialog-root .MuiDialogActions-root .MuiButton-textPrimary:first-child:hover .MuiButton-label span {
  color: #fff !important;
}

.MuiDialog-root .MuiDialogActions-root .MuiButton-textPrimary:last-child {
  color: #fff !important;
  background-color: var(--confirm-btn-color) !important;
  border: 1.5px solid var(--confirm-btn-color) !important;
}

.MuiDialog-root .MuiDialogActions-root .MuiButton-textPrimary:last-child:hover {
  background-color: color-mix(in srgb, var(--confirm-btn-color) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--confirm-btn-color) 85%, #000) !important;
}

.react-emoji-picker--wrapper__show {
  border-style: solid;
  border-width: thin;
  border-color: #dfdfdf;
}

.emoji-mart-bar {
  /* margin-top: 5%; */
}

.emoji-mart-scroll {}

.role_popupx {
  /* position: absolute; */
  /* top: 58%; */
  /* transform: translateY(-50%); */
  background-color: #fff;
  width: 100%;
  height: 100%;
  left: 0;
  right: 0;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  z-index: 22;
}

.role_popup h4 {
  margin-bottom: 0;
  background-color: #f5f5f5;
  padding: 13px 15px;
  font-weight: 500;
}

.role_data .list-group .list-group-item {
  border: none;
  padding: 8px 15px;
  font-size: 15px;
}

.font_color {
  color: #737373;
}

.bg-company {
  background: #f7f7f7;
}

.services_delete .pointer span {
  font-size: 13px;
}

.img_padds {
  background-color: #017cff;
}

@-webkit-keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartBeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

/* Jump animation for follow icon activation */
@keyframes iconJump {
  0% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-8px) scale(1.1);
  }
  100% {
    transform: translateY(0) scale(1);
  }
}

/*.active-like-follow {*/
/*  -webkit-animation-name: heartBeat;*/
/*  animation-name: heartBeat;*/
/*  -webkit-animation-duration: 1.3s;*/
/*  animation-duration: 1.3s;*/
/*  -webkit-animation-timing-function: ease-in-out;*/
/*  animation-timing-function: ease-in-out;*/

/*  -webkit-animation-duration: 1s;*/
/*  animation-duration: 1s;*/
/*  -webkit-animation-fill-mode: both;*/
/*  animation-fill-mode: both;*/
/*}*/

.next_line {
  display: block;
}

.site_share {
  display: flex;
  justify-content: flex-end;
  padding: 5px 25px;
}

.select_files {
  padding: 0;
  margin-bottom: -20px;
  margin-top: 20px;
  font-weight: 500 !important;
  font-size: 15px !important;
  color: #f08438;
}

.width_100 {
  width: 100%;
}

.wscroll.right_wscroll {
  height: 100%;
  flex: 1;
  min-height: 0;
}

.role_popup_right .role_data {
  min-height: 220px;
  max-height: 250px;
}

.role_popup_right .role_data .form-group {
  margin-bottom: 0;
}

.role_popup_right .role_data .list-group .list-group-item {
  padding: 4px 15px;
}

.active-like-follow svg .cls-1 {
  fill: unset;
}

.active-like-follow span {
  color: #f08438;
}

.active-like-follow-internal svg .cls-1 {
  fill: unset;
}

.active-like-follow-internal span {
  color: #288f6c;
}

.wscroll.popup_scroll .role_data {
  min-height: auto;
  overflow-y: unset;
  max-height: none;
}

.wscroll.popup_scroll {
  height: 48vh;
}

.wscroll.popup_scroll .role_data .list-group {
  padding-bottom: 20px;
}

.b-orange {
  border-color: #ddd;
  overflow: hidden;
}

.admin-content .col-12 {
  border-bottom: 3px solid #fff;
}

.right_side_bar .main_nav .side_nav li .svg_icon.stroke_with svg {
  stroke-width: 0.7px;
}

.arrow_down {
  margin-left: 20px;
  cursor: pointer;
}

.leave_company h5 {
  display: flex;
  align-items: center;
  padding-bottom: 0px;
}

.react-horizontal-scrolling-menu--scroll-container::-webkit-scrollbar {
  display: none;
}

.react-horizontal-scrolling-menu--scroll-container {
  -ms-overflow-style: none;
  /* IE and Edge */
  scrollbar-width: none;
  /* Firefox */
}

.custom-svg {
  stroke: blue;
  fill: blue;
}

/* Clean round design for reply-btn and reminder-btn */
.reply-btn.icon-btn-shadow,
.reminder-btn.icon-btn-shadow {
  background: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  max-width: 32px !important;
  max-height: 32px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
  box-shadow: none !important;
}

.reply-btn.icon-btn-shadow svg,
.reminder-btn.icon-btn-shadow svg {
  width: 18px !important;
  height: 18px !important;
  max-width: 18px !important;
  max-height: 18px !important;
  min-width: 18px !important;
  min-height: 18px !important;
  flex-shrink: 0;
  display: block;
  object-fit: contain;
  aspect-ratio: 1 / 1;
}

.reply-btn.icon-btn-shadow:hover,
.reminder-btn.icon-btn-shadow:hover {
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none;
}

.reply-btn.icon-btn-shadow:hover svg,
.reminder-btn.icon-btn-shadow:hover svg,
.reply-btn.icon-btn-shadow:hover svg path,
.reminder-btn.icon-btn-shadow:hover svg path {
  stroke: #f08438 !important;
  color: #f08438 !important;
}

.reply-btn.icon-btn-shadow:active,
.reminder-btn.icon-btn-shadow:active {
  transform: none !important;
  box-shadow: none !important;
}

/* ToDo close icon - Material Symbols 24px */
.reminder-btn.icon-btn-shadow .todo-close-icon {
  font-size: 24px;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
  color: #666;
  display: block;
  user-select: none;
  line-height: 1;
}

.reminder-btn.icon-btn-shadow:hover .todo-close-icon {
  color: #f08438;
}

.tt-l {
  display: flex;
  justify-content: center;
  align-items: center;
}

.tt-ll {
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 2px solid grey;
  cursor: pointer;
}

.role_popup h6 {
  font-weight: 500 !important;
  text-align: center;
}

.right_content .conversation_top {
  display: flex;
}

.right_content .conversation_bottom {
  display: flex;
}

.right_content .hscroll {
  padding-left: 410px;
  padding-right: 150px;
}

.fix-items {
  position: fixed;
  z-index: 999;
  background-color: #ffffff;
}

.right_content .hscroll {
  display: flex;
}

.right_content .hscroll>div {
  margin-right: 15px;
  background: #fff;
}

.request_popup img {
  border-radius: 4px;
}

.MuiIconButton-colorPrimary {
  background: #f7f7f7 !important;
  width: 36px;
  height: 36px;
  margin-right: 3px !important;
}

.blur_bg {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgb(0 0 0 / 70%);
}

.text-73 {
  font-style: normal !important;
}

.user_position {
  font-style: italic;
  font-weight: 400;
}

.product_user {
  font-weight: 500;
}

.product_user span {
  font-weight: 400;
  color: #000 !important;
}

.personal_article h6 {
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 4px !important;
  margin-top: 0 !important;
  /* text-overflow: ellipsis; */
  /* white-space: nowrap; */
  /* overflow: hidden; */
  max-width: 300px;
  cursor: pointer;
}

.personal_article h6 span {
  font-size: 13px;
  font-style: italic;
  font-weight: 400;
}

.personal_article_2 h6 {
  margin-bottom: 7px;
}

.personal_article_2 h6 span {
  font-weight: 400;
  color: #000 !important;
}

.product_user span {
  font-style: normal !important;
}

.media-desc a.small {
  display: block;
}

.article-wrapper .article-img {
  margin-left: 0;
  margin-right: 0;
}

/* .article-wrapper ul.react-multi-carousel-track{height: 550px;} */
.article-wrapper ul.react-multi-carousel-track li img {
  max-width: 100%;
  width: auto !important;
}

.noHover {}


.b-r-4 {
  border-radius: 4px;
}

.article-wrapper .article-img .react-multi-carousel-track li {
  display: flex;
}

.article-wrapper .article-img .react-multi-carousel-track li img {
  height: auto !important;
}

.article.padding-left-right-2 {
  padding-left: 10px;
  padding-right: 10px;
}

.text-normal {
  font-style: normal !important;
}

.svg_gray {
  stroke: #737373;
}

.svg_active {
  stroke: #f08438;
  color: #f08438;
}

.svg_active_internal {
  stroke: #288f6c;
  color: #288f6c;
}

.invite_link {
  margin-left: -8px;
  margin-right: -8px;
  background-color: #fff;
  padding: 10px 8px;
  margin-top: 20px;
}

.invite_link:hover a {
  color: #f08438;
}

.invite_link a svg {
  fill: transparent;
  stroke: #737373;
}

.invite_link a span {
  margin-right: 5px;
}

.invite_link:hover a svg {
  stroke: #f08438;
  color: #fff;
}








.invite_link-internal {
  margin-left: -8px;
  margin-right: -8px;
  background-color: #fff;
  padding: 10px 8px;
  margin-top: 20px;
}

.invite_link-internal:hover a {
  color: #288f6c;
}

.invite_link-internal a svg {
  fill: transparent;
  stroke: #737373;
}

.invite_link-internal a span {
  margin-right: 5px;
}

.invite_link-internal:hover a svg {
  stroke: #288f6c;
  color: #fff;
}

.chat_text .chat_header {
  z-index: 10000;
}

/* Ensure chat scroll container clips content so it doesn't overlap header */
.chat_text .wscroll {
  z-index: 1;
  isolation: isolate;
}

.chat_text .bottom-bar {
  z-index: 1;
  isolation: isolate;
}

.chat_text .wscroll.right_wscroll {
  height: 40vh;
  overflow: auto;
  display: flex;
  flex-direction: column-reverse;
}

.click_plus .role_data {
  min-height: auto !important;
  overflow: hidden;
}

.click_plus .list-group li {
  border-bottom: 1px solid #ddd;
  padding: 6px 10px;
  font-size: 13px;
}

.click_plus .list-group li span {
  display: inline-block;
  width: 35px;
}

.click_plus {
  z-index: 9999;
  border: 1px solid #ddd;
  border-bottom: 5px solid transparent;
  background-color: #fff;
}

.company_services.chat_services {
  background-color: #f0efed !important;
}

/* Attachment menu popup - consistent sizing for all chat types */
.role_popup.dialog.click_plus {
  width: 320px !important;
  max-width: 90% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  left: 0 !important;
  right: 0 !important;
}

/* Group chat specific adjustments */
.chanel_group_userchat_div .role_popup.dialog.click_plus,
.group_chat_user_info .role_popup.dialog.click_plus,
.chanel_group_list_chat_main_div .role_popup.dialog.click_plus {
  width: 280px !important;
  max-width: 85% !important;
}

/* Ensure chat containers have proper positioning context for popups */
.chat_text.chat_box_main_div {
  position: relative !important;
  overflow: visible !important;
}

.chat_box_main_div {
  position: relative !important;
  overflow: visible !important;
}

/* Ensure group chat container doesn't clip overlay */
.w-300.chat_text.chat_box_main_div {
  overflow: visible !important;
  z-index: 1 !important;
}

.chanel_group_list_chat_main_div .chat_box_main_div {
  overflow: visible !important;
}

/* Make sure the inner flex container doesn't clip either */
.w-300.chat_text.chat_box_main_div > div {
  overflow: visible !important;
}

/* =====================================================
   Floating Action Attachment Menu - Fixed Positioning
   ===================================================== */
.floating-action-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 999999 !important;
  background: transparent;
}

.floating-action-backdrop:before {
  content: "";
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-color: rgba(255, 255, 255, 0.85);
  z-index: -1;
}

.floating-action-menu {
  position: relative !important;
  width: 320px !important;
  max-width: 90vw !important;
  background: #fff !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
  overflow: hidden !important;
  margin: 0 !important;
  border: none !important;
}

.floating-action-menu .role_data {
  padding: 0 !important;
  margin: 0 !important;
  min-height: auto !important;
  overflow: visible !important;
}

.floating-action-menu .list-group {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.floating-action-menu .list-group li {
  display: flex !important;
  align-items: center !important;
  padding: 16px 20px !important;
  border-bottom: 1px solid #f0f0f0 !important;
  font-size: 15px !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
}

.floating-action-menu .list-group li:last-child {
  border-bottom: none !important;
}

.floating-action-menu .list-group li:hover {
  background-color: #fff5f0 !important;
  color: #F08438 !important;
}

.floating-action-menu .list-group li span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 35px !important;
  margin-right: 12px !important;
  flex-shrink: 0 !important;
}

.floating-action-menu .list-group li span img {
  width: 24px !important;
  height: 24px !important;
  object-fit: contain !important;
}

.floating-action-menu .bottom-button {
  padding: 14px 20px !important;
  text-align: center !important;
  border-top: 1px solid #e8e8e8 !important;
  background: #fafafa !important;
}

.floating-action-menu .bottom-button a {
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #F08438 !important;
  text-decoration: none !important;
  display: block !important;
  padding: 4px 0 !important;
}

.floating-action-menu .bottom-button a:hover {
  color: #e07328 !important;
}

/* Bottom button styling for attachment menu */
.role_popup.dialog.click_plus .bottom-button {
  padding: 12px 15px;
  text-align: center;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
}

.role_popup.dialog.click_plus .bottom-button a {
  font-size: 15px;
  font-weight: 500;
  color: #F08438;
  text-decoration: none;
  display: block;
  padding: 4px 0;
}

.role_popup.dialog.click_plus .bottom-button a:hover {
  color: #e07328;
}

.click_plus .list-group li:hover {
  color: #f08438;
}

.click_plus .list-group .li-internal:hover {
  color: #288f6c;
}

/* Internal chat menu items - green hover for icons and text */
.chat-info-menu li.li-internal {
  cursor: pointer;
}

.chat-info-menu li.li-internal:hover {
  color: #288f6c !important;
}

.chat-info-menu li.li-internal:hover .menu-icon,
.chat-info-menu li.li-internal:hover .menu-text,
.chat-info-menu li.li-internal:hover .material-symbols-outlined,
.chat-info-menu li.li-internal:hover span {
  color: #288f6c !important;
}

/* External chat menu items - orange hover for icons and text */
.chat-info-menu li.pointer.message-info-icon:hover {
  color: #f08438 !important;
}

.chat-info-menu li.pointer.message-info-icon:hover .menu-icon,
.chat-info-menu li.pointer.message-info-icon:hover .menu-text,
.chat-info-menu li.pointer.message-info-icon:hover .material-symbols-outlined,
.chat-info-menu li.pointer.message-info-icon:hover span {
  color: #f08438 !important;
}

/* Info icon hover effects - Internal (green) */
.chat_user_info-internal .chat-info-menu li.li-internal:hover img[src*="info-icon"],
.chat_user_info-internal .chat-info-menu li.li-internal a:hover img[src*="info-icon"],
.chat-info-menu li.li-internal:hover img[src*="info-icon"],
.chat-info-menu li.li-internal a:hover img[src*="info-icon"] {
  filter: brightness(0) saturate(100%) invert(44%) sepia(52%) saturate(587%) hue-rotate(118deg) brightness(93%) contrast(88%) !important;
}

/* Info icon hover effects - External (orange) */
.chat-info-menu li.pointer.message-info-icon:hover img[src*="info-icon"],
.chat-info-menu li.pointer.message-info-icon a:hover img[src*="info-icon"] {
  filter: brightness(0) saturate(100%) invert(56%) sepia(71%) saturate(1636%) hue-rotate(347deg) brightness(99%) contrast(91%) !important;
}

/* Edit icon hover effects - Internal (green) */
.chat_user_info-internal .edit-button:hover .edit-icon,
.chat_user_info-internal .edit-buttonx:hover .edit-icon,
.chat_user_info-internal .edit-icon:hover {
  color: #288f6c !important;
}

/* Edit icon hover effects - External (orange) */
.chat_user_info:not(.chat_user_info-internal) .edit-button:hover .edit-icon,
.chat_user_info:not(.chat_user_info-internal) .edit-buttonx:hover .edit-icon,
.chat_user_info:not(.chat_user_info-internal) .edit-icon:hover {
  color: #f08438 !important;
}

/* Person add icon hover effects - Internal (green) */
.add-project-icon-hover-internal:hover .person-add-icon-fade-in,
.add-project-icon-hover-internal:hover .material-symbols-outlined,
.person-add-icon-container .add-project-icon-hover-internal:hover .person-add-icon-fade-in,
.person-add-icon-container .add-project-icon-hover-internal:hover span,
.person-add-icon-container .add-project-icon-hover-internal:hover span.material-symbols-outlined {
  color: #288f6c !important;
}

/* Person add icon hover effects - External (orange) */
.add-project-icon-hover:not(.add-project-icon-hover-internal):hover .person-add-icon-fade-in,
.add-project-icon-hover:not(.add-project-icon-hover-internal):hover .material-symbols-outlined,
.person-add-icon-container .add-project-icon-hover:not(.add-project-icon-hover-internal):hover .person-add-icon-fade-in,
.person-add-icon-container .add-project-icon-hover:not(.add-project-icon-hover-internal):hover span,
.person-add-icon-container .add-project-icon-hover:not(.add-project-icon-hover-internal):hover span.material-symbols-outlined {
  color: #f08438 !important;
}

.chat-user {
  text-align: center;
  border: 1px solid #ddd;
}

.chat-user h3 {
  color: #737373 !important;
  margin-bottom: 0;
  padding: 10px 0px;
}

.chat_user_info .main_heading {
  padding: 0px 0px;
  position: relative;
  display: block;
  margin: 0;
  text-align: center;
}

.chat_user_info .main_heading a {
  position: absolute;
  left: 10px;
}

.chat_user_info .chat_services {
  background: #fff;
  border-top: none;
}

.conversation_bottom {
  margin-top: 10px;
}

.cssScroll {
  display: flex;
  flex-direction: column-reverse;
}

.wscroll.right_wscroll.project_scrool {
  height: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  border-radius: 10px;
  overflow: hidden !important;
}

.fix-items .main_heading:hover {
  color: #000;
}

.project_overlay {
  background-color: rgb(252, 230, 215);
}

.company_list.right_company,
.company_list.right_company .bg-purple,
.company_list.right_company .admin-content {
  background-color: #f0efed;
}

.min_height.add_scrool {
  height: calc(44vh - 67px);
  border-radius: 10px;
  overflow: auto;
}

.min_height.add_scrool .invite {
  padding-bottom: 0 !important;
}

.p_company {
  color: #737373;
}

.p_postion {
  color: #737373;
}

.backdrop:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  background-color: rgba(255, 255, 255, 0.85) !important;
  /* z-index: 225; */
}

.company_list.right_company .bg-purple.bg-white {
  margin-top: 10px;
  padding: 10px 10px 0px;
}

.back-color {
  stroke: #f08438;
  background-color: white;
  margin-right: 5px;
  fill: #fff;
}

.company_list_ver .bg-purple a:hover {
  color: #f08438;
}

.company_list_ver .bg-purple .ax:hover {
  color: #288f6c;
}

.slider-icon {
  padding: 0px 18px;
}

.padding-left-right-2 .slider-icon {
  padding: 0px 7px !important;
}

.deselected-stage.like_folo .svg_icon svg {
  stroke: #737373;
}

.top-close {
  position: absolute;
  top: 6px;
  right: 10px;
  font-weight: 500;
  color: #f08438;
}

.top-close:hover {
  color: #f08438;
}

.click_plus_bottom .role_data {
  margin-bottom: 0;
}

.click_send img {
  padding-top: 8px;
}

@media (min-width: 600px) {
  .media_tabbing .MuiTab-root {
    min-width: 123px;
  }
}

.date_chat.media_date p {
  display: block;
  width: 100%;
  color: #f08438;
  background: #f5f5f5;
  margin-bottom: 6px;
}

.media_tabbing .MuiTab-textColorPrimary.Mui-selected {
  color: #f08438 !important;
}

.media_tabbing .MuiTab-textColorPrimary {
  font-weight: 400;
  color: #737373 !important;
}

.media_tabbing .PrivateTabIndicator-colorPrimary-5 {
  background-color: #f08438;
}

em-emoji-picker {
  /* --background-rgb: 255, 255, 255; */
  /* --border-radius: 24px; */
  /* --category-icon-size: 24px;
  --color-border-over: rgba(0, 0, 0, 0.1);
  --color-border: rgba(0, 0, 0, 0.05);
  --font-family: 'Comic Sans MS', 'Chalkboard SE', cursive;
  --font-size: 20px; */
  /* --rgb-accent: 255, 255, 255; */
  --rgb-background: 255, 255, 255;
  /* --rgb-color: 255, 255, 255; */
  /* --rgb-input: 255, 235, 235; */
  --shadow: 0px 0px 0px -0px #fff;
  /* height: 26.5vw;
  width: 370px; */
  height: 26.5vw;
}

/* ========================================
   EMOJI PICKER POPUP STYLES
   ======================================== */

/* Animations */
@keyframes emojiPickerSlideUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes emojiPickerFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* Popup content positioning and animation */
.emoji-picker-popup-content {
  left: 80% !important;
  right: auto !important;
  margin-left: -9.75vw !important;
  height: 27vw;
  width: 19.5vw;
  border-width: 0;
  animation: emojiPickerSlideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: bottom center;
}

/* Popup arrow styling */
.emoji-picker-popup-content > .popup-arrow {
  color: #fff;
  margin-right: 10px;
}

/* Emoji picker popup styling - match attachment menu */
.emoji-picker-popup {
  background: rgba(255, 255, 255, 0.9) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
  padding: 0 !important;
  animation: emojiPickerFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@keyframes emojiPickerFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.emoji-picker-popup.emoji-picker-closing {
  animation: fadeOut 0.25s ease-out forwards !important;
}

/* Message Info Page Icons - Material Symbols */
.message-info-icon .material-symbols-outlined,
.message-info-icon.material-symbols-outlined,
.menu-icon .material-symbols-outlined,
.menu-icon span.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  visibility: visible !important;
  opacity: 1 !important;
  vertical-align: middle !important;
}

/* Vertically center menu icons in list items */
.message-info-icon,
li.message-info-icon {
  display: flex !important;
  align-items: center !important;
}

.menu-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Edit icon styling */
.edit-button .edit-icon,
.edit-buttonx .edit-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  vertical-align: middle !important;
}

.edit-button:hover .edit-icon,
.edit-buttonx:hover .edit-icon {
  color: #f08438 !important;
}

/* Profile page icons (Settings and Edit) */
.profile-icon-link .edit-icon,
.profile-icon-link .profile-settings-icon {
  font-size: 24px;
  color: #737373 !important;
  display: inline-block;
  vertical-align: middle;
  font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
  transition: color 0.3s ease !important;
}

.profile-icon-link:hover .edit-icon,
.profile-icon-link:hover .profile-settings-icon {
  color: #f08438 !important;
}

/* Company page settings icon */
.company-settings-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  color: #737373 !important;
  transition: color 0.3s ease !important;
  vertical-align: middle !important;
}

/* Settings icon hover - green for Kjuup+, orange for Kjuup */
a:hover .company-settings-icon.company-kjuup-plus:not(.company-follow-icon),
Link:hover .company-settings-icon.company-kjuup-plus:not(.company-follow-icon),
.icon_right a:hover .company-settings-icon.company-kjuup-plus:not(.company-follow-icon) {
  color: #288f6c !important;
}

a:hover .company-settings-icon.company-kjuup:not(.company-follow-icon),
Link:hover .company-settings-icon.company-kjuup:not(.company-follow-icon),
.icon_right a:hover .company-settings-icon.company-kjuup:not(.company-follow-icon) {
  color: #f08438 !important;
}

/* Company page edit icon */
.company-edit-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  color: #737373 !important;
  transition: color 0.3s ease !important;
  vertical-align: middle !important;
}

/* Edit icon hover - green for Kjuup+, orange for Kjuup */
a:hover .company-edit-icon.company-kjuup-plus:not(.company-follow-icon),
Link:hover .company-edit-icon.company-kjuup-plus:not(.company-follow-icon),
.icon_right a:hover .company-edit-icon.company-kjuup-plus:not(.company-follow-icon),
.icon_right Link:hover .company-edit-icon.company-kjuup-plus:not(.company-follow-icon) {
  color: #288f6c !important;
}

a:hover .company-edit-icon.company-kjuup:not(.company-follow-icon),
Link:hover .company-edit-icon.company-kjuup:not(.company-follow-icon),
.icon_right a:hover .company-edit-icon.company-kjuup:not(.company-follow-icon),
.icon_right Link:hover .company-edit-icon.company-kjuup:not(.company-follow-icon) {
  color: #f08438 !important;
}

/* Company page location icon */
.company-location-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  color: #737373 !important;
  transition: color 0.3s ease !important;
  vertical-align: middle !important;
}

/* Location icon hover - green for Kjuup+, orange for Kjuup */
a:hover .company-location-icon.company-kjuup-plus:not(.company-follow-icon),
.icon_right a:hover .company-location-icon.company-kjuup-plus:not(.company-follow-icon) {
  color: #288f6c !important;
}

a:hover .company-location-icon.company-kjuup:not(.company-follow-icon),
.icon_right a:hover .company-location-icon.company-kjuup:not(.company-follow-icon) {
  color: #f08438 !important;
}

/* Folder Eye Icon Hover Effects */
.folder-eye-icon.company-kjuup-plus:hover,
span.folder-eye-icon.company-kjuup-plus:hover,
.material-symbols-outlined.folder-eye-icon.company-kjuup-plus:hover {
  color: #288f6c !important;
}

.folder-eye-icon.company-kjuup:hover,
span.folder-eye-icon.company-kjuup:hover,
.material-symbols-outlined.folder-eye-icon.company-kjuup:hover {
  color: #f08438 !important;
}

/* Hover state for Kjuup+ companies - only for follow icon (MUST come after location icon rule) */
a.pointer:hover .company-follow-icon.company-kjuup-plus,
a.pointer:hover .company-follow-icon.company-kjuup-plus.follow-active,
a.pointer:hover .company-follow-icon.company-kjuup-plus.follow-inactive,
a.pointer.social-icon-active_internal:hover .company-follow-icon.company-kjuup-plus,
a.pointer.social-icon-active:hover .company-follow-icon.company-kjuup-plus {
  color: #288f6c !important;
}

/* Hover state for regular Kjuup companies - follow icon shows orange */
a.pointer:hover .company-follow-icon.company-kjuup,
a.pointer:hover .company-follow-icon.company-kjuup.follow-active,
a.pointer:hover .company-follow-icon.company-kjuup.follow-inactive {
  color: #f08438 !important;
}

/* Company page person icon */
.company-person-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  color: #737373 !important;
  transition: color 0.3s ease !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Company page person add icon */
.company-person-add-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: center !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  color: #737373 !important;
  transition: color 0.3s ease !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* Person add icon fade-in animation */
.person-add-icon-fade-in {
  animation: fadeIn 0.3s ease-in;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.middle-title .company-person-icon,
.middle-title .company-person-add-icon {
  margin-right: 0 !important;
  max-width: none !important;
}

/* Company page follow icon (person_heart) */
.company-follow-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-flex !important;
  align-items: flex-start !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  transition: color 0.2s ease, font-variation-settings 0s !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

.company-follow-icon.follow-active {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  animation: iconJump 0.4s ease !important;
}

/* Kjuup+ companies (internal) - green when active */
.company-follow-icon.company-kjuup-plus.follow-active {
  color: #288f6c !important;
}

/* Kjuup companies (external) - orange when active */
.company-follow-icon.company-kjuup.follow-active {
  color: #f08438 !important;
}

/* Deactivated state - gray for all company types */
.company-follow-icon.follow-inactive {
  color: #737373 !important;
}


.company-follow-icon {
  opacity: 1 !important;
}

/* Ensure parent anchor tag aligns icon to top */
a.pointer .company-follow-icon {
  align-self: flex-start !important;
}

/* Article edit and delete icons */
.article-edit-icon,
.article-delete-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  color: #737373 !important;
  transition: color 0.3s ease !important;
  vertical-align: middle !important;
}

/* Hover effect for article edit icon - green for internal, orange for external */
a:hover .article-edit-icon.article-internal,
Link:hover .article-edit-icon.article-internal {
  color: #288f6c !important;
}

a:hover .article-edit-icon.article-external,
Link:hover .article-edit-icon.article-external,
a:hover .article-edit-icon:not(.article-internal),
Link:hover .article-edit-icon:not(.article-internal) {
  color: #f08438 !important;
}

/* Hover effect for article delete icon - green for internal, orange for external */
a:hover .article-delete-icon.article-internal {
  color: #288f6c !important;
}

a:hover .article-delete-icon.article-external,
a:hover .article-delete-icon:not(.article-internal) {
  color: #f08438 !important;
}

/* Project icons hover effects - green for internal rooms, orange for external rooms */
/* Each icon changes color only when that specific icon is hovered */
.project-internal .project-icon-person:hover,
.project-internal .pointer:hover .project-icon-person,
.project-internal a:hover .project-icon-person,
.project-internal h3:hover .project-icon-person {
  color: #288f6c !important;
}

.project-internal .project-icon-person-add:hover,
.project-internal .pointer:hover .project-icon-person-add,
.project-internal a:hover .project-icon-person-add {
  color: #288f6c !important;
}

.project-internal .project-icon-perm-media:hover,
.project-internal .pointer:hover .project-icon-perm-media,
.project-internal a:hover .project-icon-perm-media {
  color: #288f6c !important;
}

.project-external .project-icon-person:hover,
.project-external .pointer:hover .project-icon-person,
.project-external a:hover .project-icon-person,
.project-external h3:hover .project-icon-person {
  color: #f08438 !important;
}

.project-external .project-icon-person-add:hover,
.project-external .pointer:hover .project-icon-person-add,
.project-external a:hover .project-icon-person-add {
  color: #f08438 !important;
}

.project-external .project-icon-perm-media:hover,
.project-external .pointer:hover .project-icon-perm-media,
.project-external a:hover .project-icon-perm-media {
  color: #f08438 !important;
}

/* Project Add Circle Icon - Filled style with hover effects */
.project-icon-add-circle {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 22px !important;
  font-variation-settings:
    'FILL' 1,
    'wght' 400,
    'GRAD' 0,
    'opsz' 22 !important;
  color: #737373;
  transition: color 0.2s ease;
  display: inline-block;
  vertical-align: middle;
}

.project-internal .project-icon-add-circle:hover,
.project-internal .pointer:hover .project-icon-add-circle,
.project-internal a:hover .project-icon-add-circle {
  color: #288f6c !important;
}

.project-external .project-icon-add-circle:hover,
.project-external .pointer:hover .project-icon-add-circle,
.project-external a:hover .project-icon-add-circle {
  color: #f08438 !important;
}

/* Project Edit Icon Hover Effects */
a.pointer.project-internal:hover .project-edit-icon,
.pointer.project-internal:hover .project-edit-icon,
a.project-internal:hover .project-edit-icon {
  color: #288f6c !important;
}

a.pointer.project-external:hover .project-edit-icon,
.pointer.project-external:hover .project-edit-icon,
a.project-external:hover .project-edit-icon {
  color: #f08438 !important;
}

/* Project Bell Icon Hover Effects */
.project-internal .project-bell-icon:hover {
  color: #288f6c !important;
}

.project-external .project-bell-icon:hover {
  color: #f08438 !important;
}

/* Project Bell Icon - Keep original color when selected */
.active-project .project-bell-icon,
.active-project .project-internal .project-bell-icon,
.active-project .project-external .project-bell-icon {
  color: #737373 !important;
}

/* Invite External Component Icons */
.invite-icon-button .invite-icon,
.invite-icon-button .material-symbols-outlined.invite-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #737373 !important;
  transition: color 0.2s ease;
}

.invite-icon-button:hover .invite-icon,
.invite-icon-button:hover .material-symbols-outlined.invite-icon {
  color: #f08438 !important;
}

/* Remove User Icon */
.remove-user-container {
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 5px !important;
}

.remove-user-text {
  transition: color 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
  margin-right: 20px !important;
  padding-right: 0 !important;
  text-align: right !important;
}

.remove-user-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  vertical-align: middle !important;
  flex-shrink: 0;
  width: 24px !important;
  height: 24px !important;
  margin-left: 0 !important;
  padding-left: 0 !important;
}

.remove-user-container:hover .remove-user-text,
.remove-user-container:hover .remove-user-icon {
  color: #f08438 !important;
}

/* Image Icon with Fill */
.image-icon-filled {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
}

/* Add Circle Icon with Fill */
.add-circle-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  width: 24px !important;
  height: 24px !important;
  transition: color 0.2s ease;
  vertical-align: middle !important;
}

/* Copy Link Icon */
.copy-link-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 20px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 20 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  color: #f08438 !important;
  transition: color 0.2s ease;
  vertical-align: middle !important;
}

.message-info-icon:hover .material-symbols-outlined,
.message-info-icon.material-symbols-outlined:hover,
li.message-info-icon:hover .material-symbols-outlined,
.menu-icon:hover .material-symbols-outlined,
li.message-info-icon:hover .menu-icon .material-symbols-outlined {
  color: #f08438 !important;
}

/* Message info back arrow - green hover for internal chats */
body:has(.main_heading-internal) .message-info-icon:hover .material-symbols-outlined,
body:has(.main_heading-internal) .pointer.message-info-icon:hover .material-symbols-outlined,
body:has(.main_heading-internal) .message-info-icon.material-symbols-outlined:hover,
.pages-project:has(.chat-input-container-internal) .message-info-icon:hover .material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .pointer.message-info-icon:hover .material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .message-info-icon.material-symbols-outlined:hover,
body:has(.chat-input-container-internal) .message-info-icon:hover .material-symbols-outlined,
body:has(.chat-input-container-internal) .pointer.message-info-icon:hover .material-symbols-outlined,
body:has(.chat-input-container-internal) .message-info-icon.material-symbols-outlined:hover {
  color: #288f6c !important;
}

/* Check icons in message info */
.message-info-check.material-symbols-outlined {
  font-size: 15px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 15 !important;
  color: #737373 !important;
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  overflow-wrap: normal !important;
  direction: ltr !important;
  vertical-align: text-bottom !important;
  transform: translateY(0.1em) !important;
  -webkit-font-smoothing: antialiased !important;
}

.message-info-check.theme-color.material-symbols-outlined {
  color: #f08438 !important;
}

/* Fade-out animation when closing */
.emoji-picker-closing-content {
  animation: emojiPickerFadeOut 0.2s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
}

/* Emoji trigger button */
.emoji-picker-trigger {
  padding-right: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}

.emoji-picker-trigger.has-message {
  padding-left: 10px;
}

.emoji-picker-trigger img {
  width: 20px;
  height: auto;
}

/* ========================================
   PRELOADED EMOJI PICKER STYLES
   ======================================== */

/* Base container - compact reaction bar mode */
/* Quick reactions container */
.quick-reactions-container {
  background: #ffffff;
  border-radius: 24px;
  padding: 6px 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
}

.quick-reactions-row {
  display: flex;
  align-items: center;
  gap: 2px;
}

.quick-reaction-btn {
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s ease, transform 0.1s ease;
  padding: 0;
  line-height: 1;
  position: relative;
}

/* Highlight the first 3 most used emojis with a subtle indicator */
.quick-reaction-btn:nth-child(1),
.quick-reaction-btn:nth-child(2),
.quick-reaction-btn:nth-child(3) {
  background-color: #f8f9fa;
}

.quick-reaction-btn:hover {
  background-color: #f0f0f0;
  transform: scale(1.15);
}

.quick-reaction-btn:active {
  transform: scale(0.95);
}

.quick-reaction-btn.more-btn {
  background-color: #f0f0f0;
  color: #666;
  font-size: 18px;
  font-weight: 500;
}

.quick-reaction-btn.more-btn:hover {
  background-color: #e0e0e0;
}

.quick-reaction-btn.more-btn span {
  line-height: 1;
}

/* Full emoji picker (expanded view) */
.full-picker-container {
  border-radius: 12px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2);
}

.full-picker-container em-emoji-picker {
  --em-rgb-background: 255, 255, 255;
  --em-rgb-input: 245, 245, 245;
  --border-radius: 12px;
  height: 400px;
  max-height: 80vh;
}

.no_bg {
  background-color: transparent !important;
}

.media_section .wscroll.right_wscroll {
  height: calc(44vh - 50px);
}

.docs-content .theme-color svg {
  margin-left: 10px;
}

.search-chat {
  width: 100%;
  margin-left: 15px;
}

.search-chat .search .form-group input {
  height: 35px;
  padding-left: 35px;
}

.search-chat .search img.news_t_ser {
  top: 11px;
}

.Chat_up_down {
  background-color: #fff !important;
  position: absolute;
  /* top: -25px; */
  left: 0;
  right: 0;
  bottom: 0;
  /* border-bottom: 1px solid #ccc; */
  padding: 5px 10px;
}

.Chat_up_down a {
  color: #737373;
  font-size: 20px;
  margin-right: 15px;
}

/*.Chat_up_down a:hover{color: #f08438;}*/
.no_media {
  text-align: center;
  padding: 60px 0px;
}

.company_list_ver.add_user_scroll .min_height.add_scrool {
  height: calc(44vh - 50px);
}

.add_user_chat .search_div .search .form-group input {
  background: #fff;
}

.add_user_chat .search_div,
.add_user_chat .admin-content h5,
.add_user_chat .admin-control {
  padding: 0px 10px;
}

/*.toggle-updown .accordion .card .card-header{padding: 0px 0px;}*/
/*.toggle-updown{margin-top: 6px;}*/
/*.toggle-updown .accordion .card .card-header button{font-weight: 500;color: #737373;padding: 10px;width: 100%;text-align: left;}*/
/*.toggle-updown .accordion .card {border:none;}*/
/*.toggle-updown .accordion .card .card-header button:hover{text-decoration:none;}*/
/*.toggle-updown .accordion .card .collapse .card-body{padding:0;}*/
/*.toggle-updown .accordion .card .card-header{border:none;}*/
/*.toggle-updown .accordion .card {margin-top:4px;}*/
/*.add_user_chat_right .company_header .heading_icon .main_heading{line-height: 34px;}*/
/*.toggle-updown .accordion .card .card-header button svg{stroke:#737373;width: 30px;}*/
.react-multi-carousel-list {
  overflow: hidden !important;
}

.add_user_chat_right .company_header .heading_icon .main_heading {
  line-height: 34px;
}

.my_post,
.earlier {
  border-bottom: 1px solid #777;
}

.post_notification .media-body a.bg-gray-btn {
  background-color: #737373;
  padding: 4px 18px;
  font-size: 14px;
  color: #fff !important;
}

.right_notification svg {
  fill: #737373;
}

.like_folo a,
.like_folo span {
  /* color: #dfdfdf; */
}

.news-section .wscroll .media-desc .like_folo a:hover,
.news-section .wscroll .media-desc .like_folo a:hover span {
  color: #e0e0e0 !important;
}

.profile_section .profile-data .my-scroll .bottom-bar .react-multi-carousel-list .media-desc .like_folo a:hover span,
.profile_section .profile-data .my-scroll .bottom-bar .react-multi-carousel-list .media-desc .like_folo a:hover {
  color: #e0e0e0 !important;
}

.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .media-desc .no-company .like_folo a:hover span,
.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .media-desc .no-company .like_folo a:hover {
  color: #e0e0e0 !important;
}

.react-multi-carousel-dot-list {
  /* display: none !important; */
  bottom: -10px !important;
}

.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .forien-article .like_folo a,
.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .forien-article .like_folo a span {
  color: #737373 !important;
}

.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .forien-article .like_folo a svg {
  stroke: #737373 !important;
}

.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .forien-article .like_folo a:hover,
.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .forien-article .like_folo a:hover span {
  /* color: #f08438 !important; */
}

.company_section .my-scroll .bottom-bar .profile-data .react-multi-carousel-list .forien-article .like_folo a:hover svg {
  /* stroke: #f08438 !important; */
}

.deselect-role .card .card-header {
  flex-wrap: wrap;
}

.deselect-role .card .card-header p {
  flex: 0 0 100%;
  margin-bottom: 0;
  text-align: right;
  font-weight: 400;
  font-size: 13px;
  margin-top: 5px;
  cursor: pointer;
}

.color-gray {
  color: #737373 !important;
}

/* Forwarded message indicator (DMs) */
.forwarded-indicator-icon.material-symbols-outlined {
  color: #737373 !important;
}

.forwarded-indicator-text {
  color: #e0e0e0 !important;
}

/* Forward icon - Gray when no selection */
.forword-icon .color-gray.material-symbols-outlined,
.forword-icon a .color-gray.material-symbols-outlined,
.forword-chat .forword-icon .color-gray.material-symbols-outlined,
.forword-chat .forword-icon a .color-gray.material-symbols-outlined,
.Chat_up_down .forword-icon .color-gray.material-symbols-outlined,
.Chat_up_down .forword-icon a .color-gray.material-symbols-outlined {
  color: #e0e0e0 !important;
}

.add_company .wscroll .bottom-bar .feed-details .like_folo a:hover,
.add_company .wscroll .bottom-bar .feed-details .like_folo a:hover span {
  color: #e0e0e0 !important;
}

.wscroll.project_notification {
  height: calc(45vh - 55px);
}

.wscroll.project_notification .request_popup {
  border-bottom: 1px solid #e0e0e0;
  padding-bottom: 6px;
}

@media (min-width: 1900px) {
  .wscroll.right_wscroll.project_scrool {
    height: 100% !important;
    flex: 1 !important;
    min-height: 0 !important;
  }

  .showsmlinfo {
    min-height: 108px;
  }
}

.forward-msg .chat_desc .forword-conver>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.forward-msg .chat_desc .forword-conver .user_chat_content {
  justify-content: flex-end;
}

.forward-msg .chat_desc .forword-conver .user_chat_content.right_users {
  justify-content: end;
}

.details-company.forword-checkbox_main {
  position: relative;
}

.details-company.forword-checkbox_main .forward-checkbox {
  position: absolute;
  right: 15px;
  top: -13px;
}

.forward-group {
  position: absolute;
  bottom: 0;
  background: #fff;
  left: 0;
  right: 0;
  padding: 8px 15px;
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #f7f7f7;
}

.forward-group a {
  color: #000;
  font-size: 14px;
}

.text-orange {
  color: #f18638 !important;
}

/* Forward cancel button - Always #737373, no hover change */
.forword-chat .text-orange,
.forword-chat a.text-orange,
.Chat_up_down .forword-chat .text-orange,
.Chat_up_down .forword-chat a.text-orange {
  color: #737373 !important;
}

.forword-chat .text-orange:hover,
.forword-chat a.text-orange:hover,
.Chat_up_down .forword-chat .text-orange:hover,
.Chat_up_down .forword-chat a.text-orange:hover {
  color: #737373 !important;
}

/* Internal chat - Green text for forward cancel button (removed - now always #737373) */

.forward-group a:hover {
  color: #737373;
}

.pb-30 {
  padding-bottom: 30px;
}

.forword-chat {
  display: flex;
  justify-content: space-around;
  align-items: center;
  /* left: -20px !important;
  right: -20px; */
}

.worword_selected {
  font-weight: 500;
  font-size: 14px;
}

.forword-chat a {
  font-size: 14px;
}

.forward-msg .chat_desc .forword-conver>div .checkbox-div {
  position: relative;
}

.forward-msg .chat_desc .forword-conver>div .checkbox-div .checkmark {
  top: 50%;
  transform: translateY(-50%);
}

.my_project .one-to {
  margin-left: -10px;
  margin-right: -10px;
}

.my_project .one-to .add_one_to_user .admin_right .search_div {
  padding: 0px 10px;
}

.my_project .one-to .add_one_to_user .admin_right .search_div input {
  background-color: #f5f5f5;
}

.my_project .one-to .add_one_to_user .admin_right .admin-content h5 {
  padding: 6px 10px;
  margin: 0;
  margin-top: 0 !important;
}

.my_project .one-to .add_one_to_user .admin_right .admin-contact {
  margin-left: 0;
  margin-right: 0;
}

.my_project .one-to .main_heading {
  padding: 0;
  margin: 0;
}

.my_project .one-to .main_heading a {
  padding: 0;
  padding-left: 10px;
}

.forword-conver .d-inline-block {
  font-size: 14px;
}

.MuiTabs-scroller .PrivateTabIndicator-colorSecondary-8 {
  background-color: #f08438 !important;
}

/* Internal chat - Green tab indicator */
body:has(.main_heading-internal) .MuiTabs-scroller .PrivateTabIndicator-colorSecondary-8,
.pages-project:has(.chat-input-container-internal) .MuiTabs-scroller .PrivateTabIndicator-colorSecondary-8,
body:has(.chat-input-container-internal) .MuiTabs-scroller .PrivateTabIndicator-colorSecondary-8 {
  background-color: #288f6c !important;
}

.MuiTabs-scroller {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.MuiTabs-flexContainer {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
  gap: 0 !important;
}

.MuiTabs-indicator {
  margin-top: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  height: 2px !important;
}

.MuiTab-root {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

/* Forward icon - Orange when active (default for external chats) */
.active-forward.material-symbols-outlined {
  color: #f08438 !important;
  fill: #f08438 !important;
}

.forword-icon .active-forward.material-symbols-outlined,
.forword-icon a .active-forward.material-symbols-outlined,
.forword-chat:not(.forword-chat-internal) .forword-icon .active-forward.material-symbols-outlined,
.forword-chat:not(.forword-chat-internal) .forword-icon a .active-forward.material-symbols-outlined,
.Chat_up_down:not(.forword-chat-internal) .forword-icon .active-forward.material-symbols-outlined,
.Chat_up_down:not(.forword-chat-internal) .forword-icon a .active-forward.material-symbols-outlined,
.Chat_up_down.forword-chat:not(.forword-chat-internal) .forword-icon .active-forward.material-symbols-outlined,
.Chat_up_down.forword-chat:not(.forword-chat-internal) .forword-icon a .active-forward.material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - Green forward icon when active - Direct class approach */
.Chat_up_down.forword-chat.forword-chat-internal .forword-icon .active-forward.material-symbols-outlined,
.Chat_up_down.forword-chat.forword-chat-internal .forword-icon a .active-forward.material-symbols-outlined,
.Chat_up_down.forword-chat.forword-chat-internal .active-forward.material-symbols-outlined,
.forword-chat-internal .forword-icon .active-forward.material-symbols-outlined,
.forword-chat-internal .forword-icon a .active-forward.material-symbols-outlined,
.forword-chat-internal .active-forward.material-symbols-outlined {
  color: #288f6c !important;
  fill: #288f6c !important; /* Fallback for SVG elements */
}

/* Internal chat - Green forward icon when active - Has selector fallback */
body:has(.main_heading-internal) .Chat_up_down.forword-chat .forword-icon .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .Chat_up_down.forword-chat .forword-icon a .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .Chat_up_down .forword-chat .forword-icon .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .Chat_up_down .forword-chat .forword-icon a .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .forword-chat .forword-icon .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .forword-chat .forword-icon a .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .forword-icon .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .forword-icon a .active-forward.material-symbols-outlined,
body:has(.main_heading-internal) .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .Chat_up_down.forword-chat .forword-icon .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .Chat_up_down.forword-chat .forword-icon a .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .Chat_up_down .forword-chat .forword-icon .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .Chat_up_down .forword-chat .forword-icon a .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .forword-chat .forword-icon .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .forword-chat .forword-icon a .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .forword-icon .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .forword-icon a .active-forward.material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .Chat_up_down.forword-chat .forword-icon .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .Chat_up_down.forword-chat .forword-icon a .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .Chat_up_down .forword-chat .forword-icon .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .Chat_up_down .forword-chat .forword-icon a .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .forword-chat .forword-icon .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .forword-chat .forword-icon a .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .forword-icon .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .forword-icon a .active-forward.material-symbols-outlined,
body:has(.chat-input-container-internal) .active-forward.material-symbols-outlined {
  color: #288f6c !important;
  fill: #288f6c !important; /* Fallback for SVG elements */
}

.ccImage {
  height: 400;
  width: 0;
  object-fit: contain;
}

.thhImage {
  height: 0;
  width: 0;
  overflow: hidden;
}

.Chat_up_down a:hover {
  color: #737373 !important;
}

/* Forward cancel button - Override hover to always stay #737373 */
.Chat_up_down .forword-chat a.text-orange:hover,
.forword-chat a.text-orange:hover {
  color: #737373 !important;
}

/* Modern Forward Action Buttons */
.forward-action-buttons {
  display: flex;
  gap: 12px;
}

.forward-cancel-btn {
  border: 1px solid #d1d5db !important;
  background-color: #ffffff !important;
  color: #374151 !important;
  transition: all 0.2s ease !important;
}

.forward-cancel-btn:hover {
  background-color: #f9fafb !important;
  border-color: #9ca3af !important;
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

.forward-cancel-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}

.forward-submit-btn {
  transition: all 0.2s ease !important;
}

.forward-submit-btn:hover {
  opacity: 0.9 !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(240, 132, 56, 0.3) !important;
}

.forward-submit-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 2px rgba(240, 132, 56, 0.2) !important;
}

/* Internal chat - Green submit button */
body:has(.main_heading-internal) .forward-submit-btn,
.pages-project:has(.chat-input-container-internal) .forward-submit-btn,
body:has(.chat-input-container-internal) .forward-submit-btn {
  background-color: #288f6c !important;
  border-color: #288f6c !important;
}

body:has(.main_heading-internal) .forward-submit-btn:hover,
.pages-project:has(.chat-input-container-internal) .forward-submit-btn:hover,
body:has(.chat-input-container-internal) .forward-submit-btn:hover {
  box-shadow: 0 2px 4px rgba(40, 143, 108, 0.3) !important;
}

/* Forward Action Buttons in Project Details - Primary Button Style */
.forward-action-buttons-container .forward-submit-btn.forward-btn-internal,
.common_box_user_list .forward-submit-btn.forward-btn-internal,
.project-details .forward-submit-btn.forward-btn-internal {
  background-color: transparent !important;
  border: 1.5px solid #288f6c !important;
  color: #288f6c !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 10px 24px !important;
  box-shadow: none !important;
}

.forward-action-buttons-container .forward-submit-btn.forward-btn-internal:hover,
.common_box_user_list .forward-submit-btn.forward-btn-internal:hover,
.project-details .forward-submit-btn.forward-btn-internal:hover {
  background-color: #288f6c !important;
  border-color: #288f6c !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.forward-action-buttons-container .forward-submit-btn.forward-btn-external,
.common_box_user_list .forward-submit-btn.forward-btn-external,
.project-details .forward-submit-btn.forward-btn-external {
  background-color: transparent !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  font-size: 13px !important;
  padding: 10px 24px !important;
  box-shadow: none !important;
}

.forward-action-buttons-container .forward-submit-btn.forward-btn-external:hover,
.common_box_user_list .forward-submit-btn.forward-btn-external:hover,
.project-details .forward-submit-btn.forward-btn-external:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
  box-shadow: none !important;
  transform: translateY(-1px);
}

.delete_msg .chat_desc .forword-conver>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.delete_msg .chat_desc .forword-conver .user_chat_content.right_users {
  justify-content: end;
}

.delete_msg .chat_desc .forword-conver>div .checkbox-div {
  position: relative;
}

.delete_msg .chat_desc .forword-conver>div .checkbox-div .checkmark {
  top: 50%;
  transform: translateY(-50%);
}

.delete_msg .chat_desc .forword-conver.del-other>div {
  justify-content: flex-start;
}

.reply-section {
}

.reply-section a {
  color: #737373;
  font-size: 20px;
  margin-right: 15px;
}

.reply-msg {
  flex-wrap: wrap;
  border-left: 3px solid #f08438;
  padding: 5px 0px 10px 10px;
  background: #f0efed;
  position: relative;
  display: flex;
  align-items: center;
  border-top: none;
  border-bottom: none;
  justify-content: space-between;
}

/* Internal chat - Green border for reply messages */
body:has(.main_heading-internal) .reply-msg,
.pages-project:has(.chat-input-container-internal) .reply-msg,
body:has(.chat-input-container-internal) .reply-msg {
  border-left-color: #288f6c !important;
}

.img_video {
  flex: 0 0 70px;
  border-radius: 4px;
  overflow: hidden;
  justify-content: flex-end;
  /* margin-right: 0; */
  display: flex;
}

.img_video img {
  max-width: 100%;
}

.reply-msg p {
  margin-bottom: 0;
  text-overflow: ellipsis;
  width: 100%;
  overflow: hidden;
  margin-right: 30px;
  font-size: 13px;
  max-height: 300px;
}

.reply-msg .user-reply {  /* Color will be set via inline style using chat.themeColor */  width: 100%;  font-size: 16px;}

.cancel-reply {
  position: absolute;
  top: 5px;
  right: -2px;
}

/* Remove image icon (Material Symbols) with fill on hover */
.remove-image-icon {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

.remove-image-icon:hover {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important;
}

.cancel-reply a {
  font-size: 12px;
  font-weight: 500;
}

/* Cancel reply hover - external (orange) */
.cancel-reply-external:hover .material-symbols-outlined {
  color: #f08438 !important;
}

/* Cancel reply hover - internal (green) */
.cancel-reply-internal:hover .material-symbols-outlined {
  color: #288f6c !important;
}

.reply-left {
  background: #ffffff;
  border-left: 3px solid #f08438;
  padding: 5px;
  margin-bottom: 6px;
  overflow: hidden;
  font-size: 13px;
  border-radius: 8px;
}

/* Reply preview (left/right) - username styling */
.reply-left .reply-sender-name,
.reply-right .reply-sender-name,
.reply-left-image-text .reply-sender-name {
  margin: 0;
  margin-bottom: 4px;
  font-size: 13px;
  color: var(--reply-sender-color, #4693fd) !important;
}

.reply-right {
  background: #fff;
  border-left: 3px solid #f08438;
  padding: 5px;
  margin-bottom: 6px;
  overflow: hidden;
  border-radius: 8px;
}

.reply-left,
.reply-right .simple-msg {
  color: #737373;
}

.right_msg_reply {
  display: block;
  align-items: center;
}

.right_msg_reply img {
  max-width: 300px;
}

.right_reply_img {
  flex: 0 0 60px;
  margin-right: 15px;
}

/* Hide angle down button by default, show on message hover */
.contextMenu .toggleMenu {
  display: none !important;
}

/* Show menu only when hovering over actual message content elements (not empty space) */
.user_info_chat:has(.sender-name:hover) .contextMenu,
.user_info_chat:has(p:hover) .contextMenu,
.user_info_chat:has(.small:hover) .contextMenu,
.user_info_chat:has(span:hover) .contextMenu,
.user_info_chat:has([class*="simple-msg"]:hover) .contextMenu,
.user_info_chat:has([class*="reply-"]:hover) .contextMenu,
.user_info_chat:has(img:hover) .contextMenu,
.user_info_chat:has(video:hover) .contextMenu,
.user_info_chat:has(audio:hover) .contextMenu,
.image-message-container:hover .contextMenu,
.image-message-container:has(.chat-image-gallery:hover) .contextMenu,
.image-message-container:has(img:hover) .contextMenu,
.user_info_chat:has([class*="audio-file"]:hover) .contextMenu,
.user_info_chat:has([class*="video-file"]:hover) .contextMenu,
.user_info_chat:has([class*="document-file"]:hover) .contextMenu,
.user_info_chat:has([class*="emoji"]:hover) .contextMenu,
.user_info_chat:has([class*="contact"]:hover) .contextMenu,
.contact-right:has(.sender-name:hover) .contextMenu,
.contact-right:has(p:hover) .contextMenu,
.contact-right:has(span:hover) .contextMenu,
.contact-right:has(.small:hover) .contextMenu,
.contact-right:has(img:hover) .contextMenu,
.contact-right:has([class*="contact"]:hover) .contextMenu,
.contact-left:has(.sender-name:hover) .contextMenu,
.contact-left:has(p:hover) .contextMenu,
.contact-left:has(span:hover) .contextMenu,
.contact-left:has(.small:hover) .contextMenu,
.contact-left:has(img:hover) .contextMenu,
.contact-left:has([class*="contact"]:hover) .contextMenu,
.user_chat_content:has(.sender-name:hover) .contextMenu,
.user_chat_content:has(p:hover) .contextMenu,
.user_chat_content.right_users:has(.user_info_chat:hover) .contextMenu,
.user_chat_content.right_users:has(p:hover) .contextMenu,
.user_chat_content.right_users:has(span:hover) .contextMenu,
.user_chat_content.right_users:has([class*="simple-msg"]:hover) .contextMenu,
.user_chat_content.right_users:has([class*="reply-"]:hover) .contextMenu,
.user_chat_content.right_users:has(img:hover) .contextMenu,
.user_chat_content.right_users:has(video:hover) .contextMenu,
.user_chat_content.right_users:has(audio:hover) .contextMenu,
.contextMenu:hover {
  display: flex !important;
}

/* Keep contextMenu visible when emoji picker is active */
.contextMenu.emoji-picker-active,
.user_info_chat:has(.contextMenu.emoji-picker-active) .contextMenu,
.contact-left:has(.contextMenu.emoji-picker-active) .contextMenu,
.contact-right:has(.contextMenu.emoji-picker-active) .contextMenu {
  display: flex !important;
}

/* Make the Add Reaction button orange when emoji picker is open - NO background */
.message-action-btn.reaction-button-active {
  color: #f08438 !important;
  background: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.message-action-btn.reaction-button-active .material-symbols-outlined {
  color: #f08438 !important;
}

/* Voice Recording Mic Icon Styling */
.voice-recording-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.voice-recording-icon .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.voice-recording-icon:hover .material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - green hover for voice recording icon */
.chat-input-container-internal .voice-recording-icon:hover .material-symbols-outlined {
  color: #288f6c !important;
}

/* Add Icon Styling (plus/add button) */
.add-icon.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  display: inline-block;
  line-height: 1;
  cursor: pointer;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.add-icon.material-symbols-outlined:hover,
a:hover .add-icon.material-symbols-outlined,
button:hover .add-icon.material-symbols-outlined,
IconButton:hover .add-icon.material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - green hover for add icon */
.chat-input-container-internal .add-icon.material-symbols-outlined:hover,
.chat-input-container-internal a:hover .add-icon.material-symbols-outlined {
  color: #288f6c !important;
}

/* Voice Recording Send Icon (during recording) */
.recording-send-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.recording-send-icon .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.recording-send-icon:hover .material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - green hover for recording send icon */
.recording-container-internal .recording-send-icon:hover .material-symbols-outlined {
  color: #288f6c !important;
}

/* Voice Recording Cancel Icon (close button during recording) */
.recording-cancel-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 0.2s ease;
}

.recording-cancel-icon .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  display: inline-block;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.recording-cancel-icon:hover .material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - green hover for recording cancel icon */
.recording-container-internal .recording-cancel-icon:hover .material-symbols-outlined {
  color: #288f6c !important;
}

/* Vertically center recording icons */
.recording-cancel-icon,
.recording-send-icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 100% !important;
}

/* Make voice message progress bar orange */
.progress-wrapper .progress .progress-bar {
  background-color: #f08438 !important;
}

/* Internal chat - green progress bar */
.recording-container-internal .progress-wrapper .progress .progress-bar {
  background-color: #288f6c !important;
}

/* Add 20px padding on all sides for recording interface */
.row.align-items-center.justify-content-center.w-100.p-2,
.row.w-100.p-2.align-items-center.justify-content-center {
  padding: 20px !important;
}

/* Remove left margin from send icon column in recording interface */
.row.align-items-center.justify-content-center .col-1:last-child {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Remove right margin from timer column in recording interface */
.row .col-2.pl-0 {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* Document icon styling - Material Symbols */
.document-icon.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  display: inline-block !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 24px !important;
  height: 24px !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.attachment-btn .material-symbols-outlined,
.attachment-label .material-symbols-outlined,
label.attachment-btn .material-symbols-outlined,
label.attachment-label .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 20px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20 !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: #666 !important;
  transition: color 0.2s ease;
  display: inline-block !important;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 20px !important;
  height: 20px !important;
  user-select: none;
}

.attachment-btn:hover:not(.disabled) .material-symbols-outlined,
.attachment-label:hover:not(.disabled) .material-symbols-outlined,
label.attachment-btn:hover:not(.disabled) .material-symbols-outlined,
label.attachment-label:hover:not(.disabled) .material-symbols-outlined {
  color: #f08438 !important;
}

.attachment-btn.disabled .material-symbols-outlined,
.attachment-label.disabled .material-symbols-outlined,
label.attachment-btn.disabled .material-symbols-outlined,
label.attachment-label.disabled .material-symbols-outlined {
  color: #ccc !important;
}

/* Hover effects for all attachment icon types */
.attachment-btn:hover:not(.disabled) .perm-media-icon,
.attachment-label:hover:not(.disabled) .perm-media-icon,
label.attachment-btn:hover:not(.disabled) .perm-media-icon,
label.attachment-label:hover:not(.disabled) .perm-media-icon,
button.attachment-btn:hover:not(.disabled) .perm-media-icon {
  color: #f08438 !important;
}

.attachment-btn:hover:not(.disabled) .mic-icon,
.attachment-label:hover:not(.disabled) .mic-icon,
label.attachment-btn:hover:not(.disabled) .mic-icon,
label.attachment-label:hover:not(.disabled) .mic-icon,
button.attachment-btn:hover:not(.disabled) .mic-icon {
  color: #f08438 !important;
}

.reply-img {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left_users .user-avatar {
  margin-right: 5px;
  flex: 0 0 30px;
}

.left_users .user-avatar img {
  border-radius: 50% !important;
  height: 30px;
  width: 30px;
}

/* MessageInfo user-avatar images */
.message_ready_by .user-avatar img,
.message-info .user-avatar img {
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
}

/* MessageInfo col-2 profile images */
.message_ready_by .col-2 img,
.read_by_member .col-2 img {
  height: 24px !important;
  width: 24px !important;
}

/* Chat message user-avatar images (audio messages) */
.user_info_chat .user-avatar img,
.d-flex.align-items-center.pt-1 .user-avatar img {
  height: 24px !important;
  width: 24px !important;
  border-radius: 50% !important;
}

/* Message info back arrow - green hover for internal chats */
body:has(.main_heading-internal) .message-info-icon:hover .material-symbols-outlined,
body:has(.main_heading-internal) .pointer.message-info-icon:hover .material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .message-info-icon:hover .material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .pointer.message-info-icon:hover .material-symbols-outlined,
body:has(.chat-input-container-internal) .message-info-icon:hover .material-symbols-outlined,
body:has(.chat-input-container-internal) .pointer.message-info-icon:hover .material-symbols-outlined {
  color: #288f6c !important;
}

.left_users .audio-file audio {
  width: 100% !important;
  min-width: 300px !important;
  max-width: 400px !important;
  height: 40px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.right_users .user-avatar {
  margin-right: 5px;
  flex: 0 0 30px;
}

.right_users .user-avatar img {
  border-radius: 50% !important;
  height: 30px;
  width: 30px;
}

.right_users .audio-file audio {
  width: 100% !important;
  min-width: 300px !important;
  max-width: 400px !important;
  height: 40px !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* ========== Simple Voice Message Player (Teams-style) ========== */
.audio-file {
  display: flex !important;
  align-items: center !important;
  background: #f5f5f5 !important;
  border-radius: 8px !important;
    padding: 0 12px !important;
  min-width: 200px !important;
  max-width: 364px !important;
  width: 364px !important;
  gap: 12px !important;
  position: relative !important;
}

/* Hide audio element completely - we use custom controls */
.audio-file audio {
  position: absolute !important;
  opacity: 0 !important;
  pointer-events: none !important;
  width: 0 !important;
  height: 0 !important;
  visibility: hidden !important;
}

/* Custom play button - Teams style */
.audio-file .custom-play-button {
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  min-height: 40px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  transition: background-color 0.15s ease !important;
  flex-shrink: 0 !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
}

.audio-file .custom-play-button:hover {
  background-color: rgba(0, 0, 0, 0.05) !important;
}

.audio-file .custom-play-button .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 36px !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  text-transform: none !important;
  display: inline-block !important;
  white-space: nowrap !important;
  word-wrap: normal !important;
  direction: ltr !important;
  -webkit-font-feature-settings: 'liga' !important;
  -webkit-font-smoothing: antialiased !important;
  color: #616161 !important;
}

/* Modern voice player container */
.modern-voice-player {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

/* Custom audio player controls - Cross-browser compatible */
.custom-audio-player {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.custom-audio-player .audio-progress-container {
  display: flex !important;
  align-items: center !important;
  flex: 1 !important;
  min-width: 0 !important;
}

.custom-audio-player .audio-progress-bar {
  flex: 1 !important;
  height: 4px !important;
  background-color: #e8e8e8 !important;
  border-radius: 2px !important;
  position: relative !important;
  cursor: pointer !important;
  min-width: 60px !important;
}

.custom-audio-player .audio-progress-bar .progress-fill {
  height: 100% !important;
  background-color: #f08438 !important;
  border-radius: 2px !important;
  transition: width 0.1s linear !important;
  position: relative !important;
}

.custom-audio-player .audio-progress-bar .progress-thumb {
  position: absolute !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 12px !important;
  height: 12px !important;
  background-color: #f08438 !important;
  border-radius: 50% !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15) !important;
  cursor: pointer !important;
  opacity: 0 !important;
  transition: opacity 0.2s ease !important;
}

.custom-audio-player .audio-progress-bar:hover .progress-thumb {
  opacity: 1 !important;
}

.custom-audio-player .audio-time {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #666 !important;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
  min-width: 45px !important;
  text-align: right !important;
}

.custom-audio-player .audio-volume-button {
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  border: none !important;
  background: none !important;
  padding: 0 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #666 !important;
  flex-shrink: 0 !important;
  transition: color 0.15s ease !important;
}

.custom-audio-player .audio-volume-button:hover {
  color: #f08438 !important;
}

.custom-audio-player .audio-volume-button .material-symbols-outlined {
  font-size: 20px !important;
  line-height: 1 !important;
}

/* Ensure parent flex container doesn't cut off audio */
.d-flex.align-items-center .audio-file {
  flex: 1 1 auto !important;
  min-width: 300px !important;
  max-width: 364px !important;
  overflow: visible !important;
}

.reply-wrapper {
  display: flex;
  align-items: center;
  padding: 10px;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}

.reply-wrapper .input_text_msg {
  flex: 1 1 0%;
  width: auto !important;
  margin: 0px 20px 0px 10px !important;
  min-width: 0 !important;
  overflow: hidden;
  position: relative;
}

.reply-wrapper .input_text_msg .form-group {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 0 !important;
}

.reply-wrapper .input_text_msg textarea,
.reply-wrapper .input_text_msg .customInputBox,
.reply-wrapper .input_text_msg textarea.customInputBox {
  width: 100% !important;
  min-width: 50px !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  overflow-wrap: break-word;
  padding-right: 0 !important;
  margin: 0 !important;
}

/* Ensure reply-wrapper icons don't shrink */
.reply-wrapper > button,
.reply-wrapper > a {
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  margin-left: 0 !important;
  min-width: auto !important;
  width: auto !important;
}

/* Ensure emoji icon has proper spacing */
.reply-wrapper > a[id*="my-anchor-element"] {
  margin-left: 0 !important;
  padding-left: 0 !important;
  padding-right: 10px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Ensure voice recording icon has proper spacing */
.reply-wrapper > a:last-of-type:not([id*="my-anchor-element"]) {
  margin-left: 0 !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
}

/* Handle case when + button is hidden on direct messages */
.reply-wrapper > button[style*="display: none"],
.reply-wrapper > button.hidden {
  display: none !important;
  width: 0;
  margin: 0;
  padding: 0;
}

.chat_input {
  display: block;
}

/* Ensure user_list_div_left has fixed width and is left-aligned */
.right_side_bar_main_div {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
}

.right_side_bar_main_div .user_chat_history_main_div {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  flex: 1 1 0% !important;
}

.right_side_bar_main_div .user_list_div_left {
  width: 400px !important;
  min-width: 400px !important;
  max-width: 400px !important;
  flex-shrink: 0 !important;
  flex-grow: 0 !important;
  display: block !important;
  height: 100% !important;
}

.right_side_bar_main_div .user_list_div_left .w-300.my_project {
  height: calc(100vh - 55px) !important;
  max-height: calc(100vh - 55px) !important;
}

.right_side_bar_main_div .chanel_group_list_chat_main_div {
  flex: 1 1 0% !important;
  min-width: 0 !important;
}

.audio-react-recorder {
  height: 0;
}

.opacity_3 {
  opacity: 0.3;
}

.svg_icon svg .cls-1 {
  stroke-width: 0.5px !important;
}

.svg_icon.home_svg svg .cls-1,
.svg_icon.logout_icon svg .cls-1,
.project-notification-request svg .cls-1 {
  stroke-width: 2px !important;
}

.project-notification-static {
  background: #f18438;
  color: white;
  /* position: absolute; */
  top: 0;
  /* left: 15px; */
  height: 30px;
  min-width: 30px;
  margin-left: 5px;
  justify-content: center;
  align-items: center;
  display: flex;
}

.close-project-details {
  animation-name: pro-hide;
  transform-origin: left top;
  animation-duration: 200ms;
}

@keyframes pro-hide {
  0% {
    transform: scale(1);
  }

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

.open-project-details {
  animation-name: pro-visible;
  transform-origin: top left;
  /* animation-duration: 1s; */
  animation-duration: 200ms;
}

@keyframes pro-visible {
  0% {
    transform: scale(0);
  }

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

.project-details {
  z-index: 99;
  /* animation-name: pro-show; */
  transform-origin: left top !important;
  animation-duration: 1s;
}

/* @keyframes pro-show {
  0%   { transform: scale(0);}
  100% { transform: scale(1);}
} */

.toggle-info {
  height: 0;
  min-height: 0;
  padding: 0 10px;
}

.close-preview-dialog {
  background: #f08438;
  border: 1px solid #f08438;
  border-radius: 50%;
  color: white;
}

.feed-dialog .modal-content {
  background-color: transparent;
  border: 0;
}

.feed-slide {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

.emoji-mart {
  width: 100% !important;
  padding-top: 20px;
  border: none !important;
}

.emoji-mart-scroll {
  height: 170px !important;
}

/* .emoji-mart-category-label{
  display: none;
} */
.emoji-mart-search-icon,
.emoji-mart-preview {
  display: none;
}

.emoji-mart-category[aria-label="Frequently Used"] {
  /* visibility: hidden; */
}

.emoji-mart-category-label {
  visibility: hidden;
  /* margin-bottom: 5px;
  margin-top: -10px; */
}

/* .emoji-mart-preview,
.emoji-mart-search-icon,
.emoji-mart-category-label,
.emoji-mart-category[aria-label="Frequently Used"] {
  display: none;
} */
.close-fix {
  /* max-width: 440px; */
  width: 100%;
  display: flex;
}

.close-right {
  transition: max-width 800ms ease-out;
  max-width: 0 !important;
}

.close-rightbar {
  /* for chrome and safari*/
  -webkit-animation-duration: 1s;
  -webkit-animation-name: slidein;

  /*for firefox*/
  -moz-animation-duration: 1s;
  -moz-animation-name: slidein;

  /* for opera*/
  -o-animation-duration: 1s;
  -o-animation-name: slidein;

  /* Standard syntax*/
  animation-duration: 1s;
  animation-name: slidein;
}

@-webkit-keyframes slidein {
  from {
    margin-left: 500px;
  }

  to {
    margin-left: 10px;
  }
}

@-moz-keyframes slidein {
  from {
    margin-left: 500px;
  }

  to {
    margin-left: 10px;
  }
}

@-o-keyframes slidein {
  from {
    margin-left: 500px;
  }

  to {
    margin-left: 10px;
  }
}

@keyframes slidein {
  from {
    margin-left: 500px;
  }

  to {
    margin-left: 10px;
  }
}

.customize-floating-dialog-emoji {
  bottom: 0;
  transform: none;
  width: 100%;
  top: 15%;
  margin-top: 20px;
}

.role_data_emoji {
  margin-bottom: 20px;
}

.small, small {
  font-size: 80%;
  font-weight: 400;
  color: #737373 !important;
}

/* Custom date input styling */
input[type="date"] {
  position: relative;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  position: absolute;
  right: 10px;
  opacity: 0;
  cursor: pointer;
  height: 100%;
  width: 100%;
}

input[type="date"]::-webkit-datetime-edit-text {
  color: #737373;
  padding: 0 2px;
  content: ".";
}

input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: #737373;
}

input[type="date"]::-moz-datetime-edit-text {
  color: #737373;
  padding: 0 2px;
  content: ".";
}

input[type="date"]::-moz-datetime-edit-fields-wrapper {
  color: #737373;
}

input[type="date"]::-ms-datetime-edit-text {
  color: #737373;
  padding: 0 2px;
  content: ".";
}

input[type="date"]::-ms-datetime-edit-fields-wrapper {
  color: #737373;
}

.circle_icon_div svg {
  height: 20px !important;
  width: 20px !important;
}

.custom-richtext-internal .rdw-option-wrapper:active,
.rdw-option-active {
  box-shadow: none !important;
  background-color: #288f6c !important;
}

.custom-richtext-internal .rdw-option-wrapper:hover {
  box-shadow: none !important
}

.custom-richtext-internal .rdw-option-wrapper {
  margin: 0 !important;
  border: 1px solid #ddd
}

.custom-richtext .rdw-option-wrapper:active,
.rdw-option-active {
  box-shadow: none !important;
  background-color: #f08438 !important;
}

.custom-richtext .rdw-option-wrapper:hover {
  box-shadow: none !important
}


.custom-richtext .rdw-option-wrapper, .custom-richtext-internal .rdw-option-wrapper {
  border: none !important;
  border-radius: 5px !important;
  margin: 0 5px 0 0 !important;
  padding: 0 !important;
  width: 25px;
  height: 25px;
}

/* Override any other margin styles */
.custom-richtext .rdw-option-wrapper[class*="rdw-option-wrapper"],
.custom-richtext-internal .rdw-option-wrapper[class*="rdw-option-wrapper"] {
  margin: 0 5px 0 0 !important;
}

.custom-richtext .rdw-option-wrapper {
  margin: 0 !important;
  border: 1px solid #ddd
}

.demo-editor {
  border: 1px solid #F1F1F1 !important;
  background: #f7f7f7;
  font-size: 14px;
  padding-left: 10px;
  height: 200px !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  max-height: 100% !important;
}

/* Hide scrollbar by default, show only when content overflows */
.demo-editor::-webkit-scrollbar {
  width: 6px;
}

.demo-editor::-webkit-scrollbar-track {
  background: transparent;
}

.demo-editor::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 3px;
}

.demo-editor::-webkit-scrollbar-thumb:hover {
  background: #999;
}

/* For Firefox */
.demo-editor {
  scrollbar-width: thin;
  scrollbar-color: #ccc transparent;
}

.doc-file {
  height: 100% !important;
  width: 100% !important;
}

span.article-span>p {
  margin-bottom: 0px !important;
}

.see-more {
  padding-left: 0px !important;
}

.pg-viewer-wrapper .document-container {
  width: 379px !important;
}


intro,
footer {
  width: 400px;
  margin: auto;
}

.scroll {
  overflow: scroll;
  overflow-y: scroll;
}

/* Feed section left border */
.scroll > div[style*="width: calc(50%)"],
.scroll > div[style*="width:calc(50%)"] {
  border-left: 1px solid #e0e0e0 !important;
}

.scroll::-webkit-scrollbar {
  width: 8px;
}

.scroll::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
}

.scroll::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.5);
  background-color: rgba(240, 132, 56, 0.8)
}

/* Latest messages scrollbar - styled like chat scrollbar, show only on hover */
.latestmessages_scrollbar::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

.latestmessages_scrollbar::-webkit-scrollbar-button {
  display: none !important;
  height: 0 !important;
  width: 0 !important;
}

.latestmessages_scrollbar::-webkit-scrollbar-track {
  background: transparent;
}

.latestmessages_scrollbar::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: transparent;
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease;
}

.latestmessages_scrollbar:hover::-webkit-scrollbar-thumb {
  background-color: #e0e0e0;
}

/* Firefox scrollbar - show only on hover */
.latestmessages_scrollbar {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
  transition: scrollbar-color 0.3s ease;
  overflow-x: hidden !important;
  scrollbar-gutter: stable;
}

.latestmessages_scrollbar:hover {
  scrollbar-color: #e0e0e0 transparent;
}

/* Smooth scroll behavior for latest messages - use auto for pagination */
.latestmessages_scrollbar {
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
}

/* Pagination loader smooth appearance */
@keyframes paginationLoaderFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.latestmessages_scrollbar .pagination-loader {
  animation: paginationLoaderFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Smooth transitions for chat item content */
.latestmessages_scrollbar .company_services {
  transition: none;
  background-color: #f0efed !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

.latestmessages_scrollbar .company_centact {
  transition: none;
}

.listx {
  /* height: 84vh; */
  /* flex: 1; */
  /* padding: 0 1rem; */
  /* display: flex;
  flex-direction: column;
  overflow-x: hidden;
  overflow-y: auto; */
}

.list {
  width: 430px;
  margin: 10px auto;
  padding: 15px;
}

.item {
  border: 1px solid black;
  overflow: hidden;
  transform-origin: 30% 50% 0px;
  padding-left: 20px;
  background: white;
  max-height: 100%;
}

.item .dragHandle {
  visibility: hidden;
  position: absolute;
  top: 0;
  left: 0;
  cursor: move;
  width: 20px;
  height: 16px;
  background: url('../../../src/Icons/grippy.png') 30% 50% no-repeat no-repeat;
}

.item:hover .dragHandle,
.item.dragged .dragHandle {
  visibility: visible;
}

.item h2 {
  margin: 0;
}

.item .subtitle {
  font-weight: 500;
}

::-webkit-scrollbar {
  -webkit-appearance: none;
  width: 7px;
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: rgba(0, 0, 0, 0.5);
  -webkit-box-shadow: 0 0 1px rgba(255, 255, 255, 0.5);
}


.mentions {
  margin: 1em 0;
}

.mentions--singleLine .mentions__control {
  display: inline-block;
  width: 130px;
}
.mentions--singleLine .mentions__highlighter {
  padding: 1px;
  border: 2px inset transparent;
}
.mentions--singleLine .mentions__input {
  padding: 1px;
  border: 2px inset;
}

.mentions--multiLine .mentions__control {
  font-family: monospace;
  font-size: 14pt;
}
.mentions--multiLine .mentions__highlighter {
  border: 1px solid transparent;
  padding: 9px;
  min-height: 63px;
}
.mentions--multiLine .mentions__input {
  border: 1px solid silver;
  padding: 9px;
  outline: 0;
}

.mentions__suggestions__list {
  background-color: white;
  border: 1px solid rgba(0, 0, 0, 0.15);
  font-size: 10pt;
}

.mentions__suggestions__item {
  padding: 5px 15px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
}

.mentions__suggestions__item--focused {
  background-color: #cee4e5;
}

.mentions__mention {
  position: relative;
  z-index: 1;
  color: blue;
  text-shadow: 1px 1px 1px white, 1px -1px 1px white, -1px 1px 1px white,
    -1px -1px 1px white;
  text-decoration: underline;
  pointer-events: none;
}


.tabBar {
  display: flex;
}

.tab1 {
  border-bottom: 3px solid gray;
  /* flex:1; */
  /* height: 60; */
  /* text-align: center; */
}

.tab2 {
  border-bottom: 3px solid gray;
  flex:1;
  height: 60;
  text-align: center;
}

.CircularProgressbar-text {
  fill: yellow;
}

.MuiButton-label{
    color: #f08438;
}

/* Material-UI buttons - primary orange button style */
.setting_profile .MuiButton-root,
.setting_profile .MuiButtonBase-root.MuiButton-root,
.setting_profile button.MuiButton-root,
.setting_profile .MuiDialogActions-root .MuiButton-root,
.setting_profile .MuiDialogActions-root .MuiButtonBase-root.MuiButton-root,
.setting_profile .MuiDialogActions-root .MuiButton-text,
.setting_profile .MuiDialogActions-root .MuiButton-textPrimary {
  background-color: #fff !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  text-transform: none !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.setting_profile .MuiButton-root:hover,
.setting_profile .MuiButtonBase-root.MuiButton-root:hover,
.setting_profile button.MuiButton-root:hover,
.setting_profile .MuiDialogActions-root .MuiButton-root:hover,
.setting_profile .MuiDialogActions-root .MuiButtonBase-root.MuiButton-root:hover,
.setting_profile .MuiDialogActions-root .MuiButton-text:hover,
.setting_profile .MuiDialogActions-root .MuiButton-textPrimary:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.setting_profile .MuiButton-label,
.setting_profile .MuiButton-label span,
.setting_profile .MuiDialogActions-root .MuiButton-label,
.setting_profile .MuiDialogActions-root .MuiButton-label span {
  color: inherit !important;
}

.setting_profile .MuiButton-root:hover .MuiButton-label,
.setting_profile .MuiButton-root:hover .MuiButton-label span,
.setting_profile .MuiDialogActions-root .MuiButton-root:hover .MuiButton-label,
.setting_profile .MuiDialogActions-root .MuiButton-root:hover .MuiButton-label span {
  color: #fff !important;
}

/* Material-UI buttons - global primary button style */
.MuiButton-root.MuiButton-textPrimary,
.MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary,
button.MuiButton-root.MuiButton-textPrimary {
  background-color: #fff !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  text-transform: none !important;
  transition: all 0.3s ease !important;
  box-shadow: none !important;
}

.MuiButton-root.MuiButton-textPrimary:hover,
.MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover,
button.MuiButton-root.MuiButton-textPrimary:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
  box-shadow: none !important;
}

.MuiButton-root.MuiButton-textPrimary .MuiButton-label,
.MuiButton-root.MuiButton-textPrimary .MuiButton-label span,
.MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label,
.MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label span {
  color: inherit !important;
}

.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label,
.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label span,
.MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label,
.MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label span {
  color: #fff !important;
}

/* Material-UI Dialog Actions buttons - apply primary button style */
.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary,
.MuiDialogActions-root button.MuiButton-root.MuiButton-textPrimary,
.MuiDialogActions-root.MuiDialogActions-spacing button.MuiButton-root.MuiButton-textPrimary {
  background-color: #fff !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px !important;
  font-weight: 500 !important;
  padding: 10px 24px !important;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 80px !important;
}

.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:hover,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:hover,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover,
.MuiDialogActions-root button.MuiButton-root.MuiButton-textPrimary:hover,
.MuiDialogActions-root.MuiDialogActions-spacing button.MuiButton-root.MuiButton-textPrimary:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
}

/* Ensure button label text is visible */
.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary .MuiButton-label,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary .MuiButton-label,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label,
.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary .MuiButton-label span,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label span,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary .MuiButton-label span,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label span {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #f08438 !important;
  font-size: inherit !important;
  line-height: normal !important;
}

.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label,
.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label span,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label span,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label span,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label span {
  color: #fff !important;
}

/* Add "Cancel" text when button label is empty */
.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary .MuiButton-label:empty::before,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label:empty::before,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary .MuiButton-label:empty::before,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary .MuiButton-label:empty::before {
  content: "Cancel" !important;
  display: inline-block !important;
  color: #f08438 !important;
}

.MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label:empty::before,
.MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label:empty::before,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label:empty::before,
.MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary:hover .MuiButton-label:empty::before {
  color: #fff !important;
}

/* Container */
.chat-list-container {
  width: 90%;
  margin: 20px auto;
  font-family: 'Work Sans', sans-serif;
}

/* Individual chat group row */
.chat-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 15px;
  border-radius: 8px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  margin-top: 40px;
}

/* Icon container */
.icon-container {
  width: 36px;
  height: 36px;
  background-color: #61b6a5; /* Custom icon color */
  color: white;
  font-weight: 500;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  margin-right: 10px;
}

/* Chat content */
.chat-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.chat-title {
  font-size: 14px;
  font-weight: 500;
  color: #333;
}

.chat-description {
  font-size: 12px;
  color: #777;
}

/* Action buttons */
.action-buttons {
  display: flex;
  /* gap: 10px; */
}

.btn {
  border: none;
  width: 80px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
}

.call-btn {
  background-color: #61b6a5; /* Green button */
}

.call-btn:hover {
  background-color: #4a8e80;
}

.hangup-btn {
  background-color: #d9534f; /* Red button */
}

.hangup-btn:hover {
  background-color: #c9302c;
}





/* Center the SVG */
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  /* height: 100vh; */
  background-color: #f9f9f9;
}

/* SVG container with transition */
.svg-container {
  transition: opacity 1.5s ease-in-out;
}

/* Fade-In: Fully visible with fill color */
.fade-in {
  opacity: 1;
}

.fade-in .svg-icon {
  fill: #288f6c; /* Fill color when visible */
  stroke: #288f6c; /* Border color */
  transition: fill 1.5s ease-in-out, stroke 1.5s ease-in-out;
}

/* Fade-Out: Transparent and no fill */
.fade-out {
  opacity: 0;
}

.fade-out .svg-icon {
  fill: none; /* No fill when faded out */
  stroke: #288f6c; /* Retain border color */
  transition: fill 3s ease-in-out, stroke 3s ease-in-out;
}

/* Ensure SVG stroke is visible */
.svg-icon {
  width: 45px;
  height: 45px;
  stroke-width: 2;
}




/* New css */
.chat_box_main_div {
  background: #fff;
}
.chat_search_div .form-group input {
  padding-left: 38px;
}
.chat_search_div img {
  top: 15px;
}
.tabs_mob_view {
  display: none;
}
.back_icon {
  margin-bottom: 0px;
  margin-right: 10px;
}
.back_icon img {
  max-width: 7px;
}
.show_in_mob {
  display: none;
}
.group_chat_head_div {
  padding-left: 10px;
}
.group_chat_title_div {
  display: flex;
  align-items: center;
}
.group_chat_title_div .back_icon {
  margin-right: 15px;
}
/* Group chat header - member names color */
.group-member-names {
  color: #737373 !important;
}
#tabbar_main_div {
  column-gap: 20px;
  height: auto !important;
  padding-top: 15px !important;
  padding-bottom: 15px !important;
  min-height: auto !important;
  max-height: inherit !important;
  padding-left: 7px !important;
  padding-right: 7px !important;
}
#tabbar_main_div .tabs_items_div {
  cursor: pointer;
  margin-left: 0px !important;
  margin-right: 0px !important;
}
#tabbar_main_div .tabs_items_div span {
  padding: 0px !important;
}





@media only screen and (min-width: 320px) and (max-width: 767px) {
  html body #navbar_div svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
  }
  .main_nav  {
    width: 65px;
    flex: 0 0 65px;
    border-right: 1px solid #e0e0e0;
    height: 100vh;
  }
  .common_box_user_list {
    width: 100%;
  }
  .edit_project_main_div {
    width: 100%;
    height: 100vh !important;
    border-radius: 0px;
  }
  .my_project .main_heading {
    font-size: 16px;
    height: auto !important;
    line-height: inherit;
    padding: 15px 10px !important;
  }

  .search {
      margin: 5px 0px;
  }
  .my_project .search .form-group input {
      height: 35px;
  }
  .chat_services .company_centact .website_img {
      flex: 0 0 40px;
      padding-left: 8px;
      padding-top: 6px;
      padding-bottom: 6px;
  }
  .website .details-company {
    margin-left: 10px;
    /* padding: 6px 0px; */
  }
  .user_list_div_left {
      width: 100%;
  }
  .user_chat_div_right {
    /* height: 100vh; */
    height: calc(100vh - 55px);
    width: 100%;
  }
  .chat_text .chat_header {
      padding: 10px 10px !important;
      height: auto !important;
  }
  .chat_header img {
      margin-right: 10px !important;
  }
  .user_chat_div_right .infinite-scroll-component {
      padding: 70px 20px 20px !important;
  }
  .infinite-scroll-component  {
    padding-top: 70px !important;
  }
  .chat_user_name {
      font-size: 15px !important;
      line-height: 16px !important;
      display: block;
  }
  .chat_services .website .details-company p {
    width: auto;
  }
  .main_heading a.main_heading.pointer {
      padding: 0px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_list_chat_main_div {
    height: 100vh;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  .chanel_group_userchat_div {
    width: 100%;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .click_left_sec_hide {
    display: none;
  }
  .tabs_mob_view {
    display: flex;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  /* .chanel_group_list_chat_main_div { */
  .company_header .heading_icon div, .company_header .heading_icon a {
    font-size: 14px !important;
  }
  .admin-control h4,
  .admin-control h5 {
      font-size: 14px;
      margin-bottom: 0px;
  }
  .admin-control h4 span,
  .admin-control h5 span {
    font-size: 12px;
  }
  .setting_accrd .card-header {
    font-size: 15px;
  }
  .project_action img {
      width: 18px;
      height: auto;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }

  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  #tabbar_main_div {
    column-gap: 6px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
  #tabbar_main_div .tabs_items_div span {
      font-size: 15px !important;
  }
  .chat_input_new_div {
      left: calc(0% - -55px) !important;
  }
  .show_in_mob {
    display: block;
  }
  .group_chat_title_div {
    display: flex;
    align-items: center;
  }
  .pl-4.pr-4.pt-0.immoanimation-enter-done.p-0.chat_user_info.group_chat_user_info.border-radius-0.m-0 {
      padding-left: 16px !important;
      padding-right: 16px !important;
  }
  .px-3.pr-5.immoanimation-enter-done.p-0.chat_user_info {
      margin-left: 0px;
      padding-left: 16px !important;
      padding-right: 16px !important;
  }
  .group_chat_head_div {
    padding-left: 0px;
  }
  .group_chat_title_div .back_icon {
      margin-right: 15px !important;
  }
  .mobile_none {
    display: none;
  }
  .mobile_block {
    display: block;
  }
  #group_info_heading_div {
      left: 0px;
  }
  #group_info_heading_div img {
      margin-left: 0px !important;
  }
  .main_heading {
    font-size: 16px;
    line-height: 50px;
  }
  .clinet_name_text h5 {
    font-size: 16px !important;
  }
  .group_chat_user_info {
      padding-left: 16px !important;
      padding-right: 16px !important;
  }
  .media_section {
    width: 100%;
      margin-left: 0px;
  }
  .media_section_main_div {
    width: 100%;
  }
  .media_section_main_div .chat_user_info {
      margin-left: 0px !important;
    padding-left: 16px;
    padding-right: 16px !important;
  } 
  .media_tabbing .heading_icon {
    margin: 0 0px;
  }
  .profile_section {
      padding-left: 16px !important;
      padding-right: 16px !important;
      width: 100% !important;
  }
  .user_profile {
    justify-content: center;
  }
  .profile_arrow_div {
    position: relative;
  }
  .profile_arrow_div .back_icon {
      position: absolute;
      top: 50%;
      left: 0px;
      transform: translate(0%, -50%);
  }
  .my_project_user .search svg {
    left: 4px;
  }
  .main-div {
    padding: 10px 10px 10px;
  }
  .latestmessages_scrollbar {
      height: calc(100vh - 60px) !important;
  }
  
  /* Attachment menu popup - mobile sizing */
  .role_popup.dialog.click_plus {
    width: 85% !important;
    max-width: 300px !important;
  }
  
  /* Override fixed width on w-300 for mobile */
  .w-300 {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Chat group border for mobile view */
  .w-300.chat_text.chat_box_main_div {
    border-left: 1px solid #e0e0e0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

@media only screen and (min-width: 768px) and (max-width: 1366px) {
  /* .user_list_main_box {
      position: absolute;
      z-index: 99;
      top: 0px;
  } */
  .user_chat_history_main_div {
    height: 100vh;
  }
  .common_box_user_list {
    width: 100%;
  }
  .edit_project_main_div {
    width: 100%;
  }
  .user_chat_div_right {
    width: 100%;
  }
  .right_side_bar_main_div .user_list_div_left {
    width: 400px !important;
    min-width: 400px !important;
    max-width: 400px !important;
    flex-shrink: 0 !important;
  }
  .chanel_group_list_chat_main_div {
    width: 100%;
  }
  .chanel_group_userlist_div {
    width: 100%;
  }
  /* .click_left_sec_hide {
    width: 100%;
  } */
  a.main_heading.pointer {
    font-size: 14px !important;
  }
  .chat_input_new_div {
      left: calc(0% - -65px) !important;
  }
  .company_header .heading_icon div, .company_header .heading_icon a {
    font-size: 16px !important;
  }
  .user_chat_div_right .infinite-scroll-component {
      padding: 70px 20px 20px !important;
  }
  .infinite-scroll-component  {
    padding-top: 70px !important;
  }
  .full_height_div {
    height: 100vh;
  }
  .admin-control h4,
  .admin-control h5 {
      font-size: 14px;
      margin-bottom: 0px;
  }
  .admin-control h4 span,
  .admin-control h5 span {
    font-size: 12px;
  }
  .setting_accrd .card-header {
      font-size: 14px;
  }
  .project_action img {
      width: 18px;
      height: auto;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }
  .main_heading svg {
    max-width: 20px;
      height: auto;
  }
  .subdiv .label {
      font-size: 12px;
      font-weight: 500;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  .tabs_mob_view {
    display: flex;
  }
  .search .form-group input {
    height: 35px;
    max-width: 400px;
  }
  .chat_search_div img {
      top: 11px;
  }
  .heading_icon .main_heading img {
    position: relative;
    top: 1px;
    width: 8px !important;
  }
  #tabbar_main_div .tabs_items_div span {
    font-size: 15px !important;
  }
  .show_in_mob {
    display: block;
  }
  .group_chat_title_div {
    display: flex;
    align-items: center;
  }
  .mobile_none {
    display: none;
  }
  .mobile_block {
    display: block;
  }
  .profile_section {
      padding-left: 16px !important;
      padding-right: 16px !important;
      width: 100% !important;
  }
  .main_nav {
    height: 100vh;
  }
  .px-3.pr-5.immoanimation-enter-done.p-0.chat_user_info {
      margin-left: 0px;
      padding-left: 16px !important;
      padding-right: 16px !important;
  }
  #group_info_heading_div {
      left: 0px;
  }
  #group_info_heading_div img {
      margin-left: 0px !important;
  }
  .profile_arrow_div .back_icon {
    display: block;
  }
  .profile_arrow_div {
    display: flex;
    align-items: center;
  }
  .media_section_main_div {
    width: 100%;
      padding: 0 16px;
  }
  .latestmessages_scrollbar {
      height: calc(100vh - 70px) !important;
  }
  
  /* Override fixed width on w-300 for tablet */
  .w-300.chat_text.chat_box_main_div {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  /* Chat group border for tablet view */
  .w-300.chat_text.chat_box_main_div {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
}

/* Mobile: room list full width */
@media only screen and (max-width: 860px) {
  .w-300,
  .common_box_user_list,
  .project_list_div,
  .user_list_main_box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }
  .right_side_bar .user_list_div_left,
  .right_side_bar_main_div .user_list_div_left {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
  }
  /* Room details view: take full width and height when opened */
  .project-details {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    height: 100% !important;
    min-height: 100% !important;
  }
  /* Chats list in room details */
  .chats_user,
  .company_services,
  .chat_services,
  .bottom-bar {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }
  /* Project details container on mobile */
  .chanel_group_list_chat_main_div {
    overflow: hidden !important;
  }
}

@media only screen and (min-width: 1367px) and (max-width: 1199px) {
  .user_list_main_box {
      width: 300px;
  }
  .common_box_user_list {
    width: 300px;
  }
  .edit_project_main_div {
    width: 300px;
  }
  .chat_input_new_div {
    left: calc(68%) !important;
  }
  a.main_heading.pointer {
    font-size: 14px !important;
  }
  .company_header .heading_icon div, .company_header .heading_icon a {
    font-size: 16px !important;
  }
  .admin-control h4,
  .admin-control h5 {
      font-size: 14px;
      margin-bottom: 0px;
  }
  .admin-control h4 span,
  .admin-control h5 span {
    font-size: 12px;
  }
  .setting_accrd .card-header {
    font-size: 15px;
  }
  .project_action img {
      width: 18px;
      height: auto;
  }
  .circle_icon_div svg {
      max-width: 20px;
      height: auto;
  }
  .main_heading svg {
    max-width: 20px;
      height: auto;
  }
  .subdiv .label {
      font-size: 13px;
  }
  .project_list_div .react-horizontal-scrolling-menu--item {
      font-size: 14px;
  }
  .project_list_div .tt-l svg {
      width: 16px;
      height: auto;
  }
  .chats_user h5 a svg {
    max-width: 20px;
      height: auto;
  }
  .main_heading a.main_heading.pointer {
    padding: 0px 10px !important;
  }
  .main_heading a.main_heading.pointer img {
      margin-left: 0px !important;
      margin-top: 0px !important;
  }
  .admin-contact .admin-control {
    align-items: center;
  }
  .admin-contact .admin-control h4 {
      line-height: inherit;
      margin-bottom: 0px;
  }
  #tabbar_main_div .tabs_items_div span {
    font-size: 15px !important;
  }
}


@media only screen and (min-width:  1441px) and (max-width: 1660px) {
  .user_list_main_box {
      width: 350px;
  }
  .common_box_user_list {
    width: 400px;
  }
  .edit_project_main_div {
    width: 350px;
  }
  .chat_input_new_div {
    left: calc(62%) !important;
  }
}

.card-header {
  background-color: #ffffff;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}

.card-header .project-checkbox {
    display: flex;
  justify-content: space-between;
}

/* Style for the Hide room card header */
.card-header {
  background-color: #ffffff;
  border-radius: 8px;
  padding: 0.4rem 0.8rem;
  font-size: 14px;
  font-weight: 500;
  border-bottom: none;
}

.project-checkbox {
    display: flex;
  /*justify-content: space-between;*/
  /* background-color: #f0efed; */
  /*padding-bottom: 10px;*/
  border-bottom-left-radius: 0.475rem;
  border-bottom-right-radius: 0.475rem;
}

/* Style for the Hide room card header */
.hide-room-card-header {
  border-radius: 4px !important;
  padding: 0.4rem 0.8rem;
  border-bottom: none;
  height: 38px;
}
.style attribute {
  cursor: pointer !important;
}

/* ===========================
   INTERNAL PROJECT INPUT STYLING - HIGH PRIORITY
   Green border for react-autosuggest inputs in internal projects
   Must be at the end to override all other styles
   =========================== */
.internal .react-autosuggest__input:hover,
.internal .react-autosuggest__input:focus,
.internal .react-autosuggest__input--focused,
.internal .add_company_from .react-autosuggest__input:hover,
.internal .add_company_from .react-autosuggest__input:focus,
.internal .add_company_from .react-autosuggest__input--focused,
.internal.edit_project_main_div .react-autosuggest__input:hover,
.internal.edit_project_main_div .react-autosuggest__input:focus,
.internal.edit_project_main_div .react-autosuggest__input--focused,
.internal.w-300 .react-autosuggest__input:hover,
.internal.w-300 .react-autosuggest__input:focus,
.internal.w-300 .react-autosuggest__input--focused,
.internal.add_company .react-autosuggest__input:hover,
.internal.add_company .react-autosuggest__input:focus,
.internal.add_company .react-autosuggest__input--focused,
.w-300.internal.edit_project_main_div .react-autosuggest__input:hover,
.w-300.internal.edit_project_main_div .react-autosuggest__input:focus,
.w-300.internal.edit_project_main_div .react-autosuggest__input--focused,
.w-300.internal .add_company_from .react-autosuggest__input:hover,
.w-300.internal .add_company_from .react-autosuggest__input:focus,
.w-300.internal .add_company_from .react-autosuggest__input--focused,
.edit_project_main_div:has(.internal-project-input) .react-autosuggest__input:hover,
.edit_project_main_div:has(.internal-project-input) .react-autosuggest__input:focus,
.edit_project_main_div:has(.internal-project-input) .react-autosuggest__input--focused {
  border: 1px solid #288f6c !important;
  border-color: #288f6c !important;
  outline: none !important;
}

/* Add green 1px border on hover for internal react-autosuggest inputs - HIGH PRIORITY */
.internal .react-autosuggest__input:hover,
.internal .add_company_from .react-autosuggest__input:hover,
.internal.edit_project_main_div .react-autosuggest__input:hover,
.internal.w-300 .react-autosuggest__input:hover,
.internal.add_company .react-autosuggest__input:hover,
.w-300.internal.edit_project_main_div .react-autosuggest__input:hover,
.w-300.internal .add_company_from .react-autosuggest__input:hover,
.w-300.add_company.internal .add_company_from .react-autosuggest__input:hover,
.edit_project_main_div:has(.internal-project-input) .react-autosuggest__input:hover,
html body .internal .react-autosuggest__input:hover,
html body .internal .add_company_from .react-autosuggest__input:hover,
html body .internal.edit_project_main_div .react-autosuggest__input:hover,
html body .internal.w-300 .react-autosuggest__input:hover,
html body .internal.add_company .react-autosuggest__input:hover,
html body .w-300.internal.edit_project_main_div .react-autosuggest__input:hover,
html body .w-300.internal .add_company_from .react-autosuggest__input:hover,
html body .w-300.add_company.internal .add_company_from .react-autosuggest__input:hover {
  border: 1px solid #288f6c !important;
  border-color: #288f6c !important;
  outline: none !important;
}

/* ===========================
   PAGE TITLE HEADINGS
   Standardized h3 styling for page titles
   =========================== */

/* Main page title - used in modal headers and page sections */
h3.page-title,
.page-title {
  margin-left: 10px;
  font-size: 13px;
  color: #737373;
  font-weight: 500;
  clear: both;
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 0;
  margin-bottom: 0;
}

/* Larger page title variant - for main headings */
h3.page-title-large,
.page-title-large {
  margin-left: 10px;
  font-size: 18px;
  color: #000;
  font-weight: 500;
  display: inline-block;
  margin-top: 0;
  margin-bottom: 0;
}

/* ===========================
   MODERN ARROW ICONS
   Standardize all arrow icons to modern 16x16px gray style
   =========================== */

/* Arrow icon inline - ensure 16x16px */
.arrow-icon-inline,
img.arrow-icon-inline {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  opacity: 1 !important;
}

/* Modernize all arrow images - consistent 16x16px and gray #737373 */
img[src*="arrow-right-modern-gray.svg"],
img[src*="arrow-left-modern-gray.svg"],
img[src*="arrow-down-modern.svg"],
img[src*="arrow-up-modern.svg"],
img[src*="arrow-rightdeselected.svg"],
img[src*="arrow-left-deselected.svg"],
img.arrow-icon,
img.arrow-icon-inline {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(48%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(92%) contrast(81%) !important;
}

/* Extra specificity to override inline styles and width/height attributes */
html body img[src*="arrow-right-modern-gray.svg"],
html body img[src*="arrow-left-modern-gray.svg"],
html body img[src*="arrow-down-modern.svg"],
html body img[src*="arrow-up-modern.svg"],
html body img[src*="arrow-rightdeselected.svg"],
html body img[src*="arrow-left-deselected.svg"],
html body img[width="16"][src*="arrow"],
html body .arrow-icon,
html body .arrow-icon-inline {
  width: 16px !important;
  height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  opacity: 1 !important;
  filter: brightness(0) saturate(100%) invert(48%) sepia(0%) saturate(0%) hue-rotate(240deg) brightness(92%) contrast(81%) !important;
}

/* Colored arrows - Orange for external */
img[src*="arrow-right-modern-orange.svg"],
img[src*="arrow-left-modern-orange.svg"],
img[src*="arrow-down-modern-orange.svg"] {
  filter: brightness(0) saturate(100%) invert(56%) sepia(94%) saturate(1349%) hue-rotate(342deg) brightness(99%) contrast(93%) !important;
}

/* Colored arrows - Green for internal */
img[src*="arrow-right-modern-green.svg"],
img[src*="arrow-left-modern-green.svg"],
img[src*="arrow-down-modern-green.svg"] {
  filter: brightness(0) saturate(100%) invert(45%) sepia(17%) saturate(1792%) hue-rotate(110deg) brightness(91%) contrast(87%) !important;
}

/* Prevent message bubble from resizing when emoji reaction is added */
/* Force consistent padding regardless of emoji presence */
.user_info_chat.left_users.pb-4,
.user_info_chat.left_users.pb-1,
.user_info_chat.pb-4,
.user_info_chat.pb-1 {
  padding-bottom: 0.25rem !important;
}

/* The emoji container - remove it from document flow to prevent extra spacing */
div:has(> .emoji_show_section) {
  height: 0 !important;
  margin: 0 !important;
  overflow: visible !important;
  position: relative;
  z-index: 0;
}

.emoji_show_section {
  z-index: auto;
  background: #fff;
  padding: 1px 1px;
  border-radius: 50%;
  box-shadow: 0 2px 4px 0 rgba(14,30,37,.12), 0 2px 16px 0 rgba(14,30,37,.32);
  font-size: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  cursor: pointer;
}


/* Google Material Symbols - Base Configuration */
.material-symbols-outlined {
  font-family: 'Material Symbols Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'liga';
  color: #737373;
}

/* Video Call Icon - Override ALL default colors to inherit from parent container */
.video-call-icon-animated,
.video-call-icon-animated.material-symbols-outlined,
span.video-call-icon-animated,
span.video-call-icon-animated.material-symbols-outlined,
span.material-symbols-outlined.video-call-icon-animated,
.material-symbols-outlined.video-call-icon-animated,
div .video-call-icon-animated.material-symbols-outlined,
div span.video-call-icon-animated.material-symbols-outlined {
  color: inherit !important;
}

/* Cursor pointer for keyboard_arrow_left icons in navigation contexts */
.main_heading .material-symbols-outlined,
a.pointer .material-symbols-outlined,
.back_icon .material-symbols-outlined,
label.back_icon .material-symbols-outlined {
  cursor: pointer !important;
}

/* Material Symbols keyboard_arrow_left - Replaces arrow-left-modern-gray.svg */
.material-arrow-left {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  color: #737373 !important;
  display: inline-block;
  transition: color 0.2s ease;
  line-height: 1;
  font-weight: normal;
  font-style: normal;
}

/* Default hover state for external (orange) */
.material-arrow-left:not(.internal-arrow):hover {
  color: #f08438 !important;
}

/* Hover state for internal (green) */
.material-arrow-left.internal-arrow:hover {
  color: #288f6c !important;
}

/* Disabled state for arrows */
.material-arrow-left.disabled,
.material-arrow-left:disabled,
*:disabled .material-arrow-left,
*.disabled .material-arrow-left {
  color: #cccccc !important;
  cursor: default !important;
}

/* Context menu container - simplified without dropdown complexity */
.contextMenu {
  display: flex;
  gap: 4px;
  align-items: center;
  position: absolute;
  min-width: fit-content;
  white-space: nowrap;
  left: 0;
  top: -40px;
  z-index: 10000;
}

/* Ensure contextMenu aligns with message bubble left edge */
.user_info_chat {
  position: relative;
}

.contact-left,
.contact-right {
  position: relative;
}

/* For left-side messages (other users) */
.user_info_chat .contextMenu,
.contact-left .contextMenu,
.user_chat_content:not(.right_users) .contextMenu {
  left: 0;
  right: auto;
}

/* For right-side messages (your messages) */
.right_users .contextMenu,
.contact-right .contextMenu,
.contextMenu.right-context {
  right: 0;
  left: auto;
  justify-content: flex-end;
}

/* Adjust positioning for mobile/smaller screens */
@media (max-width: 768px) {
  .contextMenu {
    top: -38px;
  }
}

/* Message action buttons - icon only with no background */
.contextMenu .message-action-btn {
  background: transparent !important;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  transition: all 0.2s ease;
  color: #737373 !important;
  overflow: visible;
  flex-shrink: 0;
}

.contextMenu .message-action-btn:hover {
  color: #f08438 !important;
  background: transparent !important;
}

.contextMenu .message-action-btn:active {
  color: #f08438 !important;
  background: transparent !important;
}

.contextMenu .message-action-btn:focus {
  outline: 1px solid #f08438;
  outline-offset: 2px;
}

/* Material Symbols icons styling - inherit color from button */
.contextMenu .message-action-btn .material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 20px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 20 !important;
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  user-select: none;
  color: #737373 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.2s ease;
}

/* Icon color on button hover */
.contextMenu .message-action-btn:hover .material-symbols-outlined {
  color: #f08438 !important;
}

.contextMenu .message-action-btn:active .material-symbols-outlined {
  color: #f08438 !important;
}

/* Form Add Icon - Material Symbols add_circle with fill */
.form-add-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 1,      /* Filled style */
    'wght' 400,    /* Normal weight */
    'GRAD' 0,      /* Standard grade */
    'opsz' 24 !important;  /* Optical size 24px */
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  user-select: none;
  color: #737373 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.2s ease;
  cursor: pointer;
}

/* Default hover - orange (for external articles and EditPersonalArticle) */
.form-icons .form-icon-link:hover .form-add-icon,
.form-add-icon:hover {
  color: #f08438 !important;
}

/* Internal article hover - green (when data-article-type="1") */
.form-icons .form-icon-link[data-article-type="1"]:hover .form-add-icon,
.form-add-icon[data-article-type="1"]:hover {
  color: #288f6c !important;
}

/* Close Article Icon - Material Symbols close icon */
.close-article-btn .close-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,      /* Outlined style */
    'wght' 400,    /* Normal weight */
    'GRAD' 0,      /* Standard grade */
    'opsz' 24 !important;  /* Optical size 24px */
  font-weight: normal !important;
  font-style: normal !important;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  user-select: none;
  color: #737373 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: color 0.2s ease;
}

/* Default hover - orange (for external articles) */
.close-article-btn:hover .close-icon {
  color: #f08438 !important;
}

/* Internal article hover - green (when data-article-type="1") */
.close-article-btn[data-article-type="1"]:hover .close-icon {
  color: #288f6c !important;
}

/* ================================================
   Create Article Modal Styles
   ================================================ */

/* Modal Backdrop */
.create-article-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.2s ease-out;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* Modal Container */
.create-article-modal {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  width: 90%;
  max-width: 400px;
  overflow: hidden;
  animation: slideUp 0.25s ease-out;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(20px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

/* Modal Header */
.create-article-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
}

.create-article-modal-title {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #212529;
  margin: 0;
}

.create-article-modal-close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-article-modal-close .material-symbols-outlined {
  font-size: 24px;
  color: #737373;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  transition: color 0.2s ease;
}

.create-article-modal-close:hover .material-symbols-outlined {
  color: #f08438;
}

/* Modal Body */
.create-article-modal-body {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Article Option */
.create-article-option {
  display: flex;
  align-items: center;
  padding: 16px;
  border-radius: 12px;
  text-decoration: none !important;
  transition: background-color 0.2s, transform 0.15s;
  cursor: pointer;
}

.create-article-option:hover {
  transform: translateX(4px);
}

/* External Article Option */
.create-article-option-external {
  background-color: rgba(240, 132, 56, 0.08);
  border: 1px solid rgba(240, 132, 56, 0.2);
}

.create-article-option-external:hover {
  background-color: rgba(240, 132, 56, 0.12);
}

.create-article-option-external .create-article-option-icon,
.create-article-option-external .create-article-option-title {
  color: #f08438;
}

.create-article-option-external .create-article-option-arrow {
  color: #f08438;
}

/* Internal Article Option */
.create-article-option-internal {
  background-color: rgba(40, 143, 108, 0.08);
  border: 1px solid rgba(40, 143, 108, 0.2);
}

.create-article-option-internal:hover {
  background-color: rgba(40, 143, 108, 0.12);
}

.create-article-option-internal .create-article-option-icon,
.create-article-option-internal .create-article-option-title {
  color: #288f6c;
}

.create-article-option-internal .create-article-option-arrow {
  color: #288f6c;
}

/* Option Icon */
.create-article-option-icon {
  font-size: 28px !important;
  width: 28px;
  height: 28px;
  margin-right: 16px;
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 28;
}

/* Option Text */
.create-article-option-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.create-article-option-title {
  font-size: 14px;
  font-weight: 500;
}

.create-article-option-subtitle {
  font-size: 12px;
  color: #737373;
}

/* Option Arrow */
.create-article-option-arrow {
  font-size: 20px !important;
  width: 20px;
  height: 20px;
  margin-left: 8px;
  opacity: 0.6;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  transition: transform 0.2s, opacity 0.2s;
}

.create-article-option:hover .create-article-option-arrow {
  transform: translateX(4px);
  opacity: 1;
}

/* Internal chats - green hover for context menu buttons */
body:has(.main_heading-internal) .contextMenu .message-action-btn:hover .material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .contextMenu .message-action-btn:hover .material-symbols-outlined,
body:has(.chat-input-container-internal) .contextMenu .message-action-btn:hover .material-symbols-outlined {
  color: #288f6c !important;
}

body:has(.main_heading-internal) .contextMenu .message-action-btn:hover,
.pages-project:has(.chat-input-container-internal) .contextMenu .message-action-btn:hover,
body:has(.chat-input-container-internal) .contextMenu .message-action-btn:hover {
  color: #288f6c !important;
}

body:has(.main_heading-internal) .contextMenu .message-action-btn:active .material-symbols-outlined,
.pages-project:has(.chat-input-container-internal) .contextMenu .message-action-btn:active .material-symbols-outlined,
body:has(.chat-input-container-internal) .contextMenu .message-action-btn:active .material-symbols-outlined {
  color: #288f6c !important;
}

body:has(.main_heading-internal) .contextMenu .message-action-btn:active,
.pages-project:has(.chat-input-container-internal) .contextMenu .message-action-btn:active,
body:has(.chat-input-container-internal) .contextMenu .message-action-btn:active {
  color: #288f6c !important;
}

/* ============================================
   SLIDE-UP IMAGE PREVIEW BEFORE POSTING
   ============================================ */

/* Slide-up animation */
@keyframes slideUpPreview {
  from { 
    transform: translateY(100%);
    opacity: 0.5;
  }
  to { 
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInBackdrop {
  from { opacity: 0; }
  to { opacity: 1; }
}


/* =====================================================
   Attachment Menu Popup - Above Text Input
   ===================================================== */
.attachment-menu-popup {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 85%;
  max-width: 320px;
  background: #ffffff;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15), 
              0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 228;
  margin-bottom: 12px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateX(-50%) translateY(10px);
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.attachment-menu-popup.active {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.attachment-menu-popup .role_data {
  padding: 8px 0;
}

.attachment-menu-popup .list-group {
  list-style: none;
  margin: 0;
  padding: 0;
}

.attachment-menu-popup .list-group li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 500;
  color: #2d3748;
  cursor: pointer;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #f0f0f0;
}

.attachment-menu-popup .list-group li:last-child {
  border-bottom: none;
}

.attachment-menu-popup .list-group li:hover {
  background-color: #fef6f1;
  color: #F08438;
}

.attachment-menu-popup .list-group li:active {
  background-color: #fdeee4;
}

.attachment-menu-popup .list-group li span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.attachment-menu-popup .list-group li span img {
  max-width: 24px;
  max-height: 24px;
  object-fit: contain;
}

.attachment-menu-popup .bottom-button {
  padding: 12px 20px;
  text-align: center;
  border-top: 1px solid #e8e8e8;
  background: #fafafa;
}

.attachment-menu-popup .bottom-button a {
  font-size: 15px;
  font-weight: 500;
  color: #F08438;
  text-decoration: none;
  display: block;
  padding: 6px 0;
  transition: color 0.15s ease;
}

.attachment-menu-popup .bottom-button a:hover {
  color: #e07328;
}

/* Internal variant (green theme) */
.attachment-menu-popup.internal .list-group li:hover {
  background-color: #f0fdf4;
  color: #288f6c;
}

.attachment-menu-popup.internal .list-group li:active {
  background-color: #dcfce7;
}

.attachment-menu-popup.internal .bottom-button a {
  color: #288f6c;
}

.attachment-menu-popup.internal .bottom-button a:hover {
  color: #1f7a5c;
}

/* Backdrop overlay */
.attachment-menu-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 227;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
}

.attachment-menu-backdrop.active {
  opacity: 1;
  visibility: visible;
}

/* Mobile adjustments */
@media (max-width: 480px) {
  .attachment-menu-popup {
    width: 90%;
    max-width: none;
    margin-bottom: 8px;
  }
  
  .attachment-menu-popup .list-group li {
    padding: 12px 16px;
    font-size: 14px;
  }
}

/* =====================================================
   Modern Photo Preview - Complete Redesign
   ===================================================== */

/* Overlay - positioned within chat container */
.photo-preview-overlay {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  animation: fadeIn 0.2s ease-out;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

/* Light theme - frosted glass effect */
.photo-preview-overlay.light {
  background: rgba(255, 255, 255, 0.85) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

.photo-preview-overlay.closing {
  animation: fadeOut 0.2s ease-out forwards;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}

/* Attachment Menu */
.attachment-menu-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 20px;
  animation: slideUp 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  height: 100%;
}

@keyframes slideUp {
  from { 
    opacity: 0;
    transform: translateY(30px);
  }
  to { 
    opacity: 1;
    transform: translateY(0);
  }
}

.attachment-menu {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
  min-width: 300px;
  max-width: 90vw;
}

.attachment-menu-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  cursor: pointer;
  transition: all 0.15s ease;
  border-bottom: 1px solid #f0f0f0;
}

.attachment-menu-item:last-child {
  border-bottom: none;
}

.attachment-menu-item:hover {
  background: #f8f9fa;
}

.attachment-menu-item:active {
  background: #f0f1f2;
  transform: scale(0.99);
}

.attachment-menu-icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Attachment menu Material Symbols icons */
.attachment-menu-icon-symbol.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #737373 !important;
  transition: color 0.2s ease !important;
  display: inline-block !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  width: 24px !important;
  height: 24px !important;
}

/* Icon hover - external (orange) */
.attachment-menu-item:hover .attachment-menu-icon .attachment-menu-icon-symbol,
.attachment-menu-item:hover .attachment-menu-icon-symbol.material-symbols-outlined,
.attachment-menu-item:hover .material-symbols-outlined.attachment-menu-icon-symbol {
  color: #f08438 !important;
}

/* Icon hover - internal (green) */
.attachment-menu-internal .attachment-menu-item:hover .attachment-menu-icon .attachment-menu-icon-symbol,
.attachment-menu-internal .attachment-menu-item:hover .attachment-menu-icon-symbol.material-symbols-outlined,
.attachment-menu-internal .attachment-menu-item:hover .material-symbols-outlined.attachment-menu-icon-symbol {
  color: #288f6c !important;
}

/* Attachment menu text column (title + optional disabled hint) */
.attachment-menu-item-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

/* Attachment menu text styling - base */
.attachment-menu-item > span:not(.material-symbols-outlined):not(.attachment-menu-icon-symbol),
.attachment-menu-item span:not(.material-symbols-outlined):not(.attachment-menu-icon-symbol),
.attachment-menu-item .attachment-menu-icon + .attachment-menu-item-body .attachment-menu-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #737373 !important;
  transition: color 0.2s ease !important;
}

/* Text hover - external (orange) - target span after icon container */
.attachment-menu-item:hover .attachment-menu-icon + .attachment-menu-item-body .attachment-menu-text,
.attachment-menu-item:hover > span:not(.material-symbols-outlined):not(.attachment-menu-icon-symbol),
.attachment-menu-item:hover span:not(.material-symbols-outlined):not(.attachment-menu-icon-symbol),
.attachment-menu-item:hover > span:not([class*="material-symbols"]):not([class*="attachment-menu-icon"]),
.attachment-menu-item:hover span:not([class*="material-symbols"]):not([class*="attachment-menu-icon"]) {
  color: #f08438 !important;
}

/* Text hover - internal (green) - target span after icon container */
.attachment-menu-internal .attachment-menu-item:hover .attachment-menu-icon + .attachment-menu-item-body .attachment-menu-text,
.attachment-menu-internal .attachment-menu-item:hover > span:not(.material-symbols-outlined):not(.attachment-menu-icon-symbol),
.attachment-menu-internal .attachment-menu-item:hover span:not(.material-symbols-outlined):not(.attachment-menu-icon-symbol),
.attachment-menu-internal .attachment-menu-item:hover > span:not([class*="material-symbols"]):not([class*="attachment-menu-icon"]),
.attachment-menu-internal .attachment-menu-item:hover span:not([class*="material-symbols"]):not([class*="attachment-menu-icon"]) {
  color: #288f6c !important;
}

.attachment-menu-icon svg {
  color: #737373 !important;
}

/* Force text color change on hover - highest specificity */
.attachment-menu-item:hover .attachment-menu-item-body .attachment-menu-text,
.attachment-menu-item:hover > span:last-child:not(.attachment-menu-icon-symbol):not(.material-symbols-outlined),
.attachment-menu-item:hover > span:not(.attachment-menu-icon-symbol):not(.material-symbols-outlined) {
  color: #f08438 !important;
}

.attachment-menu-internal .attachment-menu-item:hover .attachment-menu-item-body .attachment-menu-text,
.attachment-menu-internal .attachment-menu-item:hover > span:last-child:not(.attachment-menu-icon-symbol):not(.material-symbols-outlined),
.attachment-menu-internal .attachment-menu-item:hover > span:not(.attachment-menu-icon-symbol):not(.material-symbols-outlined) {
  color: #288f6c !important;
}

/* Additional fallback - target any span that's not inside attachment-menu-icon */
.attachment-menu-item:hover span:not(.attachment-menu-icon *) {
  color: #f08438 !important;
}

.attachment-menu-internal .attachment-menu-item:hover span:not(.attachment-menu-icon *) {
  color: #288f6c !important;
}

/* Attachment menu text - specific class for reliable hover targeting */
.attachment-menu-text {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: #737373 !important;
  transition: color 0.2s ease !important;
}

.attachment-menu-item:hover .attachment-menu-text {
  color: #f08438 !important;
}

.attachment-menu-internal .attachment-menu-item:hover .attachment-menu-text {
  color: #288f6c !important;
}

.attachment-menu-item-disabled {
  opacity: 0.45;
  cursor: default !important;
}

.attachment-menu-item-disabled:hover {
  background: transparent !important;
}

.attachment-menu-item-disabled:hover .attachment-menu-text {
  color: #737373 !important;
}

.attachment-menu-item-disabled:hover .attachment-menu-icon-symbol {
  color: #737373 !important;
}

.attachment-menu-item-disabled:hover .attachment-menu-disabled-hint {
  color: #999 !important;
}

.attachment-menu-disabled-hint {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: #999 !important;
  opacity: 1;
  line-height: 1.25;
  margin: 0;
  padding: 0;
}

.attachment-cancel-btn {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: none;
  color: #737373;
  font-size: 13px;
  font-weight: 500;
  padding: 12px 48px;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.15s ease;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.attachment-cancel-btn:hover {
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
  color: #f08438 !important;
  transition: color 0.2s ease;
}

/* Internal chat - green hover for cancel button */
.attachment-menu-internal .attachment-cancel-btn:hover {
  color: #288f6c !important;
}

/* Photo Preview Container - fills chat window */
.photo-preview-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  animation: scaleIn 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
}

@keyframes scaleIn {
  from { 
    opacity: 0;
    transform: scale(0.95);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Header */
.photo-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: relative;
  z-index: 10;
}

/* Light theme header */
.photo-preview-overlay.light .photo-preview-header {
  background: transparent;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.photo-preview-close-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: #737373 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s ease, transform 0.15s ease;
  padding: 0;
}

.photo-preview-close-btn:hover {
  transform: scale(1.1);
  color: #f08438 !important;
}

.photo-preview-close-btn svg {
  width: 16px;
  height: 16px;
}

/* Material Symbols icons in photo preview */
.photo-preview-close-btn .material-symbols-outlined {
  font-size: 24px !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  display: block;
  user-select: none;
  color: #737373 !important;
  width: 24px;
  height: 24px;
  line-height: 24px;
  transition: color 0.15s ease;
}

.photo-preview-close-btn:hover .material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - green hover for close button */
.photo-preview-internal .photo-preview-close-btn:hover,
.photo-preview-internal .photo-preview-close-btn:hover svg,
.photo-preview-internal .photo-preview-close-btn:hover .material-symbols-outlined,
body:has(.chat-input-container-internal) .photo-preview-close-btn:hover,
body:has(.chat-input-container-internal) .photo-preview-close-btn:hover svg,
body:has(.chat-input-container-internal) .photo-preview-close-btn:hover .material-symbols-outlined,
body:has(.main_heading-internal) .photo-preview-close-btn:hover,
body:has(.main_heading-internal) .photo-preview-close-btn:hover svg,
body:has(.main_heading-internal) .photo-preview-close-btn:hover .material-symbols-outlined {
  color: #288f6c !important;
  stroke: #288f6c !important;
  fill: #288f6c !important;
}

.photo-preview-counter {
  font-size: 13px;
  font-weight: 500;
  color: #737373 !important;
  letter-spacing: 0.5px;
}

/* Main Preview Area */
.photo-preview-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  padding: 16px;
  min-height: 0;
}

/* Light theme main area */
.photo-preview-overlay.light .photo-preview-main {
  background: transparent;
}

.photo-preview-image-container {
  max-width: 100%;
  max-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.photo-preview-image {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
  animation: imageIn 0.3s ease-out;
}

/* Light theme image */
.photo-preview-overlay.light .photo-preview-image {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
}

@keyframes imageIn {
  from { 
    opacity: 0;
    transform: scale(0.9);
  }
  to { 
    opacity: 1;
    transform: scale(1);
  }
}

/* Navigation Arrows - 16x16 icon with white circle backdrop */
.photo-preview-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: none;
  background: #ffffff !important;
  color: #737373 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  padding: 0;
}

.photo-preview-nav svg {
  width: 16px !important;
  height: 16px !important;
}

.photo-preview-nav:hover {
  background: #f5f5f5 !important;
  transform: translateY(-50%) scale(1.1);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

/* Navigation arrow icon hover - orange for external chats */
.photo-preview-nav:hover .material-symbols-outlined,
.photo-preview-nav:hover span.material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - green hover for navigation arrows */
.photo-preview-internal .photo-preview-nav:hover .material-symbols-outlined,
.photo-preview-internal .photo-preview-nav:hover span.material-symbols-outlined,
body:has(.chat-input-container-internal) .photo-preview-nav:hover .material-symbols-outlined,
body:has(.chat-input-container-internal) .photo-preview-nav:hover span.material-symbols-outlined,
body:has(.main_heading-internal) .photo-preview-nav:hover .material-symbols-outlined,
body:has(.main_heading-internal) .photo-preview-nav:hover span.material-symbols-outlined {
  color: #288f6c !important;
}

/* Light theme navigation */
.photo-preview-overlay.light .photo-preview-nav {
  background: #ffffff !important;
  color: #737373 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.photo-preview-overlay.light .photo-preview-nav:hover {
  background: #f5f5f5 !important;
  color: #737373 !important;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.2);
}

.photo-preview-nav-prev {
  left: 16px;
}

.photo-preview-nav-next {
  right: 16px;
}

/* Thumbnail Strip */
.photo-preview-thumbnails {
  display: flex;
  gap: 10px;
  padding: 16px 20px;
  /* "safe center" keeps thumbnails centered when they fit, but falls back to
     flex-start when they overflow so the first items stay reachable via scroll.
     Without "safe", centered flex items get clipped on the left and can never
     be scrolled into view. */
  justify-content: safe center;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-behavior: smooth;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Light theme thumbnails */
.photo-preview-overlay.light .photo-preview-thumbnails {
  background: transparent;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.photo-preview-thumbnails::-webkit-scrollbar {
  height: 8px;
}

.photo-preview-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.photo-preview-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 4px;
}

.photo-preview-thumbnails::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.photo-preview-overlay.light .photo-preview-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.photo-preview-overlay.light .photo-preview-thumbnails::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

.photo-preview-thumb {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  overflow: visible;
  cursor: pointer;
  border: 3px solid transparent;
  transition: all 0.2s ease;
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.1);
  position: relative;
}

/* Light theme thumb */
.photo-preview-overlay.light .photo-preview-thumb {
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.photo-preview-thumb:hover {
  transform: scale(1.05);
}

.photo-preview-thumb.active {
  transform: scale(1.08);
  border-color: #f08438 !important;
}

/* Internal chat - green border for active thumbnail */
.photo-preview-internal .photo-preview-thumb.active,
.photo-preview-thumb-internal.active,
body:has(.chat-input-container-internal) .photo-preview-thumb.active,
body:has(.main_heading-internal) .photo-preview-thumb.active {
  border-color: #288f6c !important;
}

.photo-preview-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

/* Delete button on each thumbnail - X icon with white circle */
.photo-preview-thumb-delete {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 20px !important;
  height: 20px !important;
  border-radius: 50%;
  border: none;
  background: #ffffff;
  color: #737373 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  opacity: 0;
  transform: scale(0.8);
  z-index: 5;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  padding: 0;
}

.photo-preview-thumb-delete svg {
  width: 12px;
  height: 12px;
}

.photo-preview-thumb:hover .photo-preview-thumb-delete {
  opacity: 1;
  transform: scale(1);
}

.photo-preview-thumb-delete:hover {
  background: #f5f5f5;
  transform: scale(1.1) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}

.photo-preview-add-more {
  display: flex;
  align-items: center;
  justify-content: center;
  border-style: dashed !important;
  border-width: 2px !important;
  border-color: #737373 !important;
  background: transparent !important;
  overflow: hidden !important;
  transition: border-color 0.2s ease;
}

.photo-preview-add-more:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #f08438 !important;
}

.photo-preview-overlay.light .photo-preview-add-more:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Photo preview add icon styling - Material Symbols */
.photo-preview-add-icon.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  font-variation-settings:
    'FILL' 0,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #737373 !important;
  transition: color 0.2s ease;
  display: inline-block !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.photo-preview-add-more:hover .photo-preview-add-icon.material-symbols-outlined {
  color: #f08438 !important;
}

/* Internal chat - green border and icon for photo preview add button */
.photo-preview-internal .photo-preview-add-more:hover,
body:has(.chat-input-container-internal) .photo-preview-add-more:hover,
body:has(.main_heading-internal) .photo-preview-add-more:hover,
.chat-input-container-internal ~ * .photo-preview-add-more:hover,
body:has(.chat-input-container-internal) .photo-preview-overlay .photo-preview-add-more:hover,
body:has(.main_heading-internal) .photo-preview-overlay .photo-preview-add-more:hover {
  border-color: #288f6c !important;
}

.photo-preview-internal .photo-preview-add-more:hover .photo-preview-add-icon.material-symbols-outlined,
body:has(.chat-input-container-internal) .photo-preview-add-more:hover .photo-preview-add-icon.material-symbols-outlined,
body:has(.main_heading-internal) .photo-preview-add-more:hover .photo-preview-add-icon.material-symbols-outlined,
.chat-input-container-internal ~ * .photo-preview-add-more:hover .photo-preview-add-icon.material-symbols-outlined,
body:has(.chat-input-container-internal) .photo-preview-overlay .photo-preview-add-more:hover .photo-preview-add-icon.material-symbols-outlined,
body:has(.main_heading-internal) .photo-preview-overlay .photo-preview-add-more:hover .photo-preview-add-icon.material-symbols-outlined {
  color: #288f6c !important;
}

/* Input Section - matches chat_input style */
.photo-preview-input-section {
  padding: 10px;
  padding-bottom: 15px;
  padding-top: 10px;
  background: #f0efed;
}

/* Light theme input section */
.photo-preview-overlay.light .photo-preview-input-section {
  background: #f0efed;
}

.photo-preview-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  overflow: visible;
}

.photo-preview-add-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px dashed currentColor;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  opacity: 0.8;
}

.photo-preview-add-btn:hover {
  opacity: 1;
  transform: scale(1.05);
  background: rgba(255, 255, 255, 0.1);
}

/* Textarea inside customInputBoxNew in photo preview */
.photo-preview-textarea {
  width: 100% !important;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  resize: none !important;
  color: #3c3c3c !important;
  font-size: 13px !important;
  line-height: 20px !important;
  padding: 0 !important;
  min-height: 20px !important;
  max-height: 160px !important;
  overflow-y: auto !important;
  font-family: 'Work Sans', sans-serif !important;
  cursor: text !important;
}

.photo-preview-textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

.photo-preview-textarea::placeholder {
  color: #9ca3af !important;
  opacity: 1 !important;
}

/* Input box inside photo preview - override width to fill available space */
.photo-preview-input-box.customInputBoxNew {
  width: 100% !important;
  flex: 1 1 auto !important;
}

/* Send button - no background, orange icon */
.photo-preview-send-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
  padding: 8px;
}

/* Send icon styling - Material Symbols - always orange with fill */
.send-icon.material-symbols-outlined {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 20px !important;
  font-variation-settings:
    'FILL' 1,
    'wght' 300,
    'GRAD' 0,
    'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  color: #f08438 !important;
  display: inline-block !important;
  line-height: 1 !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  vertical-align: middle !important;
  transition: color 0.2s ease;
}

/* Internal chat - green send icon */
.chat-input-container-internal .send-icon.material-symbols-outlined,
.chat-input-container-internal a:hover .send-icon.material-symbols-outlined,
.photo-preview-internal .send-icon.material-symbols-outlined,
.photo-preview-send-btn.internal .send-icon.material-symbols-outlined,
body:has(.chat-input-container-internal) .send-icon.material-symbols-outlined,
body:has(.main_heading-internal) .send-icon.material-symbols-outlined {
  color: #288f6c !important;
}

/* Vertically center all chat input icons */
.add-icon.material-symbols-outlined,
.send-icon.material-symbols-outlined,
.emoji-picker-trigger .material-symbols-outlined,
.emoji-picker-trigger .material-icon,
.voice-recording-icon .material-symbols-outlined {
  vertical-align: middle !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure icon containers are vertically centered */
a:has(.add-icon),
a:has(.send-icon),
a.emoji-picker-trigger,
a.voice-recording-icon,
button:has(.add-icon),
IconButton:has(.add-icon) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  vertical-align: middle !important;
}

/* Ensure parent flex container aligns items center */
div[style*="display: flex"][style*="align-items: center"] > *,
div[style*="display:flex"][style*="align-items:center"] > * {
  display: flex !important;
  align-items: center !important;
}

.photo-preview-send-btn:hover {
  transform: scale(1.1);
}

.photo-preview-send-btn:active {
  transform: scale(0.95);
}

/* Internal (green) send button */
.photo-preview-send-btn.internal img {
  filter: none;
}

.photo-preview-send-btn img {
  filter: none;
  width: 24px;
  height: 24px;
}

/* Video Preview */
.video-preview .photo-preview-main {
  padding: 40px;
}

.video-preview-main {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.video-preview-player {
  max-width: 100%;
  max-height: 100%;
  border-radius: 12px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
}

.photo-preview-overlay.light .video-preview-player {
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width: 600px) {
  .attachment-menu {
    min-width: 280px;
  }
  
  .attachment-menu-item {
    padding: 14px 18px;
  }
  
  .attachment-menu-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: transparent !important;
  }
  
  .attachment-menu-item span {
    font-size: 13px;
  }
  
  .photo-preview-nav {
    width: 28px !important;
    height: 28px !important;
  }
  
  .photo-preview-nav-prev {
    left: 8px;
  }
  
  .photo-preview-nav-next {
    right: 8px;
  }
  
  .photo-preview-image {
    max-height: calc(100vh - 320px);
  }
  
  .photo-preview-thumb {
    width: 52px;
    height: 52px;
  }
  
  .photo-preview-input-row {
    gap: 8px;
  }
  
  .photo-preview-add-btn,
  .photo-preview-send-btn {
    width: 40px;
    height: 40px;
  }
}

.photo-mention-suggestion-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.12s ease;
}

.photo-mention-suggestion-item:hover {
  background-color: rgba(0, 0, 0, 0.04);
}


/* Remove padding from chat list container */
.company_services.chat_services.user_info_chat.left_users.p-1 {
  padding: 0 !important;
}

/* Room invitations background color */
.project-notification-request {
  background-color: #f0efed !important;
}

div:has(.project-notification-request) {
  background-color: #f0efed !important;
}

/* "...Mehr" button for truncated messages */
.mehr-button,
.chat_text .mehr-button,
.chat_box_main_div .mehr-button {
  color: #f08438 !important;
  cursor: pointer !important;
  font-weight: 500 !important;
  margin-left: 2px;
  display: inline-block;
}

.mehr-button:hover {
  text-decoration: underline;
}

/* Ensure ...Mehr text inside markdown is orange */
.chat_text span[style*="f08438"],
.chat_box_main_div span[style*="f08438"] {
  color: #f08438 !important;
}

/* Send button - Primary design for reply section (same as schedule-modal-btn) */
.send-btn {
  background-color: transparent !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
  border-radius: 8px;
  font-weight: 500;
  padding: 10px 24px !important;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

.send-btn:hover:not(:disabled):not(.disabled) {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
}

.send-btn:active:not(:disabled):not(.disabled) {
  background-color: #d66b20 !important;
  border-color: #d66b20 !important;
  color: #fff !important;
}

/* Send button - Disabled state */
.send-btn:disabled,
.send-btn.disabled {
  background-color: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  color: #e0e0e0 !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
  box-shadow: none !important;
  transform: none !important;
}

.send-btn:disabled:hover,
.send-btn.disabled:hover {
  background-color: #fff !important;
  border: 1.5px solid #e0e0e0 !important;
  color: #e0e0e0 !important;
  cursor: not-allowed !important;
}

/* Pending room invitations background */
.w-300.my_project.immoanimation-enter-done {
  background-color: #f0efed !important;
}

.project_listing {
  background-color: #f0efed !important;
}

.project_listing .request_popup {
  background-color: #f0efed !important;
}

.project_listing .request_popup .col-2 {
  padding-right: 0 !important;
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: none !important;
}

.project_listing .request_popup .col-10 {
  padding-left: 10px !important;
  flex: 1 !important;
  width: auto !important;
  max-width: none !important;
}

/* Pending request buttons hover effects */
.pending-request-btn.MuiButton-root:hover {
  background-color: #f08438 !important;
  border-color: #f08438 !important;
  color: #fff !important;
}

.pending-request-btn.MuiButton-root:hover .MuiButton-label {
  color: #fff !important;
}

.project_listing .request_popup .col-10 h5 {
  text-align: left !important;
  margin: 0;
}

/* Kjuup Pilot Header - Override all background rules */
.company_services.chat_services.user_info_chat.left_users.kjuup-pilot-container {
  background-color: #f0efed !important;
  border: none !important;
}

.kjuup-pilot-container .kjuup-pilot-actions .MuiSvgIcon-root,
.kjuup-pilot-container .kjuup-pilot-actions svg,
.kjuup-pilot-container .kjuup-pilot-actions div,
.kjuup-pilot-container .kjuup-pilot-actions span,
.kjuup-pilot-container .kjuup-pilot-actions * {
  background-color: transparent !important;
  background: transparent !important;
}

/* The transparent-everything rule above also strips the background from the
   "Unread only" filter toggle, hiding its fill. Restore the filter-tab look so
   inactive = white pill and active = orange fill (matching the filter tabs). */
.kjuup-pilot-container .kjuup-pilot-actions .lm-filter-unread-toggle {
  background: #ffffff !important;
  background-color: #ffffff !important;
}

.kjuup-pilot-container .kjuup-pilot-actions .lm-filter-unread-toggle--active {
  background: #e8781e !important;
  background-color: #e8781e !important;
}

.kjuup-pilot-container .kjuup-pilot-actions .MuiSvgIcon-root::before,
.kjuup-pilot-container .kjuup-pilot-actions .MuiSvgIcon-root::after,
.kjuup-pilot-container .kjuup-pilot-actions svg::before,
.kjuup-pilot-container .kjuup-pilot-actions svg::after,
.kjuup-pilot-container .kjuup-pilot-actions div::before,
.kjuup-pilot-container .kjuup-pilot-actions div::after {
  background-color: transparent !important;
  background: transparent !important;
  display: none !important;
}

/* Kjuup AI Header Button */
.kjuup-ai-header-row {
  display: flex;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px solid #e5e5e5;
}

.kjuup-ai-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  border-radius: 22px;
  background: linear-gradient(135deg, #fff8f0 0%, #fff5eb 50%, #fffbf5 100%);
  cursor: pointer;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}

.kjuup-ai-btn:hover {
  background: linear-gradient(135deg, #fff0e0 0%, #ffe8d0 50%, #fff0e0 100%);
  box-shadow: 0 2px 12px rgba(240, 132, 56, 0.15);
  transform: translateY(-1px);
}

.kjuup-ai-btn--active {
  background: linear-gradient(135deg, #fff0e0 0%, #ffe4cc 50%, #fff0e0 100%);
  box-shadow: 0 2px 12px rgba(240, 132, 56, 0.2);
}

.kjuup-ai-btn--active:hover {
  background: linear-gradient(135deg, #ffe8d0 0%, #ffdcba 50%, #ffe8d0 100%);
}

.kjuup-ai-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.kjuup-ai-logo {
  width: 30px;
  height: 30px;
  object-fit: contain;
}


.kjuup-ai-label {
  font-size: 14px;
  font-weight: 600;
  color: #1a1a1a;
  white-space: nowrap;
}

.kjuup-ai-subtitle {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kjuup Pilot Header Action Buttons Container */
.kjuup-pilot-actions {
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: space-between;
  flex: 1;
}

.kjuup-pilot-spacer {
  flex: 1;
  display: flex;
  align-items: center;
}

.kjuup-pilot-spacer-end {
  flex: 1;
  display: flex;
  justify-content: flex-end;
}

/* Action Button Wrapper */
.action-btn-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  margin-top: 5px;
  margin-bottom: 5px;
}

.action-btn-wrapper.clickable {
  background: transparent;
  cursor: pointer;
}

/* Action Button Icon Container */
.action-btn-icon {
  background-color: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Action Button Label */
.action-btn-label {
  font-size: 11px;
  font-family: 'Work Sans', sans-serif;
  font-weight: 500;
  text-align: center;
  white-space: nowrap;
}

.action-btn-label.primary {
  color: #f08438;
}

.action-btn-label.secondary {
  color: #666;
}

.action-btn-label.active {
  color: #f08438;
}

/* New Message Type Selector Dropdown */
.new-message-type-selector {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 6px;
  background: #fff !important;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  z-index: 1000;
  min-width: 200px;
  padding: 6px;
  animation: msgTypeSelectorFadeIn 0.15s ease-out;
}

@keyframes msgTypeSelectorFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.new-message-type-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Work Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  background: transparent !important;
  transition: background-color 0.15s ease;
  white-space: nowrap;
}

.new-message-type-option:hover {
  background-color: #f5f5f5 !important;
}

.kjuup-pilot-container .kjuup-pilot-actions .new-message-type-selector,
.kjuup-pilot-container .kjuup-pilot-actions .new-message-type-selector * {
  background: unset !important;
}

.kjuup-pilot-container .kjuup-pilot-actions .new-message-type-selector {
  background: #fff !important;
}

.kjuup-pilot-container .kjuup-pilot-actions .new-message-type-option:hover {
  background-color: #f5f5f5 !important;
}

.new-message-type-icon {
  font-size: 20px !important;
}

/* Right-aligned Buttons Container */
.action-btns-right {
  display: flex;
  gap: 15px;
  align-items: flex-end;
}

/* Remove padding from pl-2, pr-2, and px-2 classes */
.pl-2,
.px-2 {
  padding-left: 0 !important;
}

.pr-2,
.px-2 {
  padding-right: 0 !important;
}

/* ========== Chat Item Styles ========== */
.chat-item-container {
  position: relative;
  padding: 10px !important;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: 56px;
  min-width: 0;
  border-radius: 10px;
  overflow-x: hidden;
  transition: border-radius 0.2s ease-out, box-shadow 0.2s ease-out !important;
}

/* Apply styling to parent company_centact.chat-item-container */
.company_centact.chat-item-container {
  margin: 5px !important;
  border-radius: 10px !important;
  padding: 10px !important;
  background-color: #f0efed !important;
  background: #f0efed !important;
  box-shadow: none !important;
  border: 1px solid #e0e0e0 !important;
}

/* Active/Reply state - keep parent background transparent so margin shows through */
.company_services:has(.chat-item-container.active-project),
.company_services:has(.chat-item-container.no-radius) {
  background-color: transparent !important;
  background: transparent !important;
  border-radius: 0;
}

/* Selected state - white background with drop shadow, round corners, and padding */
.company_centact.chat-item-container.active-project,
.chat-item-container.active-project,
div.company_centact.chat-item-container.active-project,
div.chat-item-container.active-project,
.company_centact.chat-item-container.active-project[style*="background"],
.chat-item-container.active-project[style*="background"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  padding: 10px !important;
  margin: 5px !important;
  border: none !important;
}

/* Other active-project rules (not chat-item-container) - with drop shadow */
.active-project:not(.pointer):not(.chat-item-container),
div.active-project:not(.pointer):not(.chat-item-container),
.company_centact.active-project:not(.pointer):not(.chat-item-container) {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  padding-right: 10px !important;
}

/* Chat selection styled like room selection */
.company_centact.pointer {
  background-color: transparent !important;
  background: transparent !important;
  padding: 0;
}

/* Ensure parent never changes on hover or select */
.company_centact.pointer:hover {
  background-color: transparent !important;
  background: transparent !important;
  transform: none !important;
  box-shadow: none !important;
  border: none !important;
}

/* ========== CHAT SELECTION STYLES (company_centact.pointer) ========== */
/* Base styles for website element */
.company_centact.pointer .website {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  padding: 10px !important;
  cursor: pointer;
  border-radius: 10px;
  border: none !important;
  transition: none !important;
  box-sizing: border-box !important;
  margin-bottom: 5px !important;
  margin-right: 5px !important;
  margin-left: 5px !important;
  margin-top: 0 !important;
}

/* Unselected state - always #f0efed, no shadow */
.company_centact.pointer:not(.active-project) .website {
  background-color: #f0efed !important;
  box-shadow: none !important;
}

/* Selected state - white background with drop shadow */
.company_centact.pointer.active-project .website {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Hover states - same as non-hover (no visual change) */
.company_centact.pointer:hover:not(.active-project) .website {
  background-color: #f0efed !important;
  box-shadow: none !important;
}

.company_centact.pointer.active-project:hover .website {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Override any inline styles on parent */
.company_centact.pointer[style*="background-color"],
.company_centact.pointer[style*="backgroundColor"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Override any inline styles on website element */
.company_centact.pointer .website[style*="display"],
.company_centact.pointer .website[style*="flexDirection"],
.company_centact.pointer .website[style*="alignItems"],
.company_centact.pointer .website[style*="justifyContent"],
.company_centact.pointer .website[style*="background"] {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

/* Chat services specific overrides */
.chat_services .company_centact.pointer:hover {
  background-color: transparent !important;
}

.chat_services .company_centact.pointer:not(.active-project) .website {
  background-color: #f0efed !important;
  box-shadow: none !important;
}

.chat_services .company_centact.pointer.active-project .website {
  background-color: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure bell icon container has fixed width to prevent layout shift */
.company_centact.pointer .project-internal,
.company_centact.pointer .project-external {
  min-width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure website container also has white background when selected - but exclude pointer class and chat-item-container */
.active-project:not(.pointer):not(.chat-item-container) .website,
.company_centact.active-project:not(.pointer):not(.chat-item-container) .website,
div.active-project:not(.pointer):not(.chat-item-container) .website,
.company_centact[style*="background-color: #ffffff"]:not(.pointer):not(.chat-item-container) .website,
.company_centact[style*="background-color: #fff"]:not(.pointer):not(.chat-item-container) .website,
.company_centact[style*="background-color:rgb(255, 255, 255)"]:not(.pointer):not(.chat-item-container) .website {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: none !important;
}

/* Keep website element transparent inside chat-item-container */
.chat-item-container .website,
.chat-item-container.active-project .website,
.chat-item-container .chat-item-link {
  background-color: transparent !important;
  background: transparent !important;
}

.chat-item-container.active-project.no-radius {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  transition: border-radius 0.15s ease-out !important;
}

/* Reply mode - white background for entire container */
.company_services:has(.chat-item-container.no-radius),
.company_services:has(.reply-box-container) {
  background-color: #ffffff !important;
  background: #ffffff !important;
  border-radius: 10px !important;
  margin: 5px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transition: none !important;
}

/* Remove margin on chat-item-container when reply is open (parent has margin) */
.company_services:has(.reply-box-container) .company_centact.chat-item-container,
.company_services:has(.chat-item-container.no-radius) .company_centact.chat-item-container {
  margin: 0 !important;
}

.company_services:has(.chat-item-container.no-radius):hover,
.company_services:has(.reply-box-container):hover,
.company_services:has(.chat-item-container.no-radius) .company_centact:hover,
.company_services:has(.reply-box-container) .company_centact:hover,
.company_services:has(.chat-item-container.no-radius) .chat-item-container:hover,
.company_services:has(.reply-box-container) .chat-item-container:hover {
  background-color: #ffffff !important;
  background: #ffffff !important;
}

/* Remove all hover effects on chat items - prevent any color change on hover */
.company_centact.chat-item-container:hover:not(.active-project),
.chat-item-container:hover:not(.active-project),
div.company_centact.chat-item-container:hover:not(.active-project),
div.chat-item-container:hover:not(.active-project),
.company_centact.chat-item-container:hover:not(.active-project)[style*="background"],
.chat-item-container:hover:not(.active-project)[style*="background"] {
  background-color: #f0efed !important;
  background: #f0efed !important;
  box-shadow: none !important;
  transform: none !important;
  border-radius: 10px !important;
}

.company_centact.chat-item-container.active-project:hover,
.chat-item-container.active-project:hover,
div.company_centact.chat-item-container.active-project:hover,
div.chat-item-container.active-project:hover,
.company_centact.chat-item-container.active-project:hover[style*="background"],
.chat-item-container.active-project:hover[style*="background"] {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
  border-radius: 10px !important;
}

.company_services:hover,
.chat-item-link:hover {
  background-color: inherit !important;
  background: inherit !important;
}

.latestmessages_scrollbar .company_centact:hover {
  background-color: transparent !important;
  background: transparent !important;
}

.latestmessages_scrollbar .chat-item-container:hover:not(.active-project) {
  background-color: #f0efed !important;
  background: #f0efed !important;
}

.latestmessages_scrollbar .chat-item-container.active-project:hover {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/* Other active-project hover rules */
.company_centact.active-project:hover:not(.pointer):not(.chat-item-container),
.active-project:hover:not(.pointer):not(.chat-item-container) {
  background-color: #ffffff !important;
  background: #ffffff !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
  transform: none !important;
}

/* Hover effects on chat action buttons - white bg, orange icon */
.chat-action-btns .reply-btn:hover,
.chat-action-btns .reminder-btn:hover,
.chat-action-btns .icon-btn:hover,
.chat-action-btns .icon-btn-shadow:hover {
  background: #fff !important;
  border-color: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

.chat-action-btns .reply-btn:hover svg,
.chat-action-btns .reminder-btn:hover svg,
.chat-action-btns .icon-btn:hover svg,
.chat-action-btns .reply-btn:hover svg path,
.chat-action-btns .reminder-btn:hover svg path,
.chat-action-btns .icon-btn:hover svg path {
  stroke: #f08438 !important;
  color: #f08438 !important;
}

.chat-item-container.no-radius {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.chat-item-container.deactivated {
  opacity: 0.5;
}

/* Chat Item Link */
.chat-item-link {
  flex: 1;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  min-width: 0;
}

/* Project Avatar */
.project-avatar {
  height: 36px;
  width: 36px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  text-align: center;
  border-radius: 6px;
  justify-content: center;
  align-items: center;
  display: flex;
  flex-shrink: 0;
}

.project-avatar-spacer {
  display: none;
}

/* Chat Details Container */
.chat-details-container {
  border: none;
  flex: 1;
  min-width: 0;
  overflow: visible;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: 0;
  background: transparent !important;
}

/* Chat Header Row */
.chat-header-row {
  display: flex;
  flex-direction: column;
  min-width: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
}

.chat-title-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin: 0;
  padding: 0;
  overflow: visible;
}

/* Badge in chat title row - ensure visibility */
.chat-title-row .unseen-badge {
  flex-shrink: 0;
  margin-left: 8px;
  margin-right: 8px;
  position: relative;
  z-index: 5;
}

.chat-title-row h5 {
  margin: 0 0 3px 0;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: #212529;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-title-row h5.header-full-name {
  display: block;
  white-space: normal;
  overflow: visible;
  text-overflow: unset;
  word-break: break-word;
}

/* Message Badge */
.unseen-badge {
  display: inline-flex !important;
  justify-content: center;
  align-items: center;
  min-width: 22px !important;
  width: auto !important;
  height: 22px !important;
  padding: 0 6px !important;
  position: relative;
  border-radius: 11px !important;
  margin: 0;
  flex-shrink: 0;
  z-index: 1;
  box-sizing: border-box !important;
  overflow: hidden !important;
}

/* Ensure badge is always round/pill-shaped - override Bootstrap */
.badge.unseen-badge,
.unseen-badge.badge,
.project-notification.unseen-badge,
.unseen-badge.project-notification {
  border-radius: 11px !important;
  padding: 0 6px !important;
  border: none !important;
  background-color: #f08438 !important;
}

/* Single digit badges - make perfectly round */
.unseen-badge .unseen-badge-text:only-child {
  line-height: 22px !important;
}

.unseen-badge-text {
  color: white;
  font-weight: 500;
  font-size: 12px !important;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Right Column (time, buttons) */
.chat-right-column {
  min-width: 55px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start;
  gap: 8px;
  margin-left: 8px;
}

/* Time Display */
.chat-time {
  white-space: nowrap;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  font-size: 12px;
  color: #737373;
  line-height: 1.2;
}

/* Action Buttons Row */
.chat-action-btns {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10px;
}

/* Icon Button Base */
.icon-btn {
  background: #fff;
  border: none;
  border-radius: 50%;
  padding: 0;
  margin: 0;
  font-size: 14px;
  width: 28px;
  height: 28px;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.icon-btn.with-margin-right {
  margin-right: 0;
}

/* Reply Box Styles */
.reply-box-container {
  box-shadow: none;
  margin-top: 0;
  border-radius: 0;
  border: none;
}

.reply-box-container.active {
  background-color: #fff;
}

/* Audio Preview */
.audio-preview-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.audio-preview-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.audio-duration-text {
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* ========== Chat Message Preview Styles ========== */

/* 
 * Unified styling for all chat list message previews.
 * All previews: single line, truncated with ellipsis, consistent typography.
 */

/* Base preview text style */
.chat-header-row .m-0 {
  font-size: 13px;
  color: #737373;
  font-weight: 400;
  margin: 0;
  padding: 0;
  max-width: 100%;
}

/* Text message preview (simple text) */
.chat-header-row p.m-0 {
  display: block;
  font-size: 13px;
  color: #737373;
  font-weight: 400;
  margin: 0;
  padding: 0;
  max-width: 100%;
  line-height: 1.15;
}

/* Message Preview Text - Simple text without truncation */
.message-preview-text {
  display: inline;
  font-size: 13px;
  color: #737373;
  font-weight: 400;
  line-height: 1.15;
  visibility: visible;
  opacity: 1;
}

/* Message Preview - Clamped to 2 lines */
.message-preview-clamped {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-word;
  font-size: 13px;
  color: #737373;
  font-weight: 400;
  line-height: 1.5;
  min-height: 0;
}

/* Message Preview - Expanded */
.message-preview-expanded {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  white-space: normal;
  word-break: break-word;
  font-size: 13px;
  color: #737373;
  font-weight: 400;
  line-height: 1.3;
  min-height: 0;
}

/* ReadMore button - inline text style, no button appearance */
.read-more-btn {
  background: none !important;
  border: none !important;
  color: #f08438;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  padding: 0 !important;
  margin: 0 0 0 4px !important;
  display: inline !important;
  vertical-align: baseline;
  line-height: 1.15;
  height: auto !important;
  min-height: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

.read-more-btn:hover {
  text-decoration: underline;
  background: none !important;
}

.read-more-btn:focus {
  outline: none;
  box-shadow: none !important;
}

/* Media type preview (image, doc, audio, video) */
.message-type-preview {
  display: flex;
  align-items: center;
  font-size: 13px;
  line-height: 16px;
  color: #737373;
  font-weight: 400;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.message-type-preview svg {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  opacity: 0.8;
}

.message-type-preview .material-symbols-outlined {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1;
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  overflow: visible;
}

.message-type-preview span:not(.material-symbols-outlined) {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Image preview with count */
.image-count-text {
  font-size: 13px;
  color: #737373;
  font-weight: 400;
}

.image-message-text {
  font-size: 13px;
  color: #737373;
  font-weight: 400;
  opacity: 0.85;
}

/* ========== End Chat Message Preview Styles ========== */

/* ========== Skeleton Loading Styles ========== */
.skeleton {
  background: linear-gradient(90deg, #e0e0e0 25%, #f0f0f0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-loading 1.5s infinite;
  border-radius: 4px;
}

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

.skeleton-image {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  flex-shrink: 0;
}

.skeleton-text {
  height: 14px;
  width: 100%;
  margin-bottom: 6px;
}

.skeleton-text.short {
  width: 60%;
}

.skeleton-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}

.skeleton-container {
  padding: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border-bottom: 1px solid #DFDFDF;
}

.skeleton-content {
  flex: 1;
  min-width: 0;
}

.skeleton-right {
  min-width: 55px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.skeleton-buttons {
  display: flex;
  gap: 10px;
}

/* ========== End Skeleton Loading Styles ========== */

/* ========== Empty State & Loading Styles ========== */
.empty-state-container {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0efed;
  padding: 20px;
  text-align: center;
}

.empty-state-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.empty-state-icon {
  margin-bottom: 15px;
}

.pagination-loader {
  width: 100%;
  padding: 15px;
  text-align: center;
  display: flex;
  justify-content: center;
  background: transparent;
  position: relative;
  z-index: 5;
}

.pagination-loader-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pagination-loader-text {
  color: #666;
  font-size: 14px;
}

.loading-overlay {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(240, 239, 237, 0.9);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10;
}

.remove-all-todo-btn {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px 10px 12px;
  background-color: #f0efed;
  border-bottom: 1px solid #e0e0e0;
}

.remove-all-todo-text {
  font-weight: 500;
  font-size: 14px;
}

/* Messages scroll container */
.messages-scroll-container {
  height: 100%;
  min-height: 400px;
  overflow-x: hidden;
  padding-top: 10px;
  background-color: #f0efed;
  position: relative;
}

/* ========== End Empty State & Loading Styles ========== */

/* Collapse Button */
.collapse-reply-btn-style {
  z-index: 10000;
  margin: 0;
  padding: 0;
  height: auto !important;
  min-height: auto !important;
}

/* Collapse reply button - orange hover effect */
.collapse-reply-btn:hover,
.collapse-reply-btn-style:hover {
  background: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

.collapse-reply-btn:hover svg,
.collapse-reply-btn-style:hover svg,
.collapse-reply-btn:hover svg path,
.collapse-reply-btn-style:hover svg path {
  stroke: #f08438 !important;
  color: #f08438 !important;
}

/* Arrow Icon Container */
.arrow-icon-container {
  margin-top: 5px;
}

/* Message Content Styles */
.message-content-multiline {
  display: block;
  white-space: normal;
  min-width: 0;
  max-width: 100%;
  overflow: visible;
}

/* Pilot Logo Image */
.pilot-logo-img {
  border-radius: 5px;
  object-fit: cover;
  opacity: 1;
}

/* User Avatar Image */
.user-avatar-img {
  border-radius: 100px;
  object-fit: cover;
}

/* Arrow Icon */
.arrow-icon-container {
  margin-top: 5px;
}

/* Message Deleted Text */
.message-deleted {
  color: #888;
}

/* Hidden Input */
.hidden-input {
  display: none;
}

/* Attachment Label */
.attachment-label {
  margin-bottom: 0;
}

/* Audio Player */
.audio-player {
  width: 100%;
  min-width: 200px;
  max-width: 400px;
}

/* Remove Audio Button Margin */
.remove-audio-margin {
  margin-left: 8px;
}

/* Loader Spinner Small */
.loader-spinner-small {
  width: 18px;
  height: 18px;
}


/* Kjuup Pilot Search Bar Animations */
.pilot-search-bar {
  animation: searchBarSlideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  transform-origin: right center;
}

@keyframes searchBarSlideIn {
  0% {
    opacity: 0;
    transform: scaleX(0) translateX(20px);
  }
  100% {
    opacity: 1;
    transform: scaleX(1) translateX(0);
  }
}

.pilot-header-title {
  animation: headerTitleFadeIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes headerTitleFadeIn {
  0% {
    opacity: 0;
    transform: translateX(-10px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Search Result Bubble Highlight */
.search-result-highlight {
  animation: searchResultPulse 0.6s ease-out;
  box-shadow: 0 0 0 1px #f08438 !important;
  border-radius: 12px !important;
}

@keyframes searchResultPulse {
  0% {
    box-shadow: 0 0 0 0 rgba(240, 132, 56, 0.7);
  }
  50% {
    box-shadow: 0 0 0 3px rgba(240, 132, 56, 0.4);
  }
  100% {
    box-shadow: 0 0 0 1px rgba(240, 132, 56, 1);
  }
}

/* Kjuup Pilot Topic Separator */
.pilot-topic-separator,
.pilot-topic-separator span,
.pilot-topic-separator .pilot-topic-text,
.no_member_chat.pilot-topic-separator span.pilot-topic-text {
  color: #f08438 !important;
  font-size: 13px !important;
  font-weight: 500 !important;
}

/* Kjuup Pilot Chat Container Animation */
.pilot-chat-container {
  animation: pilotChatFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes pilotChatFadeIn {
  0% {
    opacity: 0;
    transform: translateX(20px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Pilot Chat Header Animation */
.pilot-chat-container .chat_header {
  animation: pilotHeaderSlideDown 0.35s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.1s;
  opacity: 0;
}

@keyframes pilotHeaderSlideDown {
  0% {
    opacity: 0;
    transform: translateY(-10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Pilot Chat Messages Animation */
.pilot-chat-container .bottom-bar {
  animation: pilotMessagesAppear 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
  animation-delay: 0.2s;
  opacity: 0;
}

@keyframes pilotMessagesAppear {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

/* Internal Article Author Styles */
.internal-article-author h5 {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 0;
}

.internal-article-author h5 .internal-article-branch {
  font-size: 13px;
  font-weight: 400;
  font-style: italic;
  color: #737373;
  display: inline-block;
  max-width: 250px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: bottom;
  position: relative;
  cursor: default;
}

/* Custom tooltip for internal-article-branch */
.internal-article-author h5 .internal-article-branch::after {
  content: attr(data-tooltip);
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 8px);
  background: #ffffff;
  color: #737373;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 400;
  font-style: normal;
  white-space: normal;
  max-width: 320px;
  min-width: 150px;
  width: max-content;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #e8e8e8;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
  z-index: 9999;
  pointer-events: none;
  line-height: 1.5;
  text-align: left;
}

/* Tooltip arrow */
.internal-article-author h5 .internal-article-branch::before {
  content: '';
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(100% + 2px);
  border: 6px solid transparent;
  border-top-color: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 10000;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
}

/* Show tooltip on hover */
.internal-article-author h5 .internal-article-branch:hover::after,
.internal-article-author h5 .internal-article-branch:hover::before {
  opacity: 1;
  visibility: visible;
}

.internal-article-author h5 .internal-article-branch:hover::after {
  transform: translateX(-50%) translateY(-4px);
}

/* Article Department/Location Info Tabs */
.article-dept-location-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 2px;
}

.article-dept-location-tab {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  color: #288f6c;
  background-color: rgba(40, 143, 108, 0.1);
  border-radius: 10px;
  padding: 2px 10px;
  line-height: 1.5;
  white-space: nowrap;
  cursor: default;
  user-select: none;
}

/* Chat Image Gallery - Clean grid-based styling */
.chat-image-gallery {
  border-radius: 6px;
  overflow: hidden;
  display: block !important;
  width: 100% !important;
}

.chat-image-gallery img {
  transition: opacity 0.15s ease-in-out;
  background-color: #f0f0f0;
  display: block !important;
}

.chat-image-gallery img:hover {
  opacity: 0.9;
}

/* Reset group-ct-image container */
.group-ct-image {
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
  display: block !important;
  min-width: 200px !important;
  width: auto !important;
}

.group-ct-image > div {
  margin: 0 !important;
  padding: 0 !important;
}

/* Clean spacing for image message time */
.user_info_chat:has(.group-ct-image) > .small,
.user_info_chat:has(.chat-image-gallery) .small {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

/* Google Material Symbols Icons Configuration - REMOVED
   This was conflicting with contextMenu button icons.
   The specific .contextMenu .message-action-btn .material-symbols-outlined rule handles it.
*/

/* Animated loading dots */
.animated-dots::after {
  content: '';
  animation: loadingDots 1.5s infinite;
}

@keyframes loadingDots {
  0% { content: ''; }
  25% { content: '.'; }
  50% { content: '..'; }
  75% { content: '...'; }
  100% { content: ''; }
}

/* Download File Component Styles */
.download-file-container {
  display: flex;
  cursor: pointer;
}

.download-file-content {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 5px;
}

.download-file-icon,
.download-file-icon.material-symbols-outlined,
span.download-file-icon,
span.download-file-icon.material-symbols-outlined,
.material-symbols-outlined.download-file-icon,
.download-file-content .download-file-icon,
.download-file-content .material-symbols-outlined.download-file-icon {
  font-family: 'Material Symbols Outlined' !important;
  font-size: 24px !important;
  width: 24px !important;
  height: 24px !important;
  min-width: 24px !important;
  min-height: 24px !important;
  max-width: 24px !important;
  max-height: 24px !important;
  color: #737373 !important;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24 !important;
  font-weight: 300 !important;
  font-style: normal !important;
  line-height: 24px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
  overflow: hidden !important;
}

.download-file-name {
  font-size: 12px;
  color: #333;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-file-progress {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.download-file-download-icon.material-symbols-outlined,
span.download-file-download-icon.material-symbols-outlined,
.material-symbols-outlined.download-file-download-icon {
  position: absolute;
  font-family: 'Material Symbols Outlined' !important;
  font-size: 14px !important;
  width: 14px !important;
  height: 14px !important;
  color: #737373 !important;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 14 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* ===========================
   Share Location Modal - Modern Design
   =========================== */
.share-location-dialog,
.share-location-modal .modal-dialog,
.modal-dialog.share-location-dialog {
  min-width: 800px !important;
  max-width: 800px !important;
  width: 800px !important;
}

@media (max-width: 850px) {
  .share-location-dialog,
  .share-location-modal .modal-dialog,
  .modal-dialog.share-location-dialog {
    min-width: 95vw !important;
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 10px auto !important;
  }
}

.share-location-modal .modal-content {
  border-radius: 12px;
  border: none;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  overflow: hidden;
  width: 100% !important;
}

.share-location-modal .modal-header,
.share-location-modal .modal-footer {
  display: none;
}

.share-location-modal .modal-body {
  padding: 0 !important;
  width: 100% !important;
}

/* Custom Header */
.share-location-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #fff;
  border-bottom: 1px solid #eee;
  width: 100% !important;
  box-sizing: border-box;
}

.share-location-header-content {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Header location icon - outlined, gray, weight 300 */
.share-location-header-icon {
  font-size: 24px;
  color: #737373;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* Title text - gray */
.share-location-title {
  font-size: 16px;
  font-weight: 500;
  color: #737373;
}

.share-location-close-btn {
  background: none !important;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #737373;
  border-radius: 50%;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Default (Kjuup) - Orange hover for close button */
.share-location-close-btn:hover {
  background: none !important;
  color: #f08438 !important;
}

/* Kjuup+ (Internal) - Green hover for close button */
.share-location-internal .share-location-close-btn:hover {
  color: #288f6c !important;
}

.share-location-close-btn .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition: color 0.2s ease;
  color: inherit;
}

/* Footer */
.share-location-footer {
  padding: 16px 20px;
  background: #fff;
  border-top: 1px solid #eee;
  width: 100% !important;
  box-sizing: border-box;
}

.share-location-footer-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.share-location-info {
  display: flex;
  align-items: center;
}

.share-location-text {
  display: flex;
  flex-direction: column;
}

.share-location-label {
  font-size: 16px;
  font-weight: 500;
  color: #737373;
}

.share-location-accuracy {
  font-size: 13px;
  color: #737373;
  margin-top: 2px;
}

/* Send button - transparent with hover effect */
.share-location-send-btn {
  background: none !important;
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  color: #737373;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: none !important;
}

.share-location-send-btn .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition: color 0.2s ease;
  color: inherit;
}

/* Default (Kjuup) - Orange hover */
.share-location-send-btn:hover {
  color: #f08438 !important;
  transform: none !important;
}

/* Kjuup+ (Internal) - Green hover */
.share-location-internal .share-location-send-btn:hover {
  color: #288f6c !important;
}

/* Share Options View */
.share-location-footer-content.share-options {
  gap: 16px;
}

.share-location-buttons {
  display: flex;
  align-items: center;
  gap: 10px;
}

.share-location-buttons button {
  transition: transform 0.2s ease;
}

.share-location-buttons button:hover {
  transform: scale(1.08);
}

/* Copy button - default orange */
.share-location-copy-btn {
  width: 36px;
  height: 36px;
  background: #f5f5f5;
  border: 1px solid #e0e0e0;
  border-radius: 50%;
  cursor: pointer;
  color: #737373;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-location-copy-btn:hover {
  background: #fff;
  border-color: #f08438;
  color: #f08438;
}

/* Kjuup+ (Internal) - Green copy button hover */
.share-location-internal .share-location-copy-btn:hover {
  border-color: #288f6c;
  color: #288f6c;
}

.share-location-copy-btn .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.share-location-back-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #737373;
  border-radius: 50%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-location-back-btn:hover {
  background-color: #f5f5f5;
  color: #333;
}

.share-location-back-btn .material-symbols-outlined {
  font-size: 24px;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ============================================
   COMPANY SELECTION MODAL (External Feed)
   ============================================ */

.company-selection-modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10001;
  animation: fadeIn 0.2s ease-out;
}

.company-selection-modal-container {
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  width: 90%;
  max-width: 480px;
  max-height: 70vh;
  overflow: hidden;
  animation: slideUp 0.25s ease-out;
  display: flex;
  flex-direction: column;
}

.company-selection-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f0f0;
  flex-shrink: 0;
}

.company-selection-modal-title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.company-selection-modal-header .close-icon {
  font-size: 24px;
  color: #737373;
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
  transition: color 0.2s ease;
}

.company-selection-modal-header .close-article-btn:hover .close-icon {
  color: #f08438;
}

.company-selection-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.company-selection-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  border-bottom: 1px solid #f5f5f5;
}

.company-selection-item:last-child {
  border-bottom: none;
}

.company-selection-item:hover {
  background-color: rgba(240, 132, 56, 0.08);
}

.company-selection-item-info {
  flex: 1;
}

.company-selection-item-name {
  margin: 0 0 4px 0;
  font-size: 15px;
  font-weight: 600;
  color: #333;
}

.company-selection-item-address {
  margin: 0 0 2px 0;
  font-size: 13px;
  color: #737373;
}

.company-selection-item-position {
  margin: 0;
  font-size: 12px;
  color: #999;
}

.company-selection-item-arrow {
  font-size: 20px;
  color: #999;
  margin-left: 12px;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20;
  transition: transform 0.2s ease, color 0.2s ease;
}

.company-selection-item:hover .company-selection-item-arrow {
  transform: translateX(4px);
  color: #f08438;
}

/* ========== Leave Chat Dialog Styling - Internal/External ========== */
/* Force internal dialog buttons and labels green */
body.dialog-internal .MuiDialogActions-root .MuiButton-root {
  background-color: #fff !important;
  border: 1.5px solid #288f6c !important;
  color: #288f6c !important;
}

body.dialog-internal .MuiDialogActions-root .MuiButton-root:hover {
  background-color: #288f6c !important;
  color: #fff !important;
}

body.dialog-internal .MuiDialogActions-root span.MuiButton-label,
body.dialog-internal .MuiDialogActions-root .MuiButton-root span.MuiButton-label,
body.dialog-internal span.MuiButton-label {
  color: #288f6c !important;
}

body.dialog-internal .MuiDialogActions-root .MuiButton-root:hover span.MuiButton-label {
  color: #fff !important;
}

/* Force external dialog buttons and labels orange */
body.dialog-external .MuiDialogActions-root .MuiButton-root {
  background-color: #fff !important;
  border: 1.5px solid #f08438 !important;
  color: #f08438 !important;
}

body.dialog-external .MuiDialogActions-root .MuiButton-root:hover {
  background-color: #f08438 !important;
  color: #fff !important;
}

body.dialog-external .MuiDialogActions-root span.MuiButton-label,
body.dialog-external .MuiDialogActions-root .MuiButton-root span.MuiButton-label,
body.dialog-external span.MuiButton-label {
  color: #f08438 !important;
}

body.dialog-external .MuiDialogActions-root .MuiButton-root:hover span.MuiButton-label {
  color: #fff !important;
}

/* Media Action Buttons - Google Material Symbols */
.media-action-btn .material-symbols-outlined {
  transition: color 0.2s ease, transform 0.2s ease;
}

/* External (orange) hover */
.media-action-btn.external:hover .material-symbols-outlined {
  color: #f08438 !important;
  transform: scale(1.1);
}

/* Internal (green) hover */
.media-action-btn.internal:hover .material-symbols-outlined {
  color: #288f6c !important;
  transform: scale(1.1);
}

/* Cancel mode hover (gray stays gray but scales) */
.media-action-btn.cancel-mode:hover .material-symbols-outlined {
  color: #555 !important;
  transform: scale(1.1);
}

/* Button text hover effects */
.media-action-btn.external:hover span:not(.material-symbols-outlined) {
  color: #f08438 !important;
}

.media-action-btn.internal:hover span:not(.material-symbols-outlined) {
  color: #288f6c !important;
}

.media-action-btn.cancel-mode:hover span:not(.material-symbols-outlined) {
  color: #555 !important;
}

/* Media Back Button Hover */
.media-back-btn .material-symbols-outlined {
  transition: color 0.2s ease, transform 0.2s ease;
}

.media-back-btn:hover .material-symbols-outlined {
  transform: translateX(-3px);
}

/* Final override for Material-UI confirm dialog actions (must stay after orange global rules) */
.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary,
.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary,
.MuiDialog-root .MuiDialogActions-root .MuiButtonBase-root.MuiButton-root.MuiButton-textPrimary {
  border-radius: 10px !important;
  min-width: 88px !important;
}

/* Cancel button */
.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:first-child,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:first-child {
  color: var(--confirm-btn-color) !important;
  background-color: #fff !important;
  border: 1.5px solid var(--confirm-btn-color) !important;
}

.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:first-child .MuiButton-label,
.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:first-child .MuiButton-label span,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:first-child .MuiButton-label,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:first-child .MuiButton-label span {
  color: var(--confirm-btn-color) !important;
}

.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:first-child:hover,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:first-child:hover {
  background-color: var(--confirm-btn-color) !important;
  border-color: var(--confirm-btn-color) !important;
  color: #fff !important;
}

.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:first-child:hover .MuiButton-label,
.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:first-child:hover .MuiButton-label span,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:first-child:hover .MuiButton-label,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:first-child:hover .MuiButton-label span {
  color: #fff !important;
}

/* Ok button */
.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:last-child,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:last-child {
  color: #fff !important;
  background-color: var(--confirm-btn-color) !important;
  border: 1.5px solid var(--confirm-btn-color) !important;
}

.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:last-child .MuiButton-label,
.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:last-child .MuiButton-label span,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:last-child .MuiButton-label,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:last-child .MuiButton-label span {
  color: #fff !important;
}

.MuiDialog-root .MuiDialogActions-root.MuiDialogActions-spacing .MuiButton-root.MuiButton-textPrimary:last-child:hover,
.MuiDialog-root .MuiDialogActions-root .MuiButton-root.MuiButton-textPrimary:last-child:hover {
  background-color: color-mix(in srgb, var(--confirm-btn-color) 85%, #000) !important;
  border-color: color-mix(in srgb, var(--confirm-btn-color) 85%, #000) !important;
}

.imap-modal-connect-btn,
.btn.imap-modal-connect-btn,
button.imap-modal-connect-btn {
  background-color: #e066ed !important;
  border-color: #e066ed !important;
  color: #fff !important;
}
.imap-modal-connect-btn:hover:not(:disabled),
.btn.imap-modal-connect-btn:hover:not(:disabled) {
  background-color: #cf59da !important;
  border-color: #cf59da !important;
}
.setting_profile .imap-modal .add_company_from .form-control:hover:not(:disabled),
.imap-modal .form-control:hover:not(:disabled) {
  border: 1px solid #e066ed !important;
}

.setting_profile .imap-modal .add_company_from .form-control:focus,
.imap-modal .form-control:focus {
  border: 1px solid #e066ed !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(224, 102, 237, 0.25) !important;
  background-color: #fff !important;
}

/* ── Feed loading transition ── */
.feed-loading-screen {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #f0efed;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: feedLoadingFadeIn 0.25s ease-out;
}

.feed-loading-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.feed-loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e0dfdd;
  border-top-color: #f08438;
  border-radius: 50%;
  animation: feedSpin 0.8s linear infinite;
}

.feed-loading-text {
  font-size: 14px;
  font-weight: 500;
  color: #8c8c8c;
  margin: 0;
}

@keyframes feedSpin {
  to { transform: rotate(360deg); }
}

@keyframes feedLoadingFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.feed-content-fade-in {
  animation: feedContentReveal 0.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}

@keyframes feedContentReveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ========== Unread email indicator in LatestMessages list ==========
   The unread marker is intentionally minimal: a small orange dot in
   front of the sender name. We deliberately drop the left-border
   "marking" and the light-purple highlight background that earlier
   iterations used — they made the list look too busy. Text stays
   pure black so unread emails read identically to read ones, with
   the dot being the only visual cue. */
.company_centact.chat-item-container.lm-email-unread {
  border-left: none !important;
  background-color: transparent !important;
}

.company_centact.chat-item-container.lm-email-unread .chat-item-link {
  background-color: transparent !important;
}

.company_centact.chat-item-container.lm-email-unread h5 {
  font-weight: 700 !important;
  color: #000 !important;
}

.company_centact.chat-item-container.lm-email-unread .message-content-multiline {
  font-weight: 600 !important;
  color: #000 !important;
}

.company_centact.chat-item-container.lm-email-unread .message-preview-text {
  color: #000 !important;
}

.company_centact.chat-item-container.lm-email-unread .chat-time-inline {
  color: #000 !important;
  font-weight: 600 !important;
}

/* ========== Email action buttons in LatestMessages list ========== */
.lm-email-header-right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.lm-email-action-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none !important;
  border: none;
  padding: 2px;
  margin: 0;
  cursor: pointer;
  line-height: 0;
  box-shadow: none !important;
  outline: none;
}

.lm-email-action-btn:hover {
  background: none !important;
}

.lm-email-action-btn:hover .material-symbols-outlined {
  color: #e066ed !important;
}

.lm-email-action-btn--delete:hover .material-symbols-outlined {
  color: #d32f2f !important;
}

.lm-email-action-btn--active {
  cursor: default;
}

/* Orange "pending" dot rendered inline before the sender name on
   unread emails. Color matches KJUUP_COLORS.base_color (#f08438). */
.lm-email-unread-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #f08438;
  flex-shrink: 0;
  align-self: center;
  margin-right: 6px;
  box-shadow: 0 0 4px rgba(240, 132, 56, 0.4);
  display: inline-block;
  vertical-align: middle;
}

/* No background tint on hover for unread email rows — the dot is
   the only marker, so the row should behave like any other entry. */
.company_centact.chat-item-container.lm-email-unread:hover,
div.company_centact.chat-item-container.lm-email-unread:hover,
.company_centact.chat-item-container.lm-email-unread:hover:not(.active-project),
div.company_centact.chat-item-container.lm-email-unread:hover:not(.active-project),
.latestmessages_scrollbar .chat-item-container.lm-email-unread:hover:not(.active-project) {
  background-color: transparent !important;
  background: transparent !important;
}