body {
  font-size: 16px;
  line-height: 1.3;
  background-color: #edf2f9; }

.container {
  width: 95%;
  margin: 0 auto;
  max-width: 1200px; }

.card-s1 {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(126, 142, 177, 0.12);
  border-radius: 4px;
  padding: 20px 10px; }

.table {
  width: 100%;
  text-align: left;
  border-collapse: collapse; }
  .table td {
    padding: 10px;
    border: none; }
  .table thead th {
    padding: 20px 10px; }

.table tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03); }

.transaction-time {
  font-size: 14px;
  color: #9b9b9b; }

.popup-button {
  width: 60px; }

.btn {
  background-color: #2c3034;
  border: none;
  padding: 10px 30px;
  color: #fff;
  border-radius: 4px;
  cursor: pointer; }

.date-range-wrapper {
  padding: 2px 1px; }

.receipt-img-zoom {
  cursor: zoom-in; }

.update-status-modal-body {
  height: 70vh;
  overflow-y: auto; }

.th-sm {
  position: relative; }
  .th-sm::before {
    content: "\f0de"; }
  .th-sm::after {
    content: "\f0dd"; }
  .th-sm::before, .th-sm::after {
    position: absolute;
    opacity: 0.3;
    font-family: 'Font Awesome\ 5 Free';
    font-weight: bold;
    right: 20px; }
  .th-sm.sorting_desc::after {
    opacity: 1; }
  .th-sm.sorting_asc::before {
    opacity: 1; }

.alert.alert-success {
  color: green;
  text-align: center;
  background: #dff0d8;
  margin: 1em 0 1em 0;
  padding: 10px; }

.alert.alert-warning {
  color: red;
  text-align: center;
  background: #efe7b8;
  margin: 1em 0 1em 0;
  padding: 10px; }

.alert.alert-danger {
  color: #c00;
  text-align: center;
  background: #e6c0c0;
  margin: 1em 0 1em 0;
  padding: 10px; }

.pagination li:hover,
.pagination li.active {
  color: #fff;
  background-color: #2c3034; }

/*# sourceMappingURL=main.css.map */

/* Horizontal Timeline Process */

.g-h-timeline-process {
  position: relative;
  display: flex;
}

.g-h-timeline-process .g-h-timeline-status {
  width: 33.333333%;
}

.g-h-timeline-status {
  position: relative;
  text-align: center;
}

.g-h-timeline-label {
  position: relative;
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 500;
}

.g-h-timeline-time {
  font-size: 0.875rem;
  line-height: 1.25rem;
}

.g-h-timeline-status .g-h-timeline-line {
  position: relative;
  margin-top: 1rem;
  margin-bottom: 1rem;
  display: block;
  height: 1px;
  width: 100%;
}

.g-h-timeline-status:not(:last-child) .g-h-timeline-line:after {
  content: "";
  position: absolute;
  top: 0px;
  left: 50%;
  height: 1px;
  width: 100%;
  --tw-bg-opacity: 1;
  background-color: rgb(156 163 175 / var(--tw-bg-opacity));
}

.g-h-timeline-status .g-h-timeline-line:before {
  content: "";
  left: calc(50% - 21px);
  position: absolute;
  top: -10px;
  z-index: 10;
  height: 21px;
  width: 21px;
  border-radius: 9999px;
  border-width: 2px;
  border-style: solid;
  --tw-border-opacity: 1;
  border-color: rgb(156 163 175 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}

/* Complated */

.g-h-timeline-status.completed:not(:last-child) .g-h-timeline-line:after {
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

.g-h-timeline-status.completed .g-h-timeline-line:before {
  --tw-border-opacity: 1;
  border-color: rgb(34 197 94 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(34 197 94 / var(--tw-bg-opacity));
}

/* Rejected */

.g-h-timeline-status.g-h-timeline-status-rejected:not(:last-child) .g-h-timeline-line:after {
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.g-h-timeline-status.g-h-timeline-status-rejected .g-h-timeline-line:before {
  --tw-border-opacity: 1;
  border-color: rgb(220 38 38 / var(--tw-border-opacity));
  --tw-bg-opacity: 1;
  background-color: rgb(220 38 38 / var(--tw-bg-opacity));
}

.g-h-timeline-status-rejected .g-h-timeline-label, .g-h-timeline-status-rejected .g-h-timeline-time {
  --tw-text-opacity: 1;
  color: rgb(220 38 38 / var(--tw-text-opacity));
}



button.submission-timeline-toggle:after {
  content: "+";
  font-weight: bold;
  font-size: 23px;
  width: 25px;
  display: inline-block;
}

button.submission-timeline-toggle.active:after {
  content: "-";
}