* {
  margin: 0;
  padding: 0;
}

* .dropdown-menu .dropdownOpen a.dropdown-item:first-child {
  padding: 0.35rem 1rem;
}

.dropdown-menu .dropdownOpen a.dropdown-item {
  padding-left: 30px;
}

ul.message-list.faxMessage li .title {
  left: 80px;
  padding: 0 40px 0 20px;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
}

a.subject.pageWrapper {
  display: flex;
}

a.subject.pageWrapper .date {
  position: initial;
  padding: 0;
  width: auto;
}

.date.actionBtnWrapper {
  padding-left: 50px !important;
}

.actionBtnWrapper a.dropdown-item {
  line-height: 22px;
}

.message-list li .col-mail-1 {
  width: 500px;
}

.message-list li .col-mail-2 {
  left: 500px;
}

.message-list li .col-mail-1 a.title span.senderName {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

/* Outbox CSS Start */
.outbox-wrapper .message-list li .col-mail-1 a.title span.senderName {
  max-width: 150px;
  min-width: 150px;
  padding-left: 15px;
  padding-right: 15px;
}

.outbox-wrapper .message-list li .col-mail-1 a.title span.senderName:hover {
  overflow: initial;
}

/* Outbox CSS End */
/* Compose Section CSS Start */
.compose-section .dz-message.needsclick {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.text-fax textarea.form-control {
  height: 150px;
  resize: inherit;
}

/* Compose Section CSS End */
/* Billing Module Css Start */
.terms button.btn.btn-primary.waves-effect.waves-light {
  color: #495057;
  background: transparent;
  border: none;
  box-shadow: none;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
}

button.addNewBtn.btn.btn-primary {
  width: 120px;
  margin-left: 10px;
}

.dateSearch label {
  margin-top: 10px;
}

.dateSearch input,
.dateSearch select {
  width: 300px;
}

.dataTables_wrapper .dateSearch .dataTables_filter {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.mb-3.terms {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.terms label {
  margin-right: 35px;
}

svg#SvgjsSvg2123,
svg g,
svg g path {
  color: #5156be;
  /* fill: #5156be; */
}

/* Billing Module Css End */
/* Invoice Page Css Start */
.pcr-app {
  display: none;
}

.btnsTwo button {
  border: none;
  background: transparent;
  color: #7b8190;
  font-size: 20px;
  margin: 0 5px;
  transition: 0.5s all ease-in-out;
}

.btnsTwo button:hover {
  opacity: 0.7;
}

.dateWrap input.form-control {
  width: 300px;
}

table.invoiceTable.table td,
table.invoiceTable.table th {
  white-space: nowrap;
}

.pagination .page-link {
  padding: 0.5rem 0.45rem;
  font-size: 12px;
}

/* Invoice Page Css End */
/* Phone Page Css Start */
.twitter-bs-wizard-tab-content table.table th,
.twitter-bs-wizard-tab-content table.table td {
  white-space: nowrap;
}

/* Phone Page Css End */
.pagination {
  justify-content: flex-end;
}

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

button.btn.btn-primary.back_button {
  margin-left: 10px;
}

.marginExtra {
  margin-bottom: 0px;
}

.marginBottom {
  border-bottom: none;
}

table.table .square-switch input[switch]+label {
  margin-bottom: 0;
}

table.table .square-switch {
  position: relative;
  top: 4px;
}

.card-header.marginBottom {
  padding-right: 0;
}

button.btn.btn-primary.backbtn,
a.btn.btn-primary.backbtn {
  margin-left: 10px;
}

.pt-20 {
  padding-top: 20px;
}

.pb-20 {
  padding-bottom: 20px;
}

.invoiceTable button.btn.btn-soft-success.waves-effect.waves-light:hover,
.invoiceTable button.btn.btn-soft-success.waves-effect.waves-light:active {
  color: #2ab57d !important;
  background-color: rgba(42, 181, 125, 0.1) !important;
  border-color: transparent !important;
}

.invoiceTable button.btn.btn-soft-danger.waves-effect.waves-light:hover,
.invoiceTable button.btn.btn-soft-danger.waves-effect.waves-light:active {
  color: #fd625e !important;
  background-color: rgba(253, 98, 94, 0.1) !important;
  border-color: transparent !important;
}

.dataTables_wrapper .dateSearch.searchDocument .dateFiler_filter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.card-body.searchDocument input#datepicker-range {
  margin-left: 0;
}

.alphabet {
  height: 35px;
  width: 35px;
  color: #ffffff;
  background-color: #f5707a;
  text-align: center;
  border-radius: 50px;
  float: left;
  line-height: 35px;
  margin-right: 10px;
}

p.underline {
  text-decoration: underline;
  margin-bottom: 0;
  font-size: 85%;
}

.textupload p {
  min-height: 300px;
}

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

@media only screen and (max-width: 767px) {

  .dateSearch input,
  .dateSearch select,
  .dateWrap input.form-control,
  div#datatable-buttons_filter .d-flex.align-items-start.flex-column {
    width: 100%;
    margin-left: 0 !important;
  }

  .dataTables_wrapper .dateSearch .dataTables_filter {
    align-items: flex-start;
  }
}

/* YourComponent.css */
.btn:focus,
.btn.focus {
  outline: none !important;
  box-shadow: none !important;
}

.fax-number-list {
  display: flex;
}

.fax-number {
  background: #ededed;
  margin-right: 10px;
  padding: 3px 8px;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.radio-button {
  display: flex;
  padding: 0.47rem 1.75rem 0.47rem 0;
  display: flex;
  padding: 0.47rem 1.75rem 0.47rem 0;
  border: 1px solid var(--bs-input-border);
  border-radius: 5px;
  justify-content: center;
}

.apexcharts-legend-series:nth-child(3) {
  display: none !important;
}

.react-tagsinput-input {
  width: 250px !important;
  margin-bottom: 0 !important;
  padding: 0 !important;

}

.custom-fax-number-input {
  border: 1px solid var(--bs-input-border) !important;
  border-radius: .25rem !important;
  padding: .47rem .75rem !important;
}

.react-tagsinput-tag {
  background-color: var(--bs-tag-bg, #0458b0) !important;
  /* Use your desired color or a CSS variable */
  color: white !important;
  /* Text color */
  border: 1px solid #0458b0 !important;
  font-size: 18px !important;
}

.react-tagsinput-remove {
  color: white !important;
  margin: 0 5px !important;
}

.custom-pager-buttons {
  display: flex;
  justify-content: flex-end;
  column-gap: 1em;
}

.custom-pager-buttons>li {
  list-style: none;
}


/* Add Fund Form */
.checkout-container {
  max-width: 450px;
  margin: 0 auto;
  padding: 25px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  background-color: #f9f9f9;
  font-family: Arial, sans-serif;
}

.checkout-title {
  font-size: 26px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 25px;
  color: #285384;
}

.checkout-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 50%;
  margin: auto;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.form-group label {
  font-size: 14px;
  font-weight: 600;
  color: #333;
}

.form-group input,
.form-group select {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 6px;
  outline: none;
  background-color: #fff;
  transition: border-color 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #007bff;
}

.card-element {
  padding: 12px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: #fff;
}

.submit-button {
  padding: 14px;
  border: none;
  background-color: #285384;
  color: white;
  font-weight: bold;
  font-size: 16px;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-button:hover {
  background-color: #1e4161;
}

.error-message {
  color: red;
  font-size: 14px;
  text-align: center;
  margin-top: 10px;
}

.amount-input,
.card-element {
  margin-bottom: 20px;
}

@media (max-width: 480px) {
  .checkout-container {
    padding: 15px;
  }

  .checkout-title {
    font-size: 22px;
  }

  .submit-button {
    font-size: 14px;
    padding: 10px;
  }
}

/* Add Fund Form Ends */


.skeleton-chart-circle {
  border-radius: 50%;
  background: linear-gradient(90deg, #e0e0e0 25%, #c0c0c0 50%, #e0e0e0 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2.5s linear infinite;
}

[data-layout-mode="dark"] .skeleton-chart-circle {
  background: linear-gradient(90deg, #3a3a3a 25%, #5a5a5a 50%, #3a3a3a 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 2.5s linear infinite;
}

@keyframes skeleton-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* skeleton.css */
.skeleton {
  background: linear-gradient(90deg,
      #f0f0f0 25%,
      #e0e0e0 37%,
      #f0f0f0 63%);
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
  border-radius: 4px;
  height: 16px;
}

@keyframes shimmer {
  0% {
    background-position: -400px 0;
  }

  100% {
    background-position: 400px 0;
  }
}

.ellipsis {
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.promo-table th,
.promo-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 160px;
  /* default for most cols */
  vertical-align: middle;
}

/* Custom widths per column if needed */
.promo-table th:nth-child(2),
.promo-table td:nth-child(2) {
  max-width: 140px;
  /* Example: From Number */
}

.promo-table th:nth-child(4),
.promo-table td:nth-child(4) {
  max-width: 220px;
}

/* App.css */
.Toastify__toast--success {
  background: #2ab57d !important; /* your custom green */
  color: white !important;        /* text color */
}


/* COMPOSE FAX CSS */
.custom-fax-number-input .react-tagsinput {
  height: 42px; /* match contact button height for alignment */
  max-height: 42px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px 6px 10px; /* keep left/right padding */
  padding-right: 140px; /* reserve space so tags/input don't go under the Contacts button */
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  border: 1px solid #ced4da;
  border-radius: .375rem;
  background: #fff;
}
.contact-button {
  height: 38px;
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px; /* consistent clickable area */
  margin-left: 0; /* ensure no negative offsets */
  font-size: 14px;
}

/* Responsive: stack on small screens to avoid cramped layout */
@media (max-width: 576px) {
  .d-flex.align-items-center.gap-3 {
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
  }
  .contact-button {
    width: 100%;
    min-width: 0;
    justify-content: center;
  }
  .custom-fax-number-input .react-tagsinput {
    padding-right: 10px; /* no need to reserve space when button stacks */
  }
}
.custom-fax-number-input .react-tagsinput-input {
  height: auto !important;
  border: none;
  box-shadow: none;
  outline: none;
  min-width: 140px;
  margin: 0;
}
.custom-fax-number-input .react-tagsinput-tag {
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 2px 8px;
  margin: 0 6px 0 0;
  white-space: nowrap;
}
/* ensure tag remove button doesn't increase height */
.custom-fax-number-input .react-tagsinput-remove {
  margin-left: 6px;
  line-height: 1;
}

/* Fax sending loader styles */
.fax-loader-button {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.fax-anim {
  width: 36px;
  height: 36px;
  display: inline-block;
}
.fax-paper {
  fill: none;
  stroke: #fff;
  stroke-width: 1.4;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.fax-line {
  stroke: #fff;
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: .95;
  transform-origin: center;
  animation: fax-line-move 1s linear infinite;
}
.fax-line.l2 { animation-delay: 0.08s; }
.fax-line.l3 { animation-delay: 0.16s; }

@keyframes fax-line-move {
  0% { transform: translateX(0) scaleX(1); opacity: .95 }
  50% { transform: translateX(6px) scaleX(.85); opacity: .6 }
  100% { transform: translateX(0) scaleX(1); opacity: .95 }
}

/* small 'paper flying' pulse */
.fax-paper-group { animation: fax-paper-pulse 1.2s ease-in-out infinite; }
@keyframes fax-paper-pulse {
  0% { transform: translateY(0) }
  50% { transform: translateY(-2px) }
  100% { transform: translateY(0) }
}

/* Fullscreen overlay loader */
.fullscreen-loader {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none; /* allow backdrop to block interactions while content centers */
}
.fullscreen-loader-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(2px);
  pointer-events: auto; /* block interactions */
}
.fullscreen-loader-content {
  position: relative;
  z-index: 2001;
  background: rgba(0,0,0,0.65);
  color: #fff;
  padding: 22px 30px;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 220px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
  pointer-events: none;
}
.fullscreen-loader .fax-anim {
  width: 64px;
  height: 64px;
}
.fullscreen-loader .loader-text {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

/* File preview card styles - cleaner and professional */
.file-card .card-body { padding: 10px; }
.file-thumb { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: #f7fbff; overflow: hidden; border: 1px solid #e9eef6; }
.file-thumb img, .file-thumb embed { width: 100%; height: 100%; object-fit: cover; }
.file-name { font-weight: 600; font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-size { font-size: 0.85rem; color: #6c757d; }
.file-remove-btn { min-width: 72px; }

/* Refined file card styles */
.file-card {
  border: 1px solid #eef3f9;
  border-radius: 10px;
  overflow: visible;
  transition: transform .18s ease, box-shadow .18s ease;
  background: #fff;
  /* size to content */
  width: auto;
  display: inline-block;
  min-width: 220px;
  max-width: 520px;
  margin-right: 12px; /* extra horizontal spacing between cards */
}
.file-card:hover { transform: translateY(-6px); box-shadow: 0 12px 30px rgba(19,24,33,0.06); }
.file-card .card-body { padding: 16px 14px; display: flex; gap: 18px; align-items: center; }
.file-thumb { width: 56px; height: 56px; min-width: 56px; border-radius: 8px; background: linear-gradient(180deg,#f8fbff,#eef7ff); border: 1px solid #e6f0fb; display: flex; align-items: center; justify-content: center; }
.file-thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-thumb i { font-size: 26px; }
/* Meta area grows; button pushed to the far right using margin-left:auto */
.file-meta { overflow: hidden; min-width: 0; flex: 1 1 auto; }
/* Single-line filename with ellipsis to avoid wrapping into narrow vertical text */
.file-name { font-weight: 700; font-size: 1rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
 .file-name[title] { cursor: default; }
 .file-size { font-size: 0.82rem; color: #6c757d; margin-top: 6px; }
/* file-type label for non-image previews */
.file-type-label { font-size: 0.9rem; color: #495057; margin-top: 4px; }

/* Pill-style remove button to match design (outlined rounded pill with icon) */
.file-remove-btn {
  margin-left: 12px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid rgba(255,77,79,0.18);
  color: #ff4d4f;
  background: rgba(255,255,255,0.9);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 48px;
  height: 36px;
}
.file-remove-btn i { font-size: 14px; }
.file-remove-btn:hover { background: rgba(255,77,79,0.03); }

 /* responsive tweaks */
 @media (max-width: 576px) {
   .file-card .card-body { gap: 10px; }
   .file-thumb { width: 48px; height: 48px; min-width: 48px; }
   .file-name { white-space: nowrap; }
 }