.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;
}

/* Hide settings icon on room members page */
div:has(.w-300) img[src*="settings.svg"] {
  display: none !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 dark background and blur effect */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
}

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

/* Material-UI Dialog backdrop with dark background and blur effect */
.MuiBackdrop-root {
  background-color: rgba(0, 0, 0, 0.5) !important;
  backdrop-filter: blur(5px) !important;
  -webkit-backdrop-filter: blur(5px) !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: bold !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 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: "Arial", 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;
}

.no-border-internal a {
  color: #737373;
  display: flex;
  align-items: center;
  font-style: italic;
  font-size: 13px;
}

.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;
  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;
}

.add_company_from {
  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: #f7f7f7;
  padding: 10px 0px;
  margin-top: 20px;
}

.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;
  padding: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  border-radius: 10px;
}

.company_services.kjuup-pilot-container {
  padding-left: 20px !important;
  padding-right: 20px !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;
  margin-bottom: 15px;
  margin-top: 15px;
}

.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;
}

.company_centact .details-company div {
  margin-top: 10px;
}

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

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

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

.heading.bg_white {
  background: #f0efed;
}

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

/* 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 .follow {
  display: flex;
  justify-content: center;
}

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

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

.bg-normal {
  background: #f0efed;
}

.bg-green {
  background: #f0efed;
  /* 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;
}

.mt-10 {
  margin-top: 10px;
}

.middle-title {
  font-size: 14px;
  margin-bottom: 0;
  color: #737373;
  font-weight: 600;
}

.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: 600;
}

.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;
}

.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: 600;
  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: 600;
  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;
  color: #000 !important;
  font-weight: 500;
  margin: 0 -10px;
  line-height: 60px;
  padding-top: 20px;
}

.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: 8px !important;
  line-height: 1 !important;
}

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

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

.project_info {
  display: flex;
  justify-content: space-between;
  padding: 5px 5px;
  margin: 5px 0px;
  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: 600;
  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;
  opacity: 0.5;
}

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

.p_name:hover {
  color: #f08438 !important;
}

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

.h45vh {
  height: 45vh;
}

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

.search .form-group input {
  height: 38px;
  border: 1px solid #fff;
  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: #f0efed;
}

.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: 600;
}

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

.chat_services .website {
  margin: 5px
}

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

/*.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: 600;
  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;
}

/* 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: bold; /* 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;
  border-bottom: 0.3px solid #e0e0e0 ;
  z-index: 10000;
  height: 60px;
}

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

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

.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); */
}

.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;
}

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

.heading_icon .main_heading {
  border: none;
  margin: 0;
}

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

.icons_heading {
  margin-right: 10px;
}

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

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

.regiter a {
  font-size: 18px;
  font-weight: 600;
  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;
}

.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: 40px;
  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: 600;
  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: 600;
  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: 600;
}

.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: Arial, 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: 600;
}

.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: 700;
  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;
}

.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;
}

.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: 18px;
}

.dashboard_short_info {
  display: flex;
  background: #f7f7f7;
  border: 1px solid #e3e3e3;
  border-collapse: collapse;
  color: #f78733;
  font-weight: 600;
  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: 600;
  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;
}

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


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

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

.admin-control {
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.admin-control img {
  margin-right: 12px;
  border-radius: 50% !important;
}

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

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

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

/* The container */
.container_checkbox {
  display: block;
  position: relative;
  padding-left: 35px;
  margin-bottom: 25px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

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

/* Create a custom checkbox */
.checkmark {
  position: absolute;
  top: 20px;
  right: 0;
  height: 20px;
  width: 20px;
  background-color: #eee;
  border-radius: 50%;
  border: 2px solid #737373;
}

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

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

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

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

/* Style the checkmark/indicator */
.container_checkbox .checkmark:after {
  left: 6px;
  top: 1px;
  width: 6px;
  height: 14px;
  border: solid white;
  border-width: 0 3px 3px 0;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.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: 0px 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: 600;
  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;
}

.setting_profile .company_header {
  padding: 3px 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: 3px 10px 0;
}

.setting_profile {
  background-color: #fff;
}

/* .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: center;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
  background-color: #f0efed;
}

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

.remove-admin-rights-button svg {
  cursor: pointer;
  height: 16px;
  width: 16px;
}


.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: center !important;
  padding-top: 20px !important;
  border-top: none !important;
  margin-top: 0 !important;
}

/* Remove border from heading that appears before user_image */
.add_company .heading {
  border-bottom: none !important;
  border-top: none !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.user_image img {
  border-radius: 50%;
  width: 55px !important;
  height: 55px !important;
  object-fit: cover;
  display: block;
  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;
}

.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: 600;
  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: 4px;
  flex-wrap: wrap;
  min-height: 38px;
  word-wrap: break-word;
  overflow-wrap: break-word;
  max-width: 400px;
  box-sizing: border-box;
  border: 1px solid #ddd;
}

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

/* 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: 38px;
  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-bottom: 0;
}

.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;
}

/* 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;
}

.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%;
}

.website_loader {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  background: rgb(0 0 0 / 50%);
  z-index: 2;
}

@-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;
}

.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;
}

.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);
  }
}

/*.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: calc(44vh - 125px);
}

.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: 1px solid #e0e0e0 !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: 0 1px 3px rgba(0, 0, 0, 0.08) !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: #f8f8f8 !important;
  border-color: #d0d0d0 !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(-1px);
}

.reply-btn.icon-btn-shadow:active,
.reminder-btn.icon-btn-shadow:active {
  transform: translateY(0) scale(0.96) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.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: 700;
}

.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;
}

.no-border a:hover span,
.no-border a:hover {
  /* color: #f08438; */
}

.no-border a:hover svg {
  /* stroke: #f08438; */
}

.noHover {}

.no-border-internal a:hover span,
.no-border-internal a:hover {
  /* color: #288f6c; */
}

.no-border-internal a:hover svg {
  /* stroke: #288f6c; */
}


.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;
}

/* 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(5px);
  -webkit-backdrop-filter: blur(5px);
  background-color: rgba(0, 0, 0, 0.5);
  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: 600 !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: 600;
  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;
}

.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: 15px solid #f7f7f7;
}

.conversation_bottom {
  margin-top: 10px;
}

.cssScroll {
  display: flex;
  flex-direction: column-reverse;
}

.wscroll.right_wscroll.project_scrool {
  height: calc(44vh - 163px);
  border-radius: 10px;
  overflow: auto;
}

.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(5px) !important;
  -webkit-backdrop-filter: blur(5px) !important;
  background-color: rgba(0, 0, 0, 0.5) !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: 700;
  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;
}

/* 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;
}

.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: 600;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;
}

.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: calc(44vh - 160px); */
  }

  .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-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;
}

.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;
}

.active-forward {
  fill: #f08438;
}

.ccImage {
  height: 400;
  width: 0;
  object-fit: contain;
}

.thhImage {
  height: 0;
  width: 0;
  overflow: hidden;
}

.Chat_up_down a:hover {
  color: #737373 !important;
}

.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 {
  background-color: #fff;
  border-bottom: 1px solid #ccc;
  width: 100%;
  max-height: 300px;
}

.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: #fff;
  position: relative;
  display: flex;
  align-items: center;
  border-top: 0.3px solid #e0e0e0;
  justify-content: space-between;
}

.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;
}

.cancel-reply a {
  font-size: 12px;
  font-weight: 500;
}

.reply-left {
  background: #fff;
  border-left: 3px solid #f08438;
  padding: 5px;
  margin-bottom: 6px;
  overflow: hidden;
  font-size: 12px;
}

.reply-right {
  background: #fff;
  border-left: 3px solid #f08438;
  padding: 5px;
  margin-bottom: 6px;
  overflow: hidden;
}

.reply-left,
.reply-right .simple-msg {
  color: #737373;
}

.right_msg_reply {
  display: block;
  align-items: center;
}

.right_msg_reply img {
  max-width: 100%;
}

.right_reply_img {
  flex: 0 0 60px;
  margin-right: 15px;
}

.highlight .contextMenu .dropdown button {
  background-color: transparent !important;
}

/* Hide angle down button by default, show on message hover */
.contextMenu .toggleMenu {
  display: none !important;
}

.user_info_chat:hover .contextMenu .toggleMenu,
.contact-right:hover .contextMenu .toggleMenu,
.contact-left:hover .contextMenu .toggleMenu,
.user_chat_content:hover .contextMenu .toggleMenu {
  display: block !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;
}

.left_users .audio-file audio {
  width: 258px;
  height: 30px;
}

.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: 258px !important;
  height: 30px !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;
}

.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;
}

.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: background-color 0.15s ease-out;
  background-color: #fff !important;
}

.latestmessages_scrollbar .company_centact {
  transition: background-color 0.15s ease-out;
}

.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: bold;
}

::-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: Arial, 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: bold;
  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: bold;
  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;
}
#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: 55px;
    flex: 0 0 55px;
    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;
  }
  
  /* Chat group border for mobile view */
  .w-300.chat_text.chat_box_main_div {
    border-left: 1px solid #e0e0e0 !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: 600;
  }
  .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: 38px;
    max-width: 400px;
  }
  .chat_search_div img {
      top: 11px;
  }
 .main_nav {
    border-right: 1px solid #e0e0e0;
  }
  .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;
  }
  
  /* Chat group border for tablet view */
  .w-300.chat_text.chat_box_main_div {
    border-left: 1px solid #e0e0e0 !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:  1200px) and (max-width: 1440px) {
  .user_list_main_box {
      width: 350px;
  }
  .common_box_user_list {
    width: 350px;
  }
  .edit_project_main_div {
    width: 350px;
  }
  a.main_heading.pointer {
    font-size: 15px !important;
  }
  .company_header .heading_icon div, .company_header .heading_icon a {
    font-size: 15px !important;
  }
  .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;
  }
}

@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 {
  background-color: #ffffff !important;
  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;
}

/* ===========================
   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;
}

.emoji_show_section {
  z-index: 1;
  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;
}

/* Message dropdown menu - ensure it appears above all messages and footer */
.contextMenu .dropdown-menu,
.contextMenu .dropdown-menu.show {
  z-index: 100001 !important;
  font-size: 13px;
  transform: none !important;
  position: absolute !important;
  inset: auto !important;
  margin: 0 !important;
}

.contextMenu .dropdown-menu .dropdown-item {
  font-size: 13px;
  padding: 6px 16px;
}

/* Own messages (right side) - align dropdown top-right with message top-right */
.right_users .contextMenu .dropdown-menu,
.right_users .contextMenu .dropdown-menu.show,
.contact-right .contextMenu .dropdown-menu,
.contact-right .contextMenu .dropdown-menu.show {
  top: 0 !important;
  right: 0 !important;
  left: auto !important;
  bottom: auto !important;
}

/* Foreign messages (left side) - align dropdown top-left with message top-left */
.user_chat_content:not(.right_users) .contextMenu .dropdown-menu,
.user_chat_content:not(.right_users) .contextMenu .dropdown-menu.show,
.contact-left .contextMenu .dropdown-menu,
.contact-left .contextMenu .dropdown-menu.show,
.contextMenu.left-context .dropdown-menu,
.contextMenu.left-context .dropdown-menu.show {
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
}

/* Keep message bubbles in normal stacking context - don't elevate them */
.user_chat_content:has(.dropdown-menu.show),
.user_info_chat:has(.dropdown-menu.show),
.contact-left:has(.dropdown-menu.show),
.contact-right:has(.dropdown-menu.show) {
  position: relative;
}

/* Context menu container - keep normal z-index so it doesn't overlap header/footer on scroll */
.contextMenu:has(.show) {
  position: relative;
}

.contextMenu .dropdown.show {
  position: relative;
}

/* ============================================
   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: 600;
  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(0, 0, 0, 0.3);
  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;
  background: transparent !important;
}

.attachment-menu-icon svg {
  color: #737373 !important;
}

.attachment-menu-item span {
  font-size: 13px;
  font-weight: 500;
  color: #737373;
}

.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);
}

/* 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: 16px;
  height: 16px;
  border: none;
  background: transparent;
  color: #737373 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  padding: 0;
}

.photo-preview-close-btn:hover {
  transform: scale(1.1);
  opacity: 0.7;
}

.photo-preview-close-btn svg {
  width: 16px;
  height: 16px;
}

.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);
}

/* 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;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  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: 4px;
}

.photo-preview-thumbnails::-webkit-scrollbar-track {
  background: transparent;
}

.photo-preview-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.photo-preview-overlay.light .photo-preview-thumbnails::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
}

.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);
}

.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;
  background: transparent !important;
  overflow: hidden !important;
}

.photo-preview-add-more:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

.photo-preview-overlay.light .photo-preview-add-more:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

/* Input Section - matches chat_input style */
.photo-preview-input-section {
  padding: 10px;
  background: #fff;
}

/* Light theme input section */
.photo-preview-overlay.light .photo-preview-input-section {
  background: #fff;
}

.photo-preview-input-row {
  display: flex;
  align-items: center;
  width: 100%;
}

.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);
}

/* Input wrapper - matches input_text_msg style */
.photo-preview-input-wrapper {
  flex: 1;
  margin: 0 10px;
  min-width: 0;
}

.photo-preview-textarea {
  width: 100%;
  background: #fff;
  border: 1px solid #f0efed;
  border-radius: 4px;
  outline: none;
  resize: none;
  color: #333;
  font-size: 13px;
  line-height: 1.4;
  padding: 8px 12px;
  min-height: 30px;
  max-height: 100px;
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, sans-serif;
}

.photo-preview-textarea:focus {
  outline: none;
  box-shadow: none;
}

.photo-preview-textarea::placeholder {
  color: #9ca3af;
}

/* 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;
}

.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;
  }
}

/* Background color #f0efed */
.company_services.m-0,
.chat_services,
.user_info_chat,
.left_users.p-1 {
  background-color: #f0efed !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;
}