/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */
.auth-wrapper.auth-basic.px-2 {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  min-height: 100vh;
}

.content-wrapper {
  background-color: #fff;
  padding: 17px 30px;
  border-radius: 20px;
  box-shadow: rgba(34, 41, 47, 0.05) 0px 0px 15px 0px;
}

html .content .content-wrapper .content-header-title {
  color: #000;
  font-weight: bold;
}

.table:not(.table-dark):not(.table-light) thead:not(.table-dark) th,
.table:not(.table-dark):not(.table-light) tfoot:not(.table-dark) th {
  background-color: #85171a;
  color: #fff;
  border-color: #d3d3d3;
}

.bg-yellow {
  background: #fef3ac;
  border-color: #d3d3d3;
}

h5.header-second {
  font-weight: bold;
  color: #000;
  padding: 0;
  margin: 0 !important;
}

thead,
tbody,
tfoot,
tr,
td,
th {
  border-color: #d3d3d3;
}

#workunit-table_wrapper h5 {
  font-weight: bold;
  color: #000;
  padding: 0;
  margin: 0 !important;
}

table.table-bordered.dataTable th:first-child,
table.table-bordered.dataTable th:first-child,
table.table-bordered.dataTable td:first-child,
table.table-bordered.dataTable td:first-child {
  padding-left: 0;
  padding-right: 0;
  padding-top: 0;
  padding-bottom: 0;
}

.child-table td:first-child,
.child-table th:first-child {
  border-left: none !important;
}

.child-table td:last-child,
.child-table th:last-child {
  border-right: none !important;
}

/* Style default untuk ikon */
.dt-control svg,
.dt-child-control svg {
  width: 20px;
  /* Ukuran default */
  height: 20px;
  /* Ukuran default */
  fill: #6c757d;
  /* Warna default (abu-abu) */
  color: #fff;
  transition: fill 0.3s ease;
  /* Animasi perubahan warna */
  margin: 10px;
}

/* Style untuk ikon ketika aktif (expand) */
.dt-control svg.feather-minus-circle,
.dt-child-control svg.feather-minus-circle {
  fill: #dc3545;
  /* Warna merah ketika aktif */
  fill: #dc3545;
  /* Warna merah ketika aktif */
  color: #fff;
}

/* Style untuk ikon ketika tidak aktif (collapse) */
.dt-control svg.feather-plus-circle,
.dt-child-control i.feather-plus-circle {
  fill: #6c757d;
  /* Warna default (abu-abu) */
}

/* Style untuk ukuran ikon */
.dt-control i,
.dt-child-control i {
  width: 24px;
  /* Ukuran ikon */
  height: 24px;
  /* Ukuran ikon */
}

.category-row .bg-warning {
  background-color: #fef3ac !important;
  font-weight: bold !important;
}

.dt-child-control {
  padding: 20px;
}

.modal-dialog-end {
  position: fixed;
  right: 0;
  margin: 0;
  max-width: 40%;
  width: 100%;
  height: 100%;
}

.modal-dialog-top-end {
  position: fixed;
  right: 0;
  margin: 0;
  max-width: 40%;
  width: 100%;
}

.modal-content.full-height {
  height: 100vh;
  border-radius: 0;
}

.modal-level-2 {
  z-index: 1070;
}

.modal-backdrop-level-2 {
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1065;
}

.form-label {
  color: #000;
  font-weight: bold;
}

.modal-title.fw-bold.text-black {
  font-size: 20px;
}

.badge-status {
  padding: 5px 10px;
  border-radius: 12px;
  font-weight: bold;
}

.badge-priority {
  padding: 3px 10px;
  border-radius: 8px;
  font-size: 4px;
}

.badge-running {
  background-color: #b0e0a8;
  color: black;
}

.badge-planning {
  background-color: #f8e08e;
  color: black;
}

.badge-revision {
  background-color: #e0a8a8;
  color: black;
}

.icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.icon-circle {
  width: 50px;
  height: 50px;
  background-color: #d9ebe2;
  /* Warna hijau muda */
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

.icon-circle i {
  width: 40px;
  height: 40px;
  color: #006400;
  /* Warna hijau tua */
}

.main-menu.menu-light .navigation li a {
  font-size: 13px;
}

#customAlertIconDanger {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  /* Sesuaikan ukuran */
  height: 60px;
  background-color: rgba(220, 53, 69, 0.2);
  /* Warna latar belakang merah muda */
  border-radius: 50%;
  /* Membuat elemen menjadi lingkaran */
  position: relative;
  margin: auto;
}

#customAlertIconDanger i {
  color: #a71d2a;
  /* Warna merah tua untuk ikon */
  font-size: 24px;
  /* Ukuran ikon */
}

.badge-info-item {
  background-color: #f5f3f4;
  /* Warna abu-abu muda */
  border-radius: 5px;
}

.badge-info-item-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2px;
  position: relative;
  padding: 2px 5px;
  margin-right: 5px;
}

.btn-primary-reverse {
  color: #85171a;
  border: 1px solid #85171a;
  background-color: transparent;
}
.btn-primary-reverse:hover {
  box-shadow: #85171a;
}

.bg-status-selesai {
  background-color: rgba(133, 23, 26, 0.3) !important;
}

.bg-status-berjalan {
  background-color: rgba(243, 143, 47, 0.7) !important;
}

.bg-status-belum-mulai {
  background-color: rgba(254, 243, 172, 0.7) !important;
}

.status-active {
  background-color: #006400 !important;
  color: #fff !important;
}

.status-inactive {
  background-color: #85171a !important;
  color: #fff !important;
}

.absolute-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 10px;
}