/* center the table content */
.table-centered {
  text-align: center;
}

/* change side bar style  */
body[data-sidebar="dark"] .vertical-menu {
  background: black;
}

body[data-sidebar="dark"] #sidebar-menu ul li a {
  color: white;
}

body[data-sidebar="dark"] #sidebar-menu ul li a i {
  color: white;
}

body[data-sidebar="dark"] #sidebar-menu ul li a.active i {
  color: #0d8240 !important;
}

body[data-sidebar="dark"] .mm-active .active {
  color: #0d8240 !important;
}

body[data-sidebar="dark"].vertical-collpsed .vertical-menu #sidebar-menu>ul>li:hover>a {
  background: black;
  color: white;
}

body[data-sidebar="dark"] .navbar-brand-box {
  background: white;
}


/* cursor not allowed */
.cna {
  cursor: not-allowed;
}


/* app search  */
.app-search {
  padding: 0px !important;
}

.gap-1 {
  gap: 5px;
}



/*  */
.page-title,
.form-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 20px;
}

.form-container {
  max-width: 500px;
  margin-inline: auto;

  background-color: white;
  padding: 20px;
  border-radius: 5px;
}

.form-container.form-container-lg {
  max-width: 700px;
}



/* disabled input */
input:disabled {
  background-color: rgb(236, 236, 236) !important;
}


table td {
  white-space: nowrap;
}

table .table-row-id-link{
  font-weight: 600;
  text-decoration: underline !important;
}

.filter-input {
  min-width: 100px;

}

.w-fit {
  width: fit-content;
}


.cursor-pointer{
  cursor: pointer;
}


/* style btn where has icon */
.btn:has(>i) {
  display: flex ;
  align-items:center ;
  gap: 2px;
}
.btn:has(>i) i{
  font-size: 1rem;
  position: relative;
  top: -1px;
}


label.required::after{
  content: "*";
  color: red;
}



/* select2 customization */

.select2-container .select2-selection--single{
  height: 38px;
}
.select2-container--default .select2-selection--single{
  border: 1px solid #d7d7d7;
}
.select2-container--default .select2-selection--single .select2-selection__rendered{
  line-height: 36px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow{
  top: 7px;
}

.select2-container.select2-container--default{
  width: 100% !important;
  min-width: 150px !important;
}