/* Global Variables */
:root {
  --merah-muda: #FFEDEF;
  --beta-biru: #6C3DDB;
  --abu: #E9EDF5;
  --abu-dua: #5A6376;
  --abu-tiga: #979797;
  --abu-empat: #F8E9EA;
  --crimson-red: #EF3B3B;
  --darker-red: #A11D20;
  --brighter-red: #C82328;
  --pusdiklat-red: #B72024;
  --vivid-orange: #FF8914;
  --golden-olive: #CDB717;
  --azure-blue: #2F89FF;
  --vivid-azure: #3B82F6; /* Blue-500 */
  --royal-blue: #4470E2;
  --darker-blue: #8644E2;
  --light-aqua: #EFF4FF;
  --cream: #DCF8DE;
  --lime-green: #199121;
  --darker-green: #14761B;

  --pdl-primary: #4470E2;
  --pdl-danger: #B72024;
  --pdl-purple: #8248F1;

  --jungle-green: #1A9758;
  --ice-blue: #EAF3FF;
  --blue: #00C8FF;
  --xs: 0;
  --sm: 576px;
  --md: 768px;
  --lg: 992px;
  --xl: 1200px;
  --xxl: 1400p;

  --fs-default: 14px;
}

/* Font */
.fs-10p {
  font-size: 10px;
}

.fs-12p {
  font-size: 12px;
}

.fs-13p {
  font-size: 13px;
}

.fs-14p {
  font-size: 14px;
}

.fs-24p {
  font-size: 24px;
}

.fs-utama {
  font-size: var(--fs-default);
}

/* Font Lato */
.lato-thin {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.lato-light {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.lato-regular {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: normal;
}

.lato-black {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.lato-thin-italic {
  font-family: "Lato", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.lato-light-italic {
  font-family: "Lato", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.lato-regular-italic {
  font-family: "Lato", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.lato-bold-italic {
  font-family: "Lato", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.lato-black-italic {
  font-family: "Lato", sans-serif;
  font-weight: 900;
  font-style: italic;
}

/* Font Inter */

.inter-thin {
  font-family: "Inter", sans-serif;
  font-weight: 100;
  font-style: normal;
}

.inter-light {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-style: normal;
}

.inter-regular {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.inter-semibold {
  font-family: "Inter", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.inter-bold {
  font-family: "Inter", sans-serif !important;
  font-weight: 700 !important;
}

.inter-black {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: normal;
}

.inter-thin-italic {
  font-family: "Inter", sans-serif;
  font-weight: 100;
  font-style: italic;
}

.inter-light-italic {
  font-family: "Inter", sans-serif;
  font-weight: 300;
  font-style: italic;
}

.inter-regular-italic {
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: italic;
}

.inter-bold-italic {
  font-family: "Inter", sans-serif;
  font-weight: 700;
  font-style: italic;
}

.inter-black-italic {
  font-family: "Inter", sans-serif;
  font-weight: 900;
  font-style: italic;
}

.inter-medium {
  font-family: "Inter", sans-serif;
  font-weight: 500;
  font-style: normal;
}

/* End of Font */

/* Custom Style */

body {
    font-family: "Inter", sans-serif;
    background: #FFF;
}

.beta-bule {
    color: var(--beta-biru);
}

.border-dashed-trainer {
    border: 1.5px dashed var(--royal-blue) !important; /* Warna Royal Blue */
}

/* Background */

.bg-pdl-danger {
  background-color: var(--pdl-danger);
}

.bg-abu {
  background-color: var(--abu);
}

.bg-abu-dua {
  background-color: var(--abu-dua);
}

.bg-merah-muda {
  background-color: var(--merah-muda);
}

.bg-crimson-red {
  background-color: var(--crimson-red);
}

.bg-pusdiklat-red {
  background-color: var(--pusdiklat-red);
}

.bg-vivid-orange {
  background-color: var(--vivid-orange);
}

.bg-vivid-azure {
  background-color: var(--vivid-azure);
}

.bg-azure-blue {
  background-color: var(--azure-blue);
}

.bg-jungle-green {
  background-color: var(--jungle-green);
}

.bg-ice-blue {
  background-color: var(--ice-blue);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-light-aqua {
  background-color: var(--light-aqua);
}

.bg-royal-blue {
  background-color: var(--royal-blue);
}

.bg-video {
  border-radius: 16px;
  opacity: 1;
  background: linear-gradient(135deg, #4F46E5 0%, #3B82F6 100%);
}

.bg-grad-visual {
  background: linear-gradient(135deg, #8A2BE2 0%, #FF3399 100%);
}

.bg-grad-auditori {
  background: linear-gradient(135deg, #1E90FF 0%, #2EE8F7 100%);
}

.bg-grad-kinestetik {
  background: linear-gradient(135deg, #23CBA7 0%, #00E676 100%);
}

.bg-cream {
  background-color: var(--cream);
}

.bg-lime-green {
  background-color: var(--lime-green);
}

.card-header.bg-card-kompetensi {
  background-color: var(--royal-blue);
}

/* Text */

.text-abu-dua {
  color: var(--abu-dua) !important;;
}

.text-abu-breadcrumb {
  color: var(--abu-tiga);
}

.text-abu-tiga {
  color: var(--abu-tiga) !important;
}

.text-dea {
  color: var(--pdl-danger) !important;;
}

.text-royal-blue {
  color: var(--royal-blue) !important;
}

.pg-heading-h1 {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 24px;
}

.pg-heading-p {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
}

/* Buttons */

.btn-pdl-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pdl-primary);
  --bs-btn-border-color: var(--pdl-primary);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0056b3;
  --bs-btn-hover-border-color: #0056b3;

  --bs-btn-focus-shadow-rgb: 13, 110, 253;
}

.btn-pdl-purple {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--pdl-purple);
  --bs-btn-border-color: var(--pdl-purple);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #6f36c0;
  --bs-btn-hover-border-color: #6f36c0;

  --bs-btn-focus-shadow-rgb: 134, 68, 226;
}

.btn-pdl-success {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--lime-green);
  --bs-btn-border-color: var(--lime-green);

  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--darker-green);
  --bs-btn-hover-border-color: var(--darker-green);

  --bs-btn-focus-shadow-rgb: 134, 68, 226;
}

.btn-pdl-light {
  --bs-btn-color: #000;
  --bs-btn-bg: #fff;
  --bs-btn-border-color: #000;

  --bs-btn-hover-color: #000;
  --bs-btn-hover-bg: #fff;
  --bs-btn-hover-border-color: #000;

  --bs-btn-focus-shadow-rgb: 134, 68, 226;
}

.btn-outline-border-abu {
  border: solid 1px #A1A9B8 !important;
}

.btn-outline-pdl {
  color: #B72024;
  border: solid 1px #B72024 !important;
  border-radius: 8px;
  background-color: transparent;
  padding: 8px;
}

.btn-outline-olive {
  color: #000;
  border: solid 1px var(--vivid-orange);
  background-color: transparent;
  transition: all 0.2s ease-in-out;
}

.btn-outline-olive:hover {
  background-color: var(--vivid-orange);
  color: #FFF;
  border-color: var(--vivid-orange);
}

.btn-check:checked + .btn-outline-olive {
  background-color: var(--vivid-orange);
  color: #FFF;
  border-color: var(--vivid-orange);
}

.btn-check:checked + .btn-outline-danger {
  color: #FFF;
}

.btn-check:checked + .btn-outline-primary {
  color: #FFF;
}

.btn-check:checked + .btn-outline-warning {
  color: #FFF;
}

.btn-check:checked + .btn-outline-success {
  color: #FFF;
}

.btn-login {
  background-color: var(--pusdiklat-red);
  color: white;
}

.btn-login:hover {
  background-color: var(--brighter-red);
  color: white;
}

.btn-plain {
  background-color: none;
  border: none;
  margin: 0;
  padding: 0;
  color: inherit;
  font: inherit;
}

/* Base */
.btn-save-red {
    background-color: #B72024;
    border-color: #B72024;
    color: #ffffff;
}

.btn-save-red:hover {
    background-color: #9a1b1e;
    border-color: #9a1b1e;
    color: #ffffff;
}

.btn-save-red:focus,
.btn-save-red:focus-visible {
    background-color: #9a1b1e;
    border-color: #9a1b1e;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(183, 32, 36, 0.4);
}

.btn-save-red:active,
.btn-save-red.active {
    background-color: #821519;
    border-color: #821519;
    color: #ffffff;
}

.btn-save-red:disabled,
.btn-save-red.disabled {
    background-color: #B72024;
    border-color: #B72024;
    color: #ffffff;
    opacity: 0.65;
}

/* Outline variant */
.btn-save-red-outline {
    background-color: transparent;
    border-color: #B72024;
    color: #B72024;
}

.btn-save-red-outline:hover {
    background-color: #B72024;
    border-color: #B72024;
    color: #ffffff;
}

.btn-save-red-outline:focus,
.btn-save-red-outline:focus-visible {
    background-color: #B72024;
    border-color: #B72024;
    color: #ffffff;
    box-shadow: 0 0 0 0.25rem rgba(183, 32, 36, 0.4);
}

.btn-save-red-outline:active,
.btn-save-red-outline.active {
    background-color: #821519;
    border-color: #821519;
    color: #ffffff;
}

.btn-save-red-outline:disabled,
.btn-save-red-outline.disabled {
    background-color: transparent;
    border-color: #B72024;
    color: #B72024;
    opacity: 0.65;
}

/* Soft/Light variant */
.btn-save-red-soft {
    background-color: rgba(183, 32, 36, 0.1);
    border-color: transparent;
    color: #B72024;
}

.btn-save-red-soft:hover {
    background-color: rgba(183, 32, 36, 0.2);
    border-color: transparent;
    color: #B72024;
}

.btn-save-red-soft:focus,
.btn-save-red-soft:focus-visible {
    background-color: rgba(183, 32, 36, 0.2);
    border-color: transparent;
    color: #B72024;
    box-shadow: 0 0 0 0.25rem rgba(183, 32, 36, 0.25);
}

.btn-save-red-soft:active,
.btn-save-red-soft.active {
    background-color: rgba(183, 32, 36, 0.3);
    border-color: transparent;
    color: #B72024;
}

.btn-save-red-soft:disabled,
.btn-save-red-soft.disabled {
    background-color: rgba(183, 32, 36, 0.1);
    border-color: transparent;
    color: #B72024;
    opacity: 0.65;
}

.btn-orange {
    --bs-btn-color: #fff;
    --bs-btn-bg: #199121;
    --bs-btn-border-color: #199121;

    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #147a1b;
    --bs-btn-hover-border-color: #117318;

    --bs-btn-focus-shadow-rgb: 25, 145, 33;

    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #117318;
    --bs-btn-active-border-color: #0e6c15;

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #199121;
    --bs-btn-disabled-border-color: #199121;
}

/* Navbar */

#navbar-pusdiklat-default {
    background: #FFF;
    border-bottom: solid thin rgba(0,0,0,0.2) !important;
    height: 80px;
    z-index: 4;
}

#navbar-pusdiklat-default #navbar-pusdiklat-user {
  min-width: 175px;
  max-width: 220px;
}

#navbar-pusdiklat-user .dropdown-menu li {
  padding-left: 1rem;
  padding-right: 1rem;
}

#navbar-pusdiklat-user .dropdown-menu li a {
  border-radius: 10px;
}

#navbar-pusdiklat-user .dropdown-menu .dropdown-item.dropdown-logout {
    background-color: var(--pdl-danger);
    color: #fff;
}

/* Saat TIDAK aktif: tampilkan grey, sembunyikan yang berwarna */
.nav-link .icon-active   { display: none; }
.nav-link .icon-inactive { display: inline; }

/* Saat aktif: kebalikannya */
.nav-link.active .icon-active   { display: inline; }
.nav-link.active .icon-inactive { display: none; }

@media(min-width: 993px) {
  #navbar-pusdiklat-default > .container > .collapse > .container-fluid > .nav-item.dropdown > .dropdown-menu.show {
    width: 160px;
  }
}

@media (min-width: 993px) {
  #navbar-pusdiklat-default .navbar-nav .nav-link {
    text-align: center;
    width: 100%;
    font-size: 12px;
  }
}

@media (max-width: 992px) {
  #navbar-pusdiklat-default .navbar-collapse .nav-link {
    text-align: start;
    width: 100%;
    font-size: 1.2rem;
  }

  #navbar-pusdiklat-default .navbar-collapse .nav-icons {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  #navbar-pusdiklat-default #navbar-pusdiklat-collapse.show {
    padding-bottom: 16px;
    height: 83vh;
    display: flex;
    flex-direction: column;
  }

  #navbar-pusdiklat-default #navbar-pusdiklat-collapse .dropdown-menu.show {
    box-shadow: none;
  }

  #navbar-pusdiklat-default #navbar-pusdiklat-user {
    min-width: 100%;
    max-width: 100%;
    margin-top: auto;
    align-self: flex-end;
  }
  
}

/* Navigation */

.cus-nav-link {
    background-color: none;
    transition: background 0.4s ease-in-out;
}

.cus-nav-link.active {
  background-color: var(--abu-empat);
}

.cus-nav-link:hover {
    background: var(--abu-empat);
    transition: background 0.4s ease-in-out;
}

.nav-pencatatan {
  --nav-bg: #E8F0FE;
  --nav-active-bg: #FFFFFF;
  --nav-active-color: #1E5EFF;
  --nav-inactive-color: #5B6470;
  --nav-radius: 1rem;

  display: flex;
  flex-wrap: wrap;
  padding: 0.5rem;
  margin-bottom: 0;
  list-style: none;
  background-color: var(--nav-bg);
  border-top-left-radius: var(--nav-radius);
  border-top-right-radius: var(--nav-radius);
  gap: 0.5rem;
}

.nav-pencatatan .nav-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--nav-inactive-color);
  background: none;
  border: 0;
  border-top-left-radius: var(--nav-radius);
  border-top-right-radius: var(--nav-radius);
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.nav-pencatatan .nav-link svg {
  color: var(--nav-inactive-color);
  transition: color 0.15s ease-in-out;
}

.nav-pencatatan .nav-link:hover,
.nav-pencatatan .nav-link:focus {
  color: var(--nav-active-color);
}

.nav-pencatatan .nav-link:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(30, 94, 255, 0.25);
}

.nav-pencatatan .nav-link.disabled,
.nav-pencatatan .nav-link:disabled {
  color: var(--bs-secondary-color);
  pointer-events: none;
  cursor: default;
}

.nav-pencatatan .nav-link.active {
  color: var(--nav-active-color);
  background-color: var(--nav-active-bg);
}

.nav-pencatatan .nav-link.active svg {
  color: var(--nav-active-color);
}

/* Hide Calendar */

.no-calendar::-webkit-calendar-picker-indicator {
    display: none;
    -webkit-appearance: none;
}

.no-calendar {
    appearance: none;
}

.date-cal-btn {
    background: none;
    border: none;
    padding: 0;
    margin-left: 8px;
    display: flex;
    align-items: center;
    cursor: pointer;
    opacity: 0.5;
}

.date-cal-btn:hover { opacity: 1; }

/* Login Page */

.pusdiklat-login {
  font-family: 'Inter', sans-serif;
  border-radius: 16px;
  overflow: hidden;
}

.pusdiklat-login > .pdl-card-body > .pdl-upper-card > .pdl-logo {
  width: 40%;
}

.pusdiklat-login > .pdl-card-body > .pdl-upper-card {
  background-color: var(--pusdiklat-red);
  padding: 24px;
}

.pusdiklat-login > .pdl-card-body > .pdl-upper-card > .pdl-title {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
}

.pusdiklat-login > .pdl-card-body > .pdl-upper-card > .pdl-slug {
  font-size: 16px;
  font-weight: 400;
  font-style: normal;
}

.pusdiklat-login > .pdl-card-body > .pdl-lower-card {
  padding: 24px;
}

.pusdiklat-login > .pdl-card-body > .pdl-lower-card > form > .form-group > .form-control {
  font-size: 12px;
}

.pusdiklat-login > .pdl-card-body > .pdl-lower-card > .pdl-copyright {
  font-weight: 400;
  font-size: 12px;
}

/* Cards */

.pusdiklat-cards {
  border-radius: 16px;
  height: 90px;
  padding-right: 16px;
  padding-left: 16px;
}

.card-pusdiklat {
    --bs-card-border-color: #F1F1F4;
    --bs-card-border-radius: 1rem;
    --bs-card-box-shadow: 0px 4px 24px 0px #0000001A;
    box-shadow: 0px 4px 24px 0px #0000001A;
}

.card .card-header.card-kompetensi {
  padding: 24px 32px 24px 32px;
  --bs-card-cap-padding-y: 24px;
  --bs-card-cap-padding-x: 32px;
}

.card-video {
  min-height: 375px;
  border: 1px solid #B4D2FF;
  opacity: 1;
  padding: 24px;
  background-color: #F5F9FF;
  box-shadow: 0px 4px 24px rgba(0, 0, 0, 0.1);
}

/* Data Tabel */

#dataTabel th {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
}

#dataTabel td {
  font-family: 'Inter', sans-serif;
  font-weight: 400;
  font-size: 14px;
  letter-spacing: 2%;
  vertical-align: middle;
  text-transform: capitalize;
}

@media (max-width:992px) {
  .mobile-table-responsive {
    overflow-x: auto;
  }
}


.table-profile {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
}

table.table-profile .table-title {
  font-weight: 700;
}

table.table-profile .table-value {
  font-weight: 400;
}

.nav-pdl-profile.nav.nav-pills .nav-item .nav-link {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: #5A6376;
}

.nav-pdl-profile.nav.nav-pills .nav-item .nav-link.active {
  background-color: var(--royal-blue);
  color: #fff;
}

/* Alur Penugasan */

.step-track {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.step-track-icons {
    display: flex;
    align-items: center;
    width: 100%;
}

.step-track-labels {
    display: flex;
    width: 100%;
}

.step-circle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
}

.step-icon-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-blue     { background: #DBEAFE; }
.step-green    { background: #D1FAE5; }
.step-purple   { background: #F3E8FF; }
.step-lavender { background: #E0E7FF; }

.step-dashed {
    flex: 1;
    border-top: 2px dashed #D1D5DB;
    margin-bottom: 60px;
}

.dotted-line {
  top: 50%;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px dotted #000;
  z-index: 0;
}

/* Modal Input Data Trainee Internal */

#InputKandidatRekruter {
  font-family: 'Inter', sans-serif;
}

/* Custom Badges */

.badge-rekomendasi { padding: 4px 8px; border-radius: 16px; font-size: 12px; }
.badge-rekomendasi.badge-recruiter { background: #E8EEFF; color: #6C3DDB; }
.badge-rekomendasi.badge-psikotes  { background: #E5EEFF; color: #4470E2; }
.badge-rekomendasi.badge-default   { background: #E6FFF3; color: #14804A; }

.badge-pusdiklat { padding: 4px 8px; border-radius: 16px; font-size: 12px; }
.badge-pusdiklat.badge-info-beige { background: #FFF3E6; color: #804A14; }
.badge-pusdiklat.badge-outline-beige { color: #804A14; border: 1px solid #804A14; }
.badge-pusdiklat.badge-info-cream { background: #E6FFF3; color: #14804A; }
.badge-pusdiklat.badge-danger { background: #FFE6E7; color: #B72024; }
.badge-pusdiklat.badge-default   { background: #E6FFF3; color: #14804A; }


/* SVG Coloring */

.svg-white {
    filter: invert(100%) brightness(100%);
}

.svg-gray {
    filter: invert(74%) sepia(21%) saturate(179%) hue-rotate(169deg) brightness(86%) contrast(88%);
}

.svg-primary {
    filter: brightness(0) saturate(100%) invert(51%) sepia(35%) saturate(6843%) hue-rotate(202deg) brightness(98%) contrast(95%);
}

.svg-warning {
    filter: brightness(0) saturate(100%) invert(53%) sepia(99%) saturate(1313%) hue-rotate(352deg) brightness(99%) contrast(91%);
}

.svg-danger {
    filter: brightness(0) saturate(100%) invert(18%) sepia(54%) saturate(3606%) hue-rotate(341deg) brightness(100%) contrast(99%);
}

/* Breadcrumb */

.pusdiklat-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    margin: 0;
    list-style: none;
}

.pusdiklat-breadcrumb-item + .pusdiklat-breadcrumb-item {
    padding-left: 0.5rem;
}

.pusdiklat-breadcrumb-item + .pusdiklat-breadcrumb-item::before {
    content: "";
    width: 8px;
    height: 8px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M2.5 0L1 1.5 3.5 4 1 6.5 2.5 8l4-4-4-4z' fill='%236c757d'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 8px 8px;
    margin-right: 0.5rem;
    vertical-align: middle;
}

/* Pagination */

.custom-pagination {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 14px;
}

.custom-pagination button {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 18px;
    color: #333;
    padding: 0 4px;
    line-height: 1;
}

.custom-pagination button:disabled {
    color: #ccc;
    cursor: default;
}

.custom-pagination .page-indicator {
    font-size: 14px;
    min-width: 30px;
    text-align: center;
}

/* Form Select Solit */

.form-select-solit {
  background-color: #E9EDF5;
  border-color: #E9EDF5;
  color: #5e6278;
  transition: color 0.2s ease;
}
.form-select-solit:focus {
  background-color: #dde3f0; /* slightly darker on focus */
  border-color: #dde3f0;
  color: #5e6278;
  transition: color 0.2s ease;
}.form-select-solit {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-color: #E9EDF5;
  border-color: #E9EDF5;
  color: #5e6278;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.form-select-solit:focus {
  background-color: #dde3f0;
  border-color: #dde3f0;
  color: #5e6278;
  box-shadow: 0 0 0 0.25rem rgba(233, 237, 245, 0.5);
  outline: 0;
}

.form-select-solit:disabled,
.form-select-solit[readonly] {
  background-color: #c9cfe0;
  border-color: #c9cfe0;
  color: #a1a5b7;
  opacity: 1;
  cursor: not-allowed;
}

.was-validated .form-select-solit:valid,
.form-select-solit.is-valid {
  border-color: #198754;
  background-color: #E9EDF5;
}
.was-validated .form-select-solit:valid:focus,
.form-select-solit.is-valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

.was-validated .form-select-solit:invalid,
.form-select-solit.is-invalid {
  border-color: #dc3545;
  background-color: #E9EDF5;
}
.was-validated .form-select-solit:invalid:focus,
.form-select-solit.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Form Control Solit */

.form-control-solit {
  background-color: #E9EDF5;
  border-color: #E9EDF5;
  color: #5e6278;
  transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

/* Placeholder */
.form-control-solit::placeholder {
  color: #a1a5b7;
  opacity: 1;
}

/* Focus state */
.form-control-solit:focus {
  background-color: #dde3f0;
  border-color: #dde3f0;
  color: #5e6278;
  box-shadow: none;
  outline: 0;
}

/* Readonly */
.form-control-solit[readonly] {
  background-color: #E9EDF5;
  border-color: #E9EDF5;
  opacity: 1;
}

/* Disabled */
.form-control-solit:disabled {
  background-color: #c9cfe0;
  border-color: #c9cfe0;
  color: #a1a5b7;
  opacity: 1;
  cursor: not-allowed;
}

/* Validation — valid */
.was-validated .form-control-solit:valid,
.form-control-solit.is-valid {
  background-color: #E9EDF5;
  border-color: #198754;
}
.was-validated .form-control-solit:valid:focus,
.form-control-solit.is-valid:focus {
  border-color: #198754;
  box-shadow: 0 0 0 0.25rem rgba(25, 135, 84, 0.25);
}

/* Validation — invalid */
.was-validated .form-control-solit:invalid,
.form-control-solit.is-invalid {
  background-color: #E9EDF5;
  border-color: #dc3545;
}
.was-validated .form-control-solit:invalid:focus,
.form-control-solit.is-invalid:focus {
  border-color: #dc3545;
  box-shadow: 0 0 0 0.25rem rgba(220, 53, 69, 0.25);
}

/* Customized Input */

/* Style the placeholder option (when nothing real is selected) */
.form-select {
  color: #979797;
  font-weight: 300;
}

/* Once a real option is selected, restore normal style */
.form-select:has(option[value=""]:not(:checked)) {
  color: #212529; /* Bootstrap's default text color */
  font-weight: 400;
}

.card-trainee-nama {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    max-width: 180px;
}