:root {
  /* === Brand Colors === */
  --color-main-1: #0066D4;
  --color-main-2: #31317F;
  
  --color-support-1a: #F8A606;
  --color-support-1b: #FDB800;
  
  --color-support-2a: #C40080;
  --color-support-2b: #7817B6;
  
  --color-secondary-1: #495057;
  --color-secondary-2: #343a40;
  
  --color-success-1: #28a745;
  --color-success-2: #218838;
  
  --color-info-1: #17a2b8;
  --color-info-2: #138496;
  
  --color-danger-1: #E63946;
  --color-danger-2: #C92A2A;
  
  /* === Bootstrap Override Solid Colors (fallback) === */
  --bs-primary: var(--color-main-1);
  --bs-secondary: var(--color-secondary-1);
  --bs-success: var(--color-success-1);
  --bs-info: var(--color-info-1);
  --bs-warning: var(--color-support-1a);
  /*--bs-danger: var(--color-support-2a);*/
  --bs-danger: var(--color-danger-1);
  
  /* === Gradient Versions === */
  --bs-primary-gradient: linear-gradient(135deg, var(--color-main-1), var(--color-main-2));
  --bs-secondary-gradient: linear-gradient(135deg, var(--color-secondary-1), var(--color-secondary-2));
  --bs-success-gradient: linear-gradient(135deg, var(--color-success-1), var(--color-success-2));
  --bs-info-gradient: linear-gradient(135deg, var(--color-info-1), var(--color-info-2));
  --bs-warning-gradient: linear-gradient(135deg, var(--color-support-1a), var(--color-support-1b));
  /*--bs-danger-gradient: linear-gradient(135deg, var(--color-support-2a), var(--color-support-2b));*/
  --bs-danger-gradient: linear-gradient(135deg, var(--color-danger-1), var(--color-danger-2));
}

/* === Buttons Override === */
.btn-primary {
  background-image: var(--bs-primary-gradient);
  border: none;
  color: #fff;
}

.btn-secondary {
  background-image: var(--bs-secondary-gradient);
  border: none;
  color: #fff;
}

.btn-success {
  background-image: var(--bs-success-gradient);
  border: none;
  color: #fff;
}

.btn-info {
  background-image: var(--bs-info-gradient);
  border: none;
  color: #fff;
}

.btn-warning {
  background-image: var(--bs-warning-gradient);
  border: none;
  color: #000;
}

.btn-danger {
  background-image: var(--bs-danger-gradient);
  border: none;
  color: #fff;
}

/* Hover states */
.btn-primary:hover {
  filter: brightness(0.9);
}

.btn-secondary:hover {
  filter: brightness(0.9);
}

.btn-success:hover {
  filter: brightness(0.9);
}

.btn-info:hover {
  filter: brightness(0.9);
}

.btn-warning:hover {
  filter: brightness(0.9);
}

.btn-danger:hover {
  filter: brightness(0.9);
}

/* === Alerts Override === */
.alert-primary {
  background-image: var(--bs-primary-gradient);
  color: #fff;
  border: none;
}

.alert-secondary {
  background-image: var(--bs-secondary-gradient);
  color: #fff;
  border: none;
}

.alert-success {
  background-image: var(--bs-success-gradient);
  color: #fff;
  border: none;
}

.alert-info {
  background-image: var(--bs-info-gradient);
  color: #fff;
  border: none;
}

.alert-warning {
  background-image: var(--bs-warning-gradient);
  color: #000;
  border: none;
}

.alert-danger {
  background-image: var(--bs-danger-gradient);
  color: #fff;
  border: none;
}

/* === Badges Override === */
.badge {
  font-weight: 500 !important;
  padding: 0.35rem 0.65rem !important;
}

.badge.bg-primary {
  background-image: var(--bs-primary-gradient);
}

.badge.bg-secondary {
  background-image: var(--bs-secondary-gradient);
}

.badge.bg-success {
  background-image: var(--bs-success-gradient);
}

.badge.bg-info {
  background-image: var(--bs-info-gradient);
}

.badge.bg-warning {
  background-image: var(--bs-warning-gradient);
  color: #000;
}

.badge.bg-danger {
  background-image: var(--bs-danger-gradient);
}

/* ===== Soft Badges ===== */
.badge-soft-primary {
  background-color: rgba(0, 102, 212, 0.12);
  color: var(--color-main-1);
  font-weight: 500;
  border-radius: 0.5rem;
  padding: 0.35em 0.65em;
  font-size: 0.8rem;
}

.badge-soft-success {
  background-color: rgba(40, 167, 69, 0.12);
  color: var(--color-success-1);
}

.badge-soft-info {
  background-color: rgba(23, 162, 184, 0.12);
  color: var(--color-info-1);
}

.badge-soft-warning {
  background-color: rgba(248, 166, 6, 0.15);
  color: var(--color-support-1a);
}

.badge-soft-danger {
  background-color: rgba(230, 57, 70, 0.12);
  color: var(--color-danger-1);
}

/* === Progress Bars Override === */
.progress-bar.bg-primary {
  background-image: var(--bs-primary-gradient);
}

.progress-bar.bg-secondary {
  background-image: var(--bs-secondary-gradient);
}

.progress-bar.bg-success {
  background-image: var(--bs-success-gradient);
}

.progress-bar.bg-info {
  background-image: var(--bs-info-gradient);
}

.progress-bar.bg-warning {
  background-image: var(--bs-warning-gradient);
  color: #000;
}

.progress-bar.bg-danger {
  background-image: var(--bs-danger-gradient);
}

/* === Nav Pills Override === */
.nav-pills .nav-link.active.bg-primary {
  background-image: var(--bs-primary-gradient);
}

.nav-pills .nav-link.active.bg-secondary {
  background-image: var(--bs-secondary-gradient);
}

.nav-pills .nav-link.active.bg-success {
  background-image: var(--bs-success-gradient);
}

.nav-pills .nav-link.active.bg-info {
  background-image: var(--bs-info-gradient);
}

.nav-pills .nav-link.active.bg-warning {
  background-image: var(--bs-warning-gradient);
  color: #000;
}

.nav-pills .nav-link.active.bg-danger {
  background-image: var(--bs-danger-gradient);
}

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

/*body[data-topbar=dark] #page-topbar {*/
/*  background-image: var(--bs-primary-gradient) !important;*/
/*}*/

.ya-selected {
  background-color: #87cefa !important;
}

.nav.bigNav.nav-pills {
  border-bottom: 1px solid rgba(66, 66, 126, 0.5) !important;
}

.fs-unset {
  font-size: unset !important;
}

.badge-soft-purple {
  background-color: #f1b9ed !important;
  color: #94468d;
}

.bigNav.nav-pills .nav-item .nav-link {
  background-color: rgb(196, 196, 196) !important;
  /*background-image: var(--bs-secondary-gradient);*/
  color: #6b6a73;
  border-radius: 0px !important;
  padding: 10px 7px;
  font-weight: bold;
  font-size: 0.8rem;
  box-sizing: border-box;
}

.bigNav.nav-pills .nav-item .nav-link.nav-link-info {
  background-color: rgb(95, 182, 175) !important;
}

table.table th,
table.table td {
  font-size: 0.8rem !important;
}

.bigNav.nav-pills .nav-item .nav-link:hover,
.bigNav.nav-pills .nav-item .nav-link:focus {
  background-color: rgb(163, 163, 163) !important;
}

.bigNav.nav-pills .nav-item .nav-link.active {
  color: #fff;
  /*background-color: rgb(66, 66, 126) !important;*/
  background-image: var(--bs-primary-gradient) !important;
}

.bigNav.nav-pills .nav-item .nav-link.nav-link-info.active {
  color: #fff;
  /*background-color: rgb(38, 138, 145) !important;*/
  background-image: var(--bs-info-gradient) !important;
}

.bigNav.nav-pills .nav-item .nav-link.nav-link-danger.active {
  color: #fff;
  /*background-color: rgb(126, 66, 66) !important;*/
  background-image: var(--bs-danger-gradient) !important;
}

.square-custom {
  border: 2px solid #333;
  padding: 10px;
  border-radius: 8px;
  background-color: #f8f9fa;
  width: 100%;
  box-sizing: border-box;
}

.backButton {
  transition: padding 300ms;
}

.backButton:hover {
  padding-right: 0.8rem;
  padding-left: 0.8rem;
}

.red {
  color: #ff0000;
}

.nav-link i,
.nav-link span {
  font-size: 0.8rem !important;
}

.dropdown a {
  font-size: 0.8rem !important;
}

.jobfit-row {
  background: rgb(169, 213, 231) !important;
}

.jobfit-row td {
  box-shadow: none !important;
  background: transparent !important;
}

.btn-secondary-subtle {
  background-color: #acb1b5 !important; /* Change this to your desired color */
  border-color: #acb1b5 !important;
}

/* Optional: Change hover/focus/active styles */
.btn-secondary-subtle:hover,
.btn-secondary-subtle:focus,
.btn-secondary-subtle:active {
  background-color: #86898b !important; /* Darker shade */
  border-color: #86898b !important;
}

.required::after {
  content: ' *' !important;
  color: red !important;
}

label.required::after {
  content: ' *' !important;
  color: red !important;
}

.transition-icon {
  transition: transform 0.3s ease;
}

.select-user-none {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
}

.accordion-button.main-aspek.collapsed {
  /*background-color: #B6D7A8;*/
  background-image: var(--bs-primary-gradient);
  color: #fff;
}

.accordion-button.main-aspek:not(.collapsed) {
  /*background-color: #80a271;*/
  background-image: var(--bs-primary-gradient);
  color: #fff;
}

.accordion-button.main-aspek:not(.collapsed) .transition-icon {
  transform: rotate(-180deg);
}

.accordion-button.main-aspek::after {
  display: none;
}

.accordion-button.sub-keyb:not(.collapsed) {
  background-color: #fff;
}

table.table thead th.sorting_disabled {
  padding-right: unset !important;
}

table.table thead th.sorting_disabled::after,
table.table thead th.sorting_disabled::before {
  display: none !important;
}

.mySelect2 + .select2-container .select2-selection--single {
  height: calc(2.3rem);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  border: 1px solid #ced4da;
  border-radius: 0.375rem;
  display: flex;
  align-items: center;
}

/* Arrow dropdown alignment */
.mySelect2 + .select2-container .select2-selection__arrow {
  height: 100%;
  position: absolute;
  top: 50% !important;
  transform: translateY(-50%) !important;
  right: 10px;
}

/* Text inside the select2 */
.mySelect2 + .select2-container .select2-selection__rendered {
  padding-left: 0;
  padding-right: 25px;
}

/* Focus style to match Bootstrap */
.mySelect2 + .select2-container--default.select2-container--focus .select2-selection--single {
  border-color: #86b7fe;
  box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
}

/* Remove outline from arrow */
.mySelect2 + .select2-container--default .select2-selection--single:focus {
  outline: none;
}

.modal-xxl {
  max-width: 90%; /* or whatever percentage you want */
  width: 90%;
}

.is-invalid {
  border-color: #dc3545;
}

.note-editable {
  -webkit-text-decoration-skip: none !important;
  text-decoration: none !important;
}

.myCheckbox {
  width: 20px;
  aspect-ratio: 1/1;
  cursor: pointer;
}

.myCheckbox:hover {
  filter: brightness(0.9);
}

.table-detail-peserta tr td {
  font-size: 0.65rem !important;
}

.table-detail-peserta .modal,
.table-detail-peserta .modal p,
.table-detail-peserta .modal span,
.table-detail-peserta .modal label,
.table-detail-peserta .modal td,
.table-detail-peserta .modal th {
  font-size: .8125rem !important;
}


/* Custom checkbox */
.rolecheck {
  display: block;
  width: 125px;
  height: 125px;
  position: relative;
}

.rolecheck input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.rolecheck .box {
  display: inline-flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #c9c9c9;
  color: #8c8c8c;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
  border: 2px transparent dashed;
  border-radius: 5px;
}

.rolecheck .box, .rolecheck .box * {
  transition: all .2s ease-in-out;
}

.rolecheck .box i {
  font-size: 40px;
  margin-bottom: 5px;
}

.rolecheck .box:hover {
  background-color: #b0b0b0;
  color: #5e5e5e;
}

.rolecheck .box:hover i {
  font-size: 60px;
  margin-bottom: -10px;
}

.rolecheck .box:hover span {
  opacity: 0;
}

.rolecheck input:checked ~ .box {
  background-color: #5E936C;
  color: #004030;
  border-color: #3E5F44;
}

.bg-danger-dark {
  background: #c92c2c !important;
}

.bg-primary-dark {
  background: #2c43b0 !important;
}

table.table tr.group-header {
  border-left: 1px solid #1F4E79 !important;
  border-right: 1px solid #1F4E79 !important;
}