.dataTables_wrapper > .row.dt-row {
  margin-top: 20px;
}

.dataTables_paginate {
  float: right;
}

.dataTables_length label,
.dataTables_filter label {
  width: 100%;
}

.dataTables_filter label input[type="search"] {
  display: inline;
  width: 30%;
}

.dataTables_length label select {
  width: 80px;
  display: inline;
}

.dataTables_info {
  margin-top: 10px;
}

.w-5 {
  width: 5% !important;
}

.w-10 {
  width: 10% !important;
}

.w-15 {
  width: 15% !important;
}

.w-20 {
  width: 20% !important;
}

input[type="checkbox"] {
  border: 1px solid #d7d7d7;
}

input::placeholder {
  color: red;
  opacity: 1;
}

.text-gray {
  color: var(--bs-gray);
}

.scrollable-table {
  max-height: 500px; /* Adjust the height as needed */
  overflow-y: auto;
}

/* status css */
.status-container {
  position: relative;
  width: 35px;
  height: 35px;
}

.status-circle {
  --circle-color: #ff0000; /* Default color */

  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 40%;
  border-radius: 50%;
  background-color: var(--circle-color);
  opacity: 0.8;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--circle-color-rgb), 0.8);
  }
  70% {
    transform: scale(1.5);
    box-shadow: 0 0 0 80px rgba(var(--circle-color-rgb), 0);
  }
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(var(--circle-color-rgb), 0);
  }
}
/* end */

/* Base styling for table headers */
table.dataTable thead th {
  position: relative;
  padding-right: 30px; /* Space for sorting icon */
}

/* Default unsorted state */
table.dataTable thead th.dt-orderable-asc::after,
table.dataTable thead th.dt-orderable-desc::after {
  font-family: 'Material Symbols Outlined';
  content: 'unfold_more'; /* ↕ */
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: gray;
}

/* Ascending sort */
table.dataTable thead th.dt-ordering-asc::after {
  content: 'keyboard_arrow_up'; /* ↑ */
  color: black;
  font-size: 18px;
}

/* Descending sort */
table.dataTable thead th.dt-ordering-desc::after {
  content: 'keyboard_arrow_down'; /* ↓ */
  color: black;
  font-size: 18px;
}

.dt-length select {
  width: 80px;
  display: inline;
}

.dt-length label {
  display: inline;
  padding-left: 5px;
}

.dt-search label {
  display: inline;
  padding-right: 5px;
}

.dt-search input[type=search] {
  display: inline;
  width: 74%;
}

.editor {
  width: 100%;
  min-height: 25vh;
  height: 150px;
  resize: vertical;
  overflow: hidden;
  border: 1px solid #ddd;
}

.form-inline {
  padding: .45rem .9rem;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--bs-body-color);
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-color: var(--bs-secondary-bg);
  background-clip: padding-box;
  border: 1px solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  -webkit-transition: border-color .15sease-in-out, -webkit-box-shadow .15sease-in-out;
  transition: border-color .15sease-in-out, -webkit-box-shadow .15sease-in-out;
  transition: border-color .15sease-in-out, box-shadow .15sease-in-out;
  transition: border-color .15sease-in-out, box-shadow .15sease-in-out, -webkit-box-shadow .15sease-in-out;
}

.vh-50 {
  height: 50vh !important;
}

.fm-mono {
  font-family: monospace !important;
}

.output-log {
  float: left;
  margin-right: 7px;
  font-size: 19px;
}

.modal-xxl{
  --bs-modal-width: 95vw;
}

.badge-label {
  padding: 5px !important;
}

input::placeholder, textarea::placeholder {
  color: #a4a3a3 !important; /* Light gray */
}