/* Generic Plugin CSS */
body,
p,
button {
  /* font-family: 'Josefin Sans', sans-serif !important; */
  /* font-family: "Raleway", sans-serif !important; */
  font-family: "Nunito", sans-serif !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: 'Josefin Sans', sans-serif !important;
  /* font-family: "Raleway", sans-serif !important; */
  /* font-family: "Nunito", sans-serif !important; */
}

h1 {
  color: #008080;
  font-size: 2em !important;
}

.h4,
h4 {
  font-size: 0.85rem;
}

body {
  font-size: 14px;
}

.mt-20 {
  margin-top: 20px;
}

.bg-light-success {
  /* background-color: #d1e7dd !important; */
  background-color: #f0fafa !important;
}

.bg-light-primary {
  /* background-color: #cfe2ff !important; */
  background-color: #e8f1ff !important;
}

.bg-light-info {
  /* background-color: #cff4fc !important; */
  background-color: #e0f5fa !important;
}



/* Tabs CSS starts here... */

.tab button.active {
  color: #008080;
  background-color: #ecf6ff;
}

/* Style the buttons inside the tab */
.tab button {
  background-color: inherit;
  float: left;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 14px 16px;
  transition: 0.3s;
  font-size: 16px;
}


.tab button:hover {
  background-color: #ddd;
}

.tabcontent {
  display: none;
  animation: fadeEffect 1s;
  /* padding: 6px 12px;
  border: 1px solid #ccc; */
  /* border-top: none; */
}


/* Go from zero to full opacity */
@keyframes fadeEffect {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Tabs CSS ends here... */

/* Datatables CSS starts here... */

.dataTables_wrapper .dataTables_length select {
  width: 50px;
}

table.dataTable thead th,
table.dataTable tfoot th {
  font-weight: bold;
  /* background: #ecf6ff; */
  background: #314158e8;
  color: #fff;
}

table.dataTable thead tr,
table.dataTable tfoot tr {
  border-top-right-radius: 10px !important;
  border-top-left-radius: 10px !important;
}

div.dataTables_processing {
  margin-top: 0px !important;
}

/* CSS for Icon in Datatable */
.sync-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  /* Circular shape */
  background-color: #28a745;
  /* Green for synced */
  color: white;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
}

.sync-circle.inactive {
  background-color: #dc3545;
  /* Red for not synced */
}

/* Orders CSS for Status Indication */

.badge-success {
  color: white;
  background-color: #1BC5BD;
  padding: 5px;
  border-radius: 4px;
}

.badge-warning {
  color: black;
  background-color: #FFA800;
  padding: 5px;
  border-radius: 4px;
}

.badge-danger {
  color: white;
  background-color: #F64E60;
  padding: 5px;
  border-radius: 4px;
}

/* Datatables CSS ends here... */

#clx-sync-bar {
  transition: width 0.5s ease;
}

.progress {
  height: 14px !important;
}

.clx-sync-text-pull {
  color: #fff;
}

.card {
  border: 1px solid #e1e5eb;
  border-radius: 8px;
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
}

.card-header {
  background-color: #f8f9fa;
  font-weight: bold;
  font-size: 1.1rem;
}

.form-switch .form-check-input {
  width: 3rem;
  height: 1.5rem;
  background-color: #dee2e6;
  border: none;
  transition: background-color 0.2s;
}

.form-switch .form-check-input:checked {
  background-color: #198754;
  background-image: none;
}

.form-switch .form-check-input:focus {
  box-shadow: 0 0 0 0.2rem rgba(25, 135, 84, 0.25);
}

.form-select,
.form-control {
  border-radius: 6px;
}

button[type="submit"].btn-success {
  background-color: #198754;
  border-color: #198754;
}

button[type="submit"].btn-success:hover {
  background-color: #157347;
  border-color: #146c43;
}

label.form-label {
  font-weight: 600;
  margin-bottom: 5px;
}