@import url(https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap);

/* Phone Input Override - Clean Implementation */

/* Reset and override existing styles */
.phoneFormInput {
  position: relative !important;
  display: flex !important;
  align-items: stretch !important;
  gap: 0 !important;
  /* margin-top: 0.5rem !important; */
  width: 100% !important;
}

/* Remove all absolute positioning from dropdown */
.phoneFormInput .dropdown {
  position: relative !important;
  /* z-index: 10 !important; */
  height: auto !important;
  min-height: auto !important;
  background: transparent !important;
  display: block !important;
  width: auto !important;
  min-width: auto !important;
  top: auto !important;
  transform: none !important;
  border: none !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/* Country code button styling */
.phoneFormInput .dropdown-toggle {
  background: #f8f9fa !important;
  border: 1px solid #ced4da !important;
  border-right: none !important;
  border-radius: 0.375rem 0 0 0.375rem !important;
  padding: 0.75rem 1rem !important;
  min-height: 48px !important;
  height: 100% !important;
  min-width: 85px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #495057 !important;
  margin: 0 !important;
  position: relative !important;
  width: auto !important;
  white-space: nowrap !important;
}

.phoneFormInput .dropdown-toggle:hover {
  background: #e9ecef !important;
}

.phoneFormInput .dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(18, 98, 171, 0.25) !important;
  outline: none !important;
  z-index: 3 !important;
}

/* Remove Bootstrap dropdown arrow */
.phoneFormInput .dropdown-toggle::after {
  display: none !important;
}

/* Country flag styling */
.phoneFormInput .dropdown-toggle img {
  width: 20px !important;
  height: 15px !important;
  object-fit: cover !important;
  flex-shrink: 0 !important;
}

/* Phone number input field */
.phoneFormInput input[type="text"],
.phoneFormInput input[type="tel"] {
  flex: 1 !important;
  border: 1px solid #ced4da !important;
  border-left: none !important;
  border-radius: 0 0.375rem 0.375rem 0 !important;
  padding: 0.75rem 1rem !important;
  min-height: 48px !important;
  font-size: 14px !important;
  margin: 0 !important;
  width: 100% !important;
}

/* Focus states */
/* .phoneFormInput:focus-within .dropdown-toggle {
  border-color: #1262ab !important;
  z-index: 3 !important;
} */



/* Dropdown menu styling */
.phoneFormInput .dropdown-menu {
  min-width: 200px !important;
  max-height: 300px !important;
  overflow-y: auto !important;
  margin-top: 0.25rem !important;
  border-radius: 0.375rem !important;
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  padding: 0.5rem 0 !important;
}

/* Dropdown items */
.phoneFormInput .dropdown-item {
  padding: 0.75rem 1rem !important;
  display: flex !important;
  align-items: center !important;
  gap: 0.75rem !important;
  font-size: 14px !important;
  min-height: 44px !important;
}

.phoneFormInput .dropdown-item:hover {
  background-color: #f8f9fa !important;
}

.phoneFormInput .dropdown-item:active {
  background-color: #1262ab !important;
  color: white !important;
}

.phoneFormInput .dropdown-item img {
  width: 20px !important;
  height: 15px !important;
  object-fit: cover !important;
}

/* Override any TextInput wrapper styles */
/* .phoneFormInput+.form-label,
.phoneFormInput .form-label {
  display: none !important;
} */

/* Mobile adjustments */
@media (max-width: 576px) {
  .phoneFormInput .dropdown-toggle {
    min-width: 75px !important;
    padding: 0.75rem 0.5rem !important;
    font-size: 13px !important;
  }

  .phoneFormInput .dropdown-toggle img {
    width: 18px !important;
    height: 14px !important;
  }

  .phoneFormInput input[type="text"],
  .phoneFormInput input[type="tel"] {
    padding: 0.75rem 0.75rem !important;
  }
}

/* Error state */
.phoneFormInput.is-invalid .dropdown-toggle {
  border-color: #dc3545 !important;
}

.phoneFormInput.is-invalid input {
  border-color: #dc3545 !important;
}

/* Disabled state */
.phoneFormInput.disabled .dropdown-toggle,
.phoneFormInput.disabled input {
  background-color: #e9ecef !important;
  opacity: 0.65 !important;
  cursor: not-allowed !important;
}

/* Mobile Bottom Navigation - Similar to Image #1 Design */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  z-index: 1000;
  padding: 12px 20px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -2px 20px rgba(0, 0, 0, 0.1);
}

.mobile-bottom-nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
}

.mobile-bottom-nav-item {
  flex: 0 0 auto;
}

.mobile-nav-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  min-width: 100px;
  padding: 12px 20px;
  border: none;
  border-radius: 8px;
  font-family: "Manrope", sans-serif;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

.mobile-nav-btn-primary {
  background: #1262ab;
  color: white;
  box-shadow: 0 2px 8px rgba(18, 98, 171, 0.2);
}

.mobile-nav-btn-primary:hover:not(:disabled) {
  background: #0f4d87;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(18, 98, 171, 0.3);
}

.mobile-nav-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(18, 98, 171, 0.2);
}

.mobile-nav-btn-secondary {
  background: #f8f9fa;
  color: #666;
  border: 1px solid #e9ecef;
}

.mobile-nav-btn-secondary:hover {
  background: #e9ecef;
  color: #333;
}

.mobile-nav-btn-secondary:active {
  background: #dee2e6;
}

/* .mobile-nav-btn-disabled {
  background: #e9ecef !important;
  color: #adb5bd !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

.mobile-nav-btn-disabled:hover,
.mobile-nav-btn-disabled:active {
  transform: none !important;
  box-shadow: none !important;
} */

/* Hide on desktop - show only on mobile */
@media (min-width: 992px) {
  .mobile-bottom-nav {
    display: none;
  }
}

/* Landscape phone optimizations */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .mobile-bottom-nav {
    padding: 8px 20px;
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }
  
  .mobile-nav-btn {
    min-height: 36px;
    padding: 8px 16px;
    font-size: 13px;
  }
}

/* Add bottom padding to content when mobile nav is present */
@media (max-width: 991px) {
  body.has-mobile-bottom-nav {
    padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px)) !important;
  }
  
  .signup-form-container {
    padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
}
.gallery-view.deal-view {
  padding: 24px 0;
}

h6.dealidname {
  margin-top: 22px;
  text-align: center;
}

.single-info {
  position: relative;
}

.single-image {
  position: sticky;
  top: 90px;
}

.single-image img {
  width: 100%;
  transition: 0.4s;
}

.single-image.detail-single img {
  padding: 4px;
  border: 1px solid #ddd;
}

.specifications {
  line-height: 1.5;
}

.single-image:hover img {
  transform: scale(1.1) rotate(7ded);
}

/* 
.single-pagination {
  border-bottom: 1px solid #ddd;
  margin-bottom: 7px;
}

.single-pagination ul li {
  display: inline-block;
} */

.deal-view .thumbCarousel {
  padding: 0px;
  border: 1px solid #ddd;
}

.deal-view .single-image .lightSlider img {
  padding: 5px;
  background: #fff;
}

.deal-view .csPager li {
  padding: 5px;
  border: 1px solid #ddd;
  border-bottom: 0;
}

.deal-view .csPager li.active {
  border: 1px solid #777;
}

.deal-view .product-actions .attach svg {
  background: transparent;
  padding: 0px;
  width: auto;
  height: auto;
  border-radius: 2px;
  margin-left: 0;
}

.single-pagination ul li a {
  text-decoration: none;
  color: #000;
  font-size: 13px;
  font-weight: 400;
  display: block;
  padding: 0px 0;
  padding-bottom: 7px;
  margin-right: 31px;
  position: relative;
}

.single-pagination ul li a::before {
  content: ">";
  position: absolute;
  right: -1.3rem;
  font-size: 1.2rem;
  top: -0.3rem;
  color: #333;
  font-weight: 300;
}

.single-pagination ul li:last-child a::before {
  content: "";
}

.single-info .actions {
  position: absolute;
  right: 0;
}

.extra-info .field-value {
  font-size: 0.9rem;
  font-weight: 400;
  color: #222;
  max-width: 225px;
}

.extra-info .field-name {
  font-size: 0.9rem;
  color: #000;
  width: 175px;
  font-weight: 500;
}

.field-devider {
  min-width: 51px;
}

.detail-info {
  position: sticky;
  top: 90px;
}

.status-info {
  background: #fafafa;
  padding: 8px;
  margin-bottom: 18px;
  overflow: hidden;
}

.status-info p {
  display: flex;
}

.status-info p svg {
  align-self: center;
}

.status-info .product-connect {
  padding: 15px 0px;
  width: 100%;
  font-size: 14px;
}

.status-info .product-connect span::before {
  left: 30px;
}

.status-info span svg {
  background: transparent;
  position: relative;
  left: -15px;
}



.status-info p {
  display: flex;
  font-size: 13px;
  color: #555;
}

.status-info p a {
  display: contents;
}

.applybtn {
  width: 100%;
  border: none;
  background: #0d9d00;
  color: #fff;
  height: 51px;
  border-radius: 5px;
  font-size: 15px;
  letter-spacing: 0.5px;
}

.stick-info {
  position: sticky;
  top: 90px;
}

/* 
.inactive-thumbnail img {
  width: 40px !important;
}

.active-thumbnail img {
  width: 40px !important;
}

.thumbnail_slides .slick-slide {
  border: 1px solid transparent;
  overflow: hidden;
  border-radius: 4px;
  padding: 4px;
  cursor: pointer;
}

.thumbnail_slides .slick-current.slick-slide {
  border: 1px solid #0c3963;
  cursor: default;
}

.slick-slide img {
  display: block;
  margin: auto;
  border-radius: 9px;
  padding: 5px;
  background: #fff;
}

.slick-slide .lightbox_slider img {
  max-height: 75vh;
}

.slick-slide .lightbox_slider video {
  max-height: 75vh;
}


.thumbnail_slides .slick-slide img {
  border: none;
  border-radius: 4px;
  padding: 0px;
  width: 100%;
  min-height: 54px;
  height: 100%;
  min-height: 30px;
  max-width: 35px;
} */
.activityTabs .activeBorder {
  width: 100%;
  display: block;
  background: #1262ab;
  height: 3px;
  position: absolute;
  left: 8px;
  transform: none !important;
  display: none !important;
  top: 36px;
}
.tabs__tab {
  cursor: pointer;
}


.about-home-content .activeBorder {
  width: 100%;
  display: block;
  background: #1363ac;
  height: 3px;
  position: absolute;
  bottom: -2px;
  transition: transform 0.5s;
  transform: translateX(27px);
  width: 100px;
  margin-left: 4px;
}

.msg-tab .activeBorder {
  width: 100%;
  display: block;
  background: #1363ac;
  height: 2px;
  position: absolute;
  bottom: -2px;
  transition: transform 0.5s;
  transform: translateX(15px);
  width: 100px;
  margin-left: 10px;
}

.msg-tab .tabs__box {
  position: relative;
  border-bottom: 1px solid #eee;
}

.msg-tab .tabs__box button {
  background: transparent;
  padding: 12px;
}
.add-banner {
  background: #f2f2f2;
  margin-top: 10px;
  padding: 12px;
  border: 1px solid #ddd;
  border-radius: 2px;
}

.add-banner p {
  color: #ccc;
  font-size: 16px;
}

.galleries-filter {
  padding: 24px 0px;
  /* border-bottom: 1px solid #ccc; */
}

button.send_invitation_btn.outer-deal {
  margin-left: 157%;
}

.filter-buttons button {
  background: #fff;
  border: 1px solid #ccc;
  font-size: 15px;
  color: #666;
  letter-spacing: 0.5px;
  width: 130px;
  height: 43px;
  border-radius: 4px;
  margin-right: 2px;
}

.filter-buttons button:first-child {
  background: #efefef;
  color: #333;
}

.filter-buttons button svg {
  margin-left: 18px;
  vertical-align: middle;
}

.filter-buttons button:first-child svg {
  vertical-align: sub;
}

.galleries-sort select {
  outline: none;
  border: 1px solid #ccc;
  height: 45px;
  padding: 0 12px;
  padding-right: 24px;
  font-size: 15px;
  letter-spacing: 0.3px;
  color: #444;
  border-radius: 4px;
}

.all-galleries {
  margin-top: 24px;
}

.upgrade {
  background-image: linear-gradient(#ffffff94, white, white);
  top: 0;
  z-index: 99;
}

.upgradeBtn {
  border-radius: 50px;
  height: 48px;
  position: absolute;
  top: 50%;
}

.referDeal {
  position: absolute;
  background: #fff;
  padding: 1.1rem;
  padding-bottom: 0.7rem;
  padding-top: 0.5rem;
  box-shadow: 0px 0px 9px #00000045;
  right: -15px;
  top: 42px;
  border-radius: 0.3rem;
}

.referDeal p {
  text-align: center;
  font-size: 12px !important;
  margin-bottom: 5px !important;
}

.shareIcons>div {
  margin: 0 2px;
}

.shareIcons>div img {
  transform: scale(1);
  transition: 0.3s;
}

.shareIcons>div img:hover {
  cursor: pointer;
  transform: scale(0.9);
}

.referDeal::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 18px solid #fff;
  position: absolute;
  top: -13px;
  right: 23px;
}

.icon-with-tooltip .tooltip-text {
  display: none;
}

.icon-with-tooltip:hover .tooltip-text {
  display: block;
}

.icon-with-tooltip .tooltip-text::before {
  content: "";
  width: 0;
  height: 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 14px solid #ddd;
  top: 20px;
  right: 12px;
}

.not-visited::before {
  content: "";
  width: 2px;
  height: 40px;
  background: black;
  transform: rotate(37deg);
  position: absolute;
  top: 0px;
  left: 19px;
}

.thumbnail_slides .slick-track {
  display: flex;
  justify-content: center;
}

/* .thumbnail_slides {
  margin-top: 5px;
} */

.thumbnail_slides .slick-slide {
  max-width: 60px;
  margin: 0 4px;
  max-height: 60px;
}

.lightbox_slider {
  width: 100%;
  display: inline-block;
  /* height: 55vh; */
}

.thumbnail_slides .slick-active {
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px;
  background-color: #fff;
  height: 45px;
  width: 45px;
  cursor: pointer;
}

.thumbnail_slides .slick-active img {
  height: 100%;
  min-height: 30px;
  max-width: 35px;
}

.thumbnail_slides .slick-active.slick-current {
  border: 1px solid #1262ab;
  cursor: default;
}

.single-info-sticky .slick-list {
  height: 250px;
}

.single-info-sticky.notLogg .slick-list {
  height: 265px;
}

.single-info-sticky .thumbnail_slides .slick-list {
  height: 45px;
  max-width: 75%;
  margin: auto;
}

/* .fullWidth .slick-slide {
  max-height: 400px;
} */
/* .inputHeader {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 4px 8px;
    transition: all 0.3s ease;
    width: 40px;
    background-color: #fff;
    overflow: hidden;
    position: relative;
}

.inputHeader svg {
    width: 20px;
    height: 20px;
    cursor: pointer;
    flex-shrink: 0;
}

.search-input {
    width: 0;
    border: none;
    outline: none;
    background: transparent;
    font-size: 16px;
    margin-left: 8px;
    transition: width 0.3s ease;
    opacity: 0;
}

.inputClose {
    font-size: 18px;
    color: #888;
    margin-left: auto;
    margin-right: 4px;
    cursor: pointer;
    transition: opacity 0.3s ease;
}

.inputHeader.expanded {
    width: 200px;
    border-color: #d8dde2;
}

.inputHeader.expanded .search-input {
    width: 100%;
    opacity: 1;
} */

.inputHeader {
  position: relative;
  display: flex;
  align-items: center;
  width: 36px;
  height: 41px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0 8px;
  transition: width 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

.inputHeader.expanded {
  width: 220px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.search-svg {
    width: 16px;
    height: 16px;
    cursor: pointer;
    position: absolute;
    top: 12px;
    right: 10px;
}

.inputHeader.expanded .search-svg {
  transform: scale(1.1);
}

.search-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 14px;
  padding: 4px 0;
  background: transparent;
  display: none;
}

.inputHeader.expanded .search-input {
  display: block;
}

.inputClose {
  color: #555;
  font-size: 20px;
  margin-left: 8px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.inputClose:hover {
  color: #000;
}

@media screen and (max-width: 575px) {
  /* .inputHeader {
    width: 100%;
    margin-bottom: 1.1rem;
    background-color: #e9e9e9;
    border: none;
  } */
}

.pagination .page-link {
  border: 0;
  outline: none;
  box-shadow: none;
  color: #0B3963;
}

.pagination .active .page-link {
  background: #0B3963;
  border-radius: 2px;
}

.pagination .disabled>.page-link, .page-link.disabled {
  background-color: transparent !important;
}




/* Compact Upload Modal Styles */
/* .my-content-upload-wrapper {
  max-height: 80vh;
  overflow-y: auto;
  padding: 16px;
  font-family: "Manrope", sans-serif !important;
  min-width: 500px !important;
  width: 100% !important;
} */

/* Compact spacing */
/* .my-content-upload-wrapper .text-center {
  margin-bottom: 12px;
} */

.my-content-upload-wrapper h5 {
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 4px;
  font-size: 18px !important;
}

.my-content-upload-wrapper p {
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 12px;
  font-size: 13px !important;
}

/* Tab spacing */
.my-content-upload-wrapper .d-flex.gap-2 {
  margin-bottom: 16px;
}

/* Form styling with application colors */
.my-content-upload-wrapper .form-select {
  border-radius: 6px !important;
  border: 1px solid #dee2e6 !important;
  padding: 8px 12px !important;
  font-size: 14px !important;
  font-family: "Manrope", sans-serif !important;
  margin-bottom: 12px !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

.my-content-upload-wrapper .form-select:focus {
  border-color: #0d6efd !important;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25) !important;
}

/* Simplified Radio Button Styling - Complete Reset */
.my-content-upload-wrapper .privacy-section {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  margin: 12px 0 !important;
  padding: 0 !important;
}

.my-content-upload-wrapper .privacy-section .privacy-label {
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: "Manrope", sans-serif !important;
  /* color: #333 !important; */
  margin: 0 !important;
  padding: 0 !important;
}

.my-content-upload-wrapper .privacy-section .radio-group {
  display: flex !important;
  align-items: center !important;
  gap: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.my-content-upload-wrapper .privacy-section .radio-item {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
}

.my-content-upload-wrapper .privacy-section .radio-item input[type="radio"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #0d6efd !important;
  cursor: pointer !important;
}

.my-content-upload-wrapper .privacy-section .radio-item label {
  font-size: 14px !important;
  font-weight: 400 !important;
  font-family: "Manrope", sans-serif !important;
  color: #333 !important;
  margin: 0 !important;
  padding: 0 !important;
  cursor: pointer !important;
  line-height: 1.5 !important;
}

/* Compact spacing improvements */
.my-content-upload-wrapper .row {
  margin-bottom: 0 !important;
}

.my-content-upload-wrapper .row+.row {
  margin-top: 12px !important;
}

/* Compact alert styling */
.my-content-upload-wrapper .alert {
  padding: 8px 12px !important;
  margin-bottom: 12px !important;
  border-radius: 6px !important;
  font-size: 13px !important;
}

/* Compact button styling */
.my-content-upload-wrapper .btn {
  font-size: 14px !important;
  padding: 8px 16px !important;
  font-family: "Manrope", sans-serif !important;
  font-weight: 500 !important;
  margin: 2px !important;
}

.my-content-upload-wrapper .btn-primary {
  background-color: #0d6efd !important;
  border-color: #0d6efd !important;
}

.my-content-upload-wrapper .btn-primary:hover {
  background-color: #0b5ed7 !important;
  border-color: #0a58ca !important;
}

.my-content-upload-wrapper .btn-outline-secondary {
  color: #6c757d !important;
  border-color: #6c757d !important;
}

.my-content-upload-wrapper .btn-outline-secondary:hover {
  color: #fff !important;
  background-color: #6c757d !important;
  border-color: #6c757d !important;
}

/* Compact file drop zone spacing */
.my-content-upload-wrapper .position-relative {
  margin: 8px 0 8px 0 !important;
}

/* Thumbnail container improvements */
/* .my-content-upload-wrapper .d-flex.flex-wrap.gap-2 {
  max-height: 150px !important;
  overflow-y: auto !important;
  padding: 8px !important;
  gap: 8px !important;
} */

/* Ensure thumbnails fit properly without overflow */
.my-content-upload-wrapper .position-relative.rounded {
  flex-shrink: 0 !important;
}

/* Compact form labels */
.my-content-upload-wrapper .form-label {
  font-family: "Manrope", sans-serif !important;
  font-weight: 500 !important;
  font-size: 14px !important;
  margin-bottom: 6px !important;
  margin-top: 8px !important;
}

/* Compact bottom button area */
.my-content-upload-wrapper .d-flex.gap-2:last-child {
  /* margin-top: 16px !important; */
  padding-top: 12px !important;
  /* border-top: 1px solid #dee2e6 !important; */
}

/* Upload Progress Styling */
.my-content-upload-wrapper .upload-progress-section {
  background-color: #f8f9fa !important;
  border: 1px solid #e9ecef !important;
  border-radius: 8px !important;
  padding: 16px !important;
  margin: 12px 0 !important;
}

.my-content-upload-wrapper .upload-progress-section .progress {
  background-color: #e9ecef !important;
  border-radius: 4px !important;
  overflow: hidden !important;
}

.my-content-upload-wrapper .upload-progress-section .progress-bar {
  background-color: #0d6efd !important;
  transition: width 0.3s ease-in-out !important;
}

.my-content-upload-wrapper .upload-progress-section .spinner-border-sm {
  width: 1rem !important;
  height: 1rem !important;
  border-width: 0.125em !important;
}

.my-content-upload-wrapper .upload-progress-section .fw-medium {
  font-weight: 500 !important;
  font-family: "Manrope", sans-serif !important;
}
/* Custom Invite Modal Styles */

.custom-invite-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.custom-invite-modal {
  background: #fff;
  border-radius: 8px;
  width: 100%;
  max-width: 450px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  margin: 20px;
}

.custom-invite-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
}

.custom-invite-modal__header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #212529;
}

.custom-invite-modal__close {
  background: none;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #6c757d;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
}

.custom-invite-modal__close:hover {
  background: #f1f3f5;
  color: #212529;
}

.custom-invite-modal__search {
  position: relative;
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
}

.custom-invite-modal__search input {
  width: 100%;
  padding: 10px 40px 10px 12px;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  font-size: 14px;
  outline: none;
  transition: border-color 0.2s;
}

.custom-invite-modal__search input:focus {
  border-color: #0d6efd;
  box-shadow: 0 0 0 3px rgba(13, 110, 253, 0.1);
}

.custom-invite-modal__search input::placeholder {
  color: #adb5bd;
}

.custom-invite-modal__search-loading {
  position: absolute;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
}

.spinner-small {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid #e9ecef;
  border-top-color: #0d6efd;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.custom-invite-modal__selected {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
}

.custom-invite-modal__chip {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #0d6efd;
  color: #fff;
  padding: 4px 8px 4px 12px;
  border-radius: 16px;
  font-size: 13px;
}

.custom-invite-modal__chip button {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  color: rgba(255, 255, 255, 0.8);
}

.custom-invite-modal__chip button:hover {
  color: #fff;
}

.custom-invite-modal__results {
  flex: 1;
  overflow-y: auto;
  min-height: 150px;
  max-height: 250px;
}

.custom-invite-modal__hint,
.custom-invite-modal__no-results {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 100px;
  color: #6c757d;
  font-size: 14px;
}

.custom-invite-modal__user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.15s;
}

.custom-invite-modal__user:hover {
  background: #f8f9fa;
}

.custom-invite-modal__user.selected {
  background: #e7f1ff;
}

.custom-invite-modal__user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.custom-invite-modal__user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.custom-invite-modal__user-avatar-placeholder {
  width: 100%;
  height: 100%;
  background: #6c757d;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 600;
}

.custom-invite-modal__user-info {
  flex: 1;
  min-width: 0;
}

.custom-invite-modal__user-name {
  font-size: 14px;
  font-weight: 500;
  color: #212529;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-invite-modal__user-email {
  font-size: 12px;
  color: #6c757d;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-invite-modal__user-business {
  font-size: 12px;
  color: #0d6efd;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.custom-invite-modal__user-checkbox {
  flex-shrink: 0;
}

.custom-invite-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 20px;
  border-top: 1px solid #e9ecef;
  background: #fff;
  flex-shrink: 0;
}

.custom-invite-modal__cancel {
  padding: 8px 16px;
  border: 1px solid #dee2e6;
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s;
}

.custom-invite-modal__cancel:hover {
  background: #f8f9fa;
}

.custom-invite-modal__invite {
  padding: 8px 20px;
  border: none;
  background: #0d6efd;
  color: #fff;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

.custom-invite-modal__invite:hover {
  background: #0b5ed7;
}

.custom-invite-modal__invite:disabled {
  background: #adb5bd;
  cursor: not-allowed;
}

/* Custom Channel Settings Styles */

.custom-channel-settings {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* Ensure Sendbird settings takes full space */
.custom-channel-settings .sendbird-channel-settings {
  flex: 1;
  overflow-y: auto;
}

/**
 * Sendbird UIKit Theme Overrides
 * Customizes Sendbird components to match ESaaS design system
 *
 * Colors:
 * - Primary: #1262ab
 * - Primary Dark: #0c3963
 * - Border: #e0e0e0
 * - Background: #f5f5f5
 *
 * Typography:
 * - Font: Manrope, sans-serif
 * - Body: 14px
 */

/* ========================================
   Global Font Override
   ======================================== */
.sendbird-theme--light,
.sendbird-app__wrap,
[class^="sendbird-"],
[class*=" sendbird-"] {
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* ========================================
   Primary Color Overrides
   ======================================== */
:root {
  --sendbird-light-primary-500: #1262ab;
  --sendbird-light-primary-400: #1976d2;
  --sendbird-light-primary-300: #1262ab;
  /* Explicitly set text colors to ensure caret visibility */
  --sendbird-light-onlight-01: #212121;
  --sendbird-light-onlight-02: #424242;
  --sendbird-light-onlight-03: #616161;
  --sendbird-message-input-text-color: #212121;
}

/* Override CSS variables within Sendbird theme context */
.sendbird-theme--light {
  --sendbird-light-primary-300: #1262ab;
  --sendbird-light-onlight-01: #212121;
}

/* Direct override for message input textarea with highest specificity */
.sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea {
  caret-color: #1262ab !important;
  color: #212121 !important;
}

/* Target the exact contenteditable div element by ID and class */
#sendbird-message-input-text-field,
div.sendbird-message-input--textarea.sendbird-message-input-text-field,
div[contenteditable="true"].sendbird-message-input--textarea {
  caret-color: #000000 !important;
  color: #212121 !important;
  -webkit-text-fill-color: #212121 !important;
  position: relative !important;
  z-index: 2 !important;
}

/* Add a pseudo-element to ensure cursor has space in empty contenteditable */
#sendbird-message-input-text-field:empty::before,
div.sendbird-message-input--textarea:empty::before {
  content: '\200B'; /* Zero-width space */
  display: inline;
}

/* Ensure contenteditable divs show cursor */
.sendbird-message-input div[contenteditable="true"] {
  caret-color: #000000 !important;
}

/* Move placeholder behind the input so cursor is visible when empty */
.sendbird-message-input--placeholder {
  pointer-events: none !important;
}

/* Ensure send and attach buttons are clickable above the input */
.sendbird-message-input--send,
.sendbird-message-input--attach {
  z-index: 10 !important;
}

/* ========================================
   Channel List Styling
   ======================================== */
.sendbird-channel-list {
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
}

.sendbird-channel-list__header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 12px 16px;
}

.sendbird-channel-preview {
  border-bottom: 1px solid #f5f5f5;
  padding: 14px 20px;
  transition: all 0.2s ease;
  cursor: pointer;
}

.sendbird-channel-preview:hover {
  background-color: #f8f9fa;
}

.sendbird-channel-preview--active {
  background-color: rgba(18, 98, 171, 0.08);
  border-left: 3px solid #1262ab;
}

.sendbird-channel-preview__content__upper__header__channel-name {
  font-size: 14px;
  font-weight: 600;
  color: #212121;
  margin-bottom: 2px;
}

.sendbird-channel-preview__content__lower__last-message {
  font-size: 13px;
  color: #757575;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sendbird-channel-preview__content__upper__header__last-message-at {
  font-size: 11px;
  color: #9e9e9e;
}

/* ========================================
   Channel Header Styling
   ======================================== */
.sendbird-channel-header {
  background-color: #ffffff;
  border-bottom: 1px solid #e0e0e0;
  padding: 16px 20px;
  min-height: 64px;
  display: flex;
  align-items: center;
}

.sendbird-channel-header__title {
  font-size: 16px;
  font-weight: 600;
  color: #212121;
}

.sendbird-channel-header__subtitle {
  font-size: 12px;
  color: #757575;
  margin-top: 2px;
}

/* Custom channel header actions */
.sendbird-channel-header__right-icon {
  padding: 8px;
  border-radius: 8px;
  transition: background-color 0.2s ease;
}

.sendbird-channel-header__right-icon:hover {
  background-color: #f5f5f5;
}

/* ========================================
   Message List Styling
   ======================================== */
.sendbird-conversation {
  background-color: #f8f9fa;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.sendbird-conversation__messages {
  flex: 1;
  overflow: hidden;
}

.sendbird-conversation__messages-padding {
  padding: 16px 20px;
}

.sendbird-message-list {
  background-color: transparent;
}

/* No messages placeholder */
.sendbird-conversation__no-messages {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9e9e9e;
  text-align: center;
  padding: 40px;
}

.sendbird-place-holder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 40px;
}

.sendbird-place-holder__body {
  font-size: 15px;
  color: #757575;
  margin-top: 12px;
}

.sendbird-place-holder__body__text {
  color: #9e9e9e;
}

/* ========================================
   Message Bubbles
   ======================================== */
/* Outgoing messages (sent by current user) */
.sendbird-message-content--outgoing .sendbird-text-message-item-body {
  background: linear-gradient(135deg, #1262ab 0%, #0f5293 100%);
  color: #ffffff;
  border-radius: 18px 18px 4px 18px;
  box-shadow: 0 2px 8px rgba(18, 98, 171, 0.2);
  padding: 12px 16px;
}

/* Incoming messages (received from others) */
.sendbird-message-content--incoming .sendbird-text-message-item-body {
  background-color: #ffffff;
  color: #212121;
  border-radius: 18px 18px 18px 4px;
  border: 1px solid #e8e8e8;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  padding: 12px 16px;
}

/* Message text styling */
.sendbird-text-message-item-body__message {
  font-size: 14px;
  line-height: 1.6;
  word-wrap: break-word;
}

/* Message sender name */
.sendbird-message-content__middle__sender-name {
  font-size: 12px;
  font-weight: 600;
  color: #424242;
  margin-bottom: 6px;
}

/* Message timestamp */
.sendbird-message-content__middle__body-container__created-at {
  font-size: 11px;
  color: #9e9e9e;
  margin-top: 4px;
}

/* Message spacing */
.sendbird-message-content {
  margin-bottom: 4px;
}

/* ========================================
   Message Input Styling
   ======================================== */
.sendbird-message-input-wrapper {
  background-color: #ffffff;
  border-top: 1px solid #e8e8e8;
  padding: 16px 24px;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.04);
}

.sendbird-message-input {
  background-color: #f8f9fa;
  border: 1.5px solid #e0e0e0;
  border-radius: 24px;
  padding: 6px 8px 6px 16px;
  display: flex !important;
  align-items: center !important;
  gap: 8px;
  transition: all 0.2s ease;
  min-height: 48px;
}

.sendbird-message-input:hover {
  border-color: #c0c0c0;
  background-color: #ffffff;
}

.sendbird-message-input:focus-within {
  border-color: #1262ab;
  box-shadow: 0 0 0 3px rgba(18, 98, 171, 0.12);
  background-color: #ffffff;
}

.sendbird-message-input-text-field {
  border: none !important;
  border-radius: 0 !important;
  background-color: transparent !important;
  font-size: 14px;
  padding: 10px 4px;
  min-height: 24px;
  line-height: 1.5;
  resize: none;
  flex: 1;
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif !important;
  caret-color: #1262ab !important;
  color: #212121 !important;
}

.sendbird-message-input-text-field:focus {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  caret-color: #1262ab !important;
}

/* Ensure cursor is visible in all Sendbird input elements */
.sendbird-message-input textarea,
.sendbird-message-input input,
.sendbird-message-input [contenteditable="true"],
.sendbird-message-input__text-field,
.sendbird-message-input--textarea,
.sendbird-message-input .sendbird-message-input--textarea,
.sendbird-theme--light .sendbird-message-input .sendbird-message-input--textarea,
[class*="sendbird"] textarea,
[class*="sendbird"] input[type="text"],
[class*="sendbird"] [contenteditable="true"] {
  caret-color: #1262ab !important;
  color: #212121 !important;
}

/* Force cursor visibility with maximum specificity */
.sendbird-app__wrap .sendbird-conversation .sendbird-message-input-wrapper .sendbird-message-input .sendbird-message-input--textarea {
  caret-color: #000000 !important;
  color: #212121 !important;
}

/* Target the actual quill-like editor if used */
.sendbird-message-input .ql-editor,
.sendbird-message-input .ql-container,
.sendbird-message-input [class*="quill"] {
  caret-color: #000000 !important;
}

/* Universal fallback for any input within message area */
.sendbird-message-input * {
  caret-color: inherit;
}

.sendbird-message-input {
  caret-color: #000000;
}

/* Ensure no transparency on text that could hide caret */
.sendbird-message-input--textarea,
.sendbird-message-input-text-field {
  -webkit-text-fill-color: #212121 !important;
  opacity: 1 !important;
}

.sendbird-message-input-text-field::placeholder {
  color: #9e9e9e;
  font-size: 14px;
}

/* Hide placeholder only when text field is focused */
.sendbird-message-input-text-field:focus::placeholder {
  opacity: 0;
}

/* Hide Sendbird custom placeholder when input is focused */
.sendbird-message-input:focus-within .sendbird-message-input--placeholder {
  opacity: 0;
  visibility: hidden;
}

/* Send button */
.sendbird-message-input--send {
  background-color: #1262ab !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  min-width: 40px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease !important;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(18, 98, 171, 0.25);
  cursor: pointer;
}

.sendbird-message-input--send:hover {
  background-color: #0c3963 !important;
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(18, 98, 171, 0.35);
}

.sendbird-message-input--send:active {
  transform: scale(0.95);
  box-shadow: 0 1px 4px rgba(18, 98, 171, 0.2);
}

.sendbird-message-input--send svg {
  width: 18px !important;
  height: 18px !important;
}

.sendbird-message-input--send svg path {
  fill: #ffffff !important;
}

/* Disabled send button */
.sendbird-message-input--send:disabled,
.sendbird-message-input--send[disabled] {
  background-color: #bdbdbd !important;
  box-shadow: none;
  cursor: not-allowed;
}

/* Attachment button */
.sendbird-message-input--attach {
  color: #757575;
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: all 0.2s ease;
  flex-shrink: 0;
  cursor: pointer;
  background-color: transparent;
}

.sendbird-message-input--attach:hover {
  color: #1262ab;
  background-color: rgba(18, 98, 171, 0.08);
}

.sendbird-message-input--attach:active {
  background-color: rgba(18, 98, 171, 0.15);
}

/* ========================================
   Typing Indicator
   ======================================== */
.sendbird-typing-indicator__text {
  font-size: 12px;
  color: #616161;
  font-style: italic;
}

/* ========================================
   Avatar Styling
   ======================================== */
.sendbird-avatar {
  border-radius: 50%;
}

.sendbird-avatar-img {
  border-radius: 50%;
}

/* Fix duplicate avatars in channel list for group channels */
.sendbird-channel-preview .sendbird-avatar {
  position: relative;
  background-color: #9e9e9e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Hide all child images and use consistent background */
.sendbird-channel-preview .sendbird-avatar .sendbird-avatar-img,
.sendbird-channel-preview .sendbird-avatar .sendbird-image-renderer,
.sendbird-channel-preview .sendbird-avatar > div {
  display: none !important;
}

/* Show default user icon for all channel avatars */
.sendbird-channel-preview .sendbird-avatar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%27/%3E%3Ccircle cx=%2712%27 cy=%277%27 r=%274%27/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Fix avatar in Channel Settings panel */
.sendbird-channel-settings .sendbird-avatar,
.sendbird-channel-settings__header .sendbird-avatar,
.sendbird-channel-profile .sendbird-avatar {
  position: relative;
  background-color: #9e9e9e !important;
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* Hide child images in settings avatar */
.sendbird-channel-settings .sendbird-avatar .sendbird-avatar-img,
.sendbird-channel-settings .sendbird-avatar .sendbird-image-renderer,
.sendbird-channel-settings .sendbird-avatar > div,
.sendbird-channel-profile .sendbird-avatar .sendbird-avatar-img,
.sendbird-channel-profile .sendbird-avatar .sendbird-image-renderer,
.sendbird-channel-profile .sendbird-avatar > div {
  display: none !important;
}

/* Show default user icon for settings avatar */
.sendbird-channel-settings .sendbird-avatar::after,
.sendbird-channel-profile .sendbird-avatar::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60%;
  height: 60%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27white%27 stroke-width=%271.5%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2%27/%3E%3Ccircle cx=%2712%27 cy=%277%27 r=%274%27/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* ========================================
   Badge (Unread Count)
   ======================================== */
.sendbird-badge {
  background-color: #f44336;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  min-width: 18px;
  height: 18px;
  border-radius: 9px;
  padding: 0 5px;
}

/* ========================================
   Empty State
   ======================================== */
.sendbird-place-holder {
  font-size: 14px;
  color: #616161;
}

.sendbird-place-holder__body {
  color: #9e9e9e;
}

/* ========================================
   Scrollbar Styling
   ======================================== */
.sendbird-conversation__messages-padding::-webkit-scrollbar {
  width: 6px;
}

.sendbird-conversation__messages-padding::-webkit-scrollbar-track {
  background: transparent;
}

.sendbird-conversation__messages-padding::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

.sendbird-conversation__messages-padding::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0;
}

.sendbird-channel-list__body::-webkit-scrollbar {
  width: 6px;
}

.sendbird-channel-list__body::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

/* ========================================
   File Message Styling
   ======================================== */
.sendbird-file-message-item-body {
  border-radius: 8px;
  border: 1px solid #e0e0e0;
  background-color: #ffffff;
}

.sendbird-file-message-item-body__file-name {
  font-size: 14px;
  color: #1262ab;
}

/* ========================================
   Image/Thumbnail Message
   ======================================== */
.sendbird-thumbnail-message-item-body {
  border-radius: 8px;
  overflow: hidden;
}

.sendbird-thumbnail-message-item-body__thumbnail {
  border-radius: 8px;
}

/* ========================================
   Context Menu / Dropdown
   ======================================== */
.sendbird-dropdown__menu {
  background-color: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.sendbird-dropdown__menu-item {
  font-size: 14px;
  padding: 8px 16px;
}

.sendbird-dropdown__menu-item:hover {
  background-color: #f5f5f5;
}

/* ========================================
   Modal Styling
   ======================================== */
.sendbird-modal__content {
  border-radius: 12px;
  background-color: #ffffff;
}

.sendbird-modal__header {
  font-size: 18px;
  font-weight: 600;
  color: #212121;
  border-bottom: 1px solid #e0e0e0;
}

.sendbird-modal__footer {
  border-top: 1px solid #e0e0e0;
}

/* ========================================
   Button Styling
   ======================================== */
.sendbird-button--primary {
  background-color: #1262ab;
  border-color: #1262ab;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
}

.sendbird-button--primary:hover {
  background-color: #0c3963;
  border-color: #0c3963;
}

.sendbird-button--secondary {
  background-color: transparent;
  border: 1px solid #e0e0e0;
  color: #616161;
  border-radius: 6px;
}

.sendbird-button--secondary:hover {
  background-color: #f5f5f5;
}

/* ========================================
   Date Separator
   ======================================== */
.sendbird-separator {
  margin: 16px 0;
}

.sendbird-separator__text {
  font-size: 12px;
  color: #9e9e9e;
  background-color: #f5f5f5;
  padding: 4px 12px;
  border-radius: 12px;
}

/* ========================================
   Loading States
   ======================================== */
.sendbird-loader {
  border-top-color: #1262ab;
}

/* ========================================
   Responsive Adjustments
   ======================================== */
@media (max-width: 768px) {
  .sendbird-channel-list {
    width: 100% !important;
    border-right: none;
  }

  .sendbird-conversation {
    width: 100% !important;
  }

  .sendbird-channel-header {
    padding: 10px 12px;
  }

  .sendbird-message-input {
    padding: 8px 12px;
  }
}

/* ========================================
   Chat Widget Container (for embedded use)
   ======================================== */
.sendbird-chat-widget {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background-color: #ffffff;
}

.sendbird-chat-widget .sendbird-channel-list {
  flex-shrink: 0;
}

.sendbird-chat-widget .sendbird-conversation {
  flex-grow: 1;
}

/* Ensure message input stays below any overlay */
.sendbird-message-input-wrapper {
  z-index: 1 !important;
  position: relative !important;
}

/* Hide iframes in message content (prevents Google consent dialogs) */
.sendbird-message-content iframe,
.sendbird-og-message-item-body iframe,
.sendbird-thumbnail-message-item-body iframe,
.sendbird-message-list iframe,
.sendbird-conversation iframe {
  display: none !important;
}

/* Hide OG message web view that loads external content */
.sendbird-og-message-item-body__og-webview,
.sendbird-og-message-item-body__og-container,
[class*="og-webview"],
[class*="webview"] {
  display: none !important;
}

/* Ensure OG messages only show thumbnail, not embedded content */
.sendbird-og-message-item-body {
  max-height: 300px !important;
  overflow: hidden !important;
}

/* Hide Sendbird's default file viewer completely */
.sendbird-fileviewer,
[class*="sendbird-fileviewer"] {
  display: none !important;
}

/* ========================================
   File Viewer Modal - Close Button Styling
   ======================================== */
/* Ensure file viewer has proper z-index and is visible */
.sendbird-fileviewer {
  z-index: 10000 !important;
}

/* Style the file viewer header */
.sendbird-fileviewer__header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 16px 20px !important;
  background-color: rgba(0, 0, 0, 0.8) !important;
}

/* Style the close button in file viewer */
.sendbird-fileviewer__header__right {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

.sendbird-fileviewer__header__right__actions__close,
.sendbird-fileviewer__header-right__close {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

.sendbird-fileviewer__header__right__actions__close:hover,
.sendbird-fileviewer__header-right__close:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}

/* Ensure the close icon is visible */
.sendbird-fileviewer__header__right__actions__close .sendbird-icon,
.sendbird-fileviewer__header-right__close .sendbird-icon {
  fill: #ffffff !important;
  color: #ffffff !important;
}

/* Alternative close button selector */
.sendbird-fileviewer__header .sendbird-iconbutton {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Style any icon button in file viewer header as close button */
.sendbird-fileviewer__header .sendbird-iconbutton:last-child {
  width: 44px !important;
  height: 44px !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
  border-radius: 50% !important;
}

.sendbird-fileviewer__header .sendbird-iconbutton:last-child:hover {
  background-color: rgba(255, 255, 255, 0.3) !important;
}


/**
 * CustomChannelHeader Styles
 */

.custom-channel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: #ffffff;
  border-bottom: 1px solid #e8e8e8;
  min-height: 64px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}

.custom-channel-header__info {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

.custom-channel-header__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #212121;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-family: 'Manrope', sans-serif;
}

.custom-channel-header__subtitle {
  font-size: 12px;
  color: #757575;
  margin-top: 2px;
  font-family: 'Manrope', sans-serif;
}

.custom-channel-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 16px;
}

.custom-channel-header__btn {
  color: #616161;
  padding: 10px;
  border-radius: 10px;
  transition: all 0.2s ease;
  background-color: transparent;
}

.custom-channel-header__btn:hover {
  background-color: rgba(18, 98, 171, 0.08);
  color: #1262ab;
  transform: translateY(-1px);
}

.custom-channel-header__btn:active {
  transform: translateY(0);
  background-color: rgba(18, 98, 171, 0.12);
}

.custom-channel-header__btn--disabled {
  color: #bdbdbd;
  cursor: not-allowed;
  opacity: 0.6;
}

.custom-channel-header__btn--disabled:hover {
  background-color: transparent;
  color: #bdbdbd;
  transform: none;
}

/* Responsive */
@media (max-width: 576px) {
  .custom-channel-header {
    padding: 10px 12px;
  }

  .custom-channel-header__title {
    font-size: 14px;
  }

  .custom-channel-header__actions {
    gap: 2px;
  }

  .custom-channel-header__btn {
    padding: 6px;
  }

  .custom-channel-header__btn svg {
    width: 18px;
    height: 18px;
  }
}

/**
 * ChatContainer Styles
 * Full-page chat layout for Messages page
 */

/* Main container */
.chat-container {
  display: flex;
  flex-direction: row;
  height: calc(100vh - 120px); /* Account for header and padding */
  min-height: 500px;
  background-color: #ffffff;
  border: 1px solid #e8e8e8;
  border-radius: 12px;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

/* Sidebar with channel list */
.chat-container__sidebar {
  width: 320px;
  min-width: 320px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #e0e0e0;
  background-color: #ffffff;
}

.chat-container__sidebar-header {
  padding: 20px 24px;
  border-bottom: 1px solid #e8e8e8;
  background-color: #ffffff;
}

.chat-container__sidebar-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  color: #212121;
  letter-spacing: -0.3px;
}

.chat-container__channel-list {
  flex: 1;
  overflow: hidden;
}

.chat-container__channel-list .sendbird-channel-list {
  height: 100%;
  border: none;
}

/* Hide default UIKit header since we have our own */
.chat-container__channel-list .sendbird-channel-list__header {
  display: none;
}

/* Main chat area */
.chat-container__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
}

.chat-container__main .sendbird-conversation {
  height: 100%;
}

/* Empty state */
.chat-container__empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f4 100%);
  padding: 48px;
  text-align: center;
}

.chat-container__empty-icon {
  color: #bdbdbd;
  margin-bottom: 28px;
  opacity: 0.8;
}

.chat-container__empty-icon svg {
  stroke-width: 1.2;
}

.chat-container__empty-title {
  margin: 0 0 12px 0;
  font-size: 22px;
  font-weight: 600;
  color: #333333;
  letter-spacing: -0.3px;
}

.chat-container__empty-text {
  margin: 0;
  font-size: 15px;
  color: #666666;
  max-width: 320px;
  line-height: 1.6;
}

/* Settings panel */
.chat-container__settings {
  width: 320px;
  min-width: 320px;
  border-left: 1px solid #e0e0e0;
  overflow: hidden;
}

.chat-container__settings .sendbird-channel-settings {
  height: 100%;
}

/* Responsive - Tablet */
@media (max-width: 992px) {
  .chat-container__sidebar {
    width: 280px;
    min-width: 280px;
  }

  .chat-container__settings {
    width: 280px;
    min-width: 280px;
  }
}

/* Responsive - Mobile */
@media (max-width: 768px) {
  .chat-container {
    flex-direction: column;
    height: calc(100vh - 80px);
  }

  .chat-container__sidebar {
    width: 100%;
    min-width: 100%;
    height: auto;
    max-height: 40%;
    border-right: none;
    border-bottom: 1px solid #e0e0e0;
  }

  .chat-container__sidebar-header {
    padding: 12px 16px;
  }

  .chat-container__sidebar-title {
    font-size: 16px;
  }

  .chat-container__main {
    flex: 1;
    min-height: 300px;
  }

  .chat-container__settings {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    background: #ffffff;
    border-left: none;
  }

  .chat-container__empty {
    padding: 24px;
  }

  .chat-container__empty-icon svg {
    width: 60px;
    height: 60px;
  }

  .chat-container__empty-title {
    font-size: 18px;
  }
}

/* Scrollbar styling */
.chat-container__channel-list::-webkit-scrollbar {
  width: 6px;
}

.chat-container__channel-list::-webkit-scrollbar-track {
  background: transparent;
}

.chat-container__channel-list::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 3px;
}

/* Not Ready / Loading State */
.chat-container__not-ready {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #f9f9f9;
  padding: 40px;
  text-align: center;
  width: 100%;
  height: 100%;
}

.chat-container__not-ready-icon {
  color: #9e9e9e;
  margin-bottom: 20px;
}

.chat-container__not-ready-title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #424242;
}

.chat-container__not-ready-text {
  margin: 0 0 20px 0;
  font-size: 14px;
  color: #757575;
}

.chat-container__not-ready-btn {
  background-color: #1262ab;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.chat-container__not-ready-btn:hover {
  background-color: #0c3963;
}

/* Loading Spinner */
.chat-container__loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e0e0e0;
  border-top-color: #1262ab;
  border-radius: 50%;
  animation: chat-spinner 0.8s linear infinite;
  margin-bottom: 16px;
}

@keyframes chat-spinner {
  to {
    transform: rotate(360deg);
  }
}

/* Custom File Viewer Modal */
.custom-file-viewer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10000;
  background-color: rgba(0, 0, 0, 0.9);
  display: flex;
  flex-direction: column;
}

.custom-file-viewer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background-color: rgba(0, 0, 0, 0.5);
  color: #ffffff;
}

.custom-file-viewer__filename {
  font-size: 16px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: calc(100% - 60px);
}

.custom-file-viewer__close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: #ffffff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  flex-shrink: 0;
}

.custom-file-viewer__close:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.custom-file-viewer__close:active {
  background-color: rgba(255, 255, 255, 0.4);
}

.custom-file-viewer__content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: auto;
}

.custom-file-viewer__content img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 4px;
}

.custom-file-viewer__download {
  text-align: center;
  color: #ffffff;
}

.custom-file-viewer__download p {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: #a0a0a0;
}

.custom-file-viewer__download a {
  display: inline-block;
  padding: 12px 24px;
  background-color: #1262ab;
  color: #ffffff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: 500;
  transition: background-color 0.2s ease;
}

.custom-file-viewer__download a:hover {
  background-color: #0c3963;
}

.logged.verification .change {
  background: transparent;
  color: #1162ab;
  font-weight: 500;
}

.otpForm {
  max-width: fit-content;
  margin: auto;
}
button.change {
  border: 1px solid white;
  background: white;
  color: #1063ab;
}
.otpForm label {
  font-size: 15px;
  letter-spacing: 0.5px;
  color: #777;
  font-weight: 300;
}
button.btn_secondary.d-block.w-100.p-2.rounded-2.Sign-Email {
  color: #1063ab;
  border: 1px solid #1063ab;
}
.otpDiv {
  margin: 9px;
}

.otpDiv:first-child {
  margin-left: 0;
}

.otpDiv:last-child {
  margin-right: 0;
}

.otpDiv input {
  width: 100%;
  height: 49px;
  border-radius: 5px;
  border: 1px solid #999;
  outline: none;
  padding: 0;
  text-align: center;
}

.loginForm .otpDiv input {
  width: 51px;
  height: 51px;
  border: 1px solid #999;
}

.otpDiv input:focus {
  border: 1px solid #173058;
}

.notReceived {
  margin: 4px 0px;
}

/* .notReceivedText {
  color: #999;
  font-size: 0.9rem;
  letter-spacing: .3px;
} */

/* .notReceived button {
  border: none;
  background: no-repeat;
  outline: none;
  color: #1162ab;
  font-weight: 500;
  font-size: 0.9rem;
} */

.notReceived button:hover {
  opacity: 0.7;
}

.profile-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #1976d2;
    font-size: 28px;
    color: #fff;
    position: relative;
}



/* .upload-camera {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #fff;
    padding: 3px;
    border-radius: 50%;
    border: 1px solid #ccc;
} */

.btn-group>.btn {
    font-size: 13px;
    padding: 4px 10px;
}

/* .border-bottom.nav.nav-tabs {
    align-items: center;
    height: 50px;
    column-gap: 2rem;
    font-weight: 600;
    font-size: 14px;
    background: #EBEBEB;
} */


/* .profile-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background-color: #1976d2;
    font-size: 28px;
    color: #fff;
    position: relative;
}



.upload-camera {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #fff;
    padding: 3px;
    border-radius: 50%;
    border: 1px solid #ccc;
}

.btn-group>.btn {
    font-size: 13px;
    padding: 4px 10px;
}

.border-bottom.nav.nav-tabs {
    align-items: center;
    height: 50px;
    column-gap: 2rem;
    font-weight: 600;
    font-size: 14px;
    background: #EBEBEB;
} */


.custom-tabs::-webkit-scrollbar {
    height: 4px;
}

.custom-tabs::-webkit-scrollbar-thumb {
    background-color: #ccc;
    border-radius: 4px;
}

.custom-tab {
    color: #333;
    font-weight: 500;
    margin-right: 1rem;
    font-size: 14px !important;
    white-space: nowrap;
    padding: 0.5rem 1.2rem;
    font-weight: 600;

    border-radius: 5px;
    transition: all 0.2s ease-in-out;
    background-color: transparent;
}

.custom-tab:hover {
    background-color: #f0f0f0;
    color: #000;
}

.custom-tab.active,
.custom-tab:focus,
.custom-tab:active {
    /* background-color: #007bff; */
    color: white !important;
    font-weight: 600;
    font-size: 14px !important;
}



.top-profile {
    /* box-shadow: darkblue; */
    border-radius: 11px;
    border: 1px solid #f1ebeb;
}


.profile-circle {
    width: 100px;
    /* or match your image's size */
    height: 100px;
    border-radius: 50%;
    background-color: #4285f4;
    /* same blue as in your image */
    position: relative;
    overflow: hidden;
    border: 3px solid #fff;
    box-shadow: 0 0 0 2px #eee;
}

.profile-circle img.avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-circle span {
    font-size: 32px;
    font-weight: bold;
    color: white;
}

.upload-camera {
    bottom: -2px;
    right: -2px;
    background: white;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;

    /* Center icon */
    display: flex;
    align-items: center;
    justify-content: center;

    /* Optional hover effect */
    transition: background 0.2s ease;
}

.upload-camera:hover {
    background: #f3f3f3;
}
/* Profile section minimum height to push footer to bottom */
.profile-section {
    min-height: calc(100vh - 110px); /* Subtract header and footer heights */
}
.change_password_profile {
  max-width: 600px;
  margin: auto;
  /* background: #fff; */
  padding: 14px;
  /* box-shadow: 0 0 24px #0000000d; */
  border-radius: 8px;
  margin-bottom: 24px;
}
.uplTaxDoc {
  padding: 9px 18px;
  background: transparent;
  border: 1px solid #2f7feb;
  color: #2f7feb;
  border-radius: 5px;
  margin: 0px;
  margin-right: 32px;
}

.uplTable table thead th {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.shadow-sm1 {
    box-shadow: 0 0.125rem 2rem 20px rgba(0, 0, 0, 0.075) !important;
}

.card {
    background: #fff;
     font-family: Manrope, sans-serif;
}

.fw-semibold {
    font-weight: 600;
}



.css-qr46ko {
    max-height: 125px !important;
    overflow-y: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 4px;
    padding-top: 4px;
    box-sizing: border-box;
}

.category-box {
    border-radius: 0.5rem;
    background-color: white;
    padding: 0.75rem 1rem;
    border: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  }
  .category-box .title {
    font-weight: 600;
    color: #343a40;
  }
  .category-box .subcategories {
    color: #6c757d;
    margin-left: 0.25rem;
  }
  
.uplTaxDoc {
  padding: 9px 18px;
  background: transparent;
  border: 1px solid #2f7feb;
  color: #2f7feb;
  border-radius: 5px;
  margin: 0px;
  margin-right: 32px;
}

.addBankBtn {
  padding: 5px 15px;
  background: #1463ad;
  border: 1px solid #1463ad;
  color: #fff;
  border-radius: 5px;
  margin: 0px;
  margin-right: 30px;
}

.addBankBtn:hover {
  background: transparent;
  color: #1463ad;
}

.addBankBtn svg {
  width: 25px;
  fill: #fff;
  margin-right: 7px;
  margin-top: 5px;
  position: relative;
  top: -3px;
}

.addBankBtn:hover svg {
  fill: #1463ad
}

.uplTable table thead th {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
}

.addBank {
  padding: 24px;
  padding-top: 45px;
  margin-top: -24px;
  border-top: 1px solid #ddd;
  margin-bottom: 30px;
}
/* Sidebar wrapper - no overflow restrictions */
.sideBar-wrapper {
  /* Allow content to overflow */
}

.sideBar-wrapper .sideBar,
.sideBar-wrapper .sideBar-new {
  height: 100%;
  /* Remove overflow restrictions to allow tooltips to show */
}

/* Ensure tooltips and dropdowns can overflow */
.sidebar-tooltip,
.sidebar-tooltip-menu {
  z-index: 100000 !important;
  pointer-events: auto !important;
}

/* Special handling for admin sidebar tooltips */
.sideBar-wrapper .sidebar-tooltip,
.sideBar-wrapper .sidebar-tooltip-menu {
  z-index: 999999 !important;
  position: absolute !important;
}

/* Position relative for sidebar items to allow absolute positioning of tooltips */
.sidebar-item {
  position: relative !important;
}

.sideNav {
  height: 100%;
  width: 4rem;
  top: 59px;
  bottom: 0;
  background: #1161AB !important;
  /* transition: width .4s; */
  position: sticky !important;
  z-index: 99999;
}

/* Hide sidebar on mobile devices */
@media (max-width: 991px) {
  .sideNav {
    display: none !important;
  }

}

.sideNav.fullSidebar {
  width: 15rem;
  box-shadow: 2px 9px 9px #00000035;
  border-radius: 0;
}

/* Force new sidebar background */
.sideBar-new {
  background: #0B3963 !important;
}

/* New sidebar item styles */
.sidebar-item {
  position: relative;
  transition: all 0.3s ease;
}

.sidebar-item:hover {
  background-color: #074988;
}

.sidebar-item.active {
  /* margin-left: 3px; */
  /* border-radius: 15px; */
  /* margin-left: 9px; */
  /* border: 1px solid #1f6aaf; */
  background-color: #064988;
  /* margin-right: 3px; */
}

.sidebar-link:hover {
  text-decoration: none;
}

.sidebar-link:focus {
  outline: none;
  box-shadow: none;
}

/* Sidebar submenu styles */
.sidebar-submenu {
  overflow: hidden;
  transition: all 0.3s ease;
}

/* Icon wrapper for consistent sizing */
.icon-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
}

.sideNav .dropdown-menu {
  background: #34495E !important;
  /* background: linear-gradient(to left, #0B3963, #0B3963 90%, #ec0606 0%) !important; */
  left: 1.5rem !important;
  border-radius: 5px !important;
  top: -24px !important;
  border: 0;
  padding: 2px 8px;
  z-index: 99999 !important;
}


.sideNav .nav-link {
  padding: 10px 0;
}

.sideNav.fullSidebar .dropdown-menu {
  left: 10rem !important;
  top: -14px !important;
  z-index: 99999 !important;
}

.sideNav .dropdown-menu .dropdown-item {
  color: #fff;
  padding: 4px 14px;
  margin: 1px 0;
}

.sideNav .dropdown-menu .dropdown-item:hover {
  color: #fff;
  background: transparent;
}

.sideNav .dropdown-menu::before {
  content: "";
  position: absolute;
  background: transparent;
  width: 40px;
  height: 100%;
  top: 0;
  left: -30px;
  z-index: -1;
}

.sideNav .dropdown-menu::after {
  content: "";
  position: absolute;
  top: 14px;
  left: -11px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-right: 14px solid #34495E;
  border-bottom: 8px solid transparent;
  /* opacity: 0; */
}

.sideNav .sideNavDropdown .dropdown-toggle.nav-link {
  display: none;
}

.sideNav.fullSidebar .sideNavDropdown .dropdown-toggle.nav-link {
  padding: 0 0 !important;
  color: #fff;
  display: block;
}

.sideNav .nav-item span {
  display: none;
  white-space: nowrap;
}

.sideNav.fullSidebar .nav-item span {
  display: block;
}

.sideNav .dropdown-menu label {
  color: #fff;
  padding: 8px 14px;
  opacity: 0.8;
  text-transform: uppercase;
  font-size: 12px;
  white-space: nowrap;
  border-bottom: 1px solid #ffffff5e;
  width: 100%;
}


/* Ensure proper layout on desktop to prevent content cutoff */
@media (min-width: 992px) {

  /* .outlet {
    width: 100%;
    max-width: 100%;
  } */
}

/* Responsive Sidebar Styles */
@media (max-width: 991px) {

  /* Transform desktop sidebar container for mobile */
  .position-sticky.z-3.w-100 {
    position: fixed !important;
    top: 60px !important;
    left: -250px !important;
    width: 250px !important;
    max-width: 250px !important;
    height: calc(100vh - 60px) !important;
    background: #f8f8f8 !important;
    z-index: 999999 !important;
    transition: left 0.3s ease-in-out !important;
    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1) !important;
    overflow-y: auto !important;
    pointer-events: auto !important;
  }

  /* Show sidebar when mobile-sidebar-open class is added to body */
  body.mobile-sidebar-open .position-sticky.z-3.w-100 {
    left: 0 !important;
    top: 60px !important;
    position: fixed !important;
  }

  /* Override profile page CSS that might interfere */
  .profile_about .position-sticky.z-3.w-100 {
    top: 60px !important;
    position: fixed !important;
    z-index: 999999 !important;
  }

  /* Update mobile sidebar colors */
  .position-sticky.z-3.w-100 {
    background: #2C3E50 !important;
  }

  /* Fallback for any remaining z-1 references */
  .position-sticky.z-1.w-100 {
    z-index: 15 !important;
  }

  /* Remove CSS backdrop - using React element instead */

  /* Mobile Sidebar - Force full expanded view */
  .sideNav {
    position: relative !important;
    top: 0 !important;
    width: 100% !important;
    height: 100%;
    box-shadow: none !important;
    /* Force expanded state on mobile */
    width: 15rem !important;
    background: #2C3E50;
    pointer-events: auto !important;
    z-index: 999999 !important;
    display: flex !important;
    flex-direction: column !important;
  }

  /* Make nav container fill height */
  .sideNav .flex-column {
    height: 100%;
    display: flex !important;
    flex-direction: column !important;
  }

  .sideNav.fullSidebar {
    width: 100% !important;
  }

  /* Always show text on mobile */
  .sideNav .nav-item span {
    display: block !important;
  }

  /* Force expanded dropdown toggle to show */
  .sideNav .sideNavDropdown .dropdown-toggle.nav-link {
    display: block !important;
    padding: 0 0 !important;
    color: #fff;
  }

  /* Adjust dropdown positioning for mobile */
  .sideNav .dropdown-menu {
    position: static !important;
    width: 100%;
    background: rgba(0, 0, 0, 0.2) !important;
    left: 0 !important;
    top: 0 !important;
    margin: 0;
    border-radius: 0 !important;
  }

  .sideNav .dropdown-menu::before,
  .sideNav .dropdown-menu::after {
    display: none;
  }

  /* Mobile nav items */
  .sideNav .nav-link {
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  /* Ensure nav buttons are clickable */
  .sideNav button {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 9999999 !important;
    cursor: pointer !important;
  }

  /* Force all interactive elements to be clickable */
  .sideNav .dropdown-item {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 9999999 !important;
    position: relative !important;
  }

  /* Force all nav items to be clickable */
  .sideNav .nav-item {
    pointer-events: auto !important;
    z-index: 9999999 !important;
  }

  /* Force container elements to be clickable */
  .sideNav .row,
  .sideNav .col,
  .sideNav .d-flex {
    pointer-events: auto !important;
    z-index: 9999999 !important;
  }

  /* Hide expand/collapse buttons on mobile */
  /* .rounded-circle.position-absolute {
    display: none !important;
  } */

  /* Mobile User Profile Section */
  .sideNav .d-lg-none {
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)) !important;
    backdrop-filter: blur(10px);
  }

  /* Profile Header Styling */
  .sideNav .mobile-profile-header {
    padding: 8px 0;
  }

  .sideNav .mobile-profile-name {
    font-size: 16px !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8) !important;
    margin-bottom: 6px !important;
    line-height: 1.2 !important;
  }

  .sideNav .mobile-profile-badge {
    display: inline-block;
    background: linear-gradient(135deg, rgba(17, 97, 171, 0.9), rgba(13, 71, 125, 0.9)) !important;
    color: #ffffff !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    padding: 4px 12px !important;
    border-radius: 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
  }

  /* Mobile profile buttons - Professional design */
  .sideNav .mobile-profile-btn {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left;
    transition: all 0.2s ease;
    min-height: 44px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
  }

  .sideNav .mobile-profile-btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  }

  .sideNav .mobile-signout-btn {
    background: linear-gradient(135deg, #dc3545, #c82333) !important;
    border: 1px solid rgba(220, 53, 69, 0.8) !important;
    border-radius: 8px;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    text-align: left;
    transition: all 0.2s ease;
    min-height: 44px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important;
    backdrop-filter: blur(5px);
  }

  .sideNav .mobile-signout-btn:hover {
    background: linear-gradient(135deg, #c82333, #bd2130) !important;
    border-color: rgba(189, 33, 48, 0.9) !important;
    color: #ffffff !important;
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(220, 53, 69, 0.3);
  }
}

@media (max-width: 576px) {
  .sidebar-mobile-wrapper {
    width: 80%;
    max-width: 280px;
  }
}

/* Touch-friendly nav items */
@media (max-width: 991px) {
  .sideNav .nav-link {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  .sideNav .dropdown-item {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding: 12px 20px;
  }
}
.active-bg {
    background: #064988 !important;
}

.default-bg {
    background: #0C3962 !important;
}

.sidebar-submenu:hover {
    background-color: red;
}

.sidebar-submenu:hover {
    background-color: #074988;
}

/* hover effect */
.default-bg:hover {
    background-color: #064988 !important;
    /* light overlay effect */
    transition: background-color 0.3s ease;
}
/* Mobile Navigation Styles */

/* Mobile Bottom Navigation Bar */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #ffffff;
  border-top: 1px solid #e9ecef;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 1030;
  /* height: 56px; */
  display: none;
}

@media (max-width: 991px) {
  .mobile-bottom-nav {
    display: block;
  }
  
  /* Add padding to body to prevent content overlap */
  /* body {
    padding-bottom: 56px;
  } */
}

.mobile-nav-items {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 100%;
  padding: 0 10px;
}

.mobile-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #666;
  text-decoration: none;
  position: relative;
  min-width: 0;
  font-size: 11px;
  font-weight: 500;
}

.mobile-nav-item:hover,
.mobile-nav-item:focus {
  color: #1262ab;
  background-color: rgba(18, 98, 171, 0.05);
  outline: none;
}

.mobile-nav-item.active {
  color: #1262ab;
}

.mobile-nav-item.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background-color: #1262ab;
}

.mobile-nav-item svg {
  margin-bottom: 4px;
  transition: transform 0.2s ease;
  color: inherit;
  fill: currentColor;
}

.mobile-nav-item:active svg {
  transform: scale(0.9);
}

.mobile-nav-item span {
  display: block;
}

/* Mobile Slide Menu */
.mobile-slide-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1050;
  pointer-events: none;
  transition: opacity 0.3s ease;
  opacity: 0;
}

.mobile-slide-menu.open {
  pointer-events: auto;
  opacity: 1;
}

.mobile-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-slide-menu.open .mobile-menu-overlay {
  opacity: 1;
}

.mobile-menu-content {
  position: absolute;
  top: 0;
  right: -280px;
  width: 280px;
  height: 100%;
  background: #ffffff;
  box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
  transition: right 0.3s ease;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.mobile-slide-menu.open .mobile-menu-content {
  right: 0;
}

.mobile-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #e9ecef;
  background: #f8f9fa;
  position: sticky;
  top: 0;
  z-index: 10;
}

.mobile-menu-header h5 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0c3963;
}

.close-menu-btn {
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  color: #666;
  transition: color 0.2s ease;
  border-radius: 4px;
}

.close-menu-btn:hover {
  color: #0c3963;
  background-color: rgba(0, 0, 0, 0.05);
}

.mobile-menu-body {
  padding: 20px 0;
}

.mobile-menu-section {
  margin-bottom: 20px;
}

.section-title {
  font-size: 12px;
  font-weight: 600;
  color: #999;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0 20px;
  margin-bottom: 10px;
}

.mobile-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 20px;
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
}

.mobile-menu-item:hover,
.mobile-menu-item:focus {
  background-color: #f8f9fa;
  color: #1262ab;
  outline: none;
}

.mobile-menu-item.active {
  background-color: #e8f0f7;
  color: #1262ab;
  position: relative;
}

.mobile-menu-item.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 15%;
  bottom: 15%;
  width: 3px;
  background-color: #1262ab;
}

.menu-icon {
  display: flex;
  align-items: center;
  margin-right: 12px;
  color: inherit;
}

.menu-label {
  flex: 1;
}

/* Prevent body scroll when menu is open */
body.mobile-menu-open {
  overflow: hidden;
}

/* Animations */
@keyframes slideIn {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Responsive adjustments for smaller screens */
@media (max-width: 320px) {
  .mobile-nav-item {
    font-size: 10px;
  }
  
  .mobile-nav-item svg {
    width: 20px;
    height: 20px;
  }
  
  .mobile-menu-content {
    width: 100%;
  }
}

/* Hide desktop sidebar on mobile when using mobile nav */
@media (max-width: 991px) {
  .position-sticky[style*="max-width"] {
    display: none !important;
  }
}

/* Ensure proper stacking context */
.mobile-bottom-nav,
.mobile-slide-menu {
  isolation: isolate;
}
/* RBAC Permissions Interface Styles */

.rbac-permissions-interface {
  min-height: 100vh;
  background-color: #f8f9fa;
  padding: 20px 0;
}

.rbac-header {
  background: white;
  padding: 24px;
  border-radius: 8px;
  border: 1px solid #e9ecef;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Custom RBAC Tabs Styling */
.rbac-tabs-wrapper {
  background: white;
  border-radius: 8px;
  padding: 0;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.rbac-nav-tabs {
  border-bottom: 2px solid #1362ab;
  background: white;
  margin-bottom: 0;
}

.rbac-nav-tabs .nav-item {
  margin-bottom: -2px;
}

.rbac-nav-link {
  background: white !important;
  border: 1px solid #dee2e6 !important;
  color: #6c757d !important;
  font-weight: 500 !important;
  margin-right: 8px !important;
  border-radius: 8px 8px 0 0 !important;
  padding: 12px 24px !important;
  border-bottom: 2px solid transparent !important;
  transition: all 0.2s ease !important;
}

.rbac-nav-link:hover {
  border-color: #1362ab !important;
  color: #1362ab !important;
  background: #f8f9fa !important;
}

.rbac-nav-link.active {
  background: #1362ab !important;
  border-color: #1362ab !important;
  color: white !important;
  border-bottom: 2px solid #1362ab !important;
}

.rbac-tab-content {
  background: white;
  border-radius: 0 0 8px 8px;
  min-height: 600px;
}

/* Users List Styles */
.users-list {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-item:hover {
  background-color: #f8f9fa !important;
}

.user-item.selected {
  background-color: #e3f2fd;
  border-left: 4px solid #1362ab;
}

.users-scroll-container {
  max-height: 600px;
  overflow-y: auto;
}

.users-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.users-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.users-scroll-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.users-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Permission Manager Styles */
.permission-manager {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  min-height: 600px;
}

.permission-module {
  border: 1px solid #e9ecef;
  border-radius: 8px;
  background: white;
}

.module-header {
  transition: all 0.2s ease;
}

.module-header:hover {
  background-color: #e9ecef !important;
}

.permission-item {
  border: 1px solid #e9ecef;
  transition: all 0.2s ease;
}

.permission-item:hover {
  background-color: #ffffff !important;
  border-color: #1362ab;
  box-shadow: 0 2px 4px rgba(19, 98, 171, 0.1);
}

.permissions-scroll-container {
  max-height: 600px;
  overflow-y: auto;
}

.permissions-scroll-container::-webkit-scrollbar {
  width: 6px;
}

.permissions-scroll-container::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.permissions-scroll-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.permissions-scroll-container::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Permission badges */
.permission-badge {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.permission-granted {
  background-color: #d4edda;
  color: #155724;
}

.permission-by-permission {
  background-color: #fff3cd;
  color: #856404;
}

.permission-own-only {
  background-color: #d1ecf1;
  color: #0c5460;
}

.permission-own-assigned {
  background-color: #cce5ff;
  color: #004085;
}

.permission-denied {
  background-color: #f8d7da;
  color: #721c24;
}

/* Form controls */
.form-select-sm {
  font-size: 0.875rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .rbac-permissions-interface {
    padding: 10px 0;
  }
  
  .rbac-header {
    padding: 16px;
  }
  
  .users-scroll-container,
  .permissions-scroll-container {
    max-height: 400px;
  }
  
  .permission-item .row {
    flex-direction: column;
  }
  
  .permission-item .col-lg-6:last-child {
    margin-top: 12px;
  }
}

@media (max-width: 576px) {
  .user-item {
    padding: 12px;
  }
  
  .permission-item {
    padding: 12px;
  }
  
  .module-header {
    padding: 12px;
  }
}

/* Animation effects */
.permission-module {
  animation: fadeInUp 0.3s ease-out;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Custom button styles */
.btn-rbac-save {
  background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
  border: none;
  color: white;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-rbac-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(40, 167, 69, 0.3);
}

.btn-rbac-add {
  background: linear-gradient(135deg, #007bff 0%, #0056b3 100%);
  border: none;
  color: white;
  font-weight: 500;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.btn-rbac-add:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 123, 255, 0.3);
}

/* Loading states */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

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

/* Status indicators */
.status-active {
  color: #28a745;
}

.status-inactive {
  color: #6c757d;
}

.status-pending {
  color: #ffc107;
}

/* Search input enhancements */
.search-input-container {
  position: relative;
}

.search-input-container input {
  padding-left: 40px;
}

.search-input-container .search-icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  font-size: 16px;
}

/* Empty state styles */
.empty-state {
  text-align: center;
  padding: 40px 20px;
  color: #6c757d;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

/* Module expansion animation */
.module-permissions {
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
  }
  to {
    opacity: 1;
    max-height: 1000px;
  }
}

/* Success/warning notifications */
.changes-notification {
  position: sticky;
  bottom: 0;
  z-index: 10;
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.otp-box {
  width: 46px !important;
  height: 52px !important;
  min-height: 40px !important;

  font-size: 1.25rem !important;
  line-height: 40px !important;

  padding: 0 !important;
  border: 1.5px solid #E0E0E0;
  border-radius: 8px;
  background-color: #FFFFFF;
  text-align: center;
  box-sizing: border-box;
}


@media (max-width: 768px) {
    .verf-btn{
        margin-top: 80px !important;
    }
    .otp-box {
         width: 36px !important;
  height: 40px !important;
 
  
}

}
.action-btn {
  min-height: 48px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 6px 10px !important;
  text-align: center;
  width: 100%;
  white-space: normal !important;
  /* allow wrapping */
  line-height: 1.2;
}
.step-progress {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  /* padding: 0 20px; */
  margin-top: 10px;
}

.step-item {
  display: flex;
  flex-direction: column;
  /* align-items: center; */
  flex: 1;
}

.step-block {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

@media (max-width: 576px) {
  .step-progress {
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
  }
}

.checkbox-accepted {
  background-color: #28a745 !important;
  border-color: #28a745 !important;
}

.verify-btn {
  background-color: #e9f1fb !important;
  /* light blue background */
  color: #2765b3 !important;
  /* blue text */
  border: none !important;
  /* no border */
  border-radius: 8px;
  /* soft corners */
  font-weight: 500;
}

.verify-btn:disabled {
  opacity: 1 !important;
  /* keep same look when disabled */
}

.circle {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #e6e6e6;
  color: #333;
  font-weight: 600;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.step-block.active .circle {
  background: #1c57a5;
  color: #fff;
}

.label {
  font-size: 16px;
  font-weight: 500;
  color: #555;
}

.step-block.active .label {
  color: #1c57a5;
}

.line {
  margin-bottom: 10px;
  width: 100%;
  height: 5px;
  background: #e6e6e6;
  border-radius: 5px;
}

.line.filled {
  background: #1c57a5;
}

/* Hover transitions */
.active-card,
.border:hover {
  transition: all 0.3s ease;
}

.active-card:hover {
  box-shadow: 0 0 10px rgba(13, 110, 253, 0.2);
}

/* Wrapper */
.signup-wrapper {
  overflow: hidden;
}

/* Left sticky section (no visible scrollbar) */
.signup-left {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  /* Keep scroll functionality for long content */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE and Edge */
}

.signup-left::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

/* Right side scrollable area */
.signup-right {
  overflow-y: auto;
  max-height: 100vh;
}

/* Optional: smooth scrolling across the layout */
.signup-wrapper {
  scroll-behavior: smooth;
}

/* .bg-white.flex-column.justify-content-center.signup-right.col-md-8 {
    flex: 1;
    padding: 60px 80px;
    overflow-y: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 80px;
} */

.phone-wrapper:focus-within {
  border-color: #0d6efd;
  box-shadow: 0 0 0 2px rgba(13, 110, 253, 0.25);
}

.verify-card {
  border: none;
  border-radius: 12px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.icon-circle {
  box-shadow: 0 2px 6px rgba(18, 98, 171, 0.25);
}

.otp-box:focus {
  outline: none;
  border-color: #1262ab !important;
  box-shadow: 0 0 0 3px rgba(18, 98, 171, 0.2);
}

.btn-link:hover {
  text-decoration: underline;
}

.text-muted {
  color: #6c757d !important;
}

.left-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 34%;
  /* or whatever width your left panel uses */
  height: 100vh;
  overflow-y: auto;
  background: #fff;
  /* To avoid transparency issues */
  padding: 20px;
  z-index: 1000;
}

.info-box-new {
  background-color: #f1f6fe;
  /* very light blue */
  padding: 12px 16px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  position: relative;
  font-size: 14px;
  color: #333;
}

.info-box-new::before {
  content: "";
  width: 4px;
  height: 100%;
  background-color: #2f6fcf;
  /* left blue bar */
  border-radius: 4px 0 0 4px;
  position: absolute;
  left: 0;
  top: 0;
}

.otp-error-new {
  border: 1.5px solid #dc3545 !important;
  /* Bootstrap red */
  background-color: #fff5f5 !important;
  /* very light red */
}

/* ///tag module */

.account-card-custom {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    text-align: center;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.account-card-custom.selected {
    border: 1.5px solid #1262ab;
    box-shadow: 0 2px 8px rgba(18, 98, 171, 0.15);
}

/* ✅ Icon container */
.icon-box {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.25s ease;
    margin-bottom: 0.75rem;
}

/* ✅ Active (selected) icon */
.icon-box.active {
    background-color: #1262ab;
}

/* ✅ Inactive (not selected) icon */
.icon-box.inactive {
    background-color: #ecf3fc;
}

/* ✅ Text tweaks */
.account-card-custom h6 {
    font-size: 1rem;
}

.account-card-custom small {
    font-size: 0.9rem;
    color: #6c757d;
}

/* ✅ Base card style */
.org-type-card {
    border: 1.5px solid #e0e0e0;
    border-radius: 10px;
    background-color: #fff;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 200px;
}

.org-type-card:hover {
    border-color: #1362AB;
    box-shadow: 0 2px 6px rgba(13, 110, 253, 0.1);
}

.org-type-card.selected {
    border-color: #1262ab;
    box-shadow: 0 3px 8px rgba(18, 98, 171, 0.15);
}

/* ✅ Icon container for org type */
.icon-box-org {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.25s ease;
}

/* Active = filled blue icon box */
.icon-box-org.active {
    background-color: #1262ab;
}

/* Inactive = light blue background */
.icon-box-org.inactive {
    background-color: #ecf3fc;
}


/* ----------------------------- */
/*   GLOBAL PAGE STYLING         */
/* ----------------------------- */

.trans-container {
    max-width: 760px;
    margin-top: 10px;
}

/* Title + description */
.trans-container h4 {
    font-size: 26px;
    font-weight: 600;
}

.trans-container p {
    font-size: 15px;
}

/* ----------------------------- */
/*   PROGRESS BAR                */
/* ----------------------------- */

.custom-progress-bar .progress {
    height: 8px !important;
    background: #e9ecef !important;
    border-radius: 10px;
}

.custom-progress-bar .progress-bar {
    background: #f4c048 !important;
    border-radius: 10px;
}

/* ----------------------------- */
/*   SEARCH BAR                  */
/* ----------------------------- */

.search-input {
    width: 260px !important;
    border-radius: 12px !important;
    font-size: 15px;
    padding: 10px 14px;
    border: 1px solid #d8dde2 !important;
}

.search-input::placeholder {
    color: #b1b7be;
}

/* ----------------------------- */
/*   EXPAND / COLLAPSE LINKS     */
/* ----------------------------- */

.expand-link {
    font-size: 14px;
    font-weight: 500;
    color: #2563eb !important;
}

/* ----------------------------- */
/*   ACCORDION STYLING           */
/* ----------------------------- */

.accordion-item {
    border: none !important;
    border-radius: 12px !important;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08) !important;
    padding: 3px 10px !important;
}

.accordion-button {
    background: transparent !important;
    box-shadow: none !important;
    padding: 14px 12px !important;
    font-weight: 600;
    color: #1a1d1f;
    border-radius: 12px !important;
}

/* Remove blue highlight when opened */
.accordion-button:not(.collapsed) {
    color: #1a1d1f !important;
    background: transparent !important;
}

/* Arrow style */
.accordion-button::after {
    transform: scale(0.8);
    opacity: 0.7;
}

/* ----------------------------- */
/*   TAG PILL BUTTONS            */
/* ----------------------------- */

.tag-btn {
    background: #ffffff !important;
    border-radius: 40px !important;
    font-size: 14px !important;
    padding: 5px 14px !important;
    border: 1px solid #2563eb !important;
    color: #2563eb !important;
    transition: all 0.2s;
}

.tag-btn:hover {
    background: #2563eb !important;
    color: #fff !important;
}

/* Selected (Primary) */
.tag-btn.btn-primary {
    background: #2563eb !important;
    color: #fff !important;
    border: 1px solid #2563eb !important;
}

.tag-btn i {
    font-size: 13px;
}

/* ----------------------------- */
/*   BOTTOM BUTTONS              */
/* ----------------------------- */
.progress-green .progress-bar {
    background-color: #28a745 !important;
    /* Bootstrap green */
}

.btn-skip {
    background: #f6f7f9 !important;
    color: #5f6368 !important;
    border-radius: 8px !important;
    border: 1px solid #e4e7eb !important;
    font-size: 16px;
    padding: 10px;
}

.btn-continue {
    background: #10345E !important;
    font-size: 16px;
    padding: 10px;
    border-radius: 8px !important;
}






/* Container */
.trans-container {
    max-width: 760px;
}

/* Progress */
.custom-progress-bar .progress {
    height: 8px;
    border-radius: 10px;
    background: #e5e7eb;
}

.custom-progress-bar .progress-bar {
    background: #f4c048 !important;
}

/* Search box */
.search-input {
    border: 1px solid #D0D5DD !important;
    border-radius: 8px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
}

/* Expand/Collapse links */
.expand-link {
    color: #10345E !important;
    font-weight: 500 !important;
    font-size: 14px !important;
}

/* Accordion wrapper */
.tc-accordion-wrapper {
    width: 100%;
}

/* Each accordion section */
.tc-accordion-section {
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 10px;
    background: #fff;
    overflow: hidden;
}

/* Header */
.tc-accordion-header {
    padding: 14px 16px;
    font-weight: 600;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.tc-header-left {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tc-header-left i {
    font-size: 14px;
    color: #6b7280;
}

/* Right section */
.tc-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-count-pill {
    background: #eef2ff;
    color: #10345E;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
}

.tc-chevron {
    font-size: 16px;
    color: #6b7280;
}

/* Body */
.tc-accordion-body {
    padding: 16px;
    border-top: 1px solid #E5E7EB;
}

/* Tag button */
.tc-tag {
    border-radius: 20px !important;
    background: #fff !important;
    border: 1px solid #D0D5DD !important;
    color: #344054 !important;
    font-size: 13px !important;
    padding: 6px 14px !important;
}

.tc-tag.btn-primary {
    /* background: #2563EB !important; */
    border-color: #E5E5E5 !important;
    color: #222222 !important;
}

.small-tag-info {
    font-size: 12px;
    color: #10345E;
}

/* Footer buttons */
.btn-skip {
    background: #F3F4F6 !important;
    border-color: #E5E7EB !important;
    color: #6B7280 !important;
    border-radius: 8px !important;
}

.btn-continue {
    background: #10345E !important;
    border-radius: 8px !important;
    color: #fff !important;
    padding: 10px;
}

/* Expand / Collapse Controls */
.tc-expand-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tc-expand-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: #2563EB;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
}

.tc-expand-btn:hover {
    text-decoration: underline;
}

.tc-expand-divider {
    color: #9CA3AF;
    font-size: 14px;
}

/* DEFAULT (NOT SELECTED) */
.tc-tag {
    background: #ffffff !important;
    color: #1F2937 !important;
    border: 1.5px solid #D1D5DB !important;
    border-radius: 10px !important;
    padding: 6px 14px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s ease;
}

.tc-tag .small-tag-info {
    color: #0e5cd9 !important;
    opacity: 0.6;
}

/* Selected State */
.tc-tag.selected {
    background: #fff !important;
    border: 1px solid #1262AB !important;
    color: #1262AB !important;
    border-radius: 12px !important;
}

.tc-tag.selected .small-tag-info {
    color: #1262AB !important;
    opacity: 1;
}

/* Hover effect */
.tc-tag:hover {
    border-color: #1262AB !important;
    color: #1262AB !important;
}

.tc-tag:hover .small-tag-info {
    opacity: 1;
}
/**
 * CallScreen Styles
 */

.call-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #1a1a1a;
  display: flex;
  flex-direction: column;
  z-index: 9999;
  font-family: 'Manrope', sans-serif;
}

/* Video Container */
.call-screen__video-container {
  position: relative;
  flex: 1;
  overflow: hidden;
  background-color: #000000;
}

.call-screen__remote-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background-color: #1a1a1a;
}

/* Local Video (PIP) */
.call-screen__local-video-wrapper {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 180px;
  height: 135px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  background-color: #2a2a2a;
}

.call-screen__local-video-wrapper:hover {
  transform: scale(1.05);
}

.call-screen__local-video-wrapper--minimized {
  width: 100px;
  height: 75px;
}

.call-screen__local-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.call-screen__video-off-indicator {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #2a2a2a;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
}

/* Audio Container */
.call-screen__audio-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1262ab 0%, #0c3963 100%);
}

.call-screen__avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #ffffff;
  margin-bottom: 24px;
}

.call-screen__caller-name {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
  color: #ffffff;
}

/* Info Overlay */
.call-screen__info-overlay {
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.call-screen__caller-name-video {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 600;
  color: #ffffff;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.call-screen__status {
  margin: 0;
  font-size: 16px;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

/* Audio call status */
.call-screen--audio .call-screen__info-overlay {
  position: relative;
  top: 0;
  margin-top: 24px;
}

.call-screen--audio .call-screen__status {
  color: rgba(255, 255, 255, 0.7);
  text-shadow: none;
}

/* Controls */
.call-screen__controls {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 30px;
  background-color: rgba(0, 0, 0, 0.6);
}

.call-screen--audio .call-screen__controls {
  background-color: rgba(0, 0, 0, 0.3);
}

.call-screen__control-btn {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  background-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}

.call-screen__control-btn:hover {
  background-color: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}

.call-screen__control-btn:active {
  transform: scale(0.95);
}

.call-screen__control-btn--active {
  background-color: #ffffff;
  color: #1a1a1a;
}

.call-screen__control-btn--active:hover {
  background-color: #e0e0e0;
}

.call-screen__control-btn--end {
  background-color: #f44336;
}

.call-screen__control-btn--end:hover {
  background-color: #d32f2f;
}

/* Responsive */
@media (max-width: 768px) {
  .call-screen__local-video-wrapper {
    width: 120px;
    height: 90px;
    top: 16px;
    right: 16px;
  }

  .call-screen__local-video-wrapper--minimized {
    width: 80px;
    height: 60px;
  }

  .call-screen__info-overlay {
    top: 120px;
  }

  .call-screen__controls {
    gap: 20px;
    padding: 24px;
  }

  .call-screen__control-btn {
    width: 52px;
    height: 52px;
  }

  .call-screen__avatar {
    width: 100px;
    height: 100px;
  }

  .call-screen__caller-name {
    font-size: 24px;
  }
}

@media (max-width: 480px) {
  .call-screen__local-video-wrapper {
    width: 100px;
    height: 75px;
    top: 12px;
    right: 12px;
  }

  .call-screen__controls {
    gap: 16px;
    padding: 20px;
  }

  .call-screen__control-btn {
    width: 48px;
    height: 48px;
  }

  .call-screen__control-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* Global Responsive Overrides for ESaaS Application */
/* This file contains final responsive fixes to ensure perfect mobile experience */

/* CSS Custom Properties for Consistent Breakpoints */
:root {
  /* Breakpoint System */
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
  --breakpoint-xxl: 1400px;
  
  /* Mobile-specific variables */
  --mobile-touch-target: 44px;
  --tablet-touch-target: 40px;
  --mobile-font-min: 16px;
  --mobile-spacing-unit: 20px;
  --tablet-spacing-unit: 24px;
  
  /* Safe area variables */
  --safe-area-inset-top: env(safe-area-inset-top, 0px);
  --safe-area-inset-right: env(safe-area-inset-right, 0px);
  --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* Global Box Model Fix */
* {
  box-sizing: border-box;
}

/* Prevent horizontal scroll */
html, body {
  overflow-x: hidden;
  width: 100%;
}

/* Mobile-first viewport handling */
/* html {
  height: 100vh;
  height: 100dvh;
} */

/* body {
  min-height: 100vh;
  min-height: 100dvh;
  position: relative;
} */

/* Container Responsive Padding */
@media (max-width: 768px) {
  .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
  }
  
  .container {
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Fix Bootstrap Grid Gutters on Mobile */
@media (max-width: 576px) {
  .row {
    margin-left: -10px;
    margin-right: -10px;
  }
  
}

/* Responsive Images */
img {
  max-width: 100%;
  height: auto;
}

/* Responsive Text */
/* @media (max-width: 768px) {
  h1, .h1 { font-size: 1.75rem; }
  h2, .h2 { font-size: 1.5rem; }
  h3, .h3 { font-size: 1.25rem; }
  h4, .h4 { font-size: 1.1rem; }
  h5, .h5 { font-size: 1rem; }
  h6, .h6 { font-size: 0.875rem; }
  
  p, .text-small {
    font-size: 14px;
    line-height: 1.5;
  }
} */

/* Responsive Cards */
@media (max-width: 768px) {
  .card {
    margin-bottom: 1rem;
  }
  
  .card-body {
    padding: 1rem;
  }
}

/* Responsive Buttons - Global Override */
/* @media (max-width: 768px) {
  .btn:not(.btn-sm):not(.btn-lg) {
    min-height: 44px;
    padding: 0.75rem 1rem;
    font-size: 14px;
  }
  
  .btn-group > .btn {
    flex: 1 1 auto;
  }
} */

/* Fix Dropdown Menus on Mobile */
@media (max-width: 768px) {
  /* .dropdown-menu {
    position: static !important;
    width: 100%;
    margin-top: 0.5rem;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  } */
  
  /* .dropdown-item {
    padding: 12px 16px;
    min-height: 44px;
  } */
}

/* Responsive Modals - Additional Fixes */
@media (max-width: 576px) {
  /* .modal-dialog {
    margin: 0;
    max-width: 100%;
  }
  
  .modal-content {
    border-radius: 0;
    height: 100vh;
  } */
  
  /* .modal-header {
    padding: 1rem;
  }
  
  .modal-body {
    padding: 1rem;
  } */
}

/* Form Responsive Overrides */
@media (max-width: 768px) {
  .form-group {
    margin-bottom: 1rem;
  }
  
  .form-control,
  .form-select {
    font-size: 16px !important; /* Prevent iOS zoom */
    min-height: 44px;
  }
  
  .input-group > * {
    font-size: 16px !important;
  }
}

/* Sidebar Mobile Backdrop */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1040;
}

body.mobile-sidebar-open .sidebar-backdrop {
  display: block;
}

/* Responsive Utilities */
@media (max-width: 768px) {
  /* Hide desktop-only elements */
  .desktop-only {
    display: none !important;
  }
  
  /* Stack flex items on mobile */
  .flex-md-row.flex-column-mobile {
    flex-direction: column !important;
  }
  
  /* Full width on mobile */
  .w-md-auto.w-100-mobile {
    width: 100% !important;
  }
  
  /* Center text on mobile */
  .text-md-start.text-center-mobile {
    text-align: center !important;
  }
}

/* Responsive Spacing Helpers */
@media (max-width: 768px) {
  .mt-md-0 { margin-top: 0 !important; }
  .mb-md-0 { margin-bottom: 0 !important; }
  .ms-md-0 { margin-left: 0 !important; }
  .me-md-0 { margin-right: 0 !important; }
  
  .pt-md-0 { padding-top: 0 !important; }
  .pb-md-0 { padding-bottom: 0 !important; }
  .ps-md-0 { padding-left: 0 !important; }
  .pe-md-0 { padding-right: 0 !important; }
}

/* Fix Z-index Issues */
/* .modal-backdrop {
  z-index: 1040;
} */

/* .modal {
  z-index: 1050;
} */

.dropdown-menu {
  z-index: 1030;
}

/* Loading States */
@media (max-width: 768px) {
  .spinner-border {
    width: 2rem;
    height: 2rem;
  }
}

/* Responsive Pagination */
@media (max-width: 576px) {
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .page-item:not(.active):not(:first-child):not(:last-child):nth-child(n+4) {
    display: none;
  }
  
  /* .page-link {
    min-width: 40px;
    min-height: 40px;
    padding: 0.5rem;
  } */
}

/* Fix Overflow Issues */
.table-responsive,
.overflow-auto {
  -webkit-overflow-scrolling: touch;
}

/* Ensure Touch Targets */
a, button, input, select, textarea, .clickable {
  -webkit-tap-highlight-color: transparent;
}

/* Responsive Line Heights */
@media (max-width: 768px) {
  .lh-1 { line-height: 1.2 !important; }
  .lh-sm { line-height: 1.25 !important; }
  .lh-base { line-height: 1.5 !important; }
  .lh-lg { line-height: 1.75 !important; }
  
}

/* Fix Position Sticky on Mobile */
@media (max-width: 768px) {
  .position-sticky {
    position: relative !important;
  }
}

/* Responsive Border Radius */
@media (max-width: 576px) {
  .rounded-3 { border-radius: 0.5rem !important; }
  .rounded-pill { border-radius: 2rem !important; }
}

/* Print Styles */
@media print {
  .no-print,
  .sidebar,
  .navbar,
  .footer,
  .btn,
  .modal {
    display: none !important;
  }
  
  .container {
    width: 100%;
    max-width: none;
  }
}
/* Import responsive overrides */

* {
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

body {
    font-family: "Manrope", sans-serif !important;
}

.notification-dropdown-list {
    max-height: 50dvh;
}

.css-t3nznx-MuiTypography-root {
    margin: 0;
    font-family: "Manrope", sans-serif !important;
    /* font-family: "Roboto", "Helvetica", "Arial", sans-serif; */
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 1.57;
    letter-spacing: 0.00714em;
    font-weight: 600;
}



/* Global checkbox fix - ensure square shape on all devices */
/* input[type="checkbox"],
.form-check-input[type="checkbox"] {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    aspect-ratio: 1 !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    vertical-align: middle;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
} */

.form-check .form-check-input {
    margin-left: 0 !important;
}

/* Checked state */
input[type="checkbox"]:checked,
.form-check-input[type="checkbox"]:checked {
    background-color: #1062AB !important;
    border-color: #1062AB !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 20 20%27%3e%3cpath fill=%27none%27 stroke=%27%23fff%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke-width=%273%27 d=%27M6 10l3 3l6-6%27/%3e%3c/svg%3e") !important;
}

/* Focus state */
input[type="checkbox"]:focus,
.form-check-input[type="checkbox"]:focus {
    border-color: #1062AB !important;
    box-shadow: 0 0 0 0.2rem rgba(16, 98, 171, 0.25) !important;
    outline: 0 !important;
}

/* Mobile-specific checkbox size */
@media (max-width: 768px) {

    /* input[type="checkbox"],
    .form-check-input[type="checkbox"] {
        width: 18px !important;
        height: 18px !important;
        min-width: 18px !important;
        min-height: 18px !important;
        max-width: 18px !important;
        max-height: 18px !important;
    } */
}

/* Signup form fix - invisible checkboxes should cover entire clickable area */
input[type="checkbox"].position-absolute.top-0.start-0.w-100.h-100.opacity-0 {
    width: 100% !important;
    height: 100% !important;
    min-width: 100% !important;
    min-height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
}


.form-switch .form-check-input {
    background-color: #244b99 !important;
    border-color: #e2e3e5 !important;
    background-position: right center;
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%27-4 -4 8 8%27%3e%3ccircle r=%273%27 fill=%27%23fff%27/%3e%3c/svg%3e") !important;
}

span.deal_closed {
    background: #ddd;
    font-size: 13px;
    border-radius: 32px;
    padding: 11px;
    /* border: 1px solid grey; */
}

/* iPad Air 2 Date Field Fix */
input[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 44px;
    font-weight: 600;
    font-size: 0.875rem;
    /* padding: 0 16px; */
    border: 1px solid #c7c7cc;
    border-radius: 10px;
    font-family: "Manrope", sans-serif !important;
    /* font-size: 17px; */
    /* font-family: -apple-system, BlinkMacSystemFont, sans-serif; */
    background-color: #ffffff;
    box-sizing: border-box;
}

input[type="date"]:focus {
    outline: none;
    border-color: #007aff;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

/* .text-small {
    color: #222222;
    font-family: "Manrope", sans-serif !important;
    font-weight: 600;
    font-size: 14px !important;
    font-size: 0.8rem !important;
} */

textarea.fs-xs.w-100.border.py-2.px-2.rounded-1.border-secondary-subtle {
    color: #222222;
    font-family: "Manrope", sans-serif !important;
    font-weight: 600;
    font-size: 0.875rem;
}

.custom-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;

    background-image: url("data:image/svg+xml,%3Csvg width=%27194px%27 height=%27194px%27 viewBox=%27-24 -24 72.00 72.00%27 fill=%27none%27 xmlns=%27http://www.w3.org/2000/svg%27 stroke=%27%23939393%27 stroke-width=%270.00024%27%3E%3Cg id=%27SVGRepo_bgCarrier%27 stroke-width=%270%27%3E%3C/g%3E%3Cg id=%27SVGRepo_tracerCarrier%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27 stroke=%27%23CCCCCC%27 stroke-width=%270.288%27%3E%3C/g%3E%3Cg id=%27SVGRepo_iconCarrier%27%3E%3Cpath fill-rule=%27evenodd%27 clip-rule=%27evenodd%27 d=%27M12.7071 14.7071C12.3166 15.0976 11.6834 15.0976 11.2929 14.7071L6.29289 9.70711C5.90237 9.31658 5.90237 8.68342 6.29289 8.29289C6.68342 7.90237 7.31658 7.90237 7.70711 8.29289L12 12.5858L16.2929 8.29289C16.6834 7.90237 17.3166 7.90237 17.7071 8.29289C18.0976 8.68342 18.0976 9.31658 17.7071 9.70711L12.7071 14.7071Z%27 fill=%27%239e9e9e%27%3E%3C/path%3E%3C/g%3E%3C/svg%3E");

    background-repeat: no-repeat;
    background-position: right -1rem center;
    background-size: 5.2rem;
}

.outlet {
    width: calc(100% - 65px);
    padding-top: 66px;
}

/* p {
    font-size: 14px;
    font-weight: 500;
}

a {
    font-size: 14px;
    font-weight: 500;
} */

/* .black {
    color: #343434 !important;
} */

.navbar-linkhover {
    position: relative;
    font-family: "Manrope", sans-serif;
    text-decoration: none !important;
    color: #1362AB;
    /* default color */
    transition: color 0.2s ease;
}

.navbar-linkhover::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -3px;
    /* adjust space below text */
    width: 0;
    height: 2px;
    background-color: #1362AB;
    /* underline color */
    transition: width 0.3s ease;
}

.navbar-linkhover:hover::after {
    width: 100%;
    /* show underline on hover */
}

.navbar-linkhover.active::after,
.navbar-linkhover[aria-current="page"]::after {
    width: 100%;
    /* keep underline for active link */
}


.outer_paragraph {
    font-size: 15px !important;
    font-weight: 400 !important;
}

.title-accord {
    font-size: 16px;
    color: #343434 !important;
    font-weight: 600;
}

/* button {
    font-size: 14px !important;
    font-weight: 500 !important;
} */

/* body .bg-light {
    background-color: #f8f8f8;
} */

/* .regularTable {
    min-height: 82vh;
} */




/* .regularTable {
  min-height: calc(100vh - 100px);
} */

.main-color {
    color: #1262ab !important;
}



.f14-fw600 {
    font-size: 14px !important;
    font-weight: 600 !important;
}

.main-bg {
    background-color: #1262ab !important;
}

.main-color-dark {
    color: #0c3963;
}

.main-bg-dark {
    background-color: #0c3963 !important;
}

.text-w-light {
    font-weight: 300 !important;
}

.text-bold {
    font-weight: 400 !important;
}



.text-medium {
    font-weight: 600 !important;
}

.text-bold {
    font-weight: 900 !important;
}

ul,
ol {
    margin: 0;
    padding: 0;
    list-style-type: none;
}

.text-light {
    font-weight: 300 !important;
}

.text-medium {
    font-weight: 600 !important;
}

.text-bold {
    font-weight: 900 !important;
}

.w-fit {
    width: fit-content !important;
}

.h-fit {
    height: fit-content !important;
}

.inset-0 {
    inset: 0;
}

body .border-primary {
    border-color: #1463ad !important;
}

.circle-chart__circle {
    transition: 1s ease-in-out;
}

/* SAMPLE PLACEHOLDER CSS */
.samplePage {
    position: relative;
    /* z-index: 9; */
    min-height: 300px;
}

.stickymenu ul li a {
    border-bottom: 3px solid transparent;
    color: #222;
}

.stickymenu ul li.active a {
    color: #1262ab !important;
    border-bottom: 3px solid #1262ab;
}

.samplePage::before {
    content: "";
    background: #ffffff9e;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.samplePage::after {
    content: "Sample Data";
    width: fit-content;
    height: fit-content;
    position: absolute;
    top: 75px;
    left: 50%;
    margin: auto;
    z-index: 2;
    font-size: 45px;
    color: #aba9a9;
    transform: rotate(-30deg) translateX(-50%);
}

/* SIDEBAR CSS */

.nestedMenu {
    position: absolute;
    z-index: 999;
    background: #f8f8f8;
    top: 0;
    left: 58px;
    padding: 0 6px;
    border-radius: 5px;
    margin-bottom: 5px;
}

.dropdown-toggle::after {
    display: none !important;
}

.sideBar .dropdown-menu::before,
.sideBar .nestedMenu::before {
    content: "";
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-right: 12px solid #dddddd99;
    border-bottom: 6px solid transparent;
    display: block;
    position: absolute;
    left: -13px;
    top: 14px;
}

.sideBar .dropdown-menu::after,
.sideBar .nestedMenu::after {
    content: "";
    width: 28px;
    height: 100%;
    position: absolute;
    left: -25px;
    top: 0px;
    background-color: transparent;
}

/* CUSTOM SCROLLBAR TRACK STYLING */
/* .scrollable {max-height: 45vh;}
.scrollable::-webkit-scrollbar-track {background-image: linear-gradient(to right, #fff, #fff, #ddd, #fff, #fff); border-radius: 10px;}
.scrollable::-webkit-scrollbar-thumb {background: #1463ad; border-radius: 10px;}
.scrollable::-webkit-scrollbar-thumb:hover {background: #0c3963;}
.scrollable::-webkit-scrollbar {width: 4px;} */

/* Note: Responsive breakpoint variables consolidated in app-responsive-overrides.css */

/* Responsive Font Sizes */
html {
    font-size: 16px;
}

@media (max-width: 768px) {
    html {
        font-size: 14px;
    }

    .stickymenu ul li.active a {
        color: #1262ab !important;
        border-bottom: none !important;
        font-size: 13px;
    }

    .stickymenu ul li a {

        font-size: 13px;
    }
}

body {
    font-family: "Manrope", sans-serif !important;
    font-weight: 500;
    font-size: 0.875rem;
    color: #000;
    min-width: 320px;
    /* Minimum supported width */
    -webkit-text-size-adjust: 100%;
    /* Prevent font scaling in landscape */
}

button,
input,
optgroup,
select,
textarea,
label,
a {
    font-family: "Manrope", sans-serif !important;
    font-weight: 600;
}

.signupNav {
    bottom: 24px;
}

#chatbase-bubble-button>div {
    width: 54px !important;
    height: 54px !important;
    position: absolute !important;
    inset: 0;
}

@media (max-width: 991.98px) {
    #chatbase-bubble-button>div {
        margin-top: 3rem !important;
        position: absolute !important;
        inset: 0;
    }

    #chatbase-bubble-button,
    #chatbase-bubble-button * {
        margin-bottom: 6rem !important;
        padding: 0;
        box-sizing: border-box;
    }
}


.slick-dots li button {
    box-shadow: none !important;
}

.mobile-bottom-nav .mobile-nav-item {
    height: 65px;
}

/* Mobile Navigation: Comprehensive Solution */
@media (max-width: 768px) {

    /* .qm {
        top: -8px;
        right: -6px !important;
        font-weight: 500 !important;
    } */

    /* CSS Custom Properties for dynamic calculations */
    :root {
        --mobile-nav-height: 70px;
        --safe-area-bottom: env(safe-area-inset-bottom, 20px);
        --mobile-browser-offset: max(20px, env(safe-area-inset-bottom, 20px));
    }

    .signupNav {
        position: fixed !important;
        bottom: var(--mobile-browser-offset) !important;
        left: 0 !important;
        right: 0 !important;
        transform: none !important;
        background: rgba(255, 255, 255, 0.98) !important;
        backdrop-filter: blur(10px) !important;
        -webkit-backdrop-filter: blur(10px) !important;
        padding: 12px 15px !important;
        padding-bottom: calc(12px + var(--safe-area-bottom)) !important;
        box-shadow:
            0 -2px 20px rgba(0, 0, 0, 0.1),
            0 -1px 3px rgba(0, 0, 0, 0.05) !important;
        z-index: 1000 !important;
        width: 100% !important;
        margin-bottom: 0 !important;
        border-top: 1px solid rgba(0, 0, 0, 0.1) !important;

        /* Prevent content from going behind mobile browser UI */
        min-height: var(--mobile-nav-height) !important;
        max-height: calc(var(--mobile-nav-height) + var(--safe-area-bottom)) !important;
    }

    /* Enhanced body padding with better calculation */
    /* body {
        padding-bottom: calc(var(--mobile-nav-height) + var(--mobile-browser-offset) + 10px) !important;
        --content-bottom-safe: calc(var(--mobile-nav-height) + var(--mobile-browser-offset) + 20px);
    } */

    /* Additional spacing for mobile bottom navigation */
    body.has-mobile-bottom-nav {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    }

    /* Ensure main content respects the navigation space */
    /* main,
    .main-content,
    .app-container {
        padding-bottom: var(--content-bottom-safe) !important;
        min-height: 100vh !important;
        min-height: 100dvh !important;
    } */

    /* Form containers get extra bottom padding */
    /* form:not(.navbar-form):not(.search-form),
    .signup-form,
    .auth-form {
        padding-bottom: calc(var(--mobile-nav-height) + 20px) !important;
        margin-bottom: 20px !important;
    } */

    /* Landscape mode optimizations */
    @media (orientation: landscape) and (max-height: 500px) {
        :root {
            --mobile-nav-height: 60px;
            --mobile-browser-offset: max(10px, env(safe-area-inset-bottom, 10px));
        }

        .signupNav {
            padding: 8px 15px !important;
        }
    }
}

/* body {
    overflow-y: scroll;
} */
.text-small {
    font-weight: 600;
    font-size: 14px !important;
    font-family: Manrope,
        sans-serif;
}

.advanceSearch .offcanvas-backdrop {
    display: none !important;
}

.advanceSearch .offcanvas {
    position: absolute !important;
    top: 170px !important;
    left: 65px !important;
    height: 100% !important;
}

/* .table> :not(caption)>*>* {
    box-shadow: none !important;
} */

/* .regularTable tbody td {
    padding: 12px 0;
} */

.regularTable .dropdown-toggle {
    background-color: transparent !important;
    border: 0;
    padding: 0px 0;
}

/* .table tr {
    display: flex;
    justify-content: space-between;
    gap: 10px;
} */

.table-hover>tbody>tr:hover>* {
    background-color: #e8f0f7 !important;
}

/* .table-responsive .table> :not(caption)>*>* {
    padding: 10px;
    white-space: nowrap;
    border: none;
} */

/* .table-responsive .table th:first-child {
    padding: 10px;
} */

/* .table-responsive .table td:first-child {
    padding: 10px 0px;
} */

.table-responsive .table th:last-child {
    padding: 10px 0px;
}

/* .table-responsive .table td:last-child {
    padding: 10px 0px;
} */

.headSection {
    height: 40px;
}

.table-responsive {
    overflow: hidden;
}

.dealDetailsTable tr:last-child td {
    border-bottom: none;
    /* padding-bottom: 0 !important; */
}

/* .navbar-nav {padding: 15px 0;} */

/* .table-responsive {
    padding: 0 15px;
} */

.outletWrap {
    display: flex;
}



canvas {
    max-width: 100%;
}

.mh-100vh {
    min-height: 100vh;
}

.requestADemoBtn {
    background-color: #1262ab;
    border: 1px solid #1262ab;
    color: #fff;
}

.requestADemoBtn:hover {
    border: 1px solid #fff !important;
}

/* .table-responsive {
    max-width: 70vh;
}
.table-responsive .table {
    width: 1140px;
} */

.sideBar .dropdown-menu {
    position: absolute !important;
}

@media screen and (max-width: 1199px) {

    /* .outlet {
    padding-right: 0px;
    } */
    /* table {
    border: 0;
  }

  table caption {
    font-size: 1.3em;
  }

  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }

  table td {
    border-bottom: 1px solid #ddd;
    font-size: 0.8em;
    text-align: right;
  }

  table td::before {
    content: attr(data-label);
    float: left;
    font-weight: 500;
    color: #666;
  }

  table td:last-child {
    border-bottom: 0;
  }

  table td {
    border-bottom: 1px solid #ddd;
    font-size: 0.8em;
    text-align: right;
    display: block;
  }  */
}

@media screen and (max-width: 991px) {
    .outlet {
        width: 100%;
    }

    .headSection {
        height: auto;
    }

    .publicNavbar .nav-link {
        width: 100%;
        margin: 0px 0;
        padding: 20px 0 !important;
    }

    .publicNavbar .nav-link sup {
        display: none;
    }

    /* .sideBar .dropdown-menu::before {
        left: 48px;
    } */
}

@media screen and (max-width: 575px) {

    .h5,
    h5 {
        font-size: 1rem !important;
    }

    .h6,
    h6 {
        font-size: 0.8rem;
    }
}

.shadownew-sm {
    box-shadow: 0px 0rem 2rem 10px rgba(0, 0, 0, 0.075) !important;
}

/* Overlay that covers the entire screen */
.screenOverlay {
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    pointer-events: all;
    /* Block interactions */
}

.screenOverlay-small {
    position: relative;
    background-color: rgba(255, 255, 255, 0.7);
    pointer-events: all;
    /* Block interactions */
}

/* Full-page transparent blocker inside screenOverlay */
/* .screenOverlay::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 187px;
    bottom: 0;
    background: transparent;
    z-index: 1;
    /* Ensure it sits above all content inside */


.screenOverlay::before {
    /* content: ""; */
    position: absolute;
    /* Changed from absolute */
    top: 0;
    left: 0;
    right: 187px;
    /* Cover full width */
    bottom: 0;
    background: transparent;
    /* semi-transparent freeze effect */
    z-index: 9999;
    /* Make sure it's above everything */
    /* pointer-events: all; */
    /* Capture all interactions to block */
}

/* Existing watermark text */
.screenOverlay::after {
    content: "Coming Soon";
    font-weight: 900;
    font-size: 50px;
    color: #AEAEAE;
    position: absolute;
    top: 30%;
    left: 50%;
    transform: rotate(-30deg) translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.5;
    z-index: 2;
}

.screenOverlay-small::before {
    content: "";
    position: absolute;
    /* Changed from absolute */
    top: 0;
    left: 0;
    right: 0;
    /* Cover full width */
    bottom: 0;
    background: transparent;
    /* semi-transparent freeze effect */
    z-index: 9999;
    /* Make sure it's above everything */
    /* pointer-events: all; */
    /* Capture all interactions to block */
}

/* Existing watermark text */
.screenOverlay-small::after {
    content: "Coming Soon";
    font-weight: 900;
    font-size: 26px;
    color: #AEAEAE;
    position: absolute;
    top: 13%;
    left: 50%;
    transform: rotate(-30deg) translate(-50%, -50%);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0.5;
    z-index: 2;
}


/* ============================================
   GLOBAL RESPONSIVE UTILITIES
   ============================================ */

/* Responsive Container */
.container-responsive {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 576px) {
    .container-responsive {
        max-width: 540px;
    }
}

@media (min-width: 768px) {
    .container-responsive {
        max-width: 720px;
    }
}

@media (min-width: 992px) {
    .container-responsive {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-responsive {
        max-width: 1140px;
    }
}

/* Responsive Text Classes */
.text-responsive {
    font-size: calc(0.875rem + 0.1vw);
}

/* Responsive Spacing */
.spacing-responsive {
    padding: calc(0.5rem + 1vw);
    margin: calc(0.25rem + 0.5vw);
}

/* Note: Touch-friendly button and input rules consolidated in responsive-fixes.css */

/* Responsive Tables */
@media (max-width: 768px) {
    .table-responsive-stack {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .screenOverlay::after {
        font-size: 30px;
    }

    .table-responsive-stack table,
    .table-responsive-stack thead,
    .table-responsive-stack tbody,
    .table-responsive-stack th,
    .table-responsive-stack td,
    .table-responsive-stack tr {
        display: block;
    }

    .table-responsive-stack thead tr {
        position: absolute;
        top: -9999px;
        left: -9999px;
    }

    .table-responsive-stack tr {
        border: 1px solid #ccc;
        margin-bottom: 10px;
        border-radius: 8px;
        padding: 10px;
        background: #fff;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

    .table-responsive-stack td {
        border: none;
        position: relative;
        padding-left: 50%;
        text-align: right;
    }

    .table-responsive-stack td:before {
        position: absolute;
        top: 6px;
        left: 6px;
        width: 45%;
        padding-right: 10px;
        white-space: nowrap;
        text-align: left;
        font-weight: bold;
        content: attr(data-label);
    }
}

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}


input[placeholder="Phone number"]::placeholder {
    opacity: 0;
}

/* Hide/Show Elements Responsively */
@media (max-width: 991px) {
    .signup-form-container input::placeholder {
        font-size: 11px;
    }

    .screenOverlay::after {
        font-size: 40px;
    }
}

@media (max-width: 575px) {
    .hide-mobile {
        display: none !important;
    }

    .ql-snow.ql-toolbar button svg,
    .ql-snow .ql-toolbar button svg {
        max-width: 13px;
    }

    .signup-form-container input::placeholder {
        font-size: 10px;
    }

    .screenOverlay::after {
        font-size: 24px;
    }
}

@media (min-width: 576px) and (max-width: 767px) {
    .hide-tablet {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .show-mobile {
        display: block !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .show-tablet {
        display: block !important;
    }
}

@media (min-width: 992px) {
    .show-desktop {
        display: block !important;
    }
}

/* Responsive Flex Utilities */
@media (max-width: 768px) {
    .flex-mobile-column {
        flex-direction: column !important;
    }

    .flex-mobile-wrap {
        flex-wrap: wrap !important;
    }
}

/* Modal positioning fix for fixed header */
/* .modal-dialog {
    margin-top: 80px !important;
    margin-bottom: 30px;
} */

/* Prevent Bootstrap's centering from interfering with header spacing */
/* .modal.show .modal-dialog {
    transform: none !important;
} */

/* Adjust centered modals to work with fixed header */
/* .modal-dialog-centered {
    min-height: calc(100vh - 110px) !important;
    margin-top: 80px !important;
} */

/* Scrollable modals should also respect header */
/* .modal-dialog-scrollable {
    max-height: calc(100vh - 110px) !important;
    margin-top: 80px !important;
} */

/* Responsive Modal Full Screen on Mobile */
@media (max-width: 576px) {
    /* .modal-dialog {
        margin: 0;
        margin-top: 70px !important;
        width: 100%;
        max-width: 100%;
        height: calc(100% - 70px);
    } */
    /* 
    .modal-content {
        height: 100%;
        border: 0;
        border-radius: 0;
    } */

    .modal-header {
        border-radius: 0;
        padding: 1rem;
    }

    .modal-body {
        overflow-y: auto;
    }
}

/* Responsive Cards */
@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }

    .card-body {
        padding: 1rem;
    }
}

/* Responsive Navigation */
@media (max-width: 991px) {
    .navbar-collapse {
        position: fixed;
        top: 0;
        left: -100%;
        width: 80%;
        height: 100vh;
        background: white;
        z-index: 1050;
        transition: left 0.3s ease-in-out;
        overflow-y: auto;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }

    .navbar-collapse.show {
        left: 0;
    }

    .navbar-nav {
        padding: 1rem;
    }

    .navbar-nav .nav-link {
        padding: 0.75rem 1rem;
        border-bottom: 1px solid #e9ecef;
    }

}

/* Responsive Forms */
@media (max-width: 576px) {
    .form-group {
        margin-bottom: 1rem;
    }

    .form-row {
        flex-direction: column;
    }

    .form-row .col,
    .form-row [class*="col-"] {
        max-width: 100%;
        margin-bottom: 1rem;
    }
}

/* Responsive Sidebar */
@media (max-width: 991px) {
    .sidebar-mobile-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040;
        display: none;
    }

    .sidebar-mobile-overlay.show {
        display: block;
    }
}

/* Note: Responsive typography rules consolidated in responsive-fixes.css */

/* Prevent horizontal scroll */
/* body {
    overflow-x: hidden;
} */

.container-fluid {
    padding-left: 15px;
    padding-right: 15px;
}

@media (max-width: 576px) {
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }
}
.main_menu {
    width: 50%;
}

/* Header Responsive Styles */
@media (max-width: 1199px) {
    .main_menu {
        width: 20%;
    }
}

.active-plan-icon {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .active-plan-icon span {
        display: none;
        /* hide name on mobile */
    }
}

/* Mobile header positioning fix */
@media (max-width: 991px) {

    /* .headerLogged {
        left: 0 !important;
        width: 100% !important;
    } */
    .main_menu {
        width: 100%;
    }
}

/* Mobile Navigation Toggle */
.mobile-nav-toggle {
    display: none;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    z-index: 1001;
}

.mobile-nav-toggle span {
    display: block;
    width: 25px;
    height: 3px;
    background: #0B3963;
    margin: 5px 0;
    transition: 0.3s;
}




.nav-link.outer_paragraph:hover svg path {
    fill: #1062AB;
    /* Icon path color on hover */
}


/* Hamburger Animation */
.mobile-nav-toggle.active span:nth-child(1) {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.mobile-nav-toggle.active span:nth-child(2) {
    opacity: 0;
}

.mobile-nav-toggle.active span:nth-child(3) {
    transform: rotate(45deg) translate(-5px, -6px);
}

/* Header Responsive Adjustments */
@media (max-width: 991px) {
    .mobile-nav-toggle {
        display: block;
    }

    /* Logo Adjustments */
    .navbar-brand img {
        max-width: 54px;
        height: auto;
    }

    /* Navigation Container */
    .nav-mobile-container {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 300px;
        height: 100vh;
        background: white;
        box-shadow: -2px 0 10px rgba(0, 0, 0, 0.1);
        transition: right 0.3s ease-in-out;
        z-index: 1000;
        overflow-y: auto;
        padding: 70px 20px 20px;
    }

    .nav-mobile-container.show {
        right: 0;
    }

    /* Mobile Overlay */
    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        display: none;
    }

    .mobile-nav-overlay.show {
        display: block;
    }

    /* Nav Items Mobile */
    .navbar-nav {
        flex-direction: column;
        width: 100%;
    }

    .navbar-nav .nav-item {
        width: 100%;
        margin: 5px 0;
    }

    .navbar-nav .dropdown-menu {
        position: static !important;
        width: 100%;
        box-shadow: none;
        border: 1px solid #e9ecef;
        margin-top: 10px;
    }

    /* Profile Dropdown Mobile */
    .navbar-nav .dropdown-toggle::after {
        float: right;
        margin-top: 8px;
    }

    /* Notification Icon */
    .notification-dropdown {
        margin-bottom: 20px;
    }
}

@media (max-width: 576px) {

    /* Even smaller logo on mobile */
    .navbar-brand img {
        max-width: 60px;
    }

    /* Adjust container padding */
    .container-fluid {
        padding-left: 10px;
        padding-right: 10px;
    }

    /* Smaller profile circle */
    /* .profile-circle {
        width: 30px !important;
        height: 30px !important;
        line-height: 30px !important;
        font-size: 14px;
    } */

    /* Mobile nav container full width */
    .nav-mobile-container {
        width: 100%;
        max-width: none;
    }
}

/* Fixed Header Styles */
/* .headerLogged {
    height: 70px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
} */

/* Sticky Header Adjustments */
.headerLogged.sticky {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Touch-friendly dropdowns */
@media (max-width: 991px) {
    .dropdown-toggle {
        padding: 12px 16px;
        min-height: 44px;
    }

    /* .dropdown-item {
        padding: 12px 20px;
        min-height: 44px;
    } */
}

/* Profile Dropdown Responsive Styles */
.profile-dropdown {
    position: relative;
}

/* .profile-dropdown .dropdown-menu {
    min-width: 160px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
} */

/* Mobile Profile Dropdown Fixes */
@media (max-width: 991px) {

    /* Show profile dropdown on mobile */
    .mobile-profile-dropdown {
        display: flex !important;
        position: relative;
    }

    /* Position dropdown menu properly on mobile */
    /* .profile-dropdown .dropdown-menu {
        position: absolute !important;
        top: 100% !important;
        right: 0 !important;
        left: auto !important;
        transform: none !important;
        margin-top: 8px;
        z-index: 1050;
    } */

    /* Ensure dropdown doesn't overflow viewport */
    /* .profile-dropdown .dropdown-menu.show {
        right: 10px !important;
        max-width: calc(100vw - 20px);
    } */

    /* Profile toggle button adjustments */
    .profile-dropdown .dropdown-toggle {
        padding: 4px;
        min-height: auto;
    }

    /* Profile circle mobile size */
    /* .profile-dropdown .rounded-circle {
        width: 32px !important;
        height: 32px !important;
        line-height: 32px !important;
        font-size: 14px;
    } */

    /* Profile role badge mobile */
    .profile-dropdown .profile-role-badge {
        font-size: 9px !important;
        padding: 0 6px !important;
        margin-top: -6px !important;
    }
}

@media (max-width: 576px) {

    /* Even smaller adjustments for very small screens */
    /* .profile-dropdown .rounded-circle {
        width: 28px !important;
        height: 28px !important;
        line-height: 28px !important;
        font-size: 12px;
    } */

    /* .profile-dropdown .dropdown-menu {
        right: 5px !important;
        font-size: 14px;
    } */

    /* .profile-dropdown .dropdown-item {
        padding: 10px 16px;
        min-height: 40px;
    } */
}

/* Mobile Navigation Icons Container */
.mobile-nav-icons {
    display: none;
    gap: 16px;
    align-items: center;
    margin-right: 10px;
}

@media (max-width: 991px) {
    .mobile-nav-icons {
        display: flex !important;
    }

    /* Hide tooltips on mobile */
    .mobile-nav-icons .tooltip {
        display: none !important;
    }
}

/* Responsive Header Container */
.header-responsive {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    position: relative;
}

@media (max-width: 768px) {
    .header-responsive {
        padding: 8px 0;
    }
}

/* Prevent header distortion */
/* header {
    min-height: 60px;
} */

@media (max-width: 991px) {
    /* header {
        overflow: visible !important;
    } */

    /* Ensure dropdowns don't affect header height */
    header .dropdown {
        position: static;
    }

    header .dropdown-menu {
        position: absolute !important;
    }
}

/* Additional dropdown safeguards */
/* .dropdown-menu {
    --bs-dropdown-zindex: 1050;
    --bs-dropdown-min-width: 10rem;
} */

/* Bootstrap overrides for mobile dropdown */
@media (max-width: 991px) {
    /* .dropdown-menu.show {
        display: block;
        position: absolute !important;
        inset: auto !important;
        transform: none !important;
    } */

    /* Prevent Bootstrap's responsive table behavior from affecting dropdowns */
    .dropdown {
        position: relative !important;
    }

    /* Ensure profile dropdown doesn't push content */
    .profile-dropdown {
        display: inline-block;
        vertical-align: top;
    }

    /* Fix notification dropdown on mobile */
    .notification-dropdown-mobile {
        right: 0 !important;
        left: auto !important;
        top: 100% !important;
        margin-top: 8px;
    }
}

.charity-tooltip {
    background-color: #000103 !important;
    /* dark blue */
    z-index: 10000 !important;
    color: #fff !important;
    font-size: 10px;
    padding: 4px 8px;
    border-radius: 4px;
}

.charity-tooltip .tooltip-arrow::before {
    border-bottom-color: #010306 !important;
    /* match arrow to background */
}


.profile-progress-pill {
    width: 120px;
    height: 28px;
    background: #e9ecef;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    border-radius: 20px;
    font-size: 12px;
}

.profile-progress-pill {
    height: 20px;
    width: 120px;

    border-radius: 6px;
    background: #eee;
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.03);
}

/* the fill layer — has two backgrounds: base gradient + stripes */
.progress-fill {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-size: 12px;
    line-height: 1;
    position: relative;
}

/* move the stripes horizontally to create motion */
.progress-fill.striped {
    animation: stripeMove 1s linear infinite;
}

@keyframes stripeMove {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 0, 40px 0;
    }
}


/* small label style (optional) */
.percent-label {
    padding: 0 6px;
    pointer-events: none;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.12);
}

/* stripe animation — translate only the second background by animating background-position */
@keyframes stripes-move {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        /* second layer moves to the right by 40px (width of stripe repeat) */
        background-position: 0 0, 40px 0;
    }
}

.striped-bg {
    animation: stripeMove 1s linear infinite;
}

@keyframes stripeMove {
    from {
        background-position: 0 0, 0 0;
    }

    to {
        background-position: 0 0, 40px 0;
    }
}
/**
 * ChatBadge Styles
 * Matches the existing NotificationBell styling
 */

.chat-badge-container {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.chat-badge-button {
  padding: 8px !important;
  color: #757575 !important;
  transition: all 0.2s ease !important;
}

.chat-badge-button:hover {
  background-color: rgba(18, 98, 171, 0.08) !important;
  color: #1262ab !important;
}

.chat-badge-icon {
  color: #757575;
  transition: color 0.2s ease;
}

.chat-badge-icon.has-unread {
  color: #1262ab;
}

.chat-badge-button:hover .chat-badge-icon {
  color: #1262ab;
}

/* Tooltip styling */
.chat-badge-tooltip .tooltip-inner {
  background-color: #212121;
  font-size: 12px;
  padding: 4px 8px;
}

.chat-badge-tooltip .tooltip-arrow::before {
  border-bottom-color: #212121;
}

/* Badge animation when there are unread messages */
.chat-badge-icon.has-unread {
  animation: chat-badge-pulse 2s infinite;
}

@keyframes chat-badge-pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/**
 * IncomingCallModal Styles
 */

.incoming-call-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.incoming-call-modal {
  background: #ffffff;
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  min-width: 320px;
  max-width: 400px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: slideUp 0.3s ease;
  position: relative;
}

@keyframes slideUp {
  from {
    transform: translateY(20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Avatar */
.incoming-call-modal__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  color: #9e9e9e;
}

/* Caller Info */
.incoming-call-modal__info {
  margin-bottom: 24px;
}

.incoming-call-modal__name {
  margin: 0 0 8px 0;
  font-size: 24px;
  font-weight: 600;
  color: #212121;
  font-family: 'Manrope', sans-serif;
}

.incoming-call-modal__type {
  margin: 0;
  font-size: 14px;
  color: #757575;
  font-family: 'Manrope', sans-serif;
}

/* Pulse Animation */
.incoming-call-modal__pulse {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  pointer-events: none;
}

.pulse-ring {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border: 2px solid #1262ab;
  border-radius: 50%;
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  opacity: 0;
}

.pulse-ring:nth-child(2) {
  animation-delay: 0.5s;
}

.pulse-ring:nth-child(3) {
  animation-delay: 1s;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.5;
  }
  100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Action Buttons */
.incoming-call-modal__actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}

.incoming-call-modal__btn {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  color: #ffffff;
}

.incoming-call-modal__btn:hover {
  transform: scale(1.1);
}

.incoming-call-modal__btn:active {
  transform: scale(0.95);
}

/* Reject Button */
.incoming-call-modal__btn--reject {
  background-color: #f44336;
}

.incoming-call-modal__btn--reject:hover {
  background-color: #d32f2f;
}

/* Accept Audio Button */
.incoming-call-modal__btn--accept-audio {
  background-color: #4caf50;
}

.incoming-call-modal__btn--accept-audio:hover {
  background-color: #388e3c;
}

/* Accept Video Button */
.incoming-call-modal__btn--accept-video {
  background-color: #1262ab;
}

.incoming-call-modal__btn--accept-video:hover {
  background-color: #0c3963;
}

/* Responsive */
@media (max-width: 480px) {
  .incoming-call-modal {
    margin: 20px;
    padding: 30px;
  }

  .incoming-call-modal__name {
    font-size: 20px;
  }

  .incoming-call-modal__btn {
    width: 56px;
    height: 56px;
  }
}