.elementor-kit-47{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-47 e-page-transition{background-color:#FFFFFF;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS */.hr {
  display: block;
  margin-top: auto;
  margin-bottom: auto;
  margin-left: auto;
  margin-right: auto;
  border-style: inset;
  border-width: 1px;
}

/* Kontainer dokter dengan flexbox layout */
.dokter-container {
    display: none;                /* Gunakan flexbox untuk mendistribusikan kartu secara horizontal */
    /*grid-template-columns: repeat(3, 1fr)*/
    flex-wrap: wrap;              /* Allow wrapping of cards in new rows jika ruang terbatas */
    gap: 20px;                    /* Jarak antara kartu */
    margin: 20px;
    justify-content: flex-start;  /* Menyusun elemen dari kiri ke kanan */
}

/* Card untuk setiap dokter */
.dokter-card {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 20px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 320px;             /* Lebar maksimal per kartu */
    box-sizing: border-box;
    align-items: center;          /* Pastikan elemen di dalam kartu rata tengah */
    flex-grow: 1;
    width: 100%;                  /* Pastikan kartu dapat mengambil seluruh lebar ruang yang ada */
}

/* Foto dokter dalam bentuk bulat dan ukuran konsisten */
.dokter-photo {
    width: 80px;
    aspect-ratio: 1;
    object-fit: cover;            /* Gambar akan menutupi kontainer dengan proporsi yang sesuai */
    object-position: top center;  /* Fokus di tengah gambar */
    display: block;               /* Menghilangkan spasi ekstra di bawah gambar */
}

/* Header dokter: foto dan nama sejajar */
.dokter-header {
    display: flex;
    align-items: start;
    gap: 10px;                    /* Jarak antara foto dan info */
    text-align: left;             /* Nama dan spesialisasi di sebelah kiri */
    width: 100%;                  /* Agar header span sepanjang lebar kartu */
}

/* Nama dan spesialisasi dokter */
.dokter-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;                 /* Pastikan teks mengisi seluruh ruang yang tersedia */
}

/* Nama dokter */
.dokter-info h3 {
    font-size: 16px;
    margin-bottom: 0;
}

/* Deskripsi spesialisasi dokter */
.spesialisasi {
    font-size: 14px;
    color: #555;
}

/* Tombol di dalam card dokter */
.dokter-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
    width: 100%;
    margin-top: auto;
}

/* Tombol umum */
.dokter-buttons .button {
    padding: 10px 20px;
    background-color: #007bff;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s;
}

.dokter-buttons .button:hover {
    background-color: #0056b3;
}

/* Tombol Pilih Jadwal dengan warna biru yang benar */
.dokter-buttons .lihat-jadwal {
    background-color: #2163B8;
    color: #fff;
}

.dokter-buttons .lihat-jadwal:hover {
    background-color: #D611D2; /* Warna hover */
}

/* Tombol Lihat Profil dengan border */
.dokter-buttons .lihat-profil {
    background-color: transparent;
    color: #2163B8;
    border: 2px solid #2163B8;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* Hover efek untuk Lihat Profil */
.dokter-buttons .lihat-profil:hover {
    background-color: #fff;
    color: #D611D2;
    border-color: #D611D2;
}

/* Button untuk toggle (menampilkan/menyembunyikan dokter) */
.toggle-button {
    cursor: pointer;
    font-weight: bold;
    font-size: 20px;
    margin-right: 10px;
}

/* Efek untuk tombol toggle */
.toggle-button:hover {
    color: #007bff;
}

.schedule-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Fixed positioning to cover the whole screen */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent background */
    z-index: 1000; /* Ensures modal is on top */
}

.schedule-modal.show {
    opacity: 1;
    /*transition: visibility 0s 0s, opacity 0.3s ease-in-out;*/
    display: block;
}

/* Ensure modal content is positioned relative */
/* Modal content */
.modal-content {
    position: absolute; /* Position absolute within the overlay */
    top: 50%; /* Move down 50% of the height */
    left: 50%; /* Move right 50% of the width */
    transform: translate(-50%, -50%); /* Adjust the position by shifting it up/left by 50% of its own height/width */
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    width: 50%; /* Set width of the modal */
}

/* Close button */
.close-button {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 30px;
    color: black;
    cursor: pointer;
}

.jadwal-table {
    width: 100%;
    border-collapse: collapse;
}

.jadwal-table th, .jadwal-table td {
    padding: 8px;
    border: 1px solid #ddd;
}

.jadwal-table th {
    background-color: #f4f4f4;
}

/* Responsive Layout untuk mobile */
@media (max-width: 768px) {
    .dokter-container {
        flex-direction: column;  /* Mengubah menjadi kolom pada layar kecil */
        align-items: center;     /* Menyusun kartu dokter di tengah */
    }
    .dokter-card {
        max-width: 100%;          /* Membuat kartu lebih lebar pada layar kecil */
        padding: 15px;
    }
    .dokter-photo {
        width: 60px;             /* Menyesuaikan ukuran foto pada layar kecil */
        height: 60px;
    }
    .dokter-info h3 {
        font-size: 16px;
    }
    .dokter-info p {
        font-size: 12px;
    }
    .modal-content {
        position: absolute; /* Position absolute within the overlay */
        top: 50%; /* Move down 50% of the height */
        left: 50%; /* Move right 50% of the width */
        transform: translate(-50%, -50%); /* Adjust the position by shifting it up/left by 50% of its own height/width */
        background-color: white;
        padding: 20px;
        border-radius: 10px;
        width: 100%; /* Set width of the modal */
    }
}/* End custom CSS */