@media only screen and (max-width: 600px) {
    .logo-container {
        width: 100%;
        padding: 9px;
    }

    .header-filter {
        flex-direction: column;
        width: 100%;
        gap: 13px;
    }

    .input-group-container .search-container {
        margin-right: 0;
        height: 55px;
    }

    .input-group-container .search-container input {
        width: 100%;
    }

    .input-counter-date {
        justify-content: space-between;
        gap: 0;
    }

    .header-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .home-img {
        width: 100px;
        height: 100%;
        position: relative;
        top: 0px;
        left: 0px;
        margin-bottom: 10px;
        display: flex;
    }

    .navbar-custom {
        padding: 15px 4%;
    }

    .sub-header-content {
        padding: 0px 0;
        flex-direction: column;
    }

    .sub-header-content .preb-btn {
        position: relative;
        right: 0;
        border: 1px solid #00BFFF;
        padding: 9px;
        font-size: 15px;
        margin: 7px 0;
    }

    .gauge-container .gauge {
        width: 65%;
    }

    .flow-data-contain .prev-data {
        top: 6px;
        left: 190px;
    }
}