body {
  font-family: poppins, sans-serif;
  background: #f9fbfd;
  color: #34364a;
}

.bg-primary {
  background-color: #006634 !important;
}

.icon-title {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #34364a;
  border: 2px solid #34364a;
  width: 18px;
  height: 18px;
  padding: 14px;
  font-size: 18px;
  border-radius: 41%;
  margin-right: 12px;
  margin-bottom: 8px;
}

.breadcrumb .breadcrumb-item a:hover {
  color: #615fff !important;
  text-decoration: none;
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #615fff;
  --bs-btn-border-color: #615fff;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4f39f6;
  --bs-btn-hover-border-color: #4f39f6;
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #4f39f6;
  --bs-btn-active-border-color: #4f39f6;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #615fff;
  --bs-btn-disabled-border-color: #615fff;
}

.table {
  --bs-table-striped-bg: #f9f9f9;
}

tbody,
td,
tfoot,
th,
thead,
tr {
  border-color: #f9f9f9;
  border-style: solid;
  border-width: 0;
}

.form-search input {
  border-color: #ced4da;
  padding: 0.5rem 1.5rem;
  padding-right: calc(2em + 1.2rem);
  background-image: url(../img/search-icon.svg);
  background-repeat: no-repeat;
  background-position: right calc(1em + 0.3rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-search .was-validated .form-control:invalid,
.form-control.is-invalid {
  border-color: #dc3545;
  padding-right: calc(2em + 1.2rem);
  background-image: url(../img/search-icon.svg);
  background-repeat: no-repeat;
  background-position: right calc(1em + 0.3rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-search .was-validated .form-control:valid,
.form-control.is-valid {
  border-color: #28a745;
  padding-right: calc(2em + 1.2rem);
  background-image: url(../img/search-icon.svg);
  background-repeat: no-repeat;
  background-position: right calc(1em + 0.3rem) center;
  background-size: calc(0.75em + 0.375rem) calc(0.75em + 0.375rem);
}

.form-check-input:checked {
  background-color: #615fff;
  border-color: #615fff;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background: #615fff;
  border-color: #615fff;
}

.flatpickr-day {
  border-radius: 15px;
}

.pagination-pill .page-link {
  display: flex;
  border-radius: 41% !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
}

.page-link {
  position: relative;
  display: block;
  color: #6c757d;
  text-decoration: none;
  background-color: #fff;
  border: 1px solid #dee2e6;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out,
    border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

.page-link:hover {
  color: #615fff;
  text-decoration: none;
  background-color: #fff;
  border: 2px solid #615fff;
}

.page-item .page-link {
  margin: 0 7px;
}

.page-item.active .page-link {
  z-index: 3;
  color: #fff;
  font-weight: 500;
  background-color: #615fff;
}

.footer .copyright a {
  color: #615fff;
}

.footer .copyright a:hover {
  color: #4f39f6;
}

/* ===========================
   NAVBAR
   =========================== */
.navbar {
  min-height: 58px;
  padding-top: .6rem;
  padding-bottom: .6rem;
}

/* ===========================
   MAIN CONTENT — spacing
   =========================== */
main .container {
  padding-top: 4.5rem !important;
  padding-bottom: 2rem;
}

@media (max-width: 576px) {
  main .container {
    padding-left: .85rem;
    padding-right: .85rem;
  }
}

/* ===========================
   FORM CARD
   =========================== */
.bg-white.rounded-4.shadow-sm {
  border: 1px solid #f0f0f5;
}

@media (max-width: 576px) {
  .bg-white.rounded-4.shadow-sm {
    padding: 1rem !important;
    border-radius: .75rem !important;
  }
}

/* ===========================
   FORM CONTROLS — mobile friendly
   =========================== */
@media (max-width: 576px) {
  .form-control,
  .form-select {
    font-size: .92rem;
    padding: .45rem .75rem;
  }
  .form-label {
    font-size: .88rem;
    margin-bottom: .25rem;
  }
  .row.mb-3 > [class*="col-"] {
    margin-bottom: .6rem;
  }
}

/* ===========================
   HERO HEADER ENTRI
   =========================== */
.entri-hero {
  box-shadow: 0 4px 18px rgba(0,102,52,.18);
}

@media (max-width: 576px) {
  .entri-hero {
    padding: .85rem 1rem !important;
    border-radius: .75rem !important;
  }
}

/* ===========================
   ALERT JUDUL FORM
   =========================== */
.alert.alert-primary.rounded-4 {
  background: #eef0ff;
  border: none;
  color: #3b3fa0;
  font-size: .92rem;
}

/* ===========================
   BUTTON SIMPAN & BATAL
   =========================== */
@media (max-width: 576px) {
  .d-grid.gap-3.d-sm-flex .btn,
  .d-grid .btn {
    width: 100%;
    margin-bottom: .5rem;
  }
}

/* ===========================
   FOOTER
   =========================== */
.footer {
  font-family: 'Poppins', sans-serif;
}