/*--------Mobile----------*/
@media (max-width:480px) {
}
/*--------Tablet - air ----------*/
@media (min-width:481px) and (max-width:768px) {
}

@media (max-width: 768px) {
    #map-main-home {
        padding-bottom: 65%;
    }

    #map-main {
        padding-bottom: 40%;
        height: 240px;
        width: 100% !important;
    }

    #map-main-place-mark-temp {
        width: 100%;
        height: 100%;
        padding-bottom: 80%;
    }

    #wrapper-temp,
    #garden-wrapper-temp {
        font-size: 2rem;
    }

    #wrapper-icon-hour-now,
    #garden-wrapper-icon-hour-now {
        width: 50px;
        height: 50px;
    }

    .register-page .carousel-item img {
        height: 250px;
        width: 200px;
        object-fit: cover;
    }

    .register-page .col-4 {
        display: none;
    }

        .register-page .col-4:first-child {
            display: block;
            width: 100%;
        }

    .register-page .carousel-item img {
        height: 150px;
        width: 100%;
        object-fit: cover;
    }

    .scroll_modal_custom {
        max-height: 650px;
        overflow-y: auto;
    }
    .chart-container {
        width: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    #chart_pie_count_status .apexcharts-legend {
        max-height: 40px !important; 
        overflow-y: auto;
    }
}

@media (min-width: 769px) {
    .chart-container {
        width: 49%;
    }
}

@media (min-width:769px) and (max-width:1079px) {
    .scroll_modal_custom {
        max-height: 600px;
        overflow-y: auto;
    }
    .draw_placemark_body {
        max-height: 550px;
        overflow-y: auto;
    }
}

@media (min-width:1080px) and (max-width:1300px) {
    .scroll_modal_custom {
        max-height: 550px;
        overflow-y: auto;
    }
    .draw_placemark_body {
        max-height: 450px;
        overflow-y: auto;
    }
}

@media (min-width:1300px) and (max-width:1499px) {
    .scroll_modal_custom {
        max-height: 600px;
        overflow-y: auto;
    }
    .draw_placemark_body {
        max-height: 650px;
        overflow-y: auto;
    }
}

@media (min-width:1500px)and (max-width:1750px) {
    .scroll_modal_custom {
        max-height: 700px;
        overflow-y: auto;
    }

    .draw_placemark_body {
        max-height: 600px;
        overflow-y: auto;
    }
}

@media (min-width:1750px) {
    .draw_placemark_body {
        max-height: 750px;
        overflow-y: auto;
    }
}