/* Global */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

:root {
  --orange: #f58426;
  --black: #48555f;
  --orange-hover: #ff9238;
  --grey: #373741;
  --grey-dark: #2a2a32;
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-family: 'DM Sans', sans-serif;
  color: var(--black);
}

input, button, textarea, select {
  font: inherit;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    background-color: var(--orange-hover);
    border-color: var(--orange-hover);
}

.nav-link:focus-visible {
    box-shadow: none;
}

table {
    width: 100%;
}

h2 {
    font-weight: 600;
    font-size: 19px;
    margin-bottom: 0;
}

h3 {
    font-size: 12px;
    text-transform: uppercase;
    font-weight: 700;
    margin-top: 2px;
}

.flex-1 {
  flex: 1;
}

.modal-title {
    margin-bottom: 0;
    line-height: var(--bs-modal-title-line-height);
    font-weight: 800;
    text-transform: uppercase;
}

.modal-header button {
    border: none;
    padding: 2px 0px 2px 14px;
    background: transparent;
    font-size: 39px;
}

.modal-footer {
    justify-content: flex-start;
    padding-top: 0;
    border: none;
}

.modal-header button span {
    color: var(--black);
}

.modal-content {
    padding: 6px 30px 32px 35px;
    border: none;
}

.form-control {
    padding: 0.8rem 0.75rem;
    border: var(--bs-border-width) solid #cbcfd3;
}

.form-control:focus {
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    border: var(--bs-border-width) solid #cbcfd3;
    outline: 0;
    box-shadow: none;
}

.btn-primary {
    background: var(--orange);
    border: none;
    text-transform: uppercase;
    font-weight: 700;
    padding: 12px 23px;
    border-radius: 6px;
}

.btn-primary:hover {
    background: var(--orange-hover);
}

.btn-primary svg {
    margin-left: 11px;
    position: relative;
    top: -1px;
    transition: 0.4s all;
}

.btn-primary:hover svg {
    margin-left: 15px;
}

.input-group-text {
    padding: .375rem 0.2rem .375rem 1.1rem;
    border: var(--bs-border-width) solid #cbcfd3;
    background-color: transparent;
}

.input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback) {
    border-left: none;
}

th {
    background: var(--orange);
    color: #fff;
    padding: 8px 14px;
}

td {
    padding: 7px 6px 8px 14px;
    font-size: 16px;
    line-height: 119%;
}

tr {
    border-bottom: 1px solid #cfcfcf;
}

body[light-mode="dark"] tr {
    border-bottom: 1px solid #57575a;
}

tr:last-child, body[light-mode="dark"] tr:last-child {
    border: none;
}

tr:first-child, body[light-mode="dark"] tr:first-child {
    border: none;
}

tr th:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
}

tr th:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.accordion-button:not(.collapsed) {
    color: var(--bs-accordion-active-color);
    background-color: transparent;
    box-shadow: none;
    border: none;
    outline: none;
    color: var(--black);
}

.accordion-button, .accordion-body {
    color: var(--black);
    outline: none;
    box-shadow: none;
}

.accordion-body {
    padding: 1px 16px 12px 16px;
}

body[light-mode="dark"] .accordion-body {
    color: #94a4b3;
}

.accordion-button {
    padding: 9px 16px;
    font-weight: 700;
    border-radius: 6px;
}

body[light-mode="dark"] .accordion-button {
    background-color: #373740;
    transition: none;
    color: #fff;
    font-weight: 600;
}

body[light-mode="dark"] .accordion-button::after {

}

.date-time-wrap {
    min-height: 63.5px;
}

.accordion {
    background: transparent;
    border: none;
    display: flex;
    flex-flow: column;
    gap: 8px;
}

.accordion-item {
    color: var(--bs-accordion-color);
    background-color: #fff;
    border: none;
    border-radius: 6px !important;
}

body[light-mode="dark"] .accordion-item {
    background-color: #373740;
}

.accordion-button:hover, body[light-mode="dark"] .accordion-button:hover {
    color: var(--orange);
}

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

.tab h2.accordion-header {
    margin-bottom: 0;
}

.accordion-button:not(.collapsed)::after {
    content: "\F282";
    position: absolute;
    right: 16px;
    font-family: "bootstrap-icons";
    font-size: 16px;
    top: 9px;
    color: var(--black);
    transition: none;
    background-image: none;
}

body[light-mode="dark"] .accordion-button:not(.collapsed)::after {
    content: "\F282";
    position: absolute;
    right: 16px;
    font-family: "bootstrap-icons";
    font-size: 16px;
    top: 9px;
    color: #94a4b3;
    transition: none;
    background-image: none;
}

.collapsed.accordion-button::after {
    content: "\F282";
    position: absolute;
    right: 12px;
    font-family: "bootstrap-icons";
    font-size: 16px;
    top: 9px;
    color: var(--black);
    transform: rotate(0deg);
    transition: none;
    background-image: none;
}

body[light-mode="dark"] .collapsed.accordion-button::after {
    content: "\F282";
    position: absolute;
    right: 12px;
    font-family: "bootstrap-icons";
    font-size: 16px;
    top: 9px;
    color: #94a4b3;
    transform: rotate(0deg);
    transition: none;
    background-image: none;
}

@keyframes fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Light Mode Button Styles
--------------------------- */

.light-mode-button {
    background: 0;
    border: 0;
    box-sizing: border-box;
    cursor: pointer;
    height: 40px;
    width: 100px;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0);
}

.light-mode-button:focus {
    outline: none; /* Not ideal for accessibility */
}

/* .light-mode-button span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 67px;
    height: 31px;
    border-radius: 20px;
    background-color: #d6d7db;
    box-shadow: inset 1px 1px 3px 0 rgb(0 0 0 / 40%);
    transition: 0.3s;
}  */

.light-mode-button span:nth-child(1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 67px;
    height: 31px;
    border-radius: 20px;
    transition: 0.3s;
    border: 1px solid var(--orange);
}
/*
.light-mode-button span:nth-child(2) {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 25px;
    height: 25px;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 40%);
    transition: 0.3s;
}
*/
.light-mode-button span:nth-child(2) {
    position: absolute;
    top: 3px;
    left: 5px;
    width: 25px;
    height: 25px;
    background-color: var(--bs-orange);
    border-radius: 50%;
    /* box-shadow: 1px 1px 2px 0 rgb(0 0 0 / 40%); */
    transition: 0.3s;
}

body[light-mode="dark"] {
    background-color: #2a2a32;
    color: #fff;
}
/*
body[light-mode="dark"] .light-mode-button span:nth-child(1) {
    background-color: #ced4e2;
    color: #fff;
}
*/
body[light-mode="dark"] .light-mode-button span:nth-child(1) {
    /* background-color: #ced4e2; */
    color: #fff;
}
/*
body[light-mode="dark"] .light-mode-button span:nth-child(2) {
    left: 38px;
    background-color: #373741;
}
*/
body[light-mode="dark"] .light-mode-button span:nth-child(2) {
    left: 38px;
    background-color: #ffffff;
}

body[light-mode="dark"] a {
    color: #fff;
}

@keyframes chartjs-render-animation{from{opacity:.99}to{opacity:1}}
	.chartjs-render-monitor{animation:chartjs-render-animation 1ms}
	.chartjs-size-monitor,.chartjs-size-monitor-expand,.chartjs-size-monitor-shrink{position:absolute;direction:ltr;left:0;top:0;right:0;bottom:0;overflow:hidden;pointer-events:none;visibility:hidden;z-index:-1}
	.chartjs-size-monitor-expand>div{position:absolute;width:1000000px;height:1000000px;left:0;top:0}
	.chartjs-size-monitor-shrink>div{position:absolute;width:200%;height:200%;left:0;top:0}


  /*------scroll bar---------------------*/

  ::-webkit-scrollbar {
    width: 5px;
    height: 7px;
  }
  ::-webkit-scrollbar-button {
    width: 0px;
    height: 0px;
  }
  ::-webkit-scrollbar-thumb {
    background: var(--black);
    border: 0px none #ffffff;
    border-radius: 0px;
  }
  ::-webkit-scrollbar-thumb:hover {
    background:var(--black);
  }
  ::-webkit-scrollbar-thumb:active {
    background: var(--black);
  }
  ::-webkit-scrollbar-track {
    background: transparent;
    border: 0px none #ffffff;
    border-radius: 50px;
  }
  ::-webkit-scrollbar-track:hover {
    background: transparent;
  }
  ::-webkit-scrollbar-track:active {
    background: transparent;
  }
  ::-webkit-scrollbar-corner {
    background: transparent;
  }

  @media screen and (max-width: 768px) {
    table:not(.datagrid) thead {
      display: none;
    }
  
    table:not(.datagrid) tbody td {
      display: block;
      text-align: right;
      position: relative;
      padding-left: 50%;
      border: none;
      border-bottom: 1px solid #ddd;
    }
  
    table:not(.datagrid) tbody td::before {
      content: attr(data-label);
      position: absolute;
      left: 10px;
      top: 50%;
      transform: translateY(-50%);
      font-weight: bold;
      text-align: left;
    }
  
    table:not(.datagrid) tbody tr {
      border-bottom: 2px solid #ccc;
      margin-bottom: 10px;
    }

    .table-wrap table td:last-child {
        margin-right: 0px !important;
      }
  }