/* Styling dasar untuk table */
:root{
      --primary:#0C71C3;
      --primary-dark:#094F8E; /* lebih pekat dari #0C71C3 */
      --primary-10:#E6F1FB;   /* very light tint */
      --accent:#12B886;       /* harmonisasi komplementer lembut untuk CTA */
      --ink:#0F172A;          /* slate-900 */
      --ink-6:#334155;        /* slate-600 */
      --ink-4:#64748B;        /* slate-500 */
      --line:#E2E8F0;         /* slate-200 */
      --bg:#F8FAFC;           /* slate-50 */
      --white:#ffffff;
      --radius:16px;
      --shadow:0 10px 30px rgba(12,113,195,.15);
    }.table-custom-trainings {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background: #fff !important;
    border: 1px solid var(--line) !important;
    border-radius: 12px !important;
    overflow: hidden !important;
    box-shadow: var(--shadow) !important;
}

.table-custom-trainings th,
.table-custom-trainings td {
    padding: 14px 16px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--line) !important;
    font-size: 14px !important;
}

.table-custom-trainings th {
    background: var(--primary-10) !important;
    color: var(--primary-dark) !important;
    font-weight: 800 !important;
}

.table-custom-trainings tr:last-child td {
    border-bottom: none !important;
}

.pill {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    border-radius: 999px !important;
    font-weight: 700 !important;
    background: rgba(18, 184, 134, .1) !important;
    color: #0B7B5D !important;
}


/* Styling responsive untuk layar kecil */
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Styling dasar untuk tombol */
.trainings-button {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    user-select: none;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: all 0.15s ease-in-out;
    text-decoration: none;
    border: 1px solid transparent;
    cursor: pointer;
}

/* trainings-Button Primary */
.trainings-button-primary {
    color: #fff;
    background-color: #007bff;
    border-color: #007bff;
}

.trainings-button-primary:hover {
    background-color: #0056b3;
    border-color: #004085;
}

/* Button Success */
.trainings-button-success {
    color: #fff;
    background-color: #28a745;
    border-color: #28a745;
}

.trainings-button-success:hover {
    background-color: #218838;
    border-color: #1e7e34;
}

/* trainings-Button Default */
.trainings-button-default {
    color: #212529;
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

.trainings-button-default:hover {
    background-color: #d6d8db;
    border-color: #c6c8ca;
}

/* Ukuran trainings-Button */

/* Ukuran Small */
.trainings-button-small {
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    border-radius: 0.2rem;
}

/* Ukuran Extra Small (xs) */
.trainings-button-xs {
    padding: 0.2rem 0.4rem;
    font-size: 0.75rem;
    border-radius: 0.2rem;
}

/* Tambahan efek fokus untuk aksesibilitas */
.trainings-button:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}
/* Styling dasar untuk form */
.training-registration-form {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 0.25rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Gaya untuk setiap grup form */
.training-registration-form .form-group {
    margin-bottom: 1rem;
}

/* Gaya untuk label */
.training-registration-form .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: #333;
}

/* Gaya untuk input dan textarea */
.training-registration-form .form-control {
    width: 96%;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: border-color 0.15s ease-in-out;
}

/* Gaya untuk input saat fokus */
.training-registration-form .form-control:focus {
    border-color: #80bdff;
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}

/* Gaya untuk tombol */
.btn {
    display: inline-block;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    font-weight: 600;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background-color 0.15s ease-in-out;
}

/* Gaya untuk tombol saat hover */
.btn:hover {
    background-color: #0056b3;
}

/* Gaya untuk tombol saat fokus */
.btn:focus {
    outline: none;
    box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
}


#training-form-message {
    display: none; /* Awalnya disembunyikan */
    padding: 15px; /* Ruang di dalam elemen */
    margin-top: 20px; /* Jarak atas dari elemen sebelumnya */
    border-radius: 5px; /* Sudut melengkung */
    font-family: Arial, sans-serif; /* Font yang digunakan */
    font-size: 16px; /* Ukuran font */
}

/* Pesan sukses */
#training-form-message.success {
    background-color: #28a745; /* Hijau */
    color: white; /* Warna teks */
}

/* Pesan error */
#training-form-message.error {
    background-color: #dc3545; /* Merah */
    color: white; /* Warna teks */
}

/* Animasi muncul */
#training-form-message.show {
    animation: fadeIn 0.5s ease-in-out; /* Efek fade in */
}

/* Definisikan animasi fadeIn */
@keyframes fadeIn {
    from {
        opacity: 0; /* Memulai dari transparan */
    }
    to {
        opacity: 1; /* Menjadi sepenuhnya terlihat */
    }
}