/*
* demo.css
* File include item demo only specific css only
******************************************************************************/
@font-face {
  font-family: Changa-Regular;
  src: url(./../../assets/fonts/changa/Changa-Regular.ttf);
}
body {
  font-family: 'Changa-Regular' !important;
}
.breadcrumb-theme {
  font-family: 'Changa-Regular';
  box-shadow: 0 2px 14px rgba(38,60,85,.16);
  border-radius: 5px;
  padding: 6px 15px !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 18px;
  background-color: #fff;
}
.btn {
  font-family: 'Changa-Regular' !important;
}
.light-style .menu .app-brand.demo {
  height: 64px;
}

.dark-style .menu .app-brand.demo {
  height: 64px;
}

.app-brand-logo.demo {
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
  display: -ms-flexbox;
  display: flex;
  width: 30px;
  height: 30px;
}

.app-brand-logo.demo svg {
  width: 1.7rem;
  height: 1.7rem;
}

.app-brand-text.demo {
  font-size: 1.75rem;
  letter-spacing: -0.45px;
}

/* ! For .layout-navbar-fixed added fix padding top tpo .layout-page */
.layout-navbar-fixed .layout-wrapper:not(.layout-without-menu) .layout-page {
  padding-top: 64px !important;
}

/* Navbar page z-index issue solution */
.content-wrapper .navbar {
  z-index: auto;
}

/*
* Content
******************************************************************************/

.demo-blocks > * {
  display: block !important;
}

.demo-inline-spacing > * {
  margin: 1rem 0.375rem 0 0 !important;
}

/* ? .demo-vertical-spacing class is used to have vertical margins between elements. To remove margin-top from the first-child, use .demo-only-element class with .demo-vertical-spacing class. For example, we have used this class in forms-input-groups.html file. */
.demo-vertical-spacing > * {
  margin-top: 1rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-lg > * {
  margin-top: 1.875rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-lg.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.demo-vertical-spacing-xl > * {
  margin-top: 5rem !important;
  margin-bottom: 0 !important;
}
.demo-vertical-spacing-xl.demo-only-element > :first-child {
  margin-top: 0 !important;
}

.rtl-only {
  display: none !important;
  text-align: left !important;
  direction: ltr !important;
}

[dir='rtl'] .rtl-only {
  display: block !important;
}

/*
* Layout demo
******************************************************************************/

.layout-demo-wrapper {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  margin-top: 1rem;
}
.layout-demo-placeholder img {
  width: 900px;
}
.layout-demo-info {
  text-align: center;
  margin-top: 1rem;
}
 a.nav-link.active {
   color: #5080d6 !important;
   font-weight: bold !important;
 }
 .layout-content-navbar .layout-navbar {
  padding: 0;
  background-color: #fff !important;
 }
 .bg-menu-theme.layout-menu  {
  background-color: #ffffff !important;
  color: #677788;
}
td p {
  margin-bottom: 3px;
}
td .btn-group {
  gap: 5px;
}
td .btn-group .btn {
  width: 37px;
  padding: 0;
  border-radius: 5px !important;
  height: 37px;
}
td .btn-group .btn-outline-primary {
  border-color: #5a8dee;
  background: #5a8dee;
  color: #fff;
}
td .btn-group .btn-outline-warning {
  background: #fdac41;
  border-color: #fdac41;
  color: #fff;
}
td .btn-group .btn-outline-danger {
  background: #ff5b5c;
  border-color: #ff5b5c;
  color: #fff;
}
.card.card-list {
  overflow: hidden;
}
.card > .navbar {
  padding: 0;
}
.card > .navbar .container-fluid {
  padding: 0;
}
.card > .navbar.bg-light .navbar-nav>.nav-link {
  min-width: 100px;
  text-align: center;
}
.card > .navbar.bg-light .navbar-nav>.nav-link.active {
  color: #fff !important;
  background-color: #5a8dee !important;
}

.container-form-input {
  margin: 0 auto;
  font-family: 'Changa-Regular';
}

.container-form-input .did-floating-label-content {
  position: relative;
  margin-bottom: 20px;
}

.container-form-input .did-floating-label-content .did-floating-label {
  color: #1e4c82;
  font-size: 13px;
  font-weight: normal;
  position: absolute;
  pointer-events: none;
  /* left:15px; */
  right: 15px;
  top: 11px;
  padding: 0 5px;
  background: #fff;
  transition: 0.4s ease all;
  -moz-transition: 0.4s ease all;
  -webkit-transition: 0.4s ease all;
}

.container-form-input .did-floating-label-content .did-floating-input,
.container-form-input .did-floating-label-content .did-floating-select {
  font-size: 12px;
  display: block;
  width: 100%;
  height: 36px;
  padding: 0 15px;
  background: #fff;
  color: #323840;
  border: 2px solid #d5e1f1;
  border-radius: 4px;
  box-sizing: border-box;
  text-align: right;
}

.container-form-input .did-floating-label-content .did-floating-input.large-input,
.container-form-input .did-floating-label-content .did-floating-select.large-input {
  height: 45px;
}

.container-form-input .did-floating-label-content .did-floating-input:focus,
.container-form-input .did-floating-label-content .did-floating-select:focus {
  outline: none;
}

.container-form-input .did-floating-label-content .did-floating-input:focus~.did-floating-label,
.container-form-input .did-floating-label-content .did-floating-select:focus~.did-floating-label {
  top: -8px !important;
  font-size: 13px;
}

.container-form-input .did-floating-label-content select.did-floating-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.container-form-input .did-floating-label-content select.did-floating-select::-ms-expand {
  display: none;
}

.container-form-input .did-floating-label-content .did-floating-input:disabled {
  /* background-color: #D2D2D2; */
}

.container-form-input .did-floating-label-content .did-floating-input:-moz-read-only {
  /* background-color: #D2D2D2 !important; */
}

.container-form-input .did-floating-label-content .did-floating-input:read-only {
  /* background-color: #D2D2D2 !important; */
}

.container-form-input .did-floating-label-content .did-floating-input:disabled~.did-floating-label {
  /* background-color: #D2D2D2; */
}

.container-form-input .did-floating-label-content .did-floating-input:-moz-read-only~.did-floating-label {
  /* background-color: #D2D2D2; */
}

.container-form-input .did-floating-label-content .did-floating-input:read-only~.did-floating-label {
  /* background-color: #D2D2D2; */
}
.light-style .select2-container--default .select2-selection--single .select2-selection__rendered {
  font-size: 14px;
  line-height: 40px;
}
.container-form-input .did-floating-label-content .did-floating-input:not(:-moz-placeholder-shown)~.did-floating-label {
  top: -8px;
  font-size: 13px;
}

.container-form-input .did-floating-label-content .did-floating-input:not(:placeholder-shown)~.did-floating-label {
  top: -8px;
  font-size: 13px;
}

.container-form-input .did-floating-label-content .did-floating-select:not([value=""]):valid~.did-floating-label {
  top: -8px;
  font-size: 12px;
  /* right: 10px; */
}

.container-form-input .did-floating-label-content .did-floating-select[value=""]:focus~.did-floating-label {
  top: 11px;
  font-size: 13px;
}

.container-form-input .did-floating-label-content .did-floating-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%23003d71'/%3E%3C/svg%3E%0A");
  background-position: left 15px top 50%;
  background-repeat: no-repeat;
}

.container-form-input .did-floating-label-content .did-floating-select:has(:checked)~.did-floating-label,
.container-form-input .did-floating-label-content .did-floating-label.active {
  top: -8px !important;
  font-size: 12px;
  /* right: 10px; */
}

.container-form-input .did-floating-label-content .input-group-append {
  display: flex;
  align-items: center;
  margin-left: -1px;
}

.container-form-input .did-floating-label-content .input-group-text {
  display: flex;
  align-items: center;
  font-weight: 400;
  height: 34px;
  color: #323840;
  padding: 0 5px 0 20px;
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  border: 1px solid #3d85d8;
  border-radius: 4px 0 0 4px;
  border-right: none;
}

.container-form-input .did-floating-label-content .icon-start {
  position: absolute;
  left: 3%;
  top: 40%;
  font-size: 0.8em;
}

.container-form-input .did-floating-label-content:has(.large-input) .did-floating-label {
  top: -8px;
}

.container-form-input .did-floating-label-content:has(.large-input) .did-floating-input:not(:-moz-placeholder-shown)~.did-floating-label {
  top: -8px !important;
  font-size: 13px;
}

.container-form-input .did-floating-label-content:has(.large-input) .did-floating-input:not(:placeholder-shown)~.did-floating-label {
  top: -8px !important;
  font-size: 13px;
}

.container-form-input .did-floating-label-content small {
  position: absolute;
  left: 20px;
  top: 30%;
  font-size: 14px;
  font-family: ChangaRegular;
}

.container-form-input .did-error-input {
  /* .did-floating-label{
      font-weight: 600;
      color:#9d3b3b;
  } */
}

.container-form-input .did-error-input .did-floating-input,
.container-form-input .did-error-input .did-floating-select {
  border: 2px solid #9d3b3b;
  color: #9d3b3b;
}

.container-form-input .did-error-input .did-floating-select:not([multiple]):not([size]) {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='6' viewBox='0 0 8 6'%3E%3Cpath id='Path_1' data-name='Path 1' d='M371,294l4,6,4-6Z' transform='translate(-371 -294)' fill='%239d3b3b'/%3E%3C/svg%3E%0A");
}

.container-form-input .input-group {
  display: flex;
}

.container-form-input .input-group .did-floating-input {
  border-radius: 0 4px 4px 0;
  border-left: 0;
  padding-left: 0;
}

.datepicker table th.next,
.datepicker table th.prev  {
  border: none !important;
}
.btn-search {
  height: 45px;
}
*::-webkit-scrollbar-track {
  background-color: transparent
}

*::-webkit-scrollbar {
  width: 7px;
  background-color: transparent;
  height: 7px
}

*::-webkit-scrollbar-thumb {
  background-color: #999
}
.table-responsive {
  max-height: 600px;
border: 1px solid #C9D1DC;
overflow: auto;
}
table.table-style {
border-spacing: 0;
}

.table-style thead {
font-size: 12px;
line-height: 16px;
letter-spacing: 0.05em;
text-transform: uppercase;
}

.table-style tbody {
font-size: 14px;
}

.table-style th,.table-style td {
padding: 18px 24px;
white-space: nowrap;
border-bottom: 1px solid #C9D1DC;
}

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


/*
STICKY ROW
Normal css box-shadow works for the header as it is a single html element
*/

.table-style tr.sticky {
position: sticky;
top: 0;
z-index: 1;
background: #fff;
box-shadow: 0 0 6px rgba(0,0,0,0.25);
}
.table-style th.sticky,
.table-style td.sticky {
position: sticky;
left: 0;
background: #fff;
}

.table-style th.sticky::after,
.table-style td.sticky::after {
content: "";
position: absolute;
right: -6px;
top: 0;
bottom: -1px;
width: 5px;
border-left: 1px solid #C9D1DC;
background: linear-gradient(90deg, rgba(0,0,0,0.08) 0%, rgba(0,0,0,0) 100%);
}

.table-style th.sticky::before,
.table-style td.sticky::before {
content: "";
position: absolute;
left: -6px;
top: 0;
bottom: -1px;
width: 5px;
border-right: 1px solid #C9D1DC;
background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.08) 100%);
}
[dir=rtl] .form-select-lg {
  padding: 0.469rem 0.735rem !important;
  font-size: 0.9375rem;
  font-weight: 400;
  line-height: 1.4;
}
.breadcrumb-theme span {
  line-height: 40px;
}
.card-style {
  margin-top: 15px;
}
.card-style .card-header{
  padding: 15px 25px;
  background-color: #dbe4f3;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.card-style .card-body {
  margin-top: 10px;

}
.card-style .collapseCard i {
  cursor: pointer;
}
.card-style .collapseCard i.active {
  transform: rotate(180deg);
}
.form-container {
  display: flex;
  align-items: center;
  gap: 5px;
}
.form-container span {
  display: inline-block;
  min-width: 48px;
}
.form-container .input-container{
  display: none;
}
.btns-edit-val {

}
.btns-edit-val .cancel{

}
.btns-edit-val .save{

}

.form-container .btn {
  background-color: #ededed;
  padding: 2px;
  min-width: 24px;
  min-height: 24px;
  font-size: 13px;
}

.form-container .btn.save {
  background-color: #3DB39E;
  color: #fff;
  display: none;
}
.form-container .btn.edit {
  background-color: #3DB39E;
  color: #fff;
}
.form-container .btn.cancel {
  background-color: #F1616F;
  color: #fff;
  display: none;
}
.form-container input{
  min-width: 70px;
}
.tab-new-content {
  display: none;
}
.tab-new-content.active {
  display: block;
}
.title-tab {
  padding: 15px 20px 0;
}
.nav-item-new {
  cursor: pointer;
}
.data-information {
  display: flex;
  gap: 20px;
  margin: 0 15px;
  box-shadow: 0 2px 14px rgba(38,60,85,.16);
  padding: 15px 15px 0;
  border-radius: 5px;
}
.data-control-action {
  display: flex;
  gap: 20px;
  margin: 0 15px;
  box-shadow: 0 2px 14px rgba(38,60,85,.16);
  padding: 15px;
  border-radius: 5px;
}
.nav-link.nav-item-new {
  min-width: 100px;
  text-align: center;
  padding: 13px;
}
.nav-link.nav-item-new.active {
  color: #fff !important;
  background-color: #5a8dee !important;
}
.input-with-hint {
  position: relative;
}
.input-with-hint span {
  position: absolute;
  top: 7px;
  left: 10px;
}
.btn-action .btn{
 height: 45px;
}
.spinner-loader-pay {
  display: none;
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  background: #504c4cfa;
  z-index: 999;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #fff;
  font-family: ChangaRegular;
  z-index: 999999999999;
}
.spinner-loader-pay.active {
  display: flex !important;
}
.spinner-loader-pay .loader {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  background: #646262e0;
  z-index: 999999999999;

}
.table ~ nav {
  height: 50px;
  padding-top: 9px;
  position: relative;
}
.table ~ nav ul.pagination{
  position: absolute;
  transform: translate(-50%,0);
  left: 50%;
  gap: 5px;
}
.table ~ nav ul.pagination .page-item:not(.first,.last,.next,.prev,.previous) {
  background-color: #eeeff1;
  border-radius: 50% !important;
}
.page-item:not(.first,.last,.next,.prev,.previous):not(.active,:hover,:focus) .page-link {
  border-radius: 50% !important;
}
.table ~ nav ul.pagination .page-item.active .page-link {
  border-radius: 50%;
}
span.select2-dropdown.select2-dropdown--below {
    z-index: 9999;
}

@media print {
    .print-none{
        display: none !important;
    }
}
.customer-data-information {
    display: flex;
    gap: 20px;
    margin: 0 15px;
    box-shadow: 0 0 3px rgba(38, 60, 85, .16);
    padding: 15px 15px 0;
    border-radius: 5px;
}

.installment-paid{
    color: #488832;
    font-weight: bold;
}
.installment-paid::before {
    content: "\2713";
    font-size: 1em;
    margin-right: 5px;
    color: #488832;
    display: inline-block;
}
.installment-pending{
    color: #953434;
    font-weight: bold;
}
.installment-pending::before {
    content: "\1F552"; /* Unicode for hourglass icon ⏳ */
    font-size: 1em;
    margin-right: 5px;
    color: #953434; /* Icon color matching text */
    display: inline-block;
}