@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

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

::-webkit-scrollbar {
    display: none;
}

.bg-yellow {
    background-color: #fef400;
}

.bg-gradient {
    background: linear-gradient(to right, #38371d, #412766) !important;
    color: white;
}

.full-height-row {
    height: calc(100vh - 50px);
    /* Sesuaikan 50px dengan tinggi nav */
    position: relative;
}

.bg-wistoria {
    background-color: #4e1f9e;
    color: white;
}

.text-color-wistoria {
    color: #4e1f9e;
}

.status {
    border: 1px solid #8d9689;
    background-color: #f1faed;
    color: #51be1d;
    padding: 10px 20px;
}

.bg-sc {
    background-color: #f5f5f5;
    color: #161a14;
}

.alert-success {
    border: 2px solid #4fba1d;
    /* Warna hijau untuk border */
    color: #4fba1d;
    /* Warna hijau untuk teks */
    background-color: rgb(243, 255, 241);
    /* Latar belakang putih dengan sedikit hijau */
    padding: 2px 8px;
    /* Ruang di dalam alert */
    border-radius: 5px;
    /* Sudut yang membulat */
    font-size: 12px;
}

.alert-danger {
    border: 2px solid #da251c;
    /* Warna hijau untuk border */
    color: #da251c;
    /* Warna hijau untuk teks */
    background-color: #f3e5e4;
    /* Latar belakang putih dengan sedikit hijau */
    padding: 2px 8px;
    /* Ruang di dalam alert */
    border-radius: 5px;
    /* Sudut yang membulat */
    font-size: 12px;

}


.text-wistoria {
    color: #4a1b9d;
}

.alert-wistoria {
    border: 1px solid #4a1b9d;
    font-weight: 500;
    /* Warna hijau untuk border */

    /* Warna hijau untuk teks */
    background-color: rgb(226, 221, 236);
    /* Latar belakang putih dengan sedikit hijau */
    padding: 2px 8px;
    /* Ruang di dalam alert */
    border-radius: 5px;
    /* Sudut yang membulat */
    font-size: 12px;
}

.kehadiran-hadir {
    position: relative;
    width: 40px;
    bottom: 12px;
    margin: auto;
    border: 0.2px solid #4fba1d;
    /* Warna hijau untuk border */
    color: #4fba1d;
    /* Warna hijau untuk teks */
    background-color: rgb(221, 236, 221);
    /* Latar belakang putih dengan sedikit hijau */
    padding: 1px 2px;
    /* Ruang di dalam alert */
    border-radius: 5px;
    /* Sudut yang membulat */
    font-size: 10px;
    font-weight: bold;
}

.profile-image.not-present {
    filter:  brightness(40%);
    opacity: 1;
}

.kehadiran-rapat {
    position: relative;
    bottom: 20px;
    margin: auto;
    border: 0.2px solid #4a1b9d;
    /* Warna hijau untuk border */
    color: #4a1b9d;
    /* Warna hijau untuk teks */
    background-color: rgb(226, 221, 236);
    /* Latar belakang putih dengan sedikit hijau */
    padding: 1px 2px;
    /* Ruang di dalam alert */
    border-radius: 3px;
    /* Sudut yang membulat */
    font-size: 8px;
    font-weight: bold;
}

.kehadiran-keluar {
    position: relative;
    width: 50px;
    bottom: 12px;
    margin: auto;
    border: 0.2px solid #da251c;
    /* Warna hijau untuk border */
    color: #da251c;
    /* Warna hijau untuk teks */
    background-color: rgb(243, 228, 228);
    /* Latar belakang putih dengan sedikit hijau */
    padding: 1px 2px;
    /* Ruang di dalam alert */
    border-radius: 3px;
    /* Sudut yang membulat */
    font-size: 10px;
    font-weight: bold;
}

.kehadiran-kelas {
    position: relative;
    width: 60px;
    bottom: 10px;
    left: -2px;

    margin: auto;
    border: 0.2px solid #ffaf3b;
    /* Warna hijau untuk border */
    color: #ffaf3b;
    /* Warna hijau untuk teks */
    background-color: rgb(240, 245, 195);
    /* Latar belakang putih dengan sedikit hijau */
    padding: 1px 2px;
    /* Ruang di dalam alert */
    border-radius: 3px;
    /* Sudut yang membulat */
    font-size: 10px;
    font-weight: bold;
}

.kehadiran-kelas {
    position: relative;
    width: 60px;
    bottom: 10px;
    left: -2px;

    margin: auto;
    border: 0.2px solid #ffaf3b;
    /* Warna hijau untuk border */
    color: #ffaf3b;
    /* Warna hijau untuk teks */
    background-color: rgb(240, 245, 195);
    /* Latar belakang putih dengan sedikit hijau */
    padding: 1px 2px;
    /* Ruang di dalam alert */
    border-radius: 3px;
    /* Sudut yang membulat */
    font-size: 10px;
    font-weight: bold;
}



.profile-image.secondary {
    background-color: #f1f1f1;
}

.profile-image {
    width: 70px;
    height: 70px;
    border-radius: 50%;


}

.profile-image-lg {
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.profile-info {
    padding: 10px;
    font-size: 10px;

}

.card {
    overflow: hidden !important;
}

.nav-link {
    border-radius: 10px;
    /* Atur border radius sesuai kebutuhan */
    border: none;
    /* Menghilangkan border default */
    transition: background 0.3s;
    /* Efek transisi saat hover */
    color: gray;
    width: 150px;
}

.nav-link.active {
    background: linear-gradient(to right, #ffb03b, transparent) !important;
    border: none;
    border-radius: 0px;
}

.nav-link:hover {
    background: linear-gradient(to right, white, transparent) !important;
    border: none;
    border-radius: 0px;
}

.wrapper-nav {
    position: relative;
    margin: 0 auto;
    overflow: hidden;
    padding: 5px;
    height: 50px;
}

.list {
    position: absolute;
    left: 0px;
    top: 0px;
    min-width: 3500px;
    margin-top: 0px;
}

.list li {
    display: table-cell;
    position: relative;
    text-align: center;
    cursor: grab;
    cursor: -webkit-grab;
    color: #efefef;
    vertical-align: middle;
}

.scroller {
    text-align: center;
    cursor: pointer;
    display: none;
    padding: 7px;
    padding-top: 13px;
    white-space: no-wrap;
    vertical-align: middle;
    background-color: #fff;
}



.font-1 {
    font-size: 10px;
}

.font-2 {
    font-size: 12px;
}

.font-3 {
    font-size: 14px;
}

.font-4 {
    font-size: 16px;
}

.font-5 {
    font-size: 18px;
}


/* Allow horizontal scrolling */
.wrapper-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Smooth scrolling on iOS */
    white-space: nowrap;
    /* Prevent items from wrapping to a new line */
    scrollbar-width: thin;
    /* For Firefox, make the scrollbar thinner */
    scrollbar-color: transparent transparent;
    /* Hide scrollbar color in Firefox */
}

.nav-tabs {
    display: inline-flex;
    /* Make the nav items display in a row */
    flex-wrap: nowrap;
    gap: 20px;
    /* Add some space between the tabs */
}

.nav-item {
    cursor: pointer;
    /* Give a pointer cursor for better UX */
    user-select: none;
    /* Prevent text selection */
}

.nav-item:focus {
    outline: none;
}

/* Optional: To style the scrollbar in Webkit browsers */
.wrapper-nav::-webkit-scrollbar {
    height: 6px;
}

.wrapper-nav::-webkit-scrollbar-thumb {
    background: transparent;
}

/* CSS Animasi untuk konten tab */
.tab-pane {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease !important;
    display: none;
    /* Start with hidden content */
}

/* Konten yang aktif */
.tab-pane.show.active {
    opacity: 1;
    transform: translateY(0);
    display: block;
}

/* Efek scroll untuk elemen tab */
.nav-item {
    transition: all 0.3s ease;
}