@media(max-width:1024px) {
    .tab_menu_container {
        overflow-x: auto;
    }

    .tab_menu_container ul {
        flex-wrap: nowrap;
        display: inline-flex;
        width: 100%;
        align-items: end;
        gap: 0.5vw;
    }

    .tab_menu_container ul li {
        width: auto;
        font-size: 19px;
        text-align: center;
        padding: 2px 10px;
        height: fit-content;
        display: flex;
        justify-content: center;
        white-space: nowrap;
    }

    .tab_menu_container::-webkit-scrollbar {
        height: 4px;
        /* Set the height of the horizontal scrollbar */
    }

    .tab_menu_container::-webkit-scrollbar-track {
        background: #e2e1cd;
        /* Change scrollbar track color */
    }

    .tab_menu_container::-webkit-scrollbar-thumb {
        background: #000000;
        /* Change scrollbar thumb color */
    }
}

@media(max-width:990px) {

    .content_column {
        width: 100%;
    }

    .body_wrapper_container {
        position: relative;
    }



    .sidebar_column {
        width: 100%;
    }

    .sidebar_wrapper {
        width: 100%;
    }

    .sidebar-contact {
        width: 40%;
        right: -40vw;
    }

    /* Mobile Tab View */
    .header_wrapper {
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
        padding: 0px 10px 0px 30px;
    }

    .header_wrapper .tab_column {
        position: fixed;
        right: -200vw;
        width: 30%;
        z-index: 11;
        transition: right 0.7s ease;
        top: 10.8vh;
    }

    .header_wrapper .tab_column.show {
        right: 0;
        top: 9vw;
        height: 90%;
    }

    .tab_menu_container {
        overflow-x: unset;
        background: #3e3737;
        display: flex;
        align-items: flex-start;
        padding: 10px 7px;
    }

    .tab_menu_container ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .tab_menu_container ul li {
        margin-bottom: 0.3vw;
        width: 100%;
        justify-content: flex-start;
        padding: 5px 15px;
    }

    .hamburger_menu_icon {
        display: block;
        position: relative;
        right: 1vw;
        top: 0;
        z-index: 99;
    }

    .hamburger_menu_icon i {
        font-size: 18px;
    }

    .footer_wrapper {
        height: auto;
        padding: 10px 0px;
    }

    .footer_content {
        font-size: 10px;
        text-align: left;
    }

    .header_wrapper .logo_column {
        width: 40%;

    }

    .header_wrapper .logo_column.text-right-desktop {
        display: flex;
        align-items: end;
        justify-content: end;
    }

    .sidebar_toggle {
        width: 35px;
        height: 40px;
        right: -4vw;
    }

    .sidebar_toggle:before {
        font-size: 20px;
    }

    .toggle:before {
        font-size: 20px;
    }

    .toggle {
        width: 5vw;
        left: -5vw;
    }

    .tab_menu_container {
        height: auto;
        max-height: 90%;
        overflow-y: auto;
    }

    .sidebar-contact {
        height: auto;
        min-height: 30%;
    }

    .toggle {
        min-height: 55px;
    }
}

@media(max-width:500px) {
    .sidebar_toggle {
        right: -7vw;
    }

    .menu-item {
        padding: 10px 9px;
    }

    .sidebar_wrapper .wrapper_2 {
        padding: 2rem 0px 0px 2.2rem;
    }
}

@media(max-width:700px) {
    .flow_item_one {
        display: flex;
        gap: 16px;
        flex-direction: column;
    }


    .status_select_flow select {
        width: 100%;
    }

}

@media(min-width:1800px) {
    .continous_flow_inner_wrapper .continous_flow_heading {
        padding: 0.5vw;
        font-size: 1vw;
    }

    .flow_item_one .continous_drop_label {
        padding: 0.5vw;
        font-size: 1vw;
    }

    .status_select_flow select {
        padding: 0.5vw;
        font-size: 1vw;
    }

    .water_usage {
        padding: 0.5vw;
        font-size: 1vw;
    }

    .water_dynamic_content {
        padding: 0.5vw;
        font-size: 1vw;
    }

    .btn_save_changes button {
        padding: 0.5vw;
        font-size: 1vw;
    }

    .btn_cancel_changes button {
        padding: 0.5vw;
        font-size: 1vw;
    }

    .flex_rate_one {
        padding: 0.5vw 1vw;
    }

    .flex_box_btn {
        padding: 0.4vw;
    }

    .checkbox_flow_txt {
        font-size: 1vw;
    }

    .checkbox_flow {
        width: 1vw;
        height: 1vw;

    }
}

.flow_setting_wrapper {
    width: 100%;
}

.flow_setting_inner_wrapper {
    display: flex;
    flex-direction: column;
    margin: 24px;
}

.flow_setting_value {
    color: #000;
    border: 2px solid #696969;
    padding: 0.5em;
}

.flow_one {
    margin: 1rem 0rem;
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox_flow {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 30px;
    height: 30px;
    background-color: #fff;
    /* White background */
    border: 4px solid #696969;
    outline: none;
    cursor: pointer;
    position: relative;
}

.checkbox_flow:hover {
    background-color: #C0C0C0;
    /* Light gray background when hovered */
}

.checkbox_flow:checked {
    background-color: #fff;
    /* White background when checked */
}

.checkbox_flow:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: -5px;
    width: 14px;
    height: 24px;
    border: solid #0f9d58;
    border-width: 0 5px 5px 0;
    transform: rotate(45deg);
}

.checkbox_flow_txt {
    color: #000;
    font-size: 16px;
    font-weight: 700;
    line-height: normal;
    font-family: sans-serif;
}

.flow_one.disabled .checkbox_flow {
    cursor: not-allowed;
}

.continous_flow_wrapper {
    width: 100%;
}

.continous_flow_inner_wrapper {
    margin: 0px 24px;
    border: 3px solid #0f9d58;

}


.continous_flow_inner_wrapper .continous_flow_heading {
    border: 2px solid #0f9d58;
    background-color: #0f9d58;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5em;
    color: #fff;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    font-family: sans-serif;
}

.flex_rate_one {
    display: flex;
    padding: 8px 16px;
    flex-direction: column;
    gap: 16px;
}

.flow_item_one .continous_drop_label {
    padding: 10px 0.5em;
    color: #ffffff;
    background-color: #696969;
    font-size: 1em;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    font-family: sans-serif;

}

.flow_item_one {
    display: flex;
    gap: 16px;
}



.water_usage {
    padding: 8px 0.5em;
    color: #ffffff;
    background-color: #696969;
    font-size: 1em;
    font-weight: 400;
    font-style: normal;
    line-height: normal;
    font-family: sans-serif;
    display: flex;
    justify-content: space-between;
}

.flow_item_water {
    display: flex;
}

.water_dynamic_content {
    border: 2px solid #696969;
    padding: 0.5em;
}


.flow_item_txt {
    display: flex;
}

.status_select_flow select {
    width: 350px;
    border: 2px solid #000000;
    padding: 0 0.5em;
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    font-family: sans-serif;
    -webkit-appearance: none;
    height: 100%;
}

.status_select_flow select::after {
    content: "\f022";
    font-family: "FontAwesome";
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    color: #000000;
    border-left: 2px solid #000000;
    padding-top: 4px;
    width: 34px;
    text-align: center;
    height: 100%;
}


.flex_box_btn {
    display: flex;
    gap: 16px;
    padding: 8px;
}

.btn_save_changes button {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    font-family: sans-serif;
    padding: 6px;
    background: #F0F0F0;
}


.btn_cancel_changes button {
    font-size: 16px;
    font-weight: 400;
    line-height: normal;
    font-family: sans-serif;
    border-radius: 1rem;
    padding: 0.5rem 1rem;
    height: 100%;
    float: left;
    background-color: #acacac;
    color: #e6e6e6;
    border: 1px solid #acacac;
}

@media(max-width:1360px) {
    .tab_menu_container {
        flex-wrap: wrap;
    }

    .tab_menu_container ul::-webkit-scrollbar {
        display: none;
    }

    .tab_menu_container ul {
        overflow-x: auto;
        display: flex;
        flex-wrap: nowrap;
    }
}

@media(max-width:1024px) {
    .header_wrapper {
        min-height: 7.8vh;
    }

    .body_wrapper_container {
        height: 86.2vh;
    }

    .header_wrapper .tab_column {
        margin: 0 15px;
    }

    .status_item .status_content .infoPanel .infotitle .locationcell {
        font-size: 16px;
    }

    .status_item .status_content .infoPanel .infotitle td {
        font-size: 16px;
    }
}

@media(max-width:990px) {
    .header_wrapper .tab_column {
        margin: 0;
    }

    .sidebar_nav {
        max-width: 40%;
    }

    .tab_menu_container ul {
        flex-direction: column;
    }
}

@media(max-width:768px) {
    .right_slide_wrapper .slide_header {
        font-size: 16px;
    }

    .status_item .status_content .infoPanel .infotitle .locationcell {
        font-size: 14px;
    }

    .status_item .status_content .infoPanel .infotitle td {
        font-size: 14px;
    }

    .header_wrapper .tab_column.show {
        top: 10vw
    }

    .tab_inner_content .chart_control .timepicker select {
        font-size: 16px !important;
    }

    .overview_box .overview_values_chart .chart_title {
        justify-content: flex-start;
        height: auto;
    }

    .chart_control .datepicker app-daterange .datepicker #chartsRange {
        font-size: inherit;
        width: fit-content;
    }

    #contentColumn .tab-content .chart_control {
        height: auto;
    }

    .inner_content_body {
        height: auto !important;
    }

    .overview_box {
        overflow-y: inherit;
    }

    .tab_inner_content {
        height: auto;
    }

    #trendvalueTab {
        width: 100%;
        flex-direction: row;
    }

    .chart_control .datepicker app-daterange .datepicker #chartsRange {
        font-size: inherit;
        width: 200px;
        text-align: center;
    }

    .chart_control .datepicker app-daterange .datepicker {
        height: 45px;
    }

    .report_wrapper .chart_control .timepicker select {
        height: 45px !important;
    }

    .report_wrapper .chart_control .day_btn button {
        height: 45px !important;
    }

}

@media(max-width:650px) {
    .header_wrapper .tab_column.show {
        top: 11vw;
    }

    .sidebar_nav {
        max-width: 50%;
    }
}

@media(max-width:600px) {
    .header_wrapper .tab_column.show {
        top: 14vw;
    }

    .header_wrapper .tab_column {
        width: 40%;
    }

    .inner_content_body .cards_container .cards_item .cards_title {
        font-size: 16px;
    }

    .close_card_wrapper i {
        font-size: 16px;
    }

    .inner_content_body .cards_container .cards_item .full_select select:first-child {
        font-size: 16px;
    }

    .inner_content_body .cards_container .cards_item .qty_container {
        font-size: 16px;
        line-height: normal;
    }

    .inner_content_body .cards_container .cards_item .qty_show_container {
        font-size: 16px;
        line-height: normal;
    }

    .inner_content_body .cards_container .cards_item .qty_container select {
        font-size: 16px;
    }
}

@media(max-width:500px) {
    .sidebar_nav {
        max-width: 60%;
    }
}

@media(max-width:450px) {
    .header_wrapper .tab_column.show {
        top: 15vw;
    }

    .header_wrapper .tab_column {
        width: 60%;
    }

    .sidebar-contact {
        width: 55%;
        right: -56vw;
    }
}

@media(max-width:405px) {
    .header_wrapper .tab_column.show {
        top: 17vw;
    }
}

@media(max-width:360px) {
    .header_wrapper .tab_column.show {
        top: 19vw;
    }
}