.ts-wrapper .ts-control {
    position: relative;
    padding-right: 2.5rem !important;
    border-radius: 6px !important;
    border: 1px solid #222 !important;
}

/* Pastikan backdrop SweetAlert2 menutupi semua */
.swal2-container {
    z-index: 9999 !important; /* Nilai yang sangat tinggi */
}

/* Opsi tambahan: pointer-events none pada body saat modal aktif */
/* Ini lebih agresif dan mungkin tidak selalu diperlukan */
body.swal2-shown {
    pointer-events: none;
}

/* Kecuali untuk modal itu sendiri */
body.swal2-shown .swal2-container {
    pointer-events: auto;
}

.epic-danger i {
    margin-right: 10px; /* Sesuaikan nilai jarak sesuai keinginan Anda */
    vertical-align: middle; /* Opsional: untuk memastikan ikon sejajar dengan teks */
}

.ts-wrapper .ts-control::after {
    content: "";
    position: absolute;
    top: 50%;
    font-size: 15px;
    right: 1rem;
    width: 10px;
    height: 24px;
    pointer-events: none;
    background: url('data:image/svg+xml;utf8,<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 10L12 15L17 10" stroke="%23999" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/></svg>')
        no-repeat center center;
    background-size: 24px 24px;
    transform: translateY(-50%);
}

#select-kat-bimbingan {
    border: 1px solid #222 !important;
}

#select-kat-bimbingan:focus {
    border: 2px solid #1565c0 !important;
}

.ts-wrapper.focus .ts-control,
.ts-wrapper.active .ts-control {
    border: 2px solid #1565c0 !important;
    box-shadow: none !important;
}






/* Atur Flexbox agar input dan tombol berada dalam satu baris */
/* .form-search {
    display: flex;
    justify-content: flex-start;  
    gap: 10px; 
    align-items: center; 
}

.form-search .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 45px;
    height: 40px;
    background-color: #6c63ff;
    border-radius: 5px; 
    border: none;
    margin-left: 5px;
     margin-right: 25px;
    margin-top: 26px; 
    padding: 0;
}

.form-search .btn .bx-search {
    font-size: 24px;
    color: #fff;
}


.form-search .col-md-4 {
    width: auto;
}

.form-search .btn {
    padding: 8px 20px;
}


.form-search .form-control {
    width: auto;
    max-width: 100px;
}


.form-search .col-12 {
    margin-left: 10px;
} */


#class {
    
    width: 100%;
    margin-right: 10px;
    margin-bottom: 29px;
    height: 35px;
    max-width: 250px;      
    padding: 0 1rem; 
    font-size: 14px;
    border: 1px solid #222 !important;
    color: #697a8d;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    display: block;
    line-height: 1.5;
}

.star {
    font-size: 3rem; /* Increase size of the stars */
    cursor: pointer;
    margin: 0 5px; /* Space between stars */
    
}

.d-flex {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 30px;
}






#tahun_akademik{

    width: 100%;
    height: 35px;
     max-width: 250px; 
     margin-right: 25px;     
    padding: 0 1rem; 
    font-size: 14px;
    border: 1px solid #222 !important;
    color: #697a8d;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    display: block;
    line-height: 1.5;
}

/* .form-select {
    width: 100%;
    height: 35px;
    padding: 0 1rem; 
    font-size: 14px;
    border: 1px solid #222 !important;
    color: #697a8d;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    display: block;
    line-height: 1.5;
} */



.form-control {
    width: 100%;
    height: 35px;
    padding: 0 1rem; 
    font-size: 14px;
    border: 1px solid #222 !important;
    color: #697a8d;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    display: block;
    line-height: 1.5;
}
select.form-control {
    width: 100%;
    height: 35px; 
    padding: 0 1rem; 
    font-size: 14px;
    border: 1px solid #222 !important; 
    color: #697a8d;
    background-color: #fff;
    border-radius: 0.375rem;
    box-shadow: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    appearance: none;
    display: block;
    line-height: 1.5;
}

/* Menambahkan fokus pada elemen select */
select.form-control:focus {
    border: 2px solid #1565c0 !important;
    outline: none !important;
    box-shadow: none !important;
}
.form-control:focus {
    border: 2px solid #1565c0 !important; 
    outline: none !important;
    box-shadow: none !important;
}

.input-border-biru {
    font-size: 15px;
    box-shadow: none !important;
    border-radius: 6px !important;
    border: 1px solid #222 !important;
}

.input-border-biru:focus {
    border: 2px solid #1565c0 !important;
    outline: none !important;
}

textarea.form-control {
    min-height: 65px;
    padding: 0.4375rem 0.875rem;
    border-radius: 0.375rem;
    font-size: 15px;
    color: #697a8d;
    border: 1px solid #d9dee3;
}

/* Atur TomSelect supaya mirip .input-border-biru */
/* Gaya input custom (copy dari .input-border-biru dan .form-control) */
.ts-control, .ts-wrapper.single.input-border-biru .ts-control {
    font-size: 15px;
    border-radius: 6px !important;
    border: 1px solid #222 !important;
    color: #697a8d;
    background-color: #fff;
    box-shadow: none !important;
    padding: 0 1rem;
    min-height: 35px;
    height: 35px;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}

/* State fokus */
.ts-control:focus, .ts-wrapper.single.input-border-biru .ts-control:focus {
    border: 2px solid #1565c0 !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Hilangkan border ganda bawaan TomSelect jika perlu */
.ts-wrapper.single .ts-control {
    box-shadow: none !important;
}














.ceko {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: 50% !important;
    height: 25px !important;
    background: #ff5630 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 6px !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(255, 86, 48, 0.09) !important;
    transition: background 0.18s, box-shadow 0.18s, transform 0.14s !important;
    cursor: pointer !important;
    outline: none !important;
    margin: 0px 0 !important; 
}

.ceko-danger {
    background: #ff5630 !important;
}

.ceko:hover,
.ceko:focus {
    background: #4074e5 !important;
    box-shadow: 0 4px 18px rgba(255, 86, 48, 0.18) !important;
    transform: translateY(-2px) scale(1.03) !important;
}


    .pagination {
        
        display: flex;
        justify-content: center;
        list-style: none;
        margin-top: 10px; 

    }

    .pagination li {
        margin: 0 5px;
    }

    .pagination li a {
        text-decoration: none;
        padding: 5px 10px;
        border: 1px solid #ddd;
        border-radius: 5px;
    }

    .pagination li a:hover {
        background-color: #007bff;
        color: white;
    }

    .pagination .active a {
        background-color: #007bff;
        color: white;
    }






/* Mengatur lebar kolom dengan konsisten */

.modal-own .btn {
    display: flex;
    justify-content: flex-end;  
    gap: 10px;  
    padding: 10px 20px;  
}

.table-responsive {
    overflow-x: auto; /* Memastikan konten tabel dapat digulir horizontal */
}

.card-body {
    max-height: 600px; /* Sesuaikan dengan ukuran kontainer halaman Anda */
    overflow-y: auto;  /* Memastikan konten tabel dapat digulir vertikal */
}
/* Styling for form-select */




.modal-own .btn {
    width: auto;  
}

input[readonly] {
    background-color: #fff !important;  /* Putih seperti input biasa */
    color: #495057;
    border: 1px solid #ced4da;
    opacity: 1; /* Jangan pakai opacity rendah */
}

select[readonly] {
    background-color: #fff !important;  /* Putih seperti input biasa */
    color: #495057;
    border: 1px solid #ced4da;
    opacity: 1; /* Jangan pakai opacity rendah */
}

textarea[readonly] {
    background-color: #fff !important;  /* Putih seperti input biasa */
    color: #495057;
    border: 1px solid #ced4da;
    opacity: 1; /* Jangan pakai opacity rendah */
}

.modal-body {
        text-align: left; /* Mengubah teks agar rata kiri */
    }

 /* Atur lebar kolom  */
.table {
    table-layout: fixed !important;  
    width: 100% !important;  
}


.table th, .table td {
    width: 12% !important;
    text-align:  center!important; 
    padding: 12px !important; 
}

/* Atur margin untuk tombol  */
.table .btn {
    width: auto !important; 
    margin: 0 5px !important;  
}


.action-buttons .btn {
    padding:  15px ; 
    margin-bottom: 10px;
    border-radius: 5px ; 

}

/* Penataan Tombol dalam Kolom Aksi */
.action-buttons {
    display: flex ;
    flex-direction: column ;
    justify-content: center;
    align-items: center;
    gap: 5px;
}


.action-buttons a,
.action-buttons button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 10px;  
    width: 30px; 
    height: 30px;  
    border-radius: 5px ;
    margin: 0 5px;  
    border: 1px solid #ccc;  
    position: relative;
    box-shadow: none; 
    transition: transform 0.2s ease-in-out; 
}

/* Hover Tombol */
.action-buttons a:hover,
.action-buttons button:hover {
    transform: scale(1.05); 
}

/* Menyelaraskan ikon tombol */
.action-buttons a i,
.action-buttons button i {
    margin-bottom: 5px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); 
}


.ceko i {
    font-size: 1.3em !important;
    margin-right: 4px !important;
    display: inline-block !important;
}

/* Styling untuk alert error */
.epic {
    background-color: #f8d7da; 
    color: #721c24; 
    border: 1px solid #007bff; 
    padding: 8px 12px;
    border-radius: 3px; 
    margin-bottom: 15px;
    font-size: 13px; 
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); 
    display: flex;
    align-items: center; 
    justify-content: flex-start; 
    font-weight: bold;
}

/* Styling untuk ikon pesan error */
.alert i {
    margin-right: 5px; 
    font-size: 16px; 
}

/* Styling untuk pesan error di bawah input field */
.text-danger {
    font-size: 13px;
    color: #f44336; 
    margin-top: 5px;
    padding-left: 5px;
}


/* chat */

/* Sidebar List Chat */
.chat-sidebar-list {
    padding-left: 0;
    margin: 0;
}
.chat-sidebar-item {
    background: none !important;
    border: none !important;
    padding: 0;
    margin: 0;
    position: relative;
}
.chat-sidebar-link {
    display: block;
    padding: 12px 18px;
    background: #000;
    color: #bbb;
    text-decoration: none;
    font-size: 1rem;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
}
.chat-sidebar-link.selected {
    color: #fff;
}
.chat-sidebar-title {
    font-weight: bold;
    color: inherit;
}
.chat-sidebar-msg {
    display: block;
    font-size: 13px;
    color: inherit;
    margin-top: 2px;
}
.chat-sidebar-link.selected .chat-sidebar-title {
    color: #fff;
}
.chat-sidebar-link.selected .chat-sidebar-msg {
    color: #fff;
}
.chat-divider {
    border-bottom: 1.5px solid #fff;
    margin: 0 6px;
}

/* Chat Form Input */
.chat-form {
    padding: 0;
    margin: 0;
}
.chat-textarea {
    resize: none;
    width: 100%;
    min-height: 44px;
    max-height: 90px;
    overflow-y: auto;
    margin: 0;
}
.chat-file-label {
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
 
    font-size: 1.6rem;
}


.chat-send-btn {
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-divider {
    border-bottom: 2px solid #fff;   /* warna putih, atau ganti sesuai kebutuhan */
    width: 100%;
    margin: 0;
}


/* Responsive or further adjustment as needed */