.user-display {
    display: flex;
    align-items: center;
}
.user-display i {
    margin-right: 8px;
}
.header-area {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background-color: #ffffff;
}
.modal-overlay-mod {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7); /* Efek bayangan */
    z-index: 999;
}
.modal-content-mod {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 600px; /* Ukuran modal sedang */
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3); /* Efek bayangan pada modal */
    z-index: 1000;
}
.close-modal-mod {
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #ccc;
    border: none;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
}
@import url('https://fonts.googleapis.com/css2?family=Hind+Siliguri:wght@500&display=swap');
.card{
width: 300px;
border: none;
border-radius: 15px;
}
.adiv{
background: #0063FF;
border-radius: 15px;
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
font-size: 12px;
height: 46px;
}
.fas{
cursor: pointer;
}
.fa-chevron-left{
color: #fff;
}
h6{
font-size: 12px;
font-weight: bold;
}
small{
font-size: 10px;
color: #898989;
}
.form-control{
border: none;
background: #F6F7FB;
font-size: 12px;
}
.form-control:focus{
box-shadow: none;
background: #F6F7FB;
}
.form-control::placeholder{
font-size: 12px;
color: #B8B9BD;
}
.btn-primary{
background: #0063FF;
padding: 4px 0 7px;
border: none;
}
.btn-primary:focus{
box-shadow: none;
}
.btn-primary span{
font-size: 12px;
color: #A6DCFF;
}
p.mt-3{
font-size: 11px;
 color: #B8B9BD;
 cursor: pointer;
}
.feedback-images img {
    width: 48px;
    height: 48px;
    margin-right: 5px;
    cursor: pointer;
    border-radius: 50%;
}
.feedback-images img.selected {
    border: 2px solid #0063FF; /* Efek pemilihan pada gambar yang dipilih */
}
.image-container img {
    width: 100%; /* Untuk mengisi penuh lebar card dengan gambar */
    height: auto; /* Untuk menjaga aspek rasio gambar */
    border-radius: 5px;
    margin-bottom: 10px;
}
.card {
    background-color: transparent;
    border: none;
    width: 100%;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    position: relative; /* Untuk memastikan overlay bisa diatur dengan posisi absolut */
    cursor: pointer; /* Menambahkan pointer cursor saat hover */
}

.card-img {
    width: 100%;
    height: auto;
    border-radius: 10px;
}

/* Overlay */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Transparan hitam */
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.3s ease;
}

/* Teks di dalam Overlay */
.text-in-overlay {
    color: white;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    border-left: 3px solid white;
    padding-left: 10px;
    transform: translateX(0);
    transition: transform 0.3s ease, border-left 0.3s ease, border-bottom 0.3s ease 0.3s;
}

/* Efek Hover pada Card */
.card:hover .text-in-overlay {
    transform: translateX(-10px);
    border-left: none;
    border-bottom: 3px solid white;
    padding-bottom: 10px;
}

.sipentas{
    width: 100px;
    height:120px;
}
/* Gaya tambahan untuk modal */
.modal-content {
    border: none; /* Menghilangkan border pada modal */
    background-color: transparent;
}

/* Gaya tambahan untuk modal body */
.modal-body {
    padding: 0; /* Menghilangkan padding pada modal body */
}

/* Gaya tambahan untuk video player agar memenuhi modal body */
#video-player {
    width: 100%;
    height: 100%;
}
.modal-dialog {
    max-width: 800px;
}
@media (max-width: 767px) {
    /* Gaya untuk tampilan mobile */
    .modal-dialog {
        max-width: 100%; /* Mengatur lebar modal agar sesuai dengan lebar layar */
        margin: 0; /* Mengatur margin menjadi 0 agar modal tidak bergeser ke tengah */
    }

    /* Sembunyikan tombol minimize pada video player di tampilan mobile */
    #video-player::-webkit-media-controls-enclosure {
        display: none;
    }

    #video-player::-webkit-media-controls-panel {
        display: none;
    }
}