body {
  margin: 0px;
  padding: 0px;
}
.top-navbar {
  width: 100%;
  background: #ffffff;
  padding: 12px 0;
}
.nav-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.nav-logo img {
  height: 70px;
}
.nav-right {
  display: flex;
  align-items: center;
  gap: 25px;
}
.help-dropdown {
  position: relative;
  font-weight: 600;
  cursor: pointer;
}
.help-dropdown span {
  display: flex;
  align-items: center;
  gap: 6px;
}
.help-menu {
  position: absolute;
  top: 36px;
  right: 0;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 6px;
  min-width: 180px;
  display: none;
}
.help-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  color: #333;
  text-decoration: none;
  font-size: 14px;
}
.help-menu a:hover {
  background: #f2f5ff;
}

.help-dropdown:hover .help-menu {
  display: block;
}
.nav-icon i {
  font-size: 20px;
  cursor: pointer;
}
.nav-user {
  width: 38px;
  height: 38px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nav-user i {
  font-size: 18px;
}

.signup-section {
  padding: 60px 20px;
}

.signup-container {
  display: flex;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
}

.signup-left {
  flex: 1 1 50%;
}

.signup-left img {
  width: 100%;
  border-radius: 10px;
  height: auto;
}

.signup-form-container {
  max-width: 500px;
  margin: 0 auto;
  background: #fff;
  padding: 30px 20px;
  border-radius: 20px;
  height: auto;
  box-shadow: 0px 5px 8px #e2e2e2;
}

.signup-form-container h2 {
  font-size: 24px;
  text-align: center;
}

.signup-form-container p {
  font-size: 1rem;
  margin-bottom: 20px;
}

.account-type-buttons {
  border-radius: 30px;
  display: flex;
  margin-bottom: 20px;
  border: 1px solid #963511;
  padding: 5px;
}

.account-type-buttons button {
  flex: 1;
  padding: 15px;
  border: none;
  background: #fff;
  color: #963511;
  font-weight: 600;
  cursor: pointer;
  border-radius: 25px;
  transition: 0.3s;
}

.account-type-buttons button.active {
  background: #963511;
  color: #fff;
}

.form-field {
  margin-bottom: 20px;
}

.form-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 600;
}

.mobile-input {
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  height: 35px;
  overflow: hidden;
}

.mobile-input span {
  background: #eee;
  padding: 8px 10px;
}

.mobile-input input {
  border: none;
  border-radius: 4px;
}
.mobile-input input:hover {
  border: none !important;
  outline: none;
  background: none;
}

#otp-field input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 5px;
  outline: none;
}

.continue-btn {
  display: inline-block;
  text-align: center;
  background: #963511;
  color: #fff;
  border: none;
  padding: 12px 20px;
  border-radius: 5px;
  text-decoration: none;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}

.continue-btn.disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Responsive */
@media (max-width: 900px) {
  .signup-container {
    flex-direction: column;
    align-items: center;
  }

  .signup-left img {
    max-width: 100%;
  }
}

.strip-nav {
  background: #fff;
  width: 100%;
  padding: 12px 0;
  border-top: 1px solid #e2e2e2;
  box-shadow: 0px 6px 20px rgba(0, 0, 0, 0.04);
}

.strip-container {
  max-width: 1200px;
  margin: auto;
  padding: 0 20px;
  display: flex;
  align-items: center;
}
.tcs-applic {
  border: 1px solid #ddd;
  padding: 15px;
  border-radius: 10px;
}
.arrow-warning {
  padding: 32px 0px 0px;
}
.opening-balance {
  display: flex;
  align-items: center;
  height: 35px;
  overflow: visible;
  border-radius: 4px;
  border: 1px solid #ddd;
}

.change-btn {
  margin-top: 30px;
}
.change-btn a {
  text-decoration: none !important;
  color: #fff !important;
  background: #007bff;
  padding: 8px 10px;
  border-radius: 5px;
}
.balance-dropdown {
  position: relative;
  display: flex;
  gap: 5px;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
}
.balance-dropdown-menu {
  display: none;
  flex-direction: column;
  position: absolute;
  z-index: 9999;
  width: 100%;
  text-align: center;
  top: 100%;
  left: 0;
  background: #fff;
  border: 1px solid #ddd;
}

.dr-span {
  display: flex;
  gap: 5px;
  align-items: center;
  background: #f5f5f5;
  border-left: 1px solid #ddd;
}
.opening-balance span {
  padding: 5px 9px;
}
.opening-balance input {
  border: none;
  border-radius: 0px;
  outline: none;
  border: 1px solid #ddd;
  border-left: 1px solid #ddd;
}
.strip-container h4 {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
  padding-right: 20px;
  border-right: 2px solid #d6d6d6;
  line-height: 1;
}

.company-gst-sec {
  padding: 60px 20px;
}

.company-gst-container {
  max-width: 1000px;
  margin: auto;
  background: #fff;
  border: 1px solid #ccc;
}
.col-md-10 {
  width: 85.333333% !important;
}
.check-phase {
  display: none;
  justify-content: space-between;
  align-items: center;
}

.company-gst-sec {
  padding: 70px 20px;
  background: #f6f8ff;
}

.company-gst-container {
  max-width: 800px;
  margin: auto;
  background: #fff;
  padding: 40px;
  border-radius: 16px;
  border: 1px solid #e3e6ff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2);
}

.company-gst-container h2 {
  font-size: 28px;
  margin-bottom: 8px;
}

.sub-text {
  color: #666;
  margin-bottom: 30px;
}

.btn-gst {
  display: flex;
  gap: 15px;
  margin-bottom: 30px;
}

.btn-gst-contain {
  flex: 1;
  border: 2px solid #dce0ff;
  padding: 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  font-weight: 600;
  color: #333;
  transition: 0.3s;
}

.btn-gst-contain i {
  font-size: 20px;
  color: #e62914;
}

.btn-gst-contain.active {
  border-color: #b64508;
  background: #eef1ff;
}

.btn-gst-contain:hover {
  border-color: #c33c17;
}

.gst-input-box label {
  font-weight: 600;
  display: block;
  margin-bottom: 8px;
}

.gst-input-row {
  display: flex;
  gap: 12px;
}

.gst-input-row input {
  flex: 1;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 8px;
  outline: none;
}

.create-btn {
  background: #c84b15;
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
}

.manual-box {
  display: none;
}

.manual-btn {
  display: inline-block;
  background: #ff4d4d;
  color: #fff;
  padding: 12px 28px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  margin-top: 20px;
}

.create-company-section {
  padding: 30px 8%;
}

.create-company-container {
  max-width: 800px;
  margin: auto;
  background: #fff;
  padding: 30px;
  border-radius: 10px;
  border: 1px solid #eee;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);
}

.create-company-title {
  text-align: center;
  font-size: 34px;
  font-weight: 700;
}

.create-company-subtitle {
  text-align: center;
  color: #666;
  margin-bottom: 20px;
}

/* Toggle cards */
.company-type-switch {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}

.company-type-card {
  flex: 1;
  max-width: 320px;
  padding: 6px 20px;
  border-radius: 8px;
  border: 2px solid #dbe3ff;
  display: flex;
  gap: 12px;
  align-items: center;
  cursor: pointer;
  font-weight: 600;
  transition: 0.3s;
}

.company-type-card i {
  font-size: 26px;
  color: #be0f0f;
}

.company-type-card.active {
  background: #c70e08;
  color: #fff;
  border-color: #c12a10;
}

.company-type-card.active i {
  color: #fff;
}

/* GST box */
.gst-create-box {
  margin-bottom: 30px;
}

.gst-input-row {
  display: flex;
  gap: 15px;
  margin-top: 10px;
}

.gst-input-row input {
  flex: 1;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.primary-create-btn {
  background: #a91f0a;
  color: #fff;
  padding: 14px 26px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 600;
}

/* Form grid */
.basic-form-title {
  margin-bottom: 15px;
  font-size: 24px;
}

.basic-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.basic-info-form {
  display: none;
}

.basic-field {
  display: flex;
  flex-direction: column;
}

.basic-field label {
  font-weight: 600;
  margin-bottom: 6px;
}

.basic-field input {
  height: 30px;
  border-radius: 6px;
  border: 1px solid #ccc;
  padding: 0px 5px;
}
.basic-field select {
  height: 33px;
  border-radius: 6px;
  padding: 0px 5px;
  border: 1px solid #ccc;
}

.full-width {
  grid-column: 1/3;
}

.basic-form-actions {
  margin-top: 35px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.btn-reset {
  background: #e6e9f5;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  text-decoration: none;
}

.btn-submit {
  background: #4f6ef7;
  color: #fff;
  padding: 12px 26px;
  border: none;
  border-radius: 10px;
  font-weight: 600;
  text-decoration: none;
}

/* Mobile */
@media (max-width: 768px) {
  .basic-form-grid {
    grid-template-columns: 1fr;
  }

  .full-width {
    grid-column: 1/2;
  }

  .company-type-switch {
    flex-direction: column;
  }
}

/* RIGHT */

.nav-right {
  display: flex;
  align-items: center;
  gap: 16px;
  color: #444;
  font-size: 18px;
}

.help {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  cursor: pointer;
}

.middle-side-dash {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.vendor-date-sync {
  border: none;
  outline: none;
  background: transparent;
  font-size: 12px;
  padding: 0px 10px;
  color: #333;
  cursor: pointer;
  font-weight: 500;
}

.vendor-date-sync {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 20px;
  background-image: url("data:image/svg+xml,%0A%3Csvg width='8' height='4' viewBox='0 0 8 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.00033 4.00033L0.666992 0.666992H7.33366L4.00033 4.00033Z' fill='%23181D27'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-position: right center;
}

.dashboard-card {
  background: #fff;
  padding: 16px 10px;
  margin: 0px 12px 15px;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.09);
  border: 2px solid #fff;
}

.middle-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  margin-bottom: 0px;
}

.middle-top.no-shadow {
  box-shadow: none;
  padding: 10px 14px 6px;
}

.middle-top span {
  border: 1px solid #a0300b;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}
.middle-top h4 {
  font-size: 18px;
  color: #111;
  font-weight: 600;
}
.dropdown-vendor {
  position: relative;
}
.dropdown-vendor-inside {
  position: absolute;
  width: 100%;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  background: #fff;
  display: none;
  z-index: 999;
  border: 1px solid #eee;
  border-radius: 4px;
}
.dropdown-vendor-inside ul {
  list-style: none;
  padding: 3px 10px;
  text-align: center;
}
.dropdown-vendor-inside ul li {
  display: flex;
  flex-direction: column;
  padding: 5px 5px;
  align-items: flex-start;
  justify-content: center;
}
.dropdown-vendor-inside ul li a {
  text-decoration: none;
  font-size: 14px;
  color: #222 !important;
}
.operation-middle {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  padding: 0px 12px 12px;
}

.operation-card {
  display: flex;
  gap: 12px;
  align-items: center;
  border: 2px solid #fff;
  padding: 14px;
  border-radius: 10px;
  transition: 0.4s;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.08);
}
.operation-card:hover {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.op-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  font-size: 20px;
}

.blue {
  color: #b01111;
}

.purple {
  color: #ff4e4e;
}

.red {
  color: #e53935;
}

.soft-red {
  background: #fff5f5;
  border-color: #d31c1c;
}

.op-text span {
  font-weight: 600;
  font-size: 17px;
}
.op-text p {
  font-size: 13px;
  margin-bottom: 0px;
}

.revenue-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.revenue-box {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 2px solid #fff;
  padding: 14px;
  border-radius: 10px;
  transition: 0.4s;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.08);
}
.revenue-box:hover {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.revenue-box i {
  color: #1fa750;
  font-size: 20px;
}
.menu-icon-head {
  display: none;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(135deg, #ff4d4d, #ff1a1a);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.quick-access-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 14px;
}

.quick-card {
  border: 2px solid #fff;
  border-radius: 10px;
  padding: 14px 8px;
  text-align: center;
  display: flex;
  transition: 0.4s;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.08);
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  transition: 0.2s;
}
.quick-card h4 {
  font-size: 14px;
  font-weight: 600;
  color: #222;
}

.quick-card i {
  font-size: 22px;
  color: #bc0d0d;
}

.quick-card:hover {
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
  transform: scale(1.02);
}

.income-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.income-box {
  display: flex;
  gap: 14px;
  background: #fff;
  align-items: center;
  border-radius: 8px;
  padding: 20px;
  transition: 0.4s;
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.08);
}
.income-box:hover {
  transform: scale(1.02);
  box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.2);
}
.income-box i {
  font-size: 22px;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}

.dashboard-revenue {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.revenue-flow {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}
.revenue-box1 {
  display: flex;
  gap: 8px;
  align-items: center;

  padding: 20px;
}

.revenue-box1 i {
  font-size: 16px;
  background: #ccc;
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 5px;
}
.revenue-head {
  font-size: 16px;
}

.dashboard-revenue1 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  margin-top: 10px;
  padding: 0px 0px 60px;
}
.middle-sec {
  display: flex;
  gap: 5px;
}

.end-side-dash {
  width: 100%;
  padding: 0px 10px;
}
.img-side-dash {
  width: 100%;
  height: 140px;
}
.img-side-dash img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.setup-guide-card {
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  box-shadow: 0 6px 25px rgba(0, 0, 0, 0.08);
}

.setup-guide-card h4 {
  font-size: 20px;
  margin-bottom: 4px;
}

.setup-subtitle {
  color: #666;
  font-size: 14px;
  margin-bottom: 15px;
}

.setup-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.setup-step {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid #e3e7ff;
  border-radius: 6px;
  cursor: pointer;
  background: #fafbff;
  font-size: 14px;
}

.setup-step input {
  width: 16px;
  height: 16px;
}

.setup-step:hover {
  background: #f0f3ff;
}

.setup-progress-text {
  margin-top: 15px;
  font-size: 14px;
  color: #444;
}

.setup-progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e9ff;
  border-radius: 20px;
  margin-top: 8px;
}

.setup-progress-fill {
  width: 16.66%;
  height: 100%;
  background: #4f6cff;
  border-radius: 20px;
}

.help-section {
  background: #fff;
  padding: 18px;
  border-radius: 10px;
  border: 1px solid #e5e9ff;
  margin: 10px 0px;
}

.help-section h4 {
  font-size: 20px;
  margin-bottom: 4px;
}

.help-subtitle {
  font-size: 14px;
  color: #666;
  margin-bottom: 16px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.help-box {
  border: 1px solid #e3e7ff;
  border-radius: 8px;
  padding: 16px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  transition: 0.2s;
  background: #fafbff;
}

.help-box i {
  font-size: 22px;
  color: #4f6cff;
}

.help-box span {
  font-size: 14px;
  font-weight: 500;
}

.help-box:hover {
  background: #f0f3ff;
}

.feedback-box {
  background: #fff;
  border: 1px solid #e5e9ff;
  padding: 10px;
  border-radius: 10px;
}

.feedback-box h4 {
  font-size: 16px;
  margin-bottom: 4px;
  font-weight: 600;
}

.feedback-box p {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.rating-stars {
  display: flex;
  gap: 10px;
}

.rating-stars i {
  font-size: 26px;
  color: #ccc;
  cursor: pointer;
  transition: 0.2s;
}

.rating-stars i:hover {
  color: #ffc107;
}

.follow-box {
  background: #fff;
  border: 1px solid #e5e9ff;
  padding: 10px;
  border-radius: 10px;
}

.follow-box h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.follow-box p {
  font-size: 14px;
  color: #666;
  margin-bottom: 8px;
}

.social-icons {
  display: flex;
  gap: 14px;
}

.social-icons a {
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  border: 1px solid #f1c1c1;
  color: #d43f3f;
  font-size: 18px;
  transition: 0.25s;
}

.social-icons a:hover {
  background: #d43f3f;
  color: #fff;
}

.activity-box {
  background: #fff;
  border: 1px solid #e5e9ff;
  padding: 10px;
  border-radius: 10px;
}

.activity-title {
  font-size: 16px;
  margin-bottom: 8px;
  font-weight: 600;
}

.activity-item {
  display: flex;
  gap: 14px;
  padding: 3px 0;
  border-bottom: 1px solid #f0f2ff;
}

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

.activity-number {
  width: 34px;
  height: 34px;
  background: #f2f4ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #4450ff;
  flex-shrink: 0;
}

.activity-content strong {
  display: block;
  font-size: 14px;
}

.activity-date {
  display: block;
  font-size: 12px;
  color: #888;
  margin: 2px 0px;
}

.activity-content p {
  font-size: 12px;
  margin: 0;
}

.nav-side-dash {
  background: #e7e8ec;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.nav-side-dash1 {
  background: #fff;
  width: 100%;
}
.nav-side-content1 {
  padding: 10px 20px 5px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  background: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.08);
}
.nav-side-content-left {
  display: flex;
  align-items: center;
  gap: 20px;
}
.nav-side-content-left h4 {
  padding-right: 20px;
  font-size: 18px;
  margin-top: 5px;
}

.nav-side-content {
  padding: 10px 10px 5px !important;
  display: flex;
  align-items: center;
  background: #fff;
  gap: 5px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.08);
}
.nav-side-content h4 {
  font-size: 18px;
  margin-top: 5px;
}
.vendor-dropdown input {
  font-size: 11px !important;
}
.nav-side-content i {
  font-size: 18px;
}
.account-main {
  height: 90vh;
  background: #fff;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.account-tabs {
  display: flex;
  gap: 12px;
}

.tab-btn {
  background: transparent;
  border: 1px solid #dcdcdc;
  padding: 8px 22px;
  border-radius: 8px;
  font-size: 14px;
  cursor: pointer;
}

.tab-btn.active {
  border-color: #e31b1b;
  color: #e31b1b;
  font-weight: 600;
}

.tab-divider {
  width: 100%;
  height: 1px;
  background: #e2e2e2;
  margin: 20px 0;
}

#payFull {
  height: 12px !important;
}

.account-center {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.video-box {
  width: 520px;
  max-width: 100%;
  aspect-ratio: 16/9;
  border-radius: 14px;

  border: 1px solid #e2e2e2;
  margin-bottom: 22px;
}

.video-box iframe {
  width: 100%;
  height: 100%;
}

.account-center h3 {
  font-size: 22px;
  font-weight: 600;
}

.account-center p {
  color: #666;
  margin-bottom: 22px;
}

.center-actions {
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
}

.btn-create {
  background: #e31b1b;
  color: #fff;
  border: none;
  padding: 7px 15px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: inline-block;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(227, 27, 27, 0.3);
}
.btn-create:hover {
  color: #fff;
}

.btn-import {
  background: transparent;
  border: 1px solid #e31b1b;
  color: #e31b1b;
  padding: 3px 13px;
  border-radius: 3px;
}
.account-help {
  border: 1px solid #e2e2e2;
  padding: 20px;
  border-radius: 12px;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}
.account-help h4 {
  font-size: 16px;
  margin-bottom: 14px;
}

.help-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

.help-item {
  border: 1px solid #ddd;
  padding: 12px 14px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  transition: 0.2s;
}

.help-item:hover {
  border-color: #e31b1b;
  color: #e31b1b;
}

.help-item i {
  font-size: 18px;
  color: #e31b1b;
}

.tab-divider {
  width: 100%;
  height: 1px;
  background: #e2e2e2;
  margin: 20px 0;
}

.tab-content {
  display: none;
}

.tab-content.active {
  display: block;
}
.default-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding: 0px 15px;
}

.tool-icons {
  display: flex;
  gap: 10px;
}

.tool-box {
  border: 1px solid #ddd;
  padding: 8px 12px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 16px;
}

.tool-box:hover {
  background: #f2f4ff;
}

.filter-box {
  border: 1px solid #ddd;
  padding: 8px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
}

.table-wrapper {
  border: 1px solid #e2e2e2;
  border-radius: 12px;
  overflow: hidden;
}

.default-table {
  width: 100%;
  border-collapse: collapse;
}

.default-table th {
  background: #f5f7ff;
  padding: 12px;
  font-size: 14px;
  text-align: left;
}

.default-table td {
  padding: 12px;
  border-top: 1px solid #eee;
  font-size: 14px;
}

.default-table tr:hover {
  background: #fafbff;
}

.profile-dash {
  background: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2);
  padding: 8px;
}
.profile-dash h2 {
  font-size: 20px;
  padding-left: 30px;
}

/* Main Box */
.profile-sec-dash {
  padding: 40px 0px;
}
.profile-dash-form {
  max-width: 1000px;
  background: #fff;
  margin: auto;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
}

/* Tabs */
.tab-buttons {
  display: flex;
  gap: 15px;
  margin-bottom: 25px;
}

.tab-buttons button {
  padding: 10px 20px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  cursor: pointer;
  border-radius: 4px;
  font-weight: 500;
}

.tab-buttons button.active {
  background: #0d6efd;
  color: #fff;
  border-color: #0d6efd;
}

/* Heading */
.section-title {
  font-size: 22px;
  margin-bottom: 20px;
}

/* Form Layout */
.form-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.changing-num {
  display: flex;
  flex-direction: column;
}
.changing-num input {
  width: 65%;
}
.changing-num button {
  padding: 8px 15px;
  background: #0d6efd;
  border: none;
  color: #fff;
  font-weight: 600;
}

.form-group label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}
.radio-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 0px 10px;
}
.radio-btn input {
  height: 30px !important;
}
.radio-group {
  display: flex;
  gap: 10px;
}
.form-group {
  margin-bottom: 10px;
}
.form-group input {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}
.form-group textarea {
  height: 85px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}
.otp-sec {
  display: flex;
  width: 100%;
  flex-direction: column;
}
.otp-sec input {
  width: 70%;
}
.otp-sec button {
  padding: 8px 15px;
  background: #0d6efd;
  color: #fff;
  font-weight: 600;
  border-radius: 4px;
  border: none;
}

.form-group input:focus {
  border-color: #0d6efd;
}

/* Buttons */
.form-actions {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
  gap: 15px;
}

.cancel-btn {
  background: #e31b1b;
  border: none;
  padding: 6px 10px;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.save-btn {
  background: #e31b1b;
  color: #fff;
  border: none;
  padding: 6px 15px;
  border-radius: 4px;
  cursor: pointer;
}

/* Hide sections */
.tab-content {
  display: none;
}

.xenon-form {
  padding: 7px;
  background: #f7eeee;
}
.xenon-account-wrapper {
  padding: 20px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.xenon-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.xenon-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.xenon-field label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}

.xenon-field select {
  color: gray;
  font-size: 13px;
  height: 35px;
  border-radius: 4px;
  border: 1px solid #ccc;
}

.xenon-input {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  outline: none;
  color: gray;
}

.xenon-radio-group div {
  display: flex;
  gap: 15px;
  margin-top: 5px;
}

.xenon-section-title {
  margin: 25px 0 10px;
  font-size: 18px;
  border-bottom: 1px solid #ddd;
  padding-bottom: 5px;
}

.xenon-action-row {
  display: flex;
  justify-content: flex-end;
  gap: 15px;
  margin-top: 20px;
}

.xenon-btn-cancel {
  background: #ccc;
  border: none;
  padding: 5px 18px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
  text-decoration: none;
}

.xenon-btn-save {
  background: #e31b1b;
  color: #fff;
  text-decoration: none;
  border: none;
  padding: 5px 18px;
  border-radius: 4px;
  font-size: 13px;
  cursor: pointer;
}

.xenon-btn-save:hover {
  background: #0056b3;
}

.zeno-import-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.zeno-import-box {
  width: 800px;
  max-width: 95%;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
  animation: fadeIn 0.3s ease;
}
.zeno-import-header {
  background: #f9f9f9;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.zeno-import-header h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  padding: 10px;
}

.zeno-close {
  font-size: 22px;
  cursor: pointer;
  padding: 5px 10px;
}

.zeno-import-info {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  margin: 15px 0;
  font-size: 15px;
  font-weight: 500;
  padding: 0px 20px;
  line-height: 18px;
}
.zeno-import-info span a {
  font-size: 12px !important;
  text-decoration: none;
  color: #28a745 !important;
}
.zeno-import-info i {
  font-size: 26px;
  color: #28a745;
}

.zeno-file-wrapper {
  margin-bottom: 10px;
  padding: 0px 20px;
}

.zeno-file-label {
  display: flex;
  align-items: center;
  padding: 8px;
  gap: 12px;
  border-radius: 4px;
  cursor: pointer;
}

.zeno-file-label input {
  display: none;
}

.zeno-file-name {
  color: #555;
  font-size: 13px;
}

.zeno-choose-btn {
  color: #28a745;
  border: 1px solid #28a745;
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 13px;
}

.zeno-file-size {
  font-size: 12px;
  margin: 0px 20px;
  border-bottom: 1px solid #ddd;
  line-height: 20px;
  color: #888;
  margin-bottom: 15px;
}

.zeno-tips {
  padding: 0px 20px;
}
.zeno-tips h4 {
  margin: 0 0 8px;
  font-size: 14px;
}

.zeno-tips ul {
  padding-left: 18px;
  margin: 0;
  font-size: 13px;
  color: #555;
}

.zeno-action-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin: 20px;
}

.zeno-btn-cancel {
  background: #ccc;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
}

.zeno-btn-upload {
  background: #28a745;
  color: #fff;
  border: none;
  padding: 8px 14px;
  border-radius: 4px;
  cursor: pointer;
}

@keyframes fadeIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.banks-sec {
  background: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.09);
  border-radius: 10px;
}

.nova-bank-empty {
  text-align: center;
  padding: 130px 0px 0px;
  margin: auto;
}
.nova-bank-image img {
  width: 120px;
  margin-bottom: 15px;
  opacity: 0.9;
}
.nova-bank-title {
  font-size: 20px;
  margin-bottom: 8px;
  font-weight: 600;
  color: #222;
}
.nova-bank-text {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}
.nova-bank-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  font-size: 14px;
  transition: 0.3s;
}

.nova-bank-btn:hover {
  background: #0056b3;
  color: #fff;
}
.account-help-sec {
  padding: 30px 0px;
}

.my-content {
  display: block !important;
  padding: 10px 0px 0px;
  background: #efeffc;
  width: 100%;
  height: 100%;
}

.ledger-scroll-box {
  width: 100%;
  max-width: 99%;
  overflow-y: auto;
  background: #fff;
  margin: auto;
  border-radius: 8px;
}
.ledger-scroll-box thead tr th:first-child {
  border-top-left-radius: 8px;
}

.ledger-scroll-box thead tr th:last-child {
  border-top-right-radius: 8px;
}
.ledger-scroll-box tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
.ledger-scroll-box tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.ledger-scroll-box::-webkit-scrollbar {
  height: 5px;
}
.ledger-scroll-box::-webkit-scrollbar-track {
  background: #f1f3f7;
}
.ledger-scroll-box::-webkit-scrollbar-thumb {
  background: #c5ccd8;
  border-radius: 10px;
}
.ledger-scroll-box::-webkit-scrollbar-thumb:hover {
  background: #9ea7b8;
}
.ledger-scroll-box {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.04);
  font-family: "Inter", sans-serif;
  border: 1px solid #ccc;
}
.ledger-scroll-box thead {
  background: #f4f7fb;
}
.ledger-scroll-box th {
  font-size: 12px;
  line-height: 18px;
  font-weight: 500;
  color: #181d27;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 3px 16px;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background: #f4f7fb;
  min-width: 200px;
}

.ledger-scroll-box td {
  font-size: 12px;
  line-height: 18px;
  color: #181d27;
  border-bottom: 1px solid #ccc;
  border-right: 1px solid #ccc;
  background: #fff;

  overflow: visible !important;
}
.ledger-scroll-box td a {
  text-decoration: none;
}
.ledger-scroll-box th:last-child {
  min-width: 120px;
}

.ledger-scroll-box tbody tr {
  transition: all 0.2s ease;
}

.ledger-scroll-box tbody tr:hover td {
  background: #f6f9ff;
}

sticky-action i {
  font-size: 20px;
  color: #e31b1b;
}

.ledger-sticky-table tbody tr:hover .sticky-action {
  background: #f6f9ff;
}
.ledger-sticky-table thead tr th:first-child {
  border-top-left-radius: 8px;
}

.ledger-sticky-table thead tr th:last-child {
  border-top-right-radius: 8px;
}
.ledger-sticky-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
.ledger-sticky-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}
.ledger-sticky-table td {
  padding: 10px 15px;
}
.ledger-sticky-table {
  border-collapse: separate;
  border-spacing: 0;
}
.jv-table-wrapper thead tr th:first-child {
  border-top-left-radius: 8px;
}
.jv-table-wrapper thead tr th:last-child {
  border-top-right-radius: 8px;
}
.jv-table-wrapper tbody tr td:last-child {
  border-top-left-radius: 8px;
}
.jv-table-wrapper tbody tr td:first-child {
  border-top-left-radius: 8px;
}
.action-edit {
  color: #2864be;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  margin: 0 6px;
  transition: 0.2s;
}
.action-edit:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
.menu-container {
  position: relative;
  display: inline-block;
}

.menu-icon {
  cursor: pointer;
  font-size: 18px;
}

.account-menu-box {
  display: none;
  position: absolute;
  right: 0;
  top: 25px;
  list-style: none;
  padding: 5px 0;
  margin: 0;
  background: #fff;
  border: 1px solid #ccc;
  width: 180px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.account-menu-box li a {
  display: block;
  padding: 8px 12px;
  text-decoration: none;
  color: black;
}

.account-menu-box li a:hover {
  background: #f2f2f2;
}

.action-edit {
  color: #e31b1b;
  text-decoration: none;
  font-weight: 500;
}

.nova-transporter-wrapper {
  max-width: 1150px;
  margin: 20px auto;
  background: #fff;
  padding: 25px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.nova-transporter-heading {
  margin-bottom: 20px;
  font-size: 20px;
  font-weight: 600;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
}

.nova-trans-row {
  display: flex;
  gap: 20px;
  margin-bottom: 15px;
  flex-wrap: wrap;
}

.nova-trans-field {
  flex: 1;
  min-width: 220px;
  display: flex;
  flex-direction: column;
}

.nova-trans-field label {
  font-size: 14px;
  margin-bottom: 5px;
  font-weight: 600;
  color: #333;
}

.nova-trans-input {
  padding: 9px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.nova-trans-input:focus {
  border-color: #007bff;
  outline: none;
}

/* Buttons */
.nova-trans-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.nova-trans-cancel {
  background: #ccc;
  border: none;
  padding: 9px 18px;
  border-radius: 4px;
  cursor: pointer;
}

.nova-trans-save {
  background: #007bff;
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 4px;
  cursor: pointer;
}

.nova-trans-save:hover {
  background: #0056b3;
}
.neo-filter-box {
  display: inline-flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  overflow: hidden;
  max-width: 250px;
}

/* Icon */
.neo-filter-icon {
  padding: 0 10px;
  color: #666;
  font-size: 16px;
}

.neo-filter-select {
  border: none;
  outline: none;
  padding: 6px 10px;
  font-size: 14px;
  background: transparent;
  cursor: pointer;
  width: 100%;
  min-width: 130px;
}

.report-sec-container {
  background: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.09);
  display: flex;
  justify-content: space-between;
  padding: 5px 8px;
}
.report-sec-container h4 {
  font-size: 18px;
  margin-top: 5px;
}
.report-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  padding: 30px 0px 10px;
}
.no-item {
  text-align: center;
}
.entry-right {
  text-align: right;
  margin-top: 24px;
}
.entry-right input {
  color: gray;
  border: 1px solid #ccc;
  height: 35px;
  border-radius: 4px;
  padding: 0px 10px;
}

.report-tab {
  padding: 6px 10px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  cursor: pointer;
  border-radius: 4px;
}

.report-tab.active {
  background: rgb(195, 15, 24);
  color: #fff;
}

.report-content {
  display: none;
}

.report-content.active {
  display: block;
}

.report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.report-box {
  border: 1px solid #795f62;
  border-radius: 6px;
  background: #fff;
  height: 300px;
  display: flex;
  flex-direction: column;
}

.report-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-bottom: 2px solid #a50d1e;
}

.report-header i {
  font-size: 20px;
  color: rgb(195, 15, 24);
}

.report-header h4 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
}

.report-list {
  overflow-y: auto;
  padding: 0;
  flex: 1;
}


.report-list::-webkit-scrollbar {
  width: 6px;
}
.report-list::-webkit-scrollbar-track {
  background: #f1f3f7;
}
.report-list::-webkit-scrollbar-thumb {
  background: #c5ccd8;
  border-radius: 10px;
}

.report-list a:last-child{
    border-bottom:none;
}

.report-list a {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  text-decoration: none;
  color: #333;
  border-bottom: 1px solid #f1f1f1;
}

.report-list a:hover {
  background: #f8f9fa;
  color: #a50d1e;
}

.bank-dropdown {
  position: relative;
  display: inline-block;
}

.nova-bank-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #0d6efd;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}

.bank-arrow {
  margin-left: 4px;
  font-size: 12px;
  transition: 0.3s ease;
}

/* rotate arrow */
.bank-arrow.rotate {
  transform: rotate(180deg);
}

.bank-menu {
  position: absolute;
  bottom: 110%;
  left: 0;
  min-width: 300px;
  max-height: 250px;
  overflow-y: scroll;
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 4px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  display: none;
  z-index: 999;
}

.bank-menu.show {
  display: block;
}

.bank-menu a {
  display: block;
  padding: 8px 18px;
  font-size: 14px;
  text-align: left;
  color: #333;
  text-decoration: none;
  border-bottom: 1px solid #f1f1f1;
}

.bank-menu a:last-child {
  border-bottom: none;
}

.bank-menu a:hover {
  background: #f8f9fa;
  color: #c20c0c;
}

.jv-sec {
  padding: 20px 0px;
}

.jv-entry-section {
  background: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);
  padding: 20px;
  border-radius: 6px;
  font-family: Arial;
}

.jv-title {
  margin-bottom: 15px;
}

.jv-field {
  margin-bottom: 10px;
}

.jv-field label {
  font-size: 13px;
  margin-bottom: 5px;
  display: block;
}
#account-closing-balance-show {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 24px;
  margin-bottom: 10px;
}

.jv-input {
  width: 100%;
  padding: 7px;
  height: 35px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.jv-input:hover {
  outline: 0;
}

/* Date icon */
.jv-date-box {
  position: relative;
}

.jv-date-box i {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
}

.date-input {
  padding-left: 28px;
}

.jv-table-wrapper {
  padding: 0px 0px 15px;
  border: 1px solid #ccc;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow-x: auto;
}
.jv-table-wrapper:-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.jv-table-wrapper:-webkit-scrollbar-thumb {
  background: #e6e8ed;
  border-radius: 10px;
  transition: 0.3s;
}
.jv-table-wrapper:-webkit-scrollbar-track {
  background: #fff;
  border-radius: 10px;
}

.jv-add-row {
  padding: 0px 20px;
}
.jv-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}
.jv-head-tab {
  background: #f8eded;
}
.jv-table th {
  padding: 6px;
  min-width: 165px;
}
.jv-table th:first-child {
  min-width: 65px;
}
.jv-table td {
  padding: 6px;
}
.acc-col {
  width: 43%;
  min-width: 30%;
}
.acc-col1 {
  min-width: 7%;
}
.acc-col2 {
  min-width: 20%;
}
.acc-col3 {
  min-width: 15%;
}
.acc-col4 {
  min-width: 15%;
}

/* Bottom */
.jv-bottom {
  display: flex;
  gap: 20px;
  margin-top: 20px;
}
.jv-bottom1 {
  width: 50%;
  display: flex;
  gap: 20px;
  margin-top: 20px;
}

.jv-notes {
  flex: 2;
  border: 1px solid #ccc;
  padding: 8px;
  border-radius: 10px;
}

.jv-textarea {
  width: 100%;
  height: 80px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 8px 15px;
  margin: 5px;
}

.jv-total-box {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Buttons */
.jv-actions {
  margin-top: 20px !important;
  text-align: right;
}
.bound {
  border: 1px solid #ccc;
  margin-bottom: 10px;
  border-radius: 8px;
  padding: 6px 4px;
}

.jv-btn {
  padding: 7px 16px;
  border: none;
  border-radius: 4px;
  margin-left: 8px;
  cursor: pointer;
}

.jv-btn.cancel {
  background: #6c757d;
  color: #fff;
}
.jv-btn.save-next {
  background: #0dcaf0;
  color: #fff;
}
.jv-btn.save {
  background: #198754;
  color: #fff;
}

.account-set {
  margin-top: 30px;
  margin-bottom: 20px;
}

.account-set-sec {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border-radius: 15px;
  background: #fff;
  border: 1px solid #ccc;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
}

.acc-set-box {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  background: #fff;
  align-items: center;
  border-radius: 6px;
  text-decoration: none;
  transition: 0.25s ease;
}

.acc-set-box i {
  font-size: 28px;
  color: #d02222;
  min-width: 40px;
  height: 60px;
  width: 59px;
  background: #f1ebeb;
  display: flex;
  align-items: center;
  border-radius: 8px;
  justify-content: center;
}

.acc-set-box h4 {
  font-size: 16px;
  color: #111;
  margin: 0;
}

.acc-set-box p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #555;
}
.our-activity-tab {
  padding: 15px 0px;
}

.inv-set {
  padding: 10px 10px;
}
.inv-settings-section {
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #ccc;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.08);
}

.inv-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.inv-tab {
  padding: 8px 16px;
  border: 1px solid #ddd;
  background: #f5f5f5;
  cursor: pointer;
}

.inv-tab.active {
  background: #e02525;
  color: #fff;
}

.inv-row {
  margin-bottom: 16px;
}

.inv-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 18px;
}

.inv-check input {
  width: 18px;
  height: 18px;
}

.inv-radio {
  display: flex;
  gap: 18px;
  margin-top: 6px;
}

.inv-radio input {
  transform: scale(1.2);
}

.inv-input {
  width: 100%;
  padding: 7px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.two-col {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 20px;
}

.three-col {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
}

.inv-sub-section1 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  display: none;
  margin-left: 20px;
  padding-left: 15px;
  margin-bottom: 18px;
}

.inv-actions {
  margin-top: 25px;
  text-align: right;
}

.inv-btn {
  padding: 8px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.inv-btn.cancel {
  background: #6c757d;
  color: #fff;
}

.inv-btn.save {
  background: #198754;
  color: #fff;
}
/* Grid layout for MFG / EXP / MRP */
.date-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 15px;
}

/* inv-row inside grid */
.date-grid .inv-row {
  margin-bottom: 0;
}

/* Nested sections */
.inv-sub-section {
  display: none;
  margin-left: 20px;
  padding-left: 15px;

  margin-bottom: 18px;
}

/* Full width nested rows */
.full-row {
  grid-column: 1 / -1;
}

.date-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.date-extra {
  display: none;
}

.inv-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 20px;
}

.inv-btn {
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-weight: 500;
}

.inv-btn.cancel {
  background: #e5e7eb;
  color: #111;
}

.inv-btn.save {
  background: #e02525;
  color: #fff;
}

.inv-tab-content {
  display: none;
}

.inv-tab-content.active {
  display: block;
}

.inv-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
}

.inv-divider {
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 16px;
}

.inv-row.three-col {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.company-wrapper {
  max-width: 1100px;
  border: 1px solid #ddd;
  background: #fff;
  margin: auto;
  padding: 30px;
  margin-top: 30px;
  border-radius: 10px;
}

.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 24px;
}

.company-form {
  background: #fff;
}
.company-form-head h4 {
  font-size: 20px;
}

.grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px 22px;
  margin-bottom: 30px;
}

.field label {
  font-size: 16px;
  margin-bottom: 6px;
  display: block;
  color: #374151;
}

.field input,
.field select {
  width: 100%;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
}

.chip-box {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
}

.chip {
  background: #eef2ff;
  color: #d65510;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  cursor: pointer;
}

.upload-box {
  position: relative;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  height: 110px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #6b7280;
  gap: 6px;
}

.upload-box input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-box .icon {
  font-size: 22px;
}

.custom-area h4 {
  font-size: 15px;
  margin-bottom: 10px;
}

.link-btn {
  background: none;
  border: 1px solid #ccc;
  border-radius: 5px;
  color: #bc0808;
  cursor: pointer;
  padding: 8px;
}

.actions {
  display: flex;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 30px;
}

.btn {
  padding: 10px 24px;
  border-radius: 8px;
  border: none;
}

.btn.primary {
  background: #ca0808;
  color: #fff;
}

.btn.ghost {
  background: #f3f4f6;
}

.info-section {
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 800px;
  margin: auto;
  margin-top: 30px;
}

.info-box1 {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px 15px;
}

.info-head1 {
  display: flex;
  justify-content: space-between;
}

.info-head1 h3 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.info-btn {
  color: #777;
  border: none;
  font-size: 17px;
  font-style: inherit;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
}

.info-link {
  font-size: 13px;
  color: #2563eb;
  text-decoration: none;
  font-weight: 500;
}
.info-body p {
  font-size: 13px;
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
}
.info-body1 p {
  margin-bottom: 0;
  margin-top: 10px;
}

.info-icon-text {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 8px;
}

.info-icon-text .icon {
  font-size: 18px;
}

.staff-permission {
  margin-top: 10px;
  background: #fff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.08);
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #ccc;
}

.staff-search-box {
  border: 1px solid #e5e7eb;
  padding: 14px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.search-input {
  position: relative;
}

.search-input i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6b7280;
}

.search-input input {
  width: 100%;
  padding: 6px 12px 6px 36px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
  outline: none;
}
.grid-4 {
  margin-bottom: 10px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}

.perm-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 14px;
}

.permission-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 14px;
  border-bottom: 1px solid #ccc;
  padding-bottom: 2px;
  margin-bottom: 10px;
}

.permission-grid:last-child {
  border-bottom: none;
  padding-bottom: 0px;
}
.perm-module {
  border-radius: 10px;
  padding: 10px;
}

.perm-header {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
}

.perm-header i {
  transition: transform 0.3s;
  font-size: 14px;
}

.perm-body {
  display: none;
  margin-top: 10px;
  padding-left: 22px;
}

.perm-body label {
  display: block;
  font-size: 16px;
  margin-bottom: 6px;
}

.perm-module.active .perm-body {
  display: block;
}

.perm-module.active .perm-header i {
  transform: rotate(90deg);
}

.big-checkbox {
  transform: scale(1.2);
  cursor: pointer;
}
.permission-grid-wrapper {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.to-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.to-modal {
  background: #fff;
  width: 800px;
  max-width: 95%;
  border-radius: 8px;
  padding: 15px;
  position: relative;
}

.to-modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.to-modal-head h3 {
  font-size: 17px;
  margin: 0;
}

.to-close {
  cursor: pointer;
  font-size: 25px;
  color: #6b7280;
  position: absolute;
  top: -4px;
  right: 8px;
}

.to-warning {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 13px;
  margin: 14px 0;
}

.to-section {
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-bottom: 10px;
}
.to-points h4,
.to-section h4 {
  font-size: 14px;
  margin-bottom: 8px;
}

.to-points ul {
  padding-left: 18px;
  font-size: 13px;
  color: #374151;
}
.to-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.to-grid label,
.to-otp-input label {
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}

.to-grid input,
.to-otp-input input {
  width: 100%;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  outline: none;
}

.to-otp-row {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
  margin-top: 10px;
}

.to-otp-left {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.to-otp-input label {
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}

.to-otp-btn {
  margin-top: 28px;
}
.to-otp-btn a {
  padding: 8px 16px;
  border-radius: 4px;
  border: none;
  background: #eb3e1b;
  color: #fff !important;
  font-size: 13px;
  text-decoration: none;
}
.to-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.to-btn {
  padding: 6px 15px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
}

.to-btn.cancel {
  background: #e5e7eb;
  border-radius: 4px;
}

.to-btn.primary {
  background: #dc2626;
  color: #fff;
  border-radius: 4px;
}

.three-box-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  border-radius: 8px;
  max-width: 800px;
  margin: auto;
  margin-top: 10px;
  background: #fff;
  padding: 12px;
}
.three-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 22px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

/* LEFT CONTENT */
.three-box-content {
  flex: 1;
}

.three-box-content h4 {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 6px;
}

.three-box-content p {
  font-size: 14px;
  color: #4b5563;
  margin: 0;
  line-height: 1.6;
}

.three-box-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  white-space: nowrap;
}

.three-box-actions a {
  font-size: 14px;
  font-weight: 500;
  color: #333;
  text-decoration: none;
}

.three-box-actions a:hover {
  color: #333;
}

.two-box-section {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 99%;
  margin: auto;
  padding: 10px 0px;
}
.sect {
  background: #efeffc;
  min-height: 100vh;
  width: 100%;
  height: 100%;
}

.note-box {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding: 8px 20px;
  border: 1px solid #eee;
  background: #ffffff;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2);
  border-radius: 6px;
}

.note-left {
  flex: 1;
}

.note-left p {
  font-size: 15px;
  font-weight: 650;
  color: #374151;
  margin: 0 0 6px;
  line-height: 1.6;
}

.note-time {
  font-size: 14px;
  color: #6b7280;
}

.note-right {
  display: flex;
  align-items: center;
}

.delete-icon {
  color: #dc2626;
  font-size: 20px;
  text-decoration: none;
}

.delete-icon:hover {
  color: #b91c1c;
}

.auto-numbering {
  max-width: 1200px;
  margin: auto;
  margin-top: 30px;
  border-radius: 10px;
  border: 1px solid #ddd;
  padding: 20px;
  background: #fff;
}

.auto-heading {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.auto-form {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px 20px;
}

.auto-field label {
  font-size: 15px;
  display: block;
  margin-bottom: 6px;
  font-weight: 600;
  color: #222;
}

.auto-field input,
.auto-field select {
  width: 100%;
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 13px;
}

.auto-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.auto-btn {
  padding: 9px 20px;
  border-radius: 8px;
  border: none;
  font-size: 13px;
  cursor: pointer;
}

.auto-btn.cancel {
  background: #e5e7eb;
}

.auto-btn.save {
  background: #2563eb;
  color: #fff;
}

.auto-form1 {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  margin-bottom: 20px;
}

.invoice-number span {
  padding: 0 10px;
  background: #f0f0f0;
  height: 42px;
  display: flex;
  align-items: center;
  font-weight: 500;
}
.select-wrapper {
  position: relative;
  z-index: 1;
}

.custom-select {
  width: 100%;
}

.select-btn {
  width: 100%;
  height: 42px;
  padding: 0 12px;
  text-align: left;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.select-options {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 2px;
  list-style: none;
  overflow-y: auto;
  padding: 20px 10px;
}

.select-options li {
  display: block;
  color: #333;
  font-size: 15px;
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
}
.select-options li a {
  text-align: center;
  display: block;
  font-size: 14px;
  text-decoration: none;
  cursor: pointer;
}
/* Customs section */
.invoice-customs-section {
  margin-top: 25px;
}

.invoice-subheading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #333;
}

/* Single field row adjustment */
.invoice-customs-section .invoice-form-row {
  gap: 20px;
}

.last-invoice-sec {
  margin-bottom: 20px;
}

.jv-top-grid1 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 15px;
  margin-bottom: 20px;
}

.four-part-section {
  margin-top: 30px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
  background: #ffffff;
}

.part-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  align-items: flex-end;
}

.part-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.part-col label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}

.part-col input,
.part-col select {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}
.enable-part {
  margin-top: 23px;
}
.enable-part label {
  display: flex;
  align-items: center;
  gap: 5px;
}

.part-col input:focus,
.part-col select:focus {
  border-color: #0d6efd;
}

.amount-paid-box {
  min-width: 160px;
  border-radius: 6px;
  padding: 12px;
  text-align: right;
}

.amount-paid-box span {
  display: block;
  font-size: 12px;
  color: #666;
}

.amount-paid-box strong {
  font-size: 20px;
  font-weight: 600;
  color: #000;
}
.part-box {
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}
.part-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}
.outstanding-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
  flex-wrap: wrap;
}

.outstanding-left {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  align-items: flex-end;
}

.out-field {
  display: flex;
  flex-direction: column;
}

.out-field label {
  font-size: 13px;
  margin-bottom: 6px;
  color: #333;
}

.out-field input {
  height: 38px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}

.out-buttons {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.btn-search1 {
  background: #e90b0b;
  color: #fff;
  border: none;
  padding: 7px 18px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}

.btn-reset1 {
  background: #e0e0e0;
  border: none;
  padding: 7px 18px;
  color: #000;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none;
}
.outstanding-right {
  display: flex;
  align-items: center;
  margin-top: 28px;
  justify-content: flex-end;
}

.checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  cursor: pointer;
}
.outstanding-table-wrap {
  overflow-x: auto;
}
.outstanding-table {
  width: 100%;
  border-collapse: separate;
  font-size: 14px;
  border-spacing: 0;
}
.outstanding-table thead tr th:first-child {
  border-top-left-radius: 8px;
}

.outstanding-table thead tr th:last-child {
  border-top-right-radius: 8px;
}
.outstanding-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
.outstanding-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}

.outstanding-table thead th {
  background: #f4f6f9;
  font-weight: 600;
  text-align: left;
  padding: 10px;
  border-bottom: 1px solid #ddd;
  white-space: nowrap;
}

.outstanding-table .col-desc {
  width: 28%;
}

.outstanding-table tbody td {
  padding: 14px 10px;
  border-bottom: 1px solid #eee;
  white-space: nowrap;
}

.empty-row td {
  text-align: center;
  color: #777;
  font-size: 14px;
  padding: 30px 10px;
}

.part-divider {
  margin: 18px 0;
  border-top: 1px solid #ddd;
}
.amount-summary {
  display: flex;
  justify-content: flex-end;
  gap: 40px;
}

.summary-item {
  text-align: right;
  padding: 10px 20px;
}

.summary-item span {
  display: block;
  font-size: 13px;
  color: #666;
}

.summary-item strong {
  font-size: 16px;
  font-weight: 600;
  color: #000;
}
.part-3 {
  padding: 0px !important;
}
.part-4 {
  width: 50%;
}
/* Narration layout */
.narration-row {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.narration-left textarea {
  width: 100%;
  min-height: 120px;
  resize: none;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}

.narration-left textarea:focus {
  border-color: #0d6efd;
}
.narration-left {
  width: 100%;
}

.file-upload {
  border-radius: 4px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
  color: #333;
}

.file-upload:hover {
  border-color: #0d6efd;
  color: #0d6efd;
}
.table-scroll::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}
.table-scroll::-webkit-scrollbar-track {
  background: #fff;
  border-radius: 10px;
}

.table-scroll::-webkit-scrollbar-thumb {
  background: #e6e8ed;
  border-radius: 10px;
  transition: 0.3s;
}

.payment-split-section {
  margin-top: 30px;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
}
.payment-box {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 20px;
}

/* Heading */
.payment-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  color: #333;
}

/* Rows */
.payment-row {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.payment-field {
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.payment-field select {
  color: gray;
  font-size: 13px;
  height: 35px;
  border-radius: 4px;
  border: 1px solid #ccc;
  outline: none;
}

.payment-field input {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
  outline: none;
  color: gray;
}

.payment-field label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}

.sales-invoice-wrapper .row {
  align-items: center;
}

.mobile-input1 {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  background: #ccc;
  overflow: hidden;
  height: 35px;
  border-radius: 4px;
}

.number-type span {
  padding: 0px 20px !important;
}
.last-wrap .row {
  align-items: flex-start;
}

.mobile-input1 span {
  padding: 0 10px;
  font-size: 14px;
  color: #222;
  border-right: 1px solid #ccc;
}

.mobile-input1 input {
  border: none;
  flex: 1;
  height: 35px;
  padding: 0 10px;
  outline: none;
}
.payment-split-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
}
.payment-left {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.payment-label {
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 6px;
  color: #333;
}
.payment-textarea {
  min-height: 120px;
  resize: none;
  padding: 12px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  outline: none;
}
.payment-textarea:focus {
  border-color: #0d6efd;
}
.payment-right {
  border: 1px solid #e3e6eb;
  border-radius: 6px;
  padding: 16px;
}
.amount-part-expense {
  border: none !important;
}
.amount-line {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
  margin-bottom: 10px;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
}
.amount-line strong {
  font-weight: 600;
}
.total-line {
  border-top: 1px solid #ddd;
  padding-top: 10px;
  margin-top: 10px;
  font-size: 15px;
}
.payment-upload {
  margin-top: 15px;
}
.file-choose {
  display: block;
  padding: 10px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  cursor: pointer;
  background: #fff;
}
.file-choose input {
  display: none;
}

.file-choose:hover {
  border-color: #0d6efd;
  color: #0d6efd;
}
.auto-heading1 {
  padding-top: 20px;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.amount-summary-box {
  display: flex;
  flex-direction: column;
  gap: 30px;
  padding: 16px 20px;
  background: #f9fafc;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  max-width: 400px;
}

.amount-item {
  flex: 1;
  text-align: left;
}

.amount-item span {
  display: block;
  font-size: 13px;
  color: #666;
  margin-bottom: 4px;
}

.amount-item strong {
  font-size: 18px;
  font-weight: 600;
  color: #000;
}
.sales-invoice-section {
  padding: 40px 20px;
  background: #fff;
  margin-top: 20px;
  border-radius: 10px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.3);
}

.invoice-block {
  background: #fff;
  padding: 15px;
  border-radius: 6px;
  border: 1px solid #ddd;
  margin-bottom: 20px;
}

.custom-dropdown {
  position: relative;
}

.dropdown-btn {
  width: 100%;
  height: 40px;
  text-align: left;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 4px;
  list-style: none;
  z-index: 99;
}

.dropdown-list li {
  padding: 8px 10px;
  cursor: pointer;
  font-size: 14px;
}

.dropdown-list li:hover {
  background: #f5f5f5;
}

.dropdown-link a {
  color: #0d6efd;
  text-decoration: none;
  font-weight: 500;
}
.invoice-number-box {
  display: flex;
  height: 35px;
}

.invoice-number-box span {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  font-size: 14px;
  height: 35px;
}

.inv-prefix {
  border: 1px solid #ddd;
  border-right: none !important;
  border-radius: 4px 0 0 4px;
  background: #f5f5f5;
}

.inv-number {
  border: 1px solid #ddd !important;
  border-radius: 0px !important;
  height: 35px;
}
.inv-suffix {
  border-radius: 0 4px 4px 0;
  background: #f5f5f5;
  border: 1px solid #ddd;
  border-left: none !important;
}
.invoice-heading {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 24px;
  margin-bottom: 10px;
}
.invoice-row {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-bottom: 15px;
}

.invoice-field label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}

.invoice-field input {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: gray;
  width: 100%;
  outline: none;
}
.invoice-field select {
  color: gray;
  outline: none;
  border: 1px solid #ccc;
  height: 35px;
  font-size: 13px;
}
.summary-sec-part {
  border-right: 1px solid #ddd !important;
}

.trans-dropdown {
  position: relative;
}

.trans-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 4px;
  padding: 0px;
  list-style: none;
  z-index: 100;
}

.trans-list li {
  padding: 8px 10px;
  font-size: 14px;
  cursor: pointer;
}

.trans-list li:hover {
  background: #f5f5f5;
}
.trans-link {
  text-align: center;
}
.trans-link a {
  color: #0d6efd;
  text-align: center !important;
  font-weight: 500;
  text-decoration: none;
}
.invoice-container {
  width: 100%;
  font-family: Arial;
}
.table-scroll {
  overflow-x: auto;
  overflow-y: visible;
  height: auto;
  position: relative;
  z-index: 1;
  border-radius: 5px;
}

.invoice-table {
  border-collapse: collapse;
  table-layout: fixed;
  min-width: 1100px;
  width: 100%;
}
.invoice-table td {
  border: 1px solid #ddd;
  padding: 8px;

  background: #fff;
  white-space: nowrap;
}
.invoice-table th {
  background: #e0eaff;
  font-size: 13px;
  font-weight: 600;
  padding: 5px;
  border: 1px solid #ddd;
}

.cell-input {
  width: 100%;
  height: 34px;
  border: none;
  outline: none;
}

.col-sr {
  width: 60px;
  text-align: center;
}

.col-goods {
  width: 400px;
}

.mid-col {
  width: 150px;
}
.mid-col input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.col-action {
  width: 70px;
  text-align: center;
}

.sticky-left {
  position: sticky;
  left: 0;
  z-index: 1;
  border-right: 1px solid #ddd !important;
  background: #fff;
}

.sticky-left-2 {
  position: sticky;
  left: 60px;
  z-index: 5;
  background: #fff;
}

.sticky-right {
  position: sticky;
  right: 0;
  z-index: 6;
  background: #fff;
  text-align: center;
}
.action-wrap {
  position: relative;
  display: flex;
  justify-content: center;
}
.action-wrap img {
  height: 20px !important;
  width: 20px !important;
  margin: 8px 0px;
}
.img-icon-wrap {
  width: 34px;
  height: 34px;
  cursor: pointer;
  background: #fff;
  color: #000;
  font-size: 12px;
  border-radius: 2px;
  border: none;
}

.column-dropdown {
  position: absolute;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  padding: 10px;
  display: none;
  width: 130px;
  z-index: 9999;
}

.column-dropdown label {
  display: block;
  padding: 4px 0;
  cursor: pointer;
}

.add-row-btn {
  margin-top: 12px;
  cursor: pointer;
  color: #6941c6;
  background: transparent;
  border: none;
  text-decoration: none;
}
.add-row-btn:hover {
  color: #3a1493;
}

.invoice-block-5 {
  display: grid;
  grid-template-columns: 0.8fr 1.4fr 1.6fr;
  gap: 10px;
  justify-items: start; /* left align */
}

.first-part-wrap {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.invoice-part-1 .invoice-part-label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}
.invoice-part-1 .invoice-part-textarea {
  width: 100%;
  min-height: 110px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 12px;
  overflow: hidden;
  resize: vertical;
  font-family: Inter, system-ui, sans-serif;
}
.invoice-part-1 .invoice-part-file {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 6px;
  background: #f9f9f9;
  width: 100%;
  font-size: 12px;
  cursor: pointer;
}

/* Checkbox row */
.invoice-part-1 .invoice-part-checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: #333;
  line-height: 24px;
  margin-bottom: 10px;
}

.invoice-part-1 .invoice-additional-info {
  margin-left: 20px;
  font-size: 13px;
  color: #374151;
}
.invoice-additional-info1 {
  gap: 6px;
}
.details-row {
  margin-top: 10px;
}

.additional-info-label {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

.add-infol {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.add-infol input {
  width: 100%;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: gray;
}
/* Payment container */
.invoice-payment-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.invoice-payment-row input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  height: 28px;
  font-size: 13px;
}
.amount-wrap {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  justify-content: space-between;
}
.remove-payment {
  text-align: center;
  border-radius: 4px;
  margin-top: 8px;
  background: #fef3f2 !important;
}

.pay-check {
  width: 20% !important;
}
.amount-label {
  margin-bottom: 0px !important;
}

.pay-check-amount {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  margin: 0;
}

.pay-check-amount input {
  margin: 0;
}
.payment-field1 {
  width: 100%;
  margin-bottom: 10px;
}
.payment-field1 label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}
.invoice-part-2 {
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 10px;
  height: fit-content;
  width: 100%;
}

.invoice-delete-row {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  color: #ef4444;
  cursor: pointer;
  height: 30px;
  user-select: none;
  margin-top: 5px;
}

/* Add Payment Button */
.invoice-add-payment-btn {
  padding: 4px 0px;
  background: #f4f8ff;
  width: 100%;
  color: #2563eb;
  border-radius: 3px;
  cursor: pointer;
  align-self: center;
  border: none;
}

.invoice-part-3 {
  display: flex;
  flex-direction: column;
  gap: 5px;
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
  width: 100%;
}
.summary-heading {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  line-height: 24px;
  margin-bottom: 10px;
}
#additionalChargesContainer {
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.summary-row {
  border-radius: 8px;
  padding: 2px 0px;
}
.mandatory-field {
  color: #c70e08;
  font-size: 18px;
  padding-top: 5px;
  font-weight: 600;
}
.mine-tax {
  border: 1px solid #ccc;
  padding: 6px 5px;
}
.summary-label {
  font-weight: 500;
  font-size: 14px;
  line-height: 24px;
}
.our-tag {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.summary-row .row {
  align-items: center;
}
.summary-label1 {
  font-weight: 500;
  font-size: 13px;
  text-align: end;
  background: #fef3f2;
  color: #000;
  height: 35px;
  padding: 7px 38px;
}

.summary-inputs,
.discount-inputs,
.taxable-inputs,
.additional-charge-inputs {
  display: flex;
  align-items: center;
}
.summary-inputs {
  border: 1px solid #ddd;
}

.taxable-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.tax-charge {
  border-radius: 4px;
}
.invoice-field {
  background: #fff;
  border-radius: 6px;
  flex-direction: column;
  margin-bottom: 10px;
}
.trans-dropdown {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

/* FOCUS */
.trans-dropdown select:focus,
.summary-field:focus {
  border-color: #2864be;
  box-shadow: 0 0 0 2px rgba(40, 100, 190, 0.1);
}

/* DELETE ICON */
.summary-delete-row {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 35px;
  cursor: pointer;
  font-size: 18px;
  color: #c0392b;
}
.another-charge {
  display: flex;
  border: 1px solid #ddd;
}
.another-charge input {
  border-radius: 0px !important;
}
.another-charge-select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 11px !important;
  height: 35px;
}
.taxable-box {
  display: none;
}
.summary-add-service-btn {
  color: #6941c6;
  font-size: 14px;
  text-decoration: none;
}
.add-service-tax1 {
  color: #6941c6;
  font-size: 14px;
  text-decoration: none;
  margin-top: 10px;
  display: block;
}
.summary-add-another-btn {
  color: #6941c6;
  font-size: 14px;
  text-decoration: none;
}
.total-row1 {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 8px 6px;
  border-radius: 6px;
}
.summary-label {
  font-weight: 600;
  color: #333;
}
.after-tax {
  padding: 0px 0px 5px;
}
.summary-total-price {
  font-size: 14px;
  font-weight: 500;
}
.auto-roundoff-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.transporter-status {
  display: flex;
  gap: 10px;
}
.trans-dropdown > .trans-btn {
  width: 100%;
  height: 35px;
  padding: 6px 5px;
  border-radius: 4px;
  border: 1px solid #ddd;
}
.itm-form {
  font-family: Arial;
  background: #fff;
  max-width: 800px;
  margin: auto;
  margin-top: 30px;
  border-radius: 10px;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.4);
  padding: 20px;
}

.itm-field {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.itm-label {
  font-size: 14px;
  font-weight: 600;
}

.itm-input,
.itm-select,
.itm-textarea {
  height: 38px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 0 10px;
}

.itm-textarea {
  height: 70px;
  padding-top: 8px;
  resize: none;
}

.itm-check-group {
  display: flex;
  gap: 20px;
}

.itm-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  cursor: pointer;
}
.my-quotation span {
  background: #dddd;
  display: flex;
  width: 100px;
  align-items: center;
  justify-content: center;
}
.my-quotation {
  display: flex;
  gap: 0px;
}
.invoice-field3 input {
  height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  font-size: 14px;
}
.invoice-block-special {
  width: 50%;
}
.purchasing-block2 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.vendor-profile-drop {
  position: relative;
}
.resend-otp {
  padding: 9px 24px;
  background: #eb3e1b;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
}
.resend-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
}
.resend-wrap input {
  width: 70% !important;
}
.reason-field {
  display: none;
}

.roundoff-wrapper {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.roundoff-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
  padding: 5px 6px;
  border-radius: 6px;
  background: #fff;
}
.roundoff-left label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
}
.roundoff-right {
  font-weight: 500;
  font-size: 14px;
}
.after-tax .row {
  align-items: center;
}
.roundoff-custom {
  display: flex;
}
.summary-select {
  border-top: none !important;
  border-bottom: none !important;
  border-left: none !important;
  height: 35px;
  width: 40%;
}
.amount-input {
  border: none !important;
  font-size: 13px;
}
.round-select {
  height: 35px;
  border: 1px solid #ccc;
  padding: 0 10px;
  width: 100%;
}
.round-input {
  height: 35px;
  border: 1px solid #ccc;
  padding: 0 10px;
  width: 100%;
}
.summary-field {
  height: 35px;
  padding: 0 10px;
  font-size: 14px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  width: 30%;
  border-bottom: none !important;
  border-top: none !important;
  outline: none;
}
.total-row-final {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 6px;
  border-radius: 6px;
}

.final-price {
  font-size: 14px;
  font-weight: 500;
}

.buy-head {
  display: flex;
  gap: 8px;
  align-items: center;
  background: #f5f5f5;
  padding: 6px 8px;
  border-radius: 8px;
}
.buy-head span {
  font-size: 15px;
  font-weight: 600;
}
.buy-now1 {
  padding: 4px 15px;
  font-size: 14px;
  background: rgb(195, 15, 24);
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}
.prime-drop {
  position: relative;
  display: flex;
  gap: 5px;
  align-items: center;
  background: #f7f7f7;
  padding: 5px 10px;
  border-radius: 8px;
}
.prime-drop span {
  background: #d1e9ff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 5px;
}
.prime-drop p {
  font-size: 12px;
  margin-bottom: 0px;
  font-weight: 600;
}
.revenue-box1 img {
  height: 40px;
  width: 40px;
}
.prime-dropdown {
  position: absolute;
  width: 100%;
  background: #fff;
  width: 350px;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99;
  border: 1px solid #eee;
  box-shadow: 0px 5px 25px rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  display: none;
}
.prime-dropdown ul {
  list-style: none;
  padding: 8px;
  margin: 0px;
}
.range-drop {
  display: flex;
  align-items: center;
  padding: 8px;
  border-radius: 7px;
  text-decoration: none;
  background: #f5f5f5;
  color: #111;
  justify-content: space-between;
}
.range-drop span {
  background: #d1e9ff;
  padding: 4px 10px;
  border-radius: 4px;
}
/* outer box */
.company-box {
  background: #f6fef9;
  border-radius: 10px;
  padding: 5px 0px;
  box-shadow: 0 2px 0 #039855;
}

/* remove default ul */
.company-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.company-name {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  text-decoration: none;
  transition: 0.2s;
}

.company-name:hover {
  background: #ecfdf3;
  border-radius: 6px;
}

/* circle */
.pr-item {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 36px;
  width: 36px;
  border-radius: 50%;
  background: #f1f1f1;
  font-weight: 600;
}

/* text */
.company-info {
  display: flex;
  flex-direction: column;
}

.company-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #111;
}

.company-sub {
  font-size: 12px;
  color: gray;
  padding: 0px !important;
  background: none !important;
}

.year-switch-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  border-radius: 4px;
  background: #f6fef9;
  border: 1px solid #dbeafe;
  cursor: pointer;
  font-size: 13px;
  margin: 8px 8px 0px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.year-switch-box i {
  font-size: 14px;
  color: #555;
}

.year-switch-box span {
  flex: 1;
  margin: 0 8px;
  color: #111;
  background: #f6fef9;
}

.year-section {
  display: none;
  margin-top: 3px;
  background: #fff;
  overflow: hidden;
}

.create-year {
  padding: 3px 12px;
  font-size: 13px;
  text-align: center;
  color: #007bff;
  font-weight: 500;
  cursor: pointer;
}

.year-list {
  list-style: none;
  margin: 0;
  padding: 0 !important;
  text-align: center;
  position: absolute;
  width: 100%;
  background: #fff;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.2);
  border-radius: 0px 0px 8px 8px;
}

.year-list li {
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}
.year-list li:hover {
  background: #f7f7f7;
}

.active-year {
  background: #ecfdf3;
  color: #039855;
  font-weight: 600;
}

.vendor-profile-drop-sec {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.vendor-profile-dropdown {
  position: absolute;
  top: 120%;
  right: -40px;
  width: 280px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  display: none;
  overflow: hidden;
  z-index: 99;
}

.vendor-profile-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 8px;
}

.vendor-profile-dropdown li {
  margin-bottom: 7px;
}

.vendor-profile-dropdown a {
  text-decoration: none;
  color: inherit;
}

.profile-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}
.right1 span {
  font-size: 13px;
}

.profile-sec {
  display: flex;
  gap: 10px;
  align-items: center;
}

.profile-sec i {
  height: 36px;
  width: 36px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #111;
}

/* FIX: missing : after color */
.profile-info h3 {
  margin: 0;
  font-size: 14px;
  color: #111;
  font-weight: 600;
}

.profile-info p {
  margin: 0;
  font-size: 12px;
  color: gray;
}

/* support */
.support-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 6px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);
}

.left,
.right1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.left span {
  font-size: 14px;
  font-weight: 600;
}
.menu-box1 {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  font-size: 14px;
  transition: 0.2s;
}

.menu-item:hover {
  background: #f5f5f5;
}
.logout {
  color: #d92d20;
}
.right-icon {
  font-size: 16px;
  color: #98a2b3;
}

.gst-marquee {
  width: 100%;
  overflow: hidden;
  background: #fff8e1;
  border: 1px solid #ffe58f;
  padding: 8px 0;
}

.gst-track {
  display: inline-block;
  white-space: nowrap;
  animation: scroll-left 15s linear infinite;
}

/* hover pe pause */
.gst-marquee:hover .gst-track {
  animation-play-state: paused;
}

/* animation */
@keyframes scroll-left {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}
.gst-track span {
  margin-right: 50px;
  font-size: 14px;
  color: #ad6800;
  font-weight: 500;
}

.payment-field1 select {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: gray;
  height: 28px;
  font-size: 13px;
}

.list-sales-drop {
  position: relative;
}
.list-sales-dropdown {
  position: fixed;
  width: 220px;
  background: #fff;
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
  border: 1px solid #eee;
  height: 300px;
  overflow-y: scroll;
  border-radius: 6px;
  z-index: 999999;
  display: none;
}
.list-sales-dropdown::-webkit-scrollbar {
  width: 6px;
}
.list-sales-dropdown::-webkit-scrollbar-track {
  background: #f1f3f7;
  border-radius: 10px;
}
.list-sales-dropdown::-webkit-scrollbar-thumb {
  background: #c5ccd8;
  border-radius: 10px;
}
.list-sales-dropdown::-webkit-scrollbar-thumb:hover {
  background: #9ea7b8;
}
.list-sales-dropdown.show {
  display: block;
}
.list-sales-dropdown ul {
  list-style: none;
  margin: 0;
  padding: 5px 0;
}

.list-sales-dropdown li {
  padding: 10px 15px;
  transition: 0.2s;
}

.list-sales-dropdown li:hover {
  background: #f5f7fb;
}

.list-sales-dropdown a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #333;
  text-decoration: none;
}

.list-sales-dropdown i {
  width: 16px;
  text-align: center;
  color: #666;
}

.search-container {
  position: relative;
}
.search-box1 {
  position: fixed;
  top: 0;
  right: 0;
  width: 0;
  height: 50px;
  background: white;
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: 0.3s ease;
  padding: 0;
  z-index: 1000;
}

.search-box1 input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 18px;
  padding: 0 10px;
}
.search-box1 {
  transition: 0.3s;
  border: 2px solid transparent;
  border-radius: 6px;
}

.search-box1:focus-within {
  border: 2px solid #a62c0a;
}

.search-box1 span {
  cursor: pointer;
  font-size: 20px;
  padding: 0 10px;
}
.search-box1 span i {
  color: #111;
}
.search-box1.active {
  width: 85%;
  padding: 0 20px;
  display: flex;
  position: fixed;
}
#btnSearch {
  background: transparent;
  border: transparent;
}
.side-stack {
  position: fixed;
  top: 0;
  right: 0;
  display: flex;
  width: 700px;
  height: 100vh;
  background: #fff;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  flex-direction: column;
  font-family: Arial;
  z-index: 9999;
  border-radius: 10px;
  overflow: hidden;
  transform: translateX(100%);
  transition: 0.3s ease;
}

.side-stack.active {
  transform: translateX(0);
}
.side-stack-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 15px 20px;
  border-bottom: 1px solid #eee;
  background: #f5f5f5;
}

.side-stack-head i {
  font-size: 18px;
  cursor: pointer;
}

.side-stack-head h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.search-part {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
}

.search-part h3 {
  font-size: 14px;
  margin: 0;
}

.search-part input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}
.warning-msg {
  display: flex;
  gap: 10px;
  padding: 12px 20px;
  margin: 0px 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
}

.warning-msg i {
  color: #f59e0b;
  font-size: 18px;
}

.warning-msg h2 {
  font-size: 16px;
  margin: 0;
  font-weight: 600;
}

.warning-msg p {
  font-size: 14px;
  margin: 2px 0 0;
  color: #333;
}
.side-stack-table {
  padding: 10px 20px;
}

.side-stack-table table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #ccc;
}

.side-stack-table th {
  font-size: 14px;

  padding: 8px;
  background: #f3f6fb;
  border-bottom: 1px solid #ddd;
}
.side-stack-table th,
.side-stack-table td {
  min-width: 130px;
  text-align: left;
  border-right: 1px solid #ddd;
}

.side-stack-table td {
  font-size: 13px;
  padding: 8px;
  border-bottom: 1px solid #ddd;
  color: #555;
}

.side-stack-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  border: 1px solid #ccc;
  margin: 0px 20px;
  border-radius: 10px;
}

.side-stack-footer a {
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 5px;
  text-decoration: none;
}

.cancel-side-stack {
  background: #f3f4f6;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  padding: 5px 10px;
}

.apply-side-stack {
  background: #6941c6;
  font-size: 13px;
  text-decoration: none;
  padding: 5px 10px;
  color: #fff;
}
.middle-side-footer {
  display: flex;
  margin-top: 10px;
  gap: 10px;
  font-size: 14px;
  color: #000;
}

.middle-side-footer i {
  cursor: pointer;
}
.reason-field {
  display: none;
}

.trans-dropdown {
  position: relative;
}

.trans-dropdown > .trans-btn {
  width: 100%;
  height: 35px;
  border-radius: 4px;
  padding: 5px 8px 0px;
  color: gray;
  border: 1px solid #ddd;
}

.trans-list {
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 999;
  padding: 0px;
  list-style: none;
}
.trans-link a {
  display: block;
  color: #6941c6;
  text-align: center;
  padding: 6px 0px 3px;
  text-decoration: none;
}
.charge-item {
  display: flex;
  justify-content: space-between;
  padding: 10px;
  cursor: pointer;
  transition: 0.2s;
}

.charge-item:hover {
  background: #f7f9ff;
}

.charge-left {
  display: flex;
  flex-direction: column;
}

.charge-left strong {
  font-size: 14px;
}

.charge-left span {
  font-size: 12px;
  color: #666;
}

.charge-left small {
  font-size: 11px;
  color: #999;
}

.charge-right {
  font-weight: 600;
  color: green;
}
.charge-rs {
  color: red;
}

.help {
  cursor: pointer;
  position: relative;
  padding: 5px;
  color: #8d2b0d;
  border: 1px solid;
  font-size: 13px;
}
.help i {
  margin: 0 5px;
}

.needHelpdropdown {
  width: 230px;
  padding-top: 10px;
  display: none;
  position: absolute;
  top: 10%;
  right: 1px;
  background: white;
  border-radius: 0.357rem;
  border: 1px solid rgba(34, 41, 47, 0.05);
  box-shadow: 0 5px 25px rgba(34, 41, 47, 0.1);
  z-index: 99;
}
.needHelpdropdown ul {
  list-style: none;
  padding: 0;
  margin-bottom: 0px;
}
.needHelpdropdown .needDrop li {
  margin-bottom: 10px;
  padding: 5px 10px;
}
.needHelpdropdown .needDrop li a {
  text-decoration: none;
  display: block;
  color: black;
}
.needHelpdropdown .needDrop li a i {
  margin-right: 10px;
  font-size: 16px;
}

.needHelpdropdown .needDrop > li:hover {
  background: #fcefea;
}

.needHelpdropdown .contactDrop li {
  padding: 0;
  display: flex;
  justify-content: space-between;
  color: black;
}
.needHelpdropdown .contactDrop li:hover a {
  color: #912f0f;
  text-decoration: underline;
}
.quickMarkdropdown {
  width: 300px;
  padding: 10px;
  position: absolute;
  top: 8%;
  left: 18%;
  background: white;
  border-radius: 10px;
  border: 1px solid rgba(34, 41, 47, 0.05);
  box-shadow: 0 5px 25px rgba(34, 41, 47, 0.1);
  display: none;
  transform: translateY(-12px);
  transition: 0.25s ease;
  z-index: 99;
}
#quickMarkdropdown.open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.quickMarkdropdown h4 {
  font-size: 20px;
}
.quickMarkdropdown label {
  font-size: 14px;
  margin-top: 15px;
}
.quickMarkdropdown input,
.quickMarkdropdown textarea {
  width: 100%;
  font-size: 14px;
}
.quickMarkdropdown label span {
  color: red;
}
.quickMarkBtn {
  display: flex;
  justify-content: space-between;
  align-content: center;
  margin-top: 20px;
}
.quickMarkBtn #quickCancelBtn {
  font-size: 14px;
  background: transparent;
  border: 1px solid #e3e6eb;
  color: #333;
  border-radius: 5px;
  padding: 0 5px;
}
#quicksaveBtn {
  font-size: 14px;
  border: none;
  background: #67a2f5;
  color: #fff;
  border-radius: 5px;
  padding: 0 5px;
}
.meetingPopup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
}
.meetingPopupBox {
  width: 1000px;
  padding: 10px;
  background: #eeeff3;
  margin: 3% auto;
  height: 500px;
  color: #292929;
  overflow: hidden;
  overflow-y: auto;
  min-height: 90%;
}
.meetingPopup-content {
  position: relative;
  background: #eeeff3;
  display: grid;
  grid-template-columns: 250px 1fr 250px;
  gap: 3px;
  justify-content: center;
  border-radius: 5px;
}

/* Panels */
.left-panel {
  padding: 20px;
  background: #fff;
  height: 480px;
}

.center-panel {
  padding: 20px;
  background: #fff;
}

.right-panel {
  padding: 20px;
  background: #fff;
  overflow-y: auto;
}

.left-panel h5 {
  font-size: 16px;
  color: #808287;
}
.left-panel h4 {
  color: #292929;
  font-size: 22px;
  margin-top: 15px;
}
.left-panel .meta i {
  margin-right: 10px;
}

.calender-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.calender-header button {
  background: none;
  color: #828282;
  border: none;
  color: #292929;
  font-size: 16px;
  cursor: pointer;
}
.calender-header h4 {
  font-size: 22px;
  color: #292929;
}

.days,
.dates {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  text-align: center;
}

.days div {
  color: #292929;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.dates div {
  padding: 10px;
  margin: 3px;
  border-radius: 8px;
  background: #e6e7eb;
  color: #292929;
  cursor: pointer;
}

.dates div:hover {
  background: #333;
  color: #fff;
}

.today {
  background: #292929 !important;
  color: white !important;
  font-weight: bold;
}
/* Time slots */
.time {
  padding: 10px;
  margin-bottom: 10px;
  background: #fff;
  color: #292929;
  border: 2px solid #f3f3f3;
  border-radius: 10px;
  text-align: center;
  cursor: pointer;
}

.time:hover {
  border-color: black;
}
.timeHourHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}
.timeHourHeader h4 {
  color: #292929;
  font-size: 22px;
}
.timeHourHeader button {
  background: #f8f5f7;
  border: transparent;
  border-radius: 10px;
  padding: 5px 10px;
}
.timeForm {
  display: none;
}

.timeForm.show {
  margin: 20px 15%;
  background: #eeeff3;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 3px;
  justify-content: center;
  border-radius: 10px;
}
.timeForm .rightBox {
  background: #fff;
  padding: 20px 30px;
}
.timeForm.show label {
  display: block;
  margin: 10px 0;
}
.timeForm.show input,
.timeForm.show select {
  border-radius: 10px;
  padding: 5px;
  width: 100%;
}
.timeForm.show button {
  border: none;
}
.timeForm.show .confirmBtn {
  background: #292929;
  color: #fff;
}
/* close button inside box */
.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
}

/*=============================================
BY RAJEEV SINGH START HERE
============================================*/

.action-box321 {
  max-width: 120px;
  display: flex;
  gap: 10px;
  z-index: 99;
  align-items: center;
}
.action-box321 a {
  font-size: 12px;
  line-height: 18px;
}
.action-btn-view {
  position: relative;
  color: #000;
  border: none;
  border-radius: 4px;
  background: transparent;
}
.action-btn-view i {
  font-size: 15px;
}
.account-action-box {
  display: none;
  width: 160px;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: absolute;
  background: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  right: 40px;
  z-index: 999999;
  text-align: left;
}
.account-action-box a {
  display: block;
  text-decoration: none;
  font-size: 14px;
  color: #000;
  padding: 5px 10px;
}
.account-action-box a:hover {
  background: #fcefea;
  color: #8e2c0e;
  font-weight: 600;
}
.account-action-box a i {
  margin-right: 10px;
  color: #999;
}
/*=============================================
BY RAJEEV SINGH END HERE
============================================*/

/*============================================
GST FILLING DASHBOARD-------------------------
=============================================*/

.top-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding: 5px 12px 0px;
}
.header-dividing {
  width: 100%;
  height: 1px;
  margin: 0px 0px 8px;
  background: #ccc;
}

.action-icon {
  font-size: 18px;
  background: #fff;
  border: 1px solid rgb(195, 15, 24);
  width: 35px;
  height: 35px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  cursor: pointer;
}
.action-icon i {
  color: #e31b1b;
}

.right-actions {
  display: flex;
  align-items: center;
  gap: 20px;
}

.help-dropdown {
  position: relative;
}

.help-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-weight: 500;
}

.help-box {
  position: absolute;
  top: 45px;
  right: 0;
  width: 230px;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  display: none;
  flex-direction: column;
}

.help-box a {
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  display: flex;
  gap: 8px;
}

.help-box a:hover {
  background: #f6f8fb;
}

.help-contact {
  padding: 12px 15px;

  font-size: 14px;
}

.profile-dropdown {
  position: relative;
}

.profile-trigger {
  width: 40px;
  height: 40px;
  background: #e9f1ff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.profile-box {
  position: absolute;
  right: 0;
  top: 45px;
  width: 200px;
  background: #fff;
  border: 1px solid #e5e5e5;
  box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
  display: none;
}

.profile-box a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
}

.profile-box a:hover {
  background: #f6f8fb;
}
.show {
  display: flex !important;
}
.profile-box.show {
  display: block !important;
}
.clients-gst {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 10px;
  background: #fff;
}

.gst-header {
  text-align: start;
  margin-bottom: 10px;
}

.gst-header h2 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 4px;
}

.gst-header p {
  color: #111;
  margin: 0;
  font-size: 14px;
}

.gst-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.gst-box {
  border: 1px solid #ccc;
  padding: 25px;
  text-align: center;
  transition: 0.3s;
  background: #f5f9ff;
  border-radius: 7px;
}

.gst-box:hover {
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.08);
}

.gst-box img {
  width: 140px;

  margin-bottom: 15px;
}

.gst-box h3 {
  font-size: 20px;
  margin-bottom: 15px;
}

.gst-box ul {
  list-style: none;
  padding: 0;
  margin-bottom: 20px;
}

.gst-box ul li {
  margin-bottom: 8px;
  font-size: 11px;
  display: flex;
  align-items: center;
  background: #fff;
  gap: 20px;
  padding: 7px 15px;
  border-radius: 23px;
  justify-content: flex-start;
}

.gst-box ul li i {
  color: #2f80ff;
}
.gst-box a {
  display: inline-block;
  padding: 5px 14px;
  background: #f92b2b;
  color: #fff;
  text-decoration: none;
  border-radius: 4px;
}

.gst-box a:hover {
  color: #fff;
}
.wrapper-col {
  border: 1px solid #ccc;
  padding: 14px;
  border-radius: 10px;
  background: #fff;
  margin-bottom: 20px;
}

.video-card {
  background: #fff;
  border-radius: 6px;
  overflow: hidden;
  transition: 0.3s;
}
.video-box1 iframe {
  width: 100%;
  height: 200px;
  border: none;
}
.video-title {
  padding: 0px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: start;
  color: #333;
  margin: 0;
}
.govr-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
}

.govr-box {
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

.govr-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #f5f9ff;
  margin-bottom: 10px;
}

.govr-top h4 {
  margin: 0;
  font-size: 16px;
  padding: 5px 10px;
}

.govr-item {
  margin-bottom: 15px;
  padding: 0px 15px;
  border-bottom: 1px solid #ddd;
}

.govr-desc {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: flex-start;
}

.dot {
  height: 6px;
  min-width: 6px;
  background: #2f80ff;
  border-radius: 50%;
  display: inline-block;
  margin-top: 10px;
  position: relative;
}

.dot::after {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: 2px solid rgba(47, 128, 255, 0.3);
}

.govr-desc p {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
}
.my-item {
  border: none !important;
}
.govr-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
}
.govr-date {
  display: flex;
  gap: 10px;
}
.govr-date span {
  font-size: 12px;
}

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

.govr-row a {
  text-decoration: none;
  font-size: 12px;
}

.contact-support {
  border: 1px solid #ddd;
  padding: 10px;
  margin-top: 15px;
  border-radius: 10px;
  background: #fff;
}

.support-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}

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

.support-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.support-box {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 6px 8px;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 4px;
}
.support-box i {
  font-size: 14px;
  color: #2f80ff;
}
.support-box span {
  font-size: 11px;
  font-weight: 600;
}
.support-box:hover {
  background: #f8fbff;
}

/* WRAPPER */
.due-wrapper {
  border: 1px solid #e5e7eb;
  padding: 10px;
  margin-top: 15px;
  border-radius: 10px;
  background: #fff;
}

/* HEADING */
.due-heading {
  padding: 10px 12px;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
}

.due-box {
  border: 1px solid #c7ccd3;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
}

.due-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 14px;
  border-bottom: 1px solid #c7ccd3;
  font-size: 13px;
}

.due-row.last {
  border-bottom: none;
}

.due-left {
  font-weight: 600;
  color: #111827;
}

.due-month {
  margin-left: 6px;
  font-size: 12px;
  color: gray;
  font-weight: 500;
}

.due-right {
  font-weight: 600;
  color: #111827;
}

.due-date span {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  color: #333;
  font-size: 12px;
  font-weight: 600;
}
.box-type {
  margin-top: 10px;
}

.due-note {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  font-weight: 400;
  line-height: 1.4;
}

.due-row:hover {
  background: #f9fafb;
}
.import-client-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.import-client-box {
  width: 820px;
  background: #fff;
  border-radius: 12px;
  position: relative;
  display: flex;
  flex-direction: column;
  box-shadow: 0 15px 50px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  animation: popupFade 0.25s ease;
}
@keyframes popupFade {
  from {
    transform: translateY(25px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.import-client-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid #f1f1f1;
}

.import-client-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.import-client-close {
  font-size: 28px;
  cursor: pointer;
  color: #111;
  position: absolute;
  top: 0px;
  right: 5px;
}
.import-client-info {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 9px 15px;
}
.import-client-info i {
  margin-top: 4px;
  font-size: 16px;
}
.import-client-body {
  padding: 15px 18px;
  overflow-y: auto;
  flex: 1;
}

.import-client-options {
  display: flex;
  gap: 16px;
  margin-top: 4px;
  padding: 0px 15px;
}

.upload-file-box,
.paste-data-box {
  flex: 1;
  height: 180px;
  border: 1px dashed #e3e3e3;
  border-radius: 10px;
  background: #fafafa;
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  transition: 0.25s;
}
.upload-file-box:hover,
.paste-data-box:hover {
  border-color: #e31b1b;
  background: #fff5f5;
}

.upload-file-box i,
.paste-data-box i {
  font-size: 24px;
  color: #e31b1b;
}

.upload-file-box h4,
.paste-data-box h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
}
.upload-file-box p,
.paste-data-box p {
  margin: 0;
  font-size: 12px;
  color: #666;
}

.file-limit {
  font-size: 11px;
  color: #999;
}
.file-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}

.upload-file-box i {
  transition: 0.2s;
}

.upload-file-box:hover i {
  transform: scale(1.1);
}
.file-limit {
  display: block;
  font-size: 12px;
  color: #888;
  margin-top: 5px;
}

.import-client-tips {
  margin-top: 18px;
  background: #fff;
  padding: 0px 15px;
}

.import-client-tips h4 {
  font-size: 14px;
  margin-bottom: 5px;
}

.import-client-tips li {
  font-size: 12px;
  color: #666;
}

.import-client-footer {
  padding: 5px 18px;
  border-top: 1px solid #f1f1f1;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sample-file {
  font-size: 13px;
  color: #e31b1b;
  text-decoration: none;
}
.footer-actions {
  display: flex;
  gap: 10px;
}

.cancel-btn {
  padding: 5px 10px;
  border: 1px solid #ddd;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.upload-btn {
  padding: 5px 10px;
  border: none;
  text-decoration: none;
  background: #e31b1b;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.client-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.client-popup-box {
  width: 800px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  padding: 15px;
}

.client-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.client-popup-header h3 {
  font-size: 20px;
}

.client-popup-close {
  cursor: pointer;
  font-size: 18px;
}

.client-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.client-input-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.client-input-field label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}

.client-input-field input {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  width: 100%;
}

.client-group-dropdown {
  position: relative;
}

.client-group-menu {
  display: none;
  position: absolute;
  top: 36px;
  left: 0;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.client-group-menu a {
  display: block;
  padding: 5px;
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid #eee;
}

.client-group-menu a:hover {
  background: #f5f5f5;
}

.client-applicability {
  margin-top: 25px;
}

.client-toggle-row {
  display: flex;
  gap: 25px;
  margin-top: 10px;
}

.client-toggle-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.client-switch {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 20px;
}

.client-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.client-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ccc;
  border-radius: 20px;
}

.client-slider:before {
  position: absolute;
  content: "";
  height: 14px;
  width: 14px;
  left: 3px;
  bottom: 3px;
  background: white;
  transition: 0.3s;
  border-radius: 50%;
}

.client-switch input:checked + .client-slider {
  background: #4caf50;
}

.client-switch input:checked + .client-slider:before {
  transform: translateX(20px);
}

.client-form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 25px;
}

.client-cancel-btn {
  padding: 6px 15px;
  background: #eee;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.client-create-btn {
  padding: 6px 15px;
  background: #e31b1b;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
}

.grpcreate-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.grpcreate-modal {
  width: 800px;
  background: #fff;
  border-radius: 8px;
  padding: 25px;
}

.grpcreate-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.grpcreate-header h3 {
  font-size: 20px;
}

.grpcreate-close {
  cursor: pointer;
  font-size: 18px;
}

.grpcreate-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.grpcreate-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.grpcreate-field label {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  margin-bottom: 6px;
  color: #333;
}

.grpcreate-field input {
  height: 35px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  color: gray;
  width: 100%;
  outline: none;
}
.grpcreate-field select {
  color: gray;
  outline: none;
  border: 1px solid #ccc;
  height: 35px;
  font-size: 13px;
}

.grpcreate-actions {
  margin-top: 25px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.grpcreate-cancel {
  padding: 6px 15px;
  background: #eee;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.grpcreate-submit {
  padding: 6px 15px;
  text-decoration: none;
  background: #e31b1b;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.client-header-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 10px;
  border-bottom: 1px solid #e5e5e5;
  background: #fff;
}

.client-title {
  font-size: 20px;
  font-weight: 600;
}

.client-create-area {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.client-create-area i {
  color: #e31b1b;
  font-size: 16px;
  border-radius: 4px;
  padding: 8px 10px;
}

.client-create-link {
  text-decoration: none;
  color: #e31b1b;
  font-weight: 500;
  border-radius: 4px;
  padding: 5px 10px;
  border: 1px solid #e31b1b;
}

.client-tabs-section {
  padding: 12px;
  background: #f5f5f5;
  height: 100vh;
}

.client-tabs-wrap {
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
}
.client-tabs-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 10px 0px;
}
.clients-outward {
  background: #efeffc;
  padding: 5px 10px;
}

.client-tabs {
  display: flex;
  list-style: none;
  gap: 20px;
  padding: 0;
  margin: 0;
}

.tab-item {
  cursor: pointer;
  font-size: 14px;
  color: #555;
  padding-bottom: 5px;
}

.tab-item.active {
  color: #000;
  font-weight: 600;
  border-bottom: 2px solid #000;
}

.client-search {
  position: relative;
}

.client-search input {
  width: 220px;
  height: 28px;
  padding: 0 35px 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.client-search i {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #777;
}

.client-table td {
  padding: 3px 3px;
  border-right: 1px solid #ddd;
  border-top: 1px solid #ddd;
  text-align: left;
}
.client-table td:last-child {
  border-right: none;
}
.table-heading {
  font-size: 12px;
  color: #111;
}
.table-para {
  font-size: 10px;
  color: #111;
  margin-bottom: 0px;
}

.client-name-col {
  width: 370px;
}
.client-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
}
.client-table thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

.client-table thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

.client-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 10px;
}

.client-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 10px;
}
.client-table th {
  background: #fafafa;
  text-align: left;
  border-right: 1px solid #ddd;
  padding: 4px 12px;
  border-bottom: 1px solid #eee;
  font-size: 11px;
}
.client-table th:last-child {
  border-right: none !important;
}
.action-table {
  width: 200px;
}

.no-record {
  text-align: center !important;
  padding: 40px 0 !important;
  color: #777 !important;
}

.upload-history-section {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}
.upload-filter-row {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.filter-box1 {
  display: flex;
  flex-direction: column;
}

.filter-box1 select {
  width: 220px;
  height: 28px;
  border-radius: 4px;
  padding: 0 8px;
  color: gray;
  background: #fff;
  border: 1px solid #ddd;
}

.upload-table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 10px;
}

.upload-table-wrapper::-webkit-scrollbar {
  height: 6px;
}

.upload-table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

.upload-table-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.upload-table-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.upload-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}

.upload-table th {
  background: #fafafa;
  text-align: left;
  padding: 4px 12px;
  font-size: 12px;
  min-width: 170px;
  font-weight: 600;
  color: #374151;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.upload-table th:last-child {
  border-right: none;
}
.upload-table td {
  padding: 8px 12px;
  font-size: 13px;
  color: #374151;
  border-right: 1px solid #ddd;
}
.upload-table td:last-child {
  border-right: none;
}

.upload-table tr:last-child td {
  border-bottom: none;
}

.upload-table tbody tr:hover td {
  background: #f9fafb;
}
.no-data {
  text-align: center;
  padding: 40px 0 !important;
  color: #111;
  font-size: 20px !important;
}

.activity-section {
  background: #fff;
  padding: 20px;
  border-radius: 6px;
}
.activity-filter-row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.activity-left {
  display: flex;
  gap: 7px;
  align-items: center;
}

.filter-select {
  height: 35px;
  border: 1px solid #ddd;
  padding: 0 8px;
  border-radius: 4px;
  min-width: 160px;
  color: gray;
  outline: none;
}

.activity-right {
  display: flex;
  gap: 15px;
}

.filter-input {
  height: 28px;
  border: 1px solid #ccc;
  padding: 0 10px;
  color: gray;
  border-radius: 4px;
  min-width: 180px;
}

.activity-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

.activity-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.activity-table th {
  border: 1px solid #ddd;
  padding: 5px;
  font-size: 12px;
  text-align: center;
  background: #f8f8f8;
  text-align: center;
}
.activity-table td {
  border: 1px solid #ddd;
  padding: 10px;
  font-size: 14px;
  text-align: center;
}
.activity-radio {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 13px;
}
.activity-radio input {
  accent-color: #e31b1b;
  cursor: pointer;
}

.settings-section {
  background: #fff;
  padding: 0px;
  margin-top: 5px;
}
.setting-container {
  max-width: 800px;
  margin: auto;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 20px;
}

.settings-heading {
  font-size: 16px;
  text-align: start;
  font-weight: 600;
  max-width: 800px;
  margin: auto;
}

.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 20px;
}
.settings-item {
  display: flex;
  gap: 12px;
  text-decoration: none;
  color: #333;
}

.settings-item i {
  font-size: 20px;
  margin-top: 3px;
  color: #e31b1b;
}

.settings-item h4 {
  margin: 0;
  font-size: 15px;
}

.settings-item p {
  margin: 4px 0 0;
  font-size: 13px;
  color: #666;
}

.settings-divider {
  border-top: 1px solid #e5e5e5;
  margin: 20px 0;
}

.coming-soon h3 {
  margin: 0;
  font-size: 16px;
}

.coming-soon p {
  margin: 5px 0 20px;
  font-size: 13px;
  color: #666;
}
.payment-section {
  background: #fff;
  padding: 30px;
}

.payment-main-heading {
  font-size: 22px;
  text-align: start;
  margin-bottom: 10px;
  max-width: 1000px;
  margin: auto;
}

.payment-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  max-width: 1000px;
  margin: auto;
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 10px;
}

.payment-card {
  text-align: start;
  padding: 25px 15px;
  border: 1px solid #ccc;
  margin: 8px 10px;
  border-radius: 10px;
}

.payment-icon {
  font-size: 30px;
  margin-bottom: 10px;
  color: blue;
}

.payment-card h3 {
  margin-bottom: 15px;
}

.plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 20px 0;
  text-align: start;
}

.plan-features li {
  font-size: 13px;
  margin-bottom: 8px;
  position: relative;
  padding-left: 18px;
}

.plan-features li:before {
  content: "✔";
  position: absolute;
  left: 0;
  font-size: 12px;
}

.payment-btn {
  display: inline-block;
  padding: 8px 20px;
  background: #000;
  color: #fff;
  text-decoration: none;
  font-size: 14px;
  border-radius: 4px;
}
.payment-btn:hover {
  color: #fff;
}

.enterprise-card p {
  font-size: 13px;
  color: #555;
  margin-top: 10px;
}

.contact-link {
  display: inline-block;
  margin-bottom: 10px;
  text-decoration: none;
  font-size: 14px;
}

.small-text {
  font-size: 12px;
  color: #777;
}
.password-repo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.pass-field {
  display: flex;
  flex-direction: column;
}

.pass-field label {
  font-size: 14px;
  margin-bottom: 5px;
}

.pass-field input {
  height: 36px;
  border: 1px solid #ccc;
  padding: 0 10px;
  border-radius: 4px;
}
.org-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 999;
}

.org-modal-box {
  background: #fff;
  width: 650px;
  padding: 20px;
  border-radius: 6px;
}

.org-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.org-close {
  font-size: 20px;
  cursor: pointer;
}

.org-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}

.org-field {
  display: flex;
  flex-direction: column;
}

.org-field label {
  font-size: 14px;
  margin-bottom: 4px;
}

.org-field input {
  height: 36px;
  border: 1px solid #ccc;
  padding: 0 8px;
  border-radius: 4px;
}

.full-width {
  grid-column: 1/3;
  margin-top: 10px;
}

.logo-upload-box {
  border: 1px dashed #ccc;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  cursor: pointer;
}

.logo-upload-box i {
  font-size: 20px;
  margin-bottom: 5px;
}

.logo-upload-box input {
  display: none;
}

.logo-info {
  font-size: 12px;
  color: #666;
  margin-top: 5px;
}

.org-submit {
  margin-top: 15px;
  padding: 8px 18px;
  background: #000;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.feature-request-section {
  background: #fff;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.feature-request-part {
  padding: 10px;
}

.feature-heading {
  font-size: 20px;
  margin-bottom: 15px;
}
.feature-tab-content {
  display: none;
}

.feature-tab-content.active {
  display: block;
}
.my-request {
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 10px;
}

.feature-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

.feature-tab {
  border: none;
  background: #eee;
  padding: 5px 14px;
  cursor: pointer;
  border-radius: 3px;
}
.feature-tab.active {
  background: #e31b1b;
  color: #fff;
}
.request-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-select1 {
  height: 34px;
  border: 1px solid #ccc;
  padding: 0 6px;
  border-radius: 4px;
  color: gray;
  font-size: 13px;
  outline: none;
}
.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 5px;
}

.filter-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
}

.comment-search {
  height: 35px;
  border: 1px solid #ccc;
  border-radius: 4px;
  color: gray;

  padding: 0 8px;
}
.tit-field {
  width: 100%;
}

.request-item {
  display: flex;
  gap: 15px;
  border-bottom: 1px solid #eee;
  padding: 15px 0;
}
.request-item:last-child {
  border-bottom: none;
  padding: 15px 0 5px;
}

.vote-box {
  width: 60px;
  text-align: center;
}

.vote-box i {
  font-size: 18px;
  display: block;
  margin-bottom: 4px;
}

.vote-box span {
  font-size: 14px;
}
.request-content h4 {
  margin: 0;
  font-size: 16px;
}

.request-content p {
  font-size: 13px;
  color: #555;
  margin: 5px 0;
}

.request-meta {
  display: flex;
  gap: 15px;
  font-size: 12px;
  color: #666;
}

.status {
  padding: 2px 8px;
  border-radius: 3px;
  font-size: 12px;
}

.status.done {
  background: #e6f7e6;
  color: #2e7d32;
}

.status.pending {
  background: #fff3cd;
  color: #856404;
}

.status.progress {
  background: #e3f2fd;
  color: #1565c0;
}

.status.planned {
  background: #f3e5f5;
  color: #6a1b9a;
}

.roadmap-part {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 15px;
}
.roadmap-filter {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 25px;
}

.my-posts {
  margin: 0;
  font-size: 14px;
}

.roadmap-search {
  margin-left: auto;
  height: 35px;
  border: 1px solid #ccc;
  padding: 0 10px;
  border-radius: 4px;
  color: gray;
}

.roadmap-box {
  border: 1px solid #eee;
  border-radius: 6px;
  min-height: 250px;
  overflow-y: scroll;
  background: #fafafa;
  height: 340px;
}

.roadmap-heading {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
  text-align: center;
  padding: 8px 10px;
  background: #efeffc;
}

.no-request {
  text-align: center;
  color: #777;
  padding: 60px 0;
}

.roadmap-item {
  display: flex;
  gap: 12px;
}

.vote-box {
  width: 50px;
  text-align: center;
}

.vote-box i {
  display: block;
  font-size: 16px;
  margin-bottom: 3px;
}

.vote-box span {
  font-size: 13px;
}

.roadmap-content h5 {
  font-size: 14px;
  margin: 0 0 5px 0;
}
.roadmap-item {
  padding: 8px 10px;
}
.roadmap-content p {
  font-size: 12px;
  color: #666;
  margin: 0 0 5px 0;
}

.roadmap-meta {
  font-size: 12px;
  color: #888;
}
.request-box-container1 {
  max-width: 800px;
  margin: auto;
}

.gst-table-wrapper {
  border: 1px solid #eee;
  border-radius: 6px;
  overflow: hidden;
  font-family: Arial, sans-serif;
  margin-bottom: 10px;
}
.gst-table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 15px;
}

.gst-table-header h3 {
  font-size: 13px;
  margin: 0;
  font-weight: 600;
}

.right-controls {
  display: flex;
  gap: 10px;
}

.download-btn1 {
  border: 1px solid #ccc;
  background: #fff;
  padding: 2px 10px;
  cursor: pointer;
  border-radius: 4px;
}

.gst-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #ffffff;
  border: 1px solid #e4e7ec;
  border-radius: 8px;
  overflow: hidden;
}

.gst-table th {
  font-weight: 600;
  font-size: 13px;
  padding: 11px 10px;
  border-bottom: 1px solid #e5e7eb;
}

.gst-table td {
  padding: 10px;
  font-size: 13px;
  color: #374151;
  background: #fff;
  border-bottom: 1px solid #f0f2f5;
}
.gst-table td + td,
.gst-table th + th {
  border-left: 1px solid #f0f2f5;
}

.gst-table tbody tr:hover td {
  background: #f9fafb;
}

.blue1 {
  background: #edf5ff;
  color: #1d4ed8;
}
.green1 {
  background: #eafaf1;
  color: #15803d;
}

.beige1 {
  background: #fff6e5;
  color: #b45309;
}

.purple1 {
  background: #f3efff;
  color: #6d28d9;
}

.green4 {
  background: #e3fcec;
  color: #047857;
  font-weight: 600;
}

.sub {
  background: #fafafa;
  font-size: 12px;
  color: #6b7280;
}

.month-select {
  border: 1px solid #d1d5db;
  padding: 7px 12px;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #374151;
}

.monthly-part {
  display: flex;
  align-items: center;
  gap: 8px;
}
.help-heading h2 {
  font-size: 16px;

  margin-bottom: 6px;
  font-weight: 600;
}

.help-i {
  border-radius: 3px !important;
}
.help-i i {
  font-size: 18px;
}

.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  visibility: hidden;
  transition: 0.3s;
  z-index: 99;
}

.request-panel {
  position: fixed;
  top: -135%;
  width: 450px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  transition: 0.4s ease;
  z-index: 100;
  border-radius: 10px;
  border: 1px solid #ccc;
}

.request-panel.active {
  top: 40px;
}

.overlay.active {
  opacity: 1;
  visibility: visible;
}

.request-box {
  max-width: 700px;
  margin: auto;
  padding: 18px;
}
.request-box h4 {
  font-size: 18px;
}
.request-text {
  font-size: 13px;
  color: #666;
  margin-bottom: 5px;
}

.req-field label {
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  gap: 10px;
  align-items: center;
}
.req-submit {
  margin: 10px 0px;
  background: #eb3e1b;
  border: none;
  border-radius: 4px;
  color: #fff;
  padding: 4px 15px;
}

.req-field input {
  padding: 5px;
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  outline: none;
}
.req-field textarea {
  width: 100%;
  height: 80px;
  border: 1px solid #e3e6ec;
  border-radius: 6px;
  outline: none;
}
.radio-inline {
  display: flex;
  align-items: center;
  gap: 30px;
  flex-wrap: nowrap;
  overflow-x: auto;
}

.radio-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  font-size: 14px;
  cursor: pointer;
}
.radio-item input[type="radio"] {
  accent-color: #4f46e5;
  cursor: pointer;
}

.btn-group {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 10px;
}

.cancel-btn3 {
  background: #f3f4f6;
  border: none;
  text-decoration: none;
  padding: 5px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.submit-btn4 {
  background: #4f46e5;
  color: #fff;
  border: none;
  text-decoration: none;
  padding: 5px 16px;
  border-radius: 6px;
  cursor: pointer;
}

.client-card {
  padding: 5px 0px 0px;
}
.top-text {
  font-size: 12px;
  color: #888;
  margin-bottom: 6px;
}

.client-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.client-info {
  flex: 1;
  margin-left: 10px;
}

.client-info h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.client-info span {
  font-size: 12px;
  color: #777;
}

.client-badges {
  display: flex;
  gap: 6px;
}

.badge {
  background: #f3f4f6;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #222;
}
.table-partion {
  display: flex;
  gap: 2px;
  align-items: flex-start;
}

.client-logo i {
  font-size: 18px;
  color: #e31b1b;
}

.table-part td {
  text-align: center;
}
.month-table {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}
.month-table span {
  font-size: 11px;
  color: red;
}
.last-tab-report {
  display: grid;
  grid-template-columns: 2fr 2fr 1fr;
  gap: 3px;
}
.return-btn {
  background: #e31b1b;
  color: #fff;
  border-radius: 4px;
  padding: 4px 5px;
  font-size: 12px;
  position: relative;
}
.report-btn {
  background: #f9f9f9;
  color: #000;
  border-radius: 4px;
  padding: 4px 5px;
  font-size: 12px;
  position: relative;
}
.return-wrapper {
  position: relative;
}
.return-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 8px;
  display: none;
  z-index: 100;
}
.rd-item a {
  display: flex;
  gap: 10px;
  padding: 8px;
  color: #111;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
  text-decoration: none;
}
.rd-item:hover a {
  background: #f9fafb;
}
.rd-item i {
  font-size: 16px;
  color: #e31b1b;
  margin-top: 3px;
}
.rd-item h4 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.rd-item p {
  margin: 0;
  font-size: 11px;
  color: #777;
  text-align: left;
}

.report-dropdown {
  position: absolute;
  top: 110%;
  right: 0;
  width: 180px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 6px;
  display: none;
  z-index: 100;
}

.rp-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
  font-size: 13px;
  font-weight: 600;
}
.rp-item:hover {
  background: #f9fafb;
}

.rp-item i {
  font-size: 14px;
  color: #059669;
}

.arrow {
  margin-left: auto;
  font-size: 10px;
  opacity: 0.7;
}

.rp-submenu {
  position: absolute;
  bottom: 0;
  right: 100%;
  width: 280px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  display: none;
  padding: 6px;
}
.rp-subitem {
  display: flex;
  gap: 10px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}

.rp-subitem:hover {
  background: #f9fafb;
}

.rp-subitem i {
  font-size: 15px;
  color: #059669;
  margin-top: 3px;
}

.rp-subitem h5 {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
}

.rp-subitem p {
  margin: 0;
  font-size: 11px;
  color: #777;
  text-align: left;
}
.has-sub:hover .rp-submenu {
  display: block;
}

.report-wrapper {
  position: relative;
}

.filing-popup {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 800px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  display: none;
  z-index: 100;
  overflow: hidden;
  padding-bottom: 20px;
}

.filing-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 8px;
  padding: 12px;
  background: #f5f5f5;
}

.filing-header h4 {
  font-size: 14px;
  margin: 0;
}

.filing-header i {
  cursor: pointer;
}

.filing-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 10px;
}

.filling-data {
  display: flex;
  gap: 10px;
  align-items: center;
}
.filling-data p {
  margin-bottom: 0px;
}
.type {
  background: #f3f4f6;
  padding: 1px 8px;
  border-radius: 30px;
  font-size: 11px;
}

.get-status {
  font-size: 13px;
  color: #2563eb;
  cursor: pointer;
}
.filing-box {
  margin: 10px 20px 0px;
  border: 1px solid #eee;
  border-radius: 8px;
  overflow: hidden;
}

.filing-box-head {
  display: flex;
  justify-content: space-between;
  padding: 8px;
  cursor: pointer;
  font-size: 13px;
  align-items: center;
  background: #e5dded;
  border-radius: 8px 8px 0px 0px;
}
.filing-box-body {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.row-body {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 4px 10px;
  border: 1px solid #eee;
}
.row-body span:last-child {
  color: #e31b1b;
  border: none;
}
.filing-box-body1 {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.filing-box-footer {
  text-align: right;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 15px;
  padding: 10px 20px;
}
.cancel-box {
  padding: 5px 10px;
  background: #f5f5f5;
  color: #111;
  text-decoration: none;
  border-radius: 5px;
}
.ok-box {
  padding: 5px 10px;
  background: #e31b1b;
  color: #fff;
  border-radius: 5px;
  text-decoration: none;
}
.client-name-col-name {
  width: 675px;
}
.setting-tab {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}
.setting-tab-last {
  border-right: 1px solid #ccc;
  padding: 0px 10px;
}
.setting-tab i {
  color: #e31b1b;
}
.action-wrapper {
  position: relative;
  display: inline-block;
}
.action-btn {
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
}

.action-btn:hover {
  background: #f3f4f6;
}
.action-dropdown {
  position: absolute;
  top: 120%;
  right: 0;
  width: 180px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  display: none;
  padding: 6px;
  z-index: 100;
}
.action-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}
.action-item:hover {
  background: #f9fafb;
}
.action-item i {
  font-size: 14px;
  color: #555;
}
.action-item.delete {
  color: #e31b1b;
}

.action-item.delete i {
  color: #e31b1b;
}
.edit-client-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: none;
  align-items: flex-start;
  justify-content: center;
  z-index: 999;
}
.edit-client-box {
  width: 850px;
  background: #fff;
  border-radius: 10px;
  height: 600px;
  overflow-y: scroll;
  padding: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}
.edit-client-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.edit-client-header h3 {
  margin: 0;
  font-size: 18px;
}
.close-edit {
  cursor: pointer;
}
.edit-client-form {
  margin-top: 15px;
}
.can-btn {
  padding: 7px 15px;
  border: 1px solid #ccc;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.sav-btn {
  padding: 7px 18px;
  border: none;
  background: #e31b1b;
  color: #fff;
  border-radius: 6px;
  cursor: pointer;
}

.month-header {
  display: flex;
  align-items: center;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  padding: 2px 10px;
  gap: 10px;
}
.month-header a {
  font-size: 15px;
  color: #e31b1b;
  border: 1px solid #222;
  border-radius: 5px;
  padding: 4px 16px;
}
.month-header h4 {
  font-size: 18px;
  color: #111;
  font-weight: 500;
  margin-top: 10px;
}
.gstr-section {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 6px;
  background: #fff;
  margin-top: 10px;
}
.gstr-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  padding: 15px;
  border-radius: 10px;
}
.gstr-row {
  display: flex;
  align-items: center;
  gap: 20px;
}
.progress-circle {
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: conic-gradient(#e31b1b 0%, #eee 0%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 25px;
  font-weight: 600;
  position: relative;
}
.progress-circle::after {
  content: "";
  position: absolute;
  width: 120px;
  height: 120px;
  background: #fff;
  border-radius: 50%;
}
.progress-circle span {
  position: relative;
  z-index: 1;
}
.gstr-content {
  flex: 1;
  margin-left: 15px;
}
.gstr-content h4 {
  margin: 0;
  font-size: 18px;
}
.download-row {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 13px;
  color: #2563eb;
  margin-top: 4px;
  cursor: pointer;
  border: 1px solid #ccc;
  padding: 5px 15px;
  border-radius: 5px;
  width: fit-content;
  margin-top: 12px;
}

.note-wrap {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}
.note {
  font-size: 13px;
  color: #111;
  margin-top: 4px;
}
.select-all {
  margin-top: 4px;
}
.select-all label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.select-all input {
  accent-color: #e31b1b;
}
.gstr-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 15px;
}
.gstr-card {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 12px;
  background: #fff;
  transition: 0.25s;
}
.gstr-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}
.card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.date {
  font-size: 13px;
  font-weight: 600;
}
.card-icons {
  display: flex;
  gap: 8px;
}
.card-icons i {
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
  border-radius: 5px;
  transition: 0.2s;
}
.card-icons i:hover {
  background: #f3f4f6;
}

.card-icons .delete:hover {
  color: #e31b1b;
}

.download-btw {
  border: none;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: 0.2s;
}

.return-section {
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  margin-top: 12px;
}

.section-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 5px;
  background: #fff;
  padding: 3px 10px 0px;
}
.right-icons {
  display: flex;
  gap: 10px;
}

.right-icons i {
  cursor: pointer;
  padding: 6px;
  border-radius: 6px;
  transition: 0.2s;
}
.right-icons i:hover {
  background: #f3f4f6;
}

.return-table {
  width: 100%;
  border-collapse: collapse;
}

.return-table th {
  text-align: left;
  padding: 3px;
  font-size: 13px;
  border: 1px solid #ccc;

  background: #efeffc;
}
.return-table td {
  text-align: left;
  padding: 10px;
  font-size: 13px;
  border: 1px solid #ccc;
}
.return-table td:last-child {
  border-top-right-radius: 7px;
  border-bottom-right-radius: 7px;
}
.table-head-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0px 10px;
}

.return-table th i {
  margin-left: 6px;
  font-size: 11px;
  color: #999;
  cursor: pointer;
}
.return-table tbody tr:hover {
  background: #fafafa;
}

.status {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 11px;
}

.status.filed {
  background: #e6f7ee;
  color: #16a34a;
}

.status.pending {
  background: #fdecec;
  color: #e31b1b;
}

.action-icon {
  margin-right: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #555;
}

.action-icon:hover {
  color: #000;
}
/* th wrapper */
.th-with-dropdown {
  position: relative;
}

.th-btn {
  margin-left: 6px;
  cursor: pointer;
  font-size: 12px;
}
.th-dropdown {
  position: absolute;
  top: 120%;
  right: 0;
  width: 220px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  display: none;
  padding: 6px;
  z-index: 50;
}

.th-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: 0.2s;
}

.th-item:hover {
  background: #f9fafb;
}
.th-item i {
  font-size: 13px;
  color: #555;
}

.th-divider {
  height: 1px;
  background: #eee;
  margin: 5px 0;
}

.gstr-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 15px;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  background: #fff;
  margin-bottom: 10px;
}
.gstr-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gstr-left h4 {
  margin: 0;
  font-size: 18px;
}

.gstr-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.gstr-checkbox input {
  margin-right: 5px;
}
.add-invoice {
  background: #e31b1b;
  padding: 5px 10px;
  text-decoration: none;
  border-radius: 2px;
  color: #fff;
}
.add-invoice-row {
  background: #e31b1b;
  padding: 3px 10px;
  text-decoration: none;
  border-radius: 5px;
  color: #fff;
}
.gstr-steps {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 5px 0;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.gstr-steps .step {
  text-decoration: none;
  color: #333;
  background: #f5f5f5;
  padding: 8px 15px;
  border-radius: 25px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  border-radius: 5px;
}
.step-num {
  background: #e31b1b;
  color: #fff;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
}
.gstr-steps .step.active {
  background: #ffecec;
  font-weight: 600;
}
.step-arrow {
  color: #999;
  font-size: 12px;
}
.gstr-delete-section {
  padding: 5px;
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 10px;
}

.delete-title {
  margin-bottom: 10px;
  font-size: 18px;
}

.table-title {
  font-weight: 600;
  background: #fff !important;
  padding: 3px 5px !important;
}
.table-wrapper1 {
  overflow-x: auto;
}
.table-wrapper1::-webkit-scrollbar {
  height: 6px;
}

.table-wrapper1::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 10px;
}

.gstr-table {
  width: 100%;
  border-collapse: separate;
  min-width: 1000px;
  border-spacing: 0;
}

.gstr-table th {
  border: 1px solid #ccc;
  padding: 5px;
  text-align: left;
  font-size: 12px;
  background: #efeffc;
  min-width: 160px;
}
.gstr-table td {
  border: 1px solid #eee;
  padding: 10px;
  text-align: left;
  font-size: 14px;
  min-width: 160px;
}
.gstr-table thead tr th:first-child {
  border-top-left-radius: 8px;
}

.gstr-table thead tr th:last-child {
  border-top-right-radius: 8px;
}
.gstr-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: 8px;
}
.gstr-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: 8px;
}
.col-type {
  min-width: 240px;
}
.tds-part {
  margin-top: 20px;
  border: 1px solid #ccc;
  border-radius: 9px;
  padding: 10px;
}

.edit-btn {
  color: #007bff;
  font-size: 14px;
}
.gstr-tab-wrap {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
}
.gstr-tab-wrap p {
  font-size: 11px;
  margin-bottom: 0px;
}
.my-tab th:first-child,
.my-tab td:first-child {
  max-width: 70px !important;
}
.info-box {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #f9f9f9;
  width: fit-content;
  margin-bottom: 10px;
}
.info-icon {
  font-size: 20px;
  color: #e31b1b;
  margin-top: 3px;
}
.info-content h5 {
  margin: 0 0 0px;
  font-size: 16px;
}

.info-content p {
  margin: 0;
  font-size: 12px;
  color: #666;
}
.next-cti {
  padding: 10px;
  border-top: 1px solid #ccc;
  text-align: end;
  margin: 10px 0px 0px;
}
.next-cti-a {
  font-size: 13px;
  background: #e31b1b;
  padding: 5px 14px;
  color: #fff !important;
  border-radius: 5px;
  text-decoration: none;
}
.next-cti-d {
  font-size: 13px;
  background: #f1f1f1;
  padding: 5px 14px;
  color: #111 !important;
  border-radius: 5px;
  text-decoration: none;
}
.check-invoice-sec {
  margin: 20px 0px;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 0px;
}
.summary-wrapper {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border: 1px solid #111;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.tds-credit {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid #111;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.tcs-credit {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  border: 1px solid #111;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 10px;
}
.summary-wrapper-b2cs {
  grid-template-columns: repeat(6, 1fr) !important;
}

.summary-box {
  padding: 4px 10px 6px;
  text-align: left;
  border-right: 1px solid #111;
}
.summary-box:last-child {
  border-right: none;
}
.summary-box p {
  margin: 0;
  font-size: 11px;
  color: #111;
  font-weight: 500;
}

.summary-box h5 {
  margin: 5px 0px 0px;
  font-size: 11px;
  color: #111;
  font-weight: 500;
}
.invoice-section {
  margin-top: 15px;
}

.invoice-table-custom {
  width: 100%;
  border-collapse: collapse;
  overflow-x: scroll;
}

.invoice-table-custom th {
  border: 1px solid #ccc;
  padding: 5px;
  font-size: 11px;
  background: #efeffc;
  text-align: left;
  font-weight: 600;
  min-width: 200px;
}
.invoice-table-custom th:first-child {
  min-width: 75px;
}
.invoice-table-custom td {
  border: 1px solid #eee;
  padding: 10px;
  font-size: 14px;
  text-align: left;
}

.empty-row td {
  text-align: center;
  padding: 30px 10px;
}

.empty-box i {
  font-size: 28px;
  color: #e31b1b;
  margin-bottom: 10px;
}

.empty-box h5 {
  margin: 5px 0;
  font-size: 16px;
}

.empty-box a {
  margin: 15px 0px 0px;
  font-size: 14px;
  color: #fff !important;
  border-radius: 5px;
  background: #e31b1b;
  padding: 5px 10px;
  cursor: pointer;
}
.pv-next {
  display: flex;
  justify-content: space-between;
  align-items: center;
  magin-top: 25px 0px 10px;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 8px;
}
.pre {
  background: #f3ebeb;
  color: #111;
  padding: 5px 13px;
  border-radius: 5px;
  text-decoration: none;
}
.doc-type-box {
  display: flex;
  align-items: center;
  gap: 10px;
}

.doc-dropdown {
  position: relative;
  width: 200px;
}

.doc-dropdown input {
  width: 100%;
  padding: 8px;
  cursor: pointer;
  height: 28px;
  border: 1px solid #ddd;
  color: gray;
  border-radius: 4px;
}

.doc-list {
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #ddd;
  display: none;
  max-height: 200px;
  list-style: none;
  overflow-y: auto;
  z-index: 10;
  padding: 0;
  border-radius: 5px;
}

.doc-list li {
  padding: 5px;
  cursor: pointer;
}

.doc-list li:hover,
.doc-list li.active {
  background: #f5f5f5;
}
.doc-content {
  display: none;
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 10px;
}

.doc-content.active {
  display: block;
}
.summay-wap {
  grid-template-columns: repeat(4, 1fr);
}
.summay-wap1 {
  grid-template-columns: repeat(3, 1fr);
}
.summay-wap2 {
  grid-template-columns: repeat(2, 1fr);
}
.b2b-head {
  font-size: 12px;
  line-height: 22px;
  border-bottom: 1px solid #ccc;
  width: fit-content;
}
.new-prt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.gst-upload-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 25px;
  padding: 6px 15px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fafafa;
}
.gst-left {
  display: flex;
  gap: 15px;
}

.gst-left label {
  font-size: 14px;
  cursor: pointer;
}

.gst-divider {
  width: 1px;
  height: 30px;
  background: #ddd;
}
.gst-right {
  display: flex;
  align-items: center;
  gap: 15px;
}

.uplad-btn {
  background: #efeffc;
  color: #111;
  padding: 4px 14px;
  border-radius: 5px;
  text-decoration: none;
  font-size: 13px;
}
.summary-check {
  font-size: 13px;
}

.summary-check input {
  margin-right: 5px;
}
.monthing-type {
  margin-top: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}
.gstr-main {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 20px;
}

.left-side-gstr {
  display: flex;
  align-items: center;
  gap: 20px;
  flex: 1;
}

.progress-bar-gstr {
  position: relative;
  padding-left: 25px;
}

.progress-bar-gstr::before {
  content: "";
  position: absolute;
  left: 8px;
  top: 5px;
  bottom: 5px;
  width: 5px;
  background: #ddd;
}

.progress-bar-gstr .step {
  position: relative;
  margin: 15px 0;
  font-size: 14px;
}
.progress-bar-gstr .step::before {
  content: "";
  position: absolute;
  left: -22px;
  top: 4px;
  width: 15px;
  height: 15px;
  background: #ddd;
  border-radius: 50%;
}
.right-side-gstr {
  flex: 1;
  border-left: 1px solid #eee;
  padding-left: 25px;
  text-align: center;
}

.right-head {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
}
.right-head h4 {
  font-size: 16px;
}

.reset-btn {
  color: #e31b1b;
  font-size: 13px;
  text-decoration: none;
}

.right-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.btn-outline {
  border: 1px solid #e31b1b;
  padding: 3px 12px;
  color: #e31b1b;
  border-radius: 4px;
  text-decoration: none;
}

.btn-fill {
  background: #e31b1b;
  color: #fff;
  padding: 3px 12px;
  border-radius: 4px;
  text-decoration: none;
}
.gstr-advisory-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 15px;
  border: 1px solid #e31b1b;
  background: #fff5f5;
  border-radius: 6px;
  margin: 10px 10px;
}
.advisory-icon {
  color: #e31b1b;
  font-size: 18px;
}
.gstr-advisory-box p {
  margin: 0;
  font-size: 14px;
  color: #333;
}
.gst-accordion-wrap {
  width: 100%;
  padding: 10px 10px;
}

.gst-acc-row {
  display: flex;
  gap: 15px;
  margin-bottom: 15px;
}

.gst-acc-box {
  flex: 1;
  border: 1px solid #ddd;
  border-radius: 6px;
  overflow: hidden;
}

.full-width {
  flex: 100%;
}

.gst-acc-head {
  padding: 5px 15px;
  background: #f5f5f5;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}
.gst-acc-head h4 {
  font-size: 14px;
  color: #000;
  margin: 0;
}
.our-type-sec {
  margin-top: 10px;
  border: 1px solid #eb3e1b;
  border-radius: 8px;
  margin: 10px;
}

.gst-acc-body {
  display: block;
}
.rated-type {
  border: 1px solid #ddd;
  padding: 3px 10px;
  border-radius: 5px;
}
.col-type1 {
  width: 300px;
  min-width: 300px !important;
}
.chevron-icon {
  transition: transform 0.3s ease;
}

.chevron-icon.rotate {
  transform: rotate(180deg);
}

.gst-acc-table {
  width: 100%;
  border-collapse: collapse;
}
.gst-acc-table th {
  border: 1px solid #eee;
  padding: 3px 10px;
  font-weight: 600;
  font-size: 12px;
}
.gst-acc-table td {
  border: 1px solid #eee;
  padding: 8px 10px;
  font-size: 13px;
}
.last-accc {
  text-align: center;
}
.next-ctip {
  padding: 10px;
  text-align: left;
}
.new-head {
  background: #fff !important;
}

.filing-section {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
  display: flex;
  justify-content: center;
  margin-top: 15px;
}

.filing-box1 {
  width: 600px;
  text-align: center;
}

.filing-radio {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 15px;
}

.radio-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.radio-item input {
  accent-color: #e31b1b;
}
.filing-row {
  display: flex;
  gap: 10px;
  margin-bottom: 15px;
}

.filing-field {
  flex: 1;
  text-align: left;
}

.filing-field label {
  font-size: 12px;
  display: block;
  margin-bottom: 4px;
}

.filing-field input,
.filing-field select {
  width: 100%;
  padding: 7px;
  height: 28px;
  border: 1px solid #ddd;
  border-radius: 4px;
  color: gray;
}
.filing-title {
  font-size: 14px;
  margin: 10px 0 5px;
}
.filing-note {
  font-size: 12px;
  color: #777;
  margin-bottom: 15px;
}
.filing-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
}

.evc-btn {
  background: #e31b1b;
  color: #fff;
  border: none;
  padding: 0px 16px;
  border-radius: 6px;
  cursor: pointer;
  height: 35px;
}

.dsc-btn {
  background: #111;
  color: #fff;
  border: none;
  padding: 0px 16px;
  height: 35px;
  border-radius: 6px;
  cursor: pointer;
}
.evc-btn:hover {
  background: #c91515;
}
.dsc-btn:hover {
  background: #333;
}
.pan-dropdown {
  position: relative;
}

.pan-select {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 3px 10px;
  height: 28px;
  cursor: pointer;
  font-size: 13px;
  background: #fff;
}
.pan-menu {
  display: none;
  position: absolute;
  width: 100%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 4px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  z-index: 10;
}
.add-pan {
  display: block;
  padding: 10px;
  font-size: 13px;
  color: #e31b1b;
  text-decoration: none;
  border-radius: 8px;
}

.add-pan:hover {
  background: #f9f9f9;
}
.portal-name {
  font-size: 12px;
  color: #eb3e1b;
  text-align: end;
}
.otp-action {
  display: none;
}
.default-actions {
  gap: 10px;
}
.otp-btn {
  background: #2563eb;
  color: #fff;
  border: none;
  padding: 0px 18px;
  border-radius: 6px;
  height: 35px;
  cursor: pointer;
}
.otp-btn:hover {
  background: #1d4ed8;
}
/* wrapper */
.compare-section {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  background: #fff;
}

/* toggle */
.compare-toggle {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 20px;
}

.toggle-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
}

.toggle-item input {
  accent-color: #e31b1b;
}
.compare-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
}
.compare-card {
  border: 1px solid #eee;
  border-radius: 10px;
  text-align: center;
  transition: 0.25s;
  padding: 0px 0px 20px;
  overflow: hidden;
}
.compare-card h2 {
  font-size: 20px;
  background: #efeffc;
  color: #e31b1b;
  margin-bottom: 20px;
  padding: 4px 0px;
}
.compare-card h4 {
  margin: 0 0 5px;
  font-size: 15px;
}
.compare-card p {
  font-size: 12px;
  color: #777;
  margin-bottom: 10px;
}
.card-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid #e31b1b;
  margin: 0 auto 10px;
  border-radius: 5px;
  width: fit-content;
}
.download-btn5 {
  padding: 0px 12px;
  border: none;
  color: #fff;
  height: 32px;
  background: #e31b1b;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
}
.view-icon {
  cursor: pointer;
  font-size: 14px;
  padding: 6px;
  border-radius: 6px;
  transition: 0.2s;
}

.view-icon:hover {
  background: #f3f4f6;
}
.doc-count {
  font-size: 12px;
  color: #555;
}
.compare-footer {
  margin-top: 20px;
  text-align: center;
}

.match-btn {
  background: #eb3e1b;
  color: #fff;
  height: 28px;
  border: none;
  padding: 0px 20px;
  border-radius: 6px;
  cursor: pointer;
}
.compare-alt {
  display: none;
  grid-template-columns: 1fr !important;
}
.tax-section {
  border: 1px solid #eee;
  border-radius: 12px;
  background: #fff;
  margin-top: 20px;
}
.tax-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  padding: 8px 10px;
}
.tax-card {
  display: block;
  border: 1px solid #eee;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  color: #000;
  transition: 0.25s;
  background: #fff;
}
.tax-head {
  background: #f3f4f6;
  padding: 10px;
  font-size: 13px;
  font-weight: 600;
}
.tax-body {
  padding: 10px;
}
.tax-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  padding: 4px 0;
}
.tax-row span:last-child {
  font-weight: 600;
}
.invoice-dropdown {
  position: relative;
  display: inline-block;
}

.invoice-menu {
  display: none;
  position: absolute;
  top: 110%;
  right: 0;
  width: 300px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  z-index: 20;
  padding: 6px;
}
.invoice-item {
  padding: 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: 0.2s;
}
.invoice-item:hover {
  background: #f9f9f9;
}
.invoice-item h5 {
  margin: 0;
  font-size: 13px;
}
.invoice-item p {
  margin: 3px 0 0;
  font-size: 11px;
  color: #777;
}
.gstr-prepare {
  border: 1px solid #ccc;
  border-radius: 10px;
  margin-top: 10px;
}
.gstr-summary-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.part-outward {
  padding: 10px 10px 8px;
}

.gstr-summary-table th {
  padding: 3px;
  font-size: 13px;
  text-align: left;
  font-weight: 400;
  border-right: 1px solid #ddd;
}
.gstr-summary-table td {
  padding: 2px;
  font-size: 13px;
  text-align: center;
  font-weight: 400;
  border-right: 1px solid #ddd;
}
.right-border-row th:last-child {
  border-right: none;
}
.right-border-row td:last-child {
  border-right: none;
}
.gstr-summary-table tbody tr:nth-child(3) td,
.gstr-summary-table tbody tr:nth-child(5) td {
  border-bottom: 1px solid #ddd;
}
.second-tab-wrap {
  margin-top: 15px;
}
.th-inside h4 {
  font-size: 13px;
  margin: 0;
}
.th-inside p {
  font-size: 12px;
  margin: 0;
  font-weight: 400;
}
.it-td {
  margin: 0;
  font-size: 13px;
  font-weight: 500;
}
.gstr3b-table th {
  text-align: center !important;
}
.gstr-main-sec {
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
}
.dropdown-checkbox {
  position: relative;
}
#dropdownBtn {
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  text-align: left;
  margin-top: 2px;
  padding: 8px 12px;
  cursor: pointer;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
#dropdownList {
  display: none;
  position: absolute;
  width: 95%;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 5px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  padding: 8px;
  z-index: 10;
}

#dropdownList label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  height: 20px;
  border-radius: 6px;
  cursor: pointer;
}
#dropdownList label:hover {
  background: #f3f4f6;
}
#dropdownList input {
  accent-color: #e31b1b;
}
.first-return {
  padding: 5px 15px;
  color: #111;
  border: 1px solid #e31b1b;
  border-radius: 5px;
  text-decoration: none;
}
.first-return:hover {
  color: #fff;
  background: #e31b1b;
}

.grp-dropdown {
  position: relative;
  width: 100%;
}

.grp-list {
  display: none;
  position: absolute;
  width: 100%;
  border: 1px solid #ccc;
  background: #fff;
  max-height: 200px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  z-index: 10;
}
.grp-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 10px;
  padding: 6px 10px;
  border: 1px solid #ccc;
  cursor: pointer;
  border-radius: 5px;
  background: #fff;
}
.grp-item {
  padding: 5px 15px;
  cursor: pointer;
}

.grp-item:hover {
  background: #f0f0f0;
}

.grp-create {
  display: block;
  padding: 5px;
  color: blue;
  text-align: center;
  text-decoration: none;
  border-bottom: 1px solid #ddd;
}

.grp-show {
  display: block;
}
.unit-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.unit-label a {
  text-decoration: none;
}
.label-hsn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.label-hsn a {
  text-decoration: none;
}
.radio-group label {
  display: flex;
  align-items: center;
  gap: 10px;
}
.xenon-field textarea {
  height: 85px;
  border: 1px solid #ddd;
  border-radius: 5px;
  color: gray;
  outline: none;
}
.right-side-dash {
  transition: 0.3s ease;
}
.right-side-dash.full {
  margin-left: 5% !important;
}
.sidebar-wrapper.hide {
  width: 5%;
}
.sidebar-wrapper.hide .logo-img .small-img {
  display: block;
  width: 55px;
}
.sidebar-wrapper.hide .logo-img .lar-img {
  display: none;
}
.sidebar-wrapper.hide.my-dash-head {
  display: none;
}
.hide.dash-dividing span {
  display: none;
}
.sidebar-wrapper.hide h3,
.sidebar-wrapper.hide h5,
.sidebar-wrapper.hide .toggle-arrow,
.sidebar-wrapper.hide .btn-online {
  display: none;
}
.sidebar-wrapper.hide .sidebar-scroll {
  padding: 5px;
}
.sidebar-wrapper.hide .left-side-footer {
  padding: 0px 6px;
  margin: 10px 6px;
}
.sidebar-wrapper.hide .dash-head-main {
  border: none;
}

.col-md-10.full {
  width: 95% !important;
}
.sidebar-wrapper.active {
  display: block;
}
.vendor-dropdown {
  position: relative;
  width: 100%;
  height: 35px;
}
.search-box {
  position: unset;
  padding: 10px 40px 10px 12px;
  border-radius: 6px;
  border: 1px solid #ced4da;
  font-size: 14px;
}
.vendor-list {
  display: none;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 300px;
  z-index: 1050;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  margin-top: 5px;
  padding: 0;
  list-style: none;
  max-height: 250px;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

.vendor-list li.vendor-item {
  padding: 6px 15px;
  border-bottom: 1px solid #f1f1f1;
  cursor: pointer;
  transition: background 0.2s;
}

.vendor-list li.vendor-item:hover {
  background-color: #f8f9fa;
}

.name {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
}

.meta {
  font-size: 12px;
  color: #6c757d;
  display: flex;
  justify-content: space-between;
}

.amount {
  color: #198754;
  font-weight: 700;
}

.create-new-btn:hover {
  background: #f0f7ff;
}
.bill-book-start {
  padding: 0px 10px;
}
.data-card {
  height: 100%;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  background: #fff;
  margin-top: 15px;
}
.data-table-wrapper {
  flex: 1;
  overflow: auto;
}

.data-table-wrapper::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.data-table-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

.data-table-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
}

.data-table {
  width: 100%;
  min-width: 900px;
  border-collapse: separate;
  border-spacing: 0;
}

.data-table th {
  position: sticky;
  top: 0;
  background: #f9fafb;
  font-size: 12px;
  text-align: left;
  padding: 3px 10px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #374151;
}
.data-table td {
  padding: 8px 10px;
  font-size: 13px;
  border-right: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
  color: #374151;
}
.data-table th:last-child {
  border-right: none;
}
.data-table td:last-child {
  border-right: none;
}
.data-table thead tr:first-child th:first-child {
  border-top-left-radius: 10px;
}

.data-table thead tr:first-child th:last-child {
  border-top-right-radius: 10px;
}

.data-table tbody tr:hover td {
  background: #f9fafb;
}
.particular-cell {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.particular-cell a {
  text-decoration: none;
  color: #2563eb;
  font-weight: 500;
}
.particular-cell i {
  font-size: 12px;
  color: #6b7280;
}

.data-two-footer {
  border-top: 1px solid #e5e7eb;
  padding: 5px 10px;
  display: flex;
  justify-content: space-between !important;
  align-items: center;
}
.data-footer {
  border-top: 1px solid #e5e7eb;
  padding: 5px 10px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.pre-btn-our {
  background: #efeffc;
  color: #111;
  border: none;
  padding: 2px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}
.next-btn {
  background: #eb3e1b;
  color: #fff;
  border: none;
  padding: 2px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: 0.2s;
}

.full-part-wrap {
  padding: 5px 10px;
}
.content-wrap-tab {
  margin: 8px 10px;
}
.tds-head {
  padding: 10px 0px;
}
.tds-head h4 {
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}
.tds-head p {
  font-size: 13px;
  color: #999;
  margin: 0;
}
.evc-btn {
  padding: 5px 10px;
  background: #eb3e1b;
  text-decoration: none;
  color: #fff;
  border-radius: 3px;
}
.btn-search {
  text-decoration: none;
  padding: 5px 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.shortcut-bar {
  padding: 10px 7px 10px;
  background: #f7eeee;
}

.shortcut-key-wrap {
  display: flex;
  align-items: center;
  gap: 20px;

  background: #ffffff;
  padding: 9px 14px;
  border-radius: 8px;
  width: 100%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.shortcut-bar1 {
  display: flex;
  align-items: center;
  gap: 18px;
  background: #fff;
  border-radius: 6px;
}

.shortcut-title {
  font-weight: 600;
  color: gray;
  font-size: 18px;
  margin-right: 5px;
}

.shortcut-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
}
.shortcut-item p {
  margin: 0;
  color: gray;
  font-size: 14px;
  font-weight: 500;
}
.key {
  padding: 2px 10px;
  border-radius: 4px;
  font-size: 14px;
  color: #111;
  border: 1px solid #ccc;
}
.quick-access-grid a {
  text-decoration: none;
}
.whatsapp-part {
  padding: 10px 0px;
}
.trans-partion {
  background: #fff;
  padding: 10px;
  border-radius: 8px;
}
.trans-partion-inside {
  border: 1px solid #ccc;
  border-radius: 8px;
  padding: 10px;
}
.trans-partion-inside h2 {
  font-size: 22px;
  font-weight: 600;
  color: #333;
}
.checkbox-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 30px;
  margin-top: 15px;
}

.checkbox-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.checkbox-grid input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}
.action-box-whatsapp {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ddd;
  padding: 5px 5px;
  border-radius: 6px;
  background: #fff;
  margin-top: 10px;
}

.btn-cancel-what {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ccc;
  padding: 5px 16px;
  border-radius: 4px;
  cursor: pointer;
}
.icon-down {
  display: flex;
  flex-direction: column;
}

.btn-save-what {
  background: #eb3e1b;
  color: #fff;
  border: none;
  padding: 5px 18px;
  border-radius: 4px;
  cursor: pointer;
}
.btn-cancel-what:hover {
  background: #eaeaea;
}

.btn-save-what:hover {
  background: #0056b3;
}

.mf-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: none;
  gap: 10px;
  align-items: center;
  background: #fff;
  padding: 10px;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.mf-item {
  text-decoration: none;
  text-align: center;
  font-size: 14px;
  position: relative;
  width: 14%;
}

.mf-icon {
  font-size: 22px;
  cursor: pointer;
}

.mf-dropdown {
  position: absolute;
  bottom: 45px;
  left: 0;
  background: #fff;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
  border-radius: 8px;
  padding: 8px;
  display: none;
  flex-direction: column;
  min-width: 120px;
}

.mf-dropdown a {
  padding: 6px 10px;
  text-decoration: none;
  color: #000;
  font-size: 13px;
}

.mf-dropdown a:hover {
  background: #f2f2f2;
}
.mf-sales {
  font-size: 15px;
  font-weight: 600;
  padding: 9px 14px;
  border-radius: 8px;
  width: 40%;
  color: #eb3e1b !important;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  background: linear-gradient(135deg, #e9f7ec, #d7f0dd);
  border: 1px solid #eb3e1b;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.15);
  transition: all 0.25s ease;
}
.mf-sales:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
}

.mf-calendar.active .mf-dropdown {
  display: flex;
}
.print-part {
  padding: 8px;
}
.main-head-print {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
}
.main-head-print h2 {
  font-size: 20px;
  margin: 0;
  font-weight: 600;
  text-align: center;
  padding: 7px 10px;
  border-bottom: 1px solid #ccc;
}

body {
  font-family: Arial, sans-serif;
  background: #fff;
}

.inv-shell-x9 {
  border: 1px solid #111;
}

.inv-title-x9 {
  text-align: center;
  font-weight: bold;
  padding: 10px;
  font-size: 18px;
  border-bottom: 1px solid #111;
}

.tbl-x9 {
  width: 100%;
  border-spacing: 0;
}

.tbl-x9 .row-x9:nth-child(2) .cell-x9 {
  border-top: 1px solid #111;
  border-bottom: 1px solid #111;
}

.cell-x9 {
  padding: 8px;
  vertical-align: top;
  border-right: 1px solid #111;
  border-bottom: 1px solid #111;
}

.row-x9 .cell-x9:last-child {
  border-right: none;
}

.tbl-x9 tr:last-child .cell-x9 {
  border-bottom: none;
}

.logo-x9 {
  width: 120px;
  height: 90px;
  text-align: center;
  font-weight: bold;
}

.comp-x9 {
  width: 300px;
}

.mini-x9 {
  width: 120px;
}

.challan-x9 {
  text-align: left;
}

.box-x9 {
  height: 140px;
}

.head-x9 {
  font-weight: bold;
  text-align: center;
  background: #f5f5f5;
  border-top: 1px solid #111;
}

.foot-x9 {
  font-weight: bold;
}

.txt-bold-x9 {
  font-weight: bold;
}

.tiny-x9 {
  font-size: 12px;
}

.cen-x9 {
  text-align: center;
}

.rit-x9 {
  text-align: right;
}
.table-wrap-print {
  margin: 20px 0px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  padding: 10px;
  display: none;
}
.table-wrap-print.active {
  display: block;
}

.logo-wrap-x9 {
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  background: #f4f4f4;
}
.comp-info-x9 {
  margin-top: 8px;
  font-size: 13px;
}

.mini-x9 {
  width: 120px;
}

.challan-x9 {
  text-align: left;
}
.logo-part-divide {
  display: grid;
  grid-template-columns: 40% 60%;
  gap: 10px;
}
.half-x9 {
  width: 50%;
}

.flex-x9 {
  display: flex;
  justify-content: space-between;
  gap: 10px;
}

.einv-left-x9 {
  height: 160px;
}

.einv-right-x9 {
  width: 200px;
  text-align: center;
  background: #f4f4f4;
}
.qr-box-x9 {
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #888;
  font-weight: bold;
}
.my-table {
  margin-top: 15px;
}
.this-row {
  border-top: 1px solid #111;
}
.second-comp {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  padding: 10px 0px 0px;
  gap: 4px;
}
.second-comp p {
  font-size: 13px;
  margin: 0;
}
.sign-part {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 120px;
  background: #f4f4f4;
  color: #000;
}
.sale-invoice-pdf-wrap {
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 8px;
  margin-top: 20px;
}
.invoice-config-wrapper {
  padding: 10px;
}
.invoice-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}

.invoice-title {
  font-size: 20px;
  margin: 0;
}

.invoice-settings-icon {
  font-size: 24px;
  color: #eb3e1b;
}
.layout-tab-content {
  display: none;
}
.layout-tab-content.active {
  display: block;
}
.invoice-layout-tabs {
  display: flex;
  gap: 8px;
  margin: 12px 0;
}

.layout-tab {
  flex: 1;
  padding: 8px;
  border: none;
  background: none;
  cursor: pointer;
}

.layout-tab.active {
  border-bottom: 2px solid #eb3e1b;
}

.layout-selection-area {
  margin-bottom: 15px;
}

.section-heading {
  font-weight: 600;
  margin-bottom: 8px;
}

.layout-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.form-group {
  margin-bottom: 12px;
}

.input-control {
  width: 100%;
  padding: 6px;
  margin-top: 4px;
}
.checkbox-group {
  padding: 10px 0px;
}
.radio-group label,
.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  cursor: pointer;
}
.sign-inv {
  width: 200px;
}
.btn-save-preview {
  width: 100%;
  padding: 10px;
  background: #000268;
  color: #fff;
  border: none;
  margin-top: 15px;
  cursor: pointer;
}
.advanced-settings-links p {
  margin: 6px 0;
  color: #000268;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
}
.sign-inv {
  width: 200px;
}
.half-type {
  border-right: 1px solid #111 !important;
}
.layout-preview-box img {
  height: 180px;
  width: 150px;
}
.head-label {
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

/* ================= BASE WRAPPER ================= */
.xbarcode-section {
  padding: 20px;
  background: #f7f8fb;
  min-height: 100vh;
  font-family: Arial, sans-serif;
}

/* ================= CARD ================= */
.xbarcode-card,
.xbarcode-preview-card {
  background: #fff;
  border-radius: 8px;
  padding: 18px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
  border: 1px solid #ccc;
}

/* ================= HEADER ================= */
.xbarcode-header h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #222;
}

/* ================= TOGGLE ================= */
.xbarcode-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 15px 0;
  font-weight: 500;
  color: #333;
}

.xbarcode-switch {
  position: relative;
  width: 46px;
  height: 24px;
  display: inline-block;
}

.xbarcode-switch input {
  display: none;
}

.xbarcode-slider {
  position: absolute;
  cursor: pointer;
  background: #ccc;
  border-radius: 30px;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  transition: 0.3s;
}

.xbarcode-slider:before {
  content: "";
  position: absolute;
  height: 18px;
  width: 18px;
  background: #fff;
  border-radius: 50%;
  left: 3px;
  top: 3px;
  transition: 0.3s;
}

.xbarcode-switch input:checked + .xbarcode-slider {
  background: #28a745;
}

.xbarcode-switch input:checked + .xbarcode-slider:before {
  transform: translateX(22px);
}

/* ================= INPUT FIELDS ================= */
.xbarcode-field {
  margin-bottom: 12px;
}

.xbarcode-field label {
  font-size: 13px;
  color: #444;
  margin-bottom: 4px;
  display: block;
}

.xbarcode-input {
  width: 100%;
  height: 35px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 6px 10px;
  font-size: 13px;
  outline: none;
  transition: 0.2s;
}

.xbarcode-input:focus {
  border-color: #eb3e1b;
  box-shadow: 0 0 0 2px rgba(74, 144, 226, 0.15);
}

/* ================= SECTION TITLE ================= */
.xbarcode-section-title {
  margin: 18px 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: #111;
  padding-left: 8px;
}

/* ================= LABEL SETTINGS ================= */
.xbarcode-label {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.xbarcode-label span {
  width: 70px;
  font-size: 13px;
  color: #333;
}

.xbarcode-label input[type="text"] {
  flex: 1;
  height: 34px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 8px;
  font-size: 13px;
  outline: none;
}

/* checkbox alignment */
.xbarcode-label input[type="checkbox"] {
  transform: scale(1.1);
}

/* ================= COMPANY SECTION ================= */
.xbarcode-company {
  margin-top: 15px;
}

.xbarcode-company label {
  font-size: 13px;
  font-weight: 500;
  display: block;
  margin-bottom: 6px;
}

.xbarcode-company input {
  width: 100%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #ddd;
  padding: 6px 10px;
}

/* ================= RIGHT PREVIEW ================= */
.xbarcode-preview-card h5 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 15px;
}

.xbarcode-preview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.xbarcode-box {
  height: 90px;
  border: 1px solid #bbb;
  border-radius: 5px;
  background: #fafafa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #777;
  transition: 0.2s;
}

.xbarcode-box:hover {
  border-color: #4a90e2;
  background: #f0f6ff;
}

/* ================= HIDE ANIMATION ================= */
#barcodeFields {
  transition: all 0.3s ease;
}

.table-wrap-print1 {
  display: none;
}

.table-wrap-print1.active {
  display: block;
}
.hii-print {
  padding: 10px;
}
.land-part-wrap {
  margin: 20px 0px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.3);
  padding: 10px;
}
.thermal-x9 {
  margin: auto;
  font-size: 12px;
}

.line-x9 {
  border-top: 1px dashed #000;
  margin: 8px 0;
}

.block-x9 {
  margin: 5px 0;
}

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

.logo-wrap-x9 {
  height: 60px;
  background: #eee;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sign-box-x9 {
  height: 60px;
  background: #eee;
  text-align: center;
  line-height: 60px;
}

.txt-bold-x9 {
  font-weight: bold;
}

.tiny-x9 {
  font-size: 11px;
}

.foot-x9 {
  text-align: center;
  font-size: 11px;
}

.search-wrap {
  width: 220px;
  margin-left: 15px;
  background: #fff !important;
}
.xk-wrapper {
  position: relative;
  display: inline-block;
}

.xk-trigger-btn {
  background: #fff;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 20px;
  color: #333;
  transition: all 0.2s;
}

.xk-trigger-btn:hover {
  background: #f5f5f5;
}

.xk-side-panel {
  position: fixed;
  top: 0;
  right: -320px;
  width: 300px;
  height: 100vh;
  background: #fff;
  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.12);
  z-index: 9999;
  transition: right 0.3s ease;
  padding: 16px;
  overflow-y: auto;
}

.xk-side-panel.xk-open {
  right: 0;
}

.xk-panel-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.xk-close-btn {
  background: none;
  border: none;
  font-size: 18px;
  cursor: pointer;
  color: #555;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.2s;
}

.xk-close-btn:hover {
  background: #f0f0f0;
}

.xk-search-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  padding: 8px 12px;
  margin-bottom: 20px;
  gap: 8px;
}

.xk-search-input {
  border: none;
  outline: none;
  flex: 1;
  font-size: 14px;
  color: #333;
}

.xk-chev-icon {
  color: #888;
  font-size: 14px;
}

.xk-report-section {
  margin-top: 8px;
}

.xk-report-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.xk-rep-icon {
  font-size: 20px;
  color: #4a90e2;
}

.xk-report-head span {
  font-size: 15px;
  font-weight: 600;
  color: #222;
}

.xk-report-links {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 8px;
}

.xk-rep-link {
  text-decoration: none;
  color: #444;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: background 0.2s;
}

.xk-rep-link:hover {
  background: #f0f6ff;
  color: #4a90e2;
}

.xk-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.3);
  z-index: 9998;
}

.xk-overlay.xk-open {
  display: block;
}
.export-wrap {
  position: relative;
  display: inline-block;
}

.export-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 16px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #333;
  cursor: pointer;
  transition: background 0.15s;
}
.export-btn:hover {
  background: #f5f5f5;
}
.export-btn .chevron {
  transition: transform 0.2s;
}
.export-btn.open .chevron {
  transform: rotate(180deg);
}

.drop-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 0px;
  min-width: 200px;
  z-index: 999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}
.drop-menu.open {
  display: block;
}

.section-label {
  font-size: 11px;
  font-weight: 600;
  color: #999;
  padding: 6px 10px 4px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  transition: background 0.12s;
}
.menu-item:hover {
  background: #f5f5f5;
}
.menu-item .ico-dl {
  color: #378add;
}
.menu-item .ico-pdf {
  color: #e24b4a;
}
.menu-item .ico-xls {
  color: #3b6d11;
}
.menu-item .ico-mail {
  color: #7f77dd;
}

.divider {
  height: 1px;
  background: #ebebeb;
  margin: 6px 0;
}
.date-side {
  border: 1px solid #ddd;
  border-radius: 6px;
  color: gray;
  height: 31px;
  padding: 0px 10px;
}

.right-side-nav {
  display: flex;
  align-items: center;
  gap: 9px;
}
.right-side-nav h4{
    font-size: 16px;
    margin: 0;
}

.hello-wrap {
  margin-bottom: 0px;
  padding: 4px 10px;
}
/* ===== LEDGER REPORT MODAL ===== */
.lr-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.38);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.lr-backdrop.lr-open {
  display: flex;
}

.lr-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  height: 520px;
  overflow-y: scroll;
  border: 0.5px solid #ddd;
}

/* Header */
.lr-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 20px;
  border-bottom: 0.5px solid #eee;
}
.lr-title {
  font-size: 15px;
  font-weight: 500;
  color: #111;
}
.lr-close {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: none;
  border: none;
  cursor: pointer;
  color: #666;
  font-size: 20px;
  transition: background 0.15s;
}
.lr-close:hover {
  background: #f5f5f5;
}
.lr-body {
  padding: 20px;
}

.lr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.lr-account-label {
  font-size: 13px;
  font-weight: 500;
  color: #111;
  min-width: 110px;
}

.lr-radio-group {
  display: flex;
  align-items: center;
  gap: 16px;
}
.lr-radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #111;
  cursor: pointer;
}
.lr-radio-label input[type="radio"] {
  accent-color: #378add;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.lr-divider {
  height: 0.5px;
  background: #eee;
  margin: 4px 0 16px;
}

/* Date inputs */
.lr-date-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 20px;
}
.lr-field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.lr-field label {
  font-size: 12px;
  font-weight: 500;
  color: #888;
}
.lr-field input[type="date"] {
  width: 100%;
  padding: 7px 10px;
  border: 0.5px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  color: #111;
  outline: none;
}
.lr-field input[type="date"]:focus {
  border-color: #378add;
  box-shadow: 0 0 0 2px rgba(55, 138, 221, 0.15);
}

.lr-cal-label {
  font-size: 12px;
  font-weight: 500;
  color: #888;
  margin-bottom: 8px;
}

.lr-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8f8f8;
  border-bottom: 0.5px solid #eee;
}
.lr-cal-head span {
  font-size: 13px;
  font-weight: 500;
  color: #111;
}
.lr-cal-nav {
  display: flex;
  gap: 4px;
}
.lr-cal-nav button {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  cursor: pointer;
  border-radius: 6px;
  color: #666;
  font-size: 12px;
  transition: background 0.12s;
}
.lr-cal-nav button:hover {
  background: #ebebeb;
}
.lr-day-name {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #aaa;
  padding: 4px 0 6px;
}
.lr-day {
  text-align: center;
  font-size: 12px;
  padding: 6px 2px;
  cursor: pointer;
  border-radius: 6px;
  color: #111;
  transition: background 0.1s;
}
.lr-day:hover {
  background: #f5f5f5;
}
.lr-day.lr-active {
  background: #378add;
  color: #fff;
  font-weight: 500;
}
.lr-day.lr-range {
  background: #e6f1fb;
  color: #0c447c;
}
.lr-day.lr-today {
  font-weight: 500;
  color: #378add;
}
.lr-day.lr-empty {
  cursor: default;
  pointer-events: none;
}

.lr-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 20px;
  border-top: 0.5px solid #eee;
}
.lr-btn-cancel {
  padding: 8px 18px;
  border: 0.5px solid #ddd;
  border-radius: 8px;
  background: none;
  font-size: 13px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  transition: background 0.12s;
}
.lr-btn-cancel:hover {
  background: #f5f5f5;
}
.lr-btn-generate {
  padding: 8px 20px;
  border: none;
  border-radius: 8px;
  background: #378add;
  font-size: 13px;
  text-decoration: none;
  font-weight: 500;
  color: #fff;
  cursor: pointer;
  transition: opacity 0.12s;
}
.lr-select-group {
  width: 200px;
  margin-left: 10px;
}
.lr-btn-generate:hover {
  color: #fff;
}

.lr-backdrop {
  display: none;
}
.lr-backdrop.lr-open {
  display: flex;
}
.lr-cal {
  border: 0.5px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
  width: 420px;
  margin: auto;
}

.lr-cal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: #f8f8f8;
  border-bottom: 0.5px solid #e0e0e0;
}
.lr-cal-head span {
  font-size: 13px;
  font-weight: 500;
  color: #111;
}
.lr-cal-nav {
  display: flex;
  gap: 4px;
}
.lr-cal-nav button {
  width: 26px;
  height: 26px;
  border: none;
  background: none;
  border-radius: 6px;
  color: #666;
  font-size: 11px;
  cursor: pointer;
}
.lr-cal-nav button:hover {
  background: #ebebeb;
}

.lr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 10px;
  gap: 2px 10px;
}

.lr-day-name {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: #aaa;
  padding: 4px 0 6px;
}

.lr-day {
  text-align: center;
  font-size: 13px;
  padding: 7px 4px;
  border-radius: 6px;
  cursor: pointer;
  color: #333;
}
.lr-day:hover {
  background: #f0f4ff;
}
.lr-day.lr-empty {
  cursor: default;
  pointer-events: none;
}
.lr-day.lr-today {
  font-weight: 500;
  color: #378add;
}
.lr-day.lr-active {
  background: #378add;
  color: #fff;
  font-weight: 500;
}
.lr-field-group {
  margin-bottom: 16px;
}
.lr-field-group label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: #888;
  margin-bottom: 5px;
}
.lr-select-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  color: #888;
  background: #fff;
  position: relative;
}
.lr-select-box.open {
  border-color: #378add;
}
.lr-sel-chevron {
  font-size: 11px;
  transition: transform 0.2s;
}
.lr-select-box.open .lr-sel-chevron {
  transform: rotate(180deg);
}

.lr-dropdown {
  display: none;
  border: 1px solid #e0e0e0;
  border-radius: 10px;
  margin-top: 4px;
  background: #fff;
  overflow: hidden;
  position: absolute;
}
.lr-dropdown.open {
  display: block;
}
.lr-drop-part {
  width: 420px;
}
.lr-drop-part1 {
  width: 200px;
}
.lr-sel-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-bottom: 1px solid #eee;
}
.lr-sel-search input {
  border: none;
  outline: none;
  font-size: 13px;
  width: 100%;
}

.lr-sel-list {
  max-height: 200px;
  overflow-y: auto;
}
.lr-sel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  font-size: 13px;
  cursor: pointer;
}
.lr-sel-item:hover {
  background: #f5f8ff;
}
.lr-sel-item.checked {
  background: #f0f6ff;
  font-weight: 500;
}
.lr-sel-item input[type="checkbox"] {
  accent-color: #378add;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.lr-sel-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 1px solid #eee;
  font-size: 12px;
  color: #888;
}
.lr-sel-footer button {
  background: none;
  border: none;
  color: #e24b4a;
  font-size: 12px;
  cursor: pointer;
}