/* Custom CSS for navbar container */

*{
    color: #010B13;
}

.navbar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.navbar{
    margin: 2rem;
    width: fit-content;
}

.navbar .container {
    border-radius: 50px;
    padding: 0.5rem 2rem;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.nav-link{
    margin: 0rem 0.2rem;
    border-radius: 50px;
    padding: 0.5rem 1rem !important;
}

.nav-link.active{
    background-color: #7CFC00;
}

.nav-link.active:hover{
    background-color: rgb(0, 252, 0);
}

.nav-link:not(.active):hover{
    background-color: #F5F5F5;
}

#date-filter-form {
    display: flex;
    justify-content: flex-end;
    align-items: center; 
    gap: 15px; 
}

.form-group {
    display: flex;
    flex-direction: column; 
    gap: 5px;
}

.btn-filter {
    background-color: #7CFC00; 
    color: #010B13;
    border: none; 
    padding: 8px 15px;
    font-size: 16px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; 
    transition: background-color 0.3s ease;
}

.btn-filter:hover {
    background-color:rgb(0, 252, 0); 
}

.btn-secondary {
    background-color: #FFB74D;
    color: #010B13;
    border: none;
    padding: 8px 15px;
    font-size: 16px; 
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer; 
    transition: background-color 0.3s ease;
}

.btn-secondary:hover {
    /* background-color: #7CFC00; */
    background-color:rgb(255, 148, 77);
}

button svg {
    margin-right: 8px;
    width: 20px;
}

.card{
    shadow: 10px;
}

.logo {
    width: 125px; /* Ubah dengan lebar yang diinginkan */
    height: auto; /* Menjaga proporsi logo */
    display: block;
    margin: 0 auto; /* Menempatkan logo di tengah secara horizontal */
    padding: 10px; /* Memberikan padding di sekitar logo */
  }

.canvas-wrapper {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

canvas {
    display: block;
    position: relative;
    width: 100% !important;
    aspect-ratio: 16 / 9; 
    max-width: 100%;
    height: auto !important; 
    box-sizing: border-box;
}



@media print {
    
    header, footer, nav, aside, form, button, hr{
        display: none !important;
    }

    canvas {
        width: 100% !important;
        height: auto;
        max-width: 100%;
        aspect-ratio: 16 / 9;
    }
    
}

#LongestStayedInpatients {
    height: 350px !important;
}

#servedPercent {
    height: 200px !important;
}

@media (max-width: 991px) {

    .logo {
        width: 250px; 
        height: auto; 
        display: block;
        /* margin: 0 auto; */
        padding: 10px;
      }

    .navbar .container {
        border-radius: 0;
        padding: 1rem 2rem;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    }
    
    /* Navbar fixed-bottom untuk mobile */
    .navbar.fixed-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        margin: 0;
        padding: 0;
    }

    /* Mengatur navbar-nav agar tombol bersebelahan */
    .navbar-nav {
        display: flex; /* Menjadikan navbar-nav sebagai flex container */
        justify-content: space-evenly; /* Menyebarkan tombol secara merata */
        width: 100%; /* Memastikan navbar-nav mengisi seluruh lebar */
        margin: 0;
        padding: 0;
        list-style: none; /* Menghilangkan bullet list */
    }

    /* Mengatur setiap item navbar */
    .navbar-nav .nav-item {
        margin: 0;
        text-align: center;
    }

    /* Mengatur tampilan link navbar */
    .navbar-nav .nav-link {
        padding: 10px;
        font-size: 14px;
        display: block; /* Menjadikan nav-link elemen block agar mudah diatur */
    }

    #printButton {
        display: none;
    }

    main {
        padding-bottom : 85px;
    }
}

@media (min-width: 1990) {
    /* #LongestStayedInpatients {
        height: 240px !important;
    }
    
    #servedPercent {
        height: 300px !important;
        width: 100% !important;
    }
    
    #DailyBor {
        height: 105px !important;
        width: 100% !important;
    }

    #MostHospitalizedDiseases, #MonthlySupportServices {
        height: 200px !important;
        width: 100% !important;
    } */

    #ertoday, #dailybor {

        height: 50% !important;

    }

}