#btnapprove {
  width: 100px;
  height: 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #8BC34A;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

#btnreject {
  width: 100px;
  height: 25px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 2.5px;
  font-weight: 500;
  color: #ff0000;
  background-color: #fff;
  border: none;
  border-radius: 45px;
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease 0s;
  cursor: pointer;
  outline: none;
  }

#btnapprove:hover {
  background-color: #2EE59D;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

#btnreject:hover {
  background-color: #ff0000;
  box-shadow: 0px 15px 20px rgba(46, 229, 157, 0.4);
  color: #fff;
  transform: translateY(-7px);
}

ul.listing-grid>li {
  border-radius: 15px;
}

ul.listing-grid>li,
ul.listing-grid>li:hover {
  background-color: rgba(255, 255, 255, 1); /*#3CCF4E;*/
  border: 0px;
}

.fieldtype-image-container {
    border: none;
}

.btn-bd-primary {
  --bs-btn-font-weight: 600;
  --bs-btn-color: var(--bs-white);
  --bs-btn-bg: var(--bd-violet);
  --bs-btn-border-color: var(--bd-violet);
  --bs-btn-border-radius: .5rem;
  --bs-btn-hover-color: var(--bs-white);
  --bs-btn-hover-bg: #{shade-color($bd-violet, 10%)};
  --bs-btn-hover-border-color: #{shade-color($bd-violet, 10%)};
  --bs-btn-focus-shadow-rgb: var(--bd-violet-rgb);
  --bs-btn-active-color: var(--bs-btn-hover-color);
  --bs-btn-active-bg: #{shade-color($bd-violet, 20%)};
  --bs-btn-active-border-color: #{shade-color($bd-violet, 20%)};
}

.title-btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 20px;
  border-radius: 25px;
  background-color: #ffffff; /* White background */
  color: #28a745; /* Success color */
  border: 2px solid #28a745; /* Outlined border */
  font-size: 16px;
  font-weight: bold;
  text-transform: none;
  text-decoration: none;
  margin-bottom: 20px; /* Space below the title */
}

.row-selected, .row-selected td{
   background: rgb(0,255,156, 0.2) !important;  /*#dff0d8*/
}

.alert-success{
   background: rgb(0,255,156, 0.2) !important;  /*#dff0d8*/
}

.alert-danger{
   background: rgb(217, 22, 86, 0.5) !important;  /*#dff0d8*/
   color: white !important;  /*#dff0d8*/
}

/* #divInfoDeleteUser styling */
#divInfoDeleteUser {
    background-color: white;
    border-radius: 15px; /* Round corners */
    width: 100%; /* Full width */
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Optional: adds a subtle shadow */
    font-size: 16px; /* Optional: adjust text size */
    display: flex;
    align-items: center;
}

/* Blinking effect for #textInfoDeleteUser */
@keyframes blink {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

#textInfoDeleteUser {
    animation: blink 1s infinite; /* Apply the blinking animation */
    margin-right: 10px; /* Space between icon and text */
    font-size: 20px; /* Adjust icon size */
}

#dateRange,
.daterangepicker,
.daterangepicker * {
  color: #222 !important; /* Ganti #222 dengan warna teks yang kamu mau */
}

/* Kalau background-nya juga gelap, mungkin perlu ubah background supaya kontras */
.daterangepicker {
  background-color: #f9f9f9 !important; /* warna latar yang lebih terang */
}

/* Untuk tombol dan elemen spesifik */
.daterangepicker .applyBtn,
.daterangepicker .cancelBtn {
  color: #222 !important;
  background-color: #e0e0e0 !important;
  border-color: #ccc !important;
}

/* Untuk header bulan dan hari */
.daterangepicker table.table-condensed th {
  color: #444 !important;
}

/* Untuk tanggal yang aktif atau disorot */
.daterangepicker table.table-condensed td.active,
.daterangepicker table.table-condensed td.in-range {
  background-color: #cde4ff !important;
  color: #222 !important;
}