:root {
  /* Main Theme */
  --navy-utama: #d80813;
  --navy-head: #36000b;
  --navy-hover: #f62e2e;
  --navy-utama-2: #0152bd;
  --navy-head-2: #013f8b;
  --navy-black: #171717;
  --navy-black2: #363636;
  --navy-gray: #6d6d6d;
  --navy-white: #e8e8e8;
  --navy-high: #002c5a;
  /* End of Main Theme */
}

html,
body {
  width: 100%;
  height: 100%;
}

/* body{
  background: linear-gradient(180deg, rgba(255,255,255,1) 0%, rgba(0,112,245,1) 100%);
} */

/*@media (min-width: 576px) {*/
/*@media (min-width: 992px) {*/
@media (min-width: 1200px) {
  body {
    /*overflow-y: hidden;*/
  }
}

body.boxed-layout.wrapper {
  max-width: 100%;
  max-height: 100%;
  margin: 0 auto;
  -webkit-box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
  box-shadow: 0 0 35px 0 rgba(154, 161, 171, 0.15);
}

body.boxed-layout.navbar-custom {
  max-width: 100%;
  margin: 0 auto;
}

.tsm_font {
  font-family: "bordeauxblackregular", sans-serif;
}

.progress_bar {
  position: absolute; /* fixed or absolute */
  margin: auto;
  top: 30%;
  /*text-align: center;*/
  /*right: 50%;*/
  /*height:100px;*/
  z-index: 9999; /* Sit on top */
  display: none;
}

.box-shadow {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.5);
}

li.nol {
  padding: 0px;
}

.container.p-0 {
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: center;
}

.card-back {
  /* height: 400px; */
  width: 300px;
  border-radius: 1rem;
}

.img-center {
  display: block;
  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
}

form img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  object-position: 25% 25%;
}

.line_title {
  display: none;
}

.line_title.active {
  display: block;
}

.tab-pane {
  display: none;
}

.tab-pane.active {
  display: block;
}

.tab-pane .form-control-user {
  font-size: 1rem;
  border-radius: 1rem;
  /* padding: 1.5rem 1rem; */
}

.tab-pane .btn-user {
  font-size: 1rem;
  border-radius: 1rem;
  padding: 0.75rem 1rem;
}

.btn-block {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
}

/* .btn.btn-outline-primary {
  width: 6rem;
} */

.btn.double-btn {
  width: 9rem;
}

.bi-cart {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-radius: 10px;
  background: #90ee90;
  color: #2e992e;
  font-size: x-large;
}

.bi-truck {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-radius: 10px;
  background: #87ceeb;
  color: #477ad1;
  font-size: x-large;
}
.bi-receipt {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-radius: 10px;
  background: #ffc0cb;
  color: #ff6347;
  font-size: x-large;
}
.bi-archive {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
  border-radius: 10px;
  background: #d3d3d3;
  color: #a9a9a9;
  font-size: large;
}

.nom-col {
  font-weight: 600;
}
.btn.btn-card-grap {
  background-color: var(--navy-black2);
  color: var(--navy-white);
}
.btn-card-grap:hover {
  background-color: var(--navy-black);
}
.btn.btn-card-detail {
  /* border: 2px solid #87ceeb; */
  color: var(--navy-head);
}
.btn-card-detail:hover {
  /* border: 2px solid var(--navy-head); */
  background: var(--navy-head);
  color: var(--navy-white);
}
.btn.btn-card-print {
  background-color: white;
  color: var(--navy-black);
}
.btn-card-print:hover {
  background-color: var(--navy-utama);
  color: white;
}
.bg-black-transparent {
  background-color: rgba(0, 0, 0, 0.5);
}

.btn-maroon {
  color: #fff;
  background-image: radial-gradient(
    circle farthest-corner at 10% 20%,
    rgba(226, 37, 37, 1) 0%,
    rgba(211, 49, 49, 1) 82.8%
  );
  transition: 0.5s;
  background-size: 200% auto;
  /* background-color: var(--navy-utama); */
  /* border-color: var(--navy-head); */
}
.btn-check:focus + .btn-maroon,
.btn-maroon:focus,
.btn-maroon:hover {
  color: #fff;
  background-position: right center;
  background-image: linear-gradient(
    to right,
    #f66565 0%,
    #c20202 51%,
    #ff7c25 100%
  );
}
.btn-check:focus + .btn-maroon,
.btn-maroon:focus {
  box-shadow: 0 0 0 0.2rem rgba(202, 77, 77, 0.5);
}
.btn-check:active + .btn-maroon,
.btn-check:checked + .btn-maroon,
.btn-maroon.active,
.btn-maroon:active,
.show > .btn-maroon.dropdown-toggle {
  color: #fff;
  background-image: radial-gradient(
    circle farthest-corner at 10% 20%,
    rgb(255, 107, 107) 0%,
    rgb(255, 107, 107) 82.8%
  );
}
.btn-check:active + .btn-maroon:focus,
.btn-check:checked + .btn-maroon:focus,
.btn-maroon.active:focus,
.btn-maroon:active:focus,
.show > .btn-maroon.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(202, 77, 77, 0.5);
}
.btn-maroon.disabled,
.btn-maroon:disabled {
  color: #000;
  background-color: #ffc2c6;
  /* border-color: #5a8dee; */
}

.text-head-maroon {
  color: var(--navy-head);
}
.text-maroon {
  color: var(--navy-head);
}
.text-maroon-2 {
  color: #8a0000;
}
/* Animasi */
.animate-1 {
  transform: translateX(-100%);
  opacity: 0;
  transition: all 1s ease-in-out;
}

.show-1 {
  transform: translateX(0);
  opacity: 1;
}

.btn-outline-maroon {
  color: #d80813;
  border-color: #d80813;
}
.btn-outline-maroon:hover {
  color: white;
  background-color: #d80813;
  border-color: #d80813;
}
.btn-check:focus + .btn-outline-maroon,
.btn-outline-maroon:focus {
  box-shadow: 0 0 0 0.2rem rgba(238, 90, 90, 0.5);
}
.btn-check:active + .btn-outline-maroon,
.btn-check:checked + .btn-outline-maroon,
.btn-outline-maroon.active,
.btn-outline-maroon.dropdown-toggle.show,
.btn-outline-maroon:active {
  color: white;
  background-color: #d80813;
  border-color: #d80813;
}
.btn-check:active + .btn-outline-maroon:focus,
.btn-check:checked + .btn-outline-maroon:focus,
.btn-outline-maroon.active:focus,
.btn-outline-maroon.dropdown-toggle.show:focus,
.btn-outline-maroon:active:focus {
  box-shadow: 0 0 0 0.2rem rgba(238, 90, 90, 0.5);
}
.btn-outline-maroon.disabled,
.btn-outline-maroon:disabled {
  color: #d80813;
  background-color: transparent;
}
.hide {
  display: none;
}
.card-click {
  /* style="padding-top: 1rem; padding-bottom: 0.5rem; cursor:pointer;" */
  /* padding-top: 1rem;
  padding-bottom: 0.5rem; */
  cursor: pointer;
}
.card-click:hover {
  background-color: #ebf3ff;
}

.button-36 {
  background-image: linear-gradient(
    92.88deg,
    #455eb5 9.16%,
    #5643cc 43.89%,
    #673fd7 64.72%
  );
  border-radius: 8px;
  border-style: none;
  box-sizing: border-box;
  color: #ffffff;
  cursor: pointer;
  flex-shrink: 0;
  font-family: "Inter UI", "SF Pro Display", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue",
    sans-serif;
  /* font-size: 16px; */
  font-weight: 500;
  height: 2rem;
  padding: 0 1.6rem;
  text-align: center;
  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
  transition: all 0.5s;
  user-select: none;
  -webkit-user-select: none;
  touch-action: manipulation;
}

.button-36:hover {
  box-shadow: rgba(80, 63, 205, 0.5) 0 1px 30px;
  transition-duration: 0.1s;
}

@media (min-width: 768px) {
  .button-36 {
    padding: 0 2.6rem;
  }
}

.btn41-43 {
  padding: 10px 25px;
  font-family: "Roboto", sans-serif;
  font-weight: 500;
  background: transparent;
  /* background-color: #013f8b; */
  outline: none !important;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  display: inline-block;
}

.btn-41 {
  border: 2px solid #f8faff;
  z-index: 1;
  color: #6ec6b3;
}

.btn-41:after {
  position: absolute;
  content: "";
  width: 0;
  height: 100%;
  top: 0;
  left: 0;
  direction: rtl;
  z-index: -1;
  background: #e4fffa;
  transition: all 0.3s ease;
}

.btn-41:hover {
  color: rgb(0, 0, 0);
}

.btn-41:hover:after {
  left: auto;
  right: 0;
  width: 100%;
}

.btn-41:active {
  top: 2px;
}

.btn-gray {
  color: #6d6d6d;
  background-color: #ececec;
  border-color: #cfcfcf;
}
.btn-check:focus + .btn-gray,
.btn-gray:focus,
.btn-gray:hover {
  color: #6d6d6d;
  background-color: #cfcfcf;
  border-color: #cfcfcf;
}
.btn-check:focus + .btn-gray,
.btn-gray:focus {
  box-shadow: 0 0 0 0.2rem rgba(99, 119, 143, 0.5);
}
.btn-check:active + .btn-gray,
.btn-check:checked + .btn-gray,
.btn-gray.active,
.btn-gray:active,
.show > .btn-gray.dropdown-toggle {
  color: #6d6d6d;
  background-color: #ececec;
  border-color: #35475c;
}
.btn-check:active + .btn-gray:focus,
.btn-check:checked + .btn-gray:focus,
.btn-gray.active:focus,
.btn-gray:active:focus,
.show > .btn-gray.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(99, 119, 143, 0.5);
}
.btn-gray.disabled,
.btn-gray:disabled {
  color: #6d6d6d;
  background-color: #ececec;
  border-color: #475f7b;
}
.table-radius-10 {
  border-radius: 10px;
  overflow: hidden; /* gunakan overflow hidden agar border-radius bekerja dengan baik */
  box-shadow: 0px 4px 7px rgba(0, 0, 0, 0.25);
}
.radius-10 {
  border-radius: 10px;
}
.radius-50 {
  border-radius: 50px;
}
.blue-circle {
  background-color: #1f75cc;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
.red-circle {
  background-color: #cc201f;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
.pink-circle {
  background-color: rgba(255, 99, 132, 0.8);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
.orange-circle {
  background-color: rgba(255, 206, 86, 0.8);
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
.green-circle {
  background-color: #1fcc76;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
.purple-circle {
  background-color: #951fcc;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
.lime-circle {
  background-color: #c9cc1f;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
.aqua-circle {
  background-color: #1fccb7;
  border-radius: 50%;
  width: 13px;
  height: 13px;
  display: inline-block;
  margin-right: 5px;
}
small.detail-col {
  color: #80a9f6;
}
.detail-col {
  color: #80a9f6;
}

.text-white {
  color: white;
}

.color-0 {
  background: #d31027; /* fallback for old browsers */
  background: -webkit-linear-gradient(
    to right,
    #ea384d,
    #d31027
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(
    to right,
    #ea384d,
    #d31027
  ); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

.color-1 {
  /* background-color: #0093e9; */
  background-image: linear-gradient(160deg, #0093e9 0%, #80d0c7 100%);
  transition: all 0.3s ease-in-out;
}
.color-2 {
  background-color: #4158d0;
  background-image: linear-gradient(
    43deg,
    #4158d0 0%,
    #c850c0 46%,
    #ffcc70 100%
  );
}

.color-3 {
  background-color: #ff8e52;
  background-image: linear-gradient(62deg, #ff8e52 0%, #ffca42 100%);
}
.color-4 {
  background-color: #ff9a8b;
  background-image: linear-gradient(
    90deg,
    #ff9a8b 0%,
    #ff6a88 55%,
    #ff99ac 100%
  );
}
.color-5 {
  color: white;
  background: #e52d27; /* fallback for old browsers */
  background-size: 200% auto;
  background: -webkit-linear-gradient(
    to right,
    #b31217,
    #e52d27
  ); /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #b31217, #e52d27);
}

/* ============== */

.card.color-5.hvr:hover {
  background-image: linear-gradient(
    to right,
    #f66565 0%,
    #c20202 51%,
    #ff7c25 100%
  );
}

/*  ============= */

.btn-maroon-2 {
  color: #901317;
  font-size: 12px;
  font-weight: 500;
  background: #fff;
  border-radius: 30px;
  display: inline-block;
  transition: 0.3s;
  padding: 7px 23px;
  white-space: nowrap;
  border: 1px solid #d32220;
  text-transform: uppercase;
  line-height: 16px;
  background-size: 200% auto;
  transition: 30;
}
.btn-maroon-2:hover {
  color: #fff;
  background-position: right center;
  background-image: linear-gradient(
    to right,
    #f66565 0%,
    #c20202 51%,
    #ff7c25 100%
  );
  border: 1px;
}
.legend-hover {
  border-radius: 10px;
}
.legend-hover:hover {
  border-radius: 10px;
  background-color: #ebebeb;
}

.btnn {
  flex: 1 1 auto;
  /* margin: 10px; */
  padding: 0.467rem 1.5rem;
  text-align: center;
  text-transform: uppercase;
  transition: 0.5s;
  background-size: 200% auto;
  color: white;
  /* text-shadow: 0px 0px 10px rgba(0,0,0,0.2);*/
  box-shadow: 0 0 20px #eee;
  border-radius: 5px;
}

.btnn:hover {
  background-position: right center; /* change the direction of the change here */
}

.btnn-1 {
  background-image: linear-gradient(
    to right,
    #f66565 0%,
    #c20202 51%,
    #ff7c25 100%
  );
}

.danger-color {
  color: #901317;
}

.btn-outline-danger:hover .danger-color {
  color: white;
}
.color-1.hvr:hover {
  background-image: linear-gradient(100deg, #fff 0%, #c4dcff 100%);
  cursor: pointer;
}
.color-1.hvr .card-body h5 {
  color: #fff;
}
.color-1.hvr .card-body div h4 {
  color: #fff;
}
.color-1.hvr:hover .card-body h5 {
  color: var(--navy-head-2);
}
.color-1.hvr:hover .card-body div h4 {
  color: var(--navy-high);
}
.card-3 {
  color: #363636;
  background-color: white;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
}
.card-3.hvr:hover {
  /* background-image: linear-gradient(160deg, #fff 50%, #aae4ff 100%); */
  color: var(--navy-utama-2);
  border: 1px solid;
  border-color: var(--navy-utama-2);
}
.card-1-active {
  background-image: linear-gradient(100deg, #fff 0%, #c4dcff 100%);
}
.card-1-active .card-body h5 {
  color: #fff;
}
.card-1-active .card-body div h4 {
  color: #fff;
}
.card-1-active .card-body h5 {
  color: var(--navy-head-2);
}
.card-1-active .card-body div h4 {
  color: var(--navy-high);
}
.card.hvr {
  border: 0px;
}
.card.hvr:hover {
  /* border: 2px solid var(--navy-utama); */
  cursor: pointer;
}

.text-white.detail-hvr:hover {
  color: #0062cc;
}

.detail-hvr:hover {
  color: #0062cc;
  cursor: pointer;
}

.table-border {
  border-collapse: collapse;
  width: 100%;
}

.table-border th,
.table-border td {
  /* border: 0.01px solid #e4002e; */
  padding: 5px;
  text-align: left;
}
/* .table-border th {
  border: 0.01px solid #e4002e;
} */

.table-border th {
  background-color: #f6545d;
  border-bottom: none;
  text-align: center;
}

table.dataTable.table-border thead th {
  border-bottom: none !important;
  border: 0.01px solid #e4002e;
}

#user_list {
  max-height: 70vh;
  overflow-y: scroll;
}

#user_list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#user_list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

#user_list::-moz-scrollbar {
  width: 8px;
  height: 8px;
}

#user_list::-moz-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

#menu_list {
  max-height: 70vh;
  overflow-y: scroll;
}

#menu_list::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

#menu_list::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

#menu_list::-moz-scrollbar {
  width: 8px;
  height: 8px;
}

#menu_list::-moz-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 4px;
}

/* #drop_zone {
  width: 300px;
  height: 200px;
  border: 2px dashed #ccc;
  line-height: 200px;
  text-align: center;
  font-size: 20px;
}
#drop_zone.hover {
  background-color: #eee;
}
img {
  max-width: 100%;
  max-height: 100%;
} */

.float-button {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 999;
}

.float-button a {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  background-color: #007bff;
  padding: 10px 15px;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
}

.float-button a:hover {
  background-color: #0062cc;
  cursor: pointer;
}
.progress_ {
  position: relative;
  margin: 4px;
  float: left;
  text-align: center;
}
.barOverflow_ {
  /* Wraps the rotating .bar */
  position: relative;
  overflow: hidden; /* Comment this line to understand the trick */
  width: 150px;
  height: 75px; /* Half circle (overflow) */
  margin-bottom: -14px; /* bring the numbers up */
}
.bar_ {
  position: absolute;
  top: 0;
  left: 0;
  width: 150px;
  height: 150px; /* full circle! */
  border-radius: 50%;
  box-sizing: border-box;
  border: 15px solid #eee; /* half gray, */
  border-bottom-color: #0bf; /* half azure */
  border-right-color: #0bf;
}
.data-content {
  max-height: 60vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.data-content::-webkit-scrollbar {
  width: 5px; /* Lebar scrollbar */
  height: 5px; /* Tinggi scrollbar */
}

.data-content::-webkit-scrollbar-thumb {
  background-color: #888; /* Warna latar belakang thumb scrollbar */
  border-radius: 5px; /* Radius thumb scrollbar */
}

.data-content::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Warna latar belakang thumb scrollbar saat dihover */
}

.border-1 {
  border: 1px solid #e2e2e2;
}
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.pointer {
  cursor: pointer;
}
.photo-img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: contain;
}

.data_content {
  max-height: 65vh;
  overflow-y: auto;
  overflow-x: hidden;
}
.data_content::-webkit-scrollbar {
  width: 5px; /* Lebar scrollbar */
  height: 10px; /* Tinggi scrollbar */
}

.data_content::-webkit-scrollbar-thumb {
  background-color: #888; /* Warna latar belakang thumb scrollbar */
  border-radius: 5px; /* Radius thumb scrollbar */
}

.data_content::-webkit-scrollbar-thumb:hover {
  background-color: #555; /* Warna latar belakang thumb scrollbar saat dihover */
}

.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.custom-table {
  border-collapse: collapse;
  width: 100%;
}

.custom-table.text-center th {
  text-align: center !important;
}

.custom-table.font-400 th {
  font-weight: 400 !important;
}

.custom-table th,
.custom-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

.custom-table th {
  background-color: #f2f2f2;
}

/* ========= */
.custom-table.pad-2 th,
.custom-table.pad-2 td {
  border: 1px solid #ddd;
  padding: 2px;
  text-align: left;
}
/* ========= */

.custom-table tr:nth-child(even) {
  background-color: #f2f2f2;
}

#tios_list::-webkit-scrollbar,
#erp_list::-webkit-scrollbar,
#eng_list::-webkit-scrollbar {
  width: 5px; /* Lebar scrollbar */
  height: 5px; /* Tinggi scrollbar */
}

#tios_list::-webkit-scrollbar-thumb,
#erp_list::-webkit-scrollbar-thumb,
#eng_list::-webkit-scrollbar-thumb {
  background-color: #cfcfcf; /* Warna latar belakang thumb scrollbar */
  border-radius: 5px; /* Radius thumb scrollbar */
}

#tios_list::-webkit-scrollbar-thumb:hover,
#erp_list::-webkit-scrollbar-thumb:hover,
#eng_list::-webkit-scrollbar-thumb:hover {
  background-color: #a8a8a8; /* Warna latar belakang thumb scrollbar saat dihover */
}

.tableFixHead {
  overflow-y: auto; /* make the table scrollable if height is more than 200 px  */
  max-height: 73.5vh !important; /* gives an initial height of 200px to the table */
}
.tableFixHead thead tr:first-child th {
  position: sticky;
  top: -1px;
  z-index: 2; /* Pastikan baris pertama muncul di atas baris kedua */
}

.tableFixHead thead tr:nth-child(2) th {
  position: sticky;
  top: 27.4px; /* Sesuaikan sesuai dengan tinggi baris pertama */
  background-color: #eee; /* Warna latar belakang baris kedua */
  z-index: 1; /* Pastikan baris kedua berada di bawah baris pertama */
}

.tableFixHead tfoot td {
  position: sticky; /* make the table heads sticky */
  bottom: 0px; /* table head will be placed from the top of the table and sticks to it */
}
.tableFixHead table {
  border-collapse: collapse; /* make the table borders collapse to each other */
  width: 100%;
}
.tableFixHead th,
.tableFixHead td {
  padding: 8px 16px;
  border: 1px solid #ccc;
}
.tableFixHead th {
  background: #eee;
}

.tableFixHead thead.bg-dark th {
  background: #2e2e2e;
}

.tableFixHead thead.bg-dark-blue th {
  background: #003063;
}

.tableFixHead thead.bg-dark-blue tr:nth-child(2) th {
  background: #003063;
}

.tableFixHead tfoot.bg-primary td {
  background-color: #6575ff;
}

.tableFixHead tfoot.bg-white td {
  background-color: #fff;
}

.tableFixHead tfoot.bg-eee td {
  background-color: #eee;
}

.text-abu {
  color: #5c5c5c !important;
}

.loader {
  width: 48px;
  height: 48px;
  border: 3px dotted #ad0000;
  border-style: solid solid dotted dotted;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}
.loader::after {
  content: "";
  box-sizing: border-box;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  border: 3px dotted #5f5f5f;
  border-style: solid solid dotted;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  animation: rotationBack 1s linear infinite;
  transform-origin: center center;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes rotationBack {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(-360deg);
  }
}

.loader2 {
  width: 58px;
  height: 58px;
  border: 5px dotted #ff0000;
  border-radius: 50%;
  display: inline-block;
  position: relative;
  box-sizing: border-box;
  animation: rotation 2s linear infinite;
}

@keyframes rotation {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.progress_bar {
  position: fixed;
  top: 50%;
  left: 98%;
  transform: translate(-50%, -50%);
  display: none; /* Untuk menyembunyikan progress bar awalnya */
}