/* --- region Sass --- */
:root {
  --gutter: 15px;
  --default-font-size: 1.4rem;
  /* colors */
  --accent-color: #28abe2;
  --font-color: #333;
  --font-color-light: #a8acb9;
  --font-color-error: #a94442;
  --font-color-warning: #9d6403;
  --font-color-info: #31708f;
  --font-color-success: #3c763d;
  --placeholder-color: #aaa;
  --input-bg-disabled: #f5f5f5;
  --input-bg-error: rgba(255, 0, 0, 0.05);
  --input-border: #ccc;
  --input-focus-border: #66afe9;
  --input-focus-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
  --table-tr-bg: #f5f5f5;
  /* ledger status colors */
  --unpaid: #5bc0de;
  --paid: #8cc63f;
  --overdue: #f5b620;
  --reminder: #ff6d33;
  --collection: #f22d3a;
  --credited: #c7c7c7;
  --creditinvoiceused: #8cc63f;
  --haspaymentplan: #35ada6;
  --nopaymentplan: #47d5cd;
  --notused: #ffc29d;
  --partiallyused: #d3ba2f;
  --fullyused: #81df7f;
  --disputed: #2c7cb2;
  --convertedtoaccount: #ab5add;
  --overpayment: #f5b620;
  /* color helpers */
  --lighten: white;
  --darken: black;
}

.col-md-12:has(> .container) {
  padding: 0;
}

input.replaced-by-kendo {
  width: 100%;
  height: 34px;
  border: 1px solid #ccc;
  border-radius: 4px;
  padding: 6px 12px;
}

.input-group:has(> .k-datepicker + .input-group-btn) .k-picker-wrap {
  height: calc(100% - 2px);
}
.input-group:has(> .k-datepicker + .input-group-btn) .k-picker-wrap.k-state-hover {
  border-color: var(--input-border);
}
.input-group:has(> .k-datepicker + .input-group-btn) .k-picker-wrap.k-state-hover.k-state-focused {
  border-color: var(--input-focus-border);
  box-shadow: var(--input-focus-shadow);
}
.input-group:has(> .k-datepicker + .input-group-btn) input {
  height: 100%;
}
.input-group:has(> .k-datepicker + .input-group-btn) .k-picker-wrap, .input-group:has(> .k-datepicker + .input-group-btn) .k-select {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

select.form-control {
  padding-left: 8px;
}

.d-none {
  display: none;
}

.text-start {
  text-align: left !important;
}

.text-center {
  text-align: center !important;
}

.text-end {
  text-align: right !important;
}

.text-nowrap {
  white-space: nowrap !important;
}

.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.alert.alert-danger .validation-summary-errors {
  font-weight: inherit;
  color: inherit;
}
.alert.alert-danger .validation-summary-errors ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}
.alert.alert-danger .validation-summary-errors li {
  padding: 0px 0 3px 28px;
  background: url('data:image/svg+xml;charset=UTF-8,<svg width=".9em" height=".9em" fill="%23a94442" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>') no-repeat left top;
  background-position: left 2px;
}
.alert.alert-danger .validation-summary-errors li + li {
  margin-top: 7px;
}

.ajax-error,
.viewbag-error {
  color: var(--font-color-error);
}
.ajax-error span:before,
.viewbag-error span:before {
  content: "";
  display: inline-block;
  position: relative;
  top: 3px;
  margin-right: calc(var(--gutter) / 2);
  height: 1.25em;
  width: 1.25em;
  -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width=".9em" height=".9em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>');
  mask-image: url('data:image/svg+xml;charset=UTF-8,<svg width=".9em" height=".9em" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 32c14.2 0 27.3 7.5 34.5 19.8l216 368c7.3 12.4 7.3 27.7 .2 40.1S486.3 480 472 480L40 480c-14.3 0-27.6-7.7-34.7-20.1s-7-27.8 .2-40.1l216-368C228.7 39.5 241.8 32 256 32zm0 128c-13.3 0-24 10.7-24 24l0 112c0 13.3 10.7 24 24 24s24-10.7 24-24l0-112c0-13.3-10.7-24-24-24zm32 224a32 32 0 1 0 -64 0 32 32 0 1 0 64 0z"/></svg>');
  mask-size: contain;
  background: var(--font-color-error);
}
.ajax-error.alert-warning,
.viewbag-error.alert-warning {
  color: var(--font-color-warning);
}
.ajax-error.alert-warning span:before,
.viewbag-error.alert-warning span:before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24l0 112c0 13.3-10.7 24-24 24s-24-10.7-24-24l0-112c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z"/></svg>');
  background: var(--font-color-warning);
}
.ajax-error.alert-info,
.viewbag-error.alert-info {
  color: var(--font-color-info);
}
.ajax-error.alert-info span:before,
.viewbag-error.alert-info span:before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM184 336h24v-64h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M64 32C28.7 32 0 60.7 0 96V416c0 35.3 28.7 64 64 64h320c35.3 0 64-28.7 64-64V96c0-35.3-28.7-64-64-64H64zM184 336h24v-64h-24c-13.3 0-24-10.7-24-24s10.7-24 24-24h48c13.3 0 24 10.7 24 24v88h8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-80c-13.3 0-24-10.7-24-24s10.7-24 24-24zm40-208a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>');
  background: var(--font-color-info);
}
.ajax-error.alert-success,
.viewbag-error.alert-success {
  color: var(--font-color-success);
}
.ajax-error.alert-success span:before,
.viewbag-error.alert-success span:before {
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c36.8 0 68.8 20.7 84.9 51.1C373.8 41 411 49 437 75s34 63.3 23.9 96.1C491.3 187.2 512 219.2 512 256s-20.7 68.8-51.1 84.9C471 373.8 463 411 437 437s-63.3 34-96.1 23.9C324.8 491.3 292.8 512 256 512s-68.8-20.7-84.9-51.1C138.2 471 101 463 75 437s-34-63.3-23.9-96.1C20.7 324.8 0 292.8 0 256s20.7-68.8 51.1-84.9C41 138.2 49 101 75 75s63.3-34 96.1-23.9C187.2 20.7 219.2 0 256 0zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>');
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 0c36.8 0 68.8 20.7 84.9 51.1C373.8 41 411 49 437 75s34 63.3 23.9 96.1C491.3 187.2 512 219.2 512 256s-20.7 68.8-51.1 84.9C471 373.8 463 411 437 437s-63.3 34-96.1 23.9C324.8 491.3 292.8 512 256 512s-68.8-20.7-84.9-51.1C138.2 471 101 463 75 437s-34-63.3-23.9-96.1C20.7 324.8 0 292.8 0 256s20.7-68.8 51.1-84.9C41 138.2 49 101 75 75s63.3-34 96.1-23.9C187.2 20.7 219.2 0 256 0zM369 209c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-111 111-47-47c-9.4-9.4-24.6-9.4-33.9 0s-9.4 24.6 0 33.9l64 64c9.4 9.4 24.6 9.4 33.9 0L369 209z"/></svg>');
  background: var(--font-color-success);
}

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

table#invoiceList.k-grid.k-widget {
  width: calc(100% - 4px);
  table-layout: auto;
  border-collapse: initial;
}
table#invoiceList.k-grid.k-widget tr th.amount-column,
table#invoiceList.k-grid.k-widget tr td.amount-column {
  min-width: 120px;
  text-align: right;
  white-space: nowrap;
}
table#invoiceList.k-grid.k-widget tr th.checkbox-column,
table#invoiceList.k-grid.k-widget tr td.checkbox-column {
  width: 13px;
}
table#invoiceList.k-grid.k-widget tr th.checkbox-column input,
table#invoiceList.k-grid.k-widget tr td.checkbox-column input {
  cursor: pointer;
}
table#invoiceList.k-grid.k-widget tr th.currency-column,
table#invoiceList.k-grid.k-widget tr td.currency-column {
  width: 60px;
}
table#invoiceList.k-grid.k-widget tr th.date-column,
table#invoiceList.k-grid.k-widget tr td.date-column {
  width: 80px;
  white-space: nowrap;
}
table#invoiceList.k-grid.k-widget tbody tr:nth-of-type(even) {
  background-color: var(--table-tr-bg);
}
table#invoiceList.k-grid.k-widget tfoot {
  border-radius: 0 0 3px 3px;
}
table#invoiceList.k-grid.k-widget tfoot tr:last-of-type > td:first-of-type {
  border-radius: 0 0 0 3px;
}
table#invoiceList.k-grid.k-widget tfoot tr:last-of-type > td:last-of-type {
  border-radius: 0 0 3px 0;
}
table#invoiceList.k-grid.k-widget tfoot.k-grid-footer td {
  font-weight: 400;
}

.card.search-panel h2.apticpageheader {
  margin: var(--gutter) 0 calc(var(--gutter) * 2) 0;
  color: #999;
  font-size: 2.4rem;
  font-weight: 400;
}
.card.search-panel button.btn-lg[type=submit] + a.clear {
  margin-left: var(--gutter);
  font-size: larger;
}
.card.search-panel .group-filter-label {
  padding: 0 0 calc(var(--gutter) / 2) var(--gutter);
}
.card.search-panel .combined-filters {
  margin: calc(var(--gutter) * -0.5) 0 var(--gutter) 0;
}
.card.search-panel .checkbox {
  padding: 0 var(--gutter);
}
.card.search-panel .checkbox label {
  font-weight: 200;
}
.card.search-panel .checkbox label input[type=checkbox] {
  position: relative;
  top: 1px;
  margin-right: calc(var(--gutter) / 2);
}
.card.search-panel .k-multiselect {
  position: relative;
}
.card.search-panel .k-multiselect .k-input {
  color: #999;
}
.card.search-panel .k-multiselect .k-multiselect-wrap {
  padding: 0.275rem 0;
}
.card.search-panel .k-multiselect .k-multiselect-wrap > ul > li.k-button {
  font-size: 1.2rem;
  border-radius: 3px;
  padding: 1px 22px 1px 5px;
  color: var(--font-color);
  background-color: #e5e5e5;
  border-color: #cdcdcd;
}
.card.search-panel .k-multiselect .k-multiselect-wrap > ul > li.k-button + .k-button {
  margin-left: 3px;
}
.card.search-panel .k-multiselect .k-multiselect-wrap > ul > li.k-button:active, .card.search-panel .k-multiselect .k-multiselect-wrap > ul > li.k-button:hover {
  box-shadow: none;
  background-color: color-mix(in srgb, #e5e5e5, var(--darken) 10%);
}
.card.search-panel .k-multiselect .k-multiselect-wrap > ul > li.k-button .k-select .k-icon.k-i-close {
  background-image: url(../kendo/2016.1.112/HighContrast/sprite.png);
  background-position: -48px -18px;
  filter: invert(0.8);
}
.card.search-panel .k-multiselect .k-multiselect-wrap input.k-input {
  position: relative;
  top: 2px;
  margin: 0;
}
.card.search-panel .k-multiselect .fa-icon[data-icon="fass angle-down"] {
  width: 1rem;
  color: #555;
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(-3px, -50%);
}
.card.search-panel .k-multiselect .clear-btn {
  display: none;
}
.card.search-panel .k-multiselect:has(.k-multiselect-wrap > ul > li) .k-multiselect-wrap {
  padding-left: 3px;
  padding-right: 38px;
}
.card.search-panel .k-multiselect:has(.k-multiselect-wrap > ul > li) .clear-btn {
  position: absolute;
  top: 0;
  right: 16px;
  display: flex;
  height: calc(100% - 2px);
  border: none;
  background: none;
}
.card.search-panel .k-multiselect:has(.k-multiselect-wrap > ul > li) .clear-btn .fa-icon {
  width: 1rem;
  color: red;
}
.card.search-panel .extra-fields.row > div {
  width: 100%;
  display: grid;
  gap: 0 30px;
  /** NOTE
    * the following 3 properties needs to be set in the view based on the data-count value on the dynamic .extra-fields element
    *
    * grid-auto-flow: column;                   - used to sort and render fields from top to bottom (instead of left to right)
    * grid-template-columns: repeat(X, 1fr);    - X decides the number of columns
    * grid-template-rows: repeat(Y, 1fr);       - Y decides the number of rows, and it should be the value of data-count divided by no of columns rounded up
  */
}
.card.search-panel .extra-fields.row > div > div.form-group label {
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* ledger search */
label.btn:has(input[type=checkbox]) input[type=checkbox] {
  position: absolute;
  left: -100vw;
}

label.btn:has(input[type=checkbox]),
td > span.label.status {
  letter-spacing: 0.05rem;
  font-weight: 400;
}

.cweb-checkbox {
  margin-bottom: 5px;
  margin-right: 5px;
  position: relative;
  z-index: 1;
}
.cweb-checkbox input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.cweb-checkbox label {
  color: #aaa;
  background-color: #fff;
  border: 1px dotted #999;
  box-shadow: 1px 1px 2px rgba(10, 10, 10, 0.15);
  padding: 5px 10px;
  border-radius: 3px;
  font-size: 12px;
  white-space: nowrap;
}

.filter-btn:has(input[type=checkbox]:checked),
div.cweb-checkbox:has(input[type=checkbox]:checked),
td > span.status {
  color: white;
}
.filter-btn:has(input[type=checkbox]:checked) label,
div.cweb-checkbox:has(input[type=checkbox]:checked) label,
td > span.status label {
  color: white;
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-default:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-default > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-default:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-default > label,
td > span.status.ledgerstatus-default:not(div),
td > span.status.ledgerstatus-default > label {
  background-color: var(--unpaid);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-unpaid:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-unpaid > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-unpaid:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-unpaid > label,
td > span.status.ledgerstatus-unpaid:not(div),
td > span.status.ledgerstatus-unpaid > label {
  background-color: var(--unpaid);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-paid:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-paid > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-paid:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-paid > label,
td > span.status.ledgerstatus-paid:not(div),
td > span.status.ledgerstatus-paid > label {
  background-color: var(--paid);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-overdue:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-overdue > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-overdue:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-overdue > label,
td > span.status.ledgerstatus-overdue:not(div),
td > span.status.ledgerstatus-overdue > label {
  background-color: var(--overdue);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-reminder:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-reminder > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-reminder:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-reminder > label,
td > span.status.ledgerstatus-reminder:not(div),
td > span.status.ledgerstatus-reminder > label {
  background-color: var(--reminder);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-collection:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-collection > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-collection:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-collection > label,
td > span.status.ledgerstatus-collection:not(div),
td > span.status.ledgerstatus-collection > label {
  background-color: var(--collection);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-credited:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-credited > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-credited:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-credited > label,
td > span.status.ledgerstatus-credited:not(div),
td > span.status.ledgerstatus-credited > label {
  background-color: var(--credited);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-creditinvoiceused:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-creditinvoiceused > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-creditinvoiceused:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-creditinvoiceused > label,
td > span.status.ledgerstatus-creditinvoiceused:not(div),
td > span.status.ledgerstatus-creditinvoiceused > label {
  background-color: var(--creditinvoiceused);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-disputed:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-disputed > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-disputed:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-disputed > label,
td > span.status.ledgerstatus-disputed:not(div),
td > span.status.ledgerstatus-disputed > label {
  background-color: var(--disputed);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-haspaymentplan:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-haspaymentplan > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-haspaymentplan:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-haspaymentplan > label,
td > span.status.ledgerstatus-haspaymentplan:not(div),
td > span.status.ledgerstatus-haspaymentplan > label {
  background-color: var(--haspaymentplan);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-nopaymentplan:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-nopaymentplan > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-nopaymentplan:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-nopaymentplan > label,
td > span.status.ledgerstatus-nopaymentplan:not(div),
td > span.status.ledgerstatus-nopaymentplan > label {
  background-color: var(--nopaymentplan);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-notused:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-notused > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-notused:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-notused > label,
td > span.status.ledgerstatus-notused:not(div),
td > span.status.ledgerstatus-notused > label {
  background-color: var(--notused);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-partiallyused:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-partiallyused > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-partiallyused:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-partiallyused > label,
td > span.status.ledgerstatus-partiallyused:not(div),
td > span.status.ledgerstatus-partiallyused > label {
  background-color: var(--partiallyused);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-fullyused:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-fullyused > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-fullyused:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-fullyused > label,
td > span.status.ledgerstatus-fullyused:not(div),
td > span.status.ledgerstatus-fullyused > label {
  background-color: var(--fullyused);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-convertedtoaccount:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-convertedtoaccount > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-convertedtoaccount:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-convertedtoaccount > label,
td > span.status.ledgerstatus-convertedtoaccount:not(div),
td > span.status.ledgerstatus-convertedtoaccount > label {
  background-color: var(--convertedtoaccount);
}
.filter-btn:has(input[type=checkbox]:checked).ledgerstatus-overpayment:not(div), .filter-btn:has(input[type=checkbox]:checked).ledgerstatus-overpayment > label,
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-overpayment:not(div),
div.cweb-checkbox:has(input[type=checkbox]:checked).ledgerstatus-overpayment > label,
td > span.status.ledgerstatus-overpayment:not(div),
td > span.status.ledgerstatus-overpayment > label {
  background-color: var(--overdue);
}

label.btn:has(input[type=radio]) input[type=radio] {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
label.btn:has(input[type=radio]) span {
  margin-left: -4px;
}

label.btn:has(input[type=radio]:checked) {
  background: #28abe2;
  color: white;
}

@media (max-width: 1199px) {
  .card.search-panel .group-filter-label {
    padding: calc(var(--gutter) / 2) 0 0 var(--gutter);
  }
}
@media (max-width: 600px) {
  .card.search-panel .group-filter-label + div > .k-multiselect {
    width: 100%;
  }
}
@media (max-width: 991px) {
  .card.search-panel .extra-fields.row > div {
    grid-auto-flow: initial !important;
    grid-template-columns: 1fr !important;
  }
}
.suggest-paymentplan h2 {
  margin-top: 0;
  margin-bottom: 30px;
}
.suggest-paymentplan h3 {
  font-size: 2.2rem;
  line-height: 3rem;
  border-bottom: 1px solid #ccc;
  margin-bottom: 30px;
}
.suggest-paymentplan .invoice {
  margin: 0 2rem 3rem 0;
  display: grid;
  grid-template-columns: repeat(2, min-content 1fr);
  gap: 2rem 3rem;
}
.suggest-paymentplan .invoice > div:nth-child(1), .suggest-paymentplan .invoice > div:nth-child(2), .suggest-paymentplan .invoice > div:nth-child(5), .suggest-paymentplan .invoice > div:nth-child(6) {
  order: -1;
}
.suggest-paymentplan .invoice .field-label {
  white-space: nowrap;
}
.suggest-paymentplan .invoice .field-label + div {
  font-weight: 400;
}
.suggest-paymentplan #invoiceList + .error {
  color: var(--font-color-error);
}
.suggest-paymentplan .suggestion {
  margin-left: 2rem;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: start;
  gap: 2rem;
}
.suggest-paymentplan .suggestion .sliders {
  position: relative;
  flex-basis: 40%;
  display: grid;
  grid-template-columns: minmax(max-content, min-content) 1fr minmax(max-content, min-content);
  gap: 1rem;
  align-items: center;
}
.suggest-paymentplan .suggestion .sliders .slider-header {
  text-align: center;
  font-weight: 400;
  font-size: large;
  margin-bottom: -1rem;
}
.suggest-paymentplan .suggestion .sliders label {
  margin-bottom: 0;
}
.suggest-paymentplan .suggestion .sliders label + div {
  display: grid;
}
.suggest-paymentplan .suggestion .sliders .k-slider-track {
  height: 5px;
  background-color: #c2c2c2;
  border-radius: 5px;
  border-color: white;
  margin-top: -4px;
  width: 100% !important;
}
.suggest-paymentplan .suggestion .sliders .k-slider-track .k-slider-selection {
  height: 6px;
  background-color: var(--accent-color);
  border-radius: 5px;
  margin-top: -3px;
}
.suggest-paymentplan .suggestion .sliders .k-slider-track .k-draghandle {
  border-color: var(--accent-color);
  background-color: var(--accent-color);
  box-shadow: none;
  top: -6px;
}
.suggest-paymentplan .suggestion .sliders .k-slider-track .k-draghandle.k-state-focused {
  top: -5px;
}
.suggest-paymentplan .suggestion .sliders .k-dropdown, .suggest-paymentplan .suggestion .sliders .k-textbox {
  width: 125px;
}
.suggest-paymentplan .suggestion .sliders input.slider {
  display: none;
}
.suggest-paymentplan .suggestion .sliders div:has(#amount + .error) {
  display: flex;
  flex-flow: column;
}
.suggest-paymentplan .suggestion .sliders div:has(#amount + .error) input {
  background-color: var(--input-bg-error);
}
.suggest-paymentplan .suggestion .sliders div:has(#amount + .error) small.error {
  color: var(--font-color-error);
  width: 125px;
}
.suggest-paymentplan .suggestion .fees {
  position: relative;
  display: grid;
  grid-template-columns: min-content 1fr;
  gap: 1rem;
}
.suggest-paymentplan .suggestion .fees label {
  white-space: nowrap;
  align-self: center;
}
.suggest-paymentplan .suggestion .fees input {
  width: 75px;
}
.suggest-paymentplan .suggestion .amounts table {
  width: 300px;
  border-collapse: initial;
}
.suggest-paymentplan .suggestion .amounts table tr > :last-child {
  text-align: right;
}
.suggest-paymentplan .suggestion .amounts table tfoot {
  border-radius: 0 0 3px 3px;
}
.suggest-paymentplan .suggestion .amounts table tfoot tr:last-child > :first-child {
  border-radius: 0 0 0 3px;
}
.suggest-paymentplan .suggestion .amounts table tfoot tr:last-child > :last-child {
  border-radius: 0 0 3px 0;
}
.suggest-paymentplan .suggestion .amounts .disclaimer {
  text-align: right;
  font-style: italic;
  color: var(--font-color-light);
  margin-top: calc(var(--gutter) / 2);
}
.suggest-paymentplan .suggestion input[disabled] {
  background-color: var(--input-bg-disabled);
}
.suggest-paymentplan .suggestion input[disabled], .suggest-paymentplan .suggestion .k-state-disabled, .suggest-paymentplan .suggestion .k-state-disabled .k-slider-track {
  cursor: not-allowed !important;
}
.suggest-paymentplan .suggestion button[type=submit] > .glyphicon:first-child {
  margin-right: calc(var(--gutter) / 2);
  top: 2px;
}
.suggest-paymentplan .suggestion :last-child {
  flex-basis: 100%;
}

#periods-list.k-list-container .k-list-optionlabel {
  display: none;
}

.k-slider-tooltip {
  height: 20px;
}

@media (max-width: 600px) {
  .suggest-paymentplan h2 {
    margin-top: 30px;
  }
  .suggest-paymentplan .invoice {
    grid-template-columns: min-content 1fr;
  }
  .suggest-paymentplan .invoice > div {
    order: 0 !important;
  }
  .suggest-paymentplan .suggestion {
    flex-flow: column;
  }
  .suggest-paymentplan .suggestion .sliders {
    grid-template-columns: 1fr minmax(max-content, min-content);
  }
  .suggest-paymentplan .suggestion .sliders > div:has(+ .slider-header),
  .suggest-paymentplan .suggestion .sliders .slider-header,
  .suggest-paymentplan .suggestion .sliders .slider-header + div {
    display: none;
  }
  .suggest-paymentplan .suggestion .sliders label {
    grid-column: 1/-1;
    margin-bottom: -1rem;
  }
  .suggest-paymentplan .suggestion .sliders label:last-of-type {
    margin-top: 1rem;
  }
  .suggest-paymentplan .suggestion > div, .suggest-paymentplan .suggestion .amounts table {
    width: 100%;
  }
}
/* --- endregion Sass --- */