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




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

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

.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;
    padding: 6px;
    border-radius: 50%;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}
/* 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: 'Inter', 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);
  }
}
/* 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;
}

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

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

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

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

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