:root {

  --gradient1: linear-gradient(to right, #ffffff 0%, #f2f2f2 100%);
  --gradient2: linear-gradient(to right, #00323c 0%, #013a54 100%);
  /* Colors */
  --primary-color: #00323c;
  --secondary-color: #ffffff;
  --success-color: #16a34a;
  --danger-color: #dc2626;
  --background-color: #f8fafc;
  --text-color: #1e293b;

  --dark-border-color: #e2e8f0;

  /* Dark Theme Colors - Default (Light) 1e293b */
  --dark-bg-primary: #f8fafc;
  --dark-bg-secondary: #ffffff;
  /* --dark-bg-card: #ffffff; */
  --dark-bg-card: #00323c;
  --dark-text-primary: #d6d9da;
  --dark-text-tertiary: #1e293b;
  --dark-text-secondary: #64748b;
  --dark-border-color: #e2e8f0;
  --dark-shadow: rgba(0, 0, 0, 0.1);

  --open-color: #1e293b;
  --converted-color: #005e83;
  --completed-color: #16a34a;
  --draft-color: #717171;
  --updated-color: #845dfb;
  --expired-color: #ae3232;
  --rejected-color: #ae3232;
  --created-color: #3c75b7;
  --approved-color: #3c75b7;
  --unapproved-color: #3c75b7;


  /* Success */
  --color-success: #2a9b2a;

  /* Grey / Draft */
  --color-grey: #717171;

  /* Danger */
  --color-danger: #bf3939;

  /* Strong Danger */
  --color-danger-dark: #ae3232;

  /* Warning */
  --color-warning: #df8817;

  /* Primary / Info */
  --color-primary: #3c75b7;

  /* Progress */
  --color-progress: #845dfb;

  /* Initialized */
  --color-initialized: #848030;

  --color-secondary: #dfe5dd;


  /* Font Family */
  --main-font: 'Poppins', sans-serif;

  --font-primary-color: #ffffff;
  --font-secondary-color: #000000;

  /* Font Sizes */
  --font-small: 14px;
  --font-medium: 16px;
  --font-large: 20px;

  /* Border */
  --border-radius: 8px;
  --border-color: #e2e8f0;
  --border-width: 1px;
}


/* port from old*/
.uline {
  text-decoration: line-through;
}

body {
  margin: 0;
  font-family: "Quicksand", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: #404E67;
  text-align: left;
  background-color: #F5F7FA;
}

/* .st-paid,
.st-due,
.st-partial,
.st-canceled,
.st-rejected,
.st-pending,
.st-accepted .st-Recurring,
.st-Stopped,
.st-Reviewed,
.st-accepted,
.st-active,
.st-inactive,
.st-Waiting,
.st-Assigned,
.st-assigned,
.st-Closed,
.st-Open,
.st-Grey,
.st-draft,
.st-Draft,
.st-dummy,
.st-Invoiced,
.st-Printed,
.st-Reverted,
.st-reverted,
.st-sent,
.st-received,
.st-created,
.st-inprogress,
.st-approved,
.st-waitingapproval,
.st-firstlevel,
.st-secondlevel,
.st-initialized,
.st-fullyconverted,
.st-updated,
.st-cancelled,
.st-expiring-today,
.st-expiring,
.st-expired,
.st-matched,
.st-categorized {
  /* text-transform: capitalize; */
/* color: #fff; */
/* padding: 2px 7px 4px; */
/* border-radius: 6px; */
/* font-size: 0.857rem; */
/* line-height: 2; */

/* display: inline-block;
  padding: .35em .65em;
  font-size: .75em;
  font-weight: 700;
  line-height: 1;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem; */
/* } */

.st-paid,
.st-accepted,
.st-Reviewed,
.st-active,
.st-Invoiced,
.st-sent,
.st-received,
.st-secondlevel,
.st-fullyconverted,
.st-approved,
.st-matched,
.st-converted {
  background-color: var(--color-success);
}

.st-Grey,
.st-Draft,
.st-draft,
.st-dummy,
.st-Solved,
.st-Waiting,
.st-Processing {
  background-color: var(--color-grey);
}

.st-due,
.st-waitingapproval,
.st-Stopped,
.st-inactive,
.st-Closed,
.st-closed {
  background-color: var(--color-danger);
}

.st-rejected,
.st-reverted,
.st-Assigned,
.st-assigned,
.st-Reverted,
.st-canceled,
.st-cancelled,
.st-expired {
  background-color: var(--color-danger-dark);
}

.st-partial,
.st-expiring-today,
.st-categorized,
.st-partialy-converted,
.st-not-converted,
.st-partiallypaid {
  background-color: var(--color-warning);
}

.st-pending,
.st-firstlevel,
.st-updated,
.st-Recurring,
.st-Open,
.st-open,
.st-created,
.st-expiring,
.st-Printed {
  background-color: var(--color-primary);
}

/* Purchase Bill's own derived status label — not used by any other module. */
.st-overdue {
  background-color: var(--color-danger);
}

.st-inprogress,
.st-customer_approved,
.st-assign-for-delivery {
  background-color: var(--color-progress);
}

.st-initialized {
  background-color: var(--color-initialized);
}




.alert-success,
.alert-converted,
.alert-accepted,
.alert-sent,
.alert-accept-the-quote,
.alert-fully-shipped,
.alert-invoiced,
.alert-fully-returned,
.alert-completed,
.alert-approved,
.alert-accept {
  background-color: var(--color-success);
}


.alert-danger,
.alert-rejected,
.alert-reverted,
.alert-expired,
.alert-written-off,
.alert-delivered,
.alert-cancelled {
  background-color: var(--color-danger-dark);
}


.alert-info,
.alert-assigned,
.alert-open {
  background-color: var(--color-primary);
}


.alert-secondary,
.alert-draft {
  background-color: var(--color-secondary);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.alert-canceled,
.alert-deleted {
  background-color: var(--color-danger-dark);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.alert-partial,
.alert-created,
.alert-updated,
.alert-partially-converted,
.alert-partially-shipped,
.alert-partially-returned {
  background-color: var(--color-warning);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}




.alert-progress,
.alert-in-progress {
  background-color: var(--color-progress);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}


.alert-initialized,
.alert-shipping-initialized,
.alert-return-initialized,
.alert-transfer-initialized {
  background-color: var(--color-initialized);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.task_Progress,
.task_Due,
.task_Done {
  text-transform: capitalize;
  color: #fff;
  padding: 2px 7px 4px;
  border-radius: 6px;
  font-size: 0.857rem;
  line-height: 2;
}

.task_Done {
  background-color: #5ed45e;
}

.task_Due {
  background-color: #d45e7f;
}

.task_Progress {
  background-color: #848030;
}

.quantity {
  position: relative;
  padding: 2px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity input {
  width: 70px;
  height: 34px;
  line-height: 1.45;
  float: left;
  display: block;
  padding: 0;
  margin-top: 3px;
  padding-left: 2px;
  border: 1px solid #eee;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 0.929rem;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  line-height: 1.7;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
  background: #81ffa2;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
  background: #ff9e9e;
}

.horizontal-layout.chat-application .app-content {
  min-height: calc(100% - 65px) !important;
}

.pos_stripe tbody tr:nth-child(4n+1),
.pos_stripe tbody tr:nth-child(4n+2) {
  background-repeat: repeat-x;
  background-image: linear-gradient(45deg, #3cb4f5, #b5e1f5);
}

.tfr td {
  padding: 10px;
}

.ballsWaveG {
  position: relative;
  width: 144px;
  height: 34px;
  margin: 10px auto;
}

.ballsWaveG {
  position: absolute;
  top: 0;
  background-color: rgb(4, 162, 219);
  width: 18px;
  height: 18px;
  animation-name: ballsWaveG;
  -o-animation-name: ballsWaveG;
  -ms-animation-name: ballsWaveG;
  -webkit-animation-name: ballsWaveG;
  -moz-animation-name: ballsWaveG;
  animation-duration: 1.3s;
  -o-animation-duration: 1.3s;
  -ms-animation-duration: 1.3s;
  -webkit-animation-duration: 1.3s;
  -moz-animation-duration: 1.3s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  border-radius: 9px;
  -o-border-radius: 9px;
  -ms-border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
}

#ballsWaveG_1 {
  left: 0;
  animation-delay: 0.52s;
  -o-animation-delay: 0.52s;
  -ms-animation-delay: 0.52s;
  -webkit-animation-delay: 0.52s;
  -moz-animation-delay: 0.52s;
}

#ballsWaveG_2 {
  left: 18px;
  animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
  -ms-animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
}

#ballsWaveG_3 {
  left: 36px;
  animation-delay: 0.78s;
  -o-animation-delay: 0.78s;
  -ms-animation-delay: 0.78s;
  -webkit-animation-delay: 0.78s;
  -moz-animation-delay: 0.78s;
}

#ballsWaveG_4 {
  left: 54px;
  animation-delay: 0.91s;
  -o-animation-delay: 0.91s;
  -ms-animation-delay: 0.91s;
  -webkit-animation-delay: 0.91s;
  -moz-animation-delay: 0.91s;
}

#ballsWaveG_5 {
  left: 72px;
  animation-delay: 1.04s;
  -o-animation-delay: 1.04s;
  -ms-animation-delay: 1.04s;
  -webkit-animation-delay: 1.04s;
  -moz-animation-delay: 1.04s;
}

#ballsWaveG_6 {
  left: 90px;
  animation-delay: 1.17s;
  -o-animation-delay: 1.17s;
  -ms-animation-delay: 1.17s;
  -webkit-animation-delay: 1.17s;
  -moz-animation-delay: 1.17s;
}

#ballsWaveG_7 {
  left: 108px;
  animation-delay: 1.3s;
  -o-animation-delay: 1.3s;
  -ms-animation-delay: 1.3s;
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
}

#ballsWaveG_8 {
  left: 126px;
  animation-delay: 1.43s;
  -o-animation-delay: 1.43s;
  -ms-animation-delay: 1.43s;
  -webkit-animation-delay: 1.43s;
  -moz-animation-delay: 1.43s;
}

.my_stripe tbody tr:nth-child(4n+1),
.my_stripe tbody tr:nth-child(4n+2) {
  background-color: #ededed;
}

.sub_c {
  background-color: #fff !important;
}

#customer-box-result ol,
#supplier-box-result ol {
  color: #ccc;
  list-style-type: none;
}

#customer-box-result ol li,
#supplier-box-result ol li {
  position: relative;
  font-size: 1.143rem;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 5px;
}

#customer-box-result p,
#supplier-box-result p {
  font-size: 1rem;
  padding-left: 14px;
  color: #555;
}

#customer-box-result span,
#supplier-box-result span {
  position: absolute;
}

.ui-front li {
  list-style: none;
  margin-left: -30px;
}

.ui-menu-item-wrapper {
  /* background-color: #b3d8e4;
    max-width: 60%;
    border-bottom: 1px solid #ddd;
    padding: 4px; */
  background-color: #f1f1f1;
  /* max-width: 30%; */
  border-bottom: 1px solid #d0cbcb;
  padding: 4px 10px 4px 11px;
  color: #000000;
}

.st-sub2 {
  background-color: #5ed45e;
  padding: 4pt;
  border-radius: 2pt;
  color: #fff;
}

.st-sub3 {
  background-color: #5da6fb;
  padding: 4pt;
  border-radius: 2pt;
  color: #fff;
}

.st-sub4 {
  background-color: #fb5de8;
  padding: 4pt;
  border-radius: 2pt;
  color: #fff;
}

.has-error {
  color: #ff2a2a;
  border: 1px solid !important;
  padding: 0px;
}

.ui-helper-hidden-accessible {
  display: none;
}

.project_Progress,
.project_Pending,
.project_Finished,
.project_Waiting,
.project_Terminated {
  text-transform: capitalize;
  color: #fff;
  padding: 2px 7px 4px;
  border-radius: 6px;
  font-size: 0.857rem;
  line-height: 2;

}

.project_Progress {
  background-color: #4979d0;
}

.project_Finished {
  background-color: #5ed45e;
}

.project_Waiting {
  background-color: #d45e7f;
}

.project_Pending {
  background-color: #49d0b7;
}

.project_Terminated {
  background-color: #848030;
}

.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}

.timeline>li {
  margin-bottom: 20px;
  position: relative;
}

.timeline>li:before,
.timeline>li:after {
  content: " ";
  display: table;
}

.timeline>li:after {
  clear: both;
}

.timeline>li:before,
.timeline>li:after {
  content: " ";
  display: table;
}

.timeline>li:after {
  clear: both;
}

.timeline>li>.timeline-panel {
  width: 50%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline>li.timeline-inverted+li:not(.timeline-inverted),
.timeline>li:not(.timeline-inverted)+li.timeline-inverted {
  margin-top: -60px;
}

.timeline>li:not(.timeline-inverted) {
  padding-right: 90px;
}

.timeline>li.timeline-inverted {
  padding-left: 90px;
}

.timeline>li>.timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline>li>.timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline>li>.timeline-badge {
  color: #fff !important;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: #999999;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.timeline>li.timeline-inverted>.timeline-panel {
  float: right;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}

.timeline-badge.primary {
  background-color: #2e6da4 !important;
}

.timeline-badge.success {
  background-color: #3f903f !important;
}

.timeline-badge.warning {
  background-color: #f0ad4e !important;
}

.timeline-badge.danger {
  background-color: #d9534f !important;
}

.timeline-badge.info {
  background-color: #5bc0de !important;
}

.timeline-title {
  margin-top: 0;
  color: inherit;
}

.timeline-body>p,
.timeline-body>ul {
  margin-bottom: 0;
}

.timeline-body>p+p {
  margin-top: 5px;
}

.sbox-result ol {
  color: #ccc;
  list-style-type: none;
}

.sbox-result p {
  font-size: 1rem;
  padding-left: 14px;
  color: #555;
}

.sbox-result span {
  position: absolute;
}

/* port from old end*/
.brand-logo {
  max-height: 45px;
}

/* .brand-logo {max-height: 2.5rem;} */

@media (min-width: 992px) {
  .sidebar {
    vertical-align: top;
    width: 600px !important;
  }

  body .content-right {
    width: -webkit-calc(100% - 600px) !important;
    width: -moz-calc(100% - 600px) !important;
    width: calc(100% - 600px) !important;
    float: right;
  }

  .chat-application .chat-fixed-search {
    width: 600px !important;
  }

  .chat-application .chat-fixed-search input {
    width: 300px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar {
    vertical-align: top;
    width: 330px !important;
  }

  body .content-right {
    width: -webkit-calc(100% - 330px) !important;
    width: -moz-calc(100% - 330px) !important;
    width: calc(100% - 330px) !important;
    float: right;
  }

  .chat-application .chat-fixed-search {
    width: 330px !important;
  }
}

@media (max-width: 767.98px) and (max-width: 576px) {
  .sidebar {
    vertical-align: top;
    width: 280px !important;
  }

  body .content-right {
    width: -webkit-calc(100% - 280px) !important;
    width: -moz-calc(100% - 280px) !important;
    width: calc(100% - 280px) !important;
    float: right;
  }

  .chat-application .chat-fixed-search {
    width: 280px !important;
  }
}

#pos_items .row:nth-child(2n) {
  background-repeat: repeat-x;
  background-image: linear-gradient(45deg, #e0eaf0, #f3f5f6);
}

.error {
  color: #CC0000;
}

.st-Waiting,
.st-Solved,
.st-Processing,
.st-paid,
.st-Invoiced,
.st-accepted,
.st-reviewed,
.st-active,
.st-invoiced,
.st-sent,
.st-received,
.st-secondlevel,
.st-fullyconverted,
.st-approved,
.st-matched,
.st-converted,
.st-customer_approved,
.st-grey,
.st-draft,
.st-Draft,
.st-dummy,
.st-due,
.st-waitingapproval,
.st-stopped,
.st-inactive,
.st-closed,
.st-rejected,
.st-reverted,
.st-assigned,
.st-canceled,
.st-cancelled,
.st-expired,
.st-partial,
.st-expiring-today,
.st-categorized,
.st-partialy-converted,
.st-not-converted,
.st-pending,
.st-firstlevel,
.st-updated,
.st-recurring,
.st-open,
.st-created,
.st-Closed,
.st-expiring,
.st-printed,
.st-inprogress,
.st-assign-for-delivery,
.st-initialized,
.st-overdue,
.st-partiallypaid {
  text-transform: capitalize;
  color: #fff;
  padding: 2px 7px 4px;
  border-radius: 6px;
  font-size: 0.857rem;
  /* line-height: 2; */
}

.navbar-wrapper {
  max-height: 8rem;
}

@media (min-width: 576px) {
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    margin: 0;
  }
}

.dt-buttons {
  display: inline;
  margin-right: 1rem;
  width: auto !important;
}

.dataTables_length {
  display: inline;
  margin-right: 1rem;
}

.dataTables_filter {
  display: inline;
  float: right;
}

.buttons-html5 {
  padding: .2rem;
  background: #28b9ff;
}

.p-mobile {
  padding: 0.3rem !important;
}

@media (max-width: 968px) {
  .p-mobile {
    padding: 0.3rem !important;
  }

  .p-width {
    width: 145% !important;
  }
}

.form-control-sm {
  height: -webkit-calc(1.375rem + 2px) !important;
  height: -moz-calc(1.375rem + 2px) !important;
  height: calc(1.375rem + 2px) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  border-radius: 0.21rem !important;
}

.form-textarea {
  border: 1px solid #f3f3f3 !important;
  color: #3f587e;
  border-bottom: 1px solid #afafaf !important;
  background: #ffffff !important;
  min-height: 50px !important;
  padding: 0.35rem 1rem !important;
  border-radius: 4px;
  width: 100%;
}

form .dataTables_length select {
  padding-right: 15px;
}

.reverse_align {
  text-align: right;
}

.select2 {
  min-width: 14rem;
}

/* Added by jaison */
.avatar-sm.align-baseline .rounded-circle {
  width: 45px;
}

.btn-warning {
  border-color: #a5a5a5 !important;
  background-color: #ffffff !important;
  color: #2f2f2f;
}

.bg-primary.bg-darken-2,
.bg-danger.bg-darken-2,
.bg-warning.bg-darken-2,
.bg-success.bg-darken-2 {
  background-color: #ffffff !important;
  /* color: #333; */
}

.bg-table {
  background: #ededed !important;
}

.fixed-width-select {
  width: 380px !important;
}

.bg-primary.bg-darken-2 .white,
.bg-danger.bg-darken-2 .white,
.bg-warning.bg-darken-2 .white,
.bg-success.bg-darken-2 .white {
  color: #000000 !important;
}

.header-navbar {
  padding: 0px;
  min-height: 2.3rem;
}

.header-navbar .main-menu-content.navbar-container ul.nav li>a.nav-link {
  padding: 0.9rem 0.6rem;
  font-size: 1rem;
  margin-right: 13px;

}

.btn-secondary {
  color: #101010;
  background-color: #ffffff;
  border-color: #404E67;
}


.btn-success:hover,
.btn-primary:hover,
.btn-blue:hover,
.btn-info:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple:hover {
  border-color: #ffffff !important;
  background-color: #c7c7c7 !important;
  color: #000 !important;
}

.card {
  border-radius: 10px !important;
}

.btn-pink {
  border-color: #707070 !important;
  background-color: #ffffff !important;
  color: #4a4a4a;
}

.alert-success {
  border-color: #9acdbe !important;
  background-color: #e5fff7 !important;
  color: #053124 !important;
}

.border-amber {
  border: 1px solid #2e2e2e !important;
}

.bg-gradient-directional-purple {
  background-image: linear-gradient(45deg, #6788ad, #3e94ab) !important;
  background-repeat: repeat-x;
}

.btn-success,
.btn-blue,
.btn-purple,
.btn-danger,
.btn-info {
  border-color: #a5a5a5 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

.shadow {
  -webkit-box-shadow: 3px 3px 10px 3px #dddddd;
  -moz-box-shadow: 3px 3px 10px 3px #dddddd;
  box-shadow: 3px 3px 10px 3px #dddddd;
}

.pt30px {
  padding-top: 30px !important;
}

.bg-none {
  background: none !important;
}

.wid100 {
  width: 100px !important;
}

.wid90per {
  width: 90% !important;
}

.wid100per {
  width: 100% !important;
}

.wid150 {
  width: 150px !important;
}

.wid200 {
  width: 200px !important;
}

.tablewidth100 {
  width: 100% !important;
}

.tablewidth100 th {
  padding: 0.75rem 2rem !important;
}

.tablewidth100 td {
  padding: 5px 10px 5px 15px !important;
}

/* table.tablewidth100 thead .sorting{
    position: absolute;
    bottom: 0.4em;
    display: block;
    opacity: 0.3;
} */

.remove-textstyle {
  border: none !important;
  background: none !important;
  font-weight: 800 !important;
  font-size: 1.071rem !important;
  color: #3f587e;
  /* background: #fbfbfb !important; */
  height: calc(2.35rem + 2px) !important;
  padding: 0.35rem 1rem !important;
  display: block;
  width: 100%;
}

.pl-14 {
  padding-left: 14px !important;
}

.small-img {
  width: 45px !important;
  height: 45px !important;
}

.table-container {
  /* max-width: 100%;
    overflow-x: auto; */
  text-decoration: none;
}

.table-table-scroll {
  max-width: 100%;
  overflow-x: scroll;
  text-decoration: none;
}

.mb-btn {
  margin-bottom: 5px !important;
}

.navbar-nav.float-right .mega-dropdown-menu {
  width: 70%;
  left: auto;
  right: 0;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
  width: 70% !important;
  z-index: 99999 !important;

}

.mt-14 {
  margin-top: 14px !important;
}

.submit-section {
  text-decoration: none;
}


/* dshboard css starts  */

a.btncard {
  width: 150px !important;
  height: 130px !important;
  -webkit-box-shadow: 3px 3px 10px 3px #dddddd;
  -moz-box-shadow: 3px 3px 10px 3px #dddddd;
  box-shadow: 3px 3px 10px 3px #dddddd;
  background: #ffffff;
  padding-top: 12px !important;
  text-align: center;
  margin-bottom: 15px;
  margin-right: 9px;

}

.btncard i {
  font-size: 2.143rem;
  color: #32536c;
  margin-top: 20px;
  line-height: 46px;
  margin-bottom: 9px;

}

.btncard span {
  position: absolute !important;
  top: -10px !important;
  right: -11px !important;
  border-radius: 50%;
  line-height: 10px;
  width: 29px;
  height: 29px;
  padding: 10px 1px 1px 2px;
  font-size: 0.786rem;
  text-align: center;

}

a.btncard h1 {
  font-size: 0.857rem;
  font-weight: 600;
  padding-top: 5px;
  color: #1e3446 !important;

}

.btncard:hover {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: -2px 14px 20px 3px #828282;
  /* background-color: #6d84ac; */
  transform: scale(1.1);
  z-index: 99;
  transition: 0.4s;
  transform: scale3d(1.25, 1.25, 0.5);
  background-image: linear-gradient(to right, #002533 0%, #0b394d 100%) !important;
  border-radius: 4px;

}

.btncard:hover span {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: 3px 3px 10px 3px #828282;
  color: #000000;
}

.btncard:hover i {
  color: #ffffff;
}

.bg-danger {
  background-color: #e92d47 !important;
}

.header-navbar.navbar-border.bg-gradient-x-grey-blue {
  /* background-image: linear-gradient(to right, #00323c 0%, #013a54 100%) !important; */
  background-image: var(--gradient2) !important;
  /* border: 6px solid #01686a; */
  /* border-width: 6px 6px 0; */
  /* border-radius: 16px 16px 0 0; */
  /* z-index: 9999; */
  width: 100%;
  /* position: fixed; */
  /* padding-bottom: 2rem; */
  padding-top: 0;
  overflow: visible;
  border: 0;
  padding: 0;


}

.header-navbar .main-menu-content.navbar-container ul.nav li>a.nav-link {
  padding: 0.9rem 0.6rem;
  font-size: 0.929rem;
  margin-right: 13px;
}

.header-navbar .main-menu-content.navbar-container ul.nav li>a.nav-link:hover {
  color: #d32f2f;
}

.col-form-label {
  font-size: 0.857rem;
  color: #363636;
  padding-bottom: calc(0.2rem + 1px);
  font-weight: 600;
}

.common-heading h1 {
  font-size: 1.786rem !important;
  /* margin-left: 25px !important; */
  margin-top: 15px;
  margin-top: 30px;
  margin-bottom: 10px;
  font-weight: 200;
}

a.btncard-login {
  width: 140px !important;
  height: 130px !important;
  background: #ffffff;
  padding-top: 12px !important;
  text-align: center;
  margin-top: 15px;
}

.btncard-login i {
  font-size: 3.071rem;
  color: #5f7682;
  margin-top: 20px;
  line-height: 46px;
  margin-bottom: 5px;
}

.btncard-login span {
  position: absolute !important;
  top: -10px !important;
  right: -11px !important;
  border-radius: 50%;
  line-height: 10px;
  width: 29px;
  height: 29px;
  padding: 10px 1px 1px 2px;
  font-size: 0.786rem;
  text-align: center;

}

a.btncard-login h1 {
  font-size: 0.786rem;
  font-weight: normal;
  padding-top: 5px;
  color: #313131 !important;

}

.btncard-login:hover {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: -2px 14px 20px 3px #828282;
  /* background-color: #6d84ac; */
  transform: scale(1.1);
  z-index: 99;
  transition: 0.4s;
  transform: scale3d(1.25, 1.25, 0.5);
  background-image: linear-gradient(to right, #004763 0%, #6F85AD 100%) !important;
  border-radius: 20px !important;
}

.btncard-login:hover span {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: 3px 3px 10px 3px #828282;
  color: #000000;
}

.btncard-login:hover i {
  color: #ffffff;
}

.h-100.gradient-form.bg-login1 a.btncard-login {
  margin-top: 4px;
  border-radius: 4px;
}

.searchbtn {
  -webkit-box-shadow: 3px 3px 10px 3px #dddddd;
  -moz-box-shadow: 3px 3px 10px 3px #dddddd;
  box-shadow: 3px 3px 10px 3px #dddddd;
  background: #ffffff;
  text-align: center;
  padding: 18px 21px;
  width: auto;
  min-height: 55px;
  border-radius: 30px;
}

.searchbtn h4 {
  font-size: 1.143rem !important;
  width: auto;
  margin-bottom: 0px;
  line-height: 16px;
}

.searchbtn:hover {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: 3px 3px 10px 3px #828282;
}

.customsearchbtn {
  margin-top: 30px;
}

.searchflds {
  border: #e3ebf3 solid 1px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  ;
}

.pos-menuitems {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.navbtn-active {
  /* color: #fff !important;
  background-color: #404E67 !important;
  border-color: #404E67 !important;
  background: linear-gradient(to right, #2d6572 0%, #6F85AD 100%) !important; */

  color: #fff !important;
  background-color: #404E67 !important;
  border-color: #404E67 !important;
  background: linear-gradient(to right, #00323c 0%, #013a54 100%) !important;


}

.navbar-dark .navbar-nav .nav-link .nav-item i {
  margin-right: 0rem;
}

.deskonly {
  display: block;
}

.mobonly {
  display: none;
}

.deskonly {
  display: block;
}

.login-btn-section {
  text-align: left;
}

.mobonly img {
  display: none;
  margin-bottom: 15px;
}

.deskonly1 img {
  display: inline-block;
}

@media (max-width: 767px) {
  .login-btn-section {
    text-align: center;
  }

  a.btncard-login {
    width: 125px !important;
    height: 120px !important;
  }

  .searchbtn {
    margin-bottom: 20px;
  }

  .deskonly {
    display: none;
  }

  .mobonly {
    display: block;
  }

  .mobonly img {
    display: block;
  }

  .deskonly1 img {
    display: none;
  }

  a.btncard-login {
    width: 105px !important;
    height: 116px !important;
    padding: 0px;
  }


}

.mega-dropdown-menu .dropdown-menu .row .show li {
  margin: 0;
}

/*.collapse-icon a[data-toggle="collapse"]:before,
.collapse-icon a[data-toggle="collapse"]:after {
display: none;
} */
/* html {background: #01686a;} */
html body {
  height: 100%;
  background-color: #F5F7FA;
  direction: ltr;
  /* border: 6px solid #01686a; */
  /* border-radius: 15px; */
  /* background-color: #01686a; */

}

.mega-dropdown-menu .card-header {
  padding: 7px 0 !important;
  margin: 0 !important;
}

.mega-dropdown-menu .card.border-0.box-shadow-0.collapse-icon.accordion-icon-rotate {
  margin-bottom: 0;
}

.mega-dropdown-menu .card.border-0.box-shadow-0.collapse-icon.accordion-icon-rotate a.dropdown-item {
  padding: 4px 0 !important;
}

.mega-dropdown-menu select.dropdown-item {
  padding: 3px 10px !important;
}

.results-from {
  /* margin-right: 10px;  */
  border: none;
  color: #404E67;
  /* background: none;
    color: inherit;
    font: inherit;
    cursor: default;
    padding: 0; */
}

.results-from:hover {
  border: none;
  background: none;
  color: #404E67;
}

.dropdown.dropdown-notification.nav-item.show .scrollable-container {
  display: block;
  overflow-y: scroll !important;
}

.card-header h4,
.card-header h5 {
  /* font-weight: 500 !important;
  letter-spacing: 0.05rem !important;
  font-size: 1.6rem !important; */
  font-weight: 500 !important;
  letter-spacing: 0.05rem !important;
  font-size: 1.2rem !important;

}

/* Style for the first column header */
/* .dataTable th:first-child {
    text-align: center !important;
} */

/* Style for the first column cells */
/* .dataTable td:first-child {
    text-align: center  !important;
} */

.filter-group .btn-outline-secondary {
  border-color: #d5d5d5;
}

.filter-day-count.d-flex.justify-content-between {
  font-size: 1.143rem;
  margin-bottom: 6px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 4px;
}

.filter-day-value {
  font-size: 0.857rem;
}

.filter-day-count.d-flex.justify-content-between div:last-child {
  font-weight: bold;
  font-size: 1.786rem;
  line-height: 1;
}

.filter-day-count.d-flex.justify-content-between {
  font-size: 1.143rem;
  margin-bottom: 6px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 6px;
  align-items: center;
}

i.fa.fa-filter {
  font-size: 1.857rem;
  color: #3f7890;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border-left-width: 1px;
  border-radius: 5px;
  margin-right: 1px;
  border-right: 0;

}

table.table-bordered.dataTable th {
  border-radius: 5px;
}

.table-striped tbody tr.odd.selected,
.table-striped tbody tr.even.selected {
  background-color: #f2ffff;
  color: #000;
}

.app-content.content {
  /* border: 6px solid #01686a; */
  /* border-radius: 0 0 16px 16px;
   background: #fafdfc;
   border-top: 0;
   margin-top: 60px; */
  border-radius: 0 0 16px 16px;
  background: #e9ecef;
  border-top: 0;
  margin-top: 55px;


}


/* div#sticky-wrapper { */
/* border: 6px solid #01686a; */
/* border-width: 0 6px; */
/* } */

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right: 1px solid #e3ebf3 !important;
}

div#invoice-company-details {
  border-bottom: 1px solid #bec3cd;
  margin-bottom: 1rem;
}

div#invoice-company-details p,
div#invoice-customer-details p {
  margin-bottom: 0.2rem;
}

div#invoice-company-details .col-md-6.col-sm-12.text-xs-center.text-md-left {
  display: flex;
  align-items: center;
}

div#invoice-company-details .col-md-6.col-sm-12.text-xs-center.text-md-left img.img-responsive.p-1.m-b-2 {
  padding: 0 0 1rem 0 !important;
  height: 90px;
}

div#invoice-company-details .col-md-6.col-sm-12.text-xs-center.text-md-left p {
  margin-bottom: 0;
  font-size: 1.286rem;
  font-weight: 600;
}

#invoice-company-details ul.px-0.list-unstyled {
  margin-bottom: 0;
}

#invoice-company-details ul.px-0.list-unstyled {
  margin-bottom: 0;
}

div#invoice-customer-details .px-0.list-unstyled {
  display: flex;
  flex-wrap: wrap;
}

div#invoice-customer-details .px-0.list-unstyled li {
  padding-right: 20px;
}

#invoice-customer-details .col-sm-12.text-xs-center.text-md-left p.text-muted {
  font-size: 1.071rem;
  font-weight: 100;
  line-height: 1;
}

.card {
  /* border-radius: 10px !important;
  padding-top: 1.5rem; */
  border-radius: 7px !important;
  padding-top: 0.85rem;

}

.header-navbar.navbar-expand-sm.navbar.navbar-horizontal.navbar-fixed.navbar-light.navbar-without-dd-arrow.navbar-shadow.menu-border.navbar-brand-center {
  z-index: 9999 !important;
}

.tr-border {
  border: none !important;
  border-right: #ffffff !important;
  border-top: 1px solid #e3ebf3 !important;
}

.table-bordered.dataTable td:last-child.no-border {
  border: none !important;
}

.no-border {
  border: none !important;
  border-right: #ffffff !important;
}

.border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 15px;
}

.dashboard-cards-2 a.btn.btncard.position-relative {
  width: 150px !important;
  height: 80px !important;
}

.dashboard-cards-2 a.btn.btncard.position-relative {
  width: auto !important;
  height: 80px !important;
  min-width: 100px;
}

.dashboard-cards-2 i.fa {
  font-size: 1.643rem;
  margin-top: 5px;
  line-height: 25px;
}

a.btncard h1 {
  font-size: 0.857rem;
  font-weight: 500;
  padding-top: 5px;
  color: #313131 !important;
}

.dashboard-cards-2 a.btncard h1 {
  font-size: 0.786rem;
  font-weight: 200;
  padding-top: 3px;
  color: #313131 !important;
}

.dashboard-cards h1 {
  padding-top: 30px;
}

a.btncard:hover h1 {
  color: #ffffff !important;
}

.border-top {
  margin-top: 5px;
  padding-top: 2px;
  border-top: 1px solid #e7e7e7 !important
}

.note-editor.note-frame {
  border: 1px solid #a9a9a9;
  padding: 0;
  border-radius: 4px !important;
}

tr.desc_p {
  /* display:none; */
  display: block;
}

#trackingbar {
  margin-bottom: 0px !important;
  overflow: hidden;
}

#trackingbar li {
  list-style-type: none;
  color: #404e67;
  text-transform: uppercase;
  font-size: 0.75rem;
  width: 6.5rem;
  text-align: center;
  float: left;
  position: relative;
}

#trackingbar li:before {
  width: 25px;
  line-height: 20px;
  display: block;
  font-size: 0.75rem;
  color: #fff;
  background: #0a6b70;
  border-radius: 3px;
  margin: 0 auto 1px auto;
  z-index: 9;
  position: relative;
  content: '';
  font-weight: 600;
}

#trackingbar li a {
  color: #404E67;
  font-size: 0.75rem;
  font-weight: 600;
}

#trackingbar li.active a {
  font-size: 0.857rem !important;
  font-weight: 700 !important;
}

#trackingbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #bcbcbc;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: 0;
}

#trackingbar li:first-child:after {
  content: none;
}

#trackingbar li.active {
  font-weight: 700;
  font-size: 0.75rem;
}

#trackingbar li.active:before,
#trackingbar li.active:after {
  background: #27AE60;
  color: white;
}

#trackingbar li:nth-child(1):before {
  content: '>';
}

#trackingbar li:nth-child(2):before {
  content: '>';
}

#trackingbar li:nth-child(3):before {
  content: '>';
}

#trackingbar li:nth-child(4):before {
  content: '>';
}

#trackingbar li:nth-child(5):before {
  content: '>';
}

#trackingbar li:nth-child(6):before {
  content: '>';
}

#trackingbar li:nth-child(7):before {
  content: '>';
}

/* tracking sub items 24-11-2025*/
#trackingbar {
  position: relative;
  overflow: visible !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

#trackingbar>li {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

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

/* Base dropdown styling */
#trackingbar li.dropdown:before {
  width: 25px;
  line-height: 20px;
  display: block;
  font-size: 0.75rem;
  color: #fff;
  background: #0a6b70;
  border-radius: 3px;
  margin: 0 auto 1px auto;
  z-index: 9;
  position: relative;
  font-weight: 600;
}

/* IMPORTANT: Active state must come after and use higher specificity */
#trackingbar li.dropdown.active:before {
  background: #27AE60 !important;
  /* Green - matching li.active */
  color: #fff;
}

#trackingbar li.dropdown.active:after {
  background: #27AE60 !important;
  /* Green - matching li.active */
}

#trackingbar .dropdown-toggle {
  cursor: pointer;
  display: inline-block;
}

/* Remove the ::after pseudo element from dropdown toggle */
#trackingbar .dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

#trackingbar .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: none;
  min-width: 120px;
  padding: 8px 0;
  margin: 8px 0 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  list-style: none;
}

/* Style dropdown items */
#trackingbar .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  text-align: center;
  float: none !important;
}

/* Remove numbered circles from dropdown items only */
#trackingbar .dropdown-menu li:before,
#trackingbar .dropdown-menu li:after {
  display: none !important;
  content: none !important;
  background: none !important;
}

#trackingbar .dropdown-menu li a {
  display: block !important;
  padding: 0px 5px !important;
  color: #333 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 0.857rem !important;
  transition: background-color 0.2s ease;
  background: none !important;
  font-weight: normal !important;
}

#trackingbar .dropdown-menu li a:hover {
  background-color: #f5f5f5 !important;
  color: #000 !important;
}

#trackingbar .dropdown-menu li.active a {
  font-weight: 700 !important;
  color: #0a6b70 !important;
  background-color: #e8f6f7 !important;
}

/* Remove any badges from dropdown items */
#trackingbar .dropdown-menu li a .badge,
#trackingbar .dropdown-menu li a span.badge {
  display: none !important;
}

/* tracking sub items 24-11-2025*/

.version {
  /* color: #fff;
    text-align: center; */
  padding-bottom: 5px;
  font-size: 0.75rem;
  position: absolute;
  bottom: -17px;
  right: 0;
  padding: 1px 10px;
  background: #01686a;
  font-size: 0.75rem;
  color: #fff;
  border-radius: 12px 0 0 0;
}

.about-us {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1px 10px;
  background: #01686a;
  font-size: 0.75rem;
  color: #fff;
  border-radius: 0 12px 0 0;
}

.heading-title {
  color: #fff;
  text-align: center;
  padding: 25px 23px 0;
}

.heading-title span {
  color: #ffb100;
  font-size: 2.071rem;
  display: block;
}

.disable-class,
.disable-class_credit_check {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  /* background: #404E67 !important; */
  background: #dddddd !important;
  color: #191b1a !important;
}

.disable-checkbox {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  /* background: #404E67 !important; */
  background: none !important;
  color: #191b1a !important;
}

.disable-class-final {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  color: #fff !important;
  border-color: #00070a !important;
  background-color: #005e83 !important;
}

input[type="text"].disable-class {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  background: #dddddd !important;
  color: #3f587e;
}

.disable-class-textarea {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  background: #dddddd !important;
  color: #3f587e !important;
  ;
}

.compulsoryfld {
  color: #ff0000;
}

.pl5 {
  padding-left: 5px !important;
}

a.details-title {
  color: #404E67;
}

.text-right-custom {
  justify-content: flex-end;
  display: flex;
}

.text-center-custom {
  justify-content: center;
  display: flex;
}

/* table#authpermission {
    width: 100% !important;
}
@media (max-width: 767px) {
    table#authpermission{
        width:100% !important;
    }
} */
.table-internal {
  text-decoration: none !important;
  border: none !important;
  border-right: none;
}

.table-internal tr {
  border: none !important;
}

.table-internal td {
  border-bottom: solid 1px #ff0000;
  padding: 1px !important;
  border-right: none;

}

.mt-14px {
  margin-top: -14px !important;
}

.textarea-bg {
  background: #dddddd !important;
  color: #363636 !important;
}


.sidebarlist {
  display: none;
  margin-top: 10px;
}

.sidebarlist ul {
  list-style: none;
  /* This removes the bullet points */
  padding-left: 0;
}

.sidebarlist ul li {
  padding: 5px 0;
  cursor: pointer;
}

.sidebarlist ul li:hover {
  color: #009c9f;
  cursor: pointer;
}

.sidebarlist ul li.active {
  color: #009c9f;
  cursor: pointer;
}

.expand-btn {
  cursor: pointer;
  font-weight: bold;
  /* display: inline-flex; */
  align-items: center;
}

.expand-btn i {
  margin-left: 5px;
}

#warehouseList {
  display: block;
}

.whole_filter_section {
  display: none;
}

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

.revert-btncolor {
  background-color: #ecbfc5 !important;
  border-color: #ecbfc5 !important;
}

.fsize-17 {
  font-size: 1.214rem;
}

.fsize-14 {
  font-size: 1rem;
}

.padd-lft-rgt-0 {
  padding-left: 0px;
  padding-right: 0px
}

.padding-left-0 {
  padding-left: 0px;
}

.padding-right-0 {
  padding-right: 0px
}

/* price range sction starts erp2024 10-10-2024 */


/* Icons */

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: .8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-left: 0;
  margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: .222em 0;
  margin: .2em 0;
  vertical-align: middle;
  margin-left: .4em;
  margin-right: 2em;
}

.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: .5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

/* Component containers
----------------------------------*/


.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  /* border: 1px solid #c5c5c5; */
  border: none;
  max-height: 200px;
  /* height of dropdown */
  overflow-y: auto;
  /* enable vertical scroll */
  overflow-x: hidden;
  /* hide horizontal scroll */
  z-index: 8888;
}

.ui-widget-content {
  /* border: 1px solid #dddddd; */
  /* background: #ffffff; */
  color: #333333;
  box-shadow: 5px 5px 20px 5px #d0d0d0;
}

.ui-widget-content a {
  color: #333333;
}

.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}

.ui-widget-header a {
  color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}


.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #c5c5c5;
  background: #60778d;
  font-weight: normal;
  color: #ffffff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa;
  opacity: .003;
  filter: Alpha(Opacity=.3);
  /* support: IE8 */
}

.ui-widget-shadow {
  -webkit-box-shadow: 0px 0px 5px #666666;
  box-shadow: 0px 0px 5px #666666;
}

/* price range sction ends erp2024 10-10-2024 */
/* erp2024 10-10-2024 newly added */
.filter_list_section {
  border: 1px solid #ccc;
  padding: 10px 20px;
  margin-bottom: 8px;
}

span.fa.fa-filter {
  font-size: 1.429rem;
  color: #3f7890;
}

.filter_search_li i.fa.fa-angle-down {
  font-size: 1.286rem;
}

.filter_search_li i.fa.fa-angle-up {
  font-size: 1.286rem;
}

.due-client-wrapper {
  display: inline-block;
}

.due-client-wrapper {
  font-size: 0.857rem;
  color: #363636;
  font-weight: 600;
}

.due-client-wrapper .form-check-input {
  margin-top: 0px
}

.profile-update-icon {
  position: absolute;
  bottom: 7px;
  right: 7px;
  border-radius: 55%;
  padding: 5px;
}

button.profile-update-icon {
  font-size: 1.429rem;
}

.formborder {
  border: solid 1px #ccc;
  padding: 15px;
}

.borderleft {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 20px;
}

.font-13 {
  font-size: 0.929rem;
}

.popover {
  max-width: 300px;
  /* Control the width of the popover */
}

.popover-body form {
  margin: 0;
}

.account-left-section {
  text-decoration: none;
}

.account-left-section h2 {
  font-size: 1.071rem;
  font-weight: 400;
  margin-bottom: 25px;
}

.account-left-section h2 span {
  font-weight: 600;
}

.account-left-section h3 {
  font-size: 1.143rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.account-left-section h3 span {
  font-weight: 600;
}

.transaction-box {
  border-radius: 5px;
  padding: 20px;
  -webkit-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
}

.transaction-box h2 {
  font-size: 1.071rem;
  font-weight: 400;
  margin-bottom: 25px;
  margin-top: 35px;
}

.transaction-box h2 span {
  font-weight: 600;
}

.transaction-box h3 {
  font-size: 1.071rem;
  font-weight: 400;
}

.transaction-box h3 span {
  font-weight: 600;
}

.fixedpadding {
  padding-bottom: 25px;
}

.fixedpadding-bottom {
  padding-bottom: 16px;
}

.fixedwidth {
  width: 175px;
}

.deposit-table-header {
  background: #687d9d;
  color: #fff;
}

.bg-fixed {
  background: linear-gradient(to right, #647891 0%, #6F85AD 100%) !important;
}

.fontsize-20 {
  font-size: 1.429rem;
}

button:disabled {
  cursor: not-allowed;
}

.debitsection,
.creaditsection,
.totalsection {
  padding: 15px;
}

.total-bg-danger {
  background: rgb(244 219 219);
}

.total-bg-success {
  background: rgb(200 229 189);
}

.is-invalid {
  border-color: #dc3545 !important;
  /* Red border color */
  background-color: #f8d7da;
  /* Light red background */
}

/* ======================History section ================ */
.history-container {
  position: fixed;
  top: 100px;
  right: -70%;
  /* Initially hidden off the screen */
  width: 70%;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.5s ease;
  z-index: 999;
}
.aipanel-container {
  position: fixed;
  top: 100px;
  right: -70%;
  /* Initially hidden off the screen */
  width: 90%;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.5s ease;
  z-index: 999;
}

/* history table close button */
/* .logclose-btn {
    text-align: center;
    margin-bottom: 20px;
    background-color: #005e83;;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    float: right;
}  */
.history-container.active {
  right: 0;
  padding: 15px;
  /* Fully visible when active */
}

.history-container h2 {
  text-align: left;
  margin-bottom: 6px;
  font-size: 1.214rem;

}

.history-container form {
  text-decoration: none;
}

.history-container form input,
.history-container form button {
  margin-bottom: 15px;
  padding: 10px;
  font-size: 1.143rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.history-container form button {
  background-color: #005e83;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 9999;
}

.history-expand-button {
  position: fixed;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(-90deg);
  /* Rotate the button text */
  background-color: #005e83;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 5px 5px 0 0;
  transform-origin: right center;
}

.history-expand-button:hover {
  background-color: #0056b3;
}

.history-expand-button span {
  font-size: 1rem;
  font-weight: bold;
}


.history-close-button {
  position: absolute;
  top: 50%;
  left: -58px;
  transform: translateY(-50%) rotate(-90deg);
  display: none;
  background-color: #005e83;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 5px 5px 0 0;
}

.history-container.active .history-close-button {
  display: block;
}

.history-container.active .logclose-btn {
  text-align: center;
  margin-bottom: 20px;
  background-color: #005e83;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 2px 9px;
  cursor: pointer;
  position: absolute;
  right: 15px;
  font-size: 0.857rem;
  ;
}

.history-container.active .table thead th {
  vertical-align: bottom;
  border-bottom: 1px solid #3e5072;
  border-top: 1px solid #d3d3d3;
  background: #f3f4f4 !important;
  border-right-color: #768cb5;
  color: #252525;
}

.history-expand-button:hover,
.history-close-button:hover {
  background-color: #0056b3;
}

.history-expand-button span,
.history-close-button span {
  font-size: 1rem;
  font-weight: bold;
}

/* div.dataTables_wrapper {
    overflow-y: auto;
    max-height:600px;
} */

.history-container h2 {
  text-align: left;
  margin-bottom: 6px;
  font-size: 1.214rem;
}

div.dataTables_wrapper img.rounded-circle1 {
  width: 25px !important;
  height: 25px !important;
}

div.dataTables_wrapper ul.padd-left-ul {
  margin: 0;
}



/* ======================Report section ================ */

.report-top-table {
  border-collapse: collapse;
  border: none;
  width: 100%;
}

.report-top-table th,
.report-top-table td,
.report-content-table tr td {
  border: none !important;
}

.report-content-table {
  border-collapse: collapse;
  border: none;
  width: 100%;
}

/* .report-content-table th,.report-content-table td{
    border: none !important;
} */
.report-content-table thead th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
}

.report-content-table tfoot th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
  border-top: 1px solid #e6e6e6 !important;
}

.report-content-table tbody tr {
  background: none !important;
  border: none !important;
  border-top: 1px solid #e6e6e6 !important;
}

.report-content-table tbody {
  border: none !important;
}

.report-content-table tbody tr td a {
  font-weight: 600 !important;
}

.report-content-table tbody tr:hover td,
.report-content-table thead tr:hover th,
.report-content-table tfoot tr:hover th {
  background: #f2f2f2;
}

.amount-font {
  font-size: 0.929rem !important;
  font-weight: 600 !important;
}

.account-name {
  font-size: 1.429rem !important;
  padding-bottom: 2px !important;
  color: #404E67 !important;
}

.account-parent {
  font-size: 1.143rem !important;
  padding-bottom: 2px !important;
  color: #404E67 !important;
  padding-left: 30px !important;
}

.child-padding-60 {
  padding-left: 60px !important;
}

.child-padding-30 {
  padding-left: 30px !important;
}

.border-primary {
  border: none !important;
  border-bottom: 1px solid #e6e6e6 !important;
}



.report-top-table td,
.report-content-table td,
.report-top-table th,
.report-content-table th {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}

.report-top-table th,
.report-content-table th {
  font-weight: bold;
  text-align: left;
}

.report-top-table td,
.report-content-table td {
  text-align: left;
}

/* Ensure all columns have equal widths */
.report-top-table td:nth-child(1),
.report-content-table td:nth-child(1),
.report-top-table th:nth-child(1),
.report-content-table th:nth-child(1) {
  width: 20%;
}

.report-top-table td:nth-child(2),
.report-content-table td:nth-child(2),
.report-top-table th:nth-child(2),
.report-content-table th:nth-child(2) {
  width: 20%;
}

.report-top-table td:nth-child(3),
.report-content-table td:nth-child(3),
.report-top-table th:nth-child(3),
.report-content-table th:nth-child(3) {
  width: 20%;
}

.report-top-table td:nth-child(4),
.report-content-table td:nth-child(4),
.report-top-table th:nth-child(4),
.report-content-table th:nth-child(4) {
  width: 20%;
}

.report-top-table td:nth-child(5),
.report-content-table td:nth-child(5),
.report-top-table th:nth-child(5),
.report-content-table th:nth-child(5) {
  width: 20%;
}

.report-top-table td:nth-child(6),
.report-content-table td:nth-child(6),
.report-top-table th:nth-child(6),
.report-content-table th:nth-child(6) {
  width: 20%;
}

/* ***** Balance sheet css starts  */
.balancesheet-sheet {
  background: #fff;
  /* border: 1px solid #ddd; */
  border-radius: 5px;
  padding: 25px;
  max-width: 900px;
  margin: auto;
}

.balancesheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.balancesheet-accountname {
  padding-left: 25px;
}

.balancesheet-accountname-parent {
  padding-left: 2px;
}

.balancesheet-header h3 {
  font-size: 1.286rem;
  margin: 0;
  color: #404e67;
}

.balancesheet-total-amount {
  font-weight: bold;
  font-size: 1.286rem;
}

.balancesheet-group {
  margin-bottom: 15px;
}

.balancesheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.143rem;
  cursor: pointer;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.balancesheet-header span {
  font-size: 1.143rem;
  color: #666;
}

.group-total {
  font-weight: bold;
}

.balancesheet-details {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: none;
}

.balancesheet-details li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 1rem;
  color: #444;
}

.balancesheet-toggle-icon {
  font-size: 1rem;
  margin-left: 5px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.balancesheet-header.open .balancesheet-toggle-icon {
  transform: rotate(90deg);
}

.balancesheet-toggle-icon i {
  font-size: 0.857rem;
  margin-left: 4px;
  font-weight: 600;
}

.balancesheet-header+.balancesheet-details {
  display: block;
  padding-left: 50px;
}

/* ***** Balance sheet css ends * */

/* **** Profit & Loss *********** */


.profit-content-table {
  width: 35%;
  table-layout: fixed;
  border: none !important;
}

.profit-top-table {
  width: 100%;
  table-layout: fixed;
  border: none !important;
}

.profit-top-table th,
.profit-content-table th,
.profit-top-table td,
.profit-content-table td {
  text-align: right;
  /* vertical-align: middle;  */
}

.profit-top-table th:first-child,
.profit-content-table th:first-child,
.profit-top-table td:first-child,
.profit-content-table td:first-child {
  text-align: left;
}

.profit-top-table th,
.profit-content-table th {
  font-weight: bold;
  border: none;
  background: none !important;
}

.profit-content-table thead th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
}

.profit-content-table tfoot th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
  border-top: 1px solid #e6e6e6 !important;
}

.profit-content-table .account-name {
  text-align: left;
}



.expand-transaction {
  cursor: pointer;
}

/* **** Profit & Loss  ends *********** */
/* **** trail balance  starts  *********** */
.trail-top-table,
.trail-content-table {
  width: 60% !important;
  table-layout: fixed;
  /* Ensures equal column widths */
  border-collapse: collapse;
}

.trail-content-table thead th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
}

.trail-content-table tfoot th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
  border-top: 1px solid #e6e6e6 !important
}

.trail-content-table tbody {
  border: none !important;
}

.trail-content-table tbody tr {
  background: none !important;
  border: none !important;
  border-top: 1px solid #e6e6e6 !important
}

.trail-top-table tbody th {
  background: none !important;
  border: none !important;
}

.trail-top-table th,
.trail-content-table th,
.profit-content-table th,
.trail-top-table td,
.trail-content-table td,
.profit-content-table td {
  text-align: right;
  vertical-align: middle;
  /* padding: 8px; */
  border: none !important;
}

.trail-top-table th:first-child,
.trail-content-table th:first-child,
.profit-content-table th:first-child,
.trail-top-table td:first-child,
.trail-content-table td:first-child,
.profit-content-table td:first-child {
  text-align: left;
  /* Align the first column to the left */
}

.trail-top-table th,
.trail-content-table th,
.profit-content-table th {
  font-weight: bold;
  background-color: #f8f9fa;
  /* Light gray background for headers */
}

.trail-content-table .account-name,
.profit-content-table .account-name {
  text-align: left;
  font-weight: bold;
}

.trail-content-table tfoot th,
.profit-content-table tfoot th {
  font-weight: bold;
  border-top: 1px solid #e6e6e6 !important
    /* Adds a top border for the footer */
}

.expand-transaction {
  cursor: pointer;
}

.amount-font {
  font-weight: bold;
}

.journal-link-class {
  font-size: 0.929rem !important;
}

/* **** trail balance  ends  *********** */
.transaction-details tr:hover {
  background: #f2f2f2 !important;
}

.mt-32px {
  margin-top: 32px !important;
}


.module-dashboard {
  background-color: #f6f0ff;
  padding: 20px;
  width: 100%;
  border-radius: 8px;
  -webkit-box-shadow: 1px 4px 4px 1px #dddddd;
  -moz-box-shadow: 1px 4px 4px 1px #dddddd;
  box-shadow: 1px 4px 4px 1px #dddddd;
  background: #fbfafa;
}

.module-dashboard h4 {
  margin: 0;
  margin-bottom: 5px;
  font-size: 1.143rem;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 7px;
}

.module-dashboard h4 label {
  font-size: 1.071rem !important;
}

.module-dashboard ul {
  list-style: none !important;
  padding: 0;
  margin: 0;

}

.module-dashboard li {
  margin-bottom: 1px;
  list-style: none;
  font-size: 1.071rem;
  margin-left: 10px;
}

.module-dashboard input[type="checkbox"] {
  margin-right: 8px;
}

.module-dashboard ul li label {
  line-height: 1.25;
  padding-top: 6px;
  font-size: 1rem;
  color: #363636;
  padding-bottom: calc(0.2rem + 1px);
  font-weight: 600;
}

.label-size {
  font-size: 0.857rem;
  color: #363636;
  font-weight: 600;
}

.collapsemenu {
  display: none;
}

.collapsemenu.show {
  display: block;
}

.text-color-for-cost {
  color: #132164
}

.customer-search-overlay {
  position: absolute !important;
  background: rgb(242, 242, 242) !important;
  z-index: 10 !important;
  width: 91% !important;
  font-size: 1rem;
  font-weight: 600;
}

.customer-search-overlay li:hover,
#customer-box-result li:hover {
  cursor: pointer;
  color: #201f1f;
}

.lead-custom-name-cell {
  position: relative;
  vertical-align: top;
}

.lead-custom-suggest-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  min-width: 260px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 1060;
  max-height: 240px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lead-custom-suggest-head {
  padding: 8px 10px;
  font-size: 0.857rem;
  font-weight: 600;
  color: #495057;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}

.lead-custom-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

.lead-custom-suggest-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f5;
}

.lead-custom-suggest-item:last-child {
  border-bottom: none;
}

.lead-custom-suggest-item:hover,
.lead-custom-suggest-item:focus {
  background: #e7f1ff;
  outline: none;
}

.lead-custom-suggest-name {
  font-weight: 600;
  font-size: 0.929rem;
  color: #212529;
  line-height: 1.3;
}

.lead-custom-suggest-meta {
  display: block;
  font-size: 0.786rem;
  color: #6c757d;
  margin-top: 2px;
}

.lead-custom-suggest-foot {
  padding: 6px 8px;
  border-top: 1px solid #e9ecef;
  background: #fff;
  text-align: center;
  flex-shrink: 0;
}

.lead-custom-suggest-dismiss {
  font-size: 0.857rem;
  color: #6c757d;
  text-decoration: none;
}

.lead-custom-suggest-dismiss:hover {
  color: #495057;
  text-decoration: underline;
}

.lead-custom-catalog-warn {
  margin-top: 4px;
}

@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
    width: auto !important;
    /* width: 290px !important; */
    flex-wrap: wrap;
    top: 60px;
    /* top: 92px; */
  }

  .border-left {
    border: none;
  }
}

.hide_row {
  display: none !important;
}

/* dashboard css ends*/

.newdata {
  color: #239fd0
}

.margin-5 {
  margin: 5px !important;
}

.input-file {
  border: none !important;
  border: 1px dashed #6e84ac !important;
  border-radius: 10px !important;
  transition: 0.2s !important;
  width: 100% !important;
  padding: 7px !important;
  height: 40px !important;
}

.fsize-70 {
  font-size: 5rem !important;
}

.file-section {
  text-decoration: none;
  ;
}

.file-section p {
  margin-bottom: 5px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

input[type='text'],
textarea {
  caret-color: rgb(216, 27, 81);
  padding: 10px;
}

#creditlimit-check {
  margin-bottom: 15px;
}

.creditlimit-check .alert {
  background-color: #ffbcc6 !important;
}

.page-header-data-section {
  display: none;
}

.page-header-data-section-dblock {
  display: block;
}

.item-class {
  padding: 3px 10px 0px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  width: auto;
}

.item-class:last-child {
  border-right: none;
}

.item-class h4 {
  font-size: 1rem;
}

.item-class p {
  font-weight: bold !important;
}

.alert-partialconvert {
  border-color: #df8817 !important;
  background-color: #df8817 !important;
  color: #f0f0f0 !important;
}

.alert-cancelled {
  border-color: #bf3939 !important;
  background-color: #bf3939 !important;
  color: #f0f0f0 !important;
}

.alert-initialized {
  border-color: #848030 !important;
  background-color: #848030 !important;
  color: #f0f0f0 !important;
}

.alert-partial {
  border-color: #3c75b7 !important;
  background-color: #3c75b7 !important;
  color: #f0f0f0 !important;
}

.alert-updated {
  border-color: #3c75b7 !important;
  background-color: #3c75b7 !important;
  color: #f0f0f0 !important;
}

.alert-assigned {
  border-color: #848030 !important;
  background-color: #848030 !important;
  color: #f0f0f0 !important;

}

.alert-progress {
  border-color: #845dfb !important;
  background-color: #845dfb !important;
  color: #f0f0f0 !important;
}

.dicount-checkbox {
  font-size: 1rem;
  color: #404E67;
}

.page-header-data-section-dblock a.expand-link {
  color: #43516a !important;
  text-decoration: underline;
}

.tooltip1 {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background-color: #db4343;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.929rem;
  z-index: 1000;
  display: none;
  opacity: 0;
  width: auto;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Tooltip arrow */
.tooltip1:after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 15px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #db4343 transparent;
}

.padd-left-ul {
  padding-left: 15px !important;
}

.no-permission {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 20px;
}

.no-permission h3 {
  font-weight: 600;
  color: #db4343;
}

.mt-13 {
  margin-top: 13px !important;
}

#employee-left-section {
  height: 100vh;
}

#tree-container {
  /* width: 15%; */
  border-right: 1px solid #ddd;
  overflow-y: auto;
  padding: 1rem;
  background-color: #f8f9fa;
  height: 100vh;
}

#tree,
#category_tree {
  min-height: 100vh;
}

#details-container {
  /* width: 85%; */
  padding: 1rem;
  overflow-y: auto;
}

/* Remove default toggle arrows */
.jstree-default .jstree-icon {
  background: none !important;
}

/* Closed node (collapsed) */
.jstree-default .jstree-node>.jstree-ocl {
  background: none !important;
  display: inline-block;
  width: 16px;
  text-align: center;
}

.jstree-default .jstree-closed>.jstree-ocl::before {
  font-family: 'FontAwesome';
  content: "\f105" !important;
  font-weight: 900;
}

/* Open node (expanded) */
.jstree-default .jstree-open>.jstree-ocl::before {
  font-family: 'FontAwesome';
  content: "\f107";
  /* angle-down */
  font-weight: 900;
}

ul.ui-autocomplete {
  width: 30% !important;
}

.heading-elements-toggle {
  display: none !important;
}

.border-with-padding {
  border: 1px solid #a6a6a6;
  padding: 2px 4px 2px 6px;
}

form .focusclass {
  border: 1px #CC0000 solid !important;
}

/* styles of approvel levels starts  */
.breadcrumb-approvals {
  font-size: 0.857rem;
  list-style: none;
  position: absolute;
  right: 50px;
  top: 13px;
}

.breadcrumb-approvals li {
  display: inline-block;
  margin-bottom: .2em;
}

.breadcrumb-approvals li a {
  background-color: #d43349;
  box-sizing: border-box;
  color: #fff;
  display: block;
  max-height: 2em;
  padding: .1em 1em .5em 1.5em !important;
  position: relative;
  text-decoration: none;
  transition: .25s;
}

.breadcrumb-approvals li a:before {
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #fff;
  content: "";
  position: absolute;
  top: 0;
  right: -1.25em;
  z-index: 1;
}

.breadcrumb-approvals li a:after {
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #d43349;
  content: "";
  position: absolute;
  top: 0;
  right: -1em;
  transition: .25s;
  z-index: 1;
}

.breadcrumb-approvals li a:hover {
  background-color: #d43349;
}

.breadcrumb-approvals li a:hover:after {
  border-left-color: #d43349;
}

.breadcrumb-approvals li:last-child a {
  background-color: #d43349;
}

.breadcrumb-approvals :last-child a:before {
  content: none;
}

.breadcrumb-approvals li:last-child a:after {
  border: none;
  content: none;
  border-left: none !important;
  background-color: #0098d9;
}

.highlighted {
  background-color: #28a745 !important;
  /* green */
  cursor: not-allowed;
}

.highlighted::after {
  border-left-color: #28a745 !important;
}

.highlighted::before {
  border-left-color: #fff !important;
  /* usually the arrow color */
}

.approval-disabled {
  cursor: not-allowed !important;
}

.cancel_level {
  background-color: #6c757d !important;
  /* gray color for cancel */
}

.cancel_level:hover {
  background-color: #5a6268 !important;
}

.approval-cancel-container {
  position: fixed;
  top: 120px;
  right: -70%;
  width: 40%;
  height: 53%;
  background-color: rgb(243 243 243);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) !important;
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.5s ease;
  z-index: 999;
}

.approval-cancel-container.show {
  right: 0;
  visibility: visible;
  opacity: 1;
}

.approval-close-button-style {
  position: absolute;
  top: 50%;
  left: -58px;
  transform: translateY(-50%) rotate(-90deg);
  /* display: none; */
  background-color: #005e83;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 5px 5px 0 0;
}

.related-item-size {
  font-size: 0.857rem !important;
  color: #2A2E30 !important;
}

/* styles of approvel levels ends    */

#chat-iframe {
  position: fixed;
  bottom: 60px;
  left: 10px;
  z-index: 99998;
  display: none;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  width: 90vw;
  /* Responsive width: 90% of viewport width */
  max-width: 500px;
  /* Optional max width */
  height: 70vh;
  /* Responsive height: 70% of viewport height */
  max-height: 500px;
  /* Optional max height */
}

@media (max-width: 600px) {
  #chat-iframe {
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    /* Full width on small screens */
  }
}

.unreadmsg_count {
  position: absolute !important;
  border-radius: 55% !important;
  top: -15px !important;
  padding: 7px 10px !important;
  font-size: 0.857rem !important;
  right: -12px !important;
  background: #e67700 !important;
}


/* 24/06/25 - Anjnana copied css from bootstrap4*/

.alert {
  position: relative;
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.btn-group,
.btn-group-vertical,
.btn-quick-view,
.quick-view-section {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
  padding: 7px;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.9);
}



.navbar {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  padding-bottom: 1px;
}

.navbar>.container,
.navbar>.container-fluid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.31875rem;
  padding-bottom: 0.31875rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-collapse {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

.navbar-nav.float-right .mega-dropdown-menu {
  /*width: 70%;*/
  width: auto;
  left: auto;
  right: 0;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
  /*width: 70% !important;*/
  width: max-content !important;
  /* width: auto !important; */
  z-index: 99999 !important;
}




a {
  color: #009c9f;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #008385;
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  /* font-family: "Montserrat", Georgia, "Times New Roman", Times, serif; */
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
}

h1,
.h1 {
  font-size: 2rem;
}

h2,
.h2 {
  font-size: 1.74rem;
}

h3,
.h3 {
  font-size: 1.51rem;
}

h4,
.h4 {
  font-size: 1.32rem;
}

h5,
.h5 {
  font-size: 1.14rem;
}

h6,
.h6 {
  font-size: 1rem;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 1rem !important;
}

.mt-1,
.my-1 {
  margin-top: 1rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 1rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 1rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 1rem !important;
}

.m-2 {
  margin: 1.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 1.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 1.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 1.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 1.5rem !important;
}

.m-3 {
  margin: 3rem !important;
}

.mt-3,
.my-3 {
  margin-top: 3rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 3rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 3rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 3rem !important;
}

.m-4 {
  margin: 3.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 3.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 3.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 3.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 3.5rem !important;
}

.m-5 {
  margin: 4rem !important;
}

.mt-5,
.my-5 {
  margin-top: 4rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 4rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 4rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 4rem !important;
}



.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 1rem !important;
}

.pt-1,
.py-1 {
  padding-top: 1rem !important;
}

.pr-1,
.px-1 {
  padding-right: 1rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 1rem !important;
}

.pl-1,
.px-1 {
  padding-left: 1rem !important;
}

.p-2 {
  padding: 1.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 1.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 1.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 1.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 1.5rem !important;
}

.p-3 {
  padding: 3rem !important;
}

.pt-3,
.py-3 {
  padding-top: 3rem !important;
}

.pr-3,
.px-3 {
  padding-right: 3rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 3rem !important;
}

.pl-3,
.px-3 {
  padding-left: 3rem !important;
}

.p-4 {
  padding: 3.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 3.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 3.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 3.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 3.5rem !important;
}

.p-5 {
  padding: 4rem !important;
}

.pt-5,
.py-5 {
  padding-top: 4rem !important;
}

.pr-5,
.px-5 {
  padding-right: 4rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 4rem !important;
}

.pl-5,
.px-5 {
  padding-left: 4rem !important;
}

.navigation-main .mega-dropdown-menu,
.navbar-nav .mega-dropdown-menu {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  width: -webkit-calc(100% - 50px);
  width: -moz-calc(100% - 50px);
  width: calc(100% - 50px);
  padding: 0.5rem 0;
  margin: 0px 25px !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*border: 1px solid transparent;*/
  padding: 0.55rem 1rem;
  font-size: 1rem;
  line-height: 0.75;
  border-radius: 0.25rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
  .btn {
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
    transition: none;
  }
}

.btn:hover,
.btn:focus {
  text-decoration: none;
}

.btn:focus,
.btn.focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-primary:hover {
  color: #fff;
  background-color: #008f92;
  border-color: #008385;
}

.btn-primary:focus,
.btn-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}



.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #008385;
  border-color: #007678;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}

.btn-secondary {
  /*color: #fff;
  background-color: #404E67;*/
  border-color: #404E67;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #313c4f;
  border-color: #2c3648;
}

.btn-secondary:focus,
.btn-secondary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #404E67;
  border-color: #404E67;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #2c3648;
  border-color: #283040;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-success:hover {
  color: #fff;
  background-color: #12b081;
  border-color: #11a578;
}

.btn-success:focus,
.btn-success.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show>.btn-success.dropdown-toggle {
  color: #fff;
  background-color: #11a578;
  border-color: #109970;
}

.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-success.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-info {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-info:hover {
  color: #fff;
  background-color: #1cbace;
  border-color: #1ab0c3;
}

.btn-info:focus,
.btn-info.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-info.disabled,
.btn-info:disabled {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
  color: #fff;
  background-color: #1ab0c3;
  border-color: #19a5b8;
}

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-info.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-warning {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-warning:hover {
  color: #2A2E30;
  background-color: #ff8e57;
  border-color: #ff864a;
}

.btn-warning:focus,
.btn-warning.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-warning.disabled,
.btn-warning:disabled {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show>.btn-warning.dropdown-toggle {
  color: #2A2E30;
  background-color: #ff864a;
  border-color: #ff7d3d;
}

.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-warning.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-danger {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-danger:hover {
  color: #fff;
  background-color: #ff4f67;
  border-color: #ff425c;
}

.btn-danger:focus,
.btn-danger.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show>.btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #ff425c;
  border-color: #ff3551;
}

.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-danger.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-light {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-light:hover {
  color: #2A2E30;
  background-color: #a5abb6;
  border-color: #9ea5b0;
}

.btn-light:focus,
.btn-light.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-light.disabled,
.btn-light:disabled {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show>.btn-light.dropdown-toggle {
  color: #2A2E30;
  background-color: #9ea5b0;
  border-color: #979eaa;
}

.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-light.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-dark:hover {
  color: #fff;
  background-color: #101827;
  border-color: #0c131e;
}

.btn-dark:focus,
.btn-dark.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show>.btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #0c131e;
  border-color: #080d15;
}

.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-dark.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-outline-primary {
  color: #00B5B8;
  background-color: transparent;
  background-image: none;
  border-color: #00B5B8;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #00B5B8;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}

.btn-outline-secondary {
  color: #404E67;
  background-color: transparent;
  background-image: none;
  border-color: #404E67;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #404E67;
  border-color: #404E67;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #404E67;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show>.btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #404E67;
  border-color: #404E67;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-secondary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-outline-success {
  color: #16D39A;
  background-color: transparent;
  background-image: none;
  border-color: #16D39A;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-outline-success:focus,
.btn-outline-success.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #16D39A;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show>.btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-success.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-outline-info {
  color: #2DCEE3;
  background-color: transparent;
  background-image: none;
  border-color: #2DCEE3;
}

.btn-outline-info:hover {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #2DCEE3;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show>.btn-outline-info.dropdown-toggle {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-info.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-outline-warning {
  color: #FFA87D;
  background-color: transparent;
  background-image: none;
  border-color: #FFA87D;
}

.btn-outline-warning:hover {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #FFA87D;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show>.btn-outline-warning.dropdown-toggle {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-warning.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-outline-danger {
  color: #FF7588;
  background-color: transparent;
  background-image: none;
  border-color: #FF7588;
}

.btn-outline-danger:hover {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #FF7588;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show>.btn-outline-danger.dropdown-toggle {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-danger.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-outline-light {
  color: #BABFC7;
  background-color: transparent;
  background-image: none;
  border-color: #BABFC7;
}

.btn-outline-light:hover {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-outline-light:focus,
.btn-outline-light.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #BABFC7;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show>.btn-outline-light.dropdown-toggle {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-light.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-outline-dark {
  color: #1B2942;
  background-color: transparent;
  background-image: none;
  border-color: #1B2942;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-outline-dark:focus,
.btn-outline-dark.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #1B2942;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show>.btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-dark.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #009c9f;
  background-color: transparent;
}

.btn-link:hover {
  color: #008385;
  text-decoration: none;
  background-color: transparent;
  border-color: transparent;
}

.btn-link:focus,
.btn-link.focus {
  text-decoration: none;
  border-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled {
  color: #404E67;
  pointer-events: none;
}

.btn-lg,
.btn-group-lg>.btn {
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.25;
  border-radius: 0.27rem;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 0.21rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

/* 24/06/25  */


/* 25/06/25 */

.card {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  /*border: 1px solid rgba(0, 0, 0, 0.06);*/
  /*border-radius: 0.25rem; */
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card>.list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card>.list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.card-body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.5rem;
  /*padding-top: 0;*/
}

.card-title {
  /* margin-bottom: 1.5rem; */
  margin-bottom: 1px;
}

.card-subtitle {
  margin-top: -0.75rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

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

.card-link+.card-link {
  margin-left: 1.5rem;
}

.card-header {
  /*padding: 1.5rem 1.5rem;
  padding: 1.5rem 1.5rem 2px 1.5rem; 26/06/25*/
  margin-bottom: 0;
  background-color: #fff;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.06); */
}

.card-header:first-child {
  /* border-radius: -webkit-calc(0.25rem - 1px) -webkit-calc(0.25rem - 1px) 0 0; */
  border-radius: -moz-calc(0.25rem - 1px) -moz-calc(0.25rem - 1px) 0 0;
  /* border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; */
}

.card-header+.list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: 1.5rem 1.5rem;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.card-footer:last-child {
  border-radius: 0 0 -webkit-calc(0.25rem - 1px) -webkit-calc(0.25rem - 1px);
  border-radius: 0 0 -moz-calc(0.25rem - 1px) -moz-calc(0.25rem - 1px);
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.75rem;
  margin-bottom: -1.5rem;
  margin-left: -0.75rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img {
  width: 100%;
  border-radius: -webkit-calc(0.25rem - 1px);
  border-radius: -moz-calc(0.25rem - 1px);
  border-radius: calc(0.25rem - 1px);
}

.card-img-top {
  width: 100%;
  border-top-left-radius: -webkit-calc(0.25rem - 1px);
  border-top-left-radius: -moz-calc(0.25rem - 1px);
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: -webkit-calc(0.25rem - 1px);
  border-top-right-radius: -moz-calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: -webkit-calc(0.25rem - 1px);
  border-bottom-right-radius: -moz-calc(0.25rem - 1px);
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: -webkit-calc(0.25rem - 1px);
  border-bottom-left-radius: -moz-calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .card-deck .card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0%;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-group>.card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  .card-group>.card {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0%;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group>.card+.card {
    margin-left: 0;
    border-left: 0;
  }

  .card-group>.card:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group>.card:first-child .card-img-top,
  .card-group>.card:first-child .card-header {
    border-top-right-radius: 0;
  }

  .card-group>.card:first-child .card-img-bottom,
  .card-group>.card:first-child .card-footer {
    border-bottom-right-radius: 0;
  }

  .card-group>.card:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group>.card:last-child .card-img-top,
  .card-group>.card:last-child .card-header {
    border-top-left-radius: 0;
  }

  .card-group>.card:last-child .card-img-bottom,
  .card-group>.card:last-child .card-footer {
    border-bottom-left-radius: 0;
  }

  .card-group>.card:only-child {
    border-radius: 0.25rem;
  }

  .card-group>.card:only-child .card-img-top,
  .card-group>.card:only-child .card-header {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  .card-group>.card:only-child .card-img-bottom,
  .card-group>.card:only-child .card-footer {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }

  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
    border-radius: 0;
  }

  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
    border-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}

.accordion .card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}

.accordion .card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion .card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link:visited {
  color: #009c9f;
}


.form-control {
  display: block;
  width: 100%;
  height: -webkit-calc(2.75rem + 2px);
  height: -moz-calc(2.75rem + 2px);
  height: calc(2.75rem + 2px);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.25;
  color: #4E5154;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #BABFC7;
  border-radius: 0.25rem;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .form-control {
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #4E5154;
  background-color: #fff;
  border-color: #00B5B8;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control::-webkit-input-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control:-moz-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control::placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #dddddd !important;
  opacity: 1;
}

select.form-control:focus::-ms-value {
  color: #4E5154;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

/* input[type="file"].form-control,
.form-control-file {
  display: block;
  width: 100%;
  margin-top: 0.5rem !important;
  padding: 0.375rem 0.75rem !important;
  line-height: 1.5 !important;
  color: #495057 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

input[type="file"].form-control:focus {
  color: #495057 !important; 
  background-color: #fff !important;
  border-color: #80bdff !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
}*/

input[type="file"].form-control {
  display: block !important;
  width: 100% !important;
  height: 34px !important;
  padding: 6px 12px !important;
  font-size: 1rem !important;
  line-height: 1.42857143 !important;
  color: #555 !important;
  background-color: #fff !important;
  background-image: none;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input[type="file"].form-control:focus {
  border-color: #66afe9 !important;
  outline: 0 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}


/* 25/06/25 */


/*26/06/25*/

.breadcrumb {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /*padding: 0.75rem 0rem 0rem 0rem;*/
  padding: 0rem 0rem 0rem 0rem;
  margin-bottom: 1px;
  list-style: none;
  /*background-color: #98A4B8;*/
  border-radius: 0.25rem;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #404E67;
  content: "/";
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #404E67;
}

.pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #009c9f;
  background-color: #fff;
  border: 1px solid #ddd;
}

.page-link:hover {
  z-index: 2;
  color: #008385;
  text-decoration: none;
  background-color: #F5F7FA;
  border-color: #ddd;
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.page-item.disabled .page-link {
  color: #404E67;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #626E82;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.27rem;
  border-bottom-left-radius: 0.27rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.27rem;
  border-bottom-right-radius: 0.27rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.21rem;
  border-bottom-left-radius: 0.21rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.21rem;
  border-bottom-right-radius: 0.21rem;
}


.nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #404E67;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

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

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: #98A4B8 #98A4B8 #ddd;
}

.nav-tabs .nav-link.disabled {
  color: #404E67;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #4E5154;
  background-color: #F5F7FA;
  border-color: #626E82 #626E82 #F5F7FA;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #00B5B8;
}

.nav-fill .nav-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.tab-content>.tab-pane {
  display: none;
}

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


/*26/06/25*/

/*27/06/25*/
.mt-28 {
  margin-top: 28px;
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: -webkit-calc(2.75rem + 2px);
  height: -moz-calc(2.75rem + 2px);
  height: calc(2.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  line-height: 1.25;
  color: #4E5154;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  -webkit-background-size: 8px 10px;
  background-size: 8px 10px;
  border: 1px solid #BABFC7;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #39fcff;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(57, 252, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(57, 252, 255, 0.5);
}

.custom-select:focus::-ms-value {
  color: #4E5154;
  background-color: #fff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #404E67;
  background-color: #98A4B8;
}

.custom-select::-ms-expand {
  opacity: 0;
}

.custom-select-sm {
  height: -webkit-calc(1.375rem + 2px);
  height: -moz-calc(1.375rem + 2px);
  height: calc(1.375rem + 2px);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 75%;
}

.custom-select-lg {
  height: -webkit-calc(3.5625rem + 2px);
  height: -moz-calc(3.5625rem + 2px);
  height: calc(3.5625rem + 2px);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 125%;
}

/* .form-control-sm {
    min-height: calc(1.5em + .5rem + 2px) !important;
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    border-radius: .2rem !important;
} */

/* .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(245, 247, 250, 0.5) !important;
} */

.table-striped {
  --bs-table-striped-bg: rgba(245, 247, 250, 0.5) !important;
}




/*27/06/25*/

/*30/06/25*/

/* .form-row1 row g-2 {
    --bs-gutter-x: .5rem !important;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
} */

/* .form-row1 row g-2 {
  --bs-gutter-x: .5rem; 
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-1 * var(--bs-gutter-x));
  margin-left: calc(-1 * var(--bs-gutter-x));
}


.form-row1 row g-2 > [class*="col"] {
  padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1);
} */

.text-right {
  text-align: end !important;
}

.float-right {
  float: inline-end !important;
  /* for logical direction */
}

.fsize-icon {
  font-size: 1.5rem !important;
}

/*30/06/25*/

/*01/07/25*/
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
}

.padding-10px {
  padding: 10px;
}

.posbarcode-checkbox {
  height: 35px;
}

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

.pos-padding-product {
  padding: 5px;
}

.pos-product-lineheight {
  margin-top: 4px;
  line-height: 1;
}

/* Anjana ends */

.settings-section {
  text-decoration: none;
  list-style: none !important;
}

.settings-section ul {
  list-style: none !important;
}

.settings-section a i {
  margin-right: 5px !important;
}

.settings-section .card-collapse {
  border: solid 1px #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.settings-section a.dropdown-item {
  padding: .25rem .5em !important;
}

.settings-section a.dropdown-item:active {
  background-image: linear-gradient(to right, #00686a 0%, #6F85AD 100%) !important;
}

.working-location {
  text-decoration: none !important;
}

.working-location ul {
  padding: 0px !important;
}

.working-location ul li {
  padding: 0px !important;
}

.working-location .dropdown-menu-footer {
  margin: 0px !important;
  text-align: center !important;
  padding: 0px !important;
  justify-content: center;
}

.working-location .dropdown-menu-footer:hover {
  all: unset;
}

.form-check-label {
  font-size: 0.857rem !important;
}

.settings-box {
  border: solid 1px #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
  padding: 1rem !important;
  margin-bottom: 2rem;
}

.settings-box a {
  color: #212529 !important;

}

.settings-box a i {
  color: #212529 !important;
  font-size: 0.75rem !important;
}

.settings-subheding-border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 0.929rem !important;
  margin-top: 3px;
}

/* ========= Dashboards Starts================ */
.stat-card {
  /* border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 2rem 1rem 1rem 1rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem; */

  border-radius: 8px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  background: #ffffff;
  padding: 1.3rem 1rem 1rem 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border: 1px solid #b6c1cc;
  transform: translateZ(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

.stat-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}


.stat-icon-box {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  position: absolute;
  top: -3px;
  left: 3px;
  z-index: 2;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
  color: #003e48;

}

.card-content-custom {
  flex: 1;
  text-align: right;
  margin-left: 0px;
  margin-top: 0px;
}

.card-category {
  font-size: 1rem;
  color: #999;
  margin-bottom: 4px;
}

.card-value {
  font-size: 1.571rem;
  font-weight: 600;
}

.stat-link {
  text-decoration: none;
  display: block;
  color: inherit;
}

.summary-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-right: 2.5rem;
}

.card a:not(.btn) {
  text-decoration: none !important;
}

.card a:not(.btn):hover {
  color: inherit !important;
}

.bg-mango {
  background-color: #f6be4f;
}

.bg-deep-sea {
  background-color: #05668d;
}

.bg-rosewood {
  background-color: #a4133c;
}

.bg-citron {
  background-color: #c4d35f;
}

.bg-peachy {
  background-color: #ff9671;
}

.bg-pink {
  background-color: #ec407a;
}

.dashboard-crm-items {
  border-radius: 10px !important;
  margin-bottom: 15px;
}

.dashboard-crm-item {
  border-radius: 10px !important;
  margin-bottom: 5px;
  font-size: 1.6rem;
}

.dashboard-crm-item h5 {
  font-weight: 500;
  letter-spacing: 0.05rem;
  font-size: 1.6rem;
}

.dashboard-crm-item h6 {
  font-size: 1.2rem;
}

.card-hover-effect {
  transition: all 0.3s ease-in-out;
}

.card-hover-effect:hover {
  transform: scale(1.03);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.3);
}

.hover-card {
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 30px 10px;
  transition: 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: #333;
  text-align: center;
  border: 2px solid #e0e0e0;
}

.hover-card .card-icon {
  font-size: 1.8rem;
  background-color: rgba(78, 115, 223, 0.12);
  color: #404e67;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  line-height: 48px;
  display: inline-block;
  transition: 0.3s ease;
}

.hover-card h5 {
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: 0.3s ease;
}

.hover-card:hover {
  background-color: #404e67;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
  border-color: #fff;
}

.hover-card:hover .card-icon {
  background-color: #fff;
  color: #404e67;
}

.hover-card:hover h5 {
  color: #fff;
}

/* ========= Dashboards Ends================ */
.modal {
  z-index: 9999 !important;
}

/* Base loader styles */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #00686a 0%, #6F85AD 100%) !important;
  z-index: 9999;
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Spinner styles */
.loader-spinner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  animation: spin 1.2s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
  position: relative;
}

.spinner-inner {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
  animation: spinReverse 1.6s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

/* Text styles */
.loader-text {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1px;
  animation: pulse 2s ease-in-out infinite;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Progress bar styles */
.progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin-top: 20px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 2px;
  animation: progress 3s ease-in-out infinite;
}

/* Branding styles */
.branding {
  position: absolute;
  bottom: 30px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* Animations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-720deg);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

@keyframes progress {
  0% {
    width: 0%;
    margin-left: 0;
  }

  50% {
    width: 100%;
    margin-left: 0;
  }

  100% {
    width: 0%;
    margin-left: 100%;
  }
}


.dropdown-toggle::after {
  font-family: 'FontAwesome';
  content: "\f107" !important;
  border: none !important;
  position: relative;
  top: 0;
  right: 0px;
  padding: 0 2px 0 6px;
  margin: 0 0.3em 0 0;
  vertical-align: 0;
}

.dropdown-toggle::after {
  display: inline-block !important;
  margin-left: .255em;
  /* vertical-align: .255em; */
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

.horizontal-layout.vertical-overlay-menu .main-menu-content {
  padding: 0;
  height: auto !important;
}


.main-menu.menu-fixed {
  height: auto !important;
}

kbd {
  padding: .2rem .4rem;
  font-size: .875em;
  color: #fff;
  background-color: #c2c8ce !important;
  border-radius: .2rem;
}

/* .table-scroll thead th{
    position: sticky !important;
    top: 122px !important;  
    background: #f8f9fa;  
    z-index: 2; 
} */

/* Active rows */
/* tr.odd.status-active {
   
}
tr.even.status-active {
   
} */

/* Inactive rows */
tr.odd.status-inactive {
  background-color: rgba(255, 0, 0, 0.15) !important;
  opacity: 1 !important;
}

tr.even.status-inactive {
  background-color: rgba(255, 0, 0, 0.25) !important;
  opacity: 1 !important;
}

.line-mb-2 {
  margin-bottom: 2px !important;
}

.line-text-color {
  color: #0098d9;
}

.current-status .alert {
  padding: 2px 7px 2px 7px !important;
  border-radius: 6px !important;
  font-size: 0.929rem !important;
  /* line-height: 2 !important; */
}

.wid-100per {
  width: 100% !important;
}

/* Wrapper for controlling scroll only on mobile */
.table-wrapper {
  width: 100%;
}

.tab-error {
  background-color: #ffe5e5 !important;
  color: #c10000 !important;
}

.match-tabs .nav-link {
  border: none !important;
  padding: 15px 10px !important;
  color: #82868b !important;
  font-weight: 600;
  background: transparent !important;
  position: relative;
}

.match-tabs .nav-link.active {
  color: #333 !important;
}

.match-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 3px;
  background-color: #5a8dee;
}

.match-sidebar {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
  border-radius: 8px;
}

.bg-light-blue {
  background-color: #e7f1ff !important;
}

.bg-light-green {
  background-color: #f6fff6 !important;
}

/* Modern Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  transition: all 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
  background-color: rgba(76, 217, 100, 0.9);
  border-color: rgba(76, 217, 100, 1);
}

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

.toggle-switch input:focus+.toggle-slider {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Multi-select container animation */
.multi-select-container {
  transition: all 0.3s ease;
}

.multi-select-container:hover {
  box-shadow: 0 4px 12px rgba(108, 122, 137, 0.5) !important;
  transform: translateY(-1px);
}

/* Selected Transaction Row Highlighting */
.selected-transaction-row {
  background-color: #e3f2fd !important;
  border-left: 4px solid #2196F3 !important;
  transition: all 0.3s ease;
}

.selected-transaction-row:hover {
  background-color: #bbdefb !important;
}

/* Checkbox styling in selected rows */
.selected-transaction-row .uncat-checkbox {
  transform: scale(1.1);
}

/* Animation for row selection */
@keyframes rowSelect {
  0% {
    background-color: transparent;
  }

  50% {
    background-color: #90caf9;
  }

  100% {
    background-color: #e3f2fd;
  }
}

.selected-transaction-row {
  animation: rowSelect 0.4s ease;
}

/* DataTable specific styles for selected rows */
table.dataTable tbody tr.selected-transaction-row td {
  background-color: #e3f2fd !important;
  /* border-left: 4px solid #2196F3; */
}

table.dataTable tbody tr.selected-transaction-row:hover td {
  background-color: #bbdefb !important;
}

/* Handle odd/even row colors when selected */
table.dataTable.stripe tbody tr.odd.selected-transaction-row,
table.dataTable.display tbody tr.odd.selected-transaction-row {
  background-color: #e3f2fd !important;
}

table.dataTable.stripe tbody tr.even.selected-transaction-row,
table.dataTable.display tbody tr.even.selected-transaction-row {
  background-color: #e3f2fd !important;
}

table.dataTable.hover tbody tr.selected-transaction-row:hover,
table.dataTable.display tbody tr.selected-transaction-row:hover {
  background-color: #bbdefb !important;
}

/* Ensure checkbox is visible and styled in selected rows */
.selected-transaction-row input[type="checkbox"] {
  cursor: pointer;
  transform: scale(1.1);
  accent-color: #2196F3;
}

/* Add subtle pulse effect to newly selected rows */
@keyframes pulseSelect {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0);
  }
}

.selected-transaction-row.newly-selected {
  animation: rowSelect 0.4s ease, pulseSelect 0.6s ease;
}

/* Ensure text remains readable in selected rows */
.selected-transaction-row td {
  color: #1a1a1a !important;
}

.selected-transaction-row a {
  color: #0d47a1 !important;
}

.selected-transaction-row a:hover {
  color: #1976d2 !important;
  text-decoration: underline;
}

/* Make uncategorized table rows clickable */
#uncategorizedtbl tbody tr {
  cursor: pointer;
}

/* Toggle status text animation */
.toggle-status {
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========================================
   MATCH TRANSACTION SECTION BEAUTIFICATION
   ======================================== */

/* Best Matches Header */
.best-matches-header {
  background: linear-gradient(135deg, #647891 0%, #6F85AD 100%);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.best-matches-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.best-matches-header h6 {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.best-matches-header .match-count-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.786rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.best-matches-header .best-matches-icon {
  color: #fff;
  transition: transform 0.3s ease;
}

/* Match Item Cards */
.match-item {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #e8ecf1;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.match-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(180deg, #647891 0%, #6F85AD 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.match-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
  border-color: #647891;
}

.match-item:hover::before {
  transform: scaleY(1);
}

.match-item .font-weight-bold {
  color: #2c3e50;
  font-size: 0.929rem;
}

.match-item .text-muted {
  color: #7f8c8d;
  font-size: 0.786rem;
}

/* Match Button Styling */
.match-item .btn-primary.match-btns {
  background: linear-gradient(135deg, #647891 0%, #6F85AD 100%);
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 0.857rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.match-item .btn-primary.match-btns:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

/* Possible Matches Section */
.possible-matches-container {
  margin-top: 16px;
}

.possible-matches-container h6 {
  color: #2c3e50;
  font-weight: 700;
  font-size: 0.929rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.select-all-matches {
  font-size: 0.786rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.select-all-matches:hover {
  transform: scale(1.05);
  text-decoration: underline;
}

.unselect-all-matches {
  font-size: 0.786rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.unselect-all-matches:hover {
  transform: scale(1.05);
  text-decoration: underline;
  color: #c82333 !important;
}

/* Possible Match Items */
.possible-match {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 6px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.possible-match:hover {
  background: #e9ecef;
  border-color: #647891;
  transform: translateX(2px);
}

.possible-match.selected {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-color: #647891;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* Global keyboard (Tab) focus indicator color */
:focus-visible {
  outline: 2px solid #adb5bd !important;
  outline-offset: 1px;
}

/* Select2: remove the seam line between the closed control and its open
   dropdown (select2-dropdown--below already drops its own border-top for
   this reason; the control's border-bottom was the only line left showing). */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
}

/* Select2's inline search field sits inside an overflow:hidden selection box,
   so the global focus outline above gets clipped to a stray line across it.
   The container already shows its own open/focus state, so just suppress
   the outline on the search input itself. */
.select2-search__field:focus,
.select2-search__field:focus-visible {
  outline: none !important;
}

.possible-match.bg-light-green {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

.possible-match .font-weight-bold {
  color: #2c3e50;
  font-size: 0.857rem;
}

.possible-match .text-muted {
  color: #7f8c8d;
  font-size: 0.75rem;
}

/* Select/Selected States */
.unselected-state {
  color: #647891 !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

.selected-state {
  color: #28a745 !important;
  font-weight: 700;
}

.selected-state i {
  animation: checkBounce 0.4s ease;
}

@keyframes checkBounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

/* Pending Section */
.pending-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  padding: 10px;
  margin-top: 12px;
}

.pending-label {
  color: #647891;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.857rem;
}

.pending-label:hover {
  color: #6F85AD;
  transform: translateX(2px);
}

.pending-amount {
  background: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.pending-val {
  color: #647891;
  font-size: 0.929rem;
}

/* Match Sidebar Tabs */
.match-tabs .nav-link {
  color: #6c757d;
  font-weight: 600;
  border: none;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  padding: 10px 16px;
}

.match-tabs .nav-link:hover {
  color: #647891;
  border-bottom-color: rgba(102, 126, 234, 0.3);
}

.match-tabs .nav-link.active {
  color: #647891;
  background: transparent;
  border-bottom-color: #647891;
}

/* Footer Buttons */
.match-sidebar .card-footer .btn-crud {
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.857rem;
  transition: all 0.3s ease;
}

.match-sidebar .card-footer .btn-primary {
  background: linear-gradient(135deg, #647891 0%, #6F85AD 100%);
  border: none;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.match-sidebar .card-footer .btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.match-sidebar .card-footer .btn-secondary {
  background: #6c757d;
  border: none;
}

.match-sidebar .card-footer .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-2px);
}

/* Placeholder Styling */
#matching-placeholder,
#categorize-placeholder {
  padding: 40px 20px;
  text-align: center;
}

#matching-placeholder i,
#categorize-placeholder i {
  color: #cbd5e0;
  font-size: 3.429rem;
  margin-bottom: 12px;
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

#matching-placeholder p,
#categorize-placeholder p {
  color: #a0aec0;
  font-size: 0.929rem;
  margin: 0;
}

/* Scrollbar Styling for Match Sidebar */
.match-sidebar .card-body::-webkit-scrollbar {
  width: 6px;
}

.match-sidebar .card-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.match-sidebar .card-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #647891 0%, #6F85AD 100%);
  border-radius: 10px;
}

.match-sidebar .card-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6F85AD 0%, #647891 100%);
}

/* Animation for content loading */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.best-matches-container .match-item,
.possible-matches-list .possible-match {
  animation: fadeInUp 0.4s ease forwards;
}

.best-matches-container .match-item:nth-child(2) {
  animation-delay: 0.1s;
}

.best-matches-container .match-item:nth-child(3) {
  animation-delay: 0.2s;
}

.possible-matches-list .possible-match:nth-child(1) {
  animation-delay: 0.05s;
}

.possible-matches-list .possible-match:nth-child(2) {
  animation-delay: 0.1s;
}

.possible-matches-list .possible-match:nth-child(3) {
  animation-delay: 0.15s;
}

/* Sticky header only for desktop/tablet */
@media (min-width: 768px) {
  .sticky-table thead th {
    position: sticky;
    top: 125px;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }

  /* Remove overflow for sticky to work properly */
  .table-wrapper {
    overflow: visible !important;
  }
}

/* Enable horizontal scroll on mobile */
@media (max-width: 767px) {
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .sticky-table thead th {
    position: static !important;
    box-shadow: none !important;
  }
}

/* Split Transaction Styles */
.btn-split-pill {
  background-color: #003f5c !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 0.786rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 63, 92, 0.2);
  transition: all 0.2s ease;
}

.btn-split-pill:hover {
  background-color: #002d42 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 63, 92, 0.3);
}

.split-row {
  background: #fcfdfe;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 12px;
  position: relative;
  transition: all 0.2s ease;
}

.split-row:hover {
  border-color: #d1e9ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.shared-date-container {
  background: #f8fbff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #d1e9ff;
}

.btn-outline-dashed {
  border: 2px dashed #5a8dee !important;
  background-color: #fff !important;
  color: #5a8dee !important;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.btn-outline-dashed:hover {
  background-color: #f0f7ff !important;
  border-color: #4a7dce !important;
  color: #4a7dce !important;
}

.split-summary-card {
  background-color: #f8fbff;
  border: 1px solid #e1efff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 1.5rem;
}

.bank-invoice-pay-amount {
  width: 70px;
}

.badge-balanced {
  background-color: #e6fdf0 !important;
  color: #10b981 !important;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.929rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
}

.badge-not-balanced {
  background-color: #fff1f2 !important;
  color: #f43f5e !important;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.929rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
}

.split-summary-label {
  color: #8e99a7;
  font-size: 1rem;
}

.split-summary-value {
  color: #64748b;
  font-weight: 600;
}

.final-total-blue {
  color: #3b82f6 !important;
  font-size: 1.5rem !important;
  font-weight: 700;
}

.form-control-sm:focus {
  border-color: #5a8dee;
  box-shadow: 0 0 0 3px rgba(90, 141, 238, 0.1);
}



/* Dashboard */
body {
  background: #f4f6f9;
}

/* Remove link style */
.stat-link {
  text-decoration: none;
  color: inherit;
}

/* Executive Widget */
.executive-widget {
  background: #ffffff;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-bottom: 4px solid #116c74;
  transition: all 0.25s ease;
}

/* Hover */
.executive-widget:hover {
  border-bottom: 4px solid #116c74;
  /* transform: translateY(-3px); */
}

/* Text */
.card-category {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 8px;
}

.card-value {
  font-size: 2.286rem;
  font-weight: 700;
  color: #111827;
}

/* Icon */
.stat-icon {
  font-size: 2rem;
  color: #3b82f6;
  opacity: 0.8;
}

/* Different Color Themes */
.widget-area {
  border-bottom-color: #116c74;
}

.widget-leads {
  border-bottom-color: #22c55e;
}

.widget-tickets {
  border-bottom-color: #f59e0b;
}

.widget-suppliers {
  border-bottom-color: #ef4444;
}

.stat-icon-box.bg-citron.bg-area1 {
  background: #06696d;
}

.stat-icon-box.bg-citron.bg-area2 {
  background: #186e78;
}

.stat-icon-box.bg-citron.bg-area3 {
  background: #2a7383;
}


.stat-icon-box.bg-citron.bg-area4 {
  background: #3c788f;
}



.stat-icon-box.bg-citron.bg-area5 {
  background: #4d7c99;
}


.stat-icon-box.bg-citron.bg-area6 {
  background: #6282a5;
}



/* // Table View */

table.table-bordered.dataTable th:first-child {
  border-top-left-radius: 0px;
}

table.table-bordered.dataTable th {
  border-radius: 0px;
}

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right: 0px solid #e3ebf3 !important;
  border-top-right-radius: 0px;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #3e5072;
  border-top: 0px solid #6e84ac;
  background: var(--gradient1) !important;
  border-right-color: #768cb5;
  color: #111111;


}


table.dataTable {
  border-collapse: collapse !important;
}

table.table-bordered.dataTable thead tr:first-child th,
table.table-bordered.dataTable thead tr:first-child td {
  border-top-width: 0px !important;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border-bottom-width: 0px !important;
}

table.dataTable.erp-zebra tbody tr:nth-child(odd) {
  background-color: #f9fafb;
}


.custom-legend {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  width: 160px;
  text-align: left;
  line-height: 1.4;
}

.chart-container {
  height: 350px;
}

.about-us {
  z-index: 999999;
}

tr:hover td {
  border-radius: 0% !important;
}

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right: 1px solid #e3ebf3 !important;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-secondary-color) !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-secondary-color) !important;
}

/* .btn-secondary:hover{
  background-color:var(--primary-color) !important;
  border-color:var(--primary-color) !important;
  color: var(--font-primary-color) !important;
} */

.btn-secondary:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--font-primary-color) !important;
}



/* Open */
.status-open {
  background-color: var(--open-color) !important;
  color: #fff;
}

/* Converted */
.status-converted {
  background-color: var(--converted-color) !important;
  color: #fff;
}

/* Completed */
.status-completed {
  background-color: var(--completed-color) !important;
  color: #fff;
}

/* Draft */
.status-draft {
  background-color: var(--draft-color) !important;
  color: #000;
}

/* Updated */
.status-updated {
  background-color: var(--updated-color) !important;
  color: #fff;
}

/* Expired */
.status-expired {
  background-color: var(--expired-color) !important;
  color: #fff;
}

/* Lost / Rejected */
.status-rejected {
  background-color: var(--rejected-color) !important;
  color: #fff;
}

/* Created */
.status-created {
  background-color: var(--created-color) !important;
  color: #fff;
}

/* Approved */
.status-approved {
  background-color: var(--approved-color) !important;
  color: #fff;
}

/* Unapproved */
.status-unapproved {
  background-color: var(--unapproved-color) !important;
  color: #fff;
}



.horizontal-layout .navbar-fixed {
  /* z-index: 9999 !important; */
  /* border-radius: 20px; */
  /* top: 63px; */
  /* margin: 0 5px; */
  padding: 0;
}

.navbar-light .navbar-nav .nav-link {
  color: rgb(0 52 64);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 9px;
  box-shadow: 0px 1px 14px -1px #e5e5e5;
}



table.dataTable {
  clear: both;
  margin-top: 0px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0 !important;
}




/* Modern Bootstrap Notification Panel Styles - Advanced Design */
.notification-item {
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #e9ecef !important;
  background-color: #fff;
}

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

.notification-item:last-child {
  border-bottom: none !important;
}

/* Clean spacing for notification items */
.notification-item {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Task list notification items styling */
.tasklist .media,
.tasklist .d-flex {
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.15s ease;
}

.tasklist .media:hover,
.tasklist .d-flex:hover {
  background-color: #f8f9fa;
}

.tasklist .media:last-child,
.tasklist .d-flex:last-child {
  border-bottom: none;
}

.tasklist .media-heading,
.tasklist h6 {
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.tasklist .notification-text,
.tasklist p {
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.tasklist .media-meta,
.tasklist small {
  font-size: 0.75rem;
}

.tasklist .avatar img {
  object-fit: cover;
  border: 2px solid #e9ecef;
}

/* Close button positioning */
.notification-item .btn-close {
  margin-top: 0.125rem;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.notification-item:hover .btn-close {
  opacity: 0.6;
}

.notification-item .btn-close:hover {
  opacity: 1;
}

/* Text truncation for long content */
.notification-item .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty state styling */
#tasklist-empty {
  padding: 40px 20px;
}

#tasklist-empty i {
  opacity: 0.3;
  margin-bottom: 12px;
}

#tasklist-empty p {
  color: #6c757d;
  font-size: 0.875rem;
}

/* Improved notification panel scrollbar */
.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 6px;
}

.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Fix DataTable FixedHeader duplicate content issue - Completely hide all floating headers */
table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked,
.fixedHeader-floating,
.fixedHeader-locked,
.dataTables_wrapper .fixedHeader-floating,
.dataTables_wrapper .fixedHeader-locked,
.fixedHeader-floating table,
.fixedHeader-locked table,
[class*="fixedHeader"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Remove any duplicate header elements completely */
table.dataTable.fixedHeader-floating thead,
table.dataTable.fixedHeader-locked thead,
.fixedHeader-floating thead,
.fixedHeader-locked thead,
.fixedHeader-floating tbody,
.fixedHeader-locked tbody {
  display: none !important;
}

/* Use sticky header for all DataTables instead of fixedHeader plugin */
.dataTables_wrapper .table thead th,
table.dataTable thead th,
.table thead th {
  position: sticky !important;
  top: 0 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  z-index: 100 !important;
  border-bottom: 2px solid #3e5072 !important;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure table container doesn't cause overflow issues */
.dataTables_wrapper {
  overflow-x: auto;
  position: relative;
}


.table-bordered {
  margin-bottom: 15px;
}


button.btn.btn-secondary.buttons-excel.buttons-html5 {
  padding: 0px 5px !important;
  line-height: 0.75 !important;
  border-radius: 5px;
}

button.btn.btn-secondary.buttons-excel.buttons-html5:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-primary-color) !important;
}


.table th,
.table td {
  border-top: 1px solid #eceef0 !important;
}


table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
  border-bottom-width: 0;
  vertical-align: middle;
  border-radius: 0px !important;
  border: 0px solid #ccc !important;
  border-top: 1px solid #ebe9e9 !important;
}

table.dataTable.erp-zebra.table-striped>tbody>tr.odd>* {
  box-shadow: inset 0 0 0 9999px #f9fafb;
}


button.btn.btn-secondary.buttons-excel.buttons-html5 {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem;
  line-height: 1 !important;
  border-radius: 0.21rem;
  background-color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-secondary-color) !important;

}

.dataTables_length label {
  margin-bottom: 10px;

}

.dataTables_filter label {
  margin-bottom: 10px !important;
}





select.custom-select.custom-select-sm.form-control.form-control-sm {
  padding: 0px 15px !important;
}

/* Dark Theme Styles */
body.dark-theme {
  --dark-bg-primary: #0f172a;
  --dark-bg-secondary: #1e293b;
  --dark-bg-card: #1e293b;
  --dark-text-primary: #f1f5f9;
  --dark-text-secondary: #cbd5e1;
  --dark-border-color: #334155;
  --dark-shadow: rgba(0, 0, 0, 0.3);

  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .card,
body.dark-theme .card-body,
body.dark-theme .card-header {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .content-body {
  background-color: var(--dark-bg-primary) !important;
}

/* body.dark-theme .table thead th, */
body.dark-theme .table,

body.dark-theme .table tbody td {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-tertiary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .table tbody td {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

.dark-theme table.dataTable.erp-zebra.table-striped>tbody>tr.odd>* {
  box-shadow: inset 0 0 0 9999px #1e293b;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .table-striped.erp-zebra tbody tr:nth-of-type(odd) {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .navbar,
body.dark-theme .header-navbar {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .dropdown-menu {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .dropdown-item {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .dropdown-item:hover {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-theme .breadcrumb {
  background-color: transparent !important;
}

body.dark-theme .breadcrumb-item a {
  color: var(--dark-text-secondary) !important;
}

body.dark-theme .text-muted {
  color: var(--dark-text-secondary) !important;
}

body.dark-theme .badge {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .modal-content {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .modal-header,
body.dark-theme .modal-body,
body.dark-theme .modal-footer {
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .list-group-item {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .alert {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: transparent;
  border: none;
  color: var(--dark-text-primary);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 1.286rem;
}

.theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .theme-toggle-btn {
  color: var(--dark-text-primary);
}

body.dark-theme .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

html .dark-theme .content .content-wrapper {
  padding: 0 !important;
}

.dark-theme .navbar-light .navbar-nav .nav-link {
  color: rgb(212 221 223);
}

.dark-theme .table thead th {
  background: var(--gradient2) !important;
  color: var(--dark-text-primary);


}

.dark-theme button.btn.btn-secondary.results-from {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
}

.dark-theme .col-form-label {
  color: var(--dark-text-primary) !important;
}

.dark-theme input#head-customerbox {
  background: none !important;
}

a.nav-link.theme-toggle-btn:hover {
  background: none;
}

.dark-theme .bg-gradient-directional-blue {
  background: var(--gradient2) !important;
}



.dark-theme .app-card-advanced {
  background: var(--dark-bg-card);
  border: 2px solid var(--dark-border-color);

}


.dark-theme .stat-card {
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  background: var(--dark-bg-card);
  border: none;
}

.dark-theme .table-responsive {
  box-shadow: none;
}

body.dark-theme .card-body-dark {
  background-color: transparent !important;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
  color: var(--dark-text-primary) !important;
}

body.dark-theme p {
  color: var(--dark-text-secondary) !important;
}

body.dark-theme .app-card-advanced i {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .list-group-item-action::before {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .quick-access-container .card-title.text-primary,
body.dark-theme .quick-access-container .card-title.text-success,
body.dark-theme .quick-access-container .card-title.text-info {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .card-category,
body.dark-theme .card-value {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .text-success {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .stat-icon-box {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .btn-secondary {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .btn-primary {
  background-color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--primary-color) !important;
}

body.dark-theme .settings-box a {
  color: var(--dark-text-primary) !important;
}

/* opening balance */
.opening-balance-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ob-category-block {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ob-category-block .header-row {
  display: flex;
  align-items: center;
  background: #e9ecef;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  padding: 12px 16px;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #dee2e6;
  font-size: 0.95rem;
}

.ob-category-block .header-row .ob-cell {
  padding: 0;
}

.ob-accounts-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
}

.ob-accounts-inner .ob-inner-header {
  display: flex;
  align-items: center;
  padding: 8px 0 10px 0;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6c757d;
}

.ob-accounts-inner .ob-inner-header .ob-account {
  flex: 1;
}

.ob-accounts-inner .ob-inner-header .ob-debit,
.ob-accounts-inner .ob-inner-header .ob-credit {
  width: 140px;
  min-width: 140px;
  text-align: right;
  padding-left: 12px;
}

.ob-accounts-inner .ob-row {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 10px 10px;
  margin: 0;
  min-height: 44px;
}

.ob-accounts-inner .ob-row .ob-account {
  flex: 1;
  font-size: 0.9rem;
  color: #212529;
}

.ob-accounts-inner .ob-row .ob-debit,
.ob-accounts-inner .ob-row .ob-credit {
  width: 140px;
  min-width: 140px;
  padding-left: 16px;
}

.ob-accounts-inner .ob-row .debit-input,
.ob-accounts-inner .ob-row .credit-input {
  text-align: right;
  border-radius: 6px;
  border: 1px solid #ced4da;
  padding: 6px 10px;
}

.opening-balance-list .ob-header-row {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  font-weight: bold;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  font-size: 0.85rem;
}

.opening-balance-list .ob-header-row .ob-cell {
  padding: 0;
}

.opening-balance-list .ob-header-row .ob-account {
  flex: 1;
}

.opening-balance-list .ob-header-row .ob-debit,
.opening-balance-list .ob-header-row .ob-credit {
  width: 140px;
  min-width: 140px;
  text-align: right;
  padding-left: 12px;
}

.opening-balance-list .ob-footer {
  display: flex;
  align-items: center;
  font-weight: bold;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0;
}

.opening-balance-list .ob-footer .ob-account {
  flex: 1;
}

.opening-balance-list .ob-footer .ob-debit,
.opening-balance-list .ob-footer .ob-credit {
  width: 140px;
  min-width: 140px;
  text-align: right;
  padding-left: 12px;
}

.opening-balance-list #balance_msg_row {
  padding: 10px 16px;
  margin: 0;
}

.opening-balance-list #balance_msg_row .ob-cell {
  padding: 0;
}

.custom-item-background {
  background-color: #eee !important;
  border-bottom: 1px solid #ddd !important;
}

.disable-approvals {
  pointer-events: none;
  cursor: not-allowed;
}

.attendance-btn-header {

  display: flex !important;
  align-items: center;

  gap: 6px;

  padding: 5px 10px !important;

  border-radius: 5px;

  transition: 0.3s ease;

  color: #ffffff !important;

  text-decoration: none !important;
}

.attendance-btn-header:hover {

  background: rgba(255, 255, 255, 0.12);
}

.attendance-icon {

  width: 15px !important;
  height: 15px !important;

  color: #ffffff !important;
}

#attendance-text {

  color: #ffffff;

  font-size: 0.857rem;

  font-weight: 600;

  line-height: 1;
}

.clocked-in {

  background: #28a745;
}

.clocked-out {

  background: #dc3545;
}

.attendance-status-box {

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  margin-left: 15px;
  font-size: 0.929rem;
  font-weight: 600;
  transition: 0.3s ease;
}

.header-attendance-status {
  background: #ffffff;
  margin-left: 0;
  margin-right: 8px;
  padding: 4px 12px;
  white-space: nowrap;
}

.attendance-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

/* PRESENT */

.present-status {
  color: #28a745;
}

.present-status .attendance-dot {
  background: #28a745;
}

/* NOT PRESENT */
.absent-status {
  color: #dc3545;
}

.absent-status .attendance-dot {

  background: #dc3545;
}

@keyframes pulse {

  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}
/* Shared print-fit rule for wide report tables (printThis.js flow).
   Add class="print-fit-table" to any <table> that needs its columns
   shrunk to fit the printed page instead of getting clipped. */
@media print {
    @page {
        size: landscape;
        margin: 8mm;
    }
    table.print-fit-table {
        table-layout: fixed;
        width: 100%;
        font-size: 0.75rem;
        border-collapse: collapse;
    }
    table.print-fit-table tfoot {
        display: none;
    }
    table.print-fit-table th,
    table.print-fit-table td {
        white-space: normal;
        word-break: break-word;
        padding: 2px 4px;
    }
    
}

/* AI recommendations tab (quote create) — matches cloudbizerp_ai_upsell */
.recomentaion-btn {
  position: fixed;
  right: -75px;
  top: calc(50% + 160px);
  transform: rotate(-90deg);
  z-index: 99999 !important;
  padding: 14px 20px;
}

.responsive-filter-icon{
  display: none !important;
}

/* Filter-panel select2 tags + range inputs (invoices, credit notes listing search).
   Long labels overflow narrow filter columns, which clips the theme's float:right
   remove button out of view. Pin it and truncate instead. */
.whole_filter_section .select2-container--default .select2-selection--multiple .select2-selection__choice {
  position: relative;
  max-width: 100%;
  padding-right: 20px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whole_filter_section .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  margin-left: 0;
}
.whole_filter_section .range-row {
  display: flex;
  align-items: center;
}
.whole_filter_section .range-row-sep {
  padding: 0 8px;
  color: #6b6f82;
}
/* Active / Inactive toggle switch (active_toggle_switch() helper) */
.cust-switch { position: relative; display: flex; align-items: center; height: 43px; padding-left: 50px; }
.cust-switch input[type=checkbox] { position: absolute; left: 0; top: 50%; width: 42px; height: 24px; margin: -12px 0 0 0; opacity: 0; z-index: 2; cursor: pointer; }
.cust-switch label { position: relative; margin: 0; cursor: pointer; font-size: 1rem; font-weight: 500; color: #444; }
.cust-switch label::before { content: ""; position: absolute; left: -50px; top: 50%; width: 42px; height: 24px; margin-top: -12px; border-radius: 24px; background: #c8ccd2; transition: background .2s; }
.cust-switch label::after { content: ""; position: absolute; left: -47px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s; }
.cust-switch input:checked ~ label::before { background: #27ae60; }
.cust-switch input:checked ~ label::after { transform: translateX(18px); }
.cust-switch .st-on { display: none; color: #27ae60; }
.cust-switch .st-off { color: #c0392b; }
.cust-switch input:checked ~ label .st-on { display: inline; }
.cust-switch input:checked ~ label .st-off { display: none; }

/* Customers list: hide the DataTables sizing header inside the scroll body (it showed as a second heading row) */
#clientstable_wrapper .dataTables_scrollBody thead { visibility: collapse; }

/* A rejected record has nothing left to reject: hide the Reject pill on any page that shows the
   "Rejected — Update to reopen and continue." banner (.alert-rejected). */
body:has(.alert-rejected) .breadcrumb-approvals li:has(> a.cancel_level),
body:has(.alert-rejected) .breadcrumb-approvals li:has(> a.cancel_approval_level),
body:has(.alert-rejected) .breadcrumb-approvals li:has(> a.dynamic_cancel_level),
body:has(.record-sent-marker) .breadcrumb-approvals li:has(> a.cancel_level),
body:has(.record-sent-marker) .breadcrumb-approvals li:has(> a.cancel_approval_level),
body:has(.record-sent-marker) .breadcrumb-approvals li:has(> a.dynamic_cancel_level) {
  display: none !important;
}
/* Same for a record that has already been Sent (Quote, Purchase Order, Purchase Return, Credit Note, RFQ). */


/* Leads list: keep status pills on one line.
   No display here: the shared chip rule makes these inline-flex so the label
   is centred in the pill, and this ID selector outranked it - the text sat
   ~3.5px above centre on this page only, which is why the leads list looked
   different from every other list. nowrap is all this rule ever needed. */
#customerleads td span[class^="st-"] {
  white-space: nowrap;
}

/* ===== Bell dropdown: modern activity / comment cards ===== */
li.dropdown-notification #messagecount + .dropdown-menu {
  width: 400px;
  max-width: 94vw;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .18) !important;
}
li.dropdown-notification #messagecount + .dropdown-menu > li:nth-child(2) {
  max-height: min(70vh, 540px) !important;
  overflow-y: auto;
  scrollbar-width: thin;
}
.tasklist a.bc,
.tasklist a.bc:hover { text-decoration: none; }
.tasklist a.bc {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 20px;
  min-height: 84px;
  box-sizing: border-box;
  color: #1f2937;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  transition: background-color .15s ease, transform .15s ease;
}
.tasklist a.bc:hover { background: #f6f9fd; }
.tasklist a.bc:last-child { border-bottom: 0; }
.bc-avatar {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.143rem;
  background: linear-gradient(135deg, var(--bc-accent, #1e88e5), var(--bc-accent2, #42a5f5));
  box-shadow: 0 4px 10px rgba(30, 136, 229, .25);
}
.bc-body { flex: 1 1 auto; min-width: 0; }
.bc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bc-title {
  font-size: .875rem; font-weight: 600; line-height: 1.35; color: #111827;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-title b { font-weight: 600; }
.bc-title span { font-weight: 400; color: #6b7280; }
.bc-badge {
  flex: 0 0 auto;
  font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  color: var(--bc-accent, #1e88e5);
  background: color-mix(in srgb, var(--bc-accent, #1e88e5) 12%, #fff);
  white-space: nowrap;
}
.bc-sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; font-size: .78rem; line-height: 1.4; color: #6b7280;
  overflow-wrap: anywhere;
}
.bc-sub i { flex: 0 0 14px; width: 14px; text-align: center; font-size: .78rem; line-height: 1; color: #9ca3af; }
.bc-quote {
  margin-top: 8px; padding: 8px 10px;
  font-size: .8rem; line-height: 1.45; color: #374151;
  background: #f5f3ff; border-radius: 8px;
  border-left: 3px solid var(--bc-accent, #7e57c2);
  overflow-wrap: anywhere; white-space: normal;
}
.bc-quote span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 500; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  color: #4b5563; background: #f3f4f6;
}
.bc-chip i { width: 12px; text-align: center; font-size: .72rem; line-height: 1; }
.bc-chip.is-high { color: #b91c1c; background: #fee2e2; }
.bc-chip.is-medium { color: #b45309; background: #fef3c7; }
.bc-chip.is-low { color: #15803d; background: #dcfce7; }
.bc-time { display: block; margin-top: 8px; font-size: .7rem; color: #9ca3af; }
body.dark-theme .tasklist a.bc { background: #1f2937; color: #e5e7eb; border-bottom-color: #2d3748; }
body.dark-theme .tasklist a.bc:hover { background: #243244; }
body.dark-theme .bc-title { color: #f3f4f6; }
body.dark-theme .bc-quote { background: #2a2f45; color: #d1d5db; }
body.dark-theme .bc-chip { background: #2d3748; color: #cbd5e1; }

/* Bell dropdown: header, cards and footer share the same 20px side gutter */
li.dropdown-notification #messagecount + .dropdown-menu > li:first-child,
li.dropdown-notification #messagecount + .dropdown-menu > li.task-notification-footer {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.tasklist a.bc .bc-avatar { margin: 0; }

/* Bell card icon: keep the glyph perfectly centred inside its tile */
.tasklist a.bc .bc-avatar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.tasklist a.bc .bc-avatar i {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.286rem;
  line-height: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
}

/* Bell dropdown readability: taller scroll area (the inline 250px clipped cards mid-row),
   a sensible width, and cards that never get squeezed or cut inside the list. */
li.dropdown-notification #messagecount + .dropdown-menu {
  width: 420px;
  max-width: calc(100vw - 24px) !important;
}
li.dropdown-notification #messagecount + .dropdown-menu > li:first-child {
  max-height: min(70vh, 460px) !important;
  overscroll-behavior: contain;
}
.tasklist a.bc { flex-shrink: 0; }
.tasklist a.bc .bc-time { margin-top: 6px; }

/* ==========================================================================
   Dashboard stat cards - one look across every dashboard
   --------------------------------------------------------------------------
   CRM, Sales, Stock, Accounts, Counter Sales and Data & Reports all build
   their tiles from the same .stat-card markup, but older rules left them with
   mixed icon colours, right-aligned text and uneven heights (a card without a
   comparison line sat shorter than its neighbours). Appended here so these
   rules win on source order without fighting specificity.
   ========================================================================== */
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  min-height: 104px;
  padding: 1rem;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10);
}

/* Equal heights: the column stretches, so the link and card must fill it. */
.stat-link {
  display: block;
  height: 100%;
}

/* One accent for every icon, whatever bg-* class the older markup carries. */
.stat-card .stat-icon-box,
.stat-card .stat-icon-box[class*="bg-"] {
  position: static;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e7f3f1 !important;
  color: #0b5c57 !important;
  font-size: 1.429rem;
  box-shadow: none;
}

.stat-card .card-content-custom {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  text-align: left;
}

.stat-card .card-category {
  margin-bottom: 2px;
  font-size: 0.929rem;
  font-weight: 500;
  line-height: 1.25;
  color: #64748b;
}

.stat-card .card-value {
  font-size: 1.857rem;
  font-weight: 700;
  line-height: 1.15;
  color: #0f2b3d;
}

/* The comparison line is pinned to the bottom so cards with one and cards
   reading "All time total" still line up. The markup sets font-size and
   margin-top inline, hence !important on those two. */
.stat-card .card-comparison {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto !important;
  padding-top: 10px;
  font-size: 0.786rem !important;
}

.stat-card .card-comparison .text-success,
.stat-card .card-comparison .text-danger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.786rem;
  font-weight: 600;
  white-space: nowrap;
}

.stat-card .card-comparison .text-success {
  background: #e7f6ee;
  color: #1a7f4b !important;
}

.stat-card .card-comparison .text-danger {
  background: #fdecec;
  color: #c93a3a !important;
}

.stat-card .card-comparison .text-muted {
  color: #94a3b8 !important;
}

/* Dark theme: same shapes, surfaces from the theme's own variables. */
body.dark-theme .stat-card {
  background: var(--dark-bg-card);
  border-color: var(--dark-border-color);
}

body.dark-theme .stat-card .stat-icon-box,
body.dark-theme .stat-card .stat-icon-box[class*="bg-"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .stat-card .card-comparison .text-success {
  background: rgba(26, 127, 75, 0.18);
  color: #5fd49a !important;
}

body.dark-theme .stat-card .card-comparison .text-danger {
  background: rgba(201, 58, 58, 0.18);
  color: #ff8f8f !important;
}

/* ==========================================================================
   Columns control (DataTables colVis) — a dropdown anchored under the button,
   each column a checkbox row. DataTables toggles .active on a visible
   column's entry, so the box is drawn from that class and can never fall out
   of step with the table.
   ========================================================================== */
.dt-button-collection.erp-colvis-menu {
  min-width: 220px;
  max-height: 60vh;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}

.dt-button-collection.erp-colvis-menu .dt-button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 10px 6px 32px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: 0.929rem;
  text-align: left;
}

.dt-button-collection.erp-colvis-menu .dt-button:hover {
  background: #f1f5f9 !important;
}

/* The box itself */
.dt-button-collection.erp-colvis-menu .dt-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
}

/* Ticked when the column is showing */
.dt-button-collection.erp-colvis-menu .dt-button.active::before {
  border-color: var(--primary-color);
  background: var(--primary-color);
}

.dt-button-collection.erp-colvis-menu .dt-button.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15px;
  width: 4px;
  height: 8px;
  margin-top: -1px;
  transform: translateY(-50%) rotate(45deg);
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

body.dark-theme .dt-button-collection.erp-colvis-menu {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-card);
}

body.dark-theme .dt-button-collection.erp-colvis-menu .dt-button {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .dt-button-collection.erp-colvis-menu .dt-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Columns button: icon only, with a dot when this page's table is not showing
   every column (see updateColvisIndicator in datatable-export.js). */
.buttons-colvis.buttons-colvis-icon {
  position: relative;
  padding-right: 0.6rem;
  padding-left: 0.6rem;
}

.buttons-colvis.buttons-colvis-icon.has-custom-columns::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #f59e0b;
}

/* Tile figure settings button, beside the quick-filter row's filter icon. */
.erp-period-stats-wrap {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.erp-period-stats-menu {
  z-index: 1060;
}

/* Export dropdown (Excel / CSV / PDF) — same panel as the Columns list, but
   plain rows: these are actions, not toggles, so no checkbox. */
.dt-button-collection.erp-export-menu {
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}

.dt-button-collection.erp-export-menu .dt-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 12px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: 0.929rem;
  text-align: left;
}

.dt-button-collection.erp-export-menu .dt-button:hover {
  background: #f1f5f9 !important;
}

.dt-button-collection.erp-export-menu .dt-button i {
  width: 16px;
  margin-right: 8px;
  text-align: center;
  color: #64748b;
}

body.dark-theme .dt-button-collection.erp-export-menu {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-card);
}

body.dark-theme .dt-button-collection.erp-export-menu .dt-button {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .dt-button-collection.erp-export-menu .dt-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Table search box: rounded like the other inputs in the app (the Suppliers
   filter and the header search both use a 10px radius). */
/* .form-control-sm (added by the DataTables Bootstrap integration) sets a
   2-3px radius, hence the !important here. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_filter input[type="search"],
.dataTables_filter input {
  border-radius: 10px !important;
  border: 1px solid var(--border-color);
  padding: 5px 12px !important;
  height: auto;
}

.dataTables_filter input:focus {
  border-color: #cbd5e1;
  box-shadow: none;
  outline: none;
}

/* The two right-edge slide-out tabs (History / Activity Tracker, and AI
   Recommendations) are both rotated -90deg and pinned to the right rail, but
   were anchored differently — one from its right edge, one from its centre —
   so their boxes landed on top of each other. Same rail, same origin, and the
   AI tab offset below the first by more than half of either label's length. */
.recomentaion-btn {
  right: 15px;
  top: calc(50% + 175px);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
}

/* Quote action bar: the buttons on the left sat in a 25% column (col-lg-3)
   that is narrower than they are, so they broke across three lines while the
   status column beside them was usually empty. On a wide screen let each
   group take the width it needs and push the right-hand group to the edge. */
@media (min-width: 992px) {
  .quote-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .quote-action-bar > [class*="col-lg-"] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }

  /* The status / message column takes whatever is left between them. */
  .quote-action-bar > .col-lg-6 {
    flex: 1 1 auto;
    min-width: 0;
  }

  .quote-action-bar > .col-lg-3:last-child {
    margin-left: auto;
    text-align: right;
  }
}

/* Even spacing between the action buttons, wherever they wrap. */
.quote-action-bar .btn {
  margin-right: 4px;
}

/* ==========================================================================
   Table toolbar — one look for every list page: light outlined buttons on the
   left of a divider, a search field with its own magnifier on the right.
   Applies to any DataTable, not just the ones using the shared export module.
   ========================================================================== */
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button {
  height: 36px;
  margin-right: 6px;
  padding: 0 0.85rem;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 0.929rem;
  line-height: 34px;
  box-shadow: none !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .dt-button:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: var(--primary-color) !important;
}

.dataTables_wrapper .dt-buttons .btn i,
.dataTables_wrapper .dt-buttons .dt-button i {
  margin-right: 5px;
  color: #64748b;
}

/* "Results from: …" reads as a caption, not a control. */
.results-and-buttons-wrapper .results-from,
.dataTables_wrapper .results-from {
  color: #64748b;
  font-size: 0.929rem;
}

/* Divider between the actions and the search box. */
.dataTables_wrapper .dataTables_filter {
  position: relative;
  padding-left: 14px;
  border-left: 1px solid var(--border-color);
}

/* The "Search:" caption is replaced by a magnifier drawn inside the field, so
   the label text is collapsed rather than removed (DataTables owns it). */
.dataTables_wrapper .dataTables_filter label {
  position: relative;
  margin-bottom: 0 !important;
  font-size: 0;
}

.dataTables_wrapper .dataTables_filter input {
  padding-left: 32px !important;
  font-size: 0.929rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

/* Keep "Show N entries" in the same visual family. */
.dataTables_wrapper .dataTables_length select {
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

body.dark-theme .dataTables_wrapper .dt-buttons .btn,
body.dark-theme .dataTables_wrapper .dt-buttons .dt-button {
  border-color: var(--dark-border-color) !important;
  background: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
}

/* Rows-per-page now lives inside the Columns panel, so the toolbar's own
   length select is hidden — but only on tables that got the panel. */
.dataTables_wrapper.has-erp-table-settings .dataTables_length {
  display: none;
}

.erp-colvis-menu .erp-cols-length {
  padding: 2px 10px 0;
}

.erp-colvis-menu .erp-cols-length > .erp-cols-heading:first-child {
  margin-top: 0;
}

.erp-colvis-menu .erp-cols-heading {
  margin-bottom: 4px;
  /* Headings after the first need air above them, or "Display" sits right on
     the control above it. */
  margin-top: 12px;
  color: #94a3b8;
  font-size: 0.786rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.erp-colvis-menu .erp-cols-heading-columns {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.erp-colvis-menu .erp-cols-length select {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.929rem;
}

body.dark-theme .erp-colvis-menu .erp-cols-length select {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-card);
  color: var(--dark-text-primary);
}

/* Customer category badge (Consultant, Integrators …): a soft label on its own
   line under the customer name, instead of a solid chip beside it. The colour
   comes from the category and is set inline by customer_category_badge(). */
.customer-type-badge {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* ==========================================================================
   Status chips (Level 1, Waiting, Updated, Canceled, Sent …) — tinted rather
   than solid, and a size down, so a row of them reads as labels beside the
   data instead of blocks of colour. Selectors are the same groups the solid
   colours above use, so every status keeps its own hue.
   ========================================================================== */
.st-Assigned,
.st-Closed,
.st-Draft,
.st-Grey,
.st-Invoiced,
.st-Open,
.st-Printed,
.st-Processing,
.st-Recurring,
.st-Reverted,
.st-Reviewed,
.st-Solved,
.st-Stopped,
.st-Waiting,
.st-accepted,
.st-active,
.st-approved,
.st-assign-for-delivery,
.st-assigned,
.st-canceled,
.st-cancelled,
.st-categorized,
.st-closed,
.st-converted,
.st-created,
.st-customer_approved,
.st-draft,
.st-due,
.st-dummy,
.st-expired,
.st-expiring,
.st-expiring-today,
.st-firstlevel,
.st-fullyconverted,
.st-inactive,
.st-initialized,
.st-inprogress,
.st-matched,
.st-not-converted,
.st-open,
.st-partial,
.st-partiallypaid,
.st-partialy-converted,
.st-pending,
.st-received,
.st-rejected,
.st-reverted,
.st-secondlevel,
.st-sent,
.st-updated,
.st-waitingapproval {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.571rem;        /* 22px - fixed, so every chip is the same box */
  padding: 0.1rem 0.714rem 0 !important;
  border-radius: 999px;
  font-size: 0.786rem !important;
  font-weight: 600;
  line-height: 1 !important;
  white-space: nowrap;
  vertical-align: middle;
}

.st-pending,
.st-firstlevel,
.st-updated,
.st-Recurring,
.st-Open,
.st-open,
.st-created,
.st-expiring,
.st-Printed {
  background-color: var(--color-primary);
}

/* Purchase Bill's own derived status label — not used by any other module. */
.st-overdue {
  background-color: var(--color-danger);
}

.st-inprogress,
.st-customer_approved,
.st-assign-for-delivery {
  background-color: var(--color-progress);
}

.st-initialized {
  background-color: var(--color-initialized);
}




.alert-success,
.alert-converted,
.alert-accepted,
.alert-sent,
.alert-accept-the-quote,
.alert-fully-shipped,
.alert-invoiced,
.alert-fully-returned,
.alert-completed,
.alert-approved,
.alert-accept {
  background-color: var(--color-success);
}


.alert-danger,
.alert-rejected,
.alert-reverted,
.alert-expired,
.alert-written-off,
.alert-delivered,
.alert-cancelled {
  background-color: var(--color-danger-dark);
}


.alert-info,
.alert-assigned,
.alert-open {
  background-color: var(--color-primary);
}


.alert-secondary,
.alert-draft {
  background-color: var(--color-secondary);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.alert-canceled,
.alert-deleted {
  background-color: var(--color-danger-dark);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.alert-partial,
.alert-created,
.alert-updated,
.alert-partially-converted,
.alert-partially-shipped,
.alert-partially-returned {
  background-color: var(--color-warning);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}




.alert-progress,
.alert-in-progress {
  background-color: var(--color-progress);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}


.alert-initialized,
.alert-shipping-initialized,
.alert-return-initialized,
.alert-transfer-initialized {
  background-color: var(--color-initialized);
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.task_Progress,
.task_Due,
.task_Done {
  text-transform: capitalize;
  color: #fff;
  padding: 2px 7px 4px;
  border-radius: 6px;
  font-size: 0.857rem;
  line-height: 2;
}

.task_Done {
  background-color: #5ed45e;
}

.task_Due {
  background-color: #d45e7f;
}

.task_Progress {
  background-color: #848030;
}

.quantity {
  position: relative;
  padding: 2px;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.quantity input {
  width: 70px;
  height: 34px;
  line-height: 1.45;
  float: left;
  display: block;
  padding: 0;
  margin-top: 3px;
  padding-left: 2px;
  border: 1px solid #eee;
}

.quantity input:focus {
  outline: 0;
}

.quantity-nav {
  float: left;
  position: relative;
  height: 42px;
}

.quantity-button {
  position: relative;
  cursor: pointer;
  border-left: 1px solid #eee;
  width: 20px;
  text-align: center;
  color: #333;
  font-size: 0.929rem;
  font-family: "Trebuchet MS", Helvetica, sans-serif !important;
  line-height: 1.7;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

.quantity-button.quantity-up {
  position: absolute;
  height: 50%;
  top: 0;
  border-bottom: 1px solid #eee;
  background: #81ffa2;
}

.quantity-button.quantity-down {
  position: absolute;
  bottom: -1px;
  height: 50%;
  background: #ff9e9e;
}

.horizontal-layout.chat-application .app-content {
  min-height: calc(100% - 65px) !important;
}

.pos_stripe tbody tr:nth-child(4n+1),
.pos_stripe tbody tr:nth-child(4n+2) {
  background-repeat: repeat-x;
  background-image: linear-gradient(45deg, #3cb4f5, #b5e1f5);
}

.tfr td {
  padding: 10px;
}

.ballsWaveG {
  position: relative;
  width: 144px;
  height: 34px;
  margin: 10px auto;
}

.ballsWaveG {
  position: absolute;
  top: 0;
  background-color: rgb(4, 162, 219);
  width: 18px;
  height: 18px;
  animation-name: ballsWaveG;
  -o-animation-name: ballsWaveG;
  -ms-animation-name: ballsWaveG;
  -webkit-animation-name: ballsWaveG;
  -moz-animation-name: ballsWaveG;
  animation-duration: 1.3s;
  -o-animation-duration: 1.3s;
  -ms-animation-duration: 1.3s;
  -webkit-animation-duration: 1.3s;
  -moz-animation-duration: 1.3s;
  animation-iteration-count: infinite;
  -o-animation-iteration-count: infinite;
  -ms-animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-direction: normal;
  -o-animation-direction: normal;
  -ms-animation-direction: normal;
  -webkit-animation-direction: normal;
  -moz-animation-direction: normal;
  border-radius: 9px;
  -o-border-radius: 9px;
  -ms-border-radius: 9px;
  -webkit-border-radius: 9px;
  -moz-border-radius: 9px;
}

#ballsWaveG_1 {
  left: 0;
  animation-delay: 0.52s;
  -o-animation-delay: 0.52s;
  -ms-animation-delay: 0.52s;
  -webkit-animation-delay: 0.52s;
  -moz-animation-delay: 0.52s;
}

#ballsWaveG_2 {
  left: 18px;
  animation-delay: 0.65s;
  -o-animation-delay: 0.65s;
  -ms-animation-delay: 0.65s;
  -webkit-animation-delay: 0.65s;
  -moz-animation-delay: 0.65s;
}

#ballsWaveG_3 {
  left: 36px;
  animation-delay: 0.78s;
  -o-animation-delay: 0.78s;
  -ms-animation-delay: 0.78s;
  -webkit-animation-delay: 0.78s;
  -moz-animation-delay: 0.78s;
}

#ballsWaveG_4 {
  left: 54px;
  animation-delay: 0.91s;
  -o-animation-delay: 0.91s;
  -ms-animation-delay: 0.91s;
  -webkit-animation-delay: 0.91s;
  -moz-animation-delay: 0.91s;
}

#ballsWaveG_5 {
  left: 72px;
  animation-delay: 1.04s;
  -o-animation-delay: 1.04s;
  -ms-animation-delay: 1.04s;
  -webkit-animation-delay: 1.04s;
  -moz-animation-delay: 1.04s;
}

#ballsWaveG_6 {
  left: 90px;
  animation-delay: 1.17s;
  -o-animation-delay: 1.17s;
  -ms-animation-delay: 1.17s;
  -webkit-animation-delay: 1.17s;
  -moz-animation-delay: 1.17s;
}

#ballsWaveG_7 {
  left: 108px;
  animation-delay: 1.3s;
  -o-animation-delay: 1.3s;
  -ms-animation-delay: 1.3s;
  -webkit-animation-delay: 1.3s;
  -moz-animation-delay: 1.3s;
}

#ballsWaveG_8 {
  left: 126px;
  animation-delay: 1.43s;
  -o-animation-delay: 1.43s;
  -ms-animation-delay: 1.43s;
  -webkit-animation-delay: 1.43s;
  -moz-animation-delay: 1.43s;
}

.my_stripe tbody tr:nth-child(4n+1),
.my_stripe tbody tr:nth-child(4n+2) {
  background-color: #ededed;
}

.sub_c {
  background-color: #fff !important;
}

#customer-box-result ol,
#supplier-box-result ol {
  color: #ccc;
  list-style-type: none;
}

#customer-box-result ol li,
#supplier-box-result ol li {
  position: relative;
  font-size: 1.143rem;
  font-weight: 600;
  margin-top: 10px;
  margin-bottom: 5px;
}

#customer-box-result p,
#supplier-box-result p {
  font-size: 1rem;
  padding-left: 14px;
  color: #555;
}

#customer-box-result span,
#supplier-box-result span {
  position: absolute;
}

.ui-front li {
  list-style: none;
  margin-left: -30px;
}

.ui-menu-item-wrapper {
  /* background-color: #b3d8e4;
    max-width: 60%;
    border-bottom: 1px solid #ddd;
    padding: 4px; */
  background-color: #f1f1f1;
  /* max-width: 30%; */
  border-bottom: 1px solid #d0cbcb;
  padding: 4px 10px 4px 11px;
  color: #000000;
}

.st-sub2 {
  background-color: #5ed45e;
  padding: 4pt;
  border-radius: 2pt;
  color: #fff;
}

.st-sub3 {
  background-color: #5da6fb;
  padding: 4pt;
  border-radius: 2pt;
  color: #fff;
}

.st-sub4 {
  background-color: #fb5de8;
  padding: 4pt;
  border-radius: 2pt;
  color: #fff;
}

.has-error {
  color: #ff2a2a;
  border: 1px solid !important;
  padding: 0px;
}

.ui-helper-hidden-accessible {
  display: none;
}

.project_Progress,
.project_Pending,
.project_Finished,
.project_Waiting,
.project_Terminated {
  text-transform: capitalize;
  color: #fff;
  padding: 2px 7px 4px;
  border-radius: 6px;
  font-size: 0.857rem;
  line-height: 2;

}

.project_Progress {
  background-color: #4979d0;
}

.project_Finished {
  background-color: #5ed45e;
}

.project_Waiting {
  background-color: #d45e7f;
}

.project_Pending {
  background-color: #49d0b7;
}

.project_Terminated {
  background-color: #848030;
}

.timeline {
  list-style: none;
  padding: 20px 0 20px;
  position: relative;
}

.timeline:before {
  top: 0;
  bottom: 0;
  position: absolute;
  content: " ";
  width: 3px;
  background-color: #eeeeee;
  left: 50%;
  margin-left: -1.5px;
}

.timeline>li {
  margin-bottom: 20px;
  position: relative;
}

.timeline>li:before,
.timeline>li:after {
  content: " ";
  display: table;
}

.timeline>li:after {
  clear: both;
}

.timeline>li:before,
.timeline>li:after {
  content: " ";
  display: table;
}

.timeline>li:after {
  clear: both;
}

.timeline>li>.timeline-panel {
  width: 50%;
  float: left;
  border: 1px solid #d4d4d4;
  border-radius: 2px;
  padding: 20px;
  position: relative;
  -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
  box-shadow: 0 1px 6px rgba(0, 0, 0, 0.175);
}

.timeline>li.timeline-inverted+li:not(.timeline-inverted),
.timeline>li:not(.timeline-inverted)+li.timeline-inverted {
  margin-top: -60px;
}

.timeline>li:not(.timeline-inverted) {
  padding-right: 90px;
}

.timeline>li.timeline-inverted {
  padding-left: 90px;
}

.timeline>li>.timeline-panel:before {
  position: absolute;
  top: 26px;
  right: -15px;
  display: inline-block;
  border-top: 15px solid transparent;
  border-left: 15px solid #ccc;
  border-right: 0 solid #ccc;
  border-bottom: 15px solid transparent;
  content: " ";
}

.timeline>li>.timeline-panel:after {
  position: absolute;
  top: 27px;
  right: -14px;
  display: inline-block;
  border-top: 14px solid transparent;
  border-left: 14px solid #fff;
  border-right: 0 solid #fff;
  border-bottom: 14px solid transparent;
  content: " ";
}

.timeline>li>.timeline-badge {
  color: #fff !important;
  width: 50px;
  height: 50px;
  line-height: 50px;
  font-size: 1.4em;
  text-align: center;
  position: absolute;
  top: 16px;
  left: 50%;
  margin-left: -25px;
  background-color: #999999;
  z-index: 100;
  border-top-right-radius: 50%;
  border-top-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-bottom-left-radius: 50%;
}

.timeline>li.timeline-inverted>.timeline-panel {
  float: right;
}

.timeline>li.timeline-inverted>.timeline-panel:before {
  border-left-width: 0;
  border-right-width: 15px;
  left: -15px;
  right: auto;
}

.timeline>li.timeline-inverted>.timeline-panel:after {
  border-left-width: 0;
  border-right-width: 14px;
  left: -14px;
  right: auto;
}

.timeline-badge.primary {
  background-color: #2e6da4 !important;
}

.timeline-badge.success {
  background-color: #3f903f !important;
}

.timeline-badge.warning {
  background-color: #f0ad4e !important;
}

.timeline-badge.danger {
  background-color: #d9534f !important;
}

.timeline-badge.info {
  background-color: #5bc0de !important;
}

.timeline-title {
  margin-top: 0;
  color: inherit;
}

.timeline-body>p,
.timeline-body>ul {
  margin-bottom: 0;
}

.timeline-body>p+p {
  margin-top: 5px;
}

.sbox-result ol {
  color: #ccc;
  list-style-type: none;
}

.sbox-result p {
  font-size: 1rem;
  padding-left: 14px;
  color: #555;
}

.sbox-result span {
  position: absolute;
}

/* port from old end*/
.brand-logo {
  max-height: 45px;
}

/* .brand-logo {max-height: 2.5rem;} */

@media (min-width: 992px) {
  .sidebar {
    vertical-align: top;
    width: 600px !important;
  }

  body .content-right {
    width: -webkit-calc(100% - 600px) !important;
    width: -moz-calc(100% - 600px) !important;
    width: calc(100% - 600px) !important;
    float: right;
  }

  .chat-application .chat-fixed-search {
    width: 600px !important;
  }

  .chat-application .chat-fixed-search input {
    width: 300px !important;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {
  .sidebar {
    vertical-align: top;
    width: 330px !important;
  }

  body .content-right {
    width: -webkit-calc(100% - 330px) !important;
    width: -moz-calc(100% - 330px) !important;
    width: calc(100% - 330px) !important;
    float: right;
  }

  .chat-application .chat-fixed-search {
    width: 330px !important;
  }
}

@media (max-width: 767.98px) and (max-width: 576px) {
  .sidebar {
    vertical-align: top;
    width: 280px !important;
  }

  body .content-right {
    width: -webkit-calc(100% - 280px) !important;
    width: -moz-calc(100% - 280px) !important;
    width: calc(100% - 280px) !important;
    float: right;
  }

  .chat-application .chat-fixed-search {
    width: 280px !important;
  }
}

#pos_items .row:nth-child(2n) {
  background-repeat: repeat-x;
  background-image: linear-gradient(45deg, #e0eaf0, #f3f5f6);
}

.error {
  color: #CC0000;
}

.st-Waiting,
.st-Solved,
.st-Processing,
.st-paid,
.st-Invoiced,
.st-accepted,
.st-reviewed,
.st-active,
.st-invoiced,
.st-sent,
.st-received,
.st-secondlevel,
.st-fullyconverted,
.st-approved,
.st-matched,
.st-converted,
.st-customer_approved,
.st-grey,
.st-draft,
.st-Draft,
.st-dummy,
.st-due,
.st-waitingapproval,
.st-stopped,
.st-inactive,
.st-closed,
.st-rejected,
.st-reverted,
.st-assigned,
.st-canceled,
.st-cancelled,
.st-expired,
.st-partial,
.st-expiring-today,
.st-categorized,
.st-partialy-converted,
.st-not-converted,
.st-pending,
.st-firstlevel,
.st-updated,
.st-recurring,
.st-open,
.st-created,
.st-Closed,
.st-expiring,
.st-printed,
.st-inprogress,
.st-assign-for-delivery,
.st-initialized,
.st-overdue,
.st-partiallypaid {
  text-transform: capitalize;
  color: #fff;
  padding: 2px 7px 4px;
  border-radius: 6px;
  font-size: 0.857rem;
  /* line-height: 2; */
}

.navbar-wrapper {
  max-height: 8rem;
}

@media (min-width: 576px) {
  .navbar-expand-sm .navbar-nav .dropdown-menu {
    margin: 0;
  }
}

.dt-buttons {
  display: inline;
  margin-right: 1rem;
  width: auto !important;
}

.dataTables_length {
  display: inline;
  margin-right: 1rem;
}

.dataTables_filter {
  display: inline;
  float: right;
}

.buttons-html5 {
  padding: .2rem;
  background: #28b9ff;
}

.p-mobile {
  padding: 0.3rem !important;
}

@media (max-width: 968px) {
  .p-mobile {
    padding: 0.3rem !important;
  }

  .p-width {
    width: 145% !important;
  }
}

.form-control-sm {
  height: -webkit-calc(1.375rem + 2px) !important;
  height: -moz-calc(1.375rem + 2px) !important;
  height: calc(1.375rem + 2px) !important;
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem !important;
  line-height: 1 !important;
  border-radius: 0.21rem !important;
}

.form-textarea {
  border: 1px solid #f3f3f3 !important;
  color: #3f587e;
  border-bottom: 1px solid #afafaf !important;
  background: #ffffff !important;
  min-height: 50px !important;
  padding: 0.35rem 1rem !important;
  border-radius: 4px;
  width: 100%;
}

form .dataTables_length select {
  padding-right: 15px;
}

.reverse_align {
  text-align: right;
}

.select2 {
  min-width: 14rem;
}

/* Added by jaison */
.avatar-sm.align-baseline .rounded-circle {
  width: 45px;
}

.btn-warning {
  border-color: #a5a5a5 !important;
  background-color: #ffffff !important;
  color: #2f2f2f;
}

.bg-primary.bg-darken-2,
.bg-danger.bg-darken-2,
.bg-warning.bg-darken-2,
.bg-success.bg-darken-2 {
  background-color: #ffffff !important;
  /* color: #333; */
}

.bg-table {
  background: #ededed !important;
}

.fixed-width-select {
  width: 380px !important;
}

.bg-primary.bg-darken-2 .white,
.bg-danger.bg-darken-2 .white,
.bg-warning.bg-darken-2 .white,
.bg-success.bg-darken-2 .white {
  color: #000000 !important;
}

.header-navbar {
  padding: 0px;
  min-height: 2.3rem;
}

.header-navbar .main-menu-content.navbar-container ul.nav li>a.nav-link {
  padding: 0.9rem 0.6rem;
  font-size: 1rem;
  margin-right: 13px;

}

.btn-secondary {
  color: #101010;
  background-color: #ffffff;
  border-color: #404E67;
}


.btn-success:hover,
.btn-primary:hover,
.btn-blue:hover,
.btn-info:hover,
.btn-purple:focus,
.btn-purple:active,
.btn-purple:hover {
  border-color: #ffffff !important;
  background-color: #c7c7c7 !important;
  color: #000 !important;
}

.card {
  border-radius: 10px !important;
}

.btn-pink {
  border-color: #707070 !important;
  background-color: #ffffff !important;
  color: #4a4a4a;
}

.alert-success {
  border-color: #9acdbe !important;
  background-color: #e5fff7 !important;
  color: #053124 !important;
}

.border-amber {
  border: 1px solid #2e2e2e !important;
}

.bg-gradient-directional-purple {
  background-image: linear-gradient(45deg, #6788ad, #3e94ab) !important;
  background-repeat: repeat-x;
}

.btn-success,
.btn-blue,
.btn-purple,
.btn-danger,
.btn-info {
  border-color: #a5a5a5 !important;
  background-color: #ffffff !important;
  color: #000000 !important;
}

.shadow {
  -webkit-box-shadow: 3px 3px 10px 3px #dddddd;
  -moz-box-shadow: 3px 3px 10px 3px #dddddd;
  box-shadow: 3px 3px 10px 3px #dddddd;
}

.pt30px {
  padding-top: 30px !important;
}

.bg-none {
  background: none !important;
}

.wid100 {
  width: 100px !important;
}

.wid90per {
  width: 90% !important;
}

.wid100per {
  width: 100% !important;
}

.wid150 {
  width: 150px !important;
}

.wid200 {
  width: 200px !important;
}

.tablewidth100 {
  width: 100% !important;
}

.tablewidth100 th {
  padding: 0.75rem 2rem !important;
}

.tablewidth100 td {
  padding: 5px 10px 5px 15px !important;
}

/* table.tablewidth100 thead .sorting{
    position: absolute;
    bottom: 0.4em;
    display: block;
    opacity: 0.3;
} */

.remove-textstyle {
  border: none !important;
  background: none !important;
  font-weight: 800 !important;
  font-size: 1.071rem !important;
  color: #3f587e;
  /* background: #fbfbfb !important; */
  height: calc(2.35rem + 2px) !important;
  padding: 0.35rem 1rem !important;
  display: block;
  width: 100%;
}

.pl-14 {
  padding-left: 14px !important;
}

.small-img {
  width: 45px !important;
  height: 45px !important;
}

.table-container {
  /* max-width: 100%;
    overflow-x: auto; */
  text-decoration: none;
}

.table-table-scroll {
  max-width: 100%;
  overflow-x: scroll;
  text-decoration: none;
}

.mb-btn {
  margin-bottom: 5px !important;
}

.navbar-nav.float-right .mega-dropdown-menu {
  width: 70%;
  left: auto;
  right: 0;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
  width: 70% !important;
  z-index: 99999 !important;

}

.mt-14 {
  margin-top: 14px !important;
}

.submit-section {
  text-decoration: none;
}


/* dshboard css starts  */

a.btncard {
  width: 150px !important;
  height: 130px !important;
  -webkit-box-shadow: 3px 3px 10px 3px #dddddd;
  -moz-box-shadow: 3px 3px 10px 3px #dddddd;
  box-shadow: 3px 3px 10px 3px #dddddd;
  background: #ffffff;
  padding-top: 12px !important;
  text-align: center;
  margin-bottom: 15px;
  margin-right: 9px;

}

.btncard i {
  font-size: 2.143rem;
  color: #32536c;
  margin-top: 20px;
  line-height: 46px;
  margin-bottom: 9px;

}

.btncard span {
  position: absolute !important;
  top: -10px !important;
  right: -11px !important;
  border-radius: 50%;
  line-height: 10px;
  width: 29px;
  height: 29px;
  padding: 10px 1px 1px 2px;
  font-size: 0.786rem;
  text-align: center;

}

a.btncard h1 {
  font-size: 0.857rem;
  font-weight: 600;
  padding-top: 5px;
  color: #1e3446 !important;

}

.btncard:hover {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: -2px 14px 20px 3px #828282;
  /* background-color: #6d84ac; */
  transform: scale(1.1);
  z-index: 99;
  transition: 0.4s;
  transform: scale3d(1.25, 1.25, 0.5);
  background-image: linear-gradient(to right, #002533 0%, #0b394d 100%) !important;
  border-radius: 4px;

}

.btncard:hover span {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: 3px 3px 10px 3px #828282;
  color: #000000;
}

.btncard:hover i {
  color: #ffffff;
}

.bg-danger {
  background-color: #e92d47 !important;
}

.header-navbar.navbar-border.bg-gradient-x-grey-blue {
  /* background-image: linear-gradient(to right, #00323c 0%, #013a54 100%) !important; */
  background-image: var(--gradient2) !important;
  /* border: 6px solid #01686a; */
  /* border-width: 6px 6px 0; */
  /* border-radius: 16px 16px 0 0; */
  /* z-index: 9999; */
  width: 100%;
  /* position: fixed; */
  /* padding-bottom: 2rem; */
  padding-top: 0;
  overflow: visible;
  border: 0;
  padding: 0;


}

.header-navbar .main-menu-content.navbar-container ul.nav li>a.nav-link {
  padding: 0.9rem 0.6rem;
  font-size: 0.929rem;
  margin-right: 13px;
}

.header-navbar .main-menu-content.navbar-container ul.nav li>a.nav-link:hover {
  color: #d32f2f;
}

.col-form-label {
  font-size: 0.857rem;
  color: #363636;
  padding-bottom: calc(0.2rem + 1px);
  font-weight: 600;
}

.common-heading h1 {
  font-size: 1.786rem !important;
  /* margin-left: 25px !important; */
  margin-top: 15px;
  margin-top: 30px;
  margin-bottom: 10px;
  font-weight: 200;
}

a.btncard-login {
  width: 140px !important;
  height: 130px !important;
  background: #ffffff;
  padding-top: 12px !important;
  text-align: center;
  margin-top: 15px;
}

.btncard-login i {
  font-size: 3.071rem;
  color: #5f7682;
  margin-top: 20px;
  line-height: 46px;
  margin-bottom: 5px;
}

.btncard-login span {
  position: absolute !important;
  top: -10px !important;
  right: -11px !important;
  border-radius: 50%;
  line-height: 10px;
  width: 29px;
  height: 29px;
  padding: 10px 1px 1px 2px;
  font-size: 0.786rem;
  text-align: center;

}

a.btncard-login h1 {
  font-size: 0.786rem;
  font-weight: normal;
  padding-top: 5px;
  color: #313131 !important;

}

.btncard-login:hover {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: -2px 14px 20px 3px #828282;
  /* background-color: #6d84ac; */
  transform: scale(1.1);
  z-index: 99;
  transition: 0.4s;
  transform: scale3d(1.25, 1.25, 0.5);
  background-image: linear-gradient(to right, #004763 0%, #6F85AD 100%) !important;
  border-radius: 20px !important;
}

.btncard-login:hover span {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: 3px 3px 10px 3px #828282;
  color: #000000;
}

.btncard-login:hover i {
  color: #ffffff;
}

.h-100.gradient-form.bg-login1 a.btncard-login {
  margin-top: 4px;
  border-radius: 4px;
}

.searchbtn {
  -webkit-box-shadow: 3px 3px 10px 3px #dddddd;
  -moz-box-shadow: 3px 3px 10px 3px #dddddd;
  box-shadow: 3px 3px 10px 3px #dddddd;
  background: #ffffff;
  text-align: center;
  padding: 18px 21px;
  width: auto;
  min-height: 55px;
  border-radius: 30px;
}

.searchbtn h4 {
  font-size: 1.143rem !important;
  width: auto;
  margin-bottom: 0px;
  line-height: 16px;
}

.searchbtn:hover {
  -webkit-box-shadow: 3px 3px 10px 3px #828282;
  -moz-box-shadow: 3px 3px 10px 3px #828282;
  box-shadow: 3px 3px 10px 3px #828282;
}

.customsearchbtn {
  margin-top: 30px;
}

.searchflds {
  border: #e3ebf3 solid 1px;
  padding-bottom: 15px;
  margin-bottom: 15px;
  ;
}

.pos-menuitems {
  color: #ffffff !important;
  font-size: 1.2rem !important;
  padding-left: 0px !important;
  padding-right: 0px !important;
}

.navbtn-active {
  /* color: #fff !important;
  background-color: #404E67 !important;
  border-color: #404E67 !important;
  background: linear-gradient(to right, #2d6572 0%, #6F85AD 100%) !important; */

  color: #fff !important;
  background-color: #404E67 !important;
  border-color: #404E67 !important;
  background: linear-gradient(to right, #00323c 0%, #013a54 100%) !important;


}

.navbar-dark .navbar-nav .nav-link .nav-item i {
  margin-right: 0rem;
}

.deskonly {
  display: block;
}

.mobonly {
  display: none;
}

.deskonly {
  display: block;
}

.login-btn-section {
  text-align: left;
}

.mobonly img {
  display: none;
  margin-bottom: 15px;
}

.deskonly1 img {
  display: inline-block;
}

@media (max-width: 767px) {
  .login-btn-section {
    text-align: center;
  }

  a.btncard-login {
    width: 125px !important;
    height: 120px !important;
  }

  .searchbtn {
    margin-bottom: 20px;
  }

  .deskonly {
    display: none;
  }

  .mobonly {
    display: block;
  }

  .mobonly img {
    display: block;
  }

  .deskonly1 img {
    display: none;
  }

  a.btncard-login {
    width: 105px !important;
    height: 116px !important;
    padding: 0px;
  }


}

.mega-dropdown-menu .dropdown-menu .row .show li {
  margin: 0;
}

/*.collapse-icon a[data-toggle="collapse"]:before,
.collapse-icon a[data-toggle="collapse"]:after {
display: none;
} */
/* html {background: #01686a;} */
html body {
  height: 100%;
  background-color: #F5F7FA;
  direction: ltr;
  /* border: 6px solid #01686a; */
  /* border-radius: 15px; */
  /* background-color: #01686a; */

}

.mega-dropdown-menu .card-header {
  padding: 7px 0 !important;
  margin: 0 !important;
}

.mega-dropdown-menu .card.border-0.box-shadow-0.collapse-icon.accordion-icon-rotate {
  margin-bottom: 0;
}

.mega-dropdown-menu .card.border-0.box-shadow-0.collapse-icon.accordion-icon-rotate a.dropdown-item {
  padding: 4px 0 !important;
}

.mega-dropdown-menu select.dropdown-item {
  padding: 3px 10px !important;
}

.results-from {
  /* margin-right: 10px;  */
  border: none;
  color: #404E67;
  /* background: none;
    color: inherit;
    font: inherit;
    cursor: default;
    padding: 0; */
}

.results-from:hover {
  border: none;
  background: none;
  color: #404E67;
}

.dropdown.dropdown-notification.nav-item.show .scrollable-container {
  display: block;
  overflow-y: scroll !important;
}

.card-header h4,
.card-header h5 {
  /* font-weight: 500 !important;
  letter-spacing: 0.05rem !important;
  font-size: 1.6rem !important; */
  font-weight: 500 !important;
  letter-spacing: 0.05rem !important;
  font-size: 1.2rem !important;

}

/* Style for the first column header */
/* .dataTable th:first-child {
    text-align: center !important;
} */

/* Style for the first column cells */
/* .dataTable td:first-child {
    text-align: center  !important;
} */

.filter-group .btn-outline-secondary {
  border-color: #d5d5d5;
}

.filter-day-count.d-flex.justify-content-between {
  font-size: 1.143rem;
  margin-bottom: 6px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 4px;
}

.filter-day-value {
  font-size: 0.857rem;
}

.filter-day-count.d-flex.justify-content-between div:last-child {
  font-weight: bold;
  font-size: 1.786rem;
  line-height: 1;
}

.filter-day-count.d-flex.justify-content-between {
  font-size: 1.143rem;
  margin-bottom: 6px;
  border-bottom: 1px solid #e7e7e7;
  padding-bottom: 6px;
  align-items: center;
}

i.fa.fa-filter {
  font-size: 1.857rem;
  color: #3f7890;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border-left-width: 1px;
  border-radius: 5px;
  margin-right: 1px;
  border-right: 0;

}

table.table-bordered.dataTable th {
  border-radius: 5px;
}

.table-striped tbody tr.odd.selected,
.table-striped tbody tr.even.selected {
  background-color: #f2ffff;
  color: #000;
}

.app-content.content {
  /* border: 6px solid #01686a; */
  /* border-radius: 0 0 16px 16px;
   background: #fafdfc;
   border-top: 0;
   margin-top: 60px; */
  border-radius: 0 0 16px 16px;
  background: #e9ecef;
  border-top: 0;
  margin-top: 55px;


}


/* div#sticky-wrapper { */
/* border: 6px solid #01686a; */
/* border-width: 0 6px; */
/* } */

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right: 1px solid #e3ebf3 !important;
}

div#invoice-company-details {
  border-bottom: 1px solid #bec3cd;
  margin-bottom: 1rem;
}

div#invoice-company-details p,
div#invoice-customer-details p {
  margin-bottom: 0.2rem;
}

div#invoice-company-details .col-md-6.col-sm-12.text-xs-center.text-md-left {
  display: flex;
  align-items: center;
}

div#invoice-company-details .col-md-6.col-sm-12.text-xs-center.text-md-left img.img-responsive.p-1.m-b-2 {
  padding: 0 0 1rem 0 !important;
  height: 90px;
}

div#invoice-company-details .col-md-6.col-sm-12.text-xs-center.text-md-left p {
  margin-bottom: 0;
  font-size: 1.286rem;
  font-weight: 600;
}

#invoice-company-details ul.px-0.list-unstyled {
  margin-bottom: 0;
}

#invoice-company-details ul.px-0.list-unstyled {
  margin-bottom: 0;
}

div#invoice-customer-details .px-0.list-unstyled {
  display: flex;
  flex-wrap: wrap;
}

div#invoice-customer-details .px-0.list-unstyled li {
  padding-right: 20px;
}

#invoice-customer-details .col-sm-12.text-xs-center.text-md-left p.text-muted {
  font-size: 1.071rem;
  font-weight: 100;
  line-height: 1;
}

.card {
  /* border-radius: 10px !important;
  padding-top: 1.5rem; */
  border-radius: 7px !important;
  padding-top: 0.85rem;

}

.header-navbar.navbar-expand-sm.navbar.navbar-horizontal.navbar-fixed.navbar-light.navbar-without-dd-arrow.navbar-shadow.menu-border.navbar-brand-center {
  z-index: 9999 !important;
}

.tr-border {
  border: none !important;
  border-right: #ffffff !important;
  border-top: 1px solid #e3ebf3 !important;
}

.table-bordered.dataTable td:last-child.no-border {
  border: none !important;
}

.no-border {
  border: none !important;
  border-right: #ffffff !important;
}

.border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 15px;
}

.dashboard-cards-2 a.btn.btncard.position-relative {
  width: 150px !important;
  height: 80px !important;
}

.dashboard-cards-2 a.btn.btncard.position-relative {
  width: auto !important;
  height: 80px !important;
  min-width: 100px;
}

.dashboard-cards-2 i.fa {
  font-size: 1.643rem;
  margin-top: 5px;
  line-height: 25px;
}

a.btncard h1 {
  font-size: 0.857rem;
  font-weight: 500;
  padding-top: 5px;
  color: #313131 !important;
}

.dashboard-cards-2 a.btncard h1 {
  font-size: 0.786rem;
  font-weight: 200;
  padding-top: 3px;
  color: #313131 !important;
}

.dashboard-cards h1 {
  padding-top: 30px;
}

a.btncard:hover h1 {
  color: #ffffff !important;
}

.border-top {
  margin-top: 5px;
  padding-top: 2px;
  border-top: 1px solid #e7e7e7 !important
}

.note-editor.note-frame {
  border: 1px solid #a9a9a9;
  padding: 0;
  border-radius: 4px !important;
}

tr.desc_p {
  /* display:none; */
  display: block;
}

#trackingbar {
  margin-bottom: 0px !important;
  overflow: hidden;
}

#trackingbar li {
  list-style-type: none;
  color: #404e67;
  text-transform: uppercase;
  font-size: 0.75rem;
  width: 6.5rem;
  text-align: center;
  float: left;
  position: relative;
}

#trackingbar li:before {
  width: 25px;
  line-height: 20px;
  display: block;
  font-size: 0.75rem;
  color: #fff;
  background: #0a6b70;
  border-radius: 3px;
  margin: 0 auto 1px auto;
  z-index: 9;
  position: relative;
  content: '';
  font-weight: 600;
}

#trackingbar li a {
  color: #404E67;
  font-size: 0.75rem;
  font-weight: 600;
}

#trackingbar li.active a {
  font-size: 0.857rem !important;
  font-weight: 700 !important;
}

#trackingbar li:after {
  content: '';
  width: 100%;
  height: 2px;
  background: #bcbcbc;
  position: absolute;
  left: -50%;
  top: 9px;
  z-index: 0;
}

#trackingbar li:first-child:after {
  content: none;
}

#trackingbar li.active {
  font-weight: 700;
  font-size: 0.75rem;
}

#trackingbar li.active:before,
#trackingbar li.active:after {
  background: #27AE60;
  color: white;
}

#trackingbar li:nth-child(1):before {
  content: '>';
}

#trackingbar li:nth-child(2):before {
  content: '>';
}

#trackingbar li:nth-child(3):before {
  content: '>';
}

#trackingbar li:nth-child(4):before {
  content: '>';
}

#trackingbar li:nth-child(5):before {
  content: '>';
}

#trackingbar li:nth-child(6):before {
  content: '>';
}

#trackingbar li:nth-child(7):before {
  content: '>';
}

/* tracking sub items 24-11-2025*/
#trackingbar {
  position: relative;
  overflow: visible !important;
  list-style: none;
  padding: 0;
  margin: 0;
}

#trackingbar>li {
  position: relative;
  display: inline-block;
  vertical-align: top;
}

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

/* Base dropdown styling */
#trackingbar li.dropdown:before {
  width: 25px;
  line-height: 20px;
  display: block;
  font-size: 0.75rem;
  color: #fff;
  background: #0a6b70;
  border-radius: 3px;
  margin: 0 auto 1px auto;
  z-index: 9;
  position: relative;
  font-weight: 600;
}

/* IMPORTANT: Active state must come after and use higher specificity */
#trackingbar li.dropdown.active:before {
  background: #27AE60 !important;
  /* Green - matching li.active */
  color: #fff;
}

#trackingbar li.dropdown.active:after {
  background: #27AE60 !important;
  /* Green - matching li.active */
}

#trackingbar .dropdown-toggle {
  cursor: pointer;
  display: inline-block;
}

/* Remove the ::after pseudo element from dropdown toggle */
#trackingbar .dropdown-toggle::after {
  display: none !important;
  content: none !important;
}

#trackingbar .dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: none;
  min-width: 120px;
  padding: 8px 0;
  margin: 8px 0 0;
  background-color: #fff;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  list-style: none;
}

/* Style dropdown items */
#trackingbar .dropdown-menu li {
  display: block !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  background: none !important;
  text-align: center;
  float: none !important;
}

/* Remove numbered circles from dropdown items only */
#trackingbar .dropdown-menu li:before,
#trackingbar .dropdown-menu li:after {
  display: none !important;
  content: none !important;
  background: none !important;
}

#trackingbar .dropdown-menu li a {
  display: block !important;
  padding: 0px 5px !important;
  color: #333 !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: 0.857rem !important;
  transition: background-color 0.2s ease;
  background: none !important;
  font-weight: normal !important;
}

#trackingbar .dropdown-menu li a:hover {
  background-color: #f5f5f5 !important;
  color: #000 !important;
}

#trackingbar .dropdown-menu li.active a {
  font-weight: 700 !important;
  color: #0a6b70 !important;
  background-color: #e8f6f7 !important;
}

/* Remove any badges from dropdown items */
#trackingbar .dropdown-menu li a .badge,
#trackingbar .dropdown-menu li a span.badge {
  display: none !important;
}

/* tracking sub items 24-11-2025*/

.version {
  /* color: #fff;
    text-align: center; */
  padding-bottom: 5px;
  font-size: 0.75rem;
  position: absolute;
  bottom: -17px;
  right: 0;
  padding: 1px 10px;
  background: #01686a;
  font-size: 0.75rem;
  color: #fff;
  border-radius: 12px 0 0 0;
}

.about-us {
  position: fixed;
  bottom: 0;
  left: 0;
  padding: 1px 10px;
  background: #01686a;
  font-size: 0.75rem;
  color: #fff;
  border-radius: 0 12px 0 0;
}

.heading-title {
  color: #fff;
  text-align: center;
  padding: 25px 23px 0;
}

.heading-title span {
  color: #ffb100;
  font-size: 2.071rem;
  display: block;
}

.disable-class,
.disable-class_credit_check {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  /* background: #404E67 !important; */
  background: #dddddd !important;
  color: #191b1a !important;
}

.disable-checkbox {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  /* background: #404E67 !important; */
  background: none !important;
  color: #191b1a !important;
}

.disable-class-final {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  color: #fff !important;
  border-color: #00070a !important;
  background-color: #005e83 !important;
}

input[type="text"].disable-class {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  background: #dddddd !important;
  color: #3f587e;
}

.disable-class-textarea {
  pointer-events: none;
  cursor: not-allowed;
  opacity: 0.65;
  background: #dddddd !important;
  color: #3f587e !important;
  ;
}

.compulsoryfld {
  color: #ff0000;
}

.pl5 {
  padding-left: 5px !important;
}

a.details-title {
  color: #404E67;
}

.text-right-custom {
  justify-content: flex-end;
  display: flex;
}

.text-center-custom {
  justify-content: center;
  display: flex;
}

/* table#authpermission {
    width: 100% !important;
}
@media (max-width: 767px) {
    table#authpermission{
        width:100% !important;
    }
} */
.table-internal {
  text-decoration: none !important;
  border: none !important;
  border-right: none;
}

.table-internal tr {
  border: none !important;
}

.table-internal td {
  border-bottom: solid 1px #ff0000;
  padding: 1px !important;
  border-right: none;

}

.mt-14px {
  margin-top: -14px !important;
}

.textarea-bg {
  background: #dddddd !important;
  color: #363636 !important;
}


.sidebarlist {
  display: none;
  margin-top: 10px;
}

.sidebarlist ul {
  list-style: none;
  /* This removes the bullet points */
  padding-left: 0;
}

.sidebarlist ul li {
  padding: 5px 0;
  cursor: pointer;
}

.sidebarlist ul li:hover {
  color: #009c9f;
  cursor: pointer;
}

.sidebarlist ul li.active {
  color: #009c9f;
  cursor: pointer;
}

.expand-btn {
  cursor: pointer;
  font-weight: bold;
  /* display: inline-flex; */
  align-items: center;
}

.expand-btn i {
  margin-left: 5px;
}

#warehouseList {
  display: block;
}

.whole_filter_section {
  display: none;
}

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

.revert-btncolor {
  background-color: #ecbfc5 !important;
  border-color: #ecbfc5 !important;
}

.fsize-17 {
  font-size: 1.214rem;
}

.fsize-14 {
  font-size: 1rem;
}

.padd-lft-rgt-0 {
  padding-left: 0px;
  padding-right: 0px
}

.padding-left-0 {
  padding-left: 0px;
}

.padding-right-0 {
  padding-right: 0px
}

/* price range sction starts erp2024 10-10-2024 */


/* Icons */

.ui-slider {
  position: relative;
  text-align: left;
}

.ui-slider .ui-slider-handle {
  position: absolute;
  z-index: 2;
  width: 1.2em;
  height: 1.2em;
  cursor: default;
  -ms-touch-action: none;
  touch-action: none;
}

.ui-slider .ui-slider-range {
  position: absolute;
  z-index: 1;
  font-size: .7em;
  display: block;
  border: 0;
  background-position: 0 0;
}

/* support: IE8 - See #6727 */
.ui-slider.ui-state-disabled .ui-slider-handle,
.ui-slider.ui-state-disabled .ui-slider-range {
  filter: inherit;
}

.ui-slider-horizontal {
  height: .8em;
}

.ui-slider-horizontal .ui-slider-handle {
  top: -.3em;
  margin-left: -.6em;
}

.ui-slider-horizontal .ui-slider-range {
  top: 0;
  height: 100%;
}

.ui-slider-horizontal .ui-slider-range-min {
  left: 0;
}

.ui-slider-horizontal .ui-slider-range-max {
  right: 0;
}

.ui-slider-vertical {
  width: .8em;
  height: 100px;
}

.ui-slider-vertical .ui-slider-handle {
  left: -.3em;
  margin-left: 0;
  margin-bottom: -.6em;
}

.ui-slider-vertical .ui-slider-range {
  left: 0;
  width: 100%;
}

.ui-slider-vertical .ui-slider-range-min {
  bottom: 0;
}

.ui-slider-vertical .ui-slider-range-max {
  top: 0;
}

.ui-sortable-handle {
  -ms-touch-action: none;
  touch-action: none;
}

.ui-spinner {
  position: relative;
  display: inline-block;
  overflow: hidden;
  padding: 0;
  vertical-align: middle;
}

.ui-spinner-input {
  border: none;
  background: none;
  color: inherit;
  padding: .222em 0;
  margin: .2em 0;
  vertical-align: middle;
  margin-left: .4em;
  margin-right: 2em;
}

.ui-spinner-button {
  width: 1.6em;
  height: 50%;
  font-size: .5em;
  padding: 0;
  margin: 0;
  text-align: center;
  position: absolute;
  cursor: default;
  display: block;
  overflow: hidden;
  right: 0;
}

/* Component containers
----------------------------------*/


.ui-widget input,
.ui-widget select,
.ui-widget textarea,
.ui-widget button {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1em;
}

.ui-widget.ui-widget-content {
  /* border: 1px solid #c5c5c5; */
  border: none;
  max-height: 200px;
  /* height of dropdown */
  overflow-y: auto;
  /* enable vertical scroll */
  overflow-x: hidden;
  /* hide horizontal scroll */
  z-index: 8888;
}

.ui-widget-content {
  /* border: 1px solid #dddddd; */
  /* background: #ffffff; */
  color: #333333;
  box-shadow: 5px 5px 20px 5px #d0d0d0;
}

.ui-widget-content a {
  color: #333333;
}

.ui-widget-header {
  border: 1px solid #dddddd;
  background: #e9e9e9;
  color: #333333;
  font-weight: bold;
}

.ui-widget-header a {
  color: #333333;
}

/* Interaction states
----------------------------------*/
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button,

/* We use html here because we need a greater specificity to make sure disabled
works properly when clicked or hovered */
html .ui-button.ui-state-disabled:hover,
html .ui-button.ui-state-disabled:active {
  border: 1px solid #c5c5c5;
  background: #f6f6f6;
  font-weight: normal;
  color: #454545;
}

.ui-state-default a,
.ui-state-default a:link,
.ui-state-default a:visited,
a.ui-button,
a:link.ui-button,
a:visited.ui-button,
.ui-button {
  color: #454545;
  text-decoration: none;
}

.ui-state-hover,
.ui-widget-content .ui-state-hover,
.ui-widget-header .ui-state-hover,
.ui-state-focus,
.ui-widget-content .ui-state-focus,
.ui-widget-header .ui-state-focus,
.ui-button:hover,
.ui-button:focus {
  border: 1px solid #cccccc;
  background: #ededed;
  font-weight: normal;
  color: #2b2b2b;
}

.ui-state-hover a,
.ui-state-hover a:hover,
.ui-state-hover a:link,
.ui-state-hover a:visited,
.ui-state-focus a,
.ui-state-focus a:hover,
.ui-state-focus a:link,
.ui-state-focus a:visited,
a.ui-button:hover,
a.ui-button:focus {
  color: #2b2b2b;
  text-decoration: none;
}

.ui-visual-focus {
  box-shadow: 0 0 3px 1px rgb(94, 158, 214);
}


.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active,
a.ui-button:active,
.ui-button:active,
.ui-button.ui-state-active:hover {
  border: 1px solid #c5c5c5;
  background: #60778d;
  font-weight: normal;
  color: #ffffff;
}

.ui-icon-background,
.ui-state-active .ui-icon-background {
  border: #003eff;
  background-color: #ffffff;
}

.ui-state-active a,
.ui-state-active a:link,
.ui-state-active a:visited {
  color: #ffffff;
  text-decoration: none;
}

/* Overlays */
.ui-widget-overlay {
  background: #aaaaaa;
  opacity: .003;
  filter: Alpha(Opacity=.3);
  /* support: IE8 */
}

.ui-widget-shadow {
  -webkit-box-shadow: 0px 0px 5px #666666;
  box-shadow: 0px 0px 5px #666666;
}

/* price range sction ends erp2024 10-10-2024 */
/* erp2024 10-10-2024 newly added */
.filter_list_section {
  border: 1px solid #ccc;
  padding: 10px 20px;
  margin-bottom: 8px;
}

span.fa.fa-filter {
  font-size: 1.429rem;
  color: #3f7890;
}

.filter_search_li i.fa.fa-angle-down {
  font-size: 1.286rem;
}

.filter_search_li i.fa.fa-angle-up {
  font-size: 1.286rem;
}

.due-client-wrapper {
  display: inline-block;
}

.due-client-wrapper {
  font-size: 0.857rem;
  color: #363636;
  font-weight: 600;
}

.due-client-wrapper .form-check-input {
  margin-top: 0px
}

.profile-update-icon {
  position: absolute;
  bottom: 7px;
  right: 7px;
  border-radius: 55%;
  padding: 5px;
}

button.profile-update-icon {
  font-size: 1.429rem;
}

.formborder {
  border: solid 1px #ccc;
  padding: 15px;
}

.borderleft {
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  padding-left: 20px;
}

.font-13 {
  font-size: 0.929rem;
}

.popover {
  max-width: 300px;
  /* Control the width of the popover */
}

.popover-body form {
  margin: 0;
}

.account-left-section {
  text-decoration: none;
}

.account-left-section h2 {
  font-size: 1.071rem;
  font-weight: 400;
  margin-bottom: 25px;
}

.account-left-section h2 span {
  font-weight: 600;
}

.account-left-section h3 {
  font-size: 1.143rem;
  font-weight: 600;
  margin-bottom: 5px;
}

.account-left-section h3 span {
  font-weight: 600;
}

.transaction-box {
  border-radius: 5px;
  padding: 20px;
  -webkit-box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
  box-shadow: 0 10px 40px 0 rgba(62, 57, 107, 0.07), 0 2px 9px 0 rgba(62, 57, 107, 0.06);
}

.transaction-box h2 {
  font-size: 1.071rem;
  font-weight: 400;
  margin-bottom: 25px;
  margin-top: 35px;
}

.transaction-box h2 span {
  font-weight: 600;
}

.transaction-box h3 {
  font-size: 1.071rem;
  font-weight: 400;
}

.transaction-box h3 span {
  font-weight: 600;
}

.fixedpadding {
  padding-bottom: 25px;
}

.fixedpadding-bottom {
  padding-bottom: 16px;
}

.fixedwidth {
  width: 175px;
}

.deposit-table-header {
  background: #687d9d;
  color: #fff;
}

.bg-fixed {
  background: linear-gradient(to right, #647891 0%, #6F85AD 100%) !important;
}

.fontsize-20 {
  font-size: 1.429rem;
}

button:disabled {
  cursor: not-allowed;
}

.debitsection,
.creaditsection,
.totalsection {
  padding: 15px;
}

.total-bg-danger {
  background: rgb(244 219 219);
}

.total-bg-success {
  background: rgb(200 229 189);
}

.is-invalid {
  border-color: #dc3545 !important;
  /* Red border color */
  background-color: #f8d7da;
  /* Light red background */
}

/* ======================History section ================ */
.history-container {
  position: fixed;
  top: 100px;
  right: -70%;
  /* Initially hidden off the screen */
  width: 70%;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.5s ease;
  z-index: 999;
}
.aipanel-container {
  position: fixed;
  top: 100px;
  right: -70%;
  /* Initially hidden off the screen */
  width: 90%;
  height: 100%;
  background-color: #fff;
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2);
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.5s ease;
  z-index: 999;
}

/* history table close button */
/* .logclose-btn {
    text-align: center;
    margin-bottom: 20px;
    background-color: #005e83;;
    color: #fff;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    float: right;
}  */
.history-container.active {
  right: 0;
  padding: 15px;
  /* Fully visible when active */
}

.history-container h2 {
  text-align: left;
  margin-bottom: 6px;
  font-size: 1.214rem;

}

.history-container form {
  text-decoration: none;
}

.history-container form input,
.history-container form button {
  margin-bottom: 15px;
  padding: 10px;
  font-size: 1.143rem;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.history-container form button {
  background-color: #005e83;
  color: white;
  border: none;
  cursor: pointer;
  z-index: 9999;
}

.history-expand-button {
  position: fixed;
  top: 50%;
  right: 15px;
  transform: translateY(-50%) rotate(-90deg);
  /* Rotate the button text */
  background-color: #005e83;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 5px 5px 0 0;
  transform-origin: right center;
}

.history-expand-button:hover {
  background-color: #0056b3;
}

.history-expand-button span {
  font-size: 1rem;
  font-weight: bold;
}


.history-close-button {
  position: absolute;
  top: 50%;
  left: -58px;
  transform: translateY(-50%) rotate(-90deg);
  display: none;
  background-color: #005e83;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 5px 5px 0 0;
}

.history-container.active .history-close-button {
  display: block;
}

.history-container.active .logclose-btn {
  text-align: center;
  margin-bottom: 20px;
  background-color: #005e83;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 2px 9px;
  cursor: pointer;
  position: absolute;
  right: 15px;
  font-size: 0.857rem;
  ;
}

.history-container.active .table thead th {
  vertical-align: bottom;
  border-bottom: 1px solid #3e5072;
  border-top: 1px solid #d3d3d3;
  background: #f3f4f4 !important;
  border-right-color: #768cb5;
  color: #252525;
}

.history-expand-button:hover,
.history-close-button:hover {
  background-color: #0056b3;
}

.history-expand-button span,
.history-close-button span {
  font-size: 1rem;
  font-weight: bold;
}

/* div.dataTables_wrapper {
    overflow-y: auto;
    max-height:600px;
} */

.history-container h2 {
  text-align: left;
  margin-bottom: 6px;
  font-size: 1.214rem;
}

div.dataTables_wrapper img.rounded-circle1 {
  width: 25px !important;
  height: 25px !important;
}

div.dataTables_wrapper ul.padd-left-ul {
  margin: 0;
}



/* ======================Report section ================ */

.report-top-table {
  border-collapse: collapse;
  border: none;
  width: 100%;
}

.report-top-table th,
.report-top-table td,
.report-content-table tr td {
  border: none !important;
}

.report-content-table {
  border-collapse: collapse;
  border: none;
  width: 100%;
}

/* .report-content-table th,.report-content-table td{
    border: none !important;
} */
.report-content-table thead th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
}

.report-content-table tfoot th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
  border-top: 1px solid #e6e6e6 !important;
}

.report-content-table tbody tr {
  background: none !important;
  border: none !important;
  border-top: 1px solid #e6e6e6 !important;
}

.report-content-table tbody {
  border: none !important;
}

.report-content-table tbody tr td a {
  font-weight: 600 !important;
}

.report-content-table tbody tr:hover td,
.report-content-table thead tr:hover th,
.report-content-table tfoot tr:hover th {
  background: #f2f2f2;
}

.amount-font {
  font-size: 0.929rem !important;
  font-weight: 600 !important;
}

.account-name {
  font-size: 1.429rem !important;
  padding-bottom: 2px !important;
  color: #404E67 !important;
}

.account-parent {
  font-size: 1.143rem !important;
  padding-bottom: 2px !important;
  color: #404E67 !important;
  padding-left: 30px !important;
}

.child-padding-60 {
  padding-left: 60px !important;
}

.child-padding-30 {
  padding-left: 30px !important;
}

.border-primary {
  border: none !important;
  border-bottom: 1px solid #e6e6e6 !important;
}



.report-top-table td,
.report-content-table td,
.report-top-table th,
.report-content-table th {
  padding: 10px;
  text-align: left;
  vertical-align: middle;
}

.report-top-table th,
.report-content-table th {
  font-weight: bold;
  text-align: left;
}

.report-top-table td,
.report-content-table td {
  text-align: left;
}

/* Ensure all columns have equal widths */
.report-top-table td:nth-child(1),
.report-content-table td:nth-child(1),
.report-top-table th:nth-child(1),
.report-content-table th:nth-child(1) {
  width: 20%;
}

.report-top-table td:nth-child(2),
.report-content-table td:nth-child(2),
.report-top-table th:nth-child(2),
.report-content-table th:nth-child(2) {
  width: 20%;
}

.report-top-table td:nth-child(3),
.report-content-table td:nth-child(3),
.report-top-table th:nth-child(3),
.report-content-table th:nth-child(3) {
  width: 20%;
}

.report-top-table td:nth-child(4),
.report-content-table td:nth-child(4),
.report-top-table th:nth-child(4),
.report-content-table th:nth-child(4) {
  width: 20%;
}

.report-top-table td:nth-child(5),
.report-content-table td:nth-child(5),
.report-top-table th:nth-child(5),
.report-content-table th:nth-child(5) {
  width: 20%;
}

.report-top-table td:nth-child(6),
.report-content-table td:nth-child(6),
.report-top-table th:nth-child(6),
.report-content-table th:nth-child(6) {
  width: 20%;
}

/* ***** Balance sheet css starts  */
.balancesheet-sheet {
  background: #fff;
  /* border: 1px solid #ddd; */
  border-radius: 5px;
  padding: 25px;
  max-width: 900px;
  margin: auto;
}

.balancesheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #ddd;
  padding-bottom: 10px;
  margin-bottom: 10px;
}

.balancesheet-accountname {
  padding-left: 25px;
}

.balancesheet-accountname-parent {
  padding-left: 2px;
}

.balancesheet-header h3 {
  font-size: 1.286rem;
  margin: 0;
  color: #404e67;
}

.balancesheet-total-amount {
  font-weight: bold;
  font-size: 1.286rem;
}

.balancesheet-group {
  margin-bottom: 15px;
}

.balancesheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.143rem;
  cursor: pointer;
  padding: 5px 0;
  border-bottom: 1px solid #eee;
}

.balancesheet-header span {
  font-size: 1.143rem;
  color: #666;
}

.group-total {
  font-weight: bold;
}

.balancesheet-details {
  list-style: none;
  margin: 10px 0 0 0;
  padding: 0;
  display: none;
}

.balancesheet-details li {
  display: flex;
  justify-content: space-between;
  padding: 5px 0;
  font-size: 1rem;
  color: #444;
}

.balancesheet-toggle-icon {
  font-size: 1rem;
  margin-left: 5px;
  transform: rotate(0deg);
  transition: transform 0.3s ease;
}

.balancesheet-header.open .balancesheet-toggle-icon {
  transform: rotate(90deg);
}

.balancesheet-toggle-icon i {
  font-size: 0.857rem;
  margin-left: 4px;
  font-weight: 600;
}

.balancesheet-header+.balancesheet-details {
  display: block;
  padding-left: 50px;
}

/* ***** Balance sheet css ends * */

/* **** Profit & Loss *********** */


.profit-content-table {
  width: 35%;
  table-layout: fixed;
  border: none !important;
}

.profit-top-table {
  width: 100%;
  table-layout: fixed;
  border: none !important;
}

.profit-top-table th,
.profit-content-table th,
.profit-top-table td,
.profit-content-table td {
  text-align: right;
  /* vertical-align: middle;  */
}

.profit-top-table th:first-child,
.profit-content-table th:first-child,
.profit-top-table td:first-child,
.profit-content-table td:first-child {
  text-align: left;
}

.profit-top-table th,
.profit-content-table th {
  font-weight: bold;
  border: none;
  background: none !important;
}

.profit-content-table thead th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
}

.profit-content-table tfoot th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
  border-top: 1px solid #e6e6e6 !important;
}

.profit-content-table .account-name {
  text-align: left;
}



.expand-transaction {
  cursor: pointer;
}

/* **** Profit & Loss  ends *********** */
/* **** trail balance  starts  *********** */
.trail-top-table,
.trail-content-table {
  width: 60% !important;
  table-layout: fixed;
  /* Ensures equal column widths */
  border-collapse: collapse;
}

.trail-content-table thead th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
}

.trail-content-table tfoot th {
  background: none !important;
  border: none !important;
  color: #6a6a6a !important;
  font-size: 1.143rem;
  border-top: 1px solid #e6e6e6 !important
}

.trail-content-table tbody {
  border: none !important;
}

.trail-content-table tbody tr {
  background: none !important;
  border: none !important;
  border-top: 1px solid #e6e6e6 !important
}

.trail-top-table tbody th {
  background: none !important;
  border: none !important;
}

.trail-top-table th,
.trail-content-table th,
.profit-content-table th,
.trail-top-table td,
.trail-content-table td,
.profit-content-table td {
  text-align: right;
  vertical-align: middle;
  /* padding: 8px; */
  border: none !important;
}

.trail-top-table th:first-child,
.trail-content-table th:first-child,
.profit-content-table th:first-child,
.trail-top-table td:first-child,
.trail-content-table td:first-child,
.profit-content-table td:first-child {
  text-align: left;
  /* Align the first column to the left */
}

.trail-top-table th,
.trail-content-table th,
.profit-content-table th {
  font-weight: bold;
  background-color: #f8f9fa;
  /* Light gray background for headers */
}

.trail-content-table .account-name,
.profit-content-table .account-name {
  text-align: left;
  font-weight: bold;
}

.trail-content-table tfoot th,
.profit-content-table tfoot th {
  font-weight: bold;
  border-top: 1px solid #e6e6e6 !important
    /* Adds a top border for the footer */
}

.expand-transaction {
  cursor: pointer;
}

.amount-font {
  font-weight: bold;
}

.journal-link-class {
  font-size: 0.929rem !important;
}

/* **** trail balance  ends  *********** */
.transaction-details tr:hover {
  background: #f2f2f2 !important;
}

.mt-32px {
  margin-top: 32px !important;
}


.module-dashboard {
  background-color: #f6f0ff;
  padding: 20px;
  width: 100%;
  border-radius: 8px;
  -webkit-box-shadow: 1px 4px 4px 1px #dddddd;
  -moz-box-shadow: 1px 4px 4px 1px #dddddd;
  box-shadow: 1px 4px 4px 1px #dddddd;
  background: #fbfafa;
}

.module-dashboard h4 {
  margin: 0;
  margin-bottom: 5px;
  font-size: 1.143rem;
  font-weight: bold;
  border-bottom: 1px solid #ccc;
  padding-bottom: 7px;
}

.module-dashboard h4 label {
  font-size: 1.071rem !important;
}

.module-dashboard ul {
  list-style: none !important;
  padding: 0;
  margin: 0;

}

.module-dashboard li {
  margin-bottom: 1px;
  list-style: none;
  font-size: 1.071rem;
  margin-left: 10px;
}

.module-dashboard input[type="checkbox"] {
  margin-right: 8px;
}

.module-dashboard ul li label {
  line-height: 1.25;
  padding-top: 6px;
  font-size: 1rem;
  color: #363636;
  padding-bottom: calc(0.2rem + 1px);
  font-weight: 600;
}

.label-size {
  font-size: 0.857rem;
  color: #363636;
  font-weight: 600;
}

.collapsemenu {
  display: none;
}

.collapsemenu.show {
  display: block;
}

.text-color-for-cost {
  color: #132164
}

.customer-search-overlay {
  position: absolute !important;
  background: rgb(242, 242, 242) !important;
  z-index: 10 !important;
  width: 91% !important;
  font-size: 1rem;
  font-weight: 600;
}

.customer-search-overlay li:hover,
#customer-box-result li:hover {
  cursor: pointer;
  color: #201f1f;
}

.lead-custom-name-cell {
  position: relative;
  vertical-align: top;
}

.lead-custom-suggest-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  min-width: 260px;
  background: #fff;
  border: 1px solid #ced4da;
  border-radius: 4px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
  z-index: 1060;
  max-height: 240px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.lead-custom-suggest-head {
  padding: 8px 10px;
  font-size: 0.857rem;
  font-weight: 600;
  color: #495057;
  background: #f8f9fa;
  border-bottom: 1px solid #e9ecef;
  flex-shrink: 0;
}

.lead-custom-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1 1 auto;
}

.lead-custom-suggest-item {
  padding: 8px 10px;
  cursor: pointer;
  border-bottom: 1px solid #f1f3f5;
}

.lead-custom-suggest-item:last-child {
  border-bottom: none;
}

.lead-custom-suggest-item:hover,
.lead-custom-suggest-item:focus {
  background: #e7f1ff;
  outline: none;
}

.lead-custom-suggest-name {
  font-weight: 600;
  font-size: 0.929rem;
  color: #212529;
  line-height: 1.3;
}

.lead-custom-suggest-meta {
  display: block;
  font-size: 0.786rem;
  color: #6c757d;
  margin-top: 2px;
}

.lead-custom-suggest-foot {
  padding: 6px 8px;
  border-top: 1px solid #e9ecef;
  background: #fff;
  text-align: center;
  flex-shrink: 0;
}

.lead-custom-suggest-dismiss {
  font-size: 0.857rem;
  color: #6c757d;
  text-decoration: none;
}

.lead-custom-suggest-dismiss:hover {
  color: #495057;
  text-decoration: underline;
}

.lead-custom-catalog-warn {
  margin-top: 4px;
}

@media (min-width: 768px) {
  .navbar-expand-md .navbar-nav .dropdown-menu {
    position: absolute;
    width: auto !important;
    /* width: 290px !important; */
    flex-wrap: wrap;
    top: 60px;
    /* top: 92px; */
  }

  .border-left {
    border: none;
  }
}

.hide_row {
  display: none !important;
}

/* dashboard css ends*/

.newdata {
  color: #239fd0
}

.margin-5 {
  margin: 5px !important;
}

.input-file {
  border: none !important;
  border: 1px dashed #6e84ac !important;
  border-radius: 10px !important;
  transition: 0.2s !important;
  width: 100% !important;
  padding: 7px !important;
  height: 40px !important;
}

.fsize-70 {
  font-size: 5rem !important;
}

.file-section {
  text-decoration: none;
  ;
}

.file-section p {
  margin-bottom: 5px !important;
}

.mt-30 {
  margin-top: 30px !important;
}

input[type='text'],
textarea {
  caret-color: rgb(216, 27, 81);
  padding: 10px;
}

#creditlimit-check {
  margin-bottom: 15px;
}

.creditlimit-check .alert {
  background-color: #ffbcc6 !important;
}

.page-header-data-section {
  display: none;
}

.page-header-data-section-dblock {
  display: block;
}

.item-class {
  padding: 3px 10px 0px 10px;
  border-right: 1px solid rgba(0, 0, 0, 0.2);
  width: auto;
}

.item-class:last-child {
  border-right: none;
}

.item-class h4 {
  font-size: 1rem;
}

.item-class p {
  font-weight: bold !important;
}

.alert-partialconvert {
  border-color: #df8817 !important;
  background-color: #df8817 !important;
  color: #f0f0f0 !important;
}

.alert-cancelled {
  border-color: #bf3939 !important;
  background-color: #bf3939 !important;
  color: #f0f0f0 !important;
}

.alert-initialized {
  border-color: #848030 !important;
  background-color: #848030 !important;
  color: #f0f0f0 !important;
}

.alert-partial {
  border-color: #3c75b7 !important;
  background-color: #3c75b7 !important;
  color: #f0f0f0 !important;
}

.alert-updated {
  border-color: #3c75b7 !important;
  background-color: #3c75b7 !important;
  color: #f0f0f0 !important;
}

.alert-assigned {
  border-color: #848030 !important;
  background-color: #848030 !important;
  color: #f0f0f0 !important;

}

.alert-progress {
  border-color: #845dfb !important;
  background-color: #845dfb !important;
  color: #f0f0f0 !important;
}

.dicount-checkbox {
  font-size: 1rem;
  color: #404E67;
}

.page-header-data-section-dblock a.expand-link {
  color: #43516a !important;
  text-decoration: underline;
}

.tooltip1 {
  position: absolute;
  top: calc(100% + 5px);
  left: 0;
  background-color: #db4343;
  color: white;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.929rem;
  z-index: 1000;
  display: none;
  opacity: 0;
  width: auto;
  min-width: 200px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  transition: opacity 0.2s ease;
  pointer-events: none;
}

/* Tooltip arrow */
.tooltip1:after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 15px;
  border-width: 0 6px 6px 6px;
  border-style: solid;
  border-color: transparent transparent #db4343 transparent;
}

.padd-left-ul {
  padding-left: 15px !important;
}

.no-permission {
  text-align: center;
  padding-top: 15px;
  padding-bottom: 20px;
}

.no-permission h3 {
  font-weight: 600;
  color: #db4343;
}

.mt-13 {
  margin-top: 13px !important;
}

#employee-left-section {
  height: 100vh;
}

#tree-container {
  /* width: 15%; */
  border-right: 1px solid #ddd;
  overflow-y: auto;
  padding: 1rem;
  background-color: #f8f9fa;
  height: 100vh;
}

#tree,
#category_tree {
  min-height: 100vh;
}

#details-container {
  /* width: 85%; */
  padding: 1rem;
  overflow-y: auto;
}

/* Remove default toggle arrows */
.jstree-default .jstree-icon {
  background: none !important;
}

/* Closed node (collapsed) */
.jstree-default .jstree-node>.jstree-ocl {
  background: none !important;
  display: inline-block;
  width: 16px;
  text-align: center;
}

.jstree-default .jstree-closed>.jstree-ocl::before {
  font-family: 'FontAwesome';
  content: "\f105" !important;
  font-weight: 900;
}

/* Open node (expanded) */
.jstree-default .jstree-open>.jstree-ocl::before {
  font-family: 'FontAwesome';
  content: "\f107";
  /* angle-down */
  font-weight: 900;
}

ul.ui-autocomplete {
  width: 30% !important;
}

.heading-elements-toggle {
  display: none !important;
}

.border-with-padding {
  border: 1px solid #a6a6a6;
  padding: 2px 4px 2px 6px;
}

form .focusclass {
  border: 1px #CC0000 solid !important;
}

/* styles of approvel levels starts  */
.breadcrumb-approvals {
  font-size: 0.857rem;
  list-style: none;
  position: absolute;
  right: 50px;
  top: 13px;
}

.breadcrumb-approvals li {
  display: inline-block;
  margin-bottom: .2em;
}

.breadcrumb-approvals li a {
  background-color: #d43349;
  box-sizing: border-box;
  color: #fff;
  display: block;
  max-height: 2em;
  padding: .1em 1em .5em 1.5em !important;
  position: relative;
  text-decoration: none;
  transition: .25s;
}

.breadcrumb-approvals li a:before {
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #fff;
  content: "";
  position: absolute;
  top: 0;
  right: -1.25em;
  z-index: 1;
}

.breadcrumb-approvals li a:after {
  border-top: 1em solid transparent;
  border-bottom: 1em solid transparent;
  border-left: 1em solid #d43349;
  content: "";
  position: absolute;
  top: 0;
  right: -1em;
  transition: .25s;
  z-index: 1;
}

.breadcrumb-approvals li a:hover {
  background-color: #d43349;
}

.breadcrumb-approvals li a:hover:after {
  border-left-color: #d43349;
}

.breadcrumb-approvals li:last-child a {
  background-color: #d43349;
}

.breadcrumb-approvals :last-child a:before {
  content: none;
}

.breadcrumb-approvals li:last-child a:after {
  border: none;
  content: none;
  border-left: none !important;
  background-color: #0098d9;
}

.highlighted {
  background-color: #28a745 !important;
  /* green */
  cursor: not-allowed;
}

.highlighted::after {
  border-left-color: #28a745 !important;
}

.highlighted::before {
  border-left-color: #fff !important;
  /* usually the arrow color */
}

.approval-disabled {
  cursor: not-allowed !important;
}

.cancel_level {
  background-color: #6c757d !important;
  /* gray color for cancel */
}

.cancel_level:hover {
  background-color: #5a6268 !important;
}

.approval-cancel-container {
  position: fixed;
  top: 120px;
  right: -70%;
  width: 40%;
  height: 53%;
  background-color: rgb(243 243 243);
  box-shadow: -2px 0 5px rgba(0, 0, 0, 0.2) !important;
  padding: 20px;
  box-sizing: border-box;
  transition: right 0.5s ease;
  z-index: 999;
}

.approval-cancel-container.show {
  right: 0;
  visibility: visible;
  opacity: 1;
}

.approval-close-button-style {
  position: absolute;
  top: 50%;
  left: -58px;
  transform: translateY(-50%) rotate(-90deg);
  /* display: none; */
  background-color: #005e83;
  color: white;
  border: none;
  padding: 10px 20px;
  cursor: pointer;
  z-index: 1000;
  border-radius: 5px 5px 0 0;
}

.related-item-size {
  font-size: 0.857rem !important;
  color: #2A2E30 !important;
}

/* styles of approvel levels ends    */

#chat-iframe {
  position: fixed;
  bottom: 60px;
  left: 10px;
  z-index: 99998;
  display: none;
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);

  width: 90vw;
  /* Responsive width: 90% of viewport width */
  max-width: 500px;
  /* Optional max width */
  height: 70vh;
  /* Responsive height: 70% of viewport height */
  max-height: 500px;
  /* Optional max height */
}

@media (max-width: 600px) {
  #chat-iframe {
    left: 10px;
    right: 10px;
    width: calc(100vw - 20px);
    /* Full width on small screens */
  }
}

.unreadmsg_count {
  position: absolute !important;
  border-radius: 55% !important;
  top: -15px !important;
  padding: 7px 10px !important;
  font-size: 0.857rem !important;
  right: -12px !important;
  background: #e67700 !important;
}


/* 24/06/25 - Anjnana copied css from bootstrap4*/

.alert {
  position: relative;
  padding: 0.4rem 1.25rem !important;
  margin-bottom: 1rem !important;
  border: 1px solid transparent !important;
  border-radius: 0.5rem !important;
}

.btn-group,
.btn-group-vertical,
.btn-quick-view,
.quick-view-section {
  position: relative;
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  vertical-align: middle;
}

.navbar-dark .navbar-nav .nav-link {
  color: white;
  padding: 7px;
}

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .nav-link:focus {
  color: rgba(255, 255, 255, 0.9);
}



.navbar {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  padding: 0.5rem 1rem;
  padding-bottom: 1px;
}

.navbar>.container,
.navbar>.container-fluid {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}

.navbar-brand {
  display: inline-block;
  padding-top: 0.31875rem;
  padding-bottom: 0.31875rem;
  margin-right: 1rem;
  font-size: 1.25rem;
  line-height: inherit;
  white-space: nowrap;
}

.navbar-brand:hover,
.navbar-brand:focus {
  text-decoration: none;
}

.navbar-nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.navbar-nav .nav-link {
  padding-right: 0;
  padding-left: 0;
}

.navbar-nav .dropdown-menu {
  position: static;
  float: none;
}

.navbar-text {
  display: inline-block;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.navbar-collapse {
  -webkit-flex-basis: 100%;
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.navbar-toggler {
  padding: 0.25rem 0.75rem;
  font-size: 1.25rem;
  line-height: 1;
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 0.25rem;
}

.navbar-toggler:hover,
.navbar-toggler:focus {
  text-decoration: none;
}

.navbar-toggler:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.navbar-toggler-icon {
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  vertical-align: middle;
  content: "";
  background: no-repeat center center;
  -webkit-background-size: 100% 100%;
  background-size: 100% 100%;
}

@media (max-width: 575.98px) {

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

@media (min-width: 576px) {
  .navbar-expand-sm {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row nowrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row nowrap;
    flex-flow: row nowrap;
    -webkit-box-pack: start;
    -webkit-justify-content: flex-start;
    -moz-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-nav {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-direction: row;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
  }

  .navbar-expand-sm .navbar-nav .dropdown-menu {
    position: absolute;
  }

  .navbar-expand-sm .navbar-nav .nav-link {
    padding-right: 0.5rem;
    padding-left: 0.5rem;
  }

  .navbar-expand-sm>.container,
  .navbar-expand-sm>.container-fluid {
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
  }

  .navbar-expand-sm .navbar-collapse {
    display: -webkit-box !important;
    display: -webkit-flex !important;
    display: -moz-box !important;
    display: -ms-flexbox !important;
    display: flex !important;
    -webkit-flex-basis: auto;
    -ms-flex-preferred-size: auto;
    flex-basis: auto;
  }

  .navbar-expand-sm .navbar-toggler {
    display: none;
  }
}

@media (max-width: 767.98px) {

  .navbar-expand-md>.container,
  .navbar-expand-md>.container-fluid {
    padding-right: 0;
    padding-left: 0;
  }
}

.navbar-nav.float-right .mega-dropdown-menu {
  /*width: 70%;*/
  width: auto;
  left: auto;
  right: 0;
}

.navbar-expand-md .navbar-nav .dropdown-menu {
  /*width: 70% !important;*/
  width: max-content !important;
  /* width: auto !important; */
  z-index: 99999 !important;
}




a {
  color: #009c9f;
  text-decoration: none;
  background-color: transparent;
  -webkit-text-decoration-skip: objects;
}

a:hover {
  color: #008385;
  text-decoration: none;
}

a:not([href]):not([tabindex]) {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):hover,
a:not([href]):not([tabindex]):focus {
  color: inherit;
  text-decoration: none;
}

a:not([href]):not([tabindex]):focus {
  outline: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  margin-bottom: 0.5rem;
  /* font-family: "Montserrat", Georgia, "Times New Roman", Times, serif; */
  font-family: "Quicksand", sans-serif;
  font-weight: 400;
  line-height: 1.2;
  color: inherit;
}

h1,
.h1 {
  font-size: 2rem;
}

h2,
.h2 {
  font-size: 1.74rem;
}

h3,
.h3 {
  font-size: 1.51rem;
}

h4,
.h4 {
  font-size: 1.32rem;
}

h5,
.h5 {
  font-size: 1.14rem;
}

h6,
.h6 {
  font-size: 1rem;
}

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.w-auto {
  width: auto !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.h-auto {
  height: auto !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 1rem !important;
}

.mt-1,
.my-1 {
  margin-top: 1rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 1rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 1rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 1rem !important;
}

.m-2 {
  margin: 1.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 1.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 1.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 1.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 1.5rem !important;
}

.m-3 {
  margin: 3rem !important;
}

.mt-3,
.my-3 {
  margin-top: 3rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 3rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 3rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 3rem !important;
}

.m-4 {
  margin: 3.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 3.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 3.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 3.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 3.5rem !important;
}

.m-5 {
  margin: 4rem !important;
}

.mt-5,
.my-5 {
  margin-top: 4rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 4rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 4rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 4rem !important;
}



.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 1rem !important;
}

.pt-1,
.py-1 {
  padding-top: 1rem !important;
}

.pr-1,
.px-1 {
  padding-right: 1rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 1rem !important;
}

.pl-1,
.px-1 {
  padding-left: 1rem !important;
}

.p-2 {
  padding: 1.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 1.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 1.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 1.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 1.5rem !important;
}

.p-3 {
  padding: 3rem !important;
}

.pt-3,
.py-3 {
  padding-top: 3rem !important;
}

.pr-3,
.px-3 {
  padding-right: 3rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 3rem !important;
}

.pl-3,
.px-3 {
  padding-left: 3rem !important;
}

.p-4 {
  padding: 3.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 3.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 3.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 3.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 3.5rem !important;
}

.p-5 {
  padding: 4rem !important;
}

.pt-5,
.py-5 {
  padding-top: 4rem !important;
}

.pr-5,
.px-5 {
  padding-right: 4rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 4rem !important;
}

.pl-5,
.px-5 {
  padding-left: 4rem !important;
}

.navigation-main .mega-dropdown-menu,
.navbar-nav .mega-dropdown-menu {
  font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  width: -webkit-calc(100% - 50px);
  width: -moz-calc(100% - 50px);
  width: calc(100% - 50px);
  padding: 0.5rem 0;
  margin: 0px 25px !important;
  -webkit-box-shadow: none;
  box-shadow: none;
  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  z-index: 9999;
}

.btn {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  /*border: 1px solid transparent;*/
  padding: 0.55rem 1rem;
  font-size: 1rem;
  line-height: 0.75;
  border-radius: 0.25rem;
  -webkit-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
  -o-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  -moz-transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
  transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, -webkit-box-shadow 0.15s ease-in-out;
}

@media screen and (prefers-reduced-motion: reduce) {
  .btn {
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
    transition: none;
  }
}

.btn:hover,
.btn:focus {
  text-decoration: none;
}

.btn:focus,
.btn.focus {
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn.disabled,
.btn:disabled {
  opacity: 0.65;
}

.btn:not(:disabled):not(.disabled) {
  cursor: pointer;
}

a.btn.disabled,
fieldset:disabled a.btn {
  pointer-events: none;
}

.btn-primary {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-primary:hover {
  color: #fff;
  background-color: #008f92;
  border-color: #008385;
}

.btn-primary:focus,
.btn-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}



.btn-primary.disabled,
.btn-primary:disabled {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show>.btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #008385;
  border-color: #007678;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}

.btn-secondary {
  /*color: #fff;
  background-color: #404E67;*/
  border-color: #404E67;
}

.btn-secondary:hover {
  color: #fff;
  background-color: #313c4f;
  border-color: #2c3648;
}

.btn-secondary:focus,
.btn-secondary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  color: #fff;
  background-color: #404E67;
  border-color: #404E67;
}

.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show>.btn-secondary.dropdown-toggle {
  color: #fff;
  background-color: #2c3648;
  border-color: #283040;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-secondary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-success {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-success:hover {
  color: #fff;
  background-color: #12b081;
  border-color: #11a578;
}

.btn-success:focus,
.btn-success.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-success.disabled,
.btn-success:disabled {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show>.btn-success.dropdown-toggle {
  color: #fff;
  background-color: #11a578;
  border-color: #109970;
}

.btn-success:not(:disabled):not(.disabled):active:focus,
.btn-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-success.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-info {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-info:hover {
  color: #fff;
  background-color: #1cbace;
  border-color: #1ab0c3;
}

.btn-info:focus,
.btn-info.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-info.disabled,
.btn-info:disabled {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-info:not(:disabled):not(.disabled):active,
.btn-info:not(:disabled):not(.disabled).active,
.show>.btn-info.dropdown-toggle {
  color: #fff;
  background-color: #1ab0c3;
  border-color: #19a5b8;
}

.btn-info:not(:disabled):not(.disabled):active:focus,
.btn-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-info.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-warning {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-warning:hover {
  color: #2A2E30;
  background-color: #ff8e57;
  border-color: #ff864a;
}

.btn-warning:focus,
.btn-warning.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-warning.disabled,
.btn-warning:disabled {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show>.btn-warning.dropdown-toggle {
  color: #2A2E30;
  background-color: #ff864a;
  border-color: #ff7d3d;
}

.btn-warning:not(:disabled):not(.disabled):active:focus,
.btn-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-warning.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-danger {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-danger:hover {
  color: #fff;
  background-color: #ff4f67;
  border-color: #ff425c;
}

.btn-danger:focus,
.btn-danger.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-danger.disabled,
.btn-danger:disabled {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show>.btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #ff425c;
  border-color: #ff3551;
}

.btn-danger:not(:disabled):not(.disabled):active:focus,
.btn-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-danger.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-light {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-light:hover {
  color: #2A2E30;
  background-color: #a5abb6;
  border-color: #9ea5b0;
}

.btn-light:focus,
.btn-light.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-light.disabled,
.btn-light:disabled {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-light:not(:disabled):not(.disabled):active,
.btn-light:not(:disabled):not(.disabled).active,
.show>.btn-light.dropdown-toggle {
  color: #2A2E30;
  background-color: #9ea5b0;
  border-color: #979eaa;
}

.btn-light:not(:disabled):not(.disabled):active:focus,
.btn-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-light.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-dark {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-dark:hover {
  color: #fff;
  background-color: #101827;
  border-color: #0c131e;
}

.btn-dark:focus,
.btn-dark.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-dark.disabled,
.btn-dark:disabled {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-dark:not(:disabled):not(.disabled):active,
.btn-dark:not(:disabled):not(.disabled).active,
.show>.btn-dark.dropdown-toggle {
  color: #fff;
  background-color: #0c131e;
  border-color: #080d15;
}

.btn-dark:not(:disabled):not(.disabled):active:focus,
.btn-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-dark.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-outline-primary {
  color: #00B5B8;
  background-color: transparent;
  background-image: none;
  border-color: #00B5B8;
}

.btn-outline-primary:hover {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-outline-primary:focus,
.btn-outline-primary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}

.btn-outline-primary.disabled,
.btn-outline-primary:disabled {
  color: #00B5B8;
  background-color: transparent;
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show>.btn-outline-primary.dropdown-toggle {
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.btn-outline-primary:not(:disabled):not(.disabled):active:focus,
.btn-outline-primary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-primary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(0, 181, 184, 0.5);
}

.btn-outline-secondary {
  color: #404E67;
  background-color: transparent;
  background-image: none;
  border-color: #404E67;
}

.btn-outline-secondary:hover {
  color: #fff;
  background-color: #404E67;
  border-color: #404E67;
}

.btn-outline-secondary:focus,
.btn-outline-secondary.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
  color: #404E67;
  background-color: transparent;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show>.btn-outline-secondary.dropdown-toggle {
  color: #fff;
  background-color: #404E67;
  border-color: #404E67;
}

.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-secondary.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(64, 78, 103, 0.5);
}

.btn-outline-success {
  color: #16D39A;
  background-color: transparent;
  background-image: none;
  border-color: #16D39A;
}

.btn-outline-success:hover {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-outline-success:focus,
.btn-outline-success.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-outline-success.disabled,
.btn-outline-success:disabled {
  color: #16D39A;
  background-color: transparent;
}

.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active,
.show>.btn-outline-success.dropdown-toggle {
  color: #fff;
  background-color: #16D39A;
  border-color: #16D39A;
}

.btn-outline-success:not(:disabled):not(.disabled):active:focus,
.btn-outline-success:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-success.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(22, 211, 154, 0.5);
}

.btn-outline-info {
  color: #2DCEE3;
  background-color: transparent;
  background-image: none;
  border-color: #2DCEE3;
}

.btn-outline-info:hover {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-outline-info:focus,
.btn-outline-info.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-outline-info.disabled,
.btn-outline-info:disabled {
  color: #2DCEE3;
  background-color: transparent;
}

.btn-outline-info:not(:disabled):not(.disabled):active,
.btn-outline-info:not(:disabled):not(.disabled).active,
.show>.btn-outline-info.dropdown-toggle {
  color: #2A2E30;
  background-color: #2DCEE3;
  border-color: #2DCEE3;
}

.btn-outline-info:not(:disabled):not(.disabled):active:focus,
.btn-outline-info:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-info.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(45, 206, 227, 0.5);
}

.btn-outline-warning {
  color: #FFA87D;
  background-color: transparent;
  background-image: none;
  border-color: #FFA87D;
}

.btn-outline-warning:hover {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-outline-warning:focus,
.btn-outline-warning.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-outline-warning.disabled,
.btn-outline-warning:disabled {
  color: #FFA87D;
  background-color: transparent;
}

.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active,
.show>.btn-outline-warning.dropdown-toggle {
  color: #2A2E30;
  background-color: #FFA87D;
  border-color: #FFA87D;
}

.btn-outline-warning:not(:disabled):not(.disabled):active:focus,
.btn-outline-warning:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-warning.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 168, 125, 0.5);
}

.btn-outline-danger {
  color: #FF7588;
  background-color: transparent;
  background-image: none;
  border-color: #FF7588;
}

.btn-outline-danger:hover {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-outline-danger:focus,
.btn-outline-danger.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-outline-danger.disabled,
.btn-outline-danger:disabled {
  color: #FF7588;
  background-color: transparent;
}

.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active,
.show>.btn-outline-danger.dropdown-toggle {
  color: #2A2E30;
  background-color: #FF7588;
  border-color: #FF7588;
}

.btn-outline-danger:not(:disabled):not(.disabled):active:focus,
.btn-outline-danger:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-danger.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(255, 117, 136, 0.5);
}

.btn-outline-light {
  color: #BABFC7;
  background-color: transparent;
  background-image: none;
  border-color: #BABFC7;
}

.btn-outline-light:hover {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-outline-light:focus,
.btn-outline-light.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-outline-light.disabled,
.btn-outline-light:disabled {
  color: #BABFC7;
  background-color: transparent;
}

.btn-outline-light:not(:disabled):not(.disabled):active,
.btn-outline-light:not(:disabled):not(.disabled).active,
.show>.btn-outline-light.dropdown-toggle {
  color: #2A2E30;
  background-color: #BABFC7;
  border-color: #BABFC7;
}

.btn-outline-light:not(:disabled):not(.disabled):active:focus,
.btn-outline-light:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-light.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(186, 191, 199, 0.5);
}

.btn-outline-dark {
  color: #1B2942;
  background-color: transparent;
  background-image: none;
  border-color: #1B2942;
}

.btn-outline-dark:hover {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-outline-dark:focus,
.btn-outline-dark.focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-outline-dark.disabled,
.btn-outline-dark:disabled {
  color: #1B2942;
  background-color: transparent;
}

.btn-outline-dark:not(:disabled):not(.disabled):active,
.btn-outline-dark:not(:disabled):not(.disabled).active,
.show>.btn-outline-dark.dropdown-toggle {
  color: #fff;
  background-color: #1B2942;
  border-color: #1B2942;
}

.btn-outline-dark:not(:disabled):not(.disabled):active:focus,
.btn-outline-dark:not(:disabled):not(.disabled).active:focus,
.show>.btn-outline-dark.dropdown-toggle:focus {
  -webkit-box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
  box-shadow: 0 0 0 0.2rem rgba(27, 41, 66, 0.5);
}

.btn-link {
  font-weight: 400;
  color: #009c9f;
  background-color: transparent;
}

.btn-link:hover {
  color: #008385;
  text-decoration: none;
  background-color: transparent;
  border-color: transparent;
}

.btn-link:focus,
.btn-link.focus {
  text-decoration: none;
  border-color: transparent;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.btn-link:disabled,
.btn-link.disabled {
  color: #404E67;
  pointer-events: none;
}

.btn-lg,
.btn-group-lg>.btn {
  padding: 1rem 1.25rem;
  font-size: 1.25rem;
  line-height: 1.25;
  border-radius: 0.27rem;
}

.btn-sm,
.btn-group-sm>.btn {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
  border-radius: 0.21rem;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-block+.btn-block {
  margin-top: 0.5rem;
}

input[type="submit"].btn-block,
input[type="reset"].btn-block,
input[type="button"].btn-block {
  width: 100%;
}

/* 24/06/25  */


/* 25/06/25 */

.card {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #fff;
  background-clip: border-box;
  /*border: 1px solid rgba(0, 0, 0, 0.06);*/
  /*border-radius: 0.25rem; */
}

.card>hr {
  margin-right: 0;
  margin-left: 0;
}

.card>.list-group:first-child .list-group-item:first-child {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.card>.list-group:last-child .list-group-item:last-child {
  border-bottom-right-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.card-body {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  padding: 1.5rem;
  /*padding-top: 0;*/
}

.card-title {
  /* margin-bottom: 1.5rem; */
  margin-bottom: 1px;
}

.card-subtitle {
  margin-top: -0.75rem;
  margin-bottom: 0;
}

.card-text:last-child {
  margin-bottom: 0;
}

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

.card-link+.card-link {
  margin-left: 1.5rem;
}

.card-header {
  /*padding: 1.5rem 1.5rem;
  padding: 1.5rem 1.5rem 2px 1.5rem; 26/06/25*/
  margin-bottom: 0;
  background-color: #fff;
  /*border-bottom: 1px solid rgba(0, 0, 0, 0.06); */
}

.card-header:first-child {
  /* border-radius: -webkit-calc(0.25rem - 1px) -webkit-calc(0.25rem - 1px) 0 0; */
  border-radius: -moz-calc(0.25rem - 1px) -moz-calc(0.25rem - 1px) 0 0;
  /* border-radius: calc(0.25rem - 1px) calc(0.25rem - 1px) 0 0; */
}

.card-header+.list-group .list-group-item:first-child {
  border-top: 0;
}

.card-footer {
  padding: 1.5rem 1.5rem;
  background-color: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.card-footer:last-child {
  border-radius: 0 0 -webkit-calc(0.25rem - 1px) -webkit-calc(0.25rem - 1px);
  border-radius: 0 0 -moz-calc(0.25rem - 1px) -moz-calc(0.25rem - 1px);
  border-radius: 0 0 calc(0.25rem - 1px) calc(0.25rem - 1px);
}

.card-header-tabs {
  margin-right: -0.75rem;
  margin-bottom: -1.5rem;
  margin-left: -0.75rem;
  border-bottom: 0;
}

.card-header-pills {
  margin-right: -0.75rem;
  margin-left: -0.75rem;
}

.card-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 1.25rem;
}

.card-img {
  width: 100%;
  border-radius: -webkit-calc(0.25rem - 1px);
  border-radius: -moz-calc(0.25rem - 1px);
  border-radius: calc(0.25rem - 1px);
}

.card-img-top {
  width: 100%;
  border-top-left-radius: -webkit-calc(0.25rem - 1px);
  border-top-left-radius: -moz-calc(0.25rem - 1px);
  border-top-left-radius: calc(0.25rem - 1px);
  border-top-right-radius: -webkit-calc(0.25rem - 1px);
  border-top-right-radius: -moz-calc(0.25rem - 1px);
  border-top-right-radius: calc(0.25rem - 1px);
}

.card-img-bottom {
  width: 100%;
  border-bottom-right-radius: -webkit-calc(0.25rem - 1px);
  border-bottom-right-radius: -moz-calc(0.25rem - 1px);
  border-bottom-right-radius: calc(0.25rem - 1px);
  border-bottom-left-radius: -webkit-calc(0.25rem - 1px);
  border-bottom-left-radius: -moz-calc(0.25rem - 1px);
  border-bottom-left-radius: calc(0.25rem - 1px);
}

.card-deck {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-deck .card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-deck {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .card-deck .card {
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0%;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -moz-box-orient: vertical;
    -moz-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-right: 15px;
    margin-bottom: 0;
    margin-left: 15px;
  }
}

.card-group {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  -moz-box-orient: vertical;
  -moz-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
}

.card-group>.card {
  margin-bottom: 15px;
}

@media (min-width: 576px) {
  .card-group {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -webkit-flex-flow: row wrap;
    -moz-box-orient: horizontal;
    -moz-box-direction: normal;
    -ms-flex-flow: row wrap;
    flex-flow: row wrap;
  }

  .card-group>.card {
    -webkit-box-flex: 1;
    -webkit-flex: 1 0 0%;
    -moz-box-flex: 1;
    -ms-flex: 1 0 0%;
    flex: 1 0 0%;
    margin-bottom: 0;
  }

  .card-group>.card+.card {
    margin-left: 0;
    border-left: 0;
  }

  .card-group>.card:first-child {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }

  .card-group>.card:first-child .card-img-top,
  .card-group>.card:first-child .card-header {
    border-top-right-radius: 0;
  }

  .card-group>.card:first-child .card-img-bottom,
  .card-group>.card:first-child .card-footer {
    border-bottom-right-radius: 0;
  }

  .card-group>.card:last-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
  }

  .card-group>.card:last-child .card-img-top,
  .card-group>.card:last-child .card-header {
    border-top-left-radius: 0;
  }

  .card-group>.card:last-child .card-img-bottom,
  .card-group>.card:last-child .card-footer {
    border-bottom-left-radius: 0;
  }

  .card-group>.card:only-child {
    border-radius: 0.25rem;
  }

  .card-group>.card:only-child .card-img-top,
  .card-group>.card:only-child .card-header {
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
  }

  .card-group>.card:only-child .card-img-bottom,
  .card-group>.card:only-child .card-footer {
    border-bottom-right-radius: 0.25rem;
    border-bottom-left-radius: 0.25rem;
  }

  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) {
    border-radius: 0;
  }

  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-top,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-img-bottom,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-header,
  .card-group>.card:not(:first-child):not(:last-child):not(:only-child) .card-footer {
    border-radius: 0;
  }
}

.card-columns .card {
  margin-bottom: 1.5rem;
}

@media (min-width: 576px) {
  .card-columns {
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3;
    -webkit-column-gap: 1.25rem;
    -moz-column-gap: 1.25rem;
    column-gap: 1.25rem;
    orphans: 1;
    widows: 1;
  }

  .card-columns .card {
    display: inline-block;
    width: 100%;
  }
}

.accordion .card:not(:first-of-type):not(:last-of-type) {
  border-bottom: 0;
  border-radius: 0;
}

.accordion .card:not(:first-of-type) .card-header:first-child {
  border-radius: 0;
}

.accordion .card:first-of-type {
  border-bottom: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.accordion .card:last-of-type {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-link,
.nav-link:hover,
.nav-link:focus,
.nav-link:active,
.nav-link:visited {
  color: #009c9f;
}


.form-control {
  display: block;
  width: 100%;
  height: -webkit-calc(2.75rem + 2px);
  height: -moz-calc(2.75rem + 2px);
  height: calc(2.75rem + 2px);
  padding: 0.75rem 1rem;
  font-size: 1rem;
  line-height: 1.25;
  color: #4E5154;
  background-color: #fff;
  background-clip: padding-box;
  border: 1px solid #BABFC7;
  border-radius: 0.25rem;
  -webkit-transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
  -o-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  -moz-transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
  transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s, -webkit-box-shadow ease-in-out 0.15s;
}

@media screen and (prefers-reduced-motion: reduce) {
  .form-control {
    -webkit-transition: none;
    -o-transition: none;
    -moz-transition: none;
    transition: none;
  }
}

.form-control::-ms-expand {
  background-color: transparent;
  border: 0;
}

.form-control:focus {
  color: #4E5154;
  background-color: #fff;
  border-color: #00B5B8;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.form-control::-webkit-input-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control:-moz-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control::-moz-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control:-ms-input-placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control::placeholder {
  color: #BABFC7;
  opacity: 1;
}

.form-control:disabled,
.form-control[readonly] {
  background-color: #dddddd !important;
  opacity: 1;
}

select.form-control:focus::-ms-value {
  color: #4E5154;
  background-color: #fff;
}

.form-control-file,
.form-control-range {
  display: block;
  width: 100%;
}

/* input[type="file"].form-control,
.form-control-file {
  display: block;
  width: 100%;
  margin-top: 0.5rem !important;
  padding: 0.375rem 0.75rem !important;
  line-height: 1.5 !important;
  color: #495057 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 1px solid #ced4da !important;
  border-radius: 0.25rem !important;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important;
}

input[type="file"].form-control:focus {
  color: #495057 !important; 
  background-color: #fff !important;
  border-color: #80bdff !important;
  outline: 0 !important;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25) !important;
}*/

input[type="file"].form-control {
  display: block !important;
  width: 100% !important;
  height: 34px !important;
  padding: 6px 12px !important;
  font-size: 1rem !important;
  line-height: 1.42857143 !important;
  color: #555 !important;
  background-color: #fff !important;
  background-image: none;
  border: 1px solid #ccc !important;
  border-radius: 4px !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075) !important;
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

input[type="file"].form-control:focus {
  border-color: #66afe9 !important;
  outline: 0 !important;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}


/* 25/06/25 */


/*26/06/25*/

.breadcrumb {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  /*padding: 0.75rem 0rem 0rem 0rem;*/
  padding: 0rem 0rem 0rem 0rem;
  margin-bottom: 1px;
  list-style: none;
  /*background-color: #98A4B8;*/
  border-radius: 0.25rem;
}

.breadcrumb-item+.breadcrumb-item {
  padding-left: 0.5rem;
}

.breadcrumb-item+.breadcrumb-item::before {
  display: inline-block;
  padding-right: 0.5rem;
  color: #404E67;
  content: "/";
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: underline;
}

.breadcrumb-item+.breadcrumb-item:hover::before {
  text-decoration: none;
}

.breadcrumb-item.active {
  color: #404E67;
}

.pagination {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  padding-left: 0;
  list-style: none;
  border-radius: 0.25rem;
}

.page-link {
  position: relative;
  display: block;
  padding: 0.5rem 0.75rem;
  margin-left: -1px;
  line-height: 1.25;
  color: #009c9f;
  background-color: #fff;
  border: 1px solid #ddd;
}

.page-link:hover {
  z-index: 2;
  color: #008385;
  text-decoration: none;
  background-color: #F5F7FA;
  border-color: #ddd;
}

.page-link:focus {
  z-index: 2;
  outline: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}

.page-link:not(:disabled):not(.disabled) {
  cursor: pointer;
}

.page-item:first-child .page-link {
  margin-left: 0;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.page-item:last-child .page-link {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.page-item.active .page-link {
  z-index: 1;
  color: #fff;
  background-color: #00B5B8;
  border-color: #00B5B8;
}

.page-item.disabled .page-link {
  color: #404E67;
  pointer-events: none;
  cursor: auto;
  background-color: #fff;
  border-color: #626E82;
}

.pagination-lg .page-link {
  padding: 0.75rem 1.5rem;
  font-size: 1.25rem;
  line-height: 1.25;
}

.pagination-lg .page-item:first-child .page-link {
  border-top-left-radius: 0.27rem;
  border-bottom-left-radius: 0.27rem;
}

.pagination-lg .page-item:last-child .page-link {
  border-top-right-radius: 0.27rem;
  border-bottom-right-radius: 0.27rem;
}

.pagination-sm .page-link {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  line-height: 1;
}

.pagination-sm .page-item:first-child .page-link {
  border-top-left-radius: 0.21rem;
  border-bottom-left-radius: 0.21rem;
}

.pagination-sm .page-item:last-child .page-link {
  border-top-right-radius: 0.21rem;
  border-bottom-right-radius: 0.21rem;
}


.nav {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}

.nav-link {
  display: block;
  padding: 0.5rem 1rem;
}

.nav-link:hover,
.nav-link:focus {
  text-decoration: none;
}

.nav-link.disabled {
  color: #404E67;
}

.nav-tabs {
  border-bottom: 1px solid #ddd;
}

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

.nav-tabs .nav-link {
  border: 1px solid transparent;
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  border-color: #98A4B8 #98A4B8 #ddd;
}

.nav-tabs .nav-link.disabled {
  color: #404E67;
  background-color: transparent;
  border-color: transparent;
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #4E5154;
  background-color: #F5F7FA;
  border-color: #626E82 #626E82 #F5F7FA;
}

.nav-tabs .dropdown-menu {
  margin-top: -1px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.nav-pills .nav-link {
  border-radius: 0.25rem;
}

.nav-pills .nav-link.active,
.nav-pills .show>.nav-link {
  color: #fff;
  background-color: #00B5B8;
}

.nav-fill .nav-item {
  -webkit-box-flex: 1;
  -webkit-flex: 1 1 auto;
  -moz-box-flex: 1;
  -ms-flex: 1 1 auto;
  flex: 1 1 auto;
  text-align: center;
}

.nav-justified .nav-item {
  -webkit-flex-basis: 0;
  -ms-flex-preferred-size: 0;
  flex-basis: 0;
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
  -moz-box-flex: 1;
  -ms-flex-positive: 1;
  flex-grow: 1;
  text-align: center;
}

.tab-content>.tab-pane {
  display: none;
}

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


/*26/06/25*/

/*27/06/25*/
.mt-28 {
  margin-top: 28px;
}

.custom-select {
  display: inline-block;
  width: 100%;
  height: -webkit-calc(2.75rem + 2px);
  height: -moz-calc(2.75rem + 2px);
  height: calc(2.75rem + 2px);
  padding: 0.375rem 1.75rem 0.375rem 0.75rem;
  line-height: 1.25;
  color: #4E5154;
  vertical-align: middle;
  background: #fff url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E") no-repeat right 0.75rem center;
  -webkit-background-size: 8px 10px;
  background-size: 8px 10px;
  border: 1px solid #BABFC7;
  border-radius: 0.25rem;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.custom-select:focus {
  border-color: #39fcff;
  outline: 0;
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(57, 252, 255, 0.5);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.075), 0 0 5px rgba(57, 252, 255, 0.5);
}

.custom-select:focus::-ms-value {
  color: #4E5154;
  background-color: #fff;
}

.custom-select[multiple],
.custom-select[size]:not([size="1"]) {
  height: auto;
  padding-right: 0.75rem;
  background-image: none;
}

.custom-select:disabled {
  color: #404E67;
  background-color: #98A4B8;
}

.custom-select::-ms-expand {
  opacity: 0;
}

.custom-select-sm {
  height: -webkit-calc(1.375rem + 2px);
  height: -moz-calc(1.375rem + 2px);
  height: calc(1.375rem + 2px);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 75%;
}

.custom-select-lg {
  height: -webkit-calc(3.5625rem + 2px);
  height: -moz-calc(3.5625rem + 2px);
  height: calc(3.5625rem + 2px);
  padding-top: 0.375rem;
  padding-bottom: 0.375rem;
  font-size: 125%;
}

/* .form-control-sm {
    min-height: calc(1.5em + .5rem + 2px) !important;
    padding: .25rem .5rem !important;
    font-size: .875rem !important;
    border-radius: .2rem !important;
} */

/* .table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(245, 247, 250, 0.5) !important;
} */

.table-striped {
  --bs-table-striped-bg: rgba(245, 247, 250, 0.5) !important;
}




/*27/06/25*/

/*30/06/25*/

/* .form-row1 row g-2 {
    --bs-gutter-x: .5rem !important;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
} */

/* .form-row1 row g-2 {
  --bs-gutter-x: .5rem; 
  --bs-gutter-y: 0;
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--bs-gutter-y));
  margin-right: calc(-1 * var(--bs-gutter-x));
  margin-left: calc(-1 * var(--bs-gutter-x));
}


.form-row1 row g-2 > [class*="col"] {
  padding-right: calc(var(--bs-gutter-x) * 1);
  padding-left: calc(var(--bs-gutter-x) * 1);
} */

.text-right {
  text-align: end !important;
}

.float-right {
  float: inline-end !important;
  /* for logical direction */
}

.fsize-icon {
  font-size: 1.5rem !important;
}

/*30/06/25*/

/*01/07/25*/
@media (min-width: 576px) {
  .text-sm-left {
    text-align: left !important;
  }
}

.padding-10px {
  padding: 10px;
}

.posbarcode-checkbox {
  height: 35px;
}

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

.pos-padding-product {
  padding: 5px;
}

.pos-product-lineheight {
  margin-top: 4px;
  line-height: 1;
}

/* Anjana ends */

.settings-section {
  text-decoration: none;
  list-style: none !important;
}

.settings-section ul {
  list-style: none !important;
}

.settings-section a i {
  margin-right: 5px !important;
}

.settings-section .card-collapse {
  border: solid 1px #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
}

.settings-section a.dropdown-item {
  padding: .25rem .5em !important;
}

.settings-section a.dropdown-item:active {
  background-image: linear-gradient(to right, #00686a 0%, #6F85AD 100%) !important;
}

.working-location {
  text-decoration: none !important;
}

.working-location ul {
  padding: 0px !important;
}

.working-location ul li {
  padding: 0px !important;
}

.working-location .dropdown-menu-footer {
  margin: 0px !important;
  text-align: center !important;
  padding: 0px !important;
  justify-content: center;
}

.working-location .dropdown-menu-footer:hover {
  all: unset;
}

.form-check-label {
  font-size: 0.857rem !important;
}

.settings-box {
  border: solid 1px #fff;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px !important;
  padding: 1rem !important;
  margin-bottom: 2rem;
}

.settings-box a {
  color: #212529 !important;

}

.settings-box a i {
  color: #212529 !important;
  font-size: 0.75rem !important;
}

.settings-subheding-border-bottom {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  font-size: 0.929rem !important;
  margin-top: 3px;
}

/* ========= Dashboards Starts================ */
.stat-card {
  /* border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 2rem 1rem 1rem 1rem;
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem; */

  border-radius: 8px;
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  background: #ffffff;
  padding: 1.3rem 1rem 1rem 1rem;
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  border: 1px solid #b6c1cc;
  transform: translateZ(0);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);

}

.stat-card:hover {
  transform: scale(1.05);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}


.stat-icon-box {
  width: 70px;
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2rem;
  position: absolute;
  top: -3px;
  left: 3px;
  z-index: 2;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); */
  color: #003e48;

}

.card-content-custom {
  flex: 1;
  text-align: right;
  margin-left: 0px;
  margin-top: 0px;
}

.card-category {
  font-size: 1rem;
  color: #999;
  margin-bottom: 4px;
}

.card-value {
  font-size: 1.571rem;
  font-weight: 600;
}

.stat-link {
  text-decoration: none;
  display: block;
  color: inherit;
}

.summary-icon {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: #fff;
  border-radius: 8px;
  padding: 10px;
  margin-right: 2.5rem;
}

.card a:not(.btn) {
  text-decoration: none !important;
}

.card a:not(.btn):hover {
  color: inherit !important;
}

.bg-mango {
  background-color: #f6be4f;
}

.bg-deep-sea {
  background-color: #05668d;
}

.bg-rosewood {
  background-color: #a4133c;
}

.bg-citron {
  background-color: #c4d35f;
}

.bg-peachy {
  background-color: #ff9671;
}

.bg-pink {
  background-color: #ec407a;
}

.dashboard-crm-items {
  border-radius: 10px !important;
  margin-bottom: 15px;
}

.dashboard-crm-item {
  border-radius: 10px !important;
  margin-bottom: 5px;
  font-size: 1.6rem;
}

.dashboard-crm-item h5 {
  font-weight: 500;
  letter-spacing: 0.05rem;
  font-size: 1.6rem;
}

.dashboard-crm-item h6 {
  font-size: 1.2rem;
}

.card-hover-effect {
  transition: all 0.3s ease-in-out;
}

.card-hover-effect:hover {
  transform: scale(1.03);
  box-shadow: 0 0.75rem 1.5rem rgba(0, 0, 0, 0.3);
}

.hover-card {
  background-color: #f9f9f9;
  border-radius: 15px;
  padding: 30px 10px;
  transition: 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  text-decoration: none;
  color: #333;
  text-align: center;
  border: 2px solid #e0e0e0;
}

.hover-card .card-icon {
  font-size: 1.8rem;
  background-color: rgba(78, 115, 223, 0.12);
  color: #404e67;
  border-radius: 50%;
  width: 48px;
  height: 48px;
  line-height: 48px;
  display: inline-block;
  transition: 0.3s ease;
}

.hover-card h5 {
  margin-top: 10px;
  font-size: 0.95rem;
  font-weight: 500;
  transition: 0.3s ease;
}

.hover-card:hover {
  background-color: #404e67;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
  transform: translateY(-5px);
  border-color: #fff;
}

.hover-card:hover .card-icon {
  background-color: #fff;
  color: #404e67;
}

.hover-card:hover h5 {
  color: #fff;
}

/* ========= Dashboards Ends================ */
.modal {
  z-index: 9999 !important;
}

/* Base loader styles */
.loader-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, #00686a 0%, #6F85AD 100%) !important;
  z-index: 9999;
  backdrop-filter: blur(3px);
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Spinner styles */
.loader-spinner {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 8px solid rgba(255, 255, 255, 0.2);
  border-top-color: #ffffff;
  animation: spin 1.2s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
  position: relative;
}

.spinner-inner {
  content: '';
  position: absolute;
  top: -8px;
  left: -8px;
  right: -8px;
  bottom: -8px;
  border-radius: 50%;
  border: 8px solid transparent;
  border-bottom-color: #ffffff;
  animation: spinReverse 1.6s cubic-bezier(0.5, 0.1, 0.4, 0.9) infinite;
}

/* Text styles */
.loader-text {
  margin-top: 20px;
  font-size: 1.2rem;
  font-weight: 600;
  color: #ffffff;
  letter-spacing: 1px;
  animation: pulse 2s ease-in-out infinite;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Progress bar styles */
.progress-bar {
  width: 200px;
  height: 4px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 2px;
  margin-top: 20px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  width: 0%;
  background: #ffffff;
  border-radius: 2px;
  animation: progress 3s ease-in-out infinite;
}

/* Branding styles */
.branding {
  position: absolute;
  bottom: 30px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

/* Animations */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes spinReverse {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-720deg);
  }
}

@keyframes pulse {
  0% {
    opacity: 0.8;
    transform: scale(0.98);
  }

  50% {
    opacity: 1;
    transform: scale(1.02);
  }

  100% {
    opacity: 0.8;
    transform: scale(0.98);
  }
}

@keyframes progress {
  0% {
    width: 0%;
    margin-left: 0;
  }

  50% {
    width: 100%;
    margin-left: 0;
  }

  100% {
    width: 0%;
    margin-left: 100%;
  }
}


.dropdown-toggle::after {
  font-family: 'FontAwesome';
  content: "\f107" !important;
  border: none !important;
  position: relative;
  top: 0;
  right: 0px;
  padding: 0 2px 0 6px;
  margin: 0 0.3em 0 0;
  vertical-align: 0;
}

.dropdown-toggle::after {
  display: inline-block !important;
  margin-left: .255em;
  /* vertical-align: .255em; */
  content: "";
  border-top: .3em solid;
  border-right: .3em solid transparent;
  border-bottom: 0;
  border-left: .3em solid transparent;
}

.horizontal-layout.vertical-overlay-menu .main-menu-content {
  padding: 0;
  height: auto !important;
}


.main-menu.menu-fixed {
  height: auto !important;
}

kbd {
  padding: .2rem .4rem;
  font-size: .875em;
  color: #fff;
  background-color: #c2c8ce !important;
  border-radius: .2rem;
}

/* .table-scroll thead th{
    position: sticky !important;
    top: 122px !important;  
    background: #f8f9fa;  
    z-index: 2; 
} */

/* Active rows */
/* tr.odd.status-active {
   
}
tr.even.status-active {
   
} */

/* Inactive rows */
tr.odd.status-inactive {
  background-color: rgba(255, 0, 0, 0.15) !important;
  opacity: 1 !important;
}

tr.even.status-inactive {
  background-color: rgba(255, 0, 0, 0.25) !important;
  opacity: 1 !important;
}

.line-mb-2 {
  margin-bottom: 2px !important;
}

.line-text-color {
  color: #0098d9;
}

.current-status .alert {
  padding: 2px 7px 2px 7px !important;
  border-radius: 6px !important;
  font-size: 0.929rem !important;
  /* line-height: 2 !important; */
}

.wid-100per {
  width: 100% !important;
}

/* Wrapper for controlling scroll only on mobile */
.table-wrapper {
  width: 100%;
}

.tab-error {
  background-color: #ffe5e5 !important;
  color: #c10000 !important;
}

.match-tabs .nav-link {
  border: none !important;
  padding: 15px 10px !important;
  color: #82868b !important;
  font-weight: 600;
  background: transparent !important;
  position: relative;
}

.match-tabs .nav-link.active {
  color: #333 !important;
}

.match-tabs .nav-link.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 10%;
  width: 80%;
  height: 3px;
  background-color: #5a8dee;
}

.match-sidebar {
  box-shadow: 0 4px 20px 0 rgba(0, 0, 0, .05);
  border-radius: 8px;
}

.bg-light-blue {
  background-color: #e7f1ff !important;
}

.bg-light-green {
  background-color: #f6fff6 !important;
}

/* Modern Toggle Switch Styles */
.toggle-switch {
  position: relative;
  display: inline-block;
  width: 50px;
  height: 24px;
}

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

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(255, 255, 255, 0.3);
  transition: all 0.3s ease;
  border-radius: 24px;
  border: 2px solid rgba(255, 255, 255, 0.5);
}

.toggle-slider:before {
  position: absolute;
  content: "";
  height: 16px;
  width: 16px;
  left: 3px;
  bottom: 2px;
  background-color: white;
  transition: all 0.3s ease;
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.toggle-switch input:checked+.toggle-slider {
  background-color: rgba(76, 217, 100, 0.9);
  border-color: rgba(76, 217, 100, 1);
}

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

.toggle-switch input:focus+.toggle-slider {
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* Multi-select container animation */
.multi-select-container {
  transition: all 0.3s ease;
}

.multi-select-container:hover {
  box-shadow: 0 4px 12px rgba(108, 122, 137, 0.5) !important;
  transform: translateY(-1px);
}

/* Selected Transaction Row Highlighting */
.selected-transaction-row {
  background-color: #e3f2fd !important;
  border-left: 4px solid #2196F3 !important;
  transition: all 0.3s ease;
}

.selected-transaction-row:hover {
  background-color: #bbdefb !important;
}

/* Checkbox styling in selected rows */
.selected-transaction-row .uncat-checkbox {
  transform: scale(1.1);
}

/* Animation for row selection */
@keyframes rowSelect {
  0% {
    background-color: transparent;
  }

  50% {
    background-color: #90caf9;
  }

  100% {
    background-color: #e3f2fd;
  }
}

.selected-transaction-row {
  animation: rowSelect 0.4s ease;
}

/* DataTable specific styles for selected rows */
table.dataTable tbody tr.selected-transaction-row td {
  background-color: #e3f2fd !important;
  /* border-left: 4px solid #2196F3; */
}

table.dataTable tbody tr.selected-transaction-row:hover td {
  background-color: #bbdefb !important;
}

/* Handle odd/even row colors when selected */
table.dataTable.stripe tbody tr.odd.selected-transaction-row,
table.dataTable.display tbody tr.odd.selected-transaction-row {
  background-color: #e3f2fd !important;
}

table.dataTable.stripe tbody tr.even.selected-transaction-row,
table.dataTable.display tbody tr.even.selected-transaction-row {
  background-color: #e3f2fd !important;
}

table.dataTable.hover tbody tr.selected-transaction-row:hover,
table.dataTable.display tbody tr.selected-transaction-row:hover {
  background-color: #bbdefb !important;
}

/* Ensure checkbox is visible and styled in selected rows */
.selected-transaction-row input[type="checkbox"] {
  cursor: pointer;
  transform: scale(1.1);
  accent-color: #2196F3;
}

/* Add subtle pulse effect to newly selected rows */
@keyframes pulseSelect {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(33, 150, 243, 0.4);
  }

  50% {
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0);
  }
}

.selected-transaction-row.newly-selected {
  animation: rowSelect 0.4s ease, pulseSelect 0.6s ease;
}

/* Ensure text remains readable in selected rows */
.selected-transaction-row td {
  color: #1a1a1a !important;
}

.selected-transaction-row a {
  color: #0d47a1 !important;
}

.selected-transaction-row a:hover {
  color: #1976d2 !important;
  text-decoration: underline;
}

/* Make uncategorized table rows clickable */
#uncategorizedtbl tbody tr {
  cursor: pointer;
}

/* Toggle status text animation */
.toggle-status {
  transition: all 0.3s ease;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ========================================
   MATCH TRANSACTION SECTION BEAUTIFICATION
   ======================================== */

/* Best Matches Header */
.best-matches-header {
  background: linear-gradient(135deg, #647891 0%, #6F85AD 100%);
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}

.best-matches-header:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.best-matches-header h6 {
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.best-matches-header .match-count-badge {
  background: rgba(255, 255, 255, 0.25) !important;
  color: #fff !important;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 12px;
  font-size: 0.786rem;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.best-matches-header .best-matches-icon {
  color: #fff;
  transition: transform 0.3s ease;
}

/* Match Item Cards */
.match-item {
  background: #fff;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  border: 1px solid #e8ecf1;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.match-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background: linear-gradient(180deg, #647891 0%, #6F85AD 100%);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}

.match-item:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateX(4px);
  border-color: #647891;
}

.match-item:hover::before {
  transform: scaleY(1);
}

.match-item .font-weight-bold {
  color: #2c3e50;
  font-size: 0.929rem;
}

.match-item .text-muted {
  color: #7f8c8d;
  font-size: 0.786rem;
}

/* Match Button Styling */
.match-item .btn-primary.match-btns {
  background: linear-gradient(135deg, #647891 0%, #6F85AD 100%);
  border: none;
  border-radius: 6px;
  padding: 6px 16px;
  font-size: 0.857rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
  transition: all 0.3s ease;
}

.match-item .btn-primary.match-btns:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

/* Possible Matches Section */
.possible-matches-container {
  margin-top: 16px;
}

.possible-matches-container h6 {
  color: #2c3e50;
  font-weight: 700;
  font-size: 0.929rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.select-all-matches {
  font-size: 0.786rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.select-all-matches:hover {
  transform: scale(1.05);
  text-decoration: underline;
}

.unselect-all-matches {
  font-size: 0.786rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none;
}

.unselect-all-matches:hover {
  transform: scale(1.05);
  text-decoration: underline;
  color: #c82333 !important;
}

/* Possible Match Items */
.possible-match {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 6px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
  cursor: pointer;
}

.possible-match:hover {
  background: #e9ecef;
  border-color: #647891;
  transform: translateX(2px);
}

.possible-match.selected {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
  border-color: #647891;
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2);
}

/* Global keyboard (Tab) focus indicator color */
:focus-visible {
  outline: 2px solid #adb5bd !important;
  outline-offset: 1px;
}

/* Select2: remove the seam line between the closed control and its open
   dropdown (select2-dropdown--below already drops its own border-top for
   this reason; the control's border-bottom was the only line left showing). */
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple,
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single {
  border-bottom: none;
}

/* Select2's inline search field sits inside an overflow:hidden selection box,
   so the global focus outline above gets clipped to a stray line across it.
   The container already shows its own open/focus state, so just suppress
   the outline on the search input itself. */
.select2-search__field:focus,
.select2-search__field:focus-visible {
  outline: none !important;
}

.possible-match.bg-light-green {
  background: linear-gradient(135deg, rgba(102, 126, 234, 0.15) 0%, rgba(118, 75, 162, 0.15) 100%);
}

.possible-match .font-weight-bold {
  color: #2c3e50;
  font-size: 0.857rem;
}

.possible-match .text-muted {
  color: #7f8c8d;
  font-size: 0.75rem;
}

/* Select/Selected States */
.unselected-state {
  color: #647891 !important;
  font-weight: 600;
  transition: all 0.2s ease;
}

.selected-state {
  color: #28a745 !important;
  font-weight: 700;
}

.selected-state i {
  animation: checkBounce 0.4s ease;
}

@keyframes checkBounce {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.2);
  }
}

/* Pending Section */
.pending-section {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-radius: 8px;
  padding: 10px;
  margin-top: 12px;
}

.pending-label {
  color: #647891;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: 0.857rem;
}

.pending-label:hover {
  color: #6F85AD;
  transform: translateX(2px);
}

.pending-amount {
  background: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  border: 1px solid #dee2e6;
}

.pending-val {
  color: #647891;
  font-size: 0.929rem;
}

/* Match Sidebar Tabs */
.match-tabs .nav-link {
  color: #6c757d;
  font-weight: 600;
  border: none;
  border-bottom: 3px solid transparent;
  transition: all 0.3s ease;
  padding: 10px 16px;
}

.match-tabs .nav-link:hover {
  color: #647891;
  border-bottom-color: rgba(102, 126, 234, 0.3);
}

.match-tabs .nav-link.active {
  color: #647891;
  background: transparent;
  border-bottom-color: #647891;
}

/* Footer Buttons */
.match-sidebar .card-footer .btn-crud {
  border-radius: 6px;
  padding: 8px 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-size: 0.857rem;
  transition: all 0.3s ease;
}

.match-sidebar .card-footer .btn-primary {
  background: linear-gradient(135deg, #647891 0%, #6F85AD 100%);
  border: none;
  box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3);
}

.match-sidebar .card-footer .btn-primary:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.5);
}

.match-sidebar .card-footer .btn-secondary {
  background: #6c757d;
  border: none;
}

.match-sidebar .card-footer .btn-secondary:hover {
  background: #5a6268;
  transform: translateY(-2px);
}

/* Placeholder Styling */
#matching-placeholder,
#categorize-placeholder {
  padding: 40px 20px;
  text-align: center;
}

#matching-placeholder i,
#categorize-placeholder i {
  color: #cbd5e0;
  font-size: 3.429rem;
  margin-bottom: 12px;
  animation: floatIcon 3s ease-in-out infinite;
}

@keyframes floatIcon {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }
}

#matching-placeholder p,
#categorize-placeholder p {
  color: #a0aec0;
  font-size: 0.929rem;
  margin: 0;
}

/* Scrollbar Styling for Match Sidebar */
.match-sidebar .card-body::-webkit-scrollbar {
  width: 6px;
}

.match-sidebar .card-body::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

.match-sidebar .card-body::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #647891 0%, #6F85AD 100%);
  border-radius: 10px;
}

.match-sidebar .card-body::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #6F85AD 0%, #647891 100%);
}

/* Animation for content loading */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.best-matches-container .match-item,
.possible-matches-list .possible-match {
  animation: fadeInUp 0.4s ease forwards;
}

.best-matches-container .match-item:nth-child(2) {
  animation-delay: 0.1s;
}

.best-matches-container .match-item:nth-child(3) {
  animation-delay: 0.2s;
}

.possible-matches-list .possible-match:nth-child(1) {
  animation-delay: 0.05s;
}

.possible-matches-list .possible-match:nth-child(2) {
  animation-delay: 0.1s;
}

.possible-matches-list .possible-match:nth-child(3) {
  animation-delay: 0.15s;
}

/* Sticky header only for desktop/tablet */
@media (min-width: 768px) {
  .sticky-table thead th {
    position: sticky;
    top: 125px;
    z-index: 10;
    background: #fff;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.1);
  }

  /* Remove overflow for sticky to work properly */
  .table-wrapper {
    overflow: visible !important;
  }
}

/* Enable horizontal scroll on mobile */
@media (max-width: 767px) {
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  .sticky-table thead th {
    position: static !important;
    box-shadow: none !important;
  }
}

/* Split Transaction Styles */
.btn-split-pill {
  background-color: #003f5c !important;
  color: #fff !important;
  border-radius: 20px !important;
  font-size: 0.786rem !important;
  font-weight: 700 !important;
  padding: 4px 12px !important;
  border: none !important;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: 0 2px 4px rgba(0, 63, 92, 0.2);
  transition: all 0.2s ease;
}

.btn-split-pill:hover {
  background-color: #002d42 !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 63, 92, 0.3);
}

.split-row {
  background: #fcfdfe;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  padding: 12px;
  position: relative;
  transition: all 0.2s ease;
}

.split-row:hover {
  border-color: #d1e9ff;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.shared-date-container {
  background: #f8fbff;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid #d1e9ff;
}

.btn-outline-dashed {
  border: 2px dashed #5a8dee !important;
  background-color: #fff !important;
  color: #5a8dee !important;
  border-radius: 10px;
  transition: all 0.3s ease;
  font-size: 1rem;
  letter-spacing: 0.3px;
}

.btn-outline-dashed:hover {
  background-color: #f0f7ff !important;
  border-color: #4a7dce !important;
  color: #4a7dce !important;
}

.split-summary-card {
  background-color: #f8fbff;
  border: 1px solid #e1efff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
  padding: 1.5rem;
}

.bank-invoice-pay-amount {
  width: 70px;
}

.badge-balanced {
  background-color: #e6fdf0 !important;
  color: #10b981 !important;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.929rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
}

.badge-not-balanced {
  background-color: #fff1f2 !important;
  color: #f43f5e !important;
  font-weight: 700;
  padding: 8px 20px;
  border-radius: 30px;
  font-size: 0.929rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
}

.split-summary-label {
  color: #8e99a7;
  font-size: 1rem;
}

.split-summary-value {
  color: #64748b;
  font-weight: 600;
}

.final-total-blue {
  color: #3b82f6 !important;
  font-size: 1.5rem !important;
  font-weight: 700;
}

.form-control-sm:focus {
  border-color: #5a8dee;
  box-shadow: 0 0 0 3px rgba(90, 141, 238, 0.1);
}



/* Dashboard */
body {
  background: #f4f6f9;
}

/* Remove link style */
.stat-link {
  text-decoration: none;
  color: inherit;
}

/* Executive Widget */
.executive-widget {
  background: #ffffff;
  border-radius: 12px;
  padding: 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #ccc;
  border-bottom: 4px solid #116c74;
  transition: all 0.25s ease;
}

/* Hover */
.executive-widget:hover {
  border-bottom: 4px solid #116c74;
  /* transform: translateY(-3px); */
}

/* Text */
.card-category {
  font-size: 1rem;
  color: #6b7280;
  margin-bottom: 8px;
}

.card-value {
  font-size: 2.286rem;
  font-weight: 700;
  color: #111827;
}

/* Icon */
.stat-icon {
  font-size: 2rem;
  color: #3b82f6;
  opacity: 0.8;
}

/* Different Color Themes */
.widget-area {
  border-bottom-color: #116c74;
}

.widget-leads {
  border-bottom-color: #22c55e;
}

.widget-tickets {
  border-bottom-color: #f59e0b;
}

.widget-suppliers {
  border-bottom-color: #ef4444;
}

.stat-icon-box.bg-citron.bg-area1 {
  background: #06696d;
}

.stat-icon-box.bg-citron.bg-area2 {
  background: #186e78;
}

.stat-icon-box.bg-citron.bg-area3 {
  background: #2a7383;
}


.stat-icon-box.bg-citron.bg-area4 {
  background: #3c788f;
}



.stat-icon-box.bg-citron.bg-area5 {
  background: #4d7c99;
}


.stat-icon-box.bg-citron.bg-area6 {
  background: #6282a5;
}



/* // Table View */

table.table-bordered.dataTable th:first-child {
  border-top-left-radius: 0px;
}

table.table-bordered.dataTable th {
  border-radius: 0px;
}

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right: 0px solid #e3ebf3 !important;
  border-top-right-radius: 0px;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #3e5072;
  border-top: 0px solid #6e84ac;
  background: var(--gradient1) !important;
  border-right-color: #768cb5;
  color: #111111;


}


table.dataTable {
  border-collapse: collapse !important;
}

table.table-bordered.dataTable thead tr:first-child th,
table.table-bordered.dataTable thead tr:first-child td {
  border-top-width: 0px !important;
}

table.table-bordered.dataTable th,
table.table-bordered.dataTable td {
  border-bottom-width: 0px !important;
}

table.dataTable.erp-zebra tbody tr:nth-child(odd) {
  background-color: #f9fafb;
}


.custom-legend {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  font-size: 1rem;
  width: 160px;
  text-align: left;
  line-height: 1.4;
}

.chart-container {
  height: 350px;
}

.about-us {
  z-index: 999999;
}

tr:hover td {
  border-radius: 0% !important;
}

table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable th:last-child,
table.table-bordered.dataTable td:last-child,
table.table-bordered.dataTable td:last-child {
  border-right: 1px solid #e3ebf3 !important;
}

.btn-primary {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-primary-color) !important;
}

.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-secondary-color) !important;
}

.btn-secondary {
  background-color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-secondary-color) !important;
}

/* .btn-secondary:hover{
  background-color:var(--primary-color) !important;
  border-color:var(--primary-color) !important;
  color: var(--font-primary-color) !important;
} */

.btn-secondary:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--secondary-color) !important;
  color: var(--font-primary-color) !important;
}



/* Open */
.status-open {
  background-color: var(--open-color) !important;
  color: #fff;
}

/* Converted */
.status-converted {
  background-color: var(--converted-color) !important;
  color: #fff;
}

/* Completed */
.status-completed {
  background-color: var(--completed-color) !important;
  color: #fff;
}

/* Draft */
.status-draft {
  background-color: var(--draft-color) !important;
  color: #000;
}

/* Updated */
.status-updated {
  background-color: var(--updated-color) !important;
  color: #fff;
}

/* Expired */
.status-expired {
  background-color: var(--expired-color) !important;
  color: #fff;
}

/* Lost / Rejected */
.status-rejected {
  background-color: var(--rejected-color) !important;
  color: #fff;
}

/* Created */
.status-created {
  background-color: var(--created-color) !important;
  color: #fff;
}

/* Approved */
.status-approved {
  background-color: var(--approved-color) !important;
  color: #fff;
}

/* Unapproved */
.status-unapproved {
  background-color: var(--unapproved-color) !important;
  color: #fff;
}



.horizontal-layout .navbar-fixed {
  /* z-index: 9999 !important; */
  /* border-radius: 20px; */
  /* top: 63px; */
  /* margin: 0 5px; */
  padding: 0;
}

.navbar-light .navbar-nav .nav-link {
  color: rgb(0 52 64);
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 9px;
  box-shadow: 0px 1px 14px -1px #e5e5e5;
}



table.dataTable {
  clear: both;
  margin-top: 0px !important;
  margin-bottom: 6px !important;
  max-width: none !important;
  border-collapse: separate !important;
  border-spacing: 0;
  margin: 0 !important;
}




/* Modern Bootstrap Notification Panel Styles - Advanced Design */
.notification-item {
  transition: background-color 0.15s ease;
  border-bottom: 1px solid #e9ecef !important;
  background-color: #fff;
}

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

.notification-item:last-child {
  border-bottom: none !important;
}

/* Clean spacing for notification items */
.notification-item {
  padding-top: 0.75rem !important;
  padding-bottom: 0.75rem !important;
}

/* Task list notification items styling */
.tasklist .media,
.tasklist .d-flex {
  border-bottom: 1px solid #e9ecef;
  transition: background-color 0.15s ease;
}

.tasklist .media:hover,
.tasklist .d-flex:hover {
  background-color: #f8f9fa;
}

.tasklist .media:last-child,
.tasklist .d-flex:last-child {
  border-bottom: none;
}

.tasklist .media-heading,
.tasklist h6 {
  font-weight: 600;
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.tasklist .notification-text,
.tasklist p {
  margin-bottom: 0.25rem;
  line-height: 1.3;
}

.tasklist .media-meta,
.tasklist small {
  font-size: 0.75rem;
}

.tasklist .avatar img {
  object-fit: cover;
  border: 2px solid #e9ecef;
}

/* Close button positioning */
.notification-item .btn-close {
  margin-top: 0.125rem;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}

.notification-item:hover .btn-close {
  opacity: 0.6;
}

.notification-item .btn-close:hover {
  opacity: 1;
}

/* Text truncation for long content */
.notification-item .text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Empty state styling */
#tasklist-empty {
  padding: 40px 20px;
}

#tasklist-empty i {
  opacity: 0.3;
  margin-bottom: 12px;
}

#tasklist-empty p {
  color: #6c757d;
  font-size: 0.875rem;
}

/* Improved notification panel scrollbar */
.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar {
  width: 6px;
}

.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.dropdown-menu[style*="overflow-y: auto"]::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* Fix DataTable FixedHeader duplicate content issue - Completely hide all floating headers */
table.dataTable.fixedHeader-floating,
table.dataTable.fixedHeader-locked,
.fixedHeader-floating,
.fixedHeader-locked,
.dataTables_wrapper .fixedHeader-floating,
.dataTables_wrapper .fixedHeader-locked,
.fixedHeader-floating table,
.fixedHeader-locked table,
[class*="fixedHeader"] {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  position: absolute !important;
  left: -9999px !important;
}

/* Remove any duplicate header elements completely */
table.dataTable.fixedHeader-floating thead,
table.dataTable.fixedHeader-locked thead,
.fixedHeader-floating thead,
.fixedHeader-locked thead,
.fixedHeader-floating tbody,
.fixedHeader-locked tbody {
  display: none !important;
}

/* Use sticky header for all DataTables instead of fixedHeader plugin */
.dataTables_wrapper .table thead th,
table.dataTable thead th,
.table thead th {
  position: sticky !important;
  top: 0 !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  z-index: 100 !important;
  border-bottom: 2px solid #3e5072 !important;
  box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.1) !important;
}

/* Ensure table container doesn't cause overflow issues */
.dataTables_wrapper {
  overflow-x: auto;
  position: relative;
}


.table-bordered {
  margin-bottom: 15px;
}


button.btn.btn-secondary.buttons-excel.buttons-html5 {
  padding: 0px 5px !important;
  line-height: 0.75 !important;
  border-radius: 5px;
}

button.btn.btn-secondary.buttons-excel.buttons-html5:hover {
  background-color: var(--primary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-primary-color) !important;
}


.table th,
.table td {
  border-top: 1px solid #eceef0 !important;
}


table.table-bordered.dataTable tbody th,
table.table-bordered.dataTable tbody td {
  border-bottom-width: 0;
  vertical-align: middle;
  border-radius: 0px !important;
  border: 0px solid #ccc !important;
  border-top: 1px solid #ebe9e9 !important;
}

table.dataTable.erp-zebra.table-striped>tbody>tr.odd>* {
  box-shadow: inset 0 0 0 9999px #f9fafb;
}


button.btn.btn-secondary.buttons-excel.buttons-html5 {
  padding: 0.25rem 0.5rem !important;
  font-size: 0.875rem;
  line-height: 1 !important;
  border-radius: 0.21rem;
  background-color: var(--secondary-color) !important;
  border-color: var(--primary-color) !important;
  color: var(--font-secondary-color) !important;

}

.dataTables_length label {
  margin-bottom: 10px;

}

.dataTables_filter label {
  margin-bottom: 10px !important;
}





select.custom-select.custom-select-sm.form-control.form-control-sm {
  padding: 0px 15px !important;
}

/* Dark Theme Styles */
body.dark-theme {
  --dark-bg-primary: #0f172a;
  --dark-bg-secondary: #1e293b;
  --dark-bg-card: #1e293b;
  --dark-text-primary: #f1f5f9;
  --dark-text-secondary: #cbd5e1;
  --dark-border-color: #334155;
  --dark-shadow: rgba(0, 0, 0, 0.3);

  background-color: var(--dark-bg-primary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .card,
body.dark-theme .card-body,
body.dark-theme .card-header {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .content-body {
  background-color: var(--dark-bg-primary) !important;
}

/* body.dark-theme .table thead th, */
body.dark-theme .table,

body.dark-theme .table tbody td {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-tertiary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .table tbody td {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

.dark-theme table.dataTable.erp-zebra.table-striped>tbody>tr.odd>* {
  box-shadow: inset 0 0 0 9999px #1e293b;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .table-striped.erp-zebra tbody tr:nth-of-type(odd) {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-theme .form-control,
body.dark-theme .form-select,
body.dark-theme input,
body.dark-theme select,
body.dark-theme textarea {
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .navbar,
body.dark-theme .header-navbar {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .dropdown-menu {
  background-color: var(--dark-bg-card) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .dropdown-item {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .dropdown-item:hover {
  background-color: var(--dark-bg-secondary) !important;
}

body.dark-theme .breadcrumb {
  background-color: transparent !important;
}

body.dark-theme .breadcrumb-item a {
  color: var(--dark-text-secondary) !important;
}

body.dark-theme .text-muted {
  color: var(--dark-text-secondary) !important;
}

body.dark-theme .badge {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .modal-content {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .modal-header,
body.dark-theme .modal-body,
body.dark-theme .modal-footer {
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .list-group-item {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
}

body.dark-theme .alert {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

/* Theme Toggle Button */
.theme-toggle-btn {
  background: transparent;
  border: none;
  color: var(--dark-text-primary);
  cursor: pointer;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.3s ease;
  font-size: 1.286rem;
}

.theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

body.dark-theme .theme-toggle-btn {
  color: var(--dark-text-primary);
}

body.dark-theme .theme-toggle-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

html .dark-theme .content .content-wrapper {
  padding: 0 !important;
}

.dark-theme .navbar-light .navbar-nav .nav-link {
  color: rgb(212 221 223);
}

.dark-theme .table thead th {
  background: var(--gradient2) !important;
  color: var(--dark-text-primary);


}

.dark-theme button.btn.btn-secondary.results-from {
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
}

.dark-theme .col-form-label {
  color: var(--dark-text-primary) !important;
}

.dark-theme input#head-customerbox {
  background: none !important;
}

a.nav-link.theme-toggle-btn:hover {
  background: none;
}

.dark-theme .bg-gradient-directional-blue {
  background: var(--gradient2) !important;
}



.dark-theme .app-card-advanced {
  background: var(--dark-bg-card);
  border: 2px solid var(--dark-border-color);

}


.dark-theme .stat-card {
  box-shadow: 0 2px 10px rgb(0 0 0 / 15%);
  background: var(--dark-bg-card);
  border: none;
}

.dark-theme .table-responsive {
  box-shadow: none;
}

body.dark-theme .card-body-dark {
  background-color: transparent !important;
}

body.dark-theme h1,
body.dark-theme h2,
body.dark-theme h3,
body.dark-theme h4,
body.dark-theme h5,
body.dark-theme h6 {
  color: var(--dark-text-primary) !important;
}

body.dark-theme p {
  color: var(--dark-text-secondary) !important;
}

body.dark-theme .app-card-advanced i {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .list-group-item-action::before {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .quick-access-container .card-title.text-primary,
body.dark-theme .quick-access-container .card-title.text-success,
body.dark-theme .quick-access-container .card-title.text-info {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .card-category,
body.dark-theme .card-value {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .text-success {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .stat-icon-box {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .btn-secondary {
  background-color: var(--dark-bg-secondary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .btn-primary {
  background-color: var(--dark-text-primary) !important;
  border-color: var(--dark-border-color) !important;
  color: var(--primary-color) !important;
}

body.dark-theme .settings-box a {
  color: var(--dark-text-primary) !important;
}

/* opening balance */
.opening-balance-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ob-category-block {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #ddd;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.ob-category-block .header-row {
  display: flex;
  align-items: center;
  background: #e9ecef;
  font-weight: bold;
  text-transform: uppercase;
  cursor: pointer;
  padding: 12px 16px;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  border-bottom: 1px solid #dee2e6;
  font-size: 0.95rem;
}

.ob-category-block .header-row .ob-cell {
  padding: 0;
}

.ob-accounts-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #fff;
}

.ob-accounts-inner .ob-inner-header {
  display: flex;
  align-items: center;
  padding: 8px 0 10px 0;
  border-bottom: 1px solid #dee2e6;
  margin-bottom: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: #6c757d;
}

.ob-accounts-inner .ob-inner-header .ob-account {
  flex: 1;
}

.ob-accounts-inner .ob-inner-header .ob-debit,
.ob-accounts-inner .ob-inner-header .ob-credit {
  width: 140px;
  min-width: 140px;
  text-align: right;
  padding-left: 12px;
}

.ob-accounts-inner .ob-row {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  border-radius: 6px;
  padding: 10px 10px;
  margin: 0;
  min-height: 44px;
}

.ob-accounts-inner .ob-row .ob-account {
  flex: 1;
  font-size: 0.9rem;
  color: #212529;
}

.ob-accounts-inner .ob-row .ob-debit,
.ob-accounts-inner .ob-row .ob-credit {
  width: 140px;
  min-width: 140px;
  padding-left: 16px;
}

.ob-accounts-inner .ob-row .debit-input,
.ob-accounts-inner .ob-row .credit-input {
  text-align: right;
  border-radius: 6px;
  border: 1px solid #ced4da;
  padding: 6px 10px;
}

.opening-balance-list .ob-header-row {
  display: flex;
  align-items: center;
  background: #f8f9fa;
  font-weight: bold;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid #dee2e6;
  font-size: 0.85rem;
}

.opening-balance-list .ob-header-row .ob-cell {
  padding: 0;
}

.opening-balance-list .ob-header-row .ob-account {
  flex: 1;
}

.opening-balance-list .ob-header-row .ob-debit,
.opening-balance-list .ob-header-row .ob-credit {
  width: 140px;
  min-width: 140px;
  text-align: right;
  padding-left: 12px;
}

.opening-balance-list .ob-footer {
  display: flex;
  align-items: center;
  font-weight: bold;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 0;
}

.opening-balance-list .ob-footer .ob-account {
  flex: 1;
}

.opening-balance-list .ob-footer .ob-debit,
.opening-balance-list .ob-footer .ob-credit {
  width: 140px;
  min-width: 140px;
  text-align: right;
  padding-left: 12px;
}

.opening-balance-list #balance_msg_row {
  padding: 10px 16px;
  margin: 0;
}

.opening-balance-list #balance_msg_row .ob-cell {
  padding: 0;
}

.custom-item-background {
  background-color: #eee !important;
  border-bottom: 1px solid #ddd !important;
}

.disable-approvals {
  pointer-events: none;
  cursor: not-allowed;
}

.attendance-btn-header {

  display: flex !important;
  align-items: center;

  gap: 6px;

  padding: 5px 10px !important;

  border-radius: 5px;

  transition: 0.3s ease;

  color: #ffffff !important;

  text-decoration: none !important;
}

.attendance-btn-header:hover {

  background: rgba(255, 255, 255, 0.12);
}

.attendance-icon {

  width: 15px !important;
  height: 15px !important;

  color: #ffffff !important;
}

#attendance-text {

  color: #ffffff;

  font-size: 0.857rem;

  font-weight: 600;

  line-height: 1;
}

.clocked-in {

  background: #28a745;
}

.clocked-out {

  background: #dc3545;
}

.attendance-status-box {

  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 20px;
  margin-left: 15px;
  font-size: 0.929rem;
  font-weight: 600;
  transition: 0.3s ease;
}

.header-attendance-status {
  background: #ffffff;
  margin-left: 0;
  margin-right: 8px;
  padding: 4px 12px;
  white-space: nowrap;
}

.attendance-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

/* PRESENT */

.present-status {
  color: #28a745;
}

.present-status .attendance-dot {
  background: #28a745;
}

/* NOT PRESENT */
.absent-status {
  color: #dc3545;
}

.absent-status .attendance-dot {

  background: #dc3545;
}

@keyframes pulse {

  0% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.5);
  }

  70% {
    box-shadow: 0 0 0 8px rgba(40, 167, 69, 0);
  }

  100% {
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0);
  }
}
/* Shared print-fit rule for wide report tables (printThis.js flow).
   Add class="print-fit-table" to any <table> that needs its columns
   shrunk to fit the printed page instead of getting clipped. */
@media print {
    @page {
        size: landscape;
        margin: 8mm;
    }
    table.print-fit-table {
        table-layout: fixed;
        width: 100%;
        font-size: 0.75rem;
        border-collapse: collapse;
    }
    table.print-fit-table tfoot {
        display: none;
    }
    table.print-fit-table th,
    table.print-fit-table td {
        white-space: normal;
        word-break: break-word;
        padding: 2px 4px;
    }
    
}

/* AI recommendations tab (quote create) — matches cloudbizerp_ai_upsell */
.recomentaion-btn {
  position: fixed;
  right: -75px;
  top: calc(50% + 160px);
  transform: rotate(-90deg);
  z-index: 99999 !important;
  padding: 14px 20px;
}

.responsive-filter-icon{
  display: none !important;
}

/* Filter-panel select2 tags + range inputs (invoices, credit notes listing search).
   Long labels overflow narrow filter columns, which clips the theme's float:right
   remove button out of view. Pin it and truncate instead. */
.whole_filter_section .select2-container--default .select2-selection--multiple .select2-selection__choice {
  position: relative;
  max-width: 100%;
  padding-right: 20px !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.whole_filter_section .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  float: none;
  margin-left: 0;
}
.whole_filter_section .range-row {
  display: flex;
  align-items: center;
}
.whole_filter_section .range-row-sep {
  padding: 0 8px;
  color: #6b6f82;
}
/* Active / Inactive toggle switch (active_toggle_switch() helper) */
.cust-switch { position: relative; display: flex; align-items: center; height: 43px; padding-left: 50px; }
.cust-switch input[type=checkbox] { position: absolute; left: 0; top: 50%; width: 42px; height: 24px; margin: -12px 0 0 0; opacity: 0; z-index: 2; cursor: pointer; }
.cust-switch label { position: relative; margin: 0; cursor: pointer; font-size: 1rem; font-weight: 500; color: #444; }
.cust-switch label::before { content: ""; position: absolute; left: -50px; top: 50%; width: 42px; height: 24px; margin-top: -12px; border-radius: 24px; background: #c8ccd2; transition: background .2s; }
.cust-switch label::after { content: ""; position: absolute; left: -47px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); transition: transform .2s; }
.cust-switch input:checked ~ label::before { background: #27ae60; }
.cust-switch input:checked ~ label::after { transform: translateX(18px); }
.cust-switch .st-on { display: none; color: #27ae60; }
.cust-switch .st-off { color: #c0392b; }
.cust-switch input:checked ~ label .st-on { display: inline; }
.cust-switch input:checked ~ label .st-off { display: none; }

/* Customers list: hide the DataTables sizing header inside the scroll body (it showed as a second heading row) */
#clientstable_wrapper .dataTables_scrollBody thead { visibility: collapse; }

/* A rejected record has nothing left to reject: hide the Reject pill on any page that shows the
   "Rejected — Update to reopen and continue." banner (.alert-rejected). */
body:has(.alert-rejected) .breadcrumb-approvals li:has(> a.cancel_level),
body:has(.alert-rejected) .breadcrumb-approvals li:has(> a.cancel_approval_level),
body:has(.alert-rejected) .breadcrumb-approvals li:has(> a.dynamic_cancel_level),
body:has(.record-sent-marker) .breadcrumb-approvals li:has(> a.cancel_level),
body:has(.record-sent-marker) .breadcrumb-approvals li:has(> a.cancel_approval_level),
body:has(.record-sent-marker) .breadcrumb-approvals li:has(> a.dynamic_cancel_level) {
  display: none !important;
}
/* Same for a record that has already been Sent (Quote, Purchase Order, Purchase Return, Credit Note, RFQ). */


/* Leads list: keep status pills on one line.
   No display here: the shared chip rule makes these inline-flex so the label
   is centred in the pill, and this ID selector outranked it - the text sat
   ~3.5px above centre on this page only, which is why the leads list looked
   different from every other list. nowrap is all this rule ever needed. */
#customerleads td span[class^="st-"] {
  white-space: nowrap;
}

/* ===== Bell dropdown: modern activity / comment cards ===== */
li.dropdown-notification #messagecount + .dropdown-menu {
  width: 400px;
  max-width: 94vw;
  border-radius: 14px !important;
  overflow: hidden;
  box-shadow: 0 12px 40px rgba(16, 24, 40, .18) !important;
}
li.dropdown-notification #messagecount + .dropdown-menu > li:nth-child(2) {
  max-height: min(70vh, 540px) !important;
  overflow-y: auto;
  scrollbar-width: thin;
}
.tasklist a.bc,
.tasklist a.bc:hover { text-decoration: none; }
.tasklist a.bc {
  position: relative;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 20px;
  min-height: 84px;
  box-sizing: border-box;
  color: #1f2937;
  border-bottom: 1px solid #eef1f5;
  background: #fff;
  transition: background-color .15s ease, transform .15s ease;
}
.tasklist a.bc:hover { background: #f6f9fd; }
.tasklist a.bc:last-child { border-bottom: 0; }
.bc-avatar {
  flex: 0 0 40px;
  width: 40px; height: 40px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 1.143rem;
  background: linear-gradient(135deg, var(--bc-accent, #1e88e5), var(--bc-accent2, #42a5f5));
  box-shadow: 0 4px 10px rgba(30, 136, 229, .25);
}
.bc-body { flex: 1 1 auto; min-width: 0; }
.bc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.bc-title {
  font-size: .875rem; font-weight: 600; line-height: 1.35; color: #111827;
  overflow-wrap: anywhere;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-title b { font-weight: 600; }
.bc-title span { font-weight: 400; color: #6b7280; }
.bc-badge {
  flex: 0 0 auto;
  font-size: .66rem; font-weight: 600; letter-spacing: .02em;
  padding: 2px 8px; border-radius: 999px;
  color: var(--bc-accent, #1e88e5);
  background: color-mix(in srgb, var(--bc-accent, #1e88e5) 12%, #fff);
  white-space: nowrap;
}
.bc-sub {
  display: flex; align-items: center; gap: 6px;
  margin-top: 3px; font-size: .78rem; line-height: 1.4; color: #6b7280;
  overflow-wrap: anywhere;
}
.bc-sub i { flex: 0 0 14px; width: 14px; text-align: center; font-size: .78rem; line-height: 1; color: #9ca3af; }
.bc-quote {
  margin-top: 8px; padding: 8px 10px;
  font-size: .8rem; line-height: 1.45; color: #374151;
  background: #f5f3ff; border-radius: 8px;
  border-left: 3px solid var(--bc-accent, #7e57c2);
  overflow-wrap: anywhere; white-space: normal;
}
.bc-quote span {
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.bc-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.bc-chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: .7rem; font-weight: 500; line-height: 1;
  padding: 4px 8px; border-radius: 999px;
  color: #4b5563; background: #f3f4f6;
}
.bc-chip i { width: 12px; text-align: center; font-size: .72rem; line-height: 1; }
.bc-chip.is-high { color: #b91c1c; background: #fee2e2; }
.bc-chip.is-medium { color: #b45309; background: #fef3c7; }
.bc-chip.is-low { color: #15803d; background: #dcfce7; }
.bc-time { display: block; margin-top: 8px; font-size: .7rem; color: #9ca3af; }
body.dark-theme .tasklist a.bc { background: #1f2937; color: #e5e7eb; border-bottom-color: #2d3748; }
body.dark-theme .tasklist a.bc:hover { background: #243244; }
body.dark-theme .bc-title { color: #f3f4f6; }
body.dark-theme .bc-quote { background: #2a2f45; color: #d1d5db; }
body.dark-theme .bc-chip { background: #2d3748; color: #cbd5e1; }

/* Bell dropdown: header, cards and footer share the same 20px side gutter */
li.dropdown-notification #messagecount + .dropdown-menu > li:first-child,
li.dropdown-notification #messagecount + .dropdown-menu > li.task-notification-footer {
  padding-left: 20px !important;
  padding-right: 20px !important;
}
.tasklist a.bc .bc-avatar { margin: 0; }

/* Bell card icon: keep the glyph perfectly centred inside its tile */
.tasklist a.bc .bc-avatar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.tasklist a.bc .bc-avatar i {
  display: block;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 1.286rem;
  line-height: 40px;
  height: 40px;
  text-align: center;
  vertical-align: middle;
}

/* Bell dropdown readability: taller scroll area (the inline 250px clipped cards mid-row),
   a sensible width, and cards that never get squeezed or cut inside the list. */
li.dropdown-notification #messagecount + .dropdown-menu {
  width: 420px;
  max-width: calc(100vw - 24px) !important;
}
li.dropdown-notification #messagecount + .dropdown-menu > li:first-child {
  max-height: min(70vh, 460px) !important;
  overscroll-behavior: contain;
}
.tasklist a.bc { flex-shrink: 0; }
.tasklist a.bc .bc-time { margin-top: 6px; }

/* ==========================================================================
   Dashboard stat cards - one look across every dashboard
   --------------------------------------------------------------------------
   CRM, Sales, Stock, Accounts, Counter Sales and Data & Reports all build
   their tiles from the same .stat-card markup, but older rules left them with
   mixed icon colours, right-aligned text and uneven heights (a card without a
   comparison line sat shorter than its neighbours). Appended here so these
   rules win on source order without fighting specificity.
   ========================================================================== */
.stat-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  height: 100%;
  min-height: 104px;
  padding: 1rem;
  border: 1px solid #e3e9f0;
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
  transition: transform .25s ease, box-shadow .25s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(16, 24, 40, 0.10);
}

/* Equal heights: the column stretches, so the link and card must fill it. */
.stat-link {
  display: block;
  height: 100%;
}

/* One accent for every icon, whatever bg-* class the older markup carries. */
.stat-card .stat-icon-box,
.stat-card .stat-icon-box[class*="bg-"] {
  position: static;
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #e7f3f1 !important;
  color: #0b5c57 !important;
  font-size: 1.429rem;
  box-shadow: none;
}

.stat-card .card-content-custom {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  margin: 0;
  text-align: left;
}

.stat-card .card-category {
  margin-bottom: 2px;
  font-size: 0.929rem;
  font-weight: 500;
  line-height: 1.25;
  color: #64748b;
}

.stat-card .card-value {
  font-size: 1.857rem;
  font-weight: 700;
  line-height: 1.15;
  color: #0f2b3d;
}

/* The comparison line is pinned to the bottom so cards with one and cards
   reading "All time total" still line up. The markup sets font-size and
   margin-top inline, hence !important on those two. */
.stat-card .card-comparison {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto !important;
  padding-top: 10px;
  font-size: 0.786rem !important;
}

.stat-card .card-comparison .text-success,
.stat-card .card-comparison .text-danger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.786rem;
  font-weight: 600;
  white-space: nowrap;
}

.stat-card .card-comparison .text-success {
  background: #e7f6ee;
  color: #1a7f4b !important;
}

.stat-card .card-comparison .text-danger {
  background: #fdecec;
  color: #c93a3a !important;
}

.stat-card .card-comparison .text-muted {
  color: #94a3b8 !important;
}

/* Dark theme: same shapes, surfaces from the theme's own variables. */
body.dark-theme .stat-card {
  background: var(--dark-bg-card);
  border-color: var(--dark-border-color);
}

body.dark-theme .stat-card .stat-icon-box,
body.dark-theme .stat-card .stat-icon-box[class*="bg-"] {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .stat-card .card-comparison .text-success {
  background: rgba(26, 127, 75, 0.18);
  color: #5fd49a !important;
}

body.dark-theme .stat-card .card-comparison .text-danger {
  background: rgba(201, 58, 58, 0.18);
  color: #ff8f8f !important;
}

/* ==========================================================================
   Columns control (DataTables colVis) — a dropdown anchored under the button,
   each column a checkbox row. DataTables toggles .active on a visible
   column's entry, so the box is drawn from that class and can never fall out
   of step with the table.
   ========================================================================== */
.dt-button-collection.erp-colvis-menu {
  min-width: 220px;
  max-height: 60vh;
  padding: 6px;
  overflow-y: auto;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}

.dt-button-collection.erp-colvis-menu .dt-button {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: 6px 10px 6px 32px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: 0.929rem;
  text-align: left;
}

.dt-button-collection.erp-colvis-menu .dt-button:hover {
  background: #f1f5f9 !important;
}

/* The box itself */
.dt-button-collection.erp-colvis-menu .dt-button::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 10px;
  width: 15px;
  height: 15px;
  transform: translateY(-50%);
  border: 1px solid #cbd5e1;
  border-radius: 3px;
  background: #fff;
}

/* Ticked when the column is showing */
.dt-button-collection.erp-colvis-menu .dt-button.active::before {
  border-color: var(--primary-color);
  background: var(--primary-color);
}

.dt-button-collection.erp-colvis-menu .dt-button.active::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 15px;
  width: 4px;
  height: 8px;
  margin-top: -1px;
  transform: translateY(-50%) rotate(45deg);
  border: solid #fff;
  border-width: 0 2px 2px 0;
}

body.dark-theme .dt-button-collection.erp-colvis-menu {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-card);
}

body.dark-theme .dt-button-collection.erp-colvis-menu .dt-button {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .dt-button-collection.erp-colvis-menu .dt-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Columns button: icon only, with a dot when this page's table is not showing
   every column (see updateColvisIndicator in datatable-export.js). */
.buttons-colvis.buttons-colvis-icon {
  position: relative;
  padding-right: 0.6rem;
  padding-left: 0.6rem;
}

.buttons-colvis.buttons-colvis-icon.has-custom-columns::before {
  content: '';
  position: absolute;
  top: 2px;
  right: 2px;
  width: 7px;
  height: 7px;
  border: 1px solid #fff;
  border-radius: 50%;
  background: #f59e0b;
}

/* Tile figure settings button, beside the quick-filter row's filter icon. */
.erp-period-stats-wrap {
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
}

.erp-period-stats-menu {
  z-index: 1060;
}

/* Export dropdown (Excel / CSV / PDF) — same panel as the Columns list, but
   plain rows: these are actions, not toggles, so no checkbox. */
.dt-button-collection.erp-export-menu {
  min-width: 170px;
  padding: 6px;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(16, 24, 40, 0.14);
}

.dt-button-collection.erp-export-menu .dt-button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 7px 12px;
  border: 0 !important;
  border-radius: 6px;
  background: transparent !important;
  box-shadow: none !important;
  color: #334155 !important;
  font-size: 0.929rem;
  text-align: left;
}

.dt-button-collection.erp-export-menu .dt-button:hover {
  background: #f1f5f9 !important;
}

.dt-button-collection.erp-export-menu .dt-button i {
  width: 16px;
  margin-right: 8px;
  text-align: center;
  color: #64748b;
}

body.dark-theme .dt-button-collection.erp-export-menu {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-card);
}

body.dark-theme .dt-button-collection.erp-export-menu .dt-button {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .dt-button-collection.erp-export-menu .dt-button:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Table search box: rounded like the other inputs in the app (the Suppliers
   filter and the header search both use a 10px radius). */
/* .form-control-sm (added by the DataTables Bootstrap integration) sets a
   2-3px radius, hence the !important here. */
.dataTables_wrapper .dataTables_filter input,
.dataTables_filter input[type="search"],
.dataTables_filter input {
  border-radius: 10px !important;
  border: 1px solid var(--border-color);
  padding: 5px 12px !important;
  height: auto;
}

.dataTables_filter input:focus {
  border-color: #cbd5e1;
  box-shadow: none;
  outline: none;
}

/* The two right-edge slide-out tabs (History / Activity Tracker, and AI
   Recommendations) are both rotated -90deg and pinned to the right rail, but
   were anchored differently — one from its right edge, one from its centre —
   so their boxes landed on top of each other. Same rail, same origin, and the
   AI tab offset below the first by more than half of either label's length. */
.recomentaion-btn {
  right: 15px;
  top: calc(50% + 175px);
  transform: translateY(-50%) rotate(-90deg);
  transform-origin: right center;
}

/* Quote action bar: the buttons on the left sat in a 25% column (col-lg-3)
   that is narrower than they are, so they broke across three lines while the
   status column beside them was usually empty. On a wide screen let each
   group take the width it needs and push the right-hand group to the edge. */
@media (min-width: 992px) {
  .quote-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .quote-action-bar > [class*="col-lg-"] {
    width: auto;
    max-width: none;
    flex: 0 0 auto;
  }

  /* The status / message column takes whatever is left between them. */
  .quote-action-bar > .col-lg-6 {
    flex: 1 1 auto;
    min-width: 0;
  }

  .quote-action-bar > .col-lg-3:last-child {
    margin-left: auto;
    text-align: right;
  }
}

/* Even spacing between the action buttons, wherever they wrap. */
.quote-action-bar .btn {
  margin-right: 4px;
}

/* ==========================================================================
   Table toolbar — one look for every list page: light outlined buttons on the
   left of a divider, a search field with its own magnifier on the right.
   Applies to any DataTable, not just the ones using the shared export module.
   ========================================================================== */
.dataTables_wrapper .dt-buttons .btn,
.dataTables_wrapper .dt-buttons .dt-button {
  height: 36px;
  margin-right: 6px;
  padding: 0 0.85rem;
  border: 1px solid var(--border-color) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #334155 !important;
  font-size: 0.929rem;
  line-height: 34px;
  box-shadow: none !important;
}

.dataTables_wrapper .dt-buttons .btn:hover,
.dataTables_wrapper .dt-buttons .dt-button:hover {
  border-color: #cbd5e1 !important;
  background: #f8fafc !important;
  color: var(--primary-color) !important;
}

.dataTables_wrapper .dt-buttons .btn i,
.dataTables_wrapper .dt-buttons .dt-button i {
  margin-right: 5px;
  color: #64748b;
}

/* "Results from: …" reads as a caption, not a control. */
.results-and-buttons-wrapper .results-from,
.dataTables_wrapper .results-from {
  color: #64748b;
  font-size: 0.929rem;
}

/* Divider between the actions and the search box. */
.dataTables_wrapper .dataTables_filter {
  position: relative;
  padding-left: 14px;
  border-left: 1px solid var(--border-color);
}

/* The "Search:" caption is replaced by a magnifier drawn inside the field, so
   the label text is collapsed rather than removed (DataTables owns it). */
.dataTables_wrapper .dataTables_filter label {
  position: relative;
  margin-bottom: 0 !important;
  font-size: 0;
}

.dataTables_wrapper .dataTables_filter input {
  padding-left: 32px !important;
  font-size: 0.929rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 10px center;
}

/* Keep "Show N entries" in the same visual family. */
.dataTables_wrapper .dataTables_length select {
  height: 36px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}

body.dark-theme .dataTables_wrapper .dt-buttons .btn,
body.dark-theme .dataTables_wrapper .dt-buttons .dt-button {
  border-color: var(--dark-border-color) !important;
  background: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
}

/* Rows-per-page now lives inside the Columns panel, so the toolbar's own
   length select is hidden — but only on tables that got the panel. */
.dataTables_wrapper.has-erp-table-settings .dataTables_length {
  display: none;
}

.erp-colvis-menu .erp-cols-length {
  padding: 2px 10px 0;
}

.erp-colvis-menu .erp-cols-length > .erp-cols-heading:first-child {
  margin-top: 0;
}

.erp-colvis-menu .erp-cols-heading {
  margin-bottom: 4px;
  /* Headings after the first need air above them, or "Display" sits right on
     the control above it. */
  margin-top: 12px;
  color: #94a3b8;
  font-size: 0.786rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.erp-colvis-menu .erp-cols-heading-columns {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border-color);
}

.erp-colvis-menu .erp-cols-length select {
  width: 100%;
  height: 32px;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  font-size: 0.929rem;
}

body.dark-theme .erp-colvis-menu .erp-cols-length select {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-card);
  color: var(--dark-text-primary);
}

/* Customer category badge (Consultant, Integrators …): a soft label on its own
   line under the customer name, instead of a solid chip beside it. The colour
   comes from the category and is set inline by customer_category_badge(). */
.customer-type-badge {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
  margin-top: 3px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  line-height: 1.5;
  white-space: nowrap;
}

/* ==========================================================================
   Status chips (Level 1, Waiting, Updated, Canceled, Sent …) — tinted rather
   than solid, and a size down, so a row of them reads as labels beside the
   data instead of blocks of colour. Selectors are the same groups the solid
   colours above use, so every status keeps its own hue.
   ========================================================================== */
.st-Assigned,
.st-Closed,
.st-Draft,
.st-Grey,
.st-Invoiced,
.st-Open,
.st-Printed,
.st-Processing,
.st-Recurring,
.st-Reverted,
.st-Reviewed,
.st-Solved,
.st-Stopped,
.st-Waiting,
.st-accepted,
.st-active,
.st-approved,
.st-assign-for-delivery,
.st-assigned,
.st-canceled,
.st-cancelled,
.st-categorized,
.st-closed,
.st-converted,
.st-created,
.st-customer_approved,
.st-draft,
.st-due,
.st-dummy,
.st-expired,
.st-expiring,
.st-expiring-today,
.st-firstlevel,
.st-fullyconverted,
.st-inactive,
.st-initialized,
.st-inprogress,
.st-matched,
.st-not-converted,
.st-open,
.st-partial,
.st-partiallypaid,
.st-partialy-converted,
.st-pending,
.st-received,
.st-rejected,
.st-reverted,
.st-secondlevel,
.st-sent,
.st-updated,
.st-waitingapproval {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.571rem;        /* 22px - fixed, so every chip is the same box */
  padding: 0.1rem 0.714rem 0 !important;
  border-radius: 999px;
  font-size: 0.786rem !important;
  font-weight: 600;
  line-height: 1 !important;
  white-space: nowrap;
  vertical-align: middle;
}

.st-Closed,
.st-Stopped,
.st-closed,
.st-due,
.st-inactive,
.st-waitingapproval {
  background-color: #fbecec !important;
  color: #b03636 !important;
  border: 1px solid #f3d6d6;
}

.st-Assigned,
.st-Reverted,
.st-assigned,
.st-canceled,
.st-cancelled,
.st-expired,
.st-rejected,
.st-reverted {
  background-color: #fbeaea !important;
  color: #9b2c2c !important;
  border: 1px solid #f1d2d2;
}

.st-Draft,
.st-Grey,
.st-Processing,
.st-Solved,
.st-Waiting,
.st-draft,
.st-dummy {
  background-color: #f1f3f5 !important;
  color: #5b6673 !important;
  border: 1px solid #e2e6ea;
}

.st-initialized {
  background-color: #f5f4e3 !important;
  color: #6f6b28 !important;
  border: 1px solid #e8e5c4;
}

.st-Open,
.st-Printed,
.st-Recurring,
.st-created,
.st-expiring,
.st-firstlevel,
.st-open,
.st-pending,
.st-updated {
  background-color: #e9f0f8 !important;
  color: #35679f !important;
  border: 1px solid #d2e0ef;
}

.st-assign-for-delivery,
.st-customer_approved,
.st-inprogress {
  background-color: #f0ebfe !important;
  color: #6a46d8 !important;
  border: 1px solid #ded2fb;
}

.st-Invoiced,
.st-Reviewed,
.st-accepted,
.st-active,
.st-approved,
.st-converted,
.st-fullyconverted,
.st-matched,
.st-received,
.st-secondlevel,
.st-sent {
  background-color: #e9f6ec !important;
  color: #1f7a37 !important;
  border: 1px solid #cdebd6;
}

.st-categorized,
.st-expiring-today,
.st-not-converted,
.st-partial,
.st-partiallypaid,
.st-partialy-converted {
  background-color: #fdf3e4 !important;
  color: #b06a10 !important;
  border: 1px solid #f6e2c4;
}

/* "Results from …" is a DataTables button like the others, but its inner
   <label> carries Bootstrap's bottom margin, so it sat taller than its
   neighbours and ran into the table header. Flatten it and give the whole
   toolbar row a little breathing space above the table. */
/* NB: DataTables' Bootstrap styling renders these as .btn, and a custom
   button (like "Results from …") may carry no .dt-button class at all, so
   both have to be named here. */
.dataTables_wrapper .dt-buttons .dt-button,
.dataTables_wrapper .dt-buttons .btn {
  margin-bottom: 8px;
}

.dataTables_wrapper .dt-buttons .results-from {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.dataTables_wrapper .dt-buttons .results-from label,
.dataTables_wrapper .dt-buttons .results-from strong {
  margin: 0;
  line-height: 1;
}

/* The Columns button is an icon, so the caret crowds it. Buttons appends
   .dropdown-toggle to every collection button and Bootstrap draws the arrow
   from that class's ::after - the Export button keeps its own. */
.buttons-colvis.buttons-colvis-icon.dropdown-toggle::after,
.buttons-colvis.buttons-colvis-icon .dt-down-arrow {
  display: none !important;
}

/* Quick-filter tiles (Today / Week / … / CUSTOM) read as one segmented
   control, so only the ends are rounded — matching the dashboard's period
   buttons. CUSTOM is the last <button> in the group; the hidden custom-date
   panel that follows it is a <div>, hence :last-of-type. */
.filter-group .navsearch {
  border-radius: 0;
}

.filter-group .navsearch:first-of-type {
  border-radius: 10px 0 0 10px;
}

.filter-group .navsearch:last-of-type {
  border-radius: 0 10px 10px 0;
}

/* Status / notice messages: tinted like the rest of the UI instead of solid
   theme-colour blocks. Same palette as the status chips. */
.alert-info {
  border: 1px solid #d2e0ef !important;
  background-color: #e9f0f8 !important;
  color: #35679f !important;
}

.alert-success {
  border: 1px solid #cdebd6 !important;
  background-color: #e9f6ec !important;
  color: #1f7a37 !important;
}

.alert-danger {
  border: 1px solid #f3d6d6 !important;
  background-color: #fbecec !important;
  color: #b03636 !important;
}

.alert-warning {
  border: 1px solid #f6e2c4 !important;
  background-color: #fdf3e4 !important;
  color: #b06a10 !important;
}

.alert {
  border-radius: 10px;
}

/* ==========================================================================
   Tables — one treatment everywhere: a quiet header, hairline row rules, a
   hover tint and consistent spacing, so every list page reads the same.
   ========================================================================== */
.dataTables_wrapper table.dataTable,
.table-container1 table.table,
.card-body > table.table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.929rem;
  color: #334155;
}

.dataTables_wrapper table.dataTable thead th,
.table-container1 table.table thead th,
.card-body > table.table thead th {
  padding: 10px 12px;
  border-top: 0;
  border-bottom: 1px solid var(--border-color);
  background: #f8fafc;
  color: #475569;
  font-size: 0.857rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  vertical-align: middle;
}

.dataTables_wrapper table.dataTable tbody td,
.table-container1 table.table tbody td,
.card-body > table.table tbody td {
  padding: 9px 12px;
  border-top: 0;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
}

.dataTables_wrapper table.dataTable tbody tr:hover > td,
.table-container1 table.table tbody tr:hover > td {
  background-color: #f8fafc;
}

.dataTables_wrapper table.dataTable tbody tr:last-child > td {
  border-bottom: 0;
}

/* Sort arrows: muted until the column is the active sort. */
.dataTables_wrapper table.dataTable thead th.sorting::after,
.dataTables_wrapper table.dataTable thead th.sorting_asc::after,
.dataTables_wrapper table.dataTable thead th.sorting_desc::after {
  opacity: 0.45;
}

.dataTables_wrapper table.dataTable thead th.sorting_asc,
.dataTables_wrapper table.dataTable thead th.sorting_desc {
  color: var(--primary-color);
}

.dataTables_wrapper table.dataTable thead th.sorting_asc::after,
.dataTables_wrapper table.dataTable thead th.sorting_desc::after {
  opacity: 1;
}

.dataTables_wrapper table.dataTable thead th.sorting {
  cursor: pointer;
}

body.dark-theme .dataTables_wrapper table.dataTable thead th,
body.dark-theme .table-container1 table.table thead th {
  border-bottom-color: var(--dark-border-color);
  background: rgba(255, 255, 255, 0.04);
  color: var(--dark-text-primary);
}

body.dark-theme .dataTables_wrapper table.dataTable tbody td {
  border-bottom-color: var(--dark-border-color);
}

body.dark-theme .dataTables_wrapper table.dataTable tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   Dark mode for the pieces restyled above. Several of them set light colours
   with !important (they had to, to beat theme rules), so these carry the same
   weight. Colours come from the theme's own dark variables, so one change to
   those still drives everything.
   ========================================================================== */

/* --- Dashboard header: identity, entity filter, period buttons ----------- */
body.dark-theme .dashboard-head-icon {
  background: rgba(255, 255, 255, 0.08);
  color: var(--dark-text-primary);
}

body.dark-theme .dashboard-head-text h1 {
  color: var(--dark-text-primary);
}

body.dark-theme .dashboard-head-sub,
body.dark-theme .dashboard-head-entity-label {
  color: var(--dark-text-secondary);
}

body.dark-theme .dashboard-head-select > i {
  color: var(--dark-text-secondary);
}

body.dark-theme .dashboard-head-select select.form-control,
body.dark-theme .dashboard-head-select .select2-container .select2-selection {
  border-color: var(--dark-border-color) !important;
  background: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .dashboard-head-select .select2-container .select2-selection__rendered,
body.dark-theme .dashboard-head-select .select2-container .select2-selection__placeholder {
  color: var(--dark-text-secondary);
}

body.dark-theme .dashboard-head-periods .filter-btn.btn-secondary {
  border-color: var(--dark-border-color) !important;
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-secondary) !important;
}

body.dark-theme .dashboard-head-periods .filter-btn.btn-secondary:hover,
body.dark-theme .dashboard-head-periods .filter-btn.btn-secondary:focus {
  border-color: var(--dark-border-color) !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--dark-text-primary) !important;
}

/* The selected period needs to stand out against dark neighbours. */
body.dark-theme .dashboard-head-periods .filter-btn.btn-primary {
  border-color: #38bdf8 !important;
  background-color: #0ea5e9 !important;
  color: #04212b !important;
}

body.dark-theme .dashboard-custom-range-menu {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-card);
}

body.dark-theme .dashboard-custom-range-menu .form-group input[type="date"] {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

/* --- Quick-filter tiles (Today / Week / … on list pages) ----------------- */
body.dark-theme .filter-group .navsearch {
  border-color: var(--dark-border-color) !important;
  background-color: var(--dark-bg-card) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .filter-group .navsearch.navbtn-active {
  background-color: #0ea5e9 !important;
  color: #04212b !important;
}

body.dark-theme .filter-day-value,
body.dark-theme .filter-day-count {
  color: var(--dark-text-secondary);
}

/* --- Left sidebar (Menu Position = Left) --------------------------------- */
/* Not scoped to .erp-left-menu: app-menu.js rebuilds the menu and that class
   can come and go, which left the sidebar white mid-session. */
body.dark-theme .main-menu,
body.dark-theme .main-menu.menu-light,
body.dark-theme .main-menu .navigation,
body.dark-theme .main-menu .main-menu-content {
  background: var(--dark-bg-card) !important;
  color: var(--dark-text-primary);
}

body.dark-theme .main-menu .navigation > li > a,
body.dark-theme .main-menu .navigation li > ul a {
  color: var(--dark-text-primary) !important;
}

body.dark-theme .main-menu .navigation > li > a:hover,
body.dark-theme .main-menu .navigation li > ul a:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* Flyout submenus hang outside the sidebar, so they need the surface too. */
body.dark-theme .main-menu .navigation li > ul {
  border: 1px solid var(--dark-border-color);
  background: var(--dark-bg-card) !important;
}

/* --- Table toolbar and search ------------------------------------------- */
body.dark-theme .dataTables_wrapper .dataTables_filter {
  border-left-color: var(--dark-border-color);
}

body.dark-theme .dataTables_wrapper .dataTables_filter input,
body.dark-theme .dataTables_wrapper .dataTables_length select {
  border-color: var(--dark-border-color);
  background-color: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-theme .dataTables_wrapper table.dataTable tbody td {
  color: var(--dark-text-primary);
}

/* One header shade: vendor and theme rules tint individual cells (sorted
   column, aligned columns), which made the row look striped. */
body.dark-theme .dataTables_wrapper table.dataTable thead th,
body.dark-theme .dataTables_wrapper table.dataTable thead td,
body.dark-theme .table-container1 table.table thead th {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--dark-text-primary) !important;
  border-bottom-color: var(--dark-border-color) !important;
}

/* --- Alerts -------------------------------------------------------------- */
body.dark-theme .alert-info {
  border-color: rgba(56, 189, 248, 0.35) !important;
  background-color: rgba(56, 189, 248, 0.12) !important;
  color: #7dd3fc !important;
}

body.dark-theme .alert-success {
  border-color: rgba(34, 197, 94, 0.35) !important;
  background-color: rgba(34, 197, 94, 0.12) !important;
  color: #86efac !important;
}

body.dark-theme .alert-danger {
  border-color: rgba(248, 113, 113, 0.35) !important;
  background-color: rgba(248, 113, 113, 0.12) !important;
  color: #fca5a5 !important;
}

body.dark-theme .alert-warning {
  border-color: rgba(245, 158, 11, 0.35) !important;
  background-color: rgba(245, 158, 11, 0.12) !important;
  color: #fcd34d !important;
}

/* --- Activity tracker ---------------------------------------------------- */
body.dark-theme .trk-dash .trk-hero,
body.dark-theme .trk-dash .trk-kpi,
body.dark-theme .trk-dash .trk-card,
body.dark-theme .trk-dash .trk-filters {
  border-color: var(--dark-border-color) !important;
  background: var(--dark-bg-card) !important;
  color: var(--dark-text-primary);
}

body.dark-theme .trk-dash .trk-hero-title,
body.dark-theme .trk-dash .trk-kpi .kpi-value {
  color: var(--dark-text-primary);
}

body.dark-theme .trk-dash .trk-hero-eyebrow,
body.dark-theme .trk-dash .trk-hero-sub,
body.dark-theme .trk-dash .trk-kpi .kpi-label {
  color: var(--dark-text-secondary);
}

body.dark-theme .trk-dash .trk-hero .trk-range,
body.dark-theme .trk-dash .trk-hero .trk-btn {
  border-color: var(--dark-border-color);
  background: var(--dark-bg-secondary);
  color: var(--dark-text-primary);
}

body.dark-theme .trk-dash .trk-hero .trk-range button {
  border-right-color: var(--dark-border-color);
  color: var(--dark-text-secondary);
}

body.dark-theme .trk-dash .trk-hero .trk-range button.is-active {
  background: #0ea5e9;
  color: #04212b;
}

/* ==========================================================================
   Buttons — one system for the whole app.
   Shape and size are padding-based (not fixed heights) so icon buttons, <a>
   buttons and inputs all stay aligned. Variant colours carry !important
   because the rules they replace further up this file use it too.
   ========================================================================== */
.btn {
  padding: 0.45rem 1rem;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 0.929rem;
  font-weight: 600;
  line-height: 1.35;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.btn-sm,
.btn-group-sm > .btn {
  padding: 0.3rem 0.75rem;
  border-radius: 7px;
  font-size: 0.857rem;
}

.btn-lg,
.btn-group-lg > .btn {
  padding: 0.6rem 1.25rem;
  border-radius: 9px;
  font-size: 1rem;
}

.btn:focus,
.btn.focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 50, 60, 0.15);
}

/* Primary: the one action a screen wants you to take. */
.btn-primary {
  border-color: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  border-color: #014b5b !important;
  background-color: #014b5b !important;
  color: #fff !important;
}

/* Secondary: everything else - quiet, outlined, never a dark slab. */
.btn-secondary {
  border-color: var(--border-color) !important;
  background-color: #fff !important;
  color: #334155 !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
  color: var(--primary-color) !important;
}

.btn-success {
  border-color: var(--success-color) !important;
  background-color: var(--success-color) !important;
  color: #fff !important;
}

.btn-success:hover,
.btn-success:focus {
  border-color: #15803d !important;
  background-color: #15803d !important;
}

.btn-danger {
  border-color: var(--danger-color) !important;
  background-color: var(--danger-color) !important;
  color: #fff !important;
}

.btn-danger:hover,
.btn-danger:focus {
  border-color: #b91c1c !important;
  background-color: #b91c1c !important;
}

.btn-warning {
  border-color: #d97706 !important;
  background-color: #d97706 !important;
  color: #fff !important;
}

.btn-warning:hover,
.btn-warning:focus {
  border-color: #b45309 !important;
  background-color: #b45309 !important;
}

.btn-info {
  border-color: #0284c7 !important;
  background-color: #0284c7 !important;
  color: #fff !important;
}

.btn-info:hover,
.btn-info:focus {
  border-color: #0369a1 !important;
  background-color: #0369a1 !important;
}

/* Outline variants keep the same palette, without the fill. */
.btn-outline-primary {
  border-color: var(--primary-color) !important;
  background-color: transparent !important;
  color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.btn-outline-secondary {
  border-color: var(--border-color) !important;
  background-color: #fff !important;
  color: #334155 !important;
}

.btn-outline-secondary:hover {
  border-color: #cbd5e1 !important;
  background-color: #f8fafc !important;
  color: var(--primary-color) !important;
}

.btn-outline-danger {
  border-color: var(--danger-color) !important;
  background-color: transparent !important;
  color: var(--danger-color) !important;
}

.btn-outline-danger:hover {
  background-color: var(--danger-color) !important;
  color: #fff !important;
}

.btn:disabled,
.btn.disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* Icon-only buttons stay square rather than stretching. */
.btn > i:only-child {
  margin: 0;
}

/* Dark mode: the filled variants keep their colour, the quiet ones follow the
   dark surfaces. */
body.dark-theme .btn-secondary,
body.dark-theme .btn-outline-secondary {
  border-color: var(--dark-border-color) !important;
  background-color: var(--dark-bg-secondary) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .btn-secondary:hover,
body.dark-theme .btn-outline-secondary:hover {
  background-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--dark-text-primary) !important;
}

body.dark-theme .btn-primary {
  border-color: #0ea5e9 !important;
  background-color: #0ea5e9 !important;
  color: #04212b !important;
}

body.dark-theme .btn-primary:hover,
body.dark-theme .btn-primary:focus {
  border-color: #38bdf8 !important;
  background-color: #38bdf8 !important;
}

body.dark-theme .btn:focus,
body.dark-theme .btn.focus {
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.25);
}

/* Quick-filter tiles: a segmented control, so neighbouring borders overlap
   into one line instead of sitting side by side as a 2px seam. */
.filter-group .navsearch + .navsearch {
  margin-left: -1px;
}

.filter-group .navsearch:hover,
.filter-group .navsearch:focus,
.filter-group .navsearch.navbtn-active {
  position: relative;
  z-index: 1;
}

/* The selected tile is filled, so everything inside it has to invert - the
   counts carry their own status colours, which are unreadable on the fill. */
.filter-group .navsearch.navbtn-active {
  border-color: var(--primary-color) !important;
  background-color: var(--primary-color) !important;
  color: #fff !important;
}

.filter-group .navsearch.navbtn-active .filter-day-count,
.filter-group .navsearch.navbtn-active .filter-day-count div,
.filter-group .navsearch.navbtn-active .filter-day-value,
.filter-group .navsearch.navbtn-active .filter-day-value span,
.filter-group .navsearch.navbtn-active .filter-day-value strong,
.filter-group .navsearch.navbtn-active .filter-day-value .filter-danger,
.filter-group .navsearch.navbtn-active .filter-day-value .filter-info,
.filter-group .navsearch.navbtn-active .filter-day-value .filter-success,
.filter-group .navsearch.navbtn-active .filter-day-value .filter-assigned {
  color: #fff !important;
}

.filter-group .navsearch.navbtn-active .filter-day-value.border-top {
  border-top-color: rgba(255, 255, 255, 0.25) !important;
}

body.dark-theme .filter-group .navsearch.navbtn-active {
  border-color: #0ea5e9 !important;
  background-color: #0ea5e9 !important;
  color: #04212b !important;
}

body.dark-theme .filter-group .navsearch.navbtn-active .filter-day-count,
body.dark-theme .filter-group .navsearch.navbtn-active .filter-day-count div,
body.dark-theme .filter-group .navsearch.navbtn-active .filter-day-value,
body.dark-theme .filter-group .navsearch.navbtn-active .filter-day-value span,
body.dark-theme .filter-group .navsearch.navbtn-active .filter-day-value strong {
  color: #04212b !important;
}

/* ==========================================================================
   Typography — a named scale instead of one-off sizes.
   The theme sets html { font-size: 14px }, so 1rem = 14px and every size
   below is expressed against that. Raising or lowering the root now rescales
   the whole app in proportion.
   ========================================================================== */
:root {
  --fs-xs: 0.75rem;      /* 10.5px — badges, pills, counters */
  --fs-sm: 0.857rem;     /* 12px   — captions, table labels, help text */
  --fs-base: 0.929rem;   /* 13px   — buttons, table cells, form controls */
  --fs-md: 1rem;         /* 14px   — body copy */
  --fs-lg: 1.143rem;     /* 16px   — card titles, section headings */
  --fs-xl: 1.286rem;     /* 18px   — page sub-headings */
  --fs-2xl: 1.571rem;    /* 22px   — panel headings */
  --fs-3xl: 1.857rem;    /* 26px   — page titles */

  --lh-tight: 1.25;
  --lh-normal: 1.5;
}

body {
  font-size: var(--fs-md);
  line-height: var(--lh-normal);
}

h1, .h1 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  font-weight: 600;
}

h2, .h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-tight);
  font-weight: 600;
}

h3, .h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-tight);
  font-weight: 600;
}

h4, .h4,
.card-title {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
  font-weight: 600;
}

h5, .h5 {
  font-size: var(--fs-md);
  font-weight: 600;
}

h6, .h6 {
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.02em;
}

small,
.small,
.text-muted small,
.form-text {
  font-size: var(--fs-sm);
}

label,
.col-form-label {
  font-size: var(--fs-sm);
}

/* Controls and data: one size, so a form and the table under it agree. */
.btn,
.form-control,
.custom-select,
.dataTables_wrapper table.dataTable tbody td,
.select2-container .select2-selection__rendered {
  font-size: var(--fs-base);
}

.dataTables_wrapper table.dataTable thead th,
.table thead th {
  font-size: var(--fs-sm);
}

.breadcrumb,
.breadcrumb-item {
  font-size: var(--fs-sm);
}

.badge,
.customer-type-badge {
  font-size: var(--fs-xs);
}

/* The table-settings and export panels are plain dropdowns, like the
   dashboards' Custom date filter - DataTables' dimming overlay behind them is
   out of place. It still catches the outside click that closes the panel, so
   it is made invisible rather than removed. */
.dt-button-background {
  background: transparent !important;
}

/* Striping is owned by the settings panel. Many tables carry Bootstrap's
   .table-striped (and DataTables' own .stripe/.display), which shaded rows
   whether the toggle was on or not - switch that off unless zebra is on.
   Selected rows keep their highlight. */
table.table-striped:not(.erp-zebra) tbody tr:nth-of-type(odd):not(.selected) > td,
table.dataTable.stripe:not(.erp-zebra) tbody tr.odd:not(.selected) > td,
table.dataTable.display:not(.erp-zebra) tbody tr.odd:not(.selected) > td {
  background-color: transparent;
}

/* Alternating row shading, toggled from the table settings panel.
   The theme's own striping rules (the .dataTable nth-child(odd) background,
   the .table-striped inset box-shadow and Bootstrap's --bs-table-striped-bg)
   are all scoped to .erp-zebra too, so they shade the same odd rows this does
   and nothing shades a table whose toggle is off. */
table.dataTable.erp-zebra tbody tr:nth-child(odd) > td {
  background-color: #f6f8fa;
}

body.dark-theme table.dataTable.erp-zebra tbody tr:nth-child(odd) > td {
  background-color: rgba(255, 255, 255, 0.04);
}

/* Bootstrap paints its own stripe from this variable, which no background
   declaration on the cell can outrank, so it is emptied while zebra is off. */
.table-striped:not(.erp-zebra) {
  --bs-table-striped-bg: transparent !important;
  --bs-table-striped-color: inherit;
}

/* Hover stays visible over the stripes, so it is declared after them. */
.dataTables_wrapper table.dataTable tbody tr:hover > td,
table.dataTable.erp-zebra tbody tr:hover > td {
  background-color: #eef2f7;
}

body.dark-theme .dataTables_wrapper table.dataTable tbody tr:hover > td,
body.dark-theme table.dataTable.erp-zebra tbody tr:hover > td {
  background-color: rgba(255, 255, 255, 0.07);
}

/* The zebra switch reads as a checkbox row like the column entries. */
.erp-colvis-menu .erp-cols-zebra {
  margin-bottom: 4px;
}

/* Group headings inside module menus — small uppercase labels that separate
   a long dropdown into sections. They are list items, so they also survive
   app-menu.js converting the bar into the left sidebar's flyouts. */
.dropdown-menu .menu-group-heading,
.main-menu .navigation li > ul .menu-group-heading {
  list-style: none;
}

.dropdown-menu .menu-group-heading .dropdown-header,
.main-menu .navigation li > ul .menu-group-heading .dropdown-header {
  margin: 0;
  padding: 0.5rem 1.25rem 0.25rem;
  color: #94a3b8;
  font-size: 0.714rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* No rule above the first group, a hairline above the rest. */
.dropdown-menu .menu-group-heading + li .dropdown-item {
  margin-top: 0;
}

.dropdown-menu .menu-group-heading:not(:first-child) .dropdown-header,
.main-menu .navigation li > ul .menu-group-heading:not(:first-child) .dropdown-header {
  margin-top: 0.25rem;
  border-top: 1px solid var(--border-color);
  padding-top: 0.5rem;
}

body.dark-theme .dropdown-menu .menu-group-heading .dropdown-header,
body.dark-theme .main-menu .navigation li > ul .menu-group-heading .dropdown-header {
  color: var(--dark-text-secondary);
}

body.dark-theme .dropdown-menu .menu-group-heading:not(:first-child) .dropdown-header {
  border-top-color: var(--dark-border-color);
}

/* ------------------------------------------------------------------
   Dashboard tile group heading ("Chart & GL master data")
   The old markup stacked a .mb-2 column on a .mb-2 heading, which left
   ~50px of dead space between the label and the tiles it labels.
   ------------------------------------------------------------------ */
.dash-group-title {
    margin-bottom: 0;
}

.dash-group-title h6 {
    margin: 0.25rem 0 0.5rem;
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #6c757d;
}

body.dark-theme .dash-group-title h6 {
    color: var(--dark-text-secondary, #cbd5e1);
}

/* Some list pages also pull DataTables' Bootstrap 5 integration stylesheet
   from the CDN, which stripes with an inset box-shadow
   (table.dataTable.table-striped > tbody > tr.odd > *) rather than a
   background, so the background rules above never reached it. Clear that
   shadow unless the settings panel has zebra on; selected rows keep theirs,
   because the same property draws their highlight. */
table.dataTable.table-striped:not(.erp-zebra) > tbody > tr.odd:not(.selected) > *,
table.dataTable.table-striped:not(.erp-zebra) > tbody > tr:nth-of-type(odd):not(.selected) > * {
  box-shadow: none !important;
}

/* ------------------------------------------------------------------
   Amount Range filter (the jQuery UI slider the list pages' Search bar
   carries). It was rendering with the stock jQuery UI theme - a tall
   grey gradient bar with square handles - which sat oddly beside the
   themed inputs next to it. Restyled as a thin track with round handles,
   and vertically centred against those inputs.
   ------------------------------------------------------------------ */
.price-range-block {
    margin-top: 0 !important;
    padding: 1.3rem 0.5rem 0;
}

.price-filter-range.ui-slider,
.price-filter-range.ui-slider-horizontal {
    height: 4px;
    border: 0;
    border-radius: 4px;
    background: var(--border-color, #e2e8f0);
    background-image: none;
    box-shadow: none;
    /* the theme puts overflow:hidden on .ui-widget-content, which clipped the
       handles down to the height of the track */
    overflow: visible;
}

.price-filter-range .ui-slider-range {
    border-radius: 4px;
    background: var(--primary-color, #00323c);
    background-image: none;
}

.price-filter-range .ui-slider-handle {
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    margin-left: -7px;
    border: 2px solid var(--primary-color, #00323c);
    border-radius: 50%;
    background: #fff;
    background-image: none;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.2);
    cursor: pointer;
    outline: none;
}

.price-filter-range .ui-slider-handle:hover,
.price-filter-range .ui-slider-handle.ui-state-active {
    box-shadow: 0 0 0 4px rgba(0, 50, 60, 0.12);
}

/* The "Amount between … and …" caption reads as help text, not a label. */
.price-range-block .search-results-block {
    padding: 0;
    margin-top: 0.5rem;
    font-size: var(--fs-xs, 0.75rem);
    font-weight: 400;
    line-height: 1.4;
    color: #6c757d;
}

body.dark-theme .price-filter-range.ui-slider,
body.dark-theme .price-filter-range.ui-slider-horizontal {
    background: var(--dark-border-color, #334155);
}

body.dark-theme .price-filter-range .ui-slider-handle {
    background: var(--dark-bg-secondary, #1e293b);
}

body.dark-theme .price-range-block .search-results-block {
    color: var(--dark-text-secondary, #cbd5e1);
}

/* ------------------------------------------------------------------
   Status chips: one box for every status.
   The chip class is built from the status text ("st-" . $row->status),
   so a multi-word status such as "Level 1" or "Converted To Quote" ends
   up as several classes and misses the enumerated .st-* list above -
   those chips kept their colour but lost the shared box, which is why
   the padding and height varied down a column. Match any st-* class
   inside a table cell instead. Scoped to cells so the status banners on
   the record pages, which reuse the same class names on an alert, are
   left alone.
   ------------------------------------------------------------------ */
td [class^="st-"],
td [class*=" st-"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 1.571rem;
  padding: 0.1rem 0.714rem 0 !important;
  border-radius: 999px;
  font-size: 0.786rem !important;
  font-weight: 600;
  line-height: 1 !important;
  white-space: nowrap;
  vertical-align: middle;
}

/* Status chip colours - five tones, one meaning each, so the same kind of
   state always reads the same way down a column:
     grey   nothing has happened yet        (draft, dummy, initialized)
     blue   in progress                     (open, created, assigned, …)
     amber  waiting on someone / attention  (waiting, pending, partial, …)
     green  finished well                   (approved, converted, sent, …)
     red    finished badly / overdue        (rejected, cancelled, expired, …)
   Before this there were two near-identical reds, "Waiting" was grey while
   "Waiting" for approval was red, "Pending" was blue, "Assigned" shared the
   cancelled red, and a lone olive and purple sat outside the scheme. */

/* Grey - neutral */
.st-Draft,
.st-Grey,
.st-draft,
.st-dummy,
.st-initialized {
  background-color: #f1f3f5 !important;
  color: #5b6673 !important;
  border: 1px solid #e2e6ea;
}

/* Blue - in progress */
.st-Assigned,
.st-Open,
.st-Printed,
.st-Processing,
.st-Recurring,
.st-assign-for-delivery,
.st-assigned,
.st-created,
.st-firstlevel,
.st-inprogress,
.st-open,
.st-updated {
  background-color: #e9f0f8 !important;
  color: #35679f !important;
  border: 1px solid #d2e0ef;
}

/* Amber - waiting on someone, or wanting attention */
.st-Waiting,
.st-categorized,
.st-expiring,
.st-expiring-today,
.st-not-converted,
.st-partial,
.st-partiallypaid,
.st-partialy-converted,
.st-pending,
.st-waitingapproval {
  background-color: #fdf3e4 !important;
  color: #b06a10 !important;
  border: 1px solid #f6e2c4;
}

/* Green - finished well */
.st-Invoiced,
.st-Reviewed,
.st-Solved,
.st-accepted,
.st-active,
.st-approved,
.st-converted,
.st-customer_approved,
.st-fullyconverted,
.st-matched,
.st-received,
.st-secondlevel,
.st-sent {
  background-color: #e9f6ec !important;
  color: #1f7a37 !important;
  border: 1px solid #cdebd6;
}

/* Red - finished badly, or overdue */
.st-Closed,
.st-Reverted,
.st-Stopped,
.st-canceled,
.st-cancelled,
.st-closed,
.st-due,
.st-expired,
.st-inactive,
.st-rejected,
.st-reverted {
  background-color: #fbeaea !important;
  color: #9b2c2c !important;
  border: 1px solid #f1d2d2;
}

/* The chips used to carry min-width: 3.5rem. Anything shorter than that was
   stretched to the floor and the spare space split either side, so "Level 1"
   showed noticeably wider gaps around its text than "Converted To Quote",
   which only ever got the padding. Removing the floor leaves every chip with
   the same 0.714rem either side, whatever the word is. */

/* Chip text was riding the top of the pill on every label without a
   descender ("Level 1", "Created"), while one with a j or y ("Rejected")
   looked right. Quicksand's metrics are lopsided - 12.00 ascent against
   3.00 descent - so centring the line box leaves the capitals about 0.9px
   high and lets the descender space below them pass as padding. The 0.1rem
   top padding in the chip rule above pushes the content box down by half
   that, which puts the cap-height block on the centre line whatever the
   word is (measured: within 0.11px for Rejected, Level 1, Created and
   Partialy Paid). Change it with the font, not on its own.  */

/* ------------------------------------------------------------------
   Action cells: keep the buttons on one line.
   The Actions column holds two or three small buttons separated by
   whitespace, so a narrow column broke them onto separate rows and the
   row grew taller than the ones around it. Any cell that holds buttons
   directly now refuses to wrap between them; the table already scrolls
   sideways when it runs out of room.
   ------------------------------------------------------------------ */
table.dataTable td:has(> .btn),
table.dataTable td:has(> .btn-group),
table.dataTable td:has(> form > .btn),
table td.action-cell {
  white-space: nowrap;
}

table.dataTable td > .btn,
table td.action-cell > .btn {
  white-space: nowrap;
  vertical-align: middle;
}

table.dataTable td > .btn + .btn,
table td.action-cell > .btn + .btn {
  margin-left: 0.25rem;
}

/* Why those chip metrics are !important:
   app-assets/ltr/core/colors/palette-gradient.css carries

     .st-paid, .st-due, .st-partial, .st-canceled, .st-rejected,
     .st-pending, .st-accepted .st-Recurring, .st-Stopped {
         padding: 5px 10px !important; font-size: 11px !important; }

   which hits a *subset* of the statuses. Those chips were drawn at
   5px/10px/11px while every other chip used the rule above, so one column
   held two different box sizes and two different text baselines - "Rejected"
   sat ~0.7px lower than "Created" beside it. Nothing but !important beats
   an !important, hence the match. If that theme rule is ever deleted, these
   can go back to plain declarations. */

/* ===========================================================================
   Appended: the list toolbar — filters behind a Search button, search box right
   =========================================================================== */

/* The toolbar is one row: Search / Print / Export on the left, DataTables'
   own search box pushed to the right-hand end opposite them. */
.dataTables_wrapper .dt-buttons-target.erp-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* The toolbar is a <div> of its own on most lists, and a <span> inside
       an existing controls row on the few that build their own. Take the
       full width in the first case and the remaining width in the second,
       so margin-left:auto has something to push the search box against. */
    flex: 1 1 auto;
}
div.dataTables_wrapper > div.dt-buttons-target.erp-toolbar,
.dataTables_wrapper div.dt-buttons-target.erp-toolbar {
    width: 100%;
}
.dataTables_wrapper .dt-buttons-target.erp-toolbar > .dataTables_filter.erp-toolbar-right {
    margin-left: auto;
    margin-bottom: 0;
    text-align: right;
    float: none;
}
.dataTables_wrapper .dt-buttons-target.erp-toolbar > .dataTables_filter.erp-toolbar-right label {
    margin-bottom: 0;
}

/* The filter panel is the ERP's own .whole_filter_section / .filter_list_section,
   styled further up this file — nothing is added for it here. */

/* Narrow screens: the search box goes back under the buttons rather than
   being squeezed against them. */
@media (max-width: 767px) {
    .dataTables_wrapper .dt-buttons-target.erp-toolbar > .dataTables_filter.erp-toolbar-right {
        margin-left: 0;
        width: 100%;
        text-align: left;
        margin-top: 6px;
    }
}

/* The List|Calendar switch lives in the table's own toolbar, which sits inside
   the list view. Switching to the calendar therefore cannot simply hide that
   view, or it would hide the only way back — so the table and its controls go,
   and the toolbar stays with just the switch on it. */
.erp-calendar-mode .dataTables_wrapper > *:not(.dt-buttons-target) { display: none !important; }
.erp-calendar-mode .dt-buttons-target > *:not(.erp-view-tabs) { display: none !important; }
.erp-calendar-mode .table-container { border: 0; padding: 0; }

/* In the toolbar the switch is one control among several, not a form field. */
.dt-buttons-target.erp-toolbar > .erp-view-tabs { display: inline-flex !important; }
.dt-buttons-target.erp-toolbar > .erp-view-tabs .btn { white-space: nowrap; }

/* Pages whose card header also holds action buttons on the right (Bulk upload, approval message): the level badges sit on
   their own row just under the header instead of on top of those buttons. */
@media (min-width: 992px) {
  .breadcrumb-approvals.breadcrumb-approvals-below {
    top: 52px;
    right: 24px;
  }
  .card-header:has(.breadcrumb-approvals-below) {
    padding-bottom: 2.4rem;
  }
}

/* Bell dropdown: stays inside the window, rounded outer border, and the list scrolls on its own with room for the scrollbar
   so the first notification is fully visible and nothing on the right is hidden. */
li.dropdown-notification #messagecount + .dropdown-menu {
  width: 400px;
  max-width: calc(100vw - 16px);
  border-radius: 16px !important;
  border: 1px solid #e5e9f0 !important;
  overflow: hidden;
  padding: 6px 0 !important;
}
li.dropdown-notification #messagecount + .dropdown-menu > li:first-child {
  padding: 0 !important;
  max-height: min(70vh, 520px) !important;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-gutter: stable;
  overflow-anchor: none;
  /* The theme makes this <li> a centred flex box; a list taller than the box then overflows upward, past the top, where
     it can't be scrolled to (the first cards were cut off). Plain block layout scrolls from the top. */
  display: block !important;
  align-items: flex-start !important;
}
li.dropdown-notification #messagecount + .dropdown-menu > li:first-child .tasklist a.bc:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}