@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@300;400;500;600;700;800&display=swap");

:root {
  --ims-text-primary: #282a32;
  --ims-text-muted: #64717d;
  --ims-cream: #fffbf1;
  --ims-green: #044811;
  --ims-green-soft: #bfd0c2;
  --ims-gold: #deae27;
  --ims-panel: #ffffff;
  --ims-line: #d6dde3;
  --ims-field: #f8fafb;
  --ims-shadow: 0 8px 20px rgba(31, 41, 51, .06);
}

html {
  scrollbar-color: var(--ims-gold) #e9f1ea;
}

html::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

html::-webkit-scrollbar-thumb {
  background-color: var(--ims-gold);
  border: 3px solid #e9f1ea;
  border-radius: 99em;
}

html::-webkit-scrollbar-track {
  background-color: #e9f1ea;
  border: 1px solid #c8d8ca;
}

html::-webkit-scrollbar-thumb:hover {
  background-color: #b98b12;
}

body {
  background: var(--ims-cream) !important;
  color: var(--ims-text-primary) !important;
  font-family: "Be Vietnam Pro", Tahoma, Geneva, sans-serif !important;
  line-height: 1.45 !important;
}

.navbar {
  background: var(--ims-green) !important;
  border-bottom: 1px solid var(--ims-green) !important;
  box-shadow: 0 5px 16px rgba(4, 72, 17, .12);
  min-height: 60px;
}

.navbar-brand,
.navbar .navbar-text,
.navbar a:not(.btn) {
  color: #eff1f6 !important;
  font-weight: 600;
}

.navbar-brand:hover,
.navbar a:not(.btn):hover {
  color: var(--ims-gold) !important;
  text-decoration: none;
}

.navbar img {
  margin-right: 6px;
}

.container-custom {
  max-width: 960px !important;
}

.card {
  background: var(--ims-panel) !important;
  border: 1px solid var(--ims-line) !important;
  border-radius: 6px !important;
  box-shadow: var(--ims-shadow);
}

.card.rounded-0,
.modal-content.rounded-0,
.btn.rounded-0,
.form-control.rounded-0 {
  border-radius: 6px !important;
}

.card-header,
.card-header[style] {
  background: var(--ims-green) !important;
  border-bottom: 1px solid var(--ims-green) !important;
  color: #fff !important;
  font-style: normal !important;
  font-weight: 700;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header p,
.card-header label,
.card-header span,
.card-header a:not(.btn) {
  color: #fff !important;
}

.card-header h5,
.card-header h2 {
  font-weight: 800;
  letter-spacing: 0;
  margin-bottom: 0;
}

.card-body,
.card-body[style] {
  background: var(--ims-cream) !important;
}

.footer-copyright {
  color: var(--ims-text-muted);
  font-size: 12px;
}

.form-control,
.custom-select,
.dataTables_wrapper .dataTables_filter input,
.dataTables_wrapper .dataTables_length select {
  background-color: #fff !important;
  border: 1px solid #c8d0d8 !important;
  border-radius: 6px !important;
  color: var(--ims-text-primary) !important;
  font-family: "Be Vietnam Pro", Tahoma, Geneva, sans-serif !important;
  font-weight: 500;
}

.form-control:focus,
.custom-select:focus,
.dataTables_wrapper .dataTables_filter input:focus,
.dataTables_wrapper .dataTables_length select:focus {
  border-color: var(--ims-gold) !important;
  box-shadow: 0 0 0 .16rem rgba(222, 174, 39, .25) !important;
}

label,
.font-weight-bold {
  color: inherit;
}

.btn,
input[type=button],
input[type=reset],
input[type=submit],
.button-container {
  border-radius: 8px !important;
  border-style: solid !important;
  border-width: 2px !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .22), inset 0 0 0 1px rgba(255, 255, 255, .18);
  font-family: "Be Vietnam Pro", Tahoma, Geneva, sans-serif !important;
  font-weight: 700 !important;
  min-height: 38px;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, color .15s ease, transform .15s ease;
}

.btn-primary,
.btn-success,
.btn-info,
input[type=button].btn-block,
.button-container {
  background: #075a17 !important;
  border-color: var(--ims-gold) !important;
  color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
input[type=button].btn-block:hover,
.button-container:hover {
  background: var(--ims-gold) !important;
  border-color: #fffbf1 !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .26), 0 0 0 3px rgba(222, 174, 39, .22);
  color: var(--ims-text-primary) !important;
  text-decoration: none;
}

.btn:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus,
.button-container:focus {
  box-shadow: 0 0 0 3px rgba(222, 174, 39, .35), 0 2px 0 rgba(0, 0, 0, .22) !important;
  outline: 0 !important;
}

.btn-warning,
.btn-secondary,
.btn-outline-secondary:hover {
  background: var(--ims-gold) !important;
  border-color: #044811 !important;
  color: var(--ims-text-primary) !important;
}

.btn-outline-secondary {
  background: #fff !important;
  border-color: var(--ims-green) !important;
  color: var(--ims-green) !important;
}

.table-responsive,
.table-responsive[style],
.dm-table-wrap,
.dm-graph-section,
.dm-line-panel,
.dm-summary-panel,
.modal-body {
  background: var(--ims-panel) !important;
  border-color: var(--ims-line) !important;
}

.table-responsive,
.dm-table-wrap,
.dm-graph-section {
  border: 1px solid var(--ims-line);
  border-radius: 6px;
  box-shadow: var(--ims-shadow);
}

.table {
  background: #fff;
  color: var(--ims-text-primary);
}

.table thead,
.table thead[style],
table.dataTable thead,
table.dataTable thead[style] {
  background: #2f343a !important;
  color: #fff !important;
  line-height: 1.35 !important;
}

.table thead th,
table.dataTable thead th {
  border-color: #454b52 !important;
  color: #fff !important;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.table-bordered td,
.table-bordered th {
  border-color: var(--ims-line) !important;
}

.table-hover tbody tr:hover,
table.dataTable tbody tr:hover {
  background-color: #f5f8f6 !important;
}

.dataTables_wrapper,
.dataTables_info,
.dataTables_length,
.dataTables_filter,
.page-link {
  color: var(--ims-text-primary) !important;
  font-family: "Be Vietnam Pro", Tahoma, Geneva, sans-serif !important;
}

.page-item.active .page-link {
  background-color: var(--ims-green) !important;
  border-color: var(--ims-green) !important;
}

.page-link {
  border-color: var(--ims-line) !important;
}

.page-link:hover {
  background-color: var(--ims-green-soft) !important;
  color: var(--ims-text-primary) !important;
}

mark {
  background: var(--ims-gold) !important;
  color: var(--ims-text-primary) !important;
}

.modal-header {
  background: var(--ims-green) !important;
  color: #fff !important;
  border-bottom-color: var(--ims-green) !important;
}

.modal-footer {
  background: var(--ims-cream) !important;
  border-top-color: var(--ims-line) !important;
}

.alert-info {
  background-color: #eef6ef !important;
  border-color: var(--ims-green-soft) !important;
  color: var(--ims-green) !important;
}

.alert-warning {
  background-color: #fff7df !important;
  border-color: var(--ims-gold) !important;
  color: #5f4700 !important;
}

.status-pill {
  border-radius: 99px !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
}

.status-good {
  background: #e7f3ea !important;
  color: var(--ims-green) !important;
}

.status-spoiled,
.status-cancelled {
  background: #f8e7e7 !important;
  color: #8a1f1f !important;
}

.dm-graph-title,
.dm-summary-title {
  color: var(--ims-green) !important;
  font-weight: 800 !important;
}

.dm-line-path {
  stroke: var(--ims-green) !important;
}

.dm-line-area {
  fill: var(--ims-green-soft) !important;
}

.dm-line-point {
  stroke: var(--ims-green) !important;
}

.dm-line-point:hover {
  fill: var(--ims-gold) !important;
  stroke: #8a6a0c !important;
}

.dm-mini-bar {
  background: var(--ims-green) !important;
}

.handle {
  display: none !important;
}

input[type=button].btn-block {
  min-height: 56px;
  padding: 12px !important;
}

@media (max-width: 768px) {
  html {
    zoom: 100% !important;
  }

  .card-header .float-left,
  .card-header .float-right {
    float: none !important;
  }

  .card-header form {
    margin-top: 12px;
  }
}

.ims-home-navbar {
  align-items: center;
  background: var(--ims-green);
  border-bottom: 1px solid var(--ims-green);
  box-shadow: 0 5px 16px rgba(4, 72, 17, .12);
  display: grid;
  gap: 18px;
  grid-template-columns: minmax(260px, 1fr) auto minmax(230px, 1fr);
  min-height: 72px;
  padding: 12px 28px;
}

.ims-home-brand,
.ims-home-portal {
  align-items: center;
  color: #eff1f6 !important;
  display: inline-flex;
  gap: 10px;
  text-decoration: none !important;
}

.ims-home-brand {
  font-size: 1.18rem;
  font-weight: 800;
}

.ims-home-brand img {
  background: #fff;
  border-radius: 6px;
  height: 42px;
  object-fit: contain;
  padding: 4px;
  width: 42px;
}

.ims-home-clock {
  color: #fffbf1;
  font-size: .94rem;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: .01em;
  text-align: center;
  white-space: nowrap;
}

.ims-home-portal {
  border: 1px solid rgba(255, 255, 255, .35);
  border-radius: 8px;
  font-size: .86rem;
  font-weight: 800;
  justify-self: end;
  padding: 9px 12px;
}

.ims-home-portal img {
  height: 18px;
  margin: 0;
  width: 18px;
}

.ims-home-brand:hover,
.ims-home-portal:hover {
  color: var(--ims-gold) !important;
}

.ims-home-portal:hover {
  border-color: var(--ims-gold);
}

@media (max-width: 900px) {
  .ims-home-navbar {
    grid-template-columns: 1fr;
    justify-items: start;
    padding: 14px 18px;
  }

  .ims-home-clock {
    text-align: left;
    white-space: normal;
  }

  .ims-home-portal {
    justify-self: start;
  }
}
#dm_table thead th {
  background-color: #eef6ef !important;
  border-color: #9fb9a4 !important;
  color: #12351a !important;
  font-weight: 800 !important;
  letter-spacing: .02em;
  text-shadow: none !important;
  text-transform: uppercase;
}

#dm_table thead .column-group {
  background-color: #044811 !important;
  border-color: #083f13 !important;
  border-bottom: 2px solid #deae27 !important;
  color: #fffbf1 !important;
  font-weight: 800 !important;
  letter-spacing: .03em;
  text-align: center;
}

#dm_table thead .sticky-col-1,
#dm_table thead .sticky-col-2,
#dm_table thead .sticky-col-3 {
  background-color: #eef6ef !important;
  color: #12351a !important;
  text-shadow: none !important;
}
#dm_table thead tr:nth-child(2) th,
#dm_table thead tr:nth-child(2) th[style] {
  background-color: #eef6ef !important;
  color: #12351a !important;
  text-shadow: none !important;
}
/* DM search detail page polish */
.dm-detail-navbar {
  min-height: 64px;
  padding: 10px 22px !important;
  gap: 16px;
  border-bottom: 4px solid var(--ims-gold);
}

.dm-detail-navbar .navbar-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  color: #fff !important;
  font-weight: 800;
  line-height: 1.15;
}

.dm-detail-navbar .navbar-brand img {
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.dm-detail-back-btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  margin: 0 0 0 auto !important;
  padding: 8px 16px !important;
  border: 2px solid #fff7d8 !important;
  border-radius: 7px !important;
  background: var(--ims-gold) !important;
  color: var(--ims-text-primary) !important;
  box-shadow: 0 3px 0 rgba(0, 0, 0, .22);
}

.dm-detail-back-btn img {
  width: 18px;
  height: 18px;
  margin: 0;
}

.dm-detail-back-btn:hover,
.dm-detail-back-btn:focus {
  background: #fff3bd !important;
  color: var(--ims-text-primary) !important;
  border-color: var(--ims-green) !important;
  transform: translateY(-1px);
}

.dm-detail-main-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 12px 18px !important;
  border-bottom: 4px solid var(--ims-gold) !important;
}

.dm-detail-main-header h5 {
  display: flex;
  align-items: center;
  min-height: 38px;
  margin: 0 !important;
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: 0;
}

.dm-detail-main-header form {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 !important;
}

.dm-detail-main-header .form-control {
  min-height: 38px;
  border-radius: 6px !important;
}

.dm-detail-main-header .btn {
  min-height: 38px;
  border-radius: 6px !important;
}

.dm-detail-tab-card {
  border: 1px solid var(--ims-border) !important;
  border-radius: 8px !important;
  overflow: hidden;
  box-shadow: var(--ims-shadow-soft);
}

.dm-detail-tab-header {
  padding: 12px 14px !important;
  border-bottom: 3px solid var(--ims-gold) !important;
}

#one-list,
#two-list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 0 !important;
  border-bottom: 0 !important;
}

#one-list .nav-item,
#two-list .nav-item {
  margin: 0;
}

#one-list .nav-link,
#two-list .nav-link {
  min-height: 38px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .32) !important;
  border-radius: 6px !important;
  background: rgba(255, 255, 255, .08) !important;
  color: #fffdf4 !important;
  font-weight: 800;
  line-height: 1.1;
}

#one-list .nav-link:hover,
#two-list .nav-link:hover {
  background: rgba(255, 255, 255, .18) !important;
  border-color: var(--ims-gold) !important;
  color: #fff !important;
}

#one-list .nav-link.active,
#two-list .nav-link.active {
  background: var(--ims-gold) !important;
  border-color: #fff7d8 !important;
  color: var(--ims-text-primary) !important;
  box-shadow: 0 2px 0 rgba(0, 0, 0, .18);
}

@media (max-width: 768px) {
  .dm-detail-navbar,
  .dm-detail-main-header {
    align-items: stretch;
    flex-direction: column;
  }

  .dm-detail-back-btn,
  .dm-detail-main-header form {
    width: 100%;
  }

  .dm-detail-main-header form .form-control,
  .dm-detail-main-header form .btn {
    width: 100%;
  }
}
/* DM table scrollbar */
.dm-table-wrap {
  scrollbar-color: var(--ims-gold) #e9f1ea;
  scrollbar-width: thin;
}

.dm-table-wrap::-webkit-scrollbar {
  width: 14px;
  height: 14px;
}

.dm-table-wrap::-webkit-scrollbar-track {
  background: #e9f1ea;
  border: 1px solid #c8d8ca;
}

.dm-table-wrap::-webkit-scrollbar-thumb {
  background: var(--ims-gold);
  border: 3px solid #e9f1ea;
  border-radius: 99em;
}

.dm-table-wrap::-webkit-scrollbar-thumb:hover {
  background: #b98b12;
}