:root {

  --bs-body-color: var(--as-text);
  --bs-body-color-rgb: var(--as-text-rgb);
  --bs-body-bg: var(--as-body);
  --bs-body-bg-rgb: var(--as-body-rgb);

  --bs-primary: var(--as-primary);
  --bs-primary-rgb: var(--as-primary);

  --bs-card-cap-bg: var(--as-card-cap-bg);

  --bs-heading-color: inherit;

  --bs-link-color: var(--as-link);
  --bs-link-color-rgb: var(--as-link-rgb);
  --bs-link-decoration: underline;
  --bs-link-hover-color: var(--as-link-active);

  --bs-border-color: var(--as-border);

  --bs-focus-ring-width: 0.25rem;
  --bs-focus-ring-opacity: 0.25;
  --bs-focus-ring-color: var(--as-border);

}

header {
  z-index: 1060;
  height: var(--as-header-height);
}

#logo {
  height: var(--as-logo-height);
  padding-left: 0.5rem;
}

#main-layout {
  min-height: calc(100vh - var(--as-header-height));
  margin: 0;
  padding: 0;
  overflow: auto;
}

#main {
  height: calc(100vh - var(--as-header-height));
  overflow-y: scroll;
  padding: 0.1rem;
}

.tab-content {
  padding: 0.1rem;
}

@media (min-width: 1400px) {
  #main-layout {
    display: grid;
    grid-template-areas: "sidebar main";
    grid-template-columns: fit-content(25%) 6fr;
  }
}

/* @media (max-width: 991.98px) {
  .sidebar {
    z-index: 1061;
  }
} */
/* 
@media (max-width: 991.98px) {
  .row, .card, .card-header, .sub-tab-pane-row  {
    --bs-gutter-x: 0.5rem;

    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .row>*, .sub-tab-pane-row>*  {
    margin-left: 0.1rem !important;
    margin-right: 0.1rem !important;
  }
} */

/* -------------------------------------------------------------------------------------------------------------- */
/* NAVBAR ------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */


.navbar {
  list-style: none;

  --bs-navbar-color: var(--text-inverted);
  --bs-navbar-hover-color: var(--text-inverted-active);
  --bs-navbar-active-color: var(--text-inverted-active);

  --bs-link-color: var(--as-link);
  --bs-link-hover-color: var(--as-link-active);

  --bs-nav-link-color: var(--as-link);
  --bs-nav-link-hover-color: var(--as-link-active);

  --bs-navbar-toggler-icon-bg: url(/dist/icons/53b777c5e4b5c9d35af3.svg);
  --bs-navbar-toggler-border-color: #fff;
  --bs-navbar-toggler-padding-y: 0.25rem;
  --bs-navbar-toggler-padding-x: 0.5rem;
  --bs-navbar-toggler-focus-width: 0.1rem;

  background-image: linear-gradient(rgba(var(--primary-rgb), 1), rgba(var(--primary-rgb), 0.95));
}

.navbar-brand {
  padding: 0;
}

.nav-link {
  font-size: 1rem;
}

.nav-link:hover,
.nav-link:focus,
.nav-item .dropdown-item:hover,
.nav-item .dropdown-item:focus {
  color: var(--as-button);
  background: var(--as-button-bg);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
  isolation: isolate;
  color: var(--bs-nav-tabs-link-active-color);
  border-color: var(--as-border);
  border-bottom-width: 0;
  background: var(--as-card-cap-bg);
}

@media (max-width: 1199.98px) {
  .nav-link-top {
    font-size: 0.8rem;
  }
}

.dropdown-menu {
  max-height: 80vh;
  overflow-y: scroll;
}

.dropdown-item {
  font-size: 0.8rem;
  padding: var(--bs-dropdown-item-padding-y) var(--bs-dropdown-item-padding-x);
  font-weight: 400;
}

.sidebar {
  --bs-bg-opacity: 1;
  background-color: rgba(var(--bs-tertiary-bg-rgb), var(--bs-bg-opacity)) !important;
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}


.sidebar>nav {
  max-height: calc(100vh - var(--as-header-height));
  overflow-y: scroll;
  border-bottom: 2px var(--bs-border-style) var(--bs-border-color);
}


.sidebar>nav::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar {
  width: 2px;
  /* -webkit-appearance: none; */
}

.nav-side-close {
  padding: 1rem;
  margin: auto !important;
}

.nav-side-home {
  padding: 0.7rem !important;
  font-size: 1.25rem !important;
  font-weight: bolder;
  background: var(--bs-offcanvas-bg);
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
}

.nav-side-group {
  padding: 0.25rem 0;
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color);
  /* background: var(--as-card-cap-bg); */
}

.nav-side-group>h6 {
  padding: 0.1rem 0.5rem;
}

.nav-side .nav-link {
  padding: 0.1rem 1rem;
  font-size: 0.9rem;
}

.nav-side-tab-group {
  padding: 0.25rem 0.25rem !important;
}

.nav-side-tab-div .nav-link {
  padding: 0.1rem 1.5rem;
}

.tab-link,
.sub-tab-link {
  /* font-size: 1.1rem; */
  font-weight: 500;
  border: 1px var(--bs-border-style) var(--bs-secondary-border-subtle) !important;
}

.tabs-toggle {
  background-color: rgba(var(--bs-secondary-bg-rgb), var(--bs-bg-opacity)) !important;
  border: 1px var(--bs-border-style) var(--bs-secondary-border-subtle) !important;
  color: var(--bs-primary-text);
  text-decoration: none;
  width: 100%;
  padding: 0.75rem;
}

/* -------------------------------------------------------------------------------------------------------------- */
/* CONTROLS ----------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

.toast-container {
  padding: 0.5rem;
}

.spinner-border {
  --bs-spinner-width: 4rem;
  --bs-spinner-height: 4rem;
  --bs-spinner-vertical-align: -0.125em;
  --bs-spinner-border-width: 0.5em;
  --bs-spinner-animation-speed: 0.75s;
  --bs-spinner-animation-name: spinner-border;
  border: var(--bs-spinner-border-width) solid currentcolor;
  border-right-color: transparent;
}

.title-top {
  margin: 0 0 0.25rem 0.25rem;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--text-inverted);

}

.title-main {
  margin: 0 0.5rem 0.25rem 0.5rem;
  font-size: 1.5rem;
  font-weight: 500;
}

.bi {
  font-size: 0.8rem;
}

.list-group-item .bi-square,
.list-group-item .bi-check-square {
  float: inline-end;
  font-size: 1rem;
}

.h1,
.h2,
.h3,
.h4,
.h5,
.h6,
h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: auto;
  margin-bottom: auto;
}

.h6,
h6 {
  line-height: 1.75rem;
}

.row {
  margin: 0;
  margin-bottom: 0.5rem;
  padding: 0 0.25rem;
  --bs-gutter-x: 0.25rem !important;
  --bs-gutter-y: 0.25rem !important;
}

.row>.div {
  margin: 0;
  padding: 0;
}

.row>.row {
  padding: 0;
}

/* .row:first-child {
  padding-left: 0 !important;
}

.row:last-child {
  padding-right: 0 !important;
}

hr {
  margin: 1.25rem 0 0.5rem 0;
} */

/* .row>div { 
    margin-bottom: 0.5rem; 
  } */

.btn {
  --bs-btn-color: var(--as-button);
  --bs-btn-font-weight: 500;
  --bs-btn-bg: var(--as-button-bg);
  --bs-btn-border-color: var(--as-border);
}

.btn-sm,
.btn-group-sm>.btn {
  --bs-btn-padding-y: 0.2rem;
  --bs-btn-padding-x: 0.45rem;
  max-height: 2rem;
}

.btn:hover,
.btn:active,
.btn:focus-visible {
  --bs-btn-active-color: var(--as-button-active);
  --bs-btn-active-bg: var(--as-button-active-bg);
  --bs-btn-active-border-color: var(--as-border-active);

  --bs-btn-hover-color: var(--as-button-active);
  --bs-btn-hover-bg: var(--as-button-active-bg);
  --bs-btn-hover-border-color: var(--as-border-active);
}

.btn-close,
.btn-end {
  margin: auto;
  margin-right: 0.25rem;
  filter: unset !important;
}

.modal-header .btn-close {
  padding: 1rem;
}

.main-tab-div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  --bs-gutter-x: 0.25rem !important;
  --bs-gutter-y: 0.25rem !important;
}

.form-save,
.save-order {
  background-color: var(--bs-success);
}

/* .form-close {
  background-color: var(--bs-gray);
} */

.form-delete {
  background-color: var(--bs-danger);
}

.form-div {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  --bs-gutter-x: 0.25rem;
  --bs-gutter-y: 0.25rem;
}

.form-div>.row {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin: 0;
  padding: 0;
  --bs-gutter-x: 0.25rem;
  --bs-gutter-y: 0.25rem;
}

.accordion {
  margin: 0.5rem 0;
}

.accordion-header {
  border-top: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.accordion-button {
  padding: var(--bs-card-cap-padding-y) var(--bs-card-cap-padding-x);
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  border-bottom: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: var(--bs-card-cap-color);
  background-color: var(--bs-card-cap-bg);
  box-shadow: none;
}

.list-group-item {
  cursor: pointer;
  font-size: 0.8rem;
}

.list-group-item:last-child {
  margin-bottom: 0.15rem;
}

.sortable {
  cursor: move;
  cursor: -webkit-grabbing;
  padding: 0 0.5rem 0 0;
}

.card {
  border-width: 1px;
  /* margin: 0.25rem; */
}


@media (max-width: 767.98px) {
  .modal-on-small {
    margin-top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: gray;
    padding: 1rem;
    z-index: 1000;
  }
}

.card-header {
  display: flex;
  padding: 0.5rem;
  background: var(--as-card-cap-bg);
  border-width: 2px;
}

.card-header>h6 {
  margin-left: 0.5rem;
}

.card-button-bar,
.card-footer {
  display: flex;
  padding: 0.25rem 0.5rem;
  border-bottom: var(--bs-card-border-width) solid var(--bs-card-border-color);
}

.card-button-bar {
  background: rgba(var(--as-secondary-rgb), 0.1);
}

.card-button-bar>*,
.card-footer>* {
  margin: 0.25rem;
}

.sub-tab-pane-row {
  display: flex;
  padding: 0;
}

.sub-tab-pane-row>* {
  padding: 0 0.25rem;
}

.sub-tab-pane-row .card {
  margin: 0.1rem;
}

/* .sub-tab-pane-row>div:first-child {
  padding-left: 0 !important;
}

.sub-tab-pane-row>div:last-child {
  padding-right: 0 !important;
} */

.sub-tab-card {
  /* border-width: 0; */
  padding-bottom: 0;
  width: 100%;
}

.sub-tab-card-header {
  display: flex;
  margin-bottom: 0.5rem;
  padding: 0.5rem;
  border-width: 2px;
}

.record-details {
  font-size: 0.9rem;
  margin-top: auto;
  margin-bottom: auto;
}

.parameters {
  margin: 0;
  padding-bottom: 0.5rem;
  background: rgba(var(--as-secondary-rgb), 0.1);
  border-bottom: 1px solid var(--bs-border-color) !important;
}

.form-label {
  margin: 0.25rem 0 0.125rem 0;
  font-size: 0.9rem !important;
  font-weight: lighter !important;
}

.form-check-label {
  font-size: 0.9rem !important;
  font-weight: lighter !important;
  margin-left: 0.25rem;
}

.form-check {
  padding-top: 0.5rem;
}

.form-check-single {
  padding-top: 1.2rem;
}

/* 
.form-control {
  background-color: var(--as-body-bg);
} */

.form-control:focus,
.form-check-input:focus {
  /* background-color: var(--as-body-bg); */
  border-color: var(--bs-border-color);
  --bs-bg-opacity: 1;
  box-shadow: 0 0 0 .1rem var(--as-primary-subtle);
}

input[type="checkbox" i],
.form-check-input {
  padding: 0.5rem;
  accent-color: var(--bs-secondary-bg);
  background-color: var(--as-body-bg);
  /* background-color: var(--bs-primary) !important; */
  /* border-color: var(--bs-primary) !important; */
}

.form-check-input:checked {
  background-color: var(--as-button-bg);
  border-color: var(--as-border) !important;
}

.form-check-input[type=checkbox]:indeterminate {
  background-color: var(--as-button-bg);
  border-color: var(--bs-primary) !important;
  opacity: 0.5;
  --bs-form-check-bg-image: url(data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e);
}

.form-check-input:disabled~.form-check-label,
.form-check-input[disabled]~.form-check-label {
  opacity: 1;
}

.textbox.label {
  background-color: var(--bs-secondary-bg);
  opacity: 1;
  pointer-events: none;
}

textarea {
  min-height: 6rem !important;
}

textarea.readonly {
  background-color: var(--bs-secondary-bg) !important;
  opacity: 1;
}

.currencytextbox::before {
  content: "$";
}

.negMoney {
  color: red;
}

/* ::-webkit-scrollbar {
  width: 0px;
  -webkit-appearance: none;
} */

::-webkit-scrollbar-track {
  background-color: var(--as-text-inverted);
}

::-webkit-scrollbar-thumb {
  background-color: var(--as-border);
}

/* .record-details-div {} */

/* -------------------------------------------------------------------------------------------------------------- */
/* TABLES ------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

/* .table.table-hover.dataTable { 
    margin-bottom: 0; 
  } */



.dt-search,
.dt-info,
.dt-length,
.dt-paging,
.dt-row,
.dt-cell,
.dt-start,
.dt-end,
.dt-layout-full,
.dt-buttons {
  display: flex;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
}

.dataTable {
  font-size: 0.8rem;
}

.dt-start {
  padding: 0.25rem;
  padding-left: 0.5rem;
}

.dt-end {
  padding: 0.25rem;
  padding-right: 0.5rem;
}

.dt-row {
  background-color: var(--bs-card-cap-bg);
}

div.dt-container div.dt-layout-start>*:not(:last-child) {
  margin-right: initial;
}

.dt-end {
  margin-left: auto;
}

/* .dt-buttons {
  padding: 0.25rem;
} */

.dt-buttons>* {
  margin: 0.25rem;
}

.dt-search input {
  margin: 0.2rem !important;
}

.dt-info,
.dt-length {
  padding: 0.25rem !important;
  margin: 0.25rem !important;
  font-size: 0.8rem;
}

.dt-paging {
  padding: 0.1rem 0.25rem !important;
  font-size: 0.8rem;

}

th,
td {
  white-space: nowrap;
  height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 300px;
}

th {
  font-weight: 500;
}

.dt-no-max-width {
  max-width: initial;
}

.table-no-header thead {
  display: none !important;
}

.dt-scroll-head {
  border-color: var(--bs-border-color) !important;
  border-width: 1px 0 1px 0 !important;
  border-style: solid !important;
}

.dt-scroll-head th {
  border-width: 0 !important;
  text-align: center !important;
}

.dt-border-left {
  border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-primary) !important;
}

.dt-border-right {
  border-right: var(--bs-border-width) var(--bs-border-style) var(--bs-primary) !important;
}

.dt-type-date,
.dt-type-boolean {
  text-align: center;
}

/* .dt-type-numeric { 
    text-align: right; 
    padding-right: 1rem; 
  } */

table.dataTable thead>tr>th.dt-orderable-asc,
table.dataTable thead>tr>th.dt-orderable-desc,
table.dataTable thead>tr>th.dt-ordering-asc,
table.dataTable thead>tr>th.dt-ordering-desc,
table.dataTable thead>tr>td.dt-orderable-asc,
table.dataTable thead>tr>td.dt-orderable-desc,
table.dataTable thead>tr>td.dt-ordering-asc,
table.dataTable thead>tr>td.dt-ordering-desc {
  background-color: var(--bs-card-cap-bg) !important;
}

table.table.dataTable>tbody>tr {
  cursor: pointer;
}

.dt-layout-full {
  padding-right: calc(var(--bs-gutter-x)* .25);
  padding-left: calc(var(--bs-gutter-x)* .25);
}

div.dt-container div.dt-layout-end>*:not(:first-child) {
  margin-left: unset !important;
}

.pagination {
  margin: 0;
  padding: 0;
}

.pagination-nav {
  margin-left: auto;
}

@media screen and (max-width: 767px) {
  div.dt-buttons {
    float: initial !important;
    width: initial !important;
    text-align: initial !important;
  }

  /* div.dt-container .row {
    --bs-gutter-y: 0 !important;
  } */

}

/* -------------------------------------------------------------------------------------------------------------- */
/* MODALS ------------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */

/* .modal {
  margin-top: 3rem;
} */

.modal-dialog-scrollable .modal-content {
  max-height: 100%;
  overflow-y: scroll;
}

@media (min-width: 576px) {
  .modal-dialog {
    min-width: 600px;
  }
}

.modal-body {
  padding: 0 0.25rem !important;
}

.modal-header {
  padding: 0.5rem 0.75rem;
  background-color: var(--bs-card-cap-bg);
  border-top-left-radius: initial;
  border-top-right-radius: initial;
}

.modal-footer {
  padding: 0.25rem;
  margin-top: 0.5rem;
}

.modal form {
  border: none;
  margin-bottom: 0;
}

.modal-on-modal {
  background: #000;
  /* opacity: 0.5; */
  z-index: 1056;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 25%);
  z-index: 1056;
  /* Above Bootstrap's modal overlay */
}

.overlay-content {
  position: absolute;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
}


/* -------------------------------------------------------------------------------------------------------------- */
/* PAGINATION --------------------------------------------------------------------------------------------------- */
/* -------------------------------------------------------------------------------------------------------------- */


.pagination {
  --bs-pagination-color: var(--as-text);
  --bs-pagination-bg: var(--as-secondary-bg);

  --bs-pagination-active-color: var(--as-button-active);
  --bs-pagination-active-bg: var(--as-button-bg);
  --bs-pagination-active-border-color: var(--as-border);

  --bs-pagination-hover-color: var(--as-button-active);
  --bs-pagination-hover-bg: var(--as-button-active-bg);
  --bs-pagination-hover-border-color: var(--as-border);

  --bs-pagination-focus-color: var(--as-button-active);
  --bs-pagination-focus-bg: var(--as-button-active-bg);
  --bs-pagination-focus-border-color: var(--as-border);
  --bs-pagination-focus-box-shadow: var(--as-box-shadow);

  --bs-pagination-padding-x: 0.5rem;
  --bs-pagination-padding-y: 0.125rem;
}