html.sma-theme body {
  color: #1b3f58;
  background-color: rgba(106, 134, 164, 0.357);
  /* background-color: #e5e5e5; */
}
html.sma-theme .sidebar-wrapper {
  background: #1c3b52;
  border-right: 1px solid rgba(104, 131, 161, 0.546);
  background: linear-gradient(270deg, #023874, #6a84a5, #4c535a, #33564e);
  background-size: 800% 800%;
  animation: gradientMove 15s ease infinite;
}
/* html.sma-theme .sidebar-wrapper .sidebar-header {
  background: #1c3b52;
  border-right: 1px solid rgba(104, 131, 161, 0.717);
  border-bottom: 1px solid rgba(104, 131, 161, 0.546);
}
 */
@keyframes gradientMove {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

html.sma-theme .sidebar-wrapper .sidebar-header {
  background: linear-gradient(270deg, #023874, #d37b00, #115929, #8e0139);
  background-size: 800% 800%;
  animation: gradientMove 10s ease infinite;
}
html.sma-theme .sidebar-wrapper .sidebar-header .logo-text {
  color: #e7e9ec;
}
html.sma-theme .sidebar-wrapper .sidebar-header .toggle-icon {
  color: #e7e9ec;
}
html.sma-theme .sidebar-wrapper .metismenu a {
  color: #ffffff;
}
html.sma-theme .sidebar-wrapper .metismenu .mm-active > a,
html.sma-theme .sidebar-wrapper .metismenu a:active,
html.sma-theme .sidebar-wrapper .metismenu a:focus,
html.sma-theme .sidebar-wrapper .metismenu a:hover {
  color: #d5f9ff;
  text-decoration: none;
  background: rgba(104, 131, 161, 0.546);
  border-radius: 8px;
  padding: 8px;
  border-left: 4px solid #cbdce7d0;
  border-top: 4px solid #cbdce7d0;
  border-bottom: 1px solid #cbdce7d0;
}
html.sma-theme .sidebar-wrapper .metismenu ul {
  border: 1px solid #52565886;
  background: rgba(104, 131, 160, 0.139);
  border-radius: 8px;
  border-bottom: 2px solid #cbdce7d0;
}
html.sma-theme .sidebar-wrapper .metismenu ul .mm-active > a,
html.sma-theme .sidebar-wrapper .metismenu ul a:active,
html.sma-theme .sidebar-wrapper .metismenu ul a:focus,
html.sma-theme .sidebar-wrapper .metismenu ul a:hover {
  border-left: 4px solid #d2dce3d0;
  border-top: 1px solid #d2dce3d0;
  border-bottom: 1px solid #d2dce3d0;
}

html.sma-theme .simplebar-scrollbar:before {
  background: rgba(108, 134, 167, 0.945);
  cursor: pointer;
}
/* html.sma-theme .logo-icon {
  filter: invert(1) grayscale(100%) brightness(200%);
} */
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-1,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-10,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-11,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-12,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-2,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-3,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-4,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-5,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-6,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-7,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-8,
html.ColorLessIcons .sidebar-wrapper .metismenu .icon-color-9 {
  color: inherit;
}

html.sma-theme .topbar {
  background-color: #1c3b52;
  border-bottom: 1px solid rgba(97, 123, 142, 0.12);
  background: linear-gradient(270deg, #023874, #6a84a5, #4c535a, #33564e);
  background-size: 800% 800%;
  animation: gradientMove 20s ease infinite;
}
html.sma-theme .page-footer {
  background-color: #1c3b52;
  border-bottom: 1px solid rgba(97, 123, 142, 0.12);
  color: white;
  background: linear-gradient(270deg, #023874, #6a84a5, #4c535a, #33564e);
  background-size: 800% 800%;
  animation: gradientMove 20s ease infinite;
}
html.sma-theme .user-box {
  border-left: 1px solid rgba(97, 123, 142, 0.15);
}
html.sma-theme .user-info .user-name {
  color: #e4e5e6;
}
html.sma-theme .user-info .designattion {
  color: #e9d1d1;
}

html.sma-theme .search-bar .btn-search {
  background: #6c87a4;
  border: 1px solid rgba(97, 123, 142, 0.3);
}
html.sma-theme .search-bar .btn-search i {
  color: #e4e5e6;
}
html.sma-theme .search-bar-box {
  color: #ffffff;
}
html.sma-theme .dropdown-menu {
  color: #213d58;
  background-color: #dfebf7;
  box-shadow: 0 0.5rem 1rem rgba(97, 123, 142, 0.3);
}
html.sma-theme .dropdown-item {
  color: #6c87a4;
}
html.sma-theme .dropdown-menu .dropdown-item:hover {
  background-color: #6c87a4;
  color: #e4e5e6;
}
html.sma-theme .dropdown-divider {
  border-top: 1px solid rgba(97, 123, 142, 0.12);
}
html.sma-theme .dropdown-large .dropdown-menu .dropdown-item {
  border-bottom: 1px solid rgba(97, 123, 142, 0.12);
}
html.sma-theme .dropdown-large .msg-name {
  color: #fff;
}
html.sma-theme .dropdown-large .msg-info {
  color: #6c87a4;
}
html.sma-theme .dropdown-large .msg-time {
  color: #6c87a4;
}
html.sma-theme .dropdown-large .msg-header {
  border-bottom: 1px solid rgba(97, 123, 142, 0.15);
  background: 0 0;
}
html.sma-theme .dropdown-large .msg-header .msg-header-title {
  color: #e4e5e6;
}
html.sma-theme .dropdown-large .msg-header .msg-header-clear {
  color: #6c87a4;
}
html.sma-theme .dropdown-large .msg-footer {
  color: #d1d7de;
  border-top: 1px solid rgba(97, 123, 142, 0.15);
}
html.sma-theme .mobile-toggle-menu {
  color: #e4e5e6;
}
html.sma-theme .toggle-icon {
  color: #e7e9ec;
}
html.sma-theme .topbar .navbar-nav .nav-link {
  border-left: 0 solid rgba(97, 123, 142, 0.12);
  color: #e4e5e6;
}
html.sma-theme .search-bar input {
  color: #e4e5e6;
  background-color: #6c87a4;
  border: 1px solid rgba(97, 123, 142, 0.15);
  box-shadow: inset 0 1px 2px rgba(68, 1, 1, 0);
}

html.sma-theme .btn-secondary {
  color: #fff;
  background-color: #7b9cb4;
  border-color: #6c87a4;
}
html.sma-theme .btn-secondary:hover {
  color: #fff;
  background-color: #7b9cb4;
  border-color: #6c87a4;
}
html.sma-theme .btn-check:focus + .btn-secondary,
html.sma-theme .btn-secondary:focus {
  color: #fff;
  background-color: #7b9cb4;
  border-color: #6c87a4;
  box-shadow: 0 0 0 0.25rem rgba(114, 143, 167, 0.5);
}

html.sma-theme .btn-secondary.disabled,
html.sma-theme .btn-secondary:disabled {
  color: #fff;
  background-color: #7b9cb4;
  border-color: #6c87a4;
}

html.sma-theme .bg-secondary {
  background-color: #7b9cb4 !important;
}

html.sma-theme .btn-outline-primary {
  color: #6c87a4;
  border-color: #6c87a4;
}
html.sma-theme .btn-outline-primary:hover {
  color: #fff;
  background-color: #6c87a4;
  border-color: #6c87a4;
}
html.sma-theme .btn-check:focus + .btn-outline-primary,
html.sma-theme .btn-outline-primary:focus {
  box-shadow: 0 0 0 0.25rem rgba(114, 143, 167, 0.5);
}
html.sma-theme .btn-check:active + .btn-outline-primary,
html.sma-theme .btn-check:checked + .btn-outline-primary,
html.sma-theme .btn-outline-primary.active,
html.sma-theme .btn-outline-primary.dropdown-toggle.show,
html.sma-theme .btn-outline-primary:active {
  color: #fff;
  background-color: #6c87a4;
  border-color: #6c87a4;
}
html.sma-theme .btn-check:active + .btn-outline-primary:focus,
html.sma-theme .btn-check:checked + .btn-outline-primary:focus,
html.sma-theme .btn-outline-primary.active:focus,
html.sma-theme .btn-outline-primary.dropdown-toggle.show:focus,
html.sma-theme .btn-outline-primary:active:focus {
  box-shadow: 0 0 0 0.25rem rgba(114, 143, 167, 0.5);
}
html.sma-theme .btn-outline-primary.disabled,
html.sma-theme .btn-outline-primary:disabled {
  color: #6c87a4;
  background-color: transparent;
}

html.sma-theme .btn-primary {
  color: #fff;
  background-color: #6c87a4;
  border-color: #6c87a4;
}
html.sma-theme .btn-primary:hover {
  color: #fff;
  background-color: #6c87a4;
  border-color: #6c87a4;
}
html.sma-theme .btn-check:focus + .btn-primary,
html.sma-theme .btn-primary:focus {
  color: #fff;
  background-color: #6c87a4;
  border-color: #6c87a4;
  box-shadow: 0 0 0 0.25rem rgba(114, 143, 167, 0.5);
}
html.sma-theme .btn-check:active + .btn-primary,
html.sma-theme .btn-check:checked + .btn-primary,
html.sma-theme .btn-primary.active,
html.sma-theme .btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: #6c87a4;
  border-color: #6c87a4;
}
html.sma-theme .btn-check:active + .btn-primary:focus,
html.sma-theme .btn-check:checked + .btn-primary:focus,
html.sma-theme .btn-primary.active:focus,
html.sma-theme .btn-primary:active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(114, 143, 167, 0.5);
}
html.sma-theme .btn-primary.disabled,
html.sma-theme .btn-primary:disabled {
  color: #fff;
  background-color: #6c87a4;
  border-color: #6c87a4;
}
html.sma-theme .bg-primary {
  background-color: #6c87a4 !important;
  color: #fff;
}
html.sma-theme .bg-light-primary {
  background-color: #bfcbd4 !important;
  color: #6c87a4;
}

html.sma-theme .btn-danger {
  color: #fff;
  background-color: #523232;
  border-color: #502224;
}
html.sma-theme .btn-danger:hover {
  color: #fff;
  background-color: #523232;
  border-color: #502224;
}
html.sma-theme .btn-check:focus + .btn-danger,
html.sma-theme .btn-danger:focus {
  color: #fff;
  background-color: #523232;
  border-color: #502224;
  box-shadow: 0 0 0 0.25rem rgba(110, 75, 75, 0.5);
}
html.sma-theme .btn-check:active + .btn-danger,
html.sma-theme .btn-check:checked + .btn-danger,
html.sma-theme .btn-danger.active,
html.sma-theme .btn-danger:active,
.show > .btn-danger.dropdown-toggle {
  color: #fff;
  background-color: #523232;
  border-color: #502224;
}
html.sma-theme .btn-check:active + .btn-danger:focus,
html.sma-theme .btn-check:checked + .btn-danger:focus,
html.sma-theme .btn-danger.active:focus,
html.sma-theme .btn-danger:active:focus,
.show > .btn-danger.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(110, 75, 75, 0.5);
}
html.sma-theme .btn-danger.disabled,
html.sma-theme .btn-danger:disabled {
  color: #fff;
  background-color: #523232;
  border-color: #502224;
}

html.sma-theme .btn-outline-danger {
  color: #523232;
  border-color: #502224;
}
html.sma-theme .btn-outline-danger:hover {
  color: #fff;
  background-color: #523232;
  border-color: #502224;
}
html.sma-theme .btn-check:focus + .btn-outline-danger,
html.sma-theme .btn-outline-danger:focus {
  box-shadow: 0 0 0 0.25rem rgba(110, 75, 75, 0.5);
}
html.sma-theme .btn-check:active + .btn-outline-danger,
html.sma-theme .btn-check:checked + .btn-outline-danger,
html.sma-theme .btn-outline-danger.active,
html.sma-theme .btn-outline-danger.dropdown-toggle.show,
html.sma-theme .btn-outline-danger:active {
  color: #fff;
  background-color: #523232;
  border-color: #502224;
}
html.sma-theme .btn-check:active + .btn-outline-danger:focus,
html.sma-theme .btn-check:checked + .btn-outline-danger:focus,
html.sma-theme .btn-outline-danger.active:focus,
html.sma-theme .btn-outline-danger.dropdown-toggle.show:focus,
html.sma-theme .btn-outline-danger:active:focus {
  box-shadow: 0 0 0 0.25rem rgba(110, 75, 75, 0.5);
}
html.sma-theme .btn-outline-danger.disabled,
html.sma-theme .btn-outline-danger:disabled {
  color: #523232;
  background-color: transparent;
}

html.sma-theme .bg-danger {
  background-color: #502224 !important;
  color: #fff;
}
html.sma-theme .bg-light-danger {
  background-color: #f1bec1 !important;
  color: #502224;
}

html.sma-theme .btn-success {
  color: #fff;
  background-color: #335e58;
  border-color: #2e4d48;
}
html.sma-theme .btn-success:hover {
  color: #fff;
  background-color: #335e58;
  border-color: #2e4d48;
}
html.sma-theme .btn-check:focus + .btn-success,
html.sma-theme .btn-success:focus {
  color: #fff;
  background-color: #335e58;
  border-color: #2e4d48;
  box-shadow: 0 0 0 0.25rem rgba(46, 77, 72, 0.5);
}
html.sma-theme .btn-check:active + .btn-success,
html.sma-theme .btn-check:checked + .btn-success,
html.sma-theme .btn-success.active,
html.sma-theme .btn-success:active,
.show > .btn-success.dropdown-toggle {
  color: #fff;
  background-color: #335e58;
  border-color: #2e4d48;
}
html.sma-theme .btn-check:active + .btn-success:focus,
html.sma-theme .btn-check:checked + .btn-success:focus,
html.sma-theme .btn-success.active:focus,
html.sma-theme .btn-success:active:focus,
.show > .btn-success.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(46, 77, 72, 0.5);
}
html.sma-theme .btn-success.disabled,
html.sma-theme .btn-success:disabled {
  color: #fff;
  background-color: #335e58;
  border-color: #2e4d48;
}

html.sma-theme .btn-outline-success {
  color: #335e58;
  border-color: #2e4d48;
}
html.sma-theme .btn-outline-success:hover {
  color: #fff;
  background-color: #335e58;
  border-color: #2e4d48;
}
html.sma-theme .btn-check:focus + .btn-outline-success,
html.sma-theme .btn-outline-success:focus {
  box-shadow: 0 0 0 0.25rem rgba(46, 77, 72, 0.5);
}
html.sma-theme .btn-check:active + .btn-outline-success,
html.sma-theme .btn-check:checked + .btn-outline-success,
html.sma-theme .btn-outline-success.active,
html.sma-theme .btn-outline-success.dropdown-toggle.show,
html.sma-theme .btn-outline-success:active {
  color: #fff;
  background-color: #335e58;
  border-color: #2e4d48;
}
html.sma-theme .btn-check:active + .btn-outline-success:focus,
html.sma-theme .btn-check:checked + .btn-outline-success:focus,
html.sma-theme .btn-outline-success.active:focus,
html.sma-theme .btn-outline-success.dropdown-toggle.show:focus,
html.sma-theme .btn-outline-success:active:focus {
  box-shadow: 0 0 0 0.25rem rgba(46, 77, 72, 0.5);
}
html.sma-theme .btn-outline-success.disabled,
html.sma-theme .btn-outline-success:disabled {
  color: #335e58;
  background-color: transparent;
}
html.sma-theme .bg-success {
  background-color: #335e58 !important;
  color: #fff;
}
html.sma-theme .bg-light-success {
  background-color: #dafcf7 !important;
  color: #335e58;
}

html.sma-theme .btn-warning {
  color: #fff;
  background-color: #8d8c3b;
  border-color: #cfaa03;
}
html.sma-theme .btn-warning:hover {
  color: #fff;
  background-color: #8d8c3b;
  border-color: #cfaa03;
}
html.sma-theme .btn-check:focus + .btn-warning,
html.sma-theme .btn-warning:focus {
  color: #fff;
  background-color: #8d8c3b;
  border-color: #cfaa03;
  box-shadow: 0 0 0 0.25rem rgba(207, 170, 3, 0.5);
}
html.sma-theme .btn-check:active + .btn-warning,
html.sma-theme .btn-check:checked + .btn-warning,
html.sma-theme .btn-warning.active,
html.sma-theme .btn-warning:active,
.show > .btn-warning.dropdown-toggle {
  color: #fff;
  background-color: #8d8c3b;
  border-color: #cfaa03;
}
html.sma-theme .btn-check:active + .btn-warning:focus,
html.sma-theme .btn-check:checked + .btn-warning:focus,
html.sma-theme .btn-warning.active:focus,
html.sma-theme .btn-warning:active:focus,
.show > .btn-warning.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(207, 170, 3, 0.5);
}
html.sma-theme .btn-warning.disabled,
html.sma-theme .btn-warning:disabled {
  color: #fff;
  background-color: #8d8c3b;
  border-color: #cfaa03;
}

html.sma-theme .btn-outline-warning {
  color: #8d8c3b;
  border-color: #cfaa03;
}
html.sma-theme .btn-outline-warning:hover {
  color: #fff;
  background-color: #8d8c3b;
  border-color: #cfaa03;
}
html.sma-theme .btn-check:focus + .btn-outline-warning,
html.sma-theme .btn-outline-warning:focus {
  box-shadow: 0 0 0 0.25rem rgba(207, 170, 3, 0.5);
}
html.sma-theme .btn-check:active + .btn-outline-warning,
html.sma-theme .btn-check:checked + .btn-outline-warning,
html.sma-theme .btn-outline-warning.active,
html.sma-theme .btn-outline-warning.dropdown-toggle.show,
html.sma-theme .btn-outline-warning:active {
  color: #fff;
  background-color: #8d8c3b;
  border-color: #cfaa03;
}
html.sma-theme .btn-check:active + .btn-outline-warning:focus,
html.sma-theme .btn-check:checked + .btn-outline-warning:focus,
html.sma-theme .btn-outline-warning.active:focus,
html.sma-theme .btn-outline-warning.dropdown-toggle.show:focus,
html.sma-theme .btn-outline-warning:active:focus {
  box-shadow: 0 0 0 0.25rem rgba(207, 170, 3, 0.5);
}
html.sma-theme .btn-outline-warning.disabled,
html.sma-theme .btn-outline-warning:disabled {
  color: #8d8c3b;
  background-color: transparent;
}
html.sma-theme .bg-warning {
  background-color: #af920d !important;
  color: #fff;
}
html.sma-theme .bg-light-warning {
  background-color: #f8f4e2 !important;
  color: #927802;
}

html.sma-theme .btn-info {
  color: #fff;
  background-color: #477f8d;
  border-color: #2e7c8a;
}
html.sma-theme .btn-info:hover {
  color: #fff;
  background-color: #477f8d;
  border-color: #2e7c8a;
}
html.sma-theme .btn-check:focus + .btn-info,
html.sma-theme .btn-info:focus {
  color: #fff;
  background-color: #477f8d;
  border-color: #2e7c8a;
  box-shadow: 0 0 0 0.25rem rgba(3, 193, 207, 0.5);
}
html.sma-theme .btn-check:active + .btn-info,
html.sma-theme .btn-check:checked + .btn-info,
html.sma-theme .btn-info.active,
html.sma-theme .btn-info:active,
.show > .btn-info.dropdown-toggle {
  color: #fff;
  background-color: #477f8d;
  border-color: #2e7c8a;
}
html.sma-theme .btn-check:active + .btn-info:focus,
html.sma-theme .btn-check:checked + .btn-info:focus,
html.sma-theme .btn-info.active:focus,
html.sma-theme .btn-info:active:focus,
.show > .btn-info.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.25rem rgba(3, 193, 207, 0.5);
}
html.sma-theme .btn-info.disabled,
html.sma-theme .btn-info:disabled {
  color: #fff;
  background-color: #477f8d;
  border-color: #2e7c8a;
}

html.sma-theme .btn-outline-info {
  color: #477f8d;
  border-color: #2e7c8a;
}
html.sma-theme .btn-outline-info:hover {
  color: #fff;
  background-color: #477f8d;
  border-color: #2e7c8a;
}
html.sma-theme .btn-check:focus + .btn-outline-info,
html.sma-theme .btn-outline-info:focus {
  box-shadow: 0 0 0 0.25rem rgba(3, 193, 207, 0.5);
}
html.sma-theme .btn-check:active + .btn-outline-info,
html.sma-theme .btn-check:checked + .btn-outline-info,
html.sma-theme .btn-outline-info.active,
html.sma-theme .btn-outline-info.dropdown-toggle.show,
html.sma-theme .btn-outline-info:active {
  color: #fff;
  background-color: #477f8d;
  border-color: #2e7c8a;
}
html.sma-theme .btn-check:active + .btn-outline-info:focus,
html.sma-theme .btn-check:checked + .btn-outline-info:focus,
html.sma-theme .btn-outline-info.active:focus,
html.sma-theme .btn-outline-info.dropdown-toggle.show:focus,
html.sma-theme .btn-outline-info:active:focus {
  box-shadow: 0 0 0 0.25rem rgba(3, 193, 207, 0.5);
}
html.sma-theme .btn-outline-info.disabled,
html.sma-theme .btn-outline-info:disabled {
  color: #477f8d;
  background-color: transparent;
}
html.sma-theme .bg-info {
  background-color: #477f8d !important;
  color: #fff;
}
html.sma-theme .bg-light-info {
  background-color: #d4f6ff !important;
  color: #477f8d;
}

/* Gaya saat tombol pagination aktif */
html.sma-theme
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button.current {
  background-color: #8e9499 !important;
  color: #fff !important;
}

/* Hover effect pada tombol pagination */
html.sma-theme .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: #6c87a4 !important;
  color: #6c87a4 !important;
}
/* Hover effect pada tombol pagination */
html.sma-theme
  .dataTables_wrapper
  .dataTables_paginate
  .paginate_button:active {
  background-color: #6c87a4 !important;
  color: #6c87a4 !important;
}

/* Menyesuaikan ukuran tombol eksport */
html.sma-theme .dt-buttons .btn {
  background-color: #6c87a4 !important; /* Warna hijau */
  color: white !important;
  border-color: #f4f4f4 !important;
}

/* Hover effect pada tombol ekspor */
html.sma-theme .dt-buttons .btn:hover {
  background-color: #6c87a4 !important;
}

/* Mengubah warna tombol Prev dan Next */
html.sma-theme .dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: #bfcbd4 !important; /* Merah muda */
  color: #173144 !important; /* Merah gelap */
  border-radius: 5px;
}

/* Ubah warna tombol aktif */
html.sma-theme .pagination .page-item.active .page-link {
  background-color: #565b5f !important; /* Merah */
  border-color: #48525a !important;
  color: white !important;
}

/* Ubah warna tombol pagination lainnya */
html.sma-theme .pagination .page-item .page-link {
  background-color: #bfcbd4 !important; /* Merah muda */
  border-color: #6c87a4 !important;
  color: #6c87a4 !important; /* Merah tua */
}

/* Hover efek pada tombol pagination */
html.sma-theme .pagination .page-item .page-link:hover {
  background-color: #3e4e5b !important; /* Merah lebih gelap */
  border-color: #3e4e5b !important;
  color: white !important;
}

/* Ubah warna tombol "Prev" dan "Next" */
html.sma-theme .pagination .page-item.previous .page-link,
html.sma-theme .pagination .page-item.next .page-link {
  background-color: #bfcbd4 !important; /* Merah muda */
  color: #6c87a4 !important;
}

/* Hover efek pada tombol "Prev" dan "Next" */
html.sma-theme .pagination .page-item.previous .page-link:hover,
html.sma-theme .pagination .page-item.next .page-link:hover {
  background-color: #3e4e5b !important; /* Merah lebih gelap */
  color: white !important;
}

/* Ubah warna tombol disabled */
html.sma-theme .pagination .page-item.disabled .page-link {
  background-color: #f1f1f1 !important;
  color: #b0b0b0 !important;
}
/* Ubah warna dropdown secara umum */
html.sma-theme .dt-button-collection.dropdown-menu {
  background-color: #bfcbd4 !important; /* Merah muda */
  border: 1px solid #3e4e5b !important; /* Border merah */
}

/* Ubah warna teks dalam dropdown */
html.sma-theme .dt-button-collection.dropdown-menu .dt-button {
  color: #6c87a4 !important; /* Merah tua */
}

/* Ubah warna item dropdown saat di-hover */
html.sma-theme .dt-button-collection.dropdown-menu .dt-button:hover {
  background-color: #3e4e5b !important; /* Merah */
  color: white !important;
}

/* Ubah warna untuk item yang aktif */
/* html.sma-theme .dt-button-collection.dropdown-menu .dt-button.active {
    background-color: #bdc6cd !important; 
    color: white !important;
}
 */
/* Ubah warna latar belakang setiap baris ganjil */
/* html.sma-theme .table-striped tbody tr:nth-of-type(odd) {
    background-color: #bfcbd4 !important; 
} */

/* Ubah warna teks agar kontras */
/* html.sma-theme .table-striped tbody tr:nth-of-type(odd) td {
    color: #213646 !important; 
} */

/* Ubah warna latar belakang saat baris di-hover */
/* html.sma-theme .table-striped tbody tr:hover {
    background-color: #bfcbd4 !important; 
}
 */

/* Mengubah warna dropdown saat opsi belum dipilih */
html.sma-theme select.form-control option {
  background-color: #bfcbd4 !important; /* Merah muda */
  color: black !important; /* Warna teks hitam agar mudah dibaca */
}

/* Mengubah warna opsi yang sedang di-hover (saat mouse berada di atasnya) */
html.sma-theme select.form-control option:hover {
  background-color: #6c87a4 !important; /* Warna merah saat dihover */
  color: white !important; /* Warna teks putih */
}

/* **Solusi utama**: Mengubah warna latar opsi yang sedang dipilih */
html.sma-theme select.form-control option:checked {
  background-color: rgb(80, 75, 75) !important; /* Merah tua */
  color: white !important; /* Warna teks putih */
}

/* Untuk tampilan dropdown di Firefox */
html.sma-theme select.form-control:-moz-focusring {
  color: white !important;
  background: rgb(43, 42, 42) !important;
}

/* Mengubah warna scrollbar dropdown agar serasi */
html.sma-theme select.form-control::-webkit-scrollbar {
  width: 8px;
}

html.sma-theme select.form-control::-webkit-scrollbar-thumb {
  background: #6c87a4;
  border-radius: 4px;
}

html.sma-theme select.form-control::-webkit-scrollbar-track {
  background: #bfcbd4;
}

html.sma-theme table td.bg-danger {
  background-color: rgba(80, 34, 36, 0.35) !important;
  color: #fff;
}
html.sma-theme table td.bg-light-danger {
  background-color: rgba(241, 190, 193, 0.35) !important;
  color: #502224;
}

html.sma-theme table td.bg-success {
  background-color: rgba(51, 94, 88, 0.35) !important;
  color: #fff;
}
html.sma-theme table td.bg-light-success {
  background-color: rgba(218, 252, 247, 0.35) !important;
  color: #335e58;
}
html.sma-theme table td.bg-warning {
  background-color: rgba(175, 145, 13, 0.35) !important;
  color: #fff;
}
html.sma-theme table td.bg-light-warning {
  background-color: rgba(248, 244, 226, 0.35) !important;
  color: #927802;
}
html.sma-theme table td.bg-info {
  background-color: rgba(71, 127, 141, 0.35) !important;
  color: #fff;
}
html.sma-theme table td.bg-light-info {
  background-color: rgba(212, 246, 255, 0.35) !important;
  color: #477f8d;
}

html.sma-theme table td.bg-primary {
  background-color: rgba(97, 123, 142, 0.35) !important;
  color: #fff;
}
html.sma-theme table td.bg-light-primary {
  background-color: rgba(191, 203, 212, 0.35) !important;
  color: #6c87a4;
}

html.minimal-theme .topbar {
  background: #f4f4f4;
  border-bottom: 1px solid #dee2e6;
  box-shadow: none !important;
}
html.minimal-theme .topbar .search-control {
  background-color: #fff;
  border: 1px solid #dee2e6;
}
html.minimal-theme .topbar .user-box {
  border-left: 1px solid #dee2e6;
}
html.minimal-theme .sidebar-wrapper {
  background: #f4f4f4;
  border-right: 1px solid #dee2e6;
  box-shadow: none !important;
}
html.minimal-theme .sidebar-header {
  background: #f4f4f4;
  border-bottom: 1px solid #dee2e6;
  background-clip: padding-box;
}
@media screen and (min-width: 1025px) {
  html.minimal-theme .wrapper.toggled.sidebar-hovered .sidebar-wrapper {
    box-shadow: 0 0.3rem 0.8rem rgba(0, 0, 0, 0.12) !important;
  }
}